forked from geolba/tethys.backend
145 lines
3.2 KiB
Vue
145 lines
3.2 KiB
Vue
<script setup>
|
|
import { computed, ref, onMounted, onBeforeUnmount } from 'vue';
|
|
import { MainService } from '@/Stores/main';
|
|
import FormControlIcon from '@/Components/FormControlIcon.vue';
|
|
const props = defineProps({
|
|
name: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
id: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
autocomplete: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
inputmode: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
icon: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
options: {
|
|
type: Array,
|
|
default: null,
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: 'text',
|
|
},
|
|
modelValue: {
|
|
type: [String, Number, Boolean, Array, Object],
|
|
default: '',
|
|
},
|
|
required: Boolean,
|
|
borderless: Boolean,
|
|
transparent: Boolean,
|
|
ctrlKFocus: Boolean,
|
|
});
|
|
const emit = defineEmits(['update:modelValue', 'setRef']);
|
|
const computedValue = computed({
|
|
get: () => props.modelValue,
|
|
set: (value) => {
|
|
emit('update:modelValue', value);
|
|
},
|
|
});
|
|
const inputElClass = computed(() => {
|
|
const base = [
|
|
'px-3 py-2 max-w-full focus:ring focus:outline-none border-gray-700 rounded w-full',
|
|
'dark:placeholder-gray-400',
|
|
computedType.value === 'textarea' ? 'h-24' : 'h-12',
|
|
props.borderless ? 'border-0' : 'border',
|
|
props.transparent ? 'bg-transparent' : 'bg-white dark:bg-slate-800',
|
|
];
|
|
if (props.icon) {
|
|
base.push('pl-10');
|
|
}
|
|
return base;
|
|
});
|
|
const computedType = computed(() => (props.options ? 'select' : props.type));
|
|
const controlIconH = computed(() => (props.type === 'textarea' ? 'h-full' : 'h-12'));
|
|
const mainService = MainService();
|
|
const selectEl = ref(null);
|
|
const textareaEl = ref(null);
|
|
const inputEl = ref(null);
|
|
onMounted(() => {
|
|
if (selectEl.value) {
|
|
emit('setRef', selectEl.value);
|
|
} else if (textareaEl.value) {
|
|
emit('setRef', textareaEl.value);
|
|
} else {
|
|
emit('setRef', inputEl.value);
|
|
}
|
|
});
|
|
if (props.ctrlKFocus) {
|
|
const fieldFocusHook = (e) => {
|
|
if (e.ctrlKey && e.key === 'k') {
|
|
e.preventDefault();
|
|
inputEl.value.focus();
|
|
} else if (e.key === 'Escape') {
|
|
inputEl.value.blur();
|
|
}
|
|
};
|
|
onMounted(() => {
|
|
if (!mainService.isFieldFocusRegistered) {
|
|
window.addEventListener('keydown', fieldFocusHook);
|
|
mainService.isFieldFocusRegistered = true;
|
|
} else {
|
|
// console.error('Duplicate field focus event')
|
|
}
|
|
});
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener('keydown', fieldFocusHook);
|
|
mainService.isFieldFocusRegistered = false;
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="relative">
|
|
<select
|
|
v-if="computedType === 'select'"
|
|
:id="id"
|
|
v-model="computedValue"
|
|
:name="name"
|
|
:class="inputElClass"
|
|
>
|
|
<option v-for="option in options" :key="option.id ?? option" :value="option">
|
|
{{ option.label ?? option }}
|
|
</option>
|
|
</select>
|
|
<textarea
|
|
v-else-if="computedType === 'textarea'"
|
|
:id="id"
|
|
v-model="computedValue"
|
|
:class="inputElClass"
|
|
:name="name"
|
|
:placeholder="placeholder"
|
|
:required="required"
|
|
/>
|
|
<input
|
|
v-else
|
|
:id="id"
|
|
ref="inputEl"
|
|
v-model="computedValue"
|
|
:name="name"
|
|
:inputmode="inputmode"
|
|
:autocomplete="autocomplete"
|
|
:required="required"
|
|
:placeholder="placeholder"
|
|
:type="computedType"
|
|
:class="inputElClass"
|
|
/>
|
|
<FormControlIcon v-if="icon" :icon="icon" :h="controlIconH" />
|
|
<slot />
|
|
</div>
|
|
</template>
|