zydx-plus 1.3.22 → 1.4.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.3.22",
+  "version": "1.4.23",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [
@@ -20,7 +20,8 @@
   "license": "MIT",
   "author": "",
   "peerDependencies": {
-    "vue": "^3.2.13"
+    "vue": "^3.2.13",
+    "vue-draggable-next": "^2.1.1"
   },
   "devDependencies": {
     "@vue/component-compiler-utils": "^2.6.0",

package/src/components/data_table/index.js

@@ -0,0 +1,6 @@
+import main from './src/data_table.vue';
+
+main.install = function(Vue) {
+    Vue.component(main.name, main);
+};
+export default main;

package/src/components/data_table/src/data_table.vue

@@ -0,0 +1,273 @@
+<script>
+import { VueDraggableNext } from 'vue-draggable-next'
+import tableHead from './table_head.vue'
+import tableRow from './table_row.vue'
+import { defineComponent } from 'vue';
+export function getColKey(col) {
+  if (col.type === 'checkbox') return '__n_checkbox__'
+  return col.key
+}
+function getRowsAndCols(
+  columns
+) {
+  const rows = []
+  const cols = []
+  const dataRelatedCols = []
+  const rowItemMap = new WeakMap()
+  let maxDepth = -1
+  let totalRowSpan = 0
+  let hasEllipsis = false
+  function ensureMaxDepth(columns, currentDepth) {
+    if (currentDepth > maxDepth) {
+      rows[currentDepth] = []
+      maxDepth = currentDepth
+    }
+    for (const column of columns) {
+      if ('children' in column) {
+        ensureMaxDepth(column.children, currentDepth + 1)
+      } else {
+        cols.push({
+          key: getColKey(column),
+          column
+        })
+        totalRowSpan += 1
+        if (!hasEllipsis) {
+          hasEllipsis = !!column.ellipsis
+        }
+        dataRelatedCols.push(column)
+      }
+    }
+  }
+  ensureMaxDepth(columns, 0)
+  let currentLeafIndex = 0
+  function ensureColLayout(columns, currentDepth) {
+    let hideUntilIndex = 0
+    columns.forEach((column) => {
+      if ('children' in column) {
+        // do not allow colSpan > 1 for non-leaf th
+        // we will execute the calculation logic
+        const cachedCurrentLeafIndex = currentLeafIndex
+        const rowItem = {
+          column,
+          colSpan: 0,
+          rowSpan: 1,
+          isLast: false
+        }
+        ensureColLayout(column.children, currentDepth + 1)
+        column.children.forEach((childColumn) => {
+          rowItem.colSpan += rowItemMap.get(childColumn)?.colSpan ?? 0
+        })
+        if (cachedCurrentLeafIndex + rowItem.colSpan === totalRowSpan) {
+          rowItem.isLast = true
+        }
+        rowItemMap.set(column, rowItem)
+        rows[currentDepth].push(rowItem)
+      } else {
+        if (currentLeafIndex < hideUntilIndex) {
+          currentLeafIndex += 1
+          return
+        }
+        let colSpan = 1
+        if ('titleColSpan' in column) {
+          colSpan = column.titleColSpan ?? 1
+        }
+        if (colSpan > 1) {
+          hideUntilIndex = currentLeafIndex + colSpan
+        }
+        const isLast = currentLeafIndex + colSpan === totalRowSpan
+        const rowItem = {
+          column,
+          colSpan,
+          rowSpan: maxDepth - currentDepth + 1,
+          isLast
+        }
+        rowItemMap.set(column, rowItem)
+        rows[currentDepth].push(rowItem)
+        currentLeafIndex += 1
+      }
+    })
+  }
+  ensureColLayout(columns, 0)
+
+  return {
+    hasEllipsis,
+    rows,
+    cols,
+    dataRelatedCols
+  }
+}
+
+export default defineComponent({
+  name: 'zydx-table',
+  components: {
+    VueDraggableNext,
+    tableHead,
+    tableRow
+  },
+  props: {
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    data: {
+      type: Array,
+      default: () => []
+    },
+    checkedRowKeys: {
+      type: Array,
+      default: () => []
+    },
+    maxHeight: {
+      type: Number,
+      default: 0
+    },
+    maxWidth: {
+      type: Number,
+      default: 0
+    },
+    draggable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      rows: [],
+      cols: [],
+      checkbox_state: [],
+      draggable_state: []
+    }
+  },
+  emits: ['update:model-value'],
+  mounted() {
+    const { rows, cols } = getRowsAndCols(this.columns)
+    this.rows = rows
+    this.cols = cols
+    this.draggable_state = [...this.data]
+    if (this.columns[0]?.type === 'checkbox') {
+      this.checkbox_state = Array.from({ length: this.data.length + 1 }, () => { return false })
+    }
+  },
+  methods: {
+    onDragEnd: function (payload) {
+      const { oldIndex, newIndex } = payload
+      let state = [...this.draggable_state]
+      let item = state.splice(oldIndex - 1, 1)[0]
+      state.splice(newIndex - 1, 0, item)
+      this.draggable_state = state
+    },
+    onCheckboxClick: function (idx) {
+      if (idx === 0) {
+        if (this.checkbox_state[0]) {
+          // 取消全选
+          this.checkbox_state = Array.from({ length: this.data.length + 1 }, () => { return false })
+        } else {
+          // 全选
+          this.checkbox_state = Array.from({ length: this.data.length + 1 }, () => { return true })
+        }
+      } else {
+        this.checkbox_state[idx] = !this.checkbox_state[idx]
+      }
+      this.$emit('update:checkedRow', this.checked_row)
+    }
+  },
+
+  provide() {
+    return {
+      onCheckboxClick: this.onCheckboxClick,
+    }
+  },
+  computed: {
+    getHeight() {
+      if (this.maxHeight) {
+        return {
+          maxHeight: this.maxHeight + 'px'
+        }
+      } else {
+        return ''
+      }
+    },
+    getWidth() {
+      if (this.maxWidth) {
+        return {
+          maxWidth: this.maxWidth + 'px'
+        }
+      } else {
+        return ''
+      }
+    },
+    checked_row() {
+      return this.checkbox_state.reduce((acc, cur, idx) => {
+        if (cur && idx !== 0) {
+          acc.push(this.data[idx - 1])
+        }
+        return acc
+      }, [])
+    }
+  },
+  render() {
+    const { draggable, rows, cols, data, getHeight, getWidth, onDragEnd, checkbox_state } = this
+    return (
+      <div class="table_wrapper" style={[getHeight, getWidth]}>
+        {
+          draggable
+            ? (
+              <div class="table_root" aria-label='draggbale-table'>
+                <VueDraggableNext tag={"table"} animation={"200"} onEnd={onDragEnd} >
+                  <table-head rows={rows} checked={checkbox_state[0]}></table-head>
+                  {
+                    data.map((row, idx) => (
+                      <table-row checked={checkbox_state[idx + 1]} cols={cols} row={row} draggable={draggable} data_row={idx + 1} />
+                    ))
+                  }
+                </VueDraggableNext>
+              </div>
+            )
+            : (
+              <table class="table_root" aria-label='simple-table'>
+                <table-head rows={rows} checked={checkbox_state[0]}></table-head>
+                <tbody class="table_body">
+                  {
+                    data.map((row, idx) => (
+                      <table-row checked={checkbox_state[idx + 1]} cols={cols} row={row} draggable={draggable} data_row={idx + 1} />
+                    ))
+                  }
+                </tbody>
+              </table>
+            )
+        }
+      </div >
+    )
+  }
+})
+</script>
+<style  scoped>
+.table_wrapper {
+  width: auto;
+  position: relative;
+  opacity: 1;
+  overflow: scroll;
+}
+
+.table_wrapper::-webkit-scrollbar {
+  display: none;
+  /* or add it to the track */
+}
+
+
+.table_root {
+  table-layout: fixed;
+  display: table;
+  max-width: 100%;
+  border-top: 1px solid #cccccc;
+  border-left: 1px solid #cccccc;
+  margin: 0 auto;
+  border-spacing: 0;
+}
+
+
+.table_body {
+  position: relative;
+  width: 100%;
+}
+</style>

package/src/components/data_table/src/table_head.vue

@@ -0,0 +1,113 @@
+<template>
+  <thead class="table_head">
+    <tr v-for=" (row, idx) in rows"
+        class="table_row"
+        :key="idx">
+      <th v-for="({ key, rowSpan, colSpan, column }) in row"
+          :key="key"
+          class="table_cell"
+          :data-col-key="key"
+          :rowspan="rowSpan"
+          :colspan="colSpan"
+          :style="sticky({ level: idx, column: column })">
+        <template v-if="column.type === 'checkbox'">
+      <td class="checkbox_container table_cell">
+        <input type="checkbox"
+               @click="() => onCheckboxClick(0)"
+               :checked="checked">
+      </td>
+      </template>
+      <template v-else>
+        {{ column.title }}
+      </template>
+      </th>
+    </tr>
+  </thead>
+</template>
+
+<script>
+<thead class="table_head">
+</thead>
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: 'table-head',
+  props: {
+    rows: {
+      type: Array,
+      default: () => []
+    },
+    checked: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  inject: ['onCheckboxClick'],
+  methods: {
+    sticky: function ({ level, column }) {
+      return `  background: white;
+  position: sticky;
+  z-index: 5;
+  min-width: ${column.width}px;
+  max-width: ${column.width}px;
+  top: ${level * 31}px;}`
+    }
+  }
+})
+</script>
+
+<style  scoped>
+.checkbox_container {
+  width: 36px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.table_row {
+  height: 30px;
+  box-sizing: border-box;
+}
+
+.table_row>.table_cell {
+  border-right: 1px solid #ccc;
+  border-bottom: 1px solid #ccc;
+
+}
+
+.table_head {
+  position: relative;
+  z-index: 5;
+  background: white
+}
+
+th,
+td {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+
+.table_head .table_cell {
+  font-weight: normal;
+}
+
+.table_cell {
+  text-align: center;
+  text-align: center;
+  line-height: 30px;
+}
+
+th {
+  background: white;
+  position: sticky;
+  z-index: 5;
+  top: 0;
+  /* Don't forget this, required for the stickiness */
+}
+</style>

package/src/components/data_table/src/table_row.vue

@@ -0,0 +1,151 @@
+<script>
+import { defineComponent, Fragment, Transition } from 'vue';
+export default defineComponent({
+  name: 'table-row',
+  props: {
+    row: {
+      type: Object,
+      default: () => ({})
+    },
+    cols: {
+      type: Array,
+      default: () => []
+    },
+    data_row: {
+      type: Number,
+      default: 1
+    },
+    checked: {
+      type: Boolean,
+      default: false
+    },
+    draggable: {
+      type: Boolean,
+      default: true
+    }
+  },
+  inject: ['onCheckboxClick'],
+  render() {
+    const { cols, row, data_row, draggable, checked, onCheckboxClick } = this
+    const { renderExpand, expandable } = row
+    const renderCell = () => {
+      return cols.map(({ column, key }) => {
+        const { width, type } = column
+        return typeof row[key] === 'function'
+          ?
+          (
+            <td class="table_cell" style={`min-width:${width}px; max-width:${width}px;`} rowspan={1} colspan={1} data-col-key={key}>
+              {row[key](row)}
+            </td>
+          )
+          :
+          type === 'checkbox'
+
+            ? (
+              <td class="checkbox_container table_cell">
+                <input type="checkbox" checked={checked} onClick={() => onCheckboxClick(data_row)} />
+              </td>
+            )
+            : (
+              <td class="table_cell" style={`min-width:${width}px; max-width:${width}px;`} rowspan={1} colspan={1} data-col-key={key}>
+                {row[key]}
+              </td>
+            )
+      })
+    }
+    const renderExpandable = () => {
+      return renderExpand && (
+        <Transition>
+          {
+            expandable && (
+              <tr class='table_row'>
+                <td class='table_cell expandable' role='description' colspan={cols.length}>
+                  {renderExpand(row)}
+                </td>
+              </tr>
+
+            )
+          }
+        </Transition>
+      )
+    }
+    const renderRow = () => (
+      <Fragment>
+        <tr class="table_row" data-row={data_row}>
+          {
+            renderCell()
+          }
+        </tr>
+        {
+          renderExpandable()
+        }
+      </Fragment>)
+    const renderDraggable = () => (
+      <Fragment>
+        <tbody class="table_body move" data-row={data_row} >
+          <tr class="table_row">
+            {
+              renderCell()
+            }
+          </tr>
+          {
+            renderExpandable()
+          }
+        </tbody>
+      </Fragment>
+    )
+    return (
+      draggable
+        ? renderDraggable()
+        : renderRow()
+    )
+  }
+})
+</script>
+
+<style  scoped>
+.checkbox_container {
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.table_cell {
+  text-align: center;
+  text-align: center;
+  line-height: 30px;
+}
+
+th,
+td {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.table_row {
+  height: 30px;
+  box-sizing: border-box;
+}
+
+.table_body.move {
+  cursor: move;
+}
+
+.table_row>.table_cell {
+  border-right: 1px solid #ccc;
+  border-bottom: 1px solid #ccc;
+
+}
+
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+</style>

package/src/index.js

@@ -7,6 +7,7 @@ import tree from './components/tree/index';
 import Pagination from './components/pagination/index';
 import Select from './components/select/index';
 import Year from './components/year/index';
+import Table from './components/data_table/index';
 
 const components = [
     Calendar,
@@ -16,7 +17,8 @@ const components = [
     tree,
     Pagination,
     Select,
-    Year
+    Year,
+    Table
 ];
 
 function install(app) {
@@ -27,7 +29,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.3.22',
+    version: '1.4.23',
     install,
     Calendar,
     Message,
@@ -37,6 +39,7 @@ export default {
     tree,
     Pagination,
     Select,
-    Year
+    Year,
+    Table
 };