@milaboratories/uikit 1.2.13 → 1.2.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "1.2.13",
+  "version": "1.2.15",
   "type": "module",
   "main": "dist/pl-uikit.umd.js",
   "module": "dist/pl-uikit.js",
@@ -30,8 +30,8 @@
     "vite": "^5.4.8",
     "vue-tsc": "^2.1.6",
     "yarpm": "^1.2.0",
-    "@milaboratories/helpers": "^1.6.3",
-    "@platforma-sdk/model": "^1.2.29"
+    "@milaboratories/helpers": "^1.6.4",
+    "@platforma-sdk/model": "^1.2.30"
   },
   "scripts": {
     "dev": "vite",
@@ -47,6 +47,7 @@
     "minify-icons": "svgo -f src/assets/icons/icon-assets -o src/assets/icons/icon-assets-min",
     "generate-icons": "pnpm run parse-icons-folder && pnpm run minify-icons",
     "lint": "eslint . --ext js,ts,vue",
-    "check": "yarpm type-check && yarpm test && yarpm lint"
+    "check": "yarpm type-check && yarpm test && yarpm lint",
+    "do-pack": "rm *.tgz && pnpm pack && mv *.tgz package.tgz"
   }
 }

package/src/assets/base.scss

@@ -147,6 +147,7 @@ body {
   display: flex;
   flex-direction: column;
   height: 100%;
+  max-width: 100%;
   font-family: var(--font-family-base);
 }
 

package/src/assets/typography.scss

@@ -37,6 +37,7 @@ h4, h5, h6 {
   font-weight: 500;
   line-height: 24px; /* 120% */
   letter-spacing: -0.2px;
+  margin: 0;
 }
 
 a {

package/src/assets/variables.scss

@@ -66,6 +66,10 @@
   --main-spacing: 24px;
   --gap-v: 24px;
   --gap-h: 12px;
+  --z-slide-shadow: 80;
+  --z-slide-dialog: 81;
+  --z-dialog: 100;
+  --z-context-menu: 1001;
 }
 
 [data-theme='dark'] {

package/src/components/PlBtnPrimary/PlBtnPrimary.vue

@@ -41,7 +41,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <BtnBase class="ui-btn-primary" v-bind="props">
+  <BtnBase class="pl-btn-primary" v-bind="props">
     <slot />
   </BtnBase>
 </template>

package/src/components/PlBtnPrimary/pl-btn-primary.scss

@@ -1,6 +1,6 @@
 @import "@/assets/mixins";
 
-.ui-btn-primary {
+.pl-btn-primary {
   @include base-btn;
 
   --color-btn-hover: var(--color-primary-hover);
@@ -10,6 +10,7 @@
 
   background-color: var(--color-btn-background);
   border: none;
+  min-width: 160px;
 
   --append-shadow: inset 0 0 0 1px #110529;
 

package/src/components/PlBtnSecondary/PlBtnSecondary.vue

@@ -41,7 +41,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <BtnBase v-bind="props" class="ui-btn-secondary">
+  <BtnBase v-bind="props" class="pl-btn-secondary">
     <slot />
   </BtnBase>
 </template>

package/src/components/PlBtnSecondary/pl-btn-secondary.scss

@@ -1,6 +1,6 @@
 @import "@/assets/mixins";
 
-.ui-btn-secondary {
+.pl-btn-secondary {
   @include base-btn;
 
   --color-border: var(--color-border-default);
@@ -9,6 +9,7 @@
 
   border: 1px solid var(--color-border);
   background: transparent;
+  min-width: 160px;
 
   &:disabled {
     --color-text: var(--color-dis-01);

package/src/components/PlDialogModal/PlDialogModal.vue

@@ -5,19 +5,26 @@ export default {
 </script>
 
 <script lang="ts" setup>
+import { useEventListener } from '@/composition/useEventListener';
 import './pl-dialog-modal.scss';
-import { ref, useAttrs } from 'vue';
+import { ref, useAttrs, useSlots } from 'vue';
+
+const slots = useSlots();
 
 const emit = defineEmits(['update:modelValue']);
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
+    /**
+     * Determines whether the modal is open
+     */
     modelValue: boolean;
     width?: string;
     height?: string;
     minHeight?: string;
     type?: 'A' | 'B' | 'C';
     closable?: boolean;
+    noContentGutters?: boolean;
   }>(),
   {
     width: '448px',
@@ -25,6 +32,7 @@ withDefaults(
     height: 'auto',
     type: 'A',
     closable: true,
+    noContentGutters: false,
   },
 );
 
@@ -37,15 +45,35 @@ function onClickShadow(ev: Event) {
     emit('update:modelValue', false);
   }
 }
+
+useEventListener(document.body, 'keyup', (ev) => {
+  if (props.modelValue && ev.code === 'Escape') {
+    emit('update:modelValue', false);
+  }
+});
 </script>
 
 <template>
   <Teleport to="body">
     <Transition name="dialog">
-      <div v-if="modelValue" class="pl-dialog-modal__shadow" @click="onClickShadow" @keyup.esc="emit('update:modelValue', false)">
-        <div v-bind="$attrs" ref="modal" class="pl-dialog-modal" :class="[type]" :style="{ width, height, minHeight }">
+      <div v-if="modelValue" class="pl-dialog-modal__shadow" @click="onClickShadow">
+        <div
+          v-bind="$attrs"
+          ref="modal"
+          class="pl-dialog-modal"
+          :class="[type, slots.title ? 'has-title' : '']"
+          :style="{ width, height, minHeight }"
+        >
           <div v-if="closable" class="close-dialog-btn" @click.stop="emit('update:modelValue', false)" />
-          <slot />
+          <div v-if="slots.title" class="pl-dialog-modal__title">
+            <slot name="title" />
+          </div>
+          <div class="pl-dialog-modal__content" :class="{ 'no-content-gutters': noContentGutters }">
+            <slot />
+          </div>
+          <div v-if="slots.actions" class="pl-dialog-modal__actions">
+            <slot name="actions" />
+          </div>
         </div>
       </div>
     </Transition>

package/src/components/PlDialogModal/pl-dialog-modal.scss

@@ -1,33 +1,28 @@
 @import '@/assets/mixins';
 
 .pl-dialog-modal {
-  --padding: 24px 20px;
+  --padding-top: 24px;
   --border-radius: 12px;
 
   min-height: 400px;
   max-height: calc(100vh - 48px);
+  max-width: calc(100% - 48px);
+  min-width: 448px;
 
   position: absolute;
   top: 45%;
   left: 50%;
   transform: translateY(-50%) translateX(-50%);
   background-color: #fff;
-  padding: var(--padding);
+  padding-top: var(--padding-top);
   display: flex;
   flex-direction: column;
 
   box-shadow: 0 2px 8px rgba(36, 34, 61, 0.12);
   border-radius: var(--border-radius);
 
-  &.split {
-    --padding: 24px 0;
-    .form-modal {
-      padding: 0 24px;
-    }
-    .form-modal__actions {
-      padding-left: 24px;
-      padding-right: 24px;
-    }
+  &.has-title {
+    --padding-top: 0;
   }
 
   &.C {
@@ -35,22 +30,40 @@
     max-height: 80vh;
   }
 
-  h1 {
-    font-size: 24px;
-    margin: 0 0 24px 0;
-  }
-
   &__title {
-    color: var(--txt-01, #110529);
+    display: flex;
+    align-items: center;
+    font-family: var(--font-family-base);
     font-size: 28px;
+    font-style: normal;
     font-weight: 500;
     line-height: 32px; /* 114.286% */
     letter-spacing: -0.56px;
+    padding: 24px;
   }
 
-  button {
-    padding: 0 12px;
-    min-width: 70px;
+  &__content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    padding: 0 24px 24px;
+    padding-top: 16px;
+    &.no-content-gutters {
+      padding: 0 0;
+    }
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 0;
+    min-height: 88px;
+    padding: 0 24px;
+    button {
+      min-width: 160px;
+    }
   }
 
   .alert-error {
@@ -70,7 +83,7 @@
 
   &__shadow {
     position: absolute;
-    z-index: 2;
+    z-index: var(--z-dialog);
     top: var(--title-bar-height);
     left: 0;
     right: 0;

package/src/components/PlFileDialog/PlFileDialog.vue

@@ -14,11 +14,11 @@ 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 vFocus = {
+//   mounted: (el: HTMLElement) => {
+//     (el.querySelector('button.pl-btn-primary') as HTMLButtonElement | null)?.focus();
+//   },
+// };
 
 const emit = defineEmits<{
   (e: 'update:modelValue', value: boolean): void;
@@ -279,6 +279,10 @@ useEventListener(document, 'keydown', (ev: KeyboardEvent) => {
     ev.preventDefault();
     data.showHiddenItems = !data.showHiddenItems;
   }
+
+  if (ev.code === 'Enter') {
+    submit();
+  }
 });
 
 onUpdated(loadAvailableStorages);
@@ -294,9 +298,17 @@ const vTextOverflown = {
 </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>
+  <PlDialogModal
+    :no-content-gutters="true"
+    class="split"
+    :model-value="modelValue"
+    width="688px"
+    height="720px"
+    @update:model-value="closeModal"
+    @click.stop="deselectAll"
+  >
+    <template #title>{{ title ?? 'Select files' }}</template>
+    <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" />
@@ -338,10 +350,9 @@ const vTextOverflown = {
         </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">
+    <template #actions>
       <PlBtnPrimary style="min-width: 160px" :disabled="!isReady" @click.stop="submit">Import</PlBtnPrimary>
       <PlBtnGhost :justify-center="false" @click.stop="closeModal">Cancel</PlBtnGhost>
-    </div>
+    </template>
   </PlDialogModal>
 </template>

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

@@ -5,18 +5,9 @@
   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 {
+    padding-top: 6px;
     display: flex;
     flex-direction: column;
     gap: 24px;

package/src/components/PlFileInput/PlFileInput.vue

@@ -147,7 +147,7 @@ useLabelNotch(rootRef);
 
 <template>
   <div class="pl-file-input__envelope">
-    <div ref="rootRef" class="pl-file-input" :class="{ dashed, error: hasErrors }">
+    <div ref="rootRef" class="pl-file-input" tabindex="0" :class="{ dashed, error: hasErrors }" @keyup.enter="openFileDialog">
       <div class="pl-file-input__progress" :style="progressStyle" />
       <label v-if="label" ref="label">
         <i v-if="required" class="required-icon" />

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

@@ -14,6 +14,7 @@
   --icon-color: #000;
 
   width: 100%;
+  min-width: 160px;
   min-height: var(--control-height);
   position: relative;
   border-radius: var(--border-radius-control);

package/src/components/PlLogView/PlLogView.vue

@@ -8,20 +8,39 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { onMounted, onUpdated, ref } from 'vue';
+import { computed, onMounted, onUpdated, ref } from 'vue';
 import MaskIcon24 from '../MaskIcon24.vue';
 import './pl-log-view.scss';
-import { tapIf } from '@milaboratories/helpers';
+import { okOptional, tapIf } from '@milaboratories/helpers';
+import type { ValueOrErrors } from '@platforma-sdk/model';
+
+const getOutputError = <T,>(o?: ValueOrErrors<T>) => {
+  if (o && o.ok === false) {
+    return o.errors.join('\n');
+  }
+};
 
 const props = defineProps<{
   /**
    * String contents
    */
   value?: string;
+  /**
+   * String contents
+   */
+  error?: unknown;
+  /**
+   * Block output (Note: error and value take precedence over output property)
+   */
+  output?: ValueOrErrors<unknown>;
 }>();
 
 const contentRef = ref<HTMLElement>();
 
+const computedError = computed(() => props.error ?? getOutputError(props.output));
+
+const computedValue = computed(() => props.value ?? okOptional(props.output));
+
 const onClickCopy = () => {
   if (props.value) {
     navigator.clipboard.writeText(props.value);
@@ -43,8 +62,9 @@ onUpdated(scrollDown);
 </script>
 
 <template>
-  <div class="pl-log-view">
+  <div class="pl-log-view" :class="{ 'has-error': computedError }">
     <MaskIcon24 title="Copy content" class="pl-log-view__copy" name="clipboard" @click="onClickCopy" />
-    <div ref="contentRef" class="pl-log-view__content">{{ value }}</div>
+    <div v-if="computedError" class="pl-log-view__error">{{ computedError }}</div>
+    <div v-else ref="contentRef" class="pl-log-view__content">{{ computedValue }}</div>
   </div>
 </template>

package/src/components/PlLogView/pl-log-view.scss

@@ -1,16 +1,21 @@
 @import "@/assets/mixins";
 
 .pl-log-view {
+  --log-background: var(--bg-base-light);
   height: 100%;
   max-height: 100%;
   max-width: 100%;
   border-radius: 6px;
   border: 1px solid var(--border-color-div-grey);
-  background: var(--bg-base-light);
+  background: var(--log-background);
   display: flex;
   position: relative;
   min-height: 44px;
 
+  &.has-error {
+    --log-background: var(--notification-error);
+  }
+
   &__copy {
     position: absolute;
     top: 12px;
@@ -32,9 +37,23 @@
     font-family: var(--font-family-monospace);
     white-space: pre;
     font-size: 14px;
-    font-style: normal;
     font-weight: 400;
-    line-height: 20px; /* 142.857% */
+    line-height: 20px;
+    @include scrollbar(true, true);
+  }
+
+  &__error {
+    margin: 12px;
+    max-height: 100%;
+    max-width: 100%;
+    flex: 1;
+    color: var(--txt-01);
+    font-feature-settings: 'ss11' on, 'ss15' on, 'ss17' on;
+    font-family: var(--font-family-monospace);
+    white-space: pre;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
     @include scrollbar(true, true);
   }
 }

package/src/components/PlSlideModal/PlSlideModal.vue

@@ -6,7 +6,8 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, ref, useAttrs, useSlots } from 'vue';
+import './pl-slide-modal.scss';
+import { ref, useAttrs, useSlots } from 'vue';
 import TransitionSlidePanel from '@/components/TransitionSlidePanel.vue';
 import { useClickOutside, useEventListener } from '@/index';
 
@@ -43,8 +44,6 @@ const props = withDefaults(
   },
 );
 
-const width = computed(() => props.width ?? '100%');
-
 const modal = ref();
 
 const $attrs = useAttrs();
@@ -86,83 +85,6 @@ useEventListener(document, 'keydown', (evt: KeyboardEvent) => {
         </div>
       </div>
     </TransitionSlidePanel>
-    <div v-if="modelValue && shadow" class="pl-dialog-modal__shadow" @keyup.esc="emit('update:modelValue', false)" />
+    <div v-if="modelValue && shadow" class="pl-slide-modal__shadow" @keyup.esc="emit('update:modelValue', false)" />
   </Teleport>
 </template>
-
-<style lang="scss">
-@import '@/assets/mixins.scss';
-
-.pl-slide-modal {
-  --padding-top: 24px;
-  position: absolute;
-  top: var(--title-bar-height);
-  right: 0;
-  bottom: 0;
-  z-index: 3;
-  display: flex;
-  flex-direction: column;
-  padding-top: var(--padding-top);
-
-  will-change: transform;
-
-  background-color: #fff;
-
-  border-left: 1px solid var(--div-grey);
-  /* Shadow L */
-  box-shadow:
-    0px 8px 16px -4px rgba(15, 36, 77, 0.16),
-    0px 12px 32px -4px rgba(15, 36, 77, 0.16);
-
-  .close-dialog-btn {
-    position: absolute;
-    top: 12px;
-    right: 12px;
-    cursor: pointer;
-    background-color: #d3d7e0;
-    @include mask(url('@/assets/images/24_close.svg'), 24px);
-    &:hover {
-      background-color: var(--main-dark-color);
-    }
-  }
-
-  &.has-title {
-    --padding-top: 0;
-  }
-
-  &__title {
-    display: flex;
-    align-items: center;
-    font-family: var(--font-family-base);
-    font-size: 28px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 32px; /* 114.286% */
-    letter-spacing: -0.56px;
-    padding: 24px;
-  }
-
-  &__actions {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 0;
-    min-height: 88px;
-    padding: 0 24px;
-    button {
-      min-width: 160px;
-    }
-  }
-
-  // Closes modal too
-
-  &__content {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-    padding: 16px 0;
-    margin: 0 24px;
-  }
-}
-</style>

package/src/components/PlSlideModal/pl-slide-modal.scss

@@ -0,0 +1,88 @@
+@import '@/assets/mixins.scss';
+
+.pl-slide-modal {
+  --padding-top: 24px;
+  position: absolute;
+  top: var(--title-bar-height);
+  right: 0;
+  bottom: 0;
+  z-index: var(--z-slide-dialog);
+  display: flex;
+  flex-direction: column;
+  padding-top: var(--padding-top);
+
+  min-width: 368px;
+  width: 368px;
+  max-width: 100%;
+
+  will-change: transform;
+
+  background-color: #fff;
+
+  border-left: 1px solid var(--div-grey);
+  /* Shadow L */
+  box-shadow:
+    0px 8px 16px -4px rgba(15, 36, 77, 0.16),
+    0px 12px 32px -4px rgba(15, 36, 77, 0.16);
+
+  .close-dialog-btn {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    cursor: pointer;
+    background-color: #d3d7e0;
+    @include mask(url('@/assets/images/24_close.svg'), 24px);
+    &:hover {
+      background-color: var(--main-dark-color);
+    }
+  }
+
+  &.has-title {
+    --padding-top: 0;
+  }
+
+  &__title {
+    display: flex;
+    align-items: center;
+    font-family: var(--font-family-base);
+    font-size: 28px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 32px; /* 114.286% */
+    letter-spacing: -0.56px;
+    padding: 24px;
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 0;
+    min-height: 88px;
+    padding: 0 24px;
+    button {
+      min-width: 160px;
+    }
+  }
+
+  // Closes modal too
+
+  &__content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    padding: 16px 0;
+    margin: 0 24px;
+  }
+
+  &__shadow {
+    position: absolute;
+    z-index: var(--z-slide-shadow);
+    top: var(--title-bar-height);
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.64);
+  }
+}

package/src/components/PlTextField/pl-text-field.scss

@@ -12,6 +12,7 @@
   --prefix-color: var(--color-placeholder);
 
   width: 100%;
+  min-width: 160px;
   min-height: var(--control-height);
   position: relative;
   border-radius: var(--border-radius-control);