Skip to content

Commit

Permalink
feat(NcActionInput): v9 model compatibility
Browse files Browse the repository at this point in the history 
Signed-off-by: Grigorii K. Shartsev <[email protected]>
  • Loading branch information
@ShGKme
ShGKme committed Oct 31, 2024
1 parent f30f126 commit 04e17bb
Showing 1 changed file with 53 additions and 27 deletions.
80 changes: 53 additions & 27 deletions src/components/NcActionInput/NcActionInput.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,12 @@ For the `NcSelect` component, all events will be passed through. Please see the
```vue
<template>
<NcActions>
<NcActionInput :value.sync="text" :label-outside="true" label="Label outside the input">
<NcActionInput v-model="text" :label-outside="true" label="Label outside the input">
<template #icon>
<Pencil :size="20" />
</template>
</NcActionInput>
<NcActionInput :value.sync="text" :show-trailing-button="false" label="Input without trailing button">
<NcActionInput v-model="text" :show-trailing-button="false" label="Input without trailing button">
<template #icon>
<Pencil :size="20" />
</template>
Expand All @@ -30,25 +30,25 @@ For the `NcSelect` component, all events will be passed through. Please see the
</template>
This is the placeholder
</NcActionInput>
<NcActionInput type="password" :value.sync="text" label="Password with visible label">
<NcActionInput type="password" v-model="text" label="Password with visible label">
<template #icon>
<Key :size="20" />
</template>
Password placeholder
</NcActionInput>
<NcActionInput type="password" :value.sync="text" :show-trailing-button="false">
<NcActionInput type="password" v-model="text" :show-trailing-button="false">
<template #icon>
<Key :size="20" />
</template>
Password placeholder
</NcActionInput>
<NcActionInput type="color" :value.sync="color" label="Favorite color">
<NcActionInput type="color" v-model="color" label="Favorite color">
<template #icon>
<Eyedropper :size="20" />
</template>
Color placeholder
</NcActionInput>
<NcActionInput label="Visible label" :value.sync="text">
<NcActionInput label="Visible label" v-model="text">
<template #icon>
<Pencil :size="20" />
</template>
Expand All @@ -59,19 +59,20 @@ For the `NcSelect` component, all events will be passed through. Please see the
<Close :size="20" />
</template>
</NcActionInput>
<NcActionInput type="date" isNativePicker :value="new Date()">
<NcActionInput type="date" isNativePicker v-model="date">
<template #icon>
<Pencil :size="20" />
</template>
Please pick a date
</NcActionInput>
<NcActionInput type="date">
<NcActionInput v-model="date" type="date">
<template #icon>
<Pencil :size="20" />
</template>
Please pick a date
</NcActionInput>
<NcActionInput
v-model="multiSelected"
type="multiselect"
input-label="Fruit selection"
:options="['Apple', 'Banana', 'Cherry']">
Expand Down Expand Up @@ -113,6 +114,7 @@ For the `NcSelect` component, all events will be passed through. Please see the
color: '#0082C9',
text: 'This is the input text',
multiSelected: [],
date: new Date(),
}
},
}
Expand Down Expand Up @@ -154,7 +156,7 @@ For the `NcSelect` component, all events will be passed through. Please see the

<NcDateTimePicker v-if="datePickerType"
ref="datetimepicker"
:value="value"
:value="model"
style="z-index: 99999999999;"
:placeholder="text"
:disabled="disabled"
Expand All @@ -167,16 +169,16 @@ For the `NcSelect` component, all events will be passed through. Please see the

<NcDateTimePickerNative v-else-if="isNativePicker"
:id="idNativeDateTimePicker"
:value="value"
:value="model"
:type="nativeDatePickerType"
:input-class="{ focusable: isFocusable }"
class="action-input__datetimepicker"
v-bind="$attrs"
@input="$emit('input', $event)"
@update:model-value="model = $event"
@change="$emit('change', $event)" />

<NcSelect v-else-if="isMultiselectType"
:value="value"
:value="model"
:placeholder="text"
:disabled="disabled"
:append-to-body="$attrs.appendToBody || $attrs['append-to-body'] || false"
Expand All @@ -187,7 +189,7 @@ For the `NcSelect` component, all events will be passed through. Please see the

<NcPasswordField v-else-if="type==='password'"
:id="inputId"
:value="value"
:value="model"
:label="label"
:label-outside="!label || labelOutside"
:placeholder="text"
Expand All @@ -208,13 +210,13 @@ For the `NcSelect` component, all events will be passed through. Please see the
</label>
<div class="action-input__input-container">
<NcColorPicker id="inputId"
:value="value"
:value="model"
class="colorpicker__trigger"
v-bind="$attrs"
v-on="$listeners"
@input="onInput"
@update:model-value="onInput"
@submit="$refs.form.requestSubmit()">
<button :style="{'background-color': value}"
<button :style="{'background-color': model}"
class="colorpicker__preview"
:class="{ focusable: isFocusable }" />
</NcColorPicker>
Expand All @@ -223,7 +225,7 @@ For the `NcSelect` component, all events will be passed through. Please see the

<NcTextField v-else
:id="inputId"
:value="value"
:value="model"
:label="label"
:label-outside="!label || labelOutside"
:placeholder="text"
Expand Down Expand Up @@ -254,6 +256,7 @@ import NcTextField from '../NcTextField/index.js'
import ActionGlobalMixin from '../../mixins/actionGlobal.js'
import GenRandomId from '../../utils/GenRandomId.js'
import { t } from '../../l10n.js'
import { useModelMigration } from '../../composables/useModelMigration.ts'
export default {
name: 'NcActionInput',
Expand All @@ -269,8 +272,8 @@ export default {
mixins: [ActionGlobalMixin],
model: {
prop: 'value',
event: 'update:value',
prop: 'modelValue',
event: 'update:modelValue',
},
props: {
Expand Down Expand Up @@ -340,9 +343,17 @@ export default {
default: true,
},
/**
* value attribute of the input field
* Removed in v9 - use `update:modelValue` (`v-model`) instead
* @deprecated
*/
value: {
type: [String, Date, Number, Array],
default: undefined,
},
/**
* value attribute of the input field
*/
modelValue: {
type: [String, Date, Number, Array],
default: '',
},
Expand Down Expand Up @@ -389,9 +400,29 @@ export default {
'input',
'submit',
'change',
/**
* Removed in v9 - use `update:modelValue` (`v-model`) instead
* @deprecated
*/
'update:value',
/**
* Emitted when the inputs value changes
* ! DatetimePicker only send the value
*
* @type {string|Date}
*/
'update:modelValue',
/** Same as `update:modelValue` but with a different event name */
'update:model-value',
],
setup() {
const model = useModelMigration('value', 'update:value')
return {
model,
}
},
computed: {
isIconUrl() {
try {
Expand Down Expand Up @@ -455,13 +486,8 @@ export default {
* @type {Event|Date}
*/
this.$emit('input', event)
/**
* Emitted when the inputs value changes
* ! DatetimePicker only send the value
*
* @type {string|Date}
*/
this.$emit('update:value', event.target ? event.target.value : event)
this.model = event.target ? event.target.value : event
},
onSubmit(event) {
event.preventDefault()
Expand Down

0 comments on commit 04e17bb

Please sign in to comment.