@onereach/ui-components 2.72.2-beta.2275.0 → 2.72.2-beta.2277.0

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

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

package/src/components/or-search-v3/OrSearch.vue

@@ -94,12 +94,13 @@ export default defineComponent({
     // Events
     debouncedWatch(
       localModelValue,
-      () => context.emit('search', localModelValue.value),
+      () => localModelValue.value.length > 0 && context.emit('search', localModelValue.value),
       { debounce: props.debounce },
     );
 
     watch(localModelValue, (val, beforeVal) => {
       if (val.length === 0 && beforeVal.length > 0) {
+        context.emit('search');
         context.emit('clear');
       }
     });

package/src/components/or-select-v3/OrSelect.vue

@@ -82,6 +82,7 @@
 
       <div :class="['layout-row']">
         <OrIcon
+          class="select-none"
           :icon="popoverState === 'open' ? 'arrow_drop_up' : 'arrow_drop_down'"
           :variant="'outlined'"
         />

package/src/components/or-select-v3/styles.ts

@@ -24,6 +24,9 @@ export const SelectPlaceholder: string[] = [
   // Theme
   'theme-foreground-outline',
   'dark:theme-foreground-outline-dark',
+
+  //
+  'select-none',
 ];
 
 export const SelectDropdown: string[] = [