@platforma-sdk/ui-vue 1.11.7 → 1.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platforma-sdk/ui-vue",
-  "version": "1.11.7",
+  "version": "1.12.0",
   "type": "module",
   "main": "dist/lib.umd.cjs",
   "module": "dist/lib.js",
@@ -38,7 +38,7 @@
     "@ag-grid-enterprise/side-bar": "^32.3.3",
     "@ag-grid-enterprise/column-tool-panel": "^32.3.3",
     "@milaboratories/uikit": "^2.2.11",
-    "@platforma-sdk/model": "^1.10.12"
+    "@platforma-sdk/model": "^1.12.0"
   },
   "devDependencies": {
     "@faker-js/faker": "^8.4.1",

package/src/assets/block.scss

@@ -43,6 +43,45 @@
     padding: 0;
   }
 
+  &__loader {
+    height: 4px;
+    background-color: transparent;
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    overflow: hidden;
+    &:before {
+      content: "";
+      position: absolute;
+      left: -50%;
+      height: 4px;
+      width: 33%;
+      background-color: var(--border-color-focus);
+      animation: loader-animation 1.3s linear infinite;
+    }
+  }
+
+  &__progress {
+    --progress-width: 0%;
+    height: 4px;
+    background-color: transparent;
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    overflow: hidden;
+    &:before {
+      content: "";
+      position: absolute;
+      left: 0;
+      height: 4px;
+      width: var(--progress-width);
+      background-color: var(--border-color-focus);
+      will-change: width;
+    }
+  }
+
   &__error {
     background: var(--txt-error);
     color: #fff;
@@ -69,4 +108,18 @@
       overflow: auto;
     }
   }
+
+  @keyframes loader-animation {
+    0% {
+      left: -40%;
+    }
+    50% {
+      left: 20%;
+      width: 38%;
+    }
+    100% {
+      left: 100%;
+      width: 50%;
+    }
+  }
 }

package/src/components/BlockLayout.vue

@@ -6,6 +6,7 @@ import { useSdkPlugin } from '../defineApp';
 import NotFound from './NotFound.vue';
 import LoaderPage from './LoaderPage.vue';
 import { PlAppErrorNotificationAlert } from './PlAppErrorNotificationAlert';
+import BlockLoader from './BlockLoader.vue';
 
 const sdk = useSdkPlugin();
 
@@ -35,10 +36,13 @@ const app = computed(() => (sdk.loaded ? sdk.useApp() : undefined));
 const errors = computed(() => (app.value ? app.value.model.outputErrors : {}));
 
 const showErrorsNotification = computed(() => app.value?.showErrorsNotification ?? true);
+
+const progress = computed(() => app.value?.progress?.());
 </script>
 
 <template>
   <div class="block block__layout">
+    <BlockLoader :value="progress" />
     <div v-if="sdk.error">{{ sdk.error }}</div>
     <LoaderPage v-else-if="!sdk.loaded">Loading...</LoaderPage>
     <component :is="CurrentView" v-else-if="CurrentView" :key="href" />

package/src/components/BlockLoader.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+const props = defineProps<{
+  value: boolean | number | undefined;
+}>();
+
+const isLoader = computed(() => typeof props.value === 'boolean' && props.value);
+
+const progressWidth = computed(() => {
+  const value = props.value;
+
+  if (typeof value === 'number') {
+    if (value >= 1) {
+      return undefined;
+    }
+
+    return (value * 100).toFixed(2) + '%';
+  }
+
+  return undefined;
+});
+</script>
+
+<template>
+  <div v-if="isLoader" class="block__loader" />
+  <div v-else-if="progressWidth !== undefined" class="block__progress" :style="{ '--progress-width': progressWidth }" />
+</template>

package/src/types.ts

@@ -63,7 +63,24 @@ export type AppSettings = {
 };
 
 export type ExtendSettings<Href extends `/${string}` = `/${string}`> = {
+  /**
+   * Displays a loader on top of the block.
+   * - If `true`: Shows an infinite loader.
+   * - If a number (0 <= n < 1): Displays a progress bar representing completion percentage.
+   * - If a number (n > 1): Hides the progress bar.
+   * - If `undefined`: No loader is displayed.
+   */
+  progress?: () => number | boolean | undefined;
+  /**
+   * Enables or disables a notification box for error messages.
+   * - If `true`: A notification box appears when there are errors in the outputs.
+   * - If `false`: No notification box is shown.
+   */
   showErrorsNotification?: boolean;
+  /**
+   * Maps application routes to their respective components.
+   * TODO: Consider moving route initialization logic to a dedicated method.
+   */
   routes: Routes<Href>;
 };