br-dionysus 0.5.1 → 0.6.1

package/README.md

@@ -2,32 +2,35 @@
 
 ## 组件列表
 
-+ MInline([筛选](#MInlinetitle))
++ MInline([筛选](#筛选))
 
-+ MInputNumber([数值输入框组件](#MInputNumbertitle))
++ MInputNumber([数值输入框组件](#数值输入框组件))
 
-+ MSelectTable([下拉表格选择器](#MSelectTabletitle))
++ MSelectTable([下拉表格选择器](#下拉表格选择器))
 
-+ MTable([表格选择器](#MTabletitle))
++ MTable([表格组件](#表格组件))
 
-+ SkinConfig([皮肤设置](#SkinConfigtitle))
++ MTableColumn([表格列组件](#表格列组件))
 
-+ TabPage([标签页组件](#TabPagetitle))
---- 
++ MTableColumnSet([表格头设置组件](#表格头设置组件))
 
- ### MInline(筛选)
----
++ SkinConfig([皮肤设置](#皮肤设置))
 
++ TabPage([标签页组件](#标签页组件))
+
++ useRemainingSpace([计算获取剩余空间-hook](#计算获取剩余空间-hook))
+
++ useTableConfig([表格组合-hook](#表格组合-hook))
 
 
-# 筛选
+筛选
 =================
 
 ### 1) 基础用法
 
 
 
-```js
+```html
 
 <template>
   <div class="g-demo-m-inline-box">
@@ -185,20 +188,15 @@ const formInline = reactive({
 | switch | 当切换展开与折叠模式时触发,返回当前展开状态 | unfold(boolean) |
 
 
---- 
-
- ### MInputNumber(数值输入框组件)
----
-
 
 
-# 数值输入框组件
+数值输入框组件
 =================
 
 ### 1) 基础用法
 
 
-```js
+```html
 
 <template>
   <div class="g-demo-m-input-number-box">
@@ -246,21 +244,16 @@ const test = ref<number>(0)
 | blur   | 当 input 失去焦点时触发 |     (event: Event)     |
 
 
---- 
-
- ### MSelectTable(下拉表格选择器)
----
-
 
 
-# 下拉表格选择器
+下拉表格选择器
 =================
 
 ### 1) 基础用法
 
 
 
-```js
+```html
 
 <template>
   <div class="g-m-select-table-box">
@@ -369,14 +362,9 @@ const remoteMethod = async (query: string = '') => {
 | selected       | 单选模式点击行时触发  |   selectedRow（所选行）    |
 
 
---- 
-
- ### MTable(表格选择器)
----
-
 
 
-# 表格选择器
+表格组件
 =================
 
 ### 1) 基础用法
@@ -384,7 +372,7 @@ const remoteMethod = async (query: string = '') => {
 
 
 
-```js
+```html
 
 <template>
   <div>
@@ -449,47 +437,224 @@ const pasteData = (obj: any, data: any) => {
 ### 2) Attributes
 | 参数              |            说明            |    类型    |         可选值          |  默认值 |
 | ----------- | ------- | ---------------------------- |-----|--------|
-|data               |表格的数据                  | Array      |           -            |    []   |
-|sole               |行的唯一值                  |String      |    number              |    key  |
-|filtersValue       |表格内容筛选                |Function    |   -                    |   {}    |
+|data               |表格的数据                  | Array      |           -            |    [ ]   |
+|sole               |行的唯一值                  |String , number     |    -              |    key  |
+|filtersValue       |表格内容筛选                |Function    |   -                    |  () => void   |
+|其余参数            |参考el官网的table           |any         |        -               |https://element-plus.org/zh-CN/component/table.html|
 ## 要求
 ```
 sole 必须传递在表格数据内为唯一的值  如id key 等不会发生重复的关键字
 ```
 
 ### 3) Events
-| 方法名          |     说明      |          参数           |
+| 方法名          |     说明      |          回调参数           |
 | ----------- | ------- | ---------------------------- |
-| pasteData      | 表格粘贴方法   |  {editRow,editColumn,arr,rowIndex},tableData|
+| pasteData      | 表格粘贴方法   |  共有2个参数,依次为粘贴动作的数据PasteAction ,表格原始数据tableData |
+|其余方法          |参考el官网的table           |https://element-plus.org/zh-CN/component/table.html|
 
-##### 方法参数描述
-```ts
-const editRow : Object // 返回粘贴的对应行的原始数据
+### 4) PasteAction
+|参数  |  说明  | 类型  | 
+|-----|-------|-------|
+|editRow|返回粘贴的对应行的原始数据|Object|
+|editColumn|返回粘贴时鼠标所在列的 表格prop值|String|
+|arr|返回粘贴时候处理之后的 数组信息|Array|
+|rowIndex|根据sole的值 去data内查找   当前操作的 粘贴行在data内的序号|number|
 
-const editColumn: String // 返回粘贴时鼠标所在列的 表格prop值
+
+
 
-const arr: Array  // 返回粘贴时候处理之后的 数组信息
 
-const rowIndex: number // 根据sole的值 去data内查找   当前操作的 粘贴行在data内的序号
+表格列组件
+=================
 
-```
+### 1) 基础用法
+
+
+
+
+```html
+
+<template>
+  <div>
+    <el-table :data="tableData" style="width: 100%">
+      <MTableColumn
+        v-for="item in tableTitle"
+        :key="item.prop"
+        :prop="item.prop"
+        :label="item.label"
+        :minWidth="item.minWidth"
+        v-model:filtersValue="filtersValue"
+        showOverflowTooltip
+      />
+    </el-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+interface FilterValue {
+  [key: string]: Array<string | number>
+}
+const filtersValue = ref<FilterValue>({})
+interface User {
+  date: string;
+  name: string;
+  address: string;
+  tag: string;
+}
+const tableData = ref(<User[]>[
+  {
+    date: "2016-05-03",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+    tag: "Home",
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+    tag: "Office",
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+    tag: "Home",
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+    tag: "Office",
+  },
+])
+const tableTitle = [ 
+  {
+    label: '日期',
+    prop: 'date',
+    minWidth: '172px'
+  },
+  {
+    label: '名称',
+    prop: 'name',
+    minWidth: '134px'
+  },
+  {
+    label: '地址',
+    prop: 'address',
+    minWidth: '134px'
+  },
+  {
+    label: '标签',
+    prop: 'tag',
+    minWidth: '134px'
+  }
+]
+</script>
+
+<style lang="scss"></style>
+
+
+```
+
+### 2) Attributes
+| 参数              |            说明            |    类型           |         可选值          |  默认值 |
+| ------------------| --------------------------|-------------------|------------------------|---------|
+|filtersValue       |        列筛选过滤条件      |       object      |          -             |   { }    |
+|filters            |         表格筛选数据       | string[],number[] |         -              |   any[]  |
+|filterMethod       |           筛选方法         |       Function    |          -             |  () => void |
+|其余参数            |       参考el官网的table    |        any         |        -              |https://element-plus.org/zh-CN/component/table.html|
+
+
+
+
+
+
+
+表格头设置组件
+=================
+
+### 1) 基础用法
+
+
+
+
+```html
+
+<template>
+  <div>
+    <m-table-column-set v-model="tableConfig" foldMode />
+    <div>
+      {{ tableConfig }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+interface User {
+  date: string;
+  name: string;
+  address: string;
+  tag: string;
+}
+
+
+const tableConfig = ref({
+  'date': {
+    minWidth: 100,
+    show: true,
+    sort: 0,
+    label: 'date'
+  },
+  'name': {
+    minWidth: 100,
+    show: true,
+    sort: 1,
+    label: 'name'
+  },
+  'address': {
+    minWidth: 100,
+    show: true,
+    sort: 2,
+    label: 'address'
+  },
+})
+
+</script>
+
+<style lang="scss"></style>
 
 
---- 
+```
 
- ### SkinConfig(皮肤设置)
----
+### 2) Attributes
+
+| 参数                  | 说明                                                 | 类型                                     | 可选值 | 默认值 |
+| --------------------- | ---------------------------------------------------- | ---------------------------------------- | ------ | ------ |
+| model-value / v-model | 绑定值                                               | {  [propName: string]: TableConfigItem } | -      | {}     |
+| foldMode              | 是否开启折叠 开启的话需要父级元素为flex布局/grid布局 | boolean                                  | -      | false  |
+
+
+### 3) TableConfigItem 
+| 参数        | 说明                                              | 类型                       |
+| ----------- | ------------------------------------------------- | -------------------------- |
+| minWidth    | 最小列宽                                          | number,string              |
+| show        | 是否显示                                          | boolean                    |
+| sort        | 排序                                              | number                     |
+| label       | 列名                                              | string                     |
+| headerAlign | 表头对齐方式， 若不设置该项，则使用表格的对齐方式 | 'left' ,'center' , 'right' |
 
 
 
-# 皮肤设置
+皮肤设置
 =================
 
 ### 1) 基础用法
 
 
 
-```js
+```html
 
 <template>
   <div class="g-demo-skin-config-box">
@@ -1174,14 +1339,86 @@ const list = ref<{ name: string, className: string }[]>([
 | change | 绑定值被改变时触发 | SkinConfig |
 
 
---- 
+
+
+标签页组件
+=================
+
 
- ### TabPage(标签页组件)
----
 
+# 霸软组件Hook说明
+
+## Hook列表
+
++ useRemainingSpace([计算获取剩余空间-hook](#计算获取剩余空间-hook))
+
++ useTableConfig([表格组合-hook](#表格组合-hook))
+
+
+计算获取剩余空间 hook
+=================
+
+### 1) 所需参数
+
+| 名称           | 描述   | 类型     | 可选值 | 默认值 |
+|--------------|------|--------|:---:|:---:|
+| boxClassName | 父级空间 | string |  -  |  -  |
+| className    | 排除空间 | string |  -  |  -  |
+| redundancy   | 冗余值  | number |  -  |  0  |
+
+### 2) 返回值
+
+| 名称           | 描述                             | 类型          |
+|--------------|--------------------------------|-------------|
+| height       | 计算之后的高度                        | ref<number> |
+| tableCovered | 重新进行计算高度 (如弹窗表 抽屉表 等默认无DOM时使用) | function    |
+ 
+
+
+
+
+ 
+
+
+
+
+
+
+表格组合 hook
+=================
+
+### 1) 所需参数
+
+| 名称         | 描述     | 类型           | 可选值 | 默认值 |
+|------------|--------|--------------|:---:|:---:|
+| name       | 表格唯一标识 | string       |  -  |  -  |
+| tableTitle | 列配置    | tableTitle[] |  -  |  -  |
+| tableData  | 表格数据   | ref<any[]>   |  -  |  -  |
+
+### 2) 返回值
+
+| 名称               | 描述      | 类型                                      |
+|------------------|---------|-----------------------------------------|
+| tableTitle       | 处理之后的表头 | TableTitle[]                            |
+| tableConfig      | 表头的配置项  | {  [propName: string]: TableConfigItem} |
+| headerDragend    | 表格拖拽事件  | function                                |
+| initColumnFilter | 列的筛选    | function                                |
+| filtersValue     | 过滤条件    | { [key: string]: Array<string,number>}  |
+
+### 3) TableTitle
+
+| 名称            | 描述                                                                   | 类型                                          |
+|---------------|----------------------------------------------------------------------|---------------------------------------------|
+| label         | 显示的标题                                                                | string                                      |
+| prop          | 字段对应列的字段名字也可以使用 property属性                                           | string                                      |
+| minWidth?     | 对应列的最小宽度与 width 的区别是 width 是固定的，min-width 会按比例分配剩余宽度                 | number ,string,                             |
+| className?    | 列的className                                                          | string                                      |
+| sortable      | 列是否能够排序 则代表用户希望远程排序，需要监听 Table 的 sort-change 事件 */                   | Boolean                                     |
+| filters?      | 据过滤的选项， 数组格式，数组中的元素需要有 text 和 value 属性。 数组中的每个元素都需要有 text 和 value 属性 | {text:string,number,value:string,number} [] |
+| filterMethod? | 数据过滤使用的方法， 如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示                    | Function                                    |
+| headerAlign?  | 表头对齐方式， 若不设置该项，则使用表格的对齐方式                                            | 'left' , 'center' , 'right'                 |
 
 
-# 标签页组件
 
 
 

package/createMd.js

@@ -1,47 +1,75 @@
 const fs = require('fs') // 文件服务
-
 // 读取文件里面的MD文档
 const interiorFolderPath = './packages' // 默认路径
-const unwantedFolders = ['typings', 'Foo', 'Hook', 'Button']; // 不需要的文件夹名称
-fs.readdir(interiorFolderPath,'utf-8',(err,items)=>{
-  if(err) return console.log(err);
-  const folderNames  = items.filter(item =>  fs.statSync(`${interiorFolderPath}/${item}`).isDirectory() && !unwantedFolders.includes(item))
-  const mdGather= folderNames.map(item => ({  // 拿到处理后的每一个文件数据
-    name:item,
-    mdText:disFile(getMdContent(`${interiorFolderPath}/${item}/docs/README.md`)),
-    demoText:getMdContent(`${interiorFolderPath}/${item}/docs/demo.vue`),
-  }))
-  let collectMD = `# 霸软业务组件库\r\n\r\n## 组件列表\r\n`
-  mdGather.forEach(item => {
-    // 取tittle
-    const title = extractTitle(item.mdText)
-    collectMD+= `\r\n+ ${item.name}([${title}](#${item.name}title))\r\n`
-  })
-  mdGather.forEach(item => {
-    const title = extractTitle(item.mdText)
-    collectMD+= `--- \r\n\r\n ### ${item.name}(${title})\r\n---\r\n\r\n`
-    collectMD+=insertText(item.mdText,item.demoText)
-    collectMD+='\r\n\r\n'
-  })
-  fs.writeFileSync('./README.md',collectMD)
-})
+const hookFolderPath = './packages/Hook'
+const unwantedFolders = ['typings', 'Foo', 'Hook', 'Button'] // 不需要的文件夹名称
+let collectMD = `# 霸软业务组件库\r\n\r\n## 组件列表\r\n`
 
-const getMdContent = (path) =>{
-  return fs.readFileSync(path,'utf-8')
+const getMdContent = (path) => {
+  return fs.readFileSync(path, 'utf-8')
 }
 const disFile = (text) => {
   return text.replace(/<script setup>[\s\S]*?<\/script>/, '').replace(/<Preview[^>]*>[\s\S]*?<\/Preview>/, '')
 }
-const insertText = (text,demo) => {
-  const regex = /### 1\) 基础用法([\s\S]*?)### 2\)/g;
+const insertText = (text, demo) => {
+  const regex = /### 1\) 基础用法([\s\S]*?)### 2\)/g
   const newText = text.replace(regex, (match, p1) => {
-    return `### 1) 基础用法${p1}\`\`\`js\r\n\r\n${demo}\r\n\r\n\`\`\`\r\n\r\n### 2)`;
-  });
+    return `### 1) 基础用法${p1}\`\`\`html\r\n\r\n${demo}\r\n\r\n\`\`\`\r\n\r\n### 2)`
+  })
   return newText
 }
 
-const extractTitle = (text) =>{
-  const regex = /# (\S+)/;
-  const match = text.match(regex);
-  return match[1]
+const extractTitle = (text) => {
+  const _text = text.substring(0, text.indexOf('=')).trim()
+  const index = _text.lastIndexOf('\n') !== -1 ? _text.lastIndexOf('\n') : 0
+  const title = _text.substring(index)
+  return title.trim()
+}
+
+const main = () => {
+  const elFile = fs.readdirSync(interiorFolderPath, 'utf-8')
+  const folderNames = elFile.filter(item => fs.statSync(`${interiorFolderPath}/${item}`).isDirectory() && !unwantedFolders.includes(item))
+  const mdGather = folderNames.map(item => ({ // 拿到处理后的每一个文件数据
+    name: item,
+    mdText: disFile(getMdContent(`${interiorFolderPath}/${item}/docs/README.md`)),
+    demoText: getMdContent(`${interiorFolderPath}/${item}/docs/demo.vue`)
+  }))
+  // 写入组件MD
+
+  // 取title
+  mdGather.forEach(item => {
+    const title = extractTitle(item.mdText).replace(/ /g, '-')
+    collectMD += `\r\n+ ${item.name}([${title}](#${title}))\r\n`
+  })
+  const hookFile = fs.readdirSync(hookFolderPath, 'utf-8')
+  const hookFolderNames = hookFile.filter(item => fs.statSync(`${hookFolderPath}`).isDirectory() && item !== 'index.ts')
+  const hookMdGather = hookFolderNames.map(item => ({
+    name: item,
+    mdText: disFile(getMdContent(`${hookFolderPath}/${item}/README.md`))
+  }))
+  hookMdGather.forEach(item => {
+    const title = extractTitle(item.mdText).replace(/ /g, '-')
+    collectMD += `\r\n+ ${item.name}([${title}](#${title}))\r\n`
+  })
+
+  // 写入文档内容
+  mdGather.forEach(item => {
+    collectMD += insertText(item.mdText, item.demoText)
+    collectMD += '\r\n\r\n'
+  })
+  fs.writeFileSync('./README.md', collectMD)
+
+  // 写入hook MD
+  collectMD += '# 霸软组件Hook说明\r\n\r\n## Hook列表\r\n'
+  hookMdGather.forEach(item => {
+    const title = extractTitle(item.mdText).replace(/ /g, '-')
+    collectMD += `\r\n+ ${item.name}([${title}](#${title}))\r\n`
+  })
+  hookMdGather.forEach(item => {
+    collectMD += '\r\n\r\n'
+    collectMD += item.mdText
+    collectMD += '\r\n\r\n'
+  })
+  fs.writeFileSync('./README.md', collectMD)
 }
+main()