@milaboratories/uikit 2.2.39 → 2.2.40

package/package.json

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

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';