replace el-dropdown

src/components/ui/button-group/ButtonGroup.vue

@@ -1,12 +1,12 @@
 <script setup>
-    import { cn } from '@/lib/utils';
+import { cn } from '@/lib/utils';
 
-    import { buttonGroupVariants } from '.';
+import { buttonGroupVariants } from '.';
 
-    const props = defineProps({
-        class: { type: null, required: false },
-        orientation: { type: null, required: false }
-    });
+const props = defineProps({
+    class: { type: null, required: false },
+    orientation: { type: null, required: false }
+});
 </script>
 
 <template>

src/components/ui/button-group/ButtonGroupSeparator.vue

@@ -1,16 +1,16 @@
 <script setup>
-    import { Separator } from '@/components/ui/separator';
-    import { cn } from '@/lib/utils';
-    import { reactiveOmit } from '@vueuse/core';
+import { Separator } from '@/components/ui/separator';
+import { cn } from '@/lib/utils';
+import { reactiveOmit } from '@vueuse/core';
 
-    const props = defineProps({
-        orientation: { type: String, required: false, default: 'vertical' },
-        decorative: { type: Boolean, required: false },
-        asChild: { type: Boolean, required: false },
-        as: { type: null, required: false },
-        class: { type: null, required: false }
-    });
-    const delegatedProps = reactiveOmit(props, 'class');
+const props = defineProps({
+    orientation: { type: String, required: false, default: 'vertical' },
+    decorative: { type: Boolean, required: false },
+    asChild: { type: Boolean, required: false },
+    as: { type: null, required: false },
+    class: { type: null, required: false }
+});
+const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>

src/components/ui/button-group/ButtonGroupText.vue

@@ -1,13 +1,13 @@
 <script setup>
-    import { Primitive } from 'reka-ui';
-    import { cn } from '@/lib/utils';
+import { Primitive } from 'reka-ui';
+import { cn } from '@/lib/utils';
 
-    const props = defineProps({
-        class: { type: null, required: false },
-        orientation: { type: null, required: false },
-        asChild: { type: Boolean, required: false },
-        as: { type: null, required: false, default: 'div' }
-    });
+const props = defineProps({
+    class: { type: null, required: false },
+    orientation: { type: null, required: false },
+    asChild: { type: Boolean, required: false },
+    as: { type: null, required: false, default: 'div' }
+});
 </script>
 
 <template>

src/components/ui/select/Select.vue

@@ -1,26 +1,26 @@
 <script setup>
-import { SelectRoot, useForwardPropsEmits } from "reka-ui";
+    import { SelectRoot, useForwardPropsEmits } from 'reka-ui';
 
-const props = defineProps({
-  open: { type: Boolean, required: false },
-  defaultOpen: { type: Boolean, required: false },
-  defaultValue: { type: null, required: false },
-  modelValue: { type: null, required: false },
-  by: { type: [String, Function], required: false },
-  dir: { type: String, required: false },
-  multiple: { type: Boolean, required: false },
-  autocomplete: { type: String, required: false },
-  disabled: { type: Boolean, required: false },
-  name: { type: String, required: false },
-  required: { type: Boolean, required: false },
-});
-const emits = defineEmits(["update:modelValue", "update:open"]);
+    const props = defineProps({
+        open: { type: Boolean, required: false },
+        defaultOpen: { type: Boolean, required: false },
+        defaultValue: { type: null, required: false },
+        modelValue: { type: null, required: false },
+        by: { type: [String, Function], required: false },
+        dir: { type: String, required: false },
+        multiple: { type: Boolean, required: false },
+        autocomplete: { type: String, required: false },
+        disabled: { type: Boolean, required: false },
+        name: { type: String, required: false },
+        required: { type: Boolean, required: false }
+    });
+    const emits = defineEmits(['update:modelValue', 'update:open']);
 
-const forwarded = useForwardPropsEmits(props, emits);
+    const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <SelectRoot v-slot="slotProps" data-slot="select" v-bind="forwarded">
-    <slot v-bind="slotProps" />
-  </SelectRoot>
+    <SelectRoot v-slot="slotProps" data-slot="select" v-bind="forwarded">
+        <slot v-bind="slotProps" />
+    </SelectRoot>
 </template>

src/components/ui/select/SelectContent.vue

@@ -1,82 +1,72 @@
 <script setup>
-import { reactiveOmit } from "@vueuse/core";
-import {
-  SelectContent,
-  SelectPortal,
-  SelectViewport,
-  useForwardPropsEmits,
-} from "reka-ui";
-import { cn } from "@/lib/utils";
-import { SelectScrollDownButton, SelectScrollUpButton } from ".";
+    import { SelectContent, SelectPortal, SelectViewport, useForwardPropsEmits } from 'reka-ui';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
 
-defineOptions({
-  inheritAttrs: false,
-});
+    import { SelectScrollDownButton, SelectScrollUpButton } from '.';
 
-const props = defineProps({
-  forceMount: { type: Boolean, required: false },
-  position: { type: String, required: false, default: "popper" },
-  bodyLock: { type: Boolean, required: false },
-  side: { type: null, required: false },
-  sideOffset: { type: Number, required: false },
-  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 },
-  disableOutsidePointerEvents: { type: Boolean, required: false },
-  class: { type: null, required: false },
-});
-const emits = defineEmits([
-  "closeAutoFocus",
-  "escapeKeyDown",
-  "pointerDownOutside",
-]);
+    defineOptions({
+        inheritAttrs: false
+    });
 
-const delegatedProps = reactiveOmit(props, "class");
+    const props = defineProps({
+        forceMount: { type: Boolean, required: false },
+        position: { type: String, required: false, default: 'popper' },
+        bodyLock: { type: Boolean, required: false },
+        side: { type: null, required: false },
+        sideOffset: { type: Number, required: false },
+        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 },
+        disableOutsidePointerEvents: { type: Boolean, required: false },
+        class: { type: null, required: false }
+    });
+    const emits = defineEmits(['closeAutoFocus', 'escapeKeyDown', 'pointerDownOutside']);
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+    const delegatedProps = reactiveOmit(props, 'class');
+
+    const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <SelectPortal>
-    <SelectContent
-      data-slot="select-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 relative z-50 max-h-(--reka-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
-          position === 'popper' &&
-            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
-          props.class,
-        )
-      "
-    >
-      <SelectScrollUpButton />
-      <SelectViewport
-        :class="
-          cn(
-            'p-1',
-            position === 'popper' &&
-              'h-[var(--reka-select-trigger-height)] w-full min-w-[var(--reka-select-trigger-width)] scroll-my-1',
-          )
-        "
-      >
-        <slot />
-      </SelectViewport>
-      <SelectScrollDownButton />
-    </SelectContent>
-  </SelectPortal>
+    <SelectPortal>
+        <SelectContent
+            data-slot="select-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 relative z-10000 max-h-(--reka-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
+                    position === 'popper' &&
+                        'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+                    props.class
+                )
+            ">
+            <SelectScrollUpButton />
+            <SelectViewport
+                :class="
+                    cn(
+                        'p-1',
+                        position === 'popper' &&
+                            'h-[var(--reka-select-trigger-height)] w-full min-w-[var(--reka-select-trigger-width)] scroll-my-1'
+                    )
+                ">
+                <slot />
+            </SelectViewport>
+            <SelectScrollDownButton />
+        </SelectContent>
+    </SelectPortal>
 </template>

src/components/ui/select/SelectTrigger.vue

@@ -1,20 +1,20 @@
 <script setup>
-    import { SelectIcon, SelectTrigger, useForwardProps } from 'reka-ui';
-    import { ChevronDown } from 'lucide-vue-next';
-    import { cn } from '@/lib/utils';
-    import { reactiveOmit } from '@vueuse/core';
+import { SelectIcon, SelectTrigger, useForwardProps } from 'reka-ui';
+import { ChevronDown } from 'lucide-vue-next';
+import { cn } from '@/lib/utils';
+import { reactiveOmit } from '@vueuse/core';
 
-    const props = defineProps({
-        disabled: { type: Boolean, required: false },
-        reference: { type: null, required: false },
-        asChild: { type: Boolean, required: false },
-        as: { type: null, required: false },
-        class: { type: null, required: false },
-        size: { type: String, required: false, default: 'default' }
-    });
+const props = defineProps({
+    disabled: { type: Boolean, required: false },
+    reference: { type: null, required: false },
+    asChild: { type: Boolean, required: false },
+    as: { type: null, required: false },
+    class: { type: null, required: false },
+    size: { type: String, required: false, default: 'default' }
+});
 
-    const delegatedProps = reactiveOmit(props, 'class', 'size');
-    const forwardedProps = useForwardProps(delegatedProps);
+const delegatedProps = reactiveOmit(props, 'class', 'size');
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>

src/components/ui/separator/Separator.vue

@@ -1,17 +1,17 @@
 <script setup>
-    import { Separator } from 'reka-ui';
-    import { cn } from '@/lib/utils';
-    import { reactiveOmit } from '@vueuse/core';
+import { Separator } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { reactiveOmit } from '@vueuse/core';
 
-    const props = defineProps({
-        orientation: { type: String, required: false, default: 'horizontal' },
-        decorative: { type: Boolean, required: false, default: true },
-        asChild: { type: Boolean, required: false },
-        as: { type: null, required: false },
-        class: { type: null, required: false }
-    });
+const props = defineProps({
+    orientation: { type: String, required: false, default: 'horizontal' },
+    decorative: { type: Boolean, required: false, default: true },
+    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>