@dataloop-ai/components 0.16.44 → 0.16.46

package/src/{demo → demos}/DlButtonDemo.vue

@@ -10,7 +10,7 @@
                     <DlButton
                         :size="buttonSize"
                         color="dl-color-negative"
-                        label="COntained text filled"
+                        label="Contained text filled"
                         @click="log"
                     />
                     <DlButton
@@ -230,6 +230,33 @@
                 />
             </dl-button>
         </div>
+        <div>
+            <h3>Button with icon no label and menu</h3>
+            <p>should not have extra margin in right</p>
+            <dl-button icon="icon-dl-search">
+                <dl-menu>
+                    <dl-list>
+                        <dl-list-item>item 1</dl-list-item>
+                        <dl-list-item> item 2</dl-list-item>
+                    </dl-list>
+                </dl-menu>
+            </dl-button>
+        </div>
+        <div>
+            <h3>Button with icon no label and menu</h3>
+            <p>should have</p>
+            <dl-button icon="icon-dl-search">
+                <div>
+                    test
+                    <dl-menu>
+                        <dl-list>
+                            <dl-list-item>item 1</dl-list-item>
+                            <dl-list-item> item 2</dl-list-item>
+                        </dl-list>
+                    </dl-menu>
+                </div>
+            </dl-button>
+        </div>
     </div>
 </template>
 
@@ -237,9 +264,16 @@
 import { defineComponent, reactive } from 'vue-demi'
 import { DlButton, DlBadge, DlIcon } from '../components'
 import { ButtonSizes } from '../components/basic/DlButton/utils'
+import DlMenu from '../components/essential/DlMenu/DlMenu.vue'
+import DlList from '../components/essential/DlList/DlList.vue'
+import DlListItem from '../components/basic/DlListItem/DlListItem.vue'
+
 export default defineComponent({
     name: 'DlButtonDemo',
     components: {
+        DlListItem,
+        DlList,
+        DlMenu,
         DlButton,
         DlBadge,
         DlIcon
@@ -260,6 +294,7 @@ export default defineComponent({
     flex-wrap: wrap;
     min-width: 0;
     max-width: 100%;
+
     & > button,
     & > div.dl-chip {
         margin: 0 0 0 8px;

package/src/demos/DlCardDemo.vue

@@ -0,0 +1,47 @@
+<template>
+    <div>
+        <DlCard
+            :image="image"
+            :text="text"
+            :title="title"
+            :keyboard-shortcut="keyboardShortcut"
+            :links="links"
+        />
+    </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue-demi'
+import { DlCard } from '../components'
+
+export default defineComponent({
+    name: 'DlCardDemo',
+    components: {
+        DlCard
+    },
+    data() {
+        return {
+            text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Egestas volutpat quam blandit integer mattis. consectetur adipiscing elit. Egestas volutpat quam blandit integer mattis. ',
+            image: {
+                src: 'https://i0.wp.com/www.printmag.com/wp-content/uploads/2021/02/4cbe8d_f1ed2800a49649848102c68fc5a66e53mv2.gif?fit=476%2C280&ssl=1'
+            },
+            title: 'Lorem ipsum',
+            keyboardShortcut: 'Shift + E',
+            links: [
+                {
+                    icon: 'icon-dl-list-view',
+                    href: 'https://www.google.md/?hl=ru',
+                    title: 'Lorem',
+                    newtab: true,
+                    external: true
+                },
+                {
+                    href: '#test',
+                    title: 'Developers',
+                    icon: 'icon-dl-code'
+                }
+            ]
+        }
+    }
+})
+</script>

package/src/{demo → demos}/DlColorPickerDemo.vue

@@ -7,7 +7,10 @@
             @changeColor="onColorChange"
             @updateColor="onColorUpdate"
         />
-        <h1 :style="{ color: colorPickerValue }">
+        <h1
+            class="textShadow"
+            :style="{ color: colorPickerValue }"
+        >
             The chosen color is {{ colorPickerValue }}
         </h1>
     </div>
@@ -38,6 +41,18 @@ export default defineComponent({
                 ...colorsHistory.value
             ].slice(0, 7)
         }
+
+        return {
+            colorPickerValue,
+            colorsHistory,
+            onColorChange,
+            onColorUpdate
+        }
     }
 })
 </script>
+<style lang="scss">
+.textShadow {
+    text-shadow: 1px 1px 2px var(--dl-color-darker);
+}
+</style>

package/src/demos/DlConfusionMatrixDemo.vue

@@ -0,0 +1,53 @@
+<template>
+    <dl-confusion-matrix
+        :matrix="matrix"
+        :labels="labels"
+    />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { DlConfusionMatrix } from '../components'
+export default defineComponent({
+    components: {
+        DlConfusionMatrix
+    },
+    setup() {
+        const matrix = []
+        const labels = []
+        const size = 10
+
+        const getLink = (number: number) => {
+            return `www.confusion-matrix.com/cell-${number}`
+        }
+
+        for (let i = 0; i < size; i++) {
+            const row = []
+            for (let j = 0; j < size; j++) {
+                const value = Math.floor(Math.random() * 10)
+                row.push({
+                    value,
+                    link: getLink(value)
+                })
+            }
+            matrix.push(row)
+        }
+
+        // const items = [
+        //     { title: 'Van', image: 'https://picsum.photos/200/200' },
+        //     { title: 'Truck', image: 'https://picsum.photos/200/200' },
+        //     { title: 'Motorcycle', image: 'https://picsum.photos/200/200'},
+        //     { title: 'Car', image: 'https://picsum.photos/200/200'},
+        //     { title: 'Bus', image: 'https://picsum.photos/200/200'}
+        // ]
+
+        const items = ['Van', 'Truck', 'Motorcycle', 'Car', 'Bus']
+
+        for (let i = 0; i < size; i++) {
+            labels.push(items[Math.floor(Math.random() * items.length)])
+        }
+
+        return { matrix, labels, getLink }
+    }
+})
+</script>

package/src/{demo → demos}/DlDialogBoxDemo.vue

@@ -103,7 +103,10 @@
             </template>
             <template #footer>
                 <dl-dialog-box-footer>
-                    <dl-button @click="openSecondModal">
+                    <dl-button
+                        outlined
+                        @click="openSecondModal"
+                    >
                         Open second modal
                     </dl-button>
                     <dl-button @click="closeModal">

package/src/demos/DlDropdownButtonDemo.vue

@@ -0,0 +1,386 @@
+<template>
+    <div>
+        <div style="display: flex; gap: 20px; flex-direction: column">
+            <h2>Splitted</h2>
+            <dl-dropdown-button
+                auto-close
+                outlined
+                split
+                label="Dropdown Button Outlined"
+            >
+                <dl-list>
+                    <dl-list-item clickable>
+                        <dl-item-section> Photos </dl-item-section>
+                    </dl-list-item>
+
+                    <dl-list-item clickable>
+                        <dl-item-section> Videos </dl-item-section>
+                    </dl-list-item>
+
+                    <dl-list-item clickable>
+                        <dl-item-section> Articles </dl-item-section>
+                    </dl-list-item>
+                </dl-list>
+            </dl-dropdown-button>
+
+            <dl-dropdown-button
+                disabled
+                auto-close
+                outlined
+                split
+                label="Dropdown Button Outlined"
+            >
+                <dl-list>
+                    <dl-list-item clickable>
+                        <dl-item-section> Photos </dl-item-section>
+                    </dl-list-item>
+
+                    <dl-list-item clickable>
+                        <dl-item-section> Videos </dl-item-section>
+                    </dl-list-item>
+
+                    <dl-list-item clickable>
+                        <dl-item-section> Articles </dl-item-section>
+                    </dl-list-item>
+                </dl-list>
+            </dl-dropdown-button>
+
+            <dl-dropdown-button
+                split
+                label="Dropdown Button Contained"
+            >
+                <dl-list>
+                    <dl-list-item clickable>
+                        <dl-item-section> Photos </dl-item-section>
+                    </dl-list-item>
+
+                    <dl-list-item clickable>
+                        <dl-item-section> Videos </dl-item-section>
+                    </dl-list-item>
+
+                    <dl-list-item clickable>
+                        <dl-item-section> Articles </dl-item-section>
+                    </dl-list-item>
+                </dl-list>
+            </dl-dropdown-button>
+
+            <dl-dropdown-button
+                v-model="showing"
+                auto-close
+                split
+                :label="name"
+                main-btn-style="width: 120px"
+                @click="onClick"
+            >
+                <dl-list>
+                    <dl-list-item
+                        clickable
+                        @click="() => onClose('Photos')"
+                    >
+                        <dl-item-section> Photos </dl-item-section>
+                    </dl-list-item>
+
+                    <dl-list-item
+                        clickable
+                        @click="() => onClose('Videos and long text')"
+                    >
+                        <dl-item-section :no-wrap="true">
+                            Videos and long text ideos and long text ideos and
+                            long text ideos and long text ideos and long text
+                        </dl-item-section>
+                    </dl-list-item>
+
+                    <dl-list-item
+                        clickable
+                        @click="() => onClose('Articles')"
+                    >
+                        <dl-item-section> Articles </dl-item-section>
+                    </dl-list-item>
+                </dl-list>
+            </dl-dropdown-button>
+        </div>
+
+        <div style="display: flex; gap: 20px; flex-direction: column">
+            <h2>One Button</h2>
+            <div
+                class="grid grid-cols-3"
+                style="column-gap: 10px"
+            >
+                <dl-dropdown-button
+                    auto-close
+                    outlined
+                    label="Dropdown Button Outlined"
+                >
+                    <dl-list>
+                        <dl-list-item clickable>
+                            <dl-item-section> Photos </dl-item-section>
+                        </dl-list-item>
+
+                        <dl-list-item clickable>
+                            <dl-item-section> Videos </dl-item-section>
+                        </dl-list-item>
+
+                        <dl-list-item clickable>
+                            <dl-item-section> Articles </dl-item-section>
+                        </dl-list-item>
+                    </dl-list>
+                </dl-dropdown-button>
+
+                <dl-dropdown-button
+                    disabled
+                    auto-close
+                    outlined
+                    label="Dropdown Button Outlined"
+                >
+                    <dl-list>
+                        <dl-list-item clickable>
+                            <dl-item-section> Photos </dl-item-section>
+                        </dl-list-item>
+
+                        <dl-list-item clickable>
+                            <dl-item-section> Videos </dl-item-section>
+                        </dl-list-item>
+
+                        <dl-list-item clickable>
+                            <dl-item-section> Articles </dl-item-section>
+                        </dl-list-item>
+                    </dl-list>
+                </dl-dropdown-button>
+
+                <dl-dropdown-button
+                    auto-close
+                    label="Dropdown Button Contained"
+                    max-height="210px"
+                >
+                    <dl-list>
+                        <dl-list-item clickable>
+                            <dl-item-section> Photos </dl-item-section>
+                        </dl-list-item>
+
+                        <dl-list-item clickable>
+                            <dl-item-section> Videos </dl-item-section>
+                        </dl-list-item>
+
+                        <dl-list-item clickable>
+                            <dl-item-section> Articles </dl-item-section>
+                        </dl-list-item>
+                        <dl-list-item clickable>
+                            <dl-item-section> Photos </dl-item-section>
+                        </dl-list-item>
+
+                        <dl-list-item clickable>
+                            <dl-item-section> Videos </dl-item-section>
+                        </dl-list-item>
+
+                        <dl-list-item clickable>
+                            <dl-item-section> Articles </dl-item-section>
+                        </dl-list-item>
+                        <dl-list-item clickable>
+                            <dl-item-section> Photos </dl-item-section>
+                        </dl-list-item>
+
+                        <dl-list-item clickable>
+                            <dl-item-section> Videos </dl-item-section>
+                        </dl-list-item>
+
+                        <dl-list-item clickable>
+                            <dl-item-section> Articles </dl-item-section>
+                        </dl-list-item>
+                    </dl-list>
+                </dl-dropdown-button>
+            </div>
+
+            <div
+                class="grid grid-cols-3"
+                style="column-gap: 10px"
+            >
+                <dl-dropdown-button
+                    auto-close
+                    :model-value="showing"
+                    :label="name"
+                    main-btn-style="width: 150px;"
+                    @show="onOpen"
+                >
+                    <dl-list>
+                        <dl-list-item
+                            clickable
+                            @click="() => onClose('Photos')"
+                        >
+                            <dl-item-section> Photos </dl-item-section>
+                        </dl-list-item>
+
+                        <dl-list-item
+                            clickable
+                            @click="() => onClose('Videos and long text')"
+                        >
+                            <dl-item-section>
+                                Videos and long text
+                            </dl-item-section>
+                        </dl-list-item>
+                        <dl-list-item
+                            clickable
+                            @click="() => onClose('Movies and long text')"
+                        >
+                            <dl-item-section>
+                                Movies and long text
+                            </dl-item-section>
+                        </dl-list-item>
+
+                        <dl-list-item
+                            clickable
+                            @click="() => onClose('Articles')"
+                        >
+                            <dl-item-section> Articles </dl-item-section>
+                        </dl-list-item>
+                    </dl-list>
+                </dl-dropdown-button>
+
+                <dl-dropdown-button
+                    auto-close
+                    :model-value="showing"
+                    label="Ellipsis for very long text"
+                    main-btn-style="width: 150px;"
+                    :overflow="true"
+                    :no-wrap="true"
+                    tooltip="Tooltip message"
+                    @show="onOpen"
+                >
+                    <dl-list>
+                        <dl-list-item
+                            clickable
+                            @click="() => onClose('Photos')"
+                        >
+                            <dl-item-section> Photos </dl-item-section>
+                        </dl-list-item>
+
+                        <dl-list-item
+                            clickable
+                            @click="() => onClose('Videos and long text')"
+                        >
+                            <dl-item-section :no-wrap="true">
+                                <dl-ellipsis
+                                    text="Very very very very long long long long text text text"
+                                    :middle-ellipsis="true"
+                                />
+                            </dl-item-section>
+                        </dl-list-item>
+                        <dl-list-item
+                            clickable
+                            @click="() => onClose('Movies and long text')"
+                        >
+                            <dl-item-section :no-wrap="true">
+                                <dl-ellipsis
+                                    text="Very very very very long long long long text text text"
+                                />
+                            </dl-item-section>
+                        </dl-list-item>
+
+                        <dl-list-item
+                            clickable
+                            @click="() => onClose('Articles')"
+                        >
+                            <dl-item-section> Articles </dl-item-section>
+                        </dl-list-item>
+                    </dl-list>
+                </dl-dropdown-button>
+
+                <dl-dropdown-button
+                    auto-close
+                    :model-value="showing"
+                    :label="arrowNavigationLabel"
+                    main-btn-style="width: 150px;"
+                    :overflow="true"
+                    :no-wrap="true"
+                    tooltip="Tooltip message"
+                    :arrow-nav-items="listItems"
+                    @show="onOpen"
+                    @highlightedIndex="setHighlightedIndex"
+                    @handleSelectedItem="handleSelectedItem"
+                >
+                    <dl-list>
+                        <dl-list-item
+                            v-for="(item, index) in listItems"
+                            :key="index"
+                            clickable
+                            :is-highlighted="index === highlightedIndex"
+                        >
+                            <dl-item-section>
+                                {{ item }}
+                            </dl-item-section>
+                        </dl-list-item>
+                    </dl-list>
+                </dl-dropdown-button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue-demi'
+import {
+    DlListItem,
+    DlItemSection,
+    DlList,
+    DlDropdownButton,
+    DlEllipsis
+} from '../components'
+
+export default defineComponent({
+    name: 'DlDropdownButtonDemo',
+    components: {
+        DlListItem,
+        DlItemSection,
+        DlList,
+        DlDropdownButton,
+        DlEllipsis
+    },
+    setup() {
+        const highlightedIndex = ref(-1)
+        const name = ref('Dropdown Button Controlled')
+        const showing = ref(false)
+        const arrowNavigationLabel = ref('Arrow Navigation Label')
+
+        const listItems = ref([
+            'New tab',
+            'New incognito tab',
+            'Recent tabs',
+            'History',
+            'Downloads',
+            'Settings',
+            'Help & Feedback'
+        ])
+
+        const handleSelectedItem = (value: any) => {
+            arrowNavigationLabel.value = value
+            showing.value = false
+        }
+        const onClose = (newName: string) => {
+            name.value = newName
+            showing.value = false
+            alert(name.value)
+        }
+        const onOpen = () => {
+            showing.value = true
+        }
+        const onClick = () => {
+            alert(name.value)
+        }
+        const setHighlightedIndex = (value: number) => {
+            highlightedIndex.value = value
+        }
+
+        return {
+            listItems,
+            onClose,
+            onOpen,
+            onClick,
+            name,
+            showing,
+            setHighlightedIndex,
+            handleSelectedItem,
+            highlightedIndex,
+            arrowNavigationLabel
+        }
+    }
+})
+</script>

package/src/demos/DlEllipsisDemo.vue

@@ -0,0 +1,30 @@
+<template>
+    <div style="width: 90%">
+        <div style="white-space: nowrap; width: 350px">
+            <p style="font-weight: bold">
+                Ellipsis at the end
+            </p>
+            <dl-ellipsis
+                text="Lorem ipsum dolor sit amet consectetur adipisicing elit."
+            />
+        </div>
+        <div style="white-space: nowrap; width: 350px">
+            <p style="font-weight: bold">
+                Ellipsis at the middle
+            </p>
+            <dl-ellipsis
+                text="Lorem ipsum dolor sit amet consectetur adipisicing elit. "
+                middle-ellipsis="true"
+            />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { DlEllipsis } from '../components'
+
+export default defineComponent({
+    components: { DlEllipsis }
+})
+</script>

package/src/{demo → demos}/DlLineChartDemo.vue

@@ -282,29 +282,29 @@ const data = {
     datasets: [
         {
             label: 'Discarded',
-            backgroundColor: '--dl-color-secondary',
-            borderColor: '--dl-color-secondary',
+            backgroundColor: '--dl-color-chart-7',
+            borderColor: '--dl-color-chart-7',
             pointRadius: 4,
             data: randomIntFromInterval(0, 4)
         },
         {
             label: 'Undiscarded',
-            backgroundColor: '--dl-color-warning',
-            borderColor: '--dl-color-warning',
+            backgroundColor: '--dl-color-chart-1',
+            borderColor: '--dl-color-chart-1',
             pointRadius: 4,
             data: randomIntFromInterval(2, 6)
         },
         {
             label: 'Completed',
-            backgroundColor: '--dl-color-positive',
-            borderColor: '--dl-color-positive',
+            backgroundColor: '--dl-color-chart-14',
+            borderColor: '--dl-color-chart-14',
             pointRadius: 4,
             data: randomIntFromInterval(1, 5)
         },
         {
             label: 'Uncompleted',
-            backgroundColor: '--dl-color-negative',
-            borderColor: '--dl-color-negative',
+            backgroundColor: '--dl-color-secondary',
+            borderColor: '--dl-color-secondary',
             pointRadius: 4,
             data: randomIntFromInterval(0, 5)
         }