@dataloop-ai/components 0.18.75 → 0.18.77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.18.75",
+  "version": "0.18.77",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

package/src/components/basic/DlAccordion/DlAccordion.vue

@@ -50,6 +50,14 @@ import { DlEmptyStateProps } from '../DlEmptyState/types'
 import { defineComponent, PropType } from 'vue-demi'
 import { v4 } from 'uuid'
 
+const accordionEmptyStateProps = {
+    title: '',
+    subtitle: 'No content to show',
+    icon: '',
+    align: 'left',
+    subtitleSize: '12px'
+}
+
 export default defineComponent({
     name: 'DlAccordion',
     components: {
@@ -71,7 +79,7 @@ export default defineComponent({
         isEmpty: Boolean,
         emptyStateProps: {
             type: Object as PropType<DlEmptyStateProps>,
-            default: null
+            default: accordionEmptyStateProps
         }
     },
     emits: ['update:model-value', 'hide', 'show'],

package/src/components/basic/DlKpi/DlKpi.vue

@@ -5,7 +5,9 @@
     >
         <div class="kpi_box__counter">
             <dl-typography
-                color="dl-color-secondary"
+                :color="
+                    counter.value ? 'dl-color-secondary' : 'dl-color-medium'
+                "
                 variant="h1"
                 :size="counterFontSizeComputed"
             >

package/src/components/compound/DlCharts/charts/DlBarChart/DlBarChart.vue

@@ -109,6 +109,11 @@ import { useThemeVariables } from '../../../../../hooks/use-theme'
 import { DlEmptyStateProps } from '../../../../basic/DlEmptyState/types'
 import DlEmptyState from '../../../../basic/DlEmptyState/DlEmptyState.vue'
 
+const barChartEmptyStateProps = {
+    subtitle:
+        'There was a problem processing the request. Please refresh the page.'
+}
+
 ChartJS.register(
     CategoryScale,
     LinearScale,
@@ -141,7 +146,7 @@ export default defineComponent({
         isEmpty: Boolean,
         emptyStateProps: {
             type: Object as PropType<DlEmptyStateProps>,
-            default: null
+            default: barChartEmptyStateProps
         }
     },
     setup(props) {

package/src/components/compound/DlCharts/charts/DlColumnChart/DlColumnChart.vue

@@ -140,6 +140,12 @@ import { updateKeys } from '../../../../../utils/update-key'
 import { useThemeVariables } from '../../../../../hooks/use-theme'
 import { getMaxDatasetValue } from '../../utils'
 
+const columnChartEmptyStateProps = {
+    title: 'Something went wrong',
+    subtitle:
+        'There was a problem processing the request. Please refresh the page.'
+}
+
 ChartJS.register(
     Title,
     Tooltip,
@@ -175,7 +181,7 @@ export default defineComponent({
         isEmpty: Boolean,
         emptyStateProps: {
             type: Object as PropType<DlEmptyStateProps>,
-            default: null
+            default: columnChartEmptyStateProps
         },
         ...CommonProps,
         ...ColumnChartProps

package/src/components/compound/DlCharts/charts/DlConfusionMatrix/DlConfusionMatrix.vue

@@ -238,6 +238,11 @@ import {
 } from './utils'
 import { debounce, isObject } from 'lodash'
 import { stateManager } from '../../../../../StateManager'
+
+const confusionMatrixEmptyStateProps = {
+    subtitle:
+        'There was a problem processing the request. Please refresh the page.'
+}
 export default defineComponent({
     components: {
         DlBrush,
@@ -282,7 +287,7 @@ export default defineComponent({
         isEmpty: Boolean,
         emptyStateProps: {
             type: Object as PropType<DlEmptyStateProps>,
-            default: null
+            default: confusionMatrixEmptyStateProps
         }
     },
     setup(props) {

package/src/components/compound/DlCharts/charts/DlDoughnutChart/DlDoughnutChart.vue

@@ -93,6 +93,11 @@ import {
     DoughnutControllerChartOptions
 } from 'chart.js'
 
+const doughnutChartEmptyStateProps = {
+    subtitle:
+        'There was a problem processing the request. Please refresh the page.'
+}
+
 ChartJS.register(Tooltip, Legend, DoughnutController, ArcElement)
 
 import { cloneDeep, merge } from 'lodash'
@@ -136,7 +141,7 @@ export default defineComponent({
         isEmpty: Boolean,
         emptyStateProps: {
             type: Object as PropType<DlEmptyStateProps>,
-            default: null
+            default: doughnutChartEmptyStateProps
         }
     },
     setup(props) {

package/src/components/compound/DlCharts/charts/DlLineChart/DlLineChart.vue

@@ -140,6 +140,11 @@ import type {
 import { orderBy, merge, isEqual, unionBy, cloneDeep } from 'lodash'
 import { useThemeVariables } from '../../../../../hooks/use-theme'
 
+const lineChartEmptyStateProps = {
+    subtitle:
+        'There was a problem processing the request. Please refresh the page.'
+}
+
 ChartJS.register(
     Title,
     Tooltip,
@@ -175,7 +180,7 @@ export default defineComponent({
         isEmpty: Boolean,
         emptyStateProps: {
             type: Object as PropType<DlEmptyStateProps>,
-            default: null
+            default: lineChartEmptyStateProps
         },
         ...CommonProps,
         ...ColumnChartProps

package/src/components/compound/DlSlider/DlSlider.vue

@@ -5,23 +5,23 @@
         :style="sliderStyles"
     >
         <div
-            v-if="editable"
-            class="slider editable"
-            data-test="editable-slider"
+            v-if="slim"
+            class="slider slim"
+            data-test="slim-slider"
         >
             <span class="text capitalize">{{ text }}</span>
             <dl-slider-input
-                v-model="sliderValue"
+                v-model="value"
                 :min="min"
                 :max="max"
                 :readonly="readonly"
                 :disabled="disabled"
                 :style="{ marginRight: '10px' }"
-                data-test="editable-slider-input"
+                data-test="slim-slider-input"
             />
             <div class="slider-bar-container">
                 <dl-slider-base
-                    v-model.number="sliderValue"
+                    v-model.number="value"
                     :min="min"
                     :max="max"
                     :step="step"
@@ -37,8 +37,8 @@
         </div>
         <div
             v-else
-            class="slider non-editable"
-            data-test="non-editable-slider"
+            class="slider non-slim"
+            data-test="non-slim-slider"
         >
             <div class="header">
                 <div class="row text capitalize">
@@ -60,24 +60,24 @@
                         size="12px"
                         label="Reset"
                         :disabled="disabled || readonly"
-                        data-test="non-editable-slider-button"
+                        data-test="non-slim-slider-button"
                         @click="handleResetButtonClick"
                     />
                     <dl-slider-input
                         id="slider-input"
-                        v-model="sliderValue"
+                        v-model="value"
                         :min="min"
                         :max="max"
                         :readonly="readonly"
                         :disabled="disabled"
-                        data-test="non-editable-slider-input"
-                        @change="handleChange"
+                        data-test="non-slim-slider-input"
+                        @change="onChange"
                     />
                 </div>
             </div>
             <div class="slider-bar-container">
                 <dl-slider-base
-                    v-model.number="sliderValue"
+                    v-model.number="value"
                     :min="min"
                     :max="max"
                     :step="step"
@@ -87,7 +87,7 @@
                     :disabled="disabled"
                     :snap="snap"
                     :name="name"
-                    @change="handleChange"
+                    @change="onChange"
                 />
             </div>
         </div>
@@ -95,7 +95,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue-demi'
+import { computed, defineComponent, ref, toRefs, watch } from 'vue-demi'
 import { DlSliderBase, DlSliderInput } from './components/'
 import { DlButton } from '../../basic'
 import { DlIcon } from '../../essential'
@@ -133,7 +133,7 @@ export default defineComponent({
             type: Boolean,
             default: false
         },
-        editable: {
+        slim: {
             type: Boolean,
             default: false
         },
@@ -185,60 +185,82 @@ export default defineComponent({
         }
     },
     emits: ['update:model-value', 'change'],
-    data() {
-        const val =
-            this.modelValue === null
-                ? this.min
-                : between(this.modelValue, this.min, this.max)
+    setup(props, { emit }) {
+        const { modelValue, min, max, textColor, width, thumbSize, color } =
+            toRefs(props)
+        const initialValue = ref(
+            modelValue.value === null
+                ? min.value
+                : between(modelValue.value, min.value, max.value)
+        )
+        const displaySliderInput = ref(false)
 
-        return {
-            uuid: `dl-slider-${v4()}`,
-            initialValue: val,
-            value: val,
-            displaySliderInput: false
-        }
-    },
-    computed: {
-        valueUpdate(): string {
-            return `${this.modelValue}|${this.min}|${this.max}`
-        },
-        sliderValue: {
-            get(): number {
-                return this.value
+        const value = computed({
+            get: () => {
+                return modelValue.value === null
+                    ? min.value
+                    : between(modelValue.value, min.value, max.value)
             },
-            set(val: number | string): void {
-                this.$emit(
-                    'update:model-value',
-                    typeof val === 'number' ? val : null
+            set(val: number) {
+                console.log(
+                    '@@@ intial, cur',
+                    initialValue.value,
+                    modelValue.value
                 )
+                console.log(`@@@ model value update `, val)
+                if (val === modelValue.value) {
+                    return
+                }
+                emit('update:model-value', val)
+                emit('change', val)
             }
-        },
-        sliderStyles(): Record<string, any> {
+        })
+
+        const sliderStyles = computed<Record<string, any>>(() => {
             return {
-                '--text-color': getColor(this.textColor, 'dl-color-darker'),
-                '--width': this.width,
-                '--thumb-size': parseInt(this.thumbSize) / 2 + 'px',
-                '--color': getColor(this.color, 'dl-color-secondary')
+                '--text-color': getColor(textColor.value, 'dl-color-darker'),
+                '--width': width.value,
+                '--thumb-size': parseInt(thumbSize.value) / 2 + 'px',
+                '--color': getColor(color.value, 'dl-color-secondary')
             }
+        })
+
+        const onChange = (val: number) => {
+            value.value = between(val, min.value, max.value)
         }
-    },
-    watch: {
-        valueUpdate() {
-            this.value =
-                this.modelValue === null
-                    ? this.min
-                    : between(this.modelValue, this.min, this.max)
+
+        const handleResetButtonClick = () => {
+            onChange(initialValue.value)
         }
-    },
-    methods: {
-        handleChange(value: number) {
-            if (this.sliderValue === value) return
 
-            this.$emit('change', value)
-            this.sliderValue = value
-        },
-        handleResetButtonClick() {
-            this.handleChange(this.initialValue)
+        watch(
+            modelValue,
+            () => {
+                if (modelValue.value === value.value) {
+                    return
+                }
+
+                if (modelValue.value === null) {
+                    value.value = min.value
+                } else {
+                    value.value = between(
+                        modelValue.value,
+                        min.value,
+                        max.value
+                    )
+                }
+            },
+            { immediate: true }
+        )
+
+        return {
+            uuid: `dl-slider-${v4()}`,
+            initialValue,
+            value,
+            sliderStyles,
+            displaySliderInput,
+            onChange,
+            handleResetButtonClick
         }
     }
 })

package/src/components/compound/DlSlider/sliderStyles.scss

@@ -85,12 +85,12 @@
   }
 }
 
-.editable {
+.slim {
   align-items: center;
   flex-direction: row;
 }
 
-.non-editable {
+.non-slim {
   flex-direction: column;
 
   & .header {

package/src/components/compound/DlTable/utils/props.ts

@@ -90,7 +90,11 @@ export const props = {
     isEmpty: Boolean,
     emptyStateProps: {
         type: Object as PropType<DlEmptyStateProps>,
-        default: null as unknown as PropType<DlEmptyStateProps>
+        default: {
+            title: '',
+            subtitle: 'No data to show yet',
+            icon: 'icon-dl-dataset-filled'
+        } as unknown as PropType<DlEmptyStateProps>
     },
     scrollDebounce: {
         type: Number,

package/src/demos/BarChartDemo.vue

@@ -21,50 +21,14 @@
             :options="options"
             :items-in-view="6"
             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.'
-            }"
-        >
-            <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-bar-chart>
+        />
     </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
 import { ChartOptions } from 'chart.js'
-import { DlBarChart, DlButton } from '../components'
+import { DlBarChart } from '../components'
 
 const labelsFn = () => {
     const a = []
@@ -117,8 +81,7 @@ const options: ChartOptions = {
 export default defineComponent({
     name: 'DlChartDemo',
     components: {
-        DlBarChart,
-        DlButton
+        DlBarChart
     },
     data() {
         return {

package/src/demos/ColumnChartDemo.vue

@@ -77,49 +77,13 @@
             :options="options[0]"
             style="width: 50%"
             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.'
-            }"
-        >
-            <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-column-chart>
+        />
     </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
-import { DlAvatar, DlColumnChart, DlTooltip, DlButton } from '../components'
+import { DlAvatar, DlColumnChart, DlTooltip } from '../components'
 
 import { orderBy } from 'lodash'
 
@@ -277,8 +241,7 @@ export default defineComponent({
     components: {
         DlColumnChart,
         DlAvatar,
-        DlTooltip,
-        DlButton
+        DlTooltip
     },
     data() {
         return {

package/src/demos/DlAccordionDemo.vue

@@ -88,55 +88,19 @@
                 v-model="isAccordionOpen"
                 title="Empty State Component"
                 is-empty
-                :empty-state-props="{
-                    responsive: true,
-                    style: 'max-width: 300px;',
-                    align: 'left',
-                    bgSize: '200px',
-                    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.'
-                }"
-            >
-                <template #links="">
-                    <div style="display: flex; gap: 15px; flex-wrap: wrap">
-                        <dl-button
-                            padding="0px"
-                            icon="icon-dl-sdk-documentation"
-                            flat
-                            uppercase
-                            label="SDK"
-                        />
-                        <dl-button
-                            padding="0px"
-                            icon="icon-dl-file"
-                            flat
-                            label="Documentation"
-                        />
-                        <dl-button
-                            padding="0px"
-                            icon="icon-dl-youtube"
-                            flat
-                            label="Video"
-                        />
-                    </div>
-                </template>
-            </dl-accordion>
+            />
         </div>
     </div>
 </template>
 
 <script lang="ts">
-import { DlAccordion, DlSwitch, DlButton } from '../components'
+import { DlAccordion, DlSwitch } from '../components'
 import { defineComponent } from 'vue-demi'
 
 export default defineComponent({
     components: {
         DlAccordion,
-        DlSwitch,
-        DlButton
+        DlSwitch
     },
     data() {
         return {

package/src/demos/DlChartDoughnutDemo.vue

@@ -68,43 +68,7 @@
                     :has-summary="true"
                     :animation="doughnutAnimation"
                     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.'
-                    }"
-                >
-                    <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>
-                </DlDoughnutChart>
+                />
             </div>
         </div>
     </div>
@@ -113,14 +77,13 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue-demi'
 import { DoughnutControllerChartOptions } from 'chart.js'
-import { DlDoughnutChart, DlButton } from '../components'
+import { DlDoughnutChart } from '../components'
 import { TDoughnutChartData } from '../components/compound/DlCharts/charts/DlDoughnutChart/types'
 
 export default defineComponent({
     name: 'DlChartDoughnutDemo',
     components: {
-        DlDoughnutChart,
-        DlButton
+        DlDoughnutChart
     },
     setup() {
         const doughnutAnimation = ref<

package/src/demos/DlConfusionMatrixDemo.vue

@@ -29,50 +29,14 @@
                 :matrix="matrix"
                 :labels="labels"
                 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.'
-                }"
-            >
-                <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-confusion-matrix>
+            />
         </dl-accordion>
     </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
-import { DlConfusionMatrix, DlButton, DlAccordion } from '../components'
+import { DlConfusionMatrix, DlAccordion } from '../components'
 import { DlConfusionMatrixCell } from '../types'
 
 const getLink = (number: number) => {
@@ -118,7 +82,6 @@ const getLabels = (size: number) => {
 export default defineComponent({
     components: {
         DlConfusionMatrix,
-        DlButton,
         DlAccordion
     },
     setup() {

package/src/demos/DlLineChartDemo.vue

@@ -62,49 +62,13 @@
             :options="tensionOptions"
             style="width: 100%"
             is-empty
-            :empty-state-props="{
-                responsive: true,
-                style: 'min-height: 450px;',
-                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.'
-            }"
-        >
-            <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-line-chart>
+        />
     </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
-import { DlLineChart, DlButton } from '../components'
+import { DlLineChart } from '../components'
 import { orderBy } from 'lodash'
 
 function randomIntFromInterval(min: number, max: number) {
@@ -383,8 +347,7 @@ const legendProps = {
 export default defineComponent({
     name: 'DlLineChartDemo',
     components: {
-        DlLineChart,
-        DlButton
+        DlLineChart
     },
     data() {
         return {

package/src/demos/DlSliderDemo.vue

@@ -7,14 +7,14 @@
             :step="1"
             :min="-100"
             :max="100"
-            :editable="editable"
+            :slim="slim"
             :readonly="readonly"
             :disabled="disabled"
             @change="handleChange"
         />
         <div>
-            <button @click="editable = !editable">
-                Editable: {{ editable }}
+            <button @click="slim = !slim">
+                slim: {{ slim }}
             </button>
             <button @click="readonly = !readonly">
                 Readonly: {{ readonly }}
@@ -23,6 +23,10 @@
                 Disable: {{ disabled }}
             </button>
         </div>
+        <div>
+            Events: <br>
+            {{ events }}
+        </div>
     </div>
 </template>
 
@@ -37,20 +41,23 @@ export default defineComponent({
     },
     data() {
         return {
-            value: 0,
-            editable: false,
+            value: null,
+            slim: false,
             disabled: false,
-            readonly: false
+            readonly: false,
+            events: []
         }
     },
     watch: {
         value(newValue, oldValue) {
             console.log(`@@@ model value update ${oldValue} to ${newValue}`)
+            this.events[0] = `@@@ model value update ${oldValue} to ${newValue}`
         }
     },
     methods: {
         handleChange(value: number) {
             console.log(`@@@ handling change ${value}`)
+            this.events[1] = `@@@ handling change ${value}`
         }
     },
     template: 'dl-slider-demo'

package/src/demos/DlTableDemo.vue

@@ -138,46 +138,10 @@
                     :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">