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

package/src/components/or-inline-textarea-v3/OrInlineTextarea.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
   >
     <div :class="['layout-row', 'gap-sm+']">
@@ -89,7 +88,10 @@ export default defineComponent({
     OrInlineInputBox,
   },
 
-  inheritAttrs: false,
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue',
+  },
 
   props: {
     modelValue: {
@@ -97,11 +99,6 @@ export default defineComponent({
       default: undefined,
     },
 
-    value: { // TODO: Remove Vue 2 fallback
-      type: String,
-      default: undefined,
-    },
-
     saveOnBlur: {
       type: Boolean,
       default: false,
@@ -126,7 +123,6 @@ export default defineComponent({
   emits: [
     'update:modelValue',
 
-    'input',
     'keydown',
     'keyup',
     'focus',
@@ -167,12 +163,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-input-box-v3/OrInputBox.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
     :invalid="invalid ? '' : null"
     :readonly="readonly ? '' : null"
@@ -19,8 +18,6 @@ import { InputBoxRoot, InputBoxRootSizes, InputBoxRootVariants } from './styles'
 export default defineComponent({
   name: 'OrInputBox',
 
-  inheritAttrs: false,
-
   props: {
     variant: {
       type: String as PropType<InputBoxVariant>,

package/src/components/or-input-v3/OrInput.stories3.ts

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

package/src/components/or-input-v3/OrInput.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
   >
     <template v-if="label">
@@ -126,7 +125,10 @@ export default defineComponent({
     OrLabel,
   },
 
-  inheritAttrs: false,
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue',
+  },
 
   props: {
     modelValue: {
@@ -134,11 +136,6 @@ export default defineComponent({
       default: undefined,
     },
 
-    value: { // TODO: Remove Vue 2 fallback
-      type: [String, Number],
-      default: undefined,
-    },
-
     type: {
       type: String as PropType<InputType>,
       default: InputType.Text,
@@ -193,7 +190,6 @@ export default defineComponent({
   emits: [
     'update:modelValue',
 
-    'input',
     'keydown',
     'keyup',
     'focus',
@@ -230,12 +226,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-label-v3/OrLabel.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
     :disabled="disabled ? '' : null"
   >
@@ -28,8 +27,6 @@ import { LabelAddon, LabelRoot, LabelRootVariants, LabelText } from './styles';
 export default defineComponent({
   name: 'OrLabel',
 
-  inheritAttrs: false,
-
   props: {
     controlId: {
       type: String,

package/src/components/or-link-v3/OrLink.vue

@@ -1,7 +1,6 @@
 <template>
   <a
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
     :href="href"
     :disabled="disabled ? '' : null"
@@ -24,8 +23,6 @@ import { LinkRoot, LinkRootColors } from './styles';
 export default defineComponent({
   name: 'OrLink',
 
-  inheritAttrs: false,
-
   props: {
     href: {
       type: String,

package/src/components/or-loader-v3/OrLoader.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
   >
     <template v-if="title">
@@ -87,8 +86,6 @@ import { LoaderContainer, LoaderDescription, LoaderRoot, LoaderRootColors, Loade
 export default defineComponent({
   name: 'OrLoader',
 
-  inheritAttrs: false,
-
   props: {
     variant: {
       type: String as PropType<LoaderVariant>,

package/src/components/or-menu-item-v3/OrMenuItem.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
     :tabindex="!disabled ? 0 : null"
     :selected="selected ? '' : null"
@@ -32,8 +31,6 @@ export default defineComponent({
     OrIcon,
   },
 
-  inheritAttrs: false,
-
   props: {
     icon: {
       type: [String, Object] as PropType<string | InstanceType<typeof OrIcon>['$props']>,

package/src/components/or-menu-v3/OrMenu.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
   >
     <OrPopover
@@ -36,8 +35,6 @@ export default defineComponent({
     OrPopover,
   },
 
-  inheritAttrs: false,
-
   props: {
     trigger: {
       type: HTMLElement,

package/src/components/or-notification-v3/OrNotification.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
   >
     <div :class="iconStyles">
@@ -38,8 +37,6 @@ export default defineComponent({
     OrIconButton,
   },
 
-  inheritAttrs: false,
-
   props: {
     variant: {
       type: String as PropType<NotificationVariant>,

package/src/components/or-pagination-v3/OrPagination.stories3.ts

@@ -15,10 +15,6 @@ export default {
       control: { type: 'text' },
     },
 
-    value: { // TODO: Remove Vue 2 fallback
-      table: { disable: true },
-    },
-
     length: {
       control: { type: 'number' },
     },

package/src/components/or-pagination-v3/OrPagination.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
   >
     <div :class="offsetControlStyles">
@@ -88,7 +87,10 @@ export default defineComponent({
     OrMenuItem,
   },
 
-  inheritAttrs: false,
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue',
+  },
 
   props: {
     modelValue: {
@@ -96,11 +98,6 @@ export default defineComponent({
       default: undefined,
     },
 
-    value: { // TODO: Remove Vue 2 fallback
-      type: Object as PropType<PaginationModel>,
-      default: undefined,
-    },
-
     length: {
       type: Number,
       required: true,
@@ -114,8 +111,6 @@ export default defineComponent({
 
   emits: [
     'update:modelValue',
-
-    'input',
   ],
 
   expose: [
@@ -152,20 +147,15 @@ 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 currentLimit = computed<number>({
-      get: () => {
-        return proxyModelValue.value?.limit ?? props.pageSizeOptions[0];
-      },
+      get: () => proxyModelValue.value?.limit ?? props.pageSizeOptions[0],
 
       set: (value) => {
         proxyModelValue.value = {
@@ -176,9 +166,7 @@ export default defineComponent({
     });
 
     const currentOffset = computed<number>({
-      get: () => {
-        return proxyModelValue.value?.offset ?? 0;
-      },
+      get: () => proxyModelValue.value?.offset ?? 0,
 
       set: (value) => {
         proxyModelValue.value = {
@@ -189,9 +177,7 @@ export default defineComponent({
     });
 
     const currentPage = computed<number>({
-      get: () => {
-        return Math.floor(currentOffset.value / currentLimit.value) + 1;
-      },
+      get: () => Math.floor(currentOffset.value / currentLimit.value) + 1,
 
       set: (value) => {
         currentOffset.value = (value - 1) * currentLimit.value;

package/src/components/or-progress-v3/OrProgress.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
   >
     <template v-if="isLinearType">
@@ -108,8 +107,6 @@ import { ProgressBarAnimationTypes, ProgressBarBackground, ProgressBarColors, Pr
 export default defineComponent({
   name: 'OrProgress',
 
-  inheritAttrs: false,
-
   props: {
     maxValue: {
       type: Number,

package/src/components/or-radio-v3/OrRadio.stories3.ts

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

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

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
   >
     <input
@@ -10,7 +9,7 @@
       v-bind="controlAttributes"
       :class="controlStyles"
       type="radio"
-      :value="inputValue"
+      :value="value"
       :required="required"
       :disabled="disabled"
       @focus="$emit('focus', $event)"
@@ -47,7 +46,10 @@ export default defineComponent({
     OrLabel,
   },
 
-  inheritAttrs: false,
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue',
+  },
 
   props: {
     modelValue: {
@@ -55,12 +57,7 @@ export default defineComponent({
       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,
     },
@@ -89,7 +86,6 @@ export default defineComponent({
   emits: [
     'update:modelValue',
 
-    'input',
     'focus',
     'blur',
   ],
@@ -124,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-search-v3/OrSearch.vue

@@ -1,7 +1,6 @@
 <template>
   <OrInput
     ref="root"
-    v-bind="$attrs"
     v-model.trim="localModelValue"
     :class="rootStyles"
     :type="'search'"
@@ -31,8 +30,6 @@ export default defineComponent({
     OrInput,
   },
 
-  inheritAttrs: false,
-
   props: {
     modelValue: {
       type: String,

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

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
   >
     <OrSegmentedControlItem
@@ -31,7 +30,10 @@ export default defineComponent({
     OrSegmentedControlItem,
   },
 
-  inheritAttrs: false,
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue',
+  },
 
   props: {
     options: {
@@ -44,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,
@@ -62,8 +59,6 @@ export default defineComponent({
 
   emits: [
     'update:modelValue',
-
-    'input',
   ],
 
   expose: [
@@ -83,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-segmented-control-v3/partials/or-segmented-control-item/OrSegmentedControlItem.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
     :selected="selected ? '' : null"
     :disabled="disabled ? '' : null"
@@ -21,8 +20,6 @@ import { SegmentedControlItemRoot, SegmentedControlItemRootSizes } from './style
 export default defineComponent({
   name: 'OrSegmentedControlItem',
 
-  inheritAttrs: false,
-
   props: {
     size: {
       type: String as PropType<SegmentedControlSize>,

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

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
   >
     <template v-if="label">
@@ -126,7 +125,7 @@
                   >
                     <OrCheckbox
                       v-model="proxyModelValue"
-                      :input-value="option.value"
+                      :value="option.value"
                       :label="option.label"
                       :label-variant="'input'"
                     />
@@ -165,7 +164,7 @@
                 >
                   <OrCheckbox
                     v-model="proxyModelValue"
-                    :input-value="option.value"
+                    :value="option.value"
                     :label="option.label"
                     :label-variant="'input'"
                   />
@@ -258,7 +257,10 @@ export default defineComponent({
     DropdownOpen,
   },
 
-  inheritAttrs: false,
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue',
+  },
 
   props: {
     options: {
@@ -276,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,
@@ -353,7 +350,6 @@ export default defineComponent({
   emits: [
     'update:modelValue',
 
-    'input',
     'focus',
     'blur',
 
@@ -405,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-skeleton-v3/OrSkeletonCircle.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
     :style="rootStyle"
   />
@@ -16,14 +15,13 @@ import { SkeletonAnimated, SkeletonCircle, SkeletonRoot } from './styles';
 export default defineComponent({
   name: 'OrSkeletonCircle',
 
-  inheritAttrs: false,
-
   props: {
     animated: {
       type: Boolean,
       required: false,
       default: true,
     },
+
     size: {
       type: [Number, String],
       required: false,

package/src/components/or-skeleton-v3/OrSkeletonRect.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
     :style="rootStyle"
   />
@@ -16,19 +15,19 @@ import { SkeletonAnimated, SkeletonRect, SkeletonRoot } from './styles';
 export default defineComponent({
   name: 'OrSkeletonRect',
 
-  inheritAttrs: false,
-
   props: {
     animated: {
       type: Boolean,
       required: false,
       default: true,
     },
+
     width: {
       type: [Number, String],
       required: false,
       default: '100%',
     },
+
     height: {
       type: [Number, String],
       required: false,