@onereach/ui-components 2.71.1-beta.2235.0 → 2.71.1

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-number-input → or-inputs}/OrNumberInput.vue

@@ -62,7 +62,7 @@
 </template>
 <script lang="ts">
 import { defineComponent, ref } from 'vue-demi';
-import { OrInput } from '../or-input';
+import OrInput from './OrInput.vue';
 
 export default defineComponent({
   name: 'OrNumberInput',

package/src/components/{or-password → or-inputs}/OrPassword.vue

@@ -64,8 +64,8 @@
 </template>
 <script lang="ts">
 import { defineComponent, ref } from 'vue-demi';
+import OrInput from './OrInput.vue';
 import { useVModel } from '@vueuse/core';
-import { OrInput } from '../or-input';
 import { useToggle } from '../../hooks';
 import { BUTTON_SIZE, OrIconButton } from '../or-button-v2';
 

package/src/components/{or-search → or-inputs}/OrSearch.vue

@@ -66,7 +66,7 @@
 </template>
 <script lang="ts">
 import { defineComponent, ref } from 'vue-demi';
-import { OrInput } from '../or-input';
+import OrInput from './OrInput.vue';
 import { debouncedWatch } from '@vueuse/core';
 import { BUTTON_SIZE, OrIconButton } from '../or-button-v2';
 

package/src/components/{or-textarea → or-inputs}/OrTextarea.vue

@@ -114,7 +114,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, getCurrentInstance } from 'vue-demi';
+import {
+  defineComponent,
+  ref,
+  getCurrentInstance,
+} from 'vue-demi';
 import { pxToRem } from '../../utils/functions/px-to-rem';
 import {
   cancelAF,
@@ -315,228 +319,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@use "~@onereach/styles/src/global" as *;
-
-.or-textbox {
-  display: flex;
-  align-items: flex-start;
-  justify-content: flex-start;
-  width: 100%;
-
-  &.is-show-info.has-label {
-    align-items: center;
-  }
-
-  &.has-label {
-    align-items: flex-end;
-  }
-
-  .or-label {
-    margin-bottom: $s-1;
-  }
-
-  &--append,
-  &--prepend {
-    position: relative;
-    display: flex;
-    align-items: center;
-    height: px-to-rem(36);
-  }
-
-  &--append {
-    margin-left: px-to-rem(10);
-  }
-
-  &--prepend {
-    margin-right: px-to-rem(10);
-  }
-
-  &--wrapper {
-    width: 100%;
-  }
-
-  &--input {
-    width: 100%;
-    min-width: px-to-rem(114);
-    height: px-to-rem(36);
-    padding: px-to-rem(10);
-    font-family: inherit;
-    font-size: $fs-1;
-    background-color: $c-neutral-1;
-    border: 1px solid $c-neutral-2;
-    border-radius: $s-2;
-    outline: none;
-
-    @include transition(border-color, background-color, -webkit-box-shadow);
-
-    &-textarea {
-      /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
-      @extend .or-textbox--input;
-
-      min-height: px-to-rem(79);
-      max-height: px-to-rem(142);
-      overflow-x: hidden;
-      overflow-y: auto;
-      resize: none;
-    }
-
-    &-wrapper {
-      position: relative;
-      width: 100%;
-    }
-
-    &::placeholder {
-      color: $c-neutral-4;
-
-      @include transition(opacity);
-    }
-
-    &:-webkit-autofill {
-      -webkit-box-shadow: inset 0 0 0 50px $c-neutral-1;
-
-      @include focus {
-        -webkit-box-shadow: inset 0 0 0 50px $c-white;
-      }
-    }
-
-    @include hover {
-      background-color: $c-white;
-      border-color: $c-neutral-2-darken-3;
-      -webkit-box-shadow: inset 0 0 0 50px $c-white;
-    }
-
-    @include active {
-      &:not(:focus) {
-        border-color: $c-neutral-2-darken-5;
-      }
-    }
-
-    @include focus {
-      background-color: $c-white;
-      border-color: $c-primary;
-
-      &::placeholder {
-        opacity: 0;
-      }
-    }
-
-    @include disabled {
-      background-color: $c-neutral-2;
-      border-color: $c-neutral-2;
-    }
-
-    @include has-error {
-      border-color: $c-error;
-
-      @include hover {
-        border-color: $c-error-darken-3;
-      }
-
-      @include focus {
-        border-color: $c-error-darken-5;
-      }
-
-      @include disabled {
-        border-color: $c-error-lighten-20;
-      }
-    }
-  }
-
-  &--textarea {
-    /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
-    @extend .or-textbox--input;
-
-    min-height: px-to-rem(79);
-    max-height: px-to-rem(142);
-    overflow-x: hidden;
-    overflow-y: auto;
-    resize: none;
-  }
-
-  &--info {
-    width: 100%;
-    margin: 0;
-
-    @include transition(height, opacity);
-  }
-
-  &--counter {
-    flex-shrink: 0;
-    margin-left: auto;
-    font-size: $fs-0;
-    line-height: px-to-rem(14);
-    color: $c-neutral-4;
-  }
-
-  &--hint,
-  &-error {
-    flex-shrink: 1;
-
-    @include transition(height, opacity);
-  }
-
-  &.is-small {
-    .or-textbox {
-      &--input {
-        height: px-to-rem(30);
-        padding: px-to-rem(8) px-to-rem(10);
-        font-size: $fs-0;
-
-        &-toggle-btn {
-          .material-icons {
-            font-size: $fs-1;
-          }
-        }
-      }
-    }
-  }
-
-  &.has-counter {
-    .or-textbox {
-      &--hint,
-      &--error {
-        padding-right: px-to-rem(15);
-      }
-    }
-  }
-
-  &.is-show-info {
-    .or-textbox {
-      &--info {
-        display: flex;
-        align-items: flex-start;
-        justify-content: space-between;
-        padding-top: px-to-rem(4);
-      }
-    }
-  }
-
-  @include disabled {
-    .or-textbox {
-      &--input-toggle-btn {
-        pointer-events: none;
-      }
-    }
-  }
-
-  @include has-error {
-    .or-textbox {
-      &--input {
-        border-color: $c-error;
-
-        @include hover {
-          border-color: $c-error-darken-3;
-        }
-
-        @include focus {
-          border-color: $c-error-darken-5;
-        }
-
-        @include disabled {
-          border-color: $c-error;
-        }
-      }
-    }
-  }
-}
+@import "./styles.scss";
 </style>

package/src/components/or-inputs/index.ts

@@ -0,0 +1,5 @@
+export { default as OrTextarea } from './OrTextarea.vue';
+export { default as OrInput } from './OrInput.vue';
+export { default as OrNumberInput } from './OrNumberInput.vue';
+export { default as OrPassword } from './OrPassword.vue';
+export { default as OrSearch } from './OrSearch.vue';

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-input';
+import { OrInput } from '../or-inputs';
 
 import { ArgTypes, Story } from '@storybook/vue';
 import { action } from '@storybook/addon-actions';

package/src/components/or-list-of-inputs/OrListOfInputs.vue

@@ -76,7 +76,7 @@ import { defineComponent, PropType } from 'vue-demi';
 import _ from 'lodash';
 
 import { OrList } from '../or-list';
-import { OrInput } from '../or-input';
+import { OrInput } from '../or-inputs';
 import { OrIcon } from '../or-icon';
 import { OrIconButton } from '../or-button-v2';
 

package/src/components/or-loader-v3/OrLoader.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
   >
     <template v-if="title">
@@ -81,15 +80,12 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
 import { LoaderColor, LoaderSize, LoaderVariant } from './props';
-import { LoaderRoot, LoaderRootColors, LoaderTitle, LoaderDescription, LoaderContainer } from './styles';
+import { LoaderContainer, LoaderDescription, LoaderRoot, LoaderRootColors, LoaderTitle } from './styles';
 
 export default defineComponent({
   name: 'OrLoader',
 
-  inheritAttrs: false,
-
   props: {
     variant: {
       type: String as PropType<LoaderVariant>,
@@ -126,13 +122,10 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-loader',
       ...LoaderRoot,
       ...LoaderRootColors[props.color],
-      classAttribute.value,
     ]);
 
     const titleStyles = computed(() => [

package/src/components/or-menu-item-v3/OrMenuItem.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
     :tabindex="!disabled ? 0 : null"
     :selected="selected ? '' : null"
@@ -22,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 { MenuItemRoot } from './styles';
 
@@ -33,8 +31,6 @@ export default defineComponent({
     OrIcon,
   },
 
-  inheritAttrs: false,
-
   props: {
     icon: {
       type: [String, Object] as PropType<string | InstanceType<typeof OrIcon>['$props']>,
@@ -67,12 +63,9 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-menu-item',
       ...MenuItemRoot,
-      classAttribute.value,
     ]);
 
     return {

package/src/components/or-menu-v3/OrMenu.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
   >
     <OrPopover
@@ -25,7 +24,6 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
 import { OrPopoverV3 as OrPopover } from '../or-popover-v3';
 import { MenuPlacement } from './props';
 import { MenuBody, MenuRoot } from './styles';
@@ -37,8 +35,6 @@ export default defineComponent({
     OrPopover,
   },
 
-  inheritAttrs: false,
-
   props: {
     trigger: {
       type: HTMLElement,
@@ -72,12 +68,9 @@ export default defineComponent({
     const isOpen = computed(() => popover.value?.isOpen);
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-menu',
       ...MenuRoot,
-      classAttribute.value,
     ]);
 
     const bodyStyles = computed(() => [

package/src/components/or-modal/OrModal.stories.ts

@@ -7,7 +7,7 @@ import { OrOverflowMenu } from '../or-overflow-menu';
 import { OrModalSizes } from './constants';
 import { OrCollapse } from '../or-collapse';
 import { OrSelect } from '../or-select';
-import { OrInput } from '../or-input';
+import { OrInput } from '../or-inputs';
 import { getTestOption } from '../or-select/stories.helpers';
 import _ from 'lodash';
 

package/src/components/or-modal-v3/OrModal.vue

@@ -31,7 +31,6 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref, watch } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
 import { OrOverlayV3 as OrOverlay } from '../or-overlay-v3';
 import { ModalSize } from './props';
@@ -75,13 +74,10 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-modal',
       ...ModalRoot,
       ...ModalRootSizes[props.size],
-      classAttribute.value,
     ]);
 
     const headerStyles = computed(() => [