feat: 文档更新，支持配置生成案例

Author: rennzhang

docs/.vitepress/theme/styles/index.css

@@ -7,3 +7,5 @@
   width: 100%;
   max-width: 100% !important;
 }
+
+

docs/components.d.ts

@@ -13,6 +13,7 @@ declare module 'vue' {
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElSlider: typeof import('element-plus/es')['ElSlider']
+    ElTips: typeof import('element-plus/es')['ElTips']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

docs/demo/examples/Interactive/components/LangSelect.vue

@@ -1,8 +1,8 @@
 <template>
   <el-form-item label="Lang:" class="mr-4">
     <ElSelect v-model="value" placeholder="Select" style="width: 240px" size="small" filterable>
-      <el-option v-for="item in LANG_OPTIONS" :key="item.value" :label="item.label" :value="item.value"
-        @click.native="onLangChange(item)" />
+      <el-option v-for="item in LANG_OPTIONS" :disabled="item.disabled" :key="item.value" :label="item.label"
+        :value="item.value" @click.native="onLangChange(item)" />
     </ElSelect>
   </el-form-item>
 

docs/demo/examples/Interactive/components/Layout.vue

@@ -49,18 +49,18 @@
 <script lang="ts" setup>
 import { ElSelect, ElOption, ElFormItem, ElCheckbox } from "element-plus";
 
-import { ref, watch, } from "vue";
+import { ref, watch, inject } from "vue";
 import { useStore } from "../store";
 import { ThemeOption } from "../types";
 import { THEME_OPTIONS, } from "../config/themeOptions";
 import "../config/theme"
 
 
-
+const provideHeight = inject<number>('height')
 
 const store = useStore();
 const widthCount = ref(100);
-const heightCount = ref(400);
+const heightCount = ref(provideHeight || 400);
 const widthUnit = ref("%");
 const heightUnit = ref("px");
 
@@ -76,6 +76,8 @@ watch([widthCount, widthUnit], () => {
 
 watch([heightCount, heightUnit], () => {
   store.height = `${heightCount.value}${heightUnit.value}`;
+}, {
+  immediate: true
 });
 
 

docs/demo/examples/Interactive/config/langOptions.ts

@@ -142,6 +142,14 @@ gen ← {' #'[(life ⍣ ⍵) board]}
 (gen 1) (gen 2) (gen 3)
 `,
   },
+  // 更多语言正在添加中...
+  {
+    langPath: "",
+    value: "moreLang",
+    label: "More languages are being added...",
+    code: "",
+    disabled: true,
+  }
 ];
 
 export const DEFAULT_LANG_OPT = LANG_OPTIONS[0];

docs/demo/examples/Interactive/demo.vue

@@ -4,7 +4,7 @@
 </template>
 <script lang="ts" setup>
 import {
-  ref, reactive, computed, watch, nextTick,
+  ref, reactive, computed, watch, nextTick, inject
 } from "vue";
 import { Editor, EditorConfiguration } from "codemirror";
 import Codemirror from "codemirror-editor-vue3";
@@ -22,8 +22,10 @@ import "codemirror/addon/search/matchesonscrollbar.css";
 
 import "./config/lang";
 import { useStore } from "./store";
-
 const store = useStore();
+const provideHeight = inject<number>('height')
+
+store.height = String(provideHeight) || store.height || "500";
 
 const cmOptions: EditorConfiguration = reactive({
   mode: computed(() => (store.lang == "json" ? "javascript" : store.lang)),

docs/demo/examples/Interactive/index.vue

@@ -29,6 +29,7 @@ import 'element-plus/theme-chalk/dark/css-vars.css'
 
 import { useStore } from "./store";
 
+
 const store = useStore();
 const jsTemp = ref(TemplateRaw.toString());
 
@@ -37,6 +38,8 @@ watch(
   (val, oldVal) => {
     let temp = TemplateRaw;
     console.log(" watch store", val, oldVal, val.themePath?.length)
+
+    const transHeight = typeof val.height == "string" ? val.height : val.height + "";
     jsTemp.value = temp
       .replace(`%code%`, val.code)
       .replace(`%theme%`, val.theme)
@@ -58,4 +61,8 @@ watch(
 );
 </script>
 
-<style scoped lang="less"></style>
+<style scoped lang="less">
+:deep(.el-form-item) {
+  margin-bottom: 0;
+}
+</style>

docs/demo/examples/Interactive/template.pug

@@ -15,16 +15,13 @@ import { Editor, EditorConfiguration } from "codemirror";
 import Codemirror from "codemirror-editor-vue3";
 // mode
 %langPath%
-
 %themePath%
-
-
 const code = ref(`%code%`);
 
 const cmOptions: EditorConfiguration = reactive({
   mode: "%lang%",
   theme: "%theme%",
-  readOnly: "%readOnly%",
+  readOnly: %readOnly%,
   lineNumbers: true,
   lineWiseCopyCut: true,
   gutters: ["CodeMirror-lint-markers"],

docs/demo/examples/Interactive/types/index.ts

@@ -3,6 +3,7 @@ export type LangOption = {
   label: string;
   code: string;
   langPath: string;
+  disabled?: boolean;
 };
 
 export type LayoutState = {

docs/demo/home.vue

@@ -1,32 +1,12 @@
 <template>
-  <div style="width: 60%; margin-left: 20vw">
-    <Codemirror v-model:value="code" :options="cmOptions" border :height="300" />
+  <div style="width: 100%; ">
+    <Example></Example>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue"
-import type { EditorConfiguration } from "codemirror"
-import Codemirror from "../../packages/index"
+import { provide } from "vue"
+import Example from "./examples/Interactive/index.vue"
 
-// language
-import "codemirror/mode/javascript/javascript.js"
-
-const code = ref(
-  `var arr = [3, 10, 6, 2];
-for (var i = 0; i < arr.length - 1; i++) {
-    for (var j = 0; j < arr.length - 1 - i; j++) {
-        if (arr[j] > arr[j + 1]) {
-            var num = arr[j];
-            arr[j] = arr[j + 1];
-            arr[j + 1] = num;
-        }
-    }
-}
-console.log(arr)`
-)
-
-const cmOptions: EditorConfiguration = {
-  mode: "text/javascript"
-}
+provide("height", 280)
 </script>