@milaboratories/uikit 2.2.78 → 2.2.80

package/package.json

@@ -1,21 +1,18 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.2.78",
+  "version": "2.2.80",
   "type": "module",
   "main": "dist/pl-uikit.js",
   "module": "dist/pl-uikit.js",
   "types": "dist/src/index.d.ts",
-  "styles": "dist/style.css",
+  "styles": "dist/pl-uikit.css",
   "exports": {
     ".": {
-      "style": "./styles/main.css",
       "types": "./dist/src/index.d.ts",
       "default": "./dist/pl-uikit.js"
     },
-    "./styles": {
-      "default": "./dist/style.css"
-    },
-    "./*": "./*"
+    "./styles": "./dist/pl-uikit.css",
+    "./styles/mixins": "./src/assets/mixins.scss"
   },
   "dependencies": {
     "vue": "^3.5.13",
@@ -29,13 +26,13 @@
     "@vitejs/plugin-vue": "^5.2.3",
     "tsc-alias": "^1.8.11",
     "vitest": "^2.1.9",
-    "vite": "^5.4.11",
+    "vite": "^6.3.5",
     "vue-tsc": "^2.1.10",
     "yarpm": "^1.2.0",
     "svgo": "^3.3.2",
     "@types/d3": "^7.4.3",
     "@milaboratories/eslint-config": "^1.0.4",
-    "@milaboratories/helpers": "^1.6.11",
+    "@milaboratories/helpers": "^1.6.12",
     "@platforma-sdk/model": "^1.33.2"
   },
   "scripts": {

package/src/assets/base.scss

@@ -37,6 +37,7 @@
 
   --font-size-base: 14px;
   --font-weigh-base: 500;
+  --line-height-base: 16px;
 
   --control-height: 40px;
   --control-hover-color: #363452;
@@ -135,8 +136,8 @@ body,
   height: 100%;
   padding: 0;
   margin: 0;
-  font-size: 14px;
-  line-height: 16px;
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
   color: var(--main-dark-color);
   box-sizing: border-box;
   position: relative;

package/src/assets/variables.scss

@@ -39,6 +39,7 @@
   --bg-base-light: #f7f8fa;
   --bg-elevated-01: #ffffff;
   --bg-elevated-02: #e1e3eb;
+  --bg-error: #FFF5F5;
   //filled
   --filled-V-BG: #d0f0c0;
   --filled-D-BG: #ffcecc;
@@ -120,6 +121,7 @@
   --bg-base-light: #0d0d0f;
   --bg-elevated-01: #1b1b1f;
   --bg-elevated-02: #2d2d33;
+  --bg-error: #FFF5F5;
   //filled
   --filled-V-BG: rgba(66, 184, 66, 0.4);
   --filled-D-BG: rgba(229, 83, 229, 0.4);

package/src/components/PlAutocomplete/PlAutocomplete.vue

@@ -209,7 +209,7 @@ const toggleOpen = () => {
 
 watch(() => data.open, (v) => {
   search.value = v ? '' : null;
-})
+});
 
 const onInputFocus = () => {
   data.open = true;

package/src/components/PlClipboard/PlClipboard.vue

@@ -0,0 +1,47 @@
+<script lang="ts">
+export default {
+  name: 'PlClipboard',
+};
+</script>
+
+<script lang="ts" setup>
+import { PlMaskIcon16 } from '@/components/PlMaskIcon16';
+import type { Size } from '@/types.ts';
+import { computed, onUnmounted, ref } from 'vue';
+
+const props = defineProps<{
+  size?: Size;
+}>();
+
+const emit = defineEmits(['copy']);
+
+const copyEffect = ref<boolean>(false);
+
+const iconName = computed(() => copyEffect.value ? 'clipboard-copied' : 'clipboard');
+
+let timeoutId: undefined | number;
+
+function onCopy() {
+  clearTimeout(timeoutId);
+  copyEffect.value = true;
+  emit('copy');
+  timeoutId = window.setTimeout(() => {
+    copyEffect.value = false;
+  }, 1000);
+}
+
+onUnmounted(() => {
+  clearTimeout(timeoutId);
+});
+</script>
+
+<template>
+  <PlMaskIcon16 :name="iconName" :size="props.size" :class="$style.copy" @click="onCopy" />
+</template>
+
+<style module>
+.copy {
+  cursor: pointer;
+  display: block;
+}
+</style>

package/src/components/PlClipboard/index.ts

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

package/src/components/PlErrorAlert/PlErrorAlert.vue

@@ -0,0 +1,105 @@
+<script lang="ts">
+export default {
+  name: 'PlErrorAlert',
+};
+</script>
+
+<script lang="ts" setup>
+import { PlClipboard } from '@/components/PlClipboard';
+import { PlMaskIcon16 } from '@/components/PlMaskIcon16';
+
+const props = withDefaults(
+  defineProps<{
+    title?: string;
+    message?: string;
+    maxHeight?: string;
+    copyMessage?: string;
+  }>(),
+  {
+    title: undefined,
+    message: undefined,
+    maxHeight: '300px',
+    copyMessage: undefined,
+  },
+);
+
+function onCopy() {
+  const value = props.copyMessage ?? props.message;
+  if (typeof value === 'string') {
+    navigator.clipboard.writeText(value);
+  }
+}
+</script>
+
+<template>
+  <div :style="{ maxHeight: props.maxHeight }" :class="$style.root">
+    <PlClipboard :class="$style.copy" @copy="onCopy" />
+    <slot name="title">
+      <div :class="$style.title">
+        <PlMaskIcon16 :class="$style.titleIcon" name="warning" />
+        <div :class="$style.titleText">{{ props.title }}</div>
+      </div>
+    </slot>
+    <slot name="message">
+      <div :class="$style.message">
+        {{ props.message }}
+      </div>
+    </slot>
+  </div>
+</template>
+
+<style module>
+.root {
+  position: relative;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px;
+  background: var(--bg-error);
+  border: 1px var(--border-color-error) solid;
+  border-radius: var(--border-radius-control);
+  /* color: var(--txt-error); */
+}
+
+.copy {
+  position: absolute;
+  right: 12px;
+  top: 12px;
+  opacity: 0.4;
+  transition: opacity 0.3s;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  max-width: calc(100% - 20px);
+  min-height: 24px;
+  line-height: 24px;
+  font-weight: bold;
+  overflow: hidden;
+}
+
+.titleIcon {
+  background-color: var(--txt-error);
+}
+
+.titleText {
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.message {
+  overflow: auto;
+  max-height: 100%;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: var(--font-family-monospace);
+}
+</style>

package/src/components/PlErrorAlert/index.ts

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

package/src/components/PlErrorBoundary/PlErrorBoundary.vue

@@ -0,0 +1,59 @@
+<script lang="ts" setup>
+import { computed, onErrorCaptured, ref, onBeforeUpdate } from 'vue';
+import { PlErrorAlert } from '@/components/PlErrorAlert';
+import { isErrorLike, tryDo } from '@milaboratories/helpers';
+
+const extractMessage = (err: unknown): undefined | string => {
+  if (err == null) {
+    return undefined;
+  }
+
+  if (isErrorLike(err)) {
+    return err.stack == null || err.stack.length === 0
+      ? err.message
+      : err.stack.includes(err.message)
+        ? err.stack
+        : err.message + '\n' + err.stack;
+  }
+
+  return tryDo(() => JSON.stringify(err, null, 4), () => err.toString());
+};
+
+const data = ref<null | {
+  title: undefined | string;
+  error: Error;
+}>(null);
+
+const error = computed(() => data.value?.error);
+const message = computed(() => extractMessage(error.value));
+
+function reset() {
+  data.value = null;
+}
+
+const errorAlert = ref<InstanceType<typeof PlErrorAlert> | null>(null);
+
+onBeforeUpdate(() => {
+  // If an error is currently displayed, and the component updates (e.g., due to slot content changing),
+  // reset the error state.
+  if (data.value !== null && errorAlert.value) {
+    reset();
+  }
+});
+
+onErrorCaptured((err, instance) => {
+  data.value = {
+    title: instance?.$?.type?.name ?? undefined,
+    error: err,
+  };
+  // stop error propagation
+  return false;
+});
+
+defineExpose({ error, reset });
+</script>
+
+<template>
+  <slot />
+  <PlErrorAlert v-if="error" ref="errorAlert" :message="message" :title="data?.title" />
+</template>

package/src/components/PlErrorBoundary/index.ts

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

package/src/components/PlFileInput/PlFileInput.vue

@@ -9,7 +9,7 @@ import type { ImportFileHandle, ImportProgress } from '@platforma-sdk/model';
 import { getFileNameFromHandle, getFilePathFromHandle } from '@platforma-sdk/model';
 import DoubleContour from '@/utils/DoubleContour.vue';
 import { useLabelNotch } from '@/utils/useLabelNotch';
-import { prettyBytes, tryDo } from '@milaboratories/helpers';
+import { isErrorLike, prettyBytes, tryDo } from '@milaboratories/helpers';
 
 const data = reactive({
   fileDialogOpen: false,
@@ -99,10 +99,6 @@ const tryValue = <T extends ImportFileHandle>(v: T | undefined, cb: (v: T) => st
   }
 };
 
-const isErrorObject = (error: unknown): error is { message: string } => {
-  return typeof error === 'object' && error != null && 'message' in error && typeof error.message === 'string';
-};
-
 const fileName = computed(() => tryValue(props.modelValue, getFileNameFromHandle));
 
 const filePath = computed(() => tryValue(props.modelValue, getFilePathFromHandle));
@@ -118,7 +114,7 @@ const computedError = computed(() => {
     message = data.error;
   } else if (typeof props.error === 'string') {
     message = props.error;
-  } else if (isErrorObject(props.error)) {
+  } else if (isErrorLike(props.error)) {
     message = props.error.message;
   } else if (props.error != null) {
     const unknownString = tryDo(() => JSON.stringify(props.error, null, 4), () => String(props.error));
@@ -191,13 +187,13 @@ if (!props.cellStyle) {
   <div :class="{ 'pl-file-input__cell-style': !!cellStyle, 'has-file': !!fileName }" class="pl-file-input__envelope">
     <div
       ref="rootRef"
+      :class="{ dashed, error: hasErrors }"
       class="pl-file-input"
       tabindex="0"
-      :class="{ dashed, error: hasErrors }"
       @keyup.enter="openFileDialog"
       @click.stop="openFileDialog"
     >
-      <div class="pl-file-input__progress" :style="progressStyle" />
+      <div :style="progressStyle" class="pl-file-input__progress" />
       <label v-if="!cellStyle && label" ref="label">
         <i v-if="required" class="required-icon" />
         <span>{{ label }}</span>
@@ -226,9 +222,9 @@ if (!props.cellStyle) {
   </div>
   <PlFileDialog
     v-model="data.fileDialogOpen"
+    :close-on-outside-click="fileDialogCloseOnOutsideClick"
     :extensions="extensions"
     :title="fileDialogTitle"
-    :close-on-outside-click="fileDialogCloseOnOutsideClick"
     @import:files="onImport"
   />
 </template>

package/src/index.ts

@@ -17,6 +17,8 @@ export * from './layout/PlGrid';
 /**
  * Components
  */
+export * from './components/PlErrorBoundary';
+// export * from './components/PlErrorAlert'; // @TODO discuss if we should export it
 export * from './components/PlAlert';
 export * from './components/PlBtnSplit';
 export * from './components/PlBtnPrimary';

package/vite.config.ts

@@ -59,11 +59,4 @@ export default defineConfig({
       },
     },
   },
-  css: {
-    preprocessorOptions: {
-      scss: {
-        api: 'modern-compiler',
-      },
-    },
-  },
 });