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

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

@@ -1,56 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,164 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,200 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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

@@ -1,85 +0,0 @@
-: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

@@ -1,40 +0,0 @@
-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

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