@onereach/ui-components 2.70.2-beta.2199.0 → 2.70.2-beta.2203.0

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

@@ -1,12 +1,11 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
   >
     <template v-if="label">
       <OrLabel
-        :control-id="controlAttributes.id"
+        :control-id="controlId"
         :variant="'input'"
         :required="required"
         :disabled="disabled"
@@ -27,9 +26,10 @@
       :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"
@@ -102,8 +102,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, reactive, ref } from 'vue-demi';
-import { useClassAttribute, 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';
@@ -173,11 +173,6 @@ export default defineComponent({
       default: false,
     },
 
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-
     disabled: {
       type: Boolean,
       default: false,
@@ -201,15 +196,15 @@ 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();
@@ -225,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: () => {
@@ -242,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-pagination-v3/OrPagination.vue

@@ -231,7 +231,7 @@ export default defineComponent({
         }, [] as (number | string)[]);
     });
 
-    // Methods
+    // Functions
     function toPreviousPage(): void {
       currentPage.value = currentPage.value - 1;
     }

package/src/components/or-radio-v3/OrRadio.vue

@@ -1,13 +1,12 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
   >
     <input
-      ref="control"
+      v-bind="$attrs"
+      :id="controlId"
       v-model="proxyModelValue"
-      v-bind="controlAttributes"
       :class="controlStyles"
       type="radio"
       :value="inputValue"
@@ -19,7 +18,7 @@
 
     <template v-if="$slots.default || label">
       <OrLabel
-        :control-id="controlAttributes.id"
+        :control-id="controlId"
         :variant="labelVariant"
         :required="required"
         :disabled="disabled"
@@ -35,8 +34,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, reactive, ref } from 'vue-demi';
-import { useClassAttribute, 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';
 
@@ -96,15 +95,13 @@ 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();
@@ -121,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: () => {
@@ -137,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-switch-v3/OrSwitch.vue

@@ -1,14 +1,13 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
   >
     <template v-if="!loading">
       <input
-        ref="control"
+        v-bind="$attrs"
+        :id="controlId"
         v-model="proxyModelValue"
-        v-bind="controlAttributes"
         :class="controlStyles"
         type="checkbox"
         :value="inputValue"
@@ -34,7 +33,7 @@
 
     <template v-if="$slots.default || label">
       <OrLabel
-        :control-id="controlAttributes.id"
+        :control-id="controlId"
         :variant="labelVariant"
         :required="required"
         :disabled="disabled"
@@ -50,8 +49,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, reactive, ref } from 'vue-demi';
-import { useClassAttribute, 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';
@@ -118,15 +117,13 @@ 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();
@@ -148,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: () => {
@@ -164,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-tabs-v3/OrTabs.vue

@@ -139,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-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' },
     },

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

@@ -1,12 +1,11 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
   >
     <template v-if="label">
       <OrLabel
-        :control-id="controlAttributes.id"
+        :control-id="controlId"
         :variant="'input'"
         :required="required"
         :disabled="disabled"
@@ -26,9 +25,9 @@
       :disabled="disabled"
     >
       <textarea
-        ref="control"
+        :id="controlId"
         v-model="proxyModelValue"
-        v-bind="controlAttributes"
+        v-bind="$attrs"
         :class="controlStyles"
         :placeholder="placeholder"
         :required="required"
@@ -71,8 +70,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, reactive, ref } from 'vue-demi';
-import { useClassAttribute, 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 { OrInputBoxV3 as OrInputBox } from '../or-input-box-v3';
@@ -133,11 +132,6 @@ export default defineComponent({
       default: false,
     },
 
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-
     disabled: {
       type: Boolean,
       default: false,
@@ -156,15 +150,13 @@ 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();
@@ -180,11 +172,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: () => {
@@ -197,32 +185,22 @@ 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);
 
-    // Methods
-    function focus(): void {
-      control.value?.focus();
-    }
-
-    function blur(): void {
-      control.value?.blur();
-    }
+    const currentLength = computed(() => proxyModelValue.value?.toString().length ?? 0);
+    const maxLength = computed(() => context.attrs.maxlength as number | undefined);
 
     return {
       root,
-      control,
       rootStyles,
       controlStyles,
-      controlAttributes,
+      controlId,
       proxyModelValue,
+      invalid,
+      readonly,
       currentLength,
       maxLength,
-      invalid,
-      focus,
-      blur,
     };
   },
 });

package/src/hooks/index.ts

@@ -1,8 +1,5 @@
 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/dist/bundled/v2/hooks/useControlAttributes.d.ts

@@ -1,8 +0,0 @@
-import { ComputedRef } from 'vue-demi';
-interface ControlAttributes {
-    readonly: ComputedRef<boolean | undefined>;
-    disabled: ComputedRef<boolean | undefined>;
-    'force-state': ComputedRef<string | undefined>;
-}
-export declare function useControlAttributes(): ControlAttributes;
-export {};

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

@@ -1,2 +0,0 @@
-import { ComputedRef } from 'vue-demi';
-export declare function useIdAttribute(): ComputedRef<string | undefined>;

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

@@ -1,12 +0,0 @@
-import { ComputedRef } 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 declare function useValidationAttributes(): ValidationAttributes;
-export {};

package/dist/bundled/v2/useIdAttribute-cf61643f.js

@@ -1,22 +0,0 @@
-import './index-fa6eb4ca.js';
-import { useAttrs, computed, getCurrentInstance } from '@vue/composition-api/dist/vue-composition-api.mjs';
-
-function useControlAttributes() {
-  const attributes = useAttrs();
-  return {
-    readonly: computed(() => attributes['readonly']),
-    disabled: computed(() => attributes['disabled']),
-    'force-state': computed(() => attributes['force-state'])
-  };
-}
-
-function useIdAttribute() {
-  const attributes = useAttrs(),
-    component = getCurrentInstance();
-  return computed(() => {
-    var _a;
-    return (_a = attributes['id']) !== null && _a !== void 0 ? _a : component === null || component === void 0 ? void 0 : component.uid.toString();
-  });
-}
-
-export { useIdAttribute as a, useControlAttributes as u };

package/dist/bundled/v2/useValidationAttributes-6df7bcf9.js

@@ -1,17 +0,0 @@
-import './index-fa6eb4ca.js';
-import { useAttrs, computed } from '@vue/composition-api/dist/vue-composition-api.mjs';
-
-function useValidationAttributes() {
-  const attributes = useAttrs();
-  return {
-    required: computed(() => attributes['required']),
-    minlength: computed(() => attributes['minlength']),
-    maxlength: computed(() => attributes['maxlength']),
-    pattern: computed(() => attributes['pattern']),
-    min: computed(() => attributes['min']),
-    max: computed(() => attributes['max']),
-    step: computed(() => attributes['step'])
-  };
-}
-
-export { useValidationAttributes as u };

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

@@ -1,8 +0,0 @@
-import { ComputedRef } from 'vue-demi';
-interface ControlAttributes {
-    readonly: ComputedRef<boolean | undefined>;
-    disabled: ComputedRef<boolean | undefined>;
-    'force-state': ComputedRef<string | undefined>;
-}
-export declare function useControlAttributes(): ControlAttributes;
-export {};

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

@@ -1,2 +0,0 @@
-import { ComputedRef } from 'vue-demi';
-export declare function useIdAttribute(): ComputedRef<string | undefined>;

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

@@ -1,12 +0,0 @@
-import { ComputedRef } 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 declare function useValidationAttributes(): ValidationAttributes;
-export {};

package/dist/bundled/v3/useIdAttribute-b2e42f31.js

@@ -1,21 +0,0 @@
-import { useAttrs, computed, getCurrentInstance } from 'vue';
-
-function useControlAttributes() {
-  const attributes = useAttrs();
-  return {
-    readonly: computed(() => attributes['readonly']),
-    disabled: computed(() => attributes['disabled']),
-    'force-state': computed(() => attributes['force-state'])
-  };
-}
-
-function useIdAttribute() {
-  const attributes = useAttrs(),
-    component = getCurrentInstance();
-  return computed(() => {
-    var _a;
-    return (_a = attributes['id']) !== null && _a !== void 0 ? _a : component === null || component === void 0 ? void 0 : component.uid.toString();
-  });
-}
-
-export { useIdAttribute as a, useControlAttributes as u };

package/dist/bundled/v3/useValidationAttributes-5428d8fa.js

@@ -1,16 +0,0 @@
-import { useAttrs, computed } from 'vue';
-
-function useValidationAttributes() {
-  const attributes = useAttrs();
-  return {
-    required: computed(() => attributes['required']),
-    minlength: computed(() => attributes['minlength']),
-    maxlength: computed(() => attributes['maxlength']),
-    pattern: computed(() => attributes['pattern']),
-    min: computed(() => attributes['min']),
-    max: computed(() => attributes['max']),
-    step: computed(() => attributes['step'])
-  };
-}
-
-export { useValidationAttributes as u };

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

@@ -1,8 +0,0 @@
-import { ComputedRef } from 'vue-demi';
-interface ControlAttributes {
-    readonly: ComputedRef<boolean | undefined>;
-    disabled: ComputedRef<boolean | undefined>;
-    'force-state': ComputedRef<string | undefined>;
-}
-export declare function useControlAttributes(): ControlAttributes;
-export {};

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

@@ -1,2 +0,0 @@
-import { ComputedRef } from 'vue-demi';
-export declare function useIdAttribute(): ComputedRef<string | undefined>;

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

@@ -1,12 +0,0 @@
-import { ComputedRef } 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 declare function useValidationAttributes(): ValidationAttributes;
-export {};

package/dist/esm/v2/useIdAttribute-859439f0.js

@@ -1,21 +0,0 @@
-import { useAttrs, computed, getCurrentInstance } from 'vue-demi';
-
-function useControlAttributes() {
-  const attributes = useAttrs();
-  return {
-    readonly: computed(() => attributes['readonly']),
-    disabled: computed(() => attributes['disabled']),
-    'force-state': computed(() => attributes['force-state'])
-  };
-}
-
-function useIdAttribute() {
-  const attributes = useAttrs(),
-    component = getCurrentInstance();
-  return computed(() => {
-    var _a;
-    return (_a = attributes['id']) !== null && _a !== void 0 ? _a : component === null || component === void 0 ? void 0 : component.uid.toString();
-  });
-}
-
-export { useIdAttribute as a, useControlAttributes as u };