@meethive/components 0.0.1

package/lib/EditTable/components/Search/Sort.js

@@ -0,0 +1,119 @@
+
+import { defineComponent, ref, reactive } from 'vue'
+import { Popover as APopover, Table as ATable, Space as ASpace, Button as AButton } from 'ant-design-vue'
+import { useTableTool, useTableWrapper } from '../../context'
+import { useLocaleReceiver } from '../../../LocaleReciver'
+import AIcon from '../../../Icon'
+
+export default defineComponent({
+  name: 'JEditTableSearchSort',
+  components: {
+    APopover,
+    ATable,
+    ASpace,
+    AButton,
+    AIcon
+  },
+  props: {
+    dataSource: {
+      type: [Function, Array],
+      default: () => []
+    },
+    sortKey: {
+      type: [String, Array],
+      default: undefined
+    },
+    dataIndex: {
+      type: [Number, String],
+      default: undefined
+    },
+    selectedRowKeys: {
+      type: Array,
+      default: () => []
+    },
+    active: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['click'],
+  setup(props, { emit }) {
+    const [contextLocale] = useLocaleReceiver('EditTable')
+    const tableWrapperRef = useTableWrapper()
+    const tableTool = useTableTool()
+
+    const visible = ref(false)
+    const localDataSource = ref([])
+    const mySelectedRowKeys = ref([])
+
+    const columns = reactive([
+      {
+        dataIndex: 'name',
+        title: contextLocale.value.columns.name
+      },
+      {
+        dataIndex: 'total',
+        title: contextLocale.value.columns.count,
+        width: 70
+      }
+    ])
+
+    const visibleChange = (e) => {
+      if (e) {
+        mySelectedRowKeys.value = props.selectedRowKeys 
+        const ds = typeof props.dataSource === 'function' ? props.dataSource() : props.dataSource
+        localDataSource.value = (ds || []).map((item, index) =>
+          Object.assign(item, { __index: index + 1 })
+        )
+      }
+      if (!e) {
+        setTimeout(() => {
+          visible.value = e
+        }, 300)
+      } else {
+        visible.value = e
+      }
+    }
+
+    const onSelectChange = (keys) => {
+      mySelectedRowKeys.value = keys
+    }
+
+    const cleanParams = () => {
+      mySelectedRowKeys.value = []
+      tableTool.cleanOrder()
+    }
+
+    const handleSortRowKeys = () => {
+      return localDataSource.value
+        .filter((item) => mySelectedRowKeys.value.includes(item.key))
+        .sort((a, b) => b.__index - a.__index)
+        .map((item) => item.key)
+    }
+
+    const onAsc = () => {
+      tableTool.order('asc', props.sortKey, handleSortRowKeys(), props.dataIndex)
+      emit('click')
+    }
+
+    const onDesc = () => {
+      tableTool.order('desc', props.sortKey, handleSortRowKeys(), props.dataIndex)
+      emit('click')
+    }
+
+    return {
+      props,
+      contextLocale,
+      tableWrapperRef,
+      visible,
+      localDataSource,
+      mySelectedRowKeys,
+      columns,
+      visibleChange,
+      onSelectChange,
+      cleanParams,
+      onAsc,
+      onDesc
+    }
+  }
+})

package/lib/EditTable/components/Search/index.js

@@ -0,0 +1,2 @@
+export { default as SearchModal } from './Search.js'
+export { default as Sort } from './Sort.js'

package/lib/EditTable/consts.js

@@ -0,0 +1,13 @@
+export const METADATA_GROUP_OPTIONS = Symbol('metadata-group-options')
+export const TABLE_WRAPPER = Symbol('table-wrapper')
+export const FULL_SCREEN = Symbol('full')
+export const RIGHT_MENU = Symbol('right-menu')
+export const TABLE_ERROR = Symbol('table-error')
+export const TABLE_GROUP_ERROR = Symbol('table-group-error')
+export const TABLE_GROUP_OPTIONS = Symbol('table-group-options')
+export const TABLE_DATA_SOURCE = Symbol('table-data-source')
+export const TABLE_OPEN_GROUP = Symbol('table-open-group')
+export const TABLE_TOOL = Symbol('table-tool')
+export const TABLE_FORM_ITEM_ERROR = Symbol('table-form-item-error')
+export const TABLE_GROUP_ACTIVE = Symbol('table-group-active')
+export const TABLE_H_SCROLL = Symbol('table-h-scroll')

package/lib/EditTable/context.js

@@ -0,0 +1,88 @@
+import { provide, inject, computed, } from 'vue'
+import {
+  RIGHT_MENU,
+  TABLE_DATA_SOURCE,
+  TABLE_ERROR,
+  TABLE_GROUP_ERROR,
+  TABLE_WRAPPER,
+  TABLE_OPEN_GROUP,
+  TABLE_TOOL,
+  TABLE_GROUP_OPTIONS,
+  TABLE_FORM_ITEM_ERROR,
+  TABLE_GROUP_ACTIVE,
+  FULL_SCREEN,
+  TABLE_H_SCROLL
+} from './consts'
+
+const FormContextKey = 'form-context'
+
+
+
+
+
+
+
+
+
+
+
+
+export const useFormContext = (options) => {
+  provide(FormContextKey, options)
+}
+
+export const useInjectForm = () => {
+  return inject(FormContextKey, {
+    addField: (key, field) => {},
+    dataSource: computed(() => []),
+    rules: computed(() => undefined)
+  })
+}
+
+export const useInjectError = () => {
+  return inject(TABLE_ERROR)
+}
+
+export const useTableWrapper = () => {
+  return inject(TABLE_WRAPPER)
+}
+
+export const useRightMenuContext = () => {
+  return inject(RIGHT_MENU)
+}
+
+export const useTableGroupError = () => {
+  return inject(TABLE_GROUP_ERROR)
+}
+
+export const useTableDataSource = () => {
+  return inject(TABLE_DATA_SOURCE, computed(() => []))
+}
+
+export const useTableOpenGroup = () => {
+  return inject(TABLE_OPEN_GROUP, false)
+}
+
+export const useTableTool = () => {
+  return inject(TABLE_TOOL, false)
+}
+
+export const useGroupOptions = () => {
+  return inject(TABLE_GROUP_OPTIONS, { value: [] } )
+}
+
+export const useFormItemError = () => {
+  return inject(TABLE_FORM_ITEM_ERROR)
+}
+
+export const useGroupActive = () => {
+  return inject(TABLE_GROUP_ACTIVE)
+}
+
+export const useTableFullScreen = () => {
+  return inject(FULL_SCREEN)
+}
+
+export const useHScroll = () => {
+  return inject(TABLE_H_SCROLL)
+}

package/lib/EditTable/hooks/index.js

@@ -0,0 +1,19 @@
+export * from './useResizeObserver'
+export * from './useValidate'
+export * from './useGroup'
+export {
+  useFormContext,
+  useInjectForm,
+  useInjectError,
+  useTableWrapper,
+  useRightMenuContext,
+  useTableGroupError,
+  useTableDataSource,
+  useTableOpenGroup,
+  useTableTool,
+  useGroupOptions,
+  useFormItemError,
+  useGroupActive,
+  useTableFullScreen,
+  useHScroll
+} from '../context'

package/lib/EditTable/hooks/useGroup.js

@@ -0,0 +1,48 @@
+import { ref, reactive } from 'vue'
+
+export const useGroup = (openGroup = false) => {
+  const groupOptions = ref([])
+  const groupActive = reactive({
+    value: undefined,
+    label: undefined
+  })
+
+  /**
+   * 更新当前选择的分组id
+   * @param key
+   * @param name
+   */
+  const updateGroupActive = (key, name) => {
+    if (openGroup) {
+      groupActive.value = key
+      groupActive.label = name
+    }
+  }
+
+  const addGroup = (val) => {
+    if (openGroup) {
+      groupOptions.value.push(val)
+    }
+  }
+
+  const removeGroup = (index) => {
+    if (openGroup) {
+      groupOptions.value.splice(index, 1)
+    }
+  }
+
+  const updateGroupOptions = (options = []) => {
+    if (openGroup) {
+      groupOptions.value = options
+    }
+  }
+
+  return {
+    groupOptions,
+    groupActive,
+    updateGroupActive,
+    addGroup,
+    removeGroup,
+    updateGroupOptions
+  }
+}

package/lib/EditTable/hooks/useResizeObserver.js

@@ -0,0 +1,27 @@
+ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }import { onBeforeUnmount, onMounted, } from 'vue'
+import ResizeObserver from 'resize-observer-polyfill'
+import { debounce } from 'lodash-es'
+
+export const useResizeObserver = (
+  tableWrapper,
+  cb
+) => {
+  let observer
+
+  const onResize = (entries) => {
+    let rect = {}
+    for (const entry of entries) {
+      rect = entry.contentRect
+    }
+    cb(rect , entries)
+  }
+
+  onMounted(() => {
+    observer = new ResizeObserver(debounce(onResize, 100))
+    observer.observe(tableWrapper.value)
+  })
+
+  onBeforeUnmount(() => {
+    _optionalChain([observer, 'optionalAccess', _ => _.unobserve, 'call', _2 => _2(tableWrapper.value)])
+  })
+}

package/lib/EditTable/hooks/useValidate.js

@@ -0,0 +1,112 @@
+ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }import Schema from 'async-validator'
+import { handlePureRecord, collectValidateRules } from '../utils'
+import { ref, } from 'vue'
+
+
+
+
+
+
+
+
+export const useValidate = (
+  dataSource,
+  columns,
+  rowKey,
+  options = {}
+) => {
+  const errorMap = ref({})
+  let schemaInstance
+  const rules = ref({})
+
+  const _options = {
+    validateRowKey: false,
+    ...options
+  }
+
+  const validateItem = (data, index = 0) => {
+    return new Promise((resolve, reject) => {
+      schemaInstance.validate(
+        data,
+        {
+          firstFields: true,
+          // @ts-ignore
+          index: index
+        },
+        (err) => {
+          if (_optionalChain([err, 'optionalAccess', _ => _.length])) {
+            reject(
+              err.map((item) => ({
+                ...item,
+                __serial: data.__serial,
+                __dataIndex: index
+              }))
+            )
+          } else {
+            resolve(data)
+          }
+        }
+      )
+    })
+  }
+
+  const validate = () => {
+    return new Promise((resolve, reject) => {
+      const filterDataSource = dataSource.value
+      const len = filterDataSource.length
+      const error = []
+      const success = []
+      let validateLen = 0
+
+      const end = () => {
+        validateLen += 1
+        if (validateLen === len) {
+          const isSuccess = !Object.keys(error).length
+          if (isSuccess) {
+            resolve(success)
+            _optionalChain([_options, 'access', _2 => _2.onSuccess, 'optionalCall', _3 => _3()])
+          } else {
+            _optionalChain([_options, 'access', _4 => _4.onError, 'optionalCall', _5 => _5(error)])
+            reject(error)
+          }
+        }
+      }
+
+      const { validateRowKey } = _options
+
+      if (filterDataSource.length) {
+        filterDataSource.forEach((record, index) => {
+          if (validateRowKey || record[rowKey]) {
+            validateItem(record, index)
+              .then((res) => {
+                success.push(handlePureRecord(res))
+                end()
+              })
+              .catch((err) => {
+                error.push(err)
+                end()
+              })
+          } else {
+            end()
+          }
+        })
+      } else {
+        resolve(filterDataSource)
+      }
+    })
+  }
+
+  const createValidate = () => {
+    rules.value = collectValidateRules(columns)
+    schemaInstance = new Schema(rules.value)
+  }
+
+  createValidate()
+
+  return {
+    validate,
+    validateItem,
+    errorMap,
+    rules
+  }
+}

package/lib/EditTable/index.js

@@ -0,0 +1,25 @@
+import EditTable from './EditTable.js'
+import EditTableBody from './Body.js'
+import EditTableHeader from './Header.js'
+import FormItem from './FormItem.js'
+
+
+export * from './props'
+export * from './consts'
+export * from './context'
+export { EditTable, EditTableBody, EditTableHeader, FormItem }
+
+
+
+
+
+const _EditTable = EditTable 
+
+_EditTable.install = (app) => {
+  app.component(EditTable.name || 'JEditTable', EditTable)
+  app.component(EditTableBody.name || 'JEditTableBody', EditTableBody)
+  app.component(EditTableHeader.name || 'JEditTableHeader', EditTableHeader)
+  app.component(FormItem.name || 'JFormItem', FormItem)
+}
+
+export default _EditTable

package/lib/EditTable/props.js

@@ -0,0 +1,60 @@
+export const defaultProps = () => {
+  return {
+    rowKey: {
+      type: String,
+      default: 'id'
+    },
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    searchColumns: {
+      type: Array,
+      default: () => [
+        { title: '标识', dataIndex: 'id' },
+        { title: '名称', dataIndex: 'name' }
+      ]
+    }
+  }
+}
+
+export const bodyProps = () => {
+  return {
+    dataSource: {
+      type: Array,
+      default: () => []
+    },
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    cellHeight: {
+      type: Number,
+      default: 65
+    },
+    height: {
+      type: Number,
+      default: 300
+    },
+    style: {
+      type: Object,
+      default: () => ({})
+    },
+    disableMenu: {
+      type: Boolean,
+      default: true
+    },
+    rowKey: {
+      type: String,
+      default: 'id'
+    },
+    openGroup: {
+      type: Boolean,
+      default: false
+    },
+    rowSelection: {
+      type: Object,
+      default: undefined
+    }
+  }
+}

package/lib/EditTable/style/body.js

@@ -0,0 +1,63 @@
+export const genEditTableBodyStyle = (config) => {
+  const { token } = config
+  return {
+    '.jetlinks-edit-table-body-viewport': {
+      maxHeight: '100%',
+      width: '100%',
+      overflow: 'hidden auto',
+      position: 'relative',
+      '.jetlinks-edit-scrollbar': {
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        right: 0,
+        zIndex: -1
+      },
+      '.jetlinks-edit-table-body-container': {
+        overflow: 'hidden',
+        height: '100%'
+      },
+      '.jetlinks-edit-table-center': {
+        position: 'relative',
+        flex: '1 1 auto',
+        minWidth: 0,
+        height: '100%',
+        '.jetlinks-edit-table-row': {
+          width: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          transition: 'top .2s, height .2s, background-color .1s',
+          borderBottom: '1px solid #eebebeb',
+          '.jetlinks-edit-table-cell': {
+            position: 'absolute',
+            minWidth: 0
+          },
+          '&:hover': {
+            backgroundColor: 'rgb(248, 248, 248)'
+          },
+          '&.jetlinks-edit-table-row-selected': {
+            backgroundColor: 'var(--ant-primary-1)'
+          },
+          '.body-cell-box': {
+            padding: '0 12px',
+            position: 'relative'
+          }
+        },
+        '.readonly-mask': {
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          zIndex: 4
+        }
+      }
+    },
+    '.jetlinks-edit-table-body-empty': {
+      display: 'flex',
+      width: '100%',
+      justifyContent: 'center',
+      paddingTop: 24
+    }
+  }
+}

package/lib/EditTable/style/form.js

@@ -0,0 +1,33 @@
+export const genEditTableFormItemStyle = (config) => {
+  const { token } = config
+  return {
+    '.jetlinks-table-form-error-target': {
+      position: 'absolute',
+      right: '2px',
+      top: '-9px',
+      border: '16px solid transparent',
+      borderTopColor: token.colorError,
+      borderRightWidth: 0,
+      borderBottomWidth: 0
+    },
+    '.jetlinks-edit-table-form-has-error': {
+      '.select-no-value': {
+        '.ant-select-selector': {
+          borderColor: `${token.colorError} !important`,
+          '&:focus': {
+            boxShadow: '0 0 0 2px var(--ant-error-color-outlined) !important'
+          }
+        }
+      },
+      '> input': {
+        borderColor: `${token.colorError} !important`,
+        '&:focus': {
+          boxShadow: '0 0 0 2px var(--ant-error-color-outlined) !important'
+        }
+      },
+      '.jetlinks-table-form-required-aicon': {
+        color: token.colorError
+      }
+    }
+  }
+}

package/lib/EditTable/style/group.js

@@ -0,0 +1,33 @@
+export const genEditTableGroupStyle = (config) => {
+  const { token } = config
+  return {
+    '.jetlinks-table-group-warp': {
+      '.ant-tabs-nav': {
+        marginBottom: 0,
+        '.ant-tabs-tab': {
+          overflow: 'hidden',
+          position: 'relative'
+        },
+        '.ant-tabs-tab-active': {
+          backgroundColor: '#BAE0FF !important',
+          borderColor: '#91CAFF !important'
+        },
+        '.ant-tabs-nav-add': {
+          border: 'none'
+        }
+      }
+    },
+    '.jetlinks-table-group-error-warp': {
+      color: '#1a1a1a !important',
+      '.jetlinks-table-group-error-target': {
+        position: 'absolute',
+        right: 0,
+        top: 0,
+        border: '16px solid transparent',
+        borderTopColor: token.colorError,
+        borderRightWidth: 0,
+        borderBottomWidth: 0
+      }
+    }
+  }
+}