@milaboratories/uikit 1.2.3

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

@@ -0,0 +1,181 @@
+@import "@/assets/mixins";
+
+.file-dialog {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  overflow: auto;
+
+  &__title {
+    font-weight: 500;
+    font-size: 28px;
+    line-height: 32px;
+    letter-spacing: -0.56px;
+    color: var(--txt-01);
+    margin-bottom: 16px;
+    margin: 0 24px 16px 24px;
+  }
+
+  &__search {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    margin: 0 24px;
+  }
+
+  .ls-container {
+    display: flex;
+    flex-direction: column;
+    border-top: 1px solid var(--border-color-div-grey);
+  }
+  
+  .ls-head {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    height: 40px;
+    font-size: 11px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 12px;
+    letter-spacing: 0.44px;
+    border-bottom: 1px solid var(--border-color-div-grey);
+    background-color: var(--bg-base-light);
+    padding: 0 24px;
+    &__selected {
+      font-size: 11px;
+      font-weight: 600;
+      letter-spacing: 0.44px;
+      text-transform: uppercase;
+    }
+    > div {
+      cursor: pointer;
+    }
+  
+    &__breadcrumbs {
+      color: var(--txt-01);
+      font-size: 14px;
+      font-weight: 600;
+  
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 2px;
+  
+      > div {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+      }
+  
+      i {
+        display: inline-block;
+      }
+    }
+  }
+
+  .ls-error {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    align-items: center;
+    background-color: var(--bg-base-light);
+    height: 366px;
+    &__cat {
+      margin-top: 40px;
+      width: 240px;
+      height: 200px;
+      background: url('@/assets/images/no-data-cat.svg');
+    }
+    &__message {
+      color: var(--txt-mask);
+      text-align: center;
+      font-size: 28px;
+      line-height: 28px;
+      font-weight: 500;
+      letter-spacing: -0.56px;
+      overflow: hidden;
+    }
+  }
+
+  .ls-empty {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    align-items: center;
+    background-color: var(--bg-base-light);
+    height: 366px;
+    &__cat {
+      margin-top: 40px;
+      width: 400px;
+      height: 200px;
+      background: url('@/assets/images/empty-cat.svg');
+    }
+    &__message {
+      color: var(--txt-mask);
+      text-align: center;
+      font-size: 28px;
+      font-weight: 500;
+      letter-spacing: -0.56px;
+    }
+  }
+  
+  .ls-body {
+    padding: 12px;
+    height: 366px;
+    @include scrollbar(true);
+    overflow: auto;
+    user-select: none;
+    display: flex;
+    flex-direction: column;
+    > div {
+      font-family: var(--font-family-monospace);
+      color: var(--txt-01);
+      font-feature-settings: 'ss11' on, 'ss15' on, 'ss17' on;
+      font-size: 14px;
+      font-weight: 400;
+      display: flex;
+      align-items: center;
+      min-height: 24px;
+      gap: 12px;
+      padding: 0 12px;
+      > span {
+        display: inline-block;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+      > i {
+        min-width: 16px;
+      }
+      i.isFile {
+        display: inline-block;
+        background-color: #CFD1DB;
+      }
+      &.isDir {
+        cursor: pointer;
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+      &.canBeSelected {
+        color: var(--txt-01);
+        &.selected {
+          background-color: var(--btn-active-select);
+        }
+      }
+    }
+  }
+  
+  .ls-loader {
+    display: flex;
+    align-items: center;
+    justify-items: center;
+    height: 366px;
+    transform: scale(4);
+    .loader-icon {
+      animation: spin 4s linear infinite;
+      background-color: #ccc;
+      margin: auto;
+    }
+  }
+}

package/src/components/PlFileDialog/utils.ts

@@ -0,0 +1,27 @@
+import type { ImportFileHandle } from '@platforma-sdk/model';
+
+export function getFilePathBreadcrumbs(filePath: string) {
+  const chunks = filePath.split('/');
+
+  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('/'),
+    });
+  }
+
+  return stack;
+}
+
+export type FileDialogItem = {
+  id: number;
+  path: string;
+  name: string;
+  canBeSelected: boolean;
+  isDir: boolean;
+  selected: boolean;
+  handle: ImportFileHandle | undefined;
+};

package/src/components/PlFileInput/PlFileInput.vue

@@ -0,0 +1,178 @@
+<script lang="ts" setup>
+import './pl-file-input.scss';
+import { PlTooltip } from '@/components/PlTooltip';
+import { PlFileDialog } from '@/components/PlFileDialog';
+import type { ImportedFiles } from '@/types';
+import MaskIcon24 from '@/components/MaskIcon24.vue';
+import { computed, reactive, ref, useSlots } from 'vue';
+import type { ImportFileHandle, ImportProgress } from '@platforma-sdk/model';
+import { 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,
+});
+
+const slots = useSlots();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: ImportFileHandle | undefined): void;
+}>();
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * The current import file handle.
+     */
+    modelValue: ImportFileHandle | undefined;
+    /**
+     * The label to display above the input field.
+     */
+    label?: string;
+    /**
+     * If `true`, the input field is marked as required.
+     */
+    required?: boolean;
+    /**
+     * If `true`, the component border is dashed.
+     */
+    dashed?: boolean;
+    /**
+     * Allowed file extensions (should start with `.`)
+     */
+    extensions?: string[];
+    /**
+     * File dialog title
+     */
+    fileDialogTitle?: string;
+    /**
+     * Placeholder text
+     */
+    placeholder?: string;
+    /**
+     * Import/Upload progress
+     */
+    progress?: ImportProgress;
+    /**
+     * An error message to display below the input field.
+     */
+    error?: string;
+    /**
+     * 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;
+  }>(),
+  {
+    label: undefined,
+    extensions: undefined,
+    fileDialogTitle: undefined,
+    placeholder: undefined,
+    progress: undefined,
+    error: undefined,
+    helper: undefined,
+  },
+);
+
+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;
+    }
+  }
+
+  return '';
+});
+
+const isUploading = computed(() => props.progress && !props.progress.done);
+
+const isUploaded = computed(() => props.progress && props.progress.done);
+
+const hasErrors = computed(() => props.error || props.progress?.lastError);
+
+const computedError = computed(() => props.error ?? props.progress?.lastError);
+
+const uploadStats = computed(() => {
+  const { status, done } = props.progress ?? {};
+
+  if (!status || !status.bytesTotal) {
+    return '';
+  }
+
+  if (status.bytesProcessed && !done) {
+    return prettyBytes(status.bytesProcessed, {}) + ' / ' + prettyBytes(status.bytesTotal, {});
+  }
+
+  return prettyBytes(status.bytesTotal, {});
+});
+
+const progressStyle = computed(() => {
+  const { progress } = props;
+
+  if (!progress) {
+    return {};
+  }
+
+  return {
+    width: progress.done ? '100%' : Math.round((progress.status?.progress ?? 0) * 100) + '%',
+  };
+});
+
+const openFileDialog = () => {
+  data.fileDialogOpen = true;
+};
+
+const onImport = (v: ImportedFiles) => {
+  if (v.files.length) {
+    emit('update:modelValue', v.files[0]);
+  }
+};
+
+const clear = () => emit('update:modelValue', undefined);
+
+const rootRef = ref();
+
+useLabelNotch(rootRef);
+</script>
+
+<template>
+  <div class="pl-file-input__envelope">
+    <div ref="rootRef" class="pl-file-input" :class="{ dashed, error: hasErrors }">
+      <div class="pl-file-input__progress" :style="progressStyle" />
+      <label v-if="label" ref="label">
+        <i v-if="required" class="required-icon" />
+        <span>{{ label }}</span>
+        <PlTooltip v-if="slots.tooltip" class="info" position="top">
+          <template #tooltip>
+            <slot name="tooltip" />
+          </template>
+        </PlTooltip>
+      </label>
+      <MaskIcon24 v-if="hasErrors" name="restart" />
+      <MaskIcon24 v-else-if="isUploading" name="cloud-up" />
+      <MaskIcon24 v-else-if="isUploaded" name="success" />
+      <MaskIcon24 v-else name="paper-clip" />
+      <div :data-placeholder="placeholder ?? 'Choose file'" class="pl-file-input__filename" @click.stop="openFileDialog">
+        {{ fileName }}
+      </div>
+      <div v-if="uploadStats" class="pl-file-input__stats">{{ uploadStats }}</div>
+      <MaskIcon24 v-if="modelValue" name="close" @click.stop="clear" />
+      <DoubleContour class="pl-file-input__contour" />
+    </div>
+    <div v-if="hasErrors" class="pl-file-input__error">
+      {{ computedError }}
+    </div>
+    <div v-else-if="helper" class="upl-file-input__helper">{{ helper }}</div>
+  </div>
+  <PlFileDialog v-model="data.fileDialogOpen" :extensions="extensions" :title="fileDialogTitle" @import:files="onImport" />
+</template>

package/src/components/PlFileInput/index.ts

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

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

@@ -0,0 +1,177 @@
+@import '@/assets/mixins.scss';
+
+.pl-file-input {
+  $root: &;
+
+  --contour-color: var(--txt-01);
+  --label-color: var(--txt-01);
+  --text-color: var(--txt-01);
+  --contour-border-width: 1px;
+  --contour-box-shadow: none;
+  --label-offset-left-x: 8px;
+  --label-offset-right-x: 8px;
+  --prefix-color: var(--color-placeholder);
+  --icon-color: #000;
+
+  width: 100%;
+  min-height: var(--control-height);
+  position: relative;
+  border-radius: var(--border-radius-control);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  outline: none;
+
+  padding: 0 8px;
+  gap: 8px;
+
+  &__envelope {
+    font-family: var(--font-family-base);
+  }
+
+  .mask-24 {
+    display: block;
+    min-width: 24px;
+    background-color: var(--icon-color);
+  }
+
+  .mask-close {
+    cursor: pointer;
+  }
+
+  &__progress {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: linear-gradient(90deg, #FFF 0%, #D8FAC8 100%);
+    pointer-events: none;
+    width: 0;
+  }
+
+  &__filename {
+    height: 100%;
+    width: 100%;
+    border: none;
+    font-size: inherit;
+    background-color: transparent;
+    color: var(--text-color);
+    caret-color: var(--border-color-focus);
+    cursor: inherit;
+    z-index: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: pointer;
+
+    &:focus {
+      outline: none;
+    }
+
+    &:empty::before {
+      color: var(--color-placeholder);
+      content: attr(data-placeholder);
+    }
+  }
+
+  &__stats {
+    white-space: nowrap;
+    z-index: 1;
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.44px;
+    text-transform: uppercase;
+    color: var(--txt-03);
+  }
+
+  label {
+    @include outlined-control-label();
+  }
+
+  &__contour {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: var(--border-radius-control);
+    border-width: var(--contour-border-width);
+    border-color: var(--contour-color);
+    border-style: solid;
+    box-shadow: var(--contour-box-shadow);
+    z-index: 0;
+    pointer-events: none;
+  }
+
+  &__prefix {
+    padding-left: 12px;
+    white-space: nowrap;
+    margin-right: -12px;
+    color: var(--prefix-color);
+  }
+
+  &__append {
+    padding-right: 12px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 4px;
+    .icon {
+      cursor: pointer;
+    }
+    .mask {
+      background-color: var(--control-mask-fill);
+      cursor: pointer;
+    }
+  }
+
+  &__helper {
+    @include field-helper();
+  }
+
+  &__error {
+    @include field-error();
+  }
+
+  &: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);
+  }
+
+  &.dashed {
+    #{$root}__contour {
+      border-style: dashed;
+    }
+  }
+
+  &.nonEmpty {
+    --prefix-color: var(--txt-01);
+  }
+
+  &.error {
+    --contour-color: var(--txt-error);
+    --label-color: var(--txt-error);
+    --text-color: var(--txt-error);
+    --icon-color: var(--txt-error);
+    .pl-file-input__progress {
+      display: none;
+    }
+  }
+
+  &.disabled {
+    --contour-color: var(--color-dis-01);
+    cursor: not-allowed;
+  }
+}

package/src/components/PlFileInput/utils.ts

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