@onereach/ui-components 2.71.1-beta.2221.0 → 2.71.1-beta.2222.0

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

@@ -1,6 +1,7 @@
 <template>
   <div
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
   >
     <template v-if="isLinearType">
@@ -97,16 +98,29 @@
 </template>
 
 <script lang="ts">
-import { useElementBounding } from '@vueuse/core';
 import _ from 'lodash';
+import { useElementBounding } from '@vueuse/core';
 import { computed, defineComponent, PropType, ref, useSlots } from 'vue-demi';
-import { useResponsive } from '../../hooks';
 import { ProgressColor, ProgressType } from './props';
-import { ProgressBarAnimationTypes, ProgressBarBackground, ProgressBarColors, ProgressBarMain, ProgressFooter, ProgressHeader, ProgressHeaderLabel, ProgressHeaderPercent, ProgressRoot, ProgressRootTypes } from './styles';
+import { useClassAttribute, useResponsive } from '../../hooks';
+import {
+  ProgressBarAnimationTypes,
+  ProgressBarBackground,
+  ProgressBarColors,
+  ProgressBarMain,
+  ProgressFooter,
+  ProgressHeader,
+  ProgressHeaderLabel,
+  ProgressHeaderPercent,
+  ProgressRoot,
+  ProgressRootTypes,
+} from './styles';
 
 export default defineComponent({
   name: 'OrProgress',
 
+  inheritAttrs: false,
+
   props: {
     maxValue: {
       type: Number,
@@ -202,10 +216,13 @@ export default defineComponent({
     const computedSize = computed(() => isMobile.value ? 20 : 16);
 
     // Styles
+    const classAttribute = useClassAttribute();
+
     const rootStyles = computed(() => [
       'or-progress',
       ...ProgressRoot,
       ...ProgressRootTypes[props.type],
+      classAttribute.value,
     ]);
 
     const headerStyles = computed(() => [

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

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

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

@@ -4,12 +4,12 @@
     :class="rootStyles"
   >
     <input
-      ref="control"
+      :id="controlId"
       v-model="proxyModelValue"
-      v-bind="controlAttributes"
+      v-bind="$attrs"
       :class="controlStyles"
       type="radio"
-      :value="value"
+      :value="inputValue"
       :required="required"
       :disabled="disabled"
       @focus="$emit('focus', $event)"
@@ -18,7 +18,7 @@
 
     <template v-if="$slots.default || label">
       <OrLabel
-        :control-id="controlAttributes.id"
+        :control-id="controlId"
         :variant="labelVariant"
         :required="required"
         :disabled="disabled"
@@ -34,8 +34,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, reactive, ref } from 'vue-demi';
-import { useControlAttributes, useIdAttribute } from '../../hooks';
+import { computed, defineComponent, getCurrentInstance, PropType, ref } from 'vue-demi';
+import { useClassAttribute } from '../../hooks';
 import { LabelVariant, OrLabelV3 as OrLabel } from '../or-label-v3';
 import { RadioControl, RadioControlHandle, RadioRoot } from './styles';
 
@@ -46,10 +46,7 @@ export default defineComponent({
     OrLabel,
   },
 
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue',
-  },
+  inheritAttrs: false,
 
   props: {
     modelValue: {
@@ -57,7 +54,12 @@ export default defineComponent({
       default: undefined,
     },
 
-    value: {
+    value: { // TODO: Remove Vue 2 fallback
+      type: String,
+      default: undefined,
+    },
+
+    inputValue: { // TODO: Rename to `value` after complete migration to Vue 3
       type: String,
       required: true,
     },
@@ -86,26 +88,28 @@ export default defineComponent({
   emits: [
     'update:modelValue',
 
+    'input',
     'focus',
     'blur',
   ],
 
   expose: [
     'root',
-
-    'focus',
-    'blur',
   ],
 
   setup(props, context) {
+    const currentInstance = getCurrentInstance()!;
+
     // Refs
     const root = ref<HTMLElement>();
-    const control = ref<HTMLInputElement>();
 
     // Styles
+    const classAttribute = useClassAttribute();
+
     const rootStyles = computed(() => [
       'or-radio',
       ...RadioRoot,
+      classAttribute.value,
     ]);
 
     const controlStyles = computed(() => [
@@ -114,37 +118,25 @@ export default defineComponent({
     ]);
 
     // State
-    const controlAttributes = reactive({
-      id: useIdAttribute(),
-      ...useControlAttributes(),
-    });
+    const controlId = ref(context.attrs.id as string ?? currentInstance.uid.toString());
 
     const proxyModelValue = computed({
-      get: () => props.modelValue,
+      get: () => {
+        return props.modelValue ?? props.value; // TODO: Remove Vue 2 fallback
+      },
 
       set: (value) => {
+        context.emit('input', value);
         context.emit('update:modelValue', value);
       },
     });
 
-    // Methods
-    function focus(): void {
-      control.value?.focus();
-    }
-
-    function blur(): void {
-      control.value?.blur();
-    }
-
     return {
       root,
-      control,
       rootStyles,
       controlStyles,
-      controlAttributes,
+      controlId,
       proxyModelValue,
-      focus,
-      blur,
     };
   },
 });

package/src/components/or-search-v3/OrSearch.stories3.ts

@@ -92,6 +92,7 @@ const Template: StoryFn<typeof OrSearch> = (args) => ({
     return {
       args,
       onSearch: action('search'),
+      onInput: action('input'),
       onKeydown: action('keydown'),
       onKeyup: action('keyup'),
       onFocus: action('focus'),
@@ -105,6 +106,7 @@ const Template: StoryFn<typeof OrSearch> = (args) => ({
       v-bind="args"
       style="min-width: 150px"
       @search="onSearch"
+      @input="onInput"
       @keydown="onKeydown"
       @keyup="onKeyup"
       @focus="onFocus"

package/src/components/or-search-v3/OrSearch.vue

@@ -1,6 +1,7 @@
 <template>
   <OrInput
     ref="root"
+    v-bind="$attrs"
     v-model.trim="localModelValue"
     :class="rootStyles"
     :type="'search'"
@@ -18,8 +19,9 @@
 </template>
 
 <script lang="ts">
+import { computed, watch, defineComponent, PropType, ref } from 'vue-demi';
 import { debouncedWatch } from '@vueuse/core';
-import { computed, defineComponent, PropType, ref, watch } from 'vue-demi';
+import { useClassAttribute } from '../../hooks';
 import { OrInputV3 as OrInput } from '../or-input-v3';
 import { SearchSize } from './props';
 
@@ -30,6 +32,8 @@ export default defineComponent({
     OrInput,
   },
 
+  inheritAttrs: false,
+
   props: {
     modelValue: {
       type: String,
@@ -84,8 +88,11 @@ export default defineComponent({
     const root = ref<InstanceType<typeof OrInput>>();
 
     // Styles
+    const classAttribute = useClassAttribute();
+
     const rootStyles = computed(() => [
       'or-search',
+      classAttribute.value,
     ]);
 
     // State

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

@@ -20,6 +20,10 @@ export default {
       control: { type: 'text' },
     },
 
+    value: { // TODO: Remove Vue 2 fallback
+      table: { disable: true },
+    },
+
     size: {
       control: { type: 'select' },
       options: Object.values(SegmentedControlSize),
@@ -71,6 +75,7 @@ const Template: StoryFn<typeof OrSegmentedControl> = (args) => ({
       args,
       model,
       onUpdateModelValue: action('update:modelValue'),
+      onInput: action('input'),
     };
   },
 
@@ -79,6 +84,7 @@ const Template: StoryFn<typeof OrSegmentedControl> = (args) => ({
       v-model="model"
       v-bind="args"
       @update:modelValue="onUpdateModelValue"
+      @input="onInput"
     />
   `,
 });

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

@@ -1,6 +1,7 @@
 <template>
   <div
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
   >
     <OrSegmentedControlItem
@@ -18,7 +19,8 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
-import OrSegmentedControlItem from './partials/or-segmented-control-item/OrSegmentedControlItem.vue';
+import { useClassAttribute } from '../../hooks';
+import OrSegmentedControlItem from './components/or-segmented-control-item/OrSegmentedControlItem.vue';
 import { SegmentedControlSize } from './props';
 import { SegmentedControlRoot, SegmentedControlRootSizes } from './styles';
 import { SegmentedControlOption } from './types';
@@ -30,10 +32,7 @@ export default defineComponent({
     OrSegmentedControlItem,
   },
 
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue',
-  },
+  inheritAttrs: false,
 
   props: {
     options: {
@@ -46,6 +45,11 @@ 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,6 +63,8 @@ export default defineComponent({
 
   emits: [
     'update:modelValue',
+
+    'input',
   ],
 
   expose: [
@@ -70,17 +76,23 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
+    const classAttribute = useClassAttribute();
+
     const rootStyles = computed(() => [
       'or-segmented-control',
       ...SegmentedControlRoot,
       ...SegmentedControlRootSizes[props.size],
+      classAttribute.value,
     ]);
 
     // State
     const proxyModelValue = computed({
-      get: () => props.modelValue,
+      get: () => {
+        return props.modelValue ?? props.value; // TODO: Remove Vue 2 fallback
+      },
 
       set: (value) => {
+        context.emit('input', value);
         context.emit('update:modelValue', value);
       },
     });

package/src/components/or-segmented-control-v3/{partials → components}/or-segmented-control-item/OrSegmentedControlItem.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
     :selected="selected ? '' : null"
     :disabled="disabled ? '' : null"
@@ -14,12 +15,15 @@
 
 <script lang="ts">
 import { computed, defineComponent, isVue2, PropType, ref } from 'vue-demi';
+import { useClassAttribute } from '../../../../hooks';
 import { SegmentedControlSize } from '../../props';
 import { SegmentedControlItemRoot, SegmentedControlItemRootSizes } from './styles';
 
 export default defineComponent({
   name: 'OrSegmentedControlItem',
 
+  inheritAttrs: false,
+
   props: {
     size: {
       type: String as PropType<SegmentedControlSize>,
@@ -42,10 +46,13 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
+    const classAttribute = useClassAttribute();
+
     const rootStyles = computed(() => [
       'or-segmented-control-item',
       ...SegmentedControlItemRoot,
       ...SegmentedControlItemRootSizes[props.size],
+      classAttribute.value,
     ]);
 
     // Handlers

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

@@ -71,6 +71,10 @@ export default {
       control: { type: 'object' },
     },
 
+    value: { // TODO: Remove Vue 2 fallback
+      table: { disable: true },
+    },
+
     multiple: {
       control: { type: 'boolean' },
     },
@@ -104,6 +108,10 @@ export default {
       control: { type: 'boolean' },
     },
 
+    disableDefaultStyles: {
+      control: { type: 'boolean' },
+    },
+
     enableSearch: {
       control: { type: 'boolean' },
     },
@@ -186,6 +194,7 @@ const Template: StoryFn<typeof OrSelect> = (args) => ({
       model,
       searchOptions,
       onUpdate: action('update:modelValue'),
+      onInput: action('input'),
       onFocus: action('focus'),
       onBlur: action('blur'),
       onSearch,
@@ -198,6 +207,7 @@ const Template: StoryFn<typeof OrSelect> = (args) => ({
       v-bind="args"
       :search-options="searchOptions"
       @update:modelValue="onUpdate"
+      @input="onInput"
       @focus="onFocus"
       @blur="onBlur"
       @search="onSearch"

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

@@ -1,6 +1,7 @@
 <template>
   <div
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
   >
     <template v-if="label">
@@ -125,7 +126,7 @@
                   >
                     <OrCheckbox
                       v-model="proxyModelValue"
-                      :value="option.value"
+                      :input-value="option.value"
                       :label="option.label"
                       :label-variant="'input'"
                     />
@@ -164,7 +165,7 @@
                 >
                   <OrCheckbox
                     v-model="proxyModelValue"
-                    :value="option.value"
+                    :input-value="option.value"
                     :label="option.label"
                     :label-variant="'input'"
                   />
@@ -219,7 +220,7 @@
 <script lang="ts">
 import { computed, defineComponent, getCurrentInstance, onMounted, PropType, ref, watch } from 'vue-demi';
 import { DropdownClose, DropdownOpen } from '../../directives';
-import { useOverflow } from '../../hooks';
+import { useClassAttribute, useOverflow } from '../../hooks';
 import { OrCheckboxV3 as OrCheckbox } from '../or-checkbox-v3';
 import { OrErrorV3 as OrError } from '../or-error-v3';
 import { OrExpansionPanelV3 as OrExpansionPanel } from '../or-expansion-panel-v3';
@@ -257,10 +258,7 @@ export default defineComponent({
     DropdownOpen,
   },
 
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue',
-  },
+  inheritAttrs: false,
 
   props: {
     options: {
@@ -278,6 +276,11 @@ 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,6 +353,7 @@ export default defineComponent({
   emits: [
     'update:modelValue',
 
+    'input',
     'focus',
     'blur',
 
@@ -376,9 +380,12 @@ export default defineComponent({
     const popoverState = computed(() => popover.value?.state);
 
     // Styles
+    const classAttribute = useClassAttribute();
+
     const rootStyles = computed(() => [
       'or-select',
       ...SelectRoot,
+      classAttribute.value,
     ]);
 
     const controlStyles = computed(() => [
@@ -401,9 +408,12 @@ export default defineComponent({
     const controlId = ref(context.attrs.id as string ?? currentInstance.uid.toString());
 
     const proxyModelValue = computed({
-      get: () => props.modelValue,
+      get: () => {
+        return props.modelValue ?? props.value; // TODO: Remove Vue 2 fallback
+      },
 
       set: (value) => {
+        context.emit('input', value);
         context.emit('update:modelValue', value);
       },
     });

package/src/components/or-select-v3/styles.ts

@@ -8,7 +8,10 @@ export const SelectRoot: string[] = [
 
 export const SelectControl: string[] = [
   // Layout
-  'layout-row grow',
+  'layout-row',
+
+  // Box
+  'w-full',
 
   // Overflow
   'overflow-hidden',

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

@@ -1,27 +1,30 @@
 <template>
   <div
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
     :style="rootStyle"
   />
 </template>
 
 <script lang="ts">
-import _ from 'lodash';
 import { computed, defineComponent, ref } from 'vue-demi';
+import _ from 'lodash';
 import { pxToRem } from '../../utils/functions/px-to-rem';
+import { useClassAttribute } from '../../hooks';
 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,
@@ -38,12 +41,15 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
+    const classAttribute = useClassAttribute();
+
     const rootStyles = computed(() => [
       'or-skeleton',
       'or-skeleton-circle',
       ...SkeletonRoot,
       ...SkeletonCircle,
       ...(props.animated ? SkeletonAnimated : []),
+      classAttribute.value,
     ]);
 
     const rootStyle = computed(() => {

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

@@ -1,33 +1,35 @@
 <template>
   <div
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
     :style="rootStyle"
   />
 </template>
 
 <script lang="ts">
-import _ from 'lodash';
 import { computed, defineComponent, ref } from 'vue-demi';
+import _ from 'lodash';
 import { pxToRem } from '../../utils/functions/px-to-rem';
+import { useClassAttribute } from '../../hooks';
 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,
@@ -44,12 +46,15 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
+    const classAttribute = useClassAttribute();
+
     const rootStyles = computed(() => [
       'or-skeleton',
       'or-skeleton-rect',
       ...SkeletonRoot,
       ...SkeletonRect,
       ...(props.animated ? SkeletonAnimated : []),
+      classAttribute.value,
     ]);
 
     const rootStyle = computed(() => {