@onereach/ui-components 10.2.1 → 10.2.2-beta.4280.0

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

@@ -1,5 +1,5 @@
-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-387ab537.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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "10.2.1",
+  "version": "10.2.2-beta.4280.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -177,6 +177,5 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  },
-  "gitHead": "2ee3faa9a82bf376dd84e72aba2b60b9600e2c0d"
+  }
 }

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,364 @@
+<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>
+
+    <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 || selectedItem && selectedItem.label"
+        :placeholder="placeholder"
+        :required="required"
+        :readonly="readonly"
+        :disabled="disabled"
+        @input="$emit('input', $event); onInput($event)"
+        @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 && model"
+        v-slot:addon
+      >
+        <OrIconButton
+          :icon="'close'"
+          :color="'inherit'"
+          :disabled="disabled"
+          @click="model = undefined"
+        />
+      </template>
+
+      <OrPopover
+        :ref="'popover'"
+        :class="dropdownStyles"
+        :custom-styles="dropdownStyles"
+        :is-open="!!searchText"
+        :variant="'auto'"
+        :trigger="inputBoxRoot"
+        :placement="'bottom'"
+        :offset="0"
+        :full-width="true"
+        :disable-default-styles="true"
+        @close="searchText = undefined"
+      >
+        <OrMenuItem
+          v-for="(item, i) in filteredItems"
+          :key="i"
+          :class="dropdownItemStyles"
+          @click="updateModel(item.value)"
+        >
+          {{ item.label }}
+        </OrMenuItem>
+      </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
+      v-show="typeof error === 'string' && error.length > 0"
+      :class="['contents']"
+    >
+      <OrError :disabled="disabled">
+        {{ error }}
+      </OrError>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { PropType, computed, defineComponent, reactive, ref, toRef, watch } from 'vue-demi';
+import { useControlAttributes, useIdAttribute, useProxyModelValue, useResponsive, useValidationAttributes } from '../../hooks';
+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 { Autocomplete, AutocompleteControl, AutocompleteDropdown, AutocompleteDropdownDefault, AutocompleteDropdownFlipped, AutocompleteDropdownItem } from './styles';
+import { AutocompleteHandler, AutocompleteItem, AutocompleteModelValue } from './types';
+
+export default defineComponent({
+  name: 'OrAutocomplete',
+
+  components: {
+    OrError,
+    OrHint,
+    OrIconButton,
+    OrInputBox,
+    OrLabel,
+    OrLoader,
+    OrMenuItem,
+    OrPopover,
+  },
+
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue',
+  },
+
+  props: {
+    modelValue: {
+      type: undefined as unknown as PropType<AutocompleteModelValue>,
+      default: undefined,
+    },
+
+    items: {
+      type: Array as PropType<AutocompleteItem[]>,
+      default: () => [],
+    },
+
+    handler: {
+      type: Function as PropType<AutocompleteHandler>,
+
+      default: (
+        async (searchText, items) => {
+          return items.filter(({ label }) => new RegExp(searchText, 'i').test(label));
+        }
+      ) as AutocompleteHandler,
+    },
+
+    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,
+    },
+  },
+
+  emits: [
+    'update:modelValue',
+
+    'input',
+    'keydown',
+    'keyup',
+    'focus',
+    'blur',
+  ],
+
+  expose: [
+    'root',
+  ],
+
+  setup(props, context) {
+    const attributes = reactive({
+      id: useIdAttribute(),
+      ...useControlAttributes(),
+      ...useValidationAttributes(),
+    });
+
+    // Refs & Styles
+    const root = ref<HTMLElement>();
+
+    const rootStyles = computed(() => [
+      'or-autocomplete-v3',
+      ...Autocomplete,
+    ]);
+
+    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<string>();
+
+    const selectedItem = computed(() => {
+      return props.items.find(({ value }) => model.value === value);
+    });
+
+    const filteredItems = ref<AutocompleteItem[]>();
+
+    watch([
+      searchText,
+      () => props.items,
+      () => props.handler,
+    ], async ([
+      searchText,
+      items,
+      handler,
+    ]) => {
+      if (searchText) {
+        filteredItems.value = await handler(searchText, items);
+      }
+    }, { deep: true });
+
+    // Handlers
+    function onInput(event: InputEvent): void {
+      searchText.value = (event.target as HTMLInputElement).value;
+    }
+
+    // Methods
+    function updateModel(value: AutocompleteModelValue): void {
+      model.value = value;
+      searchText.value = undefined;
+    }
+
+    function focus(): void {
+      control.value?.focus();
+    }
+
+    function blur(): void {
+      control.value?.blur();
+    }
+
+    // Helpers
+    const { isMobile } = useResponsive();
+
+    return {
+      attributes,
+
+      root,
+      rootStyles,
+
+      inputBox,
+      inputBoxRoot,
+
+      control,
+      controlStyles,
+
+      popover,
+      popoverRoot,
+      popoverState,
+
+      dropdownStyles,
+      dropdownItemStyles,
+
+      model,
+      searchText,
+
+      selectedItem,
+      filteredItems,
+
+      onInput,
+
+      updateModel,
+
+      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,10 @@
+export type AutocompleteModelValue = string | number | object | null | undefined;
+
+export interface AutocompleteItem {
+  value: NonNullable<AutocompleteModelValue>;
+  label: string;
+}
+
+export interface AutocompleteHandler {
+  (searchText: string, items: AutocompleteItem[]): Promise<AutocompleteItem[]>;
+}

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>

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

@@ -310,6 +310,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 +325,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,
@@ -397,11 +402,6 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
-
-    overflow: {
-      type: String as PropType<`${TagsOverflow}`>,
-      default: () => TagsOverflow.Hidden,
-    },
   },
 
   emits: [