@dataloop-ai/components 0.17.134 → 0.18.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.17.134",
+  "version": "0.18.1",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",
@@ -27,10 +27,12 @@
     "@types/lodash": "^4.14.184",
     "chart.js": "^3.9.1",
     "flat": "^5.0.2",
+    "highlight.js": "^11.8.0",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "sass": "^1.51.0",
     "sass-loader": "^12.6.0",
+    "simple-code-editor": "^2.0.8",
     "uuid": "^8.3.2",
     "v-wave": "^1.5.0",
     "vanilla-jsoneditor": "^0.10.2",

package/src/App.vue

@@ -1,242 +1,20 @@
 <template>
-    <DlThemeProvider :is-dark="darkMode">
-        <div
-            style="display: flex; width: 100%; align-items: center; align-content; center;"
-        >
-            <dl-typography
-                color="dl-color-medium"
-                variant="p"
-                style="margin: 10px 0px 20px 0px; width: 90%"
-            >
-                <div
-                    style="
-                        background-image: url(https://dataloop.ai/wp-content/uploads/2020/03/logo.svg);
-                        width: 160px;
-                        height: 28px;
-                        display: inline-block;
-                    "
-                />
-                Components library
-            </dl-typography>
-            <div style="display: flex; align-items: center">
-                <dl-icon
-                    icon="icon-dl-light-theme"
-                    size="24px"
-                    :color="
-                        !darkMode ? 'dl-color-secondary' : 'dl-color-darker'
-                    "
-                />
-                <dl-switch
-                    v-model="darkMode"
-                    style="margin: 0 20px"
-                />
-                <dl-icon
-                    icon="icon-dl-dark-theme"
-                    size="20px"
-                    :color="darkMode ? 'dl-color-secondary' : 'dl-color-darker'"
-                />
-            </div>
-        </div>
-        <div class="layout-wrapper">
-            <div class="sidebar">
-                <dl-search
-                    v-model="filterTerm"
-                    style="margin-bottom: 5px"
-                />
-
-                <dl-button
-                    v-if="activeDemo"
-                    outlined
-                >
-                    <span style="text-transform: capitalize">
-                        Selected: {{ computeDemoName(activeDemo.name) }}
-                    </span>
-                </dl-button>
-                <dl-list
-                    bordered
-                    clickable
-                    style="
-                        margin-top: 15px;
-                        min-width: 200px;
-                        height: 100%;
-                        height: calc(100vh - 20vh);
-                        overflow: auto;
-                    "
-                >
-                    <template #default="{ clickable }">
-                        <dl-list-item
-                            v-for="(demo, index) in filteredDemos"
-                            :key="demo.name"
-                            :bordered="index !== 0"
-                            :clickable="clickable"
-                            :class="isSelectedDemo(demo) ? 'selected' : ''"
-                            style="text-transform: capitalize"
-                            @click="setActiveDemo(demo)"
-                        >
-                            {{ computeDemoName(demo.name) }}
-                        </dl-list-item>
-                    </template>
-                </dl-list>
-            </div>
-            <div class="content">
-                <div style="display: flex; justify-content: center">
-                    <dl-typography
-                        size="h2"
-                        variant="h2"
-                        style="text-transform: capitalize"
-                    >
-                        {{
-                            activeDemo
-                                ? computeDemoName(activeDemo.name)
-                                : 'No selected'
-                        }}
-                        component
-                    </dl-typography>
-                </div>
-                <component
-                    :is="activeDemo.component"
-                    v-if="activeDemo"
-                    class="data-container"
-                />
-            </div>
-        </div>
-    </DlThemeProvider>
+    <DlDemoPage :is-dark="isDark" />
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed, shallowRef } from 'vue-demi'
-import {
-    DlThemeProvider,
-    DlButton,
-    DlListItem,
-    DlList,
-    DlTypography,
-    DlSearch,
-    DlSwitch,
-    DlIcon
-} from './components'
-import Demos from './demos'
+import { defineComponent } from 'vue-demi'
+import { DlDemoPage } from './demos'
 
 export default defineComponent({
     name: 'DlComponentsDemo',
     components: {
-        DlThemeProvider,
-        DlButton,
-        DlListItem,
-        DlList,
-        DlTypography,
-        DlSearch,
-        DlSwitch,
-        DlIcon
+        DlDemoPage
     },
     props: {
         isDark: { required: false, default: false, type: Boolean }
-    },
-    setup(props) {
-        const darkMode = ref(props.isDark)
-        const filterTerm = ref('')
-        const names = Object.keys(Demos)
-        const demos: {
-            name: string
-            component: any
-        }[] = names.map((n: string) => ({
-            name: n,
-            // @ts-ignore
-            component: Demos[n]
-        }))
-
-        const filteredDemos = computed(() => {
-            if (!filterTerm.value || !filterTerm.value.length) {
-                return demos
-            }
-
-            return demos.filter((demo: { name: string; component: any }) => {
-                return demo.name
-                    .toLowerCase()
-                    .includes(filterTerm.value.toLowerCase())
-            })
-        })
-
-        const activeDemo = shallowRef(
-            window.localStorage.getItem('dl-active-demo')
-                ? demos.find(
-                      (d) =>
-                          d.name ===
-                          window.localStorage.getItem('dl-active-demo')
-                  ) ?? null
-                : null
-        )
-
-        const setActiveDemo = (demo: { name: string; component: any }) => {
-            activeDemo.value = demo
-            filterTerm.value = ''
-            window.localStorage.setItem('dl-active-demo', demo.name)
-        }
-
-        const computeDemoName = (name: string) => {
-            return name.includes('Dl')
-                ? name.split('Demo')[0]
-                : 'Dl' + name.split('Demo')[0]
-        }
-
-        const isSelectedDemo = (demo: { name: string; component: any }) => {
-            return activeDemo.value?.name === demo.name
-        }
-
-        return {
-            darkMode,
-            activeDemo,
-            setActiveDemo,
-            filterTerm,
-            filteredDemos,
-            computeDemoName,
-            isSelectedDemo
-        }
     }
 })
 </script>
 
-<style scoped lang="scss">
-#app {
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-align: center;
-    color: #2c3e50;
-}
-
-.layout-wrapper {
-    display: flex;
-}
-
-.sidebar {
-    display: flex;
-    flex-direction: column;
-}
-
-.content {
-    padding: 20px 30px;
-    flex-grow: 1;
-}
-
-.data-container {
-    display: flex;
-    gap: 1rem;
-    align-items: center;
-    max-width: 100%;
-    overflow: auto;
-    padding: 20px;
-    margin: 0 auto;
-    flex-direction: column;
-    justify-content: center;
-    width: 950px;
-    resize: both;
-    box-shadow: var(--dl-menu-shadow);
-}
-
-.selected {
-    ::v-deep .row {
-        color: var(--dl-color-secondary) !important;
-        background-color: var(--dl-color-fill);
-    }
-}
-</style>
+<style scoped lang="scss"></style>

package/src/assets/globals.scss

@@ -1,6 +1,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
 @import 'constants';
 
+
 body {
     font-family: 'Roboto', sans-serif;
     font-weight: 400;
@@ -128,6 +129,9 @@ body {
 .full-width {
     width: 100%;
 }
+.full-height {
+    height: 100%;
+}
 
 
 :root {

package/src/components/basic/DlAccordion/DlAccordion.vue

@@ -27,20 +27,37 @@
             class="accordion-content"
             :class="{ closed: !isOpen, 'right-side': rightSide }"
         >
-            <slot v-if="isOpen" />
+            <slot v-if="isOpen && !isEmpty" />
+            <dl-empty-state
+                v-if="isOpen && isEmpty"
+                v-bind="emptyStateProps"
+            >
+                <template
+                    v-for="(_, slot) in $slots"
+                    #[slot]="props"
+                >
+                    <slot
+                        :name="slot"
+                        v-bind="props"
+                    />
+                </template>
+            </dl-empty-state>
         </div>
     </div>
 </template>
 
 <script lang="ts">
 import DlAccordionHeader from './components/AccordionHeader.vue'
-import { defineComponent } from 'vue-demi'
+import DlEmptyState from '../DlEmptyState/DlEmptyState.vue'
+import { DlEmptyStateProps } from '../DlEmptyState/types'
+import { defineComponent, PropType } from 'vue-demi'
 import { v4 } from 'uuid'
 
 export default defineComponent({
     name: 'DlAccordion',
     components: {
-        DlAccordionHeader
+        DlAccordionHeader,
+        DlEmptyState
     },
     model: {
         prop: 'modelValue',
@@ -53,7 +70,12 @@ export default defineComponent({
         fontSize: { type: String, default: '12px' },
         titleColor: { type: String, default: 'dl-color-medium' },
         modelValue: { type: Boolean, default: null },
-        rightSide: { type: Boolean, default: false }
+        rightSide: { type: Boolean, default: false },
+        isEmpty: Boolean,
+        emptyStateProps: {
+            type: Object as PropType<DlEmptyStateProps>,
+            default: null
+        }
     },
     emits: ['update:model-value', 'hide', 'show'],
     data() {

package/src/components/basic/DlButton/DlButton.vue

@@ -214,11 +214,7 @@ export default defineComponent({
             return setIconSize(this.$props.size)
         },
         hasLabel(): boolean {
-            return (
-                this.label !== void 0 &&
-                this.label !== null &&
-                this.label !== ''
-            )
+            return !!this.label
         },
         buttonLabel(): string {
             return textTransform(this.label)
@@ -381,7 +377,7 @@ export default defineComponent({
         },
         onMouseDown(e: Event) {
             if (this.isActionable) {
-                if (e !== void 0) {
+                if (e) {
                     if (e.defaultPrevented === true) {
                         return
                     }

package/src/components/basic/DlChip/DlChip.vue

@@ -107,11 +107,7 @@ export default defineComponent({
     },
     computed: {
         hasLabel(): boolean {
-            return (
-                this.label !== void 0 &&
-                this.label !== null &&
-                this.label !== ''
-            )
+            return !!this.label
         },
         hasLabelSlot(): boolean {
             return !!this.$slots['default']

package/src/components/basic/DlEmptyState/DlEmptyState.vue

@@ -0,0 +1,282 @@
+<template>
+    <div
+        :id="uuid"
+        ref="dlEtaRef"
+        :style="cssVars"
+        :class="[{ 'empty-state': true }, `empty-state--${align}`]"
+    >
+        <dl-icon
+            :class="iconClassName"
+            :color="iconColor"
+            :size="iconFontSize"
+            :icon="icon"
+        />
+
+        <dl-typography
+            v-if="title"
+            bold
+            :size="titleFontSize"
+            :color="titleColor"
+            :class="titleClassName"
+        >
+            {{ title }}
+        </dl-typography>
+
+        <dl-typography
+            v-if="subtitle"
+            :size="subtitleFontSize"
+            :color="subtitleColor"
+            :class="subtitleClassName"
+        >
+            {{ subtitle }}
+        </dl-typography>
+
+        <div
+            v-if="hasCTASlot"
+            class="empty-state--cta"
+        >
+            <slot name="cta" />
+        </div>
+
+        <dl-typography
+            v-if="info"
+            :size="infoFontSize"
+            :color="infoColor"
+            class="empty-state--info"
+        >
+            {{ info }}
+        </dl-typography>
+
+        <div
+            v-if="hasLinkSlot"
+            class="empty-state--links"
+        >
+            <slot name="links" />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { v4 } from 'uuid'
+import { DlIcon, DlTypography } from '../../essential'
+import { useSizeObserver } from '../../../hooks/use-size-observer'
+import { defineComponent, computed, ref } from 'vue-demi'
+
+export default defineComponent({
+    name: 'DlEmptyState',
+    components: {
+        DlIcon,
+        DlTypography
+    },
+    props: {
+        bgImage: {
+            type: String,
+            default: null
+        },
+        bgSize: {
+            type: String,
+            default: '240px'
+        },
+        title: {
+            type: String,
+            default: 'Something Went Wrong'
+        },
+        titleColor: {
+            type: String,
+            default: 'dl-color-darker'
+        },
+        titleSize: {
+            type: String,
+            default: '20px'
+        },
+        subtitle: {
+            type: String,
+            default: ''
+        },
+        subtitleSize: {
+            type: String,
+            default: '14px'
+        },
+        subtitleColor: {
+            type: String,
+            default: 'dl-color-medium'
+        },
+        info: {
+            type: String,
+            default: ''
+        },
+        infoColor: {
+            type: String,
+            default: 'dl-color-darker'
+        },
+        infoSize: {
+            type: String,
+            default: '14px'
+        },
+        icon: {
+            type: String,
+            default: 'icon-dl-alert-filled'
+        },
+        iconSize: {
+            type: String,
+            default: '40px'
+        },
+        iconColor: {
+            type: String,
+            default: 'dl-color-darker'
+        },
+        responsive: Boolean,
+        align: {
+            type: String,
+            default: 'center'
+        }
+    },
+    setup(props, { slots }) {
+        const uuid = ref(`dl-empty-state-${v4()}`)
+
+        const dlEtaRef = ref(null)
+
+        const { widthRef, heightRef } = useSizeObserver(dlEtaRef)
+
+        const metric = computed(() => {
+            return widthRef.value > heightRef.value
+                ? widthRef.value
+                : heightRef.value
+        })
+
+        const fontSize = (value: number) => metric.value * (value / 365)
+
+        const titleFontSize = computed(() =>
+            props.responsive
+                ? fontSize(parseInt(props.titleSize)) + 'px'
+                : props.titleSize
+        )
+
+        const infoFontSize = computed(() =>
+            props.responsive
+                ? fontSize(parseInt(props.infoSize)) + 'px'
+                : props.infoSize
+        )
+
+        const iconFontSize = computed(() =>
+            props.responsive
+                ? fontSize(parseInt(props.iconSize)) + 'px'
+                : props.iconSize
+        )
+
+        const subtitleFontSize = computed(() =>
+            props.responsive
+                ? fontSize(parseInt(props.subtitleSize)) + 'px'
+                : props.subtitleSize
+        )
+
+        const bgImageSize = computed(() =>
+            props.responsive
+                ? fontSize(parseInt(props.bgSize)) + 'px'
+                : props.bgSize
+        )
+
+        const hasCTASlot = !!slots['cta']
+
+        const hasLinkSlot = !!slots['links']
+
+        const iconClassName = computed(() => {
+            const classname = 'empty-state--icon'
+
+            return classname
+        })
+
+        const titleClassName = computed(() => {
+            const classname = 'empty-state--title'
+
+            return classname
+        })
+
+        const subtitleClassName = computed(() => {
+            const classname = 'empty-state--subtitle'
+
+            return classname
+        })
+
+        const infoClassName = computed(() => {
+            const classname = 'empty-state--info'
+
+            return classname
+        })
+
+        const cssVars = computed(() => {
+            return {
+                '--bg-image': props.bgImage,
+                '--bg-size': bgImageSize.value
+            }
+        })
+
+        return {
+            uuid,
+            cssVars,
+            iconClassName,
+            titleClassName,
+            infoClassName,
+            subtitleClassName,
+            hasCTASlot,
+            hasLinkSlot,
+            dlEtaRef,
+            titleFontSize,
+            subtitleFontSize,
+            infoFontSize,
+            iconFontSize
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.empty-state {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+
+    background-image: var(--bg-image);
+    background-size: var(--bg-size);
+
+    &--title {
+        line-height: 24px;
+        margin-bottom: 2px;
+    }
+
+    &--subtitle,
+    &--cta,
+    &--links,
+    &--info {
+        margin-bottom: 20px;
+    }
+
+    &--nowrap {
+        white-space: nowrap;
+    }
+
+    &--icon {
+        margin-bottom: 10px;
+    }
+
+    &--center,
+    &--left {
+        display: flex;
+        width: 100%;
+    }
+
+    &--center {
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+    }
+
+    &--left {
+        align-items: flex-start;
+        text-align: start;
+    }
+}
+</style>

package/src/components/basic/DlEmptyState/index.ts

@@ -0,0 +1,2 @@
+import DlEmptyState from './DlEmptyState.vue'
+export { DlEmptyState }

package/src/components/basic/DlEmptyState/types.ts

@@ -0,0 +1,20 @@
+export type DlEmptyStateProps = {
+    bgImage?: string
+    bgSize?: string
+    title?: string
+    titleColor?: string
+    titleSize?: string
+    subtitle?: string
+    subtitleSize?: string
+    subtitleColor?: string
+    info?: string
+    infoColor?: string
+    infoSize?: string
+    icon?: string
+    iconSize?: string
+    iconColor?: string
+    responsive?: boolean
+    align: 'center' | 'left'
+}
+
+export type DlEmptyStateSlots = ['cta', 'links']