@onereach/ui-components 2.72.0-beta.2234.0 → 2.72.0

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

@@ -9,9 +9,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 +71,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';
@@ -90,7 +90,10 @@ export default defineComponent({
     OrInlineInputBox,
   },
 
-  inheritAttrs: false,
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue',
+  },
 
   props: {
     modelValue: {
@@ -98,11 +101,6 @@ export default defineComponent({
       default: undefined,
     },
 
-    value: { // TODO: Remove Vue 2 fallback
-      type: [String, Number],
-      default: undefined,
-    },
-
     saveOnBlur: {
       type: Boolean,
       default: false,
@@ -137,7 +135,6 @@ export default defineComponent({
   emits: [
     'update:modelValue',
 
-    'input',
     'keydown',
     'keyup',
     'focus',
@@ -146,21 +143,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,26 +169,28 @@ 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: () => {
-        return props.modelValue ?? props.value; // TODO: Remove Vue 2 fallback
-      },
+      get: () => props.modelValue,
 
       set: (value) => {
-        context.emit('input', value);
         context.emit('update:modelValue', value);
       },
     });
 
     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 +208,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 +239,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.stories3.ts

@@ -23,10 +23,6 @@ export default {
       control: { type: 'text' },
     },
 
-    value: { // TODO: Remove Vue 2 fallback
-      table: { disable: true },
-    },
-
     saveOnBlur: {
       control: { type: 'boolean' },
     },
@@ -101,7 +97,6 @@ const Template: StoryFn<typeof OrInlineTextarea> = (args) => ({
       args,
       model,
       onUpdateModelValue: action('update:modelValue'),
-      onInput: action('input'),
       onKeydown: action('keydown'),
       onKeyup: action('keyup'),
       onFocus: action('focus'),
@@ -114,7 +109,6 @@ const Template: StoryFn<typeof OrInlineTextarea> = (args) => ({
       v-model="model"
       v-bind="args"
       @update:modelValue="onUpdateModelValue"
-      @input="onInput"
       @keydown="onKeydown"
       @keyup="onKeyup"
       @focus="onFocus"

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

@@ -9,9 +9,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 +70,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';
@@ -88,7 +88,10 @@ export default defineComponent({
     OrInlineInputBox,
   },
 
-  inheritAttrs: false,
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue',
+  },
 
   props: {
     modelValue: {
@@ -96,11 +99,6 @@ export default defineComponent({
       default: undefined,
     },
 
-    value: { // TODO: Remove Vue 2 fallback
-      type: String,
-      default: undefined,
-    },
-
     saveOnBlur: {
       type: Boolean,
       default: false,
@@ -125,7 +123,6 @@ export default defineComponent({
   emits: [
     'update:modelValue',
 
-    'input',
     'keydown',
     'keyup',
     'focus',
@@ -134,21 +131,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,26 +156,28 @@ 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: () => {
-        return props.modelValue ?? props.value; // TODO: Remove Vue 2 fallback
-      },
+      get: () => props.modelValue,
 
       set: (value) => {
-        context.emit('input', value);
         context.emit('update:modelValue', value);
       },
     });
 
     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 +195,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 +226,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/index.ts

@@ -0,0 +1 @@
+export { default as OrInput } from './OrInput.vue';

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

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
     :invalid="invalid ? '' : null"
     :readonly="readonly ? '' : null"
@@ -13,15 +12,12 @@
 
 <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>,
@@ -58,14 +54,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 {

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

@@ -17,10 +17,6 @@ export default {
       control: { type: 'text' },
     },
 
-    readonly: {
-      control: { type: 'boolean' },
-    },
-
     maxlength: {
       control: { type: 'number' },
     },
@@ -40,10 +36,6 @@ export default {
       control: { type: 'text' },
     },
 
-    value: { // TODO: Remove Vue 2 fallback
-      table: { disable: true },
-    },
-
     type: {
       control: { type: 'select' },
       options: Object.values(InputType),
@@ -74,6 +66,10 @@ export default {
       control: { type: 'boolean' },
     },
 
+    readonly: {
+      control: { type: 'boolean' },
+    },
+
     disabled: {
       control: { type: 'boolean' },
     },
@@ -141,7 +137,6 @@ const Template: StoryFn<typeof OrInput> = (args) => ({
       args,
       model,
       onUpdateModelValue: action('update:modelValue'),
-      onInput: action('input'),
       onKeydown: action('keydown'),
       onKeyup: action('keyup'),
       onFocus: action('focus'),
@@ -154,7 +149,6 @@ const Template: StoryFn<typeof OrInput> = (args) => ({
       v-model="model"
       v-bind="args"
       @update:modelValue="onUpdateModelValue"
-      @input="onInput"
       @keydown="onKeydown"
       @keyup="onKeyup"
       @focus="onFocus"

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

@@ -5,7 +5,7 @@
   >
     <template v-if="label">
       <OrLabel
-        :control-id="controlId"
+        :control-id="controlAttributes.id"
         :variant="'input'"
         :required="required"
         :disabled="disabled"
@@ -26,14 +26,14 @@
       :disabled="disabled"
     >
       <input
-        :id="controlId"
-        ref="input"
+        ref="control"
         v-model="proxyModelValue"
-        v-bind="$attrs"
+        v-bind="controlAttributes"
         :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="disabled"
+              :disabled="readonly || disabled"
               @click.stop="$emit('update:modelValue', '')"
             />
           </template>
@@ -102,8 +102,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 { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
@@ -125,7 +125,10 @@ export default defineComponent({
     OrLabel,
   },
 
-  inheritAttrs: false,
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue',
+  },
 
   props: {
     modelValue: {
@@ -133,11 +136,6 @@ export default defineComponent({
       default: undefined,
     },
 
-    value: { // TODO: Remove Vue 2 fallback
-      type: [String, Number],
-      default: undefined,
-    },
-
     type: {
       type: String as PropType<InputType>,
       default: InputType.Text,
@@ -173,6 +171,11 @@ export default defineComponent({
       default: false,
     },
 
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+
     disabled: {
       type: Boolean,
       default: false,
@@ -187,7 +190,6 @@ export default defineComponent({
   emits: [
     'update:modelValue',
 
-    'input',
     'keydown',
     'keyup',
     'focus',
@@ -196,23 +198,20 @@ export default defineComponent({
 
   expose: [
     'root',
+
     'focus',
+    'blur',
   ],
 
   setup(props, context) {
-    const currentInstance = getCurrentInstance()!;
-
     // Refs
     const root = ref<HTMLElement>();
-    const input = ref<HTMLInputElement>();
+    const control = ref<HTMLInputElement>();
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-input',
       ...InputRoot,
-      classAttribute.value,
     ]);
 
     const controlStyles = computed(() => [
@@ -220,45 +219,49 @@ 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: () => {
-        return props.modelValue ?? props.value; // TODO: Remove Vue 2 fallback
-      },
+      get: () => props.modelValue,
 
       set: (value) => {
-        context.emit('input', value);
         context.emit('update:modelValue', value);
       },
     });
 
-    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 maxLength = computed(() => controlAttributes.maxlength);
+
+    const invalid = computed(() => !!props.error);
 
     const disclosed = ref(false);
 
     // Methods
     function focus(): void {
-      input.value?.focus();
+      control.value?.focus();
+    }
+
+    function blur(): void {
+      control.value?.blur();
     }
 
     return {
       root,
-      input,
+      control,
       rootStyles,
       controlStyles,
-      controlId,
+      controlAttributes,
       proxyModelValue,
-      invalid,
-      readonly,
       currentLength,
       maxLength,
+      invalid,
       disclosed,
       focus,
+      blur,
     };
   },
 });

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

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
     :disabled="disabled ? '' : null"
   >
@@ -22,15 +21,12 @@
 
 <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,
@@ -62,13 +58,10 @@ 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,7 +1,6 @@
 <template>
   <a
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
     :href="href"
     :disabled="disabled ? '' : null"
@@ -18,15 +17,12 @@
 
 <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,
@@ -68,15 +64,12 @@ 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-list/OrList.stories.ts

@@ -1,7 +1,7 @@
 import OrList from './OrList.vue';
 import { OrIcon } from '../or-icon';
 import { OrButtonV2 as OrButton } from '../or-button-v2';
-import { OrInput } from '../or-inputs';
+import { OrInput } from '../or-input';
 
 import { ArgTypes, Story } from '@storybook/vue';
 import { action } from '@storybook/addon-actions';