pukaad-ui-lib 1.5.0 → 1.7.0

package/dist/module.json

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

package/dist/runtime/components/input/input-select-province.vue

@@ -6,7 +6,7 @@
         <Icon name="lucide:chevron-down" />
       </div>
     </ShadPopoverTrigger>
-    <ShadPopoverContent class="flex p-[24px] w-[425px]">
+    <ShadPopoverContent class="flex p-[24px] w-[425px] h-full">
       <ShadCommand>
         <div class="space-y-[22px]">
           <div class="font-title-medium-prominent">เลือกจังหวัด</div>
@@ -16,26 +16,44 @@
                 <Icon name="lucide:search" />
               </template>
             </InputTextField>
-            <ShadCommandList>
+            <ShadCommandList class="h-[550px]">
               <div class="flex flex-col gap-[16px]">
                 <div class="flex flex-col gap-[8px]">
                   <div>ปลายทางยอดนิยม</div>
-                  <ShadCarousel>
-                    <ShadCarouselContent>
-                      <ShadCarouselItem
-                        v-for="province in provinces"
-                        :key="province.value"
-                        @select="selectProvince(province.value)"
-                      >
-                        <img
-                          :src="
-  province.image_cover_url || 'https://placehold.co/292x164?text=Place+Photo'
-"
-                        />
-                        <div>{{ province.label }}</div>
-                      </ShadCarouselItem>
-                    </ShadCarouselContent>
-                  </ShadCarousel>
+                  <div class="relative">
+                    <ShadCarousel>
+                      <ShadCarouselContent>
+                        <ShadCarouselItem
+                          v-for="province in provinces"
+                          :key="province.value"
+                          class="flex cursor-pointer basis-1/3.5"
+                          @click="selectProvince(province.value)"
+                        >
+                          <Card
+                            class="flex flex-col bg-mercury w-[140px] h-[180px]"
+                          >
+                            <div class="font-medium">
+                              {{ province.label }}
+                            </div>
+                            <div
+                              v-if="province.image_cover_url === null"
+                              class="flex flex-col items-center h-full justify-center"
+                            >
+                              <Icon name="lucide:image" size="28" />
+                              <div class="text-gray">ไม่มีรูป</div>
+                            </div>
+                            <img
+                              v-else
+                              :src="province.image_cover_url || ''"
+                              class="w-full object-cover"
+                            />
+                          </Card>
+                        </ShadCarouselItem>
+                      </ShadCarouselContent>
+                      <ShadCarouselPrevious class="left-0" />
+                      <ShadCarouselNext class="right-0" />
+                    </ShadCarousel>
+                  </div>
                 </div>
                 <ShadCommandGroup>
                   <ShadCommandItem
@@ -80,10 +98,10 @@ const fetchProvinces = async () => {
     );
     const data = response.data ?? response;
     if (data && Array.isArray(data)) {
-      provinces.value = data.map((p) => ({
+      provinces.value = data.filter((p) => p.is_active === true).map((p) => ({
         value: String(p.id),
         label: p.name_th,
-        image_cover_url: p.image_cover_url ?? ""
+        image_cover_url: p.image_cover_url ?? null
       }));
     }
   } catch (error) {

package/dist/runtime/components/pagination.vue

@@ -1,19 +1,10 @@
 <template>
-  <ShadPagination
-    v-slot="{ page }"
-    :items-per-page="itemPerPage"
-    :total="props.totalPage"
-    v-model:page="pageModel"
-  >
+  <ShadPagination v-slot="{ page }" :items-per-page="itemPerPage" :total="props.totalPage" v-model:page="pageModel">
     <ShadPaginationContent v-slot="{ items }">
       <ShadPaginationFirst />
       <ShadPaginationPrevious />
       <template v-for="(item, index) in items" :key="index">
-        <ShadPaginationItem
-          v-if="item.type === 'page'"
-          :value="item.value"
-          :is-active="item.value === page"
-        >
+        <ShadPaginationItem v-if="item.type === 'page'" :value="item.value" :is-active="item.value === page">
           {{ item.value }}
         </ShadPaginationItem>
       </template>
@@ -31,11 +22,7 @@
           </Button>
         </ShadDropdownMenuTrigger>
         <ShadDropdownMenuContent class="max-h-96">
-          <ShadDropdownMenuItem
-            v-for="n in [10, 50, 100]"
-            :key="n"
-            @click="onSlectItemPerPage(n)"
-          >
+          <ShadDropdownMenuItem v-for="n in [10, 50, 100]" :key="n" @click="onSlectItemPerPage(n)">
             {{ n }} / หน้า
           </ShadDropdownMenuItem>
         </ShadDropdownMenuContent>
@@ -56,5 +43,6 @@ const pageModel = defineModel({ type: Number, ...{
 const itemPerPage = ref(10);
 const onSlectItemPerPage = (value) => {
   itemPerPage.value = value;
+  emits("change-item-per-page", value);
 };
 </script>

package/dist/runtime/components/ui/carousel/CarouselNext.vue

@@ -16,7 +16,7 @@ const { orientation, canScrollNext, scrollNext } = useCarousel();
     :disabled="!canScrollNext"
     :class="
   cn(
-    'absolute size-8 rounded-full',
+    'absolute size-8 rounded-full bg-white text-primary shadow-lg',
     orientation === 'horizontal' ? 'top-1/2 -right-12 -translate-y-1/2' : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
     props.class
   )

package/dist/runtime/components/ui/carousel/CarouselPrevious.vue

@@ -16,7 +16,7 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel();
     :disabled="!canScrollPrev"
     :class="
   cn(
-    'absolute size-8 rounded-full',
+    'absolute size-8 rounded-full bg-white text-primary shadow-lg',
     orientation === 'horizontal' ? 'top-1/2 -left-12 -translate-y-1/2' : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
     props.class
   )

package/dist/runtime/components/ui/command/Command.vue

@@ -47,8 +47,7 @@ function filterItems() {
   for (const [id, value] of allItems.value) {
     const score = contains(value, filterState.search);
     filterState.filtered.items.set(id, score ? 1 : 0);
-    if (score)
-      itemCount++;
+    if (score) itemCount++;
   }
   for (const [groupId, group] of allGroups.value) {
     for (const itemId of group) {
@@ -60,9 +59,12 @@ function filterItems() {
   }
   filterState.filtered.count = itemCount;
 }
-watch(() => filterState.search, () => {
-  filterItems();
-});
+watch(
+  () => filterState.search,
+  () => {
+    filterItems();
+  }
+);
 provideCommandContext({
   allItems,
   allGroups,
@@ -74,7 +76,12 @@ provideCommandContext({
   <ListboxRoot
     data-slot="command"
     v-bind="forwarded"
-    :class="cn('bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md', props.class)"
+    :class="
+  cn(
+    'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
+    props.class
+  )
+"
   >
     <slot />
   </ListboxRoot>

package/dist/runtime/components/ui/command/CommandList.vue

@@ -15,12 +15,7 @@ const forwarded = useForwardProps(delegatedProps);
   <ListboxContent
     data-slot="command-list"
     v-bind="forwarded"
-    :class="
-  cn(
-    'max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto',
-    props.class
-  )
-"
+    :class="cn('scroll-py-1 overflow-x-hidden overflow-y-auto', props.class)"
   >
     <div role="presentation">
       <slot />

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

@@ -19,6 +19,7 @@ export declare const useCommand: <T extends {
             groups: Set<string>;
         };
     };
+    modelValue: Ref<unknown>;
 } | null | undefined = {
     allItems: Ref<Map<string, string>>;
     allGroups: Ref<Map<string, Set<string>>>;
@@ -30,6 +31,7 @@ export declare const useCommand: <T extends {
             groups: Set<string>;
         };
     };
+    modelValue: Ref<unknown>;
 }>(fallback?: T | undefined) => T extends null ? {
     allItems: Ref<Map<string, string>>;
     allGroups: Ref<Map<string, Set<string>>>;
@@ -41,6 +43,7 @@ export declare const useCommand: <T extends {
             groups: Set<string>;
         };
     };
+    modelValue: Ref<unknown>;
 } | null : {
     allItems: Ref<Map<string, string>>;
     allGroups: Ref<Map<string, Set<string>>>;
@@ -52,6 +55,7 @@ export declare const useCommand: <T extends {
             groups: Set<string>;
         };
     };
+    modelValue: Ref<unknown>;
 }, provideCommandContext: (contextValue: {
     allItems: Ref<Map<string, string>>;
     allGroups: Ref<Map<string, Set<string>>>;
@@ -63,6 +67,7 @@ export declare const useCommand: <T extends {
             groups: Set<string>;
         };
     };
+    modelValue: Ref<unknown>;
 }) => {
     allItems: Ref<Map<string, string>>;
     allGroups: Ref<Map<string, Set<string>>>;
@@ -74,6 +79,7 @@ export declare const useCommand: <T extends {
             groups: Set<string>;
         };
     };
+    modelValue: Ref<unknown>;
 };
 export declare const useCommandGroup: <T extends {
     id?: string;

package/dist/runtime/components/ui/table/TableEmpty.vue

@@ -21,8 +21,13 @@ const delegatedProps = reactiveOmit(props, "class");
 "
       v-bind="delegatedProps"
     >
-      <div class="flex items-center justify-center py-10">
+      <div
+        class="flex flex-col items-center justify-center h-[500px] gap-[8px]"
+      >
         <slot />
+
+        <Icon name="pukaad:empty-document" class="w-[218px] h-[200px]" />
+        <div class="text-gray font-body-large-prominent">ไม่มีข้อมูลในระบบ</div>
       </div>
     </TableCell>
   </TableRow>

package/package.json

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