@milaboratories/uikit 2.2.10 → 2.2.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.2.10",
+  "version": "2.2.12",
   "type": "module",
   "main": "dist/pl-uikit.umd.js",
   "module": "dist/pl-uikit.js",
@@ -33,7 +33,7 @@
     "yarpm": "^1.2.0",
     "svgo": "^3.3.2",
     "@milaboratories/helpers": "^1.6.7",
-    "@platforma-sdk/model": "^1.10.12"
+    "@platforma-sdk/model": "^1.13.2"
   },
   "scripts": {
     "dev": "vite",

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

package/src/layout/PlBlockPage/PlBlockPage.vue

@@ -10,10 +10,14 @@ import { useSlots } from 'vue';
 import './pl-block-page.scss';
 
 const slots = useSlots();
+
+defineProps<{
+  noBodyGutters?: boolean;
+}>();
 </script>
 
 <template>
-  <div class="pl-layout-component pl-block-page">
+  <div class="pl-layout-component pl-block-page" :class="{ noBodyGutters }">
     <div v-if="slots.title" class="pl-block-page__title">
       <h1><slot name="title" /></h1>
       <div class="pl-block-page__title__append">

package/src/layout/PlBlockPage/pl-block-page.scss

@@ -1,6 +1,8 @@
 @import "@/assets/mixins";
 
 .pl-block-page {
+  --pl-block-page-body-padding: var(--main-spacing, 24px);
+
   padding: var(--container-spacing);
   background-color: var(--bg-elevated-01);
   height: 100%;
@@ -8,6 +10,10 @@
   display: grid;
   grid-template-rows: auto minmax(0, 1fr);
 
+  &.noBodyGutters {
+    --pl-block-page-body-padding: 0;
+  }
+
   &__title {
     height: 80px;
     display: flex;
@@ -37,7 +43,7 @@
     display: flex;
     flex-direction: column;
     gap: var(--gap-v);
-    padding: var(--main-spacing, 24px);
+    padding: var(--pl-block-page-body-padding);
     @include scrollbar(true, true);
   }
 }

package/src/layout/PlRow/PlRow.vue

@@ -11,6 +11,7 @@ import './pl-row.scss';
 defineProps<{
   wrap?: boolean;
   alignCenter?: boolean;
+  noGap?: boolean;
 }>();
 </script>
 

package/src/layout/PlRow/pl-row.scss

@@ -3,6 +3,10 @@
   flex-direction: row;
   gap: var(--gap-h);
 
+  &.noGap {
+    gap: 0;
+  }
+
   &.wrap {
     flex-wrap: wrap;
   }