mirror of
https://github.com/directus/directus.git
synced 2026-04-25 03:00:53 -04:00
Add date(time) interface (#499)
* Add localized-format util * Add active prop to v-input * Add strings for datetime interface * Add overflow-scroll prop to v-menu * Add close-on-content-click prop to v-select * Add datetime interface * Show display value synced with prop * Sync value with prop * Set lang after user hydration * Add NL date-fns lang to test datetime * Fix locale fetching in date-fns * Dont stage value if year isnt fully filled out * Localize date fns based on shared util * Handle type, render type based display * Don't use exact on v-list-item * Pass type to interface on v-form
This commit is contained in:
@@ -22,17 +22,18 @@ Renders a dropdown input.
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Description | Default |
|
||||
|-----------------|-----------------------------------------------------|---------|
|
||||
| `items`\* | Items to render in the select | |
|
||||
| `itemText` | What item value to use for the display text | `text` |
|
||||
| `itemValue` | What item value to use for the item value | `value` |
|
||||
| `value` | Currently selected item(s) | |
|
||||
| `multiple` | Allow multiple items to be selected | `false` |
|
||||
| `placeholder` | What placeholder to show when no items are selected | |
|
||||
| `full-width` | Render the select at full width | |
|
||||
| `disabled` | Disable the select | |
|
||||
| `show-deselect` | Show the deselect option when a value has been set | |
|
||||
| Prop | Description | Default |
|
||||
|--------------------------|-----------------------------------------------------|---------|
|
||||
| `items`\* | Items to render in the select | |
|
||||
| `itemText` | What item value to use for the display text | `text` |
|
||||
| `itemValue` | What item value to use for the item value | `value` |
|
||||
| `value` | Currently selected item(s) | |
|
||||
| `multiple` | Allow multiple items to be selected | `false` |
|
||||
| `placeholder` | What placeholder to show when no items are selected | |
|
||||
| `full-width` | Render the select at full width | |
|
||||
| `disabled` | Disable the select | |
|
||||
| `show-deselect` | Show the deselect option when a value has been set | |
|
||||
| `close-on-content-click` | Close the select when selecting a value | `true` |
|
||||
|
||||
|
||||
## Events
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
<template>
|
||||
<v-menu :disabled="disabled" class="v-select" attached>
|
||||
<template #activator="{ toggle }">
|
||||
<v-menu
|
||||
:disabled="disabled"
|
||||
class="v-select"
|
||||
attached
|
||||
:close-on-content-click="closeOnContentClick"
|
||||
>
|
||||
<template #activator="{ toggle, active }">
|
||||
<v-input
|
||||
:full-width="fullWidth"
|
||||
readonly
|
||||
@@ -8,6 +13,7 @@
|
||||
@click="toggle"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
:active="active"
|
||||
>
|
||||
<template #prepend><slot name="prepend" /></template>
|
||||
<template #append><v-icon name="expand_more" /></template>
|
||||
@@ -48,7 +54,11 @@
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
|
||||
<v-list-item v-if="allowOther && multiple === false" :active="usesOtherValue">
|
||||
<v-list-item
|
||||
v-if="allowOther && multiple === false"
|
||||
:active="usesOtherValue"
|
||||
@click.stop
|
||||
>
|
||||
<v-list-item-content>
|
||||
<input
|
||||
class="other-input"
|
||||
@@ -64,6 +74,7 @@
|
||||
v-for="otherValue in otherValues"
|
||||
:key="otherValue.key"
|
||||
:active="(value || []).includes(otherValue.value)"
|
||||
@click.stop
|
||||
>
|
||||
<v-list-item-icon>
|
||||
<v-checkbox
|
||||
@@ -157,6 +168,10 @@ export default defineComponent({
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
closeOnContentClick: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const { _items } = useItems();
|
||||
|
||||
Reference in New Issue
Block a user