@dataloop-ai/components 0.16.57 → 0.16.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.16.57",
+  "version": "0.16.60",
   "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,20 @@ 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-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/basic/DlPopup/DlPopup.vue

@@ -20,12 +20,14 @@
                     @move="movePopup"
                 />
                 <popup-header
-                    v-if="hasHeaderSlot"
+                    v-if="
+                        hasHeaderSlot || hasCloseButtonSlot || withCloseButton
+                    "
                     :title="title"
                     :additional-info="additionalInfo"
                     :subtitle="subtitle"
                     :with-close-button="withCloseButton"
-                    @hide-button-clik="handleHideClick"
+                    @close-button-click="handleCloseClick"
                 >
                     <template
                         v-if="hasHeaderSlot"
@@ -34,10 +36,10 @@
                         <slot name="header" />
                     </template>
                     <template
-                        v-if="hasHideButtonSlot"
-                        #hide-button
+                        v-if="hasCloseButtonSlot"
+                        #close-button
                     >
-                        <slot name="hide-button" />
+                        <slot name="close-button" />
                     </template>
                 </popup-header>
                 <div class="popup-content">
@@ -146,7 +148,6 @@ export default defineComponent({
         withCloseButton: { type: Boolean, default: false },
         preventHide: { type: Boolean, default: false },
         disableCloseByEsc: { type: Boolean, default: false },
-        hideOnClickOutside: { type: Boolean, default: false },
         self: {
             type: String,
             default: 'top middle',
@@ -169,7 +170,7 @@ export default defineComponent({
         draggable: Boolean
     },
     emits: [
-        'hide-button-click',
+        'close-button-click',
         'show',
         'before-show',
         'hide',
@@ -205,8 +206,8 @@ export default defineComponent({
 
         const hasHeaderSlot = computed(() => slots.header !== undefined)
 
-        const hasHideButtonSlot = computed(
-            () => slots['hide-button'] !== undefined
+        const hasCloseButtonSlot = computed(
+            () => slots['close-button'] !== undefined
         )
 
         const { hide } = useModelToggle({
@@ -230,7 +231,7 @@ export default defineComponent({
             innerRef,
             onClickOutside: (e: AnchorEvent) =>
                 handleClickOutside(e, {
-                    persistent: !props.hideOnClickOutside,
+                    persistent: props.persistent,
                     showing: showing.value,
                     fn: hide
                 })
@@ -421,11 +422,11 @@ export default defineComponent({
             )
         }
 
-        function handleHideClick(e: Event) {
+        function handleCloseClick(e: Event) {
             if (!props.preventHide) {
                 hide(e as AnchorEvent)
             }
-            proxy.$emit('hide-button-click', e)
+            proxy.$emit('close-button-click', e)
         }
 
         onBeforeUnmount(anchorCleanup as any)
@@ -438,8 +439,8 @@ export default defineComponent({
             portalIsAccessible,
             anchorEl,
             showing,
-            handleHideClick,
-            hasHideButtonSlot,
+            handleCloseClick,
+            hasCloseButtonSlot,
             hasFooterSlot,
             movePopup,
             hasHeaderSlot,

package/src/components/basic/DlPopup/components/PopupHeader.vue

@@ -27,12 +27,12 @@
             </span>
             <span
                 v-if="withCloseButton"
-                class="hide-button"
-                @click="handleHide"
+                class="close-button"
+                @click="handleClick"
             >
                 <slot
-                    v-if="hasHideButtonSlot"
-                    name="hide-button"
+                    v-if="hasCloseButtonSlot"
+                    name="close-button"
                 />
                 <dl-icon
                     v-else
@@ -61,13 +61,13 @@ export default defineComponent({
         additionalInfo: { type: String, default: '' },
         withCloseButton: { type: Boolean, default: false }
     },
-    emits: ['hide-button-clik'],
+    emits: ['close-button-click'],
     computed: {
         hasHeaderSlot(): boolean {
             return this.$slots.header !== undefined
         },
-        hasHideButtonSlot(): boolean {
-            return this.$slots['hide-button'] !== undefined
+        hasCloseButtonSlot(): boolean {
+            return this.$slots['close-button'] !== undefined
         },
         hasAdditionalInfo(): boolean {
             return this.additionalInfo !== ''
@@ -81,8 +81,8 @@ export default defineComponent({
         }
     },
     methods: {
-        handleHide(e: Event) {
-            this.$emit('hide-button-clik', e)
+        handleClick(e: Event) {
+            this.$emit('close-button-click', e)
         }
     }
 })
@@ -107,7 +107,7 @@ export default defineComponent({
     color: var(--dl-color-darker);
 }
 
-.hide-button {
+.close-button {
     display: flex;
     justify-content: center;
     align-items: center;

package/src/components/compound/DlRange/DlRange.vue

@@ -177,14 +177,8 @@ export default defineComponent({
         normalizeModel()
 
         const initialValue = {
-            min:
-                props.modelValue.min === null
-                    ? props.min
-                    : between(props.modelValue.min, props.min, props.max),
-            max:
-                props.modelValue.max === null
-                    ? props.max
-                    : between(props.modelValue.max, props.min, props.max)
+            min: props.min,
+            max: props.max
         }
 
         const modelMinRatio = computed(() =>
@@ -402,7 +396,7 @@ export default defineComponent({
 
             model.value.min = initialValue.min!
             model.value.max = initialValue.max!
-            emit('update:model-value', { ...model.value })
+            updateValue()
         }
 
         return {

package/src/components/compound/DlRange/utils.ts

@@ -1,3 +1,4 @@
+import { cloneDeep } from 'lodash'
 import { between, includes, KEY_CODE } from '../../../utils'
 import { Dragging, dragType } from '../DlSlider/useSlider'
 
@@ -12,12 +13,10 @@ export function updateValue(
     emitFn: (...args: any[]) => any,
     change?: boolean
 ) {
-    if (state.min !== props.min || state.max !== props.max) {
-        emitFn('update:model-value', { ...state })
-    }
+    emitFn('update:model-value', cloneDeep(state))
 
     if (change === true) {
-        emitFn('change', { ...state })
+        emitFn('change', cloneDeep(state))
     }
 }
 

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/DlPopupDemo.vue

@@ -6,7 +6,7 @@
                 additional-info="Some additional information"
                 subtitle="Some text for better explanation."
                 with-close-button
-                @hide-button-click="handleClear"
+                @close-button-click="handleClear"
             >
                 <dl-text-area
                     v-model="text"
@@ -15,12 +15,36 @@
                     placeholder="Type your text"
                     width="203px"
                 />
-                <template #hide-button>
+                <template #footer>
+                    <dl-button fluid>
+                        Save
+                    </dl-button>
+                </template>
+            </dl-popup>
+        </dl-button>
+        <div />
+        <dl-button label="Open Popup persistent">
+            <dl-popup
+                title="Edit Item Description"
+                additional-info="Some additional information"
+                subtitle="Some text for better explanation."
+                with-close-button
+                persistent
+            >
+                <dl-text-area
+                    v-model="text"
+                    :max-length="100"
+                    show-counter
+                    placeholder="Type your text"
+                    width="203px"
+                />
+                <template #close-button>
                     <dl-button
                         flat
                         style="padding-bottom: 0; padding-top: 0"
                         label="clear"
                         size="m"
+                        @click="handleClear"
                     />
                 </template>
                 <template #footer>
@@ -30,7 +54,6 @@
                 </template>
             </dl-popup>
         </dl-button>
-        <div />
     </div>
 </template>
 <script lang="ts">

package/src/demos/DlRangeDemo.vue

@@ -4,10 +4,9 @@
             v-model="value"
             width="500px"
             :min="0"
-            :max="100"
-            :step="5"
+            :max="1"
+            :step="0.1"
             text="Range"
-            :snap="true"
             :readonly="readonly"
             :disabled="disabled"
             name="range"
@@ -20,6 +19,9 @@
                 Disable: {{ disabled }}
             </button>
         </div>
+        <div>
+            {{ value }}
+        </div>
     </div>
 </template>
 
@@ -34,11 +36,16 @@ export default defineComponent({
     },
     data() {
         return {
-            value: { min: 0, max: 100 },
+            value: { min: 0, max: 0.5 },
             disabled: false,
             readonly: false
         }
     },
+    watch: {
+        value(val) {
+            console.log('value changed: ', val)
+        }
+    },
     template: 'dl-range-demo'
 })
 </script>

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,