@milaboratories/uikit 2.2.11 → 2.2.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.2.11",
+  "version": "2.2.13",
   "type": "module",
   "main": "dist/pl-uikit.umd.js",
   "module": "dist/pl-uikit.js",
@@ -32,8 +32,8 @@
     "vue-tsc": "^2.1.6",
     "yarpm": "^1.2.0",
     "svgo": "^3.3.2",
-    "@platforma-sdk/model": "^1.10.12",
-    "@milaboratories/helpers": "^1.6.7"
+    "@milaboratories/helpers": "^1.6.7",
+    "@platforma-sdk/model": "^1.13.2"
   },
   "scripts": {
     "dev": "vite",

package/src/components/PlFileDialog/PlFileDialog.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import './pl-file-dialog.scss';
 import { watch, reactive, computed, toRef, onUpdated } from 'vue';
-import { debounce } from '@milaboratories/helpers';
 import { between, notEmpty, tapIf } from '@milaboratories/helpers';
 import type { Option } from '@milaboratories/helpers';
 import type { StorageEntry, StorageHandle } from '@platforma-sdk/model';
@@ -14,12 +13,6 @@ import { PlBtnPrimary } from '../PlBtnPrimary';
 import { PlBtnGhost } from '../PlBtnGhost';
 import { useEventListener } from '@/composition/useEventListener';
 
-// const vFocus = {
-//   mounted: (el: HTMLElement) => {
-//     (el.querySelector('button.pl-btn-primary') as HTMLButtonElement | null)?.focus();
-//   },
-// };
-
 const emit = defineEmits<{
   (e: 'update:modelValue', value: boolean): void;
   (e: 'import:files', value: ImportedFiles): void;
@@ -44,6 +37,7 @@ const props = withDefaults(
 
 const defaultData = () => ({
   dirPath: '' as string,
+  search: '',
   storageEntry: undefined as StorageEntry | undefined,
   items: [] as FileDialogItem[],
   error: '',
@@ -56,12 +50,25 @@ const defaultData = () => ({
 
 const data = reactive(defaultData());
 
+const resetData = () => {
+  data.search = '';
+  data.error = '';
+  data.lastSelected = undefined;
+};
+
 const visibleItems = computed(() => {
+  let items = data.items;
+
   if (!data.showHiddenItems) {
-    return data.items.filter((it) => !it.name.startsWith('.'));
+    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 data.items;
+  return items;
 });
 
 const lookup = computed(() => {
@@ -81,10 +88,6 @@ const query = (handle: StorageHandle, dirPath: string) => {
     return;
   }
 
-  data.error = '';
-  data.items = [];
-  data.lastSelected = undefined;
-
   data.currentLoadingPath = dirPath;
 
   window.platforma.lsDriver
@@ -126,10 +129,6 @@ const load = () => {
   }
 };
 
-const updateDirPathDebounced = debounce((v: string) => {
-  data.dirPath = v ?? ''; // ???
-}, 1000);
-
 const breadcrumbs = computed(() => getFilePathBreadcrumbs(data.dirPath));
 
 const selectedFiles = computed(() => data.items.filter((f) => f.canBeSelected && f.selected && !f.isDir));
@@ -152,9 +151,6 @@ const submit = () => {
 
 const setDirPath = (dirPath: string) => {
   data.dirPath = dirPath;
-  if (data.storageEntry) {
-    load();
-  }
 };
 
 const selectFile = (ev: MouseEvent, file: FileDialogItem) => {
@@ -213,8 +209,7 @@ const selectAll = () => changeAll(true);
 const deselectAll = () => changeAll(false);
 
 const loadAvailableStorages = () => {
-  data.error = '';
-  data.lastSelected = undefined;
+  resetData();
   deselectAll();
   if (!window.platforma) {
     console.warn('platforma API is not found');
@@ -237,7 +232,6 @@ const loadAvailableStorages = () => {
           ), // local drive where home folder is stored, normally C:\
           (entry) => {
             data.storageEntry = entry;
-            data.dirPath = entry.initialFullPath;
           },
         );
       }
@@ -245,9 +239,14 @@ const loadAvailableStorages = () => {
     .catch((err) => (data.error = String(err)));
 };
 
-watch(toRef(data, 'storageEntry'), (entry) => {
-  data.dirPath = entry?.initialFullPath ?? '';
-});
+watch(
+  toRef(data, 'storageEntry'),
+  (entry) => {
+    resetData();
+    data.dirPath = entry?.initialFullPath ?? '';
+  },
+  { immediate: true },
+);
 
 watch([() => data.dirPath, () => data.storageEntry], () => {
   load();
@@ -316,7 +315,7 @@ const vTextOverflown = {
     <div class="file-dialog">
       <div class="file-dialog__search">
         <PlDropdown v-model="data.storageEntry" label="Select storage" :options="data.storageOptions" />
-        <PlTextField :model-value="data.dirPath" label="Enter path" @update:model-value="updateDirPathDebounced" />
+        <PlTextField v-model="data.search" label="Search in folder" :clearable="() => ''" />
       </div>
       <div class="ls-container">
         <div class="ls-head">

package/src/components/PlFileDialog/utils.ts

@@ -3,13 +3,20 @@ import type { ImportFileHandle } from '@platforma-sdk/model';
 export function getFilePathBreadcrumbs(filePath: string) {
   const chunks = filePath.split('/');
 
+  if (chunks[0] !== '') {
+    chunks.unshift('');
+  }
+
   const stack: { index: number; path: string; name: string }[] = [];
 
   for (let i = 0; i < chunks.length; i++) {
     stack.push({
       index: i,
       name: i === 0 ? 'Root' : chunks[i],
-      path: chunks.slice(0, i + 1).join('/'),
+      path: chunks
+        .slice(0, i + 1)
+        .filter((c) => c !== '')
+        .join('/'),
     });
   }
 

package/src/components/PlFileInput/PlFileInput.vue

@@ -4,16 +4,16 @@ import { PlTooltip } from '@/components/PlTooltip';
 import { PlFileDialog } from '@/components/PlFileDialog';
 import type { ImportedFiles } from '@/types';
 import { PlMaskIcon24 } from '../PlMaskIcon24';
-import { computed, reactive, ref, useSlots } from 'vue';
+import { computed, reactive, ref, useSlots, watch } from 'vue';
 import type { ImportFileHandle, ImportProgress } from '@platforma-sdk/model';
-import { getFilePathFromHandle } from '@platforma-sdk/model';
+import { getFileNameFromHandle, getFilePathFromHandle } from '@platforma-sdk/model';
 import DoubleContour from '@/utils/DoubleContour.vue';
 import { useLabelNotch } from '@/utils/useLabelNotch';
 import { prettyBytes } from '@milaboratories/helpers';
-import { extractFileName } from './utils';
 
 const data = reactive({
   fileDialogOpen: false,
+  error: '',
 });
 
 const slots = useSlots();
@@ -60,10 +60,6 @@ const props = withDefaults(
      * A helper text to display below the input field when there are no errors.
      */
     helper?: string;
-    /**
-     * If `true`, only the file name is displayed, not the full path to it.
-     */
-    showFilenameOnly?: boolean;
     /**
      * Remove rounded border and change styles
      */
@@ -90,27 +86,30 @@ const props = withDefaults(
   },
 );
 
-const fileName = computed(() => {
-  if (props.modelValue) {
-    try {
-      const filePath = getFilePathFromHandle(props.modelValue as ImportFileHandle).trim();
-      return props.showFilenameOnly ? extractFileName(filePath) : filePath;
-    } catch (e) {
-      console.error(e);
-      return props.modelValue;
-    }
+const tryValue = <T extends ImportFileHandle>(v: T | undefined, cb: (v: T) => string | undefined) => {
+  if (!v) {
+    return undefined;
   }
 
-  return '';
-});
+  try {
+    return cb(v);
+  } catch (err) {
+    data.error = err instanceof Error ? err.message : String(err);
+    return v;
+  }
+};
+
+const fileName = computed(() => tryValue(props.modelValue, getFileNameFromHandle));
+
+const filePath = computed(() => tryValue(props.modelValue, getFilePathFromHandle));
 
 const isUploading = computed(() => props.progress && !props.progress.done);
 
 const isUploaded = computed(() => props.progress && props.progress.done);
 
-const hasErrors = computed(() => props.error);
+const computedError = computed(() => data.error ?? props.error);
 
-const computedError = computed(() => props.error);
+const hasErrors = computed(() => !!computedError.value);
 
 const uploadStats = computed(() => {
   const { status, done } = props.progress ?? {};
@@ -150,6 +149,14 @@ const onImport = (v: ImportedFiles) => {
 
 const clear = () => emit('update:modelValue', undefined);
 
+watch(
+  () => props.modelValue,
+  () => {
+    data.error = '';
+  },
+  { immediate: true },
+);
+
 const rootRef = ref();
 
 if (!props.cellStyle) {
@@ -159,14 +166,22 @@ if (!props.cellStyle) {
 
 <template>
   <div :class="{ 'pl-file-input__cell-style': !!cellStyle, 'has-file': !!fileName }" class="pl-file-input__envelope">
-    <div ref="rootRef" class="pl-file-input" tabindex="0" :class="{ dashed, error: hasErrors }" @keyup.enter="openFileDialog">
+    <div
+      ref="rootRef"
+      class="pl-file-input"
+      tabindex="0"
+      :class="{ dashed, error: hasErrors }"
+      @keyup.enter="openFileDialog"
+      @click.stop="openFileDialog"
+    >
       <div class="pl-file-input__progress" :style="progressStyle" />
       <label v-if="!cellStyle && label" ref="label">
         <i v-if="required" class="required-icon" />
         <span>{{ label }}</span>
-        <PlTooltip v-if="slots.tooltip" class="info" position="top">
+        <PlTooltip v-if="slots.tooltip || filePath" class="info" position="top">
           <template #tooltip>
-            <slot name="tooltip" />
+            <slot v-if="slots.tooltip" name="tooltip" />
+            <template v-else>{{ filePath }}</template>
           </template>
         </PlTooltip>
       </label>
@@ -174,7 +189,7 @@ if (!props.cellStyle) {
       <PlMaskIcon24 v-else-if="isUploading" name="cloud-upload" />
       <PlMaskIcon24 v-else-if="isUploaded" name="success" />
       <PlMaskIcon24 v-else name="paper-clip" />
-      <div :data-placeholder="placeholder ?? 'Choose file'" class="pl-file-input__filename" @click.stop="openFileDialog">
+      <div :data-placeholder="placeholder ?? 'Choose file'" class="pl-file-input__filename">
         {{ fileName }}
       </div>
       <div v-if="uploadStats" class="pl-file-input__stats">{{ uploadStats }}</div>
@@ -184,7 +199,7 @@ if (!props.cellStyle) {
     <div v-if="hasErrors" class="pl-file-input__error">
       {{ computedError }}
     </div>
-    <div v-else-if="helper" class="upl-file-input__helper">{{ helper }}</div>
+    <div v-else-if="helper" class="pl-file-input__helper">{{ helper }}</div>
   </div>
   <PlFileDialog
     v-model="data.fileDialogOpen"

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

@@ -14,8 +14,7 @@
   --icon-color: #000;
 
   width: 100%;
-  // min-width: 160px;
-  height: 40px;
+  height: var(--control-height, 40px);
   position: relative;
   border-radius: var(--border-radius-control);
   display: flex;
@@ -28,9 +27,8 @@
 
   &__envelope {
     font-family: var(--font-family-base);
-    height: var(--control-height);
     display: flex;
-    align-items: center;
+    flex-direction: column;
     min-width: 160px;
   }