@milaboratories/uikit 2.10.26 → 2.10.28

package/dist/components/PlFileDialog/Remote.vue.js

@@ -1,18 +1,18 @@
-import { defineComponent as G, reactive as J, computed as h, watch as V, toRef as Q, onMounted as X, createElementBlock as d, openBlock as i, withModifiers as I, normalizeClass as n, unref as s, createElementVNode as c, createVNode as f, Fragment as g, renderList as K, createBlock as Y, createCommentVNode as Z, toDisplayString as v, withDirectives as L, createTextVNode as O } from "vue";
-import { useEventListener as ee } from "../../composition/useEventListener.js";
-import { notEmpty as A, between as te, tapIf as le } from "@milaboratories/helpers";
+import { defineComponent as J, reactive as Q, computed as p, watch as V, toRef as X, onMounted as Y, ref as Z, createElementBlock as d, openBlock as i, withModifiers as K, normalizeClass as n, unref as s, createElementVNode as c, createVNode as h, Fragment as g, renderList as L, createBlock as ee, createCommentVNode as te, toDisplayString as v, withDirectives as O, createTextVNode as A } from "vue";
+import { useEventListener as le } from "../../composition/useEventListener.js";
+import { notEmpty as M, between as ae, tapIf as se } from "@milaboratories/helpers";
 import { getRawPlatformaInstance as y } from "@platforma-sdk/model";
-import ae from "../PlDropdown/PlDropdown.vue.js";
-import b from "../PlIcon16/PlIcon16.vue.js";
-import se from "./Shortcuts.vue.js";
-import oe from "../PlSearchField/PlSearchField.vue.js";
+import oe from "../PlDropdown/PlDropdown.vue.js";
+import _ from "../PlIcon16/PlIcon16.vue.js";
+import re from "./Shortcuts.vue.js";
+import ne from "../PlSearchField/PlSearchField.vue.js";
 import r from "./pl-file-dialog.module.scss.js";
-import { defaultData as M, useVisibleItems as re, vTextOverflown as H } from "./remote.js";
-import { normalizeExtensions as ne, getFilePathBreadcrumbs as ie } from "./utils.js";
-const ce = ["title", "onClick"], de = {
+import { defaultData as R, useVisibleItems as ie, vTextOverflown as H } from "./remote.js";
+import { normalizeExtensions as ce, getFilePathBreadcrumbs as de } from "./utils.js";
+const ue = ["title", "onClick"], me = {
   key: 0,
   class: "ls-loader"
-}, me = ["onClick"], ue = ["title"], pe = ["onClick"], he = ["title"], _e = /* @__PURE__ */ G({
+}, fe = ["onClick"], pe = ["title"], he = ["onClick"], ve = ["title"], Be = /* @__PURE__ */ J({
   __name: "Remote",
   props: {
     modelValue: { type: Boolean },
@@ -23,64 +23,64 @@ const ce = ["title", "onClick"], de = {
     submit: {}
   },
   emits: ["update:modelValue", "import:files"],
-  setup(N, { expose: R }) {
-    const E = (e) => e.ctrlKey || e.metaKey, u = N, t = J(M()), k = () => {
+  setup(N, { expose: T }) {
+    const b = (e) => e.ctrlKey || e.metaKey, m = N, t = Q(R()), k = () => {
       t.search = "", t.error = "", t.lastSelected = void 0;
-    }, _ = h(() => ne(u.extensions)), S = re(t), T = h(() => {
+    }, E = p(() => ce(m.extensions)), S = ie(t), $ = p(() => {
       var e;
       return {
-        modelValue: u.modelValue,
+        modelValue: m.modelValue,
         dirPath: t.dirPath,
         storageHandle: (e = t.storageEntry) == null ? void 0 : e.handle
       };
-    }), $ = (e, l) => {
+    }), z = (e, l) => {
       y() && t.currentLoadingPath !== l && (t.currentLoadingPath = l, y().lsDriver.listFiles(e, l).then((a) => {
-        l === t.dirPath && (t.items = A(a).entries.map((o) => ({
+        l === t.dirPath && (t.items = M(a).entries.map((o) => ({
           path: o.fullPath,
           name: o.name,
           isDir: o.type === "dir",
-          canBeSelected: o.type === "file" && (!_.value || _.value.some((m) => o.fullPath.endsWith(m))),
+          canBeSelected: o.type === "file" && (!E.value || E.value.some((u) => o.fullPath.endsWith(u))),
           handle: o.type === "file" ? o.handle : void 0,
           selected: !1
-        })).sort((o, m) => o.isDir && !m.isDir ? -1 : !o.isDir && m.isDir ? 1 : o.name.localeCompare(m.name)).map((o, m) => ({ id: m, ...o })), t.lastSelected = void 0);
+        })).sort((o, u) => o.isDir && !u.isDir ? -1 : !o.isDir && u.isDir ? 1 : o.name.localeCompare(u.name)).map((o, u) => ({ id: u, ...o })), t.lastSelected = void 0);
       }).catch((a) => t.error = String(a)).finally(() => {
         t.currentLoadingPath = void 0;
       }));
-    }, z = () => {
+    }, U = () => {
       k();
-      const { storageHandle: e, dirPath: l, modelValue: a } = T.value;
-      e && a && $(e, l);
-    }, B = h(() => ie(t.dirPath)), P = h(
+      const { storageHandle: e, dirPath: l, modelValue: a } = $.value;
+      e && a && z(e, l);
+    }, C = p(() => de(t.dirPath)), P = p(
       () => t.items.filter((e) => e.canBeSelected && e.selected && !e.isDir)
-    ), U = h(() => {
+    ), W = p(() => {
       var e;
       return P.value.length > 0 && ((e = t.storageEntry) == null ? void 0 : e.handle);
-    }), W = () => {
+    }), j = () => {
       var e;
       return {
-        storageHandle: A((e = t.storageEntry) == null ? void 0 : e.handle),
+        storageHandle: M((e = t.storageEntry) == null ? void 0 : e.handle),
         files: P.value.map((l) => l.handle)
       };
-    }, x = (e) => {
+    }, B = (e) => {
       t.dirPath = e;
-    }, j = (e, l) => {
-      const { shiftKey: a } = e, o = E(e), { lastSelected: m } = t;
+    }, q = (e, l) => {
+      const { shiftKey: a } = e, o = b(e), { lastSelected: u } = t;
       e.preventDefault();
       const D = S.value;
       if (l.canBeSelected) {
-        if (u.multi || D.forEach((p) => p.selected = !1), l.selected = !l.selected, !u.multi)
+        if (m.multi || D.forEach((f) => f.selected = !1), l.selected = !l.selected, !m.multi)
           return;
-        !o && !a && D.forEach((p) => {
-          p.id !== l.id && (p.selected = !1);
-        }), a && m !== void 0 && D.forEach((p) => {
-          te(p.id, m, l.id) && (p.selected = !0);
+        !o && !a && D.forEach((f) => {
+          f.id !== l.id && (f.selected = !1);
+        }), a && u !== void 0 && D.forEach((f) => {
+          ae(f.id, u, l.id) && (f.selected = !0);
         }), l.selected && (t.lastSelected = l.id);
       }
-    }, C = (e) => {
-      e && !u.multi || S.value.filter((l) => l.canBeSelected).forEach((l) => {
+    }, x = (e) => {
+      e && !m.multi || S.value.filter((l) => l.canBeSelected).forEach((l) => {
         l.selected = e;
       });
-    }, q = () => C(!0), w = () => C(!1), F = () => {
+    }, G = () => x(!0), w = () => x(!1), F = () => {
       if (k(), w(), !y()) {
         console.warn("platforma API is not found");
         return;
@@ -91,42 +91,44 @@ const ce = ["title", "onClick"], de = {
         ), t.storageOptions = e.map((l) => ({
           text: l.name,
           value: l
-        })), u.autoSelectStorage && le(e[0], (l) => {
+        })), m.autoSelectStorage && se(e[0], (l) => {
           t.storageEntry = l;
         });
       }).catch((e) => t.error = String(e));
     };
-    return V(
-      Q(t, "storageEntry"),
+    V(
+      X(t, "storageEntry"),
       (e) => {
         k(), t.dirPath = (e == null ? void 0 : e.initialFullPath) ?? "";
       },
       { immediate: !0 }
     ), V([() => t.dirPath, () => t.storageEntry], () => {
-      z();
+      U();
     }), V(
-      () => u.modelValue,
+      () => m.modelValue,
       (e) => {
-        e ? F() : Object.assign(t, M());
+        e ? F() : Object.assign(t, R());
       },
       { immediate: !0 }
-    ), ee(document, "keydown", (e) => {
-      if (!u.modelValue || e.target !== document.body)
+    ), le(document, "keydown", (e) => {
+      if (!m.modelValue || e.target !== document.body)
         return;
-      const l = E(e);
-      l && e.code === "KeyA" && (e.preventDefault(), q()), l && e.shiftKey && e.code === "Period" && (e.preventDefault(), t.showHiddenItems = !t.showHiddenItems), e.code === "Enter" && u.submit();
-    }), R({
-      isReady: U,
-      getFilesToImport: W
-    }), X(F), (e, l) => (i(), d("div", {
+      const l = b(e);
+      l && e.code === "KeyA" && (e.preventDefault(), G()), l && e.shiftKey && e.code === "Period" && (e.preventDefault(), t.showHiddenItems = !t.showHiddenItems), e.code === "Enter" && m.submit();
+    }), T({
+      isReady: W,
+      getFilesToImport: j
+    }), Y(F);
+    const I = Z();
+    return (e, l) => (i(), d("div", {
       class: n(s(r).remote),
-      onClick: I(w, ["stop"])
+      onClick: K(w, ["stop"])
     }, [
       c("div", {
         class: n(s(r).search)
       }, [
         c("div", null, [
-          f(s(ae), {
+          h(s(oe), {
             modelValue: t.storageEntry,
             "onUpdate:modelValue": l[0] || (l[0] = (a) => t.storageEntry = a),
             label: "Select storage",
@@ -134,7 +136,7 @@ const ce = ["title", "onClick"], de = {
           }, null, 8, ["modelValue", "options"])
         ]),
         c("div", null, [
-          f(s(oe), {
+          h(s(ne), {
             modelValue: t.search,
             "onUpdate:modelValue": l[1] || (l[1] = (a) => t.search = a),
             label: "Search in folder",
@@ -143,7 +145,9 @@ const ce = ["title", "onClick"], de = {
         ])
       ], 2),
       c("div", {
-        class: n(s(r)["ls-container"])
+        class: n(s(r)["ls-container"]),
+        ref_key: "lsContainerRef",
+        ref: I
       }, [
         c("div", {
           class: n(s(r)["ls-head"])
@@ -151,25 +155,25 @@ const ce = ["title", "onClick"], de = {
           c("div", {
             class: n(s(r).breadcrumbs)
           }, [
-            (i(!0), d(g, null, K(B.value, (a, o) => (i(), d(g, { key: o }, [
+            (i(!0), d(g, null, L(C.value, (a, o) => (i(), d(g, { key: o }, [
               c("div", {
                 title: a.path,
-                onClick: (m) => x(a.path)
-              }, v(a.name), 9, ce),
-              a.index !== B.value.length - 1 ? (i(), Y(s(b), {
+                onClick: (u) => B(a.path)
+              }, v(a.name), 9, ue),
+              a.index !== C.value.length - 1 ? (i(), ee(s(_), {
                 key: 0,
                 name: "chevron-right"
-              })) : Z("", !0)
+              })) : te("", !0)
             ], 64))), 128))
           ], 2),
           c("div", {
             class: n(s(r).selected)
           }, [
             c("span", null, "Selected: " + v(P.value.length), 1),
-            f(se)
+            h(re, { container: I.value }, null, 8, ["container"])
           ], 2)
         ], 2),
-        t.currentLoadingPath !== void 0 ? (i(), d("div", de, [...l[2] || (l[2] = [
+        t.currentLoadingPath !== void 0 ? (i(), d("div", me, [...l[2] || (l[2] = [
           c("i", { class: "mask-24 mask-loading loader-icon" }, null, -1)
         ])])) : t.storageEntry ? t.error ? (i(), d("div", {
           key: 2,
@@ -185,39 +189,39 @@ const ce = ["title", "onClick"], de = {
           key: 3,
           class: n(s(r)["ls-body"])
         }, [
-          (i(!0), d(g, null, K(s(S), (a) => (i(), d(g, {
+          (i(!0), d(g, null, L(s(S), (a) => (i(), d(g, {
             key: a.id
           }, [
             a.isDir ? (i(), d("div", {
               key: 0,
               class: n(s(r).isDir),
-              onClick: (o) => x(a.path)
+              onClick: (o) => B(a.path)
             }, [
-              f(s(b), { name: "chevron-right" }),
-              L((i(), d("span", {
+              h(s(_), { name: "chevron-right" }),
+              O((i(), d("span", {
                 title: a.name
               }, [
-                O(v(a.name), 1)
-              ], 8, ue)), [
+                A(v(a.name), 1)
+              ], 8, pe)), [
                 [s(H)]
               ])
-            ], 10, me)) : (i(), d("div", {
+            ], 10, fe)) : (i(), d("div", {
               key: 1,
               class: n({ [s(r).canBeSelected]: a.canBeSelected, [s(r).selected]: a.selected }),
-              onClick: I((o) => j(o, a), ["stop"])
+              onClick: K((o) => q(o, a), ["stop"])
             }, [
-              f(s(b), {
+              h(s(_), {
                 name: "box",
                 class: n(s(r).isFile)
               }, null, 8, ["class"]),
-              L((i(), d("span", {
+              O((i(), d("span", {
                 title: a.name
               }, [
-                O(v(a.name), 1)
-              ], 8, he)), [
+                A(v(a.name), 1)
+              ], 8, ve)), [
                 [s(H)]
               ])
-            ], 10, pe))
+            ], 10, he))
           ], 64))), 128))
         ], 2)) : (i(), d("div", {
           key: 1,
@@ -235,6 +239,6 @@ const ce = ["title", "onClick"], de = {
   }
 });
 export {
-  _e as default
+  Be as default
 };
 //# sourceMappingURL=Remote.vue.js.map

package/dist/components/PlFileDialog/Remote.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"Remote.vue.js","sources":["../../../src/components/PlFileDialog/Remote.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useEventListener } from \"../../composition/useEventListener\";\nimport type { ImportedFiles } from \"../../types\";\nimport { between, notEmpty, tapIf } from \"@milaboratories/helpers\";\nimport { getRawPlatformaInstance, type StorageHandle } from \"@platforma-sdk/model\";\nimport { computed, onMounted, reactive, toRef, watch } from \"vue\";\nimport { PlDropdown } from \"../PlDropdown\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport Shortcuts from \"./Shortcuts.vue\";\nimport { PlMaskIcon16 } from \"../PlMaskIcon16\";\nimport { PlSearchField } from \"../PlSearchField\";\nimport style from \"./pl-file-dialog.module.scss\";\nimport { defaultData, useVisibleItems, vTextOverflown } from \"./remote\";\nimport { getFilePathBreadcrumbs, normalizeExtensions, type FileDialogItem } from \"./utils\";\n\n// note that on a Mac, a click combined with the control key is intercepted by the operating system and used to open a context menu, so ctrlKey is not detectable on click events.\nconst isCtrlOrMeta = (ev: KeyboardEvent | MouseEvent) => ev.ctrlKey || ev.metaKey;\n\ndefineEmits<{\n  (e: \"update:modelValue\", value: boolean): void;\n  (e: \"import:files\", value: ImportedFiles): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: boolean;\n    extensions?: string[]; // with dot, like ['.fastq.gz', '.fastq']\n    multi?: boolean;\n    title?: string;\n    autoSelectStorage?: boolean;\n    submit: () => void;\n  }>(),\n  {\n    extensions: undefined,\n    title: undefined,\n    autoSelectStorage: true,\n  },\n);\n\nconst data = reactive(defaultData());\n\nconst resetData = () => {\n  data.search = \"\";\n  data.error = \"\";\n  data.lastSelected = undefined;\n};\n\nconst extensions = computed(() => normalizeExtensions(props.extensions));\n\nconst visibleItems = useVisibleItems(data);\n\nconst lookup = computed(() => {\n  return {\n    modelValue: props.modelValue,\n    dirPath: data.dirPath,\n    storageHandle: data.storageEntry?.handle,\n  };\n});\n\nconst query = (storageHandle: StorageHandle, dirPath: string) => {\n  if (!getRawPlatformaInstance()) {\n    return;\n  }\n\n  if (data.currentLoadingPath === dirPath) {\n    return;\n  }\n\n  data.currentLoadingPath = dirPath;\n\n  getRawPlatformaInstance()\n    .lsDriver.listFiles(storageHandle, dirPath)\n    .then((res) => {\n      if (dirPath !== data.dirPath) {\n        return;\n      }\n\n      data.items = notEmpty(res)\n        .entries.map((item) => ({\n          path: item.fullPath,\n          name: item.name,\n          isDir: item.type === \"dir\",\n          canBeSelected:\n            item.type === \"file\" &&\n            (!extensions.value || extensions.value.some((ext) => item.fullPath.endsWith(ext))),\n          handle: item.type === \"file\" ? item.handle : undefined,\n          selected: false,\n        }))\n        .sort((a, b) => {\n          if (a.isDir && !b.isDir) return -1;\n          if (!a.isDir && b.isDir) return 1;\n          // localeCompare for unicode alphabets\n          return a.name.localeCompare(b.name);\n        })\n        .map((it, id) => ({ id, ...it }));\n\n      data.lastSelected = undefined;\n    })\n    .catch((err) => (data.error = String(err)))\n    .finally(() => {\n      data.currentLoadingPath = undefined;\n    });\n};\n\nconst load = () => {\n  resetData();\n  const { storageHandle, dirPath, modelValue } = lookup.value;\n  if (storageHandle && modelValue) {\n    query(storageHandle, dirPath);\n  }\n};\n\nconst breadcrumbs = computed(() => getFilePathBreadcrumbs(data.dirPath));\n\nconst selectedFiles = computed(() =>\n  data.items.filter((f) => f.canBeSelected && f.selected && !f.isDir),\n);\n\nconst isReady = computed(() => selectedFiles.value.length > 0 && data.storageEntry?.handle);\n\nconst getFilesToImport = () => ({\n  storageHandle: notEmpty(data.storageEntry?.handle),\n  files: selectedFiles.value.map((f) => f.handle!),\n});\n\nconst setDirPath = (dirPath: string) => {\n  data.dirPath = dirPath;\n};\n\nconst selectFile = (ev: MouseEvent, file: FileDialogItem) => {\n  const { shiftKey } = ev;\n\n  const ctrlOrMetaKey = isCtrlOrMeta(ev);\n\n  const { lastSelected } = data;\n\n  ev.preventDefault();\n\n  const items = visibleItems.value;\n\n  if (file.canBeSelected) {\n    if (!props.multi) {\n      items.forEach((f) => (f.selected = false));\n    }\n\n    file.selected = !file.selected;\n\n    if (!props.multi) {\n      return;\n    }\n\n    if (!ctrlOrMetaKey && !shiftKey) {\n      items.forEach((f) => {\n        if (f.id !== file.id) {\n          f.selected = false;\n        }\n      });\n    }\n\n    if (shiftKey && lastSelected !== undefined) {\n      items.forEach((f) => {\n        if (between(f.id, lastSelected, file.id)) {\n          f.selected = true;\n        }\n      });\n    }\n\n    if (file.selected) {\n      data.lastSelected = file.id;\n    }\n  }\n};\n\nconst changeAll = (selected: boolean) => {\n  if (selected && !props.multi) {\n    return;\n  }\n\n  visibleItems.value\n    .filter((f) => f.canBeSelected)\n    .forEach((file) => {\n      file.selected = selected;\n    });\n};\n\nconst selectAll = () => changeAll(true);\n\nconst deselectAll = () => changeAll(false);\n\nconst loadAvailableStorages = () => {\n  resetData();\n  deselectAll();\n  if (!getRawPlatformaInstance()) {\n    console.warn(\"platforma API is not found\");\n    return;\n  }\n  getRawPlatformaInstance()\n    .lsDriver.getStorageList()\n    .then((storageEntries) => {\n      // local storage is always returned by the ML, so we need to remove it from remote dialog manually\n      storageEntries = storageEntries.filter(\n        (it) => it.name !== \"local\" && !it.name.startsWith(\"local_disk_\"),\n      );\n\n      data.storageOptions = storageEntries.map((it) => ({\n        text: it.name,\n        value: it,\n      }));\n\n      if (props.autoSelectStorage) {\n        tapIf(storageEntries[0], (entry) => {\n          data.storageEntry = entry;\n        });\n      }\n    })\n    .catch((err) => (data.error = String(err)));\n};\n\nwatch(\n  toRef(data, \"storageEntry\"),\n  (entry) => {\n    resetData();\n    data.dirPath = entry?.initialFullPath ?? \"\";\n  },\n  { immediate: true },\n);\n\nwatch([() => data.dirPath, () => data.storageEntry], () => {\n  load();\n});\n\nwatch(\n  () => props.modelValue,\n  (isOpen) => {\n    if (isOpen) {\n      loadAvailableStorages();\n    } else {\n      Object.assign(data, defaultData());\n    }\n  },\n  { immediate: true },\n);\n\nuseEventListener(document, \"keydown\", (ev: KeyboardEvent) => {\n  if (!props.modelValue) {\n    return;\n  }\n\n  if (ev.target !== document.body) {\n    return;\n  }\n\n  const ctrlOrMetaKey = isCtrlOrMeta(ev);\n\n  if (ctrlOrMetaKey && ev.code === \"KeyA\") {\n    ev.preventDefault();\n    selectAll();\n  }\n\n  if (ctrlOrMetaKey && ev.shiftKey && ev.code === \"Period\") {\n    ev.preventDefault();\n    data.showHiddenItems = !data.showHiddenItems;\n  }\n\n  if (ev.code === \"Enter\") {\n    props.submit();\n  }\n});\n\ndefineExpose({\n  isReady,\n  getFilesToImport,\n});\n\nonMounted(loadAvailableStorages);\n</script>\n\n<template>\n  <div :class=\"style.remote\" @click.stop=\"deselectAll\">\n    <div :class=\"style.search\">\n      <div>\n        <PlDropdown\n          v-model=\"data.storageEntry\"\n          label=\"Select storage\"\n          :options=\"data.storageOptions\"\n        />\n      </div>\n      <div>\n        <PlSearchField v-model=\"data.search\" label=\"Search in folder\" clearable />\n      </div>\n    </div>\n    <div :class=\"style['ls-container']\">\n      <div :class=\"style['ls-head']\">\n        <div :class=\"style['breadcrumbs']\">\n          <template v-for=\"(s, i) in breadcrumbs\" :key=\"i\">\n            <div :title=\"s.path\" @click=\"setDirPath(s.path)\">{{ s.name }}</div>\n            <PlIcon16 v-if=\"s.index !== breadcrumbs.length - 1\" name=\"chevron-right\" />\n          </template>\n        </div>\n        <div :class=\"style.selected\">\n          <span>Selected: {{ selectedFiles.length }}</span>\n          <Shortcuts />\n        </div>\n      </div>\n      <div v-if=\"data.currentLoadingPath !== undefined\" class=\"ls-loader\">\n        <i class=\"mask-24 mask-loading loader-icon\" />\n      </div>\n      <div v-else-if=\"!data.storageEntry\" :class=\"style['ls-empty']\">\n        <div :class=\"style.cat\" />\n        <div :class=\"style.message\">Select storage to preview</div>\n      </div>\n      <div v-else-if=\"data.error\" :class=\"style['ls-error']\">\n        <div :class=\"style.cat\" />\n        <div :class=\"style.message\">{{ data.error }}</div>\n      </div>\n      <div v-else :class=\"style['ls-body']\">\n        <template v-for=\"file in visibleItems\" :key=\"file.id\">\n          <div v-if=\"file.isDir\" :class=\"style.isDir\" @click=\"setDirPath(file.path)\">\n            <PlIcon16 name=\"chevron-right\" />\n            <span v-text-overflown :title=\"file.name\">{{ file.name }}</span>\n          </div>\n          <div\n            v-else\n            :class=\"{ [style.canBeSelected]: file.canBeSelected, [style.selected]: file.selected }\"\n            @click.stop=\"(ev) => selectFile(ev, file)\"\n          >\n            <PlMaskIcon16 name=\"box\" :class=\"style.isFile\" />\n            <span v-text-overflown :title=\"file.name\">{{ file.name }}</span>\n          </div>\n        </template>\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["isCtrlOrMeta","ev","props","__props","data","reactive","defaultData","resetData","extensions","computed","normalizeExtensions","visibleItems","useVisibleItems","lookup","_a","query","storageHandle","dirPath","getRawPlatformaInstance","res","notEmpty","item","ext","a","b","it","id","err","load","modelValue","breadcrumbs","getFilePathBreadcrumbs","selectedFiles","f","isReady","getFilesToImport","setDirPath","selectFile","file","shiftKey","ctrlOrMetaKey","lastSelected","items","between","changeAll","selected","selectAll","deselectAll","loadAvailableStorages","storageEntries","tapIf","entry","watch","toRef","isOpen","useEventListener","__expose","onMounted","_createElementBlock","_normalizeClass","_unref","style","_createElementVNode","_createVNode","PlDropdown","_cache","$event","PlSearchField","_openBlock","_Fragment","_renderList","s","i","_toDisplayString","_hoisted_1","_createBlock","PlIcon16","Shortcuts","_hoisted_2","_createTextVNode","PlMaskIcon16"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,UAAMA,IAAe,CAACC,MAAmCA,EAAG,WAAWA,EAAG,SAOpEC,IAAQC,GAgBRC,IAAOC,EAASC,GAAa,GAE7BC,IAAY,MAAM;AACtB,MAAAH,EAAK,SAAS,IACdA,EAAK,QAAQ,IACbA,EAAK,eAAe;AAAA,IACtB,GAEMI,IAAaC,EAAS,MAAMC,GAAoBR,EAAM,UAAU,CAAC,GAEjES,IAAeC,GAAgBR,CAAI,GAEnCS,IAASJ,EAAS,MAAM;;AAC5B,aAAO;AAAA,QACL,YAAYP,EAAM;AAAA,QAClB,SAASE,EAAK;AAAA,QACd,gBAAeU,IAAAV,EAAK,iBAAL,gBAAAU,EAAmB;AAAA,MAAA;AAAA,IAEtC,CAAC,GAEKC,IAAQ,CAACC,GAA8BC,MAAoB;AAC/D,MAAKC,OAIDd,EAAK,uBAAuBa,MAIhCb,EAAK,qBAAqBa,GAE1BC,EAAA,EACG,SAAS,UAAUF,GAAeC,CAAO,EACzC,KAAK,CAACE,MAAQ;AACb,QAAIF,MAAYb,EAAK,YAIrBA,EAAK,QAAQgB,EAASD,CAAG,EACtB,QAAQ,IAAI,CAACE,OAAU;AAAA,UACtB,MAAMA,EAAK;AAAA,UACX,MAAMA,EAAK;AAAA,UACX,OAAOA,EAAK,SAAS;AAAA,UACrB,eACEA,EAAK,SAAS,WACb,CAACb,EAAW,SAASA,EAAW,MAAM,KAAK,CAACc,MAAQD,EAAK,SAAS,SAASC,CAAG,CAAC;AAAA,UAClF,QAAQD,EAAK,SAAS,SAASA,EAAK,SAAS;AAAA,UAC7C,UAAU;AAAA,QAAA,EACV,EACD,KAAK,CAACE,GAAGC,MACJD,EAAE,SAAS,CAACC,EAAE,QAAc,KAC5B,CAACD,EAAE,SAASC,EAAE,QAAc,IAEzBD,EAAE,KAAK,cAAcC,EAAE,IAAI,CACnC,EACA,IAAI,CAACC,GAAIC,OAAQ,EAAE,IAAAA,GAAI,GAAGD,EAAA,EAAK,GAElCrB,EAAK,eAAe;AAAA,MACtB,CAAC,EACA,MAAM,CAACuB,MAASvB,EAAK,QAAQ,OAAOuB,CAAG,CAAE,EACzC,QAAQ,MAAM;AACb,QAAAvB,EAAK,qBAAqB;AAAA,MAC5B,CAAC;AAAA,IACL,GAEMwB,IAAO,MAAM;AACjB,MAAArB,EAAA;AACA,YAAM,EAAE,eAAAS,GAAe,SAAAC,GAAS,YAAAY,EAAA,IAAehB,EAAO;AACtD,MAAIG,KAAiBa,KACnBd,EAAMC,GAAeC,CAAO;AAAA,IAEhC,GAEMa,IAAcrB,EAAS,MAAMsB,GAAuB3B,EAAK,OAAO,CAAC,GAEjE4B,IAAgBvB;AAAA,MAAS,MAC7BL,EAAK,MAAM,OAAO,CAAC6B,MAAMA,EAAE,iBAAiBA,EAAE,YAAY,CAACA,EAAE,KAAK;AAAA,IAAA,GAG9DC,IAAUzB,EAAS,MAAA;;AAAM,aAAAuB,EAAc,MAAM,SAAS,OAAKlB,IAAAV,EAAK,iBAAL,gBAAAU,EAAmB;AAAA,KAAM,GAEpFqB,IAAmB,MAAA;;AAAO;AAAA,QAC9B,eAAef,GAASN,IAAAV,EAAK,iBAAL,gBAAAU,EAAmB,MAAM;AAAA,QACjD,OAAOkB,EAAc,MAAM,IAAI,CAACC,MAAMA,EAAE,MAAO;AAAA,MAAA;AAAA,OAG3CG,IAAa,CAACnB,MAAoB;AACtC,MAAAb,EAAK,UAAUa;AAAA,IACjB,GAEMoB,IAAa,CAACpC,GAAgBqC,MAAyB;AAC3D,YAAM,EAAE,UAAAC,MAAatC,GAEfuC,IAAgBxC,EAAaC,CAAE,GAE/B,EAAE,cAAAwC,MAAiBrC;AAEzB,MAAAH,EAAG,eAAA;AAEH,YAAMyC,IAAQ/B,EAAa;AAE3B,UAAI2B,EAAK,eAAe;AAOtB,YANKpC,EAAM,SACTwC,EAAM,QAAQ,CAACT,MAAOA,EAAE,WAAW,EAAM,GAG3CK,EAAK,WAAW,CAACA,EAAK,UAElB,CAACpC,EAAM;AACT;AAGF,QAAI,CAACsC,KAAiB,CAACD,KACrBG,EAAM,QAAQ,CAACT,MAAM;AACnB,UAAIA,EAAE,OAAOK,EAAK,OAChBL,EAAE,WAAW;AAAA,QAEjB,CAAC,GAGCM,KAAYE,MAAiB,UAC/BC,EAAM,QAAQ,CAACT,MAAM;AACnB,UAAIU,GAAQV,EAAE,IAAIQ,GAAcH,EAAK,EAAE,MACrCL,EAAE,WAAW;AAAA,QAEjB,CAAC,GAGCK,EAAK,aACPlC,EAAK,eAAekC,EAAK;AAAA,MAE7B;AAAA,IACF,GAEMM,IAAY,CAACC,MAAsB;AACvC,MAAIA,KAAY,CAAC3C,EAAM,SAIvBS,EAAa,MACV,OAAO,CAACsB,MAAMA,EAAE,aAAa,EAC7B,QAAQ,CAACK,MAAS;AACjB,QAAAA,EAAK,WAAWO;AAAA,MAClB,CAAC;AAAA,IACL,GAEMC,IAAY,MAAMF,EAAU,EAAI,GAEhCG,IAAc,MAAMH,EAAU,EAAK,GAEnCI,IAAwB,MAAM;AAGlC,UAFAzC,EAAA,GACAwC,EAAA,GACI,CAAC7B,KAA2B;AAC9B,gBAAQ,KAAK,4BAA4B;AACzC;AAAA,MACF;AACA,MAAAA,EAAA,EACG,SAAS,eAAA,EACT,KAAK,CAAC+B,MAAmB;AAExB,QAAAA,IAAiBA,EAAe;AAAA,UAC9B,CAACxB,MAAOA,EAAG,SAAS,WAAW,CAACA,EAAG,KAAK,WAAW,aAAa;AAAA,QAAA,GAGlErB,EAAK,iBAAiB6C,EAAe,IAAI,CAACxB,OAAQ;AAAA,UAChD,MAAMA,EAAG;AAAA,UACT,OAAOA;AAAA,QAAA,EACP,GAEEvB,EAAM,qBACRgD,GAAMD,EAAe,CAAC,GAAG,CAACE,MAAU;AAClC,UAAA/C,EAAK,eAAe+C;AAAA,QACtB,CAAC;AAAA,MAEL,CAAC,EACA,MAAM,CAACxB,MAASvB,EAAK,QAAQ,OAAOuB,CAAG,CAAE;AAAA,IAC9C;AAEA,WAAAyB;AAAA,MACEC,EAAMjD,GAAM,cAAc;AAAA,MAC1B,CAAC+C,MAAU;AACT,QAAA5C,EAAA,GACAH,EAAK,WAAU+C,KAAA,gBAAAA,EAAO,oBAAmB;AAAA,MAC3C;AAAA,MACA,EAAE,WAAW,GAAA;AAAA,IAAK,GAGpBC,EAAM,CAAC,MAAMhD,EAAK,SAAS,MAAMA,EAAK,YAAY,GAAG,MAAM;AACzD,MAAAwB,EAAA;AAAA,IACF,CAAC,GAEDwB;AAAA,MACE,MAAMlD,EAAM;AAAA,MACZ,CAACoD,MAAW;AACV,QAAIA,IACFN,EAAA,IAEA,OAAO,OAAO5C,GAAME,GAAa;AAAA,MAErC;AAAA,MACA,EAAE,WAAW,GAAA;AAAA,IAAK,GAGpBiD,GAAiB,UAAU,WAAW,CAACtD,MAAsB;AAK3D,UAJI,CAACC,EAAM,cAIPD,EAAG,WAAW,SAAS;AACzB;AAGF,YAAMuC,IAAgBxC,EAAaC,CAAE;AAErC,MAAIuC,KAAiBvC,EAAG,SAAS,WAC/BA,EAAG,eAAA,GACH6C,EAAA,IAGEN,KAAiBvC,EAAG,YAAYA,EAAG,SAAS,aAC9CA,EAAG,eAAA,GACHG,EAAK,kBAAkB,CAACA,EAAK,kBAG3BH,EAAG,SAAS,WACdC,EAAM,OAAA;AAAA,IAEV,CAAC,GAEDsD,EAAa;AAAA,MACX,SAAAtB;AAAA,MACA,kBAAAC;AAAA,IAAA,CACD,GAEDsB,EAAUT,CAAqB,mBAI7BU,EAsDM,OAAA;AAAA,MAtDA,OAAKC,EAAEC,EAAAC,CAAA,EAAM,MAAM;AAAA,MAAG,WAAYd,GAAW,CAAA,MAAA,CAAA;AAAA,IAAA;MACjDe,EAWM,OAAA;AAAA,QAXA,OAAKH,EAAEC,EAAAC,CAAA,EAAM,MAAM;AAAA,MAAA;QACvBC,EAMM,OAAA,MAAA;AAAA,UALJC,EAIEH,EAAAI,EAAA,GAAA;AAAA,YAHS,YAAA5D,EAAK;AAAA,YAAL,uBAAA6D,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAA9D,EAAK,eAAY8D;AAAA,YAC1B,OAAM;AAAA,YACL,SAAS9D,EAAK;AAAA,UAAA;;QAGnB0D,EAEM,OAAA,MAAA;AAAA,UADJC,EAA0EH,EAAAO,EAAA,GAAA;AAAA,YAAlD,YAAA/D,EAAK;AAAA,YAAL,uBAAA6D,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAA9D,EAAK,SAAM8D;AAAA,YAAE,OAAM;AAAA,YAAmB,WAAA;AAAA,UAAA;;;MAGlEJ,EAwCM,OAAA;AAAA,QAxCA,SAAOF,EAAAC,CAAA,EAAK,cAAA,CAAA;AAAA,MAAA;QAChBC,EAWM,OAAA;AAAA,UAXA,SAAOF,EAAAC,CAAA,EAAK,SAAA,CAAA;AAAA,QAAA;UAChBC,EAKM,OAAA;AAAA,YALA,SAAOF,EAAAC,CAAA,EAAK,WAAA;AAAA,UAAA;aAChBO,EAAA,EAAA,GAAAV,EAGWW,GAAA,MAAAC,EAHgBxC,EAAA,OAAW,CAApByC,GAAGC,wBAAyBA,KAAC;AAAA,cAC7CV,EAAmE,OAAA;AAAA,gBAA7D,OAAOS,EAAE;AAAA,gBAAO,SAAK,CAAAL,MAAE9B,EAAWmC,EAAE,IAAI;AAAA,cAAA,GAAME,EAAAF,EAAE,IAAI,GAAA,GAAAG,EAAA;AAAA,cAC1CH,EAAE,UAAUzC,EAAA,MAAY,SAAM,UAA9C6C,EAA2Ef,EAAAgB,CAAA,GAAA;AAAA;gBAAvB,MAAK;AAAA,cAAA;;;UAG7Dd,EAGM,OAAA;AAAA,YAHA,OAAKH,EAAEC,EAAAC,CAAA,EAAM,QAAQ;AAAA,UAAA;YACzBC,EAAiD,QAAA,MAA3C,eAAUW,EAAGzC,EAAA,MAAc,MAAM,GAAA,CAAA;AAAA,YACvC+B,EAAac,EAAA;AAAA,UAAA;;QAGNzE,EAAK,uBAAuB,UAAvCgE,EAAA,GAAAV,EAEM,OAFNoB,IAEM,CAAA,GAAAb,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA;AAAA,UADJH,EAA8C,KAAA,EAA3C,OAAM,mCAAA,GAAkC,MAAA,EAAA;AAAA,QAAA,QAE5B1D,EAAK,eAINA,EAAK,cAArBsD,EAGM,OAAA;AAAA;UAHuB,SAAOE,EAAAC,CAAA,EAAK,UAAA,CAAA;AAAA,QAAA;UACvCC,EAA0B,OAAA;AAAA,YAApB,OAAKH,EAAEC,EAAAC,CAAA,EAAM,GAAG;AAAA,UAAA;UACtBC,EAAkD,OAAA;AAAA,YAA5C,OAAKH,EAAEC,EAAAC,CAAA,EAAM,OAAO;AAAA,UAAA,GAAKY,EAAArE,EAAK,KAAK,GAAA,CAAA;AAAA,QAAA,eAE3CsD,EAeM,OAAA;AAAA;UAfO,SAAOE,EAAAC,CAAA,EAAK,SAAA,CAAA;AAAA,QAAA;kBACvBH,EAaWW,GAAA,MAAAC,EAbcV,EAAAjD,CAAA,GAAY,CAApB2B;YAA4B,KAAAA,EAAK;AAAA,UAAA;YACrCA,EAAK,cAAhBoB,EAGM,OAAA;AAAA;cAHkB,OAAKC,EAAEC,EAAAC,CAAA,EAAM,KAAK;AAAA,cAAG,SAAK,CAAAK,MAAE9B,EAAWE,EAAK,IAAI;AAAA,YAAA;cACtEyB,EAAiCH,EAAAgB,CAAA,GAAA,EAAvB,MAAK,iBAAe;AAAA,sBAC9BlB,EAAgE,QAAA;AAAA,gBAAxC,OAAOpB,EAAK;AAAA,cAAA;gBAASyC,EAAAN,EAAAnC,EAAK,IAAI,GAAA,CAAA;AAAA,cAAA;;;gCAExDoB,EAOM,OAAA;AAAA;cALH,OAAKC,EAAA,EAAA,CAAKC,EAAAC,CAAA,EAAM,aAAa,GAAGvB,EAAK,eAAa,CAAGsB,KAAM,QAAQ,GAAGtB,EAAK,UAAQ;AAAA,cACnF,YAAarC,MAAOoC,EAAWpC,GAAIqC,CAAI,GAAA,CAAA,MAAA,CAAA;AAAA,YAAA;cAExCyB,EAAiDH,EAAAoB,CAAA,GAAA;AAAA,gBAAnC,MAAK;AAAA,gBAAO,OAAKrB,EAAEC,EAAAC,CAAA,EAAM,MAAM;AAAA,cAAA;sBAC7CH,EAAgE,QAAA;AAAA,gBAAxC,OAAOpB,EAAK;AAAA,cAAA;gBAASyC,EAAAN,EAAAnC,EAAK,IAAI,GAAA,CAAA;AAAA,cAAA;;;;;uBApB5DoB,EAGM,OAAA;AAAA;UAH+B,SAAOE,EAAAC,CAAA,EAAK,UAAA,CAAA;AAAA,QAAA;UAC/CC,EAA0B,OAAA;AAAA,YAApB,OAAKH,EAAEC,EAAAC,CAAA,EAAM,GAAG;AAAA,UAAA;UACtBC,EAA2D,OAAA;AAAA,YAArD,OAAKH,EAAEC,EAAAC,CAAA,EAAM,OAAO;AAAA,UAAA,GAAE,6BAAyB,CAAA;AAAA,QAAA;;;;;"}
+{"version":3,"file":"Remote.vue.js","sources":["../../../src/components/PlFileDialog/Remote.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useEventListener } from \"../../composition/useEventListener\";\nimport type { ImportedFiles } from \"../../types\";\nimport { between, notEmpty, tapIf } from \"@milaboratories/helpers\";\nimport { getRawPlatformaInstance, type StorageHandle } from \"@platforma-sdk/model\";\nimport { computed, onMounted, reactive, ref, toRef, watch } from \"vue\";\nimport { PlDropdown } from \"../PlDropdown\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport Shortcuts from \"./Shortcuts.vue\";\nimport { PlMaskIcon16 } from \"../PlMaskIcon16\";\nimport { PlSearchField } from \"../PlSearchField\";\nimport style from \"./pl-file-dialog.module.scss\";\nimport { defaultData, useVisibleItems, vTextOverflown } from \"./remote\";\nimport { getFilePathBreadcrumbs, normalizeExtensions, type FileDialogItem } from \"./utils\";\n\n// note that on a Mac, a click combined with the control key is intercepted by the operating system and used to open a context menu, so ctrlKey is not detectable on click events.\nconst isCtrlOrMeta = (ev: KeyboardEvent | MouseEvent) => ev.ctrlKey || ev.metaKey;\n\ndefineEmits<{\n  (e: \"update:modelValue\", value: boolean): void;\n  (e: \"import:files\", value: ImportedFiles): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: boolean;\n    extensions?: string[]; // with dot, like ['.fastq.gz', '.fastq']\n    multi?: boolean;\n    title?: string;\n    autoSelectStorage?: boolean;\n    submit: () => void;\n  }>(),\n  {\n    extensions: undefined,\n    title: undefined,\n    autoSelectStorage: true,\n  },\n);\n\nconst data = reactive(defaultData());\n\nconst resetData = () => {\n  data.search = \"\";\n  data.error = \"\";\n  data.lastSelected = undefined;\n};\n\nconst extensions = computed(() => normalizeExtensions(props.extensions));\n\nconst visibleItems = useVisibleItems(data);\n\nconst lookup = computed(() => {\n  return {\n    modelValue: props.modelValue,\n    dirPath: data.dirPath,\n    storageHandle: data.storageEntry?.handle,\n  };\n});\n\nconst query = (storageHandle: StorageHandle, dirPath: string) => {\n  if (!getRawPlatformaInstance()) {\n    return;\n  }\n\n  if (data.currentLoadingPath === dirPath) {\n    return;\n  }\n\n  data.currentLoadingPath = dirPath;\n\n  getRawPlatformaInstance()\n    .lsDriver.listFiles(storageHandle, dirPath)\n    .then((res) => {\n      if (dirPath !== data.dirPath) {\n        return;\n      }\n\n      data.items = notEmpty(res)\n        .entries.map((item) => ({\n          path: item.fullPath,\n          name: item.name,\n          isDir: item.type === \"dir\",\n          canBeSelected:\n            item.type === \"file\" &&\n            (!extensions.value || extensions.value.some((ext) => item.fullPath.endsWith(ext))),\n          handle: item.type === \"file\" ? item.handle : undefined,\n          selected: false,\n        }))\n        .sort((a, b) => {\n          if (a.isDir && !b.isDir) return -1;\n          if (!a.isDir && b.isDir) return 1;\n          // localeCompare for unicode alphabets\n          return a.name.localeCompare(b.name);\n        })\n        .map((it, id) => ({ id, ...it }));\n\n      data.lastSelected = undefined;\n    })\n    .catch((err) => (data.error = String(err)))\n    .finally(() => {\n      data.currentLoadingPath = undefined;\n    });\n};\n\nconst load = () => {\n  resetData();\n  const { storageHandle, dirPath, modelValue } = lookup.value;\n  if (storageHandle && modelValue) {\n    query(storageHandle, dirPath);\n  }\n};\n\nconst breadcrumbs = computed(() => getFilePathBreadcrumbs(data.dirPath));\n\nconst selectedFiles = computed(() =>\n  data.items.filter((f) => f.canBeSelected && f.selected && !f.isDir),\n);\n\nconst isReady = computed(() => selectedFiles.value.length > 0 && data.storageEntry?.handle);\n\nconst getFilesToImport = () => ({\n  storageHandle: notEmpty(data.storageEntry?.handle),\n  files: selectedFiles.value.map((f) => f.handle!),\n});\n\nconst setDirPath = (dirPath: string) => {\n  data.dirPath = dirPath;\n};\n\nconst selectFile = (ev: MouseEvent, file: FileDialogItem) => {\n  const { shiftKey } = ev;\n\n  const ctrlOrMetaKey = isCtrlOrMeta(ev);\n\n  const { lastSelected } = data;\n\n  ev.preventDefault();\n\n  const items = visibleItems.value;\n\n  if (file.canBeSelected) {\n    if (!props.multi) {\n      items.forEach((f) => (f.selected = false));\n    }\n\n    file.selected = !file.selected;\n\n    if (!props.multi) {\n      return;\n    }\n\n    if (!ctrlOrMetaKey && !shiftKey) {\n      items.forEach((f) => {\n        if (f.id !== file.id) {\n          f.selected = false;\n        }\n      });\n    }\n\n    if (shiftKey && lastSelected !== undefined) {\n      items.forEach((f) => {\n        if (between(f.id, lastSelected, file.id)) {\n          f.selected = true;\n        }\n      });\n    }\n\n    if (file.selected) {\n      data.lastSelected = file.id;\n    }\n  }\n};\n\nconst changeAll = (selected: boolean) => {\n  if (selected && !props.multi) {\n    return;\n  }\n\n  visibleItems.value\n    .filter((f) => f.canBeSelected)\n    .forEach((file) => {\n      file.selected = selected;\n    });\n};\n\nconst selectAll = () => changeAll(true);\n\nconst deselectAll = () => changeAll(false);\n\nconst loadAvailableStorages = () => {\n  resetData();\n  deselectAll();\n  if (!getRawPlatformaInstance()) {\n    console.warn(\"platforma API is not found\");\n    return;\n  }\n  getRawPlatformaInstance()\n    .lsDriver.getStorageList()\n    .then((storageEntries) => {\n      // local storage is always returned by the ML, so we need to remove it from remote dialog manually\n      storageEntries = storageEntries.filter(\n        (it) => it.name !== \"local\" && !it.name.startsWith(\"local_disk_\"),\n      );\n\n      data.storageOptions = storageEntries.map((it) => ({\n        text: it.name,\n        value: it,\n      }));\n\n      if (props.autoSelectStorage) {\n        tapIf(storageEntries[0], (entry) => {\n          data.storageEntry = entry;\n        });\n      }\n    })\n    .catch((err) => (data.error = String(err)));\n};\n\nwatch(\n  toRef(data, \"storageEntry\"),\n  (entry) => {\n    resetData();\n    data.dirPath = entry?.initialFullPath ?? \"\";\n  },\n  { immediate: true },\n);\n\nwatch([() => data.dirPath, () => data.storageEntry], () => {\n  load();\n});\n\nwatch(\n  () => props.modelValue,\n  (isOpen) => {\n    if (isOpen) {\n      loadAvailableStorages();\n    } else {\n      Object.assign(data, defaultData());\n    }\n  },\n  { immediate: true },\n);\n\nuseEventListener(document, \"keydown\", (ev: KeyboardEvent) => {\n  if (!props.modelValue) {\n    return;\n  }\n\n  if (ev.target !== document.body) {\n    return;\n  }\n\n  const ctrlOrMetaKey = isCtrlOrMeta(ev);\n\n  if (ctrlOrMetaKey && ev.code === \"KeyA\") {\n    ev.preventDefault();\n    selectAll();\n  }\n\n  if (ctrlOrMetaKey && ev.shiftKey && ev.code === \"Period\") {\n    ev.preventDefault();\n    data.showHiddenItems = !data.showHiddenItems;\n  }\n\n  if (ev.code === \"Enter\") {\n    props.submit();\n  }\n});\n\ndefineExpose({\n  isReady,\n  getFilesToImport,\n});\n\nonMounted(loadAvailableStorages);\n\nconst lsContainerRef = ref<HTMLElement | undefined>();\n</script>\n\n<template>\n  <div :class=\"style.remote\" @click.stop=\"deselectAll\">\n    <div :class=\"style.search\">\n      <div>\n        <PlDropdown\n          v-model=\"data.storageEntry\"\n          label=\"Select storage\"\n          :options=\"data.storageOptions\"\n        />\n      </div>\n      <div>\n        <PlSearchField v-model=\"data.search\" label=\"Search in folder\" clearable />\n      </div>\n    </div>\n    <div :class=\"style['ls-container']\" ref=\"lsContainerRef\">\n      <div :class=\"style['ls-head']\">\n        <div :class=\"style['breadcrumbs']\">\n          <template v-for=\"(s, i) in breadcrumbs\" :key=\"i\">\n            <div :title=\"s.path\" @click=\"setDirPath(s.path)\">{{ s.name }}</div>\n            <PlIcon16 v-if=\"s.index !== breadcrumbs.length - 1\" name=\"chevron-right\" />\n          </template>\n        </div>\n        <div :class=\"style.selected\">\n          <span>Selected: {{ selectedFiles.length }}</span>\n          <Shortcuts :container=\"lsContainerRef\" />\n        </div>\n      </div>\n      <div v-if=\"data.currentLoadingPath !== undefined\" class=\"ls-loader\">\n        <i class=\"mask-24 mask-loading loader-icon\" />\n      </div>\n      <div v-else-if=\"!data.storageEntry\" :class=\"style['ls-empty']\">\n        <div :class=\"style.cat\" />\n        <div :class=\"style.message\">Select storage to preview</div>\n      </div>\n      <div v-else-if=\"data.error\" :class=\"style['ls-error']\">\n        <div :class=\"style.cat\" />\n        <div :class=\"style.message\">{{ data.error }}</div>\n      </div>\n      <div v-else :class=\"style['ls-body']\">\n        <template v-for=\"file in visibleItems\" :key=\"file.id\">\n          <div v-if=\"file.isDir\" :class=\"style.isDir\" @click=\"setDirPath(file.path)\">\n            <PlIcon16 name=\"chevron-right\" />\n            <span v-text-overflown :title=\"file.name\">{{ file.name }}</span>\n          </div>\n          <div\n            v-else\n            :class=\"{ [style.canBeSelected]: file.canBeSelected, [style.selected]: file.selected }\"\n            @click.stop=\"(ev) => selectFile(ev, file)\"\n          >\n            <PlMaskIcon16 name=\"box\" :class=\"style.isFile\" />\n            <span v-text-overflown :title=\"file.name\">{{ file.name }}</span>\n          </div>\n        </template>\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["isCtrlOrMeta","ev","props","__props","data","reactive","defaultData","resetData","extensions","computed","normalizeExtensions","visibleItems","useVisibleItems","lookup","_a","query","storageHandle","dirPath","getRawPlatformaInstance","res","notEmpty","item","ext","a","b","it","id","err","load","modelValue","breadcrumbs","getFilePathBreadcrumbs","selectedFiles","f","isReady","getFilesToImport","setDirPath","selectFile","file","shiftKey","ctrlOrMetaKey","lastSelected","items","between","changeAll","selected","selectAll","deselectAll","loadAvailableStorages","storageEntries","tapIf","entry","watch","toRef","isOpen","useEventListener","__expose","onMounted","lsContainerRef","ref","_createElementBlock","_normalizeClass","_unref","style","_createElementVNode","_createVNode","PlDropdown","_cache","$event","PlSearchField","_openBlock","_Fragment","_renderList","s","i","_toDisplayString","_hoisted_1","_createBlock","PlIcon16","Shortcuts","_hoisted_2","_createTextVNode","PlMaskIcon16"],"mappings":"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"}

package/dist/components/PlFileDialog/Shortcuts.vue.d.ts

@@ -1,3 +1,6 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+type __VLS_Props = {
+    container?: "body" | HTMLElement;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;
 //# sourceMappingURL=Shortcuts.vue.d.ts.map

package/dist/components/PlFileDialog/Shortcuts.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Shortcuts.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlFileDialog/Shortcuts.vue"],"names":[],"mappings":";AA4MA,wBAMG"}
+{"version":3,"file":"Shortcuts.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlFileDialog/Shortcuts.vue"],"names":[],"mappings":"AA8GA,KAAK,WAAW,GAAG;IACjB,SAAS,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;CAClC,CAAC;;AAwGF,wBAOG"}

package/dist/components/PlFileDialog/Shortcuts.vue2.js

@@ -1,27 +1,31 @@
-import { defineComponent as s, createBlock as t, openBlock as d, unref as o, withCtx as u, createElementVNode as l, normalizeClass as n } from "vue";
-import a from "../PlTooltip/PlTooltip.vue.js";
-const m = /* @__PURE__ */ s({
+import { defineComponent as o, createBlock as s, openBlock as d, unref as a, withCtx as r, createElementVNode as l, normalizeClass as e } from "vue";
+import u from "../PlTooltip/PlTooltip.vue.js";
+const m = /* @__PURE__ */ o({
   __name: "Shortcuts",
-  setup(r) {
-    return (i, e) => (d(), t(o(a), {
+  props: {
+    container: {}
+  },
+  setup(t) {
+    return (i, n) => (d(), s(a(u), {
       class: "info",
-      position: "southwest",
-      "max-width": "420px"
+      position: "bottom",
+      "max-width": "420px",
+      container: t.container
     }, {
-      tooltip: u(() => [
+      tooltip: r(() => [
         l("span", {
-          class: n(i.$style.title)
+          class: e(i.$style.title)
         }, "Shortcuts", 2),
         l("div", {
-          class: n([i.$style.row, i.$style.head])
-        }, [...e[0] || (e[0] = [
+          class: e([i.$style.row, i.$style.head])
+        }, [...n[0] || (n[0] = [
           l("div", null, null, -1),
           l("div", null, "MacOS", -1),
           l("div", null, "Windows/Linux", -1)
         ])], 2),
         l("div", {
-          class: n([i.$style.row, i.$style.body])
-        }, [...e[1] || (e[1] = [
+          class: e([i.$style.row, i.$style.body])
+        }, [...n[1] || (n[1] = [
           l("div", null, "Single File", -1),
           l("div", null, "Click the file", -1),
           l("div", null, "Click the file", -1),
@@ -37,7 +41,7 @@ const m = /* @__PURE__ */ s({
         ])], 2)
       ]),
       _: 1
-    }));
+    }, 8, ["container"]));
   }
 });
 export {

package/dist/components/PlFileDialog/Shortcuts.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Shortcuts.vue2.js","sources":["../../../src/components/PlFileDialog/Shortcuts.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { PlTooltip } from \"../PlTooltip\";\n</script>\n\n<template>\n  <PlTooltip class=\"info\" position=\"southwest\" max-width=\"420px\">\n    <template #tooltip>\n      <span :class=\"$style.title\">Shortcuts</span>\n\n      <div :class=\"[$style.row, $style.head]\">\n        <div />\n        <div>MacOS</div>\n        <div>Windows/Linux</div>\n      </div>\n\n      <div :class=\"[$style.row, $style.body]\">\n        <div>Single File</div>\n        <div>Click the file</div>\n        <div>Click the file</div>\n\n        <div>Adjacent multiple files</div>\n        <div>Hold Shift, click first and last files</div>\n        <div>Hold Shift, click first and last files</div>\n\n        <div>Non-adjacent multiple files</div>\n        <div>Hold Command (⌘), click each file</div>\n        <div>Hold Ctrl, click each file</div>\n\n        <div>All files</div>\n        <div>Press Command (⌘) + A</div>\n        <div>Press Ctrl + A</div>\n      </div>\n    </template>\n  </PlTooltip>\n</template>\n\n<style lang=\"css\" module>\n.title {\n  display: inline-block;\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 20px;\n  margin-bottom: 10px;\n}\n\n.row {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  width: 100%;\n  color: #fff;\n  column-gap: 1px;\n\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 20px;\n}\n\n.row > div:nth-child(3n + 1) {\n  padding-left: 4px;\n}\n\n.row > div:nth-child(3n) {\n  padding-right: 4px;\n}\n\n.head {\n  background-color: #110529;\n  position: relative;\n}\n\n.head:before {\n  position: absolute;\n  content: \"\";\n  background-color: #231842;\n  width: 12px;\n  left: -12px;\n  height: 100%;\n}\n\n.head:after {\n  position: absolute;\n  content: \"\";\n  background-color: #231842;\n  width: 12px;\n  right: -12px;\n  height: 100%;\n}\n\n.head > div {\n  padding: 6px 12px;\n  background-color: #231842;\n}\n\n.body {\n  background-color: #231842;\n}\n\n.body > div {\n  padding: 6px 12px;\n  background: #110529;\n}\n</style>\n"],"names":["_createBlock","_unref","PlTooltip","_createElementVNode","_normalizeClass","$style"],"mappings":";;;;;2BAKEA,EA4BYC,EAAAC,CAAA,GAAA;AAAA,MA5BD,OAAM;AAAA,MAAO,UAAS;AAAA,MAAY,aAAU;AAAA,IAAA;MAC1C,WACT,MAA4C;AAAA,QAA5CC,EAA4C,QAAA;AAAA,UAArC,OAAKC,EAAEC,EAAAA,OAAO,KAAK;AAAA,QAAA,GAAE,aAAS,CAAA;AAAA,QAErCF,EAIM,OAAA;AAAA,UAJA,UAAQE,EAAAA,OAAO,KAAKA,EAAAA,OAAO,IAAI,CAAA;AAAA,QAAA;UACnCF,EAAO,OAAA,MAAA,MAAA,EAAA;AAAA,UACPA,EAAgB,aAAX,SAAK,EAAA;AAAA,UACVA,EAAwB,aAAnB,iBAAa,EAAA;AAAA,QAAA;QAGpBA,EAgBM,OAAA;AAAA,UAhBA,UAAQE,EAAAA,OAAO,KAAKA,EAAAA,OAAO,IAAI,CAAA;AAAA,QAAA;UACnCF,EAAsB,aAAjB,eAAW,EAAA;AAAA,UAChBA,EAAyB,aAApB,kBAAc,EAAA;AAAA,UACnBA,EAAyB,aAApB,kBAAc,EAAA;AAAA,UAEnBA,EAAkC,aAA7B,2BAAuB,EAAA;AAAA,UAC5BA,EAAiD,aAA5C,0CAAsC,EAAA;AAAA,UAC3CA,EAAiD,aAA5C,0CAAsC,EAAA;AAAA,UAE3CA,EAAsC,aAAjC,+BAA2B,EAAA;AAAA,UAChCA,EAA4C,aAAvC,qCAAiC,EAAA;AAAA,UACtCA,EAAqC,aAAhC,8BAA0B,EAAA;AAAA,UAE/BA,EAAoB,aAAf,aAAS,EAAA;AAAA,UACdA,EAAgC,aAA3B,yBAAqB,EAAA;AAAA,UAC1BA,EAAyB,aAApB,kBAAc,EAAA;AAAA,QAAA;;;;;;"}
+{"version":3,"file":"Shortcuts.vue2.js","sources":["../../../src/components/PlFileDialog/Shortcuts.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { PlTooltip } from \"../PlTooltip\";\n\ndefineProps<{\n  container?: \"body\" | HTMLElement;\n}>();\n</script>\n\n<template>\n  <PlTooltip class=\"info\" position=\"bottom\" max-width=\"420px\" :container=\"container\">\n    <template #tooltip>\n      <span :class=\"$style.title\">Shortcuts</span>\n\n      <div :class=\"[$style.row, $style.head]\">\n        <div />\n        <div>MacOS</div>\n        <div>Windows/Linux</div>\n      </div>\n\n      <div :class=\"[$style.row, $style.body]\">\n        <div>Single File</div>\n        <div>Click the file</div>\n        <div>Click the file</div>\n\n        <div>Adjacent multiple files</div>\n        <div>Hold Shift, click first and last files</div>\n        <div>Hold Shift, click first and last files</div>\n\n        <div>Non-adjacent multiple files</div>\n        <div>Hold Command (⌘), click each file</div>\n        <div>Hold Ctrl, click each file</div>\n\n        <div>All files</div>\n        <div>Press Command (⌘) + A</div>\n        <div>Press Ctrl + A</div>\n      </div>\n    </template>\n  </PlTooltip>\n</template>\n\n<style lang=\"css\" module>\n.title {\n  display: inline-block;\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 20px;\n  margin-bottom: 10px;\n}\n\n.row {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  width: 100%;\n  color: #fff;\n  column-gap: 1px;\n\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 20px;\n}\n\n.row > div:nth-child(3n + 1) {\n  padding-left: 4px;\n}\n\n.row > div:nth-child(3n) {\n  padding-right: 4px;\n}\n\n.head {\n  background-color: #110529;\n  position: relative;\n}\n\n.head:before {\n  position: absolute;\n  content: \"\";\n  background-color: #231842;\n  width: 12px;\n  left: -12px;\n  height: 100%;\n}\n\n.head:after {\n  position: absolute;\n  content: \"\";\n  background-color: #231842;\n  width: 12px;\n  right: -12px;\n  height: 100%;\n}\n\n.head > div {\n  padding: 6px 12px;\n  background-color: #231842;\n}\n\n.body {\n  background-color: #231842;\n}\n\n.body > div {\n  padding: 6px 12px;\n  background: #110529;\n}\n</style>\n"],"names":["_createBlock","_unref","PlTooltip","__props","_createElementVNode","_normalizeClass","$style"],"mappings":";;;;;;;;2BASEA,EA4BYC,EAAAC,CAAA,GAAA;AAAA,MA5BD,OAAM;AAAA,MAAO,UAAS;AAAA,MAAS,aAAU;AAAA,MAAS,WAAWC,EAAA;AAAA,IAAA;MAC3D,WACT,MAA4C;AAAA,QAA5CC,EAA4C,QAAA;AAAA,UAArC,OAAKC,EAAEC,EAAAA,OAAO,KAAK;AAAA,QAAA,GAAE,aAAS,CAAA;AAAA,QAErCF,EAIM,OAAA;AAAA,UAJA,UAAQE,EAAAA,OAAO,KAAKA,EAAAA,OAAO,IAAI,CAAA;AAAA,QAAA;UACnCF,EAAO,OAAA,MAAA,MAAA,EAAA;AAAA,UACPA,EAAgB,aAAX,SAAK,EAAA;AAAA,UACVA,EAAwB,aAAnB,iBAAa,EAAA;AAAA,QAAA;QAGpBA,EAgBM,OAAA;AAAA,UAhBA,UAAQE,EAAAA,OAAO,KAAKA,EAAAA,OAAO,IAAI,CAAA;AAAA,QAAA;UACnCF,EAAsB,aAAjB,eAAW,EAAA;AAAA,UAChBA,EAAyB,aAApB,kBAAc,EAAA;AAAA,UACnBA,EAAyB,aAApB,kBAAc,EAAA;AAAA,UAEnBA,EAAkC,aAA7B,2BAAuB,EAAA;AAAA,UAC5BA,EAAiD,aAA5C,0CAAsC,EAAA;AAAA,UAC3CA,EAAiD,aAA5C,0CAAsC,EAAA;AAAA,UAE3CA,EAAsC,aAAjC,+BAA2B,EAAA;AAAA,UAChCA,EAA4C,aAAvC,qCAAiC,EAAA;AAAA,UACtCA,EAAqC,aAAhC,8BAA0B,EAAA;AAAA,UAE/BA,EAAoB,aAAf,aAAS,EAAA;AAAA,UACdA,EAAgC,aAA3B,yBAAqB,EAAA;AAAA,UAC1BA,EAAyB,aAApB,kBAAc,EAAA;AAAA,QAAA;;;;;;"}

package/dist/components/PlFileInput/PlFileInput.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as I, reactive as $, useSlots as q, computed as s, watch as R, ref as U, createElementBlock as u, openBlock as t, Fragment as x, createElementVNode as f, createVNode as B, normalizeClass as O, createCommentVNode as d, withModifiers as F, withKeys as z, createBlock as a, normalizeStyle as H, unref as r, toDisplayString as c, withCtx as K, renderSlot as L, createTextVNode as j } from "vue";
+import { defineComponent as I, reactive as q, useSlots as R, computed as s, watch as U, ref as $, createElementBlock as u, openBlock as t, Fragment as x, createElementVNode as f, createVNode as B, normalizeClass as O, createCommentVNode as d, withModifiers as P, withKeys as z, createBlock as a, normalizeStyle as H, unref as r, toDisplayString as c, withCtx as K, renderSlot as L, createTextVNode as j } from "vue";
 /* empty css                   */
 import { prettyBytes as g } from "@milaboratories/helpers";
 import { getFileNameFromHandle as A, getFilePathFromHandle as G } from "@platforma-sdk/model";
@@ -40,37 +40,37 @@ const le = {
     fileDialogCloseOnOutsideClick: { type: Boolean, default: !0 }
   },
   emits: ["update:modelValue"],
-  setup(l, { emit: N }) {
-    const n = $({
+  setup(l, { emit: F }) {
+    const n = q({
       fileDialogOpen: !1,
       error: void 0
-    }), v = q(), h = N, o = l, k = (e, i) => {
+    }), v = R(), h = F, o = l, k = (e, i) => {
       if (e)
         try {
           return i(e);
         } catch (p) {
           return n.error = p instanceof Error ? p.message : String(p), e;
         }
-    }, V = s(() => k(o.modelValue, A)), S = s(() => k(o.modelValue, G)), P = s(() => o.progress && !o.progress.done), E = s(() => o.progress && o.progress.done), _ = s(() => J(n.error, o.error)), y = s(() => typeof _.value == "string"), b = s(() => {
+    }, V = s(() => k(o.modelValue, A)), S = s(() => k(o.modelValue, G)), N = s(() => o.progress && !o.progress.done), T = s(() => o.progress && o.progress.done), b = s(() => J(n.error, o.error)), y = s(() => typeof b.value == "string"), C = s(() => {
       const { status: e, done: i } = o.progress ?? {};
       return !e || !e.bytesTotal ? "" : e.bytesProcessed && !i ? g(e.bytesProcessed, {}) + " / " + g(e.bytesTotal, {}) : g(e.bytesTotal, {});
-    }), T = s(() => {
+    }), E = s(() => {
       var i;
       const { progress: e } = o;
       return e ? {
         width: e.done ? "100%" : Math.round((((i = e.status) == null ? void 0 : i.progress) ?? 0) * 100) + "%"
       } : {};
-    }), C = () => {
+    }), _ = () => {
       n.fileDialogOpen = !0;
     }, w = (e) => {
       e.files.length && h("update:modelValue", e.files[0]);
     }, M = () => h("update:modelValue", void 0);
-    R(
+    U(
       () => o.modelValue,
       () => n.error = void 0,
       { immediate: !0 }
     );
-    const D = U();
+    const D = $();
     return o.cellStyle || W(D), (e, i) => (t(), u(x, null, [
       f("div", {
         class: O([{ "pl-file-input__cell-style": !!l.cellStyle, "has-file": !!V.value }, "pl-file-input__envelope"])
@@ -80,11 +80,11 @@ const le = {
           ref: D,
           class: O([{ dashed: l.dashed, error: y.value }, "pl-file-input"]),
           tabindex: "0",
-          onKeyup: z(C, ["enter"]),
-          onClick: F(C, ["stop"])
+          onKeyup: z(_, ["enter"]),
+          onClick: P(_, ["stop"])
         }, [
           f("div", {
-            style: H(T.value),
+            style: H(E.value),
             class: "pl-file-input__progress"
           }, null, 4),
           !l.cellStyle && l.label ? (t(), u("label", le, [
@@ -109,10 +109,10 @@ const le = {
           y.value ? (t(), a(r(m), {
             key: 1,
             name: "restart"
-          })) : P.value ? (t(), a(r(m), {
+          })) : N.value ? (t(), a(r(m), {
             key: 2,
             name: "cloud-upload"
-          })) : E.value ? (t(), a(r(m), {
+          })) : T.value ? (t(), a(r(m), {
             key: 3,
             name: "success"
           })) : (t(), a(r(m), {
@@ -123,16 +123,16 @@ const le = {
             "data-placeholder": l.placeholder ?? "Choose file",
             class: "pl-file-input__filename"
           }, c(V.value), 9, te),
-          b.value ? (t(), u("div", oe, c(b.value), 1)) : d("", !0),
+          C.value ? (t(), u("div", oe, c(C.value), 1)) : d("", !0),
           l.modelValue ? (t(), a(r(m), {
             key: 6,
             class: "pl-file-input__clear",
             name: "close",
-            onClick: F(M, ["stop"])
+            onClick: P(M, ["stop"])
           })) : d("", !0),
           B(Q, { class: "pl-file-input__contour" })
         ], 34),
-        y.value ? (t(), u("div", re, c(_.value), 1)) : l.helper ? (t(), u("div", ie, c(l.helper), 1)) : d("", !0)
+        y.value ? (t(), u("div", re, c(b.value), 1)) : l.helper ? (t(), u("div", ie, c(l.helper), 1)) : d("", !0)
       ], 2),
       B(r(X), {
         modelValue: n.fileDialogOpen,