@retailcrm/embed-ui-v1-components 0.5.8 → 0.5.10

package/dist/host.cjs

@@ -4,12 +4,13 @@ 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 _hoisted_1$e = {
+const imagePreview = require("@retailcrm/image-preview");
+const _hoisted_1$f = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24"
 };
 function render$7(_ctx, _cache) {
-  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$e, _cache[0] || (_cache[0] = [
+  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$f, _cache[0] || (_cache[0] = [
     vue.createElementVNode("path", {
       fill: "currentColor",
       "fill-rule": "evenodd",
@@ -19,30 +20,72 @@ function render$7(_ctx, _cache) {
   ]));
 }
 const IconHelpOutlined = { render: render$7 };
-const _hoisted_1$d = {
+const _hoisted_1$e = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 18 8"
 };
 function render$6(_ctx, _cache) {
-  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$d, _cache[0] || (_cache[0] = [
+  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$e, _cache[0] || (_cache[0] = [
     vue.createElementVNode("g", { fill: "currentColor" }, [
       vue.createElementVNode("path", { d: "M0 0v8h2.867q1.257-.011 1.935-.604.68-.594.68-1.748 0-.675-.33-1.143a1.54 1.54 0 0 0-.892-.62q.497-.21.775-.654.279-.45.279-1.039 0-1.077-.694-1.632Q3.926 0 2.584 0zm1.52 6.676v-2.16h1.393q1.048.016 1.048 1.116 0 .488-.303.77-.3.273-.836.274zm1.124-3.324H1.52V1.335h1.064q.628 0 .916.242.294.236.294.78 0 .972-1.15.995M7.503 6.352h2.665L10.679 8h1.616l-2.76-8H8.125L5.38 8h1.616zm2.254-1.336H7.913l.917-2.994zM12.362 8V0h2.27q.972 0 1.737.478.77.473 1.2 1.352.432.873.431 1.989v.368q0 1.115-.425 1.983a3.17 3.17 0 0 1-1.191 1.346A3.26 3.26 0 0 1 14.646 8zm1.52-6.665v5.34h.734q.891 0 1.363-.631.47-.632.481-1.808v-.423q0-1.22-.466-1.846-.466-.632-1.363-.632z" })
     ], -1)
   ]));
 }
 const SpriteBAD = { render: render$6 };
-const _hoisted_1$c = {
+const _hoisted_1$d = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 16 8"
 };
 function render$5(_ctx, _cache) {
-  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$c, _cache[0] || (_cache[0] = [
+  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$d, _cache[0] || (_cache[0] = [
     vue.createElementVNode("g", { fill: "currentColor" }, [
       vue.createElementVNode("path", { d: "M3.373 6.016 5.058 0h1.704L4.175 8H2.577L0 0h1.7zM8.99 8H7.46V0H8.99zM11.84 8V5.181h1.343q1.322 0 2.067-.676.75-.681.75-1.857 0-.774-.342-1.379a2.3 2.3 0 0 0-.98-.94Q14.045 0 13.208 0H10.31v8zm1.368-4.154h-1.367v-2.51h1.403q.567.01.888.373t.322.95q0 .571-.322.88-.316.307-.924.307" })
     ], -1)
   ]));
 }
 const SpriteVIP = { render: render$5 };
+const ImageWorkersKey = Symbol("$image.workers");
+const _hoisted_1$c = ["alt", "src"];
+const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
+  __name: "UiImage",
+  props: {
+    alt: {
+      type: String,
+      default: ""
+    },
+    src: {
+      type: String,
+      default: ""
+    },
+    resize: {
+      type: null,
+      default: void 0
+    },
+    crop: {
+      type: null,
+      default: void 0
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const workers = vue.inject(ImageWorkersKey, vue.ref([]));
+    const url = vue.computed(() => {
+      if (!props.src) {
+        return void 0;
+      }
+      if (props.resize || props.crop) {
+        return workers.value.length ? imagePreview.preview(workers.value, props.src, props.resize, props.crop) : void 0;
+      }
+      return props.src;
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("img", vue.mergeProps({
+        alt: __props.alt,
+        src: url.value
+      }, _ctx.$attrs), null, 16, _hoisted_1$c);
+    };
+  }
+});
 const isURL = (href) => {
   try {
     const normalizedHref = href.includes("://") ? href : `http://${href}`;
@@ -68,24 +111,23 @@ var STATUS = /* @__PURE__ */ ((STATUS2) => {
   STATUS2["FREE"] = "free";
   return STATUS2;
 })(STATUS || {});
-const _hoisted_1$b = ["src"];
-const _hoisted_2$4 = {
+const _hoisted_1$b = {
   key: 1,
   class: "ui-v1-avatar__unresolved"
 };
-const _hoisted_3$3 = {
+const _hoisted_2$4 = {
   key: 3,
   class: "ui-v1-avatar__initials"
 };
-const _hoisted_4$1 = {
+const _hoisted_3$3 = {
   key: 4,
   class: "ui-v1-avatar__labels"
 };
-const _hoisted_5$1 = {
+const _hoisted_4$1 = {
   key: 0,
   class: "ui-v1-avatar__label ui-v1-avatar__label_vip"
 };
-const _hoisted_6 = {
+const _hoisted_5$1 = {
   key: 1,
   class: "ui-v1-avatar__label ui-v1-avatar__label_bad"
 };
@@ -130,6 +172,10 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
       type: String,
       validator: (size) => Object.values(SIZE$5).includes(size),
       default: SIZE$5.SM
+    },
+    optimize: {
+      type: [Boolean, Object],
+      default: true
     }
   },
   setup(__props) {
@@ -146,6 +192,20 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
       return otherNames.length > 0 ? firstLetterOf(firstName) + firstLetterOf(otherNames[otherNames.length - 1]) : firstLetterOf(firstName);
     });
     const size = vue.inject(AvatarSizeKey, vue.computed(() => props.size));
+    const optimization = vue.computed(() => {
+      if (!props.optimize) {
+        return { resize: void 0, crop: void 0 };
+      }
+      const processing = typeof props.optimize === "object" ? props.optimize : {};
+      return {
+        resize: processing.resize ?? {
+          [SIZE$5.XS]: "48x-",
+          [SIZE$5.SM]: "72x-",
+          [SIZE$5.LG]: "104x-"
+        }[size.value],
+        crop: processing.crop
+      };
+    });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(__props.href ? "a" : "div"), vue.mergeProps({
         ref: "root",
@@ -158,15 +218,16 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
         }
       }, _ctx.$attrs), {
         default: vue.withCtx(() => [
-          __props.src ? (vue.openBlock(), vue.createElementBlock("img", {
+          __props.src ? (vue.openBlock(), vue.createBlock(_sfc_main$i, {
             key: 0,
             src: __props.src,
-            alt: "",
+            resize: optimization.value.resize,
+            crop: optimization.value.crop,
             class: "ui-v1-avatar__image",
             draggable: "false",
             onLoad: _cache[0] || (_cache[0] = ($event) => loaded.value = true),
             onError: _cache[1] || (_cache[1] = ($event) => loaded.value = false)
-          }, null, 40, _hoisted_1$b)) : !__props.src && unresolved.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$4, [
+          }, null, 8, ["src", "resize", "crop"])) : !__props.src && unresolved.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
             vue.createVNode(vue.unref(IconHelpOutlined))
           ])) : vue.createCommentVNode("", true),
           __props.status && !(__props.vip || __props.bad) ? (vue.openBlock(), vue.createElementBlock("span", {
@@ -177,16 +238,16 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
               [`ui-v1-avatar__status_${__props.status}`]: __props.status
             })
           }, null, 2)) : vue.createCommentVNode("", true),
-          !(unresolved.value || loaded.value) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$3, [
+          !(unresolved.value || loaded.value) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$4, [
             vue.renderSlot(_ctx.$slots, "default", {}, () => [
               vue.createTextVNode(vue.toDisplayString(initials.value), 1)
             ])
           ])) : vue.createCommentVNode("", true),
-          __props.vip || __props.bad ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$1, [
-            __props.vip ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$1, [
+          __props.vip || __props.bad ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$3, [
+            __props.vip ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$1, [
               vue.createVNode(vue.unref(SpriteVIP), { class: "ui-v1-avatar__vip" })
             ])) : vue.createCommentVNode("", true),
-            __props.bad ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_6, [
+            __props.bad ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$1, [
               vue.createVNode(vue.unref(SpriteBAD), { class: "ui-v1-avatar__bad" })
             ])) : vue.createCommentVNode("", true)
           ])) : vue.createCommentVNode("", true)
@@ -3701,12 +3762,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   }
 });
 exports.I18nPlugin = plugin;
+exports.ImageWorkersKey = ImageWorkersKey;
 exports.ModalPlugin = plugin$1;
 exports.UiAvatar = _sfc_main$h;
 exports.UiAvatarList = _sfc_main$g;
 exports.UiButton = _sfc_main$f;
 exports.UiCheckbox = _sfc_main$e;
 exports.UiError = _sfc_main$d;
+exports.UiImage = _sfc_main$i;
 exports.UiLink = _sfc_main$c;
 exports.UiLoader = _sfc_main$a;
 exports.UiModalSidebar = _sfc_main$8;

package/dist/host.d.ts

@@ -8,10 +8,12 @@ import { EmitsOptions } from 'vue';
 import { EmitsToProps } from 'vue';
 import { ExtractDefaultPropTypes } from 'vue';
 import { ExtractPropTypes } from 'vue';
+import { InjectionKey } from 'vue';
 import { MethodOptions } from 'vue';
 import { Plugin as Plugin_2 } from 'vue';
 import { PropType } from 'vue';
 import { PublicProps } from 'vue';
+import { Ref } from 'vue';
 import { SlotsType } from 'vue';
 
 declare const __VLS_component: DefineComponent_2<ExtractPropTypes<    {
@@ -238,6 +240,8 @@ declare enum APPEARANCE_3 {
 
 declare type DefineComponent<PropsOrPropOptions = object, M extends MethodOptions = MethodOptions, E extends EmitsOptions = EmitsOptions, EE extends string = string, PP = PublicProps, Props = ResolveProps<PropsOrPropOptions, E>, Defaults = ExtractDefaultPropTypes<PropsOrPropOptions>, S extends SlotsType = SlotsType, LC extends Record<string, Component> = Record<string, Component>, Directives extends Record<string, Directive> = Record<string, Directive>, Exposed extends string = string, Provide extends ComponentProvideOptions = ComponentProvideOptions, MakeDefaultsOptional extends boolean = true, TypeRefs extends Record<string, unknown> = Record<string, unknown>, TypeEl extends Element = Element> = DefineComponent_2<PropsOrPropOptions, Record<string, never>, Record<string, never>, Record<string, never>, M, ComponentOptionsMixin, ComponentOptionsMixin, E, EE, PP, Props, Defaults, S, LC, Directives, Exposed, Provide, MakeDefaultsOptional, TypeRefs, TypeEl>;
 
+declare type Dimensions = `${number}x${number}` | `${number}x-`;
+
 declare enum DIRECTION {
     LEFT = "left",
     RIGHT = "right"
@@ -245,6 +249,8 @@ declare enum DIRECTION {
 
 export declare const I18nPlugin: Plugin_2;
 
+export declare const ImageWorkersKey: InjectionKey<Ref<string[]>>;
+
 export declare const ModalPlugin: Plugin_2;
 
 declare type Numeric = number | string;
@@ -336,6 +342,10 @@ declare type UiAvatarProperties = {
     vip?: boolean;
     bad?: boolean;
     size?: SIZE;
+    optimize?: boolean | {
+        resize?: Dimensions;
+        crop?: Dimensions;
+    };
 };
 
 export declare const UiButton: DefineComponent<
@@ -388,6 +398,19 @@ declare type UiErrorProperties = {
     ellipsis?: boolean;
 };
 
+export declare const UiImage: DefineComponent<
+UiImageProperties
+>;
+
+declare type UiImageProperties = {
+    /** Alternative text for HTMLImageElement */
+    alt?: string;
+    /** Source for HTMLImageElement */
+    src?: string;
+    resize?: Dimensions | undefined;
+    crop?: Dimensions | undefined;
+};
+
 export declare const UiLink: DefineComponent<UiLinkProperties>;
 
 declare type UiLinkProperties = {

package/dist/host.js

@@ -1,13 +1,14 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { openBlock, createElementBlock, createElementVNode, defineComponent, useSlots, ref, computed, inject, createBlock, resolveDynamicComponent, mergeProps, unref, withCtx, createVNode, createCommentVNode, normalizeClass, renderSlot, createTextVNode, toDisplayString, provide, Fragment, renderList, Text, Comment, h, Transition, normalizeProps, guardReactiveProps, normalizeStyle, reactive, watch, onMounted, onActivated, onDeactivated, onBeforeUnmount, useAttrs, Teleport, withDirectives, vShow, toHandlers, withModifiers, createSlots } from "vue";
-const _hoisted_1$e = {
+import { openBlock, createElementBlock, createElementVNode, defineComponent, inject, ref, computed, mergeProps, useSlots, createBlock, resolveDynamicComponent, unref, withCtx, createVNode, createCommentVNode, normalizeClass, renderSlot, createTextVNode, toDisplayString, provide, Fragment, renderList, Text, Comment, h, Transition, normalizeProps, guardReactiveProps, normalizeStyle, reactive, watch, onMounted, onActivated, onDeactivated, onBeforeUnmount, useAttrs, Teleport, withDirectives, vShow, toHandlers, withModifiers, createSlots } from "vue";
+import { preview } from "@retailcrm/image-preview";
+const _hoisted_1$f = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24"
 };
 function render$7(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$e, _cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("svg", _hoisted_1$f, _cache[0] || (_cache[0] = [
     createElementVNode("path", {
       fill: "currentColor",
       "fill-rule": "evenodd",
@@ -17,30 +18,72 @@ function render$7(_ctx, _cache) {
   ]));
 }
 const IconHelpOutlined = { render: render$7 };
-const _hoisted_1$d = {
+const _hoisted_1$e = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 18 8"
 };
 function render$6(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$d, _cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("svg", _hoisted_1$e, _cache[0] || (_cache[0] = [
     createElementVNode("g", { fill: "currentColor" }, [
       createElementVNode("path", { d: "M0 0v8h2.867q1.257-.011 1.935-.604.68-.594.68-1.748 0-.675-.33-1.143a1.54 1.54 0 0 0-.892-.62q.497-.21.775-.654.279-.45.279-1.039 0-1.077-.694-1.632Q3.926 0 2.584 0zm1.52 6.676v-2.16h1.393q1.048.016 1.048 1.116 0 .488-.303.77-.3.273-.836.274zm1.124-3.324H1.52V1.335h1.064q.628 0 .916.242.294.236.294.78 0 .972-1.15.995M7.503 6.352h2.665L10.679 8h1.616l-2.76-8H8.125L5.38 8h1.616zm2.254-1.336H7.913l.917-2.994zM12.362 8V0h2.27q.972 0 1.737.478.77.473 1.2 1.352.432.873.431 1.989v.368q0 1.115-.425 1.983a3.17 3.17 0 0 1-1.191 1.346A3.26 3.26 0 0 1 14.646 8zm1.52-6.665v5.34h.734q.891 0 1.363-.631.47-.632.481-1.808v-.423q0-1.22-.466-1.846-.466-.632-1.363-.632z" })
     ], -1)
   ]));
 }
 const SpriteBAD = { render: render$6 };
-const _hoisted_1$c = {
+const _hoisted_1$d = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 16 8"
 };
 function render$5(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$c, _cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("svg", _hoisted_1$d, _cache[0] || (_cache[0] = [
     createElementVNode("g", { fill: "currentColor" }, [
       createElementVNode("path", { d: "M3.373 6.016 5.058 0h1.704L4.175 8H2.577L0 0h1.7zM8.99 8H7.46V0H8.99zM11.84 8V5.181h1.343q1.322 0 2.067-.676.75-.681.75-1.857 0-.774-.342-1.379a2.3 2.3 0 0 0-.98-.94Q14.045 0 13.208 0H10.31v8zm1.368-4.154h-1.367v-2.51h1.403q.567.01.888.373t.322.95q0 .571-.322.88-.316.307-.924.307" })
     ], -1)
   ]));
 }
 const SpriteVIP = { render: render$5 };
+const ImageWorkersKey = Symbol("$image.workers");
+const _hoisted_1$c = ["alt", "src"];
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
+  __name: "UiImage",
+  props: {
+    alt: {
+      type: String,
+      default: ""
+    },
+    src: {
+      type: String,
+      default: ""
+    },
+    resize: {
+      type: null,
+      default: void 0
+    },
+    crop: {
+      type: null,
+      default: void 0
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const workers = inject(ImageWorkersKey, ref([]));
+    const url = computed(() => {
+      if (!props.src) {
+        return void 0;
+      }
+      if (props.resize || props.crop) {
+        return workers.value.length ? preview(workers.value, props.src, props.resize, props.crop) : void 0;
+      }
+      return props.src;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("img", mergeProps({
+        alt: __props.alt,
+        src: url.value
+      }, _ctx.$attrs), null, 16, _hoisted_1$c);
+    };
+  }
+});
 const isURL = (href) => {
   try {
     const normalizedHref = href.includes("://") ? href : `http://${href}`;
@@ -66,24 +109,23 @@ var STATUS = /* @__PURE__ */ ((STATUS2) => {
   STATUS2["FREE"] = "free";
   return STATUS2;
 })(STATUS || {});
-const _hoisted_1$b = ["src"];
-const _hoisted_2$4 = {
+const _hoisted_1$b = {
   key: 1,
   class: "ui-v1-avatar__unresolved"
 };
-const _hoisted_3$3 = {
+const _hoisted_2$4 = {
   key: 3,
   class: "ui-v1-avatar__initials"
 };
-const _hoisted_4$1 = {
+const _hoisted_3$3 = {
   key: 4,
   class: "ui-v1-avatar__labels"
 };
-const _hoisted_5$1 = {
+const _hoisted_4$1 = {
   key: 0,
   class: "ui-v1-avatar__label ui-v1-avatar__label_vip"
 };
-const _hoisted_6 = {
+const _hoisted_5$1 = {
   key: 1,
   class: "ui-v1-avatar__label ui-v1-avatar__label_bad"
 };
@@ -128,6 +170,10 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       type: String,
       validator: (size) => Object.values(SIZE$5).includes(size),
       default: SIZE$5.SM
+    },
+    optimize: {
+      type: [Boolean, Object],
+      default: true
     }
   },
   setup(__props) {
@@ -144,6 +190,20 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       return otherNames.length > 0 ? firstLetterOf(firstName) + firstLetterOf(otherNames[otherNames.length - 1]) : firstLetterOf(firstName);
     });
     const size = inject(AvatarSizeKey, computed(() => props.size));
+    const optimization = computed(() => {
+      if (!props.optimize) {
+        return { resize: void 0, crop: void 0 };
+      }
+      const processing = typeof props.optimize === "object" ? props.optimize : {};
+      return {
+        resize: processing.resize ?? {
+          [SIZE$5.XS]: "48x-",
+          [SIZE$5.SM]: "72x-",
+          [SIZE$5.LG]: "104x-"
+        }[size.value],
+        crop: processing.crop
+      };
+    });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(resolveDynamicComponent(__props.href ? "a" : "div"), mergeProps({
         ref: "root",
@@ -156,15 +216,16 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         }
       }, _ctx.$attrs), {
         default: withCtx(() => [
-          __props.src ? (openBlock(), createElementBlock("img", {
+          __props.src ? (openBlock(), createBlock(_sfc_main$i, {
             key: 0,
             src: __props.src,
-            alt: "",
+            resize: optimization.value.resize,
+            crop: optimization.value.crop,
             class: "ui-v1-avatar__image",
             draggable: "false",
             onLoad: _cache[0] || (_cache[0] = ($event) => loaded.value = true),
             onError: _cache[1] || (_cache[1] = ($event) => loaded.value = false)
-          }, null, 40, _hoisted_1$b)) : !__props.src && unresolved.value ? (openBlock(), createElementBlock("div", _hoisted_2$4, [
+          }, null, 8, ["src", "resize", "crop"])) : !__props.src && unresolved.value ? (openBlock(), createElementBlock("div", _hoisted_1$b, [
             createVNode(unref(IconHelpOutlined))
           ])) : createCommentVNode("", true),
           __props.status && !(__props.vip || __props.bad) ? (openBlock(), createElementBlock("span", {
@@ -175,16 +236,16 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
               [`ui-v1-avatar__status_${__props.status}`]: __props.status
             })
           }, null, 2)) : createCommentVNode("", true),
-          !(unresolved.value || loaded.value) ? (openBlock(), createElementBlock("div", _hoisted_3$3, [
+          !(unresolved.value || loaded.value) ? (openBlock(), createElementBlock("div", _hoisted_2$4, [
             renderSlot(_ctx.$slots, "default", {}, () => [
               createTextVNode(toDisplayString(initials.value), 1)
             ])
           ])) : createCommentVNode("", true),
-          __props.vip || __props.bad ? (openBlock(), createElementBlock("div", _hoisted_4$1, [
-            __props.vip ? (openBlock(), createElementBlock("span", _hoisted_5$1, [
+          __props.vip || __props.bad ? (openBlock(), createElementBlock("div", _hoisted_3$3, [
+            __props.vip ? (openBlock(), createElementBlock("span", _hoisted_4$1, [
               createVNode(unref(SpriteVIP), { class: "ui-v1-avatar__vip" })
             ])) : createCommentVNode("", true),
-            __props.bad ? (openBlock(), createElementBlock("span", _hoisted_6, [
+            __props.bad ? (openBlock(), createElementBlock("span", _hoisted_5$1, [
               createVNode(unref(SpriteBAD), { class: "ui-v1-avatar__bad" })
             ])) : createCommentVNode("", true)
           ])) : createCommentVNode("", true)
@@ -3700,12 +3761,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 });
 export {
   plugin as I18nPlugin,
+  ImageWorkersKey,
   plugin$1 as ModalPlugin,
   _sfc_main$h as UiAvatar,
   _sfc_main$g as UiAvatarList,
   _sfc_main$f as UiButton,
   _sfc_main$e as UiCheckbox,
   _sfc_main$d as UiError,
+  _sfc_main$i as UiImage,
   _sfc_main$c as UiLink,
   _sfc_main$a as UiLoader,
   _sfc_main$8 as UiModalSidebar,

package/dist/remote.cjs

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const vue = require("vue");
 require("@remote-ui/rpc");
+const imagePreview = require("@retailcrm/image-preview");
 const REMOTE_SLOT = "RemoteSlot";
 const toRemoteSlots = (named, slots) => {
   const actual = named.filter((slotName) => slotName in slots);
@@ -172,6 +173,15 @@ const UiYandexMap = defineRemoteComponent(
     "update:address"
   ]
 );
+const ImageWorkersKey = Symbol("$image.workers");
+const usePreview = (workers = vue.ref([])) => {
+  const _workers = vue.inject(ImageWorkersKey, workers);
+  return {
+    workers: _workers,
+    preview: (url, resize = void 0, crop = void 0) => imagePreview.preview(_workers.value, url, resize, crop)
+  };
+};
+exports.ImageWorkersKey = ImageWorkersKey;
 exports.UiAvatar = UiAvatar;
 exports.UiAvatarList = UiAvatarList;
 exports.UiAvatarListType = UiAvatarListType;
@@ -206,3 +216,4 @@ exports.UiTransition = UiTransition;
 exports.UiTransitionType = UiTransitionType;
 exports.UiYandexMap = UiYandexMap;
 exports.UiYandexMapType = UiYandexMapType;
+exports.usePreview = usePreview;

package/dist/remote.d.ts

@@ -1,6 +1,8 @@
 import { Component } from 'vue';
 import { HTMLAttributes } from 'vue';
+import { InjectionKey } from 'vue';
 import { MethodOptions } from 'vue';
+import { Ref } from 'vue';
 import { RemoteCallable } from '@remote-ui/rpc';
 import { SchemaType } from '@omnicajs/vue-remote/remote';
 import { SchemaType as SchemaType_2 } from '@omnicajs/vue-remote/dist/remote';
@@ -40,11 +42,15 @@ declare enum CLOSE_METHOD {
     KEY_ESC = "Esc"
 }
 
+declare type Dimensions = `${number}x${number}` | `${number}x-`;
+
 declare enum DIRECTION {
     LEFT = "left",
     RIGHT = "right"
 }
 
+export declare const ImageWorkersKey: InjectionKey<Ref<string[]>>;
+
 declare type Numeric = number | string;
 
 declare type Primitive = boolean | number | string | null | undefined;
@@ -147,6 +153,10 @@ declare type UiAvatarProperties = {
     vip?: boolean;
     bad?: boolean;
     size?: SIZE;
+    optimize?: boolean | {
+        resize?: Dimensions;
+        crop?: Dimensions;
+    };
 };
 
 export declare const UiAvatarType: SchemaType<"UiAvatar", RemoteProperties<UiAvatarProperties>>;
@@ -525,6 +535,11 @@ declare type UiYandexMapProperties = {
 
 export declare const UiYandexMapType: SchemaType<"UiYandexMap", RemoteProperties<UiYandexMapProperties>, Record<string, never>>;
 
+export declare const usePreview: (workers?: Ref<string[]>) => {
+    workers: Ref<string[], string[]>;
+    preview: (url: string, resize?: Dimensions | undefined, crop?: Dimensions | undefined) => string;
+};
+
 declare enum VARIANT {
     DEFAULT = "default",
     SUCCESS = "success",

package/dist/remote.js

@@ -1,5 +1,6 @@
-import { defineComponent, h } from "vue";
+import { defineComponent, h, inject, ref } from "vue";
 import "@remote-ui/rpc";
+import { preview } from "@retailcrm/image-preview";
 const REMOTE_SLOT = "RemoteSlot";
 const toRemoteSlots = (named, slots) => {
   const actual = named.filter((slotName) => slotName in slots);
@@ -170,7 +171,16 @@ const UiYandexMap = defineRemoteComponent(
     "update:address"
   ]
 );
+const ImageWorkersKey = Symbol("$image.workers");
+const usePreview = (workers = ref([])) => {
+  const _workers = inject(ImageWorkersKey, workers);
+  return {
+    workers: _workers,
+    preview: (url, resize = void 0, crop = void 0) => preview(_workers.value, url, resize, crop)
+  };
+};
 export {
+  ImageWorkersKey,
   UiAvatar,
   UiAvatarList,
   UiAvatarListType,
@@ -204,5 +214,6 @@ export {
   UiTransition,
   UiTransitionType,
   UiYandexMap,
-  UiYandexMapType
+  UiYandexMapType,
+  usePreview
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@retailcrm/embed-ui-v1-components",
   "type": "module",
-  "version": "0.5.8",
+  "version": "0.5.10",
   "license": "MIT",
   "author": "RetailDriverLLC <integration@retailcrm.ru>",
   "repository": "git@github.com:retailcrm/embed-ui.git",
@@ -56,6 +56,7 @@
   "dependencies": {
     "@omnicajs/vue-remote": "^0.2.5",
     "@remote-ui/rpc": "^1.4.5",
+    "@retailcrm/image-preview": "^1.0.2",
     "remark-gfm": "^4.0.0"
   },
   "devDependencies": {