@opengis/cms 0.0.56 → 0.0.58

package/dist/vs-form-media-select-NY27EaG1.js

@@ -0,0 +1,837 @@
+import { openBlock as o, createElementBlock as p, normalizeClass as S, unref as c, toDisplayString as d, ref as y, onMounted as xe, onUpdated as Te, createVNode as b, createElementVNode as s, createCommentVNode as z, Fragment as Z, renderList as oe, withModifiers as V, createBlock as k, resolveComponent as Pe, createTextVNode as G, mergeModels as ge, useModel as Ie, computed as R, watch as X, mergeProps as Se, withCtx as He, Teleport as be, normalizeStyle as Le, withDirectives as Ne, vModelText as Ee } from "vue";
+import { File as Oe, Trash2 as J, Folder as we, FileText as Ve, ChevronRight as ye, GripVertical as qe, Download as ae, Loader2 as le, Plus as fe, Image as Ue, Search as Re, ChevronDown as Ge, LayoutGrid as Ze, List as We } from "lucide-vue-next";
+import { d as Ke } from "./vuedraggable-CoAPPFYd.js";
+import { confirm as Qe } from "@opengis/core";
+import { useI18n as ne } from "vue-i18n";
+import { _ as ie } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import { useRoute as Xe, useRouter as Je } from "vue-router";
+function ke(u) {
+  if (u === 0)
+    return "0 Bytes";
+  const h = 1024, _ = ["Bytes", "KB", "MB", "GB", "TB"], w = Math.floor(Math.log(u) / Math.log(h));
+  return Number.parseFloat((u / Math.pow(h, w)).toFixed(2)) + " " + _[w];
+}
+function Ye(u) {
+  const h = new Date(u);
+  return isNaN(h.getTime()) ? "" : h.toISOString().slice(0, 10);
+}
+const et = {
+  __name: "TypeTag",
+  props: {
+    type: {
+      type: String,
+      required: !0
+    }
+  },
+  setup(u) {
+    const h = /* @__PURE__ */ new Map([
+      ["document", "bg-blue-100 text-blue-800 border-blue-200 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-700"],
+      ["image", "bg-green-100 text-green-800 border-green-200 dark:bg-green-900/30 dark:text-green-300 dark:border-green-700"],
+      ["video", "bg-purple-100 text-purple-800 border-purple-200 dark:bg-purple-900/30 dark:text-purple-300 dark:border-purple-700"]
+    ]);
+    return (_, w) => (o(), p("div", {
+      class: S(["inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors shadow-lg backdrop-blur-sm", c(h).get(u.type)])
+    }, d(u.type), 3));
+  }
+}, tt = { class: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 max-h-[calc(100%-130px)] overflow-y-auto px-2 pt-2 pb-5" }, st = {
+  key: 0,
+  class: "flex flex-col items-center justify-center h-64 text-muted-foreground col-span-full"
+}, at = ["onClick"], lt = ["onClick"], rt = { class: "truncate font-medium text-slate-800 dark:text-slate-100 mb-2" }, ot = { class: "text-sm text-slate-500 dark:text-slate-400" }, nt = ["onClick"], it = { class: "p-0" }, dt = { class: "aspect-video bg-slate-100 dark:bg-slate-700 rounded-t-lg overflow-hidden relative" }, ut = { class: "w-full h-full flex items-center justify-center bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-700 dark:to-slate-800" }, ct = {
+  key: 0,
+  class: "relative w-full"
+}, pt = ["src", "alt"], vt = { class: "p-4" }, ht = { class: "flex items-center justify-between mb-2" }, mt = { class: "font-medium text-slate-800 dark:text-slate-100 truncate flex-1 mr-2" }, gt = { class: "space-y-1 text-sm text-slate-500 dark:text-slate-400" }, bt = { class: "flex justify-between" }, yt = { class: "flex justify-between" }, ft = {
+  __name: "MediaGrid",
+  props: {
+    files: {
+      type: Array,
+      required: !0
+    },
+    selectedFile: {
+      type: Object,
+      default: null
+    },
+    selectedFiles: {
+      type: Array,
+      default: () => []
+    },
+    isDeleteButton: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["delete-file", "file-click", "delete-folder"],
+  setup(u, { emit: h }) {
+    ne();
+    const _ = u, w = y([]), M = y(null), i = (g) => {
+      if (!g)
+        return "";
+      const m = new Date(g);
+      return isNaN(m.getTime()) ? "" : m.toISOString().slice(0, 10);
+    }, $ = () => {
+      w.value = _.files.sort((g, m) => g.type === "dir" && m.type !== "dir" ? -1 : g.type !== "dir" && m.type === "dir" ? 1 : 0);
+    };
+    return xe(() => $()), Te(() => $()), (g, m) => {
+      var v;
+      return o(), p("div", tt, [
+        ((v = u.files) == null ? void 0 : v.length) === 0 ? (o(), p("div", st, [
+          b(c(Oe), { class: "w-12 h-12 mb-2" }),
+          s("p", null, d(g.$t("cms.noFilesInFolder")), 1)
+        ])) : z("", !0),
+        (o(!0), p(Z, null, oe(w.value, (e) => {
+          var H;
+          return o(), p(Z, {
+            key: e == null ? void 0 : e.url
+          }, [
+            (e == null ? void 0 : e.type) === "dir" ? (o(), p("div", {
+              key: 0,
+              class: "p-6 text-center rounded-xl h-[fit-content] relative text-card-foreground shadow-lg border-0 bg-white dark:bg-slate-800 backdrop-blur-sm hover:shadow-xl transition-all duration-200 transform hover:scale-105 cursor-pointer",
+              onClick: (D) => g.$emit("file-click", e)
+            }, [
+              u.isDeleteButton ? (o(), p("div", {
+                key: 0,
+                onClick: V((D) => {
+                  M.value = e;
+                }, ["stop"]),
+                class: "absolute top-4 right-4 p-1 border border-gray-300 dark:border-slate-700 rounded-lg cursor-pointer hover:bg-gray-200 dark:hover:bg-slate-700 group"
+              }, [
+                b(c(J), { class: "w-4 h-4 text-gray-500 group-hover:text-red-500" })
+              ], 8, lt)) : z("", !0),
+              b(c(we), { class: "w-16 h-16 mx-auto mb-4 text-blue-600" }),
+              s("h3", rt, d(e == null ? void 0 : e.name), 1),
+              s("p", ot, d(e == null ? void 0 : e.count) + " " + d(g.$t("cms.media.files")), 1)
+            ], 8, at)) : (e == null ? void 0 : e.type) === "file" ? (o(), p("div", {
+              key: 1,
+              class: S(["h-[fit-content] rounded-xl text-card-foreground shadow-lg border-0 bg-white dark:bg-slate-800 backdrop-blur-sm hover:shadow-xl transition-all duration-200 transform hover:scale-105 group cursor-pointer", {
+                "bg-accent text-accent-foreground ring-2 ring-primary": ((H = u.selectedFile) == null ? void 0 : H.url) === (e == null ? void 0 : e.url) || u.selectedFiles && u.selectedFiles.some((D) => D.id === e.id)
+              }]),
+              onClick: (D) => g.$emit("file-click", e)
+            }, [
+              s("div", it, [
+                s("div", dt, [
+                  s("div", ut, [
+                    (e == null ? void 0 : e.filetype) === "image" && (e != null && e.filepath || e != null && e.url) ? (o(), p("div", ct, [
+                      s("img", {
+                        src: e == null ? void 0 : e.preview,
+                        alt: (e == null ? void 0 : e.alt) || (e == null ? void 0 : e.filename),
+                        class: "object-cover w-full h-full rounded text-xs"
+                      }, null, 8, pt)
+                    ])) : (o(), k(c(Ve), {
+                      key: 1,
+                      class: "w-12 h-12 text-gray-500"
+                    }))
+                  ])
+                ]),
+                s("div", vt, [
+                  s("div", ht, [
+                    s("h3", mt, d(e.filename), 1),
+                    b(et, {
+                      type: e == null ? void 0 : e.filetype
+                    }, null, 8, ["type"])
+                  ]),
+                  s("div", gt, [
+                    s("div", bt, [
+                      s("span", null, d(g.$t("cms.media.size")) + ":", 1),
+                      s("span", null, d(c(ke)(e.filesize)), 1)
+                    ]),
+                    s("div", yt, [
+                      s("span", null, d(g.$t("cms.media.uploaded")) + ":", 1),
+                      s("span", null, d(i(e.created_at)), 1)
+                    ])
+                  ])
+                ])
+              ])
+            ], 10, nt)) : z("", !0)
+          ], 64);
+        }), 128))
+      ]);
+    };
+  }
+}, xt = {}, wt = {
+  "aria-hidden": "true",
+  focusable: "false",
+  role: "img",
+  viewBox: "0 0 16 16",
+  width: "16",
+  height: "16",
+  fill: "currentColor"
+};
+function kt(u, h) {
+  return o(), p("svg", wt, [...h[0] || (h[0] = [
+    s("path", { d: "M.513 1.513A1.75 1.75 0 0 1 1.75 1h3.5c.55 0 1.07.26 1.4.7l.9 1.2a.25.25 0 0 0 .2.1H 13a1 1 0 0 1 1 1v.5H2.75a.75.75 0 0 0 0 1.5h11.978a1 1 0 0 1 .994 1.117L15 13.25A1.75 1.75 0 0 1 13.25 15H1.75A1.75 1.75 0 0 1 0 13.25V2.75c0-.464.184-.91.513-1.237Z" }, null, -1),
+    s("path", { d: "M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z" }, null, -1)
+  ])]);
+}
+const _t = /* @__PURE__ */ ie(xt, [["render", kt]]), $t = {}, Ct = {
+  "aria-hidden": "true",
+  focusable: "false",
+  role: "img",
+  viewBox: "0 0 16 16",
+  width: "16",
+  height: "16",
+  fill: "currentColor"
+};
+function Ft(u, h) {
+  return o(), p("svg", Ct, [...h[0] || (h[0] = [
+    s("path", { d: "M.513 1.513A1.75 1.75 0 0 1 1.75 1h3.5c.55 0 1.07.26 1.4.7l.9 1.2a.25.25 0 0 0 .2.1H 13a1 1 0 0 1 1 1v.5H2.75a.75.75 0 0 0 0 1.5h11.978a1 1 0 0 1 .994 1.117L15 13.25A1.75 1.75 0 0 1 13.25 15H1.75A1.75 1.75 0 0 1 0 13.25V2.75c0-.464.184-.91.513-1.237Z" }, null, -1),
+    s("path", { d: "M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z" }, null, -1)
+  ])]);
+}
+const At = /* @__PURE__ */ ie($t, [["render", Ft]]), jt = {
+  key: 0,
+  class: "flex flex-col items-center justify-center h-64 text-muted-foreground"
+}, Bt = {
+  key: 1,
+  class: "w-full text-sm caption-bottom"
+}, zt = { class: "[&_tr]:border-b" }, Mt = { class: "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted" }, Dt = { class: "h-12 px-4 text-left align-middle font-medium text-muted-foreground w-[300px]" }, Tt = { class: "h-12 px-4 font-medium text-left align-middle text-muted-foreground" }, Pt = { class: "h-12 px-4 font-medium text-left align-middle text-muted-foreground" }, It = { class: "hidden h-12 px-4 font-medium text-left align-middle text-muted-foreground md:table-cell" }, St = { class: "[&_tr:last-child]:border-0" }, Ht = ["onClick"], Lt = { class: "p-4 font-medium align-middle" }, Nt = { class: "flex items-center gap-2" }, Et = {
+  key: 1,
+  class: "relative w-8 h-8"
+}, Ot = ["src", "alt"], Vt = { class: "truncate max-w-[200px]" }, qt = { class: "p-4 align-middle" }, Ut = { class: "p-4 align-middle" }, Rt = { class: "hidden p-4 align-middle md:table-cell" }, Gt = { key: 0 }, Zt = {
+  __name: "MediaList",
+  props: {
+    files: {
+      type: Array,
+      required: !0
+    },
+    selectedFile: {
+      type: Object,
+      default: null
+    },
+    selectedFiles: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ["file-click", "delete-folder"],
+  setup(u, { emit: h }) {
+    const { t: _ } = ne(), w = y(null), M = h, i = () => {
+      Qe({
+        title: _("cms.builder.deleteTitle"),
+        message: _("cms.builder.deleteObject"),
+        type: "error",
+        onConfirm: () => {
+          $();
+        }
+      });
+    }, $ = () => {
+      M("delete-folder", w.value);
+    };
+    return (g, m) => {
+      const v = Pe("File");
+      return o(), p("div", null, [
+        u.files.length === 0 ? (o(), p("div", jt, [
+          b(v, { class: "w-12 h-12 mb-2" }),
+          s("p", null, d(g.$t("cms.media.noFilesInFolder")), 1)
+        ])) : (o(), p("table", Bt, [
+          s("thead", zt, [
+            s("tr", Mt, [
+              s("th", Dt, d(g.$t("cms.media.name")), 1),
+              s("th", Tt, d(g.$t("cms.media.type")), 1),
+              s("th", Pt, d(g.$t("cms.media.size")), 1),
+              s("th", It, d(g.$t("cms.media.updatedAt")), 1),
+              m[0] || (m[0] = s("th", null, null, -1))
+            ])
+          ]),
+          s("tbody", St, [
+            (o(!0), p(Z, null, oe(u.files, (e) => {
+              var H, D, q, A, L;
+              return o(), p("tr", {
+                key: e.id,
+                class: S(["border-b transition-colors hover:bg-blue-200/50 data-[state=selected]:bg-muted cursor-pointer", {
+                  "bg-blue-200": ((H = w.value) == null ? void 0 : H.id) === e.id && ((D = w.value) == null ? void 0 : D.type) === e.type || u.selectedFiles && u.selectedFiles.some((j) => j.id === e.id && j.type === e.type)
+                }]),
+                onClick: (j) => g.$emit("file-click", e)
+              }, [
+                s("td", Lt, [
+                  s("div", Nt, [
+                    e.type === "dir" ? (o(), k(_t, {
+                      key: 0,
+                      class: "w-5 h-5 text-blue-500"
+                    })) : (e == null ? void 0 : e.filetype) === "image" && (e != null && e.filepath) ? (o(), p("div", Et, [
+                      s("img", {
+                        src: e == null ? void 0 : e.preview,
+                        alt: (e == null ? void 0 : e.alt) || (e == null ? void 0 : e.filename),
+                        class: "object-cover w-full h-full rounded"
+                      }, null, 8, Ot)
+                    ])) : (e == null ? void 0 : e.filetype) === "image" ? (o(), k(At, {
+                      key: 2,
+                      class: "w-5 h-5 text-green-500"
+                    })) : (o(), k(v, {
+                      key: 3,
+                      class: "w-5 h-5 text-gray-500"
+                    })),
+                    s("span", Vt, d((e == null ? void 0 : e.filename) || (e == null ? void 0 : e.name)), 1)
+                  ])
+                ]),
+                s("td", qt, d((e == null ? void 0 : e.type) === "dir" ? g.$t("cms.media.folder") : ((A = (q = e == null ? void 0 : e.filetype) == null ? void 0 : q.charAt(0)) == null ? void 0 : A.toUpperCase()) + ((L = e == null ? void 0 : e.filetype) == null ? void 0 : L.slice(1))), 1),
+                s("td", Ut, d((e == null ? void 0 : e.type) === "dir" ? "--" : c(ke)(e == null ? void 0 : e.filesize)), 1),
+                s("td", Rt, d(e != null && e.updated_at ? c(Ye)(e == null ? void 0 : e.updated_at) : "--"), 1),
+                e.type === "dir" ? (o(), p("td", Gt, [
+                  b(c(J), {
+                    class: "w-4 h-4 text-red-500 cursor-pointer",
+                    onClick: V(i, ["stop"])
+                  }, null, 8, ["onClick"])
+                ])) : z("", !0)
+              ], 10, Ht);
+            }), 128))
+          ])
+        ]))
+      ]);
+    };
+  }
+}, Wt = {}, Kt = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "20",
+  height: "20",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+};
+function Qt(u, h) {
+  return o(), p("svg", Kt, [...h[0] || (h[0] = [
+    s("path", { d: "m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }, null, -1),
+    s("polyline", { points: "9 22 9 12 15 12 15 22" }, null, -1)
+  ])]);
+}
+const Xt = /* @__PURE__ */ ie(Wt, [["render", Qt]]), Jt = { class: "flex items-center space-x-1" }, Yt = ["onClick"], es = {
+  __name: "MediaBreadcrumb",
+  props: {
+    currentPath: {
+      type: Array,
+      required: !0
+    }
+  },
+  emits: ["navigate"],
+  setup(u) {
+    return (h, _) => (o(), p("div", Jt, [
+      s("button", {
+        class: "flex gap-x-1 items-center px-2 py-1 rounded text-sm font-medium transition-all duration-200 text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20",
+        onClick: _[0] || (_[0] = (w) => h.$emit("navigate", []))
+      }, [
+        b(Xt, { class: "w-3 h-3" }),
+        G(" " + d(h.$t("cms.media.mediaLibrary")), 1)
+      ]),
+      u.currentPath.length > 0 ? (o(), k(c(ye), {
+        key: 0,
+        class: "w-3 h-3 text-slate-400 dark:text-slate-500"
+      })) : z("", !0),
+      (o(!0), p(Z, null, oe(u.currentPath, (w, M) => (o(), p("button", {
+        key: M,
+        class: "flex gap-x-1 items-center px-2 py-1 rounded text-sm font-medium transition-all duration-200 text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-900/20",
+        onClick: (i) => h.$emit("navigate", u.currentPath.slice(0, M + 1))
+      }, [
+        b(c(we), { class: "w-3 h-3" }),
+        G(" " + d(w) + " ", 1),
+        M < u.currentPath.length - 1 ? (o(), k(c(ye), {
+          key: 0,
+          class: "w-3 h-3 text-slate-400 dark:text-slate-500"
+        })) : z("", !0)
+      ], 8, Yt))), 128))
+    ]));
+  }
+}, ts = { class: "relative group" }, ss = {
+  class: "absolute top-1 left-1 z-20 p-1.5 rounded bg-white/90 dark:bg-slate-700/90 shadow cursor-grab active:cursor-grabbing opacity-0 group-hover:opacity-100 transition-opacity drag-handle",
+  title: "Перетягніть для зміни порядку"
+}, as = ["src"], ls = { class: "absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity rounded-lg gap-2" }, rs = ["onClick"], os = ["onClick"], ns = ["title"], is = {
+  key: 1,
+  class: "relative group"
+}, ds = ["src"], us = { class: "absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity rounded-lg gap-2" }, cs = ["title"], ps = {
+  key: 2,
+  class: "absolute inset-0 bg-white bg-opacity-75 flex items-center justify-center rounded-lg z-10"
+}, vs = { class: "flex flex-col items-center gap-2" }, hs = { class: "text-xs text-gray-600" }, ms = ["multiple", "disabled"], gs = { class: "whitespace-nowrap text-sm" }, bs = { class: "whitespace-nowrap text-sm" }, ys = { class: "flex items-center justify-between p-4 border-b" }, fs = { class: "text-lg font-semibold" }, xs = { class: "flex items-center justify-between gap-4 p-4 border-b" }, ws = { class: "relative z-[1] rounded-xl text-card-foreground shadow-lg border-0 bg-white dark:bg-slate-800 backdrop-blur-sm mb-6 p-4 mx-4" }, ks = { class: "flex items-center justify-between gap-4" }, _s = { class: "flex items-center gap-4 flex-1" }, $s = { class: "relative flex-1 max-w-md" }, Cs = ["placeholder"], Fs = { class: "flex items-center gap-2 relative" }, As = { class: "text-xs font-bold" }, js = { class: "text-xs font-bold" }, Bs = {
+  key: 0,
+  class: "w-full absolute top-full left-1/2 transform -translate-x-1/2 mt-2 z-50 bg-white dark:bg-slate-700 flex flex-col items-start border border-slate-200 dark:border-slate-600 rounded-md shadow-lg"
+}, zs = { class: "flex items-center gap-2" }, Ms = { class: "flex flex-col gap-4 overflow-y-auto p-4 flex-1" }, Ds = { class: "p-4 border-t flex items-center justify-between" }, Ts = {
+  key: 0,
+  class: "text-sm text-gray-600 dark:text-gray-400"
+}, Ps = { key: 1 }, Is = ["disabled"], Ss = 112, re = 10, Us = {
+  __name: "vs-form-media-select",
+  props: /* @__PURE__ */ ge({
+    multiple: {
+      type: Boolean,
+      default: !1
+    },
+    multi: {
+      type: Boolean,
+      default: !1
+    }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ ge(["change"], ["update:modelValue"]),
+  setup(u, { emit: h }) {
+    const { t: _ } = ne(), w = Xe(), M = Je(), i = Ie(u, "modelValue"), $ = h, g = u, m = R(() => g.multiple || g.multi), v = y(null), e = R(() => i.value || v.value), H = R(() => {
+      if (!m.value)
+        return [];
+      const t = e.value;
+      return t ? Array.isArray(t) ? t : [t] : [];
+    }), D = R({
+      get: () => H.value,
+      set: (t) => {
+        if (!t || !Array.isArray(t) || t.length === 0) {
+          i && (i.value = null), v.value = null, $("cms.change", null);
+          return;
+        }
+        const a = t.map((l) => typeof l == "string" ? l : (l == null ? void 0 : l.filepath) || (l == null ? void 0 : l.file_path) || l), r = t.map(
+          (l) => typeof l == "object" ? l : v.value && Array.isArray(v.value) ? v.value.find((n) => U(n) === l) ?? l : l
+        );
+        i && (i.value = a), v.value = r, $("cms.change", a);
+      }
+    }), q = R(() => e.value ? typeof e.value == "object" ? e.value.filename || e.value.file_name || e.value.native_file_name || "File" : typeof e.value == "string" ? e.value.split("cms./").pop() || e.value : "File" : ""), A = y(!1), L = y(!1), j = y("grid"), I = y([]), T = y([]), N = y([]), f = y(), C = y([]), Y = y(null), P = y(!1), W = y(null), ee = y(null), de = y({}), E = y(""), O = y(!1), K = y("name"), _e = /* @__PURE__ */ new Map([
+      ["name", _("cms.media.sortBy.name")],
+      ["filesize", _("cms.media.sortBy.filesize")]
+    ]), U = (t) => typeof t == "string" ? t : (t == null ? void 0 : t.filepath) || (t == null ? void 0 : t.file_path) || t, ue = (t) => t ? typeof t == "string" ? t.split("cms./").pop() || t : t.filename || t.file_name || t.native_file_name || "File" : "", $e = (t) => typeof t == "string" ? t : (t == null ? void 0 : t.preview) || `/file/resize?filepath=${U(t)}&h=137&quality=75`, Ce = () => {
+      Y.value && Y.value.click();
+    }, Fe = () => {
+      A.value = !A.value, A.value && Ae();
+    }, Ae = () => {
+      if (W.value) {
+        const t = W.value.getBoundingClientRect(), a = window.innerHeight - t.bottom, r = t.top, l = a >= Ss + re || a >= r;
+        de.value = {
+          top: l ? `${t.bottom + re}px` : "auto",
+          bottom: l ? "auto" : `${window.innerHeight - t.top + re}px`,
+          left: `${t.left + t.width / 2}px`,
+          transform: "translateX(-50%)",
+          width: "200px"
+        };
+      }
+    }, ce = (t) => {
+      var a;
+      if (t.type === "dir")
+        pe([...I.value, t.name]);
+      else if (m.value) {
+        const r = C.value.findIndex((l) => l.id === t.id);
+        r >= 0 ? C.value.splice(r, 1) : C.value.push(t);
+      } else
+        f.value = t.id === ((a = f.value) == null ? void 0 : a.id) ? null : t;
+    }, Q = (t) => {
+      K.value = t, O.value = !1, T.value = T.value.sort((a, r) => {
+        var l;
+        if ((a == null ? void 0 : a.type) === "dir")
+          return -1;
+        if (t === "name")
+          return (l = a == null ? void 0 : a.name) == null ? void 0 : l.localeCompare(r == null ? void 0 : r.name);
+        if (t === "filesize")
+          return (r == null ? void 0 : r.filesize) - (a == null ? void 0 : a.filesize);
+      });
+    }, je = async () => {
+      try {
+        const t = I.value.join("/"), r = await (await fetch(`/api/cms-media?subdir=${t}${E.value ? "&search=" + E.value : ""}`, {
+          method: "GET"
+        })).json();
+        r.data ? (T.value = r.data.map((l) => ({
+          ...l,
+          id: l.type === "dir" ? `dir-${l.name}` : l.id,
+          preview: `/file/resize?filepath=${l.filepath}&h=137&quality=75`
+        })), Q(K.value)) : T.value = [];
+      } catch (t) {
+        console.error("Search error:", t), T.value = [];
+      }
+    }, Be = () => {
+      if (m.value) {
+        if (C.value.length > 0) {
+          const t = Array.isArray(i.value) ? [...i.value] : i.value ? [i.value] : [], a = Array.isArray(v.value) ? [...v.value] : v.value ? [v.value] : [];
+          C.value.forEach((r) => {
+            const l = r.filepath || r.file_path;
+            t.some((n) => (typeof n == "string" ? n : (n == null ? void 0 : n.filepath) || (n == null ? void 0 : n.file_path)) === l) || (t.push(l), a.push(r));
+          }), i && (i.value = t), v.value = a, $("cms.change", t), C.value = [];
+        }
+      } else if (f.value) {
+        const t = f.value.filepath || f.value.file_path;
+        i && (i.value = t), v.value = f.value, $("cms.change", t), f.value = null;
+      }
+      te();
+    }, te = () => {
+      L.value = !1;
+    }, pe = (t) => {
+      I.value = t, N.value = [...N.value, t], f.value = null, m.value && (C.value = []), se();
+    }, ze = () => {
+      N.value.length > 1 && (N.value.pop(), I.value = N.value[N.value.length - 1], f.value = null, m.value && (C.value = []), se());
+    }, se = async () => {
+      try {
+        const t = I.value.join("/"), r = await (await fetch(`/api/cms-media?subdir=${t}${E.value ? "&search=" + E.value : ""}`, {
+          method: "GET"
+        })).json();
+        r.data ? (T.value = r.data.map((l) => ({
+          ...l,
+          id: l.type === "dir" ? `dir-${l.name}` : l.id,
+          preview: `/file/resize?filepath=${l.filepath}&h=137&quality=75`
+        })), Q(K.value)) : T.value = [];
+      } catch (t) {
+        console.error("Fetch error:", t), T.value = [];
+      }
+    }, ve = async (t, a) => {
+      try {
+        const r = typeof t == "string" ? t : U(t);
+        if (await fetch(`/file/delete${r}`), m.value) {
+          const l = Array.isArray(i.value) ? [...i.value] : [], n = Array.isArray(v.value) ? [...v.value] : [];
+          if (a !== void 0 && a >= 0)
+            l.splice(a, 1), n.splice(a, 1);
+          else {
+            const x = l.findIndex((F) => (typeof F == "string" ? F : (F == null ? void 0 : F.filepath) || (F == null ? void 0 : F.file_path)) === r);
+            x >= 0 && (l.splice(x, 1), n.splice(x, 1));
+          }
+          i && (i.value = l.length > 0 ? l : null), v.value = n.length > 0 ? n : null, $("cms.change", l.length > 0 ? l : null);
+        } else
+          i && (i.value = null), v.value = null, $("cms.change", null);
+        return !0;
+      } catch (r) {
+        return console.error(r), !1;
+      }
+    }, he = async (t) => {
+      try {
+        const a = await fetch(`/file/download/files/uploads${t}`), r = await a.arrayBuffer(), l = a.headers["content-type"], n = new TextDecoder("utf-8").decode(r), x = new Blob([n], { type: l }), F = document.createElement("cms.a");
+        F.setAttribute("download", t), F.href = window.URL.createObjectURL(x), F.click();
+      } catch (a) {
+        console.error(a.message);
+      }
+    }, Me = async (t) => {
+      if (!t.target.files || t.target.files.length === 0)
+        return;
+      const a = Array.from(t.target.files);
+      P.value = !0;
+      try {
+        const r = [];
+        for (const l of a) {
+          const n = new FormData();
+          n.append("file", l);
+          const x = await fetch("/file/upload/uploads?id=1&form=form&table=table", {
+            method: "POST",
+            body: n
+          });
+          if (!x.ok)
+            throw new Error(`Upload failed: ${x.status}`);
+          const B = (await x.json()).result, De = {
+            file_id: B.file_id,
+            file_name: B.file_name,
+            file_path: B.file_path,
+            filepath: B.file_path,
+            // Для сумісності
+            format: B.format,
+            size: B.size,
+            entity_id: B.entity_id,
+            dir: B.dir,
+            native_file_name: B.native_file_name,
+            preview: `/file/resize?filepath=${B.file_path}&h=137&quality=75`
+          };
+          r.push(De);
+        }
+        if (m.value) {
+          const l = Array.isArray(i.value) ? [...i.value] : i.value ? [i.value] : [], n = Array.isArray(v.value) ? [...v.value] : v.value ? [v.value] : [];
+          r.forEach((x) => {
+            l.push(x.file_path), n.push(x);
+          }), i && (i.value = l), v.value = n, $("cms.change", l);
+        } else {
+          const l = r[0];
+          i && (i.value = l.file_path), v.value = l, $("cms.change", l.file_path);
+        }
+        A.value = !1;
+      } catch (r) {
+        console.error("Upload error:", r), alert("cms.Помилка завантаження файлу: " + r.message);
+      } finally {
+        P.value = !1;
+      }
+      t.target.value = "";
+    };
+    X(L, (t) => {
+      t && se();
+    }), X(I, (t) => {
+      t.length > 0 ? M.push({ query: { path: t.join("/") } }) : M.push({ query: { path: void 0 } });
+    });
+    let me;
+    return X(E, (t) => {
+      clearTimeout(me), me = setTimeout(() => {
+        je();
+      }, 500);
+    }), X(i, (t) => {
+      var a, r, l, n;
+      if (t && typeof t == "object") {
+        const x = ((a = f.value) == null ? void 0 : a.filepath) || ((r = f.value) == null ? void 0 : r.file_path);
+        t.filepath !== x && t.file_path !== x && (f.value = null);
+      } else if (t && typeof t == "string") {
+        const x = ((l = f.value) == null ? void 0 : l.filepath) || ((n = f.value) == null ? void 0 : n.file_path);
+        t !== x && (f.value = null);
+      }
+    }), xe(() => {
+      var a, r;
+      I.value = ((r = (a = w.query) == null ? void 0 : a.path) == null ? void 0 : r.split("cms./")) || [], N.value = [[]], i.value || (f.value = null);
+      const t = (l) => {
+        var n;
+        A.value && !((n = W.value) != null && n.contains(l.target)) && (A.value = !1), O.value && ee.value && !ee.value.contains(l.target) && (O.value = !1);
+      };
+      document.addEventListener("click", t);
+    }), (t, a) => (o(), p(Z, null, [
+      s("div", Se(t.$attrs, { class: "flex gap-4 flex-wrap" }), [
+        m.value ? (o(), k(c(Ke), {
+          key: 0,
+          modelValue: D.value,
+          "onUpdate:modelValue": a[0] || (a[0] = (r) => D.value = r),
+          "item-key": (r) => U(r),
+          handle: ".drag-handle",
+          class: S(["flex gap-4 flex-wrap", t.$attrs.class])
+        }, {
+          item: He(({ element: r, index: l }) => [
+            s("div", ts, [
+              s("div", ss, [
+                b(c(qe), { class: "w-4 h-4 text-gray-500 dark:text-slate-400" })
+              ]),
+              s("img", {
+                src: $e(r),
+                alt: "Selected File",
+                class: "w-32 h-32 object-cover rounded-lg"
+              }, null, 8, as),
+              s("div", ls, [
+                s("button", {
+                  type: "button",
+                  onClick: (n) => ve(r, l),
+                  class: "p-2 rounded-full bg-red-500 text-white hover:bg-red-600 transition-colors"
+                }, [
+                  b(c(J), { class: "w-4 h-4" })
+                ], 8, rs),
+                s("button", {
+                  type: "button",
+                  onClick: (n) => he(U(r)),
+                  class: "p-2 rounded-full bg-blue-500 text-white hover:bg-blue-600 transition-colors"
+                }, [
+                  b(c(ae), { class: "w-4 h-4" })
+                ], 8, os)
+              ]),
+              s("div", {
+                class: "absolute bottom-full left-0 mb-2 px-3 py-1.5 bg-gray-900 text-white text-xs rounded-lg opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap z-10 max-w-[200px] truncate",
+                title: ue(r)
+              }, [
+                G(d(ue(r)) + " ", 1),
+                a[13] || (a[13] = s("div", { class: "absolute top-full left-4 border-4 border-transparent border-t-gray-900" }, null, -1))
+              ], 8, ns)
+            ])
+          ]),
+          _: 1
+        }, 8, ["modelValue", "item-key", "class"])) : e.value ? (o(), p("div", is, [
+          s("img", {
+            src: e.value.preview || e.value,
+            alt: "Selected File",
+            class: "w-32 h-32 object-cover rounded-lg"
+          }, null, 8, ds),
+          s("div", us, [
+            s("button", {
+              type: "button",
+              onClick: a[1] || (a[1] = (r) => {
+                var l, n;
+                return ve(((l = e.value) == null ? void 0 : l.filepath) || ((n = e.value) == null ? void 0 : n.file_path) || e.value);
+              }),
+              class: "p-2 rounded-full bg-red-500 text-white hover:bg-red-600 transition-colors"
+            }, [
+              b(c(J), { class: "w-4 h-4" })
+            ]),
+            s("button", {
+              type: "button",
+              onClick: a[2] || (a[2] = (r) => {
+                var l, n;
+                return he(((l = e.value) == null ? void 0 : l.filepath) || ((n = e.value) == null ? void 0 : n.file_path) || e.value);
+              }),
+              class: "p-2 rounded-full bg-blue-500 text-white hover:bg-blue-600 transition-colors"
+            }, [
+              b(c(ae), { class: "w-4 h-4" })
+            ])
+          ]),
+          s("div", {
+            class: "absolute bottom-full left-0 mb-2 px-3 py-1.5 bg-gray-900 text-white text-xs rounded-lg opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap z-10 max-w-[200px] truncate",
+            title: q.value
+          }, [
+            G(d(q.value) + " ", 1),
+            a[14] || (a[14] = s("div", { class: "absolute top-full left-4 border-4 border-transparent border-t-gray-900" }, null, -1))
+          ], 8, cs)
+        ])) : z("", !0),
+        s("div", {
+          ref_key: "triggerButton",
+          ref: W,
+          class: S(["relative w-32 h-32 flex items-center justify-center border border-dotted border-gray-300 rounded-lg hover:border-blue-500 hover:bg-blue-500/10 hover:cursor-pointer transition-all", { "border-blue-500 bg-blue-500/10": A.value, "opacity-50 cursor-not-allowed": P.value }]),
+          onClick: Fe
+        }, [
+          P.value ? (o(), k(c(le), {
+            key: 0,
+            class: "w-4 h-4 animate-spin text-blue-500"
+          })) : (o(), k(c(fe), {
+            key: 1,
+            class: "w-4 h-4"
+          })),
+          P.value ? (o(), p("div", ps, [
+            s("div", vs, [
+              b(c(le), { class: "w-6 h-6 animate-spin text-blue-500" }),
+              s("span", hs, d(t.$t("cms.media.uploading")), 1)
+            ])
+          ])) : z("", !0),
+          (o(), k(be, { to: "body" }, [
+            A.value ? (o(), p("div", {
+              key: 0,
+              class: "fixed bg-white z-[100001] border border-gray-200 rounded-lg shadow-lg flex flex-col items-center justify-center",
+              style: Le(de.value)
+            }, [
+              s("div", {
+                class: S(["relative overflow-hidden flex justify-start items-center w-full gap-2 p-4 hover:bg-blue-50 text-blue-700 border hover:border-blue-200 dark:bg-slate-700 dark:text-slate-100 hover:cursor-pointer", { "opacity-50 cursor-not-allowed": P.value }]),
+                onClick: a[4] || (a[4] = (r) => !P.value && Ce())
+              }, [
+                s("input", {
+                  type: "file",
+                  ref_key: "fileInput",
+                  ref: Y,
+                  class: "absolute justify-center bottom-0 left-0 w-full opacity-0",
+                  onChange: Me,
+                  onClick: a[3] || (a[3] = V(() => {
+                  }, ["stop"])),
+                  multiple: m.value,
+                  disabled: P.value
+                }, null, 40, ms),
+                P.value ? (o(), k(c(le), {
+                  key: 0,
+                  class: "w-4 h-4 animate-spin"
+                })) : (o(), k(c(ae), { key: 1 })),
+                s("span", gs, d(P.value ? t.$t("cms.media.uploading") : t.$t("cms.media.upload")), 1)
+              ], 2),
+              s("div", {
+                onClick: a[5] || (a[5] = (r) => L.value = !0),
+                class: "flex justify-start items-center w-full gap-2 p-4 hover:bg-blue-50 text-blue-700 border hover:border-blue-200 dark:bg-slate-700 dark:text-slate-100 hover:cursor-pointer"
+              }, [
+                b(c(Ue)),
+                s("span", bs, d(t.$t("cms.media.selectFromMedia")), 1)
+              ])
+            ], 4)) : z("", !0)
+          ]))
+        ], 2)
+      ], 16),
+      (o(), k(be, { to: "body" }, [
+        L.value ? (o(), p("div", {
+          key: 0,
+          class: "fixed inset-0 z-[100001] flex items-center justify-center bg-black bg-opacity-50",
+          onClick: te
+        }, [
+          s("div", {
+            class: "bg-white rounded-lg shadow-xl max-w-4xl w-full mx-4 max-h-[90vh] flex flex-col",
+            onClick: a[12] || (a[12] = V(() => {
+            }, ["stop"]))
+          }, [
+            s("div", ys, [
+              s("h3", fs, d(t.$t("cms.media.selectFiles")), 1),
+              s("button", {
+                onClick: te,
+                class: "text-gray-400 hover:text-gray-600"
+              }, [...a[15] || (a[15] = [
+                s("svg", {
+                  class: "w-6 h-6",
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24"
+                }, [
+                  s("path", {
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round",
+                    "stroke-width": "2",
+                    d: "M6 18L18 6M6 6l12 12"
+                  })
+                ], -1)
+              ])])
+            ]),
+            s("div", xs, [
+              b(es, {
+                "current-path": I.value,
+                onNavigate: pe,
+                onNavigateBack: ze
+              }, null, 8, ["current-path"])
+            ]),
+            s("div", ws, [
+              s("div", ks, [
+                s("div", _s, [
+                  s("div", $s, [
+                    b(c(Re), { class: "absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400 dark:text-slate-500" }),
+                    Ne(s("input", {
+                      type: "text",
+                      placeholder: t.$t("cms.media.search"),
+                      class: "w-full pl-10 pr-4 py-2 text-sm border border-slate-200 dark:border-slate-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-slate-700 text-slate-700 dark:text-slate-200 placeholder-slate-400 dark:placeholder-slate-500",
+                      "onUpdate:modelValue": a[6] || (a[6] = (r) => E.value = r)
+                    }, null, 8, Cs), [
+                      [Ee, E.value]
+                    ])
+                  ]),
+                  s("div", Fs, [
+                    s("span", As, d(t.$t("cms.media.sortBy.title") + ": "), 1),
+                    s("button", {
+                      ref_key: "sortByButton",
+                      ref: ee,
+                      class: "relative z-[1000] inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-colors border shadow-sm h-8 rounded-md px-3 text-xs bg-white border-slate-300 text-slate-700 disabled:pointer-events-none disabled:opacity-50 hover:text-accent-foreground hover:bg-slate-50 dark:bg-slate-700 dark:border-slate-600 dark:text-slate-300 dark:hover:bg-slate-600",
+                      onClick: a[9] || (a[9] = (r) => O.value = !O.value)
+                    }, [
+                      b(c(Ge), { class: "w-4 h-4" }),
+                      s("span", js, d(c(_e).get(K.value)), 1),
+                      O.value ? (o(), p("div", Bs, [
+                        s("span", {
+                          class: "text-left text-xs font-bold w-full p-2 hover:bg-slate-100 dark:hover:bg-slate-600 border-b border-slate-200 dark:border-slate-600 cursor-pointer",
+                          onClick: a[7] || (a[7] = V((r) => Q("name"), ["stop"]))
+                        }, d(t.$t("cms.media.sortBy.name")), 1),
+                        s("span", {
+                          class: "text-left text-xs font-bold w-full p-2 hover:bg-slate-100 dark:hover:bg-slate-600 cursor-pointer",
+                          onClick: a[8] || (a[8] = V((r) => Q("filesize"), ["stop"]))
+                        }, d(t.$t("cms.media.sortBy.filesize")), 1)
+                      ])) : z("", !0)
+                    ], 512)
+                  ])
+                ]),
+                s("div", zs, [
+                  s("button", {
+                    class: S(["inline-flex items-center justify-center whitespace-nowrap font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 h-8 px-3 text-xs rounded-md", {
+                      "shadow bg-blue-600 hover:bg-blue-700 text-white": j.value === "grid",
+                      "border shadow-sm hover:text-accent-foreground bg-white dark:bg-slate-700 border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-600": j.value === "list"
+                    }]),
+                    onClick: a[10] || (a[10] = (r) => j.value = "grid")
+                  }, [
+                    b(c(Ze), { class: "w-4 h-4" })
+                  ], 2),
+                  s("button", {
+                    class: S(["inline-flex items-center justify-center whitespace-nowrap font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 h-8 px-3 text-xs rounded-md", {
+                      "shadow bg-blue-600 hover:bg-blue-700 text-white": j.value === "list",
+                      "border shadow-sm hover:text-accent-foreground bg-white dark:bg-slate-700 border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-600": j.value === "grid"
+                    }]),
+                    onClick: a[11] || (a[11] = (r) => j.value = "list")
+                  }, [
+                    b(c(We), { class: "w-4 h-4" })
+                  ], 2)
+                ])
+              ])
+            ]),
+            s("div", Ms, [
+              j.value === "grid" ? (o(), k(ft, {
+                key: 0,
+                files: T.value,
+                "selected-file": m.value ? null : f.value,
+                "selected-files": m.value ? C.value : [],
+                onFileClick: ce
+              }, null, 8, ["files", "selected-file", "selected-files"])) : (o(), k(Zt, {
+                key: 1,
+                files: T.value,
+                "selected-file": m.value ? null : f.value,
+                "selected-files": m.value ? C.value : [],
+                onFileClick: ce
+              }, null, 8, ["files", "selected-file", "selected-files"]))
+            ]),
+            s("div", Ds, [
+              m.value && C.value.length > 0 ? (o(), p("div", Ts, d(t.$t("cms.media.selectedFiles", { count: C.value.length })), 1)) : (o(), p("div", Ps)),
+              s("button", {
+                onClick: Be,
+                disabled: m.value ? C.value.length === 0 : !f.value,
+                class: "flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium disabled:pointer-events-none disabled:opacity-50 h-9 px-4 py-2 ml-auto bg-blue-600 hover:bg-blue-700 text-white shadow-md hover:shadow-lg transition-all duration-200 transform hover:scale-105"
+              }, [
+                b(c(fe), { class: "w-4 h-4 mr-2" }),
+                G(" " + d(t.$t("cms.common.actions.add")), 1)
+              ], 8, Is)
+            ])
+          ])
+        ])) : z("", !0)
+      ]))
+    ], 64));
+  }
+};
+export {
+  Us as default
+};