@jetlinks-web/components 1.0.4 → 2.0.0

package/src/ProTable/style/index.less

@@ -0,0 +1,92 @@
+@import '../../style/variable.less';
+//@import 'ant-design-vue/lib/style/themes/variable.less';
+
+.jtable-body-spin {
+    min-height: 100%;
+    width: 100%;
+    padding: 16px 24px 24px;
+    background-color: #fff;
+
+    .ant-spin-nested-loading {
+        height: 100%;
+        .ant-spin-container {
+            height: 100%;
+        }
+    }
+
+    .jtable-body {
+        width: 100%;
+        box-sizing: border-box;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+
+        .jtable-body-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .jtable-body-header-right {
+                display: flex;
+                gap: 8px;
+                align-items: center;
+
+                .jtable-body-header-right-button {
+                    .right-button-icon {
+                        font-size: 16px;
+                        color: #d9d9d9;
+                    }
+
+                    .ant-radio-button-wrapper {
+                        padding: 0 8px;
+                    }
+
+                    .ant-radio-button-wrapper-checked {
+                        .right-button-icon {
+                            color: @primary-color;
+                        }
+                    }
+                }
+            }
+        }
+
+        .jtable-content {
+            flex: 1;
+            padding: 16px 0;
+
+            .jtable-alert {
+                margin-bottom: 16px;
+            }
+
+            .jtable-card {
+                .jtable-card-items {
+                    display: grid;
+                    grid-gap: 26px;
+
+                    .jtable-card-item {
+                        display: flex;
+                        min-width: 0;
+                    }
+                }
+            }
+        }
+
+        .jtable-pagination {
+            // position: absolute;
+            // background-color: white;
+            // padding: 10px 0;
+            // right: 0;
+            // bottom: 0;
+            width: 100%;
+            display: flex;
+            justify-content: flex-end;
+        }
+
+        .j-table-empty {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin: 10% 0;
+        }
+    }
+}

package/src/ProTable/style/index.ts

@@ -0,0 +1 @@
+import './index.less';

package/src/Scrollbar/Bar.vue

@@ -0,0 +1,75 @@
+<template>
+  <thumb :move="moveX" :ratio="ratioX" :size="sizeWidth" :always="always"/>
+  <thumb
+    :move="moveY"
+    :ratio="ratioY"
+    :size="sizeHeight"
+    vertical
+    :always="always"
+  />
+</template>
+<script lang="ts" setup>
+import { inject, ref } from 'vue'
+import { GAP } from './util'
+import Thumb from './Thumb.vue'
+import { scrollbarContextKey } from './constants'
+
+const props = defineProps({
+  always: {
+    type: Boolean,
+    default: true,
+  },
+  minSize: {
+    type: Number,
+    required: true,
+  }
+})
+
+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: HTMLDivElement) => {
+  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 = scrollbar?.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` : ''
+}
+
+defineExpose({
+  handleScroll,
+  update,
+})
+</script>

package/src/Scrollbar/Scrollbar.vue

@@ -0,0 +1,260 @@
+<template>
+  <div ref="scrollbarRef" class="j-scrollbar">
+    <div
+      ref="wrapRef"
+      :class="wrapKls"
+      :style="wrapStyle"
+      @scroll="handleScroll"
+    >
+      <component
+        :is="tag"
+        :id="id"
+        ref="resizeRef"
+        :class="resizeKls"
+        :role="role"
+        :aria-label="ariaLabel"
+        :aria-orientation="ariaOrientation"
+      >
+        <slot/>
+      </component>
+    </div>
+    <template v-if="!native">
+      <bar ref="barRef" :always="always" :min-size="minSize"/>
+    </template>
+  </div>
+</template>
+<script lang="ts" setup>
+import {
+  computed,
+  nextTick,
+  onMounted,
+  onUpdated,
+  provide,
+  reactive,
+  ref,
+  watch,
+} from 'vue'
+import { useEventListener, useResizeObserver } from '@vueuse/core'
+import { isNumber, isObject } from '@jetlinks-web/utils'
+import Bar from './Bar.vue'
+import { scrollbarContextKey } from './constants'
+import { scrollbarEmits, scrollbarProps, BarInstance } from './scrollbar'
+import type { CSSProperties, StyleValue } from 'vue'
+
+const COMPONENT_NAME = 'JScrollbar'
+
+defineOptions({
+  name: COMPONENT_NAME,
+})
+
+const props = defineProps(scrollbarProps)
+const emit = defineEmits(scrollbarEmits)
+
+let stopResizeObserver: (() => void) | undefined = undefined
+let stopResizeListener: (() => void) | undefined = undefined
+
+const scrollbarRef = ref<HTMLDivElement>()
+const wrapRef = ref<HTMLDivElement>()
+const resizeRef = ref<HTMLElement>()
+const barRef = ref<BarInstance>()
+
+const wrapStyle = computed<StyleValue>(() => {
+  const style: CSSProperties = {}
+  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) {
+    barRef.value?.handleScroll(wrapRef.value)
+
+    emit('scroll', {
+      scrollTop: wrapRef.value.scrollTop,
+      scrollLeft: wrapRef.value.scrollLeft,
+    })
+  }
+}
+
+function scrollTo(xCord: number, yCord?: number): void
+function scrollTo(options: ScrollToOptions): void
+function scrollTo(arg1: any, arg2?: number) {
+  if (isObject(arg1)) {
+    wrapRef.value!.scrollTo(arg1)
+  } else if (isNumber(arg1) && isNumber(arg2)) {
+    wrapRef.value!.scrollTo(arg1, arg2)
+  }
+}
+
+const setScrollTop = (value: number) => {
+  if (!isNumber(value)) {
+    throw new Error('value must be a number');
+  }
+  wrapRef.value!.scrollTop = value
+}
+
+const setScrollLeft = (value: number) => {
+  if (!isNumber(value)) {
+    throw new Error(`[${COMPONENT_NAME}] value must be a number`);
+  }
+  wrapRef.value!.scrollLeft = value
+}
+
+const update = () => {
+  barRef.value?.update()
+}
+
+watch(
+  () => props.noresize,
+  (noResize) => {
+    if (noResize) {
+      stopResizeObserver?.()
+      stopResizeListener?.()
+    } 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) {
+          barRef.value?.handleScroll(wrapRef.value)
+        }
+      })
+  }
+)
+
+provide(
+  scrollbarContextKey,
+  reactive({
+    scrollbarElement: scrollbarRef,
+    wrapElement: wrapRef,
+  })
+)
+
+onMounted(() => {
+  if (!props.native)
+    nextTick(() => {
+      update()
+    })
+})
+onUpdated(() => update())
+
+defineExpose({
+  /** @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,
+})
+</script>
+
+<style lang="less">
+@scrollbar-bg-color: #909399;
+@scrollbar-hover-bg-color: #909399;
+@scrollbar-hover-opacity: 0.5;
+@scrollbar-opacity: 0.3;
+@transition-duration: 0.3s;
+
+.j-scrollbar {
+  overflow: hidden;
+  position: relative;
+  height: 100%;
+
+  &__wrap {
+    overflow: auto;
+    height: 100%;
+
+    &--hidden-default {
+      scrollbar-width: none;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+  }
+
+  &__thumb {
+    position: relative;
+    display: block;
+    width: 0;
+    height: 0;
+    cursor: pointer;
+    border-radius: inherit;
+    background-color: @scrollbar-bg-color;
+    transition: @transition-duration background-color;
+    opacity: @scrollbar-opacity;
+
+    &:hover {
+      background-color: @scrollbar-hover-bg-color;
+      opacity: @scrollbar-hover-opacity;
+    }
+  }
+
+  &__bar {
+    position: absolute;
+    right: 2px;
+    bottom: 2px;
+    z-index: 1;
+    border-radius: 4px;
+
+    &--vertical {
+      width: 6px;
+      top: 2px;
+
+      > div {
+        width: 100%;
+      }
+    }
+
+    &--horizontal {
+      height: 6px;
+      left: 2px;
+
+      > div {
+        height: 100%;
+      }
+    }
+  }
+}
+
+.j-scrollbar-fade {
+  &-enter-active {
+    transition: opacity 340ms ease-out;
+  }
+
+  &-leave-active {
+    transition: opacity 120ms ease-out;
+  }
+
+  &-enter-from,
+  &-leave-active {
+    opacity: 0;
+  }
+}
+</style>

package/src/Scrollbar/Thumb.vue

@@ -0,0 +1,163 @@
+<template>
+  <transition name="j-scrollbar-fade">
+    <div
+      v-show="always || visible"
+      ref="instance"
+      :class="['j-scrollbar__bar', props.vertical ? 'is-vertical' : 'is-horizontal']"
+      @mousedown="clickTrackHandler"
+    >
+      <div
+        ref="thumb"
+        class="j-scrollbar__thumb"
+        :style="thumbStyle"
+        @mousedown="clickThumbHandler"
+      />
+    </div>
+  </transition>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, onBeforeUnmount, ref, toRef } from 'vue'
+import { useEventListener } from '@vueuse/core'
+import { isClient } from '@jetlinks-web/utils'
+import { scrollbarContextKey } from './constants'
+import { BAR_MAP, renderThumbStyle } from './util'
+import { thumbProps } from './thumb'
+
+const props = defineProps(thumbProps)
+
+const scrollbar = inject(scrollbarContextKey)
+
+if (!scrollbar) throw new Error('can not inject scrollbar context')
+
+const instance = ref<HTMLDivElement>()
+const thumb = ref<HTMLDivElement>()
+
+const thumbState = ref<Partial<Record<'X' | 'Y', number>>>({})
+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(
+  () =>
+    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
+)
+</script>

package/src/Scrollbar/constants.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/src/Scrollbar/index.ts

@@ -0,0 +1,4 @@
+import Scrollbar from './Scrollbar.vue'
+
+export default Scrollbar;
+

package/src/Scrollbar/scrollbar.ts

@@ -0,0 +1,108 @@
+import { isNumber } from '@jetlinks-web/utils'
+import type { StyleValue, PropType } from 'vue'
+import type Bar from './Bar.vue'
+
+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] as PropType<StyleValue>,
+    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, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能
+  /**
+   * @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,
+           }: {
+    scrollTop: number
+    scrollLeft: number
+  }) => [scrollTop, scrollLeft].every(isNumber),
+}
+
+export type BarInstance = InstanceType<typeof Bar>