@milaboratories/uikit 2.7.2 → 2.8.0

package/src/components/PlLoaderLogo.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { computed, useCssModule } from 'vue';
+
+const props = defineProps<{
+  size?: number | string;
+  color?: string;
+  backgroundColor?: string;
+}>();
+
+const styles = useCssModule();
+
+const size = computed(() =>
+  typeof props.size === 'number' ? CSS.px(props.size).toString() : props.size,
+);
+
+const color = props.color ?? 'currentColor';
+const backgroundColor = props.backgroundColor ?? 'var(--color-div-bw)';
+</script>
+
+<template>
+  <svg
+    viewBox="0 0 64 64"
+    xmlns="http://www.w3.org/2000/svg"
+    :class="styles.root"
+  >
+    <path d="m32 3 26 15H6z" />
+    <path d="M32 18h26v28H32z" />
+    <path d="M32 45.5h26L32 61z" />
+    <path d="M6 39h26v22L6 46z" />
+    <path d="M6 30h26v8H6z" />
+    <path d="M6 18h26v12H6z" />
+    <path d="M28.816 1.834c.788-.423 1.357-.671 1.947-.796a6 6 0 0 1 2.474 0c.59.125 1.159.373 1.947.796.578.295 1.26.685 2.141 1.189l17.411 9.956a67 67 0 0 1 1.88 1.098c.853.511 1.397.896 1.83 1.375a6 6 0 0 1 1.258 2.167c.296.907.296 1.922.296 3.951v20.858c0 2.029 0 3.043-.296 3.95a6 6 0 0 1-1.258 2.168c-.433.479-.977.864-1.83 1.376-.504.31-1.116.66-1.88 1.097l-17.41 9.956c-.882.504-1.563.893-2.14 1.188-.79.424-1.358.672-1.949.796a6 6 0 0 1-2.474 0c-.59-.124-1.16-.372-1.948-.796-.578-.295-1.259-.684-2.14-1.188l-17.41-9.956a69 69 0 0 1-1.88-1.097c-.853-.512-1.397-.897-1.831-1.376a6 6 0 0 1-1.258-2.167C4 45.47 4 44.457 4 42.428V21.57c0-2.03 0-3.044.296-3.95a6 6 0 0 1 1.258-2.168c.434-.479.977-.864 1.83-1.375a68 68 0 0 1 1.88-1.098l17.411-9.956c.882-.504 1.563-.894 2.14-1.19M8 27.997V19.99h21.964v8.006zm0 8.005v-4.003h21.964v4.003zM29.964 58.33 8 45.722v-5.718h21.964zm22.051-10.32L34.037 58.33V48.01zM56 19.99v24.016H34.037V19.99zm-44.016-4L32 4.499l20.016 11.49z" />
+  </svg>
+</template>
+
+<style module>
+.root {
+  min-block-size: v-bind(size);
+  max-block-size: v-bind(size);
+  min-inline-size: v-bind(size);
+  max-inline-size: v-bind(size);
+  fill-rule: evenodd;
+  path {
+    &:not(:last-of-type) {
+      fill: v-bind(backgroundColor);
+      animation-duration: 1s;
+      animation-delay: calc(1s / 6 * (sibling-index() - 1));
+      animation-iteration-count: infinite;
+      animation-name: flash;
+    }
+    &:last-of-type {
+      fill: v-bind(color);
+    }
+  }
+}
+
+@keyframes flash {
+  from {
+    fill: v-bind(color);
+  }
+}
+</style>

package/src/index.ts

@@ -25,6 +25,7 @@ import { allCssVariables } from './demo-site-data/all-css-variables.ts';
 export * from './layout/PlBlockPage';
 export * from './layout/PlContainer';
 export * from './layout/PlGrid';
+export * from './layout/PlPlaceholder';
 export * from './layout/PlRow';
 export * from './layout/PlSpacer';
 
@@ -90,6 +91,8 @@ export * from './components/PlChartStackedBar';
 
 export * from './components/PlRadio';
 
+export { default as PlLoaderLogo } from './components/PlLoaderLogo.vue';
+
 export * from './colors';
 
 /**

package/src/layout/PlBlockPage/PlBlockPage.vue

@@ -6,28 +6,31 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { useSlots } from 'vue';
+import { computed, useSlots } from 'vue';
 import { PlBlockPageTitleTeleportId } from './PlBlockPageTitleTeleportId';
 import './pl-block-page.scss';
-import PlSplash from '../../components/PlSplash/PlSplash.vue';
+import { PlPlaceholder, type PlPlaceholderProps } from '../PlPlaceholder';
 
 const slots = useSlots();
 
-defineProps<{
+const props = 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)
+   * If defined, a loading overlay is displayed on the page body (over all default slot content)
    */
-  bodyLoading?: boolean;
-  /**
-   * Optional body loading text
-   */
-  bodyLoadingText?: string;
+  bodyLoading?: PlPlaceholderProps['variant'] | PlPlaceholderProps;
 }>();
 
+const loadingPlaceholder = computed<PlPlaceholderProps | undefined>(() => {
+  if (typeof props.bodyLoading === 'string') {
+    return { variant: props.bodyLoading };
+  }
+  return props.bodyLoading;
+});
+
 const setTitleIfNeeded = (el: HTMLElement) => {
   el.removeAttribute('title');
   if (el.clientWidth < el.scrollWidth) {
@@ -49,13 +52,19 @@ const vTextOverflownTitle = {
         <slot name="after-title" />
       </div>
       <div class="pl-block-page__title__append">
-        <div :id="PlBlockPageTitleTeleportId" class="pl-block-page__title__append__teleport" />
+        <div
+          :id="PlBlockPageTitleTeleportId"
+          class="pl-block-page__title__append__teleport"
+        />
         <slot name="append" />
       </div>
     </div>
     <div v-else />
-    <PlSplash :loading="bodyLoading" :loading-text="bodyLoadingText" class="pl-block-page__body">
-      <slot />
-    </PlSplash>
+    <div class="pl-block-page__body">
+      <PlPlaceholder v-show="loadingPlaceholder" v-bind="loadingPlaceholder" />
+      <div :style="{ display: loadingPlaceholder ? 'none' : 'contents' }">
+        <slot />
+      </div>
+    </div>
   </div>
 </template>

package/src/layout/PlPlaceholder/PlPlaceholder.vue

@@ -0,0 +1,147 @@
+<script lang="ts">
+export interface PlPlaceholderProps {
+  variant?: 'table' | 'graph';
+  title?: string;
+  subtitle?: string | string[];
+}
+</script>
+
+<script setup lang="ts">
+import { useCssModule } from 'vue';
+import PlLoaderLogo from '../../components/PlLoaderLogo.vue';
+
+const {
+  variant,
+  title = 'Running analysis...',
+  subtitle = [
+    'No action needed—the job is active',
+    'Larger datasets take longer to process',
+    'Results will appear here as soon as they’re ready',
+    'Processing may take minutes to hours',
+  ],
+} = defineProps<PlPlaceholderProps>();
+
+const styles = useCssModule();
+
+(CSS as unknown as {
+  paintWorklet: { addModule: (url: URL) => void };
+}).paintWorklet.addModule(new URL('paint-worklet.js', import.meta.url));
+</script>
+
+<template>
+  <div :class="styles.root">
+    <div
+      :class="[styles.background, {
+        [styles.table]: variant === 'table',
+        [styles.graph]: variant === 'graph',
+      }]"
+    />
+    <div :class="styles.content">
+      <PlLoaderLogo :size="64" color="var(--color-div-grey)" />
+      <div :class="styles.text">
+        <div :class="styles.title">{{ title }}</div>
+        <div :class="styles.subtitle">
+          <template v-if="Array.isArray(subtitle)">
+            <span v-for="(item, key) of subtitle" :key>{{ item }}</span>
+          </template>
+          <span v-else>{{ subtitle }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style module>
+.root {
+  block-size: 100%;
+  inline-size: 100%;
+  position: relative;
+  user-select: none;
+  background-color: var(--bg-elevated-01);
+}
+
+.background {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  mask: linear-gradient(transparent 35%, #000 40% 60%, transparent 65%);
+  mask-size: 100% 300%;
+  animation-duration: 5s;
+  animation-iteration-count: infinite;
+  animation-name: slide;
+  &.table {
+    background-image: paint(pl-placeholder-table-skeleton);
+  }
+  &.graph {
+    background-image: paint(pl-placeholder-graph-skeleton);
+  }
+}
+
+.content {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+}
+
+.text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  -webkit-text-stroke-color: white;
+  -webkit-text-stroke-width: 4px;
+  paint-order: stroke;
+}
+
+.title {
+  color: var(--txt-03);
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 24px;
+  letter-spacing: -0.2px;
+}
+
+.subtitle {
+  color: var(--txt-03);
+  font-weight: 500;
+  line-height: 20px;
+  display: grid;
+  span {
+    grid-area: 1 / 1;
+    text-align: center;
+    animation-name: active-subtitle;
+    animation-duration: calc(6s * sibling-count());
+    animation-iteration-count: infinite;
+    animation-timing-function: steps(sibling-count(), jump-none);
+    visibility: if(
+      style(--pl-placeholder-active-subtitle: sibling-index()): visible;
+      else: hidden;
+    );
+  }
+}
+
+@keyframes slide {
+  from {
+    mask-position: 0 100%;
+  }
+}
+
+@keyframes active-subtitle {
+  from {
+    --pl-placeholder-active-subtitle: 1;
+  }
+  to {
+    --pl-placeholder-active-subtitle: sibling-count();
+  }
+}
+
+@property --pl-placeholder-active-subtitle {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 1;
+}
+</style>

package/src/layout/PlPlaceholder/index.ts

@@ -0,0 +1,4 @@
+export {
+  default as PlPlaceholder,
+  type PlPlaceholderProps,
+} from './PlPlaceholder.vue';

package/src/layout/PlPlaceholder/paint-worklet.js

@@ -0,0 +1,123 @@
+registerPaint(
+  'pl-placeholder-table-skeleton',
+  class {
+    /**
+     * @param {CanvasRenderingContext2D} ctx
+     * @param {Object} size
+     * @param {number} size.width
+     * @param {number} size.height
+     */
+    paint(ctx, { width, height }) {
+      const headerHeight = 42;
+      const headerWidth = 48;
+
+      ctx.fillStyle = '#F7F8FA';
+
+      // headers
+      {
+        const path = new Path2D();
+        path.lineTo(width, 0);
+        path.lineTo(width, headerHeight);
+        path.lineTo(headerWidth, headerHeight);
+        path.lineTo(headerWidth, height);
+        path.lineTo(0, height);
+        path.lineTo(0, 0);
+        ctx.fill(path);
+      }
+
+      ctx.strokeStyle = '#E1E3EB';
+
+      // vertical lines
+      const columnWidth = (width - headerWidth) / 6;
+      for (
+        let horizontalPosition = headerWidth;
+        horizontalPosition < width;
+        horizontalPosition += columnWidth
+      ) {
+        const path = new Path2D();
+        path.moveTo(horizontalPosition, 0);
+        path.lineTo(horizontalPosition, height);
+        ctx.stroke(path);
+      }
+
+      // horizontal lines
+      for (
+        let verticalPosition = headerHeight;
+        verticalPosition < height;
+        verticalPosition += headerHeight
+      ) {
+        const path = new Path2D();
+        path.moveTo(0, verticalPosition);
+        path.lineTo(width, verticalPosition);
+        ctx.stroke(path);
+      }
+    }
+  },
+);
+
+registerPaint(
+  'pl-placeholder-graph-skeleton',
+  class {
+    /**
+     * @param {CanvasRenderingContext2D} ctx
+     * @param {Object} size
+     * @param {number} size.width
+     * @param {number} size.height
+     */
+    paint(ctx, { width, height }) {
+      const padding = 6;
+      const cellWidth = 100;
+      const cellHeight = 60;
+
+      ctx.strokeStyle = '#E1E3EB';
+
+      // vertical lines
+      for (
+        let horizontalPosition = cellWidth + padding;
+        horizontalPosition <= width;
+        horizontalPosition += cellWidth
+      ) {
+        const path = new Path2D();
+        path.moveTo(horizontalPosition, 0);
+        path.lineTo(horizontalPosition, height - padding);
+        ctx.stroke(path);
+      }
+
+      // horizontal lines
+      for (
+        let verticalPosition = height - padding - cellHeight;
+        verticalPosition >= 0;
+        verticalPosition -= cellHeight
+      ) {
+        const path = new Path2D();
+        path.moveTo(padding, verticalPosition);
+        path.lineTo(width, verticalPosition);
+        ctx.stroke(path);
+      }
+
+      ctx.strokeStyle = '#110529';
+
+      // vertical arrow
+      {
+        const path = new Path2D();
+        path.moveTo(padding, height - padding);
+        path.lineTo(padding, 0);
+        path.lineTo(0, padding);
+        path.moveTo(padding, 0);
+        path.lineTo(padding * 2, padding);
+        ctx.stroke(path);
+      }
+
+      // horizontal arrow
+      {
+        const path = new Path2D();
+        path.moveTo(padding, height - padding);
+        path.lineTo(width, height - padding);
+        path.lineTo(width - padding, height - padding * 2);
+        path.moveTo(width, height - padding);
+        path.lineTo(width - padding, height);
+        ctx.stroke(path);
+      }
+    }
+  },
+);

package/dist/components/PlAccordion/ExpandTransition.vue.js

@@ -1,27 +0,0 @@
-import { defineComponent as n, createBlock as r, openBlock as a, Transition as s, withCtx as p, renderSlot as c } from "vue";
-const f = /* @__PURE__ */ n({
-  __name: "ExpandTransition",
-  setup(l) {
-    const t = (e) => {
-      e.classList.add("expand-collapse-fix"), e.style.setProperty("--component-height", e.scrollHeight + "px");
-    }, o = (e) => {
-      e.style.removeProperty("--component-height"), e.classList.remove("expand-collapse-fix");
-    };
-    return (e, i) => (a(), r(s, {
-      name: "expand-collapse",
-      onEnter: t,
-      onLeave: t,
-      onAfterEnter: o,
-      onAfterLeave: o
-    }, {
-      default: p(() => [
-        c(e.$slots, "default")
-      ]),
-      _: 3
-    }));
-  }
-});
-export {
-  f as default
-};
-//# sourceMappingURL=ExpandTransition.vue.js.map

package/dist/components/PlAccordion/ExpandTransition.vue.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ExpandTransition.vue.js","sources":["../../../src/components/PlAccordion/ExpandTransition.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nconst onStart = (el: Element) => {\n  el.classList.add('expand-collapse-fix');\n  (el as HTMLElement).style.setProperty('--component-height', el.scrollHeight + 'px');\n};\n\nconst onAfter = (el: Element) => {\n  (el as HTMLElement).style.removeProperty('--component-height');\n  el.classList.remove('expand-collapse-fix');\n};\n</script>\n\n<template>\n  <Transition name=\"expand-collapse\" @enter=\"onStart\" @leave=\"onStart\" @after-enter=\"onAfter\" @after-leave=\"onAfter\">\n    <slot/>\n  </Transition>\n</template>\n\n<style>\n.expand-collapse-fix {\n  overflow: hidden;\n}\n\n.expand-collapse-enter-active,\n.expand-collapse-leave-active {\n  transition:\n    height 0.2s ease-in-out,\n    opacity 0.2s ease-in-out;\n  height: var(--component-height);\n}\n\n.expand-collapse-enter-from,\n.expand-collapse-leave-to {\n  opacity: 0.5;\n  height: 0;\n}\n</style>\n"],"names":["onStart","el","onAfter","_createBlock","_Transition","_renderSlot","_ctx"],"mappings":";;;;AACA,UAAMA,IAAU,CAACC,MAAgB;AAC/B,MAAAA,EAAG,UAAU,IAAI,qBAAqB,GACrCA,EAAmB,MAAM,YAAY,sBAAsBA,EAAG,eAAe,IAAI;AAAA,IACpF,GAEMC,IAAU,CAACD,MAAgB;AAC9B,MAAAA,EAAmB,MAAM,eAAe,oBAAoB,GAC7DA,EAAG,UAAU,OAAO,qBAAqB;AAAA,IAC3C;2BAIEE,EAEaC,GAAA;AAAA,MAFD,MAAK;AAAA,MAAmB,SAAOJ;AAAA,MAAU,SAAOA;AAAA,MAAU,cAAaE;AAAA,MAAU,cAAaA;AAAA,IAAA;iBACxG,MAAO;AAAA,QAAPG,EAAOC,EAAA,QAAA,SAAA;AAAA,MAAA;;;;;"}