签入版本

ui/src/directives/clickOutside.ts

@@ -0,0 +1,86 @@
+import { on } from '@/utils/domUtils';
+import { isServer } from '@/utils/is';
+import type { ComponentPublicInstance, DirectiveBinding, ObjectDirective } from 'vue';
+
+type DocumentHandler = <T extends MouseEvent>(mouseup: T, mousedown: T) => void;
+
+type FlushList = Map<
+  HTMLElement,
+  {
+    documentHandler: DocumentHandler;
+    bindingFn: (...args: unknown[]) => unknown;
+  }
+>;
+
+const nodeList: FlushList = new Map();
+
+let startClick: MouseEvent;
+
+if (!isServer) {
+  on(document, 'mousedown', (e: MouseEvent) => (startClick = e));
+  on(document, 'mouseup', (e: MouseEvent) => {
+    for (const { documentHandler } of nodeList.values()) {
+      documentHandler(e, startClick);
+    }
+  });
+}
+
+function createDocumentHandler(el: HTMLElement, binding: DirectiveBinding): DocumentHandler {
+  let excludes: HTMLElement[] = [];
+  if (Array.isArray(binding.arg)) {
+    excludes = binding.arg;
+  } else {
+    // due to current implementation on binding type is wrong the type casting is necessary here
+    excludes.push(binding.arg as unknown as HTMLElement);
+  }
+  return function (mouseup, mousedown) {
+    const popperRef = (
+      binding.instance as ComponentPublicInstance<{
+        popperRef: Nullable<HTMLElement>;
+      }>
+    ).popperRef;
+    const mouseUpTarget = mouseup.target as Node;
+    const mouseDownTarget = mousedown.target as Node;
+    const isBound = !binding || !binding.instance;
+    const isTargetExists = !mouseUpTarget || !mouseDownTarget;
+    const isContainedByEl = el.contains(mouseUpTarget) || el.contains(mouseDownTarget);
+    const isSelf = el === mouseUpTarget;
+
+    const isTargetExcluded =
+      (excludes.length && excludes.some((item) => item?.contains(mouseUpTarget))) ||
+      (excludes.length && excludes.includes(mouseDownTarget as HTMLElement));
+    const isContainedByPopper =
+      popperRef && (popperRef.contains(mouseUpTarget) || popperRef.contains(mouseDownTarget));
+    if (
+      isBound ||
+      isTargetExists ||
+      isContainedByEl ||
+      isSelf ||
+      isTargetExcluded ||
+      isContainedByPopper
+    ) {
+      return;
+    }
+    binding.value();
+  };
+}
+
+const ClickOutside: ObjectDirective = {
+  beforeMount(el, binding) {
+    nodeList.set(el, {
+      documentHandler: createDocumentHandler(el, binding),
+      bindingFn: binding.value,
+    });
+  },
+  updated(el, binding) {
+    nodeList.set(el, {
+      documentHandler: createDocumentHandler(el, binding),
+      bindingFn: binding.value,
+    });
+  },
+  unmounted(el) {
+    nodeList.delete(el);
+  },
+};
+
+export default ClickOutside;

ui/src/directives/debounce.ts

@@ -0,0 +1,30 @@
+import { DirectiveBinding } from 'vue';
+
+let debounceTimer: NodeJS.Timeout | null;
+
+export const debounce = {
+  mounted(el: HTMLElement, binding: DirectiveBinding) {
+    const eventType: string = Object.keys(binding.modifiers)[0] || 'click';
+
+    el.addEventListener(eventType, () => {
+      const dealy: number = binding.arg ? parseInt(binding.arg) : 300;
+      const fn: unknown = binding.value;
+
+      if (isNaN(dealy)) {
+        throw Error('v-debounce:arg必须为数字!');
+      }
+
+      if (typeof fn !== 'function') {
+        throw Error('v-debounce绑定值必须为函数!');
+      }
+
+      if (debounceTimer) {
+        clearTimeout(debounceTimer);
+      }
+
+      debounceTimer = setTimeout(() => {
+        fn();
+      }, dealy);
+    });
+  },
+};

ui/src/directives/loading.ts

@@ -0,0 +1,37 @@
+import { createLoading } from '@/components/Loading';
+import type { Directive, App } from 'vue';
+
+const loadingDirective: Directive = {
+  mounted(el, binding) {
+    const tip = el.getAttribute('loading-tip');
+    const background = el.getAttribute('loading-background');
+    const fullscreen = !!binding.modifiers.fullscreen;
+    const instance = createLoading(
+      {
+        tip,
+        background,
+        loading: !!binding.value,
+        absolute: !fullscreen,
+      },
+      fullscreen ? document.body : el,
+    );
+    el.instance = instance;
+  },
+  updated(el, binding) {
+    const instance = el.instance;
+    if (!instance) return;
+    instance.setTip(el.getAttribute('loading-tip'));
+    if (binding.oldValue !== binding.value) {
+      instance.setLoading?.(binding.value && !instance.loading);
+    }
+  },
+  unmounted(el) {
+    el?.instance?.close();
+  },
+};
+
+export function setupLoadingDirective(app: App) {
+  app.directive('loading', loadingDirective);
+}
+
+export default loadingDirective;

ui/src/directives/permission.ts

@@ -0,0 +1,37 @@
+import { ObjectDirective } from 'vue';
+import { usePermission } from '@/hooks/web/usePermission';
+
+export const perm: ObjectDirective = {
+  mounted(el: HTMLButtonElement, binding) {
+    if (binding.value == undefined) return;
+    const { action, effect } = binding.value;
+    const { hasSomePermission } = usePermission();
+    if (!hasSomePermission(binding.value)) {
+      if (effect == 'disabled') {
+        el.disabled = true;
+        el.style['disabled'] = 'disabled';
+        el.classList.add('n-button--disabled');
+      } else {
+        el.parentNode.removeChild(el) 
+      }
+    }
+  },
+};
+
+
+export const perms: ObjectDirective = {
+  mounted(el: HTMLButtonElement, binding) {
+    if (binding.value == undefined) return;
+    const { action, effect } = binding.value;
+    const { hasEveryPermission } = usePermission();
+    if (!hasEveryPermission(action)) {
+      if (effect == 'disabled') {
+        el.disabled = true;
+        el.style['disabled'] = 'disabled';
+        el.classList.add('n-button--disabled');
+      } else {
+        el.parentNode.removeChild(el) 
+      }
+    }
+  },
+};

ui/src/directives/scrollBar.ts

@@ -0,0 +1,25 @@
+import { nextTick } from 'vue';
+import PerfectScrollbar from 'perfect-scrollbar';
+
+const elScrollBar = (el) => {
+  if (el._ps_ instanceof PerfectScrollbar) {
+    el._ps_.update();
+  } else {
+    el._ps_ = new PerfectScrollbar(el, {
+      suppressScrollX: true,
+    });
+  }
+};
+
+export const scrollBar = {
+  mounted(el) {
+    try {
+      nextTick(() => {
+        elScrollBar(el);
+      });
+    } catch (error) {
+      console.error(error);
+      elScrollBar(el);
+    }
+  },
+};

ui/src/directives/throttle.ts

@@ -0,0 +1,31 @@
+import { DirectiveBinding } from 'vue';
+
+let throttleTimer: NodeJS.Timeout | null;
+
+export const throttle = {
+  mounted(el: HTMLElement, binding: DirectiveBinding) {
+    const eventType: string = Object.keys(binding.modifiers)[0] || 'click';
+
+    el.addEventListener(eventType, () => {
+      const dealy: number = binding.arg ? parseInt(binding.arg) : 300;
+      const fn: unknown = binding.value;
+
+      if (isNaN(dealy)) {
+        throw Error('v-throttle:arg必须为数字!');
+      }
+
+      if (typeof fn !== 'function') {
+        throw Error('v-throttle绑定值必须为函数!');
+      }
+
+      if (throttleTimer) {
+        return;
+      }
+
+      throttleTimer = setTimeout(() => {
+        fn();
+        throttleTimer = null;
+      }, dealy);
+    });
+  },
+};