@dataloop-ai/components 0.18.0 → 0.18.2

package/src/demos/DlVirtualScrollDemo.vue

@@ -4,9 +4,6 @@
             <dl-virtual-scroll
                 v-slot="{ item: row, index }"
                 type="table"
-                :virtual-scroll-item-size="48"
-                :virtual-scroll-sticky-size-start="48"
-                :virtual-scroll-sticky-size-end="32"
                 :items="heavyList"
                 style="height: 500px"
                 @virtual-scroll="log"
@@ -27,9 +24,6 @@
             <dl-virtual-scroll
                 v-slot="{ item, index }"
                 style="max-width: 500px"
-                :virtual-scroll-item-size="48"
-                :virtual-scroll-sticky-size-start="48"
-                :virtual-scroll-sticky-size-end="32"
                 :items="horizontalList"
                 virtual-scroll-horizontal
             >
@@ -47,9 +41,6 @@
                 v-slot="{ item, index }"
                 style="height: 300px"
                 :items="basicList"
-                :virtual-scroll-item-size="28"
-                :virtual-scroll-sticky-size-start="28"
-                :virtual-scroll-sticky-size-end="20"
                 separator
                 @virtual-scroll="log"
             >
@@ -69,9 +60,9 @@
             <dl-virtual-scroll
                 style="height: 300px; gap: 20px"
                 :items="customList"
-                :virtual-scroll-item-size="293"
-                :virtual-scroll-sticky-size-start="293"
-                :virtual-scroll-sticky-size-end="200"
+                :virtual-scroll-item-size="295"
+                :virtual-scroll-sticky-size-start="20"
+                :virtual-scroll-sticky-size-end="20"
                 separator
                 @virtual-scroll="log"
             >

package/src/demos/DlWidgetDemo.vue

@@ -1,11 +1,183 @@
+<template>
+    <div>
+        <div class="options">
+            <div class="select-layout">
+                <select
+                    class="select-layout__input"
+                    @change="selectLayout"
+                >
+                    <option
+                        v-for="(layoutItem, layoutIndex) in layouts"
+                        :key="layoutIndex"
+                        :value="layoutIndex"
+                    >
+                        {{ layoutItem.name }}
+                    </option>
+                </select>
+                <button
+                    class="select-layout__button"
+                    @mousedown="saveLayout"
+                >
+                    Save
+                </button>
+                <span class="select-layout__info">{{ hasBeenSaved }}</span>
+            </div>
+            <div class="widgets-per-row">
+                <span class="widgets-per-row__label"> Widgets per row: </span>
+                <input
+                    v-model="widgetsPerRow"
+                    class="widgets-per-row__input"
+                    type="number"
+                >
+            </div>
+        </div>
+        <dl-grid
+            v-model="layout"
+            :max-elements-per-row="widgetsPerRow"
+        >
+            <dl-widget>
+                <template #header>
+                    <span>Widget 1</span>
+                    <span style="font-size: 12px; color: var(--dl-color-medium)">Subtitle</span>
+                </template>
+                <template #content>
+                    <dl-bar-chart
+                        :data="data"
+                        :items-in-view="8"
+                    />
+                </template>
+                <template #menu>
+                    <div class="menu-icons">
+                        <dl-icon
+                            size="m"
+                            icon="icon-dl-settings"
+                        />
+                        <dl-icon
+                            size="m"
+                            icon="icon-dl-download"
+                        />
+                    </div>
+                </template>
+                <template #description>
+                    <span>Lorem ipsum dolor sit amet consectetur adipisicing
+                        elit. Libero eligendi dolore, similique possimus
+                        veritatis in vitae quia praesentium fuga quibusdam
+                        autem. Doloremque tenetur repudiandae a cupiditate modi
+                        dicta eveniet veritatis?</span>
+                </template>
+            </dl-widget>
+
+            <dl-widget>
+                <template #header>
+                    <span>Widget 2</span>
+                </template>
+                <template #content>
+                    <dl-bar-chart
+                        :data="data"
+                        :items-in-view="6"
+                    />
+                </template>
+            </dl-widget>
+
+            <dl-widget>
+                <template #header>
+                    <span>Widget 3</span>
+                </template>
+                <template #content>
+                    <dl-bar-chart
+                        :data="data"
+                        :items-in-view="6"
+                    />
+                </template>
+            </dl-widget>
+
+            <dl-widget>
+                <template #header>
+                    <span>Widget 4</span>
+                    <span style="font-size: 12px; color: gray">Subtitle</span>
+                </template>
+                <template #content>
+                    <dl-bar-chart
+                        :data="data"
+                        :items-in-view="8"
+                    />
+                </template>
+                <template #description>
+                    <span>Lorem ipsum dolor sit amet consectetur adipisicing
+                        elit. Libero eligendi dolore, similique possimus
+                        veritatis in vitae quia praesentium fuga quibusdam
+                        autem. Doloremque tenetur repudiandae a cupiditate modi
+                        dicta eveniet veritatis?</span>
+                </template>
+            </dl-widget>
+
+            <dl-widget>
+                <template #header>
+                    <span>Widget 5</span>
+                </template>
+                <template #content>
+                    <dl-bar-chart
+                        :data="data"
+                        :items-in-view="6"
+                    />
+                </template>
+            </dl-widget>
+
+            <dl-widget
+                is-empty
+                :empty-state-props="{
+                    responsive: true,
+                    style: 'min-height: 350px;',
+                    bgSize: '130px',
+                    bgImage: `url(https://raw.githubusercontent.com/dataloop-ai/icons/main/assets/usage.svg)`,
+                    title: 'Lorem ipsum',
+                    subtitle:
+                        'Lorem ipsum dolor sit amet consectetur. Senectus condimentum dolor sit',
+                    info: 'To learn more about this analytics, read our documentation.'
+                }"
+            >
+                <template #header>
+                    <span>Widget 5</span>
+                </template>
+                <template #links="">
+                    <div style="display: flex; gap: 5px; padding: 0 20px">
+                        <dl-button
+                            padding="0px"
+                            icon="icon-dl-sdk-documentation"
+                            flat
+                            uppercase
+                            label="SDK"
+                        />
+                        <div class="break" />
+                        <dl-button
+                            padding="0px"
+                            icon="icon-dl-file"
+                            flat
+                            label="Documentation"
+                        />
+                        <div class="break" />
+                        <dl-button
+                            padding="0px"
+                            icon="icon-dl-youtube"
+                            flat
+                            label="Video"
+                        />
+                    </div>
+                </template>
+            </dl-widget>
+        </dl-grid>
+    </div>
+</template>
+
 <script lang="ts">
-import { defineComponent } from 'vue-demi'
+import { defineComponent, ref } from 'vue-demi'
 import {
     DlWidget,
-    DlGridRow,
     DlGrid,
     DlBarChart,
-    DlConfusionMatrix
+    DlGridLayout,
+    DlIcon,
+    DlButton
 } from '../components'
 
 const labelsFn = () => {
@@ -65,67 +237,86 @@ export default defineComponent({
         DlGrid,
         DlWidget,
         DlBarChart,
-        DlGridRow,
-        DlConfusionMatrix
+        DlIcon,
+        DlButton
     },
     setup() {
-        return { data, labels, matrix }
+        const layout = ref([
+            [1, 5, 2],
+            [3, 4, 6]
+        ])
+
+        const layouts = ref<DlGridLayout[]>([
+            {
+                name: 'Layout 1',
+                value: layout.value
+            }
+        ])
+
+        const widgetsPerRow = ref(3)
+        const hasBeenSaved = ref('')
+
+        const saveLayout = () => {
+            const newLayout = {
+                name: `Layout ${layouts.value.length + 1}`,
+                value: layout.value
+            }
+            layouts.value.push(newLayout)
+            hasBeenSaved.value = `${newLayout.name} has been saved.`
+            setTimeout(() => {
+                hasBeenSaved.value = ''
+            }, 2000)
+        }
+
+        const selectLayout = (e: InputEvent) => {
+            const index = parseInt((e.target as HTMLInputElement).value)
+            layout.value = layouts.value[index].value
+        }
+
+        return {
+            data,
+            layout,
+            layouts,
+            widgetsPerRow,
+            hasBeenSaved,
+            saveLayout,
+            selectLayout
+        }
     }
 })
 </script>
 
-<template>
-    <div>
-        <dl-grid gap="20px">
-            <dl-grid-row>
-                <dl-widget>
-                    <template #header>
-                        <span>Widget 7</span>
-                        <span style="font-size: 12px; color: gray">Subtitle</span>
-                    </template>
-                    <template #content>
-                        <dl-confusion-matrix
-                            :matrix="matrix"
-                            :labels="labels"
-                        />
-                    </template>
-                    <template #description>
-                        <span>Lorem ipsum dolor sit amet consectetur adipisicing
-                            elit. Libero eligee a cupiditate modi dicta eveniet
-                            veritatis?</span>
-                    </template>
-                </dl-widget>
-            </dl-grid-row>
-
-            <dl-grid-row gap="20px">
-                <dl-widget>
-                    <template #header>
-                        <span>Widget 2</span>
-                    </template>
-                    <template #content>
-                        <dl-bar-chart
-                            :legend-props="legendProps"
-                            :data="data"
-                            :options="options"
-                            :items-in-view="6"
-                        />
-                    </template>
-                </dl-widget>
-
-                <dl-widget>
-                    <template #header>
-                        <span>Widget 3</span>
-                    </template>
-                    <template #content>
-                        <dl-bar-chart
-                            :legend-props="legendProps"
-                            :data="data"
-                            :options="options"
-                            :items-in-view="6"
-                        />
-                    </template>
-                </dl-widget>
-            </dl-grid-row>
-        </dl-grid>
-    </div>
-</template>
+<style lang="scss" scoped>
+.options {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+}
+.widgets-per-row {
+    &__input {
+        padding: 5px;
+        border-radius: 5px;
+        width: 50px;
+    }
+}
+.select-layout {
+    &__input,
+    &__button {
+        padding: 5px;
+        border-radius: 5px;
+        margin: 0px 2px;
+    }
+    &__info {
+        font-size: 0.8em;
+        margin-left: 10px;
+    }
+}
+.menu-icons {
+    display: flex;
+    align-items: center;
+    & > * {
+        cursor: pointer;
+        margin: 0px 5px;
+    }
+}
+</style>

package/src/demos/SmartSearchDemo/DlSmartSearchDemo.vue

@@ -6,69 +6,189 @@
                 dense
                 label="Disabled"
             />
+            <dl-checkbox
+                v-model="strictState"
+                dense
+                label="Strict"
+            />
         </div>
+        <dl-input
+            v-model="textQuery"
+            style="width: 220px"
+            placeholder="Select option"
+            size="m"
+        />
         <div
             style="width: 100px"
             class="props"
         />
+        { "metadata.system.width": 5 }
         <dl-smart-search
+            v-model="queryObject"
             :aliases="aliases"
             :schema="schema"
-            :color-schema="{
-                fields: 'blue',
-                operators: 'green',
-                keywords: 'bold'
-            }"
+            :color-schema="colorSchema"
             :filters="filters"
             :disabled="switchState"
             :is-loading="isLoading"
+            :strict="strictState"
             @remove-query="handleRemoveQuery"
             @save-query="handleSaveQuery"
             @search-query="handleSearchQuery"
         />
+        {{ queryObject }}
+
+        <br>
+        <br>
+        <br>
+        <br>
+        <br>
+        Test second if they work on same page..
+        <dl-smart-search
+            v-model="queryObject2"
+            :aliases="[]"
+            :schema="schema2"
+            :color-schema="colorSchema"
+        />
     </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
-import { DlSmartSearch, DlCheckbox } from '../../components'
-import { Query } from '../../components/types'
-import { aliases, schema } from './schema'
+import { DlSmartSearch, DlCheckbox, DlInput } from '../../components'
+import { DlSmartSearchFilters, Query } from '../../components/types'
+import { parseSmartQuery } from '../../utils'
 
 export default defineComponent({
     name: 'DlSmartSearchDemo',
     components: {
         DlSmartSearch,
-        DlCheckbox
+        DlCheckbox,
+        DlInput
     },
     data() {
+        const schema: any = {
+            id: ['string', 'number'],
+            filename: 'string',
+            name: 'string',
+            url: 'string',
+            type: 'string',
+            dataset: 'string',
+            datasetId: 'string',
+            dir: 'string',
+            thumbnail: 'string',
+            createdAt: 'date',
+            annotated: 'boolean',
+            hidden: 'boolean',
+            metadata: {
+                system: {
+                    width: 'number',
+                    height: 'number',
+                    '*': 'any'
+                },
+                test: 'any',
+                '*': 'any'
+            }
+        }
+        const schema2: any = {
+            type: [
+                'class',
+                'point',
+                'line',
+                'box',
+                'cube',
+                'segment',
+                'ellipse',
+                'binary',
+                'note',
+                'polyline',
+                'comparison',
+                'recording',
+                'subtitle',
+                'item_description',
+                'text_mark',
+                'pose',
+                'cube_3d',
+                'semantic_3d',
+                'polyline_3d',
+                'string'
+            ],
+            label: 'string',
+            itemId: 'string',
+            creator: 'string',
+            parentId: ['null', 'string'],
+            attributes: ['string', 'number', 'object', 'boolean'],
+            metadata: {
+                system: {
+                    attributes: ['string', 'number', 'object', 'boolean'],
+                    status: 'string',
+                    '*': 'any'
+                },
+                '*': 'any'
+            }
+        }
+
+        const colorSchema: any = {
+            fields: 'var(--dl-color-secondary)',
+            operators: 'var(--dl-color-positive)',
+            keywords: 'var(--dl-color-medium)'
+        }
+
+        const aliases: any = [
+            {
+                alias: 'ItemID',
+                key: 'id'
+            },
+            {
+                alias: 'ItemHeight',
+                key: 'metadata.system.height'
+            },
+            {
+                alias: 'ItemWidth',
+                key: 'metadata.system.width'
+            }
+        ]
+
+        const filters: DlSmartSearchFilters = {
+            saved: [
+                {
+                    name: 'Query 1',
+                    query: '{"q": 1}'
+                },
+                {
+                    name: 'Query 2',
+                    query: '{"query2": "query2"}'
+                },
+                {
+                    name: 'Query 3',
+                    query: '{"query3": "query3"}'
+                },
+                {
+                    name: 'Query 4',
+                    query: '{"age": 12, "name": "john"}'
+                }
+            ],
+            recent: [],
+            suggested: []
+        }
+
         return {
             schema,
+            schema2,
             aliases,
+            colorSchema,
             switchState: false,
+            strictState: false,
             isLoading: false,
-            filters: {
-                saved: [
-                    {
-                        name: 'Query 1',
-                        query: '{"q": 1}'
-                    },
-                    {
-                        name: 'Query 2',
-                        query: '{"query2": "query2"}'
-                    },
-                    {
-                        name: 'Query 3',
-                        query: '{"query3": "query3"}'
-                    },
-                    {
-                        name: 'Query 4',
-                        query: '{"age": 12, "name": "john"}'
-                    }
-                ],
-                recent: [],
-                suggested: []
-            } as { [key: string]: Query[] }
+            queryObject: {},
+            queryObject2: {},
+            textQuery: '',
+            filters
+        }
+    },
+    watch: {
+        textQuery(query: string) {
+            this.queryObject = parseSmartQuery(query)
         }
     },
     methods: {
@@ -97,7 +217,6 @@ export default defineComponent({
                 this.filters[type].push(query)
             }
         },
-
         handleRemoveQuery(query: Query, type: string) {
             this.filters[type] = this.filters[type].filter(
                 (q: Query) => q.name !== query.name

package/src/demos/index.ts

@@ -1,3 +1,6 @@
+import DlDemoPage from './DlDemoPage.vue'
+export { DlDemoPage }
+
 import AvatarDemo from './DlAvatarDemo.vue'
 import DlAlertDemo from './DlAlertDemo.vue'
 import DlProgressChartDemo from './DlProgressChartDemo.vue'
@@ -39,22 +42,30 @@ import DlBadgeDemo from './DlBadgeDemo.vue'
 import DlTrendDemo from './DlTrendDemo.vue'
 import DlWidgetDemo from './DlWidgetDemo.vue'
 import DlRadioDemo from './DlRadioDemo.vue'
-import DlTextHolderDemo from './DlTextHolderDemo.vue'
+import DlLabel from './DlLabelDemo.vue'
 import DlColumnChartDemo from './ColumnChartDemo.vue'
 import DlBarChartDemo from './BarChartDemo.vue'
 import DlSwitchDemo from './DlSwitchDemo.vue'
 import DlToastDemo from './DlToastDemo.vue'
 import DlChartDoughnutDemo from './DlChartDoughnutDemo.vue'
 import DlLineChartDemo from './DlLineChartDemo.vue'
+import DlScatterChartDemo from './DlScatterChartDemo.vue'
 import DlSpinner from './DlSpinnerDemo.vue'
+import DlEmptyStateDemo from './DlEmptyStateDemo.vue'
 import DlConfusionMatrix from './DlConfusionMatrixDemo.vue'
 import DlToggleButtonDemo from './DlToggleButtonDemo.vue'
 import DlKpiDemo from './DlKpiDemo.vue'
 import DlEllipsisDemo from './DlEllipsisDemo.vue'
 import DlSeparatorDemo from './DlSeparatorDemo.vue'
 import DlCardDemo from './DlCardDemo.vue'
+import DlTreeTableDemo from './DlTreeTableDemo.vue'
+import DlGridDemo from './DlGridDemo.vue'
 import DlMarkupTableDemo from './DlMarkupTableDemo.vue'
 import DlVirtualScrollDemo from './DlVirtualScrollDemo.vue'
+import DlJsonEditorDemo from './DlJsonEditorDemo.vue'
+import DlThumbnailGallery from './DlThumbnailGalleryDemo.vue'
+import DlPageLayoutDemo from './DlPageLayoutDemo.vue'
+import { DlCodeEditorDemo } from './DlCodeEditor'
 
 export default {
     AvatarDemo,
@@ -77,6 +88,7 @@ export default {
     DlThDemo,
     DlTdDemo,
     DlTableDemo,
+    DlTreeTableDemo,
     DlPaginationDemo,
     DlDateTimeRangeDemo,
     DlSmartSearchDemo,
@@ -98,20 +110,27 @@ export default {
     DlTrendDemo,
     DlWidgetDemo,
     DlRadioDemo,
-    DlTextHolderDemo,
+    DlLabel,
     DlToastDemo,
     DlColumnChartDemo,
     DlSwitchDemo,
     DlChartDoughnutDemo,
     DlBarChartDemo,
     DlLineChartDemo,
+    DlScatterChartDemo,
     DlSpinner,
+    DlEmptyStateDemo,
+    DlEllipsisDemo,
     DlConfusionMatrix,
     DlToggleButtonDemo,
-    DlEllipsisDemo,
     DlSeparatorDemo,
     DlKpiDemo,
     DlCardDemo,
+    DlGridDemo,
     DlMarkupTableDemo,
-    DlVirtualScrollDemo
+    DlVirtualScrollDemo,
+    DlJsonEditorDemo,
+    DlThumbnailGallery,
+    DlCodeEditorDemo,
+    DlPageLayoutDemo
 }