@milaboratories/uikit 2.2.55 → 2.2.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.2.55",
+  "version": "2.2.57",
   "type": "module",
   "main": "dist/pl-uikit.umd.js",
   "module": "dist/pl-uikit.js",

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/mixins.scss

@@ -96,9 +96,8 @@
   }
 
   &::-webkit-scrollbar {
-    width: 6px;
+    width: var(--scrollbar-width, 6px);
     height: 5px;
-    padding-right: 5px;
     background-color: transparent;
     display: block;
   }

package/src/assets/variables.scss

@@ -67,12 +67,16 @@
   --gap-v: 24px;
   --gap-h: 12px;
   // @TODO global overlays
+  --z-splash: 50;
   --z-slide-shadow: 80;
   --z-slide-dialog: 81;
   --z-dialog: 100;
   --z-dropdown-options: 110;
   --z-tooltip: 120;
   --z-context-menu: 1001;
+
+  // Base custom scrollbar width (see mixins)
+  --scrollbar-width: 6px;
 }
 
 [data-theme='dark'] {

package/src/components/PlAccordion/ExpandTransition.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 const onStart = (el: Element) => {
-  (el as HTMLElement).style.setProperty('--component-height', el.scrollHeight + 'px');
   el.classList.add('expand-collapse-fix');
+  (el as HTMLElement).style.setProperty('--component-height', el.scrollHeight + 'px');
 };
 
 const onAfter = (el: Element) => {

package/src/components/PlAccordion/PlAccordionSection.vue

@@ -50,28 +50,35 @@ defineProps<{
 </script>
 
 <template>
-  <PlSectionSeparator :class="$style.separator" :compact="compact" @click="open = !open">
-    <PlMaskIcon16 name="chevron-right" :class="[{ [$style.down]: open }, $style.chevron]" />
-    {{ label }}
-  </PlSectionSeparator>
-  <ExpandTransition>
-    <div v-if="open" :class="$style.content">
-      <slot />
-    </div>
-  </ExpandTransition>
+  <div class="pl-accordion-section">
+    <PlSectionSeparator :class="$style.separator" :compact="compact" @click="open = !open">
+      <PlMaskIcon16 name="chevron-right" :class="[{ [$style.down]: open }, $style.chevron]" />
+      {{ label }}
+    </PlSectionSeparator>
+    <ExpandTransition>
+      <div v-if="open" :class="$style.content">
+        <slot />
+      </div>
+    </ExpandTransition>
+  </div>
 </template>
 
 <style module>
 .content {
   display: flex;
   flex-direction: column;
-  gap: inherit;
+  gap: var(--gap-v);
   will-change: height, opacity;
-  transform: translateZ(0);
-  backface-visibility: hidden;
-  perspective: 1000px;
-  margin-top: -8px;
-  padding-top: 8px;
+  /* transform: translateZ(0);
+  backface-visibility: hidden; */
+}
+
+.content > *:first-child {
+  margin-top: 24px;
+}
+
+.content > *:last-child {
+  margin-bottom: 4px;
 }
 
 .separator:hover {

package/src/components/PlBtnGroup/pl-btn-group.scss

@@ -2,9 +2,8 @@
 
 .pl-btn-group {
   --pl-btn-group-height: 40px;
-  box-sizing: content-box;
+  box-sizing: border-box;
   position: relative;
-  min-height: var(--pl-btn-group-height);
   font-family: var(--control-font-family);
 
   label {
@@ -26,6 +25,7 @@
   }
 
   .inner-border {
+    height: var(--pl-btn-group-height);
     min-height: var(--pl-btn-group-height);
 
     &::after {

package/src/components/PlSlideModal/pl-slide-modal.scss

@@ -55,7 +55,7 @@
     font-size: 28px;
     font-style: normal;
     font-weight: 500;
-    line-height: 32px;
+    line-height: 40px;
     /* 114.286% */
     letter-spacing: -0.56px;
     padding: 24px;
@@ -91,9 +91,10 @@
     display: flex;
     flex-direction: column;
     gap: 24px;
-    padding: 16px 24px;
+    padding: 16px calc(24px - var(--scrollbar-width)) 16px 24px;
     margin: 0 0;
     @include scrollbar(true);
+    scrollbar-gutter: stable;
   }
 
   &__shadow {

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>