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

package/es/drag-list/drag-list.mjs

@@ -0,0 +1,56 @@
+import { defineComponent, provide, reactive, openBlock, createElementBlock, normalizeClass, unref, Fragment, renderList, createBlock, withCtx, renderSlot } from 'vue';
+import { useNamespace } from 'web-base-client-vue';
+import { dragListContextKey } from './constants.mjs';
+import DragItem from './drag-item.mjs';
+import { useDragList } from './use-drag-list.mjs';
+import _export_sfc from '../_virtual/_plugin-vue_export-helper.mjs';
+
+const __default__ = defineComponent({ name: "BwaDragList" });
+const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    },
+    idAttr: {
+      type: String,
+      default: "id"
+    }
+  },
+  emits: ["sort-change"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const ns = useNamespace("draglist");
+    const { startDrag, nextID, handleItemCreate, handleItemDestroy, dragging } = useDragList(props, { emit });
+    provide(
+      dragListContextKey,
+      reactive({
+        dragging,
+        startDrag,
+        nextID,
+        handleItemCreate,
+        handleItemDestroy
+      })
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([unref(ns).b(), unref(ns).e("dragging", unref(dragging))])
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.data, (item, i) => {
+          return openBlock(), createBlock(DragItem, {
+            key: item[__props.idAttr],
+            "data-key": item[__props.idAttr]
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default", { item })
+            ]),
+            _: 2
+          }, 1032, ["data-key"]);
+        }), 128))
+      ], 2);
+    };
+  }
+});
+var DragList = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "drag-list.vue"]]);
+
+export { DragList as default };

package/es/drag-list/index.mjs

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

package/es/drag-list/use-drag-list.mjs

@@ -0,0 +1,154 @@
+import { useMouse, useElementBounding } from '../node_modules/.pnpm/@vueuse_core@9.6.0_vue@3.2.41/node_modules/@vueuse/core/index.mjs';
+import { getCurrentInstance, ref, computed, unref } from 'vue';
+
+const useDragList = (props, context) => {
+  let uid = 1;
+  const itemMap = /* @__PURE__ */ new Map();
+  const containerInstance = getCurrentInstance();
+  const mouseInfo = useMouse();
+  let bounding = null;
+  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];
+  };
+  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
+  };
+};
+
+export { useDragList };

package/es/dragable/constants.mjs

@@ -0,0 +1,4 @@
+const dragableContextKey = "DRAGABLE_CONTEXT_KEY";
+const dragableItemContextKey = "DRAGABLE_ITEM_CONTEXT_KEY";
+
+export { dragableContextKey, dragableItemContextKey };

package/es/dragable/dragable-item.mjs

@@ -0,0 +1,25 @@
+import { defineComponent, provide, openBlock, createElementBlock, normalizeClass, unref, renderSlot } from 'vue';
+import { useNamespace } from 'web-base-client-vue';
+import { dragableItemContextKey } from './constants.mjs';
+import _export_sfc from '../_virtual/_plugin-vue_export-helper.mjs';
+
+const __default__ = defineComponent({
+  name: "BwaDragableItem"
+});
+const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
+  setup(__props) {
+    ;
+    const ns = useNamespace("dragable-item");
+    provide(dragableItemContextKey, {});
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(unref(ns).b())
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 2);
+    };
+  }
+});
+var DragableItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "dragable-item.vue"]]);
+
+export { DragableItem as default };

package/es/dragable/dragable-operation.mjs

@@ -0,0 +1,32 @@
+import { defineComponent, inject, ref, openBlock, createElementBlock, normalizeClass, unref, renderSlot } from 'vue';
+import { useNamespace } from 'web-base-client-vue';
+import { dragableContextKey, dragableItemContextKey } from './constants.mjs';
+import _export_sfc from '../_virtual/_plugin-vue_export-helper.mjs';
+
+const _hoisted_1 = ["dragable-operation"];
+const __default__ = defineComponent({
+  name: "BwaDragableOperation"
+});
+const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
+  setup(__props) {
+    ;
+    const ns = useNamespace("dragable-operation");
+    const dragableContext = inject(dragableContextKey);
+    const dragableItemContext = inject(dragableItemContextKey);
+    const dragableOperation = ref(
+      new Boolean(dragableContext && dragableItemContext).valueOf()
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", {
+        class: normalizeClass(unref(ns).b()),
+        onMousedown: _cache[0] || (_cache[0] = (...args) => _ctx.handleMousedown && _ctx.handleMousedown(...args)),
+        "dragable-operation": dragableOperation.value
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 42, _hoisted_1);
+    };
+  }
+});
+var DragableOperation = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "dragable-operation.vue"]]);
+
+export { DragableOperation as default };

package/es/dragable/dragable.mjs

@@ -0,0 +1,31 @@
+import { defineComponent, ref, provide, openBlock, createElementBlock, normalizeClass, unref, renderSlot } from 'vue';
+import { useNamespace } from 'web-base-client-vue';
+import { dragableContextKey } from './constants.mjs';
+import { useDragable } from './use-dragable.mjs';
+import _export_sfc from '../_virtual/_plugin-vue_export-helper.mjs';
+
+const __default__ = defineComponent({
+  name: "BwaDragable"
+});
+const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
+  emits: ["move"],
+  setup(__props, { emit }) {
+    ;
+    const ns = useNamespace("dragable");
+    const el = ref(null);
+    useDragable(el, ns.b("item"), ns.b("operation"), { emit });
+    provide(dragableContextKey, {});
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(unref(ns).b()),
+        ref_key: "el",
+        ref: el
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 2);
+    };
+  }
+});
+var Dragable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "dragable.vue"]]);
+
+export { Dragable as default };

package/es/dragable/index.mjs

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

package/es/dragable/use-dragable.mjs

@@ -0,0 +1,134 @@
+import { fromEvent, filter, switchMap, takeUntil, map, take } from 'rxjs';
+import { onMounted, unref, onUnmounted } from 'vue';
+import { Rectangle } from '../math/Rectangle.mjs';
+
+const useDragable = (dragableEl, itemClass, operationClass, context) => {
+  let dragSubscription = null;
+  onMounted(() => {
+    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));
+    }));
+    const mousemoveObservable = fromEvent(document, "mousemove");
+    const mouseupObservable = fromEvent(document, "mouseup");
+    const dragObservable = mousedownObservable.pipe(switchMap((startEvent) => mousemoveObservable.pipe(takeUntil(mouseupObservable), map((event) => ({
+      startEvent,
+      moveEvent: event
+    })))));
+    let animationFrameKey = -1;
+    let otherInfos = [];
+    let currentEl = null;
+    let currentRectangle = null;
+    let tempEl = null;
+    let offset = null;
+    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) => {
+      var _a;
+      let children = Array.from(unref(dragableEl).children).filter((el) => el.classList.contains(itemClass));
+      currentEl = (_a = children.find((el) => el.contains(event.target))) != null ? _a : 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 bound2 = el.getBoundingClientRect();
+        const rectangle = new Rectangle(bound2.x, bound2.y, bound2.width, bound2.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 == null ? void 0 : dragSubscription.unsubscribe();
+  });
+};
+
+export { useDragable };

package/es/filter-panel/conditions/condition.mjs

@@ -0,0 +1,30 @@
+import { useSlots, h, unref } from 'vue';
+import { useDynamicComponent } from '../../utils.mjs';
+
+var Condition = {
+  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
+    });
+  }
+};
+
+export { Condition as default };

package/es/filter-panel/conditions/date-range-condition.mjs

@@ -0,0 +1,46 @@
+import { defineComponent, computed, openBlock, createBlock, unref, isRef, withCtx, renderSlot } from 'vue';
+import { BwaDateRange } from '../../date-range/index.mjs';
+import _export_sfc from '../../_virtual/_plugin-vue_export-helper.mjs';
+
+const __default__ = defineComponent({
+  name: "BwaDateRangeCondition",
+  __conditionTitle__: "\u65E5\u671F\u9009\u62E9",
+  __conditionDefault__: () => ({ start: "", end: "" })
+});
+const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
+  props: {
+    modelValue: {
+      type: null
+    },
+    valueFormat: {
+      type: String,
+      default: "YYYY-MM-DD"
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const value = computed({
+      get: () => props.modelValue,
+      set: (v) => {
+        emit("update:modelValue", v);
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(BwaDateRange), {
+        modelValue: unref(value),
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(value) ? value.value = $event : null),
+        multiple: true,
+        "value-format": __props.valueFormat
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["modelValue", "value-format"]);
+    };
+  }
+});
+var DateRangeCondition = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "date-range-condition.vue"]]);
+
+export { DateRangeCondition as default };

package/es/filter-panel/conditions/department-condition/department-condition.mjs

@@ -0,0 +1,81 @@
+import { defineComponent, ref, unref, openBlock, createBlock, withCtx, createTextVNode, toDisplayString, createElementBlock, Fragment, renderList } from 'vue';
+import SingleMenuCondition from '../single-menu-condition.mjs';
+import DepartmentNode from './department-node.mjs';
+import { useService } from 'web-base-client-vue';
+import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.mjs';
+
+const __default__ = defineComponent({
+  name: "BwaDepartmentCondition"
+});
+const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
+  props: {},
+  setup(__props) {
+    const props = __props;
+    const departmentService = useService("DepartmentService");
+    const data = ref([]);
+    const loading = ref(false);
+    const map = /* @__PURE__ */ new Map();
+    const formatValue = (selected) => {
+      selected = Array.isArray(selected) ? selected : selected ? [selected] : [];
+      selected = selected.map((item) => map.get(item.value + "")).filter(Boolean);
+      if (!selected.length) {
+        return "\u5168\u90E8";
+      }
+      return selected.map((item) => item.desc).join(",");
+    };
+    const handleVisibleChange = async (isShow) => {
+      if (!isShow || !unref(departmentService)) {
+        return;
+      }
+      try {
+        loading.value = true;
+        const departmentsResult = await unref(departmentService).getDepartments();
+        if (departmentsResult.code != 0) {
+          return;
+        }
+        const departments = [];
+        for (let department of departmentsResult.data || []) {
+          department.children = [];
+          if (!department.pid) {
+            departments.push(department);
+          }
+          map.set(department.id + "", department);
+        }
+        for (const department of departmentsResult.data || []) {
+          if (!department.pid) {
+            continue;
+          }
+          const parent = map.get(department.pid + "");
+          if (!parent) {
+            continue;
+          }
+          parent.children.push(department);
+        }
+        data.value = departments;
+      } finally {
+        loading.value = false;
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(SingleMenuCondition, {
+        multiple: true,
+        showSearch: false,
+        loading: loading.value,
+        onVisibleChange: handleVisibleChange
+      }, {
+        value: withCtx(({ selected }) => [
+          createTextVNode(toDisplayString(formatValue(selected)), 1)
+        ]),
+        default: withCtx(() => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(data.value, (item) => {
+            return openBlock(), createBlock(DepartmentNode, { item }, null, 8, ["item"]);
+          }), 256))
+        ]),
+        _: 1
+      }, 8, ["loading"]);
+    };
+  }
+});
+var DepartmentCondition = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "department-condition.vue"]]);
+
+export { DepartmentCondition as default };