@milaboratories/uikit 2.15.36 → 2.15.38

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

@@ -1 +1 @@
-{"version":3,"file":"Remote.js","names":[],"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-helpers\";\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.id !== \"local\" && !it.id.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"],"mappings":""}
+{"version":3,"file":"Remote.js","names":[],"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-helpers\";\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.id !== \"local\" && !it.id.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\" data-testid=\"pl-file-dialog-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          data-testid=\"pl-file-dialog-storage\"\n        />\n      </div>\n      <div>\n        <PlSearchField\n          v-model=\"data.search\"\n          label=\"Search in folder\"\n          clearable\n          data-testid=\"pl-file-dialog-search\"\n        />\n      </div>\n    </div>\n    <div :class=\"style['ls-container']\" ref=\"lsContainerRef\" data-testid=\"pl-file-dialog-browser\">\n      <div :class=\"style['ls-head']\">\n        <div :class=\"style['breadcrumbs']\" data-testid=\"pl-file-dialog-breadcrumbs\">\n          <template v-for=\"(s, i) in breadcrumbs\" :key=\"i\">\n            <div\n              :title=\"s.path\"\n              data-testid=\"pl-file-dialog-breadcrumb\"\n              @click=\"setDirPath(s.path)\"\n            >\n              {{ s.name }}\n            </div>\n            <PlIcon16 v-if=\"s.index !== breadcrumbs.length - 1\" name=\"chevron-right\" />\n          </template>\n        </div>\n        <div :class=\"style.selected\">\n          <span data-testid=\"pl-file-dialog-selected-count\"\n            >Selected: {{ selectedFiles.length }}</span\n          >\n          <Shortcuts :container=\"lsContainerRef\" />\n        </div>\n      </div>\n      <div\n        v-if=\"data.currentLoadingPath !== undefined\"\n        class=\"ls-loader\"\n        data-testid=\"pl-file-dialog-loading\"\n      >\n        <i class=\"mask-24 mask-loading loader-icon\" />\n      </div>\n      <div\n        v-else-if=\"!data.storageEntry\"\n        :class=\"style['ls-empty']\"\n        data-testid=\"pl-file-dialog-empty\"\n      >\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']\" data-testid=\"pl-file-dialog-error\">\n        <div :class=\"style.cat\" />\n        <div :class=\"style.message\">{{ data.error }}</div>\n      </div>\n      <div v-else :class=\"style['ls-body']\" data-testid=\"pl-file-dialog-items\">\n        <template v-for=\"file in visibleItems\" :key=\"file.id\">\n          <div\n            v-if=\"file.isDir\"\n            :class=\"style.isDir\"\n            data-testid=\"pl-file-dialog-dir\"\n            @click=\"setDirPath(file.path)\"\n          >\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            data-testid=\"pl-file-dialog-file\"\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"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"Remote.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlFileDialog/Remote.vue"],"names":[],"mappings":"AAoVA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,OAAO,EAA2B,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAoBnF,KAAK,WAAW,GAAG;IACf,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAmeJ,QAAA,MAAM,YAAY;;;;;;;;;;;;;WAteN,MAAM;gBAFD,MAAM,EAAE;uBAGD,OAAO;6EA0e7B,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"Remote.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlFileDialog/Remote.vue"],"names":[],"mappings":"AAgXA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,OAAO,EAA2B,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAoBnF,KAAK,WAAW,GAAG;IACf,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAkfJ,QAAA,MAAM,YAAY;;;;;;;;;;;;;WArfN,MAAM;gBAFD,MAAM,EAAE;uBAGD,OAAO;6EAyf7B,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -9,15 +9,16 @@ import "../PlSearchField/index.js";
 import i from "./pl-file-dialog.module.js";
 import a from "./Shortcuts.js";
 import { defaultData as o, useVisibleItems as s, vTextOverflown as c } from "./remote-helpers.js";
-import { getFilePathBreadcrumbs as l, normalizeExtensions as ee } from "./utils.js";
-import { Fragment as u, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createTextVNode as g, createVNode as _, defineComponent as v, normalizeClass as y, onMounted as b, openBlock as x, reactive as S, ref as C, renderList as w, toDisplayString as T, toRef as E, unref as D, watch as O, withDirectives as k, withModifiers as A } from "vue";
-import { between as j, notEmpty as M, tapIf as N } from "@milaboratories/helpers";
-import { getRawPlatformaInstance as P } from "@platforma-sdk/model";
+import { getFilePathBreadcrumbs as l, normalizeExtensions as u } from "./utils.js";
+import { Fragment as d, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createTextVNode as _, createVNode as v, defineComponent as y, normalizeClass as b, onMounted as x, openBlock as S, reactive as ee, ref as te, renderList as C, toDisplayString as w, toRef as T, unref as E, watch as D, withDirectives as O, withModifiers as k } from "vue";
+import { between as A, notEmpty as j, tapIf as ne } from "@milaboratories/helpers";
+import { getRawPlatformaInstance as M } from "@platforma-sdk/model";
 //#region src/components/PlFileDialog/Remote.vue?vue&type=script&setup=true&lang.ts
-var te = ["title", "onClick"], ne = {
+var re = ["title", "onClick"], ie = { "data-testid": "pl-file-dialog-selected-count" }, ae = {
 	key: 0,
-	class: "ls-loader"
-}, re = ["onClick"], ie = ["title"], F = ["onClick"], I = ["title"], L = /* @__PURE__ */ v({
+	class: "ls-loader",
+	"data-testid": "pl-file-dialog-loading"
+}, oe = ["onClick"], N = ["title"], P = ["onClick"], F = ["title"], I = /* @__PURE__ */ y({
 	__name: "Remote",
 	props: {
 		modelValue: { type: Boolean },
@@ -31,133 +32,146 @@ var te = ["title", "onClick"], ne = {
 		submit: {}
 	},
 	emits: ["update:modelValue", "import:files"],
-	setup(v, { expose: L }) {
-		let R = (e) => e.ctrlKey || e.metaKey, z = v, B = S(o()), V = () => {
-			B.search = "", B.error = "", B.lastSelected = void 0;
-		}, H = d(() => ee(z.extensions)), U = s(B), W = d(() => ({
-			modelValue: z.modelValue,
-			dirPath: B.dirPath,
-			storageHandle: B.storageEntry?.handle
-		})), G = (e, t) => {
-			P() && B.currentLoadingPath !== t && (B.currentLoadingPath = t, P().lsDriver.listFiles(e, t).then((e) => {
-				t === B.dirPath && (B.items = M(e).entries.map((e) => ({
+	setup(y, { expose: I }) {
+		let L = (e) => e.ctrlKey || e.metaKey, R = y, z = ee(o()), B = () => {
+			z.search = "", z.error = "", z.lastSelected = void 0;
+		}, V = f(() => u(R.extensions)), H = s(z), U = f(() => ({
+			modelValue: R.modelValue,
+			dirPath: z.dirPath,
+			storageHandle: z.storageEntry?.handle
+		})), W = (e, t) => {
+			M() && z.currentLoadingPath !== t && (z.currentLoadingPath = t, M().lsDriver.listFiles(e, t).then((e) => {
+				t === z.dirPath && (z.items = j(e).entries.map((e) => ({
 					path: e.fullPath,
 					name: e.name,
 					isDir: e.type === "dir",
-					canBeSelected: e.type === "file" && (!H.value || H.value.some((t) => e.fullPath.endsWith(t))),
+					canBeSelected: e.type === "file" && (!V.value || V.value.some((t) => e.fullPath.endsWith(t))),
 					handle: e.type === "file" ? e.handle : void 0,
 					selected: !1
 				})).sort((e, t) => e.isDir && !t.isDir ? -1 : !e.isDir && t.isDir ? 1 : e.name.localeCompare(t.name)).map((e, t) => ({
 					id: t,
 					...e
-				})), B.lastSelected = void 0);
-			}).catch((e) => B.error = String(e)).finally(() => {
-				B.currentLoadingPath = void 0;
+				})), z.lastSelected = void 0);
+			}).catch((e) => z.error = String(e)).finally(() => {
+				z.currentLoadingPath = void 0;
 			}));
-		}, K = () => {
-			V();
-			let { storageHandle: e, dirPath: t, modelValue: n } = W.value;
-			e && n && G(e, t);
-		}, q = d(() => l(B.dirPath)), J = d(() => B.items.filter((e) => e.canBeSelected && e.selected && !e.isDir)), ae = d(() => J.value.length > 0 && B.storageEntry?.handle), oe = () => ({
-			storageHandle: M(B.storageEntry?.handle),
-			files: J.value.map((e) => e.handle)
-		}), Y = (e) => {
-			B.dirPath = e;
-		}, se = (e, t) => {
-			let { shiftKey: n } = e, r = R(e), { lastSelected: i } = B;
+		}, G = () => {
+			B();
+			let { storageHandle: e, dirPath: t, modelValue: n } = U.value;
+			e && n && W(e, t);
+		}, K = f(() => l(z.dirPath)), q = f(() => z.items.filter((e) => e.canBeSelected && e.selected && !e.isDir)), se = f(() => q.value.length > 0 && z.storageEntry?.handle), ce = () => ({
+			storageHandle: j(z.storageEntry?.handle),
+			files: q.value.map((e) => e.handle)
+		}), J = (e) => {
+			z.dirPath = e;
+		}, le = (e, t) => {
+			let { shiftKey: n } = e, r = L(e), { lastSelected: i } = z;
 			e.preventDefault();
-			let a = U.value;
+			let a = H.value;
 			if (t.canBeSelected) {
-				if (z.multi || a.forEach((e) => e.selected = !1), t.selected = !t.selected, !z.multi) return;
+				if (R.multi || a.forEach((e) => e.selected = !1), t.selected = !t.selected, !R.multi) return;
 				!r && !n && a.forEach((e) => {
 					e.id !== t.id && (e.selected = !1);
 				}), n && i !== void 0 && a.forEach((e) => {
-					j(e.id, i, t.id) && (e.selected = !0);
-				}), t.selected && (B.lastSelected = t.id);
+					A(e.id, i, t.id) && (e.selected = !0);
+				}), t.selected && (z.lastSelected = t.id);
 			}
-		}, X = (e) => {
-			e && !z.multi || U.value.filter((e) => e.canBeSelected).forEach((t) => {
+		}, Y = (e) => {
+			e && !R.multi || H.value.filter((e) => e.canBeSelected).forEach((t) => {
 				t.selected = e;
 			});
-		}, ce = () => X(!0), Z = () => X(!1), Q = () => {
-			if (V(), Z(), !P()) {
+		}, X = () => Y(!0), Z = () => Y(!1), Q = () => {
+			if (B(), Z(), !M()) {
 				console.warn("platforma API is not found");
 				return;
 			}
-			P().lsDriver.getStorageList().then((e) => {
-				e = e.filter((e) => e.id !== "local" && !e.id.startsWith("local_disk_")), B.storageOptions = e.map((e) => ({
+			M().lsDriver.getStorageList().then((e) => {
+				e = e.filter((e) => e.id !== "local" && !e.id.startsWith("local_disk_")), z.storageOptions = e.map((e) => ({
 					text: e.name,
 					value: e
-				})), z.autoSelectStorage && N(e[0], (e) => {
-					B.storageEntry = e;
+				})), R.autoSelectStorage && ne(e[0], (e) => {
+					z.storageEntry = e;
 				});
-			}).catch((e) => B.error = String(e));
+			}).catch((e) => z.error = String(e));
 		};
-		O(E(B, "storageEntry"), (e) => {
-			V(), B.dirPath = e?.initialFullPath ?? "";
-		}, { immediate: !0 }), O([() => B.dirPath, () => B.storageEntry], () => {
-			K();
-		}), O(() => z.modelValue, (e) => {
-			e ? Q() : Object.assign(B, o());
+		D(T(z, "storageEntry"), (e) => {
+			B(), z.dirPath = e?.initialFullPath ?? "";
+		}, { immediate: !0 }), D([() => z.dirPath, () => z.storageEntry], () => {
+			G();
+		}), D(() => R.modelValue, (e) => {
+			e ? Q() : Object.assign(z, o());
 		}, { immediate: !0 }), e(document, "keydown", (e) => {
-			if (!z.modelValue || e.target !== document.body) return;
-			let t = R(e);
-			t && e.code === "KeyA" && (e.preventDefault(), ce()), t && e.shiftKey && e.code === "Period" && (e.preventDefault(), B.showHiddenItems = !B.showHiddenItems), e.code === "Enter" && z.submit();
-		}), L({
-			isReady: ae,
-			getFilesToImport: oe
-		}), b(Q);
-		let $ = C();
-		return (e, o) => (x(), m("div", {
-			class: y(D(i).remote),
-			onClick: A(Z, ["stop"])
-		}, [h("div", { class: y(D(i).search) }, [h("div", null, [_(D(n), {
-			modelValue: B.storageEntry,
-			"onUpdate:modelValue": o[0] ||= (e) => B.storageEntry = e,
+			if (!R.modelValue || e.target !== document.body) return;
+			let t = L(e);
+			t && e.code === "KeyA" && (e.preventDefault(), X()), t && e.shiftKey && e.code === "Period" && (e.preventDefault(), z.showHiddenItems = !z.showHiddenItems), e.code === "Enter" && R.submit();
+		}), I({
+			isReady: se,
+			getFilesToImport: ce
+		}), x(Q);
+		let $ = te();
+		return (e, o) => (S(), h("div", {
+			class: b(E(i).remote),
+			"data-testid": "pl-file-dialog-remote",
+			onClick: k(Z, ["stop"])
+		}, [g("div", { class: b(E(i).search) }, [g("div", null, [v(E(n), {
+			modelValue: z.storageEntry,
+			"onUpdate:modelValue": o[0] ||= (e) => z.storageEntry = e,
 			label: "Select storage",
-			options: B.storageOptions
-		}, null, 8, ["modelValue", "options"])]), h("div", null, [_(D(r), {
-			modelValue: B.search,
-			"onUpdate:modelValue": o[1] ||= (e) => B.search = e,
+			options: z.storageOptions,
+			"data-testid": "pl-file-dialog-storage"
+		}, null, 8, ["modelValue", "options"])]), g("div", null, [v(E(r), {
+			modelValue: z.search,
+			"onUpdate:modelValue": o[1] ||= (e) => z.search = e,
 			label: "Search in folder",
-			clearable: ""
-		}, null, 8, ["modelValue"])])], 2), h("div", {
-			class: y(D(i)["ls-container"]),
+			clearable: "",
+			"data-testid": "pl-file-dialog-search"
+		}, null, 8, ["modelValue"])])], 2), g("div", {
+			class: b(E(i)["ls-container"]),
 			ref_key: "lsContainerRef",
-			ref: $
-		}, [h("div", { class: y(D(i)["ls-head"]) }, [h("div", { class: y(D(i).breadcrumbs) }, [(x(!0), m(u, null, w(q.value, (e, n) => (x(), m(u, { key: n }, [h("div", {
+			ref: $,
+			"data-testid": "pl-file-dialog-browser"
+		}, [g("div", { class: b(E(i)["ls-head"]) }, [g("div", {
+			class: b(E(i).breadcrumbs),
+			"data-testid": "pl-file-dialog-breadcrumbs"
+		}, [(S(!0), h(d, null, C(K.value, (e, n) => (S(), h(d, { key: n }, [g("div", {
 			title: e.path,
-			onClick: (t) => Y(e.path)
-		}, T(e.name), 9, te), e.index === q.value.length - 1 ? p("", !0) : (x(), f(D(t), {
+			"data-testid": "pl-file-dialog-breadcrumb",
+			onClick: (t) => J(e.path)
+		}, w(e.name), 9, re), e.index === K.value.length - 1 ? m("", !0) : (S(), p(E(t), {
 			key: 0,
 			name: "chevron-right"
-		}))], 64))), 128))], 2), h("div", { class: y(D(i).selected) }, [h("span", null, "Selected: " + T(J.value.length), 1), _(a, { container: $.value }, null, 8, ["container"])], 2)], 2), B.currentLoadingPath === void 0 ? B.storageEntry ? B.error ? (x(), m("div", {
+		}))], 64))), 128))], 2), g("div", { class: b(E(i).selected) }, [g("span", ie, "Selected: " + w(q.value.length), 1), v(a, { container: $.value }, null, 8, ["container"])], 2)], 2), z.currentLoadingPath === void 0 ? z.storageEntry ? z.error ? (S(), h("div", {
 			key: 2,
-			class: y(D(i)["ls-error"])
-		}, [h("div", { class: y(D(i).cat) }, null, 2), h("div", { class: y(D(i).message) }, T(B.error), 3)], 2)) : (x(), m("div", {
+			class: b(E(i)["ls-error"]),
+			"data-testid": "pl-file-dialog-error"
+		}, [g("div", { class: b(E(i).cat) }, null, 2), g("div", { class: b(E(i).message) }, w(z.error), 3)], 2)) : (S(), h("div", {
 			key: 3,
-			class: y(D(i)["ls-body"])
-		}, [(x(!0), m(u, null, w(D(U), (e) => (x(), m(u, { key: e.id }, [e.isDir ? (x(), m("div", {
+			class: b(E(i)["ls-body"]),
+			"data-testid": "pl-file-dialog-items"
+		}, [(S(!0), h(d, null, C(E(H), (e) => (S(), h(d, { key: e.id }, [e.isDir ? (S(), h("div", {
 			key: 0,
-			class: y(D(i).isDir),
-			onClick: (t) => Y(e.path)
-		}, [_(D(t), { name: "chevron-right" }), k((x(), m("span", { title: e.name }, [g(T(e.name), 1)], 8, ie)), [[D(c)]])], 10, re)) : (x(), m("div", {
+			class: b(E(i).isDir),
+			"data-testid": "pl-file-dialog-dir",
+			onClick: (t) => J(e.path)
+		}, [v(E(t), { name: "chevron-right" }), O((S(), h("span", { title: e.name }, [_(w(e.name), 1)], 8, N)), [[E(c)]])], 10, oe)) : (S(), h("div", {
 			key: 1,
-			class: y({
-				[D(i).canBeSelected]: e.canBeSelected,
-				[D(i).selected]: e.selected
+			class: b({
+				[E(i).canBeSelected]: e.canBeSelected,
+				[E(i).selected]: e.selected
 			}),
-			onClick: A((t) => se(t, e), ["stop"])
-		}, [_(D(t), {
+			"data-testid": "pl-file-dialog-file",
+			onClick: k((t) => le(t, e), ["stop"])
+		}, [v(E(t), {
 			name: "box",
-			class: y(D(i).isFile)
-		}, null, 8, ["class"]), k((x(), m("span", { title: e.name }, [g(T(e.name), 1)], 8, I)), [[D(c)]])], 10, F))], 64))), 128))], 2)) : (x(), m("div", {
+			class: b(E(i).isFile)
+		}, null, 8, ["class"]), O((S(), h("span", { title: e.name }, [_(w(e.name), 1)], 8, F)), [[E(c)]])], 10, P))], 64))), 128))], 2)) : (S(), h("div", {
 			key: 1,
-			class: y(D(i)["ls-empty"])
-		}, [h("div", { class: y(D(i).cat) }, null, 2), h("div", { class: y(D(i).message) }, "Select storage to preview", 2)], 2)) : (x(), m("div", ne, [...o[2] ||= [h("i", { class: "mask-24 mask-loading loader-icon" }, null, -1)]]))], 2)], 2));
+			class: b(E(i)["ls-empty"]),
+			"data-testid": "pl-file-dialog-empty"
+		}, [g("div", { class: b(E(i).cat) }, null, 2), g("div", { class: b(E(i).message) }, "Select storage to preview", 2)], 2)) : (S(), h("div", ae, [...o[2] ||= [g("i", { class: "mask-24 mask-loading loader-icon" }, null, -1)]]))], 2)], 2));
 	}
 });
 //#endregion
-export { L as default };
+export { I as default };
 
 //# sourceMappingURL=Remote.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Remote.vue_vue_type_script_setup_true_lang.js","names":[],"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-helpers\";\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.id !== \"local\" && !it.id.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"],"mappings":"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"}
+{"version":3,"file":"Remote.vue_vue_type_script_setup_true_lang.js","names":[],"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-helpers\";\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.id !== \"local\" && !it.id.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\" data-testid=\"pl-file-dialog-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          data-testid=\"pl-file-dialog-storage\"\n        />\n      </div>\n      <div>\n        <PlSearchField\n          v-model=\"data.search\"\n          label=\"Search in folder\"\n          clearable\n          data-testid=\"pl-file-dialog-search\"\n        />\n      </div>\n    </div>\n    <div :class=\"style['ls-container']\" ref=\"lsContainerRef\" data-testid=\"pl-file-dialog-browser\">\n      <div :class=\"style['ls-head']\">\n        <div :class=\"style['breadcrumbs']\" data-testid=\"pl-file-dialog-breadcrumbs\">\n          <template v-for=\"(s, i) in breadcrumbs\" :key=\"i\">\n            <div\n              :title=\"s.path\"\n              data-testid=\"pl-file-dialog-breadcrumb\"\n              @click=\"setDirPath(s.path)\"\n            >\n              {{ s.name }}\n            </div>\n            <PlIcon16 v-if=\"s.index !== breadcrumbs.length - 1\" name=\"chevron-right\" />\n          </template>\n        </div>\n        <div :class=\"style.selected\">\n          <span data-testid=\"pl-file-dialog-selected-count\"\n            >Selected: {{ selectedFiles.length }}</span\n          >\n          <Shortcuts :container=\"lsContainerRef\" />\n        </div>\n      </div>\n      <div\n        v-if=\"data.currentLoadingPath !== undefined\"\n        class=\"ls-loader\"\n        data-testid=\"pl-file-dialog-loading\"\n      >\n        <i class=\"mask-24 mask-loading loader-icon\" />\n      </div>\n      <div\n        v-else-if=\"!data.storageEntry\"\n        :class=\"style['ls-empty']\"\n        data-testid=\"pl-file-dialog-empty\"\n      >\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']\" data-testid=\"pl-file-dialog-error\">\n        <div :class=\"style.cat\" />\n        <div :class=\"style.message\">{{ data.error }}</div>\n      </div>\n      <div v-else :class=\"style['ls-body']\" data-testid=\"pl-file-dialog-items\">\n        <template v-for=\"file in visibleItems\" :key=\"file.id\">\n          <div\n            v-if=\"file.isDir\"\n            :class=\"style.isDir\"\n            data-testid=\"pl-file-dialog-dir\"\n            @click=\"setDirPath(file.path)\"\n          >\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            data-testid=\"pl-file-dialog-file\"\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"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"Shortcuts.js","names":[],"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"],"mappings":""}
+{"version":3,"file":"Shortcuts.js","names":[],"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\n    class=\"info\"\n    position=\"bottom\"\n    max-width=\"420px\"\n    :container=\"container\"\n    data-testid=\"pl-file-dialog-shortcuts\"\n  >\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"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"Shortcuts.vue_vue_type_style_index_0_lang.module.js","names":[],"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"],"mappings":""}
+{"version":3,"file":"Shortcuts.vue_vue_type_style_index_0_lang.module.js","names":[],"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\n    class=\"info\"\n    position=\"bottom\"\n    max-width=\"420px\"\n    :container=\"container\"\n    data-testid=\"pl-file-dialog-shortcuts\"\n  >\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"],"mappings":""}

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":"AA+GA,KAAK,WAAW,GAAG;IACjB,SAAS,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;CAClC,CAAC;AAwGF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"Shortcuts.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlFileDialog/Shortcuts.vue"],"names":[],"mappings":"AAqHA,KAAK,WAAW,GAAG;IACjB,SAAS,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;CAClC,CAAC;AA0GF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -10,7 +10,8 @@ var c = /* @__PURE__ */ r({
 			class: "info",
 			position: "bottom",
 			"max-width": "420px",
-			container: r.container
+			container: r.container,
+			"data-testid": "pl-file-dialog-shortcuts"
 		}, {
 			tooltip: s(() => [
 				n("span", { class: i(c.$style.title) }, "Shortcuts", 2),

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

@@ -1 +1 @@
-{"version":3,"file":"Shortcuts.vue_vue_type_script_setup_true_lang.js","names":["$style"],"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"],"mappings":";;;;;;;;yBASE,EA4BY,EAAA,EAAA,EAAA;GA5BD,OAAM;GAAO,UAAS;GAAS,aAAU;GAAS,WAAW,EAAA;;GAC3D,SAAO,QAC4B;IAA5C,EAA4C,QAAA,EAArC,OAAK,EAAEA,EAAAA,OAAO,MAAK,EAAA,EAAE,aAAS,EAAA;IAErC,EAIM,OAAA,EAJA,OAAK,EAAA,CAAGA,EAAAA,OAAO,KAAKA,EAAAA,OAAO,KAAI,CAAA,EAAA,EAAA,CAAA,GAAA,AAAA,EAAA,OAAA;KACnC,EAAO,OAAA,MAAA,MAAA,GAAA;KACP,EAAgB,OAAA,MAAX,SAAK,GAAA;KACV,EAAwB,OAAA,MAAnB,iBAAa,GAAA;;IAGpB,EAgBM,OAAA,EAhBA,OAAK,EAAA,CAAGA,EAAAA,OAAO,KAAKA,EAAAA,OAAO,KAAI,CAAA,EAAA,EAAA,CAAA,GAAA,AAAA,EAAA,OAAA;KACnC,EAAsB,OAAA,MAAjB,eAAW,GAAA;KAChB,EAAyB,OAAA,MAApB,kBAAc,GAAA;KACnB,EAAyB,OAAA,MAApB,kBAAc,GAAA;KAEnB,EAAkC,OAAA,MAA7B,2BAAuB,GAAA;KAC5B,EAAiD,OAAA,MAA5C,0CAAsC,GAAA;KAC3C,EAAiD,OAAA,MAA5C,0CAAsC,GAAA;KAE3C,EAAsC,OAAA,MAAjC,+BAA2B,GAAA;KAChC,EAA4C,OAAA,MAAvC,qCAAiC,GAAA;KACtC,EAAqC,OAAA,MAAhC,8BAA0B,GAAA;KAE/B,EAAoB,OAAA,MAAf,aAAS,GAAA;KACd,EAAgC,OAAA,MAA3B,yBAAqB,GAAA;KAC1B,EAAyB,OAAA,MAApB,kBAAc,GAAA"}
+{"version":3,"file":"Shortcuts.vue_vue_type_script_setup_true_lang.js","names":["$style"],"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\n    class=\"info\"\n    position=\"bottom\"\n    max-width=\"420px\"\n    :container=\"container\"\n    data-testid=\"pl-file-dialog-shortcuts\"\n  >\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"],"mappings":";;;;;;;;yBASE,EAkCY,EAAA,EAAA,EAAA;GAjCV,OAAM;GACN,UAAS;GACT,aAAU;GACT,WAAW,EAAA;GACZ,eAAY;;GAED,SAAO,QAC4B;IAA5C,EAA4C,QAAA,EAArC,OAAK,EAAEA,EAAAA,OAAO,MAAK,EAAA,EAAE,aAAS,EAAA;IAErC,EAIM,OAAA,EAJA,OAAK,EAAA,CAAGA,EAAAA,OAAO,KAAKA,EAAAA,OAAO,KAAI,CAAA,EAAA,EAAA,CAAA,GAAA,AAAA,EAAA,OAAA;KACnC,EAAO,OAAA,MAAA,MAAA,GAAA;KACP,EAAgB,OAAA,MAAX,SAAK,GAAA;KACV,EAAwB,OAAA,MAAnB,iBAAa,GAAA;;IAGpB,EAgBM,OAAA,EAhBA,OAAK,EAAA,CAAGA,EAAAA,OAAO,KAAKA,EAAAA,OAAO,KAAI,CAAA,EAAA,EAAA,CAAA,GAAA,AAAA,EAAA,OAAA;KACnC,EAAsB,OAAA,MAAjB,eAAW,GAAA;KAChB,EAAyB,OAAA,MAApB,kBAAc,GAAA;KACnB,EAAyB,OAAA,MAApB,kBAAc,GAAA;KAEnB,EAAkC,OAAA,MAA7B,2BAAuB,GAAA;KAC5B,EAAiD,OAAA,MAA5C,0CAAsC,GAAA;KAC3C,EAAiD,OAAA,MAA5C,0CAAsC,GAAA;KAE3C,EAAsC,OAAA,MAAjC,+BAA2B,GAAA;KAChC,EAA4C,OAAA,MAAvC,qCAAiC,GAAA;KACtC,EAAqC,OAAA,MAAhC,8BAA0B,GAAA;KAE/B,EAAoB,OAAA,MAAf,aAAS,GAAA;KACd,EAAgC,OAAA,MAA3B,yBAAqB,GAAA;KAC1B,EAAyB,OAAA,MAApB,kBAAc,GAAA"}

package/dist/components/PlFileInput/PlFileInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlFileInput.js","names":[],"sources":["../../../src/components/PlFileInput/PlFileInput.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport \"./pl-file-input.scss\";\n\nimport { prettyBytes } from \"@milaboratories/helpers\";\nimport type { ImportFileHandle, ImportProgress } from \"@platforma-sdk/model\";\nimport { getFileNameFromHandle, getFilePathFromHandle } from \"@platforma-sdk/model\";\nimport { computed, reactive, ref, useSlots, watch } from \"vue\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport type { ImportedFiles } from \"../../types\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport { PlFileDialog } from \"../PlFileDialog\";\nimport { PlMaskIcon24 } from \"../PlMaskIcon24\";\nimport { PlTooltip } from \"../PlTooltip\";\n\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\nimport { PlSvg } from \"../PlSvg\";\n\nconst data = reactive({\n  fileDialogOpen: false,\n  error: undefined as undefined | string,\n});\n\nconst slots = useSlots();\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: ImportFileHandle | undefined): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current import file handle.\n     */\n    modelValue: ImportFileHandle | undefined;\n    /**\n     * The label to display above the input field.\n     */\n    label?: string;\n    /**\n     * If `true`, the input field is marked as required.\n     */\n    required?: boolean;\n    /**\n     * If `true`, the component border is dashed.\n     */\n    dashed?: boolean;\n    /**\n     * Allowed file extensions (should start with `.`)\n     */\n    extensions?: string[];\n    /**\n     * Placeholder text\n     */\n    placeholder?: string;\n    /**\n     * Import/Upload progress\n     */\n    progress?: ImportProgress;\n    /**\n     * An error message to display below the input field.\n     */\n    error?: unknown;\n    /**\n     * A helper text to display below the input field when there are no errors.\n     */\n    helper?: string;\n    /**\n     * Remove rounded border and change styles\n     */\n    cellStyle?: boolean;\n    /**\n     * File dialog title\n     */\n    fileDialogTitle?: string;\n    /**\n     * If `true`, the file dialog window closes when clicking outside the modal area (default: `true`)\n     */\n    fileDialogCloseOnOutsideClick?: boolean;\n  }>(),\n  {\n    label: undefined,\n    extensions: undefined,\n    fileDialogTitle: undefined,\n    placeholder: undefined,\n    progress: undefined,\n    error: undefined,\n    helper: undefined,\n    cellStyle: false,\n    fileDialogCloseOnOutsideClick: true,\n  },\n);\n\nconst tryValue = <T extends ImportFileHandle>(\n  v: T | undefined,\n  cb: (v: T) => string | undefined,\n) => {\n  if (!v) {\n    return undefined;\n  }\n\n  try {\n    return cb(v);\n  } catch (err) {\n    data.error = err instanceof Error ? err.message : String(err);\n    return v;\n  }\n};\n\nconst fileName = computed(() => tryValue(props.modelValue, getFileNameFromHandle));\n\nconst filePath = computed(() => tryValue(props.modelValue, getFilePathFromHandle));\n\nconst isUploading = computed(() => props.progress && !props.progress.done);\n\nconst isUploaded = computed(() => props.progress && props.progress.done);\n\nconst computedErrorMessage = computed(() => getErrorMessage(data.error, props.error));\n\nconst hasErrors = computed(() => typeof computedErrorMessage.value === \"string\");\n\nconst uploadStats = computed(() => {\n  const { status, done } = props.progress ?? {};\n\n  if (!status || !status.bytesTotal) {\n    return \"\";\n  }\n\n  if (status.bytesProcessed && !done) {\n    return prettyBytes(status.bytesProcessed, {}) + \" / \" + prettyBytes(status.bytesTotal, {});\n  }\n\n  return prettyBytes(status.bytesTotal, {});\n});\n\nconst progressStyle = computed(() => {\n  const { progress } = props;\n\n  if (!progress) {\n    return {};\n  }\n\n  return {\n    width: progress.done ? \"100%\" : Math.round((progress.status?.progress ?? 0) * 100) + \"%\",\n  };\n});\n\nconst openFileDialog = () => {\n  data.fileDialogOpen = true;\n};\n\nconst onImport = (v: ImportedFiles) => {\n  if (v.files.length) {\n    emit(\"update:modelValue\", v.files[0]);\n  }\n};\n\nconst clear = () => emit(\"update:modelValue\", undefined);\n\nwatch(\n  () => props.modelValue,\n  () => (data.error = undefined),\n  { immediate: true },\n);\n\nconst rootRef = ref();\n\nif (!props.cellStyle) {\n  useLabelNotch(rootRef);\n}\n</script>\n\n<template>\n  <div\n    :class=\"{ 'pl-file-input__cell-style': !!cellStyle, 'has-file': !!fileName }\"\n    class=\"pl-file-input__envelope\"\n  >\n    <div\n      ref=\"rootRef\"\n      :class=\"{ dashed, error: hasErrors }\"\n      class=\"pl-file-input\"\n      tabindex=\"0\"\n      @keyup.enter=\"openFileDialog\"\n      @click.stop=\"openFileDialog\"\n    >\n      <div :style=\"progressStyle\" class=\"pl-file-input__progress\" />\n      <label v-if=\"!cellStyle && label\" ref=\"label\">\n        <PlSvg v-if=\"required\" :uri=\"SvgRequired\" />\n        <span>{{ label }}</span>\n        <PlTooltip v-if=\"slots.tooltip || filePath\" class=\"info\" position=\"top\">\n          <template #tooltip>\n            <slot v-if=\"slots.tooltip\" name=\"tooltip\" />\n            <template v-else>{{ filePath }}</template>\n          </template>\n        </PlTooltip>\n      </label>\n      <PlMaskIcon24 v-if=\"hasErrors\" name=\"restart\" />\n      <PlMaskIcon24 v-else-if=\"isUploading\" name=\"cloud-upload\" />\n      <PlMaskIcon24 v-else-if=\"isUploaded\" name=\"success\" />\n      <PlMaskIcon24 v-else name=\"paper-clip\" />\n      <div :data-placeholder=\"placeholder ?? 'Choose file'\" class=\"pl-file-input__filename\">\n        {{ fileName }}\n      </div>\n      <div v-if=\"uploadStats\" class=\"pl-file-input__stats\">{{ uploadStats }}</div>\n      <PlMaskIcon24\n        v-if=\"modelValue\"\n        class=\"pl-file-input__clear\"\n        name=\"close\"\n        @click.stop=\"clear\"\n      />\n      <DoubleContour class=\"pl-file-input__contour\" />\n    </div>\n    <div v-if=\"hasErrors\" class=\"pl-file-input__error\">\n      {{ computedErrorMessage }}\n    </div>\n    <div v-else-if=\"helper\" class=\"pl-file-input__helper\">{{ helper }}</div>\n  </div>\n  <PlFileDialog\n    v-model=\"data.fileDialogOpen\"\n    :close-on-outside-click=\"fileDialogCloseOnOutsideClick\"\n    :extensions=\"extensions\"\n    :title=\"fileDialogTitle\"\n    @import:files=\"onImport\"\n  />\n</template>\n"],"mappings":""}
+{"version":3,"file":"PlFileInput.js","names":[],"sources":["../../../src/components/PlFileInput/PlFileInput.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport \"./pl-file-input.scss\";\n\nimport { prettyBytes } from \"@milaboratories/helpers\";\nimport type { ImportFileHandle, ImportProgress } from \"@platforma-sdk/model\";\nimport { getFileNameFromHandle, getFilePathFromHandle } from \"@platforma-sdk/model\";\nimport { computed, reactive, ref, useSlots, watch } from \"vue\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport type { ImportedFiles } from \"../../types\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport { PlFileDialog } from \"../PlFileDialog\";\nimport { PlMaskIcon24 } from \"../PlMaskIcon24\";\nimport { PlTooltip } from \"../PlTooltip\";\n\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\nimport { PlSvg } from \"../PlSvg\";\n\nconst data = reactive({\n  fileDialogOpen: false,\n  error: undefined as undefined | string,\n});\n\nconst slots = useSlots();\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: ImportFileHandle | undefined): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current import file handle.\n     */\n    modelValue: ImportFileHandle | undefined;\n    /**\n     * The label to display above the input field.\n     */\n    label?: string;\n    /**\n     * If `true`, the input field is marked as required.\n     */\n    required?: boolean;\n    /**\n     * If `true`, the component border is dashed.\n     */\n    dashed?: boolean;\n    /**\n     * Allowed file extensions (should start with `.`)\n     */\n    extensions?: string[];\n    /**\n     * Placeholder text\n     */\n    placeholder?: string;\n    /**\n     * Import/Upload progress\n     */\n    progress?: ImportProgress;\n    /**\n     * An error message to display below the input field.\n     */\n    error?: unknown;\n    /**\n     * A helper text to display below the input field when there are no errors.\n     */\n    helper?: string;\n    /**\n     * Remove rounded border and change styles\n     */\n    cellStyle?: boolean;\n    /**\n     * File dialog title\n     */\n    fileDialogTitle?: string;\n    /**\n     * If `true`, the file dialog window closes when clicking outside the modal area (default: `true`)\n     */\n    fileDialogCloseOnOutsideClick?: boolean;\n  }>(),\n  {\n    label: undefined,\n    extensions: undefined,\n    fileDialogTitle: undefined,\n    placeholder: undefined,\n    progress: undefined,\n    error: undefined,\n    helper: undefined,\n    cellStyle: false,\n    fileDialogCloseOnOutsideClick: true,\n  },\n);\n\nconst tryValue = <T extends ImportFileHandle>(\n  v: T | undefined,\n  cb: (v: T) => string | undefined,\n) => {\n  if (!v) {\n    return undefined;\n  }\n\n  try {\n    return cb(v);\n  } catch (err) {\n    data.error = err instanceof Error ? err.message : String(err);\n    return v;\n  }\n};\n\nconst fileName = computed(() => tryValue(props.modelValue, getFileNameFromHandle));\n\nconst filePath = computed(() => tryValue(props.modelValue, getFilePathFromHandle));\n\nconst isUploading = computed(() => props.progress && !props.progress.done);\n\nconst isUploaded = computed(() => props.progress && props.progress.done);\n\nconst computedErrorMessage = computed(() => getErrorMessage(data.error, props.error));\n\nconst hasErrors = computed(() => typeof computedErrorMessage.value === \"string\");\n\nconst uploadStats = computed(() => {\n  const { status, done } = props.progress ?? {};\n\n  if (!status || !status.bytesTotal) {\n    return \"\";\n  }\n\n  if (status.bytesProcessed && !done) {\n    return prettyBytes(status.bytesProcessed, {}) + \" / \" + prettyBytes(status.bytesTotal, {});\n  }\n\n  return prettyBytes(status.bytesTotal, {});\n});\n\nconst progressStyle = computed(() => {\n  const { progress } = props;\n\n  if (!progress) {\n    return {};\n  }\n\n  return {\n    width: progress.done ? \"100%\" : Math.round((progress.status?.progress ?? 0) * 100) + \"%\",\n  };\n});\n\nconst openFileDialog = () => {\n  data.fileDialogOpen = true;\n};\n\nconst onImport = (v: ImportedFiles) => {\n  if (v.files.length) {\n    emit(\"update:modelValue\", v.files[0]);\n  }\n};\n\nconst clear = () => emit(\"update:modelValue\", undefined);\n\nwatch(\n  () => props.modelValue,\n  () => (data.error = undefined),\n  { immediate: true },\n);\n\nconst rootRef = ref();\n\nif (!props.cellStyle) {\n  useLabelNotch(rootRef);\n}\n</script>\n\n<template>\n  <div\n    :class=\"{ 'pl-file-input__cell-style': !!cellStyle, 'has-file': !!fileName }\"\n    class=\"pl-file-input__envelope\"\n    data-testid=\"pl-file-input\"\n  >\n    <div\n      ref=\"rootRef\"\n      :class=\"{ dashed, error: hasErrors }\"\n      class=\"pl-file-input\"\n      data-testid=\"pl-file-input-control\"\n      tabindex=\"0\"\n      @keyup.enter=\"openFileDialog\"\n      @click.stop=\"openFileDialog\"\n    >\n      <div\n        :style=\"progressStyle\"\n        class=\"pl-file-input__progress\"\n        data-testid=\"pl-file-input-progress\"\n      />\n      <label v-if=\"!cellStyle && label\" ref=\"label\" data-testid=\"pl-file-input-label\">\n        <PlSvg v-if=\"required\" :uri=\"SvgRequired\" data-testid=\"pl-file-input-required\" />\n        <span>{{ label }}</span>\n        <PlTooltip\n          v-if=\"slots.tooltip || filePath\"\n          class=\"info\"\n          position=\"top\"\n          data-testid=\"pl-file-input-tooltip\"\n        >\n          <template #tooltip>\n            <slot v-if=\"slots.tooltip\" name=\"tooltip\" />\n            <template v-else>{{ filePath }}</template>\n          </template>\n        </PlTooltip>\n      </label>\n      <PlMaskIcon24 v-if=\"hasErrors\" name=\"restart\" data-testid=\"pl-file-input-status-icon\" />\n      <PlMaskIcon24\n        v-else-if=\"isUploading\"\n        name=\"cloud-upload\"\n        data-testid=\"pl-file-input-status-icon\"\n      />\n      <PlMaskIcon24 v-else-if=\"isUploaded\" name=\"success\" data-testid=\"pl-file-input-status-icon\" />\n      <PlMaskIcon24 v-else name=\"paper-clip\" data-testid=\"pl-file-input-status-icon\" />\n      <div\n        :data-placeholder=\"placeholder ?? 'Choose file'\"\n        class=\"pl-file-input__filename\"\n        data-testid=\"pl-file-input-filename\"\n      >\n        {{ fileName }}\n      </div>\n      <div v-if=\"uploadStats\" class=\"pl-file-input__stats\" data-testid=\"pl-file-input-stats\">\n        {{ uploadStats }}\n      </div>\n      <PlMaskIcon24\n        v-if=\"modelValue\"\n        class=\"pl-file-input__clear\"\n        data-testid=\"pl-file-input-clear\"\n        name=\"close\"\n        @click.stop=\"clear\"\n      />\n      <DoubleContour class=\"pl-file-input__contour\" />\n    </div>\n    <div v-if=\"hasErrors\" class=\"pl-file-input__error\" data-testid=\"pl-file-input-error\">\n      {{ computedErrorMessage }}\n    </div>\n    <div v-else-if=\"helper\" class=\"pl-file-input__helper\" data-testid=\"pl-file-input-helper\">\n      {{ helper }}\n    </div>\n    <!-- Teleported to <body> by PlDialogModal; kept inside so the component has a single root. -->\n    <PlFileDialog\n      v-model=\"data.fileDialogOpen\"\n      :close-on-outside-click=\"fileDialogCloseOnOutsideClick\"\n      :extensions=\"extensions\"\n      :title=\"fileDialogTitle\"\n      @import:files=\"onImport\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/PlFileInput/PlFileInput.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlFileInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlFileInput/PlFileInput.vue"],"names":[],"mappings":"AAoOA,OAAO,sBAAsB,CAAC;AAG9B,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AA0B7E,KAAK,WAAW,GAAG;IACf;;OAEG;IACH,UAAU,EAAE,gBAAgB,GAAG,SAAS,CAAC;IACzC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,6BAA6B,CAAC,EAAE,OAAO,CAAC;CACzC,CAAC;AA6VJ,QAAA,IAAI,QAAQ,IAAY,CAAE;AAC1B,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAMhD,QAAA,MAAM,UAAU;;;;;WA9YJ,MAAM;cAoBH,cAAc;;YAQhB,MAAM;iBAZD,MAAM;gBAJP,MAAM,EAAE;eAoBT,OAAO;qBAID,MAAM;mCAIQ,OAAO;6EA0WzC,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"PlFileInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlFileInput/PlFileInput.vue"],"names":[],"mappings":"AA6PA,OAAO,sBAAsB,CAAC;AAG9B,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AA0B7E,KAAK,WAAW,GAAG;IACf;;OAEG;IACH,UAAU,EAAE,gBAAgB,GAAG,SAAS,CAAC;IACzC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,6BAA6B,CAAC,EAAE,OAAO,CAAC;CACzC,CAAC;AAmXJ,QAAA,IAAI,QAAQ,IAAY,CAAE;AAC1B,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAQhD,QAAA,MAAM,UAAU;;;;;WAtaJ,MAAM;cAoBH,cAAc;;YAQhB,MAAM;iBAZD,MAAM;gBAJP,MAAM,EAAE;eAoBT,OAAO;qBAID,MAAM;mCAIQ,OAAO;6EAkYzC,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}