@milaboratories/uikit 2.2.17 → 2.2.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.2.17",
+  "version": "2.2.19",
   "type": "module",
   "main": "dist/pl-uikit.umd.js",
   "module": "dist/pl-uikit.js",
@@ -22,18 +22,18 @@
   },
   "devDependencies": {
     "@vue/test-utils": "^2.4.6",
-    "@vueuse/core": "^11.2.0",
-    "jsdom": "^24.1.3",
+    "@vueuse/core": "^12.0.0",
+    "jsdom": "^25.0.1",
     "resize-observer-polyfill": "^1.5.1",
-    "@vitejs/plugin-vue": "^5.1.4",
+    "@vitejs/plugin-vue": "^5.2.1",
     "tsc-alias": "^1.8.10",
-    "vitest": "^2.1.5",
+    "vitest": "^2.1.6",
     "vite": "^5.4.11",
-    "vue-tsc": "^2.1.6",
+    "vue-tsc": "^2.1.10",
     "yarpm": "^1.2.0",
     "svgo": "^3.3.2",
-    "@milaboratories/helpers": "^1.6.7",
-    "@platforma-sdk/model": "^1.13.5"
+    "@milaboratories/helpers": "^1.6.8",
+    "@platforma-sdk/model": "^1.14.1"
   },
   "scripts": {
     "dev": "vite",

package/src/assets/mixins.scss

@@ -23,7 +23,9 @@
 
   @if $h ==null {
     height: $w;
-  } @else {
+  }
+
+  @else {
     height: $h;
   }
 }
@@ -34,7 +36,9 @@
 
   @if $h ==null {
     height: $w;
-  } @else {
+  }
+
+  @else {
     height: $h;
   }
 }
@@ -46,7 +50,9 @@
 
   @if $h ==null {
     height: $w;
-  } @else {
+  }
+
+  @else {
     height: $h;
   }
 }
@@ -64,7 +70,9 @@
 
   @if $h ==null {
     height: $w;
-  } @else {
+  }
+
+  @else {
     height: $h;
   }
 }
@@ -98,6 +106,7 @@
   &::-webkit-scrollbar-thumb {
     background: var(--thumb-color);
     border-radius: 5px;
+
     &:hover {
       --thumb-color: var(--border-color-focus);
     }
@@ -143,7 +152,11 @@
   font-size: 12px;
   font-weight: 500;
 
-  > span {
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 4px;
+  background: var(--bg-elevated-01);
+
+  >span {
     overflow: hidden;
     white-space: pre;
     text-overflow: ellipsis;
@@ -202,4 +215,4 @@
     border: 2px solid transparent;
     border-right: 1px solid transparent;
   }
-}
+}

package/src/components/PlBtnSplit/PlBtnSplit.vue

@@ -24,6 +24,7 @@ const props = defineProps<{
    */
   loading?: boolean;
 }>();
+
 const emits = defineEmits(['click']);
 
 const model = defineModel<M>({ required: true });
@@ -93,8 +94,6 @@ useElementPosition(root, (pos) => {
 
   optionsStyle.left = pos.left + 'px';
   optionsStyle.width = pos.width + 'px';
-
-  console.log(pos.top, optionsStyle);
 });
 
 const selectOption = (v: M | undefined) => {

package/src/components/PlDialogModal/pl-dialog-modal.scss

@@ -50,7 +50,6 @@
     padding: 16px 24px 40px;
     min-height: 0;
     line-height: 20px;
-    // background-color: #33333333; //
     @include scrollbar();
 
     &.no-content-gutters {

package/src/components/PlDropdown/pl-dropdown.scss

@@ -132,7 +132,7 @@
       padding: 0 60px 0 11px; // @TODO padding-right based on controls width
       pointer-events: none;
       line-height: var(--control-height);
-      color: var(--contour-color);
+      color: var(--txt-01);
       overflow: hidden;
       white-space: pre;
       text-overflow: ellipsis;
@@ -254,5 +254,9 @@
     cursor: not-allowed;
     pointer-events: none;
     user-select: none;
+
+    .input-value {
+      color: var(--dis-01);
+    }
   }
 }

package/src/components/PlFileDialog/Local.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import style from './pl-file-dialog.module.scss';
+import type { ImportedFiles } from '@/types';
+import { PlIcon24 } from '../PlIcon24';
+import { computed, reactive } from 'vue';
+import type { OpenDialogFilter } from '@platforma-sdk/model';
+import { normalizeExtensions } from './utils';
+
+const props = defineProps<{
+  importFiles: (value: ImportedFiles) => void;
+  multi?: boolean;
+  extensions?: string[];
+}>();
+
+const data = reactive({
+  error: undefined as unknown,
+});
+
+const label = computed(() => (props.multi ? 'Drag & Drop files here or click to add' : 'Drag & Drop file here or click to add'));
+
+const onDrop = async (ev: DragEvent) => {
+  const fileToImportHandle = window.platforma?.lsDriver?.fileToImportHandle;
+
+  if (!fileToImportHandle) {
+    return console.error('API platforma.lsDriver.fileToImportHandle is not available');
+  }
+
+  const extensions = normalizeExtensions(props.extensions);
+
+  const files = await Promise.all(
+    [...(ev.dataTransfer?.files ?? [])]
+      .filter((f) => !!f)
+      .filter((f) => (extensions ? extensions.some((ext) => f.name.endsWith(ext)) : true))
+      .map((file) => {
+        return fileToImportHandle(file);
+      }),
+  );
+
+  if (files.length) {
+    props.importFiles({
+      files,
+    });
+  }
+};
+
+const openNativeDialog = async () => {
+  const filters: OpenDialogFilter[] = props.extensions
+    ? [
+        {
+          name: 'All Files',
+          extensions: props.extensions,
+        },
+      ]
+    : [];
+
+  if (props.multi) {
+    window.platforma?.lsDriver
+      .showOpenMultipleFilesDialog({
+        title: 'Select files to import',
+        filters,
+      })
+      .then(({ files }) => {
+        if (files) {
+          props.importFiles({
+            files,
+          });
+        }
+      })
+      .catch((err) => (data.error = err));
+  } else {
+    window.platforma?.lsDriver
+      .showOpenSingleFileDialog({
+        title: 'Select file to import',
+        filters,
+      })
+      .then(({ file }) => {
+        if (file) {
+          props.importFiles({
+            files: [file],
+          });
+        }
+      })
+      .catch((err) => (data.error = err));
+  }
+};
+</script>
+
+<template>
+  <div :class="style.local" @drop="onDrop" @dragover.prevent @click="openNativeDialog">
+    <PlIcon24 name="cloud-upload" />
+    <span>{{ label }}</span>
+    <span v-if="extensions" :class="style.supported">Supported formats: {{ extensions.join(', ') }}</span>
+    <span v-if="data.error" class="alert-error">{{ data.error }}</span>
+  </div>
+</template>

package/src/components/PlFileDialog/PlFileDialog.vue

@@ -1,17 +1,14 @@
 <script lang="ts" setup>
-import './pl-file-dialog.scss';
-import { watch, reactive, computed, toRef, onUpdated } from 'vue';
-import { between, notEmpty, tapIf } from '@milaboratories/helpers';
-import type { Option } from '@milaboratories/helpers';
-import type { StorageEntry, StorageHandle } from '@platforma-sdk/model';
-import type { ImportedFiles } from '@/types';
-import { getFilePathBreadcrumbs, type FileDialogItem } from './utils';
-import { PlTextField } from '../PlTextField';
+import style from './pl-file-dialog.module.scss';
+import { computed, ref, useTemplateRef } from 'vue';
+import { notEmpty } from '@milaboratories/helpers';
+import type { ImportedFiles, SimpleOption } from '@/types';
 import { PlDialogModal } from '../PlDialogModal';
-import { PlDropdown } from '../PlDropdown';
 import { PlBtnPrimary } from '../PlBtnPrimary';
 import { PlBtnGhost } from '../PlBtnGhost';
-import { useEventListener } from '@/composition/useEventListener';
+import { PlBtnGroup } from '../PlBtnGroup';
+import Remote from './Remote.vue';
+import Local from './Local.vue';
 
 const emit = defineEmits<{
   (e: 'update:modelValue', value: boolean): void;
@@ -20,11 +17,38 @@ const emit = defineEmits<{
 
 const props = withDefaults(
   defineProps<{
+    /**
+     * Controls the visibility of the modal.
+     *
+     * When `true`, the modal is open. When `false`, the modal is closed.
+     */
     modelValue: boolean;
-    extensions?: string[]; // with dot, like ['.fastq.gz', '.fastq']
+    /**
+     * Specifies the file extensions that are allowed for selection.
+     *
+     * Provide an array of strings representing file extensions (leading dot can be omitted)
+     * If not specified, all file types are allowed.
+     */
+    extensions?: string[];
+    /**
+     * Enables the selection of multiple files.
+     *
+     * When `true`, the user can select multiple files.
+     * When `false` or not specified, only a single file can be selected.
+     */
     multi?: boolean;
+    /**
+     * The custom title of the dialog.
+     */
     title?: string;
+    /**
+     * Automatically selects the initial storage option.
+     * When `true`, the default storage is pre-selected for the user (default: `true`)
+     */
     autoSelectStorage?: boolean;
+    /**
+     * If `true`, the modal window closes when clicking outside the modal area (default: `true`)
+     */
     closeOnOutsideClick?: boolean;
   }>(),
   {
@@ -35,269 +59,35 @@ const props = withDefaults(
   },
 );
 
-const defaultData = () => ({
-  dirPath: '' as string,
-  search: '',
-  storageEntry: undefined as StorageEntry | undefined,
-  items: [] as FileDialogItem[],
-  error: '',
-  storageOptions: [] as Option<StorageEntry>[],
-  selected: [],
-  lastSelected: undefined as number | undefined,
-  currentLoadingPath: undefined as string | undefined,
-  showHiddenItems: false,
-});
+const mode = ref<'local' | 'remote'>('local');
 
-const data = reactive(defaultData());
+const defaultTitle = computed(() => (props.multi ? 'Select Files to Import' : 'Select File to Import'));
 
-const resetData = () => {
-  data.search = '';
-  data.error = '';
-  data.lastSelected = undefined;
-};
-
-const visibleItems = computed(() => {
-  let items = data.items;
-
-  if (!data.showHiddenItems) {
-    items = items.filter((it) => !it.name.startsWith('.'));
-  }
-
-  if (data.search) {
-    const search = data.search.toLocaleLowerCase();
-    items = items.filter((it) => it.name.toLocaleLowerCase().includes(search));
-  }
-
-  return items;
-});
-
-const lookup = computed(() => {
-  return {
-    modelValue: props.modelValue,
-    dirPath: data.dirPath,
-    storageHandle: data.storageEntry?.handle,
-  };
-});
-
-const query = (handle: StorageHandle, dirPath: string) => {
-  if (!window.platforma) {
-    return;
-  }
-
-  if (data.currentLoadingPath === dirPath) {
-    return;
-  }
-
-  data.currentLoadingPath = dirPath;
-
-  window.platforma.lsDriver
-    .listFiles(handle, dirPath)
-    .then((res) => {
-      if (dirPath !== data.dirPath) {
-        return;
-      }
-
-      data.items = notEmpty(res)
-        .entries.map((item) => ({
-          path: item.fullPath,
-          name: item.name,
-          isDir: item.type === 'dir',
-          canBeSelected: item.type === 'file' && (!props.extensions || props.extensions.some((ext) => item.fullPath.endsWith(ext))),
-          handle: item.type === 'file' ? item.handle : undefined,
-          selected: false,
-        }))
-        .sort((a, b) => {
-          if (a.isDir && !b.isDir) return -1;
-          if (!a.isDir && b.isDir) return 1;
-          // localeCompare for unicode alphabets
-          return a.name.localeCompare(b.name);
-        })
-        .map((it, id) => ({ id, ...it }));
-
-      data.lastSelected = undefined;
-    })
-    .catch((err) => (data.error = String(err)))
-    .finally(() => {
-      data.currentLoadingPath = undefined;
-    });
-};
-
-const load = () => {
-  resetData();
-  const { storageHandle, dirPath, modelValue } = lookup.value;
-  if (storageHandle && modelValue) {
-    query(storageHandle, dirPath);
-  }
-};
-
-const breadcrumbs = computed(() => getFilePathBreadcrumbs(data.dirPath));
+const modeOptions = [
+  {
+    label: 'My Computer',
+    value: 'local',
+  },
+  {
+    label: 'Remote',
+    value: 'remote',
+  },
+] satisfies SimpleOption[];
 
-const selectedFiles = computed(() => data.items.filter((f) => f.canBeSelected && f.selected && !f.isDir));
+const closeModal = () => emit('update:modelValue', false);
 
-const isReady = computed(() => selectedFiles.value.length > 0);
-
-const closeModal = () => {
-  emit('update:modelValue', false);
-};
+const remoteRef = useTemplateRef('remote');
 
 const submit = () => {
-  if (isReady.value && data.storageEntry?.handle) {
-    emit('import:files', {
-      storageHandle: data.storageEntry.handle,
-      files: selectedFiles.value.map((f) => f.handle!),
-    });
+  if (remoteRef.value?.isReady) {
+    emit('import:files', notEmpty(remoteRef.value?.getFilesToImport()));
     closeModal();
   }
 };
 
-const setDirPath = (dirPath: string) => {
-  data.dirPath = dirPath;
-};
-
-const selectFile = (ev: MouseEvent, file: FileDialogItem) => {
-  const { shiftKey, metaKey } = ev;
-  const { lastSelected } = data;
-
-  ev.preventDefault();
-
-  if (file.canBeSelected) {
-    if (!props.multi) {
-      data.items.forEach((f) => (f.selected = false));
-    }
-
-    file.selected = true;
-
-    if (!props.multi) {
-      return;
-    }
-
-    if (!metaKey && !shiftKey) {
-      data.items.forEach((f) => {
-        if (f.id !== file.id) {
-          f.selected = false;
-        }
-      });
-    }
-
-    if (shiftKey && lastSelected !== undefined) {
-      data.items.forEach((f) => {
-        if (between(f.id, lastSelected, file.id)) {
-          f.selected = true;
-        }
-      });
-    }
-
-    if (file.selected) {
-      data.lastSelected = file.id;
-    }
-  }
-};
-
-const changeAll = (selected: boolean) => {
-  if (selected && !props.multi) {
-    return;
-  }
-
-  data.items
-    .filter((f) => f.canBeSelected)
-    .forEach((file) => {
-      file.selected = selected;
-    });
-};
-
-const selectAll = () => changeAll(true);
-
-const deselectAll = () => changeAll(false);
-
-const loadAvailableStorages = () => {
-  resetData();
-  deselectAll();
-  if (!window.platforma) {
-    console.warn('platforma API is not found');
-    return;
-  }
-  window.platforma.lsDriver
-    .getStorageList()
-    .then((storageEntries) => {
-      data.storageOptions = storageEntries.map((it) => ({
-        text: it.name,
-        value: it,
-      }));
-
-      if (props.autoSelectStorage) {
-        tapIf(
-          storageEntries.find(
-            (e) =>
-              e.name === 'local' || // the only local storage on unix systems
-              (e.name.startsWith('local_disk_') && e.initialFullPath.length > 4),
-          ), // local drive where home folder is stored, normally C:\
-          (entry) => {
-            data.storageEntry = entry;
-          },
-        );
-      }
-    })
-    .catch((err) => (data.error = String(err)));
-};
-
-watch(
-  toRef(data, 'storageEntry'),
-  (entry) => {
-    resetData();
-    data.dirPath = entry?.initialFullPath ?? '';
-  },
-  { immediate: true },
-);
-
-watch([() => data.dirPath, () => data.storageEntry], () => {
-  load();
-});
-
-watch(
-  () => props.modelValue,
-  (isOpen) => {
-    if (isOpen) {
-      loadAvailableStorages();
-    } else {
-      Object.assign(data, defaultData());
-    }
-  },
-  { immediate: true },
-);
-
-useEventListener(document, 'keydown', (ev: KeyboardEvent) => {
-  if (!props.modelValue) {
-    return;
-  }
-
-  if (ev.target !== document.body) {
-    return;
-  }
-
-  if (ev.metaKey && ev.code === 'KeyA') {
-    ev.preventDefault();
-    selectAll();
-  }
-
-  if (ev.metaKey && ev.shiftKey && ev.code === 'Period') {
-    ev.preventDefault();
-    data.showHiddenItems = !data.showHiddenItems;
-  }
-
-  if (ev.code === 'Enter') {
-    submit();
-  }
-});
-
-onUpdated(loadAvailableStorages);
-
-const vTextOverflown = {
-  mounted: (el: HTMLElement) => {
-    if (el.clientWidth < el.scrollWidth) {
-      const s = el.innerText;
-      el.innerText = s.substring(0, 57) + '...' + s.substring(s.length - 10);
-    }
-  },
+const importFiles = (importedFiles: ImportedFiles) => {
+  emit('import:files', importedFiles);
+  closeModal();
 };
 </script>
 
@@ -305,58 +95,21 @@ const vTextOverflown = {
   <PlDialogModal
     :no-content-gutters="true"
     :close-on-outside-click="closeOnOutsideClick"
-    class="split"
+    class="pl-dialog-modal"
+    :class="style.component"
     :model-value="modelValue"
     width="688px"
     height="720px"
     @update:model-value="closeModal"
-    @click.stop="deselectAll"
   >
-    <template #title>{{ title ?? 'Select files' }}</template>
-    <div class="file-dialog">
-      <div class="file-dialog__search">
-        <PlDropdown v-model="data.storageEntry" label="Select storage" :options="data.storageOptions" />
-        <PlTextField v-model="data.search" label="Search in folder" :clearable="() => ''" />
-      </div>
-      <div class="ls-container">
-        <div class="ls-head">
-          <div class="ls-head__breadcrumbs">
-            <template v-for="(s, i) in breadcrumbs" :key="i">
-              <div :title="s.path" @click="setDirPath(s.path)">{{ s.name }}</div>
-              <i v-if="s.index !== breadcrumbs.length - 1" class="icon-16 icon-chevron-right" />
-            </template>
-          </div>
-          <div class="d-flex ml-auto align-center gap-12">
-            <span class="ls-head__selected">Selected: {{ selectedFiles.length }}</span>
-          </div>
-        </div>
-        <div v-if="data.currentLoadingPath !== undefined" class="ls-loader">
-          <i class="mask-24 mask-loading loader-icon" />
-        </div>
-        <div v-else-if="!data.storageEntry" class="ls-empty">
-          <div class="ls-empty__cat" />
-          <div class="ls-empty__message">Select storage to preview</div>
-        </div>
-        <div v-else-if="data.error" class="ls-error">
-          <div class="ls-error__cat" />
-          <div class="ls-error__message">{{ data.error }}</div>
-        </div>
-        <div v-else class="ls-body">
-          <template v-for="file in visibleItems" :key="file.id">
-            <div v-if="file.isDir" class="isDir" @click="setDirPath(file.path)">
-              <i class="icon-16 icon-chevron-right" />
-              <span v-text-overflown :title="file.name">{{ file.name }}</span>
-            </div>
-            <div v-else :class="{ canBeSelected: file.canBeSelected, selected: file.selected }" @click.stop="(ev) => selectFile(ev, file)">
-              <i class="mask-16 mask-box isFile" />
-              <span v-text-overflown :title="file.name">{{ file.name }}</span>
-            </div>
-          </template>
-        </div>
-      </div>
+    <template #title>{{ title ?? defaultTitle }}</template>
+    <div style="margin: 0 24px">
+      <PlBtnGroup v-model="mode" :options="modeOptions" />
     </div>
-    <template #actions>
-      <PlBtnPrimary style="min-width: 160px" :disabled="!isReady" @click.stop="submit">Import</PlBtnPrimary>
+    <Remote v-if="mode === 'remote'" ref="remote" v-bind="$props" :submit="submit" />
+    <Local v-if="mode === 'local'" :import-files="importFiles" v-bind="$props" />
+    <template v-if="mode === 'remote'" #actions>
+      <PlBtnPrimary style="min-width: 160px" :disabled="!remoteRef?.isReady" @click.stop="submit">Import</PlBtnPrimary>
       <PlBtnGhost :justify-center="false" @click.stop="closeModal">Cancel</PlBtnGhost>
     </template>
   </PlDialogModal>