pukaad-ui-lib 1.150.0 → 1.152.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "pukaad-ui-lib",
   "configKey": "pukaadUI",
-  "version": "1.150.0",
+  "version": "1.152.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/assets/css/main.css

@@ -1 +1 @@
-@import "tailwindcss";@import "tw-animate-css";@import "./system.css";@import "./scroll-bar.css";@import "quill/dist/quill.snow.css";@custom-variant dark (&:is(.dark *));@theme inline{--radius-sm:calc(var(--radius) - 4px);--radius-md:calc(var(--radius) - 2px);--radius-lg:var(--radius);--radius-xl:calc(var(--radius) + 4px);--color-background:var(--background);--color-foreground:var(--foreground);--color-card:var(--card);--color-card-foreground:var(--card-foreground);--color-popover:var(--popover);--color-popover-foreground:var(--popover-foreground);--color-primary-foreground:var(--primary-foreground);--color-secondary-foreground:var(--secondary-foreground);--color-muted:var(--muted);--color-muted-foreground:var(--muted-foreground);--color-accent:var(--accent);--color-accent-foreground:var(--accent-foreground);--color-destructive:var(--destructive);--color-destructive-foreground:var(--destructive-foreground);--color-border:var(--border);--color-input:var(--input);--color-ring:var(--ring);--color-chart-1:var(--chart-1);--color-chart-2:var(--chart-2);--color-chart-3:var(--chart-3);--color-chart-4:var(--chart-4);--color-chart-5:var(--chart-5);--color-sidebar:var(--sidebar);--color-sidebar-foreground:var(--sidebar-foreground);--color-sidebar-primary:var(--sidebar-primary);--color-sidebar-primary-foreground:var(--sidebar-primary-foreground);--color-sidebar-accent:var(--sidebar-accent);--color-sidebar-accent-foreground:var(--sidebar-accent-foreground);--color-sidebar-border:var(--sidebar-border);--color-sidebar-ring:var(--sidebar-ring);--color-red:var(--red);--color-error:var(--error);--color-success:var(--success);--color-green:var(--green);--color-warning:var(--warning);--color-yellow:var(--yellow);--color-primary:var(--primary);--color-secondary:var(--secondary);--color-info:var(--info);--color-black:var(--black);--color-dark:var(--dark);--color-gray:var(--gray);--color-cloud:var(--cloud);--color-mercury:var(--mercury);--color-green-light:var(--green-light);--color-red-light:var(--red-light);--color-yellow-light:var(--yellow-light);--color-bright:var(--bright);--color-silver:var(--silver);--color-smoke:var(--smoke);--z-index-announce-tool:10;--z-index-dropdown:11;--z-index-overlay:12;--z-index-loading:13;--z-index-drawer:14;--z-index-modal:15;--z-index-toast:99998;--z-index-loading-page:99999}:root{--radius:0.625rem;--red:#b71c1c;--success:#43a047;--green:#1b5e20;--warning:#f9a825;--yellow:#fbc02d;--info:#e3f2fd;--black:#212121;--dark:#424242;--gray:#616161;--cloud:#c4c4c4;--mercury:#e0e0e0;--green-light:#e3f5e3;--red-light:#fde3e3;--yellow-light:#fef3c7;--bright:#f5f5f5;--silver:#f7f7f7;--smoke:#fafafa;--white:#fff;--background:var(--white);--foreground:var(--black);--card:var(--background);--card-foreground:var(--foreground);--popover:var(--background);--popover-foreground:var(--foreground);--primary:#1976b8;--primary-foreground:var(--white);--secondary:#22a7ef;--secondary-foreground:var(--white);--muted:oklch(0.97 0 0);--muted-foreground:var(--cloud);--accent:oklch(0.97 0 0);--accent-foreground:oklch(0.205 0 0);--destructive:#d32f2f;--destructive-foreground:var(--white);--border:var(--color-mercury);--input:var(--color-mercury);--ring:var(--mercury);--chart-1:oklch(0.646 0.222 41.116);--chart-2:oklch(0.6 0.118 184.704);--chart-3:oklch(0.398 0.07 227.392);--chart-4:oklch(0.828 0.189 84.429);--chart-5:oklch(0.769 0.188 70.08);--sidebar:oklch(0.985 0 0);--sidebar-foreground:var(--foreground);--sidebar-primary:oklch(0.205 0 0);--sidebar-primary-foreground:oklch(0.985 0 0);--sidebar-accent:oklch(0.97 0 0);--sidebar-accent-foreground:oklch(0.205 0 0);--sidebar-border:var(--color-mercury);--sidebar-ring:var(--color-mercury)}.dark{--background:oklch(0.145 0 0);--foreground:oklch(0.985 0 0);--card:oklch(0.145 0 0);--card-foreground:oklch(0.985 0 0);--popover:oklch(0.145 0 0);--popover-foreground:oklch(0.985 0 0);--primary:oklch(0.985 0 0);--primary-foreground:oklch(0.205 0 0);--secondary:oklch(0.269 0 0);--secondary-foreground:oklch(0.985 0 0);--muted:oklch(0.269 0 0);--muted-foreground:oklch(0.708 0 0);--accent:oklch(0.269 0 0);--accent-foreground:oklch(0.985 0 0);--destructive:oklch(0.396 0.141 25.723);--destructive-foreground:oklch(0.637 0.237 25.331);--border:oklch(0.269 0 0);--input:oklch(0.269 0 0);--ring:oklch(0.439 0 0);--chart-1:oklch(0.488 0.243 264.376);--chart-2:oklch(0.696 0.17 162.48);--chart-3:oklch(0.769 0.188 70.08);--chart-4:oklch(0.627 0.265 303.9);--chart-5:oklch(0.645 0.246 16.439);--sidebar:oklch(0.205 0 0);--sidebar-foreground:oklch(0.985 0 0);--sidebar-primary:oklch(0.488 0.243 264.376);--sidebar-primary-foreground:oklch(0.985 0 0);--sidebar-accent:oklch(0.269 0 0);--sidebar-accent-foreground:oklch(0.985 0 0);--sidebar-border:oklch(0.269 0 0);--sidebar-ring:oklch(0.439 0 0)}@layer base{*{@apply border-border outline-ring/50}body{@apply bg-background text-foreground}}
+@import "tailwindcss";@import "tw-animate-css";@import "./system.css";@import "./scroll-bar.css";@import "quill/dist/quill.snow.css";@custom-variant dark (&:is(.dark *));@theme inline{--radius-sm:calc(var(--radius) - 4px);--radius-md:calc(var(--radius) - 2px);--radius-lg:var(--radius);--radius-xl:calc(var(--radius) + 4px);--color-background:var(--background);--color-foreground:var(--foreground);--color-card:var(--card);--color-card-foreground:var(--card-foreground);--color-popover:var(--popover);--color-popover-foreground:var(--popover-foreground);--color-primary-foreground:var(--primary-foreground);--color-secondary-foreground:var(--secondary-foreground);--color-muted:var(--muted);--color-muted-foreground:var(--muted-foreground);--color-accent:var(--accent);--color-accent-foreground:var(--accent-foreground);--color-destructive:var(--destructive);--color-destructive-foreground:var(--destructive-foreground);--color-border:var(--border);--color-input:var(--input);--color-ring:var(--ring);--color-chart-1:var(--chart-1);--color-chart-2:var(--chart-2);--color-chart-3:var(--chart-3);--color-chart-4:var(--chart-4);--color-chart-5:var(--chart-5);--color-sidebar:var(--sidebar);--color-sidebar-foreground:var(--sidebar-foreground);--color-sidebar-primary:var(--sidebar-primary);--color-sidebar-primary-foreground:var(--sidebar-primary-foreground);--color-sidebar-accent:var(--sidebar-accent);--color-sidebar-accent-foreground:var(--sidebar-accent-foreground);--color-sidebar-border:var(--sidebar-border);--color-sidebar-ring:var(--sidebar-ring);--color-red:var(--red);--color-error:var(--error);--color-success:var(--success);--color-green:var(--green);--color-warning:var(--warning);--color-yellow:var(--yellow);--color-pink:var(--pink);--color-primary:var(--primary);--color-secondary:var(--secondary);--color-info:var(--info);--color-black:var(--black);--color-dark:var(--dark);--color-gray:var(--gray);--color-cloud:var(--cloud);--color-mercury:var(--mercury);--color-green-light:var(--green-light);--color-red-light:var(--red-light);--color-yellow-light:var(--yellow-light);--color-bright:var(--bright);--color-silver:var(--silver);--color-smoke:var(--smoke);--z-index-announce-tool:10;--z-index-dropdown:11;--z-index-overlay:12;--z-index-loading:13;--z-index-drawer:14;--z-index-modal:15;--z-index-toast:99998;--z-index-loading-page:99999}:root{--radius:0.625rem;--red:#b71c1c;--success:#43a047;--green:#1b5e20;--warning:#f9a825;--yellow:#fbc02d;--info:#e3f2fd;--black:#212121;--dark:#424242;--gray:#616161;--cloud:#c4c4c4;--mercury:#e0e0e0;--green-light:#e3f5e3;--red-light:#fde3e3;--yellow-light:#fef3c7;--bright:#f5f5f5;--silver:#f7f7f7;--smoke:#fafafa;--white:#fff;--pink:#ffe6f4;--background:var(--white);--foreground:var(--black);--card:var(--background);--card-foreground:var(--foreground);--popover:var(--background);--popover-foreground:var(--foreground);--primary:#1976b8;--primary-foreground:var(--white);--secondary:#22a7ef;--secondary-foreground:var(--white);--muted:oklch(0.97 0 0);--muted-foreground:var(--cloud);--accent:oklch(0.97 0 0);--accent-foreground:oklch(0.205 0 0);--destructive:#d32f2f;--destructive-foreground:var(--white);--border:var(--color-mercury);--input:var(--color-mercury);--ring:var(--mercury);--chart-1:oklch(0.646 0.222 41.116);--chart-2:oklch(0.6 0.118 184.704);--chart-3:oklch(0.398 0.07 227.392);--chart-4:oklch(0.828 0.189 84.429);--chart-5:oklch(0.769 0.188 70.08);--sidebar:oklch(0.985 0 0);--sidebar-foreground:var(--foreground);--sidebar-primary:oklch(0.205 0 0);--sidebar-primary-foreground:oklch(0.985 0 0);--sidebar-accent:oklch(0.97 0 0);--sidebar-accent-foreground:oklch(0.205 0 0);--sidebar-border:var(--color-mercury);--sidebar-ring:var(--color-mercury)}.dark{--background:oklch(0.145 0 0);--foreground:oklch(0.985 0 0);--card:oklch(0.145 0 0);--card-foreground:oklch(0.985 0 0);--popover:oklch(0.145 0 0);--popover-foreground:oklch(0.985 0 0);--primary:oklch(0.985 0 0);--primary-foreground:oklch(0.205 0 0);--secondary:oklch(0.269 0 0);--secondary-foreground:oklch(0.985 0 0);--muted:oklch(0.269 0 0);--muted-foreground:oklch(0.708 0 0);--accent:oklch(0.269 0 0);--accent-foreground:oklch(0.985 0 0);--destructive:oklch(0.396 0.141 25.723);--destructive-foreground:oklch(0.637 0.237 25.331);--border:oklch(0.269 0 0);--input:oklch(0.269 0 0);--ring:oklch(0.439 0 0);--chart-1:oklch(0.488 0.243 264.376);--chart-2:oklch(0.696 0.17 162.48);--chart-3:oklch(0.769 0.188 70.08);--chart-4:oklch(0.627 0.265 303.9);--chart-5:oklch(0.645 0.246 16.439);--sidebar:oklch(0.205 0 0);--sidebar-foreground:oklch(0.985 0 0);--sidebar-primary:oklch(0.488 0.243 264.376);--sidebar-primary-foreground:oklch(0.985 0 0);--sidebar-accent:oklch(0.269 0 0);--sidebar-accent-foreground:oklch(0.985 0 0);--sidebar-border:oklch(0.269 0 0);--sidebar-ring:oklch(0.439 0 0)}@layer base{*{@apply border-border outline-ring/50}body{@apply bg-background text-foreground}}

package/dist/runtime/components/data-table.d.vue.ts

@@ -8,6 +8,7 @@ export interface DataTableProps {
     disabledSort?: boolean;
     disabledPagination?: boolean;
     totalPage?: number;
+    loading?: boolean;
 }
 type __VLS_Props = DataTableProps;
 type __VLS_ModelProps = {
@@ -19,25 +20,25 @@ declare var __VLS_13: {
 }, __VLS_32: {
     items: Record<string, any>[];
     header: TableHeader[];
-}, __VLS_48: {
+}, __VLS_65: {
     item: Record<string, any>;
     header: TableHeader[];
     index: number;
-}, __VLS_57: `item-${string}`, __VLS_58: {
+}, __VLS_74: `item-${string}`, __VLS_75: {
     item: Record<string, any>;
-}, __VLS_60: {}, __VLS_68: {};
+}, __VLS_77: {}, __VLS_85: {};
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_57>]?: (props: typeof __VLS_58) => any;
+    [K in NonNullable<typeof __VLS_74>]?: (props: typeof __VLS_75) => any;
 } & {
     header?: (props: typeof __VLS_13) => any;
 } & {
     body?: (props: typeof __VLS_32) => any;
 } & {
-    item?: (props: typeof __VLS_48) => any;
+    item?: (props: typeof __VLS_65) => any;
 } & {
-    empty?: (props: typeof __VLS_60) => any;
+    empty?: (props: typeof __VLS_77) => any;
 } & {
-    'empty-content'?: (props: typeof __VLS_68) => any;
+    'empty-content'?: (props: typeof __VLS_85) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:page": (value: number) => any;
@@ -61,6 +62,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     cellAlinement: TableHeaderAlignment;
     disabledHeader: boolean;
     disabledSort: boolean;
+    loading: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/data-table.vue

@@ -9,6 +9,7 @@ import {
   TableCell as ShadTableCell,
   TableEmpty as ShadTableEmpty
 } from "@/runtime/components/ui/table";
+import { Skeleton } from "@/runtime/components/ui/skeleton";
 const emit = defineEmits(["select-page", "change-page", "click-row", "change-item-per-page"]);
 const props = defineProps({
   items: { type: Array, required: false, default: () => [] },
@@ -18,13 +19,15 @@ const props = defineProps({
   disabledHeader: { type: Boolean, required: false, default: false },
   disabledSort: { type: Boolean, required: false, default: false },
   disabledPagination: { type: Boolean, required: false, default: false },
-  totalPage: { type: Number, required: false, default: 1 }
+  totalPage: { type: Number, required: false, default: 1 },
+  loading: { type: Boolean, required: false, default: false }
 });
 const page = defineModel("page", { type: Number, ...{
   default: 1
 } });
 const sortkey = ref("");
 const sortDesc = ref(false);
+const itemPerPage = ref(10);
 const itemHeaders = computed(() => {
   if (props.itemHeader.length > 0) return props.itemHeader;
   if (props.items.length === 0) return [];
@@ -120,7 +123,20 @@ const getJustifyClass = (alignment = "start") => {
         <!-- Body -->
         <slot name="body" :items="sortedItems" :header="itemHeaders">
           <ShadTableBody>
-            <template v-if="sortedItems.length > 0">
+            <!-- Loading Skeleton -->
+            <template v-if="props.loading">
+              <ShadTableRow v-for="row in itemPerPage" :key="`skeleton-${row}`">
+                <ShadTableCell
+                  v-for="(header, i_header) in itemHeaders"
+                  :key="`skeleton-cell-${row}-${i_header}`"
+                >
+                  <Skeleton class="h-4 w-full" />
+                </ShadTableCell>
+              </ShadTableRow>
+            </template>
+
+            <!-- Data Rows -->
+            <template v-else-if="sortedItems.length > 0">
               <ShadTableRow
                 v-for="(item, i_body) in sortedItems"
                 :key="i_body"
@@ -170,7 +186,10 @@ const getJustifyClass = (alignment = "start") => {
         :totalPage="props.totalPage"
         v-model="page"
         @change-item-per-page="
-  (val) => emit('change-item-per-page', val)
+  (val) => {
+    itemPerPage = val;
+    emit('change-item-per-page', val);
+  }
 "
       />
     </div>

package/dist/runtime/components/data-table.vue.d.ts

@@ -8,6 +8,7 @@ export interface DataTableProps {
     disabledSort?: boolean;
     disabledPagination?: boolean;
     totalPage?: number;
+    loading?: boolean;
 }
 type __VLS_Props = DataTableProps;
 type __VLS_ModelProps = {
@@ -19,25 +20,25 @@ declare var __VLS_13: {
 }, __VLS_32: {
     items: Record<string, any>[];
     header: TableHeader[];
-}, __VLS_48: {
+}, __VLS_65: {
     item: Record<string, any>;
     header: TableHeader[];
     index: number;
-}, __VLS_57: `item-${string}`, __VLS_58: {
+}, __VLS_74: `item-${string}`, __VLS_75: {
     item: Record<string, any>;
-}, __VLS_60: {}, __VLS_68: {};
+}, __VLS_77: {}, __VLS_85: {};
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_57>]?: (props: typeof __VLS_58) => any;
+    [K in NonNullable<typeof __VLS_74>]?: (props: typeof __VLS_75) => any;
 } & {
     header?: (props: typeof __VLS_13) => any;
 } & {
     body?: (props: typeof __VLS_32) => any;
 } & {
-    item?: (props: typeof __VLS_48) => any;
+    item?: (props: typeof __VLS_65) => any;
 } & {
-    empty?: (props: typeof __VLS_60) => any;
+    empty?: (props: typeof __VLS_77) => any;
 } & {
-    'empty-content'?: (props: typeof __VLS_68) => any;
+    'empty-content'?: (props: typeof __VLS_85) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:page": (value: number) => any;
@@ -61,6 +62,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     cellAlinement: TableHeaderAlignment;
     disabledHeader: boolean;
     disabledSort: boolean;
+    loading: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/ui/skeleton/Skeleton.d.vue.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from "vue";
+type __VLS_Props = {
+    class?: HTMLAttributes["class"];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ui/skeleton/Skeleton.vue

@@ -0,0 +1,13 @@
+<script setup>
+import { cn } from "@/runtime/plugins/shadcn";
+const props = defineProps({
+  class: { type: null, required: false }
+});
+</script>
+
+<template>
+  <div
+    data-slot="skeleton"
+    :class="cn('animate-pulse rounded-md bg-gray-200', props.class)"
+  />
+</template>

package/dist/runtime/components/ui/skeleton/Skeleton.vue.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from "vue";
+type __VLS_Props = {
+    class?: HTMLAttributes["class"];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ui/skeleton/index.d.ts

@@ -0,0 +1 @@
+export { default as Skeleton } from "./Skeleton.vue.js";

package/dist/runtime/components/ui/skeleton/index.js

@@ -0,0 +1 @@
+export { default as Skeleton } from "./Skeleton.vue";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pukaad-ui-lib",
-  "version": "1.150.0",
+  "version": "1.152.0",
   "description": "pukaad-ui for MeMSG",
   "repository": {
     "type": "git",