pukaad-ui-lib 1.6.0 → 1.8.0

package/dist/module.json

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

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-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,56 @@
                 <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 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="relative overflow-hidden bg-mercury w-[140px] h-[180px]"
+                          >
+                            <!-- No image state -->
+                            <template v-if="province.image_cover_url === null">
+                              <div class="font-medium">
+                                {{ province.label }}
+                              </div>
+                              <div
+                                class="flex flex-col items-center justify-center gap-[4px] h-full mt-2"
+                              >
+                                <Icon name="lucide:image" size="28" />
+                                <div class="text-gray">ไม่มีรูป</div>
+                              </div>
+                            </template>
+
+                            <!-- Has image state -->
+                            <template v-else>
+                              <img
+                                :src="
+  province.image_cover_url || 'https://placehold.co/140x180?text=Place+Photo'
 "
-                        />
-                        <div>{{ province.label }}</div>
-                      </ShadCarouselItem>
-                    </ShadCarouselContent>
-                  </ShadCarousel>
+                                class="w-[140px] h-[180px] object-cover"
+                              />
+                              <div
+                                class="absolute top-0 left-0 right-0 p-2 font-medium text-white bg-gradient-to-b from-black/70 to-transparent"
+                              >
+                                {{ province.label }}
+                              </div>
+                            </template>
+                          </Card>
+                        </ShadCarouselItem>
+                      </ShadCarouselContent>
+                      <ShadCarouselPrevious class="left-0" />
+                      <ShadCarouselNext class="right-0" />
+                    </ShadCarousel>
+                  </div>
                 </div>
                 <ShadCommandGroup>
                   <ShadCommandItem
@@ -80,10 +110,11 @@ 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,
+        domain: p.domain ?? null
       }));
     }
   } catch (error) {
@@ -97,6 +128,11 @@ const selectedLabel = computed(() => {
 const selectProvince = (value) => {
   modelValue.value = value;
   open.value = false;
+  const selected = provinces.value.find((p) => p.value === value);
+  if (selected?.domain) {
+    const url = selected.domain.startsWith("http") ? selected.domain : `https://${selected.domain}`;
+    window.location.href = url;
+  }
 };
 onMounted(() => {
   fetchProvinces();

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/card/Card.vue

@@ -1,14 +1,11 @@
 <template>
   <Form v-slot="{ meta }" @submit="onSubmit">
-    <div
-      data-slot="card"
-      :class="
+    <div data-slot="card" :class="
   cn(
-    'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-4',
+    'bg-card text-card-foreground flex flex-col gap-6 rounded-xl py-4',
     props.class
   )
-"
-    >
+">
       <slot name="default" :meta="meta" />
     </div>
   </Form>

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/package.json

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