57 lines
1.4 KiB
Vue
57 lines
1.4 KiB
Vue
<script setup>
|
|
import { defineProps } from "vue";
|
|
import { twMerge } from "tailwind-merge";
|
|
|
|
const props = defineProps({
|
|
name: String,
|
|
value: String,
|
|
items: Array,
|
|
isLabelExist: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
required: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
readonly: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="form-control w-80 max-w-sm">
|
|
<div :class="twMerge(isLabelExist ? 'label' : '')">
|
|
<span class="label-text text-lg"><slot name="topLeft"></slot></span>
|
|
<span class="label-text-alt"> <slot name="topRight"></slot></span>
|
|
</div>
|
|
<div class="flex flex-wrap">
|
|
<label
|
|
v-for="item in items"
|
|
:key="item.key"
|
|
class="label cursor-pointer mr-5"
|
|
>
|
|
<input
|
|
type="radio"
|
|
:name="name || 'radio'"
|
|
v-model="value[name]"
|
|
class="radio radio-info border-info rounded-full mr-3"
|
|
:value="item.value"
|
|
:required="required"
|
|
:readonly="readonly"
|
|
/>
|
|
<span class="label-text text-xl">{{ item.title }}</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div :class="twMerge(isLabelExist ? 'label' : '')">
|
|
<span class="label-text-alt"> <slot name="bottomLeft"></slot></span>
|
|
<span class="label-text-alt"> <slot name="bottomRight"></slot></span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped></style>
|