@meethive/components 0.0.1

package/lib/DragModal/DragModal.js

@@ -0,0 +1,212 @@
+ 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, useSlots, computed, onMounted, watch } from 'vue'
+import { Button } from 'ant-design-vue'
+import { useLocaleReceiver } from '../LocaleReciver/index'
+import genDragModalStyle from './style'
+
+export default defineComponent({
+  name: 'JDragModal',
+  components: { Button },
+  props: {
+    title: {
+      type: [String, Boolean],
+      default: ''
+    },
+    width: {
+      type: Number,
+      default: 400
+    },
+    height: {
+      type: Number,
+      default: 100
+    },
+    dragRang: {
+      type: [Array, Number],
+      default: [400, 200]
+    },
+    bodyStyle: {
+      type: Object,
+      default: () => ({})
+    },
+    footer: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ['cancel', 'heightChange', 'ok', 'visibleChange'],
+  setup(props, { emit }) {
+    const slots = useSlots()
+    const [contextLocale] = useLocaleReceiver('DragModal')
+    const ele = document.body
+
+    const dialog = ref()
+    const header = ref()
+    const baseWidth = ref(props.width || 400)
+    const baseHeight = ref(props.height || 100)
+    const baseLeft = ref(100)
+    const baseTop = ref(100)
+
+    const prefixCls = computed(() => 'jetlinks-drag-modal')
+    const [wrapSSR, hashId] = genDragModalStyle(prefixCls)
+
+    const styles = computed(() => {
+      return {
+        top: getFixed(baseTop.value) + 'px',
+        left: getFixed(baseLeft.value) + 'px',
+        width: getFixed(baseWidth.value) + 'px',
+        height: getFixed(baseHeight.value) + 'px'
+      }
+    })
+
+    const getFixed = (val) => {
+      return Number(val.toFixed(2))
+    }
+
+    const onDrag = () => {
+      let active = false
+      let initialX
+      let initialY
+      let initialWindowX
+      let initialWindowY
+
+      header.value.addEventListener('mousedown', (e) => {
+        active = true
+        initialX = e.clientX
+        initialY = e.clientY
+        initialWindowX = dialog.value.offsetLeft
+        initialWindowY = dialog.value.offsetTop
+      })
+
+      document.addEventListener('mouseup', () => {
+        active = false
+      })
+
+      document.addEventListener('mousemove', (e) => {
+        if (active) {
+          const dx = e.clientX - initialX
+          const dy = e.clientY - initialY
+          baseLeft.value = initialWindowX + dx
+          baseTop.value = initialWindowY + dy
+        }
+      })
+    }
+
+    const handleClear = () => {
+      document.onmouseup = () => {
+        document.onmousemove = null
+        document.onmouseup = null
+      }
+    }
+
+    const rangeMove = (e, position) => {
+      //移动的方向
+      let x = false
+      let y = false
+      //移动的位置
+      let xp = false
+      let yp = false
+      //移动的正负
+      let xc = false
+      let yc = false
+
+      let disX = e.clientX
+      let disY = e.clientY
+
+      document.onmousemove = (e) => {
+        if (position === 'drag-bottom-right') {
+          x = true
+          y = true
+        } else if (position === 'drag-bottom-left') {
+          x = true
+          y = true
+          xp = true
+          xc = true
+        } else if (position === 'drag-top-right') {
+          x = true
+          y = true
+          yp = true
+          yc = true
+        } else if (position === 'drag-top-left') {
+          x = true
+          y = true
+          xp = true
+          xc = true
+          yp = true
+          yc = true
+        }
+
+        let left = e.clientX - disX
+        let top = e.clientY - disY
+        disX = e.clientX
+        disY = e.clientY
+
+        if (x) {
+          let calc = left
+          if (xc) {
+            calc = -calc
+          }
+          if (xp) {
+            baseLeft.value = baseLeft.value - calc
+          }
+          const width = baseWidth.value + calc
+          baseWidth.value = width <= (props.dragRang )[0] ? (props.dragRang )[0] : width
+        }
+
+        if (y) {
+          let calc = top
+          if (yc) {
+            calc = -calc
+          }
+          if (yp) {
+            baseTop.value = baseTop.value - calc
+          }
+          const height = baseHeight.value + calc
+          baseHeight.value = height <= (props.dragRang )[1] ? (props.dragRang )[1] : height
+          emit('heightChange', baseHeight.value)
+        }
+      }
+      handleClear()
+    }
+
+    const onCancel = () => {
+      emit('cancel')
+      emit('visibleChange', false)
+    }
+
+    const onOk = () => {
+      emit('ok')
+      emit('visibleChange', true)
+    }
+
+    onMounted(() => {
+      if (dialog.value && header.value) {
+        onDrag()
+      }
+      if (ele) {
+        const data = _optionalChain([ele, 'optionalAccess', _ => _.getBoundingClientRect, 'call', _2 => _2()])
+        baseLeft.value = (_optionalChain([data, 'optionalAccess', _3 => _3.right]) - baseWidth.value) / 2 || 0
+        baseTop.value = _optionalChain([data, 'optionalAccess', _4 => _4.top]) + 200 || 0
+      }
+    })
+
+    watch(
+      () => props.height,
+      () => {
+        if (props.height > baseHeight.value) {
+          baseHeight.value = props.height
+        }
+      }
+    )
+
+    return {
+      dialog,
+      header,
+      styles,
+      hashId,
+      contextLocale,
+      rangeMove,
+      onCancel,
+      onOk
+    }
+  }
+})

package/lib/DragModal/index.js

@@ -0,0 +1,7 @@
+import DragModal from './DragModal.js'
+
+DragModal.install = function (app) {
+  app.component(DragModal.name, DragModal)
+}
+
+export default DragModal

package/lib/DragModal/style/index.js

@@ -0,0 +1,86 @@
+import genComponentStyle from '../../style/styleRegister'
+
+const genDragModalStyle = (config) => {
+  const { componentCls, token } = config
+
+  return {
+    [componentCls]: {
+      position: 'fixed',
+      zIndex: 1000,
+
+      [`${componentCls}-sprite`]: {
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+        zIndex: 23456765435,
+        backgroundColor: '#ffffff',
+        borderRadius: 4,
+        border: '1px solid #91CAFF',
+        boxShadow: '0 3px 8px 0 rgba(22, 119, 255, 0.24)',
+
+        '.header': {
+          padding: '5px 15px',
+          fontSize: 18,
+          fontWeight: 700,
+          color: '#333',
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          borderBottom: '1px solid #f0f0f0',
+          cursor: 'move'
+        },
+
+        [`${componentCls}-body`]: {
+          flex: 1,
+          minHeight: 0,
+          overflowY: 'auto',
+          padding: '24px 20px'
+        },
+
+        [`${componentCls}-footer`]: {
+          borderTop: '1px solid #f0f0f0',
+          padding: '5px 15px'
+        }
+      },
+
+      [`${componentCls}-range`]: {
+        position: 'absolute',
+        width: '16px',
+        height: '16px',
+        borderRadius: '100%',
+        zIndex: 23456765436,
+
+        '&.drag-bottom-right': {
+          bottom: '-6px',
+          right: '-6px',
+          '&:hover': {
+            cursor: 'nwse-resize'
+          }
+        },
+
+        '&.drag-bottom-left': {
+          bottom: '-6px',
+          left: '-6px',
+          '&:hover': {
+            cursor: 'nesw-resize'
+          }
+        },
+
+        '&.drag-top-right': {
+          top: '-6px',
+          right: '-6px'
+        },
+
+        '&.drag-top-left': {
+          top: '-6px',
+          left: '-6px'
+        }
+      }
+    }
+  }
+}
+
+export default genComponentStyle([genDragModalStyle])

package/lib/EditTable/Body.js

@@ -0,0 +1,189 @@
+ 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, onBeforeUnmount, nextTick } from 'vue'
+import ContextMenu from './components/ContextMenu'
+import { useHScroll, useRightMenuContext } from './hooks'
+import { randomString } from '@meethive/utils'
+import { bodyProps } from './props'
+import Empty from '../Empty/Empty.js'
+import CellRender from './CellRender.js'
+import genEditTableStyle from './style'
+
+export default defineComponent({
+  name: 'JEditTableBody',
+  components: {
+    Empty,
+    CellRender
+  },
+  props: {
+    ...bodyProps(),
+    groupKey: {
+      type: [String, Number],
+      default: undefined
+    },
+    width: {
+      type: Number
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    }
+  } ,
+  emits: ['update:dataSource', 'scrollDown'],
+  setup(props, { emit, expose }) {
+    const prefixCls = computed(() => 'jetlinks-edit-table')
+    const [wrapSSR, hashId] = genEditTableStyle(prefixCls)
+
+    const viewScrollRef = ref()
+    const tableCenterRef = ref()
+    const virtualRang = reactive({
+      start: 0,
+      end: 15
+    })
+    const containerStyle = ref(0)
+    const context = useRightMenuContext()
+    const hScroll = useHScroll()
+
+    let scrollLock = ref(false)
+    let menuInstance
+
+    const maxLen = computed(() => {
+      return Math.trunc(props.height / props.cellHeight)
+    })
+
+    const selectedRowKeys = ref([])
+
+    const virtualData = computed(() => {
+      return props.dataSource.slice(virtualRang.start, virtualRang.end)
+    })
+
+    const onScroll = () => {
+      if (!viewScrollRef.value) return
+      const height = viewScrollRef.value.scrollTop
+      const clientHeight = viewScrollRef.value.clientHeight
+
+      const _index = Math.round(height / props.cellHeight) - 1
+      const start = _index < 0 ? 0 : _index
+      const end = start + maxLen.value + 4
+
+      if (
+        height + clientHeight >= props.dataSource.length * props.cellHeight &&
+        !scrollLock.value
+      ) {
+        emit('scrollDown')
+        scrollLock.value = true
+      }
+
+      virtualRang.start = start
+      virtualRang.end = end
+    }
+
+    const scrollTo = (index) => {
+      if (viewScrollRef.value) {
+        viewScrollRef.value.scrollTop = index * props.cellHeight
+      }
+    }
+
+    const showContextMenu = (e, record, _index) => {
+      e.preventDefault()
+      if (props.disableMenu) {
+        const newRecord = {
+          ...record,
+          __index: _index
+        }
+        menuInstance = ContextMenu(e, newRecord, context)
+      }
+    }
+
+    const rowClick = (record) => {
+      if (_optionalChain([props, 'access', _ => _.rowSelection, 'optionalAccess', _2 => _2.selectedRowKeys])) {
+        const rowSet = new Set(selectedRowKeys.value)
+        const key = record[props.rowKey]
+        const selected = !rowSet.has(key)
+        if (selected) {
+          rowSet.delete(key)
+        } else {
+          rowSet.add(key)
+        }
+        _optionalChain([props, 'access', _3 => _3.rowSelection, 'access', _4 => _4.onSelect, 'optionalCall', _5 => _5(record, selected)])
+        selectedRowKeys.value = [...rowSet.values()]
+      }
+    }
+
+    const updateSelectedKeys = (keys) => {
+      selectedRowKeys.value = keys
+    }
+
+    onMounted(() => {
+      nextTick(() => {
+        onScroll()
+      })
+    })
+
+    onBeforeUnmount(() => {
+      _optionalChain([menuInstance, 'optionalAccess', _6 => _6.destroy, 'optionalCall', _7 => _7()])
+      _optionalChain([menuInstance, 'optionalAccess', _8 => _8.cleanCopy, 'optionalCall', _9 => _9()])
+    })
+
+    watch(
+      () => JSON.stringify(_optionalChain([props, 'access', _10 => _10.rowSelection, 'optionalAccess', _11 => _11.selectedRowKeys])),
+      (val) => {
+        selectedRowKeys.value = JSON.parse(val || '[]')
+      },
+      { immediate: true }
+    )
+
+    watch(
+      () => props.dataSource,
+      () => {
+        props.dataSource.forEach((item) => {
+          if (!item.__key) {
+            item.__key = randomString()
+          }
+        })
+      },
+      { immediate: true, deep: true }
+    )
+
+    watch(
+      () => props.dataSource.length,
+      () => {
+        scrollLock.value = false
+        containerStyle.value = {
+          height: props.dataSource.length * props.cellHeight + 'px'
+        }
+        if (props.dataSource.length <= maxLen.value || props.dataSource.length === 0) {
+          emit('scrollDown', maxLen.value - props.dataSource.length + 3)
+        }
+      },
+      { immediate: true }
+    )
+
+    watch(
+      () => props.groupKey,
+      () => {
+        if (props.openGroup) {
+          scrollTo(0)
+        }
+      }
+    )
+
+    expose({
+      scrollTo,
+      updateSelectedKeys
+    })
+
+    return {
+      hashId,
+      viewScrollRef,
+      tableCenterRef,
+      virtualRang,
+      containerStyle,
+      hScroll,
+      selectedRowKeys,
+      virtualData,
+      onScroll,
+      showContextMenu,
+      rowClick
+    }
+  }
+})

package/lib/EditTable/CellRender.js

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