@dataloop-ai/components 0.18.0 → 0.18.2

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>

package/src/demos/DlSwitchDemo.vue

@@ -9,6 +9,18 @@
         />
         Switch with value not updating
         <dl-switch v-model="switchValue" />
+        Switch with left-label
+        <dl-switch
+            v-model="switchValue"
+            left-label="Left label"
+        />
+        <div style="width: 500px">
+            <dl-switch
+                v-model="switchValue"
+                left-label="Left label"
+                fluid
+            />
+        </div>
     </div>
 </template>
 

package/src/demos/DlTableDemo.vue

@@ -117,6 +117,69 @@
                 @update:selected="updateSeleted"
             />
 
+            <div style="margin-top: 100px">
+                <DlTable
+                    :selected="selected"
+                    :separator="separator"
+                    :columns="tableColumns"
+                    :bordered="bordered"
+                    :dense="dense"
+                    class="sticky-header"
+                    :filter="filter"
+                    :selection="selection"
+                    :loading="loading"
+                    :rows="tableRows"
+                    :resizable="resizable"
+                    row-key="name"
+                    color="dl-color-secondary"
+                    title="Table Title"
+                    :virtual-scroll="vScroll"
+                    style="height: 500px"
+                    :rows-per-page-options="rowsPerPageOptions"
+                    hide-pagination
+                    is-empty
+                    :empty-state-props="{
+                        responsive: false,
+                        style: 'min-height: 350px; 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.'
+                    }"
+                    @row-click="log"
+                    @th-click="log"
+                    @update:selected="updateSeleted"
+                >
+                    <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>
+                </DlTable>
+            </div>
+
             <div style="margin-top: 100px">
                 <DlTable
                     :selected="selected"
@@ -222,7 +285,6 @@
                         :selected="selected"
                         :separator="separator"
                         :draggable="draggable"
-                        class="sticky-header"
                         :filter="filter"
                         :selection="selection"
                         :dense="dense"
@@ -233,9 +295,7 @@
                         :columns="tableColumns"
                         style="height: 500px"
                         row-key="index"
-                        :pagination="{ rowsPerPage: 0 }"
                         virtual-scroll
-                        :rows-per-page-options="[0]"
                         @virtual-scroll="onScroll"
                     />
                 </div>
@@ -316,6 +376,25 @@
                     </template>
                 </DlTable>
             </div>
+
+            <div>
+                <p>Test reactive cells</p>
+                first row:
+                <div class="row">
+                    <dl-input
+                        v-for="(value, key) in tableRows[0]"
+                        :key="key"
+                        v-model="tableRows[0][key]"
+                        :title="key"
+                    />
+                </div>
+
+                <DlTable
+                    :rows="tableRows"
+                    :columns="tableColumns"
+                    title="Table Title"
+                />
+            </div>
         </div>
     </div>
 </template>
@@ -329,7 +408,7 @@ import {
     DlButton
 } from '../components'
 import { defineComponent, ref, computed, nextTick } from 'vue-demi'
-import { times, cloneDeep } from 'lodash'
+import { times, cloneDeep, isNumber } from 'lodash'
 
 const columns = [
     {
@@ -574,7 +653,7 @@ export default defineComponent({
             if (p.page < 1) {
                 p.page = 1
             }
-            if (p.rowsPerPage !== void 0 && p.rowsPerPage < 1) {
+            if (isNumber(p.rowsPerPage) && p.rowsPerPage < 1) {
                 p.rowsPerPage = 0
             }
             return p

package/src/demos/DlTabsDemo.vue

@@ -16,18 +16,107 @@
                 <h1>{{ item.label }}</h1>
             </dl-tab-panel>
         </dl-tab-panels>
+
+        <dl-tabs
+            v-model="selectedTab"
+            :items="tabItems"
+            full-width
+            vertical
+            style="margin-top: 100px"
+            @update:model-value="handleModelValueUpdate"
+        >
+            <template #top-right="props">
+                <div
+                    :style="props.styles"
+                    style="
+                        width: 200px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: flex-end;
+                    "
+                >
+                    <dl-button
+                        flat
+                        size="s"
+                        icon="icon-dl-refresh"
+                        label="Refresh"
+                    />
+                    <dl-button
+                        size="s"
+                        icon="icon-dl-pause"
+                        label="Pause"
+                    />
+                </div>
+            </template>
+        </dl-tabs>
+        <div style="height: 4px" />
+        <dl-tab-panels v-model="selectedTab">
+            <dl-tab-panel
+                v-for="item in tabItems"
+                :key="item.name"
+                class="tabpanel"
+                :name="item.name"
+            >
+                <h1>{{ item.label }}</h1>
+            </dl-tab-panel>
+        </dl-tab-panels>
+
+        With smaller font 14px
+        <dl-tabs
+            v-model="selectedTab"
+            :items="tabItems"
+            style="margin-top: 100px; max-width: 60%"
+            font-size="14px"
+            @update:model-value="handleModelValueUpdate"
+        >
+            <template #top-right="props">
+                <div
+                    :style="props.styles"
+                    style="
+                        width: 200px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: flex-end;
+                    "
+                >
+                    <dl-button
+                        flat
+                        size="s"
+                        icon="icon-dl-refresh"
+                        label="Refresh"
+                    />
+                    <dl-button
+                        size="s"
+                        icon="icon-dl-pause"
+                        label="Pause"
+                    />
+                </div>
+            </template>
+        </dl-tabs>
+        <div style="height: 4px" />
+        <dl-tab-panels v-model="selectedTab">
+            <dl-tab-panel
+                v-for="item in tabItems"
+                :key="item.name"
+                class="tabpanel"
+                :name="item.name"
+            >
+                <h1>{{ item.label }}</h1>
+            </dl-tab-panel>
+        </dl-tab-panels>
     </div>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
-import { DlTabs, DlTabPanel, DlTabPanels } from '../components'
+import { DlTabs, DlTabPanel, DlTabPanels, DlButton } from '../components'
 import { DlTabDetails } from '../components/types'
 
 export default defineComponent({
     components: {
         DlTabs,
         DlTabPanel,
-        DlTabPanels
+        DlTabPanels,
+        DlButton
     },
     data() {
         return {
@@ -56,7 +145,7 @@ export default defineComponent({
     }
 })
 </script>
-<style>
+<style lang="scss" scoped>
 .tabpanel {
     margin: 0 auto;
     padding: 1rem;

package/src/demos/DlTextAreaDemo.vue

@@ -1,22 +1,23 @@
 <template>
     <div style="width: 800px">
+        <div style="font-size: 14px">
+            <span>Max length: </span>
+            <input v-model="maxLength">
+        </div>
         <div style="max-width: 500px; width: 100%">
             <dl-text-area
                 v-model="textAreaValue"
                 placeholder="Type your text..."
                 show-counter
-                :max-length="20"
+                :max-length="maxLength"
+                max-height="500px"
+                title="Text area title"
+                required
+                tooltip="Quis fugiat et non eu proident sit et amet."
+                top-message="Pariatur consequat non sit aliqua labore ad reprehenderit deserunt ullamco incididunt non irure laborum deserunt."
                 enable-resize
-                error
-                error-message="Something went wrong!"
-                @keydown="log"
-                @focus="textAreaFocused = true"
-                @blur="textAreaFocused = false"
+                clear-button-tooltip
             />
-            <div style="margin-left: 20px">
-                <p>Value: {{ textAreaValue }}</p>
-                <p>Status: {{ textAreaFocused ? 'focused' : 'unfocused' }}</p>
-            </div>
         </div>
     </div>
 </template>
@@ -31,14 +32,10 @@ export default defineComponent({
     },
     setup() {
         const textAreaValue = ref('')
-        const textAreaFocused = ref(false)
-
-        const log = (e: KeyboardEvent) => console.log(e)
-
+        const maxLength = ref(20)
         return {
-            log,
-            textAreaValue,
-            textAreaFocused
+            maxLength,
+            textAreaValue
         }
     }
 })

package/src/demos/DlThumbnailGalleryDemo.vue

@@ -0,0 +1,99 @@
+<template>
+    <div class="gallery-wrapper">
+        <div
+            :style="imageContainerStyles"
+            class="image-container"
+        >
+            <dl-thumbnail-gallery
+                v-model="selectedImage"
+                :images="images"
+                invalid-image="/src/demo/DlThumbnailGallery/images/error.png"
+            />
+        </div>
+        <div class="menu">
+            <div class="menu__pagination">
+                {{ selectedIndex }} / {{ images.length }} Items
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed, watch } from 'vue-demi'
+import { DlThumbnailGallery } from '../components'
+
+interface DlThumbnail {
+    name: string
+    src: string
+    status: string
+}
+
+const images: DlThumbnail[] = []
+for (let i = 1; i < 20; i++) {
+    images.push({
+        name: `Image ${i}`,
+        src: `https://picsum.photos/1000/800?random=${i}`,
+        status: ''
+    })
+}
+
+export default defineComponent({
+    components: {
+        DlThumbnailGallery
+    },
+    setup() {
+        const selectedImage = ref()
+        const selectedIndex = ref(0)
+        const imageContainerStyles = computed(() => {
+            return {
+                backgroundImage: `url(${
+                    selectedImage.value?.src || images[0].src
+                })`
+            }
+        })
+        watch(selectedImage, (val) => {
+            selectedIndex.value =
+                images.findIndex(
+                    (element: DlThumbnail) => element.src === val.src
+                ) + 1
+        })
+
+        return { images, selectedImage, imageContainerStyles, selectedIndex }
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.gallery-wrapper {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.image-container {
+    user-select: none;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.menu {
+    display: flex;
+    justify-content: center;
+    cursor: pointer;
+    margin-top: 10px;
+    &__pagination {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: var(--dl-color-medium);
+        font-size: 0.7em;
+        margin: 0px 10px;
+    }
+}
+</style>

package/src/demos/DlToastDemo.vue

@@ -16,10 +16,6 @@
                     type="number"
                     title="Collapse count"
                 />
-                <dl-input
-                    v-model="classItem"
-                    title="Custom class for toast item"
-                />
                 <dl-input
                     v-model="width"
                     title="Custom width for toast item"
@@ -106,6 +102,7 @@ import {
     DlTextArea,
     DlToast
 } from '../components'
+import { DlToastPositions, DlToastTypes } from '../components/types'
 
 export default defineComponent({
     name: 'DlToast',
@@ -124,16 +121,14 @@ export default defineComponent({
         const type = ref('success')
         const position = ref('bottom')
         const closable = ref(true)
-        const classItem = ref('demo-toast')
         const width = ref('auto')
         const collapseCount = ref(null)
         function showToastMessage() {
             DlToast.open({
                 message: message.value,
-                position: position.value,
-                type: type.value,
+                position: position.value as DlToastPositions,
+                type: type.value as DlToastTypes,
                 duration: Number(duration.value) || 1000,
-                classItem: classItem.value,
                 closable: closable.value,
                 width: width.value,
                 collapseCount: collapseCount.value
@@ -145,7 +140,6 @@ export default defineComponent({
             duration,
             type,
             position,
-            classItem,
             closable,
             width,
             collapseCount