Skip to content

Commit

Permalink
Merge pull request #4994 from nextcloud-libraries/feat/noid/model-value
Browse files Browse the repository at this point in the history 
[next] feat!: rename `checked` prop to `modelValue`
  • Loading branch information
@raimund-schluessler
raimund-schluessler authored Dec 26, 2023
2 parents 37ba42e + 8dc7876 commit 8916a34
Show file tree
Hide file tree
Showing 8 changed files with 60 additions and 60 deletions.
12 changes: 6 additions & 6 deletions src/components/NcActionCheckbox/NcActionCheckbox.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ This component is made to be used inside of the [NcActions](#NcActions) componen
<NcActions>
<NcActionCheckbox @change="alert('(un)checked !')">First choice</NcActionCheckbox>
<NcActionCheckbox value="second" @change="alert('(un)checked !')">Second choice</NcActionCheckbox>
<NcActionCheckbox :checked="true" @change="alert('(un)checked !')">Third choice (checked)</NcActionCheckbox>
<NcActionCheckbox :model-value="true" @change="alert('(un)checked !')">Third choice (checked)</NcActionCheckbox>
<NcActionCheckbox :disabled="true" @change="alert('(un)checked !')">Second choice (disabled)</NcActionCheckbox>
</NcActions>
```
Expand All @@ -40,7 +40,7 @@ This component is made to be used inside of the [NcActions](#NcActions) componen
<input :id="id"
ref="checkbox"
:disabled="disabled"
:checked="checked"
:checked="modelValue"
:value="value"
:class="{ focusable: isFocusable }"
type="checkbox"
Expand Down Expand Up @@ -84,7 +84,7 @@ export default {
/**
* checked state of the the checkbox element
*/
checked: {
modelValue: {
type: Boolean,
default: false,
},
Expand All @@ -110,7 +110,7 @@ export default {
'change',
'check',
'uncheck',
'update:checked',
'update:modelValue',
],
computed: {
Expand All @@ -130,7 +130,7 @@ export default {
*/
ariaChecked() {
if (this.isInSemanticMenu) {
return this.checked ? 'true' : 'false'
return this.modelValue ? 'true' : 'false'
}
return undefined
},
Expand All @@ -147,7 +147,7 @@ export default {
*
* @type {boolean}
*/
this.$emit('update:checked', this.$refs.checkbox.checked)
this.$emit('update:modelValue', this.$refs.checkbox.checked)
/**
* Emitted when the checkbox state is changed
Expand Down
12 changes: 6 additions & 6 deletions src/components/NcActionRadio/NcActionRadio.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ So that only one of each name set can be selected at the same time.
<NcActions>
<NcActionRadio @change="alert('(un)checked !')" name="uniqueId">First choice</NcActionRadio>
<NcActionRadio value="second" name="uniqueId" @change="alert('(un)checked !')">Second choice</NcActionRadio>
<NcActionRadio :checked="true" name="uniqueId" @change="alert('(un)checked !')">Third choice (checked)</NcActionRadio>
<NcActionRadio :model-value="true" name="uniqueId" @change="alert('(un)checked !')">Third choice (checked)</NcActionRadio>
<NcActionRadio :disabled="true" name="uniqueId" @change="alert('(un)checked !')">Second choice (disabled)</NcActionRadio>
</NcActions>
```
Expand All @@ -42,7 +42,7 @@ So that only one of each name set can be selected at the same time.
<input :id="id"
ref="radio"
:disabled="disabled"
:checked="checked"
:checked="modelValue"
:name="name"
:value="value"
:class="{ focusable: isFocusable }"
Expand Down Expand Up @@ -87,7 +87,7 @@ export default {
/**
* checked state of the the radio element
*/
checked: {
modelValue: {
type: Boolean,
default: false,
},
Expand Down Expand Up @@ -120,8 +120,8 @@ export default {
},
emits: [
'update:checked',
'change',
'update:modelValue',
],
computed: {
Expand All @@ -141,7 +141,7 @@ export default {
*/
ariaChecked() {
if (this.isInSemanticMenu) {
return this.checked ? 'true' : 'false'
return this.modelValue ? 'true' : 'false'
}
return undefined
},
Expand All @@ -158,7 +158,7 @@ export default {
*
* @type {boolean}
*/
this.$emit('update:checked', this.$refs.radio.checked)
this.$emit('update:modelValue', this.$refs.radio.checked)
/**
* Emitted when the radio state is changed
Expand Down
6 changes: 3 additions & 3 deletions src/components/NcAppSidebar/NcAppSidebar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,9 +117,9 @@ export default {
```vue
<template>
<div>
<NcCheckboxRadioSwitch v-model:checked="showTabs[0]">Show search tab</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch v-model:checked="showTabs[1]">Show settings tab</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch v-model:checked="showTabs[2]">Show sharing tab</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch v-model="showTabs[0]">Show search tab</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch v-model="showTabs[1]">Show settings tab</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch v-model="showTabs[2]">Show sharing tab</NcCheckboxRadioSwitch>
<NcAppSidebar
name="cat-picture.jpg"
subname="last edited 3 weeks ago">
Expand Down
4 changes: 2 additions & 2 deletions src/components/NcAppSidebar/NcAppSidebarTabs.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,15 +43,15 @@
:aria-controls="`tab-${tab.id}`"
:aria-selected="String(activeTab === tab.id)"
:button-variant="true"
:checked="activeTab === tab.id"
:model-value="activeTab === tab.id"
:wrapper-id="`tab-button-${tab.id}`"
:tabindex="activeTab === tab.id ? 0 : -1"
button-variant-grouped="horizontal"
class="app-sidebar-tabs__tab"
:class="{ active: tab.id === activeTab }"
role="tab"
type="button"
@update:checked="setActive(tab.id)">
@update:model-value="setActive(tab.id)">
<span class="app-sidebar-tabs__tab-caption">
{{ tab.name }}
</span>
Expand Down
10 changes: 5 additions & 5 deletions src/components/NcButton/NcButton.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,11 @@ It can be used with one or multiple actions.
<div class="wrapper">
<!-- Style selector -->
<div class="grid">
<NcCheckboxRadioSwitch v-model:checked="style" value="text" name="style" type="radio">Text only</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch v-model:checked="style" value="icon" name="style" type="radio">Icon only</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch v-model:checked="style" value="icontext" name="style" type="radio">Icon and text</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch v-model:checked="disabled" type="checkbox">Disabled</NcCheckboxRadioSwitch>
<!--<NcCheckboxRadioSwitch v-model:checked="readonly" type="checkbox">Read-only</NcCheckboxRadioSwitch>-->
<NcCheckboxRadioSwitch v-model="style" value="text" name="style" type="radio">Text only</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch v-model="style" value="icon" name="style" type="radio">Icon only</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch v-model="style" value="icontext" name="style" type="radio">Icon and text</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch v-model="disabled" type="checkbox">Disabled</NcCheckboxRadioSwitch>
<!--<NcCheckboxRadioSwitch v-model="readonly" type="checkbox">Read-only</NcCheckboxRadioSwitch>-->
</div>

<h5>Standard buttons</h5>
Expand Down
62 changes: 31 additions & 31 deletions src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,9 @@ Please have a look at proper usage and recommendations: https://material.io/comp
```vue
<template>
<div>
<NcCheckboxRadioSwitch v-model:checked="sharingEnabled">Enable sharing</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch v-model:checked="sharingEnabled" :disabled="true">Enable sharing (disabled)</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch :checked="sharingEnabled" :loading="loading" @update:checked="onToggle">Enable sharing (with request loading)</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch v-model="sharingEnabled">Enable sharing</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch v-model="sharingEnabled" :disabled="true">Enable sharing (disabled)</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch :model-value="sharingEnabled" :loading="loading" @update:model-value="onToggle">Enable sharing (with request loading)</NcCheckboxRadioSwitch>
<br>
sharingEnabled: {{ sharingEnabled }}
</div>
Expand Down Expand Up @@ -65,8 +65,8 @@ export default {
```vue
<template>
<div>
<NcCheckboxRadioSwitch v-model:checked="sharingPermission" value="r" name="sharing_permission_radio" type="radio">Default permission read</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch v-model:checked="sharingPermission" value="rw" name="sharing_permission_radio" type="radio">Default permission read+write</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch v-model="sharingPermission" value="r" name="sharing_permission_radio" type="radio">Default permission read</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch v-model="sharingPermission" value="rw" name="sharing_permission_radio" type="radio">Default permission read+write</NcCheckboxRadioSwitch>
<br>
sharingPermission: {{ sharingPermission }}
</div>
Expand All @@ -90,7 +90,7 @@ export default {
<div style="display: flex">
<NcCheckboxRadioSwitch
:button-variant="true"
v-model:checked="sharingPermission"
v-model="sharingPermission"
value="r"
name="sharing_permission_radio"
type="radio"
Expand All @@ -99,7 +99,7 @@ export default {
</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch
:button-variant="true"
v-model:checked="sharingPermission"
v-model="sharingPermission"
value="rw"
name="sharing_permission_radio"
type="radio"
Expand All @@ -111,7 +111,7 @@ export default {
<div style="width: fit-content">
<NcCheckboxRadioSwitch
:button-variant="true"
v-model:checked="sharingPermission"
v-model="sharingPermission"
value="r"
name="sharing_permission_radio"
type="radio"
Expand All @@ -120,7 +120,7 @@ export default {
</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch
:button-variant="true"
v-model:checked="sharingPermission"
v-model="sharingPermission"
value="rw"
name="sharing_permission_radio"
type="radio"
Expand Down Expand Up @@ -150,7 +150,7 @@ export default {
<div style="display: flex">
<NcCheckboxRadioSwitch
:button-variant="true"
v-model:checked="enableSettings"
v-model="enableSettings"
value="y"
name="sharing_permission_radio"
type="radio"
Expand All @@ -160,7 +160,7 @@ export default {
</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch
:button-variant="true"
v-model:checked="enableSettings"
v-model="enableSettings"
value="n"
name="sharing_permission_radio"
type="radio"
Expand All @@ -173,7 +173,7 @@ export default {
<div style="width: fit-content">
<NcCheckboxRadioSwitch
:button-variant="true"
v-model:checked="enableSettings"
v-model="enableSettings"
value="y"
name="sharing_permission_radio"
type="radio"
Expand All @@ -183,7 +183,7 @@ export default {
</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch
:button-variant="true"
v-model:checked="enableSettings"
v-model="enableSettings"
value="n"
name="sharing_permission_radio"
type="radio"
Expand Down Expand Up @@ -216,9 +216,9 @@ export default {
```vue
<template>
<div>
<NcCheckboxRadioSwitch :disabled="true" v-model:checked="sharingPermission" value="r" name="sharing_permission">Permission read</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch v-model:checked="sharingPermission" value="w" name="sharing_permission">Permission write</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch v-model:checked="sharingPermission" value="d" name="sharing_permission">Permission delete</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch :disabled="true" v-model="sharingPermission" value="r" name="sharing_permission">Permission read</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch v-model="sharingPermission" value="w" name="sharing_permission">Permission write</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch v-model="sharingPermission" value="d" name="sharing_permission">Permission delete</NcCheckboxRadioSwitch>
<br>
sharingPermission: {{ sharingPermission }}
</div>
Expand All @@ -238,8 +238,8 @@ export default {
```vue
<template>
<div>
<NcCheckboxRadioSwitch v-model:checked="sharingEnabled" type="switch">Enable sharing</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch v-model:checked="sharingEnabled" type="switch" :disabled="true">Enable sharing (disabled)</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch v-model="sharingEnabled" type="switch">Enable sharing</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch v-model="sharingEnabled" type="switch" :disabled="true">Enable sharing (disabled)</NcCheckboxRadioSwitch>
<br>
sharingEnabled: {{ sharingEnabled }}
</div>
Expand Down Expand Up @@ -394,7 +394,7 @@ export default {
/**
* Checked state. To be used with `v-model:value`
*/
checked: {
modelValue: {
type: [Boolean, Array, String],
default: false,
},
Expand Down Expand Up @@ -541,18 +541,18 @@ export default {
*/
isChecked() {
if (this.value !== null) {
if (Array.isArray(this.checked)) {
return [...this.checked].indexOf(this.value) > -1
if (Array.isArray(this.modelValue)) {
return [...this.modelValue].indexOf(this.value) > -1
}
return this.checked === this.value
return this.modelValue === this.value
}
return this.checked === true
return this.modelValue === true
},
},
mounted() {
if (this.name && this.type === TYPE_CHECKBOX) {
if (!Array.isArray(this.checked)) {
if (!Array.isArray(this.modelValue)) {
throw new Error('When using groups of checkboxes, the updated value will be an array.')
}
}
Expand All @@ -563,8 +563,8 @@ export default {
}
// https://material.io/components/checkboxes#usage
if (typeof this.checked !== 'boolean' && this.type === TYPE_SWITCH) {
throw new Error('Switches can only be used with boolean as checked prop.')
if (typeof this.modelValue !== 'boolean' && this.type === TYPE_SWITCH) {
throw new Error('Switches can only be used with boolean as modelValue prop.')
}
},
Expand All @@ -576,27 +576,27 @@ export default {
// If this is a radio, there can only be one value
if (this.type === TYPE_RADIO) {
this.$emit('update:checked', this.value)
this.$emit('update:modelValue', this.value)
return
}
// If this is a radio, there can only be one value
if (this.type === TYPE_SWITCH) {
this.$emit('update:checked', !this.isChecked)
this.$emit('update:modelValue', !this.isChecked)
return
}
// If the initial value was a boolean, let's keep it that way
if (typeof this.checked === 'boolean') {
this.$emit('update:checked', !this.isChecked)
if (typeof this.modelValue === 'boolean') {
this.$emit('update:modelValue', !this.isChecked)
return
}
// Dispatch the checked values as an array if multiple, or single value otherwise
const values = this.getInputsSet()
.filter(input => input.checked)
.map(input => input.value)
this.$emit('update:checked', values)
this.$emit('update:modelValue', values)
},
/**
Expand Down
8 changes: 4 additions & 4 deletions src/components/NcRichText/NcRichText.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,8 @@ This component displays rich text with optional autolink or [Markdown support](h
<template>
<div>
<textarea v-model="text" />
<NcCheckboxRadioSwitch v-model:checked="autolink" type="checkbox">Autolink</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch v-model:checked="useMarkdown" type="checkbox">Use Markdown</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch v-model="autolink" type="checkbox">Autolink</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch v-model="useMarkdown" type="checkbox">Use Markdown</NcCheckboxRadioSwitch>

<NcRichText
:class="{'plain-text': !useMarkdown }"
Expand Down Expand Up @@ -93,8 +93,8 @@ See [NcRichContenteditable](#/Components/NcRichContenteditable) documentation fo
placeholder="Try mentioning user @Test01 or inserting emoji :smile"
@submit="onSubmit" />

<NcCheckboxRadioSwitch v-model:checked="autolink" type="checkbox">Autolink</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch v-model:checked="useMarkdown" type="checkbox">Use Markdown</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch v-model="autolink" type="checkbox">Autolink</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch v-model="useMarkdown" type="checkbox">Use Markdown</NcCheckboxRadioSwitch>

<NcRichText :text="text"
:autolink="autolink"
Expand Down
6 changes: 3 additions & 3 deletions src/components/NcSavingIndicatorIcon/NcSavingIndicatorIcon.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,19 +31,19 @@
</div>
<br />
<div style="display: flex; justify-content: space-around;">
<NcCheckboxRadioSwitch v-model:checked="savingState"
<NcCheckboxRadioSwitch v-model="savingState"
value="saved"
name="saving_radio"
type="radio">
Saved
</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch v-model:checked="savingState"
<NcCheckboxRadioSwitch v-model="savingState"
value="saving"
name="saving_radio"
type="radio">
Saving
</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch v-model:checked="savingState"
<NcCheckboxRadioSwitch v-model="savingState"
value="error"
name="saving_radio"
type="radio">
Expand Down

0 comments on commit 8916a34

Please sign in to comment.