@onereach/ui-components 2.71.1-beta.2237.0 → 2.71.2-beta.2238.0

package/src/components/or-switch-v3/OrSwitch.vue

@@ -5,12 +5,12 @@
   >
     <template v-if="!loading">
       <input
-        v-bind="$attrs"
-        :id="controlId"
+        ref="control"
         v-model="proxyModelValue"
+        v-bind="controlAttributes"
         :class="controlStyles"
         type="checkbox"
-        :value="inputValue"
+        :value="value"
         :required="required"
         :disabled="disabled"
         @focus="$emit('focus', $event)"
@@ -33,7 +33,7 @@
 
     <template v-if="$slots.default || label">
       <OrLabel
-        :control-id="controlId"
+        :control-id="controlAttributes.id"
         :variant="labelVariant"
         :required="required"
         :disabled="disabled"
@@ -49,8 +49,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 } 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';
@@ -63,7 +63,10 @@ export default defineComponent({
     OrLoader,
   },
 
-  inheritAttrs: false,
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue',
+  },
 
   props: {
     modelValue: {
@@ -71,12 +74,7 @@ export default defineComponent({
       default: undefined,
     },
 
-    value: { // TODO: Remove Vue 2 fallback
-      type: [Boolean, Array] as PropType<boolean | string[]>,
-      default: undefined,
-    },
-
-    inputValue: { // TODO: Rename to `value` after complete migration to Vue 3
+    value: {
       type: String,
       default: undefined,
     },
@@ -110,28 +108,26 @@ export default defineComponent({
   emits: [
     'update:modelValue',
 
-    'input',
     'focus',
     'blur',
   ],
 
   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-switch',
       ...SwitchRoot,
-      classAttribute.value,
     ]);
 
     const controlStyles = computed(() => [
@@ -145,26 +141,38 @@ export default defineComponent({
     ]);
 
     // State
-    const controlId = ref(context.attrs.id as string ?? currentInstance.uid.toString());
+    const controlAttributes = reactive({
+      id: useIdAttribute(),
+      ...useControlAttributes(),
+    });
 
     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);
       },
     });
 
+    // Methods
+    function focus(): void {
+      control.value?.focus();
+    }
+
+    function blur(): void {
+      control.value?.blur();
+    }
+
     return {
       root,
+      control,
       rootStyles,
       controlStyles,
       loaderStyles,
-      controlId,
+      controlAttributes,
       proxyModelValue,
+      focus,
+      blur,
     };
   },
 });

package/src/components/or-tab-v3/OrTab.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
     :tabindex="0"
     :selected="selected ? '' : null"
@@ -15,14 +14,11 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
 import { TabRoot } from './styles';
 
 export default defineComponent({
   name: 'OrTab',
 
-  inheritAttrs: false,
-
   props: {
     selected: {
       type: Boolean,
@@ -45,12 +41,9 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-tab',
       ...TabRoot,
-      classAttribute.value,
     ]);
 
     return {

package/src/components/or-tabs-v3/OrTabs.stories3.ts

@@ -25,10 +25,6 @@ export default {
       control: { type: 'text' },
     },
 
-    value: { // TODO: Remove Vue 2 fallback
-      table: { disable: true },
-    },
-
     variant: {
       control: { type: 'select' },
       options: Object.values(TabsVariant),
@@ -74,7 +70,6 @@ const Template: StoryFn<typeof OrTabs> = (args) => ({
       args,
       model,
       onUpdateModelValue: action('update:modelValue'),
-      onInput: action('input'),
     };
   },
 
@@ -83,7 +78,6 @@ const Template: StoryFn<typeof OrTabs> = (args) => ({
       v-model="model"
       v-bind="args"
       @update:modelValue="onUpdateModelValue"
-      @input="onInput"
     >
       <template v-for="item in args.items" #[item.value]>
         {{ item.label }} Content

package/src/components/or-tabs-v3/OrTabs.vue

@@ -47,7 +47,6 @@
 <script lang="ts">
 import { useResizeObserver } from '@vueuse/core';
 import { computed, defineComponent, nextTick, onMounted, PropType, reactive, ref, watch } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import { OrMenuItemV3 as OrMenuItem } from '../or-menu-item-v3';
 import { OrMenuV3 as OrMenu } from '../or-menu-v3';
@@ -68,6 +67,11 @@ export default defineComponent({
 
   inheritAttrs: false,
 
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue',
+  },
+
   props: {
     items: {
       type: Array as PropType<TabsItem[]>,
@@ -79,11 +83,6 @@ export default defineComponent({
       default: undefined,
     },
 
-    value: { // TODO: Remove Vue 2 fallback
-      type: [String, Number],
-      default: undefined,
-    },
-
     variant: {
       type: String as PropType<TabsVariant>,
       default: TabsVariant.Default,
@@ -92,8 +91,6 @@ export default defineComponent({
 
   emits: [
     'update:modelValue',
-
-    'input',
   ],
 
   expose: [
@@ -111,13 +108,10 @@ export default defineComponent({
     const overflowMenuRoot = computed(() => overflowMenu.value?.root);
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-tabs',
       ...TabsRoot,
       ...TabsRootVariants[props.variant],
-      classAttribute.value,
     ]);
 
     // State
@@ -127,19 +121,16 @@ export default defineComponent({
     });
 
     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 activeTab = computed(() => props.items.find(({ value }) => value === proxyModelValue.value)!);
 
-    // Functions
+    // Methods
     function rearrangeTabs(items: TabsItem[], activeTab: TabsItem, rootElement: Element): typeof tabs {
       const { children } = rootElement;
 

package/src/components/or-tag-v3/OrTag.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
     :tabindex="!disabled && variant === 'button' ? 0 : null"
     :disabled="disabled ? '' : null"
@@ -26,7 +25,6 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref, unref, watchPostEffect } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
 import { TagColor, TagVariant } from './props';
 import { TagRoot, TagRootColors, TagRootVariants } from './styles';
@@ -38,8 +36,6 @@ export default defineComponent({
     OrIconButton,
   },
 
-  inheritAttrs: false,
-
   props: {
     variant: {
       type: String as PropType<TagVariant>,
@@ -74,14 +70,11 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-tag',
       ...TagRoot,
       ...TagRootVariants[props.variant],
       ...!custom.value ? TagRootColors[props.color as TagColor] : [],
-      classAttribute.value,
     ]);
 
     // State

package/src/components/or-text-v3/OrText.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
   >
     <div :class="mainTextStyles">
@@ -16,14 +15,11 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
 import { MainText, RestText, TextRoot } from './styles';
 
 export default defineComponent({
   name: 'OrText',
 
-  inheritAttrs: false,
-
   props: {
     text: {
       type: String,
@@ -45,12 +41,9 @@ export default defineComponent({
     const root = ref<HTMLElement>();
 
     // Styles
-    const classAttribute = useClassAttribute();
-
     const rootStyles = computed(() => [
       'or-text',
       ...TextRoot,
-      classAttribute.value,
     ]);
 
     const mainTextStyles = computed(() => [

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