@onereach/ui-components 2.71.2-beta.2244.0 → 2.71.3-beta.2243.0

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

@@ -42,30 +42,40 @@
       >
 
       <div :class="['layout-row']">
-        <template v-if="type === 'password'">
-          <OrIconButton
-            :icon="{ icon: disclosed ? 'visibility_off' : 'visibility', variant: 'filled' }"
-            :color="'inherit'"
-            :disabled="disabled"
-            @click.stop="disclosed = !disclosed"
+        <template v-if="loading">
+          <OrLoader
+            :variant="'circular'"
+            :color="'primary'"
+            :size="isMobile ? 'm' : 's'"
           />
         </template>
 
-        <template v-if="type === 'search'">
-          <template v-if="modelValue">
+        <template v-else>
+          <template v-if="type === 'password'">
             <OrIconButton
-              :icon="'close'"
+              :icon="{ icon: disclosed ? 'visibility_off' : 'visibility', variant: 'filled' }"
               :color="'inherit'"
-              :disabled="readonly || disabled"
-              @click.stop="$emit('update:modelValue', '')"
+              :disabled="disabled"
+              @click.stop="disclosed = !disclosed"
             />
           </template>
 
-          <template v-else>
-            <OrIcon
-              :icon="'search'"
-              :variant="'outlined'"
-            />
+          <template v-if="type === 'search'">
+            <template v-if="modelValue">
+              <OrIconButton
+                :icon="'close'"
+                :color="'inherit'"
+                :disabled="readonly || disabled"
+                @click.stop="$emit('update:modelValue', '')"
+              />
+            </template>
+
+            <template v-else>
+              <OrIcon
+                :icon="'search'"
+                :variant="'outlined'"
+              />
+            </template>
           </template>
         </template>
       </div>
@@ -103,13 +113,14 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, reactive, ref } from 'vue-demi';
-import { useControlAttributes, useIdAttribute, useValidationAttributes } from '../../hooks';
+import { useControlAttributes, useIdAttribute, useResponsive, 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';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import { OrInputBoxV3 as OrInputBox } from '../or-input-box-v3';
 import { OrLabelV3 as OrLabel } from '../or-label-v3';
+import { OrLoaderV3 as OrLoader } from '../or-loader-v3';
 import { InputSize, InputType } from './props';
 import { InputControl, InputRoot } from './styles';
 
@@ -123,6 +134,7 @@ export default defineComponent({
     OrIconButton,
     OrInputBox,
     OrLabel,
+    OrLoader,
   },
 
   model: {
@@ -166,6 +178,11 @@ export default defineComponent({
       default: undefined,
     },
 
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+
     required: {
       type: Boolean,
       default: false,
@@ -240,6 +257,8 @@ export default defineComponent({
 
     const disclosed = ref(false);
 
+    const { isMobile } = useResponsive();
+
     // Methods
     function focus(): void {
       control.value?.focus();
@@ -260,6 +279,7 @@ export default defineComponent({
       maxLength,
       invalid,
       disclosed,
+      isMobile,
       focus,
       blur,
     };

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';

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-inputs';
+import { OrInput } from '../or-input';
 import { OrIcon } from '../or-icon';
 import { OrIconButton } from '../or-button-v2';
 

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-inputs';
+import { OrInput } from '../or-input';
 import { getTestOption } from '../or-select/stories.helpers';
 import _ from 'lodash';
 

package/src/components/{or-inputs → or-number-input}/OrNumberInput.vue

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

package/src/components/or-number-input/index.ts

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

package/src/components/{or-inputs → or-password}/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-password/index.ts

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

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

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

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

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

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/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';