diff options
Diffstat (limited to 'src/ui/c-input-text')
-rw-r--r-- | src/ui/c-input-text/c-input-text.vue | 42 |
1 files changed, 37 insertions, 5 deletions
diff --git a/src/ui/c-input-text/c-input-text.vue b/src/ui/c-input-text/c-input-text.vue index 513834d..b89d1e4 100644 --- a/src/ui/c-input-text/c-input-text.vue +++ b/src/ui/c-input-text/c-input-text.vue @@ -29,6 +29,7 @@ const props = withDefaults( multiline?: boolean rows?: number | string autosize?: boolean + autofocus?: boolean }>(), { value: '', @@ -54,13 +55,14 @@ const props = withDefaults( multiline: false, rows: 3, autosize: false, + autofocus: false, }, ); const emit = defineEmits(['update:value']); const value = useVModel(props, 'value', emit); const showPassword = ref(false); -const { id, placeholder, label, validationRules, labelPosition, labelWidth, labelAlign, autosize, readonly, disabled, clearable, type, multiline, rows, rawText } = toRefs(props); +const { id, placeholder, label, validationRules, labelPosition, labelWidth, labelAlign, autosize, readonly, disabled, clearable, type, multiline, rows, rawText, autofocus } = toRefs(props); const validation = props.validation @@ -74,12 +76,9 @@ const theme = useTheme(); const appTheme = useAppTheme(); const textareaRef = ref<HTMLTextAreaElement>(); +const inputRef = ref<HTMLInputElement>(); const inputWrapperRef = ref<HTMLElement>(); -defineExpose({ - inputWrapperRef, -}); - watch( value, () => { @@ -107,6 +106,38 @@ const htmlInputType = computed(() => { return 'text'; }); + +function focus() { + if (textareaRef.value) { + textareaRef.value.focus(); + } + + if (inputRef.value) { + inputRef.value.focus(); + } +} + +function blur() { + if (textareaRef.value) { + textareaRef.value.blur?.(); + } + + if (inputRef.value) { + inputRef.value.blur?.(); + } +} + +onMounted(() => { + if (autofocus.value) { + focus(); + } +}); + +defineExpose({ + inputWrapperRef, + focus, + blur, +}); </script> <template> @@ -140,6 +171,7 @@ const htmlInputType = computed(() => { <input v-else :id="id" + ref="inputRef" v-model="value" :type="htmlInputType" class="input" |