mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-04-20 06:55:06 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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

Browse source
This commit is contained in:
Corentin THOMASSET 2023-06-19 00:21:36 +02:00 • committed by Corentin Thomasset
parent 732da08157
commit bcb98b359c
No known key found for this signature in database
GPG key ID: DBD997E935996158
18 changed files with 576 additions and 386 deletions
Download patch file Download diff file Expand all files Collapse all files

42
src/ui/c-input-text/c-input-text.vue
View file

@ -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"