97 lines
2.4 KiB
Vue
97 lines
2.4 KiB
Vue
<script setup>
|
|
import { computed, defineProps } from "vue";
|
|
import { twMerge } from "tailwind-merge";
|
|
|
|
const props = defineProps({
|
|
label: String,
|
|
name: String,
|
|
placeholder: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
value: String,
|
|
isTopLabelExist: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
isBottomLabelExist: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
required: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
readonly: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
className: String,
|
|
width: String,
|
|
type: {
|
|
default: "text",
|
|
type: String,
|
|
},
|
|
});
|
|
|
|
const curWidth = computed(() => {
|
|
if (props.width) {
|
|
return {
|
|
style: {
|
|
width: `${props.width}px`,
|
|
},
|
|
class: "",
|
|
};
|
|
} else {
|
|
return {
|
|
class: "w-80 max-w-sm",
|
|
};
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<label
|
|
:class="twMerge('form-control', className, curWidth.class)"
|
|
:style="curWidth.style"
|
|
>
|
|
<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>
|
|
<slot name="icon"> </slot>
|
|
<input
|
|
v-if="name"
|
|
:type="type"
|
|
:name="name || 'input'"
|
|
:placeholder="placeholder"
|
|
v-model="value[name]"
|
|
:disabled="disabled"
|
|
:readonly="readonly"
|
|
:required="required"
|
|
class="text-lg text-white bg-transparent w-full input input-bordered rounded-md px-3 border-info focus-within:border-info read-only:bg-base-300 read-only:text-zinc-300 read-only:border-0 read-only:focus-within:outline-0 read-only:focus:outline-0"
|
|
/>
|
|
<input
|
|
v-else
|
|
type="text"
|
|
:name="name || 'input'"
|
|
:placeholder="placeholder"
|
|
:value="value"
|
|
:disabled="disabled"
|
|
:readonly="readonly"
|
|
:required="required"
|
|
class="text-lg text-white bg-transparent w-full input input-bordered rounded-md px-3 border-info focus-within:border-info read-only:bg-base-300 read-only:text-zinc-500 read-only:border-0 read-only:focus-within:outline-0 read-only:focus:outline-0"
|
|
/>
|
|
<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>
|