@dataloop-ai/components 0.17.10 → 0.17.12

package/package.json

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

package/src/components/compound/DlStepper/models/Stepper.ts

@@ -115,11 +115,11 @@ export class Stepper {
         const { step } = options
         const stepToFail = step ?? this.currentStep
 
-        if (stepToFail) {
+        if (!stepToFail) {
             return
         }
 
-        this.currentStep.error = message ?? ''
+        stepToFail.error = message ?? ''
     }
 
     /**
@@ -136,11 +136,11 @@ export class Stepper {
         const { step, preventNext } = options
         const stepToWarn = step ?? this.currentStep
 
-        if (stepToWarn) {
+        if (!stepToWarn) {
             return
         }
 
-        this.currentStep.warning = message ?? ''
+        stepToWarn.warning = message ?? ''
 
         if (!preventNext) {
             this.moveToNextStep()
@@ -157,10 +157,10 @@ export class Stepper {
         const { step } = options
         const stepToReset = step ?? this.currentStep
 
-        if (stepToReset) {
+        if (!stepToReset) {
             return
         }
 
-        this.currentStep.reset()
+        stepToReset.reset()
     }
 }

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/shared/DlVirtualScroll/DlVirtualScroll.vue

@@ -43,31 +43,40 @@ export default defineComponent({
 
         virtualScrollSliceRatioBefore: {
             type: [Number, String],
+            required: false,
             default: 1
         },
 
         virtualScrollSliceRatioAfter: {
             type: [Number, String],
+            required: false,
             default: 1
         },
 
         virtualScrollItemSize: {
             type: [Number, String],
+            required: false,
             default: 0
         },
 
         virtualScrollStickySizeStart: {
             type: [Number, String],
+            required: false,
             default: 0
         },
 
         virtualScrollStickySizeEnd: {
             type: [Number, String],
+            required: false,
             default: 0
         },
-        tableColspan: [Number, String],
-        virtualScrollHorizontal: Boolean,
-        onVirtualScroll: Function,
+        tableColspan: { type: [Number, String], required: false, default: 1 },
+        virtualScrollHorizontal: {
+            type: Boolean,
+            required: false,
+            default: false
+        },
+        onVirtualScroll: { type: Function, default: null },
         items: {
             type: Array,
             default: () => [] as Record<string, any>[]
@@ -80,11 +89,12 @@ export default defineComponent({
                 typeOptions.includes(v)
         },
 
-        itemsFn: { type: Function, default: void 0 },
+        itemsFn: { type: Function, default: null },
         itemsSize: { type: Number, default: 0 },
 
         scrollTarget: {
-            default: void 0
+            type: [String, Object],
+            default: null
         }
     },
     emits: ['virtual-scroll'],
@@ -92,8 +102,10 @@ export default defineComponent({
         let localScrollTarget: HTMLElement | undefined
         const rootRef: Ref<HTMLElement | null> = ref(null)
 
+        const isDefined = (v: any) => v !== undefined && v !== null
+
         const virtualScrollLength = computed(() => {
-            return props.itemsSize >= 0 && props.itemsFn !== void 0
+            return props.itemsSize >= 0 && isDefined(props.itemsFn)
                 ? parseInt(props.itemsSize as unknown as string, 10)
                 : Array.isArray(props.items)
                 ? props.items.length
@@ -121,20 +133,21 @@ export default defineComponent({
                 item
             })
 
-            return props.itemsFn === void 0
-                ? props.items
+            const itemsFn = props.itemsFn as Function
+            const items = props.items as Record<string, any>[]
+
+            return isDefined(itemsFn)
+                ? itemsFn(
+                      virtualScrollSliceRange.value.from,
+                      virtualScrollSliceRange.value.to -
+                          virtualScrollSliceRange.value.from
+                  ).map(mapFn)
+                : items
                       .slice(
                           virtualScrollSliceRange.value.from,
                           virtualScrollSliceRange.value.to
                       )
                       .map(mapFn)
-                : props
-                      .itemsFn(
-                          virtualScrollSliceRange.value.from,
-                          virtualScrollSliceRange.value.to -
-                              virtualScrollSliceRange.value.from
-                      )
-                      .map(mapFn)
         })
 
         const classes = computed(
@@ -143,11 +156,11 @@ export default defineComponent({
                 (props.virtualScrollHorizontal === true
                     ? '--horizontal'
                     : '--vertical') +
-                (props.scrollTarget !== void 0 ? '' : ' scroll')
+                (isDefined(props.scrollTarget) ? '' : ' scroll')
         )
 
         const attributes = computed(() =>
-            props.scrollTarget !== void 0 ? {} : { tabindex: 0 }
+            isDefined(props.scrollTarget) ? {} : { tabindex: 0 }
         )
 
         watch(virtualScrollLength, () => {
@@ -173,7 +186,7 @@ export default defineComponent({
         function configureScrollTarget() {
             localScrollTarget = getScrollTarget(
                 getVirtualScrollEl(),
-                props.scrollTarget
+                props.scrollTarget as any
             )
 
             localScrollTarget!.addEventListener(
@@ -184,13 +197,13 @@ export default defineComponent({
         }
 
         function unconfigureScrollTarget() {
-            if (localScrollTarget !== void 0) {
+            if (isDefined(localScrollTarget)) {
                 localScrollTarget.removeEventListener(
                     'scroll',
                     onVirtualScrollEvt,
                     listenOpts.passive
                 )
-                localScrollTarget = void 0
+                localScrollTarget = null
             }
         }
 
@@ -203,7 +216,7 @@ export default defineComponent({
                 create
             )
 
-            if (slots.before !== void 0) {
+            if (isDefined(slots.before)) {
                 child = slots.before().concat(child)
             }
 
@@ -245,6 +258,12 @@ export default defineComponent({
         }
     },
     render(createElement: Function) {
+        /**
+         * Had to do some general Typescript hackery here to get this to work in webpack based builder project.
+         * The original code is written in Vue 2, but this project is using Vue 3.
+         * Some of the types are not compatible, so I had to cast some of the types to any.
+         */
+
         const renderFn = isVue2 ? createElement : h
         const renderSlot = (fn: Function) => (isVue2 ? fn() : () => fn())
 
@@ -255,25 +274,36 @@ export default defineComponent({
             return
         }
 
-        return this.$props.type === '__dltable'
-            ? getTableMiddle(
-                  {
-                      ref: 'rootRef',
-                      class: 'dl-table__middle ' + this.classes
-                  },
-                  this.getVirtualChildren(renderFn),
-                  renderFn
-              )
-            : renderFn(
-                  this.tag,
-                  {
-                      ...this.attrs,
-                      ref: 'rootRef',
-                      class: [this.attrs.class, this.classes],
-                      ...this.attributes
-                  },
-                  renderSlot(() => this.getVirtualChildren(renderFn))
-              )
+        const isDlTable = (this.$props as any).type === '__dltable'
+        const getVirtualChildren = (this as any).getVirtualChildren as Function
+
+        if (isDlTable) {
+            return getTableMiddle(
+                {
+                    ref: 'rootRef',
+                    class: 'dl-table__middle ' + this.classes
+                },
+                getVirtualChildren(renderFn),
+                renderFn
+            )
+        }
+
+        const attrs = this.attrs as Record<string, any>
+        const attributes = this.attributes as Record<string, any>
+        const classes = this.classes as string // todo: does this have to be casted to an object?
+        const attributeClasses = attrs.class as Record<string, any>
+        const tag = this.tag as string
+
+        return renderFn(
+            tag,
+            {
+                ...attrs,
+                ref: 'rootRef',
+                class: [attributeClasses, classes],
+                ...attributes
+            },
+            renderSlot(() => getVirtualChildren(renderFn))
+        )
     }
 })
 </script>

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 }