@onereach/ui-components 10.3.4 → 10.3.5-beta.4335.0

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-inline-textarea-v3/types.ts

@@ -1 +1,3 @@
-export type InlineTextareaModelValue = string | null | undefined;
+import { ModelValue } from '../../types';
+
+export type InlineTextareaModelValue = ModelValue<string>;

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-input-v3/types.ts

@@ -1,4 +1,6 @@
-export type InputModelValue = string | number | null | undefined;
+import { ModelValue } from '../../types';
+
+export type InputModelValue = ModelValue<string | number>;
 
 export enum InputType {
   Text = 'text',

package/src/components/or-label-v3/OrLabel.vue

@@ -2,11 +2,12 @@
   <div
     :ref="'root'"
     :class="rootStyles"
+    :invalid="invalid"
     :selected="selected"
     :disabled="disabled"
   >
     <label
-      :class="textStyles"
+      :class="contentStyles"
       :for="controlId"
       :required="required"
       :disabled="disabled"
@@ -22,8 +23,8 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
-import { LabelVariant } from './props';
-import { Label, LabelAddon, LabelText, LabelVariants } from './styles';
+import { Label, LabelAddon, LabelContent, LabelVariants } from './styles';
+import { LabelVariant } from './types';
 
 export default defineComponent({
   name: 'OrLabel',
@@ -39,6 +40,11 @@ export default defineComponent({
       default: () => LabelVariant.Input,
     },
 
+    invalid: {
+      type: Boolean,
+      default: false,
+    },
+
     selected: {
       type: Boolean,
       default: false,
@@ -60,18 +66,17 @@ export default defineComponent({
   ],
 
   setup(props) {
-    // Refs
+    // Refs & Styles
     const root = ref<HTMLElement>();
 
-    // Styles
     const rootStyles = computed(() => [
       'or-label-v3',
       ...Label,
       ...LabelVariants[props.variant],
     ]);
 
-    const textStyles = computed(() => [
-      ...LabelText,
+    const contentStyles = computed(() => [
+      ...LabelContent,
     ]);
 
     const addonStyles = computed(() => [
@@ -81,7 +86,8 @@ export default defineComponent({
     return {
       root,
       rootStyles,
-      textStyles,
+
+      contentStyles,
       addonStyles,
     };
   },

package/src/components/or-label-v3/index.ts

@@ -1,2 +1,2 @@
 export { default as OrLabelV3 } from './OrLabel.vue';
-export * from './props';
+export * from './types';

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

@@ -1,4 +1,4 @@
-import { LabelVariant } from './props';
+import { LabelVariant } from './types';
 
 export const Label: string[] = [
   // Layout
@@ -27,6 +27,19 @@ export const LabelVariants: Record<LabelVariant, string[]> = {
     'dark:theme-foreground-default-dark',
   ],
 
+  [LabelVariant.Group]: [
+    // Typography
+    'typography-body-2-regular',
+
+    // Theme
+    'theme-foreground-default',
+    'dark:theme-foreground-default-dark',
+
+    // Theme (invalid)
+    'invalid:theme-foreground-error',
+    'dark:invalid:theme-foreground-error-dark',
+  ],
+
   [LabelVariant.MenuItem]: [
     // Typography
     'typography-body-2-regular',
@@ -40,7 +53,7 @@ export const LabelVariants: Record<LabelVariant, string[]> = {
   ],
 };
 
-export const LabelText: string[] = [
+export const LabelContent: string[] = [
   // Interactivity
   'interactivity-default',
 

package/src/components/or-label-v3/{props.ts → types.ts}

@@ -1,5 +1,6 @@
 export enum LabelVariant {
   Input = 'input',
   Toggle = 'toggle',
+  Group = 'group',
   MenuItem = 'menu-item',
 }

package/src/components/or-radio-v3/OrRadio.vue

@@ -61,7 +61,7 @@ export default defineComponent({
     },
 
     value: {
-      type: [String, Number, Object] as PropType<RadioValue>,
+      type: undefined as unknown as PropType<RadioValue>,
       required: true,
     },
 

package/src/components/or-radio-v3/types.ts

@@ -1,3 +1,5 @@
-export type RadioModelValue = RadioValue | null | undefined;
+import { ModelValue } from '../../types';
+
+export type RadioModelValue = ModelValue<RadioValue>;
 
 export type RadioValue = string | number | object;

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

@@ -157,7 +157,7 @@ export default defineComponent({
 
     breakpoints: {
       type: Array as PropType<number[]>,
-      default: () => [],
+      default: [] as number[],
     },
 
     color: {
@@ -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

@@ -56,7 +56,7 @@
               :disabled="disabled"
               :enable-search="enableSearch"
               :is-open="popoverState === 'open'"
-              @reset="deselect"
+              @reset="deselectOption($event)"
             >
               <template v-slot:tag="{item}">
                 <slot
@@ -158,7 +158,7 @@
                   :class="dropdownItemStyles"
                   :selected="proxyModelValue === option.value"
                   :disabled="option.disabled"
-                  @click.stop="toggleOption(option.value)"
+                  @click.stop="toggleOption(option)"
                 >
                   <slot
                     name="optionTemplate"
@@ -179,7 +179,7 @@
                 :key="i"
                 :selected="proxyModelValue && proxyModelValue.includes(option.value)"
                 :disabled="option.disabled"
-                @click.stop="!option.disabled && toggleOption(option.value)"
+                @click.stop="!option.disabled && toggleOption(option)"
               >
                 <OrCheckbox
                   :model-value="proxyModelValue"
@@ -187,7 +187,7 @@
                   :label-variant="'menu-item'"
                   :disabled="option.disabled"
                 >
-                  <div @click="!option.disabled && toggleOption(option.value)">
+                  <div @click="!option.disabled && toggleOption(option)">
                     <slot
                       name="optionTemplate"
                       :model="proxyModelValue"
@@ -207,7 +207,7 @@
                 :class="dropdownItemStyles"
                 :selected="proxyModelValue === option.value"
                 :disabled="option.disabled"
-                @click.stop="toggleOption(option.value); close()"
+                @click.stop="toggleOption(option); close()"
               >
                 <slot
                   name="optionTemplate"
@@ -234,35 +234,33 @@
       </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 { GroupFunction, SearchFunction } from '../../types';
+import { exclude, include, 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';
@@ -277,8 +275,7 @@ import { OrPopoverV3 as OrPopover } from '../or-popover-v3';
 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';
+import { SelectItem, SelectModelValue } from './types';
 
 export default defineComponent({
   name: 'OrSelect',
@@ -310,19 +307,19 @@ export default defineComponent({
   },
 
   props: {
-    options: {
-      type: Array as PropType<SelectOption[]>,
-      default: () => [],
+    modelValue: {
+      type: undefined as unknown as PropType<SelectModelValue>,
+      default: undefined,
     },
 
-    searchOptions: {
-      type: Array as PropType<SelectOption[]>,
-      default: () => [],
+    options: {
+      type: Array as PropType<SelectItem[]>,
+      default: [] as SelectItem[],
     },
 
-    modelValue: {
-      type: [Object, String, Number, Array] as PropType<SelectValue>,
-      default: undefined,
+    searchOptions: {
+      type: Array as PropType<SelectItem[]>,
+      default: [] as SelectItem[],
     },
 
     multiple: {
@@ -330,6 +327,11 @@ export default defineComponent({
       default: false,
     },
 
+    overflow: {
+      type: String as PropType<`${TagsOverflow}`>,
+      default: () => TagsOverflow.Hidden,
+    },
+
     size: {
       type: String as PropType<`${InputBoxSize}`>,
       default: () => InputBoxSize.M,
@@ -381,15 +383,12 @@ export default defineComponent({
     },
 
     searchFunction: {
-      type: Function as PropType<SelectSearchFunction>,
-
-      default: (async (searchText, options) => {
-        return options.filter(({ label }) => label.toLowerCase().includes(searchText.toLowerCase()));
-      }) as SelectSearchFunction,
+      type: Function as PropType<SearchFunction<SelectItem>>,
+      default: searchItemsByLabel as SearchFunction<SelectItem>,
     },
 
     groupByFunction: {
-      type: Function as PropType<SelectGroupByFunction>,
+      type: Function as PropType<GroupFunction<SelectItem>>,
       default: undefined,
     },
 
@@ -397,11 +396,6 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
-
-    overflow: {
-      type: String as PropType<`${TagsOverflow}`>,
-      default: () => TagsOverflow.Hidden,
-    },
   },
 
   emits: [
@@ -496,7 +490,7 @@ export default defineComponent({
 
     const readonly = computed(() => context.attrs.readonly as boolean);
 
-    const internalSearchOptions = ref<SelectOption[]>(props.options);
+    const internalSearchOptions = ref<SelectItem[]>(props.options);
 
     const resolvedSearchOptions = computed(() => {
       return props.externalControl ? props.searchOptions : internalSearchOptions.value;
@@ -530,7 +524,7 @@ export default defineComponent({
               option,
             ],
           };
-        }, {} as Record<string, SelectOption[]>);
+        }, {} as Record<string, SelectItem[]>);
       }
 
       return {
@@ -587,37 +581,41 @@ export default defineComponent({
       }
     }
 
-    function deselect(option: RawValue): void {
-      const modelValue = proxyModelValue.value;
+    function selectOption(item: SelectItem): void {
+      if (props.multiple) {
+        proxyModelValue.value = include(item.value, toArray(proxyModelValue.value));
+      } else {
+        proxyModelValue.value = item.value;
+      }
+    }
 
-      if (Array.isArray(modelValue)) {
-        proxyModelValue.value = modelValue.filter((value) => value !== option);
+    function deselectOption(item: SelectItem): void {
+      if (props.multiple) {
+        proxyModelValue.value = exclude(item.value, toArray(proxyModelValue.value));
+      } else {
+        proxyModelValue.value = null;
       }
     }
 
-    function toggleOption(option: RawValue): void {
-      const modelValue = proxyModelValue.value;
+    function toggleOption(item: SelectItem): void {
+      if (props.multiple) {
+        const model = toArray(proxyModelValue.value);
 
-      if (multiple.value) {
-        if (modelValue && Array.isArray(modelValue) && modelValue.includes(option)) {
-          deselect(option);
+        if (!model.includes(item.value)) {
+          proxyModelValue.value = include(item.value, model);
         } else {
-          proxyModelValue.value = [...castToMultipleValue(modelValue), option];
+          proxyModelValue.value = exclude(item.value, model);
         }
       } else {
-        proxyModelValue.value = option;
+        proxyModelValue.value = proxyModelValue.value !== item.value ? item.value : null;
       }
-      clearSearchControl();
-    }
 
-    function clearSearchControl(): void {
       searchText.value = '';
     }
 
     // Utils
     const { isDesktop, isMobile } = useResponsive();
 
-
     return {
       root,
       inputBox,
@@ -644,12 +642,15 @@ export default defineComponent({
       internalSearchOptions,
       resolvedSearchOptions,
       groupedOptions,
+
       toggle,
       close,
       open,
-      deselect,
+
+      selectOption,
+      deselectOption,
       toggleOption,
-      clearSearchControl,
+
       isDesktop,
       isMobile,
     };

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 { SelectItem, SelectModelValue } from '../../types';
 import { OrSelectControlInput } from '../or-select-control-input';
 import OrSelectPlaceholder from '../or-select-placeholder/OrSelectPlaceholder.vue';
 import { SelectMultipleControlRoot } from './styles';
@@ -81,13 +80,13 @@ export default defineComponent({
     },
 
     model: {
-      type: [Object, String, Number, Array] as PropType<SelectValue>,
-      default: () => [],
+      type: undefined as unknown as PropType<SelectModelValue>,
+      default: [] as SelectModelValue,
     },
 
     options: {
-      type: Array as PropType<SelectOption[]>,
-      default: () => [],
+      type: Array as PropType<SelectItem[]>,
+      default: [] as SelectItem[],
     },
 
     overflow: {
@@ -97,7 +96,7 @@ export default defineComponent({
 
     placeholder: {
       type: String,
-      default: '',
+      default: undefined,
     },
 
     readonly: {
@@ -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(() => {
@@ -167,7 +166,7 @@ export default defineComponent({
 
       return value.value
         .map((value) => options.value.find((option) => isEqual(option.value, value)))
-        .filter<SelectOption>((value): value is SelectOption => !!value)
+        .filter<SelectItem>((value): value is SelectItem => !!value)
         .map((option) => ({
           value: option.value,
           label: option.label,