@profitliga/ui 1.2.90 → 2.0.0

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

@@ -0,0 +1,96 @@
+import { Component } from 'vue';
+import { TBreakpoints } from '../../../types/global.types';
+import { FileItem } from '../File';
+/** Причина, по которой файл не попал в список. */
+export type FileUploadRejectReason = 'type' | 'size' | 'count';
+export interface FileUploadRejection {
+    file: globalThis.File;
+    reason: FileUploadRejectReason;
+    /** Готовое сообщение на русском — можно показать пользователю как есть. */
+    message: string;
+}
+export interface FileUploadProps {
+    /** Заголовок поля. Можно заменить слотом `title` */
+    title?: string;
+    /** Показывать метку «Обязательно» справа от заголовка */
+    required?: boolean;
+    /** Текст метки обязательности */
+    requiredText?: string;
+    /** Ссылка на картинку-пример. Можно заменить слотом `example` */
+    example?: string;
+    /** Подпись над примером */
+    exampleLabel?: string;
+    /** Описание примера для скринридера (`alt` картинки) */
+    exampleAlt?: string;
+    /** Значение атрибута `accept` у поля выбора файла */
+    accept?: string;
+    /** Разрешить выбор нескольких файлов за раз */
+    multiple?: boolean;
+    /** Максимальное количество файлов в списке */
+    maxFiles?: number;
+    /**
+     * Максимальный размер одного файла: число в байтах или строка вида `'10mb'`
+     */
+    maxFileSize?: number | string;
+    disabled?: boolean;
+    /** Текст в пустой зоне перетаскивания */
+    dropText?: string;
+    /** Подсказка под текстом перетаскивания */
+    hintText?: string;
+    /** Текст кнопки выбора файла */
+    buttonText?: string;
+    /**
+     * Открывать встроенное окно просмотра по клику на картинку и на пример.
+     * При `false` компонент только сообщает о клике событием `preview`.
+     * Документы не открываются в любом случае — показывать в просмотре их нечем
+     */
+    preview?: boolean;
+    /** Текст кнопки удаления в окне просмотра */
+    previewDeleteText?: string;
+    /**
+     * Точка перелома, ниже которой пример уходит в подсказку по знаку `?`
+     * рядом с заголовком
+     */
+    breakpointMobile?: TBreakpoints;
+    name?: string;
+    /** Собственный `id` поля выбора файла. По умолчанию генерируется */
+    id?: string;
+    /** Базовый `data-testid`; внутренние части получают суффикс имени части */
+    testId?: string;
+}
+export interface FileUploadInlineProps {
+    /** Подпись рядом с кнопкой. Видна, пока файлов нет */
+    placeholder?: string;
+    /** Иконка кнопки. По умолчанию камера, для документов уместнее `FileIcon` */
+    icon?: Component;
+    /** Доступное имя строки загрузки. По умолчанию — `placeholder` */
+    ariaLabel?: string;
+    /** Значение атрибута `accept` у поля выбора файла */
+    accept?: string;
+    multiple?: boolean;
+    maxFiles?: number;
+    /**
+     * Максимальный размер одного файла: число в байтах или строка вида `'10mb'`
+     */
+    maxFileSize?: number | string;
+    disabled?: boolean;
+    /** Открывать встроенное окно просмотра по клику на картинку */
+    preview?: boolean;
+    previewDeleteText?: string;
+    breakpointMobile?: TBreakpoints;
+    name?: string;
+    id?: string;
+    testId?: string;
+}
+export interface FileUploadEmits {
+    /** Файлы прошли проверку и добавлены в список */
+    add: [files: FileItem[]];
+    /** Файл убрали крестиком или кнопкой в окне просмотра */
+    remove: [file: FileItem];
+    /** Файл не прошёл проверку по типу, размеру или количеству */
+    reject: [rejections: FileUploadRejection[]];
+    /** Клик по карточке файла */
+    preview: [file: FileItem];
+    /** Клик по картинке-примеру */
+    exampleClick: [];
+}

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

@@ -0,0 +1,68 @@
+import { FileItem } from '../File';
+import { FileUploadProps, FileUploadRejection } from './FileUpload.types';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { TBreakpoints } from '../../../types/global.types';
+type __VLS_Props = FileUploadProps;
+type __VLS_PublicProps = {
+    modelValue?: FileItem[];
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        title?(_: {}): any;
+        example?(_: {}): any;
+        example?(_: {}): any;
+    };
+    refs: {
+        trackRef: HTMLDivElement;
+        inputRef: HTMLInputElement;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    add: (files: FileItem[]) => any;
+    "update:modelValue": (value: FileItem[]) => any;
+    reject: (rejections: FileUploadRejection[]) => any;
+    remove: (file: FileItem) => any;
+    preview: (file: FileItem) => any;
+    exampleClick: () => any;
+}, string, PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onAdd?: ((files: FileItem[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: FileItem[]) => any) | undefined;
+    onReject?: ((rejections: FileUploadRejection[]) => any) | undefined;
+    onRemove?: ((file: FileItem) => any) | undefined;
+    onPreview?: ((file: FileItem) => any) | undefined;
+    onExampleClick?: (() => any) | undefined;
+}>, {
+    multiple: boolean;
+    disabled: boolean;
+    required: boolean;
+    title: string;
+    id: string;
+    breakpointMobile: TBreakpoints;
+    name: string;
+    accept: string;
+    testId: string;
+    preview: boolean;
+    previewDeleteText: string;
+    requiredText: string;
+    example: string;
+    exampleLabel: string;
+    exampleAlt: string;
+    maxFiles: number;
+    maxFileSize: number | string;
+    dropText: string;
+    hintText: string;
+    buttonText: string;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
+    trackRef: HTMLDivElement;
+    inputRef: HTMLInputElement;
+}, 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/FileUpload/FileUpload.vue.js

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

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

@@ -0,0 +1,305 @@
+import { defineComponent as de, useModel as ne, useSlots as se, useId as re, computed as m, ref as p, watch as N, onBeforeUnmount as ue, openBlock as d, createElementBlock as n, mergeProps as r, unref as t, createElementVNode as o, renderSlot as S, createTextVNode as z, toDisplayString as v, createCommentVNode as u, createBlock as B, withCtx as P, createVNode as b, withModifiers as D, Fragment as U, renderList as ce, mergeModels as j } from "vue";
+import { CircleQuestionMark as fe, CircleAlert as me, ChevronLeft as pe, ChevronRight as ve, Download as be, FileUp as xe, ZoomIn as he } from "@lucide/vue";
+import { breakpoints as ke } from "../../../utils/breakpoints.util.js";
+import ge from "../File/File.vue.js";
+import ye from "../File/FilePreviewDialog.vue.js";
+import { useTestId as _e } from "../shared/useTestId.util.js";
+import we from "../Tooltip/Tooltip.vue.js";
+import { useFileSelection as Ce } from "./useFileSelection.util.js";
+const Fe = ["aria-labelledby"], De = {
+  key: 0,
+  class: "file-upload__header"
+}, $e = { class: "file-upload__heading" }, Le = ["aria-label"], Te = { class: "file-upload__hint-content" }, Ie = { class: "file-upload__example-label" }, Se = ["src", "alt"], ze = { class: "file-upload__body" }, Be = {
+  key: 0,
+  class: "file-upload__list"
+}, Ae = { class: "file-upload__drop" }, Me = { class: "file-upload__drop-icon" }, Re = { class: "file-upload__drop-text" }, qe = { class: "file-upload__divider" }, Ve = { class: "file-upload__divider-text" }, Oe = ["disabled"], Ee = ["id", "name", "accept", "multiple", "disabled"], Ne = { class: "file-upload__example-label" }, Pe = ["aria-label"], Ue = ["src", "alt"], je = {
+  class: "file-upload__example-zoom",
+  "aria-hidden": "true"
+}, Ye = /* @__PURE__ */ de({
+  inheritAttrs: !1,
+  __name: "FileUpload",
+  props: /* @__PURE__ */ j({
+    title: { default: void 0 },
+    required: { type: Boolean, default: !1 },
+    requiredText: { default: "Обязательно" },
+    example: { default: void 0 },
+    exampleLabel: { default: "Пример" },
+    exampleAlt: { default: void 0 },
+    accept: { default: void 0 },
+    multiple: { type: Boolean, default: !0 },
+    maxFiles: { default: void 0 },
+    maxFileSize: { default: void 0 },
+    disabled: { type: Boolean, default: !1 },
+    dropText: { default: "Перетащите фото сюда" },
+    hintText: { default: "Или нажмите «Выбрать файл»" },
+    buttonText: { default: "Выбрать файл" },
+    preview: { type: Boolean, default: !0 },
+    previewDeleteText: { default: "Удалить фотографию" },
+    breakpointMobile: { default: "sm" },
+    name: { default: void 0 },
+    id: { default: void 0 },
+    testId: { default: void 0 }
+  }, {
+    modelValue: { default: () => [] },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ j(["add", "remove", "reject", "preview", "exampleClick"], ["update:modelValue"]),
+  setup(e, { emit: W }) {
+    const i = e, x = W, f = ne(e, "modelValue"), A = se(), s = _e(() => i.testId), $ = re(), M = `file-upload-title-${$}`, H = m(() => i.id ?? `${$}-file-upload`), g = ke.smaller(i.breakpointMobile), R = p(null), y = p(null), _ = p(!1), w = p(!1), C = p(null), L = p(!1), T = p(!1), I = m(() => !!(i.title || A.title)), q = m(() => !!(i.example || A.example)), Q = m(() => I.value || i.required), { addFiles: V, removeFile: O, isFull: Z } = Ce({
+      files: () => f.value,
+      setFiles: (l) => {
+        f.value = l;
+      },
+      accept: () => i.accept,
+      multiple: () => i.multiple,
+      maxFiles: () => i.maxFiles,
+      maxFileSize: () => i.maxFileSize,
+      disabled: () => i.disabled,
+      onAdd: (l) => x("add", l),
+      onRemove: (l) => x("remove", l),
+      onReject: (l) => x("reject", l)
+    }), G = m(
+      () => f.value.some((l) => l.id === C.value?.id)
+    ), J = m(() => [
+      "file-upload",
+      { "file-upload--disabled": i.disabled }
+    ]), K = m(() => [
+      "file-upload__dropzone",
+      {
+        "file-upload__dropzone--dragging": _.value,
+        "file-upload__dropzone--filled": f.value.length > 0
+      }
+    ]);
+    function X() {
+      i.disabled || R.value?.click();
+    }
+    function Y(l) {
+      const a = l.target;
+      a.files && V(Array.from(a.files)), a.value = "";
+    }
+    let h = 0;
+    function ee() {
+      i.disabled || (h += 1, _.value = !0);
+    }
+    function le() {
+      h = Math.max(0, h - 1), h === 0 && (_.value = !1);
+    }
+    function te(l) {
+      if (h = 0, _.value = !1, i.disabled) return;
+      const a = l.dataTransfer?.files;
+      a?.length && V(Array.from(a));
+    }
+    function ae(l) {
+      x("preview", l), i.preview && (C.value = l, w.value = !0);
+    }
+    function ie() {
+      x("exampleClick"), !(!i.preview || !i.example) && (C.value = {
+        id: `${$}-example`,
+        name: i.exampleAlt ?? i.exampleLabel,
+        size: null,
+        mime: "image/*",
+        url: i.example
+      }, w.value = !0);
+    }
+    function E(l) {
+      const a = y.value;
+      a && a.scrollBy({ left: l * a.clientWidth, behavior: "smooth" });
+    }
+    function k() {
+      const l = y.value;
+      if (!l) {
+        L.value = !1, T.value = !1;
+        return;
+      }
+      const a = l.scrollWidth - l.clientWidth;
+      L.value = l.scrollLeft > 1, T.value = l.scrollLeft < a - 1;
+    }
+    let F;
+    return N(y, (l) => {
+      if (F?.disconnect(), !l) {
+        k();
+        return;
+      }
+      F = new ResizeObserver(k), F.observe(l), k();
+    }), N(
+      () => f.value.length,
+      () => {
+        requestAnimationFrame(k);
+      }
+    ), ue(() => {
+      F?.disconnect();
+    }), (l, a) => (d(), n("div", r({
+      class: J.value,
+      role: "group",
+      "aria-labelledby": I.value ? M : void 0
+    }, { ...l.$attrs, ...t(s)("root") }), [
+      Q.value ? (d(), n("div", De, [
+        o("div", $e, [
+          I.value ? (d(), n("span", r({
+            key: 0,
+            id: M,
+            class: "file-upload__title"
+          }, t(s)("title")), [
+            S(l.$slots, "title", {}, () => [
+              z(v(e.title), 1)
+            ], !0)
+          ], 16)) : u("", !0),
+          t(g) && q.value ? (d(), B(t(we), {
+            key: 1,
+            "max-width": 280,
+            "mobile-label": e.exampleLabel,
+            "test-id": e.testId ? `${e.testId}-example-tooltip` : void 0
+          }, {
+            trigger: P(() => [
+              o("button", r({
+                type: "button",
+                class: "file-upload__hint",
+                "aria-label": e.exampleLabel
+              }, t(s)("example-hint")), [
+                b(t(fe), { "aria-hidden": "true" })
+              ], 16, Le)
+            ]),
+            default: P(() => [
+              o("span", Te, [
+                o("span", Ie, v(e.exampleLabel), 1),
+                S(l.$slots, "example", {}, () => [
+                  e.example ? (d(), n("img", {
+                    key: 0,
+                    class: "file-upload__hint-image",
+                    src: e.example,
+                    alt: e.exampleAlt ?? e.exampleLabel
+                  }, null, 8, Se)) : u("", !0)
+                ], !0)
+              ])
+            ]),
+            _: 3
+          }, 8, ["mobile-label", "test-id"])) : u("", !0)
+        ]),
+        e.required ? (d(), n("span", r({
+          key: 0,
+          class: "file-upload__required"
+        }, t(s)("required")), [
+          b(t(me), { "aria-hidden": "true" }),
+          z(" " + v(e.requiredText), 1)
+        ], 16)) : u("", !0)
+      ])) : u("", !0),
+      o("div", ze, [
+        o("div", r({ class: K.value }, t(s)("dropzone"), {
+          onDragenter: D(ee, ["prevent"]),
+          onDragover: a[2] || (a[2] = D(() => {
+          }, ["prevent"])),
+          onDragleave: D(le, ["prevent"]),
+          onDrop: D(te, ["prevent"])
+        }), [
+          f.value.length ? (d(), n("div", Be, [
+            !t(g) && L.value ? (d(), n("button", r({
+              key: 0,
+              type: "button",
+              class: "file-upload__scroll file-upload__scroll--prev",
+              "aria-label": "Предыдущие файлы"
+            }, t(s)("scroll-prev"), {
+              onClick: a[0] || (a[0] = (c) => E(-1))
+            }), [
+              b(t(pe), { "aria-hidden": "true" })
+            ], 16)) : u("", !0),
+            o("div", r({
+              ref_key: "trackRef",
+              ref: y,
+              class: "file-upload__track"
+            }, t(s)("track"), { onScroll: k }), [
+              (d(!0), n(U, null, ce(f.value, (c) => (d(), B(t(ge), {
+                key: c.id,
+                file: c,
+                disabled: e.disabled,
+                "test-id": e.testId ? `${e.testId}-file-${c.id}` : void 0,
+                onOpen: (oe) => ae(c),
+                onRemove: (oe) => t(O)(c)
+              }, null, 8, ["file", "disabled", "test-id", "onOpen", "onRemove"]))), 128))
+            ], 16),
+            !t(g) && T.value ? (d(), n("button", r({
+              key: 1,
+              type: "button",
+              class: "file-upload__scroll file-upload__scroll--next",
+              "aria-label": "Следующие файлы"
+            }, t(s)("scroll-next"), {
+              onClick: a[1] || (a[1] = (c) => E(1))
+            }), [
+              b(t(ve), { "aria-hidden": "true" })
+            ], 16)) : u("", !0)
+          ])) : (d(), n(U, { key: 1 }, [
+            o("span", Ae, [
+              o("span", Me, [
+                b(t(be), { "aria-hidden": "true" })
+              ]),
+              o("span", Re, v(e.dropText), 1)
+            ]),
+            o("span", qe, [
+              a[4] || (a[4] = o("span", { class: "file-upload__divider-line" }, null, -1)),
+              o("span", Ve, v(e.hintText), 1),
+              a[5] || (a[5] = o("span", { class: "file-upload__divider-line" }, null, -1))
+            ])
+          ], 64)),
+          o("button", r({
+            type: "button",
+            class: "file-upload__button",
+            disabled: e.disabled || t(Z)
+          }, t(s)("button"), { onClick: X }), [
+            b(t(xe), { "aria-hidden": "true" }),
+            z(" " + v(e.buttonText), 1)
+          ], 16, Oe),
+          o("input", {
+            id: H.value,
+            ref_key: "inputRef",
+            ref: R,
+            type: "file",
+            class: "file-upload__input",
+            tabindex: "-1",
+            "aria-hidden": "true",
+            name: e.name,
+            accept: e.accept,
+            multiple: e.multiple,
+            disabled: e.disabled,
+            onChange: Y
+          }, null, 40, Ee)
+        ], 16),
+        !t(g) && q.value ? (d(), n("div", r({
+          key: 0,
+          class: "file-upload__example"
+        }, t(s)("example")), [
+          o("span", Ne, v(e.exampleLabel), 1),
+          o("button", r({
+            type: "button",
+            class: "file-upload__example-preview",
+            "aria-label": `Открыть ${e.exampleLabel.toLowerCase()}`
+          }, t(s)("example-open"), { onClick: ie }), [
+            S(l.$slots, "example", {}, () => [
+              e.example ? (d(), n("img", {
+                key: 0,
+                class: "file-upload__example-image",
+                src: e.example,
+                alt: e.exampleAlt ?? e.exampleLabel
+              }, null, 8, Ue)) : u("", !0)
+            ], !0),
+            o("span", je, [
+              b(t(he))
+            ])
+          ], 16, Pe)
+        ], 16)) : u("", !0)
+      ]),
+      e.preview ? (d(), B(t(ye), {
+        key: 1,
+        open: w.value,
+        "onUpdate:open": a[3] || (a[3] = (c) => w.value = c),
+        file: C.value,
+        deletable: G.value,
+        "delete-text": e.previewDeleteText,
+        "breakpoint-mobile": e.breakpointMobile,
+        "test-id": e.testId ? `${e.testId}-preview` : void 0,
+        onDelete: t(O)
+      }, null, 8, ["open", "file", "deletable", "delete-text", "breakpoint-mobile", "test-id", "onDelete"])) : u("", !0)
+    ], 16, Fe));
+  }
+});
+export {
+  Ye as default
+};

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

@@ -0,0 +1 @@
+.file-upload-inline[data-v-a349bd02]{box-sizing:border-box;background-color:var(--theme-secondary-150);border-radius:.75rem;align-items:center;gap:.25rem;padding:.25rem;display:flex}.file-upload-inline--disabled[data-v-a349bd02]{opacity:.7;cursor:not-allowed}.file-upload-inline__button[data-v-a349bd02]{box-sizing:border-box;width:2.25rem;height:2.25rem;color:var(--theme-primary-600);background-color:var(--theme-primary-75);cursor:pointer;transition:background-color var(--animation-duration-fast) ease;border:none;border-radius:.5rem;flex-shrink:0;justify-content:center;align-items:center;padding:.5rem;display:flex}.file-upload-inline__button[data-v-a349bd02]:focus-visible{outline:2px solid var(--theme-primary-500);outline-offset:.125rem}.file-upload-inline__button svg[data-v-a349bd02]{width:1rem;height:1rem}.file-upload-inline__button[data-v-a349bd02]:hover:not(:disabled){background-color:var(--theme-primary-200)}.file-upload-inline__button[data-v-a349bd02]:disabled{color:var(--theme-neutral-text-disabled);background-color:var(--theme-neutral-surface-disabled);cursor:not-allowed}.file-upload-inline__placeholder[data-v-a349bd02]{color:var(--theme-neutral-text-subtitle);margin-left:.375rem;font-size:.75rem;font-weight:400;line-height:1rem}.file-upload-inline__input[data-v-a349bd02]{clip-path:inset(50%);white-space:nowrap;border:0;width:.0625rem;height:.0625rem;margin:-.0625rem;padding:0;position:absolute;overflow:hidden}

package/dist/components/v2/FileUpload/FileUploadInline.vue.d.ts

@@ -0,0 +1,41 @@
+import { FileItem } from '../File';
+import { FileUploadInlineProps, FileUploadRejection } from './FileUpload.types';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, Component, ComponentProvideOptions } from 'vue';
+import { TBreakpoints } from '../../../types/global.types';
+type __VLS_Props = FileUploadInlineProps;
+type __VLS_PublicProps = {
+    modelValue?: FileItem[];
+} & __VLS_Props;
+declare const _default: DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    add: (files: FileItem[]) => any;
+    "update:modelValue": (value: FileItem[]) => any;
+    reject: (rejections: FileUploadRejection[]) => any;
+    remove: (file: FileItem) => any;
+    preview: (file: FileItem) => any;
+    exampleClick: () => any;
+}, string, PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onAdd?: ((files: FileItem[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: FileItem[]) => any) | undefined;
+    onReject?: ((rejections: FileUploadRejection[]) => any) | undefined;
+    onRemove?: ((file: FileItem) => any) | undefined;
+    onPreview?: ((file: FileItem) => any) | undefined;
+    onExampleClick?: (() => any) | undefined;
+}>, {
+    multiple: boolean;
+    placeholder: string;
+    disabled: boolean;
+    id: string;
+    icon: Component;
+    breakpointMobile: TBreakpoints;
+    name: string;
+    accept: string;
+    ariaLabel: string;
+    testId: string;
+    preview: boolean;
+    previewDeleteText: string;
+    maxFiles: number;
+    maxFileSize: number | string;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
+    inputRef: HTMLInputElement;
+}, any>;
+export default _default;

package/dist/components/v2/FileUpload/FileUploadInline.vue.js

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

package/dist/components/v2/FileUpload/FileUploadInline.vue2.js

@@ -0,0 +1,113 @@
+import { defineComponent as V, useModel as z, useId as O, computed as h, ref as m, openBlock as n, createElementBlock as c, mergeProps as f, unref as i, Fragment as j, renderList as A, createBlock as v, createElementVNode as k, resolveDynamicComponent as L, toDisplayString as P, createCommentVNode as x, mergeModels as g } from "vue";
+import { Camera as T } from "@lucide/vue";
+import E from "../File/File.vue.js";
+import N from "../File/FilePreviewDialog.vue.js";
+import { useTestId as U } from "../shared/useTestId.util.js";
+import { useFileSelection as q } from "./useFileSelection.util.js";
+const G = ["aria-label"], H = ["disabled", "aria-label"], J = ["id", "name", "accept", "multiple", "disabled"], _ = /* @__PURE__ */ V({
+  inheritAttrs: !1,
+  __name: "FileUploadInline",
+  props: /* @__PURE__ */ g({
+    placeholder: { default: "Добавьте фото" },
+    icon: { default: void 0 },
+    ariaLabel: { default: void 0 },
+    accept: { default: void 0 },
+    multiple: { type: Boolean, default: !0 },
+    maxFiles: { default: void 0 },
+    maxFileSize: { default: void 0 },
+    disabled: { type: Boolean, default: !1 },
+    preview: { type: Boolean, default: !0 },
+    previewDeleteText: { default: "Удалить фотографию" },
+    breakpointMobile: { default: "sm" },
+    name: { default: void 0 },
+    id: { default: void 0 },
+    testId: { default: void 0 }
+  }, {
+    modelValue: { default: () => [] },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ g(["add", "remove", "reject", "preview", "exampleClick"], ["update:modelValue"]),
+  setup(e, { emit: y }) {
+    const t = e, o = y, u = z(e, "modelValue"), r = U(() => t.testId), w = O(), C = h(() => t.id ?? `${w}-file-upload-inline`), p = m(null), s = m(!1), b = m(null), { addFiles: I, removeFile: F, isFull: D } = q({
+      files: () => u.value,
+      setFiles: (l) => {
+        u.value = l;
+      },
+      accept: () => t.accept,
+      multiple: () => t.multiple,
+      maxFiles: () => t.maxFiles,
+      maxFileSize: () => t.maxFileSize,
+      disabled: () => t.disabled,
+      onAdd: (l) => o("add", l),
+      onRemove: (l) => o("remove", l),
+      onReject: (l) => o("reject", l)
+    }), $ = h(() => [
+      "file-upload-inline",
+      { "file-upload-inline--disabled": t.disabled }
+    ]);
+    function B() {
+      t.disabled || p.value?.click();
+    }
+    function R(l) {
+      const d = l.target;
+      d.files && I(Array.from(d.files)), d.value = "";
+    }
+    function M(l) {
+      o("preview", l), t.preview && (b.value = l, s.value = !0);
+    }
+    return (l, d) => (n(), c("div", f({
+      class: $.value,
+      role: "group",
+      "aria-label": e.ariaLabel ?? e.placeholder
+    }, { ...l.$attrs, ...i(r)("root") }), [
+      (n(!0), c(j, null, A(u.value, (a) => (n(), v(i(E), {
+        key: a.id,
+        size: "mini",
+        file: a,
+        disabled: e.disabled,
+        "test-id": e.testId ? `${e.testId}-file-${a.id}` : void 0,
+        onOpen: (S) => M(a),
+        onRemove: (S) => i(F)(a)
+      }, null, 8, ["file", "disabled", "test-id", "onOpen", "onRemove"]))), 128)),
+      k("button", f({
+        type: "button",
+        class: "file-upload-inline__button",
+        disabled: e.disabled || i(D),
+        "aria-label": e.placeholder
+      }, i(r)("button"), { onClick: B }), [
+        (n(), v(L(e.icon ?? i(T)), { "aria-hidden": "true" }))
+      ], 16, H),
+      u.value.length ? x("", !0) : (n(), c("span", f({
+        key: 0,
+        class: "file-upload-inline__placeholder"
+      }, i(r)("placeholder")), P(e.placeholder), 17)),
+      k("input", {
+        id: C.value,
+        ref_key: "inputRef",
+        ref: p,
+        type: "file",
+        class: "file-upload-inline__input",
+        tabindex: "-1",
+        "aria-hidden": "true",
+        name: e.name,
+        accept: e.accept,
+        multiple: e.multiple,
+        disabled: e.disabled,
+        onChange: R
+      }, null, 40, J),
+      e.preview ? (n(), v(i(N), {
+        key: 1,
+        open: s.value,
+        "onUpdate:open": d[0] || (d[0] = (a) => s.value = a),
+        file: b.value,
+        "delete-text": e.previewDeleteText,
+        "breakpoint-mobile": e.breakpointMobile,
+        "test-id": e.testId ? `${e.testId}-preview` : void 0,
+        onDelete: i(F)
+      }, null, 8, ["open", "file", "delete-text", "breakpoint-mobile", "test-id", "onDelete"])) : x("", !0)
+    ], 16, G));
+  }
+});
+export {
+  _ as default
+};

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

@@ -0,0 +1,4 @@
+import { default as FileUpload } from './FileUpload.vue';
+import { default as FileUploadInline } from './FileUploadInline.vue';
+export type { FileUploadEmits, FileUploadInlineProps, FileUploadProps, FileUploadRejection, FileUploadRejectReason } from './FileUpload.types';
+export { FileUpload, FileUploadInline };