@dataloop-ai/components 0.18.70 → 0.18.71

package/package.json

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

package/src/StateManager.ts

@@ -1,4 +1,5 @@
 import { computed, reactive } from 'vue-demi'
+import { ILogger, loggerFactory } from './utils'
 
 export interface DlComponentsState {
     theme: 'light' | 'dark'
@@ -16,6 +17,7 @@ export class StateManager {
     }
 
     private _state: DlComponentsState = null
+    public logger: ILogger = null
 
     private constructor() {
         this._state = reactive({
@@ -23,6 +25,7 @@ export class StateManager {
             locale: 'en',
             disableDebounce: false
         })
+        this.logger = loggerFactory('DlComponents')
     }
 
     public get state(): DlComponentsState {

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

@@ -130,7 +130,7 @@ export default defineComponent({
          * The size of the button, it can be s,m,l or xl
          */
         margin: { type: String, default: '0 auto' },
-        size: { type: String! as PropType<ButtonSizes>, default: 'm' },
+        size: { type: String! as PropType<ButtonSizes | string>, default: 'm' },
         /**
          * The assigned color will fill the entirety of the button
          */

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

@@ -1,37 +1,42 @@
 import { getColor } from '../../../utils'
 import { getLighterGradient } from '../../../utils/getLighterGradient'
 
-export type ButtonSizes = 's' | 'm' | 'l' | ('xl' & string)
+export enum ButtonSizes {
+    s = 's',
+    m = 'm',
+    l = 'l',
+    xl = 'xl'
+}
 
-const paddings = {
+const paddings: { [key: string]: string } = {
     s: '7px 16px',
     m: '9px 16px',
     l: '10px 16px',
     xl: '12px 16px'
 }
 
-const iconPaddings = {
+const iconPaddings: { [key: string]: string } = {
     s: '6px',
     m: '8px',
     l: '10px',
     xl: '12px'
 }
 
-const iconSizes = {
+const iconSizes: { [key: string]: string } = {
     s: '12px',
     m: '16px',
     l: '18px',
     xl: '20px'
 }
 
-const maxHeights = {
+const maxHeights: { [key: string]: string } = {
     s: '28px',
     m: '34px',
     l: 'auto',
     xl: 'auto'
 }
 
-const fontSizes = {
+const fontSizes: { [key: string]: string } = {
     s: '12px',
     m: '14px',
     l: '16px',
@@ -48,15 +53,21 @@ export interface DlButtonProps {
     textColor: string
 }
 
-export const setIconSize = (size: ButtonSizes) => iconSizes[size] || size
+export const setIconSize = (size: ButtonSizes | string): string =>
+    iconSizes[size] || size
 
-export const setPadding = (size: ButtonSizes) => paddings[size]
+export const setPadding = (size: ButtonSizes | string): string | undefined =>
+    paddings[size]
 
-export const setIconPadding = (size: ButtonSizes) => iconPaddings[size]
+export const setIconPadding = (
+    size: ButtonSizes | string
+): string | undefined => iconPaddings[size]
 
-export const setFontSize = (size: ButtonSizes) => fontSizes[size]
+export const setFontSize = (size: ButtonSizes | string): string | undefined =>
+    fontSizes[size]
 
-export const setMaxHeight = (size: ButtonSizes) => maxHeights[size]
+export const setMaxHeight = (size: ButtonSizes | string): string | undefined =>
+    maxHeights[size]
 
 export const setTextColor = ({
     disabled,

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

@@ -463,7 +463,9 @@ export default defineComponent({
         Object.assign(proxy, { focus, updatePosition })
 
         return {
-            uuid: `dl-popup-${v4()}`,
+            uuid: (attrs.id as string)?.length
+                ? (attrs.id as string)
+                : `dl-popup-${v4()}`,
             portalIsAccessible,
             anchorEl,
             showing,
@@ -475,7 +477,7 @@ export default defineComponent({
             innerRef,
             portalEl: isVue2 ? 'body' : portalEl,
             portalIsActive,
-            classes: 'dl-popup dl-position-engine scroll',
+            classes: ['dl-popup dl-position-engine scroll', attrs.class],
             styles: [
                 isString(attrs.style)
                     ? stringStyleToRecord(attrs.style)

package/src/components/compound/DlDialogBox/DlDialogBox.vue

@@ -3,6 +3,7 @@
         <div
             v-if="show"
             :id="uuid"
+            :class="$attrs.class"
             :style="cssVars"
             class="root-wrapper"
         >
@@ -129,7 +130,9 @@ export default defineComponent({
         visibleDragIcon: boolean
     } {
         return {
-            uuid: `dl-dialog-box-${v4()}`,
+            uuid: (this.$attrs.id as string)?.length
+                ? (this.$attrs.id as string)
+                : `dl-dialog-box-${v4()}`,
             show: this.modelValue,
             draggableOptions: {
                 draggableX: 0,

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

@@ -94,7 +94,9 @@ export default defineComponent({
                     undefined
             ) {
                 if (!(status.contentErrors as ContentParseError).isRepairable) {
-                    console.warn('[DlJsonEditor] Failed to parse JSON')
+                    stateManager.logger.warn(
+                        '[DlJsonEditor] Failed to parse JSON'
+                    )
                     return
                 }
             }
@@ -163,7 +165,10 @@ export default defineComponent({
                 })
                 emit('align-text')
             } catch (e) {
-                console.warn('[DlJsonEditor] Failed to format document', e)
+                stateManager.logger.warn(
+                    '[DlJsonEditor] Failed to format document',
+                    e
+                )
                 return
             }
         }
@@ -178,7 +183,10 @@ export default defineComponent({
                 const parsed = JSON.parse(modelValue.value)
                 return parsed
             } catch (e) {
-                console.warn('[DlJsonEditor] Failed to format document', e)
+                stateManager.logger.warn(
+                    '[DlJsonEditor] Failed to format document',
+                    e
+                )
                 return null
             }
         }