br-dionysus 1.6.7 → 1.6.8

package/docs/packages/MTable/docs/demo.vue

@@ -1,93 +0,0 @@
-<template>
-  <div class="g-box">
-    <p>{{ tableConfig }}</p>
-    <MTable
-      class="style.box"
-      :data="tableData"
-      border
-      @headerDragend="headerDragend"
-      :filtersValue="filtersValue"
-      scrollbarAlwaysOn
-      v-model:tableConfig="tableConfig"
-    >
-      <MTableColumn
-        v-for="item in tableTitle"
-        :key="item.prop"
-        :prop="item.prop"
-        :label="item.label"
-        :align="item.align"
-        :minWidth="item.minWidth"
-        :className="item.className"
-        :filters="item.filters"
-        :headerAlign="item.headerAlign"
-        :fixed="item.fixed"
-        v-model:filtersValue="filtersValue"
-        showOverflowTooltip
-      />
-    </MTable>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { useTableConfig } from 'packages/index'
-
-interface User {
-  date: string;
-  name: string;
-  address: string;
-  tag: string;
-}
-
-const tableData = ref<User[]>([])
-const { tableTitle, headerDragend, tableConfig, filtersValue }= useTableConfig('MTableDemo', [{
-  label: 'Date',
-  prop: 'date',
-  minWidth: 200
-}, {
-  label: 'Address',
-  prop: 'address',
-  minWidth: 200
-}, {
-  label: 'name',
-  prop: 'name',
-  minWidth: 200
-}], tableData)
-
-tableData.value = [
-  {
-    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 pasteData = (obj: any, data: any) => {
-  tableData.value = data
-}
-</script>
-
-<style lang="scss" scoped>
-.g-box {
-  max-width: 1200px;
-}
-</style>

package/docs/packages/MTable/index.ts

@@ -1,10 +0,0 @@
-import { App, Plugin } from 'vue'
-import MTable from './src/MTable.vue'
-
-export const MTablePlugin: Plugin = {
-  install (app: App) {
-    app.component('MTable', MTable)
-  }
-}
-
-export { MTable }

package/docs/packages/MTable/src/MTable.vue

@@ -1,228 +0,0 @@
-<template>
-  <div class="m-table-box">
-    <el-table
-      ref="tableRef"
-      v-bind="$attrs"
-      :size="props.size"
-      @paste="paste"
-      @cellClick="cellClick"
-      :data="tableData"
-    >
-      <!-- 默认插槽 -->
-      <!--<slot></slot>-->
-
-      <!-- 循环处理具名插槽 -->
-      <!--<template-->
-      <!--  v-for="(slotData, name) in slots"-->
-      <!--  #[name]-->
-      <!--&gt;-->
-      <!--  <slot-->
-      <!--    :name="name"-->
-      <!--    v-bind="slotData"-->
-      <!--  ></slot>-->
-      <!--</template>-->
-      <slot name="default"></slot>
-      <slot name="append"></slot>
-      <template
-        v-if="!slots.empty"
-        #empty
-      >
-        <img src="./../../../src/assets/empty.png" />
-      </template>
-      <slot name="empty"></slot>
-    </el-table>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted, computed, useSlots, watch, provide } from 'vue'
-import checkType from '../../../tool/checkType'
-import { TableConfig } from './../../Hook/useTableConfig/useTableConfig'
-import { tableKey } from './token'
-interface FilterValue {
-  [key: string]: Array<string | number>
-}
-const props = withDefaults(defineProps<{
-  size?: 'small' | 'large' | '',
-  sole?: string,
-  data?: Array<{
-    [key: string]: string | number
-  }>,
-  filtersValue?: FilterValue,
-  /** 表格配置 */
-  tableConfig?: TableConfig | null
-}>(), {
-  size: '',
-  sole: 'key',
-  data: () => [],
-  filtersValue: () => ({}),
-  tableConfig: null
-})
-
-const tableConfig = ref<TableConfig>(props.tableConfig || {})
-watch(
-  () => props.tableConfig,
-  () => {
-    if (JSON.stringify(tableConfig.value) === JSON.stringify(props.tableConfig)) return false
-    tableConfig.value = props.tableConfig || {}
-  }
-)
-watch(
-  () => tableConfig.value,
-  () => {
-    emit('update:tableConfig', tableConfig.value)
-  }
-)
-
-const slots = useSlots()
-
-const tableData = computed(() => {
-  return props.data.filter(item => {
-    for (const key in props.filtersValue) {
-      const node = props.filtersValue[key]
-      const colData = checkType.isObject(item[key]) || checkType.isArray(item[key]) ? JSON.stringify(item[key]) : item[key]
-      if (!node.includes(colData) && node.length) return false
-    }
-    return true
-  })
-})
-const createHash = (hashLength: number = 24) => {
-  return Array.from(Array(Number(hashLength) || 24), () => Math.floor(Math.random() * 36).toString(36)).join('')
-}
-
-const emit = defineEmits<{
-  pasteData: [data: {
-    /** 粘贴行的行数据 */
-    editRow: { [key: string]: any },
-    /** 粘贴列的列名 */
-    editColumn: string,
-    /** 粘贴的数据 */
-    arr: Array<string | number>,
-    /** 起始行 */
-    rowIndex: number,
-  },
-    /** 粘贴完成后的表格数据 */
-    tableData: Array<{ [key: string]: any
-  }>],
-  'update:tableConfig': [tableConfig: TableConfig]
-}>()
-
-const internalData = ref<Array<{ [key: string]: any }>>([]) // 组件内数据
-const editColumn = ref<string>('') // 列名
-const editRow = ref<string>('') // 行
-const editRowSole = ref<string>('') // 行的唯一值
-const returnData = ref<Array<{ [key: string]: any }>>([]) // 返回的数据
-const elDom = ref<any>('')
-onMounted(async () => {
-  setTimeout(() => {
-    tableRef.value?.$el.click()
-  }, 1000)
-})
-const cellClick = (row: any, column: { property: string; }, cell: any) => {
-  elDom.value = cell.querySelector('input')
-  editColumn.value = column.property // 保存粘贴的列名
-  editRowSole.value = row[props.sole] // 保存操作的行的元素唯一值
-  editRow.value = row // 获取行的key名
-  elDom.value?.addEventListener('paste', disablePasteEvent)
-}
-const disablePasteEvent = (e: { preventDefault: () => void; }) => {
-  e.preventDefault()
-}
-const paste = (e: { clipboardData: any; }) => {
-  internalData.value = JSON.parse(JSON.stringify(props.data))
-  const clipdata = e.clipboardData
-  const str = clipdata.getData('text/plain')
-  const arr = str.split(/\r\n|\r|\n/).filter((item: string) => item)
-  // 查找修改行在数据内的位置
-  const rowIndex = internalData.value.findIndex(item => (item[props.sole as keyof typeof item] === editRowSole.value))
-
-  // 判断是否需要添加行
-  const num = props.data.length - rowIndex
-  if (arr.length > num) {
-    // 需要添加行
-    for (let i = 0; i < arr.length - num; i++) {
-      internalData.value.push(createObject())
-    }
-    // 添加完行之后
-  }
-  returnData.value = internalData.value.map((item, index) => {
-    const obj = item
-    if (index >= rowIndex && index < rowIndex + arr.length) {
-      const editNum = index - rowIndex
-      obj[editColumn.value] = arr[editNum]
-    }
-    return obj
-  })
-  emit('pasteData', { editRow, editColumn: editColumn.value, arr, rowIndex }, returnData.value)
-}
-const createObject = () => {
-  const newObj: { [key: string]: any } = {}
-  Object.keys(editRow.value).forEach(key => {
-    if (key === props.sole) {
-      newObj[key] = createHash()
-    } else {
-      const type = editRow.value[key as keyof typeof editRow.value]
-      if (typeof type === 'boolean') {
-        newObj[key] = false
-      } else if (typeof type === 'number') {
-        newObj[key] = 0
-      } else if (typeof type === 'string') {
-        newObj[key] = ''
-      } else if (typeof type === 'object') {
-        if (Array.isArray(type)) {
-          newObj[key] = []
-        } else {
-          newObj[key] = {}
-        }
-      }
-    }
-  })
-  return newObj
-}
-const tableRef = ref<any>(null)
-
-/** 最后一列 */
-const lastColumnProp = computed(() => {
-  if (!tableConfig.value) return ''
-  let sort = -1
-  let propKey = ''
-  for (const key in tableConfig.value) {
-    const item = tableConfig.value[key]
-    if (sort < item.sort) {
-      sort = item.sort
-      propKey = key
-    }
-  }
-  return propKey
-})
-provide(tableKey, {
-  tableConfig,
-  lastColumnProp
-})
-
-defineExpose({
-  clearSelection: () => tableRef.value?.clearSelection(),
-  getSelectionRows: () => tableRef.value?.getSelectionRows(),
-  toggleRowSelection: (row: any, selected: boolean) => tableRef.value?.toggleRowSelection(row, selected),
-  toggleAllSelection: () => tableRef.value?.toggleAllSelection(),
-  toggleRowExpansion: (row: any, expanded: boolean) => tableRef.value?.toggleRowExpansion(row, expanded),
-  setCurrentRow: (row: any) => tableRef.value?.setCurrentRow(row),
-  clearSort: () => tableRef.value?.clearSort(),
-  clearFilter: (columnKeys: string[] | number[]) => tableRef.value?.clearFilter(columnKeys),
-  doLayout: () => tableRef.value?.doLayout(),
-  sort: (prop: string, order: string) => tableRef.value?.sort(prop, order),
-  scrollTo: (options: any | number, yCoord?: number) => tableRef.value?.scrollTo(options, yCoord),
-  setScrollTop: (top: number) => tableRef.value?.setScrollTop(top),
-  setScrollLeft: (left: number) => tableRef.value?.setScrollLeft(left)
-})
-</script>
-
-<style scoped lang="scss">
-.m-table-box {
-  position: relative;
-}
-
-.el-table__empty-text img {
-  width: 15%
-}
-</style>

package/docs/packages/MTable/src/token.ts

@@ -1,9 +0,0 @@
-import { InjectionKey, Ref } from 'vue'
-import { TableConfig } from 'packages/Hook/useTableConfig/useTableConfig'
-
-export const tableKey: InjectionKey<{
-  /** 表格列配置 */
-  tableConfig: Ref<TableConfig>,
-  /** 最后一列 */
-  lastColumnProp: Ref<string>
-}> = Symbol('tableKey')

package/docs/packages/MTableColumn/docs/README.md

@@ -1,22 +0,0 @@
-<script setup>
-import demo from './demo.vue'
-</script>
-
-表格列组件
-=================
-
-### 1) 基础用法
-
-<Preview comp-name="MTableColumn" demo-name="demo">
-  <demo />
-</Preview>
-
-
-### 2) Attributes
-| 参数         | 说明                                | 类型               | 可选值 | 默认值                                              |
-| ------------ | ----------------------------------- | ------------------ | ------ | --------------------------------------------------- |
-| filtersValue | 列筛选过滤条件                      | object             | -      | { }                                                 |
-| filters      | 表格筛选数据                        | string[],number[]  | -      | any[]                                               |
-| filterMethod | 筛选方法                            | Function           | -      | () => void                                          |
-| children     | 多级表头 时使用传递对应数据进行循环 | Table-column API[] | -      | []                                                  |
-| 其余参数     | 参考el官网的table                   | any                | -      | https://element-plus.org/zh-CN/component/table.html |

package/docs/packages/MTableColumn/docs/demo.vue

@@ -1,110 +0,0 @@
-<template>
-  <div class="g-box">
-    <el-table
-      :data="tableData"
-    >
-      <MTableColumn
-        v-for="item in tableTitle"
-        :key="item.prop"
-        :prop="item.prop"
-        :label="item.label"
-        :minWidth="item.minWidth"
-        v-model:filtersValue="filtersValue"
-        showOverflowTooltip
-        :children="item.children || []"
-      >
-      </MTableColumn>
-    </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: '地址',
-    children: [
-      {
-        label: '123',
-        children: [
-          {
-            label: '222222222222',
-            prop: 'address',
-            minWidth: '134px'
-
-          },
-          {
-            label: 'qqqqqq',
-            prop: 'address',
-            minWidth: '134px'
-
-          }
-        ]
-      },
-      {
-        label: '2222',
-        prop: 'address',
-        minWidth: '134px'
-      }
-    ]
-
-  },
-  {
-    label: '标签',
-    prop: 'tag',
-    minWidth: '134px'
-  }
-]
-</script>
-
-<style scoped lang="scss">
-.g-box {
-  max-width: 1000px;
-}
-</style>

package/docs/packages/MTableColumn/index.ts

@@ -1,10 +0,0 @@
-import { App, Plugin } from 'vue'
-import MTableColumn from './src/MTableColumn.vue'
-
-export const MTableColumnPlugin: Plugin = {
-  install (app: App) {
-    app.component('MTableColumn', MTableColumn)
-  }
-}
-
-export { MTableColumn }