pukaad-ui-lib 1.3.3 → 1.5.0

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

@@ -1,5 +1,5 @@
 <template>
- <div>แก้หมด</div>
+ <div>แก้หมด</div>
 </template>
 
 <script setup>

package/dist/runtime/components/tab.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,93 +1,93 @@
 <template>
-  <div class="bg-white rounded-[8px] h-full">
-    <div
-      class="overflow-auto"
+  <div class="bg-white rounded-[8px] h-full">
+    <div
+      class="overflow-auto"
       :style="{
   height: props.fullHeight ? '100%' : `${props.height}px`
-}"
-    >
-      <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"
+}"
+    >
+      <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.alinement || props.headerAlinement
-}"
-                  >
-                    <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/tooltip.vue

@@ -1,23 +1,23 @@
 <template>
-  <div
-    class="relative inline-block"
-    @mouseenter="onMouseEnter"
-    @mouseleave="onMouseLeave"
-  >
-    <slot name="default" />
-    <transition name="fade">
-      <div
-        v-if="isShowTooltip"
-        :class="['tooltip', positionClass, { 'has-arrow': props.arrow }]"
-      >
-        <slot v-if="$slots.text || props.text" name="text">
-          <div class="font-body-small">
-            {{ props.text }}
-          </div>
-        </slot>
-      </div>
-    </transition>
-  </div>
+  <div
+    class="relative inline-block"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+  >
+    <slot name="default" />
+    <transition name="fade">
+      <div
+        v-if="isShowTooltip"
+        :class="['tooltip', positionClass, { 'has-arrow': props.arrow }]"
+      >
+        <slot v-if="$slots.text || props.text" name="text">
+          <div class="font-body-small">
+            {{ props.text }}
+          </div>
+        </slot>
+      </div>
+    </transition>
+  </div>
 </template>
 
 <script setup>

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>

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

@@ -6,10 +6,10 @@ const props = defineProps({
 </script>
 
 <template>
-  <div
-    data-slot="alert-dialog-header"
-    :class="cn('flex flex-col gap-2 text-center sm:text-left', props.class)"
-  >
-    <slot />
-  </div>
+  <div
+    data-slot="alert-dialog-header"
+    :class="cn('flex flex-col gap-2 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
 </template>

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

@@ -11,11 +11,11 @@ const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
-  <AlertDialogTitle
-    data-slot="alert-dialog-title"
-    v-bind="delegatedProps"
-    :class="cn('font-body-large-prominent', props.class)"
-  >
-    <slot />
-  </AlertDialogTitle>
+  <AlertDialogTitle
+    data-slot="alert-dialog-title"
+    v-bind="delegatedProps"
+    :class="cn('font-body-large-prominent', props.class)"
+  >
+    <slot />
+  </AlertDialogTitle>
 </template>

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

@@ -7,7 +7,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <AlertDialogTrigger data-slot="alert-dialog-trigger" v-bind="props">
-    <slot />
-  </AlertDialogTrigger>
+  <AlertDialogTrigger data-slot="alert-dialog-trigger" v-bind="props">
+    <slot />
+  </AlertDialogTrigger>
 </template>

package/dist/runtime/components/ui/avatar/Avatar.vue

@@ -7,10 +7,10 @@ const props = defineProps({
 </script>
 
 <template>
-  <AvatarRoot
-    data-slot="avatar"
-    :class="cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', props.class)"
-  >
-    <slot />
-  </AvatarRoot>
+  <AvatarRoot
+    data-slot="avatar"
+    :class="cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', props.class)"
+  >
+    <slot />
+  </AvatarRoot>
 </template>