pukaad-ui-lib 1.0.1

package/dist/runtime/components/drawer/drawer-notification.vue

@@ -0,0 +1,340 @@
+<template>
+  <Drawer title="การแจ้งเตือน" v-model="isOpen" :width="707">
+    <template #header>
+      <div class="flex justify-between p-[16px]">
+        <div class="font-title-medium-prominent">การแจ้งเตือน</div>
+        <div class="flex gap-[16px]">
+          <Dropdown>
+            <template #default="{ isOpen }">
+              <Button color="black" variant="text" disabled-padding>
+                <Icon :size="24" name="lucide:settings" />
+              </Button>
+            </template>
+            <template #content>
+              <div class="w-[252px] font-body-large">
+                <div
+                  class="hover:bg-bright cursor-pointer flex gap-[4px] p-[8px] items-center"
+                >
+                  <Icon :size="16" name="lucide:check" />
+                  <div class="font-body-medium">
+                    ทำเครื่องหมายว่าอ่านแล้วทั้งหมด
+                  </div>
+                </div>
+                <Divider />
+                <NuxtLink
+                  to="/setting/notification"
+                  class="hover:bg-bright cursor-pointer flex gap-[4px] p-[8px] items-center"
+                  @click="closeDrawer"
+                >
+                  <Icon :size="20" name="lucide:settings" />
+                  <div class="font-body-medium">ตั้งค่าการแจ้งเตือน</div>
+                </NuxtLink>
+              </div>
+            </template>
+          </Dropdown>
+          <Button
+            color="black"
+            variant="text"
+            disabled-padding
+            @click="closeDrawer"
+          >
+            <Icon :name="'lucide:x'" :size="24" />
+          </Button>
+        </div>
+      </div>
+    </template>
+    <div class="flex flex-col gap-[16px]">
+      <Card full-width>
+        <Tab
+          :items="items"
+          disabled-content
+          tabButtonSize="small"
+          :tabButtonGap="16"
+          v-model="tab"
+        >
+          <template
+            v-for="(item, i) in items"
+            :key="i"
+            #[`tab-${item.value}-label-text`]
+          >
+            <div class="flex gap-[8px] items-center">
+              <Icon :name="item.icon" :size="20" />
+              <div class="relative">
+                {{ item.label }}
+                <!-- <Avatar
+                  v-if="item.is_noti"
+                  class="absolute top-0 -right-[8px]"
+                  :size="8"
+                  color="error"
+                /> -->
+              </div>
+            </div>
+          </template>
+        </Tab>
+      </Card>
+      <Tab v-model="tab" :items="items" :tabButtonGap="16" disabled-header>
+        <template #tab-content-general>
+          <div class="flex flex-col gap-[4px] w-full">
+            <div v-for="(item, index) in props.items.general" :key="index">
+              <Card full-width class="hover:bg-bright cursor-pointer">
+                <div class="flex gap-[8px] items-center">
+                  <div>
+                    <!-- <Avatar :size="40" :src="item.avatar" /> -->
+                  </div>
+                  <div class="flex flex-col gap-[4px]">
+                    <div class="font-body-large">
+                      {{ item.content }}
+                    </div>
+                    <div class="font-body-small text-gray">
+                      {{ item.time_created }}
+                    </div>
+                  </div>
+                  <div class="flex items-center gap-[8px] ml-auto">
+                    <Image
+                      v-if="item.image"
+                      :width="40"
+                      :height="40"
+                      :src="item.image"
+                      class="rounded-[4px]"
+                    />
+                    <div
+                      v-else-if="item.video_url"
+                      class="relative w-[40px] h-[40px] rounded-[4px] bg-black flex justify-center items-center overflow-hidden"
+                    >
+                      <video
+                        class="w-[40px] h-[40px] object-cover rounded-[4px]"
+                        :src="item.video_url"
+                        preload="metadata"
+                      />
+                      <div
+                        class="absolute bg-black/50 w-[24px] h-[24px] rounded-full flex justify-center items-center"
+                      >
+                        <Icon
+                          name="material-symbols:play-arrow"
+                          class="text-white"
+                        />
+                      </div>
+                    </div>
+                    <div class="w-[20px]">
+                      <Icon
+                        v-if="item.is_unread"
+                        class="text-primary"
+                        :size="20"
+                        name="fad:armrecording"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </Card>
+            </div>
+          </div>
+        </template>
+
+        <template #tab-content-order>
+          <div class="flex flex-col gap-[4px]">
+            <div v-for="(item, index) in props.items.order" :key="index">
+              <Card full-width class="hover:bg-bright cursor-pointer">
+                <div class="flex gap-[8px] items-center">
+                  <div>
+                    <Image
+                      v-if="item.image_url"
+                      :width="40"
+                      :height="40"
+                      :src="item.image_url"
+                      class="rounded-[4px]"
+                    />
+                  </div>
+                  <div class="flex flex-col gap-[4px]">
+                    <p class="font-body-large">
+                      <template
+                        v-for="(text, index) in item.content"
+                        :key="index"
+                      >
+                        <span
+                          :class="
+  text.is_active ? 'text-primary' : 'text-black'
+"
+                        >
+                          {{ text.text }}
+                        </span>
+                      </template>
+                    </p>
+
+                    <div class="font-body-small text-gray">
+                      {{ item.time_created }}
+                    </div>
+                  </div>
+                  <div class="flex items-center w-[20px] gap-[8px] ml-auto">
+                    <Icon
+                      v-if="item.is_unread"
+                      class="text-primary"
+                      :size="20"
+                      name="fad:armrecording"
+                    />
+                  </div>
+                </div>
+              </Card>
+            </div>
+          </div>
+        </template>
+
+        <template #tab-content-promotion>
+          <div class="flex flex-col gap-[4px]">
+            <div v-for="(item, index) in props.items.promotion" :key="index">
+              <Card full-width class="hover:bg-bright cursor-pointer">
+                <div class="flex gap-[8px] items-center">
+                  <div>
+                    <Image
+                      v-if="item.image_url"
+                      :width="40"
+                      :height="40"
+                      :src="item.image_url"
+                      class="rounded-[4px]"
+                    />
+                  </div>
+                  <div class="flex flex-col gap-[4px]">
+                    <div class="font-body-large">
+                      {{ item.content }}
+                    </div>
+                    <div class="font-body-small text-gray">
+                      {{ item.time_created }}
+                    </div>
+                  </div>
+                  <div class="flex w-[20px] items-center gap-[8px] ml-auto">
+                    <Icon
+                      v-if="item.is_unread"
+                      class="text-primary"
+                      :size="20"
+                      name="fad:armrecording"
+                    />
+                  </div>
+                </div>
+              </Card>
+            </div>
+          </div>
+        </template>
+
+        <template #tab-content-activity>
+          <div class="flex flex-col gap-[4px]">
+            <div v-for="(item, index) in props.items.activity" :key="index">
+              <Card full-width class="hover:bg-bright cursor-pointer">
+                <div class="flex gap-[8px] items-center">
+                  <div>
+                    <Image
+                      v-if="item.image_url"
+                      :width="40"
+                      :height="40"
+                      :src="item.image_url"
+                      class="rounded-[4px]"
+                    />
+                  </div>
+                  <div class="flex flex-col gap-[4px]">
+                    <div class="font-body-large">
+                      {{ item.content }}
+                    </div>
+                    <div class="font-body-small text-gray">
+                      {{ item.time_created }}
+                    </div>
+                  </div>
+                  <div class="flex w-[20px] items-center gap-[8px] ml-auto">
+                    <Icon
+                      v-if="item.is_unread"
+                      class="text-primary"
+                      :size="20"
+                      name="fad:armrecording"
+                    />
+                  </div>
+                </div>
+              </Card>
+            </div>
+          </div>
+        </template>
+
+        <template #tab-content-system>
+          <div class="flex flex-col gap-[4px]">
+            <div v-for="(item, index) in props.items.system" :key="index">
+              <Card full-width class="hover:bg-bright cursor-pointer">
+                <div class="flex gap-[8px] items-center">
+                  <div>
+                    <Icon
+                      class="text-gray"
+                      name="pukaad:memsg-square"
+                      :width="40"
+                      :height="40"
+                    />
+                  </div>
+                  <div class="flex flex-col gap-[4px]">
+                    <div class="font-body-large">
+                      {{ item.content }}
+                    </div>
+                    <div class="font-body-small text-gray">
+                      {{ item.time_created }}
+                    </div>
+                  </div>
+                  <div class="flex w-[20px] items-center gap-[8px] ml-auto">
+                    <Icon
+                      v-if="item.is_unread"
+                      class="text-primary"
+                      :size="20"
+                      name="fad:armrecording"
+                    />
+                  </div>
+                </div>
+              </Card>
+            </div>
+          </div>
+        </template>
+      </Tab>
+    </div>
+  </Drawer>
+</template>
+
+<script setup>
+import { ref } from "vue";
+const props = defineProps({
+  items: { type: Object, required: false, default: () => ({
+    general: [],
+    order: [],
+    promotion: [],
+    activity: [],
+    system: []
+  }) }
+});
+const isOpen = defineModel({ type: Boolean, default: false });
+const tab = ref(null);
+const items = [
+  {
+    label: "\u0E17\u0E31\u0E48\u0E27\u0E44\u0E1B",
+    icon: "lucide:layers",
+    is_noti: false,
+    value: "general"
+  },
+  {
+    label: "\u0E04\u0E33\u0E2A\u0E31\u0E48\u0E07\u0E0B\u0E37\u0E49\u0E2D",
+    icon: "lucide:shopping-cart",
+    is_noti: true,
+    value: "order"
+  },
+  {
+    label: "\u0E42\u0E1B\u0E23\u0E42\u0E21\u0E0A\u0E31\u0E48\u0E19",
+    icon: "lucide:megaphone",
+    is_noti: true,
+    value: "promotion"
+  },
+  {
+    label: "\u0E01\u0E34\u0E08\u0E01\u0E23\u0E23\u0E21",
+    icon: "lucide:gift",
+    is_noti: true,
+    value: "activity"
+  },
+  {
+    label: "\u0E23\u0E30\u0E1A\u0E1A",
+    icon: "lucide:network",
+    is_noti: true,
+    value: "system"
+  }
+];
+const closeDrawer = () => {
+  isOpen.value = false;
+};
+</script>

package/dist/runtime/components/drawer/drawer-notification.vue.d.ts

@@ -0,0 +1,22 @@
+import type { DrawerNotificationProps } from "@/types/components/drawer/drawer-notification";
+type __VLS_Props = DrawerNotificationProps;
+declare const isOpen: import("vue").ModelRef<boolean, string, boolean, boolean>;
+type __VLS_ModelProps = {
+    modelValue?: typeof isOpen['value'];
+};
+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: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    items: {
+        general?: import("@/types/components/drawer/drawer-notification").general[];
+        order?: import("@/types/components/drawer/drawer-notification").order[];
+        promotion?: import("@/types/components/drawer/drawer-notification").promotion[];
+        activity?: import("@/types/components/drawer/drawer-notification").activity[];
+        system?: import("@/types/components/drawer/drawer-notification").system[];
+    };
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/drawer/drawer-post-blog.d.vue.ts

@@ -0,0 +1,10 @@
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/drawer/drawer-post-blog.vue

@@ -0,0 +1,88 @@
+<template>
+  <Drawer class="w-[748px]" title="เพิ่มบล็อก" v-model="isOpen">
+    <div class="flex flex-col gap-4">
+      <InputTextField
+        label="หัวข้อ"
+        placeholder="ตั้งชื่อบทความให้น่าสนใจ"
+        showCounter
+        disabled-border
+        :limit="180"
+        required
+      />
+      <InputContent placeholder="อยากเล่าอะไร" />
+
+      <InputCheckbox label="ไม่อนุญาตให้แสดงความคิดเห็น" />
+      <!-- <div class="flex flex-col gap-[8px]">
+        <div class="text-gray font-body-large">ภาพหน้าปก</div>
+        <InputFile
+          accept="image/jpeg,image/png,image/webp,image/bmp,image/gif"
+          :limit="1"
+        />
+        <div class="flex flex-col text-gray font-body-small">
+          <div>รองรับไฟล์ *.jpg *.jpeg *.png *.webp *.bmp *.gif</div>
+          <div>ขนาดไม่เกิน 30 mb</div>
+        </div>
+      </div> -->
+    </div>
+  </Drawer>
+  <!-- <Drawer
+    :width="788"
+    title="เล่าเรื่องราวของคุณ"
+    v-model="isOpen"
+    @submit="onSubmit"
+  >
+    <Card full-width>
+      <div class="flex flex-col gap-[16px]">
+        <InputTextField
+          placeholder="ตั้งชื่อบทความให้น่าสนใจ"
+          label="หัวข้อ"
+          fullWidth
+          showCounter
+          disabled-border
+          :limit="180"
+          required
+          v-model="state.title"
+        />
+        <InputContent
+          placeholder="อยากเล่าอะไร"
+          class="h-[140px]"
+          v-model="state.content"
+        />
+        <InputTag v-model="state.tag" />
+        <InputCheckbox
+          label="ไม่อนุญาตให้แสดงความคิดเห็น"
+          :label-gap="10"
+          v-model="state.disabled_comment"
+        />
+        <div class="flex flex-col gap-[8px]">
+          <div class="text-gray font-body-large">ภาพหน้าปก</div>
+          <InputFile
+            accept="image/jpeg,image/png,image/webp,image/bmp,image/gif"
+            :limit="1"
+            v-model="state.file"
+          />
+          <div class="flex flex-col text-gray font-body-small">
+            <div>รองรับไฟล์ *.jpg *.jpeg *.png *.webp *.bmp *.gif</div>
+            <div>ขนาดไม่เกิน 30 mb</div>
+          </div>
+        </div>
+      </div>
+    </Card>
+
+    <template #footer="{ meta }">
+      <div class="flex justify-end items-center gap-[16px]">
+        <Button variant="text" color="black" @click="onClose"> ยกเลิก </Button>
+        <Button variant="solid" @click="onSave"> บันทึกแบบร่าง </Button>
+        <Button type="submit" color="primary" :disabled="!meta.valid">
+          ยืนยัน
+        </Button>
+      </div>
+    </template>
+  </Drawer> -->
+</template>
+
+<script setup>
+const isOpen = defineModel({ type: Boolean, ...{
+  default: false
+} });
+</script>

package/dist/runtime/components/drawer/drawer-post-blog.vue.d.ts

@@ -0,0 +1,10 @@
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/drawer/drawer-profile-about.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/drawer/drawer-profile-about.vue

@@ -0,0 +1,44 @@
+<template>
+  <!-- <Drawer
+    width="788"
+    title="เกี่ยวกับ"
+    @close="onClose"
+    @submit="onSubmit"
+    v-model="isDrawerOpen"
+  >
+    <Card full-width>
+      <div class="flex flex-col gap-[16px]">
+        <InputTextarea
+          name="description"
+          placeholder="เพิ่มคำอธิบายที่จะช่วยให้ค้นพบและติดตามคุณได้ง่ายขึ้น (สูงสุด 220 ตัวอักษร)"
+          label="คำอธิบาย"
+          full-width
+          show-counter
+          :max-length="220"
+          resize="none"
+          v-model="formState.description"
+        />
+
+        <InputTextField
+          name="phone"
+          placeholder="กรอกเบอร์โทรศัพท์"
+          label="เบอร์โทรศัพท์สำหรับติดต่อ"
+          full-width
+          hint="เบอร์โทรศัพท์นี้จะแสดงในโปรไฟล์ของคุณ และสามารถมองเห็นได้โดยสาธารณะ"
+          v-model="formState.phone"
+        />
+        <InputLink name="links" v-model="formState.links" />
+      </div>
+    </Card>
+    <template #footer>
+      <div class="flex justify-end gap-[16px] items-center">
+        <Button type="outline" @click="onClose"> ยกเลิก </Button>
+        <Button button-type="submit" variant="primary"> ยืนยัน </Button>
+      </div>
+    </template>
+  </Drawer> -->
+</template>
+
+<script setup>
+
+</script>

package/dist/runtime/components/drawer/drawer-profile-about.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,38 @@
+import type { SheetContentProps } from "@/runtime/components/ui/sheet/SheetContent.vue";
+export interface DrawerProps extends SheetContentProps {
+    title?: string;
+    description?: string;
+}
+type __VLS_Props = DrawerProps;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_20: {}, __VLS_32: {
+    meta: any;
+}, __VLS_39: {
+    meta: any;
+};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_20) => any;
+} & {
+    default?: (props: typeof __VLS_32) => any;
+} & {
+    footer?: (props: typeof __VLS_39) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+} & {
+    submit: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSubmit?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, 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/drawer/drawer.vue

@@ -0,0 +1,38 @@
+<template>
+  <ShadSheet v-model:open="isOpen">
+    <ShadSheetContent v-bind="props" v-slot="{ meta }" @submit="onSubmit">
+      <ShadSheetHeader>
+        <slot name="header">
+          <ShadSheetTitle>{{ props.title }}</ShadSheetTitle>
+          <ShadSheetDescription>
+            {{ props.description }}
+          </ShadSheetDescription>
+        </slot>
+      </ShadSheetHeader>
+      <slot name="default" :meta="meta" />
+      <ShadSheetFooter v-if="$slots.footer">
+        <slot name="footer" :meta="meta" />
+      </ShadSheetFooter>
+    </ShadSheetContent>
+  </ShadSheet>
+</template>
+
+<script setup>
+const props = defineProps({
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  class: { type: null, required: false },
+  side: { type: String, required: false },
+  forceMount: { type: Boolean, required: false },
+  disableOutsidePointerEvents: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false }
+});
+const emits = defineEmits(["submit"]);
+const isOpen = defineModel({ type: Boolean, ...{
+  default: false
+} });
+const onSubmit = (e) => {
+  emits("submit");
+};
+</script>

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

@@ -0,0 +1,38 @@
+import type { SheetContentProps } from "@/runtime/components/ui/sheet/SheetContent.vue";
+export interface DrawerProps extends SheetContentProps {
+    title?: string;
+    description?: string;
+}
+type __VLS_Props = DrawerProps;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_20: {}, __VLS_32: {
+    meta: any;
+}, __VLS_39: {
+    meta: any;
+};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_20) => any;
+} & {
+    default?: (props: typeof __VLS_32) => any;
+} & {
+    footer?: (props: typeof __VLS_39) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+} & {
+    submit: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSubmit?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, 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/dropdown.d.vue.ts

@@ -0,0 +1,13 @@
+declare var __VLS_12: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_12) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/dropdown.vue

@@ -0,0 +1,14 @@
+<template>
+  <ShadDropdownMenu>
+    <ShadDropdownMenuTrigger>
+      <slot />
+    </ShadDropdownMenuTrigger>
+    <ShadDropdownMenuContent class="w-56" align="bottom">
+      asd
+    </ShadDropdownMenuContent>
+  </ShadDropdownMenu>
+</template>
+
+<script setup>
+import { ref } from "vue";
+</script>