@milaboratories/uikit 2.2.60 → 2.2.62

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.2.60",
+  "version": "2.2.62",
   "type": "module",
   "main": "dist/pl-uikit.umd.js",
   "module": "dist/pl-uikit.js",
@@ -26,7 +26,7 @@
     "@vueuse/core": "~12.4.0",
     "jsdom": "^25.0.1",
     "resize-observer-polyfill": "^1.5.1",
-    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitejs/plugin-vue": "^5.2.3",
     "tsc-alias": "^1.8.11",
     "vitest": "^2.1.8",
     "vite": "^5.4.11",
@@ -34,9 +34,9 @@
     "yarpm": "^1.2.0",
     "svgo": "^3.3.2",
     "@types/d3": "^7.4.3",
-    "@milaboratories/eslint-config": "^1.0.1",
     "@milaboratories/helpers": "^1.6.11",
-    "@platforma-sdk/model": "^1.24.0"
+    "@milaboratories/eslint-config": "^1.0.4",
+    "@platforma-sdk/model": "^1.27.10"
   },
   "scripts": {
     "dev": "vite",

package/src/components/PlFileDialog/Local.vue

@@ -3,7 +3,7 @@ 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 { getRawPlatformaInstance, type OpenDialogFilter } from '@platforma-sdk/model';
 import { normalizeExtensions } from './utils';
 
 const props = defineProps<{
@@ -19,10 +19,10 @@ const data = reactive({
 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;
+  const fileToImportHandle = getRawPlatformaInstance()?.lsDriver?.fileToImportHandle;
 
   if (!fileToImportHandle) {
-    return console.error('API platforma.lsDriver.fileToImportHandle is not available');
+    return console.error('API getPlatformaRawInstance().lsDriver.fileToImportHandle is not available');
   }
 
   const extensions = normalizeExtensions(props.extensions);
@@ -54,7 +54,7 @@ const openNativeDialog = async () => {
     : [];
 
   if (props.multi) {
-    window.platforma?.lsDriver
+    getRawPlatformaInstance()?.lsDriver
       .showOpenMultipleFilesDialog({
         title: 'Select files to import',
         filters,
@@ -68,7 +68,7 @@ const openNativeDialog = async () => {
       })
       .catch((err) => (data.error = err));
   } else {
-    window.platforma?.lsDriver
+    getRawPlatformaInstance()?.lsDriver
       .showOpenSingleFileDialog({
         title: 'Select file to import',
         filters,

package/src/components/PlFileDialog/Remote.vue

@@ -2,7 +2,7 @@
 import { useEventListener } from '@/composition/useEventListener';
 import type { ImportedFiles } from '@/types';
 import { between, notEmpty, tapIf } from '@milaboratories/helpers';
-import type { StorageHandle } from '@platforma-sdk/model';
+import { getRawPlatformaInstance, type StorageHandle } from '@platforma-sdk/model';
 import { computed, onMounted, reactive, toRef, watch } from 'vue';
 import { PlDropdown } from '../PlDropdown';
 import { PlIcon16 } from '../PlIcon16';
@@ -58,7 +58,7 @@ const lookup = computed(() => {
 });
 
 const query = (storageHandle: StorageHandle, dirPath: string) => {
-  if (!window.platforma) {
+  if (!getRawPlatformaInstance()) {
     return;
   }
 
@@ -68,7 +68,7 @@ const query = (storageHandle: StorageHandle, dirPath: string) => {
 
   data.currentLoadingPath = dirPath;
 
-  window.platforma.lsDriver
+  getRawPlatformaInstance().lsDriver
     .listFiles(storageHandle, dirPath)
     .then((res) => {
       if (dirPath !== data.dirPath) {
@@ -186,11 +186,11 @@ const deselectAll = () => changeAll(false);
 const loadAvailableStorages = () => {
   resetData();
   deselectAll();
-  if (!window.platforma) {
+  if (!getRawPlatformaInstance()) {
     console.warn('platforma API is not found');
     return;
   }
-  window.platforma.lsDriver
+  getRawPlatformaInstance().lsDriver
     .getStorageList()
     .then((storageEntries) => {
       // local storage is always returned by the ML, so we need to remove it from remote dialog manually

package/src/components/PlFileDialog/utils.test.ts

@@ -0,0 +1,51 @@
+import { describe, expect, test } from 'vitest';
+import { getFilePathBreadcrumbs } from './utils';
+
+describe('getFilePathBreadcrumbs', () => {
+  test.each([
+    {
+      name: 'root path "/"',
+      path: '/',
+      expected: [
+        { index: 0, name: 'Root', path: '' },
+      ],
+    },
+    {
+      name: 'empty path ""',
+      path: '',
+      expected: [
+        { index: 0, name: 'Root', path: '' },
+      ],
+    },
+    {
+      name: 'single-level path "/folder"',
+      path: '/folder',
+      expected: [
+        { index: 0, name: 'Root', path: '' },
+        { index: 1, name: 'folder', path: '/folder' },
+      ],
+    },
+    {
+      name: 'multi-level path "/folder/subfolder/file.txt"',
+      path: '/folder/subfolder/file.txt',
+      expected: [
+        { index: 0, name: 'Root', path: '' },
+        { index: 1, name: 'folder', path: '/folder' },
+        { index: 2, name: 'subfolder', path: '/folder/subfolder' },
+        { index: 3, name: 'file.txt', path: '/folder/subfolder/file.txt' },
+      ],
+    },
+    {
+      name: 'path without leading slash "folder/file.txt"',
+      path: 'folder/file.txt',
+      expected: [
+        { index: 0, name: 'Root', path: '' },
+        { index: 1, name: 'folder', path: 'folder' },
+        { index: 2, name: 'file.txt', path: 'folder/file.txt' },
+      ],
+    },
+  ])('should handle $name', ({ path, expected }) => {
+    const result = getFilePathBreadcrumbs(path);
+    expect(result).toEqual(expected);
+  });
+});

package/src/components/PlFileDialog/utils.ts

@@ -1,27 +1,42 @@
-import { trimCharsLeft } from '@milaboratories/helpers';
+import { trimChars, trimCharsLeft } from '@milaboratories/helpers';
 import type { ImportFileHandle } from '@platforma-sdk/model';
 
 export function normalizeExtensions(extensions: string[] | undefined) {
   return extensions ? extensions.map((it) => '.' + trimCharsLeft(it, ['.'])) : undefined;
 }
 
+// NOTE: works only with '/' separator on *nix systems.
 export function getFilePathBreadcrumbs(filePath: string) {
-  const chunks = filePath.split('/');
+  // FIXME: separator probably should be got from ls driver from backend.
+  // or else this component won't work with remote storages on Windows.
+  const sep = '/';
 
-  if (chunks[0] !== '') {
-    chunks.unshift('');
-  }
+  // If file path starts with '/',
+  // the storage was set up with absolute paths,
+  // and we need to add the separator to the results.
+  const isAbsolute = filePath.startsWith(sep);
+  const chunks = trimChars(filePath, [sep]).split(sep);
+
+  const stack: { index: number; path: string; name: string }[] = [
+    {
+      index: 0,
+      name: 'Root',
+      path: '',
+    },
+  ];
 
-  const stack: { index: number; path: string; name: string }[] = [];
+  if (chunks.length === 1 && chunks[0] === '') {
+    return stack;
+  }
 
   for (let i = 0; i < chunks.length; i++) {
+    const pathPrefix = isAbsolute ? sep : '';
+    const p = pathPrefix + chunks.slice(0, i + 1).join(sep);
+
     stack.push({
-      index: i,
-      name: i === 0 ? 'Root' : chunks[i],
-      path: chunks
-        .slice(0, i + 1)
-        .filter((c) => c !== '')
-        .join('/'),
+      index: i + 1,
+      name: chunks[i],
+      path: p,
     });
   }
 

package/src/components/PlLogView/PlLogView.vue

@@ -31,6 +31,10 @@ const props = defineProps<{
    * String contents
    */
   value?: string;
+  /**
+   * The content to copy (Note: it takes precedence over value property)
+   */
+  valueToCopy?: string;
   /**
    * AnyLogHandle
    */
@@ -85,8 +89,15 @@ const onClickCopy = () => {
     copyActive.value = false;
   }, 1200);
 
-  if (computedValue.value && typeof computedValue.value === 'string') {
-    navigator.clipboard.writeText(computedValue.value);
+  let toCopy: string | undefined = undefined;
+  if (props.valueToCopy) {
+    toCopy = props.valueToCopy;
+  } else if (computedValue.value && typeof computedValue.value === 'string') {
+    toCopy = computedValue.value;
+  }
+
+  if (toCopy !== undefined) {
+    navigator.clipboard.writeText(toCopy);
   }
 };
 

package/src/components/PlLogView/useLogHandle.ts

@@ -1,6 +1,6 @@
 import { reactive, type Reactive, ref, watch } from 'vue';
 import { useTimeoutPoll, whenever } from '@vueuse/core';
-import type { AnyLogHandle, Platforma } from '@platforma-sdk/model';
+import { getRawPlatformaInstance, type AnyLogHandle, type Platforma } from '@platforma-sdk/model';
 
 type LogState = {
   logHandle: AnyLogHandle;
@@ -32,7 +32,7 @@ export function useLogHandle(
 
     if (currentLogState === undefined) return;
 
-    const platforma = props.mockPlatforma ?? window.platforma;
+    const platforma = props.mockPlatforma ?? getRawPlatformaInstance();
 
     if (!platforma) {
       console.warn('Platforma API is not available');