@profitliga/ui 1.2.90 → 2.0.0

package/dist/components/v2/DropdownMenu/DropdownMenu.vue2.js

@@ -0,0 +1,189 @@
+import { defineComponent as F, useModel as q, useTemplateRef as N, ref as U, useId as V, computed as H, watch as j, openBlock as l, createBlock as O, unref as f, withCtx as M, createElementVNode as B, mergeProps as b, createElementBlock as d, Fragment as I, renderList as P, toDisplayString as S, createCommentVNode as $, resolveDynamicComponent as G, renderSlot as J, normalizeProps as L, guardReactiveProps as Q, mergeModels as C, nextTick as W } from "vue";
+import X from "../Popover/Popover.vue.js";
+import { useTestId as Y } from "../shared/useTestId.util.js";
+const Z = ["aria-label"], ee = ["role", "aria-labelledby"], te = ["id"], ne = ["disabled", "tabindex", "data-menu-index", "onClick", "onMouseenter"], oe = { class: "dropdown-menu__item-label" }, se = /* @__PURE__ */ F({
+  __name: "DropdownMenu",
+  props: /* @__PURE__ */ C({
+    items: {},
+    width: { default: 200 },
+    side: { default: "bottom" },
+    sideOffset: { default: 8 },
+    align: { default: "start" },
+    alignOffset: { default: 0 },
+    arrow: { type: Boolean, default: !1 },
+    zIndex: { default: "auto" },
+    breakpointMobile: { default: "sm" },
+    disableOutsidePointerEvents: { type: Boolean, default: !1 },
+    label: { default: void 0 },
+    testId: { default: void 0 }
+  }, {
+    open: { type: Boolean, default: !1 },
+    openModifiers: {}
+  }),
+  emits: /* @__PURE__ */ C(["select", "escapeKeyDown", "pointerDownOutside"], ["update:open"]),
+  setup(o, { emit: z }) {
+    const s = o, v = z, m = q(o, "open"), y = N("menuRef"), r = U(-1), w = `dropdown-menu-${V()}`, c = Y(() => s.testId);
+    function h(e) {
+      return e.type === void 0 || e.type === "item";
+    }
+    const K = H(() => {
+      const e = [];
+      let n = null;
+      return s.items.forEach((t, a) => {
+        if (t.type === "separator") {
+          e.push({ type: "separator", index: a }), n = null;
+          return;
+        }
+        if (t.type === "label") {
+          n = {
+            type: "items",
+            label: t.label,
+            labelId: `${w}-label-${a}`,
+            index: a,
+            items: []
+          }, e.push(n);
+          return;
+        }
+        n || (n = { type: "items", index: a, items: [] }, e.push(n)), n.items.push({ entry: t, index: a });
+      }), e;
+    });
+    function g(e) {
+      const n = s.items[e];
+      return !!n && h(n) && !n.disabled;
+    }
+    function k() {
+      return s.items.findIndex((e, n) => g(n));
+    }
+    function R() {
+      for (let e = s.items.length - 1; e >= 0; e -= 1)
+        if (g(e)) return e;
+      return -1;
+    }
+    function D(e, n) {
+      const t = s.items.length;
+      if (t === 0) return -1;
+      let a = e;
+      for (let i = 0; i < t; i += 1)
+        if (a = (a + n + t) % t, g(a)) return a;
+      return -1;
+    }
+    function u(e, n = 10) {
+      r.value = e, e !== -1 && W(() => {
+        const t = y.value?.querySelector(
+          `[data-menu-index="${e}"]`
+        );
+        t && (t.focus(), document.activeElement !== t && n > 0 && requestAnimationFrame(() => u(e, n - 1)));
+      });
+    }
+    function _(e, n) {
+      n || (r.value = e);
+    }
+    function T(e) {
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault(), u(D(r.value, 1));
+          break;
+        case "ArrowUp":
+          e.preventDefault(), u(D(r.value, -1));
+          break;
+        case "Home":
+          e.preventDefault(), u(k());
+          break;
+        case "End":
+          e.preventDefault(), u(R());
+          break;
+        case "Enter":
+        case " ": {
+          if (r.value === -1) break;
+          const n = s.items[r.value];
+          h(n) && (e.preventDefault(), x(n));
+          break;
+        }
+      }
+    }
+    function x(e) {
+      e.disabled || (v("select", e), m.value = !1);
+    }
+    let E = null;
+    return j(m, (e) => {
+      e ? (E = document.activeElement, u(k())) : (r.value = -1, E?.focus());
+    }), (e, n) => (l(), O(f(X), {
+      open: m.value,
+      "onUpdate:open": n[0] || (n[0] = (t) => m.value = t),
+      width: o.width,
+      side: o.side,
+      "side-offset": o.sideOffset,
+      align: o.align,
+      "align-offset": o.alignOffset,
+      arrow: o.arrow,
+      "z-index": o.zIndex,
+      "breakpoint-mobile": o.breakpointMobile,
+      "disable-outside-pointer-events": o.disableOutsidePointerEvents,
+      "trigger-has-popup": "menu",
+      "trigger-controls": w,
+      "test-id": o.testId,
+      onEscapeKeyDown: n[1] || (n[1] = (t) => v("escapeKeyDown", t)),
+      onPointerDownOutside: n[2] || (n[2] = (t) => v("pointerDownOutside", t))
+    }, {
+      trigger: M((t) => [
+        J(e.$slots, "trigger", L(Q(t)), void 0, !0)
+      ]),
+      default: M(() => [
+        B("div", b({
+          id: w,
+          ref_key: "menuRef",
+          ref: y,
+          role: "menu",
+          "aria-label": o.label,
+          "aria-orientation": "vertical",
+          class: "dropdown-menu"
+        }, f(c)("content"), { onKeydown: T }), [
+          (l(!0), d(I, null, P(K.value, (t, a) => (l(), d(I, { key: a }, [
+            t.type === "separator" ? (l(), d("div", b({
+              key: 0,
+              role: "separator",
+              class: "dropdown-menu__separator"
+            }, { ref_for: !0 }, f(c)("separator", t.index)), null, 16)) : (l(), d("div", {
+              key: 1,
+              class: "dropdown-menu__group",
+              role: t.labelId ? "group" : "none",
+              "aria-labelledby": t.labelId
+            }, [
+              t.labelId ? (l(), d("div", b({
+                key: 0,
+                id: t.labelId,
+                role: "presentation",
+                class: "dropdown-menu__label"
+              }, { ref_for: !0 }, f(c)("label", t.index)), S(t.label), 17, te)) : $("", !0),
+              (l(!0), d(I, null, P(t.items, ({ entry: i, index: p }) => (l(), d("button", b({
+                key: p,
+                type: "button",
+                role: "menuitem",
+                class: ["dropdown-menu__item", {
+                  "dropdown-menu__item--disabled": i.disabled
+                }],
+                disabled: i.disabled,
+                tabindex: r.value === p ? 0 : -1,
+                "data-menu-index": p
+              }, { ref_for: !0 }, f(c)("item", i.testId ?? i.value), {
+                onClick: (A) => x(i),
+                onMouseenter: (A) => _(p, i.disabled)
+              }), [
+                i.icon ? (l(), O(G(i.icon), {
+                  key: 0,
+                  class: "dropdown-menu__item-icon",
+                  "aria-hidden": "true"
+                })) : $("", !0),
+                B("span", oe, S(i.label), 1)
+              ], 16, ne))), 128))
+            ], 8, ee))
+          ], 64))), 128))
+        ], 16, Z)
+      ]),
+      _: 3
+    }, 8, ["open", "width", "side", "side-offset", "align", "align-offset", "arrow", "z-index", "breakpoint-mobile", "disable-outside-pointer-events", "test-id"]));
+  }
+});
+export {
+  se as default
+};

package/dist/components/v2/DropdownMenu/index.d.ts

@@ -0,0 +1,3 @@
+import { default as DropdownMenu } from './DropdownMenu.vue';
+export type { DropdownMenuEmits, DropdownMenuEntry, DropdownMenuItemData, DropdownMenuLabelData, DropdownMenuProps, DropdownMenuSeparatorData } from './DropdownMenu.types';
+export { DropdownMenu };

package/dist/components/v2/File/File.css

@@ -0,0 +1 @@
+.file[data-v-5088fe34]{--file-size:4.25rem;--file-border:var(--theme-neutral-border-divider);--file-icon-size:2.375rem;--file-font-size:.625rem;--file-line-height:.625rem;--file-meta-gap:.125rem;--file-eye-size:1.5rem;--file-padding-x:.25rem;--file-remove-size:.9375rem;--file-remove-icon-size:.5625rem;box-sizing:border-box;width:var(--file-size);height:var(--file-size);padding:.5rem var(--file-padding-x);background-color:var(--theme-neutral-0);border:.0625rem solid var(--file-border);transition:border-color var(--animation-duration-fast) ease;border-radius:.5rem;flex-direction:column;flex-shrink:0;justify-content:space-between;align-items:flex-start;display:flex;position:relative}.file--mini[data-v-5088fe34]{--file-size:2.25rem;--file-icon-size:1.25rem;--file-eye-size:1rem;--file-padding-x:.25rem;--file-remove-size:.75rem;--file-remove-icon-size:.45rem;border-color:#0000;justify-content:center;align-items:center;padding:.25rem}.file--large[data-v-5088fe34]{--file-size:6.25rem;--file-icon-size:4rem;--file-eye-size:2rem;--file-font-size:.75rem;--file-line-height:1rem;--file-meta-gap:.25rem;--file-padding-x:.5rem;--file-remove-size:1.5rem;--file-remove-icon-size:.9rem}.file--no-meta[data-v-5088fe34]{justify-content:center;align-items:center}.file--error[data-v-5088fe34]{--file-border:var(--theme-error-300)}.file--disabled[data-v-5088fe34]{opacity:.6}.file__open[data-v-5088fe34]{z-index:1;cursor:pointer;background:0 0;border:none;border-radius:.5rem;width:100%;height:100%;margin:0;padding:0;position:absolute;inset:0}.file__open[data-v-5088fe34]:focus-visible{outline:2px solid var(--theme-primary-500);outline-offset:.125rem}.file__open[data-v-5088fe34]:disabled{cursor:not-allowed}.file__image[data-v-5088fe34]{object-fit:cover;pointer-events:none;border-radius:.5rem;width:100%;height:100%;position:absolute;inset:0}.file__icon[data-v-5088fe34]{width:var(--file-icon-size);height:var(--file-icon-size);flex-shrink:0}.file__meta[data-v-5088fe34]{align-items:center;gap:var(--file-meta-gap);max-width:100%;font-weight:400;font-size:var(--file-font-size);line-height:var(--file-line-height);color:var(--theme-neutral-text-title);white-space:nowrap;transition:opacity var(--animation-duration-fast) ease;display:flex;overflow:hidden}.file__type[data-v-5088fe34],.file__size[data-v-5088fe34]{text-overflow:ellipsis;overflow:hidden}.file__type[data-v-5088fe34]{flex-shrink:0}.file__dot[data-v-5088fe34]{background-color:currentColor;border-radius:50%;flex-shrink:0;width:.125rem;height:.125rem}.file--image .file__meta[data-v-5088fe34]{z-index:1;pointer-events:none;box-sizing:border-box;width:100%;padding:.125rem var(--file-meta-padding-x);color:var(--theme-neutral-text-negative);background-color:#0a0a0a99;border-radius:.25rem;margin-top:auto}.file--image[data-v-5088fe34]{--file-padding-x:.125rem;--file-meta-padding-x:.1875rem;padding:.125rem var(--file-padding-x)}.file--image .file__meta[data-v-5088fe34]{font-size:.5625rem}.file--image.file--large[data-v-5088fe34]{--file-padding-x:.25rem;--file-meta-padding-x:.25rem;padding:.25rem var(--file-padding-x)}.file--image.file--large .file__meta[data-v-5088fe34]{font-size:var(--file-font-size)}.file__remove[data-v-5088fe34]{z-index:2;width:var(--file-remove-size);height:var(--file-remove-size);color:var(--theme-neutral-text-subtitle);background-color:var(--theme-color-m);cursor:pointer;transition:background-color var(--animation-duration-fast) ease;border:none;border-radius:50%;justify-content:center;align-items:center;padding:0;display:flex;position:absolute;top:-.3rem;right:-.175rem}.file__remove[data-v-5088fe34]:focus-visible{outline:2px solid var(--theme-primary-500);outline-offset:.125rem}.file__remove svg[data-v-5088fe34]{width:var(--file-remove-icon-size);height:var(--file-remove-icon-size)}.file__remove[data-v-5088fe34]:hover:not(:disabled){background-color:var(--theme-secondary-250)}.file__remove[data-v-5088fe34]:disabled{cursor:not-allowed}.file__eye[data-v-5088fe34]{z-index:1;color:var(--theme-neutral-icon-negative);pointer-events:none;background-color:#16161633;border-radius:.5rem;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.file__eye svg[data-v-5088fe34]{width:var(--file-eye-size);height:var(--file-eye-size)}.file:not(.file--mini) .file__eye[data-v-5088fe34]{opacity:0;transition:opacity var(--animation-duration-fast) ease;background-color:#0000008c}.file:not(.file--mini):not(.file--disabled):hover .file__eye[data-v-5088fe34]{opacity:1}.file:not(.file--mini):not(.file--disabled):has(.file__open:focus-visible) .file__eye[data-v-5088fe34]{opacity:1}.file:not(.file--mini):not(.file--disabled):hover .file__meta[data-v-5088fe34]{opacity:0}.file:not(.file--mini):not(.file--disabled):has(.file__open:focus-visible) .file__meta[data-v-5088fe34]{opacity:0}.file--mini.file--image[data-v-5088fe34]{--file-padding-x:0;padding:0}.file__error[data-v-5088fe34]{z-index:2;color:var(--theme-error-500);display:flex;position:absolute;top:.25rem;left:.25rem}.file__error svg[data-v-5088fe34]{width:.875rem;height:.875rem}.file__progress[data-v-5088fe34]{z-index:2;background-color:var(--theme-neutral-250);border-radius:999px;height:.1875rem;display:block;position:absolute;bottom:.25rem;left:.25rem;right:.25rem;overflow:hidden}.file__progress-bar[data-v-5088fe34]{background-color:var(--theme-primary-500);height:100%;transition:width var(--animation-duration) ease;display:block}.file--uploading .file__image[data-v-5088fe34],.file--uploading .file__icon[data-v-5088fe34]{opacity:.5}.file--uploading .file__meta[data-v-5088fe34]{visibility:hidden}

package/dist/components/v2/File/File.types.d.ts

@@ -0,0 +1,93 @@
+import { TBreakpoints } from '../../../types/global.types';
+/**
+ * Состояние файла:
+ * - `ready` — файл выбран и готов (по умолчанию);
+ * - `uploading` — идёт отправка на сервер, показывается полоса прогресса;
+ * - `error` — отправка не удалась, карточка подсвечивается красным.
+ *
+ * Статусами управляет потребитель: карточка их только показывает.
+ */
+export type FileStatus = 'ready' | 'uploading' | 'error';
+/** Файл в списке — общая модель для карточки, поля загрузки и просмотра. */
+export interface FileItem {
+    id: string;
+    name: string;
+    /** Размер в байтах. `null` — если он неизвестен (файл пришёл с сервера). */
+    size: number | null;
+    /** MIME-тип. По нему выбирается иконка и решается, показывать ли превью. */
+    mime: string | null;
+    /** Ссылка на файл: `blob:`-адрес выбранного файла или удалённый URL. */
+    url?: string;
+    /** Сам `File`, если файл выбрали в поле загрузки. У серверных файлов его нет. */
+    raw?: globalThis.File;
+    status?: FileStatus;
+    /** Прогресс отправки, 0–100. Учитывается только при `status: 'uploading'`. */
+    progress?: number;
+    /** Текст ошибки для `status: 'error'` — показывается подсказкой на карточке. */
+    errorMessage?: string;
+}
+/**
+ * Размер карточки из макета: `mini` — 36×36 (строка загрузки), `small` — 68×68,
+ * `large` — 100×100. В `mini` подписи нет: тип и размер туда не помещаются.
+ */
+export type FileSize = 'mini' | 'small' | 'large';
+export interface FileProps {
+    file: FileItem;
+    size?: FileSize;
+    /** Показывать крестик удаления */
+    removable?: boolean;
+    /**
+     * Показывать подпись с типом и размером файла. Выключается, когда карточка
+     * стоит рядом с собственным описанием файла и дублировать его не нужно.
+     * В размере `mini` подписи нет в любом случае — она туда не помещается
+     */
+    showMeta?: boolean;
+    /**
+     * Разрешить открытие карточки в просмотре. Кнопка появляется только у
+     * картинки с `url`: документ в просмотре показать нечем
+     */
+    openable?: boolean;
+    /**
+     * Открывать встроенное окно просмотра по клику на картинку. При `false`
+     * карточка только сообщает о клике событием `open`, а окно показывает
+     * потребитель — как это делает `FileUpload`. Событие приходит в обоих
+     * случаях
+     */
+    preview?: boolean;
+    /**
+     * Текст кнопки удаления в окне просмотра. Сама кнопка есть, только пока
+     * карточку разрешено удалять (`removable`)
+     */
+    previewDeleteText?: string;
+    /** Точка перелома, ниже которой окно просмотра открывается шторкой снизу */
+    breakpointMobile?: TBreakpoints;
+    disabled?: boolean;
+    /** Базовый `data-testid`; внутренние части получают суффикс имени части */
+    testId?: string;
+}
+/**
+ * Окно просмотра файла. Живёт рядом с карточкой: она открывает его сама при
+ * `preview`, а `FileUpload` — по клику в своём списке.
+ */
+export interface FilePreviewDialogProps {
+    /** Файл для просмотра. `null` — окно не показывает содержимое */
+    file?: FileItem | null;
+    /** Показывать кнопку удаления под картинкой */
+    deletable?: boolean;
+    /** Текст кнопки удаления. По умолчанию «Удалить файл» */
+    deleteText?: string;
+    /** Ширина окна в пикселях */
+    width?: number;
+    breakpointMobile?: TBreakpoints;
+    testId?: string;
+}
+export interface FilePreviewDialogEmits {
+    /** Нажата кнопка удаления */
+    delete: [file: FileItem];
+}
+export interface FileEmits {
+    /** Нажат крестик удаления */
+    remove: [];
+    /** Клик по карточке-картинке — потребитель открывает просмотр */
+    open: [];
+}

package/dist/components/v2/File/File.vue.d.ts

@@ -0,0 +1,21 @@
+import { FileProps, FileSize } from './File.types';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { TBreakpoints } from '../../../types/global.types';
+declare const _default: DefineComponent<FileProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    open: () => any;
+    remove: () => any;
+}, string, PublicProps, Readonly<FileProps> & Readonly<{
+    onOpen?: (() => any) | undefined;
+    onRemove?: (() => any) | undefined;
+}>, {
+    size: FileSize;
+    disabled: boolean;
+    breakpointMobile: TBreakpoints;
+    removable: boolean;
+    testId: string;
+    showMeta: boolean;
+    openable: boolean;
+    preview: boolean;
+    previewDeleteText: string;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/v2/File/File.vue.js

@@ -0,0 +1,8 @@
+import './File.css';
+import o from "./File.vue2.js";
+/* empty css          */
+import r from "../../../_virtual/_plugin-vue_export-helper.js";
+const f = /* @__PURE__ */ r(o, [["__scopeId", "data-v-5088fe34"]]);
+export {
+  f as default
+};

package/dist/components/v2/File/File.vue2.js

@@ -0,0 +1,164 @@
+import { defineComponent as _, ref as E, computed as l, openBlock as a, createElementBlock as i, mergeProps as d, unref as s, createCommentVNode as o, createBlock as C, resolveDynamicComponent as F, createVNode as m, toDisplayString as g, withCtx as P, createTextVNode as N, createElementVNode as U, normalizeStyle as O } from "vue";
+import { File as S, Image as A, Eye as H, CircleAlert as W, X } from "@lucide/vue";
+import j from "../../../icons/colored/ExcelIcon.vue.js";
+import q from "../../../icons/colored/PdfIcon.vue.js";
+import G from "../../../icons/colored/WordIcon.vue.js";
+import { formatFileSize as J } from "../../../utils/parseFileSize.util.js";
+import { getFileTypeByMime as K } from "../../../utils/typeFile.util.js";
+import { useTestId as L } from "../shared/useTestId.util.js";
+import Q from "../shared/VisuallyHidden.vue.js";
+import R from "./FilePreviewDialog.vue.js";
+const Y = ["disabled", "aria-label"], Z = ["src", "alt"], ee = {
+  key: 3,
+  class: "file__eye",
+  "aria-hidden": "true"
+}, te = {
+  key: 0,
+  class: "file__type"
+}, le = {
+  key: 1,
+  class: "file__dot"
+}, ae = {
+  key: 2,
+  class: "file__size"
+}, ie = ["title"], oe = ["aria-valuenow", "aria-label"], re = ["disabled", "aria-label"], ye = /* @__PURE__ */ _({
+  inheritAttrs: !1,
+  __name: "File",
+  props: {
+    file: {},
+    size: { default: "small" },
+    removable: { type: Boolean, default: !0 },
+    showMeta: { type: Boolean, default: !0 },
+    openable: { type: Boolean, default: !0 },
+    preview: { type: Boolean, default: !1 },
+    previewDeleteText: { default: "Удалить файл" },
+    breakpointMobile: { default: "sm" },
+    disabled: { type: Boolean, default: !1 },
+    testId: { default: void 0 }
+  },
+  emits: ["remove", "open"],
+  setup(e, { emit: z }) {
+    const t = e, c = z, n = L(() => t.testId), v = E(!1), h = l(
+      () => t.file.mime ? K(t.file.mime) : "other"
+    ), $ = l(() => h.value === "image"), k = l(() => t.size === "mini"), w = l(() => t.showMeta && !k.value), f = l(() => $.value && !!t.file.url), x = l(() => t.openable && f.value);
+    function T() {
+      c("open"), t.preview && (v.value = !0);
+    }
+    const M = l(() => t.file.status === "uploading"), I = l(() => t.file.status === "error"), B = l(
+      () => Math.min(100, Math.max(0, Math.round(t.file.progress ?? 0)))
+    ), D = l(() => {
+      switch (h.value) {
+        case "pdf":
+          return q;
+        case "word":
+          return G;
+        case "excel":
+          return j;
+        case "image":
+          return A;
+        default:
+          return S;
+      }
+    }), p = l(() => {
+      const u = t.file.name.split(".").pop();
+      if (u && u !== t.file.name && u.length <= 5)
+        return u.toUpperCase();
+      const r = t.file.mime?.split("/").pop();
+      return r ? r.toUpperCase() : "";
+    }), b = l(
+      () => typeof t.file.size == "number" ? J(t.file.size, 2) : ""
+    ), V = l(() => [
+      "file",
+      `file--${t.size}`,
+      {
+        "file--image": f.value,
+        "file--no-meta": !w.value,
+        "file--uploading": M.value,
+        "file--error": I.value,
+        "file--disabled": t.disabled
+      }
+    ]);
+    return (u, r) => (a(), i("div", d({ class: V.value }, { ...u.$attrs, ...s(n)("file") }), [
+      x.value ? (a(), i("button", d({
+        key: 0,
+        type: "button",
+        class: "file__open",
+        disabled: e.disabled,
+        "aria-label": `Открыть ${e.file.name}`
+      }, s(n)("open"), { onClick: T }), null, 16, Y)) : o("", !0),
+      f.value ? (a(), i("img", {
+        key: 1,
+        class: "file__image",
+        src: e.file.url,
+        alt: e.file.name
+      }, null, 8, Z)) : (a(), C(F(D.value), {
+        key: 2,
+        class: "file__icon",
+        "aria-hidden": "true"
+      })),
+      f.value && (k.value || x.value) ? (a(), i("span", ee, [
+        m(s(H))
+      ])) : o("", !0),
+      w.value ? (a(), i("span", d({
+        key: 4,
+        class: "file__meta"
+      }, s(n)("meta")), [
+        p.value ? (a(), i("span", te, g(p.value), 1)) : o("", !0),
+        p.value && b.value ? (a(), i("span", le)) : o("", !0),
+        b.value ? (a(), i("span", ae, g(b.value), 1)) : o("", !0)
+      ], 16)) : o("", !0),
+      I.value ? (a(), i("span", d({
+        key: 5,
+        class: "file__error",
+        title: e.file.errorMessage
+      }, s(n)("error")), [
+        m(s(W), { "aria-hidden": "true" }),
+        m(Q, null, {
+          default: P(() => [
+            N(g(e.file.errorMessage ?? "Файл не загружен"), 1)
+          ]),
+          _: 1
+        })
+      ], 16, ie)) : o("", !0),
+      M.value ? (a(), i("span", d({
+        key: 6,
+        class: "file__progress",
+        role: "progressbar",
+        "aria-valuenow": B.value,
+        "aria-valuemin": "0",
+        "aria-valuemax": "100",
+        "aria-label": `Загрузка ${e.file.name}`
+      }, s(n)("progress")), [
+        U("span", {
+          class: "file__progress-bar",
+          style: O({ width: `${B.value}%` })
+        }, null, 4)
+      ], 16, oe)) : o("", !0),
+      e.removable ? (a(), i("button", d({
+        key: 7,
+        type: "button",
+        class: "file__remove",
+        disabled: e.disabled,
+        "aria-label": `Удалить ${e.file.name}`
+      }, s(n)("remove"), {
+        onClick: r[0] || (r[0] = (y) => c("remove"))
+      }), [
+        m(s(X), { "aria-hidden": "true" })
+      ], 16, re)) : o("", !0),
+      e.preview ? (a(), C(R, {
+        key: 8,
+        open: v.value,
+        "onUpdate:open": r[1] || (r[1] = (y) => v.value = y),
+        file: e.file,
+        deletable: e.removable && !e.disabled,
+        "delete-text": e.previewDeleteText,
+        "breakpoint-mobile": e.breakpointMobile,
+        "test-id": e.testId ? `${e.testId}-preview` : void 0,
+        onDelete: r[2] || (r[2] = (y) => c("remove"))
+      }, null, 8, ["open", "file", "deletable", "delete-text", "breakpoint-mobile", "test-id"])) : o("", !0)
+    ], 16));
+  }
+});
+export {
+  ye as default
+};

package/dist/components/v2/File/FilePreviewDialog.css

@@ -0,0 +1 @@
+.file-preview__heading[data-v-31f87c95]{flex-wrap:wrap;align-items:center;gap:.5rem;font-size:1.25rem;line-height:1.5rem;display:flex}.file-preview__name[data-v-31f87c95]{color:var(--theme-neutral-text-title);overflow-wrap:anywhere;font-weight:500}.file-preview__size[data-v-31f87c95]{color:var(--theme-neutral-text-caption);white-space:nowrap;font-weight:400}.file-preview__body[data-v-31f87c95]{width:100%}.file-preview__image[data-v-31f87c95]{object-fit:contain;border-radius:.5rem;width:100%;max-height:25rem;display:block}

package/dist/components/v2/File/FilePreviewDialog.vue.d.ts

@@ -0,0 +1,39 @@
+import { FilePreviewDialogProps, FileItem } from './File.types';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { TBreakpoints } from '../../../types/global.types';
+type __VLS_Props = FilePreviewDialogProps;
+type __VLS_PublicProps = {
+    'open'?: boolean;
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {
+            file: FileItem | null;
+        }): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    delete: (file: FileItem) => any;
+    "update:open": (value: boolean) => any;
+}, string, PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onDelete?: ((file: FileItem) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    width: number;
+    breakpointMobile: TBreakpoints;
+    file: FileItem | null;
+    testId: string;
+    deletable: boolean;
+    deleteText: string;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/v2/File/FilePreviewDialog.vue.js

@@ -0,0 +1,8 @@
+import './FilePreviewDialog.css';
+import o from "./FilePreviewDialog.vue2.js";
+/* empty css                       */
+import r from "../../../_virtual/_plugin-vue_export-helper.js";
+const a = /* @__PURE__ */ r(o, [["__scopeId", "data-v-31f87c95"]]);
+export {
+  a as default
+};

package/dist/components/v2/File/FilePreviewDialog.vue2.js

@@ -0,0 +1,82 @@
+import { defineComponent as T, useModel as x, computed as d, openBlock as s, createBlock as z, unref as l, createSlots as M, withCtx as o, createElementVNode as f, mergeProps as a, renderSlot as I, createElementBlock as c, createCommentVNode as p, toDisplayString as r, createVNode as C, createTextVNode as D, mergeModels as b } from "vue";
+import { formatFileSize as N } from "../../../utils/parseFileSize.util.js";
+import { getFileTypeByMime as S } from "../../../utils/typeFile.util.js";
+import V from "../Button/Button.vue.js";
+import F from "../Dialog/Dialog.vue.js";
+import { useTestId as E } from "../shared/useTestId.util.js";
+const P = { class: "file-preview__heading" }, O = ["src", "alt"], H = /* @__PURE__ */ T({
+  __name: "FilePreviewDialog",
+  props: /* @__PURE__ */ b({
+    file: { default: null },
+    deletable: { type: Boolean, default: !0 },
+    deleteText: { default: "Удалить файл" },
+    width: { default: 648 },
+    breakpointMobile: { default: "sm" },
+    testId: { default: void 0 }
+  }, {
+    open: { type: Boolean, default: !1 },
+    openModifiers: {}
+  }),
+  emits: /* @__PURE__ */ b(["delete"], ["update:open"]),
+  setup(e, { emit: v }) {
+    const t = e, y = v, n = x(e, "open"), i = E(() => t.testId), g = d(
+      () => t.file?.mime ? S(t.file.mime) : "other"
+    ), k = d(() => g.value === "image"), m = d(
+      () => typeof t.file?.size == "number" ? N(t.file.size, 2) : ""
+    );
+    function w() {
+      t.file && (y("delete", t.file), n.value = !1);
+    }
+    return (h, u) => (s(), z(l(F), {
+      open: n.value,
+      "onUpdate:open": u[0] || (u[0] = (B) => n.value = B),
+      width: e.width,
+      "breakpoint-mobile": e.breakpointMobile,
+      "close-button": { enabled: !0, label: "Закрыть просмотр" },
+      "test-id": e.testId
+    }, M({
+      title: o(() => [
+        f("span", P, [
+          f("span", a({ class: "file-preview__name" }, l(i)("name")), r(e.file?.name), 17),
+          m.value ? (s(), c("span", a({
+            key: 0,
+            class: "file-preview__size"
+          }, l(i)("size")), r(m.value), 17)) : p("", !0)
+        ])
+      ]),
+      default: o(() => [
+        f("div", a({ class: "file-preview__body" }, l(i)("body")), [
+          I(h.$slots, "default", { file: e.file }, () => [
+            k.value && e.file?.url ? (s(), c("img", {
+              key: 0,
+              class: "file-preview__image",
+              src: e.file.url,
+              alt: e.file.name
+            }, null, 8, O)) : p("", !0)
+          ], !0)
+        ], 16)
+      ]),
+      _: 2
+    }, [
+      e.deletable && e.file ? {
+        name: "actions",
+        fn: o(() => [
+          C(l(V), a({
+            variant: "danger",
+            "button-style": "contrast",
+            full: ""
+          }, l(i)("delete"), { onClick: w }), {
+            default: o(() => [
+              D(r(e.deleteText), 1)
+            ]),
+            _: 1
+          }, 16)
+        ]),
+        key: "0"
+      } : void 0
+    ]), 1032, ["open", "width", "breakpoint-mobile", "test-id"]));
+  }
+});
+export {
+  H as default
+};

package/dist/components/v2/File/index.d.ts

@@ -0,0 +1,4 @@
+import { default as File } from './File.vue';
+import { default as FilePreviewDialog } from './FilePreviewDialog.vue';
+export type { FileEmits, FileItem, FilePreviewDialogEmits, FilePreviewDialogProps, FileProps, FileSize, FileStatus } from './File.types';
+export { File, FilePreviewDialog };

package/dist/components/v2/FileUpload/FileUpload.css

@@ -0,0 +1 @@
+.file-upload[data-v-27716030]{box-sizing:border-box;background-color:var(--theme-neutral-250_40);border:.0625rem solid var(--theme-neutral-border-default);border-radius:.75rem;flex-direction:column;gap:.625rem;padding:.75rem;display:flex}.file-upload--disabled[data-v-27716030]{opacity:.7;cursor:not-allowed}.file-upload__header[data-v-27716030]{justify-content:space-between;align-items:center;gap:.75rem;display:flex}.file-upload__heading[data-v-27716030]{align-items:center;gap:.5rem;min-width:0;display:flex}.file-upload__title[data-v-27716030]{color:var(--theme-neutral-text-title);overflow-wrap:break-word;font-size:1rem;font-weight:600;line-height:1.25rem}.file-upload__hint[data-v-27716030]{width:1rem;height:1rem;color:var(--theme-neutral-icon-primary);cursor:pointer;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:flex}.file-upload__hint[data-v-27716030]:focus-visible{outline:2px solid var(--theme-primary-500);outline-offset:.125rem}.file-upload__hint svg[data-v-27716030]{width:1rem;height:1rem}.file-upload__hint-content[data-v-27716030]{flex-direction:column;gap:.25rem;display:flex}.file-upload__hint-image[data-v-27716030]{object-fit:contain;border-radius:.5rem;width:100%;max-height:15rem}.file-upload__required[data-v-27716030]{color:var(--theme-error-500);flex-shrink:0;align-items:center;gap:.25rem;font-size:.625rem;font-weight:400;line-height:1.2;display:flex}.file-upload__required svg[data-v-27716030]{width:.875rem;height:.875rem}.file-upload__body[data-v-27716030]{align-items:stretch;gap:.25rem;height:8.25rem;display:flex}.file-upload__dropzone[data-v-27716030]{box-sizing:border-box;background-color:var(--theme-neutral-0);border:.0625rem dashed var(--theme-neutral-border-default);min-width:0;height:100%;transition:border-color var(--animation-duration-fast) ease, background-color var(--animation-duration-fast) ease;border-radius:.75rem;flex-direction:column;flex:1 1 0;justify-content:center;align-items:center;gap:1rem;padding:.5rem;display:flex}.file-upload__dropzone--filled[data-v-27716030]{gap:.75rem}.file-upload__dropzone--dragging[data-v-27716030]{background-color:var(--theme-primary-50);border-color:var(--theme-primary-500)}.file-upload__drop[data-v-27716030]{align-items:center;gap:.25rem;display:flex}.file-upload__drop-icon[data-v-27716030]{width:2.25rem;height:2.25rem;color:var(--theme-neutral-text-subtitle);justify-content:center;align-items:center;display:flex}.file-upload__drop-icon svg[data-v-27716030]{width:1rem;height:1rem}.file-upload__drop-text[data-v-27716030]{color:var(--theme-neutral-text-subtitle);font-size:.75rem;font-weight:500;line-height:1rem}.file-upload__divider[data-v-27716030]{align-items:center;gap:.25rem;width:100%;display:flex}.file-upload__divider-line[data-v-27716030]{background-color:var(--theme-neutral-border-divider);flex:1 1 0;min-width:0;height:.0625rem}.file-upload__divider-text[data-v-27716030]{color:var(--theme-neutral-text-caption);white-space:nowrap;font-size:.75rem;font-weight:400;line-height:1rem}.file-upload__list[data-v-27716030]{align-items:center;gap:.5rem;width:100%;min-width:0;display:flex}.file-upload__track[data-v-27716030]{scrollbar-width:none;flex:1 1 0;align-items:center;gap:.5rem;min-width:0;margin:-.625rem -.5rem;padding:.625rem .5rem;display:flex;overflow-x:auto}.file-upload__track[data-v-27716030]::-webkit-scrollbar{display:none}.file-upload__scroll[data-v-27716030]{width:1.5rem;height:1.5rem;color:var(--theme-neutral-icon-negative);background-color:var(--theme-primary-500);box-shadow:var(--theme-shadow-button);cursor:pointer;transition:background-color var(--animation-duration-fast) ease;border:none;border-radius:999px;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:flex}.file-upload__scroll[data-v-27716030]:focus-visible{outline:2px solid var(--theme-primary-500);outline-offset:.125rem}.file-upload__scroll svg[data-v-27716030]{width:.75rem;height:.75rem}.file-upload__scroll[data-v-27716030]:hover{background-color:var(--theme-primary-600)}.file-upload__button[data-v-27716030]{box-sizing:border-box;width:100%;height:2rem;color:var(--theme-primary-600);white-space:nowrap;background-color:var(--theme-primary-75);cursor:pointer;transition:color var(--animation-duration-fast) ease, background-color var(--animation-duration-fast) ease;border:none;border-radius:.5rem;justify-content:center;align-items:center;gap:.25rem;padding:.5rem 1rem;font-family:inherit;font-size:.875rem;font-weight:500;line-height:1rem;display:flex}.file-upload__button[data-v-27716030]:focus-visible{outline:2px solid var(--theme-primary-500);outline-offset:.125rem}.file-upload__button svg[data-v-27716030]{width:1rem;height:1rem}.file-upload__button[data-v-27716030]:hover:not(:disabled){color:var(--theme-primary-700);background-color:var(--theme-primary-200)}.file-upload__button[data-v-27716030]:disabled{color:var(--theme-neutral-text-disabled);background-color:var(--theme-neutral-surface-disabled);cursor:not-allowed}.file-upload__input[data-v-27716030]{clip-path:inset(50%);white-space:nowrap;border:0;width:.0625rem;height:.0625rem;margin:-.0625rem;padding:0;position:absolute;overflow:hidden}.file-upload__example[data-v-27716030]{flex-direction:column;flex-shrink:0;gap:.25rem;width:8.25rem;display:flex}.file-upload__example-label[data-v-27716030]{color:var(--theme-neutral-text-body);font-size:.75rem;font-weight:500;line-height:1rem}.file-upload__example-preview[data-v-27716030]{border:.0625rem dashed var(--theme-neutral-border-default);cursor:pointer;background:0 0;border-radius:.5rem;flex:1 1 0;justify-content:center;align-items:center;min-height:0;padding:0;display:flex;position:relative;overflow:hidden}.file-upload__example-preview[data-v-27716030]:focus-visible{outline:2px solid var(--theme-primary-500);outline-offset:.125rem}.file-upload__example-image[data-v-27716030]{object-fit:cover;width:100%;height:100%}.file-upload__example-zoom[data-v-27716030]{color:var(--theme-neutral-icon-negative);opacity:0;transition:opacity var(--animation-duration-fast) ease;background-color:#16161666;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.file-upload__example-zoom svg[data-v-27716030]{width:2rem;height:2rem}.file-upload__example-preview:hover .file-upload__example-zoom[data-v-27716030],.file-upload__example-preview:focus-visible .file-upload__example-zoom[data-v-27716030]{opacity:1}