Merge pull request #4647 from nextcloud-libraries/feat/2154/field-mod…

…el-value

[next] feat(Nc*Field): migrate from `value` to `model-value`

src/components/NcEmojiPicker/NcEmojiPicker.vue

@@ -147,7 +147,7 @@ This component allows the user to pick an emoji.
  @select="select">
  <template #searchTemplate="slotProps">
  <NcTextField ref="search"
- v-model:value="search"
+ v-model="search"
  class="search"
  :label="t('Search')"
  :label-visible="true"

src/components/NcInputField/NcInputField.vue

@@ -52,7 +52,7 @@ For a list of all available props and attributes, please check the [HTMLInputEle
  'input-field__input--success': success,
  'input-field__input--error': error,
  }]"
- :value="value"
+ :value="modelValue"
  @input="handleInput">
  <!-- Label -->
  <label v-if="!labelOutside && isValidLabel"
@@ -128,7 +128,7 @@ export default {
  /**
  * The value of the input field
  */
- value: {
+ modelValue: {
  type: String,
  required: true,
  },
@@ -252,7 +252,7 @@ export default {
  },
 
  emits: [
- 'update:value',
+ 'update:modelValue',
  'trailing-button-click',
  ],
 
@@ -317,7 +317,7 @@ export default {
  },
 
  handleInput(event) {
- this.$emit('update:value', event.target.value)
+ this.$emit('update:modelValue', event.target.value)
  },
 
  handleTrailingButtonClick(event) {

src/components/NcPasswordField/NcPasswordField.vue

@@ -29,26 +29,26 @@ General purpose password field component.
 ```
 <template>
  <div class="wrapper">
- <NcPasswordField v-model:value="text1"
+ <NcPasswordField v-model="text1"
  label="Old password" />
  <div class="external-label">
  <label for="textField">New password</label>
- <NcPasswordField v-model:value="text2"
+ <NcPasswordField v-model="text2"
  id="textField"
  :label-outside="true"
  placeholder="Min. 12 characters" />
  </div>
  <div class="external-label">
  <label for="textField2">New password</label>
- <NcPasswordField v-model:value="text3"
+ <NcPasswordField v-model="text3"
  id="textField2"
  :error="true"
  :label-outside="true"
  placeholder="Min. 12 characters"
  helper-text="Password is insecure" />
  </div>
 
- <NcPasswordField v-model:value="text4"
+ <NcPasswordField v-model="text4"
  label="Good new password"
  :success="true"
  placeholder="Min. 12 characters"
@@ -58,7 +58,7 @@ General purpose password field component.
  </template>
  </NcPasswordField>
 
- <NcPasswordField v-model:value="text5"
+ <NcPasswordField v-model="text5"
  :disabled="true"
  label="Disabled" />
  </div>
@@ -116,7 +116,7 @@ export default {
  :success="computedSuccess"
  :minlength="rules.minlength"
  @trailing-button-click="togglePasswordVisibility"
- @input="handleInput">
+ @update:model-value="handleInput">
  <template v-if="!!$slots.icon" #icon>
  <!-- Default slot for the leading icon -->
  <slot name="icon" />
@@ -204,7 +204,7 @@ export default {
  emits: [
  'valid',
  'invalid',
- 'update:value',
+ 'update:modelValue',
  ],
 
  data() {
@@ -243,7 +243,7 @@ export default {
  },
 
  watch: {
- value(newValue) {
+ modelValue(newValue) {
  if (this.checkPasswordStrength) {
  if (this.passwordPolicy === null) {
  return
@@ -281,7 +281,7 @@ export default {
  *
  * @property {string} The new value
  */
- this.$emit('update:value', event.target.value)
+ this.$emit('update:modelValue', event)
  },
  togglePasswordVisibility() {
  this.isPasswordHidden = !this.isPasswordHidden

src/components/NcTextField/NcTextField.vue

@@ -34,7 +34,7 @@ and `minlength`.
 ```
 <template>
  <div class="wrapper">
- <NcTextField v-model:value="text1"
+ <NcTextField v-model="text1"
  label="Leading icon and clear trailing button"
  trailing-button-icon="close"
  :show-trailing-button="text1 !== ''"
@@ -43,7 +43,7 @@ and `minlength`.
  <Magnify :size="20" />
  </template>
  </NcTextField>
- <NcTextField :value.sync="text4"
+ <NcTextField v-model="text4"
  label="Internal label"
  placeholder="That can be used together with placeholder"
  trailing-button-icon="close"
@@ -53,28 +53,28 @@ and `minlength`.
  <Lock :size="20" />
  </template>
  </NcTextField>
- <NcTextField v-model:value="text2"
+ <NcTextField v-model="text2"
  label="Success state"
  placeholder="Placeholders are possible"
  :success="true"
  @trailing-button-click="clearText">
  </NcTextField>
- <NcTextField v-model:value="text3"
+ <NcTextField v-model="text3"
  label="Error state"
  placeholder="Enter something valid"
  :error="true"
  @trailing-button-click="clearText">
  </NcTextField>
- <NcTextField :value=""
+ <NcTextField :model-value=""
  label="Disabled"
  :disabled="true" />
- <NcTextField :value=""
+ <NcTextField :model-value=""
  label="Disabled + Success"
  :success="true"
  :disabled="true" />
  <div class="external-label">
  <label for="textField">External label</label>
- <NcTextField v-model:value="text5"
+ <NcTextField v-model="text5"
  id="textField"
  :label-outside="true"
  placeholder="Input with external label"
@@ -139,7 +139,7 @@ export default {
  <NcInputField v-bind="$props"
  ref="inputField"
  :trailing-button-label="clearTextLabel"
- @input="handleInput">
+ @update:model-value="handleInput">
  <template v-if="!!$slots.icon" #icon>
  <!-- Default slot for the leading icon -->
  <slot name="icon" />
@@ -193,7 +193,7 @@ export default {
  },
 
  emits: [
- 'update:value',
+ 'update:modelValue',
  ],
 
  computed: {
@@ -222,7 +222,7 @@ export default {
  },
 
  handleInput(event) {
- this.$emit('update:value', event.target.value)
+ this.$emit('update:modelValue', event)
  },
  },
 }