@dataloop-ai/components 0.16.64 → 0.17.1

package/package.json

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

package/src/components/basic/DlAlert/DlAlert.vue

@@ -22,13 +22,13 @@
         </div>
         <div
             v-if="closable"
-            class="close-btn"
-            data-test="close-btn"
+            class="close-button"
+            data-test="close-button"
             :style="closeButtonStyle"
         >
             <dl-icon
-                class="close-btn-icon"
-                data-test="close-btn-icon"
+                class="close-button-icon"
+                data-test="close-button-icon"
                 icon="icon-dl-close"
                 color="dl-color-darker"
                 size="12px"
@@ -116,6 +116,7 @@ export default defineComponent({
     setup(props, { emit }) {
         const show = ref(props.modelValue)
         const type = props.type as AlertType
+        const typeIcon = typeToIconMap[type]
         const icon = computed(() => typeToIconMap[type])
         const iconColor = computed(() => typeToIconColorMap[type])
         const textStyle = computed(() => ({
@@ -210,15 +211,13 @@ export default defineComponent({
     }
 
     .text {
-        display: flex;
-        text-align: left;
         padding-left: 10px;
         font-size: var(--dl-font-size-body);
         align-self: center;
         word-break: break-word;
     }
 
-    .close-btn {
+    .close-button {
         padding-right: 10px;
         padding-left: 10px;
         align-items: var(--dl-alert-align-button, start);
@@ -228,7 +227,7 @@ export default defineComponent({
         cursor: pointer;
     }
 
-    .close-btn-icon:hover {
+    .close-button-icon:hover {
         cursor: pointer;
     }
 }

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

@@ -3,7 +3,7 @@
         :id="uuid"
         class="dl-button-container"
         style="pointer-events: none"
-        :style="[cssButtonVars, containerStyles]"
+        :style="[cssButtonVars, containerStyles, capitalizeFirst]"
     >
         <button
             v-if="hasContent || hasIcon"
@@ -19,7 +19,7 @@
             <dl-tooltip
                 v-if="!tooltip && overflow && isOverflowing && hasLabel"
             >
-                {{ buttonLabel }}
+                {{ label }}
             </dl-tooltip>
             <div class="dl-button-content dl-anchor--skip">
                 <dl-icon
@@ -37,7 +37,7 @@
                         'dl-button-no-wrap': noWrap
                     }"
                 >
-                    {{ buttonLabel }}
+                    {{ label }}
                 </span>
                 <slot />
             </div>
@@ -67,12 +67,12 @@ import {
     setMaxHeight
 } from './utils'
 import type { ButtonSizes } from './utils'
-import { textTransform } from '../../../utils/string'
 import { defineComponent, PropType, ref } from 'vue-demi'
 import { colorNames } from '../../../utils/css-color-names'
 import { useSizeObserver } from '../../../hooks/use-size-observer'
 import { v4 } from 'uuid'
 import { ButtonColors } from './types'
+import { transformOptions } from '../../shared/types'
 import { stringStyleToRecord } from '../../../utils'
 import { isString } from 'lodash'
 
@@ -102,9 +102,15 @@ export default defineComponent({
         size: { type: String! as PropType<ButtonSizes>, default: 'm' },
         filled: { type: Boolean, default: true },
         round: { type: Boolean, default: false },
+        shaded: { type: Boolean, default: false },
         fluid: Boolean,
         flat: Boolean,
-        uppercase: Boolean,
+        transform: {
+            type: String,
+            default: 'default',
+            validator: (value: string): boolean =>
+                transformOptions.includes(value)
+        },
         outlined: Boolean,
         noWrap: Boolean,
         icon: { type: String, default: '' },
@@ -124,6 +130,12 @@ export default defineComponent({
         }
     },
     computed: {
+        capitalizeFirst(): string {
+            if (this.transform === 'default') {
+                return 'first-letter-capitalized'
+            }
+            return null
+        },
         computedStyles(): Record<string, string> {
             return isString(this.styles)
                 ? stringStyleToRecord(this.styles)
@@ -145,9 +157,6 @@ export default defineComponent({
                 this.label !== ''
             )
         },
-        buttonLabel(): string {
-            return textTransform(this.label)
-        },
         hasIcon(): boolean {
             return typeof this.icon === 'string' && this.icon !== ''
         },
@@ -207,32 +216,38 @@ export default defineComponent({
                         flat: this.flat,
                         color: this.color,
                         filled: this.filled,
+                        shaded: this.shaded,
                         textColor: this.textColor
                     }),
                     '--dl-button-bg': setBgColor({
                         disabled: this.disabled,
                         outlined: this.outlined,
+                        shaded: this.shaded,
                         flat: this.flat,
                         color: this.color
                     }),
                     '--dl-button-border': setBorder({
                         disabled: this.disabled,
                         flat: this.flat,
+                        shaded: this.shaded,
                         color: this.color
                     }),
                     '--dl-button-text-color-hover': setColorOnHover({
                         disabled: this.disabled,
                         outlined: this.outlined,
+                        shaded: this.shaded,
                         flat: this.flat,
                         color: this.textColor
                     }),
                     '--dl-button-border-hover': setBorderOnHover({
                         disabled: this.disabled,
                         flat: this.flat,
+                        shaded: this.shaded,
                         color: this.color
                     }),
                     '--dl-button-bg-hover': setBgOnHover({
                         disabled: this.disabled,
+                        shaded: this.shaded,
                         outlined: this.outlined,
                         flat: this.flat,
                         filled: this.filled,
@@ -256,9 +271,9 @@ export default defineComponent({
                     : setPadding(this.size),
                 '--dl-button-margin': this.margin,
                 '--dl-button-font-size': setFontSize(this.size),
-                '--dl-button-text-transform': this.uppercase
-                    ? 'uppercase'
-                    : 'none',
+                '--dl-button-text-transform': this.capitalizeFirst
+                    ? null
+                    : this.transform,
                 '--dl-button-cursor': this.isActionable
                     ? 'pointer'
                     : 'not-allowed',
@@ -368,6 +383,13 @@ export default defineComponent({
     gap: var(--dl-button-content-gap, 7px);
 }
 
+.dl-chip.first-letter-capitalized {
+    &::first-letter,
+    & > *::first-letter {
+        text-transform: capitalize;
+    }
+}
+
 .dl-button-container {
     display: inline-block;
     width: var(--dl-button-container-width);

package/src/components/basic/DlButton/utils.ts

@@ -43,6 +43,7 @@ export interface DlButtonProps {
     outlined: boolean
     flat: boolean
     filled: boolean
+    shaded: boolean
     color: string
     textColor: string
 }
@@ -63,6 +64,7 @@ export const setTextColor = ({
     flat,
     color,
     filled,
+    shaded,
     textColor
 }: DlButtonProps): string => {
     if (disabled) {
@@ -78,6 +80,9 @@ export const setTextColor = ({
 
         return getColor(textColor, 'dl-color-secondary')
     }
+    if (shaded) {
+        return getColor(textColor, 'dl-color-darker')
+    }
     if (filled) {
         return getColor(textColor, 'dl-color-text-buttons')
     }
@@ -89,11 +94,15 @@ export const setBgColor = ({
     disabled,
     flat,
     outlined,
+    shaded,
     color = ''
 }: Partial<DlButtonProps>) => {
     if (disabled || flat || outlined) {
         return 'var(--dl-color-transparent)'
     }
+    if (shaded) {
+        return 'var(--dl-color-fill)'
+    }
 
     return getColor(color, 'dl-color-secondary')
 }
@@ -101,14 +110,15 @@ export const setBgColor = ({
 export const setBorder = ({
     disabled,
     flat,
-    color = ''
+    color = '',
+    shaded
 }: Partial<DlButtonProps>) => {
     if (disabled) {
         return flat
             ? 'var(--dl-color-transparent)'
             : 'var(--dl-color-separator)'
     }
-    if (flat) {
+    if (flat || shaded) {
         return 'var(--dl-color-transparent)'
     }
 

package/src/components/basic/DlChip/DlChip.vue

@@ -62,14 +62,7 @@ import {
     setRemoveIconWidth
 } from './utils'
 import { v4 } from 'uuid'
-
-const transformOptions: string[] = [
-    'none',
-    'capitalize',
-    'uppercase',
-    'lowercase',
-    'default'
-]
+import { transformOptions } from '../../shared/types'
 
 export default defineComponent({
     name: 'DlChip',

package/src/components/basic/DlPanelContainer/DlPanelContainer.vue

@@ -21,7 +21,7 @@
                 <div
                     v-if="direction === 'right' && isFullWidth === true"
                     class="collapse-icon collapse-icon--right"
-                    @click="handleCollapseBtnClick"
+                    @click="handleCollapseButtonClick"
                 >
                     <dl-tooltip>Hide</dl-tooltip>
                     <dl-icon
@@ -33,7 +33,7 @@
                 <div
                     v-else-if="direction === 'right' && isFullWidth === false"
                     class="collapse-icon collapse-icon--right"
-                    @click="handleCollapseBtnClick"
+                    @click="handleCollapseButtonClick"
                 >
                     <dl-tooltip>Show</dl-tooltip>
                     <dl-icon
@@ -45,7 +45,7 @@
                 <div
                     v-else-if="direction === 'left' && isFullWidth === true"
                     class="collapse-icon collapse-icon--left"
-                    @click="handleCollapseBtnClick"
+                    @click="handleCollapseButtonClick"
                 >
                     <dl-tooltip>Hide</dl-tooltip>
                     <dl-icon
@@ -57,7 +57,7 @@
                 <div
                     v-else-if="direction === 'left' && isFullWidth === false"
                     class="collapse-icon collapse-icon--left--collapsed"
-                    @click="handleCollapseBtnClick"
+                    @click="handleCollapseButtonClick"
                 >
                     <dl-tooltip>Show</dl-tooltip>
                     <dl-icon
@@ -346,7 +346,7 @@ export default defineComponent({
 
             this.avoidUserSelect = false
         },
-        handleCollapseBtnClick() {
+        handleCollapseButtonClick() {
             this.$emit('update:model-value', !this.modelValue)
         },
         collapse() {

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

@@ -89,9 +89,13 @@ export function flattenConfusionMatrix(
                 xLabel: labelStrings[rowIndex],
                 yLabel: labelStrings[cellIndex],
                 x: rowIndex,
-                y: cellIndex,
-                link: cellIsObject ? (cell as DlConfusionMatrixCell).link : ''
+                y: cellIndex
             }
+
+            if ((cell as DlConfusionMatrixCell)?.link) {
+                object.link = (cell as DlConfusionMatrixCell)?.link
+            }
+
             toNormalize.push(object)
         }
     }

package/src/components/compound/DlDropdownButton/DlDropdownButton.vue

@@ -10,23 +10,23 @@
     >
         <dl-button
             class="dl-button-dropdown--current"
-            :style="mainBtnStyle"
+            :style="mainButtonStyle"
             :label="label"
             :outlined="outlined"
             :size="size"
             :flat="flat"
-            :disabled="disabled === true || disableMainBtn === true"
+            :disabled="disabled === true || disableMainButton === true"
             :max-width="maxWidth"
             :color="color"
             :icon="icon"
-            :uppercase="uppercase"
+            :transform="transform"
             :text-color="textColor"
             no-wrap
             :aria-expanded="showing === true ? 'true' : 'false'"
             :aria-haspopup="true"
             :aria-disabled="
                 disabled === true ||
-                    (split === false && disableMainBtn === true) ||
+                    (split === false && disableMainButton === true) ||
                     disableDropdown === true
             "
             :overflow="overflow"
@@ -35,7 +35,7 @@
         />
         <dl-button
             class="dl-button-dropdown__arrow-container"
-            :style="btnCSSStyles"
+            :style="buttonCSSStyles"
             :disabled="disabled === true || disableDropdown === true"
             :outlined="outlined"
             :flat="flat"
@@ -46,7 +46,7 @@
             :aria-haspopup="true"
             :aria-disabled="
                 disabled === true ||
-                    (split === false && disableMainBtn === true) ||
+                    (split === false && disableMainButton === true) ||
                     disableDropdown === true
             "
             :no-wrap="noWrap"
@@ -111,11 +111,11 @@
         :aria-haspopup="true"
         :aria-disabled="
             disabled === true ||
-                (split === false && disableMainBtn === true) ||
+                (split === false && disableMainButton === true) ||
                 disableDropdown === true
         "
-        :disabled="disabled === true || disableMainBtn === true"
-        :style="mainBtnStyle"
+        :disabled="disabled === true || disableMainButton === true"
+        :style="mainButtonStyle"
         :no-wrap="props.noWrap"
         :tooltip="tooltip"
         :max-width="maxWidth"
@@ -188,6 +188,7 @@ import {
     Ref
 } from 'vue-demi'
 import { v4 } from 'uuid'
+import { transformOptions } from '../../shared/types'
 
 export default defineComponent({
     name: 'DlDropdownButton',
@@ -208,7 +209,7 @@ export default defineComponent({
         dropdownIcon: { type: String, default: 'icon-dl-down-chevron' },
         contentClass: { type: [Array, String, Object], default: '' },
         contentStyle: { type: [Array, String, Object], default: '' },
-        mainBtnStyle: { type: [Array, String, Object], default: '' },
+        mainButtonStyle: { type: [Array, String, Object], default: '' },
         cover: Boolean,
         maxWidth: { type: String, default: null },
         maxHeight: { type: String, default: null },
@@ -224,7 +225,7 @@ export default defineComponent({
             default: 'top end'
         },
         menuOffset: { type: Array, default: () => [0, 0] },
-        disableMainBtn: Boolean,
+        disableMainButton: Boolean,
         disableDropdown: Boolean,
         noIconAnimation: Boolean,
         disabled: Boolean,
@@ -237,7 +238,12 @@ export default defineComponent({
         icon: { type: String, required: false, default: '' },
         iconSize: { type: String, required: false, default: '20px' },
         flat: Boolean,
-        uppercase: Boolean,
+        transform: {
+            type: String,
+            default: 'default',
+            validator: (value: string): boolean =>
+                transformOptions.includes(value)
+        },
         outlined: Boolean,
         padding: { type: String, default: '5px' },
         fitContent: Boolean,
@@ -276,7 +282,7 @@ export default defineComponent({
 
             if (
                 props.disabled === true ||
-                (props.split === false && props.disableMainBtn === true) ||
+                (props.split === false && props.disableMainButton === true) ||
                 props.disableDropdown === true
             ) {
                 acc['aria-disabled'] = 'true'
@@ -302,7 +308,7 @@ export default defineComponent({
             )
         })
 
-        const btnCSSStyles = computed(() => {
+        const buttonCSSStyles = computed(() => {
             return {
                 '--dl-button-border-left': props.outlined
                     ? 'none'
@@ -396,7 +402,7 @@ export default defineComponent({
             iconClass,
             menuRef,
             attributes,
-            btnCSSStyles,
+            buttonCSSStyles,
             showing,
             onBeforeShow,
             onBeforeHide,

package/src/components/compound/DlDropdownButton/components/ButtonGroup.vue

@@ -32,12 +32,13 @@ export default defineComponent({
                 // todo: wtf is this ?
                 // @ts-ignore
                 .filter((t) => this[t] === true)
-                .map((t) => `dl-btn-group--${t}`)
+                .map((t) => `dl-button-group--${t}`)
                 .join(' ')
 
             return (
-                `dl-btn-group row no-wrap${cls.length > 0 ? ' ' + cls : ''}` +
-                (this.spread ? ' dl-btn-group--spread' : ' inline')
+                `dl-button-group row no-wrap${
+                    cls.length > 0 ? ' ' + cls : ''
+                }` + (this.spread ? ' dl-button-group--spread' : ' inline')
             )
         }
     }
@@ -45,7 +46,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.dl-btn-group {
+.dl-button-group {
     border-radius: 2px;
     vertical-align: middle;
 
@@ -57,7 +58,7 @@ export default defineComponent({
             box-shadow: none;
         }
     }
-    > .dl-btn-group {
+    > .dl-button-group {
         box-shadow: none;
 
         &:first-child {
@@ -73,10 +74,10 @@ export default defineComponent({
             }
         }
     }
-    > .dl-btn-group:not(:first-child) > .dl-button:first-child:before {
+    > .dl-button-group:not(:first-child) > .dl-button:first-child:before {
         border-left: 0;
     }
-    > .dl-btn-group:not(:last-child) > .dl-button:last-child:before {
+    > .dl-button-group:not(:last-child) > .dl-button:last-child:before {
         border-right: 0;
     }
     > .dl-button:not(:last-child) {
@@ -108,11 +109,12 @@ export default defineComponent({
         border-radius: 0;
     }
     &--spread {
-        > .dl-btn-group {
+        > .dl-button-group {
             display: flex !important;
         }
         > .dl-button,
-        > .dl-btn-group > .dl-button:not(.dl-btn-dropdown__arrow-container) {
+        > .dl-button-group
+            > .dl-button:not(.dl-button-dropdown__arrow-container) {
             width: auto;
             min-width: 0;
             max-width: 100%;

package/src/components/compound/DlInput/DlInput.vue

@@ -75,7 +75,7 @@
                     ]"
                 >
                     <slot name="append" />
-                    <span v-show="showClearBtn">
+                    <span v-show="showClearButton">
                         <dl-button
                             ref="input-clear-button"
                             icon="icon-dl-close"
@@ -89,7 +89,7 @@
                             Remove text
                         </dl-tooltip>
                     </span>
-                    <span v-show="showShowPassBtn">
+                    <span v-show="showShowPassButton">
                         <dl-button
                             ref="input-show-pass-button"
                             :icon="passShowIcon"
@@ -302,7 +302,7 @@ export default defineComponent({
             default: false
         },
         dense: Boolean,
-        disableClearBtn: {
+        hideClearButton: {
             type: Boolean,
             default: false
         },
@@ -436,7 +436,7 @@ export default defineComponent({
         hasAppend(): boolean {
             return (
                 (!!this.$slots.append ||
-                    !this.disableClearBtn ||
+                    !this.hideClearButton ||
                     this.type === 'password') &&
                 !this.isSmall
             )
@@ -447,9 +447,9 @@ export default defineComponent({
         passShowIcon(): string {
             return this.showPass ? 'icon-dl-hide' : 'icon-dl-show'
         },
-        showClearBtn(): boolean {
+        showClearButton(): boolean {
             return (
-                !this.disableClearBtn &&
+                !this.hideClearButton &&
                 this.type !== 'password' &&
                 !this.disabled &&
                 !this.readonly &&
@@ -457,7 +457,7 @@ export default defineComponent({
                 // this.focused
             )
         },
-        showShowPassBtn(): boolean {
+        showShowPassButton(): boolean {
             return !this.$slots.append && this.type === 'password'
         },
         showSuggestItems(): boolean {

package/src/components/compound/DlJsonEditor/DlJsonEditor.vue

@@ -101,7 +101,7 @@ export default defineComponent({
             default: () => [] as Query[]
         }
     },
-    emits: ['update:modelValue', 'save', 'remove', 'search'],
+    emits: ['update:modelValue', 'save', 'remove', 'search', 'update-query'],
     data() {
         return {
             preventOnChange: false,
@@ -144,20 +144,15 @@ export default defineComponent({
         queries() {
             this.resetEditor()
         },
-        query(val) {
-            this.$nextTick(() => {
-                this.selectedOption = {
-                    label: val.name,
-                    value: val.query
-                }
-                if (val.query && this.jsonEditor.set) {
-                    this.activeQuery = {
-                        name: '',
-                        query: val.query
-                    }
-                }
-                this.alignText()
+        activeQuery(val) {
+            this.$emit('update-query', val)
+            this.jsonEditor?.set({
+                text: val.query
             })
+            this.selectedOption = {
+                label: val.name,
+                value: val.query
+            }
         }
     },
     mounted() {
@@ -289,4 +284,9 @@ export default defineComponent({
     display: flex;
     justify-content: space-between;
 }
+.footer-save {
+    width: 25%;
+    display: flex;
+    justify-content: space-between;
+}
 </style>