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

packages/dialtone-vue/components/checkbox/checkbox.stories.js

@@ -12,7 +12,7 @@ export const argsData = {
   name: 'Name',
   label: 'Checkbox',
   validationState: '',
-  onInput: action('input'),
+  'onUpdate:modelValue': action('update:modelValue'),
   onFocusIn: action('focusin'),
   onFocusOut: action('focusout'),
 };
@@ -89,7 +89,7 @@ export const argTypesData = {
   },
 
   // Action Event Handlers
-  onInput: {
+  'onUpdate:modelValue': {
     table: {
       disable: true,
     },
@@ -105,8 +105,8 @@ export const argTypesData = {
     },
   },
 
-  input: {
-    description: 'Native input event',
+  'update:modelValue': {
+    description: 'Event fired to sync the modelValue prop with the parent component',
     table: {
       type: { summary: 'event' },
     },

packages/dialtone-vue/components/checkbox/checkbox.test.js

@@ -316,37 +316,37 @@ describe('DtCheckbox Tests', () => {
   describe('Accessibility Tests', () => {
     describe('Custom Event Tests', () => {
       describe('When the checkbox is clicked', () => {
-        it('Should emit an input event', async () => {
+        it('Should emit update:modelValue event', async () => {
           await input.trigger('change');
 
-          expect(wrapper.emitted('input')).toBeTruthy();
+          expect(wrapper.emitted('update:modelValue')).toBeTruthy();
         });
       });
 
       describe('When checked', () => {
         describe('When the checkbox is clicked', () => {
-          it('Should emit an input event', async () => {
+          it('Should emit update:modelValue event', async () => {
             mockProps = { modelValue: true };
 
             updateWrapper();
 
             await input.trigger('change');
 
-            expect(wrapper.emitted('input')).toBeTruthy();
+            expect(wrapper.emitted('update:modelValue')).toBeTruthy();
           });
         });
       });
 
       describe('When disabled', () => {
         describe('When the checkbox is clicked', () => {
-          it('Should not emit an input event', async () => {
+          it('Should not emit update:modelValue event', async () => {
             mockProps = { disabled: true };
 
             updateWrapper();
 
             await input.trigger('click');
 
-            expect(wrapper.emitted('input')).toBeFalsy();
+            expect(wrapper.emitted('update:modelValue')).toBeFalsy();
           });
         });
       });
@@ -356,37 +356,37 @@ describe('DtCheckbox Tests', () => {
   describe('Interactivity Tests', () => {
     describe('Custom Event Tests', () => {
       describe('When the checkbox is clicked', () => {
-        it('Should emit an input event', async () => {
+        it('Should emit update:modelValue event', async () => {
           await input.trigger('change');
 
-          expect(wrapper.emitted('input')).toBeTruthy();
+          expect(wrapper.emitted('update:modelValue')).toBeTruthy();
         });
       });
 
       describe('When checked', () => {
         describe('When the checkbox is clicked', () => {
-          it('Should emit an input event', async () => {
+          it('Should emit update:modelValue event', async () => {
             mockProps = { modelValue: true };
 
             updateWrapper();
 
             await input.trigger('change');
 
-            expect(wrapper.emitted('input')).toBeTruthy();
+            expect(wrapper.emitted('update:modelValue')).toBeTruthy();
           });
         });
       });
 
       describe('When disabled', () => {
         describe('When the checkbox is clicked', () => {
-          it('Should not emit an input event', async () => {
+          it('Should not emit update:modelValue event', async () => {
             mockProps = { disabled: true };
 
             updateWrapper();
 
             await input.trigger('click');
 
-            expect(wrapper.emitted('input')).toBeFalsy();
+            expect(wrapper.emitted('update:modelValue')).toBeFalsy();
           });
         });
       });
@@ -418,7 +418,7 @@ describe('DtCheckbox Tests', () => {
       describe('When there is a provided input listener', () => {
         describe('When the checkbox is clicked', () => {
           it('Should call input handler once', async () => {
-            mockAttrs = { onInput: MOCK_INPUT_LISTENER_SPY };
+            mockAttrs = { 'onUpdate:modelValue': MOCK_INPUT_LISTENER_SPY };
 
             updateWrapper();
 

packages/dialtone-vue/components/checkbox/checkbox.vue

@@ -124,13 +124,6 @@ export default {
   },
 
   emits: [
-    /**
-     * Native input event
-     *
-     * @event input
-     * @type {Boolean}
-     */
-    'input',
     /**
      * Event fired to sync the modelValue prop with the parent component
      *
@@ -228,7 +221,6 @@ export default {
       this.setGroupValue(value, checked);
 
       // emit the state of the checkbox
-      this.$emit('input', checked);
       this.$emit('update:modelValue', checked);
     },
 

packages/dialtone-vue/components/checkbox/checkbox_default.story.vue

@@ -15,7 +15,7 @@
     :indeterminate="$attrs.indeterminate"
     :messages="$attrs.messages"
     :class="$attrs.class"
-    @input="$attrs.onInput"
+    @update:model-value="$attrs['onUpdate:modelValue']"
     @focusin="$attrs.onFocusIn"
     @focusout="$attrs.onFocusOut"
   >

packages/dialtone-vue/components/checkbox_group/checkbox_group.stories.js

@@ -16,9 +16,9 @@ const CHECKBOX_GROUP_OPTIONS = [
 export const argsData = {
   name: 'fruits-checkbox-group',
   legend: 'Fruits',
-  selectedValues: [],
+  modelValue: [],
   options: CHECKBOX_GROUP_OPTIONS,
-  onInput: action('input'),
+  'onUpdate:modelValue': action('update:modelValue'),
 };
 
 // Controls
@@ -57,7 +57,7 @@ export const argTypesData = {
       type: 'text',
     },
   },
-  selectedValues: {
+  modelValue: {
     description: 'A provided list of selected values(s) for the checkbox group',
     control: 'array',
     table: {
@@ -90,17 +90,6 @@ export const argTypesData = {
     },
   },
 
-  // Action Event Handlers
-  onInput: {
-    table: {
-      disable: true,
-    },
-  },
-
-  input: {
-    control: false,
-  },
-
   // Story Variables
   options: {
     table: {

packages/dialtone-vue/components/checkbox_group/checkbox_group.test.js

@@ -168,7 +168,7 @@ describe('Checkbox Group Tests', () => {
 
     describe('When initial selected values are provided', () => {
       beforeEach(() => {
-        mockProps = { selectedValues: [MOCK_SELECTED_VALUE] };
+        mockProps = { modelValue: [MOCK_SELECTED_VALUE] };
 
         updateWrapper();
       });
@@ -192,8 +192,8 @@ describe('Checkbox Group Tests', () => {
           });
         });
 
-        it('Should emit an input event', () => {
-          expect(wrapper.emitted('input')[0][0]).toEqual([MOCK_SELECTED_VALUE, MOCK_SELECTED_VALUE2]);
+        it('should emit update:modelValue event', () => {
+          expect(wrapper.emitted('update:modelValue')[0][0]).toEqual([MOCK_SELECTED_VALUE, MOCK_SELECTED_VALUE2]);
         });
       });
     });
@@ -209,42 +209,26 @@ describe('Checkbox Group Tests', () => {
         });
       });
 
-      it('should emit an input event', () => {
-        expect(wrapper.emitted('input')[0][0]).toEqual([MOCK_SELECTED_VALUE]);
+      it('should emit update:modelValue event', () => {
+        expect(wrapper.emitted('update:modelValue')[0][0]).toEqual([MOCK_SELECTED_VALUE]);
       });
     });
 
     describe('When the checkbox group is disabled', () => {
       describe('When a checkbox is selected', () => {
-        it('does not emit an input event', () => {
+        it('does not emit update:modelValue event', () => {
           mockProps = { disabled: true };
 
           updateWrapper();
 
           MOCK_SELECTED_CHECKBOX_FUNCTION(MOCK_SELECTED_VALUE);
 
-          expect(wrapper.emitted('input')).toBeFalsy();
+          expect(wrapper.emitted('update:modelValue')).toBeFalsy();
         });
       });
     });
   });
 
-  describe('Validation Tests', () => {
-    const MOCK_PROP = DtCheckboxGroup.props.modelValue;
-
-    describe('When a value is not provided', () => {
-      it('passes custom prop validation', () => {
-        expect(MOCK_PROP.validator(undefined)).toBe(true);
-      });
-    });
-
-    describe('When a value is provided', () => {
-      it('fails custom prop validation', () => {
-        expect(MOCK_PROP.validator('some value')).toBe(false);
-      });
-    });
-  });
-
   describe('Extendability Tests', () => {
     let MOCK_ELEMENT;
     const MOCK_PROP_NAME = 'some';

packages/dialtone-vue/components/checkbox_group/checkbox_group.vue

@@ -1,5 +1,4 @@
 <script>
-import { warn } from 'vue';
 import { DtInputGroup } from '../input_group';
 
 /**
@@ -15,31 +14,10 @@ export default {
   extends: DtInputGroup,
 
   props: {
-    /**
-     * Not supported by this component, please use selectedValues
-     */
-    modelValue: {
-      type: [],
-      default: null,
-      validator: value => {
-        if (!value) {
-          return true;
-        }
-
-        warn(
-          'Component uses selectedValues to initialize the model, modelValue is not supported by this component',
-          this,
-        );
-
-        return false;
-      },
-    },
-
     /**
      * A provided list of selected values(s) for the checkbox group
-     * @model selectedValues
      */
-    selectedValues: {
+    modelValue: {
       type: Array,
       default () {
         return [];
@@ -72,31 +50,24 @@ export default {
   },
 
   emits: [
-    /**
-     * Native input event
-     *
-     * @event input
-     * @type {Array}
-     */
-    'input',
     /**
      * Selected values for the checkbox group
      *
-     * @event input
+     * @event update:modelValue
      * @type {Array}
      */
-    'update:selectedValues',
+    'update:modelValue',
   ],
 
   data () {
     return {
-      internalValue: this.selectedValues,
+      internalValue: this.modelValue,
     };
   },
 
   watch: {
-    selectedValues (newSelectedValues) {
-      this.internalValue = newSelectedValues;
+    modelValue (newModelValue) {
+      this.internalValue = newModelValue;
     },
 
     /*
@@ -124,8 +95,7 @@ export default {
         this.internalValue.push(value);
       }
 
-      this.$emit('input', this.internalValue);
-      this.$emit('update:selectedValues', this.internalValue);
+      this.$emit('update:modelValue', this.internalValue);
     },
 
     getMessageKey (type, index) {

packages/dialtone-vue/components/checkbox_group/checkbox_group_default.story.vue

@@ -3,15 +3,15 @@
     :id="$attrs.id"
     :name="$attrs.name"
     :legend="$attrs.legend"
-    :selected-values="$attrs.selectedValues"
+    :model-value="$attrs.modelValue"
     :disabled="$attrs.disabled"
     :messages="$attrs.messages"
     :show-messages="$attrs.showMessages"
     :legend-class="$attrs.legendClass"
     :messages-class="$attrs.messagesClass"
     :legend-child-props="$attrs.legendChildProps"
     :messages-child-props="$attrs.messagesChildProps"
-    @input="$attrs.onInput"
+    @update:model-value="$attrs['onUpdate:modelValue']"
   >
     <slot>
       <dt-checkbox

packages/dialtone-vue/components/collapsible/collapsible.vue

@@ -110,14 +110,13 @@ export default {
     },
 
     /**
-     * Controls whether the collapsible is shown. Leaving this null will have the collapsible start
-     * expanded and trigger on click by default. If you set this value, the default trigger
-     * behavior will be disabled, and you can control it as you need.
-     * Supports .sync modifier
+     * Controls whether the collapsible is shown. When null (default), the collapsible
+     * starts expanded and toggles on click. When set to true or false, the default
+     * trigger is disabled and the parent controls visibility via v-model:open.
      * @values null, true, false
      */
     open: {
-      type: Boolean,
+      type: [Boolean, null],
       default: null,
     },