pukaad-ui-lib 1.21.1 → 1.22.2

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

@@ -1,7 +1,7 @@
 import type { CarouselProps } from "@/types/components/carousel";
-declare var __VLS_25: {};
+declare var __VLS_27: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_25) => any;
+    default?: (props: typeof __VLS_27) => 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_25: {};
+declare var __VLS_27: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_25) => any;
+    default?: (props: typeof __VLS_27) => 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

@@ -4,15 +4,16 @@ interface TypeItem {
 }
 type __VLS_Props = {
     items?: TypeItem[];
+    divider?: boolean;
 };
 declare var __VLS_6: {
-    label: any;
-    item: any;
+    label: string;
+    item: TypeItem;
 }, __VLS_8: {
-    items: any;
+    items: TypeItem[];
 }, __VLS_10: {
-    label: any;
-    item: any;
+    label: string;
+    item: TypeItem;
 };
 type __VLS_Slots = {} & {
     title?: (props: typeof __VLS_6) => any;
@@ -23,6 +24,7 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     items: TypeItem[];
+    divider: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -1,56 +1,65 @@
 <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
+"
+              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>
+"
+          >
+            <div :class="divider ? 'border-b border-silver w-full' : 'w-full'">
+              <slot name="title" :label="item.label" :item="item" />
+            </div>
+          </div>
+          <div
+            v-if="arrShow.includes(i_item)"
+            class="flex flex-col gap-[16px] mt-[16px]"
+          >
+            <slot name="children" :items="item.children">
+              <div
+                v-for="(cill, i_child) in item.children"
+                :key="i_child"
+                :class="
+  divider ? 'border-b border-silver pl-[24px]' : 'pl-[24px]'
+"
+              >
+                <slot name="children-item" :label="cill.label" :item="cill" />
+              </div>
+            </slot>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
 import { ref } from "vue";
 const props = defineProps({
-  items: { type: Array, required: false, default: () => [] }
+  items: { type: Array, required: false, default: () => [] },
+  divider: { type: Boolean, required: false, default: () => false }
 });
 const labelRef = ref([]);
 const arrShow = ref([]);

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

@@ -4,15 +4,16 @@ interface TypeItem {
 }
 type __VLS_Props = {
     items?: TypeItem[];
+    divider?: boolean;
 };
 declare var __VLS_6: {
-    label: any;
-    item: any;
+    label: string;
+    item: TypeItem;
 }, __VLS_8: {
-    items: any;
+    items: TypeItem[];
 }, __VLS_10: {
-    label: any;
-    item: any;
+    label: string;
+    item: TypeItem;
 };
 type __VLS_Slots = {} & {
     title?: (props: typeof __VLS_6) => any;
@@ -23,6 +24,7 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     items: TypeItem[];
+    divider: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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>