aegon-gen 1.0.0

package/src/components/el-date-picker.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="block">
+    <span class="demonstration">默认</span>
+    <el-date-picker
+      v-model="value1"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      :disabled-date="disabledDate"
+      @change="handleDateChange"
+    >
+    </el-date-picker>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { ElMessage } from "element-plus";
+
+type DateRange = [Date | null, Date | null];
+
+const value1 = ref<DateRange>([null, null]);
+
+const getDateDiffInDays = (date1: Date, date2: Date): number => {
+  const timeDiff = Math.abs(date2.getTime() - date1.getTime());
+  return Math.ceil(timeDiff / (1000 * 3600 * 24));
+};
+
+const handleDateChange = (value: DateRange | null) => {
+  if (!value || !value[0] || !value[1]) {
+    return;
+  }
+
+  const [startDate, endDate] = value;
+
+  if (startDate > endDate) {
+    ElMessage.error("开始时间不能晚于结束时间");
+    value1.value = [null, null];
+    return;
+  }
+
+  const dayDiff = getDateDiffInDays(startDate, endDate);
+  if (dayDiff > 31) {
+    ElMessage.error("时间范围不能超过31天");
+    value1.value = [null, null];
+  }
+};
+
+const disabledDate = (_time: Date) => false;
+</script>
+
+<style scoped>
+.block {
+  padding: 20px 0;
+}
+
+.demonstration {
+  display: block;
+  color: var(--el-text-color-secondary);
+  font-size: 14px;
+  margin-bottom: 10px;
+}
+</style>

package/src/directives/btnLoading.ts

@@ -0,0 +1,427 @@
+import { nextTick, type Directive, type DirectiveBinding } from 'vue'
+
+const BTN_LOADING_KEY = Symbol('vBtnLoading')
+const REFRESH_GEN_KEY = Symbol('vBtnLoadingRefreshGen')
+
+const LOADING_STYLE_ID = 'v-btn-loading-style'
+const DEFAULT_MIN_LOCK_MS = 1000
+const DEFAULT_AUTO_CLOSE_MS = 30_000
+const HOST_ID_ATTR = 'data-v-btn-loading-id'
+
+interface BtnLoadingSession {
+  id: string
+  host: HTMLButtonElement
+  startedAt: number
+  minLockMs: number
+  locked: boolean
+  closeRequested: boolean
+  closeRequestedAt?: number
+  releaseTimer?: number
+  autoCloseTimer?: number
+  guardTimer?: number
+  classObserver?: MutationObserver
+}
+
+interface BtnLoadingBindingMeta {
+  listener: (event: Event) => void
+  event: string
+  binding: DirectiveBinding
+}
+
+/** closeBtnLoading() 主动关闭；未调用时 DEFAULT_AUTO_CLOSE_MS 后自动关闭 */
+const activeSessions = new Map<string, BtnLoadingSession>()
+const hostToSessionId = new Map<HTMLButtonElement, string>()
+
+function resolveButtonHost(el: HTMLElement): HTMLButtonElement {
+  if (el.tagName === 'BUTTON') return el as HTMLButtonElement
+  const nested = el.querySelector<HTMLButtonElement>('button.el-button')
+  return (nested ?? el) as HTMLButtonElement
+}
+
+function ensureHostId(host: HTMLButtonElement, id: string) {
+  host.setAttribute(HOST_ID_ATTR, id)
+}
+
+function getSessionById(id: string): BtnLoadingSession | undefined {
+  return activeSessions.get(id)
+}
+
+/** Vue 重渲染可能替换 button 节点，按 session id 重新绑定 DOM */
+function rebindSessionHost(session: BtnLoadingSession): HTMLButtonElement | null {
+  if (session.host.isConnected) {
+    ensureHostId(session.host, session.id)
+    hostToSessionId.set(session.host, session.id)
+    return session.host
+  }
+
+  const byAttr = document.querySelector<HTMLButtonElement>(
+    `[${HOST_ID_ATTR}="${CSS.escape(session.id)}"]`,
+  )
+  if (byAttr) {
+    session.host = byAttr
+    hostToSessionId.set(byAttr, session.id)
+    return byAttr
+  }
+
+  return null
+}
+
+function getSessionByHost(host: HTMLButtonElement): BtnLoadingSession | undefined {
+  const id = hostToSessionId.get(host) ?? host.getAttribute(HOST_ID_ATTR) ?? undefined
+  if (!id) return undefined
+
+  const session = getSessionById(id)
+  if (!session) return undefined
+
+  session.host = host
+  hostToSessionId.set(host, id)
+  return session
+}
+
+function findSessionForHost(host: HTMLButtonElement): BtnLoadingSession | undefined {
+  const direct = getSessionByHost(host)
+  if (direct) return direct
+
+  const id = host.getAttribute(HOST_ID_ATTR)
+  if (id) {
+    const session = getSessionById(id)
+    if (session) {
+      session.host = host
+      hostToSessionId.set(host, id)
+      return session
+    }
+  }
+
+  for (const session of activeSessions.values()) {
+    const rebound = rebindSessionHost(session)
+    if (rebound === host) return session
+  }
+
+  return undefined
+}
+
+function resolveCloseTargets(target?: HTMLElement | string): HTMLButtonElement[] {
+  if (target === undefined) {
+    return [...activeSessions.values()]
+      .map((session) => rebindSessionHost(session))
+      .filter((host): host is HTMLButtonElement => host !== null)
+  }
+  if (typeof target === 'string') {
+    return Array.from(document.querySelectorAll<HTMLElement>(target)).map((node) =>
+      resolveButtonHost(node),
+    )
+  }
+  return [resolveButtonHost(target)]
+}
+
+function resolveMinLockMs(arg?: string): number {
+  if (arg && /^\d+$/.test(arg)) return Number(arg)
+  return DEFAULT_MIN_LOCK_MS
+}
+
+function ensureLoadingStyles() {
+  if (typeof document === 'undefined') return
+
+  const css = `
+.el-button.v-btn-loading-host,
+button.v-btn-loading-host {
+  position: relative !important;
+  box-sizing: border-box;
+  cursor: not-allowed !important;
+}
+.el-button.v-btn-loading-host {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+.el-button.v-btn-loading-host::after,
+button.v-btn-loading-host::after {
+  content: '';
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  margin-left: 6px;
+  flex: 0 0 auto;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: v-btn-loading-spin 0.75s linear infinite;
+  vertical-align: middle;
+  opacity: 1 !important;
+}
+@keyframes v-btn-loading-spin {
+  to { transform: rotate(360deg); }
+}
+`
+
+  const existing = document.getElementById(LOADING_STYLE_ID)
+  if (existing) {
+    existing.textContent = css
+    return
+  }
+
+  const style = document.createElement('style')
+  style.id = LOADING_STYLE_ID
+  style.textContent = css
+  document.head.appendChild(style)
+}
+
+function bumpRefreshGen(host: HTMLButtonElement): number {
+  const next = ((host as HTMLElement & { [REFRESH_GEN_KEY]?: number })[REFRESH_GEN_KEY] ?? 0) + 1
+  ;(host as HTMLElement & { [REFRESH_GEN_KEY]?: number })[REFRESH_GEN_KEY] = next
+  return next
+}
+
+function applyLoadingVisual(host: HTMLButtonElement, sessionId: string) {
+  ensureLoadingStyles()
+  ensureHostId(host, sessionId)
+  host.classList.add('v-btn-loading-host', 'is-disabled')
+  host.setAttribute('aria-busy', 'true')
+  host.setAttribute('aria-disabled', 'true')
+  host.dataset.btnLoading = '1'
+}
+
+function clearLoadingVisual(host: HTMLButtonElement) {
+  host.classList.remove('v-btn-loading-host', 'is-disabled')
+  host.removeAttribute('aria-busy')
+  host.removeAttribute('aria-disabled')
+  host.removeAttribute(HOST_ID_ATTR)
+  delete host.dataset.btnLoading
+}
+
+function ensureLoadingVisual(session: BtnLoadingSession) {
+  if (!activeSessions.has(session.id)) return
+
+  const host = rebindSessionHost(session)
+  if (!host) return
+
+  if (!host.classList.contains('v-btn-loading-host')) {
+    applyLoadingVisual(host, session.id)
+  } else {
+    ensureHostId(host, session.id)
+  }
+}
+
+function startClassGuard(session: BtnLoadingSession) {
+  stopClassGuard(session)
+
+  const guard = () => {
+    if (!activeSessions.has(session.id)) return
+    ensureLoadingVisual(session)
+  }
+
+  const host = rebindSessionHost(session)
+  if (host) {
+    session.classObserver = new MutationObserver(guard)
+    session.classObserver.observe(host, { attributes: true, attributeFilter: ['class'] })
+  }
+
+  session.guardTimer = window.setInterval(guard, 120)
+}
+
+function stopClassGuard(session: BtnLoadingSession) {
+  session.classObserver?.disconnect()
+  delete session.classObserver
+  if (session.guardTimer !== undefined) {
+    window.clearInterval(session.guardTimer)
+    delete session.guardTimer
+  }
+}
+
+function scheduleLoadingRefresh(session: BtnLoadingSession) {
+  const host = rebindSessionHost(session)
+  if (!host) return
+
+  const gen = (host as HTMLElement & { [REFRESH_GEN_KEY]?: number })[REFRESH_GEN_KEY] ?? 0
+  void nextTick(() => {
+    if (!activeSessions.has(session.id)) return
+    if ((host as HTMLElement & { [REFRESH_GEN_KEY]?: number })[REFRESH_GEN_KEY] !== gen) return
+    ensureLoadingVisual(session)
+  })
+}
+
+function clearReleaseTimer(session: BtnLoadingSession) {
+  if (session.releaseTimer !== undefined) {
+    window.clearTimeout(session.releaseTimer)
+    session.releaseTimer = undefined
+  }
+}
+
+function clearAutoCloseTimer(session: BtnLoadingSession) {
+  if (session.autoCloseTimer !== undefined) {
+    window.clearTimeout(session.autoCloseTimer)
+    session.autoCloseTimer = undefined
+  }
+}
+
+function releaseSession(session: BtnLoadingSession) {
+  if (!activeSessions.has(session.id)) return
+
+  clearReleaseTimer(session)
+  clearAutoCloseTimer(session)
+  stopClassGuard(session)
+
+  const host = rebindSessionHost(session)
+  if (host) {
+    clearLoadingVisual(host)
+    hostToSessionId.delete(host)
+  }
+
+  activeSessions.delete(session.id)
+}
+
+/** closeBtnLoading() 或超时触发；从点击起至少 minLockMs 后才真正关闭 */
+function scheduleRelease(session: BtnLoadingSession) {
+  clearReleaseTimer(session)
+  const elapsed = Date.now() - session.startedAt
+  const remain = Math.max(0, session.minLockMs - elapsed)
+
+  session.releaseTimer = window.setTimeout(() => {
+    session.releaseTimer = undefined
+    session.locked = false
+    releaseSession(session)
+  }, remain)
+}
+
+/** 未调用 closeBtnLoading() 时，点击后 DEFAULT_AUTO_CLOSE_MS 自动关闭 */
+function scheduleAutoClose(session: BtnLoadingSession) {
+  clearAutoCloseTimer(session)
+  session.autoCloseTimer = window.setTimeout(() => {
+    session.autoCloseTimer = undefined
+    if (!activeSessions.has(session.id)) return
+    requestClose(session)
+  }, DEFAULT_AUTO_CLOSE_MS)
+}
+
+function requestClose(session: BtnLoadingSession) {
+  if (session.closeRequested) return
+  session.closeRequested = true
+  session.closeRequestedAt = Date.now()
+  clearAutoCloseTimer(session)
+  scheduleRelease(session)
+}
+
+function activateLoading(host: HTMLButtonElement, minLockMs: number) {
+  const existing = findSessionForHost(host)
+  if (existing?.locked && !existing.closeRequested) return
+
+  const id = existing?.id ?? `bl-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`
+  const session: BtnLoadingSession = {
+    id,
+    host,
+    startedAt: Date.now(),
+    minLockMs,
+    locked: true,
+    closeRequested: false,
+  }
+
+  activeSessions.set(id, session)
+  hostToSessionId.set(host, id)
+  bumpRefreshGen(host)
+  applyLoadingVisual(host, id)
+  startClassGuard(session)
+  scheduleLoadingRefresh(session)
+  scheduleAutoClose(session)
+}
+
+/** 请求关闭；未调用时 30s 后自动关闭；调用后至少再保持 minLockMs（默认 1s，从点击起算） */
+export function closeBtnLoading(target?: HTMLElement | string) {
+  if (target === undefined) {
+    ;[...activeSessions.values()].forEach((session) => requestClose(session))
+    return
+  }
+
+  resolveCloseTargets(target).forEach((host) => {
+    const session = findSessionForHost(host)
+    if (!session) return
+    requestClose(session)
+  })
+}
+
+/** 是否存在未关闭的 loading（便于调试/测试） */
+export function hasActiveBtnLoading(target?: HTMLElement | string): boolean {
+  if (target === undefined) return activeSessions.size > 0
+
+  return resolveCloseTargets(target).some((host) => {
+    const session = findSessionForHost(host)
+    return !!session && !session.closeRequested
+  })
+}
+
+/**
+ * v-btnLoading — 按钮 loading（与 v-debounce 解耦）
+ * - v-btnLoading              默认最短 1s（从点击起算）
+ * - v-btnLoading:1500         自定义最短毫秒
+ * - 未调用 closeBtnLoading()：30s 后自动关闭
+ * - closeBtnLoading() 后：若未满 minLockMs 则补满剩余时间再关闭
+ */
+export const vBtnLoading: Directive<HTMLElement> = {
+  mounted(el: HTMLElement, binding: DirectiveBinding) {
+    const host = resolveButtonHost(el)
+    const event = binding.arg && !/^\d+$/.test(binding.arg) ? binding.arg : 'click'
+
+    const listener = (e: Event) => {
+      const meta = (el as HTMLElement & { [BTN_LOADING_KEY]?: BtnLoadingBindingMeta })[BTN_LOADING_KEY]
+      const currentBinding = meta?.binding ?? binding
+      const minLockMs = resolveMinLockMs(
+        currentBinding.arg && /^\d+$/.test(currentBinding.arg) ? currentBinding.arg : undefined,
+      )
+
+      const session = findSessionForHost(host)
+      if (session?.locked && !session.closeRequested) {
+        e.preventDefault()
+        e.stopImmediatePropagation()
+        return
+      }
+
+      activateLoading(host, minLockMs)
+    }
+
+    host.addEventListener(event, listener, true)
+    ;(el as HTMLElement & { [BTN_LOADING_KEY]?: BtnLoadingBindingMeta })[BTN_LOADING_KEY] = {
+      listener,
+      event,
+      binding,
+    }
+
+    const existing = findSessionForHost(host)
+    if (existing && !existing.closeRequested) {
+      existing.host = host
+      hostToSessionId.set(host, existing.id)
+      ensureLoadingVisual(existing)
+      startClassGuard(existing)
+    }
+  },
+  updated(el: HTMLElement, binding: DirectiveBinding) {
+    const host = resolveButtonHost(el)
+    const meta = (el as HTMLElement & { [BTN_LOADING_KEY]?: BtnLoadingBindingMeta })[BTN_LOADING_KEY]
+    if (meta) meta.binding = binding
+
+    const session = findSessionForHost(host)
+    if (!session || session.closeRequested) return
+
+    session.host = host
+    hostToSessionId.set(host, session.id)
+    ensureLoadingVisual(session)
+    scheduleLoadingRefresh(session)
+  },
+  unmounted(el: HTMLElement) {
+    const host = resolveButtonHost(el)
+    const meta = (el as HTMLElement & { [BTN_LOADING_KEY]?: BtnLoadingBindingMeta })[BTN_LOADING_KEY]
+    if (meta) {
+      host.removeEventListener(meta.event, meta.listener, true)
+      delete (el as HTMLElement & { [BTN_LOADING_KEY]?: BtnLoadingBindingMeta })[BTN_LOADING_KEY]
+    }
+
+    const session = findSessionForHost(host)
+    if (!session) return
+
+    if (session.closeRequested) {
+      releaseSession(session)
+      return
+    }
+
+    stopClassGuard(session)
+    hostToSessionId.delete(host)
+  },
+}