@milaboratories/uikit 2.2.59 → 2.2.61

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.2.59",
+  "version": "2.2.61",
   "type": "module",
   "main": "dist/pl-uikit.umd.js",
   "module": "dist/pl-uikit.js",
@@ -26,17 +26,17 @@
     "@vueuse/core": "~12.4.0",
     "jsdom": "^25.0.1",
     "resize-observer-polyfill": "^1.5.1",
-    "@vitejs/plugin-vue": "^5.2.1",
-    "tsc-alias": "^1.8.10",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "tsc-alias": "^1.8.11",
     "vitest": "^2.1.8",
     "vite": "^5.4.11",
     "vue-tsc": "^2.1.10",
     "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.22.59"
+    "@platforma-sdk/model": "^1.26.0",
+    "@milaboratories/eslint-config": "^1.0.4"
   },
   "scripts": {
     "dev": "vite",

package/src/components/PlDropdown/PlDropdown.vue

@@ -106,7 +106,7 @@ const slots = useSlots();
 const rootRef = ref<HTMLElement | undefined>();
 const input = ref<HTMLInputElement | undefined>();
 
-const overlay = useTemplateRef('overlay');
+const overlayRef = useTemplateRef('overlay');
 
 const data = reactive({
   search: '',
@@ -230,7 +230,7 @@ const onInputFocus = () => (data.open = true);
 const onFocusOut = (event: FocusEvent) => {
   const relatedTarget = event.relatedTarget as Node | null;
 
-  if (!rootRef.value?.contains(relatedTarget) && !overlay.value?.listRef?.contains(relatedTarget)) {
+  if (!rootRef.value?.contains(relatedTarget) && !overlayRef.value?.listRef?.contains(relatedTarget)) {
     data.search = '';
     data.open = false;
   }
@@ -292,7 +292,7 @@ watchPostEffect(() => {
   data.search; // to watch
 
   if (data.activeIndex >= 0 && data.open) {
-    overlay.value?.scrollIntoActive();
+    overlayRef.value?.scrollIntoActive();
   }
 });
 </script>

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,
     });
   }