@milaboratories/uikit 2.2.56 → 2.2.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.2.56",
+  "version": "2.2.58",
   "type": "module",
   "main": "dist/pl-uikit.umd.js",
   "module": "dist/pl-uikit.js",
@@ -34,9 +34,9 @@
     "yarpm": "^1.2.0",
     "svgo": "^3.3.2",
     "@types/d3": "^7.4.3",
+    "@milaboratories/eslint-config": "^1.0.1",
     "@milaboratories/helpers": "^1.6.11",
-    "@platforma-sdk/model": "^1.22.18",
-    "@milaboratories/eslint-config": "^1.0.1"
+    "@platforma-sdk/model": "^1.22.18"
   },
   "scripts": {
     "dev": "vite",

package/src/assets/base.scss

@@ -26,8 +26,6 @@
   --color-ic-01: #110529;
   --color-ic-02: #cfd1db;
 
-  --bg-base-dark: #110529;
-  --bg-base-light: #f7f8fa;
   --bg-elevated-01: #fff;
   --bg-elevated-02: #e1e3eb;
   --bg-notification-error: linear-gradient(90deg, #ffcecc 0%, #ffffff 100%);

package/src/assets/variables.scss

@@ -67,6 +67,7 @@
   --gap-v: 24px;
   --gap-h: 12px;
   // @TODO global overlays
+  --z-splash: 50;
   --z-slide-shadow: 80;
   --z-slide-dialog: 81;
   --z-dialog: 100;

package/src/components/PlProgressCell/PlProgressCell.vue

@@ -6,8 +6,8 @@ import type { PlProgressCellProps } from './types';
 
 const props = withDefaults(defineProps<PlProgressCellProps>(), {
   stage: 'not_started',
-  step: '',
-  progressString: '',
+  step: '', // main text (left)
+  progressString: '', // appended text on the right side (right)
   progress: undefined,
   error: '',
 });

package/src/components/PlProgressCell/pl-progress-cell.scss

@@ -10,15 +10,15 @@
         background: var(--txt-error);
     }
 
-    &.error {
+    &.not-started {
         * {
-            color: var(--txt-error) !important;
+            color: var(--txt-03) !important;
         }
     }
 
-    &.not-started {
+    &.error {
         * {
-            color: var(--txt-03) !important;
+            color: var(--txt-error) !important;
         }
     }
 

package/src/components/PlProgressCell/types.ts

@@ -1,7 +1,7 @@
 export type PlProgressCellProps = {
   stage: 'not_started' | 'running' | 'done';
-  step?: string; // "Alignment" / "Queued"
-  progressString?: string; // "20%" or "2 / 4"
-  progress?: number; // i.e. 0.2 for 20%; 'undefined' for unknown progress = animated progressbar
+  step?: string; // "Alignment" / "Queued" (main left text)
+  progressString?: string; // "20%" or "2 / 4" (right text)
+  progress?: number; // Percent value! (from 0 to 100) i.e. 20 for 20%; 'undefined' for unknown progress = animated progressbar
   error?: string;
 };

package/src/components/PlSplash/PlSplash.vue

@@ -4,20 +4,29 @@ import { PlLoaderCircular } from '@/components/PlLoaderCircular';
 
 withDefaults(defineProps<{
   /**
-   * Optional string that sets size for PlLoaderCircular.
+   * Optional string that sets text that will be shown below the PlLoaderCircular.
    */
-  size?: '16' | '24' | '48' | string;
+  loadingText?: string;
   /**
-   * Optional string that sets text that will be shown below the PlLoaderCircular.
+   * If `true` the loading overlay is shown.
    */
-  text?: string;
-
-}>(), { size: '48', text: 'Loading' });
+  loading?: boolean;
+  /**
+   * @TODO
+   */
+  type?: 'table' | 'transparent';
+}>(), { loadingText: undefined, loading: false, type: undefined });
 </script>
 
 <template>
-  <div :class="style.container">
-    <PlLoaderCircular :size="size" />
-    <h3 :class="style.text">{{ text }}</h3>
+  <div :class="[style.splash, {[style.table]: type === 'table', [style.transparent]: type === 'transparent'}]">
+    <div v-if="loading" :class="[style.overlay]">
+      <div>
+        <!-- @TODO refactor PlLoaderCircular size property -->
+        <PlLoaderCircular size="48" />
+        <div v-if="loadingText" :class="style.text">{{ loadingText }}</div>
+      </div>
+    </div>
+    <slot />
   </div>
 </template>

package/src/components/PlSplash/pl-splash.module.scss

@@ -1,9 +1,45 @@
-.container {
-  display: flex;
-  flex-direction: column;
-}
-
-.text {
-    margin-top: 24px;
-    color: var(--txt-mask);
-  }
+.splash {
+  --pl-splash-overlay-background: rgba(255, 255, 255, 0.94);
+
+  position: relative;
+
+  &.table {
+    --pl-splash-overlay-background: var(--bg-base-light);
+  }
+
+  &.transparent {
+    --pl-splash-overlay-background: transparent;
+  }
+
+  .overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: var(--pl-splash-overlay-background);
+    z-index: var(--z-splash);
+
+    > div {
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+
+      .text {
+        user-select: none;
+        color: var(--txt-mask);
+        font-family: var(--font-family-base);
+        font-size: 28px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 32px;
+        letter-spacing: -0.56px;
+        margin: 0;
+      }
+    }
+  }
+}

package/src/layout/PlBlockPage/PlBlockPage.vue

@@ -8,11 +8,23 @@ export default {
 <script lang="ts" setup>
 import { useSlots } from 'vue';
 import './pl-block-page.scss';
+import PlSplash from '@/components/PlSplash/PlSplash.vue';
 
 const slots = useSlots();
 
 defineProps<{
+  /**
+   * If `true` body gutters are removed
+   */
   noBodyGutters?: boolean;
+  /**
+   * If `true`, a loading overlay is displayed on the page body (over all default slot content)
+   */
+  bodyLoading?: boolean;
+  /**
+   * Optional body loading text
+   */
+  bodyLoadingText?: string;
 }>();
 
 const setTitleIfNeeded = (el: HTMLElement) => {
@@ -40,8 +52,8 @@ const vTextOverflownTitle = {
       </div>
     </div>
     <div v-else />
-    <div class="pl-block-page__body">
+    <PlSplash :loading="bodyLoading" :loading-text="bodyLoadingText" class="pl-block-page__body">
       <slot />
-    </div>
+    </PlSplash>
   </div>
 </template>

package/src/layout/PlContainer/PlContainer.vue

@@ -8,9 +8,21 @@ export default {
 <script lang="ts" setup>
 import { computed } from 'vue';
 import './pl-container.scss';
+import PlSplash from '@/components/PlSplash/PlSplash.vue';
 
 const props = defineProps<{
+  /**
+   * CSS width value (px, %)
+   */
   width?: string;
+  /**
+   * Shows loading overlay
+   */
+  loading?: boolean;
+  /**
+   * Optional loading text
+   */
+  loadingText?: string;
 }>();
 
 const style = computed(() => ({
@@ -19,7 +31,7 @@ const style = computed(() => ({
 </script>
 
 <template>
-  <div class="pl-container pl-layout-component" :style="style">
+  <PlSplash :loading="loading" :loading-text="loadingText" class="pl-container pl-layout-component" :style="style">
     <slot />
-  </div>
+  </PlSplash>
 </template>