@milaboratories/uikit 2.2.39 → 2.2.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.2.39",
+  "version": "2.2.41",
   "type": "module",
   "main": "dist/pl-uikit.umd.js",
   "module": "dist/pl-uikit.js",
@@ -33,8 +33,8 @@
     "yarpm": "^1.2.0",
     "svgo": "^3.3.2",
     "@milaboratories/eslint-config": "^1.0.1",
-    "@milaboratories/helpers": "^1.6.11",
-    "@platforma-sdk/model": "^1.20.27"
+    "@platforma-sdk/model": "^1.21.0",
+    "@milaboratories/helpers": "^1.6.11"
   },
   "scripts": {
     "dev": "vite",

package/src/components/PlChartStackedBar/PlChartStackedBarCompact.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import type { PlChartStackedBarSettingsCompact } from './types';
+import StackedRowCompact from './StackedRowCompact.vue';
+
+const props = defineProps<{
+  settings: PlChartStackedBarSettingsCompact;
+}>();
+
+const data = computed(() => {
+  return props.settings.data ?? [];
+});
+</script>
+
+<template>
+  <div :class="$style.component">
+    <StackedRowCompact :value="data"/>
+  </div>
+</template>
+
+<style lang="scss" module>
+.component {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+</style>

package/src/components/PlChartStackedBar/StackedRow.vue

@@ -1,16 +1,14 @@
 <script lang="ts" setup>
-import { tapIf } from '@milaboratories/helpers';
 import { computed } from 'vue';
 import type { PlChartStackedBarSegment } from './types';
 
 const props = defineProps<{
   value: PlChartStackedBarSegment[];
   height?: number;
-  showFractionInLabel?: boolean;
 }>();
 
 const style = computed(() => ({
-  height: '100%',
+  height: props.height ?? '100%',
   minHeight: '82px',
 }));
 
@@ -19,14 +17,7 @@ const parts = computed(() => {
   const total = parts.reduce((res, it) => res + it.value, 0);
   return parts.map((p) => {
     const fraction = (p.value / total) * 100;
-    const fractionString = ((p.value / total) * 100).toFixed(1);
-    const label = tapIf(p.label, (label) => {
-      if (props.showFractionInLabel) {
-        return `${label} ${fractionString}%`;
-      }
-
-      return label;
-    });
+    const label = p.label;
     return {
       color: p.color.toString(),
       description: p.description,
@@ -35,6 +26,8 @@ const parts = computed(() => {
     };
   });
 });
+
+const trackTransforms = [-40, -50, -50, -50, -80];
 </script>
 
 <template>
@@ -45,7 +38,10 @@ const parts = computed(() => {
       <div
         v-for="(v, i) in [0, 25, 50, 75, 100]"
         :key="i"
-        :style="`left: ${v}%`"
+        :style="{
+          left: `${v}%`,
+          '--transform': `translateX(${trackTransforms[i]}%)`
+        }"
         :data-content="`${v}%`"
       />
     </div>
@@ -69,8 +65,6 @@ const parts = computed(() => {
   height: auto;
   position: relative;
   overflow: visible;
-  border: 1px solid green;
-
   border: 1px solid var(--txt-01);
   padding: 12px 6px;
   border-radius: 0;
@@ -80,7 +74,6 @@ const parts = computed(() => {
 .container {
   display: flex;
   flex-direction: row;
-  gap: 1px;
   width: 100%;
   height: 100%;
   align-items: center;
@@ -107,9 +100,9 @@ const parts = computed(() => {
     &::after {
       position: absolute;
       content: attr(data-content);
+      transform: var(--transform);
       left: 0;
       bottom: -24px;
-      transform: translateX(-50%);
     }
   }
 }

package/src/components/PlChartStackedBar/StackedRowCompact.vue

@@ -0,0 +1,87 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import type { PlChartStackedBarSegment } from './types';
+
+const props = defineProps<{
+  value: PlChartStackedBarSegment[];
+  height?: number;
+}>();
+
+const style = computed(() => ({
+  height: props.height ?? '100%',
+  minHeight: '24px',
+}));
+
+const parts = computed(() => {
+  const parts = props.value || [];
+  const total = parts.reduce((res, it) => res + it.value, 0);
+  return parts.map((p) => {
+    const fraction = (p.value / total) * 100;
+    const label = p.label;
+    return {
+      color: p.color.toString(),
+      description: p.description,
+      fraction,
+      label,
+    };
+  });
+});
+</script>
+
+<template>
+  <div
+    :class="[$style.component]" :style="style"
+  >
+    <div :class="$style.container">
+      <div v-if="!parts.length" :class="$style.notReady">Not ready</div>
+      <div
+        v-for="(p, i) in parts"
+        :key="i"
+        :title.prop="p.description ?? p.label"
+        :style="{
+          width: `${p.fraction}%`,
+          backgroundColor: p.color
+        }"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" module>
+.component {
+  display: flex;
+  position: relative;
+  overflow: hidden;
+  padding: 0;
+  border-radius: 2px;
+
+  .notReady {
+    font-size: larger;
+    font-weight: bolder;
+    color: var(--txt-mask);
+    margin-left: 24px;
+  }
+
+  .container {
+    position: relative;
+  }
+}
+
+.container {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  flex: 1;
+  align-items: center;
+  overflow: hidden;
+  > div {
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
+}
+
+.notReady {
+  color: var(--txt-03) !important;
+}
+</style>

package/src/components/PlChartStackedBar/index.ts

@@ -1,3 +1,4 @@
 export { default as PlChartStackedBar } from './PlChartStackedBar.vue';
+export { default as PlChartStackedBarCompact } from './PlChartStackedBarCompact.vue';
 
 export * from './types';

package/src/components/PlChartStackedBar/types.ts

@@ -7,18 +7,20 @@ export type PlChartStackedBarSegment = {
   color: string | Color;
 };
 
-export type PlChartStackedBarSettings = {
-  /**
-   * The title of the chart.
-   * This will be displayed at the top of the chart, if provided.
-   */
-  title?: string;
-
+export type PlChartStackedBarSettingsCompact = {
   /**
    * The data to be displayed in the chart.
    * Each entry represents a segment of a stacked bar.
    */
   data: PlChartStackedBarSegment[];
+};
+
+export type PlChartStackedBarSettings = PlChartStackedBarSettingsCompact & {
+  /**
+   * The title of the chart.
+   * This will be displayed at the top of the chart, if provided.
+   */
+  title?: string;
 
   /**
    * The maximum number of legends displayed in a single column.

package/src/components/PlProgressCell/PlProgressCell.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import './pl-progress-cell.scss';
+import PlMaskIcon24 from '../PlMaskIcon24/PlMaskIcon24.vue';
+import type { PlProgressCellProps } from './types';
+
+const props = withDefaults(defineProps<PlProgressCellProps>(), {
+  stage: 'not_started',
+  step: '',
+  progressString: '',
+  progress: undefined,
+  error: '',
+});
+
+const canShowWhiteBg = computed(() => props.stage !== 'not_started');
+
+const currentProgress = computed(() => props.stage === 'done' ? 100 : Math.min(100, props.progress || 0));
+
+const canShowInfinityLoader = computed(() => props.progress === undefined && props.stage !== 'done' && props.stage !== 'not_started' && !props.error);
+
+console.log(props);
+</script>
+
+<template>
+  <div :class="{'progress-cell':true, 'progress-cell__white-bg': canShowWhiteBg, error, 'not-started': props.stage === 'not_started' }">
+    <div v-if="canShowInfinityLoader" class="progress-cell__infinity-loader">
+      <div class="progress-cell__infinity-gradient"/>
+    </div>
+    <div v-if="!canShowInfinityLoader && !error" class="progress-cell__indicator" :style="{ width: currentProgress + '%' }"/>
+    <div class="progress-cell__body">
+      <div class="progress-cell__stage text-s">
+        {{ error ? error : step }}
+      </div>
+      <div class="progress-cell__percentage text-s d-flex align-center justify-end">
+        <PlMaskIcon24 v-if="error" name="error" />
+        <template v-if="!error">
+          {{ progressString }}
+        </template>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/PlProgressCell/index.ts

@@ -0,0 +1,2 @@
+export { default as PlProgressCell } from './PlProgressCell.vue';
+export * from './types';

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

@@ -0,0 +1,88 @@
+.progress-cell {
+    background-color: transparent;
+    height: 100%;
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    border-radius: 2px;
+
+    .mask-error {
+        background: var(--txt-error);
+    }
+
+    &.error {
+        * {
+            color: var(--txt-error) !important;
+        }
+    }
+
+    &.not-started {
+        * {
+            color: var(--txt-03) !important;
+        }
+    }
+
+    &__white-bg {
+        background-color: #fff;
+    }
+
+    &__indicator {
+        position: absolute;
+        height: 100%;
+        transition: width 0.4s ease-in-out;
+        background: linear-gradient(90deg, #fff 0%, #d8fac8 100%);
+        transition: width .2s ease-in-out;
+    }
+
+    &__body {
+        padding: 0 15px;
+        display: flex;
+        gap: 12px;
+        align-items: center;
+        height: 100%;
+        width: 100%;
+        position: absolute;
+        z-index: 1;
+    }
+
+    &__stage {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        flex-shrink: 1;
+        text-wrap: nowrap;
+    }
+
+    &__percentage {
+        flex-grow: 1;
+        flex-shrink: 0;
+        text-align: right;
+    }
+
+    &__stage--queued {
+        color: var(--txt-03);
+    }
+
+    &__infinity-loader {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        animation: move-gradient 2s linear infinite;
+    }
+
+    &__infinity-gradient {
+        width: 50%;
+        height: 100%;
+        background: linear-gradient(90deg, #FFF 0%, #D8FAC8 50%, #FFF 100%);
+    }
+}
+
+@keyframes move-gradient {
+    0% {
+        transform: translateX(-50%);
+    }
+
+    100% {
+        transform: translateX(100%);
+    }
+}

package/src/components/PlProgressCell/types.ts

@@ -0,0 +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
+  error?: string;
+};

package/src/index.ts

@@ -50,6 +50,7 @@ export * from './components/PlSectionSeparator';
 export * from './components/PlAccordion';
 export * from './components/PlStatusTag';
 export * from './components/PlLoaderCircular';
+export * from './components/PlProgressCell';
 
 export * from './components/PlFileDialog';
 export * from './components/PlFileInput';