pukaad-ui-lib 1.450.2 → 1.451.0

package/dist/runtime/components/progress-bar.vue

@@ -1,21 +1,21 @@
 <template>
-  <div
-    class="rounded-full"
+  <div
+    class="rounded-full"
     :style="{
   backgroundColor: props.colorBackground,
   height: `${props.height}px`,
   width: props.fullWidth ? '100%' : `${props.width}px`
-}"
-  >
-    <div
-      class="rounded-full"
+}"
+  >
+    <div
+      class="rounded-full"
       :style="{
   backgroundColor: props.colorActive,
   height: `${props.height}px`,
   width: `${value}%`
-}"
-    ></div>
-  </div>
+}"
+    ></div>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/read-more-text.vue

@@ -1,8 +1,8 @@
 <template>
-  <div ref="container" class="whitespace-pre-wrap break-words">
-    <template v-if="expanded || !isTruncated">{{ props.text }}</template>
-    <template v-else>{{ displayText }}...<span class="text-primary cursor-pointer" @click="toggle">ดูเพิ่มเติม</span></template>
-  </div>
+  <div ref="container" class="whitespace-pre-wrap break-words">
+    <template v-if="expanded || !isTruncated">{{ props.text }}</template>
+    <template v-else>{{ displayText }}...<span class="text-primary cursor-pointer" @click="toggle">ดูเพิ่มเติม</span></template>
+  </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,69 +1,69 @@
 <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 shrink-0">
-        <slot name="dot" :item="item" :index="index">
-          <div class="w-[20px] h-[26px] flex items-center justify-center shrink-0">
-            <div class="w-[10px] h-[10px] rounded-full bg-black shrink-0" />
-          </div>
-        </slot>
-        <slot
-          v-if="index < props.items.length - 1"
-          name="line"
-          :item="item"
-          :index="index"
-        >
-          <div class="w-[2px] flex-1 bg-bright" />
-        </slot>
-      </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 shrink-0">
+        <slot name="dot" :item="item" :index="index">
+          <div class="w-[20px] h-[26px] flex items-center justify-center shrink-0">
+            <div class="w-[10px] h-[10px] rounded-full bg-black shrink-0" />
+          </div>
+        </slot>
+        <slot
+          v-if="index < props.items.length - 1"
+          name="line"
+          :item="item"
+          :index="index"
+        >
+          <div class="w-[2px] flex-1 bg-bright" />
+        </slot>
+      </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>

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

@@ -12,7 +12,7 @@ const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
-  <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
-    <slot />
-  </AlertDialogAction>
+  <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
+    <slot />
+  </AlertDialogAction>
 </template>

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

@@ -12,14 +12,14 @@ const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
-  <AlertDialogCancel
-    v-bind="delegatedProps"
+  <AlertDialogCancel
+    v-bind="delegatedProps"
     :class="cn(
   buttonVariants({ variant: 'outline' }),
   'mt-2 sm:mt-0',
   props.class
-)"
-  >
-    <slot />
-  </AlertDialogCancel>
+)"
+  >
+    <slot />
+  </AlertDialogCancel>
 </template>

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

@@ -23,22 +23,22 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <AlertDialogPortal>
-    <AlertDialogOverlay
-      data-slot="alert-dialog-overlay"
-      class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80"
-    />
-    <AlertDialogContent
-      data-slot="alert-dialog-content"
-      v-bind="{ ...$attrs, ...forwarded }"
+  <AlertDialogPortal>
+    <AlertDialogOverlay
+      data-slot="alert-dialog-overlay"
+      class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80"
+    />
+    <AlertDialogContent
+      data-slot="alert-dialog-content"
+      v-bind="{ ...$attrs, ...forwarded }"
       :class="
   cn(
     'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
     props.class
   )
-"
-    >
-      <slot />
-    </AlertDialogContent>
-  </AlertDialogPortal>
+"
+    >
+      <slot />
+    </AlertDialogContent>
+  </AlertDialogPortal>
 </template>

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

@@ -11,11 +11,11 @@ const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
-  <AlertDialogDescription
-    data-slot="alert-dialog-description"
-    v-bind="delegatedProps"
-    :class="cn('font-body-medium text-gray', props.class)"
-  >
-    <slot />
-  </AlertDialogDescription>
+  <AlertDialogDescription
+    data-slot="alert-dialog-description"
+    v-bind="delegatedProps"
+    :class="cn('font-body-medium text-gray', props.class)"
+  >
+    <slot />
+  </AlertDialogDescription>
 </template>

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

@@ -6,15 +6,15 @@ const props = defineProps({
 </script>
 
 <template>
-  <div
-    data-slot="alert-dialog-footer"
+  <div
+    data-slot="alert-dialog-footer"
     :class="
   cn(
     'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
     props.class
   )
-"
-  >
-    <slot />
-  </div>
+"
+  >
+    <slot />
+  </div>
 </template>