@dataloop-ai/components 0.16.45 → 0.16.47

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,55 @@
+<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 { DlToggleButtonOption } from '../components/types'
+import { defineComponent } from 'vue-demi'
+
+export default defineComponent({
+    name: 'DlToggleButtonDemo',
+    components: { DlIcon, DlInput, DlToggleButton },
+    data: () => ({
+        options: [
+            { label: 'Button 1', value: 1 },
+            { label: 'Button 2', value: 2 },
+            { label: 'Button 3', value: 3 }
+        ] as DlToggleButtonOption[],
+        selectedValue: 1,
+        width: '100%'
+    }),
+    computed: {
+        label(): string {
+            const option = this.options.find(
+                (o: DlToggleButtonOption) => o.value === this.selectedValue
+            )
+            return option?.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>

package/src/{demo → demos}/SmartSearchDemo/DlSmartSearchDemo.vue

@@ -10,34 +10,8 @@
         <div
             style="width: 100px"
             class="props"
-        >
-            <select
-                id="status_select"
-                class="prop"
-                placeholder="Status type"
-                @input="updateStatusType"
-            >
-                <option value="info">
-                    Info
-                </option>
-                <option value="warning">
-                    Warning
-                </option>
-                <option value="error">
-                    Error
-                </option>
-                <option value="success">
-                    Success
-                </option>
-            </select>
-            <input
-                class="prop"
-                placeholder="Status Messaee"
-                @input="updateStatusMessage"
-            >
-        </div>
+        />
         <dl-smart-search
-            :status="status"
             :aliases="aliases"
             :schema="schema"
             :color-schema="{
@@ -74,10 +48,6 @@ export default defineComponent({
         return {
             switchState: false,
             isLoading: false,
-            status: {
-                type: 'info',
-                message: ''
-            },
             filters: [
                 {
                     label: 'Saved DQL Queries',
@@ -93,7 +63,7 @@ export default defineComponent({
                         },
                         {
                             name: 'Query 3',
-                            query: ''
+                            query: '{"query3": "query3"}'
                         },
                         {
                             name: 'Query 4',
@@ -143,8 +113,6 @@ export default defineComponent({
             ]
         }
     },
-
-    mounted() {},
     methods: {
         handleSearchQuery({ query }: { query: string }) {
             this.isLoading = true
@@ -154,22 +122,6 @@ export default defineComponent({
                 this.isLoading = false
             }, 2000)
         },
-
-        updateStatusType(e: Event) {
-            const newType = (e.target as HTMLInputElement).value
-            this.status = {
-                type: newType,
-                message: this.status.message
-            }
-        },
-        updateStatusMessage(e: Event) {
-            const newMessage = (e.target as HTMLInputElement).value
-            this.status = {
-                type: this.status.type,
-                message: newMessage
-            }
-        },
-
         handleSaveQuery(query: Query) {
             const saveQueryIndex = this.filters[0].queries.findIndex(
                 (q: Query) => q.name === query.name || q.query === query.query

package/src/{demo → demos}/index.ts

@@ -47,9 +47,14 @@ import DlToastDemo from './DlToastDemo.vue'
 import DlChartDoughnutDemo from './DlChartDoughnutDemo.vue'
 import DlLineChartDemo from './DlLineChartDemo.vue'
 import DlSpinner from './DlSpinnerDemo.vue'
+import DlConfusionMatrix from './DlConfusionMatrixDemo.vue'
+import DlToggleButtonDemo from './DlToggleButtonDemo.vue'
 import DlKpiDemo from './DlKpiDemo.vue'
+import DlEllipsisDemo from './DlEllipsisDemo.vue'
+import DlSeparatorDemo from './DlSeparatorDemo.vue'
+import DlCardDemo from './DlCardDemo.vue'
 
-export {
+export default {
     AvatarDemo,
     DlAlertDemo,
     DlProgressChartDemo,
@@ -92,64 +97,17 @@ export {
     DlWidgetDemo,
     DlRadioDemo,
     DlTextHolderDemo,
-    DlToastDemo as DlToastMessageDemo,
+    DlToastDemo,
     DlColumnChartDemo,
     DlSwitchDemo,
     DlChartDoughnutDemo,
     DlBarChartDemo,
     DlLineChartDemo,
-    DlSpinner
-}
-
-export const demoState = {
-    accordion: AccordionDemo,
-    alert: DlAlertDemo,
-    avatar: AvatarDemo,
-    badge: DlBadgeDemo,
-    button: DlButtonDemo,
-    column_chart: DlColumnChartDemo,
-    bar_chart: DlBarChartDemo,
-    line_chart: DlLineChartDemo,
-    checkbox: DlCheckboxDemo,
-    chip: DlChipDemo,
-    color_picker: DlColorPickerDemo,
-    counter: DlCounterDemo,
-    dialog_box: DlDialogBoxDemo,
-    doughnut_chart: DlChartDoughnutDemo,
-    dropdown_button: DropdownButtonDemo,
-    icon: DlIconDemo,
-    link: DlLinkDemo,
-    list: DlListDemo,
-    menu: DlMenuDemo,
-    option_group: DlOptionGroupDemo,
-    pagination: DlPaginationDemo,
-    panel_container: DlPanelContainerDemo,
-    popup: PopupDemo,
-    progress_bar: DlProgressBarDemo,
-    progress_chart: DlProgressChartDemo,
-    kpi: DlKpiDemo,
-    range: DlRangeDemo,
-    search: DlSearchDemo,
-    select: DlSelectDemo,
-    skeleton: DlSkeletonDemo,
-    slider: DlSliderDemo,
-    stepper: DlStepperDemo,
-    table: DlTableDemo,
-    table_td: DlTdDemo,
-    table_th: DlThDemo,
-    table_tr: DlTrDemo,
-    tabs: TabsDemo,
-    input: DlInputDemo,
-    textarea: DlTextareaDemo,
-    text_holder: DlTextHolderDemo,
-    time_picker: DlDateTimeRangeDemo,
-    tooltip: DlTooltipDemo,
-    trend: DlTrendDemo,
-    typography: DlTypographyDemo,
-    widget: DlWidgetDemo,
-    radio: DlRadioDemo,
-    switch: DlSwitchDemo,
-    smart_search: DlSmartSearchDemo,
-    toast: DlToastDemo,
-    spinner: DlSpinner
+    DlSpinner,
+    DlConfusionMatrix,
+    DlToggleButtonDemo,
+    DlEllipsisDemo,
+    DlSeparatorDemo,
+    DlKpiDemo,
+    DlCardDemo
 }

package/src/hooks/use-arrow-navigation.ts

@@ -0,0 +1,58 @@
+import { ref, onMounted, onBeforeUnmount } from 'vue-demi'
+
+export function useArrowNavigation(items: any, isOpen: any) {
+    const selectedItem = ref(null)
+    const highlightedIndex = ref(-1)
+
+    const handleArrowUp = () => {
+        if (highlightedIndex.value > 0) {
+            highlightedIndex.value--
+        }
+    }
+    const handleArrowDown = () => {
+        if (highlightedIndex.value < items.value.length - 1) {
+            highlightedIndex.value++
+        }
+    }
+    const handleEnter = () => {
+        if (
+            highlightedIndex.value >= 0 &&
+            highlightedIndex.value < items.value.length
+        ) {
+            selectedItem.value = items.value[highlightedIndex.value]
+            resetNavigation()
+        }
+    }
+    const resetNavigation = () => {
+        highlightedIndex.value = -1
+    }
+    const navigateList = (event: KeyboardEvent) => {
+        if (!items.value?.length || !isOpen.value) {
+            return
+        }
+        switch (event.key) {
+            case 'ArrowUp':
+                handleArrowUp()
+                break
+            case 'ArrowDown':
+                handleArrowDown()
+                break
+            case 'Enter':
+                handleEnter()
+                break
+        }
+    }
+
+    onMounted(() => {
+        window.addEventListener('keydown', navigateList)
+    })
+    onBeforeUnmount(() => {
+        window.removeEventListener('keydown', navigateList)
+    })
+
+    return {
+        handleEnter,
+        highlightedIndex,
+        selectedItem
+    }
+}