pukaad-ui-lib 1.0.1

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

@@ -0,0 +1,156 @@
+<template>
+  <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
+            :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"
+          :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"
+          :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>
+</template>
+
+<script setup>
+import { computed, ref } from "vue";
+import { useNuxtApp } from "nuxt/app";
+const { $alert } = useNuxtApp();
+const props = defineProps({
+  disabledPaddingHorizontal: { type: Boolean, required: false, default: false },
+  hiddenInfo: { type: Boolean, required: false, default: false },
+  variant: { type: String, required: false, default: "normal" },
+  ellipsis: { type: Boolean, required: false, default: false },
+  showBlockOption: { type: Boolean, required: false, default: false }
+});
+const user = defineModel({ type: Object, ...{ required: true } });
+const buttonState = computed(() => {
+  if (user.value.is_blocked) {
+    return {
+      text: "\u0E40\u0E25\u0E34\u0E01\u0E1A\u0E25\u0E47\u0E2D\u0E01",
+      variant: "default",
+      type: "solid",
+      action: toggleBlock
+    };
+  } else if (user.value.is_following) {
+    return {
+      text: "\u0E15\u0E34\u0E14\u0E15\u0E32\u0E21\u0E41\u0E25\u0E49\u0E27",
+      variant: "default",
+      type: "solid",
+      action: toggleFollow
+    };
+  } else if (showBlockOption.value) {
+    return {
+      text: "\u0E1A\u0E25\u0E47\u0E2D\u0E01",
+      variant: "error",
+      type: "solid",
+      action: toggleBlock
+    };
+  } else {
+    return {
+      text: "\u0E15\u0E34\u0E14\u0E15\u0E32\u0E21",
+      variant: "primary",
+      type: "flat-outline",
+      action: toggleFollow
+    };
+  }
+});
+const toggleFollow = () => {
+  user.value = {
+    ...user.value,
+    is_following: !user.value.is_following
+  };
+};
+const showBlockOption = ref(props.showBlockOption);
+const toggleBlock = () => {
+  if (user.value.is_blocked) {
+    $alert.show({
+      type: "warning",
+      title: "\u0E40\u0E25\u0E34\u0E01\u0E1A\u0E25\u0E47\u0E2D\u0E04",
+      text: `\u0E04\u0E38\u0E13\u0E41\u0E19\u0E48\u0E43\u0E08\u0E2B\u0E23\u0E37\u0E2D\u0E44\u0E21\u0E48\u0E27\u0E48\u0E32\u0E04\u0E38\u0E13\u0E15\u0E49\u0E2D\u0E07\u0E01\u0E32\u0E23\u0E40\u0E25\u0E34\u0E01\u0E1A\u0E25\u0E47\u0E2D\u0E01 ${user.value.profile_name} \u0E43\u0E0A\u0E48\u0E21\u0E31\u0E49\u0E22?`,
+      confirmText: "\u0E40\u0E25\u0E34\u0E01\u0E1A\u0E25\u0E47\u0E2D\u0E04",
+      showCancelBtn: true,
+      cancelText: "\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01"
+    }).then((result) => {
+      if (result) {
+        user.value = {
+          ...user.value,
+          is_blocked: false
+        };
+        showBlockOption.value = true;
+      }
+    });
+  } else {
+    $alert.show({
+      type: "warning",
+      title: "\u0E15\u0E49\u0E2D\u0E07\u0E01\u0E32\u0E23\u0E1A\u0E25\u0E47\u0E2D\u0E01\u0E1C\u0E39\u0E49\u0E43\u0E0A\u0E49\u0E19\u0E35\u0E49\u0E2B\u0E23\u0E37\u0E2D\u0E44\u0E21\u0E48 ?",
+      text: `${user.value.profile_name} \u0E08\u0E30\u0E44\u0E21\u0E48\u0E2A\u0E32\u0E21\u0E32\u0E23\u0E16\u0E40\u0E02\u0E49\u0E32\u0E16\u0E36\u0E07\u0E42\u0E1E\u0E2A\u0E15\u0E4C\u0E02\u0E2D\u0E07\u0E04\u0E38\u0E13 \u0E2A\u0E48\u0E07\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21\u0E16\u0E36\u0E07\u0E04\u0E38\u0E13 \u0E21\u0E2D\u0E07\u0E40\u0E2B\u0E47\u0E19\u0E04\u0E27\u0E32\u0E21\u0E04\u0E34\u0E14\u0E40\u0E2B\u0E47\u0E19\u0E2B\u0E23\u0E37\u0E2D\u0E23\u0E35\u0E27\u0E34\u0E27\u0E02\u0E2D\u0E07\u0E04\u0E38\u0E13 \u0E41\u0E25\u0E30\u0E08\u0E30\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01\u0E01\u0E32\u0E23\u0E15\u0E34\u0E14\u0E15\u0E32\u0E21\u0E14\u0E49\u0E27\u0E22`,
+      confirmText: "\u0E1A\u0E25\u0E47\u0E2D\u0E01",
+      showCancelBtn: true,
+      cancelText: "\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01"
+    }).then((result) => {
+      if (result) {
+        user.value = {
+          ...user.value,
+          is_following: false,
+          is_blocked: true
+        };
+      }
+    });
+  }
+};
+</script>

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

@@ -0,0 +1,40 @@
+export interface User {
+    id: string;
+    profile_image: {
+        image_url: string;
+    };
+    profile_name: string;
+    profile_verified?: boolean;
+    profile_followers?: number;
+    profile_path: {
+        path_name: string;
+    };
+    profile_posts: number;
+    profile_bio: string | null;
+    is_following?: boolean;
+    is_blocked?: boolean;
+}
+type __VLS_Props = {
+    disabledPaddingHorizontal?: boolean;
+    hiddenInfo?: boolean;
+    variant?: "normal" | "search";
+    ellipsis?: boolean;
+    showBlockOption?: boolean;
+};
+type __VLS_ModelProps = {
+    modelValue: User;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: User) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: User) => any) | undefined;
+}>, {
+    variant: "normal" | "search";
+    disabledPaddingHorizontal: boolean;
+    hiddenInfo: boolean;
+    ellipsis: boolean;
+    showBlockOption: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,25 @@
+export interface CardProps {
+    title?: string;
+    description?: string;
+}
+declare var __VLS_12: {}, __VLS_19: {}, __VLS_26: {}, __VLS_33: any, __VLS_40: any;
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_12) => any;
+} & {
+    title?: (props: typeof __VLS_19) => any;
+} & {
+    description?: (props: typeof __VLS_26) => any;
+} & {
+    default?: (props: typeof __VLS_33) => any;
+} & {
+    footer?: (props: typeof __VLS_40) => 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>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,34 @@
+<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>
+</template>
+
+<script setup>
+const props = defineProps({
+  title: { type: String, required: false },
+  description: { type: String, required: false }
+});
+</script>

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

@@ -0,0 +1,25 @@
+export interface CardProps {
+    title?: string;
+    description?: string;
+}
+declare var __VLS_12: {}, __VLS_19: {}, __VLS_26: {}, __VLS_33: any, __VLS_40: any;
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_12) => any;
+} & {
+    title?: (props: typeof __VLS_19) => any;
+} & {
+    description?: (props: typeof __VLS_26) => any;
+} & {
+    default?: (props: typeof __VLS_33) => any;
+} & {
+    footer?: (props: typeof __VLS_40) => 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>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,25 @@
+import type { CarouselProps } from "@/types/components/carousel";
+declare var __VLS_27: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_27) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<CarouselProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "clicked-image": () => any;
+    change: (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<CarouselProps> & Readonly<{
+    "onClicked-image"?: (() => any) | undefined;
+    onChange?: ((value: number) => any) | undefined;
+}>, {
+    items: string[];
+    selectIndex: number;
+    fullWidth: boolean;
+    fullHeight: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/carousel.vue

@@ -0,0 +1,68 @@
+<template>
+  <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>
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+const props = defineProps({
+  items: { type: Array, required: true, default: () => [] },
+  selectIndex: { type: Number, required: false, default: 0 },
+  width: { type: [Number, String], required: false },
+  height: { type: [Number, String], required: false },
+  fullWidth: { type: Boolean, required: false, default: false },
+  fullHeight: { type: Boolean, required: false, default: false }
+});
+const emit = defineEmits(["clicked-image", "change"]);
+const currentIndex = ref(props.selectIndex);
+const isHovered = ref(false);
+function onClickedImage() {
+  emit("clicked-image");
+}
+function back() {
+  if (currentIndex.value > 0) {
+    currentIndex.value--;
+    emit("change", currentIndex.value);
+  }
+}
+function next() {
+  if (currentIndex.value < props.items.length - 1) {
+    currentIndex.value++;
+    emit("change", currentIndex.value);
+  }
+}
+watch(
+  () => props.selectIndex,
+  (newVal) => currentIndex.value = newVal
+);
+</script>

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

@@ -0,0 +1,25 @@
+import type { CarouselProps } from "@/types/components/carousel";
+declare var __VLS_27: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_27) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<CarouselProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "clicked-image": () => any;
+    change: (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<CarouselProps> & Readonly<{
+    "onClicked-image"?: (() => any) | undefined;
+    onChange?: ((value: number) => any) | undefined;
+}>, {
+    items: string[];
+    selectIndex: number;
+    fullWidth: boolean;
+    fullHeight: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,24 @@
+import type { ChipProps, ChipColor, ChipSize } from "@/types/components/chip";
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ChipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    closable: () => any;
+}, string, import("vue").PublicProps, Readonly<ChipProps> & Readonly<{
+    onClosable?: (() => any) | undefined;
+}>, {
+    color: ChipColor;
+    flat: boolean;
+    closable: boolean;
+    autoHeight: boolean;
+    size: ChipSize;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/chip.vue

@@ -0,0 +1,59 @@
+<template>
+  <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>
+</template>
+
+<script setup>
+import { computed } from "vue";
+const emit = defineEmits(["closable"]);
+const props = defineProps({
+  color: { type: String, required: false, default: "default" },
+  flat: { type: Boolean, required: false, default: false },
+  closable: { type: Boolean, required: false, default: false },
+  autoHeight: { type: Boolean, required: false, default: false },
+  size: { type: String, required: false, default: "medium" }
+});
+const color = computed(() => {
+  const colors = {
+    default: props.flat ? "border-gray bg-mercury" : "border-gray bg-white",
+    primary: "border-primary bg-info text-primary",
+    success: "border-success bg-green-light text-success",
+    warning: "border-warning bg-yellow-light text-warning",
+    error: "border-error bg-red-light text-error"
+  };
+  return colors[props.color];
+});
+const height = computed(() => {
+  const sizes = {
+    tiny: "h-[24px]",
+    small: "h-[32px]",
+    medium: "h-[40px]",
+    large: "h-[48px]",
+    "x-large": "h-[52px]"
+  };
+  return sizes[props.size];
+});
+const size = computed(() => {
+  if (props.size === "tiny") {
+    return "font-body-small";
+  } else {
+    return "font-body-large";
+  }
+});
+</script>

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

@@ -0,0 +1,24 @@
+import type { ChipProps, ChipColor, ChipSize } from "@/types/components/chip";
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ChipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    closable: () => any;
+}, string, import("vue").PublicProps, Readonly<ChipProps> & Readonly<{
+    onClosable?: (() => any) | undefined;
+}>, {
+    color: ChipColor;
+    flat: boolean;
+    closable: boolean;
+    autoHeight: boolean;
+    size: ChipSize;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,34 @@
+interface TypeItem {
+    label: string;
+    children: TypeItem[];
+}
+type __VLS_Props = {
+    items?: TypeItem[];
+};
+declare var __VLS_6: {
+    label: string;
+    item: TypeItem;
+}, __VLS_8: {
+    items: TypeItem[];
+}, __VLS_10: {
+    label: string;
+    item: TypeItem;
+};
+type __VLS_Slots = {} & {
+    title?: (props: typeof __VLS_6) => any;
+} & {
+    children?: (props: typeof __VLS_8) => any;
+} & {
+    'children-item'?: (props: typeof __VLS_10) => any;
+};
+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[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,64 @@
+<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
+              :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>
+</template>
+
+<script setup>
+import { ref } from "vue";
+const props = defineProps({
+  items: { type: Array, required: false, default: () => [] }
+});
+const labelRef = ref([]);
+const arrShow = ref([]);
+const handleShow = (index) => {
+  if (arrShow.value.includes(index)) {
+    arrShow.value = arrShow.value.filter((item) => item !== index);
+  } else {
+    arrShow.value.push(index);
+  }
+};
+const toggleIconPosition = (index) => {
+  if (!labelRef.value[index]) return 0;
+  return labelRef.value[index].offsetHeight / 2 - 10;
+};
+</script>

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

@@ -0,0 +1,34 @@
+interface TypeItem {
+    label: string;
+    children: TypeItem[];
+}
+type __VLS_Props = {
+    items?: TypeItem[];
+};
+declare var __VLS_6: {
+    label: string;
+    item: TypeItem;
+}, __VLS_8: {
+    items: TypeItem[];
+}, __VLS_10: {
+    label: string;
+    item: TypeItem;
+};
+type __VLS_Slots = {} & {
+    title?: (props: typeof __VLS_6) => any;
+} & {
+    children?: (props: typeof __VLS_8) => any;
+} & {
+    'children-item'?: (props: typeof __VLS_10) => any;
+};
+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[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,26 @@
+type __VLS_Props = {
+    title?: string;
+    width?: number | string;
+    fullWidth?: boolean;
+};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_12: {};
+type __VLS_Slots = {} & {
+    title?: (props: typeof __VLS_1) => any;
+} & {
+    'title-text'?: (props: typeof __VLS_3) => any;
+} & {
+    'title-toggle'?: (props: typeof __VLS_5) => any;
+} & {
+    content?: (props: typeof __VLS_12) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    fullWidth: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};