@onereach/ui-components 2.72.0-beta.2234.0 → 2.72.0

package/src/components/{or-inputs → or-search}/OrSearch.vue

@@ -66,7 +66,7 @@
 </template>
 <script lang="ts">
 import { defineComponent, ref } from 'vue-demi';
-import OrInput from './OrInput.vue';
+import { OrInput } from '../or-input';
 import { debouncedWatch } from '@vueuse/core';
 import { BUTTON_SIZE, OrIconButton } from '../or-button-v2';
 

package/src/components/or-search/index.ts

@@ -0,0 +1 @@
+export { default as OrSearch } from './OrSearch.vue';

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

@@ -92,7 +92,6 @@ const Template: StoryFn<typeof OrSearch> = (args) => ({
     return {
       args,
       onSearch: action('search'),
-      onInput: action('input'),
       onKeydown: action('keydown'),
       onKeyup: action('keyup'),
       onFocus: action('focus'),
@@ -106,7 +105,6 @@ 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,7 +1,6 @@
 <template>
   <OrInput
     ref="root"
-    v-bind="$attrs"
     v-model.trim="localModelValue"
     :class="rootStyles"
     :type="'search'"
@@ -19,9 +18,8 @@
 </template>
 
 <script lang="ts">
-import { computed, watch, defineComponent, PropType, ref } from 'vue-demi';
 import { debouncedWatch } from '@vueuse/core';
-import { useClassAttribute } from '../../hooks';
+import { computed, defineComponent, PropType, ref, watch } from 'vue-demi';
 import { OrInputV3 as OrInput } from '../or-input-v3';
 import { SearchSize } from './props';
 
@@ -32,8 +30,6 @@ export default defineComponent({
     OrInput,
   },
 
-  inheritAttrs: false,
-
   props: {
     modelValue: {
       type: String,
@@ -88,11 +84,8 @@ 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,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),
@@ -75,7 +71,6 @@ const Template: StoryFn<typeof OrSegmentedControl> = (args) => ({
       args,
       model,
       onUpdateModelValue: action('update:modelValue'),
-      onInput: action('input'),
     };
   },
 
@@ -84,7 +79,6 @@ 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,7 +1,6 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
   >
     <OrSegmentedControlItem
@@ -19,8 +18,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
-import OrSegmentedControlItem from './components/or-segmented-control-item/OrSegmentedControlItem.vue';
+import OrSegmentedControlItem from './partials/or-segmented-control-item/OrSegmentedControlItem.vue';
 import { SegmentedControlSize } from './props';
 import { SegmentedControlRoot, SegmentedControlRootSizes } from './styles';
 import { SegmentedControlOption } from './types';
@@ -32,7 +30,10 @@ export default defineComponent({
     OrSegmentedControlItem,
   },
 
-  inheritAttrs: false,
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue',
+  },
 
   props: {
     options: {
@@ -45,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,
@@ -63,8 +59,6 @@ export default defineComponent({
 
   emits: [
     'update:modelValue',
-
-    'input',
   ],
 
   expose: [
@@ -76,23 +70,17 @@ 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: () => {
-        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/{components → 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"
@@ -15,15 +14,12 @@
 
 <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>,
@@ -46,13 +42,10 @@ 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,10 +71,6 @@ export default {
       control: { type: 'object' },
     },
 
-    value: { // TODO: Remove Vue 2 fallback
-      table: { disable: true },
-    },
-
     multiple: {
       control: { type: 'boolean' },
     },
@@ -190,7 +186,6 @@ const Template: StoryFn<typeof OrSelect> = (args) => ({
       model,
       searchOptions,
       onUpdate: action('update:modelValue'),
-      onInput: action('input'),
       onFocus: action('focus'),
       onBlur: action('blur'),
       onSearch,
@@ -203,7 +198,6 @@ 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,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'"
                   />
@@ -220,7 +219,7 @@
 <script lang="ts">
 import { computed, defineComponent, getCurrentInstance, onMounted, PropType, ref, watch } from 'vue-demi';
 import { DropdownClose, DropdownOpen } from '../../directives';
-import { useClassAttribute, useOverflow } from '../../hooks';
+import { 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';
@@ -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',
 
@@ -380,12 +376,9 @@ export default defineComponent({
     const popoverState = computed(() => popover.value?.state);
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-select',
       ...SelectRoot,
-      classAttribute.value,
     ]);
 
     const controlStyles = computed(() => [
@@ -408,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/styles.scss

@@ -9,10 +9,10 @@
   }
 }
 
-$c-skeleton-bg: #f6f8fd;
-$c-skeleton-center: #fff;
-
 .or-skeleton {
+  $c-skeleton-bg: #f6f8fd;
+  $c-skeleton-center: #fff;
+
   overflow: hidden;
   position: relative;
   padding: 0;
@@ -33,18 +33,3 @@ $c-skeleton-center: #fff;
     }
   }
 }
-
-
-[data-theme="dark"] {
-  $c-skeleton-dark-bg: $c-neutral-3;
-  $c-skeleton-dark-center: $c-neutral-2;
-
-  .or-skeleton {
-    background:  $c-skeleton-dark-bg;
-    &.is-animated {
-      &::before {
-        background: linear-gradient(90.14deg,  $c-skeleton-dark-bg 0.1%, $c-skeleton-dark-center 49.98%,  $c-skeleton-dark-bg 99.06%);
-      }
-    }
-  }
-}

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

@@ -1,30 +1,27 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
     :style="rootStyle"
   />
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from 'vue-demi';
 import _ from 'lodash';
+import { computed, defineComponent, ref } from 'vue-demi';
 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,
@@ -41,15 +38,12 @@ 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,35 +1,33 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
     :style="rootStyle"
   />
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from 'vue-demi';
 import _ from 'lodash';
+import { computed, defineComponent, ref } from 'vue-demi';
 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,
@@ -46,15 +44,12 @@ 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(() => {

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

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="containerStyles"
     :style="containerStyle"
   >
@@ -15,38 +14,39 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from 'vue-demi';
 import _ from 'lodash';
+import { computed, defineComponent, ref } from 'vue-demi';
 import { pxToRem } from '../../utils/functions/px-to-rem';
-import { useClassAttribute } from '../../hooks';
 import { SkeletonAnimated, SkeletonRoot, SkeletonText, SkeletonTextContainerRoot } from './styles';
 
 export default defineComponent({
   name: 'OrSkeletonText',
 
-  inheritAttrs: false,
-
   props: {
     animated: {
       type: Boolean,
       required: false,
       default: true,
     },
+
     linesCount: {
       type: Number,
       required: false,
       default: 1,
     },
+
     width: {
       type: [Number, String],
       required: false,
       default: '100%',
     },
+
     fontSize: {
       type: Number,
       required: false,
       default: 16,
     },
+
     lineHeight: {
       type: Number,
       required: false,
@@ -63,12 +63,9 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const containerStyles = computed(() => [
       'or-skeleton-text-root',
       ...SkeletonTextContainerRoot,
-      classAttribute.value,
     ]);
 
     const containerStyle = computed(() => {
@@ -85,7 +82,6 @@ export default defineComponent({
       ...SkeletonRoot,
       ...SkeletonText,
       ...(props.animated ? SkeletonAnimated : []),
-      classAttribute.value,
     ]);
 
     const rowStyle = computed(() => {

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' },
     },
 
@@ -88,7 +84,6 @@ const Template: StoryFn<typeof OrSortHeader> = (args) => ({
       args,
       model,
       onUpdateModelValue: action('update:modelValue'),
-      onInput: action('input'),
       onFocus: action('focus'),
       onBlur: action('blur'),
     };
@@ -100,7 +95,6 @@ const Template: StoryFn<typeof OrSortHeader> = (args) => ({
         v-model="model"
         v-bind="args"
         @update:modelValue="onUpdateModelValue"
-        @input="onInput"
         @focus="onFocus"
         @blur="onBlur"
       >
@@ -109,9 +103,8 @@ const Template: StoryFn<typeof OrSortHeader> = (args) => ({
 
       <OrSortHeader
         v-model="model"
-        input-value="column-2"
+        value="column-2"
         @update:modelValue="onUpdateModelValue"
-        @input="onInput"
         @focus="onFocus"
         @blur="onBlur"
       >
@@ -128,5 +121,5 @@ Default.args = {
   default: 'Column 1',
 
   // Props
-  inputValue: 'column-1',
+  value: 'column-1',
 };

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

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
     :activated="activated ? '' : null"
     @click.stop="toggleDirection()"
@@ -19,7 +18,6 @@
 
 <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';
@@ -31,7 +29,10 @@ export default defineComponent({
     OrIcon,
   },
 
-  inheritAttrs: false,
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue',
+  },
 
   props: {
     modelValue: {
@@ -39,12 +40,7 @@ export default defineComponent({
       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,
     },
@@ -53,7 +49,6 @@ export default defineComponent({
   emits: [
     'update:modelValue',
 
-    'input',
     'focus',
     'blur',
   ],
@@ -67,34 +62,28 @@ 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: () => {
-        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-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 text-on-surface rounded-sm p-md"> 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 rounded-sm p-2"> your slot named like content-{index} === {{slot}} ; slot props {{slotProps}}</p></template></or-stepper></div>',
 
 });