@ctzy-web-client/plugin-component-vue 1.0.0

package/src/drag-list/drag-list.vue

@@ -0,0 +1,50 @@
+<template>
+  <div :class="[ns.b(), ns.e('dragging', dragging)]">
+    <DragItem
+      v-for="(item, i) in data"
+      :key="item[idAttr]"
+      :data-key="item[idAttr]"
+    >
+      <slot :item="item"></slot>
+    </DragItem>
+  </div>
+</template>
+
+<script setup>
+import { provide, reactive } from 'vue';
+import { useNamespace } from 'web-base-client-vue';
+import { dragListContextKey } from './constants';
+import DragItem from './drag-item.vue';
+import { useDragList } from './use-drag-list';
+
+defineOptions({ name: 'BwaDragList' });
+
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => [],
+  },
+  idAttr: {
+    type: String,
+    default: 'id',
+  },
+});
+
+const emit = defineEmits(['sort-change']);
+
+const ns = useNamespace('draglist');
+
+const { startDrag, nextID, handleItemCreate, handleItemDestroy, dragging } =
+  useDragList(props, { emit });
+
+provide(
+  dragListContextKey,
+  reactive({
+    dragging,
+    startDrag,
+    nextID,
+    handleItemCreate,
+    handleItemDestroy,
+  })
+);
+</script>

package/src/drag-list/index.js

@@ -0,0 +1,6 @@
+import { withInstall } from 'element-plus/es/utils/vue/install';
+import DragList from './drag-list.vue';
+
+export const BwaDraglist = withInstall(DragList);
+
+export default BwaDraglist;

package/src/drag-list/use-drag-list.js

@@ -0,0 +1,209 @@
+import { useElementBounding, useMouse } from '@vueuse/core';
+import { computed, getCurrentInstance, ref, unref } from 'vue';
+
+export const useDragList = (props, context) => {
+  let uid = 1;
+
+  const itemMap = new Map();
+
+  const containerInstance = getCurrentInstance();
+
+  const mouseInfo = useMouse();
+  let bounding = null;
+  /** @type {import("vue").Ref<HTMLElement>} */
+  let currentInstance = ref(null);
+  let startPosition = null;
+  let offset = null;
+  let timer = null;
+  let clonedEl = null;
+  const dragging = ref(false);
+
+  const currentEl = computed(() => {
+    const instance = unref(currentInstance);
+
+    if (!instance) {
+      return null;
+    }
+
+    return instance.$el;
+  });
+
+  const brotherItemList = computed(() => {
+    const children = Array.from(itemMap.values());
+
+    const _currentInstance = unref(currentInstance);
+    return children.filter((item) => item !== _currentInstance);
+  });
+
+  let animationFrameKey = -1;
+
+  const calcTransform = () => {
+    const targetX = unref(mouseInfo.x) - startPosition.x - offset.x;
+    const targetY = unref(mouseInfo.y) - startPosition.y - offset.y;
+
+    unref(currentEl).style.transform = `translate(${targetX}px, ${targetY}px)`;
+
+    const currentBounding = unref(currentEl).getBoundingClientRect();
+
+    for (const brother of unref(brotherItemList)) {
+      const _bounding = brother.$el.getBoundingClientRect();
+
+      if (
+        currentBounding.y + currentBounding.height / 2 <=
+        _bounding.y + unref(_bounding.height) / 2
+      ) {
+        brother.$el.style.transform = `translate(0, ${unref(
+          bounding.height
+        )}px)`;
+      } else {
+        brother.$el.style.transform = `translate(0, 0px)`;
+      }
+    }
+  };
+
+  const animationFrameCallback = () => {
+    calcTransform();
+
+    animationFrameKey = requestAnimationFrame(animationFrameCallback);
+  };
+
+  const getSorted = () => {
+    const el = unref(currentEl);
+    const container = el.parentElement;
+    const children = Array.from(container.children);
+
+    let before = [];
+    let after = [];
+
+    for (const child of children) {
+      if (child === el || child === clonedEl) {
+        continue;
+      }
+
+      if (
+        ['translate(0px, 0px)', 'translate(0px)'].includes(
+          child.style.transform
+        )
+      ) {
+        before.push(child.dataset.key);
+      } else {
+        after.push(child.dataset.key);
+      }
+    }
+
+    return [...before, el.dataset.key, ...after];
+  };
+
+  /**
+   * @param {MouseEvent} event
+   */
+  const handleMouseup = (event) => {
+    cancelAnimationFrame(animationFrameKey);
+    document.removeEventListener('mouseup', handleMouseup);
+
+    context.emit('sort-change', getSorted());
+
+    for (const brotherItem of [
+      ...unref(brotherItemList),
+      unref(currentInstance),
+    ]) {
+      brotherItem.$el.setAttribute('draggable-context-id', '');
+    }
+
+    clearTimeout(timer);
+
+    containerInstance.proxy.$el.removeChild(clonedEl);
+
+    Object.assign(unref(currentEl).style, {
+      position: '',
+      left: '',
+      top: '',
+      transform: '',
+      width: '',
+      height: '',
+      cursor: '',
+      zIndex: '',
+    });
+
+    Object.assign(document.body.style, {
+      userSelect: '',
+      cursor: '',
+    });
+
+    clonedEl =
+      timer =
+      startPosition =
+      offset =
+      currentInstance.value =
+      bounding =
+        null;
+
+    for (const brother of unref(brotherItemList)) {
+      brother.$el.style.transform = ``;
+    }
+
+    dragging.value = false;
+  };
+
+  const startDrag = (el) => {
+    dragging.value = true;
+    currentInstance.value = el;
+
+    bounding = useElementBounding(currentEl);
+    startPosition = { x: unref(bounding.x), y: unref(bounding.y) };
+
+    Object.assign(document.body.style, {
+      userSelect: 'none',
+      cursor: 'grabbing',
+    });
+
+    offset = {
+      x: unref(mouseInfo.x) - unref(bounding.x),
+      y: unref(mouseInfo.y) - unref(bounding.y),
+    };
+
+    clonedEl = document.createElement('div');
+    Object.assign(clonedEl.style, {
+      height: `${unref(bounding.height)}px`,
+      width: `${unref(bounding.width)}px`,
+    });
+    containerInstance.proxy.$el.append(clonedEl);
+
+    Object.assign(unref(currentEl).style, {
+      position: 'fixed',
+      left: `${unref(startPosition.x)}px`,
+      top: `${unref(startPosition.y)}px`,
+      width: `${unref(bounding.width)}px`,
+      height: `${unref(bounding.height)}px`,
+      transform: 'translate(0px, 0px)',
+      cursor: 'grabbing',
+      zIndex: '5000',
+    });
+
+    calcTransform();
+
+    timer = setTimeout(() => {
+      unref(currentInstance).$el.setAttribute('draggable-context-id', '1');
+      for (const brotherItem of unref(brotherItemList)) {
+        brotherItem.$el.setAttribute('draggable-context-id', '0');
+      }
+    });
+
+    animationFrameKey = requestAnimationFrame(animationFrameCallback);
+    document.addEventListener('mouseup', handleMouseup);
+  };
+
+  const nextID = () => {
+    return uid++;
+  };
+
+  const handleItemCreate = (id, instance) => {
+    itemMap.set(id, instance);
+  };
+
+  const handleItemDestroy = (id, instance) => {
+    itemMap.delete(id);
+  };
+
+  return { startDrag, nextID, handleItemCreate, handleItemDestroy, dragging };
+};

package/src/dragable/constants.js

@@ -0,0 +1,3 @@
+export const dragableContextKey = 'DRAGABLE_CONTEXT_KEY';
+
+export const dragableItemContextKey = 'DRAGABLE_ITEM_CONTEXT_KEY';

package/src/dragable/dragable-item.vue

@@ -0,0 +1,19 @@
+<template>
+  <div :class="ns.b()">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+import { provide } from 'vue';
+import { useNamespace } from 'web-base-client-vue';
+import { dragableItemContextKey } from './constants';
+
+defineOptions({
+  name: 'BwaDragableItem',
+});
+
+const ns = useNamespace('dragable-item');
+
+provide(dragableItemContextKey, {});
+</script>

package/src/dragable/dragable-operation.vue

@@ -0,0 +1,28 @@
+<template>
+  <span
+    :class="ns.b()"
+    @mousedown="handleMousedown"
+    :dragable-operation="dragableOperation"
+  >
+    <slot></slot>
+  </span>
+</template>
+
+<script setup>
+import { inject, ref } from 'vue';
+import { useNamespace } from 'web-base-client-vue';
+import { dragableContextKey, dragableItemContextKey } from './constants';
+
+defineOptions({
+  name: 'BwaDragableOperation',
+});
+
+const ns = useNamespace('dragable-operation');
+
+const dragableContext = inject(dragableContextKey);
+const dragableItemContext = inject(dragableItemContextKey);
+
+const dragableOperation = ref(
+  new Boolean(dragableContext && dragableItemContext).valueOf()
+);
+</script>

package/src/dragable/dragable.vue

@@ -0,0 +1,26 @@
+<template>
+  <div :class="ns.b()" ref="el">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+import { provide, ref } from 'vue';
+import { useNamespace } from 'web-base-client-vue';
+import { dragableContextKey } from './constants';
+import { useDragable } from './use-dragable';
+
+defineOptions({
+  name: 'BwaDragable',
+});
+
+const ns = useNamespace('dragable');
+
+const emit = defineEmits(['move']);
+
+const el = ref(null);
+
+useDragable(el, ns.b('item'), ns.b('operation'), { emit });
+
+provide(dragableContextKey, {});
+</script>

package/src/dragable/index.js

@@ -0,0 +1,14 @@
+import { withInstall } from 'element-plus/es/utils/vue/install';
+import Dragable from './dragable.vue';
+import DragableItem from './dragable-item.vue';
+import DragableOperation from './dragable-operation.vue';
+
+export const BwaDragable = withInstall(Dragable, {
+  DragableItem,
+  DragableOperation,
+});
+
+export const BwaDragableItem = withInstall(DragableItem, { DragableOperation });
+export const BwaDragableOperation = withInstall(DragableOperation);
+
+export default BwaDragable;

package/src/dragable/use-dragable.js

@@ -0,0 +1,227 @@
+import { filter, fromEvent, map, switchMap, take, takeUntil } from 'rxjs';
+import { onMounted, onUnmounted, unref } from 'vue';
+import { Rectangle } from '../math/Rectangle';
+
+/**
+ * @param {HTMLElement} dragableEl
+ * @param {string} itemClass
+ * @param {string} operationClass
+ */
+export const useDragable = (dragableEl, itemClass, operationClass, context) => {
+  /** @type {import("rxjs").Subscription} */
+  let dragSubscription = null;
+
+  onMounted(() => {
+    /** @type {import("rxjs").Observable<MouseEvent>} */
+    const mousedownObservable = fromEvent(unref(dragableEl), 'mousedown').pipe(
+      filter((event) => {
+        const children = Array.from(unref(dragableEl).children).filter((el) =>
+          el.classList.contains(itemClass)
+        );
+
+        const operations = children
+          .map((el) => el.querySelector(`.${operationClass}`))
+          .filter(Boolean)
+          .filter((operation) => operation.classList.contains(operationClass));
+
+        return !!operations.find((operation) =>
+          operation.contains(event.target)
+        );
+      })
+    );
+    /** @type {import("rxjs").Observable<MouseEvent>} */
+    const mousemoveObservable = fromEvent(document, 'mousemove');
+    /** @type {import("rxjs").Observable<MouseEvent>} */
+    const mouseupObservable = fromEvent(document, 'mouseup');
+
+    /** @type {import("rxjs").Observable<{ startEvent: MouseEvent, moveEvent: MouseEvent }>} */
+    const dragObservable = mousedownObservable.pipe(
+      switchMap((startEvent) =>
+        mousemoveObservable.pipe(
+          takeUntil(mouseupObservable),
+          map((event) => ({
+            startEvent,
+            moveEvent: event,
+          }))
+        )
+      )
+    );
+
+    let animationFrameKey = -1;
+    /** @type {Array<{ rectangle: Rectangle, el: HTMLElement }>} */
+    let otherInfos = [];
+    /** @type {HTMLElement} */
+    let currentEl = null;
+    /** @type {Rectangle} */
+    let currentRectangle = null;
+    /** @type {HTMLElement} */
+    let tempEl = null;
+    /** @type {{ x: number, y: number }} */
+    let offset = null;
+    /** @type {number} */
+    let sourceIndex = -1;
+
+    const animationFrameCallback = () => {
+      for (let otherInfo of otherInfos) {
+        const translateY =
+          otherInfo.rectangle.cy < currentRectangle.cy
+            ? 0
+            : currentRectangle.height;
+
+        otherInfo.el.style.transform = `translate(0px, ${translateY}px)`;
+      }
+
+      otherInfos = otherInfos.map((info) => {
+        const bound = info.el.getBoundingClientRect();
+
+        return {
+          el: info.el,
+          rectangle: new Rectangle(bound.x, bound.y, bound.width, bound.height),
+        };
+      });
+
+      animationFrameKey = requestAnimationFrame(animationFrameCallback);
+    };
+
+    dragSubscription = dragObservable.subscribe(({ moveEvent }) => {
+      if (!currentEl) {
+        return;
+      }
+
+      const bound = currentEl.getBoundingClientRect();
+      currentRectangle = new Rectangle(
+        bound.x,
+        bound.y,
+        bound.width,
+        bound.height
+      );
+
+      Object.assign(currentEl.style, {
+        position: 'fixed',
+        transform: `translate(${moveEvent.clientX - offset.x}px, ${
+          moveEvent.clientY - offset.y
+        }px)`,
+        zIndex: '5000',
+      });
+    });
+
+    dragSubscription.add(
+      mousedownObservable.subscribe((event) => {
+        /** @type {HTMLElement[]} */
+        let children = Array.from(unref(dragableEl).children).filter((el) =>
+          el.classList.contains(itemClass)
+        );
+
+        currentEl = children.find((el) => el.contains(event.target)) ?? null;
+
+        if (!currentEl) {
+          return;
+        }
+
+        sourceIndex = children.findIndex((el) => el.contains(event.target));
+
+        if (sourceIndex === -1) {
+          return;
+        }
+
+        const bound = currentEl.getBoundingClientRect();
+        currentRectangle = new Rectangle(
+          bound.x,
+          bound.y,
+          bound.width,
+          bound.height
+        );
+
+        offset = { x: event.x - bound.x, y: event.y - bound.y };
+
+        tempEl = document.createElement('div');
+        Object.assign(tempEl.style, {
+          height: `${currentRectangle.height}px`,
+          width: `${currentRectangle.width}px`,
+        });
+        unref(dragableEl).appendChild(tempEl);
+
+        Object.assign(currentEl.style, {
+          position: 'fixed',
+          left: '0',
+          top: '0',
+          transform: `translate(${event.clientX - offset.x}px, ${
+            event.clientY - offset.y
+          }px)`,
+          zIndex: '5000',
+        });
+
+        const otherItems = children.filter(
+          (item) => !item.contains(event.target)
+        );
+
+        otherInfos = otherItems.map((el) => {
+          const bound = el.getBoundingClientRect();
+
+          const rectangle = new Rectangle(
+            bound.x,
+            bound.y,
+            bound.width,
+            bound.height
+          );
+
+          return { el, rectangle };
+        });
+
+        animationFrameCallback();
+
+        for (let otherInfo of otherInfos) {
+          otherInfo.el.setAttribute('dragable-relative', 'true');
+        }
+      })
+    );
+
+    dragSubscription.add(
+      mousedownObservable
+        .pipe(switchMap(() => mouseupObservable.pipe(take(1))))
+        .subscribe(() => {
+          if (!currentEl) {
+            return;
+          }
+
+          tempEl.remove();
+
+          for (let otherInfo of otherInfos) {
+            otherInfo.el.style.transform = '';
+          }
+
+          Object.assign(currentEl.style, {
+            position: '',
+            left: '',
+            top: '',
+            transform: '',
+            zIndex: '',
+          });
+
+          const tartgetIndex = otherInfos.filter(
+            (info) => info.rectangle.cy < currentRectangle.cy
+          ).length;
+
+          if (sourceIndex !== tartgetIndex) {
+            context.emit('move', sourceIndex, tartgetIndex);
+          }
+
+          for (let otherInfo of otherInfos) {
+            otherInfo.el.removeAttribute('dragable-relative');
+          }
+
+          otherInfos = [];
+          currentEl = tempEl = offset = currentRectangle = null;
+          sourceIndex = -1;
+
+          if (animationFrameKey !== -1) {
+            cancelAnimationFrame(animationFrameKey);
+            animationFrameKey = -1;
+          }
+        })
+    );
+  });
+  onUnmounted(() => {
+    dragSubscription?.unsubscribe();
+  });
+};

package/src/filter-panel/conditions/condition.js

@@ -0,0 +1,35 @@
+import { h, useSlots, unref } from 'vue';
+import { useDynamicComponent } from '../../utils.js';
+export default {
+  name: 'BwaCondition',
+  props: {
+    modelValue: null,
+    column: Object,
+    record: Object,
+  },
+  emits: ['on-change', 'update:modelValue'],
+  setup(props, context) {
+    //组件信息
+    const { component, params } = useDynamicComponent(
+      props,
+      context,
+      'BwaMultipleMenuCondition',
+      'fullAttrName'
+    );
+
+    const slots = useSlots();
+
+    return () =>
+      h(
+        unref(component),
+        {
+          ...unref(params),
+          modelValue: props.modelValue,
+          'onUpdate:modelValue': (v) => {
+            context.emit('update:modelValue', v);
+          },
+        },
+        { ...slots }
+      );
+  },
+};

package/src/filter-panel/conditions/date-range-condition.vue

@@ -0,0 +1,35 @@
+<template>
+  <BwaDateRange v-model="value" :multiple="true" :value-format="valueFormat">
+    <slot></slot>
+  </BwaDateRange>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { BwaDateRange } from '../../date-range';
+
+defineOptions({
+  name: 'BwaDateRangeCondition',
+  __conditionTitle__: '日期选择',
+  __conditionDefault__: () => ({ start: '', end: '' }),
+});
+
+const props = defineProps({
+  modelValue: {
+    type: null,
+  },
+  valueFormat: {
+    type: String,
+    default: 'YYYY-MM-DD',
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const value = computed({
+  get: () => props.modelValue,
+  set: (v) => {
+    emit('update:modelValue', v);
+  },
+});
+</script>