vue-super-crud 1.7.1 → 1.7.4

package/docs/.vuepress/enhanceApp.js

@@ -1,142 +0,0 @@
-// // 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

@@ -1,25 +0,0 @@
-.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

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

package/docs/README.md

@@ -1,14 +0,0 @@
----
-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

@@ -1,31 +0,0 @@
-# 基本使用
-
-## 概述
-
-基于 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

@@ -1,166 +0,0 @@
-# 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

@@ -1,68 +0,0 @@
-# 预设配置模板
-
-## 基本使用
-
-`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

@@ -1,181 +0,0 @@
-# 渲染方式
-
-## 格式化渲染
-
-`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) => {} } |