pukaad-ui-lib 1.149.0 → 1.151.0

package/dist/module.json

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

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/drawer/drawer-post-blog.vue

@@ -33,11 +33,11 @@
         :limit="5"
       />
 
-      <InputCheckbox
+      <!-- <InputCheckbox
         name="disableComment"
         label="ไม่อนุญาตให้แสดงความคิดเห็น"
         v-model="form.disableComment"
-      />
+      /> -->
 
       <div class="flex flex-col gap-[8px]">
         <div class="text-gray font-body-large">ภาพหน้าปก</div>

package/dist/runtime/components/input/input-autocomplete.d.vue.ts

@@ -36,9 +36,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     description: string;
-    limit: number;
     options: AutocompleteOption[] | string[] | number[];
     placeholder: string;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

package/dist/runtime/components/input/input-autocomplete.vue.d.ts

@@ -36,9 +36,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     description: string;
-    limit: number;
     options: AutocompleteOption[] | string[] | number[];
     placeholder: string;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

package/dist/runtime/components/input/input-tag.d.vue.ts

@@ -26,8 +26,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     name: string;
     state: "user" | "admin";
-    limit: number;
     placeholder: string;
+    limit: number;
     ignore: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/input/input-tag.vue.d.ts

@@ -26,8 +26,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     name: string;
     state: "user" | "admin";
-    limit: number;
     placeholder: string;
+    limit: number;
     ignore: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 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.149.0",
+  "version": "1.151.0",
   "description": "pukaad-ui for MeMSG",
   "repository": {
     "type": "git",