@dataloop-ai/components 0.18.63 → 0.18.65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.18.63",
+  "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/basic/DlPopup/DlPopup.vue

@@ -15,9 +15,10 @@
                 :class="classes"
                 :style="styles"
             >
-                <draggable-upper
-                    v-if="draggable"
-                    @move="movePopup"
+                <draggable-upper
+                    v-if="draggable"
+                    class="popup-dialog-upper"
+                    @move="movePopup"
                 />
                 <popup-header
                     v-if="
@@ -376,7 +377,7 @@ export default defineComponent({
 
         function configureScrollTarget() {
             if (anchorEl.value !== null || props.scrollTarget) {
-                (localScrollTarget as Ref<any>).value = getScrollTarget(
+                localScrollTarget.value = getScrollTarget(
                     anchorEl.value as HTMLElement,
                     props.scrollTarget
                 )
@@ -505,6 +506,16 @@ export default defineComponent({
     border-radius: 2px;
 }
 
+.popup-dialog-upper {
+    opacity: 0;
+    position: absolute;
+    top: 2px;
+    cursor: pointer;
+}
+.popup-dialog-upper:hover {
+    opacity: 1;
+}
+
 .popup-content {
     max-width: 100%;
     padding: 0 16px;

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

@@ -1,56 +1,86 @@
 <template>
-    <div
-        ref="draggableUpper"
-        class="root"
-    />
+    <div
+        ref="draggableUpper"
+        class="root"
+        @mouseenter="visibleDragIcon = true"
+        @mouseleave="visibleDragIcon = false"
+    >
+        <dl-icon
+            class="draggable-icon"
+            color="dl-color-medium"
+            icon="icon-dl-drag"
+            size="12px"
+            @mousedown="startDragElement"
+        />
+    </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, getCurrentInstance, onMounted } from 'vue-demi'
+import { throttle } from 'lodash'
+import { defineComponent, getCurrentInstance, ref } from 'vue-demi'
+import { DlIcon } from '../../../essential/DlIcon'
 
 export default defineComponent({
+    components: {
+        DlIcon
+    },
     emits: ['move'],
-    setup() {
-        const vm = getCurrentInstance()
+    setup(props, { emit }) {
+        const visibleDragIcon = ref(false)
 
-        onMounted(() => {
-            const root = vm!.refs.draggableUpper as HTMLElement
-            let newX = 0
-            let newY = 0
-            let offsetX = 0
-            let offsetY = 0
+        const draggableOptions = ref({
+            draggableX: 0,
+            draggableY: 0,
+            originalX: 0,
+            originalY: 0,
+            draggableCursor: 'pointer'
+        })
 
-            if (root) {
-                root.onmousedown = dragMouseDown
+        const iconStyles = (): Record<string, string> => {
+            return {
+                cursor: draggableOptions.value.draggableCursor,
+                visibility: visibleDragIcon.value ? 'visible' : 'hidden'
             }
+        }
 
-            function dragMouseDown(e: any) {
-                e = e || window.event
-                e.preventDefault()
-
-                offsetX = e.layerX
-                offsetY = e.layerY
+        const startDragElement = (e: MouseEvent) => {
+            e.preventDefault()
 
-                newX = e.clientX
-                newY = e.clientY
-                document.onmouseup = closeDragElement
+            const target: HTMLElement = e.currentTarget as any
+            const iconOffsetX = target.parentElement.clientWidth / 2
+            const iconOffsetY = target.parentElement.clientHeight / 2
 
-                document.onmousemove = elementDrag
+            if (
+                !draggableOptions.value.originalY &&
+                !draggableOptions.value.originalX
+            ) {
+                draggableOptions.value.originalY = e.y
+                draggableOptions.value.originalX = e.x
             }
 
-            function elementDrag(e: any) {
-                e = e || window.event
+            draggableOptions.value.draggableCursor = 'grabbing'
+            document.onmousemove = throttle((e: MouseEvent) => {
+                e = e || (window.event as MouseEvent)
                 e.preventDefault()
-                newX = e.clientX - offsetX
-                newY = e.clientY - offsetY
-                vm!.emit('move', newX, newY)
-            }
+                const x = e.x - iconOffsetX
+                const y = e.y - iconOffsetY
+                emit('move', x, y)
+            }, 5)
+            document.onmouseup = stopDragElement
+        }
+        const stopDragElement = () => {
+            document.onmousemove = null
+            document.onmouseup = null
+            draggableOptions.value.draggableCursor = 'pointer'
+        }
 
-            function closeDragElement() {
-                document.onmouseup = null
-                document.onmousemove = null
-            }
-        })
+        return {
+            visibleDragIcon,
+            draggableOptions,
+            iconStyles,
+            startDragElement,
+            stopDragElement
+        }
     }
 })
 </script>
@@ -59,6 +89,16 @@ export default defineComponent({
 .root {
     width: 100%;
     height: 10px;
+    display: flex;
+    justify-content: center;
+}
+.draggable-icon {
+    display: none;
+    padding: 0px 10px;
+    transform: rotate(90deg);
+}
+.draggable-icon:hover {
     cursor: move;
+    display: flex;
 }
 </style>

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/demos/DlPopupDemo.vue

@@ -6,6 +6,7 @@
                 additional-info="Some additional information"
                 subtitle="Some text for better explanation."
                 with-close-button
+                draggable
                 @close-button-click="handleClear"
             >
                 <dl-text-area

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'