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

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

@@ -1,6 +1,7 @@
 <template>
   <div
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
   >
     <div :class="['layout-row', 'm-[-4px] md:m-[-2px]']">
@@ -16,6 +17,7 @@
 
 <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';
 
@@ -26,6 +28,8 @@ export default defineComponent({
     OrIcon,
   },
 
+  inheritAttrs: false,
+
   expose: [
     'root',
   ],
@@ -35,9 +39,12 @@ 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

@@ -1,6 +1,7 @@
 <template>
   <div
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
     :disabled="disabled ? '' : null"
   >
@@ -16,11 +17,14 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue-demi';
+import { useClassAttribute } from '../../hooks';
 import { ErrorAddon, ErrorRoot, ErrorText } from './styles';
 
 export default defineComponent({
   name: 'OrError',
 
+  inheritAttrs: false,
+
   props: {
     disabled: {
       type: Boolean,
@@ -37,9 +41,12 @@ 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

@@ -1,6 +1,7 @@
 <template>
   <div
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
     :disabled="disabled ? '' : null"
   >
@@ -33,6 +34,7 @@
 
 <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';
@@ -44,6 +46,8 @@ export default defineComponent({
     OrIcon,
   },
 
+  inheritAttrs: false,
+
   props: {
     label: {
       type: String,
@@ -87,10 +91,13 @@ 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-fab-v3/OrFab.vue

@@ -1,6 +1,7 @@
 <template>
   <button
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
     :type="'button'"
     :disabled="disabled"
@@ -25,6 +26,8 @@ export default defineComponent({
     OrIcon,
   },
 
+  inheritAttrs: false,
+
   props: {
     icon: {
       type: String,

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

@@ -1,6 +1,7 @@
 <template>
   <div
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
     :disabled="disabled ? '' : null"
   >
@@ -16,11 +17,14 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue-demi';
+import { useClassAttribute } from '../../hooks';
 import { HintAddon, HintRoot, HintText } from './styles';
 
 export default defineComponent({
   name: 'OrHint',
 
+  inheritAttrs: false,
+
   props: {
     disabled: {
       type: Boolean,
@@ -37,9 +41,12 @@ 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,6 +21,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 { OrTooltipV3 as OrTooltip } from '../or-tooltip-v3';
 import { IconButtonColor, IconButtonSize } from './props';
@@ -78,10 +79,13 @@ 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

@@ -1,6 +1,7 @@
 <template>
   <div
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
   >
     {{ icon }}
@@ -9,12 +10,15 @@
 
 <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';
 
 export default defineComponent({
   name: 'OrIcon',
 
+  inheritAttrs: false,
+
   props: {
     icon: {
       type: String,
@@ -41,11 +45,14 @@ 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

@@ -1,6 +1,7 @@
 <template>
   <div
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
     :invalid="invalid ? '' : null"
   >
@@ -10,12 +11,15 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
+import { useClassAttribute } from '../../hooks';
 import { InlineInputBoxSize } from './props';
 import { InlineInputBoxRoot, InlineInputBoxRootSizes } from './styles';
 
 export default defineComponent({
   name: 'OrInlineInputBox',
 
+  inheritAttrs: false,
+
   props: {
     size: {
       type: String as PropType<InlineInputBoxSize>,
@@ -37,10 +41,13 @@ 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

@@ -9,9 +9,9 @@
         :invalid="invalid"
       >
         <input
-          ref="control"
+          :id="controlId"
           v-model="draftModelValue"
-          v-bind="controlAttributes"
+          v-bind="$attrs"
           :class="controlStyles"
           :type="type"
           :placeholder="placeholder"
@@ -71,8 +71,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, reactive, ref, watch } from 'vue-demi';
-import { useControlAttributes, useIdAttribute, useValidationAttributes } from '../../hooks';
+import { computed, defineComponent, getCurrentInstance, PropType, ref, watch } 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';
@@ -90,6 +90,8 @@ export default defineComponent({
     OrInlineInputBox,
   },
 
+  inheritAttrs: false,
+
   props: {
     modelValue: {
       type: [String, Number],
@@ -144,20 +146,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-inline-input',
       ...InlineInputRoot,
+      classAttribute.value,
     ]);
 
     const controlStyles = computed(() => [
@@ -170,11 +173,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: () => {
@@ -189,12 +188,11 @@ export default defineComponent({
 
     const draftModelValue = ref<string | number>('');
 
-    const currentLength = computed(() => draftModelValue.value?.toString().length ?? 0);
-    const maxLength = computed(() => controlAttributes.maxlength);
-
+    const activated = ref(false);
     const invalid = computed(() => !!props.error);
 
-    const activated = ref(false);
+    const currentLength = computed(() => draftModelValue.value?.toString().length ?? 0);
+    const maxLength = computed(() => context.attrs.maxlength as number | undefined);
 
     // Handlers
     function onFocus(event: Event): void {
@@ -212,14 +210,6 @@ 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;
@@ -243,21 +233,18 @@ export default defineComponent({
 
     return {
       root,
-      control,
       rootStyles,
       controlStyles,
       actionStyles,
-      controlAttributes,
+      controlId,
       proxyModelValue,
       draftModelValue,
+      activated,
+      invalid,
       currentLength,
       maxLength,
-      invalid,
-      activated,
       onFocus,
       onBlur,
-      focus,
-      blur,
       apply,
       reset,
     };

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

@@ -9,9 +9,9 @@
         :invalid="invalid"
       >
         <textarea
-          ref="control"
+          :id="controlId"
           v-model="draftModelValue"
-          v-bind="controlAttributes"
+          v-bind="$attrs"
           :class="controlStyles"
           :placeholder="placeholder"
           :activated="activated ? '' : null"
@@ -70,8 +70,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, reactive, ref, watch } from 'vue-demi';
-import { useControlAttributes, useIdAttribute, useValidationAttributes } from '../../hooks';
+import { computed, defineComponent, getCurrentInstance, ref, watch } 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';
@@ -88,6 +88,8 @@ export default defineComponent({
     OrInlineInputBox,
   },
 
+  inheritAttrs: false,
+
   props: {
     modelValue: {
       type: String,
@@ -132,20 +134,21 @@ 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(() => [
@@ -157,11 +160,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: () => {
@@ -176,12 +175,11 @@ export default defineComponent({
 
     const draftModelValue = ref<string>('');
 
-    const currentLength = computed(() => draftModelValue.value?.toString().length ?? 0);
-    const maxLength = computed(() => controlAttributes.maxlength);
-
+    const activated = ref(false);
     const invalid = computed(() => !!props.error);
 
-    const activated = ref(false);
+    const currentLength = computed(() => draftModelValue.value?.toString().length ?? 0);
+    const maxLength = computed(() => context.attrs.maxlength as number | undefined);
 
     // Handlers
     function onFocus(event: Event): void {
@@ -199,14 +197,6 @@ 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;
@@ -230,21 +220,18 @@ export default defineComponent({
 
     return {
       root,
-      control,
       rootStyles,
       controlStyles,
       actionStyles,
-      controlAttributes,
+      controlId,
       proxyModelValue,
       draftModelValue,
+      activated,
+      invalid,
       currentLength,
       maxLength,
-      invalid,
-      activated,
       onFocus,
       onBlur,
-      focus,
-      blur,
       apply,
       reset,
     };

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

@@ -1,6 +1,7 @@
 <template>
   <div
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
     :invalid="invalid ? '' : null"
     :readonly="readonly ? '' : null"
@@ -12,12 +13,15 @@
 
 <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';
 
 export default defineComponent({
   name: 'OrInputBox',
 
+  inheritAttrs: false,
+
   props: {
     variant: {
       type: String as PropType<InputBoxVariant>,
@@ -54,11 +58,14 @@ 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 {

package/src/components/or-input-v3/OrInput.stories3.ts

@@ -17,6 +17,10 @@ export default {
       control: { type: 'text' },
     },
 
+    readonly: {
+      control: { type: 'boolean' },
+    },
+
     maxlength: {
       control: { type: 'number' },
     },
@@ -70,10 +74,6 @@ export default {
       control: { type: 'boolean' },
     },
 
-    readonly: {
-      control: { type: 'boolean' },
-    },
-
     disabled: {
       control: { type: 'boolean' },
     },