@dataloop-ai/components 0.13.0

package/src/demo/DlSelectDemo.vue

@@ -0,0 +1,355 @@
+<template>
+    <div>
+        <dl-select
+            :options="['one', 'two', 'three']"
+            title="Title"
+            required
+        />
+        <dl-select
+            v-model="disabledSelected"
+            :options="['disabled option', 'two', 'three']"
+            title="Disabled"
+            disabled
+        />
+        <dl-select
+            v-model="selectedOption"
+            width="84px"
+            without-borders
+            without-placeholder
+            with-chips
+            align-right
+            :options="[
+                { label: 'High', value: 'high', bgColor: 'dl-color-negative' },
+                {
+                    label: 'Medium',
+                    value: 'medium',
+                    bgColor: 'dl-color-warning',
+                    textColor: 'dl-color-darker'
+                },
+                {
+                    label: 'Low',
+                    value: 'low',
+                    bgColor: 'dl-color-positive',
+                    textColor: 'dl-color-darker'
+                }
+            ]"
+            required
+        >
+            <template #selected="scope">
+                <dl-chip
+                    :text-color="scope.opt.textColor"
+                    :color="scope.opt.bgColor"
+                >
+                    {{ scope.opt.label }}
+                </dl-chip>
+            </template>
+            <template #option="scope">
+                <dl-chip
+                    :text-color="scope.opt.textColor"
+                    :color="scope.opt.bgColor"
+                >
+                    {{ scope.opt.label }}
+                </dl-chip>
+            </template>
+        </dl-select>
+
+        <dl-select
+            v-model="statusOption"
+            width="96px"
+            without-borders
+            align-right
+            :options="[
+                {
+                    label: 'Status 1',
+                    value: 1,
+                    badgeColor: 'dl-color-disabled'
+                },
+                {
+                    label: 'Status 2',
+                    value: 2,
+                    badgeColor: 'dl-color-secondary'
+                },
+                {
+                    label: 'Status 3',
+                    value: 3,
+                    badgeColor: 'dl-color-positive'
+                },
+                { label: 'Status 4', value: 4, badgeColor: 'dl-color-warning' }
+            ]"
+            required
+        >
+            <template #selected="scope">
+                <div style="display: flex; align-items: center; gap: 5px">
+                    <dl-badge :color="scope.opt.badgeColor" />
+                    {{ scope.opt.label }}
+                </div>
+            </template>
+            <template #option="scope">
+                <div style="display: flex; align-items: center; gap: 5px">
+                    <dl-badge :color="scope.opt.badgeColor" />
+                    {{ scope.opt.label }}
+                </div>
+            </template>
+        </dl-select>
+        <dl-select
+            v-model="tasksFilter"
+            multiselect
+            :options="[
+                { label: 'Hard', value: 'hard', count: 20 },
+                { label: 'Easy', value: 'easy', count: 50 }
+            ]"
+            has-prepend
+            all-items-option
+        >
+            <template #prepend>
+                <dl-icon
+                    size="12px"
+                    icon="icon-dl-filter"
+                />
+            </template>
+        </dl-select>
+        <dl-select
+            v-model="selectedBySearch"
+            size="m"
+            title="Title"
+            optional
+            :options="searchOptions"
+            search
+            emit-val
+            @filter="filterFn"
+        />
+        <dl-select
+            v-model="selectedByFilteringSearch"
+            :options="searchOptions"
+            size="m"
+            multiselect
+            style="background-color: beige"
+            placeholder="contributors"
+            search
+        />
+
+        <dl-select
+            v-model="selectedWithEmitValue"
+            title="Emit Value"
+            :options="searchOptions"
+            size="m"
+            emit-value
+        />
+
+        Expandable tree view
+        <dl-select
+            v-model="selectedWithChildrenSearch"
+            :options="treeOptions"
+            size="m"
+            multiselect
+        />
+        <dl-select
+            v-model="selectedWithChildren"
+            :options="treeOptions"
+            size="m"
+            multiselect
+            search
+        />
+        Capitalized options
+        <dl-select
+            v-model="selectedWithChildrenCapitalized"
+            :options="treeOptions"
+            size="m"
+            multiselect
+            search
+            capitalized-options
+        />
+        With Fit
+        <dl-select
+            v-model="selectedWithChildrenCapitalized"
+            :options="treeOptions"
+            size="m"
+            multiselect
+            search
+            capitalized-options
+            fit
+        />
+        With Label and sub label
+        <dl-select
+            v-model="selectedOption"
+            :options="[
+                {
+                    subLabel: 'not so high',
+                    label: 'High',
+                    value: 'high',
+                    bgColor: 'dl-color-negative'
+                },
+                {
+                    subLabel: 'not so medium',
+                    label: 'Medium',
+                    value: 'medium',
+                    bgColor: 'dl-color-warning',
+                    textColor: 'dl-color-darker'
+                },
+                {
+                    subLabel: 'not so low',
+                    label: 'Low',
+                    value: 'low',
+                    bgColor: 'dl-color-positive',
+                    textColor: 'dl-color-darker'
+                }
+            ]"
+        >
+            <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'
+
+const defaultOptions = [
+    { label: 'Contributor 1', value: 'c1' },
+    { label: 'Contributor 2', value: 'c2' },
+    { label: 'Contributor 3', value: 'c3' }
+]
+
+const treeOptions = [
+    {
+        label: 'root',
+        value: 'root',
+        children: [
+            { label: 'child 1', value: 'c1' },
+            { label: 'child 2', value: 'c2' },
+            {
+                label: 'child 3',
+                value: 'c3',
+                children: [
+                    { label: 'child 4', value: 'c4' },
+                    {
+                        label: 'child 5',
+                        value: 'c5',
+                        children: [
+                            { label: 'child 6', value: 'c6' },
+                            {
+                                label: 'child 7',
+                                value: 'c7',
+                                children: [
+                                    { label: 'child 8', value: 'c8' },
+                                    {
+                                        label: 'child 9',
+                                        value: 'c9',
+                                        children: [
+                                            { label: 'child 10', value: 'c10' },
+                                            {
+                                                label: 'child 11',
+                                                value: 'c11',
+                                                children: [
+                                                    {
+                                                        label: 'child 12',
+                                                        value: 'c12'
+                                                    },
+                                                    {
+                                                        label: 'child 13',
+                                                        value: 'c13',
+                                                        children: [
+                                                            {
+                                                                label: 'child 14',
+                                                                value: 'c14'
+                                                            },
+                                                            {
+                                                                label: 'Really long line Really long line Really long line Really long line Really long line Really long line',
+                                                                value: 'c17',
+                                                                children: [
+                                                                    {
+                                                                        label: 'child 15',
+                                                                        value: '15'
+                                                                    },
+                                                                    {
+                                                                        label: 'child 16',
+                                                                        value: '16'
+                                                                    }
+                                                                ]
+                                                            }
+                                                        ]
+                                                    }
+                                                ]
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        label: 'root1',
+        value: 'root1',
+        children: [
+            { label: 'child 1', value: 'c6' },
+            { label: 'child 2', value: 'c7' },
+            {
+                label: 'child 3',
+                value: 'c8',
+                children: [
+                    { label: 'child 4', value: 'c9' },
+                    { label: 'child 5', value: 'c10' }
+                ]
+            }
+        ]
+    }
+]
+
+export default defineComponent({
+    components: { DlSelect, DlIcon, DlChip, DlBadge },
+    data() {
+        return {
+            selectedOption: {
+                label: 'High',
+                value: 'high',
+                bgColor: 'dl-color-error',
+                textColor: 'dl-color-white'
+            },
+            statusOption: {
+                label: 'Status 1',
+                value: 1,
+                badgeColor: 'dl-color-disabled'
+            },
+            searchOptions: defaultOptions,
+            treeOptions,
+            selectedBySearch: undefined,
+            selectedByFilteringSearch: [],
+            selectedWithEmitValue: 'c1',
+            selectedWithChildren: [],
+            selectedWithChildrenSearch: [],
+            selectedWithChildrenCapitalized: [],
+            tasksFilter: [],
+            showAllOption: true,
+            disabledSelected: 'disabled option'
+        }
+    },
+    computed: {
+        isNotSelected() {
+            // @ts-ignore
+            return defaultOptions.includes(this.selectedBySearch as any)
+        }
+    },
+    methods: {
+        filterFn(val: string) {
+            this.searchOptions = defaultOptions.filter(
+                (v: { label: string; value: string } | undefined) =>
+                    v.label.toLowerCase().indexOf(val.toLowerCase()) > -1
+            )
+            this.showAllOption =
+                this.searchOptions.length === defaultOptions.length
+        },
+        handleInput(e: Event) {
+            return (e.target as HTMLInputElement).value
+        }
+    }
+})
+</script>

package/src/demo/DlSkeletonDemo.vue

@@ -0,0 +1,20 @@
+<template>
+    <div>
+        <DlSkeleton
+            height="200px"
+            width="200px"
+        />
+        <div />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { DlSkeleton } from '../components'
+export default defineComponent({
+    name: 'DlSkeletonDemo',
+    components: {
+        DlSkeleton
+    }
+})
+</script>

package/src/demo/DlSliderDemo.vue

@@ -0,0 +1,47 @@
+<template>
+    <div>
+        <dl-slider
+            v-model.number="value"
+            width="500px"
+            text="slider"
+            :step="1"
+            :min="-100"
+            :max="100"
+            :editable="editable"
+            :readonly="readonly"
+            :disabled="disabled"
+        />
+        <div>
+            <button @click="editable = !editable">
+                Editable: {{ editable }}
+            </button>
+            <button @click="readonly = !readonly">
+                Readonly: {{ readonly }}
+            </button>
+            <button @click="disabled = !disabled">
+                Disable: {{ disabled }}
+            </button>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { DlSlider } from '../components'
+import { defineComponent } from 'vue-demi'
+
+export default defineComponent({
+    name: 'DlSliderDemo',
+    components: {
+        DlSlider
+    },
+    data() {
+        return {
+            value: 0,
+            editable: false,
+            disabled: false,
+            readonly: false
+        }
+    },
+    template: 'dl-slider-demo'
+})
+</script>

package/src/demo/DlStepperDemo/CenteredStepperInDialogBox.vue

@@ -0,0 +1,260 @@
+<template>
+    <div>
+        <dl-button
+            label="Open Dialog Box (Center)"
+            @click="openStepper"
+        />
+        <div
+            class="dl-stepper-wrapper"
+            :style="cssVars"
+        >
+            <dl-stepper
+                v-model="isOpen"
+                done-button-label="Create"
+                width="800px"
+                style="max-height: 400px"
+                header-title="Create New Task"
+                :content-title="`${stepper.currentIndex + 1}. ${
+                    stepper.currentStep.value
+                }`"
+                :with-transition="true"
+                :bg-color="bgColor"
+                :state="stepper.currentStep"
+                :steps="stepper.steps"
+                :disabled-prev-step="!stepper.hasPrevStep()"
+                :disabled-next-step="!stepper.hasNextStep()"
+                :is-done="stepper.isDone()"
+                :next-step="stepper.getNextStep()"
+                :prev-step="stepper.getPrevStep()"
+                @next="handleNext"
+                @prev="handlePrev"
+                @done="handleDone"
+                @set-step="handleStep"
+            >
+                <template #content-header="{ state }">
+                    <div style="display: flex; gap: 20px; align-items: center">
+                        <dl-typography
+                            size="h3"
+                            variant="h3"
+                        >
+                            {{
+                                `${stepper.currentIndex + 1}. ${
+                                    stepper.currentStep.value
+                                        .charAt(0)
+                                        .toUpperCase() +
+                                    stepper.currentStep.value.slice(1)
+                                }`
+                            }}
+                        </dl-typography>
+                        <dl-chip
+                            v-if="state.warning"
+                            max-width="100%"
+                            color="dl-color-warning-background"
+                            text-color="dl-color-darker"
+                        >
+                            {{ state.warning }}
+                        </dl-chip>
+
+                        <dl-counters
+                            style="padding: 0; margin-left: auto"
+                            small
+                            :items="counters"
+                        />
+                    </div>
+                </template>
+                <template #general>
+                    <general-step
+                        @error-click="stepper.failStep('Custom Error')"
+                        @complete-click="stepper.completeStep()"
+                        @warning-click="
+                            stepper.setStepWarning('Custom Warning')
+                        "
+                        @reset-click="stepper.resetStep()"
+                    />
+                </template>
+                <template #data>
+                    <data-step
+                        @error-click="stepper.failStep('Custom Error')"
+                        @complete-click="stepper.completeStep()"
+                        @warning-click="
+                            stepper.setStepWarning('Custom Warning')
+                        "
+                        @reset-click="stepper.resetStep()"
+                    />
+                </template>
+                <template #instructions>
+                    <instruction-step
+                        @error-click="stepper.failStep('Custom Error')"
+                        @complete-click="stepper.completeStep()"
+                        @warning-click="
+                            stepper.setStepWarning('Custom Warning')
+                        "
+                        @reset-click="stepper.resetStep()"
+                    />
+                </template>
+                <template #assignments>
+                    <assignments-step
+                        @error-click="stepper.failStep('Custom Error')"
+                        @complete-click="stepper.completeStep()"
+                        @warning-click="
+                            stepper.setStepWarning('Custom Warning')
+                        "
+                        @reset-click="stepper.resetStep()"
+                    />
+                </template>
+                <template #quality>
+                    <quality-step
+                        @error-click="stepper.failStep('Custom Error')"
+                        @complete-click="stepper.completeStep()"
+                        @warning-click="
+                            stepper.setStepWarning('Custom Warning')
+                        "
+                        @reset-click="stepper.resetStep()"
+                    />
+                </template>
+            </dl-stepper>
+        </div>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import GeneralStep from './steps/GeneralStep.vue'
+import InstructionStep from './steps/InstructionStep.vue'
+import DataStep from './steps/DataStep.vue'
+import AssignmentsStep from './steps/AssignmentsStep.vue'
+import QualityStep from './steps/QualityStep.vue'
+import {
+    DlButton,
+    DlStepper,
+    Stepper,
+    Step,
+    StepState,
+    DlTypography,
+    DlChip,
+    DlCounters
+} from '../..'
+import { getColor } from '../../utils'
+
+class CustomStepper extends Stepper {
+    constructor(steps: Step[]) {
+        super(steps)
+    }
+
+    public completeStep() {
+        super.completeStep()
+        console.log('COMPLETED')
+    }
+}
+
+export default defineComponent({
+    components: {
+        DlStepper,
+        DlButton,
+        AssignmentsStep,
+        InstructionStep,
+        DataStep,
+        GeneralStep,
+        QualityStep,
+        DlTypography,
+        DlChip,
+        DlCounters
+    },
+    data() {
+        const stepper: Stepper = null
+
+        return {
+            counters: [{ value: 3, text: 'Assigmments' }],
+            isOpen: false,
+            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'
+        }
+    },
+    computed: {
+        cssVars(): Record<string, string | number> {
+            return {
+                '--dl-overlay-display': this.isOpen ? 'flex' : 'none',
+                '--dl-stepper-bg': getColor(
+                    this.bgColor,
+                    'dl-color-fill-third'
+                ),
+                '--dl-stepper-position': 'center'
+            }
+        }
+    },
+    watch: {
+        modelValue(newVal: boolean) {
+            this.isOpen = newVal
+            if (newVal) document.documentElement.style.overflow = 'hidden'
+            else document.documentElement.style.overflow = 'auto'
+        }
+    },
+    beforeMount() {
+        const steps = this.steps.map((step) => new Step(step))
+        this.stepper = new CustomStepper(steps)
+    },
+    methods: {
+        openStepper() {
+            this.isOpen = true
+        },
+        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 {
+    position: fixed; /* Sit on top of the page content */
+    display: var(--dl-overlay-display); /* Hidden by default */
+    justify-content: var(--dl-stepper-position);
+    align-items: center;
+    width: 100%; /* Full width (cover the whole page) */
+    height: 100vh; /* Full height (cover the whole page) */
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overscroll-behavior: contain;
+    background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
+    z-index: var(
+        --dl-z-index-overlay
+    ); /* Specify a stack order in case you're using a different order for other elements */
+}
+</style>