added select component

2025-01-28 23:32:05 +03:30
parent e42d7c44f0
commit 22fb981b8a
1 changed files with 81 additions and 0 deletions
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+// types
+
+type Props = {
+    modelValue: string;
+    options: string[];
+    placeholder: string;
+};
+
+type Emit = {
+    "update:modelValue": [value: string];
+};
+
+// props
+
+defineProps<Props>();
+
+// emit
+
+const emit = defineEmits<Emit>();
+
+// state
+
+const selectedValue = ref();
+
+// watch
+
+watch(
+    () => selectedValue.value,
+    (newValue) => {
+        emit("update:modelValue", newValue);
+    }
+);
+</script>
+
+<template>
+    <SelectRoot v-model="selectedValue" dir="rtl">
+        <SelectTrigger
+            class="w-full flex items-center justify-between resize-none bg-slate-50 border-slate-200 hover:border-black focus:border-black h-[10rem] max-h-[12rem] text-black cursor-pointer transition-all border-[1.5px] gap-3 typo-label-md px-4 py-[12.5px] selection:bg-slate-100 rounded-100 outline-none flex-1 !text-sm placeholder-slate-400"
+            aria-label="Customise options"
+        >
+            <SelectValue
+                :placeholder="placeholder"
+                class="text-slate-400 font-iran-yekan-x"
+            />
+            <Icon name="bi:chevron-down" size="16" />
+        </SelectTrigger>
+
+        <SelectPortal>
+            <SelectContent
+                data-side="bottom"
+                class="min-w-[160px] w-full bg-slate-50 border-slate-200 rounded-lg border shadow-sm will-change-[opacity,transform] data-[side=top]:animate-slide-down-fade data-[side=right]:animate-slide-left-fade data-[side=bottom]:animate-slide-up-fade data-[side=left]:animate-slide-right-fade z-[100]"
+                :side-offset="5"
+            >
+                <SelectViewport class="p-[5px]">
+                    <SelectGroup>
+                        <SelectItem
+                            v-for="(option, index) in options"
+                            :key="index"
+                            class="text-xs leading-none w-full rounded-sm py-5 flex items-center justify-between h-[25px] pr-[12px] relative select-none data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-slate-300 data-[highlighted]:text-black"
+                            :value="option"
+                        >
+                            <SelectItemIndicator
+                                class="absolute left-0 w-[25px] inline-flex items-center justify-center"
+                            >
+                                <Icon name="bi:check" size="20" />
+                            </SelectItemIndicator>
+                            <SelectItemText
+                                class="text-end font-iran-yekan-x text-sm"
+                            >
+                                {{ option }}
+                            </SelectItemText>
+                        </SelectItem>
+                    </SelectGroup>
+                </SelectViewport>
+            </SelectContent>
+        </SelectPortal>
+    </SelectRoot>
+</template>
+
+<style scoped></style>