@dataloop-ai/components 0.18.0 → 0.18.1

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>

package/src/demos/DlStepperDemo/EmptyStateStepper.vue

@@ -0,0 +1,149 @@
+<template>
+    <div class="dl-stepper-wrapper">
+        <dl-stepper
+            v-model="isOpen"
+            :hide-close-button="true"
+            done-button-label="Create"
+            width="calc(100vh-400px)"
+            header-title="Create New Task"
+            :content-title="`${stepper.currentIndex + 1}. ${
+                stepper.currentStep.value
+            }`"
+            :bg-color="bgColor"
+            :state="stepper.currentStep"
+            :steps="stepper.steps"
+            :disabled-prev-step="true"
+            :disabled-next-step="true"
+            :is-done="stepper.isDone()"
+            :next-step="stepper.getNextStep()"
+            :prev-step="stepper.getPrevStep()"
+            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.'
+            }"
+            @next="handleNext"
+            @prev="handlePrev"
+            @done="handleDone"
+            @set-step="handleStep"
+        >
+            <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-stepper>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { DlStepper, DlButton } from '../..'
+import { StepState } from '../../types'
+import { Stepper, Step } from '../../components/compound/DlStepper/models'
+
+class EmptyStateStepper extends Stepper {
+    constructor(steps: Step[]) {
+        super(steps)
+    }
+
+    public completeStep() {
+        super.completeStep()
+        console.log('COMPLETED')
+    }
+}
+
+export default defineComponent({
+    components: {
+        DlStepper,
+        DlButton
+    },
+    data() {
+        const stepper: Stepper = null
+
+        return {
+            counters: [{ value: 3, text: 'Assigmments' }],
+            isOpen: true,
+            stepper,
+            steps: [
+                {
+                    value: 'general',
+                    title: 'general',
+                    warning: 'Some issues in the step',
+                    completed: true
+                },
+                {
+                    value: 'data',
+                    title: 'data',
+                    completed: true
+                },
+                {
+                    value: 'instructions',
+                    title: 'instructions'
+                },
+                {
+                    value: 'assignments',
+                    title: 'assignments'
+                },
+                {
+                    value: 'quality',
+                    title: 'quality',
+                    optional: true
+                }
+            ] as StepState[],
+            bgColor: 'dl-color-fill-third'
+        }
+    },
+    beforeMount() {
+        const steps = this.steps.map((step) => new Step(step))
+        this.stepper = new EmptyStateStepper(steps)
+    },
+    methods: {
+        handleNext() {
+            this.stepper.moveToNextStep()
+        },
+        handlePrev() {
+            this.stepper.moveToPrevStep()
+        },
+        handleDone() {
+            console.log('DONE')
+        },
+        handleStep(step: Step) {
+            this.stepper.currentIndex = this.stepper.steps.findIndex(
+                (s) => s.value === step.value
+            )
+        }
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.dl-stepper-wrapper {
+    height: calc(100vh - 200px);
+}
+</style>

package/src/demos/DlStepperDemo/SimpleStepper.vue

@@ -59,6 +59,7 @@
                     @complete-click="stepper.completeStep()"
                     @warning-click="stepper.setStepWarning('Custom Warning')"
                     @reset-click="stepper.resetStep()"
+                    @set-subtitle="setSubtitle"
                 />
             </template>
             <template #data>
@@ -184,6 +185,9 @@ export default defineComponent({
             this.stepper.currentIndex = this.stepper.steps.findIndex(
                 (s) => s.value === step.value
             )
+        },
+        setSubtitle(subtitle: string) {
+            this.stepper.currentStep.subtitle = subtitle
         }
     }
 })

package/src/demos/DlStepperDemo/steps/GeneralStep.vue

@@ -26,6 +26,7 @@
                 dense
                 required
                 title="Name"
+                @input="$emit('set-subtitle', $event)"
             />
             <span>
                 <dl-typography color="dl-color-medium">Type *</dl-typography>