@dataloop-ai/components 0.16.48 → 0.16.50

package/package.json

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

package/src/components/basic/DlButton/DlButton.vue

@@ -10,7 +10,7 @@
             :tabindex="tabIndex"
             :aria-disabled="disabled ? 'true' : 'false'"
             :disabled="disabled"
-            :style="[cssButtonVars, styles]"
+            :style="[cssButtonVars, computedStyles]"
             style="pointer-events: auto"
             class="dl-button"
             @click="onClick"
@@ -73,6 +73,8 @@ import { colorNames } from '../../../utils/css-color-names'
 import { useSizeObserver } from '../../../hooks/use-size-observer'
 import { v4 } from 'uuid'
 import { ButtonColors } from './types'
+import { stringStyleToRecord } from '../../../utils'
+import { isString } from 'lodash'
 
 export default defineComponent({
     name: 'DlButton',
@@ -108,7 +110,7 @@ export default defineComponent({
         icon: { type: String, default: '' },
         overflow: { type: Boolean, default: false, required: false },
         tooltip: { type: String, default: null, required: false },
-        styles: { type: [Object, String, Array], default: null }
+        styles: { type: [Object, String], default: null }
     },
     emits: ['click', 'mousedown'],
     setup() {
@@ -122,6 +124,11 @@ export default defineComponent({
         }
     },
     computed: {
+        computedStyles(): Record<string, string> {
+            return isString(this.styles)
+                ? stringStyleToRecord(this.styles)
+                : this.styles
+        },
         isActionable(): boolean {
             return this.disabled !== true
         },

package/src/components/basic/DlCard/DlCard.vue

@@ -1,7 +1,7 @@
 <template>
     <div
         class="card"
-        :style="[{ width, height }, styles]"
+        :style="[{ width, height }, computedStyles]"
     >
         <div
             v-if="icon"
@@ -84,7 +84,9 @@
 </template>
 
 <script lang="ts">
+import { isString } from 'lodash'
 import { defineComponent, PropType } from 'vue-demi'
+import { stringStyleToRecord } from '../../../utils'
 import { DlIcon } from '../../essential/DlIcon'
 import { DlLink } from '../../essential/DlLink'
 import { IconItem, ImageItem, LinkItem } from './types'
@@ -126,11 +128,16 @@ export default defineComponent({
             default: '200px'
         },
         styles: {
-            type: [Object, String, Array],
+            type: [Object, String],
             default: null
         }
     },
     computed: {
+        computedStyles(): Record<string, string> {
+            return isString(this.styles)
+                ? stringStyleToRecord(this.styles)
+                : this.styles
+        },
         iconStyles(): string {
             return this.icon?.styles ?? ''
         },

package/src/components/basic/DlPopup/DlPopup.vue

@@ -112,6 +112,8 @@ import {
 import DraggableUpper from './components/DraggableUpper.vue'
 import PopupHeader from './components/PopupHeader.vue'
 import { v4 } from 'uuid'
+import { isString } from 'lodash'
+import { stringStyleToRecord } from '../../../utils'
 
 export default defineComponent({
     name: 'DlPopup',
@@ -446,7 +448,9 @@ export default defineComponent({
             portalIsActive,
             classes: 'dl-popup dl-position-engine scroll',
             styles: [
-                attrs.style,
+                isString(attrs.style)
+                    ? stringStyleToRecord(attrs.style)
+                    : attrs.style,
                 transitionStyle.value,
                 stylesFromProps.value
             ] as any

package/src/components/compound/DlCharts/charts/DlConfusionMatrix/utils.ts

@@ -78,18 +78,21 @@ export function flattenConfusionMatrix(
 
     for (const [rowIndex, row] of matrix.entries()) {
         for (const [cellIndex, cell] of row.entries()) {
-            const value = isObject(cell)
+            const cellIsObject = isObject(cell)
+            const value: number = cellIsObject
                 ? (cell as DlConfusionMatrixCell).value
-                : cell
-            toNormalize.push({
+                : (cell as number)
+
+            const object: DlConfusionMatrixCell = {
                 value,
                 unnormalizedValue: value,
                 xLabel: labelStrings[rowIndex],
                 yLabel: labelStrings[cellIndex],
                 x: rowIndex,
                 y: cellIndex,
-                link: isObject ? (cell as DlConfusionMatrixCell).link : ''
-            })
+                link: cellIsObject ? (cell as DlConfusionMatrixCell).link : ''
+            }
+            toNormalize.push(object)
         }
     }
     return normalizeMatrix(toNormalize)

package/src/components/compound/DlSelect/components/DlSelectOption.vue

@@ -121,6 +121,7 @@ export default defineComponent({
     },
     props: {
         withWave: Boolean,
+        // todo: clean this up; rename the prop to something better
         defaultStyles: { type: Boolean, default: true },
         multiselect: { type: Boolean, default: false },
         value: { type: ValueTypes, default: null },

package/src/components/compound/DlTable/DlTable.vue

@@ -415,15 +415,18 @@
             v-if="!hideBottom"
             :class="bottomClasses"
         >
-            <div class="dl-table__control">
-                <slot
-                    v-if="nothingToDisplay && !hideNoData"
-                    name="no-data"
-                >
-                    {{ bottomMessage }}
+            <div
+                v-if="nothingToDisplay && !hideNoData"
+                class="dl-table__control"
+            >
+                <slot name="no-data">
+                    {{ noDataMessage }}
                 </slot>
             </div>
-            <div class="dl-table__control">
+            <div
+                v-else
+                class="dl-table__control"
+            >
                 <slot
                     name="bottom"
                     v-bind="marginalsScope"
@@ -438,12 +441,13 @@
                     </div>
 
                     <slot
-                        v-bind="marginalsScope"
                         name="pagination"
+                        v-bind="marginalsScope"
                     >
                         <dl-pagination
                             v-if="displayPagination"
                             v-bind="marginalsScope.pagination"
+                            total-items="rows.length"
                             @update:rowsPerPage="
                                 (v) => setPagination({ rowsPerPage: v })
                             "
@@ -699,7 +703,7 @@ export default defineComponent({
         })
         //
 
-        const bottomMessage = computed(() => {
+        const noDataMessage = computed(() => {
             if (props.loading) {
                 return props.loadingLabel
             }
@@ -1257,7 +1261,7 @@ export default defineComponent({
             bottomClasses,
             hasTopSlots,
             nothingToDisplay,
-            bottomMessage,
+            noDataMessage,
             paginationState,
             hasTopSelectionMode,
             hasBotomSelectionBanner,

package/src/components/essential/DlIcon/DlIcon.vue

@@ -2,7 +2,7 @@
     <div
         v-if="!svg"
         :id="uuid"
-        :style="[inlineStyles, styles]"
+        :style="[inlineStyles, computedStyles]"
         @click="$emit('click', $event)"
         @mousedown="$emit('mousedown', $event)"
         @mouseup="$emit('mouseup', $event)"
@@ -35,9 +35,10 @@
 </template>
 
 <script lang="ts">
+import { isString } from 'lodash'
 import { v4 } from 'uuid'
 import { defineComponent } from 'vue-demi'
-import { getColor, loggerFactory } from '../../../utils'
+import { getColor, loggerFactory, stringStyleToRecord } from '../../../utils'
 
 export default defineComponent({
     name: 'DlIcon',
@@ -55,7 +56,7 @@ export default defineComponent({
             default: '12px'
         },
         styles: {
-            type: [Array, String, Object],
+            type: [String, Object],
             default: null
         },
         svg: {
@@ -80,6 +81,11 @@ export default defineComponent({
         }
     },
     computed: {
+        computedStyles(): Record<string, string> {
+            return isString(this.styles)
+                ? stringStyleToRecord(this.styles)
+                : this.styles
+        },
         cssIconVars(): Record<string, string> {
             return {
                 '--dl-icon-font-size': `${this.size}`,
@@ -94,8 +100,8 @@ export default defineComponent({
                     : 'inherit'
             }
         },
-        inlineStyles(): string {
-            return this.inline ? 'display: inline' : 'display: flex;'
+        inlineStyles(): Record<string, string> {
+            return { display: this.inline ? 'inline' : 'flex;' }
         },
         // needed to allow external source of icons that do not use class based
         externalIcon(): boolean {

package/src/components/essential/DlTooltip/DlTooltip.vue

@@ -48,7 +48,8 @@ import {
     cleanEvt,
     clearSelection,
     getColor,
-    isMobileOrTablet
+    isMobileOrTablet,
+    stringStyleToRecord
 } from '../../../utils'
 import {
     parsePosition,
@@ -65,6 +66,7 @@ import {
 } from '../../../utils/click-outside'
 import DlTeleport from '../../../utils/teleport'
 import { v4 } from 'uuid'
+import { isString } from 'lodash'
 
 export default defineComponent({
     name: 'DlTooltip',
@@ -391,7 +393,9 @@ export default defineComponent({
             innerRef,
             portalEl: isVue2 ? 'body' : portalEl,
             styles: [
-                attrs.style,
+                isString(attrs.style)
+                    ? stringStyleToRecord(attrs.style)
+                    : attrs.style,
                 transitionStyle.value,
                 {
                     '--dl-tooltip-color': getColor(

package/src/demos/DlAlertDemo.vue

@@ -1,6 +1,7 @@
 <template>
     <div>
         <DlAlert
+            type="info"
             :closable="true"
             fluid
         >

package/src/demos/DlTableDemo.vue

@@ -241,7 +241,48 @@
                 </div>
             </div>
             <div>
-                <p>#no-data & #pagination declare together</p>
+                <h3>slots #no-data & #pagination declare together</h3>
+                <h4>case 1: table with data</h4>
+                <p>
+                    rows should appear with slot#pagination, slot#no-data should
+                    not
+                </p>
+                <DlTable
+                    :rows="tableRows"
+                    :selected="selected"
+                    :separator="separator"
+                    :columns="columns"
+                    :bordered="bordered"
+                    :draggable="draggable"
+                    :dense="dense"
+                    class="sticky-header"
+                    :filter="filter"
+                    :selection="selection"
+                    :loading="loading"
+                    :resizable="resizable"
+                    row-key="name"
+                    color="dl-color-secondary"
+                    title="Table Title"
+                    :virtual-scroll="vScroll"
+                    style="height: 200px"
+                    :rows-per-page-options="rowsPerPageOptions"
+                    @row-click="log"
+                    @update:selected="updateSeleted"
+                >
+                    <template #pagination>
+                        <div style="background-color: #4db1d3">
+                            &lt slot#pagination >
+                        </div>
+                    </template>
+                    <template #no-data>
+                        <div style="background-color: #734145">
+                            &lt slot#no-data > should not be visible
+                        </div>
+                    </template>
+                </DlTable>
+                <h4>case 2: table with no data</h4>
+                <p>slot#no-data should appear, slot#pagination not</p>
+
                 <DlTable
                     :selected="selected"
                     :separator="separator"
@@ -264,10 +305,14 @@
                     @update:selected="updateSeleted"
                 >
                     <template #pagination>
-                        pagination slot, no-data slot should be visible too
+                        <div style="background-color: #734145">
+                            &lt slot#pagination > should not be visible
+                        </div>
                     </template>
                     <template #no-data>
-                        no-data slot, pagination slot should be visible too
+                        <div style="background-color: #2f3c4b">
+                            &lt slot#no-data >
+                        </div>
                     </template>
                 </DlTable>
             </div>

package/src/hooks/use-suggestions.ts

@@ -374,5 +374,5 @@ const matchStringEnd = (input: string, str: string) =>
     input.lastIndexOf(str + '" ') > -1 || input.lastIndexOf(str + "' ") > -1
 
 export const removeBrackets = (str: string) => {
-    return str.replaceAll('(', '').replaceAll(')', '')
+    return str.replace(/\(/g, '').replace(/\)/g, '')
 }

package/src/utils/index.ts

@@ -13,6 +13,7 @@ export * from './component-name-parser'
 export * from './colors'
 export * from './teleport'
 export * from './parse-smart-query'
+export * from './stringStyleToRecord'
 
 export const isMobileOrTablet = () => {
     let check = false

package/src/utils/stringStyleToRecord.ts

@@ -0,0 +1,17 @@
+export const stringStyleToRecord = (input: string): Record<string, string> => {
+    const style = input.split(';')
+    const output: Record<string, string> = {}
+    style.forEach((item) => {
+        const [key, value] = item.split(':')
+        if (key && value) {
+            output[snakeToCamel(key.trim())] = value.trim()
+        }
+    })
+    return output
+}
+
+export const snakeToCamel = (str: string): string => {
+    return str.replace(/([-_][a-z])/g, (group) =>
+        group.toUpperCase().replace('-', '').replace('_', '')
+    )
+}