@milaboratories/uikit 1.2.13 → 1.2.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "1.2.13",
+  "version": "1.2.14",
   "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/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/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/types.ts

@@ -27,15 +27,15 @@ export type SimpleOption<T = unknown> = {
 
 export type ListOption<T = unknown> =
   | {
-    text: string;
-    description?: string;
-    value: T;
-  }
+      text: string;
+      description?: string;
+      value: T;
+    }
   | {
-    label: string;
-    description?: string;
-    value: T;
-  };
+      label: string;
+      description?: string;
+      value: T;
+    };
 
 export type ListOptionNormalized<T = unknown> = {
   label: string;