@meethive/components 0.0.1

package/lib/RadioButton/RadioButton.js

@@ -0,0 +1,53 @@
+
+import { defineComponent, ref, computed, watch } from 'vue'
+import useRadioButtonStyle from './style'
+
+export default defineComponent({
+  name: 'JRadioButton',
+  props: {
+    value: {
+      type: [String, Number],
+      default: undefined
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    columns: {
+      type: Number,
+      default: 3
+    }
+  },
+  emits: ['update:value'],
+  setup(props, { emit }) {
+    const prefixCls = computed(() => 'j-radio-button')
+    const [wrapSSR, hashId] = useRadioButtonStyle(prefixCls)
+
+    const myValue = ref(props.value)
+
+    const styles = computed(() => {
+      return {
+        'grid-template-columns': `repeat(${props.columns}, 1fr)`
+      }
+    })
+
+    const onClick = (record) => {
+      if (myValue.value !== record.value) {
+        myValue.value = record.value
+        emit('update:value', record.value)
+        emit('select', record.value)
+      }
+    }
+
+    watch(() => props.value, () => {
+      myValue.value = props.value
+    })
+
+    return {
+      hashId,
+      myValue,
+      styles,
+      onClick
+    }
+  }
+})

package/lib/RadioButton/index.js

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

package/lib/RadioButton/style/index.js

@@ -0,0 +1,25 @@
+import genComponentStyle from '../../style/styleRegister'
+
+const genRadioButtonStyle = (config) => {
+  const { token } = config
+  return {
+    '.j-radio-button': {
+      display: 'grid',
+      gap: '16px',
+      '.j-radio-button-item': {
+        padding: '6px 12px',
+        textAlign: 'center',
+        height: '100%',
+        borderRadius: '2px',
+        backgroundColor: '#f5f5f5',
+        cursor: 'pointer',
+        '&.active': {
+          color: '#fff',
+          backgroundColor: token.colorPrimary
+        }
+      }
+    }
+  }
+}
+
+export default genComponentStyle([genRadioButtonStyle])

package/lib/Scrollbar/Bar.js

@@ -0,0 +1,76 @@
+ 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, inject, ref } from 'vue'
+import { GAP } from './util'
+import Thumb from './Thumb.js'
+import { scrollbarContextKey } from './constants'
+
+export default defineComponent({
+  name: 'ScrollbarBar',
+  components: { Thumb },
+  props: {
+    always: {
+      type: Boolean,
+      default: true
+    },
+    minSize: {
+      type: Number,
+      required: true
+    }
+  },
+  setup(props, { expose }) {
+    const scrollbar = inject(scrollbarContextKey) 
+
+    const moveX = ref(0)
+    const moveY = ref(0)
+    const sizeWidth = ref('')
+    const sizeHeight = ref('')
+    const ratioY = ref(1)
+    const ratioX = ref(1)
+
+    const handleScroll = (wrap) => {
+      if (wrap) {
+        const offsetHeight = wrap.offsetHeight - GAP
+        const offsetWidth = wrap.offsetWidth - GAP
+
+        moveY.value = ((wrap.scrollTop * 100) / offsetHeight) * ratioY.value
+        moveX.value = ((wrap.scrollLeft * 100) / offsetWidth) * ratioX.value
+      }
+    }
+
+    const update = () => {
+      const wrap = _optionalChain([scrollbar, 'optionalAccess', _ => _.wrapElement])
+      if (!wrap) return
+
+      const offsetHeight = wrap.offsetHeight - GAP
+      const offsetWidth = wrap.offsetWidth - GAP
+
+      const originalHeight = offsetHeight ** 2 / wrap.scrollHeight
+      const originalWidth = offsetWidth ** 2 / wrap.scrollWidth
+
+      const height = Math.max(originalHeight, props.minSize)
+      const width = Math.max(originalWidth, props.minSize)
+
+      ratioY.value =
+        originalHeight / (offsetHeight - originalHeight) / (height / (offsetHeight - height))
+      ratioX.value =
+        originalWidth / (offsetWidth - originalWidth) / (width / (offsetWidth - width))
+
+      sizeHeight.value = height + GAP < offsetHeight ? `${height}px` : ''
+      sizeWidth.value = width + GAP < offsetWidth ? `${width}px` : ''
+    }
+
+    expose({
+      handleScroll,
+      update
+    })
+
+    return {
+      moveX,
+      moveY,
+      sizeWidth,
+      sizeHeight,
+      ratioY,
+      ratioX
+    }
+  }
+})

package/lib/Scrollbar/Scrollbar.js

@@ -0,0 +1,161 @@
+ 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,
+  computed,
+  nextTick,
+  onMounted,
+  onUpdated,
+  provide,
+  reactive,
+  ref,
+  watch
+} from 'vue'
+import { useEventListener, useResizeObserver } from '@vueuse/core'
+import { isNumber, isObject } from '@meethive/utils'
+import Bar from './Bar.js'
+import { scrollbarContextKey } from './constants'
+import { scrollbarEmits, scrollbarProps } from './scrollbarProps'
+import useScrollbarStyle from './style'
+
+const COMPONENT_NAME = 'JScrollbar'
+
+export default defineComponent({
+  name: COMPONENT_NAME,
+  components: { Bar },
+  props: scrollbarProps,
+  emits: scrollbarEmits,
+  setup(props, { expose, emit }) {
+    const prefixCls = computed(() => 'j-scrollbar')
+    const [wrapSSR, hashId] = useScrollbarStyle(prefixCls)
+
+    let stopResizeObserver = undefined
+    let stopResizeListener = undefined
+
+    const scrollbarRef = ref()
+    const wrapRef = ref()
+    const resizeRef = ref()
+    const barRef = ref()
+
+    const wrapStyle = computed(() => {
+      const style = {}
+      if (props.height) style.height = `${props.height}px`
+      if (props.maxHeight) style.maxHeight = `${props.maxHeight}px`
+      return [props.wrapStyle, style]
+    })
+
+    const wrapKls = computed(() => {
+      return ['j-scrollbar__wrap', 'j-scrollbar__wrap--hidden-default']
+    })
+
+    const resizeKls = computed(() => {
+      return ['j-scrollbar__view', props.viewClass]
+    })
+
+    const handleScroll = () => {
+      if (wrapRef.value) {
+        _optionalChain([barRef, 'access', _ => _.value, 'optionalAccess', _2 => _2.handleScroll, 'call', _3 => _3(wrapRef.value)])
+        emit('scroll', {
+          scrollTop: wrapRef.value.scrollTop,
+          scrollLeft: wrapRef.value.scrollLeft
+        })
+      }
+    }
+
+    function scrollTo(arg1, arg2) {
+      if (isObject(arg1)) {
+        wrapRef.value.scrollTo(arg1 )
+      } else if (isNumber(arg1) && isNumber(arg2)) {
+        wrapRef.value.scrollTo(arg1, arg2)
+      }
+    }
+
+    const setScrollTop = (value) => {
+      if (!isNumber(value)) {
+        throw new Error('value must be a number')
+      }
+      wrapRef.value.scrollTop = value
+    }
+
+    const setScrollLeft = (value) => {
+      if (!isNumber(value)) {
+        throw new Error(`[${COMPONENT_NAME}] value must be a number`)
+      }
+      wrapRef.value.scrollLeft = value
+    }
+
+    const update = () => {
+      _optionalChain([barRef, 'access', _4 => _4.value, 'optionalAccess', _5 => _5.update, 'call', _6 => _6()])
+    }
+
+    watch(
+      () => props.noresize,
+      (noResize) => {
+        if (noResize) {
+          _optionalChain([stopResizeObserver, 'optionalCall', _7 => _7()])
+          _optionalChain([stopResizeListener, 'optionalCall', _8 => _8()])
+        } else {
+          ;({ stop: stopResizeObserver } = useResizeObserver(resizeRef, update))
+          stopResizeListener = useEventListener('resize', update)
+        }
+      },
+      { immediate: true }
+    )
+
+    watch(
+      () => [props.maxHeight, props.height],
+      () => {
+        if (!props.native)
+          nextTick(() => {
+            update()
+            if (wrapRef.value) {
+              _optionalChain([barRef, 'access', _9 => _9.value, 'optionalAccess', _10 => _10.handleScroll, 'call', _11 => _11(wrapRef.value)])
+            }
+          })
+      }
+    )
+
+    provide(
+      scrollbarContextKey,
+      reactive({
+        scrollbarElement: scrollbarRef,
+        wrapElement: wrapRef
+      })
+    )
+
+    onMounted(() => {
+      if (!props.native)
+        nextTick(() => {
+          update()
+        })
+    })
+
+    onUpdated(() => update())
+
+    expose({
+      /** @description scrollbar wrap ref */
+      wrapRef,
+      /** @description update scrollbar state manually */
+      update,
+      /** @description scrolls to a particular set of coordinates */
+      scrollTo,
+      /** @description set distance to scroll top */
+      setScrollTop,
+      /** @description set distance to scroll left */
+      setScrollLeft,
+      /** @description handle scroll event */
+      handleScroll
+    })
+
+    return {
+      hashId,
+      scrollbarRef,
+      wrapRef,
+      resizeRef,
+      barRef,
+      wrapStyle,
+      wrapKls,
+      resizeKls,
+      handleScroll
+    }
+  }
+})

package/lib/Scrollbar/Thumb.js

@@ -0,0 +1,150 @@
+ 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, computed, inject, onBeforeUnmount, ref, toRef } from 'vue'
+import { useEventListener } from '@vueuse/core'
+import { isClient } from '@meethive/utils'
+import { scrollbarContextKey } from './constants'
+import { BAR_MAP, renderThumbStyle } from './util'
+import { thumbProps } from './thumbProps'
+import useScrollbarStyle from './style'
+
+export default defineComponent({
+  name: 'ScrollbarThumb',
+  props: thumbProps,
+  setup(props) {
+    const scrollbar = inject(scrollbarContextKey) 
+    if (!scrollbar) throw new Error('can not inject scrollbar context')
+
+    const instance = ref()
+    const thumb = ref()
+    const thumbState = ref({})
+    const visible = ref(false)
+
+    const prefixCls = computed(() => 'j-scrollbar')
+    const [wrapSSR, hashId] = useScrollbarStyle(prefixCls)
+
+    let cursorDown = false
+    let cursorLeave = false
+    let originalOnSelectStart = isClient
+      ? document.onselectstart
+      : null
+
+    const bar = computed(() => BAR_MAP[props.vertical ? 'vertical' : 'horizontal'])
+
+    const thumbStyle = computed(() =>
+      renderThumbStyle({
+        size: props.size ,
+        move: props.move ,
+        bar: bar.value
+      })
+    )
+
+    const offsetRatio = computed(
+      () =>
+        _optionalChain([(instance.value ), 'optionalAccess', _ => _[bar.value.offset]]) ** 2 /
+        scrollbar.wrapElement[bar.value.scrollSize] /
+        props.ratio /
+        _optionalChain([(thumb.value ), 'optionalAccess', _2 => _2[bar.value.offset]])
+    )
+
+    const clickThumbHandler = (e) => {
+      // prevent click event of middle and right button
+      e.stopPropagation()
+      if (e.ctrlKey || [1, 2].includes(e.button)) return
+
+      _optionalChain([window, 'access', _3 => _3.getSelection, 'call', _4 => _4(), 'optionalAccess', _5 => _5.removeAllRanges, 'call', _6 => _6()])
+      startDrag(e)
+
+      const el = e.currentTarget 
+      if (!el) return
+
+      thumbState.value[bar.value.axis] =
+        (el )[bar.value.offset] -
+        (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction])
+    }
+
+    const clickTrackHandler = (e) => {
+      if (!thumb.value || !instance.value || !scrollbar.wrapElement) return
+
+      const offset = Math.abs(
+        (e.target ).getBoundingClientRect()[bar.value.direction] - e[bar.value.client]
+      )
+      const thumbHalf = (thumb.value )[bar.value.offset] / 2
+      const thumbPositionPercentage =
+        ((offset - thumbHalf) * 100 * offsetRatio.value) /
+        (instance.value )[bar.value.offset]
+
+      scrollbar.wrapElement[bar.value.scroll] =
+        (thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize]) / 100
+    }
+
+    const startDrag = (e) => {
+      e.stopImmediatePropagation()
+      cursorDown = true
+      document.addEventListener('mousemove', mouseMoveDocumentHandler)
+      document.addEventListener('mouseup', mouseUpDocumentHandler)
+      originalOnSelectStart = document.onselectstart
+      document.onselectstart = () => false
+    }
+
+    const mouseMoveDocumentHandler = (e) => {
+      if (!instance.value || !thumb.value) return
+      if (cursorDown === false) return
+
+      const prevPage = thumbState.value[bar.value.axis]
+      if (!prevPage) return
+
+      const offset =
+        (instance.value.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) * -1
+      const thumbClickPosition = (thumb.value )[bar.value.offset] - prevPage
+      const thumbPositionPercentage =
+        ((offset - thumbClickPosition) * 100 * offsetRatio.value) /
+        (instance.value )[bar.value.offset]
+
+      scrollbar.wrapElement[bar.value.scroll] =
+        (thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize]) / 100
+    }
+
+    const mouseUpDocumentHandler = () => {
+      cursorDown = false
+      thumbState.value[bar.value.axis] = 0
+      document.removeEventListener('mousemove', mouseMoveDocumentHandler)
+      document.removeEventListener('mouseup', mouseUpDocumentHandler)
+      restoreOnselectstart()
+      if (cursorLeave) visible.value = false
+    }
+
+    const mouseMoveScrollbarHandler = () => {
+      cursorLeave = false
+      visible.value = !!props.size
+    }
+
+    const mouseLeaveScrollbarHandler = () => {
+      cursorLeave = true
+      visible.value = cursorDown
+    }
+
+    onBeforeUnmount(() => {
+      restoreOnselectstart()
+      document.removeEventListener('mouseup', mouseUpDocumentHandler)
+    })
+
+    const restoreOnselectstart = () => {
+      if (document.onselectstart !== originalOnSelectStart)
+        document.onselectstart = originalOnSelectStart
+    }
+
+    useEventListener(toRef(scrollbar, 'scrollbarElement'), 'mousemove', mouseMoveScrollbarHandler)
+    useEventListener(toRef(scrollbar, 'scrollbarElement'), 'mouseleave', mouseLeaveScrollbarHandler)
+
+    return {
+      props,
+      instance,
+      thumb,
+      visible,
+      hashId,
+      thumbStyle,
+      clickThumbHandler,
+      clickTrackHandler
+    }
+  }
+})

package/lib/Scrollbar/constants.js

@@ -0,0 +1 @@
+export const scrollbarContextKey = Symbol('scrollbarContextKey')

package/lib/Scrollbar/index.js

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

package/lib/Scrollbar/scrollbarProps.js

@@ -0,0 +1,100 @@
+import { isNumber } from '@meethive/utils'
+
+export const scrollbarProps = {
+  /**
+   * @description height of scrollbar
+   */
+  height: {
+    type: [String, Number],
+    default: ''
+  },
+  /**
+   * @description max height of scrollbar
+   */
+  maxHeight: {
+    type: [String, Number],
+    default: ''
+  },
+  /**
+   * @description whether to use the native scrollbar
+   */
+  native: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * @description style of wrap
+   */
+  wrapStyle: {
+    type: [String, Object, Array],
+    default: ''
+  },
+  /**
+   * @description class of wrap
+   */
+  wrapClass: {
+    type: [String, Array],
+    default: ''
+  },
+  /**
+   * @description class of view
+   */
+  viewClass: {
+    type: [String, Array],
+    default: ''
+  },
+  /**
+   * @description style of view
+   */
+  viewStyle: {
+    type: [String, Array, Object],
+    default: ''
+  },
+  /**
+   * @description do not respond to container size changes, if the container size does not change, it is better to set it to optimize performance
+   */
+  noresize: Boolean,
+  /**
+   * @description element tag of the view
+   */
+  tag: {
+    type: String,
+    default: 'div'
+  },
+  /**
+   * @description always show
+   */
+  always: Boolean,
+  /**
+   * @description minimum size of scrollbar
+   */
+  minSize: {
+    type: Number,
+    default: 20
+  },
+  /**
+   * @description id of view
+   */
+  id: String,
+  /**
+   * @description role of view
+   */
+  role: String,
+  /**
+   * @description aria-label of view
+   */
+  ariaLabel: String,
+  /**
+   * @description aria-orientation of view
+   */
+  ariaOrientation: {
+    type: String,
+    values: ['horizontal', 'vertical']
+  }
+}
+
+export const scrollbarEmits = {
+  scroll: ({ scrollTop, scrollLeft }) => {
+    return [scrollTop, scrollLeft].every(isNumber)
+  }
+}

package/lib/Scrollbar/style/index.js

@@ -0,0 +1,85 @@
+import genComponentStyle from '../../style/styleRegister'
+
+const scrollbarBgColor = '#909399'
+const scrollbarHoverBgColor = '#909399'
+const scrollbarHoverOpacity = 0.5
+const scrollbarOpacity = 0.3
+const transitionDuration = '0.3s'
+
+const genScrollbarStyle = (config) => {
+  const { componentCls, token } = config
+
+  return {
+    [componentCls]: {
+      overflow: 'hidden',
+      position: 'relative',
+      height: '100%',
+
+      [`${componentCls}__wrap`]: {
+        overflow: 'auto',
+        height: '100%',
+
+        [`${componentCls}--hidden-default`]: {
+          scrollbarWidth: 'none',
+          '&::-webkit-scrollbar': {
+            display: 'none'
+          }
+        }
+      },
+
+      [`${componentCls}__thumb`]: {
+        position: 'relative',
+        display: 'block',
+        width: 0,
+        height: 0,
+        cursor: 'pointer',
+        borderRadius: 'inherit',
+        backgroundColor: scrollbarBgColor,
+        transition: `${transitionDuration} background-color`,
+        opacity: scrollbarOpacity,
+        '&:hover': {
+          backgroundColor: scrollbarHoverBgColor,
+          opacity: scrollbarOpacity
+        }
+      },
+
+      [`${componentCls}__bar`]: {
+        position: 'absolute',
+        right: '2px',
+        bottom: '2px',
+        zIndex: 1,
+        borderRadius: '4px',
+
+        '&.is-vertical': {
+          width: '6px',
+          top: '2px',
+          '> div': {
+            width: '100%'
+          }
+        },
+
+        '&.is-horizontal': {
+          height: '6px',
+          left: '2px',
+          '> div': {
+            height: '100%'
+          }
+        }
+      }
+    },
+
+    [`${componentCls}-fade`]: {
+      [`${componentCls}-fade-enter-active`]: {
+        transition: 'opacity 340ms ease-out'
+      },
+      [`${componentCls}-fade-leave-active`]: {
+        transition: 'opacity 120ms ease-out'
+      },
+      [`${componentCls}-fade-enter-from,${componentCls}-fade-leave-active`]: {
+        opacity: 0
+      }
+    }
+  }
+}
+
+export default genComponentStyle([genScrollbarStyle])

package/lib/Scrollbar/thumbProps.js

@@ -0,0 +1,10 @@
+export const thumbProps = {
+  vertical: Boolean,
+  size: String,
+  move: Number,
+  ratio: {
+    type: Number,
+    required: true
+  },
+  always: Boolean
+}