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

package/dist/esm/v3/utils/index.d.ts

@@ -2,12 +2,14 @@ export * from './constants/color';
 export * from './constants/key-codes';
 export * from './constants/poper';
 export * from './constants/regex';
+export * from './exclude';
 export * from './functions/color';
 export * from './functions/dom';
 export * from './functions/flattenDeep';
 export * from './functions/hash';
 export * from './functions/px-to-rem';
 export * from './functions/text';
+export * from './include';
 export * from './isAncestor';
 export * from './isArray';
 export * from './isDescendant';
@@ -20,3 +22,4 @@ export * from './isObject';
 export * from './isString';
 export * from './isUndefined';
 export * from './isVisible';
+export * from './toArray';

package/dist/esm/v3/utils/index.js

@@ -1,11 +1,16 @@
-export { H as HSL_LIMITS, t as RX_ABBREVIATION_FROM_STRING, R as RX_ARRAY_NOTATION, a as RX_BV_PREFIX, u as RX_DATE, v as RX_DATE_SPLIT, b as RX_DIGITS, y as RX_ENCODED_COMMA, z as RX_ENCODE_REVERSE, c as RX_EXTENSION, d as RX_HASH, e as RX_HASH_ID, x as RX_HREF, f as RX_HTML_TAGS, g as RX_HYPHENATE, C as RX_LONG_COLOR, h as RX_LOWER_UPPER, i as RX_NUMBER, j as RX_PLUS, A as RX_QUERY_START, k as RX_REGEXP_REPLACE, B as RX_SHORT_COLOR, l as RX_SPACES, m as RX_SPACE_SPLIT, n as RX_STAR, o as RX_START_SPACE_WORD, w as RX_TIME, p as RX_TRIM_LEFT, q as RX_TRIM_RIGHT, r as RX_UNDERSCORE, s as RX_UN_KEBAB, I as generateColorFromString, F as generateHslFromString, J as getHashOfString, D as hexToRgb, G as hslToColorString, K as normalize, E as rgbToHex } from '../color-911f1122.js';
-export { C as CODE_BACKSPACE, a as CODE_BREAK, b as CODE_DELETE, c as CODE_DOWN, d as CODE_END, e as CODE_ENTER, f as CODE_ESC, g as CODE_HOME, h as CODE_LEFT, i as CODE_PAGEDOWN, j as CODE_PAGEUP, k as CODE_RIGHT, l as CODE_SPACE, m as CODE_UP, p as PLACEMENT_BOTTOM_END, o as PLACEMENT_BOTTOM_START, t as PLACEMENT_LEFT_END, s as PLACEMENT_LEFT_START, r as PLACEMENT_RIGHT_END, q as PLACEMENT_RIGHT_START, n as PLACEMENT_TOP_END, P as PLACEMENT_TOP_START, u as getAbbreviation, v as isDescendant, w as isNumber } from '../isNumber-5fb80127.js';
+export { H as HSL_LIMITS, t as RX_ABBREVIATION_FROM_STRING, R as RX_ARRAY_NOTATION, a as RX_BV_PREFIX, u as RX_DATE, v as RX_DATE_SPLIT, b as RX_DIGITS, y as RX_ENCODED_COMMA, z as RX_ENCODE_REVERSE, c as RX_EXTENSION, d as RX_HASH, e as RX_HASH_ID, x as RX_HREF, f as RX_HTML_TAGS, g as RX_HYPHENATE, C as RX_LONG_COLOR, h as RX_LOWER_UPPER, i as RX_NUMBER, j as RX_PLUS, A as RX_QUERY_START, k as RX_REGEXP_REPLACE, B as RX_SHORT_COLOR, l as RX_SPACES, m as RX_SPACE_SPLIT, n as RX_STAR, o as RX_START_SPACE_WORD, w as RX_TIME, p as RX_TRIM_LEFT, q as RX_TRIM_RIGHT, r as RX_UNDERSCORE, s as RX_UN_KEBAB, I as generateColorFromString, F as generateHslFromString, J as getHashOfString, D as hexToRgb, G as hslToColorString, K as normalize, E as rgbToHex } from '../color-e5b0b579.js';
+export { C as CODE_BACKSPACE, a as CODE_BREAK, b as CODE_DELETE, c as CODE_DOWN, d as CODE_END, e as CODE_ENTER, f as CODE_ESC, g as CODE_HOME, h as CODE_LEFT, i as CODE_PAGEDOWN, j as CODE_PAGEUP, k as CODE_RIGHT, l as CODE_SPACE, m as CODE_UP, p as PLACEMENT_BOTTOM_END, o as PLACEMENT_BOTTOM_START, t as PLACEMENT_LEFT_END, s as PLACEMENT_LEFT_START, r as PLACEMENT_RIGHT_END, q as PLACEMENT_RIGHT_START, n as PLACEMENT_TOP_END, P as PLACEMENT_TOP_START, u as getAbbreviation, v as isDescendant, w as isNumber } from '../isNumber-ef303deb.js';
+export { e as exclude, i as include } from '../include-2a81e823.js';
 export { M as MutationObs, f as addClass, c as cancelAF, e as contains, l as getAttr, q as getBCR, g as getById, t as getCS, w as getMaxZIndex, p as getStyle, m as hasAttr, i as hasClass, u as offset, v as position, b as reflow, k as removeAttr, h as removeClass, a as removeNode, o as removeStyle, r as requestAF, d as select, s as selectAll, j as setAttr, n as setStyle } from '../dom-53c9635b.js';
 export { p as pxToRem } from '../px-to-rem-0b26b83e.js';
-export { i as isAncestor } from '../isAncestor-9e33bd15.js';
-export { i as isArray, a as isNil, b as isNull, c as isUndefined } from '../isNil-33299e1d.js';
-export { i as isEmpty, a as isObject, b as isString } from '../isEmpty-181a6611.js';
-export { i as isEqual } from '../isEqual-9004fb92.js';
-export { i as isVisible } from '../isVisible-cfd61ef8.js';
+export { i as isAncestor } from '../isAncestor-a446b32f.js';
+export { i as isArray } from '../isArray-8eeb52b9.js';
+export { i as isEmpty, a as isString } from '../isString-cf957a95.js';
+export { i as isEqual } from '../isEqual-15f4b2f5.js';
+export { i as isNil, a as isNull } from '../isNull-7ae26d1d.js';
+export { i as isObject } from '../isObject-4d5300e9.js';
+export { i as isUndefined } from '../isUndefined-3eca6e32.js';
+export { i as isVisible } from '../isVisible-d1e49905.js';
+export { t as toArray } from '../toArray-93b84b21.js';
 import 'lodash/get';
 import 'lodash/isElement';

package/dist/esm/v3/utils/isAncestor.d.ts

@@ -1 +1,4 @@
-export declare function isAncestor(element: Element, reference: Element): boolean;
+/**
+ * Determines whether the `a` element is an ancestor of the `b` element.
+ */
+export declare const isAncestor: (a: Element, b: Element) => boolean;

package/dist/esm/v3/utils/isArray.d.ts

@@ -1 +1,4 @@
-export declare function isArray(value: unknown): value is Array<unknown>;
+/**
+ * Determines whether the `value` is an array literal.
+ */
+export declare const isArray: (value: unknown) => value is unknown[];

package/dist/esm/v3/utils/isDescendant.d.ts

@@ -1 +1,4 @@
-export declare function isDescendant(element: Element, reference: Element): boolean;
+/**
+ * Determines whether the `a` element is a descendant of the `b` element.
+ */
+export declare const isDescendant: (a: Element, b: Element) => boolean;

package/dist/esm/v3/utils/isEmpty.d.ts

@@ -1 +1,4 @@
-export declare function isEmpty(value: unknown): boolean;
+/**
+ * Determines whether the `value` is an empty object, an empty array, a zero-length string, `null`, or `undefined`.
+ */
+export declare const isEmpty: (value: unknown) => boolean;

package/dist/esm/v3/utils/isEqual.d.ts

@@ -1 +1,4 @@
-export declare function isEqual(a: unknown, b: unknown): boolean;
+/**
+ * Determines whether `a` and `b` are the same value (makes shallow comparison of arrays and objects).
+ */
+export declare const isEqual: (a: unknown, b: unknown) => boolean;

package/dist/esm/v3/utils/isNil.d.ts

@@ -1 +1,4 @@
-export declare function isNil(value: unknown): value is null | undefined;
+/**
+ * Determines whether the `value` is `null` or `undefined`.
+ */
+export declare const isNil: (value: unknown) => value is null | undefined;

package/dist/esm/v3/utils/isNull.d.ts

@@ -1 +1,4 @@
-export declare function isNull(value: unknown): value is null;
+/**
+ * Determines whether the `value` is `null`.
+ */
+export declare const isNull: (value: unknown) => value is null;

package/dist/esm/v3/utils/isNumber.d.ts

@@ -1 +1,4 @@
-export declare function isNumber(value: unknown): value is number;
+/**
+ * Determines whether the `value` is a number.
+ */
+export declare const isNumber: (value: unknown) => value is number;

package/dist/esm/v3/utils/isObject.d.ts

@@ -1 +1,4 @@
-export declare function isObject(value: unknown): value is Record<PropertyKey, unknown>;
+/**
+ * Determines whether the `value` is an object literal.
+ */
+export declare const isObject: (value: unknown) => value is Record<PropertyKey, unknown>;

package/dist/esm/v3/utils/isString.d.ts

@@ -1 +1,4 @@
-export declare function isString(value: unknown): value is string;
+/**
+ * Determines whether the `value` is a string.
+ */
+export declare const isString: (value: unknown) => value is string;

package/dist/esm/v3/utils/isUndefined.d.ts

@@ -1 +1,4 @@
-export declare function isUndefined(value: unknown): value is undefined;
+/**
+ * Determines whether the `value` is `undefined`.
+ */
+export declare const isUndefined: (value: unknown) => value is undefined;

package/dist/esm/v3/utils/isVisible.d.ts

@@ -1 +1 @@
-export declare function isVisible(element: Element): boolean;
+export declare const isVisible: (element: Element) => boolean;

package/dist/esm/v3/utils/toArray.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Converts the `value` to an array literal.
+ */
+export declare const toArray: <T>(value: T | T[]) => T[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "10.3.4",
+  "version": "10.3.5-beta.4335.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -179,6 +179,5 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  },
-  "gitHead": "e0c1bf1455a1e7ca002624a2e4a5718f2bc9e356"
+  }
 }

package/src/components/index.ts

@@ -1,3 +1,4 @@
+export * from './or-autocomplete-v3';
 export * from './or-avatar';
 export * from './or-avatar-v3';
 export * from './or-bottom-sheet-v3';

package/src/components/or-autocomplete-v3/OrAutocomplete.vue

@@ -0,0 +1,427 @@
+<template>
+  <div
+    :ref="'root'"
+    :class="rootStyles"
+  >
+    <template v-if="$slots.label || $slots.addon || label">
+      <OrLabel
+        :control-id="attributes.id"
+        :variant="'input'"
+        :required="required"
+        :disabled="disabled"
+      >
+        <slot name="label">
+          {{ label }}
+        </slot>
+
+        <template v-slot:addon>
+          <slot name="addon" />
+        </template>
+      </OrLabel>
+    </template>
+
+    <template v-if="multiple">
+      <OrTagInput
+        :ref="'tagInput'"
+        v-model="model"
+        :overflow="overflow"
+        :placeholder="placeholder"
+        :required="required"
+        :readonly="readonly"
+        :disabled="disabled"
+        :disable-default-styles="disableDefaultStyles"
+        :enable-clear="enableClear"
+        @input="onInput($event)"
+      >
+        <template v-slot:tag="{ item }">
+          <slot
+            name="tag"
+            :item="item"
+          >
+            {{ item.label }}
+          </slot>
+        </template>
+      </OrTagInput>
+    </template>
+
+    <template v-else>
+      <OrInputBox
+        :ref="'inputBox'"
+        :class="[popoverState === 'open' && (popover && popover.isFlipped ? 'rounded-t-0' : 'rounded-b-0')]"
+        :variant="disableDefaultStyles ? 'unstyled' : 'styled'"
+        :size="size"
+        :invalid="!!error"
+        :readonly="readonly"
+        :disabled="disabled"
+      >
+        <input
+          :ref="'сontrol'"
+          v-bind="attributes"
+          :class="controlStyles"
+          :type="'text'"
+          :value="searchText || model"
+          :autocomplete="'off'"
+          :placeholder="placeholder"
+          :required="required"
+          :readonly="readonly"
+          :disabled="disabled"
+          @input="$emit('input', $event); onInput($event); model = searchText"
+          @keydown="$emit('keydown', $event)"
+          @keyup="$emit('keyup', $event)"
+          @focus="$emit('focus', $event)"
+          @blur="$emit('blur', $event)"
+        >
+
+        <template
+          v-if="loading"
+          v-slot:addon
+        >
+          <OrLoader
+            :variant="'circular'"
+            :color="error ? 'danger' : 'primary'"
+            :size="isMobile ? 'm' : 's'"
+          />
+        </template>
+
+        <template
+          v-else-if="enableClear && !readonly && !disabled"
+          v-slot:addon
+        >
+          <template v-if="model && model.length > 0">
+            <OrIconButton
+              :icon="'close'"
+              :color="'inherit'"
+              @click="reset()"
+            />
+          </template>
+        </template>
+      </OrInputBox>
+    </template>
+
+    <OrPopover
+      :ref="'popover'"
+      :class="dropdownStyles"
+      :custom-styles="dropdownStyles"
+      :is-open="filteredItems.length > 0"
+      :variant="'auto'"
+      :trigger="tagInputRoot || inputBoxRoot"
+      :placement="'bottom'"
+      :offset="0"
+      :full-width="true"
+      :disable-default-styles="true"
+    >
+      <OrMenuItem
+        v-for="(item, i) in filteredItems"
+        :key="i"
+        :class="dropdownItemStyles"
+        @click="add(item)"
+      >
+        <slot
+          name="item"
+          :item="item"
+        >
+          {{ item }}
+        </slot>
+      </OrMenuItem>
+    </OrPopover>
+
+    <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"
+      :disabled="disabled"
+    >
+      {{ error }}
+    </OrError>
+  </div>
+</template>
+
+<script lang="ts">
+import { computedAsync } from '@vueuse/core';
+import { PropType, computed, defineComponent, reactive, ref, toRef } from 'vue-demi';
+import { useControlAttributes, useIdAttribute, useProxyModelValue, useResponsive, useValidationAttributes } from '../../hooks';
+import { SearchFunction } from '../../types';
+import { exclude, include, isNil, 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';
+import { InputBoxSize, 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 { OrMenuItemV3 as OrMenuItem } from '../or-menu-item-v3';
+import { OrPopoverV3 as OrPopover } from '../or-popover-v3';
+import { OrTagInputV3 as OrTagInput } from '../or-tag-input-v3';
+import { TagsOverflow } from '../or-tags-v3';
+import { Autocomplete, AutocompleteControl, AutocompleteDropdown, AutocompleteDropdownDefault, AutocompleteDropdownFlipped, AutocompleteDropdownItem } from './styles';
+import { AutocompleteModelValue, AutocompleteValue } from './types';
+
+export default defineComponent({
+  name: 'OrAutocomplete',
+
+  components: {
+    OrError,
+    OrHint,
+    OrIconButton,
+    OrInputBox,
+    OrLabel,
+    OrLoader,
+    OrMenuItem,
+    OrPopover,
+    OrTagInput,
+  },
+
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue',
+  },
+
+  props: {
+    modelValue: {
+      type: undefined as unknown as PropType<AutocompleteModelValue>,
+      default: undefined,
+    },
+
+    items: {
+      type: Array as PropType<AutocompleteValue[]>,
+      default: [] as AutocompleteValue[],
+    },
+
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
+
+    overflow: {
+      type: String as PropType<`${TagsOverflow}`>,
+      default: () => TagsOverflow.Hidden,
+    },
+
+    size: {
+      type: String as PropType<`${InputBoxSize}`>,
+      default: () => InputBoxSize.M,
+    },
+
+    label: {
+      type: String,
+      default: undefined,
+    },
+
+    placeholder: {
+      type: String,
+      default: undefined,
+    },
+
+    hint: {
+      type: String,
+      default: undefined,
+    },
+
+    error: {
+      type: [String, Boolean],
+      default: undefined,
+    },
+
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+
+    required: {
+      type: Boolean,
+      default: false,
+    },
+
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+
+    disableDefaultStyles: {
+      type: Boolean,
+      default: false,
+    },
+
+    enableClear: {
+      type: Boolean,
+      default: false,
+    },
+
+    searchFunction: {
+      type: Function as PropType<SearchFunction<AutocompleteValue>>,
+
+      default: (async (value, items) => {
+        return value.length > 0 ? items.filter((item) => new RegExp(value, 'i').test(item)) : [];
+      }) as SearchFunction<AutocompleteValue>,
+    },
+  },
+
+  emits: [
+    'update:modelValue',
+
+    'input',
+    'keydown',
+    'keyup',
+    'focus',
+    'blur',
+  ],
+
+  expose: [
+    'root',
+
+    'reset',
+    'clear',
+
+    'focus',
+    'blur',
+  ],
+
+  setup(props, context) {
+    const attributes = reactive({
+      id: useIdAttribute(),
+      ...useControlAttributes(),
+      ...useValidationAttributes(),
+    });
+
+    // Refs & Styles
+    const root = ref<HTMLElement>();
+
+    const rootStyles = computed(() => [
+      'or-autocomplete-v3',
+      ...Autocomplete,
+    ]);
+
+    const tagInput = ref<InstanceType<typeof OrTagInput>>();
+    const tagInputRoot = computed(() => tagInput.value?.root);
+
+    const inputBox = ref<InstanceType<typeof OrInputBox>>();
+    const inputBoxRoot = computed(() => inputBox.value?.root);
+
+    const control = ref<HTMLElement>();
+
+    const controlStyles = computed(() => [
+      ...AutocompleteControl,
+    ]);
+
+    const popover = ref<InstanceType<typeof OrPopover>>();
+    const popoverRoot = computed(() => popover.value?.root);
+    const popoverState = computed(() => popover.value?.state);
+
+    const dropdownStyles = computed(() => [
+      'or-autocomplete-popover-v3',
+      ...AutocompleteDropdown,
+      ...popover.value?.isFlipped ? AutocompleteDropdownFlipped : AutocompleteDropdownDefault,
+    ]);
+
+    const dropdownItemStyles = computed(() => [
+      ...AutocompleteDropdownItem,
+    ]);
+
+    // State
+    const model = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const searchText = ref('');
+
+    const filteredItems = computedAsync(async () => {
+      return searchText.value.length > 0
+        ? (await props.searchFunction(searchText.value, props.items))
+          .filter((item) => !model.value?.includes(item))
+        : [];
+    }, []);
+
+    // Handlers
+    function onInput(event: InputEvent): void {
+      searchText.value = (event.target as HTMLInputElement).value;
+    }
+
+    // Methods
+    function add(value: AutocompleteValue): void {
+      if (props.multiple) {
+        model.value = include(value, isNil(model.value) ? [] : toArray(model.value));
+      } else {
+        model.value = value;
+      }
+
+      clear();
+    }
+
+    function remove(value: AutocompleteValue): void {
+      model.value = exclude(value, isNil(model.value) ? [] : toArray(model.value));
+    }
+
+    function reset(): void {
+      model.value = undefined;
+
+      clear();
+    }
+
+    function clear(): void {
+      searchText.value = '';
+
+      (tagInput.value?.clear as unknown as () => void)();
+    }
+
+    function focus(): void {
+      control.value?.focus();
+    }
+
+    function blur(): void {
+      control.value?.blur();
+    }
+
+    // Helpers
+    const { isMobile } = useResponsive();
+
+    return {
+      attributes,
+
+      root,
+      rootStyles,
+
+      tagInput,
+      tagInputRoot,
+
+      inputBox,
+      inputBoxRoot,
+
+      control,
+      controlStyles,
+
+      popover,
+      popoverRoot,
+      popoverState,
+
+      dropdownStyles,
+      dropdownItemStyles,
+
+      model,
+      searchText,
+      filteredItems,
+
+      onInput,
+
+      add,
+      remove,
+      reset,
+      clear,
+
+      focus,
+      blur,
+
+      isMobile,
+    };
+  },
+});
+</script>

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

@@ -0,0 +1,2 @@
+export { default as OrAutocompleteV3 } from './OrAutocomplete.vue';
+export * from './types';

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

@@ -0,0 +1,61 @@
+export const Autocomplete: string[] = [
+  // Layout
+  'layout-column',
+
+  // Spacing
+  'gap-xs',
+];
+
+export const AutocompleteControl: string[] = [
+  // Box
+  'w-full',
+
+  // Typography
+  'typography-inherit',
+
+  // Theme
+  'theme-background-transparent',
+  'dark:theme-background-transparent-dark',
+
+  'outline-none',
+
+  // Theme (placeholder)
+  'placeholder:theme-foreground-outline',
+  'dark:placeholder:theme-foreground-outline-dark',
+];
+
+export const AutocompleteDropdown: string[] = [
+  // Overflow
+  'overflow-y-auto',
+
+  // Box
+  'max-h-[340px]',
+
+  // Theme
+  'theme-background-default',
+  'dark:theme-background-default-dark',
+
+  'theme-border-1-outline',
+  'dark:theme-border-1-outline-dark',
+];
+
+export const AutocompleteDropdownDefault: string[] = [
+  // Shape
+  'rounded-b-md',
+
+  // Theme
+  '!border-t-0',
+];
+
+export const AutocompleteDropdownFlipped: string[] = [
+  // Shape
+  'rounded-t-md',
+
+  // Theme
+  '!border-b-0',
+];
+
+export const AutocompleteDropdownItem: string[] = [
+  // Typography
+  '!typography-body-2-regular',
+];

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

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