pukaad-ui-lib 1.376.2 → 1.377.0

package/dist/runtime/components/tab_old.vue

@@ -1,104 +1,104 @@
 <template>
-  <div v-if="!props.disabledHeader">
-    <div class="relative">
-      <button
-        v-if="!isTabScrollLeft"
+  <div v-if="!props.disabledHeader">
+    <div class="relative">
+      <button
+        v-if="!isTabScrollLeft"
         :class="[
   'absolute flex items-center justify-start left-0 top-1/2 transform -translate-y-1/2',
   'bg-gradient-to-r from-white via-white to-transparent w-12 cursor-pointer',
   buttonSize
-]"
-        @click="onScrollLeft"
-      >
-        <Icon name="mdi:chevron-left" size="24" />
-      </button>
-
-      <div
-        ref="tabHeaderRef"
-        class="flex overflow-x-hidden"
+]"
+        @click="onScrollLeft"
+      >
+        <Icon name="mdi:chevron-left" size="24" />
+      </button>
+
+      <div
+        ref="tabHeaderRef"
+        class="flex overflow-x-hidden"
         :style="{
   columnGap: `${props.tabButtonGap}px`
-}"
-      >
-        <div v-for="(tab, i) in items" :key="i" @click="activeTab = tab.value">
-          <slot
-            :name="`tab-${tab.value}-label`"
-            :active="activeTab == tab.value"
-            :disabled="tab.disabled"
-          >
-            <button
+}"
+      >
+        <div v-for="(tab, i) in items" :key="i" @click="activeTab = tab.value">
+          <slot
+            :name="`tab-${tab.value}-label`"
+            :active="activeTab == tab.value"
+            :disabled="tab.disabled"
+          >
+            <button
               :class="[
   'flex items-center justify-center font-body-large p-[16px] gap-[8px] text-nowrap',
   'cursor-pointer disabled:cursor-not-allowed',
   tab.disabled ? 'text-cloud' : 'text-gray',
   color(tab.value),
   buttonSize
-]"
-              :disabled="tab.disabled"
-            >
-              <slot :name="`tab-${tab.value}-label-text`">
-                <slot
+]"
+              :disabled="tab.disabled"
+            >
+              <slot :name="`tab-${tab.value}-label-text`">
+                <slot
                   v-if="
   $slots[`tab-${tab.value}-label-text-prepend-icon`] || props.tabButtonPrependIcon
-"
-                  :name="`tab-${tab.value}-label-text-prepend-icon`"
-                >
-                  <Icon :name="props.tabButtonPrependIcon" />
-                </slot>
-                <slot :name="`tab-${tab.value}-label-text-word`">
-                  {{ tab.label }}
-                </slot>
-                <slot
+"
+                  :name="`tab-${tab.value}-label-text-prepend-icon`"
+                >
+                  <Icon :name="props.tabButtonPrependIcon" />
+                </slot>
+                <slot :name="`tab-${tab.value}-label-text-word`">
+                  {{ tab.label }}
+                </slot>
+                <slot
                   v-if="
   $slots[`tab-${tab.value}-label-text-append-icon`] || props.tabButtonAppendIcon
-"
-                  :name="`tab-${tab.value}-label-text-append-icon`"
-                >
-                  <Icon :name="props.tabButtonAppendIcon" />
-                </slot>
-              </slot>
-            </button>
-          </slot>
-        </div>
-      </div>
-
-      <button
-        v-if="!isTabScrollRight"
+"
+                  :name="`tab-${tab.value}-label-text-append-icon`"
+                >
+                  <Icon :name="props.tabButtonAppendIcon" />
+                </slot>
+              </slot>
+            </button>
+          </slot>
+        </div>
+      </div>
+
+      <button
+        v-if="!isTabScrollRight"
         :class="[
   'absolute flex items-center justify-end right-0 top-1/2 transform -translate-y-1/2',
   'bg-gradient-to-l from-white via-white to-transparent w-12 cursor-pointer',
   buttonSize
-]"
-        @click="onScrollRight"
-      >
-        <Icon name="mdi:chevron-right" size="24" />
-      </button>
-    </div>
-
-    <Divider
-      v-if="!props.disabledHeaderDivider && props.variant == 'text'"
-      class="mt-[-2px]"
-    />
-  </div>
-
-  <div
-    v-if="!props.disabledContent"
-    v-for="(content, i_content) in items"
-    :key="i_content"
-    v-show="activeTab == content.value"
+]"
+        @click="onScrollRight"
+      >
+        <Icon name="mdi:chevron-right" size="24" />
+      </button>
+    </div>
+
+    <Divider
+      v-if="!props.disabledHeaderDivider && props.variant == 'text'"
+      class="mt-[-2px]"
+    />
+  </div>
+
+  <div
+    v-if="!props.disabledContent"
+    v-for="(content, i_content) in items"
+    :key="i_content"
+    v-show="activeTab == content.value"
     :style="{
   marginTop: !props.disabledHeader ? `${props.tabContentGab}px` : '0px'
-}"
-  >
-    <slot
-      :name="`tab-content-${content.value}`"
-      :active="activeTab == content.value"
-    >
-      <div class="font-body-medium">
-        {{ content.content }}
-      </div>
-    </slot>
-  </div>
+}"
+  >
+    <slot
+      :name="`tab-content-${content.value}`"
+      :active="activeTab == content.value"
+    >
+      <div class="font-body-medium">
+        {{ content.content }}
+      </div>
+    </slot>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/table.vue

@@ -1,88 +1,88 @@
 <template>
-  <div class="bg-white rounded-[8px] h-full">
-    <div class="overflow-auto">
-      <table class="w-full">
-        <thead v-if="!props.disabledHeader">
-          <slot name="header" :item="props.itemHeader">
-            <tr>
-              <template v-for="(header, i) in itemHeaders" :key="i">
-                <th class="sticky top-0 bg-white">
-                  <div
-                    class="p-[14px] flex gap-[8px] text-gray font-label-sans-serif-large"
+  <div class="bg-white rounded-[8px] h-full">
+    <div class="overflow-auto">
+      <table class="w-full">
+        <thead v-if="!props.disabledHeader">
+          <slot name="header" :item="props.itemHeader">
+            <tr>
+              <template v-for="(header, i) in itemHeaders" :key="i">
+                <th class="sticky top-0 bg-white">
+                  <div
+                    class="p-[14px] flex gap-[8px] text-gray font-label-sans-serif-large"
                     :style="{
   justifyContent: header.alignment || props.headerAlignment
-}"
-                  >
-                    <div class="flex">
-                      {{ header.label }}
-                    </div>
-                    <div
+}"
+                  >
+                    <div class="flex">
+                      {{ header.label }}
+                    </div>
+                    <div
                       :class="[
   'flex justify-center items-center cursor-pointer',
   sortkey === header.key && 'text-primary'
-]"
-                      @click="onSortBy(header.key)"
-                    >
-                      <Icon name="fa6-solid:sort" size="16" />
-                    </div>
-                  </div>
-                </th>
-              </template>
-            </tr>
-          </slot>
-        </thead>
-
-        <slot name="body" :items="items" :header="itemHeaders">
-          <tbody>
-            <tr
-              v-for="(body, i_body) in items"
-              :key="i_body"
-              @click="emit('click-row', body, i_body)"
-            >
-              <slot
-                name="item"
-                :item="body"
-                :header="itemHeaders"
-                :index="i_body"
-              >
-                <td
-                  v-for="(header, i_header) in itemHeaders"
-                  :key="i_header"
-                  class="font-body-medium border-y-[1px] border-mercury p-[14px]"
-                >
-                  <slot :name="`item-${header.key}`" :item="body">
-                    <div>
-                      {{ body[header.key] }}
-                    </div>
-                  </slot>
-                </td>
-              </slot>
-            </tr>
-          </tbody>
-        </slot>
-      </table>
-    </div>
-
-    <div
-      v-if="items.length === 0"
-      class="w-full h-full flex justify-center items-center p-[16px]"
-    >
-      <Icon name="pukaad:page-not-found" size="150"></Icon>
-    </div>
-
-    <div
-      v-if="items.length > 0"
-      class="p-[14px] flex justify-center items-center"
-    >
-      <Pagination
-        :totalPage="props.totalPage"
-        :totalVisible="props.paginationVisible"
-        @change="(e) => emit('change-page', e)"
-        @select="(e) => emit('select-page', e)"
-        v-model="page"
-      />
-    </div>
-  </div>
+]"
+                      @click="onSortBy(header.key)"
+                    >
+                      <Icon name="fa6-solid:sort" size="16" />
+                    </div>
+                  </div>
+                </th>
+              </template>
+            </tr>
+          </slot>
+        </thead>
+
+        <slot name="body" :items="items" :header="itemHeaders">
+          <tbody>
+            <tr
+              v-for="(body, i_body) in items"
+              :key="i_body"
+              @click="emit('click-row', body, i_body)"
+            >
+              <slot
+                name="item"
+                :item="body"
+                :header="itemHeaders"
+                :index="i_body"
+              >
+                <td
+                  v-for="(header, i_header) in itemHeaders"
+                  :key="i_header"
+                  class="font-body-medium border-y-[1px] border-mercury p-[14px]"
+                >
+                  <slot :name="`item-${header.key}`" :item="body">
+                    <div>
+                      {{ body[header.key] }}
+                    </div>
+                  </slot>
+                </td>
+              </slot>
+            </tr>
+          </tbody>
+        </slot>
+      </table>
+    </div>
+
+    <div
+      v-if="items.length === 0"
+      class="w-full h-full flex justify-center items-center p-[16px]"
+    >
+      <Icon name="pukaad:page-not-found" size="150"></Icon>
+    </div>
+
+    <div
+      v-if="items.length > 0"
+      class="p-[14px] flex justify-center items-center"
+    >
+      <Pagination
+        :totalPage="props.totalPage"
+        :totalVisible="props.paginationVisible"
+        @change="(e) => emit('change-page', e)"
+        @select="(e) => emit('select-page', e)"
+        v-model="page"
+      />
+    </div>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/timeline.vue

@@ -1,60 +1,60 @@
 <template>
-  <div class="flex flex-col w-full">
-    <div
-      v-for="(item, index) in props.items"
-      :key="item.id ?? index"
-      class="flex gap-[8px] w-full"
-    >
-      <!-- dot + connecting line (โครงของ component เอง) -->
-      <div class="flex flex-col items-center w-[8px]">
-        <div class="w-[20px] h-[26px] flex items-center justify-center">
-          <div class="w-[10px] h-[10px] rounded-full bg-black shrink-0" />
-        </div>
-        <div class="w-[2px] flex-1 bg-bright" />
-      </div>
-
-      <!-- เนื้อหา — ปล่อยให้ผู้ใช้ครอบเองผ่าน slot ได้ ถ้าไม่ส่งมาใช้ default นี้ -->
-      <div
-        class="flex flex-col gap-[8px] flex-1 min-w-0"
-        :class="index < props.items.length - 1 ? 'pb-[16px]' : ''"
-      >
-        <slot name="content" :item="item" :index="index">
-          <div class="flex gap-[8px] w-full">
-            <Avatar :src="item.avatar" :alt="item.name" :size="30" />
-            <div class="flex flex-col gap-[8px] flex-1 min-w-0">
-              <div class="flex flex-col gap-[4px]">
-                <span class="font-body-large text-gray">{{ item.name }}</span>
-                <span
-                  v-if="item.time"
-                  class="font-body-small text-gray"
-                >
-                  {{ convertDateTime(item.time) }} น.
-                </span>
-              </div>
-              <slot name="description" :item="item" :index="index">
-                <CardOpeningHours
+  <div class="flex flex-col w-full">
+    <div
+      v-for="(item, index) in props.items"
+      :key="item.id ?? index"
+      class="flex gap-[8px] w-full"
+    >
+      <!-- dot + connecting line (โครงของ component เอง) -->
+      <div class="flex flex-col items-center w-[8px]">
+        <div class="w-[20px] h-[26px] flex items-center justify-center">
+          <div class="w-[10px] h-[10px] rounded-full bg-black shrink-0" />
+        </div>
+        <div class="w-[2px] flex-1 bg-bright" />
+      </div>
+
+      <!-- เนื้อหา — ปล่อยให้ผู้ใช้ครอบเองผ่าน slot ได้ ถ้าไม่ส่งมาใช้ default นี้ -->
+      <div
+        class="flex flex-col gap-[8px] flex-1 min-w-0"
+        :class="index < props.items.length - 1 ? 'pb-[16px]' : ''"
+      >
+        <slot name="content" :item="item" :index="index">
+          <div class="flex gap-[8px] w-full">
+            <Avatar :src="item.avatar" :alt="item.name" :size="30" />
+            <div class="flex flex-col gap-[8px] flex-1 min-w-0">
+              <div class="flex flex-col gap-[4px]">
+                <span class="font-body-large text-gray">{{ item.name }}</span>
+                <span
+                  v-if="item.time"
+                  class="font-body-small text-gray"
+                >
+                  {{ convertDateTime(item.time) }} น.
+                </span>
+              </div>
+              <slot name="description" :item="item" :index="index">
+                <CardOpeningHours
                   v-if="
   item.opening_hours || item.suggested_hours || item.hours
-"
+"
                   :items="
   item.opening_hours || item.suggested_hours || item.hours
-"
+"
                   :special-days="
   item.special_days || item.suggested_special_days
-"
-                  :open-status="item.open_status"
-                  class="text-gray w-full"
-                />
-                <p v-else class="font-body-large text-gray">
-                  {{ item.description }}
-                </p>
-              </slot>
-            </div>
-          </div>
-        </slot>
-      </div>
-    </div>
-  </div>
+"
+                  :open-status="item.open_status"
+                  class="text-gray w-full"
+                />
+                <p v-else class="font-body-large text-gray">
+                  {{ item.description }}
+                </p>
+              </slot>
+            </div>
+          </div>
+        </slot>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/tooltip.vue

@@ -1,16 +1,16 @@
 <template>
-  <ShadTooltipProvider :delay-duration="props.delay">
-    <ShadTooltip>
-      <ShadTooltipTrigger as-child>
-        <slot />
-      </ShadTooltipTrigger>
-      <ShadTooltipContent :side="props.position" :class="props.class">
-        <slot name="text">
-          <p>{{ props.text }}</p>
-        </slot>
-      </ShadTooltipContent>
-    </ShadTooltip>
-  </ShadTooltipProvider>
+  <ShadTooltipProvider :delay-duration="props.delay">
+    <ShadTooltip>
+      <ShadTooltipTrigger as-child>
+        <slot />
+      </ShadTooltipTrigger>
+      <ShadTooltipContent :side="props.position" :class="props.class">
+        <slot name="text">
+          <p>{{ props.text }}</p>
+        </slot>
+      </ShadTooltipContent>
+    </ShadTooltip>
+  </ShadTooltipProvider>
 </template>
 
 <script setup>

package/dist/runtime/components/ui/accordion/Accordion.vue

@@ -20,7 +20,7 @@ const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <AccordionRoot v-slot="slotProps" data-slot="accordion" v-bind="forwarded">
-    <slot v-bind="slotProps" />
-  </AccordionRoot>
+  <AccordionRoot v-slot="slotProps" data-slot="accordion" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </AccordionRoot>
 </template>

package/dist/runtime/components/ui/accordion/AccordionContent.vue

@@ -12,13 +12,13 @@ const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
-  <AccordionContent
-    data-slot="accordion-content"
-    v-bind="delegatedProps"
-    class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
-  >
-    <div :class="cn('pt-0 pb-4', props.class)">
-      <slot />
-    </div>
-  </AccordionContent>
+  <AccordionContent
+    data-slot="accordion-content"
+    v-bind="delegatedProps"
+    class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+  >
+    <div :class="cn('pt-0 pb-4', props.class)">
+      <slot />
+    </div>
+  </AccordionContent>
 </template>

package/dist/runtime/components/ui/accordion/AccordionItem.vue

@@ -15,12 +15,12 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <AccordionItem
-    v-slot="slotProps"
-    data-slot="accordion-item"
-    v-bind="forwardedProps"
-    :class="cn('border-b ', props.class)"
-  >
-    <slot v-bind="slotProps" />
-  </AccordionItem>
+  <AccordionItem
+    v-slot="slotProps"
+    data-slot="accordion-item"
+    v-bind="forwardedProps"
+    :class="cn('border-b ', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </AccordionItem>
 </template>

package/dist/runtime/components/ui/accordion/AccordionTrigger.vue

@@ -11,25 +11,25 @@ const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
-  <AccordionHeader class="flex">
-    <AccordionTrigger
-      data-slot="accordion-trigger"
-      v-bind="delegatedProps"
+  <AccordionHeader class="flex">
+    <AccordionTrigger
+      data-slot="accordion-trigger"
+      v-bind="delegatedProps"
       :class="
   cn(
     'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
     props.class
   )
-"
-    >
-      <slot />
-      <slot name="icon">
-        <Icon
-          name="lucide:chevron-down"
-          class="text-gray pointer-events-none shrink-0 translate-y-0.5 transition-transform duration-200"
-          :size="24"
-        />
-      </slot>
-    </AccordionTrigger>
-  </AccordionHeader>
+"
+    >
+      <slot />
+      <slot name="icon">
+        <Icon
+          name="lucide:chevron-down"
+          class="text-gray pointer-events-none shrink-0 translate-y-0.5 transition-transform duration-200"
+          :size="24"
+        />
+      </slot>
+    </AccordionTrigger>
+  </AccordionHeader>
 </template>

package/dist/runtime/components/ui/alert/Alert.vue

@@ -8,11 +8,11 @@ const props = defineProps({
 </script>
 
 <template>
-  <div
-    data-slot="alert"
-    :class="cn(alertVariants({ variant }), props.class)"
-    role="alert"
-  >
-    <slot />
-  </div>
+  <div
+    data-slot="alert"
+    :class="cn(alertVariants({ variant }), props.class)"
+    role="alert"
+  >
+    <slot />
+  </div>
 </template>

package/dist/runtime/components/ui/alert/AlertDescription.vue

@@ -6,10 +6,10 @@ const props = defineProps({
 </script>
 
 <template>
-  <div
-    data-slot="alert-description"
-    :class="cn('text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed', props.class)"
-  >
-    <slot />
-  </div>
+  <div
+    data-slot="alert-description"
+    :class="cn('text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed', props.class)"
+  >
+    <slot />
+  </div>
 </template>

package/dist/runtime/components/ui/alert/AlertTitle.vue

@@ -6,10 +6,10 @@ const props = defineProps({
 </script>
 
 <template>
-  <div
-    data-slot="alert-title"
-    :class="cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', props.class)"
-  >
-    <slot />
-  </div>
+  <div
+    data-slot="alert-title"
+    :class="cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', props.class)"
+  >
+    <slot />
+  </div>
 </template>

package/dist/runtime/components/ui/alert-dialog/AlertDialog.vue

@@ -9,7 +9,7 @@ const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <AlertDialogRoot v-slot="slotProps" data-slot="alert-dialog" v-bind="forwarded">
-    <slot v-bind="slotProps" />
-  </AlertDialogRoot>
+  <AlertDialogRoot v-slot="slotProps" data-slot="alert-dialog" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </AlertDialogRoot>
 </template>