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

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

@@ -114,11 +114,7 @@
 </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,
@@ -319,5 +315,228 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import "./styles.scss";
+@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;
+        }
+      }
+    }
+  }
+}
 </style>

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

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

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' },
     },
@@ -35,6 +39,10 @@ export default {
       control: { type: 'text' },
     },
 
+    value: { // TODO: Remove Vue 2 fallback
+      table: { disable: true },
+    },
+
     size: {
       control: { type: 'select' },
       options: Object.values(TextareaSize),
@@ -60,10 +68,6 @@ export default {
       control: { type: 'boolean' },
     },
 
-    readonly: {
-      control: { type: 'boolean' },
-    },
-
     disabled: {
       control: { type: 'boolean' },
     },
@@ -127,6 +131,7 @@ const Template: StoryFn<typeof OrTextarea> = (args) => ({
       args,
       model,
       onUpdateModelValue: action('update:modelValue'),
+      onInput: action('input'),
       onKeydown: action('keydown'),
       onKeyup: action('keyup'),
       onFocus: action('focus'),
@@ -139,6 +144,7 @@ const Template: StoryFn<typeof OrTextarea> = (args) => ({
       v-model="model"
       v-bind="args"
       @update:modelValue="onUpdateModelValue"
+      @input="onInput"
       @keydown="onKeydown"
       @keyup="onKeyup"
       @focus="onFocus"

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

@@ -5,7 +5,7 @@
   >
     <template v-if="label">
       <OrLabel
-        :control-id="controlAttributes.id"
+        :control-id="controlId"
         :variant="'input'"
         :required="required"
         :disabled="disabled"
@@ -25,13 +25,12 @@
       :disabled="disabled"
     >
       <textarea
-        ref="control"
+        :id="controlId"
         v-model="proxyModelValue"
-        v-bind="controlAttributes"
+        v-bind="$attrs"
         :class="controlStyles"
         :placeholder="placeholder"
         :required="required"
-        :readonly="readonly"
         :disabled="disabled"
         @keydown="$emit('keydown', $event)"
         @keyup="$emit('keyup', $event)"
@@ -71,8 +70,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, reactive, ref } from 'vue-demi';
-import { 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';
@@ -90,10 +89,7 @@ export default defineComponent({
     OrLabel,
   },
 
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue',
-  },
+  inheritAttrs: false,
 
   props: {
     modelValue: {
@@ -101,6 +97,11 @@ export default defineComponent({
       default: undefined,
     },
 
+    value: { // TODO: Remove Vue 2 fallback
+      type: String,
+      default: undefined,
+    },
+
     size: {
       type: String as PropType<TextareaSize>,
       default: TextareaSize.M,
@@ -131,11 +132,6 @@ export default defineComponent({
       default: false,
     },
 
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-
     disabled: {
       type: Boolean,
       default: false,
@@ -145,6 +141,7 @@ export default defineComponent({
   emits: [
     'update:modelValue',
 
+    'input',
     'keydown',
     'keyup',
     'focus',
@@ -153,20 +150,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-textarea',
       ...TextareaRoot,
+      classAttribute.value,
     ]);
 
     const controlStyles = computed(() => [
@@ -174,46 +172,35 @@ 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: () => props.modelValue,
+      get: () => {
+        return props.modelValue ?? props.value; // TODO: Remove Vue 2 fallback
+      },
 
       set: (value) => {
+        context.emit('input', value);
         context.emit('update:modelValue', value);
       },
     });
 
-    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/components/or-tooltip-v3/OrTooltip.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
   >
     <slot />
@@ -26,6 +27,7 @@
 <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';
@@ -37,6 +39,8 @@ export default defineComponent({
     OrPopover,
   },
 
+  inheritAttrs: false,
+
   props: {
     text: {
       type: String,
@@ -67,9 +71,12 @@ 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,7 +1,5 @@
-export { useControlAttributes } from './useControlAttributes';
+export { useClassAttribute } from './useClassAttribute';
 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/useClassAttribute.ts

@@ -0,0 +1,39 @@
+import { computed, ComputedRef, getCurrentInstance, isVue2, UnwrapRef, VNode } from 'vue-demi';
+
+export type UseClassAttributeReturn = ComputedRef<string | undefined>;
+
+export function useClassAttribute(): UseClassAttributeReturn {
+  const currentInstance = getCurrentInstance();
+
+  // Functions
+  function composeClass(): UnwrapRef<UseClassAttributeReturn> {
+    const { staticClass = '', class: classProperty } = (currentInstance?.vnode as unknown as VNode).data ?? {};
+
+    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(() => {
+    if (isVue2) {
+      return currentInstance?.attrs.class as UnwrapRef<UseClassAttributeReturn> ?? composeClass();
+    }
+  });
+}

package/dist/bundled/v2/components/or-inputs/index.d.ts

@@ -1,5 +0,0 @@
-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/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/OrIcon-1a5c9091.js

@@ -1,12 +0,0 @@
-import { s as script } from './OrIcon.vue_vue_type_script_lang-bdbaad94.js';
-import { openBlock, createElementBlock, normalizeClass, toDisplayString } from 'vue';
-
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", {
-    ref: "root",
-    class: normalizeClass(_ctx.rootStyles)
-  }, toDisplayString(_ctx.icon), 3 /* TEXT, CLASS */);
-}
-
-script.render = render;
-script.__file = "src/components/or-icon-v3/OrIcon.vue";