rewrite feed table

2026-04-18 22:33:50 +02:00 · 2026-01-05 23:58:02 +09:00
parent 28488a6887
commit 2b4273b492
54 changed files with 1830 additions and 1054 deletions
--- a/src/components/ui/dropdown-menu/DropdownMenu.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenu.vue
@@ -1,23 +1,19 @@
 <script setup>
-import { DropdownMenuRoot, useForwardPropsEmits } from "reka-ui";
+    import { DropdownMenuRoot, useForwardPropsEmits } from 'reka-ui';

-const props = defineProps({
-  defaultOpen: { type: Boolean, required: false },
-  open: { type: Boolean, required: false },
-  dir: { type: String, required: false },
-  modal: { type: Boolean, required: false },
-});
-const emits = defineEmits(["update:open"]);
+    const props = defineProps({
+        defaultOpen: { type: Boolean, required: false },
+        open: { type: Boolean, required: false },
+        dir: { type: String, required: false },
+        modal: { type: Boolean, required: false }
+    });
+    const emits = defineEmits(['update:open']);

-const forwarded = useForwardPropsEmits(props, emits);
+    const forwarded = useForwardPropsEmits(props, emits);
 </script>

 <template>
-  <DropdownMenuRoot
-    v-slot="slotProps"
-    data-slot="dropdown-menu"
-    v-bind="forwarded"
-  >
-    <slot v-bind="slotProps" />
-  </DropdownMenuRoot>
+    <DropdownMenuRoot v-slot="slotProps" data-slot="dropdown-menu" v-bind="forwarded">
+        <slot v-bind="slotProps" />
+    </DropdownMenuRoot>
 </template>
--- a/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -1,48 +1,41 @@
 <script setup>
-import { reactiveOmit } from "@vueuse/core";
-import { Check } from "lucide-vue-next";
-import {
-  DropdownMenuCheckboxItem,
-  DropdownMenuItemIndicator,
-  useForwardPropsEmits,
-} from "reka-ui";
-import { cn } from "@/lib/utils";
+    import { DropdownMenuCheckboxItem, DropdownMenuItemIndicator, useForwardPropsEmits } from 'reka-ui';
+    import { Check } from 'lucide-vue-next';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';

-const props = defineProps({
-  modelValue: { type: [Boolean, String], required: false },
-  disabled: { type: Boolean, required: false },
-  textValue: { type: String, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-  class: { type: null, required: false },
-});
-const emits = defineEmits(["select", "update:modelValue"]);
+    const props = defineProps({
+        modelValue: { type: [Boolean, String], required: false },
+        disabled: { type: Boolean, required: false },
+        textValue: { type: String, required: false },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        class: { type: null, required: false }
+    });
+    const emits = defineEmits(['select', 'update:modelValue']);

-const delegatedProps = reactiveOmit(props, "class");
+    const delegatedProps = reactiveOmit(props, 'class');

-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+    const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>

 <template>
-  <DropdownMenuCheckboxItem
-    data-slot="dropdown-menu-checkbox-item"
-    v-bind="forwarded"
-    :class="
-      cn(
-        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
-        props.class,
-      )
-    "
-  >
-    <span
-      class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center"
-    >
-      <DropdownMenuItemIndicator>
-        <slot name="indicator-icon">
-          <Check class="size-4" />
-        </slot>
-      </DropdownMenuItemIndicator>
-    </span>
-    <slot />
-  </DropdownMenuCheckboxItem>
+    <DropdownMenuCheckboxItem
+        data-slot="dropdown-menu-checkbox-item"
+        v-bind="forwarded"
+        :class="
+            cn(
+                'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+                props.class
+            )
+        ">
+        <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+            <DropdownMenuItemIndicator>
+                <slot name="indicator-icon">
+                    <Check class="size-4" />
+                </slot>
+            </DropdownMenuItemIndicator>
+        </span>
+        <slot />
+    </DropdownMenuCheckboxItem>
 </template>
--- a/src/components/ui/dropdown-menu/DropdownMenuContent.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuContent.vue
@@ -1,66 +1,61 @@
 <script setup>
-import { reactiveOmit } from "@vueuse/core";
-import {
-  DropdownMenuContent,
-  DropdownMenuPortal,
-  useForwardPropsEmits,
-} from "reka-ui";
-import { cn } from "@/lib/utils";
+    import { DropdownMenuContent, DropdownMenuPortal, useForwardPropsEmits } from 'reka-ui';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';

-defineOptions({
-  inheritAttrs: false,
-});
+    defineOptions({
+        inheritAttrs: false
+    });

-const props = defineProps({
-  forceMount: { type: Boolean, required: false },
-  loop: { type: Boolean, required: false },
-  side: { type: null, required: false },
-  sideOffset: { type: Number, required: false, default: 4 },
-  sideFlip: { type: Boolean, required: false },
-  align: { type: null, required: false },
-  alignOffset: { type: Number, required: false },
-  alignFlip: { type: Boolean, required: false },
-  avoidCollisions: { type: Boolean, required: false },
-  collisionBoundary: { type: null, required: false },
-  collisionPadding: { type: [Number, Object], required: false },
-  arrowPadding: { type: Number, required: false },
-  sticky: { type: String, required: false },
-  hideWhenDetached: { type: Boolean, required: false },
-  positionStrategy: { type: String, required: false },
-  updatePositionStrategy: { type: String, required: false },
-  disableUpdateOnLayoutShift: { type: Boolean, required: false },
-  prioritizePosition: { type: Boolean, required: false },
-  reference: { type: null, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-  class: { type: null, required: false },
-});
-const emits = defineEmits([
-  "escapeKeyDown",
-  "pointerDownOutside",
-  "focusOutside",
-  "interactOutside",
-  "closeAutoFocus",
-]);
+    const props = defineProps({
+        forceMount: { type: Boolean, required: false },
+        loop: { type: Boolean, required: false },
+        side: { type: null, required: false },
+        sideOffset: { type: Number, required: false, default: 4 },
+        sideFlip: { type: Boolean, required: false },
+        align: { type: null, required: false },
+        alignOffset: { type: Number, required: false },
+        alignFlip: { type: Boolean, required: false },
+        avoidCollisions: { type: Boolean, required: false },
+        collisionBoundary: { type: null, required: false },
+        collisionPadding: { type: [Number, Object], required: false },
+        arrowPadding: { type: Number, required: false },
+        sticky: { type: String, required: false },
+        hideWhenDetached: { type: Boolean, required: false },
+        positionStrategy: { type: String, required: false },
+        updatePositionStrategy: { type: String, required: false },
+        disableUpdateOnLayoutShift: { type: Boolean, required: false },
+        prioritizePosition: { type: Boolean, required: false },
+        reference: { type: null, required: false },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        class: { type: null, required: false }
+    });
+    const emits = defineEmits([
+        'escapeKeyDown',
+        'pointerDownOutside',
+        'focusOutside',
+        'interactOutside',
+        'closeAutoFocus'
+    ]);

-const delegatedProps = reactiveOmit(props, "class");
+    const delegatedProps = reactiveOmit(props, 'class');

-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+    const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>

 <template>
-  <DropdownMenuPortal>
-    <DropdownMenuContent
-      data-slot="dropdown-menu-content"
-      v-bind="{ ...$attrs, ...forwarded }"
-      :class="
-        cn(
-          'bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
-          props.class,
-        )
-      "
-    >
-      <slot />
-    </DropdownMenuContent>
-  </DropdownMenuPortal>
+    <DropdownMenuPortal>
+        <DropdownMenuContent
+            data-slot="dropdown-menu-content"
+            v-bind="{ ...$attrs, ...forwarded }"
+            :class="
+                cn(
+                    'bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+                    props.class
+                )
+            ">
+            <slot />
+        </DropdownMenuContent>
+    </DropdownMenuPortal>
 </template>
--- a/src/components/ui/dropdown-menu/DropdownMenuGroup.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuGroup.vue
@@ -1,14 +1,14 @@
 <script setup>
-import { DropdownMenuGroup } from "reka-ui";
+    import { DropdownMenuGroup } from 'reka-ui';

-const props = defineProps({
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-});
+    const props = defineProps({
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false }
+    });
 </script>

 <template>
-  <DropdownMenuGroup data-slot="dropdown-menu-group" v-bind="props">
-    <slot />
-  </DropdownMenuGroup>
+    <DropdownMenuGroup data-slot="dropdown-menu-group" v-bind="props">
+        <slot />
+    </DropdownMenuGroup>
 </template>
--- a/src/components/ui/dropdown-menu/DropdownMenuItem.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuItem.vue
@@ -1,36 +1,35 @@
 <script setup>
-import { reactiveOmit } from "@vueuse/core";
-import { DropdownMenuItem, useForwardProps } from "reka-ui";
-import { cn } from "@/lib/utils";
+    import { DropdownMenuItem, useForwardProps } from 'reka-ui';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';

-const props = defineProps({
-  disabled: { type: Boolean, required: false },
-  textValue: { type: String, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-  class: { type: null, required: false },
-  inset: { type: Boolean, required: false },
-  variant: { type: String, required: false, default: "default" },
-});
+    const props = defineProps({
+        disabled: { type: Boolean, required: false },
+        textValue: { type: String, required: false },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        class: { type: null, required: false },
+        inset: { type: Boolean, required: false },
+        variant: { type: String, required: false, default: 'default' }
+    });

-const delegatedProps = reactiveOmit(props, "inset", "variant", "class");
+    const delegatedProps = reactiveOmit(props, 'inset', 'variant', 'class');

-const forwardedProps = useForwardProps(delegatedProps);
+    const forwardedProps = useForwardProps(delegatedProps);
 </script>

 <template>
-  <DropdownMenuItem
-    data-slot="dropdown-menu-item"
-    :data-inset="inset ? '' : undefined"
-    :data-variant="variant"
-    v-bind="forwardedProps"
-    :class="
-      cn(
-        'focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
-        props.class,
-      )
-    "
-  >
-    <slot />
-  </DropdownMenuItem>
+    <DropdownMenuItem
+        data-slot="dropdown-menu-item"
+        :data-inset="inset ? '' : undefined"
+        :data-variant="variant"
+        v-bind="forwardedProps"
+        :class="
+            cn(
+                'focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+                props.class
+            )
+        ">
+        <slot />
+    </DropdownMenuItem>
 </template>
--- a/src/components/ui/dropdown-menu/DropdownMenuLabel.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuLabel.vue
@@ -1,28 +1,25 @@
 <script setup>
-import { reactiveOmit } from "@vueuse/core";
-import { DropdownMenuLabel, useForwardProps } from "reka-ui";
-import { cn } from "@/lib/utils";
+    import { DropdownMenuLabel, useForwardProps } from 'reka-ui';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';

-const props = defineProps({
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-  class: { type: null, required: false },
-  inset: { type: Boolean, required: false },
-});
+    const props = defineProps({
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        class: { type: null, required: false },
+        inset: { type: Boolean, required: false }
+    });

-const delegatedProps = reactiveOmit(props, "class", "inset");
-const forwardedProps = useForwardProps(delegatedProps);
+    const delegatedProps = reactiveOmit(props, 'class', 'inset');
+    const forwardedProps = useForwardProps(delegatedProps);
 </script>

 <template>
-  <DropdownMenuLabel
-    data-slot="dropdown-menu-label"
-    :data-inset="inset ? '' : undefined"
-    v-bind="forwardedProps"
-    :class="
-      cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', props.class)
-    "
-  >
-    <slot />
-  </DropdownMenuLabel>
+    <DropdownMenuLabel
+        data-slot="dropdown-menu-label"
+        :data-inset="inset ? '' : undefined"
+        v-bind="forwardedProps"
+        :class="cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', props.class)">
+        <slot />
+    </DropdownMenuLabel>
 </template>
--- a/src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
@@ -1,21 +1,18 @@
 <script setup>
-import { DropdownMenuRadioGroup, useForwardPropsEmits } from "reka-ui";
+    import { DropdownMenuRadioGroup, useForwardPropsEmits } from 'reka-ui';

-const props = defineProps({
-  modelValue: { type: String, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-});
-const emits = defineEmits(["update:modelValue"]);
+    const props = defineProps({
+        modelValue: { type: String, required: false },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false }
+    });
+    const emits = defineEmits(['update:modelValue']);

-const forwarded = useForwardPropsEmits(props, emits);
+    const forwarded = useForwardPropsEmits(props, emits);
 </script>

 <template>
-  <DropdownMenuRadioGroup
-    data-slot="dropdown-menu-radio-group"
-    v-bind="forwarded"
-  >
-    <slot />
-  </DropdownMenuRadioGroup>
+    <DropdownMenuRadioGroup data-slot="dropdown-menu-radio-group" v-bind="forwarded">
+        <slot />
+    </DropdownMenuRadioGroup>
 </template>
--- a/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -1,49 +1,42 @@
 <script setup>
-import { reactiveOmit } from "@vueuse/core";
-import { Circle } from "lucide-vue-next";
-import {
-  DropdownMenuItemIndicator,
-  DropdownMenuRadioItem,
-  useForwardPropsEmits,
-} from "reka-ui";
-import { cn } from "@/lib/utils";
+    import { DropdownMenuItemIndicator, DropdownMenuRadioItem, useForwardPropsEmits } from 'reka-ui';
+    import { Circle } from 'lucide-vue-next';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';

-const props = defineProps({
-  value: { type: String, required: true },
-  disabled: { type: Boolean, required: false },
-  textValue: { type: String, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+    const props = defineProps({
+        value: { type: String, required: true },
+        disabled: { type: Boolean, required: false },
+        textValue: { type: String, required: false },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        class: { type: null, required: false }
+    });

-const emits = defineEmits(["select"]);
+    const emits = defineEmits(['select']);

-const delegatedProps = reactiveOmit(props, "class");
+    const delegatedProps = reactiveOmit(props, 'class');

-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+    const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>

 <template>
-  <DropdownMenuRadioItem
-    data-slot="dropdown-menu-radio-item"
-    v-bind="forwarded"
-    :class="
-      cn(
-        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
-        props.class,
-      )
-    "
-  >
-    <span
-      class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center"
-    >
-      <DropdownMenuItemIndicator>
-        <slot name="indicator-icon">
-          <Circle class="size-2 fill-current" />
-        </slot>
-      </DropdownMenuItemIndicator>
-    </span>
-    <slot />
-  </DropdownMenuRadioItem>
+    <DropdownMenuRadioItem
+        data-slot="dropdown-menu-radio-item"
+        v-bind="forwarded"
+        :class="
+            cn(
+                'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+                props.class
+            )
+        ">
+        <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+            <DropdownMenuItemIndicator>
+                <slot name="indicator-icon">
+                    <Circle class="size-2 fill-current" />
+                </slot>
+            </DropdownMenuItemIndicator>
+        </span>
+        <slot />
+    </DropdownMenuRadioItem>
 </template>
--- a/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue
@@ -1,21 +1,20 @@
 <script setup>
-import { reactiveOmit } from "@vueuse/core";
-import { DropdownMenuSeparator } from "reka-ui";
-import { cn } from "@/lib/utils";
+    import { DropdownMenuSeparator } from 'reka-ui';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';

-const props = defineProps({
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+    const props = defineProps({
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        class: { type: null, required: false }
+    });

-const delegatedProps = reactiveOmit(props, "class");
+    const delegatedProps = reactiveOmit(props, 'class');
 </script>

 <template>
-  <DropdownMenuSeparator
-    data-slot="dropdown-menu-separator"
-    v-bind="delegatedProps"
-    :class="cn('bg-border -mx-1 my-1 h-px', props.class)"
-  />
+    <DropdownMenuSeparator
+        data-slot="dropdown-menu-separator"
+        v-bind="delegatedProps"
+        :class="cn('bg-border -mx-1 my-1 h-px', props.class)" />
 </template>
--- a/src/components/ui/dropdown-menu/DropdownMenuShortcut.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuShortcut.vue
@@ -1,18 +1,15 @@
 <script setup>
-import { cn } from "@/lib/utils";
+    import { cn } from '@/lib/utils';

-const props = defineProps({
-  class: { type: null, required: false },
-});
+    const props = defineProps({
+        class: { type: null, required: false }
+    });
 </script>

 <template>
-  <span
-    data-slot="dropdown-menu-shortcut"
-    :class="
-      cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)
-    "
-  >
-    <slot />
-  </span>
+    <span
+        data-slot="dropdown-menu-shortcut"
+        :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)">
+        <slot />
+    </span>
 </template>
--- a/src/components/ui/dropdown-menu/DropdownMenuSub.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuSub.vue
@@ -1,21 +1,17 @@
 <script setup>
-import { DropdownMenuSub, useForwardPropsEmits } from "reka-ui";
+    import { DropdownMenuSub, useForwardPropsEmits } from 'reka-ui';

-const props = defineProps({
-  defaultOpen: { type: Boolean, required: false },
-  open: { type: Boolean, required: false },
-});
-const emits = defineEmits(["update:open"]);
+    const props = defineProps({
+        defaultOpen: { type: Boolean, required: false },
+        open: { type: Boolean, required: false }
+    });
+    const emits = defineEmits(['update:open']);

-const forwarded = useForwardPropsEmits(props, emits);
+    const forwarded = useForwardPropsEmits(props, emits);
 </script>

 <template>
-  <DropdownMenuSub
-    v-slot="slotProps"
-    data-slot="dropdown-menu-sub"
-    v-bind="forwarded"
-  >
-    <slot v-bind="slotProps" />
-  </DropdownMenuSub>
+    <DropdownMenuSub v-slot="slotProps" data-slot="dropdown-menu-sub" v-bind="forwarded">
+        <slot v-bind="slotProps" />
+    </DropdownMenuSub>
 </template>
--- a/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue
@@ -1,56 +1,55 @@
 <script setup>
-import { reactiveOmit } from "@vueuse/core";
-import { DropdownMenuSubContent, useForwardPropsEmits } from "reka-ui";
-import { cn } from "@/lib/utils";
+    import { DropdownMenuSubContent, useForwardPropsEmits } from 'reka-ui';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';

-const props = defineProps({
-  forceMount: { type: Boolean, required: false },
-  loop: { type: Boolean, required: false },
-  sideOffset: { type: Number, required: false },
-  sideFlip: { type: Boolean, required: false },
-  alignOffset: { type: Number, required: false },
-  alignFlip: { type: Boolean, required: false },
-  avoidCollisions: { type: Boolean, required: false },
-  collisionBoundary: { type: null, required: false },
-  collisionPadding: { type: [Number, Object], required: false },
-  arrowPadding: { type: Number, required: false },
-  sticky: { type: String, required: false },
-  hideWhenDetached: { type: Boolean, required: false },
-  positionStrategy: { type: String, required: false },
-  updatePositionStrategy: { type: String, required: false },
-  disableUpdateOnLayoutShift: { type: Boolean, required: false },
-  prioritizePosition: { type: Boolean, required: false },
-  reference: { type: null, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-  class: { type: null, required: false },
-});
-const emits = defineEmits([
-  "escapeKeyDown",
-  "pointerDownOutside",
-  "focusOutside",
-  "interactOutside",
-  "entryFocus",
-  "openAutoFocus",
-  "closeAutoFocus",
-]);
+    const props = defineProps({
+        forceMount: { type: Boolean, required: false },
+        loop: { type: Boolean, required: false },
+        sideOffset: { type: Number, required: false },
+        sideFlip: { type: Boolean, required: false },
+        alignOffset: { type: Number, required: false },
+        alignFlip: { type: Boolean, required: false },
+        avoidCollisions: { type: Boolean, required: false },
+        collisionBoundary: { type: null, required: false },
+        collisionPadding: { type: [Number, Object], required: false },
+        arrowPadding: { type: Number, required: false },
+        sticky: { type: String, required: false },
+        hideWhenDetached: { type: Boolean, required: false },
+        positionStrategy: { type: String, required: false },
+        updatePositionStrategy: { type: String, required: false },
+        disableUpdateOnLayoutShift: { type: Boolean, required: false },
+        prioritizePosition: { type: Boolean, required: false },
+        reference: { type: null, required: false },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        class: { type: null, required: false }
+    });
+    const emits = defineEmits([
+        'escapeKeyDown',
+        'pointerDownOutside',
+        'focusOutside',
+        'interactOutside',
+        'entryFocus',
+        'openAutoFocus',
+        'closeAutoFocus'
+    ]);

-const delegatedProps = reactiveOmit(props, "class");
+    const delegatedProps = reactiveOmit(props, 'class');

-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+    const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>

 <template>
-  <DropdownMenuSubContent
-    data-slot="dropdown-menu-sub-content"
-    v-bind="forwarded"
-    :class="
-      cn(
-        'bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
-        props.class,
-      )
-    "
-  >
-    <slot />
-  </DropdownMenuSubContent>
+    <DropdownMenuSubContent
+        data-slot="dropdown-menu-sub-content"
+        v-bind="forwarded"
+        :class="
+            cn(
+                'bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+                props.class
+            )
+        ">
+        <slot />
+    </DropdownMenuSubContent>
 </template>
--- a/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -1,34 +1,33 @@
 <script setup>
-import { reactiveOmit } from "@vueuse/core";
-import { ChevronRight } from "lucide-vue-next";
-import { DropdownMenuSubTrigger, useForwardProps } from "reka-ui";
-import { cn } from "@/lib/utils";
+    import { DropdownMenuSubTrigger, useForwardProps } from 'reka-ui';
+    import { ChevronRight } from 'lucide-vue-next';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';

-const props = defineProps({
-  disabled: { type: Boolean, required: false },
-  textValue: { type: String, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-  class: { type: null, required: false },
-  inset: { type: Boolean, required: false },
-});
+    const props = defineProps({
+        disabled: { type: Boolean, required: false },
+        textValue: { type: String, required: false },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        class: { type: null, required: false },
+        inset: { type: Boolean, required: false }
+    });

-const delegatedProps = reactiveOmit(props, "class", "inset");
-const forwardedProps = useForwardProps(delegatedProps);
+    const delegatedProps = reactiveOmit(props, 'class', 'inset');
+    const forwardedProps = useForwardProps(delegatedProps);
 </script>

 <template>
-  <DropdownMenuSubTrigger
-    data-slot="dropdown-menu-sub-trigger"
-    v-bind="forwardedProps"
-    :class="
-      cn(
-        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
-        props.class,
-      )
-    "
-  >
-    <slot />
-    <ChevronRight class="ml-auto size-4" />
-  </DropdownMenuSubTrigger>
+    <DropdownMenuSubTrigger
+        data-slot="dropdown-menu-sub-trigger"
+        v-bind="forwardedProps"
+        :class="
+            cn(
+                'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
+                props.class
+            )
+        ">
+        <slot />
+        <ChevronRight class="ml-auto size-4" />
+    </DropdownMenuSubTrigger>
 </template>
--- a/src/components/ui/dropdown-menu/DropdownMenuTrigger.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuTrigger.vue
@@ -1,20 +1,17 @@
 <script setup>
-import { DropdownMenuTrigger, useForwardProps } from "reka-ui";
+    import { DropdownMenuTrigger, useForwardProps } from 'reka-ui';

-const props = defineProps({
-  disabled: { type: Boolean, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-});
+    const props = defineProps({
+        disabled: { type: Boolean, required: false },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false }
+    });

-const forwardedProps = useForwardProps(props);
+    const forwardedProps = useForwardProps(props);
 </script>

 <template>
-  <DropdownMenuTrigger
-    data-slot="dropdown-menu-trigger"
-    v-bind="forwardedProps"
-  >
-    <slot />
-  </DropdownMenuTrigger>
+    <DropdownMenuTrigger data-slot="dropdown-menu-trigger" v-bind="forwardedProps">
+        <slot />
+    </DropdownMenuTrigger>
 </template>
--- a/src/components/ui/dropdown-menu/index.js
+++ b/src/components/ui/dropdown-menu/index.js
@@ -1,16 +1,16 @@
-export { default as DropdownMenu } from "./DropdownMenu.vue";
+export { default as DropdownMenu } from './DropdownMenu.vue';

-export { default as DropdownMenuCheckboxItem } from "./DropdownMenuCheckboxItem.vue";
-export { default as DropdownMenuContent } from "./DropdownMenuContent.vue";
-export { default as DropdownMenuGroup } from "./DropdownMenuGroup.vue";
-export { default as DropdownMenuItem } from "./DropdownMenuItem.vue";
-export { default as DropdownMenuLabel } from "./DropdownMenuLabel.vue";
-export { default as DropdownMenuRadioGroup } from "./DropdownMenuRadioGroup.vue";
-export { default as DropdownMenuRadioItem } from "./DropdownMenuRadioItem.vue";
-export { default as DropdownMenuSeparator } from "./DropdownMenuSeparator.vue";
-export { default as DropdownMenuShortcut } from "./DropdownMenuShortcut.vue";
-export { default as DropdownMenuSub } from "./DropdownMenuSub.vue";
-export { default as DropdownMenuSubContent } from "./DropdownMenuSubContent.vue";
-export { default as DropdownMenuSubTrigger } from "./DropdownMenuSubTrigger.vue";
-export { default as DropdownMenuTrigger } from "./DropdownMenuTrigger.vue";
-export { DropdownMenuPortal } from "reka-ui";
+export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue';
+export { default as DropdownMenuContent } from './DropdownMenuContent.vue';
+export { default as DropdownMenuGroup } from './DropdownMenuGroup.vue';
+export { default as DropdownMenuItem } from './DropdownMenuItem.vue';
+export { default as DropdownMenuLabel } from './DropdownMenuLabel.vue';
+export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue';
+export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue';
+export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue';
+export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue';
+export { default as DropdownMenuSub } from './DropdownMenuSub.vue';
+export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue';
+export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue';
+export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue';
+export { DropdownMenuPortal } from 'reka-ui';