@dataloop-ai/components 0.20.186 → 0.20.187-code.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.20.186",
+  "version": "0.20.187-code.0",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",
@@ -24,6 +24,8 @@
   },
   "dependencies": {
     "@dataloop-ai/icons": "^3.1.37",
+    "@monaco-editor/loader": "^1.4.0",
+    "monaco-editor": "^0.45.0",
     "@types/flat": "^5.0.2",
     "@types/lodash": "^4.14.184",
     "@types/sortablejs": "^1.15.7",

package/src/components/compound/DlMonacoEditor/DlMonacoEditor.vue

@@ -0,0 +1,424 @@
+<template>
+    <div
+        class="dl-monaco-editor-wrapper"
+        :class="{
+            'dl-monaco-editor-wrapper--bordered': bordered,
+            'dl-monaco-editor-wrapper--dark': isDarkTheme
+        }"
+        :style="cssVars"
+    >
+        <!-- Header -->
+        <div v-if="!options.hideHeader" class="dl-monaco-editor__header">
+            <div class="dl-monaco-editor__header-left">
+                <span
+                    v-if="!options.hideLanguage"
+                    class="dl-monaco-editor__language"
+                >
+                    {{ displayLanguage }}
+                </span>
+                <span v-if="title" class="dl-monaco-editor__title">
+                    {{ title }}
+                </span>
+            </div>
+            <div class="dl-monaco-editor__header-right">
+                <dl-button
+                    v-if="!options.hideCopyButton"
+                    icon="icon-dl-copy"
+                    icon-color="dl-color-medium"
+                    size="14px"
+                    flat
+                    round
+                    tooltip="Copy to clipboard"
+                    @click="copyToClipboard"
+                />
+            </div>
+        </div>
+
+        <!-- Monaco Editor Container -->
+        <div ref="editorContainer" class="dl-monaco-editor__container" />
+    </div>
+</template>
+
+<script lang="ts">
+import {
+    defineComponent,
+    ref,
+    computed,
+    watch,
+    onMounted,
+    onBeforeUnmount,
+    PropType,
+    toRefs
+} from 'vue-demi'
+import loader from '@monaco-editor/loader'
+import type * as Monaco from 'monaco-editor'
+import {
+    DlMonacoEditorTheme,
+    DlMonacoEditorOptions,
+    getMonacoTheme,
+    getLanguageTitle,
+    normalizeLanguage
+} from './types'
+import { DlButton } from '../../basic'
+
+export default defineComponent({
+    name: 'DlMonacoEditor',
+    components: {
+        DlButton
+    },
+    model: {
+        prop: 'modelValue',
+        event: 'update:model-value'
+    },
+    props: {
+        /**
+         * The code content (v-model)
+         */
+        modelValue: {
+            type: String as PropType<string>,
+            default: ''
+        },
+        /**
+         * Width of the editor
+         */
+        width: {
+            type: [String, Number] as PropType<string | number>,
+            default: '100%'
+        },
+        /**
+         * Height of the editor
+         */
+        height: {
+            type: [String, Number] as PropType<string | number>,
+            default: '100%'
+        },
+        /**
+         * Programming language for syntax highlighting
+         */
+        language: {
+            type: String as PropType<string>,
+            default: 'javascript'
+        },
+        /**
+         * Color theme
+         */
+        theme: {
+            type: String as PropType<DlMonacoEditorTheme | string>,
+            default: DlMonacoEditorTheme.Light
+        },
+        /**
+         * Read-only mode
+         */
+        readonly: {
+            type: Boolean as PropType<boolean>,
+            default: false
+        },
+        /**
+         * Show border around editor
+         */
+        bordered: {
+            type: Boolean as PropType<boolean>,
+            default: true
+        },
+        /**
+         * Title to display in header
+         */
+        title: {
+            type: String as PropType<string>,
+            default: null
+        },
+        /**
+         * Editor options
+         */
+        options: {
+            type: Object as PropType<DlMonacoEditorOptions>,
+            default: () => ({} as DlMonacoEditorOptions)
+        }
+    },
+    emits: ['update:model-value', 'change', 'save', 'ready'],
+    setup(props, { emit }) {
+        const {
+            modelValue,
+            language,
+            theme,
+            readonly,
+            options,
+            width,
+            height
+        } = toRefs(props)
+
+        const editorContainer = ref<HTMLElement | null>(null)
+        let editor: Monaco.editor.IStandaloneCodeEditor | null = null
+        let monaco: typeof Monaco | null = null
+
+        // Computed styles
+        const styleWidth = computed(() => {
+            if (typeof width.value === 'number') {
+                return `${width.value}px`
+            }
+            return width.value
+        })
+
+        const styleHeight = computed(() => {
+            if (typeof height.value === 'number') {
+                return `${height.value}px`
+            }
+            return height.value
+        })
+
+        const cssVars = computed(() => ({
+            '--dl-monaco-editor-width': styleWidth.value,
+            '--dl-monaco-editor-height': styleHeight.value
+        }))
+
+        const monacoTheme = computed(() => getMonacoTheme(theme.value))
+
+        const isDarkTheme = computed(() => monacoTheme.value === 'vs-dark')
+
+        const displayLanguage = computed(() => getLanguageTitle(language.value))
+
+        const normalizedLanguage = computed(() =>
+            normalizeLanguage(language.value)
+        )
+
+        const fontSize = computed(() => {
+            if (options.value.fontSize) {
+                return options.value.fontSize
+            }
+            return 14
+        })
+
+        // Initialize Monaco Editor
+        const initEditor = async () => {
+            if (!editorContainer.value) return
+
+            try {
+                monaco = await loader.init()
+
+                editor = monaco.editor.create(editorContainer.value, {
+                    value: modelValue.value,
+                    language: normalizedLanguage.value,
+                    theme: monacoTheme.value,
+                    readOnly: readonly.value,
+                    fontSize: fontSize.value,
+                    tabSize: options.value.tabSpaces || 4,
+                    wordWrap: options.value.textWrapping ? 'on' : 'off',
+                    lineNumbers:
+                        options.value.lineNumbers !== false ? 'on' : 'off',
+                    minimap: {
+                        enabled: options.value.minimap !== false
+                    },
+                    automaticLayout: true,
+                    scrollBeyondLastLine: false,
+                    scrollBeyondLastColumn: 0,
+                    renderWhitespace: 'selection',
+                    folding: true,
+                    foldingStrategy: 'indentation',
+                    suggestOnTriggerCharacters:
+                        options.value.autoComplete !== false,
+                    quickSuggestions: options.value.autoComplete !== false,
+                    scrollbar: {
+                        vertical: 'auto',
+                        horizontal: 'auto',
+                        verticalScrollbarSize: 10,
+                        horizontalScrollbarSize: 10,
+                        alwaysConsumeMouseWheel: false
+                    },
+                    padding: { top: 10, bottom: 10 },
+                    fixedOverflowWidgets: true
+                })
+
+                // Listen to content changes
+                editor.onDidChangeModelContent(() => {
+                    const value = editor?.getValue() || ''
+                    emit('update:model-value', value)
+                    emit('change', value)
+                })
+
+                // Add save command (Ctrl/Cmd + S)
+                editor.addCommand(
+                    monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS,
+                    () => {
+                        emit('save', editor?.getValue() || '')
+                    }
+                )
+
+                emit('ready', editor)
+            } catch (error) {
+                console.error('Failed to initialize Monaco Editor:', error)
+            }
+        }
+
+        // Watch for external value changes
+        watch(modelValue, (newValue) => {
+            if (editor && newValue !== editor.getValue()) {
+                editor.setValue(newValue)
+            }
+        })
+
+        // Watch for language changes
+        watch(normalizedLanguage, (newLanguage) => {
+            if (editor && monaco) {
+                const model = editor.getModel()
+                if (model) {
+                    monaco.editor.setModelLanguage(model, newLanguage)
+                }
+            }
+        })
+
+        // Watch for theme changes
+        watch(monacoTheme, (newTheme) => {
+            if (monaco) {
+                monaco.editor.setTheme(newTheme)
+            }
+        })
+
+        // Watch for readonly changes
+        watch(readonly, (newReadonly) => {
+            if (editor) {
+                editor.updateOptions({ readOnly: newReadonly })
+            }
+        })
+
+        // Watch for option changes
+        watch(
+            options,
+            (newOptions) => {
+                if (editor) {
+                    editor.updateOptions({
+                        fontSize: newOptions.fontSize || 14,
+                        tabSize: newOptions.tabSpaces || 4,
+                        wordWrap: newOptions.textWrapping ? 'on' : 'off',
+                        lineNumbers:
+                            newOptions.lineNumbers !== false ? 'on' : 'off',
+                        minimap: { enabled: newOptions.minimap !== false }
+                    })
+                }
+            },
+            { deep: true }
+        )
+
+        onMounted(() => {
+            initEditor()
+        })
+
+        onBeforeUnmount(() => {
+            if (editor) {
+                editor.dispose()
+                editor = null
+            }
+        })
+
+        // Copy to clipboard
+        const copyToClipboard = async () => {
+            try {
+                const content = editor?.getValue() || modelValue.value
+                await navigator.clipboard.writeText(content)
+                // Could emit a success event or show a toast
+            } catch (error) {
+                console.error('Failed to copy to clipboard:', error)
+            }
+        }
+
+        // Public methods
+        const focus = () => editor?.focus()
+        const getEditor = () => editor
+        const setValue = (value: string) => editor?.setValue(value)
+        const getValue = () => editor?.getValue() || ''
+        const formatDocument = () => {
+            editor?.getAction('editor.action.formatDocument')?.run()
+        }
+
+        return {
+            editorContainer,
+            cssVars,
+            isDarkTheme,
+            displayLanguage,
+            copyToClipboard,
+            focus,
+            getEditor,
+            setValue,
+            getValue,
+            formatDocument
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.dl-monaco-editor-wrapper {
+    width: var(--dl-monaco-editor-width, 100%);
+    min-width: 200px;
+    height: var(--dl-monaco-editor-height, 100%);
+    display: flex;
+    flex-direction: column;
+    background: var(--dl-color-bg);
+    overflow: hidden;
+    box-sizing: border-box;
+
+    &--bordered {
+        border: 1px solid var(--dl-color-separator);
+        border-radius: 2px;
+    }
+
+    &--dark {
+        background: #1e1e1e;
+
+        .dl-monaco-editor__header {
+            background: #252526;
+            border-bottom-color: #3c3c3c;
+        }
+
+        .dl-monaco-editor__language,
+        .dl-monaco-editor__title {
+            color: #cccccc;
+        }
+    }
+}
+
+.dl-monaco-editor {
+    &__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 6px 12px;
+        background: var(--dl-color-panel-background);
+        border-bottom: 1px solid var(--dl-color-separator);
+        min-height: 34px;
+        box-sizing: border-box;
+        flex-shrink: 0;
+    }
+
+    &__header-left {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+    }
+
+    &__header-right {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+    }
+
+    &__language {
+        font-size: 12px;
+        font-weight: 500;
+        color: var(--dl-color-darker);
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+    }
+
+    &__title {
+        font-size: 12px;
+        color: var(--dl-color-medium);
+    }
+
+    &__container {
+        flex: 1 1 auto;
+        min-height: 100px;
+        min-width: 0;
+        overflow: hidden;
+    }
+}
+</style>

package/src/components/compound/DlMonacoEditor/index.ts

@@ -0,0 +1,4 @@
+import DlMonacoEditor from './DlMonacoEditor.vue'
+
+export { DlMonacoEditor }
+export * from './types'

package/src/components/compound/DlMonacoEditor/types.ts

@@ -0,0 +1,116 @@
+/**
+ * Theme options for DlMonacoEditor
+ * Maps the existing DlCodeEditorTheme values to Monaco themes
+ */
+export enum DlMonacoEditorTheme {
+    // Same as DlCodeEditorTheme for compatibility
+    Dark = 'atom-one-dark',
+    Light = 'atom-one-light',
+    ATOM_ONE_DARK = 'atom-one-dark',
+    ATOM_ONE_LIGHT = 'atom-one-light',
+    DRACULA = 'dracula',
+    GITHUB = 'github',
+    GITHUB_DARK = 'github-dark',
+    VS = 'vs',
+    VS_DARK = 'vs2015'
+}
+
+/**
+ * Options for DlMonacoEditor
+ * Same interface as DlCodeEditorOptions for compatibility
+ */
+export interface DlMonacoEditorOptions {
+    /** Font size in pixels */
+    fontSize?: number
+    /** Tab size in spaces */
+    tabSpaces?: number
+    /** Enable text wrapping */
+    textWrapping?: boolean
+    /** Hide the header bar */
+    hideHeader?: boolean
+    /** Hide the copy button */
+    hideCopyButton?: boolean
+    /** Show line numbers */
+    lineNumbers?: boolean
+    /** Hide language display */
+    hideLanguage?: boolean
+    /** Enable minimap (Monaco specific) */
+    minimap?: boolean
+    /** Enable autocomplete (Monaco specific) */
+    autoComplete?: boolean
+}
+
+/**
+ * Map theme names to Monaco editor themes
+ */
+export function getMonacoTheme(theme: string): 'vs' | 'vs-dark' | 'hc-black' {
+    switch (theme) {
+        case 'atom-one-dark':
+        case 'dracula':
+        case 'github-dark':
+        case 'vs2015':
+            return 'vs-dark'
+        case 'atom-one-light':
+        case 'github':
+        case 'vs':
+        default:
+            return 'vs'
+    }
+}
+
+/**
+ * Get display title for language
+ */
+export function getLanguageTitle(language: string): string {
+    const titles: Record<string, string> = {
+        javascript: 'JavaScript',
+        typescript: 'TypeScript',
+        python: 'Python',
+        py: 'Python',
+        js: 'JavaScript',
+        ts: 'TypeScript',
+        html: 'HTML',
+        css: 'CSS',
+        scss: 'SCSS',
+        json: 'JSON',
+        yaml: 'YAML',
+        markdown: 'Markdown',
+        md: 'Markdown',
+        sql: 'SQL',
+        shell: 'Shell',
+        bash: 'Bash',
+        java: 'Java',
+        csharp: 'C#',
+        cpp: 'C++',
+        c: 'C',
+        go: 'Go',
+        rust: 'Rust',
+        php: 'PHP',
+        ruby: 'Ruby',
+        swift: 'Swift',
+        kotlin: 'Kotlin',
+        xml: 'XML',
+        vue: 'Vue'
+    }
+    return (
+        titles[language.toLowerCase()] ||
+        language.charAt(0).toUpperCase() + language.slice(1)
+    )
+}
+
+/**
+ * Normalize language name to Monaco language ID
+ */
+export function normalizeLanguage(language: string): string {
+    const languageMap: Record<string, string> = {
+        js: 'javascript',
+        ts: 'typescript',
+        py: 'python',
+        md: 'markdown',
+        yml: 'yaml',
+        sh: 'shell',
+        bash: 'shell',
+        zsh: 'shell'
+    }
+    return languageMap[language.toLowerCase()] || language.toLowerCase()
+}

package/src/components/compound/index.ts

@@ -23,6 +23,7 @@ export * from './DlTreeTable'
 export * from './DlThumbnailGallery'
 export * from './DlJsonEditor'
 export * from './DlCodeEditor'
+export * from './DlMonacoEditor'
 export * from './DlCard'
 
 /**

package/src/demos/DlMonacoEditorDemo.vue

@@ -0,0 +1,238 @@
+<template>
+    <div class="monaco-editor-demo">
+        <h2>DlMonacoEditor Demo</h2>
+        <p class="demo-description">
+            Drop-in replacement for DlCodeEditor with Monaco Editor (VS Code's
+            editor)
+        </p>
+
+        <!-- Controls -->
+        <div class="controls">
+            <dl-select
+                v-model="selectedLanguage"
+                :options="languageOptions"
+                label="Language"
+                width="150px"
+            />
+            <dl-select
+                v-model="selectedTheme"
+                :options="themeOptions"
+                label="Theme"
+                width="150px"
+            />
+            <dl-checkbox v-model="showLineNumbers" label="Line Numbers" />
+            <dl-checkbox v-model="showMinimap" label="Minimap" />
+            <dl-checkbox v-model="readonly" label="Readonly" />
+            <dl-checkbox v-model="bordered" label="Bordered" />
+        </div>
+
+        <!-- Monaco Editor -->
+        <div class="editor-container">
+            <dl-monaco-editor
+                v-model="code"
+                :language="selectedLanguage.value"
+                :theme="selectedTheme.value"
+                :readonly="readonly"
+                :bordered="bordered"
+                :options="editorOptions"
+                width="100%"
+                height="400px"
+                @change="onCodeChange"
+                @save="onSave"
+            />
+        </div>
+
+        <!-- Comparison with DlCodeEditor -->
+        <div class="comparison">
+            <h3>Same API as DlCodeEditor</h3>
+            <p>
+                Just replace <code>dl-code-editor</code> with
+                <code>dl-monaco-editor</code>:
+            </p>
+            <pre class="code-example">{{ usageExample }}</pre>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed } from 'vue-demi'
+import {
+    DlMonacoEditor,
+    DlMonacoEditorTheme
+} from '../components/compound/DlMonacoEditor'
+import { DlSelect } from '../components/compound/DlSelect'
+import { DlCheckbox } from '../components/essential'
+
+export default defineComponent({
+    name: 'DlMonacoEditorDemo',
+    components: {
+        DlMonacoEditor,
+        DlSelect,
+        DlCheckbox
+    },
+    setup() {
+        const code = ref(`// Welcome to DlMonacoEditor!
+// A drop-in replacement for DlCodeEditor with Monaco (VS Code's editor)
+
+function greet(name: string): string {
+    return \`Hello, \${name}!\`;
+}
+
+const result = greet('World');
+console.log(result);
+
+// Features:
+// - Full IntelliSense
+// - Syntax highlighting for 50+ languages
+// - Code folding
+// - Find and replace
+// - Minimap
+// - And much more!
+`)
+
+        const languageOptions = [
+            { label: 'JavaScript', value: 'javascript' },
+            { label: 'TypeScript', value: 'typescript' },
+            { label: 'Python', value: 'python' },
+            { label: 'HTML', value: 'html' },
+            { label: 'CSS', value: 'css' },
+            { label: 'JSON', value: 'json' },
+            { label: 'Markdown', value: 'markdown' },
+            { label: 'SQL', value: 'sql' },
+            { label: 'YAML', value: 'yaml' },
+            { label: 'Shell', value: 'shell' }
+        ]
+        const selectedLanguage = ref(languageOptions[1])
+
+        const themeOptions = [
+            { label: 'Light', value: DlMonacoEditorTheme.Light },
+            { label: 'Dark', value: DlMonacoEditorTheme.Dark },
+            { label: 'VS', value: DlMonacoEditorTheme.VS },
+            { label: 'VS Dark', value: DlMonacoEditorTheme.VS_DARK },
+            { label: 'GitHub', value: DlMonacoEditorTheme.GITHUB },
+            { label: 'GitHub Dark', value: DlMonacoEditorTheme.GITHUB_DARK },
+            { label: 'Dracula', value: DlMonacoEditorTheme.DRACULA }
+        ]
+        const selectedTheme = ref(themeOptions[1])
+
+        const showLineNumbers = ref(true)
+        const showMinimap = ref(true)
+        const readonly = ref(false)
+        const bordered = ref(true)
+
+        const editorOptions = computed(() => ({
+            lineNumbers: showLineNumbers.value,
+            minimap: showMinimap.value,
+            fontSize: 14,
+            tabSpaces: 4
+        }))
+
+        const onCodeChange = (newCode: string) => {
+            console.log('Code changed, length:', newCode.length)
+        }
+
+        const onSave = (content: string) => {
+            console.log('Save triggered (Ctrl+S)')
+            alert('Save triggered! Check console for content.')
+        }
+
+        const usageExample = `<!-- Before (DlCodeEditor) -->
+<dl-code-editor
+    v-model="code"
+    language="typescript"
+    theme="atom-one-dark"
+    :options="{ lineNumbers: true }"
+/>
+
+<!-- After (DlMonacoEditor) - Same API! -->
+<dl-monaco-editor
+    v-model="code"
+    language="typescript"
+    theme="atom-one-dark"
+    :options="{ lineNumbers: true }"
+/>`
+
+        return {
+            code,
+            languageOptions,
+            selectedLanguage,
+            themeOptions,
+            selectedTheme,
+            showLineNumbers,
+            showMinimap,
+            readonly,
+            bordered,
+            editorOptions,
+            onCodeChange,
+            onSave,
+            usageExample
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.monaco-editor-demo {
+    padding: 20px;
+    max-width: 1200px;
+    margin: 0 auto;
+
+    h2 {
+        margin-bottom: 8px;
+        color: var(--dl-color-darker);
+    }
+
+    .demo-description {
+        color: var(--dl-color-medium);
+        margin-bottom: 20px;
+    }
+
+    .controls {
+        display: flex;
+        gap: 20px;
+        margin-bottom: 20px;
+        align-items: center;
+        flex-wrap: wrap;
+    }
+
+    .editor-container {
+        margin-bottom: 30px;
+        width: 100%;
+    }
+
+    .comparison {
+        background: var(--dl-color-bg);
+        padding: 20px;
+        border-radius: 4px;
+        border: 1px solid var(--dl-color-separator);
+
+        h3 {
+            margin: 0 0 12px 0;
+            color: var(--dl-color-darker);
+        }
+
+        p {
+            margin: 0 0 12px 0;
+            color: var(--dl-color-medium);
+
+            code {
+                background: var(--dl-color-panel-background);
+                padding: 2px 6px;
+                border-radius: 3px;
+                font-family: monospace;
+            }
+        }
+
+        .code-example {
+            background: #1e1e1e;
+            color: #d4d4d4;
+            padding: 16px;
+            border-radius: 4px;
+            overflow-x: auto;
+            font-size: 13px;
+            line-height: 1.5;
+            margin: 0;
+        }
+    }
+}
+</style>

package/src/demos/index.ts

@@ -71,6 +71,7 @@ import DlLabelPickerDemo from './DlLabelPickerDemo.vue'
 import DlInfiniteScrollDemo from './DlInfiniteScrollDemo.vue'
 import DlMarkdownDemo from './DlMarkdownDemo.vue'
 import DlTextInputDemo from './DlTextInputDemo.vue'
+import DlMonacoEditorDemo from './DlMonacoEditorDemo.vue'
 
 export default {
     AvatarDemo,
@@ -142,5 +143,6 @@ export default {
     DlLabelPickerDemo,
     DlInfiniteScrollDemo,
     DlMarkdownDemo,
-    DlTextInputDemo
+    DlTextInputDemo,
+    DlMonacoEditorDemo
 }