@dataloop-ai/components 0.16.58 → 0.16.61

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.16.58",
+  "version": "0.16.61",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

package/src/assets/constants.scss

@@ -2,7 +2,7 @@
     // Constants
     --dl-color-alert-success:  #38D079;
     --dl-color-alert-success-background: #E1FFF0;
-    --dl-color-alert-warn: ##FFDA3A;
+    --dl-color-alert-warn: #FFDA3A;
     --dl-color-alert-warn-background: #FFF7D6;
     --dl-color-alert-error: #FF3434;
     --dl-color-alert-error-background: #FFEAEA ;

package/src/assets/globals.scss

@@ -155,22 +155,25 @@ body {
     --dl-color-panel-background: #FFFFFF;
     --dl-color-side-panel: #18195C;
     --dl-color-shadow: #FFFFFF;
-    --dl-color-negative: #FF3434;
-    --dl-color-negative-background: #FFEAEA;
-    --dl-color-warning: #FFDA3A;
-    --dl-color-warning-background: #FFF7D6;
-    --dl-color-positive: #039E49;
-    --dl-color-positive-background: #E1FFF0;
-    --dl-color-info-background: #F3F9FF;
     --dl-color-icon-default: #171723;
     --dl-color-fill-secondary: #FBF8F8;
     --dl-color-fill-third: #FBFBFB;
     --dl-color-link: #20ABFA;
-    --dl-color-info: #4E81B3;
     --dl-color-cell-background: #FFFAE2;
     --q-color-positive: #38D079;
     --q-color-warning: #E1B75B;
 
+    // alert colors
+    --dl-color-negative: var(--dl-color-alert-error);
+    --dl-color-negative-background: var(--dl-color-alert-error-background);
+    --dl-color-warning: var(--dl-color-alert-warn);
+    --dl-color-warning-background: var(--dl-color-alert-warn-background);
+    --dl-color-positive: var(--dl-color-alert-success);
+    --dl-color-positive-background: var(--dl-color-alert-success-background);
+    --dl-color-info: var(--dl-color-alert-info);
+    --dl-color-info-background: var(--dl-color-alert-info-background);
+
+
     --dl-color-chart-brush: #EEF1FF;
 
     --dl-date-picker-shadow: 0px 3px 6px #101e7326;
@@ -205,22 +208,21 @@ body {
     --dl-color-panel-background: #30363D;
     --dl-color-side-panel: #2A343E;
     --dl-color-shadow: #30363D;
-    --dl-color-negative: #FF3434;
-    --dl-color-negative-background: #734145;
-    --dl-color-warning: #FFDA3A;
-    --dl-color-warning-background: #7B7241;
-    --dl-color-positive: #00DE93;
-    --dl-color-positive-background: #3A644E;
-    --dl-color-info-background: #2F3C4B;
     --dl-color-icon-default: #ffffffbf;
     --dl-color-fill-secondary: #FFFFFF1A;
     --dl-color-fill-third: #9E9E9E1A;
     --dl-color-link: #53B2E8;
-    --dl-color-info: #92CDF2;
     --dl-color-cell-background: #FFFAE2;
     --q-color-positive: #A1E5B6;
     --q-color-warning: #F8D29A;
 
+    // alert colors
+    --dl-color-negative-background: #734145;
+    --dl-color-warning-background: #7B7241;
+    --dl-color-positive-background: #3A644E;
+    --dl-color-info-background: #4B5A6B;
+    --dl-color-info: #92CDF2;
+
     --dl-color-chart-brush: #475077;
 
     --dl-date-picker-shadow: 0px 3px 6px #292e3580;

package/src/components/basic/DlKpi/DlKpi.vue

@@ -43,6 +43,7 @@
         >
             <dl-progress-bar
                 color="dl-color-darker"
+                height="5px"
                 :value="progressValue(progress)"
                 :show-value="true"
                 :show-percentage="true"
@@ -151,13 +152,13 @@ export default defineComponent({
         )
 
         const formatCounter = (counter: DlKpiCounterType) => {
-            if (!counter) {
+            if (counter === null) {
                 return emptyString
             }
             if (typeof counter === 'number') {
                 return formatNumberCounter(counter)
             }
-            if (!counter.value) {
+            if (counter.value === null || counter.value === undefined) {
                 return emptyString
             }
             if (typeof counter.value === 'number') {
@@ -197,7 +198,7 @@ export default defineComponent({
         }
 
         const formatNumberCounter = (amount: number, format = '') => {
-            if (!amount) {
+            if (isNaN(amount)) {
                 return emptyString
             }
             if (amount === 0) {

package/src/components/compound/DlToast/api/useToast.ts

@@ -1,5 +1,12 @@
+import { isVue3 } from 'vue-demi'
 import toastComponent from '../components/ToastComponent.vue'
 import { createComponent } from '../utils/render'
+import { v4 } from 'uuid'
+
+const state: { prevToastId: any; toasts: { [key: string]: any } } = {
+    prevToastId: null,
+    toasts: {}
+}
 
 export const useToast = (globalProps = {}) => {
     return {
@@ -8,16 +15,46 @@ export const useToast = (globalProps = {}) => {
             if (typeof options === 'string') message = options
 
             const defaultProps = {
-                message
+                message,
+                identifier: v4()
             }
 
             const propsData = Object.assign(
                 {},
                 defaultProps,
                 globalProps,
-                options
+                options,
+                {
+                    remove: () => {
+                        delete state.toasts[defaultProps.identifier]
+                    }
+                }
+            )
+
+            if (state.prevToastId && state.toasts[state.prevToastId]) {
+                const toast = state.toasts[state.prevToastId]
+                const props = isVue3 ? toast.props : toast.$children[0]
+                const similar =
+                    propsData.message === props.message &&
+                    propsData.type === props.type
+                if (similar) {
+                    if (isVue3) {
+                        toast.proxy.updateCount(toast.proxy.count + 1)
+                    } else {
+                        toast.$children[0].updateCount(
+                            toast.$children[0].count + 1
+                        )
+                    }
+                    return
+                }
+            }
+
+            state.prevToastId = defaultProps.identifier
+            state.toasts[defaultProps.identifier] = createComponent(
+                toastComponent,
+                propsData,
+                document.body
             )
-            createComponent(toastComponent, propsData, document.body)
         }
     }
 }

package/src/components/compound/DlToast/components/ToastComponent.vue

@@ -5,9 +5,9 @@
     >
         <div
             v-show="isActive"
-            id="DlToastContainer"
+            :id="`DlToastContainer-${uuid}`"
             ref="root"
-            class="toast-item"
+            class="toast-item DlToastContainer"
             :class="[
                 `toast-item--${type}`,
                 `toast-item--${position}`,
@@ -21,12 +21,35 @@
                 :closable="closable"
                 :dark-mode="false"
                 close-button-position="center"
+                style="position: relative"
                 @update:model-value="closeToast"
             >
                 <span
                     class="toast-message"
                     data-test="message-text"
                 />
+                <dl-badge
+                    v-if="count"
+                    with-border
+                    floating
+                    align="top"
+                    :color="badgeColor"
+                    :text-color="
+                        type === 'warning'
+                            ? 'var(--dl-color-alert-text)'
+                            : 'var(--dl-color-text-buttons)'
+                    "
+                    style="
+                        display: grid;
+                        text-align: center;
+                        width: fit-content;
+                        padding: 3px;
+                        min-width: 1em;
+                        top: -5px;
+                    "
+                >
+                    {{ count + 1 }}
+                </dl-badge>
             </dl-alert>
         </div>
     </transition>
@@ -40,14 +63,15 @@ import {
     onMounted,
     ref
 } from 'vue-demi'
-import { DlAlert } from '../../../basic'
+import { DlAlert, DlBadge } from '../../../'
 import { Positions, Types } from '../utils/config'
 import { removeElement } from '../utils/render'
 import { Animation } from '../types'
+import { v4 } from 'uuid'
 
 export default defineComponent({
     name: 'ToastComponent',
-    components: { DlAlert },
+    components: { DlAlert, DlBadge },
     props: {
         message: {
             type: String,
@@ -88,16 +112,22 @@ export default defineComponent({
             default: 5
         }
     },
-    setup(props: any) {
+    emits: ['removed'],
+    setup(props: any, { emit }) {
+        const uuid = v4()
         const { position, duration, message, collapseCount } = props
         const root = ref(null)
+        const count = ref(0)
         let parentTop: HTMLElement = null
         let parentBottom: HTMLElement = null
         const toastParentPosition = ref(null)
         const isActive = ref(false)
         function closeToastMessage(): void {
             isActive.value = false
-            setTimeout(() => removeElement(root.value), 200)
+            setTimeout(() => {
+                emit('removed')
+                removeElement(root.value)
+            }, 200)
         }
         onBeforeMount(() => {
             setupContainer()
@@ -157,6 +187,19 @@ export default defineComponent({
             showNotice()
         })
 
+        const timeoutId = ref(null)
+
+        const setHideTimeout = () => {
+            if (timeoutId.value) {
+                clearTimeout(timeoutId.value)
+            }
+
+            timeoutId.value = setTimeout(() => {
+                closeToastMessage()
+                timeoutId.value = null
+            }, duration * 1000)
+        }
+
         function showNotice(): void {
             const parent = correctParent.value
             const container = root.value.closest('.dl-toast-container--pending')
@@ -165,24 +208,50 @@ export default defineComponent({
             container?.remove()
             isActive.value = true
             if (duration) {
-                setTimeout(() => {
-                    closeToastMessage()
-                }, duration * 1000)
+                setHideTimeout()
             }
             if (collapseCount && collapseCount < parent.childNodes.length) {
-                setTimeout(() => removeElement(parent.lastElementChild), 200)
+                setTimeout(() => {
+                    emit('removed')
+                    removeElement(parent.lastElementChild)
+                }, 200)
             }
         }
         function closeToast(val: boolean) {
-            if (!val) removeElement(root.value)
+            if (!val) {
+                emit('removed')
+                removeElement(root.value)
+            }
+        }
+
+        const updateCount = (val: number) => {
+            count.value = val
+            setHideTimeout()
         }
 
+        const badgeColor = computed(() => {
+            switch (props.type) {
+                case Types.success:
+                    return 'var(--dl-color-alert-success)'
+                case Types.warning:
+                    return 'var(--dl-color-alert-warn)'
+                case Types.error:
+                    return 'var(--dl-color-alert-error)'
+                case Types.info:
+                    return 'var(--dl-color-alert-info)'
+            }
+        })
+
         return {
+            uuid,
             root,
             transition,
             isActive,
             closeToast,
-            correctParent
+            correctParent,
+            updateCount,
+            count,
+            badgeColor
         }
     }
 })
@@ -304,7 +373,7 @@ export default defineComponent({
     }
 }
 
-#DlToastContainer {
+.DlToastContainer {
     --dl-color-negative: var(--dl-color-alert-error);
     --dl-color-negative-background: var(--dl-color-alert-error-background);
     --dl-color-warning: var(--dl-color-alert-warn);

package/src/components/compound/DlToast/utils/render.ts

@@ -30,7 +30,7 @@ if (VueDemi.isVue3) {
         const container = document.createElement('div')
         container.classList.add('dl-toast-container--pending')
         parentContainer.appendChild(container)
-        renderVue2Component(
+        return renderVue2Component(
             ToastComponent,
             props,
             '.dl-toast-container--pending'
@@ -53,7 +53,7 @@ function renderVue2Component(
     props: Object,
     container: string
 ) {
-    new VueDemi.Vue2({
+    return new VueDemi.Vue2({
         render: (h: (arg0: Object, arg1: { props: Object }) => any) =>
             h(component, { props })
     }).$mount(container)

package/src/components/essential/DlProgressBar/DlProgressBar.vue

@@ -85,6 +85,10 @@ export default defineComponent({
             type: String,
             default: '100%'
         },
+        height: {
+            type: String,
+            default: '4px'
+        },
         summary: {
             type: String,
             default: ''
@@ -102,6 +106,7 @@ export default defineComponent({
         cssVars(): Record<string, string> {
             return {
                 '--dl-progress-bar-width': `${this.computedValue}%`,
+                '--dl-progress-bar-height': `${this.height}`,
                 '--dl-progress-bar-bg': getColor(this.color)
             }
         }
@@ -109,7 +114,7 @@ export default defineComponent({
 })
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .dl-progress-bar-label {
     margin: 0;
     font-size: var(--dl-font-size-body);
@@ -119,7 +124,7 @@ export default defineComponent({
 .dl-progress-bar {
     overflow: hidden;
     width: 100%;
-    height: 4px;
+    height: var(--dl-progress-bar-height);
     border-radius: 2px;
     background-color: var(--dl-color-separator);
     margin: 6px 0;
@@ -127,7 +132,7 @@ export default defineComponent({
 .dl-progress-bar-indicator {
     transition: width 0.5s;
     display: block;
-    height: 4px;
+    height: var(--dl-progress-bar-height);
     border-radius: 2px;
     background-color: var(--dl-progress-bar-bg);
     width: var(--dl-progress-bar-width);

package/src/demos/DlAlertDemo.vue

@@ -39,6 +39,13 @@
         >
             Lorem ipsum dolor sit amet, consectetur adipisicing elit.
         </DlAlert>
+        <DlAlert
+            type="success"
+            text="Text: Lorem ipsum dolor sit amet, consectetur adipisicing elit. "
+            :closable="true"
+        >
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+        </DlAlert>
     </div>
 </template>
 

package/src/demos/DlToastDemo.vue

@@ -132,7 +132,7 @@ export default defineComponent({
                 message: message.value,
                 position: position.value,
                 type: type.value,
-                duration: duration.value,
+                duration: Number(duration.value) || 1000,
                 classItem: classItem.value,
                 closable: closable.value,
                 width: width.value,