npm - br-dionysus - Versions diffs - 1.6.6 → 1.6.7 - Mend

br-dionysus 1.6.6 → 1.6.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (115) hide show

package/README.md +90 -52
package/attributes.json +1 -1
package/dist/br-dionysus.es.js +4659 -4595
package/dist/br-dionysus.umd.js +8 -8
package/dist/index.css +1 -1
package/dist/packages/MTable/src/MTable.vue.d.ts +21 -0
package/dist/packages/MTable/src/token.d.ts +10 -1
package/docs/assets/README-BIIm2ID5.css +1 -0
package/docs/assets/README-BVC502ud.js +1 -0
package/docs/assets/README-BaVHXTcr.js +1 -0
package/docs/assets/README-BkoXPzeT.js +1 -0
package/docs/assets/README-BpY9wwJ5.js +1 -0
package/docs/assets/README-BxVIiLkB.css +1 -0
package/docs/assets/README-C8q4oePg.css +1 -0
package/docs/assets/README-C9E9QEak.js +1 -0
package/docs/assets/README-CJnIKztR.css +1 -0
package/docs/assets/README-CPi9K5cm.css +1 -0
package/docs/assets/README-CVikrcuu.js +1 -0
package/docs/assets/README-CwxKEz5n.js +1 -0
package/docs/assets/README-D-sCcuuV.js +1 -0
package/docs/assets/README-D1NyMPDh.css +1 -0
package/docs/assets/README-D8dRnWkj.css +1 -0
package/docs/assets/README-DC5fWcO7.css +1 -0
package/docs/assets/README-DFookNbq.js +1 -0
package/docs/assets/README-DJM0QNOa.css +1 -0
package/docs/assets/README-DJsWJjpr.js +2 -0
package/docs/assets/README-DZH0ZBFE.js +1 -0
package/docs/assets/README-DuLXE9ma.css +1 -0
package/docs/assets/README-DxdjMTiZ.js +1 -0
package/docs/assets/README-DxzXrur_.js +1 -0
package/docs/assets/README-ZSEyYWl3.css +1 -0
package/docs/assets/empty-BHv0FmNK.png +0 -0
package/docs/assets/index-B3d27dSP.js +66 -0
package/docs/assets/index-BeGJML3j.css +1 -0
package/docs/index.html +14 -0
package/docs/packages/Hook/usePackageConfig/README.md +35 -0
package/docs/packages/Hook/usePackageConfig/demo.vue +28 -0
package/docs/packages/Hook/usePackageConfig/usePackageConfig.ts +39 -0
package/docs/packages/Hook/useRemainingSpace/README.md +26 -0
package/docs/packages/Hook/useRemainingSpace/useRemainingSpace.ts +148 -0
package/docs/packages/Hook/useTableConfig/README.md +50 -0
package/docs/packages/Hook/useTableConfig/demo.vue +134 -0
package/docs/packages/Hook/useTableConfig/useTableConfig.ts +173 -0
package/docs/packages/Hook/useZIndex/README.md +6 -0
package/docs/packages/Hook/useZIndex/useGlobalZIndex.ts +34 -0
package/docs/packages/MDialog/docs/README.md +26 -0
package/docs/packages/MDialog/docs/demo.vue +72 -0
package/docs/packages/MDialog/index.ts +10 -0
package/docs/packages/MDialog/src/MDialog.vue +150 -0
package/docs/packages/MInline/docs/README.md +26 -0
package/docs/packages/MInline/docs/demo.vue +138 -0
package/docs/packages/MInline/index.ts +10 -0
package/docs/packages/MInline/src/MInline.vue +284 -0
package/docs/packages/MInputNumber/docs/README.md +35 -0
package/docs/packages/MInputNumber/docs/demo.vue +17 -0
package/docs/packages/MInputNumber/index.ts +10 -0
package/docs/packages/MInputNumber/src/MInputNumber.vue +268 -0
package/docs/packages/MSelect/docs/README.md +20 -0
package/docs/packages/MSelect/docs/demo.vue +36 -0
package/docs/packages/MSelect/index.ts +17 -0
package/docs/packages/MSelect/src/MOption.vue +43 -0
package/docs/packages/MSelect/src/MSelect.vue +57 -0
package/docs/packages/MSelect/src/token.ts +8 -0
package/docs/packages/MSelectTable/docs/README.md +88 -0
package/docs/packages/MSelectTable/docs/demo.vue +196 -0
package/docs/packages/MSelectTable/index.ts +10 -0
package/docs/packages/MSelectTable/src/MSelectTable.vue +493 -0
package/docs/packages/MSelectTableV1/docs/README.md +49 -0
package/docs/packages/MSelectTableV1/docs/demo.vue +77 -0
package/docs/packages/MSelectTableV1/index.ts +10 -0
package/docs/packages/MSelectTableV1/src/MSelectTableV1.vue +460 -0
package/docs/packages/MSelectV2/docs/README.md +31 -0
package/docs/packages/MSelectV2/docs/demo.vue +36 -0
package/docs/packages/MSelectV2/index.ts +10 -0
package/docs/packages/MSelectV2/src/MSelectV2.vue +116 -0
package/docs/packages/MTable/docs/README.md +40 -0
package/docs/packages/MTable/docs/demo.vue +93 -0
package/docs/packages/MTable/index.ts +10 -0
package/docs/packages/MTable/src/MTable.vue +228 -0
package/docs/packages/MTable/src/token.ts +9 -0
package/docs/packages/MTableColumn/docs/README.md +22 -0
package/docs/packages/MTableColumn/docs/demo.vue +110 -0
package/docs/packages/MTableColumn/index.ts +10 -0
package/docs/packages/MTableColumn/src/MTableColumn.vue +345 -0
package/docs/packages/MTableColumnSet/docs/README.md +31 -0
package/docs/packages/MTableColumnSet/docs/demo.vue +36 -0
package/docs/packages/MTableColumnSet/index.ts +10 -0
package/docs/packages/MTableColumnSet/src/MTableColumnSet.vue +310 -0
package/docs/packages/README.md +10 -0
package/docs/packages/SkinConfig/docs/README.md +42 -0
package/docs/packages/SkinConfig/docs/demo.vue +680 -0
package/docs/packages/SkinConfig/index.ts +10 -0
package/docs/packages/SkinConfig/src/SkinConfig.vue +478 -0
package/docs/packages/SkinConfig/src/useSkin.ts +230 -0
package/docs/packages/TabPage/docs/README.md +10 -0
package/docs/packages/TabPage/docs/demo.vue +96 -0
package/docs/packages/TabPage/index.ts +10 -0
package/docs/packages/TabPage/src/TabPage.vue +566 -0
package/docs/packages/Tool/moneyFormat/README.md +15 -0
package/docs/packages/Tool/moneyFormat/moneyFormat.ts +69 -0
package/docs/packages/index.ts +61 -0
package/docs/packages/list.json +80 -0
package/docs/packages/typings/class.ts +22 -0
package/docs/packages/typings/enum.ts +9 -0
package/docs/packages/typings/global.d.ts +69 -0
package/docs/packages/typings/interface.ts +6 -0
package/package.json +1 -1
package/packages/MTable/docs/README.md +22 -17
package/packages/MTable/docs/demo.vue +15 -1
package/packages/MTable/src/MTable.vue +54 -6
package/packages/MTable/src/token.ts +11 -2
package/packages/MTableColumn/docs/README.md +8 -8
package/packages/MTableColumn/src/MTableColumn.vue +72 -6
package/tags.json +1 -1
package/web-types.json +1 -1

package/docs/index.html ADDED Viewed

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+    <script type="module" crossorigin src="/assets/index-B3d27dSP.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BeGJML3j.css">
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

package/docs/packages/Hook/usePackageConfig/README.md ADDED Viewed

@@ -0,0 +1,35 @@
+<script setup>
+import demo from './demo.vue'
+</script>
+配置保存与获取 hook
+=================
+### 1) 基础用法
+<Preview comp-name="usePackageConfig" demo-name="demo" is-hook>
+  <demo />
+</Preview>
+### 2) 所需参数
+| 名称        | 描述 | 类型                        | 可选值 | 默认值 |
+|-----------|----|---------------------------|:---:|:---:|
+| parameter | 参数 | UsePackageConfigParameter |  -  | {}  |
+#### UsePackageConfigParameter
+| 名称        | 描述        | 类型                                | 必填 |                                                                                   默认值 |
+|-----------|-----------|-----------------------------------|----|--------------------------------------------------------------------------------------:|
+| setConfig | 触发设置配置的回调 | (key: string, value: any) => void | 否  | (key: string, data: any): void => { localStorage.setItem(key, JSON.stringify(data)) } |
+| getConfig | 触发获取配置的回调 | (key: string) => any              | 否  |                 (key: string): any => JSON.parse(localStorage.getItem(key) \|\| '{}') |
+### 2) 返回值
+| 名称  | 描述     | 类型                                |
+|-----|--------|-----------------------------------|
+| set | 触发设置配置 | (key: string, value: any) => void |
+| get | 触发获取配置 | (key: string) => any              |

package/docs/packages/Hook/usePackageConfig/demo.vue ADDED Viewed

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <el-button @click="getConfig">获取config</el-button>
+    <el-button @click="setConfig">设置config</el-button>
+  </div>
+</template>
+<script setup lang="ts">
+import usePackageConfig from 'packages/Hook/usePackageConfig/usePackageConfig'
+usePackageConfig({
+  getConfig: (key: string = '') => {
+    return JSON.parse(localStorage.getItem(key) || '{}')
+  },
+  setConfig: (key: string = '', data: any) => {
+    setTimeout(() => {
+      localStorage.setItem(key, JSON.stringify(data))
+    }, 1000)
+  }
+})
+const packageConfig = usePackageConfig()
+const getConfig = () => {
+  console.log('packageConfig.get()', packageConfig.get('test'))
+}
+const setConfig = () => {}
+</script>
+<style lang="scss"></style>

package/docs/packages/Hook/usePackageConfig/usePackageConfig.ts ADDED Viewed

@@ -0,0 +1,39 @@
+let setApiAjax = (key: string, data: any): void => { localStorage.setItem(key, JSON.stringify(data)) }
+let getApiAjax = (key: string): any => JSON.parse(localStorage.getItem(key) || '{}')
+interface UsePackageConfig {
+  /** 触发设置配置 */
+  set: (key: string, value: any) => void,
+  /** 触发获取配置 */
+  get: (key: string) => any
+}
+interface UsePackageConfigParameter {
+  /** 触发设置配置的回调 */
+  setConfig?: (key: string, value: any) => void,
+  /** 触发获取配置的回调 */
+  getConfig?: (key: string) => any
+}
+/**
+ * @description 配置保存与获取
+ * */
+const usePackageConfig = (parameter: UsePackageConfigParameter = {}): UsePackageConfig => {
+  if (parameter.setConfig) setApiAjax = parameter.setConfig
+  if (parameter.getConfig) getApiAjax = parameter.getConfig
+  const setConfigEvent = (key: string, value: any): void => {
+    setApiAjax(key, value)
+  }
+  const getConfigEvent = (key: string): any => {
+    return getApiAjax(key)
+  }
+  return {
+    set: setConfigEvent,
+    get: getConfigEvent
+  }
+}
+export default usePackageConfig

package/docs/packages/Hook/useRemainingSpace/README.md ADDED Viewed

@@ -0,0 +1,26 @@
+计算获取剩余空间 hook
+=================
+### 1) 所需参数
+| 名称           | 描述   | 类型     | 可选值 | 默认值 |
+|--------------|------|--------|:---:|:---:|
+| boxClassName | 父级空间 | string |  -  |  -  |
+| className    | 排除空间 | string |  -  |  -  |
+| redundancy   | 冗余值  | number |  -  |  0  |
+### 2) 返回值
+| 名称           | 描述                             | 类型          |
+|--------------|--------------------------------|-------------|
+| height       | 计算之后的高度                        | ref<number> |
+| tableCovered | 重新进行计算高度 (如弹窗表 抽屉表 等默认无DOM时使用) | function    |
+| init         | 重新初始化 (如弹窗表 抽屉表 等默认无DOM时使用)    | function    |

package/docs/packages/Hook/useRemainingSpace/useRemainingSpace.ts ADDED Viewed

@@ -0,0 +1,148 @@
+import { ref, onMounted, nextTick } from 'vue'
+import type { Ref } from 'vue'
+/**
+ * 获取剩余空间
+ * @param boxClassName 父级空间
+ * @param className 排除空间
+ * @param redundancy 冗余值
+ * @return height
+ * @return tableCovered
+ * @return init
+ */
+const useRemainingSpace = (boxClassName: string, className: string = '', redundancy: number = 0): {
+  height: Ref<number>,
+  tableCovered: Function,
+  init: Function
+} => {
+  const height = ref<number>(0)
+  const getPropDom = (el: HTMLElement): HTMLElement => {
+    if (!el?.parentElement) return el
+    if (el.parentElement.className.includes(boxClassName)) {
+      return el
+    } else {
+      return getPropDom(el.parentElement as HTMLElement)
+    }
+  }
+  // 是否有横向滚动条
+  const hasHorizontalScrollbar = (element: HTMLElement): boolean => element.scrollWidth > element.clientWidth
+  const tableCovered = () => {
+    nextTick(() => {
+      const dom: HTMLElement | null = document.querySelector('.' + className) as HTMLElement
+      const _className = getPropDom(dom)?.className || ''
+      const box: HTMLElement | null = document.querySelector('.' + boxClassName)
+      if (!_className || !box) {
+        height.value = 100
+        return
+      }
+      const getOffsetTop = (el: HTMLElement, count: number = 0, level: number = 1): number => {
+        if (el?.className.includes(boxClassName) || !el.parentElement) {
+          return count
+        } else {
+          const isRelative = (window.getComputedStyle(el)?.getPropertyValue('position') || '') === 'relative'
+          const _count = isRelative || level === 1 ? el.offsetTop + count : count
+          return getOffsetTop(el.parentElement as HTMLElement, _count, level + 1)
+        }
+      }
+      const boxStyle: CSSStyleDeclaration = window.getComputedStyle(box)
+      const boxPosition = boxStyle.position
+      // 是否为相对定位
+      const isBoxRelative = boxPosition === 'relative'
+      if (!isBoxRelative) box.style.position = 'relative'
+      const offsetTop = getOffsetTop(dom)
+      // if (!isBoxRelative) box.style.position = boxPosition
+      const paddingBottom = parseInt(boxStyle.getPropertyValue('padding-bottom'), 10)
+      // 横向滚动条高度
+      const scrollHeight = hasHorizontalScrollbar(box) ? 10 : 0
+      // 内部高度
+      const boxInsideHeight = box.clientHeight - paddingBottom - scrollHeight
+      // 内容物高度
+      let contentHeight = 0
+      let isEndDom = false
+      for (let i = 0; i < box.children.length; i++) {
+        const item: HTMLElement = box.children[i] as HTMLElement
+        if (isEndDom) {
+          const itemStyle: CSSStyleDeclaration = window.getComputedStyle(item)
+          const marginTop = parseInt(itemStyle.getPropertyValue('margin-top'), 10)
+          const marginBottom = parseInt(itemStyle.getPropertyValue('margin-bottom'), 10)
+          const position = itemStyle.getPropertyValue('position')
+          if (position !== 'absolute' && position !== 'fixed') {
+            contentHeight += item.offsetHeight + marginTop + marginBottom
+          }
+        }
+        if (item.className.includes(_className)) {
+          isEndDom = true
+        }
+      }
+      height.value = boxInsideHeight - contentHeight - offsetTop - redundancy
+    })
+  }
+  // 节流
+  const throttle = (func: Function, limit: number = 100) => {
+    let inThrottle: boolean = false
+    return (...args: any) => {
+      if (!inThrottle) {
+        inThrottle = true
+        setTimeout(() => {
+          func.apply(this, args)
+          inThrottle = false
+        }, limit)
+      }
+    }
+  }
+  const init = () => {
+    const targetNode: Element | null = document.querySelector('.' + boxClassName)
+    if (!targetNode) return false
+    const dom: HTMLElement | null = document.querySelector('.' + className)
+    tableCovered()
+    const observer = new MutationObserver(throttle((mutationsList: MutationRecord[]) => {
+      if (!dom) return
+      // 检查是否全部为dom的子元素
+      const checkChildDom: boolean = !mutationsList.filter(item => !dom.contains(item.target)).length
+      if (checkChildDom) return false
+      tableCovered()
+    }))
+    observer.observe(targetNode, {
+      attributes: false, // 属性变化
+      childList: true, // 子节点增删
+      subtree: true // 后代
+    })
+    const resizeObserver = new ResizeObserver(entries => {
+      if (!dom) return
+      tableCovered()
+    })
+    resizeObserver.observe(targetNode)
+  }
+  onMounted(() => {
+    init()
+  })
+  return {
+    /** 高度 */
+    height,
+    /** 重新触发计算 */
+    tableCovered,
+    /** 重新初始化 */
+    init
+  }
+}
+export default useRemainingSpace

package/docs/packages/Hook/useTableConfig/README.md ADDED Viewed

@@ -0,0 +1,50 @@
+<script setup>
+import demo from './demo.vue'
+</script>
+表格组合 hook
+=================
+### 1) 基础用法
+<Preview comp-name="usePackageConfig" demo-name="demo" is-hook>
+  <demo />
+</Preview>
+### 2) 所需参数
+| 名称         | 描述     | 类型           | 可选值 | 默认值 |
+|------------|--------|--------------|:---:|:---:|
+| name       | 表格唯一标识 | string       |  -  |  -  |
+| tableTitle | 列配置    | tableTitle[] |  -  |  -  |
+| tableData  | 表格数据   | ref<any[]>   |  -  |  -  |
+### 3) 返回值
+| 名称               | 描述      | 类型                                      |
+|------------------|---------|-----------------------------------------|
+| tableTitle       | 处理之后的表头 | TableTitle[]                            |
+| tableConfig      | 表头的配置项  | {  [propName: string]: TableConfigItem} |
+| headerDragend    | 表格拖拽事件  | function                                |
+| initColumnFilter | 列的筛选    | function                                |
+| filtersValue     | 过滤条件    | { [key: string]: Array<string,number>}  |
+### 4) TableTitle
+| 名称           | 描述                                                                                                                  | 类型                                                        | 是否必填 |
+|--------------|---------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------|------|
+| label        | 显示的标题                                                                                                               | string                                                    | 是    |
+| prop         | 字段对应列的字段名字也可以使用 property属性                                                                                          | string                                                    | 是    |
+| minWidth     | 对应列的最小宽度与 width 的区别是 width 是固定的，min-width 会按比例分配剩余宽度                                                                | number \| string                                          | 否    |
+| className    | 列的className                                                                                                         | boolean \| string                                         | 否    |
+| sortable     | 列是否能够排序 则代表用户希望远程排序，需要监听 Table 的 sort-change 事件                                                                     | Boolean                                                   | 否    |
+| sortBy       | 指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。 如果 sort-by 为数组，则先按照第 1 个属性排序，如果第 1 个相等，再按照第 2 个排序，以此类推 | (row: any, index: number) => string \| string \| string[] | 否    |
+| sortOrders   | 数据在排序时所使用排序策略的轮转顺序，仅当 sortable 为 true 时有效。 需传入一个数组，随着用户点击表头，该列依次按照数组中元素的顺序进行排序                                      | ('ascending' \| 'descending' \| null)[]                   | 否    |
+| filters      | 据过滤的选项， 数组格式，数组中的元素需要有 text 和 value 属性。 数组中的每个元素都需要有 text 和 value 属性                                                | {text:string,number,value:string,number} []               | 否    |
+| filterMethod | 数据过滤使用的方法， 如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示                                                                   | Function                                                  | 否    |
+| headerAlign  | 表头对齐方式， 若不设置该项，则使用表格的对齐方式                                                                                           | 'left' \| 'center' \| 'right'                             | 否    |
+| align        | 对齐方式                                                                                                                | 'left' \| 'center' \| 'right'                             | 否    |
+| fixed        | 列是否固定在左侧或者右侧。 true 表示固定在左侧                                                                                          | 'left' \| 'right'  \| boolean                             | 否    |

package/docs/packages/Hook/useTableConfig/demo.vue ADDED Viewed

@@ -0,0 +1,134 @@
+<template>
+  <div>
+    <el-button @click="page.pageSize = 50">设置50</el-button>
+    <el-button @click="page.pageSize = 100">设置100</el-button>
+    <el-button @click="getSize">获取pageSize</el-button>
+    <p>{{ filtersValue }}</p>
+    <div>
+      <MTable
+        :data="tableData"
+        :filtersValue="filtersValue"
+        @headerDragend="headerDragend"
+      >
+        <MTableColumn
+          v-for="item in tableTitle"
+          :key="item.prop"
+          :prop="item.prop"
+          :label="item.label"
+          :minWidth="item.minWidth"
+          :filters="item.filters"
+          :headerAlign="item.headerAlign"
+          v-model:filtersValue="filtersValue"
+          showOverflowTooltip
+        >
+          <template
+            #default="scope"
+            v-if="['tag'].includes(item.prop)"
+          >
+            <el-tag
+              v-if="item.prop === 'tag'"
+              v-for="item in scope.row.tag"
+              type="primary"
+            >
+              {{ item }}
+            </el-tag>
+          </template>
+        </MTableColumn>
+      </MTable>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import moneyFormat from '../../Tool/moneyFormat/moneyFormat'
+import useTableConfig from 'packages/Hook/useTableConfig/useTableConfig'
+const tableData = ref<any[]>([])
+// const tableData = ref<any[]>([
+//   {
+//     date: '2016-05-03',
+//     name: 'Tom1',
+//     // address: 'No. 189, Grove St, Los Angeles',
+//     tag: ['Home1', 'Home2']
+//   },
+//   {
+//     date: '2016-05-02',
+//     name: 'Tom2',
+//     // address: 'No. 189, Grove St, Los Angeles',
+//     tag: ['Office']
+//   },
+//   {
+//     date: '2016-05-04',
+//     name: 'Tom3',
+//     // address: 'No. 189, Grove St, Los Angeles',
+//     tag: ['Home']
+//   },
+//   {
+//     date: '2016-05-01',
+//     name: 'Tom4',
+//     // address: 'No. 189, Grove St, Los Angeles',
+//     tag: ['Office']
+//   }
+// ])
+const { tableTitle, headerDragend, filtersValue, page } = useTableConfig(
+  'testTableSize',
+  [{
+    label: '名称',
+    prop: 'name',
+    minWidth: '208px'
+  }, {
+    label: '单据日期',
+    prop: 'date',
+    minWidth: '110px'
+  }, {
+    label: '标签',
+    prop: 'tag',
+    minWidth: '110px'
+  }],
+  tableData
+)
+setTimeout(() => {
+  tableData.value = [
+    {
+      date: '2016-05-03',
+      name: 'Tom1',
+      // address: 'No. 189, Grove St, Los Angeles',
+      tag: ['Home1', 'Home2']
+    },
+    {
+      date: '2016-05-03',
+      name: 'Tom2',
+      // address: 'No. 189, Grove St, Los Angeles',
+      tag: ['Office']
+    },
+    {
+      date: '2016-05-04',
+      name: 'Tom3',
+      // address: 'No. 189, Grove St, Los Angeles',
+      tag: ['Home']
+    },
+    {
+      date: '2016-05-01',
+      name: 'Tom4',
+      // address: 'No. 189, Grove St, Los Angeles',
+      tag: ['Office']
+    }
+  ]
+})
+const getSize = () => {
+  console.log(moneyFormat(0.05, false, 10, { repairZero: 6 }))
+  // console.log(page.value.pageSize)
+}
+const test = (data: any) => {
+  console.log('data', data.name)
+}
+</script>
+<style scoped lang="scss">
+.u-p {
+  color: #c600fd;
+}
+</style>

package/docs/packages/Hook/useTableConfig/useTableConfig.ts ADDED Viewed

@@ -0,0 +1,173 @@
+import { ref, watch, computed } from 'vue'
+import type { Ref } from 'vue'
+import { Page } from '../../typings/class'
+import usePackageConfig from './../../../packages/Hook/usePackageConfig/usePackageConfig'
+const packageConfig = usePackageConfig()
+/** 表格列配置(单个) */
+export interface TableConfigItem {
+  /** 最小列宽 */
+  minWidth: number | string,
+  /** 是否显示 */
+  show: boolean,
+  /** 排序 */
+  sort: number,
+  /** 列名 */
+  label: string,
+  /** 表头对齐方式， 若不设置该项，则使用表格的对齐方式 */
+  headerAlign: 'left' | 'center' | 'right',
+  /** 对齐方式 */
+  align: 'left' | 'center' | 'right',
+  /** 列是否固定在左侧或者右侧。 true 表示固定在左侧 */
+  fixed: 'left' | 'right' | boolean,
+}
+/** 表格配置 */
+export interface TableConfig {
+  [propName: string]: TableConfigItem
+}
+interface Column {
+  property: string
+}
+export interface FilterValue {
+  [key: string]: Array<string | number>
+}
+interface UseTableConfigReturn {
+  tableTitle: Ref<TableTitle[]>,
+  tableConfig: Ref<TableConfig>,
+  headerDragend: (newWidth: number, oldWidth: number, column: any) => void,
+  /** 初始化列筛选 */
+  initColumnFilter: (tableData: any[]) => void,
+  /** 过滤条件 */
+  filtersValue: Ref<FilterValue>,
+  /** 分页 */
+  page: Ref<Page>
+}
+// interface Config {
+//   /** 过滤选项数组拆分模式(待实现) */
+//   filterArrSplitMode?: boolean
+// }
+/**
+ * 表格配置
+ * @param {string} name 表格唯一标识
+ * @param {TableTitle} tableTitle 列配置
+ * @param {Ref<any[]>} tableData 表格数据
+ // * @param {Config} config 表格数据
+ * */
+const useTableConfig = (name: string = '', tableTitle: TableTitle[] = [], tableData: Ref<any[]> | null = null): UseTableConfigReturn => {
+  /** 表格列头 */
+  const _tableTitle: Ref<TableTitle[]> = ref<TableTitle[]>([])
+  const tableConfig: Ref<TableConfig> = ref<TableConfig>(packageConfig.get('tableConfig' + name))
+  const pageConfig = packageConfig.get('tablePage' + name)
+  const page = ref<Page>(new Page(pageConfig))
+  const _tableData = tableData || ref<any[]>([])
+  /** 列筛选 */
+  const filterMethod = (value: string, row: any, column: Column) => row[column.property] === value
+  /** 过滤条件 */
+  const filtersValue = ref<FilterValue>({})
+  tableTitle.forEach((item, index) => {
+    if (!tableConfig.value[item.prop]) {
+      tableConfig.value[item.prop] = {
+        minWidth: '',
+        show: true,
+        sort: index,
+        label: item.label,
+        headerAlign: 'left',
+        align: 'left',
+        fixed: false
+      }
+    }
+    tableConfig.value[item.prop].label = item.label
+  })
+  const syncTableTitle = () => {
+    _tableTitle.value = tableTitle.map(item => {
+      return {
+        ...item,
+        minWidth: tableConfig.value[item.prop]?.minWidth ? tableConfig.value[item.prop]?.minWidth : item.minWidth,
+        headerAlign: tableConfig.value[item.prop]?.headerAlign ? tableConfig.value[item.prop]?.headerAlign : item.headerAlign || 'left',
+        filterMethod,
+        filters: item.filters || _tableTitle.value.find(node => node.prop === item.prop)?.filters || [],
+        align: tableConfig.value[item.prop]?.align ? tableConfig.value[item.prop]?.align : item.align,
+        fixed: tableConfig.value[item.prop]?.fixed ? tableConfig.value[item.prop]?.fixed : item.fixed
+      }
+    })
+  }
+  syncTableTitle()
+  /** 保存拖拽后的列宽度信息 */
+  const headerDragend = (newWidth: number, oldWidth: number, column: any): void => {
+    tableConfig.value[column.property].minWidth = newWidth
+  }
+  watch(
+    () => tableConfig.value,
+    () => {
+      syncTableTitle()
+      packageConfig.set('tableConfig' + name, tableConfig.value)
+    },
+    { deep: true }
+  )
+  watch(
+    () => page.value.pageSize,
+    (item) => {
+      packageConfig.set('tablePage' + name, { pageSize: item })
+    },
+    { deep: true }
+  )
+  /** 初始化列筛选 */
+  const initColumnFilter = (tableData: any[]): void => {
+    _tableTitle.value = _tableTitle.value.map(item => {
+      const data = tableData.map(node => node[item.prop]).map(node => JSON.stringify(node))
+      // const isAllArray = !tableData.some(node => !checkType.isArray(node[item.prop]))
+      // let array: any[] = tableData.map(node => node[item.prop])
+      // if (config.filterArrSplitMode && isAllArray) {
+      //   array = []
+      //   data.forEach(node => {
+      //     array.push(...node)
+      //   })
+      // }
+      // array = array.map(node => JSON.stringify(node))
+      // 去重
+      const filters = [...new Set(data)].filter(node => node !== undefined).map(node => ({
+        text: JSON.parse(node),
+        value: JSON.parse(node)
+      }))
+      return {
+        ...item,
+        filters,
+        filterMethod
+      }
+    })
+  }
+  watch(
+    () => _tableData.value,
+    () => initColumnFilter(_tableData.value)
+  )
+  const tableTitleFilter = computed(() => _tableTitle.value
+    .filter(item => tableConfig.value[item.prop].show)
+    .sort((a, b) => (tableConfig.value[a.prop]?.sort || 0) - (tableConfig.value[b.prop]?.sort || 0)))
+  return {
+    tableTitle: tableTitleFilter,
+    tableConfig,
+    headerDragend,
+    initColumnFilter,
+    filtersValue,
+    page
+  }
+}
+export default useTableConfig

package/docs/packages/Hook/useZIndex/README.md ADDED Viewed

@@ -0,0 +1,6 @@
+全局层级 hook
+=================