Mamalizz
81 lines
2.9 KiB
Vue
81 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
// types
|
|
|
|
type Props = {
|
|
modelValue: string;
|
|
options: string[];
|
|
placeholder: string;
|
|
};
|
|
|
|
type Emit = {
|
|
"update:modelValue": [value: string];
|
|
};
|
|
|
|
// props
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
const { modelValue } = toRefs(props);
|
|
|
|
// emit
|
|
|
|
const emit = defineEmits<Emit>();
|
|
|
|
// state
|
|
|
|
const selectedValue = computed({
|
|
get: () => modelValue.value,
|
|
set: (value: string) => emit("update:modelValue", value),
|
|
});
|
|
|
|
// watch
|
|
</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="selectedValue ? 'text-black' : 'text-slate-400'"
|
|
class="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>
|