Merge pull request #185 from qianmoQ/feature-components

refactor and feat code editor
devlive-community · Dec 27, 2024 · e62a428 · e62a428
2 parents 8d582a2 + e026895
commit e62a428
Show file tree

Hide file tree

Showing 19 changed files with 1,095 additions and 352 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -18,6 +18,12 @@ All notable changes to this project will be documented in this file. See [standa
 - feat: support year
 - feat: support custom cell
 
+#### Code Editor
+
+- refactor: refactor code editor to use monaco editor
+- feat: support auto completion
+- feat: support context menu
+
 ### 2024.5.3 (2024-12-23)
 
 #### Core

diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
@@ -177,7 +177,7 @@ export default {
                     const items = [
                         {text: 'Modal', link: 'view/modal', icon: '/components/view/modal.svg', version: '2024.1.1'},
                         {text: 'Tooltip', link: 'view/tooltip', icon: '/components/view/tooltip.svg', version: '2024.1.1'},
-                        {text: 'Code', link: 'view/code', icon: '/components/view/code.svg', version: '2024.1.1'},
+                        {text: 'Code Editor', link: 'view/code-editor', icon: '/components/view/code.svg', version: '2024.1.1'},
                         {text: 'Alert', link: 'view/alert', icon: '/components/view/alert.svg', version: '2024.1.2'},
                         {text: 'Progress', link: 'view/progress', icon: '/components/view/progress.svg', version: '2024.1.2'},
                         {text: 'Drawer', link: 'view/drawer', icon: '/components/view/drawer.svg', version: '2024.1.2'},

diff --git a/docs/components/view/code-editor.md b/docs/components/view/code-editor.md
@@ -0,0 +1,183 @@
+---
+title: Shadcn CodeEditor
+---
+
+# Introduction
+
+This document describes the features and usage of the ShadcnCodeEditor component.
+
+## Usage
+
+::: raw
+
+<CodeRunner title="Usage">
+    <ShadcnCodeEditor v-model="value" />
+</CodeRunner>
+
+:::
+
+::: details Show code
+
+```vue
+<template>
+    <ShadcnCodeEditor v-model="value" />
+</template>
+```
+
+:::
+
+## Height
+
+::: raw
+
+<CodeRunner title="Height">
+    <ShadcnCodeEditor v-model="value" :height="216" />
+</CodeRunner>
+
+:::
+
+::: details Show code
+
+```vue
+<template>
+    <ShadcnCodeEditor v-model="value" :height="216" />
+</template>
+```
+
+:::
+
+## Config
+
+::: raw
+
+<CodeRunner title="Config">
+    <ShadcnCodeEditor v-model="value" :config="{language: 'javascript'}" />
+</CodeRunner>
+
+:::
+
+::: details Show code
+
+```vue
+<template>
+  <ShadcnCodeEditor v-model="value" :config="{language: 'javascript'}" />
+</template>
+```
+
+:::
+
+## Auto Completion
+
+::: raw
+
+<CodeRunner title="Auto Completion">
+    <ShadcnCodeEditor v-model="value"
+                      :auto-complete-config="{
+                          endpoint: 'http://jsonplaceholder.typicode.com/posts',
+                          method: 'GET',
+                          trigger: ['.', '@'],
+                          transform: (data: any) => {
+                            return data.map((item: any) => ({
+                              label: item.title,
+                              insertText: item.body,
+                              detail: item.title
+                            }))
+                          },
+                          // requestParams: (context) => ({
+                          //     word: context.word,
+                          //     line: context.position.lineNumber.toString()
+                          // }),
+                          // requestBody: (context) => ({
+                          //     code: context.modelValue,
+                          //     position: context.position
+                          // })
+                        }"/>
+</CodeRunner>
+
+:::
+
+::: details Show code
+
+```vue
+<ShadcnCodeEditor v-model="value"
+                      :auto-complete-config="{
+                          endpoint: 'http://jsonplaceholder.typicode.com/posts',
+                          method: 'GET',
+                          trigger: ['.', '@'],
+                          transform: (data: any) => {
+                            return data.map((item: any) => ({
+                              label: item.title,
+                              insertText: item.body,
+                              detail: item.title
+                            }))
+                          },
+                          // requestParams: (context) => ({
+                          //     word: context.word,
+                          //     line: context.position.lineNumber.toString()
+                          // }),
+                          // requestBody: (context) => ({
+                          //     code: context.modelValue,
+                          //     position: context.position
+                          // })
+                        }"/>
+```
+
+:::
+
+## Context Menu
+
+::: raw
+
+<CodeRunner title="Context Menu">
+    <ShadcnCodeEditor v-model="value"
+                      :context-menu-config="{
+                           showDefaultItems: true,
+                           items: [{
+                              label: 'Format Code',
+                              icon: 'Save',
+                              action: ({ editor, selection}) => {
+                                console.log(editor.getModel()?.getValueInRange(selection))
+                              }
+                           }]
+                      }"/>
+</CodeRunner>
+
+:::
+
+::: details Show code
+
+```vue
+    <ShadcnCodeEditor v-model="value"
+                      :context-menu-config="{
+                           showDefaultItems: true,
+                           items: [{
+                              label: 'Format Code',
+                              icon: 'Save',
+                              action: ({ editor, selection}) => {
+                                console.log(editor.getModel()?.getValueInRange(selection))
+                              }
+                           }]
+                      }"/>
+```
+
+:::
+
+## CodeEditor Props
+
+<ApiTable title="Props"
+    :headers="['Attribute', 'Description', 'Type', 'Default Value', 'List']"
+    :columns="[
+        ['modelValue', 'modelValue value', 'string', '-', '-'],
+        ['height', 'height value', 'number', '300', '-'],
+        ['config', 'see monaco.editor.IStandaloneEditorConstructionOptions', 'any', '{}', '-'],
+        ['autoCompleteConfig', 'see CodeEditorAutoCompleteProps', 'any', '{}', '-'],
+        ['contextMenuConfig', 'see CodeEditorContextMenuProps', 'any', '{}', '-'],
+    ]">
+</ApiTable>
+
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const value = ref('Hello View Shadcn UI')
+</script>
diff --git a/docs/components/view/code.md b/docs/components/view/code.md
diff --git a/package.json b/package.json
@@ -97,10 +97,9 @@
   },
   "dependencies": {
     "clsx": "^2.1.0",
-    "cron-parser": "^4.9.0",
-    "highlight.js": "^11.10.0",
     "lodash": "^4.17.21",
     "lucide-vue-next": "^0.360.0",
+    "monaco-editor": "^0.52.2",
     "qrcode": "^1.5.4",
     "tailwind-merge": "^2.2.2",
     "tailwindcss-animate": "^1.0.7",
@@ -117,6 +116,7 @@
     "terser": "^5.37.0",
     "typescript": "^5.2.2",
     "vite": "^5.2.0",
+    "vite-plugin-monaco-editor": "^1.1.0",
     "vitepress": "^1.4.1",
     "vue-tsc": "^2.0.6"
   }

diff --git a/packages/index.ts b/packages/index.ts
@@ -13,7 +13,7 @@ import ShadcnInput from '@/ui/input'
 import ShadcnIcon from '@/ui/icon'
 import ShadcnModal from '@/ui/modal'
 import ShadcnTooltip from '@/ui/tooltip'
-import ShadcnCode from '@/ui/code'
+import { ShadcnCodeEditor } from '@/ui/code-editor'
 import ShadcnRow from '@/ui/row'
 import ShadcnCol from '@/ui/col/ShadcnCol.vue'
 import ShadcnDivider from '@/ui/divider'
@@ -104,7 +104,7 @@ let components = [
     ShadcnButtonGroup,
     ShadcnCard,
     ShadcnCopy,
-    ShadcnCode,
+    ShadcnCodeEditor,
     ShadcnInput,
     ShadcnIcon,
     ShadcnModal,
@@ -234,7 +234,7 @@ export { default as ShadcnButton } from '@/ui/button'
 export { default as ShadcnButtonGroup } from '@/ui/button/group'
 export { default as ShadcnCard } from '@/ui/card'
 export { default as ShadcnCopy } from '@/ui/copy'
-export { default as ShadcnCode } from '@/ui/code'
+export { ShadcnCodeEditor } from '@/ui/code-editor'
 export { default as ShadcnInput } from '@/ui/input'
 export { default as ShadcnIcon } from '@/ui/icon'
 export { default as ShadcnModal } from '@/ui/modal'