vue-super-crud 1.7.1

package/docs/guide/formatData/config.md

@@ -0,0 +1,142 @@
+# 格式化配置文档
+
+## 通用配置项
+
+| 配置项      | 类型           | 默认值 | 说明                                                                            |
+| ----------- | -------------- | ------ | ------------------------------------------------------------------------------- |
+| type        | String         | -      | 格式化类型，可选值见下方预设格式化类型                                          |
+| formatValue | Boolean/String | false  | 是否保存格式化后的值。为 true 时存储在 `${prop}` 中，为字符串时存储在指定字段中 |
+| input       | Function       | -      | 格式化函数                                                                      |
+| output      | Function       | -      | 反格式化函数                                                                    |
+
+## 预设格式化类型
+
+### strToArr（字符串转数组）
+将字符串转换为数组。
+
+**数据转换：**
+```javascript
+"前端,Vue,React" -> ["前端", "Vue", "React"]
+```
+
+| 配置项    | 类型   | 默认值 | 说明   |
+| --------- | ------ | ------ | ------ |
+| separator | String | ","    | 分隔符 |
+
+### multiPropToArr（多字段转数组）
+将多个字段的值合并为数组。
+
+**数据转换：**
+```javascript
+{
+  province: "浙江",
+  city: "杭州",
+  district: "西湖"
+} -> ["浙江", "杭州", "西湖"]
+```
+
+| 配置项    | 类型    | 默认值 | 说明                       |
+| --------- | ------- | ------ | -------------------------- |
+| multiProp | Array   | -      | 需要合并的字段名数组       |
+| isObject  | Boolean | false  | 是否包裹在字段prop的对象中 |
+
+### numberFormat（数字格式化）
+对数字进行格式化处理。
+
+**数据转换：**
+```javascript
+1234.56 -> "¥1,234.56" // thousandth: true, prefix: "¥", precision: 2
+1234.5678 -> "¥1234.57" // precision: 2, round: true, prefix: "¥"
+1234 -> "1,234.00" // toFixed: true, precision: 2
+```
+
+| 配置项     | 类型    | 默认值    | 说明             |
+| ---------- | ------- | --------- | ---------------- |
+| precision  | Number  | undefined | 精度（小数位数） |
+| round      | Boolean | true      | 是否四舍五入     |
+| toFixed    | Boolean | false     | 是否固定小数位数 |
+| thousandth | Boolean | false     | 是否显示千分位   |
+| prefix     | String  | ""        | 前缀             |
+| suffix     | String  | ""        | 后缀             |
+| keepZero   | Boolean | false     | 是否保留末尾0    |
+
+### dateFormat（日期格式化）
+对日期进行格式化处理。
+
+**数据转换：**
+```javascript
+"2024-03-20" -> "2024年03月20日" // valueFormat: "YYYY年MM月DD日"
+1710921600000 -> "2024年03月20日" 
+new Date() -> "2024年03月20日"
+```
+
+| 配置项       | 类型   | 默认值       | 说明     |
+| ------------ | ------ | ------------ | -------- |
+| valueFormat  | String | "YYYY-MM-DD" | 值格式   |
+| outputFormat | String | null         | 输出格式 |
+| outputType   | String | "string"     | 输出类型 |
+
+### weekFormat（周格式化）
+对周数据进行格式化处理。
+
+**数据转换：**
+```javascript
+"2024-03-20" -> ["2024-03-18", "2024-03-24"] // outputType: array
+"2024-03-20" -> "2024-03-18 ~ 2024-03-24" // outputType: string
+```
+
+| 配置项      | 类型    | 默认值       | 说明                      |
+| ----------- | ------- | ------------ | ------------------------- |
+| valueFormat | String  | "YYYY-MM-DD" | 日期格式                  |
+| weekStart   | Number  | 0            | 周起始日（0-6）           |
+| includeTime | Boolean | false        | 是否包含时间              |
+| separator   | String  | " ~ "        | 日期分隔符                |
+| outputType  | String  | "array"      | 输出类型：array 或 string |
+
+### inputFormat（输入格式化）
+对输入内容进行格式化处理。
+
+**数据转换：**
+```javascript
+"abc123中文" -> "123" // type: number
+"abc123中文" -> "abc" // type: letter
+"abc123中文" -> "中文" // type: chinese
+"abc@123.com!" -> "abc@123.com" // type: email
+```
+
+| 配置项    | 类型   | 默认值    | 说明                                                                      |
+| --------- | ------ | --------- | ------------------------------------------------------------------------- |
+| inputType      | String | "number"  | 格式化类型：number/phone/decimal/letter/chinese/letterNumber/email/custom |
+| pattern   | String | -         | 自定义正则                                          |
+| maxLength | Number | undefined | 最大长度                                                                  |
+| decimal   | Number | undefined | 小数位数（type为decimal时使用）                                           |
+
+### percentFormat（百分比格式化）
+对百分比数据进行格式化处理。
+
+**数据转换：**
+```javascript
+0.1234 -> "12.34%"
+0.1 -> "10.00%" // precision: 2
+```
+
+| 配置项     | 类型    | 默认值 | 说明           |
+| ---------- | ------- | ------ | -------------- |
+| precision  | Number  | 2      | 小数位数       |
+| multiplier | Number  | 100    | 乘数因子       |
+| addSymbol  | Boolean | true   | 是否添加百分号 |
+
+### fileSizeFormat（文件大小格式化）
+对文件大小进行格式化处理。
+
+**数据转换：**
+```javascript
+1024 -> "1 KB"
+1234567 -> "1.18 MB"
+1234567890 -> "1.15 GB"
+```
+
+| 配置项    | 类型   | 默认值                        | 说明     |
+| --------- | ------ | ----------------------------- | -------- |
+| units     | Array  | ["B", "KB", "MB", "GB", "TB"] | 单位数组 |
+| precision | Number | 2                             | 小数位数 |

package/docs/guide/mockData/base.md

@@ -0,0 +1,26 @@
+# 基本使用
+
+## 概述
+通过右键功能菜单，点击生成测试数据，快速生成符合组件特性的模拟数据，用于测试和开发。无论使用哪种渲染方式，都会根据不同的表单组件类型(输入框、选择器、日期选择等)、校验规则自动生成相应格式的数据
+
+## 使用示例
+
+<ClientOnly>
+<common-code-format>
+  <mockData-example slot="source"></mockData-example>
+  
+<<< @/docs/.vuepress/components/mockData/example.vue
+</common-code-format>
+</ClientOnly>
+
+## 自定义mock数据
+
+通过`mock`属性，可以自定义mock数据，`mock`属性可以是一个函数，也可以是一个值。
+
+<ClientOnly>
+<common-code-format>
+  <mockData-custom slot="source"></mockData-custom>
+  
+<<< @/docs/.vuepress/components/mockData/custom.vue
+</common-code-format>
+</ClientOnly>

package/docs/guide/positionSlot/base.md

@@ -0,0 +1,41 @@
+# 基本使用
+
+## 概述
+
+方位插槽是一个灵活的布局组件，用于在内容周围添加上、下、左、右四个位置的插槽内容。
+
+## 单独用法
+
+
+<ClientOnly>
+<common-code-format>
+  <positionSlot-base slot="source"></positionSlot-base>
+  
+<<< @/docs/.vuepress/components/positionSlot/base.vue
+</common-code-format>
+</ClientOnly>
+
+## 搭配组件内置插槽使用
+
+组件内部各种插槽均已封装方位组件。
+
+<ClientOnly>
+<common-code-format>
+  <positionSlot-table slot="source"></positionSlot-table>
+  
+<<< @/docs/.vuepress/components/positionSlot/table.vue
+</common-code-format>
+</ClientOnly>
+
+## 在渲染单元格中使用
+
+在渲染单元格中使用时，需要使用 `position` 属性，并传入 `true` 启用方位插槽。</br>
+方位插槽可以获取单元格 `scope` 数据。
+
+<ClientOnly>
+<common-code-format>
+  <positionSlot-form slot="source"></positionSlot-form>
+  
+<<< @/docs/.vuepress/components/positionSlot/form.vue
+</common-code-format>
+</ClientOnly>

package/docs/guide/question/base.md

@@ -0,0 +1,44 @@
+# 问题合集
+
+## 1. render函数渲染中ref实例绑定问题
+
+### 问题
+
+在使用render函数渲染时，如果参数接收了h函数，this.$refs.input组件实例绑定会丢失。
+
+```js
+// 此时this.$refs.input为undefined
+
+render: (h, scope) => {
+  return <el-input ref="input" v-model={scope.row.gender} ></el-input>;
+},
+```
+
+### 解决方案
+
+1. 忽略h函数，使用render函数渲染
+
+```js
+render: (...args) => {
+  const { row } = args[1];
+  return <el-input ref="input" v-model={row.gender}></el-input>;
+},
+```
+
+2. 使用ref函数获取组件实例
+
+```js
+render: (h, scope) => {
+  return (
+    <el-input
+      ref={(el) => {
+        console.log(el, "el");
+      }}
+      v-model={scope.row.gender}
+    ></el-input>
+  );
+},
+```
+
+
+

package/docs/guide/start/base.md

@@ -0,0 +1,30 @@
+# 快速开始
+
+## 获取组件库
+
+```text 
+super-crud/
+  ├─ lib/
+  │   ├─ super-crud.min.js
+  │   └─ index.css
+  ├─ package.json
+  └─ README.md
+```
+
+1. 使用 `npm run build` 打包最新组件文件 </br>
+2. 从 lib 目录获取打包好的文件：</br>
+super-crud.min.js</br>
+index.css</br>
+3. 将文件放入你项目的 public/superCrud 或其他静态资源目录。
+
+## 引入组件库
+
+```js
+// main.js
+import superCrud from "/public/superCrud/super-crud.min.js";
+import "/public/superCrud/index.css";
+
+Vue.use(superCrud, {
+  // 全局配置
+});
+```

package/docs/guide/tabs/base.md

@@ -0,0 +1,63 @@
+# 基本使用
+
+## 概述
+
+基于 el-tabs 的增强型标签组件，提供了更丰富的功能，包括标签页未激活时不渲染、缓存、刷新、过渡动画等特性。
+
+## 示例
+
+<ClientOnly>
+<common-code-format>
+  <tabs-base slot="source"></tabs-base>
+  
+<<< @/docs/.vuepress/components/tabs/base.vue
+</common-code-format>
+</ClientOnly>
+
+## API
+
+| 属性名        | 类型           | 默认值 | 说明                         |
+| ------------- | -------------- | ------ | ---------------------------- |
+| value/v-model | String/Number  | -      | 当前激活的标签页名称         |
+| tab-list      | Array          | []     | 标签页配置列表               |
+| cache         | Boolean        | true   | 是否缓存标签页内容           |
+| all           | Boolean/Object | false  | 是否显示"全部"标签页         |
+| border        | Boolean        | false  | 是否显示边框样式             |
+| cacheActive   | Boolean        | true   | 是否在路由中缓存激活的标签页 |
+| refresh       | Boolean        | false  | 是否显示刷新按钮             |
+
+## tabList 配置项
+
+```js
+[
+  {
+    label: '标签名称',      // 显示的标签文本
+    name: 'tabName',       // 标签的唯一标识
+    icon: 'el-icon-date',  // 可选，标签页图标
+    cache: true,           // 可选，是否缓存该标签页内容
+    render: () => { },     // 可选，render函数自定义标签页内容
+  }
+]
+```
+
+## 事件
+
+| 事件名    | 说明               | 回调参数       |
+| --------- | ------------------ | -------------- |
+| tab-click | 标签页被点击时触发 | 被点击的标签页 |
+| refresh   | 刷新标签页时触发   | （tab，index） |
+
+## 特性说明
+
+1. 标签页未激活时不渲染 + 标签页缓存
+
+   v-if与v-show的结合使用，未激活时不会渲染，激活时会渲染
+
+   默认开启缓存功能，切换标签页不会销毁内容
+
+2. 路由缓存
+
+   启用cacheActive后，激活的标签页会被记录在路由query中
+
+   刷新页面后会自动恢复到之前激活的标签页
+   

package/examples/App.vue

@@ -0,0 +1,52 @@
+<template>
+  <div id="app">
+    <router-view />
+  </div>
+  <!-- <el-container style="height: 100vh;">
+    <el-aside width="200px" style="background-color: rgb(238, 241, 246);">
+      <el-menu>
+        <el-submenu index="1">
+          <el-menu-item-group title="分组1">
+            <template slot="title">分组一</template>
+            <el-menu-item index="1-1">选项1</el-menu-item>
+            <el-menu-item index="1-2">选项2</el-menu-item>
+          </el-menu-item-group>
+          <el-menu-item-group title="分组2">
+            <el-menu-item index="1-3">选项3</el-menu-item>
+          </el-menu-item-group>
+          <el-submenu index="1-4">
+            <template slot="title">选项4</template>
+            <el-menu-item index="1-4-1">选项4-1</el-menu-item>
+          </el-submenu>
+        </el-submenu>
+        <el-submenu index="2">
+          <el-menu-item-group title="分组1">
+            <template slot="title">分组一</template>
+            <el-menu-item index="2-1">选项1</el-menu-item>
+            <el-menu-item index="2-2">选项2</el-menu-item>
+          </el-menu-item-group>
+          <el-menu-item-group title="分组2">
+            <el-menu-item index="2-3">选项3</el-menu-item>
+          </el-menu-item-group>
+          <el-submenu index="2-4">
+            <template slot="title">选项4</template>
+            <el-menu-item index="2-4-1">选项4-1</el-menu-item>
+          </el-submenu>
+        </el-submenu>
+      </el-menu>
+    </el-aside>
+
+    <el-container>
+      <el-main>
+        <router-view></router-view>
+      </el-main>
+    </el-container>
+  </el-container> -->
+</template>
+
+<style lang="scss">
+body {
+  margin: 0;
+  padding: 0;
+}
+</style>

package/examples/Layout/components/AppMain.vue

@@ -0,0 +1,40 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <router-view :key="key" />
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      return this.$route.path
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  min-height: calc(100vh - 50px);
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+}
+.fixed-header+.app-main {
+  padding-top: 50px;
+}
+</style>
+
+<style lang="scss">
+// fix css style bug in open el-dialog
+.el-popup-parent--hidden {
+  .fixed-header {
+    padding-right: 15px;
+  }
+}
+</style>

package/examples/Layout/components/Item.vue

@@ -0,0 +1,29 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { title } = context.props
+    const vnodes = []
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
+
+<style scoped>
+.sub-el-icon {
+  color: currentColor;
+  width: 1em;
+  height: 1em;
+}
+</style>

package/examples/Layout/components/Link.vue

@@ -0,0 +1,44 @@
+<template>
+  <component :is="type" v-bind="linkProps(to)">
+    <slot />
+  </component>
+</template>
+
+<script>
+function isExternal(path) {
+  return /^(https?:|mailto:|tel:)/.test(path);
+}
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    isExternal() {
+      return isExternal(this.to);
+    },
+    type() {
+      if (this.isExternal) {
+        return "a";
+      }
+      return "router-link";
+    },
+  },
+  methods: {
+    linkProps(to) {
+      if (this.isExternal) {
+        return {
+          href: to,
+          target: "_blank",
+          rel: "noopener",
+        };
+      }
+      return {
+        to: to,
+      };
+    },
+  },
+};
+</script>

package/examples/Layout/components/SidebarItem.vue

@@ -0,0 +1,93 @@
+<template>
+  <div v-if="!item.hidden">
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </app-link>
+    </template>
+
+    <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
+      <template slot="title">
+        <item v-if="item.meta" :title="item.meta.title" />
+      </template>
+      <sidebar-item
+        v-for="child in item.children"
+        :key="child.path"
+        :is-nest="true"
+        :item="child"
+        :base-path="resolvePath(child.path)"
+        class="nest-menu"
+      />
+    </el-submenu>
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import Item from './Item'
+import AppLink from './Link'
+function isExternal(path) {
+  return /^(https?:|mailto:|tel:)/.test(path);
+}
+export default {
+  name: 'SidebarItem',
+  components: { Item, AppLink },
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    // To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
+    this.onlyOneChild = null
+    return {}
+  },
+  methods: {
+    hasOneShowingChild(children = [], parent) {
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      if (isExternal(routePath)) {
+        return routePath
+      }
+      if (isExternal(this.basePath)) {
+        return this.basePath
+      }
+      return path.resolve(this.basePath, routePath)
+    }
+  }
+}
+</script>

package/examples/Layout/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="app-wrapper">
+    <div class="sidebar-container">
+      <el-scrollbar wrap-class="scrollbar-wrapper">
+        <el-menu
+          :default-active="activeMenu"
+          :background-color="variables.menuBg"
+          :text-color="variables.menuText"
+          :unique-opened="false"
+          :active-text-color="variables.menuActiveText"
+          :collapse-transition="false"
+          mode="vertical"
+        >
+          <sidebar-item
+            v-for="route in routes"
+            :key="route.path"
+            :item="route"
+            :base-path="route.path"
+          />
+        </el-menu>
+      </el-scrollbar>
+    </div>
+    <div class="main-container">
+      <app-main />
+    </div>
+  </div>
+</template>
+
+<script>
+import sidebarItem from "./components/SidebarItem.vue";
+import variables from "#/styles/variables.scss";
+import AppMain from "./components/AppMain.vue";
+
+export default {
+  name: "Layout",
+  components: {
+    sidebarItem,
+    // Navbar,
+    AppMain,
+  },
+  computed: {
+    variables() {
+      return variables;
+    },
+    routes() {
+      return this.$router.options.routes;
+    },
+    activeMenu() {
+      const route = this.$route;
+      const { meta, path } = route;
+      // if set path, the sidebar will highlight the path you set
+      if (meta.activeMenu) {
+        return meta.activeMenu;
+      }
+      return path;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "#/styles/variables.scss";
+
+.app-wrapper {
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+</style>