@onereach/ui-components 2.71.3-beta.2245.0 → 2.72.0-beta.2247.0

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

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

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

@@ -1,6 +1,7 @@
 <template>
   <div
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
     :activated="activated ? '' : null"
     @click.stop="toggleDirection()"
@@ -18,6 +19,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
+import { useClassAttribute } from '../../hooks';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import { SortHeaderRoot } from './styles';
 import { SortHeaderModel } from './types';
@@ -29,10 +31,7 @@ export default defineComponent({
     OrIcon,
   },
 
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue',
-  },
+  inheritAttrs: false,
 
   props: {
     modelValue: {
@@ -40,7 +39,12 @@ export default defineComponent({
       default: undefined,
     },
 
-    value: {
+    value: { // TODO: Remove Vue 2 fallback
+      type: Object as PropType<SortHeaderModel>,
+      default: undefined,
+    },
+
+    inputValue: { // TODO: Rename to `value` after complete migration to Vue 3
       type: String,
       required: true,
     },
@@ -49,6 +53,7 @@ export default defineComponent({
   emits: [
     'update:modelValue',
 
+    'input',
     'focus',
     'blur',
   ],
@@ -62,28 +67,34 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
+    const classAttribute = useClassAttribute();
+
     const rootStyles = computed(() => [
       'or-sort-header',
       ...SortHeaderRoot,
+      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);
       },
     });
 
     const activated = computed(() => {
-      return proxyModelValue.value?.column === props.value;
+      return proxyModelValue.value?.column === props.inputValue;
     });
 
     // Methods
     function toggleDirection(): void {
       proxyModelValue.value = {
-        column: props.value,
+        column: props.inputValue,
         direction: proxyModelValue.value?.direction === 'asc' ? 'desc' : 'asc',
       };
     }

package/src/components/or-stepper/OrStepper.stories.ts

@@ -30,7 +30,7 @@ const Template: Story = (_args, { argTypes }) => ({
   },
   //<component :key="slot.Id" :someProp="slotProps"></component>
   //<template #buttons="{onConfirm}"> here your button slot props <or-button content="slot-confirm" @click="onConfirm"/></template>
-  template: '<div><or-stepper v-bind="$props"> <template v-for="slot in slots" v-slot:[slot]="slotProps"><p class="bg-surface-5 rounded-sm p-2"> your slot named like content-{index} === {{slot}} ; slot props {{slotProps}}</p></template></or-stepper></div>',
+  template: '<div><or-stepper v-bind="$props"> <template v-for="slot in slots" v-slot:[slot]="slotProps"><p class="bg-surface-5 text-on-surface rounded-sm p-md"> your slot named like content-{index} === {{slot}} ; slot props {{slotProps}}</p></template></or-stepper></div>',
 
 });
 

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

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

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

@@ -5,12 +5,12 @@
   >
     <template v-if="!loading">
       <input
-        ref="control"
+        v-bind="$attrs"
+        :id="controlId"
         v-model="proxyModelValue"
-        v-bind="controlAttributes"
         :class="controlStyles"
         type="checkbox"
-        :value="value"
+        :value="inputValue"
         :required="required"
         :disabled="disabled"
         @focus="$emit('focus', $event)"
@@ -33,7 +33,7 @@
 
     <template v-if="$slots.default || label">
       <OrLabel
-        :control-id="controlAttributes.id"
+        :control-id="controlId"
         :variant="labelVariant"
         :required="required"
         :disabled="disabled"
@@ -49,8 +49,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 { OrLoaderV3 as OrLoader } from '../or-loader-v3';
 import { SwitchControl, SwitchControlHandle, SwitchLoader, SwitchLoaderHandle, SwitchRoot } from './styles';
@@ -63,10 +63,7 @@ export default defineComponent({
     OrLoader,
   },
 
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue',
-  },
+  inheritAttrs: false,
 
   props: {
     modelValue: {
@@ -74,7 +71,12 @@ export default defineComponent({
       default: undefined,
     },
 
-    value: {
+    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
       type: String,
       default: undefined,
     },
@@ -108,26 +110,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-switch',
       ...SwitchRoot,
+      classAttribute.value,
     ]);
 
     const controlStyles = computed(() => [
@@ -141,38 +145,26 @@ 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,
       loaderStyles,
-      controlAttributes,
+      controlId,
       proxyModelValue,
-      focus,
-      blur,
     };
   },
 });

package/src/components/or-tab-v3/OrTab.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
     :tabindex="0"
     :selected="selected ? '' : null"
@@ -14,11 +15,14 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue-demi';
+import { useClassAttribute } from '../../hooks';
 import { TabRoot } from './styles';
 
 export default defineComponent({
   name: 'OrTab',
 
+  inheritAttrs: false,
+
   props: {
     selected: {
       type: Boolean,
@@ -41,9 +45,12 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
+    const classAttribute = useClassAttribute();
+
     const rootStyles = computed(() => [
       'or-tab',
       ...TabRoot,
+      classAttribute.value,
     ]);
 
     return {

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

@@ -25,6 +25,10 @@ export default {
       control: { type: 'text' },
     },
 
+    value: { // TODO: Remove Vue 2 fallback
+      table: { disable: true },
+    },
+
     variant: {
       control: { type: 'select' },
       options: Object.values(TabsVariant),
@@ -70,6 +74,7 @@ const Template: StoryFn<typeof OrTabs> = (args) => ({
       args,
       model,
       onUpdateModelValue: action('update:modelValue'),
+      onInput: action('input'),
     };
   },
 
@@ -78,6 +83,7 @@ const Template: StoryFn<typeof OrTabs> = (args) => ({
       v-model="model"
       v-bind="args"
       @update:modelValue="onUpdateModelValue"
+      @input="onInput"
     >
       <template v-for="item in args.items" #[item.value]>
         {{ item.label }} Content

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

@@ -47,6 +47,7 @@
 <script lang="ts">
 import { useResizeObserver } from '@vueuse/core';
 import { computed, defineComponent, nextTick, onMounted, PropType, reactive, ref, watch } from 'vue-demi';
+import { useClassAttribute } from '../../hooks';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import { OrMenuItemV3 as OrMenuItem } from '../or-menu-item-v3';
 import { OrMenuV3 as OrMenu } from '../or-menu-v3';
@@ -67,11 +68,6 @@ export default defineComponent({
 
   inheritAttrs: false,
 
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue',
-  },
-
   props: {
     items: {
       type: Array as PropType<TabsItem[]>,
@@ -83,6 +79,11 @@ 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,6 +92,8 @@ export default defineComponent({
 
   emits: [
     'update:modelValue',
+
+    'input',
   ],
 
   expose: [
@@ -108,10 +111,13 @@ export default defineComponent({
     const overflowMenuRoot = computed(() => overflowMenu.value?.root);
 
     // Styles
+    const classAttribute = useClassAttribute();
+
     const rootStyles = computed(() => [
       'or-tabs',
       ...TabsRoot,
       ...TabsRootVariants[props.variant],
+      classAttribute.value,
     ]);
 
     // State
@@ -121,16 +127,19 @@ export default defineComponent({
     });
 
     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);
       },
     });
 
     const activeTab = computed(() => props.items.find(({ value }) => value === proxyModelValue.value)!);
 
-    // Methods
+    // Functions
     function rearrangeTabs(items: TabsItem[], activeTab: TabsItem, rootElement: Element): typeof tabs {
       const { children } = rootElement;
 

package/src/components/or-tag-v3/OrTag.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
     :tabindex="!disabled && variant === 'button' ? 0 : null"
     :disabled="disabled ? '' : null"
@@ -25,6 +26,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref, unref, watchPostEffect } from 'vue-demi';
+import { useClassAttribute } from '../../hooks';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
 import { TagColor, TagVariant } from './props';
 import { TagRoot, TagRootColors, TagRootVariants } from './styles';
@@ -36,6 +38,8 @@ export default defineComponent({
     OrIconButton,
   },
 
+  inheritAttrs: false,
+
   props: {
     variant: {
       type: String as PropType<TagVariant>,
@@ -70,11 +74,14 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
+    const classAttribute = useClassAttribute();
+
     const rootStyles = computed(() => [
       'or-tag',
       ...TagRoot,
       ...TagRootVariants[props.variant],
       ...!custom.value ? TagRootColors[props.color as TagColor] : [],
+      classAttribute.value,
     ]);
 
     // State

package/src/components/or-text-v3/OrText.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
   >
     <div :class="mainTextStyles">
@@ -15,11 +16,14 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue-demi';
+import { useClassAttribute } from '../../hooks';
 import { MainText, RestText, TextRoot } from './styles';
 
 export default defineComponent({
   name: 'OrText',
 
+  inheritAttrs: false,
+
   props: {
     text: {
       type: String,
@@ -41,9 +45,12 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
+    const classAttribute = useClassAttribute();
+
     const rootStyles = computed(() => [
       'or-text',
       ...TextRoot,
+      classAttribute.value,
     ]);
 
     const mainTextStyles = computed(() => [

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

@@ -16,6 +16,10 @@ export default {
       control: { type: 'text' },
     },
 
+    readonly: {
+      control: { type: 'boolean' },
+    },
+
     maxlength: {
       control: { type: 'number' },
     },
@@ -35,6 +39,10 @@ export default {
       control: { type: 'text' },
     },
 
+    value: { // TODO: Remove Vue 2 fallback
+      table: { disable: true },
+    },
+
     size: {
       control: { type: 'select' },
       options: Object.values(TextareaSize),
@@ -60,10 +68,6 @@ export default {
       control: { type: 'boolean' },
     },
 
-    readonly: {
-      control: { type: 'boolean' },
-    },
-
     disabled: {
       control: { type: 'boolean' },
     },
@@ -127,6 +131,7 @@ const Template: StoryFn<typeof OrTextarea> = (args) => ({
       args,
       model,
       onUpdateModelValue: action('update:modelValue'),
+      onInput: action('input'),
       onKeydown: action('keydown'),
       onKeyup: action('keyup'),
       onFocus: action('focus'),
@@ -139,6 +144,7 @@ const Template: StoryFn<typeof OrTextarea> = (args) => ({
       v-model="model"
       v-bind="args"
       @update:modelValue="onUpdateModelValue"
+      @input="onInput"
       @keydown="onKeydown"
       @keyup="onKeyup"
       @focus="onFocus"