@platforma-sdk/ui-vue 1.7.34 → 1.7.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platforma-sdk/ui-vue",
-  "version": "1.7.34",
+  "version": "1.7.36",
   "type": "module",
   "main": "dist/lib.umd.cjs",
   "module": "dist/lib.js",
@@ -18,23 +18,23 @@
     "./*": "./*"
   },
   "dependencies": {
-    "lru-cache": "^11.0.1",
+    "lru-cache": "^11.0.2",
     "vue": "^3.5.12",
     "canonicalize": "^2.0.0",
-    "@ag-grid-community/core": "^32.3.0",
-    "@ag-grid-community/client-side-row-model": "^32.3.0",
-    "@ag-grid-community/infinite-row-model": "^32.3.0",
-    "@ag-grid-enterprise/server-side-row-model": "^32.3.0",
-    "@ag-grid-community/styles": "^32.3.0",
-    "@ag-grid-community/vue3": "^32.3.0",
-    "@ag-grid-community/csv-export": "^32.3.0",
-    "@ag-grid-enterprise/core": "^32.3.0",
-    "@ag-grid-enterprise/clipboard": "^32.3.0",
-    "@ag-grid-enterprise/range-selection": "^32.3.0",
-    "@ag-grid-enterprise/rich-select": "^32.3.0",
-    "@ag-grid-enterprise/menu": "^32.3.0",
-    "@ag-grid-enterprise/excel-export": "^32.3.0",
-    "@milaboratories/uikit": "^2.0.1",
+    "@ag-grid-community/core": "^32.3.2",
+    "@ag-grid-community/client-side-row-model": "^32.3.2",
+    "@ag-grid-community/infinite-row-model": "^32.3.2",
+    "@ag-grid-enterprise/server-side-row-model": "^32.3.2",
+    "@ag-grid-community/styles": "^32.3.2",
+    "@ag-grid-community/vue3": "^32.3.2",
+    "@ag-grid-community/csv-export": "^32.3.2",
+    "@ag-grid-enterprise/core": "^32.3.2",
+    "@ag-grid-enterprise/clipboard": "^32.3.2",
+    "@ag-grid-enterprise/range-selection": "^32.3.2",
+    "@ag-grid-enterprise/rich-select": "^32.3.2",
+    "@ag-grid-enterprise/menu": "^32.3.2",
+    "@ag-grid-enterprise/excel-export": "^32.3.2",
+    "@milaboratories/uikit": "^2.0.3",
     "@platforma-sdk/model": "^1.7.20"
   },
   "devDependencies": {
@@ -43,7 +43,7 @@
     "@types/node": "~20.16.15",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@vitejs/plugin-vue": "^5.1.4",
-    "@vueuse/core": "^11.1.0",
+    "@vueuse/core": "^11.2.0",
     "canonicalize": "^2.0.0",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
@@ -54,7 +54,7 @@
     "sass": "~1.77.8",
     "typescript": "~5.5.4",
     "vite": "^5.4.10",
-    "vitest": "^2.1.3",
+    "vitest": "^2.1.4",
     "vue-tsc": "^2.1.6",
     "zod": "^3.23.8",
     "yarpm": "^1.2.0",

package/src/components/BlockLayout.vue

@@ -5,6 +5,7 @@ import { computed } from 'vue';
 import { useSdkPlugin } from '../defineApp';
 import NotFound from './NotFound.vue';
 import LoaderPage from './LoaderPage.vue';
+import { PlAppErrorNotificationAlert } from './PlAppErrorNotificationAlert';
 
 const sdk = useSdkPlugin();
 
@@ -28,6 +29,12 @@ const CurrentView = computed(() => {
 
   return undefined;
 });
+
+const app = computed(() => (sdk.loaded ? sdk.useApp() : undefined));
+
+const errors = computed(() => (app.value ? app.value.model.outputErrors : {}));
+
+const showErrorsNotification = computed(() => app.value?.showErrorsNotification);
 </script>
 
 <template>
@@ -36,5 +43,6 @@ const CurrentView = computed(() => {
     <LoaderPage v-else-if="!sdk.loaded">Loading...</LoaderPage>
     <component :is="CurrentView" v-else-if="CurrentView" :key="href" />
     <NotFound v-else />
+    <PlAppErrorNotificationAlert v-if="sdk.loaded && showErrorsNotification" :errors="errors" />
   </div>
 </template>

package/src/components/PlAppErrorNotificationAlert/PlAppErrorNotificationAlert.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import type { BlockOutputsBase } from '@platforma-sdk/model';
+import type { OutputErrors } from '../../types';
+// @TODO module
+import './pl-app-error-notification-alert.scss';
+import { PlBtnPrimary, PlDialogModal, PlNotificationAlert, PlSpacer, PlCopyData } from '@milaboratories/uikit';
+import { ref, watch } from 'vue';
+
+const props = defineProps<{ errors: OutputErrors<BlockOutputsBase> }>();
+
+const isModalOpen = ref(false);
+
+const isAlertOpen = ref(true);
+
+function showErrors() {
+  isModalOpen.value = true;
+}
+
+function copyData(data: OutputErrors<BlockOutputsBase>[string]) {
+  if (navigator.clipboard) {
+    navigator.clipboard.writeText(JSON.stringify(data));
+  }
+}
+
+// @TODO (temp)
+watch(
+  () => props.errors,
+  (errors) => {
+    isAlertOpen.value = Object.values(errors).some((v) => !!v);
+  },
+  { immediate: true, deep: true },
+);
+</script>
+<template>
+  <div class="pl-app-notification-alert">
+    <PlDialogModal v-model="isModalOpen" width="50%" style="max-height: 100vh">
+      <template #title> Errors </template>
+      <div class="pl-app-notification-alert__content">
+        <div v-for="(err, name) in errors" :key="name" class="pl-app-notification-alert__item">
+          <div class="pl-app-notification-alert__title">{{ name }}</div>
+          <div class="pl-app-notification-alert__error-description">
+            <code>
+              {{ err?.message }}
+            </code>
+            <PlCopyData class="pl-app-notification-alert__copy-icon" @copy-data="copyData(err)" />
+          </div>
+        </div>
+      </div>
+    </PlDialogModal>
+
+    <PlNotificationAlert v-model="isAlertOpen" type="error" closable>
+      Output failed. Review block logic and retry
+      <template #actions>
+        <PlSpacer />
+        <PlBtnPrimary @click="showErrors">Show errors</PlBtnPrimary>
+      </template>
+    </PlNotificationAlert>
+  </div>
+</template>

package/src/components/PlAppErrorNotificationAlert/index.ts

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

package/src/components/PlAppErrorNotificationAlert/pl-app-error-notification-alert.scss

@@ -0,0 +1,51 @@
+@import '@milaboratories/uikit/src/assets/mixins.scss';
+
+.pl-app-notification-alert {
+    position: fixed;
+    bottom: 12px;
+    right: 12px;
+    width: 256px;
+    height: auto;
+
+    &__content {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        max-height: 100%;
+    }
+
+    &__error-description {
+        display: flex;
+        border-radius: 6px;
+        border: 1px solid var(--border-color-div-grey);
+        background: var(--bg-base-light);
+        max-height: 600px; // @TODO
+        position: relative;
+        >  code {
+            white-space: pre-wrap;
+            display: block;
+            padding: 12px 4px 24px 12px;
+            @include scrollbar();
+        }
+    }
+
+    &__copy-icon {
+        top: 12px;
+        right: 12px;
+        position: absolute;
+        background: var(--ic-02);
+    }
+
+    &__item {
+        position: relative;
+    }
+
+    &__title {
+        color: var(--txt-01);
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 20px;
+        margin-bottom: 6px;
+    }
+}

package/src/defineApp.ts

@@ -3,7 +3,7 @@ import { type BlockOutputsBase, type Platforma } from '@platforma-sdk/model';
 import type { Component, Reactive } from 'vue';
 import { inject, markRaw, reactive } from 'vue';
 import { createApp, type BaseApp } from './internal/createApp';
-import type { LocalState, Routes } from './types';
+import type { BaseSettings, Routes } from './types';
 import { activateAgGrid } from './aggrid';
 
 const pluginKey = Symbol('sdk-vue');
@@ -18,7 +18,7 @@ export function defineApp<
   Outputs extends BlockOutputsBase = BlockOutputsBase,
   UiState = unknown,
   Href extends `/${string}` = `/${string}`,
-  Local extends LocalState<Href> = LocalState<Href>,
+  Local extends BaseSettings<Href> = BaseSettings<Href>,
 >(
   platforma: Platforma<Args, Outputs, UiState, Href>,
   extendApp: (app: BaseApp<Args, Outputs, UiState, Href>) => Local,
@@ -79,7 +79,7 @@ export type App<
   Outputs extends BlockOutputsBase = BlockOutputsBase,
   UiState = unknown,
   Href extends `/${string}` = `/${string}`,
-  Local extends LocalState<Href> = LocalState<Href>,
+  Local extends BaseSettings<Href> = BaseSettings<Href>,
 > = BaseApp<Args, Outputs, UiState, Href> & Reactive<Omit<Local, 'routes'>> & { getRoute(href: Href): Component | undefined };
 
 export type SdkPlugin<
@@ -87,7 +87,7 @@ export type SdkPlugin<
   Outputs extends BlockOutputsBase = BlockOutputsBase,
   UiState = unknown,
   Href extends `/${string}` = `/${string}`,
-  Local extends LocalState<Href> = LocalState<Href>,
+  Local extends BaseSettings<Href> = BaseSettings<Href>,
 > = {
   loaded: boolean;
   error: unknown;

package/src/internal/createAppModel.ts

@@ -83,7 +83,8 @@ export function createAppModel<
   const valid = computed(() => !error.value);
 
   const isChanged = computed(() => {
-    return !isJsonEqual(options.get(), unref(local));
+    const { args, ui } = unref(local)?.model ?? {};
+    return !isJsonEqual(options.get(), { args, ui });
   });
 
   const errorString = computed(() => (error.value ? error.value.message : ''));

package/src/types.ts

@@ -51,7 +51,8 @@ export type RouteParams<Href extends `/${string}` = `/${string}`> = {
   [P in Href as ParsePathnamePart<P>]: ParseQuery<P>;
 };
 
-export type LocalState<Href extends `/${string}` = `/${string}`> = {
+export type BaseSettings<Href extends `/${string}` = `/${string}`> = {
+  showErrorsNotification?: boolean;
   routes: Routes<Href>;
 };
 

package/src/utils.ts

@@ -7,12 +7,12 @@ export class UnresolvedError extends Error {}
 
 export class MultiError extends Error {
   constructor(public readonly errors: string[]) {
-    super();
+    super(errors.join('\n'));
   }
 
   // @todo
   toString() {
-    return this.errors.join(',');
+    return this.errors.join('\n');
   }
 }