@onereach/ui-components 2.70.2-beta.2218.0 → 2.70.2-beta.2219.0

package/src/components/or-radio-v3/OrRadio.vue

@@ -9,7 +9,7 @@
       v-bind="controlAttributes"
       :class="controlStyles"
       type="radio"
-      :value="inputValue"
+      :value="value"
       :required="required"
       :disabled="disabled"
       @focus="$emit('focus', $event)"
@@ -46,18 +46,18 @@ export default defineComponent({
     OrLabel,
   },
 
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue',
+  },
+
   props: {
     modelValue: {
       type: String,
       default: undefined,
     },
 
-    value: { // TODO: Remove Vue 2 fallback
-      type: String,
-      default: undefined,
-    },
-
-    inputValue: { // TODO: Rename to `value` after complete migration to Vue 3
+    value: {
       type: String,
       required: true,
     },
@@ -86,7 +86,6 @@ export default defineComponent({
   emits: [
     'update:modelValue',
 
-    'input',
     'focus',
     'blur',
   ],
@@ -121,12 +120,9 @@ export default defineComponent({
     });
 
     const proxyModelValue = computed({
-      get: () => {
-        return props.modelValue ?? props.value; // TODO: Remove Vue 2 fallback
-      },
+      get: () => props.modelValue,
 
       set: (value) => {
-        context.emit('input', value);
         context.emit('update:modelValue', value);
       },
     });

package/src/components/or-segmented-control-v3/OrSegmentedControl.stories3.ts

@@ -20,10 +20,6 @@ export default {
       control: { type: 'text' },
     },
 
-    value: { // TODO: Remove Vue 2 fallback
-      table: { disable: true },
-    },
-
     size: {
       control: { type: 'select' },
       options: Object.values(SegmentedControlSize),

package/src/components/or-segmented-control-v3/OrSegmentedControl.vue

@@ -30,6 +30,11 @@ export default defineComponent({
     OrSegmentedControlItem,
   },
 
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue',
+  },
+
   props: {
     options: {
       type: Array as PropType<SegmentedControlOption[]>,
@@ -41,11 +46,6 @@ export default defineComponent({
       default: undefined,
     },
 
-    value: { // TODO: Remove Vue 2 fallback
-      type: String,
-      default: undefined,
-    },
-
     size: {
       type: String as PropType<SegmentedControlSize>,
       default: SegmentedControlSize.M,
@@ -59,8 +59,6 @@ export default defineComponent({
 
   emits: [
     'update:modelValue',
-
-    'input',
   ],
 
   expose: [
@@ -80,12 +78,9 @@ export default defineComponent({
 
     // State
     const proxyModelValue = computed({
-      get: () => {
-        return props.modelValue ?? props.value; // TODO: Remove Vue 2 fallback
-      },
+      get: () => props.modelValue,
 
       set: (value) => {
-        context.emit('input', value);
         context.emit('update:modelValue', value);
       },
     });

package/src/components/or-select-v3/OrSelect.stories3.ts

@@ -71,10 +71,6 @@ export default {
       control: { type: 'object' },
     },
 
-    value: { // TODO: Remove Vue 2 fallback
-      table: { disable: true },
-    },
-
     multiple: {
       control: { type: 'boolean' },
     },

package/src/components/or-select-v3/OrSelect.vue

@@ -125,7 +125,7 @@
                   >
                     <OrCheckbox
                       v-model="proxyModelValue"
-                      :input-value="option.value"
+                      :value="option.value"
                       :label="option.label"
                       :label-variant="'input'"
                     />
@@ -164,7 +164,7 @@
                 >
                   <OrCheckbox
                     v-model="proxyModelValue"
-                    :input-value="option.value"
+                    :value="option.value"
                     :label="option.label"
                     :label-variant="'input'"
                   />
@@ -257,6 +257,11 @@ export default defineComponent({
     DropdownOpen,
   },
 
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue',
+  },
+
   props: {
     options: {
       type: Array as PropType<SelectOption[]>,
@@ -273,11 +278,6 @@ export default defineComponent({
       default: undefined,
     },
 
-    value: { // TODO: Remove Vue 2 fallback
-      type: [String, Number, Array] as PropType<string | number | (string | number)[]>,
-      default: undefined,
-    },
-
     multiple: {
       type: Boolean,
       default: false,
@@ -350,7 +350,6 @@ export default defineComponent({
   emits: [
     'update:modelValue',
 
-    'input',
     'focus',
     'blur',
 
@@ -402,12 +401,9 @@ export default defineComponent({
     const controlId = ref(context.attrs.id as string ?? currentInstance.uid.toString());
 
     const proxyModelValue = computed({
-      get: () => {
-        return props.modelValue ?? props.value; // TODO: Remove Vue 2 fallback
-      },
+      get: () => props.modelValue,
 
       set: (value) => {
-        context.emit('input', value);
         context.emit('update:modelValue', value);
       },
     });

package/src/components/or-sort-header-v3/OrSortHeader.stories3.ts

@@ -25,11 +25,7 @@ export default {
       control: { type: 'object' },
     },
 
-    value: { // TODO: Remove Vue 2 fallback
-      control: { type: 'object' },
-    },
-
-    inputValue: { // TODO: Rename to `value` after complete migration to Vue 3
+    value: {
       control: { type: 'text' },
     },
 
@@ -109,7 +105,7 @@ const Template: StoryFn<typeof OrSortHeader> = (args) => ({
 
       <OrSortHeader
         v-model="model"
-        input-value="column-2"
+        value="column-2"
         @update:modelValue="onUpdateModelValue"
         @input="onInput"
         @focus="onFocus"
@@ -128,5 +124,5 @@ Default.args = {
   default: 'Column 1',
 
   // Props
-  inputValue: 'column-1',
+  value: 'column-1',
 };

package/src/components/or-sort-header-v3/OrSortHeader.vue

@@ -29,18 +29,18 @@ export default defineComponent({
     OrIcon,
   },
 
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue',
+  },
+
   props: {
     modelValue: {
       type: Object as PropType<SortHeaderModel>,
       default: undefined,
     },
 
-    value: { // TODO: Remove Vue 2 fallback
-      type: Object as PropType<SortHeaderModel>,
-      default: undefined,
-    },
-
-    inputValue: { // TODO: Rename to `value` after complete migration to Vue 3
+    value: {
       type: String,
       required: true,
     },
@@ -49,7 +49,6 @@ export default defineComponent({
   emits: [
     'update:modelValue',
 
-    'input',
     'focus',
     'blur',
   ],
@@ -70,24 +69,21 @@ export default defineComponent({
 
     // State
     const proxyModelValue = computed({
-      get: () => {
-        return props.modelValue ?? props.value; // TODO: Remove Vue 2 fallback
-      },
+      get: () => props.modelValue,
 
       set: (value) => {
-        context.emit('input', value);
         context.emit('update:modelValue', value);
       },
     });
 
     const activated = computed(() => {
-      return proxyModelValue.value?.column === props.inputValue;
+      return proxyModelValue.value?.column === props.value;
     });
 
     // Methods
     function toggleDirection(): void {
       proxyModelValue.value = {
-        column: props.inputValue,
+        column: props.value,
         direction: proxyModelValue.value?.direction === 'asc' ? 'desc' : 'asc',
       };
     }

package/src/components/or-switch-v3/OrSwitch.stories3.ts

@@ -26,11 +26,7 @@ export default {
       control: { type: 'object' },
     },
 
-    value: { // TODO: Remove Vue 2 fallback
-      table: { disable: true },
-    },
-
-    inputValue: { // TODO: Rename to `value` after complete migration to Vue 3
+    value: {
       control: { type: 'text' },
     },
 
@@ -139,7 +135,7 @@ const Template: StoryFn<typeof OrSwitch> = (args) => ({
 
       <OrSwitch
         v-model="model"
-        input-value="switch-2"
+        value="switch-2"
         label="Switch 2"
         @update:modelValue="onUpdateModelValue"
         @input="onInput"
@@ -157,6 +153,6 @@ Switch.args = {
   addon: '<OrIcon icon="info" />',
 
   // Props
-  inputValue: 'switch-1',
+  value: 'switch-1',
   label: 'Switch 1',
 };

package/src/components/or-switch-v3/OrSwitch.vue

@@ -10,7 +10,7 @@
         v-bind="controlAttributes"
         :class="controlStyles"
         type="checkbox"
-        :value="inputValue"
+        :value="value"
         :required="required"
         :disabled="disabled"
         @focus="$emit('focus', $event)"
@@ -63,18 +63,18 @@ export default defineComponent({
     OrLoader,
   },
 
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue',
+  },
+
   props: {
     modelValue: {
       type: [Boolean, Array] as PropType<boolean | string[]>,
       default: undefined,
     },
 
-    value: { // TODO: Remove Vue 2 fallback
-      type: [Boolean, Array] as PropType<boolean | string[]>,
-      default: undefined,
-    },
-
-    inputValue: { // TODO: Rename to `value` after complete migration to Vue 3
+    value: {
       type: String,
       default: undefined,
     },
@@ -108,7 +108,6 @@ export default defineComponent({
   emits: [
     'update:modelValue',
 
-    'input',
     'focus',
     'blur',
   ],
@@ -148,12 +147,9 @@ export default defineComponent({
     });
 
     const proxyModelValue = computed({
-      get: () => {
-        return props.modelValue ?? props.value; // TODO: Remove Vue 2 fallback
-      },
+      get: () => props.modelValue,
 
       set: (value) => {
-        context.emit('input', value);
         context.emit('update:modelValue', value);
       },
     });

package/src/components/or-tabs-v3/OrTabs.stories3.ts

@@ -25,10 +25,6 @@ export default {
       control: { type: 'text' },
     },
 
-    value: { // TODO: Remove Vue 2 fallback
-      table: { disable: true },
-    },
-
     variant: {
       control: { type: 'select' },
       options: Object.values(TabsVariant),

package/src/components/or-tabs-v3/OrTabs.vue

@@ -67,6 +67,11 @@ export default defineComponent({
 
   inheritAttrs: false,
 
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue',
+  },
+
   props: {
     items: {
       type: Array as PropType<TabsItem[]>,
@@ -78,11 +83,6 @@ export default defineComponent({
       default: undefined,
     },
 
-    value: { // TODO: Remove Vue 2 fallback
-      type: [String, Number],
-      default: undefined,
-    },
-
     variant: {
       type: String as PropType<TabsVariant>,
       default: TabsVariant.Default,
@@ -91,8 +91,6 @@ export default defineComponent({
 
   emits: [
     'update:modelValue',
-
-    'input',
   ],
 
   expose: [
@@ -123,12 +121,9 @@ export default defineComponent({
     });
 
     const proxyModelValue = computed({
-      get: () => {
-        return props.modelValue ?? props.value; // TODO: Remove Vue 2 fallback
-      },
+      get: () => props.modelValue,
 
       set: (value) => {
-        context.emit('input', value);
         context.emit('update:modelValue', value);
       },
     });

package/src/components/or-textarea-v3/OrTextarea.stories3.ts

@@ -35,10 +35,6 @@ export default {
       control: { type: 'text' },
     },
 
-    value: { // TODO: Remove Vue 2 fallback
-      table: { disable: true },
-    },
-
     size: {
       control: { type: 'select' },
       options: Object.values(TextareaSize),

package/src/components/or-textarea-v3/OrTextarea.vue

@@ -90,17 +90,17 @@ export default defineComponent({
     OrLabel,
   },
 
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue',
+  },
+
   props: {
     modelValue: {
       type: String,
       default: undefined,
     },
 
-    value: { // TODO: Remove Vue 2 fallback
-      type: String,
-      default: undefined,
-    },
-
     size: {
       type: String as PropType<TextareaSize>,
       default: TextareaSize.M,
@@ -145,7 +145,6 @@ export default defineComponent({
   emits: [
     'update:modelValue',
 
-    'input',
     'keydown',
     'keyup',
     'focus',
@@ -182,12 +181,9 @@ export default defineComponent({
     });
 
     const proxyModelValue = computed({
-      get: () => {
-        return props.modelValue ?? props.value; // TODO: Remove Vue 2 fallback
-      },
+      get: () => props.modelValue,
 
       set: (value) => {
-        context.emit('input', value);
         context.emit('update:modelValue', value);
       },
     });