first commit
This commit is contained in:
Yusron alamsyah
@@ -0,0 +1,15 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
</script>
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12" md="12">
|
||||
<UiParentCard title="Icons">
|
||||
<div class="pa-7 pt-0">
|
||||
<iframe src="https://tabler-icons.io/" title="Inline Frame Example" frameborder="0" width="100%" height="650"></iframe>
|
||||
</div>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import UiParentCard from "@/components/shared/UiParentCard.vue";
|
||||
</script>
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12" md="12">
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<h5 class="text-h5 mb-3">Sample Page</h5>
|
||||
<p class="text-body-1">This is a sample page</p>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,25 @@
|
||||
<script setup lang="ts">
|
||||
/*Call Components*/
|
||||
import RevenueCard from '@/components/dashboard/RevenueCard.vue';
|
||||
import NewCustomer from '@/components/dashboard/NewCustomer.vue';
|
||||
import Totalincome from '@/components/dashboard/TotalIncome.vue';
|
||||
import RevenueProduct from '@/components/dashboard/RevenueProducts.vue';
|
||||
import DailyActivities from '@/components/dashboard/DailyActivities.vue';
|
||||
import BlogCards from '@/components/dashboard/BlogCards.vue';
|
||||
// definePageMeta({
|
||||
// middleware: 'role',
|
||||
// });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12" lg="8"><RevenueCard /></v-col>
|
||||
<v-col cols="12" lg="4"
|
||||
><NewCustomer class="mb-6" />
|
||||
<Totalincome />
|
||||
</v-col>
|
||||
<v-col cols="12" lg="8"><RevenueProduct/></v-col>
|
||||
<v-col cols="12" lg="4"><DailyActivities/> </v-col>
|
||||
<v-col cols="12"><BlogCards/></v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
/*-For Set Blank Layout-*/
|
||||
definePageMeta({
|
||||
layout: "blank",
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="d-flex justify-center align-center text-center h-100vh">
|
||||
<div>
|
||||
<img src="@/assets/images/backgrounds/errorimg.svg" width="500" alt="404" />
|
||||
<h1 class="text-h1 pt-3">Opps!!!</h1>
|
||||
<h4 class="text-h4 my-8">This page you are looking for could not be found.</h4>
|
||||
<v-btn flat color="primary" class="mb-4" to="/">Go Back to Home</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<div class="authentication auth-bg">
|
||||
<v-container class="pa-3 auth-login">
|
||||
<v-row class="h-100vh d-flex justify-center align-center">
|
||||
<v-col cols="12" class="d-flex align-center">
|
||||
<v-card rounded="md" elevation="10" class="mx-auto">
|
||||
<div class="pa-3">
|
||||
<v-row>
|
||||
<v-col
|
||||
cols="12"
|
||||
md="6"
|
||||
class="border-e px-md-12 px-6 py-md-12 py-6"
|
||||
>
|
||||
<div class="d-flex"><LayoutFullLogo /></div>
|
||||
<h2 class="text-34 my-6">Let's get you signed in two</h2>
|
||||
<AuthBoxedLoginForm />
|
||||
<h6
|
||||
class="text-16 text-medium-emphasis d-flex align-center mt-6"
|
||||
>
|
||||
Don’t have an account yet?
|
||||
<v-btn
|
||||
class="pl-0 text-primary text-16 opacity-1 pl-2"
|
||||
height="auto"
|
||||
to="/auth/register2"
|
||||
variant="plain"
|
||||
>Sign Up Now</v-btn
|
||||
>
|
||||
</h6>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6" class="d-md-flex d-none">
|
||||
<div
|
||||
class="d-flex flex-column justify-center px-md-12 px-6 h-100 align-center"
|
||||
>
|
||||
<div>
|
||||
<img
|
||||
src="@/assets/images/backgrounds/login-side.png"
|
||||
alt="matdash-img"
|
||||
width="300"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<v-carousel
|
||||
:continuous="false"
|
||||
:show-arrows="false"
|
||||
cycle
|
||||
height="200"
|
||||
hide-delimiter-background
|
||||
class="text-center mt-4"
|
||||
>
|
||||
<v-carousel-item
|
||||
v-for="item in AuthCuroselData"
|
||||
:key="item.title"
|
||||
>
|
||||
<h3 class="text-h3 mb-4">{{ item.title }}</h3>
|
||||
<p class="textSecondary text-body-1">
|
||||
{{ item.subtitle }}
|
||||
</p>
|
||||
<v-btn color="primary" class="mt-4" flat
|
||||
>Learn More</v-btn
|
||||
>
|
||||
</v-carousel-item>
|
||||
</v-carousel>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { AuthCuroselData } from "@/_mockApis/components/pages/auth";
|
||||
/*-For Set Blank Layout-*/
|
||||
definePageMeta({
|
||||
layout: "blank"
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
/*-For Set Blank Layout-*/
|
||||
definePageMeta({
|
||||
layout: "blank",
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="d-flex justify-center align-center text-center h-100">
|
||||
<div>
|
||||
<img src="~/assets/images/backgrounds/maintenance.svg" width="500" alt="under_construction" />
|
||||
<h1 class="text-h1">Opps!!!</h1>
|
||||
<h4 class="text-h4 my-8">Website is Under Construction. Check back later!</h4>
|
||||
<v-btn flat color="primary" class="mb-4" to="/">Go Back to Home</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,58 @@
|
||||
<script setup lang="ts">
|
||||
import LogoIcon from '~/components/layout/full/logo/Logo.vue';
|
||||
/* Register form */
|
||||
import RegisterForm from '~/components/auth/RegisterForm.vue';
|
||||
/*-For Set Blank Layout-*/
|
||||
definePageMeta({
|
||||
layout: "blank",
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="pa-3">
|
||||
<v-row class="h-100vh mh-100 auth">
|
||||
<v-col cols="12" lg="5" xl="4" class="bg-surface auth">
|
||||
<div class="d-flex justify-center align-center h-100">
|
||||
<div class="mt-xl-0 mt-5 auth-card">
|
||||
<LogoIcon />
|
||||
<h2 class="text-h3 my-3 heading">Sign Up</h2>
|
||||
<div class="mb-6">Your Admin Dashboard</div>
|
||||
<RegisterForm />
|
||||
<p class="d-flex align-center justify-center textSecondary mt-6 font-weight-medium">
|
||||
Already have an Account?
|
||||
<RouterLink
|
||||
class="pl-0 text-primary opacity-1 pl-2 font-weight-medium text-decoration-none"
|
||||
height="auto"
|
||||
to="/auth/login"
|
||||
variant="plain"
|
||||
>Sign in</RouterLink
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" lg="7" xl="8" class="d-lg-flex d-none align-center justify-center authentication bg-darkgray position-relative">
|
||||
<div class="circle-top"></div>
|
||||
<div>
|
||||
<LogoIcon class="circle-bottom" />
|
||||
</div>
|
||||
<div class="d-flex justify-center align-center w-100 h-n80">
|
||||
<v-row class="justify-center z-index-2">
|
||||
<v-col xl="6" lg="7">
|
||||
<h1 class="text-h1 text-white lh-normal">
|
||||
Welcome to
|
||||
<br />
|
||||
MatDash
|
||||
</h1>
|
||||
<p class="text-h6 text-white opacity-80 font-weight-regular mt-4 lh-md">
|
||||
MatDash helps developers to build organized and well<br />
|
||||
coded dashboards full of beautiful and rich modules.
|
||||
</p>
|
||||
<v-btn to="/" size="large" color="primary" class="mt-5"> Learn More </v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,22 @@
|
||||
<script setup lang="ts">
|
||||
/*Call Components*/
|
||||
import RevenueCard from '@/components/dashboard/RevenueCard.vue';
|
||||
import NewCustomer from '@/components/dashboard/NewCustomer.vue';
|
||||
import Totalincome from '@/components/dashboard/TotalIncome.vue';
|
||||
import RevenueProduct from '@/components/dashboard/RevenueProducts.vue';
|
||||
import DailyActivities from '@/components/dashboard/DailyActivities.vue';
|
||||
import BlogCards from '@/components/dashboard/BlogCards.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12" lg="8"><RevenueCard /></v-col>
|
||||
<v-col cols="12" lg="4"
|
||||
><NewCustomer class="mb-6" />
|
||||
<Totalincome />
|
||||
</v-col>
|
||||
<v-col cols="12" lg="8"><RevenueProduct/></v-col>
|
||||
<v-col cols="12" lg="4"><DailyActivities/> </v-col>
|
||||
<v-col cols="12"><BlogCards/></v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,37 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
import UiChildCard from '@/components/shared/UiChildCard.vue';
|
||||
|
||||
import Basic from '@/components/ui-components/alert/Basic.vue';
|
||||
import Filled from '@/components/ui-components/alert/Filled.vue';
|
||||
import Closable from '@/components/ui-components/alert/Closable.vue';
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-row>
|
||||
<!-- Basic -->
|
||||
<v-col cols="12">
|
||||
<UiChildCard title="Alert Basic">
|
||||
<Basic />
|
||||
</UiChildCard>
|
||||
</v-col>
|
||||
<!-- Filled -->
|
||||
<v-col cols="12">
|
||||
<UiChildCard title="Alert Filled">
|
||||
<Filled />
|
||||
</UiChildCard>
|
||||
</v-col>
|
||||
<!-- Closable -->
|
||||
<v-col cols="12">
|
||||
<UiChildCard title="Alert Closable">
|
||||
<Closable />
|
||||
</UiChildCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<SharedUiChildCard title="Avatar">
|
||||
<v-row>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Basic Avatar">
|
||||
<ui-components-avatar-basic-avatar />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Icon Avatar">
|
||||
<ui-components-avatar-icon-avatar />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Image Avatar">
|
||||
<ui-components-avatar-image-avatar />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Letter Avatar">
|
||||
<ui-components-avatar-letter-avatar />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Size Avatar">
|
||||
<ui-components-avatar-size-avatar />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Variant Avatar">
|
||||
<ui-components-avatar-variant-avatar />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,64 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
/*import tabler icons*/
|
||||
import { TrashIcon, SendIcon, BellIcon } from 'vue-tabler-icons';
|
||||
import UiChildCard from '@/components/shared/UiChildCard.vue';
|
||||
// icons
|
||||
import { AccessPointIcon } from 'vue-tabler-icons';
|
||||
import BaseButtons from '@/components/ui-components/button/BaseButtons.vue';
|
||||
import ColorsButtons from '@/components/ui-components/button/ColorsButtons.vue';
|
||||
import OutlinedButtons from '@/components/ui-components/button/OutlinedButtons.vue';
|
||||
import SizeButtons from '@/components/ui-components/button/SizeButtons.vue';
|
||||
import TextButtons from '@/components/ui-components/button/TextButtons.vue';
|
||||
import IconColorSizes from '@/components/ui-components/button/IconColorSizes.vue';
|
||||
// buttons color data
|
||||
const btnsColor = ref(['primary', 'secondary', 'success', 'error', 'warning']);
|
||||
|
||||
</script>
|
||||
|
||||
// ===============================|| Ui Buttons ||=============================== //
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
|
||||
<v-row>
|
||||
<!-- Base Buttons -->
|
||||
<v-col cols="12" sm="12">
|
||||
<UiChildCard title="Default">
|
||||
<BaseButtons />
|
||||
</UiChildCard>
|
||||
</v-col>
|
||||
<!-- Color Buttons -->
|
||||
<v-col cols="12" lg="6">
|
||||
<UiChildCard title="Colors">
|
||||
<ColorsButtons />
|
||||
</UiChildCard>
|
||||
</v-col>
|
||||
<!-- Outlined Buttons -->
|
||||
<v-col cols="12" lg="6">
|
||||
<UiChildCard title="Outlined">
|
||||
<OutlinedButtons />
|
||||
</UiChildCard>
|
||||
</v-col>
|
||||
<!-- Sizes -->
|
||||
<v-col cols="12" lg="12">
|
||||
<UiChildCard title="Size">
|
||||
<SizeButtons />
|
||||
</UiChildCard>
|
||||
</v-col>
|
||||
<!-- Text Buttons -->
|
||||
<v-col cols="12" lg="6">
|
||||
<UiChildCard title="Text Color">
|
||||
<TextButtons />
|
||||
</UiChildCard>
|
||||
</v-col>
|
||||
<!-- Icon Color Sizes -->
|
||||
<v-col cols="12" lg="6">
|
||||
<UiChildCard title="Icon Size">
|
||||
<IconColorSizes />
|
||||
</UiChildCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,50 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
|
||||
import UiChildCard from '@/components/shared/UiChildCard.vue';
|
||||
|
||||
import CardsProps from "@/components/ui-components/cards/CardsProps.vue";
|
||||
import CardsSlots from "@/components/ui-components/cards/CardsSlots.vue";
|
||||
import CardsContentWrap from "@/components/ui-components/cards/CardsContentWrap.vue";
|
||||
import CardsMedia from "@/components/ui-components/cards/CardsMedia.vue";
|
||||
import CardsWeather from "@/components/ui-components/cards/CardsWeather.vue";
|
||||
import CardsTwitter from "@/components/ui-components/cards/CardsTwitter.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" lg="6">
|
||||
<UiChildCard title="With Props">
|
||||
<CardsProps />
|
||||
</UiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" lg="6">
|
||||
<UiChildCard title="With Slots">
|
||||
<CardsSlots />
|
||||
</UiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" lg="6" class="d-flex align-items-stretch">
|
||||
<UiChildCard title="Content Wrap">
|
||||
<CardsContentWrap />
|
||||
</UiChildCard>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="12" lg="6" class="d-flex align-items-stretch">
|
||||
<UiChildCard title="Card Media">
|
||||
<CardsMedia />
|
||||
</UiChildCard>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="12" lg="6" class="d-flex align-items-stretch">
|
||||
<UiChildCard title="Weather Card">
|
||||
<CardsWeather />
|
||||
</UiChildCard>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="12" lg="6">
|
||||
<UiChildCard title="Twitter Card">
|
||||
<CardsTwitter />
|
||||
</UiChildCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<SharedUiChildCard title="Chip">
|
||||
<v-row>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Filled Color">
|
||||
<ui-components-chip-filled-color />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Outlined">
|
||||
<ui-components-chip-outlined />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Closable">
|
||||
<ui-components-chip-closable />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Disabled">
|
||||
<ui-components-chip-disabled />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Sizes">
|
||||
<ui-components-chip-sizes />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Custom Icon">
|
||||
<ui-components-chip-custom-icon />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Custom Icon Outlined">
|
||||
<ui-components-chip-custom-icon-outlined />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Label Chip">
|
||||
<ui-components-chip-label-chip />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,69 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import DialogsModel from '@/components/ui-components/dialogs/DialogsModel.vue';
|
||||
import DialogsActivator from '@/components/ui-components/dialogs/DialogsActivator.vue';
|
||||
import DialogsForm from '@/components/ui-components/dialogs/DialogsForm.vue';
|
||||
import DialogsFullscreen from '@/components/ui-components/dialogs/DialogsFullscreen.vue';
|
||||
import DialogsNested from '@/components/ui-components/dialogs/DialogsNested.vue';
|
||||
import DialogsPersistent from '@/components/ui-components/dialogs/DialogsPersistent.vue';
|
||||
import DialogsScrollable from '@/components/ui-components/dialogs/DialogsScrollable.vue';
|
||||
import DialogsTransitions from '@/components/ui-components/dialogs/DialogsTransitions.vue';
|
||||
import DialogConfirmModal from '@/components/ui-components/dialogs/DialogConfirmModal.vue';
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<SharedUiChildCard title="Dialogs">
|
||||
<v-row>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Dialog Model">
|
||||
<DialogsModel />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Dialog Activator">
|
||||
<DialogsActivator />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Dialog Form">
|
||||
<DialogsForm />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Dialog Fullscreen">
|
||||
<DialogsFullscreen />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Dialog Nested">
|
||||
<DialogsNested />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Dialog Persistent">
|
||||
<DialogsPersistent />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Dialog Scrollable">
|
||||
<DialogsScrollable />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Dialog Transitions">
|
||||
<DialogsTransitions />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Dialog Confirm Modal">
|
||||
<DialogConfirmModal />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<SharedUiChildCard title="Expansion Panel">
|
||||
<v-row>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Basic">
|
||||
<ui-components-expansionpanel-basic />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Advance">
|
||||
<ui-components-expansionpanel-advance />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Customized Icon">
|
||||
<ui-components-expansionpanel-customized-icon />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Default Expand">
|
||||
<ui-components-expansionpanel-default-expand />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Inset">
|
||||
<ui-components-expansionpanel-inset />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Popout">
|
||||
<ui-components-expansionpanel-popout />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<SharedUiChildCard title="List">
|
||||
<v-row>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Simple List">
|
||||
<ui-components-list-simple-list />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Folder List">
|
||||
<ui-components-list-folder-list />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Nested List">
|
||||
<ui-components-list-nested-list />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Rounded List">
|
||||
<ui-components-list-rounded-list />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Disabled List">
|
||||
<ui-components-list-disabled-list />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Scrollable List">
|
||||
<ui-components-list-scrollable-list />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Custom Align List">
|
||||
<ui-components-list-custom-align-list />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Switch List">
|
||||
<ui-components-list-switch-list />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,37 @@
|
||||
<script setup lang="ts">
|
||||
import MenusPopover from '@/components/ui-components/menus/MenusPopover.vue';
|
||||
import MenusHover from '@/components/ui-components/menus/MenusHover.vue';
|
||||
import MenusAnchor from '@/components/ui-components/menus/MenusAnchor.vue';
|
||||
import MenusActivatorTooltip from '@/components/ui-components/menus/MenusActivatorTooltip.vue';
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<SharedUiChildCard title="Menus">
|
||||
<v-row>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Menus Popover">
|
||||
<MenusPopover />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Menus Hover">
|
||||
<MenusHover />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Menus Anchor">
|
||||
<MenusAnchor />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Menus Activator Tooltip">
|
||||
<MenusActivatorTooltip />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<SharedUiChildCard title="Ratting">
|
||||
<v-row>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Basic Ratting">
|
||||
<ui-components-ratting-basic-ratting />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Size Ratting">
|
||||
<ui-components-ratting-size-ratting />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Length Ratting">
|
||||
<ui-components-ratting-length-ratting />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Read Only Ratting">
|
||||
<ui-components-ratting-read-only-ratting />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Clearable Ratting">
|
||||
<ui-components-ratting-clearable-ratting />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Half Ratting">
|
||||
<ui-components-ratting-half-ratting />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Hover Ratting">
|
||||
<ui-components-ratting-hover-ratting />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Icons Ratting">
|
||||
<ui-components-ratting-icons-ratting />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Label Ratting">
|
||||
<ui-components-ratting-label-ratting />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,111 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import UiChildCard from '@/components/shared/UiChildCard.vue';
|
||||
const desserts = ref([
|
||||
{
|
||||
name: "Frozen Yogurt",
|
||||
calories: 159,
|
||||
},
|
||||
{
|
||||
name: "Ice cream sandwich",
|
||||
calories: 237,
|
||||
},
|
||||
{
|
||||
name: "Eclair",
|
||||
calories: 262,
|
||||
},
|
||||
{
|
||||
name: "Cupcake",
|
||||
calories: 305,
|
||||
},
|
||||
{
|
||||
name: "Gingerbread",
|
||||
calories: 356,
|
||||
},
|
||||
{
|
||||
name: "Jelly bean",
|
||||
calories: 375,
|
||||
},
|
||||
{
|
||||
name: "Lollipop",
|
||||
calories: 392,
|
||||
},
|
||||
{
|
||||
name: "Honeycomb",
|
||||
calories: 408,
|
||||
},
|
||||
{
|
||||
name: "Donut",
|
||||
calories: 452,
|
||||
},
|
||||
{
|
||||
name: "KitKat",
|
||||
calories: 518,
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-row class="month-table">
|
||||
<v-col cols="12" sm="12" >
|
||||
<UiChildCard title="General Table">
|
||||
<v-table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-left">Name</th>
|
||||
<th class="text-left">Calories</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in desserts" :key="item.name">
|
||||
<td>{{ item.name }}</td>
|
||||
<td>{{ item.calories }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
|
||||
</UiChildCard>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="12">
|
||||
<UiChildCard title="Dark Table">
|
||||
<v-table theme="dark">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-left">Name</th>
|
||||
<th class="text-left">Calories</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in desserts" :key="item.name">
|
||||
<td>{{ item.name }}</td>
|
||||
<td>{{ item.calories }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
</UiChildCard>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="12">
|
||||
<UiChildCard title="Header Fixed Table">
|
||||
<v-table fixed-header height="300px">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-left">Name</th>
|
||||
<th class="text-left">Calories</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in desserts" :key="item.name">
|
||||
<td>{{ item.name }}</td>
|
||||
<td>{{ item.calories }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
</UiChildCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<SharedUiChildCard title="Tabs">
|
||||
<v-row>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Basic Tabs">
|
||||
<ui-components-tabs-basic-tabs />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Color Tabs">
|
||||
<ui-components-tabs-color-tabs />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Icon Tabs">
|
||||
<ui-components-tabs-icon-tabs />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Icons With Label Tabs">
|
||||
<ui-components-tabs-icons-with-label-tabs />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Center Tabs">
|
||||
<ui-components-tabs-center-tabs />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Align Center Tabs">
|
||||
<ui-components-tabs-align-center-tabs />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Align End Tabs">
|
||||
<ui-components-tabs-align-end-tabs />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Disable Tabs">
|
||||
<ui-components-tabs-disable-tabs />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Custom Icons">
|
||||
<ui-components-tabs-custom-icons />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<SharedUiChildCard title="Tooltip">
|
||||
<v-row>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Simple Tooltip">
|
||||
<ui-components-tooltip-simple-tooltip />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Icon Tooltip">
|
||||
<ui-components-tooltip-icon-tooltip />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Toggle Tolltip">
|
||||
<ui-components-tooltip-toggle-tolltip />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import Shadow from "@/components/style-components/shadow/Shadow.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<Shadow/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,18 @@
|
||||
<script setup lang="ts">
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
import Heading from "@/components/style-components/typography/Heading.vue";
|
||||
import Default from "@/components/style-components/typography/DefaultText.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12" md="12">
|
||||
<UiParentCard title="Default Text">
|
||||
<Heading/>
|
||||
</UiParentCard>
|
||||
<UiParentCard title="Default Text" class="mt-6">
|
||||
<Default/>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,57 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
// common components
|
||||
import BaseBreadcrumb from '~/components/shared/BaseBreadcrumb.vue';
|
||||
import UiParentCard from '~/components/shared/UiParentCard.vue';
|
||||
|
||||
//Table
|
||||
import Table1 from '~/components/table/Table1.vue';
|
||||
import Table2 from '~/components/table/Table2.vue';
|
||||
import Table3 from '~/components/table/Table3.vue';
|
||||
import Table4 from '~/components/table/Table4.vue';
|
||||
import Table5 from '~/components/table/Table5.vue';
|
||||
|
||||
definePageMeta({
|
||||
middleware: ["auth-menu"],
|
||||
role: ['super_admin','admin','user','staff'],
|
||||
//permission: ['view','update','create','delete'],
|
||||
});
|
||||
|
||||
// template breadcrumb
|
||||
const page = ref({ title: 'Basic Table' });
|
||||
const breadcrumbs = ref([
|
||||
{
|
||||
text: 'Dashboard',
|
||||
disabled: false,
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
text: 'Basic Table',
|
||||
disabled: true,
|
||||
href: '#'
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- ---------------------------------------------------- -->
|
||||
<!-- Table Basic -->
|
||||
<!-- ---------------------------------------------------- -->
|
||||
<BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<UiParentCard title="Basic Table">
|
||||
<!--Basic Table 1-->
|
||||
<Table1/>
|
||||
<!--Basic Table 2-->
|
||||
<Table2/>
|
||||
<!--Basic Table 3-->
|
||||
<Table3/>
|
||||
<!--Basic Table 4-->
|
||||
<Table4/>
|
||||
<!--Basic Table 5-->
|
||||
<Table5/>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,84 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
// common components
|
||||
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
import { darkTableData } from '@/_mockApis/components/table/basicTables';
|
||||
// template breadcrumb
|
||||
const page = ref({ title: 'Dark Table' });
|
||||
const breadcrumbs = ref([
|
||||
{
|
||||
text: 'Dashboard',
|
||||
disabled: false,
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
text: 'Dark Table',
|
||||
disabled: true,
|
||||
href: '#'
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- ---------------------------------------------------- -->
|
||||
<!-- Table Dark -->
|
||||
<!-- ---------------------------------------------------- -->
|
||||
<BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<UiParentCard title="Dark Table">
|
||||
<v-card class="border" elevation="0">
|
||||
<v-table theme="dark" class="month-table dark-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-h6 ps-6">Users</th>
|
||||
<th class="text-h6">Project Name</th>
|
||||
<th class="text-h6">Team</th>
|
||||
<th class="text-h6">Status</th>
|
||||
<th class="text-h6">Budget</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in darkTableData" :key="item.name" class="month-item">
|
||||
<td class="ps-6">
|
||||
<div class="d-flex gap-3 align-center">
|
||||
<v-avatar size="40">
|
||||
<img :src="item.avatar" alt="avatar" height="40" />
|
||||
</v-avatar>
|
||||
<div>
|
||||
<h6 class="text-h6">{{ item.name }}</h6>
|
||||
<div class="text-body-1 textSecondary">{{ item.post }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<h6 class="text-h6 font-weight-medium text-medium-emphasis">{{ item.pname }}</h6>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-center">
|
||||
<div class="ml-2 d-flex flex-row-reverse">
|
||||
<v-avatar v-for="team in item.teams" :key="team.id" size="35"
|
||||
:class="'ml-n2 avtar-border bg-' + team.color">
|
||||
{{ team.text }}
|
||||
</v-avatar>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<v-chip rounded="sm" :color="item.statuscolor" size="small"
|
||||
label>{{
|
||||
item.status
|
||||
}}</v-chip>
|
||||
</td>
|
||||
<td>
|
||||
<h6 class="text-h6">{{ item.budget }}</h6>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
</v-card>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,79 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
// common components
|
||||
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
import { tableDensityData } from '@/_mockApis/components/table/basicTables';
|
||||
// template breadcrumb
|
||||
const page = ref({ title: 'Density Table' });
|
||||
const breadcrumbs = ref([
|
||||
{
|
||||
text: 'Dashboard',
|
||||
disabled: false,
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
text: 'Density Table',
|
||||
disabled: true,
|
||||
href: '#'
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- ---------------------------------------------------- -->
|
||||
<!-- Table Density -->
|
||||
<!-- ---------------------------------------------------- -->
|
||||
<BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<UiParentCard title="Density Table">
|
||||
<!-- <v-table > -->
|
||||
<v-card class="border" elevation="0">
|
||||
<v-table class="month-table" density="compact">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-h6 ps-6">User</th>
|
||||
<th class="text-h6">Project Name</th>
|
||||
<th class="text-h6">Users</th>
|
||||
<th class="text-h6">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in tableDensityData" :key="item.name" class="month-item">
|
||||
<td class="ps-6">
|
||||
<div class="d-flex align-center">
|
||||
<v-avatar size="40">
|
||||
<img :src="item.avatar" alt="avatar" height="40" />
|
||||
</v-avatar>
|
||||
<div class="ml-4">
|
||||
<h6 class="text-h6">{{ item.name }}</h6>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="text-subtitle-1 text-medium-emphasis">{{ item.post }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-center">
|
||||
<div class="ml-2 d-flex flex-row-reverse">
|
||||
<v-avatar v-for="user in item.users" :key="user.id" size="40" class="ml-n2 avtar-border">
|
||||
<img :src="user.icon" alt="avatar" height="40" />
|
||||
</v-avatar>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<v-chip rounded="sm" class="font-weight-bold " :color="item.statuscolor" size="small">
|
||||
{{ item.status }}
|
||||
</v-chip>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
</v-card>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,44 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
// common components
|
||||
//import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
|
||||
//Table
|
||||
import EditableTable from '~/components/table/EditableTable.vue';
|
||||
|
||||
definePageMeta({
|
||||
middleware: ["auth-menu"],
|
||||
role: ['super_admin','admin','user','staff'],
|
||||
//permission: ['view','update','create','delete'],
|
||||
});
|
||||
|
||||
// template breadcrumb
|
||||
const page = ref({ title: 'Editable Table' });
|
||||
const breadcrumbs = ref([
|
||||
{
|
||||
text: 'Dashboard',
|
||||
disabled: false,
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
text: 'Editable Table',
|
||||
disabled: true,
|
||||
href: '#'
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- ---------------------------------------------------- -->
|
||||
<!-- Table Editable -->
|
||||
<!-- ---------------------------------------------------- -->
|
||||
<BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<UiParentCard title="Editable Table">
|
||||
<EditableTable />
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,90 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
// common components
|
||||
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
import {tableFixedHeaderData} from '@/_mockApis/components/table/basicTables';
|
||||
// template breadcrumb
|
||||
const page = ref({ title: 'Fixed Header Table' });
|
||||
const breadcrumbs = ref([
|
||||
{
|
||||
text: 'Dashboard',
|
||||
disabled: false,
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
text: 'Fixed Header Table',
|
||||
disabled: true,
|
||||
href: '#'
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- ---------------------------------------------------- -->
|
||||
<!-- Table Header Fixed -->
|
||||
<!-- ---------------------------------------------------- -->
|
||||
<BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<UiParentCard title="Header Fixed Table">
|
||||
<v-card class="border" elevation="0">
|
||||
<v-table class="month-table" fixed-header height="400px">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-h6 ps-6">Customer</th>
|
||||
<th class="text-h6">Status</th>
|
||||
<th class="text-h6">Email Address</th>
|
||||
<th class="text-h6">Teams</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in tableFixedHeaderData" :key="item.name" class="month-item">
|
||||
<td class=" ps-6">
|
||||
<div class="d-flex gap-3 align-center">
|
||||
<v-avatar size="40">
|
||||
<img :src="item.avatar" alt="avatar" height="40" />
|
||||
</v-avatar>
|
||||
<div>
|
||||
<h6 class="text-h6">{{ item.name }}</h6>
|
||||
<div class="text-body-1 textSecondary">{{ item.handle }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<v-chip rounded="sm" v-if="item.statusoffline" class="font-weight-bold " :color="item.statuscolor" size="small">
|
||||
<ClockHour4Icon size="15" class="mr-1" />
|
||||
{{ item.status }}
|
||||
</v-chip>
|
||||
|
||||
<v-chip rounded="sm" v-else class="font-weight-bold " :color="item.statuscolor" size="small">
|
||||
<CircleIcon size="15" class="mr-1" />
|
||||
{{ item.status }}
|
||||
</v-chip>
|
||||
</td>
|
||||
<td>
|
||||
<div class="text-subtitle-1 text-medium-emphasis">{{ item.email }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-center">
|
||||
<div class="d-flex gap-2">
|
||||
<v-chip
|
||||
v-for="team in item.teams"
|
||||
:key="team.status"
|
||||
rounded="sm"
|
||||
:class="'font-weight-bold bg-' + team.statuscolor"
|
||||
size="small"
|
||||
>
|
||||
{{ team.status }}
|
||||
</v-chip>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
</v-card>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,95 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
// common components
|
||||
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
import { heightTableData, tableActionData} from '@/_mockApis/components/table/basicTables';
|
||||
// template breadcrumb
|
||||
const page = ref({ title: 'Height Table' });
|
||||
const breadcrumbs = ref([
|
||||
{
|
||||
text: 'Dashboard',
|
||||
disabled: false,
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
text: 'Height Table',
|
||||
disabled: true,
|
||||
href: '#'
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- ---------------------------------------------------- -->
|
||||
<!-- Table Height -->
|
||||
<!-- ---------------------------------------------------- -->
|
||||
<BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<UiParentCard title="Height Table">
|
||||
<v-card class="border" elevation="0">
|
||||
<v-table class="month-table" height="400px">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-h6 ps-6">Authors</th>
|
||||
<th class="text-h6">Courses</th>
|
||||
<th class="text-h6">Users</th>
|
||||
<th class="text-h6"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in heightTableData" :key="item.name" class="month-item">
|
||||
<td class="ps-6">
|
||||
<div class="d-flex gap-3 align-center">
|
||||
<v-avatar size="42" rounded="md">
|
||||
<img :src="item.avatar" alt="avatar" height="42" />
|
||||
</v-avatar>
|
||||
<div>
|
||||
<h6 class="text-subtitle-1 font-weight-bold">{{ item.name }}</h6>
|
||||
<div class="text-body-1 textSecondary mt-1">{{ item.handle }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-center">
|
||||
<div class="d-flex">
|
||||
<v-chip v-for="course in item.courses" :key="course.status" rounded="sm"
|
||||
class="mr-2" :color="course.statuscolor" size="small">
|
||||
{{ course.status }}
|
||||
</v-chip>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="text-subtitle-1 text-medium-emphasis">{{ item.users }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<v-btn size="30" icon variant="flat" class="grey100">
|
||||
<v-avatar size="22">
|
||||
<DotsIcon size="20" color="grey100" />
|
||||
</v-avatar>
|
||||
<v-menu activator="parent">
|
||||
<v-list>
|
||||
<v-list-item value="action" v-for="list in tableActionData" :key="list.listtitle"
|
||||
hide-details min-height="38">
|
||||
<v-list-item-title>
|
||||
<v-avatar size="20" class="mr-2">
|
||||
<component :is="list.icon" stroke-width="2" size="20" />
|
||||
</v-avatar>
|
||||
{{ list.listtitle }}
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</v-btn>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
</v-card>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,99 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
import { BasicDatatables } from '@/_mockApis/components/datatable/dataTable';
|
||||
|
||||
|
||||
const page = ref({ title: 'Basic Data Tables' });
|
||||
const breadcrumbs = ref([
|
||||
{
|
||||
text: 'Dashboard',
|
||||
disabled: false,
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
text: 'Basic Data Tables',
|
||||
disabled: true,
|
||||
href: '#'
|
||||
}
|
||||
]);
|
||||
|
||||
/*Header Data*/
|
||||
const headers :any = ref([
|
||||
{ title: 'Name', align: 'start', key: 'name' },
|
||||
{ title: 'Project Name', align: 'start', key: 'project' },
|
||||
{ title: 'Post', align: 'start', key: 'post' },
|
||||
{ title: 'Status', align: 'start', key: 'status' },
|
||||
{ title: 'Budget', align: 'end', key: 'budget' },
|
||||
])
|
||||
|
||||
const expanded = ref();
|
||||
const headersExpand :any = ref([
|
||||
{ title: 'Name', align: 'start', key: 'name', sortable: false, },
|
||||
{ title: 'Project Name', align: 'start', key: 'project' },
|
||||
{ title: 'Post', align: 'start', key: 'post' },
|
||||
{ title: 'Status', align: 'start', key: 'status' },
|
||||
{ title: 'Budget', align: 'end', key: 'budget' },
|
||||
{ title: '', key: 'data-table-expand' },
|
||||
])
|
||||
|
||||
|
||||
/*for status color*/
|
||||
function getColor(status: string) {
|
||||
if (status == 'Active') return '#13DEB9'
|
||||
else if (status == 'Cancel') return '#FA896B'
|
||||
else if (status == 'Completed') return '#5D87FF'
|
||||
else return '#FFAE1F'
|
||||
}
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<UiParentCard title="Basic Table">
|
||||
<v-data-table items-per-page="5" :headers="headers" :items="BasicDatatables" item-value="name"
|
||||
class="border rounded-md datatabels">
|
||||
</v-data-table>
|
||||
</UiParentCard>
|
||||
|
||||
<UiParentCard title="Selection" class="mt-6 pb-0">
|
||||
<v-data-table items-per-page="5" :headers="headers" :items="BasicDatatables" item-value="name" show-select
|
||||
class="border rounded-md datatabels">
|
||||
</v-data-table>
|
||||
</UiParentCard>
|
||||
|
||||
<UiParentCard title="Density" class="mt-6">
|
||||
<v-data-table items-per-page="5" :headers="headers" :items="BasicDatatables" item-value="name"
|
||||
density="compact" class="border rounded-md datatabels">
|
||||
</v-data-table>
|
||||
</UiParentCard>
|
||||
|
||||
<UiParentCard title="Item" class="mt-6">
|
||||
<v-data-table items-per-page="5" :headers="headers" :items="BasicDatatables" item-value="name"
|
||||
class="border rounded-md datatabels">
|
||||
<template v-slot:item.status="{ item }">
|
||||
<v-chip :color="getColor(item.status)">
|
||||
{{ item.status }}
|
||||
</v-chip>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</UiParentCard>
|
||||
|
||||
<UiParentCard title="Expandable Rows" class="mt-6">
|
||||
<v-data-table v-model:expanded="expanded" :headers="headersExpand" :items="BasicDatatables"
|
||||
item-value="name" show-expand class="border rounded-md datatabels">
|
||||
<template v-slot:expanded-row="{ columns, item }">
|
||||
<tr>
|
||||
<td :colspan="columns.length">
|
||||
More info about {{ item.name }}
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,296 @@
|
||||
<script setup>
|
||||
import { computed, nextTick, ref, watch } from 'vue';
|
||||
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import { useHakAksesStore } from '@/stores/sidebarMenuAkses/useMenuAksesStore'
|
||||
import { usePermission } from '@/composables/sidebarMenu/useSidebarAkses'
|
||||
import { ca } from 'vuetify/locale';
|
||||
|
||||
|
||||
definePageMeta({
|
||||
middleware: ["auth-menu"],
|
||||
role: ['super_admin','admin','user','staff'],
|
||||
//permission: ['view','update','create','delete'],
|
||||
});
|
||||
|
||||
|
||||
|
||||
const canAction = usePermission(useRoute().path); // cek permission halaman
|
||||
const canAkses = canAction.canAkses;
|
||||
if(canAkses?.includes('view')){
|
||||
console.log('permision halaman',canAkses);
|
||||
}
|
||||
|
||||
const page = ref({ title: 'CRUD Table' });
|
||||
const breadcrumbs = ref([
|
||||
{
|
||||
text: 'Dashboard',
|
||||
disabled: false,
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
text: 'CRUD Table',
|
||||
disabled: true,
|
||||
href: '#'
|
||||
}
|
||||
]);
|
||||
|
||||
const dialog = ref(false)
|
||||
const dialogDelete = ref(false)
|
||||
const headers = ref([
|
||||
{
|
||||
title: 'Dessert (100g serving)',
|
||||
align: 'start',
|
||||
sortable: false,
|
||||
key: 'name',
|
||||
},
|
||||
{ title: 'Calories', key: 'calories' },
|
||||
{ title: 'Fat (g)', key: 'fat' },
|
||||
{ title: 'Carbs (g)', key: 'carbs' },
|
||||
{ title: 'Protein (g)', key: 'protein' },
|
||||
{ title: 'Actions', key: 'actions', sortable: false },
|
||||
])
|
||||
const desserts = ref([])
|
||||
const editedIndex = ref(-1)
|
||||
const editedItem = ref({
|
||||
name: '',
|
||||
calories: 0,
|
||||
fat: 0,
|
||||
carbs: 0,
|
||||
protein: 0,
|
||||
})
|
||||
const defaultItem = ref({
|
||||
name: '',
|
||||
calories: 0,
|
||||
fat: 0,
|
||||
carbs: 0,
|
||||
protein: 0,
|
||||
})
|
||||
const formTitle = computed(() => {
|
||||
return editedIndex.value === -1 ? 'New Item' : 'Edit Item'
|
||||
})
|
||||
function initialize() {
|
||||
desserts.value = [
|
||||
{
|
||||
name: 'Frozen Yogurt',
|
||||
calories: 159,
|
||||
fat: 6,
|
||||
carbs: 24,
|
||||
protein: 4,
|
||||
},
|
||||
{
|
||||
name: 'Ice cream sandwich',
|
||||
calories: 237,
|
||||
fat: 9,
|
||||
carbs: 37,
|
||||
protein: 4.3,
|
||||
},
|
||||
{
|
||||
name: 'Eclair',
|
||||
calories: 262,
|
||||
fat: 16,
|
||||
carbs: 23,
|
||||
protein: 6,
|
||||
},
|
||||
{
|
||||
name: 'Cupcake',
|
||||
calories: 305,
|
||||
fat: 3.7,
|
||||
carbs: 67,
|
||||
protein: 4.3,
|
||||
},
|
||||
{
|
||||
name: 'Gingerbread',
|
||||
calories: 356,
|
||||
fat: 16,
|
||||
carbs: 49,
|
||||
protein: 3.9,
|
||||
},
|
||||
{
|
||||
name: 'Jelly bean',
|
||||
calories: 375,
|
||||
fat: 0,
|
||||
carbs: 94,
|
||||
protein: 0,
|
||||
},
|
||||
{
|
||||
name: 'Lollipop',
|
||||
calories: 392,
|
||||
fat: 0.2,
|
||||
carbs: 98,
|
||||
protein: 0,
|
||||
},
|
||||
{
|
||||
name: 'Honeycomb',
|
||||
calories: 408,
|
||||
fat: 3.2,
|
||||
carbs: 87,
|
||||
protein: 6.5,
|
||||
},
|
||||
{
|
||||
name: 'Donut',
|
||||
calories: 452,
|
||||
fat: 25,
|
||||
carbs: 51,
|
||||
protein: 4.9,
|
||||
},
|
||||
{
|
||||
name: 'KitKat',
|
||||
calories: 518,
|
||||
fat: 26,
|
||||
carbs: 65,
|
||||
protein: 7,
|
||||
},
|
||||
]
|
||||
}
|
||||
function editItem(item) {
|
||||
editedIndex.value = desserts.value.indexOf(item)
|
||||
editedItem.value = Object.assign({}, item)
|
||||
dialog.value = true
|
||||
}
|
||||
function deleteItem(item) {
|
||||
editedIndex.value = desserts.value.indexOf(item)
|
||||
editedItem.value = Object.assign({}, item)
|
||||
dialogDelete.value = true
|
||||
}
|
||||
function deleteItemConfirm() {
|
||||
desserts.value.splice(editedIndex.value, 1)
|
||||
closeDelete()
|
||||
}
|
||||
function close() {
|
||||
dialog.value = false
|
||||
nextTick(() => {
|
||||
editedItem.value = Object.assign({}, defaultItem.value)
|
||||
editedIndex.value = -1
|
||||
})
|
||||
}
|
||||
function closeDelete() {
|
||||
dialogDelete.value = false
|
||||
nextTick(() => {
|
||||
editedItem.value = Object.assign({}, defaultItem.value)
|
||||
editedIndex.value = -1
|
||||
})
|
||||
}
|
||||
function save() {
|
||||
if (editedIndex.value > -1) {
|
||||
Object.assign(desserts.value[editedIndex.value], editedItem.value)
|
||||
} else {
|
||||
desserts.value.push(editedItem.value)
|
||||
}
|
||||
close()
|
||||
}
|
||||
watch(dialog, val => {
|
||||
val || close()
|
||||
})
|
||||
watch(dialogDelete, val => {
|
||||
val || closeDelete()
|
||||
})
|
||||
initialize()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
|
||||
<!-- <SharedBaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></SharedBaseBreadcrumb> -->
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<UiParentCard title="Crud Table">
|
||||
<v-data-table class="border rounded-md datatabels" :headers="headers" :items="desserts" :sort-by="[{ key: 'calories', order: 'asc' }]">
|
||||
<template v-slot:top>
|
||||
<v-toolbar class="bg-lightprimary" flat>
|
||||
<v-toolbar-title>My Crud Table</v-toolbar-title>
|
||||
<v-divider class="mx-4" inset vertical></v-divider>
|
||||
<v-spacer></v-spacer>
|
||||
<v-dialog v-model="dialog" max-width="500px">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn :disabled="!canAkses?.includes('create')" color="primary" variant="flat" dark v-bind="props" >Add New Item</v-btn>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-card-title class="pa-4 bg-primary">
|
||||
<span class="text-h5">{{ formTitle }}</span>
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text>
|
||||
<v-container class="px-0">
|
||||
<v-row>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field v-model="editedItem.name"
|
||||
label="Dessert name"></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field v-model="editedItem.calories"
|
||||
label="Calories"></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field v-model="editedItem.fat" label="Fat (g)"></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field v-model="editedItem.carbs"
|
||||
label="Carbs (g)"></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="4">
|
||||
<v-text-field v-model="editedItem.protein"
|
||||
label="Protein (g)"></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="error" variant="flat" dark @click="close">
|
||||
Cancel
|
||||
</v-btn>
|
||||
<v-btn color="primary" variant="flat" dark @click="save">
|
||||
Save
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
<v-dialog v-model="dialogDelete" max-width="500px">
|
||||
<v-card>
|
||||
<v-card-title class="text-h5 text-center py-6">Are you sure you want to delete this item?</v-card-title>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="error" variant="flat" dark @click="closeDelete">Cancel</v-btn>
|
||||
<v-btn color="primary" variant="flat" dark @click="deleteItemConfirm">OK</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-toolbar>
|
||||
</template>
|
||||
<template v-slot:item.actions="{ item }">
|
||||
<div class="d-flex gap-3">
|
||||
<Icon
|
||||
v-show="canAkses?.includes('update')"
|
||||
icon="solar:pen-new-square-broken"
|
||||
height="20"
|
||||
class="text-primary cursor-pointer"
|
||||
size="small"
|
||||
@click="editItem(item)"
|
||||
|
||||
|
||||
/>
|
||||
<Icon
|
||||
v-show="canAkses?.includes('delete')"
|
||||
icon="solar:trash-bin-minimalistic-linear"
|
||||
height="20"
|
||||
class="text-error cursor-pointer"
|
||||
size="small"
|
||||
@click="deleteItem(item)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:no-data>
|
||||
<v-btn color="primary" @click="initialize">
|
||||
Reset
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -0,0 +1,109 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
import { BasicDatatables, UppercaseFilter,Filtrable } from '@/_mockApis/components/datatable/dataTable';
|
||||
const page = ref({ title: 'Data Table Filtering' });
|
||||
const breadcrumbs = ref([
|
||||
{
|
||||
text: 'Dashboard',
|
||||
disabled: false,
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
text: 'Data Table Filtering',
|
||||
disabled: true,
|
||||
href: '#'
|
||||
}
|
||||
]);
|
||||
|
||||
/*Header Data*/
|
||||
const search = ref();
|
||||
const customsearch = ref();
|
||||
const headers : any = ref([
|
||||
{ title: 'Name', align: 'start', key: 'name' },
|
||||
{ title: 'Project Name', align: 'start', key: 'project' },
|
||||
{ title: 'Post', align: 'start', key: 'post' },
|
||||
{ title: 'Status', align: 'start', key: 'status' },
|
||||
{ title: 'Budget', align: 'end', key: 'budget' },
|
||||
])
|
||||
|
||||
const filtrable = ref('')
|
||||
|
||||
function filterOnlyCapsText(value: { toString: () => string; } | null, query: string | null, item: any) {
|
||||
return value != null &&
|
||||
query != null &&
|
||||
typeof value === 'string' &&
|
||||
value.toString().toLocaleUpperCase().indexOf(query) !== -1
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<UiParentCard title="Basic Filter">
|
||||
<v-text-field v-model="search" append-inner-icon="mdi-magnify" label="Search" single-line hide-details
|
||||
class="mb-5" />
|
||||
<v-data-table items-per-page="5" :headers="headers" :items="BasicDatatables" :search="search"
|
||||
class="border rounded-md datatabels">
|
||||
</v-data-table>
|
||||
</UiParentCard>
|
||||
|
||||
<UiParentCard title="Custom Filter" class="mt-6">
|
||||
<v-text-field v-model="customsearch" append-inner-icon="mdi-magnify" label="Search (UPPER CASE ONLY)"
|
||||
single-line hide-details class="mb-5" />
|
||||
<v-data-table items-per-page="5" :headers="headers" :items="UppercaseFilter" :search="customsearch"
|
||||
:custom-filter="filterOnlyCapsText" class="border rounded-md datatabels">
|
||||
</v-data-table>
|
||||
</UiParentCard>
|
||||
|
||||
<UiParentCard title="Filterable" class="mt-6">
|
||||
|
||||
<v-card flat>
|
||||
<v-card-title class="d-flex align-center px-0 pb-3">
|
||||
|
||||
My Table
|
||||
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<v-text-field v-model="filtrable" prepend-inner-icon="mdi-magnify" density="compact" label="Search"
|
||||
single-line flat hide-details variant="solo-filled"></v-text-field>
|
||||
</v-card-title>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-data-table v-model:search="filtrable" :items="Filtrable">
|
||||
<template v-slot:header.stock>
|
||||
<div class="text-end">Stock</div>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.image="{ item }">
|
||||
<v-card class="my-2" elevation="2">
|
||||
<v-img :src="`${item.image}`"
|
||||
height="80" class="rounded-md" cover></v-img>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.rating="{ item }">
|
||||
<v-rating :model-value="item.rating" color="warning" density="compact" size="small"
|
||||
readonly></v-rating>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.stock="{ item }">
|
||||
<div class="text-end">
|
||||
<v-chip :color="item.stock ? 'success' : 'error'"
|
||||
:text="item.stock ? 'In stock' : 'Out of stock'" class="text-uppercase" label
|
||||
size="small"></v-chip>
|
||||
</div>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</v-card>
|
||||
|
||||
</UiParentCard>
|
||||
|
||||
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
import {BasicDatatables} from '@/_mockApis/components/datatable/dataTable';
|
||||
const page = ref({ title: 'Data Tables Grouping' });
|
||||
const breadcrumbs = ref([
|
||||
{
|
||||
text: 'Dashboard',
|
||||
disabled: false,
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
text: 'Data Tables Grouping',
|
||||
disabled: true,
|
||||
href: '#'
|
||||
}
|
||||
]);
|
||||
|
||||
/*Header Data*/
|
||||
const sortBy : any = ref([
|
||||
{ key: 'name', order: 'asc' }
|
||||
])
|
||||
const groupBy : any = ref([
|
||||
{ key: 'status', order: 'asc' }
|
||||
])
|
||||
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<UiParentCard title="Grouping">
|
||||
<v-data-table items-per-page="5" :items="BasicDatatables" item-value="name"
|
||||
:group-by="groupBy" :sort-by="sortBy"
|
||||
class="border rounded-md datatabels">
|
||||
</v-data-table>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
import { BasicDatatables } from '@/_mockApis/components/datatable/dataTable';
|
||||
|
||||
const page = ref({ title: 'Data Table Headers' });
|
||||
const breadcrumbs = ref([
|
||||
{
|
||||
text: 'Dashboard',
|
||||
disabled: false,
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
text: 'Data Table Headers',
|
||||
disabled: true,
|
||||
href: '#'
|
||||
}
|
||||
]);
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<UiParentCard title="Column Slot">
|
||||
<v-data-table items-per-page="5" :items="BasicDatatables" item-value="name"
|
||||
class="border rounded-md datatabels">
|
||||
<template v-slot:column.name="{ column }">
|
||||
{{ column.title.toUpperCase() }}
|
||||
</template>
|
||||
</v-data-table>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
<script setup lang="ts">
|
||||
import { ref,computed } from 'vue';
|
||||
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
import { BasicDatatables } from '@/_mockApis/components/datatable/dataTable';
|
||||
const page = ref({ title: 'Data Table Pagination' });
|
||||
const breadcrumbs = ref([
|
||||
{
|
||||
text: 'Dashboard',
|
||||
disabled: false,
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
text: 'Data Table Pagination',
|
||||
disabled: true,
|
||||
href: '#'
|
||||
}
|
||||
]);
|
||||
|
||||
|
||||
|
||||
/*Header Data*/
|
||||
const pagination = ref(1);
|
||||
const itemsPerPage = ref(5);
|
||||
const headers : any = ref([
|
||||
{ title: 'Name', align: 'start', key: 'name' },
|
||||
{ title: 'Project Name', align: 'start', key: 'project' },
|
||||
{ title: 'Post', align: 'start', key: 'post' },
|
||||
{ title: 'Status', align: 'start', key: 'status' },
|
||||
{ title: 'Budget', align: 'end', key: 'budget' },
|
||||
|
||||
])
|
||||
|
||||
/*page count*/
|
||||
const pageCount = Math.ceil(BasicDatatables.length / itemsPerPage.value)
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<UiParentCard title="External Pagination">
|
||||
<v-data-table :items-per-page="itemsPerPage" :headers="headers" :items="BasicDatatables" v-model:page="pagination"
|
||||
hide-default-footer class="border rounded-md datatabels">
|
||||
<template v-slot:bottom>
|
||||
<div class="text-center pt-2 mb-3 px-3">
|
||||
<v-pagination v-model="pagination" :length="pageCount"></v-pagination>
|
||||
<v-text-field :model-value="itemsPerPage" class="pa-2" label="Items per page" type="number"
|
||||
min="-1" max="15" hide-details
|
||||
@update:model-value="itemsPerPage = parseInt($event, 10)"></v-text-field>
|
||||
</div>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
import { SelectedRow, BasicDatatables } from '@/_mockApis/components/datatable/dataTable';
|
||||
const page = ref({ title: 'Data Tables Selection' });
|
||||
const selected = ref();
|
||||
const breadcrumbs = ref([
|
||||
{
|
||||
text: 'Dashboard',
|
||||
disabled: false,
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
text: 'Data Tables Selection',
|
||||
disabled: true,
|
||||
href: '#'
|
||||
}
|
||||
]);
|
||||
|
||||
/*Header Data*/
|
||||
const headers :any = ref([
|
||||
{ title: 'Name', align: 'start', key: 'name' },
|
||||
{ title: 'Project Name', align: 'start', key: 'project' },
|
||||
{ title: 'Post', align: 'start', key: 'post' },
|
||||
{ title: 'Status', align: 'start', key: 'status' },
|
||||
{ title: 'Budget', align: 'end', key: 'budget' },
|
||||
])
|
||||
</script>
|
||||
<template>
|
||||
<BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<UiParentCard title="Basic Selection" class="">
|
||||
<v-data-table items-per-page="5" :headers="headers" :items="BasicDatatables" item-value="name" show-select
|
||||
class="border rounded-md datatabels">
|
||||
</v-data-table>
|
||||
</UiParentCard>
|
||||
<UiParentCard title="Selected Values" class="mt-6">
|
||||
<v-data-table items-per-page="5" :headers="headers" :items="BasicDatatables" item-value="name"
|
||||
v-model="selected" return-object show-select class="border rounded-md datatabels">
|
||||
</v-data-table>
|
||||
<v-card class="elevation-0 border mt-3 pa-4">
|
||||
<pre>{{ selected }}</pre>
|
||||
</v-card>
|
||||
</UiParentCard>
|
||||
<UiParentCard title="Selectable Rows" class="mt-6">
|
||||
<v-data-table items-per-page="5" :headers="headers" :items="SelectedRow" item-value="name"
|
||||
item-selectable="selectable" show-select class="border rounded-md datatabels">
|
||||
</v-data-table>
|
||||
</UiParentCard>
|
||||
<UiParentCard title="Select Strategies" class="mt-6">
|
||||
<v-data-table items-per-page="5" :headers="headers" :items="BasicDatatables" item-value="name"
|
||||
select-strategy="single" show-select class="border rounded-md datatabels">
|
||||
</v-data-table>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
<script setup >
|
||||
import { computed, ref } from 'vue';
|
||||
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
import { BasicDatatables } from '@/_mockApis/components/datatable/dataTable';
|
||||
const page = ref({ title: 'Data Table Slots' });
|
||||
const breadcrumbs = ref([
|
||||
{
|
||||
text: 'Dashboard',
|
||||
disabled: false,
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
text: 'Data Table Slots',
|
||||
disabled: true,
|
||||
href: '#'
|
||||
}
|
||||
]);
|
||||
|
||||
/*Header Data*/
|
||||
|
||||
const headers = ref([
|
||||
{ title: 'Name', align: 'start', key: 'name', sortable: false, },
|
||||
{ title: 'Project Name', align: 'start', key: 'project' },
|
||||
{ title: 'Post', align: 'start', key: 'post' },
|
||||
{ title: 'Status', align: 'start', key: 'status' },
|
||||
{ title: 'Budget', align: 'end', key: 'budget' },
|
||||
])
|
||||
</script>
|
||||
<template>
|
||||
<BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<UiParentCard title="Item Slot">
|
||||
<v-data-table :headers="headers" :items="BasicDatatables" item-value="name" class="border rounded-md datatabels">
|
||||
<template v-slot:header.id="{ item }">
|
||||
<tr>
|
||||
<td class="text-subtitle-1">{{ item.columns.name }}</td>
|
||||
<td class="text-subtitle-1">{{ item.columns.project }}</td>
|
||||
<td class="text-subtitle-1">{{ item.columns.post }}</td>
|
||||
<td class="text-subtitle-1">{{ item.columns.status }}</td>
|
||||
<td class="d-flex justify-end align-center text-subtitle-1">{{ item.columns.budget }}</td>
|
||||
</tr>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
import { BasicDatatables } from '@/_mockApis/components/datatable/dataTable';
|
||||
const page = ref({ title: 'Data Table Sorting' });
|
||||
const breadcrumbs = ref([
|
||||
{
|
||||
text: 'Dashboard',
|
||||
disabled: false,
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
text: 'Data Table Sorting',
|
||||
disabled: true,
|
||||
href: '#'
|
||||
}
|
||||
]);
|
||||
|
||||
/*Header Data*/
|
||||
const sortBy:any = ref([
|
||||
{ key: 'name', order: 'desc' }
|
||||
])
|
||||
const headers : any = ref([
|
||||
{ title: 'Name', align: 'start', key: 'name', sortable: false },
|
||||
{ title: 'Project Name', align: 'start', key: 'project' },
|
||||
{ title: 'Post', align: 'start', key: 'post' },
|
||||
{ title: 'Status', align: 'start', key: 'status' },
|
||||
{ title: 'Budget', align: 'end', key: 'budget' },
|
||||
])
|
||||
</script>
|
||||
<template>
|
||||
<BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<UiParentCard title="Basic Sorting">
|
||||
<v-data-table items-per-page="5" :headers="headers" :items="BasicDatatables" item-value="name"
|
||||
v-model:sort-by="sortBy" class="border rounded-md datatabels">
|
||||
</v-data-table>
|
||||
<v-card class="mt-4 elevation-0 border mt-3 pa-4">
|
||||
<pre>{{ sortBy }}</pre>
|
||||
</v-card>
|
||||
</UiParentCard>
|
||||
<UiParentCard title="Multi Sorting" class="mt-6">
|
||||
<v-data-table items-per-page="5" :headers="headers" :items="BasicDatatables"
|
||||
:sort-by="[{ key: 'project', order: 'asc' }, { key: 'post', order: 'desc' }]" multi-sort
|
||||
class="border rounded-md datatabels">
|
||||
</v-data-table>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user