homebox/frontend/components/Form/TextArea.vue
Hayden 75c633dcb5
frontend: cleanup
* dummy commit

* cleanup workflows

* setup and run eslint

* add linter to CI

* use eslint for formatting

* reorder rules

* drop editor config
2022-09-09 14:46:53 -08:00

58 lines
1.4 KiB
Vue

<template>
<div v-if="!inline" class="form-control">
<label class="label">
<span class="label-text">{{ label }}</span>
</label>
<textarea v-model="value" class="textarea textarea-bordered h-24" :placeholder="placeholder" />
<label v-if="limit" class="label">
<span class="label-text-alt"></span>
<span class="label-text-alt"> {{ valueLen }}/{{ limit }}</span>
</label>
</div>
<div v-else class="sm:grid sm:grid-cols-4 sm:items-start sm:gap-4">
<label class="label">
<span class="label-text">{{ label }}</span>
</label>
<textarea
v-model="value"
class="textarea textarea-bordered col-span-3 mt-3 h-24"
auto-grow
:placeholder="placeholder"
/>
</div>
</template>
<script lang="ts" setup>
const emit = defineEmits(["update:modelValue"]);
const props = defineProps({
modelValue: {
type: [String],
required: true,
},
label: {
type: String,
required: true,
},
type: {
type: String,
default: "text",
},
limit: {
type: [Number, String],
default: null,
},
placeholder: {
type: String,
default: "",
},
inline: {
type: Boolean,
default: false,
},
});
const value = useVModel(props, "modelValue", emit);
const valueLen = computed(() => {
return value.value ? value.value.length : 0;
});
</script>