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:
Rijk van Zanten
2020-04-29 10:00:22 -04:00
committed by GitHub
parent fcbe0af502
commit b5d6fdefa2
21 changed files with 520 additions and 69 deletions

View File

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

View File

@@ -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();