@dataloop-ai/components 0.16.44 → 0.16.46

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

@@ -486,6 +486,27 @@
                         </dl-list>
                     </dl-menu>
                 </dl-button>
+
+                <h4>Arrow navigation</h4>
+                <dl-button :label="arrowNavigationLabel">
+                    <dl-menu
+                        @show="onShow"
+                        @hide="onHide"
+                    >
+                        <dl-list style="min-width: 100px">
+                            <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-menu>
+                </dl-button>
             </div>
         </div>
     </div>
@@ -500,7 +521,8 @@ import {
     DlList,
     DlMenu
 } from '../components'
-import { defineComponent, onMounted, ref } from 'vue-demi'
+import { defineComponent, onMounted, ref, watch } from 'vue-demi'
+import { useArrowNavigation } from '../hooks/use-arrow-navigation'
 
 export default defineComponent({
     name: 'DlMenuDemo',
@@ -514,11 +536,48 @@ export default defineComponent({
     },
     setup() {
         const showing = ref(false)
+        const isMenuOpen = ref(false)
+        const arrowNavigationLabel = ref('Arrow Navigation Label')
+
+        const listItems = ref([
+            'New tab',
+            'New incognito tab',
+            'Recent tabs',
+            'History',
+            'Downloads',
+            'Settings',
+            'Help & Feedback'
+        ])
+
+        const onShow = (value: any) => {
+            isMenuOpen.value = !!value
+        }
+        const onHide = (value: any) => {
+            isMenuOpen.value = !value
+        }
+        const { selectedItem, highlightedIndex } = useArrowNavigation(
+            listItems,
+            isMenuOpen
+        )
+
+        watch(selectedItem, (value: string) => {
+            arrowNavigationLabel.value = value
+        })
+
         onMounted(() => {
             // @ts-ignore
             window.menuDemo = { showing }
         })
-        return { showing }
+        return {
+            showing,
+            listItems,
+            onShow,
+            onHide,
+            isMenuOpen,
+            selectedItem,
+            highlightedIndex,
+            arrowNavigationLabel
+        }
     }
 })
 </script>

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

@@ -6,7 +6,7 @@
             with-search-btn
             highlight-matches
             placeholder="Search here"
-            :auto-suggest-items="['foo', 'bar']"
+            :auto-suggest-items="suggestItems"
         />
     </div>
 </template>
@@ -21,7 +21,8 @@ export default defineComponent({
     },
     setup() {
         const searchValue = ref<string>('')
-        return { searchValue }
+        const suggestItems = ['foo', 'foo bar', 'bar', 'bar foo']
+        return { searchValue, suggestItems }
     }
 })
 </script>

package/src/demos/DlSeparatorDemo.vue

@@ -0,0 +1,44 @@
+<template>
+    <div>
+        <div style="display: flex">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas
+                eos amet, nobis unde animi atque itaque? Provident suscipit enim
+                eos sequi dolor minima optio tempora error tenetur, autem
+                ratione cumque!
+            </p>
+            <DlSeparator type="vertical" />
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas
+                eos amet, nobis unde animi atque itaque? Provident suscipit enim
+                eos sequi dolor minima optio tempora error tenetur, autem
+                ratione cumque!
+            </p>
+        </div>
+        <div>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas
+                eos amet, nobis unde animi atque itaque? Provident suscipit enim
+                eos sequi dolor minima optio tempora error tenetur, autem
+                ratione cumque!
+            </p>
+            <DlSeparator width="100%" />
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas
+                eos amet, nobis unde animi atque itaque? Provident suscipit enim
+                eos sequi dolor minima optio tempora error tenetur, autem
+                ratione cumque!
+            </p>
+        </div>
+    </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue-demi'
+import { DlSeparator } from '../components'
+
+export default defineComponent({
+    name: 'DlSeparatorDemo',
+    components: { DlSeparator }
+})
+</script>

package/src/demos/DlSpinnerDemo.vue

@@ -0,0 +1,59 @@
+<template>
+    <div class="spinner-dl">
+        <div class="spinner-container">
+            <span class="spinner-title">Dl Spinner</span>
+            <dl-spinner
+                type="default"
+                text="Loading..."
+                :text-styles="{
+                    fontSize: '1em',
+                    marginTop: '15px',
+                    marginLeft: '10px'
+                }"
+            />
+        </div>
+
+        <div class="spinner-container">
+            <span class="spinner-title">Circle Spinner</span>
+            <dl-spinner type="circle" />
+        </div>
+
+        <div class="spinner-container">
+            <span class="spinner-title">Grid Spinner</span>
+            <dl-spinner type="grid" />
+        </div>
+
+        <div class="spinner-container">
+            <span class="spinner-title">Dots Spinner</span>
+            <dl-spinner type="dots" />
+        </div>
+
+        <div class="spinner-container">
+            <span class="spinner-title">Clock Spinner</span>
+            <dl-spinner type="clock" />
+        </div>
+    </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue-demi'
+import { DlSpinner } from '../components'
+
+export default defineComponent({
+    components: {
+        DlSpinner
+    }
+})
+</script>
+
+<style lang="scss">
+.spinner-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.spinner-title {
+    margin-bottom: 20px;
+}
+</style>

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

@@ -96,7 +96,7 @@
             <DlTable
                 :selected="selected"
                 :separator="separator"
-                :columns="columns"
+                :columns="tableColumns"
                 :bordered="bordered"
                 :draggable="draggable"
                 :dense="dense"
@@ -104,7 +104,7 @@
                 :filter="filter"
                 :selection="selection"
                 :loading="loading"
-                :rows="rows"
+                :rows="tableRows"
                 :resizable="resizable"
                 row-key="name"
                 color="dl-color-secondary"
@@ -121,7 +121,7 @@
                 <DlTable
                     :selected="selected"
                     :separator="separator"
-                    :columns="columns"
+                    :columns="tableColumns"
                     :bordered="bordered"
                     :draggable="draggable"
                     :pagination="pagination"
@@ -215,6 +215,30 @@
                         @click="lastPage"
                     />
                 </div>
+
+                <div style="margin-top: 100px">
+                    <p>Infinite scrolling</p>
+                    <DlTable
+                        :selected="selected"
+                        :separator="separator"
+                        :draggable="draggable"
+                        class="sticky-header"
+                        :filter="filter"
+                        :selection="selection"
+                        :dense="dense"
+                        title="Treats"
+                        color="dl-color-secondary"
+                        :loading="infiniteLoading"
+                        :rows="computedRows"
+                        :columns="tableColumns"
+                        style="height: 500px"
+                        row-key="index"
+                        :pagination="{ rowsPerPage: 0 }"
+                        virtual-scroll
+                        :rows-per-page-options="[0]"
+                        @virtual-scroll="onScroll"
+                    />
+                </div>
             </div>
             <div>
                 <p>#no-data & #pagination declare together</p>
@@ -259,8 +283,8 @@ import {
     DlInput,
     DlButton
 } from '../components'
-import { defineComponent, ref, computed, watch } from 'vue-demi'
-import { times } from 'lodash'
+import { defineComponent, ref, computed, nextTick } from 'vue-demi'
+import { times, cloneDeep } from 'lodash'
 
 const columns = [
     {
@@ -413,6 +437,12 @@ const rows = [
     }))
 ]
 
+type Rows = (typeof rows)[0]
+
+interface RowsWithIndex extends Rows {
+    index?: number
+}
+
 export default defineComponent({
     components: {
         DlTable,
@@ -422,6 +452,67 @@ export default defineComponent({
         DlButton
     },
     setup() {
+        const filter = ref('')
+        const selected = ref([])
+        const selection = ref('none')
+        const separator = ref('horizontal')
+        const bordered = ref(false)
+        const loading = ref(false)
+        const dense = ref(false)
+        const vScroll = ref(false)
+        const resizable = ref(false)
+        const borderState = ref([])
+        const denseState = ref([])
+        const virtualScroll = ref([])
+        const resizableState = ref([])
+        const tableRows = ref(cloneDeep(rows))
+        const draggable = ref('both')
+        const tableColumns = ref(columns)
+        const rowsPerPageOptions = ref([10, 12, 14, 16])
+
+        const infiniteLoading = ref(false)
+
+        const nextPageNumber = ref(2)
+
+        let allRows: RowsWithIndex[] = []
+        for (let i = 0; i < 100; i++) {
+            allRows = allRows.concat(
+                cloneDeep(rows)
+                    .slice(0)
+                    .map((r) => ({ ...r }))
+            )
+        }
+        allRows.forEach((row, index) => {
+            row.index = index
+        })
+
+        const pageSize = 50
+        const lastPageNumber = Math.ceil(allRows.length / pageSize)
+
+        const computedRows = computed(() =>
+            allRows.slice(0, pageSize * (nextPageNumber.value - 1))
+        )
+
+        const onScroll = ({ to, ref }: { to: number; ref: any }) => {
+            const lastIndex = computedRows.value.length - 1
+
+            if (
+                infiniteLoading.value !== true &&
+                nextPageNumber.value < lastPageNumber &&
+                to === lastIndex
+            ) {
+                infiniteLoading.value = true
+
+                setTimeout(() => {
+                    nextPageNumber.value++
+                    nextTick(() => {
+                        ref.refresh()
+                        infiniteLoading.value = false
+                    })
+                }, 500)
+            }
+        }
+
         const pagination = ref({
             sortBy: 'desc',
             descending: false,
@@ -467,8 +558,6 @@ export default defineComponent({
             }
         }
 
-        const tableRows = ref(rows)
-
         function nextPage() {
             const { page, rowsPerPage } = pagination.value
 
@@ -491,9 +580,28 @@ export default defineComponent({
         }
 
         return {
+            filter,
+            selected,
+            selection,
+            separator,
+            bordered,
+            loading,
+            dense,
+            vScroll,
+            resizable,
+            denseState,
+            borderState,
+            virtualScroll,
+            resizableState,
+            tableRows,
+            draggable,
+            tableColumns,
+            rowsPerPageOptions,
+            onScroll,
+            computedRows,
+            infiniteLoading,
             pagination,
             pagesNumber,
-            tableRows,
             firstPage,
             lastPage,
             nextPage,
@@ -502,27 +610,7 @@ export default defineComponent({
             isFirstPage
         }
     },
-    data() {
-        return {
-            filter: '',
-            selected: [],
-            selection: 'none',
-            separator: 'horizontal',
-            bordered: false,
-            loading: false,
-            dense: false,
-            vScroll: false,
-            resizable: false,
-            borderState: [] as boolean[],
-            denseState: [] as boolean[],
-            virtualScroll: [] as boolean[],
-            resizableState: [] as boolean[],
-            rows,
-            draggable: 'both',
-            columns,
-            rowsPerPageOptions: [10, 12, 14, 16]
-        }
-    },
+
     methods: {
         addRowPerPage() {
             this.rowsPerPageOptions.push(

package/src/demos/DlToggleButtonDemo.vue

@@ -0,0 +1,57 @@
+<template>
+    <div style="width: 950px; padding-top: 20px">
+        <dl-input
+            v-model="width"
+            title="Custom width container"
+        />
+        <DlToggleButton
+            v-model="selectedValue"
+            :options="options"
+            :width="width"
+            @change="change"
+        >
+            <template #button-1>
+                <p>
+                    Changed with slot
+                    <DlIcon icon="icon-dl-info-filled" />
+                </p>
+            </template>
+        </DlToggleButton>
+        Selected button: {{ label || 'Not selected' }}
+    </div>
+</template>
+
+<script lang="ts">
+import { DlIcon, DlInput, DlToggleButton } from '../components'
+import { defineComponent } from 'vue-demi'
+
+export default defineComponent({
+    name: 'DlToggleButtonDemo',
+    components: { DlIcon, DlInput, DlToggleButton },
+    setup() {
+        return {
+            DlToggleButton
+        }
+    },
+    data: () => ({
+        options: [
+            { label: 'Button 1', value: 1 },
+            { label: 'Button 2', value: 2 },
+            { label: 'Button 3', value: 3 }
+        ],
+        selectedValue: 1,
+        width: '100%'
+    }),
+    computed: {
+        label() {
+            return this.options.find((o) => o.value === this.selectedValue)
+                ?.label
+        }
+    },
+    methods: {
+        change(val: any) {
+            console.log(val)
+        }
+    }
+})
+</script>

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

@@ -39,21 +39,62 @@
             voluptate commodi molestiae animi fuga natus assumenda aliquam ad?
             Dicta harum recusandae rem!
         </p>
+        <div>
+            Show smart tooltip
+            <dl-tooltip
+                :hide-delay="delay"
+                style="padding: 0; border-radius: 2px"
+            >
+                <DlCard
+                    :image="image"
+                    :text="text"
+                    :title="title"
+                    :keyboard-shortcut="keyboardShortcut"
+                    :links="links"
+                />
+            </dl-tooltip>
+        </div>
     </div>
 </template>
 
 <script lang="ts">
-import { DlTooltip, DlLink } from '../components'
+import { DlTooltip, DlLink, DlCard } from '../components'
 import { defineComponent } from 'vue-demi'
 
 export default defineComponent({
     name: 'DlTooltipDemo',
     components: {
+        DlCard,
         DlTooltip,
         DlLink
     },
     data() {
-        return {}
+        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. ',
+            icon: {
+                src: 'icon-dl-search'
+            },
+            image: {
+                src: 'https://i0.wp.com/www.printmag.com/wp-content/uploads/2021/02/4cbe8d_f1ed2800a49649848102c68fc5a66e53mv2.gif?fit=476%2C280&ssl=1'
+            },
+            delay: 100000,
+            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'
+                }
+            ]
+        }
     },
     template: 'dl-tooltip-demo'
 })

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

@@ -1,6 +1,12 @@
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
-import { DlWidget, DlGridRow, DlGrid, DlBarChart } from '../components'
+import {
+    DlWidget,
+    DlGridRow,
+    DlGrid,
+    DlBarChart,
+    DlConfusionMatrix
+} from '../components'
 
 const labelsFn = () => {
     const a = []
@@ -36,15 +42,34 @@ const data = {
     ]
 }
 
+const matrix: number[][] = []
+const labels: string[] = []
+const size: number = 10
+
+for (let i = 0; i < size; i++) {
+    const row = []
+    for (let j = 0; j < size; j++) {
+        row.push(Math.floor(Math.random() * 10))
+    }
+    matrix.push(row)
+}
+
+const items = ['Van', 'Truck', 'Motorcycle', 'Car', 'Bus']
+
+for (let i = 0; i < size; i++) {
+    labels.push(items[Math.floor(Math.random() * items.length)])
+}
+
 export default defineComponent({
     components: {
         DlGrid,
         DlWidget,
         DlBarChart,
-        DlGridRow
+        DlGridRow,
+        DlConfusionMatrix
     },
     setup() {
-        return { data }
+        return { data, labels, matrix }
     }
 })
 </script>
@@ -55,29 +80,19 @@ export default defineComponent({
             <dl-grid-row>
                 <dl-widget>
                     <template #header>
-                        <span>Widget 1</span>
+                        <span>Widget 7</span>
                         <span style="font-size: 12px; color: gray">Subtitle</span>
                     </template>
-                    <template #menu>
-                        <div>
-                            Menu
-                            <div />
-                        </div>
-                    </template>
                     <template #content>
-                        <dl-bar-chart
-                            :legend-props="legendProps"
-                            :data="data"
-                            :options="options"
-                            :items-in-view="8"
+                        <dl-confusion-matrix
+                            :matrix="matrix"
+                            :labels="labels"
                         />
                     </template>
                     <template #description>
                         <span>Lorem ipsum dolor sit amet consectetur adipisicing
-                            elit. Libero eligendi dolore, similique possimus
-                            veritatis in vitae quia praesentium fuga quibusdam
-                            autem. Doloremque tenetur repudiandae a cupiditate
-                            modi dicta eveniet veritatis?</span>
+                            elit. Libero eligee a cupiditate modi dicta eveniet
+                            veritatis?</span>
                     </template>
                 </dl-widget>
             </dl-grid-row>