@dataloop-ai/components 0.17.11 → 0.17.13

package/package.json

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

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

@@ -151,8 +151,8 @@
             >
                 <dl-list
                     class="select-list"
-                    :style="dropdownCSSVars"
                     :padding="false"
+                    :max-height="dropdownMaxHeight"
                 >
                     <dl-list-item v-if="noOptions">
                         <dl-item-section color="dl-color-medium">
@@ -551,11 +551,6 @@ export default defineComponent({
                     : '28px'
             }
         },
-        dropdownCSSVars(): Record<string, string> {
-            return {
-                '--dl-select-dropdown-max-height': this.dropdownMaxHeight
-            }
-        },
         asteriskClasses(): string[] {
             const classes = ['required-asterisk']
             if (this.redAsterisk) {
@@ -965,6 +960,7 @@ export default defineComponent({
         background-color: var(--dl-color-fill);
     }
 
+    //todo: This doesnt work because of portal.
     .select-list {
         padding: 5px 0;
         max-height: var(--dl-select-dropdown-max-height);

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

@@ -2,6 +2,7 @@ import { isVue3 } from 'vue-demi'
 import toastComponent from '../components/ToastComponent.vue'
 import { createComponent } from '../utils/render'
 import { v4 } from 'uuid'
+import { DlToastProps, DlToastTypes } from '../types'
 
 const state: { prevToastId: any; toasts: { [key: string]: any } } = {
     prevToastId: null,
@@ -10,7 +11,7 @@ const state: { prevToastId: any; toasts: { [key: string]: any } } = {
 
 export const useToast = (globalProps = {}) => {
     return {
-        open(options: Object | string) {
+        open(options: DlToastProps | string) {
             let message = null
             if (typeof options === 'string') message = options
 
@@ -55,6 +56,46 @@ export const useToast = (globalProps = {}) => {
                 propsData,
                 document.body
             )
+        },
+        success(options: DlToastProps | string) {
+            let props: Partial<DlToastProps> = {}
+            if (typeof options === 'string') {
+                props.message = options
+            } else {
+                props = options
+            }
+
+            this.open({ ...props, type: DlToastTypes.SUCCESS } as DlToastProps)
+        },
+        error(options: DlToastProps | string) {
+            let props: Partial<DlToastProps> = {}
+            if (typeof options === 'string') {
+                props.message = options
+            } else {
+                props = options
+            }
+
+            this.open({ ...props, type: DlToastTypes.ERROR } as DlToastProps)
+        },
+        info(options: DlToastProps | string) {
+            let props: Partial<DlToastProps> = {}
+            if (typeof options === 'string') {
+                props.message = options
+            } else {
+                props = options
+            }
+
+            this.open({ ...props, type: DlToastTypes.INFO } as DlToastProps)
+        },
+        warn(options: DlToastProps | string) {
+            let props: Partial<DlToastProps> = {}
+            if (typeof options === 'string') {
+                props.message = options
+            } else {
+                props = options
+            }
+
+            this.open({ ...props, type: DlToastTypes.WARNING } as DlToastProps)
         }
     }
 }

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

@@ -8,11 +8,7 @@
             :id="`DlToastContainer-${uuid}`"
             ref="root"
             class="toast-item DlToastContainer"
-            :class="[
-                `toast-item--${type}`,
-                `toast-item--${position}`,
-                classItem
-            ]"
+            :class="[`toast-item--${type}`, `toast-item--${position}`]"
             :style="{ width }"
         >
             <dl-alert
@@ -64,7 +60,7 @@ import {
     ref
 } from 'vue-demi'
 import { DlAlert, DlBadge } from '../../../'
-import { Positions, Types } from '../utils/config'
+import { DlToastTypes, DlToastPositions } from '../types'
 import { removeElement } from '../utils/render'
 import { Animation } from '../types'
 import { v4 } from 'uuid'
@@ -79,15 +75,11 @@ export default defineComponent({
         },
         type: {
             type: String,
-            default: 'success',
-            validator(value: string): boolean {
-                return Object.values(Types as unknown).includes(value)
+            required: true,
+            validator(value: DlToastTypes): boolean {
+                return Object.values(DlToastTypes).includes(value)
             }
         },
-        classItem: {
-            type: String,
-            default: ''
-        },
         width: {
             type: String,
             default: 'auto'
@@ -98,9 +90,9 @@ export default defineComponent({
         },
         position: {
             type: String,
-            default: Positions.bottom,
-            validator(value: string): boolean {
-                return Object.values(Positions as unknown).includes(value)
+            default: DlToastPositions.BOTTOM,
+            validator(value: DlToastPositions): boolean {
+                return Object.values(DlToastPositions).includes(value)
             }
         },
         closable: {
@@ -151,14 +143,14 @@ export default defineComponent({
 
         const correctParent = computed(() => {
             switch (position) {
-                case Positions.top:
-                case Positions.top_right:
-                case Positions.top_left:
+                case DlToastPositions.TOP:
+                case DlToastPositions.TOP_RIGHT:
+                case DlToastPositions.TOP_LEFT:
                     toastParentPosition.value = 'top'
                     return parentTop
-                case Positions.bottom:
-                case Positions.bottom_right:
-                case Positions.bottom_left:
+                case DlToastPositions.BOTTOM:
+                case DlToastPositions.BOTTOM_RIGHT:
+                case DlToastPositions.BOTTOM_LEFT:
                     toastParentPosition.value = 'bottom'
                     return parentBottom
             }
@@ -166,16 +158,16 @@ export default defineComponent({
 
         const transition = computed((): Animation => {
             switch (position) {
-                case Positions.top:
-                case Positions.top_right:
-                case Positions.top_left:
+                case DlToastPositions.TOP:
+                case DlToastPositions.TOP_RIGHT:
+                case DlToastPositions.TOP_LEFT:
                     return {
                         enter: 'dl-toast--fade-in-down',
                         leave: 'dl-toast--fade-out'
                     }
-                case Positions.bottom:
-                case Positions.bottom_right:
-                case Positions.bottom_left:
+                case DlToastPositions.BOTTOM:
+                case DlToastPositions.BOTTOM_RIGHT:
+                case DlToastPositions.BOTTOM_LEFT:
                     return {
                         enter: 'dl-toast--fade-in-up',
                         leave: 'dl-toast--fade-out'
@@ -231,13 +223,13 @@ export default defineComponent({
 
         const badgeColor = computed(() => {
             switch (props.type) {
-                case Types.success:
+                case DlToastTypes.SUCCESS:
                     return 'var(--dl-color-alert-success)'
-                case Types.warning:
+                case DlToastTypes.WARNING:
                     return 'var(--dl-color-alert-warn)'
-                case Types.error:
+                case DlToastTypes.ERROR:
                     return 'var(--dl-color-alert-error)'
-                case Types.info:
+                case DlToastTypes.INFO:
                     return 'var(--dl-color-alert-info)'
             }
         })

package/src/components/compound/DlToast/types.ts

@@ -2,3 +2,55 @@ export interface Animation {
     enter: string
     leave: string
 }
+
+export enum DlToastPositions {
+    TOP_RIGHT = 'top-right',
+    TOP = 'top',
+    TOP_LEFT = 'top-left',
+    BOTTOM_RIGHT = 'bottom-right',
+    BOTTOM = 'bottom',
+    BOTTOM_LEFT = 'bottom-left'
+}
+
+export enum DlToastTypes {
+    SUCCESS = 'success',
+    WARNING = 'warning',
+    ERROR = 'error',
+    INFO = 'info'
+}
+
+export interface DlToastProps {
+    /**
+     * The message to display in the toast
+     */
+    message: string
+    /**
+     * The type of the toast
+     */
+    type: DlToastTypes
+    /**
+     * The width of the toast
+     * @default 'auto'
+     */
+    width?: string
+    /**
+     * The duration of the toast in seconds
+     * @default 10
+     */
+    duration?: number
+    /**
+     * The position of the toast
+     * @default DlToastPositions.BOTTOM
+     */
+    position?: DlToastPositions
+    /**
+     * Whether the toast is closable
+     * @default true
+     */
+    closable?: boolean
+    /**
+     * The number of toasts to collapse after
+     * @default 5
+     */
+    collapseCount?: number
+}

package/src/components/essential/DlList/DlList.vue

@@ -3,6 +3,7 @@
         :is="tag"
         :id="uuid"
         :class="classes"
+        :style="cssVars"
     >
         <slot :clickable="clickable" />
     </component>
@@ -21,6 +22,10 @@ export default defineComponent({
         tag: {
             type: String,
             default: 'div'
+        },
+        maxHeight: {
+            type: String,
+            default: '30vh'
         }
     },
     data() {
@@ -36,6 +41,11 @@ export default defineComponent({
                 (this.separator ? ' dl-list--separator' : '') +
                 (this.padding ? ' dl-list--padding' : '')
             )
+        },
+        cssVars(): Record<string, string> {
+            return {
+                '--dl-list-calculated-max-height': this.maxHeight
+            }
         }
     }
 })
@@ -62,5 +72,6 @@ export default defineComponent({
     &--padding {
         padding: 8px 0;
     }
+    max-height: var(--dl-list-max-height, --dl-list-calculated-max-height);
 }
 </style>

package/src/demos/DlToastDemo.vue

@@ -16,10 +16,6 @@
                     type="number"
                     title="Collapse count"
                 />
-                <dl-input
-                    v-model="classItem"
-                    title="Custom class for toast item"
-                />
                 <dl-input
                     v-model="width"
                     title="Custom width for toast item"
@@ -106,6 +102,7 @@ import {
     DlTextArea,
     DlToast
 } from '../components'
+import { DlToastPositions, DlToastTypes } from '../components/types'
 
 export default defineComponent({
     name: 'DlToast',
@@ -124,16 +121,14 @@ export default defineComponent({
         const type = ref('success')
         const position = ref('bottom')
         const closable = ref(true)
-        const classItem = ref('demo-toast')
         const width = ref('auto')
         const collapseCount = ref(null)
         function showToastMessage() {
             DlToast.open({
                 message: message.value,
-                position: position.value,
-                type: type.value,
+                position: position.value as DlToastPositions,
+                type: type.value as DlToastTypes,
                 duration: Number(duration.value) || 1000,
-                classItem: classItem.value,
                 closable: closable.value,
                 width: width.value,
                 collapseCount: collapseCount.value
@@ -145,7 +140,6 @@ export default defineComponent({
             duration,
             type,
             position,
-            classItem,
             closable,
             width,
             collapseCount

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

@@ -1,17 +0,0 @@
-const Positions = Object.freeze({
-    top_right: 'top-right',
-    top: 'top',
-    top_left: 'top-left',
-    bottom_right: 'bottom-right',
-    bottom: 'bottom',
-    bottom_left: 'bottom-left'
-})
-
-const Types = Object.freeze({
-    success: 'success',
-    warning: 'warning',
-    error: 'error',
-    info: 'info'
-})
-
-export { Positions, Types }