@meethive/components 0.0.1

package/lib/EditTable/Group.js

@@ -0,0 +1,204 @@
+ 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 { defineComponent, ref, reactive, computed, watch, onMounted } from 'vue'
+import {
+  Tabs as ATabs,
+  TabPane as ATabPane,
+  Dropdown as ADropdown,
+  Menu as AMenu,
+  MenuItem as AMenuItem,
+  Tooltip as ATooltip,
+  Modal as AModal,
+  Form as AForm,
+  FormItem as AFormItem,
+  Input as AInput,
+  Button as AButton,
+  Modal
+} from 'ant-design-vue'
+import { randomNumber } from '@meethive/utils'
+import { isFullScreen } from './utils'
+import { useTableGroupError, useTableWrapper } from './context'
+import { useLocaleReceiver } from '../LocaleReciver'
+import genEditTableStyle from './style'
+
+export default defineComponent({
+  name: 'JEditTableGroup',
+  components: {
+    ATabs,
+    ATabPane,
+    ADropdown,
+    AMenu,
+    AMenuItem,
+    ATooltip,
+    AModal,
+    AForm,
+    AFormItem,
+    AInput,
+    AButton
+  },
+  props: {
+    options: {
+      type: Array ,
+      default: () => []
+    },
+    activeKey: {
+      type: String,
+      default: undefined
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['delete', 'edit', 'add', 'change', 'update:activeKey'],
+  setup(props, { emit }) {
+    const [contextLocale] = useLocaleReceiver('EditTable')
+
+    const myActiveKey = ref(props.activeKey)
+    const visible = ref(false)
+    const type = ref(contextLocale.value.Group.addGroup)
+    const errorMap = useTableGroupError()
+    const tableWrapperRef = useTableWrapper()
+    const addIndex = ref(0)
+    const formRef = ref()
+    const formData = reactive({
+      label: undefined
+    })
+
+    const prefixCls = computed(() => 'jetlinks-edit-table')
+    const [wrapSSR, hashId] = genEditTableStyle(prefixCls)
+
+    const onAdd = (targetKey, action) => {
+      if (action === 'add') {
+        type.value = 'add'
+        const groupName = props.options.filter((item) =>
+          item.label.includes(contextLocale.value.Group.one)
+        )
+        let index = addIndex.value + 1
+        let findStatus = false
+
+        while (!findStatus) {
+          const status = groupName.some((item) => {
+            const [_, _index] = item.label.split('_')
+            if (index === Number(_index)) {
+              index = Number(_index) + 1
+              return true
+            }
+            return false
+          })
+          findStatus = !status
+        }
+
+        addIndex.value = index
+        formData.label = contextLocale.value.Group.one + index
+        onOk()
+      }
+    }
+
+    const onEdit = (record) => {
+      visible.value = true
+      type.value = 'edit'
+      formData.label = record.label
+    }
+
+    const onCancel = () => {
+      formRef.value.resetFields()
+      visible.value = false
+    }
+
+    const onOk = () => {
+      const data = { ...formData }
+      if (type.value === 'add') {
+        data.value = 'group_' + randomNumber()
+        myActiveKey.value = data.value
+        emit(type.value, data)
+        emit('change', data.value, data.label)
+        emit('update:activeKey', data.value)
+        visible.value = false
+      } else {
+        formRef.value.validate().then(() => {
+          data.value = myActiveKey.value
+          emit(type.value, data)
+          emit('change', data.value, data.label)
+          visible.value = false
+        })
+      }
+    }
+
+    const change = () => {
+      const item = props.options.find((item) => item.value === myActiveKey.value)
+      emit('change', myActiveKey.value, item.label)
+      emit('update:activeKey', myActiveKey.value)
+    }
+
+    const menuClick = (e, record) => {
+      if (props.readonly) return
+      if (e.key === 'edit') {
+        onEdit(record)
+      } else {
+        Modal.confirm({
+          title: contextLocale.value.Group.deleteMessage,
+          onOk: () => {
+            const index = props.options.findIndex((item) => item.value === record.value)
+            let label = ''
+
+            if (index !== 0 && index === props.options.length - 1) {
+              myActiveKey.value = props.options[index - 1].value
+              label = props.options[index - 1].label
+            } else if (index === 0 && props.options.length === 1) {
+              myActiveKey.value = props.options[0].value
+              label = props.options[0].label
+            } else {
+              myActiveKey.value = props.options[index + 1].value
+              label = props.options[index + 1].label
+            }
+
+            emit('delete', record.value, index)
+            emit('change', myActiveKey.value, label)
+          }
+        })
+      }
+    }
+
+    const popContainer = (e) => {
+      return tableWrapperRef.value || e
+    }
+
+    const modalContainer = () => {
+      if (isFullScreen()) {
+        return tableWrapperRef.value || document.body
+      }
+      return document.body
+    }
+
+    onMounted(() => {
+      myActiveKey.value = _optionalChain([props, 'access', _2 => _2.options, 'access', _3 => _3[0], 'optionalAccess', _4 => _4.value])
+      emit('change', myActiveKey.value, _optionalChain([props, 'access', _5 => _5.options, 'access', _6 => _6[0], 'optionalAccess', _7 => _7.label]))
+      emit('update:activeKey', myActiveKey.value)
+    })
+
+    watch(
+      () => props.activeKey,
+      (val) => {
+        myActiveKey.value = val
+      }
+    )
+
+    return {
+      hashId,
+      contextLocale,
+      myActiveKey,
+      visible,
+      errorMap,
+      tableWrapperRef,
+      formRef,
+      formData,
+      onAdd,
+      onCancel,
+      onOk,
+      change,
+      menuClick,
+      popContainer,
+      modalContainer
+    }
+  }
+})

package/lib/EditTable/Header.js

@@ -0,0 +1,63 @@
+
+import { defineComponent, reactive, computed } from 'vue'
+import { SearchModal, Sort } from './components/Search'
+import { useHScroll, useTableTool } from './hooks'
+import HeaderItemRender from './HeaderRender.js'
+import useEditTableStyle from './style'
+import AIcon from '../Icon'
+
+export default defineComponent({
+  name: 'JEditTableHeader',
+  components: {
+    SearchModal,
+    Sort,
+    HeaderItemRender,
+    AIcon
+  },
+  props: {
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    searchColumns: {
+      type: Array,
+      default: undefined
+    },
+    serial: {
+      type: Boolean,
+      default: false
+    },
+    style: {
+      type: Object,
+      default: undefined
+    }
+  },
+  setup(props) {
+    const prefixCls = computed(() => 'jetlinks-edit-table')
+    const [wrapSSR, hashId] = useEditTableStyle(prefixCls)
+    const tableTool = useTableTool()
+    const hScroll = useHScroll()
+
+    const searchData = reactive({
+      visible: false,
+      key: undefined
+    })
+
+    const showFilter = (key) => {
+      searchData.visible = true
+      searchData.key = key
+    }
+
+    const sortClick = () => {
+      searchData.visible = false
+    }
+
+    return {
+      hashId,
+      tableTool,
+      searchData,
+      showFilter,
+      sortClick
+    }
+  }
+})

package/lib/EditTable/HeaderRender.js

@@ -0,0 +1,12 @@
+
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'HeaderItemRender',
+  props: ['renderFn', 'value'],
+  setup(props) {
+    return () => {
+      return props.renderFn(props.value)
+    }
+  }
+})

package/lib/EditTable/components/ContextMenu/Menu.js

@@ -0,0 +1,86 @@
+ 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 { defineComponent, ref, computed, onMounted, nextTick } from 'vue'
+import { Menu } from 'ant-design-vue'
+import AIcon from '../../../Icon'
+import { useLocaleReceiver } from '../../../LocaleReciver'
+import useEditTableStyle from '../../style'
+
+const MenuItem = Menu.Item
+
+export default defineComponent({
+  name: 'JEditTableContextMenu',
+  components: {
+    Menu,
+    MenuItem,
+    AIcon
+  },
+  props: {
+    data: {
+      type: Object,
+      default: () => ({})
+    },
+    onClose: {
+      type: Function,
+      default: () => {}
+    },
+    onClick: {
+      type: Function,
+      default: () => {}
+    },
+    onCopy: {
+      type: Function,
+      default: () => {}
+    },
+    paste: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props) {
+    const contextMenu = ref(null)
+    const prefixCls = computed(() => 'jetlinks-edit-table')
+    const [wrapSSR, hashId] = useEditTableStyle(prefixCls)
+    const [contextLocale] = useLocaleReceiver('EditTable')
+
+    const showDetail = computed(() => {
+      return !props.data.id
+    })
+
+    const showPaste = computed(() => {
+      return !props.paste
+    })
+
+    const showDelete = computed(() => {
+      return _optionalChain([props, 'access', _ => _.data, 'optionalAccess', _2 => _2.expands, 'optionalAccess', _3 => _3.isProduct])
+    })
+
+    const clickFunc = ({ key }) => {
+      if (key === 'copy') {
+        props.onCopy(props.data)
+      }
+      props.onClick(key)
+    }
+
+    const close = () => {
+      setTimeout(() => {
+        props.onClose()
+      }, 300)
+    }
+
+    onMounted(async () => {
+      await nextTick()
+      contextMenu.value.focus()
+    })
+
+    return {
+      contextMenu,
+      hashId,
+      contextLocale,
+      showDetail,
+      showPaste,
+      showDelete,
+      clickFunc,
+      close
+    }
+  }
+})

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

@@ -0,0 +1,96 @@
+import MenuContext from './Menu.js'
+import { h, render } from 'vue'
+import { handlePureRecord } from '../../utils'
+import { omit } from 'lodash-es'
+
+let curInstance = null
+let seed = 1
+let copyValue
+
+
+
+
+
+
+
+
+
+
+
+
+const contextMenu = (e, data, context) => {
+  if (curInstance) {
+    curInstance.destroy()
+  }
+  curInstance = null
+
+  const id = seed++
+  // 创建一个临时的div，用于挂载我们的菜单
+  const container = document.createElement('div')
+  // 获取body标签，用于挂载整个菜单
+  const appendTo = context.getPopupContainer() || document.body
+
+  // 传给menu组件的props
+  const props = {
+    data,
+    onClose: () => {
+      if (curInstance) {
+        curInstance.destroy()
+      }
+    },
+    onClick: (type) => {
+      let copyRecord = handlePureRecord(copyValue)
+      if (copyRecord.expands) {
+        copyRecord.expands = omit(copyRecord.expands, ['isProduct'])
+      }
+      context.click(type, data, handlePureRecord(copyRecord))
+    },
+    onCopy: (data) => {
+      copyValue = data
+      context.click('copy', data)
+    },
+    paste: !!copyValue
+  }
+
+  // 渲染虚拟节点
+  const vnode = h(MenuContext, props)
+  // vnode为需要渲染的虚拟节点，container为渲染的容器
+  render(vnode, container)
+  // 首先需要先把菜单真正渲染到页面，才能拿到它的宽度和高度
+  appendTo.appendChild(container.firstElementChild)
+
+  // 当前真正的菜单节点
+  const curMenu = vnode.el 
+  // 获取curMenu的高度和宽度，用于临界的计算
+  const { offsetWidth, offsetHeight } = curMenu
+  // 获取body的可视区域的宽度
+  const { clientWidth } = appendTo
+  // 取出右键点击时的坐标
+  const { clientX, clientY } = e
+
+  // 计算菜单位置
+  const leftOrRight = clientWidth - clientX > offsetWidth ? 'left' : 'right'
+  const topOrBottom = window.innerHeight - clientY > offsetHeight ? 'top' : 'bottom'
+
+  const offsetLeft = Math.abs(clientWidth - clientX)
+  // 设置left或者right的style
+  curMenu.style[leftOrRight] = leftOrRight === 'left' ? `${clientX + 20}px` : `${offsetLeft}px`
+  // 设置top或者bottom的style
+  curMenu.style[topOrBottom] = topOrBottom === 'bottom' ? '2px' : `${clientY}px`
+
+  const instance = {
+    id,
+    destroy: () => {
+      curInstance = null
+      render(null, container)
+    },
+    cleanCopy: () => {
+      copyValue = null
+    }
+  }
+
+  curInstance = instance
+  return instance
+}
+
+export default contextMenu

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

@@ -0,0 +1,163 @@
+ 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 { defineComponent, ref, computed } from 'vue'
+import { Space as ASpace, Input as AInput, Button as AButton } from 'ant-design-vue'
+import EditTable from '../../EditTable.js'
+import DragModal from '../../../DragModal/DragModal.js'
+import Ellipsis from '../../../Ellipsis/Ellipsis.js'
+import { useTableDataSource, useTableOpenGroup, useTableTool, useGroupOptions } from '../../context'
+import { useLocaleReceiver } from '../../../LocaleReciver'
+import { isNumber, isArray, isObject, isBoolean } from 'lodash-es'
+
+export default defineComponent({
+  name: 'JEditTableSearch',
+  components: {
+    ASpace,
+    AInput,
+    AButton,
+    EditTable,
+    DragModal,
+    Ellipsis
+  },
+  props: {
+    searchKey: {
+      type: String,
+      default: 'id'
+    },
+    columns: {
+      type: Array,
+      default: undefined
+    }
+  },
+  emits: ['close'],
+  setup(props, { emit }) {
+    const [contextLocale] = useLocaleReceiver('EditTable')
+    const dataSource = useTableDataSource()
+    const openGroup = useTableOpenGroup()
+    const tableTool = useTableTool()
+    const groupOptions = useGroupOptions()
+
+    const searchValue = ref()
+    const filterArray = ref([])
+    const visible = ref(false)
+    const searchIndex = ref(-1)
+    const modalHeight = ref(100)
+    const tableHeight = ref(230)
+    const selectedRowKeys = ref([])
+    const tableRef = ref()
+
+    const myColumns = computed(() => {
+      if (props.columns) {
+        return (props.columns ).map((item) => ({
+          title: item.title,
+          dataIndex: item.dataIndex
+        }))
+      }
+      return [
+        { title: contextLocale.value.columns.sign, dataIndex: 'id' },
+        { title: contextLocale.value.columns.name, dataIndex: 'name' }
+      ]
+    })
+
+    const selectedTableRow = (record) => {
+      tableTool.scrollTo({
+        ...record,
+        __serial: record.__oldSerial - 1
+      })
+      tableTool.selected([record.id])
+    }
+
+    const handleFilterArray = () => {
+      const cloneDataSource = JSON.parse(JSON.stringify(dataSource.value || '[]')).map(
+        (item) => Object.assign(item, { __oldSerial: item.__serial })
+      )
+      const _filterArray = cloneDataSource.filter((item) => {
+        let targetValue = item[props.searchKey]
+        if (targetValue) {
+          if (isNumber(targetValue) || isBoolean(targetValue)) {
+            targetValue = String(targetValue)
+          } else if (isArray(targetValue) || isObject(targetValue)) {
+            targetValue = JSON.stringify(targetValue)
+          }
+          return targetValue.includes(searchValue.value)
+        }
+        return false
+      })
+
+      if (openGroup) {
+        const handleGroup = []
+        groupOptions.value.forEach((group) => {
+          handleGroup.push(
+            ..._filterArray.filter((item) => item.expands.groupId === group.value)
+          )
+        })
+        return handleGroup
+      }
+      return _filterArray
+    }
+
+    const search = (key) => {
+      filterArray.value = handleFilterArray()
+      if (key === 'all') {
+        visible.value = true
+        modalHeight.value = 400
+        searchIndex.value = 0
+      } else if (key === 'next') {
+        searchIndex.value += 1
+      } else {
+        searchIndex.value -= 1
+      }
+
+      if (searchIndex.value < 0) {
+        searchIndex.value = filterArray.value.length - 1
+      } else if (searchIndex.value > filterArray.value.length - 1) {
+        searchIndex.value = 0
+      }
+
+      const searchItem = filterArray.value[searchIndex.value]
+      if (key !== 'all' && visible.value) {
+        _optionalChain([tableRef, 'access', _ => _.value, 'optionalAccess', _2 => _2.scrollToByIndex, 'call', _3 => _3(searchIndex.value - 1)])
+      }
+
+      if (filterArray.value.length >= 1) {
+        selectedRowKeys.value = [searchItem.id]
+        selectedTableRow(searchItem)
+      } else {
+        selectedRowKeys.value = []
+        tableTool.selected([])
+      }
+    }
+
+    const heightChange = (h) => {
+      if (h > 340) {
+        tableHeight.value = h - 160
+      }
+    }
+
+    const onClose = () => {
+      emit('close')
+    }
+
+    const onSelect = (record) => {
+      searchIndex.value = filterArray.value.findIndex((item) => item.id === record.id)
+      selectedRowKeys.value = [record.id]
+      selectedTableRow(record)
+    }
+
+    return {
+      contextLocale,
+      openGroup,
+      searchValue,
+      filterArray,
+      visible,
+      modalHeight,
+      tableHeight,
+      selectedRowKeys,
+      tableRef,
+      myColumns,
+      search,
+      heightChange,
+      onClose,
+      onSelect
+    }
+  }
+})