@dataloop-ai/components 0.18.0 → 0.18.2

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

@@ -1,69 +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
-            >
-                <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
-            >
-                <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: {
@@ -73,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'],
@@ -123,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: {
@@ -146,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 {
@@ -194,14 +229,9 @@ export default defineComponent({
     display: none;
     &--visible {
         display: block;
-        margin: 5px 0;
     }
 }
 
-.dl-list-spaced {
-    margin: 5px 0;
-}
-
 .dl-list-item-disabled {
     color: var(--dl-color-disabled) !important;
     & > div > i::before {

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,14 +124,19 @@
 
 <script lang="ts">
 import { v4 } from 'uuid'
-import { defineComponent } from 'vue-demi'
-import { DlIcon, DlTooltip } from '../../essential'
+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',
@@ -158,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,14 +177,23 @@ export default defineComponent({
         },
         scrollTarget: {
             type: String as PropType<Element | string>,
-            default: void 0
+            default: null
         },
         touchPosition: Boolean,
         maxHeight: { type: String, default: 'auto' },
         maxWidth: { type: String, default: 'auto' },
         height: { type: String, default: 'auto' },
         width: { type: String, default: 'auto' },
-        draggable: Boolean
+        draggable: Boolean,
+        isEmpty: Boolean,
+        emptyStateProps: {
+            type: Object as PropType<DlEmptyStateProps>,
+            default: () => ({} as DlEmptyStateProps)
+        },
+        zIndex: {
+            type: [Number, String],
+            default: 'var(--dl-z-index-popup)'
+        }
     },
     emits: [
         'close-button-click',
@@ -254,7 +280,8 @@ export default defineComponent({
                 '--popup-max-width': props.maxWidth,
                 '--popup-max-height': props.maxHeight,
                 '--popup-width': props.width,
-                '--popup-height': props.height
+                '--popup-height': props.height,
+                '--popup-z-index': props.zIndex ?? 'var(--dl-z-index-popup)'
             }
         })
 
@@ -286,7 +313,7 @@ export default defineComponent({
 
             showPortal()
 
-            absoluteOffset = void 0
+            absoluteOffset = null
 
             const offsetOnShow = setOffsetOnShow(evt as TouchEvent, {
                 contextMenu: props.contextMenu,
@@ -297,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
                 })
@@ -332,7 +359,7 @@ export default defineComponent({
         }
 
         function anchorCleanup(hiding: boolean) {
-            absoluteOffset = void 0
+            absoluteOffset = null
 
             unwatchPosition = updateUnwatchPosition(unwatchPosition)
 
@@ -348,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
@@ -462,9 +489,9 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .dl-popup {
-    z-index: calc(var(--dl-z-index-menu) - 1);
+    z-index: var(--popup-z-index);
     position: fixed !important;
-    padding: 0 0 16px;
+    padding: var(--dl-popup-padding, 10px 0 16px 0);
     border: 1px solid var(--dl-color-separator);
     display: flex;
     background-color: var(--dl-color-panel-background);
@@ -481,9 +508,29 @@ export default defineComponent({
 .popup-content {
     max-width: 100%;
     padding: 0 16px;
+    height: 100%;
 }
 
 .popup-footer {
     padding: 20px 16px 0px;
 }
+
+// Fade Related transition
+.fade-enter,
+.fade-enter-active {
+    animation: fade-in var(--dl-transition-duration);
+}
+
+.fade-leave-active,
+.fade-leave-to {
+    animation: fade-in var(--dl-transition-duration) reverse;
+}
+@keyframes fade-in {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
 </style>

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

@@ -12,7 +12,7 @@
             class="header-content"
         >
             <span class="title">
-                {{ title }}
+                <dl-ellipsis :text="title" />
                 <span class="info-icon">
                     <dl-icon
                         v-if="hasAdditionalInfo"
@@ -38,22 +38,26 @@
                     v-else
                     color="dl-color-darker"
                     icon="icon-dl-close"
-                    size="8px"
+                    size="12px"
                 />
             </span>
-            <span class="subtitle">{{ subtitle }}</span>
+            <span class="subtitle">
+                <dl-ellipsis :text="subtitle" />
+            </span>
         </div>
     </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
-import { DlTooltip, DlIcon } from '../../../essential'
+import { DlIcon, DlEllipsis } from '../../../essential'
+import { DlTooltip } from '../../../shared'
 
 export default defineComponent({
     components: {
         DlIcon,
-        DlTooltip
+        DlTooltip,
+        DlEllipsis
     },
     props: {
         title: { type: String, default: '' },
@@ -91,7 +95,7 @@ export default defineComponent({
 <style scoped lang="scss">
 .popup-header {
     max-width: 100%;
-    padding: 0 10px 20px 16px;
+    padding: 16px 10px 20px 16px;
 }
 
 .header-content {
@@ -111,6 +115,7 @@ export default defineComponent({
     display: flex;
     justify-content: center;
     align-items: center;
+    margin-top: 4px;
     cursor: pointer;
     transition: color 200ms;
     &:hover {

package/src/components/basic/DlProgressChart/DlProgressChart.vue

@@ -78,7 +78,8 @@ import { v4 } from 'uuid'
 import { defineComponent, isVue2 } from 'vue-demi'
 import { getColor } from '../../../utils'
 import { isEllipsisActive } from '../../../utils/is-ellipsis-active'
-import { DlTooltip, DlLink } from '../../essential'
+import { DlLink } from '../../essential'
+import { DlTooltip } from '../../shared'
 
 type ProgressChartOption = {
     name: string