y-admin-ui 0.5.2 → 0.5.4

package/lib/utils/core.ts

@@ -0,0 +1,45 @@
+/**
+ * 遍历children形式数据
+ * @param data 需要遍历的数据
+ * @param callback 回调
+ * @param childrenField children字段名
+ */
+export function eachTreeData(
+    data: any[],
+    callback: Function,
+    childrenField = 'children',
+    parent: any = ''
+  ) {
+    if (data) {
+      data.forEach((d, i) => {
+        if (
+          callback &&
+          callback(d, i, parent) !== false &&
+          d[childrenField]?.length
+        ) {
+          eachTreeData(d[childrenField], callback, childrenField, d);
+        }
+      });
+    }
+}
+
+/**
+ * 生成随机字符串
+ * @param length 长度
+ * @param radix 基数
+ */
+export function uuid(length = 32, radix: any) {
+    const num = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
+    let result = '';
+    for (let i = 0; i < length; i++) {
+      result += num.charAt(Math.floor(Math.random() * (radix || num.length)));
+    }
+    return result;
+}
+
+/**
+ * 获取屏幕宽度
+ */
+export function screenWidth() {
+  return document.documentElement.clientWidth || document.body.clientWidth;
+}

package/lib/utils/directives/click-outside/index.ts

@@ -0,0 +1,106 @@
+import { isClient } from "@vueuse/core"
+
+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 (isClient) {
+  document.addEventListener("mousedown", (e: MouseEvent) => (startClick = e))
+  document.addEventListener("mouseup", (e: MouseEvent) => {
+    for (const handlers of nodeList.values()) {
+      for (const { documentHandler } of handlers) {
+        documentHandler(e as MouseEvent, startClick)
+      }
+    }
+  })
+}
+
+function createDocumentHandler(el: HTMLElement, binding: DirectiveBinding): DocumentHandler {
+  let excludes: HTMLElement[] = []
+  if (Array.isArray(binding.arg)) {
+    excludes = binding.arg
+  } else if ((binding.arg as unknown) instanceof HTMLElement) {
+    // 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: 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(mouseup, mousedown)
+  }
+}
+
+const ClickOutside: ObjectDirective = {
+  beforeMount(el: HTMLElement, binding: DirectiveBinding) {
+    // there could be multiple handlers on the element
+    if (!nodeList.has(el)) {
+      nodeList.set(el, [])
+    }
+
+    nodeList.get(el)!.push({
+      documentHandler: createDocumentHandler(el, binding),
+      bindingFn: binding.value
+    })
+  },
+  updated(el: HTMLElement, binding: DirectiveBinding) {
+    if (!nodeList.has(el)) {
+      nodeList.set(el, [])
+    }
+
+    const handlers = nodeList.get(el)!
+    const oldHandlerIndex = handlers.findIndex(item => item.bindingFn === binding.oldValue)
+    const newHandler = {
+      documentHandler: createDocumentHandler(el, binding),
+      bindingFn: binding.value
+    }
+
+    if (oldHandlerIndex >= 0) {
+      // replace the old handler to the new handler
+      handlers.splice(oldHandlerIndex, 1, newHandler)
+    } else {
+      handlers.push(newHandler)
+    }
+  },
+  unmounted(el: HTMLElement) {
+    // remove all listeners when a component unmounted
+    nodeList.delete(el)
+  }
+}
+
+export default ClickOutside

package/lib/utils/index.ts

@@ -0,0 +1,142 @@
+type Func = (...args: any[]) => any
+/**
+ * 防抖函数
+ * @param { Function } func 函数
+ * @param { Number } delay 防抖时间
+ * @param { Boolean } immediate 是否立即执行
+ * @param { Function } resultCallback
+ */
+export function debounce(
+  func: Func,
+  delay: number = 500,
+  immediate?: boolean,
+  resultCallback?: Func
+) {
+  let timer: null | ReturnType<typeof setTimeout> = null
+  let isInvoke = false
+  const _debounce = function (this: unknown, ...args: any[]) {
+    return new Promise((resolve, reject) => {
+      if (timer) clearTimeout(timer)
+      if (immediate && !isInvoke) {
+        try {
+          const result = func.apply(this, args)
+          if (resultCallback) resultCallback(result)
+          resolve(result)
+        } catch (e) {
+          reject(e)
+        }
+        isInvoke = true
+      } else {
+        timer = setTimeout(() => {
+          try {
+            const result = func.apply(this, args)
+            if (resultCallback) resultCallback(result)
+            resolve(result)
+          } catch (e) {
+            reject(e)
+          }
+          isInvoke = false
+          timer = null
+        }, delay)
+      }
+    })
+  }
+  _debounce.cancel = function () {
+    if (timer) clearTimeout(timer)
+    isInvoke = false
+    timer = null
+  }
+  return _debounce
+}
+
+/**
+ * 节流函数
+ * @param { Function } func
+ * @param { Boolean } interval
+ * @param { Object } options
+ * leading:初始 trailing:结尾
+ */
+export function throttle(
+  func: Func,
+  interval: number,
+  options = { leading: false, trailing: true }
+) {
+  let timer: null | ReturnType<typeof setTimeout> = null
+  let lastTime = 0
+  const { leading, trailing } = options
+  const _throttle = function (this: unknown, ...args: any[]) {
+    const nowTime = Date.now()
+    if (!lastTime && !leading) lastTime = nowTime
+    const remainTime = interval - (nowTime - lastTime)
+    if (remainTime <= 0) {
+      if (timer) {
+        clearTimeout(timer)
+        timer = null
+      }
+      lastTime = nowTime
+      func.apply(this, args)
+    }
+    if (trailing && !timer) {
+      timer = setTimeout(() => {
+        lastTime = !leading ? 0 : Date.now()
+        timer = null
+        func.apply(this, args)
+      }, remainTime)
+    }
+  }
+  _throttle.cancel = function () {
+    if (timer) clearTimeout(timer)
+    timer = null
+    lastTime = 0
+  }
+  return _throttle
+}
+
+/**
+ * 驼峰转换下划线
+ * @param { String } name
+ */
+export function toLine(name: string) {
+  return name.replace(/([A-Z])/g, "_$1").toLowerCase()
+}
+
+/*
+  自定义保留 precision 位小数，并使用 separator 分隔符进行数字格式化
+  value：格式化目标数字
+  precision：精度，保留小数点后几位，默认2位
+  separator：千分位分隔符，默认为','
+  decimal：小数点符号，默认'.'
+  prefix：前缀字符，默认''
+  suffix：后缀字符，默认''
+  formatNumber(123456789.87654321, 2, ',') // 123,456,789.88
+*/
+export function formatNumber(
+  value: number | string,
+  precision = 2,
+  separator = ",",
+  decimal = ".",
+  prefix = "",
+  suffix = ""
+): string {
+  if (Number(value) === 0) {
+    return Number(value).toFixed(precision)
+  }
+  if (!value) {
+    return ""
+  }
+  value = Number(value).toFixed(precision)
+  value += ""
+  const nums = value.split(".")
+  let integer = nums[0]
+  const decimals = nums.length > 1 ? decimal + nums[1] : ""
+  const reg = /(\d+)(\d{3})/
+  function isNumber(value: any) {
+    return Object.prototype.toString.call(value) === "[object Number]"
+  }
+  if (separator && !isNumber(separator)) {
+    while (reg.test(integer)) {
+      integer = integer.replace(reg, "$1" + separator + "$2")
+    }
+  }
+  return prefix + integer + decimals + suffix
+}