@dataloop-ai/components 0.17.134 → 0.18.1

package/src/components/basic/DlListItem/DlListItem.vue

@@ -1,71 +1,67 @@
 <template>
     <component
-        :is="as"
+        :is="type"
         :id="uuid"
         class="list-item-wrapper"
     >
-        <hr
-            class="separator"
-            :class="{ 'separator--visible': bordered }"
-        >
         <div
             v-wave="!disabled && withWave"
             :class="[
                 {
                     'dl-list-item': true,
-                    'dl-list-item-disabled': disabled,
-                    'dl-list-spaced': bordered
+                    'dl-list-item-disabled': disabled
                 },
                 'row'
             ]"
             :style="cssItemVars"
             @click="onClick"
         >
-            <dl-item-section
-                v-if="startIcon"
-                side
-                style="display: flex"
-            >
-                <dl-icon
-                    :icon="startIcon"
-                    :color="startIconColor"
-                    :size="startIconSize"
-                />
-            </dl-item-section>
+            <slot name="prefix">
+                <dl-item-section
+                    v-if="startIcon"
+                    side
+                    style="display: flex"
+                >
+                    <dl-icon
+                        :icon="startIconData.icon"
+                        :color="startIconData.color"
+                        :size="startIconData.size"
+                    />
+                </dl-item-section>
+            </slot>
             <slot />
-            <dl-item-section
-                v-if="endIcon"
-                side
-                style="display: flex"
-            >
-                <dl-icon
-                    :icon="endIcon"
-                    :color="endIconColor"
-                    :size="endIconSize"
-                />
-            </dl-item-section>
+            <slot name="suffix">
+                <dl-item-section
+                    v-if="endIcon"
+                    side
+                    style="display: flex"
+                >
+                    <dl-icon
+                        :icon="endIconData.icon"
+                        :color="endIconData.color"
+                        :size="endIconData.size"
+                    />
+                </dl-item-section>
+            </slot>
         </div>
+        <dl-separator v-if="separator" />
     </component>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue-demi'
+import { PropType, defineComponent } from 'vue-demi'
 import { DlItemSection } from '../../shared'
-import { DlIcon } from '../../essential'
-import {
-    itemHoverColor,
-    itemActiveColor,
-    itemCursor,
-    itemBorder,
-    itemColor
-} from './utils'
+import { DlIcon, DlSeparator } from '../../essential'
+import { itemHoverColor, itemActiveColor, itemCursor, itemColor } from './utils'
 import { wave, waveTrigger } from '../../../utils'
 import { v4 } from 'uuid'
+import { isObject } from 'lodash'
 
 export default defineComponent({
     name: 'DlListItem',
     components: {
         DlItemSection,
+        DlSeparator,
         DlIcon
     },
     directives: {
@@ -75,36 +71,58 @@ export default defineComponent({
     props: {
         disabled: Boolean,
         clickable: Boolean,
-        bordered: Boolean,
+        separator: Boolean,
         withWave: Boolean,
-        startIcon: { type: String, required: false, default: '' },
-        endIcon: { type: String, required: false, default: '' },
-        as: {
+        type: {
             type: String,
             default: 'div'
         },
-        startIconColor: {
-            type: String,
-            required: false,
-            default: 'dl-color-darker'
-        },
-        endIconColor: {
-            type: String,
-            required: false,
-            default: 'dl-color-darker'
-        },
-        startIconSize: {
-            type: String,
-            default: '16px'
-        },
-        endIconSize: {
-            type: String,
-            default: '16px'
-        },
         height: { type: String, default: null, required: false },
         padding: { type: String, default: null, required: false },
-        isHighlighted: {
+        highlighted: {
             type: Boolean
+        },
+        startIcon: {
+            type: [Object, String] as PropType<
+                | {
+                      icon: string
+                      color?: string
+                      size?: string
+                  }
+                | string
+            >,
+            default: null,
+            validator: (value: any) => {
+                if (value) {
+                    if (isObject(value) as any) {
+                        return value.icon && typeof value.icon === 'string'
+                    } else {
+                        return typeof value === 'string'
+                    }
+                }
+                return true
+            }
+        },
+        endIcon: {
+            type: [Object, String] as PropType<
+                | {
+                      icon: string
+                      color?: string
+                      size?: string
+                  }
+                | string
+            >,
+            default: null,
+            validator: (value: any) => {
+                if (value) {
+                    if (isObject(value) as any) {
+                        return value.icon && typeof value.icon === 'string'
+                    } else {
+                        return typeof value === 'string'
+                    }
+                }
+                return true
+            }
         }
     },
     emits: ['click'],
@@ -125,14 +143,27 @@ export default defineComponent({
                     this.isClickable,
                     this.disabled
                 ),
-                '--dl-list-item-border': itemBorder(this.bordered),
                 '--dl-list-item-color': itemColor(this.disabled),
                 '--dl-list-item-height': this.height ?? '28px',
                 '--dl-list-item-padding': this.padding ?? '0px 10px',
-                '--dl-list-item-bg-color': this.isHighlighted
+                '--dl-list-item-bg-color': this.highlighted
                     ? 'var(--dl-color-fill-hover)'
                     : 'transparent'
             }
+        },
+        startIconData(): { icon: string; color: string; size: string } {
+            return Object.assign(
+                { color: 'dl-color-darker', size: '16px' },
+                isObject(this.startIcon)
+                    ? this.startIcon
+                    : { icon: this.startIcon }
+            )
+        },
+        endIconData(): { icon: string; color: string; size: string } {
+            return Object.assign(
+                { color: 'dl-color-darker', size: '16px' },
+                isObject(this.endIcon) ? this.endIcon : { icon: this.endIcon }
+            )
         }
     },
     methods: {
@@ -148,6 +179,8 @@ export default defineComponent({
 <style scoped lang="scss">
 .list-item-wrapper {
     width: 100%;
+    border-left: var(--dl-list-item-border-left);
+    margin-bottom: 4px;
 }
 
 .dl-list-item {

package/src/components/basic/DlListItem/utils.ts

@@ -7,8 +7,5 @@ export const itemActiveColor = (isActionable: boolean) =>
 export const itemCursor = (actionable: boolean, disabled: boolean) =>
     actionable ? 'pointer' : disabled ? 'not-allowed' : 'cursor'
 
-export const itemBorder = (bordered: boolean) =>
-    bordered ? `1px solid var(--dl-color-separator)` : '0px'
-
 export const itemColor = (disabled: boolean) =>
     disabled ? 'var(--dl-color-disabled)' : 'var(--dl-color-darker)'

package/src/components/basic/DlPanelContainer/DlPanelContainer.vue

@@ -79,10 +79,10 @@
                     :style="glutterStyles"
                 />
             </div>
-            <div
-                v-if="hasHeader === true"
-                class="header"
-                :style="headerStyles"
+            <div
+                v-if="hasHeader === true && !isEmpty"
+                class="header"
+                :style="headerStyles"
             >
                 <div class="overflow-hidden">
                     <slot name="header" />
@@ -93,12 +93,26 @@
                 :style="contentStyle"
             >
                 <div class="column" />
-                <slot />
+                <dl-empty-state
+                    v-if="isEmpty"
+                    v-bind="emptyStateProps"
+                >
+                    <template
+                        v-for="(_, slot) in $slots"
+                        #[slot]="props"
+                    >
+                        <slot
+                            :name="slot"
+                            v-bind="props"
+                        />
+                    </template>
+                </dl-empty-state>
+                <slot v-if="!isEmpty" />
             </div>
-            <div
-                v-if="hasFooter === true"
-                class="footer"
-                :style="footerStyles"
+            <div
+                v-if="hasFooter === true && !isEmpty"
+                class="footer"
+                :style="footerStyles"
             >
                 <div class="overflow-hidden">
                     <slot name="footer" />
@@ -110,15 +124,19 @@
 
 <script lang="ts">
 import { v4 } from 'uuid'
-import { defineComponent } from 'vue-demi'
+import { defineComponent, PropType } from 'vue-demi'
 import { DlIcon } from '../../essential'
 import { DlTooltip } from '../../shared'
+import { DlEmptyStateProps } from '../DlEmptyState/types'
+// todo: this will cause issues
+import DlEmptyState from '../DlEmptyState/DlEmptyState.vue'
 
 export default defineComponent({
     name: 'DlPanelContainer',
     components: {
         DlIcon,
-        DlTooltip
+        DlTooltip,
+        DlEmptyState
     },
     model: {
         prop: 'modelValue',
@@ -159,7 +177,12 @@ export default defineComponent({
             type: String,
             default: '70px'
         },
-        modelValue: { type: Boolean, required: false, default: false }
+        modelValue: { type: Boolean, required: false, default: false },
+        isEmpty: Boolean,
+        emptyStateProps: {
+            type: Object as PropType<DlEmptyStateProps>,
+            default: null
+        }
     },
     emits: ['update:model-value'],
     data() {

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

@@ -43,7 +43,21 @@
                     </template>
                 </popup-header>
                 <div class="popup-content">
-                    <slot />
+                    <slot v-if="!isEmpty" />
+                    <dl-empty-state
+                        v-if="isEmpty"
+                        v-bind="emptyStateProps"
+                    >
+                        <template
+                            v-for="(_, slot) in $slots"
+                            #[slot]="props"
+                        >
+                            <slot
+                                :name="slot"
+                                v-bind="props"
+                            />
+                        </template>
+                    </dl-empty-state>
                 </div>
                 <div
                     v-if="hasFooterSlot"
@@ -115,14 +129,17 @@ import DraggableUpper from './components/DraggableUpper.vue'
 import PopupHeader from './components/PopupHeader.vue'
 import { v4 } from 'uuid'
 import { isString } from 'lodash'
+import { DlEmptyStateProps } from '../DlEmptyState/types'
 import { stringStyleToRecord } from '../../../utils'
+import DlEmptyState from '../DlEmptyState/DlEmptyState.vue'
 
 export default defineComponent({
     name: 'DlPopup',
     components: {
         DlTeleport,
         PopupHeader,
-        DraggableUpper
+        DraggableUpper,
+        DlEmptyState
     },
     model: {
         prop: 'modelValue',
@@ -160,7 +177,7 @@ export default defineComponent({
         },
         scrollTarget: {
             type: String as PropType<Element | string>,
-            default: void 0
+            default: null
         },
         touchPosition: Boolean,
         maxHeight: { type: String, default: 'auto' },
@@ -168,6 +185,11 @@ export default defineComponent({
         height: { type: String, default: 'auto' },
         width: { type: String, default: 'auto' },
         draggable: Boolean,
+        isEmpty: Boolean,
+        emptyStateProps: {
+            type: Object as PropType<DlEmptyStateProps>,
+            default: () => ({} as DlEmptyStateProps)
+        },
         zIndex: {
             type: [Number, String],
             default: 'var(--dl-z-index-popup)'
@@ -291,7 +313,7 @@ export default defineComponent({
 
             showPortal()
 
-            absoluteOffset = void 0
+            absoluteOffset = null
 
             const offsetOnShow = setOffsetOnShow(evt as TouchEvent, {
                 contextMenu: props.contextMenu,
@@ -302,7 +324,7 @@ export default defineComponent({
 
             absoluteOffset = offsetOnShow as Record<any, any> | undefined
 
-            if (unwatchPosition === void 0) {
+            if (!unwatchPosition) {
                 unwatchPosition = watch(() => screen, updatePosition, {
                     deep: true
                 })
@@ -337,7 +359,7 @@ export default defineComponent({
         }
 
         function anchorCleanup(hiding: boolean) {
-            absoluteOffset = void 0
+            absoluteOffset = null
 
             unwatchPosition = updateUnwatchPosition(unwatchPosition)
 
@@ -353,7 +375,7 @@ export default defineComponent({
         }
 
         function configureScrollTarget() {
-            if (anchorEl.value !== null || props.scrollTarget !== void 0) {
+            if (anchorEl.value !== null || props.scrollTarget) {
                 (localScrollTarget as Ref<any>).value = getScrollTarget(
                     anchorEl.value as HTMLElement,
                     props.scrollTarget

package/src/components/basic/DlWidget/DlWidget.vue

@@ -28,10 +28,30 @@
                 </div>
 
                 <div class="dl-widget__content">
-                    <slot name="content" />
+                    <dl-empty-state
+                        v-if="isEmpty"
+                        v-bind="emptyStateProps"
+                    >
+                        <template
+                            v-for="(_, slot) in $slots"
+                            #[slot]="props"
+                        >
+                            <slot
+                                :name="slot"
+                                v-bind="props"
+                            />
+                        </template>
+                    </dl-empty-state>
+                    <slot
+                        v-if="!isEmpty"
+                        name="content"
+                    />
                 </div>
 
-                <div class="dl-widget__description">
+                <div
+                    v-if="!isEmpty"
+                    class="dl-widget__description"
+                >
                     <slot name="description" />
                 </div>
             </slot>
@@ -44,16 +64,24 @@
 </template>
 <script lang="ts">
 import { v4 } from 'uuid'
-import { computed, defineComponent, ref, toRef } from 'vue-demi'
+import { computed, defineComponent, ref, toRef, PropType } from 'vue-demi'
 import { DlIcon } from '../../essential'
 import { getElementAbove, addMouseEnter, removeMouseEnter } from './utils'
+import { DlEmptyStateProps } from '../DlEmptyState/types'
+import DlEmptyState from '../DlEmptyState/DlEmptyState.vue'
 
 export default defineComponent({
     name: 'DlWidget',
     components: {
-        DlIcon
+        DlIcon,
+        DlEmptyState
     },
     props: {
+        isEmpty: Boolean,
+        emptyStateProps: {
+            type: Object as PropType<DlEmptyStateProps>,
+            default: null
+        },
         draggable: {
             type: Boolean,
             default: true

package/src/components/basic/index.ts

@@ -9,7 +9,8 @@ export * from './DlWidget'
 export * from './DlPopup'
 export * from './DlPanelContainer'
 export * from './DlProgressChart'
-export * from './DlCard'
+export * from './DlEmptyState'
 export * from './DlGrid'
 export * from './DlMarkupTable'
 export * from './DlContainer'
+export * from './DlEmptyState'

package/src/components/basic/types.ts

@@ -6,3 +6,5 @@ export type { DlChipProps, DlButtonProps }
 export * from './DlKpi/types'
 export * from './DlWidget/types'
 export * from './DlButton/types'
+export * from './DlGrid/types'
+export * from './DlEmptyState/types'