@milaboratories/uikit 2.10.15 → 2.10.16

package/src/components/PlFileDialog/Remote.vue

@@ -1,24 +1,24 @@
 <script lang="ts" setup>
-import { useEventListener } from '../../composition/useEventListener';
-import type { ImportedFiles } from '../../types';
-import { between, notEmpty, tapIf } from '@milaboratories/helpers';
-import { getRawPlatformaInstance, type StorageHandle } from '@platforma-sdk/model';
-import { computed, onMounted, reactive, toRef, watch } from 'vue';
-import { PlDropdown } from '../PlDropdown';
-import { PlIcon16 } from '../PlIcon16';
-import Shortcuts from './Shortcuts.vue';
-import { PlMaskIcon16 } from '../PlMaskIcon16';
-import { PlSearchField } from '../PlSearchField';
-import style from './pl-file-dialog.module.scss';
-import { defaultData, useVisibleItems, vTextOverflown } from './remote';
-import { getFilePathBreadcrumbs, normalizeExtensions, type FileDialogItem } from './utils';
+import { useEventListener } from "../../composition/useEventListener";
+import type { ImportedFiles } from "../../types";
+import { between, notEmpty, tapIf } from "@milaboratories/helpers";
+import { getRawPlatformaInstance, type StorageHandle } from "@platforma-sdk/model";
+import { computed, onMounted, reactive, toRef, watch } from "vue";
+import { PlDropdown } from "../PlDropdown";
+import { PlIcon16 } from "../PlIcon16";
+import Shortcuts from "./Shortcuts.vue";
+import { PlMaskIcon16 } from "../PlMaskIcon16";
+import { PlSearchField } from "../PlSearchField";
+import style from "./pl-file-dialog.module.scss";
+import { defaultData, useVisibleItems, vTextOverflown } from "./remote";
+import { getFilePathBreadcrumbs, normalizeExtensions, type FileDialogItem } from "./utils";
 
 // 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.
 const isCtrlOrMeta = (ev: KeyboardEvent | MouseEvent) => ev.ctrlKey || ev.metaKey;
 
 defineEmits<{
-  (e: 'update:modelValue', value: boolean): void;
-  (e: 'import:files', value: ImportedFiles): void;
+  (e: "update:modelValue", value: boolean): void;
+  (e: "import:files", value: ImportedFiles): void;
 }>();
 
 const props = withDefaults(
@@ -40,8 +40,8 @@ const props = withDefaults(
 const data = reactive(defaultData());
 
 const resetData = () => {
-  data.search = '';
-  data.error = '';
+  data.search = "";
+  data.error = "";
   data.lastSelected = undefined;
 };
 
@@ -68,8 +68,8 @@ const query = (storageHandle: StorageHandle, dirPath: string) => {
 
   data.currentLoadingPath = dirPath;
 
-  getRawPlatformaInstance().lsDriver
-    .listFiles(storageHandle, dirPath)
+  getRawPlatformaInstance()
+    .lsDriver.listFiles(storageHandle, dirPath)
     .then((res) => {
       if (dirPath !== data.dirPath) {
         return;
@@ -79,9 +79,11 @@ const query = (storageHandle: StorageHandle, dirPath: string) => {
         .entries.map((item) => ({
           path: item.fullPath,
           name: item.name,
-          isDir: item.type === 'dir',
-          canBeSelected: item.type === 'file' && (!extensions.value || extensions.value.some((ext) => item.fullPath.endsWith(ext))),
-          handle: item.type === 'file' ? item.handle : undefined,
+          isDir: item.type === "dir",
+          canBeSelected:
+            item.type === "file" &&
+            (!extensions.value || extensions.value.some((ext) => item.fullPath.endsWith(ext))),
+          handle: item.type === "file" ? item.handle : undefined,
           selected: false,
         }))
         .sort((a, b) => {
@@ -110,7 +112,9 @@ const load = () => {
 
 const breadcrumbs = computed(() => getFilePathBreadcrumbs(data.dirPath));
 
-const selectedFiles = computed(() => data.items.filter((f) => f.canBeSelected && f.selected && !f.isDir));
+const selectedFiles = computed(() =>
+  data.items.filter((f) => f.canBeSelected && f.selected && !f.isDir),
+);
 
 const isReady = computed(() => selectedFiles.value.length > 0 && data.storageEntry?.handle);
 
@@ -187,14 +191,16 @@ const loadAvailableStorages = () => {
   resetData();
   deselectAll();
   if (!getRawPlatformaInstance()) {
-    console.warn('platforma API is not found');
+    console.warn("platforma API is not found");
     return;
   }
-  getRawPlatformaInstance().lsDriver
-    .getStorageList()
+  getRawPlatformaInstance()
+    .lsDriver.getStorageList()
     .then((storageEntries) => {
       // local storage is always returned by the ML, so we need to remove it from remote dialog manually
-      storageEntries = storageEntries.filter((it) => it.name !== 'local' && !it.name.startsWith('local_disk_'));
+      storageEntries = storageEntries.filter(
+        (it) => it.name !== "local" && !it.name.startsWith("local_disk_"),
+      );
 
       data.storageOptions = storageEntries.map((it) => ({
         text: it.name,
@@ -211,10 +217,10 @@ const loadAvailableStorages = () => {
 };
 
 watch(
-  toRef(data, 'storageEntry'),
+  toRef(data, "storageEntry"),
   (entry) => {
     resetData();
-    data.dirPath = entry?.initialFullPath ?? '';
+    data.dirPath = entry?.initialFullPath ?? "";
   },
   { immediate: true },
 );
@@ -235,7 +241,7 @@ watch(
   { immediate: true },
 );
 
-useEventListener(document, 'keydown', (ev: KeyboardEvent) => {
+useEventListener(document, "keydown", (ev: KeyboardEvent) => {
   if (!props.modelValue) {
     return;
   }
@@ -246,17 +252,17 @@ useEventListener(document, 'keydown', (ev: KeyboardEvent) => {
 
   const ctrlOrMetaKey = isCtrlOrMeta(ev);
 
-  if (ctrlOrMetaKey && ev.code === 'KeyA') {
+  if (ctrlOrMetaKey && ev.code === "KeyA") {
     ev.preventDefault();
     selectAll();
   }
 
-  if (ctrlOrMetaKey && ev.shiftKey && ev.code === 'Period') {
+  if (ctrlOrMetaKey && ev.shiftKey && ev.code === "Period") {
     ev.preventDefault();
     data.showHiddenItems = !data.showHiddenItems;
   }
 
-  if (ev.code === 'Enter') {
+  if (ev.code === "Enter") {
     props.submit();
   }
 });
@@ -273,7 +279,11 @@ onMounted(loadAvailableStorages);
   <div :class="style.remote" @click.stop="deselectAll">
     <div :class="style.search">
       <div>
-        <PlDropdown v-model="data.storageEntry" label="Select storage" :options="data.storageOptions" />
+        <PlDropdown
+          v-model="data.storageEntry"
+          label="Select storage"
+          :options="data.storageOptions"
+        />
       </div>
       <div>
         <PlSearchField v-model="data.search" label="Search in folder" clearable />

package/src/components/PlFileDialog/Shortcuts.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { PlTooltip } from '../PlTooltip';
+import { PlTooltip } from "../PlTooltip";
 </script>
 
 <template>
@@ -8,7 +8,7 @@ import { PlTooltip } from '../PlTooltip';
       <span :class="$style.title">Shortcuts</span>
 
       <div :class="[$style.row, $style.head]">
-        <div/>
+        <div />
         <div>MacOS</div>
         <div>Windows/Linux</div>
       </div>
@@ -70,7 +70,7 @@ import { PlTooltip } from '../PlTooltip';
 
 .head:before {
   position: absolute;
-  content: '';
+  content: "";
   background-color: #231842;
   width: 12px;
   left: -12px;
@@ -79,7 +79,7 @@ import { PlTooltip } from '../PlTooltip';
 
 .head:after {
   position: absolute;
-  content: '';
+  content: "";
   background-color: #231842;
   width: 12px;
   right: -12px;

package/src/components/PlFileDialog/index.ts

@@ -1 +1 @@
-export { default as PlFileDialog } from './PlFileDialog.vue';
+export { default as PlFileDialog } from "./PlFileDialog.vue";

package/src/components/PlFileDialog/pl-file-dialog.module.scss

@@ -23,7 +23,7 @@
       --pl-file-dialog-local-border-color: var(--border-color-focus);
     }
 
-    >span {
+    > span {
       font-size: 14px;
       font-weight: 500;
       line-height: 20px;
@@ -53,7 +53,7 @@
       gap: 12px;
       margin: 0 24px;
 
-      >div {
+      > div {
         flex: 1;
       }
     }
@@ -93,7 +93,7 @@
         gap: 12px;
       }
 
-      >div {
+      > div {
         cursor: pointer;
       }
 
@@ -110,7 +110,7 @@
         min-width: 0;
         max-width: 100%;
 
-        >div {
+        > div {
           display: inline-block;
           white-space: nowrap;
           overflow: hidden;
@@ -136,7 +136,7 @@
         margin-top: 40px;
         width: 240px;
         height: 200px;
-        background: url('../../assets/images/no-data-cat.svg');
+        background: url("../../assets/images/no-data-cat.svg");
       }
 
       .message {
@@ -162,7 +162,7 @@
         margin-top: 40px;
         width: 400px;
         height: 200px;
-        background: url('../../assets/images/empty-cat.svg');
+        background: url("../../assets/images/empty-cat.svg");
       }
 
       .message {
@@ -184,10 +184,13 @@
       flex-direction: column;
       @include scrollbar(true);
 
-      >div {
+      > div {
         font-family: var(--font-family-monospace);
         color: var(--txt-01);
-        font-feature-settings: 'ss11' on, 'ss15' on, 'ss17' on;
+        font-feature-settings:
+          "ss11" on,
+          "ss15" on,
+          "ss17" on;
         font-size: 14px;
         font-weight: 400;
         display: flex;
@@ -196,19 +199,19 @@
         gap: 12px;
         padding: 0 12px;
 
-        >span {
+        > span {
           display: inline-block;
           white-space: nowrap;
           overflow: hidden;
         }
 
-        >i {
+        > i {
           min-width: 16px;
         }
 
         i.isFile {
           display: inline-block;
-          background-color: #CFD1DB;
+          background-color: #cfd1db;
         }
 
         &.isDir {
@@ -244,4 +247,4 @@
       }
     }
   }
-}
+}

package/src/components/PlFileDialog/remote.ts

@@ -1,14 +1,14 @@
-import type { Option } from '@milaboratories/helpers';
-import type { StorageEntry } from '@platforma-sdk/model';
-import type { FileDialogItem } from './utils';
-import { computed } from 'vue';
+import type { Option } from "@milaboratories/helpers";
+import type { StorageEntry } from "@platforma-sdk/model";
+import type { FileDialogItem } from "./utils";
+import { computed } from "vue";
 
 export const defaultData = () => ({
-  dirPath: '' as string,
-  search: '',
+  dirPath: "" as string,
+  search: "",
   storageEntry: undefined as StorageEntry | undefined,
   items: [] as FileDialogItem[],
-  error: '',
+  error: "",
   storageOptions: [] as Option<StorageEntry>[],
   selected: [],
   lastSelected: undefined as number | undefined,
@@ -23,7 +23,7 @@ export function useVisibleItems(data: Data) {
     let items = data.items;
 
     if (!data.showHiddenItems) {
-      items = items.filter((it) => !it.name.startsWith('.'));
+      items = items.filter((it) => !it.name.startsWith("."));
     }
 
     if (data.search) {
@@ -39,7 +39,7 @@ export 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);
+      el.innerText = s.substring(0, 57) + "..." + s.substring(s.length - 10);
     }
   },
 };

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

@@ -1,50 +1,46 @@
-import { describe, expect, test } from 'vitest';
-import { getFilePathBreadcrumbs } from './utils';
+import { describe, expect, test } from "vitest";
+import { getFilePathBreadcrumbs } from "./utils";
 
-describe('getFilePathBreadcrumbs', () => {
+describe("getFilePathBreadcrumbs", () => {
   test.each([
     {
       name: 'root path "/"',
-      path: '/',
-      expected: [
-        { index: 0, name: 'Root', path: '' },
-      ],
+      path: "/",
+      expected: [{ index: 0, name: "Root", path: "" }],
     },
     {
       name: 'empty path ""',
-      path: '',
-      expected: [
-        { index: 0, name: 'Root', path: '' },
-      ],
+      path: "",
+      expected: [{ index: 0, name: "Root", path: "" }],
     },
     {
       name: 'single-level path "/folder"',
-      path: '/folder',
+      path: "/folder",
       expected: [
-        { index: 0, name: 'Root', path: '' },
-        { index: 1, name: 'folder', path: '/folder' },
+        { index: 0, name: "Root", path: "" },
+        { index: 1, name: "folder", path: "/folder" },
       ],
     },
     {
       name: 'multi-level path "/folder/subfolder/file.txt"',
-      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' },
+        { 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',
+      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' },
+        { 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 }) => {
+  ])("should handle $name", ({ path, expected }) => {
     const result = getFilePathBreadcrumbs(path);
     expect(result).toEqual(expected);
   });

package/src/components/PlFileDialog/utils.ts

@@ -1,15 +1,15 @@
-import { trimChars, trimCharsLeft } from '@milaboratories/helpers';
-import type { ImportFileHandle } from '@platforma-sdk/model';
+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;
+  return extensions ? extensions.map((it) => "." + trimCharsLeft(it, ["."])) : undefined;
 }
 
 // NOTE: works only with '/' separator on *nix systems.
 export function getFilePathBreadcrumbs(filePath: string) {
   // 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 = '/';
+  const sep = "/";
 
   // If file path starts with '/',
   // the storage was set up with absolute paths,
@@ -20,17 +20,17 @@ export function getFilePathBreadcrumbs(filePath: string) {
   const stack: { index: number; path: string; name: string }[] = [
     {
       index: 0,
-      name: 'Root',
-      path: '',
+      name: "Root",
+      path: "",
     },
   ];
 
-  if (chunks.length === 1 && chunks[0] === '') {
+  if (chunks.length === 1 && chunks[0] === "") {
     return stack;
   }
 
   for (let i = 0; i < chunks.length; i++) {
-    const pathPrefix = isAbsolute ? sep : '';
+    const pathPrefix = isAbsolute ? sep : "";
     const p = pathPrefix + chunks.slice(0, i + 1).join(sep);
 
     stack.push({

package/src/components/PlFileInput/PlFileInput.vue

@@ -1,20 +1,20 @@
 <script lang="ts" setup>
-import './pl-file-input.scss';
-
-import { prettyBytes } from '@milaboratories/helpers';
-import type { ImportFileHandle, ImportProgress } from '@platforma-sdk/model';
-import { getFileNameFromHandle, getFilePathFromHandle } from '@platforma-sdk/model';
-import { computed, reactive, ref, useSlots, watch } from 'vue';
-import { getErrorMessage } from '../../helpers/error.ts';
-import type { ImportedFiles } from '../../types';
-import DoubleContour from '../../utils/DoubleContour.vue';
-import { useLabelNotch } from '../../utils/useLabelNotch';
-import { PlFileDialog } from '../PlFileDialog';
-import { PlMaskIcon24 } from '../PlMaskIcon24';
-import { PlTooltip } from '../PlTooltip';
-
-import SvgRequired from '../../assets/images/required.svg?raw';
-import { PlSvg } from '../PlSvg';
+import "./pl-file-input.scss";
+
+import { prettyBytes } from "@milaboratories/helpers";
+import type { ImportFileHandle, ImportProgress } from "@platforma-sdk/model";
+import { getFileNameFromHandle, getFilePathFromHandle } from "@platforma-sdk/model";
+import { computed, reactive, ref, useSlots, watch } from "vue";
+import { getErrorMessage } from "../../helpers/error.ts";
+import type { ImportedFiles } from "../../types";
+import DoubleContour from "../../utils/DoubleContour.vue";
+import { useLabelNotch } from "../../utils/useLabelNotch";
+import { PlFileDialog } from "../PlFileDialog";
+import { PlMaskIcon24 } from "../PlMaskIcon24";
+import { PlTooltip } from "../PlTooltip";
+
+import SvgRequired from "../../assets/images/required.svg?raw";
+import { PlSvg } from "../PlSvg";
 
 const data = reactive({
   fileDialogOpen: false,
@@ -24,7 +24,7 @@ const data = reactive({
 const slots = useSlots();
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: ImportFileHandle | undefined): void;
+  (e: "update:modelValue", value: ImportFileHandle | undefined): void;
 }>();
 
 const props = withDefaults(
@@ -91,7 +91,10 @@ const props = withDefaults(
   },
 );
 
-const tryValue = <T extends ImportFileHandle>(v: T | undefined, cb: (v: T) => string | undefined) => {
+const tryValue = <T extends ImportFileHandle>(
+  v: T | undefined,
+  cb: (v: T) => string | undefined,
+) => {
   if (!v) {
     return undefined;
   }
@@ -114,17 +117,17 @@ const isUploaded = computed(() => props.progress && props.progress.done);
 
 const computedErrorMessage = computed(() => getErrorMessage(data.error, props.error));
 
-const hasErrors = computed(() => typeof computedErrorMessage.value === 'string');
+const hasErrors = computed(() => typeof computedErrorMessage.value === "string");
 
 const uploadStats = computed(() => {
   const { status, done } = props.progress ?? {};
 
   if (!status || !status.bytesTotal) {
-    return '';
+    return "";
   }
 
   if (status.bytesProcessed && !done) {
-    return prettyBytes(status.bytesProcessed, {}) + ' / ' + prettyBytes(status.bytesTotal, {});
+    return prettyBytes(status.bytesProcessed, {}) + " / " + prettyBytes(status.bytesTotal, {});
   }
 
   return prettyBytes(status.bytesTotal, {});
@@ -138,7 +141,7 @@ const progressStyle = computed(() => {
   }
 
   return {
-    width: progress.done ? '100%' : Math.round((progress.status?.progress ?? 0) * 100) + '%',
+    width: progress.done ? "100%" : Math.round((progress.status?.progress ?? 0) * 100) + "%",
   };
 });
 
@@ -148,11 +151,11 @@ const openFileDialog = () => {
 
 const onImport = (v: ImportedFiles) => {
   if (v.files.length) {
-    emit('update:modelValue', v.files[0]);
+    emit("update:modelValue", v.files[0]);
   }
 };
 
-const clear = () => emit('update:modelValue', undefined);
+const clear = () => emit("update:modelValue", undefined);
 
 watch(
   () => props.modelValue,
@@ -168,7 +171,10 @@ if (!props.cellStyle) {
 </script>
 
 <template>
-  <div :class="{ 'pl-file-input__cell-style': !!cellStyle, 'has-file': !!fileName }" class="pl-file-input__envelope">
+  <div
+    :class="{ 'pl-file-input__cell-style': !!cellStyle, 'has-file': !!fileName }"
+    class="pl-file-input__envelope"
+  >
     <div
       ref="rootRef"
       :class="{ dashed, error: hasErrors }"
@@ -196,7 +202,12 @@ if (!props.cellStyle) {
         {{ fileName }}
       </div>
       <div v-if="uploadStats" class="pl-file-input__stats">{{ uploadStats }}</div>
-      <PlMaskIcon24 v-if="modelValue" class="pl-file-input__clear" name="close" @click.stop="clear" />
+      <PlMaskIcon24
+        v-if="modelValue"
+        class="pl-file-input__clear"
+        name="close"
+        @click.stop="clear"
+      />
       <DoubleContour class="pl-file-input__contour" />
     </div>
     <div v-if="hasErrors" class="pl-file-input__error">

package/src/components/PlFileInput/index.ts

@@ -1 +1 @@
-export { default as PlFileInput } from './PlFileInput.vue';
+export { default as PlFileInput } from "./PlFileInput.vue";

package/src/components/PlFileInput/pl-file-input.scss

@@ -51,7 +51,7 @@
     bottom: 0;
     left: 0;
     right: 0;
-    background: linear-gradient(90deg, #FFF 0%, #D8FAC8 100%);
+    background: linear-gradient(90deg, #fff 0%, #d8fac8 100%);
     pointer-events: none;
     width: 0;
   }
@@ -214,7 +214,7 @@
 
   &:hover {
     --border-color: var(--border-color-focus);
-    background-color: #D9F8CA;
+    background-color: #d9f8ca;
   }
 
   &:hover .pl-file-input__filename::before {
@@ -241,4 +241,4 @@
       display: block;
     }
   }
-}
+}

package/src/components/PlFileInput/utils.ts

@@ -1,17 +1,17 @@
 export function extractFileName(filePath: string) {
-  return filePath.replace(/^.*[\\/]/, '');
+  return filePath.replace(/^.*[\\/]/, "");
 }
 
 export function extractExtension(filePath: string) {
-  const parts = extractFileName(filePath).split('.');
+  const parts = extractFileName(filePath).split(".");
 
   if (parts.length > 2) {
-    return parts.slice(-2).join('.');
+    return parts.slice(-2).join(".");
   } else if (parts.length === 2) {
-    return parts.slice(-1).join('.');
+    return parts.slice(-1).join(".");
   }
 
-  return '';
+  return "";
 }
 
 export function extractPaths(e: DragEvent, extensions?: string[]) {
@@ -19,7 +19,7 @@ export function extractPaths(e: DragEvent, extensions?: string[]) {
 
   if (e.dataTransfer) {
     for (let i = 0; i < e.dataTransfer.items.length; i++) {
-      if (e.dataTransfer.items[i].kind !== 'file') {
+      if (e.dataTransfer.items[i].kind !== "file") {
         continue;
       }
       const file = e.dataTransfer.items[i].getAsFile() as (File & { path: string }) | null; // @TODO check

package/src/components/PlIcon16/PlIcon16.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import type { MaskIconName16, Size } from '../../types';
-import { PlSvg } from '../PlSvg';
-import { computed } from 'vue';
+import type { MaskIconName16, Size } from "../../types";
+import { PlSvg } from "../PlSvg";
+import { computed } from "vue";
 
 const props = defineProps<{
   name: MaskIconName16;
@@ -11,10 +11,10 @@ const props = defineProps<{
 }>();
 
 const size = computed(() => {
-  if (typeof props.size === 'string') {
-    if (props.size === 'small') return 12;
-    if (props.size === 'medium') return 16;
-    if (props.size === 'large') return 24;
+  if (typeof props.size === "string") {
+    if (props.size === "small") return 12;
+    if (props.size === "medium") return 16;
+    if (props.size === "large") return 24;
   }
   return props.size ?? 16;
 });