diff options
author | 2023-06-19 00:21:36 +0200 | |
---|---|---|
committer | 2023-06-19 00:35:50 +0200 | |
commit | bcb98b359c1a7fa39ee2bd72776dbb0434de150e (patch) | |
tree | b17f8970d34fd7cdb5393a3703fb5dcc8d7b375c /src/ui/c-input-text | |
parent | 732da08157a1bec9e203d40bba06cc67e28f29b4 (diff) | |
download | it-tools-bcb98b359c1a7fa39ee2bd72776dbb0434de150e.tar.gz it-tools-bcb98b359c1a7fa39ee2bd72776dbb0434de150e.tar.zst it-tools-bcb98b359c1a7fa39ee2bd72776dbb0434de150e.zip |
refactor(search): command palette design (#463)
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" |