replace element plus components

src/components/ui/scroll-area/ScrollArea.vue

@@ -0,0 +1,44 @@
+<script setup>
+    defineOptions({ inheritAttrs: false });
+
+    import { ScrollAreaCorner, ScrollAreaRoot, ScrollAreaViewport } from 'reka-ui';
+    import { ref, useAttrs } from 'vue';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
+
+    import ScrollBar from './ScrollBar.vue';
+
+    const props = defineProps({
+        type: { type: null, required: false },
+        dir: { type: null, required: false },
+        scrollHideDelay: { type: Number, required: false },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        class: { type: null, required: false }
+    });
+
+    const delegatedProps = reactiveOmit(props, 'class');
+
+    const attrs = useAttrs();
+    const viewportEl = ref(null);
+
+    function setViewportEl(el) {
+        viewportEl.value = el?.$el ?? el ?? null;
+    }
+
+    defineExpose({ viewportEl, update: () => {} });
+</script>
+
+<template>
+    <ScrollAreaRoot data-slot="scroll-area" v-bind="delegatedProps" :class="cn('relative', props.class)">
+        <ScrollAreaViewport
+            data-slot="scroll-area-viewport"
+            :ref="setViewportEl"
+            v-bind="attrs"
+            class="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1">
+            <slot />
+        </ScrollAreaViewport>
+        <ScrollBar />
+        <ScrollAreaCorner />
+    </ScrollAreaRoot>
+</template>

src/components/ui/scroll-area/ScrollBar.vue

@@ -0,0 +1,37 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { ScrollAreaScrollbar, ScrollAreaThumb } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  orientation: { type: String, required: false, default: "vertical" },
+  forceMount: { 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>
+  <ScrollAreaScrollbar
+    data-slot="scroll-area-scrollbar"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'flex touch-none p-px transition-colors select-none',
+        orientation === 'vertical' &&
+          'h-full w-2.5 border-l border-l-transparent',
+        orientation === 'horizontal' &&
+          'h-2.5 flex-col border-t border-t-transparent',
+        props.class,
+      )
+    "
+  >
+    <ScrollAreaThumb
+      data-slot="scroll-area-thumb"
+      class="bg-border relative flex-1 rounded-full"
+    />
+  </ScrollAreaScrollbar>
+</template>

src/components/ui/scroll-area/index.js

@@ -0,0 +1,2 @@
+export { default as ScrollArea } from "./ScrollArea.vue";
+export { default as ScrollBar } from "./ScrollBar.vue";