refactor(search): command palette design (#463)

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"