新增前端vue

web-vue/packages/core/components/Scrollbar/index.ts

@@ -0,0 +1,7 @@
+/**
+ * copy from element-ui
+ */
+import Scrollbar from './src/Scrollbar.vue';
+
+export { Scrollbar };
+export type { ScrollbarType } from './src/types';

web-vue/packages/core/components/Scrollbar/src/Scrollbar.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="scrollbar">
+    <div
+      ref="wrap"
+      :class="[wrapClass, 'scrollbar__wrap', native ? '' : 'scrollbar__wrap--hidden-default']"
+      :style="wrapStyle"
+      @scroll="handleScroll"
+    >
+      <component :is="tag" ref="resize" :class="['scrollbar__view', viewClass]" :style="viewStyle">
+        <slot></slot>
+      </component>
+    </div>
+    <template v-if="!native">
+      <bar :move="moveX" :size="sizeWidth" />
+      <bar vertical :move="moveY" :size="sizeHeight" />
+    </template>
+  </div>
+</template>
+<script lang="ts" setup name="Scrollbar">
+  import { ref, onMounted, onBeforeUnmount, nextTick, provide, unref, watch, type PropType } from 'vue';
+  import type { StyleValue } from './types';
+  import { addResizeListener, removeResizeListener } from '@jeesite/core/utils/event';
+  import componentSetting from '@jeesite/core/settings/componentSetting';
+  import Bar from './bar';
+
+  const props = defineProps({
+    native: {
+      type: Boolean,
+      default: componentSetting.scrollbar?.native ?? false,
+    },
+    wrapStyle: {
+      type: [String, Array, Object] as PropType<StyleValue>,
+      default: '',
+    },
+    wrapClass: {
+      type: [String, Array],
+      default: '',
+    },
+    viewClass: {
+      type: [String, Array],
+      default: '',
+    },
+    viewStyle: {
+      type: [String, Array],
+      default: '',
+    },
+    noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能
+    tag: {
+      type: String,
+      default: 'div',
+    },
+    scrollHeight: {
+      // 用于监控内部scrollHeight的变化
+      type: Number,
+      default: 0,
+    },
+  });
+
+  const sizeWidth = ref('0');
+  const sizeHeight = ref('0');
+  const moveX = ref(0);
+  const moveY = ref(0);
+  const wrap = ref();
+  const resize = ref();
+
+  provide('scroll-bar-wrap', wrap);
+
+  const handleScroll = () => {
+    const w = unref(wrap);
+    if (!props.native && w) {
+      moveY.value = (w.scrollTop * 100) / w.clientHeight;
+      moveX.value = (w.scrollLeft * 100) / w.clientWidth;
+    }
+  };
+
+  const update = () => {
+    if (!unref(wrap)) return;
+
+    const heightPercentage = (unref(wrap).clientHeight * 100) / unref(wrap).scrollHeight;
+    const widthPercentage = (unref(wrap).clientWidth * 100) / unref(wrap).scrollWidth;
+
+    sizeHeight.value = heightPercentage < 100 ? heightPercentage + '%' : '';
+    sizeWidth.value = widthPercentage < 100 ? widthPercentage + '%' : '';
+  };
+
+  watch(
+    () => props.scrollHeight,
+    () => {
+      if (props.native) return;
+      update();
+    },
+  );
+
+  defineExpose({
+    wrap,
+  });
+
+  onMounted(() => {
+    if (props.native) return;
+    nextTick(update);
+    if (!props.noresize) {
+      addResizeListener(unref(resize), update);
+      addResizeListener(unref(wrap), update);
+      addEventListener('resize', update);
+    }
+  });
+
+  onBeforeUnmount(() => {
+    if (props.native) return;
+    if (!props.noresize) {
+      removeResizeListener(unref(resize), update);
+      removeResizeListener(unref(wrap), update);
+      removeEventListener('resize', update);
+    }
+  });
+</script>
+<style lang="less">
+  .scrollbar {
+    position: relative;
+    height: 100%;
+    overflow: hidden;
+
+    &__wrap {
+      height: 100%;
+      overflow: auto;
+
+      &--hidden-default {
+        scrollbar-width: none;
+
+        &::-webkit-scrollbar {
+          display: none;
+          width: 0;
+          height: 0;
+          opacity: 0;
+        }
+      }
+    }
+
+    &__thumb {
+      display: block;
+      position: relative;
+      width: 0;
+      height: 0;
+      transition: 0.3s background-color;
+      border-radius: inherit;
+      background-color: rgb(144 147 153 / 30%);
+      cursor: pointer;
+
+      &:hover {
+        background-color: rgb(144 147 153 / 50%);
+      }
+    }
+
+    &__bar {
+      position: absolute;
+      z-index: 1;
+      right: 2px;
+      bottom: 2px;
+      transition: opacity 80ms ease;
+      border-radius: 4px;
+      opacity: 0;
+
+      &.is-vertical {
+        top: 2px;
+        width: 6px;
+
+        & > div {
+          width: 100%;
+        }
+      }
+
+      &.is-horizontal {
+        left: 2px;
+        height: 6px;
+
+        & > div {
+          height: 100%;
+        }
+      }
+    }
+  }
+
+  .scrollbar:active > .scrollbar__bar,
+  .scrollbar:focus > .scrollbar__bar,
+  .scrollbar:hover > .scrollbar__bar {
+    transition: opacity 340ms ease-out;
+    opacity: 1;
+  }
+</style>

web-vue/packages/core/components/Scrollbar/src/bar.ts

@@ -0,0 +1,93 @@
+import { defineComponent, h, computed, ref, getCurrentInstance, onUnmounted, inject, Ref } from 'vue';
+import { on, off } from '@jeesite/core/utils/domUtils';
+
+import { renderThumbStyle, BAR_MAP } from './util';
+
+export default defineComponent({
+  name: 'Bar',
+  props: {
+    vertical: Boolean,
+    size: String,
+    move: Number,
+  },
+
+  setup(props) {
+    const instance = getCurrentInstance();
+    const thumb = ref();
+    const wrap = inject('scroll-bar-wrap', {} as Ref<Nullable<HTMLElement>>) as any;
+    const bar = computed(() => {
+      return BAR_MAP[props.vertical ? 'vertical' : 'horizontal'];
+    });
+    const barStore = ref<Recordable>({});
+    const cursorDown = ref();
+    const clickThumbHandler = (e: any) => {
+      // prevent click event of right button
+      if (e.ctrlKey || e.button === 2) {
+        return;
+      }
+      window.getSelection()?.removeAllRanges();
+      startDrag(e);
+      barStore.value[bar.value.axis] =
+        e.currentTarget[bar.value.offset] -
+        (e[bar.value.client] - e.currentTarget.getBoundingClientRect()[bar.value.direction]);
+    };
+
+    const clickTrackHandler = (e: any) => {
+      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) / instance?.vnode.el?.[bar.value.offset];
+
+      wrap.value[bar.value.scroll] = (thumbPositionPercentage * wrap.value[bar.value.scrollSize]) / 100;
+    };
+
+    const mouseMoveDocumentHandler = (e: any) => {
+      if (cursorDown.value === false) return;
+      const prevPage = barStore.value[bar.value.axis];
+
+      if (!prevPage) return;
+
+      const offset = (instance?.vnode.el?.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) * -1;
+      const thumbClickPosition = thumb.value[bar.value.offset] - prevPage;
+      const thumbPositionPercentage = ((offset - thumbClickPosition) * 100) / instance?.vnode.el?.[bar.value.offset];
+      wrap.value[bar.value.scroll] = (thumbPositionPercentage * wrap.value[bar.value.scrollSize]) / 100;
+    };
+
+    function mouseUpDocumentHandler() {
+      cursorDown.value = false;
+      barStore.value[bar.value.axis] = 0;
+      off(document, 'mousemove', mouseMoveDocumentHandler);
+      document.onselectstart = null;
+    }
+
+    const startDrag = (e: any) => {
+      e.stopImmediatePropagation();
+      cursorDown.value = true;
+      on(document, 'mousemove', mouseMoveDocumentHandler);
+      on(document, 'mouseup', mouseUpDocumentHandler);
+      document.onselectstart = () => false;
+    };
+
+    onUnmounted(() => {
+      off(document, 'mouseup', mouseUpDocumentHandler);
+    });
+
+    return () =>
+      h(
+        'div',
+        {
+          class: ['scrollbar__bar', 'is-' + bar.value.key],
+          onMousedown: clickTrackHandler,
+        },
+        h('div', {
+          ref: thumb,
+          class: 'scrollbar__thumb',
+          onMousedown: clickThumbHandler,
+          style: renderThumbStyle({
+            size: props.size,
+            move: props.move,
+            bar: bar.value,
+          }),
+        }),
+      );
+  },
+});

web-vue/packages/core/components/Scrollbar/src/types.d.ts

@@ -0,0 +1,44 @@
+export interface BarMapItem {
+  offset: string;
+  scroll: string;
+  scrollSize: string;
+  size: string;
+  key: string;
+  axis: string;
+  client: string;
+  direction: string;
+}
+
+export interface BarMap {
+  vertical: BarMapItem;
+  horizontal: BarMapItem;
+}
+
+export interface ScrollbarType {
+  wrap: ElRef;
+}
+
+export type StyleValue = string | CSSProperties | Array<StyleValue>;
+
+export type Merge<O extends object, T extends object> = {
+  [K in keyof O | keyof T]: K extends keyof T ? T[K] : K extends keyof O ? O[K] : never;
+};
+
+/**
+ * T = [
+ *  { name: string; age: number; },
+ *  { sex: 'male' | 'female'; age: string }
+ * ]
+ * =>
+ * MergeAll<T> = {
+ *  name: string;
+ *  sex: 'male' | 'female';
+ *  age: string
+ * }
+ */
+export type MergeAll<T extends object[], R extends object = any> = T extends [
+  infer F extends object,
+  ...infer Rest extends object[],
+]
+  ? MergeAll<Rest, Merge<R, F>>
+  : R;

web-vue/packages/core/components/Scrollbar/src/util.ts

@@ -0,0 +1,58 @@
+import type { BarMap, MergeAll } from './types';
+
+export const BAR_MAP: BarMap = {
+  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 function renderThumbStyle({ move, size, bar }) {
+  const style = {} as any;
+  const translate = `translate${bar.axis}(${move}%)`;
+
+  style[bar.size] = size;
+  style.transform = translate;
+  style.msTransform = translate;
+  style.webkitTransform = translate;
+
+  return style;
+}
+
+function extend<T extends object, K extends object>(to: T, _from: K): T & K {
+  return Object.assign(to, _from);
+}
+
+/**
+ * [
+ *  { name: 'zhangsan', age: 18 },
+ *  { sex: 'male', age: 20 }
+ * ]
+ * =>
+ * { name: 'zhangsan', sex: 'male', age: 20 }
+ */
+export function toObject<T extends object[]>(arr: T): MergeAll<T> {
+  const res = {} as MergeAll<T>;
+  for (let i = 0; i < arr.length; i++) {
+    if (arr[i]) {
+      extend(res, arr[i]);
+    }
+  }
+  return res;
+}