refactor(combinator): DLT-3418 migrate controls prop changes (#1261)

Author: francisrupert

packages/combinator/src/components/controls/control_boolean.vue

@@ -7,7 +7,7 @@
       :size="200"
       class="d-jc-space-between"
       data-qa="dtc-control-boolean-input"
-      @change="e => emit(VALUE_UPDATE_EVENT, e)"
+      @update:model-value="e => emit(VALUE_UPDATE_EVENT, e)"
     >
       <dt-text
         kind="label"

packages/combinator/src/components/controls/control_icon_slot.vue

@@ -15,7 +15,7 @@
         v-bind="inputProps"
         :value="searchText"
         :disabled="disabled"
-        @input="e => onInputInternal(e, onInput)"
+        @update:value="e => onInputInternal(e, onInput)"
       >
         <template #default>
           <slot />

packages/combinator/src/components/controls/control_number.vue

@@ -4,7 +4,7 @@
     :disabled="disabled"
     type="number"
     :size="100"
-    @input="e => emit(VALUE_UPDATE_EVENT, e === '' ? undefined : parseInt(e))"
+    @update:model-value="e => emit(VALUE_UPDATE_EVENT, e === '' ? undefined : parseInt(e))"
   >
     <template #label>
       <dt-text

packages/combinator/src/components/controls/control_slot.vue

@@ -6,7 +6,7 @@
     input-class="d-pie-400"
     spellcheck="false"
     :size="100"
-    @input="updateValue"
+    @update:model-value="updateValue"
   >
     <template #label>
       <dt-text

packages/combinator/src/components/controls/control_string.vue

@@ -4,7 +4,7 @@
     :disabled="disabled"
     :messages="messages"
     :size="100"
-    @input="e => emit(VALUE_UPDATE_EVENT, e)"
+    @update:model-value="e => emit(VALUE_UPDATE_EVENT, e)"
   >
     <template #label>
       <dt-text

packages/combinator/src/components/controls/control_suggestion.vue

@@ -15,7 +15,7 @@
           :value="value"
           :warning="warning"
           :disabled="disabled"
-          @input="e => onInputInternal(e, onInput)"
+          @update:value="e => onInputInternal(e, onInput)"
         >
           <template #default>
             <slot />

packages/combinator/src/components/header/header.vue

@@ -20,10 +20,10 @@
             label="Select target component variant"
             label-class="d-vi-visible-sr"
             name="select-menu"
-            :value="selectedVariant"
+            :model-value="selectedVariant"
             :options="variantOptions"
             :size="500"
-            @input="e => emit('update:variant', e)"
+            @update:model-value="e => emit('update:variant', e)"
           />
         </div>
       </dt-stack>

packages/combinator/src/components/settings_menu/settings_menu.vue

@@ -23,8 +23,8 @@
           <dt-radio-group
             name="theme-radio-group"
             legend="Theme"
-            :value="settings.root.theme"
-            @input="e => updateSettings('root', 'theme', e)"
+            :model-value="settings.root.theme"
+            @update:model-value="e => updateSettings('root', 'theme', e)"
           >
             <dt-radio value="light">
               Light
@@ -38,8 +38,8 @@
           <dt-radio-group
             name="scheme-radio-group"
             legend="Scheme"
-            :value="settings.code.scheme"
-            @input="e => updateSettings('code', 'scheme', e)"
+            :model-value="settings.code.scheme"
+            @update:model-value="e => updateSettings('code', 'scheme', e)"
           >
             <dt-radio value="mono">
               Mono
@@ -53,8 +53,8 @@
           <dt-radio-group
             name="sidebar-radio-group"
             legend="Sidebar Position"
-            :value="settings.root.sidebar"
-            @input="e => updateSettings('root', 'sidebar', e)"
+            :model-value="settings.root.sidebar"
+            @update:model-value="e => updateSettings('root', 'sidebar', e)"
           >
             <dt-radio value="left">
               Left
@@ -69,14 +69,14 @@
             :key="indentKey"
             type="number"
             label="Indent Spaces"
-            :value="settings.code.indent"
-            @input="updateIndent"
+            :model-value="settings.code.indent"
+            @update:model-value="updateIndent"
           />
         </section>
         <section class="d-p-100">
           <dt-checkbox
-            :checked="settings.code.verbose"
-            @input="e => updateSettings('code', 'verbose', e)"
+            :model-value="settings.code.verbose"
+            @update:model-value="e => updateSettings('code', 'verbose', e)"
           >
             Verbose
           </dt-checkbox>

packages/combinator/src/variants/variants_banner.js

@@ -4,7 +4,7 @@ export default {
   default: {
     slots: {
       default: {
-        initialValue: 'Message body with <a href="#" class="d-link d-link--muted">a link</a>.',
+        initialValue: 'Message body with <dt-link href="#" tone="muted">a link</dt-link>.',
       },
     },
     props: {

packages/combinator/src/variants/variants_button.js

@@ -168,7 +168,7 @@ export default {
       kind: { initialValue: 'muted' },
       importance: { initialValue: 'outlined' },
       size: { initialValue: '200' },
-      iconPosition: { initialValue: 'right' },
+      iconPosition: { initialValue: 'end' },
     },
     slots: {
       icon: { initialValue: '<dt-icon name="external-link" :size="iconSize" />' },