sohelp-eleplus 1.1.26 → 1.1.28

package/components.js

@@ -21,6 +21,7 @@ export { default as SohelpDatetimeRange } from './sohelp-datetime-range/index.vu
 export { default as SohelpDatetime } from './sohelp-datetime/index.vue';
 export { default as SohelpDatetimePicker } from './sohelp-datetime-picker/index.vue';
 export { default as SohelpInput } from './sohelp-input/index.vue';
+export { default as SohelpInputTag } from './sohelp-input-tag/index.vue';
 export { default as SohelpNumberInput } from './sohelp-number-input/index.vue';
 export { default as SohelpNumberRange } from './sohelp-number-range/index.vue';
 export { default as SohelpSwitch } from './sohelp-switch/index.vue';

package/icons/flag/README.md

@@ -16,7 +16,7 @@
 </template>
 
 <script setup>
-import { UsaFlag, ChinaFlag, EuropeFlag } from '@/components/sohelp-eleplus/icons/flag';
+import { UsaFlag, ChinaFlag, EuropeFlag } from 'sohelp-eleplus/icons/flag';
 </script>
 ```
 
@@ -24,7 +24,7 @@ import { UsaFlag, ChinaFlag, EuropeFlag } from '@/components/sohelp-eleplus/icon
 
 ```vue
 <script setup>
-import * as FlagIcons from '@/components/sohelp-eleplus/icons/flag';
+import * as FlagIcons from 'sohelp-eleplus/icons/flag';
 </script>
 
 <template>

package/icons/flag/index.js

@@ -6,7 +6,6 @@ export { default as JapanFlag } from './JapanFlag.vue';
 export { default as KoreaFlag } from './KoreaFlag.vue';
 export { default as HongkongFlag } from './HongkongFlag.vue';
 export { default as SingaporeFlag } from './SingaporeFlag.vue';
-export { default as AustraliaFlag } from './AustraliaFlag.vue';
 export { default as CanadaFlag } from './CanadaFlag.vue';
 export { default as SwitzerlandFlag } from './SwitzerlandFlag.vue';
 export { default as SwedenFlag } from './SwedenFlag.vue';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sohelp-eleplus",
-  "version": "1.1.26",
+  "version": "1.1.28",
   "description": "SohelpEleplus Extension Components",
   "public": true,
   "main": "index.js",

package/sohelp-ace-editor/README.md

@@ -1,53 +1,43 @@
-# 代码编辑器 (Ace Editor)
+# SohelpAceEditor 代码编辑器
 
-基于 `ace-builds` 封装的代码编辑器组件，支持多种语言模式、代码高亮、语法检查和自定义快捷键。
+基于 Ace Editor 封装的代码编辑器组件，支持 JavaScript、JSON、CSS 语法高亮，自动补全和自定义快捷键。
 
-## 功能特性
-
-- **多语言支持**：内置支持 JavaScript, JSON, CSS 等模式。
-- **智能提示**：支持代码片段提示和自定义代码补全。
-- **快捷键绑定**：支持自定义快捷键触发回调。
-- **格式化**：支持 JSON 格式化。
-
-## 属性 (Props)
-
-| 属性名 | 类型 | 默认值 | 说明 |
-| :--- | :--- | :--- | :--- |
-| modelValue | String | - | 绑定的代码内容 (v-model)。 |
-| height | String | '400px' | 编辑器高度。 |
-| readonly | Boolean | false | 是否只读。 |
-| mode | String | 'javascript' | 语言模式，可选值：'javascript', 'json', 'css' 等。 |
-| userWorker | Boolean | true | 是否开启语法检查。 |
-| wrap | Boolean | true | 是否开启自动换行。 |
-| bindKey | Object | null | 自定义快捷键配置对象。 |
-
-## 事件 (Events)
-
-| 事件名 | 说明 | 回调参数 |
-| :--- | :--- | :--- |
-| update:modelValue | 代码内容变化时触发。 | `value: string` |
-| bindExec | 触发自定义快捷键时触发。 | `value: string` |
-
-## 使用示例
+## 基础用法
 
 ```vue
 <template>
-  <sohelp-ace-editor
-    v-model="code"
-    mode="json"
-    height="500px"
-    :bindKey="{ win: 'Ctrl-S', mac: 'Command-S' }"
-    @bindExec="handleSave"
-  />
+  <sohelp-ace-editor v-model="code" mode="javascript" height="400px" />
 </template>
 
 <script setup>
 import { ref } from 'vue';
-
-const code = ref('{"key": "value"}');
-
-const handleSave = (val) => {
-  console.log('保存代码:', val);
-};
+const code = ref('console.log("Hello")');
 </script>
 ```
+
+## 属性 (Props)
+
+| 属性名 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| modelValue (v-model) | String | - | 否 | 编辑器内容 |
+| height | String | `'400px'` | 否 | 编辑器高度 |
+| readonly | Boolean | `false` | 否 | 是否只读 |
+| mode | String | `'javascript'` | 否 | 语言模式，支持 `javascript`、`json`、`css` |
+| userWorker | Boolean | `true` | 否 | 是否开启语法检查 |
+| wrap | Boolean | `true` | 否 | 是否自动换行 |
+| bindKey | Object | `null` | 否 | 自定义快捷键绑定，如 `{ win: 'Ctrl-Enter', mac: 'Command-Enter' }` |
+
+## 事件 (Events)
+
+| 事件名 | 回调参数 | 说明 |
+| --- | --- | --- |
+| update:modelValue | `value: String` | 编辑器内容变化时触发 |
+| bindExec | `value: String` | 自定义快捷键触发时的回调，返回当前内容 |
+
+## 公开方法 (Expose)
+
+- `getEditorAnnotations()` - 获取编辑器语法检查注解
+- `setValue(newValue)` - 设置编辑器内容
+- `formatJson(val)` - 格式化 JSON 内容
+- `setJsonMode()` - 切换到 JSON 模式
+- `setCssMode()` - 切换到 CSS 模式

package/sohelp-ace-editor/index.vue

@@ -1,11 +1,12 @@
 <template>
   <div class="ace-container" ref="aceContainer">
     <!-- 官方文档中使用id，这里禁止使用，在后期打包后容易出现问题，使用 ref 或者 DOM 就行 -->
-    <div class="ace-editor" ref="ace"></div>
+    <div class="ace-editor" ref="aceRef"></div>
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted, nextTick } from 'vue';
 import ace from 'ace-builds';
 /* 启用此行后webpack打包回生成很多动态加载的js文件，不便于部署，故禁用！！
    特别提示：禁用此行后，需要调用ace.config.set('basePath', 'path...')指定动态js加载URL！！
@@ -19,173 +20,182 @@ import 'ace-builds/src-min-noconflict/mode-json'; //
 import 'ace-builds/src-min-noconflict/mode-css'; //
 import 'ace-builds/src-min-noconflict/ext-language_tools';
 
-export default {
-  name: 'CodeEditor',
-  props: {
-    height: {
-      type: String,
-      default: '400px'
-    },
-    modelValue: {
-      type: String
-      //required: true
-    },
-    readonly: {
-      type: Boolean,
-      default: false
-    },
-    mode: {
-      type: String,
-      default: 'javascript'
-    },
-    userWorker: {
-      //是否开启语法检查，默认开启
-      type: Boolean,
-      default: true
+const props = defineProps({
+  height: {
+    type: String,
+    default: '400px'
+  },
+  modelValue: {
+    type: String
+    //required: true
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  mode: {
+    type: String,
+    default: 'javascript'
+  },
+  userWorker: {
+    //是否开启语法检查，默认开启
+    type: Boolean,
+    default: true
+  },
+  wrap: {
+    type: Boolean,
+    default: true
+  },
+  bindKey: {
+    type: Object,
+    default: null
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'bindExec']);
+
+const aceContainer = ref(null);
+const aceRef = ref(null);
+let aceEditor = null;
+const themePath = 'ace/theme/sqlserver';
+const modePath = 'ace/mode/javascript';
+const codeValue = props.modelValue;
+
+const addAutoCompletion = (aceLib) => {
+  let acData = [
+    {
+      meta: 'VForm API',
+      caption: 'getWidgetRef',
+      value: 'getWidgetRef()',
+      score: 1
     },
-    wrap: {
-      type: Boolean,
-      default: true
+    {
+      meta: 'VForm API',
+      caption: 'getFormRef',
+      value: 'getFormRef()',
+      score: 1
     },
-    bindKey: {
-      type: Object,
-      default: null
+    {
+      meta: 'VForm API',
+      caption: 'getParentFormRef',
+      value: 'getParentFormRef()',
+      score: 1
     }
-  },
-  emits: ['update:modelValue', 'bindExec'],
-  mounted() {
-    ace.config.set(
-      'basePath',
-      'https://ks3-cn-beijing.ksyun.com/vform2021/ace'
-    );
-    const h = Number(this.height.replace("px",""));
-    const maxLine =  h/10 < 5 ? 5 : h /10;
-    this.addAutoCompletion(ace); //添加自定义代码提示！！
-    this.aceEditor = ace.edit(this.$refs.ace, {
-      maxLines: maxLine, // 最大行数，超过会自动出现滚动条
-      minLines: 5, // 最小行数，还未到最大行数时，编辑器会自动伸缩大小
-      fontSize: 12, // 编辑器内字体大小
-      theme: this.themePath, // 默认设置的主题
-      mode: this.modePath, // 默认设置的语言模式
-      tabSize: 2, // 制表符设置为2个空格大小
-      readOnly: this.readonly,
-      highlightActiveLine: true,
-      value: this.codeValue,
-      wrap: this.wrap
-    });
-
-    this.aceEditor.setOptions({
-      enableBasicAutocompletion: true,
-      enableSnippets: true, // 设置代码片段提示
-      enableLiveAutocompletion: true // 设置自动提示
-    });
-
-    if (this.bindKey) {
-      this.aceEditor.commands.addCommand({
-        name: 'myShortcut',
-        bindKey: {
-          ...this.bindKey
-        },
-        exec: (editor) => {
-          this.$emit('bindExec', this.modelValue);
-        }
-      });
-    }
-
-    if (this.mode === 'json') {
-      this.setJsonMode();
-    } else if (this.mode === 'css') {
-      this.setCssMode();
-    }
-
-    if (!this.userWorker) {
-      this.aceEditor.getSession().setUseWorker(false);
+    //TODO: 待补充！！
+  ];
+  let langTools = aceLib.require('ace/ext/language_tools');
+  langTools.addCompleter({
+    getCompletions: function (editor, session, pos, prefix, callback) {
+      if (prefix.length === 0) {
+        return callback(null, []);
+      } else {
+        return callback(null, acData);
+      }
     }
+  });
+};
 
-    //编辑时同步数据
-    this.aceEditor.getSession().on('change', (ev) => {
-      this.$emit('update:modelValue', this.aceEditor.getValue());
-    });
+const setJsonMode = () => {
+  aceEditor.getSession().setMode('ace/mode/json');
+  formatJson(codeValue);
+};
 
-    this.$nextTick(() => {
-      this.$refs.ace.style.minHeight = this.height;
-    });
-  },
-  data() {
-    return {
-      aceEditor: null,
-      themePath: 'ace/theme/sqlserver', // 不导入 webpack-resolver，该模块路径会报错
-      modePath: 'ace/mode/javascript', // 同上
-      codeValue: this.modelValue
-    };
-  },
+const setCssMode = () => {
+  aceEditor.getSession().setMode('ace/mode/css');
+};
 
-  methods: {
-    addAutoCompletion(ace) {
-      let acData = [
-        {
-          meta: 'VForm API',
-          caption: 'getWidgetRef',
-          value: 'getWidgetRef()',
-          score: 1
-        },
-        {
-          meta: 'VForm API',
-          caption: 'getFormRef',
-          value: 'getFormRef()',
-          score: 1
-        },
-        {
-          meta: 'VForm API',
-          caption: 'getParentFormRef',
-          value: 'getParentFormRef()',
-          score: 1
-        }
-        //TODO: 待补充！！
-      ];
-      let langTools = ace.require('ace/ext/language_tools');
-      langTools.addCompleter({
-        getCompletions: function (editor, session, pos, prefix, callback) {
-          if (prefix.length === 0) {
-            return callback(null, []);
-          } else {
-            return callback(null, acData);
-          }
-        }
-      });
-    },
+const getEditorAnnotations = () => {
+  return aceEditor.getSession().getAnnotations();
+};
 
-    setJsonMode() {
-      this.aceEditor.getSession().setMode('ace/mode/json');
-      this.formatJson(this.codeValue);
-    },
+const setValue = (newValue) => {
+  aceEditor.getSession().setValue(newValue);
+};
 
-    setCssMode() {
-      this.aceEditor.getSession().setMode('ace/mode/css');
-    },
+const formatJson = (val) => {
+  if (val) {
+    try {
+      var jsonValue = JSON.parse(val);
+      var formattedJson = JSON.stringify(jsonValue, null, 2);
+      aceEditor.setValue(formattedJson);
+    } catch (error) {
+      console.error('无效的json');
+    }
+  } else {
+    aceEditor.setValue('{}');
+  }
+};
 
-    getEditorAnnotations() {
-      return this.aceEditor.getSession().getAnnotations();
-    },
+onMounted(() => {
+  ace.config.set(
+    'basePath',
+    'https://ks3-cn-beijing.ksyun.com/vform2021/ace'
+  );
+  const h = Number(props.height.replace("px",""));
+  const maxLine =  h/10 < 5 ? 5 : h /10;
+  addAutoCompletion(ace); //添加自定义代码提示！！
+  aceEditor = ace.edit(aceRef.value, {
+    maxLines: maxLine, // 最大行数，超过会自动出现滚动条
+    minLines: 5, // 最小行数，还未到最大行数时，编辑器会自动伸缩大小
+    fontSize: 12, // 编辑器内字体大小
+    theme: themePath, // 默认设置的主题
+    mode: modePath, // 默认设置的语言模式
+    tabSize: 2, // 制表符设置为2个空格大小
+    readOnly: props.readonly,
+    highlightActiveLine: true,
+    value: codeValue,
+    wrap: props.wrap
+  });
+
+  aceEditor.setOptions({
+    enableBasicAutocompletion: true,
+    enableSnippets: true, // 设置代码片段提示
+    enableLiveAutocompletion: true // 设置自动提示
+  });
+
+  if (props.bindKey) {
+    aceEditor.commands.addCommand({
+      name: 'myShortcut',
+      bindKey: {
+        ...props.bindKey
+      },
+      exec: (editor) => {
+        emit('bindExec', props.modelValue);
+      }
+    });
+  }
 
-    setValue(newValue) {
-      this.aceEditor.getSession().setValue(newValue);
-    },
+  if (props.mode === 'json') {
+    setJsonMode();
+  } else if (props.mode === 'css') {
+    setCssMode();
+  }
 
-    formatJson(val) {
-      if (val) {
-        try {
-          var jsonValue = JSON.parse(val);
-          var formattedJson = JSON.stringify(jsonValue, null, 2);
-          this.aceEditor.setValue(formattedJson);
-        } catch (error) {
-          console.error('无效的json');
-        }
-      } else {
-        this.aceEditor.setValue('{}');
-      }
-    }
+  if (!props.userWorker) {
+    aceEditor.getSession().setUseWorker(false);
   }
+
+  //编辑时同步数据
+  aceEditor.getSession().on('change', (ev) => {
+    emit('update:modelValue', aceEditor.getValue());
+  });
+
+  nextTick(() => {
+    aceRef.value.style.minHeight = props.height;
+  });
+});
+
+defineExpose({
+  getEditorAnnotations,
+  setValue,
+  formatJson,
+  setJsonMode,
+  setCssMode
+});
+</script>
+<script>
+export default {
+  name: 'SohelpAceEditor'
 };
 </script>
 

package/sohelp-api-doc/README.md

@@ -0,0 +1,36 @@
+# SohelpApiDoc API 文档
+
+可折叠的组件 API 文档展示组件，支持展示 Props、Events、Methods 和 Slots 表格。
+
+## 基础用法
+
+```vue
+<template>
+  <sohelp-api-doc
+    title="MyComponent"
+    description="这是一个自定义组件"
+    :props="propsData"
+    :events="eventsData"
+  />
+</template>
+
+<script setup>
+const propsData = [
+  { name: 'size', type: 'String', default: 'medium', required: false, desc: '尺寸' }
+];
+const eventsData = [
+  { name: 'change', params: 'value', desc: '值变化时触发' }
+];
+</script>
+```
+
+## 属性 (Props)
+
+| 属性名 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| title | String | `'组件'` | 否 | 文档标题 |
+| description | String | `''` | 否 | 组件描述 |
+| props | Array | `[]` | 否 | Props 数据，每项含 `name/type/default/required/desc` |
+| events | Array | `[]` | 否 | Events 数据，每项含 `name/params/desc` |
+| methods | Array | `[]` | 否 | Methods 数据，每项含 `name/params/desc` |
+| slots | Array | `[]` | 否 | Slots 数据，每项含 `name/params/desc` |

package/sohelp-api-doc/index.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="sohelp-api-doc">
+    <div class="doc-header" @click="expanded = !expanded">
+      <el-icon size="16"><Document /></el-icon>
+      <span class="doc-title">{{ title }} API 文档</span>
+      <el-icon size="14" class="arrow" :class="{ 'is-expanded': expanded }"><ArrowRight /></el-icon>
+    </div>
+
+    <el-collapse-transition>
+      <div v-show="expanded" class="doc-body">
+        <!-- 组件说明 -->
+        <div v-if="description" class="doc-desc">{{ description }}</div>
+
+        <!-- Props 属性 -->
+        <div v-if="props?.length" class="doc-section">
+          <div class="section-title">Props 属性</div>
+          <el-table :data="props" border size="small" class="doc-table">
+            <el-table-column prop="name" label="属性名" width="160" />
+            <el-table-column prop="type" label="类型" width="140" />
+            <el-table-column prop="default" label="默认值" width="120" />
+            <el-table-column label="必填" width="60" align="center">
+              <template #default="{ row }">
+                <el-tag v-if="row.required" type="danger" size="small">是</el-tag>
+                <span v-else>否</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="desc" label="说明" min-width="200" />
+          </el-table>
+        </div>
+
+        <!-- Events 事件 -->
+        <div v-if="events?.length" class="doc-section">
+          <div class="section-title">Events 事件</div>
+          <el-table :data="events" border size="small" class="doc-table">
+            <el-table-column prop="name" label="事件名" width="160" />
+            <el-table-column prop="params" label="回调参数" width="240" />
+            <el-table-column prop="desc" label="说明" min-width="200" />
+          </el-table>
+        </div>
+
+        <!-- Methods 方法 -->
+        <div v-if="methods?.length" class="doc-section">
+          <div class="section-title">Methods 方法</div>
+          <el-table :data="methods" border size="small" class="doc-table">
+            <el-table-column prop="name" label="方法名" width="160" />
+            <el-table-column prop="params" label="参数" width="240" />
+            <el-table-column prop="desc" label="说明" min-width="200" />
+          </el-table>
+        </div>
+
+        <!-- Slots 插槽 -->
+        <div v-if="slots?.length" class="doc-section">
+          <div class="section-title">Slots 插槽</div>
+          <el-table :data="slots" border size="small" class="doc-table">
+            <el-table-column prop="name" label="插槽名" width="160" />
+            <el-table-column prop="params" label="作用域参数" width="240" />
+            <el-table-column prop="desc" label="说明" min-width="200" />
+          </el-table>
+        </div>
+      </div>
+    </el-collapse-transition>
+  </div>
+</template>
+
+<script>
+  export default { name: 'SohelpApiDoc' };
+</script>
+
+<script setup>
+  import { ref } from 'vue';
+  import { Document, ArrowRight } from '@element-plus/icons-vue';
+
+  defineProps({
+    title: { type: String, default: '组件' },
+    description: { type: String, default: '' },
+    props: { type: Array, default: () => [] },
+    events: { type: Array, default: () => [] },
+    methods: { type: Array, default: () => [] },
+    slots: { type: Array, default: () => [] }
+  });
+
+  const expanded = ref(false);
+</script>
+
+<style lang="scss" scoped>
+  .sohelp-api-doc {
+    margin-top: 12px;
+    border: 1px solid var(--el-border-color-lighter);
+    border-radius: 6px;
+    overflow: hidden;
+
+    .doc-header {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 8px 14px;
+      background: var(--el-fill-color-lighter);
+      cursor: pointer;
+      user-select: none;
+      font-size: 13px;
+      color: var(--el-text-color-regular);
+      transition: background 0.2s;
+
+      &:hover {
+        background: var(--el-fill-color);
+      }
+
+      .doc-title {
+        font-weight: 500;
+      }
+
+      .arrow {
+        margin-left: auto;
+        transition: transform 0.3s;
+
+        &.is-expanded {
+          transform: rotate(90deg);
+        }
+      }
+    }
+
+    .doc-body {
+      padding: 16px;
+
+      .doc-desc {
+        margin-bottom: 16px;
+        padding: 10px 14px;
+        background: var(--el-color-primary-light-9);
+        border-radius: 4px;
+        font-size: 13px;
+        color: var(--el-text-color-regular);
+        line-height: 1.6;
+      }
+
+      .doc-section {
+        margin-bottom: 20px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        .section-title {
+          font-size: 14px;
+          font-weight: 600;
+          color: var(--el-text-color-primary);
+          margin-bottom: 8px;
+          padding-left: 8px;
+          border-left: 3px solid var(--el-color-primary);
+        }
+      }
+
+      .doc-table {
+        :deep(.el-table__cell) {
+          font-size: 12px;
+          padding: 6px 0;
+        }
+      }
+    }
+  }
+</style>