86 lines
2.1 KiB
Vue
86 lines
2.1 KiB
Vue
<script setup>
|
|
import { defineProps } from "vue";
|
|
import { twMerge } from "tailwind-merge";
|
|
/* --------------------------------------------------------------
|
|
options: [
|
|
{
|
|
key: unique,
|
|
content: "",
|
|
selected: true / false,
|
|
disabled: true / false
|
|
}
|
|
]
|
|
---------------------------------------------------------------- */
|
|
|
|
const props = defineProps({
|
|
options: Array,
|
|
name: String,
|
|
Attribute: String,
|
|
onChange: Function,
|
|
selectClass: String,
|
|
value: String || Number,
|
|
isTopLabelExist: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
isBottomLabelExist: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
required: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
readonly: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<label class="form-control w-80 max-w-sm">
|
|
<div :class="twMerge(isTopLabelExist ? 'label' : '')">
|
|
<span class="label-text text-lg"><slot name="topLeft"></slot></span>
|
|
<span class="label-text-alt"> <slot name="topRight"></slot></span>
|
|
</div>
|
|
<select
|
|
:disabled="disabled"
|
|
:name="name"
|
|
:class="twMerge('select bg-transparent rounded-md text-lg', selectClass)"
|
|
@change="
|
|
(e) => {
|
|
console.log(e.target.value);
|
|
props.onChange && props.onChange(e.target.value);
|
|
}
|
|
"
|
|
v-model="value[name]"
|
|
:required="required"
|
|
:readonly="readonly"
|
|
>
|
|
<option
|
|
v-for="option in options"
|
|
:key="option.key || option"
|
|
:selected="option.selected"
|
|
:disabled="option.disabled"
|
|
:class="twMerge(disabled ? `text-white` : 'text-dark')"
|
|
:value="option.value || option.key || option"
|
|
>
|
|
<span>
|
|
{{ option[Attribute] || option }}
|
|
</span>
|
|
</option>
|
|
</select>
|
|
<div :class="twMerge(isBottomLabelExist ? 'label' : '')">
|
|
<span class="label-text-alt"> <slot name="bottomLeft"></slot></span>
|
|
<span class="label-text-alt"> <slot name="bottomRight"></slot></span>
|
|
</div>
|
|
</label>
|
|
</template>
|
|
|
|
<style lang="scss" scoped></style>
|