@dataloop-ai/components 0.18.64 → 0.18.65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.18.64",
+  "version": "0.18.65",
   "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/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,

package/src/components/essential/DlThemeProvider/DlThemeProvider.vue

@@ -9,6 +9,7 @@ import { defineComponent, onMounted, watch, provide, ref } from 'vue-demi'
 import { getThemeModeAttr } from '../../../utils'
 import '@dataloop-ai/icons/style.css'
 import { v4 } from 'uuid'
+import { stateManager } from '../../../StateManager'
 
 export default defineComponent({
     props: {
@@ -26,8 +27,7 @@ export default defineComponent({
 
         const isDarkTheme = ref(props.isDark)
 
-        // @ts-ignore
-        window.DlComponents?.setTheme(props.isDark ? 'dark' : 'light')
+        stateManager.theme = props.isDark ? 'dark' : 'light'
 
         provide('theme', isDarkTheme)
 
@@ -40,8 +40,7 @@ export default defineComponent({
                     getThemeModeAttr(isDark)
                 ) // sets the dl data-theme attr
 
-                // @ts-ignore
-                window.DlComponents?.setTheme(props.isDark ? 'dark' : 'light')
+                stateManager.theme = props.isDark ? 'dark' : 'light'
             }
         )
     },

package/src/demos/DlCodeEditor/DlCodeEditorDemo.vue

@@ -1,9 +1,5 @@
 <template>
     <div>
-        <dl-switch
-            v-model="isDark"
-            left-label="Dark Mode"
-        />
         <dl-switch
             v-model="lines"
             left-label="code lines"
@@ -17,7 +13,7 @@
             width="45vw"
             height="75vh"
             :language="language"
-            :theme="'atom-one-dark'"
+            :theme="theme"
             :readonly="readonly"
             :options="options"
         />
@@ -28,6 +24,7 @@
 import { computed, defineComponent, ref, watch } from 'vue-demi'
 import { DlCodeEditor, DlSwitch } from '../../components'
 import { DlCodeEditorOptions, DlCodeEditorTheme } from '../../components/types'
+import { stateManager } from '../../StateManager'
 
 export default defineComponent({
     name: 'DlCodeEditorDemo',
@@ -37,7 +34,6 @@ export default defineComponent({
     },
     setup() {
         const readonly = ref(false)
-        const isDark = ref(false)
         const lines = ref(false)
 
         const codeEditorValue = ref(
@@ -213,7 +209,7 @@ export default defineComponent({
         const language = ref('python')
 
         const theme = computed(() => {
-            return isDark.value
+            return stateManager.isDarkTheme
                 ? DlCodeEditorTheme.Dark
                 : DlCodeEditorTheme.Light
         })
@@ -230,7 +226,6 @@ export default defineComponent({
             lines,
             codeEditorValue,
             language,
-            isDark,
             theme,
             readonly,
             options

package/src/demos/DlDatasetBrowserLayoutDemo/components/MainContent/EmptyState/LayoutEmptyState.vue

@@ -20,6 +20,7 @@ import { computed, defineComponent, ref } from 'vue-demi'
 import UploadData from './UploadData.vue'
 import { DlCodeEditor } from '../../../../../components'
 import { DlCodeEditorTheme } from '../../../../../components/types'
+import { stateManager } from '../../../../../StateManager'
 
 export default defineComponent({
     name: 'LayoutEmptyState',
@@ -201,13 +202,9 @@ export default defineComponent({
         const language = ref('python')
 
         const theme = computed(() => {
-            if (
-                // @ts-ignore
-                window.DlComponents.isDark.value
-            ) {
-                return DlCodeEditorTheme.Dark
-            }
-            return DlCodeEditorTheme.Light
+            return stateManager.isDarkTheme
+                ? DlCodeEditorTheme.Dark
+                : DlCodeEditorTheme.Light
         })
 
         return {

package/src/index.ts

@@ -1,28 +1,7 @@
-import { computed, install, reactive } from 'vue-demi'
+import { install } from 'vue-demi'
 
 install()
 
-// @ts-ignore
-window.DlComponents = window.DlComponents || {
-    state: reactive({}),
-    setTheme: (theme: 'light' | 'dark') => {
-        // @ts-ignore
-        window.DlComponents.state.theme = theme
-    },
-    get theme(): 'light' | 'dark' {
-        // @ts-ignore
-        return window.DlComponents.state.theme
-    },
-    isDark: computed(() => {
-        // @ts-ignore
-        return window.DlComponents.state.theme === 'dark'
-    }),
-    isLight: computed(() => {
-        // @ts-ignore
-        return window.DlComponents.state.theme === 'light'
-    })
-}
-
 export * from './components'
 export * from './layouts'