pukaad-ui-lib 1.19.0 → 1.21.1

package/dist/runtime/components/card/card-user-item.vue

@@ -1,69 +1,69 @@
 <template>
-  <div
+  <div
     :class="[
   'flex gap-[16px] items-center border-b border-mercury w-full',
   props.disabledPaddingHorizontal ? 'py-[16px]' : 'p-[16px]'
-]"
-  >
-    <div class="flex w-full gap-[16px]">
-      <!-- <Avatar
-        :src="user.profile_image.image_url"
-        size="48"
-        class="cursor-pointer"
-      /> -->
-      <div class="flex flex-col gap-[4px]">
-        <div class="flex gap-[4px] items-center">
-          <div
+]"
+  >
+    <div class="flex w-full gap-[16px]">
+      <!-- <Avatar
+        :src="user.profile_image.image_url"
+        size="48"
+        class="cursor-pointer"
+      /> -->
+      <div class="flex flex-col gap-[4px]">
+        <div class="flex gap-[4px] items-center">
+          <div
             :class="[
   props.hiddenInfo ? 'font-body-large-prominent' : 'font-body-small-prominent'
-]"
-          >
-            {{ user.profile_name }}
-          </div>
-          <Icon
-            v-if="user.profile_verified === true"
-            name="pukaad-verify"
-            :size="props.hiddenInfo ? 20 : 16"
-          />
-        </div>
-        <div
-          v-if="!props.hiddenInfo"
+]"
+          >
+            {{ user.profile_name }}
+          </div>
+          <Icon
+            v-if="user.profile_verified === true"
+            name="pukaad-verify"
+            :size="props.hiddenInfo ? 20 : 16"
+          />
+        </div>
+        <div
+          v-if="!props.hiddenInfo"
           :class="[
   'flex gap-[4px] text-gray items-center',
   props.variant === 'search' ? 'font-body-large' : 'font-body-small'
-]"
-        >
-          <div>ผู้ติดตาม {{ user.profile_followers }}</div>
-          <div>•</div>
-          <div>กำลังเผยแพร่ {{ user.profile_posts }}</div>
-        </div>
-        <div
-          v-if="!props.hiddenInfo"
+]"
+        >
+          <div>ผู้ติดตาม {{ user.profile_followers }}</div>
+          <div>•</div>
+          <div>กำลังเผยแพร่ {{ user.profile_posts }}</div>
+        </div>
+        <div
+          v-if="!props.hiddenInfo"
           :class="[
   'text-gray',
   props.variant === 'search' ? 'font-body-large' : 'font-body-small'
-]"
-        >
-          {{ user.profile_bio }}
-        </div>
-      </div>
-    </div>
-
-    <Button
-      :color="buttonState.variant"
-      :variant="buttonState.type"
-      @click="buttonState.action"
-    >
-      {{ buttonState.text }}
-    </Button>
-
-    <PickerOptionMenuUser
-      v-if="ellipsis"
-      state="follower"
-      circle
-      variant="text"
-    />
-  </div>
+]"
+        >
+          {{ user.profile_bio }}
+        </div>
+      </div>
+    </div>
+
+    <Button
+      :color="buttonState.variant"
+      :variant="buttonState.type"
+      @click="buttonState.action"
+    >
+      {{ buttonState.text }}
+    </Button>
+
+    <PickerOptionMenuUser
+      v-if="ellipsis"
+      state="follower"
+      circle
+      variant="text"
+    />
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/card/card.d.vue.ts

@@ -2,17 +2,17 @@ export interface CardProps {
     title?: string;
     description?: string;
 }
-declare var __VLS_12: {}, __VLS_19: {}, __VLS_26: {}, __VLS_33: any, __VLS_40: any;
+declare var __VLS_14: {}, __VLS_22: {}, __VLS_30: {}, __VLS_38: any, __VLS_46: any;
 type __VLS_Slots = {} & {
-    header?: (props: typeof __VLS_12) => any;
+    header?: (props: typeof __VLS_14) => any;
 } & {
-    title?: (props: typeof __VLS_19) => any;
+    title?: (props: typeof __VLS_22) => any;
 } & {
-    description?: (props: typeof __VLS_26) => any;
+    description?: (props: typeof __VLS_30) => any;
 } & {
-    default?: (props: typeof __VLS_33) => any;
+    default?: (props: typeof __VLS_38) => any;
 } & {
-    footer?: (props: typeof __VLS_40) => any;
+    footer?: (props: typeof __VLS_46) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<CardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/card/card.vue

@@ -1,29 +1,29 @@
 <template>
-  <ShadCard v-slot="slotScope">
-    <ShadCardHeader
-      v-if="$slots.header || props.title || props.description"
-      v-bind="slotScope"
-    >
-      <slot name="header">
-        <ShadCardTitle v-if="props.title">
-          <slot name="title">
-            {{ props.title }}
-          </slot>
-        </ShadCardTitle>
-        <ShadCardDescription>
-          <slot name="description">
-            {{ props.description }}
-          </slot>
-        </ShadCardDescription>
-      </slot>
-    </ShadCardHeader>
-    <ShadCardContent>
-      <slot v-bind="slotScope" />
-    </ShadCardContent>
-    <ShadCardFooter v-if="$slots.footer">
-      <slot name="footer" v-bind="slotScope" />
-    </ShadCardFooter>
-  </ShadCard>
+  <ShadCard v-slot="slotScope">
+    <ShadCardHeader
+      v-if="$slots.header || props.title || props.description"
+      v-bind="slotScope"
+    >
+      <slot name="header">
+        <ShadCardTitle v-if="props.title">
+          <slot name="title">
+            {{ props.title }}
+          </slot>
+        </ShadCardTitle>
+        <ShadCardDescription>
+          <slot name="description">
+            {{ props.description }}
+          </slot>
+        </ShadCardDescription>
+      </slot>
+    </ShadCardHeader>
+    <ShadCardContent>
+      <slot v-bind="slotScope" />
+    </ShadCardContent>
+    <ShadCardFooter v-if="$slots.footer">
+      <slot name="footer" v-bind="slotScope" />
+    </ShadCardFooter>
+  </ShadCard>
 </template>
 
 <script setup>

package/dist/runtime/components/card/card.vue.d.ts

@@ -2,17 +2,17 @@ export interface CardProps {
     title?: string;
     description?: string;
 }
-declare var __VLS_12: {}, __VLS_19: {}, __VLS_26: {}, __VLS_33: any, __VLS_40: any;
+declare var __VLS_14: {}, __VLS_22: {}, __VLS_30: {}, __VLS_38: any, __VLS_46: any;
 type __VLS_Slots = {} & {
-    header?: (props: typeof __VLS_12) => any;
+    header?: (props: typeof __VLS_14) => any;
 } & {
-    title?: (props: typeof __VLS_19) => any;
+    title?: (props: typeof __VLS_22) => any;
 } & {
-    description?: (props: typeof __VLS_26) => any;
+    description?: (props: typeof __VLS_30) => any;
 } & {
-    default?: (props: typeof __VLS_33) => any;
+    default?: (props: typeof __VLS_38) => any;
 } & {
-    footer?: (props: typeof __VLS_40) => any;
+    footer?: (props: typeof __VLS_46) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<CardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/carousel.d.vue.ts

@@ -1,7 +1,7 @@
 import type { CarouselProps } from "@/types/components/carousel";
-declare var __VLS_27: {};
+declare var __VLS_25: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_27) => any;
+    default?: (props: typeof __VLS_25) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<CarouselProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "clicked-image": () => any;

package/dist/runtime/components/carousel.vue

@@ -2,35 +2,35 @@
   <div class="relative bg-black" @mouseenter="isHovered = true" @mouseleave="isHovered = false" :style="{
   width: props.fullWidth ? '100%' : `${props.width}px`,
   height: props.fullHeight ? '100%' : `${props.height}px`
-}">
-    <div v-if="props.items?.length && props.items[currentIndex]" class="flex items-center justify-center w-full h-full"
-      @click="onClickedImage">
-      <Image v-if="!props.items[currentIndex]?.includes('.mp4')" :src="props.items[currentIndex]"
-        :width="props.fullWidth ? 'auto' : props.width" :height="props.fullHeight ? 'auto' : props.height"
-        fit="contain" />
-      <Video v-else :src="props.items[currentIndex]" fit="contain" controls full-width full-height />
-    </div>
-    <div v-if="props.items.length > 1 && isHovered" class="absolute top-[16px] left-1/2 transform -translate-x-1/2">
-      <div class="rounded-full py-[4px] px-[8px] bg-black/50 w-[100px] items-center">
-        <div class="font-body-medium w-full text-center text-white">
-          {{ currentIndex + 1 }}/{{ props.items.length }}
-        </div>
-      </div>
-    </div>
-    <div v-if="props.items.length > 1 && currentIndex > 0 && isHovered"
-      class="absolute left-[16px] top-1/2 transform -translate-y-1/2">
-      <Button prependIcon="lucide:chevron-left" circle variant="solid" color="black" @click="back" :icon-size="24"
-        :padding="0" />
-    </div>
-    <div v-if="props.items.length > 1 && currentIndex < props.items.length - 1 && isHovered"
-      class="absolute right-[16px] top-1/2 transform -translate-y-1/2">
-      <Button prependIcon="lucide:chevron-right" circle variant="solid" color="black" @click="next" :icon-size="24"
-        :padding="0" />
-    </div>
-    <div class="absolute bottom-[0] w-full">
-      <slot name="default" />
-    </div>
-  </div>
+}">
+    <div v-if="props.items?.length && props.items[currentIndex]" class="flex items-center justify-center w-full h-full"
+      @click="onClickedImage">
+      <Image v-if="!props.items[currentIndex]?.includes('.mp4')" :src="props.items[currentIndex]"
+        :width="props.fullWidth ? 'auto' : props.width" :height="props.fullHeight ? 'auto' : props.height"
+        fit="contain" />
+      <Video v-else :src="props.items[currentIndex]" fit="contain" controls full-width full-height />
+    </div>
+    <div v-if="props.items.length > 1 && isHovered" class="absolute top-[16px] left-1/2 transform -translate-x-1/2">
+      <div class="rounded-full py-[4px] px-[8px] bg-black/50 w-[100px] items-center">
+        <div class="font-body-medium w-full text-center text-white">
+          {{ currentIndex + 1 }}/{{ props.items.length }}
+        </div>
+      </div>
+    </div>
+    <div v-if="props.items.length > 1 && currentIndex > 0 && isHovered"
+      class="absolute left-[16px] top-1/2 transform -translate-y-1/2">
+      <Button prependIcon="lucide:chevron-left" circle variant="solid" color="black" @click="back" :icon-size="24"
+        :padding="0" />
+    </div>
+    <div v-if="props.items.length > 1 && currentIndex < props.items.length - 1 && isHovered"
+      class="absolute right-[16px] top-1/2 transform -translate-y-1/2">
+      <Button prependIcon="lucide:chevron-right" circle variant="solid" color="black" @click="next" :icon-size="24"
+        :padding="0" />
+    </div>
+    <div class="absolute bottom-[0] w-full">
+      <slot name="default" />
+    </div>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/carousel.vue.d.ts

@@ -1,7 +1,7 @@
 import type { CarouselProps } from "@/types/components/carousel";
-declare var __VLS_27: {};
+declare var __VLS_25: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_27) => any;
+    default?: (props: typeof __VLS_25) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<CarouselProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "clicked-image": () => any;

package/dist/runtime/components/chip.vue

@@ -1,22 +1,22 @@
 <template>
-  <div
+  <div
     :class="[
   'rounded-full px-[8px] py-[4px] font-body-large inline-flex gap-[4px] justify-center items-center',
   !props.flat && 'border-[1px]',
   props.autoHeight ? 'break-all' : height,
   color,
   size
-]"
-  >
-    <slot name="default" />
-    <div
-      v-if="props.closable"
-      class="flex justify-center items-center cursor-pointer"
-      @click="emit('closable')"
-    >
-      <Icon name="fa6-solid:xmark" size="16" />
-    </div>
-  </div>
+]"
+  >
+    <slot name="default" />
+    <div
+      v-if="props.closable"
+      class="flex justify-center items-center cursor-pointer"
+      @click="emit('closable')"
+    >
+      <Icon name="fa6-solid:xmark" size="16" />
+    </div>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/collapse/collapse-multiple.d.vue.ts

@@ -6,13 +6,13 @@ type __VLS_Props = {
     items?: TypeItem[];
 };
 declare var __VLS_6: {
-    label: string;
-    item: TypeItem;
+    label: any;
+    item: any;
 }, __VLS_8: {
-    items: TypeItem[];
+    items: any;
 }, __VLS_10: {
-    label: string;
-    item: TypeItem;
+    label: any;
+    item: any;
 };
 type __VLS_Slots = {} & {
     title?: (props: typeof __VLS_6) => any;

package/dist/runtime/components/collapse/collapse-multiple.vue

@@ -1,46 +1,50 @@
 <template>
-  <div class="flex flex-col">
-    <div
-      v-for="(item, i_item) in props.items"
-      :key="i_item"
-      class="flex flex-col"
-    >
-      <div class="flex gap-[16px] select-none">
-        <div class="w-[20px] flex items-center justify-center relative">
-          <div class="h-full border-r-[2px] border-dashed border-cloud"></div>
-          <div
-            @click="handleShow(i_item)"
-            class="absolute bg-white text-primary cursor-pointer"
-            :style="{ top: toggleIconPosition(i_item) + 'px' }"
-          >
-            <Icon
+  <div class="flex flex-col">
+    <div
+      v-for="(item, i_item) in props.items"
+      :key="i_item"
+      class="flex flex-col"
+    >
+      <div class="flex gap-[16px] select-none">
+        <div class="w-[20px] flex items-center justify-center relative">
+          <div class="h-full border-r-[2px] border-dashed border-cloud"></div>
+          <div
+            @click="handleShow(i_item)"
+            class="absolute bg-white text-primary cursor-pointer"
+            :style="{ top: toggleIconPosition(i_item) + 'px' }"
+          >
+            <Icon
               :name="
   !arrShow.includes(i_item) ? 'lucide:square-chevron-right' : 'lucide:square-chevron-down'
-"
-              size="20"
-            />
-          </div>
-        </div>
-        <div class="flex flex-col w-full mb-[16px]">
-          <div :ref="(el) => {
-  labelRef[i_item] = el;
-}">
-            <slot name="title" :label="item.label" :item="item" />
-          </div>
-          <div
-            v-if="arrShow.includes(i_item)"
-            class="flex flex-col gap-[16px] mt-[16px] pl-[32px]"
-          >
-            <slot name="children" :items="item.children">
-              <div v-for="(cill, i_child) in item.children" :key="i_child">
-                <slot name="children-item" :label="cill.label" :item="cill" />
-              </div>
-            </slot>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+"
+              size="20"
+            />
+          </div>
+        </div>
+        <div class="flex flex-col w-full mb-[16px]">
+          <div
+            :ref="
+  (el) => {
+    labelRef[i_item] = el;
+  }
+"
+          >
+            <slot name="title" :label="item.label" :item="item" />
+          </div>
+          <div
+            v-if="arrShow.includes(i_item)"
+            class="flex flex-col gap-[16px] mt-[16px] pl-[24px]"
+          >
+            <slot name="children" :items="item.children">
+              <div v-for="(cill, i_child) in item.children" :key="i_child">
+                <slot name="children-item" :label="cill.label" :item="cill" />
+              </div>
+            </slot>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/collapse/collapse-multiple.vue.d.ts

@@ -6,13 +6,13 @@ type __VLS_Props = {
     items?: TypeItem[];
 };
 declare var __VLS_6: {
-    label: string;
-    item: TypeItem;
+    label: any;
+    item: any;
 }, __VLS_8: {
-    items: TypeItem[];
+    items: any;
 }, __VLS_10: {
-    label: string;
-    item: TypeItem;
+    label: any;
+    item: any;
 };
 type __VLS_Slots = {} & {
     title?: (props: typeof __VLS_6) => any;

package/dist/runtime/components/collapse/collapse.vue

@@ -1,31 +1,31 @@
 <template>
-  <div
-    class="flex flex-col"
+  <div
+    class="flex flex-col"
     :style="{
   width: props.fullWidth ? '100%' : `${props.width}`
-}"
-  >
-    <slot name="title">
-      <div
-        class="flex justify-between items-center cursor-pointer"
-        @click="isOpen = !isOpen"
-      >
-        <slot name="title-text">
-          <div>{{ props.title }}</div>
-        </slot>
-        <slot name="title-toggle">
-          <Icon
+}"
+  >
+    <slot name="title">
+      <div
+        class="flex justify-between items-center cursor-pointer"
+        @click="isOpen = !isOpen"
+      >
+        <slot name="title-text">
+          <div>{{ props.title }}</div>
+        </slot>
+        <slot name="title-toggle">
+          <Icon
             :name="
   isOpen ? 'flowbite:angle-up-outline' : 'flowbite:angle-down-outline'
-"
-          />
-        </slot>
-      </div>
-    </slot>
-    <div v-if="isOpen">
-      <slot name="content"></slot>
-    </div>
-  </div>
+"
+          />
+        </slot>
+      </div>
+    </slot>
+    <div v-if="isOpen">
+      <slot name="content"></slot>
+    </div>
+  </div>
 </template>
 
 <script setup>