first commit
This commit is contained in:
Yusron alamsyah
No files matched your search
@@ -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,167 @@
|
||||
<script setup lang="ts">
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
import UiChildCard from '@/components/shared/UiChildCard.vue';
|
||||
import AppBaseCard from '@/components/shared/AppBaseCard.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-row>
|
||||
<!-- ============================================================= -->
|
||||
<!-- AppBaseCard -->
|
||||
<!-- ============================================================= -->
|
||||
<v-col cols="12">
|
||||
<UiParentCard title="AppBaseCard — Layout Dua Panel (Kiri & Kanan)">
|
||||
<p class="text-body-1 mb-4">
|
||||
<strong>AppBaseCard</strong> adalah komponen layout yang membagi tampilan menjadi
|
||||
dua panel: panel <em>kiri</em> (sidebar) dan panel <em>kanan</em> (konten utama).
|
||||
Panel kiri hanya ditampilkan pada layar besar (<code>lgAndUp</code>).
|
||||
Pada layar kecil, panel kiri dapat diakses melalui drawer navigasi yang dipicu tombol Menu.
|
||||
</p>
|
||||
|
||||
<v-alert type="info" variant="tonal" class="mb-6">
|
||||
Komponen ini digunakan pada aplikasi seperti <strong>Chat</strong> dan
|
||||
<strong>Kanban</strong> yang membutuhkan layout dua panel responsif.
|
||||
</v-alert>
|
||||
|
||||
<v-table density="compact" class="mb-6">
|
||||
<thead>
|
||||
<tr><th>Slot</th><th>Keterangan</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>leftpart</code></td>
|
||||
<td>Konten panel kiri (lebar tetap 320px), tampil di layar besar saja</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>rightpart</code></td>
|
||||
<td>Konten panel kanan (mengisi sisa lebar)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>mobileLeftContent</code></td>
|
||||
<td>Konten dalam drawer navigasi untuk tampilan mobile</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
|
||||
<UiChildCard title="Contoh Penggunaan" class="mb-6">
|
||||
<pre class="bg-grey-lighten-4 pa-4 rounded text-body-2 overflow-auto">{{ appBaseCardCode }}</pre>
|
||||
</UiChildCard>
|
||||
|
||||
<UiChildCard title="Demo Sederhana" class="mb-6">
|
||||
<AppBaseCard>
|
||||
<template #leftpart>
|
||||
<div class="pa-4">
|
||||
<p class="text-subtitle-1 font-weight-bold mb-3">Panel Kiri (Sidebar)</p>
|
||||
<v-list density="compact">
|
||||
<v-list-item
|
||||
v-for="item in ['Item 1', 'Item 2', 'Item 3']"
|
||||
:key="item"
|
||||
:title="item"
|
||||
prepend-icon="mdi-circle-small"
|
||||
/>
|
||||
</v-list>
|
||||
</div>
|
||||
</template>
|
||||
<template #rightpart>
|
||||
<div class="pa-4">
|
||||
<p class="text-subtitle-1 font-weight-bold mb-3">Panel Kanan (Konten Utama)</p>
|
||||
<p class="text-body-2 text-medium-emphasis">
|
||||
Ini adalah area konten utama. Pada layar kecil, panel kiri akan
|
||||
disembunyikan dan dapat dibuka melalui tombol "Menu" yang muncul di atas.
|
||||
</p>
|
||||
<v-alert type="success" variant="tonal" class="mt-3">
|
||||
Coba perkecil browser untuk melihat perilaku responsif!
|
||||
</v-alert>
|
||||
</div>
|
||||
</template>
|
||||
<template #mobileLeftContent>
|
||||
<div class="pa-4">
|
||||
<p class="text-subtitle-1 font-weight-bold mb-3">Menu Mobile</p>
|
||||
<v-list density="compact">
|
||||
<v-list-item
|
||||
v-for="item in ['Item 1', 'Item 2', 'Item 3']"
|
||||
:key="item"
|
||||
:title="item"
|
||||
prepend-icon="mdi-circle-small"
|
||||
/>
|
||||
</v-list>
|
||||
</div>
|
||||
</template>
|
||||
</AppBaseCard>
|
||||
</UiChildCard>
|
||||
|
||||
<UiChildCard title="Tips Penggunaan" class="mb-6">
|
||||
<v-list lines="two">
|
||||
<v-list-item
|
||||
prepend-icon="mdi-cellphone"
|
||||
title="Responsif otomatis"
|
||||
subtitle="Panel kiri hilang di layar kecil dan muncul sebagai drawer nav ketika tombol Menu diklik."
|
||||
/>
|
||||
<v-list-item
|
||||
prepend-icon="mdi-resize"
|
||||
title="Lebar panel kiri tetap"
|
||||
subtitle="Panel kiri memiliki lebar 320px yang tidak bisa diubah. Sesuaikan konten Anda dengan lebar ini."
|
||||
/>
|
||||
<v-list-item
|
||||
prepend-icon="mdi-content-copy"
|
||||
title="Duplikasi konten mobile"
|
||||
subtitle="Slot mobileLeftContent harus memuat konten yang sama dengan leftpart agar konsisten di semua ukuran layar."
|
||||
/>
|
||||
</v-list>
|
||||
</UiChildCard>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
appBaseCardCode: `<template>
|
||||
<AppBaseCard>
|
||||
<!-- Panel kiri: daftar kontak, list, dsb. -->
|
||||
<template #leftpart>
|
||||
<div class="pa-4">
|
||||
<v-list>
|
||||
<v-list-item
|
||||
v-for="contact in contacts"
|
||||
:key="contact.id"
|
||||
:title="contact.name"
|
||||
@click="selectContact(contact)"
|
||||
/>
|
||||
</v-list>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Panel kanan: detail/percakapan/konten utama -->
|
||||
<template #rightpart>
|
||||
<div class="pa-4">
|
||||
<h5>Detail Kontak</h5>
|
||||
<p>{{ selectedContact?.name }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Konten drawer untuk mobile (sama dengan leftpart) -->
|
||||
<template #mobileLeftContent>
|
||||
<div class="pa-4">
|
||||
<v-list>
|
||||
<v-list-item
|
||||
v-for="contact in contacts"
|
||||
:key="contact.id"
|
||||
:title="contact.name"
|
||||
@click="selectContact(contact)"
|
||||
/>
|
||||
</v-list>
|
||||
</div>
|
||||
</template>
|
||||
</AppBaseCard>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import AppBaseCard from '@/components/shared/AppBaseCard.vue';
|
||||
<\/script>`,
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,142 @@
|
||||
<script setup lang="ts">
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
import UiChildCard from '@/components/shared/UiChildCard.vue';
|
||||
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
|
||||
|
||||
const breadcrumbBasic = [
|
||||
{ text: 'Dashboard', disabled: false, href: '/' },
|
||||
{ text: 'Shared Components', disabled: true }
|
||||
];
|
||||
|
||||
const breadcrumbDeep = [
|
||||
{ text: 'Dashboard', disabled: false, href: '/' },
|
||||
{ text: 'Apps', disabled: false, href: '/apps' },
|
||||
{ text: 'Pengguna', disabled: false, href: '/apps/user' },
|
||||
{ text: 'Profil', disabled: true }
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-row>
|
||||
<!-- ============================================================= -->
|
||||
<!-- BaseBreadcrumb -->
|
||||
<!-- ============================================================= -->
|
||||
<v-col cols="12">
|
||||
<UiParentCard title="BaseBreadcrumb — Header Halaman dengan Breadcrumb">
|
||||
<p class="text-body-1 mb-4">
|
||||
<strong>BaseBreadcrumb</strong> adalah komponen header halaman yang menampilkan
|
||||
<em>judul halaman</em> di sebelah kiri dan <em>navigasi breadcrumb</em> di sebelah kanan.
|
||||
Setiap item breadcrumb ditampilkan sebagai chip berwarna primary. Ikon rumah (home)
|
||||
otomatis ditambahkan di awal breadcrumb.
|
||||
</p>
|
||||
|
||||
<v-table density="compact" class="mb-6">
|
||||
<thead>
|
||||
<tr><th>Prop</th><th>Tipe</th><th>Keterangan</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>title</code></td>
|
||||
<td>String</td>
|
||||
<td>Judul halaman yang ditampilkan di sebelah kiri</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>breadcrumbs</code></td>
|
||||
<td>Array</td>
|
||||
<td>
|
||||
Array objek breadcrumb. Setiap objek: <code>{ text, disabled, href }</code>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
|
||||
<UiChildCard title="Struktur Data breadcrumbs" class="mb-6">
|
||||
<pre class="bg-grey-lighten-4 pa-4 rounded text-body-2 overflow-auto">{{ breadcrumbDataStructure }}</pre>
|
||||
</UiChildCard>
|
||||
|
||||
<UiChildCard title="Contoh Penggunaan" class="mb-6">
|
||||
<pre class="bg-grey-lighten-4 pa-4 rounded text-body-2 overflow-auto">{{ breadcrumbCode }}</pre>
|
||||
</UiChildCard>
|
||||
|
||||
<UiChildCard title="Demo — Breadcrumb 2 Level" class="mb-6">
|
||||
<BaseBreadcrumb
|
||||
title="Shared Components"
|
||||
:breadcrumbs="breadcrumbBasic"
|
||||
/>
|
||||
<p class="text-caption text-medium-emphasis mt-n2 mb-0">
|
||||
↑ BaseBreadcrumb di atas merupakan contoh dengan 2 level navigasi.
|
||||
</p>
|
||||
</UiChildCard>
|
||||
|
||||
<UiChildCard title="Demo — Breadcrumb 4 Level" class="mb-6">
|
||||
<BaseBreadcrumb
|
||||
title="Profil Pengguna"
|
||||
:breadcrumbs="breadcrumbDeep"
|
||||
/>
|
||||
<p class="text-caption text-medium-emphasis mt-n2 mb-0">
|
||||
↑ BaseBreadcrumb dengan 4 level navigasi (Dashboard → Apps → Pengguna → Profil).
|
||||
</p>
|
||||
</UiChildCard>
|
||||
|
||||
<UiChildCard title="Tips Penggunaan" class="mb-6">
|
||||
<v-alert type="info" variant="tonal" class="mb-3">
|
||||
<strong>Posisi terbaik:</strong> Tempatkan <code>BaseBreadcrumb</code> sebagai
|
||||
elemen pertama di dalam <code><template></code> halaman, sebelum konten utama.
|
||||
Biasanya diletakkan di luar <code><v-row></code> konten.
|
||||
</v-alert>
|
||||
<v-alert type="warning" variant="tonal">
|
||||
Item breadcrumb terakhir sebaiknya diberi <code>disabled: true</code> untuk
|
||||
menandakan halaman saat ini (tidak dapat diklik).
|
||||
</v-alert>
|
||||
</UiChildCard>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
breadcrumbDataStructure: `// Struktur setiap item breadcrumbs:
|
||||
const breadcrumbs = [
|
||||
{
|
||||
text: 'Dashboard', // Label yang ditampilkan
|
||||
disabled: false, // false = dapat diklik (ada href)
|
||||
href: '/' // Target navigasi
|
||||
},
|
||||
{
|
||||
text: 'Halaman Ini',
|
||||
disabled: true // true = tidak dapat diklik (halaman aktif)
|
||||
// href tidak diperlukan jika disabled: true
|
||||
}
|
||||
]`,
|
||||
|
||||
breadcrumbCode: `<template>
|
||||
<!-- Letakkan di awal halaman, sebelum konten utama -->
|
||||
<BaseBreadcrumb
|
||||
title="Judul Halaman"
|
||||
:breadcrumbs="breadcrumbs"
|
||||
/>
|
||||
|
||||
<!-- Konten halaman di bawahnya -->
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<!-- ... -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
|
||||
|
||||
const breadcrumbs = [
|
||||
{ text: 'Dashboard', disabled: false, href: '/' },
|
||||
{ text: 'Apps', disabled: false, href: '/apps' },
|
||||
{ text: 'Halaman Ini', disabled: true }
|
||||
];
|
||||
<\/script>`,
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,230 @@
|
||||
<script setup lang="ts">
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
import UiChildCard from '@/components/shared/UiChildCard.vue';
|
||||
import CardHeaderFooter from '@/components/shared/CardHeaderFooter.vue';
|
||||
import UiTableCard from '@/components/shared/UiTableCard.vue';
|
||||
import UiParentCardLogo from '@/components/shared/UiParentCardLogo.vue';
|
||||
|
||||
const tableHeaders = [
|
||||
{ title: 'Nama', key: 'name' },
|
||||
{ title: 'Email', key: 'email' },
|
||||
{ title: 'Status', key: 'status' },
|
||||
];
|
||||
const tableItems = [
|
||||
{ name: 'Budi Santoso', email: '[email protected]', status: 'Aktif' },
|
||||
{ name: 'Siti Rahayu', email: '[email protected]', status: 'Nonaktif' },
|
||||
{ name: 'Ahmad Fauzi', email: '[email protected]', status: 'Aktif' },
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-row>
|
||||
<!-- ============================================================= -->
|
||||
<!-- CardHeaderFooter -->
|
||||
<!-- ============================================================= -->
|
||||
<v-col cols="12">
|
||||
<UiParentCard title="CardHeaderFooter — Card dengan Header dan Footer">
|
||||
<p class="text-body-1 mb-4">
|
||||
<strong>CardHeaderFooter</strong> adalah card outlined yang menyediakan area
|
||||
<em>header</em> (judul), <em>konten</em> (slot default), dan <em>footer</em> (slot footer)
|
||||
yang dipisahkan oleh garis pembatas.
|
||||
</p>
|
||||
|
||||
<v-table density="compact" class="mb-6">
|
||||
<thead>
|
||||
<tr><th>Prop</th><th>Tipe</th><th>Keterangan</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><code>title</code></td><td>String</td><td>Judul card di bagian header</td></tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
|
||||
<v-table density="compact" class="mb-6">
|
||||
<thead>
|
||||
<tr><th>Slot</th><th>Keterangan</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><code>default</code></td><td>Konten utama antara header dan footer</td></tr>
|
||||
<tr><td><code>footer</code></td><td>Konten footer (tombol aksi, info, dsb.)</td></tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
|
||||
<UiChildCard title="Contoh Penggunaan" class="mb-6">
|
||||
<pre class="bg-grey-lighten-4 pa-4 rounded text-body-2 overflow-auto">{{ cardHeaderFooterCode }}</pre>
|
||||
</UiChildCard>
|
||||
|
||||
<UiChildCard title="Demo" class="mb-6">
|
||||
<v-row>
|
||||
<v-col cols="12" md="6">
|
||||
<CardHeaderFooter title="Form Pendaftaran">
|
||||
<v-text-field label="Nama Lengkap" variant="outlined" density="compact" class="mb-3" />
|
||||
<v-text-field label="Email" variant="outlined" density="compact" />
|
||||
<template #footer>
|
||||
<v-btn color="primary">Simpan</v-btn>
|
||||
<v-btn variant="text" class="ml-2">Batal</v-btn>
|
||||
</template>
|
||||
</CardHeaderFooter>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<CardHeaderFooter title="Konfirmasi Hapus">
|
||||
<v-alert type="warning" variant="tonal" class="mb-0">
|
||||
Apakah Anda yakin ingin menghapus data ini?
|
||||
</v-alert>
|
||||
<template #footer>
|
||||
<v-spacer />
|
||||
<v-btn color="error" class="mr-2">Hapus</v-btn>
|
||||
<v-btn variant="outlined">Batal</v-btn>
|
||||
</template>
|
||||
</CardHeaderFooter>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</UiChildCard>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
|
||||
<!-- ============================================================= -->
|
||||
<!-- UiTableCard -->
|
||||
<!-- ============================================================= -->
|
||||
<v-col cols="12">
|
||||
<UiParentCard title="UiTableCard — Card Wrapper untuk Tabel">
|
||||
<p class="text-body-1 mb-4">
|
||||
<strong>UiTableCard</strong> adalah card khusus sebagai wrapper tabel data. Slot
|
||||
<code>default</code> ditempatkan langsung setelah divider (tanpa padding ekstra)
|
||||
agar tabel bisa full-width sesuai card.
|
||||
</p>
|
||||
|
||||
<v-table density="compact" class="mb-6">
|
||||
<thead>
|
||||
<tr><th>Prop</th><th>Tipe</th><th>Keterangan</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><code>title</code></td><td>String</td><td>Judul di atas tabel</td></tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
|
||||
<UiChildCard title="Contoh Penggunaan" class="mb-6">
|
||||
<pre class="bg-grey-lighten-4 pa-4 rounded text-body-2 overflow-auto">{{ uiTableCardCode }}</pre>
|
||||
</UiChildCard>
|
||||
|
||||
<UiChildCard title="Demo" class="mb-6">
|
||||
<UiTableCard title="Daftar Pengguna">
|
||||
<v-data-table
|
||||
:headers="tableHeaders"
|
||||
:items="tableItems"
|
||||
hide-default-footer
|
||||
density="compact"
|
||||
/>
|
||||
</UiTableCard>
|
||||
</UiChildCard>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
|
||||
<!-- ============================================================= -->
|
||||
<!-- UiParentCardLogo -->
|
||||
<!-- ============================================================= -->
|
||||
<v-col cols="12">
|
||||
<UiParentCard title="UiParentCardLogo — Card dengan Logo Aplikasi">
|
||||
<p class="text-body-1 mb-4">
|
||||
<strong>UiParentCardLogo</strong> sama seperti UiParentCard tetapi menampilkan
|
||||
<em>Logo aplikasi</em> (komponen <code>Logo.vue</code>) di header alih-alih teks judul.
|
||||
Cocok digunakan pada halaman auth (login, register, dsb.).
|
||||
</p>
|
||||
|
||||
<v-table density="compact" class="mb-6">
|
||||
<thead>
|
||||
<tr><th>Slot</th><th>Keterangan</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><code>default</code></td><td>Konten utama di bawah logo</td></tr>
|
||||
<tr><td><code>action</code></td><td>Aksi di sebelah kanan logo</td></tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
|
||||
<UiChildCard title="Contoh Penggunaan" class="mb-6">
|
||||
<pre class="bg-grey-lighten-4 pa-4 rounded text-body-2 overflow-auto">{{ uiParentCardLogoCode }}</pre>
|
||||
</UiChildCard>
|
||||
|
||||
<UiChildCard title="Demo">
|
||||
<v-row justify="center">
|
||||
<v-col cols="12" md="5">
|
||||
<UiParentCardLogo>
|
||||
<template #action>
|
||||
<v-chip color="primary" size="small">v1.0</v-chip>
|
||||
</template>
|
||||
<p class="text-body-2 text-center mt-2">
|
||||
Silakan masuk untuk melanjutkan. Slot <code>default</code> berisi
|
||||
form login atau konten lainnya.
|
||||
</p>
|
||||
</UiParentCardLogo>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</UiChildCard>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
cardHeaderFooterCode: `<template>
|
||||
<CardHeaderFooter title="Form Pendaftaran">
|
||||
<!-- Slot default: konten di antara header & footer -->
|
||||
<v-text-field label="Nama Lengkap" variant="outlined" />
|
||||
<v-text-field label="Email" variant="outlined" />
|
||||
|
||||
<!-- Slot footer: tombol aksi -->
|
||||
<template #footer>
|
||||
<v-btn color="primary">Simpan</v-btn>
|
||||
<v-btn variant="text">Batal</v-btn>
|
||||
</template>
|
||||
</CardHeaderFooter>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import CardHeaderFooter from '@/components/shared/CardHeaderFooter.vue';
|
||||
<\/script>`,
|
||||
|
||||
uiTableCardCode: `<template>
|
||||
<UiTableCard title="Daftar Pengguna">
|
||||
<!-- Letakkan v-data-table atau v-table langsung sebagai slot default -->
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="items"
|
||||
hide-default-footer
|
||||
/>
|
||||
</UiTableCard>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import UiTableCard from '@/components/shared/UiTableCard.vue';
|
||||
|
||||
const headers = [
|
||||
{ title: 'Nama', key: 'name' },
|
||||
{ title: 'Email', key: 'email' },
|
||||
];
|
||||
const items = [
|
||||
{ name: 'Budi', email: '[email protected]' },
|
||||
];
|
||||
<\/script>`,
|
||||
|
||||
uiParentCardLogoCode: `<template>
|
||||
<!-- Cocok untuk halaman auth / landing -->
|
||||
<UiParentCardLogo>
|
||||
<template #action>
|
||||
<v-chip color="primary" size="small">v1.0</v-chip>
|
||||
</template>
|
||||
|
||||
<!-- Konten form login/register di sini -->
|
||||
<LoginForm />
|
||||
</UiParentCardLogo>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import UiParentCardLogo from '@/components/shared/UiParentCardLogo.vue';
|
||||
<\/script>`,
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,158 @@
|
||||
<script setup lang="ts">
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
import UiChildCard from '@/components/shared/UiChildCard.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-row>
|
||||
<!-- ============================================================= -->
|
||||
<!-- UiParentCard -->
|
||||
<!-- ============================================================= -->
|
||||
<v-col cols="12">
|
||||
<UiParentCard title="UiParentCard — Elevated Card dengan Title">
|
||||
<p class="text-body-1 mb-4">
|
||||
<strong>UiParentCard</strong> adalah card dengan <code>elevation="10"</code> yang biasanya digunakan sebagai
|
||||
<em>wrapper utama</em> pada halaman. Mendukung slot <code>default</code> (konten) dan slot
|
||||
<code>action</code> (tombol/aksi di kanan atas header).
|
||||
</p>
|
||||
|
||||
<!-- Props Table -->
|
||||
<v-table density="compact" class="mb-6">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Prop</th>
|
||||
<th>Tipe</th>
|
||||
<th>Keterangan</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><code>title</code></td><td>String</td><td>Judul yang ditampilkan di header card</td></tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
|
||||
<!-- Slots Table -->
|
||||
<v-table density="compact" class="mb-6">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Slot</th>
|
||||
<th>Keterangan</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><code>default</code></td><td>Konten utama di dalam card</td></tr>
|
||||
<tr><td><code>action</code></td><td>Konten aksi di kanan atas (misal: tombol)</td></tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
|
||||
<!-- Code Example -->
|
||||
<UiChildCard title="Contoh Penggunaan" class="mb-6">
|
||||
<pre class="bg-grey-lighten-4 pa-4 rounded text-body-2 overflow-auto">{{ uiParentCardCode }}</pre>
|
||||
</UiChildCard>
|
||||
|
||||
<!-- Live Demo -->
|
||||
<UiChildCard title="Demo">
|
||||
<UiParentCard title="Judul Card Saya">
|
||||
<template #action>
|
||||
<v-btn color="primary" size="small">Aksi</v-btn>
|
||||
</template>
|
||||
<p class="text-body-2">Ini adalah konten di dalam UiParentCard. Gunakan slot <strong>default</strong> untuk mengisi konten.</p>
|
||||
</UiParentCard>
|
||||
</UiChildCard>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
|
||||
<!-- ============================================================= -->
|
||||
<!-- UiChildCard -->
|
||||
<!-- ============================================================= -->
|
||||
<v-col cols="12">
|
||||
<UiParentCard title="UiChildCard — Outlined Card dengan Title">
|
||||
<p class="text-body-1 mb-4">
|
||||
<strong>UiChildCard</strong> adalah card ber-outline (tanpa elevation) yang biasanya digunakan
|
||||
<em>di dalam</em> UiParentCard untuk memisahkan bagian-bagian konten.
|
||||
</p>
|
||||
|
||||
<!-- Props Table -->
|
||||
<v-table density="compact" class="mb-6">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Prop</th>
|
||||
<th>Tipe</th>
|
||||
<th>Keterangan</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><code>title</code></td><td>String</td><td>Judul section di dalam card</td></tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
|
||||
<!-- Code Example -->
|
||||
<UiChildCard title="Contoh Penggunaan" class="mb-6">
|
||||
<pre class="bg-grey-lighten-4 pa-4 rounded text-body-2 overflow-auto">{{ uiChildCardCode }}</pre>
|
||||
</UiChildCard>
|
||||
|
||||
<!-- Live Demo -->
|
||||
<UiChildCard title="Demo">
|
||||
<v-row>
|
||||
<v-col cols="12" md="6">
|
||||
<UiChildCard title="Section A">
|
||||
<p class="text-body-2">Konten section A.</p>
|
||||
</UiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<UiChildCard title="Section B">
|
||||
<p class="text-body-2">Konten section B.</p>
|
||||
</UiChildCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</UiChildCard>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
uiParentCardCode: `<template>
|
||||
<UiParentCard title="Judul Card Saya">
|
||||
<!-- Slot action: tombol/aksi di kanan atas -->
|
||||
<template #action>
|
||||
<v-btn color="primary" size="small">Aksi</v-btn>
|
||||
</template>
|
||||
|
||||
<!-- Slot default: konten utama -->
|
||||
<p>Konten di sini...</p>
|
||||
</UiParentCard>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
<\/script>`,
|
||||
|
||||
uiChildCardCode: `<template>
|
||||
<!-- Biasanya dipakai di dalam UiParentCard -->
|
||||
<UiParentCard title="Halaman Saya">
|
||||
<v-row>
|
||||
<v-col cols="12" md="6">
|
||||
<UiChildCard title="Section A">
|
||||
<p>Konten section A</p>
|
||||
</UiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<UiChildCard title="Section B">
|
||||
<p>Konten section B</p>
|
||||
</UiChildCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</UiParentCard>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
import UiChildCard from '@/components/shared/UiChildCard.vue';
|
||||
<\/script>`,
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,170 @@
|
||||
<script setup lang="ts">
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
import UiChildCard from '@/components/shared/UiChildCard.vue';
|
||||
import UiTextfieldPrimary from '@/components/shared/UiTextfieldPrimary.vue';
|
||||
|
||||
const searchText = '';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-row>
|
||||
<!-- ============================================================= -->
|
||||
<!-- UiTextfieldPrimary -->
|
||||
<!-- ============================================================= -->
|
||||
<v-col cols="12">
|
||||
<UiParentCard title="UiTextfieldPrimary — Text Field Bercorak Primary">
|
||||
<p class="text-body-1 mb-4">
|
||||
<strong>UiTextfieldPrimary</strong> adalah wrapper tipis di atas <code>v-text-field</code>
|
||||
Vuetify yang secara otomatis menerapkan <code>color="primary"</code>.
|
||||
Gunakan <code>v-model</code> dan atribut lainnya langsung seperti pada
|
||||
<code>v-text-field</code> biasa, dan manfaatkan slot default untuk label/ikon khusus.
|
||||
</p>
|
||||
|
||||
<v-alert type="info" variant="tonal" class="mb-6">
|
||||
Komponen ini menggunakan <strong>slot default</strong> (bukan prop <code>label</code>)
|
||||
untuk menyisipkan konten. Untuk label teks biasa, cukup tulis teks di dalam tag.
|
||||
Untuk atribut seperti <code>v-model</code>, <code>placeholder</code>,
|
||||
<code>variant</code>, dan lainnya, gunakan langsung pada tag
|
||||
<code><UiTextfieldPrimary></code>.
|
||||
</v-alert>
|
||||
|
||||
<v-table density="compact" class="mb-6">
|
||||
<thead>
|
||||
<tr><th>Prop/Atribut</th><th>Keterangan</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>v-model</code></td>
|
||||
<td>Binding dua arah untuk nilai input</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>label</code>, <code>placeholder</code></td>
|
||||
<td>Diteruskan langsung ke <code>v-text-field</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>variant</code></td>
|
||||
<td>Gaya tampilan: <code>outlined</code>, <code>filled</code>, <code>underlined</code>, dll.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>density</code></td>
|
||||
<td><code>default</code>, <code>comfortable</code>, <code>compact</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>prepend-inner-icon</code>, <code>append-inner-icon</code></td>
|
||||
<td>Ikon di dalam field</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Slot <code>default</code></td>
|
||||
<td>Konten/label tambahan yang disisipkan ke dalam field</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
|
||||
<UiChildCard title="Contoh Penggunaan" class="mb-6">
|
||||
<pre class="bg-grey-lighten-4 pa-4 rounded text-body-2 overflow-auto">{{ textfieldCode }}</pre>
|
||||
</UiChildCard>
|
||||
|
||||
<UiChildCard title="Demo — Berbagai Varian" class="mb-6">
|
||||
<v-row>
|
||||
<v-col cols="12" md="6">
|
||||
<p class="text-subtitle-2 mb-2">Outlined (default Vuetify)</p>
|
||||
<UiTextfieldPrimary
|
||||
label="Nama Lengkap"
|
||||
variant="outlined"
|
||||
placeholder="Masukkan nama..."
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<p class="text-subtitle-2 mb-2">Filled</p>
|
||||
<UiTextfieldPrimary
|
||||
label="Email"
|
||||
variant="filled"
|
||||
placeholder="[email protected]"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<p class="text-subtitle-2 mb-2">Underlined</p>
|
||||
<UiTextfieldPrimary
|
||||
label="Kata Sandi"
|
||||
type="password"
|
||||
variant="underlined"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<p class="text-subtitle-2 mb-2">Dengan Ikon & Density Compact</p>
|
||||
<UiTextfieldPrimary
|
||||
label="Cari..."
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
prepend-inner-icon="mdi-magnify"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</UiChildCard>
|
||||
|
||||
<UiChildCard title="Perbandingan: UiTextfieldPrimary vs v-text-field biasa" class="mb-6">
|
||||
<v-row>
|
||||
<v-col cols="12" md="6">
|
||||
<p class="text-subtitle-2 mb-2 text-primary">UiTextfieldPrimary (warna primary otomatis)</p>
|
||||
<UiTextfieldPrimary
|
||||
label="Field Primary"
|
||||
variant="outlined"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<p class="text-subtitle-2 mb-2">v-text-field biasa (tanpa warna)</p>
|
||||
<v-text-field
|
||||
label="Field Biasa"
|
||||
variant="outlined"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</UiChildCard>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
textfieldCode: `<template>
|
||||
<!-- Penggunaan dasar -->
|
||||
<UiTextfieldPrimary
|
||||
v-model="email"
|
||||
label="Email"
|
||||
variant="outlined"
|
||||
placeholder="[email protected]"
|
||||
/>
|
||||
|
||||
<!-- Dengan ikon -->
|
||||
<UiTextfieldPrimary
|
||||
v-model="search"
|
||||
label="Cari..."
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
prepend-inner-icon="mdi-magnify"
|
||||
/>
|
||||
|
||||
<!-- Dengan type password -->
|
||||
<UiTextfieldPrimary
|
||||
v-model="password"
|
||||
label="Kata Sandi"
|
||||
type="password"
|
||||
variant="outlined"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import UiTextfieldPrimary from '@/components/shared/UiTextfieldPrimary.vue';
|
||||
|
||||
const email = ref('');
|
||||
const search = ref('');
|
||||
const password = ref('');
|
||||
<\/script>`,
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,187 @@
|
||||
<script setup lang="ts">
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
import UiChildCard from '@/components/shared/UiChildCard.vue';
|
||||
import WidgetCard from '@/components/shared/WidgetCard.vue';
|
||||
import WidgetCardv2 from '@/components/shared/WidgetCardv2.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-row>
|
||||
<!-- ============================================================= -->
|
||||
<!-- WidgetCard -->
|
||||
<!-- ============================================================= -->
|
||||
<v-col cols="12">
|
||||
<UiParentCard title="WidgetCard — Card Widget Sederhana">
|
||||
<p class="text-body-1 mb-4">
|
||||
<strong>WidgetCard</strong> adalah card outlined tanpa elevation yang dirancang untuk widget/statistik.
|
||||
Memiliki margin bawah otomatis (<code>mb-6</code>) dan slot <code>default</code> untuk kontennya.
|
||||
</p>
|
||||
|
||||
<v-table density="compact" class="mb-6">
|
||||
<thead>
|
||||
<tr><th>Prop</th><th>Tipe</th><th>Keterangan</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><code>title</code></td><td>String</td><td>Judul widget card</td></tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
|
||||
<v-table density="compact" class="mb-6">
|
||||
<thead>
|
||||
<tr><th>Slot</th><th>Keterangan</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><code>default</code></td><td>Konten utama widget</td></tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
|
||||
<UiChildCard title="Contoh Penggunaan" class="mb-6">
|
||||
<pre class="bg-grey-lighten-4 pa-4 rounded text-body-2 overflow-auto">{{ widgetCardCode }}</pre>
|
||||
</UiChildCard>
|
||||
|
||||
<UiChildCard title="Demo">
|
||||
<v-row>
|
||||
<v-col cols="12" md="4">
|
||||
<WidgetCard title="Total Pengguna">
|
||||
<div class="d-flex align-center ga-2">
|
||||
<v-icon color="primary" size="36">mdi-account-group</v-icon>
|
||||
<span class="text-h4 font-weight-bold">1,250</span>
|
||||
</div>
|
||||
<p class="text-caption text-medium-emphasis mt-1">+12% dari bulan lalu</p>
|
||||
</WidgetCard>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4">
|
||||
<WidgetCard title="Total Penjualan">
|
||||
<div class="d-flex align-center ga-2">
|
||||
<v-icon color="success" size="36">mdi-cash</v-icon>
|
||||
<span class="text-h4 font-weight-bold">Rp 45jt</span>
|
||||
</div>
|
||||
<p class="text-caption text-medium-emphasis mt-1">+8% dari bulan lalu</p>
|
||||
</WidgetCard>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4">
|
||||
<WidgetCard title="Total Order">
|
||||
<div class="d-flex align-center ga-2">
|
||||
<v-icon color="warning" size="36">mdi-cart</v-icon>
|
||||
<span class="text-h4 font-weight-bold">320</span>
|
||||
</div>
|
||||
<p class="text-caption text-medium-emphasis mt-1">+5% dari bulan lalu</p>
|
||||
</WidgetCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</UiChildCard>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
|
||||
<!-- ============================================================= -->
|
||||
<!-- WidgetCardv2 -->
|
||||
<!-- ============================================================= -->
|
||||
<v-col cols="12">
|
||||
<UiParentCard title="WidgetCardv2 — Card Widget dengan Footer">
|
||||
<p class="text-body-1 mb-4">
|
||||
<strong>WidgetCardv2</strong> adalah versi lanjutan dari WidgetCard dengan dukungan slot
|
||||
<code>footer</code> untuk menambahkan aksi/info di bawah konten. Footer dapat
|
||||
disembunyikan menggunakan prop <code>hideaction</code>.
|
||||
</p>
|
||||
|
||||
<v-table density="compact" class="mb-6">
|
||||
<thead>
|
||||
<tr><th>Prop</th><th>Tipe</th><th>Keterangan</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><code>title</code></td><td>String</td><td>Judul widget</td></tr>
|
||||
<tr><td><code>hideaction</code></td><td>Boolean</td><td>Jika <code>true</code>, footer disembunyikan</td></tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
|
||||
<v-table density="compact" class="mb-6">
|
||||
<thead>
|
||||
<tr><th>Slot</th><th>Keterangan</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><code>default</code></td><td>Konten utama</td></tr>
|
||||
<tr><td><code>footer</code></td><td>Konten footer (aksi/info tambahan)</td></tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
|
||||
<UiChildCard title="Contoh Penggunaan" class="mb-6">
|
||||
<pre class="bg-grey-lighten-4 pa-4 rounded text-body-2 overflow-auto">{{ widgetCardv2Code }}</pre>
|
||||
</UiChildCard>
|
||||
|
||||
<UiChildCard title="Demo — Dengan Footer">
|
||||
<v-row>
|
||||
<v-col cols="12" md="6">
|
||||
<WidgetCardv2 title="Laporan Bulan Ini">
|
||||
<div class="d-flex align-center ga-2 mb-2">
|
||||
<v-icon color="info" size="32">mdi-chart-bar</v-icon>
|
||||
<span class="text-h5 font-weight-bold">75%</span>
|
||||
<span class="text-body-2 text-medium-emphasis">target tercapai</span>
|
||||
</div>
|
||||
<v-progress-linear model-value="75" color="info" rounded height="8" />
|
||||
<template #footer>
|
||||
<v-btn variant="text" color="primary" size="small">Lihat Detail</v-btn>
|
||||
<v-spacer />
|
||||
<span class="text-caption text-medium-emphasis">Update: hari ini</span>
|
||||
</template>
|
||||
</WidgetCardv2>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<WidgetCardv2 title="Tanpa Footer" :hideaction="true">
|
||||
<p class="text-body-2">
|
||||
Prop <code>hideaction="true"</code> menyembunyikan area footer
|
||||
meskipun slot footer telah diisi.
|
||||
</p>
|
||||
<template #footer>
|
||||
<span>Footer ini tidak akan terlihat</span>
|
||||
</template>
|
||||
</WidgetCardv2>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</UiChildCard>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
widgetCardCode: `<template>
|
||||
<WidgetCard title="Total Pengguna">
|
||||
<div class="d-flex align-center ga-2">
|
||||
<v-icon color="primary" size="36">mdi-account-group</v-icon>
|
||||
<span class="text-h4 font-weight-bold">1,250</span>
|
||||
</div>
|
||||
<p class="text-caption mt-1">+12% dari bulan lalu</p>
|
||||
</WidgetCard>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import WidgetCard from '@/components/shared/WidgetCard.vue';
|
||||
<\/script>`,
|
||||
|
||||
widgetCardv2Code: `<template>
|
||||
<WidgetCardv2 title="Laporan Bulan Ini">
|
||||
<!-- Slot default: konten utama -->
|
||||
<div>Konten widget di sini...</div>
|
||||
|
||||
<!-- Slot footer: aksi/info di bawah -->
|
||||
<template #footer>
|
||||
<v-btn variant="text" color="primary" size="small">Lihat Detail</v-btn>
|
||||
</template>
|
||||
</WidgetCardv2>
|
||||
|
||||
<!-- Sembunyikan footer dengan prop hideaction -->
|
||||
<WidgetCardv2 title="Tanpa Footer" :hideaction="true">
|
||||
<div>Footer tidak tampil.</div>
|
||||
</WidgetCardv2>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import WidgetCardv2 from '@/components/shared/WidgetCardv2.vue';
|
||||
<\/script>`,
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,282 @@
|
||||
<script setup lang="ts">
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
import UiChildCard from '@/components/shared/UiChildCard.vue';
|
||||
|
||||
const components = [
|
||||
{
|
||||
name: 'UiParentCard',
|
||||
file: 'UiParentCard.vue',
|
||||
category: 'Card',
|
||||
description: 'Card elevated (elevation=10) sebagai wrapper utama halaman. Mendukung slot action di header.',
|
||||
props: ['title'],
|
||||
slots: ['default', 'action'],
|
||||
link: '/shared-components/UiParentCard',
|
||||
},
|
||||
{
|
||||
name: 'UiChildCard',
|
||||
file: 'UiChildCard.vue',
|
||||
category: 'Card',
|
||||
description: 'Card outlined untuk memisahkan bagian-bagian konten di dalam UiParentCard.',
|
||||
props: ['title'],
|
||||
slots: ['default'],
|
||||
link: '/shared-components/UiParentCard',
|
||||
},
|
||||
{
|
||||
name: 'WidgetCard',
|
||||
file: 'WidgetCard.vue',
|
||||
category: 'Widget',
|
||||
description: 'Card outlined ringan untuk widget/statistik. Margin bawah otomatis (mb-6).',
|
||||
props: ['title'],
|
||||
slots: ['default'],
|
||||
link: '/shared-components/WidgetCards',
|
||||
},
|
||||
{
|
||||
name: 'WidgetCardv2',
|
||||
file: 'WidgetCardv2.vue',
|
||||
category: 'Widget',
|
||||
description: 'Widget card dengan footer yang bisa disembunyikan menggunakan prop hideaction.',
|
||||
props: ['title', 'hideaction'],
|
||||
slots: ['default', 'footer'],
|
||||
link: '/shared-components/WidgetCards',
|
||||
},
|
||||
{
|
||||
name: 'CardHeaderFooter',
|
||||
file: 'CardHeaderFooter.vue',
|
||||
category: 'Card',
|
||||
description: 'Card dengan header, konten, dan footer yang dipisahkan garis pembatas.',
|
||||
props: ['title'],
|
||||
slots: ['default', 'footer'],
|
||||
link: '/shared-components/CardComponents',
|
||||
},
|
||||
{
|
||||
name: 'UiTableCard',
|
||||
file: 'UiTableCard.vue',
|
||||
category: 'Card',
|
||||
description: 'Card wrapper untuk tabel data. Slot default langsung menerima v-data-table.',
|
||||
props: ['title'],
|
||||
slots: ['default'],
|
||||
link: '/shared-components/CardComponents',
|
||||
},
|
||||
{
|
||||
name: 'UiParentCardLogo',
|
||||
file: 'UiParentCardLogo.vue',
|
||||
category: 'Card',
|
||||
description: 'Card elevated dengan Logo aplikasi di header. Ideal untuk halaman auth.',
|
||||
props: [],
|
||||
slots: ['default', 'action'],
|
||||
link: '/shared-components/CardComponents',
|
||||
},
|
||||
{
|
||||
name: 'BaseBreadcrumb',
|
||||
file: 'BaseBreadcrumb.vue',
|
||||
category: 'Navigation',
|
||||
description: 'Header halaman dengan judul di kiri dan breadcrumb chip-style di kanan.',
|
||||
props: ['title', 'breadcrumbs'],
|
||||
slots: [],
|
||||
link: '/shared-components/BaseBreadcrumb',
|
||||
},
|
||||
{
|
||||
name: 'UiTextfieldPrimary',
|
||||
file: 'UiTextfieldPrimary.vue',
|
||||
category: 'Form',
|
||||
description: 'Wrapper v-text-field dengan color="primary" otomatis.',
|
||||
props: ['v-model', '...all v-text-field props'],
|
||||
slots: ['default'],
|
||||
link: '/shared-components/UiTextfieldPrimary',
|
||||
},
|
||||
{
|
||||
name: 'AppBaseCard',
|
||||
file: 'AppBaseCard.vue',
|
||||
category: 'Layout',
|
||||
description: 'Layout dua panel (kiri/kanan) responsif. Panel kiri menjadi drawer di mobile.',
|
||||
props: [],
|
||||
slots: ['leftpart', 'rightpart', 'mobileLeftContent'],
|
||||
link: '/shared-components/AppBaseCard',
|
||||
},
|
||||
{
|
||||
name: 'AppEmailCard',
|
||||
file: 'AppEmailCard.vue',
|
||||
category: 'Layout',
|
||||
description: 'Layout tiga panel (compose/list/detail) untuk antarmuka email.',
|
||||
props: [],
|
||||
slots: ['mailCompose', 'mailList', 'mailDetail'],
|
||||
link: '/shared-components/AppBaseCard',
|
||||
},
|
||||
];
|
||||
|
||||
const categoryColors: Record<string, string> = {
|
||||
Card: 'primary',
|
||||
Widget: 'success',
|
||||
Navigation: 'info',
|
||||
Form: 'warning',
|
||||
Layout: 'secondary',
|
||||
};
|
||||
|
||||
const categories = [...new Set(components.map(c => c.category))];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<UiParentCard title="Shared Components — Panduan Penggunaan">
|
||||
<p class="text-body-1 mb-6">
|
||||
Direktori <code>components/shared/</code> berisi komponen-komponen yang dapat digunakan
|
||||
kembali di seluruh aplikasi. Gunakan komponen ini secara konsisten untuk menjaga
|
||||
tampilan yang seragam.
|
||||
</p>
|
||||
|
||||
<!-- Summary Stats -->
|
||||
<v-row class="mb-6">
|
||||
<v-col v-for="category in categories" :key="category" cols="6" md="4" lg="2">
|
||||
<v-card variant="tonal" :color="categoryColors[category]" class="text-center pa-3">
|
||||
<div class="text-h5 font-weight-bold">
|
||||
{{ components.filter(c => c.category === category).length }}
|
||||
</div>
|
||||
<div class="text-caption">{{ category }}</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="6" md="4" lg="2">
|
||||
<v-card variant="tonal" color="error" class="text-center pa-3">
|
||||
<div class="text-h5 font-weight-bold">{{ components.length }}</div>
|
||||
<div class="text-caption">Total</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Component Cards -->
|
||||
<v-row>
|
||||
<v-col
|
||||
v-for="comp in components"
|
||||
:key="comp.name"
|
||||
cols="12"
|
||||
md="6"
|
||||
lg="4"
|
||||
>
|
||||
<v-card
|
||||
variant="outlined"
|
||||
height="100%"
|
||||
class="d-flex flex-column"
|
||||
>
|
||||
<v-card-item>
|
||||
<template #prepend>
|
||||
<v-chip
|
||||
:color="categoryColors[comp.category]"
|
||||
size="small"
|
||||
variant="tonal"
|
||||
class="mr-2"
|
||||
>
|
||||
{{ comp.category }}
|
||||
</v-chip>
|
||||
</template>
|
||||
<v-card-title class="text-body-1 font-weight-bold">
|
||||
{{ comp.name }}
|
||||
</v-card-title>
|
||||
<v-card-subtitle class="text-caption">
|
||||
{{ comp.file }}
|
||||
</v-card-subtitle>
|
||||
</v-card-item>
|
||||
<v-divider />
|
||||
<v-card-text class="flex-grow-1">
|
||||
<p class="text-body-2 mb-3">{{ comp.description }}</p>
|
||||
|
||||
<!-- Props -->
|
||||
<div v-if="comp.props.length" class="mb-2">
|
||||
<span class="text-caption font-weight-bold text-medium-emphasis">PROPS: </span>
|
||||
<v-chip
|
||||
v-for="prop in comp.props"
|
||||
:key="prop"
|
||||
size="x-small"
|
||||
color="primary"
|
||||
variant="tonal"
|
||||
class="mr-1"
|
||||
>
|
||||
{{ prop }}
|
||||
</v-chip>
|
||||
</div>
|
||||
|
||||
<!-- Slots -->
|
||||
<div v-if="comp.slots.length">
|
||||
<span class="text-caption font-weight-bold text-medium-emphasis">SLOTS: </span>
|
||||
<v-chip
|
||||
v-for="slot in comp.slots"
|
||||
:key="slot"
|
||||
size="x-small"
|
||||
color="secondary"
|
||||
variant="tonal"
|
||||
class="mr-1"
|
||||
>
|
||||
#{{ slot }}
|
||||
</v-chip>
|
||||
</div>
|
||||
</v-card-text>
|
||||
<v-divider />
|
||||
<v-card-actions>
|
||||
<v-btn
|
||||
:to="comp.link"
|
||||
color="primary"
|
||||
variant="text"
|
||||
size="small"
|
||||
append-icon="mdi-arrow-right"
|
||||
>
|
||||
Lihat Tutorial
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Quick Start -->
|
||||
<UiChildCard title="Quick Start — Import Komponen" class="mt-6">
|
||||
<pre class="bg-grey-lighten-4 pa-4 rounded text-body-2 overflow-auto">{{ quickStartCode }}</pre>
|
||||
</UiChildCard>
|
||||
|
||||
<!-- Best Practice -->
|
||||
<UiChildCard title="Best Practice" class="mt-4">
|
||||
<v-list lines="two">
|
||||
<v-list-item
|
||||
prepend-icon="mdi-check-circle"
|
||||
title="Gunakan UiParentCard sebagai wrapper halaman"
|
||||
subtitle="Setiap halaman sebaiknya dibungkus dengan UiParentCard untuk konsistensi elevation dan border."
|
||||
/>
|
||||
<v-list-item
|
||||
prepend-icon="mdi-check-circle"
|
||||
title="Gunakan UiChildCard untuk sub-section"
|
||||
subtitle="Pisahkan setiap bagian konten dalam UiChildCard agar lebih terstruktur."
|
||||
/>
|
||||
<v-list-item
|
||||
prepend-icon="mdi-check-circle"
|
||||
title="Gunakan BaseBreadcrumb di awal halaman"
|
||||
subtitle="Tempatkan BaseBreadcrumb sebagai elemen pertama untuk navigasi yang konsisten."
|
||||
/>
|
||||
<v-list-item
|
||||
prepend-icon="mdi-check-circle"
|
||||
title="Gunakan UiTextfieldPrimary alih-alih v-text-field"
|
||||
subtitle="Untuk konsistensi warna primary di seluruh form aplikasi."
|
||||
/>
|
||||
</v-list>
|
||||
</UiChildCard>
|
||||
</UiParentCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
quickStartCode: `// Import individual sesuai kebutuhan:
|
||||
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
||||
import UiChildCard from '@/components/shared/UiChildCard.vue';
|
||||
import WidgetCard from '@/components/shared/WidgetCard.vue';
|
||||
import WidgetCardv2 from '@/components/shared/WidgetCardv2.vue';
|
||||
import CardHeaderFooter from '@/components/shared/CardHeaderFooter.vue';
|
||||
import UiTableCard from '@/components/shared/UiTableCard.vue';
|
||||
import UiParentCardLogo from '@/components/shared/UiParentCardLogo.vue';
|
||||
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
|
||||
import UiTextfieldPrimary from '@/components/shared/UiTextfieldPrimary.vue';
|
||||
import AppBaseCard from '@/components/shared/AppBaseCard.vue';
|
||||
import AppEmailCard from '@/components/shared/AppEmailCard.vue';`,
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<style-components-shadow />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12" class="mb-6">
|
||||
<h2 class="mb-4">Default Text</h2>
|
||||
<style-components-typography-default-text />
|
||||
</v-col>
|
||||
<v-col cols="12" class="mb-6">
|
||||
<h2 class="mb-4">Heading</h2>
|
||||
<style-components-typography-heading />
|
||||
</v-col>
|
||||
<v-col cols="12" class="mb-6">
|
||||
<h2 class="mb-4">Opacity</h2>
|
||||
<style-components-typography-opacity />
|
||||
</v-col>
|
||||
<v-col cols="12" class="mb-6">
|
||||
<h2 class="mb-4">Text Alignment</h2>
|
||||
<style-components-typography-text-alignment />
|
||||
</v-col>
|
||||
<v-col cols="12" class="mb-6">
|
||||
<h2 class="mb-4">Text Decoration</h2>
|
||||
<style-components-typography-text-decoration />
|
||||
</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>
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<SharedUiChildCard title="Banners">
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<SharedUiChildCard title="Banner 2">
|
||||
<widgets-banners-banner2 />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Banner 3">
|
||||
<widgets-banners-banner3 />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Banner 4">
|
||||
<widgets-banners-banner4 />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Banner 5">
|
||||
<widgets-banners-banner5 />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<SharedUiChildCard title="Banner 6">
|
||||
<widgets-banners-banner6 />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<SharedUiChildCard title="Welcome Card">
|
||||
<widgets-banners-welcom-card />
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</SharedUiChildCard>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-row>
|
||||
<v-col cols="12" class="mb-6">
|
||||
<h2 class="mb-4">Blog Cards</h2>
|
||||
<widgets-cards-blog-cards />
|
||||
</v-col>
|
||||
<v-col cols="12" class="mb-6">
|
||||
<h2 class="mb-4">Follower Cards</h2>
|
||||
<widgets-cards-follower-cards />
|
||||
</v-col>
|
||||
<v-col cols="12" class="mb-6">
|
||||
<h2 class="mb-4">Gift Cards</h2>
|
||||
<widgets-cards-gift-cards />
|
||||
</v-col>
|
||||
<v-col cols="12" class="mb-6">
|
||||
<h2 class="mb-4">Music Cards</h2>
|
||||
<widgets-cards-music-cards />
|
||||
</v-col>
|
||||
<v-col cols="12" class="mb-6">
|
||||
<h2 class="mb-4">Payment Gateways</h2>
|
||||
<widgets-cards-payment-gateways />
|
||||
</v-col>
|
||||
<v-col cols="12" class="mb-6">
|
||||
<h2 class="mb-4">Product Cards</h2>
|
||||
<widgets-cards-product-cards />
|
||||
</v-col>
|
||||
<v-col cols="12" class="mb-6">
|
||||
<h2 class="mb-4">Profile Cards</h2>
|
||||
<widgets-cards-profile-cards />
|
||||
</v-col>
|
||||
<v-col cols="12" class="mb-6">
|
||||
<h2 class="mb-4">Settings</h2>
|
||||
<widgets-cards-settings />
|
||||
</v-col>
|
||||
<v-col cols="12" class="mb-6">
|
||||
<h2 class="mb-4">Upcoming Activity Card</h2>
|
||||
<widgets-cards-upcomming-activity-card />
|
||||
</v-col>
|
||||
<v-col cols="12" class="mb-6">
|
||||
<h2 class="mb-4">User Cards</h2>
|
||||
<widgets-cards-user-cards />
|
||||
</v-col>
|
||||
</v-row>
|
||||
<!-- </SharedUiChildCard> -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-row>
|
||||
<v-col cols="12" class="mb-6">
|
||||
<h2 class="mb-4">Current Value</h2>
|
||||
<widgets-charts-current-value />
|
||||
</v-col>
|
||||
<v-col cols="12" class="mb-6">
|
||||
<h2 class="mb-4">Customer</h2>
|
||||
<widgets-charts-customer />
|
||||
</v-col>
|
||||
<v-col cols="12" class="mb-6">
|
||||
<h2 class="mb-4">Earned</h2>
|
||||
<widgets-charts-earned />
|
||||
|
||||
</v-col>
|
||||
<v-col cols="12" class="mb-6">
|
||||
<h2 class="mb-4">Followers</h2>
|
||||
<widgets-charts-followers />
|
||||
|
||||
</v-col>
|
||||
<v-col cols="12" class="mb-6">
|
||||
<h2 class="mb-4">Monthly Earnings</h2>
|
||||
<widgets-charts-monthly-earnings />
|
||||
|
||||
</v-col>
|
||||
<v-col cols="12" class="mb-6">
|
||||
<h2 class="mb-4">Most Visited</h2>
|
||||
<widgets-charts-most-visited />
|
||||
|
||||
</v-col>
|
||||
<v-col cols="12" class="mb-6">
|
||||
<h2 class="mb-4">Page Impression</h2>
|
||||
<widgets-charts-page-impression />
|
||||
|
||||
</v-col>
|
||||
<v-col cols="12" class="mb-6">
|
||||
<h2 class="mb-4">Projects</h2>
|
||||
<widgets-charts-projects />
|
||||
|
||||
</v-col>
|
||||
<v-col cols="12" class="mb-6">
|
||||
<h2 class="mb-4">Revenue Updates</h2>
|
||||
<widgets-charts-revenue-updates />
|
||||
|
||||
</v-col>
|
||||
<v-col cols="12" class="mb-6">
|
||||
<h2 class="mb-4">Sales Overview</h2>
|
||||
<widgets-charts-sales-overview />
|
||||
|
||||
</v-col>
|
||||
<v-col cols="12" class="mb-6">
|
||||
<h2 class="mb-4">Total Earning</h2>
|
||||
<widgets-charts-total-earning />
|
||||
|
||||
</v-col>
|
||||
<v-col cols="12" class="mb-6">
|
||||
<h2 class="mb-4">Views</h2>
|
||||
<widgets-charts-views />
|
||||
|
||||
</v-col>
|
||||
<v-col cols="12" class="mb-6">
|
||||
<h2 class="mb-4">Yearly Breakup</h2>
|
||||
<widgets-charts-yearly-breakup />
|
||||
|
||||
</v-col>
|
||||
<v-col cols="12" class="mb-6">
|
||||
<h2 class="mb-4">Yearly Sales</h2>
|
||||
<widgets-charts-yearly-sales />
|
||||
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
Reference in New Issue
Block a user