vue-super-crud 1.7.1 → 1.7.4

package/docs/guide/formatData/config.md

@@ -1,142 +0,0 @@
-# 格式化配置文档
-
-## 通用配置项
-
-| 配置项      | 类型           | 默认值 | 说明                                                                            |
-| ----------- | -------------- | ------ | ------------------------------------------------------------------------------- |
-| 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

@@ -1,26 +0,0 @@
-# 基本使用
-
-## 概述
-通过右键功能菜单，点击生成测试数据，快速生成符合组件特性的模拟数据，用于测试和开发。无论使用哪种渲染方式，都会根据不同的表单组件类型(输入框、选择器、日期选择等)、校验规则自动生成相应格式的数据
-
-## 使用示例
-
-<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

@@ -1,41 +0,0 @@
-# 基本使用
-
-## 概述
-
-方位插槽是一个灵活的布局组件，用于在内容周围添加上、下、左、右四个位置的插槽内容。
-
-## 单独用法
-
-
-<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

@@ -1,44 +0,0 @@
-# 问题合集
-
-## 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

@@ -1,30 +0,0 @@
-# 快速开始
-
-## 获取组件库
-
-```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

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

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

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

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

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

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

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