@milaboratories/uikit 1.2.3

package/src/components/PlDropdownMulti/pl-dropdown-multi.scss

@@ -0,0 +1,298 @@
+@import "@/assets/mixins";
+
+.ui-multi-dropdown {
+  $root: &;
+
+  --contour-color: var(--txt-01);
+  --contour-border-width: 1px;
+  --options-bg: #fff;
+  --option-hover-bg: var(--btn-sec-hover-grey);
+
+  --label-offset-left-x: 8px;
+  --label-offset-right-x: 8px;
+  --label-color: var(--txt-01);
+
+  [data-theme="dark"] & {
+    --options-bg: #1B1B1F;
+  }
+
+  position: relative;
+  outline: none;
+  min-height: var(--control-height);
+  border-radius: 6px;
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weigh-base);
+
+  &__envelope {
+    font-family: var(--control-font-family);
+    min-width: 160px;
+  }
+
+  label {
+    @include outlined-control-label();
+  }
+
+  &__container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    border-radius: 6px;
+    min-height: var(--control-height);
+    padding: 1px;
+    color: var(--txt-01);
+  }
+
+  &__contour {
+    border-radius: var(--border-radius-control);
+    border: var(--contour-border-width) solid var(--contour-color);
+    box-shadow: var(--contour-box-shadow);
+    z-index: 0;
+    pointer-events: none;
+  }
+
+  &__options {
+    position: relative;
+    background-color: var(--options-bg);
+    border-radius: 0 0 6px 6px;
+    max-height: 244px;
+    @include scrollbar;
+    border-top: 1px solid var(--color-div-black);
+
+    .nothing-found {
+      padding: 0 10px;
+      height: var(--control-height);
+      line-height: var(--control-height);
+      background-color: #fff;
+      opacity: 0.5;
+      font-style: italic;
+    }
+
+    .option {
+      position: relative;
+      padding: 0 10px;
+      height: var(--control-height);
+      line-height: var(--control-height);
+      cursor: pointer;
+      user-select: none;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+
+      --base-icon: url('@/assets/images/24_checkbox-base.svg');
+      --checked-icon: url('@/assets/images/24_checkbox-checked.svg');
+
+      .ui-multi-dropdown__checkmark {
+        cursor: pointer;
+        outline: none;
+        border-radius: 4px;
+        @include icon(var(--base-icon), 24px);
+
+        [data-theme="dark"] & {
+          --base-icon: url('@/assets/images/24_checkbox-base-dark.svg');
+          --checked-icon: url('@/assets/images/24_checkbox-checked-dark.svg');
+        }
+      }
+
+      >span {
+        display: block;
+        overflow: hidden;
+        white-space: nowrap;
+        max-width: 100%;
+        text-overflow: ellipsis;
+      }
+
+      &.selected {
+        background-color: var(--color-active-select);
+
+        .ui-multi-dropdown__checkmark {
+          @include icon(var(--checked-icon), 24px);
+        }
+      }
+
+      &.active:not(.selected) {
+        background-color: var(--option-hover-bg);
+      }
+
+      &:hover {
+        background-color: var(--option-hover-bg);
+      }
+    }
+  }
+
+  &__field {
+    position: relative;
+    border-radius: 6px;
+    overflow: hidden;
+    background: transparent;
+    padding: 0 11px;
+
+    min-height: var(--control-height);
+    line-height: var(--control-height);
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .chips-container {
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 30px;
+      overflow: hidden;
+      padding: 0 11px;
+      line-height: var(--control-height);
+      color: var(--contour-color);
+      display: flex;
+      gap: 8px;
+      align-items: center;
+    }
+
+    input {
+      min-height: calc(var(--control-height) - 2px);
+      line-height: calc(var(--control-height) - 2px);
+      font-family: inherit;
+      font-size: inherit;
+      background-color: transparent;
+      border: none;
+      padding: 0;
+      width: calc(100% - 20px);
+      color: var(--txt-01);
+      caret-color: var(--border-color-focus);
+
+      &:focus {
+        outline: none;
+      }
+
+      &:placeholder-shown {
+        text-overflow: ellipsis;
+      }
+
+      &::placeholder {
+        color: var(--color-placeholder);
+      }
+    }
+
+    &:hover {
+      .clear {
+        display: block;
+      }
+    }
+  }
+
+  &__helper {
+    @include field-helper();
+  }
+
+  &__error {
+    @include field-error();
+  }
+
+  &__append {
+    padding-right: 24px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 4px;
+
+    .icon {
+      cursor: pointer;
+    }
+
+    .mask {
+      background-color: var(--control-mask-fill);
+      cursor: pointer;
+    }
+  }
+
+  .arrow {
+    position: absolute;
+    @include abs-center-y;
+    right: 12px;
+    background-color: var(--control-mask-fill);
+    @include mask(url("@/assets/images/16_chevron-down.svg"), 16px);
+  }
+
+  &.open {
+    .arrow {
+      background-color: var(--control-mask-fill);
+      @include mask(url(@/assets/images/16_up.svg), 16px);
+    }
+  }
+
+  .clear {
+    display: none;
+    position: absolute;
+    @include abs-center-y;
+    right: 36px;
+    z-index: 1;
+    @include icon(url("@/assets/images/16_clear.svg"), 16px); // @todo mask-image
+    cursor: pointer;
+  }
+
+  &.open,
+  &:focus-within {
+    z-index: 1;
+
+    #{$root}__container {
+      .label {
+        color: var(--txt-focus);
+      }
+    }
+  }
+
+  &.open {
+    #{$root}__container {
+      z-index: 1000;
+    }
+
+    #{$root}__field {
+      border-radius: 6px 6px 0 0;
+    }
+
+    .arrow {
+      background-color: var(--control-mask-fill);
+      @include mask(url(@/assets/images/16_chevron-up.svg), 16px);
+    }
+  }
+
+  &:hover {
+    --contour-color: var(--control-hover-color);
+  }
+
+  &:focus-within:not(.error) {
+    --label-color: var(--txt-focus);
+    --contour-color: var(--border-color-focus);
+    --contour-border-width: 2px;
+    --contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow);
+  }
+
+  &:focus-within.error {
+    --contour-border-width: 2px;
+    --contour-box-shadow: 0 0 0 4px var(--color-error-shadow);
+  }
+
+  &.error {
+    --contour-color: var(--txt-error);
+    --label-color: var(--txt-error);
+  }
+
+  &.disabled {
+    --contour-color: var(--color-dis-01);
+    --control-mask-fill: var(--color-dis-01);
+    --label-color: var(--color-dis-01);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  &__open-chips-conteiner {
+    padding: 12px;
+
+    .ui-chip {
+      margin-right: 4px;
+      margin-bottom: 4px;
+    }
+  }
+}

package/src/components/PlFileDialog/PlFileDialog.vue

@@ -0,0 +1,347 @@
+<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';
+import type { ImportedFiles } from '@/types';
+import { getFilePathBreadcrumbs, type FileDialogItem } from './utils';
+import { PlTextField } from '../PlTextField';
+import { PlDialogModal } from '../PlDialogModal';
+import { PlDropdown } from '../PlDropdown';
+import { PlBtnPrimary } from '../PlBtnPrimary';
+import { PlBtnGhost } from '../PlBtnGhost';
+import { useEventListener } from '@/composition/useEventListener';
+
+const vFocus = {
+  mounted: (el: HTMLElement) => {
+    (el.querySelector('button.ui-btn-primary') as HTMLButtonElement | null)?.focus();
+  },
+};
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void;
+  (e: 'import:files', value: ImportedFiles): void;
+}>();
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean;
+    extensions?: string[]; // with dot, like ['.fastq.gz', '.fastq']
+    multi?: boolean;
+    title?: string;
+    autoSelectStorage?: boolean;
+  }>(),
+  {
+    extensions: undefined,
+    title: undefined,
+    autoSelectStorage: true,
+  },
+);
+
+const defaultData = () => ({
+  dirPath: '',
+  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 data = reactive(defaultData());
+
+const visibleItems = computed(() => {
+  if (!data.showHiddenItems) {
+    return data.items.filter((it) => !it.name.startsWith('.'));
+  }
+
+  return data.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.error = '';
+  data.items = [];
+  data.lastSelected = undefined;
+
+  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 = () => {
+  const { storageHandle, dirPath, modelValue } = lookup.value;
+  if (storageHandle && modelValue) {
+    query(storageHandle, dirPath);
+  }
+};
+
+const updateDirPathDebounced = debounce((v: string | undefined) => {
+  if (v) {
+    data.dirPath = v;
+  }
+}, 1000);
+
+const breadcrumbs = computed(() => getFilePathBreadcrumbs(data.dirPath));
+
+const selectedFiles = computed(() => data.items.filter((f) => f.canBeSelected && f.selected && !f.isDir));
+
+const isReady = computed(() => selectedFiles.value.length > 0);
+
+const closeModal = () => {
+  emit('update:modelValue', false);
+};
+
+const submit = () => {
+  if (isReady.value && data.storageEntry?.handle) {
+    emit('import:files', {
+      storageHandle: data.storageEntry.handle,
+      files: selectedFiles.value.map((f) => f.handle!),
+    });
+    closeModal();
+  }
+};
+
+const setDirPath = (dirPath: string) => {
+  data.dirPath = dirPath;
+  if (data.storageEntry) {
+    load();
+  }
+};
+
+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 = () => {
+  data.error = '';
+  data.lastSelected = undefined;
+  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'),
+          (entry) => {
+            data.storageEntry = entry;
+            data.dirPath = entry.initialFullPath;
+          },
+        );
+      }
+    })
+    .catch((err) => (data.error = String(err)));
+};
+
+watch(toRef(data, 'storageEntry'), (entry) => {
+  data.dirPath = entry?.initialFullPath ?? '';
+});
+
+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;
+  }
+});
+
+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);
+    }
+  },
+};
+</script>
+
+<template>
+  <PlDialogModal class="split" :model-value="modelValue" width="688px" height="720px" @update:model-value="closeModal" @click.stop="deselectAll">
+    <div v-focus class="file-dialog" @keyup.enter="submit">
+      <div class="file-dialog__title">{{ title ?? 'Select files' }}</div>
+      <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" />
+      </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-comp isFile" />
+              <span v-text-overflown :title="file.name">{{ file.name }}</span>
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+    <!--@todo fix uikit css-->
+    <div style="padding-top: 24px; display: flex; gap: 12px; border-top: 1px solid rgb(225, 227, 235)" class="form-modal__actions bordered">
+      <PlBtnPrimary style="min-width: 160px" :disabled="!isReady" @click.stop="submit">Import</PlBtnPrimary>
+      <PlBtnGhost :justify-center="false" @click.stop="closeModal">Cancel</PlBtnGhost>
+    </div>
+  </PlDialogModal>
+</template>

package/src/components/PlFileDialog/index.ts

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