@onereach/ui-components 10.3.2 → 10.3.3-beta.4312.0

package/src/components/or-code-v3/partials/OrCodeControl.vue

@@ -31,27 +31,23 @@
       />
     </OrInputBox>
 
-    <div
-      v-show="!error"
-      :class="['contents']"
-    >
-      <template v-if="$slots.hint || hint">
-        <OrHint :disabled="disabled">
-          <slot name="hint">
-            {{ hint }}
-          </slot>
-        </OrHint>
-      </template>
-    </div>
-
-    <div
+    <template v-if="$slots.hint || hint">
+      <OrHint
+        v-show="!error"
+        :disabled="disabled"
+      >
+        <slot name="hint">
+          {{ hint }}
+        </slot>
+      </OrHint>
+    </template>
+
+    <OrError
       v-show="typeof error === 'string' && error.length > 0"
-      :class="['contents']"
+      :disabled="disabled"
     >
-      <OrError :disabled="disabled">
-        {{ error }}
-      </OrError>
-    </div>
+      {{ error }}
+    </OrError>
   </div>
 </template>
 

package/src/components/or-combined-input-v3/OrCombinedInput.vue

@@ -30,32 +30,28 @@
       />
     </div>
 
-    <div
-      v-show="!error"
-      :class="['contents']"
-    >
-      <template v-if="$slots.hint || hint">
-        <OrHint :disabled="disabled">
-          <slot name="hint">
-            {{ hint }}
-          </slot>
-        </OrHint>
-      </template>
-    </div>
+    <template v-if="$slots.hint || hint">
+      <OrHint
+        v-show="!error"
+        :disabled="disabled"
+      >
+        <slot name="hint">
+          {{ hint }}
+        </slot>
+      </OrHint>
+    </template>
 
-    <div
+    <OrError
       v-show="typeof error === 'string' && error.length > 0"
-      :class="['contents']"
+      :disabled="disabled"
     >
-      <OrError :disabled="disabled">
-        {{ error }}
-      </OrError>
-    </div>
+      {{ error }}
+    </OrError>
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, h, PropType, ref } from 'vue-demi';
+import { computed, defineComponent, PropType, ref } from 'vue-demi';
 import { OrErrorV3 as OrError } from '../or-error-v3';
 import { OrHintV3 as OrHint } from '../or-hint-v3';
 import { InputBoxSize } from '../or-input-box-v3';

package/src/components/or-date-picker-v3/OrDatePicker.vue

@@ -104,21 +104,23 @@
       </template>
     </OrInputBox>
 
-    <template v-if="!error">
-      <template v-if="$slots.hint || hint">
-        <OrHint :disabled="disabled">
-          <slot name="hint">
-            {{ hint }}
-          </slot>
-        </OrHint>
-      </template>
+    <template v-if="$slots.hint || hint">
+      <OrHint
+        v-show="!error"
+        :disabled="disabled"
+      >
+        <slot name="hint">
+          {{ hint }}
+        </slot>
+      </OrHint>
     </template>
 
-    <template v-if="typeof error === 'string'">
-      <OrError :disabled="disabled">
-        {{ error }}
-      </OrError>
-    </template>
+    <OrError
+      v-show="typeof error === 'string' && error.length > 0"
+      :disabled="disabled"
+    >
+      {{ error }}
+    </OrError>
   </div>
 </template>
 

package/src/components/or-date-range-picker-v3/OrDateRangePicker.vue

@@ -153,21 +153,23 @@
       </template>
     </OrInputBox>
 
-    <template v-if="!error">
-      <template v-if="$slots.hint || hint">
-        <OrHint :disabled="disabled">
-          <slot name="hint">
-            {{ hint }}
-          </slot>
-        </OrHint>
-      </template>
+    <template v-if="$slots.hint || hint">
+      <OrHint
+        v-show="!error"
+        :disabled="disabled"
+      >
+        <slot name="hint">
+          {{ hint }}
+        </slot>
+      </OrHint>
     </template>
 
-    <template v-if="typeof error === 'string'">
-      <OrError :disabled="disabled">
-        {{ error }}
-      </OrError>
-    </template>
+    <OrError
+      v-show="typeof error === 'string' && error.length > 0"
+      :disabled="disabled"
+    >
+      {{ error }}
+    </OrError>
   </div>
 </template>
 

package/src/components/or-date-time-picker-v3/OrDateTimePicker.vue

@@ -152,21 +152,23 @@
       </template>
     </OrInputBox>
 
-    <template v-if="!error">
-      <template v-if="$slots.hint || hint">
-        <OrHint :disabled="disabled">
-          <slot name="hint">
-            {{ hint }}
-          </slot>
-        </OrHint>
-      </template>
+    <template v-if="$slots.hint || hint">
+      <OrHint
+        v-show="!error"
+        :disabled="disabled"
+      >
+        <slot name="hint">
+          {{ hint }}
+        </slot>
+      </OrHint>
     </template>
 
-    <template v-if="typeof error === 'string'">
-      <OrError :disabled="disabled">
-        {{ error }}
-      </OrError>
-    </template>
+    <OrError
+      v-show="typeof error === 'string' && error.length > 0"
+      :disabled="disabled"
+    >
+      {{ error }}
+    </OrError>
   </div>
 </template>
 

package/src/components/or-inline-input-v3/OrInlineInput.vue

@@ -41,32 +41,11 @@
       </template>
     </div>
 
-    <div
-      v-show="!error"
-      :class="['contents']"
-    >
-      <template v-if="hint || maxLength">
-        <OrHint>
-          <slot name="hint">
-            {{ hint }}
-          </slot>
-
-          <template
-            v-if="maxLength"
-            v-slot:addon
-          >
-            {{ length }} / {{ maxLength }}
-          </template>
-        </OrHint>
-      </template>
-    </div>
-
-    <div
-      v-show="typeof error === 'string' && error.length > 0"
-      :class="['contents']"
-    >
-      <OrError>
-        {{ error }}
+    <template v-if="$slots.hint || hint || maxLength">
+      <OrHint v-show="!error">
+        <slot name="hint">
+          {{ hint }}
+        </slot>
 
         <template
           v-if="maxLength"
@@ -74,8 +53,19 @@
         >
           {{ length }} / {{ maxLength }}
         </template>
-      </OrError>
-    </div>
+      </OrHint>
+    </template>
+
+    <OrError v-show="typeof error === 'string' && error.length > 0">
+      {{ error }}
+
+      <template
+        v-if="maxLength"
+        v-slot:addon
+      >
+        {{ length }} / {{ maxLength }}
+      </template>
+    </OrError>
   </div>
 </template>
 

package/src/components/or-inline-textarea-v3/OrInlineTextarea.vue

@@ -40,32 +40,11 @@
       </template>
     </div>
 
-    <div
-      v-show="!error"
-      :class="['contents']"
-    >
-      <template v-if="hint || maxLength">
-        <OrHint>
-          <slot name="hint">
-            {{ hint }}
-          </slot>
-
-          <template
-            v-if="maxLength"
-            v-slot:addon
-          >
-            {{ length }} / {{ maxLength }}
-          </template>
-        </OrHint>
-      </template>
-    </div>
-
-    <div
-      v-show="typeof error === 'string' && error.length > 0"
-      :class="['contents']"
-    >
-      <OrError>
-        {{ error }}
+    <template v-if="$slots.hint || hint || maxLength">
+      <OrHint v-show="!error">
+        <slot name="hint">
+          {{ hint }}
+        </slot>
 
         <template
           v-if="maxLength"
@@ -73,8 +52,19 @@
         >
           {{ length }} / {{ maxLength }}
         </template>
-      </OrError>
-    </div>
+      </OrHint>
+    </template>
+
+    <OrError v-show="typeof error === 'string' && error.length > 0">
+      {{ error }}
+
+      <template
+        v-if="maxLength"
+        v-slot:addon
+      >
+        {{ length }} / {{ maxLength }}
+      </template>
+    </OrError>
   </div>
 </template>
 

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

@@ -53,7 +53,7 @@
         <template v-if="loading">
           <OrLoader
             :variant="'circular'"
-            :color="'primary'"
+            :color="error ? 'danger' : 'primary'"
             :size="isMobile ? 'm' : 's'"
           />
         </template>
@@ -69,11 +69,11 @@
           </template>
 
           <template v-if="type === 'search'">
-            <template v-if="modelValue">
+            <template v-if="modelValue && !readonly">
               <OrIconButton
                 :icon="'close'"
                 :color="'inherit'"
-                :disabled="readonly || disabled"
+                :disabled="disabled"
                 @click.stop="$emit('update:modelValue', '')"
               />
             </template>
@@ -89,32 +89,14 @@
       </template>
     </OrInputBox>
 
-    <div
-      v-show="!error"
-      :class="['contents']"
-    >
-      <template v-if="$slots.hint || hint || maxLength">
-        <OrHint :disabled="disabled">
-          <slot name="hint">
-            {{ hint }}
-          </slot>
-
-          <template
-            v-if="maxLength"
-            v-slot:addon
-          >
-            {{ length }} / {{ maxLength }}
-          </template>
-        </OrHint>
-      </template>
-    </div>
-
-    <div
-      v-show="typeof error === 'string' && error.length > 0"
-      :class="['contents']"
-    >
-      <OrError :disabled="disabled">
-        {{ error }}
+    <template v-if="$slots.hint || hint || maxLength">
+      <OrHint
+        v-show="!error"
+        :disabled="disabled"
+      >
+        <slot name="hint">
+          {{ hint }}
+        </slot>
 
         <template
           v-if="maxLength"
@@ -122,8 +104,22 @@
         >
           {{ length }} / {{ maxLength }}
         </template>
-      </OrError>
-    </div>
+      </OrHint>
+    </template>
+
+    <OrError
+      v-show="typeof error === 'string' && error.length > 0"
+      :disabled="disabled"
+    >
+      {{ error }}
+
+      <template
+        v-if="maxLength"
+        v-slot:addon
+      >
+        {{ length }} / {{ maxLength }}
+      </template>
+    </OrError>
   </div>
 </template>
 

package/src/components/or-range-slider-v3/OrRangeSlider.vue

@@ -554,15 +554,15 @@ export default defineComponent({
     });
 
     // Constraints
-    watch(toRef(props, 'minValue'), (value) => {
+    watch(() => props.minValue, (value) => {
       if (value >= props.maxValue) {
-        throw new Error('OrRangeSlider: `minValue` cannot be greater or equal to `maxValue`.');
+        throw new Error('[OrRangeSlider]: `minValue` must be lesser than `maxValue`.');
       }
     }, { immediate: true });
 
-    watch(toRef(props, 'maxValue'), (value) => {
+    watch(() => props.maxValue, (value) => {
       if (value <= props.minValue) {
-        throw new Error('OrRangeSlider: `maxValue` cannot be lesser or equal to `minValue`.');
+        throw new Error('[OrRangeSlider]: `maxValue` must be greater than `minValue`.');
       }
     }, { immediate: true });
 

package/src/components/or-rich-text-editor-v3/OrRichTextEditor.vue

@@ -219,6 +219,7 @@ import Underline from '@tiptap/extension-underline';
 import StarterKit from '@tiptap/starter-kit';
 
 import codemirrorNode from './utils/codemirror/codemirrorNode';
+import { isArray } from '../../utils';
 
 export default defineComponent({
   name: 'OrRichTextEditor',
@@ -554,7 +555,7 @@ export default defineComponent({
     };
 
     const isVisible = (value: string | Array<string>) => {
-      if (Array.isArray(value)) {
+      if (isArray(value)) {
         const isHaveNotVisibleTools = value.some(item => notVisibleTools.value.has(item));
         return isHaveNotVisibleTools;
       }

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

@@ -234,35 +234,32 @@
       </OrPopover>
     </OrInputBox>
 
-    <div
-      v-show="!error"
-      :class="['contents']"
-    >
-      <template v-if="$slots.hint || hint">
-        <OrHint :disabled="disabled">
-          <slot name="hint">
-            {{ hint }}
-          </slot>
-        </OrHint>
-      </template>
-    </div>
-
-    <div
+    <template v-if="$slots.hint || hint">
+      <OrHint
+        v-show="!error"
+        :disabled="disabled"
+      >
+        <slot name="hint">
+          {{ hint }}
+        </slot>
+      </OrHint>
+    </template>
+
+    <OrError
       v-show="typeof error === 'string' && error.length > 0"
-      :class="['contents']"
+      :disabled="disabled"
     >
-      <OrError :disabled="disabled">
-        {{ error }}
-      </OrError>
-    </div>
+      {{ error }}
+    </OrError>
   </div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, getCurrentInstance, PropType, ref, toRefs, watch } from 'vue-demi';
 import { DropdownClose, DropdownOpen } from '../../directives';
+import { searchItemsByLabel } from '../../helpers';
 import { useProxyModelValue, useResponsive } from '../../hooks';
-import { isEmpty } from '../../utils';
+import { isArray, isEmpty, toArray } from '../../utils';
 import { OrCheckboxV3 as OrCheckbox } from '../or-checkbox-v3';
 import { OrErrorV3 as OrError } from '../or-error-v3';
 import { OrExpansionPanelV3 as OrExpansionPanel } from '../or-expansion-panel-v3';
@@ -278,7 +275,6 @@ import { TagsOverflow } from '../or-tags-v3';
 import { OrSelectMultipleControl, OrSelectSingleControl } from './partials';
 import { Select, SelectControl, SelectDropdown, SelectDropdownDefault, SelectDropdownFlipped, SelectDropdownItem, SelectNoSearchResults, SelectSearchControl } from './styles';
 import { RawValue, SelectGroupByFunction, SelectOption, SelectSearchFunction, SelectValue } from './types';
-import { castToMultipleValue } from './utils/castToMultipleValue';
 
 export default defineComponent({
   name: 'OrSelect',
@@ -310,6 +306,11 @@ export default defineComponent({
   },
 
   props: {
+    modelValue: {
+      type: [Object, String, Number, Array] as PropType<SelectValue>,
+      default: undefined,
+    },
+
     options: {
       type: Array as PropType<SelectOption[]>,
       default: () => [],
@@ -320,16 +321,16 @@ export default defineComponent({
       default: () => [],
     },
 
-    modelValue: {
-      type: [Object, String, Number, Array] as PropType<SelectValue>,
-      default: undefined,
-    },
-
     multiple: {
       type: Boolean,
       default: false,
     },
 
+    overflow: {
+      type: String as PropType<`${TagsOverflow}`>,
+      default: () => TagsOverflow.Hidden,
+    },
+
     size: {
       type: String as PropType<`${InputBoxSize}`>,
       default: () => InputBoxSize.M,
@@ -382,10 +383,7 @@ export default defineComponent({
 
     searchFunction: {
       type: Function as PropType<SelectSearchFunction>,
-
-      default: (async (searchText, options) => {
-        return options.filter(({ label }) => label.toLowerCase().includes(searchText.toLowerCase()));
-      }) as SelectSearchFunction,
+      default: searchItemsByLabel as SelectSearchFunction,
     },
 
     groupByFunction: {
@@ -397,11 +395,6 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
-
-    overflow: {
-      type: String as PropType<`${TagsOverflow}`>,
-      default: () => TagsOverflow.Hidden,
-    },
   },
 
   emits: [
@@ -590,7 +583,7 @@ export default defineComponent({
     function deselect(option: RawValue): void {
       const modelValue = proxyModelValue.value;
 
-      if (Array.isArray(modelValue)) {
+      if (isArray(modelValue)) {
         proxyModelValue.value = modelValue.filter((value) => value !== option);
       }
     }
@@ -599,10 +592,10 @@ export default defineComponent({
       const modelValue = proxyModelValue.value;
 
       if (multiple.value) {
-        if (modelValue && Array.isArray(modelValue) && modelValue.includes(option)) {
+        if (modelValue && isArray(modelValue) && modelValue.includes(option)) {
           deselect(option);
         } else {
-          proxyModelValue.value = [...castToMultipleValue(modelValue), option];
+          proxyModelValue.value = [...toArray(modelValue), option];
         }
       } else {
         proxyModelValue.value = option;

package/src/components/or-select-v3/partials/or-select-multiple-control/OrSelectMultipleControl.vue

@@ -52,10 +52,9 @@
 <script lang="ts">
 import { PropType, computed, defineComponent, ref, toRefs, watch } from 'vue-demi';
 import { useProxyModelValue } from '../../../../hooks';
-import { isEqual } from '../../../../utils';
+import { isEqual, isNil, toArray } from '../../../../utils';
 import { OrTagsV3 as OrTags, Tag, TagsOverflow } from '../../../or-tags-v3';
 import { SelectOption, SelectValue } from '../../types';
-import { castToMultipleValue } from '../../utils/castToMultipleValue';
 import { OrSelectControlInput } from '../or-select-control-input';
 import OrSelectPlaceholder from '../or-select-placeholder/OrSelectPlaceholder.vue';
 import { SelectMultipleControlRoot } from './styles';
@@ -157,7 +156,7 @@ export default defineComponent({
     ]);
 
     // Computed
-    const value = computed(() => castToMultipleValue(model.value));
+    const value = computed(() => isNil(model.value) ? [] : toArray(model.value));
     const isEmpty = computed(() => value.value.length === 0);
 
     const selection = computed(() => {

package/src/components/or-slider-v3/OrSlider.vue

@@ -315,15 +315,15 @@ export default defineComponent({
     });
 
     // Constraints
-    watch(toRef(props, 'minValue'), (value) => {
+    watch(() => props.minValue, (value) => {
       if (value >= props.maxValue) {
-        throw new Error('OrRangeSlider: `minValue` cannot be greater or equal to `maxValue`.');
+        throw new Error('[OrSlider]: `minValue` must be lesser than `maxValue`.');
       }
     }, { immediate: true });
 
-    watch(toRef(props, 'maxValue'), (value) => {
+    watch(() => props.maxValue, (value) => {
       if (value <= props.minValue) {
-        throw new Error('OrRangeSlider: `maxValue` cannot be lesser or equal to `minValue`.');
+        throw new Error('[OrSlider]: `maxValue` must be greater than `minValue`.');
       }
     }, { immediate: true });
 

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

@@ -53,7 +53,7 @@
 <script lang="ts">
 import { PropType, computed, defineComponent, reactive, ref, toRef } from 'vue-demi';
 import { useControlAttributes, useIdAttribute, useProxyModelValue } from '../../hooks';
-import { isArray, isNil } from '../../utils';
+import { exclude, include, isArray, isNil } from '../../utils';
 import { LabelVariant, OrLabelV3 as OrLabel } from '../or-label-v3';
 import { OrLoaderV3 as OrLoader } from '../or-loader-v3';
 import { Switch, SwitchControl, SwitchControlHandle, SwitchLoader, SwitchLoaderHandle } from './styles';
@@ -157,7 +157,7 @@ export default defineComponent({
     const checked = computed(() => {
       if (isArray(model.value)) {
         if (isNil(props.value)) {
-          throw new Error('[OrSwitch]: Property "value" must be specified.');
+          throw new Error('[OrSwitch]: `value` must be specified.');
         }
 
         return model.value.includes(props.value);
@@ -170,13 +170,13 @@ export default defineComponent({
     function onChange(): void {
       if (isArray(model.value)) {
         if (isNil(props.value)) {
-          throw new Error('[OrSwitch]: Property "value" must be specified.');
+          throw new Error('[OrSwitch]: `value` must be specified.');
         }
 
-        if (checked.value) {
-          model.value = model.value.filter((value) => value !== props.value);
+        if (!checked.value) {
+          model.value = include(props.value, model.value);
         } else {
-          model.value = [...model.value, props.value];
+          model.value = exclude(props.value, model.value);
         }
       } else {
         model.value = !model.value;