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

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,6 +32,8 @@ export default defineComponent({
     OrSegmentedControlItem,
   },
 
+  inheritAttrs: false,
+
   props: {
     options: {
       type: Array as PropType<SegmentedControlOption[]>,
@@ -72,10 +76,13 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
+    const classAttribute = useClassAttribute();
+
     const rootStyles = computed(() => [
       'or-segmented-control',
       ...SegmentedControlRoot,
       ...SegmentedControlRootSizes[props.size],
+      classAttribute.value,
     ]);
 
     // State

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.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
   >
     <template v-if="label">
@@ -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,6 +258,8 @@ export default defineComponent({
     DropdownOpen,
   },
 
+  inheritAttrs: false,
+
   props: {
     options: {
       type: Array as PropType<SelectOption[]>,
@@ -377,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(() => [

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(() => {

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

@@ -1,6 +1,7 @@
 <template>
   <div
     ref="root"
+    v-bind="$attrs"
     :class="containerStyles"
     :style="containerStyle"
   >
@@ -14,39 +15,38 @@
 </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, 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,9 +63,12 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
+    const classAttribute = useClassAttribute();
+
     const containerStyles = computed(() => [
       'or-skeleton-text-root',
       ...SkeletonTextContainerRoot,
+      classAttribute.value,
     ]);
 
     const containerStyle = computed(() => {
@@ -82,6 +85,7 @@ export default defineComponent({
       ...SkeletonRoot,
       ...SkeletonText,
       ...(props.animated ? SkeletonAnimated : []),
+      classAttribute.value,
     ]);
 
     const rowStyle = computed(() => {

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,6 +31,8 @@ export default defineComponent({
     OrIcon,
   },
 
+  inheritAttrs: false,
+
   props: {
     modelValue: {
       type: Object as PropType<SortHeaderModel>,
@@ -63,9 +67,12 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
+    const classAttribute = useClassAttribute();
+
     const rootStyles = computed(() => [
       'or-sort-header',
       ...SortHeaderRoot,
+      classAttribute.value,
     ]);
 
     // State

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

@@ -5,9 +5,9 @@
   >
     <template v-if="!loading">
       <input
-        ref="control"
+        v-bind="$attrs"
+        :id="controlId"
         v-model="proxyModelValue"
-        v-bind="controlAttributes"
         :class="controlStyles"
         type="checkbox"
         :value="inputValue"
@@ -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,6 +63,8 @@ export default defineComponent({
     OrLoader,
   },
 
+  inheritAttrs: false,
+
   props: {
     modelValue: {
       type: [Boolean, Array] as PropType<boolean | string[]>,
@@ -115,20 +117,21 @@ export default defineComponent({
 
   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(() => [
@@ -142,10 +145,7 @@ 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: () => {
@@ -158,25 +158,13 @@ export default defineComponent({
       },
     });
 
-    // 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.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';
@@ -110,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
@@ -135,7 +139,7 @@ export default defineComponent({
 
     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-tag-v3/styles.ts

@@ -49,6 +49,9 @@ export const TagRootColors: Record<TagColor, string[]> = {
     // Theme
     'theme-preset-2-primary',
     'dark:theme-preset-2-primary-dark',
+
+    'theme-foreground-default',
+    'dark:theme-foreground-default-dark',
   ],
 
   'danger': [

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' },
     },
@@ -64,10 +68,6 @@ export default {
       control: { type: 'boolean' },
     },
 
-    readonly: {
-      control: { type: 'boolean' },
-    },
-
     disabled: {
       control: { type: 'boolean' },
     },