@onereach/ui-components 2.70.2-beta.2207.0 → 2.70.2-beta.2216.0

package/src/components/or-avatar-v3/OrAvatar.vue

@@ -22,14 +22,14 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref, watchPostEffect } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
 import { generateHslFromString, hslToColorString } from '../../utils/functions/color';
-import { AvatarColor, AvatarSize } from './props';
-import { AvatarImage, AvatarRoot, AvatarRootColors, AvatarRootSizes, AvatarRootAbbreviationSizes, AvatarRootIconSizes } from './styles';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
+import { AvatarColor, AvatarSize } from './props';
+import { AvatarImage, AvatarRoot, AvatarRootAbbreviationSizes, AvatarRootColors, AvatarRootIconSizes, AvatarRootSizes } from './styles';
 
 export default defineComponent({
   name: 'OrAvatar',
+
   components: {
     OrIcon,
   },
@@ -75,8 +75,6 @@ export default defineComponent({
       return !props.icon;
     });
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-avatar',
       ...AvatarRoot,
@@ -86,7 +84,6 @@ export default defineComponent({
         ? AvatarRootAbbreviationSizes[props.size]
         : AvatarRootIconSizes[props.size]
       ),
-      classAttribute.value,
     ]);
 
     const imageStyles = computed(() => [

package/src/components/or-bottom-sheet-v3/OrBottomSheet.vue

@@ -24,7 +24,6 @@
 <script lang="ts">
 import { onClickOutside, SwipeDirection, usePointerSwipe } from '@vueuse/core';
 import { computed, defineComponent, ref, unref, watch } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
 import { OrOverlayV3 as OrOverlay } from '../or-overlay-v3';
 import { BottomSheetHandle, BottomSheetHeader, BottomSheetRoot } from './styles';
 
@@ -52,12 +51,9 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-bottom-sheet',
       ...BottomSheetRoot,
-      classAttribute.value,
     ]);
 
     const handleStyles = computed(() => [

package/src/components/or-button-v3/OrButton.vue

@@ -34,7 +34,6 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
 import { OrLoaderV3 as OrLoader } from '../or-loader-v3';
 import { ButtonColor, ButtonType, ButtonVariant } from './props';
 import { ButtonRoot, ButtonRootColors, ButtonRootVariants } from './styles';
@@ -100,15 +99,12 @@ export default defineComponent({
     const root = ref<HTMLButtonElement>();
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-button',
       ...ButtonRoot,
       ...ButtonRootVariants[props.variant],
       ...ButtonRootColors[`${props.color}-${props.variant}`],
       props.loading && 'interactivity-none',
-      classAttribute.value,
     ]);
 
     return {

package/src/components/or-card-collection-v3/OrCardCollection.vue

@@ -93,21 +93,16 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref, watch } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
+import { OrButtonV3 as OrButton } from '../or-button-v3';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
-import { OrMenuV3 as OrMenu } from '../or-menu-v3';
-import { OrMenuItemV3 as OrMenuItem } from '../or-menu-item-v3';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
-import {
-  CardCollectionRoot,
-  CardCollectionToolbar,
-  CardCollectionToolbarPanel,
-} from './styles';
-import { CardCollectionItem, SortOption, ViewMode } from './types';
-import OrCardCollectionView from './OrCardCollectionView.vue3.vue';
-import { OrButtonV3 as OrButton } from '../or-button-v3';
+import { OrMenuItemV3 as OrMenuItem } from '../or-menu-item-v3';
+import { OrMenuV3 as OrMenu } from '../or-menu-v3';
 import { OrSearchV3 as OrSearch } from '../or-search-v3';
+import OrCardCollectionView from './OrCardCollectionView.vue3.vue';
 import { defaultViewModes, gridView } from './props';
+import { CardCollectionRoot, CardCollectionToolbar, CardCollectionToolbarPanel } from './styles';
+import { CardCollectionItem, SortOption, ViewMode } from './types';
 
 export default defineComponent({
   name: 'OrCardCollection',
@@ -183,12 +178,9 @@ export default defineComponent({
     const sortButton = ref<typeof OrButton>();
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-card-collection',
       ...CardCollectionRoot,
-      classAttribute.value,
     ]);
 
     const toolbarStyles = computed(() => [

package/src/components/or-card-v3/OrCard.vue

@@ -10,7 +10,6 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
 import { CardRoot } from './styles';
 
 export default defineComponent({
@@ -27,12 +26,9 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-card',
       ...CardRoot,
-      classAttribute.value,
     ]);
 
     return {

package/src/components/or-checkbox-v3/OrCheckbox.vue

@@ -1,14 +1,15 @@
 <template>
   <div
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
   >
     <input
-      v-bind="$attrs"
-      :id="controlId"
+      ref="control"
       v-model="proxyModelValue"
+      v-bind="controlAttributes"
       :class="controlStyles"
-      type="checkbox"
+      :type="'checkbox'"
       :value="inputValue"
       :indeterminate="indeterminate"
       :required="required"
@@ -19,7 +20,7 @@
 
     <template v-if="$slots.default || label">
       <OrLabel
-        :control-id="controlId"
+        :control-id="controlAttributes.id"
         :variant="labelVariant"
         :required="required"
         :disabled="disabled"
@@ -35,8 +36,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, getCurrentInstance, PropType, ref } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
+import { computed, defineComponent, PropType, reactive, ref } from 'vue-demi';
+import { useControlAttributes, useIdAttribute } from '../../hooks';
 import { LabelVariant, OrLabelV3 as OrLabel } from '../or-label-v3';
 import { CheckboxControl, CheckboxControlHandle, CheckboxRoot } from './styles';
 
@@ -101,21 +102,20 @@ 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-checkbox',
       ...CheckboxRoot,
-      classAttribute.value,
     ]);
 
     const controlStyles = computed(() => [
@@ -124,7 +124,10 @@ export default defineComponent({
     ]);
 
     // State
-    const controlId = ref(context.attrs.id as string ?? currentInstance.uid.toString());
+    const controlAttributes = reactive({
+      id: useIdAttribute(),
+      ...useControlAttributes(),
+    });
 
     const proxyModelValue = computed({
       get: () => {
@@ -137,12 +140,24 @@ export default defineComponent({
       },
     });
 
+    // Methods
+    function focus(): void {
+      control.value?.focus();
+    }
+
+    function blur(): void {
+      control.value?.blur();
+    }
+
     return {
       root,
+      control,
       rootStyles,
       controlStyles,
-      controlId,
+      controlAttributes,
       proxyModelValue,
+      focus,
+      blur,
     };
   },
 });

package/src/components/or-error-tag-v3/OrErrorTag.vue

@@ -17,7 +17,6 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import { ErrorTagRoot } from './styles';
 
@@ -39,12 +38,9 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-error-tag',
       ...ErrorTagRoot,
-      classAttribute.value,
     ]);
 
     return {

package/src/components/or-error-v3/OrError.vue

@@ -17,7 +17,6 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
 import { ErrorAddon, ErrorRoot, ErrorText } from './styles';
 
 export default defineComponent({
@@ -41,12 +40,9 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-error',
       ...ErrorRoot,
-      classAttribute.value,
     ]);
 
     const textStyles = computed(() => [

package/src/components/or-expansion-panel-v3/OrExpansionPanel.vue

@@ -34,7 +34,6 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref, watch } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import { ExpansionPanelColor, ExpansionPanelVariant } from './props';
 import { ExpansionPanelAddon, ExpansionPanelHeader, ExpansionPanelHeaderColors, ExpansionPanelRoot, ExpansionPanelRootVariants } from './styles';
@@ -91,13 +90,10 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-expansion-panel',
       ...ExpansionPanelRoot,
       ...ExpansionPanelRootVariants[props.variant],
-      classAttribute.value,
     ]);
 
     const headerStyles = computed(() => [

package/src/components/or-hint-v3/OrHint.vue

@@ -17,7 +17,6 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
 import { HintAddon, HintRoot, HintText } from './styles';
 
 export default defineComponent({
@@ -41,12 +40,9 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-hint',
       ...HintRoot,
-      classAttribute.value,
     ]);
 
     const textStyles = computed(() => [

package/src/components/or-icon-button-v3/OrIconButton.vue

@@ -21,7 +21,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 { OrTooltipV3 as OrTooltip } from '../or-tooltip-v3';
 import { IconButtonColor, IconButtonSize } from './props';
@@ -79,13 +78,10 @@ export default defineComponent({
     const root = ref<HTMLButtonElement>();
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-icon-button',
       ...IconButtonRoot,
       ...IconButtonRootColors[props.color],
-      classAttribute.value,
     ]);
 
     return {

package/src/components/or-icon-v3/OrIcon.vue

@@ -10,7 +10,6 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
 import { IconSize, IconVariant } from './props';
 import { IconRoot, IconRootSizes, IconRootVariants } from './styles';
 
@@ -45,14 +44,11 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-icon',
       ...IconRoot,
       ...IconRootVariants[props.variant],
       ...IconRootSizes[props.size],
-      classAttribute.value,
     ]);
 
     return {

package/src/components/or-inline-input-box-v3/OrInlineInputBox.vue

@@ -11,7 +11,6 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
 import { InlineInputBoxSize } from './props';
 import { InlineInputBoxRoot, InlineInputBoxRootSizes } from './styles';
 
@@ -41,13 +40,10 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-inline-input-box',
       ...InlineInputBoxRoot,
       ...InlineInputBoxRootSizes[props.size],
-      classAttribute.value,
     ]);
 
     return {

package/src/components/or-inline-input-v3/OrInlineInput.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
   >
     <div :class="['layout-row', 'gap-sm+']">
@@ -9,9 +10,9 @@
         :invalid="invalid"
       >
         <input
-          :id="controlId"
+          ref="control"
           v-model="draftModelValue"
-          v-bind="$attrs"
+          v-bind="controlAttributes"
           :class="controlStyles"
           :type="type"
           :placeholder="placeholder"
@@ -71,8 +72,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, getCurrentInstance, PropType, ref, watch } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
+import { computed, defineComponent, PropType, reactive, ref, watch } from 'vue-demi';
+import { useControlAttributes, useIdAttribute, useValidationAttributes } 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';
@@ -146,21 +147,20 @@ 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-inline-input',
       ...InlineInputRoot,
-      classAttribute.value,
     ]);
 
     const controlStyles = computed(() => [
@@ -173,7 +173,11 @@ export default defineComponent({
     ]);
 
     // State
-    const controlId = ref(context.attrs.id as string ?? currentInstance.uid.toString());
+    const controlAttributes = reactive({
+      id: useIdAttribute(),
+      ...useControlAttributes(),
+      ...useValidationAttributes(),
+    });
 
     const proxyModelValue = computed({
       get: () => {
@@ -188,11 +192,12 @@ export default defineComponent({
 
     const draftModelValue = ref<string | number>('');
 
-    const activated = ref(false);
+    const currentLength = computed(() => draftModelValue.value?.toString().length ?? 0);
+    const maxLength = computed(() => controlAttributes.maxlength);
+
     const invalid = computed(() => !!props.error);
 
-    const currentLength = computed(() => draftModelValue.value?.toString().length ?? 0);
-    const maxLength = computed(() => context.attrs.maxlength as number | undefined);
+    const activated = ref(false);
 
     // Handlers
     function onFocus(event: Event): void {
@@ -210,6 +215,14 @@ export default defineComponent({
     }
 
     // Methods
+    function focus(): void {
+      control.value?.focus();
+    }
+
+    function blur(): void {
+      control.value?.blur();
+    }
+
     function apply(): void {
       if (draftModelValue.value !== proxyModelValue.value) {
         proxyModelValue.value = draftModelValue.value;
@@ -233,18 +246,21 @@ export default defineComponent({
 
     return {
       root,
+      control,
       rootStyles,
       controlStyles,
       actionStyles,
-      controlId,
+      controlAttributes,
       proxyModelValue,
       draftModelValue,
-      activated,
-      invalid,
       currentLength,
       maxLength,
+      invalid,
+      activated,
       onFocus,
       onBlur,
+      focus,
+      blur,
       apply,
       reset,
     };

package/src/components/or-inline-textarea-v3/OrInlineTextarea.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
   >
     <div :class="['layout-row', 'gap-sm+']">
@@ -9,9 +10,9 @@
         :invalid="invalid"
       >
         <textarea
-          :id="controlId"
+          ref="control"
           v-model="draftModelValue"
-          v-bind="$attrs"
+          v-bind="controlAttributes"
           :class="controlStyles"
           :placeholder="placeholder"
           :activated="activated ? '' : null"
@@ -70,8 +71,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, getCurrentInstance, ref, watch } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
+import { computed, defineComponent, reactive, ref, watch } from 'vue-demi';
+import { useControlAttributes, useIdAttribute, useValidationAttributes } 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';
@@ -134,21 +135,20 @@ export default defineComponent({
 
   expose: [
     'root',
+
+    'focus',
+    'blur',
   ],
 
   setup(props, context) {
-    const currentInstance = getCurrentInstance()!;
-
     // Refs
     const root = ref<HTMLElement>();
+    const control = ref<HTMLTextAreaElement>();
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-inline-textarea',
       ...InlineTextareaRoot,
-      classAttribute.value,
     ]);
 
     const controlStyles = computed(() => [
@@ -160,7 +160,11 @@ export default defineComponent({
     ]);
 
     // State
-    const controlId = ref(context.attrs.id as string ?? currentInstance.uid.toString());
+    const controlAttributes = reactive({
+      id: useIdAttribute(),
+      ...useControlAttributes(),
+      ...useValidationAttributes(),
+    });
 
     const proxyModelValue = computed({
       get: () => {
@@ -175,11 +179,12 @@ export default defineComponent({
 
     const draftModelValue = ref<string>('');
 
-    const activated = ref(false);
+    const currentLength = computed(() => draftModelValue.value?.toString().length ?? 0);
+    const maxLength = computed(() => controlAttributes.maxlength);
+
     const invalid = computed(() => !!props.error);
 
-    const currentLength = computed(() => draftModelValue.value?.toString().length ?? 0);
-    const maxLength = computed(() => context.attrs.maxlength as number | undefined);
+    const activated = ref(false);
 
     // Handlers
     function onFocus(event: Event): void {
@@ -197,6 +202,14 @@ export default defineComponent({
     }
 
     // Methods
+    function focus(): void {
+      control.value?.focus();
+    }
+
+    function blur(): void {
+      control.value?.blur();
+    }
+
     function apply(): void {
       if (draftModelValue.value !== proxyModelValue.value) {
         proxyModelValue.value = draftModelValue.value;
@@ -220,18 +233,21 @@ export default defineComponent({
 
     return {
       root,
+      control,
       rootStyles,
       controlStyles,
       actionStyles,
-      controlId,
+      controlAttributes,
       proxyModelValue,
       draftModelValue,
-      activated,
-      invalid,
       currentLength,
       maxLength,
+      invalid,
+      activated,
       onFocus,
       onBlur,
+      focus,
+      blur,
       apply,
       reset,
     };

package/src/components/or-input-box-v3/OrInputBox.vue

@@ -13,7 +13,6 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
 import { InputBoxSize, InputBoxVariant } from './props';
 import { InputBoxRoot, InputBoxRootSizes, InputBoxRootVariants } from './styles';
 
@@ -58,14 +57,11 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-input-box',
       ...InputBoxRoot,
       ...InputBoxRootVariants[props.variant],
       ...InputBoxRootSizes[props.size],
-      classAttribute.value,
     ]);
 
     return {