@dataloop-ai/components 0.18.0 → 0.18.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.18.0",
+  "version": "0.18.2",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",
@@ -8,7 +8,7 @@
   },
   "scripts": {
     "dev": "vite",
-    "dev:2": "./misc/packAndRunV2.sh",
+    "dev:2": "./misc/unpackAndRunV2.sh",
     "build": "vue-tsc --noEmit --skipLibCheck && vite build",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
@@ -23,8 +23,11 @@
   },
   "dependencies": {
     "@dataloop-ai/icons": "^3.0.6",
+    "@types/flat": "^5.0.2",
     "@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",
@@ -73,7 +76,7 @@
     "storybook": "^7.0.4",
     "storybook-addon-themes": "^6.1.0",
     "typescript": "^4.5.4",
-    "vite": "^4.1.4",
+    "vite": "^4.2.3",
     "vitest": "^0.29.2",
     "vitest-canvas-mock": "^0.2.2",
     "vue": "^3.2.25",

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 - 18vh);
-                        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/constants.scss

@@ -19,7 +19,8 @@
     --dl-z-index-panel-container-elements: 3030; // collapse icon + separator
 
     --dl-z-index-overlay: 5000;
-
+    --dl-z-index-dialog: 5200;
+    --dl-z-index-popup: 5500;
     --dl-z-index-menu: 6000;
     --dl-z-index-tooltip: 9000;
 

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;
@@ -32,6 +33,19 @@ body {
     }
 }
 
+/* Inserting a collapsed row between two flex items will make 
+ * the flex item that comes after it break to a new row */
+.break {
+    flex-basis: 100%;
+    height: 0;
+}
+
+/* Use a collapsed column to break to a new column */
+.break-column {
+    flex-basis: 100%;
+    width: 0;
+}
+
 .scroll {
     overflow: auto;
 }
@@ -115,6 +129,9 @@ body {
 .full-width {
     width: 100%;
 }
+.full-height {
+    height: 100%;
+}
 
 
 :root {
@@ -129,6 +146,8 @@ body {
     --dl-font-size-h2: 20px;
     --dl-font-size-h3: 16px;
     --dl-font-size-h4: 14px;
+    --dl-font-size-h5: 12px;
+    --dl-font-size-h6: 10px;
     --dl-font-size-body: 12px;
     --dl-font-size-small: 10px;
 
@@ -160,6 +179,7 @@ body {
     --dl-color-fill-third: #FBFBFB;
     --dl-color-link: #20ABFA;
     --dl-color-cell-background: #FFFAE2;
+    --dl-color-disabled-slider: #E4E4E4;
     --q-color-positive: #38D079;
     --q-color-warning: #E1B75B;
 
@@ -213,6 +233,7 @@ body {
     --dl-color-fill-third: #9E9E9E1A;
     --dl-color-link: #53B2E8;
     --dl-color-cell-background: #FFFAE2;
+    --dl-color-disabled-slider: #64686D;
     --q-color-positive: #A1E5B6;
     --q-color-warning: #F8D29A;
 

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/DlAccordion/components/AccordionHeader.vue

@@ -43,7 +43,8 @@
 </template>
 
 <script lang="ts">
-import { DlIcon, DlTooltip } from '../../../essential'
+import { DlTooltip } from '../../../shared'
+import { DlIcon } from '../../../essential'
 import { defineComponent, ref } from 'vue-demi'
 import { getColor } from '../../../../utils'
 import { useSizeObserver } from '../../../../hooks/use-size-observer'

package/src/components/basic/DlAvatar/DlAvatar.vue

@@ -19,7 +19,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
-import { DlTooltip } from '../../essential'
+import { DlTooltip } from '../../shared'
 import { getColor } from '../../../utils'
 import { v4 } from 'uuid'