refactor(components): DLT-3160 standardize v-model event handling (#1201)

Author: braddialpad

apps/dialtone-documentation/docs/components/banner.md

@@ -41,7 +41,7 @@ Banners are a type of notice and so you can use the following [Notice](notice.md
 ```vue demo-only
 <dt-stack direction="row" gap="200">
   <dt-select-menu :show-label="false" label="Style" :options="bannerOptions" v-model="selectedKind" />
-  <dt-checkbox value="important" @input="toggleImportant">Important</dt-checkbox>
+  <dt-checkbox value="important" @update:model-value="toggleImportant">Important</dt-checkbox>
   <dt-button @click="toggleBanner('example-kind')">Toggle Example</dt-button>
 </dt-stack>
 ```
@@ -139,8 +139,8 @@ function toggleBanner (id) {
   }
 }
 
-function toggleImportant () {
-  important.value = !important.value;
+function toggleImportant (checked) {
+  important.value = checked;
 }
 
 function closeBanner () {

apps/dialtone-documentation/docs/components/combobox-multi-select.md

@@ -14,7 +14,7 @@ storybook: https://dialtone.dialpad.com/vue/?path=/story/components-combobox-mul
 <dt-combobox-multi-select
   label="Label Text"
   :selected-items="selectedItems"
-  @input="onComboboxInput"
+  @update:model-value="onComboboxInput"
   @select="onComboboxSelect"
   @remove="onComboboxRemove"
 >
@@ -40,7 +40,7 @@ storybook: https://dialtone.dialpad.com/vue/?path=/story/components-combobox-mul
   ref="comboboxMultiSelect"
   label="Label Text"
   :selected-items="selectedItems"
-  @input="onInput"
+  @update:model-value="onInput"
   @select="onSelect"
   @remove="onRemove"
 >
@@ -94,7 +94,7 @@ Adds validation for max selection. Make sure to provide the following props:
   :selected-items="maxSelectedItems"
   :max-selected="2"
   :max-selected-message="[{ message: 'More than 2 selected', type: 'critical' }]"
-  @input="onMaxSelectInput"
+  @update:model-value="onMaxSelectInput"
   @select="onMaxSelectSelect"
   @remove="onMaxSelectRemove"
   @max-selected="onMaxSelected"
@@ -124,7 +124,7 @@ Adds validation for max selection. Make sure to provide the following props:
   :selected-items="selectedItems"
   :max-selected="2"
   :max-selected-message="[{ message: 'More than 2 selected', type: 'critical' }]"
-  @input="onInput"
+  @update:model-value="onInput"
   @select="onSelect"
   @remove="onRemove"
   @max-selected="onMaxSelected"

apps/dialtone-documentation/docs/components/combobox-with-popover.md

@@ -20,7 +20,7 @@ storybook: https://dialtone.dialpad.com/vue/?path=/story/components-combobox-wit
       v-model="inputValue"
       placeholder="Select one or start typing"
       v-bind="inputProps"
-      @input="onInput"
+      @update:model-value="onInput"
     />
   </template>
   <template #list="{ listProps }">
@@ -85,7 +85,7 @@ You can add header and footer content to the popover using the `header` and `foo
       v-model="inputValueHeaderFooter"
       placeholder="Select one or start typing"
       v-bind="inputProps"
-      @input="onInput"
+      @update:model-value="onInput"
     />
   </template>
   <template #list="{ listProps }">

apps/dialtone-documentation/docs/components/filter-pill.md

@@ -364,7 +364,7 @@ The label updates to show the selected option, and a clear button resets to the
           :key="filter.name"
           :label="filter.name"
           :value="filter.name"
-          @input="$event => selectedConversationType = $event"
+          @update:model-value="$event => selectedConversationType = $event"
         />
       </dt-radio-group>
     </template>

apps/dialtone-documentation/docs/components/input-group.md

@@ -87,7 +87,7 @@ export default {
         // update provided value if injected
         this.setGroupValue(value);
 
-        this.$emit('input', value);
+        this.$emit('update:modelValue', value);
       }
     },
   },

apps/dialtone-documentation/docs/components/radio-group.md

@@ -85,7 +85,7 @@ The event handler is only needed if you need to do additional processing. The v-
   v-model="selectedFruits"
   name="fruits-radio-group"
   legend="Fruits"
-  @input="onInput"
+  @update:model-value="onInput"
 >
   <dt-radio value="pear">Pear</dt-radio>
   <dt-radio value="kiwi">Kiwi</dt-radio>

apps/dialtone-documentation/docs/components/select-menu.md

@@ -58,8 +58,7 @@ A select is normally paired with a label, but there are times when it can be use
       ]"
   label="Default"
   :model-value="modelValue"
-  @input="onInput"
-  @change="onChange"
+  @update:model-value="onInput"
 />
 <dt-select-menu
   :options="[
@@ -71,8 +70,7 @@ A select is normally paired with a label, but there are times when it can be use
   label="Disabled"
   disabled
   :model-value="modelValue"
-  @input="onInput"
-  @change="onChange"
+  @update:model-value="onInput"
 />
 ```
 
@@ -91,8 +89,7 @@ A select is normally paired with a label, but there are times when it can be use
   label="Label"
   description="Optional description text"
   :model-value="modelValue"
-  @input="onInput"
-  @change="onChange"
+  @update:model-value="onInput"
 />
 ```
 
@@ -126,8 +123,7 @@ Provides feedback to the user based on their interaction, or lack thereof, with
   :messages="[{ message: `Critical validation message`, type: `critical` }]"
   label="Label"
   :model-value="modelValue"
-  @input="onInput"
-  @change="onChange"
+  @update:model-value="onInput"
 />
 <dt-select-menu
   :options="[
@@ -139,8 +135,7 @@ Provides feedback to the user based on their interaction, or lack thereof, with
   :messages="[{ message: `Positive validation message`, type: `positive` }]"
   label="Label"
   :model-value="modelValue"
-  @input="onInput"
-  @change="onChange"
+  @update:model-value="onInput"
 />
 <dt-select-menu
   :options="[
@@ -152,8 +147,7 @@ Provides feedback to the user based on their interaction, or lack thereof, with
   :messages="[{ message: `Warning validation message`, type: `warning` }]"
   label="Label"
   :model-value="modelValue"
-  @input="onInput"
-  @change="onChange"
+  @update:model-value="onInput"
 />
 ```
 
@@ -188,8 +182,7 @@ Provides feedback to the user based on their interaction, or lack thereof, with
   :messages="[{ message: `Critical validation message`, type: `critical` }]"
   label="Label"
   :model-value="modelValue"
-  @input="onInput"
-  @change="onChange"
+  @update:model-value="onInput"
   :show-messages="false"
 />
 <dt-select-menu
@@ -202,8 +195,7 @@ Provides feedback to the user based on their interaction, or lack thereof, with
   :messages="[{ message: `Positive validation message`, type: `positive` }]"
   label="Label"
   :model-value="modelValue"
-  @input="onInput"
-  @change="onChange"
+  @update:model-value="onInput"
   :show-messages="false"
 />
 <dt-select-menu
@@ -216,8 +208,7 @@ Provides feedback to the user based on their interaction, or lack thereof, with
   :messages="[{ message: `Warning validation message`, type: `warning` }]"
   label="Label"
   :model-value="modelValue"
-  @input="onInput"
-  @change="onChange"
+  @update:model-value="onInput"
   :show-messages="false"
 />
 ```
@@ -239,8 +230,7 @@ Provides feedback to the user based on their interaction, or lack thereof, with
     { value: `3`, label: `Option 3` },
   ]"
   :model-value="modelValue"
-  @input="onInput"
-  @change="onChange"
+  @update:model-value="onInput"
 >
   <template #label>
     <div>Slotted label</div>
@@ -265,8 +255,7 @@ Provides feedback to the user based on their interaction, or lack thereof, with
     { value: `3`, label: `Option 3` },
   ]"
   :model-value="modelValue"
-  @input="onInput"
-  @change="onChange"
+  @update:model-value="onInput"
 >
   <template #description>
     <div>Slotted description</div>
@@ -288,8 +277,7 @@ Provides feedback to the user based on their interaction, or lack thereof, with
 <!-- @code -->
 <dt-select-menu
   :model-value="modelValue"
-  @input="onInput"
-  @change="onChange"
+  @update:model-value="onInput"
 >
   <template #default>
     <option
@@ -326,8 +314,7 @@ We offer different sizes for instances in which the interface requires a smaller
   label="Label"
   :size="100|200|300|400|500"
   :model-value="modelValue"
-  @input="onInput"
-  @change="onChange"
+  @update:model-value="onInput"
 />
 ```
 

apps/dialtone-documentation/docs/components/toast.md

@@ -18,7 +18,7 @@ keywords: ["notification", "snackbar", "alert", "message", "d-toast", "DtToast",
   <div class="d-fl-grow1">
     <dt-select-menu :show-label="false" label="Style" :options="toastOptions" v-model="selectedKind" />
   </div>
-  <dt-checkbox value="important" @input="toggleImportant">Important</dt-checkbox>
+  <dt-checkbox value="important" @update:model-value="toggleImportant">Important</dt-checkbox>
   <dt-button @click="toggleToast">Toggle Example</dt-button>
 </dt-stack>
 <!-- @code -->
@@ -162,8 +162,8 @@ const updateOpen = (value) => {
   if (!value) showDurationToast.value = false;
 };
 
-function toggleImportant () {
-  important.value = !important.value;
+function toggleImportant (checked) {
+  important.value = checked;
 }
 function togglePinned () {
   pinned.value = !pinned.value;

apps/dialtone-documentation/docs/components/toggle.md

@@ -99,7 +99,7 @@ disabled states. However, if a label default slot is not used with `DtToggle`
 
 The button element should capture keyboard focus as long as it is not disabled (`disabled` prop is `true`).
 `ENTER` key will
-emit a **change** event with the current value of the toggle and will change its internal `checked` state.
+emit an **update:modelValue** event with the current value of the toggle and will change its internal `checked` state.
 
 <script setup>
 import { ref } from 'vue'

packages/dialtone-vue/common/mixins/input_group.js

@@ -120,12 +120,12 @@ export const InputGroupMixin = {
 
   emits: [
     /**
-     * Native input event
+     * Event fired to sync the modelValue prop with the parent component
      *
-     * @event input
-     * @type {KeyboardEvent}
+     * @event update:modelValue
+     * @type {String | Number | Boolean | Object}
      */
-    'input',
+    'update:modelValue',
   ],
 
   data () {
@@ -168,7 +168,7 @@ export const InputGroupMixin = {
      */
     setGroupValue (newValue) {
       this.internalValue = newValue;
-      this.$emit('input', newValue);
+      this.$emit('update:modelValue', newValue);
     },
   },