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

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

@@ -8,10 +8,9 @@
 </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({
@@ -46,15 +45,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

@@ -15,10 +15,9 @@
 </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({
@@ -63,12 +62,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 +81,6 @@ export default defineComponent({
       ...SkeletonRoot,
       ...SkeletonText,
       ...(props.animated ? SkeletonAnimated : []),
-      classAttribute.value,
     ]);
 
     const rowStyle = computed(() => {

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

@@ -19,7 +19,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';
@@ -67,12 +66,9 @@ 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

@@ -1,13 +1,14 @@
 <template>
   <div
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
   >
     <template v-if="!loading">
       <input
-        v-bind="$attrs"
-        :id="controlId"
+        ref="control"
         v-model="proxyModelValue"
+        v-bind="controlAttributes"
         :class="controlStyles"
         type="checkbox"
         :value="inputValue"
@@ -33,7 +34,7 @@
 
     <template v-if="$slots.default || label">
       <OrLabel
-        :control-id="controlId"
+        :control-id="controlAttributes.id"
         :variant="labelVariant"
         :required="required"
         :disabled="disabled"
@@ -49,8 +50,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 { OrLoaderV3 as OrLoader } from '../or-loader-v3';
 import { SwitchControl, SwitchControlHandle, SwitchLoader, SwitchLoaderHandle, SwitchRoot } from './styles';
@@ -117,21 +118,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-switch',
       ...SwitchRoot,
-      classAttribute.value,
     ]);
 
     const controlStyles = computed(() => [
@@ -145,7 +145,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: () => {
@@ -158,13 +161,25 @@ export default defineComponent({
       },
     });
 
+    // Methods
+    function focus(): void {
+      control.value?.focus();
+    }
+
+    function blur(): void {
+      control.value?.blur();
+    }
+
     return {
       root,
+      control,
       rootStyles,
       controlStyles,
       loaderStyles,
-      controlId,
+      controlAttributes,
       proxyModelValue,
+      focus,
+      blur,
     };
   },
 });

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

@@ -15,7 +15,6 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
 import { TabRoot } from './styles';
 
 export default defineComponent({
@@ -45,12 +44,9 @@ 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,7 +47,6 @@
 <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';
@@ -111,13 +110,10 @@ 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
@@ -139,7 +135,7 @@ export default defineComponent({
 
     const activeTab = computed(() => props.items.find(({ value }) => value === proxyModelValue.value)!);
 
-    // Functions
+    // Methods
     function rearrangeTabs(items: TabsItem[], activeTab: TabsItem, rootElement: Element): typeof tabs {
       const { children } = rootElement;
 

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

@@ -26,7 +26,6 @@
 
 <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';
@@ -74,14 +73,11 @@ 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,9 +49,6 @@ 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

@@ -16,7 +16,6 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
 import { MainText, RestText, TextRoot } from './styles';
 
 export default defineComponent({
@@ -45,12 +44,9 @@ 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,10 +16,6 @@ export default {
       control: { type: 'text' },
     },
 
-    readonly: {
-      control: { type: 'boolean' },
-    },
-
     maxlength: {
       control: { type: 'number' },
     },
@@ -68,6 +64,10 @@ export default {
       control: { type: 'boolean' },
     },
 
+    readonly: {
+      control: { type: 'boolean' },
+    },
+
     disabled: {
       control: { type: 'boolean' },
     },

package/src/components/or-textarea-v3/OrTextarea.vue

@@ -1,11 +1,12 @@
 <template>
   <div
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
   >
     <template v-if="label">
       <OrLabel
-        :control-id="controlId"
+        :control-id="controlAttributes.id"
         :variant="'input'"
         :required="required"
         :disabled="disabled"
@@ -25,12 +26,13 @@
       :disabled="disabled"
     >
       <textarea
-        :id="controlId"
+        ref="control"
         v-model="proxyModelValue"
-        v-bind="$attrs"
+        v-bind="controlAttributes"
         :class="controlStyles"
         :placeholder="placeholder"
         :required="required"
+        :readonly="readonly"
         :disabled="disabled"
         @keydown="$emit('keydown', $event)"
         @keyup="$emit('keyup', $event)"
@@ -70,8 +72,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, useValidationAttributes } from '../../hooks';
 import { OrErrorV3 as OrError } from '../or-error-v3';
 import { OrHintV3 as OrHint } from '../or-hint-v3';
 import { OrInputBoxV3 as OrInputBox } from '../or-input-box-v3';
@@ -132,6 +134,11 @@ export default defineComponent({
       default: false,
     },
 
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+
     disabled: {
       type: Boolean,
       default: false,
@@ -150,21 +157,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-textarea',
       ...TextareaRoot,
-      classAttribute.value,
     ]);
 
     const controlStyles = computed(() => [
@@ -172,7 +178,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: () => {
@@ -185,22 +195,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);
+    // Methods
+    function focus(): void {
+      control.value?.focus();
+    }
+
+    function blur(): void {
+      control.value?.blur();
+    }
 
     return {
       root,
+      control,
       rootStyles,
       controlStyles,
-      controlId,
+      controlAttributes,
       proxyModelValue,
-      invalid,
-      readonly,
       currentLength,
       maxLength,
+      invalid,
+      focus,
+      blur,
     };
   },
 });

package/src/components/or-tooltip-v3/OrTooltip.vue

@@ -27,7 +27,6 @@
 <script lang="ts">
 import { useDebounceFn, useElementHover } from '@vueuse/core';
 import { computed, defineComponent, PropType, ref, watch } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
 import { OrPopoverV3 as OrPopover } from '../or-popover-v3';
 import { TooltipPlacement } from './props';
 import { TooltipBody, TooltipBodyPlacements, TooltipRoot } from './styles';
@@ -71,12 +70,9 @@ export default defineComponent({
     const popoverRoot = computed(() => popover.value?.root);
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-tooltip',
       ...TooltipRoot,
-      classAttribute.value,
     ]);
 
     const bodyStyles = computed(() => [

package/src/hooks/index.ts

@@ -1,5 +1,7 @@
-export { useClassAttribute } from './useClassAttribute';
+export { useControlAttributes } from './useControlAttributes';
 export { useElevation } from './useElevation';
+export { useIdAttribute } from './useIdAttribute';
 export { useOverflow } from './useOverflow';
 export { useResponsive } from './useResponsive';
 export { default as useToggle } from './useToggle';
+export { useValidationAttributes } from './useValidationAttributes';

package/src/hooks/useControlAttributes.ts

@@ -0,0 +1,19 @@
+import { computed, ComputedRef, useAttrs } from 'vue-demi';
+
+interface ControlAttributes {
+  readonly: ComputedRef<boolean | undefined>;
+  disabled: ComputedRef<boolean | undefined>;
+
+  'force-state': ComputedRef<string | undefined>;
+}
+
+export function useControlAttributes(): ControlAttributes {
+  const attributes = useAttrs();
+
+  return {
+    readonly: computed(() => attributes['readonly'] as boolean | undefined),
+    disabled: computed(() => attributes['disabled'] as boolean | undefined),
+
+    'force-state': computed(() => attributes['force-state'] as string | undefined),
+  };
+}

package/src/hooks/useIdAttribute.ts

@@ -0,0 +1,9 @@
+import { computed, ComputedRef, getCurrentInstance, useAttrs } from 'vue-demi';
+
+export function useIdAttribute(): ComputedRef<string | undefined> {
+  const attributes = useAttrs(), component = getCurrentInstance();
+
+  return computed(() => {
+    return attributes['id'] as string | undefined ?? component?.uid.toString();
+  });
+}

package/src/hooks/useValidationAttributes.ts

@@ -0,0 +1,25 @@
+import { computed, ComputedRef, useAttrs } from 'vue-demi';
+
+interface ValidationAttributes {
+  required: ComputedRef<boolean | undefined>;
+  minlength: ComputedRef<number | undefined>;
+  maxlength: ComputedRef<number | undefined>;
+  pattern: ComputedRef<string | undefined>;
+  min: ComputedRef<number | undefined>;
+  max: ComputedRef<number | undefined>;
+  step: ComputedRef<number | undefined>;
+}
+
+export function useValidationAttributes(): ValidationAttributes {
+  const attributes = useAttrs();
+
+  return {
+    required: computed(() => attributes['required'] as boolean | undefined),
+    minlength: computed(() => attributes['minlength'] as number | undefined),
+    maxlength: computed(() => attributes['maxlength'] as number | undefined),
+    pattern: computed(() => attributes['pattern'] as string | undefined),
+    min: computed(() => attributes['min'] as number | undefined),
+    max: computed(() => attributes['max'] as number | undefined),
+    step: computed(() => attributes['step'] as number | undefined),
+  };
+}

package/dist/bundled/v2/hooks/useClassAttribute.d.ts

@@ -1,3 +0,0 @@
-import { ComputedRef } from 'vue-demi';
-export declare type UseClassAttributeReturn = ComputedRef<string | undefined>;
-export declare function useClassAttribute(): UseClassAttributeReturn;

package/dist/bundled/v2/useClassAttribute-9bf33346.js

@@ -1,33 +0,0 @@
-import './index-fa6eb4ca.js';
-import { getCurrentInstance, computed } from '@vue/composition-api/dist/vue-composition-api.mjs';
-
-function useClassAttribute() {
-  const currentInstance = getCurrentInstance();
-  // Functions
-  function composeClass() {
-    var _a;
-    const {
-      staticClass = '',
-      class: classProperty
-    } = (_a = (currentInstance === null || currentInstance === void 0 ? void 0 : currentInstance.vnode).data) !== null && _a !== void 0 ? _a : {};
-    if (!classProperty) {
-      return staticClass || undefined;
-    }
-    switch (true) {
-      case classProperty.constructor === Object:
-        return Object.entries(classProperty).filter(([, value]) => !!value).map(([className]) => className).reduce((classList, className) => `${classList} ${className}`, staticClass).trim();
-      case Array.isArray(classProperty):
-        return `${staticClass} ${classProperty.join(' ')}`.trim();
-      default:
-        return `${staticClass} ${classProperty}`.trim();
-    }
-  }
-  return computed(() => {
-    var _a;
-    {
-      return (_a = currentInstance === null || currentInstance === void 0 ? void 0 : currentInstance.attrs.class) !== null && _a !== void 0 ? _a : composeClass();
-    }
-  });
-}
-
-export { useClassAttribute as u };

package/dist/bundled/v3/hooks/useClassAttribute.d.ts

@@ -1,3 +0,0 @@
-import { ComputedRef } from 'vue-demi';
-export declare type UseClassAttributeReturn = ComputedRef<string | undefined>;
-export declare function useClassAttribute(): UseClassAttributeReturn;

package/dist/bundled/v3/useClassAttribute-00888f78.js

@@ -1,9 +0,0 @@
-import { getCurrentInstance, computed } from 'vue';
-
-function useClassAttribute() {
-  getCurrentInstance();
-  return computed(() => {
-  });
-}
-
-export { useClassAttribute as u };

package/dist/esm/v2/hooks/useClassAttribute.d.ts

@@ -1,3 +0,0 @@
-import { ComputedRef } from 'vue-demi';
-export declare type UseClassAttributeReturn = ComputedRef<string | undefined>;
-export declare function useClassAttribute(): UseClassAttributeReturn;

package/dist/esm/v2/useClassAttribute-47fdb016.js

@@ -1,32 +0,0 @@
-import { getCurrentInstance, computed, isVue2 } from 'vue-demi';
-
-function useClassAttribute() {
-  const currentInstance = getCurrentInstance();
-  // Functions
-  function composeClass() {
-    var _a;
-    const {
-      staticClass = '',
-      class: classProperty
-    } = (_a = (currentInstance === null || currentInstance === void 0 ? void 0 : currentInstance.vnode).data) !== null && _a !== void 0 ? _a : {};
-    if (!classProperty) {
-      return staticClass || undefined;
-    }
-    switch (true) {
-      case classProperty.constructor === Object:
-        return Object.entries(classProperty).filter(([, value]) => !!value).map(([className]) => className).reduce((classList, className) => `${classList} ${className}`, staticClass).trim();
-      case Array.isArray(classProperty):
-        return `${staticClass} ${classProperty.join(' ')}`.trim();
-      default:
-        return `${staticClass} ${classProperty}`.trim();
-    }
-  }
-  return computed(() => {
-    var _a;
-    if (isVue2) {
-      return (_a = currentInstance === null || currentInstance === void 0 ? void 0 : currentInstance.attrs.class) !== null && _a !== void 0 ? _a : composeClass();
-    }
-  });
-}
-
-export { useClassAttribute as u };

package/dist/esm/v3/hooks/useClassAttribute.d.ts

@@ -1,3 +0,0 @@
-import { ComputedRef } from 'vue-demi';
-export declare type UseClassAttributeReturn = ComputedRef<string | undefined>;
-export declare function useClassAttribute(): UseClassAttributeReturn;

package/dist/esm/v3/useClassAttribute-47fdb016.js

@@ -1,32 +0,0 @@
-import { getCurrentInstance, computed, isVue2 } from 'vue-demi';
-
-function useClassAttribute() {
-  const currentInstance = getCurrentInstance();
-  // Functions
-  function composeClass() {
-    var _a;
-    const {
-      staticClass = '',
-      class: classProperty
-    } = (_a = (currentInstance === null || currentInstance === void 0 ? void 0 : currentInstance.vnode).data) !== null && _a !== void 0 ? _a : {};
-    if (!classProperty) {
-      return staticClass || undefined;
-    }
-    switch (true) {
-      case classProperty.constructor === Object:
-        return Object.entries(classProperty).filter(([, value]) => !!value).map(([className]) => className).reduce((classList, className) => `${classList} ${className}`, staticClass).trim();
-      case Array.isArray(classProperty):
-        return `${staticClass} ${classProperty.join(' ')}`.trim();
-      default:
-        return `${staticClass} ${classProperty}`.trim();
-    }
-  }
-  return computed(() => {
-    var _a;
-    if (isVue2) {
-      return (_a = currentInstance === null || currentInstance === void 0 ? void 0 : currentInstance.attrs.class) !== null && _a !== void 0 ? _a : composeClass();
-    }
-  });
-}
-
-export { useClassAttribute as u };