github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-02-16 20:52:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

add "press enter to close" for time inputs (#11705)

Browse Source 
* add "enter to close" for time inputs

* add menu closing to datetime in system filters
This commit is contained in:
Azri Kahar
2022-02-18 23:20:50 +08:00
committed by GitHub
parent 588a5410af
commit 0dadccb822
3 changed files with 42 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/src/interfaces/_system/system-filter/input-component.vue
View File

@@ -36,12 +36,24 @@
placeholder="--"
@input="emitValue($event.target.value)"
/>
<v-menu :close-on-content-click="false" :show-arrow="true" placement="bottom-start" seamless full-height>
<v-menu
ref="dateTimeMenu"
:close-on-content-click="false"
:show-arrow="true"
placement="bottom-start"
seamless
full-height
>
<template #activator="{ toggle }">
<v-icon class="preview" name="event" small @click="toggle" />
</template>
<div class="date-input">
<v-date-picker :type="type" :model-value="value" @update:model-value="emitValue" />
<v-date-picker
:type="type"
:model-value="value"
@update:model-value="emitValue"
@close="dateTimeMenu?.deactivate"
/>
</div>
</v-menu>
</template>
@@ -100,6 +112,8 @@ export default defineComponent({
const inputEl = ref<HTMLElement>();
const { t } = useI18n();
const dateTimeMenu = ref();
const displayValue = computed(() => {
if (props.value === null) return null;
if (props.value === undefined) return null;
@@ -134,7 +148,7 @@ export default defineComponent({
if (props.focus) inputEl.value?.focus();
});
return { displayValue, width, t, emitValue, inputEl, inputPattern };
return { displayValue, width, t, emitValue, inputEl, inputPattern, dateTimeMenu };
function emitValue(val: unknown) {
if (val === '') {

7
app/src/interfaces/datetime/datetime.vue
View File

@@ -1,5 +1,5 @@
<template>
<v-menu :close-on-content-click="false" attached :disabled="disabled" full-height seamless>
<v-menu ref="dateTimeMenu" :close-on-content-click="false" attached :disabled="disabled" full-height seamless>
<template #activator="{ toggle, active }">
<v-input :active="active" clickable readonly :model-value="displayValue" :disabled="disabled" @click="toggle">
<template v-if="!disabled" #append>
@@ -15,6 +15,7 @@
:use-24="use24"
:model-value="value"
@update:model-value="$emit('input', $event)"
@close="dateTimeMenu?.deactivate"
/>
</v-menu>
</template>
@@ -53,6 +54,8 @@ export default defineComponent({
setup(props, { emit }) {
const { t } = useI18n();
const dateTimeMenu = ref();
const { displayValue } = useDisplayValue();
function useDisplayValue() {
@@ -93,7 +96,7 @@ export default defineComponent({
emit('input', null);
}
return { displayValue, unsetValue };
return { displayValue, unsetValue, dateTimeMenu };
},
});
</script>