skytek_xinliang
8af82f5900
Update documentation rules for GUIDE.md files to keep higher-level guides focused on constraints, conventions, and indexes. Add base and section component guides to the LLM development index, clarify component layering responsibilities, and fix architecture references from README to GUIDE.md.docs: reorganize component guide structure and indexes Update documentation rules for GUIDE.md files to keep higher-level guides focused on constraints, conventions, and indexes. Add base and section component guides to the LLM development index, clarify component layering responsibilities, and fix architecture references from README to GUIDE.md.
44 lines
941 B
Vue
44 lines
941 B
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps<{
|
|
label?: string
|
|
labelCharCount?: number
|
|
prependMarginEnd?: number
|
|
readonly?: boolean
|
|
}>()
|
|
|
|
const modelValue = defineModel<string>({ required: true })
|
|
|
|
const prependMinWidth = computed(() =>
|
|
props.labelCharCount != null ? `${props.labelCharCount * 0.785}rem` : undefined
|
|
)
|
|
|
|
const marginEndStyle = computed(() => `${props.prependMarginEnd ?? 8}px`)
|
|
</script>
|
|
|
|
<template>
|
|
<v-text-field
|
|
v-model="modelValue"
|
|
variant="outlined"
|
|
density="compact"
|
|
hide-details
|
|
:readonly="readonly"
|
|
>
|
|
<template v-if="label" #prepend>
|
|
<span
|
|
class="text-title-small"
|
|
:style="prependMinWidth ? { minWidth: prependMinWidth } : undefined"
|
|
>
|
|
{{ label }}
|
|
</span>
|
|
</template>
|
|
</v-text-field>
|
|
</template>
|
|
|
|
<style scoped>
|
|
:deep(.v-input__prepend) {
|
|
margin-inline-end: v-bind(marginEndStyle);
|
|
}
|
|
</style>
|