fix: unify modelValue naming

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
nextcloud-libraries · Dec 23, 2023 · eac4c2e · eac4c2e
1 parent 9f839df
commit eac4c2e
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 45 deletions.
diff --git a/src/components/NcActionCheckbox/NcActionCheckbox.vue b/src/components/NcActionCheckbox/NcActionCheckbox.vue
@@ -27,7 +27,7 @@ This component is made to be used inside of the [NcActions](#NcActions) componen
 ```vue
  <NcActions>
  <NcActionCheckbox @change="alert('(un)checked !')">First choice</NcActionCheckbox>
- <NcActionCheckbox value="second" @change="alert('(un)checked !')">Second choice</NcActionCheckbox>
+ <NcActionCheckbox model-value="second" @change="alert('(un)checked !')">Second choice</NcActionCheckbox>
  <NcActionCheckbox :checked="true" @change="alert('(un)checked !')">Third choice (checked)</NcActionCheckbox>
  <NcActionCheckbox :disabled="true" @change="alert('(un)checked !')">Second choice (disabled)</NcActionCheckbox>
  </NcActions>
@@ -41,7 +41,7 @@ This component is made to be used inside of the [NcActions](#NcActions) componen
  ref="checkbox"
  :disabled="disabled"
  :checked="checked"
- :value="value"
+ :value="modelValue"
  :class="{ focusable: isFocusable }"
  type="checkbox"
  class="checkbox action-checkbox__checkbox"
@@ -92,7 +92,7 @@ export default {
  /**
  * value of the checkbox input
  */
- value: {
+ modelValue: {
  type: [String, Number],
  default: '',
  },

diff --git a/src/components/NcActionRadio/NcActionRadio.vue b/src/components/NcActionRadio/NcActionRadio.vue
@@ -29,7 +29,7 @@ So that only one of each name set can be selected at the same time.
 ```vue
  <NcActions>
  <NcActionRadio @change="alert('(un)checked !')" name="uniqueId">First choice</NcActionRadio>
- <NcActionRadio value="second" name="uniqueId" @change="alert('(un)checked !')">Second choice</NcActionRadio>
+ <NcActionRadio model-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 :disabled="true" name="uniqueId" @change="alert('(un)checked !')">Second choice (disabled)</NcActionRadio>
  </NcActions>
@@ -44,7 +44,7 @@ So that only one of each name set can be selected at the same time.
  :disabled="disabled"
  :checked="checked"
  :name="name"
- :value="value"
+ :value="modelValue"
  :class="{ focusable: isFocusable }"
  type="radio"
  class="radio action-radio__radio"
@@ -105,7 +105,7 @@ export default {
  /**
  * value of the radio input
  */
- value: {
+ modelValue: {
  type: [String, Number],
  default: '',
  },

diff --git a/src/components/NcActionTextEditable/NcActionTextEditable.vue b/src/components/NcActionTextEditable/NcActionTextEditable.vue
@@ -28,17 +28,17 @@ All undocumented attributes will be bound to the textarea. e.g. `maxlength`
 ```
 <template>
  <NcActions>
- <NcActionTextEditable value="This is a textarea">
+ <NcActionTextEditable model-value="This is a textarea">
  <template #icon>
  <Pencil :size="20" />
  </template>
  </NcActionTextEditable>
- <NcActionTextEditable :disabled="true" value="This is a disabled textarea">
+ <NcActionTextEditable :disabled="true" model-value="This is a disabled textarea">
  <template #icon>
  <Pencil :size="20" />
  </template>
  </NcActionTextEditable>
- <NcActionTextEditable name="Please edit the text" value="This is a textarea with name">
+ <NcActionTextEditable name="Please edit the text" model-value="This is a textarea with name">
  <template #icon>
  <Pencil :size="20" />
  </template>
@@ -84,7 +84,7 @@ export default {
 
  <textarea :id="computedId"
  :disabled="disabled"
- :value="value"
+ :value="model-value"
  v-bind="$attrs"
  :class="['action-text-editable__textarea', { focusable: isFocusable }]"
  @input="onInput" />
@@ -133,15 +133,15 @@ export default {
  /**
  * value attribute of the input field
  */
- value: {
+ modelValue: {
  type: String,
  default: '',
  },
  },
 
  emits: [
  'input',
- 'update:value',
+ 'update:modelValue',
  'submit',
  ],
 
@@ -173,7 +173,7 @@ export default {
  *
  * @type {string|Date}
  */
- this.$emit('update:value', event.target.value)
+ this.$emit('update:modelValue', event.target.value)
  },
  onSubmit(event) {
  event.preventDefault()

diff --git a/src/components/NcAppNavigationItem/NcInputConfirmCancel.vue b/src/components/NcAppNavigationItem/NcInputConfirmCancel.vue
@@ -88,7 +88,7 @@ export default {
  type: String,
  },
 
- value: {
+ modelValue: {
  default: '',
  type: String,
  },
@@ -109,7 +109,7 @@ export default {
 
  computed: {
  valueModel: {
- get() { return this.value },
+ get() { return this.modelValue },
  set(newValue) {
  this.$emit('input', newValue)
  },

diff --git a/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue b/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue
@@ -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:checked="sharingPermission" model-value="r" name="sharing_permission_radio" type="radio">Default permission read</NcCheckboxRadioSwitch>
+ <NcCheckboxRadioSwitch v-model:checked="sharingPermission" model-value="rw" name="sharing_permission_radio" type="radio">Default permission read+write</NcCheckboxRadioSwitch>
  <br>
  sharingPermission: {{ sharingPermission }}
  </div>
@@ -91,7 +91,7 @@ export default {
  <NcCheckboxRadioSwitch
  :button-variant="true"
  v-model:checked="sharingPermission"
- value="r"
+ model-value="r"
  name="sharing_permission_radio"
  type="radio"
  button-variant-grouped="horizontal">
@@ -100,7 +100,7 @@ export default {
  <NcCheckboxRadioSwitch
  :button-variant="true"
  v-model:checked="sharingPermission"
- value="rw"
+ model-value="rw"
  name="sharing_permission_radio"
  type="radio"
  button-variant-grouped="horizontal">
@@ -112,7 +112,7 @@ export default {
  <NcCheckboxRadioSwitch
  :button-variant="true"
  v-model:checked="sharingPermission"
- value="r"
+ model-value="r"
  name="sharing_permission_radio"
  type="radio"
  button-variant-grouped="vertical">
@@ -121,7 +121,7 @@ export default {
  <NcCheckboxRadioSwitch
  :button-variant="true"
  v-model:checked="sharingPermission"
- value="rw"
+ model-value="rw"
  name="sharing_permission_radio"
  type="radio"
  button-variant-grouped="vertical">
@@ -151,7 +151,7 @@ export default {
  <NcCheckboxRadioSwitch
  :button-variant="true"
  v-model:checked="enableSettings"
- value="y"
+ model-value="y"
  name="sharing_permission_radio"
  type="radio"
  button-variant-grouped="horizontal">
@@ -161,7 +161,7 @@ export default {
  <NcCheckboxRadioSwitch
  :button-variant="true"
  v-model:checked="enableSettings"
- value="n"
+ model-value="n"
  name="sharing_permission_radio"
  type="radio"
  button-variant-grouped="horizontal">
@@ -174,7 +174,7 @@ export default {
  <NcCheckboxRadioSwitch
  :button-variant="true"
  v-model:checked="enableSettings"
- value="y"
+ model-value="y"
  name="sharing_permission_radio"
  type="radio"
  button-variant-grouped="vertical">
@@ -184,7 +184,7 @@ export default {
  <NcCheckboxRadioSwitch
  :button-variant="true"
  v-model:checked="enableSettings"
- value="n"
+ model-value="n"
  name="sharing_permission_radio"
  type="radio"
  button-variant-grouped="vertical">
@@ -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:checked="sharingPermission" model-value="r" name="sharing_permission">Permission read</NcCheckboxRadioSwitch>
+ <NcCheckboxRadioSwitch v-model:checked="sharingPermission" model-value="w" name="sharing_permission">Permission write</NcCheckboxRadioSwitch>
+ <NcCheckboxRadioSwitch v-model:checked="sharingPermission" model-value="d" name="sharing_permission">Permission delete</NcCheckboxRadioSwitch>
  <br>
  sharingPermission: {{ sharingPermission }}
  </div>
@@ -281,7 +281,7 @@ export default {
  class="checkbox-radio-switch__input"
  :disabled="disabled"
  :type="inputType"
- :value="value"
+ :value="modelValue"
  v-bind="inputProps"
  v-on="listeners">
  <NcCheckboxContent :id="id"
@@ -402,7 +402,7 @@ export default {
  /**
  * Value to be synced on check
  */
- value: {
+ modelValue: {
  type: String,
  default: null,
  },
@@ -540,11 +540,11 @@ export default {
  * @return {boolean}
  */
  isChecked() {
- if (this.value !== null) {
+ if (this.modelValue !== null) {
  if (Array.isArray(this.checked)) {
- return [...this.checked].indexOf(this.value) > -1
+ return [...this.checked].indexOf(this.modelValue) > -1
  }
- return this.checked === this.value
+ return this.checked === this.modelValue
  }
  return this.checked === true
  },
@@ -576,7 +576,7 @@ 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:checked', this.modelValue)
  return
  }
 

diff --git a/src/components/NcProgressBar/NcProgressBar.vue b/src/components/NcProgressBar/NcProgressBar.vue
@@ -25,17 +25,17 @@ This is a simple progress bar component.
 
 ### Small
 ```vue
-<NcProgressBar :value="60" />
+<NcProgressBar :model-value="60" />
 ```
 
 ### Medium
 ```vue
-<NcProgressBar :value="60" size="medium" />
+<NcProgressBar :model-value="60" size="medium" />
 ```
 
 ### error
 ```vue
-<NcProgressBar :value="60" :error="true" />
+<NcProgressBar :model-value="60" :error="true" />
 ```
 
 </docs>
@@ -44,7 +44,7 @@ This is a simple progress bar component.
  <progress class="progress-bar vue"
  :class="{ 'progress-bar--error': error }"
  :style="{'--progress-bar-height': height }"
- :value="value"
+ :value="modelValue"
  max="100" />
 </template>
 
@@ -57,7 +57,7 @@ export default {
  /**
  * An integer between 1 and 100
  */
- value: {
+ modelValue: {
  type: Number,
  default: 0,
  validator(value) {

diff --git a/src/components/NcSettingsInputText/NcSettingsInputText.vue b/src/components/NcSettingsInputText/NcSettingsInputText.vue
@@ -24,7 +24,7 @@
 
 ```vue
 <NcSettingsInputText label="Label" hint="Hint" />
-<NcSettingsInputText label="Label" value="Value" hint="Hint" disabled />
+<NcSettingsInputText label="Label" model-value="Value" hint="Hint" disabled />
 ```
 
 </docs>
@@ -37,7 +37,7 @@
  <label :for="id" class="action-input__label">{{ label }}</label>
  <input :id="id"
  type="text"
- :value="value"
+ :value="modelValue"
  :disabled="disabled"
  @input="onInput"
  @change="onChange">
@@ -78,7 +78,7 @@ export default {
  /**
  * value of the select group input
  */
- value: {
+ modelValue: {
  type: String,
  default: '',
  },
@@ -102,7 +102,7 @@ export default {
  },
 
  emits: [
- 'update:value',
+ 'update:modelValue',
  'input',
  'submit',
  'change',
@@ -130,7 +130,7 @@ export default {
  *
  * @type {string}
  */
- this.$emit('update:value', event.target.value)
+ this.$emit('update:modelValue', event.target.value)
  },
  onSubmit(event) {
  if (!this.disabled) {

diff --git a/src/components/NcSettingsSelectGroup/NcSettingsSelectGroup.vue b/src/components/NcSettingsSelectGroup/NcSettingsSelectGroup.vue
@@ -191,7 +191,7 @@ export default {
  /**
  * If the value is changed, check that all groups are loaded so we show the correct display name
  */
- value: {
+ modelValue: {
  handler() {
  const loadedGroupIds = Object.keys(this.groups)
  const missing = this.filteredValue.filter(group => !loadedGroupIds.includes(group))