Removed Primevue

src/package.json

@@ -51,7 +51,6 @@
         "clsx": "^2.1.1",
         "embla-carousel-vue": "^8.3.1",
         "lucide-vue-next": "^0.454.0",
-        "primevue": "^4.1.1",
         "qs": "^6.13.0",
         "radix-vue": "^1.9.8",
         "tailwind-merge": "^2.5.4",

src/resources/js/app.ts

@@ -1,7 +1,5 @@
 import { DefineComponent, createApp, h } from 'vue';
 
-import PrimeVue from 'primevue/config';
-
 import { createInertiaApp } from '@inertiajs/vue3';
 import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
 import { ZiggyVue } from 'ziggy-js';
@@ -25,7 +23,6 @@ createInertiaApp({
             .use(plugin)
             .use(ZiggyVue)
             .use(HasRolePlugin)
-            .use(PrimeVue, { unstyled: true })
             .mount(el);
     },
     progress: {

src/resources/js/features/anime/filter/range/AnimeRangeFilter.vue

@@ -17,14 +17,7 @@ defineExpose();
 
 <template>
     <label class="block text-sm font-medium text-gray-700 mb-2">{{ name }}</label>
-    <Slider
-        class="w-64"
-        v-model="model"
-        :min="min"
-        :max="max"
-        range
-        @change="emit('change', model)"
-    />
+    <Slider v-model="model" :min="min" :max="max" @change="emit('change', $event)" />
 </template>
 
 <style scoped></style>

src/resources/js/shared/ui/slider/Slider.vue

@@ -1,16 +1,52 @@
 <script setup lang="ts">
-import Slider, { SliderProps } from 'primevue/slider';
+import { type HTMLAttributes, computed } from 'vue';
 
-type Props = SliderProps;
+import {
+    SliderRange,
+    SliderRoot,
+    type SliderRootEmits,
+    type SliderRootProps,
+    SliderThumb,
+    SliderTrack,
+    useForwardPropsEmits,
+} from 'radix-vue';
 
-const props = defineProps<Props>();
-const model = defineModel<number[]>();
+import { cn } from '@/shared/helpers/tailwind';
 
-defineExpose();
+const props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<SliderRootEmits>();
+
+const delegatedProps = computed(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-    <Slider v-bind="props" v-model="model" />
+    <SliderRoot
+        :class="
+            cn(
+                'relative flex w-full touch-none select-none items-center data-[orientation=vertical]:flex-col data-[orientation=vertical]:w-2 data-[orientation=vertical]:h-full',
+                props.class
+            )
+        "
+        v-bind="forwarded"
+    >
+        <SliderTrack
+            class="relative h-2 w-full data-[orientation=vertical]:w-2 grow overflow-hidden rounded-full bg-secondary"
+        >
+            <SliderRange
+                class="absolute h-full data-[orientation=vertical]:w-full bg-primary"
+            />
+        </SliderTrack>
+        <SliderThumb
+            v-for="(_, key) in modelValue"
+            :key="key"
+            class="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+        />
+    </SliderRoot>
 </template>
-
-<style scoped></style>

src/resources/js/widgets/anime/search-filters/AnimeSearchFilters.vue

@@ -52,7 +52,7 @@ watchEffect(() => {
                 v-model="yearsRange"
                 :min="years.min"
                 :max="years.max"
-                @change="emit('updateFilters', data)"
+                @change="emit('updateFilters', $event)"
             />
 
             <div class="flex justify-between text-sm text-gray-600">

src/tailwind.config.js

@@ -10,7 +10,6 @@ export default {
         './storage/framework/views/*.php',
         './resources/views/**/*.blade.php',
         './resources/js/**/*.{ts,tsx,vue}',
-        './node_modules/primevue/**/*.{vue,js,ts,jsx,tsx}',
     ],
 
     theme: {