@onereach/ui-components 10.2.2-beta.4288.0 → 10.2.2-beta.4295.0

package/dist/bundled/v2/components/OrAutocompleteV3/OrAutocomplete.js

@@ -9,13 +9,17 @@ import __vue_component__$5 from '../OrLabelV3/OrLabel.js';
 import __vue_component__$6 from '../OrLoaderV3/OrLoader.js';
 import __vue_component__$7 from '../OrMenuItemV3/OrMenuItem.js';
 import __vue_component__$8 from '../OrPopoverV3/OrPopover.js';
-import { searchByLabel } from '../../helpers/searchByLabel.js';
+import __vue_component__$9 from '../OrTagsV3/OrTags.js';
+import { TagsOverflow } from '../OrTagsV3/props.js';
 import { InputBoxSize } from '../OrInputBoxV3/props.js';
 import { useIdAttribute } from '../../hooks/useIdAttribute.js';
 import { useControlAttributes } from '../../hooks/useControlAttributes.js';
 import { useValidationAttributes } from '../../hooks/useValidationAttributes.js';
 import { useProxyModelValue } from '../../hooks/useProxyModelValue.js';
-import { findByValue } from '../../helpers/findByValue.js';
+import { include } from '../../utils/include.js';
+import { toArray } from '../../utils/toArray.js';
+import { exclude } from '../../utils/exclude.js';
+import { isArray } from '../../utils/isArray.js';
 import useResponsive from '../../hooks/useResponsive/useResponsive.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 
@@ -29,7 +33,8 @@ var script = defineComponent({
     OrLabel: __vue_component__$5,
     OrLoader: __vue_component__$6,
     OrMenuItem: __vue_component__$7,
-    OrPopover: __vue_component__$8
+    OrPopover: __vue_component__$8,
+    OrTags: __vue_component__$9
   },
   model: {
     prop: 'modelValue',
@@ -40,17 +45,17 @@ var script = defineComponent({
       type: undefined,
       default: undefined
     },
-    multiple: {
-      type: Boolean,
-      default: false
-    },
     items: {
       type: Array,
       default: []
     },
-    searchFunction: {
-      type: Function,
-      default: searchByLabel
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    overflow: {
+      type: String,
+      default: () => TagsOverflow.Hidden
     },
     size: {
       type: String,
@@ -95,6 +100,12 @@ var script = defineComponent({
     enableClear: {
       type: Boolean,
       default: false
+    },
+    searchFunction: {
+      type: Function,
+      default: async (value, items) => {
+        return value.length > 0 ? items.filter(item => new RegExp(value, 'i').test(item)) : [];
+      }
     }
   },
   emits: ['update:modelValue', 'input', 'keydown', 'keyup', 'focus', 'blur'],
@@ -131,22 +142,32 @@ var script = defineComponent({
     const dropdownItemStyles = computed(() => [...AutocompleteDropdownItem]);
     // State
     const model = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
-    const searchText = ref('');
-    const selectedItem = computed(() => {
-      return findByValue(model.value, props.items);
+    const tags = computed(() => {
+      return isArray(model.value) ? model.value.map(item => ({
+        label: item,
+        value: item
+      })) : [];
     });
+    const searchText = ref('');
     const filteredItems = computedAsync(async () => {
       return props.searchFunction(searchText.value, props.items);
-    });
+    }, []);
     // Handlers
     function onInput(event) {
       searchText.value = event.target.value;
     }
     // Methods
-    function updateModel(value) {
-      model.value = value;
+    function add(value) {
+      if (props.multiple) {
+        model.value = include(value, toArray(model.value));
+      } else {
+        model.value = value;
+      }
       searchText.value = '';
     }
+    function remove(value) {
+      model.value = exclude(value, toArray(model.value));
+    }
     function focus() {
       var _a;
       (_a = control.value) === null || _a === void 0 ? void 0 : _a.focus();
@@ -173,11 +194,12 @@ var script = defineComponent({
       dropdownStyles,
       dropdownItemStyles,
       model,
+      tags,
       searchText,
-      selectedItem,
       filteredItems,
       onInput,
-      updateModel,
+      add,
+      remove,
       focus,
       blur,
       isMobile
@@ -252,7 +274,77 @@ var __vue_render__ = function () {
       },
       proxy: true
     } : null], null, true)
-  }, [_c('input', _vm._b({
+  }, [_vm.multiple ? [_c('OrTags', {
+    class: ['grow'],
+    attrs: {
+      "items": _vm.tags,
+      "overflow": _vm.overflow,
+      "tag-props": {
+        variant: _vm.readonly || _vm.disabled ? 'tag' : 'reset',
+        disabled: _vm.disabled
+      },
+      "disabled": _vm.disabled
+    },
+    on: {
+      "reset": function ($event) {
+        return _vm.remove($event);
+      }
+    },
+    scopedSlots: _vm._u([{
+      key: "tag",
+      fn: function (ref) {
+        var item = ref.item;
+        return [_vm._t("tag", function () {
+          return [_vm._v("\n            " + _vm._s(item.label) + "\n          ")];
+        }, {
+          "item": item
+        })];
+      }
+    }, {
+      key: "tail",
+      fn: function () {
+        return [_c('div', {
+          class: ['inline-flex', 'w-fit', 'max-w-full']
+        }, [_c('input', _vm._b({
+          ref: 'control',
+          class: _vm.controlStyles,
+          attrs: {
+            "type": 'text',
+            "placeholder": _vm.placeholder,
+            "readonly": _vm.readonly,
+            "disabled": _vm.disabled
+          },
+          domProps: {
+            "value": _vm.searchText
+          },
+          on: {
+            "input": function ($event) {
+              _vm.$emit('input', $event);
+              _vm.onInput($event);
+            },
+            "keydown": [function ($event) {
+              return _vm.$emit('keydown', $event);
+            }, function ($event) {
+              if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) {
+                return null;
+              }
+              return _vm.add(_vm.searchText);
+            }],
+            "keyup": function ($event) {
+              return _vm.$emit('keyup', $event);
+            },
+            "focus": function ($event) {
+              return _vm.$emit('focus', $event);
+            },
+            "blur": function ($event) {
+              return _vm.$emit('blur', $event);
+            }
+          }
+        }, 'input', _vm.attributes, false))])];
+      },
+      proxy: true
+    }], null, true)
+  })] : [_c('input', _vm._b({
     ref: 'сontrol',
     class: _vm.controlStyles,
     attrs: {
@@ -263,12 +355,13 @@ var __vue_render__ = function () {
       "disabled": _vm.disabled
     },
     domProps: {
-      "value": _vm.searchText || _vm.selectedItem && _vm.selectedItem.label
+      "value": _vm.searchText || _vm.model
     },
     on: {
       "input": function ($event) {
         _vm.$emit('input', $event);
         _vm.onInput($event);
+        _vm.model = _vm.searchText;
       },
       "keydown": function ($event) {
         return _vm.$emit('keydown', $event);
@@ -283,23 +376,18 @@ var __vue_render__ = function () {
         return _vm.$emit('blur', $event);
       }
     }
-  }, 'input', _vm.attributes, false)), _vm._v(" "), _vm._v(" "), _c('OrPopover', {
+  }, 'input', _vm.attributes, false))], _vm._v(" "), _vm._v(" "), _c('OrPopover', {
     ref: 'popover',
     class: _vm.dropdownStyles,
     attrs: {
       "custom-styles": _vm.dropdownStyles,
-      "is-open": !!_vm.searchText,
+      "is-open": _vm.filteredItems.length > 0,
       "variant": 'auto',
       "trigger": _vm.inputBoxRoot,
       "placement": 'bottom',
       "offset": 0,
       "full-width": true,
       "disable-default-styles": true
-    },
-    on: {
-      "close": function ($event) {
-        _vm.searchText = '';
-      }
     }
   }, _vm._l(_vm.filteredItems, function (item, i) {
     return _c('OrMenuItem', {
@@ -307,11 +395,15 @@ var __vue_render__ = function () {
       class: _vm.dropdownItemStyles,
       on: {
         "click": function ($event) {
-          return _vm.updateModel(item.value);
+          return _vm.add(item);
         }
       }
-    }, [_vm._v("\n        " + _vm._s(item.label) + "\n      ")]);
-  }), 1)], 1), _vm._v(" "), _vm.$slots.hint || _vm.hint ? [_c('OrHint', {
+    }, [_vm._t("item", function () {
+      return [_vm._v("\n          " + _vm._s(item) + "\n        ")];
+    }, {
+      "item": item
+    })], 2);
+  }), 1)], 2), _vm._v(" "), _vm.$slots.hint || _vm.hint ? [_c('OrHint', {
     directives: [{
       name: "show",
       rawName: "v-show",

package/dist/bundled/v2/components/OrAutocompleteV3/OrAutocomplete.vue.d.ts

@@ -1,6 +1,7 @@
 import { PropType } from 'vue-demi';
-import { Item, SearchFunction } from '../../types';
+import { SearchFunction } from '../../types';
 import { InputBoxSize } from '../or-input-box-v3';
+import { Tag, TagsOverflow } from '../or-tags-v3';
 import { AutocompleteModelValue, AutocompleteValue } from './types';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
     attributes: {
@@ -36,11 +37,12 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     dropdownStyles: import("@vue/composition-api").ComputedRef<string[]>;
     dropdownItemStyles: import("@vue/composition-api").ComputedRef<string[]>;
     model: import("../../hooks").UseProxyModelValueReturn<AutocompleteModelValue>;
+    tags: import("@vue/composition-api").ComputedRef<Tag[]>;
     searchText: import("@vue/composition-api").Ref<string>;
-    selectedItem: import("@vue/composition-api").ComputedRef<Item<AutocompleteValue | null | undefined> | undefined>;
-    filteredItems: import("@vue/composition-api").Ref<Item<AutocompleteValue>[]>;
+    filteredItems: import("@vue/composition-api").Ref<string[]>;
     onInput: (event: InputEvent) => void;
-    updateModel: (value: AutocompleteModelValue) => void;
+    add: (value: AutocompleteValue) => void;
+    remove: (value: AutocompleteValue) => void;
     focus: () => void;
     blur: () => void;
     isMobile: import("@vue/composition-api").ComputedRef<boolean>;
@@ -49,17 +51,17 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: PropType<AutocompleteModelValue>;
         default: undefined;
     };
+    items: {
+        type: PropType<string[]>;
+        default: string[];
+    };
     multiple: {
         type: BooleanConstructor;
         default: boolean;
     };
-    items: {
-        type: PropType<Item<AutocompleteValue>[]>;
-        default: Item<AutocompleteValue>[];
-    };
-    searchFunction: {
-        type: PropType<SearchFunction<Item<AutocompleteValue>>>;
-        default: SearchFunction<Item<AutocompleteValue>>;
+    overflow: {
+        type: PropType<"wrap" | "scroll" | "hidden">;
+        default: () => TagsOverflow.Hidden;
     };
     size: {
         type: PropType<"m" | "s">;
@@ -105,22 +107,26 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: BooleanConstructor;
         default: boolean;
     };
+    searchFunction: {
+        type: PropType<SearchFunction<string>>;
+        default: SearchFunction<string>;
+    };
 }, import("@vue/composition-api").ExtractPropTypes<{
     modelValue: {
         type: PropType<AutocompleteModelValue>;
         default: undefined;
     };
+    items: {
+        type: PropType<string[]>;
+        default: string[];
+    };
     multiple: {
         type: BooleanConstructor;
         default: boolean;
     };
-    items: {
-        type: PropType<Item<AutocompleteValue>[]>;
-        default: Item<AutocompleteValue>[];
-    };
-    searchFunction: {
-        type: PropType<SearchFunction<Item<AutocompleteValue>>>;
-        default: SearchFunction<Item<AutocompleteValue>>;
+    overflow: {
+        type: PropType<"wrap" | "scroll" | "hidden">;
+        default: () => TagsOverflow.Hidden;
     };
     size: {
         type: PropType<"m" | "s">;
@@ -166,11 +172,15 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: BooleanConstructor;
         default: boolean;
     };
+    searchFunction: {
+        type: PropType<SearchFunction<string>>;
+        default: SearchFunction<string>;
+    };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     modelValue: AutocompleteModelValue;
+    items: string[];
     multiple: boolean;
-    items: Item<AutocompleteValue>[];
-    searchFunction: SearchFunction<Item<AutocompleteValue>>;
+    overflow: "wrap" | "scroll" | "hidden";
     size: "m" | "s";
     label: string;
     placeholder: string;
@@ -182,6 +192,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     disabled: boolean;
     disableDefaultStyles: boolean;
     enableClear: boolean;
+    searchFunction: SearchFunction<string>;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
@@ -218,19 +229,20 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     dropdownStyles: import("@vue/composition-api").ComputedRef<string[]>;
     dropdownItemStyles: import("@vue/composition-api").ComputedRef<string[]>;
     model: import("../../hooks").UseProxyModelValueReturn<AutocompleteModelValue>;
+    tags: import("@vue/composition-api").ComputedRef<Tag[]>;
     searchText: import("@vue/composition-api").Ref<string>;
-    selectedItem: import("@vue/composition-api").ComputedRef<Item<AutocompleteValue | null | undefined> | undefined>;
-    filteredItems: import("@vue/composition-api").Ref<Item<AutocompleteValue>[]>;
+    filteredItems: import("@vue/composition-api").Ref<string[]>;
     onInput: (event: InputEvent) => void;
-    updateModel: (value: AutocompleteModelValue) => void;
+    add: (value: AutocompleteValue) => void;
+    remove: (value: AutocompleteValue) => void;
     focus: () => void;
     blur: () => void;
     isMobile: import("@vue/composition-api").ComputedRef<boolean>;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     modelValue: AutocompleteModelValue;
+    items: string[];
     multiple: boolean;
-    items: Item<AutocompleteValue>[];
-    searchFunction: SearchFunction<Item<AutocompleteValue>>;
+    overflow: "wrap" | "scroll" | "hidden";
     size: "m" | "s";
     label: string;
     placeholder: string;
@@ -242,13 +254,14 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     disabled: boolean;
     disableDefaultStyles: boolean;
     enableClear: boolean;
+    searchFunction: SearchFunction<string>;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: AutocompleteModelValue;
+    items: string[];
     multiple: boolean;
-    items: Item<AutocompleteValue>[];
-    searchFunction: SearchFunction<Item<AutocompleteValue>>;
+    overflow: "wrap" | "scroll" | "hidden";
     size: "m" | "s";
     label: string;
     placeholder: string;
@@ -260,5 +273,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     disabled: boolean;
     disableDefaultStyles: boolean;
     enableClear: boolean;
+    searchFunction: SearchFunction<string>;
 }, true>);
 export default _default;

package/dist/bundled/v2/components/OrAutocompleteV3/types.d.ts

@@ -1,2 +1,2 @@
-export type AutocompleteModelValue = AutocompleteValue | null | undefined;
-export type AutocompleteValue = string | number | object;
+export type AutocompleteModelValue = AutocompleteValue[] | AutocompleteValue | null | undefined;
+export type AutocompleteValue = string;

package/dist/bundled/v2/components/OrCheckboxV3/OrCheckbox.js

@@ -2,13 +2,13 @@ import { defineComponent, reactive, ref, computed, toRef } from 'vue-demi';
 import { Checkbox, CheckboxControl, CheckboxControlHandle } from './styles.js';
 import __vue_component__$1 from '../OrLabelV3/OrLabel.js';
 import { LabelVariant } from '../OrLabelV3/props.js';
+import { useIdAttribute } from '../../hooks/useIdAttribute.js';
+import { useControlAttributes } from '../../hooks/useControlAttributes.js';
+import { useProxyModelValue } from '../../hooks/useProxyModelValue.js';
 import { isArray } from '../../utils/isArray.js';
 import { isNil } from '../../utils/isNil.js';
 import { include } from '../../utils/include.js';
 import { exclude } from '../../utils/exclude.js';
-import { useIdAttribute } from '../../hooks/useIdAttribute.js';
-import { useControlAttributes } from '../../hooks/useControlAttributes.js';
-import { useProxyModelValue } from '../../hooks/useProxyModelValue.js';
 import { s as styleInject } from '../../style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 

package/dist/bundled/v2/components/OrSelectV3/OrSelect.js

@@ -4,8 +4,8 @@ import { i as useFocus } from '../../index-fe85dfd9.js';
 import { useProxyModelValue } from '../../hooks/useProxyModelValue.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 import __vue_component__$5 from '../OrTagsV3/OrTags.js';
-import { TagsOverflow } from '../OrTagsV3/props.js';
 import { isEqual } from '../../utils/isEqual.js';
+import { TagsOverflow } from '../OrTagsV3/props.js';
 import { isEmpty } from '../../utils/isEmpty.js';
 import { Select, SelectControl, SelectSearchControl, SelectDropdown, SelectDropdownFlipped, SelectDropdownDefault, SelectDropdownItem, SelectNoSearchResults } from './styles.js';
 import __vue_component__$6 from '../OrCheckboxV3/OrCheckbox.js';
@@ -22,7 +22,6 @@ import __vue_component__$g from '../OrPopoverV3/OrPopover.js';
 import { DropdownClose } from '../../directives/dropdown-close.js';
 import { DropdownOpen } from '../../directives/dropdown-open.js';
 import { InputBoxSize } from '../OrInputBoxV3/props.js';
-import { searchByLabel } from '../../helpers/searchByLabel.js';
 import useResponsive from '../../hooks/useResponsive/useResponsive.js';
 import { isArray } from '../../utils/isArray.js';
 
@@ -672,7 +671,9 @@ var script = defineComponent({
     },
     searchFunction: {
       type: Function,
-      default: searchByLabel
+      default: async (value, options) => {
+        return options.filter(option => new RegExp(value, 'i').test(option.label));
+      }
     },
     groupByFunction: {
       type: Function,

package/dist/bundled/v2/components/OrTagInputV3/OrTagInput.js

@@ -34,7 +34,7 @@ var script = defineComponent({
   props: {
     modelValue: {
       type: Array,
-      default: () => []
+      default: []
     },
     label: {
       type: String,
@@ -220,7 +220,7 @@ var script = defineComponent({
   }
 });
 
-var css_248z = "input[data-v-9db58372]{min-width:0;background:0 0;outline:0}";
+var css_248z = "input[data-v-4a104e16]{min-width:0;background:0 0;outline:0}";
 styleInject(css_248z);
 
 /* script */
@@ -405,7 +405,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-9db58372";
+const __vue_scope_id__ = "data-v-4a104e16";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/bundled/v2/components/OrTagInputV3/OrTagInput.vue.d.ts

@@ -53,7 +53,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
 }> & import("@vue/composition-api").Data, {}, {}, {
     modelValue: {
         type: PropType<string[]>;
-        default: () => [];
+        default: string[];
     };
     label: {
         type: StringConstructor;
@@ -102,7 +102,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
 }, import("@vue/composition-api").ExtractPropTypes<{
     modelValue: {
         type: PropType<string[]>;
-        default: () => [];
+        default: string[];
     };
     label: {
         type: StringConstructor;

package/dist/bundled/v2/helpers/getItemByValue.d.ts

@@ -0,0 +1,2 @@
+import { Item } from '../types';
+export declare const getItemByValue: <T>(value: T, items: Item<T>[]) => Item<T>;

package/dist/bundled/v2/helpers/getItemByValue.js

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

package/dist/bundled/v2/helpers/getItemsByValue.d.ts

@@ -0,0 +1,2 @@
+import { Item } from '../types';
+export declare const getItemsByValue: <T>(value: T[], items: Item<T>[]) => Item<T>[];

package/dist/bundled/v2/helpers/getItemsByValue.js

@@ -0,0 +1,7 @@
+import { getItemByValue } from './getItemByValue.js';
+
+const getItemsByValue = (value, items) => {
+  return value.map(value => getItemByValue(value, items));
+};
+
+export { getItemsByValue };

package/dist/bundled/v2/helpers/index.d.ts

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

package/dist/bundled/v2/helpers/index.js

@@ -1,2 +1,3 @@
-export { findByValue } from './findByValue.js';
-export { searchByLabel } from './searchByLabel.js';
+export { getItemByValue } from './getItemByValue.js';
+export { getItemsByValue } from './getItemsByValue.js';
+export { searchItemsByLabel } from './searchItemsByLabel.js';

package/dist/bundled/v2/helpers/searchItemsByLabel.d.ts

@@ -0,0 +1,2 @@
+import { Item } from '../types';
+export declare const searchItemsByLabel: <T>(value: string, items: Item<T>[]) => Promise<Item<T>[]>;

package/dist/bundled/v2/helpers/searchItemsByLabel.js

@@ -0,0 +1,5 @@
+const searchItemsByLabel = async (value, items) => {
+  return value.length > 0 ? items.filter(item => new RegExp(value, 'i').test(item.label)) : [];
+};
+
+export { searchItemsByLabel };