@dataloop-ai/components 0.18.64 → 0.18.66

package/package.json

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

package/src/StateManager.ts

@@ -0,0 +1,73 @@
+import { computed, reactive } from 'vue-demi'
+
+export interface DlComponentsState {
+    theme: 'light' | 'dark'
+    locale: 'en' | 'es'
+    disableDebounce: boolean
+}
+
+export class StateManager {
+    private static _instance: StateManager | null = null
+    public static get instance(): StateManager {
+        if (StateManager._instance === null) {
+            StateManager._instance = new StateManager()
+        }
+        return StateManager._instance
+    }
+
+    private _state: DlComponentsState = null
+
+    private constructor() {
+        this._state = reactive({
+            theme: 'light',
+            locale: 'en',
+            disableDebounce: false
+        })
+    }
+
+    public get state(): DlComponentsState {
+        return this._state
+    }
+
+    // public theme = computed({
+    //     get: () => this._state.theme,
+    //     set: (theme: 'light' | 'dark') => {
+    //         this._state.theme = theme
+    //     }
+    // })
+
+    // public disableDebounce = computed({
+    //     get: () => this._state.disableDebounce,
+    //     set: (disableDebounce: boolean) => {
+    //         this._state.disableDebounce = disableDebounce
+    //     }
+    // })
+
+    // public isDarkTheme = computed(() => this._state.theme === 'dark')
+    // public isLightTheme = computed(() => this._state.theme === 'light')
+
+    public get theme(): 'light' | 'dark' {
+        return this._state.theme
+    }
+    public set theme(theme: 'light' | 'dark') {
+        this._state.theme = theme
+    }
+
+    public get disableDebounce(): boolean {
+        return this._state.disableDebounce
+    }
+    public set disableDebounce(value: boolean) {
+        this._state.disableDebounce = value
+    }
+
+    public get isDarkTheme(): boolean {
+        return this._state.theme === 'dark'
+    }
+    public get isLightTheme(): boolean {
+        return this._state.theme === 'light'
+    }
+}
+
+export const stateManager = StateManager.instance
+// @ts-ignore
+window.DlComponents = StateManager.instance

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,7 +1,7 @@
 import { getColor } from '../../../utils'
 import { getLighterGradient } from '../../../utils/getLighterGradient'
 
-export type ButtonSizes = 's' | 'm' | 'l' | ('xl' & string)
+export type ButtonSizes = 's' | 'm' | 'l' | 'xl'
 
 const paddings = {
     s: '7px 16px',

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

@@ -256,6 +256,7 @@ import { DlMenu, DlIcon, DlList, DlEllipsis } from '../../essential'
 import { DlButton } from '../../basic'
 import { InputSizes, TInputSizes } from '../../../utils/input-sizes'
 import { v4 } from 'uuid'
+import { stateManager } from '../../../StateManager'
 
 export default defineComponent({
     name: 'DlInput',
@@ -545,6 +546,9 @@ export default defineComponent({
             return !!this.suggestItems.length && !!this.modelValue
         },
         debouncedBlur(): any {
+            if (stateManager.disableDebounce) {
+                return this.onBlur.bind(this)
+            }
             const debounced = debounce(this.onBlur.bind(this), 50)
             return debounced
         },
@@ -572,6 +576,9 @@ export default defineComponent({
             return classes
         },
         debouncedInput(): any {
+            if (stateManager.disableDebounce) {
+                return this.onChange.bind(this)
+            }
             const debounced = debounce(this.onChange.bind(this), this.debounce)
             return debounced
         }

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

@@ -25,6 +25,7 @@ import {
     TextContent
 } from 'vanilla-jsoneditor'
 import { debounce } from 'lodash'
+import { stateManager } from '../../../StateManager'
 
 export default defineComponent({
     model: {
@@ -110,11 +111,16 @@ export default defineComponent({
             emit('change', (content as TextContent).text)
         }
 
-        const debouncedHandleJSONChange = debounce(handleJSONChange, 100)
+        const debouncedHandleJSONChange = computed(() => {
+            if (stateManager.disableDebounce) {
+                return handleJSONChange
+            }
+            return debounce(handleJSONChange, 100)
+        })
 
         const initJsonEditor = () => {
             const initialAttrs: JSONEditorPropsOptional = {
-                onChange: debouncedHandleJSONChange,
+                onChange: debouncedHandleJSONChange.value,
                 indentation: indentation.value,
                 mode: mode.value,
                 readOnly: readonly.value || mode.value === Mode.tree,