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

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

@@ -5,7 +5,7 @@
   >
     <template v-if="label">
       <OrLabel
-        :control-id="controlAttributes.id"
+        :control-id="controlId"
         :variant="'input'"
         :required="required"
         :disabled="disabled"
@@ -26,14 +26,14 @@
       :disabled="disabled"
     >
       <input
-        ref="control"
+        :id="controlId"
+        ref="input"
         v-model="proxyModelValue"
-        v-bind="controlAttributes"
+        v-bind="$attrs"
         :class="controlStyles"
         :type="type === 'password' && disclosed ? 'text' : type"
         :placeholder="placeholder"
         :required="required"
-        :readonly="readonly"
         :disabled="disabled"
         @keydown="$emit('keydown', $event)"
         @keyup="$emit('keyup', $event)"
@@ -56,7 +56,7 @@
             <OrIconButton
               :icon="'close'"
               :color="'inherit'"
-              :disabled="readonly || disabled"
+              :disabled="disabled"
               @click.stop="$emit('update:modelValue', '')"
             />
           </template>
@@ -102,8 +102,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, reactive, ref } from 'vue-demi';
-import { useControlAttributes, useIdAttribute, useValidationAttributes } from '../../hooks';
+import { computed, defineComponent, getCurrentInstance, PropType, ref } from 'vue-demi';
+import { useClassAttribute } from '../../hooks';
 import { OrErrorV3 as OrError } from '../or-error-v3';
 import { OrHintV3 as OrHint } from '../or-hint-v3';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
@@ -125,6 +125,8 @@ export default defineComponent({
     OrLabel,
   },
 
+  inheritAttrs: false,
+
   props: {
     modelValue: {
       type: [String, Number],
@@ -171,11 +173,6 @@ export default defineComponent({
       default: false,
     },
 
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-
     disabled: {
       type: Boolean,
       default: false,
@@ -199,20 +196,23 @@ export default defineComponent({
 
   expose: [
     'root',
-
     'focus',
-    'blur',
   ],
 
   setup(props, context) {
+    const currentInstance = getCurrentInstance()!;
+
     // Refs
     const root = ref<HTMLElement>();
-    const control = ref<HTMLInputElement>();
+    const input = ref<HTMLInputElement>();
 
     // Styles
+    const classAttribute = useClassAttribute();
+
     const rootStyles = computed(() => [
       'or-input',
       ...InputRoot,
+      classAttribute.value,
     ]);
 
     const controlStyles = computed(() => [
@@ -220,11 +220,7 @@ export default defineComponent({
     ]);
 
     // State
-    const controlAttributes = reactive({
-      id: useIdAttribute(),
-      ...useControlAttributes(),
-      ...useValidationAttributes(),
-    });
+    const controlId = ref(context.attrs.id as string ?? currentInstance.uid.toString());
 
     const proxyModelValue = computed({
       get: () => {
@@ -237,35 +233,32 @@ export default defineComponent({
       },
     });
 
-    const currentLength = computed(() => proxyModelValue.value?.toString().length ?? 0);
-    const maxLength = computed(() => controlAttributes.maxlength);
-
     const invalid = computed(() => !!props.error);
+    const readonly = computed(() => context.attrs.readonly as boolean);
+
+    const currentLength = computed(() => proxyModelValue.value?.toString().length ?? 0);
+    const maxLength = computed(() => context.attrs.maxlength as number | undefined);
 
     const disclosed = ref(false);
 
     // Methods
     function focus(): void {
-      control.value?.focus();
-    }
-
-    function blur(): void {
-      control.value?.blur();
+      input.value?.focus();
     }
 
     return {
       root,
-      control,
+      input,
       rootStyles,
       controlStyles,
-      controlAttributes,
+      controlId,
       proxyModelValue,
+      invalid,
+      readonly,
       currentLength,
       maxLength,
-      invalid,
       disclosed,
       focus,
-      blur,
     };
   },
 });

package/src/components/or-label-v3/OrLabel.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
     :disabled="disabled ? '' : null"
   >
@@ -21,12 +22,15 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
+import { useClassAttribute } from '../../hooks';
 import { LabelVariant } from './props';
 import { LabelAddon, LabelRoot, LabelRootVariants, LabelText } from './styles';
 
 export default defineComponent({
   name: 'OrLabel',
 
+  inheritAttrs: false,
+
   props: {
     controlId: {
       type: String,
@@ -58,10 +62,13 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
+    const classAttribute = useClassAttribute();
+
     const rootStyles = computed(() => [
       'or-label',
       ...LabelRoot,
       ...LabelRootVariants[props.variant],
+      classAttribute.value,
     ]);
 
     const textStyles = computed(() => [

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

@@ -1,6 +1,7 @@
 <template>
   <a
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
     :href="href"
     :disabled="disabled ? '' : null"
@@ -17,12 +18,15 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
+import { useClassAttribute } from '../../hooks';
 import { LinkColor } from './props';
 import { LinkRoot, LinkRootColors } from './styles';
 
 export default defineComponent({
   name: 'OrLink',
 
+  inheritAttrs: false,
+
   props: {
     href: {
       type: String,
@@ -64,12 +68,15 @@ export default defineComponent({
     const root = ref<HTMLButtonElement>();
 
     // Styles
+    const classAttribute = useClassAttribute();
+
     const rootStyles = computed(() => [
       'or-link',
       ...LinkRoot,
       ...LinkRootColors[`${props.color}`],
       props.loading && 'interactivity-none',
       props.underlined && 'underline hover:no-underline',
+      classAttribute.value,
     ]);
 
     return {

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

@@ -1,6 +1,7 @@
 <template>
   <div
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
   >
     <template v-if="title">
@@ -80,12 +81,15 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
+import { useClassAttribute } from '../../hooks';
 import { LoaderColor, LoaderSize, LoaderVariant } from './props';
-import { LoaderContainer, LoaderDescription, LoaderRoot, LoaderRootColors, LoaderTitle } from './styles';
+import { LoaderRoot, LoaderRootColors, LoaderTitle, LoaderDescription, LoaderContainer } from './styles';
 
 export default defineComponent({
   name: 'OrLoader',
 
+  inheritAttrs: false,
+
   props: {
     variant: {
       type: String as PropType<LoaderVariant>,
@@ -122,10 +126,13 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
+    const classAttribute = useClassAttribute();
+
     const rootStyles = computed(() => [
       'or-loader',
       ...LoaderRoot,
       ...LoaderRootColors[props.color],
+      classAttribute.value,
     ]);
 
     const titleStyles = computed(() => [

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

@@ -1,6 +1,7 @@
 <template>
   <div
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
     :tabindex="!disabled ? 0 : null"
     :selected="selected ? '' : null"
@@ -21,6 +22,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 { MenuItemRoot } from './styles';
 
@@ -31,6 +33,8 @@ export default defineComponent({
     OrIcon,
   },
 
+  inheritAttrs: false,
+
   props: {
     icon: {
       type: [String, Object] as PropType<string | InstanceType<typeof OrIcon>['$props']>,
@@ -63,9 +67,12 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
+    const classAttribute = useClassAttribute();
+
     const rootStyles = computed(() => [
       'or-menu-item',
       ...MenuItemRoot,
+      classAttribute.value,
     ]);
 
     return {

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

@@ -1,6 +1,7 @@
 <template>
   <div
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
   >
     <OrPopover
@@ -24,6 +25,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
+import { useClassAttribute } from '../../hooks';
 import { OrPopoverV3 as OrPopover } from '../or-popover-v3';
 import { MenuPlacement } from './props';
 import { MenuBody, MenuRoot } from './styles';
@@ -35,6 +37,8 @@ export default defineComponent({
     OrPopover,
   },
 
+  inheritAttrs: false,
+
   props: {
     trigger: {
       type: HTMLElement,
@@ -68,9 +72,12 @@ export default defineComponent({
     const isOpen = computed(() => popover.value?.isOpen);
 
     // Styles
+    const classAttribute = useClassAttribute();
+
     const rootStyles = computed(() => [
       'or-menu',
       ...MenuRoot,
+      classAttribute.value,
     ]);
 
     const bodyStyles = computed(() => [

package/src/components/or-modal-v3/OrModal.vue

@@ -31,6 +31,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref, watch } from 'vue-demi';
+import { useClassAttribute } from '../../hooks';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
 import { OrOverlayV3 as OrOverlay } from '../or-overlay-v3';
 import { ModalSize } from './props';
@@ -74,10 +75,13 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
+    const classAttribute = useClassAttribute();
+
     const rootStyles = computed(() => [
       'or-modal',
       ...ModalRoot,
       ...ModalRootSizes[props.size],
+      classAttribute.value,
     ]);
 
     const headerStyles = computed(() => [

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

@@ -1,6 +1,7 @@
 <template>
   <div
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
   >
     <div :class="iconStyles">
@@ -24,6 +25,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
+import { useClassAttribute } from '../../hooks';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import { NotificationVariant } from './props';
@@ -37,6 +39,8 @@ export default defineComponent({
     OrIconButton,
   },
 
+  inheritAttrs: false,
+
   props: {
     variant: {
       type: String as PropType<NotificationVariant>,
@@ -53,10 +57,13 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
+    const classAttribute = useClassAttribute();
+
     const rootStyles = computed(() => [
       'or-notification',
       ...NotificationRoot,
       ...NotificationRootVariants[props.variant],
+      classAttribute.value,
     ]);
 
     const iconStyles = computed(() => [

package/src/components/or-overlay-v3/OrOverlay.vue

@@ -13,7 +13,7 @@
 <script lang="ts">
 import { useScrollLock } from '@vueuse/core';
 import { computed, defineComponent, ref } from 'vue-demi';
-import { useElevation } from '../../hooks';
+import { useClassAttribute, useElevation } from '../../hooks';
 import { OrTeleportV3 as OrTeleport } from '../or-teleport-v3';
 import { OverlayRoot } from './styles';
 
@@ -42,9 +42,12 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
+    const classAttribute = useClassAttribute();
+
     const rootStyles = computed(() => [
       'or-overlay',
       ...OverlayRoot,
+      classAttribute.value,
     ]);
 
     // Effects

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

@@ -1,6 +1,7 @@
 <template>
   <div
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
   >
     <div :class="offsetControlStyles">
@@ -70,6 +71,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
+import { useClassAttribute } from '../../hooks';
 import { OrButtonV3 as OrButton } from '../or-button-v3';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import { OrMenuItemV3 as OrMenuItem } from '../or-menu-item-v3';
@@ -87,6 +89,8 @@ export default defineComponent({
     OrMenuItem,
   },
 
+  inheritAttrs: false,
+
   props: {
     modelValue: {
       type: Object as PropType<PaginationModel>,
@@ -130,9 +134,12 @@ export default defineComponent({
     const limitMenuRoot = computed(() => limitMenu.value?.root);
 
     // Styles
+    const classAttribute = useClassAttribute();
+
     const rootStyles = computed(() => [
       'or-pagination',
       ...PaginationRoot,
+      classAttribute.value,
     ]);
 
     const offsetControlStyles = computed(() => [
@@ -224,7 +231,7 @@ export default defineComponent({
         }, [] as (number | string)[]);
     });
 
-    // Methods
+    // Functions
     function toPreviousPage(): void {
       currentPage.value = currentPage.value - 1;
     }

package/src/components/or-popover-v3/OrPopover.vue

@@ -33,7 +33,7 @@
 import { autoUpdate, computePosition, flip, hide, shift } from '@floating-ui/dom';
 import { onClickOutside } from '@vueuse/core';
 import { computed, defineComponent, nextTick, PropType, ref, toRef, unref, watch, watchPostEffect } from 'vue-demi';
-import { useElevation, useResponsive } from '../../hooks';
+import { useClassAttribute, useElevation, useResponsive } from '../../hooks';
 import { OrBottomSheetV3 as OrBottomSheet } from '../or-bottom-sheet-v3';
 import { OrTeleportV3 as OrTeleport } from '../or-teleport-v3';
 import { PopoverPlacement, PopoverVariant } from './props';
@@ -98,9 +98,12 @@ export default defineComponent({
     const bottomSheetRoot = computed(() => bottomSheet.value?.root);
 
     // Styles
+    const classAttribute = useClassAttribute();
+
     const rootStyles = computed(() => [
       'or-popover',
       ...PopoverRoot,
+      classAttribute.value,
     ]);
 
     const bodyStyles = computed(() => [

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

@@ -4,9 +4,9 @@
     :class="rootStyles"
   >
     <input
-      ref="control"
+      v-bind="$attrs"
+      :id="controlId"
       v-model="proxyModelValue"
-      v-bind="controlAttributes"
       :class="controlStyles"
       type="radio"
       :value="inputValue"
@@ -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,6 +46,8 @@ export default defineComponent({
     OrLabel,
   },
 
+  inheritAttrs: false,
+
   props: {
     modelValue: {
       type: String,
@@ -93,20 +95,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-radio',
       ...RadioRoot,
+      classAttribute.value,
     ]);
 
     const controlStyles = computed(() => [
@@ -115,10 +118,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: () => {
@@ -131,24 +131,12 @@ export default defineComponent({
       },
     });
 
-    // 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.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