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

package/src/components/or-select-v3/partials/or-select-single-control/OrSelectSingleControl.vue

@@ -31,7 +31,7 @@
 import { PropType, computed, defineComponent, ref, toRefs } from 'vue-demi';
 import { useProxyModelValue } from '../../../../hooks';
 import { isEmpty, isEqual } from '../../../../utils';
-import { SelectOption, SelectValue } from '../../types';
+import { SelectItem, SelectModelValue } from '../../types';
 import OrSelectControlInput from '../or-select-control-input/OrSelectControlInput.vue';
 import OrSelectPlaceholder from '../or-select-placeholder/OrSelectPlaceholder.vue';
 import { SelectSingleControlInput } from './styles';
@@ -56,18 +56,18 @@ export default defineComponent({
     },
 
     model: {
-      type: [Object, String, Number, Array] as PropType<SelectValue>,
+      type: undefined as unknown as PropType<SelectModelValue>,
       default: undefined,
     },
 
     options: {
-      type: Array as PropType<SelectOption[]>,
-      default: () => [],
+      type: Array as PropType<SelectItem[]>,
+      default: [] as SelectItem[],
     },
 
     placeholder: {
       type: String,
-      default: '',
+      default: undefined,
     },
 
     disabled: {

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

@@ -1,18 +1,7 @@
-export interface SelectOption {
-  value: RawValue;
-  label: string;
+import { Item, ModelValue } from '../../types';
 
-  disabled?: boolean;
-}
+export type SelectModelValue = ModelValue<SelectItemValue | SelectItemValue[]>;
 
-export type RawValue = string | number | object;
+export type SelectItem = Item<SelectItemValue>;
 
-export interface SelectSearchFunction {
-  (searchText: string, options: SelectOption[]): Promise<SelectOption[]>;
-}
-
-export interface SelectGroupByFunction {
-  (option: SelectOption): string;
-}
-
-export type SelectValue = RawValue | RawValue[] | undefined;
+export type SelectItemValue = string | number | object;

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

@@ -119,7 +119,7 @@ export default defineComponent({
 
     breakpoints: {
       type: Array as PropType<number[]>,
-      default: () => [],
+      default: [] as number[],
     },
 
     color: {
@@ -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, isUndefined } 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';
@@ -79,7 +79,7 @@ export default defineComponent({
     },
 
     value: {
-      type: [String, Number, Object] as PropType<SwitchValue>,
+      type: undefined as unknown as PropType<SwitchValue>,
       default: undefined,
     },
 
@@ -156,8 +156,8 @@ export default defineComponent({
 
     const checked = computed(() => {
       if (isArray(model.value)) {
-        if (isNil(props.value)) {
-          throw new Error('[OrSwitch]: Property "value" must be specified.');
+        if (isUndefined(props.value)) {
+          throw new Error('[OrSwitch]: `value` must be specified.');
         }
 
         return model.value.includes(props.value);
@@ -169,14 +169,14 @@ export default defineComponent({
     // Handlers
     function onChange(): void {
       if (isArray(model.value)) {
-        if (isNil(props.value)) {
-          throw new Error('[OrSwitch]: Property "value" must be specified.');
+        if (isUndefined(props.value)) {
+          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;

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

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

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

@@ -73,7 +73,7 @@ import { OrMenuV3 as OrMenu } from '../or-menu-v3';
 import { OrTabV3 as OrTab } from '../or-tab-v3';
 import { TabsVariant } from './props';
 import { Tabs, TabsContainer, TabsContent, TabsVariants } from './styles';
-import { TabsItem } from './types';
+import { EditorTabsItem } from './types';
 
 export default defineComponent({
   name: 'OrTabs',
@@ -97,7 +97,7 @@ export default defineComponent({
     },
 
     items: {
-      type: Array as PropType<TabsItem[]>,
+      type: Array as PropType<EditorTabsItem[]>,
       required: true,
     },
 
@@ -147,8 +147,8 @@ export default defineComponent({
 
     // State
     const tabs = reactive({
-      normal: [] as TabsItem[],
-      hidden: [] as TabsItem[],
+      normal: [] as EditorTabsItem[],
+      hidden: [] as EditorTabsItem[],
     });
 
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
@@ -156,17 +156,17 @@ export default defineComponent({
     const activeTab = computed(() => props.items.find(({ value }) => value === proxyModelValue.value)!);
 
     // Methods
-    function selectTab(tab: TabsItem): void {
+    function selectTab(tab: EditorTabsItem): void {
       if (!tab.disabled) {
         proxyModelValue.value = tab.value;
       }
     }
 
-    function rearrangeTabs(items: TabsItem[], activeTab: TabsItem, rootElement: Element): typeof tabs {
+    function rearrangeTabs(items: EditorTabsItem[], activeTab: EditorTabsItem, rootElement: Element): typeof tabs {
       const { children } = rootElement;
 
-      const nextNormalTabs: TabsItem[] = [...items];
-      const nextHiddenTabs: TabsItem[] = [];
+      const nextNormalTabs: EditorTabsItem[] = [...items];
+      const nextHiddenTabs: EditorTabsItem[] = [];
 
       let currentWidth = rootElement.scrollWidth;
 

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

@@ -1,8 +1,10 @@
-export interface TabsItem {
-  value: string | number;
-  label: string;
+import { Item, ModelValue } from '../../types';
 
+export type EditorTabsModelValue = ModelValue<EditorTabsItemValue>;
+
+export type EditorTabsItem = Item<EditorTabsItemValue> & {
   pinned?: boolean;
   invalid?: boolean;
-  disabled?: boolean;
-}
+};
+
+export type EditorTabsItemValue = string | number;

package/src/components/or-tag-input-v3/OrTagInput.vue

@@ -40,7 +40,7 @@
         :overflow="overflow"
         @reset="remove($event)"
       >
-        <template v-slot:tag="{item}">
+        <template v-slot:tag="{ item }">
           <slot
             name="tag"
             :item="item"
@@ -48,6 +48,7 @@
             {{ item.label }}
           </slot>
         </template>
+
         <template
           v-if="showControl"
           v-slot:tail
@@ -60,14 +61,15 @@
               :class="controlStyles"
               :style="controlInlineStyles"
               :type="'text'"
-              :placeholder="proxyModelValue.length === 0 ? placeholder : undefined"
+              :placeholder="proxyModelValue && proxyModelValue.length === 0 ? placeholder : undefined"
               :readonly="readonly"
               :disabled="disabled"
               :autocomplete="'off'"
               :minlength="undefined"
               :maxlength="undefined"
-              @keydown.enter="add()"
+              @input="$emit('input', $event)"
               @keydown="$emit('keydown', $event)"
+              @keydown.enter="add()"
               @keyup="$emit('keyup', $event)"
               @focus="activate"
             >
@@ -79,43 +81,24 @@
         v-if="enableClear && !readonly && !disabled"
         v-slot:addon
       >
-        <template v-if="proxyModelValue.length > 0 || draftModelValue">
+        <template v-if="proxyModelValue && proxyModelValue.length > 0 || draftModelValue">
           <OrIconButton
             :icon="'close'"
             :color="'inherit'"
-            :disabled="readonly || disabled"
             @click="reset()"
           />
         </template>
       </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
-          >
-            {{ currentLength }} / {{ 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"
@@ -123,8 +106,22 @@
         >
           {{ currentLength }} / {{ 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
+      >
+        {{ currentLength }} / {{ maxLength }}
+      </template>
+    </OrError>
   </div>
 </template>
 
@@ -132,6 +129,7 @@
 import { MaybeElementRef, onClickOutside } from '@vueuse/core';
 import { PropType, computed, defineComponent, nextTick, reactive, ref, toRefs, watch } from 'vue-demi';
 import { useControlAttributes, useIdAttribute, useProxyModelValue, useValidationAttributes } from '../../hooks';
+import { exclude, include, toArray } from '../../utils';
 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';
@@ -140,6 +138,7 @@ import { OrLabelV3 as OrLabel } from '../or-label-v3';
 import { TagColor } from '../or-tag-v3';
 import { OrTagsV3 as OrTags, TagObject, TagsOverflow } from '../or-tags-v3';
 import { TagInput, TagInputControl, TagInputItem } from './styles';
+import { TagInputModelValue } from './types';
 
 export default defineComponent({
   name: 'OrTagInput',
@@ -160,8 +159,8 @@ export default defineComponent({
 
   props: {
     modelValue: {
-      type: Array as PropType<string[]>,
-      default: (): [] => [],
+      type: undefined as unknown as PropType<TagInputModelValue>,
+      default: [] as string[],
     },
 
     label: {
@@ -224,16 +223,21 @@ export default defineComponent({
   emits: [
     'update:modelValue',
 
+    'input',
     'keydown',
     'keyup',
     'focus',
     'blur',
+
     'reset',
   ],
 
   expose: [
     'root',
 
+    'reset',
+    'clear',
+
     'focus',
     'blur',
   ],
@@ -274,7 +278,7 @@ export default defineComponent({
     const draftModelValue = ref<string>('');
 
     const tagsItems = computed(() => {
-      return proxyModelValue.value.map((item) => ({
+      return toArray(proxyModelValue.value).map((item) => ({
         label: item,
         value: item,
 
@@ -339,15 +343,15 @@ export default defineComponent({
       const newItem = draftModelValue.value;
 
       if (!newItem) return;
-      if (proxyModelValue.value.includes(newItem)) return;
+      if (proxyModelValue.value?.includes(newItem)) return;
       if (maxLength.value && currentLength.value >= maxLength.value) return;
 
-      proxyModelValue.value = [...proxyModelValue.value, newItem];
+      proxyModelValue.value = include(newItem, proxyModelValue.value ?? []);
       draftModelValue.value = '';
     }
 
     function remove(value: string): void {
-      proxyModelValue.value = proxyModelValue.value.filter((item) => item !== value);
+      proxyModelValue.value = exclude(value, proxyModelValue.value ?? []);
     }
 
     function reset(): void {
@@ -356,6 +360,10 @@ export default defineComponent({
       context.emit('reset');
     }
 
+    function clear(): void {
+      draftModelValue.value = '';
+    }
+
     // Effects
     onClickOutside((inputBox as MaybeElementRef), () => {
       if (activated.value === false || (tags.value?.overflowPopover as any)?.state === 'open') return;
@@ -364,7 +372,7 @@ export default defineComponent({
     });
 
     watch(proxyModelValue, (items, prevItems) => {
-      if (items.length != prevItems.length && overflow.value === TagsOverflow.Scroll) {
+      if (items?.length !== prevItems?.length && overflow.value === TagsOverflow.Scroll) {
         (tags.value?.scrollToEnd as any)();
       }
     });
@@ -394,6 +402,7 @@ export default defineComponent({
       deactivate,
       remove,
       reset,
+      clear,
     };
   },
 });

package/src/components/or-tag-input-v3/index.ts

@@ -1 +1,2 @@
 export { default as OrTagInputV3 } from './OrTagInput.vue';
+export * from './types';

package/src/components/or-tag-input-v3/types.ts

@@ -0,0 +1,3 @@
+import { ModelValue } from '../../types';
+
+export type TagInputModelValue = ModelValue<string[]>;

package/src/components/or-textarea-v3/OrTextarea.vue

@@ -46,32 +46,14 @@
       />
     </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"
@@ -79,8 +61,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-textarea-v3/types.ts

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

package/src/components/or-time-picker-v3/OrTimePicker.vue

@@ -98,21 +98,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>
 
@@ -324,7 +326,7 @@ export default defineComponent({
       }
     }
 
-    function formatTimeAlt(value: DateTimePickerModelValue): string {
+    function formatTimeAlt(value?: DateTimePickerModelValue): string {
       return value?.toLocaleString(resolvedLocale.value, {
         timeStyle: 'short',
         hourCycle: props.format !== TimeFormat.Auto ? props.format : undefined,

package/src/components/or-time-range-picker-v3/OrTimeRangePicker.vue

@@ -137,21 +137,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>
 
@@ -317,7 +319,7 @@ export default defineComponent({
       get: () => draft.value?.[0],
 
       set: (value) => {
-        draft.value = [value, draft.value?.[1]];
+        draft.value = [value ?? null, draft.value?.[1] ?? null];
       },
     });
 
@@ -325,7 +327,7 @@ export default defineComponent({
       get: () => draft.value?.[1],
 
       set: (value) => {
-        draft.value = [draft.value?.[0], value];
+        draft.value = [draft.value?.[0] ?? null, value ?? null];
       },
     });
 
@@ -345,7 +347,7 @@ export default defineComponent({
     }
 
     function reset(): void {
-      draft.value = model.value ?? [undefined, undefined];
+      draft.value = model.value ?? [null, null];
     }
 
     function openPopover(control: 'from' | 'to'): void {
@@ -368,7 +370,7 @@ export default defineComponent({
       }
     }
 
-    function formatTimeAlt(value: DateTimePickerModelValue): string {
+    function formatTimeAlt(value?: DateTimePickerModelValue): string {
       return value?.toLocaleString(resolvedLocale.value, {
         timeStyle: 'short',
         hourCycle: props.format !== TimeFormat.Auto ? props.format : undefined,

package/src/components/or-time-range-picker-v3/types.ts

@@ -1,3 +1,4 @@
+import { ModelValue } from '../../types';
 import { DateTimePickerModelValue } from '../or-date-time-picker-v3';
 
-export type TimeRangePickerModelValue = [DateTimePickerModelValue, DateTimePickerModelValue] | null | undefined;
+export type TimeRangePickerModelValue = ModelValue<[DateTimePickerModelValue, DateTimePickerModelValue]>;

package/src/helpers/getItemByValue.ts

@@ -0,0 +1,12 @@
+import { Item } from '../types';
+import { isUndefined } from '../utils';
+
+export const getItemByValue = <T, E extends Item<T>>(value: T, items: E[]): E => {
+  const item = items.find((item) => value === item.value);
+
+  if (isUndefined(item)) {
+    throw new Error('[getItemByValue]: Item not found.');
+  }
+
+  return item;
+};

package/src/helpers/getItemsByValue.ts

@@ -0,0 +1,6 @@
+import { getItemByValue } from '.';
+import { Item } from '../types';
+
+export const getItemsByValue = <T, E extends Item<T>>(value: T[], items: E[]): E[] => {
+  return value.map((value) => getItemByValue(value, items));
+};

package/src/helpers/index.ts

@@ -0,0 +1,3 @@
+export * from './getItemByValue';
+export * from './getItemsByValue';
+export * from './searchItemsByLabel';

package/src/helpers/searchItemsByLabel.ts

@@ -0,0 +1,5 @@
+import { Item } from '../types';
+
+export const searchItemsByLabel = async <T, E extends Item<T>>(value: string, items: E[]): Promise<E[]> => {
+  return items.filter((item) => new RegExp(value, 'i').test(item.label));
+};