@retailcrm/embed-ui-v1-components 0.9.7 → 0.9.9

package/dist/remote.js

@@ -1,5 +1,6 @@
-import { defineComponent, h, ref, inject, getCurrentInstance } from "vue";
+import { defineComponent, h, reactive, computed, inject, ref, provide, watch, createBlock, openBlock, unref, withCtx, createVNode, createElementBlock, createCommentVNode, renderSlot, toDisplayString, createElementVNode, onBeforeMount, onBeforeUnmount, mergeProps, createSlots, onMounted, createTextVNode, getCurrentInstance } from "vue";
 import "@remote-ui/rpc";
+import isEqual from "lodash.isequal";
 import { preview } from "@retailcrm/image-preview";
 import { format } from "date-fns";
 const REMOTE_SLOT = "RemoteSlot";
@@ -171,6 +172,14 @@ const UiTag = defineRemoteComponent(
   UiTagType,
   ["click", "focus", "blur", "remove"]
 );
+var SIZE$1 = /* @__PURE__ */ ((SIZE2) => {
+  SIZE2["XS"] = "xs";
+  SIZE2["SM"] = "sm";
+  SIZE2["MD"] = "md";
+  SIZE2["LG"] = "lg";
+  SIZE2["XL"] = "xl";
+  return SIZE2;
+})(SIZE$1 || {});
 const events = [
   "input",
   "keydown",
@@ -209,6 +218,850 @@ const UiYandexMap = defineRemoteComponent(
     "update:address"
   ]
 );
+const UiMenuItemType = "UiMenuItem";
+const UiMenuItem = defineRemoteComponent(
+  UiMenuItemType,
+  [],
+  [
+    "default",
+    "avatar",
+    "leading-icon",
+    "description",
+    "trailing-icon"
+  ]
+);
+const UiMenuItemGroupType = "UiMenuItemGroup";
+const UiMenuItemGroup = defineRemoteComponent(
+  UiMenuItemGroupType,
+  [],
+  [
+    "default",
+    "option",
+    "label",
+    "quantity"
+  ]
+);
+const UiSelectTriggerType = "UiSelectTrigger";
+const UiSelectTrigger = defineRemoteComponent(
+  UiSelectTriggerType,
+  [
+    "input",
+    "focus",
+    "blur",
+    "clear",
+    "update:value",
+    "update:expanded"
+  ]
+);
+const UiSelectPopperType = "UiSelectPopper";
+const UiSelectPopper = defineRemoteComponent(
+  UiSelectPopperType,
+  [
+    "update:visible",
+    "show",
+    "hide",
+    "shown",
+    "hidden",
+    "dispose"
+  ]
+);
+const UiSelectOptionType = "UiSelectOption";
+defineRemoteComponent(
+  UiSelectOptionType
+);
+const pluralization_en_GB = (choice) => choice === 1 ? 0 : 1;
+const pluralization_es_ES = (choice) => choice === 1 ? 0 : 1;
+const pluralization_ru_RU = (choice, choicesLength) => {
+  if (choicesLength === 2) {
+    return choice === 1 ? 0 : 1;
+  }
+  const mod100 = choice % 100;
+  return mod100 % 10 === 1 && mod100 !== 11 ? 0 : mod100 % 10 >= 2 && mod100 % 10 <= 4 && !(mod100 >= 10 && mod100 < 15) ? 1 : 2;
+};
+const get = (messages, path) => {
+  let i = 0;
+  let slice = messages[path[0]];
+  while (i < path.length) {
+    if (typeof slice === "string" && i + 1 === path.length) {
+      return slice;
+    }
+    if (typeof slice !== "object") {
+      return void 0;
+    }
+    slice = slice[path[++i]];
+  }
+  return slice;
+};
+const replace = (message, values) => {
+  return Object.keys(values).reduce((message2, key) => {
+    const pattern = new RegExp(`\\{${key}\\}`, "g");
+    const replacement = String(values[key]);
+    return message2.replace(pattern, replacement);
+  }, message);
+};
+const compile = (messages, path, values = void 0) => {
+  const message = get(messages, path);
+  if (typeof message === "string" && values) {
+    return replace(message, values);
+  }
+  return message;
+};
+const fail = (message) => {
+  throw new Error(message);
+};
+const t = (locale, messages, path, values = void 0) => {
+  const keys = path.split(".");
+  if (locale) {
+    const message = compile(messages[locale] ?? {}, keys, values);
+    return typeof message !== "object" ? message : fail(`Translation for "${locale}:${path}" is not translatable`);
+  }
+  return void 0;
+};
+const plural = (template, choice, rule) => {
+  const forms = template.split("|");
+  return forms[rule(choice, forms.length)];
+};
+class I18n {
+  parent;
+  messages;
+  computed;
+  pluralization;
+  fallback;
+  constructor(options = void 0, parent = void 0) {
+    this.parent = parent;
+    this.messages = options?.messages ?? {};
+    this.computed = options?.computed ?? {};
+    this.pluralization = {
+      "en-GB": pluralization_en_GB,
+      "es-ES": pluralization_es_ES,
+      "ru-RU": pluralization_ru_RU,
+      ...options?.pluralization ?? {}
+    };
+    this.fallback = options?.fallback;
+  }
+  t(locale, path, values = void 0) {
+    try {
+      const _t = (locale2) => t(locale2, this.messages, path, values);
+      return _t(locale) ?? _t(this.fallback) ?? fail(`Translation for "${path}" does not exists`);
+    } catch (e) {
+      if (this.parent) {
+        return this.parent.t(locale, path, values);
+      }
+      throw e;
+    }
+  }
+  tc(locale, path, choice, values = void 0) {
+    return plural(
+      this.t(
+        locale,
+        path,
+        values
+      ),
+      choice,
+      this.pluralization[locale]
+    );
+  }
+  compute(locale, key, values) {
+    const computed2 = this.computed[key];
+    if (computed2) {
+      return computed2(localize$3(this, locale), values);
+    }
+    if (this.parent) {
+      return this.parent.compute(locale, key, values);
+    }
+    return fail("Key " + key + " is not registered");
+  }
+  extend(options) {
+    return new I18n({
+      pluralization: this.pluralization,
+      fallback: this.fallback,
+      ...options
+    }, this);
+  }
+}
+const localize$3 = (i18n, locale) => ({
+  t(path, values = void 0) {
+    return i18n.t(locale, path, values);
+  },
+  tc(path, choice, values = void 0) {
+    return i18n.tc(locale, path, choice, values);
+  },
+  compute(key, values) {
+    return i18n.compute(locale, key, values);
+  }
+});
+const fallback = "en-GB";
+const define = (options = void 0, parent = void 0) => {
+  const i18n = new I18n({
+    ...options,
+    fallback
+  }, parent);
+  const extend = (i18n2, options2 = void 0) => options2 ? i18n2.extend(options2) : i18n2;
+  return {
+    i18n,
+    init: (locale, options2 = void 0) => localize$3(
+      extend(i18n, options2),
+      locale
+    ),
+    fallback
+  };
+};
+const selected$2 = "Selected";
+const search$2 = { "placeholder": "", "noResult": "Nothing found" };
+const messages_en_GB = {
+  selected: selected$2,
+  search: search$2
+};
+const selected$1 = "Seleccionado";
+const search$1 = { "placeholder": "", "noResult": "No se ha encontrado" };
+const messages_es_ES = {
+  selected: selected$1,
+  search: search$1
+};
+const selected = "Выбрано";
+const search = { "placeholder": "", "noResult": "Ничего не найдено" };
+const messages_ru_RU = {
+  selected,
+  search
+};
+const _18n = define({
+  messages: {
+    "en-GB": messages_en_GB,
+    "es-ES": messages_es_ES,
+    "ru-RU": messages_ru_RU
+  }
+});
+var PLACEMENT = /* @__PURE__ */ ((PLACEMENT2) => {
+  PLACEMENT2["TOP"] = "top";
+  PLACEMENT2["TOP_START"] = "top-start";
+  PLACEMENT2["TOP_END"] = "top-end";
+  PLACEMENT2["BOTTOM"] = "bottom";
+  PLACEMENT2["BOTTOM_START"] = "bottom-start";
+  PLACEMENT2["BOTTOM_END"] = "bottom-end";
+  PLACEMENT2["LEFT"] = "left";
+  PLACEMENT2["LEFT_START"] = "left-start";
+  return PLACEMENT2;
+})(PLACEMENT || {});
+const escapeSpecialSymbols = (text) => text.replace(
+  /([\\^$.*+?()[\]{}|=!<>:-])/g,
+  "\\$1"
+);
+const highlight = (text, term, style) => text.replace(
+  new RegExp(`(${escapeSpecialSymbols(term)})`, "gi"),
+  `<span style="${style}">$1</span>`
+);
+let counter = 0;
+const uid = (prefix = "ui-v1-select") => `${prefix}-${++counter}`;
+const IsSelectedKey = Symbol("UiSelectedIsSelected");
+const RegisterKey = Symbol("UiSelectRegister");
+const SyncKey = Symbol("UiSelectSync");
+const UnregisterKey = Symbol("UiSelectUnregister");
+const ToggleKey = Symbol("UiSelectToggle");
+const FilterKey = Symbol("UiSelectFilter");
+const FilteredKey = Symbol("UiSelectFiltered");
+const TickerKey = Symbol("UiSelectTicker");
+const MultipleKey = Symbol("UiSelectMultiple");
+const FastenedKey = Symbol("UiSelectFastened");
+const UnregisterOptionKey = Symbol("UiSelectUnregisterOption");
+const RegisterOptionKey = Symbol("UiSelectRegisterOption");
+const RegisterGroupKey = Symbol("UiSelectOptionGroupRegister");
+const UnregisterGroupKey = Symbol("UiSelectOptionGroupUnregister");
+const RegisterHeaderOptionKey = Symbol("UiSelectOptionGroupRegisterHeaderOption");
+const UnregisterHeaderOptionKey = Symbol("UiSelectOptionGroupUnregisterHeaderOption");
+const I18nInjectKey = Symbol("$embedI18n");
+const _hoisted_1$3 = {
+  key: 0,
+  class: "ui-v1-select__no-results-text"
+};
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "UiSelect",
+  props: {
+    /** Атрибут id корневого элемента выпадающего списка. Должен быть уникальным на странице */
+    id: {
+      type: String,
+      default: void 0
+    },
+    /** Атрибут value, содержащий выбранный элемент из выпадающего списка */
+    value: {
+      type: null,
+      default: void 0
+    },
+    /** Атрибут placeholder нативного поля ввода input */
+    placeholder: {
+      type: String,
+      default: "test"
+    },
+    /** Отображает иконку сброса введённого или выбранного значения в виде крестика */
+    clearable: {
+      type: Boolean,
+      default: false
+    },
+    /** Фильтрация строк выпадающего списка на соответствие введённого выражения в input */
+    filterable: {
+      type: Boolean,
+      default: false
+    },
+    /** Подсвечивает поле как содержащее некорректное значение */
+    invalid: {
+      type: Boolean,
+      default: false
+    },
+    /** Устанавливает поле ввода в состояние доступное только для чтения */
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    /** Блокировка поля ввода */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /** Функция для проверки равенства элементов */
+    equalsFn: {
+      type: Function,
+      default: (a, b) => a === b
+    },
+    /**
+     * Сторона цели, у которой появится плавающий элемент,
+     * или подробный объект настройки положения и адаптации положения при нехватке места
+     */
+    placement: {
+      type: String,
+      validator: (placement) => Object.values(PLACEMENT).includes(placement),
+      default: PLACEMENT.BOTTOM
+    },
+    /** События целевого элемента, по которым производится переключение видимости */
+    targetTriggers: {
+      type: [Array, Object],
+      default: () => ({
+        show: ["click"]
+      })
+    },
+    /** События плавающего элемента, по которым производится переключение видимости */
+    popperTriggers: {
+      type: [Array, Object],
+      default: () => []
+    },
+    /**
+     * Флаг, устанавливающий ширину выпадающего списка по ширине целевого элемента.
+     * По-умолчанию отключает такое поведение
+     */
+    popperFitTrigger: {
+      type: Boolean,
+      default: false
+    },
+    /** Стиль для плавающего элемента */
+    popperClass: {
+      type: String,
+      default: null
+    },
+    /** Набор свойств плавающего элемента. See @/common/components/popper */
+    popperOptions: {
+      type: Object,
+      default: () => ({})
+    },
+    /** Размер поля ввода */
+    textboxSize: {
+      type: String,
+      validator: (size) => Object.values(SIZE$1).includes(size),
+      default: SIZE$1.SM
+    },
+    /** Наличие множественного выбора среди элементов выпадающего списка */
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    /** Состояние открытия выпадающего списка */
+    expanded: {
+      type: Boolean,
+      default: false
+    },
+    /** Устанавливает в качестве выводимого в input значения только содержимое placeholder */
+    placeholderOnly: {
+      type: Boolean,
+      default: false
+    },
+    /** Добавляет анимацию показала полной строки при переполнении */
+    ticker: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const state = reactive({
+      expanded: props.expanded,
+      filter: "",
+      value: props.value
+    });
+    const i18n = computed(() => _18n.init(inject(I18nInjectKey, null)?.locale ?? _18n.fallback));
+    const noResult = computed(() => i18n.value.t("search.noResult", { filter: state.filter }));
+    const optionsRegistry = ref([]);
+    const selection = computed(() => {
+      const model = arraify(state.value);
+      const selectedOptions = [];
+      model.forEach((item) => {
+        const option = optionsRegistry.value.find((o) => equals(o.value, item));
+        if (option) {
+          selectedOptions.push(option);
+        }
+      });
+      return selectedOptions;
+    });
+    const arraify = (value) => Array.isArray(value) ? [...value] : typeof value === "number" || typeof value === "boolean" || value ? [value] : [];
+    const equals = (a, b) => props.equalsFn(a, b);
+    const contains = (array, value) => array.some((v) => equals(v, value));
+    provide(RegisterKey, (option) => {
+      if (optionsRegistry.value.some((item) => item.id === option.id)) {
+        throw new Error(`[UiSelect] Component with id ${option.id} already registered. Unregister it before using again.`);
+      }
+      optionsRegistry.value.push(option);
+    });
+    provide(SyncKey, (id, data) => {
+      const option = optionsRegistry.value.find((option2) => option2.id === id);
+      if (option) {
+        option.label = data.label;
+        option.value = data.value;
+      }
+    });
+    provide(UnregisterKey, (id) => {
+      const index = optionsRegistry.value.findIndex((option) => option.id === id);
+      if (index !== -1) {
+        optionsRegistry.value.splice(index, 1);
+      }
+    });
+    provide(IsSelectedKey, computed(() => (value) => {
+      return Array.isArray(state.value) ? contains(state.value, value) : equals(state.value, value);
+    }));
+    provide(ToggleKey, (value) => {
+      if (props.multiple) {
+        const model = arraify(state.value);
+        const index = model.findIndex((item) => equals(item, value));
+        if (index !== -1) {
+          model.splice(index, 1);
+        } else {
+          model.push(value);
+        }
+        state.value = model;
+        if (!props.multiple) {
+          close();
+        }
+      } else {
+        state.value = value;
+        close();
+      }
+    });
+    provide(FilterKey, computed(() => state.filter));
+    provide(FilteredKey, computed(() => props.filterable && state.filter.length > 0));
+    provide(TickerKey, computed(() => props.ticker));
+    provide(MultipleKey, computed(() => props.multiple));
+    const onInput = (value) => {
+      state.filter = value;
+    };
+    const close = () => {
+      if (state.expanded) {
+        state.expanded = false;
+        state.filter = "";
+      }
+    };
+    watch(() => props.expanded, (newVal) => {
+      state.expanded = newVal;
+      if (!newVal) {
+        state.filter = "";
+      }
+    });
+    watch(() => props.value, (newVal) => {
+      state.value = newVal;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(UiPopperConnector), null, {
+        default: withCtx(() => [
+          createVNode(unref(UiSelectTrigger), {
+            id: __props.id,
+            value: state.value,
+            multiple: __props.multiple,
+            selection: selection.value,
+            filter: state.filter,
+            filterable: __props.filterable,
+            clearable: __props.clearable,
+            expanded: state.expanded,
+            invalid: __props.invalid,
+            disabled: __props.disabled,
+            readonly: __props.readonly,
+            "placeholder-only": __props.placeholderOnly,
+            placeholder: __props.placeholder,
+            "textbox-size": __props.textboxSize,
+            onInput,
+            "onUpdate:value": _cache[0] || (_cache[0] = ($event) => state.value = $event),
+            "onUpdate:expanded": _cache[1] || (_cache[1] = ($event) => state.expanded = $event)
+          }, null, 8, ["id", "value", "multiple", "selection", "filter", "filterable", "clearable", "expanded", "invalid", "disabled", "readonly", "placeholder-only", "placeholder", "textbox-size"]),
+          createVNode(unref(UiSelectPopper), {
+            id: __props.id,
+            disabled: __props.disabled || __props.readonly,
+            multiple: __props.multiple,
+            opened: state.expanded,
+            placement: __props.placement,
+            "popper-class": __props.popperClass,
+            "popper-fit-trigger": __props.popperFitTrigger,
+            "popper-options": __props.popperOptions,
+            "popper-triggers": __props.popperTriggers,
+            readonly: __props.readonly,
+            "target-triggers": __props.targetTriggers,
+            ticker: __props.ticker,
+            filterable: __props.filterable,
+            "options-registry": optionsRegistry.value,
+            onHide: close
+          }, {
+            default: withCtx(() => [
+              __props.filterable && optionsRegistry.value.every((o) => !o.isMatched()) && noResult.value ? (openBlock(), createElementBlock("div", _hoisted_1$3, toDisplayString(noResult.value), 1)) : createCommentVNode("", true),
+              renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 3
+          }, 8, ["id", "disabled", "multiple", "opened", "placement", "popper-class", "popper-fit-trigger", "popper-options", "popper-triggers", "readonly", "target-triggers", "ticker", "filterable", "options-registry"])
+        ]),
+        _: 3
+      });
+    };
+  }
+});
+const _hoisted_1$2 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24"
+};
+function render$1(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$2, [..._cache[0] || (_cache[0] = [
+    createElementVNode("path", {
+      fill: "currentColor",
+      "fill-rule": "evenodd",
+      d: "M2 12C2 6.477 6.477 2 12 2A10 10 0 1 1 2 12m8.73 3.35 5.62-5.62a.5.5 0 0 0 0-.69l-.53-.53a.5.5 0 0 0-.7 0l-4.74 4.74-1.5-1.49a.48.48 0 0 0-.7 0l-.53.53a.5.5 0 0 0 0 .71l2.38 2.35a.48.48 0 0 0 .7 0",
+      "clip-rule": "evenodd"
+    }, null, -1)
+  ])]);
+}
+const IconCheckmarkCircle = { render: render$1 };
+const _hoisted_1$1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24"
+};
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$1, [..._cache[0] || (_cache[0] = [
+    createElementVNode("path", {
+      fill: "currentColor",
+      "fill-rule": "evenodd",
+      d: "M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10A10 10 0 0 0 12 2m0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16m1-9h2.5a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5H13v2.5a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5V13H8.5a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5H11V8.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z",
+      "clip-rule": "evenodd"
+    }, null, -1)
+  ])]);
+}
+const IconAddCircleOutlined = { render };
+var SIZE = /* @__PURE__ */ ((SIZE2) => {
+  SIZE2["XS"] = "xs";
+  SIZE2["SM"] = "sm";
+  SIZE2["MD"] = "md";
+  SIZE2["LG"] = "lg";
+  return SIZE2;
+})(SIZE || {});
+const _hoisted_1 = ["aria-selected"];
+const _hoisted_2 = ["innerHTML"];
+const _hoisted_3 = ["innerHTML"];
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "UiSelectOption",
+  props: {
+    /** Значение опции */
+    value: {
+      type: null,
+      required: true
+    },
+    /** Заголовок */
+    label: {
+      type: String,
+      required: true
+    },
+    /** Описание */
+    description: {
+      type: String,
+      default: ""
+    },
+    /** Опция выбрана/не выбрана в списке */
+    active: {
+      type: Boolean,
+      default: false
+    },
+    /** Заблокированный */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /** Размер шрифта, иконок и внутренних отступов компонента */
+    size: {
+      type: String,
+      validator: (size) => Object.values(SIZE).includes(size),
+      default: SIZE.MD
+    },
+    /** Счетчик количества */
+    counter: {
+      type: null,
+      validator: (counter2) => counter2 === null || ["string", "number"].includes(typeof counter2),
+      default: null
+    },
+    /** Жирное начертание текста */
+    accent: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const id = uid("u1-v1-select-option");
+    const isSelected = inject(IsSelectedKey, ref(() => false));
+    const syncInSelect = inject(SyncKey, () => {
+    });
+    const registerInGroup = inject(RegisterOptionKey, () => {
+    });
+    const registerInSelect = inject(RegisterKey, () => {
+    });
+    const unregisterInGroup = inject(UnregisterOptionKey, () => {
+    });
+    const unregisterInSelect = inject(UnregisterKey, () => {
+    });
+    const toggle = inject(ToggleKey, () => {
+    });
+    const fastened = inject(FastenedKey, false);
+    const filter = inject(FilterKey, ref(""));
+    const filtered = inject(FilteredKey, ref(false));
+    const ticker = inject(TickerKey, ref(false));
+    const multiple = inject(MultipleKey, ref(false));
+    const highlight$1 = (text, style = "font-weight: 500;") => highlight(text, filter.value, style);
+    const texts = computed(() => ({
+      label: filtered.value ? highlight$1(props.label) : props.label,
+      description: filtered.value ? highlight$1(props.description, "font-weight: 600;") : props.description
+    }));
+    const matched = computed(() => texts.value.label !== props.label || texts.value.description !== props.description);
+    const selected2 = computed(() => props.active || isSelected.value(props.value));
+    const hidden = computed(() => !(fastened || !filtered.value || matched.value));
+    const onClick = () => {
+      if (!props.disabled) {
+        toggle(props.value);
+      }
+    };
+    const off = watch([
+      () => props.label,
+      () => props.value
+    ], ([newLabel, newValue], [oldLabel, oldValue]) => {
+      if (newLabel !== oldLabel || !isEqual(newValue, oldValue)) {
+        syncInSelect(id, {
+          label: newLabel,
+          value: newValue
+        });
+      }
+    });
+    onBeforeMount(() => {
+      const option = {
+        id,
+        value: props.value,
+        label: props.label,
+        isMatched: () => !filtered.value || matched.value
+      };
+      registerInSelect(option);
+      registerInGroup(option);
+    });
+    onBeforeUnmount(() => {
+      off();
+      unregisterInSelect(id);
+      unregisterInGroup(id);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps(_ctx.$attrs, {
+        "aria-selected": selected2.value ? "true" : "false",
+        class: {
+          "ui-v1-select-option": true,
+          "ui-v1-select-option_selected": selected2.value,
+          "ui-v1-select-option_disabled": __props.disabled,
+          "ui-v1-select-option_hidden": hidden.value
+        },
+        role: "option",
+        onClick
+      }), [
+        renderSlot(_ctx.$slots, "default", {
+          highlight: highlight$1,
+          selected: selected2.value
+        }, () => [
+          createVNode(unref(UiMenuItem), {
+            accent: __props.accent,
+            counter: __props.counter,
+            disabled: __props.disabled,
+            size: __props.size,
+            ticker: unref(ticker)
+          }, createSlots({
+            "trailing-icon": withCtx(() => [
+              renderSlot(_ctx.$slots, "trailing-icon", { selected: selected2.value }, () => [
+                selected2.value ? (openBlock(), createBlock(unref(IconCheckmarkCircle), {
+                  key: 0,
+                  class: "ui-v1-select-option__checkmark-icon",
+                  "aria-hidden": "true"
+                })) : unref(multiple) ? (openBlock(), createBlock(unref(IconAddCircleOutlined), {
+                  key: 1,
+                  class: "ui-v1-select-option__add-icon",
+                  "aria-hidden": "true"
+                })) : createCommentVNode("", true)
+              ])
+            ]),
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "value", { selected: selected2.value }, () => [
+                createElementVNode("span", {
+                  innerHTML: texts.value.label
+                }, null, 8, _hoisted_2)
+              ])
+            ]),
+            _: 2
+          }, [
+            _ctx.$slots["leading-icon"] ? {
+              name: "leading-icon",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "leading-icon", { selected: selected2.value })
+              ]),
+              key: "0"
+            } : void 0,
+            texts.value.description ? {
+              name: "description",
+              fn: withCtx(() => [
+                createElementVNode("span", {
+                  innerHTML: texts.value.description
+                }, null, 8, _hoisted_3)
+              ]),
+              key: "1"
+            } : void 0
+          ]), 1032, ["accent", "counter", "disabled", "size", "ticker"])
+        ])
+      ], 16, _hoisted_1);
+    };
+  }
+});
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "UiSelectOptionGroupHeader",
+  setup(__props) {
+    provide(RegisterOptionKey, inject(RegisterHeaderOptionKey, () => {
+    }));
+    provide(UnregisterOptionKey, inject(UnregisterHeaderOptionKey, () => {
+    }));
+    provide(FastenedKey, computed(() => true));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", null, [
+        renderSlot(_ctx.$slots, "default")
+      ]);
+    };
+  }
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "UiSelectOptionGroup",
+  props: {
+    /** Заголовок группы опций */
+    label: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(__props) {
+    const id = uid("u1-v1-select-option-group");
+    const options = ref([]);
+    const groups = ref([]);
+    const headerOptions = ref([]);
+    const COMPONENT_ALREADY_REGISTERED = (prefix, id2) => {
+      return `[${prefix}] Component with id ${id2} already registered. Unregister it before using again.`;
+    };
+    provide(RegisterOptionKey, (option) => {
+      if (options.value.some((item) => item.id === option.id)) {
+        throw new Error(COMPONENT_ALREADY_REGISTERED("UiSelect", option.id));
+      }
+      options.value.push(option);
+    });
+    provide(UnregisterOptionKey, (id2) => {
+      const index = options.value.findIndex((option) => option.id === id2);
+      if (index !== -1) {
+        options.value.splice(index, 1);
+      }
+    });
+    provide(RegisterGroupKey, (group) => {
+      if (groups.value.some((g) => g.id === group.id)) {
+        throw new Error(COMPONENT_ALREADY_REGISTERED("UiSelectOptionGroup", group.id));
+      }
+      groups.value.push(group);
+    });
+    provide(UnregisterGroupKey, (id2) => {
+      const index = groups.value.findIndex((group) => group.id === id2);
+      if (index !== -1) {
+        groups.value.splice(index, 1);
+      }
+    });
+    provide(RegisterHeaderOptionKey, (option) => {
+      if (headerOptions.value.some((item) => item.id === option.id)) {
+        throw new Error(COMPONENT_ALREADY_REGISTERED("UiSelectOptionGroupHeader", option.id));
+      }
+      headerOptions.value.push(option);
+    });
+    provide(UnregisterHeaderOptionKey, (id2) => {
+      const index = headerOptions.value.findIndex((o) => o.id === id2);
+      if (index !== -1) {
+        headerOptions.value.splice(index, 1);
+      }
+    });
+    provide(FastenedKey, computed(() => false));
+    const registerInGroup = inject(RegisterGroupKey, () => {
+    });
+    const unregisterInGroup = inject(UnregisterGroupKey, () => {
+    });
+    const filtered = inject(FilteredKey, ref(false));
+    const matchedOptionsQuantity = computed(() => {
+      return options.value.filter((o) => o.isMatched()).length + groups.value.reduce((total, g) => total + g.matchedQuantity(), 0);
+    });
+    const matched = computed(() => !!matchedOptionsQuantity.value || headerOptions.value.some((o) => o.isMatched()) || groups.value.some((g) => g.isMatched()));
+    const hidden = computed(() => !filtered.value || matched.value);
+    onMounted(() => registerInGroup({
+      id,
+      matchedQuantity: () => matchedOptionsQuantity.value,
+      isMatched: () => matched.value
+    }));
+    onBeforeUnmount(() => unregisterInGroup(id));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps(_ctx.$attrs, {
+        class: {
+          "ui-v1-select-option-group": true,
+          "ui-v1-select-option-group_hidden": hidden.value
+        }
+      }), [
+        createVNode(unref(UiMenuItemGroup), null, createSlots({
+          label: withCtx(() => [
+            renderSlot(_ctx.$slots, "label", {}, () => [
+              createTextVNode(toDisplayString(__props.label), 1)
+            ])
+          ]),
+          quantity: withCtx(() => [
+            renderSlot(_ctx.$slots, "quantity", { quantity: matchedOptionsQuantity.value }, () => [
+              createTextVNode(toDisplayString(matchedOptionsQuantity.value), 1)
+            ])
+          ]),
+          default: withCtx(() => [
+            renderSlot(_ctx.$slots, "default")
+          ]),
+          _: 2
+        }, [
+          _ctx.$slots.option ? {
+            name: "option",
+            fn: withCtx(() => [
+              createVNode(_sfc_main$1, null, {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "option")
+                ]),
+                _: 3
+              })
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1024)
+      ], 16);
+    };
+  }
+});
 const ImageWorkersKey = Symbol("$image.workers");
 const usePreview = (workers = ref([])) => {
   const _workers = inject(ImageWorkersKey, workers);
@@ -1868,6 +2721,10 @@ export {
   UiLinkType,
   UiLoader,
   UiLoaderType,
+  UiMenuItem,
+  UiMenuItemGroup,
+  UiMenuItemGroupType,
+  UiMenuItemType,
   UiModalSidebar,
   UiModalSidebarType,
   UiModalWindow,
@@ -1884,6 +2741,9 @@ export {
   UiRadioType,
   UiScrollBox,
   UiScrollBoxType,
+  _sfc_main$3 as UiSelect,
+  _sfc_main$2 as UiSelectOption,
+  _sfc_main as UiSelectOptionGroup,
   UiTag,
   UiTagType,
   UiTextbox,