aboutsummaryrefslogtreecommitdiff
path: root/src/ui/c-input-text
diff options
context:
space:
mode:
authorGravatar Corentin THOMASSET <corentin.thomasset74@gmail.com> 2023-06-19 00:21:36 +0200
committerGravatar Corentin Thomasset <corentin.thomasset74@gmail.com> 2023-06-19 00:35:50 +0200
commitbcb98b359c1a7fa39ee2bd72776dbb0434de150e (patch)
treeb17f8970d34fd7cdb5393a3703fb5dcc8d7b375c /src/ui/c-input-text
parent732da08157a1bec9e203d40bba06cc67e28f29b4 (diff)
downloadit-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.vue42
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"