vue-super-crud 1.7.1

package/docs/.vuepress/enhanceApp.js

@@ -0,0 +1,142 @@
+// // enhanceApp.js
+// import VueHighlightJS from "vue-highlight.js";
+import "highlight.js/styles/atom-one-dark.css";
+// import ElementUI from "element-ui";
+import "element-ui/lib/theme-chalk/index.css";
+// // import Package from "../../lib/sc-crud";
+// // import "../../lib/index.css";
+// import Package from "../../src/index";
+// // import Contextmenu from "vue-contextmenujs";
+import "../../styles/index.scss";
+
+export default async ({ Vue }) => {
+  if (typeof window !== "undefined") {
+    // 动态导入插件
+    const [
+      { default: VueHighlightJS },
+      { default: ElementUI },
+      { default: Package },
+      { default: Contextmenu },
+    ] = await Promise.all([
+      import("vue-highlight.js"),
+      import("element-ui"),
+      import("../../src/index"),
+      import("vue-contextmenujs"),
+    ]);
+
+    // // 导入样式
+    // await Promise.all([
+    //   import("highlight.js/styles/atom-one-dark.css"),
+    //   import("element-ui/lib/theme-chalk/index.css"),
+    //   import("../../lib/index.css"),
+    // ]);
+
+    Vue.use(VueHighlightJS);
+    Vue.use(ElementUI, {
+      size: "small",
+    });
+    Vue.use(Package, {
+      crudOptions: {
+        gap: 0,
+        border: true,
+      },
+      dict: {
+        request: (key) => {
+          const data = {
+            cascade: [
+              {
+                label: "选项1",
+                value: "1",
+                children: [
+                  {
+                    label: "选项1-1",
+                    value: "1-1",
+                  },
+                  {
+                    label: "选项1-2",
+                    value: "1-2",
+                  },
+                ],
+              },
+              {
+                label: "选项2",
+                value: "2",
+              },
+            ],
+            gender: [
+              {
+                label: "男",
+                value: "1",
+              },
+              {
+                label: "女",
+                value: "2",
+              },
+            ],
+            gender1: [
+              {
+                label: "男",
+                value: "1",
+              },
+              {
+                label: "女",
+                value: "2",
+              },
+            ],
+          };
+          return Promise.resolve({ data: data[key] });
+        },
+      },
+      template: {
+        crud: {
+          uniqueId: true,
+          handleRow: {
+            tempGlobalButton: {
+              label: "自定义temp按钮",
+              icon: "el-icon-eleme",
+              onClick: () => {
+                console.log("自定义temp按钮");
+              },
+            },
+          },
+        },
+        dicts: {
+          getList: (item) => ({
+            request: (params, done) => {
+              const data = [
+                {
+                  label: "男",
+                  value: "1",
+                },
+                {
+                  label: "女",
+                  value: "2",
+                },
+              ];
+              setTimeout(() => {
+                done(data);
+              }, 500);
+            },
+          }),
+        },
+        render: {
+          testCodeTemplate: (item) => ({
+            search: {
+              comp: {
+                name: item.searchCompName,
+                type: item.SearchCompType,
+              },
+            },
+            form: {
+              comp: {
+                name: item.formCompName,
+              },
+            },
+            formatter: (row) => row[item.prop] + "自定义格式化",
+          }),
+        },
+      },
+    });
+    Vue.use(Contextmenu);
+  }
+};

package/docs/.vuepress/styles/index.styl

@@ -0,0 +1,25 @@
+.dark .content__default code {
+  background-color: rgba(57, 197, 187, 1);
+}
+.page {
+  transform: unset !important;
+  overflow: visible !important;
+}
+.page-title {
+  display: none
+}
+.language-vue {
+  border-radius: 0 !important;
+}
+
+.el-table__expand-icon>.el-icon {
+  margin-top: -5px !important;
+}
+.el-table tr {
+  background-color: #fff !important;
+}
+
+.content {
+  margin: 0 !important;
+  padding: 0 !important;
+}

package/docs/.vuepress/styles/palette.styl

@@ -0,0 +1,6 @@
+$accentColor = #50bfff
+
+$textColor = #2c3e50
+$borderColor = #eaecef
+$codeBgColor = #282c34
+$arrowBgColor = #ccc

package/docs/README.md

@@ -0,0 +1,14 @@
+---
+home: true
+heroImage: /super.png
+actionText: 快速上手 →
+actionLink: /guide/start/base.md
+features:
+- title: 快速开发
+  details: 极少的代码即可完成一个crud页面。
+- title: 模板复用
+  details: 配置并复用代码模板，减少重复开发，提升开发效率。
+- title: 高度自定义
+  details: 灵活、丰富的配置，以满足不同项目的高度自定义需求
+footer: MIT Licensed | Copyright © 2019-2020 present Greper
+---

package/docs/guide/button/base.md

@@ -0,0 +1,31 @@
+# 基本使用
+
+## 概述
+
+基于 el-button 的增强型按钮组件，提供了防抖、确认框、下拉菜单等多种交互功能。
+
+## 示例
+
+<ClientOnly>
+<common-code-format>
+  <button-base slot="source"></button-base>
+  
+<<< @/docs/.vuepress/components/button/base.vue
+</common-code-format>
+</ClientOnly>
+
+## API
+
+| 属性          | 说明             | 类型                  | 默认值 |
+| ------------- | ---------------- | --------------------- | ------ |
+| type          | 按钮类型         | String                | -      |
+| size          | 按钮大小         | String                | mini   |
+| disabled      | 是否禁用         | Boolean               | false  |
+| label         | 按钮文本         | String                | -      |
+| hidden        | 是否隐藏         | Boolean               | -      |
+| show          | 是否显示         | Boolean               | -      |
+| children      | 下拉菜单项       | Array                 | -      |
+| time          | 防抖时间(ms)     | Number                | 300    |
+| confirm       | 确认框配置       | Boolean/String/Object | -      |
+| customConfirm | 自定义确认框配置 | Object                | -      |
+| textSubmit    | 文本提交配置     | Object                | -      |

package/docs/guide/commonConfig/jsx.md

@@ -0,0 +1,166 @@
+# JSX 语法
+
+## 内容
+
+```jsx
+render() {
+  return <p>hello</p>
+}
+```
+
+### 具有动态内容:
+
+```jsx
+render() {
+  return <p>hello { this.message }</p>
+}
+```
+
+### 单标签:
+
+```jsx
+render() {
+  return <input />
+}
+```
+
+### 使用组件:
+
+```jsx
+import MyComponent from './my-component'
+
+export default {
+  render() {
+    return <MyComponent>hello</MyComponent>
+  },
+}
+```
+
+## 属性
+
+```jsx
+render() {
+  return <input type="email" />
+}
+```
+
+### 使用动态绑定:
+
+```jsx
+render() {
+  return <input
+    type="email"
+    placeholder={this.placeholderText}
+  />
+}
+```
+
+### 绑定事件:
+
+```jsx
+render() {
+  return <input onInput={this.handleInput} />
+}
+```
+
+### 动态绑定事件:
+
+```jsx
+render() {
+  const events = {
+    "visible-change": () => {
+       console.log("visible-change");
+     },
+  }
+  return <input on={events} />
+}
+```
+
+
+### 动态属性:
+
+```jsx
+render() {
+  const props = {
+    type: 'email',
+    placeholder: 'Enter your email'
+  }
+
+  return <input props={props} />
+}
+```
+
+### 使用扩展运算符:
+
+```jsx
+render() {
+  const inputAttrs = {
+    type: 'email',
+    placeholder: 'Enter your email'
+  }
+
+  return <input {...{ attrs: inputAttrs }} />
+}
+```
+
+
+
+## 插槽
+
+### 命名插槽：
+
+```jsx
+render() {
+  return (
+    <MyComponent>
+      <header slot="header">header</header>
+      <footer slot="footer">footer</footer>
+    </MyComponent>
+  )
+}
+```
+
+### 作用域插槽：
+
+```jsx
+render() {
+  const scopedSlots = {
+    header: () => <header>header</header>,
+    footer: () => <footer>footer</footer>
+  }
+
+  return <MyComponent scopedSlots={scopedSlots} />
+}
+```
+
+## 指令
+
+```jsx
+<input vModel={this.newTodoText} />
+// or
+<input v-model={this.newTodoText} />
+```
+
+### 使用修饰符:
+
+```jsx
+<input vModel_trim={this.newTodoText} />
+```
+
+### 带有参数：
+
+```jsx
+<input vOn:click={this.newTodoText} />
+```
+
+### 带有参数和修饰符:
+
+```jsx
+<input vOn:click_stop_prevent={this.newTodoText} />
+```
+
+### v-html:
+
+```jsx
+<p domPropsInnerHTML={html} />
+```

package/docs/guide/commonConfig/presetCodeTemplate.md

@@ -0,0 +1,68 @@
+# 预设配置模板
+
+## 基本使用
+
+`presetType` 匹配预设的配置，实现配置复用。</br>
+
+通用`presetType` 匹配到的配置对象会与原有的配置合并，形成一个新的配置对象，达到配置复用的效果。
+
+<ClientOnly>
+<common-code-format>
+  <commonConfig-presetCodeTemplate-base slot="source"></commonConfig-presetCodeTemplate-base>
+  
+<<< @/docs/.vuepress/components/commonConfig/presetCodeTemplate/base.vue
+</common-code-format>
+</ClientOnly>
+
+
+
+## 预设配置的动态化
+
+预设的配置如果是一个函数，接收的参数为原有的配置对象`item`，可以动态的返回一个配置对象，实现配置的动态化。
+
+<ClientOnly>
+<common-code-format>
+  <commonConfig-presetCodeTemplate-customParams slot="source"></commonConfig-presetCodeTemplate-customParams>
+  
+<<< @/docs/.vuepress/components/commonConfig/presetCodeTemplate/customParams.vue
+</common-code-format>
+</ClientOnly>
+
+
+
+# 自定义预设配置
+
+::: tip
+在全局配置对象 `template` 下添加新的预设配置 。
+:::
+
+```js
+
+Vue.use(superCrud, {
+  template: {
+    render: { // 渲染模板
+      dateRange: () => ({
+        comp: {
+          name: "el-date-picker",
+          type: "daterange",
+          "range-separator": "-",
+          "start-placeholder": "开始",
+          "end-placeholder": "结束",
+          valueFormat: "yyyy-MM-dd",
+        },
+      }),
+    },
+    rules: { // 校验模板
+       required: (rules, { item }) => {
+          return {
+            required: true,
+            message: item.label + "不能为空",
+            trigger: item.rules.trigger,
+          };
+        },
+    },
+    dict: { // 字典模板
+      ...
+    },
+  }})
+```

package/docs/guide/commonConfig/renderType.md

@@ -0,0 +1,181 @@
+# 渲染方式
+
+## 格式化渲染
+
+`formatter` 用于格式化数据，返回处理后的文本内容 </br>
+`html` 配合 formatter 使用，可以渲染 HTML 字符串
+
+<ClientOnly>
+<common-code-format>
+  <commonConfig-renderType-formatter slot="source"></commonConfig-renderType-formatter>
+<<< @/docs/.vuepress/components/commonConfig/renderType/formatter.vue
+</common-code-format>
+</ClientOnly>
+
+## 插槽渲染
+
+`#[prop]` 插槽名称与 renderColumns 的 prop 属性对应 </br>
+插槽可以接收`scope`作为作用域参数
+
+<ClientOnly>
+<common-code-format>
+  <commonConfig-renderType-slot slot="source"></commonConfig-renderType-slot>
+<<< @/docs/.vuepress/components/commonConfig/renderType/slot.vue
+</common-code-format>
+</ClientOnly>
+
+## render函数渲染
+
+使用 render 函数或 JSX 语法进行渲染 </br>
+当 render 函数接收一个参数时，参数为`scope`；当 render 函数接收两个参数时，第一个参数为`h`，第二个参数为`scope`
+
+<ClientOnly>
+<common-code-format>
+  <commonConfig-renderType-render slot="source"></commonConfig-renderType-render>
+<<< @/docs/.vuepress/components/commonConfig/renderType/render.vue
+</common-code-format>
+</ClientOnly>
+
+## 组件配置渲染
+
+通过配置对象`comp`来定义组件的各种行为和属性 </br>
+
+默认配置：
+- clearable: 默认为 true </br>
+- placeholder: 默认为"请输入/请选择" + 列标签 </br>
+- size: 继承父组件的 size 配置 </br>
+
+<ClientOnly>
+<common-code-format>
+  <commonConfig-renderType-component slot="source"></commonConfig-renderType-component>
+<<< @/docs/.vuepress/components/commonConfig/renderType/component.vue
+</common-code-format>
+</ClientOnly>
+
+### 组件类型转换
+
+原先名字为 el-select 的组件会转化为封装的 sc-select 组件，支持 options 配置, 快速生成选项，[字典组件配置](/guide/dict/component.html#字典组件配置) 
+
+| 原组件            | 转换后组件  |
+| ----------------- | ----------- |
+| el-select         | sc-select   |
+| el-checkbox-group | sc-checkbox |
+| el-radio-group    | sc-radio    |
+| el-switch         | sc-switch   |
+| el-cascader       | sc-cascader |
+
+### 组件属性设置
+支持两种方式设置组件属性：
+1. 直接属性配置
+```js
+{
+  name: 'el-input',
+  type: 'text',
+  placeholder: '请输入',
+  clearable: true
+}
+```
+
+2. bind 配置，支持函数形式，可获取 scope 参数
+```js
+{
+  name: 'el-input',
+  bind: {
+    placeholder: '请输入',
+    clearable: true
+  }
+}
+```
+
+### 事件处理配置
+
+组件支持两种事件配置方式：
+
+1. on 对象配置
+```js
+{
+  name: 'el-input',
+  on: {
+    change: (val, scope) => {
+      console.log('值变化:', val)
+    },
+    input: (val, scope) => {
+      console.log('输入值:', val)
+    }
+  }
+}
+```
+
+2. on 前缀配置
+```js
+{
+  name: 'el-input',
+  onChange: (val, scope) => {
+    console.log('值变化:', val)
+  },
+  onInput: (val, scope) => {
+    console.log('输入值:', val)
+  }
+}
+```
+
+### children 属性详细说明
+
+children 属性用于配置组件的子元素，支持多种配置方式，常用于下拉选择、单选组、复选组等需要子组件、子元素的场景。
+
+1. 返回子组件，支持数组与对象
+```js
+{
+  name: 'el-select',
+  children: [
+    { name: 'el-option', label: '选项1', value: 1 },
+    { name: 'el-option', label: '选项2', value: 2 }
+  ] // { name: 'el-option', label: '选项1', value: 1 }
+}
+```
+
+2. 函数形式
+```js
+{
+  name: 'el-select',
+  children: (scope) => {
+    return scope.dict.map(item => ({
+      name: 'el-option',
+      label: item.label,
+      value: item.value
+    }))
+  }
+}
+
+```
+
+3. 返回子元素
+```js
+{
+  name: 'el-button',
+  children: '按钮'
+}
+
+```
+
+## comp 配置项
+
+| 配置项   | 类型                  | 说明                                               | 示例                                       |
+| -------- | --------------------- | -------------------------------------------------- | ------------------------------------------ |
+| name     | String/Component      | 组件名称或组件对象。字符串时必须为已注册的全局组件 | 'el-input' 或 导入的组件                   |
+| bind     | Object/Function       | 组件的属性配置，函数时可获取 scope 参数            | {placeholder: '请输入'} 或 (scope) => ({}) |
+| on       | Object                | 组件的事件监听配置                                 | {change: (val, scope) => {}}               |
+| slots    | Object                | 组件的插槽配置，接收render函数                     | {default: (h, scope) => []}                |
+| children | Array/Object/Function | 子组件配置或默认插槽内容                           | [{name: 'el-option'}]                      |
+| nativeOn | Object                | 原生事件监听                                       | {click: () => {}}                          |
+| mounted  | Function(scope, ref)  | 组件挂载后调用                                     | (scope, ref) => {}                         |
+
+
+## scope 作用域对象
+
+| 属性   | 说明                                                     |
+| ------ | -------------------------------------------------------- |
+| row    | 当前行数据                                               |
+| self   | 当前组件实例                                             |
+| dict   | 字典数据                                                 |
+| $value | 格式化值的 get/set，{ get: () => {} , set: (val) => {} } |