Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: forward compatibility with v9 on v-model props/events #6172

Merged
merged 10 commits into from
Nov 5, 2024
Merged

feat: forward compatibility with v9 on v-model props/events #6172

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
12bbcdc
chore: add useModelMigration composable
ShGKme Oct 29, 2024
297627e
feat: v9 model compatibility for NcActionCheckbox, NcActionRadio, NcC…
ShGKme Oct 30, 2024
78857b9
feat: v9 compatibility for text inputs
ShGKme Oct 31, 2024
20a4b85
feat: v9 model compatibility in NcSelect* components
ShGKme Oct 31, 2024
1367c9b
feat(NcColorPicker): v9 model compatibility
ShGKme Oct 31, 2024
9022778
feat(NcDateTimePicker): v9 model compatibility
ShGKme Oct 31, 2024
76454a4
feat(NcDateTimePickerNative): v9 model compatibility
ShGKme Oct 31, 2024
33623b2
feat(NcTimezonePicker): v9 model compatibility
ShGKme Oct 31, 2024
f30f126
feat(NcSettingsInputText): v9 model compatibility
ShGKme Oct 31, 2024
04e17bb
feat(NcActionInput): v9 model compatibility
ShGKme Oct 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 36 additions & 13 deletions src/components/NcActionCheckbox/NcActionCheckbox.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ This component is made to be used inside of the [NcActions](#NcActions) componen
<template>
<NcActions>
<NcActionCheckbox @change="alert('(un)checked !')">First choice</NcActionCheckbox>
<NcActionCheckbox value="second" v-model="checkboxValue" @change="alert('(un)checked !')">Second choice (v-model)</NcActionCheckbox>
<NcActionCheckbox :checked="true" @change="alert('(un)checked !')">Third choice (checked)</NcActionCheckbox>
<NcActionCheckbox v-model="checkboxValue" value="second" @change="alert('(un)checked !')">Second choice (v-model)</NcActionCheckbox>
<NcActionCheckbox :model-value="checkboxValue" @change="alert('(un)checked !')">Third choice (checked)</NcActionCheckbox>
<NcActionCheckbox :disabled="true" @change="alert('(un)checked !')">Fourth choice (disabled)</NcActionCheckbox>
</NcActions>
</template>
Expand Down Expand Up @@ -40,7 +40,7 @@ export default {
<input :id="id"
ref="checkbox"
:disabled="disabled"
:checked="checked"
:checked="model"
:value="value"
:class="{ focusable: isFocusable }"
type="checkbox"
Expand All @@ -56,6 +56,7 @@ export default {
</template>

<script>
import { useModelMigration } from '../../composables/useModelMigration.ts'
import ActionGlobalMixin from '../../mixins/actionGlobal.js'
import GenRandomId from '../../utils/GenRandomId.js'

Expand All @@ -72,8 +73,8 @@ export default {
},

model: {
prop: 'checked',
event: 'update:checked',
prop: 'modelValue',
event: 'update:modelValue',
},

props: {
Expand All @@ -87,9 +88,18 @@ export default {
},

/**
* checked state of the the checkbox element
* Removed in v9 - use `modelValue` (`v-model`) instead
* @deprecated
*/
checked: {
type: Boolean,
default: undefined,
},

/**
* checked state of the the checkbox element
*/
modelValue: {
type: Boolean,
default: false,
},
Expand All @@ -115,9 +125,27 @@ export default {
'change',
'check',
'uncheck',
/**
* Removed in v9 - use `update:modelValue` (`v-model`) instead
* @deprecated
*/
'update:checked',
/**
* Emitted when the checkbox state is changed
* @type {boolean}
*/
'update:modelValue',
/** Same as update:modelValue for Vue 2 compatibility */
'update:model-value',
],

setup() {
const model = useModelMigration('checked', 'update:checked')
return {
model,
}
},

computed: {
/**
* determines if the action is focusable
Expand All @@ -135,7 +163,7 @@ export default {
*/
ariaChecked() {
if (this.isInSemanticMenu) {
return this.checked ? 'true' : 'false'
return this.model ? 'true' : 'false'
}
return undefined
},
Expand All @@ -147,12 +175,7 @@ export default {
this.$refs.label.click()
},
onChange(event) {
/**
* Emitted when the checkbox state is changed
*
* @type {boolean}
*/
this.$emit('update:checked', this.$refs.checkbox.checked)
this.model = this.$refs.checkbox.checked

/**
* Emitted when the checkbox state is changed
Expand Down
80 changes: 53 additions & 27 deletions src/components/NcActionInput/NcActionInput.vue
View file
Open in desktop
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
Loading
Loading