@dataloop-ai/components 0.16.18 → 0.16.20

package/package.json

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

package/src/assets/constants.scss

@@ -0,0 +1,46 @@
+:root {
+    // Constants
+    --dl-color-alert-success:  #38D079;
+    --dl-color-alert-success-background: #E1FFF0;
+    --dl-color-alert-warn: ##FFDA3A;
+    --dl-color-alert-warn-background: #FFF7D6;
+    --dl-color-alert-error: #FF3434;
+    --dl-color-alert-error-background: #FFEAEA ;
+    --dl-color-alert-info: #4E81B3;
+    --dl-color-alert-info-background: #F3F9FF;
+    --dl-color-alert-text: #171723;
+
+    // Z-Index
+    --dl-z-index-toast: 1052;
+    --dl-z-index-panel: 3000; // panel & panel contaiener content
+    --dl-z-index-panel-elements: 3010; // separator + glutter
+    --dl-z-index-panel-header-footer: 3020;
+    --dl-z-index-panel-container-overlay: 3025;
+    --dl-z-index-panel-container-elements: 3030; // collapse icon + separator
+
+    --dl-z-index-overlay: 5000;
+
+    --dl-z-index-menu: 6000;
+    --dl-z-index-tooltip: 9000;
+
+
+    // chart colors
+    --dl-color-chart-1: #4DB1D3;
+    --dl-color-chart-2: #FF2F7A;
+    --dl-color-chart-3: #D4E3FF;
+    --dl-color-chart-4: #BECB5D;
+    --dl-color-chart-5: #839E30;
+    --dl-color-chart-6: #6B5935;
+    --dl-color-chart-7: #752B86;
+    --dl-color-chart-8: #BB96A3;
+    --dl-color-chart-9: #870F49;
+    --dl-color-chart-10: #CC566C;
+    --dl-color-chart-11: #F0A18C;
+    --dl-color-chart-12: #EDAB55;
+    --dl-color-chart-13: #FF5934;
+    --dl-color-chart-14: #9CD2E3;
+    --dl-color-chart-15: #928F80;
+    --dl-color-chart-16: #575567;
+    --dl-color-chart-17: #979797;
+    --dl-color-chart-18: #D9D9D9;
+}

package/src/assets/globals.scss

@@ -1,4 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
+@import 'constants';
 
 body {
     font-family: 'Roboto', sans-serif;
@@ -99,6 +100,14 @@ body {
     align-items: center;
 }
 
+.items-top {
+    align-items: start;
+}
+
+.items-bottom {
+    align-items: end;
+}
+
 .col {
     flex: 10000 1 0%;
 }
@@ -107,6 +116,7 @@ body {
     width: 100%;
 }
 
+
 :root {
     // common
     --dl-color-white: #fff;
@@ -164,39 +174,6 @@ body {
 
     --dl-date-picker-shadow: 0px 3px 6px #101e7326;
     --dl-date-picker-selected-strip: rgb(52, 82, 255, 0.2);
-
-    // chart
-    --dl-color-chart-1: #4DB1D3;
-    --dl-color-chart-2: #FF2F7A;
-    --dl-color-chart-3: #D4E3FF;
-    --dl-color-chart-4: #BECB5D;
-    --dl-color-chart-5: #839E30;
-    --dl-color-chart-6: #6B5935;
-    --dl-color-chart-7: #752B86;
-    --dl-color-chart-8: #BB96A3;
-    --dl-color-chart-9: #870F49;
-    --dl-color-chart-10: #CC566C;
-    --dl-color-chart-11: #F0A18C;
-    --dl-color-chart-12: #EDAB55;
-    --dl-color-chart-13: #FF5934;
-    --dl-color-chart-14: #9CD2E3;
-    --dl-color-chart-15: #928F80;
-    --dl-color-chart-16: #575567;
-    --dl-color-chart-17: #979797;
-    --dl-color-chart-18: #D9D9D9;
-    //
-
-    // z-index
-    --dl-z-index-panel: 3000; // panel & panel contaiener content
-    --dl-z-index-panel-elements: 3010; // separator + glutter
-    --dl-z-index-panel-header-footer: 3020;
-    --dl-z-index-panel-container-overlay: 3025;
-    --dl-z-index-panel-container-elements: 3030; // collapse icon + separator
-
-    --dl-z-index-overlay: 5000;
-
-    --dl-z-index-menu: 6000;
-    --dl-z-index-tooltip: 9000;
 }
 
 /* Define styles for the root window with dark - mode preference */

package/src/components/basic/DlAlert/DlAlert.vue

@@ -32,6 +32,7 @@
                 class="close-btn-icon"
                 data-test="close-btn-icon"
                 icon="icon-dl-close"
+                color="dl-color-darker"
                 size="12px"
                 @click="handleClose"
             />
@@ -219,6 +220,7 @@ export default defineComponent({
     .close-btn {
         padding-right: 16px;
         padding-left: 10px;
+        align-items: start;
     }
 
     .icon-dl-close:hover {

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

@@ -455,7 +455,7 @@ export default defineComponent({
 })
 </script>
 
-<style>
+<style lang="scss" scoped>
 .dl-popup {
     z-index: calc(var(--dl-z-index-menu) - 1);
     position: fixed !important;

package/src/components/compound/DlDropdownButton/components/ButtonGroup.vue

@@ -44,7 +44,7 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .dl-btn-group {
     border-radius: 2px;
     vertical-align: middle;

package/src/components/compound/DlJsonEditor/DlJsonEditor.vue

@@ -273,7 +273,7 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .json-editor {
     --jse-text-color: var(--dl-color-tooltip-background);
     --jse-delimiter-color: var(--dl-color-tooltip-background);

package/src/components/compound/DlSelect/components/DlSelectOption.vue

@@ -252,8 +252,7 @@ export default defineComponent({
 .capitalized {
     text-transform: capitalize !important;
 }
-</style>
-<style lang="scss">
+
 .capitalized .checkbox-label {
     text-transform: capitalize !important;
 }

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

@@ -5,22 +5,26 @@
     >
         <div
             v-show="isActive"
+            id="DlToastContainer"
             ref="root"
-            class="v-toast__item"
+            class="toast-item"
             :class="[
-                `v-toast__item--${type}`,
-                `v-toast__item--${position}`,
+                `toast-item--${type}`,
+                `toast-item--${position}`,
                 classItem
             ]"
             :style="{ width }"
         >
             <dl-alert
+                class="alert"
                 :type="type"
                 :closable="closable"
+                :dark-mode="false"
+                close-button-position="center"
                 @update:model-value="closeToast"
             >
                 <span
-                    class="v-toast__text"
+                    class="toast-message"
                     data-test="message-text"
                 />
             </dl-alert>
@@ -78,10 +82,14 @@ export default defineComponent({
         closable: {
             type: Boolean,
             default: true
+        },
+        collapseCount: {
+            type: Number,
+            default: 5
         }
     },
     setup(props: any) {
-        const { position, duration, message } = props
+        const { position, duration, message, collapseCount } = props
         const root = ref(null)
         let parentTop: HTMLElement = null
         let parentBottom: HTMLElement = null
@@ -95,16 +103,16 @@ export default defineComponent({
             setupContainer()
         })
         function setupContainer(): void {
-            parentTop = document.querySelector('.v-toast.v-toast--top')
-            parentBottom = document.querySelector('.v-toast.v-toast--bottom')
+            parentTop = document.getElementById('DlToastContainerTop')
+            parentBottom = document.getElementById('DlToastContainerBottom')
             if (parentTop && parentBottom) return
             if (!parentTop) {
                 parentTop = document.createElement('div')
-                parentTop.className = 'v-toast v-toast--top'
+                parentTop.id = 'DlToastContainerTop'
             }
             if (!parentBottom) {
                 parentBottom = document.createElement('div')
-                parentBottom.className = 'v-toast v-toast--bottom'
+                parentBottom.id = 'DlToastContainerBottom'
             }
             const container = document.body
             container.appendChild(parentTop)
@@ -132,15 +140,15 @@ export default defineComponent({
                 case Positions.top_right:
                 case Positions.top_left:
                     return {
-                        enter: 'v-toast--fade-in-down',
-                        leave: 'v-toast--fade-out'
+                        enter: 'dl-toast--fade-in-down',
+                        leave: 'dl-toast--fade-out'
                     }
                 case Positions.bottom:
                 case Positions.bottom_right:
                 case Positions.bottom_left:
                     return {
-                        enter: 'v-toast--fade-in-up',
-                        leave: 'v-toast--fade-out'
+                        enter: 'dl-toast--fade-in-up',
+                        leave: 'dl-toast--fade-out'
                     }
             }
         })
@@ -151,8 +159,8 @@ export default defineComponent({
 
         function showNotice(): void {
             const parent = correctParent.value
-            const container = root.value.closest('.v-toast--pending')
-            root.value.querySelector('.v-toast__text').innerHTML = message
+            const container = root.value.closest('.dl-toast-container--pending')
+            root.value.querySelector('.toast-message').innerHTML = message
             parent.insertAdjacentElement('afterbegin', root.value)
             container?.remove()
             isActive.value = true
@@ -161,6 +169,9 @@ export default defineComponent({
                     closeToastMessage()
                 }, duration * 1000)
             }
+            if (collapseCount && collapseCount < parent.childNodes.length) {
+                setTimeout(() => removeElement(parent.lastElementChild), 200)
+            }
         }
         function closeToast(val: boolean) {
             if (!val) removeElement(root.value)
@@ -177,52 +188,35 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss">
-.v-toast {
-    position: fixed;
-    display: flex;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    overflow: hidden;
-    z-index: 1052;
-    pointer-events: none;
-    &__item {
-        display: inline-flex;
-        align-items: center;
-        pointer-events: auto;
-        min-width: 400px;
-        max-width: 900px;
-        margin: 5px;
-        cursor: pointer;
-        animation-duration: 150ms;
-
-        &.v-toast__item--top,
-        &.v-toast__item--bottom {
-            align-self: center;
-        }
-
-        &.v-toast__item--top-right,
-        &.v-toast__item--bottom-right {
-            align-self: flex-end;
-        }
+<style lang="scss" scoped>
+.toast-item {
+    display: inline-flex;
+    align-items: center;
+    pointer-events: auto;
+    min-width: 400px;
+    max-width: 900px;
+    margin: 5px;
+    cursor: pointer;
+    animation-duration: 150ms;
 
-        &.v-toast__item--top-left,
-        &.v-toast__item--bottom-left {
-            align-self: flex-start;
-        }
+    &.toast-item--top,
+    &.toast-item--bottom {
+        align-self: center;
     }
 
-    &.v-toast--top {
-        flex-direction: column;
+    &.toast-item--top-right,
+    &.toast-item--bottom-right {
+        align-self: flex-end;
     }
 
-    &.v-toast--bottom {
-        flex-direction: column-reverse;
+    &.toast-item--top-left,
+    &.toast-item--bottom-left {
+        align-self: flex-start;
     }
 }
 
+// using unique class to identify the changes
+
 @keyframes fadeOut {
     from {
         opacity: 1;
@@ -232,7 +226,7 @@ export default defineComponent({
     }
 }
 
-.v-toast--fade-out {
+.dl-toast--fade-out {
     animation-name: fadeOut;
 }
 
@@ -247,7 +241,7 @@ export default defineComponent({
     }
 }
 
-.v-toast--fade-in-down {
+.dl-toast--fade-in-down {
     animation-name: fadeInDown;
 }
 
@@ -262,14 +256,11 @@ export default defineComponent({
     }
 }
 
-.v-toast--fade-in-up {
+.dl-toast--fade-in-up {
     animation-name: fadeInUp;
 }
 
-/**
- * Vue Transitions
- */
-
+// animations
 .fade-enter-active,
 .fade-leave-active {
     transition: opacity 150ms ease-out;
@@ -280,3 +271,54 @@ export default defineComponent({
     opacity: 0;
 }
 </style>
+
+<style lang="scss">
+#DlToastContainerTop {
+    position: fixed;
+    display: flex;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    overflow: hidden;
+    z-index: var(--dl-z-index-toast);
+    pointer-events: none;
+    flex-direction: column;
+    .root {
+        width: 100% !important;
+    }
+}
+#DlToastContainerBottom {
+    position: fixed;
+    display: flex;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    overflow: hidden;
+    z-index: var(--dl-z-index-toast);
+    pointer-events: none;
+    flex-direction: column-reverse;
+    .root {
+        width: 100% !important;
+    }
+}
+
+#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);
+    --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-darker: var(--dl-color-alert-text);
+
+    .alert {
+        .close-btn {
+            align-items: center !important;
+        }
+    }
+}
+</style>

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

@@ -14,7 +14,7 @@ if (VueDemi.isVue3) {
     ) {
         const vNode = VueDemi.h(component, props, slots)
         const container = document.createElement('div')
-        container.classList.add('v-toast--pending')
+        container.classList.add('dl-toast-container--pending')
         parentContainer.appendChild(container)
         VueDemi.render(vNode, container)
 
@@ -28,9 +28,13 @@ if (VueDemi.isVue3) {
         slots = {}
     ) {
         const container = document.createElement('div')
-        container.classList.add('v-toast--pending')
+        container.classList.add('dl-toast-container--pending')
         parentContainer.appendChild(container)
-        renderVue2Component(ToastComponent, props, '.v-toast--pending')
+        renderVue2Component(
+            ToastComponent,
+            props,
+            '.dl-toast-container--pending'
+        )
     }
 }
 

package/src/components/essential/DlTooltip/DlTooltip.vue

@@ -414,7 +414,7 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .dl-tooltip {
     z-index: var(--dl-z-index-tooltip);
     position: fixed !important;

package/src/demo/DlToastDemo.vue

@@ -2,7 +2,7 @@
     <div style="width: 950px; padding-top: 20px">
         <div class="flex">
             <div>
-                <dl-area
+                <dl-text-area
                     v-model="message"
                     title="Message"
                 />
@@ -11,11 +11,16 @@
                     type="number"
                     title="Duration seconds"
                 />
+                <dl-input
+                    v-model="collapseCount"
+                    type="number"
+                    title="Collapse count"
+                />
                 <dl-input
                     v-model="classItem"
                     title="Custom class for toast item"
                 />
-                <dl-text-input
+                <dl-input
                     v-model="width"
                     title="Custom width for toast item"
                 />
@@ -93,11 +98,19 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue-demi'
-import { DlButton, DlToast, DlInput, DlRadio, DlSwitch } from '../components'
+import {
+    DlButton,
+    DlInput,
+    DlRadio,
+    DlSwitch,
+    DlTextArea,
+    DlToast
+} from '../components'
 
 export default defineComponent({
     name: 'DlToast',
     components: {
+        DlTextArea,
         DlSwitch,
         DlRadio,
         DlInput,
@@ -113,6 +126,7 @@ export default defineComponent({
         const closable = ref(true)
         const classItem = ref('demo-toast')
         const width = ref('auto')
+        const collapseCount = ref(null)
         function showToastMessage() {
             DlToast.open({
                 message: message.value,
@@ -121,7 +135,8 @@ export default defineComponent({
                 duration: duration.value,
                 classItem: classItem.value,
                 closable: closable.value,
-                width: width.value
+                width: width.value,
+                collapseCount: collapseCount.value
             })
         }
         return {
@@ -132,7 +147,8 @@ export default defineComponent({
             position,
             classItem,
             closable,
-            width
+            width,
+            collapseCount
         }
     }
 })