@gx-design-vue/create-gx-cli 0.0.3 → 0.0.5

package/template-design-pro/src/components/GDesign/Scrollbars/components/Bar/index.tsx

@@ -0,0 +1,56 @@
+import type { ExtractPropTypes } from 'vue'
+import { defineComponent, ref } from 'vue'
+import { barProps } from './props'
+import Thumb from '../Thumb'
+
+export type BarProps = ExtractPropTypes<typeof barProps>
+
+const Bar = defineComponent({
+  props: barProps,
+  setup(props) {
+    const moveX = ref(0)
+    const moveY = ref(0)
+    const GAP = 4
+
+    const handleScroll = (wrap: HTMLDivElement) => {
+      if (wrap) {
+        const offsetHeight = wrap.offsetHeight - GAP
+        const offsetWidth = wrap.offsetWidth - GAP
+
+        moveY.value = ((wrap.scrollTop * 100) / offsetHeight) * props.ratioY
+        moveX.value = ((wrap.scrollLeft * 100) / offsetWidth) * props.ratioX
+      }
+    }
+
+    return {
+      moveX,
+      moveY,
+      handleScroll
+    }
+  },
+  render() {
+    return (
+      <>
+        <Thumb
+          className={this.className}
+          move={this.moveX}
+          ratio={this.ratioX}
+          size={this.width}
+          always={this.always}
+        />
+        <Thumb
+          className={this.className}
+          move={this.moveY}
+          ratio={this.ratioY}
+          size={this.height}
+          vertical
+          always={this.always}
+        />
+      </>
+    )
+  }
+})
+
+Bar.inheritAttrs = false
+
+export default Bar

package/template-design-pro/src/components/GDesign/Scrollbars/components/Bar/props.ts

@@ -0,0 +1,23 @@
+export const barProps = {
+  className: String,
+  always: {
+    type: Boolean,
+    default: true,
+  },
+  width: {
+    type: String,
+    default: '',
+  },
+  height: {
+    type: String,
+    default: '',
+  },
+  ratioX: {
+    type: Number,
+    default: 1,
+  },
+  ratioY: {
+    type: Number,
+    default: 1,
+  },
+}

package/template-design-pro/src/components/GDesign/Scrollbars/components/Thumb/index.tsx

@@ -0,0 +1,164 @@
+import type { ExtractPropTypes } from 'vue'
+import { computed, defineComponent, inject, onBeforeUnmount, ref, toRef, Transition } from 'vue'
+import { isClient, useEventListener } from '@vueuse/core'
+import { thumbProps } from './props'
+import { scrollbarContextKey } from '../../context'
+import { BAR_MAP, renderThumbStyle } from '../../util'
+
+export type ThumbProps = ExtractPropTypes<typeof thumbProps>
+
+const COMPONENT_NAME = 'Thumb'
+const Thumb = defineComponent({
+  props: thumbProps,
+  setup(props) {
+    const scrollbar = inject(scrollbarContextKey)
+
+    if (!scrollbar) console.error(COMPONENT_NAME, 'can not inject scrollbar context')
+
+    const instance = ref()
+    const thumb = ref()
+
+    const thumbState = ref({})
+    const visible = ref(false)
+
+    let cursorDown = false
+    let cursorLeave = false
+    let originalOnSelectStart: ((this: GlobalEventHandlers, ev: Event) => any) | null = 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(
+      () =>
+        // offsetRatioX = original width of thumb / current width of thumb / ratioX
+        // offsetRatioY = original height of thumb / current height of thumb / ratioY
+        // instance height = wrap height - GAP
+        instance.value![bar.value.offset] ** 2 /
+        scrollbar.wrapElement![bar.value.scrollSize] /
+        props.ratio /
+        thumb.value![bar.value.offset]
+    )
+
+    const clickThumbHandler = (e: MouseEvent) => {
+      // prevent click event of middle and right button
+      e.stopPropagation()
+      if (e.ctrlKey || [1, 2].includes(e.button)) return
+
+      window.getSelection()?.removeAllRanges()
+      startDrag(e)
+
+      const el = e.currentTarget as HTMLDivElement
+      if (!el) return
+      thumbState.value[bar.value.axis] =
+        el[bar.value.offset] -
+        (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction])
+    }
+
+    const clickTrackHandler = (e: MouseEvent) => {
+      if (!thumb.value || !instance.value || !scrollbar.wrapElement) return
+
+      const offset = Math.abs(
+        (e.target as HTMLElement).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: MouseEvent) => {
+      e.stopImmediatePropagation()
+      cursorDown = true
+      document.addEventListener('mousemove', mouseMoveDocumentHandler)
+      document.addEventListener('mouseup', mouseUpDocumentHandler)
+      originalOnSelectStart = document.onselectstart
+      document.onselectstart = () => false
+    }
+
+    const mouseMoveDocumentHandler = (e: MouseEvent) => {
+      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 () => {
+      return (
+        <Transition name={`${props.className}-fade`}>
+          <div
+            ref={(e) => (instance.value = e)}
+            class={
+              props.always || visible.value
+                ? [`${props.className}-bar`, 'is-' + bar.value.key]
+                : [`${props.className}-bar`, 'is-' + bar.value.key, 'hidden']
+            }
+            onMousedown={clickTrackHandler}
+          >
+            <div
+              ref={(e) => (thumb.value = e)}
+              class={`${props.className}-thumb`}
+              style={thumbStyle.value}
+              onMousedown={clickThumbHandler}
+            />
+          </div>
+        </Transition>
+      )
+    }
+  }
+})
+
+Thumb.inheritAttrs = false
+
+export default Thumb

package/template-design-pro/src/components/GDesign/Scrollbars/components/Thumb/props.ts

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

package/template-design-pro/src/components/GDesign/Scrollbars/context.ts

@@ -0,0 +1,10 @@
+import type { InjectionKey } from 'vue'
+
+export interface scrollbarContext {
+  scrollbarElement: HTMLDivElement
+  wrapElement: HTMLDivElement
+}
+
+export const scrollbarContextKey: InjectionKey<scrollbarContext> = Symbol(
+  'scrollbarContextKey'
+)

package/template-design-pro/src/components/GDesign/Scrollbars/index.tsx

@@ -0,0 +1,200 @@
+import { ExtractPropTypes, StyleValue } from 'vue'
+import { defineComponent, watch, provide, onMounted, ref, computed } from 'vue'
+import { useEventListener, useResizeObserver } from '@vueuse/core'
+import { isNumber, isObject, getPrefixCls } from '@gx-design-vue/pro-utils'
+import { scrollbarEmits, scrollbarProps } from './props'
+import { scrollbarContextKey } from './context'
+import Bar from './components/Bar'
+import { addUnit } from './util'
+
+import './style.less'
+
+export type ScrollbarProps = ExtractPropTypes<typeof scrollbarProps>
+
+const GBars = defineComponent({
+  name: 'GBars',
+  props: scrollbarProps,
+  emits: scrollbarEmits,
+  setup(props, { emit }) {
+    const prefixCls = getPrefixCls({
+      suffixCls: 'scrollbar'
+    })
+
+    let stopResizeObserver: (() => void) | undefined = undefined
+    let stopResizeListener: (() => void) | undefined = undefined
+
+    const scrollbar$ = ref()
+    const wrap$ = ref()
+    const resize$ = ref()
+
+    const sizeWidth = ref('0')
+    const sizeHeight = ref('0')
+    const barRef = ref()
+    const moveX = ref(0)
+    const moveY = ref(0)
+    const ratioY = ref(1)
+    const ratioX = ref(1)
+    const SCOPE = 'GBars'
+    const GAP = 4 // top 2 + bottom 2 of bar instance
+
+    const style = computed<StyleValue>(() => {
+      const style: any = {}
+      if (props.height) style.height = addUnit(props.height)
+      if (props.maxHeight) style.maxHeight = addUnit(props.maxHeight)
+      return [props.wrapStyle, style]
+    })
+
+    const handleScroll = () => {
+      if (wrap$.value) {
+        barRef.value?.handleScroll(wrap$.value)
+
+        emit('scroll', {
+          scrollTop: wrap$.value.scrollTop,
+          scrollLeft: wrap$.value.scrollLeft
+        })
+      }
+    }
+
+    function scrollTo(xCord: number, yCord?: number): void
+    function scrollTo(options: ScrollToOptions): void
+    function scrollTo(arg1: unknown, arg2?: number) {
+      if (isObject(arg1)) {
+        wrap$.value!.scrollTo(arg1)
+      } else if (isNumber(arg1) && isNumber(arg2)) {
+        wrap$.value!.scrollTo(arg1, arg2)
+      }
+    }
+
+    const setScrollTop = (value: number) => {
+      if (!isNumber(value)) {
+        console.warn(SCOPE, 'value 必须为数字')
+        return
+      }
+      wrap$.value!.scrollTop = value
+    }
+
+    const setScrollLeft = (value: number) => {
+      if (!isNumber(value)) {
+        console.warn(SCOPE, 'value 必须为数字')
+        return
+      }
+      wrap$.value!.scrollLeft = value
+    }
+
+    const update = () => {
+      if (!wrap$.value) return
+      const offsetHeight = wrap$.value.offsetHeight - GAP
+      const offsetWidth = wrap$.value.offsetWidth - GAP
+
+      const originalHeight = offsetHeight ** 2 / wrap$.value.scrollHeight
+      const originalWidth = offsetWidth ** 2 / wrap$.value.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` : ''
+    }
+
+    watch(
+      () => props.noresize,
+      (noresize) => {
+        if (noresize) {
+          stopResizeObserver?.()
+          stopResizeListener?.()
+        } else {
+          ;({ stop: stopResizeObserver } = useResizeObserver(resize$, update))
+          stopResizeListener = useEventListener('resize', update)
+        }
+      },
+      { immediate: true }
+    )
+
+    watch(
+      () => [props.maxHeight, props.height],
+      () => {
+        if (!props.native)
+          nextTick(() => {
+            update()
+            if (wrap$.value) {
+              barRef.value?.handleScroll(wrap$.value)
+            }
+          })
+      }
+    )
+
+    provide(
+      scrollbarContextKey,
+      reactive({
+        scrollbarElement: scrollbar$,
+        wrapElement: wrap$
+      })
+    )
+
+    onMounted(() => {
+      if (!props.native) nextTick(() => update())
+    })
+
+    return {
+      barRef,
+      wrap$,
+      scrollbar$,
+      resize$,
+      style,
+      moveX,
+      moveY,
+      prefixCls,
+      sizeHeight,
+      sizeWidth,
+      ratioX,
+      ratioY,
+      handleScroll,
+      scrollTo,
+      setScrollTop,
+      setScrollLeft
+    }
+  },
+  render() {
+    const CustomTag: any = this.tag
+    return (
+      <div ref={(e) => (this.scrollbar$ = e)} class={this.prefixCls}>
+        <div
+          ref={(e) => (this.wrap$ = e)}
+          class={[
+            this.wrapClass,
+            `${this.prefixCls}-wrap`,
+            this.native ? '' : `${this.prefixCls}-wrap-hidden-default`
+          ]}
+          style={this.style}
+          onScroll={this.handleScroll}
+        >
+          <CustomTag
+            ref={(e) => (this.resize$ = e)}
+            class={[`${this.prefixCls}-view`, this.viewClass]}
+            style={this.viewStyle}
+          >
+            {this.$slots.default?.()}
+          </CustomTag>
+        </div>
+        {!this.native && (
+          <Bar
+            ref={(e) => (this.barRef = e)}
+            className={this.prefixCls}
+            height={this.sizeHeight}
+            width={this.sizeWidth}
+            always={this.always}
+            ratioX={this.ratioX}
+            ratioY={this.ratioY}
+          />
+        )}
+      </div>
+    )
+  }
+})
+
+GBars.inheritAttrs = false
+
+export default GBars

package/template-design-pro/src/components/GDesign/Scrollbars/props.ts

@@ -0,0 +1,65 @@
+import type { CSSProperties } from 'vue'
+import { isNumber } from '@gx-design-vue/pro-utils'
+
+const wrapperKey = Symbol()
+
+export type PropWrapper<T> = { [wrapperKey]: T }
+
+export const definePropType = <T>(val: any) =>
+  ({ [wrapperKey]: val } as PropWrapper<T>)
+
+export const scrollbarProps = {
+  height: {
+    type: [ String, Number ],
+    default: ''
+  },
+  maxHeight: {
+    type: [ String, Number ],
+    default: ''
+  },
+  native: {
+    type: Boolean,
+    default: false
+  },
+  wrapStyle: {
+    type: [String, Array] as PropType<string | CSSProperties[]>,
+    default: ''
+  },
+  wrapClass: {
+    type: [ String, Array ],
+    default: ''
+  },
+  viewClass: {
+    type: [ String, Array ],
+    default: ''
+  },
+  viewStyle: {
+    type: [ String, Array, Object ],
+    default: ''
+  },
+  noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能
+  tag: {
+    type: String,
+    default: 'div'
+  },
+  always: {
+    type: Boolean,
+    default: false
+  },
+  minSize: {
+    type: Number,
+    default: 20
+  }
+}
+
+
+export const scrollbarEmits = {
+  scroll: ({
+    scrollTop,
+    scrollLeft
+  }: {
+    scrollTop: number
+    scrollLeft: number
+  }) => isNumber(scrollTop) && isNumber(scrollLeft)
+}
+export type ScrollbarEmits = typeof scrollbarEmits

package/template-design-pro/src/components/GDesign/Scrollbars/style.less

@@ -0,0 +1,85 @@
+:root {
+  --wd-scrollbar-opacity: 0.3;
+  --wd-text-color-secondary: #909399;
+  --wd-scrollbar-background-color: var(--wd-text-color-secondary);
+  --wd-scrollbar-hover-opacity: 0.5;
+  --wd-scrollbar-hover-background-color: var(--wd-text-color-secondary);
+}
+
+.@{gx-prefix}-scrollbar {
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+
+  &-wrap {
+    height: 100%;
+    overflow: auto;
+
+    &-hidden-default {
+      scrollbar-width: none;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+  }
+
+  &-bar {
+    position: absolute;
+    right: 2px;
+    bottom: 2px;
+    z-index: 999;
+    border-radius: 4px;
+
+    &.is-vertical {
+      top: 2px;
+      width: 6px;
+
+      & > div {
+        width: 100%;
+      }
+    }
+
+    &.is-horizontal {
+      left: 2px;
+      height: 6px;
+
+      & > div {
+        height: 100%;
+      }
+    }
+  }
+
+  &-thumb {
+    position: relative;
+    display: block;
+    width: 0;
+    height: 0;
+    cursor: pointer;
+    background-color: var(--wd-scrollbar-background-color);
+    border-radius: inherit;
+    opacity: var(--wd-scrollbar-opacity);
+    -webkit-transition: var(--wd-transition-duration) background-color;
+    transition: var(--wd-transition-duration) background-color;
+
+    &:hover {
+      background-color: var(--wd-scrollbar-hover-background-color);
+      opacity: var(--wd-scrollbar-hover-opacity);
+    }
+  }
+
+  &-fade-enter-active {
+    -webkit-transition: opacity 340ms ease-out;
+    transition: opacity 340ms ease-out;
+  }
+
+  &-fade-leave-active {
+    -webkit-transition: opacity 120ms ease-out;
+    transition: opacity 120ms ease-out;
+  }
+}
+
+.@{gx-prefix}-scrollbar-fade-enter-from,
+.@{gx-prefix}-scrollbar-fade-leave-active {
+  opacity: 0;
+}

package/template-design-pro/src/components/GDesign/Scrollbars/util.ts

@@ -0,0 +1,40 @@
+import type { CSSProperties } from 'vue'
+import { isNumber, isString } from '@gx-design-vue/pro-utils'
+
+export const BAR_MAP = {
+  vertical: {
+    offset: 'offsetHeight',
+    scroll: 'scrollTop',
+    scrollSize: 'scrollHeight',
+    size: 'height',
+    key: 'vertical',
+    axis: 'Y',
+    client: 'clientY',
+    direction: 'top',
+  },
+  horizontal: {
+    offset: 'offsetWidth',
+    scroll: 'scrollLeft',
+    scrollSize: 'scrollWidth',
+    size: 'width',
+    key: 'horizontal',
+    axis: 'X',
+    client: 'clientX',
+    direction: 'left',
+  },
+}
+
+export const renderThumbStyle = ({ move, size, bar }): CSSProperties => ({
+  [bar.size]: size,
+  transform: `translate${bar.axis}(${move}%)`,
+})
+
+export function addUnit(value: string | number, defaultUnit = 'px') {
+  if (!value) return ''
+  if (isString(value)) {
+    return value
+  } else if (isNumber(value)) {
+    return `${value}${defaultUnit}`
+  }
+  return false
+}

package/template-design-pro/src/components/GDesign/utils/index.ts

@@ -0,0 +1,7 @@
+import devWarning from 'ant-design-vue/es/vc-util/devWarning'
+
+export { noteOnce, warning } from 'ant-design-vue/es/vc-util/warning'
+
+export {
+  devWarning
+}