@dataloop-ai/components 0.18.76 → 0.18.78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.18.76",
+  "version": "0.18.78",
   "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/DlTable/DlTable.vue

@@ -332,6 +332,34 @@
                                     {{ col.label }}
                                 </DlTh>
                             </slot>
+                            <DlTh
+                                v-if="hasEditableColumns"
+                                key="visibleColsBtn"
+                            >
+                                <dl-button
+                                    text-color="dl-color-medium"
+                                    flat
+                                    icon="icon-dl-column"
+                                >
+                                    <dl-menu>
+                                        <dl-list separator>
+                                            <dl-option-group
+                                                :model-value="
+                                                    computedVisibleCols
+                                                "
+                                                :options="groupOptions"
+                                                :left-label="true"
+                                                max-width="250px"
+                                                type="switch"
+                                                class="table-options"
+                                                @update:model-value="
+                                                    handleVisibleColumnsUpdate
+                                                "
+                                            />
+                                        </dl-list>
+                                    </dl-menu>
+                                </dl-button>
+                            </DlTh>
                         </DlTr>
 
                         <tr
@@ -583,8 +611,16 @@ import {
 import { injectProp } from '../../../utils/inject-object-prop'
 import { DlTableRow, DlTableProps, DlTableColumn } from './types'
 import { DlPagination } from '../DlPagination'
-import { DlIcon, DlCheckbox, DlProgressBar } from '../../essential'
+import {
+    DlIcon,
+    DlCheckbox,
+    DlProgressBar,
+    DlMenu,
+    DlList
+} from '../../essential'
 import { ResizableManager } from './utils'
+import { DlButton } from '../../basic'
+import { DlOptionGroup } from '../../compound'
 import DlEmptyState from '../../basic/DlEmptyState/DlEmptyState.vue'
 import { v4 } from 'uuid'
 import { flatTreeData } from '../DlTreeTable/utils/flatTreeData'
@@ -606,7 +642,11 @@ export default defineComponent({
         DlProgressBar,
         DlIcon,
         DlCheckbox,
-        DlEmptyState
+        DlEmptyState,
+        DlButton,
+        DlOptionGroup,
+        DlMenu,
+        DlList
     },
     props,
     emits,
@@ -625,6 +665,21 @@ export default defineComponent({
         const virtScrollRef = ref(null)
         const hasVirtScroll = computed(() => props.virtualScroll === true)
 
+        const groupOptions = computed(() =>
+            (props.columns as DlTableColumn[]).map((item) => ({
+                label: item.label,
+                value: item.name
+            }))
+        )
+
+        const visibleColumnsState = ref(
+            (props.columns as DlTableColumn[]).map((col) => col.name)
+        )
+
+        const computedVisibleCols = computed(() =>
+            computedCols.value.map((col) => col.name)
+        )
+
         const { hasAnyAction } = useTableActions(props) // todo: does not work
 
         const getRowKey = computed(() =>
@@ -790,6 +845,13 @@ export default defineComponent({
             }
         )
 
+        watch(
+            () => (props as any).visibleColummns,
+            (value) => {
+                visibleColumnsState.value = value
+            }
+        )
+
         watch(
             () => props.draggable,
             () => {
@@ -950,7 +1012,8 @@ export default defineComponent({
                 props as unknown as DlTableProps,
                 computedPagination,
                 hasSelectionMode,
-                hasDraggableRows
+                hasDraggableRows,
+                visibleColumnsState
             )
 
         const { columnToSort, computedSortMethod, sort } = useTableSort(
@@ -1243,6 +1306,12 @@ export default defineComponent({
             () => Object.keys(props.emptyStateProps).length > 0
         )
 
+        const handleVisibleColumnsUpdate = (columns: string[]) => {
+            if (columns.length < 1) return
+            visibleColumnsState.value = columns
+            emit('update-visible-columns', columns)
+        }
+
         return {
             uuid: `dl-table-${v4()}`,
             rootRef,
@@ -1296,7 +1365,11 @@ export default defineComponent({
             hasSlotHeaderSelection,
             stopAndPrevent,
             updatePagination,
-            hasEmptyStateProps
+            hasEmptyStateProps,
+            groupOptions,
+            visibleColumnsState,
+            handleVisibleColumnsUpdate,
+            computedVisibleCols
         }
     }
 })

package/src/components/compound/DlTable/hooks/tableColumnSelection.ts

@@ -1,4 +1,4 @@
-import { computed, ComputedRef } from 'vue-demi'
+import { computed, ComputedRef, Ref } from 'vue-demi'
 
 import { isNumber } from '../../../../utils/is'
 import { DlTableProps, DlTableColumn, DlTableRow } from '../types'
@@ -12,7 +12,8 @@ export function useTableColumnSelection(
     props: DlTableProps,
     computedPagination: ComputedRef<TablePagination>,
     hasSelectionMode: ComputedRef<boolean>,
-    hasDraggableRows: ComputedRef<boolean>
+    hasDraggableRows: ComputedRef<boolean>,
+    visibleColumnsState: Ref
 ) {
     const colList = computed(() => {
         if (props.columns) {
@@ -40,11 +41,11 @@ export function useTableColumnSelection(
     const computedCols = computed(() => {
         const { sortBy, descending } = computedPagination.value
 
-        const cols = props.visibleColumns
+        const cols = visibleColumnsState?.value
             ? colList.value.filter(
                   (col) =>
                       col.required === true ||
-                      props.visibleColumns.includes(col.name) === true
+                      visibleColumnsState.value.includes(col.name) === true
               )
             : colList.value
 

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

@@ -46,6 +46,7 @@ export const props = {
     virtualScroll: Boolean,
     hidePagination: Boolean,
     hideSelectedBanner: Boolean,
+    hasEditableColumns: Boolean,
     selectedRowsLabel: {
         type: Function,
         default: (val: number) => `${val} records selected`
@@ -90,7 +91,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/components/compound/DlTreeTable/emits.ts

@@ -10,6 +10,7 @@ export const emits = [
     'th-click',
     'row-dblclick',
     'row-contextmenu',
+    'update-visible-columns',
     ...useTableRowExpandEmits,
     ...useTreeTableRowSelectionEmits
 ]

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/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">
@@ -444,6 +408,15 @@
                     </template>
                 </DlTable>
             </div>
+            <div>
+                <p>With editable columns</p>
+                <DlTable
+                    :rows="tableRows"
+                    :columns="tableColumns"
+                    title="Editable Columns"
+                    has-editable-columns
+                />
+            </div>
         </div>
     </div>
 </template>