@retailcrm/embed-ui-v1-components 0.4.1-alpha.2 → 0.4.1-alpha.20

package/README.md

@@ -1,3 +1,15 @@
 # `@retailcrm/embed-ui-v1-components`
 
-Компоненты UI
+Компоненты UI для использования в расширениях
+
+Установка:
+
+```bash
+npm i --save @retailcrm/embed-ui-v1-components
+```
+
+или
+
+```bash
+yarn add @retailcrm/embed-ui-v1-components
+```

package/dist/host.cjs

@@ -4,6 +4,14 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const vue = require("vue");
+const isURL = (href) => {
+  try {
+    new URL(href);
+    return true;
+  } catch {
+    return false;
+  }
+};
 const SHAPE_FLAG_ARRAY_CHILDREN = 16;
 const SHAPE_FLAG_TEXT = 8;
 const inlines = ["b", "i", "span", "strong"];
@@ -39,20 +47,20 @@ var APPEARANCE$2 = /* @__PURE__ */ ((APPEARANCE2) => {
   APPEARANCE2["TERTIARY"] = "tertiary";
   return APPEARANCE2;
 })(APPEARANCE$2 || {});
-var SIZE$3 = /* @__PURE__ */ ((SIZE2) => {
+var SIZE$4 = /* @__PURE__ */ ((SIZE2) => {
   SIZE2["LG"] = "lg";
   SIZE2["MD"] = "md";
   SIZE2["SM"] = "sm";
   SIZE2["XS"] = "xs";
   return SIZE2;
-})(SIZE$3 || {});
+})(SIZE$4 || {});
 var VARIANT = /* @__PURE__ */ ((VARIANT2) => {
   VARIANT2["DEFAULT"] = "default";
   VARIANT2["SUCCESS"] = "success";
   VARIANT2["DANGER"] = "danger";
   return VARIANT2;
 })(VARIANT || {});
-const _sfc_main$9 = vue.defineComponent({
+const _sfc_main$c = vue.defineComponent({
   props: {
     /** Устанавливает тип кнопки */
     type: {
@@ -62,7 +70,7 @@ const _sfc_main$9 = vue.defineComponent({
     /** Устанавливает атрибут href якоря */
     href: {
       type: null,
-      validator: (href) => typeof href === "string" || href === null,
+      validator: (href) => typeof href === "string" && isURL(href) || href === null,
       default: null
     },
     /** Регулирует внешний вид кнопки: primary, secondary, tertiary or outlined */
@@ -78,7 +86,7 @@ const _sfc_main$9 = vue.defineComponent({
     /** Размер */
     size: {
       type: String,
-      default: SIZE$3.SM
+      default: SIZE$4.SM
     },
     /** Если кнопка активна */
     active: {
@@ -153,7 +161,7 @@ var ALIGN = /* @__PURE__ */ ((ALIGN2) => {
   ALIGN2["RIGHT"] = "right";
   return ALIGN2;
 })(ALIGN || {});
-const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
   __name: "UiError",
   props: {
     /** Тест, разметка ошибки */
@@ -213,7 +221,7 @@ var APPEARANCE$1 = /* @__PURE__ */ ((APPEARANCE2) => {
   APPEARANCE2["TITLE"] = "title";
   return APPEARANCE2;
 })(APPEARANCE$1 || {});
-var SIZE$2 = /* @__PURE__ */ ((SIZE2) => {
+var SIZE$3 = /* @__PURE__ */ ((SIZE2) => {
   SIZE2["ARTICLE"] = "article";
   SIZE2["BODY"] = "body";
   SIZE2["PARAGRAPH"] = "paragraph";
@@ -222,7 +230,7 @@ var SIZE$2 = /* @__PURE__ */ ((SIZE2) => {
   SIZE2["TITLE01"] = "title-01";
   SIZE2["TITLE02"] = "title-02";
   return SIZE2;
-})(SIZE$2 || {});
+})(SIZE$3 || {});
 const _hoisted_1$5 = ["href", "target"];
 const _hoisted_2$2 = {
   key: 0,
@@ -232,12 +240,13 @@ const _hoisted_3$2 = {
   key: 2,
   class: "ui-v1-link__icon"
 };
-const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
   __name: "UiLink",
   props: {
     /** Атрибут ссылки */
     href: {
       type: String,
+      validator: (href) => typeof href === "string" && isURL(href),
       default: "javascript:void(0);"
     },
     /**
@@ -257,8 +266,8 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     /** Размер текста */
     size: {
       type: String,
-      validator: (size) => Object.values(SIZE$2).includes(size),
-      default: SIZE$2.BODY
+      validator: (size) => Object.values(SIZE$3).includes(size),
+      default: SIZE$3.BODY
     },
     /** Инвертированный цвет ссылок для тёмного фона */
     light: {
@@ -309,7 +318,7 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
   __name: "UiTransition",
   props: {
     /** Наименование анимации перехода */
@@ -337,7 +346,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
   __name: "UiLoader",
   props: {
     /** Диаметр (размер) окружности индикатора */
@@ -369,7 +378,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(__props.transition ? _sfc_main$6 : "div"), vue.normalizeProps(vue.guardReactiveProps(__props.transition ? {
+      return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(__props.transition ? _sfc_main$9 : "div"), vue.normalizeProps(vue.guardReactiveProps(__props.transition ? {
         appear: true,
         class: "ui-v1-loader-wrapper",
         name: __props.transition
@@ -1521,7 +1530,7 @@ var PerfectScrollbar$1 = {
     );
   }
 };
-const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
   __name: "UiScrollBox",
   props: {
     /** Наименование тэга-обёртки для нативного скролла */
@@ -1639,7 +1648,7 @@ function render$2(_ctx, _cache) {
 }
 const IconClear = { render: render$2 };
 const ModalInjectKey = Symbol("$embedModal");
-const plugin = {
+const plugin$1 = {
   install(app, options) {
     app.provide(ModalInjectKey, vue.reactive({
       container: null,
@@ -1728,12 +1737,12 @@ var SCROLLING$1 = /* @__PURE__ */ ((SCROLLING2) => {
   SCROLLING2["NONE"] = "none";
   return SCROLLING2;
 })(SCROLLING$1 || {});
-var SIZE$1 = /* @__PURE__ */ ((SIZE2) => {
+var SIZE$2 = /* @__PURE__ */ ((SIZE2) => {
   SIZE2["LG"] = "lg";
   SIZE2["SM"] = "sm";
   return SIZE2;
-})(SIZE$1 || {});
-const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+})(SIZE$2 || {});
+const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
   __name: "UiModalSidebar",
   props: {
     /** Атрибут id корневого элемента. Должен быть уникальным на странице */
@@ -1776,7 +1785,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     /** Размер панели */
     size: {
       type: String,
-      default: SIZE$1.SM
+      default: SIZE$2.SM
     }
   },
   emits: [
@@ -1963,7 +1972,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
         }))
       ]);
     };
-    const renderBody = () => props.scrolling === SCROLLING$1.NONE ? vue.h("div", { class: "ui-v1-modal-sidebar__body-fixed" }, renderSlot("default")) : vue.h(_sfc_main$4, {
+    const renderBody = () => props.scrolling === SCROLLING$1.NONE ? vue.h("div", { class: "ui-v1-modal-sidebar__body-fixed" }, renderSlot("default")) : vue.h(_sfc_main$7, {
       class: "ui-v1-modal-sidebar__body",
       native: props.scrolling === SCROLLING$1.NATIVE,
       showOnMac: true,
@@ -1976,7 +1985,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
       const direction = props.direction;
       const size = props.size;
       const setVisibility = (visibility2) => () => visibilityOfSidebar.value = visibility2;
-      return vue.h(_sfc_main$6, {
+      return vue.h(_sfc_main$9, {
         name: `slide-${direction}`,
         onBeforeEnter: setVisibility("showing"),
         onAfterEnter: setVisibility("shown"),
@@ -1989,8 +1998,8 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
             class: {
               "ui-v1-modal-sidebar": true,
               "ui-v1-modal-sidebar_left": direction === DIRECTION.LEFT,
-              "ui-v1-modal-sidebar_size_sm": size === SIZE$1.SM,
-              "ui-v1-modal-sidebar_size_lg": size === SIZE$1.LG
+              "ui-v1-modal-sidebar_size_sm": size === SIZE$2.SM,
+              "ui-v1-modal-sidebar_size_lg": size === SIZE$2.LG
             }
           }, [
             renderHeader(),
@@ -2004,7 +2013,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
       const setVisibility = (visibility2) => () => visibilityOfOverlay.value = visibility2;
       return !state.attached ? void 0 : vue.h(vue.Teleport, {
         to: (globals == null ? void 0 : globals.container) ?? document.body
-      }, vue.h(_sfc_main$6, {
+      }, vue.h(_sfc_main$9, {
         name: "fade-2",
         onBeforeEnter: setVisibility("showing"),
         onAfterEnter: setVisibility("shown"),
@@ -2041,6 +2050,15 @@ const expect = (value) => ({
     return Object.values(variants).includes(value);
   }
 });
+const without = (obj, exclude) => {
+  const newObj = {};
+  Object.entries(obj).forEach(([key, value]) => {
+    if (!exclude.includes(key)) {
+      newObj[key] = value;
+    }
+  });
+  return newObj;
+};
 var APPEARANCE = /* @__PURE__ */ ((APPEARANCE2) => {
   APPEARANCE2["ALERT"] = "alert";
   APPEARANCE2["DIALOG"] = "dialog";
@@ -2053,7 +2071,7 @@ var SCROLLING = /* @__PURE__ */ ((SCROLLING2) => {
   SCROLLING2["NATIVE"] = "native";
   return SCROLLING2;
 })(SCROLLING || {});
-const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
   __name: "UiModalWindowSurface",
   props: {
     /** Атрибут id корневого элемента модального окна. Должен быть уникальным на странице */
@@ -2267,7 +2285,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     const slots = vue.useSlots();
     const renderBody = () => {
       const appearance = props.appearance;
-      return vue.h(_sfc_main$6, {
+      return vue.h(_sfc_main$9, {
         name: "zoom",
         onBeforeEnter: () => visibilityOfBody.value = "showing",
         onAfterEnter: () => visibilityOfBody.value = "shown",
@@ -2292,7 +2310,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     };
     const EmbedModalWindowSurface = () => !state.attached ? void 0 : vue.h(vue.Teleport, {
       to: (globals == null ? void 0 : globals.container) ?? document.body
-    }, vue.h(_sfc_main$6, {
+    }, vue.h(_sfc_main$9, {
       name: "fade-2",
       onBeforeEnter: () => visibilityOfOverlay.value = "showing",
       onAfterEnter: () => visibilityOfOverlay.value = "shown",
@@ -2309,7 +2327,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
           "ui-v1-modal_overlapped": state.overlapped
         }],
         onClick: onOverlayClick
-      }, vue.h(_sfc_main$4, {
+      }, vue.h(_sfc_main$7, {
         class: {
           "ui-v1-modal-window-container": true,
           "ui-v1-modal-window-container_fullscreen": props.fullscreen,
@@ -2366,7 +2384,7 @@ const _hoisted_5 = {
   key: 0,
   class: "ui-v1-modal-window__footer-text"
 };
-const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
   __name: "UiModalWindow",
   props: {
     /** Атрибут id корневого элемента модального окна. Должен быть уникальным на странице */
@@ -2480,7 +2498,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     });
     vue.watch(() => props.opened, toggle);
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(_sfc_main$2, vue.mergeProps({
+      return vue.openBlock(), vue.createBlock(_sfc_main$5, vue.mergeProps({
         id: __props.id,
         opened: state.opened,
         closable: __props.closable,
@@ -2537,7 +2555,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
               })
             ])) : vue.createCommentVNode("", true)
           ], 2),
-          __props.responsive ? (vue.openBlock(), vue.createBlock(_sfc_main$4, {
+          __props.responsive ? (vue.openBlock(), vue.createBlock(_sfc_main$7, {
             key: 0,
             class: "ui-v1-modal-window__content",
             "show-on-mac": "",
@@ -2570,7 +2588,24 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
+class VueI18n {
+  constructor(locale = void 0) {
+    __publicField(this, "_state");
+    this._state = vue.reactive({ locale });
+  }
+  get locale() {
+    return this._state.locale;
+  }
+  set locale(locale) {
+    this._state.locale = locale;
+  }
+}
 const VueI18nInjectKey = Symbol("$embedI18n");
+const plugin = {
+  install(app, options) {
+    app.provide(VueI18nInjectKey, options instanceof VueI18n ? options : new VueI18n(options == null ? void 0 : options.locale));
+  }
+};
 const _hoisted_1$1 = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24"
@@ -2584,13 +2619,13 @@ function render(_ctx, _cache) {
   ]));
 }
 const IconPinned = { render };
-var SIZE = /* @__PURE__ */ ((SIZE2) => {
+var SIZE$1 = /* @__PURE__ */ ((SIZE2) => {
   SIZE2["LG"] = "lg";
   SIZE2["MD"] = "md";
   SIZE2["SM"] = "sm";
   SIZE2["XS"] = "xs";
   return SIZE2;
-})(SIZE || {});
+})(SIZE$1 || {});
 function deltaTransition(el) {
   const delta = el.scrollWidth - el.clientWidth;
   const animationDuration = `${(el.scrollWidth / el.clientWidth * 2).toFixed(2)}s`;
@@ -2750,13 +2785,13 @@ const _hoisted_1 = {
 };
 const _hoisted_2 = { class: "ui-v1-tag__content-inner" };
 const _hoisted_3 = ["aria-label"];
-const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
   __name: "UiTag",
   props: {
     /** Рамер */
     size: {
       type: String,
-      default: SIZE.LG
+      default: SIZE$1.LG
     },
     /** Слева выводим иконку закреплённого тега */
     pinned: {
@@ -2843,14 +2878,205 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-exports.ModalPlugin = plugin;
-exports.UiButton = _sfc_main$9;
-exports.UiError = _sfc_main$8;
-exports.UiLink = _sfc_main$7;
-exports.UiLoader = _sfc_main$5;
-exports.UiModalSidebar = _sfc_main$3;
-exports.UiModalWindow = _sfc_main$1;
-exports.UiModalWindowSurface = _sfc_main$2;
-exports.UiScrollBox = _sfc_main$4;
-exports.UiTag = _sfc_main;
-exports.UiTransition = _sfc_main$6;
+var SIZE = /* @__PURE__ */ ((SIZE2) => {
+  SIZE2["SM"] = "sm";
+  SIZE2["MD"] = "md";
+  return SIZE2;
+})(SIZE || {});
+const ToolbarInjectKeys = {
+  size: Symbol("UiToolbarSize")
+};
+const useToolbarSize = () => vue.inject(ToolbarInjectKeys.size, vue.computed(
+  () => "sm"
+  /* SM */
+));
+const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "UiToolbar",
+  props: {
+    size: {
+      type: String,
+      default: SIZE.SM
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    vue.provide(ToolbarInjectKeys.size, vue.computed(() => props.size));
+    return (_ctx, _cache) => {
+      return vue.renderSlot(_ctx.$slots, "default");
+    };
+  }
+});
+const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "UiToolbarButton",
+  props: {
+    /** Устанавливает атрибут href якоря */
+    href: {
+      type: null,
+      validator: (href) => typeof href === "string" && isURL(href) || href === null,
+      default: null
+    },
+    /** Регулирует цветовую схему кнопки: default, success or danger */
+    variant: {
+      type: String,
+      default: VARIANT.DEFAULT
+    },
+    /** Если кнопка активна */
+    active: {
+      type: Boolean,
+      default: false
+    },
+    /** Если кнопка отключена */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /** Если кнопка заблокирована */
+    locked: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(__props, { expose: __expose }) {
+    const root = vue.ref(null);
+    __expose({
+      click: () => {
+        var _a;
+        return (_a = root.value) == null ? void 0 : _a.click();
+      },
+      focus: () => {
+        var _a;
+        return (_a = root.value) == null ? void 0 : _a.focus();
+      },
+      blur: () => {
+        var _a;
+        return (_a = root.value) == null ? void 0 : _a.blur();
+      }
+    });
+    const toolbarSize = useToolbarSize();
+    const size = vue.computed(() => {
+      if (toolbarSize.value === SIZE.SM) {
+        return SIZE$4.XS;
+      }
+      return SIZE$4.SM;
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(_sfc_main$c, vue.mergeProps({
+        ref_key: "root",
+        ref: root,
+        href: __props.href,
+        variant: __props.variant,
+        size: size.value,
+        active: __props.active,
+        disabled: __props.disabled,
+        locked: __props.locked,
+        appearance: "secondary"
+      }, vue.unref(without)(_ctx.$attrs, [
+        "appearance",
+        "class",
+        "style",
+        "type"
+      ])), {
+        default: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16, ["href", "variant", "size", "active", "disabled", "locked"]);
+    };
+  }
+});
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "UiToolbarLink",
+  props: {
+    /** Атрибут ссылки */
+    href: {
+      type: String,
+      validator: (href) => typeof href === "string" && isURL(href),
+      default: "javascript:void(0);"
+    },
+    /**
+     * Определяет, нужно ли открывать ссылку в новой вкладке.
+     * Также добавляется иконка внешней ссылки (если компонент UiIcon установлен)
+     */
+    external: {
+      type: Boolean,
+      default: false
+    },
+    /** Тип ссылок */
+    appearance: {
+      type: String,
+      validator: (appearance) => Object.values(APPEARANCE$1).includes(appearance),
+      default: APPEARANCE$1.DEFAULT
+    },
+    /** Инвертированный цвет ссылок для тёмного фона */
+    light: {
+      type: Boolean,
+      default: false
+    },
+    /** Жирное начертание */
+    accent: {
+      type: Boolean,
+      default: false
+    },
+    /** Подчеркивание dotted вместо стандартного поведения */
+    dotted: {
+      type: Boolean,
+      default: false
+    },
+    /** Определяет, будет ли текст ошибок обрезаться через многоточие или переноситься на следующую строку */
+    ellipsis: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(_sfc_main$a, vue.mergeProps({
+        href: __props.href,
+        external: __props.external,
+        appearance: __props.appearance,
+        light: __props.light,
+        accent: __props.accent,
+        dotted: __props.dotted,
+        ellipsis: __props.ellipsis,
+        size: "small"
+      }, vue.unref(without)(_ctx.$attrs, ["class", "style"])), vue.createSlots({
+        default: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 2
+      }, [
+        _ctx.$slots.icon ? {
+          name: "icon",
+          fn: vue.withCtx(() => [
+            vue.renderSlot(_ctx.$slots, "icon")
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1040, ["href", "external", "appearance", "light", "accent", "dotted", "ellipsis"]);
+    };
+  }
+});
+exports.I18nPlugin = plugin;
+exports.ModalPlugin = plugin$1;
+exports.UiButton = _sfc_main$c;
+exports.UiError = _sfc_main$b;
+exports.UiLink = _sfc_main$a;
+exports.UiLoader = _sfc_main$8;
+exports.UiModalSidebar = _sfc_main$6;
+exports.UiModalWindow = _sfc_main$4;
+exports.UiModalWindowSurface = _sfc_main$5;
+exports.UiScrollBox = _sfc_main$7;
+exports.UiTag = _sfc_main$3;
+exports.UiToolbar = _sfc_main$2;
+exports.UiToolbarButton = _sfc_main$1;
+exports.UiToolbarLink = _sfc_main;
+exports.UiTransition = _sfc_main$9;

package/dist/host.d.ts

@@ -146,6 +146,20 @@ fullscreen: boolean;
 responsive: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
+declare const __VLS_component_2: DefineComponent_2<ExtractPropTypes<    {
+size: {
+type: PropType<SIZE_5 | `${SIZE_5}`>;
+default: SIZE_5;
+};
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
+size: {
+type: PropType<SIZE_5 | `${SIZE_5}`>;
+default: SIZE_5;
+};
+}>> & Readonly<{}>, {
+size: "md" | "sm" | SIZE_5;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+
 declare function __VLS_template(): {
     slots: {
         icon?(_: {
@@ -171,14 +185,30 @@ declare function __VLS_template(): {
     attrs: Partial<{}>;
 };
 
+declare function __VLS_template_2(): {
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    attrs: Partial<{}>;
+};
+
 declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 
+declare type __VLS_TemplateResult_2 = ReturnType<typeof __VLS_template_2>;
+
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
 
+declare type __VLS_WithTemplateSlots_2<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
 declare enum ALIGN {
     LEFT = "left",
     RIGHT = "right"
@@ -213,6 +243,8 @@ declare enum DIRECTION {
     RIGHT = "right"
 }
 
+export declare const I18nPlugin: Plugin_2;
+
 export declare const ModalPlugin: Plugin_2;
 
 declare type Numeric = number | string;
@@ -259,6 +291,11 @@ declare enum SIZE_4 {
     XS = "xs"
 }
 
+declare enum SIZE_5 {
+    SM = "sm",
+    MD = "md"
+}
+
 export declare const UiButton: DefineComponent<
 UiButtonProperties,
 UiButtonMethods
@@ -377,6 +414,19 @@ declare type UiTagProperties = {
     ticker?: boolean;
 };
 
+export declare const UiToolbar: __VLS_WithTemplateSlots_2<typeof __VLS_component_2, __VLS_TemplateResult_2["slots"]>;
+
+export declare const UiToolbarButton: DefineComponent<
+UiToolbarButtonProperties,
+UiButtonMethods
+>;
+
+declare type UiToolbarButtonProperties = Omit<UiButtonProperties, 'appearance' | 'size' | 'type'>;
+
+export declare const UiToolbarLink: DefineComponent<UiToolbarLinkProperties>;
+
+declare type UiToolbarLinkProperties = Omit<UiLinkProperties, 'size'>;
+
 export declare const UiTransition: DefineComponent<UiTransitionProps>;
 
 declare type UiTransitionProps = {