mirror of
https://github.com/hay-kot/homebox.git
synced 2024-12-20 22:06:31 +00:00
90813abf76
implenmented a store for each global item and tied it to an event bus and used the listener on the requests object to intercept responses from the API and run the appripriate get call when updates were detected.
72 lines
1.7 KiB
Vue
72 lines
1.7 KiB
Vue
<template>
|
|
<div v-if="!inline" class="form-control w-full">
|
|
<label class="label">
|
|
<span class="label-text">{{ label }}</span>
|
|
</label>
|
|
<textarea ref="el" v-model="value" class="textarea w-full textarea-bordered h-28" :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
|
|
ref="el"
|
|
v-model="value"
|
|
class="textarea textarea-bordered w-full col-span-3 mt-3 h-28"
|
|
auto-grow
|
|
:placeholder="placeholder"
|
|
auto-height
|
|
/>
|
|
</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 el = ref();
|
|
function setHeight() {
|
|
el.value.style.height = "auto";
|
|
el.value.style.height = el.value.scrollHeight + 5 + "px";
|
|
}
|
|
|
|
onUpdated(() => {
|
|
if (props.inline) {
|
|
setHeight();
|
|
}
|
|
});
|
|
|
|
const value = useVModel(props, "modelValue", emit);
|
|
const valueLen = computed(() => {
|
|
return value.value ? value.value.length : 0;
|
|
});
|
|
</script>
|