@dataloop-ai/components 0.18.0 → 0.18.2

package/src/demos/DlPopupDemo.vue

@@ -22,7 +22,57 @@
                 </template>
             </dl-popup>
         </dl-button>
-        <div />
+        <dl-button label="Open Empty State Popup">
+            <dl-popup
+                title="Edit Item Description"
+                additional-info="Some additional information"
+                subtitle="Some text for better explanation."
+                with-close-button
+                is-empty
+                :empty-state-props="{
+                    responsive: true,
+                    style: 'min-height: 200px; max-width: 300px;',
+                    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.'
+                }"
+                @close-button-click="handleClear"
+            >
+                <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>
+                <template #footer>
+                    <dl-button fluid>
+                        Save
+                    </dl-button>
+                </template>
+            </dl-popup>
+        </dl-button>
         <dl-button label="Open Popup persistent">
             <dl-popup
                 title="Edit Item Description"
@@ -54,6 +104,37 @@
                 </template>
             </dl-popup>
         </dl-button>
+        <dl-button label="Open Popup with max height 50px">
+            <dl-popup
+                title="Edit Item Description"
+                additional-info="Some additional information"
+                subtitle="Some text for better explanation."
+                with-close-button
+                max-height="50px"
+            >
+                <dl-text-area
+                    v-model="text"
+                    :max-length="100"
+                    show-counter
+                    placeholder="Type your text"
+                    width="203px"
+                />
+                <template #close-button>
+                    <dl-button
+                        flat
+                        style="padding-bottom: 0; padding-top: 0"
+                        label="clear"
+                        size="m"
+                        @click="handleClear"
+                    />
+                </template>
+                <template #footer>
+                    <dl-button fluid>
+                        Save
+                    </dl-button>
+                </template>
+            </dl-popup>
+        </dl-button>
     </div>
 </template>
 <script lang="ts">

package/src/demos/DlRadioDemo.vue

@@ -16,6 +16,20 @@
             label="Option 3"
             :value="3"
         />
+        disabled
+
+        <dl-radio
+            v-model="disabledModel"
+            label="Option Disabled"
+            :value="4"
+            disabled
+        />
+        <dl-radio
+            v-model="disabledModel"
+            label="Option Disabled not selected"
+            :value="5"
+            disabled
+        />
     </div>
 </template>
 
@@ -28,7 +42,8 @@ export default {
     },
     data() {
         return {
-            checkModel: 1
+            checkModel: 1,
+            disabledModel: 4
         }
     }
 }

package/src/demos/DlScatterChartDemo.vue

@@ -0,0 +1,161 @@
+<template>
+    <div
+        style="
+            display: flex;
+            width: 1000px;
+            flex-wrap: wrap;
+            flex-direction: row;
+            gap: 0;
+        "
+    >
+        <dl-scatter-chart
+            id="example-one"
+            :brush-props="brushProps"
+            :legend-props="legendProps"
+            :data="data"
+            :options="options"
+            style="width: 100%"
+        />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { DlScatterChart } from '../components'
+import { orderBy } from 'lodash'
+
+const data = {
+    labels: [
+        {
+            title: '0.1'
+        },
+        {
+            title: '0.2'
+        },
+        {
+            title: '0.3'
+        },
+        {
+            title: '0.4'
+        },
+        {
+            title: '0.5'
+        },
+        {
+            title: '0.6'
+        },
+        {
+            title: '0.7'
+        },
+        {
+            title: '0.8'
+        },
+        {
+            title: '0.9'
+        },
+        {
+            title: '1'
+        }
+    ],
+    datasets: [
+        {
+            label: 'Scatter Dataset',
+            data: [
+                { x: 0.1, y: 0.1 },
+                { x: 0.2, y: 0.1 },
+                { x: 0.3, y: 0.2 },
+                { x: 0.4, y: 0.3 },
+                { x: 0.5, y: 0.35 },
+                { x: 0.6, y: 0.39 },
+                { x: 0.7, y: 0.4 },
+                { x: 0.8, y: 0.8 },
+                { x: 0.9, y: 0.8 }
+            ],
+            backgroundColor: 'rgb(255, 99, 132)',
+            borderColor: 'rgba(255, 99, 132, 1)',
+            pointRadius: 5,
+            showLine: true
+        },
+        {
+            label: 'Dataset 2',
+            data: [
+                { x: 0.2, y: 0.1 },
+                { x: 0.2, y: 0.2 },
+                { x: 0.4, y: 0.2 },
+                { x: 0.4, y: 0.3 },
+                { x: 0.6, y: 0.65 },
+                { x: 0.6, y: 0.85 },
+                { x: 0.8, y: 0.6 },
+                { x: 0.8, y: 0.7 },
+                { x: 0.9, y: 0.8 }
+            ],
+            backgroundColor: 'rgba(45, 162, 50, 1)',
+            borderColor: 'rgba(45, 162, 50, 1)',
+            pointRadius: 5,
+            showLine: true
+        }
+    ]
+}
+
+const brushProps = {
+    min: 0,
+    max: orderBy(data.datasets, (o) => o.data.length)[0].data.length - 1
+}
+
+const options = {
+    scales: {
+        x: {
+            type: 'linear',
+            position: 'bottom',
+            axis: 'Recall',
+            scaleLabel: {
+                display: true,
+                labelString: 'Recall'
+            }
+        },
+        y: {
+            type: 'linear',
+            position: 'left',
+            axis: 'Precision',
+            scaleLabel: {
+                display: true,
+                labelString: 'Precision'
+            }
+        }
+    }
+}
+
+const legendProps = {
+    alignItems: 'center'
+}
+
+export default defineComponent({
+    name: 'DlScatterChartDemo',
+    components: {
+        DlScatterChart
+    },
+    data() {
+        return {
+            resolution: 'hour',
+            options,
+            data,
+            brushProps,
+            legendProps,
+            noPointsData: {
+                ...data,
+                datasets: [
+                    { ...data.datasets[0], pointRadius: 0, borderWidth: 1 }
+                ]
+            },
+            tensionLineData: {
+                ...data,
+                datasets: [{ ...data.datasets[1], pointRadius: 0 }]
+            },
+            tensionOptions: { ...options, tension: 0.5 }
+        }
+    },
+    methods: {}
+})
+</script>
+
+<style scoped lang="scss"></style>

package/src/demos/DlSearchDemo.vue

@@ -8,6 +8,15 @@
             placeholder="Search here"
             :auto-suggest-items="suggestItems"
         />
+
+        <dl-search
+            v-model="searchValue"
+            size="m"
+            with-search-button
+            highlight-matches
+            placeholder="Search here"
+            :auto-suggest-items="suggestItems"
+        />
     </div>
 </template>
 

package/src/demos/DlSelectDemo.vue

@@ -4,6 +4,7 @@
             :options="['one', 'two', 'three']"
             title="Title"
             required
+            fit
         />
         <dl-select
             v-model="disabledSelected"
@@ -24,7 +25,8 @@
                     label: 'Medium',
                     value: 'medium',
                     bgColor: 'dl-color-warning',
-                    textColor: 'dl-color-darker'
+                    textColor: 'dl-color-darker',
+                    icon: 'icon-dl-search'
                 },
                 {
                     label: 'Low',
@@ -44,12 +46,14 @@
                 </dl-chip>
             </template>
             <template #option="scope">
-                <dl-chip
-                    :text-color="scope.opt.textColor"
-                    :color="scope.opt.bgColor"
-                >
-                    {{ scope.opt.label }}
-                </dl-chip>
+                <div class="flex">
+                    <dl-chip
+                        :text-color="scope.opt.textColor"
+                        :color="scope.opt.bgColor"
+                    >
+                        {{ scope.opt.label }}
+                    </dl-chip>
+                </div>
             </template>
         </dl-select>
 
@@ -62,19 +66,23 @@
                 {
                     label: 'Status 1',
                     value: 1,
-                    badgeColor: 'dl-color-disabled'
+                    badgeColor: 'var(--dl-color-disabled)'
                 },
                 {
                     label: 'Status 2',
                     value: 2,
-                    badgeColor: 'dl-color-secondary'
+                    badgeColor: 'var(--dl-color-secondary)'
                 },
                 {
                     label: 'Status 3',
                     value: 3,
-                    badgeColor: 'dl-color-positive'
+                    badgeColor: 'var(--dl-color-positive)'
                 },
-                { label: 'Status 4', value: 4, badgeColor: 'dl-color-warning' }
+                {
+                    label: 'Status 4',
+                    value: 4,
+                    badgeColor: 'var(--dl-color-warning)'
+                }
             ]"
             required
         >
@@ -91,6 +99,7 @@
                 </div>
             </template>
         </dl-select>
+        with prepend
         <dl-select
             v-model="tasksFilter"
             multiselect
@@ -108,24 +117,26 @@
                 />
             </template>
         </dl-select>
+        custom search
         <dl-select
             v-model="selectedBySearch"
             size="m"
             title="Title"
             optional
             :options="searchOptions"
-            search
+            searchable
+            custom-filter
             emit-val
             @filter="filterFn"
         />
+        normal search
         <dl-select
             v-model="selectedByFilteringSearch"
             :options="searchOptions"
             size="m"
             multiselect
-            style="background-color: beige"
             placeholder="contributors"
-            search
+            searchable
         />
 
         <dl-select
@@ -148,7 +159,7 @@
             :options="treeOptions"
             size="m"
             multiselect
-            search
+            searchable
         />
         Capitalized options
         <dl-select
@@ -156,22 +167,67 @@
             :options="treeOptions"
             size="m"
             multiselect
-            search
+            searchable
             capitalized-options
         />
         With Fit
         <dl-select
-            v-model="selectedWithChildrenCapitalized"
-            :options="treeOptions"
+            :options="[
+                { label: 'Option 1', value: 1 },
+                { label: 'Option 2, longer one', value: 2 },
+                { label: 'Option 3', value: 3 }
+            ]"
             size="m"
             multiselect
-            search
+            searchable
             capitalized-options
-            fit-container
+            fit-content
         />
         With Label and sub label
         <dl-select
             v-model="selectedOption"
+            :options="[
+                {
+                    subLabel: 'not so high',
+                    label: 'High',
+                    value: 'high',
+                    labelColor: 'var(--dl-color-darker)',
+                    subLabelColor: 'var(--dl-color-lighter)'
+                },
+                {
+                    subLabel: 'not so medium',
+                    label: 'Medium',
+                    value: 'medium',
+                    labelColor: 'var(--dl-color-darker)',
+                    subLabelColor: 'var(--dl-color-lighter)'
+                },
+                {
+                    subLabel: 'not so low',
+                    label: 'Low',
+                    value: 'low',
+                    labelColor: 'var(--dl-color-darker)',
+                    subLabelColor: 'var(--dl-color-lighter)'
+                }
+            ]"
+        >
+            <template #option="scope">
+                <div style="padding: 5px 0px">
+                    <div :style="`color: ${scope.opt.labelColor}`">
+                        {{ scope.opt.label }}
+                    </div>
+                    <div
+                        :style="`color: ${scope.opt.subLabelColor}; font-size: 10px`"
+                    >
+                        {{ scope.opt.subLabel }}
+                    </div>
+                </div>
+            </template>
+        </dl-select>
+        With tooltip
+        <dl-select
+            v-model="select2"
+            title="With tooltip"
+            :tooltip="'Test Me'"
             :options="[
                 {
                     subLabel: 'not so high',
@@ -202,10 +258,10 @@
                 </div>
             </template>
         </dl-select>
-        With tooltip
+        Small size
         <dl-select
-            v-model="selectedOption"
-            :tooltip="'Test Me'"
+            v-model="select3"
+            :size="'s'"
             :options="[
                 {
                     subLabel: 'not so high',
@@ -236,10 +292,12 @@
                 </div>
             </template>
         </dl-select>
-        Small size
+        Small size with tooltip
         <dl-select
-            v-model="selectedOption"
+            v-model="select4"
             :size="'s'"
+            title="test"
+            tooltip="test me"
             :options="[
                 {
                     subLabel: 'not so high',
@@ -270,11 +328,13 @@
                 </div>
             </template>
         </dl-select>
-        Small size with tooltip
+
+        Select with max-height
         <dl-select
-            v-model="selectedOption"
+            v-model="select5"
             :size="'s'"
             title="test"
+            dropdown-max-height="50px"
             tooltip="test me"
             :options="[
                 {
@@ -306,12 +366,27 @@
                 </div>
             </template>
         </dl-select>
+
+        Select with virtual scrolling
+        <dl-select
+            v-model="selectedOption"
+            :options="alotOfOptions ? alotOfOptions : []"
+            style="margin-bottom: 150px"
+        >
+            <template #option="scope">
+                <div style="padding: 5px 0px">
+                    <div>{{ scope.opt.label }}</div>
+                    <div>{{ scope.opt.subLabel }}</div>
+                </div>
+            </template>
+        </dl-select>
     </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
 import { DlChip, DlSelect, DlIcon, DlBadge } from '../components'
+import { DlSelectOptionType } from '../components/compound/DlSelect/utils'
 
 const defaultOptions = [
     { label: 'Contributor 1', value: 'c1' },
@@ -418,6 +493,10 @@ export default defineComponent({
                 bgColor: 'dl-color-error',
                 textColor: 'dl-color-white'
             },
+            select2: null,
+            select3: null,
+            select4: null,
+            select5: null,
             statusOption: {
                 label: 'Status 1',
                 value: 1,
@@ -440,6 +519,21 @@ export default defineComponent({
         isNotSelected() {
             // @ts-ignore
             return defaultOptions.includes(this.selectedBySearch as any)
+        },
+        alotOfOptions(): DlSelectOptionType {
+            const arr = [] as any[]
+
+            for (let i = 0; i < 1000; ++i) {
+                arr.push({
+                    key: i,
+                    subLabel: 'not so high',
+                    label: 'High ' + i,
+                    value: 'high',
+                    bgColor: 'dl-color-negative'
+                })
+            }
+
+            return arr
         }
     },
     methods: {
@@ -453,6 +547,9 @@ export default defineComponent({
         },
         handleInput(e: Event) {
             return (e.target as HTMLInputElement).value
+        },
+        log(e: any) {
+            console.log(e)
         }
     }
 })

package/src/demos/DlSpinnerDemo.vue

@@ -6,8 +6,6 @@
                 type="default"
                 text="Loading..."
                 :text-styles="{
-                    fontSize: '1em',
-                    marginTop: '15px',
                     marginLeft: '10px'
                 }"
             />

package/src/demos/DlStepperDemo/DlStepperDemo.vue

@@ -5,11 +5,14 @@
         <StepperInDialogBox />
         <div style="height: 10px" />
         <CenteredStepperInDialogBox />
+        <div style="height: 10px" />
+        <EmptyStateStepper />
     </div>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
 import SimpleStepper from './SimpleStepper.vue'
+import EmptyStateStepper from './EmptyStateStepper.vue'
 import StepperInDialogBox from './StepperInDialogBox.vue'
 import CenteredStepperInDialogBox from './CenteredStepperInDialogBox.vue'
 
@@ -18,7 +21,8 @@ export default defineComponent({
     components: {
         SimpleStepper,
         StepperInDialogBox,
-        CenteredStepperInDialogBox
+        CenteredStepperInDialogBox,
+        EmptyStateStepper
     }
 })
 </script>