1import { B as getCurrentScope, C as onScopeDispose, D as watchEffect, i as onMounted, g as ref, f as unref, E as set, G as get, H as isFunction$1, I as defineComponent, J as computed, w as watch, n as nextTick, K as onBeforeUnmount, L as renderSlot, M as getCurrentInstance, N as provide, o as openBlock, e as createBlock, j as withCtx, k as normalizeClass, p as resolveDynamicComponent, O as inject, P as isString$1, m as createElementBlock, F as Fragment, Q as renderList, v as createBaseVNode, R as onBeforeMount, S as withDirectives, x as createVNode, q as toDisplayString, l as createCommentVNode, T as vShow, U as Transition, c as createApp, V as h, W as mergeProps, u as useI18n, X as camelize$1, Y as useSlots, Z as Comment, _ as normalizeStyle, $ as index$1, a0 as shallowRef, a1 as debounce, a2 as reactive, y as createTextVNode, a3 as withModifiers, a4 as isVNode, a5 as pick, a6 as toRefs, a7 as isNil, a8 as withKeys, a9 as isRef, aa as vModelCheckbox, ab as merge, ac as cloneVNode, ad as Text, ae as arrow, af as autoUpdate, ag as computePosition, ah as limitShift, ai as shift, aj as flip, ak as size, al as hide, am as offset, an as useAttrs, ao as Teleport, ap as onUpdated, A as createSlots, aq as onUnmounted, ar as throttle, as as toHandlers, at as clone, au as Schema, av as normalizeProps, aw as flatMap, s as store, r as resolveComponent, ax as Draggable, ay as TransitionGroup, az as isEqual, aA as toRef, aB as detectOverflow, aC as markRaw, aD as proxyRefs, t as toRaw, aE as entry_default, aF as shuffle, aG as render, aH as shallowReactive, aI as guardReactiveProps } from "./chunk-vendor.B1BY-hcD.js"; 2import { C as ChevronSmallDown, A as ArrowTopRight, a as Close, E as EyeHide, b as EyeShow, I as Information, c as Checkmark, d as AlertCircle, e as ChevronDownV2, f as AlertTriangle, g as CheckmarkCircle, S as Sort, h as ArrowDown, i as ArrowUp, F as FilterV2, j as Setting, D as DragHandleDots, k as ChevronRightV2, M as Magnifier, l as ChevronLeftV2 } from "./zoom-icons-vue.C38wAiOG.js"; 3const CONTEXT_INJECTION_KEY = Symbol("ZmContext"); 4const contextProps = { 5 systemFonts: { 6 type: Boolean, 7 default: true 8 }, 9 shouldDetectVirtualClick: { 10 // only for playwright test 11 type: Boolean, 12 default: true 13 }, 14 namespace: { 15 type: String, 16 default: "zoom" 17 }, 18 getKeyboardClassTarget: Function, 19 direction: { 20 type: String, 21 default: "ltr" 22 } 23}; 24const isClient = typeof window !== "undefined"; 25const ua = isClient && navigator.userAgent.toLowerCase(); 26const isIPad = Boolean(ua && /ipad/.test(ua) && "ontouchend" in document); 27const isIPhone = Boolean(ua && !isIPad && /(iphone|ipod)/.test(ua)); 28const isAndroid = Boolean(ua && ua.indexOf("android") > 0); 29const isMobile = Boolean(isIPhone || isAndroid); 30const isMac = Boolean(ua && !isIPad && !isIPhone && /macintosh/.test(ua)); 31const isFirefox = Boolean(ua && /firefox/i.test(ua)); 32const isMacZoomAPPWebview = Boolean( 33 ua && /applewebkit/.test(ua) && /macintosh/.test(ua) && !/chrome/.test(ua) 34); 35const isSafari = ua && /safari/.test(ua) && !/chrome/.test(ua) || isMacZoomAPPWebview; 36const isTouchDevice = () => { 37 /* istanbul ignore next @preserve */ 38 if (!isClient) { 39 return false; 40 } 41 /* istanbul ignore next @preserve */ 42 if (isIPad || isMobile) { 43 return true; 44 } 45 const noHover = typeof window.matchMedia === "function" && window.matchMedia("(hover: none)").matches; 46 const coarsePointer = typeof window.matchMedia === "function" && window.matchMedia("(pointer: coarse)").matches; 47 const touchPoints = (navigator.maxTouchPoints || 0) > 0; 48 return touchPoints && (noHover || coarsePointer); 49}; 50const defaultWindow = isClient ? window : void 0; 51let namespace = "zoom"; 52const setNamespace = (n) => { 53 namespace = n; 54}; 55const getNamespace = () => { 56 return namespace; 57}; 58const clampNumber = (val, min, max) => { 59 if (val < min) { 60 return min; 61 } 62 if (val > max) { 63 return max; 64 } 65 return val; 66}; 67const buildTestId = (testId, suffix) => { 68 if (!testId) { 69 return void 0; 70 } 71 if (suffix === void 0 || suffix === "") { 72 return testId; 73 } 74 return `${testId}${suffix}`; 75}; 76const isZmCheckboxOrRadioOrToggle = (el) => { 77 return el && (el.classList.contains(`${namespace}-checkbox`) || el.classList.contains(`${namespace}-radio`) || el.classList.contains(`${namespace}-toggle`)); 78}; 79const getSymbolVEI = (el) => { 80 const symbol = Object.getOwnPropertySymbols(el).find((sb) => sb.toString() === "Symbol(_vei)"); 81 return symbol && el[symbol] || {}; 82}; 83/* istanbul ignore next @preserve */ 84const requestIdle = !isClient ? function(cb) { 85 return setTimeout(cb, 1); 86} : window.requestIdleCallback || function(cb) { 87 return setTimeout(cb, 1); 88}; 89const createThemeClassname = (theme) => { 90 return `${namespace}-theme--${theme}`; 91}; 92function tryOnScopeDispose(fn) { 93 if (getCurrentScope()) { 94 onScopeDispose(fn); 95 return true; 96 } 97 return false;
98} 99/* istanbul ignore next @preserve */ 100function useMediaQuery(query) { 101 let mediaQuery; 102 const matches2 = ref(false); 103 const isSupported = ref(false); 104 const handler = (event) => { 105 matches2.value = event.matches; 106 }; 107 const cleanup = () => { 108 if (!mediaQuery) 109 return; 110 mediaQuery.removeEventListener("change", handler); 111 }; 112 const stopWatch = watchEffect(() => { 113 if (!isSupported.value) 114 return; 115 cleanup(); 116 mediaQuery = window.matchMedia(unref(query)); 117 if (mediaQuery.addEventListener) { 118 mediaQuery.addEventListener("change", handler); 119 } else if (mediaQuery.addListener) { 120 mediaQuery.addListener(handler); 121 } 122 matches2.value = mediaQuery.matches; 123 }); 124 onMounted(() => { 125 isSupported.value = window && "matchMedia" in window && typeof window.matchMedia === "function"; 126 }); 127 tryOnScopeDispose(() => { 128 stopWatch(); 129 cleanup(); 130 mediaQuery = void 0; 131 }); 132 return matches2; 133} 134/** 135* @vue/shared v3.5.13 136* (c) 2018-present Yuxi (Evan) You and Vue contributors 137* @license MIT
138**/ 139const NOOP = () => { 140}; 141const hasOwnProperty = Object.prototype.hasOwnProperty; 142const hasOwn = (val, key) => hasOwnProperty.call(val, key); 143const isArray = Array.isArray; 144const isFunction = (val) => typeof val === "function"; 145const isString = (val) => typeof val === "string"; 146const isObject = (val) => val !== null && typeof val === "object"; 147const cacheStringFunction = (fn) => { 148 const cache = /* @__PURE__ */ Object.create(null); 149 return (str) => { 150 const hit = cache[str]; 151 return hit || (cache[str] = fn(str)); 152 }; 153}; 154const camelizeRE = /-(\w)/g; 155const camelize = cacheStringFunction( 156 (str) => { 157 return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : ""); 158 } 159); 160const capitalize = cacheStringFunction((str) => { 161 return str.charAt(0).toUpperCase() + str.slice(1); 162}); 163const toHandlerKey = cacheStringFunction( 164 (str) => { 165 const s = str ? `on${capitalize(str)}` : ``; 166 return s; 167 } 168); 169const isUndefined = (val) => val === void 0; 170const isBoolean = (val) => typeof val === "boolean"; 171const isNumber = (val) => typeof val === "number"; 172const isEmpty = (val) => !val && val !== 0 || isArray(val) && val.length === 0 || isObject(val) && !Object.keys(val).length; 173const isElement = (e2) => { 174 /* istanbul ignore next @preserve */ 175 if (typeof Element === "undefined") 176 return false; 177 return e2 instanceof Element; 178}; 179const keysOf = (arr) => Object.keys(arr); 180const getProp = (obj, path, defaultValue) => { 181 return { 182 get value() { 183 return get(obj, path, defaultValue); 184 }, 185 set value(val) { 186 set(obj, path, val); 187 } 188 }; 189}; 190function resolve(obj, ...params) { 191 return isFunction$1(obj) ? obj(...params) : obj; 192} 193function isVisible(el) { 194 return !!(el.offsetWidth || el.offsetHeight || el.getClientRects && el.getClientRects().length); 195} 196const classNameToArray = (cls = "") => { 197 return cls.split(" ").filter((item) => !!item.trim()); 198}; 199const hasClass = (el, cls) => { 200 var _a; 201 /* istanbul ignore next @preserve */ 202 if (!el || !cls) { 203 return false; 204 } 205 if (cls.includes(" ")) { 206 /* istanbul ignore next @preserve */ 207 throw new Error("className should not contain space."); 208 } 209 return (_a = el.classList) == null ? void 0 : _a.contains(cls); 210}; 211const addClass = (el, cls) => { 212 /* istanbul ignore next @preserve */ 213 if (!el || !cls.trim()) { 214 return; 215 } 216 el.classList.add(...classNameToArray(cls)); 217}; 218const removeClass = (el, cls) => { 219 /* istanbul ignore next @preserve */ 220 if (!el || !cls.trim()) { 221 return; 222 } 223 el.classList.remove(...classNameToArray(cls)); 224}; 225const getStyle = (element, styleName) => { 226 var _a; 227 /* istanbul ignore next @preserve */ 228 if (!isClient || !element || !styleName) { 229 return ""; 230 } 231 let key = camelize(styleName); 232 /* istanbul ignore next @preserve */ 233 if (key === "float") { 234 key = "cssFloat"; 235 } 236 try { 237 const style = element.style[key]; 238 /* istanbul ignore next @preserve */ 239 if (style) { 240 return style; 241 } 242 const computed2 = (_a = document.defaultView) == null ? void 0 : _a.getComputedStyle(element, ""); 243 return computed2 ? computed2[key] : ""; 244 } catch (e) { 245 /* istanbul ignore next @preserve */ 246 return element.style[key]; 247 } 248}; 249const isStringNumber = (val) => { 250 if (!isString(val)) { 251 return false; 252 } 253 return !Number.isNaN(Number(val)); 254}; 255function addUnit(value, defaultUnit = "px") { 256 if (!value) { 257 return ""; 258 } 259 if (isNumber(value) || isStringNumber(value)) { 260 return `${value}${defaultUnit}`; 261 } else if (isString(value)) { 262 return value; 263 } 264} 265const keyboardCls = "is-vue3-keyboard-event"; 266const safariOrZoomMacAppCls = "is-safari-or-mac-app"; 267const getContextCls = () => { 268 return `${getNamespace()}-context`; 269}; 270/* istanbul ignore next @preserve */ 271const getHighContrastCls = () => { 272 return `${getNamespace()}-theme--highContrast`; 273}; 274const isPerformingKeyboardAction = () => { 275 return hasClass(document.body, keyboardCls); 276}; 277const canMakeChildFloat = (parent) => { 278 return ["relative", "absolute", "sticky"].includes(getStyle(parent, "position")); 279}; 280/* istanbul ignore next @preserve */ 281const disableUserSelect = () => { 282 document.body.style.userSelect = "none"; 283 document.body.style.webkitUserSelect = "none"; 284}; 285/* istanbul ignore next @preserve */ 286const enableUserSelect = () => { 287 document.body.style.userSelect = ""; 288 document.body.style.webkitUserSelect = ""; 289}; 290const composeEventHandlers = (stoppableHandler, resultHandler) => { 291 const handleEvent = (event) => { 292 const stopped = stoppableHandler == null ? void 0 : stoppableHandler(event); 293 if (!stopped) { 294 return resultHandler == null ? void 0 : resultHandler(event); 295 } 296 }; 297 return handleEvent; 298}; 299function isVirtualClickEvent(event) { 300 /* istanbul ignore next @preserve */ 301 if (event.mozInputSource === 0 && event.isTrusted) { 302 return true; 303 } 304 return event.detail === 0 && !event.pointerType; 305} 306function isVirtualPointerEvent(event) { 307 const detail = isSafari ? 1 : 0; 308 return event.width === 1 && event.height === 1 && event.pressure === 0 && event.detail === detail && event.pointerType === "mouse"; 309} 310var __defProp$1o = Object.defineProperty; 311var __defProps$1b = Object.defineProperties; 312var __getOwnPropDescs$1b = Object.getOwnPropertyDescriptors; 313var __getOwnPropSymbols$1p = Object.getOwnPropertySymbols; 314var __hasOwnProp$1p = Object.prototype.hasOwnProperty; 315var __propIsEnum$1p = Object.prototype.propertyIsEnumerable; 316var __defNormalProp$1o = (obj, key, value) => key in obj ? __defProp$1o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 317var __spreadValues$1o = (a, b) => { 318 for (var prop in b || (b = {})) 319 if (__hasOwnProp$1p.call(b, prop)) 320 __defNormalProp$1o(a, prop, b[prop]); 321 if (__getOwnPropSymbols$1p) 322 for (var prop of __getOwnPropSymbols$1p(b)) { 323 if (__propIsEnum$1p.call(b, prop)) 324 __defNormalProp$1o(a, prop, b[prop]); 325 } 326 return a; 327}; 328var __spreadProps$1b = (a, b) => __defProps$1b(a, __getOwnPropDescs$1b(b)); 329const version = "3.2.7"; 330const _sfc_main$14 = /* @__PURE__ */ defineComponent(__spreadProps$1b(__spreadValues$1o({}, { 331 name: "ZmContext", 332 // @ts-ignore - Custom property for version tracking 333 ZoomUIVersion: version 334}), { 335 __name: "context", 336 props: contextProps, 337 setup(__props) { 338 const collectPrismVue3Versions = () => { 339 if (!window.__Vue3PrismVersions) { 340 window.__Vue3PrismVersions = [version]; 341 } else { 342 window.__Vue3PrismVersions = [...window.__Vue3PrismVersions, version]; 343 } 344 }; 345 const props = __props; 346 setNamespace(props.namespace); 347 const getBoundTarget = () => { 348 var _a; 349 return ((_a = props.getKeyboardClassTarget) == null ? void 0 : _a.call(props)) || document.body; 350 }; 351 const isHighContrastTheme = useMediaQuery("(forced-colors: active)"); 352 let isVirtualClick; 353 const mouseHandler = (event) => { 354 if (!props.shouldDetectVirtualClick) { 355 removeClass(getBoundTarget(), keyboardCls); 356 return; 357 } 358 /* istanbul ignore next @preserve */ 359 isVirtualClick = isVirtualClickEvent(event) || isVirtualClick; 360 /* istanbul ignore next @preserve */ 361 if (!isVirtualClick) { 362 removeClass(getBoundTarget(), keyboardCls); 363 } else { 364 /* istanbul ignore next @preserve */ 365 isVirtualClick = false;
366 } 367 }; 368 const pointerdownHandler = (event) => { 369 /* istanbul ignore next @preserve */ 370 if (isVirtualPointerEvent(event)) { 371 isVirtualClick = true; 372 } 373 }; 374 const keyHandler = () => { 375 addClass(getBoundTarget(), keyboardCls); 376 }; 377 const instance = getCurrentInstance(); 378 const rootApp = instance.appContext.app; 379 if (!instance.appContext.provides[CONTEXT_INJECTION_KEY]) { 380 rootApp.provide(CONTEXT_INJECTION_KEY, { 381 useSystemFonts: computed(() => props.systemFonts), 382 namespace: computed(() => props.namespace), 383 direction: computed(() => props.direction) 384 }); 385 } 386 /* istanbul ignore next @preserve */ 387 watch(isHighContrastTheme, (newVal) => { 388 const target = getBoundTarget(); 389 const highContrastCls = getHighContrastCls(); 390 if (newVal) { 391 if (!hasClass(target, highContrastCls)) { 392 addClass(target, highContrastCls); 393 } 394 } else { 395 if (hasClass(target, highContrastCls)) { 396 removeClass(target, highContrastCls); 397 } 398 } 399 }); 400 onMounted(() => { 401 document.addEventListener("mousedown", mouseHandler, true); 402 document.addEventListener("pointerdown", pointerdownHandler, true); 403 document.addEventListener("keydown", keyHandler, true); 404 collectPrismVue3Versions(); 405 if (props.systemFonts) { 406 nextTick(() => { 407 addClass(instance.appContext.app._container, getContextCls()); 408 }); 409 } 410 /* istanbul ignore next @preserve */ 411 if (isSafari) { 412 addClass(getBoundTarget(), safariOrZoomMacAppCls); 413 } 414 }); 415 onBeforeUnmount(() => { 416 document.removeEventListener("mousedown", mouseHandler, true); 417 document.removeEventListener("pointerdown", pointerdownHandler, true); 418 document.removeEventListener("keydown", keyHandler, true); 419 if (hasClass(instance.appContext.app._container, getContextCls())) { 420 removeClass(instance.appContext.app._container, getContextCls()); 421 } 422 }); 423 return (_ctx, _cache) => { 424 return renderSlot(_ctx.$slots, "default"); 425 }; 426 } 427})); 428const withInstall = (main, extra) => { 429 main.install = (app) => { 430 /* istanbul ignore next @preserve */ 431 for (const comp of [main, ...Object.values(extra != null ? extra : {})]) { 432 app.component(comp.name, comp); 433 } 434 }; 435 if (extra != null) { 436 for (const [key, comp] of Object.entries(extra)) { 437 main[key] = comp; 438 } 439 } 440 return main; 441}; 442const withInstallFunction = (fn, name) => { 443 fn.install = (app) => { 444 fn._context = app._context; 445 /* istanbul ignore next @preserve */ 446 if (name) { 447 app.config.globalProperties[name] = fn; 448 } 449 }; 450 return fn; 451}; 452const definePropType = (val) => val; 453const ZmContext = withInstall(_sfc_main$14); 454const THEME_PROVIDER_INJECTION_KEY = Symbol("ZmThemeProvider"); 455const themeProviderProps = { 456 theme: { 457 type: String, 458 default: "light" 459 }, 460 tag: { 461 type: String, 462 default: "div" 463 } 464}; 465var __defProp$1n = Object.defineProperty; 466var __defProps$1a = Object.defineProperties; 467var __getOwnPropDescs$1a = Object.getOwnPropertyDescriptors; 468var __getOwnPropSymbols$1o = Object.getOwnPropertySymbols; 469var __hasOwnProp$1o = Object.prototype.hasOwnProperty; 470var __propIsEnum$1o = Object.prototype.propertyIsEnumerable; 471var __defNormalProp$1n = (obj, key, value) => key in obj ? __defProp$1n(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 472var __spreadValues$1n = (a, b) => { 473 for (var prop in b || (b = {})) 474 if (__hasOwnProp$1o.call(b, prop)) 475 __defNormalProp$1n(a, prop, b[prop]); 476 if (__getOwnPropSymbols$1o) 477 for (var prop of __getOwnPropSymbols$1o(b)) { 478 if (__propIsEnum$1o.call(b, prop)) 479 __defNormalProp$1n(a, prop, b[prop]); 480 } 481 return a; 482}; 483var __spreadProps$1a = (a, b) => __defProps$1a(a, __getOwnPropDescs$1a(b)); 484const _sfc_main$13 = /* @__PURE__ */ defineComponent(__spreadProps$1a(__spreadValues$1n({}, { 485 name: "ZmThemeProvider" 486}), { 487 __name: "theme-provider", 488 props: themeProviderProps, 489 setup(__props) { 490 const props = __props;
491 const themeClass = computed(() => createThemeClassname(props.theme)); 492 provide(THEME_PROVIDER_INJECTION_KEY, { 493 getTheme: () => props.theme, 494 getThemeClass: () => themeClass.value 495 }); 496 return (_ctx, _cache) => { 497 return openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), { 498 class: normalizeClass(themeClass.value) 499 }, { 500 default: withCtx(() => [ 501 renderSlot(_ctx.$slots, "default") 502 ]), 503 _: 3 504 }, 8, ["class"]); 505 }; 506 } 507})); 508const ZmThemeProvider = withInstall(_sfc_main$13); 509const STATE_PREFIX = "is-"; 510const _bem = (namespace2, block, blockSuffix, element, modifier) => { 511 let cls = `${namespace2}-${block}`; 512 if (blockSuffix) { 513 cls += `-${blockSuffix}`; 514 } 515 if (element) { 516 cls += `__${element}`; 517 } 518 if (modifier) { 519 cls += `--${modifier}`; 520 } 521 return cls; 522}; 523const useNamespace = (block) => { 524 const ZmContext2 = inject(CONTEXT_INJECTION_KEY, void 0); 525 const namespace2 = (ZmContext2 == null ? void 0 : ZmContext2.namespace.value) || getNamespace(); 526 const b = (blockSuffix = "") => _bem(namespace2, block, blockSuffix, "", ""); 527 const e = (element) => element ? _bem(namespace2, block, "", element, "") : ""; 528 const m = (modifier) => modifier ? _bem(namespace2, block, "", "", modifier) : ""; 529 const be = (blockSuffix, element) => blockSuffix && element ? _bem(namespace2, block, blockSuffix, element, "") : ""; 530 const em = (element, modifier) => element && modifier ? _bem(namespace2, block, "", element, modifier) : ""; 531 const bm = (blockSuffix, modifier) => blockSuffix && modifier ? _bem(namespace2, block, blockSuffix, "", modifier) : ""; 532 /* istanbul ignore next @preserve */ 533 const bem = (blockSuffix, element, modifier) => blockSuffix && element && modifier ? _bem(namespace2, block, blockSuffix, element, modifier) : ""; 534 const is = (name, ...args) => { 535 const state = args.length >= 1 ? args[0] : true; 536 return name && state ? `${STATE_PREFIX}${name}` : ""; 537 }; 538 return { 539 namespace: namespace2, 540 b, 541 e, 542 m, 543 be, 544 em, 545 bm, 546 bem, 547 is 548 }; 549}; 550var define_process_env_default = {}; 551class ZoomError extends Error { 552 constructor(m) { 553 super(m); 554 this.name = "ZoomError"; 555 } 556} 557/* istanbul ignore next @preserve */ 558function throwError(scope, m) { 559 throw new ZoomError(`[${scope}] ${m}`); 560} 561function debugWarn(scope, message) { 562 if (define_process_env_default.E2E) { 563 const error = isString$1(scope) ? new ZoomError(`[${scope}] ${message != null ? message : ""}`) : scope; 564 console.warn(error); 565 } 566} 567function debugError(scope, message) { 568 if (define_process_env_default.E2E) { 569 const error = isString$1(scope) ? new ZoomError(`[${scope}] ${message != null ? message : ""}`) : scope; 570 console.error(error); 571 } 572} 573const defaultIdInjection = { 574 prefix: Math.floor(Math.random() * 1e4), 575 current: 0 576}; 577const ID_INJECTION_KEY = Symbol("ZmIdInjection"); 578const useIdInjection = () => { 579 return getCurrentInstance() ? inject(ID_INJECTION_KEY, defaultIdInjection) : defaultIdInjection; 580}; 581const useId = (deterministicId) => { 582 const idInjection = useIdInjection(); 583 /* istanbul ignore next @preserve */ 584 if (!isClient && idInjection === defaultIdInjection) { 585 debugWarn( 586 "IdInjection", 587 `Looks like you are using server rendering, you must provide a id provider to ensure the hydration process to be succeed 588usage: app.provide(ID_INJECTION_KEY, { 589 prefix: number, 590 current: number, 591})` 592 ); 593 } 594 const idRef = computed( 595 () => { 596 var _a; 597 return (_a = unref(deterministicId)) != null ? _a : `${getNamespace()}-id-${idInjection.prefix}-${idInjection.current++}`; 598 } 599 ); 600 return idRef; 601}; 602var __defProp$1m = Object.defineProperty; 603var __defProps$19 = Object.defineProperties; 604var __getOwnPropDescs$19 = Object.getOwnPropertyDescriptors; 605var __getOwnPropSymbols$1n = Object.getOwnPropertySymbols; 606var __hasOwnProp$1n = Object.prototype.hasOwnProperty; 607var __propIsEnum$1n = Object.prototype.propertyIsEnumerable; 608var __defNormalProp$1m = (obj, key, value) => key in obj ? __defProp$1m(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 609var __spreadValues$1m = (a, b) => { 610 for (var prop in b || (b = {})) 611 if (__hasOwnProp$1n.call(b, prop)) 612 __defNormalProp$1m(a, prop, b[prop]); 613 if (__getOwnPropSymbols$1n) 614 for (var prop of __getOwnPropSymbols$1n(b)) { 615 if (__propIsEnum$1n.call(b, prop)) 616 __defNormalProp$1m(a, prop, b[prop]); 617 } 618 return a; 619}; 620var __spreadProps$19 = (a, b) => __defProps$19(a, __getOwnPropDescs$19(b)); 621const spinnersProps = { 622 size: { 623 type: String, 624 default: "sm" 625 }, 626 forceLightTheme: Boolean, 627 forceDarkTheme: Boolean, 628 type: { 629 type: String, 630 default: "blink" 631 } 632}; 633const _hoisted_1$z = ["fill"]; 634const _hoisted_2$d = ["fill"]; 635const _hoisted_3$7 = ["id"]; 636const _hoisted_4$4 = ["id"]; 637const _sfc_main$12 = /* @__PURE__ */ defineComponent(__spreadProps$19(__spreadValues$1m({}, { 638 name: "ZmSpinners" 639}), { 640 __name: "spinners", 641 props: spinnersProps, 642 setup(__props) { 643 const ns = useNamespace("spinners"); 644 const id1 = useId().value; 645 const id2 = useId().value; 646 return (_ctx, _cache) => { 647 return openBlock(), createElementBlock("span", { 648 class: normalizeClass([unref(ns).b(), unref(ns).is(_ctx.size)]) 649 }, [ 650 _ctx.type === "blink" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, renderList(8, (i) => { 651 return createBaseVNode("span", { 652 key: i, 653 class: normalizeClass([unref(ns).e("spinner"), unref(ns).is("light", _ctx.forceLightTheme), unref(ns).is("dark", _ctx.forceDarkTheme)]) 654 }, null, 2); 655 }), 64)) : (openBlock(), createElementBlock("svg", { 656 key: 1, 657 class: normalizeClass(unref(ns).e("circle")), 658 xmlns: "http://www.w3.org/2000/svg", 659 width: "16", 660 height: "16",
661 viewBox: "0 0 16 16" 662 }, [ 663 createBaseVNode("path", { 664 "fill-rule": "evenodd", 665 "clip-rule": "evenodd", 666 d: "M8 2C4.68629 2 2 4.68629 2 8H0C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8H14C14 4.68629 11.3137 2 8 2Z", 667 fill: `url(#${unref(id1)})` 668 }, null, 8, _hoisted_1$z), 669 createBaseVNode("path", { 670 "fill-rule": "evenodd", 671 "clip-rule": "evenodd", 672 d: "M8 14C11.3137 14 14 11.3137 14 8L16 8C16 12.4183 12.4183 16 8 16C3.58172 16 -3.13124e-07 12.4183 -6.99382e-07 8C-7.47664e-07 7.44772 0.447714 7 0.999999 7C1.55228 7 2 7.44772 2 8C2 11.3137 4.68629 14 8 14Z", 673 fill: `url(#${unref(id2)})` 674 }, null, 8, _hoisted_2$d), 675 createBaseVNode("defs", null, [ 676 createBaseVNode("linearGradient", { 677 id: unref(id1), 678 x1: "16", 679 y1: "8", 680 x2: "-4.47035e-07", 681 y2: "8", 682 gradientUnits: "userSpaceOnUse" 683 }, _cache[0] || (_cache[0] = [ 684 createBaseVNode("stop", { 685 offset: "0.0622558", 686 "stop-color": "currentColor", 687 "stop-opacity": "0.5" 688 }, null, -1), 689 createBaseVNode("stop", { 690 offset: "1", 691 "stop-color": "currentColor", 692 "stop-opacity": "0" 693 }, null, -1) 694 ]), 8, _hoisted_3$7), 695 createBaseVNode("linearGradient", { 696 id: unref(id2), 697 x1: "2.26212e-06", 698 y1: "8", 699 x2: "16", 700 y2: "8", 701 gradientUnits: "userSpaceOnUse" 702 }, _cache[1] || (_cache[1] = [ 703 createBaseVNode("stop", { "stop-color": "currentColor" }, null, -1), 704 createBaseVNode("stop", { 705 offset: "0.9375", 706 "stop-color": "currentColor", 707 "stop-opacity": "0.5" 708 }, null, -1) 709 ]), 8, _hoisted_4$4) 710 ]) 711 ], 2)) 712 ], 2); 713 }; 714 } 715})); 716const LIVE_REGION_TIMEOUT_DELAY = 7e3; 717let liveAnnouncer = null; 718function announce(message = "", assertiveness = "assertive", timeout = LIVE_REGION_TIMEOUT_DELAY) { 719 /* istanbul ignore next @preserve */ 720 if (!isClient) { 721 return; 722 } 723 if (!liveAnnouncer) { 724 liveAnnouncer = new LiveAnnouncer(); 725 } 726 const tryAnnounce = () => { 727 if (liveAnnouncer) { 728 liveAnnouncer.announce(message, assertiveness, timeout); 729 } 730 }; 731 setTimeout(tryAnnounce, 60); 732} 733function destroyAnnouncer() { 734 if (liveAnnouncer) { 735 liveAnnouncer.destroy(); 736 liveAnnouncer = null; 737 } 738} 739class LiveAnnouncer { 740 constructor() { 741 this.node = document.createElement("div"); 742 this.node.dataset.liveAnnouncer = "true"; 743 Object.assign(this.node.style, { 744 border: 0, 745 clip: "rect(0 0 0 0)", 746 clipPath: "inset(50%)", 747 height: "1px", 748 margin: "-1px", 749 overflow: "hidden", 750 padding: 0, 751 position: "absolute", 752 width: "1px", 753 whiteSpace: "nowrap" 754 }); 755 this.assertiveLog = this.createLog("assertive"); 756 this.node.appendChild(this.assertiveLog); 757 this.politeLog = this.createLog("polite"); 758 this.node.appendChild(this.politeLog); 759 document.body.prepend(this.node); 760 } 761 createLog(ariaLive) { 762 const node = document.createElement("div"); 763 node.setAttribute("role", "log"); 764 node.setAttribute("aria-live", ariaLive); 765 return node; 766 } 767 destroy() { 768 /* istanbul ignore next @preserve */ 769 if (!this.node) { 770 return; 771 } 772 document.body.removeChild(this.node); 773 this.node = null; 774 } 775 announce(message, assertiveness = "assertive", timeout) { 776 /* istanbul ignore next @preserve */ 777 if (!this.node) { 778 return; 779 } 780 if (assertiveness === "assertive") { 781 this.assertiveLog.innerText = message; 782 } else { 783 this.politeLog.innerText = message; 784 } 785 setTimeout(() => { 786 const log = assertiveness === "assertive" ? this.assertiveLog : this.politeLog; 787 log.innerText = ""; 788 }, timeout); 789 } 790 /* istanbul ignore next @preserve */ 791 clear(assertiveness) { 792 if (!this.node) { 793 return; 794 } 795 if (!assertiveness || assertiveness === "assertive") { 796 this.assertiveLog.innerHTML = ""; 797 } 798 if (!assertiveness || assertiveness === "polite") { 799 this.politeLog.innerHTML = ""; 800 } 801 } 802} 803var __defProp$1l = Object.defineProperty; 804var __defProps$18 = Object.defineProperties; 805var __getOwnPropDescs$18 = Object.getOwnPropertyDescriptors; 806var __getOwnPropSymbols$1m = Object.getOwnPropertySymbols; 807var __hasOwnProp$1m = Object.prototype.hasOwnProperty; 808var __propIsEnum$1m = Object.prototype.propertyIsEnumerable; 809var __defNormalProp$1l = (obj, key, value) => key in obj ? __defProp$1l(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 810var __spreadValues$1l = (a, b) => { 811 for (var prop in b || (b = {})) 812 if (__hasOwnProp$1m.call(b, prop)) 813 __defNormalProp$1l(a, prop, b[prop]); 814 if (__getOwnPropSymbols$1m) 815 for (var prop of __getOwnPropSymbols$1m(b)) { 816 if (__propIsEnum$1m.call(b, prop)) 817 __defNormalProp$1l(a, prop, b[prop]); 818 } 819 return a; 820}; 821var __spreadProps$18 = (a, b) => __defProps$18(a, __getOwnPropDescs$18(b)); 822const loadingProps = { 823 size: { 824 type: String, 825 default: "sm" 826 }, 827 customClass: String, 828 fullscreen: Boolean, 829 text: String, 830 container: Boolean 831}; 832const loadingEmits = ["after-leave"]; 833const _sfc_main$11 = /* @__PURE__ */ defineComponent(__spreadProps$18(__spreadValues$1l({}, {
834 name: "ZmLoading" 835}), { 836 __name: "loading", 837 props: loadingProps, 838 emits: loadingEmits, 839 setup(__props, { expose: __expose, emit: __emit }) { 840 const props = __props; 841 const emit = __emit; 842 const ns = useNamespace("loading"); 843 const visible = ref(true); 844 const containerClass = computed(() => { 845 const { customClass, fullscreen } = props; 846 const ret = [ns.b(), customClass, ns.is("fullscreen", fullscreen)]; 847 return ret; 848 }); 849 const onTransitionAfterLeave = () => { 850 emit("after-leave"); 851 }; 852 const close = () => { 853 visible.value = false; 854 }; 855 onMounted(() => { 856 announce("Loading"); 857 }); 858 onBeforeMount(() => { 859 destroyAnnouncer(); 860 }); 861 __expose({ 862 close 863 }); 864 return (_ctx, _cache) => { 865 return openBlock(), createBlock(Transition, { 866 name: `${unref(ns).namespace}-loading-fade`, 867 appear: "", 868 onAfterLeave: onTransitionAfterLeave 869 }, { 870 default: withCtx(() => [ 871 withDirectives(createBaseVNode("div", { 872 class: normalizeClass(containerClass.value) 873 }, [ 874 createBaseVNode("div", { 875 class: normalizeClass(unref(ns).e("main")) 876 }, [ 877 createBaseVNode("div", { 878 class: normalizeClass([unref(ns).e("wrapper"), unref(ns).is("active", _ctx.container)]) 879 }, [ 880 createVNode(_sfc_main$12, { size: _ctx.size }, null, 8, ["size"]), 881 _ctx.text ? (openBlock(), createElementBlock("div", { 882 key: 0, 883 class: normalizeClass([unref(ns).e("text"), unref(ns).is("lg", _ctx.size === "lg")]) 884 }, toDisplayString(_ctx.text), 3)) : createCommentVNode("", true) 885 ], 2) 886 ], 2) 887 ], 2), [ 888 [vShow, visible.value] 889 ]) 890 ]), 891 _: 1 892 }, 8, ["name"]); 893 }; 894 } 895})); 896const INSTANCE_KEY = Symbol("ZmLoadingInstance"); 897const FLOATING_CHILD_CLASS_NAME = "relative"; 898const LOCK_CLASS_NAME = "hidden"; 899var __defProp$1k = Object.defineProperty; 900var __defProps$17 = Object.defineProperties; 901var __getOwnPropDescs$17 = Object.getOwnPropertyDescriptors; 902var __getOwnPropSymbols$1l = Object.getOwnPropertySymbols; 903var __hasOwnProp$1l = Object.prototype.hasOwnProperty; 904var __propIsEnum$1l = Object.prototype.propertyIsEnumerable; 905var __defNormalProp$1k = (obj, key, value) => key in obj ? __defProp$1k(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 906var __spreadValues$1k = (a, b) => { 907 for (var prop in b || (b = {})) 908 if (__hasOwnProp$1l.call(b, prop)) 909 __defNormalProp$1k(a, prop, b[prop]); 910 if (__getOwnPropSymbols$1l) 911 for (var prop of __getOwnPropSymbols$1l(b)) { 912 if (__propIsEnum$1l.call(b, prop)) 913 __defNormalProp$1k(a, prop, b[prop]); 914 } 915 return a; 916}; 917var __spreadProps$17 = (a, b) => __defProps$17(a, __getOwnPropDescs$17(b)); 918let loadingAPISingleton; 919const createLoadingAPI = function(options = {}) { 920 /* istanbul ignore next @preserve */ 921 if (!isClient) 922 return void 0; 923 if (loadingAPISingleton) { 924 return loadingAPISingleton; 925 } 926 const createLoadingApp2 = () => { 927 const initializeLoading = (options2) => { 928 const target = options2.target; 929 const LoadingInstance = createApp({ 930 setup(_, { expose }) { 931 const instance2 = getCurrentInstance(); 932 const ns = useNamespace("loading-parent"); 933 const loadingRef = ref(); 934 const close = () => { 935 var _a; 936 (_a = loadingRef.value) == null ? void 0 : _a.close(); 937 }; 938 const onTransitionAfterLeave = () => { 939 if (hasClass(target, ns.m(FLOATING_CHILD_CLASS_NAME))) { 940 removeClass(target, ns.m(FLOATING_CHILD_CLASS_NAME)); 941 } 942 if (hasClass(target, ns.m(LOCK_CLASS_NAME))) { 943 removeClass(target, ns.m(LOCK_CLASS_NAME)); 944 } 945 const app = instance2.appContext.app; 946 app.unmount(); 947 loadingAPISingleton = void 0; 948 }; 949 expose({ 950 close 951 });
952 const addClassForTarget = () => { 953 if (!canMakeChildFloat(target)) { 954 addClass(target, ns.m(FLOATING_CHILD_CLASS_NAME)); 955 } 956 if (!hasClass(target, ns.m(LOCK_CLASS_NAME))) { 957 addClass(target, ns.m(LOCK_CLASS_NAME)); 958 } 959 }; 960 onMounted(() => { 961 addClassForTarget(); 962 }); 963 return () => { 964 delete options2.target; 965 return h(_sfc_main$11, __spreadProps$17(__spreadValues$1k({ 966 ref: loadingRef 967 }, options2), { 968 onAfterLeave: onTransitionAfterLeave 969 })); 970 }; 971 } 972 }).mount(document.createElement("div")); 973 target.appendChild(LoadingInstance.$el); 974 return LoadingInstance; 975 }; 976 const instance = initializeLoading(resolveOptions(options)); 977 return instance; 978 }; 979 loadingAPISingleton = createLoadingApp2(); 980 return loadingAPISingleton; 981}; 982const resolveOptions = (options) => { 983 var _a; 984 let target = options.target; 985 if (isString(target)) { 986 target = document.querySelector(target); 987 } 988 const finalTarget = target || document.body; 989 return { 990 target: target || document.body, 991 text: options.text || "", 992 customClass: options.customClass || "", 993 size: options.size || "lg", 994 fullscreen: finalTarget === document.body, 995 container: (_a = options.container) != null ? _a : true 996 }; 997}; 998var __defProp$1j = Object.defineProperty; 999var __defProps$16 = Object.defineProperties; 1000var __getOwnPropDescs$16 = Object.getOwnPropertyDescriptors; 1001var __getOwnPropSymbols$1k = Object.getOwnPropertySymbols; 1002var __hasOwnProp$1k = Object.prototype.hasOwnProperty; 1003var __propIsEnum$1k = Object.prototype.propertyIsEnumerable; 1004var __defNormalProp$1j = (obj, key, value) => key in obj ? __defProp$1j(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 1005var __spreadValues$1j = (a, b) => { 1006 for (var prop in b || (b = {})) 1007 if (__hasOwnProp$1k.call(b, prop)) 1008 __defNormalProp$1j(a, prop, b[prop]); 1009 if (__getOwnPropSymbols$1k) 1010 for (var prop of __getOwnPropSymbols$1k(b)) { 1011 if (__propIsEnum$1k.call(b, prop)) 1012 __defNormalProp$1j(a, prop, b[prop]); 1013 } 1014 return a; 1015}; 1016var __spreadProps$16 = (a, b) => __defProps$16(a, __getOwnPropDescs$16(b)); 1017const getAttributes = (el) => { 1018 const text = el.getAttribute("element-loading-text") || ""; 1019 const customClass = el.getAttribute("element-loading-custom-class") || ""; 1020 const size2 = el.getAttribute("element-loading-size") || "md"; 1021 const hideContainer = el.getAttribute("element-loading-container") === "false"; 1022 return { text, customClass, size: size2, container: !hideContainer }; 1023}; 1024const createLoadingApp = (el) => { 1025 const options = __spreadValues$1j({}, getAttributes(el)); 1026 const target = el; 1027 const initializeLoading = (options2) => { 1028 const LoadingInstance = createApp({ 1029 setup(_, { expose }) { 1030 const instance = getCurrentInstance(); 1031 const ns = useNamespace("loading-parent"); 1032 const loadingRef = ref(); 1033 const close = () => { 1034 var _a; 1035 (_a = loadingRef.value) == null ? void 0 : _a.close(); 1036 }; 1037 const onTransitionAfterLeave = () => { 1038 if (hasClass(target, ns.m(FLOATING_CHILD_CLASS_NAME))) { 1039 removeClass(target, ns.m(FLOATING_CHILD_CLASS_NAME)); 1040 } 1041 const app = getApp(); 1042 if (el[INSTANCE_KEY] === LoadingInstance) { 1043 el[INSTANCE_KEY] = void 0; 1044 } 1045 app.unmount(); 1046 }; 1047 const addClassForTarget = () => { 1048 if (!canMakeChildFloat(target)) { 1049 addClass(target, ns.m(FLOATING_CHILD_CLASS_NAME)); 1050 } 1051 }; 1052 const getApp = () => { 1053 return instance.appContext.app; 1054 }; 1055 expose({ 1056 close 1057 }); 1058 onMounted(() => { 1059 addClassForTarget(); 1060 }); 1061 return () => { 1062 return h(_sfc_main$11, __spreadProps$16(__spreadValues$1j({ 1063 ref: loadingRef 1064 }, options2), { 1065 onAfterLeave: onTransitionAfterLeave 1066 })); 1067 }; 1068 } 1069 }).mount(document.createElement("div")); 1070 if (target) { 1071 target.appendChild(LoadingInstance.$el); 1072 } 1073 return LoadingInstance; 1074 };
1075 el[INSTANCE_KEY] = initializeLoading(options); 1076}; 1077const ZmLoadingDirective = { 1078 mounted(el, binding) { 1079 if (binding.value) { 1080 createLoadingApp(el); 1081 } 1082 }, 1083 updated(el, binding) { 1084 const loadingInstance = el[INSTANCE_KEY]; 1085 if (binding.oldValue !== binding.value) { 1086 if (binding.value) { 1087 createLoadingApp(el); 1088 } else { 1089 loadingInstance == null ? void 0 : loadingInstance.close(); 1090 } 1091 } 1092 }, 1093 unmounted(el) { 1094 const loadingInstance = el[INSTANCE_KEY]; 1095 loadingInstance == null ? void 0 : loadingInstance.close(); 1096 } 1097}; 1098const ZmLoading = { 1099 install(app) { 1100 app.directive("loading", ZmLoadingDirective); 1101 app.config.globalProperties.$loading = createLoadingAPI; 1102 app.component(_sfc_main$11.name, _sfc_main$11); 1103 app.component(_sfc_main$12.name, _sfc_main$12); 1104 }, 1105 directive: ZmLoadingDirective, 1106 create: createLoadingAPI, 1107 loadingComponent: _sfc_main$11, 1108 spinnersComponent: _sfc_main$12 1109}; 1110function useRTL() { 1111 const ZmContext2 = inject(CONTEXT_INJECTION_KEY, void 0); 1112 return computed(() => { 1113 if (ZmContext2) { 1114 return ZmContext2.direction.value === "rtl"; 1115 } else { 1116 /* istanbul ignore next @preserve */ 1117 return false; 1118 } 1119 }); 1120} 1121var __defProp$1i = Object.defineProperty; 1122var __defProps$15 = Object.defineProperties; 1123var __getOwnPropDescs$15 = Object.getOwnPropertyDescriptors; 1124var __getOwnPropSymbols$1j = Object.getOwnPropertySymbols; 1125var __hasOwnProp$1j = Object.prototype.hasOwnProperty; 1126var __propIsEnum$1j = Object.prototype.propertyIsEnumerable; 1127var __defNormalProp$1i = (obj, key, value) => key in obj ? __defProp$1i(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 1128var __spreadValues$1i = (a, b) => { 1129 for (var prop in b || (b = {})) 1130 if (__hasOwnProp$1j.call(b, prop)) 1131 __defNormalProp$1i(a, prop, b[prop]); 1132 if (__getOwnPropSymbols$1j) 1133 for (var prop of __getOwnPropSymbols$1j(b)) { 1134 if (__propIsEnum$1j.call(b, prop)) 1135 __defNormalProp$1i(a, prop, b[prop]); 1136 } 1137 return a; 1138}; 1139var __spreadProps$15 = (a, b) => __defProps$15(a, __getOwnPropDescs$15(b)); 1140const iconProps = { 1141 size: { 1142 type: [String, Number] 1143 }, 1144 color: { 1145 type: String 1146 }, 1147 ariaHidden: { 1148 type: Boolean, 1149 default: true 1150 }, 1151 shouldRTL: Boolean 1152}; 1153const _hoisted_1$y = ["aria-hidden"]; 1154const _sfc_main$10 = /* @__PURE__ */ defineComponent(__spreadProps$15(__spreadValues$1i({}, { 1155 name: "ZmIcon", 1156 inheritAttrs: false 1157}), { 1158 __name: "icon", 1159 props: iconProps, 1160 setup(__props) { 1161 const props = __props; 1162 const isRTL = useRTL(); 1163 const ns = useNamespace("icon"); 1164 const style = computed(() => { 1165 const { size: size2, color } = props; 1166 if (!size2 && !color) { 1167 if (props.shouldRTL) { 1168 return { 1169 transform: isRTL.value ? "scaleX(-1)" : void 0 1170 }; 1171 } 1172 return {}; 1173 } 1174 return { 1175 fontSize: addUnit(size2), 1176 color, 1177 transform: props.shouldRTL && isRTL.value ? "scaleX(-1)" : void 0 1178 }; 1179 }); 1180 return (_ctx, _cache) => { 1181 return openBlock(), createElementBlock("i", mergeProps({ 1182 class: unref(ns).b(), 1183 style: style.value, 1184 "aria-hidden": _ctx.ariaHidden 1185 }, _ctx.$attrs), [ 1186 renderSlot(_ctx.$slots, "default") 1187 ], 16, _hoisted_1$y); 1188 }; 1189 } 1190})); 1191const ZmIcon = withInstall(_sfc_main$10); 1192var __defProp$1h = Object.defineProperty; 1193var __defProps$14 = Object.defineProperties; 1194var __getOwnPropDescs$14 = Object.getOwnPropertyDescriptors; 1195var __getOwnPropSymbols$1i = Object.getOwnPropertySymbols; 1196var __hasOwnProp$1i = Object.prototype.hasOwnProperty; 1197var __propIsEnum$1i = Object.prototype.propertyIsEnumerable; 1198var __defNormalProp$1h = (obj, key, value) => key in obj ? __defProp$1h(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 1199var __spreadValues$1h = (a, b) => { 1200 for (var prop in b || (b = {})) 1201 if (__hasOwnProp$1i.call(b, prop)) 1202 __defNormalProp$1h(a, prop, b[prop]); 1203 if (__getOwnPropSymbols$1i) 1204 for (var prop of __getOwnPropSymbols$1i(b)) { 1205 if (__propIsEnum$1i.call(b, prop)) 1206 __defNormalProp$1h(a, prop, b[prop]); 1207 } 1208 return a; 1209}; 1210var __spreadProps$14 = (a, b) => __defProps$14(a, __getOwnPropDescs$14(b)); 1211const visuallyHiddenProps = { 1212 style: { 1213 type: [String, Object, Array], 1214 default: () => ({}) 1215 }, 1216 id: String 1217}; 1218const _hoisted_1$x = ["id"]; 1219const _sfc_main$$ = /* @__PURE__ */ defineComponent(__spreadProps$14(__spreadValues$1h({}, { 1220 name: "ZmVisuallyHidden" 1221}), { 1222 __name: "visually-hidden", 1223 props: visuallyHiddenProps, 1224 setup(__props) { 1225 const props = __props; 1226 const computedStyle = computed(() => { 1227 return [ 1228 props.style, 1229 { 1230 position: "absolute", 1231 border: 0, 1232 width: "1px", 1233 height: "1px", 1234 padding: 0, 1235 margin: "-1px", 1236 overflow: "hidden", 1237 clip: "rect(0, 0, 0, 0)", 1238 userSelect: "none", 1239 // prevent text selection, copy dropdown button will copy AX text 1240 webkitUserSelect: "none",
1241 // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe 1242 whiteSpace: "nowrap", 1243 wordWrap: "normal" 1244 } 1245 ]; 1246 }); 1247 return (_ctx, _cache) => { 1248 return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, { 1249 id: _ctx.id, 1250 "aria-hidden": "true", 1251 style: computedStyle.value 1252 }), [ 1253 renderSlot(_ctx.$slots, "default") 1254 ], 16, _hoisted_1$x); 1255 }; 1256 } 1257})); 1258const ZmVisuallyHidden = withInstall(_sfc_main$$); 1259const messages$c = { 1260 "en-US": { 1261 "basic": { 1262 "close": "Close", 1263 "clear": "Clear", 1264 "loading": "Loading", 1265 "selectAll": "Select all", 1266 "blank": "Blank", 1267 "collapse": "View less", 1268 "expand": "View more", 1269 "settings": "Settings", 1270 "remove": "Remove", 1271 "edit": "Edit", 1272 "save": "Save", 1273 "cancel": "Cancel", 1274 "fieldRequired": "The field is required.", 1275 "reset": "Reset", 1276 "copied": "Copied", 1277 "dismiss": "Dismiss", 1278 "ok": "OK", 1279 "prev": "Previous", 1280 "next": "Next", 1281 "optional": "(optional)", 1282 "viewAll": "View all", 1283 "selectAllWithCount": "Select all ({count})", 1284 "done": "Done", 1285 "stop": "Stop", 1286 "generating": "Generating", 1287 "update": "Update", 1288 "insert": "Insert", 1289 "replace": "Replace", 1290 "discard": "Discard", 1291 "retry": "Retry", 1292 "refine": "Refine", 1293 "show": "Show", 1294 "hide": "Hide", 1295 "summarizing": "Summarizing", 1296 "showDetails": "Show details", 1297 "copyLink": "Link copied" 1298 } 1299 }, 1300 "de-DE": { 1301 "basic": { 1302 "close": "SchlieÃen", 1303 "clear": "Löschen", 1304 "loading": "Wird geladen", 1305 "selectAll": "Alle auswählen", 1306 "blank": "Leer", 1307 "collapse": "Weniger anzeigen", 1308 "expand": "Mehr anzeigen", 1309 "settings": "Einstellungen", 1310 "remove": "Entfernen", 1311 "edit": "Bearbeiten", 1312 "save": "Speichern", 1313 "cancel": "Abbrechen", 1314 "fieldRequired": "Dies ist ein Pflichtfeld.", 1315 "reset": "Zurücksetzen", 1316 "copied": "Kopiert", 1317 "dismiss": "Verwerfen", 1318 "prev": "Zurück", 1319 "next": "Weiter", 1320 "ok": "Ok", 1321 "optional": "(optional)", 1322 "viewAll": "Alle anzeigen", 1323 "selectAllWithCount": "Alles auswählen ({count})", 1324 "done": "Fertig", 1325 "stop": "Beenden", 1326 "generating": "Wird generiert", 1327 "update": "Aktualisieren", 1328 "insert": "Einfügen", 1329 "replace": "Ersetzen", 1330 "discard": "Verwerfen", 1331 "retry": "Erneut versuchen", 1332 "refine": "Verbessern", 1333 "show": "Anzeigen", 1334 "hide": "Ausblenden", 1335 "summarizing": "Zusammenfassung wird erstellt", 1336 "showDetails": "Details anzeigen", 1337 "copyLink": "Link kopiert" 1338 } 1339 }, 1340 "es-ES": { 1341 "basic": { 1342 "close": "Cerrar", 1343 "clear": "Borrar", 1344 "loading": "Cargando", 1345 "selectAll": "Seleccionar todo", 1346 "blank": "En blanco", 1347 "collapse": "Ver menos", 1348 "expand": "Ver más", 1349 "settings": "Configuración", 1350 "remove": "Eliminar", 1351 "edit": "Editar", 1352 "save": "Guardar", 1353 "cancel": "Cancelar", 1354 "fieldRequired": "El campo es obligatorio.", 1355 "reset": "Restablecer", 1356 "copied": "Copiado", 1357 "dismiss": "Descartar", 1358 "prev": "Anterior", 1359 "next": "Siguiente", 1360 "ok": "Aceptar", 1361 "optional": "(opcional)", 1362 "viewAll": "Ver todos", 1363 "selectAllWithCount": "Seleccionar todo ({count})", 1364 "done": "Listo", 1365 "stop": "Detener", 1366 "generating": "Generando", 1367 "update": "Actualizar", 1368 "insert": "Insertar", 1369 "replace": "Reemplazar", 1370 "discard": "Descartar", 1371 "retry": "Reintentar", 1372 "refine": "Refinar", 1373 "show": "Mostrar", 1374 "hide": "Ocultar", 1375 "summarizing": "Resumiendo", 1376 "showDetails": "Mostrar detalles", 1377 "copyLink": "Enlace copiado" 1378 } 1379 }, 1380 "fr-FR": { 1381 "basic": { 1382 "close": "Fermer", 1383 "clear": "Effacer", 1384 "loading": "Chargement en cours", 1385 "selectAll": "Sélectionner tout", 1386 "blank": "Vide", 1387 "collapse": "Afficher moins", 1388 "expand": "Afficher plus", 1389 "settings": "Paramètres", 1390 "remove": "Supprimer", 1391 "edit": "Modifier", 1392 "save": "Enregistrer", 1393 "cancel": "Annuler", 1394 "fieldRequired": "Le champ est obligatoire.", 1395 "reset": "Réinitialiser", 1396 "copied": "Copié", 1397 "dismiss": "Ignorer", 1398 "prev": "Précédent", 1399 "next": "Suivant", 1400 "ok": "OK", 1401 "optional": "(optionnel)", 1402 "viewAll": "Afficher tout", 1403 "selectAllWithCount": "Sélectionner tout ({count})", 1404 "done": "Terminé", 1405 "stop": "Arrêter", 1406 "generating": "Génération en cours", 1407 "update": "Mettre à jour", 1408 "insert": "Insérer", 1409 "replace": "Remplacer", 1410 "discard": "Supprimer", 1411 "retry": "Réessayer", 1412 "refine": "Affiner", 1413 "show": "Afficher", 1414 "hide": "Masquer", 1415 "summarizing": "Synthèse en cours",
1416 "showDetails": "Afficher les détails", 1417 "copyLink": "Lien copié" 1418 } 1419 }, 1420 "id-ID": { 1421 "basic": { 1422 "close": "Tutup", 1423 "clear": "Bersihkan", 1424 "loading": "Memuat", 1425 "selectAll": "Pilih semua", 1426 "blank": "Kosong", 1427 "collapse": "Tampilkan lebih sedikit", 1428 "expand": "Lihat lebih banyak", 1429 "settings": "Pengaturan", 1430 "remove": "Hapus", 1431 "edit": "Edit", 1432 "save": "Simpan", 1433 "cancel": "Batal", 1434 "fieldRequired": "Bidang ini wajib diisi.", 1435 "reset": "Atur ulang", 1436 "copied": "Disalin", 1437 "dismiss": "Tolak", 1438 "prev": "Sebelumnya", 1439 "next": "Selanjutnya", 1440 "ok": "Oke", 1441 "optional": "(opsional)", 1442 "viewAll": "Lihat semua", 1443 "selectAllWithCount": "Pilih semua ({count})", 1444 "done": "Selesai", 1445 "stop": "Hentikan", 1446 "generating": "Membuat", 1447 "update": "Perbarui", 1448 "insert": "Sisipkan", 1449 "replace": "Ganti", 1450 "discard": "Buang", 1451 "retry": "Coba lagi", 1452 "refine": "Sempurnakan", 1453 "show": "Tampilkan", 1454 "hide": "Sembunyikan", 1455 "summarizing": "Meringkas", 1456 "showDetails": "Tampilkan detail", 1457 "copyLink": "Tautan disalin" 1458 } 1459 }, 1460 "it-IT": { 1461 "basic": { 1462 "close": "Chiudi", 1463 "clear": "Cancella", 1464 "loading": "Caricamento in corso", 1465 "selectAll": "Seleziona tutto", 1466 "blank": "Vuoto", 1467 "collapse": "Visualizza meno", 1468 "expand": "Visualizza altro", 1469 "settings": "Impostazioni", 1470 "remove": "Rimuovi", 1471 "edit": "Modifica", 1472 "save": "Salva", 1473 "cancel": "Annulla", 1474 "fieldRequired": "Il campo è obbligatorio.", 1475 "reset": "Reimposta", 1476 "copied": "Copiato", 1477 "dismiss": "Ignora", 1478 "prev": "Precedente", 1479 "next": "Avanti", 1480 "ok": "OK", 1481 "optional": "(facoltativo)", 1482 "viewAll": "Mostra tutti", 1483 "selectAllWithCount": "Seleziona tutti ({count})", 1484 "done": "Fine", 1485 "stop": "Interrompi", 1486 "generating": "Generazione in corso", 1487 "update": "Aggiorna", 1488 "insert": "Inserisci", 1489 "replace": "Sostituisci", 1490 "discard": "Elimina", 1491 "retry": "Riprova", 1492 "refine": "Perfeziona", 1493 "show": "Mostra", 1494 "hide": "Nascondi", 1495 "summarizing": "Riepilogando", 1496 "showDetails": "Mostra dettagli", 1497 "copyLink": "Link copiato" 1498 } 1499 }, 1500 "jp-JP": { 1501 "basic": { 1502 "close": "éãã", 1503 "clear": "ã¯ãªã¢", 1504 "loading": "èªã¿è¾¼ã¿ä¸", 1505 "selectAll": "ãã¹ã¦é¸æ", 1506 "blank": "空æ¬", 1507 "collapse": "ç°¡æè¡¨ç¤º", 1508 "expand": "詳細ã表示", 1509 "settings": "è¨å®", 1510 "remove": "åé¤", 1511 "edit": "ç·¨é", 1512 "save": "ä¿å", 1513 "cancel": "ãã£ã³ã»ã«", 1514 "fieldRequired": "ãã£ã¼ã«ãã¯å¿ é ã§ãã", 1515 "reset": "ãªã»ãã", 1516 "copied": "ã³ãã¼ãã¾ãã", 1517 "dismiss": "éãã", 1518 "prev": "åã¸", 1519 "next": "次ã¸", 1520 "ok": "OK", 1521 "optional": "ï¼ãªãã·ã§ã³ï¼", 1522 "viewAll": "ãã¹ã¦ã表示", 1523 "selectAllWithCount": "ãã¹ã¦é¸æï¼{count}ï¼", 1524 "done": "å®äº", 1525 "stop": "忢", 1526 "generating": "使ä¸", 1527 "update": "æ´æ°", 1528 "insert": "æ¿å ¥", 1529 "replace": "ç½®æ", 1530 "discard": "ç ´æ£", 1531 "retry": "å試è¡", 1532 "refine": "æ¹å", 1533 "show": "表示", 1534 "hide": "é表示", 1535 "summarizing": "è¦ç´ãã¦ãã¾ã", 1536 "showDetails": "詳細ã表示", 1537 "copyLink": "ãªã³ã¯ãã³ãã¼ãã¾ãã" 1538 } 1539 }, 1540 "ko-KO": { 1541 "basic": { 1542 "close": "ë«ê¸°", 1543 "clear": "ì§ì°ê¸°", 1544 "loading": "ë¡ë ì¤", 1545 "selectAll": "모ë ì í", 1546 "blank": "ë¹ì´ ìì", 1547 "collapse": "ê°ë¨í 보기", 1548 "expand": "ë 보기", 1549 "settings": "ì¤ì ", 1550 "remove": "ì ê±°", 1551 "edit": "í¸ì§", 1552 "save": "ì ì¥", 1553 "cancel": "ì·¨ì", 1554 "fieldRequired": "ì´ íëë íìì ëë¤.", 1555 "reset": "ì¬ì¤ì ", 1556 "copied": "ë³µì¬ë¨", 1557 "dismiss": "ë«ê¸°", 1558 "prev": "ì´ì ", 1559 "next": "ë¤ì", 1560 "ok": "íì¸", 1561 "optional": "(ì í ì¬í)", 1562 "viewAll": "모ë 보기", 1563 "selectAllWithCount": "모ë ì í({count})", 1564 "done": "ìë£", 1565 "stop": "ì¤ì§", 1566 "generating": "ìì± ì¤", 1567 "update": "ì ë°ì´í¸", 1568 "insert": "ì½ì ", 1569 "replace": "ë°ê¾¸ê¸°", 1570 "discard": "ìì ", 1571 "retry": "ë¤ì ìë", 1572 "refine": "ë¤ë¬ê¸°", 1573 "show": "íì", 1574 "hide": "ì¨ê¸°ê¸°", 1575 "summarizing": "ìì½ ì¤",
1576 "showDetails": "ì¸ë¶ ì ë³´ íì", 1577 "copyLink": "ë§í¬ ë³µì¬ë¨" 1578 } 1579 }, 1580 "nl-NL": { 1581 "basic": { 1582 "close": "Sluiten", 1583 "clear": "Wissen", 1584 "loading": "Laden", 1585 "selectAll": "Alles selecteren", 1586 "blank": "Leeg", 1587 "collapse": "Minder weergeven", 1588 "expand": "Meer weergeven", 1589 "settings": "Instellingen", 1590 "remove": "Verwijderen", 1591 "edit": "Bewerken", 1592 "save": "Opslaan", 1593 "cancel": "Annuleren", 1594 "fieldRequired": "Het veld is verplicht.", 1595 "reset": "Terugzetten", 1596 "copied": "Gekopieerd", 1597 "dismiss": "Afwijzen", 1598 "prev": "Vorige", 1599 "next": "Volgende", 1600 "ok": "OK", 1601 "optional": "(optioneel)", 1602 "viewAll": "Alles weergeven", 1603 "selectAllWithCount": "Alles selecteren ({count})", 1604 "done": "Klaar", 1605 "stop": "Stoppen", 1606 "generating": "Bezig met genereren", 1607 "update": "Bijwerken", 1608 "insert": "Invoegen", 1609 "replace": "Vervangen", 1610 "discard": "Verwijderen", 1611 "retry": "Opnieuw proberen", 1612 "refine": "Verfijnen", 1613 "show": "Weergeven", 1614 "hide": "Verbergen", 1615 "summarizing": "Aan het samenvatten", 1616 "showDetails": "Details weergeven", 1617 "copyLink": "Link gekopieerd" 1618 } 1619 }, 1620 "pl-PL": { 1621 "basic": { 1622 "close": "Zamknij", 1623 "clear": "WyczyÅÄ", 1624 "loading": "Åadowanie", 1625 "selectAll": "Wybierz wszystkie", 1626 "blank": "Puste", 1627 "collapse": "Zobacz mniej", 1628 "expand": "Pokaż wiÄcej", 1629 "settings": "Ustawienia", 1630 "remove": "UsuÅ", 1631 "edit": "Edytuj", 1632 "save": "Zapisz", 1633 "cancel": "Anuluj", 1634 "fieldRequired": "Pole jest wymagane.", 1635 "reset": "Zresetuj", 1636 "copied": "Skopiowano", 1637 "dismiss": "OdrzuÄ", 1638 "prev": "Poprzedni", 1639 "next": "Dalej", 1640 "ok": "OK", 1641 "optional": "(opcjonalnie)", 1642 "viewAll": "WyÅwietl wszystkie", 1643 "selectAllWithCount": "Wybierz wszystkie ({count})", 1644 "done": "Gotowe", 1645 "stop": "Zatrzymaj", 1646 "generating": "Generowanie", 1647 "update": "Aktualizuj", 1648 "insert": "Wstaw", 1649 "replace": "ZastÄ p", 1650 "discard": "OdrzuÄ", 1651 "retry": "Ponów próbÄ", 1652 "refine": "Dopracuj", 1653 "show": "Pokaż", 1654 "hide": "Ukryj", 1655 "summarizing": "Podsumowywanie", 1656 "showDetails": "Pokaż szczegóÅy", 1657 "copyLink": "Skopiowano link" 1658 } 1659 }, 1660 "pt-PT": { 1661 "basic": { 1662 "close": "Fechar", 1663 "clear": "Limpar", 1664 "loading": "Carregando", 1665 "selectAll": "Selecionar tudo", 1666 "blank": "Em branco", 1667 "collapse": "Ver menos", 1668 "expand": "Ver mais", 1669 "settings": "Configurações", 1670 "remove": "Remover", 1671 "edit": "Editar", 1672 "save": "Salvar", 1673 "cancel": "Cancelar", 1674 "fieldRequired": "O campo é necessário.", 1675 "reset": "Redefinir", 1676 "copied": "Copiado", 1677 "dismiss": "Ignorar", 1678 "prev": "Anterior", 1679 "next": "Próximo", 1680 "ok": "OK", 1681 "optional": "(opcional)", 1682 "viewAll": "Visualizar todas", 1683 "selectAllWithCount": "Selecionar todos ({count})", 1684 "done": "ConcluÃdo", 1685 "stop": "Parar", 1686 "generating": "Gerando", 1687 "update": "Atualizar", 1688 "insert": "Inserir", 1689 "replace": "Substituir", 1690 "discard": "Descartar", 1691 "retry": "Tentar novamente", 1692 "refine": "Refinar", 1693 "show": "Mostrar", 1694 "hide": "Ocultar", 1695 "summarizing": "Resumindo", 1696 "showDetails": "Mostrar detalhes", 1697 "copyLink": "Link copiado" 1698 } 1699 }, 1700 "ru-RU": { 1701 "basic": { 1702 "close": "ÐакÑÑÑÑ", 1703 "clear": "ÐÑиÑÑиÑÑ", 1704 "loading": "ÐагÑÑзка", 1705 "selectAll": "ÐÑбÑаÑÑ Ð²Ñе", 1706 "blank": "ÐÑÑÑо", 1707 "collapse": "СвеÑнÑÑÑ", 1708 "expand": "ÐодÑобнее", 1709 "settings": "ÐаÑÑÑойки", 1710 "remove": "УдалиÑÑ", 1711 "edit": "ÐзмениÑÑ", 1712 "save": "Ð¡Ð¾Ñ ÑаниÑÑ", 1713 "cancel": "ÐÑмениÑÑ", 1714 "fieldRequired": "ÐÑо поле ÑвлÑеÑÑÑ Ð¾Ð±ÑзаÑелÑнÑм.", 1715 "reset": "ÐзмениÑÑ ÑÑаÑÑÑ", 1716 "copied": "СкопиÑовано", 1717 "dismiss": "ÐÑклониÑÑ", 1718 "prev": "Ðазад", 1719 "next": "Ðалее", 1720 "ok": "ÐÐ", 1721 "optional": "(не обÑзаÑелÑно)", 1722 "viewAll": "ÐоÑмоÑÑеÑÑ Ð²Ñе", 1723 "selectAllWithCount": "ÐÑбÑаÑÑ Ð²Ñе ({count})", 1724 "done": "ÐоÑово", 1725 "stop": "ÐÑÑановиÑÑ", 1726 "generating": "ÐÑполнÑеÑÑÑ", 1727 "update": "ÐбновиÑÑ", 1728 "insert": "ÐÑÑавиÑÑ", 1729 "replace": "ÐамениÑÑ", 1730 "discard": "УдалиÑÑ", 1731 "retry": "ÐовÑоÑиÑÑ Ð¿Ð¾Ð¿ÑÑкÑ", 1732 "refine": "ÐоÑабоÑаÑÑ", 1733 "show": "ÐоказаÑÑ", 1734 "hide": "СкÑÑÑÑ", 1735 "summarizing": "Создание Ñводки",
1736 "showDetails": "ÐодÑобноÑÑи", 1737 "copyLink": "СÑÑлка ÑкопиÑована." 1738 } 1739 }, 1740 "sv-SE": { 1741 "basic": { 1742 "close": "Stäng", 1743 "clear": "Rensa", 1744 "loading": "Laddar", 1745 "selectAll": "Välj alla", 1746 "blank": "Tom", 1747 "collapse": "Visa mindre", 1748 "expand": "Visa mer", 1749 "settings": "Inställningar", 1750 "remove": "Ta bort", 1751 "edit": "Redigera", 1752 "save": "Spara", 1753 "cancel": "Avbryta", 1754 "fieldRequired": "Fältet är obligatoriskt.", 1755 "reset": "à terställ", 1756 "copied": "Kopierad", 1757 "dismiss": "Avvisa", 1758 "prev": "FöregÃ¥ende", 1759 "next": "Nästa", 1760 "ok": "OK", 1761 "optional": "(valfritt)", 1762 "viewAll": "Visa alla", 1763 "selectAllWithCount": "Välj alla ({count})", 1764 "done": "Klart", 1765 "stop": "Stoppa", 1766 "generating": "Genererar", 1767 "update": "Uppdatera", 1768 "insert": "Infoga", 1769 "replace": "Ersätt", 1770 "discard": "Ta bort", 1771 "retry": "Försök igen", 1772 "refine": "Förfina", 1773 "show": "Visa", 1774 "hide": "Dölj", 1775 "summarizing": "Sammanfattar", 1776 "showDetails": "Visa information", 1777 "copyLink": "Länk kopierad" 1778 } 1779 }, 1780 "tr-TR": { 1781 "basic": { 1782 "close": "Kapat", 1783 "clear": "Temizle", 1784 "loading": "Yükleniyor", 1785 "selectAll": "Tümünü seç", 1786 "blank": "BoÅ", 1787 "collapse": "Daha az göster", 1788 "expand": "Daha fazla göster", 1789 "settings": "Ayarlar", 1790 "remove": "Kaldır", 1791 "edit": "Düzenle", 1792 "save": "Kaydet", 1793 "cancel": "İptal", 1794 "fieldRequired": "Alan gereklidir.", 1795 "reset": "Sıfırla", 1796 "copied": "Kopyalandı", 1797 "dismiss": "Reddet", 1798 "prev": "Ãnceki", 1799 "next": "Sonraki", 1800 "ok": "Tamam", 1801 "optional": "(isteÄe baÄlı)", 1802 "viewAll": "Tümünü görüntüle", 1803 "selectAllWithCount": "Tümünü seç ({count})", 1804 "done": "Bitti", 1805 "stop": "Durdur", 1806 "generating": "OluÅturuluyor", 1807 "update": "Güncelle", 1808 "insert": "Ekle", 1809 "replace": "DeÄiÅtir", 1810 "discard": "İptal et", 1811 "retry": "Yeniden dene", 1812 "refine": "Hassas ayar yap", 1813 "show": "Göster", 1814 "hide": "Gizle", 1815 "summarizing": "Ãzetleniyor", 1816 "showDetails": "Ayrıntıları göster", 1817 "copyLink": "BaÄlantı kopyalandı" 1818 } 1819 }, 1820 "vi-VN": { 1821 "basic": { 1822 "close": "Äóng", 1823 "clear": "Xóa", 1824 "loading": "Äang taÌi", 1825 "selectAll": "Chá»n tất cả", 1826 "blank": "Trá»ng", 1827 "collapse": "Ẩn bá»t", 1828 "expand": "Xem thêm", 1829 "settings": "Cà i Äặt", 1830 "remove": "Xóa", 1831 "edit": "Chá»nh sá»a", 1832 "save": "Lưu", 1833 "cancel": "Há»§y", 1834 "fieldRequired": "Trưá»ng nà y là bắt buá»c.", 1835 "reset": "Äặt lại", 1836 "copied": "Äã sao chép", 1837 "dismiss": "Bá» qua", 1838 "prev": "Trưá»c", 1839 "next": "Tiếp theo", 1840 "ok": "Ok", 1841 "optional": "(tùy chá»n)", 1842 "viewAll": "Xem tất cả", 1843 "selectAllWithCount": "Chá»n tất cả ({count})", 1844 "done": "Äã xong", 1845 "stop": "Dừng", 1846 "generating": "Äang tạo", 1847 "update": "Cáºp nháºt", 1848 "insert": "Chèn", 1849 "replace": "Thay thế", 1850 "discard": "Loại bá»", 1851 "retry": "Thá» lại", 1852 "refine": "Tinh chá»nh", 1853 "show": "Hiá»n thá»", 1854 "hide": "Ẩn", 1855 "summarizing": "Äang tóm tắt", 1856 "showDetails": "Hiá»n chi tiết", 1857 "copyLink": "Liên kết Äã ÄÆ°á»£c sao chép" 1858 } 1859 }, 1860 "zh-CN": { 1861 "basic": { 1862 "close": "å ³é", 1863 "clear": "æ¸ é¤", 1864 "loading": "æ£å¨å è½½", 1865 "selectAll": "å ¨é", 1866 "blank": "空ç½", 1867 "collapse": "æ¶èµ·", 1868 "expand": "å±å¼", 1869 "settings": "设置", 1870 "remove": "ç§»é¤", 1871 "edit": "ç¼è¾", 1872 "save": "ä¿å", 1873 "cancel": "åæ¶", 1874 "fieldRequired": "è¯¥åæ®µä¸ºå¿ å¡«åæ®µã", 1875 "reset": "éç½®", 1876 "copied": "å·²å¤å¶", 1877 "dismiss": "å ³é", 1878 "prev": "ä¸ä¸æ¥", 1879 "next": "ä¸ä¸æ¥", 1880 "ok": "ç¡®å®", 1881 "optional": "ï¼å¯éï¼", 1882 "viewAll": "æ¥çå ¨é¨", 1883 "selectAllWithCount": "å ¨é({count})", 1884 "done": "宿", 1885 "stop": "忢", 1886 "generating": "æ£å¨çæ", 1887 "update": "æ´æ°", 1888 "insert": "æå ¥", 1889 "replace": "æ¿æ¢", 1890 "discard": "æ¾å¼", 1891 "retry": "éè¯", 1892 "refine": "ä¼å", 1893 "show": "æ¾ç¤º", 1894 "hide": "éè", 1895 "summarizing": "æ£å¨æ»ç»",
1896 "showDetails": "æ¾ç¤ºè¯¦æ ", 1897 "copyLink": "龿¥å·²å¤å¶" 1898 } 1899 }, 1900 "zh-TW": { 1901 "basic": { 1902 "close": "éé", 1903 "clear": "æ¸ é¤", 1904 "loading": "è¼å ¥ä¸", 1905 "selectAll": "å ¨é¸", 1906 "blank": "空ç½", 1907 "collapse": "檢è¦è¼å°å §å®¹", 1908 "expand": "æª¢è¦æ´å¤", 1909 "settings": "è¨å®", 1910 "remove": "ç§»é¤", 1911 "edit": "編輯", 1912 "save": "å²å", 1913 "cancel": "åæ¶", 1914 "fieldRequired": "æ¤çºå¿ è¦æ¬ä½ã", 1915 "reset": "éè¨", 1916 "copied": "å·²è¤è£½", 1917 "dismiss": "éé", 1918 "prev": "ä¸ä¸æ¥", 1919 "next": "ä¸ä¸æ¥", 1920 "ok": "確å®", 1921 "optional": "ï¼é¸ç¨ï¼", 1922 "viewAll": "檢è¦å ¨é¨", 1923 "selectAllWithCount": "å ¨é¸ï¼{count}åï¼", 1924 "done": "宿", 1925 "stop": "忢", 1926 "generating": "æ£å¨ç¢ç", 1927 "update": "æ´æ°", 1928 "insert": "æå ¥", 1929 "replace": "å代", 1930 "discard": "æ¨æ£", 1931 "retry": "é試", 1932 "refine": "精簡", 1933 "show": "顯示", 1934 "hide": "é±è", 1935 "summarizing": "總çµ", 1936 "showDetails": "顯示詳細è³è¨", 1937 "copyLink": "å·²è¤è£½é£çµ" 1938 } 1939 } 1940}; 1941var __defProp$1g = Object.defineProperty; 1942var __getOwnPropSymbols$1h = Object.getOwnPropertySymbols; 1943var __hasOwnProp$1h = Object.prototype.hasOwnProperty; 1944var __propIsEnum$1h = Object.prototype.propertyIsEnumerable; 1945var __defNormalProp$1g = (obj, key, value) => key in obj ? __defProp$1g(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 1946var __spreadValues$1g = (a, b) => { 1947 for (var prop in b || (b = {})) 1948 if (__hasOwnProp$1h.call(b, prop)) 1949 __defNormalProp$1g(a, prop, b[prop]); 1950 if (__getOwnPropSymbols$1h) 1951 for (var prop of __getOwnPropSymbols$1h(b)) { 1952 if (__propIsEnum$1h.call(b, prop)) 1953 __defNormalProp$1g(a, prop, b[prop]); 1954 } 1955 return a; 1956}; 1957const useLocale = (messages2, options) => { 1958 return useI18n(__spreadValues$1g({ 1959 messages: messages2 1960 }, options)); 1961}; 1962const FORM_ISOLATION_KEY = Symbol("ZmFormIsolationKey"); 1963const FORM_INJECTION_KEY = Symbol("ZmFormContextKey"); 1964const FORM_ITEM_INJECTION_KEY = Symbol("ZmFormItemContextKey"); 1965const useProp = (name) => { 1966 const vm = getCurrentInstance(); 1967 return computed( 1968 () => { 1969 var _a, _b, _c, _d; 1970 return ((_b = (_a = vm == null ? void 0 : vm.proxy) == null ? void 0 : _a.$props) == null ? void 0 : _b[name]) || ((_d = (_c = vm == null ? void 0 : vm.proxy) == null ? void 0 : _c.$props) == null ? void 0 : _d[camelize$1(name)]); 1971 } 1972 ); 1973}; 1974const useFormDisabled = (fallback) => { 1975 const disabled = useProp("disabled"); 1976 const isolateFromForm = useProp("isolateFromForm"); 1977 const formContext = inject(FORM_INJECTION_KEY, void 0); 1978 const formItemContext = inject(FORM_ITEM_INJECTION_KEY, void 0); 1979 const formIsolationContext = inject(FORM_ISOLATION_KEY, void 0); 1980 if (isolateFromForm.value || formIsolationContext) { 1981 return disabled; 1982 } 1983 return computed( 1984 () => disabled.value || unref(fallback) || (formContext == null ? void 0 : formContext.disabled) || (formItemContext == null ? void 0 : formItemContext.disabled.value) || false 1985 ); 1986}; 1987const useFormItemLabelId = (ariaLabelledbyKey = "aria-labelledby") => { 1988 const ariaLabelledby = useProp(ariaLabelledbyKey); 1989 const formItemContext = inject(FORM_ITEM_INJECTION_KEY, void 0); 1990 const formIsolationContext = inject(FORM_ISOLATION_KEY, void 0); 1991 const isolateFromForm = useProp("isolateFromForm"); 1992 return computed(() => { 1993 const formItemLabelId = formItemContext && formItemContext.autoBindLabelId && formItemContext.labelId || void 0; 1994 /* istanbul ignore next @preserve */ 1995 if ((isolateFromForm.value || formIsolationContext) && formItemContext) { 1996 return void 0; 1997 } 1998 return ariaLabelledby.value || formItemLabelId; 1999 }); 2000}; 2001const useFormItemHelperTextId = () => { 2002 const formItemContext = inject(FORM_ITEM_INJECTION_KEY, void 0); 2003 const formIsolationContext = inject(FORM_ISOLATION_KEY, void 0); 2004 const isolateFromForm = useProp("isolateFromForm"); 2005 const formItemHelperTextId = formItemContext && formItemContext.autoBindLabelId && formItemContext.helperTextId || void 0; 2006 return computed(() => { 2007 if (isolateFromForm.value || formIsolationContext) { 2008 return void 0; 2009 } 2010 return formItemHelperTextId; 2011 }); 2012}; 2013const useFormItemRequired = () => { 2014 const ariaRequired = useProp("aria-required"); 2015 const formItemContext = inject(FORM_ITEM_INJECTION_KEY, void 0); 2016 const formIsolationContext = inject(FORM_ISOLATION_KEY, void 0); 2017 const isolateFromForm = useProp("isolateFromForm"); 2018 return computed(() => { 2019 const formItemRequired = formItemContext && formItemContext.autoBindLabelId && formItemContext.
2019isRequired.value || void 0; 2020 if (isolateFromForm.value || formIsolationContext) { 2021 return Boolean(ariaRequired.value); 2022 } 2023 return Boolean(ariaRequired.value || formItemRequired); 2024 }); 2025}; 2026const useFormItemErrored = () => { 2027 const formItemContext = inject(FORM_ITEM_INJECTION_KEY, void 0); 2028 const formIsolationContext = inject(FORM_ISOLATION_KEY, void 0); 2029 const isolateFromForm = useProp("isolateFromForm"); 2030 return computed(() => { 2031 if (isolateFromForm.value || formIsolationContext) { 2032 return false; 2033 } 2034 return formItemContext && formItemContext.isErrored.value; 2035 }); 2036}; 2037const useFormItemErrorMessageId = () => { 2038 const formItemContext = inject(FORM_ITEM_INJECTION_KEY, void 0); 2039 const formIsolationContext = inject(FORM_ISOLATION_KEY, void 0); 2040 const isolateFromForm = useProp("isolateFromForm"); 2041 return computed(() => { 2042 if (isolateFromForm.value || formIsolationContext) { 2043 return void 0; 2044 } 2045 return formItemContext == null ? void 0 : formItemContext.errorMessageId.value; 2046 }); 2047}; 2048const useFormItemAriaDescribedby = () => { 2049 const helperTextId = useFormItemHelperTextId(); 2050 const ariaDescribedby = useProp("aria-describedby"); 2051 const errorMessageId = useFormItemErrorMessageId(); 2052 const ariaDescribedbyResult = computed(() => { 2053 const ret = []; 2054 if (ariaDescribedby.value) { 2055 ret.push(ariaDescribedby.value); 2056 } 2057 if (helperTextId.value) { 2058 ret.push(helperTextId.value); 2059 } 2060 if (errorMessageId.value) { 2061 ret.push(errorMessageId.value); 2062 } 2063 return ret.length ? ret.join(" ") : void 0; 2064 }); 2065 return ariaDescribedbyResult; 2066}; 2067var __defProp$1f = Object.defineProperty; 2068var __defProps$13 = Object.defineProperties; 2069var __getOwnPropDescs$13 = Object.getOwnPropertyDescriptors; 2070var __getOwnPropSymbols$1g = Object.getOwnPropertySymbols; 2071var __hasOwnProp$1g = Object.prototype.hasOwnProperty; 2072var __propIsEnum$1g = Object.prototype.propertyIsEnumerable; 2073var __defNormalProp$1f = (obj, key, value) => key in obj ? __defProp$1f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 2074var __spreadValues$1f = (a, b) => { 2075 for (var prop in b || (b = {})) 2076 if (__hasOwnProp$1g.call(b, prop)) 2077 __defNormalProp$1f(a, prop, b[prop]); 2078 if (__getOwnPropSymbols$1g) 2079 for (var prop of __getOwnPropSymbols$1g(b)) { 2080 if (__propIsEnum$1g.call(b, prop)) 2081 __defNormalProp$1f(a, prop, b[prop]); 2082 } 2083 return a; 2084}; 2085var __spreadProps$13 = (a, b) => __defProps$13(a, __getOwnPropDescs$13(b)); 2086const buttonProps = { 2087 type: { 2088 type: String, 2089 default: "secondary" 2090 }, 2091 size: { 2092 type: String, 2093 default: "md" 2094 }, 2095 disabled: Boolean, 2096 danger: Boolean, 2097 loading: Boolean, 2098 keepText: Boolean, 2099 iconReverse: Boolean, 2100 icon: { 2101 type: Object 2102 }, 2103 iconProps: { 2104 type: Object, 2105 default() { 2106 return {}; 2107 } 2108 }, 2109 ariaLabel: String, 2110 ariaLabelledby: String, 2111 fullWidth: Boolean, 2112 isolateFromForm: Boolean, 2113 iconSize: String, 2114 neutral: Boolean, 2115 testId: String 2116}; 2117const buttonEmits = ["click"]; 2118const _sfc_main$_ = /* @__PURE__ */ defineComponent(__spreadProps$13(__spreadValues$1f({}, { 2119 name: "ZmButton" 2120}), { 2121 __name: "button", 2122 props: buttonProps, 2123 emits: buttonEmits, 2124 setup(__props, { expose: __expose, emit: __emit }) { 2125 const props = __props; 2126 const emit = __emit; 2127 const slots = useSlots(); 2128 const ns = useNamespace("button"); 2129 let t; 2130 try { 2131 t = useLocale(messages$c).t; 2132 } catch (error) { 2133 debugError( 2134 "ZmButton", 2135 `when use ZmButton in ZmToast or ZmMessageBox, You should register them(ZmToast or ZmMessageBox) by "app.use()" to make VueI18N compatible` 2136 ); 2137 /* istanbul ignore next @preserve */ 2138 t = () => "Loading"; 2139 } 2140 const instance = getCurrentInstance(); 2141 const buttonRef = ref(); 2142 const isLoading = computed(() => props.loading); 2143 const isDisabled = useFormDisabled(); 2144 const classNames = computed(() => { 2145 const { type, size: size2, danger, iconReverse, neutral } = props; 2146 return [ 2147 ns.b(), 2148 ns.m(size2), 2149 ns.is(`${type}-disabled`, isDisabled.value), 2150 ns.is("reverse", iconReverse), 2151 ns.is("loading", isLoading.value), 2152 ns.is("pure-text", type === "text"),
2153 ns.is("pure-text-small", type === "text" && size2 === "sm"), 2154 { 2155 [ns.m(`${type}-danger`)]: danger, 2156 [ns.m(`${type}-neutral`)]: neutral && type === "secondary" && !danger, 2157 // only secondary support neutral sentiment 2158 [ns.m(type)]: !danger && !(neutral && type === "secondary") || type === "overlay" 2159 }, 2160 ns.is("full", props.fullWidth) 2161 ]; 2162 }); 2163 const onClick = (event) => { 2164 if (isDisabled.value || isLoading.value) 2165 return; 2166 if (isSafari) { 2167 focus(); 2168 } 2169 emit("click", event); 2170 }; 2171 const hasNoValidTextSlot = (VNodes = []) => { 2172 if (!VNodes.length) { 2173 return true; 2174 } 2175 if (VNodes.length === 1) { 2176 const VnodeType = VNodes[0].type; 2177 return VnodeType === Comment || VnodeType === Fragment && isArray(VNodes[0].children) && !VNodes[0].children.length; 2178 } 2179 }; 2180 const hasOnlyVisuallyHiddenComp = (VNodes = []) => { 2181 if (VNodes.length === 1) { 2182 const VnodeType = VNodes[0].type; 2183 return typeof VnodeType === "object" && VnodeType.name === "ZmVisuallyHidden"; 2184 } 2185 }; 2186 const focus = () => { 2187 instance.proxy.$el.focus(); 2188 }; 2189 __expose({ 2190 buttonRef, 2191 focus 2192 }); 2193 const renderContent = { 2194 render() { 2195 var _a; 2196 const ariaLabelRelatedProps = props.ariaLabel || props.ariaLabelledby; 2197 const UserIcon = props.icon; 2198 const Spinner = ZmLoading.spinnersComponent; 2199 const vnodes = (_a = slots.default) == null ? void 0 : _a.call(slots); 2200 const loadingId = useId().value; 2201 const isSquareIcon = props.icon && (hasNoValidTextSlot(vnodes) || hasOnlyVisuallyHiddenComp(vnodes)); 2202 if (isSquareIcon && !ariaLabelRelatedProps && !hasOnlyVisuallyHiddenComp(vnodes)) { 2203 debugWarn("ZmButton", "aria-label or aria-labelledby is required for Icon Button"); 2204 } 2205 const ariaLabelledby = isLoading.value ? loadingId : props.ariaLabelledby; 2206 const children = []; 2207 if (isLoading.value) { 2208 children.push(h(ZmVisuallyHidden, { id: loadingId }, () => t("basic.loading"))); 2209 } 2210 if (!isSquareIcon && isLoading.value && !UserIcon && !isDisabled.value) { 2211 children.push( 2212 h( 2213 ZmIcon, 2214 { class: [ns.e("inner-icon"), ns.is("center", !props.keepText)] }, 2215 () => h(Spinner, { 2216 "aria-hidden": "true", 2217 "force-light-theme": props.type === "primary" || props.type === "overlay" 2218 }) 2219 ), 2220 h("span", { class: [ns.e("label"), ns.is("visible-hidden", !props.keepText)] }, vnodes) 2221 ); 2222 } else { 2223 if (UserIcon) { 2224 children.push( 2225 h(ZmIcon, { class: ns.e("inner-icon"), size: props.iconSize }, () => { 2226 return isLoading.value && !isDisabled.value ? h(Spinner, { 2227 "aria-hidden": "true", 2228 "force-light-theme": props.type === "primary" || props.type === "overlay" 2229 }) : h(UserIcon, props.iconProps); 2230 }) 2231 ); 2232 } 2233 children.push(h("span", { class: !isSquareIcon ? ns.e("label") : "" }, vnodes)); 2234 } 2235 return h( 2236 "button", 2237 { 2238 ref: buttonRef, 2239 type: "button", 2240 class: [ 2241 classNames.value, 2242 isSquareIcon ? [ns.e(`icon`), props.type === "tertiary" && !props.danger && ns.m("tertiary-icon")] : "" 2243 ], 2244 "aria-label": props.ariaLabel, 2245 "aria-labelledby": ariaLabelledby, 2246 "aria-disabled": isDisabled.value || isLoading.value, 2247 "data-testid": props.testId, 2248 onClick 2249 }, 2250 children 2251 ); 2252 } 2253 }; 2254 return (_ctx, _cache) => { 2255 return openBlock(), createBlock(resolveDynamicComponent(renderContent), null, { 2256 default: withCtx(() => [ 2257 renderSlot(_ctx.$slots, "default") 2258 ]), 2259 _: 3 2260 }); 2261 }; 2262 } 2263})); 2264const ZmButton = withInstall(_sfc_main$_); 2265var __defProp$1e = Object.defineProperty; 2266var __defProps$12 = Object.defineProperties; 2267var __getOwnPropDescs$12 = Object.getOwnPropertyDescriptors; 2268var __getOwnPropSymbols$1f = Object.getOwnPropertySymbols; 2269var __hasOwnProp$1f = Object.prototype.hasOwnProperty; 2270var __propIsEnum$1f = Object.prototype.propertyIsEnumerable; 2271var __defNormalProp$1e = (obj, key, value) => key in obj ? __defProp$1e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 2272var __spreadValues$1e = (a, b) => { 2273 for (var prop in b || (b = {})) 2274 if (__hasOwnProp$1f.call(b, prop)) 2275 __defNormalProp$1e(a, prop, b[prop]); 2276 if (__getOwnPropSymbols$1f) 2277 for (var prop of __getOwnPropSymbols$1f(b)) { 2278 if (__propIsEnum$1f.call(b, prop)) 2279 __defNormalProp$1e(a, prop, b[prop]); 2280 } 2281 return a; 2282}; 2283var __spreadProps$12 = (a, b) => __defProps$12(a, __getOwnPropDescs$12(b)); 2284const inlineIconButtonProps = { 2285 size: { 2286 type: String, 2287 default: "md" 2288 }, 2289 icon: Object, 2290 disabled: Boolean, 2291 lighter: Boolean, 2292 stopPropagationWhenDisabled: Boolean, 2293 testId: String 2294}; 2295const inlineIconButtonEmits = ["click"]; 2296const SizeMap = { 2297 xs: { 2298 button: 12, 2299 icon: 8 2300 }, 2301 sm: { 2302 button: 16, 2303 icon: 12 2304 }, 2305 md: { 2306 button: 18, 2307 icon: 14 2308 }, 2309 lg: { 2310 button: 20, 2311 icon: 16 2312 } 2313}; 2314const _hoisted_1$w = ["aria-disabled", "data-testid"]; 2315const _sfc_main$Z = /* @__PURE__ */ defineComponent(__spreadProps$12(__spreadValues$1e({}, { 2316 name: "ZmInlineIconButton" 2317}), { 2318 __name: "inline-icon-button", 2319 props: inlineIconButtonProps,
2320 emits: inlineIconButtonEmits, 2321 setup(__props, { expose: __expose, emit: __emit }) { 2322 const props = __props; 2323 const emit = __emit; 2324 const ns = useNamespace("inline-icon-button"); 2325 const buttonRef = ref(); 2326 const handleClick = (event) => { 2327 if (props.disabled) { 2328 if (props.stopPropagationWhenDisabled) { 2329 event.stopPropagation(); 2330 } 2331 return; 2332 } 2333 if (isSafari) { 2334 focus(); 2335 } 2336 emit("click", event); 2337 }; 2338 const focus = () => { 2339 var _a; 2340 (_a = buttonRef.value) == null ? void 0 : _a.focus(); 2341 }; 2342 const buttonStyle = computed(() => { 2343 var _a, _b; 2344 const iconSize = ((_a = SizeMap[props.size]) == null ? void 0 : _a.icon) || 14; 2345 const buttonSize = ((_b = SizeMap[props.size]) == null ? void 0 : _b.button) || 18; 2346 return { 2347 fontSize: `${iconSize}px`, 2348 width: `${buttonSize}px`, 2349 height: `${buttonSize}px` 2350 }; 2351 }); 2352 __expose({ 2353 focus 2354 }); 2355 return (_ctx, _cache) => { 2356 return _ctx.icon ? (openBlock(), createElementBlock("button", { 2357 key: 0, 2358 ref_key: "buttonRef", 2359 ref: buttonRef, 2360 type: "button", 2361 style: normalizeStyle(buttonStyle.value), 2362 class: normalizeClass([unref(ns).b(), unref(ns).is("disabled", _ctx.disabled), unref(ns).is("lighter", _ctx.lighter)]), 2363 "aria-disabled": _ctx.disabled, 2364 "data-testid": _ctx.testId, 2365 onClick: handleClick 2366 }, [ 2367 createVNode(unref(ZmIcon), { 2368 class: normalizeClass(unref(ns).e("icon")) 2369 }, { 2370 default: withCtx(() => [ 2371 (openBlock(), createBlock(resolveDynamicComponent(_ctx.icon))) 2372 ]), 2373 _: 1 2374 }, 8, ["class"]) 2375 ], 14, _hoisted_1$w)) : createCommentVNode("", true); 2376 }; 2377 } 2378})); 2379const ZmInlineIconButton = withInstall(_sfc_main$Z); 2380const createInlineInputCloseIconButtonSize = (size2) => { 2381 /* istanbul ignore next @preserve */ 2382 if (size2 === "sm") { 2383 return "sm"; 2384 } 2385 return "md"; 2386}; 2387const EVENT_CODE = { 2388 tab: "Tab", 2389 enter: "Enter", 2390 space: "Space", 2391 left: "ArrowLeft", 2392 // 37 2393 up: "ArrowUp", 2394 // 38 2395 right: "ArrowRight", 2396 // 39 2397 down: "ArrowDown", 2398 // 40 2399 esc: "Escape", 2400 numpadEnter: "NumpadEnter", 2401 home: "Home", 2402 end: "End", 2403 f10: "F10", 2404 contextMenu: "ContextMenu" 2405}; 2406const VUE_EVENT_NAMES = { 2407 UPDATE_MODEL: "update:modelValue", 2408 CHANGE: "change", 2409 BLUR: "blur", 2410 FOCUS: "focus", 2411 CLEAR: "clear", 2412 VISIBLE_CHANGE: "visible-change", 2413 ENTER: "enter", 2414 ESCAPE: "escape", 2415 TAB: "tab", 2416 COMPOSITION_START: "compositionstart", 2417 COMPOSITION_UPDATE: "compositionupdate", 2418 COMPOSITION_END: "compositionend" 2419}; 2420const isIMEComposing = (event) => { 2421 return event.which === 229; 2422}; 2423var __defProp$1d = Object.defineProperty; 2424var __defProps$11 = Object.defineProperties; 2425var __getOwnPropDescs$11 = Object.getOwnPropertyDescriptors; 2426var __getOwnPropSymbols$1e = Object.getOwnPropertySymbols; 2427var __hasOwnProp$1e = Object.prototype.hasOwnProperty; 2428var __propIsEnum$1e = Object.prototype.propertyIsEnumerable; 2429var __defNormalProp$1d = (obj, key, value) => key in obj ? __defProp$1d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 2430var __spreadValues$1d = (a, b) => { 2431 for (var prop in b || (b = {})) 2432 if (__hasOwnProp$1e.call(b, prop)) 2433 __defNormalProp$1d(a, prop, b[prop]); 2434 if (__getOwnPropSymbols$1e) 2435 for (var prop of __getOwnPropSymbols$1e(b)) { 2436 if (__propIsEnum$1e.call(b, prop)) 2437 __defNormalProp$1d(a, prop, b[prop]); 2438 } 2439 return a; 2440}; 2441var __spreadProps$11 = (a, b) => __defProps$11(a, __getOwnPropDescs$11(b)); 2442const inlineChevronIconProps = { 2443 size: { 2444 type: [String, Number], 2445 default: "18px" 2446 }, 2447 expanded: Boolean, 2448 transformVerticalAlign: Boolean, 2449 disabled: Boolean 2450}; 2451const _sfc_main$Y = /* @__PURE__ */ defineComponent(__spreadProps$11(__spreadValues$1d({}, { 2452 name: "ZmInlineChevronIcon" 2453}), { 2454 __name: "inline-chevron-icon", 2455 props: inlineChevronIconProps, 2456 setup(__props) { 2457 const ns = useNamespace("inline-chevron-icon"); 2458 const iconsSize = computed(() => { 2459 const gap = 6; 2460 return addUnit(parseInt(String(props.size)) - gap); 2461 }); 2462 const iconStyle = computed(() => { 2463 const { size: size2 } = props; 2464 const componentSize = addUnit(size2); 2465 return { 2466 width: componentSize, 2467 height: componentSize 2468 }; 2469 }); 2470 const props = __props; 2471 return (_ctx, _cache) => { 2472 return openBlock(), createBlock(unref(ZmIcon), { 2473 size: iconsSize.value, 2474 style: normalizeStyle(iconStyle.value), 2475 class: normalizeClass([ 2476 unref(ns).b(), 2477 unref(ns).is("transform-vertical-align", _ctx.transformVerticalAlign), 2478 unref(ns).is("expanded", _ctx.expanded), 2479 unref(ns).is("disabled", _ctx.disabled) 2480 ]) 2481 }, { 2482 default: withCtx(() => [ 2483 createVNode(unref(ChevronSmallDown)) 2484 ]), 2485 _: 1 2486 }, 8, ["size", "style", "class"]); 2487 }; 2488 } 2489})); 2490const ZmInlineChevronIcon = withInstall(_sfc_main$Y); 2491const createInlineChevronSize = (size2) => { 2492 if (size2 === "sm") { 2493 return "16px"; 2494 } 2495 return "18px"; 2496}; 2497const composeRefs = (...refs) => { 2498 return (el) => {
2499 refs.forEach((ref2) => { 2500 /* istanbul ignore next @preserve */ 2501 if (isFunction$1(ref2)) { 2502 ref2(el); 2503 } else { 2504 ref2.value = el; 2505 } 2506 }); 2507 }; 2508}; 2509function unrefElement(elRef) { 2510 var _a; 2511 const plain = resolveUnref(elRef); 2512 return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain; 2513} 2514function resolveUnref(r) { 2515 return typeof r === "function" ? r() : unref(r); 2516} 2517function useEventListener(...args) { 2518 let target; 2519 let events; 2520 let listeners; 2521 let options; 2522 if (isString$1(args[0]) || Array.isArray(args[0])) { 2523 [events, listeners, options] = args; 2524 target = defaultWindow; 2525 } else { 2526 [target, events, listeners, options] = args; 2527 } 2528 /* istanbul ignore next @preserve */ 2529 if (!target) { 2530 return NOOP; 2531 } 2532 if (!Array.isArray(events)) { 2533 events = [events]; 2534 } 2535 if (!Array.isArray(listeners)) { 2536 listeners = [listeners]; 2537 } 2538 const cleanups = []; 2539 const cleanup = () => { 2540 cleanups.forEach((fn) => fn()); 2541 cleanups.length = 0; 2542 }; 2543 const register = (el, event, listener, options2) => { 2544 el.addEventListener(event, listener, options2); 2545 return () => el.removeEventListener(event, listener, options2); 2546 }; 2547 const stopWatch = watch( 2548 () => [unrefElement(target), resolveUnref(options)], 2549 ([el, options2]) => { 2550 cleanup(); 2551 if (!el) { 2552 return; 2553 } 2554 cleanups.push( 2555 ...events.flatMap((event) => { 2556 return listeners.map((listener) => register(el, event, listener, options2)); 2557 }) 2558 ); 2559 }, 2560 { immediate: true, flush: "post" } 2561 ); 2562 const stop = () => { 2563 stopWatch(); 2564 cleanup(); 2565 }; 2566 tryOnScopeDispose(stop); 2567 return stop; 2568} 2569function tryOnMounted(fn, sync = true) { 2570 if (getCurrentInstance()) { 2571 onMounted(fn); 2572 } else if (sync) { 2573 fn(); 2574 } else { 2575 nextTick(fn); 2576 } 2577} 2578function useWindowSize(options = {}) { 2579 const { 2580 window: window2 = defaultWindow, 2581 initialWidth = Infinity, 2582 initialHeight = Infinity, 2583 listenOrientation = true, 2584 includeScrollbar = true 2585 } = options; 2586 const width = ref(initialWidth); 2587 const height = ref(initialHeight); 2588 const update = () => { 2589 if (window2) { 2590 if (includeScrollbar) { 2591 width.value = window2.innerWidth; 2592 height.value = window2.innerHeight; 2593 } else { 2594 /* istanbul ignore next @preserve */ 2595 width.value = window2.document.documentElement.clientWidth; 2596 /* istanbul ignore next @preserve */ 2597 height.value = window2.document.documentElement.clientHeight; 2598 } 2599 } 2600 }; 2601 update();
2602 tryOnMounted(update); 2603 useEventListener("resize", update, { passive: true }); 2604 if (listenOrientation) { 2605 useEventListener("orientationchange", update, { passive: true }); 2606 } 2607 return { width, height }; 2608} 2609function useMounted() { 2610 const isMounted = ref(false); 2611 if (getCurrentInstance()) { 2612 onMounted(() => { 2613 isMounted.value = true; 2614 }); 2615 } 2616 return isMounted; 2617} 2618function useSupported(callback) { 2619 const isMounted = useMounted(); 2620 return computed(() => { 2621 isMounted.value; 2622 return Boolean(callback()); 2623 }); 2624} 2625var __getOwnPropSymbols$1d = Object.getOwnPropertySymbols; 2626var __hasOwnProp$1d = Object.prototype.hasOwnProperty; 2627var __propIsEnum$1d = Object.prototype.propertyIsEnumerable; 2628var __objRest = (source, exclude) => { 2629 var target = {}; 2630 for (var prop in source) 2631 if (__hasOwnProp$1d.call(source, prop) && exclude.indexOf(prop) < 0) 2632 target[prop] = source[prop]; 2633 if (source != null && __getOwnPropSymbols$1d) 2634 for (var prop of __getOwnPropSymbols$1d(source)) { 2635 if (exclude.indexOf(prop) < 0 && __propIsEnum$1d.call(source, prop)) 2636 target[prop] = source[prop]; 2637 } 2638 return target; 2639}; 2640function useResizeObserver(target, callback, options = {}) { 2641 const _a = options, { window: window2 = defaultWindow } = _a, observerOptions = __objRest(_a, ["window"]); 2642 let observer; 2643 const isSupported = useSupported(() => window2 && "ResizeObserver" in window2); 2644 const cleanup = () => { 2645 if (observer) { 2646 observer.disconnect(); 2647 observer = void 0; 2648 } 2649 }; 2650 const targets = computed( 2651 () => Array.isArray(target) ? target.map((el) => unrefElement(el)) : [unrefElement(target)] 2652 ); 2653 const stopWatch = watch( 2654 targets, 2655 (els) => { 2656 cleanup(); 2657 if (window2) { 2658 observer = new index$1(callback); 2659 for (const _el of els) { 2660 _el && observer.observe(_el, observerOptions); 2661 } 2662 } 2663 }, 2664 { immediate: true, flush: "post", deep: true } 2665 ); 2666 const stop = () => { 2667 cleanup(); 2668 stopWatch(); 2669 }; 2670 tryOnScopeDispose(stop); 2671 return { 2672 isSupported, 2673 stop 2674 }; 2675} 2676function useElementBounding(target, options = {}) { 2677 const { reset = true, windowResize = true, windowScroll = true, immediate = true } = options; 2678 const height = ref(0); 2679 const bottom = ref(0); 2680 const left = ref(0); 2681 const right = ref(0); 2682 const top = ref(0); 2683 const width = ref(0); 2684 const x = ref(0); 2685 const y = ref(0); 2686 function update() { 2687 const el = unrefElement(target); 2688 if (!el) { 2689 if (reset) { 2690 height.value = 0; 2691 bottom.value = 0; 2692 left.value = 0; 2693 right.value = 0; 2694 top.value = 0; 2695 width.value = 0; 2696 x.value = 0; 2697 y.value = 0; 2698 } 2699 return; 2700 } 2701 const rect = el.getBoundingClientRect(); 2702 height.value = rect.height; 2703 bottom.value = rect.bottom; 2704 left.value = rect.left; 2705 right.value = rect.right; 2706 top.value = rect.top; 2707 width.value = rect.width; 2708 x.value = rect.x; 2709 y.value = rect.y; 2710 } 2711 useResizeObserver(target, update); 2712 watch( 2713 () => unrefElement(target), 2714 (ele) => { 2715 !ele && update(); 2716 } 2717 ); 2718 if (windowScroll) { 2719 useEventListener("scroll", update, { capture: true, passive: true }); 2720 } 2721 if (windowResize) { 2722 useEventListener("resize", update, { passive: true }); 2723 } 2724 tryOnMounted(() => { 2725 if (immediate) { 2726 update(); 2727 } 2728 }); 2729 return { 2730 height, 2731 bottom, 2732 left, 2733 right, 2734 top, 2735 width, 2736 x, 2737 y, 2738 update 2739 }; 2740} 2741const isScroll = (el, isVertical) => { 2742 /* istanbul ignore next @preserve */ 2743 if (!isClient) { 2744 return false; 2745 } 2746 const key = { 2747 undefined: "overflow", 2748 true: "overflow-y", 2749 false: "overflow-x" 2750 }[String(isVertical)]; 2751 const overflow = getStyle(el, key); 2752 return ["scroll", "auto", "overlay"].some((s) => overflow.includes(s)); 2753}; 2754const getScrollContainer = (el, isVertical) => { 2755 /* istanbul ignore next @preserve */ 2756 if (!isClient) { 2757 return; 2758 } 2759 let parent = el; 2760 while (parent) { 2761 if ([window, document, document.documentElement].includes(parent)) { 2762 return window; 2763 } 2764 /* istanbul ignore next @preserve */ 2765 if (isScroll(parent, isVertical)) { 2766 return parent; 2767 } 2768 parent = parent.parentNode; 2769 } 2770 /* istanbul ignore next @preserve */ 2771 return parent; 2772}; 2773let scrollBarWidth; 2774const getScrollBarWidth = (namespace2) => { 2775 var _a; 2776 /* istanbul ignore next @preserve */ 2777 if (!isClient) { 2778 return 0; 2779 } 2780 if (scrollBarWidth !== void 0) { 2781 return scrollBarWidth; 2782 } 2783 const outer = document.createElement("div"); 2784 outer.className = `${namespace2}-scrollbar__wrap`; 2785 outer.style.visibility = "hidden"; 2786 outer.style.width = "100px"; 2787 outer.style.position = "absolute"; 2788 outer.style.top = "-9999px"; 2789 document.body.appendChild(outer); 2790 const widthNoScroll = outer.offsetWidth; 2791 outer.style.overflow = "scroll"; 2792 const inner = document.createElement("div"); 2793 inner.style.width = "100%"; 2794 outer.appendChild(inner); 2795 const widthWithScroll = inner.offsetWidth; 2796 (_a = outer.parentNode) == null ? void 0 : _a.removeChild(outer); 2797 scrollBarWidth = widthNoScroll - widthWithScroll; 2798 return scrollBarWidth; 2799}; 2800function scrollIntoView(container, selected, hasFocusBorder = true) { 2801 /* istanbul ignore next @preserve */ 2802 if (!isClient) { 2803 return; 2804 } 2805 /* istanbul ignore next @preserve */ 2806 if (!selected) { 2807 container.scrollTop = 0; 2808 return; 2809 } 2810 const offsetParents = []; 2811 let pointer = selected.offsetParent; 2812 while (pointer !== null && container !== pointer && container.contains(pointer)) { 2813 offsetParents.push(pointer); 2814 pointer = pointer.offsetParent; 2815 } 2816 /* istanbul ignore next @preserve */ 2817 const top = selected.offsetTop + offsetParents.reduce((prev, curr) => prev + curr.offsetTop, 0); 2818 const bottom = top + selected.offsetHeight; 2819 const viewRectTop = container.scrollTop; 2820 const viewRectBottom = viewRectTop + container.clientHeight; 2821 const adjustSize = hasFocusBorder ? 4 : 0; 2822 const selectedHeight = selected.offsetHeight; 2823 if (top < viewRectTop) { 2824 container.scrollTop = top - adjustSize; 2825 } else if (bottom > viewRectBottom && !(container.clientHeight < selectedHeight)) { 2826 container.scrollTop = bottom - container.clientHeight + adjustSize; 2827 } else if (bottom === viewRectBottom) { 2828 /* istanbul ignore next @preserve */ 2829 container.scrollTop = bottom - container.clientHeight + adjustSize; 2830 } 2831} 2832function scrollIntoMiddleView(container, selected) { 2833 /* istanbul ignore next @preserve */ 2834 if (!isClient) { 2835 return; 2836 } 2837 /* istanbul ignore next @preserve */ 2838 if (!selected) { 2839 return; 2840 } 2841 const offsetParents = []; 2842 let pointer = selected.offsetParent; 2843 /* istanbul ignore next @preserve */ 2844 while (pointer !== null && container !== pointer && container.contains(pointer)) { 2845 offsetParents.push(pointer); 2846 pointer = pointer.offsetParent; 2847 } 2848 /* istanbul ignore next @preserve */ 2849 const top = selected.offsetTop + offsetParents.reduce((prev, curr) => prev + curr.offsetTop, 0); 2850 const elementCenter = top + selected.offsetHeight / 2; 2851 const targetScrollTop = elementCenter - container.clientHeight / 2; 2852 container.scrollTop = targetScrollTop; 2853}
2854var __defProp$1c = Object.defineProperty; 2855var __defProps$10 = Object.defineProperties; 2856var __getOwnPropDescs$10 = Object.getOwnPropertyDescriptors; 2857var __getOwnPropSymbols$1c = Object.getOwnPropertySymbols; 2858var __hasOwnProp$1c = Object.prototype.hasOwnProperty; 2859var __propIsEnum$1c = Object.prototype.propertyIsEnumerable; 2860var __defNormalProp$1c = (obj, key, value) => key in obj ? __defProp$1c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 2861var __spreadValues$1c = (a, b) => { 2862 for (var prop in b || (b = {})) 2863 if (__hasOwnProp$1c.call(b, prop)) 2864 __defNormalProp$1c(a, prop, b[prop]); 2865 if (__getOwnPropSymbols$1c) 2866 for (var prop of __getOwnPropSymbols$1c(b)) { 2867 if (__propIsEnum$1c.call(b, prop)) 2868 __defNormalProp$1c(a, prop, b[prop]); 2869 } 2870 return a; 2871}; 2872var __spreadProps$10 = (a, b) => __defProps$10(a, __getOwnPropDescs$10(b)); 2873const position = ["top", "bottom"]; 2874const stickyProps = { 2875 position: { 2876 type: String, 2877 validator: (val) => [...position].includes(val), 2878 default: "top" 2879 }, 2880 offset: { 2881 type: Number, 2882 default: 0 2883 }, 2884 zIndex: { 2885 type: Number, 2886 default: 100 2887 }, 2888 target: { 2889 type: [String, Object], 2890 default: "" 2891 }, 2892 disabled: Boolean, 2893 watchSlotHeightChange: { 2894 type: Boolean, 2895 default: false 2896 } 2897}; 2898const stickyEmits = ["scroll", "change"]; 2899const _sfc_main$X = /* @__PURE__ */ defineComponent(__spreadProps$10(__spreadValues$1c({}, { 2900 name: "ZmSticky" 2901}), { 2902 __name: "sticky", 2903 props: stickyProps, 2904 emits: stickyEmits, 2905 setup(__props, { emit: __emit }) { 2906 const props = __props; 2907 const emit = __emit; 2908 const ns = useNamespace("sticky"); 2909 const root = shallowRef(); 2910 const fixedRef = shallowRef(); 2911 const target = shallowRef(); 2912 const scrollContainer = shallowRef(); 2913 const { height: windowHeight } = useWindowSize(); 2914 const { 2915 height: rootHeight, 2916 width: rootWidth, 2917 top: rootTop, 2918 bottom: rootBottom, 2919 update: updateRoot 2920 } = useElementBounding(root, { windowScroll: false }); 2921 const targetRect = useElementBounding(target); 2922 const fixed = ref(false); 2923 const scrollTop = ref(0); 2924 const transform = ref(0); 2925 const placeholderStyle = computed(() => { 2926 /* istanbul ignore next @preserve */ 2927 if (props.disabled) 2928 return {}; 2929 return { 2930 height: fixed.value ? `${rootHeight.value}px` : "", 2931 width: fixed.value ? `${rootWidth.value}px` : "" 2932 }; 2933 }); 2934 const stickyStyle = computed(() => { 2935 if (!fixed.value) { 2936 return {}; 2937 } 2938 const offset2 = props.offset ? addUnit(props.offset) : 0; 2939 return { 2940 height: `${rootHeight.value}px`, 2941 width: `${rootWidth.value}px`, 2942 top: props.position === "top" ? offset2 : "", 2943 bottom: props.position === "bottom" ? offset2 : "", 2944 transform: transform.value ? `translateY(${transform.value}px)` : "", 2945 zIndex: props.zIndex 2946 }; 2947 }); 2948 const update = () => { 2949 if (!scrollContainer.value) { 2950 return; 2951 } 2952 scrollTop.value = scrollContainer.value instanceof Window ? document.documentElement.scrollTop : scrollContainer.value.scrollTop || 0; 2953 if (props.position === "top") { 2954 if (props.target) { 2955 const difference = targetRect.bottom.value - props.offset - rootHeight.value; 2956 fixed.value = props.offset > rootTop.value && targetRect.bottom.value > 0; 2957 transform.value = difference < 0 ? difference : 0; 2958 } else { 2959 fixed.value = props.offset > rootTop.value; 2960 } 2961 } else if (props.target) { 2962 const difference = windowHeight.value - targetRect.top.value - props.offset - rootHeight.value; 2963 fixed.value = windowHeight.value - props.offset < rootBottom.value && windowHeight.value > targetRect.top.value; 2964 transform.value = difference < 0 ? -difference : 0; 2965 } else { 2966 fixed.value = windowHeight.value - props.offset < rootBottom.value; 2967 } 2968 }; 2969 const handleScroll = () => { 2970 updateRoot(); 2971 emit("scroll", { 2972 scrollTop: scrollTop.value, 2973 fixed: fixed.value 2974 }); 2975 }; 2976 const watchSlotSizeChange = () => { 2977 var _a; 2978 const firstChild = (_a = fixedRef.value) == null ? void 0 : _a.firstElementChild; 2979 if (firstChild) { 2980 useResizeObserver(firstChild, () => { 2981 setTimeout(() => { 2982 const { offsetHeight } = firstChild; 2983 if (root.value) { 2984 root.value.style.height = `${offsetHeight}px`; 2985 } 2986 }); 2987 }); 2988 } 2989 }; 2990 const resolveTarget = (target2) => { 2991 /* istanbul ignore next @preserve */ 2992 if (!target2) { 2993 return void 0; 2994 } 2995 if (typeof target2 === "string") { 2996 return document.querySelector(target2); 2997 } 2998 if (target2 instanceof HTMLElement) { 2999 return target2; 3000 } 3001 /* istanbul ignore next @preserve */ 3002 return void 0; 3003 }; 3004 useEventListener(scrollContainer, "scroll", handleScroll); 3005 watchEffect(update); 3006 watch(fixed, (val) => emit("change", val)); 3007 onMounted(() => { 3008 nextTick(() => { 3009 if (props.target) { 3010 target.value = resolveTarget(props.target); 3011 if (!target.value) { 3012 /* istanbul ignore next @preserve */ 3013 throwError("ZmSticky", `Target is not existed: ${props.target}`); 3014 } 3015 } else { 3016 target.value = document.documentElement; 3017 }
3018 scrollContainer.value = getScrollContainer(root.value, true); 3019 if (props.watchSlotHeightChange) { 3020 watchSlotSizeChange(); 3021 } 3022 }); 3023 }); 3024 return (_ctx, _cache) => { 3025 return openBlock(), createElementBlock("div", { 3026 ref_key: "root", 3027 ref: root, 3028 class: normalizeClass(unref(ns).b()) 3029 }, [ 3030 createBaseVNode("div", { 3031 "aria-hidden": "true", 3032 class: normalizeClass(unref(ns).e("placeholder")), 3033 style: normalizeStyle(placeholderStyle.value) 3034 }, null, 6), 3035 createBaseVNode("div", { 3036 ref_key: "fixedRef", 3037 ref: fixedRef, 3038 class: normalizeClass({ [unref(ns).m("fixed")]: fixed.value && !_ctx.disabled }), 3039 style: normalizeStyle(stickyStyle.value) 3040 }, [ 3041 renderSlot(_ctx.$slots, "default") 3042 ], 6) 3043 ], 2); 3044 }; 3045 } 3046})); 3047const ZmSticky = withInstall(_sfc_main$X); 3048const GAP = 4; 3049const TRACK_FIELDS_MAP = { 3050 vertical: { 3051 offsetSize: "offsetHeight", 3052 scrollDirection: "scrollTop", 3053 scrollSize: "scrollHeight", 3054 size: "height", 3055 key: "vertical", 3056 axis: "Y", 3057 client: "clientY", 3058 direction: "top" 3059 }, 3060 horizontal: { 3061 offsetSize: "offsetWidth", 3062 scrollDirection: "scrollLeft", 3063 scrollSize: "scrollWidth", 3064 size: "width", 3065 key: "horizontal", 3066 axis: "X", 3067 client: "clientX", 3068 direction: "left" 3069 } 3070}; 3071const resolveThumbStyle = (axis, sizePercent, sizeKey, movement) => ({ 3072 [sizeKey]: sizePercent, 3073 transform: `translate${axis}(${movement}%)` 3074}); 3075const scrollbarContextKey = Symbol("scrollbarContextKey"); 3076var __defProp$1b = Object.defineProperty; 3077var __defProps$$ = Object.defineProperties; 3078var __getOwnPropDescs$$ = Object.getOwnPropertyDescriptors; 3079var __getOwnPropSymbols$1b = Object.getOwnPropertySymbols; 3080var __hasOwnProp$1b = Object.prototype.hasOwnProperty; 3081var __propIsEnum$1b = Object.prototype.propertyIsEnumerable; 3082var __pow$1 = Math.pow; 3083var __defNormalProp$1b = (obj, key, value) => key in obj ? __defProp$1b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 3084var __spreadValues$1b = (a, b) => { 3085 for (var prop in b || (b = {})) 3086 if (__hasOwnProp$1b.call(b, prop)) 3087 __defNormalProp$1b(a, prop, b[prop]); 3088 if (__getOwnPropSymbols$1b) 3089 for (var prop of __getOwnPropSymbols$1b(b)) { 3090 if (__propIsEnum$1b.call(b, prop)) 3091 __defNormalProp$1b(a, prop, b[prop]); 3092 } 3093 return a; 3094}; 3095var __spreadProps$$ = (a, b) => __defProps$$(a, __getOwnPropDescs$$(b)); 3096const _sfc_main$W = /* @__PURE__ */ defineComponent(__spreadProps$$(__spreadValues$1b({}, { 3097 name: "ZmScrollbarTrack" 3098}), { 3099 __name: "track", 3100 props: { 3101 always: Boolean, 3102 vertical: Boolean, 3103 showWhenScrolling: Boolean, 3104 thumbSize: { 3105 type: String, 3106 required: true 3107 }, 3108 ratio: { 3109 type: Number, 3110 required: true 3111 }, 3112 movement: { 3113 type: Number, 3114 required: true 3115 }, 3116 verticalTrackRight: String, 3117 zIndex: Number 3118 }, 3119 setup(__props, { expose: __expose }) { 3120 const props = __props; 3121 const isRTL = useRTL(); 3122 const scrolling = ref(false); 3123 const stopScrolling = debounce(() => { 3124 if (cursorDown.value || hoveringThumb.value) 3125 return; 3126 scrolling.value = false; 3127 }, 1e3); 3128 const showTrackWhenScrolling = computed(() => { 3129 return props.showWhenScrolling && !props.always; 3130 }); 3131 const toggleScrolling = () => { 3132 if (showTrackWhenScrolling.value) { 3133 scrolling.value = true; 3134 stopScrolling(); 3135 } else { 3136 scrolling.value = false; 3137 } 3138 }; 3139 const scrollbar = inject(scrollbarContextKey); 3140 const trackFieldsConfig = TRACK_FIELDS_MAP[props.vertical ? "vertical" : "horizontal"]; 3141 const ns = useNamespace("scrollbar"); 3142 const thumbRef = ref(); 3143 const thumbStyle = computed(() => { 3144 const { axis, size: sizeKey } = trackFieldsConfig; 3145 const { movement, thumbSize } = props; 3146 return resolveThumbStyle(axis, thumbSize, sizeKey, movement); 3147 }); 3148 const thumbState = ref({}); 3149 const trackStyle = computed(() => { 3150 let ret = {}; 3151 const direction = isRTL.value ? "left" : "right"; 3152 const { verticalTrackRight, vertical } = props; 3153 if (verticalTrackRight && vertical) { 3154 ret[direction] = verticalTrackRight; 3155 } 3156 if (props.zIndex && props.zIndex > 0) { 3157 ret.zIndex = props.zIndex; 3158 } 3159 return ret; 3160 }); 3161 const hoveringThumb = ref(false); 3162 const handleMouseEnter = (event) => { 3163 if (showTrackWhenScrolling.value) { 3164 hoveringThumb.value = true; 3165 } 3166 }; 3167 const handleMouseLeave = (event) => { 3168 if (showTrackWhenScrolling.value) { 3169 hoveringThumb.value = false;
3170 } 3171 }; 3172 const trackRef = ref(); 3173 const containerClass = computed(() => { 3174 return [ 3175 ns.e("track"), 3176 ns.is(trackFieldsConfig.key), 3177 ns.is("always", isMobile || props.always), 3178 ns.is("zero", !props.thumbSize), 3179 ns.is("scrolling", scrolling.value) 3180 ]; 3181 }); 3182 const offsetRatio = computed(() => { 3183 const { offsetSize: offsetSize2, scrollSize: scrollSize2 } = trackFieldsConfig; 3184 return __pow$1(trackRef.value[offsetSize2], 2) / scrollbar.wrapElement[scrollSize2] / props.ratio / thumbRef.value[offsetSize2]; 3185 }); 3186 let cursorDown = ref(false); 3187 const startDragging = (event) => { 3188 event.stopImmediatePropagation(); 3189 cursorDown.value = true; 3190 document.addEventListener("mousemove", mouseMoveDocumentHandler); 3191 document.addEventListener("mouseup", mouseUpDocumentHandler); 3192 document.onselectstart = () => false; 3193 }; 3194 const mouseMoveDocumentHandler = (event) => { 3195 /* istanbul ignore next @preserve */ 3196 if (cursorDown.value === false) 3197 return; 3198 const trackElement = trackRef.value; 3199 const thumbElement = thumbRef.value; 3200 const { axis, direction, client, offsetSize: offsetSize2, scrollSize: scrollSize2, scrollDirection } = trackFieldsConfig; 3201 const prevState = thumbState.value[axis]; 3202 const thumbClickPosition = thumbElement[offsetSize2] - prevState; 3203 if (isRTL.value && direction === "left") { 3204 let _direction = direction; 3205 _direction = "right"; 3206 const offsetValue = (trackElement.getBoundingClientRect()[_direction] - event[client]) * -1; 3207 const thumbPositionPercentage = (thumbClickPosition - offsetValue) * 100 * offsetRatio.value / trackElement[offsetSize2]; 3208 const wrapElement = scrollbar.wrapElement; 3209 wrapElement[scrollDirection] = -(thumbPositionPercentage * wrapElement[scrollSize2]) / 100; 3210 } else { 3211 const offsetValue = (trackElement.getBoundingClientRect()[direction] - event[client]) * -1; 3212 const thumbPositionPercentage = (offsetValue - thumbClickPosition) * 100 * offsetRatio.value / trackElement[offsetSize2]; 3213 const wrapElement = scrollbar.wrapElement; 3214 wrapElement[scrollDirection] = thumbPositionPercentage * wrapElement[scrollSize2] / 100; 3215 } 3216 }; 3217 const mouseUpDocumentHandler = () => { 3218 cursorDown.value = false; 3219 const { axis } = trackFieldsConfig; 3220 thumbState.value[axis] = 0; 3221 document.removeEventListener("mousemove", mouseMoveDocumentHandler); 3222 document.removeEventListener("mouseup", mouseUpDocumentHandler); 3223 document.onselectstart = null; 3224 }; 3225 const trackMouseDownHandler = (event) => { 3226 if (showTrackWhenScrolling.value) { 3227 if (!scrolling.value) { 3228 return; 3229 } 3230 } 3231 const { direction, client, offsetSize: offsetSize2, scrollDirection, scrollSize: scrollSize2 } = trackFieldsConfig; 3232 const target = event.target; 3233 const thumbHalf = thumbRef.value[offsetSize2] / 2; 3234 const wrapElement = scrollbar.wrapElement; 3235 if (isRTL.value && direction === "left") { 3236 let _direction = direction; 3237 _direction = "right"; 3238 const offsetValue = (target.getBoundingClientRect()[_direction] - event[client]) * -1 + thumbHalf * 2; 3239 const thumbPositionPercentage = (thumbHalf - offsetValue) * 100 * offsetRatio.value / trackRef.value[offsetSize2]; 3240 wrapElement[scrollDirection] = -(thumbPositionPercentage * wrapElement[scrollSize2]) / 100; 3241 } else { 3242 const offsetValue = (target.getBoundingClientRect()[direction] - event[client]) * -1; 3243 const thumbPositionPercentage = (offsetValue - thumbHalf) * 100 * offsetRatio.value / trackRef.value[offsetSize2]; 3244 wrapElement[scrollDirection] = thumbPositionPercentage * wrapElement[scrollSize2] / 100; 3245 } 3246 }; 3247 const thumbMouseDownHandler = (event) => { 3248 startDragging(event); 3249 const { axis, offsetSize: offsetSize2, client, direction } = trackFieldsConfig; 3250 const target = event.currentTarget; 3251 let _direction = direction; 3252 if (isRTL.value && direction === "left") { 3253 _direction = "right"; 3254 } 3255 thumbState.value[axis] = target[offsetSize2] - (event[client] - target.getBoundingClientRect()[_direction]); 3256 }; 3257 const scrollToEnd = () => { 3258 const wrapElement = scrollbar.wrapElement; 3259 const { scrollDirection, scrollSize: scrollSize2 } = trackFieldsConfig; 3260 if (wrapElement) { 3261 wrapElement[scrollDirection] = isRTL.value ? 0 : wrapElement[scrollSize2]; 3262 } 3263 }; 3264 const scrollToBegin = () => { 3265 const wrapElement = scrollbar.wrapElement; 3266 const { scrollDirection, scrollSize: scrollSize2 } = trackFieldsConfig; 3267 if (wrapElement) { 3268 wrapElement[scrollDirection] = isRTL.value ? -wrapElement[scrollSize2] : 0; 3269 } 3270 }; 3271 __expose({ 3272 scrollToEnd, 3273 scrollToBegin, 3274 toggleScrolling 3275 }); 3276 return (_ctx, _cache) => { 3277 return openBlock(), createElementBlock("div", { 3278 ref_key: "trackRef", 3279 ref: trackRef, 3280 class: normalizeClass(containerClass.value), 3281 "aria-hidden": "true", 3282 style: normalizeStyle(trackStyle.value), 3283 onMouseenter: handleMouseEnter, 3284 onMouseleave: handleMouseLeave, 3285 onMousedown: trackMouseDownHandler 3286 }, [ 3287 createBaseVNode("div", { 3288 ref_key: "thumbRef", 3289 ref: thumbRef, 3290 class: normalizeClass([unref(ns).e("thumb"), unref(ns).is("dragging", unref(cursorDown)), unref(ns).is("horizontal", !__props.vertical)]), 3291 style: normalizeStyle(thumbStyle.value), 3292 onMousedown: thumbMouseDownHandler 3293 }, null, 38) 3294 ], 38); 3295 }; 3296 } 3297})); 3298const getOffsetTop = (el, container) => { 3299 let top = 0; 3300 while (el && el !== container) { 3301 top += el.offsetTop; 3302 el = el.offsetParent; 3303 } 3304 return top; 3305}; 3306const getOffsetLeft = (el, container, isRTL) => { 3307 let left = 0; 3308 const originalEl = el; 3309 while (el && el !== container) { 3310 left += el.offsetLeft; 3311 el = el.offsetParent; 3312 } 3313 if (isRTL && container) { 3314 return container.clientWidth - left - originalEl.offsetWidth; 3315 } 3316 return left; 3317}; 3318const raf = (fn) => isClient ? window.requestAnimationFrame(fn) : setTimeout(fn, 16); 3319function createScroll() { 3320 let isScrolling = false;
3321 let stop = false; 3322 let canceled = false; 3323 const fn = function(el, type, targetPos, time, next) { 3324 /* istanbul ignore next @preserve */ 3325 if (isScrolling) { 3326 stop = true; 3327 } 3328 isScrolling = true; 3329 const start = Date.now(); 3330 const currentPos = el[type]; 3331 if (currentPos === targetPos) { 3332 isScrolling = false; 3333 next == null ? void 0 : next(); 3334 return; 3335 } 3336 setTimeout(() => { 3337 if (canceled) 3338 return; 3339 raf(step); 3340 }, 0); 3341 function step() { 3342 if (canceled) 3343 return; 3344 const current = Date.now(); 3345 const rate = Math.min(1, (current - start) / time); 3346 if (rate === 1) { 3347 el[type] = targetPos; 3348 isScrolling = false; 3349 next == null ? void 0 : next(); 3350 } else { 3351 el[type] = currentPos + (targetPos - currentPos) * rate; 3352 if (!stop) { 3353 raf(step); 3354 } else { 3355 /* istanbul ignore next @preserve */ 3356 stop = false; 3357 } 3358 } 3359 } 3360 }; 3361 fn.cancel = () => { 3362 canceled = true; 3363 }; 3364 return fn; 3365} 3366var __defProp$1a = Object.defineProperty; 3367var __defProps$_ = Object.defineProperties; 3368var __getOwnPropDescs$_ = Object.getOwnPropertyDescriptors; 3369var __getOwnPropSymbols$1a = Object.getOwnPropertySymbols; 3370var __hasOwnProp$1a = Object.prototype.hasOwnProperty; 3371var __propIsEnum$1a = Object.prototype.propertyIsEnumerable; 3372var __pow = Math.pow; 3373var __defNormalProp$1a = (obj, key, value) => key in obj ? __defProp$1a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 3374var __spreadValues$1a = (a, b) => { 3375 for (var prop in b || (b = {})) 3376 if (__hasOwnProp$1a.call(b, prop)) 3377 __defNormalProp$1a(a, prop, b[prop]); 3378 if (__getOwnPropSymbols$1a) 3379 for (var prop of __getOwnPropSymbols$1a(b)) { 3380 if (__propIsEnum$1a.call(b, prop)) 3381 __defNormalProp$1a(a, prop, b[prop]); 3382 } 3383 return a; 3384}; 3385var __spreadProps$_ = (a, b) => __defProps$_(a, __getOwnPropDescs$_(b)); 3386const scrollbarProps = { 3387 always: Boolean, 3388 showWhenScrolling: Boolean, 3389 wrapStyle: { 3390 type: [String, Object, Array], 3391 default: "" 3392 }, 3393 wrapClass: { 3394 type: [String, Array], 3395 default: "" 3396 }, 3397 viewClass: { 3398 type: [String, Array], 3399 default: "" 3400 }, 3401 viewStyle: { 3402 type: [String, Array, Object], 3403 default: "" 3404 }, 3405 resizeDetect: { 3406 type: Boolean, 3407 default: true 3408 }, 3409 tag: { 3410 type: String, 3411 default: "div" 3412 }, 3413 role: String, 3414 ariaLabel: String, 3415 minThumbSize: { 3416 type: Number, 3417 default: 20 3418 }, 3419 stickyXTrack: { 3420 type: Object, 3421 default() { 3422 return {}; 3423 } 3424 }, 3425 threshold: { 3426 type: Number, 3427 default: 1 3428 }, 3429 tabindex: Number, 3430 ariaOrientation: { 3431 type: String, 3432 default: "vertical" 3433 }, 3434 wrapAriaLabel: String, 3435 verticalTrackRight: String 3436}; 3437const scrollbarEmits = [ 3438 "scroll", 3439 "scroll-to-bottom", 3440 "scroll-to-right", 3441 "vertical-scrollbar-position-change" 3442]; 3443const _hoisted_1$v = ["tabindex", "role", "aria-orientation", "aria-label"]; 3444const _sfc_main$V = /* @__PURE__ */ defineComponent(__spreadProps$_(__spreadValues$1a({}, { 3445 name: "ZmScrollbar" 3446}), { 3447 __name: "scrollbar", 3448 props: scrollbarProps, 3449 emits: scrollbarEmits, 3450 setup(__props, { expose: __expose, emit: __emit }) { 3451 const isRTL = useRTL(); 3452 const props = __props; 3453 const emit = __emit; 3454 const ns = useNamespace("scrollbar"); 3455 let stopResizeObserver = void 0; 3456 let stopResizeListener = void 0; 3457 let xScrollCancelHandler = void 0; 3458 let yScrollCancelHandler = void 0; 3459 let scrollEndTimer; 3460 const scrollbarRef = ref(); 3461 const wrapRef = ref(); 3462 const viewRef = ref(); 3463 const trackXRef = ref(); 3464 const trackYRef = ref(); 3465 const sizeWidth = ref(""); 3466 const sizeHeight = ref(""); 3467 const movementX = ref(0); 3468 const movementY = ref(0); 3469 const ratioY = ref(1); 3470 const ratioX = ref(1); 3471 const prevThresholdX = ref(); 3472 const prevThresholdY = ref(); 3473 const wrapKls = computed(() => { 3474 return [props.wrapClass, ns.e("wrap"), ns.em("wrap", "hidden")]; 3475 }); 3476 const viewKls = computed(() => { 3477 return [ns.e("view"), props.viewClass]; 3478 }); 3479 const tabindexResult = computed(() => { 3480 if (isFirefox && !props.tabindex) { 3481 /* istanbul ignore next @preserve */ 3482 return -1; 3483 } else { 3484 return props.tabindex; 3485 } 3486 }); 3487 const wrapRole = computed(() => { 3488 const { tabindex } = props; 3489 if (!isUndefined(tabindex) && tabindex > -1) 3490 return "scrollbar"; 3491 return void 0; 3492 }); 3493 const hovering = ref(false); 3494 const onToggleHoveringHandler = (status) => { 3495 if (props.always || props.showWhenScrolling) 3496 return; 3497 hovering.value = status; 3498 }; 3499 const scrollbarVerticalPosition = ref(""); 3500 const getScrollArg = () => { 3501 const wrapElement = wrapRef.value; 3502 const threshold = props.threshold; 3503 const { scrollTop, scrollLeft, clientHeight, clientWidth, scrollHeight, scrollWidth } = wrapElement; 3504 movementY.value = scrollTop * 100 / clientHeight * ratioY.value; 3505 movementX.value = scrollLeft * 100 / clientWidth * ratioX.value; 3506 const canScrollY = scrollHeight > clientHeight; 3507 const thresholdY = scrollHeight - Math.floor(scrollTop) - clientHeight; 3508 const canScrollX = scrollWidth > clientWidth; 3509 const thresholdX = scrollWidth - Math.floor(scrollLeft) - clientWidth; 3510 return { canScrollY, thresholdY, canScrollX, thresholdX, threshold, wrapElement }; 3511 }; 3512 const computeVerticalScrollbarPosition = (wrapElement, isScrollToBottom) => { 3513 if (!sizeHeight.value) { 3514 scrollbarVerticalPosition.value = ""; 3515 } else if (!wrapElement.scrollTop) { 3516 scrollbarVerticalPosition.value = "top"; 3517 } else if (isScrollToBottom) { 3518 scrollbarVerticalPosition.value = "bottom"; 3519 } else { 3520 scrollbarVerticalPosition.value = "middle"; 3521 } 3522 emit("vertical-scrollbar-position-change", scrollbarVerticalPosition.value); 3523 }; 3524 const computedIsScrollToBottom = (thresholdY, threshold, canScrollY) => { 3525 return thresholdY >= -1 && thresholdY <= threshold && canScrollY && prevThresholdY.value !== thresholdY; 3526 }; 3527 const handleScroll = () => { 3528 var _a, _b; 3529 /* istanbul ignore next @preserve */ 3530 if (!wrapRef.value) 3531 return; 3532 const { canScrollY, thresholdY, canScrollX, thresholdX, threshold, wrapElement } = getScrollArg(); 3533 emit("scroll", wrapElement); 3534 computeVerticalScrollbarPosition(wrapElement, false); 3535 if (canScrollY) { 3536 (_a = trackYRef.value) == null ? void 0 : _a.toggleScrolling(); 3537 } 3538 if (canScrollX) { 3539 (_b = trackXRef.value) == null ? void 0 : _b.toggleScrolling(); 3540 } 3541 clearTimeout(scrollEndTimer); 3542 scrollEndTimer = window.setTimeout(() => { 3543 const isScrollToBottom = computedIsScrollToBottom(thresholdY, threshold, canScrollY); 3544 computeVerticalScrollbarPosition(wrapElement, isScrollToBottom); 3545 if (thresholdX >= -1 && thresholdX <= threshold && canScrollX && prevThresholdX.value !== thresholdX) { 3546 emit("scroll-to-right"); 3547 } 3548 if (isScrollToBottom) { 3549 emit("scroll-to-bottom"); 3550 } 3551 prevThresholdX.value = thresholdX; 3552 prevThresholdY.value = thresholdY; 3553 }, 20); 3554 }; 3555 const computedVerticalScrollbarPositionWhenUpdate = () => { 3556 const { canScrollY, thresholdY, threshold, wrapElement } = getScrollArg(); 3557 computeVerticalScrollbarPosition( 3558 wrapElement, 3559 computedIsScrollToBottom(thresholdY, threshold, canScrollY) 3560 ); 3561 }; 3562 const updateThumb = () => { 3563 /* istanbul ignore next @preserve */ 3564 if (!wrapRef.value) 3565 return; 3566 prevThresholdX.value = void 0; 3567 prevThresholdY.value = void 0; 3568 const { minThumbSize } = props; 3569 const wrapElement = wrapRef.value; 3570 const { offsetHeight, offsetWidth, scrollHeight, scrollWidth } = wrapElement; 3571 const actualOffsetHeight = offsetHeight - GAP; 3572 const actualOffsetWidth = offsetWidth - GAP; 3573 const originalHeight = __pow(actualOffsetHeight, 2) / scrollHeight; 3574 const originalWidth = __pow(actualOffsetWidth, 2) / scrollWidth; 3575 const height = Math.max(originalHeight, minThumbSize); 3576 const width = Math.max(originalWidth, minThumbSize); 3577 ratioY.value = originalHeight / (actualOffsetHeight - originalHeight) / (height / (actualOffsetHeight - height)); 3578 ratioX.value = originalWidth / (actualOffsetWidth - originalWidth) / (width / (actualOffsetWidth - width)); 3579 sizeHeight.value = height + GAP < actualOffsetHeight ? `${height}px` : ""; 3580 sizeWidth.value = width + GAP < actualOffsetWidth ? `${width}px` : ""; 3581 computedVerticalScrollbarPositionWhenUpdate(); 3582 }; 3583 const scrollToLeft = () => { 3584 isRTL.value ? trackXRef.value.scrollToEnd() : trackXRef.value.scrollToBegin(); 3585 }; 3586 const scrollToRight = () => { 3587 !isRTL.value ? trackXRef.value.scrollToEnd() : trackXRef.value.scrollToBegin(); 3588 }; 3589 const scrollToTop = () => { 3590 trackYRef.value.scrollToBegin(); 3591 }; 3592 const scrollToBottom = () => { 3593 trackYRef.value.scrollToEnd(); 3594 }; 3595 const baseScrollIntoView = (el, duration = 300, offset2 = 0, alignToTo
3595pOrLeft = true, isVertical = true, done) => { 3596 const container = wrapRef.value; 3597 /* istanbul ignore next @preserve */ 3598 if (!el || !container) { 3599 return; 3600 } 3601 const containerSize = (isVertical ? container.clientHeight : container.clientWidth) / 2; 3602 const offsetDistance = isVertical ? getOffsetTop(el, scrollbarRef.value) : getOffsetLeft(el, scrollbarRef.value, isRTL.value); 3603 let scrollTopOrLeft = Math.max( 3604 0, 3605 alignToTopOrLeft ? offsetDistance - offset2 : offsetDistance - containerSize - offset2 3606 ); 3607 if (isRTL.value && !isVertical) { 3608 scrollTopOrLeft = -scrollTopOrLeft; 3609 } 3610 if (!isVertical && xScrollCancelHandler) { 3611 xScrollCancelHandler(); 3612 } 3613 if (isVertical && yScrollCancelHandler) { 3614 yScrollCancelHandler(); 3615 } 3616 const scroll = createScroll(); 3617 if (isVertical) { 3618 yScrollCancelHandler = scroll.cancel; 3619 } else { 3620 xScrollCancelHandler = scroll.cancel; 3621 } 3622 scroll(container, isVertical ? "scrollTop" : "scrollLeft", scrollTopOrLeft, duration, () => { 3623 if (!isVertical && xScrollCancelHandler) { 3624 xScrollCancelHandler = void 0; 3625 } 3626 if (isVertical && yScrollCancelHandler) { 3627 yScrollCancelHandler = void 0; 3628 } 3629 raf(() => { 3630 done && done(); 3631 }); 3632 }); 3633 }; 3634 const scrollXIntoView = (el, duration, offset2, alignToLeft, done) => { 3635 baseScrollIntoView(el, duration, offset2, alignToLeft, false, done); 3636 }; 3637 const baseScrollBy = (delta, duration, isVertical, done) => { 3638 const container = wrapRef.value; 3639 /* istanbul ignore next @preserve */ 3640 if (!container) { 3641 return; 3642 } 3643 const { clientHeight, clientWidth, scrollHeight, scrollWidth } = container; 3644 const prop = isVertical ? "scrollTop" : "scrollLeft"; 3645 const currentValue = container[prop]; 3646 const destination = clampNumber( 3647 currentValue + delta, 3648 0, 3649 isVertical ? scrollHeight - clientHeight : scrollWidth - clientWidth 3650 ); 3651 const scroll = createScroll(); 3652 scroll(container, prop, destination, duration, () => { 3653 raf(() => { 3654 done && done(); 3655 }); 3656 }); 3657 }; 3658 const scrollXBy = (delta, duration = 300, done) => { 3659 baseScrollBy(delta, duration, false, done); 3660 }; 3661 const scrollYIntoView = (el, duration, offset2, alignToTop, done) => { 3662 baseScrollIntoView(el, duration, offset2, alignToTop, void 0, done); 3663 }; 3664 const scrollYBy = (delta, duration = 300, done) => { 3665 baseScrollBy(delta, duration, true, done); 3666 }; 3667 const canScrollVertically = () => { 3668 const { clientHeight, scrollHeight } = wrapRef.value; 3669 return scrollHeight > clientHeight; 3670 }; 3671 const canScrollHorizontally = () => { 3672 const { clientWidth, scrollWidth } = wrapRef.value; 3673 return scrollWidth > clientWidth; 3674 }; 3675 const cleanScrollHandler = () => { 3676 if (xScrollCancelHandler) { 3677 xScrollCancelHandler(); 3678 xScrollCancelHandler = void 0; 3679 } 3680 if (yScrollCancelHandler) { 3681 yScrollCancelHandler(); 3682 yScrollCancelHandler = void 0; 3683 } 3684 }; 3685 useResizeObserver(wrapRef, updateThumb); 3686 watch( 3687 () => props.resizeDetect, 3688 (resizeDetect) => { 3689 if (!resizeDetect) { 3690 stopResizeObserver == null ? void 0 : stopResizeObserver(); 3691 stopResizeListener == null ? void 0 : stopResizeListener(); 3692 } else { 3693 ({ stop: stopResizeObserver } = useResizeObserver(viewRef, updateThumb)); 3694 stopResizeListener = useEventListener("resize", updateThumb); 3695 } 3696 }, 3697 { immediate: true } 3698 ); 3699 provide( 3700 scrollbarContextKey, 3701 reactive({ 3702 scrollbarElement: scrollbarRef, 3703 wrapElement: wrapRef, 3704 zIndex: 10 3705 }) 3706 ); 3707 const parentScrollbarContext = inject(scrollbarContextKey, void 0); 3708 const zIndex2 = computed(() => { 3709 if (parentScrollbarContext && parentScrollbarContext.zIndex) { 3710 return parentScrollbarContext.zIndex + 1; 3711 } 3712 return 0; 3713 });
3714 const getScrollContainer2 = () => { 3715 return wrapRef.value; 3716 }; 3717 onMounted(() => { 3718 nextTick(() => { 3719 updateThumb(); 3720 }); 3721 }); 3722 __expose({ 3723 scrollbarRef, 3724 wrapRef, 3725 viewRef, 3726 updateThumb, 3727 scrollToLeft, 3728 scrollToRight, 3729 scrollToTop, 3730 scrollToBottom, 3731 scrollXIntoView, 3732 scrollYIntoView, 3733 scrollXBy, 3734 scrollYBy, 3735 getScrollContainer: getScrollContainer2, 3736 canScrollVertically, 3737 canScrollHorizontally, 3738 cleanScrollHandler, 3739 getVerticalScrollbarPosition() { 3740 return scrollbarVerticalPosition.value; 3741 } 3742 }); 3743 return (_ctx, _cache) => { 3744 return openBlock(), createElementBlock("div", { 3745 ref_key: "scrollbarRef", 3746 ref: scrollbarRef, 3747 class: normalizeClass([unref(ns).b(), unref(ns).is("hovering", hovering.value), unref(ns).is("scrolling-show", _ctx.showWhenScrolling)]), 3748 role: "none", 3749 onMouseenter: _cache[0] || (_cache[0] = ($event) => onToggleHoveringHandler(true)), 3750 onMouseleave: _cache[1] || (_cache[1] = ($event) => onToggleHoveringHandler(false)) 3751 }, [ 3752 createBaseVNode("div", { 3753 ref_key: "wrapRef", 3754 ref: wrapRef, 3755 tabindex: tabindexResult.value, 3756 role: wrapRole.value, 3757 "aria-orientation": wrapRole.value ? _ctx.ariaOrientation : void 0, 3758 "aria-label": _ctx.wrapAriaLabel, 3759 class: normalizeClass(wrapKls.value), 3760 style: normalizeStyle(_ctx.wrapStyle), 3761 onScroll: handleScroll 3762 }, [ 3763 (openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), { 3764 ref_key: "viewRef", 3765 ref: viewRef, 3766 role: _ctx.role, 3767 "aria-label": _ctx.ariaLabel, 3768 class: normalizeClass(viewKls.value), 3769 style: normalizeStyle(_ctx.viewStyle) 3770 }, { 3771 default: withCtx(() => [ 3772 renderSlot(_ctx.$slots, "default") 3773 ]), 3774 _: 3 3775 }, 8, ["role", "aria-label", "class", "style"])) 3776 ], 46, _hoisted_1$v), 3777 _ctx.stickyXTrack.target ? (openBlock(), createBlock(unref(ZmSticky), { 3778 key: 0, 3779 position: "bottom", 3780 target: _ctx.stickyXTrack.target, 3781 offset: _ctx.stickyXTrack.offset 3782 }, { 3783 default: withCtx(() => [ 3784 createVNode(_sfc_main$W, { 3785 ref_key: "trackXRef", 3786 ref: trackXRef, 3787 "thumb-size": sizeWidth.value, 3788 movement: movementX.value, 3789 "show-when-scrolling": _ctx.showWhenScrolling, 3790 "z-index": zIndex2.value, 3791 ratio: ratioX.value, 3792 always: _ctx.always 3793 }, null, 8, ["thumb-size", "movement", "show-when-scrolling", "z-index", "ratio", "always"]) 3794 ]), 3795 _: 1 3796 }, 8, ["target", "offset"])) : (openBlock(), createBlock(_sfc_main$W, { 3797 key: 1, 3798 ref_key: "trackXRef", 3799 ref: trackXRef, 3800 "thumb-size": sizeWidth.value, 3801 movement: movementX.value, 3802 "show-when-scrolling": _ctx.showWhenScrolling, 3803 "z-index": zIndex2.value, 3804 ratio: ratioX.value, 3805 always: _ctx.always 3806 }, null, 8, ["thumb-size", "movement", "show-when-scrolling", "z-index", "ratio", "always"])), 3807 createVNode(_sfc_main$W, { 3808 ref_key: "trackYRef", 3809 ref: trackYRef, 3810 "thumb-size": sizeHeight.value, 3811 movement: movementY.value, 3812 "show-when-scrolling": _ctx.showWhenScrolling, 3813 "z-index": zIndex2.value, 3814 ratio: ratioY.value, 3815 always: _ctx.always, 3816 "vertical-track-right": _ctx.verticalTrackRight, 3817 vertical: "" 3818 }, null, 8, ["thumb-size", "movement", "show-when-scrolling", "z-index", "ratio", "always", "vertical-track-right"]) 3819 ], 34); 3820 }; 3821 } 3822})); 3823const ZmScrollbar = withInstall(_sfc_main$V); 3824var __defProp$19 = Object.defineProperty; 3825var __defProps$Z = Object.defineProperties; 3826var __getOwnPropDescs$Z = Object.getOwnPropertyDescriptors; 3827var __getOwnPropSymbols$19 = Object.getOwnPropertySymbols; 3828var __hasOwnProp$19 = Object.prototype.hasOwnProperty; 3829var __propIsEnum$19 = Object.prototype.propertyIsEnumerable; 3830var __defNormalProp$19 = (obj, key, value) => key in obj ? __defProp$19(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 3831var __spreadValues$19 = (a, b) => { 3832 for (var prop in b || (b = {})) 3833 if (__hasOwnProp$19.call(b, prop)) 3834 __defNormalProp$19(a, prop, b[prop]); 3835 if (__getOwnPropSymbols$19) 3836 for (var prop of __getOwnPropSymbols$19(b)) { 3837 if (__propIsEnum$19.call(b, prop)) 3838 __defNormalProp$19(a, prop, b[prop]); 3839 } 3840 return a; 3841}; 3842var __spreadProps$Z = (a, b) => __defProps$Z(a, __getOwnPropDescs$Z(b)); 3843const linkProps = { 3844 href: String, 3845 standalone: Boolean, 3846 disabled: Boolean, 3847 showIcon: Boolean, 3848 preventDefault: Boolean, 3849 size: { 3850 type: String, 3851 default: "md" 3852 }, 3853 testId: String 3854}; 3855const _hoisted_1$u = ["aria-disabled", "href", "data-testid"]; 3856const _hoisted_2$c = ["aria-disabled", "href", "data-testid"]; 3857const _sfc_main$U = /* @__PURE__ */ defineComponent(__spreadProps$Z(__spreadValues$19({}, { 3858 name: "ZmLink", 3859 inheritAttrs: false 3860}), { 3861 __name: "link", 3862 props: linkProps, 3863 setup(__props) { 3864 const props = __props; 3865 const ns = useNamespace("link"); 3866 const linkClassName = computed(() => { 3867 return [ns.b(), ns.is("disabled", props.disabled), ns.m(props.size)]; 3868 }); 3869 const handleClick = (event) => { 3870 const { disabled, preventDefault: preventDefault2 } = props; 3871 if (disabled || preventDefault2) { 3872 event.preventDefault(); 3873 } 3874 }; 3875 return (_ctx, _cache) => { 3876 return _ctx.standalone ? (openBlock(), createElementBlock("div", { 3877 key: 0, 3878 class: normalizeClass(unref(ns).e("wrapper")) 3879 }, [ 3880 createBaseVNode("a", mergeProps({ 3881 class: linkClassName.value, 3882 "aria-disabled": _ctx.disabled, 3883 href: _ctx.href, 3884 "data-testid": _ctx.testId 3885 }, _ctx.$attrs, { onClick: handleClick }), [ 3886 _ctx.$slots.default ? (openBlock(), createElementBlock("span", { 3887 key: 0, 3888 class: normalizeClass(unref(ns).e("inner")) 3889 }, [ 3890 renderSlot(_ctx.$slots, "default") 3891 ], 2)) : createCommentVNode("", true), 3892 createVNode(unref(ZmIcon), { 3893 "should-r-t-l": "", 3894 class: normalizeClass(unref(ns).e("arrow")) 3895 }, { 3896 default: withCtx(() => [ 3897 createVNode(unref(ArrowTopRight)) 3898 ]), 3899 _: 1 3900 }, 8, ["class"]) 3901 ], 16, _hoisted_1$u) 3902 ], 2)) : (openBlock(), createElementBlock("a", mergeProps({ 3903 key: 1, 3904 class: linkClassName.value, 3905 "aria-disabled": _ctx.disabled, 3906 href: _ctx.href, 3907 "data-testid": _ctx.testId 3908 }, _ctx.$attrs, { onClick: handleClick }), [ 3909 _ctx.$slots.default ? (openBlock(), createElementBlock("span", { 3910 key: 0, 3911 class: normalizeClass(unref(ns).e("inner")) 3912 }, [ 3913 renderSlot(_ctx.$slots, "default") 3914 ], 2)) : createCommentVNode("", true), 3915 _ctx.showIcon ? (openBlock(), createBlock(unref(ZmIcon), { 3916 key: 1, 3917 "should-r-t-l": "", 3918 class: normalizeClass(unref(ns).e("arrow")) 3919 }, { 3920 default: withCtx(() => [ 3921 createVNode(unref(ArrowTopRight)) 3922 ]), 3923 _: 1 3924 }, 8, ["class"])) : createCommentVNode("", true)
3925 ], 16, _hoisted_2$c)); 3926 }; 3927 } 3928})); 3929const ZmLink = withInstall(_sfc_main$U); 3930var __defProp$18 = Object.defineProperty; 3931var __defProps$Y = Object.defineProperties; 3932var __getOwnPropDescs$Y = Object.getOwnPropertyDescriptors; 3933var __getOwnPropSymbols$18 = Object.getOwnPropertySymbols; 3934var __hasOwnProp$18 = Object.prototype.hasOwnProperty; 3935var __propIsEnum$18 = Object.prototype.propertyIsEnumerable; 3936var __defNormalProp$18 = (obj, key, value) => key in obj ? __defProp$18(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 3937var __spreadValues$18 = (a, b) => { 3938 for (var prop in b || (b = {})) 3939 if (__hasOwnProp$18.call(b, prop)) 3940 __defNormalProp$18(a, prop, b[prop]); 3941 if (__getOwnPropSymbols$18) 3942 for (var prop of __getOwnPropSymbols$18(b)) { 3943 if (__propIsEnum$18.call(b, prop)) 3944 __defNormalProp$18(a, prop, b[prop]); 3945 } 3946 return a; 3947}; 3948var __spreadProps$Y = (a, b) => __defProps$Y(a, __getOwnPropDescs$Y(b)); 3949const dividerProps = { 3950 direction: { 3951 type: String, 3952 default: "horizontal" 3953 }, 3954 padding: { 3955 type: String, 3956 default: "none" 3957 } 3958}; 3959const _sfc_main$T = /* @__PURE__ */ defineComponent(__spreadProps$Y(__spreadValues$18({}, { 3960 name: "ZmDivider" 3961}), { 3962 __name: "divider", 3963 props: dividerProps, 3964 setup(__props) { 3965 const ns = useNamespace("divider"); 3966 return (_ctx, _cache) => { 3967 return openBlock(), createElementBlock("div", { 3968 class: normalizeClass([unref(ns).b(), unref(ns).is(_ctx.direction, true), unref(ns).m(_ctx.padding)]) 3969 }, null, 2); 3970 }; 3971 } 3972})); 3973const ZmDivider = withInstall(_sfc_main$T); 3974const rowProps = { 3975 tag: { 3976 type: String, 3977 default: "div" 3978 }, 3979 gutter: { 3980 type: Number, 3981 default: 0 3982 }, 3983 justify: { 3984 type: String, 3985 default: "start" 3986 }, 3987 align: { 3988 type: String, 3989 default: "top" 3990 } 3991}; 3992const ROW_CONTEXT_KEY = Symbol("ZmRowContextKey"); 3993var __defProp$17 = Object.defineProperty; 3994var __defProps$X = Object.defineProperties; 3995var __getOwnPropDescs$X = Object.getOwnPropertyDescriptors; 3996var __getOwnPropSymbols$17 = Object.getOwnPropertySymbols; 3997var __hasOwnProp$17 = Object.prototype.hasOwnProperty; 3998var __propIsEnum$17 = Object.prototype.propertyIsEnumerable; 3999var __defNormalProp$17 = (obj, key, value) => key in obj ? __defProp$17(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 4000var __spreadValues$17 = (a, b) => { 4001 for (var prop in b || (b = {})) 4002 if (__hasOwnProp$17.call(b, prop)) 4003 __defNormalProp$17(a, prop, b[prop]); 4004 if (__getOwnPropSymbols$17) 4005 for (var prop of __getOwnPropSymbols$17(b)) { 4006 if (__propIsEnum$17.call(b, prop)) 4007 __defNormalProp$17(a, prop, b[prop]); 4008 } 4009 return a; 4010}; 4011var __spreadProps$X = (a, b) => __defProps$X(a, __getOwnPropDescs$X(b)); 4012const colProps = { 4013 tag: { 4014 type: String, 4015 default: "div" 4016 }, 4017 span: { 4018 type: Number, 4019 default: 12 4020 }, 4021 offset: { 4022 type: Number, 4023 default: 0 4024 }, 4025 pull: { 4026 type: Number, 4027 default: 0 4028 }, 4029 push: { 4030 type: Number, 4031 default: 0 4032 }, 4033 xs: { 4034 type: [Number, Object], 4035 default: () => ({}) 4036 }, 4037 sm: { 4038 type: [Number, Object], 4039 default: () => ({}) 4040 }, 4041 md: { 4042 type: [Number, Object], 4043 default: () => ({}) 4044 }, 4045 lg: { 4046 type: [Number, Object], 4047 default: () => ({}) 4048 }, 4049 xl: { 4050 type: [Number, Object], 4051 default: () => ({}) 4052 } 4053}; 4054const _sfc_main$S = /* @__PURE__ */ defineComponent(__spreadProps$X(__spreadValues$17({}, { 4055 name: "ZmCol" 4056}), { 4057 __name: "col", 4058 props: colProps, 4059 setup(__props) { 4060 const props = __props; 4061 const { gutter } = inject(ROW_CONTEXT_KEY, { gutter: 0 }); 4062 const ns = useNamespace("col"); 4063 const style = computed(() => { 4064 const styles = {}; 4065 if (gutter) { 4066 styles.paddingLeft = styles.paddingRight = `${gutter / 2}px`; 4067 } 4068 return styles; 4069 }); 4070 const colKls = computed(() => { 4071 const classes = []; 4072 const pos = ["span", "offset", "pull", "push"]; 4073 pos.forEach((prop) => { 4074 const size2 = props[prop]; 4075 if (size2) { 4076 if (prop === "span") 4077 classes.push(ns.b(`${props[prop]}`)); 4078 else if (size2 > 0) 4079 classes.push(ns.b(`${prop}-${props[prop]}`)); 4080 } 4081 }); 4082 const sizes = ["xs", "sm", "md", "lg", "xl"];
4083 sizes.forEach((size2) => { 4084 if (isNumber(props[size2])) { 4085 classes.push(ns.b(`${size2}-${props[size2]}`)); 4086 } else if (isObject(props[size2])) { 4087 Object.entries(props[size2]).forEach(([prop, sizeProp]) => { 4088 classes.push( 4089 prop !== "span" ? ns.b(`${size2}-${prop}-${sizeProp}`) : ns.b(`${size2}-${sizeProp}`) 4090 ); 4091 }); 4092 } 4093 }); 4094 if (gutter) { 4095 classes.push(ns.is("guttered")); 4096 } 4097 return [ns.b(), classes]; 4098 }); 4099 return (_ctx, _cache) => { 4100 return openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), { 4101 class: normalizeClass(colKls.value), 4102 style: normalizeStyle(style.value) 4103 }, { 4104 default: withCtx(() => [ 4105 renderSlot(_ctx.$slots, "default") 4106 ]), 4107 _: 3 4108 }, 8, ["class", "style"]); 4109 }; 4110 } 4111})); 4112withInstall(_sfc_main$S); 4113var __defProp$16 = Object.defineProperty; 4114var __defProps$W = Object.defineProperties; 4115var __getOwnPropDescs$W = Object.getOwnPropertyDescriptors; 4116var __getOwnPropSymbols$16 = Object.getOwnPropertySymbols; 4117var __hasOwnProp$16 = Object.prototype.hasOwnProperty; 4118var __propIsEnum$16 = Object.prototype.propertyIsEnumerable; 4119var __defNormalProp$16 = (obj, key, value) => key in obj ? __defProp$16(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 4120var __spreadValues$16 = (a, b) => { 4121 for (var prop in b || (b = {})) 4122 if (__hasOwnProp$16.call(b, prop)) 4123 __defNormalProp$16(a, prop, b[prop]); 4124 if (__getOwnPropSymbols$16) 4125 for (var prop of __getOwnPropSymbols$16(b)) { 4126 if (__propIsEnum$16.call(b, prop)) 4127 __defNormalProp$16(a, prop, b[prop]); 4128 } 4129 return a; 4130}; 4131var __spreadProps$W = (a, b) => __defProps$W(a, __getOwnPropDescs$W(b)); 4132const _sfc_main$R = /* @__PURE__ */ defineComponent(__spreadProps$W(__spreadValues$16({}, { 4133 name: "ZmRow" 4134}), { 4135 __name: "row", 4136 props: rowProps, 4137 setup(__props) { 4138 const props = __props; 4139 const ns = useNamespace("row"); 4140 provide(ROW_CONTEXT_KEY, { 4141 gutter: props.gutter 4142 }); 4143 const style = computed(() => { 4144 const styles = {}; 4145 if (!props.gutter) { 4146 return styles; 4147 } 4148 styles.marginRight = styles.marginLeft = `-${props.gutter / 2}px`; 4149 return styles; 4150 }); 4151 const rowKls = computed(() => [ 4152 ns.b(), 4153 ns.is(`justify-${props.justify}`, props.justify !== "start"), 4154 ns.is(`align-${props.align}`, props.align !== "top") 4155 ]); 4156 return (_ctx, _cache) => { 4157 return openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), { 4158 class: normalizeClass(rowKls.value), 4159 style: normalizeStyle(style.value) 4160 }, { 4161 default: withCtx(() => [ 4162 renderSlot(_ctx.$slots, "default") 4163 ]), 4164 _: 3 4165 }, 8, ["class", "style"]); 4166 }; 4167 } 4168})); 4169withInstall(_sfc_main$R); 4170const RADIO_GROUP_CONTEXT_KEY = Symbol("ZmRadioGroupKey"); 4171const radioGroupProps = { 4172 modelValue: { 4173 type: [String, Number, Boolean], 4174 default: "" 4175 }, 4176 vertical: Boolean, 4177 disabled: Boolean, 4178 ariaLabelledby: String, 4179 ariaLabel: String, 4180 ariaDescribedby: String, 4181 ariaRequired: Boolean, 4182 disallowArrowKeySelected: Boolean, 4183 validateEvent: { 4184 type: Boolean, 4185 default: true 4186 }, 4187 title: String, 4188 beforeChange: Function 4189}; 4190const radioGroupEmits = ["update:modelValue", "change"]; 4191const INFO_POPOVER_INJECTION_KEY = Symbol("ZmInfoPopover"); 4192const mutuallyExclusiveInfoPopovers = /* @__PURE__ */ new Set([]); 4193const TABLE_INJECTION_KEY = Symbol("ZmTable"); 4194const TABLE_BODY_INJECTION_KEY = Symbol("ZmTableBody"); 4195const Virtual_TABLE_INJECTION_KEY = Symbol("ZmVirtualTable"); 4196function useWrapperInTableBody() { 4197 const isInTableBody = !!inject(TABLE_BODY_INJECTION_KEY, void 0) || !!inject(Virtual_TABLE_INJECTION_KEY, void 0); 4198 const isPressedArrowUpAndDownInTableBody = (keyCode) => { 4199 return isInTableBody && [EVENT_CODE.down, EVENT_CODE.up].includes(keyCode); 4200 }; 4201 return { isPressedArrowUpAndDownInTableBody, isInTableBody }; 4202} 4203const TOOLTIP_INJECTION_KEY = Symbol("ZmTooltip"); 4204const mutuallyExclusiveTooltips = /* @__PURE__ */ new Set([]); 4205var __defProp$15 = Object.defineProperty; 4206var __defProps$V = Object.defineProperties; 4207var __getOwnPropDescs$V = Object.getOwnPropertyDescriptors; 4208var __getOwnPropSymbols$15 = Object.getOwnPropertySymbols; 4209var __hasOwnProp$15 = Object.prototype.hasOwnProperty; 4210var __propIsEnum$15 = Object.prototype.propertyIsEnumerable; 4211var __defNormalProp$15 = (obj, key, value) => key in obj ? __defProp$15(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 4212var __spreadValues$15 = (a, b) => { 4213 for (var prop in b || (b = {})) 4214 if (__hasOwnProp$15.call(b, prop)) 4215 __defNormalProp$15(a, prop, b[prop]); 4216 if (__getOwnPropSymbols$15) 4217 for (var prop of __getOwnPropSymbols$15(b)) { 4218 if (__propIsEnum$15.call(b, prop)) 4219 __defNormalProp$15(a, prop, b[prop]); 4220 } 4221 return a; 4222}; 4223var __spreadProps$V = (a, b) => __defProps$V(a, __getOwnPropDescs$V(b)); 4224const radioProps = { 4225 label: { 4226 type: [String, Number, Boolean], 4227 required: true 4228 }, 4229 disabled: Boolean,
4230 ariaLabel: String, 4231 ariaDescribedby: String, 4232 ariaRequired: Boolean, 4233 forwardTooltipTrigger: { 4234 type: Boolean, 4235 default: true 4236 }, 4237 description: String, 4238 labelAriaHidden: { 4239 type: Boolean, 4240 default: true 4241 }, 4242 testId: String 4243}; 4244const _hoisted_1$t = ["tabindex", "data-testid", "aria-labelledby", "aria-describedby", "aria-checked", "aria-label", "aria-disabled", "aria-required"]; 4245const _hoisted_2$b = ["id", "aria-hidden"]; 4246const _hoisted_3$6 = ["id"]; 4247const _sfc_main$Q = /* @__PURE__ */ defineComponent(__spreadProps$V(__spreadValues$15({}, { 4248 name: "ZmRadio" 4249}), { 4250 __name: "radio", 4251 props: radioProps, 4252 setup(__props, { expose: __expose }) { 4253 const props = __props; 4254 const ns = useNamespace("radio"); 4255 const radioRef = ref(); 4256 const containerRef = ref(); 4257 const tooltipContext = inject(TOOLTIP_INJECTION_KEY, void 0); 4258 const infoPopoverContext = inject(INFO_POPOVER_INJECTION_KEY, void 0); 4259 const radioGroup = inject(RADIO_GROUP_CONTEXT_KEY, void 0); 4260 const { isInTableBody } = useWrapperInTableBody(); 4261 /* istanbul ignore next @preserve */ 4262 if (!radioGroup) { 4263 throwError("ZmRadio", "Radio must be wrapped by RadioGroup"); 4264 } 4265 const instance = getCurrentInstance(); 4266 const labelledbyId = useId(); 4267 const descriptionId = useId(); 4268 const ariaLabelledbyResult = computed(() => { 4269 if (props.ariaLabel) 4270 return void 0; 4271 return labelledbyId.value; 4272 }); 4273 const ariaDescribedbyResult = computed(() => { 4274 const ret = []; 4275 const { ariaDescribedby } = props; 4276 if (!isDisabled.value && radioGroup.radioAriaDescribedbyResult.value) { 4277 ret.push(radioGroup.radioAriaDescribedbyResult.value); 4278 } 4279 if (props.description) { 4280 ret.push(descriptionId.value); 4281 } 4282 if (ariaDescribedby) { 4283 ret.push(ariaDescribedby); 4284 } 4285 return ret.length ? ret.join(" ") : void 0; 4286 }); 4287 const isDisabled = useFormDisabled(computed(() => radioGroup.disabled.value)); 4288 const isChecked = ref(radioGroup.modelValue.value === props.label); 4289 const setChecked = (checked = true, supportBeforeChange = false) => { 4290 const handler = () => { 4291 if (checked) { 4292 radioGroup.uncheckAllRadios(); 4293 radioGroup.changeEvent(props.label); 4294 } 4295 isChecked.value = checked; 4296 }; 4297 if (radioGroup.beforeChange && supportBeforeChange) { 4298 radioGroup.beforeChange((selected) => { 4299 if (selected) { 4300 handler(); 4301 } 4302 }, props.label); 4303 } else { 4304 handler(); 4305 } 4306 }; 4307 const tabIndex = ref(-1); 4308 const setTabindex = (newV = 0) => { 4309 if (newV === 0) { 4310 radioGroup.inertAllRadios(); 4311 } 4312 tabIndex.value = newV; 4313 }; 4314 const getRootEl = () => containerRef.value; 4315 const handleRadioCreate = () => { 4316 if (radioGroup) { 4317 radioGroup.addRadio( 4318 reactive({ 4319 uid: instance.uid, 4320 setChecked, 4321 setTabindex, 4322 isWrappedByTableBody, 4323 focus, 4324 isChecked, 4325 isDisabled, 4326 getRootEl 4327 }) 4328 ); 4329 } 4330 }; 4331 const handleRadioRemove = () => { 4332 if (radioGroup) { 4333 radioGroup.removeRadio(instance.uid); 4334 } 4335 }; 4336 const tryForwardTooltipTriggerToInput = () => { 4337 if (props.forwardTooltipTrigger) { 4338 nextTick(() => { 4339 var _a, _b, _c, _d, _e, _f; 4340 if (tooltipContext && radioRef.value) { 4341 if (((_b = (_a = instance.parent) == null ? void 0 : _a.attrs) == null ? void 0 : _b.class) === `${ns.namespace}-tooltip__trigger`) { 4342 tooltipContext.updateTriggerRef(radioRef.value); 4343 (_c = containerRef.value) == null ? void 0 : _c.removeAttribute("aria-label"); 4344 } 4345 } 4346 if (infoPopoverContext && radioRef.value) { 4347 if (((_e = (_d = instance.parent) == null ? void 0 : _d.attrs) == null ? void 0 : _e.class) === `${ns.namespace}-info-popover__trigger`) { 4348 infoPopoverContext.updateTriggerRef(radioRef.value); 4349 (_f = containerRef.value) == null ? void 0 : _f.removeAttribute("aria-label"); 4350 } 4351 } 4352 }); 4353 } 4354 }; 4355 const handleRadioKeydown = (event) => {
4356 const keyCode = event.code; 4357 if (isDisabled.value) { 4358 keyCode === EVENT_CODE.space && event.preventDefault(); 4359 return; 4360 } 4361 switch (keyCode) { 4362 case EVENT_CODE.enter: 4363 case EVENT_CODE.numpadEnter: 4364 case EVENT_CODE.space: 4365 setChecked(true, true); 4366 event.preventDefault(); 4367 event.stopPropagation(); 4368 break; 4369 } 4370 }; 4371 const handleClick = () => { 4372 if (!isDisabled.value) { 4373 setChecked(true, true); 4374 setTabindex(); 4375 } 4376 }; 4377 const isWrappedByTableBody = () => isInTableBody; 4378 onMounted(() => { 4379 handleRadioCreate(); 4380 tryForwardTooltipTriggerToInput(); 4381 }); 4382 onBeforeUnmount(() => { 4383 handleRadioRemove(); 4384 }); 4385 const focus = () => { 4386 var _a; 4387 (_a = radioRef.value) == null ? void 0 : _a.focus(); 4388 setTabindex(); 4389 }; 4390 watch(radioGroup.modelValue, (newV) => { 4391 if (newV === props.label) { 4392 if (!isChecked.value) { 4393 setChecked(); 4394 setTabindex(); 4395 } 4396 } else if (newV !== props.label && isChecked.value) { 4397 setChecked(false); 4398 } 4399 }); 4400 __expose({ 4401 focus 4402 }); 4403 return (_ctx, _cache) => { 4404 return openBlock(), createElementBlock("span", { 4405 ref_key: "containerRef", 4406 ref: containerRef, 4407 class: normalizeClass(unref(ns).b()), 4408 role: "presentation" 4409 }, [ 4410 createBaseVNode("span", { 4411 class: normalizeClass([unref(ns).e("wrap"), unref(ns).is("checked", isChecked.value), unref(ns).is("disabled", unref(isDisabled))]), 4412 role: "presentation", 4413 onClick: withModifiers(handleClick, ["prevent"]) 4414 }, [ 4415 createBaseVNode("div", { 4416 ref_key: "radioRef", 4417 ref: radioRef, 4418 role: "radio", 4419 class: normalizeClass([unref(ns).e("inner")]), 4420 tabindex: tabIndex.value, 4421 "data-testid": _ctx.testId, 4422 "aria-labelledby": ariaLabelledbyResult.value, 4423 "aria-describedby": ariaDescribedbyResult.value, 4424 "aria-checked": isChecked.value, 4425 "aria-label": _ctx.ariaLabel, 4426 "aria-disabled": unref(isDisabled), 4427 "aria-required": _ctx.ariaRequired, 4428 onKeydown: handleRadioKeydown 4429 }, [ 4430 createBaseVNode("i", { 4431 class: normalizeClass(unref(ns).e("knob")) 4432 }, null, 2) 4433 ], 42, _hoisted_1$t), 4434 createBaseVNode("span", { 4435 id: unref(labelledbyId), 4436 class: normalizeClass(unref(ns).e("label")), 4437 "aria-hidden": _ctx.labelAriaHidden 4438 }, [ 4439 renderSlot(_ctx.$slots, "default", {}, () => [ 4440 createTextVNode(toDisplayString(_ctx.label), 1) 4441 ]) 4442 ], 10, _hoisted_2$b), 4443 _ctx.$slots.suffix ? (openBlock(), createElementBlock("span", { 4444 key: 0, 4445 class: normalizeClass(unref(ns).e("suffix")), 4446 onClick: _cache[0] || (_cache[0] = withModifiers(() => { 4447 }, ["stop"])) 4448 }, [ 4449 renderSlot(_ctx.$slots, "suffix") 4450 ], 2)) : createCommentVNode("", true) 4451 ], 2), 4452 _ctx.description ? (openBlock(), createElementBlock("div", { 4453 key: 0, 4454 id: unref(descriptionId), 4455 class: normalizeClass(unref(ns).e("description")) 4456 }, toDisplayString(_ctx.description), 11, _hoisted_3$6)) : createCommentVNode("", true), 4457 _ctx.$slots.region ? (openBlock(), createElementBlock("div", { 4458 key: 1, 4459 class: normalizeClass(unref(ns).e("region")), 4460 role: "presentation" 4461 }, [ 4462 renderSlot(_ctx.$slots, "region") 4463 ], 2)) : createCommentVNode("", true) 4464 ], 2); 4465 }; 4466 } 4467})); 4468const ZmRadio = withInstall(_sfc_main$Q); 4469const messages$b = { 4470 "en-US": { 4471 "radio-group": { 4472 "tip": "Press Enter or Space to select" 4473 } 4474 }, 4475 "de-DE": { 4476 "radio-group": { 4477 "tip": "Zum Auswählen die Eingabe- oder Leertaste drücken" 4478 } 4479 }, 4480 "es-ES": { 4481 "radio-group": { 4482 "tip": "Pulse Intro o la barra espaciadora para seleccionar" 4483 } 4484 }, 4485 "fr-FR": { 4486 "radio-group": { 4487 "tip": "Appuyez sur Entrée ou Espace pour sélectionner" 4488 } 4489 }, 4490 "id-ID": { 4491 "radio-group": { 4492 "tip": "Tekan Enter atau Spasi untuk memilih" 4493 } 4494 }, 4495 "it-IT": { 4496 "radio-group": { 4497 "tip": "Premi Invio o spazio per selezionare" 4498 } 4499 }, 4500 "jp-JP": { 4501 "radio-group": { 4502 "tip": "Enter ãã¼ã¾ãã¯ã¹ãã¼ã¹ãã¼ãæ¼ãã¦é¸æ" 4503 } 4504 }, 4505 "ko-KO": { 4506 "radio-group": { 4507 "tip": "Enter ëë ì¤íì´ì¤ë°ë¥¼ ëë¬ ì í" 4508 } 4509 }, 4510 "nl-NL": { 4511 "radio-group": { 4512 "tip": "Druk op Enter of de spatiebalk om te selecteren" 4513 } 4514 }, 4515 "pl-PL": { 4516 "radio-group": { 4517 "tip": "NaciÅnij Enter lub spacjÄ, aby wybraÄ" 4518 } 4519 }, 4520 "pt-PT": { 4521 "radio-group": { 4522 "tip": "Pressione Enter ou Espaço para selecionar" 4523 } 4524 }, 4525 "ru-RU": { 4526 "radio-group": { 4527 "tip": "ÐажмиÑе «Enter» или пÑобел, ÑÑÐ¾Ð±Ñ Ð²ÑбÑаÑÑ" 4528 } 4529 }, 4530 "sv-SE": { 4531 "radio-group": { 4532 "tip": "Tryck pÃ¥ Enter eller mellanslag för att välja" 4533 } 4534 },
4535 "tr-TR": { 4536 "radio-group": { 4537 "tip": "Seçmek için Enter veya BoÅluk (Space) tuÅuna basın" 4538 } 4539 }, 4540 "vi-VN": { 4541 "radio-group": { 4542 "tip": "Nhấn Enter hoặc Space Äá» chá»n" 4543 } 4544 }, 4545 "zh-CN": { 4546 "radio-group": { 4547 "tip": "æåè½¦é®æç©ºæ ¼é®éæ©" 4548 } 4549 }, 4550 "zh-TW": { 4551 "radio-group": { 4552 "tip": "æä¸Enteræç©ºæ ¼éµé¸å" 4553 } 4554 } 4555}; 4556const useFormItem = () => { 4557 const form = inject(FORM_INJECTION_KEY, void 0); 4558 const formItem = inject(FORM_ITEM_INJECTION_KEY, void 0); 4559 return { 4560 form, 4561 formItem 4562 }; 4563}; 4564const flattedChildren = (children) => { 4565 const vNodes = isArray(children) ? children : [children]; 4566 const result = []; 4567 vNodes.forEach((child) => { 4568 var _a; 4569 /* istanbul ignore next @preserve */ 4570 if (isArray(child)) { 4571 result.push(...flattedChildren(child)); 4572 } else if (isVNode(child) && isArray(child.children)) { 4573 result.push(...flattedChildren(child.children)); 4574 } else { 4575 result.push(child); 4576 if (isVNode(child) && ((_a = child.component) == null ? void 0 : _a.subTree)) { 4577 result.push(...flattedChildren(child.component.subTree)); 4578 } 4579 } 4580 }); 4581 return result; 4582}; 4583const getOrderedChildren = (vm, childComponentName, children) => { 4584 const nodes = flattedChildren(vm.subTree).filter( 4585 (n) => { 4586 var _a; 4587 return isVNode(n) && ((_a = n.type) == null ? void 0 : _a.name) === childComponentName && !!n.component; 4588 } 4589 ); 4590 const uids = nodes.map((n) => n.component.uid); 4591 return uids.map((uid2) => children[uid2]).filter((p) => !!p); 4592}; 4593const useOrderedChildren = (vm, childComponentName, batch) => { 4594 const children = {}; 4595 const orderedChildren = shallowRef([]); 4596 const addChild = (child) => { 4597 children[child.uid] = child; 4598 { 4599 orderedChildren.value = getOrderedChildren(vm, childComponentName, children); 4600 } 4601 }; 4602 const removeChild = (uid2) => { 4603 delete children[uid2]; 4604 orderedChildren.value = orderedChildren.value.filter((children2) => children2.uid !== uid2); 4605 }; 4606 return { 4607 children: orderedChildren, 4608 addChild, 4609 removeChild 4610 }; 4611}; 4612var NavigateType = /* @__PURE__ */ ((NavigateType2) => { 4613 NavigateType2["NEXT"] = "next"; 4614 NavigateType2["PREV"] = "prev"; 4615 NavigateType2["HOME"] = "home"; 4616 NavigateType2["END"] = "end"; 4617 return NavigateType2; 4618})(NavigateType || {}); 4619const ActionsMap = { 4620 [EVENT_CODE.down]: "next", 4621 [EVENT_CODE.up]: "prev", 4622 [EVENT_CODE.right]: "next", 4623 [EVENT_CODE.left]: "prev", 4624 [EVENT_CODE.home]: "home", 4625 [EVENT_CODE.end]: "end" 4626 /* END */ 4627}; 4628var __defProp$14 = Object.defineProperty; 4629var __defProps$U = Object.defineProperties; 4630var __getOwnPropDescs$U = Object.getOwnPropertyDescriptors; 4631var __getOwnPropSymbols$14 = Object.getOwnPropertySymbols; 4632var __hasOwnProp$14 = Object.prototype.hasOwnProperty; 4633var __propIsEnum$14 = Object.prototype.propertyIsEnumerable; 4634var __defNormalProp$14 = (obj, key, value) => key in obj ? __defProp$14(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 4635var __spreadValues$14 = (a, b) => { 4636 for (var prop in b || (b = {})) 4637 if (__hasOwnProp$14.call(b, prop)) 4638 __defNormalProp$14(a, prop, b[prop]); 4639 if (__getOwnPropSymbols$14) 4640 for (var prop of __getOwnPropSymbols$14(b)) { 4641 if (__propIsEnum$14.call(b, prop)) 4642 __defNormalProp$14(a, prop, b[prop]); 4643 } 4644 return a; 4645}; 4646var __spreadProps$U = (a, b) => __defProps$U(a, __getOwnPropDescs$U(b)); 4647const _hoisted_1$s = ["aria-label", "aria-labelledby", "aria-required", "aria-describedby"]; 4648const _sfc_main$P = /* @__PURE__ */ defineComponent(__spreadProps$U(__spreadValues$14({}, { 4649 name: "ZmRadioGroup" 4650}), { 4651 __name: "radio-group", 4652 props: radioGroupProps, 4653 emits: radioGroupEmits, 4654 setup(__props, { emit: __emit }) { 4655 const props = __props; 4656 const emit = __emit; 4657 const ns = useNamespace("radio"); 4658 const { t } = useLocale(messages$b); 4659 const describedbyId = useId(); 4660 const { formItem } = useFormItem(); 4661 const { 4662 children: radios, 4663 addChild: addRadio, 4664 removeChild: removeRadio 4665 } = useOrderedChildren(getCurrentInstance(), "ZmRadio"); 4666 const formAriaDescribedby = useFormItemAriaDescribedby(); 4667 const radioAriaDescribedbyResult = computed(() => { 4668 return props.disallowArrowKeySelected ? describedbyId.value : ""; 4669 }); 4670 const ariaLabelledbyResult = useFormItemLabelId(); 4671 const isRequired = useFormItemRequired(); 4672 const changeEvent = (value) => { 4673 if (value === props.modelValue) 4674 return; 4675 emit("update:modelValue", value); 4676 emit("change", value); 4677 }; 4678 const uncheckAllRadios = () => { 4679 for (const radio of radios.value) { 4680 radio.setChecked(false); 4681 } 4682 }; 4683 const inertAllRadios = () => { 4684 for (const radio of radios.value) { 4685 radio.setTabindex(-1); 4686 } 4687 }; 4688 provide(RADIO_GROUP_CONTEXT_KEY, __spreadProps$U(__spreadValues$14({}, pick(toRefs(props), ["modelValue", "disabled"])), { 4689 changeEvent, 4690 addRadio, 4691 removeRadio, 4692 uncheckAllRadios, 4693 inertAllRadios, 4694 radioAriaDescribedbyResult, 4695 beforeChange: props.beforeChange 4696 })); 4697 const setCheckedByArrowKeys = (target, navigateType) => { 4698 let index2 = radios.value.findIndex((radio) => radio.getRootEl().contains(target)); 4699 const length = radios.value.length; 4700 if (index2 > -1) { 4701 const shouldAdvance = navigateType === NavigateType.NEXT; 4702 if (shouldAdvance) { 4703 index2 = index2 === length - 1 ? 0 : index2 + 1; 4704 } else { 4705 index2 = index2 === 0 ? length - 1 : index2 - 1; 4706 } 4707 const targetRadio = radios.value[index2]; 4708 targetRadio.focus(); 4709 if (!props.disallowArrowKeySelected) { 4710 const targetCanBeChecked = !targetRadio.isDisabled; 4711 if (targetCanBeChecked) { 4712 targetRadio.setChecked(true, true); 4713 } 4714 } 4715 } 4716 }; 4717 const radioGroupWrappedInTable = () => { 4718 const radiosProxy = radios.value; 4719 if (radiosProxy.length) { 4720 return radiosProxy.some((radio) => radio.isWrappedByTableBody()); 4721 } 4722 }; 4723 const handleRadioGroupKeydown = (event) => { 4724 if (radioGroupWrappedInTable()) 4725 return; 4726 const target = event.target; 4727 if (!target || target.getAttribute("role") !== "radio") { 4728 return; 4729 }
4730 const keyCode = event.code; 4731 let flag = false; 4732 switch (keyCode) { 4733 case EVENT_CODE.left: 4734 case EVENT_CODE.up: 4735 case EVENT_CODE.right: 4736 case EVENT_CODE.down: 4737 setCheckedByArrowKeys(target, ActionsMap[keyCode]); 4738 flag = true; 4739 break; 4740 } 4741 if (flag) { 4742 event.stopPropagation(); 4743 event.preventDefault(); 4744 } 4745 }; 4746 watch(radios, (newV) => { 4747 if (newV.length) { 4748 const firstCheckedRadioIndex = newV.findIndex((radio) => radio.isChecked); 4749 const index2 = firstCheckedRadioIndex === -1 ? 0 : firstCheckedRadioIndex; 4750 if (!radioGroupWrappedInTable()) { 4751 newV[index2].setTabindex(); 4752 } 4753 } 4754 }); 4755 watch( 4756 () => props.modelValue, 4757 (newVal) => { 4758 if (isNil(newVal) || newVal === "") { 4759 uncheckAllRadios(); 4760 inertAllRadios(); 4761 if (radios.value.length && !radioGroupWrappedInTable()) { 4762 const firstRadio = radios.value[0]; 4763 firstRadio.setTabindex(); 4764 } 4765 } 4766 if (props.validateEvent) { 4767 formItem == null ? void 0 : formItem.validate().catch((err) => { 4768 /* istanbul ignore next @preserve */ 4769 debugWarn(err); 4770 }); 4771 } 4772 } 4773 ); 4774 return (_ctx, _cache) => { 4775 return openBlock(), createElementBlock("div", { 4776 class: normalizeClass([unref(ns).b("group"), unref(ns).is("vertical", _ctx.vertical)]), 4777 role: "radiogroup", 4778 "aria-label": _ctx.title || _ctx.ariaLabel, 4779 "aria-labelledby": unref(ariaLabelledbyResult), 4780 "aria-required": unref(isRequired), 4781 "aria-describedby": unref(formAriaDescribedby), 4782 onKeydown: handleRadioGroupKeydown 4783 }, [ 4784 _ctx.title ? (openBlock(), createElementBlock("div", { 4785 key: 0, 4786 class: normalizeClass(unref(ns).e("title")) 4787 }, toDisplayString(_ctx.title), 3)) : createCommentVNode("", true), 4788 renderSlot(_ctx.$slots, "default"), 4789 _ctx.disallowArrowKeySelected ? (openBlock(), createBlock(unref(ZmVisuallyHidden), { 4790 key: 1, 4791 id: unref(describedbyId) 4792 }, { 4793 default: withCtx(() => [ 4794 createTextVNode(toDisplayString(unref(t)("radio-group.tip")), 1) 4795 ]), 4796 _: 1 4797 }, 8, ["id"])) : createCommentVNode("", true) 4798 ], 42, _hoisted_1$s); 4799 }; 4800 } 4801})); 4802const ZmRadioGroup = withInstall(_sfc_main$P); 4803const messages$a = { 4804 "en-US": { 4805 "a11y": { 4806 "tabMore": "Press Tab for more information", 4807 "learnMore": "Learn more about {label}", 4808 "focusInList": "Press arrow down to focus into the list", 4809 "loopList": "({index} of {total})", 4810 "numberMore": "{number} more", 4811 "checkboxList": "Press arrow up/down to navigate checkbox list", 4812 "selectedLabels": "Selected {labels}", 4813 "openCheckboxMenu": "Press arrow up/down to open the menu, press arrow left/right to focus on selected values", 4814 "focusListByUpDown": "Press arrow up/down to focus into the list", 4815 "focusValuesLeftRight": "Press arrow left/right to focus on selected values", 4816 "maxMultipleSelectedTip": "A maximum of {count} item(s) can be selected", 4817 "dragAndDropTip": "Press Enter/Space to grab/drop, press arrow up/down to move", 4818 "loopList2": "{index} of {total}", 4819 "deselectLabel": "{label} deselected" 4820 } 4821 }, 4822 "de-DE": { 4823 "a11y": { 4824 "tabMore": "Für weitere Informationen Tabulatortaste drücken", 4825 "learnMore": "Mehr über {label} erfahren", 4826 "focusInList": "Zum Fokussieren auf die Liste den Pfeil nach unten drücken", 4827 "loopList": "({index} von {total})", 4828 "numberMore": "{number} weitere", 4829 "checkboxList": "Drücken Sie die Pfeiltaste nach oben/unten, um durch die Liste der Kontrollkästchen zu navigieren", 4830 "selectedLabels": "{labels} ausgewählt", 4831 "openCheckboxMenu": "Zum Ãffnen des Menüs Pfeil nach oben/unten drücken, zum Fokussieren auf ausgewählte Werte Pfeil nach links/rechts drücken", 4832 "focusListByUpDown": "Zum Fokussieren auf die Liste den Pfeil nach oben/unten drücken", 4833 "focusValuesLeftRight": "Pfeiltasten nach links/rechts drücken, um auf die ausgewählten Werte zu fokussieren", 4834 "maxMultipleSelectedTip": "Es können höchstens {count} Element(e) ausgewählt werden", 4835 "dragAndDropTip": "Zum Greifen/Ablegen Eingabe-/Leertaste drücken, zum Verschieben Pfeil nach oben/unten drücken", 4836 "loopList2": "{index} von {total}", 4837 "deselectLabel": "Auswahl von {label} aufgehoben" 4838 } 4839 }, 4840 "es-ES": { 4841 "a11y": { 4842 "tabMore": "Pulse la tecla Tab para obtener más información", 4843 "learnMore": "Más información acerca de {label}", 4844 "focusInList": "Pulse la flecha hacia abajo para enfocar la lista", 4845 "loopList": "({index} de {total})", 4846 "numberMore": "{number} más", 4847 "checkboxList": "Pulse la flecha hacia arriba o hacia abajo para desplazarse por la lista de casillas de verificación", 4848 "selectedLabels": "Seleccionado {labels}", 4849 "openCheckboxMenu": "Pulse la flecha hacia arriba o hacia abajo para abrir el menú, pulse la flecha hacia la izquierda o hacia la derecha para enfocar los valores seleccionados", 4850 "focusListByUpDown": "Pulse la flecha hacia arriba o hacia abajo para enfocar la lista", 4851 "focusValuesLeftRight": "Pulse la flecha hacia la izquierda o hacia la derecha para centrarse en los valores seleccionados", 4852 "maxMultipleSelectedTip": "Es posible seleccionar un máximo de {count} elemento(s)", 4853 "dragAndDropTip": "Pulse Intro o la barra espaciadora para agarrar o soltar, pulse la flecha hacia arriba o hacia abajo para moverse", 4854 "loopList2": "{index} de {total}", 4855 "deselectLabel": "{label} deseleccionado" 4856 } 4857 }, 4858 "fr-FR": { 4859 "a11y": { 4860 "tabMore": "Appuyez sur Tab pour en savoir plus", 4861 "learnMore": "En savoir plus sur {label}", 4862 "focusInList": "Appuyer sur la flèche vers le bas pour mettre la liste en évidence", 4863 "loopList": "({index} sur {total})", 4864 "numberMore": "{number} de plus", 4865 "checkboxList": "Appuyez sur les flèches haut/bas pour naviguer dans la liste des cases à cocher", 4866 "selectedLabels": "Sélectionné {labels}", 4867 "openCheckboxMenu": "Appuyez sur la flèche haut/bas pour ouvrir le menu, appuyez sur la flèche gauche/droite pour mettre les valeurs sélectionnées en avant", 4868 "focusListByUpDown": "Appuyer sur la flèche vers le haut/bas pour mettre la liste en évidence", 4869 "focusValuesLeftRight": "Appuyer sur la flèche gauche/droite pour mettre lâaccent sur les valeurs sélectionnées", 4870 "maxMultipleSelectedTip": "Un maximum de {count} élément(s) peut être sélectionné", 4871 "dragAndDropTip": "Appuyez sur Entrée/Espace pour saisir/déposer, appuyer sur les flèches haut/bas pour se déplacer", 4872 "loopList2": "{index} sur {total}", 4873 "deselectLabel": "{label} désélectionné" 4874 } 4875 }, 4876 "id-ID": { 4877 "a11y": { 4878 "tabMore": "Tekan Tab untuk informasi selengkapnya", 4879 "learnMore": "Pelajari selengkapnya tentang {label}", 4880 "focusInList": "Tekan panah bawah untuk fokus pada daftar", 4881 "loopList": "({index} dari {total})", 4882 "numberMore": "{number} lainnya", 4883 "checkboxList": "Tekan panah atas/bawah untuk menavigasi daftar kotak centang", 4884 "selectedLabels": "Memilih {labels}", 4885 "openCheckboxMenu": "Tekan panah atas/bawah untuk membuka menu, tekan panah kiri/kanan untuk fokus pada nilai yang dipilih", 4886 "focusListByUpDown": "Tekan panah atas/bawah untuk fokus pada daftar", 4887 "focusValuesLeftRight": "Tekan panah kiri/kanan untuk fokus pada nilai yang dipilih", 4888 "maxMultipleSelectedTip": "Maksimum {count} item dapat dipilih", 4889 "dragAndDropTip": "Tekan Enter/Spasi untuk mengambil/meletakkan, tekan panah atas/bawah untuk memindahkan", 4890 "loopList2": "{index} dari {total}", 4891 "deselectLabel": "{label} batal dipilih" 4892 } 4893 }, 4894 "it-IT": { 4895 "a11y": { 4896 "tabMore": "Premi Tab per ulteriori informazioni", 4897 "learnMore": "Scopri di più su {label}", 4898 "focusInList": "Premi la freccia giù per esplorare lâelenco", 4899 "loopList": "({index} di {total})", 4900 "numberMore": "Altri {number}", 4901 "checkboxList": "Premi la freccia su/giù per esplorare lâelenco di caselle di controllo", 4902 "selectedLabels": "Selezionati {labels}", 4903 "openCheckboxMenu": "Premi la freccia su/giù per aprire il menu, premi la freccia sinistra/destra per mettere a fuoco i valori selezionati", 4904 "focusListByUpDown": "Premi la freccia su/giù per esplorare lâelenco", 4905 "focusValuesLeftRight": "Premi la freccia sinistra/destra per mettere a fuoco i valori selezionati", 4906 "maxMultipleSelectedTip": "à possibile selezionare fino a {count} elementi", 4907 "dragAndDropTip": "Premi Invio o la barra spaziatrice per afferrare/rilasciare, premi la freccia su/giù per spostarti", 4908 "loopList2": "{index} di {total}", 4909 "deselectLabel": "{label} deselezionato" 4910 } 4911 }, 4912 "jp-JP": { 4913 "a11y": { 4914 "tabMore": "Tab ãã¼ãæ¼ãã¦è©³ç´°ã確èª", 4915 "learnMore": "{label} ããã®è©³ç´°æ å ±", 4916 "focusInList": "ä¸ã®ç¢å°ãã¼ãæ¼ãã¦ãªã¹ãã«ãã©ã¼ã«ã¹", 4917 "loopList": "ï¼{index} / {total}ï¼", 4918 "numberMore": "ä» {number} ä»¶", 4919 "checkboxList": "ä¸ä¸ã®ç¢å°ãã¼ãæ¼ãã¦ãã§ãã¯ããã¯ã¹ ãªã¹ããç§»å", 4920 "selectedLabels": "{labels} ããã鏿æ¸ã¿", 4921 "openCheckboxMenu": "ä¸ä¸ã®ç¢å°ãã¼ãæ¼ãã¦ã¡ãã¥ã¼ãéããå·¦å³ã®ç¢å°ãã¼ãæ¼ãã¦é¸æããå¤ã«ãã©ã¼ã«ã¹", 4922 "focusListByUpDown": "ä¸ä¸ã®ç¢å°ãã¼ãæ¼ãã¦ãªã¹ãã«ãã©ã¼ã«ã¹", 4923 "focusValuesLeftRight": "å·¦å³ã®ç¢å°ãã¼ãæ¼ãã¦é¸æããå¤ã«ãã©ã¼ã«ã¹", 4924 "maxMultipleSelectedTip": "{count} åã®ã¢ã¤ãã ã¾ã§é¸æã§ãã¾ã", 4925 "dragAndDropTip": "Enter ãã¼ãã¹ãã¼ã¹ãã¼ãæ¼ãã¦ã°ã©ãã¾ãã¯ãããããä¸ä¸ã®ç¢å°ãã¼ãæ¼ãã¦ç§»å", 4926 "loopList2": "{index} / {total}", 4927 "deselectLabel": "{label} ã®é¸æãè§£é¤ãã¾ãã" 4928 } 4929 }, 4930 "ko-KO": { 4931 "a11y": { 4932 "tabMore": "ìì¸í ë´ì©ì ë³´ë ¤ë©´ í ë르기", 4933 "learnMore": "{label}ì ëí´ ìì¸í ìì보기", 4934 "focusInList": "목ë¡ì ì´ì ì ë§ì¶ë ¤ë©´ ìë쪽 íì´í ë르기", 4935 "loopList": "({index}/{total})", 4936 "numberMore": "{number}ê° ë 보기", 4937 "checkboxList": "íì¸ë 목ë¡ì íìíë ¤ë©´ ì/ìë íì´í ë르기", 4938 "selectedLabels": "ì íë¨ {labels}", 4939 "openCheckboxMenu": "ì/ìë íì´í를 ëë¬ ë©ë´ë¥¼ ì´ê³ , ì¼ìª½/ì¤ë¥¸ìª½ íì´í를 ëë¬ ì íí ê°ì ì´ì ë§ì¶ê¸°", 4940 "focusListByUpDown": "목ë¡ì ì´ì ì ë§ì¶ë ¤ë©´ ì/ìë íì´í ë르기", 4941 "focusValuesLeftRight": "ì íí ê°ì ì´ì ì ë§ì¶ë ¤ë©´ ì¼ìª½/ì¤ë¥¸ìª½ íì´í ë르기", 4942 "maxMultipleSelectedTip": "ìµë {count}ê°ì í목ì ì íí ì ììµëë¤", 4943 "dragAndDropTip": "Enter/ì¤íì´ì¤ë°ë¥¼ ëë¬ ë기/ë기, ì/ìë íì´í를 ëë¬ ì´ë", 4944 "loopList2": "{index}/{total}", 4945 "deselectLabel": "{label} ì í í´ì ë¨" 4946 } 4947 }, 4948 "nl-NL": { 4949 "a11y": { 4950 "tabMore": "Druk op Tab voor meer informatie", 4951 "learnMore": "Meer informatie over {label}", 4952 "focusInList": "Druk op de pijltoets omlaag om te focussen op de lijst", 4953 "loopList": "({index} van {total})", 4954 "numberMore": "Nog {number}", 4955 "checkboxList": "Druk op de pijltoets omhoog/omlaag om door de lijst met selectievakjes te navigeren", 4956 "selectedLabels": "{labels} geselecteerd", 4957 "openCheckboxMenu": "Druk op de pijltoets omhoog/omlaag om het menu te openen, druk op de pijltoets links/rechts om te focussen op de geselecteerde waarden", 4958 "focusListByUpDown": "Druk op de pijltoets omhoog/omlaag om te focussen op de lijst", 4959 "focusValuesLeftRight": "Druk op de pijltoets links/rechts om te focussen op de geselecteerde waarden", 4960 "maxMultipleSelectedTip": "U kunt maximaal {count} item(s) selecteren",
4961 "dragAndDropTip": "Druk op Enter/spatiebalk om te grijpen/neer te zetten, druk op de pijltoets omhoog/omlaag om te verplaatsen", 4962 "loopList2": "{index} van {total}", 4963 "deselectLabel": "{label} gedeselecteerd" 4964 } 4965 }, 4966 "pl-PL": { 4967 "a11y": { 4968 "tabMore": "NaciÅnij klawisz Tab, aby uzyskaÄ wiÄcej informacji", 4969 "learnMore": "Dowiedz siÄ wiÄcej o {label}", 4970 "focusInList": "NaciÅnij strzaÅkÄ w dóÅ, aby rozwinÄ Ä listÄ", 4971 "loopList": "({index} z {total})", 4972 "numberMore": "{number} wiÄcej", 4973 "checkboxList": "NaciÅnij strzaÅkÄ w górÄ/w dóÅ, aby poruszaÄ siÄ po liÅcie pól wyboru", 4974 "selectedLabels": "Wybrano {labels}", 4975 "openCheckboxMenu": "NaciÅnij strzaÅkÄ w górÄ/w dóÅ, aby otworzyÄ menu. NaciÅnij strzaÅkÄ w lewo/w prawo, aby zaznaczyÄ wybrane wartoÅci", 4976 "focusListByUpDown": "NaciÅnij strzaÅkÄ w dóÅ, aby rozwinÄ Ä listÄ", 4977 "focusValuesLeftRight": "NaciÅnij strzaÅkÄ w lewo/prawo, aby zaznaczyÄ wybrane wartoÅci", 4978 "maxMultipleSelectedTip": "Maksymalna liczba elementów, które można wybraÄ: {count}", 4979 "dragAndDropTip": "NaciÅnij Enter/SpacjÄ, aby chwyciÄ/upuÅciÄ, naciÅnij strzaÅkÄ w górÄ/w dóÅ, aby przesunÄ Ä", 4980 "loopList2": "{index} z {total}", 4981 "deselectLabel": "Anulowano wybór: {label}" 4982 } 4983 }, 4984 "pt-PT": { 4985 "a11y": { 4986 "tabMore": "Pressione Tab para obter mais informações", 4987 "learnMore": "Saiba mais sobre {label}", 4988 "focusInList": "Pressione a seta para baixo para focar na lista", 4989 "loopList": "({index} de {total})", 4990 "numberMore": "Mais {number}", 4991 "checkboxList": "Pressione a seta para cima/para baixo para navegar na lista de caixas de seleção", 4992 "selectedLabels": "Selecionado {labels}", 4993 "openCheckboxMenu": "Pressione a seta para cima/para baixo para abrir o menu, pressione a seta para a esquerda/direita para focar nos valores selecionados", 4994 "focusListByUpDown": "Pressione a seta para cima/para baixo para focar na lista", 4995 "focusValuesLeftRight": "Pressione a seta para a esquerda/direita para focar nos valores selecionados", 4996 "maxMultipleSelectedTip": "No máximo {count} item(ns) pode(m) ser selecionado(s)", 4997 "dragAndDropTip": "Pressione Enter/Espaço para agarrar/soltar, pressione a seta para cima/para baixo para mover", 4998 "loopList2": "{index} de {total}", 4999 "deselectLabel": "{label} desmarcado" 5000 } 5001 }, 5002 "ru-RU": { 5003 "a11y": { 5004 "tabMore": "ÐажмиÑе «Tab», ÑÑÐ¾Ð±Ñ Ð¿Ð¾Ð»ÑÑиÑÑ Ð´Ð¾Ð¿Ð¾Ð»Ð½Ð¸ÑелÑнÑÑ Ð¸Ð½ÑоÑмаÑиÑ", 5005 "learnMore": "ÐодÑобнее: {label}", 5006 "focusInList": "ÐажмиÑе на клавиÑÑ Ñо ÑÑÑелкой вниз, ÑÑÐ¾Ð±Ñ Ð¿ÐµÑейÑи к ÑпиÑкÑ", 5007 "loopList": "({index} из {total})", 5008 "numberMore": "ÐÑе {number}", 5009 "checkboxList": "ÐÑполÑзÑйÑе клавиÑи Ñо ÑÑÑелками ввеÑÑ /вниз Ð´Ð»Ñ Ð¿ÐµÑемеÑÐµÐ½Ð¸Ñ Ð¼ÐµÐ¶Ð´Ñ ÑлеменÑами ÑпиÑка", 5010 "selectedLabels": "ÐÑбÑано: {labels}", 5011 "openCheckboxMenu": "ÐÑполÑзÑйÑе клавиÑи Ñо ÑÑÑелками ввеÑÑ /вниз, ÑÑÐ¾Ð±Ñ Ð¾ÑкÑÑÑÑ Ð¼ÐµÐ½Ñ; иÑполÑзÑйÑе клавиÑи Ñо ÑÑÑелками влево/впÑаво, ÑÑÐ¾Ð±Ñ Ð¿ÐµÑейÑи к вÑбÑаннÑм знаÑениÑм", 5012 "focusListByUpDown": "ÐÑполÑзÑйÑе клавиÑи Ñо ÑÑÑелками ввеÑÑ /вниз, ÑÑÐ¾Ð±Ñ Ð¿ÐµÑейÑи к ÑпиÑкÑ", 5013 "focusValuesLeftRight": "ÐÑполÑзÑйÑе клавиÑи Ñо ÑÑÑелками влево/впÑаво, ÑÑÐ¾Ð±Ñ Ð¿ÐµÑейÑи к вÑбÑаннÑм знаÑениÑм", 5014 "maxMultipleSelectedTip": "ÐакÑималÑное колиÑеÑÑво ÑлеменÑов Ð´Ð»Ñ Ð²ÑбоÑа: {count}", 5015 "dragAndDropTip": "ÐажмиÑе «Enter» или пÑобел, ÑÑÐ¾Ð±Ñ Ð¿ÐµÑеÑаÑиÑÑ; иÑполÑзÑйÑе клавиÑи Ñо ÑÑÑелками ввеÑÑ /вниз, ÑÑÐ¾Ð±Ñ Ð¿ÐµÑемеÑÑиÑÑ", 5016 "loopList2": "{index} из {total}", 5017 "deselectLabel": "ÐÑÐ±Ð¾Ñ {label} оÑменен" 5018 } 5019 }, 5020 "sv-SE": { 5021 "a11y": { 5022 "tabMore": "Tryck pÃ¥ Tab för mer information", 5023 "learnMore": "Läs mer om {label}", 5024 "focusInList": "Tryck pÃ¥ pil ned för att markera i listan", 5025 "loopList": "({index} av {total})", 5026 "numberMore": "{number} fler", 5027 "checkboxList": "Tryck pÃ¥ pil upp/ner för att navigera i kryssrutelistan", 5028 "selectedLabels": "Markerade {labels}", 5029 "openCheckboxMenu": "Tryck pÃ¥ pil upp/ner för att öppna menyn, tryck pÃ¥ pil vänster/höger för att markera valda värden", 5030 "focusListByUpDown": "Tryck pÃ¥ pil upp/ner för att markera i listan", 5031 "focusValuesLeftRight": "Tryck pÃ¥ pil vänster/höger för att markera valda värden", 5032 "maxMultipleSelectedTip": "Högst {count} objekt kan väljas", 5033 "dragAndDropTip": "Tryck pÃ¥ Enter/Space för att greppa/släppa, tryck pÃ¥ pil upp/ner för att flytta", 5034 "loopList2": "{index} av {total}", 5035 "deselectLabel": "{label} avmarkerad" 5036 } 5037 },
5038 "tr-TR": { 5039 "a11y": { 5040 "tabMore": "Daha fazla bilgi için Tab tuÅuna basın", 5041 "learnMore": "{label} hakkında daha fazla bilgi edinin", 5042 "focusInList": "Listeye odaklanmak için aÅaÄı oka basın", 5043 "loopList": "({index}/{total})", 5044 "numberMore": "{number} daha", 5045 "checkboxList": "Onay kutusu listesinde gezinmek için yukarı/aÅaÄı oka basın", 5046 "selectedLabels": "{labels} seçildi", 5047 "openCheckboxMenu": "Menüyü açmak için yukarı/aÅaÄı oka, seçilen deÄerlere odaklanmak için sol/saÄ oka basın", 5048 "focusListByUpDown": "Listeye odaklanmak için yukarı/aÅaÄı oka basın", 5049 "focusValuesLeftRight": "Seçilen deÄerlere odaklanmak için sol/saÄ oka basın", 5050 "maxMultipleSelectedTip": "En fazla {count} öge seçilebilir", 5051 "dragAndDropTip": "Yakalamak/bırakmak için Enter/BoÅluk (Space) tuÅuna, hareket ettirmek için yukarı/aÅaÄı oka basın", 5052 "loopList2": "{index}/{total}", 5053 "deselectLabel": "{label} ögesinin seçimi kaldırıldı" 5054 } 5055 }, 5056 "vi-VN": { 5057 "a11y": { 5058 "tabMore": "Nhấn Tab Äá» biết thêm thông tin", 5059 "learnMore": "Tìm hiá»u thêm vá» {label}", 5060 "focusInList": "Nhấn mÅ©i tên xuá»ng Äá» táºp trung và o danh sách", 5061 "loopList": "({index} / {total})", 5062 "numberMore": "{number} khác", 5063 "checkboxList": "Nhấn mÅ©i tên lên/xuá»ng Äá» Äiá»u hưá»ng danh sách há»p kiá»m", 5064 "selectedLabels": "Äã chá»n {labels}", 5065 "openCheckboxMenu": "Nhấn mÅ©i tên lên/xuá»ng Äá» má» menu, nhấn mÅ©i tên trái/phải Äá» táºp trung và o các giá trá» Äã chá»n", 5066 "focusListByUpDown": "Nhấn mÅ©i tên lên/xuá»ng Äá» táºp trung và o danh sách", 5067 "focusValuesLeftRight": "Nhấn mÅ©i tên trái/phải Äá» táºp trung và o các giá trá» Äã chá»n", 5068 "maxMultipleSelectedTip": "Có thá» chá»n tá»i Äa {count} mục", 5069 "dragAndDropTip": "Nhấn Enter/Space Äá» nắm/thả, nhấn mÅ©i tên lên/xuá»ng Äá» di chuyá»n", 5070 "loopList2": "{index} / {total}", 5071 "deselectLabel": "Äã bá» chá»n {label}" 5072 } 5073 }, 5074 "zh-CN": { 5075 "a11y": { 5076 "tabMore": "æTabé®äºè§£æ´å¤ä¿¡æ¯", 5077 "learnMore": "äºè§£æ´å¤å ³äº{label}çä¿¡æ¯", 5078 "focusInList": "æä¸ç®å¤´å¯å°ç¦ç¹ç½®äºå表ä¸", 5079 "loopList": "({index}/{total})", 5080 "numberMore": "å¦å¤{number}个", 5081 "checkboxList": "æä¸/ä¸ç®å¤´å¯æµè§å¤éæ¡å表", 5082 "selectedLabels": "已鿩{labels}", 5083 "openCheckboxMenu": "æä¸/ä¸ç®å¤´å¯æå¼èåï¼æå·¦/å³ç®å¤´å¯èç¦äºéå®çå¼", 5084 "focusListByUpDown": "æä¸/ä¸ç®å¤´å¯å°ç¦ç¹ç½®äºå表ä¸", 5085 "focusValuesLeftRight": "æå·¦/å³ç®å¤´å¯èç¦äºéå®çå¼", 5086 "maxMultipleSelectedTip": "æå¤å¯éæ©{count}个项ç®", 5087 "dragAndDropTip": "æå车é®/ç©ºæ ¼é®å¯æå/æ¾ä¸ï¼æä¸/ä¸ç®å¤´å¯ç§»å¨", 5088 "loopList2": "{index}/{total}", 5089 "deselectLabel": "已忶鿩{label}" 5090 } 5091 }, 5092 "zh-TW": { 5093 "a11y": { 5094 "tabMore": "æä¸Tab以å徿´å¤è³è¨", 5095 "learnMore": "æ·±å ¥çè§£{label}", 5096 "focusInList": "æä¸ä¸ç®èå¯èç¦æ¼æ¸ å®", 5097 "loopList": "ï¼{index}/{total}ï¼", 5098 "numberMore": "å ¶ä»{number}å", 5099 "checkboxList": "æä¸ä¸/ä¸ç®èå¯çè¦½æ ¸åæ¹å¡æ¸ å®", 5100 "selectedLabels": "å·²é¸å{labels}", 5101 "openCheckboxMenu": "æä¸ä¸/ä¸ç®èå¯éååè½è¡¨ï¼æä¸å·¦/å³ç®èå¯èç¦æ¼æé¸å¼", 5102 "focusListByUpDown": "æä¸ä¸/ä¸ç®èå¯èç¦æ¼æ¸ å®", 5103 "focusValuesLeftRight": "æä¸å·¦/å³ç®èå¯èç¦æ¼æé¸å¼", 5104 "maxMultipleSelectedTip": "æå¤å¯é¸{count}åé ç®", 5105 "dragAndDropTip": "æä¸Enter/ç©ºæ ¼éµå¯æå/æ¾ä¸ï¼æä¸ä¸/ä¸ç®èå¯ç§»å", 5106 "loopList2": "{index}/{total}", 5107 "deselectLabel": "{label}已忶é¸å" 5108 } 5109 } 5110}; 5111const checkboxGroupContextKey = Symbol( 5112 "ZmCheckboxGroupContextKey" 5113); 5114const useCheckboxEvent = (props, { 5115 isLimitExceeded, 5116 model, 5117 isGroup, 5118 isDisabled 5119}) => { 5120 const checkboxGroup = inject(checkboxGroupContextKey, void 0); 5121 const { formItem } = useFormItem(); 5122 const { emit } = getCurrentInstance(); 5123 const trySetModelValue = (event, target) => { 5124 const beforeChange = props.beforeChange; 5125 if (beforeChange) { 5126 beforeChange((checked) => { 5127 setModelValueAndVerifyChange(event, target, checked); 5128 }, !target.checked); 5129 } else { 5130 setModelValue(event, target); 5131 } 5132 }; 5133 /* istanbul ignore next @preserve */ 5134 function handleChange(event) { 5135 const target = event.target; 5136 if (isLimitExceeded.value || isDisabled.value) { 5137 event.target.checked = !target.checked; 5138 return; 5139 } 5140 trySetModelValue(event, target); 5141 } 5142 const setInGroupModelValue = (val) => { 5143 isLimitExceeded.value = val.length > checkboxGroup.max.value; 5144 if (!isLimitExceeded.value) { 5145 checkboxGroup.changeEvent(val); 5146 } 5147 }; 5148 const setCheckedForNormalCheckbox = (event, inputEl) => { 5149 if (isDisabled.value) 5150 return; 5151 inputEl.checked = !inputEl.checked; 5152 trySetModelValue(event, inputEl); 5153 }; 5154 const setModelValue = (event, inputEl) => { 5155 if (isGroup) { 5156 const label = props.label; 5157 const checkboxGroupValue = model.value; 5158 const clone2 = checkboxGroupValue.slice(); 5159 if (!clone2.includes(label)) { 5160 clone2.push(label); 5161 } else { 5162 const index2 = clone2.indexOf(label); 5163 clone2.splice(index2, 1); 5164 } 5165 model.value = clone2; 5166 emit(VUE_EVENT_NAMES.CHANGE, inputEl.checked, event); 5167 setInGroupModelValue(clone2); 5168 } else { 5169 model.value = inputEl.checked; 5170 emit(VUE_EVENT_NAMES.UPDATE_MODEL, inputEl.checked); 5171 emit(VUE_EVENT_NAMES.CHANGE, inputEl.checked, event); 5172 } 5173 }; 5174 const setModelValueAndVerifyChange = (event, inputEl, checked) => {
5175 let changed = false; 5176 if (isGroup) { 5177 const label = props.label; 5178 const checkboxGroupValue = model.value; 5179 const clone2 = checkboxGroupValue.slice(); 5180 if (checked && !clone2.includes(label)) { 5181 changed = true; 5182 clone2.push(label); 5183 } else if (!checked) { 5184 const index2 = clone2.indexOf(label); 5185 /* istanbul ignore next @preserve */ 5186 if (index2 > -1) { 5187 changed = true; 5188 clone2.splice(index2, 1); 5189 } 5190 } 5191 inputEl.checked = checked; 5192 if (changed) { 5193 model.value = clone2; 5194 emit(VUE_EVENT_NAMES.CHANGE, checked, event); 5195 setInGroupModelValue(clone2); 5196 } 5197 } else { 5198 inputEl.checked = checked; 5199 const changed2 = model.value !== checked; 5200 if (changed2) { 5201 model.value = checked; 5202 emit(VUE_EVENT_NAMES.UPDATE_MODEL, checked); 5203 emit(VUE_EVENT_NAMES.CHANGE, checked, event); 5204 } 5205 } 5206 }; 5207 function handleKeyEnter(event) { 5208 setCheckedForNormalCheckbox(event, event.target); 5209 } 5210 const handleLabelClick = (event, inputEl) => { 5211 setCheckedForNormalCheckbox(event, inputEl); 5212 }; 5213 function handleMixedChange(e) { 5214 if (isDisabled.value) 5215 return; 5216 const beforeChange = props.beforeChange; 5217 if (!isGroup) { 5218 if (beforeChange) { 5219 beforeChange((checked) => { 5220 if (checked !== model.value) { 5221 model.value = checked; 5222 emit(VUE_EVENT_NAMES.UPDATE_MODEL, checked); 5223 emit(VUE_EVENT_NAMES.CHANGE, checked, e); 5224 } 5225 }, model.value); 5226 } else { 5227 const currentValue = model.value; 5228 model.value = !currentValue; 5229 emit(VUE_EVENT_NAMES.UPDATE_MODEL, !currentValue); 5230 emit(VUE_EVENT_NAMES.CHANGE, !currentValue, e); 5231 } 5232 } else { 5233 const checkboxGroupValue = model.value; 5234 const clone2 = checkboxGroupValue.slice(); 5235 const label = props.label; 5236 if (beforeChange) { 5237 beforeChange((checked) => { 5238 let changed = false; 5239 if (checked && !clone2.includes(label)) { 5240 changed = true; 5241 clone2.push(label); 5242 } else if (!checked) { 5243 const index2 = clone2.indexOf(label); 5244 if (index2 > -1) { 5245 changed = true; 5246 clone2.splice(index2, 1); 5247 } 5248 } 5249 if (changed) { 5250 model.value = clone2; 5251 emit(VUE_EVENT_NAMES.CHANGE, checked, e); 5252 setInGroupModelValue(clone2); 5253 } 5254 }, clone2.includes(label)); 5255 } else { 5256 let checked = false; 5257 if (!clone2.includes(label)) { 5258 clone2.push(label); 5259 checked = true; 5260 } else { 5261 const index2 = clone2.indexOf(label); 5262 clone2.splice(index2, 1); 5263 checked = false; 5264 } 5265 model.value = clone2; 5266 emit(VUE_EVENT_NAMES.CHANGE, checked, e); 5267 setInGroupModelValue(clone2); 5268 } 5269 } 5270 } 5271 function handleFocus(event) { 5272 emit(VUE_EVENT_NAMES.FOCUS, event); 5273 } 5274 function handleBlur(event) { 5275 emit(VUE_EVENT_NAMES.BLUR, event); 5276 } 5277 const validateEvent = computed(() => (checkboxGroup == null ? void 0 : checkboxGroup.validateEvent) || props.validateEvent); 5278 watch( 5279 () => props.modelValue, 5280 () => { 5281 if (validateEvent.value && !isGroup) { 5282 /* istanbul ignore next @preserve */ 5283 formItem == null ? void 0 : formItem.validate().catch((err) => { 5284 debugWarn(err); 5285 }); 5286 } 5287 } 5288 ); 5289 return { 5290 handleChange, 5291 handleKeyEnter, 5292 handleMixedChange, 5293 handleFocus, 5294 handleBlur, 5295 handleLabelClick 5296 }; 5297}; 5298const useCheckboxModel = (props) => { 5299 const checkboxGroup = inject(checkboxGroupContextKey, void 0); 5300 const isGroup = !!checkboxGroup; 5301 const isLimitExceeded = ref(false); 5302 const model = computed({ 5303 get() { 5304 return isGroup ? checkboxGroup.modelValue.value : props.modelValue; 5305 }, 5306 set(_val) { 5307 } 5308 }); 5309 const isChecked = computed(() => { 5310 if (isGroup) { 5311 const checkboxGroupValue = model.value; 5312 return checkboxGroupValue.includes(props.label); 5313 } else { 5314 const value = model.value; 5315 return value; 5316 } 5317 }); 5318 const isDisabledByLimitation = computed(() => { 5319 if (!isGroup) 5320 return false;
5321 const checkedCounts = model.value.length; 5322 const max = checkboxGroup.max.value; 5323 const min = checkboxGroup.min.value; 5324 return checkedCounts >= max && !isChecked.value || checkedCounts <= min && isChecked.value; 5325 }); 5326 const isDisabled = useFormDisabled( 5327 computed(() => (checkboxGroup == null ? void 0 : checkboxGroup.disabled.value) || isDisabledByLimitation.value) 5328 ); 5329 return { 5330 model, 5331 isGroup, 5332 isLimitExceeded, 5333 isChecked, 5334 isDisabled 5335 }; 5336}; 5337const useCheckbox = (props) => { 5338 const { model, isGroup, isLimitExceeded, isChecked, isDisabled } = useCheckboxModel(props); 5339 const { 5340 handleChange, 5341 handleMixedChange, 5342 handleKeyEnter, 5343 handleFocus, 5344 handleBlur, 5345 handleLabelClick 5346 } = useCheckboxEvent(props, { 5347 isLimitExceeded, 5348 model, 5349 isGroup, 5350 isDisabled 5351 }); 5352 return { 5353 isChecked, 5354 isDisabled, 5355 model, 5356 handleChange, 5357 handleMixedChange, 5358 handleKeyEnter, 5359 handleFocus, 5360 handleBlur, 5361 handleLabelClick 5362 }; 5363}; 5364var __defProp$13 = Object.defineProperty; 5365var __defProps$T = Object.defineProperties; 5366var __getOwnPropDescs$T = Object.getOwnPropertyDescriptors; 5367var __getOwnPropSymbols$13 = Object.getOwnPropertySymbols; 5368var __hasOwnProp$13 = Object.prototype.hasOwnProperty; 5369var __propIsEnum$13 = Object.prototype.propertyIsEnumerable; 5370var __defNormalProp$13 = (obj, key, value) => key in obj ? __defProp$13(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 5371var __spreadValues$13 = (a, b) => { 5372 for (var prop in b || (b = {})) 5373 if (__hasOwnProp$13.call(b, prop)) 5374 __defNormalProp$13(a, prop, b[prop]); 5375 if (__getOwnPropSymbols$13) 5376 for (var prop of __getOwnPropSymbols$13(b)) { 5377 if (__propIsEnum$13.call(b, prop)) 5378 __defNormalProp$13(a, prop, b[prop]); 5379 } 5380 return a; 5381}; 5382var __spreadProps$T = (a, b) => __defProps$T(a, __getOwnPropDescs$T(b)); 5383const checkboxProps = { 5384 modelValue: Boolean, 5385 label: { 5386 type: [String, Boolean, Number], 5387 default: "" 5388 }, 5389 indeterminate: Boolean, 5390 disabled: Boolean, 5391 name: String, 5392 id: String, 5393 ariaLabel: String, 5394 ariaLabelledby: String, 5395 ariaDescribedby: String, 5396 ariaRequired: Boolean, 5397 tabindex: { 5398 type: [String, Number], 5399 default: 0 5400 }, 5401 validateEvent: { 5402 type: Boolean, 5403 default: true 5404 }, 5405 readMixed: Boolean, 5406 tag: { 5407 type: String, 5408 default: "span" 5409 }, 5410 positionInfo: Object, 5411 beforeChange: Function, 5412 description: String, 5413 forwardTooltipTrigger: { 5414 type: Boolean, 5415 default: true 5416 }, 5417 labelAriaHidden: { 5418 type: Boolean, 5419 default: true 5420 }, 5421 testId: String 5422}; 5423const checkboxEmits = { 5424 "update:modelValue": (val) => isBoolean(val), 5425 change: (val) => isBoolean(val), 5426 focus: () => true, 5427 blur: () => true, 5428 "knob-click": (_event) => true 5429}; 5430const _hoisted_1$r = ["id", "tabindex", "data-testid", "aria-checked", "aria-disabled", "aria-label", "aria-labelledby", "aria-describedby"]; 5431const _hoisted_2$a = ["id", "data-testid", "aria-disabled", "aria-label", "aria-labelledby", "aria-describedby", "aria-required", "value", "name", "tabindex"]; 5432const _hoisted_3$5 = ["id", "aria-hidden"]; 5433const _hoisted_4$3 = ["id"]; 5434const _sfc_main$O = /* @__PURE__ */ defineComponent(__spreadProps$T(__spreadValues$13({}, { 5435 name: "ZmCheckbox" 5436}), { 5437 __name: "checkbox", 5438 props: checkboxProps, 5439 emits: checkboxEmits, 5440 setup(__props, { expose: __expose, emit: __emit }) { 5441 const props = __props; 5442 const emit = __emit; 5443 const inputRef = ref(); 5444 const tooltipContext = inject(TOOLTIP_INJECTION_KEY, void 0); 5445 const infoPopoverContext = inject(INFO_POPOVER_INJECTION_KEY, void 0); 5446 const containerRef = ref(); 5447 const { t } = useLocale(messages$a); 5448 const vm = getCurrentInstance(); 5449 const getInputEl = () => { 5450 return inputRef.value; 5451 }; 5452 const { 5453 isChecked, 5454 isDisabled, 5455 model, 5456 handleChange, 5457 handleFocus, 5458 handleBlur, 5459 handleKeyEnter, 5460 handleMixedChange, 5461 handleLabelClick 5462 } = useCheckbox(props); 5463 const ns = useNamespace("checkbox"); 5464 const labelId = useId(); 5465 const positionInfoId = useId(); 5466 const descriptionId = useId(); 5467 const positionAriaDescribedbyContent = computed(() => { 5468 var _a, _b; 5469 const { positionInfo } = props; 5470 if (positionInfo) { 5471 return t("a11y.loopList2", { 5472 index: ((_a = positionInfo == null ? void 0 : positionInfo.index) != null ? _a : 0) + 1, 5473 total: (_b = positionInfo == null ? void 0 : positionInfo.total) != null ? _b : 0 5474 }); 5475 } 5476 return ""; 5477 }); 5478 const ariaDescribedByResult = computed(() => { 5479 const ariaDescribedby = props.ariaDescribedby; 5480 const ret = []; 5481 if (positionAriaDescribedbyContent.value) {
5482 ret.push(positionInfoId.value); 5483 } 5484 if (props.description) { 5485 ret.push(descriptionId.value); 5486 } 5487 if (ariaDescribedby) { 5488 ret.push(ariaDescribedby); 5489 } 5490 if (ret.length) { 5491 return ret.join(" "); 5492 } 5493 return void 0; 5494 }); 5495 const isMixedCheckbox = computed(() => { 5496 return props.readMixed; 5497 }); 5498 const mixedCheckboxAriaChecked = computed(() => { 5499 const { indeterminate, label, modelValue } = props; 5500 if (indeterminate) 5501 return "mixed"; 5502 if (isArray(model.value)) { 5503 return model.value.includes(label); 5504 } 5505 return modelValue; 5506 }); 5507 const ariaLabelledbyResult = computed(() => { 5508 if (props.ariaLabel) { 5509 return; 5510 } 5511 return [labelId.value, props.ariaLabelledby].filter(Boolean).join(" "); 5512 }); 5513 const wrapperClass = computed(() => { 5514 return [ 5515 ns.e("wrap"), 5516 ns.is("disabled", isDisabled.value), 5517 ns.is("checked", isChecked.value), 5518 ns.is("indeterminate", props.indeterminate) 5519 ]; 5520 }); 5521 const focus = () => { 5522 var _a; 5523 (_a = inputRef.value) == null ? void 0 : _a.focus({ preventScroll: true }); 5524 }; 5525 const handleCheckboxClick = (event) => { 5526 if (isMixedCheckbox.value) { 5527 handleMixedChange(event); 5528 } else { 5529 handleLabelClick(event, getInputEl()); 5530 } 5531 }; 5532 const tryForwardTooltipTriggerToInput = () => { 5533 nextTick(() => { 5534 var _a, _b, _c, _d, _e, _f; 5535 if (tooltipContext && inputRef.value) { 5536 if (((_b = (_a = vm.parent) == null ? void 0 : _a.attrs) == null ? void 0 : _b.class) === `${ns.namespace}-tooltip__trigger` && props.forwardTooltipTrigger) { 5537 tooltipContext.updateTriggerRef(inputRef.value); 5538 (_c = containerRef.value) == null ? void 0 : _c.removeAttribute("aria-label"); 5539 } 5540 } 5541 if (infoPopoverContext && inputRef.value) { 5542 if (((_e = (_d = vm.parent) == null ? void 0 : _d.attrs) == null ? void 0 : _e.class) === `${ns.namespace}-info-popover__trigger` && props.forwardTooltipTrigger) { 5543 infoPopoverContext.updateTriggerRef(inputRef.value); 5544 (_f = containerRef.value) == null ? void 0 : _f.removeAttribute("aria-label"); 5545 } 5546 } 5547 }); 5548 }; 5549 const handleKnobClick = (event) => { 5550 emit("knob-click", event); 5551 }; 5552 onMounted(() => { 5553 tryForwardTooltipTriggerToInput(); 5554 }); 5555 __expose({ 5556 focus, 5557 getInputEl 5558 // for filter-select-option 5559 }); 5560 return (_ctx, _cache) => { 5561 return openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), { 5562 ref_key: "containerRef", 5563 ref: containerRef, 5564 class: normalizeClass([ 5565 unref(ns).b(), 5566 unref(ns).is("indeterminate-container", _ctx.readMixed), 5567 unref(ns).is("has-region", !!_ctx.$slots.region || !!_ctx.description) 5568 ]) 5569 }, { 5570 default: withCtx(() => [ 5571 createBaseVNode("span", { 5572 class: normalizeClass(wrapperClass.value), 5573 onClick: handleCheckboxClick 5574 }, [ 5575 isMixedCheckbox.value ? (openBlock(), createElementBlock("i", { 5576 key: 0, 5577 id: _ctx.id, 5578 class: normalizeClass(unref(ns).e("mixed")), 5579 tabindex: _ctx.tabindex, 5580 role: "checkbox", 5581 "data-testid": _ctx.testId, 5582 "aria-checked": mixedCheckboxAriaChecked.value, 5583 "aria-disabled": unref(isDisabled), 5584 "aria-label": _ctx.ariaLabel, 5585 "aria-labelledby": ariaLabelledbyResult.value, 5586 "aria-describedby": ariaDescribedByResult.value, 5587 onFocus: _cache[0] || (_cache[0] = //@ts-ignore 5588 (...args) => unref(handleFocus) && unref(handleFocus)(...args)), 5589 onBlur: _cache[1] || (_cache[1] = //@ts-ignore 5590 (...args) => unref(handleBlur) && unref(handleBlur)(...args)), 5591 onKeydown: _cache[2] || (_cache[2] = withKeys(withModifiers( 5592 //@ts-ignore 5593 (...args) => unref(handleMixedChange) && unref(handleMixedChange)(...args), 5594 ["stop", "prevent"] 5595 ), ["space", "enter"])) 5596 }, null, 42, _hoisted_1$r)) : createCommentVNode("", true), 5597 !isMixedCheckbox.value ? withDirectives((openBlock(), createElementBlock("input", { 5598 key: 1, 5599 id: _ctx.id, 5600 ref_key: "inputRef", 5601 ref: inputRef, 5602 "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => isRef(model) ? model.value = $event : null),
5603 class: normalizeClass(unref(ns).e("original")), 5604 type: "checkbox", 5605 "data-testid": _ctx.testId, 5606 "aria-disabled": unref(isDisabled), 5607 "aria-label": _ctx.ariaLabel, 5608 "aria-labelledby": ariaLabelledbyResult.value, 5609 "aria-describedby": ariaDescribedByResult.value, 5610 "aria-required": _ctx.ariaRequired, 5611 value: _ctx.label, 5612 name: _ctx.name, 5613 tabindex: isMixedCheckbox.value ? -1 : _ctx.tabindex, 5614 onKeydown: _cache[4] || (_cache[4] = withKeys(withModifiers( 5615 //@ts-ignore 5616 (...args) => unref(handleKeyEnter) && unref(handleKeyEnter)(...args), 5617 ["stop", "prevent"] 5618 ), ["enter", "space"])), 5619 onChange: _cache[5] || (_cache[5] = //@ts-ignore 5620 (...args) => unref(handleChange) && unref(handleChange)(...args)), 5621 onFocus: _cache[6] || (_cache[6] = //@ts-ignore 5622 (...args) => unref(handleFocus) && unref(handleFocus)(...args)), 5623 onBlur: _cache[7] || (_cache[7] = //@ts-ignore 5624 (...args) => unref(handleBlur) && unref(handleBlur)(...args)), 5625 onClick: _cache[8] || (_cache[8] = withModifiers(() => { 5626 }, ["stop"])) 5627 }, null, 42, _hoisted_2$a)), [ 5628 [vModelCheckbox, unref(model)] 5629 ]) : createCommentVNode("", true), 5630 createBaseVNode("span", { 5631 "aria-hidden": "true", 5632 class: normalizeClass([unref(ns).e("inner"), unref(ns).is("disabled", unref(isDisabled))]), 5633 dir: "ltr", 5634 onClick: handleKnobClick 5635 }, [ 5636 createBaseVNode("i", { 5637 class: normalizeClass(unref(ns).e("knob")) 5638 }, null, 2) 5639 ], 2), 5640 _ctx.$slots.default || _ctx.label ? (openBlock(), createElementBlock("span", { 5641 key: 2, 5642 id: unref(labelId), 5643 "aria-hidden": _ctx.labelAriaHidden, 5644 class: normalizeClass(unref(ns).e("label")) 5645 }, [ 5646 renderSlot(_ctx.$slots, "default", {}, () => [ 5647 createTextVNode(toDisplayString(_ctx.label), 1) 5648 ]) 5649 ], 10, _hoisted_3$5)) : createCommentVNode("", true), 5650 positionAriaDescribedbyContent.value ? (openBlock(), createBlock(unref(ZmVisuallyHidden), { 5651 key: 3, 5652 id: unref(positionInfoId) 5653 }, { 5654 default: withCtx(() => [ 5655 createTextVNode(toDisplayString(positionAriaDescribedbyContent.value), 1) 5656 ]), 5657 _: 1 5658 }, 8, ["id"])) : createCommentVNode("", true) 5659 ], 2), 5660 _ctx.$slots.suffix ? (openBlock(), createElementBlock("span", { 5661 key: 0, 5662 class: normalizeClass(unref(ns).e("suffix")) 5663 }, [ 5664 renderSlot(_ctx.$slots, "suffix") 5665 ], 2)) : createCommentVNode("", true), 5666 _ctx.description ? (openBlock(), createElementBlock("div", { 5667 key: 1, 5668 id: unref(descriptionId), 5669 class: normalizeClass(unref(ns).e("description")) 5670 }, toDisplayString(_ctx.description), 11, _hoisted_4$3)) : createCommentVNode("", true), 5671 _ctx.$slots.region ? (openBlock(), createElementBlock("div", { 5672 key: 2, 5673 class: normalizeClass(unref(ns).e("region")), 5674 role: "presentation" 5675 }, [ 5676 renderSlot(_ctx.$slots, "region") 5677 ], 2)) : createCommentVNode("", true) 5678 ]), 5679 _: 3 5680 }, 8, ["class"]); 5681 }; 5682 } 5683})); 5684const ZmCheckbox = withInstall(_sfc_main$O); 5685const candidateSelectors = [ 5686 "input:not([inert])", 5687 "select:not([inert])", 5688 "textarea:not([inert])", 5689 "a[href]:not([inert])", 5690 "button:not([inert])", 5691 "[tabindex]:not(slot):not([inert])", 5692 "audio[controls]:not([inert])", 5693 "video[controls]:not([inert])", 5694 '[contenteditable]:not([contenteditable="false"]):not([inert])', 5695 "details>summary:first-of-type:not([inert])", 5696 "details:not([inert])", 5697 "iframe" 5698]; 5699const candidateSelector = candidateSelectors.join(","); 5700const isInert = (node, lookUp = true) => { 5701 var _a; 5702 const inertAtt = (_a = node == null ? void 0 : node.getAttribute) == null ? void 0 : _a.call(node, "inert"); 5703 const inert = inertAtt === "" || inertAtt === "true"; 5704 const result = Boolean( 5705 inert || lookUp && node && isInert(node.parentNode) 5706 ); 5707 return result; 5708}; 5709const isIgnored = (node) => { 5710 var _a; 5711 const ignored = (_a = node == null ? void 0 : node.getAttribute) == null ? void 0 : _a.call(node, "focu
5711s-ignore"); 5712 if (ignored) 5713 return true; 5714}; 5715const isNodeMatchingSelectorFocusable = function(node) { 5716 if (node.disabled || isInert(node) || isHiddenInput(node) || isIgnored(node)) { 5717 return false; 5718 } 5719 return true; 5720}; 5721const isHiddenInput = (node) => { 5722 const htmlNode = node; 5723 return (htmlNode == null ? void 0 : htmlNode.tagName) === "INPUT" && (htmlNode == null ? void 0 : htmlNode.type) === "hidden"; 5724}; 5725const getFocusableElementsFromContainer = (element, includeContainer = false) => { 5726 const nodes = []; 5727 if (includeContainer && element.matches(candidateSelector) && isNodeMatchingSelectorFocusable(element)) { 5728 nodes.push(element); 5729 } 5730 const walker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT, { 5731 acceptNode: (node) => { 5732 if (node.matches(candidateSelector) && isNodeMatchingSelectorFocusable(node)) { 5733 return NodeFilter.FILTER_ACCEPT; 5734 } else { 5735 return NodeFilter.FILTER_SKIP; 5736 } 5737 } 5738 }); 5739 while (walker.nextNode()) { 5740 nodes.push(walker.currentNode); 5741 } 5742 return nodes; 5743}; 5744const useCheckboxA11y = (tabMoreId) => { 5745 let grid = []; 5746 let liItems = []; 5747 let focusedRowIndex = -1; 5748 let focusedColIndex = 0; 5749 let container; 5750 const ns = useNamespace("checkbox"); 5751 const selector = { 5752 checkboxItem: `.${ns.b()}` 5753 }; 5754 const resetTabIndexInContainer = () => { 5755 const focusableDescendantsElements = getFocusableElementsFromContainer(container); 5756 focusableDescendantsElements.forEach((el) => { 5757 el.setAttribute("tabindex", "-1"); 5758 }); 5759 }; 5760 const addTabMoreAriaDescribedby = (el, id) => { 5761 const originalAriaDescribedby = el.getAttribute("aria-describedby") || ""; 5762 if (!originalAriaDescribedby.includes(id)) { 5763 el.setAttribute("aria-describedby", [originalAriaDescribedby, id].filter(Boolean).join(" ")); 5764 } 5765 }; 5766 const buildGrid = () => { 5767 liItems = Array.from(container.querySelectorAll(selector.checkboxItem)); 5768 let setFocusedRowIndexAlready = false; 5769 grid = []; 5770 for (let i = 0; i < liItems.length; i++) { 5771 const focusableElementInCheckboxItem = getFocusableElementsFromContainer(liItems[i]); 5772 const targets = focusableElementInCheckboxItem.filter((node) => !node.dataset.ignore); 5773 const checkboxEl = targets[0]; 5774 if (checkboxEl.checked && !setFocusedRowIndexAlready) { 5775 focusedRowIndex = i; 5776 checkboxEl.setAttribute("tabindex", "0"); 5777 setFocusedRowIndexAlready = true; 5778 } 5779 grid[i] = targets; 5780 if (targets.length > 1) { 5781 addTabMoreAriaDescribedby(checkboxEl, tabMoreId); 5782 } 5783 } 5784 if (!setFocusedRowIndexAlready && liItems.length) { 5785 setFocusOnSpecifiedCheckbox(0, false); 5786 } 5787 }; 5788 const registerEvents = () => { 5789 clearEvents(); 5790 container.addEventListener("keydown", checkFocusChange, true); 5791 }; 5792 const clearEvents = () => { 5793 container.removeEventListener("keydown", checkFocusChange, true); 5794 }; 5795 const setFocusOnSpecifiedCheckbox = (rowIndex, needFocus = true) => { 5796 if (grid[rowIndex]) { 5797 for (const rowItems of grid) { 5798 rowItems[0].setAttribute("tabindex", "-1"); 5799 } 5800 grid[rowIndex][0].setAttribute("tabindex", "0"); 5801 if (needFocus) { 5802 grid[rowIndex][0].focus(); 5803 focusedColIndex = 0; 5804 } 5805 focusedRowIndex = rowIndex; 5806 } 5807 }; 5808 const buildA11y = (_container) => { 5809 /* istanbul ignore next @preserve */ 5810 if (!_container) 5811 return; 5812 container = _container; 5813 resetTabIndexInContainer(); 5814 buildGrid(); 5815 registerEvents(); 5816 }; 5817 const navigateBetweenCheckbox = (direction) => { 5818 const length = grid.length; 5819 if (length) { 5820 if (direction === NavigateType.NEXT) { 5821 focusedRowIndex++; 5822 if (focusedRowIndex === length) { 5823 focusedRowIndex = 0; 5824 } 5825 } else if (direction === NavigateType.PREV) { 5826 focusedRowIndex--; 5827 if (focusedRowIndex < 0) { 5828 focusedRowIndex = length - 1; 5829 } 5830 } else if (direction === NavigateType.HOME) { 5831 focusedRowIndex = 0; 5832 } else if (direction === NavigateType.END) { 5833 focusedRowIndex = length - 1; 5834 } 5835 setFocusOnSpecifiedCheckbox(focusedRowIndex); 5836 } 5837 }; 5838 const navigateWithinCheckboxItems = (direction, event) => { 5839 const columnCounter = grid[focusedRowIndex].length; 5840 if (direction === NavigateType.NEXT && focusedColIndex < columnCounter - 1) { 5841 focusedColIndex++; 5842 grid[focusedRowIndex][focusedColIndex].focus(); 5843 event.stopPropagation(); 5844 event.preventDefault(); 5845 } else if (direction === NavigateType.PREV && focusedColIndex > 0) { 5846 focusedColIndex--; 5847 grid[focusedRowIndex][focusedColIndex].focus(); 5848 event.stopPropagation(); 5849 event.preventDefault(); 5850 } else { 5851 focusedColIndex = 0; 5852 } 5853 }; 5854 const checkFocusChange = (event) => {
5855 const keyCode = event.code; 5856 const pressedShiftKey = event.shiftKey; 5857 const actionsMap = { 5858 [EVENT_CODE.down]: NavigateType.NEXT, 5859 [EVENT_CODE.right]: NavigateType.NEXT, 5860 [EVENT_CODE.up]: NavigateType.PREV, 5861 [EVENT_CODE.left]: NavigateType.PREV, 5862 [EVENT_CODE.home]: NavigateType.HOME, 5863 [EVENT_CODE.end]: NavigateType.END 5864 }; 5865 switch (keyCode) { 5866 case EVENT_CODE.tab: 5867 navigateWithinCheckboxItems(pressedShiftKey ? NavigateType.PREV : NavigateType.NEXT, event); 5868 break; 5869 case EVENT_CODE.up: 5870 case EVENT_CODE.down: 5871 case EVENT_CODE.left: 5872 case EVENT_CODE.right: 5873 case EVENT_CODE.home: 5874 case EVENT_CODE.end: 5875 navigateBetweenCheckbox(actionsMap[keyCode]); 5876 event.preventDefault(); 5877 event.stopPropagation(); 5878 break; 5879 } 5880 }; 5881 onBeforeUnmount(() => { 5882 if (container) { 5883 clearEvents(); 5884 } 5885 }); 5886 return { 5887 buildA11y, 5888 clearEvents, 5889 setFocusOnSpecifiedCheckbox 5890 }; 5891}; 5892var __defProp$12 = Object.defineProperty; 5893var __defProps$S = Object.defineProperties; 5894var __getOwnPropDescs$S = Object.getOwnPropertyDescriptors; 5895var __getOwnPropSymbols$12 = Object.getOwnPropertySymbols; 5896var __hasOwnProp$12 = Object.prototype.hasOwnProperty; 5897var __propIsEnum$12 = Object.prototype.propertyIsEnumerable; 5898var __defNormalProp$12 = (obj, key, value) => key in obj ? __defProp$12(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 5899var __spreadValues$12 = (a, b) => { 5900 for (var prop in b || (b = {})) 5901 if (__hasOwnProp$12.call(b, prop)) 5902 __defNormalProp$12(a, prop, b[prop]); 5903 if (__getOwnPropSymbols$12) 5904 for (var prop of __getOwnPropSymbols$12(b)) { 5905 if (__propIsEnum$12.call(b, prop)) 5906 __defNormalProp$12(a, prop, b[prop]); 5907 } 5908 return a; 5909}; 5910var __spreadProps$S = (a, b) => __defProps$S(a, __getOwnPropDescs$S(b)); 5911var __async$l = (__this, __arguments, generator) => { 5912 return new Promise((resolve2, reject) => { 5913 var fulfilled = (value) => { 5914 try { 5915 step(generator.next(value)); 5916 } catch (e) { 5917 reject(e); 5918 } 5919 }; 5920 var rejected = (value) => { 5921 try { 5922 step(generator.throw(value)); 5923 } catch (e) { 5924 reject(e); 5925 } 5926 }; 5927 var step = (x) => x.done ? resolve2(x.value) : Promise.resolve(x.value).then(fulfilled, rejected); 5928 step((generator = generator.apply(__this, __arguments)).next()); 5929 }); 5930}; 5931const checkboxGroupProps = { 5932 modelValue: { 5933 type: definePropType(Array), 5934 /* istanbul ignore next @preserve */ 5935 default() { 5936 return []; 5937 }, 5938 validator(value) { 5939 return Array.isArray(value); 5940 } 5941 }, 5942 disabled: Boolean, 5943 vertical: Boolean, 5944 min: { 5945 type: Number, 5946 default: -Infinity 5947 }, 5948 max: { 5949 type: Number, 5950 default: Infinity 5951 }, 5952 ariaLabel: String, 5953 ariaLabelledby: String, 5954 ariaDescribedby: String, 5955 ariaRequired: Boolean, 5956 validateEvent: { 5957 type: Boolean, 5958 default: true 5959 }, 5960 tag: { 5961 type: String, 5962 default: "div" 5963 }, 5964 arrowKeys: Boolean, 5965 title: String, 5966 layout: { 5967 type: String, 5968 default: "page" 5969 } 5970}; 5971const checkboxGroupEmits = { 5972 [VUE_EVENT_NAMES.UPDATE_MODEL]: (val) => isArray(val), 5973 [VUE_EVENT_NAMES.CHANGE]: (val) => isArray(val) 5974}; 5975const _sfc_main$N = /* @__PURE__ */ defineComponent(__spreadProps$S(__spreadValues$12({}, { 5976 name: "ZmCheckboxGroup" 5977}), { 5978 __name: "checkbox-group", 5979 props: checkboxGroupProps, 5980 emits: checkboxGroupEmits, 5981 setup(__props, { expose: __expose, emit: __emit }) { 5982 const props = __props; 5983 const emit = __emit; 5984 const ns = useNamespace("checkbox"); 5985 const { t } = useLocale(messages$a); 5986 const tabMoreId = useId().value; 5987 const isRequired = useFormItemRequired(); 5988 const ariaLabelledbyResult = useFormItemLabelId(); 5989 const ariaDescribedbyResult = useFormItemAriaDescribedby(); 5990 const containerRef = ref(); 5991 const { buildA11y: _buildA11y, setFocusOnSpecifiedCheckbox } = useCheckboxA11y(tabMoreId); 5992 const changeEvent = (value) => __async$l(this, null, function* () { 5993 emit(VUE_EVENT_NAMES.UPDATE_MODEL, value); 5994 emit(VUE_EVENT_NAMES.CHANGE, value); 5995 }); 5996 onMounted(() => { 5997 if (props.arrowKeys) { 5998 _buildA11y(containerRef.value); 5999 } 6000 }); 6001 const modelValue = computed(() => props.modelValue); 6002 provide(checkboxGroupContextKey, __spreadProps$S(__spreadValues$12({}, pick(toRefs(props), ["min", "max", "disabled", "validateEvent"])), { 6003 modelValue, 6004 changeEvent 6005 })); 6006 const { formItem } = useFormItem(); 6007 watch( 6008 () => props.modelValue, 6009 () => { 6010 if (props.validateEvent) { 6011 formItem == null ? void 0 : formItem.validate().catch((err) => { 6012 /* istanbul ignore next @preserve */ 6013 debugWarn(err); 6014 }); 6015 } 6016 }, 6017 { 6018 deep: true 6019 } 6020 ); 6021 const buildA11y = () => { 6022 _buildA11y(containerRef.value); 6023 }; 6024 __expose({ 6025 buildA11y, 6026 setFocusOnSpecifiedCheckbox 6027 }); 6028 return (_ctx, _cache) => { 6029 return openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), { 6030 ref_key: "containerRef", 6031 ref: containerRef, 6032 class: normalizeClass([unref(ns).b("group"), unref(ns).is("vertical", _ctx.vertical), unref(ns).bm("group", _ctx.layout)]), 6033 role: _ctx.tag === "ul" ? void 0 : "group", 6034 "aria-label": _ctx.title || _ctx.ariaLabel, 6035 "aria-labelledby": unref(ariaLabelledbyResult), 6036 "aria-required": unref(isRequired), 6037 "aria-describedby": unref(ariaDescribedbyResult) 6038 }, { 6039 default: withCtx(() => [ 6040 createVNode(unref(ZmVisuallyHidden), { id: unref(tabMoreId) }, { 6041 default: withCtx(() => [ 6042 createTextVNode(toDisplayString(unref(t)("a11y.tabMore")), 1
6042) 6043 ]), 6044 _: 1 6045 }, 8, ["id"]), 6046 _ctx.title ? (openBlock(), createElementBlock("div", { 6047 key: 0, 6048 class: normalizeClass(unref(ns).e("title")) 6049 }, toDisplayString(_ctx.title), 3)) : createCommentVNode("", true), 6050 renderSlot(_ctx.$slots, "default") 6051 ]), 6052 _: 3 6053 }, 8, ["class", "role", "aria-label", "aria-labelledby", "aria-required", "aria-describedby"]); 6054 }; 6055 } 6056})); 6057const COLOR_PICKER_INJECTION_KEY = Symbol("ZmColorPicker"); 6058const messages$9 = { 6059 "en-US": { 6060 "input": { 6061 "hidePassword": "Hide password", 6062 "showPassword": "Show password", 6063 "limit": "Character limit: {textLength} / {maxlength}", 6064 "maxLengthReached": "{maxlength} characters limit reached", 6065 "prefixSlot": 'Prefix is "{text}"', 6066 "suffixSlot": 'Suffix is "{text}"', 6067 "prefixAndSuffixSlot": 'Prefix is "{text1}" and suffix is "{text2}"' 6068 } 6069 }, 6070 "de-DE": { 6071 "input": { 6072 "hidePassword": "Kennwort ausblenden", 6073 "showPassword": "Kennwort anzeigen", 6074 "limit": "Zeichenbeschränkung: {textLength}/{maxlength}", 6075 "maxLengthReached": "Begrenzung von {maxlength} Zeichen erreicht", 6076 "prefixSlot": 'Das Präfix ist "{text}".', 6077 "suffixSlot": 'Das Suffix ist "{text}".', 6078 "prefixAndSuffixSlot": 'Das Präfix ist "{text1}" und das Suffix ist "{text2}".' 6079 } 6080 }, 6081 "es-ES": { 6082 "input": { 6083 "hidePassword": "Ocultar contraseña", 6084 "showPassword": "Mostrar contraseña", 6085 "limit": "LÃmite de caracteres: {textLength} / {maxlength}", 6086 "maxLengthReached": "Se ha alcanzado el lÃmite de {maxlength} caracteres", 6087 "prefixSlot": "El prefijo es â{text}â.", 6088 "suffixSlot": "El sufijo es â{text}â.", 6089 "prefixAndSuffixSlot": "El prefijo es â{text1}â y el sufijo es â{text2}â." 6090 } 6091 }, 6092 "fr-FR": { 6093 "input": { 6094 "hidePassword": "Masquer le mot de passe", 6095 "showPassword": "Afficher le mot de passe", 6096 "limit": "Limite de caractères : {textLength}/{maxlength}", 6097 "maxLengthReached": "Limite de {maxlength} caractères atteinte", 6098 "prefixSlot": "Le préfixe est â{text}â.", 6099 "suffixSlot": "Le suffixe est â{text}â.", 6100 "prefixAndSuffixSlot": "Le préfixe est â{text1}â et le suffixe est â{text2}â." 6101 } 6102 }, 6103 "id-ID": { 6104 "input": { 6105 "hidePassword": "Sembunyikan kata sandi", 6106 "showPassword": "Tampilkan kata sandi", 6107 "limit": "Batas karakter: {textLength} / {maxlength}", 6108 "maxLengthReached": "Batas karakter {maxlength} tercapai", 6109 "prefixSlot": "Prefiksnya adalah â{text}â.", 6110 "suffixSlot": "Sufiksnya adalah â{text}â.", 6111 "prefixAndSuffixSlot": "Prefiksnya adalah â{text1}â dan sufiksnya adalah â{text2}â." 6112 } 6113 }, 6114 "it-IT": { 6115 "input": { 6116 "hidePassword": "Nascondi password", 6117 "showPassword": "Mostra password", 6118 "limit": "Limite di caratteri: {textLength} / {maxlength}", 6119 "maxLengthReached": "Limite di {maxlength} caratteri raggiunto", 6120 "prefixSlot": "Il prefisso è â{text}â.", 6121 "suffixSlot": "Il suffisso è â{text}â.", 6122 "prefixAndSuffixSlot": "Il prefisso è â{text1}â e il suffisso è â{text2}â." 6123 } 6124 }, 6125 "jp-JP": { 6126 "input": { 6127 "hidePassword": "ãã¹ã¯ã¼ããé表示ã«ãã¾ã", 6128 "showPassword": "ãã¹ã¯ã¼ãã表示ãã¾ã", 6129 "limit": "æåæ°å¶é: {textLength} / {maxlength}", 6130 "maxLengthReached": "{maxlength} æåã®å¶éã«éãã¾ãã", 6131 "prefixSlot": "ãã¬ãã£ãã¯ã¹ã¯ã{text}ãã§ãã", 6132 "suffixSlot": "ãµãã£ãã¯ã¹ã¯ã{text}ãã§ãã", 6133 "prefixAndSuffixSlot": "ãã¬ãã£ãã¯ã¹ã¯ã{text1}ãããµãã£ãã¯ã¹ã¯ã{text2}ãã§ãã" 6134 } 6135 }, 6136 "ko-KO": { 6137 "input": { 6138 "hidePassword": "ìí¸ ì¨ê¸°ê¸°", 6139 "showPassword": "ìí¸ íì", 6140 "limit": "ê¸ì ì ì í: {textLength}/{maxlength}", 6141 "maxLengthReached": "{maxlength}ì ì íì ëë¬íìµëë¤", 6142 "prefixSlot": "ì ëì¬ë â{text}âì ëë¤.", 6143 "suffixSlot": "ì 미ì¬ë â{text}âì ëë¤.", 6144 "prefixAndSuffixSlot": "ì ëì¬ë â{text1}âì´ê³ ì 미ì¬ë â{text2}âì ëë¤." 6145 } 6146 }, 6147 "nl-NL": { 6148 "input": { 6149 "hidePassword": "Wachtwoord verbergen", 6150 "showPassword": "Wachtwoord weergeven", 6151 "limit": "Tekenlimiet: {textLength} / {maxlength}", 6152 "maxLengthReached": "limiet van {maxlength} tekens bereikt", 6153 "prefixSlot": 'Voorvoegsel is "{text}".',
6154 "suffixSlot": 'Achtervoegsel is "{text}".', 6155 "prefixAndSuffixSlot": 'Voorvoegsel is "{text1}" en achtervoegsel is "{text2}".' 6156 } 6157 }, 6158 "pl-PL": { 6159 "input": { 6160 "hidePassword": "Ukryj hasÅo", 6161 "showPassword": "Pokaż hasÅo", 6162 "limit": "Limit znaków: {textLength}/{maxlength}", 6163 "maxLengthReached": "OsiÄ gniÄto limit znaków {maxlength}", 6164 "prefixSlot": "Prefiks to â{text}â.", 6165 "suffixSlot": "Sufiks to â{text}â.", 6166 "prefixAndSuffixSlot": "Prefiks to â{text1}â, a sufiks to â{text2}â." 6167 } 6168 }, 6169 "pt-PT": { 6170 "input": { 6171 "hidePassword": "Ocultar senha", 6172 "showPassword": "Mostrar senha", 6173 "limit": "Limite de caracteres: {textLength} / {maxlength}", 6174 "maxLengthReached": "Limite de {maxlength} caracteres atingido", 6175 "prefixSlot": "O prefixo é â{text}â.", 6176 "suffixSlot": "O sufixo é â{text}â.", 6177 "prefixAndSuffixSlot": "O prefixo é â{text1}â e o sufixo é â{text2}â." 6178 } 6179 }, 6180 "ru-RU": { 6181 "input": { 6182 "hidePassword": "СкÑÑÑÑ Ð¿Ð°ÑолÑ", 6183 "showPassword": "ÐоказаÑÑ Ð¿Ð°ÑолÑ", 6184 "limit": "ÐгÑаниÑение по Ñимволам: {textLength}/{maxlength}", 6185 "maxLengthReached": "ÐоÑÑигнÑÑо макÑималÑное колиÑеÑÑво Ñимволов: {maxlength}", 6186 "prefixSlot": "ÐÑеÑикÑ: {text}.", 6187 "suffixSlot": "СÑÑÑикÑ: {text}", 6188 "prefixAndSuffixSlot": "ÐÑеÑикÑ: {text1}, ÑÑÑÑикÑ: {text2}." 6189 } 6190 }, 6191 "sv-SE": { 6192 "input": { 6193 "hidePassword": "Dölj lösenord", 6194 "showPassword": "Visa lösenord", 6195 "limit": "Teckengräns: {textLength} / {maxlength}", 6196 "maxLengthReached": "Teckengränsen pÃ¥ {maxlength} har nÃ¥tts", 6197 "prefixSlot": "Prefixet är â{text}â.", 6198 "suffixSlot": "Suffixet är â{text}â.", 6199 "prefixAndSuffixSlot": "Prefixet är â{text1}â och suffixet är â{text2}â." 6200 } 6201 }, 6202 "tr-TR": { 6203 "input": { 6204 "hidePassword": "Parolayı gizle", 6205 "showPassword": "Parolayı göster", 6206 "limit": "Karakter sınırı: {textLength} - {maxlength}", 6207 "maxLengthReached": "{maxlength} karakter sınırına ulaÅıldı", 6208 "prefixSlot": "Ãn ek â{text}â Åeklindedir.", 6209 "suffixSlot": "Son ek â{text}â Åeklindedir.", 6210 "prefixAndSuffixSlot": "Ãn ek â{text1}â ve son ek â{text2}â Åeklindedir." 6211 } 6212 }, 6213 "vi-VN": { 6214 "input": { 6215 "hidePassword": "Ẩn máºt khẩu", 6216 "showPassword": "Hiá»n thá» máºt khẩu", 6217 "limit": "Giá»i hạn ký tá»±: {textLength} / {maxlength}", 6218 "maxLengthReached": "Äã Äạt Äến giá»i hạn {maxlength} ký tá»±", 6219 "prefixSlot": "Tiá»n tá» là â{text}â.", 6220 "suffixSlot": "Háºu tá» là â{text}â.", 6221 "prefixAndSuffixSlot": "Tiá»n tá» là â{text1}â và háºu tá» là â{text2}â." 6222 } 6223 }, 6224 "zh-CN": { 6225 "input": { 6226 "hidePassword": "éèå¯ç ", 6227 "showPassword": "æ¾ç¤ºå¯ç ", 6228 "limit": "å符æ°ä¸éï¼{textLength}/{maxlength}", 6229 "maxLengthReached": "已达å°{maxlength}个å符çä¸é", 6230 "prefixSlot": "åç¼ä¸ºâ{text}âã", 6231 "suffixSlot": "åç¼ä¸ºâ{text}âã", 6232 "prefixAndSuffixSlot": "åç¼ä¸ºâ{text1}âï¼åç¼ä¸ºâ{text2}âã" 6233 } 6234 }, 6235 "zh-TW": { 6236 "input": { 6237 "hidePassword": "é±èå¯ç¢¼", 6238 "showPassword": "顯示å¯ç¢¼", 6239 "limit": "åå æ¸ä¸éï¼{textLength}/{maxlength}", 6240 "maxLengthReached": "å·²éå°{maxlength}ååå çä¸é", 6241 "prefixSlot": "é¦ç¢¼çºã{text}ãã", 6242 "suffixSlot": "尾碼çºã{text}ãã", 6243 "prefixAndSuffixSlot": "é¦ç¢¼çºã{text1}ãè尾碼çºã{text2}ãã" 6244 } 6245 } 6246}; 6247var __defProp$11 = Object.defineProperty; 6248var __defProps$R = Object.defineProperties; 6249var __getOwnPropDescs$R = Object.getOwnPropertyDescriptors; 6250var __getOwnPropSymbols$11 = Object.getOwnPropertySymbols; 6251var __hasOwnProp$11 = Object.prototype.hasOwnProperty; 6252var __propIsEnum$11 = Object.prototype.propertyIsEnumerable; 6253var __defNormalProp$11 = (obj, key, value) => key in obj ? __defProp$11(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 6254var __spreadValues$11 = (a, b) => { 6255 for (var prop in b || (b = {})) 6256 if (__hasOwnProp$11.call(b, prop)) 6257 __defNormalProp$11(a, prop, b[prop]); 6258 if (__getOwnPropSymbols$11) 6259 for (var prop of __getOwnPropSymbols$11(b)) { 6260 if (__propIsEnum$11.call(b, prop)) 6261 __defNormalProp$11(a, prop, b[prop]); 6262 } 6263 return a; 6264}; 6265var __spreadProps$R = (a, b) => __defProps$R(a, __getOwnPropDescs$R(b)); 6266const inputProps = { 6267 id: String, 6268 disabled: Boolean, 6269 modelValue: { 6270 type: [String, Number], 6271 default: "" 6272 }, 6273 maxlength: { 6274 type: Number, 6275 default: Infinity 6276 }, 6277 minlength: { 6278 type: Number, 6279 default: -Infinity 6280 }, 6281 autocomplete: { 6282 type: String, 6283 default: "off" 6284 }, 6285 placeholder: String, 6286 clearable: Boolean, 6287 showPassword: Boolean, 6288 showWordLimit: Boolean,
6289 ariaLabel: String, 6290 ariaLabelledby: String, 6291 ariaDescribedby: String, 6292 ariaRequired: Boolean, 6293 ariaAutocomplete: { 6294 type: String, 6295 default: void 0 6296 }, 6297 ariaExpanded: { 6298 type: Boolean, 6299 default: null 6300 }, 6301 ariaControls: String, 6302 ariaActivedescendant: String, 6303 readonly: Boolean, 6304 name: String, 6305 validateEvent: { 6306 type: Boolean, 6307 default: true 6308 }, 6309 leadIcon: { 6310 type: Object 6311 }, 6312 tabindex: { 6313 type: [String, Number], 6314 default: 0 6315 // in Table, should set it -1 6316 }, 6317 errored: Boolean, 6318 role: String, 6319 showEye: { 6320 type: Boolean, 6321 default: true 6322 }, 6323 isolateFromForm: Boolean, 6324 size: { 6325 type: String, 6326 default: "md" 6327 }, 6328 forceKeepWordLimit: { 6329 type: Boolean, 6330 default: false 6331 }, 6332 type: { 6333 type: String, 6334 default: "text" 6335 }, 6336 validateOnBlur: Boolean, 6337 a11yIgnore: Boolean, 6338 bare: Boolean, 6339 extraAttributes: { 6340 type: Object, 6341 default: () => ({}) 6342 }, 6343 testId: String, 6344 passByMaxLength: Boolean 6345 // not suggest to use 6346}; 6347const inputEmits = { 6348 [VUE_EVENT_NAMES.UPDATE_MODEL]: (value) => isString(value), 6349 [VUE_EVENT_NAMES.CHANGE]: (value) => isString(value), 6350 [VUE_EVENT_NAMES.FOCUS]: (event) => event instanceof FocusEvent, 6351 [VUE_EVENT_NAMES.BLUR]: (event) => event instanceof FocusEvent, 6352 [VUE_EVENT_NAMES.CLEAR]: () => true, 6353 [VUE_EVENT_NAMES.ENTER]: (event) => event instanceof Event, 6354 [VUE_EVENT_NAMES.COMPOSITION_START]: (event) => event instanceof CompositionEvent, 6355 [VUE_EVENT_NAMES.COMPOSITION_UPDATE]: (event) => event instanceof CompositionEvent, 6356 [VUE_EVENT_NAMES.COMPOSITION_END]: (event) => event instanceof CompositionEvent, 6357 [VUE_EVENT_NAMES.ESCAPE]: (event) => event instanceof Event, 6358 [VUE_EVENT_NAMES.TAB]: (event) => event instanceof Event 6359}; 6360const _hoisted_1$q = ["id", "role", "tabindex", "data-testid", "type", "aria-disabled", "readonly", "aria-labelledby", "aria-label", "aria-required", "aria-describedby", "aria-expanded", "aria-controls", "aria-autocomplete", "aria-activedescendant", "aria-invalid", "name", "maxlength", "minlength", "placeholder", "autocomplete", "a11y-ignore"]; 6361const _sfc_main$M = /* @__PURE__ */ defineComponent(__spreadProps$R(__spreadValues$11({}, { 6362 name: "ZmInput" 6363}), { 6364 __name: "input", 6365 props: inputProps, 6366 emits: inputEmits, 6367 setup(__props, { expose: __expose, emit: __emit }) { 6368 const props = __props; 6369 const emit = __emit; 6370 const slots = useSlots(); 6371 const ns = useNamespace("input"); 6372 const { t } = useLocale(merge({}, messages$9, messages$c)); 6373 const wordLimitId = useId(); 6374 const internalDescriptionId = useId(); 6375 const internalDescription = ref(""); 6376 const { role } = props; 6377 const formItem = inject(FORM_ITEM_INJECTION_KEY, void 0); 6378 const colorPicker = inject(COLOR_PICKER_INJECTION_KEY, void 0); 6379 const isInputting = ref(false); 6380 const formItemAriaDescribedBy = useFormItemAriaDescribedby(); 6381 const inputRef = ref(); 6382 const trailingRef = ref(); 6383 const leadIconRef = ref(); 6384 const prependRef = ref(); 6385 const prependSelectRef = ref(); 6386 const appendRef = ref(); 6387 const appendSelectRef = ref(); 6388 const containerClass = computed(() => { 6389 return [ 6390 ns.b(), 6391 ns.is("exceed", inputExceed.value), 6392 ns.is("counted", isWordLimitVisible.value), 6393 ns.m(props.size) 6394 ]; 6395 }); 6396 const isFormItemErrored = useFormItemErrored(); 6397 const inputClass = computed(() => { 6398 const { leadIcon, errored, readonly, bare } = props; 6399 return [ 6400 ns.e("inner"), 6401 ns.is("disabled", isDisabled.value), 6402 ns.is("leaded", !!leadIcon), 6403 ns.is("trailed", trailingIconVisible.value), 6404 ns.is("prepended", !!slots.prepend || !!slots["prepend-select"]), 6405 ns.is("appended", !!slots.append || !!slots["append-select"]), 6406 ns.is("errored", isFormItemErrored.value || errored || inputExceed.value), 6407 ns.is("readonly", readonly), 6408 ns.is( 6409 "zindex-higher", 6410 (!!slots.append || !!slots["append-select"] || !!slots["prepend-select"]) && isFocusing.value 6411 ), 6412 ns.is("no-left-border", !!slots.prepend && isDisabled.value), 6413 ns.is("no-right-border", !!slots.append && isDisabled.value), 6414 ns.is("bare", bare) 6415 ]; 6416 }); 6417 const isDisabled = useFormDisabled(); 6418 const ariaDescribedbyResult = computed(() => { 6419 let ret = []; 6420 if (isInputting.value) 6421 return; 6422 if (internalDescription.value) {
6423 ret.push(internalDescriptionId.value); 6424 } 6425 if (isWordLimitVisible.value) { 6426 ret.push(wordLimitId.value); 6427 } 6428 if (formItemAriaDescribedBy.value) { 6429 ret.push(formItemAriaDescribedBy.value); 6430 } 6431 if (ret.length === 0) { 6432 return void 0; 6433 } 6434 return ret.join(" "); 6435 }); 6436 const ariaLabelledbyResult = useFormItemLabelId(); 6437 const isRequired = useFormItemRequired(); 6438 const isComposing = ref(false); 6439 const passwordVisible = ref(false); 6440 const PasswordIcon = computed(() => passwordVisible.value ? EyeHide : EyeShow); 6441 const nativeInputValue = computed(() => isNil(props.modelValue) ? "" : String(props.modelValue)); 6442 const showClear = computed( 6443 () => props.clearable && !isDisabled.value && !!nativeInputValue.value && !showEyeIcon.value && !props.readonly 6444 ); 6445 const isWordLimitVisible = computed(() => { 6446 return props.showWordLimit && !!props.maxlength && (!isDisabled.value || props.forceKeepWordLimit) && !props.showPassword; 6447 }); 6448 const textLength = computed(() => nativeInputValue.value.length); 6449 const inputExceed = computed(() => isWordLimitVisible.value && textLength.value > props.maxlength); 6450 const trailingIconVisible = computed(() => showClear.value || showEyeIcon.value); 6451 const showEyeIcon = computed(() => props.showPassword && props.showEye); 6452 const setNativeInputValue = () => { 6453 if (inputRef.value) { 6454 if (inputRef.value.value === nativeInputValue.value) 6455 return; 6456 inputRef.value.value = nativeInputValue.value; 6457 } 6458 }; 6459 const updateAriaDescription = () => { 6460 var _a, _b, _c, _d, _e, _f; 6461 let hasPrepend = false; 6462 let string = ""; 6463 let textPrepend = ""; 6464 if (slots.prepend || slots["prepend-select"]) { 6465 textPrepend = ((_a = prependRef.value) == null ? void 0 : _a.textContent) || ((_c = (_b = prependSelectRef.value) == null ? void 0 : _b.querySelector( 6466 `.${getNamespace()}-select-input__span:not(.is-placeholder)` 6467 )) == null ? void 0 : _c.textContent) || ""; 6468 if (textPrepend) { 6469 hasPrepend = true; 6470 string = t("input.prefixSlot", { text: textPrepend }); 6471 } 6472 } 6473 if (slots.append || slots["append-select"]) { 6474 const text = ((_d = appendRef.value) == null ? void 0 : _d.textContent) || ((_f = (_e = appendSelectRef.value) == null ? void 0 : _e.querySelector( 6475 `.${getNamespace()}-select-input__span:not(.is-placeholder)` 6476 )) == null ? void 0 : _f.textContent) || ""; 6477 if (text) { 6478 if (hasPrepend) { 6479 string = t("input.prefixAndSuffixSlot", { text1: textPrepend, text2: text }); 6480 } else { 6481 string = t("input.suffixSlot", { text }); 6482 } 6483 } 6484 } 6485 internalDescription.value = string; 6486 }; 6487 const setLeadIconOffset = () => { 6488 if (leadIconRef.value && prependRef.value) { 6489 const { offsetWidth } = prependRef.value; 6490 if (offsetWidth) { 6491 leadIconRef.value.style.transform = `translateX(${offsetWidth}px)`; 6492 } 6493 } 6494 if (leadIconRef.value && prependSelectRef.value) { 6495 const { offsetWidth } = prependSelectRef.value; 6496 if (offsetWidth) { 6497 leadIconRef.value.style.transform = `translateX(${offsetWidth}px)`; 6498 } 6499 } 6500 }; 6501 let isUserInput = false; 6502 const handleInput = (event) => { 6503 let { value } = event.target; 6504 isInputting.value = true; 6505 if (isComposing.value) 6506 return; 6507 isUserInput = true; 6508 emit(VUE_EVENT_NAMES.UPDATE_MODEL, value); 6509 nextTick(() => { 6510 setNativeInputValue(); 6511 setLeadIconOffset(); 6512 }); 6513 }; 6514 const handleChange = (event) => { 6515 emit(VUE_EVENT_NAMES.CHANGE, event.target.value); 6516 handleFormValidate(); 6517 }; 6518 const handleCompositionStart = (event) => { 6519 emit(VUE_EVENT_NAMES.COMPOSITION_START, event); 6520 isComposing.value = true; 6521 }; 6522 const handleCompositionUpdate = (event) => { 6523 emit(VUE_EVENT_NAMES.COMPOSITION_UPDATE, event); 6524 }; 6525 const handleCompositionEnd = (event) => { 6526 emit(VUE_EVENT_NAMES.COMPOSITION_END, event); 6527 if (isComposing.value) { 6528 isComposing.value = false;
6529 handleInput(event); 6530 } 6531 }; 6532 const handlePasswordVisibility = () => { 6533 passwordVisible.value = !passwordVisible.value; 6534 nextTick(() => { 6535 focus(); 6536 }); 6537 }; 6538 const focus = () => { 6539 var _a; 6540 return (_a = inputRef.value) == null ? void 0 : _a.focus({ preventScroll: true }); 6541 }; 6542 const select = () => { 6543 var _a; 6544 return (_a = inputRef.value) == null ? void 0 : _a.select(); 6545 }; 6546 const isFocusing = ref(false); 6547 const handleFocus = (event) => { 6548 isFocusing.value = true; 6549 emit(VUE_EVENT_NAMES.FOCUS, event); 6550 }; 6551 const handleFormValidate = () => { 6552 if (props.validateEvent && !colorPicker) { 6553 /* istanbul ignore next @preserve */ 6554 formItem == null ? void 0 : formItem.validate().catch((err) => debugWarn(err)); 6555 } 6556 }; 6557 const handleBlur = (event) => { 6558 isInputting.value = false; 6559 isFocusing.value = false; 6560 emit(VUE_EVENT_NAMES.BLUR, event); 6561 if (props.validateOnBlur) { 6562 handleFormValidate(); 6563 } 6564 }; 6565 const handleKeydown = (event) => { 6566 const code = event.code; 6567 switch (code) { 6568 case EVENT_CODE.left: 6569 case EVENT_CODE.right: 6570 if (!isDisabled.value) { 6571 event.stopPropagation(); 6572 } 6573 break; 6574 case EVENT_CODE.enter: 6575 case EVENT_CODE.numpadEnter: 6576 let inComposition = isComposing.value; 6577 if (isSafari) { 6578 inComposition = isIMEComposing(event); 6579 } 6580 if (!isDisabled.value && !inComposition) { 6581 emit(VUE_EVENT_NAMES.ENTER, event); 6582 } 6583 break; 6584 case EVENT_CODE.esc: { 6585 emit(VUE_EVENT_NAMES.ESCAPE, event); 6586 break; 6587 } 6588 case EVENT_CODE.tab: { 6589 emit(VUE_EVENT_NAMES.TAB, event); 6590 break; 6591 } 6592 } 6593 }; 6594 const clear = () => { 6595 focus(); 6596 emit(VUE_EVENT_NAMES.UPDATE_MODEL, ""); 6597 emit(VUE_EVENT_NAMES.CHANGE, ""); 6598 emit(VUE_EVENT_NAMES.CLEAR); 6599 handleFormValidate(); 6600 }; 6601 const setTrailingElOffset = () => { 6602 const trailingEl = trailingRef.value; 6603 const appendEl = appendRef.value; 6604 if (trailingEl && appendEl) { 6605 const { offsetWidth } = appendEl; 6606 if (offsetWidth) { 6607 trailingEl.style.transform = `translateX(${-offsetWidth}px)`; 6608 } 6609 } 6610 if (trailingEl && appendSelectRef.value) { 6611 const { offsetWidth } = appendSelectRef.value; 6612 if (offsetWidth) { 6613 trailingEl.style.transform = `translateX(${-offsetWidth}px)`; 6614 } 6615 } 6616 }; 6617 const handleLeadIconClick = (event) => { 6618 if (!isDisabled.value) { 6619 nextTick(() => { 6620 focus(); 6621 }); 6622 event.stopPropagation(); 6623 event.preventDefault(); 6624 } 6625 }; 6626 watch(nativeInputValue, () => setNativeInputValue()); 6627 watch(textLength, (newVal) => { 6628 const { maxlength } = props; 6629 if (isWordLimitVisible.value && Number.isFinite(maxlength)) { 6630 newVal >= maxlength ? announce(t("input.maxLengthReached", { maxlength })) : destroyAnnouncer(); 6631 } 6632 }); 6633 watch( 6634 trailingIconVisible, 6635 (newVal) => { 6636 if (newVal) { 6637 nextTick(() => { 6638 setTrailingElOffset(); 6639 }); 6640 } 6641 }, 6642 { 6643 immediate: true 6644 } 6645 ); 6646 watch( 6647 () => props.modelValue, 6648 () => { 6649 if (!isUserInput) { 6650 handleFormValidate(); 6651 } else { 6652 isUserInput = false; 6653 } 6654 } 6655 ); 6656 useResizeObserver([prependRef, prependSelectRef], () => { 6657 setLeadIconOffset(); 6658 updateAriaDescription(); 6659 }); 6660 useResizeObserver([appendRef, appendSelectRef], () => { 6661 setTrailingElOffset(); 6662 updateAriaDescription(); 6663 }); 6664 onMounted(() => { 6665 setNativeInputValue(); 6666 updateAriaDescription(); 6667 }); 6668 __expose({ 6669 focus, 6670 select, 6671 updateAriaDescription, 6672 // for ax 6673 handleFormValidate, 6674 // autocomplete 6675 inputRef, 6676 // autocomplete 6677 isDisabled 6678 // autocomplete 6679 }); 6680 return (_ctx, _cache) => { 6681 return openBlock(), createElementBlock("div", { 6682 class: normalizeClass(containerClass.value) 6683 }, [ 6684 _ctx.$slots.prepend ? (openBlock(), createElementBlock("div", { 6685 key: 0,
6686 ref_key: "prependRef", 6687 ref: prependRef, 6688 class: normalizeClass([unref(ns).e("prepend"), unref(ns).is("disabled", unref(isDisabled))]) 6689 }, [ 6690 renderSlot(_ctx.$slots, "prepend") 6691 ], 2)) : createCommentVNode("", true), 6692 _ctx.$slots["prepend-select"] ? (openBlock(), createElementBlock("div", { 6693 key: 1, 6694 ref_key: "prependSelectRef", 6695 ref: prependSelectRef, 6696 class: normalizeClass([unref(ns).e("prepend-select")]) 6697 }, [ 6698 renderSlot(_ctx.$slots, "prepend-select", { disabled: unref(isDisabled) }) 6699 ], 2)) : createCommentVNode("", true), 6700 _ctx.leadIcon ? (openBlock(), createElementBlock("span", { 6701 key: 2, 6702 ref_key: "leadIconRef", 6703 ref: leadIconRef, 6704 class: normalizeClass([unref(ns).e("leading"), unref(ns).is("disabled", unref(isDisabled))]), 6705 onClick: handleLeadIconClick 6706 }, [ 6707 createVNode(unref(ZmIcon), null, { 6708 default: withCtx(() => [ 6709 (openBlock(), createBlock(resolveDynamicComponent(_ctx.leadIcon))) 6710 ]), 6711 _: 1 6712 }) 6713 ], 2)) : createCommentVNode("", true), 6714 createBaseVNode("input", mergeProps({ 6715 id: _ctx.id, 6716 ref_key: "inputRef", 6717 ref: inputRef, 6718 role: unref(role), 6719 tabindex: _ctx.tabindex, 6720 "data-testid": _ctx.testId, 6721 class: inputClass.value, 6722 type: _ctx.showPassword ? passwordVisible.value ? "text" : "password" : _ctx.type, 6723 "aria-disabled": unref(isDisabled) || _ctx.readonly, 6724 readonly: unref(isDisabled) || _ctx.readonly, 6725 "aria-labelledby": unref(ariaLabelledbyResult), 6726 "aria-label": _ctx.ariaLabel, 6727 "aria-required": unref(isRequired), 6728 "aria-describedby": ariaDescribedbyResult.value, 6729 "aria-expanded": unref(isNil)(_ctx.ariaExpanded) ? void 0 : _ctx.ariaExpanded, 6730 "aria-controls": _ctx.ariaControls, 6731 "aria-autocomplete": _ctx.ariaAutocomplete, 6732 "aria-activedescendant": _ctx.ariaActivedescendant, 6733 "aria-invalid": unref(isFormItemErrored) || _ctx.errored ? "true" : void 0, 6734 name: _ctx.name, 6735 maxlength: _ctx.passByMaxLength ? _ctx.maxlength : void 0, 6736 minlength: _ctx.minlength, 6737 placeholder: _ctx.placeholder, 6738 autocomplete: _ctx.autocomplete, 6739 "a11y-ignore": _ctx.a11yIgnore 6740 }, _ctx.extraAttributes, { 6741 onCompositionstart: handleCompositionStart, 6742 onCompositionupdate: handleCompositionUpdate, 6743 onCompositionend: handleCompositionEnd, 6744 onInput: withModifiers(handleInput, ["stop"]), 6745 onFocus: handleFocus, 6746 onBlur: handleBlur, 6747 onChange: handleChange, 6748 onKeydown: handleKeydown 6749 }), null, 16, _hoisted_1$q), 6750 trailingIconVisible.value ? (openBlock(), createElementBlock("span", { 6751 key: 3, 6752 ref_key: "trailingRef", 6753 ref: trailingRef, 6754 class: normalizeClass([unref(ns).e("trailing")]) 6755 }, [ 6756 showClear.value ? (openBlock(), createBlock(unref(ZmInlineIconButton), { 6757 key: 0, 6758 class: normalizeClass(unref(ns).e("clear")), 6759 size: unref(createInlineInputCloseIconButtonSize)(_ctx.size), 6760 "test-id": unref(buildTestId)(_ctx.testId, "-clear"), 6761 "aria-label": unref(t)("basic.clear"), 6762 icon: unref(Close), 6763 onClick: withModifiers(clear, ["stop"]) 6764 }, null, 8, ["class", "size", "test-id", "aria-label", "icon"])) : createCommentVNode("", true), 6765 showEyeIcon.value ? (openBlock(), createBlock(unref(ZmInlineIconButton), { 6766 key: 1, 6767 size: unref(createInlineInputCloseIconButtonSize)(_ctx.size), 6768 class: normalizeClass(unref(ns).e("password")), 6769 "test-id": unref(buildTestId)(_ctx.testId, "-password"), 6770 "aria-label": passwordVisible.value ? unref(t)("input.hidePassword") : unref(t)("input.showPassword"), 6771 icon: PasswordIcon.value, 6772 onClick: withModifiers(handlePasswordVisibility, ["stop"]) 6773 }, null, 8, ["size", "class", "test-id", "aria-label", "icon"])) : createCommentVNode("", true) 6774 ], 2)) : createCommentVNode("", true), 6775 _ctx.$slots.append ? (openBlock(), createElementBlock("div", { 6776 key: 4,
6777 ref_key: "appendRef", 6778 ref: appendRef, 6779 class: normalizeClass([unref(ns).e("append"), unref(ns).is("disabled", unref(isDisabled))]) 6780 }, [ 6781 renderSlot(_ctx.$slots, "append") 6782 ], 2)) : createCommentVNode("", true), 6783 _ctx.$slots["append-select"] ? (openBlock(), createElementBlock("div", { 6784 key: 5, 6785 ref_key: "appendSelectRef", 6786 ref: appendSelectRef, 6787 class: normalizeClass([unref(ns).e("append-select")]) 6788 }, [ 6789 renderSlot(_ctx.$slots, "append-select", { disabled: unref(isDisabled) }) 6790 ], 2)) : createCommentVNode("", true), 6791 isWordLimitVisible.value ? (openBlock(), createElementBlock(Fragment, { key: 6 }, [ 6792 createBaseVNode("div", { 6793 class: normalizeClass([unref(ns).e("count"), unref(ns).is("exceed", inputExceed.value)]) 6794 }, toDisplayString(textLength.value) + " / " + toDisplayString(_ctx.maxlength), 3), 6795 createVNode(unref(ZmVisuallyHidden), { id: unref(wordLimitId) }, { 6796 default: withCtx(() => [ 6797 createTextVNode(toDisplayString(unref(t)("input.limit", { textLength: textLength.value, maxlength: _ctx.maxlength })), 1) 6798 ]), 6799 _: 1 6800 }, 8, ["id"]) 6801 ], 64)) : createCommentVNode("", true), 6802 createVNode(unref(ZmVisuallyHidden), { id: unref(internalDescriptionId) }, { 6803 default: withCtx(() => [ 6804 createTextVNode(toDisplayString(internalDescription.value), 1) 6805 ]), 6806 _: 1 6807 }, 8, ["id"]) 6808 ], 2); 6809 }; 6810 } 6811})); 6812const ZmInput = withInstall(_sfc_main$M); 6813const FlOATING_INJECTION_KEY = Symbol("ZmFloating"); 6814const _export_sfc = (sfc, props) => { 6815 const target = sfc.__vccOpts || sfc; 6816 for (const [key, val] of props) { 6817 target[key] = val; 6818 } 6819 return target; 6820}; 6821const _sfc_main$L = defineComponent({ 6822 name: "ZmFloating", 6823 props: { 6824 supportNestedClickOutside: { 6825 type: Boolean, 6826 default: true 6827 } 6828 }, 6829 setup(props) { 6830 const triggerRef = ref(); 6831 const instanceProxy = getCurrentInstance().proxy; 6832 const injections = inject(FlOATING_INJECTION_KEY, void 0); 6833 const getAncestorTriggerElements = () => { 6834 var _a; 6835 const ret = []; 6836 /* istanbul ignore next @preserve */ 6837 if (!props.supportNestedClickOutside) 6838 return ret; 6839 let parentInstance = injections && injections.instanceProxy; 6840 while (parentInstance) { 6841 ret.push(parentInstance.getTriggerEl()); 6842 parentInstance = (_a = parentInstance.getInjections()) == null ? void 0 : _a.instanceProxy; 6843 } 6844 return ret; 6845 }; 6846 provide(FlOATING_INJECTION_KEY, { 6847 triggerRef, 6848 instanceProxy, 6849 getAncestorTriggerElements 6850 }); 6851 return { 6852 getTriggerEl() { 6853 return triggerRef.value; 6854 }, 6855 updateTriggerEl(newEl) { 6856 triggerRef.value = newEl; 6857 }, 6858 getInjections() { 6859 return injections; 6860 } 6861 }; 6862 } 6863}); 6864function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) { 6865 return renderSlot(_ctx.$slots, "default"); 6866} 6867const Floating = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["render", _sfc_render$6]]); 6868var __defProp$10 = Object.defineProperty; 6869var __getOwnPropSymbols$10 = Object.getOwnPropertySymbols; 6870var __hasOwnProp$10 = Object.prototype.hasOwnProperty; 6871var __propIsEnum$10 = Object.prototype.propertyIsEnumerable; 6872var __defNormalProp$10 = (obj, key, value) => key in obj ? __defProp$10(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 6873var __spreadValues$10 = (a, b) => { 6874 for (var prop in b || (b = {})) 6875 if (__hasOwnProp$10.call(b, prop)) 6876 __defNormalProp$10(a, prop, b[prop]); 6877 if (__getOwnPropSymbols$10) 6878 for (var prop of __getOwnPropSymbols$10(b)) { 6879 if (__propIsEnum$10.call(b, prop)) 6880 __defNormalProp$10(a, prop, b[prop]); 6881 } 6882 return a; 6883}; 6884function findFirstValidChild(node) { 6885 /* istanbul ignore next @preserve */ 6886 if (!node) 6887 return null; 6888 const children = node; 6889 for (const child of children) { 6890 if (isObject(child)) { 6891 switch (child.type) { 6892 case Comment: 6893 case Text: 6894 case "svg": 6895 continue; 6896 case Fragment: 6897 return findFirstValidChild(child.children); 6898 default: 6899 return child; 6900 } 6901 } 6902 } 6903 /* istanbul ignore next @preserve */ 6904 return null; 6905} 6906const mergeSpecialAttrs = (node, attrs = {}) => { 6907 const props = node.props || {}; 6908 let ret = {}; 6909 const key = "aria-describedby"; 6910 const existed = (target, key2) => key2 in target || camelize(key2) in target; 6911 const getValue2 = (target, key2) => target[key2] || target[camelize(key2)]; 6912 const existInProps = existed(props, key); 6913 const existInAttrs = existed(attrs, key); 6914 const propsValue = getValue2(props, key); 6915 const attrsValue = getValue2(attrs, key); 6916 if (existInProps && existInAttrs) { 6917 ret[key] = [attrsValue, propsValue].join(" ").trim(); 6918 } 6919 return ret; 6920}; 6921const findValidTriggerEl = (el) => { 6922 let node = el; 6923 while (node && node.nodeType === 3) { 6924 node = node.nextElementSibling; 6925 } 6926 return node; 6927}; 6928const _sfc_main$K = defineComponent({ 6929 name: "ZmFloatingTrigger", 6930 inheritAttrs: false, 6931 setup(_, { slots, attrs }) { 6932 const { triggerRef } = inject(FlOATING_INJECTION_KEY); 6933 const instance = getCurrentInstance(); 6934 const setTriggerRef = () => { 6935 triggerRef.value = findValidTriggerEl(instance.proxy.$el); 6936 }; 6937 onMounted(() => { 6938 setTriggerRef(); 6939 }); 6940 return () => { 6941 var _a; 6942 const defaultSlots = (_a = slots.default) == null ? void 0 : _a.call(slots); 6943 if (defaultSlots) { 6944 const firstNode = findFirstValidChild(defaultSlots); 6945 /* istanbul ignore next @preserve */ 6946 if (!firstNode) { 6947 debugWarn("ZmFloatingTrigger", "no valid child node found"); 6948 return null; 6949 } 6950 const newProps = __spreadValues$10(__spreadValues$10({}, attrs), mergeSpecialAttrs(firstNode, attrs)); 6951 if ("onUpdate:modelValue" in attrs) { 6952 delete newProps["onUpdate:modelValue"]; 6953 } 6954 return cloneVNode(firstNode, newProps, true); 6955 } 6956 /* istanbul ignore next @preserve */ 6957 return null; 6958 }; 6959 } 6960}); 6961var __defProp$$ = Object.defineProperty; 6962var __defProps$Q = Object.defineProperties; 6963var __getOwnPropDescs$Q = Object.getOwnPropertyDescriptors; 6964var __getOwnPropSymbols$$ = Object.getOwnPropertySymbols; 6965var __hasOwnProp$$ = Object.prototype.hasOwnProperty; 6966var __propIsEnum$$ = Object.prototype.propertyIsEnumerable; 6967var __defNormalProp$$ = (obj, key, value) => key in obj ? __defProp$$(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 6968var __spreadValues$$ = (a, b) => { 6969 for (var prop in b || (b = {})) 6970 if (__hasOwnProp$$.call(b, prop)) 6971 __defNormalProp$$(a, prop, b[prop]); 6972 if (__getOwnPropSymbols$$) 6973 for (var prop of __getOwnPropSymbols$$(b)) { 6974 if (__propIsEnum$$.call(b, prop)) 6975 __defNormalProp$$(a, prop, b[prop]); 6976 } 6977 return a; 6978}; 6979var __spreadProps$Q = (a, b) => __defProps$Q(a, __getOwnPropDescs$Q(b)); 6980var __async$k = (__this, __arguments, generator) => { 6981 return new Promise((resolve2, reject) => { 6982 var fulfilled = (value) => {
6983 try { 6984 step(generator.next(value)); 6985 } catch (e) { 6986 reject(e); 6987 } 6988 }; 6989 var rejected = (value) => { 6990 try { 6991 step(generator.throw(value)); 6992 } catch (e) { 6993 reject(e); 6994 } 6995 }; 6996 var step = (x) => x.done ? resolve2(x.value) : Promise.resolve(x.value).then(fulfilled, rejected); 6997 step((generator = generator.apply(__this, __arguments)).next()); 6998 }); 6999}; 7000const ConnectTriggerElWithContentEl = (triggerEl, contentEl) => { 7001 if (!triggerEl.bindingContentEl) { 7002 triggerEl.bindingContentEl = []; 7003 } 7004 if (!triggerEl.bindingContentEl.includes(contentEl)) { 7005 triggerEl.bindingContentEl.push(contentEl); 7006 } 7007}; 7008const DisconnectTriggerElFromContentEl = (triggerEl, contentEl) => { 7009 const list = triggerEl.bindingContentEl; 7010 /* istanbul ignore next @preserve */ 7011 if (!list) 7012 return; 7013 const index2 = list.indexOf(contentEl); 7014 if (index2 !== -1) { 7015 list.splice(index2, 1); 7016 } 7017}; 7018const flipPlacement = (input) => { 7019 const exactMatch = { left: "right", right: "left" }; 7020 const prefixMatch = { "left-": "right-", "right-": "left-" }; 7021 if (exactMatch[input]) { 7022 return exactMatch[input]; 7023 } 7024 for (const prefix in prefixMatch) { 7025 if (input.startsWith(prefix)) { 7026 return input.replace(prefix, prefixMatch[prefix]); 7027 } 7028 } 7029 return input; 7030}; 7031const useFloating$2 = ({ 7032 middleware, 7033 placementProp, 7034 placement, 7035 strategy, 7036 autoUpdateOptions 7037}) => { 7038 const { triggerRef, getAncestorTriggerElements } = inject(FlOATING_INJECTION_KEY); 7039 const contentRef = ref(); 7040 const x = ref(); 7041 const y = ref(); 7042 const middlewareData = ref({}); 7043 const isRTL = useRTL(); 7044 const states = { 7045 x, 7046 y, 7047 placement, 7048 strategy, 7049 middlewareData 7050 }; 7051 const _internalUpdate = (triggerEl, contentEl) => __async$k(void 0, null, function* () { 7052 let placement2 = unref(placementProp); 7053 if (isRTL.value) { 7054 placement2 = flipPlacement(placement2); 7055 } 7056 const data = yield computePosition(triggerEl, contentEl, { 7057 placement: placement2, 7058 strategy: unref(strategy), 7059 middleware: unref(middleware) 7060 }); 7061 keysOf(states).forEach((key) => { 7062 states[key].value = data[key]; 7063 }); 7064 }); 7065 let cleanup; 7066 let connectedTriggerEls = []; 7067 const _autoUpdate = () => { 7068 const triggerEl = triggerRef.value; 7069 const contentEl = unref(contentRef); 7070 /* istanbul ignore next @preserve */ 7071 if (!triggerEl || !contentEl) 7072 return; 7073 if (triggerEl && !isVisible(triggerEl)) 7074 return; 7075 if (contentEl && !isVisible(contentEl)) 7076 return; 7077 const ancestorTriggerElements = getAncestorTriggerElements(); 7078 connectedTriggerEls = [triggerEl, ...ancestorTriggerElements]; 7079 for (const el of connectedTriggerEls) { 7080 ConnectTriggerElWithContentEl(el, contentEl); 7081 } 7082 return autoUpdate( 7083 triggerEl, 7084 contentEl, 7085 () => { 7086 _internalUpdate(triggerEl, contentEl); 7087 }, 7088 unref(autoUpdateOptions) 7089 ); 7090 }; 7091 const doCleanup = () => { 7092 cleanup && cleanup(); 7093 cleanup = void 0; 7094 const contentEl = unref(contentRef); 7095 if (contentEl) { 7096 for (const el of connectedTriggerEls) { 7097 DisconnectTriggerElFromContentEl(el, contentEl); 7098 } 7099 } 7100 connectedTriggerEls = []; 7101 }; 7102 const withCleanupUpdate = () => { 7103 doCleanup(); 7104 cleanup = _autoUpdate(); 7105 }; 7106 onMounted(() => { 7107 watchEffect(withCleanupUpdate); 7108 }); 7109 onScopeDispose(doCleanup); 7110 return __spreadProps$Q(__spreadValues$$({}, states), { 7111 triggerRef, 7112 contentRef, 7113 update: withCleanupUpdate, 7114 cleanup: doCleanup 7115 }); 7116}; 7117const arrowMiddleware = ({ arrowRef, arrowOptions }) => { 7118 return { 7119 name: "arrow", 7120 options: __spreadProps$Q(__spreadValues$$({}, arrowOptions), { 7121 element: arrowRef 7122 }), 7123 fn(args) { 7124 const arrowEl = unref(arrowRef); 7125 /* istanbul ignore next @preserve */ 7126 if (!arrowEl) 7127 return {}; 7128 return arrow({ 7129 element: arrowEl, 7130 padding: arrowOptions.padding 7131 }).fn(args); 7132 } 7133 }; 7134}; 7135const zIndex = ref(0); 7136const defaultInitialZIndex = 100; 7137const useZIndex = () => { 7138 const currentZIndex = computed(() => defaultInitialZIndex + zIndex.value); 7139 const nextZIndex = () => { 7140 zIndex.value++; 7141 return currentZIndex.value; 7142 }; 7143 return { 7144 currentZIndex, 7145 nextZIndex 7146 }; 7147}; 7148const zIndexForOverlay = ref(0); 7149const defaultInitialOverlayZIndex = 2e3; 7150const useOverlayZIndex = () => { 7151 const currentZIndex = computed(() => defaultInitialOverlayZIndex + zIndexForOverlay.value); 7152 const nextZIndex = () => { 7153 zIndexForOverlay.value++; 7154 return currentZIndex.value; 7155 }; 7156 return { 7157 currentZIndex, 7158 nextZIndex 7159 }; 7160}; 7161const EDITOR_BUBBLE_MENU_INJECTION_KEY = Symbol("ZmEditorBubbleMenu"); 7162const OVERLAY_INJECTION_KEY = Symbol("ZmOverlay"); 7163const DRAWER_INJECTION_KEY = Symbol("ZmDrawer"); 7164var __defProp$_ = Object.defineProperty; 7165var __defProps$P = Object.defineProperties; 7166var __getOwnPropDescs$P = Object.getOwnPropertyDescriptors; 7167var __getOwnPropSymbols$_ = Object.getOwnPropertySymbols; 7168var __hasOwnProp$_ = Object.prototype.hasOwnProperty; 7169var __propIsEnum$_ = Object.prototype.propertyIsEnumerable; 7170var __defNormalProp$_ = (obj, key, value) => key in obj ? __defProp$_(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 7171var __spreadValues$_ = (a, b) => { 7172 for (var prop in b || (b = {})) 7173 if (__hasOwnProp$_.call(b, prop)) 7174 __defNormalProp$_(a, prop, b[prop]); 7175 if (__getOwnPropSymbols$_) 7176 for (var prop of __getOwnPropSymbols$_(b)) { 7177 if (__propIsEnum$_.call(b, prop)) 7178 __defNormalProp$_(a, prop, b[prop]); 7179 } 7180 return a; 7181}; 7182var __spreadProps$P = (a, b) => __defProps$P(a, __getOwnPropDescs$P(b)); 7183const floatingDOMProps = { 7184 placement: { 7185 type: String, 7186 default: "bottom" 7187 }, 7188 strategy: { 7189 type: String, 7190 default: "absolute" 7191 }, 7192 offsetOptions: { 7193 type: [Number, Function, Object], 7194 default: 10 7195 }, 7196 shift: { 7197 type: Boolean, 7198 default: true 7199 }, 7200 shiftOptions: { 7201 type: Object, 7202 default() { 7203 return { 7204 limiter: limitShift() 7205 }; 7206 } 7207 }, 7208 flip: { 7209 type: Boolean, 7210 default: true 7211 }, 7212 flipOptions: { 7213 type: Object, 7214 default() { 7215 return {}; 7216 } 7217 }, 7218 arrow: Boolean, 7219 arrowOptions: { 7220 type: Object, 7221 default() { 7222 return { 7223 padding: 16 7224 }; 7225 } 7226 }, 7227 zIndex: Number, 7228 size: Boolean, 7229 sizeOptions: { 7230 type: Object, 7231 default() { 7232 return {}; 7233 } 7234 }, 7235 hide: Boolean, 7236 hideOptions: { 7237 type: Object, 7238 default() { 7239 return {}; 7240 } 7241 }, 7242 borderRadius: [String, Number] 7243}; 7244const floatingContentProps = __spreadProps$P(__spreadValues$_({}, floatingDOMProps), { 7245 visible: Boolean, 7246 role: String, 7247 testId: String, 7248 tag: { 7249 type: String, 7250 default: "div" 7251 }, 7252 autoUpdateOptions: { 7253 type: Object, 7254 default() { 7255 return {}; 7256 } 7257 }, 7258 transparent: Boolean, 7259 supportLazyRenderContent: Boolean 7260}); 7261const floatingContentEmits = {
7262 mouseenter: (evt) => evt instanceof MouseEvent, 7263 mouseleave: (evt) => evt instanceof MouseEvent, 7264 keydown: (evt) => evt instanceof KeyboardEvent, 7265 focus: () => true, 7266 blur: () => true 7267}; 7268const _sfc_main$J = /* @__PURE__ */ defineComponent(__spreadProps$P(__spreadValues$_({}, { 7269 name: "ZmFloatingContent" 7270}), { 7271 __name: "floating-content", 7272 props: floatingContentProps, 7273 emits: floatingContentEmits, 7274 setup(__props, { expose: __expose, emit: __emit }) { 7275 const props = __props; 7276 const emit = __emit; 7277 const overlayContext = inject(OVERLAY_INJECTION_KEY, void 0); 7278 const drawerContext = inject(DRAWER_INJECTION_KEY, void 0); 7279 const bubbleMenuContext = inject(EDITOR_BUBBLE_MENU_INJECTION_KEY, void 0); 7280 const renderContentImmediately = ref(!props.supportLazyRenderContent); 7281 const { placement, autoUpdateOptions } = props; 7282 const ns = useNamespace("floating"); 7283 const placementProp = ref(placement); 7284 const finalPlacement = ref(placement); 7285 const side = computed(() => { 7286 var _a; 7287 return (_a = finalPlacement.value) == null ? void 0 : _a.split("-")[0]; 7288 }); 7289 const autoUpdateOptionsProp = ref(autoUpdateOptions); 7290 const strategy = ref(props.strategy); 7291 const arrowRef = ref(); 7292 const { contentRef, middlewareData, x, y, update, cleanup } = useFloating$2({ 7293 placement: finalPlacement, 7294 placementProp, 7295 strategy, 7296 autoUpdateOptions: autoUpdateOptionsProp, 7297 middleware: computed(() => { 7298 const { 7299 offsetOptions, 7300 shift: shift$1, 7301 shiftOptions, 7302 arrow: arrow2, 7303 arrowOptions, 7304 flip: flip$1, 7305 flipOptions, 7306 size: size$1, 7307 sizeOptions, 7308 hide: hide$1, 7309 hideOptions 7310 } = props; 7311 const middleware = [offset(offsetOptions)]; 7312 if (shift$1) { 7313 middleware.push(shift(shiftOptions)); 7314 } 7315 if (arrow2) { 7316 middleware.push( 7317 arrowMiddleware({ 7318 arrowRef, 7319 arrowOptions 7320 }) 7321 ); 7322 } 7323 if (flip$1) { 7324 middleware.push(flip(flipOptions)); 7325 } 7326 if (size$1) { 7327 middleware.push(size(sizeOptions)); 7328 } 7329 if (hide$1) { 7330 middleware.push(hide(hideOptions)); 7331 } 7332 return middleware; 7333 }) 7334 }); 7335 function focus() { 7336 var _a; 7337 (_a = contentRef.value) == null ? void 0 : _a.focus; 7338 } 7339 const zIndexResult = ref(); 7340 const { nextZIndex } = useZIndex(); 7341 const createZIndex = () => { 7342 const { zIndex: zIndex2 } = props; 7343 /* istanbul ignore next @preserve */ 7344 if (!isNil(zIndex2)) { 7345 zIndexResult.value = zIndex2; 7346 } else if (bubbleMenuContext) { 7347 zIndexResult.value = bubbleMenuContext.zIndex.value + 1; 7348 watch(bubbleMenuContext.zIndex, (newV) => { 7349 zIndexResult.value = newV + 1; 7350 }); 7351 } else if (overlayContext) { 7352 zIndexResult.value = overlayContext.zIndex.value + 1; 7353 watch(overlayContext.zIndex, (newV) => { 7354 zIndexResult.value = newV + 1; 7355 }); 7356 } else if (drawerContext) { 7357 zIndexResult.value = drawerContext.zIndex.value + 1; 7358 watch(drawerContext.zIndex, (newV) => { 7359 zIndexResult.value = newV + 1; 7360 }); 7361 } else { 7362 zIndexResult.value = nextZIndex(); 7363 } 7364 }; 7365 createZIndex(); 7366 watch( 7367 () => props.visible, 7368 (newV) => { 7369 if (newV) { 7370 if (!renderContentImmediately.value) { 7371 renderContentImmediately.value = true; 7372 } 7373 if (isNil(props.zIndex) && !overlayContext && !drawerContext && !bubbleMenuContext) { 7374 zIndexResult.value = nextZIndex(); 7375 } 7376 nextTick(() => { 7377 update(); 7378 }); 7379 } else { 7380 cleanup(); 7381 } 7382 }, 7383 { 7384 immediate: true 7385 } 7386 ); 7387 const contentStyle = computed(() => { 7388 var _a, _b, _c; 7389 const ret = { 7390 position: unref(strategy), 7391 top: `${(_a = unref(y)) != null ? _a : 0}px`, 7392 left: `${(_b = unref(x)) != null ? _b : 0}px`, 7393 zIndex: zIndexResult.value 7394 }; 7395 if (!isNil(props.borderRadius)) { 7396 ret.borderRadius = typeof props.borderRadius === "number" ? `${props.borderRadius}px` : props.borderRadius; 7397 } 7398 if ((_c = middlewareData.value) == null ? void 0 : _c.hide) { 7399 ret.visibility = middlewareData.value.hide.referenceHidden ? "hidden" : "visible"; 7400 } 7401 return ret; 7402 }); 7403 const arrowStyle = computed(() => { 7404 var _a, _b; 7405 const { arrow: arrow2 } = unref(middlewareData); 7406 let { x: x2, y: y2 } = arrow2 != null ? arrow2 : {}; 7407 const staticSide = { 7408 top: "bottom", 7409 right: "left", 7410 bottom: "top", 7411 left: "right" 7412 }[unref(side)]; 7413 let ret = { 7414 left: !isNil(x2) ? `${x2}px` : "", 7415 top: !isNil(y2) ? `${y2}px` : "", 7416 [staticSide]: `${-((_b = (_a = unref(arrowRef)) == null ? void 0 : _a.offsetHeight) != null ? _b : 0) / 2}px` 7417 // 1px is content border size 7418 }; 7419 return ret; 7420 }); 7421 const containerClass = computed(() => { 7422 const { transparent } = props; 7423 return [ns.b(), ns.is("transparent", transparent)]; 7424 }); 7425 const onMouseEnter = (e) => emit("mouseenter", e); 7426 const onMouseLeave = (e) => emit("mouseleave", e); 7427 const onKeydown = (e) => emit("keydown", e); 7428 const onFocus = () => emit("focus"); 7429 const onBlur = () => emit("blur"); 7430 const resetXY = () => { 7431 x.value = 0; 7432 y.value = 0; 7433 }; 7434 __expose({ 7435 focus, 7436 resetXY, 7437 contentRef 7438 // for backfill menu 7439 }); 7440 return (_ctx, _cache) => { 7441 return openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), { 7442 ref_key: "contentRef", 7443 ref: contentRef, 7444 role: _ctx.role, 7445 "data-testid": _ctx.testId, 7446 style: normalizeStyle(contentStyle.value), 7447 "data-side": side.value, 7448 class: normalizeClass(containerClass.value), 7449 tabindex: "-1", 7450 onMouseenter: onMouseEnter, 7451 onMouseleave: onMouseLeave, 7452 onKeydown, 7453 onBlur, 7454 onFocus, 7455 onClick: _cache[0] || (_cache[0] = withModifiers(() => { 7456 }, ["stop"])) 7457 }, { 7458 default: withCtx(() => [ 7459 renderContentImmediately.value ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true), 7460 _ctx.arrow && renderContentImmediately.value ? (openBlock(), createElementBlock("span", { 7461 key: 1, 7462 ref_key: "arrowRef", 7463 ref: arrowRef, 7464 style: normalizeStyle(arrowStyle.value), 7465 class: normalizeClass(unref(ns).e("arrow")) 7466 }, null, 6)) : createCommentVNode("", true) 7467 ]), 7468 _: 3 7469 }, 40, ["role", "data-testid", "style", "data-side", "class"]); 7470 }; 7471 } 7472})); 7473const ZmFloating = withInstall(Floating, { 7474 FloatingTrigger: _sfc_main$K, 7475 FloatingContent: _sfc_main$J 7476}); 7477const ZmFloatingTrigger = _sfc_main$K; 7478const ZmFloatingContent = _sfc_main$J; 7479function useTeleportedContextClass(props) { 7480 const ZmContext2 = inject(CONTEXT_INJECTION_KEY, void 0); 7481 const ZmThemeProvider2 = inject(THEME_PROVIDER_INJECTION_KEY, void 0); 7482 return computed(() => { 7483 let ret = ""; 7484 if (ZmContext2) { 7485 if (ZmContext2.useSystemFonts.value && unref(props.teleported)) { 7486 ret = getContextCls(); 7487 } 7488 } else { 7489 ret = ""; 7490 } 7491 if (ZmThemeProvider2) { 7492 if (unref(props.teleported)) { 7493 ret += ` ${ZmThemeProvider2.getThemeClass()}`; 7494 } 7495 } 7496 return ret; 7497 }); 7498} 7499var __defProp$Z = Object.defineProperty; 7500var __defProps$O = Object.defineProperties; 7501var __getOwnPropDescs$O = Object.getOwnPropertyDescriptors; 7502var __getOwnPropSymbols$Z = Object.getOwnPropertySymbols; 7503var __hasOwnProp$Z = Object.prototype.hasOwnProperty; 7504var __propIsEnum$Z = Object.prototype.propertyIsEnumerable; 7505var __defNormalProp$Z = (obj, key, value) => key in obj ? __defProp$Z(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 7506var __spreadValues$Z = (a, b) => { 7507 for (var prop in b || (b = {})) 7508 if (__hasOwnProp$Z.call(b, prop)) 7509 __defNormalProp$Z(a, prop, b[prop]); 7510 if (__getOwnPropSymbols$Z) 7511 for (var prop of __getOwnPropSymbols$Z(b)) { 7512 if (__propIsEnum$Z.call(b, prop)) 7513 __defNormalProp$Z(a, prop, b[prop]); 7514 } 7515 return a; 7516}; 7517var __spreadProps$O = (a, b) => __defProps$O(a, __getOwnPropDescs$O(b)); 7518var __async$j = (__this, __arguments, generator) => { 7519 return new Promise((resolve2, reject) => { 7520 var fulfilled = (value) => {
7521 try { 7522 step(generator.next(value)); 7523 } catch (e) { 7524 reject(e); 7525 } 7526 }; 7527 var rejected = (value) => { 7528 try { 7529 step(generator.throw(value)); 7530 } catch (e) { 7531 reject(e); 7532 } 7533 }; 7534 var step = (x) => x.done ? resolve2(x.value) : Promise.resolve(x.value).then(fulfilled, rejected); 7535 step((generator = generator.apply(__this, __arguments)).next()); 7536 }); 7537}; 7538const tooltipProps = { 7539 floatingOptions: { 7540 type: Object, 7541 default() { 7542 return {}; 7543 } 7544 }, 7545 content: { 7546 type: String, 7547 default: "" 7548 }, 7549 placement: { 7550 type: String 7551 }, 7552 teleported: { 7553 type: Boolean, 7554 default: true 7555 }, 7556 disabled: Boolean, 7557 modelValue: Boolean, 7558 zIndex: Number, 7559 testId: String, 7560 floatingContentClass: String, 7561 disallowScreenReader: Boolean, 7562 disallowLearnAbout: Boolean, 7563 showWhenHoverContent: { 7564 type: Boolean, 7565 default: true 7566 }, 7567 isMutuallyExclusive: Boolean, 7568 beforeBlurHandler: Function, 7569 // for internal component 7570 transitionName: { 7571 type: String, 7572 default() { 7573 return `${getNamespace()}-tooltip`; 7574 } 7575 }, 7576 hideTimeout: { 7577 type: Number, 7578 default: 100 7579 }, 7580 openTimeout: { 7581 type: Number, 7582 default: 100 7583 }, 7584 forceAddLearnMore: Boolean 7585 // for internal component 7586}; 7587const _sfc_main$I = /* @__PURE__ */ defineComponent(__spreadProps$O(__spreadValues$Z({}, { 7588 name: "ZmTooltip", 7589 inheritAttrs: false 7590}), { 7591 __name: "tooltip", 7592 props: tooltipProps, 7593 emits: ["show", "hide"], 7594 setup(__props, { expose: __expose, emit: __emit }) { 7595 const props = __props; 7596 const emit = __emit; 7597 const attrs = useAttrs(); 7598 const ns = useNamespace("tooltip"); 7599 const { t } = useLocale(messages$a); 7600 const hasAriaLabelledbyTrigger = ref(false); 7601 const floatingContent = ref(); 7602 const floatingRef = ref(); 7603 const teleportedContextClass = useTeleportedContextClass(props); 7604 const processEventListener = (el, mutation, needProcessMouseEvents = true) => { 7605 const cachedVueEvents = el._vei || getSymbolVEI(el) || {}; 7606 if (mutation === "remove") { 7607 el.removeEventListener("keydown", cachedVueEvents["onKeydown"] || onKeydown); 7608 el.removeEventListener("focus", cachedVueEvents["onFocus"] || onFocus); 7609 el.removeEventListener("blur", cachedVueEvents["onBlur"] || onBlur); 7610 if (needProcessMouseEvents) { 7611 el.removeEventListener("mouseenter", cachedVueEvents["onMouseenter"] || onTryOpen); 7612 el.removeEventListener("mouseleave", cachedVueEvents["onMouseleave"] || onTryClose); 7613 } 7614 } else { 7615 el.addEventListener("focus", onFocus); 7616 el.addEventListener("blur", onBlur); 7617 el.addEventListener("keydown", onKeydown); 7618 if (needProcessMouseEvents) { 7619 el.addEventListener("mouseenter", onTryOpen); 7620 el.addEventListener("mouseleave", onTryClose); 7621 } 7622 } 7623 }; 7624 const updateTriggerRef = (el) => { 7625 if (el && floatingRef.value) { 7626 const oldTriggerEl = floatingRef.value.getTriggerEl(); 7627 let oldAriaDescribedby = null; 7628 if (oldTriggerEl) { 7629 processEventListener(oldTriggerEl, "remove", !isZmCheckboxOrRadioOrToggle(oldTriggerEl)); 7630 oldAriaDescribedby = oldTriggerEl.getAttribute("aria-describedby"); 7631 oldTriggerEl.removeAttribute("aria-describedby"); 7632 } 7633 processEventListener(el, "add", oldTriggerEl && !isZmCheckboxOrRadioOrToggle(oldTriggerEl)); 7634 floatingRef.value.updateTriggerEl(el); 7635 if (oldAriaDescribedby) { 7636 el.setAttribute("aria-describedby", oldAriaDescribedby); 7637 } 7638 } 7639 }; 7640 const id = useId(); 7641 const learnMoreId = useId(); 7642 const opened = ref(false); 7643 const controlled = isFunction(attrs["onUpdate:modelValue"]); 7644 const shouldShow = computed(() => { 7645 return !props.disabled && (controlled && props.modelValue || unref(opened)); 7646 }); 7647 provide(TOOLTIP_INJECTION_KEY, { 7648 updateTriggerRef 7649 }); 7650 const ariaDescribedby = computed(() => { 7651 return !props.disallowScreenReader && !props.disabled ? id.value : void 0; 7652 }); 7653 const shouldRender = ref(props.modelValue); 7654 const floatingProps = computed(() => { 7655 const { floatingOptions, placement } = props; 7656 return __spreadValues$Z({ 7657 placement, 7658 offsetOptions: 8 7659 }, floatingOptions); 7660 }); 7661 const floatingContentContainerClass = computed(() => { 7662 return [props.floatingContentClass, ns.is("tooltip")]; 7663 }); 7664 const floatingContentTooltipClass = computed(() => { 7665 return [ns.b()]; 7666 }); 7667 watch( 7668 () => props.modelValue, 7669 (newVal) => __async$j(this, null, function* () { 7670 var _a, _b; 7671 if (newVal) { 7672 if (!props.disabled) { 7673 ensureRenderOnce(); 7674 } 7675 yield nextTick(); 7676 if (((_a = floatingContent.value) == null ? void 0 : _a.$el) && !props.disallowScreenReader) { 7677 announce(floatingContent.value.$el.textContent); 7678 } 7679 } else { 7680 if (((_b = floatingContent.value) == null ? void 0 : _b.$el) && !props.disallowScreenReader) { 7681 destroyAnnouncer(); 7682 } 7683 } 7684 }) 7685 ); 7686 const stopWhenControlledOrDisabled = () => { 7687 if (controlled || props.disabled) { 7688 return true; 7689 } 7690 }; 7691 let debounceOpen = debounce(() => { 7692 open(); 7693 }, props.openTimeout); 7694 /* istanbul ignore next @preserve */ 7695 let debounceClose = debounce(() => { 7696 close(); 7697 }, props.hideTimeout); 7698 const onTryOpen = composeEventHandlers(stopWhenControlledOrDisabled, () => { 7699 debounceClose.cancel(); 7700 debounceClose = debounce(() => { 7701 close(); 7702 }, props.hideTimeout); 7703 debounceOpen(); 7704 }); 7705 const onTryClose = composeEventHandlers(stopWhenControlledOrDisabled, () => { 7706 debounceOpen.cancel(); 7707 debounceOpen = debounce(() => { 7708 open(); 7709 }, props.openTimeout); 7710 debounceClose(); 7711 }); 7712 const onContentMouseEnter = (event) => { 7713 if (props.showWhenHoverContent) { 7714 onTryOpen(event); 7715 } 7716 }; 7717 const onContentMouseLeave = (event) => { 7718 if (props.showWhenHoverContent) { 7719 onTryClose(event); 7720 } 7721 }; 7722 const onKeydown = composeEventHandlers(stopWhenControlledOrDisabled, (event) => { 7723 if ([EVENT_CODE.esc, EVENT_CODE.tab].includes(event.code)) { 7724 if (shouldShow.value) { 7725 close(); 7726 } 7727 } 7728 }); 7729 const onBlur = composeEventHandlers(stopWhenControlledOrDisabled, (event) => { 7730 var _a; 7731 if ((_a = props.beforeBlurHandler) == null ? void 0 : _a.call(props, event)) 7732 return; 7733 close(); 7734 }); 7735 const onFocus = composeEventHandlers(stopWhenControlledOrDisabled, () => { 7736 if (isPerformingKeyboardAction()) { 7737 open(); 7738 } 7739 }); 7740 const close = () => { 7741 opened.value = false;
7742 }; 7743 const open = () => { 7744 ensureRenderOnce(); 7745 if (props.isMutuallyExclusive) { 7746 Array.from(mutuallyExclusiveTooltips).forEach((instance) => { 7747 instance.close(); 7748 }); 7749 } 7750 opened.value = true; 7751 }; 7752 const setAriaLabel = (isDisabled, firstTime = false) => { 7753 var _a; 7754 let triggerEl = (_a = floatingRef.value) == null ? void 0 : _a.getTriggerEl(); 7755 if (triggerEl) { 7756 if (hasClass(triggerEl, `${ns.namespace}-input`)) { 7757 triggerEl = triggerEl.querySelector(`.${ns.namespace}-input__inner`); 7758 } else if (hasClass(triggerEl, `${ns.namespace}-textarea`)) { 7759 triggerEl = triggerEl.querySelector(`.${ns.namespace}-textarea__inner`); 7760 } 7761 } 7762 if (triggerEl && (!props.disallowScreenReader && !props.disallowLearnAbout || props.forceAddLearnMore)) { 7763 const originalAriaLabel = triggerEl.getAttribute("aria-label"); 7764 const originalAriaLabelledby = triggerEl.getAttribute("aria-labelledby"); 7765 if (!isDisabled) { 7766 if (originalAriaLabelledby) { 7767 hasAriaLabelledbyTrigger.value = true; 7768 triggerEl.setAttribute("original-aria-labelledby", originalAriaLabelledby); 7769 triggerEl.setAttribute("aria-labelledby", `${learnMoreId.value} ${originalAriaLabelledby}`); 7770 } else { 7771 if (originalAriaLabel) { 7772 triggerEl.setAttribute("original-aria-label", originalAriaLabel); 7773 } 7774 triggerEl.setAttribute( 7775 "aria-label", 7776 t("a11y.learnMore", { 7777 label: triggerEl.getAttribute("aria-label") || triggerEl.textContent || "" 7778 }) 7779 ); 7780 } 7781 } else { 7782 if (triggerEl.hasAttribute("original-aria-labelledby")) { 7783 hasAriaLabelledbyTrigger.value = false; 7784 triggerEl.setAttribute( 7785 "aria-labelledby", 7786 triggerEl.getAttribute("original-aria-labelledby") 7787 ); 7788 } else if (triggerEl.hasAttribute("original-aria-label")) { 7789 triggerEl.setAttribute("aria-label", triggerEl.getAttribute("original-aria-label")); 7790 } else if (triggerEl.hasAttribute("aria-label") && !firstTime) { 7791 triggerEl.removeAttribute("aria-label"); 7792 } 7793 } 7794 } 7795 }; 7796 watch( 7797 () => props.disabled, 7798 (newVal) => { 7799 setAriaLabel(newVal); 7800 if (newVal && opened.value) { 7801 opened.value = false; 7802 } 7803 } 7804 ); 7805 const instanceProxy = { 7806 close 7807 }; 7808 const ensureRenderOnce = () => { 7809 if (!shouldRender.value) { 7810 shouldRender.value = true; 7811 } 7812 }; 7813 const addTooltipToMutuallyExclusiveStore = () => { 7814 if (props.isMutuallyExclusive) { 7815 mutuallyExclusiveTooltips.add(instanceProxy); 7816 } 7817 }; 7818 const removeTooltipFromMutuallyExclusiveStore = () => { 7819 if (mutuallyExclusiveTooltips.has(instanceProxy)) { 7820 mutuallyExclusiveTooltips.delete(instanceProxy); 7821 } 7822 }; 7823 onMounted(() => { 7824 setAriaLabel(props.disabled, true); 7825 addTooltipToMutuallyExclusiveStore(); 7826 }); 7827 onBeforeUnmount(() => { 7828 var _a; 7829 removeTooltipFromMutuallyExclusiveStore(); 7830 try { 7831 const triggerEl = (_a = floatingRef.value) == null ? void 0 : _a.getTriggerEl(); 7832 if (triggerEl) { 7833 processEventListener(triggerEl, "remove", !isZmCheckboxOrRadioOrToggle(triggerEl)); 7834 triggerEl.removeAttribute("aria-describedby"); 7835 } 7836 } catch (e) { 7837 } 7838 debounceOpen.cancel(); 7839 debounceClose.cancel(); 7840 shouldRender.value = false; 7841 }); 7842 const onMenuAfterOpened = () => { 7843 emit("show"); 7844 }; 7845 const onMenuAfterClosed = () => { 7846 var _a; 7847 emit("hide"); 7848 (_a = floatingContent.value) == null ? void 0 : _a.resetXY(); 7849 }; 7850 __expose({ 7851 updateTriggerRef, 7852 close 7853 // used by select-option 7854 }); 7855 return (_ctx, _cache) => { 7856 return openBlock(), createBlock(unref(ZmFloating), { 7857 ref_key: "floatingRef", 7858 ref: floatingRef 7859 }, { 7860 default: withCtx(() => [ 7861 (openBlock(), createBlock(Teleport, { to: "body" }, [ 7862 hasAriaLabelledbyTrigger.value ? (openBlock(), createBlock(unref(ZmVisuallyHidden), { 7863 key: 0, 7864 id: unref(learnMoreId), 7865 "aria-hidden": "false" 7866 }, { 7867 default: withCtx(() => [ 7868 createTextVNode(toDisplayString(unref(t)("a11y.learnMore", { label: "" })), 1) 7869 ]), 7870 _: 1 7871 }, 8, ["id"])) : createCommentVNode("", true) 7872 ])), 7873 createVNode(unref(ZmFloatingTrigger), mergeProps({ 7874 class: unref(ns).e("trigger"), 7875 "aria-describedby": ariaDescribedby.value 7876 }, _ctx.$attrs, { 7877 onMouseenter: unref(onTryOpen), 7878 onMouseleave: unref(onTryClose), 7879 onKeydown: unref(onKeydown), 7880 onBlur: unref(onBlur), 7881 onFocus: unref(onFocus) 7882 }), { 7883 default: withCtx(() => [ 7884 renderSlot(_ctx.$slots, "default") 7885 ]), 7886 _: 3 7887 }, 16, ["class", "aria-describedby", "onMouseenter", "onMouseleave", "onKeydown", "onBlur", "onFocus"]), 7888 shouldRender.value ? (openBlock(), createBlock(Teleport, { 7889 key: 0, 7890 to: "body", 7891 disabled: !_ctx.teleported 7892 }, [ 7893 createVNode(Transition, { 7894 name: _ctx.transitionName, 7895 appear: "", 7896 onAfterEnter: onMenuAfterOpened, 7897 onAfterLeave: onMenuAfterClosed 7898 }, { 7899 default: withCtx(() => [ 7900 withDirectives(createVNode(unref(ZmFloatingContent), mergeProps({ 7901 id: unref(id), 7902 ref_key: "floatingContent", 7903 ref: floatingContent, 7904 visible: shouldShow.value, 7905 "test-id": _ctx.testId 7906 }, floatingProps.value, { 7907 "z-index": _ctx.zIndex, 7908 class: [floatingContentContainerClass.value, unref(teleportedContextClass)], 7909 "aria-hidden": "true", 7910 onMouseenter: onContentMouseEnter, 7911 onMouseleave: onContentMouseLeave 7912 }), { 7913 default: withCtx(() => [ 7914 createBaseVNode("div", { 7915 class: normalizeClass(floatingContentTooltipClass.value) 7916 }, [ 7917 renderSlot(_ctx.$slots, "content", {}, () => [ 7918 createTextVNode(toDisplayString(_ctx.content), 1) 7919 ]) 7920 ], 2) 7921 ]), 7922 _: 3 7923 }, 16, ["id", "visible", "test-id", "z-index", "class"]), [ 7924 [vShow, shouldShow.value] 7925 ]) 7926 ]), 7927 _: 3 7928 }, 8, ["name"]) 7929 ], 8, ["disabled"])) : createCommentVNode("", true) 7930 ]), 7931 _: 3 7932 }, 512); 7933 }; 7934 } 7935})); 7936const ZmTooltip = withInstall(_sfc_main$I); 7937const messages$8 = { 7938 "en-US": { 7939 "select": { 7940 "noMatch": "No matching data", 7941 "noData": "No data", 7942 "limitQuery": "Please enter at least {count} character(s)", 7943 "createLabel": 'Create "{label}"' 7944 } 7945 }, 7946 "de-DE": { 7947 "select": { 7948 "noData": "Keine Daten", 7949 "limitQuery": "Geben Sie mindestens {count} Zeichen ein", 7950 "noMatch": "Keine übereinstimmenden Daten", 7951 "createLabel": "{label} erstellen" 7952 } 7953 }, 7954 "es-ES": { 7955 "select": { 7956 "noData": "Sin datos", 7957 "limitQuery": "Introduzca al menos {count} caracter(es)", 7958 "noMatch": "No se encontraron datos", 7959 "createLabel": 'Crear "{label}"' 7960 } 7961 }, 7962 "fr-FR": { 7963 "select": { 7964 "noData": "Aucune donnée", 7965 "limitQuery": "Veuillez saisir au moins {count} caractère(s)", 7966 "noMatch": "Aucune donnée correspondante", 7967 "createLabel": 'Créer "{label}"' 7968 } 7969 }, 7970 "id-ID": { 7971 "select": { 7972 "noData": "Tidak ada data", 7973 "limitQuery": "Masukkan setidaknya {count} karakter", 7974 "noMatch": "Tidak ada data yang cocok", 7975 "createLabel": 'Buat "{label}"' 7976 } 7977 }, 7978 "it-IT": { 7979 "select": { 7980 "noData": "Nessun dato",
7981 "limitQuery": "Inserisci almeno {count} caratteri", 7982 "noMatch": "Nessun dato corrispondente", 7983 "createLabel": "Crea â{label}â" 7984 } 7985 }, 7986 "jp-JP": { 7987 "select": { 7988 "noData": "ãã¼ã¿ãªã", 7989 "limitQuery": "å°ãªãã¨ã {count} æåãå ¥åãã¦ãã ãã", 7990 "noMatch": "ä¸è´ãããã¼ã¿ã¯ããã¾ãã", 7991 "createLabel": "ã{label}ãã使ãã¾ã" 7992 } 7993 }, 7994 "ko-KO": { 7995 "select": { 7996 "noData": "ë°ì´í° ìì", 7997 "limitQuery": "{count}ì ì´ì ì ë ¥íì¸ì", 7998 "noMatch": "ì¼ì¹íë ë°ì´í° ìì", 7999 "createLabel": "{label} ë§ë¤ê¸°" 8000 } 8001 }, 8002 "nl-NL": { 8003 "select": { 8004 "noData": "Geen gegevens", 8005 "limitQuery": "Voer minstens {count} teken(s) in", 8006 "noMatch": "Geen overeenkomende gegevens", 8007 "createLabel": "{label} maken" 8008 } 8009 }, 8010 "pl-PL": { 8011 "select": { 8012 "noData": "Brak danych", 8013 "limitQuery": "Wprowadź minimalnÄ liczbÄ znaków ({count})", 8014 "noMatch": "Brak pasujÄ cych danych", 8015 "createLabel": "Utwórz â{label}â" 8016 } 8017 }, 8018 "pt-PT": { 8019 "select": { 8020 "noData": "Sem dados", 8021 "limitQuery": "Insira pelo menos {count} caractere(s)", 8022 "noMatch": "Sem dados correspondentes", 8023 "createLabel": 'Criar "{label}"' 8024 } 8025 }, 8026 "ru-RU": { 8027 "select": { 8028 "noData": "ÐÐµÑ Ð´Ð°Ð½Ð½ÑÑ ", 8029 "limitQuery": "ÐинималÑное колиÑеÑÑво Ñимволов: {count}", 8030 "noMatch": "ÐÐµÑ Ð¿Ð¾Ð´Ñ Ð¾Ð´ÑÑÐ¸Ñ Ð´Ð°Ð½Ð½ÑÑ ", 8031 "createLabel": "СоздаÑÑ: {label}" 8032 } 8033 }, 8034 "sv-SE": { 8035 "select": { 8036 "noData": "Inga data", 8037 "limitQuery": "Ange minst {count} tecken", 8038 "noMatch": "Inga matchande data", 8039 "createLabel": 'Skapa "{label}"' 8040 } 8041 }, 8042 "tr-TR": { 8043 "select": { 8044 "noData": "Veri yok", 8045 "limitQuery": "Lütfen en az {count} karakter girin", 8046 "noMatch": "EÅleÅen veri yok", 8047 "createLabel": "{label} oluÅtur" 8048 } 8049 }, 8050 "vi-VN": { 8051 "select": { 8052 "noData": "Không có dữ liá»u", 8053 "limitQuery": "Vui lòng nháºp Ãt nhất {count} ký tá»±", 8054 "noMatch": "Không có dữ liá»u phù hợp", 8055 "createLabel": "Tạo â{label}â" 8056 } 8057 }, 8058 "zh-CN": { 8059 "select": { 8060 "noData": "æ æ°æ®", 8061 "limitQuery": "请è¾å ¥è³å°{count}个å符", 8062 "noMatch": "æ å¹é æ°æ®", 8063 "createLabel": "å建â{label}â" 8064 } 8065 }, 8066 "zh-TW": { 8067 "select": { 8068 "noData": "ç¡è³æ", 8069 "limitQuery": "è«è³å°è¼¸å ¥{count}ååå ", 8070 "noMatch": "ç¡ç¸ç¬¦è³æ", 8071 "createLabel": "建ç«ã{label}ã" 8072 } 8073 } 8074}; 8075const nodeList = /* @__PURE__ */ new Map(); 8076let startClick; 8077if (isClient) { 8078 document.addEventListener("mousedown", (e) => startClick = e); 8079 document.addEventListener("mouseup", (e) => { 8080 for (const handlers of nodeList.values()) { 8081 for (const { documentHandler } of handlers) { 8082 documentHandler(e, startClick); 8083 } 8084 } 8085 startClick = void 0; 8086 }); 8087 window.addEventListener("blur", () => { 8088 for (const handlers of nodeList.values()) { 8089 for (const { iframeClickHandler } of handlers) { 8090 iframeClickHandler(); 8091 } 8092 } 8093 }); 8094} 8095function createDocumentHandler(el, binding) { 8096 let excludes = []; 8097 let disabled = false; 8098 /* istanbul ignore next @preserve */ 8099 if (Array.isArray(binding.arg)) { 8100 excludes = binding.arg; 8101 } else if (isBoolean(binding.arg)) { 8102 disabled = binding.arg; 8103 } else if (isElement(binding.arg)) { 8104 excludes.push(binding.arg); 8105 } 8106 return function(mouseup, mousedown) { 8107 if (disabled) 8108 return; 8109 const mouseUpTarget = mouseup.target; 8110 const mouseDownTarget = mousedown == null ? void 0 : mousedown.target; 8111 const isBound = !binding || !binding.instance; 8112 const isTargetExists = !mouseUpTarget || !mouseDownTarget; 8113 const isContainedByEl = el.contains(mouseUpTarget) || el.contains(mouseDownTarget); 8114 const floatingContentEl = el.bindingContentEl; 8115 const isFloatingContentTriggeredByEl = floatingContentEl && (floatingContentEl.some((el2) => el2.contains(mouseUpTarget)) || floatingContentEl.some((el2) => el2.contains(mouseDownTarget))); 8116 const isSelf = el === mouseUpTarget;
8117 const isTargetExcluded = excludes.length && excludes.some((item) => item == null ? void 0 : item.contains(mouseUpTarget)) || excludes.length && excludes.includes(mouseDownTarget); 8118 if (isBound || isTargetExists || isContainedByEl || isSelf || isTargetExcluded || isFloatingContentTriggeredByEl) { 8119 return; 8120 } 8121 binding.value(mouseup, mousedown); 8122 }; 8123} 8124function createIframeClickHandler(el, binding) { 8125 return function() { 8126 var _a; 8127 if (((_a = document.activeElement) == null ? void 0 : _a.tagName) === "IFRAME") { 8128 const floatingContentEl = el.bindingContentEl; 8129 const isFloatingContentTriggeredByEl = floatingContentEl && floatingContentEl.some((el2) => el2.contains(document.activeElement)); 8130 !isFloatingContentTriggeredByEl && binding.value(); 8131 } 8132 }; 8133} 8134const ClickOutside = { 8135 beforeMount(el, binding) { 8136 if (!nodeList.has(el)) { 8137 nodeList.set(el, []); 8138 } 8139 nodeList.get(el).push({ 8140 documentHandler: createDocumentHandler(el, binding), 8141 iframeClickHandler: createIframeClickHandler(el, binding), 8142 bindingFn: binding.value 8143 }); 8144 }, 8145 updated(el, binding) { 8146 /* istanbul ignore next @preserve */ 8147 if (!nodeList.has(el)) { 8148 nodeList.set(el, []); 8149 } 8150 const handlers = nodeList.get(el); 8151 const oldHandlerIndex = handlers.findIndex((item) => item.bindingFn === binding.oldValue); 8152 const newHandler = { 8153 documentHandler: createDocumentHandler(el, binding), 8154 iframeClickHandler: createIframeClickHandler(el, binding), 8155 bindingFn: binding.value 8156 }; 8157 if (oldHandlerIndex >= 0) { 8158 handlers.splice(oldHandlerIndex, 1, newHandler); 8159 } else { 8160 /* istanbul ignore next @preserve */ 8161 handlers.push(newHandler); 8162 } 8163 }, 8164 unmounted(el) { 8165 nodeList.delete(el); 8166 } 8167}; 8168const obtainAllFocusableElements = (element) => { 8169 const nodes = []; 8170 const walker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT, { 8171 acceptNode: (node) => { 8172 const isHiddenInput2 = node.tagName === "INPUT" && node.type === "hidden"; 8173 if (node.disabled || node.hidden || isHiddenInput2) { 8174 /* istanbul ignore next @preserve */ 8175 return NodeFilter.FILTER_SKIP; 8176 } 8177 return node.tabIndex >= 0 || node === document.activeElement ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP; 8178 } 8179 }); 8180 while (walker.nextNode()) { 8181 nodes.push(walker.currentNode); 8182 } 8183 return nodes; 8184}; 8185const getVisibleElement = (elements, container) => { 8186 for (const element of elements) { 8187 if (!isHidden(element, container)) { 8188 return element; 8189 } 8190 } 8191}; 8192const isHidden = (element, container) => { 8193 /* istanbul ignore next @preserve */ 8194 if (getComputedStyle(element).visibility === "hidden") { 8195 return true; 8196 } 8197 while (element) { 8198 if (container && element === container) { 8199 return false; 8200 } 8201 if (getComputedStyle(element).display === "none") { 8202 return true; 8203 } 8204 element = element.parentElement; 8205 } 8206 /* istanbul ignore next @preserve */ 8207 return false; 8208}; 8209const getEdges = (container) => { 8210 const focusable = obtainAllFocusableElements(container); 8211 const first = getVisibleElement(focusable, container); 8212 const last = getVisibleElement(focusable.reverse(), container); 8213 return [first, last]; 8214}; 8215const isSelectable = (element) => { 8216 return element instanceof HTMLInputElement && "select" in element; 8217}; 8218const tryFocus = (element, shouldSelect) => { 8219 if (element == null ? void 0 : element.focus) { 8220 const prevFocusedElement = document.activeElement; 8221 element.focus({ preventScroll: true }); 8222 if (element !== prevFocusedElement && isSelectable(element) && shouldSelect) { 8223 element.select(); 8224 } 8225 } 8226}; 8227function removeFromStack(list, item) { 8228 const copy = [...list]; 8229 const idx = list.indexOf(item); 8230 if (idx !== -1) { 8231 copy.splice(idx, 1); 8232 } 8233 return copy; 8234} 8235const createFocusableStack = () => { 8236 let stack = []; 8237 const push = (layer) => { 8238 const currentLayer = stack[0]; 8239 if (currentLayer && layer !== currentLayer) { 8240 currentLayer.pause(); 8241 } 8242 stack = removeFromStack(stack, layer); 8243 stack.unshift(layer); 8244 }; 8245 const remove = (layer) => { 8246 var _a, _b; 8247 stack = removeFromStack(stack, layer); 8248 (_b = (_a = stack[0]) == null ? void 0 : _a.resume) == null ? void 0 : _b.call(_a); 8249 }; 8250 return { 8251 push, 8252 remove 8253 }; 8254}; 8255const focusFirstDescendant = (elements, shouldSelect = false) => { 8256 const prevFocusedElement = document.activeElement; 8257 for (const element of elements) { 8258 tryFocus(element, shouldSelect); 8259 if (document.activeElement !== prevFocusedElement) { 8260 return; 8261 } 8262 } 8263}; 8264const focusableStack = createFocusableStack(); 8265const useFocusTrap = () => { 8266 const focusTrapRef = ref(); 8267 const startFocus = () => { 8268 var _a; 8269 (_a = focusTrapRef.value) == null ? void 0 : _a.startTrap(); 8270 }; 8271 const restoreFocus = (preventBackFocus = false) => { 8272 var _a; 8273 (_a = focusTrapRef.value) == null ? void 0 : _a.stopTrap(preventBackFocus); 8274 }; 8275 const tryFocusOnFirstFocusableElement = () => { 8276 var _a; 8277 (_a = focusTrapRef.value) == null ? void 0 : _a.focusOnFirstFocusableElement(); 8278 }; 8279 return { 8280 focusTrapRef, 8281 startFocus, 8282 restoreFocus, 8283 tryFocusOnFirstFocusableElement 8284 }; 8285}; 8286const useFocusTrapLayer = () => { 8287 const focusLayer = { 8288 paused: false, 8289 pause() { 8290 this.paused = true; 8291 }, 8292 resume() { 8293 this.paused = false;
8294 } 8295 }; 8296 const pushLayerStack = () => { 8297 focusableStack.push(focusLayer); 8298 }; 8299 const popLayerStack = () => { 8300 focusableStack.remove(focusLayer); 8301 }; 8302 return { 8303 focusLayer, 8304 pushLayerStack, 8305 popLayerStack 8306 }; 8307}; 8308const messages$7 = { 8309 "en-US": { 8310 "tag": { 8311 "deleteTagTip": "Press Enter or Space to delete tag", 8312 "deleteTagName": "Delete {tagName}" 8313 } 8314 }, 8315 "de-DE": { 8316 "tag": { 8317 "deleteTagTip": "Zum Löschen des Tags die Eingabe- oder Leertaste drücken", 8318 "deleteTagName": "{tagName} löschen" 8319 } 8320 }, 8321 "es-ES": { 8322 "tag": { 8323 "deleteTagTip": "Pulse Intro o la barra espaciadora para eliminar la etiqueta", 8324 "deleteTagName": "Eliminar {tagName}" 8325 } 8326 }, 8327 "fr-FR": { 8328 "tag": { 8329 "deleteTagTip": "Appuyez sur Entrée ou Espace pour supprimer l'étiquette", 8330 "deleteTagName": "Supprimer {tagName}" 8331 } 8332 }, 8333 "id-ID": { 8334 "tag": { 8335 "deleteTagTip": "Tekan Enter atau Spasi untuk menghapus tag", 8336 "deleteTagName": "Hapus {tagName}" 8337 } 8338 }, 8339 "it-IT": { 8340 "tag": { 8341 "deleteTagTip": "Premi Invio o la barra spazio per eliminare il tag", 8342 "deleteTagName": "Elimina {tagName}" 8343 } 8344 }, 8345 "jp-JP": { 8346 "tag": { 8347 "deleteTagTip": "Enter ãã¼ã¾ãã¯ã¹ãã¼ã¹ãã¼ãæ¼ãã¦ã¿ã°ãåé¤", 8348 "deleteTagName": "{tagName} ãåé¤" 8349 } 8350 }, 8351 "ko-KO": { 8352 "tag": { 8353 "deleteTagTip": "Enter ëë ì¤íì´ì¤ë°ë¥¼ ëë¬ íê·¸ ìì ", 8354 "deleteTagName": "{tagName} ìì " 8355 } 8356 }, 8357 "nl-NL": { 8358 "tag": { 8359 "deleteTagTip": "Druk op Enter of de spatiebalk om de tag te verwijderen", 8360 "deleteTagName": "{tagName} verwijderen" 8361 } 8362 }, 8363 "pl-PL": { 8364 "tag": { 8365 "deleteTagTip": "NaciÅnij Enter lub SpacjÄ, aby usunÄ Ä tag", 8366 "deleteTagName": "UsuÅ {tagName}" 8367 } 8368 }, 8369 "pt-PT": { 8370 "tag": { 8371 "deleteTagTip": "Pressione Enter ou Espaço para excluir a tag", 8372 "deleteTagName": "Excluir {tagName}" 8373 } 8374 }, 8375 "ru-RU": { 8376 "tag": { 8377 "deleteTagTip": "ÐажмиÑе «Enter» или пÑобел, ÑÑÐ¾Ð±Ñ ÑдалиÑÑ Ñег", 8378 "deleteTagName": "УдалиÑÑ: {tagName}" 8379 } 8380 }, 8381 "sv-SE": { 8382 "tag": { 8383 "deleteTagTip": "Tryck pÃ¥ Enter eller mellanslag för att radera taggen", 8384 "deleteTagName": "Radera {tagName}" 8385 } 8386 }, 8387 "tr-TR": { 8388 "tag": { 8389 "deleteTagTip": "Etiketi silmek için Enter veya BoÅluk (Space) tuÅuna basın", 8390 "deleteTagName": "{tagName} ögesini sil" 8391 } 8392 }, 8393 "vi-VN": { 8394 "tag": { 8395 "deleteTagTip": "Nhấn Enter hoặc Space Äá» xóa thẻ", 8396 "deleteTagName": "Xóa {tagName}" 8397 } 8398 }, 8399 "zh-CN": { 8400 "tag": { 8401 "deleteTagTip": "æåè½¦é®æç©ºæ ¼é®å 餿 ç¾", 8402 "deleteTagName": "å é¤{tagName}" 8403 } 8404 }, 8405 "zh-TW": { 8406 "tag": { 8407 "deleteTagTip": "æä¸Enteræç©ºæ ¼éµåªé¤æ¨ç±¤", 8408 "deleteTagName": "åªé¤{tagName}" 8409 } 8410 } 8411}; 8412const TAG_GROUP_INJECTION_KEY = Symbol("ZmTagGroup"); 8413var __defProp$Y = Object.defineProperty; 8414var __defProps$N = Object.defineProperties; 8415var __getOwnPropDescs$N = Object.getOwnPropertyDescriptors; 8416var __getOwnPropSymbols$Y = Object.getOwnPropertySymbols; 8417var __hasOwnProp$Y = Object.prototype.hasOwnProperty; 8418var __propIsEnum$Y = Object.prototype.propertyIsEnumerable; 8419var __defNormalProp$Y = (obj, key, value) => key in obj ? __defProp$Y(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 8420var __spreadValues$Y = (a, b) => { 8421 for (var prop in b || (b = {})) 8422 if (__hasOwnProp$Y.call(b, prop)) 8423 __defNormalProp$Y(a, prop, b[prop]); 8424 if (__getOwnPropSymbols$Y) 8425 for (var prop of __getOwnPropSymbols$Y(b)) { 8426 if (__propIsEnum$Y.call(b, prop)) 8427 __defNormalProp$Y(a, prop, b[prop]); 8428 } 8429 return a; 8430}; 8431var __spreadProps$N = (a, b) => __defProps$N(a, __getOwnPropDescs$N(b)); 8432const tagProps = { 8433 closable: Boolean, 8434 disabled: Boolean, 8435 testId: String, 8436 preventTabClose: Boolean, 8437 // if use v-if on zm-tag, it won't works in vue3, but works in vue2 8438 // see https://github.com/vuejs/core/issues/9491#issuecomment-1783731152 8439 // https://v3-migration.vuejs.org/zh/breaking-changes/transition-as-root.html 8440 disableTransitions: Boolean, 8441 iconRole: { 8442 type: String, 8443 default: "button" 8444 }, 8445 iconAriaSelected: Boolean, 8446 ariaSelected: Boolean,
8447 ariaLabel: String, 8448 role: String, 8449 type: { 8450 type: String, 8451 default: "info" 8452 }, 8453 labelStyle: { 8454 type: [String, Object, Array], 8455 default: "" 8456 }, 8457 size: { 8458 type: String, 8459 default: "md" 8460 } 8461}; 8462const tagEmits = ["close", "label-click"]; 8463const _hoisted_1$p = ["aria-disabled", "role", "aria-selected", "aria-label", "tabindex", "data-testid"]; 8464const _sfc_main$H = /* @__PURE__ */ defineComponent(__spreadProps$N(__spreadValues$Y({}, { 8465 name: "ZmTag" 8466}), { 8467 __name: "tag", 8468 props: tagProps, 8469 emits: tagEmits, 8470 setup(__props, { expose: __expose, emit: __emit }) { 8471 const props = __props; 8472 const emit = __emit; 8473 const ns = useNamespace("tag"); 8474 const { t } = useLocale(messages$7); 8475 const tagGroup = inject(TAG_GROUP_INJECTION_KEY, void 0); 8476 const instance = getCurrentInstance(); 8477 const isInGroup = !!tagGroup; 8478 const closeBtnRef = ref(); 8479 const containerRef = ref(); 8480 const labelRef = ref(); 8481 const closeAriaLabel = ref(""); 8482 const iconAriaDescribedbyId = useId(); 8483 const isOptionRole = computed(() => props.role === "option"); 8484 const inertButton = computed(() => { 8485 return isInGroup || props.preventTabClose; 8486 }); 8487 const ariaDisabled = computed(() => { 8488 return isInGroup && !props.closable || props.disabled; 8489 }); 8490 const ariaSelectedResult = ref(false); 8491 const handleClose = (event) => { 8492 if (!props.disabled) { 8493 emit("close", event); 8494 } 8495 }; 8496 const focus = () => { 8497 var _a, _b; 8498 if (isInGroup || isOptionRole.value) { 8499 ariaSelectedResult.value = true; 8500 (_a = containerRef.value) == null ? void 0 : _a.focus(); 8501 } else if (props.closable) { 8502 (_b = closeBtnRef.value) == null ? void 0 : _b.focus(); 8503 } 8504 }; 8505 const resetAriaSelected = () => { 8506 ariaSelectedResult.value = false; 8507 }; 8508 const handleTagCreate = () => { 8509 if (tagGroup) { 8510 tagGroup.addTag( 8511 reactive({ 8512 uid: instance.uid, 8513 closable: computed(() => props.closable), 8514 handleClose, 8515 resetAriaSelected, 8516 focus 8517 }) 8518 ); 8519 } 8520 }; 8521 const handleTagRemove = () => { 8522 if (tagGroup) { 8523 tagGroup.removeTag(instance.uid); 8524 } 8525 }; 8526 const setCloseBtnAriaLabel = () => { 8527 var _a, _b; 8528 if (!isInGroup) { 8529 const text = (_b = (_a = labelRef.value) == null ? void 0 : _a.textContent) == null ? void 0 : _b.trim(); 8530 closeAriaLabel.value = t("tag.deleteTagName", { tagName: text }); 8531 } 8532 }; 8533 const isIconOptionRole = computed(() => { 8534 return props.iconRole === "option"; 8535 }); 8536 onUpdated(() => { 8537 setCloseBtnAriaLabel(); 8538 }); 8539 onMounted(() => { 8540 handleTagCreate(); 8541 setCloseBtnAriaLabel(); 8542 }); 8543 onBeforeUnmount(() => { 8544 handleTagRemove(); 8545 }); 8546 const handleClickLabel = (event) => { 8547 emit("label-click", event); 8548 }; 8549 watch( 8550 () => props.ariaSelected, 8551 (newV) => { 8552 ariaSelectedResult.value = newV; 8553 }, 8554 { 8555 immediate: true 8556 } 8557 ); 8558 __expose({ 8559 focus 8560 // virtualFilterSelect 8561 }); 8562 return (_ctx, _cache) => { 8563 return openBlock(), createBlock(Transition, { 8564 name: `${unref(ns).namespace}-zoom-in-center`, 8565 appear: "", 8566 css: !_ctx.disableTransitions 8567 }, { 8568 default: withCtx(() => [ 8569 createBaseVNode("span", { 8570 ref_key: "containerRef", 8571 ref: containerRef, 8572 class: normalizeClass([ 8573 unref(ns).b(), 8574 unref(ns).is("disabled", _ctx.disabled), 8575 unref(ns).m(_ctx.type), 8576 unref(ns).m(_ctx.size), 8577 unref(ns).is("closable", _ctx.closable), 8578 unref(ns).is("avatar", !!_ctx.$slots.avatar) 8579 ]), 8580 "aria-disabled": ariaDisabled.value, 8581 role: isInGroup ? "option" : _ctx.role, 8582 "aria-selected": ariaSelectedResult.value, 8583 "aria-label": _ctx.ariaLabel, 8584 tabindex: isInGroup || isOptionRole.value ? -1 : void 0, 8585 "data-testid": _ctx.testId 8586 }, [ 8587 renderSlot(_ctx.$slots, "avatar", { 8588 avatarClass: unref(ns).e("avatar") 8589 }), 8590 createBaseVNode("span", { 8591 ref_key: "labelRef", 8592 ref: labelRef, 8593 class: normalizeClass(unref(ns).e("label")), 8594 style: normalizeStyle(_ctx.labelStyle), 8595 onClick: handleClickLabel 8596 }, [ 8597 renderSlot(_ctx.$slots, "default")
8598 ], 6), 8599 isIconOptionRole.value ? (openBlock(), createBlock(unref(ZmVisuallyHidden), { 8600 key: 0, 8601 id: unref(iconAriaDescribedbyId) 8602 }, { 8603 default: withCtx(() => [ 8604 createTextVNode(toDisplayString(unref(t)("tag.deleteTagTip")), 1) 8605 ]), 8606 _: 1 8607 }, 8, ["id"])) : createCommentVNode("", true), 8608 _ctx.closable ? (openBlock(), createBlock(unref(ZmInlineIconButton), { 8609 key: 1, 8610 ref_key: "closeBtnRef", 8611 ref: closeBtnRef, 8612 "aria-hidden": isInGroup ? true : false, 8613 disabled: _ctx.disabled, 8614 "stop-propagation-when-disabled": "", 8615 size: "sm", 8616 icon: unref(Close), 8617 role: _ctx.iconRole, 8618 class: normalizeClass([unref(ns).e("close")]), 8619 tabindex: inertButton.value ? -1 : 0, 8620 "aria-label": closeAriaLabel.value, 8621 "aria-describedby": isIconOptionRole.value ? unref(iconAriaDescribedbyId) : void 0, 8622 "aria-selected": isIconOptionRole.value ? _ctx.iconAriaSelected : void 0, 8623 "test-id": unref(buildTestId)(_ctx.testId, "-close"), 8624 onKeydown: withKeys(withModifiers(handleClose, ["prevent", "stop"]), ["enter", "space"]), 8625 onClick: withModifiers(handleClose, ["stop"]) 8626 }, null, 8, ["aria-hidden", "disabled", "icon", "role", "class", "tabindex", "aria-label", "aria-describedby", "aria-selected", "test-id", "onKeydown"])) : createCommentVNode("", true) 8627 ], 10, _hoisted_1$p) 8628 ]), 8629 _: 3 8630 }, 8, ["name", "css"]); 8631 }; 8632 } 8633})); 8634const ZmTag = withInstall(_sfc_main$H); 8635var __defProp$X = Object.defineProperty; 8636var __defProps$M = Object.defineProperties; 8637var __getOwnPropDescs$M = Object.getOwnPropertyDescriptors; 8638var __getOwnPropSymbols$X = Object.getOwnPropertySymbols; 8639var __hasOwnProp$X = Object.prototype.hasOwnProperty; 8640var __propIsEnum$X = Object.prototype.propertyIsEnumerable; 8641var __defNormalProp$X = (obj, key, value) => key in obj ? __defProp$X(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 8642var __spreadValues$X = (a, b) => { 8643 for (var prop in b || (b = {})) 8644 if (__hasOwnProp$X.call(b, prop)) 8645 __defNormalProp$X(a, prop, b[prop]); 8646 if (__getOwnPropSymbols$X) 8647 for (var prop of __getOwnPropSymbols$X(b)) { 8648 if (__propIsEnum$X.call(b, prop)) 8649 __defNormalProp$X(a, prop, b[prop]); 8650 } 8651 return a; 8652}; 8653var __spreadProps$M = (a, b) => __defProps$M(a, __getOwnPropDescs$M(b)); 8654const selectInputProps = { 8655 visible: Boolean, 8656 disabled: Boolean, 8657 placeholder: String, 8658 showClear: Boolean, 8659 multiple: Boolean, 8660 maxLine: Number, 8661 selectInputAriaLabel: String, 8662 selectInputAriaLabelledby: String, 8663 selectInputAriaRequired: Boolean, 8664 selectInputWidth: { 8665 type: Number, 8666 default: 0 8667 }, 8668 selectedOptionsInfo: { 8669 type: Array, 8670 required: true 8671 }, 8672 tabindex: [String, Number], 8673 selectInputErrored: Boolean, 8674 selectInputAriaDescribedBy: String, 8675 hasLeadIcon: Boolean, 8676 collapseTags: Boolean, 8677 multipleLimit: { 8678 type: Number, 8679 default: 0 8680 }, 8681 tagMaxWidth: String, 8682 size: { 8683 type: String, 8684 default: "md" 8685 }, 8686 testId: String 8687}; 8688const selectInputEmits = [ 8689 "click-inner", 8690 "click-outside", 8691 "keydown", 8692 "clear", 8693 "deselect", 8694 "resize", 8695 "clear-mousedown" 8696]; 8697const _hoisted_1$o = ["tabindex", "aria-disabled", "aria-label", "aria-labelledby", "aria-describedby", "aria-required", "aria-expanded", "data-testid"]; 8698const _sfc_main$G = /* @__PURE__ */ defineComponent(__spreadProps$M(__spreadValues$X({}, { 8699 name: "ZmSelectInput" 8700}), { 8701 __name: "select-input", 8702 props: selectInputProps, 8703 emits: selectInputEmits, 8704 setup(__props, { expose: __expose, emit: __emit }) { 8705 const props = __props; 8706 const emit = __emit; 8707 const ns = useNamespace("select-input"); 8708 const { t } = useLocale(merge({}, messages$a, messages$c)); 8709 const isFocusing = ref(false); 8710 const containerRef = ref(); 8711 const containerClass = computed(() => { 8712 const { disabled, selectInputErrored, size: size2 } = props; 8713 return [ 8714 ns.b(), 8715 ns.is("focusing", isFocusing.value), 8716 ns.is("disabled", disabled), 8717 ns.is("errored", selectInputErrored), 8718 ns.m(size2) 8719 ]; 8720 }); 8721 const wrapperClass = computed(() => { 8722 const { multiple, hasLeadIcon } = props; 8723 return [ns.e("wrapper"), ns.is("multiple", multiple), ns.is("has-lead-icon", hasLeadIcon)]; 8724 }); 8725 const tagsContainerStyle = computed(() => { 8726 return { 8727 maxWidth: `${props.selectInputWidth - 8 - 24}px` 8728 // left + right padding 8729 }; 8730 }); 8731 const scrollbarWrapStyle = computed(() => { 8732 let style = "height:auto;"; 8733 const maxLine = props.maxLine; 8734 let step = { 8735 sm: 22, 8736 md: 30, 8737 lg: 38 8738 }; 8739 if (maxLine > 0) { 8740 style += `max-height:${maxLine * step[props.size]}px;`; 8741 } 8742 return style; 8743 }); 8744 const spanClass = computed(() => { 8745 const { disabled, multiple, selectedOptionsInfo } = props; 8746 return [ 8747 ns.e("span"), 8748 ns.is("disabled", disabled), 8749 ns.is("displaying-tags", multiple && !!selectedOptionsInfo.length), 8750 ns.is("placeholder", displayedInfo.value.isPlaceholder) 8751 ]; 8752 }); 8753 const spanRef = ref(); 8754 const tagsKeyboardIndex = ref(-1); 8755 const tagsRef = ref(); 8756 const firstCollapsedTag = ref(); 8757 const restCollapsedTag = ref(); 8758 const tagLabelStyle = computed(() => { 8759 const { tagMaxWidth } = props; 8760 if (tagMaxWidth) { 8761 return { 8762 maxWidth: tagMaxWidth 8763 }; 8764 } 8765 return ""; 8766 }); 8767 const displayedInfo = computed(() => { 8768 const { selectedOptionsInfo, multiple, placeholder } = props; 8769 const length = selectedOptionsInfo.length; 8770 let label; 8771 let isPlaceholder; 8772 if (multiple) { 8773 label = length ? "" : placeholder; 8774 isPlaceholder = !length; 8775 } else { 8776 label = length ? selectedOptionsInfo[0].label : placeholder; 8777 isPlaceholder = !length; 8778 } 8779 return { label, isPlaceholder }; 8780 }); 8781 const multipleSelectedLabels = computed(() => { 8782 const { selectedOptionsInfo } = props; 8783 const labels = selectedOptionsInfo.map(({ label }) => label).join(", "); 8784 return t("a11y.selectedLabels", { labels }); 8785 }); 8786 const maxMultipleSelectedId = computed(() => { 8787 return props.multiple && props.multipleLimit > 0 ? useId().value : void 0; 8788 }); 8789 const multipleDescribedTextId = computed(() => { 8790 return props.multiple ? useId().value : void 0; 8791 }); 8792 const ariaDescribedbyResult = computed(() => { 8793 const ret = []; 8794 const { selectInputAriaDescribedBy } = props; 8795 if (selectInputAriaDescribedBy) {
8796 ret.push(selectInputAriaDescribedBy); 8797 } 8798 if (multipleDescribedTextId.value) { 8799 ret.push(multipleDescribedTextId.value); 8800 } 8801 if (maxMultipleSelectedId.value) { 8802 ret.push(maxMultipleSelectedId.value); 8803 } 8804 return ret.length ? ret.join(" ") : void 0; 8805 }); 8806 const onFocus = () => { 8807 isFocusing.value = true; 8808 }; 8809 const onBlur = () => { 8810 isFocusing.value = false; 8811 }; 8812 const onMousedown = (event) => { 8813 if (props.disabled) { 8814 event.preventDefault(); 8815 } 8816 }; 8817 const onKeydown = (event) => emit("keydown", event); 8818 const onClickInner = () => { 8819 emit("click-inner"); 8820 }; 8821 const onClickOutside = () => emit("click-outside"); 8822 const onClear = (event) => emit("clear", event); 8823 const onClearMousedown = (event) => emit("clear-mousedown", event); 8824 const deselectOption = (value) => emit("deselect", value); 8825 const focus = () => spanRef.value.focus({ preventScroll: true }); 8826 const navigateTags = (direction) => { 8827 var _a, _b; 8828 const { multiple, selectedOptionsInfo, collapseTags } = props; 8829 const maxLengthForCollapsedTags = 2; 8830 let length = selectedOptionsInfo.length; 8831 if (collapseTags) { 8832 length = Math.min(length, maxLengthForCollapsedTags); 8833 } 8834 if (multiple && length) { 8835 if (direction === NavigateType.NEXT) { 8836 tagsKeyboardIndex.value++; 8837 if (tagsKeyboardIndex.value === length) { 8838 tagsKeyboardIndex.value = 0; 8839 } 8840 } else if (direction === NavigateType.PREV) { 8841 tagsKeyboardIndex.value--; 8842 if (tagsKeyboardIndex.value < 0) { 8843 tagsKeyboardIndex.value = length - 1; 8844 } 8845 } else if (direction === NavigateType.HOME) { 8846 tagsKeyboardIndex.value = 0; 8847 } else if (direction === NavigateType.END) { 8848 tagsKeyboardIndex.value = length - 1; 8849 } 8850 if (collapseTags) { 8851 if (tagsKeyboardIndex.value === maxLengthForCollapsedTags - 1) { 8852 (_a = restCollapsedTag.value) == null ? void 0 : _a.focus(); 8853 } else { 8854 (_b = firstCollapsedTag.value) == null ? void 0 : _b.focus(); 8855 } 8856 } else { 8857 const tag = tagsRef.value[tagsKeyboardIndex.value]; 8858 tag.focus(); 8859 } 8860 } 8861 }; 8862 const resetTagsKeyBoardIndex = () => tagsKeyboardIndex.value = -1; 8863 const onTagsKeyboard = (event) => { 8864 const keyCode = event.code; 8865 const actionsMap = { 8866 [EVENT_CODE.right]: NavigateType.NEXT, 8867 [EVENT_CODE.left]: NavigateType.PREV, 8868 [EVENT_CODE.home]: NavigateType.HOME, 8869 [EVENT_CODE.end]: NavigateType.END 8870 }; 8871 switch (keyCode) { 8872 case EVENT_CODE.right: 8873 case EVENT_CODE.left: 8874 case EVENT_CODE.home: 8875 case EVENT_CODE.end: 8876 navigateTags(actionsMap[keyCode]); 8877 event.preventDefault(); 8878 event.stopPropagation(); 8879 break; 8880 } 8881 }; 8882 const forceFocusOnTagCloseBtn = (index2) => { 8883 const tag = tagsRef.value[index2]; 8884 if (tag) { 8885 tagsKeyboardIndex.value = index2; 8886 tag.focus(); 8887 } 8888 }; 8889 const handleCollapsedTagKeydown = (event) => { 8890 const keyCode = event.code; 8891 switch (keyCode) { 8892 case EVENT_CODE.enter: 8893 case EVENT_CODE.numpadEnter: 8894 case EVENT_CODE.space: 8895 emit("keydown", event, true); 8896 break; 8897 } 8898 }; 8899 onMounted(() => { 8900 useResizeObserver(containerRef, () => emit("resize")); 8901 }); 8902 __expose({ 8903 focus, 8904 forceFocusOnTagCloseBtn, 8905 resetTagsKeyBoardIndex, 8906 navigateTags 8907 }); 8908 return (_ctx, _cache) => { 8909 return withDirectives((openBlock(), createElementBlock("div", { 8910 ref_key: "containerRef", 8911 ref: containerRef, 8912 class: normalizeClass(containerClass.value), 8913 onClick: withModifiers(onClickInner, ["stop"]) 8914 }, [ 8915 createVNode(unref(ZmVisuallyHidden), { id: multipleDescribedTextId.value }, { 8916 default: withCtx(() => [ 8917 createTextVNode(toDisplayString(unref(t)("a11y.focusValuesLeftRight")), 1
8917) 8918 ]), 8919 _: 1 8920 }, 8, ["id"]), 8921 createVNode(unref(ZmVisuallyHidden), { id: maxMultipleSelectedId.value }, { 8922 default: withCtx(() => [ 8923 createTextVNode(toDisplayString(unref(t)("a11y.maxMultipleSelectedTip", { count: _ctx.multipleLimit })), 1) 8924 ]), 8925 _: 1 8926 }, 8, ["id"]), 8927 createVNode(unref(ZmScrollbar), { "wrap-style": scrollbarWrapStyle.value }, { 8928 default: withCtx(() => [ 8929 createBaseVNode("div", { 8930 class: normalizeClass(wrapperClass.value) 8931 }, [ 8932 createBaseVNode("span", { 8933 ref_key: "spanRef", 8934 ref: spanRef, 8935 role: "combobox", 8936 tabindex: _ctx.tabindex, 8937 class: normalizeClass(spanClass.value), 8938 "aria-disabled": _ctx.disabled, 8939 "aria-label": _ctx.selectInputAriaLabel, 8940 "aria-labelledby": _ctx.selectInputAriaLabelledby, 8941 "aria-describedby": ariaDescribedbyResult.value, 8942 "aria-required": _ctx.selectInputAriaRequired, 8943 "aria-expanded": _ctx.visible, 8944 "data-testid": _ctx.testId, 8945 "aria-haspopup": "listbox", 8946 onKeydown, 8947 onFocus, 8948 onMousedown, 8949 onBlur 8950 }, [ 8951 _ctx.multiple ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [ 8952 displayedInfo.value.label ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [ 8953 createTextVNode(toDisplayString(displayedInfo.value.label), 1) 8954 ], 64)) : (openBlock(), createBlock(unref(ZmVisuallyHidden), { 8955 key: 1, 8956 "aria-hidden": "false" 8957 }, { 8958 default: withCtx(() => [ 8959 createTextVNode(toDisplayString(multipleSelectedLabels.value), 1) 8960 ]), 8961 _: 1 8962 })) 8963 ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [ 8964 displayedInfo.value.isPlaceholder ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [ 8965 createTextVNode(toDisplayString(displayedInfo.value.label), 1) 8966 ], 64)) : renderSlot(_ctx.$slots, "default", { 8967 key: 1, 8968 label: displayedInfo.value.label, 8969 value: _ctx.selectedOptionsInfo[0].value 8970 }, () => [ 8971 createTextVNode(toDisplayString(displayedInfo.value.label), 1) 8972 ]) 8973 ], 64)) 8974 ], 42, _hoisted_1$o), 8975 _ctx.multiple && _ctx.selectedOptionsInfo.length ? (openBlock(), createElementBlock("div", { 8976 key: 0, 8977 class: normalizeClass(unref(ns).e("tags")), 8978 style: normalizeStyle(tagsContainerStyle.value), 8979 role: "listbox", 8980 onKeydown: onTagsKeyboard 8981 }, [ 8982 _ctx.collapseTags ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [ 8983 createVNode(unref(ZmTag), { 8984 ref_key: "firstCollapsedTag", 8985 ref: firstCollapsedTag, 8986 disabled: _ctx.disabled || _ctx.selectedOptionsInfo[0].disabled, 8987 closable: "", 8988 "icon-aria-selected": tagsKeyboardIndex.value === 0, 8989 "prevent-tab-close": "", 8990 "label-style": tagLabelStyle.value, 8991 "icon-role": "option", 8992 "test-id": unref(buildTestId)(_ctx.testId, `-tag-${_ctx.selectedOptionsInfo[0].value}`), 8993 size: _ctx.size, 8994 onClose: _cache[0] || (_cache[0] = ($event) => deselectOption(_ctx.selectedOptionsInfo[0].value)) 8995 }, { 8996 default: withCtx(() => [ 8997 renderSlot(_ctx.$slots, "default", { 8998 label: _ctx.selectedOptionsInfo[0].label, 8999 value: _ctx.selectedOptionsInfo[0].value 9000 }, () => [ 9001 createTextVNode(toDisplayString(_ctx.selectedOptionsInfo[0].label), 1) 9002 ]) 9003 ]), 9004 _: 3 9005 }, 8, ["disabled", "icon-aria-selected", "label-style", "test-id", "size"]), 9006 _ctx.selectedOptionsInfo.length > 1 ? (openBlock(), createBlock(unref(ZmTag), { 9007 key: 0, 9008 ref_key: "restCollapsedTag", 9009 ref: restCollapsedTag, 9010 role: "option", 9011 "aria-selected": tagsKeyboardIndex.value === 1, 9012 "aria-haspopup": "true", 9013 "aria-label": unref(t)("a11y.numberMore", { number: _ctx.selectedOptionsInfo.length - 1 }), 9014 disabled: _ctx.disabled, 9015 closable: false, 9016 "label-style": tagLabelStyle.value, 9017 "test-id": unref(buildTestId)(_ctx.testId, "-tag-rest"), 9018 size: _ctx.size, 9019 onKeydown: handleCollapsedTagKeydown 9020 }, { 9021 default: withCtx(() => [ 9022 createTextVNode(" + " + toDisplayString(_ctx.selectedOptionsInfo.length - 1), 1) 9023 ]), 9024 _: 1 9025 }, 8, ["aria-selected", "aria-label", "disabled", "label-style", "test-id", "size"])) : createCommentVNode("", true) 9026 ], 64)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.selectedOptionsInfo, (item, index2) => { 9027 return openBlock(), createBlock(unref(ZmTag), { 9028 ref_for: true, 9029 ref_key: "tagsRef", 9030 ref: tagsRef, 9031 key: index2, 9032 "prevent-tab-close": "", 9033 disabled: _ctx.disabled || item.disabled, 9034 closable: "", 9035 "icon-role": "option", 9036 "icon-aria-selected": tagsKeyboardIndex.value === index2, 9037 "label-style": tagLabelStyle.value, 9038 "test-id": unref(buildTestId)(_ctx.testId, `-tag-${item.value}`), 9039 size: _ctx.size, 9040 onClose: ($event) => deselectOption(item.value) 9041 }, { 9042 default: withCtx(() => [ 9043 renderSlot(_ctx.$slots, "default", { 9044 label: item.label, 9045 value: item.value 9046 }, () => [ 9047 createTextVNode(toDisplayString(item.label), 1) 9048 ]) 9049 ]), 9050 _: 2 9051 }, 1032, ["disabled", "icon-aria-selected", "label-style", "test-id", "size", "onClose"]); 9052 }), 128)) 9053 ], 38)) : createCommentVNode("", true), 9054 _ctx.showClear ? (openBlock(), createBlock(unref(ZmInlineIconButton), { 9055 key: 1, 9056 class: normalizeClass(unref(ns).e("clear")), 9057 icon: unref(Close), 9058 size: unref(createInlineInputCloseIconButtonSize)(_ctx.size), 9059 "test-id": unref(buildTestId)(_ctx.testId, "-clear"), 9060 "aria-label": unref(t)("basic.clear"), 9061 onMousedown: withModifiers(onClearMousedown, ["prevent"]), 9062 onClick: onClear 9063 }, null, 8, ["class", "icon", "size", "test-id", "aria-label"])) : createCommentVNode("", true) 9064 ], 2) 9065 ]), 9066 _: 3 9067 }, 8, ["wrap-style"]), 9068 !_ctx.showClear ? (openBlock(), createBlock(unref(ZmInlineChevronIcon), { 9069 key: 0, 9070 class: normalizeClass(unref(ns).e("chevron")), 9071 disabled: _ctx.disabled, 9072 expanded: _ctx.visible, 9073 "transform-vertical-align": "", 9074 size: unref(createInlineChevronSize)(_ctx.size) 9075 }, null, 8, ["class", "disabled", "expanded", "size"])) : createCommentVNode("", true) 9076 ], 2)), [ 9077 [unref(ClickOutside), onClickOutside] 9078 ]); 9079 }; 9080 } 9081})); 9082const SELECT_INJECTION_KEY = Symbol("ZmSelect"); 9083const selectDefaultFields = { 9084 label: "label", 9085 value: "value", 9086 disabled: "disabled" 9087}; 9088const isCheckbox = (el) => el.tagName.toLocaleLowerCase() === "input"; 9089const isNodeSelected = (el) => { 9090 if (isCheckbox(el)) { 9091 return el.checked; 9092 } else { 9093 return el.dataset.selected === "true"; 9094 } 9095}; 9096const useListboxA11y = (keyboardHandlers, tabMoreId, focusedItemAlignMiddle) => { 9097 let grid = []; 9098 let focusedRowIndex = -1; 9099 let focusedColIndex = 0; 9100 let container; 9101 let liItems = []; 9102 const ns = useNamespace("select-option"); 9103 const resetTabIndexInContainer = () => { 9104 const focusableDescendantsElements = getFocusableElementsFromContainer(container);
9105 focusableDescendantsElements.forEach((el) => { 9106 el.setAttribute("tabindex", "-1"); 9107 }); 9108 }; 9109 const buildGrid = () => { 9110 liItems = Array.from(container.querySelectorAll(`.${ns.b()}`)); 9111 grid = []; 9112 let setFocusedRowIndexAlready = false; 9113 for (let i = 0; i < liItems.length; i++) { 9114 const focusableElements = getFocusableElementsFromContainer(liItems[i], true); 9115 const targets = focusableElements.filter((node) => !node.dataset.ignore); 9116 const firstFocusedEl = targets[0]; 9117 if (isNodeSelected(firstFocusedEl) && !setFocusedRowIndexAlready) { 9118 focusedRowIndex = i; 9119 setFocusedRowIndexAlready = true; 9120 } 9121 const liAriaDescribedby = liItems[i].getAttribute("aria-describedby") || ""; 9122 if (focusableElements.length > 1) { 9123 if (!liAriaDescribedby.includes(tabMoreId)) { 9124 liItems[i].setAttribute("aria-describedby", [liAriaDescribedby, tabMoreId].join(" ")); 9125 } 9126 } else { 9127 /* istanbul ignore next @preserve */ 9128 if (liAriaDescribedby.includes(tabMoreId)) { 9129 liItems[i].setAttribute("aria-describedby", liAriaDescribedby.replace(tabMoreId, "")); 9130 } 9131 } 9132 grid[i] = targets; 9133 } 9134 if (!setFocusedRowIndexAlready) { 9135 focusedRowIndex = 0; 9136 } 9137 setFocusOnSpecifiedListItem(focusedRowIndex); 9138 }; 9139 const registerEvents = () => { 9140 clearEvents(); 9141 container.addEventListener("keydown", checkFocusChange, false); 9142 }; 9143 const clearEvents = () => { 9144 container.removeEventListener("keydown", checkFocusChange, false); 9145 }; 9146 const setFocusOnSpecifiedListItem = (rowIndex = focusedRowIndex) => { 9147 if (grid[rowIndex] && grid[rowIndex].length) { 9148 for (const rowItems of grid) { 9149 rowItems.length && rowItems[0].setAttribute("tabindex", "-1"); 9150 } 9151 grid[rowIndex][0].setAttribute("tabindex", "0"); 9152 grid[rowIndex][0].focus({ preventScroll: true }); 9153 scrollListItemIntoView(rowIndex); 9154 focusedColIndex = 0; 9155 focusedRowIndex = rowIndex; 9156 } 9157 }; 9158 const scrollListItemIntoView = (rowIndex) => { 9159 const firstFocusableElement = isCheckbox(grid[rowIndex][0]) ? grid[rowIndex][0].parentElement : grid[rowIndex][0]; 9160 const scrollFunc = focusedItemAlignMiddle ? scrollIntoMiddleView : scrollIntoView; 9161 scrollFunc(container, firstFocusableElement); 9162 }; 9163 const buildA11y = (_container) => { 9164 container = _container; 9165 resetTabIndexInContainer(); 9166 buildGrid(); 9167 registerEvents(); 9168 }; 9169 const navigateBetweenListItem = (direction) => { 9170 const length = grid.length; 9171 if (length) { 9172 if (direction === NavigateType.NEXT) { 9173 focusedRowIndex++; 9174 if (focusedRowIndex === length) { 9175 focusedRowIndex = 0; 9176 } 9177 } else if (direction === NavigateType.PREV) { 9178 focusedRowIndex--; 9179 if (focusedRowIndex < 0) { 9180 focusedRowIndex = length - 1; 9181 } 9182 } else if (direction === NavigateType.HOME) { 9183 focusedRowIndex = 0; 9184 } else if (direction === NavigateType.END) { 9185 focusedRowIndex = length - 1; 9186 } 9187 setFocusOnSpecifiedListItem(focusedRowIndex); 9188 } 9189 }; 9190 const navigateWithinListItems = (direction, event) => { 9191 const columnCounter = grid[focusedRowIndex].length; 9192 if (direction === NavigateType.NEXT && focusedColIndex < columnCounter - 1) { 9193 focusedColIndex++; 9194 grid[focusedRowIndex][focusedColIndex].focus(); 9195 event.stopPropagation(); 9196 event.preventDefault(); 9197 } else if (direction === NavigateType.PREV && focusedColIndex > 0) { 9198 focusedColIndex--; 9199 grid[focusedRowIndex][focusedColIndex].focus(); 9200 event.stopPropagation(); 9201 event.preventDefault(); 9202 } else { 9203 keyboardHandlers.tab(focusedRowIndex); 9204 focusedColIndex = 0; 9205 } 9206 }; 9207 const checkFocusChange = (event) => { 9208 const keyCode = event.code; 9209 const pressedShiftKey = event.shiftKey; 9210 const actionsMap = { 9211 [EVENT_CODE.down]: NavigateType.NEXT, 9212 [EVENT_CODE.up]: NavigateType.PREV, 9213 [EVENT_CODE.home]: NavigateType.HOME, 9214 [EVENT_CODE.end]: NavigateType.END 9215 }; 9216 switch (keyCode) { 9217 case EVENT_CODE.tab: 9218 navigateWithinListItems(pressedShiftKey ? NavigateType.PREV : NavigateType.NEXT, event); 9219 break; 9220 case EVENT_CODE.up: 9221 case EVENT_CODE.down: 9222 case EVENT_CODE.home: 9223 case EVENT_CODE.end:
9224 navigateBetweenListItem(actionsMap[keyCode]); 9225 event.preventDefault(); 9226 event.stopPropagation(); 9227 break; 9228 case EVENT_CODE.enter: 9229 case EVENT_CODE.numpadEnter: 9230 case EVENT_CODE.space: 9231 if (focusedColIndex === 0 && focusedRowIndex > -1) { 9232 keyboardHandlers.enterOrSpace(focusedRowIndex); 9233 event.preventDefault(); 9234 event.stopPropagation(); 9235 } 9236 break; 9237 case EVENT_CODE.esc: 9238 keyboardHandlers.esc(); 9239 event.preventDefault(); 9240 event.stopPropagation(); 9241 break; 9242 } 9243 }; 9244 /* istanbul ignore next @preserve */ 9245 onBeforeUnmount(() => { 9246 if (container) { 9247 clearEvents(); 9248 } 9249 }); 9250 return { 9251 buildA11y, 9252 setFocusOnSpecifiedListItem 9253 }; 9254}; 9255var __defProp$W = Object.defineProperty; 9256var __defProps$L = Object.defineProperties; 9257var __getOwnPropDescs$L = Object.getOwnPropertyDescriptors; 9258var __getOwnPropSymbols$W = Object.getOwnPropertySymbols; 9259var __hasOwnProp$W = Object.prototype.hasOwnProperty; 9260var __propIsEnum$W = Object.prototype.propertyIsEnumerable; 9261var __defNormalProp$W = (obj, key, value) => key in obj ? __defProp$W(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 9262var __spreadValues$W = (a, b) => { 9263 for (var prop in b || (b = {})) 9264 if (__hasOwnProp$W.call(b, prop)) 9265 __defNormalProp$W(a, prop, b[prop]); 9266 if (__getOwnPropSymbols$W) 9267 for (var prop of __getOwnPropSymbols$W(b)) { 9268 if (__propIsEnum$W.call(b, prop)) 9269 __defNormalProp$W(a, prop, b[prop]); 9270 } 9271 return a; 9272}; 9273var __spreadProps$L = (a, b) => __defProps$L(a, __getOwnPropDescs$L(b)); 9274const selectProps = { 9275 modelValue: { 9276 type: [String, Number, Array, Boolean] 9277 }, 9278 placeholder: String, 9279 multiple: Boolean, 9280 multipleLimit: { 9281 type: Number, 9282 default: 0 9283 }, 9284 disabled: Boolean, 9285 clearable: Boolean, 9286 maxLine: { 9287 type: Number, 9288 default: 0 9289 }, 9290 floatingOptions: { 9291 type: Object, 9292 default() { 9293 return {}; 9294 } 9295 }, 9296 floatingContentClass: String, 9297 ariaLabel: String, 9298 ariaLabelledby: String, 9299 ariaDescribedby: String, 9300 ariaRequired: Boolean, 9301 noDataText: String, 9302 tabindex: { 9303 type: [String, Number], 9304 default: 0 9305 }, 9306 validateEvent: { 9307 type: Boolean, 9308 default: true 9309 }, 9310 maxMenuItemsCount: { 9311 type: Number, 9312 default: 6 9313 }, 9314 leadIcon: { 9315 type: Object 9316 }, 9317 teleported: { 9318 type: Boolean, 9319 default: true 9320 }, 9321 loading: Boolean, 9322 beforeSelect: Function, 9323 optionTextOverflow: { 9324 type: String, 9325 default: "ellipsis" 9326 }, 9327 fullOptions: { 9328 type: Array 9329 }, 9330 fullOptionsFields: { 9331 type: Object, 9332 default() { 9333 return {}; 9334 } 9335 }, 9336 collapseTags: Boolean, 9337 tagMaxWidth: String, 9338 size: { 9339 type: String, 9340 default: "md" 9341 }, 9342 testId: String, 9343 focusedItemAlignMiddle: Boolean 9344}; 9345const selectEmits = [ 9346 VUE_EVENT_NAMES.VISIBLE_CHANGE, 9347 VUE_EVENT_NAMES.CHANGE, 9348 VUE_EVENT_NAMES.UPDATE_MODEL, 9349 VUE_EVENT_NAMES.CLEAR 9350]; 9351const _hoisted_1$n = ["role"]; 9352const _sfc_main$F = /* @__PURE__ */ defineComponent(__spreadProps$L(__spreadValues$W({}, { 9353 name: "ZmSelect" 9354}), { 9355 __name: "select", 9356 props: selectProps, 9357 emits: selectEmits, 9358 setup(__props, { expose: __expose, emit: __emit }) { 9359 const LoadingComponent = ZmLoading.loadingComponent; 9360 const props = __props; 9361 const emit = __emit; 9362 const ns = useNamespace("select"); 9363 const { t } = useLocale(merge({}, messages$8, messages$a)); 9364 const teleportedContextClass = useTeleportedContextClass(props); 9365 const { formItem } = useFormItem(); 9366 const tabMoreId = useId(); 9367 const selectInputRef = ref(); 9368 const containerRef = ref(); 9369 const isDisabled = useFormDisabled(); 9370 const isRequired = useFormItemRequired(); 9371 const isFormItemErrored = useFormItemErrored(); 9372 const ariaDescribedbyResult = useFormItemAriaDescribedby(); 9373 const ariaLabelledby = useFormItemLabelId(); 9374 const openedByCollapsedTag = ref(false); 9375 const clearBtnVisibility = ref(false); 9376 const fieldsResult = computed(() => { 9377 return merge({}, selectDefaultFields, props.fullOptionsFields); 9378 }); 9379 const sourceOptions = computed(() => { 9380 const { fullOptions } = props; 9381 if (!Array.isArray(fullOptions)) 9382 return void 0; 9383 const { label: labelField, value: valueField, disabled: disabledField } = fieldsResult.value; 9384 return fullOptions.map((option) => { 9385 const label = option[labelField]; 9386 const value = option[valueField]; 9387 const disabled = option[disabledField] || false; 9388 return { 9389 label, 9390 value, 9391 disabled 9392 }; 9393 }); 9394 }); 9395 const renderImmediately = ref(!Array.isArray(sourceOptions.value)); 9396 const floatingProps = computed(() => { 9397 const { floatingOptions } = props; 9398 return __spreadValues$W({ 9399 placement: "bottom-start", 9400 "offset-options": 4 9401 }, floatingOptions); 9402 }); 9403 const menuScrollbarStyle = computed(() => { 9404 const ITEM_HEIGHT = 32; 9405 const MENU_CONTAINER_MARGIN = 16; 9406 return { 9407 maxHeight: addUnit(props.maxMenuItemsCount * ITEM_HEIGHT + MENU_CONTAINER_MARGIN) 9408 }; 9409 }); 9410 const { buildA11y, setFocusOnSpecifiedListItem } = useListboxA11y( 9411 { 9412 enterOrSpace(index2) { 9413 if (!props.multiple) { 9414 singleSelectFocusingOption(index2); 9415 } 9416 }, 9417 tab(index2) { 9418 if (props.multiple) { 9419 closeMenu(); 9420 focusOnSelectInput(); 9421 } else { 9422 singleSelectFocusingOption(index2, true); 9423 } 9424 }, 9425 esc() { 9426 closeMenu(); 9427 focus(); 9428 } 9429 }, 9430 tabMoreId.value, 9431 props.focusedItemAlignMiddle 9432 ); 9433 const tryBuildA11y = () => { 9434 if (scrollbarRef.value && scrollbarRef.value.wrapRef) { 9435 buildA11y(scrollbarRef.value.wrapRef); 9436 return true; 9437 } 9438 }; 9439 const { popLayerStack, pushLayerStack } = useFocusTrapLayer(); 9440 const options = ref([]); 9441 const onOptionCreate = (option) => { 9442 options.value.push(option); 9443 }; 9444 const onOptionRemove = (option) => { 9445 const index2 = options.value.indexOf(option); 9446 if (index2 > -1) { 9447 options.value.splice(index2, 1); 9448 } 9449 }; 9450 const states = reactive({ 9451 selectedOptionsInfo: [], 9452 visible: false, 9453 placeholder: props.placeholder, 9454 selectInputWidth: 0, 9455 multipleLimited: false 9456 }); 9457 const listboxRef = ref(); 9458 const listboxRole = computed(() => props.multiple ? void 0 : "listbox"); 9459 const menuStyle = computed(() => { 9460 const { selectInputWidth } = states; 9461 if (selectInputWidth > 0) { 9462 return { 9463 width: `${selectInputWidth}px` 9464 }; 9465 } 9466 return ""; 9467 }); 9468 const scrollbarRef = ref(); 9469 const selectInputProps2 = computed(() => { 9470 const { 9471 clearable, 9472 multiple, 9473 maxLine, 9474 ariaLabel, 9475 leadIcon, 9476 collapseTags, 9477 multipleLimit, 9478 tagMaxWidth, 9479 size: size2, 9480 testId 9481 } = props; 9482 const { visible, placeholder, selectedOptionsInfo, selectInputWidth } = states; 9483 const showClear = clearable && !!selectedOptionsInfo.length && clearBtnVisibility.value && !isDisabled.value; 9484 return { 9485 multipleLimit, 9486 visible, 9487 placeholder, 9488 disabled: isDisabled.value, 9489 selectedOptionsInfo, 9490 multiple, 9491 maxLine, 9492 showClear, 9493 selectInputWidth, 9494 selectInputAriaLabel: ariaLabel, 9495 selectInputAriaLabelledby: ariaLabelledby.value, 9496 selectInputAriaRequired: isRequired.value, 9497 selectInputErrored: isFormItemErrored.value, 9498 selectInputAriaDescribedBy: ariaDescribedbyResult.value, 9499 hasLeadIcon: !!leadIcon, 9500 collapseTags, 9501 tagMaxWidth, 9502 size: size2, 9503 testId 9504 }; 9505 }); 9506 const emptyText = computed(() => { 9507 if (!options.value.length && !props.loading) { 9508 return props.noDataText || t("select.noData"); 9509 } 9510 return ""; 9511 }); 9512 onMounted(() => { 9513 setSelectedOptionsInfo(); 9514 setSelectInputWidth(); 9515 }); 9516 const notifySelectInputWidthChanged = () => { 9517 const { visible } = states; 9518 if (visible) { 9519 for (const option of options.value) { 9520 option.updateTextOverflow(); 9521 } 9522 } 9523 }; 9524 const setSelectInputWidth = () => { 9525 if (selectInputRef.value) { 9526 states.selectInputWidth = selectInputRef.value.$el.offsetWidth; 9527 notifySelectInputWidthChanged(); 9528 } 9529 }; 9530 const tryValidate = () => { 9531 if (props.validateEvent && !isDisabled.value) { 9532 formItem == null ? void 0 : formItem.validate().catch((err) => { 9533 /* istanbul ignore next @preserve */ 9534 debugWarn(err); 9535 }); 9536 } 9537 }; 9538 const emitChanges = (newVal) => { 9539 emit(VUE_EVENT_NAMES.UPDATE_MODEL, newVal); 9540 emit(VUE_EVENT_NAMES.CHANGE, newVal); 9541 }; 9542 const focusOnSelectInput = () => { 9543 var _a; 9544 (_a = selectInputRef.value) == null ? void 0 : _a.focus(); 9545 }; 9546 const focus = () => { 9547 focusOnSelectInput(); 9548 }; 9549 const clickOutsideDisabled = ref(false); 9550 const handleClickOutside = () => { 9551 if (clickOutsideDisabled.value) 9552 return; 9553 closeMenu(); 9554 }; 9555 const disableClickOutside = () => { 9556 clickOutsideDisabled.value = true; 9557 }; 9558 const enableClickOutside = () => { 9559 clickOutsideDisabled.value = false;
9560 }; 9561 const onOptionSelect = (vm) => { 9562 const { multiple, multipleLimit, modelValue, beforeSelect } = props; 9563 const { value: optionValue } = vm; 9564 const handler = (stillSelected) => { 9565 closeMenu(); 9566 focusOnSelectInput(); 9567 if (stillSelected) { 9568 if (modelValue !== optionValue) { 9569 emitChanges(optionValue); 9570 } 9571 } 9572 }; 9573 if (multiple) { 9574 const selectedOptionValues = modelValue.slice(); 9575 if (!selectedOptionValues.includes(optionValue)) { 9576 if (multipleLimit === 0 || selectedOptionValues.length < multipleLimit) { 9577 selectedOptionValues.push(optionValue); 9578 emitChanges(selectedOptionValues); 9579 } 9580 } 9581 } else { 9582 if (beforeSelect) { 9583 beforeSelect( 9584 (stillSelected) => { 9585 handler(stillSelected); 9586 enableClickOutside(); 9587 }, 9588 vm, 9589 disableClickOutside 9590 ); 9591 } else { 9592 handler(true); 9593 } 9594 } 9595 }; 9596 const onOptionDeselect = (value) => { 9597 const selectedOptionValues = props.modelValue.slice(); 9598 const index2 = selectedOptionValues.indexOf(value); 9599 if (index2 > -1) { 9600 const focusInSelectInputTag = () => { 9601 var _a; 9602 return (_a = selectInputRef.value) == null ? void 0 : _a.$el.contains(document.activeElement); 9603 }; 9604 selectedOptionValues.splice(index2, 1); 9605 emitChanges(selectedOptionValues); 9606 if (focusInSelectInputTag()) { 9607 const newOptionsLength = selectedOptionValues.length; 9608 if (index2 === 0 && !newOptionsLength) { 9609 focus(); 9610 } else if (index2 === newOptionsLength) { 9611 selectInputRef.value.forceFocusOnTagCloseBtn(index2 - 1); 9612 } 9613 } 9614 } 9615 }; 9616 const { isPressedArrowUpAndDownInTableBody } = useWrapperInTableBody(); 9617 provide(SELECT_INJECTION_KEY, { 9618 selectStates: computed(() => { 9619 const { multiple, modelValue } = props; 9620 const { visible, multipleLimited, selectedOptionsInfo } = states; 9621 return { 9622 multiple, 9623 modelValue, 9624 visible, 9625 multipleLimited, 9626 hasSelectedOptions: !!selectedOptionsInfo.length 9627 }; 9628 }), 9629 options, 9630 onOptionCreate, 9631 onOptionRemove, 9632 onOptionSelect, 9633 onOptionDeselect, 9634 optionTextOverflow: props.optionTextOverflow 9635 }); 9636 const toggleMenu = () => { 9637 if (!isDisabled.value) { 9638 const currentVisible = states.visible; 9639 if (!currentVisible) { 9640 focusOnSelectInput(); 9641 } 9642 states.visible = !currentVisible; 9643 } 9644 }; 9645 const closeMenu = () => states.visible = false; 9646 const clearSelectInput = (event) => { 9647 event.stopPropagation(); 9648 if (props.multiple) { 9649 const ret = []; 9650 for (const option of states.selectedOptionsInfo) { 9651 if (option.disabled) { 9652 ret.push(option.value); 9653 } 9654 emitChanges(ret); 9655 } 9656 } else { 9657 emitChanges(void 0); 9658 } 9659 emit(VUE_EVENT_NAMES.CLEAR); 9660 states.visible = false; 9661 focusOnSelectInput(); 9662 }; 9663 const onSelectInputResize = () => { 9664 setSelectInputWidth(); 9665 }; 9666 const resetAndNavigateTags = (direction) => { 9667 const selectInput = selectInputRef.value; 9668 selectInput.resetTagsKeyBoardIndex(); 9669 selectInput.navigateTags(direction); 9670 }; 9671 let isClickingClearButton = false; 9672 const recordClearMousedown = () => { 9673 if (isSafari) { 9674 isClickingClearButton = true; 9675 } 9676 }; 9677 const onSelectInputKeydown = (event, triggeredByCollapsedTag) => { 9678 const { multiple } = props; 9679 if (isDisabled.value) 9680 return; 9681 const keyCode = event.code; 9682 switch (keyCode) { 9683 case EVENT_CODE.enter: 9684 case EVENT_CODE.numpadEnter: 9685 case EVENT_CODE.space: 9686 case EVENT_CODE.down: 9687 case EVENT_CODE.up: 9688 if (isPressedArrowUpAndDownInTableBody(keyCode)) 9689 return; 9690 if (triggeredByCollapsedTag) { 9691 openedByCollapsedTag.value = true; 9692 } 9693 states.visible = true; 9694 event.preventDefault(); 9695 event.stopPropagation(); 9696 break; 9697 case EVENT_CODE.right: 9698 case EVENT_CODE.left: 9699 if (multiple) { 9700 resetAndNavigateTags(keyCode === EVENT_CODE.right ? NavigateType.NEXT : NavigateType.PREV); 9701 event.preventDefault(); 9702 event.stopPropagation(); 9703 } 9704 break; 9705 case EVENT_CODE.esc: 9706 if (states.visible) { 9707 closeMenu(); 9708 focusOnSelectInput(); 9709 event.preventDefault(); 9710 event.stopPropagation(); 9711 } 9712 break; 9713 } 9714 }; 9715 const onMenuBeforeOpen = () => { 9716 /* istanbul ignore next @preserve */ 9717 if (!states.visible) 9718 return; 9719 if (props.teleported) { 9720 pushLayerStack(); 9721 } 9722 }; 9723 const onMenuOpened = () => { 9724 /* istanbul ignore next @preserve */ 9725 if (!states.visible) 9726 return; 9727 if (emptyText.value || props.loading) { 9728 return; 9729 } 9730 if (openedByCollapsedTag.value) { 9731 let focusIndex = Infinity; 9732 const collapsedSelectedOptionsInfo = states.selectedOptionsInfo.slice(1); 9733 collapsedSelectedOptionsInfo.forEach((optionInfo) => { 9734 const order = options.value.findIndex((option) => option.value === optionInfo.value);
9735 if (order < focusIndex) { 9736 focusIndex = order; 9737 } 9738 }); 9739 openedByCollapsedTag.value = false; 9740 if (tryBuildA11y()) { 9741 setFocusOnSpecifiedListItem(focusIndex); 9742 } 9743 } else { 9744 tryBuildA11y(); 9745 } 9746 }; 9747 const onMouseEnter = () => { 9748 clearBtnVisibility.value = true; 9749 }; 9750 const onMouseLeave = () => { 9751 clearBtnVisibility.value = false; 9752 }; 9753 const onFocusOut = (e) => { 9754 var _a, _b; 9755 if (!((_a = containerRef.value) == null ? void 0 : _a.contains(e.relatedTarget)) && !((_b = listboxRef.value) == null ? void 0 : _b.contains(e.relatedTarget))) { 9756 /* istanbul ignore next @preserve */ 9757 if (isClickingClearButton && e.relatedTarget === null) { 9758 return; 9759 } 9760 clearBtnVisibility.value = false; 9761 } 9762 }; 9763 const onMenuBeforeClose = () => { 9764 if (props.teleported) { 9765 popLayerStack(); 9766 } 9767 }; 9768 const singleSelectFocusingOption = (index2, pressedTab = false) => { 9769 const focusingOption = options.value[index2]; 9770 if (focusingOption.disabled) { 9771 if (pressedTab) { 9772 closeMenu(); 9773 focusOnSelectInput(); 9774 } 9775 return; 9776 } 9777 onOptionSelect(focusingOption); 9778 }; 9779 const setSelectedOptionsInfo = () => { 9780 const { multiple, modelValue, multipleLimit } = props; 9781 const modelValueArray = !multiple ? !isUndefined(modelValue) ? [modelValue] : [] : modelValue; 9782 let rawSelectedOptionsInfo = modelValueArray.map((value) => { 9783 let sourceOption; 9784 if (Array.isArray(sourceOptions.value)) { 9785 sourceOption = sourceOptions.value.find((o) => o.value === value); 9786 } 9787 const option = options.value.find((o) => o.value === value); 9788 return { 9789 value, 9790 label: option && option.label || sourceOption && sourceOption.label, 9791 disabled: Boolean(option && option.disabled || sourceOption && sourceOption.disabled) 9792 }; 9793 }).filter((item) => !isNil(item.label)); 9794 const length = rawSelectedOptionsInfo.length; 9795 if (multiple && multipleLimit > 0) { 9796 if (length > multipleLimit) { 9797 rawSelectedOptionsInfo = rawSelectedOptionsInfo.slice(0, multipleLimit); 9798 emitChanges(rawSelectedOptionsInfo.map((item) => item.value)); 9799 states.multipleLimited = true; 9800 } else if (length === multipleLimit) { 9801 states.multipleLimited = true; 9802 } else { 9803 states.multipleLimited = false; 9804 } 9805 } 9806 states.selectedOptionsInfo = rawSelectedOptionsInfo; 9807 }; 9808 const ensureMenuRenderOnce = () => { 9809 if (!renderImmediately.value) { 9810 renderImmediately.value = true; 9811 } 9812 }; 9813 watch( 9814 () => states.visible, 9815 (newVal) => { 9816 if (newVal) { 9817 ensureMenuRenderOnce(); 9818 } 9819 emit(VUE_EVENT_NAMES.VISIBLE_CHANGE, newVal); 9820 } 9821 ); 9822 watch( 9823 () => props.placeholder, 9824 (newVal) => { 9825 states.placeholder = newVal; 9826 } 9827 ); 9828 watch( 9829 () => [props.modelValue, options.value.length], 9830 () => { 9831 setSelectedOptionsInfo(); 9832 }, 9833 { 9834 flush: "post" 9835 } 9836 ); 9837 watch( 9838 () => props.modelValue, 9839 () => { 9840 tryValidate(); 9841 }, 9842 { 9843 deep: true 9844 } 9845 ); 9846 /* istanbul ignore next @preserve */ 9847 watch( 9848 sourceOptions, 9849 () => { 9850 setSelectedOptionsInfo(); 9851 }, 9852 { 9853 flush: "post", 9854 deep: true 9855 } 9856 ); 9857 watch( 9858 () => props.loading, 9859 (newVal) => { 9860 if (!newVal) { 9861 setTimeout(() => { 9862 if (states.visible && options.value.length) { 9863 tryBuildA11y(); 9864 } 9865 }); 9866 } 9867 }, 9868 { 9869 flush: "post" 9870 } 9871 ); 9872 __expose({ 9873 closeMenu, 9874 focus 9875 }); 9876 return (_ctx, _cache) => { 9877 return openBlock(), createElementBlock("span", { 9878 ref_key: "containerRef", 9879 ref: containerRef, 9880 class: normalizeClass([unref(ns).b(), unref(ns).m(_ctx.size)]), 9881 onMouseenter: onMouseEnter, 9882 onMouseleave: onMouseLeave, 9883 onFocusin: onMouseEnter, 9884 onFocusout: onFocusOut 9885 }, [ 9886 createVNode(unref(ZmVisuallyHidden), { id: unref(tabMoreId) }, { 9887 default: withCtx(() => [ 9888 createTextVNode(toDisplayString(unref(t)("a11y.tabMore")), 1
9888) 9889 ]), 9890 _: 1 9891 }, 8, ["id"]), 9892 _ctx.leadIcon ? (openBlock(), createElementBlock("div", { 9893 key: 0, 9894 class: normalizeClass([unref(ns).e("leading"), unref(ns).is("disabled", unref(isDisabled))]) 9895 }, [ 9896 createVNode(unref(ZmIcon), null, { 9897 default: withCtx(() => [ 9898 (openBlock(), createBlock(resolveDynamicComponent(_ctx.leadIcon))) 9899 ]), 9900 _: 1 9901 }) 9902 ], 2)) : createCommentVNode("", true), 9903 createVNode(unref(ZmFloating), null, { 9904 default: withCtx(() => [ 9905 createVNode(unref(ZmFloatingTrigger), null, { 9906 default: withCtx(() => [ 9907 createVNode(_sfc_main$G, mergeProps({ 9908 ref_key: "selectInputRef", 9909 ref: selectInputRef 9910 }, selectInputProps2.value, { 9911 tabindex: _ctx.tabindex, 9912 onClickInner: toggleMenu, 9913 onClickOutside: handleClickOutside, 9914 onClearMousedown: recordClearMousedown, 9915 onClear: clearSelectInput, 9916 onKeydown: onSelectInputKeydown, 9917 onDeselect: onOptionDeselect, 9918 onResize: onSelectInputResize 9919 }), createSlots({ _: 2 }, [ 9920 _ctx.$slots.trigger ? { 9921 name: "default", 9922 fn: withCtx(({ label, value }) => [ 9923 renderSlot(_ctx.$slots, "trigger", { 9924 label, 9925 value 9926 }) 9927 ]), 9928 key: "0" 9929 } : void 0 9930 ]), 1040, ["tabindex"]) 9931 ]), 9932 _: 3 9933 }), 9934 renderImmediately.value ? (openBlock(), createBlock(Teleport, { 9935 key: 0, 9936 to: "body", 9937 disabled: !_ctx.teleported 9938 }, [ 9939 createVNode(Transition, { 9940 name: `${unref(ns).namespace}-zoom-in-top`, 9941 appear: "", 9942 onBeforeEnter: onMenuBeforeOpen, 9943 onAfterEnter: onMenuOpened, 9944 onBeforeLeave: onMenuBeforeClose 9945 }, { 9946 default: withCtx(() => [ 9947 withDirectives(createVNode(unref(ZmFloatingContent), mergeProps({ 9948 visible: states.visible, 9949 "test-id": unref(buildTestId)(_ctx.testId, "-menu"), 9950 class: [unref(ns).e("menu"), _ctx.floatingContentClass, unref(teleportedContextClass)], 9951 style: menuStyle.value 9952 }, floatingProps.value), { 9953 default: withCtx(() => [ 9954 _ctx.loading ? (openBlock(), createElementBlock("div", { 9955 key: 0, 9956 class: normalizeClass(unref(ns).e("loading")) 9957 }, [ 9958 createVNode(unref(LoadingComponent), { 9959 class: normalizeClass(unref(ns).is("no-background")) 9960 }, null, 8, ["class"]) 9961 ], 2)) : createCommentVNode("", true), 9962 emptyText.value ? (openBlock(), createElementBlock("div", { 9963 key: 1, 9964 role: "alert", 9965 class: normalizeClass(unref(ns).e("empty")) 9966 }, toDisplayString(emptyText.value), 3)) : createCommentVNode("", true), 9967 createVNode(unref(ZmScrollbar), { 9968 ref_key: "scrollbarRef", 9969 ref: scrollbarRef, 9970 class: normalizeClass(unref(ns).e("scrollbar")), 9971 "wrap-style": menuScrollbarStyle.value, 9972 "vertical-track-right": "2px" 9973 }, { 9974 default: withCtx(() => [ 9975 createBaseVNode("ul", { 9976 ref_key: "listboxRef", 9977 ref: listboxRef, 9978 role: listboxRole.value, 9979 class: normalizeClass([ 9980 unref(ns).e("list"), 9981 unref(ns).is("no-data", !!emptyText.value || _ctx.loading && !options.value.length) 9982 ]), 9983 tabindex: "-1" 9984 }, [ 9985 renderSlot(_ctx.$slots, "default") 9986 ], 10, _hoisted_1$n) 9987 ]), 9988 _: 3 9989 }, 8, ["class", "wrap-style"]) 9990 ]), 9991 _: 3 9992 }, 16, ["visible", "test-id", "class", "style"]), [ 9993 [vShow, states.visible] 9994 ]) 9995 ]), 9996 _: 3 9997 }, 8, ["name"]) 9998 ], 8, ["disabled"])) : createCommentVNode("", true) 9999 ]), 10000 _: 3 10001 }) 10002 ], 34); 10003 }; 10004 } 10005})); 10006var __defProp$V = Object.defineProperty; 10007var __defProps$K = Object.defineProperties; 10008var __getOwnPropDescs$K = Object.getOwnPropertyDescriptors; 10009var __getOwnPropSymbols$V = Object.getOwnPropertySymbols; 10010var __hasOwnProp$V = Object.prototype.hasOwnProperty; 10011var __propIsEnum$V = Object.prototype.propertyIsEnumerable; 10012var __defNormalProp$V = (obj, key, value) => key in obj ? __defProp$V(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 10013var __spreadValues$V = (a, b) => { 10014 for (var prop in b || (b = {})) 10015 if (__hasOwnProp$V.call(b, prop)) 10016 __defNormalProp$V(a, prop, b[prop]); 10017 if (__getOwnPropSymbols$V) 10018 for (var prop of __getOwnPropSymbols$V(b)) { 10019 if (__propIsEnum$V.call(b, prop)) 10020 __defNormalProp$V(a, prop, b[prop]); 10021 } 10022 return a; 10023}; 10024var __spreadProps$K = (a, b) => __defProps$K(a, __getOwnPropDescs$K(b)); 10025var __async$i = (__this, __arguments, generator) => { 10026 return new Promise((resolve2, reject) => { 10027 var fulfilled = (value) => {
10028 try { 10029 step(generator.next(value)); 10030 } catch (e) { 10031 reject(e); 10032 } 10033 }; 10034 var rejected = (value) => { 10035 try { 10036 step(generator.throw(value)); 10037 } catch (e) { 10038 reject(e); 10039 } 10040 }; 10041 var step = (x) => x.done ? resolve2(x.value) : Promise.resolve(x.value).then(fulfilled, rejected); 10042 step((generator = generator.apply(__this, __arguments)).next()); 10043 }); 10044}; 10045const infoPopoverProps = { 10046 floatingOptions: { 10047 type: Object, 10048 default() { 10049 return {}; 10050 } 10051 }, 10052 content: { 10053 type: String, 10054 default: "" 10055 }, 10056 placement: { 10057 type: String 10058 }, 10059 teleported: { 10060 type: Boolean, 10061 default: true 10062 }, 10063 disabled: Boolean, 10064 modelValue: Boolean, 10065 zIndex: Number, 10066 testId: String, 10067 floatingContentClass: String, 10068 disallowScreenReader: Boolean, 10069 disallowLearnAbout: Boolean, 10070 showWhenHoverContent: { 10071 type: Boolean, 10072 default: true 10073 }, 10074 isMutuallyExclusive: Boolean, 10075 beforeBlurHandler: Function, 10076 // for internal component 10077 transitionName: { 10078 type: String, 10079 default() { 10080 return `${getNamespace()}-tooltip`; 10081 } 10082 }, 10083 hideTimeout: { 10084 type: Number, 10085 default: 100 10086 }, 10087 openTimeout: { 10088 type: Number, 10089 default: 100 10090 }, 10091 title: String, 10092 forceAddLearnMore: Boolean 10093 // for internal component 10094}; 10095const _sfc_main$E = /* @__PURE__ */ defineComponent(__spreadProps$K(__spreadValues$V({}, { 10096 name: "ZmInfoPopover", 10097 inheritAttrs: false 10098}), { 10099 __name: "info-popover", 10100 props: infoPopoverProps, 10101 emits: ["show", "hide"], 10102 setup(__props, { expose: __expose, emit: __emit }) { 10103 const props = __props; 10104 const emit = __emit; 10105 const attrs = useAttrs(); 10106 const ns = useNamespace("info-popover"); 10107 const { t } = useLocale(messages$a); 10108 const hasAriaLabelledbyTrigger = ref(false); 10109 const floatingContent = ref(); 10110 const floatingRef = ref(); 10111 const teleportedContextClass = useTeleportedContextClass(props); 10112 const processEventListener = (el, mutation, needProcessMouseEvents = true) => { 10113 const cachedVueEvents = el._vei || getSymbolVEI(el) || {}; 10114 if (mutation === "remove") { 10115 el.removeEventListener("keydown", cachedVueEvents["onKeydown"] || onKeydown); 10116 el.removeEventListener("focus", cachedVueEvents["onFocus"] || onFocus); 10117 el.removeEventListener("blur", cachedVueEvents["onBlur"] || onBlur); 10118 if (needProcessMouseEvents) { 10119 el.removeEventListener("mouseenter", cachedVueEvents["onMouseenter"] || onTryOpen); 10120 el.removeEventListener("mouseleave", cachedVueEvents["onMouseleave"] || onTryClose); 10121 } 10122 } else { 10123 el.addEventListener("focus", onFocus); 10124 el.addEventListener("blur", onBlur); 10125 el.addEventListener("keydown", onKeydown); 10126 if (needProcessMouseEvents) { 10127 el.addEventListener("mouseenter", onTryOpen); 10128 el.addEventListener("mouseleave", onTryClose); 10129 } 10130 } 10131 }; 10132 const updateTriggerRef = (el) => { 10133 if (el && floatingRef.value) { 10134 const oldTriggerEl = floatingRef.value.getTriggerEl(); 10135 let oldAriaDescribedby = null; 10136 if (oldTriggerEl) { 10137 processEventListener(oldTriggerEl, "remove", !isZmCheckboxOrRadioOrToggle(oldTriggerEl)); 10138 oldAriaDescribedby = oldTriggerEl.getAttribute("aria-describedby"); 10139 oldTriggerEl.removeAttribute("aria-describedby"); 10140 } 10141 processEventListener(el, "add", oldTriggerEl && !isZmCheckboxOrRadioOrToggle(oldTriggerEl)); 10142 floatingRef.value.updateTriggerEl(el); 10143 if (oldAriaDescribedby) { 10144 el.setAttribute("aria-describedby", oldAriaDescribedby); 10145 } 10146 } 10147 }; 10148 const id = useId(); 10149 const learnMoreId = useId(); 10150 const opened = ref(false); 10151 const controlled = isFunction(attrs["onUpdate:modelValue"]); 10152 const shouldShow = computed(() => { 10153 return !props.disabled && (controlled && props.modelValue || unref(opened)); 10154 }); 10155 provide(INFO_POPOVER_INJECTION_KEY, { 10156 updateTriggerRef 10157 }); 10158 const ariaDescribedby = computed(() => { 10159 return !props.disallowScreenReader && !props.disabled ? id.value : void 0; 10160 }); 10161 const shouldRender = ref(props.modelValue); 10162 const floatingProps = computed(() => { 10163 const { floatingOptions, placement } = props; 10164 return __spreadValues$V({ 10165 placement, 10166 arrow: true 10167 }, floatingOptions); 10168 }); 10169 const floatingContentContainerClass = computed(() => { 10170 return [props.floatingContentClass, ns.is("info-popover")]; 10171 }); 10172 const floatingContentInfoPopoverClass = computed(() => { 10173 return [ns.b()]; 10174 }); 10175 watch( 10176 () => props.modelValue, 10177 (newVal) => __async$i(this, null, function* () { 10178 var _a, _b; 10179 if (newVal) { 10180 if (!props.disabled) { 10181 ensureRenderOnce(); 10182 } 10183 yield nextTick(); 10184 if (((_a = floatingContent.value) == null ? void 0 : _a.$el) && !props.disallowScreenReader) { 10185 announce(floatingContent.value.$el.textContent); 10186 } 10187 } else { 10188 if (((_b = floatingContent.value) == null ? void 0 : _b.$el) && !props.disallowScreenReader) { 10189 destroyAnnouncer(); 10190 } 10191 } 10192 }) 10193 ); 10194 const stopWhenControlledOrDisabled = () => { 10195 if (controlled || props.disabled) { 10196 return true; 10197 } 10198 }; 10199 let debounceOpen = debounce(() => { 10200 open(); 10201 }, props.openTimeout); 10202 /* istanbul ignore next @preserve */ 10203 let debounceClose = debounce(() => { 10204 close(); 10205 }, props.hideTimeout); 10206 const onTryOpen = composeEventHandlers(stopWhenControlledOrDisabled, () => { 10207 debounceClose.cancel(); 10208 debounceClose = debounce(() => { 10209 close(); 10210 }, props.hideTimeout); 10211 debounceOpen(); 10212 }); 10213 const onTryClose = composeEventHandlers(stopWhenControlledOrDisabled, () => { 10214 debounceOpen.cancel(); 10215 debounceOpen = debounce(() => { 10216 open(); 10217 }, props.openTimeout); 10218 debounceClose(); 10219 }); 10220 const onContentMouseEnter = (event) => { 10221 if (props.showWhenHoverContent) { 10222 onTryOpen(event); 10223 } 10224 }; 10225 const onContentMouseLeave = (event) => { 10226 if (props.showWhenHoverContent) { 10227 onTryClose(event); 10228 } 10229 }; 10230 const onKeydown = composeEventHandlers(stopWhenControlledOrDisabled, (event) => { 10231 if ([EVENT_CODE.esc, EVENT_CODE.tab].includes(event.code)) { 10232 if (shouldShow.value) { 10233 close(); 10234 } 10235 } 10236 }); 10237 const onBlur = composeEventHandlers(stopWhenControlledOrDisabled, (event) => { 10238 var _a; 10239 if ((_a = props.beforeBlurHandler) == null ? void 0 : _a.call(props, event)) 10240 return; 10241 close(); 10242 }); 10243 const onFocus = composeEventHandlers(stopWhenControlledOrDisabled, () => { 10244 if (isPerformingKeyboardAction()) { 10245 open(); 10246 } 10247 }); 10248 const close = () => { 10249 opened.value = false;
10250 }; 10251 const open = () => { 10252 ensureRenderOnce(); 10253 if (props.isMutuallyExclusive) { 10254 Array.from(mutuallyExclusiveInfoPopovers).forEach((instance) => { 10255 instance.close(); 10256 }); 10257 } 10258 opened.value = true; 10259 }; 10260 const setAriaLabel = (isDisabled, firstTime = false) => { 10261 var _a; 10262 let triggerEl = (_a = floatingRef.value) == null ? void 0 : _a.getTriggerEl(); 10263 if (triggerEl) { 10264 if (hasClass(triggerEl, `${ns.namespace}-input`)) { 10265 triggerEl = triggerEl.querySelector(`.${ns.namespace}-input__inner`); 10266 } else if (hasClass(triggerEl, `${ns.namespace}-textarea`)) { 10267 triggerEl = triggerEl.querySelector(`.${ns.namespace}-textarea__inner`); 10268 } 10269 } 10270 if (triggerEl && (!props.disallowScreenReader && !props.disallowLearnAbout || props.forceAddLearnMore)) { 10271 const originalAriaLabel = triggerEl.getAttribute("aria-label"); 10272 const originalAriaLabelledby = triggerEl.getAttribute("aria-labelledby"); 10273 if (!isDisabled) { 10274 if (originalAriaLabelledby) { 10275 hasAriaLabelledbyTrigger.value = true; 10276 triggerEl.setAttribute("original-aria-labelledby", originalAriaLabelledby); 10277 triggerEl.setAttribute("aria-labelledby", `${learnMoreId.value} ${originalAriaLabelledby}`); 10278 } else { 10279 if (originalAriaLabel) { 10280 triggerEl.setAttribute("original-aria-label", originalAriaLabel); 10281 } 10282 triggerEl.setAttribute( 10283 "aria-label", 10284 t("a11y.learnMore", { 10285 label: triggerEl.getAttribute("aria-label") || triggerEl.textContent || "" 10286 }) 10287 ); 10288 } 10289 } else { 10290 if (triggerEl.hasAttribute("original-aria-labelledby")) { 10291 hasAriaLabelledbyTrigger.value = false; 10292 triggerEl.setAttribute( 10293 "aria-labelledby", 10294 triggerEl.getAttribute("original-aria-labelledby") 10295 ); 10296 } else if (triggerEl.hasAttribute("original-aria-label")) { 10297 triggerEl.setAttribute("aria-label", triggerEl.getAttribute("original-aria-label")); 10298 } else if (triggerEl.hasAttribute("aria-label") && !firstTime) { 10299 triggerEl.removeAttribute("aria-label"); 10300 } 10301 } 10302 } 10303 }; 10304 watch( 10305 () => props.disabled, 10306 (newVal) => { 10307 setAriaLabel(newVal); 10308 if (newVal && opened.value) { 10309 opened.value = false; 10310 } 10311 } 10312 ); 10313 const instanceProxy = { 10314 close 10315 }; 10316 const ensureRenderOnce = () => { 10317 if (!shouldRender.value) { 10318 shouldRender.value = true; 10319 } 10320 }; 10321 const addInfoPopoverToMutuallyExclusiveStore = () => { 10322 if (props.isMutuallyExclusive) { 10323 mutuallyExclusiveInfoPopovers.add(instanceProxy); 10324 } 10325 }; 10326 const removeInfoPopoverFromMutuallyExclusiveStore = () => { 10327 if (mutuallyExclusiveInfoPopovers.has(instanceProxy)) { 10328 mutuallyExclusiveInfoPopovers.delete(instanceProxy); 10329 } 10330 }; 10331 onMounted(() => { 10332 setAriaLabel(props.disabled, true); 10333 addInfoPopoverToMutuallyExclusiveStore(); 10334 }); 10335 onBeforeUnmount(() => { 10336 var _a; 10337 removeInfoPopoverFromMutuallyExclusiveStore(); 10338 try { 10339 const triggerEl = (_a = floatingRef.value) == null ? void 0 : _a.getTriggerEl(); 10340 if (triggerEl) { 10341 processEventListener(triggerEl, "remove", !isZmCheckboxOrRadioOrToggle(triggerEl)); 10342 triggerEl.removeAttribute("aria-describedby"); 10343 } 10344 } catch (e) { 10345 } 10346 debounceOpen.cancel(); 10347 debounceClose.cancel(); 10348 shouldRender.value = false; 10349 }); 10350 const onMenuAfterOpened = () => { 10351 emit("show"); 10352 }; 10353 const onMenuAfterClosed = () => { 10354 var _a; 10355 emit("hide"); 10356 (_a = floatingContent.value) == null ? void 0 : _a.resetXY(); 10357 }; 10358 __expose({ 10359 updateTriggerRef, 10360 close 10361 // used by select-option 10362 }); 10363 return (_ctx, _cache) => { 10364 return openBlock(), createBlock(unref(ZmFloating), { 10365 ref_key: "floatingRef", 10366 ref: floatingRef 10367 }, { 10368 default: withCtx(() => [ 10369 (openBlock(), createBlock(Teleport, { to: "body" }, [ 10370 hasAriaLabelledbyTrigger.value ? (openBlock(), createBlock(unref(ZmVisuallyHidden), { 10371 key: 0, 10372 id: unref(learnMoreId), 10373 "aria-hidden": "false" 10374 }, { 10375 default: withCtx(() => [ 10376 createTextVNode(toDisplayString(unref(t)("a11y.learnMore", { label: "" })), 1) 10377 ]), 10378 _: 1 10379 }, 8, ["id"])) : createCommentVNode("", true) 10380 ])), 10381 createVNode(unref(ZmFloatingTrigger), mergeProps({ 10382 class: unref(ns).e("trigger"), 10383 "aria-describedby": ariaDescribedby.value 10384 }, _ctx.$attrs, { 10385 onMouseenter: unref(onTryOpen), 10386 onMouseleave: unref(onTryClose), 10387 onKeydown: unref(onKeydown), 10388 onBlur: unref(onBlur), 10389 onFocus: unref(onFocus) 10390 }), { 10391 default: withCtx(() => [ 10392 renderSlot(_ctx.$slots, "default") 10393 ]), 10394 _: 3 10395 }, 16, ["class", "aria-describedby", "onMouseenter", "onMouseleave", "onKeydown", "onBlur", "onFocus"]), 10396 shouldRender.value ? (openBlock(), createBlock(Teleport, { 10397 key: 0, 10398 to: "body", 10399 disabled: !_ctx.teleported 10400 }, [ 10401 createVNode(Transition, { 10402 name: _ctx.transitionName, 10403 appear: "", 10404 onAfterEnter: onMenuAfterOpened, 10405 onAfterLeave: onMenuAfterClosed 10406 }, { 10407 default: withCtx(() => [ 10408 withDirectives(createVNode(unref(ZmFloatingContent), mergeProps({ 10409 id: unref(id), 10410 ref_key: "floatingContent", 10411 ref: floatingContent, 10412 visible: shouldShow.value, 10413 "test-id": _ctx.testId 10414 }, floatingProps.value, { 10415 "z-index": _ctx.zIndex, 10416 class: [floatingContentContainerClass.value, unref(teleportedContextClass)], 10417 "aria-hidden": "true", 10418 onMouseenter: onContentMouseEnter, 10419 onMouseleave: onContentMouseLeave 10420 }), { 10421 default: withCtx(() => [ 10422 createBaseVNode("div", { 10423 class: normalizeClass(floatingContentInfoPopoverClass.value) 10424 }, [ 10425 _ctx.title ? (openBlock(), createElementBlock("div", { 10426 key: 0, 10427 class: normalizeClass(unref(ns).e("title")) 10428 }, toDisplayString(_ctx.title), 3)) : createCommentVNode("", true), 10429 renderSlot(_ctx.$slots, "content", {}, () => [ 10430 createTextVNode(toDisplayString(_ctx.content), 1) 10431 ]) 10432 ], 2) 10433 ]), 10434 _: 3 10435 }, 16, ["id", "visible", "test-id", "z-index", "class"]), [ 10436 [vShow, shouldShow.value] 10437 ]) 10438 ]), 10439 _: 3 10440 }, 8, ["name"]) 10441 ], 8, ["disabled"])) : createCommentVNode("", true) 10442 ]), 10443 _: 3 10444 }, 512); 10445 }; 10446 } 10447})); 10448const ZmInfoPopover = withInstall(_sfc_main$E); 10449const hasEllipsis = (el, vertical = false) => { 10450 if (vertical) 10451 return el.scrollHeight > el.offsetHeight; 10452 return el.scrollWidth > el.offsetWidth; 10453}; 10454var __defProp$U = Object.defineProperty; 10455var __defProps$J = Object.defineProperties; 10456var __getOwnPropDescs$J = Object.getOwnPropertyDescriptors; 10457var __getOwnPropSymbols$U = Object.getOwnPropertySymbols; 10458var __hasOwnProp$U = Object.prototype.hasOwnProperty; 10459var __propIsEnum$U = Object.prototype.propertyIsEnumerable; 10460var __defNormalProp$U = (obj, key, value) => key in obj ? __defProp$U(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 10461var __spreadValues$U = (a, b) => { 10462 for (var prop in b || (b = {})) 10463 if (__hasOwnProp$U.call(b, prop)) 10464 __defNormalProp$U(a, prop, b[prop]); 10465 if (__getOwnPropSymbols$U) 10466 for (var prop of __getOwnPropSymbols$U(b)) { 10467 if (__propIsEnum$U.call(b, prop)) 10468 __defNormalProp$U(a, prop, b[prop]); 10469 } 10470 return a; 10471}; 10472var __spreadProps$J = (a, b) => __defProps$J(a, __getOwnPropDescs$J(b)); 10473const selectOptionProps = { 10474 value: { 10475 type: [String, Number, Boolean] 10476 }, 10477 label: { 10478 type: [String, Number], 10479 required: true 10480 }, 10481 disabled: Boolean, 10482 tooltipContent: String,
10483 ariaLabel: String, 10484 ariaDescribedby: String, 10485 ariaLabelledby: String, 10486 testId: String 10487}; 10488const _hoisted_1$m = ["data-testid", "aria-selected", "data-selected", "aria-disabled", "aria-label", "aria-describedby"]; 10489const _sfc_main$D = /* @__PURE__ */ defineComponent(__spreadProps$J(__spreadValues$U({}, { 10490 name: "ZmSelectOption" 10491}), { 10492 __name: "select-option", 10493 props: selectOptionProps, 10494 setup(__props) { 10495 const props = __props; 10496 const ns = useNamespace("select-option"); 10497 const { t } = useLocale(messages$a); 10498 const contentContainerRef = ref(); 10499 const liRef = ref(); 10500 const labelTooltipRef = ref(); 10501 const checkboxCounterId = useId(); 10502 const { 10503 options, 10504 selectStates, 10505 onOptionCreate, 10506 onOptionSelect, 10507 onOptionRemove, 10508 onOptionDeselect, 10509 optionTextOverflow 10510 } = inject(SELECT_INJECTION_KEY); 10511 const shouldApplyTextOverflowStyle = optionTextOverflow === "ellipsis"; 10512 const textOverflowed = ref(false); 10513 const isDisabled = computed(() => props.disabled); 10514 const isMultiple = computed(() => selectStates.value.multiple); 10515 const isMultipleLimited = computed(() => { 10516 return selectStates.value.multipleLimited && !isChecked.value; 10517 }); 10518 const isSelectVisible = computed(() => selectStates.value.visible); 10519 const isSelected = computed(() => { 10520 const { modelValue } = selectStates.value; 10521 const { value } = props; 10522 if (isMultiple.value) { 10523 const arrayModelValue = modelValue; 10524 return arrayModelValue.includes(value); 10525 } else { 10526 return value === modelValue; 10527 } 10528 }); 10529 const isChecked = ref(isSelected.value); 10530 const checkboxAriaDescribedbyContent = computed(() => { 10531 const { label } = props; 10532 const allOptions = options.value; 10533 const index2 = allOptions.findIndex((option) => option.label === label); 10534 const total = allOptions.length; 10535 return t("a11y.loopList2", { index: index2 + 1, total }); 10536 }); 10537 const ariaDescribedbyResult = computed(() => { 10538 const { ariaDescribedby } = props; 10539 let ret = []; 10540 if (isMultiple.value) { 10541 ret.push(checkboxCounterId.value); 10542 } 10543 if (ariaDescribedby) { 10544 ret.push(ariaDescribedby); 10545 } 10546 return ret.length ? ret.join(" ") : void 0; 10547 }); 10548 const ariaLabelResult = computed(() => { 10549 const { ariaLabel, label } = props; 10550 return String(ariaLabel || label); 10551 }); 10552 const updateTextOverflow = () => { 10553 if (contentContainerRef.value) { 10554 textOverflowed.value = hasEllipsis(contentContainerRef.value); 10555 } 10556 }; 10557 const vm = reactive({ 10558 updateTextOverflow, 10559 value: computed(() => props.value), 10560 label: computed(() => props.label), 10561 disabled: computed(() => props.disabled) 10562 }); 10563 const containerClass = computed(() => { 10564 const ret = [ 10565 ns.b(), 10566 ns.is( 10567 "sibling-selected", 10568 selectStates.value.hasSelectedOptions && !isSelected.value && !isMultiple.value 10569 ) 10570 ]; 10571 if (!isMultiple.value) { 10572 ret.push(ns.is("disabled", isDisabled.value)); 10573 } 10574 return ret; 10575 }); 10576 const handleOptionCreate = () => { 10577 onOptionCreate(vm); 10578 }; 10579 const handleOptionSelect = () => { 10580 if (!isDisabled.value) { 10581 onOptionSelect(vm); 10582 } 10583 }; 10584 const updateTooltipTrigger = () => { 10585 if (!isMultiple.value && labelTooltipRef.value && liRef.value) { 10586 labelTooltipRef.value.updateTriggerRef(liRef.value); 10587 } 10588 }; 10589 watch(isSelected, (newV) => { 10590 if (isMultiple.value) { 10591 isChecked.value = newV; 10592 } 10593 }); 10594 watch(isSelectVisible, (newVal) => { 10595 var _a; 10596 if (shouldApplyTextOverflowStyle) { 10597 if (newVal) { 10598 setTimeout(() => { 10599 updateTextOverflow(); 10600 }); 10601 } else { 10602 (_a = labelTooltipRef.value) == null ? void 0 : _a.close(); 10603 } 10604 } 10605 }); 10606 watch(isChecked, (checked) => { 10607 checked ? onOptionSelect(vm) : onOptionDeselect(vm.value); 10608 }); 10609 onMounted(() => { 10610 handleOptionCreate(); 10611 updateTooltipTrigger(); 10612 }); 10613 onBeforeUnmount(() => { 10614 onOptionRemove(vm); 10615 }); 10616 return (_ctx, _cache) => { 10617 return !isMultiple.value ? (openBlock(), createElementBlock("li", { 10618 key: 0, 10619 ref_key: "liRef", 10620 ref: liRef, 10621 class: normalizeClass(containerClass.value), 10622 role: "option", 10623 "data-testid": _ctx.testId, 10624 "aria-selected": isSelected.value, 10625 "data-selected": isSelected.value, 10626 "aria-disabled": isDisabled.value, 10627 "aria-label": ariaLabelResult.value, 10628 "aria-describedby": ariaDescribedbyResult.value, 10629 tabindex: "-1", 10630 onClick: withModifiers(handleOptionSelect, ["stop"]) 10631 }, [ 10632 createBaseVNode("div", { 10633 class: normalizeClass([unref(ns).e("content"), unref(ns).is("clipped", shouldApplyTextOverflowStyle)]) 10634 }, [ 10635 renderSlot(_ctx.$slots, "default", {}, () => [ 10636 createVNode(unref(ZmTooltip), { 10637 ref_key: "labelTooltipRef", 10638 ref: labelTooltipRef, 10639 disabled: !textOverflowed.value, 10640 placement: "top",
10641 arrow: false, 10642 content: String(_ctx.label), 10643 "disallow-screen-reader": "", 10644 "show-when-hover-content": false 10645 }, { 10646 default: withCtx(() => [ 10647 createBaseVNode("div", { 10648 ref_key: "contentContainerRef", 10649 ref: contentContainerRef, 10650 class: normalizeClass(unref(ns).is("clipped", shouldApplyTextOverflowStyle)) 10651 }, toDisplayString(_ctx.label), 3) 10652 ]), 10653 _: 1 10654 }, 8, ["disabled", "content"]) 10655 ]) 10656 ], 2), 10657 _ctx.tooltipContent ? (openBlock(), createBlock(unref(ZmInfoPopover), { 10658 key: 0, 10659 placement: "top", 10660 content: _ctx.tooltipContent, 10661 "show-when-hover-content": false 10662 }, { 10663 default: withCtx(() => [ 10664 createVNode(unref(ZmInlineIconButton), { 10665 icon: unref(Information), 10666 "aria-label": _ctx.label, 10667 class: normalizeClass(unref(ns).e("helper-icon")), 10668 onKeydown: _cache[0] || (_cache[0] = withKeys(withModifiers(() => { 10669 }, ["prevent"]), ["space", "enter"])) 10670 }, null, 8, ["icon", "aria-label", "class"]) 10671 ]), 10672 _: 1 10673 }, 8, ["content"])) : createCommentVNode("", true), 10674 withDirectives(createVNode(unref(ZmIcon), { 10675 class: normalizeClass(unref(ns).e("checkmark")) 10676 }, { 10677 default: withCtx(() => [ 10678 createVNode(unref(Checkmark)) 10679 ]), 10680 _: 1 10681 }, 8, ["class"]), [ 10682 [vShow, isSelected.value] 10683 ]) 10684 ], 10, _hoisted_1$m)) : (openBlock(), createElementBlock("li", { 10685 key: 1, 10686 class: normalizeClass(containerClass.value) 10687 }, [ 10688 createVNode(unref(ZmVisuallyHidden), { id: unref(checkboxCounterId) }, { 10689 default: withCtx(() => [ 10690 createTextVNode(toDisplayString(checkboxAriaDescribedbyContent.value), 1) 10691 ]), 10692 _: 1 10693 }, 8, ["id"]), 10694 createBaseVNode("div", { 10695 class: normalizeClass(unref(ns).e("checkbox-content")) 10696 }, [ 10697 createVNode(unref(ZmTooltip), { 10698 ref_key: "labelTooltipRef", 10699 ref: labelTooltipRef, 10700 disabled: !textOverflowed.value, 10701 "disallow-screen-reader": "", 10702 placement: "top", 10703 arrow: false, 10704 content: String(_ctx.label), 10705 "show-when-hover-content": false 10706 }, { 10707 default: withCtx(() => [ 10708 createVNode(unref(ZmCheckbox), { 10709 modelValue: isChecked.value, 10710 "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isChecked.value = $event), 10711 "aria-labelledby": _ctx.ariaLabelledby, 10712 "aria-describedby": ariaDescribedbyResult.value, 10713 tabindex: "-1", 10714 "validate-event": false, 10715 disabled: isDisabled.value || isMultipleLimited.value, 10716 "test-id": _ctx.testId 10717 }, { 10718 default: withCtx(() => [ 10719 createBaseVNode("div", { 10720 ref_key: "contentContainerRef", 10721 ref: contentContainerRef, 10722 class: normalizeClass(shouldApplyTextOverflowStyle ? unref(ns).e("checkbox-label") : void 0) 10723 }, [ 10724 renderSlot(_ctx.$slots, "default", {}, () => [ 10725 createTextVNode(toDisplayString(_ctx.label), 1) 10726 ]) 10727 ], 2) 10728 ]), 10729 _: 3 10730 }, 8, ["modelValue", "aria-labelledby", "aria-describedby", "disabled", "test-id"]) 10731 ]), 10732 _: 3 10733 }, 8, ["disabled", "content"]) 10734 ], 2), 10735 _ctx.tooltipContent ? (openBlock(), createBlock(unref(ZmInfoPopover), { 10736 key: 0, 10737 placement: "top", 10738 content: _ctx.tooltipContent, 10739 "show-when-hover-content": false 10740 }, { 10741 default: withCtx(() => [ 10742 createVNode(unref(ZmInlineIconButton), { 10743 icon: unref(Information), 10744 "aria-label": _ctx.label, 10745 class: normalizeClass(unref(ns).e("helper-icon")) 10746 }, null, 8, ["icon", "aria-label", "class"]) 10747 ]), 10748 _: 1 10749 }, 8, ["content"])) : createCommentVNode("", true) 10750 ], 2)); 10751 }; 10752 } 10753})); 10754var __defProp$T = Object.defineProperty; 10755var __defProps$I = Object.defineProperties; 10756var __getOwnPropDescs$I = Object.getOwnPropertyDescriptors; 10757var __getOwnPropSymbols$T = Object.getOwnPropertySymbols; 10758var __hasOwnProp$T = Object.prototype.hasOwnProperty; 10759var __propIsEnum$T = Object.prototype.propertyIsEnumerable; 10760var __defNormalProp$T = (obj, key, value) => key in obj ? __defProp$T(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 10761var __spreadValues$T = (a, b) => { 10762 for (var prop in b || (b = {})) 10763 if (__hasOwnProp$T.call(b, prop)) 10764 __defNormalProp$T(a, prop, b[prop]); 10765 if (__getOwnPropSymbols$T) 10766 for (var prop of __getOwnPropSymbols$T(b)) { 10767 if (__propIsEnum$T.call(b, prop)) 10768 __defNormalProp$T(a, prop, b[prop]); 10769 } 10770 return a; 10771}; 10772var __spreadProps$I = (a, b) => __defProps$I(a, __getOwnPropDescs$I(b)); 10773const selectOptionGroup = { 10774 label: { 10775 type: String, 10776 default: "" 10777 },
10778 ariaLabel: String 10779}; 10780const _hoisted_1$l = ["aria-label"]; 10781const _sfc_main$C = /* @__PURE__ */ defineComponent(__spreadProps$I(__spreadValues$T({}, { 10782 name: "ZmSelectOptionGroup" 10783}), { 10784 __name: "select-option-group", 10785 props: selectOptionGroup, 10786 setup(__props) { 10787 const ns = useNamespace("select-option-group"); 10788 return (_ctx, _cache) => { 10789 return openBlock(), createElementBlock("li", { 10790 role: "group", 10791 "aria-label": String(_ctx.label) || _ctx.ariaLabel, 10792 class: normalizeClass(unref(ns).b()) 10793 }, [ 10794 createBaseVNode("ul", { 10795 role: "presentation", 10796 class: normalizeClass(unref(ns).e("inner")) 10797 }, [ 10798 _ctx.label ? (openBlock(), createElementBlock("div", { 10799 key: 0, 10800 class: normalizeClass(unref(ns).e("title")) 10801 }, toDisplayString(_ctx.label), 3)) : createCommentVNode("", true), 10802 renderSlot(_ctx.$slots, "default") 10803 ], 2) 10804 ], 10, _hoisted_1$l); 10805 }; 10806 } 10807})); 10808const ZmSelect = withInstall(_sfc_main$F, { 10809 SelectOption: _sfc_main$D, 10810 SelectOptionGroup: _sfc_main$C 10811}); 10812const virtualItemProps = { 10813 dataKey: [String], 10814 sizeKey: { 10815 type: String, 10816 default: "offsetHeight" 10817 } 10818}; 10819const slotProps = { 10820 vnode: Object 10821}; 10822const virtualItemEmits = ["resize"]; 10823const createSlot = ({ mounted, updated, unmounted }) => { 10824 return defineComponent({ 10825 props: slotProps, 10826 setup(props) { 10827 const instance = getCurrentInstance(); 10828 onMounted(() => { 10829 mounted(instance.vnode.el); 10830 }); 10831 onUpdated(() => { 10832 updated(instance.vnode.el); 10833 }); 10834 onUnmounted(() => { 10835 unmounted(instance.vnode.el); 10836 }); 10837 return () => { 10838 return props.vnode; 10839 }; 10840 } 10841 }); 10842}; 10843const VirtualListItem = defineComponent({ 10844 name: "ZmVirtualListItem", 10845 props: virtualItemProps, 10846 emits: virtualItemEmits, 10847 setup(props, { emit, slots }) { 10848 let observer = null; 10849 const handleSizeChange = (el) => { 10850 raf(() => { 10851 const size2 = el ? el[props.sizeKey] : 0; 10852 emit("resize", size2, props.dataKey); 10853 }); 10854 }; 10855 const mounted = (el) => { 10856 observer = new index$1(() => { 10857 handleSizeChange(el); 10858 }); 10859 el && observer.observe(el); 10860 }; 10861 const updated = (el) => { 10862 handleSizeChange(el); 10863 }; 10864 const unmounted = () => { 10865 if (observer) { 10866 observer.disconnect(); 10867 observer = null; 10868 } 10869 }; 10870 const customSlot = createSlot({ mounted, updated, unmounted }); 10871 return () => { 10872 var _a; 10873 const { dataKey } = props; 10874 const [defaultSlot] = ((_a = slots.default) == null ? void 0 : _a.call(slots)) || []; 10875 return h( 10876 customSlot, 10877 { 10878 key: dataKey, 10879 vnode: defaultSlot, 10880 "data-key": dataKey 10881 }, 10882 { 10883 default: () => { 10884 var _a2; 10885 return (_a2 = slots.default) == null ? void 0 : _a2.call(slots); 10886 } 10887 } 10888 ); 10889 }; 10890 } 10891}); 10892const virtualListProps = { 10893 modelValue: Array, 10894 dataKey: { 10895 type: [String, Function], 10896 default: "", 10897 required: true 10898 }, 10899 keeps: { 10900 type: Number, 10901 default: 20 10902 }, 10903 direction: { 10904 type: String, 10905 default: "vertical" 10906 }, 10907 tableMode: Boolean, 10908 role: { 10909 type: String, 10910 default: "listbox" 10911 }, 10912 wrapClass: [String, Array], 10913 wrapStyle: { 10914 type: Object, 10915 default: () => ({}) 10916 }, 10917 chosenClass: String, 10918 ghostClass: String, 10919 fallbackOnBody: Boolean, 10920 hasSingleSelection: Boolean, 10921 radio: [String, Number, Boolean], 10922 draggable: Boolean, 10923 colCount: Number, 10924 headerCount: { 10925 type: Number, 10926 default: 0 10927 }, 10928 showSummary: Boolean, 10929 scrollbarWrapStyle: { 10930 type: [String, Object, Array], 10931 default: "" 10932 }, 10933 alwaysScrollbar: { 10934 type: Boolean, 10935 default: true 10936 }, 10937 threshold: { 10938 type: Number, 10939 default: 1 10940 }, 10941 ariaLabel: String, 10942 ariaLabelledby: String, 10943 ariaDescribedby: String, 10944 testId: String, 10945 throttleTime: { 10946 type: Number, 10947 default: 50 10948 }, 10949 scrollbarVerticalTrackRight: String 10950}; 10951const virtualListEmits = { 10952 "update:modelValue": (value) => value, 10953 top: () => true, 10954 bottom: () => true, 10955 "range-change": (range) => range,
10956 "radio-change": (value) => value, 10957 drag: (event) => event, 10958 drop: (event) => event 10959}; 10960const captureMode = { 10961 capture: false, 10962 passive: false 10963}; 10964const R_SPACE = /\s+/g; 10965function userAgent(pattern) { 10966 if (typeof window !== "undefined" && window.navigator) { 10967 return !!/* @__PURE__ */ navigator.userAgent.match(pattern); 10968 } 10969} 10970const IE11OrLess = userAgent(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i); 10971const Edge = userAgent(/Edge/i); 10972const Safari = userAgent(/safari/i) && !userAgent(/chrome/i) && !userAgent(/android/i); 10973const supportPassive = function() { 10974 let supportPassive2 = false; 10975 if (typeof document === "undefined") 10976 return false; 10977 document.addEventListener("checkIfSupportPassive", null, { 10978 get passive() { 10979 supportPassive2 = true; 10980 return true; 10981 } 10982 }); 10983 return supportPassive2; 10984}(); 10985(function() { 10986 if (typeof window === "undefined" || typeof document === "undefined") { 10987 return ""; 10988 } 10989 const styles = window.getComputedStyle(document.documentElement, "") || ["-moz-hidden-iframe"]; 10990 const pre = (Array.prototype.slice.call(styles).join("").match(/-(moz|webkit|ms)-/) || styles.OLink === "" && ["", "o"])[1]; 10991 return pre ? `-${pre}-` : ""; 10992})(); 10993function on(el, event, fn) { 10994 if (window.addEventListener) { 10995 el.addEventListener(event, fn, supportPassive || !IE11OrLess ? captureMode : false); 10996 } else if (window.attachEvent) { 10997 el.attachEvent("on" + event, fn); 10998 } else { 10999 el["on" + event] = fn; 11000 } 11001} 11002function off(el, event, fn) { 11003 if (window.removeEventListener) { 11004 el.removeEventListener(event, fn, supportPassive || !IE11OrLess ? captureMode : false); 11005 } else if (window.detachEvent) { 11006 el.detachEvent("on" + event, fn); 11007 } else { 11008 el["on" + event] = null; 11009 } 11010} 11011function getParentAutoScrollElement(el, includeSelf) { 11012 if (!el || !el.getBoundingClientRect) { 11013 return getWindowScrollingElement(); 11014 } 11015 let elem = el; 11016 do { 11017 if (elem.clientWidth < elem.scrollWidth || elem.clientHeight < elem.scrollHeight) { 11018 const elemCSS = css(elem); 11019 if (elem.clientWidth < elem.scrollWidth && (elemCSS.overflowX == "auto" || elemCSS.overflowX == "scroll") || elem.clientHeight < elem.scrollHeight && (elemCSS.overflowY == "auto" || elemCSS.overflowY == "scroll")) { 11020 if (!elem.getBoundingClientRect || elem === document.body) { 11021 return getWindowScrollingElement(); 11022 } 11023 return elem; 11024 } 11025 } 11026 } while (elem = elem.parentNode); 11027 return getWindowScrollingElement(); 11028} 11029function getWindowScrollingElement() { 11030 return document.scrollingElement || document.documentElement; 11031} 11032function getRect(el, relativeToContainingBlock, container) { 11033 if (!el.getBoundingClientRect && el !== window) 11034 return; 11035 let elRect, top, left, bottom, right, height, width; 11036 if (el !== window && el.parentNode && el !== getWindowScrollingElement()) { 11037 elRect = el.getBoundingClientRect(); 11038 top = elRect.top; 11039 left = elRect.left; 11040 bottom = elRect.bottom; 11041 right = elRect.right; 11042 height = elRect.height; 11043 width = elRect.width; 11044 } else { 11045 top = 0; 11046 left = 0; 11047 bottom = window.innerHeight; 11048 right = window.innerWidth; 11049 height = window.innerHeight; 11050 width = window.innerWidth; 11051 } 11052 if (relativeToContainingBlock && el !== window) { 11053 container = container || el.parentNode; 11054 do { 11055 if (container && container.getBoundingClientRect) { 11056 const containerRect = container.getBoundingClientRect(); 11057 top -= containerRect.top + parseInt(css(container, "border-top-width")); 11058 left -= containerRect.left + parseInt(css(container, "border-left-width")); 11059 bottom = top + elRect.height; 11060 right = left + elRect.width; 11061 break; 11062 } 11063 } while (container = container.parentNode); 11064 } 11065 return { 11066 top, 11067 left, 11068 bottom, 11069 right, 11070 width, 11071 height 11072 }; 11073} 11074function closest(el, selector, ctx, includeCTX) { 11075 if (!el) 11076 return; 11077 if (ctx && !selector) { 11078 const children = Array.prototype.slice.call(ctx.children); 11079 for (let i = 0, len = children.length; i < len; i++) { 11080 if (children[i] === el || containes(el, children[i])) { 11081 return children[i]; 11082 } 11083 } 11084 } 11085 ctx = ctx || document; 11086 do { 11087 if (selector != null && (selector[0] === ">" ? el.parentNode === ctx && matches(el, selector) : matches(el, selector)) || includeCTX && el === ctx) { 11088 return el; 11089 } 11090 if (el === ctx) 11091 break; 11092 } while (el = el.parentNode); 11093 return null; 11094} 11095function containes(el, root) { 11096 if (!el || !root) 11097 return false;
11098 if (root.compareDocumentPosition) { 11099 return !!(root.compareDocumentPosition(el) & 16); 11100 } 11101 if (root.contains && el.nodeType === 1) { 11102 return root.contains(el) && root !== el; 11103 } 11104 while (el = el.parentNode) 11105 if (el === root) 11106 return true; 11107 return false; 11108} 11109function lastChild(el, selector) { 11110 let last = el.lastElementChild; 11111 while (last && (last === Sortable$1.ghost || css(last, "display") === "none" || selector)) { 11112 last = last.previousElementSibling; 11113 } 11114 return last || null; 11115} 11116function index(el, selector) { 11117 if (!el || !el.parentNode) { 11118 return -1; 11119 } 11120 let index2 = 0; 11121 while (el = el.previousElementSibling) { 11122 if (el.nodeName.toUpperCase() !== "TEMPLATE" && (!selector || matches(el, selector)) && css(el, "display") !== "none") { 11123 index2++; 11124 } 11125 } 11126 return index2; 11127} 11128function getChild(el, childNum, selector, includeDragEl) { 11129 let i = 0; 11130 let currentChild = 0; 11131 const children = el.children; 11132 while (i < children.length) { 11133 if (children[i] !== Sortable$1.ghost && css(children[i], "display") !== "none" && closest(children[i], selector, el, false) && children[i] !== Sortable$1.dragged) { 11134 if (currentChild === childNum) { 11135 return children[i]; 11136 } 11137 currentChild++; 11138 } 11139 i++; 11140 } 11141 return null; 11142} 11143function detectDirection(el, selector) { 11144 const elCSS = css(el), elWidth = parseInt(elCSS.width) - parseInt(elCSS.paddingLeft) - parseInt(elCSS.paddingRight) - parseInt(elCSS.borderLeftWidth) - parseInt(elCSS.borderRightWidth), child1 = getChild(el, 0, selector), child2 = getChild(el, 1, selector), child1CSS = child1 && css(child1), child2CSS = child2 && css(child2), child1Width = child1CSS && parseInt(child1CSS.marginLeft) + parseInt(child1CSS.marginRight) + getRect(child1).width, child2Width = child2CSS && parseInt(child2CSS.marginLeft) + parseInt(child2CSS.marginRight) + getRect(child2).width, CSSFloatProperty = Edge || IE11OrLess ? "cssFloat" : "float"; 11145 if (elCSS.display === "flex") { 11146 return elCSS.flexDirection === "column" || elCSS.flexDirection === "column-reverse" ? "vertical" : "horizontal"; 11147 } 11148 if (elCSS.display === "grid") { 11149 return elCSS.gridTemplateColumns.split(" ").length <= 1 ? "vertical" : "horizontal"; 11150 } 11151 if (child1 && child1CSS.float && child1CSS.float !== "none") { 11152 const touchingSideChild2 = child1CSS.float === "left" ? "left" : "right"; 11153 return child2 && (child2CSS.clear === "both" || child2CSS.clear === touchingSideChild2) ? "vertical" : "horizontal"; 11154 } 11155 return child1 && (child1CSS.display === "block" || child1CSS.display === "flex" || child1CSS.display === "table" || child1CSS.display === "grid" || child1Width >= elWidth && elCSS[CSSFloatProperty] === "none" || child2 && elCSS[CSSFloatProperty] === "none" && child1Width + child2Width > elWidth) ? "vertical" : "horizontal"; 11156} 11157function toggleClass(el, name, state) { 11158 if (el && name) { 11159 if (el.classList) { 11160 el.classList[state ? "add" : "remove"](name); 11161 } else { 11162 const className = (" " + el.className + " ").replace(R_SPACE, " ").replace(" " + name + " ", " "); 11163 el.className = (className + (state ? " " + name : "")).replace(R_SPACE, " "); 11164 } 11165 } 11166} 11167function matches(el, selector) { 11168 if (!selector) 11169 return; 11170 selector[0] === ">" && (selector = selector.substring(1)); 11171 if (el) { 11172 try { 11173 if (el.matches) { 11174 return el.matches(selector); 11175 } else if (el.msMatchesSelector) { 11176 return el.msMatchesSelector(selector); 11177 } else if (el.webkitMatchesSelector) { 11178 return el.webkitMatchesSelector(selector); 11179 } 11180 } catch (error) { 11181 return false; 11182 } 11183 } 11184 return false; 11185} 11186function css(el, prop, val) { 11187 const style = el && el.style; 11188 if (style) { 11189 if (val === void 0) { 11190 if (document.defaultView && document.defaultView.getComputedStyle) { 11191 val = document.defaultView.getComputedStyle(el, ""); 11192 } else if (el.currentStyle) { 11193 val = el.currentStyle; 11194 } 11195 return prop === void 0 ? val : val[prop]; 11196 } else { 11197 if (!(prop in style) && prop.indexOf("webkit") === -1) { 11198 prop = "-webkit-" + prop; 11199 } 11200 style[prop] = val + (typeof val === "string" ? "" : "px"); 11201 } 11202 } 11203} 11204function comparePosition(a, b) { 11205 return a.compareDocumentPosition ? a.compareDocumentPosition(b) : a.contains ? (a != b && a.contains(b) && 16) + (a != b && b.contains(a) && 8) + (a.sourceIndex >= 0 && b.sourceIndex >= 0 ? (a.sourceIndex < b.sourceIndex && 4) + (a.sourceIndex > b.sourceIndex && 2) : 1) : 0; 11206} 11207function sort(before, after) { 11208 const compareValue = comparePosition(before, after); 11209 return compareValue === 2 ? 1 : compareValue === 4 ? -1 : 0; 11210} 11211function preventDefault(evt) { 11212 evt.preventDefault !== void 0 && evt.cancelable && evt.preventDefault(); 11213} 11214function dispatchEvent({ sortable, name, params }) {
11215 const callback = sortable.options[name]; 11216 if (typeof callback === "function") { 11217 callback(Object.assign({}, params)); 11218 } 11219} 11220const expando = "Sortable" + Date.now(); 11221function AutoScroll(options) { 11222 this.options = options; 11223 this.autoScrollAnimationFrame = null; 11224} 11225AutoScroll.prototype = { 11226 destroy() { 11227 if (!this.autoScrollAnimationFrame) 11228 return; 11229 cancelAnimationFrame(this.autoScrollAnimationFrame); 11230 this.autoScrollAnimationFrame = null; 11231 }, 11232 update(scrollEl, dragEvent2, moveEvent2) { 11233 cancelAnimationFrame(this.autoScrollAnimationFrame); 11234 this.autoScrollAnimationFrame = requestAnimationFrame(() => { 11235 if (dragEvent2 && moveEvent2) { 11236 this.autoScroll(scrollEl, moveEvent2); 11237 } 11238 this.update(scrollEl, dragEvent2, moveEvent2); 11239 }); 11240 }, 11241 autoScroll(scrollEl, evt) { 11242 if (!scrollEl || evt.clientX === void 0 || evt.clientY === void 0) 11243 return; 11244 const rect = getRect(scrollEl); 11245 if (!rect) 11246 return; 11247 const { clientX, clientY } = evt; 11248 const { top, right, bottom, left, height, width } = rect; 11249 if (clientY < top || clientX > right || clientY > bottom || clientX < left) 11250 return; 11251 const { scrollThreshold, scrollSpeed } = this.options; 11252 const { scrollTop, scrollLeft, scrollHeight, scrollWidth } = scrollEl; 11253 const toTop = scrollTop > 0 && clientY >= top && clientY <= top + scrollThreshold, toLeft = scrollLeft > 0 && clientX >= left && clientX <= left + scrollThreshold, toRight = scrollLeft + width < scrollWidth && clientX <= right && clientX >= right - scrollThreshold, toBottom = scrollTop + height < scrollHeight && clientY <= bottom && clientY >= bottom - scrollThreshold; 11254 if (toLeft) { 11255 scrollEl.scrollLeft += Math.floor( 11256 Math.max(-1, (clientX - left) / scrollThreshold - 1) * scrollSpeed.x 11257 ); 11258 } 11259 if (toRight) { 11260 scrollEl.scrollLeft += Math.ceil( 11261 Math.min(1, (clientX - right) / scrollThreshold + 1) * scrollSpeed.x 11262 ); 11263 } 11264 if (toTop) { 11265 scrollEl.scrollTop += Math.floor( 11266 Math.max(-1, (clientY - top) / scrollThreshold - 1) * scrollSpeed.y 11267 ); 11268 } 11269 if (toBottom) { 11270 scrollEl.scrollTop += Math.ceil( 11271 Math.min(1, (clientY - bottom) / scrollThreshold + 1) * scrollSpeed.y 11272 ); 11273 } 11274 } 11275}; 11276function Animation(options) { 11277 this.options = options; 11278 this.stack = []; 11279} 11280Animation.prototype = { 11281 collect(parentEl2) { 11282 if (!parentEl2) 11283 return; 11284 const parentRect = getRect(parentEl2), docWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, docHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight, maxWidth = Math.min(parentRect.right, docWidth), maxHeight = Math.min(parentRect.bottom, docHeight), children = Array.prototype.slice.call(parentEl2.children), animations = []; 11285 for (let i = 0, len = children.length; i <= len; i++) { 11286 const el = children[i]; 11287 if (!el || el === Sortable$1.ghost || css(el, "display") === "none") 11288 continue; 11289 const rect = getRect(el); 11290 if (rect.bottom < 0 || rect.right < 0) 11291 continue; 11292 if (rect.top - rect.height > maxHeight || rect.left - rect.width > maxWidth) 11293 break; 11294 animations.push({ el, rect }); 11295 } 11296 this.stack.push(animations); 11297 }, 11298 animate() { 11299 const animations = this.stack.pop(); 11300 for (let i = 0, len = animations.length; i < len; i++) { 11301 const { el, rect } = animations[i]; 11302 this.options.animation && this._excute(el, rect); 11303 } 11304 }, 11305 _excute(el, fromRect) { 11306 const toRect = getRect(el); 11307 if (toRect.top === fromRect.top && toRect.left === fromRect.left) 11308 return; 11309 const dx = fromRect.left - toRect.left; 11310 const dy = fromRect.top - toRect.top; 11311 css(el, "transition", ""); 11312 css(el, "transform", "translate3d(" + dx + "px, " + dy + "px, 0)"); 11313 el.offsetWidth; 11314 const { animation, easing } = this.options; 11315 css(el, "transition", "transform " + animation + "ms" + (easing ? " " + easing : "")); 11316 css(el, "transform", "translate3d(0px, 0px, 0px)"); 11317 typeof el.animated === "number" && clearTimeout(el.animated); 11318 el.animated = setTimeout(() => { 11319 css(el, "transition", ""); 11320 css(el, "transform", ""); 11321 el.animated = null; 11322 }, animation); 11323 } 11324}; 11325let dragElements, cloneElements; 11326function Multiple(options) { 11327 this.options = options || {}; 11328 this.selectedElements = []; 11329} 11330Multiple.prototype = { 11331 destroy() { 11332 dragElements = cloneElements = null; 11333 }, 11334 active() { 11335 return !!dragElements; 11336 }, 11337 setParams(params) { 11338 params.nodes = dragElements || []; 11339 params.clones = cloneElements || []; 11340 }, 11341 select(element) { 11342 toggleClass(element, this.options.selectedClass, true); 11343 this.selectedElements.push(element); 11344 this.selectedElements.sort((a, b) => sort(a, b)); 11345 }, 11346 deselect(element) { 11347 const index2 = this.selectedElements.indexOf(element); 11348 if (index2 > -1) { 11349 toggleClass(element, this.options.selectedClass, false); 11350 this.selectedElements.splice(index2, 1); 11351 } 11352 }, 11353 getGhostElement() { 11354 if (!dragElements) 11355 return null; 11356 const container = document.createElement("div");
11357 this.selectedElements.forEach((node, index2) => { 11358 const clone2 = node.cloneNode(true); 11359 const opacity = index2 === 0 ? 1 : 0.5; 11360 clone2.style = `position: absolute;left: 0;top: 0;bottom: 0;right: 0;opacity: ${opacity};z-index: ${index2};`; 11361 container.appendChild(clone2); 11362 }); 11363 return container; 11364 }, 11365 toggleSelected(elements, add) { 11366 if (add) { 11367 elements.forEach((el) => this.selectedElements.push(el)); 11368 } else { 11369 this.selectedElements = this.selectedElements.filter((el) => elements.indexOf(el) < 0); 11370 } 11371 }, 11372 toggleClass(bool) { 11373 if (!dragElements) 11374 return; 11375 for (let i = 0; i < dragElements.length; i++) { 11376 toggleClass(dragElements[i], this.options.chosenClass, bool); 11377 } 11378 }, 11379 toggleVisible(bool) { 11380 if (!dragElements) 11381 return; 11382 if (bool) { 11383 const dragIndex = dragElements.indexOf(Sortable$1.dragged); 11384 this._viewElements(dragElements, dragIndex, Sortable$1.dragged); 11385 } else { 11386 this._hideElements(dragElements); 11387 } 11388 }, 11389 onChoose() { 11390 if (!this.options.multiple || !this.selectedElements.length || this.selectedElements.indexOf(Sortable$1.dragged) < 0) { 11391 return; 11392 } 11393 this.selectedElements.sort((a, b) => sort(a, b)); 11394 dragElements = this.selectedElements; 11395 this.toggleClass(true); 11396 }, 11397 onDrag(sortable) { 11398 if (!dragElements) 11399 return; 11400 sortable.animator.collect(Sortable$1.dragged.parentNode); 11401 this._hideElements(dragElements); 11402 sortable.animator.animate(); 11403 this.toggleClass(false); 11404 }, 11405 onDrop(from2, to2, pullMode2) { 11406 if (!dragElements) 11407 return; 11408 const dragEl2 = Sortable$1.dragged, cloneEl2 = Sortable$1.clone, dragIndex = dragElements.indexOf(dragEl2); 11409 to2[expando].animator.collect(cloneEl2.parentNode); 11410 if (from2 !== to2 && pullMode2 === "clone") { 11411 css(cloneEl2, "display", "none"); 11412 cloneElements = dragElements.map((node) => node.cloneNode(true)); 11413 this._viewElements(cloneElements, dragIndex, cloneEl2); 11414 this._viewElements(dragElements, dragIndex, dragEl2); 11415 } else { 11416 this._viewElements(dragElements, dragIndex, cloneEl2); 11417 } 11418 to2[expando].animator.animate(); 11419 if (from2 !== to2) { 11420 to2[expando].multiplayer.toggleSelected(cloneElements || dragElements, true); 11421 if (pullMode2 !== "clone") { 11422 from2[expando].multiplayer.toggleSelected(dragElements, false); 11423 } 11424 } 11425 }, 11426 onSelect(event, dragEl2, sortable) { 11427 const dragIndex = this.selectedElements.indexOf(dragEl2); 11428 toggleClass(dragEl2, this.options.selectedClass, dragIndex < 0); 11429 const params = { from: sortable.el, event, node: dragEl2, index: index(dragEl2) }; 11430 if (dragIndex < 0) { 11431 this.selectedElements.push(dragEl2); 11432 dispatchEvent({ sortable, name: "onSelect", params }); 11433 } else { 11434 this.selectedElements.splice(dragIndex, 1); 11435 dispatchEvent({ sortable, name: "onDeselect", params }); 11436 } 11437 this.selectedElements.sort((a, b) => sort(a, b)); 11438 }, 11439 _viewElements(elements, index2, target) { 11440 for (let i = 0; i < elements.length; i++) { 11441 css(elements[i], "display", ""); 11442 if (i < index2) { 11443 target.parentNode.insertBefore(elements[i], target); 11444 } else { 11445 const dropEl2 = i > 0 ? elements[i - 1] : target; 11446 target.parentNode.insertBefore(elements[i], dropEl2.nextSibling); 11447 } 11448 } 11449 }, 11450 _hideElements(elements) { 11451 for (let i = 0; i < elements.length; i++) { 11452 if (elements[i] == Sortable$1.dragged) 11453 continue; 11454 css(elements[i], "display", "none"); 11455 } 11456 } 11457}; 11458const sortables = []; 11459let to, from, fromEl, dragEl, dropEl, nextEl, cloneEl, ghostEl, targetEl, parentEl, pullMode, oldIndex, newIndex, fromIndex, dragEvent, moveEvent, lastDropEl, cloneEvent, cloneTarget, listenerNode, lastHoverArea, dragStartTimer, useSelectHandle; 11460function _shouldAppendGhostToBody(el) { 11461 try { 11462 const doc = el && el.ownerDocument; 11463 const body = doc && doc.body; 11464 let node = el; 11465 while (node && node !== body && node.nodeType === 1) { 11466 const style = doc.defaultView && doc.defaultView.getComputedStyle(node); 11467 if (!style) { 11468 break; 11469 } 11470 const transform = style.transform; 11471 const perspective = style.perspective; 11472 const filter = style.filter; 11473 const contain = style.contain || style.getPropertyValue("contain"); 11474 const willChange = style.willChange; 11475 const backdrop = style.getPropertyValue("backdrop-filter") || style.getPropertyValue("-webkit-backdrop-filter");
11476 if (transform && transform !== "none" || perspective && perspective !== "none" || filter && filter !== "none" || backdrop && backdrop !== "none" || contain && contain.includes("paint") || willChange && /transform|filter|backdrop-filter/i.test(willChange)) { 11477 return true; 11478 } 11479 node = node.parentElement; 11480 } 11481 } catch (e) { 11482 } 11483 return false; 11484} 11485function _prepareGroup(options) { 11486 const group = {}; 11487 let originalGroup = options.group; 11488 if (!originalGroup || typeof originalGroup != "object") { 11489 originalGroup = { name: originalGroup, pull: true, put: true, revertDrag: true }; 11490 } 11491 group.name = originalGroup.name; 11492 group.pull = originalGroup.pull; 11493 group.put = originalGroup.put; 11494 group.revertDrag = originalGroup.revertDrag; 11495 options.group = group; 11496} 11497function _detectNearestSortable(x, y) { 11498 let nearestRect; 11499 return sortables.reduce((result, sortable) => { 11500 const threshold = sortable[expando].options.emptyInsertThreshold; 11501 if (threshold == void 0) 11502 return; 11503 const rect = getRect(sortable), insideHorizontally = x >= rect.left - threshold && x <= rect.right + threshold, insideVertically = y >
11503= rect.top - threshold && y <= rect.bottom + threshold; 11504 if (insideHorizontally && insideVertically && (!nearestRect || nearestRect && rect.left >= nearestRect.left && rect.right <= nearestRect.right && rect.top >= nearestRect.top && rect.bottom <= nearestRect.bottom)) { 11505 result = sortable; 11506 nearestRect = rect; 11507 } 11508 return result; 11509 }, null); 11510} 11511function _positionChanged(evt) { 11512 const lastEvent = moveEvent || dragEvent; 11513 return !(evt.clientX !== void 0 && evt.clientY !== void 0 && Math.abs(evt.clientX - lastEvent.clientX) <= 2 && Math.abs(evt.clientY - lastEvent.clientY) <= 2); 11514} 11515function _styleCloneEl(element) { 11516 if (!element) { 11517 return; 11518 } 11519 css(element, "background", "var(--zoom-color-state-subtle-primary-hover)"); 11520 css(element, "border-color", "transparent"); 11521 (element.querySelectorAll ? element.querySelectorAll("*") : []).forEach( 11522 (child) => css(child, "opacity", "0") 11523 ); 11524} 11525function Sortable$1(el, options) { 11526 if (!(el && el.nodeType && el.nodeType === 1)) { 11527 throw `Sortable-dnd: \`el\` must be an HTMLElement, not ${{}.toString.call(el)}`; 11528 } 11529 el[expando] = this; 11530 this.el = el; 11531 this.options = options = Object.assign({}, options); 11532 const defaults = { 11533 store: null, 11534 group: "", 11535 handle: null, 11536 sortable: true, 11537 disabled: false, 11538 multiple: false, 11539 lockAxis: "", 11540 direction: "", 11541 animation: 150, 11542 easing: "", 11543 draggable: null, 11544 selectHandle: null, 11545 customGhost: null, 11546 autoScroll: true, 11547 scrollThreshold: 55, 11548 scrollSpeed: { x: 10, y: 10 }, 11549 delay: 0, 11550 delayOnTouchOnly: false, 11551 touchStartThreshold: (Number.parseInt ? Number : window).parseInt(window.devicePixelRatio, 10) || 1, 11552 ghostClass: "", 11553 ghostStyle: {}, 11554 chosenClass: "", 11555 selectedClass: "", 11556 swapOnDrop: true, 11557 fallbackOnBody: false, 11558 supportTouch: isTouchDevice(), 11559 emptyInsertThreshold: -1 11560 }; 11561 for (const name in defaults) { 11562 !(name in this.options) && (this.options[name] = defaults[name]); 11563 } 11564 _prepareGroup(options); 11565 for (const fn in this) { 11566 if (fn.charAt(0) === "_" && typeof this[fn] === "function") { 11567 this[fn] = this[fn].bind(this); 11568 } 11569 } 11570 on(el, "mousedown", this._onDrag); 11571 if (this.options.supportTouch) { 11572 on(el, "touchstart", this._onDrag); 11573 } 11574 sortables.push(el); 11575 this.autoScroller = new AutoScroll(this.options); 11576 this.multiplayer = new Multiple(this.options); 11577 this.animator = new Animation(this.options); 11578} 11579Sortable$1.prototype = { 11580 constructor: Sortable$1, 11581 destroy() { 11582 this._cancelStart(); 11583 this._nulling(); 11584 off(this.el, "touchstart", this._onDrag); 11585 off(this.el, "mousedown", this._onDrag); 11586 const index2 = sortables.indexOf(this.el); 11587 index2 > -1 && sortables.splice(index2, 1); 11588 this.el[expando] = this.animator = this.multiplayer = this.autoScroller = null; 11589 }, 11590 option(key, value) { 11591 if (value === void 0) { 11592 return this.options[key]; 11593 } 11594 this.options[key] = value; 11595 this.animator.options[key] = value; 11596 this.multiplayer.options[key] = value; 11597 this.autoScroller.options[key] = value; 11598 if (key === "group") { 11599 _prepareGroup(this.options); 11600 } 11601 }, 11602 select(element) { 11603 this.multiplayer.select(element); 11604 }, 11605 deselect(element) { 11606 this.multiplayer.deselect(element); 11607 }, 11608 getSelectedElements() { 11609 return this.multiplayer.selectedElements; 11610 }, 11611 drag(event) { 11612 const target = event.target; 11613 dragEvent = { 11614 event, 11615 clientX: event.clientX, 11616 clientY: event.clientY 11617 }; 11618 dragEl = closest(target, this.options.draggable, this.el); 11619 listenerNode = document; 11620 css(this.el, "cursor", "grabbing"); 11621 on(listenerNode, "mouseup", this._onDrop); 11622 this._onStart(false, event); 11623 }, 11624 _onDrag(event) { 11625 if (dragEl || this.options.disabled || !this.options.group.pull) 11626 return; 11627 if (/mousedown|pointerdown/.test(event.type) && event.button !== 0) 11628 return; 11629 const touch = event.touches && event.touches[0], target = (touch || event).target; 11630 if (Safari && target && target.tagName.toUpperCase() === "SELECT") 11631 return; 11632 if (target) { 11633 const tagName = target.tagName.toUpperCase(); 11634 const isEditableElement = tagName === "INPUT" || tagName === "TEXTAREA" || tagName === "SELECT"; 11635 const isContentEditable = target.isContentEditable || target.getAttribute && target.getAttribute("contenteditable") === "true"; 11636 let editableParent = null; 11637 if (!isEditableElement) { 11638 let parent = target.parentElement; 11639 while (parent && parent !== this.el) { 11640 const parentTag = parent.tagName.toUpperCase(); 11641 if (parentTag === "INPUT" || parentTag === "TEXTAREA" || parentTag === "SELECT") { 11642 editableParent = parent; 11643 break; 11644 } 11645 if (parent.isContentEditable || parent.getAttribute && parent.getAttribute("contenteditable") === "true") { 11646 editableParent = parent; 11647 break; 11648 } 11649 parent = parent.parentElement; 11650 } 11651 } 11652 if (isEditableElement || isContentEditable || editableParent) { 11653 const { handle: handle2 }
11653 = this.options; 11654 if (handle2) { 11655 if (typeof handle2 === "string") { 11656 const targetMatchesHandle = matches(target, handle2); 11657 const editableParentMatchesHandle = editableParent && matches(editableParent, handle2); 11658 const handleElement = closest(target, handle2, this.el); 11659 if (!targetMatchesHandle && !editableParentMatchesHandle && !handleElement) { 11660 return; 11661 } 11662 } 11663 } else { 11664 return; 11665 } 11666 } 11667 } 11668 const element = closest(target, this.options.draggable, this.el); 11669 if (!element || element.animated) 11670 return; 11671 const { handle, selectHandle } = this.options; 11672 if (typeof selectHandle === "function" && selectHandle(event) || typeof selectHandle === "string" && matches(target, selectHandle)) { 11673 useSelectHandle = true; 11674 dragEvent = { 11675 event, 11676 clientX: (touch || event).clientX, 11677 clientY: (touch || event).clientY 11678 }; 11679 dragEl = element; 11680 listenerNode = touch ? dragEl : document; 11681 css(this.el, "cursor", "grabbing"); 11682 on(listenerNode, "mouseup", this._onDrop); 11683 on(listenerNode, "touchend", this._onDrop); 11684 on(listenerNode, "touchcancel", this._onDrop); 11685 return; 11686 } 11687 if (typeof handle === "function" && !handle(event)) 11688 return; 11689 if (typeof handle === "string" && !matches(target, handle)) 11690 return; 11691 dragEvent = { 11692 event, 11693 clientX: (touch || event).clientX, 11694 clientY: (touch || event).clientY 11695 }; 11696 dragEl = element; 11697 listenerNode = touch ? dragEl : document; 11698 css(this.el, "cursor", "grabbing"); 11699 on(listenerNode, "mouseup", this._onDrop); 11700 on(listenerNode, "touchend", this._onDrop); 11701 on(listenerNode, "touchcancel", this._onDrop); 11702 const { delay, delayOnTouchOnly } = this.options; 11703 if (delay && (!delayOnTouchOnly || touch) && !(Edge || IE11OrLess)) { 11704 on(this.el.ownerDocument, "touchmove", this._delayMoveHandler); 11705 on(this.el.ownerDocument, "mousemove", this._delayMoveHandler); 11706 on(this.el.ownerDocument, "mouseup", this._cancelStart); 11707 on(this.el.ownerDocument, "touchend", this._cancelStart); 11708 on(this.el.ownerDocument, "touchcancel", this._cancelStart); 11709 dragStartTimer = setTimeout(() => this._onStart(touch, event), delay); 11710 } else { 11711 this._onStart(touch, event); 11712 } 11713 on(document, "selectstart", preventDefault); 11714 Safari && css(document.body, "user-select", "none"); 11715 }, 11716 _delayMoveHandler(event) { 11717 const evt = event.touches ? event.touches[0] : event; 11718 if (Math.max( 11719 Math.abs(evt.clientX - dragEvent.clientX), 11720 Math.abs(evt.clientY - dragEvent.clientY) 11721 ) >= Math.floor(this.options.touchStartThreshold / (window.devicePixelRatio || 1))) { 11722 this._cancelStart(); 11723 } 11724 }, 11725 _cancelStart() { 11726 clearTimeout(dragStartTimer); 11727 off(this.el.ownerDocument, "touchmove", this._delayMoveHandler); 11728 off(this.el.ownerDocument, "mousemove", this._delayMoveHandler); 11729 off(this.el.ownerDocument, "mouseup", this._cancelStart); 11730 off(this.el.ownerDocument, "touchend", this._cancelStart); 11731 off(this.el.ownerDocument, "touchcancel", this._cancelStart); 11732 off(document, "selectstart", preventDefault); 11733 Safari && css(document.body, "user-select", ""); 11734 }, 11735 _onStart(touch, event) { 11736 preventDefault(event); 11737 const i = index(dragEl); 11738 to = this.el; 11739 from = this.el; 11740 targetEl = dragEl; 11741 oldIndex = i; 11742 newIndex = i; 11743 fromIndex = i; 11744 cloneEvent = { to: this.el, target: dragEl, newIndex: i, relative: 0 }; 11745 cloneTarget = dragEl; 11746 fromEl = this.el; 11747 cloneEl = dragEl.cloneNode(true); 11748 parentEl = dragEl.parentNode; 11749 pullMode = this.options.group.pull; 11750 Sortable$1.clone = cloneEl; 11751 Sortable$1.active = this; 11752 Sortable$1.dragged = dragEl; 11753 toggleClass(dragEl, this.options.chosenClass, true); 11754 this.multiplayer.onChoose(); 11755 dispatchEvent({ 11756 sortable: this, 11757 name: "onChoose", 11758 params: this._getParams(event) 11759 }); 11760 on(listenerNode, touch ? "touchmove" : "mousemove", this._nearestSortable); 11761 try { 11762 if (document.selection) { 11763 setTimeout(() => document.selection.empty(), 0); 11764 } else { 11765 window.getSelection().removeAllRanges(); 11766 } 11767 } catch (error) { 11768 } 11769 }, 11770 _onStarted() { 11771 toggleClass(cloneEl, this.options.chosenClass, true); 11772 this._appendGhost(); 11773 this.multiplayer.onDrag(this); 11774 dispatchEvent({ 11775 sortable: this, 11776 name: "onDrag", 11777 params: this._getParams(dragEvent.event) 11778 }); 11779 css(dragEl, "display", "none"); 11780 _styleCloneEl(cloneEl); 11781 toggleClass(dragEl, this.options.chosenClass, false); 11782 dragEl.parentNode.insertBefore(cloneEl, dragEl); 11783 }, 11784 _getGhostElement() { 11785 const { customGhost } = this.options; 11786 if (typeof customGhost === "function") { 11787 const selects = this.multiplayer.selectedElements; 11788 return customGhost(selects.length ? selects : [dragEl]); 11789 } 11790 return this.multiplayer.getGhostElement() || dragEl; 11791 }, 11792 _appendGhost() { 11793 if (ghostEl) 11794 return; 11795 const doc = this.el.ownerDocument; 11796 const container = this.options.fallbackOnBody || _shouldAppendGhostToBody(this.el) ? doc.body : this.el; 11797 const element = this._getGhostElement(); 11798 ghostEl = element.cloneNode(true); 11799 toggleClass(ghostEl, this.options.ghostClass, true); 11800 const rect = getRect(dragEl); 11801 const style = Object.assign( 11802 { 11803 position: "fixed", 11804 top: rect.top, 11805 left: rect.left, 11806 width: rect.width, 11807 height: rect.height, 11808 zIndex: "100000", 11809 overflow: "hidden", 11810 boxSizing: "border-box", 11811 transform: "translate3d(0px, 0px, 0px)", 11812 transition: "none", 11813 pointerEvents: "none", 11814 backgroundColor: "var(--zoom-color-fill-default)", 11815 boxShadow: "0 2px 4px 0 rgb(0 0 0 / 0.08), 0 4px 8px 0 rgb(0 0 0 / 0.08)" 11816 }, 11817 this.options.ghostStyle 11818 ); 11819 for (const key in style) { 11820 css(ghostEl, key, style[key]); 11821 } 11822 this._modifyGhost(ghostEl); 11823 Sortable$1.ghost = ghostEl; 11824 container.appendChild(ghostEl); 11825 const ox = (dragEvent.clientX - rect.left) / parseInt(ghostEl.style.width) * 100; 11826 const oy = (dragEvent.clientY - rect.top) / parseInt(ghostEl.style.height) * 100; 11827 css(ghostEl, "transform-origin", ox + "% " + oy + "%"); 11828 css(ghostEl, "will-change", "transform"); 11829 }, 11830 _modifyGhost(ghostEl2) { 11831 const cols = this.el.parentNode.querySelectorAll("colgroup > col") || []; 11832 for (let i = 0, j = cols.length; i < j; i++) { 11833 const col = cols[i]; 11834 const td = ghostEl2.childNodes[i]; 11835 const width = col.getAttribute("width") + "px"; 11836 td.style.width = width; 11837 } 11838 }, 11839 _nearestSortable(event) { 11840 preventDefault(event); 11841 css(this.el, "cursor", "grabbing"); 11842 const touch = event.touches && event.touches[0], evt = touch || event; 11843 if (!dragEl || !_positionChanged(evt)) 11844 return; 11845 !moveEvent && this._onStarted(); 11846 const lockAxis = this.options.lockAxis, clientX = lockAxis === "x" ? dragEvent.clientX : evt.clientX, clientY = lockAxis === "y" ? dragEvent.clientY : evt.clientY, target = document.elementFromPoint(clientX, clientY), dx = clientX - dragEvent.clientX, dy = clientY - dragEvent.clientY; 11847 moveEvent = { 11848 event, 11849 clientX, 11850 clientY 11851 }; 11852 css(ghostEl, "transform", "translate3d(" + dx + "px, " + dy + "px, 0)"); 11853 const nearest = _detectNearestSortable(clientX, clientY); 11854 let targetSortable = nearest; 11855 if (fromEl) { 11856 const rect = getRect(fromEl); 11857 const insideFrom = rect && clientX >
11857= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom; 11858 if (insideFrom) { 11859 targetSortable = fromEl; 11860 } 11861 } 11862 targetSortable && targetSortable[expando]._onMove(event, target); 11863 if (!nearest || nearest[expando].options.autoScroll) { 11864 const scrollEl = getParentAutoScrollElement(target); 11865 this.autoScroller.update(scrollEl, dragEvent, moveEvent); 11866 } else { 11867 this.autoScroller.destroy(); 11868 } 11869 }, 11870 _allowPut() { 11871 if (fromEl === this.el) { 11872 return true; 11873 } else if (!this.options.group.put) { 11874 return false; 11875 } else { 11876 const { name, put } = this.options.group; 11877 const fromGroup = fromEl[expando].options.group; 11878 return put.join && put.indexOf(fromGroup.name) > -1 || fromGroup.name && name && fromGroup.name === name; 11879 } 11880 }, 11881 _getDirection() { 11882 const { draggable, direction } = this.options; 11883 return direction ? typeof direction === "function" ? direction.call(moveEvent.event, dragEl, this) : direction : detectDirection(parentEl, draggable); 11884 }, 11885 _allowSwap() { 11886 const rect = getRect(dropEl), vertical = this._getDirection() === "vertical", front = vertical ? "top" : "left", behind = vertical ? "bottom" : "right", dropElSize = dropEl[vertical ? "offsetHeight" : "offsetWidth"], mouseAxis = vertical ? moveEvent.clientY : moveEvent.clientX, hoverArea = mouseAxis >= rect[front] && mouseAxis < rect[behind] - dropElSize / 2 ? -1 : 1, childf = getChild(parentEl, 0, this.options.draggable), childl = lastChild(parentEl), childfRect = getRect(childf), childlRect = getRect(childl); 11887 if (dropEl === parentEl || containes(parentEl, dropEl)) { 11888 if (cloneEl === childf && mouseAxis < childfRect[front]) { 11889 nextEl = dropEl; 11890 return true; 11891 } 11892 if (cloneEl === childl && mouseAxis > childlRect[behind]) { 11893 nextEl = dropEl.nextSibling; 11894 return true; 11895 } 11896 return false; 11897 } 11898 const order = sort(cloneEl, dropEl); 11899 nextEl = order < 0 ? dropEl.nextSibling : dropEl; 11900 if (lastDropEl !== dropEl) { 11901 lastHoverArea = hoverArea; 11902 return true; 11903 } 11904 if (lastHoverArea !== hoverArea) { 11905 lastHoverArea = hoverArea; 11906 return hoverArea < 0 ? order > 0 : order < 0; 11907 } 11908 return false; 11909 }, 11910 _onMove(event, target) { 11911 if (this.options.disabled || !this._allowPut()) 11912 return; 11913 dropEl = closest(target, this.options.draggable, this.el); 11914 dispatchEvent({ 11915 sortable: this, 11916 name: "onMove", 11917 params: this._getParams(event, { 11918 target: dropEl 11919 }) 11920 }); 11921 if (!this.options.sortable && this.el === fromEl) { 11922 if (from !== fromEl) { 11923 dropEl = lastDropEl = dragEl; 11924 lastHoverArea = 0; 11925 this._onInsert(event); 11926 } 11927 return; 11928 } 11929 if (this.el !== from && (target === this.el || !lastChild(this.el))) { 11930 dropEl = lastDropEl = null; 11931 this._onInsert(event); 11932 return; 11933 } 11934 if (!dropEl || dropEl.animated || containes(dropEl, cloneEl) || !this._allowSwap()) 11935 return; 11936 if (dropEl === cloneEl || nextEl === cloneEl) { 11937 lastDropEl = dropEl; 11938 return; 11939 } 11940 if (this.el !== from) { 11941 this._onInsert(event); 11942 } else if (dropEl !== dragEl) { 11943 this._onChange(event); 11944 } 11945 lastDropEl = dropEl; 11946 }, 11947 _onInsert(event) { 11948 const target = dropEl || cloneEl, cloneTo = pullMode === "clone" && this.el !== fromEl && from === fromEl, cloneBack = pullMode === "clone" && this.el === fromEl && from !== fromEl, dropExist = containes(dropEl, document), dragRemoved = dropEl === dragEl && !dropExist; 11949 to = this.el; 11950 oldIndex = index(cloneEl); 11951 targetEl = target; 11952 parentEl = dropExist ? dropEl.parentNode : this.el; 11953 from[expando].animator.collect(cloneEl.parentNode); 11954 this.animator.collect(parentEl); 11955 if (cloneTo) { 11956 cloneEvent.target = cloneTarget; 11957 cloneEvent.newIndex = oldIndex; 11958 cloneEvent.relative = cloneTarget === dragEl ? 0 : sort(cloneEl, cloneTarget); 11959 css(dragEl, "display", ""); 11960 fromEl[expando].multiplayer.toggleVisible(true); 11961 if (!fromEl[expando].options.group.revertDrag) { 11962 cloneEl.parentNode.insertBefore(dragEl, cloneEl); 11963 } 11964 } 11965 if (cloneBack) { 11966 oldIndex = index(dragEl); 11967 css(dragEl, "display", "none"); 11968 this.multiplayer.toggleVisible(false); 11969 } 11970 css(cloneEl, "display", dragRemoved ? "none" : ""); 11971 if (dropEl && dropExist) { 11972 parentEl.insertBefore(cloneEl, lastHoverArea < 0 ? dropEl : dropEl.nextSibling); 11973 } else { 11974 parentEl.appendChild(cloneEl); 11975 } 11976 newIndex = dragRemoved ? fromIndex : index(cloneEl); 11977 if (cloneTo && fromEl[expando].options.group.revertDrag) { 11978 cloneEvent.target = dragEl; 11979 cloneEvent.newIndex = fromIndex; 11980 cloneEvent.relative = 0; 11981 dispatchEvent({ 11982 sortable: fromEl[expando], 11983 name: "onChange", 11984 params: this._getParams(event, { 11985 to: fromEl, 11986 target: dragEl, 11987 newIndex: fromIndex, 11988 revertDrag: true 11989 }) 11990 }); 11991 } 11992 if (!cloneTo) { 11993 dispatchEvent({ 11994 sortable: from[expando], 11995 name: "onRemove", 11996 params: this._getParams(event, { newIndex: -1 }) 11997 }); 11998 } 11999 if (cloneBack && target !== dragEl) { 12000 cloneTarget = target; 12001 dispatchEvent({ 12002 sortable: this, 12003 name: "onChange", 12004 params: this._getParams(event, { 12005 from: fromEl, 12006 backToOrigin: true 12007 }) 12008 }); 12009 } 12010 if (!cloneBack) { 12011 dispatchEvent({ 12012 sortable: this, 12013 name: "onAdd", 12014 params: this._getParams(event, { oldIndex: -1 }) 12015 }); 12016 } 12017 from[expando].animator.animate(); 12018 this.animator.animate(); 12019 from = this.el; 12020 }, 12021 _onChange(event) { 12022 oldIndex = index(cloneEl); 12023 parentEl = dropEl.parentNode; 12024 targetEl = dropEl; 12025 if (this.el === fromEl) { 12026 cloneTarget = dropEl; 12027 } 12028 this.animator.collect(parentEl); 12029 parentEl.insertBefore(cloneEl, nextEl); 12030 newIndex = index(cloneEl); 12031 dispatchEvent({ 12032 sortable: this, 12033 name: "onChange", 12034 params: this._getParams(event) 12035 }); 12036 this.animator.animate(); 12037 from = this.el; 12038 }, 12039 _onDrop(event) { 12040 this._cancelStart(); 12041 css(this.el, "cursor", "pointer"); 12042 off(listenerNode, "touchmove", this._nearestSortable); 12043 off(listenerNode, "mousemove", this._nearestSortable); 12044 off(listenerNode, "mouseup", this._onDrop); 12045 off(listenerNode, "touchend", this._onDrop); 12046 off(listenerNode, "touchcancel", this._onDrop); 12047 toggleClass(dragEl, this.options.chosenClass, false); 12048 if (fromEl) { 12049 from = fromEl; 12050 oldIndex = fromIndex; 12051 if (targetEl === cloneEl) { 12052 targetEl = dragEl; 12053 } 12054 this.multiplayer.toggleClass(false); 12055 dispatchEvent({ 12056 sortable: this, 12057 name: "onUnchoose", 12058 params: this._getParams(event) 12059 }); 12060 moveEvent && this._onEnd(event); 12061 } 12062 const { multiple, selectHandle } = this.options; 12063 if (multiple && (selectHandle && useSelectHandle || !selectHandle && !fromEl)) { 12064 const evt = event.changedTouches ? event.changedTouches[0] : event; 12065 !_positionChanged(evt) && this.multiplayer.onSelect(event, dragEl, this); 12066 } 12067 if (ghostEl && ghostEl.parentNode) { 12068 ghostEl.parentNode.removeChild(ghostEl); 12069 } 12070 this.autoScroller.destroy(); 12071 this.multiplayer.destroy();
12072 this._nulling(); 12073 }, 12074 _onEnd(event) { 12075 const params = this._getParams(event); 12076 this.multiplayer.onDrop(from, to, pullMode); 12077 const swapOnDrop = this.options.swapOnDrop; 12078 if ((pullMode !== "clone" || from === to) && (typeof swapOnDrop === "function" ? swapOnDrop(params) : swapOnDrop)) { 12079 parentEl.insertBefore(dragEl, cloneEl); 12080 } 12081 if (pullMode !== "clone" || from === to || this.multiplayer.active()) { 12082 cloneEl && cloneEl.parentNode && cloneEl.parentNode.removeChild(cloneEl); 12083 } else { 12084 toggleClass(cloneEl, this.options.chosenClass, false); 12085 } 12086 css(dragEl, "display", ""); 12087 if (from !== to) { 12088 dispatchEvent({ 12089 sortable: from[expando], 12090 name: "onDrop", 12091 params: Object.assign({}, params, pullMode === "clone" ? cloneEvent : { newIndex: -1 }) 12092 }); 12093 } 12094 dispatchEvent({ 12095 sortable: to[expando], 12096 name: "onDrop", 12097 params: Object.assign({}, params, from === to ? {} : { oldIndex: -1 }) 12098 }); 12099 }, 12100 _getParams(event, params = {}) { 12101 const evt = {}; 12102 evt.event = event; 12103 evt.to = to; 12104 evt.from = from; 12105 evt.node = dragEl; 12106 evt.clone = cloneEl; 12107 evt.target = targetEl; 12108 evt.oldIndex = oldIndex; 12109 evt.newIndex = newIndex; 12110 evt.pullMode = pullMode; 12111 this.multiplayer.setParams(evt); 12112 Object.assign(evt, params); 12113 evt.relative = targetEl === dragEl ? 0 : sort(cloneEl, targetEl); 12114 return evt; 12115 }, 12116 _nulling() { 12117 to = from = fromEl = dragEl = dropEl = nextEl = cloneEl = ghostEl = targetEl = parentEl = pullMode = oldIndex = newIndex = fromIndex = dragEvent = moveEvent = lastDropEl = cloneEvent = cloneTarget = listenerNode = lastHoverArea = dragStartTimer = useSelectHandle = Sortable$1.clone = Sortable$1.ghost = Sortable$1.active = Sortable$1.dragged = null; 12118 } 12119}; 12120Sortable$1.utils = { 12121 on, 12122 off, 12123 css, 12124 index, 12125 closest, 12126 getRect, 12127 toggleClass, 12128 detectDirection 12129}; 12130Sortable$1.get = function(element) { 12131 return element[expando]; 12132}; 12133Sortable$1.create = function(el, options) { 12134 return new Sortable$1(el, options); 12135}; 12136var __defProp$S = Object.defineProperty; 12137var __getOwnPropSymbols$S = Object.getOwnPropertySymbols; 12138var __hasOwnProp$S = Object.prototype.hasOwnProperty; 12139var __propIsEnum$S = Object.prototype.propertyIsEnumerable; 12140var __defNormalProp$S = (obj, key, value) => key in obj ? __defProp$S(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 12141var __spreadValues$S = (a, b) => { 12142 for (var prop in b || (b = {})) 12143 if (__hasOwnProp$S.call(b, prop)) 12144 __defNormalProp$S(a, prop, b[prop]); 12145 if (__getOwnPropSymbols$S) 12146 for (var prop of __getOwnPropSymbols$S(b)) { 12147 if (__propIsEnum$S.call(b, prop)) 12148 __defNormalProp$S(a, prop, b[prop]); 12149 } 12150 return a; 12151}; 12152const rectDir = { 12153 vertical: "top", 12154 horizontal: "left" 12155}; 12156const scrollDir = { 12157 vertical: "scrollTop", 12158 horizontal: "scrollLeft" 12159}; 12160const scrollSize = { 12161 vertical: "scrollHeight", 12162 horizontal: "scrollWidth" 12163}; 12164const offsetSize = { 12165 vertical: "offsetHeight", 12166 horizontal: "offsetWidth" 12167}; 12168class Virtual { 12169 constructor(options) { 12170 var _a; 12171 this.options = options; 12172 const defaults = { 12173 keeps: 0, 12174 buffer: 0, 12175 wrapper: null, 12176 scroller: null, 12177 direction: "vertical", 12178 uniqueKeys: [], 12179 threshold: 1 12180 }; 12181 for (const name in defaults) { 12182 if (!(name in this.options)) { 12183 this.options[name] = defaults[name]; 12184 } 12185 } 12186 this.sizes = /* @__PURE__ */ new Map(); 12187 this.range = { 12188 start: 0, 12189 end: 0, 12190 front: 0, 12191 behind: 0 12192 }; 12193 this.offset = 0; 12194 this.sizeType = "INIT"; 12195 this.fixedSize = 0; 12196 this.averageSize = 0; 12197 this.delta = 0; 12198 this.height = (_a = options.wrapper) == null ? void 0 : _a.offsetHeight; 12199 this.wrapDirection = { 12200 type: "STATIONARY", 12201 count: 0 12202 }; 12203 this.onScroll = throttle(() => { 12204 this.handleScroll(); 12205 }, this.options.throttleTime); 12206 this.registerEvents(); 12207 this.checkIfUpdate(0, options.keeps - 1); 12208 } 12209 isFront() { 12210 return this.wrapDirection.type === "FRONT" && this.shouldUpdate(); 12211 } 12212 isBehind() { 12213 return this.wrapDirection.type === "BEHIND" && this.shouldUpdate(); 12214 } 12215 isFixed() { 12216 return this.sizeType === "FIXED"; 12217 } 12218 getOffset() { 12219 return this.options.scroller[scrollDir[this.options.direction]]; 12220 } 12221 getScrollSize() { 12222 return this.options.scroller[scrollSize[this.options.direction]]; 12223 } 12224 getClientSize() { 12225 return this.options.scroller[offsetSize[this.options.direction]]; 12226 }
12227 getSize(key) { 12228 return this.sizes.get(key) || this.getItemSize(); 12229 } 12230 option(key, value) { 12231 this.options[key] = value; 12232 if (key === "uniqueKeys") { 12233 this.sizes.forEach((_v, k) => { 12234 if (!value.includes(k)) { 12235 this.sizes.delete(k); 12236 } 12237 }); 12238 } 12239 } 12240 updateRange(range) { 12241 if (range) { 12242 this.handleUpdate(range.start, range.end); 12243 return; 12244 } 12245 let start = this.range.start; 12246 start = Math.max(start, 0); 12247 this.handleUpdate(start, this.getEndByStart(start)); 12248 } 12249 onItemResized(key, size2) { 12250 if (!size2 || this.sizes.get(key) === size2) { 12251 return; 12252 } 12253 this.sizes.set(key, size2); 12254 if (this.sizeType === "INIT") { 12255 this.sizeType = "FIXED"; 12256 this.fixedSize = size2; 12257 } else if (this.isFixed() && this.fixedSize !== size2) { 12258 this.sizeType = "DYNAMIC"; 12259 this.fixedSize = 0; 12260 } 12261 if (!this.averageSize && this.sizeType === "DYNAMIC") { 12262 const total = [...this.sizes.values()].reduce((t, i) => t + i, 0); 12263 this.averageSize = Math.round(total / this.sizes.size); 12264 } 12265 } 12266 registerEvents() { 12267 if (this.options.scroller) { 12268 this.options.scroller.addEventListener("scroll", this.onScroll); 12269 } 12270 } 12271 clearEvents() { 12272 if (this.options.scroller) { 12273 this.options.scroller.removeEventListener("scroll", this.onScroll); 12274 } 12275 } 12276 shouldUpdate() { 12277 return this.delta > this.height || this.wrapDirection.count > 1; 12278 } 12279 handleScroll() { 12280 const offset2 = this.getOffset(); 12281 const clientSize = this.getClientSize(); 12282 const scrollSize2 = this.getScrollSize(); 12283 if (offset2 === this.offset) { 12284 this.wrapDirection = { 12285 type: "STATIONARY", 12286 count: 0 12287 }; 12288 } else { 12289 if (offset2 < this.offset) { 12290 if (this.wrapDirection.type !== "FRONT") { 12291 this.wrapDirection.count = 0; 12292 } 12293 this.wrapDirection.type = "FRONT"; 12294 this.wrapDirection.count++; 12295 } else { 12296 if (this.wrapDirection.type !== "BEHIND") { 12297 this.wrapDirection.count = 0; 12298 } 12299 this.wrapDirection.type = "BEHIND"; 12300 this.wrapDirection.count++; 12301 } 12302 } 12303 if (isPerformingKeyboardAction() && offset2 === 0 && this.offset > 1) { 12304 this.offset = offset2; 12305 return; 12306 } 12307 this.delta = Math.abs(this.offset - offset2); 12308 this.offset = offset2; 12309 if (this.shouldUpdate()) { 12310 const top = this.isFront() && offset2 <= 0; 12311 const bottom = this.isBehind() && clientSize + offset2 + this.options.threshold >= scrollSize2; 12312 this.options.handleScroll({ 12313 top, 12314 bottom, 12315 offset: offset2, 12316 direction: this.wrapDirection.type 12317 }); 12318 if (this.isFront()) { 12319 this.handleScrollFront(); 12320 } else { 12321 this.handleScrollBehind(); 12322 } 12323 } 12324 } 12325 handleScrollFront() { 12326 const scrolls = this.getScrollItems(); 12327 if (scrolls >= this.range.start) { 12328 return; 12329 } 12330 const start = Math.max(scrolls - this.options.buffer, 0); 12331 this.checkIfUpdate(start, this.getEndByStart(start)); 12332 } 12333 handleScrollBehind() { 12334 const scrolls = this.getScrollItems(); 12335 if (scrolls < this.range.start + this.options.buffer) { 12336 return; 12337 } 12338 this.checkIfUpdate(scrolls, this.getEndByStart(scrolls)); 12339 } 12340 getEndByStart(start) { 12341 return Math.min(start + this.options.keeps - 1, this.getLastIndex()); 12342 } 12343 getScrollItems() { 12344 const offset2 = this.offset - this.getScrollStartOffset(); 12345 if (offset2 <= 0) { 12346 return 0; 12347 } 12348 if (this.isFixed()) { 12349 return Math.floor(offset2 / this.fixedSize); 12350 } 12351 let low = 0; 12352 let high = this.options.uniqueKeys.length; 12353 let middle = 0; 12354 let middleOffset = 0; 12355 while (low <= high) { 12356 middle = low + Math.floor((high - low) / 2); 12357 middleOffset = this.getOffsetByIndex(middle); 12358 if (middleOffset === offset2) { 12359 return middle; 12360 } else if (middleOffset < offset2) { 12361 low = middle + 1; 12362 } else if (middleOffset > offset2) { 12363 high = middle - 1; 12364 } 12365 } 12366 return low > 0 ? --low : 0; 12367 } 12368 getOffsetByIndex(index2) { 12369 if (!index2) { 12370 return 0; 12371 } 12372 let offset2 = 0; 12373 for (let i = 0; i < index2; i++) { 12374 const size2 = this.sizes.get(this.options.uniqueKeys[i]); 12375 offset2 = offset2 + (typeof size2 === "number" ? size2 : this.getItemSize()); 12376 } 12377 return offset2; 12378 } 12379 getItemSize() { 12380 return this.isFixed() ? this.fixedSize : this.averageSize; 12381 } 12382 getLastIndex() { 12383 const { uniqueKeys, keeps } = this.options; 12384 return uniqueKeys.length > 0 ? uniqueKeys.length - 1 : keeps - 1; 12385 } 12386 checkIfUpdate(start, end) {
12387 const keeps = this.options.keeps; 12388 const total = this.options.uniqueKeys.length; 12389 if (total <= keeps) { 12390 start = 0; 12391 end = this.getLastIndex(); 12392 } else if (end - start < keeps - 1) { 12393 start = end - keeps + 1; 12394 } 12395 if (this.range.start !== start) { 12396 this.handleUpdate(start, end); 12397 } 12398 } 12399 handleUpdate(start, end) { 12400 this.range.start = start; 12401 this.range.end = end; 12402 this.range.front = this.getFrontOffset(); 12403 this.range.behind = this.getBehindOffset(); 12404 this.options.handleUpdate(__spreadValues$S({}, this.range)); 12405 } 12406 getFrontOffset() { 12407 if (this.isFixed()) { 12408 return this.fixedSize * this.range.start; 12409 } else { 12410 return this.getOffsetByIndex(this.range.start); 12411 } 12412 } 12413 getBehindOffset() { 12414 const end = this.range.end; 12415 const last = this.getLastIndex(); 12416 if (this.isFixed()) { 12417 return Math.max(0, (last - end) * this.fixedSize); 12418 } 12419 return Math.max(0, (last - end) * this.getItemSize()); 12420 } 12421 getScrollStartOffset() { 12422 let offset2 = 0; 12423 const { wrapper, scroller, direction } = this.options; 12424 if (scroller === wrapper) { 12425 return 0; 12426 } 12427 if (scroller && wrapper) { 12428 const rect = Sortable$1.utils.getRect(wrapper, true, scroller); 12429 offset2 = this.offset + rect[rectDir[direction]]; 12430 } 12431 return offset2; 12432 } 12433 scrollToOffset(offset2) { 12434 if (offset2 < this.offset) { 12435 if (this.wrapDirection.type !== "FRONT") { 12436 this.wrapDirection.count = 0; 12437 } 12438 this.wrapDirection.type = "FRONT"; 12439 this.wrapDirection.count++; 12440 } else { 12441 if (this.wrapDirection.type !== "BEHIND") { 12442 this.wrapDirection.count = 0; 12443 } 12444 this.wrapDirection.type = "BEHIND"; 12445 this.wrapDirection.count++; 12446 } 12447 this.options.scroller[scrollDir[this.options.direction]] = offset2; 12448 } 12449 scrollToIndex(index2) { 12450 if (index2 >= this.options.uniqueKeys.length - 1) { 12451 this.scrollToBottom(); 12452 } else { 12453 const indexOffset = this.getOffsetByIndex(index2); 12454 const startOffset = this.getScrollStartOffset(); 12455 this.scrollToOffset(indexOffset + startOffset); 12456 } 12457 } 12458 scrollToBottom() { 12459 const offset2 = this.getScrollSize(); 12460 this.scrollToOffset(offset2); 12461 } 12462} 12463var __defProp$R = Object.defineProperty; 12464var __defProps$H = Object.defineProperties; 12465var __getOwnPropDescs$H = Object.getOwnPropertyDescriptors; 12466var __getOwnPropSymbols$R = Object.getOwnPropertySymbols; 12467var __hasOwnProp$R = Object.prototype.hasOwnProperty; 12468var __propIsEnum$R = Object.prototype.propertyIsEnumerable; 12469var __defNormalProp$R = (obj, key, value) => key in obj ? __defProp$R(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 12470var __spreadValues$R = (a, b) => { 12471 for (var prop in b || (b = {})) 12472 if (__hasOwnProp$R.call(b, prop)) 12473 __defNormalProp$R(a, prop, b[prop]); 12474 if (__getOwnPropSymbols$R) 12475 for (var prop of __getOwnPropSymbols$R(b)) { 12476 if (__propIsEnum$R.call(b, prop)) 12477 __defNormalProp$R(a, prop, b[prop]); 12478 } 12479 return a; 12480}; 12481var __spreadProps$H = (a, b) => __defProps$H(a, __getOwnPropDescs$H(b)); 12482const SortableAttrs = [ 12483 "delay", 12484 "group", 12485 "handle", 12486 "lockAxis", 12487 "disabled", 12488 "sortable", 12489 "draggable", 12490 "animation", 12491 "autoScroll", 12492 "ghostClass", 12493 "ghostStyle", 12494 "chosenClass", 12495 "scrollSpeed", 12496 "fallbackOnBody", 12497 "scrollThreshold", 12498 "delayOnTouchOnly", 12499 "isDarkMode" 12500]; 12501class Sortable { 12502 constructor(el, options) { 12503 this.el = el; 12504 this.options = options; 12505 this.reRendered = false; 12506 this.installSortable(); 12507 } 12508 destroy() { 12509 this.sortable.destroy(); 12510 this.reRendered = false; 12511 } 12512 option(key, value) { 12513 this.options[key] = value; 12514 if (SortableAttrs.includes(key)) { 12515 this.sortable.option(key, value); 12516 } 12517 } 12518 installSortable() { 12519 const props = SortableAttrs.reduce((res, key) => { 12520 res[key] = this.options[key]; 12521 return res; 12522 }, {}); 12523 this.sortable = new Sortable$1(this.el, __spreadProps$H(__spreadValues$R({}, props), { 12524 emptyInsertThreshold: 0, 12525 swapOnDrop: (event) => event.from === event.to, 12526 onDrag: (event) => this.onDrag(event), 12527 onDrop: (event) => this.onDrop(event) 12528 })); 12529 } 12530 onDrag(event) {
12531 const key = event.node.getAttribute("data-key"); 12532 const index2 = this.getIndex(key); 12533 const item = this.options.list[index2]; 12534 this.sortable.option("store", { item, key, index: index2 }); 12535 this.dispatchEvent("onDrag", { item, key, index: index2, event }); 12536 } 12537 onDrop(event) { 12538 var _a, _b; 12539 const { item, key, index: index2 } = Sortable$1.get(event.from).option("store"); 12540 const list = this.options.list; 12541 const params = { 12542 key, 12543 item, 12544 list, 12545 event, 12546 changed: false, 12547 oldList: [...list], 12548 oldIndex: index2, 12549 newIndex: index2 12550 }; 12551 if (!(event.from === event.to && event.node === event.target)) { 12552 this.handleDropEvent(event, params, item, key, index2, list); 12553 } 12554 this.dispatchEvent("onDrop", params); 12555 if (event.from === this.el && this.reRendered) { 12556 (_a = Sortable$1.dragged) == null ? void 0 : _a.remove(); 12557 } 12558 if (event.from !== event.to && event.pullMode === "clone") { 12559 (_b = Sortable$1.clone) == null ? void 0 : _b.remove(); 12560 } 12561 this.reRendered = false; 12562 } 12563 handleDropEvent(event, params, item, key, index2, list) { 12564 const targetKey = event.target.getAttribute("data-key"); 12565 let newIndex2 = -1; 12566 let oldIndex2 = index2; 12567 if (event.from === event.to) { 12568 oldIndex2 = this.getIndex(key); 12569 newIndex2 = this.getIndex(targetKey); 12570 if (oldIndex2 < newIndex2 && event.relative === -1 || oldIndex2 > newIndex2 && event.relative === 1) { 12571 newIndex2 += event.relative; 12572 } 12573 if (newIndex2 !== oldIndex2) { 12574 list.splice(oldIndex2, 1); 12575 list.splice(newIndex2, 0, item); 12576 } 12577 } else { 12578 if (event.from === this.el) { 12579 oldIndex2 = this.getIndex(key); 12580 list.splice(oldIndex2, 1); 12581 } 12582 if (event.to === this.el) { 12583 oldIndex2 = -1; 12584 newIndex2 = this.getIndex(targetKey); 12585 if (event.relative === 0) { 12586 newIndex2 = list.length; 12587 } else if (event.relative === 1) { 12588 newIndex2 += event.relative; 12589 } 12590 list.splice(newIndex2, 0, item); 12591 } 12592 } 12593 params.changed = event.from !== event.to || newIndex2 !== oldIndex2; 12594 params.list = list; 12595 params.oldIndex = oldIndex2; 12596 params.newIndex = newIndex2; 12597 } 12598 getIndex(key) { 12599 return this.options.uniqueKeys.indexOf(key); 12600 } 12601 drag(event) { 12602 this.sortable.drag(event); 12603 } 12604 dispatchEvent(name, params) { 12605 const cb = this.options[name]; 12606 cb && cb(params); 12607 } 12608} 12609function useTheme() { 12610 const darkThemeCls = createThemeClassname("dark"); 12611 const isDark = ref(isClient ? hasClass(document.body, darkThemeCls) : false); 12612 const isLight = ref(isClient ? !hasClass(document.body, darkThemeCls) : true); 12613 const themeProvider = inject(THEME_PROVIDER_INJECTION_KEY, void 0); 12614 const callback = () => { 12615 isDark.value = Boolean( 12616 hasClass(document.body, darkThemeCls) || (themeProvider == null ? void 0 : themeProvider.getTheme()) === "dark" 12617 ); 12618 isLight.value = Boolean( 12619 !hasClass(document.body, darkThemeCls) || (themeProvider == null ? void 0 : themeProvider.getTheme()) === "light" 12620 ); 12621 }; 12622 const observer = new MutationObserver(callback); 12623 onMounted(() => { 12624 observer.observe(document.body, { 12625 attributes: true, 12626 childList: false, 12627 subtree: false 12628 }); 12629 }); 12630 onUnmounted(() => { 12631 observer.disconnect(); 12632 }); 12633 return { 12634 isDark, 12635 isLight 12636 }; 12637} 12638var __defProp$Q = Object.defineProperty; 12639var __defProps$G = Object.defineProperties; 12640var __getOwnPropDescs$G = Object.getOwnPropertyDescriptors; 12641var __getOwnPropSymbols$Q = Object.getOwnPropertySymbols; 12642var __hasOwnProp$Q = Object.prototype.hasOwnProperty; 12643var __propIsEnum$Q = Object.prototype.propertyIsEnumerable;
12644var __defNormalProp$Q = (obj, key, value) => key in obj ? __defProp$Q(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 12645var __spreadValues$Q = (a, b) => { 12646 for (var prop in b || (b = {})) 12647 if (__hasOwnProp$Q.call(b, prop)) 12648 __defNormalProp$Q(a, prop, b[prop]); 12649 if (__getOwnPropSymbols$Q) 12650 for (var prop of __getOwnPropSymbols$Q(b)) { 12651 if (__propIsEnum$Q.call(b, prop)) 12652 __defNormalProp$Q(a, prop, b[prop]); 12653 } 12654 return a; 12655}; 12656var __spreadProps$G = (a, b) => __defProps$G(a, __getOwnPropDescs$G(b)); 12657var __async$h = (__this, __arguments, generator) => { 12658 return new Promise((resolve2, reject) => { 12659 var fulfilled = (value) => { 12660 try { 12661 step(generator.next(value)); 12662 } catch (e) { 12663 reject(e); 12664 } 12665 }; 12666 var rejected = (value) => { 12667 try { 12668 step(generator.throw(value)); 12669 } catch (e) { 12670 reject(e); 12671 } 12672 }; 12673 var step = (x) => x.done ? resolve2(x.value) : Promise.resolve(x.value).then(fulfilled, rejected); 12674 step((generator = generator.apply(__this, __arguments)).next()); 12675 }); 12676}; 12677const SCROLL_DELAY = 50; 12678const VirtualList = defineComponent({ 12679 name: "ZmVirtualList", 12680 props: virtualListProps, 12681 emits: virtualListEmits, 12682 setup(props, { emit, slots, expose }) { 12683 const ns = useNamespace("ZmVirtualList"); 12684 const instance = getCurrentInstance(); 12685 const scrollbarRef = ref(); 12686 const wrapRef = ref(null); 12687 const listRef = ref([]); 12688 const lastList = ref([]); 12689 const rangeRef = ref({ start: 0, end: props.keeps - 1, front: 0, behind: 0 }); 12690 const dragging = ref(); 12691 let virtual; 12692 let sortable; 12693 let uniqueKeys = []; 12694 const horizontal = computed(() => { 12695 return props.direction !== "vertical"; 12696 }); 12697 const chosenClass = computed(() => { 12698 return props.chosenClass || "draggable-chosen"; 12699 }); 12700 const styleCls = computed(() => { 12701 if (props.draggable) { 12702 return { 12703 cursor: "pointer" 12704 }; 12705 } 12706 return null; 12707 }); 12708 const { isDark } = useTheme(); 12709 const getOffset2 = () => { 12710 return virtual.getOffset(); 12711 }; 12712 const getClientSize = () => { 12713 return virtual.getClientSize(); 12714 }; 12715 const getScrollSize = () => { 12716 return virtual.getScrollSize(); 12717 }; 12718 const getRowIdentity2 = (record, dataKey) => { 12719 if (typeof dataKey === "string") { 12720 return record[dataKey] + ""; 12721 } 12722 return dataKey.call(null, record); 12723 }; 12724 const installVirtual = () => { 12725 virtual = new Virtual({ 12726 keeps: props.keeps, 12727 direction: props.direction, 12728 buffer: Math.round(props.keeps / 3), 12729 wrapper: wrapRef.value, 12730 scroller: scrollbarRef.value.wrapRef, 12731 scrollbar: scrollbarRef.value, 12732 uniqueKeys, 12733 threshold: props.threshold, 12734 throttleTime: props.throttleTime, 12735 handleScroll(event) { 12736 if (!!listRef.value.length && event.top) { 12737 handleToTop(); 12738 } else if (event.bottom) { 12739 handleToBottom(); 12740 } 12741 }, 12742 handleUpdate(range) { 12743 const rangeChanged = range.start !== rangeRef.value.start; 12744 if (dragging.value && rangeChanged) { 12745 sortable && (sortable.reRendered = true); 12746 } 12747 rangeRef.value = range; 12748 rangeChanged && emit("range-change", range); 12749 } 12750 }); 12751 }; 12752 const installSortable = () => { 12753 sortable = new Sortable(wrapRef.value, { 12754 list: listRef.value, 12755 uniqueKeys, 12756 sortable: true, 12757 animation: 200, 12758 autoScroll: true, 12759 fallbackOnBody: props.fallbackOnBody, 12760 scrollThreshold: 56, 12761 scrollSpeed: { 12762 x: 10, 12763 y: 10 12764 }, 12765 chosenClass: chosenClass.value, 12766 ghostClass: props.ghostClass, 12767 isDarkMode: isDark.value, 12768 onDrag: (event) => { 12769 dragging.value = event.key; 12770 emit("drag", event); 12771 }, 12772 onDrop: (event) => { 12773 dragging.value = ""; 12774 if (event.changed) { 12775 emit("update:modelValue", event.list); 12776 } 12777 emit("drop", event); 12778 if (props.tableMode) { 12779 adjust(); 12780 } 12781 } 12782 }); 12783 }; 12784 const handleToTop = debounce(() => { 12785 emit("top"); 12786 }, SCROLL_DELAY); 12787 const handleToBottom = debounce(() => { 12788 emit("bottom"); 12789 }, SCROLL_DELAY); 12790 const updateRange = (oldList, newList) => { 12791 const newRange = __spreadValues$Q({}, rangeRef.value); 12792 if (newList.length > oldList.length && newRange.end === oldList.length - 1 && scrolledToBottom()) { 12793 newRange.end++; 12794 newRange.start = Math.max(0, newRange.end - props.keeps); 12795 } 12796 virtual == null ? void 0 : virtual.updateRange(newRange); 12797 }; 12798 const scrolledToBottom = () => { 12799 const offset2 = getOffset2(); 12800 const clientSize = getClientSize(); 12801 const scrollSize2 = getScrollSize(); 12802 return offset2 + clientSize + 1 >= scrollSize2; 12803 }; 12804 let initialSizedDone = false;
12805 const onItemResized = (size2, key) => { 12806 const sizes = virtual.sizes.size; 12807 const renders = Math.min(props.keeps, listRef.value.length); 12808 virtual.onItemResized(key, size2); 12809 if (!initialSizedDone && sizes !== 0 && sizes === renders - 1) { 12810 initialSizedDone = true; 12811 updateRange(listRef.value, listRef.value); 12812 setTimeout(() => { 12813 initialSizedDone = false; 12814 }, props.throttleTime); 12815 } 12816 }; 12817 const renderSpacer = (offset2) => { 12818 if (props.tableMode) { 12819 const tdStyle = { padding: 0, margin: 0, border: 0, height: `${offset2}px` }; 12820 return h( 12821 "tr", 12822 { 12823 "aria-hidden": true 12824 }, 12825 [h("td", { style: tdStyle })] 12826 ); 12827 } 12828 return null; 12829 }; 12830 const renderItems = () => { 12831 const renders = []; 12832 const { front, behind } = rangeRef.value; 12833 const sizeKey = horizontal.value ? "offsetWidth" : "offsetHeight"; 12834 renders.push(renderSpacer(front)); 12835 let start = rangeRef.value.start; 12836 let end = rangeRef.value.end; 12837 if (start > listRef.value.length) { 12838 start = Math.max(0, listRef.value.length - props.keeps); 12839 end = listRef.value.length - 1; 12840 } 12841 for (let index2 = start; index2 <= end; index2++) { 12842 const record = listRef.value[index2]; 12843 if (record) { 12844 let dataKey = getRowIdentity2(record, props.dataKey) || ""; 12845 if (record.__expand__) { 12846 dataKey = `expanded-row__${dataKey}`; 12847 } 12848 renders.push( 12849 slots.item ? h( 12850 VirtualListItem, 12851 { 12852 key: dataKey, 12853 dataKey, 12854 sizeKey, 12855 style: dataKey === dragging.value && { display: "none" }, 12856 onResize: onItemResized 12857 }, 12858 { 12859 default: () => { 12860 var _a; 12861 return (_a = slots.item) == null ? void 0 : _a.call(slots, { 12862 record, 12863 index: index2, 12864 dataKey, 12865 expand: record.__expand__, 12866 tree: record.__tree__ 12867 }); 12868 } 12869 } 12870 ) : null 12871 ); 12872 } 12873 } 12874 renders.push(renderSpacer(behind)); 12875 return renders; 12876 }; 12877 const update = () => { 12878 const list = props.modelValue; 12879 if (!list) { 12880 return; 12881 } 12882 listRef.value = list; 12883 updateUniqueKeys(); 12884 updateRange(lastList.value, list); 12885 sortable == null ? void 0 : sortable.option("list", list); 12886 lastList.value = [...listRef.value]; 12887 }; 12888 const updateUniqueKeys = () => { 12889 uniqueKeys = listRef.value.map((item) => { 12890 const dataKey = getRowIdentity2(item, props.dataKey) || ""; 12891 if (item.__expand__) { 12892 return `expanded-row__${dataKey}`; 12893 } 12894 return dataKey; 12895 }); 12896 virtual == null ? void 0 : virtual.option("uniqueKeys", uniqueKeys); 12897 sortable == null ? void 0 : sortable.option("uniqueKeys", uniqueKeys); 12898 }; 12899 const repaint = (next) => { 12900 const scroller = scrollbarRef.value.wrapRef; 12901 const top = scroller.scrollTop; 12902 requestAnimationFrame(() => { 12903 if (!scrollbarRef.value) { 12904 /* istanbul ignore next @preserve */ 12905 return; 12906 } 12907 scroller.scrollTop += 1; 12908 requestAnimationFrame(() => { 12909 scroller.scrollTop -= 1; 12910 requestAnimationFrame(() => { 12911 scroller.scrollTop -= 1; 12912 requestAnimationFrame(() => { 12913 scroller.scrollTop += 1; 12914 setTimeout(() => { 12915 scroller.scrollTop = top; 12916 next && next(); 12917 }, 20); 12918 }); 12919 }); 12920 }); 12921 }); 12922 }; 12923 const adjust = () => __async$h(this, null, function* () { 12924 var _a, _b; 12925 const wrap = wrapRef.value; 12926 const scrollWrap = (_a = scrollbarRef.value) == null ? void 0 : _a.wrapRef; 12927 if (!scrollWrap || !wrap) { 12928 return; 12929 } 12930 let chosenEl = (wrap == null ? void 0 : wrap.querySelector(`.${chosenClass.value}`)) || null; 12931 if (!chosenEl) { 12932 chosenEl = document.body.querySelector(`.${chosenClass.value}`); 12933 } 12934 if (!chosenEl) { 12935 return; 12936 } 12937 const height = chosenEl.offsetHeight;
12938 const key = (_b = chosenEl.dataset) == null ? void 0 : _b.key; 12939 if (!key) { 12940 return; 12941 } 12942 let rows = wrap.querySelectorAll(`.${ns.namespace}-virtual-table__row`); 12943 let targetEl2 = wrap.querySelector(`[data-key="${key}"]`); 12944 const beforeIndex = Array.from(rows).findIndex((row) => { 12945 return row === targetEl2; 12946 }); 12947 yield nextTick(); 12948 rows = wrap.querySelectorAll(`.${ns.namespace}-virtual-table__row`); 12949 targetEl2 = wrap.querySelector(`[data-key="${key}"]`); 12950 const afterIndex = Array.from(rows).findIndex((row) => { 12951 return row === targetEl2; 12952 }); 12953 if (beforeIndex - afterIndex) { 12954 scrollWrap.scrollTop -= height; 12955 } 12956 }); 12957 const forceUpdate = () => { 12958 virtual == null ? void 0 : virtual.handleUpdate(0, props.keeps - 1); 12959 scrollToTop(); 12960 }; 12961 const calculateScrollOffset = (index2, offset2) => { 12962 const indexOffset = virtual.getOffsetByIndex(index2); 12963 const startOffset = virtual.getScrollStartOffset(); 12964 const viewportHeight = scrollbarRef.value.wrapRef.getBoundingClientRect().height; 12965 const targetOffset = offset2 === void 0 ? viewportHeight / 2 : offset2; 12966 return Math.max(0, indexOffset + startOffset - targetOffset); 12967 }; 12968 const executeCallback = (callback) => { 12969 if (callback) { 12970 setTimeout(() => callback(), props.throttleTime); 12971 } 12972 }; 12973 const adjustScrollPosition = (index2, initialOffset, offset2, callback, useAnimation = false) => { 12974 const buffer = Math.max(10, Math.floor(props.keeps / 2)); 12975 const start = Math.max(0, index2 - buffer); 12976 const end = Math.min(uniqueKeys.length - 1, index2 + buffer); 12977 virtual == null ? void 0 : virtual.handleUpdate(start, end); 12978 setTimeout(() => { 12979 const finalOffset = calculateScrollOffset(index2, offset2); 12980 const difference = Math.abs(finalOffset - initialOffset); 12981 if (difference > 0) { 12982 if (useAnimation) { 12983 scrollWithAnimation(finalOffset, callback); 12984 } else { 12985 scrollToOffset(finalOffset); 12986 executeCallback(callback); 12987 } 12988 } else { 12989 executeCallback(callback); 12990 } 12991 }, props.throttleTime + 20); 12992 }; 12993 const scrollWithAnimation = (targetOffset, callback) => { 12994 const scroll = createScroll(); 12995 scroll(scrollbarRef.value.wrapRef, "scrollTop", targetOffset, 200, () => { 12996 scrollToOffset(targetOffset); 12997 executeCallback(callback); 12998 }); 12999 }; 13000 const scrollToKey = (key, animation, next, offset2) => { 13001 var _a; 13002 const index2 = uniqueKeys.indexOf(key); 13003 if (!virtual || index2 === -1) 13004 return; 13005 const targetOffset = calculateScrollOffset(index2, offset2); 13006 const isTargetRendered = ((_a = wrapRef.value) == null ? void 0 : _a.querySelector(`[data-key="${key}"]`)) !== null; 13007 if (isTargetRendered) { 13008 if (animation) { 13009 scrollWithAnimation(targetOffset, next); 13010 } else { 13011 scrollToOffset(targetOffset); 13012 executeCallback(next); 13013 } 13014 } else { 13015 if (animation) { 13016 scrollWithAnimation(targetOffset, () => { 13017 adjustScrollPosition(index2, targetOffset, offset2, next, true); 13018 }); 13019 } else { 13020 scrollToOffset(targetOffset); 13021 adjustScrollPosition(index2, targetOffset, offset2, next, false); 13022 } 13023 } 13024 }; 13025 const scrollToTop = () => { 13026 var _a; 13027 (_a = scrollbarRef.value) == null ? void 0 : _a.cleanScrollHandler(); 13028 scrollToOffset(0); 13029 }; 13030 const scrollToOffset = (offset2) => { 13031 if (isPerformingKeyboardAction() && offset2 === 0) { 13032 offset2 = 1; 13033 } 13034 virtual == null ? void 0 : virtual.scrollToOffset(offset2); 13035 }; 13036 const scrollToIndex = (index2) => { 13037 virtual == null ? void 0 : virtual.scrollToIndex(index2); 13038 }; 13039 const scrollToBottom = () => { 13040 var _a; 13041 (_a = scrollbarRef.value) == null ? void 0 : _a.cleanScrollHandler(); 13042 virtual == null ? void 0 : virtual.scrollToBottom(); 13043 }; 13044 const isKeyInViewport = (key) => { 13045 var _a; 13046 const el = (_a = instance.vnode.el) == null ? void 0 : _a.querySelector(`[data-key="${key}"]`); 13047 if (el) { 13048 return isElementInViewport(el, scrollbarRef.value.wrapRef); 13049 } 13050 return false;
13051 }; 13052 const isElementInViewport = (el, wrapper) => { 13053 const elRect = el.getBoundingClientRect(); 13054 const wrapperRect = wrapper.getBoundingClientRect(); 13055 return elRect.top >= wrapperRect.top && elRect.top <= wrapperRect.top + wrapperRect.height; 13056 }; 13057 const drag = (event) => { 13058 if (sortable) { 13059 sortable.drag(event); 13060 } 13061 }; 13062 onBeforeMount(() => { 13063 update(); 13064 }); 13065 onMounted(() => { 13066 installVirtual(); 13067 if (props.draggable) { 13068 installSortable(); 13069 } 13070 }); 13071 onUnmounted(() => { 13072 virtual.clearEvents(); 13073 sortable == null ? void 0 : sortable.destroy(); 13074 }); 13075 watch( 13076 () => props.modelValue, 13077 () => { 13078 update(); 13079 }, 13080 { 13081 deep: true 13082 } 13083 ); 13084 watch( 13085 () => props.draggable, 13086 (val) => { 13087 if (val) { 13088 installSortable(); 13089 } else { 13090 sortable == null ? void 0 : sortable.destroy(); 13091 } 13092 } 13093 ); 13094 watch( 13095 () => props.hasSingleSelection, 13096 () => __async$h(this, null, function* () { 13097 yield nextTick(); 13098 virtual.clearEvents(); 13099 installVirtual(); 13100 }) 13101 ); 13102 expose({ 13103 scrollbarRef, 13104 wrapRef, 13105 repaint, 13106 forceUpdate, 13107 getOffset: getOffset2, 13108 scrollToKey, 13109 scrollToTop, 13110 scrollToIndex, 13111 scrollToBottom, 13112 scrollToOffset, 13113 isKeyInViewport, 13114 drag 13115 }); 13116 return () => { 13117 const { 13118 tableMode, 13119 role, 13120 wrapClass, 13121 wrapStyle, 13122 scrollbarWrapStyle, 13123 ariaLabel, 13124 ariaLabelledby, 13125 ariaDescribedby, 13126 scrollbarVerticalTrackRight 13127 } = props; 13128 const { front, behind } = rangeRef.value; 13129 const padding = horizontal.value ? `0 ${behind}px 0 ${front}px` : `${front}px 0 ${behind}px`; 13130 if (tableMode) { 13131 return h( 13132 ZmScrollbar, 13133 { 13134 ref: scrollbarRef, 13135 wrapStyle: scrollbarWrapStyle, 13136 always: props.alwaysScrollbar, 13137 "data-testid": props.testId 13138 }, 13139 () => { 13140 return h( 13141 "table", 13142 { 13143 role: "grid", 13144 class: wrapClass, 13145 style: wrapStyle, 13146 cellspacing: 0, 13147 cellpadding: 0, 13148 border: 0, 13149 "aria-colcount": props.colCount, 13150 "aria-rowcount": props.modelValue.length + props.headerCount + (props.showSummary ? 1 : 0), 13151 ariaLabel, 13152 "aria-labelledby": ariaLabelledby, 13153 "aria-describedby": ariaDescribedby 13154 }, 13155 { 13156 default: () => { 13157 var _a, _b; 13158 return [ 13159 (_a = slots.header) == null ? void 0 : _a.call(slots), 13160 props.hasSingleSelection ? h( 13161 ZmRadioGroup, 13162 { 13163 style: { 13164 display: "contents" 13165 }, 13166 role: "presentation", 13167 modelValue: props.radio, 13168 "onUpdate:modelValue": (val) => { 13169 emit("radio-change", val); 13170 } 13171 }, 13172 () => { 13173 return h( 13174 "tbody", 13175 { 13176 ref: wrapRef, 13177 style: styleCls.value, 13178 "data-testid": buildTestId(props.testId, "-tbody") 13179 }, 13180 { 13181 default: () => renderItems() 13182 } 13183 ); 13184 } 13185 ) : h( 13186 "tbody", 13187 { 13188 ref: wrapRef, 13189 style: styleCls.value, 13190 "data-testid": buildTestId(props.testId, "-tbody") 13191 }, 13192 { 13193 default: () => renderItems() 13194 } 13195 ), 13196 (_b = slots.footer) == null ? void 0 : _b.call(slots) 13197 ]; 13198 } 13199 } 13200 ); 13201 } 13202 ); 13203 } else { 13204 return h( 13205 ZmScrollbar, 13206 { 13207 ref: scrollbarRef, 13208 wrapStyle: scrollbarWrapStyle, 13209 verticalTrackRight: scrollbarVerticalTrackRight 13210 }, 13211 { 13212 default: () => { 13213 var _a, _b; 13214 return [ 13215 (_a = slots.header) == null ? void 0 : _a.call(slots), 13216 h( 13217 "div", 13218 { 13219 role, 13220 ref: wrapRef, 13221 class: wrapClass, 13222 ariaLabel, 13223 "aria-labelledby": ariaLabelledby, 13224 "aria-describedby": ariaDescribedby, 13225 style: __spreadProps$G(__spreadValues$Q(__spreadValues$Q({}, wrapStyle), styleCls.value), { padding }) 13226 }, 13227 { 13228 default: () => renderItems() 13229 } 13230 ), 13231 (_b = slots.footer) == null ? void 0 : _b.call(slots) 13232 ]; 13233 } 13234 } 13235 ); 13236 } 13237 }; 13238 } 13239}); 13240const ZmVirtualList = withInstall(VirtualList);
13241const ensureArray = (arr) => { 13242 if (arr == null) 13243 return []; 13244 return Array.isArray(arr) ? arr : [arr]; 13245}; 13246var __defProp$P = Object.defineProperty; 13247var __defProps$F = Object.defineProperties; 13248var __getOwnPropDescs$F = Object.getOwnPropertyDescriptors; 13249var __getOwnPropSymbols$P = Object.getOwnPropertySymbols; 13250var __hasOwnProp$P = Object.prototype.hasOwnProperty; 13251var __propIsEnum$P = Object.prototype.propertyIsEnumerable; 13252var __defNormalProp$P = (obj, key, value) => key in obj ? __defProp$P(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 13253var __spreadValues$P = (a, b) => { 13254 for (var prop in b || (b = {})) 13255 if (__hasOwnProp$P.call(b, prop)) 13256 __defNormalProp$P(a, prop, b[prop]); 13257 if (__getOwnPropSymbols$P) 13258 for (var prop of __getOwnPropSymbols$P(b)) { 13259 if (__propIsEnum$P.call(b, prop)) 13260 __defNormalProp$P(a, prop, b[prop]); 13261 } 13262 return a; 13263}; 13264var __spreadProps$F = (a, b) => __defProps$F(a, __getOwnPropDescs$F(b)); 13265const _sfc_main$B = /* @__PURE__ */ defineComponent(__spreadProps$F(__spreadValues$P({}, { 13266 name: "ZmCollapseTransition" 13267}), { 13268 __name: "collapse-transition", 13269 setup(__props) { 13270 const ns = useNamespace("collapse-transition"); 13271 const reset = (el) => { 13272 el.style.maxHeight = ""; 13273 el.style.overflow = el.dataset.oldOverflow; 13274 el.style.paddingTop = el.dataset.oldPaddingTop; 13275 el.style.paddingBottom = el.dataset.oldPaddingBottom; 13276 }; 13277 const on2 = { 13278 beforeEnter(el) { 13279 el.dataset.oldPaddingTop = el.style.paddingTop; 13280 el.dataset.oldPaddingBottom = el.style.paddingBottom; 13281 if (el.style.height) 13282 el.dataset.elExistsHeight = el.style.height; 13283 el.style.maxHeight = 0; 13284 el.style.paddingTop = 0; 13285 el.style.paddingBottom = 0; 13286 }, 13287 enter(el) { 13288 requestAnimationFrame(() => { 13289 el.dataset.oldOverflow = el.style.overflow; 13290 if (el.dataset.elExistsHeight) { 13291 el.style.maxHeight = el.dataset.elExistsHeight; 13292 } else if (el.scrollHeight !== 0) { 13293 el.style.maxHeight = `${el.scrollHeight}px`; 13294 } else { 13295 el.style.maxHeight = 0; 13296 } 13297 el.style.paddingTop = el.dataset.oldPaddingTop; 13298 el.style.paddingBottom = el.dataset.oldPaddingBottom; 13299 el.style.overflow = "hidden"; 13300 }); 13301 }, 13302 afterEnter(el) { 13303 el.style.maxHeight = ""; 13304 el.style.overflow = el.dataset.oldOverflow; 13305 }, 13306 beforeLeave(el) { 13307 el.dataset.oldPaddingTop = el.style.paddingTop; 13308 el.dataset.oldPaddingBottom = el.style.paddingBottom; 13309 el.dataset.oldOverflow = el.style.overflow; 13310 el.style.maxHeight = `${el.scrollHeight}px`; 13311 el.style.overflow = "hidden"; 13312 }, 13313 leave(el) { 13314 if (el.scrollHeight !== 0) { 13315 el.style.maxHeight = 0; 13316 el.style.paddingTop = 0; 13317 el.style.paddingBottom = 0; 13318 } 13319 }, 13320 afterLeave(el) { 13321 reset(el); 13322 }, 13323 leaveCancelled(el) { 13324 reset(el); 13325 } 13326 }; 13327 return (_ctx, _cache) => { 13328 return openBlock(), createBlock(Transition, mergeProps({ 13329 name: unref(ns).b() 13330 }, toHandlers(on2)), { 13331 default: withCtx(() => [ 13332 renderSlot(_ctx.$slots, "default") 13333 ]), 13334 _: 3 13335 }, 16, ["name"]); 13336 }; 13337 } 13338})); 13339const ZmCollapseTransition = withInstall(_sfc_main$B); 13340var __defProp$O = Object.defineProperty; 13341var __defProps$E = Object.defineProperties; 13342var __getOwnPropDescs$E = Object.getOwnPropertyDescriptors; 13343var __getOwnPropSymbols$O = Object.getOwnPropertySymbols; 13344var __hasOwnProp$O = Object.prototype.hasOwnProperty; 13345var __propIsEnum$O = Object.prototype.propertyIsEnumerable; 13346var __defNormalProp$O = (obj, key, value) => key in obj ? __defProp$O(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 13347var __spreadValues$O = (a, b) => { 13348 for (var prop in b || (b = {})) 13349 if (__hasOwnProp$O.call(b, prop)) 13350 __defNormalProp$O(a, prop, b[prop]); 13351 if (__getOwnPropSymbols$O) 13352 for (var prop of __getOwnPropSymbols$O(b)) { 13353 if (__propIsEnum$O.call(b, prop)) 13354 __defNormalProp$O(a, prop, b[prop]); 13355 } 13356 return a; 13357}; 13358var __spreadProps$E = (a, b) => __defProps$E(a, __getOwnPropDescs$E(b)); 13359var __async$g = (__this, __arguments, generator) => { 13360 return new Promise((resolve2, reject) => { 13361 var fulfilled = (value) => {
13362 try { 13363 step(generator.next(value)); 13364 } catch (e) { 13365 reject(e); 13366 } 13367 }; 13368 var rejected = (value) => { 13369 try { 13370 step(generator.throw(value)); 13371 } catch (e) { 13372 reject(e); 13373 } 13374 }; 13375 var step = (x) => x.done ? resolve2(x.value) : Promise.resolve(x.value).then(fulfilled, rejected); 13376 step((generator = generator.apply(__this, __arguments)).next()); 13377 }); 13378}; 13379const toggleProps = { 13380 size: { 13381 type: String, 13382 default: "md" 13383 }, 13384 modelValue: { 13385 type: [Boolean, String, Number], 13386 default: false 13387 }, 13388 disabled: Boolean, 13389 activeValue: { 13390 type: [Boolean, String, Number], 13391 default: true 13392 }, 13393 inactiveValue: { 13394 type: [Boolean, String, Number], 13395 default: false 13396 }, 13397 validateEvent: { 13398 type: Boolean, 13399 default: true 13400 }, 13401 ariaLabel: String, 13402 ariaLabelledby: String, 13403 ariaDescribedby: String, 13404 ariaRequired: Boolean, 13405 tabindex: { 13406 type: [String, Number], 13407 default: 0 13408 // in Table, should set it -1 13409 }, 13410 beforeChange: { 13411 type: Function 13412 }, 13413 loading: Boolean, 13414 forwardTooltipTrigger: { 13415 type: Boolean, 13416 default: true 13417 }, 13418 focusIgnore: Boolean, 13419 testId: String 13420}; 13421const toggleEmits = { 13422 [VUE_EVENT_NAMES.UPDATE_MODEL]: (val) => isBoolean(val) || isString(val) || isNumber(val), 13423 [VUE_EVENT_NAMES.CHANGE]: (val) => isBoolean(val) || isString(val) || isNumber(val) 13424}; 13425const _hoisted_1$k = ["data-testid"]; 13426const _hoisted_2$9 = ["data-testid", "aria-checked", "aria-disabled", "aria-label", "aria-labelledby", "aria-describedby", "aria-required", "tabindex", "focus-ignore", "onKeydown"]; 13427const _sfc_main$A = /* @__PURE__ */ defineComponent(__spreadProps$E(__spreadValues$O({}, { 13428 name: "ZmToggle" 13429}), { 13430 __name: "toggle", 13431 props: toggleProps, 13432 emits: toggleEmits, 13433 setup(__props, { expose: __expose, emit: __emit }) { 13434 const props = __props; 13435 const emit = __emit; 13436 const ZmSpinners = ZmLoading.spinnersComponent; 13437 const ns = useNamespace("toggle"); 13438 const { formItem } = useFormItem(); 13439 const tooltipContext = inject(TOOLTIP_INJECTION_KEY, void 0); 13440 const infoPopoverContext = inject(INFO_POPOVER_INJECTION_KEY, void 0); 13441 const instance = getCurrentInstance(); 13442 const inputRef = ref(); 13443 const containerRef = ref(); 13444 const containerClass = computed(() => [ 13445 ns.b(), 13446 ns.m(props.size), 13447 ns.is("disabled", isDisabled.value), 13448 ns.is("loading", isLoading.value), 13449 ns.is("checked", isChecked.value) 13450 ]); 13451 const isDisabled = useFormDisabled(); 13452 const isLoading = computed(() => props.loading); 13453 const isRequired = useFormItemRequired(); 13454 const ariaDescribedbyResult = useFormItemAriaDescribedby(); 13455 const ariaLabelledbyResult = useFormItemLabelId(); 13456 const isChecked = computed(() => props.modelValue === props.activeValue); 13457 const tryValidate = () => { 13458 if (props.validateEvent && !isDisabled.value) { 13459 formItem == null ? void 0 : formItem.validate().catch((err) => { 13460 /* istanbul ignore next @preserve */ 13461 debugWarn(err); 13462 }); 13463 } 13464 }; 13465 const handleChange = () => { 13466 if (isDisabled.value || isLoading.value) 13467 return; 13468 const { activeValue, inactiveValue, beforeChange } = props; 13469 const handler = (result) => { 13470 emit(VUE_EVENT_NAMES.UPDATE_MODEL, result); 13471 emit(VUE_EVENT_NAMES.CHANGE, result); 13472 tryValidate(); 13473 nextTick(() => { 13474 if (inputRef.value) { 13475 inputRef.value.checked = isChecked.value; 13476 } 13477 }); 13478 }; 13479 if (beforeChange) { 13480 const currentValue = isChecked.value ? activeValue : inactiveValue; 13481 beforeChange((finalValue) => { 13482 if (currentValue !== finalValue) { 13483 handler(finalValue); 13484 } 13485 }, currentValue); 13486 } else { 13487 handler(isChecked.value ? inactiveValue : activeValue); 13488 } 13489 }; 13490 const focus = () => { 13491 var _a; 13492 (_a = inputRef.value) == null ? void 0 : _a.focus(); 13493 }; 13494 if (![props.activeValue, props.inactiveValue].includes(props.modelValue)) { 13495 emit(VUE_EVENT_NAMES.UPDATE_MODEL, props.inactiveValue); 13496 } 13497 watch( 13498 () => props.modelValue, 13499 (newV) => __async$g(this, null, function* () { 13500 tryValidate(); 13501 yield nextTick(); 13502 const { activeValue } = props; 13503 if (inputRef.value) { 13504 inputRef.value.checked = newV === activeValue; 13505 } 13506 }) 13507 ); 13508 const tryForwardTooltipTriggerToInput = () => { 13509 nextTick(() => { 13510 var _a, _b, _c, _d, _e, _f; 13511 if (tooltipContext && inputRef.value) { 13512 if (((_b = (_a = instance.parent) == null ? void 0 : _a.attrs) == null ? void 0 : _b.class) === `${ns.namespace}-tooltip__trigger` && props.forwardTooltipTrigger) { 13513 tooltipContext.updateTriggerRef(inputRef.value); 13514 (_c = containerRef.value) == null ? void 0 : _c.removeAttribute("aria-label"); 13515 } 13516 } 13517 if (infoPopoverContext && inputRef.value) { 13518 if (((_e = (_d = instance.parent) == null ? void 0 : _d.attrs) == null ? void 0 : _e.class) === `${ns.namespace}-info-popover__trigger` && props.forwardTooltipTrigger) { 13519 infoPopoverContext.updateTriggerRef(inputRef.value); 13520 (_f = containerRef.value) == null ? void 0 : _f.removeAttribute("aria-label"); 13521 } 13522 } 13523 }); 13524 }; 13525 const handleClick = (event) => { 13526 if (isDisabled.value || isLoading.value) { 13527 event.preventDefault(); 13528 } 13529 }; 13530 onMounted(() => { 13531 inputRef.value.checked = isChecked.value;
13532 tryForwardTooltipTriggerToInput(); 13533 }); 13534 __expose({ 13535 focus 13536 }); 13537 return (_ctx, _cache) => { 13538 return openBlock(), createElementBlock("label", { 13539 ref_key: "containerRef", 13540 ref: containerRef, 13541 class: normalizeClass(containerClass.value), 13542 role: "none", 13543 "data-testid": _ctx.testId 13544 }, [ 13545 createBaseVNode("input", { 13546 ref_key: "inputRef", 13547 ref: inputRef, 13548 class: normalizeClass(unref(ns).e("original")), 13549 "data-testid": unref(buildTestId)(_ctx.testId, "-switch"), 13550 type: "checkbox", 13551 role: "switch", 13552 "aria-checked": isChecked.value, 13553 "aria-disabled": unref(isDisabled) || isLoading.value, 13554 "aria-label": _ctx.ariaLabel, 13555 "aria-labelledby": unref(ariaLabelledbyResult), 13556 "aria-describedby": unref(ariaDescribedbyResult), 13557 "aria-required": unref(isRequired), 13558 tabindex: _ctx.focusIgnore ? -1 : _ctx.tabindex, 13559 "focus-ignore": _ctx.focusIgnore ? true : void 0, 13560 onClick: handleClick, 13561 onChange: handleChange, 13562 onKeydown: withKeys(withModifiers(handleChange, ["stop", "prevent"]), ["enter"]) 13563 }, null, 42, _hoisted_2$9), 13564 createBaseVNode("span", { 13565 class: normalizeClass([unref(ns).e("core"), unref(ns).is("loading", isLoading.value), unref(ns).is("disabled", unref(isDisabled))]) 13566 }, [ 13567 isLoading.value ? (openBlock(), createBlock(unref(ZmIcon), { 13568 key: 0, 13569 class: normalizeClass(unref(ns).e("spinners")) 13570 }, { 13571 default: withCtx(() => [ 13572 createVNode(unref(ZmSpinners), { "force-dark-theme": isChecked.value }, null, 8, ["force-dark-theme"]) 13573 ]), 13574 _: 1 13575 }, 8, ["class"])) : createCommentVNode("", true) 13576 ], 2) 13577 ], 10, _hoisted_1$k); 13578 }; 13579 } 13580})); 13581const ZmToggle = withInstall(_sfc_main$A); 13582var __defProp$N = Object.defineProperty; 13583var __defProps$D = Object.defineProperties; 13584var __getOwnPropDescs$D = Object.getOwnPropertyDescriptors; 13585var __getOwnPropSymbols$N = Object.getOwnPropertySymbols; 13586var __hasOwnProp$N = Object.prototype.hasOwnProperty; 13587var __propIsEnum$N = Object.prototype.propertyIsEnumerable; 13588var __defNormalProp$N = (obj, key, value) => key in obj ? __defProp$N(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 13589var __spreadValues$N = (a, b) => { 13590 for (var prop in b || (b = {})) 13591 if (__hasOwnProp$N.call(b, prop)) 13592 __defNormalProp$N(a, prop, b[prop]); 13593 if (__getOwnPropSymbols$N) 13594 for (var prop of __getOwnPropSymbols$N(b)) { 13595 if (__propIsEnum$N.call(b, prop)) 13596 __defNormalProp$N(a, prop, b[prop]); 13597 } 13598 return a; 13599}; 13600var __spreadProps$D = (a, b) => __defProps$D(a, __getOwnPropDescs$D(b)); 13601var __async$f = (__this, __arguments, generator) => { 13602 return new Promise((resolve2, reject) => { 13603 var fulfilled = (value) => { 13604 try { 13605 step(generator.next(value)); 13606 } catch (e) { 13607 reject(e); 13608 } 13609 }; 13610 var rejected = (value) => { 13611 try { 13612 step(generator.throw(value)); 13613 } catch (e) { 13614 reject(e); 13615 } 13616 }; 13617 var step = (x) => x.done ? resolve2(x.value) : Promise.resolve(x.value).then(fulfilled, rejected); 13618 step((generator = generator.apply(__this, __arguments)).next()); 13619 }); 13620}; 13621const filterFields = (fields, props) => { 13622 const normalized = ensureArray(props); 13623 return normalized.length > 0 ? fields.filter( 13624 (field) => field.prop && normalized.includes(field.prop) && !field.disabled.value 13625 ) : fields.filter((field) => !field.disabled.value); 13626}; 13627const formProps = { 13628 model: Object, 13629 rules: { 13630 type: definePropType(Object) 13631 }, 13632 scrollToFirstErrorField: Boolean, 13633 disabled: Boolean 13634}; 13635const formEmits = ["validate"]; 13636const _sfc_main$z = /* @__PURE__ */ defineComponent(__spreadProps$D(__spreadValues$N({}, { 13637 name: "ZmForm" 13638}), { 13639 __name: "form", 13640 props: formProps, 13641 emits: formEmits, 13642 setup(__props, { expose: __expose, emit: __emit }) { 13643 const props = __props; 13644 const emit = __emit; 13645 const ns = useNamespace("form"); 13646 const fields = []; 13647 const addField = (field) => { 13648 if (field.prop) { 13649 fields.push(field); 13650 } 13651 }; 13652 const removeField = (field) => { 13653 let index2 = fields.indexOf(field); 13654 if (field.prop && index2 > -1) { 13655 fields.splice(index2, 1); 13656 } 13657 }; 13658 const resetFields = (properties = []) => { 13659 if (!props.model) { 13660 debugWarn("ZmForm", "model is required for resetFields to work."); 13661 return; 13662 }
13663 filterFields(fields, properties).forEach((field) => field.resetField()); 13664 }; 13665 const clearValidate = (props2 = []) => { 13666 filterFields(fields, props2).forEach((field) => field.clearValidate()); 13667 }; 13668 const canBeValidated = computed(() => { 13669 const hasModel = !!props.model; 13670 if (!hasModel) { 13671 debugWarn("ZmForm", "model is required for validate to work."); 13672 } 13673 return hasModel; 13674 }); 13675 const obtainValidateFields = (props2) => { 13676 if (fields.length === 0) 13677 return []; 13678 const filteredFields = filterFields(fields, props2); 13679 /* istanbul ignore next @preserve */ 13680 if (!filteredFields.length) { 13681 debugWarn("ZmForm", "please pass correct props!"); 13682 return []; 13683 } 13684 return filteredFields; 13685 }; 13686 const validate = () => __async$f(this, null, function* () { 13687 return validateField(); 13688 }); 13689 /* istanbul ignore next @preserve */ 13690 const dryValidate = () => __async$f(this, null, function* () { 13691 return validateField([], true); 13692 }); 13693 const doValidateField = (..._0) => __async$f(this, [..._0], function* (props2 = [], dry) { 13694 if (!canBeValidated.value) 13695 return Promise.reject("model is required for validate to work"); 13696 const fields2 = obtainValidateFields(props2); 13697 if (fields2.length === 0) 13698 return true; 13699 let validationErrors = {}; 13700 for (const field of fields2) { 13701 try { 13702 yield field.validate(dry); 13703 } catch (fields3) { 13704 validationErrors = __spreadValues$N(__spreadValues$N({}, validationErrors), fields3); 13705 } 13706 } 13707 if (Object.keys(validationErrors).length === 0) 13708 return true; 13709 return Promise.reject(validationErrors); 13710 }); 13711 const validateField = (..._0) => __async$f(this, [..._0], function* (modelProps = [], dry = false) { 13712 try { 13713 const result = yield doValidateField(modelProps, dry); 13714 return result; 13715 } catch (e) { 13716 /* istanbul ignore next @preserve */ 13717 if (e instanceof Error) 13718 throw e; 13719 const invalidFields = e; 13720 if (props.scrollToFirstErrorField && !dry) { 13721 scrollToField(Object.keys(invalidFields)[0]); 13722 } 13723 return Promise.reject(invalidFields); 13724 } 13725 }); 13726 const scrollToField = (prop) => { 13727 const field = filterFields(fields, prop)[0]; 13728 if (field) { 13729 const fieldRootEl = field.getRootEl(); 13730 fieldRootEl.scrollIntoView(); 13731 } 13732 }; 13733 const emitValidate = (prop, isValid, errorMessage) => { 13734 emit("validate", prop, isValid, errorMessage); 13735 }; 13736 provide( 13737 FORM_INJECTION_KEY, 13738 reactive(__spreadValues$N({ 13739 validate, 13740 addField, 13741 removeField, 13742 emitValidate 13743 }, toRefs(props))) 13744 ); 13745 __expose({ 13746 validate, 13747 dryValidate, 13748 resetFields, 13749 clearValidate, 13750 validateField 13751 }); 13752 return (_ctx, _cache) => { 13753 return openBlock(), createElementBlock("form", { 13754 class: normalizeClass(unref(ns).b()) 13755 }, [ 13756 renderSlot(_ctx.$slots, "default") 13757 ], 2); 13758 }; 13759 } 13760})); 13761var __defProp$M = Object.defineProperty; 13762var __defProps$C = Object.defineProperties; 13763var __getOwnPropDescs$C = Object.getOwnPropertyDescriptors; 13764var __getOwnPropSymbols$M = Object.getOwnPropertySymbols; 13765var __hasOwnProp$M = Object.prototype.hasOwnProperty; 13766var __propIsEnum$M = Object.prototype.propertyIsEnumerable; 13767var __defNormalProp$M = (obj, key, value) => key in obj ? __defProp$M(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 13768var __spreadValues$M = (a, b) => { 13769 for (var prop in b || (b = {})) 13770 if (__hasOwnProp$M.call(b, prop)) 13771 __defNormalProp$M(a, prop, b[prop]); 13772 if (__getOwnPropSymbols$M) 13773 for (var prop of __getOwnPropSymbols$M(b)) { 13774 if (__propIsEnum$M.call(b, prop)) 13775 __defNormalProp$M(a, prop, b[prop]); 13776 } 13777 return a; 13778}; 13779var __spreadProps$C = (a, b) => __defProps$C(a, __getOwnPropDescs$C(b)); 13780var __async$e = (__this, __arguments, generator) => { 13781 return new Promise((resolve2, reject) => { 13782 var fulfilled = (value) => {
13783 try { 13784 step(generator.next(value)); 13785 } catch (e) { 13786 reject(e); 13787 } 13788 }; 13789 var rejected = (value) => { 13790 try { 13791 step(generator.throw(value)); 13792 } catch (e) { 13793 reject(e); 13794 } 13795 }; 13796 var step = (x) => x.done ? resolve2(x.value) : Promise.resolve(x.value).then(fulfilled, rejected); 13797 step((generator = generator.apply(__this, __arguments)).next()); 13798 }); 13799}; 13800const formItemProps = { 13801 label: String, 13802 prop: String, 13803 required: Boolean, 13804 requiredErrorMessage: String, 13805 rules: { 13806 type: [Object, Array] 13807 }, 13808 error: String, 13809 autoBindLabelId: { 13810 type: Boolean, 13811 default: true 13812 }, 13813 role: String, 13814 helperText: String, 13815 disabled: Boolean, 13816 hideRequiredAsterisk: Boolean, 13817 showOptional: Boolean, 13818 createErrorMessageAriaLabel: Function, 13819 headerSize: { 13820 type: String, 13821 default: "md" 13822 } 13823}; 13824const _hoisted_1$j = ["role", "aria-labelledby", "aria-required"]; 13825const _hoisted_2$8 = ["id"]; 13826const _hoisted_3$4 = ["id"]; 13827const _hoisted_4$2 = ["id"]; 13828const _hoisted_5 = ["id", "aria-label"]; 13829const _sfc_main$y = /* @__PURE__ */ defineComponent(__spreadProps$C(__spreadValues$M({}, { 13830 name: "ZmFormItem" 13831}), { 13832 __name: "form-item", 13833 props: formItemProps, 13834 setup(__props, { expose: __expose }) { 13835 const props = __props; 13836 const slots = useSlots(); 13837 const ns = useNamespace("form-item"); 13838 const { t } = useLocale(messages$c); 13839 const formContext = inject(FORM_INJECTION_KEY, void 0); 13840 const formItemRef = ref(); 13841 const labelId = useId().value; 13842 const errorMessageId = computed(() => { 13843 const id = useId().value; 13844 if (errorVisible.value) { 13845 return id; 13846 } 13847 return void 0; 13848 }); 13849 const helperTextId = (props.helperText || slots["helper-text"]) && useId().value; 13850 const validateMessage = ref(""); 13851 const errorVisible = ref(false); 13852 let errorAnimationTimer = null; 13853 const roleResult = computed(() => { 13854 const { role, autoBindLabelId } = props; 13855 if (role) { 13856 return role; 13857 } else { 13858 return !autoBindLabelId ? "group" : void 0; 13859 } 13860 }); 13861 let initialValue = void 0; 13862 let isResettingField = false; 13863 const validateState = ref(""); 13864 const setValidationState = (state) => { 13865 validateState.value = state; 13866 }; 13867 const containerClass = computed(() => [ns.b(), ns.is("disabled", isDisabled.value)]); 13868 const isDisabled = useFormDisabled(); 13869 const fieldValue = computed(() => { 13870 const model = formContext == null ? void 0 : formContext.model; 13871 if (!model || !props.prop) { 13872 return; 13873 } 13874 return getProp(model, props.prop).value; 13875 }); 13876 const normalizedRules = computed(() => { 13877 const { required, requiredErrorMessage, label } = props; 13878 const rules = []; 13879 if (props.rules) { 13880 rules.push(...ensureArray(props.rules)); 13881 } 13882 const formRules = formContext == null ? void 0 : formContext.rules; 13883 if (formRules && props.prop) { 13884 const _rules = getProp(formRules, props.prop).value; 13885 if (_rules) { 13886 rules.push(...ensureArray(_rules)); 13887 } 13888 } 13889 if (required === true) { 13890 const requiredRules = rules.map((rule, i) => [rule, i]).filter(([rule]) => Object.keys(rule).includes("required")); 13891 if (requiredRules.length > 0) { 13892 for (const [rule, i] of requiredRules) { 13893 rules[i] = __spreadProps$C(__spreadValues$M({}, rule), { required }); 13894 } 13895 } else { 13896 rules.push({ required, message: requiredErrorMessage || `${label} is required` }); 13897 } 13898 } 13899 return rules; 13900 }); 13901 const createErrorMessageAriaLabelImpl = () => { 13902 const { createErrorMessageAriaLabel, label } = props; 13903 const formItemLabel = label || ""; 13904 if (createErrorMessageAriaLabel) 13905 return createErrorMessageAriaLabel(isRequired.value, formItemLabel, validateMessage.value); 13906 const ret = []; 13907 if (isRequired.value) { 13908 ret.push("Required item"); 13909 } 13910 if (formItemLabel) { 13911 ret.push(formItemLabel); 13912 } 13913 ret.push(validateMessage.value); 13914 return ret.join(", "); 13915 }; 13916 const isRequired = computed( 13917 () => (normalizedRules.value.some((rule) => rule.required) || props.required) && !props.showOptional 13918 ); 13919 const shouldShowAsterisk = computed(() => { 13920 return !props.hideRequiredAsterisk && isRequired.value; 13921 }); 13922 const shouldShowError = computed(() => validateState.value === "error"); 13923 const showErrorWithAnimation = () => { 13924 if (errorAnimationTimer) { 13925 clearTimeout(errorAnimationTimer); 13926 } 13927 errorAnimationTimer = setTimeout(() => { 13928 errorVisible.value = true; 13929 }, 200); 13930 }; 13931 const hideErrorWithAnimation = () => { 13932 if (errorAnimationTimer) { 13933 clearTimeout(errorAnimationTimer); 13934 } 13935 errorAnimationTimer = setTimeout(() => { 13936 errorVisible.value = false;
13937 }, 200); 13938 }; 13939 watch( 13940 () => shouldShowError.value && validateMessage.value, 13941 (hasError) => { 13942 if (hasError) { 13943 showErrorWithAnimation(); 13944 } else { 13945 hideErrorWithAnimation(); 13946 } 13947 }, 13948 { 13949 immediate: true 13950 } 13951 ); 13952 const onValidationFailed = (error, dry) => { 13953 var _a; 13954 const { errors, fields } = error; 13955 /* istanbul ignore next @preserve */ 13956 if (!errors || !fields) { 13957 console.error(error); 13958 } 13959 if (!dry) { 13960 setValidationState("error"); 13961 validateMessage.value = errors && ((_a = errors == null ? void 0 : errors[0]) == null ? void 0 : _a.message) || ""; 13962 } 13963 formContext == null ? void 0 : formContext.emitValidate(props.prop, false, validateMessage.value); 13964 }; 13965 const onValidationSucceeded = (dry) => { 13966 if (!dry) { 13967 setValidationState("success"); 13968 } 13969 formContext == null ? void 0 : formContext.emitValidate(props.prop, true, ""); 13970 }; 13971 const doValidate = (rules, dry) => __async$e(this, null, function* () { 13972 const modelProperty = props.prop || ""; 13973 const validator = new Schema({ 13974 [modelProperty]: rules 13975 }); 13976 return validator.validate({ [modelProperty]: fieldValue.value }, { firstFields: true }).then(() => { 13977 onValidationSucceeded(dry); 13978 return true; 13979 }).catch((err) => { 13980 onValidationFailed(err, dry); 13981 return Promise.reject(err); 13982 }); 13983 }); 13984 const validate = (dry) => __async$e(this, null, function* () { 13985 if (isResettingField || !props.prop) { 13986 return false; 13987 } 13988 const rules = normalizedRules.value; 13989 if (!rules.length) { 13990 return true; 13991 } 13992 return doValidate(rules, dry).then(() => { 13993 return true; 13994 }).catch((err) => { 13995 const { fields } = err; 13996 return Promise.reject(fields); 13997 }); 13998 }); 13999 const clearValidate = () => { 14000 setValidationState(""); 14001 validateMessage.value = ""; 14002 isResettingField = false; 14003 }; 14004 const resetField = () => { 14005 const model = formContext == null ? void 0 : formContext.model; 14006 /* istanbul ignore next @preserve */ 14007 if (!model || !props.prop) 14008 return; 14009 const computedValue = getProp(model, props.prop); 14010 isResettingField = true; 14011 computedValue.value = clone(initialValue); 14012 nextTick(() => { 14013 clearValidate(); 14014 isResettingField = false; 14015 }); 14016 }; 14017 const getRootEl = () => { 14018 return formItemRef.value; 14019 }; 14020 watch( 14021 () => props.error, 14022 (val) => { 14023 validateMessage.value = val || ""; 14024 setValidationState(val ? "error" : ""); 14025 }, 14026 { immediate: true } 14027 ); 14028 const context = { 14029 autoBindLabelId: props.autoBindLabelId, 14030 helperTextId, 14031 prop: props.prop, 14032 getRootEl, 14033 labelId, 14034 isRequired, 14035 resetField, 14036 clearValidate, 14037 validate, 14038 disabled: computed(() => props.disabled), 14039 isErrored: computed(() => validateState.value === "error"), 14040 errorMessageId 14041 }; 14042 provide(FORM_ITEM_INJECTION_KEY, context); 14043 onMounted(() => { 14044 formContext == null ? void 0 : formContext.addField(context); 14045 initialValue = clone(fieldValue.value); 14046 }); 14047 onBeforeUnmount(() => { 14048 formContext == null ? void 0 : formContext.removeField(context); 14049 if (errorAnimationTimer) { 14050 clearTimeout(errorAnimationTimer); 14051 } 14052 }); 14053 __expose({ 14054 validate, 14055 clearValidate, 14056 resetField 14057 }); 14058 return (_ctx, _cache) => { 14059 return openBlock(), createElementBlock("div", { 14060 ref_key: "formItemRef", 14061 ref: formItemRef, 14062 class: normalizeClass(containerClass.value), 14063 role: roleResult.value, 14064 "aria-labelledby": !_ctx.autoBindLabelId ? unref(labelId) : void 0, 14065 "aria-required": isRequired.value 14066 }, [ 14067 createBaseVNode("div", { 14068 class: normalizeClass(unref(ns).e("row")) 14069 }, [ 14070 createBaseVNode("div", { 14071 class: normalizeClass([unref(ns).e("label-wrapper"), unref(ns).is("no-margin", !_ctx.label), unref(ns).m(_ctx.headerSize)]) 14072 }, [ 14073 createBaseVNode("div", { 14074 class: normalizeClass(unref(ns).e("label-content")) 14075 }, [ 14076 _ctx.showOptional ? (openBlock(), createElementBlock("span", { 14077 key: 0, 14078 id: unref(labelId) 14079 }, [ 14080 createBaseVNode("span", { 14081 class: normalizeClass(unref(ns).e("label")) 14082 }, toDisplayString(_ctx.label), 3), 14083 createBaseVNode("span", { 14084 class: normalizeClass(unref(ns).e("optional")) 14085 }, toDisplayString(unref(t)("basic.optional")), 3) 14086 ], 8, _hoisted_2$8)) : (openBlock(), createElementBlock("span", { 14087 key: 1, 14088 id: unref(labelId), 14089 class: normalizeClass(unref(ns).e("label")) 14090 }, toDisplayString(_ctx.label), 11, _hoisted_3$4)), 14091 shouldShowAsterisk.value ? (openBlock(), createElementBlock("span", { 14092 key: 2, 14093 "aria-hidden": "true", 14094 class: normalizeClass(unref(ns).e("asterisk")) 14095 }, "*", 2)) : createCommentVNode("", true), 14096 _ctx.$slots["label-suffix"] ? (openBlock(), createElementBlock("span", { 14097 key: 3, 14098 class: normalizeClass(unref(ns).e("label-suffix")) 14099 }, [ 14100 createBaseVNode("span", { 14101 class: normalizeClass(unref(ns).e("label-suffix-inner")) 14102 }, null, 2), 14103 renderSlot(_ctx.$slots, "label-suffix") 14104 ], 2)) : createCommentVNode("", true) 14105 ], 2), 14106 _ctx.$slots["link"] ? (openBlock(), createElementBlock("span", { 14107 key: 0, 14108 class: normalizeClass(unref(ns).e("link")) 14109 }, [ 14110 renderSlot(_ctx.$slots, "link", { size: _ctx.headerSize }) 14111 ], 2)) : createCommentVNode("", true) 14112 ], 2), 14113 createBaseVNode("div", { 14114 class: normalizeClass([unref(ns).e("widgets")]) 14115 }, [ 14116 renderSlot(_ctx.$slots, "default"), 14117 _ctx.helperText || _ctx.$slots["helper-text"] ? (openBlock(), createElementBlock("div", { 14118 key: 0, 14119 id: unref(helperTextId), 14120 class: normalizeClass(unref(ns).e("helper-text")) 14121 }, [ 14122 renderSlot(_ctx.$slots, "helper-text", {}, () => [ 14123 createTextVNode(toDisplayString(_ctx.helperText), 1) 14124 ]) 14125 ], 10, _hoisted_4$2)) : createCommentVNode("", true), 14126 errorVisible.value ? (openBlock(), createElementBlock("div", { 14127 key: 1, 14128 id: errorMessageId.value, 14129 class: normalizeClass(unref(ns).e("error")), 14130 role: "alert", 14131 "aria-label": createErrorMessageAriaLabelImpl() 14132 }, [ 14133 createVNode(unref(ZmIcon), { 14134 class: normalizeClass(unref(ns).e("error-icon")) 14135 }, { 14136 default: withCtx(() => [ 14137 createVNode(unref(AlertCircle)) 14138 ]), 14139 _: 1 14140 }, 8, ["class"]), 14141 createBaseVNode("span", { 14142 class: normalizeClass(unref(ns).e("error-text")), 14143 "aria-hidden": true 14144 }, [ 14145 renderSlot(_ctx.$slots, "error", { error: validateMessage.value }, () => [ 14146 createTextVNode(toDisplayString(validateMessage.value), 1) 14147 ]) 14148 ], 2) 14149 ], 10, _hoisted_5)) : createCommentVNode("", true) 14150 ], 2) 14151 ], 2) 14152 ], 10, _hoisted_1$j); 14153 }; 14154 } 14155})); 14156var __defProp$L = Object.defineProperty; 14157var __defProps$B = Object.defineProperties; 14158var __getOwnPropDescs$B = Object.getOwnPropertyDescriptors; 14159var __getOwnPropSymbols$L = Object.getOwnPropertySymbols; 14160var __hasOwnProp$L = Object.prototype.hasOwnProperty; 14161var __propIsEnum$L = Object.prototype.propertyIsEnumerable; 14162var __defNormalProp$L = (obj, key, value) => key in obj ? __defProp$L(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 14163var __spreadValues$L = (a, b) => { 14164 for (var prop in b || (b = {})) 14165 if (__hasOwnProp$L.call(b, prop)) 14166 __defNormalProp$L(a, prop, b[prop]); 14167 if (__getOwnPropSymbols$L) 14168 for (var prop of __getOwnPropSymbols$L(b)) { 14169 if (__propIsEnum$L.call(b, prop)) 14170 __defNormalProp$L(a, prop, b[prop]); 14171 } 14172 return a; 14173}; 14174var __spreadProps$B = (a, b) => __defProps$B(a, __getOwnPropDescs$B(b)); 14175const _sfc_main$x = /* @__PURE__ */ defineComponent(__spreadProps$B(__spreadValues$L({}, { 14176 name: "ZmFormIsolation" 14177}), { 14178 __name: "form-isolation", 14179 setup(__props) { 14180 provide(FORM_ISOLATION_KEY, {}); 14181 return (_ctx, _cache) => { 14182 return renderSlot(_ctx.$slots, "default"); 14183 }; 14184 } 14185})); 14186const ZmForm = withInstall(_sfc_main$z, { 14187 FormItem: _sfc_main$y, 14188 FormIsolation: _sfc_main$x 14189}); 14190const messages$6 = { 14191 "en-US": { 14192 "popover": { 14193 "close": "Close this popover" 14194 } 14195 }, 14196 "de-DE": { 14197 "popover": { 14198 "close": "Dieses Popover schlieÃen" 14199 } 14200 }, 14201 "es-ES": { 14202 "popover": { 14203 "close": "Cerrar esta ventana emergente" 14204 } 14205 }, 14206 "fr-FR": { 14207 "popover": { 14208 "close": "Fermer cette fenêtre surgissante" 14209 } 14210 }, 14211 "id-ID": { 14212 "popover": { 14213 "close": "Tutup popover ini" 14214 } 14215 }, 14216 "it-IT": { 14217 "popover": { 14218 "close": "Chiudi questo popover" 14219 } 14220 }, 14221 "jp-JP": { 14222 "popover": { 14223 "close": "ãã®ããããªã¼ãã¼ãéãã" 14224 } 14225 }, 14226 "ko-KO": { 14227 "popover": { 14228 "close": "ì´ íì ë«ê¸°" 14229 } 14230 }, 14231 "nl-NL": { 14232 "popover": { 14233 "close": "Deze pop-over sluiten" 14234 } 14235 }, 14236 "pl-PL": { 14237 "popover": { 14238 "close": "Zamknij to wyskakujÄ ce okienko" 14239 } 14240 }, 14241 "pt-PT": { 14242 "popover": { 14243 "close": "Feche este popover" 14244 } 14245 }, 14246 "ru-RU": { 14247 "popover": { 14248 "close": "ÐакÑÑÑÑ ÑÑо вÑплÑваÑÑее окно" 14249 } 14250 }, 14251 "sv-SE": { 14252 "popover": { 14253 "close": "Stäng detta flytande fönster" 14254 } 14255 },
14256 "tr-TR": { 14257 "popover": { 14258 "close": "Bu açılır pencereyi kapat" 14259 } 14260 }, 14261 "vi-VN": { 14262 "popover": { 14263 "close": "Äóng cá»a sá» báºt lên nà y" 14264 } 14265 }, 14266 "zh-CN": { 14267 "popover": { 14268 "close": "å ³éæ¤å¼¹åºæ¡" 14269 } 14270 }, 14271 "zh-TW": { 14272 "popover": { 14273 "close": "é鿤å½åºæç¤ºæ¡" 14274 } 14275 } 14276}; 14277const FOCUS_TRAP_INJECTION_KEY = Symbol( 14278 "ZmFocusTrap" 14279); 14280const FOCUS_AFTER_TRAPPED = "focus-trap.focus-after-trapped"; 14281const FOCUS_AFTER_RELEASED = "focus-trap.focus-after-released"; 14282const FOCUS_AFTER_TRAPPED_OPTS = { 14283 cancelable: true, 14284 bubbles: false 14285}; 14286const focusTrapProps = { 14287 loop: Boolean, 14288 trapped: Boolean, 14289 focusTrapEl: Object, 14290 focusStartEl: { 14291 type: [Object, String], 14292 default: "first" 14293 }, 14294 allowFocusOut: Boolean 14295}; 14296const focusTrapEmits = [ 14297 "focusAfterTrapped", 14298 "focusAfterReleased", 14299 "focusin", 14300 "focusout", 14301 "focusout-prevented", 14302 "release-requested", 14303 "escape-by-tab", 14304 "escape-by-shift-tab" 14305]; 14306let registeredEscapeHandlers = []; 14307const cachedHandler = (e) => { 14308 const event = e; 14309 if (event.key === EVENT_CODE.esc) { 14310 registeredEscapeHandlers.forEach((registeredHandler) => { 14311 registeredHandler(event); 14312 }); 14313 } 14314}; 14315const useEscapeKeydown = (handler) => { 14316 onMounted(() => { 14317 if (registeredEscapeHandlers.length === 0) { 14318 document.addEventListener("keydown", cachedHandler); 14319 } 14320 if (isClient) { 14321 registeredEscapeHandlers.push(handler); 14322 } 14323 }); 14324 onBeforeUnmount(() => { 14325 registeredEscapeHandlers = registeredEscapeHandlers.filter( 14326 (registeredHandler) => registeredHandler !== handler 14327 ); 14328 if (registeredEscapeHandlers.length === 0) { 14329 if (isClient) { 14330 document.removeEventListener("keydown", cachedHandler); 14331 } 14332 } 14333 }); 14334}; 14335var __defProp$K = Object.defineProperty; 14336var __defProps$A = Object.defineProperties; 14337var __getOwnPropDescs$A = Object.getOwnPropertyDescriptors; 14338var __getOwnPropSymbols$K = Object.getOwnPropertySymbols; 14339var __hasOwnProp$K = Object.prototype.hasOwnProperty; 14340var __propIsEnum$K = Object.prototype.propertyIsEnumerable; 14341var __defNormalProp$K = (obj, key, value) => key in obj ? __defProp$K(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 14342var __spreadValues$K = (a, b) => { 14343 for (var prop in b || (b = {})) 14344 if (__hasOwnProp$K.call(b, prop)) 14345 __defNormalProp$K(a, prop, b[prop]); 14346 if (__getOwnPropSymbols$K) 14347 for (var prop of __getOwnPropSymbols$K(b)) { 14348 if (__propIsEnum$K.call(b, prop)) 14349 __defNormalProp$K(a, prop, b[prop]); 14350 } 14351 return a; 14352}; 14353var __spreadProps$A = (a, b) => __defProps$A(a, __getOwnPropDescs$A(b)); 14354const _sfc_main$w = /* @__PURE__ */ defineComponent(__spreadProps$A(__spreadValues$K({}, { 14355 name: "ZmFocusTrap" 14356}), { 14357 __name: "focus-trap", 14358 props: focusTrapProps, 14359 emits: focusTrapEmits, 14360 setup(__props, { expose: __expose, emit: __emit }) { 14361 const props = __props; 14362 const emit = __emit; 14363 const forwardRef = ref(); 14364 let lastFocusBeforeTrapped; 14365 let lastFocusAfterTrapped; 14366 const escapeByTabOrShiftTab = ref(false); 14367 const { focusLayer, pushLayerStack, popLayerStack } = useFocusTrapLayer(); 14368 let isLayerOnStack = false; 14369 useEscapeKeydown((event) => { 14370 if (props.trapped && !focusLayer.paused) { 14371 event.preventDefault(); 14372 event.stopPropagation(); 14373 emit("release-requested", event); 14374 } 14375 }); 14376 const onKeydown = (e) => { 14377 const { loop, trapped } = props; 14378 if (!loop && !trapped) { 14379 return; 14380 } 14381 if (focusLayer.paused) { 14382 return; 14383 } 14384 const { code, ctrlKey, metaKey, currentTarget, shiftKey } = e; 14385 const isTabbing = code === EVENT_CODE.tab && !ctrlKey && !metaKey; 14386 const currentFocusingEl = document.activeElement; 14387 if (isTabbing && currentFocusingEl) { 14388 const container = currentTarget; 14389 const [first, last] = getEdges(container); 14390 const isTabbable = first && last; 14391 if (!isTabbable) { 14392 /* istanbul ignore next @preserve */ 14393 if (currentFocusingEl === container) { 14394 e.preventDefault(); 14395 emit("focusout-prevented"); 14396 } 14397 } else { 14398 if (!shiftKey && currentFocusingEl === last) { 14399 if (loop) { 14400 tryFocus(first, true); 14401 e.preventDefault(); 14402 emit("focusout-prevented"); 14403 } else { 14404 escapeByTabOrShiftTab.value = true; 14405 emit("escape-by-tab"); 14406 } 14407 } else if (shiftKey && [first, container].includes(currentFocusingEl)) { 14408 if (loop) { 14409 tryFocus(last, true); 14410 e.preventDefault(); 14411 emit("focusout-prevented"); 14412 } else { 14413 escapeByTabOrShiftTab.value = true; 14414 emit("escape-by-shift-tab"); 14415 } 14416 } 14417 } 14418 } 14419 }; 14420 provide(FOCUS_TRAP_INJECTION_KEY, { 14421 focusTrapRef: forwardRef, 14422 onKeydown 14423 }); 14424 watch( 14425 () => props.focusTrapEl, 14426 (focusTrapEl) => { 14427 if (focusTrapEl) { 14428 forwardRef.value = focusTrapEl; 14429 } 14430 }, 14431 { immediate: true } 14432 ); 14433 const addFocusTrapListeners = (el) => { 14434 el.addEventListener("keydown", onKeydown); 14435 el.addEventListener("focusin", onFocusIn); 14436 el.addEventListener("focusout", onFocusOut); 14437 }; 14438 const removeFocusTrapListeners = (el) => { 14439 el.removeEventListener("keydown", onKeydown); 14440 el.removeEventListener("focusin", onFocusIn); 14441 el.removeEventListener("focusout", onFocusOut); 14442 }; 14443 watch([forwardRef], ([forwardRef2], _oldForwardRef, onCleanup) => { 14444 if (!forwardRef2) { 14445 return; 14446 } 14447 addFocusTrapListeners(forwardRef2); 14448 onCleanup(() => { 14449 removeFocusTrapListeners(forwardRef2); 14450 }); 14451 }); 14452 const onFocusIn = (e) => { 14453 const trapContainer = unref(forwardRef); 14454 /* istanbul ignore next @preserve */ 14455 if (!trapContainer) { 14456 return; 14457 } 14458 const target = e.target; 14459 const isFocusedInTrap = target && trapContainer.contains(target); 14460 if (isFocusedInTrap) { 14461 emit("focusin", e); 14462 } 14463 if (focusLayer.paused) { 14464 return; 14465 } 14466 if (props.trapped) { 14467 if (isFocusedInTrap) { 14468 lastFocusAfterTrapped = target; 14469 } else { 14470 /* istanbul ignore next @preserve */ 14471 tryFocus(lastFocusAfterTrapped, true); 14472 } 14473 } 14474 }; 14475 const trapOnFocus = (e) => { 14476 emit("focusAfterTrapped", e); 14477 }; 14478 const releaseOnFocus = (e) => { 14479 emit("focusAfterReleased", e); 14480 }; 14481 const onFocusOut = (e) => { 14482 const { trapped, allowFocusOut } = props; 14483 const trapContainer = unref(forwardRef); 14484 if (allowFocusOut || focusLayer.paused || !trapContainer) { 14485 return; 14486 } 14487 if (trapped) { 14488 const relatedTarget = e.relatedTarget; 14489 if (!isNil(relatedTarget) && !trapContainer.contains(relatedTarget)) { 14490 setTimeout(() => { 14491 if (!focusLayer.paused && trapped && isPerformingKeyboardAction()) { 14492 tryFocus(lastFocusAfterTrapped, true); 14493 } 14494 }, 0); 14495 } 14496 } else { 14497 const target = e.target; 14498 const isFocusedInTrap = target && trapContainer.contains(target); 14499 /* istanbul ignore next @preserve */ 14500 if (!isFocusedInTrap) { 14501 emit("focusout", e); 14502 } 14503 } 14504 }; 14505 function startTrap() { 14506 const trapContainer = unref(forwardRef); 14507 if (trapContainer) { 14508 if (!isLayerOnStack) { 14509 pushLayerStack(); 14510 isLayerOnStack = true; 14511 } 14512 const prevFocusedElement = document.activeElement; 14513 lastFocusBeforeTrapped = prevFocusedElement; 14514 const isPrevFocusContained = trapContainer.contains(prevFocusedElement); 14515 if (!isPrevFocusContained) { 14516 const focusEvent = new Event(FOCUS_AFTER_TRAPPED, FOCUS_AFTER_TRAPPED_OPTS); 14517 trapContainer.addEventListener(FOCUS_AFTER_TRAPPED, trapOnFocus);
14518 trapContainer.dispatchEvent(focusEvent); 14519 if (!focusEvent.defaultPrevented) { 14520 nextTick(() => { 14521 let focusStartEl = props.focusStartEl; 14522 /* istanbul ignore next @preserve */ 14523 if (!isString$1(focusStartEl)) { 14524 tryFocus(focusStartEl); 14525 if (document.activeElement !== focusStartEl) { 14526 focusStartEl = "first"; 14527 } 14528 } 14529 if (focusStartEl === "first") { 14530 const tryFocusHandler = () => focusFirstDescendant(obtainAllFocusableElements(trapContainer), true); 14531 tryFocusHandler(); 14532 } 14533 if (document.activeElement === prevFocusedElement || focusStartEl === "container") { 14534 tryFocus(trapContainer); 14535 } 14536 }); 14537 } 14538 } 14539 } 14540 } 14541 function stopTrap(preventBackFocus = false) { 14542 const trapContainer = unref(forwardRef); 14543 if (trapContainer) { 14544 trapContainer.removeEventListener(FOCUS_AFTER_TRAPPED, trapOnFocus); 14545 const releasedEvent = new Event(FOCUS_AFTER_RELEASED, FOCUS_AFTER_TRAPPED_OPTS); 14546 trapContainer.addEventListener(FOCUS_AFTER_RELEASED, releaseOnFocus); 14547 trapContainer.dispatchEvent(releasedEvent); 14548 if (!releasedEvent.defaultPrevented) { 14549 if (!props.loop && escapeByTabOrShiftTab.value) { 14550 escapeByTabOrShiftTab.value = false; 14551 } else { 14552 const focusHandler = () => tryFocus(lastFocusBeforeTrapped != null ? lastFocusBeforeTrapped : document.body, true); 14553 if (isPerformingKeyboardAction() && !preventBackFocus) { 14554 focusHandler(); 14555 } 14556 } 14557 } 14558 trapContainer.removeEventListener(FOCUS_AFTER_RELEASED, releaseOnFocus); 14559 } 14560 if (isLayerOnStack) { 14561 popLayerStack(); 14562 isLayerOnStack = false; 14563 } 14564 } 14565 onBeforeUnmount(() => { 14566 if (isLayerOnStack) { 14567 stopTrap(); 14568 } 14569 }); 14570 const focusOnFirstFocusableElement = () => { 14571 const trapContainer = unref(forwardRef); 14572 if (trapContainer) { 14573 focusFirstDescendant(obtainAllFocusableElements(trapContainer), true); 14574 } 14575 }; 14576 __expose({ 14577 startTrap, 14578 stopTrap, 14579 focusOnFirstFocusableElement 14580 }); 14581 return (_ctx, _cache) => { 14582 return renderSlot(_ctx.$slots, "default"); 14583 }; 14584 } 14585})); 14586const ZmFocusTrap = withInstall(_sfc_main$w); 14587const useVirtualClick = (target, handler) => { 14588 let el = void 0; 14589 const handleClick = (event) => { 14590 if (isVirtualClickEvent(event)) { 14591 handler(); 14592 } 14593 }; 14594 const handlePointerdown = (event) => { 14595 /* istanbul ignore next @preserve */ 14596 if (isVirtualPointerEvent(event)) { 14597 handler(); 14598 } 14599 }; 14600 onMounted(() => { 14601 el = unrefElement(target); 14602 if (el) { 14603 el.addEventListener("click", handleClick); 14604 el.addEventListener("pointerdown", handlePointerdown); 14605 } 14606 }); 14607 onBeforeUnmount(() => { 14608 if (el) { 14609 el.removeEventListener("click", handleClick); 14610 el.removeEventListener("pointerdown", handlePointerdown); 14611 } 14612 }); 14613}; 14614var __defProp$J = Object.defineProperty; 14615var __defProps$z = Object.defineProperties; 14616var __getOwnPropDescs$z = Object.getOwnPropertyDescriptors; 14617var __getOwnPropSymbols$J = Object.getOwnPropertySymbols; 14618var __hasOwnProp$J = Object.prototype.hasOwnProperty; 14619var __propIsEnum$J = Object.prototype.propertyIsEnumerable; 14620var __defNormalProp$J = (obj, key, value) => key in obj ? __defProp$J(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 14621var __spreadValues$J = (a, b) => { 14622 for (var prop in b || (b = {})) 14623 if (__hasOwnProp$J.call(b, prop)) 14624 __defNormalProp$J(a, prop, b[prop]); 14625 if (__getOwnPropSymbols$J) 14626 for (var prop of __getOwnPropSymbols$J(b)) { 14627 if (__propIsEnum$J.call(b, prop)) 14628 __defNormalProp$J(a, prop, b[prop]); 14629 } 14630 return a; 14631}; 14632var __spreadProps$z = (a, b) => __defProps$z(a, __getOwnPropDescs$z(b)); 14633const popoverProps = { 14634 floatingOptions: { 14635 type: Object, 14636 default() { 14637 return {}; 14638 } 14639 }, 14640 title: String, 14641 placement: String, 14642 teleported: { 14643 type: Boolean, 14644 default: true 14645 }, 14646 disabled: Boolean, 14647 showClose: Boolean, 14648 readDescription: Boolean, 14649 zIndex: Number,
14650 closeAriaLabel: String, 14651 ariaLabel: String, 14652 triggerAriaLabelledby: String, 14653 ariaLabelledby: String, 14654 testId: String, 14655 focusTrap: Boolean, 14656 floatingContentClass: String, 14657 arrowKey: Boolean, 14658 transitionName: { 14659 type: String, 14660 default() { 14661 return `${getNamespace()}-fade-in-linear`; 14662 } 14663 }, 14664 trigger: { 14665 type: String, 14666 default: "click" 14667 }, 14668 dialogStyle: { 14669 type: [String, Object, Array] 14670 }, 14671 disableClickOutside: Boolean, 14672 supportLazyRenderContent: { 14673 type: Boolean, 14674 default: true 14675 }, 14676 hideTimeout: { 14677 type: Number, 14678 default: 300 14679 }, 14680 role: { 14681 type: String, 14682 default: "dialog" 14683 }, 14684 allowFocusOut: Boolean, 14685 stopFocusTrapBeforeClose: Boolean, 14686 // for internal use 14687 borderRadius: [String, Number], 14688 layout: { 14689 type: String, 14690 default: "simple" 14691 }, 14692 openWhenTabFocus: Boolean 14693}; 14694const _hoisted_1$i = ["role", "aria-describedby", "aria-label", "aria-labelledby"]; 14695const _hoisted_2$7 = ["id"]; 14696const _sfc_main$v = /* @__PURE__ */ defineComponent(__spreadProps$z(__spreadValues$J({}, { 14697 name: "ZmPopover", 14698 inheritAttrs: false 14699}), { 14700 __name: "popover", 14701 props: popoverProps, 14702 emits: ["before-show", "show", "before-hide", "hide", "before-trap", "esc"], 14703 setup(__props, { expose: __expose, emit: __emit }) { 14704 const props = __props; 14705 const emit = __emit; 14706 const slots = useSlots(); 14707 const ns = useNamespace("popover"); 14708 const floatingContentRef = ref(); 14709 const { focusTrapRef, startFocus, restoreFocus, tryFocusOnFirstFocusableElement } = useFocusTrap(); 14710 const bodyId = useId(); 14711 const { t } = useLocale(messages$6); 14712 const floatingRef = ref(); 14713 const opened = ref(false); 14714 const popoverMain = ref(); 14715 const floatingTriggerRef = ref(); 14716 const teleportedContextClass = useTeleportedContextClass({ 14717 teleported: computed(() => !(!props.teleported || !shouldLoop.value)) 14718 }); 14719 const ariaLabelResult = computed(() => { 14720 const { title, ariaLabel } = props; 14721 return title || ariaLabel; 14722 }); 14723 const isClickTrigger = computed(() => props.trigger === "click"); 14724 const isManualTrigger = computed(() => props.trigger === "manual"); 14725 const floatingProps = computed(() => { 14726 const { floatingOptions, placement } = props; 14727 return __spreadValues$J({ 14728 placement, 14729 arrow: true 14730 }, floatingOptions); 14731 }); 14732 const shouldShow = computed(() => { 14733 return !props.disabled && unref(opened); 14734 }); 14735 const shouldLoop = computed(() => { 14736 const { focusTrap, showClose } = props; 14737 return Boolean(focusTrap || showClose || slots.action); 14738 }); 14739 useVirtualClick(floatingTriggerRef, () => { 14740 /* istanbul ignore next @preserve */ 14741 if (!props.disabled && !isClickTrigger.value && !isManualTrigger.value && !supportTabOpen.value) { 14742 shouldShow.value ? close() : open(); 14743 } 14744 }); 14745 const stopWhenDisabled = () => { 14746 return props.disabled; 14747 }; 14748 const open = () => { 14749 opened.value = true; 14750 }; 14751 const close = () => { 14752 opened.value = false; 14753 }; 14754 const onEsc = () => { 14755 emit("esc"); 14756 close(); 14757 }; 14758 const onKeydown = composeEventHandlers(stopWhenDisabled, (event) => { 14759 if (isManualTrigger.value) { 14760 return; 14761 } 14762 if ([EVENT_CODE.enter, EVENT_CODE.space, EVENT_CODE.numpadEnter].includes(event.code) && !props.openWhenTabFocus) { 14763 shouldShow.value ? close() : open(); 14764 event.preventDefault(); 14765 } 14766 if (props.arrowKey && [EVENT_CODE.up, EVENT_CODE.down].includes(event.code)) { 14767 shouldShow.value ? close() : open(); 14768 event.preventDefault(); 14769 } 14770 if (supportTabOpen.value && event.code === EVENT_CODE.tab && !event.shiftKey && shouldShow.value) { 14771 tryFocusOnFirstFocusableElement(); 14772 event.preventDefault(); 14773 event.stopPropagation(); 14774 } 14775 }); 14776 const onBeforeTrap = (event) => { 14777 if (supportTabOpen.value) { 14778 event.preventDefault(); 14779 return; 14780 } 14781 emit("before-trap", event); 14782 }; 14783 const onMenuBeforeOpen = () => { 14784 emit("before-show"); 14785 }; 14786 const onMenuAfterOpened = () => { 14787 startFocus(); 14788 emit("show"); 14789 }; 14790 const onMenuBeforeClose = () => { 14791 /* istanbul ignore next @preserve */ 14792 if (props.stopFocusTrapBeforeClose) { 14793 tryRestoreFocus(); 14794 } 14795 emit("before-hide"); 14796 }; 14797 const onMenuAfterClosed = () => { 14798 if (!props.stopFocusTrapBeforeClose) { 14799 tryRestoreFocus(); 14800 } 14801 emit("hide"); 14802 }; 14803 const tryRestoreFocus = () => { 14804 let currentPreventBackFocus = preventBackFocus.value; 14805 if (currentPreventBackFocus) { 14806 preventBackFocus.value = false;
14807 } 14808 restoreFocus(currentPreventBackFocus); 14809 }; 14810 const onClick = composeEventHandlers(stopWhenDisabled, () => { 14811 if (isManualTrigger.value) { 14812 return; 14813 } 14814 if (isClickTrigger.value) { 14815 shouldShow.value ? close() : open(); 14816 } 14817 }); 14818 /* istanbul ignore next @preserve */ 14819 let debounceClose = debounce(() => { 14820 close(); 14821 }, props.hideTimeout); 14822 const onMouseEnter = composeEventHandlers(stopWhenDisabled, () => { 14823 if (isManualTrigger.value) { 14824 return; 14825 } 14826 if (!isClickTrigger.value) { 14827 debounceClose.cancel(); 14828 debounceClose = debounce(() => { 14829 close(); 14830 }, props.hideTimeout); 14831 open(); 14832 } 14833 }); 14834 const supportTabOpen = computed(() => { 14835 return props.trigger === "hover" && props.openWhenTabFocus; 14836 }); 14837 const preventBackFocus = ref(false); 14838 const onFocus = (event) => { 14839 var _a; 14840 if (supportTabOpen.value && !((_a = floatingContentRef.value) == null ? void 0 : _a.$el.contains(event.relatedTarget)) && isPerformingKeyboardAction()) { 14841 open(); 14842 } 14843 }; 14844 const onBlur = (event) => { 14845 var _a; 14846 if (supportTabOpen.value && !((_a = floatingContentRef.value) == null ? void 0 : _a.$el.contains(event.relatedTarget)) && isPerformingKeyboardAction()) { 14847 if (shouldShow.value) { 14848 preventBackFocus.value = true; 14849 } 14850 close(); 14851 } 14852 }; 14853 const onMouseLeave = composeEventHandlers(stopWhenDisabled, () => { 14854 if (isManualTrigger.value) { 14855 return; 14856 } 14857 if (!isClickTrigger.value) { 14858 debounceClose(); 14859 } 14860 }); 14861 const processEventListener = (el, mutation, needProcessMouseEvents = true) => { 14862 const cachedVueEvents = el._vei || getSymbolVEI(el) || {}; 14863 if (mutation === "remove") { 14864 el.removeEventListener("keydown", cachedVueEvents["onKeydown"] || onKeydown); 14865 if (needProcessMouseEvents) { 14866 el.removeEventListener("mouseenter", cachedVueEvents["onMouseenter"] || onMouseEnter); 14867 el.removeEventListener("mouseleave", cachedVueEvents["onMouseleave"] || onMouseLeave); 14868 } 14869 } else { 14870 el.addEventListener("keydown", onKeydown); 14871 if (needProcessMouseEvents) { 14872 el.addEventListener("mouseenter", onMouseEnter); 14873 el.addEventListener("mouseleave", onMouseLeave); 14874 } 14875 } 14876 }; 14877 const updateTriggerRef = (el) => { 14878 if (el && floatingRef.value) { 14879 const oldTriggerEl = floatingRef.value.getTriggerEl(); 14880 if (oldTriggerEl) { 14881 processEventListener(oldTriggerEl, "remove", !isZmCheckboxOrRadioOrToggle(oldTriggerEl)); 14882 } 14883 processEventListener(el, "add", oldTriggerEl && !isZmCheckboxOrRadioOrToggle(oldTriggerEl)); 14884 floatingRef.value.updateTriggerEl(el); 14885 } 14886 }; 14887 onBeforeUnmount(() => { 14888 var _a;
14889 try { 14890 const triggerEl = (_a = floatingRef.value) == null ? void 0 : _a.getTriggerEl(); 14891 if (triggerEl) { 14892 processEventListener(triggerEl, "remove", !isZmCheckboxOrRadioOrToggle(triggerEl)); 14893 } 14894 } catch (e) { 14895 } 14896 debounceClose.cancel(); 14897 }); 14898 __expose({ 14899 updateTriggerRef, 14900 open, 14901 close, 14902 bodyId 14903 // for virtual-table 14904 }); 14905 return (_ctx, _cache) => { 14906 return openBlock(), createBlock(unref(ZmFloating), { 14907 ref_key: "floatingRef", 14908 ref: floatingRef, 14909 "support-nested-click-outside": "" 14910 }, { 14911 default: withCtx(() => [ 14912 withDirectives((openBlock(), createBlock(unref(ZmFloatingTrigger), mergeProps({ 14913 ref_key: "floatingTriggerRef", 14914 ref: floatingTriggerRef, 14915 class: unref(ns).e("trigger") 14916 }, _ctx.$attrs, { 14917 "aria-labelledby": _ctx.triggerAriaLabelledby, 14918 onKeydown: unref(onKeydown), 14919 onClick: unref(onClick), 14920 onMouseenter: unref(onMouseEnter), 14921 onMouseleave: unref(onMouseLeave), 14922 onFocus, 14923 onBlur 14924 }), { 14925 default: withCtx(() => [ 14926 renderSlot(_ctx.$slots, "default") 14927 ]), 14928 _: 3 14929 }, 16, ["class", "aria-labelledby", "onKeydown", "onClick", "onMouseenter", "onMouseleave"])), [ 14930 [unref(ClickOutside), close, _ctx.disableClickOutside] 14931 ]), 14932 (openBlock(), createBlock(Teleport, { 14933 to: "body", 14934 disabled: !_ctx.teleported || !shouldLoop.value 14935 }, [ 14936 createVNode(unref(ZmFocusTrap), { 14937 ref_key: "focusTrapRef", 14938 ref: focusTrapRef, 14939 loop: shouldLoop.value, 14940 trapped: shouldShow.value, 14941 "focus-trap-el": popoverMain.value, 14942 "allow-focus-out": _ctx.allowFocusOut, 14943 onFocusAfterTrapped: onBeforeTrap, 14944 onReleaseRequested: onEsc, 14945 onEscapeByTab: close, 14946 onEscapeByShiftTab: close 14947 }, { 14948 default: withCtx(() => [ 14949 createVNode(Transition, { 14950 name: _ctx.transitionName, 14951 onBeforeEnter: onMenuBeforeOpen, 14952 onAfterEnter: onMenuAfterOpened, 14953 onBeforeLeave: onMenuBeforeClose, 14954 onAfterLeave: onMenuAfterClosed 14955 }, { 14956 default: withCtx(() => [ 14957 withDirectives(createVNode(unref(ZmFloatingContent), mergeProps({ 14958 ref_key: "floatingContentRef", 14959 ref: floatingContentRef, 14960 "support-lazy-render-content": _ctx.supportLazyRenderContent, 14961 "test-id": _ctx.testId, 14962 class: [ 14963 _ctx.floatingContentClass, 14964 unref(teleportedContextClass), 14965 unref(ns).is("popover-container"), 14966 unref(ns).is("complex", _ctx.layout === "complex") 14967 ], 14968 visible: shouldShow.value 14969 }, floatingProps.value, { 14970 "z-index": _ctx.zIndex, 14971 "border-radius": _ctx.borderRadius, 14972 onMouseenter: unref(onMouseEnter), 14973 onMouseleave: unref(onMouseLeave) 14974 }), { 14975 default: withCtx(() => [ 14976 createBaseVNode("div", { 14977 ref_key: "popoverMain", 14978 ref: popoverMain, 14979 class: normalizeClass([unref(ns).b(), unref(ns).m(_ctx.layout)]), 14980 tabindex: "-1", 14981 role: _ctx.role === "" ? void 0 : _ctx.role, 14982 style: normalizeStyle(_ctx.dialogStyle), 14983 "aria-describedby": _ctx.readDescription ? unref(bodyId) : void 0, 14984 "aria-label": ariaLabelResult.value, 14985 "aria-labelledby": _ctx.ariaLabelledby 14986 }, [ 14987 _ctx.layout === "simple" && _ctx.showClose ? (openBlock(), createBlock(unref(ZmInlineIconButton), { 14988 key: 0, 14989 class: normalizeClass(unref(ns).m("closable")), 14990 icon: unref(Close), 14991 "aria-label": _ctx.closeAriaLabel || unref(t)("popover.close"), 14992 onClick: close 14993 }, null, 8, ["class", "icon", "aria-label"])) : createCommentVNode("", true), 14994 _ctx.layout === "complex" && _ctx.showClose ? (openBlock(), createBlock(unref(ZmButton), { 14995 key: 1, 14996 class: normalizeClass(unref(ns).m("closable")), 14997 type: "tertiary", 14998 size: "sm", 14999 icon: unref(Close), 15000 "aria-label": _ctx.closeAriaLabel || unref(t)("popover.close"), 15001 onClick: close 15002 }, null, 8, ["class", "icon", "aria-label"])) : createCommentVNode("", true), 15003 createBaseVNode("div", { 15004 class: normalizeClass([unref(ns).e("content")]) 15005 }, [ 15006 _ctx.title ? (openBlock(), createElementBlock("div", { 15007 key: 0, 15008 class: normalizeClass([ 15009 unref(ns).e("title"), 15010 unref(ns).is("padding-for-close", _ctx.showClose), 15011 unref(ns).is("complex", _ctx.layout === "complex") 15012 ]) 15013 }, toDisplayString(_ctx.title), 3)) : createCommentVNode("", true), 15014 createBaseVNode("div", { 15015 id: unref(bodyId), 15016 class: normalizeClass([ 15017 unref(ns).e("body"), 15018 unref(ns).is("padding-for-close", !_ctx.title && _ctx.showClose), 15019 unref(ns).is("complex", _ctx.layout === "complex") 15020 ]) 15021 }, [ 15022 renderSlot(_ctx.$slots, "content") 15023 ], 10, _hoisted_2$7) 15024 ], 2), 15025 _ctx.$slots.action ? (openBlock(), createElementBlock("div", { 15026 key: 2, 15027 class: normalizeClass(unref(ns).e("actionable")) 15028 }, [ 15029 renderSlot(_ctx.$slots, "action") 15030 ], 2)) : createCommentVNode("", true) 15031 ], 14, _hoisted_1$i) 15032 ]), 15033 _: 3 15034 }, 16, ["support-lazy-render-content", "test-id", "class", "visible", "z-index", "border-radius", "onMouseenter", "onMouseleave"]), [ 15035 [vShow, shouldShow.value] 15036 ]) 15037 ]), 15038 _: 3 15039 }, 8, ["name"]) 15040 ]), 15041 _: 3 15042 }, 8, ["loop", "trapped", "focus-trap-el", "allow-focus-out"]) 15043 ], 8, ["disabled"])) 15044 ]), 15045 _: 3 15046 }, 512); 15047 }; 15048 } 15049})); 15050const ZmPopover = withInstall(_sfc_main$v); 15051const DROPDOWN_INJECTION_KEY = Symbol("zmDropdown"); 15052const dropdownProps = { 15053 floatingOptions: { 15054 type: Object, 15055 default() { 15056 return {}; 15057 } 15058 }, 15059 floatingContentClass: String, 15060 trigger: { 15061 type: String, 15062 default: "click" 15063 }, 15064 disabled: Boolean, 15065 zIndex: Number, 15066 testId: String, 15067 teleported: { 15068 type: Boolean, 15069 default: true 15070 }, 15071 splitButton: Boolean,
15072 splitButtonAriaLabel: String, 15073 type: { 15074 type: String, 15075 validator(value) { 15076 return ["primary", "secondary"].includes(value); 15077 }, 15078 default: "primary" 15079 }, 15080 size: { 15081 type: String, 15082 default: "md" 15083 }, 15084 hideTimeout: { 15085 type: Number, 15086 default: 300 15087 }, 15088 splitButtonLoading: { 15089 type: Boolean, 15090 default: false 15091 }, 15092 supportAriaHiddenOthersWhenOpened: { 15093 type: Boolean, 15094 default: true 15095 }, 15096 horizontalLayout: Boolean, 15097 // for editor toolbar use 15098 transitionName: { 15099 type: String, 15100 default() { 15101 return `${getNamespace()}-fade-in-linear`; 15102 } 15103 }, 15104 arrowKey: { 15105 type: Boolean, 15106 default: true 15107 }, 15108 arrowRightKey: Boolean, 15109 maxMenuHeight: String, 15110 splitMainButtonProps: { 15111 type: Object, 15112 default() { 15113 return {}; 15114 } 15115 } 15116}; 15117const dropdownEmits = ["command", "before-show", "show", "hide", "main-click"]; 15118const useMenuA11y = (keyboardHandlers) => { 15119 let grid = []; 15120 let liItems = []; 15121 let focusedRowIndex = -1; 15122 let focusedColIndex = 0; 15123 let container; 15124 const ns = useNamespace("dropdown-item"); 15125 const ns2 = useNamespace("dropdown-item-group"); 15126 const selector = { 15127 liItems: `.${ns.b()}`, 15128 liItemsGroup: `.${ns2.b()}:not(.is-empty)` 15129 // should ignore empty dropdown group 15130 }; 15131 const resetTabIndexInContainer = () => { 15132 const focusableDescendantsElements = getFocusableElementsFromContainer(container); 15133 focusableDescendantsElements.forEach((el) => { 15134 el.setAttribute("tabindex", "-1"); 15135 }); 15136 }; 15137 const buildGrid = (shouldFocusOnLastOne) => { 15138 liItems = Array.from( 15139 container.querySelectorAll(`${selector.liItems}, ${selector.liItemsGroup}`) 15140 ); 15141 grid = []; 15142 const length = liItems.length; 15143 for (let i = 0; i < length; i++) { 15144 const focusableElementInListItem = getFocusableElementsFromContainer(liItems[i], true); 15145 const targets = focusableElementInListItem.filter((node) => !node.dataset.ignore); 15146 const listItemEl = targets[0]; 15147 if (i === (shouldFocusOnLastOne ? length - 1 : 0)) { 15148 focusedRowIndex = i; 15149 listItemEl.setAttribute("tabindex", "0"); 15150 listItemEl.focus({ preventScroll: true }); 15151 keyboardHandlers.scrollMenuItemIntoView(listItemEl); 15152 } 15153 grid[i] = targets; 15154 } 15155 }; 15156 const registerEvents = () => { 15157 clearEvents(); 15158 container.addEventListener("keydown", checkFocusChange, true); 15159 }; 15160 const clearEvents = () => { 15161 container.removeEventListener("keydown", checkFocusChange, true); 15162 }; 15163 const setFocusOnSpecifiedListItem = (rowIndex, needFocus = true) => { 15164 if (grid[rowIndex]) { 15165 for (const rowItems of grid) { 15166 rowItems[0].setAttribute("tabindex", "-1"); 15167 } 15168 grid[rowIndex][0].setAttribute("tabindex", "0"); 15169 if (needFocus) { 15170 grid[rowIndex][0].focus({ preventScroll: true }); 15171 keyboardHandlers.scrollMenuItemIntoView(grid[rowIndex][0]); 15172 focusedColIndex = 0; 15173 } 15174 focusedRowIndex = rowIndex; 15175 } 15176 }; 15177 const buildA11y = (_container, isOpenedByArrowUp = false) => { 15178 container = _container; 15179 resetTabIndexInContainer(); 15180 buildGrid(isOpenedByArrowUp); 15181 registerEvents(); 15182 }; 15183 const navigateBetweenListItem = (direction) => { 15184 const length = grid.length; 15185 if (length) { 15186 if (direction === NavigateType.NEXT) { 15187 focusedRowIndex++; 15188 if (focusedRowIndex === length) { 15189 focusedRowIndex = 0; 15190 } 15191 } else if (direction === NavigateType.PREV) { 15192 focusedRowIndex--; 15193 if (focusedRowIndex < 0) { 15194 focusedRowIndex = length - 1; 15195 } 15196 } else if (direction === NavigateType.HOME) { 15197 focusedRowIndex = 0; 15198 } else if (direction === NavigateType.END) { 15199 focusedRowIndex = length - 1; 15200 } 15201 setFocusOnSpecifiedListItem(focusedRowIndex); 15202 } 15203 }; 15204 const navigateWithinListItems = (direction, event) => { 15205 const columnCounter = grid[focusedRowIndex].length; 15206 if (direction === NavigateType.NEXT && focusedColIndex < columnCounter - 1) { 15207 focusedColIndex++; 15208 grid[focusedRowIndex][focusedColIndex].focus(); 15209 event.stopPropagation(); 15210 event.preventDefault(); 15211 } else if (direction === NavigateType.PREV && focusedColIndex > 0) { 15212 focusedColIndex--; 15213 grid[focusedRowIndex][focusedColIndex].focus(); 15214 event.stopPropagation(); 15215 event.preventDefault(); 15216 } else { 15217 keyboardHandlers.hide(); 15218 focusedColIndex = 0; 15219 } 15220 }; 15221 const checkFocusChange = (event) => {
15222 const keyCode = event.code; 15223 const pressedShiftKey = event.shiftKey; 15224 const actionsMap = { 15225 [EVENT_CODE.down]: NavigateType.NEXT, 15226 [EVENT_CODE.up]: NavigateType.PREV, 15227 [EVENT_CODE.home]: NavigateType.HOME, 15228 [EVENT_CODE.end]: NavigateType.END 15229 }; 15230 switch (keyCode) { 15231 case EVENT_CODE.tab: 15232 navigateWithinListItems(pressedShiftKey ? NavigateType.PREV : NavigateType.NEXT, event); 15233 break; 15234 case EVENT_CODE.up: 15235 case EVENT_CODE.down: 15236 case EVENT_CODE.home: 15237 case EVENT_CODE.end: 15238 navigateBetweenListItem(actionsMap[keyCode]); 15239 event.preventDefault(); 15240 event.stopPropagation(); 15241 break; 15242 case EVENT_CODE.enter: 15243 case EVENT_CODE.numpadEnter: 15244 case EVENT_CODE.space: 15245 if (focusedColIndex === 0 && focusedRowIndex > -1) { 15246 keyboardHandlers.selected(focusedRowIndex, event); 15247 event.preventDefault(); 15248 event.stopPropagation(); 15249 } 15250 break; 15251 case EVENT_CODE.esc: 15252 keyboardHandlers.hide(); 15253 event.preventDefault(); 15254 event.stopPropagation(); 15255 break; 15256 case EVENT_CODE.left: 15257 if (keyboardHandlers.supportArrowRightKey()) { 15258 keyboardHandlers.hide(); 15259 event.preventDefault(); 15260 event.stopPropagation(); 15261 } 15262 break; 15263 } 15264 }; 15265 /* istanbul ignore next @preserve */ 15266 onBeforeUnmount(() => { 15267 if (container) { 15268 clearEvents(); 15269 } 15270 }); 15271 return { 15272 buildA11y 15273 }; 15274}; 15275const messages$5 = { 15276 "en-US": { 15277 "dropdown": { 15278 "contextMenuTip": "Press Shift+F10 or menu key for more options", 15279 "moreItems": "More items" 15280 } 15281 }, 15282 "de-DE": { 15283 "dropdown": { 15284 "contextMenuTip": "Für weitere Optionen die Umschalttaste + F10 oder die Menütaste drücken", 15285 "moreItems": "Weitere Elemente" 15286 } 15287 }, 15288 "es-ES": { 15289 "dropdown": { 15290 "contextMenuTip": "Pulse Mayús + F10 o la tecla de menú para obtener más opciones", 15291 "moreItems": "Más elementos" 15292 } 15293 }, 15294 "fr-FR": { 15295 "dropdown": { 15296 "contextMenuTip": "Appuyez sur Shift+F10 ou sur la touche de menu pour plus dâoptions", 15297 "moreItems": "Plus d'éléments" 15298 } 15299 }, 15300 "id-ID": { 15301 "dropdown": { 15302 "contextMenuTip": "Tekan Shift+F10 atau tombol menu untuk opsi lainnya", 15303 "moreItems": "Item lainnya" 15304 } 15305 }, 15306 "it-IT": { 15307 "dropdown": { 15308 "contextMenuTip": "Premi Maius+F10 o il tasto menu per altre opzioni", 15309 "moreItems": "Altri elementi" 15310 } 15311 }, 15312 "jp-JP": { 15313 "dropdown": { 15314 "contextMenuTip": "Shift+F10 ã¾ãã¯ã¡ãã¥ã¼ãã¼ãæ¼ãã¦ãã®ä»ã®ãªãã·ã§ã³ã確èª", 15315 "moreItems": "ä»ã®ã¢ã¤ãã ã表示" 15316 } 15317 }, 15318 "ko-KO": { 15319 "dropdown": { 15320 "contextMenuTip": "ë ë§ì ìµì ì ë³´ë ¤ë©´ Shift+F10 ëë ë©ë´ í¤ ë르기", 15321 "moreItems": "ì¶ê° í목" 15322 } 15323 }, 15324 "nl-NL": { 15325 "dropdown": { 15326 "contextMenuTip": "Druk op Shift+F10 of de menutoets voor meer opties", 15327 "moreItems": "Meer items" 15328 } 15329 }, 15330 "pl-PL": { 15331 "dropdown": { 15332 "contextMenuTip": "NaciÅnij Shift+F10 lub klawisz menu, aby uzyskaÄ wiÄcej opcji", 15333 "moreItems": "WiÄcej pozycji" 15334 } 15335 }, 15336 "pt-PT": { 15337 "dropdown": { 15338 "contextMenuTip": "Pressione Shift+F10 ou a tecla de menu para obter mais opções", 15339 "moreItems": "Mais itens" 15340 } 15341 }, 15342 "ru-RU": { 15343 "dropdown": { 15344 "contextMenuTip": "ÐажмиÑе «Shift + F10» или клавиÑÑ Ð¼ÐµÐ½Ñ, ÑÑÐ¾Ð±Ñ Ð¿Ð¾ÑмоÑÑеÑÑ Ð´Ð¾Ð¿Ð¾Ð»Ð½Ð¸ÑелÑнÑе паÑамеÑÑÑ", 15345 "moreItems": "ÐополниÑелÑно" 15346 } 15347 }, 15348 "sv-SE": { 15349 "dropdown": { 15350 "contextMenuTip": "Tryck pÃ¥ Shift+F10 eller menyknapp för fler alternativ", 15351 "moreItems": "Fler objekt" 15352 } 15353 }, 15354 "tr-TR": { 15355 "dropdown": { 15356 "contextMenuTip": "Daha fazla seçenek için Shift+F10 veya menü tuÅuna basın", 15357 "moreItems": "Daha fazla öge" 15358 } 15359 }, 15360 "vi-VN": { 15361 "dropdown": { 15362 "contextMenuTip": "Nhấn phÃm Shift+F10 hoặc menu Äá» có thêm tùy chá»n", 15363 "moreItems": "Thêm mục" 15364 } 15365 }, 15366 "zh-CN": { 15367 "dropdown": { 15368 "contextMenuTip": "æShift+F10æèå鮿¥çæ´å¤é项", 15369 "moreItems": "æ´å¤é¡¹ç®" 15370 } 15371 }, 15372 "zh-TW": { 15373 "dropdown": { 15374 "contextMenuTip": "æä¸Shift+F10æåè½è¡¨éµå¯ä½¿ç¨æ´å¤é¸é ", 15375 "moreItems": "æ´å¤é ç®" 15376 } 15377 } 15378}; 15379const getDefaultParent = (originalTarget) => { 15380 /* istanbul ignore next @preserve */ 15381 if (typeof document === "undefined") { 15382 return null; 15383 } 15384 const sampleTarget = Array.isArray(originalTarget) ? originalTarget[0] : originalTarget; 15385 return sampleTarget.ownerDocument.body; 15386}; 15387let counterMap = /* @__PURE__ */ new WeakMap(); 15388let uncontrolledNodes = /* @__PURE__ */ new WeakMap(); 15389let markerMap = {}; 15390let lockCount = 0; 15391/* istanbul ignore next @preserve */ 15392const unwrapHost = (node) => node && (node.host || unwrapHost(node.parentNode)); 15393/* istanbul ignore next @preserve */ 15394const correctTargets = (parent, targets) => targets.map((target) => { 15395 if (parent.contains(target)) { 15396 return target; 15397 } 15398 const correctedTarget = unwrapHost(target); 15399 if (correctedTarget && parent.contains(correctedTarget)) { 15400 return correctedTarget; 15401 } 15402 console.error("aria-hidden", target, "in not contained inside", parent, ". Doing nothing"); 15403 return null; 15404}).filter((x) => Boolean(x)); 15405const applyAttributeToOthers = (originalTarget, parentNode, markerName, controlAttribute) => { 15406 const targets = correctTargets( 15407 parentNode, 15408 Array.isArray(originalTarget) ? originalTarget : [originalTarget] 15409 ); 15410 if (!markerMap[markerName]) { 15411 markerMap[markerName] = /* @__PURE__ */ new WeakMap(); 15412 } 15413 const markerCounter = markerMap[markerName]; 15414 const hiddenNodes = []; 15415 const elementsToKeep = /* @__PURE__ */ new Set(); 15416 const elementsToStop = new Set(targets); 15417 const keep = (el) => { 15418 if (!el || elementsToKeep.has(el)) { 15419 return; 15420 } 15421 elementsToKeep.add(el); 15422 keep(el.parentNode); 15423 };
15424 targets.forEach(keep); 15425 const deep = (parent) => { 15426 if (!parent || elementsToStop.has(parent)) { 15427 return; 15428 } 15429 Array.prototype.forEach.call(parent.children, (node) => { 15430 if (elementsToKeep.has(node)) { 15431 deep(node); 15432 } else { 15433 try { 15434 const attr = node.getAttribute(controlAttribute); 15435 const alreadyHidden = attr !== null && attr !== "false"; 15436 const counterValue = (counterMap.get(node) || 0) + 1; 15437 const markerValue = (markerCounter.get(node) || 0) + 1; 15438 counterMap.set(node, counterValue); 15439 markerCounter.set(node, markerValue); 15440 hiddenNodes.push(node); 15441 if (counterValue === 1 && alreadyHidden) { 15442 uncontrolledNodes.set(node, true); 15443 } 15444 if (markerValue === 1) { 15445 node.setAttribute(markerName, "true"); 15446 } 15447 if (!alreadyHidden) { 15448 node.setAttribute(controlAttribute, "true"); 15449 } 15450 } catch (e) { 15451 /* istanbul ignore next @preserve */ 15452 console.error("aria-hidden: cannot operate on ", node, e); 15453 } 15454 } 15455 }); 15456 }; 15457 deep(parentNode); 15458 elementsToKeep.clear(); 15459 lockCount++; 15460 return () => { 15461 hiddenNodes.forEach((node) => { 15462 const counterValue = counterMap.get(node) - 1; 15463 const markerValue = markerCounter.get(node) - 1; 15464 counterMap.set(node, counterValue); 15465 markerCounter.set(node, markerValue); 15466 if (!counterValue) { 15467 if (!uncontrolledNodes.has(node)) { 15468 node.removeAttribute(controlAttribute); 15469 } 15470 uncontrolledNodes.delete(node); 15471 } 15472 if (!markerValue) { 15473 node.removeAttribute(markerName); 15474 } 15475 }); 15476 lockCount--; 15477 if (!lockCount) { 15478 counterMap = /* @__PURE__ */ new WeakMap(); 15479 counterMap = /* @__PURE__ */ new WeakMap(); 15480 uncontrolledNodes = /* @__PURE__ */ new WeakMap(); 15481 markerMap = {}; 15482 } 15483 }; 15484}; 15485const hideOthers = (originalTarget, parentNode, markerName = "data-aria-hidden") => { 15486 const targets = Array.from(Array.isArray(originalTarget) ? originalTarget : [originalTarget]); 15487 const activeParentNode = getDefaultParent(originalTarget); 15488 /* istanbul ignore next @preserve */ 15489 if (!activeParentNode) { 15490 return () => null; 15491 } 15492 targets.push(...Array.from(activeParentNode.querySelectorAll("[aria-live]"))); 15493 return applyAttributeToOthers(targets, activeParentNode, markerName, "aria-hidden"); 15494}; 15495function useBodyAriaHidden(getExcludeEl) { 15496 let _restoreAriaHidden = null; 15497 const doAriaHidden = () => { 15498 const excludeEl = getExcludeEl(); 15499 if (excludeEl && isPerformingKeyboardAction()) { 15500 _restoreAriaHidden = hideOthers(ensureArray(excludeEl)); 15501 } 15502 }; 15503 const restoreAriaHidden = () => { 15504 _restoreAriaHidden == null ? void 0 : _restoreAriaHidden(); 15505 _restoreAriaHidden = null; 15506 }; 15507 onScopeDispose(restoreAriaHidden); 15508 return { 15509 doAriaHidden, 15510 restoreAriaHidden 15511 }; 15512} 15513var __defProp$I = Object.defineProperty; 15514var __defProps$y = Object.defineProperties; 15515var __getOwnPropDescs$y = Object.getOwnPropertyDescriptors; 15516var __getOwnPropSymbols$I = Object.getOwnPropertySymbols; 15517var __hasOwnProp$I = Object.prototype.hasOwnProperty; 15518var __propIsEnum$I = Object.prototype.propertyIsEnumerable; 15519var __defNormalProp$I = (obj, key, value) => key in obj ? __defProp$I(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 15520var __spreadValues$I = (a, b) => { 15521 for (var prop in b || (b = {})) 15522 if (__hasOwnProp$I.call(b, prop)) 15523 __defNormalProp$I(a, prop, b[prop]); 15524 if (__getOwnPropSymbols$I) 15525 for (var prop of __getOwnPropSymbols$I(b)) { 15526 if (__propIsEnum$I.call(b, prop)) 15527 __defNormalProp$I(a, prop, b[prop]); 15528 } 15529 return a; 15530}; 15531var __spreadProps$y = (a, b) => __defProps$y(a, __getOwnPropDescs$y(b)); 15532const _hoisted_1$h = ["data-testid"]; 15533const _sfc_main$u = /* @__PURE__ */ defineComponent(__spreadProps$y(__spreadValues$I({}, { 15534 name: "ZmDropdown" 15535}), { 15536 __name: "dropdown", 15537 props: dropdownProps, 15538 emits: dropdownEmits, 15539 setup(__props, { expose: __expose, emit: __emit }) { 15540 const props = __props; 15541 const emit = __emit; 15542 const clickOutsideDisabled = ref(false); 15543 const ns = useNamespace("dropdown"); 15544 const { t } = useLocale(messages$5); 15545 const splitButtonAriaLabelResult = computed( 15546 () => props.splitButtonAriaLabel || t("dropdown.moreItems") 15547 ); 15548 const scrollbarRef = ref(); 15549 const { buildA11y } = useMenuA11y({ 15550 selected(index2, event) { 15551 var _a, _b; 15552 const dropdownItem = dropdownItems.value[index2]; 15553 if (dropdownItem) { 15554 (_b = (_a = dropdownItem == null ? void 0 : dropdownItem.$) == null ? void 0 : _a.exposed) == null ? void 0 : _b.handleItem
15554Click(event); 15555 } 15556 }, 15557 hide() { 15558 hide2(); 15559 focusOnTrigger(); 15560 }, 15561 supportArrowRightKey() { 15562 return props.arrowRightKey; 15563 }, 15564 scrollMenuItemIntoView(element) { 15565 if (scrollbarRef.value && !!props.maxMenuHeight) { 15566 scrollIntoView(scrollbarRef.value.wrapRef, element); 15567 } 15568 } 15569 }); 15570 const containerRef = ref(); 15571 const contextMenuAriaDescribedbyId = useId().value; 15572 const ariaDescribedbyResult = computed(() => { 15573 if (supportContextMenu.value) { 15574 return contextMenuAriaDescribedbyId; 15575 } 15576 return void 0; 15577 }); 15578 const tooltipContext = inject(TOOLTIP_INJECTION_KEY, void 0); 15579 const infoPopoverContext = inject(INFO_POPOVER_INJECTION_KEY, void 0); 15580 const visible = ref(false); 15581 const supportHover = computed(() => { 15582 return props.trigger === "hover"; 15583 }); 15584 const supportContextMenu = computed(() => { 15585 return props.trigger === "contextmenu"; 15586 }); 15587 const menuId = useId().value; 15588 const focusingIndex = ref(-1); 15589 const { isPressedArrowUpAndDownInTableBody } = useWrapperInTableBody(); 15590 const floatingOptionsResult = computed(() => { 15591 return __spreadValues$I({ 15592 placement: "bottom-start", 15593 offsetOptions: 4 15594 }, props.floatingOptions); 15595 }); 15596 const instance = getCurrentInstance(); 15597 const mainButtonRef = ref(); 15598 const floatingTriggerRef = ref(); 15599 const floatingContentRef = ref(); 15600 const isOpenedByArrowUp = ref(false); 15601 const { pushLayerStack, popLayerStack } = useFocusTrapLayer(); 15602 const { 15603 children: dropdownItems, 15604 addChild: onItemCreate, 15605 removeChild: onItemRemove 15606 } = useOrderedChildren(instance, "ZmDropdownItem"); 15607 const teleportedContextClass = useTeleportedContextClass(props); 15608 const { doAriaHidden, restoreAriaHidden } = useBodyAriaHidden(() => { 15609 var _a; 15610 return (_a = floatingContentRef.value) == null ? void 0 : _a.$el; 15611 }); 15612 const hide2 = () => { 15613 visible.value = false; 15614 }; 15615 const show = () => { 15616 visible.value = true; 15617 }; 15618 /* istanbul ignore next @preserve */ 15619 useVirtualClick(floatingTriggerRef, () => { 15620 if (!props.disabled && supportHover.value) { 15621 visible.value ? hide2() : show(); 15622 } 15623 }); 15624 const stopWhenDisabled = () => { 15625 return props.disabled || props.splitButtonLoading && props.splitButton; 15626 }; 15627 /* istanbul ignore next @preserve */ 15628 let debounceHide = debounce(() => { 15629 hide2(); 15630 }, props.hideTimeout); 15631 const onMouseEnter = composeEventHandlers(stopWhenDisabled, () => { 15632 if (supportHover.value) { 15633 debounceHide.cancel(); 15634 debounceHide = debounce(() => { 15635 hide2(); 15636 }, props.hideTimeout); 15637 show(); 15638 } 15639 }); 15640 const onMouseLeave = composeEventHandlers(stopWhenDisabled, (event) => { 15641 var _a; 15642 if (supportHover.value) { 15643 if (event.relatedTarget && ((_a = floatingContentRef.value) == null ? void 0 : _a.$el.contains(event.relatedTarget))) { 15644 return; 15645 } 15646 debounceHide(); 15647 } 15648 }); 15649 const shouldShow = computed(() => { 15650 return !props.disabled && visible.value; 15651 }); 15652 const onMenuBeforeOpen = () => { 15653 if (props.teleported) { 15654 pushLayerStack(); 15655 } 15656 emit("before-show"); 15657 }; 15658 const onMenuOpened = () => { 15659 buildA11y(floatingContentRef.value.$el, isOpenedByArrowUp.value); 15660 if (props.supportAriaHiddenOthersWhenOpened) { 15661 doAriaHidden(); 15662 } 15663 emit("show"); 15664 }; 15665 const onMenuBeforeClose = () => { 15666 if (props.teleported) { 15667 popLayerStack(); 15668 } 15669 if (props.supportAriaHiddenOthersWhenOpened) { 15670 restoreAriaHidden(); 15671 } 15672 }; 15673 const onMenuClosed = () => { 15674 if (isOpenedByArrowUp.value) { 15675 isOpenedByArrowUp.value = false; 15676 } 15677 emit("hide"); 15678 }; 15679 const focusOnTrigger = () => { 15680 var _a; 15681 (_a = floatingTriggerRef.value) == null ? void 0 : _a.$el.focus({ preventScroll: true }); 15682 }; 15683 const focusOnMainButton = () => { 15684 var _a; 15685 (_a = mainButtonRef.value) == null ? void 0 : _a.focus(); 15686 }; 15687 const commandHandler = (command, instanceProxy, event) => { 15688 emit("command", command, instanceProxy, event); 15689 hide2(); 15690 focusOnTrigger(); 15691 }; 15692 const onTriggerKeydown = (event) => { 15693 const { disabled } = props; 15694 if (disabled) { 15695 return; 15696 }
15697 const keyCode = event.code; 15698 let pressedArrowUp = keyCode === EVENT_CODE.up; 15699 switch (keyCode) { 15700 case EVENT_CODE.enter: 15701 case EVENT_CODE.numpadEnter: 15702 case EVENT_CODE.space: 15703 case EVENT_CODE.down: 15704 case EVENT_CODE.up: 15705 if (isPressedArrowUpAndDownInTableBody(keyCode) || supportContextMenu.value) { 15706 return; 15707 } 15708 if (!props.arrowKey && [EVENT_CODE.down, EVENT_CODE.up].includes(keyCode)) { 15709 return; 15710 } 15711 if (pressedArrowUp) { 15712 isOpenedByArrowUp.value = true; 15713 } 15714 show(); 15715 event.preventDefault(); 15716 event.stopPropagation(); 15717 break; 15718 case EVENT_CODE.f10: 15719 if (event.shiftKey && supportContextMenu.value) { 15720 if (!shouldShow.value) { 15721 show(); 15722 event.preventDefault(); 15723 event.stopPropagation(); 15724 } 15725 } 15726 break; 15727 case EVENT_CODE.contextMenu: 15728 if (!shouldShow.value && supportContextMenu.value) { 15729 show(); 15730 event.preventDefault(); 15731 event.stopPropagation(); 15732 } 15733 break; 15734 case EVENT_CODE.right: 15735 if (!props.arrowRightKey) { 15736 return; 15737 } 15738 show(); 15739 event.preventDefault(); 15740 event.stopPropagation(); 15741 break; 15742 } 15743 }; 15744 const handleClickOutside = () => { 15745 if (clickOutsideDisabled.value) { 15746 return; 15747 } 15748 visible.value && hide2(); 15749 }; 15750 const onItemFocusing = (instanceProxy) => { 15751 const index2 = dropdownItems.value.indexOf(instanceProxy); 15752 if (index2 > -1) { 15753 focusingIndex.value = index2; 15754 } 15755 }; 15756 provide(DROPDOWN_INJECTION_KEY, { 15757 commandHandler, 15758 onItemCreate, 15759 onItemRemove, 15760 onItemFocusing, 15761 disableClickOutside: () => { 15762 clickOutsideDisabled.value = true; 15763 }, 15764 enableClickOutside: () => { 15765 clickOutsideDisabled.value = false; 15766 } 15767 }); 15768 const handleClick = composeEventHandlers(stopWhenDisabled, () => { 15769 if (!supportHover.value && !supportContextMenu.value) { 15770 visible.value ? hide2() : show(); 15771 } 15772 }); 15773 const isMainKeyboardFocus = ref(false); 15774 const handleMainFocus = () => { 15775 if (isPerformingKeyboardAction() && mainButtonRef.value) { 15776 isMainKeyboardFocus.value = true; 15777 } 15778 }; 15779 const handleMainBlur = () => { 15780 if (isPerformingKeyboardAction() && mainButtonRef.value) { 15781 isMainKeyboardFocus.value = false; 15782 } 15783 }; 15784 const handleMainClick = (event) => { 15785 emit("main-click", event); 15786 }; 15787 const handleContextMenu = (e) => { 15788 if (supportContextMenu.value) { 15789 if (!visible.value && !props.disabled) { 15790 show(); 15791 } 15792 e.preventDefault(); 15793 } 15794 }; 15795 const tryForwardTooltipTrigger = () => { 15796 nextTick(() => { 15797 var _a, _b, _c, _d, _e, _f; 15798 if (tooltipContext && floatingTriggerRef.value) { 15799 if (((_b = (_a = instance.parent) == null ? void 0 : _a.attrs) == null ? void 0 : _b.class) === `${ns.namespace}-tooltip__trigger`) { 15800 tooltipContext.updateTriggerRef(floatingTriggerRef.value.$el); 15801 (_c = containerRef.value) == null ? void 0 : _c.removeAttribute("aria-label"); 15802 } 15803 } 15804 if (infoPopoverContext && floatingTriggerRef.value) { 15805 if (((_e = (_d = instance.parent) == null ? void 0 : _d.attrs) == null ? void 0 : _e.class) === `${ns.namespace}-info-popover__trigger`) { 15806 infoPopoverContext.updateTriggerRef(floatingTriggerRef.value.$el); 15807 (_f = containerRef.value) == null ? void 0 : _f.removeAttribute("aria-label"); 15808 } 15809 } 15810 }); 15811 }; 15812 onMounted(() => { 15813 tryForwardTooltipTrigger(); 15814 }); 15815 __expose({ 15816 focusOnTrigger, 15817 focusOnMainButton, 15818 show, 15819 hide: hide2 15820 // for editor 15821 }); 15822 return (_ctx, _cache) => { 15823 return openBlock(), createElementBlock("span", { 15824 ref_key: "containerRef", 15825 ref: containerRef, 15826 class: normalizeClass([unref(ns).b(), unref(ns).is("disabled", _ctx.disabled && !_ctx.splitButton)]), 15827 "data-testid": _ctx.testId 15828 }, [ 15829 createVNode(unref(ZmVisuallyHidden), { id: unref(contextMenuAriaDescribedbyId) }, { 15830 default: withCtx(() => [ 15831 createTextVNode(toDisplayString(unref(t)("dropdown.contextMenuTip")), 1) 15832 ]), 15833 _: 1 15834 }, 8, ["id"]), 15835 createVNode(unref(ZmFloating), null, { 15836 default: withCtx(() => [ 15837 _ctx.splitButton ? (openBlock(), createElementBlock("div", { 15838 key: 0, 15839 class: normalizeClass([unref(ns).e("buttons-group"), unref(ns).is("loading", _ctx.splitButtonLoading)]) 15840 }, [ 15841 createVNode(unref(ZmButton), mergeProps({ 15842 ref_key: "mainButtonRef", 15843 ref: mainButtonRef, 15844 disabled: _ctx.disabled, 15845 type: _ctx.type, 15846 size: _ctx.size, 15847 loading: _ctx.splitButtonLoading, 15848 class: [unref(ns).is("main"), unref(ns).is("keyboard-focus", isMainKeyboardFocus.value)] 15849 }, _ctx.splitMainButtonProps, { 15850 "test-id": unref(buildTestId)(_ctx.testId, "-main"), 15851 onFocus: handleMainFocus, 15852 onBlur: handleMainBlur, 15853 onClick: handleMainClick 15854 }), { 15855 default: withCtx(() => [ 15856 renderSlot(_ctx.$slots, "default") 15857 ]), 15858 _: 3 15859 }, 16, ["disabled", "type", "size", "loading", "class", "test-id"]), 15860 withDirectives((openBlock(), createBlock(unref(ZmFloatingTrigger), { 15861 ref_key: "floatingTriggerRef", 15862 ref: floatingTriggerRef 15863 }, { 15864 default: withCtx(() => [ 15865 createVNode(unref(ZmButton), { 15866 disabled: _ctx.disabled, 15867 "aria-haspopup": "true", 15868 "aria-expanded": shouldShow.value, 15869 type: _ctx.type, 15870 size: _ctx.size, 15871 icon: unref(ChevronDownV2), 15872 "test-id": unref(buildTestId)(_ctx.testId, "-secondary"), 15873 "aria-label": splitButtonAriaLabelResult.value, 15874 class: normalizeClass([ 15875 unref(ns).e("trigger"), 15876 unref(ns).is("triggered"), 15877 unref(ns).is("main-loading", _ctx.splitButtonLoading), 15878 unref(ns).is("expanded", shouldShow.value) 15879 ]), 15880 onClick: unref(handleClick) 15881 }, null, 8, ["disabled", "aria-expanded", "type", "size", "icon", "test-id", "aria-label", "class", "onClick"]) 15882 ]), 15883 _: 1 15884 })), [ 15885 [unref(ClickOutside), handleClickOutside] 15886 ]) 15887 ], 2)) : withDirectives((openBlock(), createBlock(unref(ZmFloatingTrigger), { 15888 key: 1, 15889 ref_key: "floatingTriggerRef", 15890 ref: floatingTriggerRef, 15891 class: normalizeClass(unref(ns).e("trigger")), 15892 "aria-expanded": shouldShow.value, 15893 "aria-haspopup": "true", 15894 disabled: _ctx.disabled, 15895 "aria-describedby": ariaDescribedbyResult.value, 15896 "aria-controls": unref(menuId), 15897 onClick: unref(handleClick), 15898 onMouseenter: unref(onMouseEnter), 15899 onMouseleave: unref(onMouseLeave), 15900 onKeydown: onTriggerKeydown, 15901 onContextmenu: handleContextMenu 15902 }, { 15903 default: withCtx(() => [ 15904 renderSlot(_ctx.$slots, "default") 15905 ]), 15906 _: 3 15907 }, 8, ["class", "aria-expanded", "disabled", "aria-describedby", "aria-controls", "onClick", "onMouseenter", "onMouseleave"])), [ 15908 [unref(ClickOutside), handleClickOutside] 15909 ]), 15910 (openBlock(), createBlock(Teleport, { 15911 to: "body", 15912 disabled: !_ctx.teleported 15913 }, [ 15914 createVNode(Transition, { 15915 name: _ctx.transitionName, 15916 onBeforeEnter: onMenuBeforeOpen, 15917 onAfterEnter: onMenuOpened, 15918 onBeforeLeave: onMenuBeforeClose, 15919 onAfterLeave: onMenuClosed 15920 }, { 15921 default: withCtx(() => [ 15922 shouldShow.value ? (openBlock(), createBlock(unref(ZmFloatingContent), mergeProps({ 15923 key: 0, 15924 ref_key: "floatingContentRef", 15925 ref: floatingContentRef, 15926 tag: "ul", 15927 role: "menu", 15928 class: [unref(ns).is("dropdown"), unref(teleportedContextClass), _ctx.floatingContentClass], 15929 visible: shouldShow.value 15930 }, floatingOptionsResult.value, { 15931 "z-index": _ctx.zIndex, 15932 onMouseenter: unref(onMouseEnter), 15933 onMouseleave: unref(onMouseLeave) 15934 }), { 15935 default: withCtx(() => [ 15936 _ctx.maxMenuHeight ? (openBlock(), createBlock(unref(ZmScrollbar), { 15937 key: 0, 15938 ref_key: "scrollbarRef", 15939 ref: scrollbarRef, 15940 "wrap-style": { maxHeight: _ctx.maxMenuHeight } 15941 }, { 15942 default: withCtx(() => [ 15943 createBaseVNode("div", { 15944 class: normalizeClass([unref(ns).b("menu"), unref(ns).is("horizontal", _ctx.horizontalLayout)]) 15945 }, [ 15946 renderSlot(_ctx.$slots, "dropdown") 15947 ], 2) 15948 ]), 15949 _: 3 15950 }, 8, ["wrap-style"])) : (openBlock(), createElementBlock("div", { 15951 key: 1, 15952 class: normalizeClass([unref(ns).b("menu"), unref(ns).is("horizontal", _ctx.horizontalLayout)]) 15953 }, [ 15954 renderSlot(_ctx.$slots, "dropdown") 15955 ], 2)) 15956 ]), 15957 _: 3 15958 }, 16, ["class", "visible", "z-index", "onMouseenter", "onMouseleave"])) : createCommentVNode("", true) 15959 ]), 15960 _: 3 15961 }, 8, ["name"]) 15962 ], 8, ["disabled"])) 15963 ]), 15964 _: 3 15965 }) 15966 ], 10, _hoisted_1$h); 15967 }; 15968 } 15969})); 15970var __defProp$H = Object.defineProperty; 15971var __defProps$x = Object.defineProperties; 15972var __getOwnPropDescs$x = Object.getOwnPropertyDescriptors; 15973var __getOwnPropSymbols$H = Object.getOwnPropertySymbols; 15974var __hasOwnProp$H = Object.prototype.hasOwnProperty; 15975var __propIsEnum$H = Object.prototype.propertyIsEnumerable; 15976var __defNormalProp$H = (obj, key, value) => key in obj ? __defProp$H(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 15977var __spreadValues$H = (a, b) => { 15978 for (var prop in b || (b = {})) 15979 if (__hasOwnProp$H.call(b, prop)) 15980 __defNormalProp$H(a, prop, b[prop]); 15981 if (__getOwnPropSymbols$H) 15982 for (var prop of __getOwnPropSymbols$H(b)) { 15983 if (__propIsEnum$H.call(b, prop)) 15984 __defNormalProp$H(a, prop, b[prop]); 15985 } 15986 return a; 15987}; 15988var __spreadProps$x = (a, b) => __defProps$x(a, __getOwnPropDescs$x(b)); 15989const dropdownMenuItemProps = { 15990 command: { 15991 type: [String, Object, Number, Function], 15992 required: true 15993 }, 15994 disabled: Boolean, 15995 isGroup: Boolean,
15996 // for internal component 15997 isEmptyGroup: Boolean, 15998 // for internal component 15999 icon: { 16000 type: Object 16001 }, 16002 testId: String, 16003 danger: Boolean, 16004 preventDefault: { 16005 type: Boolean, 16006 default: true 16007 }, 16008 beforeCommand: { 16009 type: Function 16010 } 16011}; 16012const dropdownMenuItemEmits = []; 16013const _hoisted_1$g = ["data-testid", "aria-disabled", "aria-hidden"]; 16014const _sfc_main$t = /* @__PURE__ */ defineComponent(__spreadProps$x(__spreadValues$H({}, { 16015 name: "ZmDropdownItem" 16016}), { 16017 __name: "dropdown-item", 16018 props: dropdownMenuItemProps, 16019 emits: dropdownMenuItemEmits, 16020 setup(__props, { expose: __expose }) { 16021 const props = __props; 16022 const ns = useNamespace("dropdown-item"); 16023 const instance = getCurrentInstance(); 16024 const vm = instance.proxy; 16025 const { 16026 commandHandler, 16027 onItemCreate, 16028 onItemFocusing, 16029 onItemRemove, 16030 disableClickOutside, 16031 enableClickOutside 16032 } = inject(DROPDOWN_INJECTION_KEY); 16033 const containerClass = computed(() => { 16034 const { isGroup, disabled, danger } = props; 16035 if (isGroup) { 16036 return []; 16037 } 16038 return [ns.b(), ns.is("disabled", disabled), ns.is("danger", danger)]; 16039 }); 16040 const handleItemClick = (event) => { 16041 const { disabled, isGroup, command, beforeCommand } = props; 16042 if (disabled || isGroup) { 16043 return; 16044 } 16045 if (props.preventDefault) { 16046 event.preventDefault(); 16047 } 16048 const onClose = (close) => { 16049 if (close) { 16050 commandHandler(command, vm, event); 16051 } 16052 enableClickOutside(); 16053 }; 16054 if (beforeCommand) { 16055 beforeCommand(onClose, command, disableClickOutside); 16056 } else { 16057 commandHandler(command, vm, event); 16058 } 16059 }; 16060 const handleItemFocus = () => { 16061 onItemFocusing(vm); 16062 }; 16063 onMounted(() => { 16064 if (!props.isEmptyGroup) { 16065 vm.uid = instance.uid; 16066 onItemCreate(vm); 16067 } 16068 }); 16069 onBeforeUnmount(() => { 16070 onItemRemove(vm.uid); 16071 }); 16072 __expose({ 16073 handleItemClick 16074 }); 16075 return (_ctx, _cache) => { 16076 return openBlock(), createElementBlock("li", { 16077 class: normalizeClass(containerClass.value), 16078 role: "menuitem", 16079 tabindex: "-1", 16080 "data-testid": _ctx.testId, 16081 "aria-disabled": _ctx.disabled, 16082 "aria-hidden": _ctx.isEmptyGroup ? true : void 0, 16083 onClick: withModifiers(handleItemClick, ["stop"]), 16084 onFocus: handleItemFocus 16085 }, [ 16086 _ctx.icon ? (openBlock(), createBlock(unref(ZmIcon), { 16087 key: 0, 16088 class: normalizeClass(unref(ns).e("icon")) 16089 }, { 16090 default: withCtx(() => [ 16091 (openBlock(), createBlock(resolveDynamicComponent(_ctx.icon))) 16092 ]), 16093 _: 1 16094 }, 8, ["class"])) : createCommentVNode("", true), 16095 renderSlot(_ctx.$slots, "default") 16096 ], 42, _hoisted_1$g); 16097 }; 16098 } 16099})); 16100var __defProp$G = Object.defineProperty; 16101var __defProps$w = Object.defineProperties; 16102var __getOwnPropDescs$w = Object.getOwnPropertyDescriptors; 16103var __getOwnPropSymbols$G = Object.getOwnPropertySymbols; 16104var __hasOwnProp$G = Object.prototype.hasOwnProperty; 16105var __propIsEnum$G = Object.prototype.propertyIsEnumerable; 16106var __defNormalProp$G = (obj, key, value) => key in obj ? __defProp$G(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 16107var __spreadValues$G = (a, b) => { 16108 for (var prop in b || (b = {})) 16109 if (__hasOwnProp$G.call(b, prop)) 16110 __defNormalProp$G(a, prop, b[prop]); 16111 if (__getOwnPropSymbols$G) 16112 for (var prop of __getOwnPropSymbols$G(b)) { 16113 if (__propIsEnum$G.call(b, prop)) 16114 __defNormalProp$G(a, prop, b[prop]); 16115 } 16116 return a; 16117}; 16118var __spreadProps$w = (a, b) => __defProps$w(a, __getOwnPropDescs$w(b)); 16119const dropdownItemGroupProps = { 16120 label: String 16121}; 16122const _sfc_main$s = /* @__PURE__ */ defineComponent(__spreadProps$w(__spreadValues$G({}, { 16123 name: "ZmDropdownItemGroup" 16124}), { 16125 __name: "dropdown-item-group", 16126 props: dropdownItemGroupProps, 16127 setup(__props) { 16128 const props = __props; 16129 const ns = useNamespace("dropdown-item-group"); 16130 const containerClass = computed(() => { 16131 const { label } = props; 16132 return [ns.b(), ns.is("empty", !label)]; 16133 }); 16134 return (_ctx, _cache) => { 16135 return openBlock(), createElementBlock(Fragment, null, [ 16136 createVNode(_sfc_main$t, { 16137 class: normalizeClass(containerClass.value), 16138 "is-empty-group": Boolean(!_ctx.label), 16139 "is-group": "", 16140 command: "", 16141 disabled: "" 16142 }, { 16143 default: withCtx(() => [ 16144 createTextVNode(toDisplayString(_ctx.label), 1) 16145 ]), 16146 _: 1 16147 }, 8, ["class", "is-empty-group"]), 16148 renderSlot(_ctx.$slots, "default") 16149 ], 64); 16150 }; 16151 } 16152})); 16153const ZmDropdown = withInstall(_sfc_main$u, { 16154 DropdownItem: _sfc_main$t, 16155 DropdownItemGroup: _sfc_main$s 16156}); 16157const ZmDropdownItem = _sfc_main$t; 16158var __defProp$F = Object.defineProperty; 16159var __getOwnPropSymbols$F = Object.getOwnPropertySymbols; 16160var __hasOwnProp$F = Object.prototype.hasOwnProperty; 16161var __propIsEnum$F = Object.prototype.propertyIsEnumerable; 16162var __defNormalProp$F = (obj, key, value) => key in obj ? __defProp$F(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 16163var __spreadValues$F = (a, b) => { 16164 for (var prop in b || (b = {})) 16165 if (__hasOwnProp$F.call(b, prop)) 16166 __defNormalProp$F(a, prop, b[prop]); 16167 if (__getOwnPropSymbols$F) 16168 for (var prop of __getOwnPropSymbols$F(b)) { 16169 if (__propIsEnum$F.call(b, prop)) 16170 __defNormalProp$F(a, prop, b[prop]); 16171 } 16172 return a; 16173}; 16174const overlayProps = { 16175 overlayClass: [String, Array, Object], 16176 zIndex: Number, 16177 transparent: Boolean 16178}; 16179const Overlay = defineComponent({ 16180 name: "ZmOverlay", 16181 props: overlayProps, 16182 setup(props, { slots }) { 16183 const ns = useNamespace("overlay"); 16184 const style = ref({}); 16185 provide(OVERLAY_INJECTION_KEY, { 16186 zIndex: computed(() => props.zIndex) 16187 }); 16188 return () => { 16189 const { overlayClass, zIndex: zIndex2, transparent } = props; 16190 return createVNode( 16191 "div", 16192 { 16193 class: [ns.b(), overlayClass, ns.is("transparent", transparent)], 16194 style: __spreadValues$F({ 16195 zIndex: zIndex2 16196 }, style.value) 16197 }, 16198 [renderSlot(slots, "default")] 16199 ); 16200 }; 16201 } 16202}); 16203const ZmOverlay = withInstall(Overlay); 16204var __defProp$E = Object.defineProperty; 16205var __defProps$v = Object.defineProperties; 16206var __getOwnPropDescs$v = Object.getOwnPropertyDescriptors; 16207var __getOwnPropSymbols$E = Object.getOwnPropertySymbols; 16208var __hasOwnProp$E = Object.prototype.hasOwnProperty; 16209var __propIsEnum$E = Object.prototype.propertyIsEnumerable; 16210var __defNormalProp$E = (obj, key, value) => key in obj ? __defProp$E(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 16211var __spreadValues$E = (a, b) => { 16212 for (var prop in b || (b = {})) 16213 if (__hasOwnProp$E.call(b, prop)) 16214 __defNormalProp$E(a, prop, b[prop]); 16215 if (__getOwnPropSymbols$E) 16216 for (var prop of __getOwnPropSymbols$E(b)) { 16217 if (__propIsEnum$E.call(b, prop)) 16218 __defNormalProp$E(a, prop, b[prop]); 16219 } 16220 return a; 16221}; 16222var __spreadProps$v = (a, b) => __defProps$v(a, __getOwnPropDescs$v(b)); 16223const ICON_COMPONENT_MAP = { 16224 success: CheckmarkCircle, 16225 warning: AlertTriangle, 16226 info: Information, 16227 danger: AlertCircle 16228}; 16229const statusIconProps = { 16230 type: { 16231 type: String, 16232 default: "info" 16233 }, 16234 icon: { 16235 type: Object 16236 } 16237}; 16238const _sfc_main$r = /* @__PURE__ */ defineComponent(__spreadProps$v(__spreadValues$E({}, { 16239 name: "ZmStatusIcon" 16240}), { 16241 __name: "status-icon", 16242 props: statusIconProps, 16243 setup(__props) { 16244 const props = __props; 16245 const iconComponent = computed(() => { 16246 return props.icon || ICON_COMPONENT_MAP[props.type]; 16247 }); 16248 const ns = useNamespace("status-icon"); 16249 return (_ctx, _cache) => { 16250 return openBlock(), createBlock(unref(ZmIcon), { 16251 class: normalizeClass([unref(ns).b(), !props.icon && unref(ns).m(_ctx.type)]) 16252 }, { 16253 default: withCtx(() => [ 16254 (openBlock(), createBlock(resolveDynamicComponent(iconComponent.value))) 16255 ]), 16256 _: 1 16257 }, 8, ["class"]); 16258 }; 16259 } 16260})); 16261const ZmStatusIcon = withInstall(_sfc_main$r); 16262let hiddenTextarea; 16263const HIDDEN_STYLE = ` 16264 height:0 !important; 16265 visibility:hidden !important; 16266 overflow:hidden !important; 16267 position:absolute !important; 16268 z-index:-1000 !important; 16269 top:0 !important; 16270 right:0 !important; 16271`; 16272const CONTEXT_STYLE = [ 16273 "letter-spacing", 16274 "line-height", 16275 "padding-top", 16276 "padding-bottom", 16277 "font-family", 16278 "font-weight", 16279 "font-size", 16280 "text-rendering", 16281 "text-transform", 16282 "width", 16283 "text-indent", 16284 "padding-left", 16285 "padding-right", 16286 "border-width", 16287 "box-sizing" 16288]; 16289function calculateNodeStyling(targetElement) { 16290 const style = window.getComputedStyle(targetElement); 16291 const boxSizing = style.getPropertyValue("box-sizing"); 16292 const paddingSize = Number.parseFloat(style.getPropertyValue("padding-bottom")) + Number.parseFloat(style.getPropertyValue("padding-top")); 16293 const borderSize = Number.parseFloat(style.getPropertyValue("border-bottom-width")) + Number.parseFloat(style.getPropertyValue("border-top-width")); 16294 const contextStyle = CONTEXT_STYLE.map((name) => `${name}:${style.getPropertyValue(name)}`).join( 16295 ";" 16296 ); 16297 return { contextStyle, paddingSize, borderSize, boxSizing }; 16298} 16299function calcTextareaHeight(targetElement, minRows = 1, maxRows, getHiddenTextareaContainer) { 16300 var _a; 16301 if (!hiddenTextarea) { 16302 hiddenTextarea = document.createElement("textarea"); 16303 const container = (getHiddenTextareaContainer == null ? void 0 : getHiddenTextareaContainer()) || document.body; 16304 container.appendChild(hiddenTextarea); 16305 } 16306 const { paddingSize, borderSize, boxSizing, contextStyle } = calculateNodeStyling(targetElement); 16307 hiddenTextarea.setAttribute("style", `${contextStyle};${HIDDEN_STYLE}`); 16308 hiddenTextarea.value = targetElement.value || targetElement.placeholder || ""; 16309 let height = hiddenTextarea.scrollHeight; 16310 const result = { 16311 height: "" 16312 }; 16313 if (boxSizing === "border-box") { 16314 height = height + borderSize; 16315 } 16316 hiddenTextarea.value = "";
16317 const singleRowHeight = hiddenTextarea.scrollHeight - paddingSize; 16318 if (isNumber(minRows)) { 16319 let minHeight = singleRowHeight * minRows; 16320 if (boxSizing === "border-box") { 16321 minHeight = minHeight + paddingSize + borderSize; 16322 } 16323 height = Math.max(minHeight, height); 16324 result.minHeight = `${minHeight}px`; 16325 } 16326 if (isNumber(maxRows)) { 16327 let maxHeight = singleRowHeight * maxRows; 16328 if (boxSizing === "border-box") { 16329 maxHeight = maxHeight + paddingSize + borderSize; 16330 } 16331 height = Math.min(maxHeight, height); 16332 } 16333 result.height = `${height}px`; 16334 (_a = hiddenTextarea.parentNode) == null ? void 0 : _a.removeChild(hiddenTextarea); 16335 hiddenTextarea = void 0; 16336 return result; 16337} 16338var __defProp$D = Object.defineProperty; 16339var __defProps$u = Object.defineProperties; 16340var __getOwnPropDescs$u = Object.getOwnPropertyDescriptors; 16341var __getOwnPropSymbols$D = Object.getOwnPropertySymbols; 16342var __hasOwnProp$D = Object.prototype.hasOwnProperty; 16343var __propIsEnum$D = Object.prototype.propertyIsEnumerable; 16344var __defNormalProp$D = (obj, key, value) => key in obj ? __defProp$D(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 16345var __spreadValues$D = (a, b) => { 16346 for (var prop in b || (b = {})) 16347 if (__hasOwnProp$D.call(b, prop)) 16348 __defNormalProp$D(a, prop, b[prop]); 16349 if (__getOwnPropSymbols$D) 16350 for (var prop of __getOwnPropSymbols$D(b)) { 16351 if (__propIsEnum$D.call(b, prop)) 16352 __defNormalProp$D(a, prop, b[prop]); 16353 } 16354 return a; 16355}; 16356var __spreadProps$u = (a, b) => __defProps$u(a, __getOwnPropDescs$u(b)); 16357const textareaProps = { 16358 id: String, 16359 name: String, 16360 disabled: Boolean, 16361 readonly: Boolean, 16362 modelValue: { 16363 type: [String, Number], 16364 default: "" 16365 }, 16366 autocomplete: { 16367 type: String, 16368 default: "off" 16369 }, 16370 placeholder: String, 16371 showWordLimit: Boolean, 16372 rows: { 16373 type: Number, 16374 default: 1 16375 }, 16376 ariaLabel: String, 16377 ariaLabelledby: String, 16378 ariaDescribedby: String, 16379 ariaRequired: Boolean, 16380 ariaActivedescendant: String, 16381 validateEvent: { 16382 type: Boolean, 16383 default: true 16384 }, 16385 autosize: { 16386 type: [Boolean, Object], 16387 default: false 16388 }, 16389 maxlength: { 16390 type: Number, 16391 default: Infinity 16392 }, 16393 minlength: { 16394 type: Number, 16395 default: -Infinity 16396 }, 16397 resize: { 16398 type: String 16399 }, 16400 tabindex: { 16401 type: [String, Number], 16402 default: 0 16403 // in Table, should set it -1 16404 }, 16405 isolateFromForm: Boolean, 16406 forceKeepWordLimit: { 16407 type: Boolean, 16408 default: false 16409 }, 16410 validateOnBlur: Boolean, 16411 size: { 16412 type: String, 16413 default: "md" 16414 }, 16415 passByMaxLength: Boolean, 16416 // not suggest to use 16417 getHiddenTextareaContainer: Function, 16418 enterToSubmit: Boolean, 16419 bare: Boolean, 16420 textareaStyle: [String, Object, Array], 16421 testId: String 16422}; 16423const textareaEmits = { 16424 [VUE_EVENT_NAMES.UPDATE_MODEL]: (value) => isString(value), 16425 [VUE_EVENT_NAMES.CHANGE]: (value) => isString(value), 16426 [VUE_EVENT_NAMES.FOCUS]: (evt) => evt instanceof FocusEvent, 16427 [VUE_EVENT_NAMES.BLUR]: (evt) => evt instanceof FocusEvent, 16428 [VUE_EVENT_NAMES.ENTER]: (evt) => evt instanceof Event, 16429 [VUE_EVENT_NAMES.COMPOSITION_START]: (evt) => evt instanceof CompositionEvent, 16430 [VUE_EVENT_NAMES.COMPOSITION_UPDATE]: (evt) => evt instanceof CompositionEvent, 16431 [VUE_EVENT_NAMES.COMPOSITION_END]: (evt) => evt instanceof CompositionEvent, 16432 [VUE_EVENT_NAMES.ESCAPE]: (event) => event instanceof Event, 16433 [VUE_EVENT_NAMES.TAB]: (event) => event instanceof Event 16434}; 16435const _hoisted_1$f = ["id", "tabindex", "data-testid", "disabled", "rows", "name", "autocomplete", "aria-disabled", "readonly", "aria-label", "aria-labelledby", "aria-describedby", "aria-required", "aria-activedescendant", "aria-invalid", "maxlength", "minlength", "placeholder"]; 16436const _sfc_main$q = /* @__PURE__ */ defineComponent(__spreadProps$u(__spreadValues$D({}, { 16437 name: "ZmTextarea" 16438}), { 16439 __name: "textarea", 16440 props: textareaProps, 16441 emits: textareaEmits, 16442 setup(__props, { expose: __expose, emit: __emit }) { 16443 const props = __props; 16444 const emit = __emit; 16445 const ns = useNamespace("textarea"); 16446 const { t } = useLocale(messages$9); 16447 const wordLimitId = useId(); 16448 const { formItem } = useFormItem(); 16449 const isInputting = ref(false); 16450 const isFormItemErrored = useFormItemErrored(); 16451 const formItemAriaDescribedBy = useFormItemAriaDescribedby(); 16452 const textareaClass = computed(() => [ 16453 ns.e("inner"), 16454 ns.is("disabled", isDisabled.value), 16455 ns.is("errored", isFormItemErrored.value || textareaExceed.value), 16456 ns.is("readonly", props.readonly), 16457 ns.is("has-rows", props.rows > 1), 16458 ns.is("bare", props.bare), 16459 ns.is("autoresize", !!props.autosize) 16460 ]); 16461 const containerClass = computed(() => { 16462 return [ns.b(), ns.is("exceed", textareaExceed.value), ns.m(props.size)]; 16463 }); 16464 const isDisabled = useFormDisabled(); 16465 const isRequired = useFormItemRequired(); 16466 const ariaDescribedbyResult = computed(() => { 16467 let ret = []; 16468 if (isInputting.value) { 16469 return; 16470 } 16471 if (isWordLimitVisible.value) {
16472 ret.push(wordLimitId.value); 16473 } 16474 if (formItemAriaDescribedBy.value) { 16475 ret.push(formItemAriaDescribedBy.value); 16476 } 16477 if (ret.length === 0) { 16478 return void 0; 16479 } 16480 return ret.join(" "); 16481 }); 16482 const textareaRef = ref(); 16483 const ariaLabelledbyResult = useFormItemLabelId(); 16484 const isComposing = ref(false); 16485 const textareaCalcStyle = ref({}); 16486 const innerTextareaStyle = computed(() => [ 16487 textareaCalcStyle.value, 16488 { resize: props.resize }, 16489 props.textareaStyle 16490 ]); 16491 const nativeTextareaValue = computed( 16492 () => isNil(props.modelValue) ? "" : String(props.modelValue) 16493 ); 16494 const isWordLimitVisible = computed( 16495 () => props.showWordLimit && !!props.maxlength && (!isDisabled.value || props.forceKeepWordLimit) 16496 ); 16497 const textLength = computed(() => nativeTextareaValue.value.length); 16498 const textareaExceed = computed( 16499 () => isWordLimitVisible.value && textLength.value > props.maxlength 16500 ); 16501 const setNativeTextareaValue = () => { 16502 if (textareaRef.value) { 16503 if (textareaRef.value.value === nativeTextareaValue.value) 16504 return; 16505 textareaRef.value.value = nativeTextareaValue.value; 16506 } 16507 }; 16508 let isUserInput = false; 16509 const handleInput = (event) => { 16510 let { value } = event.target; 16511 isInputting.value = true; 16512 if (isComposing.value) 16513 return; 16514 isUserInput = true; 16515 emit(VUE_EVENT_NAMES.UPDATE_MODEL, value); 16516 nextTick(() => { 16517 setNativeTextareaValue(); 16518 }); 16519 }; 16520 const handleFormValidate = () => { 16521 if (props.validateEvent) { 16522 /* istanbul ignore next @preserve */ 16523 formItem == null ? void 0 : formItem.validate().catch((err) => debugWarn(err)); 16524 } 16525 }; 16526 const handleChange = (event) => { 16527 emit(VUE_EVENT_NAMES.CHANGE, event.target.value); 16528 handleFormValidate(); 16529 }; 16530 const handleCompositionStart = (event) => { 16531 emit(VUE_EVENT_NAMES.COMPOSITION_START, event); 16532 isComposing.value = true; 16533 }; 16534 const handleCompositionUpdate = (event) => { 16535 emit(VUE_EVENT_NAMES.COMPOSITION_UPDATE, event); 16536 }; 16537 const handleCompositionEnd = (event) => { 16538 emit(VUE_EVENT_NAMES.COMPOSITION_END, event); 16539 if (isComposing.value) { 16540 isComposing.value = false; 16541 handleInput(event); 16542 } 16543 }; 16544 const focus = () => { 16545 var _a; 16546 return (_a = textareaRef.value) == null ? void 0 : _a.focus(); 16547 }; 16548 const select = () => { 16549 var _a; 16550 return (_a = textareaRef.value) == null ? void 0 : _a.select(); 16551 }; 16552 const handleFocus = (event) => { 16553 const textarea = textareaRef.value; 16554 if (isSafari) { 16555 setTimeout(() => { 16556 if (textarea) { 16557 textarea.setSelectionRange(textarea.value.length, textarea.value.length); 16558 } 16559 }); 16560 } 16561 emit(VUE_EVENT_NAMES.FOCUS, event); 16562 }; 16563 const handleBlur = (event) => { 16564 isInputting.value = false; 16565 emit(VUE_EVENT_NAMES.BLUR, event); 16566 if (props.validateOnBlur) { 16567 handleFormValidate(); 16568 } 16569 }; 16570 const handleKeydown = (event) => { 16571 const code = event.code; 16572 switch (code) { 16573 case EVENT_CODE.left: 16574 case EVENT_CODE.right: 16575 if (!isDisabled.value) { 16576 event.stopPropagation(); 16577 } 16578 break; 16579 case EVENT_CODE.enter: 16580 case EVENT_CODE.numpadEnter: 16581 let inComposition = isComposing.value; 16582 if (isSafari) { 16583 inComposition = isIMEComposing(event); 16584 } 16585 if (!isDisabled.value && !inComposition) { 16586 if (props.enterToSubmit && event.shiftKey) { 16587 return; 16588 } else if (props.enterToSubmit && !event.shiftKey) { 16589 emit(VUE_EVENT_NAMES.ENTER, event); 16590 event.preventDefault(); 16591 return; 16592 } 16593 emit(VUE_EVENT_NAMES.ENTER, event); 16594 } 16595 break; 16596 case EVENT_CODE.esc: { 16597 emit(VUE_EVENT_NAMES.ESCAPE, event); 16598 break; 16599 } 16600 case EVENT_CODE.tab: { 16601 emit(VUE_EVENT_NAMES.TAB, event); 16602 break; 16603 } 16604 } 16605 }; 16606 const resizeTextarea = () => { 16607 /* istanbul ignore next @preserve */ 16608 if (!textareaRef.value) 16609 return; 16610 const { autosize, getHiddenTextareaContainer } = props; 16611 if (autosize) { 16612 const minRows = isObject(autosize) ? autosize.minRows : void 0; 16613 const maxRows = isObject(autosize) ? autosize.maxRows : void 0; 16614 const textareaStyle = calcTextareaHeight( 16615 textareaRef.value, 16616 minRows, 16617 maxRows, 16618 getHiddenTextareaContainer 16619 ); 16620 textareaCalcStyle.value = __spreadValues$D({ 16621 overflowY: "hidden" 16622 }, textareaStyle); 16623 nextTick(() => { 16624 textareaRef.value.offsetHeight; 16625 textareaCalcStyle.value = textareaStyle; 16626 }); 16627 } else { 16628 textareaCalcStyle.value = { 16629 minHeight: calcTextareaHeight(textareaRef.value).minHeight 16630 }; 16631 } 16632 }; 16633 watch( 16634 () => props.modelValue, 16635 () => { 16636 if (!isUserInput) {
16637 handleFormValidate(); 16638 } else { 16639 isUserInput = false; 16640 } 16641 nextTick(() => { 16642 resizeTextarea(); 16643 }); 16644 } 16645 ); 16646 watch(nativeTextareaValue, () => setNativeTextareaValue()); 16647 watch(textLength, (newVal) => { 16648 const { maxlength } = props; 16649 if (isWordLimitVisible.value && Number.isFinite(maxlength)) { 16650 newVal >= maxlength ? announce(t("input.maxLengthReached", { maxlength })) : destroyAnnouncer(); 16651 } 16652 }); 16653 onMounted(() => { 16654 setNativeTextareaValue(); 16655 nextTick(resizeTextarea); 16656 }); 16657 __expose({ 16658 focus, 16659 select 16660 }); 16661 return (_ctx, _cache) => { 16662 return openBlock(), createElementBlock("div", { 16663 class: normalizeClass(containerClass.value) 16664 }, [ 16665 createBaseVNode("textarea", { 16666 id: _ctx.id, 16667 ref_key: "textareaRef", 16668 ref: textareaRef, 16669 tabindex: _ctx.tabindex, 16670 "data-testid": _ctx.testId, 16671 class: normalizeClass(textareaClass.value), 16672 style: normalizeStyle(innerTextareaStyle.value), 16673 disabled: _ctx.disabled && _ctx.bare, 16674 rows: _ctx.rows, 16675 name: _ctx.name, 16676 autocomplete: _ctx.autocomplete, 16677 "aria-disabled": unref(isDisabled) || _ctx.readonly, 16678 readonly: unref(isDisabled) || _ctx.readonly, 16679 "aria-label": _ctx.ariaLabel, 16680 "aria-labelledby": unref(ariaLabelledbyResult), 16681 "aria-describedby": ariaDescribedbyResult.value, 16682 "aria-required": unref(isRequired), 16683 "aria-activedescendant": _ctx.ariaActivedescendant, 16684 "aria-invalid": unref(isFormItemErrored) ? "true" : void 0, 16685 maxlength: _ctx.passByMaxLength ? _ctx.maxlength : void 0, 16686 minlength: _ctx.minlength, 16687 placeholder: _ctx.placeholder, 16688 onCompositionstart: handleCompositionStart, 16689 onCompositionupdate: handleCompositionUpdate, 16690 onCompositionend: handleCompositionEnd, 16691 onInput: withModifiers(handleInput, ["stop"]), 16692 onFocus: handleFocus, 16693 onChange: handleChange, 16694 onBlur: handleBlur, 16695 onKeydown: handleKeydown 16696 }, null, 46, _hoisted_1$f), 16697 isWordLimitVisible.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [ 16698 createBaseVNode("div", { 16699 class: normalizeClass([unref(ns).e("count"), unref(ns).is("exceed", textareaExceed.value)]) 16700 }, toDisplayString(textLength.value) + " / " + toDisplayString(_ctx.maxlength), 3), 16701 createVNode(unref(ZmVisuallyHidden), { id: unref(wordLimitId) }, { 16702 default: withCtx(() => [ 16703 createTextVNode(toDisplayString(unref(t)("input.limit", { textLength: textLength.value, maxlength: _ctx.maxlength })), 1) 16704 ]), 16705 _: 1 16706 }, 8, ["id"]) 16707 ], 64)) : createCommentVNode("", true) 16708 ], 2); 16709 }; 16710 } 16711})); 16712const ZmTextarea = withInstall(_sfc_main$q); 16713var __defProp$C = Object.defineProperty; 16714var __defProps$t = Object.defineProperties; 16715var __getOwnPropDescs$t = Object.getOwnPropertyDescriptors; 16716var __getOwnPropSymbols$C = Object.getOwnPropertySymbols; 16717var __hasOwnProp$C = Object.prototype.hasOwnProperty; 16718var __propIsEnum$C = Object.prototype.propertyIsEnumerable; 16719var __defNormalProp$C = (obj, key, value) => key in obj ? __defProp$C(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 16720var __spreadValues$C = (a, b) => { 16721 for (var prop in b || (b = {})) 16722 if (__hasOwnProp$C.call(b, prop)) 16723 __defNormalProp$C(a, prop, b[prop]); 16724 if (__getOwnPropSymbols$C) 16725 for (var prop of __getOwnPropSymbols$C(b)) { 16726 if (__propIsEnum$C.call(b, prop)) 16727 __defNormalProp$C(a, prop, b[prop]); 16728 } 16729 return a; 16730}; 16731var __spreadProps$t = (a, b) => __defProps$t(a, __getOwnPropDescs$t(b)); 16732const badgeProps = { 16733 type: { 16734 type: String, 16735 default: "custom" 16736 }, 16737 position: { 16738 type: String, 16739 default: "" 16740 }, 16741 max: { 16742 type: Number, 16743 default: 99 16744 }, 16745 count: { 16746 type: Number, 16747 default: 0 16748 }, 16749 text: String, 16750 color: { 16751 type: String, 16752 default: "blue" 16753 }, 16754 hidden: Boolean, 16755 leadIcon: { 16756 type: Object 16757 }, 16758 inverse: Boolean, 16759 isBlue: Boolean, 16760 size: { 16761 type: String, 16762 // lg and xl are deprecated 16763 default: "md" 16764 }, 16765 cutoutColor: String, 16766 anchorInfo: { 16767 type: Object 16768 }, 16769 isGrey: Boolean 16770}; 16771const isCustomStyle = (type) => { 16772 return type === "custom"; 16773}; 16774const _sfc_main$p = /* @__PURE__ */ defineComponent(__spreadProps$t(__spreadValues$C({}, { 16775 name: "ZmBadge" 16776}), { 16777 __name: "badge", 16778 props: badgeProps, 16779 setup(__props) { 16780 const props = __props; 16781 const isRTL = useRTL(); 16782 const ns = useNamespace("badge"); 16783 const isRounderCounter = computed(() => { 16784 const { type, count, max } = props; 16785 return type === "counter" && count >= 0 && count < 10 && count <= max; 16786 }); 16787 const counterLevel = computed(() => { 16788 const { count, max } = props; 16789 if (count > max) 16790 return "overflow"; 16791 if (count >= 0 && count < 10) 16792 return "singleDigit"; 16793 return "doubleDigit"; 16794 }); 16795 const badgeClass = computed(() => { 16796 const { type, position: position2, color, inverse, isBlue, size: size2, cutoutColor, isGrey } = props; 16797 return [ 16798 ns.b(), 16799 ns.e(type), 16800 isCustomStyle(type) && ns.is(color), 16801 position2 && ns.m(position2), 16802 ns.is("blue", (type === "notifier" || type === "counter") && isBlue), 16803 ns.is("grey", type === "counter" && isGrey), 16804 ns.is("inverse", inverse),
16805 ns.is("round-counter", isRounderCounter.value), 16806 ns.e(size2), 16807 cutoutColor && ns.m(`cutout`) 16808 ]; 16809 }); 16810 const textResult = computed(() => { 16811 const { type, count, max, text = "" } = props; 16812 if (type === "counter") 16813 return count > max ? `${max}+` : count; 16814 return text; 16815 }); 16816 const badgeStyle = computed(() => { 16817 const { cutoutColor, anchorInfo, type } = props; 16818 const isNotifier = type === "notifier"; 16819 const isCounter = type === "counter"; 16820 let ret = {}; 16821 if (cutoutColor) { 16822 ret.borderColor = cutoutColor; 16823 } 16824 let topEdgeOffset = 0; 16825 let rightEdgeOffset = 0; 16826 if (anchorInfo) { 16827 const { buttonType, buttonSize } = anchorInfo; 16828 if (isNotifier) { 16829 if (buttonType === "primary" || buttonType === "secondary" || buttonType === "overlay") { 16830 if (buttonSize === "sm") { 16831 topEdgeOffset = -1; 16832 rightEdgeOffset = 2; 16833 } else if (buttonSize === "md") { 16834 topEdgeOffset = 1; 16835 rightEdgeOffset = -1; 16836 } else { 16837 topEdgeOffset = 0; 16838 rightEdgeOffset = 0; 16839 } 16840 } else if (buttonType === "tertiary") { 16841 if (buttonSize === "sm") { 16842 topEdgeOffset = 0; 16843 rightEdgeOffset = 2; 16844 } else if (buttonSize === "md") { 16845 topEdgeOffset = 3; 16846 rightEdgeOffset = -1; 16847 } else { 16848 topEdgeOffset = 4; 16849 rightEdgeOffset = 0; 16850 } 16851 } 16852 if (cutoutColor) { 16853 topEdgeOffset = topEdgeOffset - 1.5; 16854 rightEdgeOffset = rightEdgeOffset + 1.5; 16855 } 16856 } 16857 if (isCounter) { 16858 if (buttonType === "primary" || buttonType === "secondary" || buttonType === "overlay") { 16859 if (counterLevel.value === "singleDigit") { 16860 if (buttonSize === "sm") { 16861 topEdgeOffset = -5; 16862 rightEdgeOffset = 5; 16863 } else if (buttonSize === "md") { 16864 topEdgeOffset = -2; 16865 rightEdgeOffset = 2; 16866 } else { 16867 topEdgeOffset = 0; 16868 rightEdgeOffset = 0; 16869 } 16870 } else if (counterLevel.value === "doubleDigit") { 16871 if (buttonSize === "sm") { 16872 topEdgeOffset = -5; 16873 rightEdgeOffset = 8; 16874 } else if (buttonSize === "md") { 16875 topEdgeOffset = -2; 16876 rightEdgeOffset = 5; 16877 } else { 16878 topEdgeOffset = 0; 16879 rightEdgeOffset = 3; 16880 } 16881 } else { 16882 if (buttonSize === "sm") { 16883 topEdgeOffset = -5; 16884 rightEdgeOffset = 13; 16885 } else if (buttonSize === "md") { 16886 topEdgeOffset = -2; 16887 rightEdgeOffset = 10; 16888 } else { 16889 topEdgeOffset = 0; 16890 rightEdgeOffset = 8; 16891 } 16892 } 16893 } else if (buttonType === "tertiary") { 16894 if (counterLevel.value === "singleDigit") { 16895 if (buttonSize === "sm") { 16896 topEdgeOffset = -5; 16897 rightEdgeOffset = 5; 16898 } else if (buttonSize === "md") { 16899 topEdgeOffset = -2; 16900 rightEdgeOffset = 2; 16901 } else { 16902 topEdgeOffset = 0; 16903 rightEdgeOffset = 0; 16904 } 16905 } else if (counterLevel.value === "doubleDigit") { 16906 if (buttonSize === "sm") { 16907 topEdgeOffset = -5; 16908 rightEdgeOffset = 10.5; 16909 } else if (buttonSize === "md") { 16910 topEdgeOffset = -2; 16911 rightEdgeOffset = 5; 16912 } else { 16913 topEdgeOffset = 0; 16914 rightEdgeOffset = 3; 16915 } 16916 } else { 16917 if (buttonSize === "sm") { 16918 topEdgeOffset = -5; 16919 rightEdgeOffset = 13; 16920 } else if (buttonSize === "md") { 16921 topEdgeOffset = -2; 16922 rightEdgeOffset = 10; 16923 } else { 16924 topEdgeOffset = 0; 16925 rightEdgeOffset = 8; 16926 } 16927 } 16928 } 16929 if (cutoutColor) { 16930 topEdgeOffset = topEdgeOffset - 1.5; 16931 rightEdgeOffset = rightEdgeOffset + 1.5; 16932 } 16933 } 16934 } 16935 if (isRTL.value) { 16936 rightEdgeOffset = -rightEdgeOffset; 16937 } 16938 if (anchorInfo) { 16939 ret.transform = `translate(${rightEdgeOffset}px, ${topEdgeOffset}px)`; 16940 } 16941 return ret; 16942 }); 16943 const showLeadIcon = computed(() => { 16944 const { type, leadIcon } = props; 16945 return isCustomStyle(type) && leadIcon; 16946 }); 16947 return (_ctx, _cache) => { 16948 return _ctx.$slots.default ? (openBlock(), createElementBlock("span", { 16949 key: 0, 16950 class: normalizeClass(unref(ns).e("wrapper")) 16951 }, [ 16952 renderSlot(_ctx.$slots, "default"), 16953 !_ctx.hidden ? (openBlock(), createElementBlock("span", { 16954 key: 0, 16955 class: normalizeClass(badgeClass.value), 16956 style: normalizeStyle(badgeStyle.value), 16957 "aria-hidden": "true" 16958 }, [ 16959 showLeadIcon.value ? (openBlock(), createBlock(unref(ZmIcon), { 16960 key: 0, 16961 class: normalizeClass(unref(ns).e("lead-icon")) 16962 }, { 16963 default: withCtx(() => [ 16964 (openBlock(), createBlock(resolveDynamicComponent(_ctx.leadIcon))) 16965 ]), 16966 _: 1 16967 }, 8, ["class"])) : createCommentVNode("", true), 16968 createTextVNode(" " + toDisplayString(textResult.value), 1)
16969 ], 6)) : createCommentVNode("", true) 16970 ], 2)) : (openBlock(), createElementBlock("span", { 16971 key: 1, 16972 class: normalizeClass(badgeClass.value), 16973 "aria-hidden": "true" 16974 }, [ 16975 showLeadIcon.value ? (openBlock(), createBlock(unref(ZmIcon), { 16976 key: 0, 16977 class: normalizeClass(unref(ns).e("lead-icon")) 16978 }, { 16979 default: withCtx(() => [ 16980 (openBlock(), createBlock(resolveDynamicComponent(_ctx.leadIcon))) 16981 ]), 16982 _: 1 16983 }, 8, ["class"])) : createCommentVNode("", true), 16984 createTextVNode(" " + toDisplayString(textResult.value), 1) 16985 ], 2)); 16986 }; 16987 } 16988})); 16989const ZmBadge = withInstall(_sfc_main$p); 16990const _sfc_main$o = {}; 16991const _hoisted_1$e = { 16992 viewBox: "0 0 1024 1024", 16993 xmlns: "http://www.w3.org/2000/svg" 16994}; 16995function _sfc_render$5(_ctx, _cache) { 16996 return openBlock(), createElementBlock("svg", _hoisted_1$e, _cache[0] || (_cache[0] = [ 16997 createBaseVNode("path", { d: "M64 896V128h896v768H64z m64-128l192-192 116.352 116.352L640 448l256 307.2V192H128v576z m224-480a96 96 0 1 1-0.064 192.064A96 96 0 0 1 352 288z" }, null, -1) 16998 ])); 16999} 17000const ImgPlaceholder = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$5]]); 17001var __defProp$B = Object.defineProperty; 17002var __defProps$s = Object.defineProperties; 17003var __getOwnPropDescs$s = Object.getOwnPropertyDescriptors; 17004var __getOwnPropSymbols$B = Object.getOwnPropertySymbols; 17005var __hasOwnProp$B = Object.prototype.hasOwnProperty; 17006var __propIsEnum$B = Object.prototype.propertyIsEnumerable; 17007var __defNormalProp$B = (obj, key, value) => key in obj ? __defProp$B(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 17008var __spreadValues$B = (a, b) => { 17009 for (var prop in b || (b = {})) 17010 if (__hasOwnProp$B.call(b, prop)) 17011 __defNormalProp$B(a, prop, b[prop]); 17012 if (__getOwnPropSymbols$B) 17013 for (var prop of __getOwnPropSymbols$B(b)) { 17014 if (__propIsEnum$B.call(b, prop)) 17015 __defNormalProp$B(a, prop, b[prop]); 17016 } 17017 return a; 17018}; 17019var __spreadProps$s = (a, b) => __defProps$s(a, __getOwnPropDescs$s(b)); 17020const skeletonItemProps = { 17021 variant: { 17022 type: String, 17023 default: "text" 17024 }, 17025 percent: Number 17026}; 17027const _sfc_main$n = /* @__PURE__ */ defineComponent(__spreadProps$s(__spreadValues$B({}, { 17028 name: "ZmSkeletonItem" 17029}), { 17030 __name: "skeleton-item", 17031 props: skeletonItemProps, 17032 setup(__props) { 17033 const props = __props; 17034 const ns = useNamespace("skeleton"); 17035 const containerStyle = computed(() => { 17036 const { percent } = props; 17037 return { 17038 width: isNil(percent) ? void 0 : `${percent}%` 17039 }; 17040 }); 17041 return (_ctx, _cache) => { 17042 return openBlock(), createElementBlock("div", { 17043 class: normalizeClass([unref(ns).e("item"), unref(ns).e(_ctx.variant)]), 17044 style: normalizeStyle(containerStyle.value) 17045 }, [ 17046 _ctx.variant === "image" ? (openBlock(), createBlock(ImgPlaceholder, { key: 0 })) : createCommentVNode("", true) 17047 ], 6); 17048 }; 17049 } 17050})); 17051var __defProp$A = Object.defineProperty; 17052var __defProps$r = Object.defineProperties; 17053var __getOwnPropDescs$r = Object.getOwnPropertyDescriptors; 17054var __getOwnPropSymbols$A = Object.getOwnPropertySymbols; 17055var __hasOwnProp$A = Object.prototype.hasOwnProperty; 17056var __propIsEnum$A = Object.prototype.propertyIsEnumerable; 17057var __defNormalProp$A = (obj, key, value) => key in obj ? __defProp$A(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 17058var __spreadValues$A = (a, b) => { 17059 for (var prop in b || (b = {})) 17060 if (__hasOwnProp$A.call(b, prop)) 17061 __defNormalProp$A(a, prop, b[prop]); 17062 if (__getOwnPropSymbols$A) 17063 for (var prop of __getOwnPropSymbols$A(b)) { 17064 if (__propIsEnum$A.call(b, prop)) 17065 __defNormalProp$A(a, prop, b[prop]); 17066 } 17067 return a; 17068}; 17069var __spreadProps$r = (a, b) => __defProps$r(a, __getOwnPropDescs$r(b)); 17070const skeletonProps = { 17071 animated: Boolean, 17072 count: { 17073 type: Number, 17074 default: 1 17075 }, 17076 rows: { 17077 type: Number, 17078 default: 3 17079 }, 17080 loading: { 17081 type: Boolean, 17082 default: true 17083 } 17084}; 17085const _sfc_main$m = /* @__PURE__ */ defineComponent(__spreadProps$r(__spreadValues$A({}, { 17086 name: "ZmSkeleton" 17087}), { 17088 __name: "skeleton", 17089 props: skeletonProps, 17090 setup(__props) { 17091 const ns = useNamespace("skeleton"); 17092 return (_ctx, _cache) => { 17093 return _ctx.loading ? (openBlock(), createElementBlock("div", mergeProps({ 17094 key: 0, 17095 class: [unref(ns).b(), unref(ns).is("animated", _ctx.animated)] 17096 }, _ctx.$attrs), [ 17097 (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.count, (i) => { 17098 return openBlock(), createElementBlock(Fragment, { key: i }, [ 17099 _ctx.loading ? renderSlot(_ctx.$slots, "template", { key: i }, () => [ 17100 (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.rows, (item) => { 17101 return openBlock(), createBlock(_sfc_main$n, { 17102 key: item, 17103 class: normalizeClass([ 17104 unref(ns).is("has-space", item > 1 || item === 1 && i > 1), 17105 unref(ns).is("last", item === _ctx.rows && _ctx.rows > 1) 17106 ]), 17107 variant: "text" 17108 }, null, 8, ["class"]); 17109 }), 128)) 17110 ]) : createCommentVNode("", true) 17111 ], 64); 17112 }), 128)) 17113 ], 16)) : renderSlot(_ctx.$slots, "default", normalizeProps(mergeProps({ key: 1 }, _ctx.$attrs))); 17114 }; 17115 } 17116})); 17117const ZmSkeleton = withInstall(_sfc_main$m, { 17118 SkeletonItem: _sfc_main$n 17119}); 17120const ZmSkeletonItem = _sfc_main$n; 17121const TRANSITION_DELAY$1 = 330; 17122const SKELETON_PERCENT$1 = 66; 17123function getRowIdentity$1(row, rowKey) { 17124 if (typeof rowKey === "string") { 17125 return `${row[rowKey]}`; 17126 } 17127 /* istanbul ignore next @preserve */ 17128 return ""; 17129} 17130function parseWidth$1(width) { 17131 if (width === "") { 17132 return width; 17133 } 17134 width = Number.parseInt(width, 10); 17135 if (Number.isNaN(width)) { 17136 width = ""; 17137 } 17138 return width; 17139} 17140function parseHeight$1(height) { 17141 if (typeof height === "number") { 17142 return height; 17143 } 17144 if (typeof height === "string") { 17145 if (/^\d+(?:px)?$/.test(height)) { 17146 return Number.parseInt(height, 10); 17147 } else { 17148 return height; 17149 } 17150 } 17151} 17152function mergeOptions$1(defaults, config) { 17153 const options = {}; 17154 let key; 17155 for (key in defaults) { 17156 options[key] = defaults[key]; 17157 } 17158 for (key in config) { 17159 if (hasOwn(config, key)) { 17160 const value = config[key]; 17161 if (typeof value !== "undefined") { 17162 options[key] = value; 17163 } 17164 } 17165 } 17166 return options; 17167} 17168function compose$1(...funcs) { 17169 return funcs.reduce((pre, cur) => { 17170 return (...args) => pre(cur(...args)); 17171 }); 17172} 17173function getOffset$1(offset2, column) { 17174 return offset2 + (column.realWidth === null || Number.isNaN(column.realWidth) ? Number(column.width) : column.realWidth); 17175} 17176function getCurrentColumns$1(column) { 17177 if (column.children) {
17178 return flatMap(column.children, getCurrentColumns$1); 17179 } else { 17180 return [column]; 17181 } 17182} 17183function getColSpan$1(colSpan, column) { 17184 return colSpan + column.colSpan; 17185} 17186function isFixedColumn$1(index2, store2, fixed, realColumns) { 17187 let start = 0; 17188 let after = index2; 17189 const columns = store2.states.columns.value.filter((column) => { 17190 return column.type !== "expand" || !store2.states.forceExpand.value; 17191 }); 17192 if (realColumns) { 17193 const curColumns = getCurrentColumns$1(realColumns[index2]); 17194 const preColumns = columns.slice(0, columns.indexOf(curColumns[0])); 17195 start = preColumns.reduce(getColSpan$1, 0); 17196 after = start + curColumns.reduce(getColSpan$1, 0) - 1; 17197 } else { 17198 start = index2; 17199 } 17200 let fixedLayout; 17201 switch (fixed) { 17202 case "left": 17203 if (after < store2.states.fixedLeafColumnsLength.value) { 17204 fixedLayout = "left"; 17205 } 17206 break; 17207 case "right": 17208 if (start >= columns.length - store2.states.rightFixedLeafColumnsLength.value) { 17209 fixedLayout = "right"; 17210 } 17211 break; 17212 default: 17213 if (after < store2.states.fixedLeafColumnsLength.value) { 17214 fixedLayout = "left"; 17215 } 17216 } 17217 return { 17218 direction: fixedLayout, 17219 start, 17220 after 17221 }; 17222} 17223function getFixedColumnOffset$1(index2, store2, fixed, realColumns) { 17224 if (!fixed) { 17225 return; 17226 } 17227 const { direction, start, after } = isFixedColumn$1(index2, store2, fixed, realColumns); 17228 const styles = {}; 17229 const isLeft = direction === "left"; 17230 const columns = store2.states.columns.value.filter((column) => { 17231 return column.type !== "expand" || !store2.states.forceExpand.value; 17232 }); 17233 if (isLeft) { 17234 styles.left = columns.slice(0, start).reduce(getOffset$1, 0); 17235 } else { 17236 styles.right = columns.slice(after + 1).reverse().reduce(getOffset$1, 0); 17237 } 17238 return styles; 17239} 17240function getFixedColumnsClass$1(namespace2, index2, store2, fixed, realColumns) { 17241 const classes = []; 17242 if (!fixed) { 17243 return classes; 17244 } 17245 const columns = store2.states.columns.value.filter((column) => { 17246 return column.type !== "expand" || !store2.states.forceExpand.value; 17247 }); 17248 const { direction, start, after } = isFixedColumn$1(index2, store2, fixed, realColumns); 17249 if (direction) { 17250 const isLeft = direction === "left"; 17251 classes.push(`${namespace2}-fixed-column--${direction}`); 17252 if (isLeft && after === store2.states.fixedLeafColumnsLength.value - 1) { 17253 classes.push("is-last-column"); 17254 } else if (!isLeft && start === columns.length - store2.states.rightFixedLeafColumnsLength.value) { 17255 classes.push("is-first-column"); 17256 } 17257 } 17258 return classes; 17259} 17260function ensurePosition$1(style, key) { 17261 if (!style) { 17262 return; 17263 } 17264 if (!Number.isNaN(style[key])) { 17265 style[key] = `${style[key]}px`; 17266 } 17267} 17268function getKeysMap$1(array, rowKey) { 17269 const arrayMap = {}; 17270 array.forEach((row, index2) => { 17271 arrayMap[getRowIdentity$1(row, rowKey)] = { row, index: index2 }; 17272 }); 17273 return arrayMap; 17274} 17275function toggleRowStatus(statusArr, row, newVal) { 17276 let changed = false; 17277 const index2 = statusArr.indexOf(row); 17278 const included = index2 !== -1; 17279 const toggleStatus = (type) => { 17280 if (type === "add") { 17281 statusArr.push(row); 17282 } else { 17283 statusArr.splice(index2, 1); 17284 } 17285 changed = true; 17286 if (Array.isArray(row.children)) { 17287 row.children.forEach((item) => { 17288 toggleRowStatus(statusArr, item, newVal != null ? newVal : !included); 17289 }); 17290 } 17291 }; 17292 if (isBoolean(newVal)) { 17293 if (newVal && !included) { 17294 toggleStatus("add"); 17295 } else if (!newVal && included) { 17296 toggleStatus("remove"); 17297 } 17298 } else { 17299 included ? toggleStatus("remove") : toggleStatus("add"); 17300 } 17301 return changed; 17302} 17303function orderBy$1(array, sortProp, sortOrder, sortMethod, sortBy) { 17304 const reverse = sortOrder === "descending" ? -1 : 1; 17305 const getKey = sortMethod ? null : function(value, index2) { 17306 if (sortBy) { 17307 if (!Array.isArray(sortBy)) { 17308 sortBy = [sortBy]; 17309 } 17310 return sortBy.map((by) => { 17311 if (typeof by === "string") { 17312 return get(value, by); 17313 } else { 17314 return by(value, index2, array); 17315 } 17316 }); 17317 } 17318 return [isObject(value) ? get(value, sortProp) : value]; 17319 }; 17320 const compare = function(a, b) { 17321 if (sortMethod) { 17322 return sortMethod(a.value, b.value); 17323 } 17324 for (let i = 0, len = a.key.length; i < len; i++) { 17325 if (a.key[i] < b.key[i]) { 17326 return -1; 17327 } 17328 if (a.key[i] > b.key[i]) { 17329 return 1; 17330 } 17331 } 17332 return 0; 17333 }; 17334 return array.map((value, index2) => { 17335 return { 17336 value, 17337 index: index2, 17338 key: getKey ? getKey(value, index2) : null 17339 }; 17340 }).sort((a, b) => { 17341 let order = compare(a, b); 17342 if (!order) { 17343 order = a.index - b.index; 17344 } 17345 return order * +reverse; 17346 }).map((item) => item.value); 17347} 17348function getColumnById$1(table, columnId) { 17349 let column = null; 17350 table.columns.forEach((item) => { 17351 if (item.id === columnId) { 17352 column = item; 17353 } 17354 }); 17355 return column; 17356} 17357function getColumnByKey$1(table, columnKey) { 17358 let column = null; 17359 for (let i = 0; i < table.columns.length; i++) { 17360 const item = table.columns[i]; 17361 if (item.columnKey === columnKey) { 17362 column = item; 17363 break; 17364 } 17365 } 17366 if (!column) { 17367 /* istanbul ignore next @preserve */ 17368 throwError("ZmTable", `No column matching with column-key: ${columnKey}`); 17369 } 17370 return column; 17371} 17372function walkTreeNode$1(root, cb, childrenKey, lazyKey) { 17373 const isNil2 = (array) => !(Array.isArray(array) && array.length); 17374 function _walker(parent, children, level) { 17375 cb(parent, children, level);
17376 children.forEach((item) => { 17377 if (item[lazyKey]) { 17378 cb(item, null, level + 1); 17379 return; 17380 } 17381 const children2 = item[childrenKey]; 17382 if (!isNil2(children2)) { 17383 _walker(item, children2, level + 1); 17384 } 17385 }); 17386 } 17387 root.forEach((item) => { 17388 if (item[lazyKey]) { 17389 cb(item, null, 0); 17390 return; 17391 } 17392 const children = item[childrenKey]; 17393 if (!isNil2(children)) { 17394 _walker(item, children, 0); 17395 } 17396 }); 17397} 17398function notMovableColumn$1(column) { 17399 return column.type === "selection" || column.type === "expand" || column.type === "single" || column.type === "draggable" || column.fixed; 17400} 17401function swap$1(arr, i, j) { 17402 const temp = arr[i]; 17403 arr[i] = arr[j]; 17404 arr[j] = temp; 17405} 17406function getFirstColumnAriaLabel$1(type, row, index2, store2, column, readCount, useTree2) { 17407 var _a; 17408 const t = (_a = store2.table) == null ? void 0 : _a.t; 17409 if (!t) { 17410 return ""; 17411 } 17412 const translateKeys = ["table.selectRowTemp", "table.changeOrderTemp", "table.moreOptionsTemp"]; 17413 const columns = store2.states.columns.value; 17414 const firstColumn = columns[column.selectedColumnIndex ? column.selectedColumnIndex : useTree2 ? 0 : 1]; 17415 const prefix = t(translateKeys[type], { 17416 index: index2, 17417 columnName: firstColumn.label, 17418 content: row[firstColumn.prop] 17419 }); 17420 /* istanbul ignore next @preserve */ 17421 if (readCount) { 17422 const total = store2.states.data.value.length; 17423 const suffix = t("a11y.loopList", { 17424 index: index2 - 1, 17425 total 17426 }); 17427 return prefix + " " + suffix; 17428 } 17429 return prefix; 17430} 17431function isInTable$1(node, table) { 17432 return table.vnode.el.contains(node); 17433} 17434const getCell$1 = function(event) { 17435 var _a; 17436 return (_a = event.target) == null ? void 0 : _a.closest("td"); 17437}; 17438const getColumnByCell$1 = function(table, cell) { 17439 const matches2 = ((cell == null ? void 0 : cell.className) || "").match(new RegExp(`${getNamespace()}-table_[^\\s]+`, "gm")); 17440 if (matches2) { 17441 return getColumnById$1(table, matches2[0]); 17442 } 17443 /* istanbul ignore next @preserve */ 17444 return null; 17445}; 17446const sortData$1 = (data, states) => { 17447 const sortingColumn = states.sortingColumn; 17448 if (!sortingColumn || sortingColumn.sortable === "custom") { 17449 return data; 17450 } 17451 return orderBy$1( 17452 data, 17453 states.sortProp, 17454 states.sortOrder, 17455 sortingColumn.sortMethod, 17456 sortingColumn.sortBy 17457 ); 17458}; 17459function useSort$1(watcherData) { 17460 const instance = getCurrentInstance(); 17461 const data = watcherData.data; 17462 const sortingColumn = ref(null); 17463 const sortProp = ref(""); 17464 const sortOrder = ref(null); 17465 const updateSort = (column, prop, order) => { 17466 if (sortingColumn.value && sortingColumn.value !== column) { 17467 sortingColumn.value.order = null; 17468 } 17469 sortingColumn.value = column; 17470 sortProp.value = prop; 17471 sortOrder.value = order; 17472 }; 17473 const execSort = () => { 17474 const filteredData = instance.store.states.filteredData; 17475 data.value = sortData$1(filteredData.value, { 17476 sortingColumn: sortingColumn.value, 17477 sortProp: sortProp.value, 17478 sortOrder: sortOrder.value 17479 }); 17480 nextTick(() => { 17481 instance.state.buildA11y(); 17482 }); 17483 }; 17484 const execQuery = (ignore = void 0) => { 17485 const execFilter = instance.store.execFilter; 17486 if (!(ignore && ignore.filter)) { 17487 execFilter(); 17488 } 17489 execSort(); 17490 }; 17491 const clearSort = () => { 17492 if (!sortingColumn.value) { 17493 /* istanbul ignore next @preserve */ 17494 return; 17495 } 17496 updateSort(null, "", null); 17497 instance.store.commit("changeSortCondition", { 17498 silent: true 17499 }); 17500 }; 17501 return { 17502 updateSort, 17503 execSort, 17504 execQuery, 17505 clearSort, 17506 states: { 17507 sortingColumn, 17508 sortProp, 17509 sortOrder 17510 } 17511 }; 17512} 17513function useSelection$1(watcherData) { 17514 const instance = getCurrentInstance(); 17515 const data = watcherData.data; 17516 const rowKey = watcherData.rowKey; 17517 const selection = ref([]); 17518 const reserveSelection = ref(false); 17519 const isAllSelected = ref(false); 17520 const selectOnIndeterminate = ref(false); 17521 const selectable = ref(null); 17522 const isSelected = (row) => { 17523 return selection.value.includes(row); 17524 }; 17525 const clearSelection = () => { 17526 isAllSelected.value = false;
17527 const oldSelection = selection.value; 17528 if (oldSelection.length) { 17529 selection.value = []; 17530 instance.emit("selection-change", []); 17531 } 17532 }; 17533 const cleanSelection = () => { 17534 let deleted; 17535 if (rowKey.value) { 17536 deleted = []; 17537 const selectedMap = getKeysMap$1(selection.value, rowKey.value); 17538 const dataMap = getKeysMap$1(data.value, rowKey.value); 17539 for (const key in selectedMap) { 17540 if (hasOwn(selectedMap, key) && !dataMap[key]) { 17541 deleted.push(selectedMap[key].row); 17542 } 17543 } 17544 } else { 17545 deleted = selection.value.filter((item) => !data.value.includes(item)); 17546 } 17547 if (deleted.length) { 17548 const newSelection = selection.value.filter((item) => !deleted.includes(item)); 17549 selection.value = newSelection; 17550 instance.emit("selection-change", newSelection.slice()); 17551 } 17552 }; 17553 const getSelectionRows = () => { 17554 return (selection.value || []).slice(); 17555 }; 17556 const toggleRowSelection = (row, selected, emitChange = true) => { 17557 const changed = toggleRowStatus(selection.value, row, selected); 17558 if (changed) { 17559 const newSelection = (selection.value || []).slice(); 17560 if (emitChange) { 17561 instance.emit("select", newSelection, row); 17562 } 17563 instance.emit("selection-change", newSelection); 17564 } 17565 }; 17566 const toggleAllSelection = () => { 17567 const value = selectOnIndeterminate.value ? !isAllSelected.value : !(isAllSelected.value || selection.value.length); 17568 isAllSelected.value = value; 17569 let selectionChanged = false; 17570 let childrenCount = 0; 17571 data.value.forEach((row, index2) => { 17572 const rowIndex = index2 + childrenCount; 17573 if (selectable.value) { 17574 if (selectable.value.call(null, row, rowIndex) && toggleRowStatus(selection.value, row, value)) { 17575 selectionChanged = true; 17576 } 17577 } else { 17578 if (toggleRowStatus(selection.value, row, value)) { 17579 selectionChanged = true; 17580 } 17581 } 17582 childrenCount += getChildrenCount(getRowIdentity$1(row, rowKey.value)); 17583 }); 17584 if (selectionChanged) { 17585 instance.emit("selection-change", selection.value ? selection.value.slice() : []); 17586 } 17587 instance.emit("select-all", selection.value ? selection.value.slice() : []); 17588 }; 17589 const updateSelectionByRowKey = () => { 17590 const selectedMap = getKeysMap$1(selection.value, rowKey.value); 17591 data.value.forEach((row) => { 17592 const rowId = getRowIdentity$1(row, rowKey.value); 17593 const rowInfo = selectedMap[rowId]; 17594 if (rowInfo) { 17595 selection.value[rowInfo.index] = row; 17596 } 17597 }); 17598 }; 17599 const updateAllSelected = () => { 17600 var _a; 17601 if (data.value.length === 0) { 17602 isAllSelected.value = false; 17603 return; 17604 } 17605 let selectedMap = null; 17606 if (rowKey.value) { 17607 selectedMap = getKeysMap$1(selection.value, rowKey.value); 17608 } 17609 const isSelected2 = function(row) { 17610 if (selectedMap) { 17611 return !!selectedMap[getRowIdentity$1(row, rowKey.value)]; 17612 } else { 17613 return selection.value.includes(row); 17614 } 17615 }; 17616 let isAllSelected_ = true; 17617 let selectedCount = 0; 17618 let childrenCount = 0; 17619 for (let i = 0, j = data.value.length; i < j; i++) { 17620 const rowIndex = i + childrenCount; 17621 const item = data.value[i]; 17622 const isRowSelectable = (_a = selectable.value) == null ? void 0 : _a.call(null, item, rowIndex); 17623 if (!isSelected2(item)) { 17624 if (!selectable.value || isRowSelectable) { 17625 isAllSelected_ = false; 17626 break; 17627 } 17628 } else { 17629 selectedCount++; 17630 } 17631 childrenCount += getChildrenCount(getRowIdentity$1(item, rowKey.value)); 17632 } 17633 if (selectedCount === 0) { 17634 isAllSelected_ = false; 17635 } 17636 isAllSelected.value = isAllSelected_; 17637 }; 17638 const getChildrenCount = (rowKey2) => { 17639 var _a; 17640 const { treeData } = instance.store.states; 17641 let count = 0; 17642 const children = (_a = treeData.value[rowKey2]) == null ? void 0 : _a.children; 17643 if (children) { 17644 count += children.length; 17645 children.forEach((childKey) => { 17646 count += getChildrenCount(childKey); 17647 }); 17648 } 17649 return count; 17650 }; 17651 return { 17652 isSelected, 17653 clearSelection, 17654 cleanSelection, 17655 getSelectionRows, 17656 toggleRowSelection, 17657 toggleAllSelection, 17658 updateSelectionByRowKey, 17659 updateAllSelected, 17660 states: { 17661 selection, 17662 reserveSelection, 17663 isAllSelected, 17664 selectOnIndeterminate, 17665 selectable 17666 } 17667 }; 17668} 17669function useSingle$1(watcherData) { 17670 const instance = getCurrentInstance(); 17671 const data = watcherData.data; 17672 const rowKey = watcherData.rowKey; 17673 const singleSection = ref(null); 17674 const getSingleSelection = () => { 17675 return singleSection.value; 17676 }; 17677 const setSingleSelection = (row) => { 17678 singleSection.value = row; 17679 instance.emit("single-selection-change", row); 17680 }; 17681 const clearSingleSelection = () => { 17682 singleSection.value = null; 17683 instance.emit("single-selection-change", []); 17684 }; 17685 const getSingle = () => { 17686 if (singleSection.value) { 17687 return singleSection.value[rowKey.value]; 17688 } 17689 }; 17690 const setSingle = (value) => { 17691 data.value.forEach((row) => { 17692 if (row[rowKey.value] === value) { 17693 singleSection.value = row; 17694 instance.emit("single-selection-change", row); 17695 return; 17696 } 17697 }); 17698 }; 17699 return { 17700 getSingleSelection, 17701 setSingleSelection, 17702 clearSingleSelection, 17703 getSingle, 17704 setSingle, 17705 states: { 17706 singleSection 17707 } 17708 }; 17709} 17710function useExpand$1(watcherData) { 17711 const instance = getCurrentInstance(); 17712 const data = watcherData.data; 17713 const rowKey = watcherData.rowKey; 17714 const expandRows = ref([]); 17715 const defaultExpandAll = ref(false); 17716 const debounceA11y = debounce(() => { 17717 instance.state.buildA11y(); 17718 }, TRANSITION_DELAY$1); 17719 const forceExpand = computed(() => { 17720 return instance.props.forceExpand; 17721 }); 17722 const updateExpandRows = () => { 17723 if (defaultExpandAll.value || forceExpand.value) { 17724 expandRows.value = data.value.slice(); 17725 } else if (rowKey.value) { 17726 const expandRowsMap = getKeysMap$1(expandRows.value, rowKey.value); 17727 expandRows.value = data.value.reduce((prev, row) => { 17728 const rowId = getRowIdentity$1(row, rowKey.value); 17729 const rowInfo = expandRowsMap[rowId]; 17730 if (rowInfo) { 17731 prev.push(row); 17732 } 17733 return prev; 17734 }, []); 17735 } else { 17736 expandRows.value = []; 17737 } 17738 }; 17739 const toggleRowExpansion = (row, expanded) => { 17740 const changed = toggleRowStatus(expandRows.value, row, expanded); 17741 if (changed) {
17742 instance.emit("expand-change", row, expandRows.value.slice()); 17743 debounceA11y(); 17744 } 17745 }; 17746 const isRowExpanded = (row) => { 17747 if (rowKey.value) { 17748 const expandMap = getKeysMap$1(expandRows.value, rowKey.value); 17749 return !!expandMap[getRowIdentity$1(row, rowKey.value)]; 17750 } 17751 return expandRows.value.includes(row); 17752 }; 17753 const setExpandRowKeys = (rowKeys) => { 17754 instance.store.assertRowKey(); 17755 const keysMap = getKeysMap$1(data.value, rowKey.value); 17756 expandRows.value = rowKeys.reduce((prev, cur) => { 17757 const info = keysMap[cur]; 17758 if (info) { 17759 prev.push(info.row); 17760 } 17761 return prev; 17762 }, []); 17763 }; 17764 return { 17765 updateExpandRows, 17766 toggleRowExpansion, 17767 isRowExpanded, 17768 setExpandRowKeys, 17769 states: { 17770 defaultExpandAll, 17771 expandRows, 17772 forceExpand 17773 } 17774 }; 17775} 17776function useFilter$1(watcherData) { 17777 const instance = getCurrentInstance(); 17778 const _data = watcherData._data; 17779 const columns = watcherData.columns; 17780 const filters = ref({}); 17781 const filteredData = ref([]); 17782 const filterPanels = ref({}); 17783 const updateFilters = (columns2, values) => { 17784 if (!Array.isArray(columns2)) { 17785 columns2 = [columns2]; 17786 } 17787 const filters_ = {}; 17788 columns2.forEach((col) => { 17789 filters.value[col.id] = values; 17790 filters_[col.columnKey || col.id] = values; 17791 }); 17792 return filters_; 17793 }; 17794 const execFilter = () => { 17795 let sourceData = unref(_data); 17796 Object.keys(filters.value).forEach((columnId) => { 17797 const values = filters.value[columnId]; 17798 if (!values || values.length === 0) { 17799 return; 17800 } 17801 const column = getColumnById$1( 17802 { 17803 columns: columns.value 17804 }, 17805 columnId 17806 ); 17807 if (column && column.filterMethod) { 17808 sourceData = sourceData.filter((row) => { 17809 return values.some((value) => column.filterMethod.call(null, value, row, column)); 17810 }); 17811 } 17812 }); 17813 filteredData.value = sourceData; 17814 }; 17815 const clearFilter = (columnKeys) => { 17816 const panels = Object.assign({}, filterPanels.value); 17817 const keys = Object.keys(panels); 17818 if (!keys.length) { 17819 /* istanbul ignore next @preserve */ 17820 return; 17821 } 17822 if (Array.isArray(columnKeys)) { 17823 const columns_ = columnKeys.map( 17824 (key) => getColumnByKey$1( 17825 { 17826 columns: columns.value 17827 }, 17828 key 17829 ) 17830 ); 17831 keys.forEach((key) => { 17832 const column = columns_.find((col) => col.id === key); 17833 if (column) { 17834 column.filteredValue = []; 17835 } 17836 }); 17837 instance.store.commit("filterChange", { 17838 column: columns_, 17839 values: [], 17840 silent: true 17841 }); 17842 } else { 17843 keys.forEach((key) => { 17844 const column = columns.value.find((col) => col.id === key); 17845 if (column) { 17846 column.filteredValue = []; 17847 } 17848 }); 17849 filters.value = {}; 17850 instance.store.commit("filterChange", { 17851 column: {}, 17852 values: [], 17853 silent: true 17854 }); 17855 } 17856 }; 17857 return { 17858 updateFilters, 17859 execFilter, 17860 clearFilter, 17861 states: { 17862 filters, 17863 filteredData, 17864 filterPanels 17865 } 17866 }; 17867} 17868var __defProp$z = Object.defineProperty; 17869var __getOwnPropSymbols$z = Object.getOwnPropertySymbols; 17870var __hasOwnProp$z = Object.prototype.hasOwnProperty; 17871var __propIsEnum$z = Object.prototype.propertyIsEnumerable; 17872var __defNormalProp$z = (obj, key, value) => key in obj ? __defProp$z(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 17873var __spreadValues$z = (a, b) => { 17874 for (var prop in b || (b = {})) 17875 if (__hasOwnProp$z.call(b, prop)) 17876 __defNormalProp$z(a, prop, b[prop]); 17877 if (__getOwnPropSymbols$z) 17878 for (var prop of __getOwnPropSymbols$z(b)) { 17879 if (__propIsEnum$z.call(b, prop)) 17880 __defNormalProp$z(a, prop, b[prop]); 17881 } 17882 return a; 17883}; 17884function useTree$2(watcherData) { 17885 const expandRowKeys = ref([]); 17886 const treeData = ref({}); 17887 const lazy = ref(false); 17888 const lazyTreeNodeMap = ref({}); 17889 const lazyColumnIdentifier = ref("hasChildren"); 17890 const childrenColumnName = ref("children"); 17891 const instance = getCurrentInstance(); 17892 const data = watcherData.data; 17893 const rowKey = watcherData.rowKey; 17894 const debounceA11y = debounce(() => { 17895 instance.state.buildA11y(); 17896 instance.state.focus(); 17897 }, TRANSITION_DELAY$1); 17898 const normalizedData = computed(() => { 17899 if (!rowKey.value) { 17900 return {}; 17901 } 17902 return normalize(data.value); 17903 }); 17904 const hasTree = computed(() => { 17905 return normalizedData.value && Object.keys(normalizedData.value).length > 0; 17906 }); 17907 const normalizedLazyNode = computed(() => {
17908 const keys = Object.keys(lazyTreeNodeMap.value); 17909 const res = {}; 17910 if (!keys.length) { 17911 return res; 17912 } 17913 keys.forEach((key) => { 17914 if (lazyTreeNodeMap.value[key].length) { 17915 const item = { children: [] }; 17916 lazyTreeNodeMap.value[key].forEach((row) => { 17917 const currentRowKey = getRowIdentity$1(row, rowKey.value); 17918 item.children.push(currentRowKey); 17919 if (row[lazyColumnIdentifier.value] && !res[currentRowKey]) { 17920 res[currentRowKey] = { children: [] }; 17921 } 17922 }); 17923 res[key] = item; 17924 } 17925 }); 17926 return res; 17927 }); 17928 const normalize = (data2) => { 17929 const res = {}; 17930 walkTreeNode$1( 17931 data2, 17932 (parent, children, level) => { 17933 const parentId = getRowIdentity$1(parent, rowKey.value); 17934 if (Array.isArray(children)) { 17935 res[parentId] = { 17936 children: children.map((row) => getRowIdentity$1(row, rowKey.value)), 17937 level 17938 }; 17939 } else if (lazy.value) { 17940 res[parentId] = { 17941 children: [], 17942 lazy: true, 17943 level 17944 }; 17945 } 17946 }, 17947 childrenColumnName.value, 17948 lazyColumnIdentifier.value 17949 ); 17950 return res; 17951 }; 17952 const updateTreeData = (ifChangeExpandRowKeys = false) => { 17953 const nested = normalizedData.value; 17954 const normalizedLazyNode_ = normalizedLazyNode.value; 17955 const keys = Object.keys(nested); 17956 const newTreeData = {}; 17957 const ifExpandAll = instance.store.states.defaultExpandAll.value; 17958 if (keys.length) { 17959 const oldTreeData = unref(treeData); 17960 const rootLazyRowKeys = []; 17961 const getExpanded = (oldValue, key) => { 17962 if (ifChangeExpandRowKeys) { 17963 if (expandRowKeys.value) { 17964 return ifExpandAll || expandRowKeys.value.includes(key); 17965 } else { 17966 /* istanbul ignore next @preserve */ 17967 return !!(ifExpandAll || oldValue.expanded); 17968 } 17969 } else { 17970 const included = ifExpandAll || expandRowKeys.value && expandRowKeys.value.includes(key); 17971 return !!((oldValue == null ? void 0 : oldValue.expanded) || included); 17972 } 17973 }; 17974 keys.forEach((key) => { 17975 const oldValue = oldTreeData[key]; 17976 const newValue = __spreadValues$z({}, nested[key]); 17977 newValue.expanded = getExpanded(oldValue, key); 17978 if (newValue.lazy) { 17979 const { loaded = false, loading = false } = oldValue || {}; 17980 newValue.loaded = !!loaded; 17981 newValue.loading = !!loading; 17982 rootLazyRowKeys.push(key); 17983 } 17984 newTreeData[key] = newValue; 17985 }); 17986 const lazyKeys = Object.keys(normalizedLazyNode_); 17987 if (lazy.value && lazyKeys.length && rootLazyRowKeys.length) { 17988 lazyKeys.forEach((key) => { 17989 const oldValue = oldTreeData[key]; 17990 const lazyNodeChildren = normalizedLazyNode_[key].children; 17991 if (rootLazyRowKeys.includes(key)) { 17992 if (newTreeData[key].children.length !== 0) { 17993 /* istanbul ignore next @preserve */ 17994 throwError("ZmTable", "children must be an empty array"); 17995 } 17996 newTreeData[key].children = lazyNodeChildren; 17997 } else { 17998 const { loaded = false, loading = false } = oldValue || {}; 17999 newTreeData[key] = { 18000 lazy: true, 18001 loaded: !!loaded, 18002 loading: !!loading, 18003 expanded: getExpanded(oldValue, key), 18004 children: lazyNodeChildren, 18005 level: "" 18006 }; 18007 } 18008 }); 18009 } 18010 } 18011 treeData.value = newTreeData; 18012 }; 18013 watch( 18014 () => expandRowKeys.value, 18015 () => { 18016 updateTreeData(true); 18017 } 18018 ); 18019 watch( 18020 () => normalizedData.value, 18021 () => { 18022 updateTreeData(); 18023 } 18024 ); 18025 watch( 18026 () => normalizedLazyNode.value, 18027 () => { 18028 updateTreeData(); 18029 } 18030 ); 18031 const updateTreeExpandKeys = (value) => { 18032 expandRowKeys.value = value; 18033 updateTreeData(); 18034 }; 18035 const toggleTreeExpansion = (row, expanded) => { 18036 instance.store.assertRowKey(); 18037 const id = getRowIdentity$1(row, rowKey.value); 18038 const data2 = id && treeData.value[id]; 18039 if (id && data2 && "expanded" in data2) { 18040 const oldExpanded = data2.expanded; 18041 expanded = typeof expanded === "undefined" ? !data2.expanded : expanded; 18042 treeData.value[id].expanded = expanded; 18043 if (oldExpanded !== expanded) {
18044 instance.emit("expand-change", row, expanded); 18045 } 18046 } 18047 debounceA11y(); 18048 }; 18049 const loadOrToggle = (row) => { 18050 instance.store.assertRowKey(); 18051 const id = getRowIdentity$1(row, rowKey.value); 18052 const data2 = treeData.value[id]; 18053 if (lazy.value && data2 && "loaded" in data2 && !data2.loaded) { 18054 loadData(row, id, data2); 18055 } else { 18056 toggleTreeExpansion(row, void 0); 18057 } 18058 }; 18059 const loadData = (row, key, treeNode) => { 18060 const { load } = instance.props; 18061 if (load && !treeData.value[key].loaded) { 18062 treeData.value[key].loading = true; 18063 load(row, treeNode, (data2) => { 18064 if (!Array.isArray(data2)) { 18065 /* istanbul ignore next @preserve */ 18066 throwError("ZmTable", "data must be an array"); 18067 } 18068 treeData.value[key].loading = false; 18069 treeData.value[key].loaded = true; 18070 treeData.value[key].expanded = true; 18071 if (data2.length) { 18072 lazyTreeNodeMap.value[key] = data2; 18073 } 18074 instance.emit("expand-change", row, true); 18075 debounceA11y(); 18076 }); 18077 } 18078 }; 18079 return { 18080 loadOrToggle, 18081 toggleTreeExpansion, 18082 updateTreeExpandKeys, 18083 updateTreeData, 18084 states: { 18085 expandRowKeys, 18086 treeData, 18087 lazy, 18088 lazyTreeNodeMap, 18089 lazyColumnIdentifier, 18090 childrenColumnName, 18091 hasTree 18092 } 18093 }; 18094} 18095function useTooltip$1() { 18096 const instance = getCurrentInstance(); 18097 const ns = useNamespace("table"); 18098 const tooltipData = ref({}); 18099 let flushing = false; 18100 const cached = {}; 18101 const flushTooltip = (data, flag) => { 18102 if (!cached[data.column.id]) { 18103 cached[data.column.id] = []; 18104 } 18105 cached[data.column.id][data.$index] = flag; 18106 if (!flushing) { 18107 flushing = true; 18108 setTimeout(() => { 18109 Object.keys(cached).forEach((col) => { 18110 cached[col].forEach((flag2, index2) => { 18111 if (!tooltipData.value[col]) { 18112 tooltipData.value[col] = []; 18113 } 18114 tooltipData.value[col][index2] = flag2; 18115 }); 18116 }); 18117 flushing = false; 18118 }, TRANSITION_DELAY$1); 18119 } 18120 }; 18121 const renderTooltip = (data, tooltip) => { 18122 var _a, _b; 18123 const node = instance.vnode.el; 18124 const cellChild = (_b = (_a = node.querySelector(`.${ns.e("body-wrapper")}`)) == null ? void 0 : _a.querySelectorAll(`.${data.column.id}`)[data.$index]) == null ? void 0 : _b.querySelector("span.text-wrapper"); 18125 if (!cellChild) { 18126 /* istanbul ignore next @preserve */ 18127 return; 18128 } 18129 tooltip == null ? void 0 : tooltip.updateTriggerRef(cellChild); 18130 if (hasEllipsis(cellChild)) { 18131 flushTooltip(data, true); 18132 } else { 18133 flushTooltip(data, false); 18134 } 18135 }; 18136 const shouldRenderTooltip = (data) => { 18137 var _a; 18138 return ((_a = tooltipData.value[data.column.id]) == null ? void 0 : _a[data.$index]) && !isEmpty2(data); 18139 }; 18140 const isEmpty2 = ({ row, column }) => { 18141 const prop = column.prop; 18142 const value = prop && getProp(row, prop).value; 18143 return isNil(value) || value.toString().trim() === ""; 18144 }; 18145 return { 18146 renderTooltip, 18147 shouldRenderTooltip 18148 }; 18149} 18150var __async$d = (__this, __arguments, generator) => { 18151 return new Promise((resolve2, reject) => { 18152 var fulfilled = (value) => { 18153 try { 18154 step(generator.next(value)); 18155 } catch (e) { 18156 reject(e); 18157 } 18158 }; 18159 var rejected = (value) => { 18160 try { 18161 step(generator.throw(value)); 18162 } catch (e) { 18163 reject(e); 18164 } 18165 }; 18166 var step = (x) => x.done ? resolve2(x.value) : Promise.resolve(x.value).then(fulfilled, rejected); 18167 step((generator = generator.apply(__this, __arguments)).next()); 18168 }); 18169}; 18170function useColumnSetting$1(watcherData) { 18171 const instance = getCurrentInstance(); 18172 const displayedProps = ref([]); 18173 const initDisplayedColumn = ref(null); 18174 const movableList = ref([]); 18175 const _columns = watcherData._columns; 18176 const initMovableList = ref([]); 18177 const displayedColumnsKey = computed(() => { 18178 if (initDisplayedColumn.value) { 18179 return `zm-table-${initDisplayedColumn.value.key}`; 18180 } 18181 /* istanbul ignore next @preserve */ 18182 return null; 18183 }); 18184 const newPropsKey = computed(() => { 18185 if (initDisplayedColumn.value) { 18186 return `zm-table-${initDisplayedColumn.value.key}-new`; 18187 } 18188 /* istanbul ignore next @preserve */ 18189 return null; 18190 }); 18191 const movableColumnsKey = computed(() => { 18192 if (initDisplayedColumn.value) { 18193 return `zm-table-${initDisplayedColumn.value.key}-movable`; 18194 } 18195 /* istanbul ignore next @preserve */ 18196 return null; 18197 }); 18198 const handleDisplayedProps = () => { 18199 const props = updateDisplayedProps(); 18200 if (initDisplayedColumn.value.movable) { 18201 const _movableList = store.get(movableColumnsKey.value, initMovableList.value); 18202 movableList.value = _movableList; 18203 } 18204 displayedProps.value = props; 18205 }; 18206 const updateDisplayedProps = () => { 18207 let props = initDisplayedColumn.value.props; 18208 props = store.get(displayedColumnsKey.value, props || []); 18209 const newProps = initDisplayedColumn.value.newProps || []; 18210 const cacheStoreProps = store.get(newPropsKey.value, []); 18211 newProps.forEach((newProp) => { 18212 if (cacheStoreProps.indexOf(newProp) === -1) { 18213 if (props.indexOf(newProp) === -1) { 18214 props.push(newProp); 18215 } 18216 cacheStoreProps.push(newProp); 18217 store.set(newPropsKey.value, cacheStoreProps); 18218 } 18219 }); 18220 return props; 18221 }; 18222 const updateDisplayedColumns = () => { 18223 _columns.value.forEach((column) => { 18224 if (notMovableColumn$1(column)) { 18225 return; 18226 } 18227 if (!column.needDisplay && displayedProps.value.indexOf(column.prop
18227) > -1) { 18228 instance.store.commit("showColumn", column.prop); 18229 } else if (column.needDisplay && displayedProps.value.indexOf(column.prop) === -1) { 18230 instance.store.commit("hideColumn", column.prop); 18231 } 18232 }); 18233 }; 18234 const updateColumnSetting = (_displayedProps, columnList) => { 18235 displayedProps.value = _displayedProps; 18236 if (initDisplayedColumn.value.movable) { 18237 movableList.value = columnList; 18238 } 18239 }; 18240 const getColumnList = () => { 18241 const tip = initDisplayedColumn.value.tip; 18242 return _columns.value.filter((column) => { 18243 return !notMovableColumn$1(column); 18244 }).map((column) => { 18245 return { 18246 displayName: column.label, 18247 label: column.prop, 18248 ariaLabel: column.label, 18249 tip: tip ? tip[column.prop] : false, 18250 isEdit: false 18251 }; 18252 }); 18253 }; 18254 const resetColumnSetting = () => { 18255 store.remove(displayedColumnsKey.value); 18256 store.remove(movableColumnsKey.value); 18257 store.remove(newPropsKey.value); 18258 handleDisplayedProps(); 18259 }; 18260 watch( 18261 () => initDisplayedColumn.value, 18262 (newVal, oldVal) => __async$d(this, null, function* () { 18263 if (newVal) { 18264 if (!oldVal && newVal.movable) { 18265 yield nextTick(); 18266 initMovableList.value = getColumnList(); 18267 } 18268 handleDisplayedProps(); 18269 } 18270 }) 18271 ); 18272 watch( 18273 () => displayedProps.value, 18274 (newVal) => { 18275 store.set(displayedColumnsKey.value, newVal); 18276 nextTick(() => { 18277 updateDisplayedColumns(); 18278 instance.emit("display-columns-change", displayedProps.value); 18279 }); 18280 } 18281 ); 18282 watch( 18283 () => movableList.value, 18284 (newVal) => { 18285 store.set(movableColumnsKey.value, newVal); 18286 nextTick(() => { 18287 instance.store.commit("updateMovableColumn", newVal); 18288 }); 18289 } 18290 ); 18291 return { 18292 updateColumnSetting, 18293 resetColumnSetting, 18294 getColumnList, 18295 states: { 18296 displayedProps, 18297 movableList, 18298 initDisplayedColumn 18299 } 18300 }; 18301} 18302var __defProp$y = Object.defineProperty; 18303var __getOwnPropSymbols$y = Object.getOwnPropertySymbols; 18304var __hasOwnProp$y = Object.prototype.hasOwnProperty; 18305var __propIsEnum$y = Object.prototype.propertyIsEnumerable; 18306var __defNormalProp$y = (obj, key, value) => key in obj ? __defProp$y(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 18307var __spreadValues$y = (a, b) => { 18308 for (var prop in b || (b = {})) 18309 if (__hasOwnProp$y.call(b, prop)) 18310 __defNormalProp$y(a, prop, b[prop]); 18311 if (__getOwnPropSymbols$y) 18312 for (var prop of __getOwnPropSymbols$y(b)) { 18313 if (__propIsEnum$y.call(b, prop)) 18314 __defNormalProp$y(a, prop, b[prop]); 18315 } 18316 return a; 18317}; 18318const doFlattenColumns$1 = (columns) => { 18319 const result = []; 18320 columns.forEach((column) => { 18321 if (column.children && column.children.length > 0) { 18322 result.push.apply(result, doFlattenColumns$1(column.children)); 18323 } else { 18324 result.push(column); 18325 } 18326 }); 18327 return result; 18328}; 18329function useWatcher$3() { 18330 const instance = getCurrentInstance(); 18331 const skeleton = ref(null); 18332 const rowKey = ref(""); 18333 const originColumns = ref([]); 18334 const columns = ref([]); 18335 const _columns = ref([]); 18336 const data = ref([]); 18337 const _data = ref([]); 18338 const hoverRow = ref(null); 18339 const fixedColumns = ref([]); 18340 const rightFixedColumns = ref([]); 18341 const leafColumnsLength = ref(0); 18342 const fixedLeafColumnsLength = ref(0); 18343 const rightFixedLeafColumnsLength = ref(0); 18344 const adjustColumn = ref(false); 18345 const flip2 = ref(false); 18346 const showSummary = ref(false); 18347 const updateOrderFns = []; 18348 const assertRowKey = () => { 18349 if (!rowKey.value) { 18350 /* istanbul ignore next @preserve */ 18351 throwError("ZmTable", "prop row-key is required"); 18352 } 18353 }; 18354 const updateChildFixed = (column) => { 18355 var _a; 18356 (_a = column.children) == null ? void 0 : _a.forEach((childColumn) => { 18357 childColumn.fixed = column.fixed; 18358 updateChildFixed(childColumn); 18359 }); 18360 }; 18361 const updateColumns = () => { 18362 const displayedColumns = _columns.value.filter((column) => { 18363 return column.needDisplay; 18364 }); 18365 displayedColumns.forEach((column) => { 18366 updateChildFixed(column); 18367 }); 18368 fixedColumns.value = displayedColumns.filter((column) => { 18369 return column.fixed === true || column.fixed === "left"; 18370 }); 18371 rightFixedColumns.value = displayedColumns.filter((column) => { 18372 return column.fixed === "right"; 18373 });
18374 const notFixedColumns = displayedColumns.filter((column) => !column.fixed); 18375 originColumns.value = [].concat(fixedColumns.value).concat(notFixedColumns).concat(rightFixedColumns.value); 18376 const leafColumns = doFlattenColumns$1(notFixedColumns); 18377 const fixedLeafColumns = doFlattenColumns$1(fixedColumns.value); 18378 const rightFixedLeafColumns = doFlattenColumns$1(rightFixedColumns.value); 18379 leafColumnsLength.value = leafColumns.length; 18380 fixedLeafColumnsLength.value = fixedLeafColumns.length; 18381 rightFixedLeafColumnsLength.value = rightFixedLeafColumns.length; 18382 columns.value = [].concat(fixedLeafColumns).concat(leafColumns).concat(rightFixedLeafColumns); 18383 }; 18384 const scheduleLayout = (needUpdateColumns, immediate = false) => { 18385 if (needUpdateColumns) { 18386 updateColumns(); 18387 } 18388 if (immediate) { 18389 instance.state.doLayout(); 18390 } else { 18391 instance.state.debouncedUpdateLayout(); 18392 } 18393 }; 18394 const { 18395 updateFilters, 18396 execFilter, 18397 clearFilter, 18398 states: filterStates 18399 } = useFilter$1({ _data, columns }); 18400 const { updateSort, execSort, execQuery, clearSort, states: sortStates } = useSort$1({ data }); 18401 const { 18402 isSelected, 18403 clearSelection, 18404 cleanSelection, 18405 getSelectionRows, 18406 toggleRowSelection, 18407 toggleAllSelection, 18408 updateSelectionByRowKey, 18409 updateAllSelected, 18410 states: selectionStates 18411 } = useSelection$1({ data, rowKey }); 18412 const { 18413 getSingleSelection, 18414 setSingleSelection, 18415 clearSingleSelection, 18416 getSingle, 18417 setSingle, 18418 states: singleStates 18419 } = useSingle$1({ data, rowKey }); 18420 const { 18421 updateExpandRows, 18422 toggleRowExpansion, 18423 isRowExpanded, 18424 setExpandRowKeys, 18425 states: expandStates 18426 } = useExpand$1({ data, rowKey }); 18427 const { 18428 loadOrToggle, 18429 toggleTreeExpansion, 18430 updateTreeExpandKeys, 18431 updateTreeData, 18432 states: treeStates 18433 } = useTree$2({ data, rowKey }); 18434 const { renderTooltip, shouldRenderTooltip } = useTooltip$1(); 18435 const { 18436 updateColumnSetting, 18437 resetColumnSetting, 18438 getColumnList, 18439 states: columnSettingStates 18440 } = useColumnSetting$1({ _columns }); 18441 const setExpandRowKeysAdapter = (val) => { 18442 setExpandRowKeys(val); 18443 updateTreeExpandKeys(val); 18444 }; 18445 return { 18446 assertRowKey, 18447 updateColumns, 18448 scheduleLayout, 18449 setExpandRowKeysAdapter, 18450 updateColumnSetting, 18451 resetColumnSetting, 18452 getColumnList, 18453 isSelected, 18454 clearSelection, 18455 cleanSelection, 18456 getSelectionRows, 18457 toggleRowSelection, 18458 toggleAllSelection, 18459 updateSelectionByRowKey, 18460 updateAllSelected, 18461 getSingleSelection, 18462 setSingleSelection, 18463 clearSingleSelection, 18464 getSingle, 18465 setSingle, 18466 updateSort, 18467 execSort, 18468 execQuery, 18469 clearSort, 18470 updateFilters, 18471 execFilter, 18472 clearFilter, 18473 updateExpandRows, 18474 toggleRowExpansion, 18475 isRowExpanded, 18476 loadOrToggle, 18477 toggleTreeExpansion, 18478 updateTreeExpandKeys, 18479 updateTreeData, 18480 renderTooltip, 18481 shouldRenderTooltip, 18482 states: __spreadValues$y(__spreadValues$y(__spreadValues$y(__spreadValues$y(__spreadValues$y(__spreadValues$y(__spreadValues$y({ 18483 skeleton, 18484 rowKey, 18485 originColumns, 18486 columns, 18487 _columns, 18488 data, 18489 _data, 18490 hoverRow, 18491 fixedColumns, 18492 rightFixedColumns, 18493 leafColumnsLength, 18494 fixedLeafColumnsLength, 18495 rightFixedLeafColumnsLength, 18496 adjustColumn, 18497 flip: flip2, 18498 showSummary, 18499 updateOrderFns 18500 }, filterStates), sortStates), selectionStates), singleStates), expandStates), treeStates), columnSettingStates) 18501 }; 18502} 18503var __defProp$x = Object.defineProperty; 18504var __defProps$q = Object.defineProperties; 18505var __getOwnPropDescs$q = Object.getOwnPropertyDescriptors; 18506var __getOwnPropSymbols$x = Object.getOwnPropertySymbols; 18507var __hasOwnProp$x = Object.prototype.hasOwnProperty; 18508var __propIsEnum$x = Object.prototype.propertyIsEnumerable; 18509var __defNormalProp$x = (obj, key, value) => key in obj ? __defProp$x(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 18510var __spreadValues$x = (a, b) => { 18511 for (var prop in b || (b = {})) 18512 if (__hasOwnProp$x.call(b, prop)) 18513 __defNormalProp$x(a, prop, b[prop]); 18514 if (__getOwnPropSymbols$x) 18515 for (var prop of __getOwnPropSymbols$x(b)) { 18516 if (__propIsEnum$x.call(b, prop)) 18517 __defNormalProp$x(a, prop, b[prop]); 18518 } 18519 return a; 18520}; 18521var __spreadProps$q = (a, b) => __defProps$q(a, __getOwnPropDescs$q(b)); 18522function replaceColumn$1(array, column) { 18523 return array.map((item) => { 18524 var _a; 18525 if (item.id === column.id) { 18526 return column; 18527 } else if ((_a = item.children) == null ? void 0 : _a.length) { 18528 item.children = replaceColumn$1(item.children, column); 18529 } 18530 return item; 18531 }); 18532} 18533function sortColumn$1(array) { 18534 array.forEach((item) => { 18535 var _a, _b; 18536 item.no = (_a = item.getColumnIndex) == null ? void 0 : _a.call(item); 18537 if ((_b = item.children) == null ? void 0 : _b.length) { 18538 sortColumn$1(item.children); 18539 } 18540 }); 18541 array.sort((cur, pre) => cur.no - pre.no); 18542} 18543function useStore$1() { 18544 const instance = getCurrentInstance(); 18545 const watcher = useWatcher$3(); 18546 const ns = useNamespace("table"); 18547 const mutations = { 18548 setData(states, data) { 18549 const dataInstanceChanged = unref(states._data) !== data; 18550 states.data.value = data; 18551 states._data.value = data; 18552 instance.store.execQuery(); 18553 instance.store.updateExpandRows(); 18554 if (unref(states.reserveSelection)) { 18555 instance.store.assertRowKey(); 18556 instance.store.updateSelectionByRowKey(); 18557 } else { 18558 if (dataInstanceChanged) { 18559 instance.store.clearSelection(); 18560 } else { 18561 instance.store.cleanSelection(); 18562 } 18563 } 18564 instance.store.updateAllSelected(); 18565 if (instance.$ready) { 18566 instance.store.scheduleLayout(); 18567 } 18568 }, 18569 insertColumn(states, column, parent, updateColumnOrder) { 18570 const array = unref(states._columns); 18571 let newColumns = []; 18572 if (!parent) { 18573 array.push(column); 18574 newColumns = array; 18575 } else { 18576 if (parent && !parent.children) { 18577 parent.children = []; 18578 } 18579 parent.children.push(column); 18580 newColumns = replaceColumn$1(array, parent); 18581 } 18582 states._columns.value = newColumns; 18583 states.updateOrderFns.push(updateColumnOrder); 18584 if (column.type === "selection") { 18585 states.selectable.value = column.selectable; 18586 states.reserveSelection.value = column.reserveSelection; 18587 } 18588 if (instance.$ready) { 18589 instance.store.updateColumns(); 18590 instance.store.scheduleLayout(); 18591 } 18592 }, 18593 updateColumnOrder(states, column) { 18594 var _a; 18595 const newColumnIndex = (_a = column.getColumnIndex) == null ? void 0 : _a.call(column); 18596 if (newColumnIndex === column.no) { 18597 return; 18598 } 18599 sortColumn$1(states._columns.value); 18600 if (instance.$ready) { 18601 instance.store.updateColumns(); 18602 } 18603 }, 18604 removeColumn(states, column, parent, updateColumnOrder) { 18605 const array = unref(states._columns) || []; 18606 if (parent) { 18607 parent.children.splice( 18608 parent.children.findIndex((item) => item.id === column.id), 18609 1 18610 ); 18611 states._columns.value = replaceColumn$1(array, parent); 18612 } else { 18613 const index2 = array.indexOf(column); 18614 if (index2 > -1) { 18615 array.splice(index2, 1); 18616 states._columns.value = array; 18617 } 18618 } 18619 const updateFnIndex = states.updateOrderFns.indexOf(updateColumnOrder); 18620 updateFnIndex > -1 && states.updateOrderFns.splice(updateFnIndex, 1); 18621 if (instance.$ready) { 18622 instance.store.updateColumns(); 18623 instance.store.scheduleLayout(); 18624 } 18625 }, 18626 showColumn(states, prop) { 18627 states._columns.value.some((column) => { 18628 if (column.prop === prop) { 18629 column.needDisplay = true; 18630 return true; 18631 } 18632 }); 18633 if (instance.$ready) { 18634 instance.store.updateColumns(); 18635 instance.store.scheduleLayout(); 18636 } 18637 }, 18638 hideColumn(states, prop) { 18639 states._columns.value.some((column) => { 18640 if (column.prop === prop) { 18641 column.needDisplay = false;
18642 return true; 18643 } 18644 }); 18645 if (instance.$ready) { 18646 instance.store.updateColumns(); 18647 instance.store.scheduleLayout(); 18648 } 18649 }, 18650 updateMovableColumn(states, movableList) { 18651 if (!movableList || !movableList.length) { 18652 return; 18653 } 18654 const array = []; 18655 const _columns = states._columns; 18656 states._columns.value.forEach((column) => { 18657 if (notMovableColumn$1(column)) { 18658 array.push(column); 18659 } 18660 }); 18661 movableList.forEach((item) => { 18662 _columns.value.some((column) => { 18663 if (column.prop === item.label) { 18664 array.push(column); 18665 return true; 18666 } 18667 }); 18668 }); 18669 states._columns.value = array; 18670 if (instance.$ready) { 18671 instance.store.updateColumns(); 18672 instance.store.scheduleLayout(); 18673 } 18674 }, 18675 setHoverRow(states, row) { 18676 states.hoverRow.value = row; 18677 }, 18678 updateFlip(states, flag) { 18679 states.flip.value = flag; 18680 }, 18681 toggleAllSelection() { 18682 instance.store.toggleAllSelection(); 18683 }, 18684 rowSelectedChanged(states, row) { 18685 instance.store.toggleRowSelection(row); 18686 instance.store.updateAllSelected(); 18687 }, 18688 sort(states, options) { 18689 const { prop, order, init } = options; 18690 if (prop) { 18691 const column = unref(states.columns).find((column2) => column2.prop === prop); 18692 if (column) { 18693 column.order = order; 18694 instance.store.updateSort(column, prop, order); 18695 instance.store.commit("changeSortCondition", { init }); 18696 } 18697 } 18698 }, 18699 changeSortCondition(states, options) { 18700 const { sortingColumn, sortProp, sortOrder } = states; 18701 const columnValue = unref(sortingColumn); 18702 const propValue = unref(sortProp); 18703 const orderValue = unref(sortOrder); 18704 if (orderValue === null) { 18705 states.sortingColumn.value = null; 18706 states.sortProp.value = ""; 18707 } 18708 const ignore = { filter: true }; 18709 instance.store.execQuery(ignore); 18710 if (!options || !(options.silent || options.init)) { 18711 instance.emit("sort-change", { 18712 column: columnValue, 18713 prop: propValue, 18714 order: orderValue 18715 }); 18716 } 18717 }, 18718 filterChange(states, options) { 18719 const { column, values, silent } = options; 18720 const newFilters = instance.store.updateFilters(column, values); 18721 instance.store.execQuery(); 18722 instance.store.updateAllSelected(); 18723 if (!silent) { 18724 instance.emit("filter-change", newFilters); 18725 } 18726 } 18727 }; 18728 const commit = function(name, ...args) { 18729 const mutations2 = instance.store.mutations; 18730 if (mutations2[name]) { 18731 mutations2[name].apply(instance, [instance.store.states].concat(args)); 18732 } 18733 }; 18734 return __spreadProps$q(__spreadValues$x({ 18735 ns 18736 }, watcher), { 18737 mutations, 18738 commit 18739 }); 18740} 18741const InitialStateMap$1 = { 18742 skeleton: "skeleton", 18743 rowKey: "rowKey", 18744 selectOnIndeterminate: "selectOnIndeterminate", 18745 defaultExpandAll: "defaultExpandAll", 18746 adjustColumn: "adjustColumn", 18747 showSummary: "showSummary", 18748 lazy: "lazy", 18749 ["treeProps.hasChildren"]: { 18750 key: "lazyColumnIdentifier", 18751 default: "hasChildren" 18752 }, 18753 ["treeProps.children"]: { 18754 key: "childrenColumnName", 18755 default: "children" 18756 }, 18757 initDisplayedColumn: "initDisplayedColumn" 18758}; 18759function createStore$1(table, props) { 18760 const store2 = useStore$1(); 18761 store2.table = table; 18762 Object.keys(InitialStateMap$1).forEach((key) => { 18763 handleValue$1( 18764 getValue$1(props, key), 18765 key, 18766 store2 18767 ); 18768 }); 18769 proxyTableProps$1(store2, props); 18770 return store2; 18771} 18772function handleValue$1(value, key, store2) { 18773 let newVal = value; 18774 let storeKey = InitialStateMap$1[key]; 18775 if (typeof InitialStateMap$1[key] === "object") { 18776 storeKey = storeKey.key; 18777 newVal = newVal || InitialStateMap$1[key].default; 18778 } 18779 store2.states[storeKey].value = newVal; 18780} 18781function proxyTableProps$1(store2, props) { 18782 Object.keys(InitialStateMap$1).forEach((key) => { 18783 watch( 18784 () => getValue$1(props, key), 18785 (value) => { 18786 handleValue$1(value, key, store2); 18787 } 18788 ); 18789 }); 18790} 18791function getValue$1(props, key) { 18792 if (key.includes(".")) {
18793 const keyList = key.split("."); 18794 let value = props; 18795 keyList.forEach((key2) => { 18796 value = value[key2]; 18797 }); 18798 return value; 18799 } else { 18800 return props[key]; 18801 } 18802} 18803let TableLayout$1 = class TableLayout { 18804 constructor(options) { 18805 this.shouldFlip = (bodyWidth) => { 18806 const parentTable = this.table.state.getParentTable(this.table); 18807 const useFlip = this.table.useFlip.value; 18808 return useFlip && (parentTable && parentTable.store.states.flip.value || bodyWidth <= (useFlip.width || 360)); 18809 }; 18810 this.observers = []; 18811 this.table = options.table; 18812 this.store = options.store; 18813 this.height = ref(null); 18814 this.scrollX = ref(false); 18815 this.scrollY = ref(false); 18816 this.bodyWidth = ref(null); 18817 } 18818 updateScrollY() { 18819 const scrollBarRef = this.table.refs.scrollBarRef; 18820 if (this.table.vnode.el && (scrollBarRef == null ? void 0 : scrollBarRef.wrapRef)) { 18821 const scrollY = scrollBarRef.wrapRef.scrollHeight > scrollBarRef.wrapRef.clientHeight; 18822 this.scrollY.value = scrollY; 18823 } 18824 } 18825 setHeight(value, prop = "height") { 18826 const el = this.table.vnode.el; 18827 value = parseHeight$1(value); 18828 this.height.value = Number(value); 18829 if (!el && (value || value === 0)) { 18830 return nextTick(() => this.setHeight(value, prop)); 18831 } 18832 if (typeof value === "number") { 18833 el.style[prop] = `${value}px`; 18834 this.updateScrollY(); 18835 } else if (typeof value === "string") { 18836 el.style[prop] = value; 18837 this.updateScrollY(); 18838 } 18839 } 18840 setMaxHeight(value) { 18841 this.setHeight(value, "max-height"); 18842 } 18843 getFlattenColumns() { 18844 const flattenColumns = []; 18845 const columns = this.table.store.states.columns.value; 18846 columns.forEach((column) => { 18847 flattenColumns.push(column); 18848 }); 18849 return flattenColumns; 18850 } 18851 updateColumnsWidth() { 18852 let flip2 = false; 18853 const bodyWidth = this.table.vnode.el.clientWidth; 18854 if (this.shouldFlip(bodyWidth)) { 18855 flip2 = true; 18856 } else { 18857 let bodyMinWidth = 0; 18858 const flattenColumns = this.getFlattenColumns(); 18859 const flexColumns = flattenColumns.filter((column) => typeof column.width !== "number"); 18860 flattenColumns.forEach((column) => { 18861 if (typeof column.width === "number" && column.realWidth) { 18862 column.realWidth = null; 18863 } 18864 }); 18865 if (flexColumns.length > 0) { 18866 flattenColumns.forEach((column) => { 18867 bodyMinWidth += Number(column.width || column.minWidth); 18868 }); 18869 if (bodyMinWidth <= bodyWidth) { 18870 this.scrollX.value = false; 18871 const totalFlexWidth = bodyWidth - bodyMinWidth; 18872 if (flexColumns.length === 1) { 18873 flexColumns[0].realWidth = Number(flexColumns[0].minWidth) + totalFlexWidth; 18874 } else { 18875 const allColumnsWidth = flexColumns.reduce( 18876 (prev, column) => prev + Number(column.minWidth), 18877 0 18878 );
18879 const flexWidthPerPixel = totalFlexWidth / allColumnsWidth; 18880 let noneFirstWidth = 0; 18881 flexColumns.forEach((column, index2) => { 18882 if (index2 === 0) { 18883 return; 18884 } 18885 const flexWidth = Math.floor(Number(column.minWidth) * flexWidthPerPixel); 18886 noneFirstWidth += flexWidth; 18887 column.realWidth = Number(column.minWidth) + flexWidth; 18888 }); 18889 flexColumns[0].realWidth = Number(flexColumns[0].minWidth) + totalFlexWidth - noneFirstWidth; 18890 } 18891 } else { 18892 this.scrollX.value = true; 18893 flexColumns.forEach((column) => { 18894 column.realWidth = Number(column.minWidth); 18895 }); 18896 } 18897 this.bodyWidth.value = Math.max(bodyMinWidth, bodyWidth); 18898 this.table.state.resizeState.value.width = this.bodyWidth.value; 18899 } else { 18900 flattenColumns.forEach((column) => { 18901 column.realWidth = Number(column.width); 18902 bodyMinWidth += column.realWidth; 18903 }); 18904 this.scrollX.value = bodyMinWidth > bodyWidth; 18905 this.bodyWidth.value = bodyMinWidth; 18906 } 18907 } 18908 this.store.commit("updateFlip", flip2); 18909 this.notifyObservers("columns"); 18910 } 18911 addObserver(observer) { 18912 this.observers.push(observer); 18913 } 18914 removeObserver(observer) { 18915 const index2 = this.observers.indexOf(observer); 18916 if (index2 !== -1) { 18917 this.observers.splice(index2, 1); 18918 } 18919 } 18920 notifyObservers(event) { 18921 const observers = this.observers; 18922 observers.forEach((observer) => { 18923 switch (event) { 18924 case "columns": 18925 observer.state.onColumnsChange(this); 18926 break; 18927 } 18928 }); 18929 } 18930}; 18931/* istanbul ignore next @preserve */ 18932const colgroupProps$1 = { 18933 columns: { 18934 type: Array, 18935 default: () => [] 18936 }, 18937 forceExpand: [Boolean, Object] 18938}; 18939const TableColgroup$1 = defineComponent({ 18940 name: "ZmColgroup", 18941 props: colgroupProps$1, 18942 setup(props) { 18943 const getPropsData = (column) => { 18944 const propsData = { 18945 key: column.id, 18946 name: column.id 18947 }; 18948 return propsData; 18949 }; 18950 const columns = computed(() => { 18951 return props.columns.filter((column) => { 18952 return column.type !== "expand" || !props.forceExpand; 18953 }); 18954 }); 18955 return () => h( 18956 "colgroup", 18957 {}, 18958 columns.value.map((column) => h("col", getPropsData(column))) 18959 ); 18960 } 18961}); 18962const getAllColumns$1 = (columns) => { 18963 const result = []; 18964 columns.forEach((column) => { 18965 if (column.children) { 18966 result.push(column); 18967 result.push.apply(result, getAllColumns$1(column.children)); 18968 } else { 18969 result.push(column); 18970 } 18971 }); 18972 return result; 18973}; 18974const setColIndex$1 = (rows, owner) => { 18975 const headerRowCount = rows.length; 18976 const displayedColumns = owner.store.states.columns.value.filter((column) => { 18977 return column.type !== "expand" || !owner.props.forceExpand; 18978 }); 18979 const headerColumnCount = displayedColumns.length; 18980 const headerGrid = Array(headerRowCount).fill(null).map(() => { 18981 return new Array(headerColumnCount).fill(null); 18982 }); 18983 for (let i = 0; i < headerRowCount; i++) { 18984 const cells = rows[i]; 18985 let occupied; 18986 Array.prototype.forEach.call(cells, (cell) => { 18987 let colSpan = cell.colSpan; 18988 let rowSpan = cell.rowSpan; 18989 occupied = headerGrid[i].filter((n) => { 18990 return n !== null; 18991 }); 18992 if (colSpan > 1 || rowSpan > 1) { 18993 if (colSpan > 1) { 18994 while (colSpan--) { 18995 headerGrid[i][colSpan + occupied.length] = cell; 18996 } 18997 } else if (rowSpan > 1) { 18998 while (rowSpan--) { 18999 headerGrid[i + rowSpan][occupied.length] = cell; 19000 } 19001 } 19002 } else if (colSpan == 1 && rowSpan == 1) { 19003 headerGrid[i][occupied.length] = cell; 19004 } 19005 }); 19006 } 19007 for (let i = 0; i < headerRowCount; i++) { 19008 const cells = headerGrid[i]; 19009 Array.prototype.forEach.call(cells, (cell, index2) => { 19010 cell.colIndex = index2 + 1; 19011 }); 19012 } 19013}; 19014const convertToRows$1 = (originColumns, owner) => { 19015 let maxLevel = 1; 19016 const traverse = (column, parent) => { 19017 if (parent) { 19018 column.level = parent.level + 1; 19019 if (maxLevel < column.level) { 19020 maxLevel = column.level; 19021 } 19022 } 19023 if (column.children) { 19024 let colSpan = 0;
19025 column.children.forEach((subColumn) => { 19026 traverse(subColumn, column); 19027 colSpan += subColumn.colSpan; 19028 }); 19029 column.colSpan = colSpan; 19030 } else { 19031 column.colSpan = 1; 19032 } 19033 }; 19034 originColumns.forEach((column) => { 19035 column.level = 1; 19036 traverse(column, void 0); 19037 }); 19038 const rows = []; 19039 for (let i = 0; i < maxLevel; i++) { 19040 rows.push([]); 19041 } 19042 const allColumns = getAllColumns$1(originColumns); 19043 allColumns.forEach((column) => { 19044 if (column.type === "expand" && owner.props.forceExpand) { 19045 return; 19046 } 19047 if (!column.children) { 19048 column.rowSpan = maxLevel - column.level + 1; 19049 } else { 19050 column.rowSpan = 1; 19051 column.children.forEach((col) => { 19052 col.isSubColumn = true; 19053 }); 19054 } 19055 rows[column.level - 1].push(column); 19056 }); 19057 setColIndex$1(rows, owner); 19058 return rows; 19059}; 19060function useUtils$3() { 19061 const owner = inject(TABLE_INJECTION_KEY); 19062 const columnRows = computed(() => { 19063 return convertToRows$1(owner.store.states.originColumns.value, owner); 19064 }); 19065 const isGroup = computed(() => { 19066 const result = columnRows.value.length > 1; 19067 if (result) { 19068 owner.state.isGroup.value = true; 19069 } 19070 return result; 19071 }); 19072 return { 19073 isGroup, 19074 columnRows 19075 }; 19076} 19077function useStyle$3() { 19078 const owner = inject(TABLE_INJECTION_KEY); 19079 const ns = useNamespace("table"); 19080 const t = owner.t; 19081 const getHeaderRowStyle = (rowIndex) => { 19082 const headerRowStyle = owner.props.headerRowStyle; 19083 if (typeof headerRowStyle === "function") { 19084 return headerRowStyle.call(null, { rowIndex }); 19085 } 19086 return headerRowStyle; 19087 }; 19088 const getHeaderRowClass = (rowIndex) => { 19089 const classes = []; 19090 const headerRowClassName = owner.props.headerRowClassName; 19091 if (typeof headerRowClassName === "string") { 19092 classes.push(headerRowClassName); 19093 } else if (typeof headerRowClassName === "function") { 19094 classes.push(headerRowClassName.call(null, { rowIndex })); 19095 } 19096 return classes.join(" "); 19097 }; 19098 const getHeaderCellStyle = (rowIndex, columnIndex, row, column) => { 19099 var _a; 19100 let headerCellStyles = (_a = owner.props.headerCellStyle) != null ? _a : {}; 19101 if (typeof headerCellStyles === "function") { 19102 headerCellStyles = headerCellStyles.call(null, { 19103 rowIndex, 19104 columnIndex, 19105 row, 19106 column 19107 }); 19108 } 19109 const fixedStyle = getFixedColumnOffset$1( 19110 columnIndex, 19111 owner.store, 19112 column == null ? void 0 : column.fixed, 19113 row 19114 ); 19115 ensurePosition$1(fixedStyle, "left"); 19116 ensurePosition$1(fixedStyle, "right"); 19117 return Object.assign({}, headerCellStyles, fixedStyle); 19118 }; 19119 const getHeaderCellClass = (rowIndex, columnIndex, row, column) => { 19120 const fixedClasses = getFixedColumnsClass$1( 19121 ns.b(), 19122 columnIndex, 19123 owner.store, 19124 column == null ? void 0 : column.fixed, 19125 row 19126 ); 19127 const sortStateClass = getSortState(column).states; 19128 const filterStateClass = getFilterClass(column); 19129 const classes = [ 19130 column.id, 19131 column.headerAlign, 19132 column.className, 19133 column.labelClassName, 19134 sortStateClass, 19135 filterStateClass, 19136 ...fixedClasses 19137 ]; 19138 if (column.resizable) { 19139 classes.push("resizable-column"); 19140 } 19141 const headerCellClassName = owner.props.headerCellClassName; 19142 if (typeof headerCellClassName === "string") { 19143 classes.push(headerCellClassName); 19144 } else if (typeof headerCellClassName === "function") { 19145 classes.push( 19146 headerCellClassName.call(null, { 19147 rowIndex, 19148 columnIndex, 19149 row, 19150 column 19151 }) 19152 ); 19153 } 19154 return classes.filter((className) => Boolean(className)).join(" "); 19155 }; 19156 const getSortState = (column) => { 19157 switch (column.order) { 19158 case "ascending": 19159 return { 19160 components: ArrowUp, 19161 states: "sort-emphasize", 19162 ariaLabel: t("table.sortAsc", { columnName: column.label }) 19163 }; 19164 case "descending": 19165 return { 19166 components: ArrowDown, 19167 states: "sort-emphasize", 19168 ariaLabel: t("table.sortDes", { columnName: column.label }) 19169 }; 19170 default: 19171 return { 19172 components: Sort, 19173 states: "", 19174 ariaLabel: t("table.sortNormal", { columnName: column.label }) 19175 }; 19176 } 19177 }; 19178 const getFilterClass = (column) => { 19179 if (column.filters && column.filteredValue && column.filteredValue.length > 0) { 19180 return "filter-emphasize"; 19181 } 19182 }; 19183 return { 19184 getHeaderRowStyle, 19185 getHeaderRowClass, 19186 getHeaderCellStyle, 19187 getHeaderCellClass, 19188 getSortState 19189 }; 19190} 19191function useEvent$3(emit) { 19192 const instance = getCurrentInstance(); 19193 const owner = inject(TABLE_INJECTION_KEY); 19194 const draggingColumn = ref(null); 19195 const dragging = ref(false); 19196 const dragState = ref({}); 19197 const adjustColumn = owner.store.states.adjustColumn.value; 19198 const toggleOrder = (column) => { 19199 const order = column.order;
19200 const sortOrders = column.sortOrders; 19201 const index2 = sortOrders.indexOf(order); 19202 return sortOrders[index2 > sortOrders.length - 2 ? 0 : index2 + 1]; 19203 }; 19204 const handleSortClick = (event, column) => { 19205 const order = toggleOrder(column); 19206 const states = owner.store.states; 19207 const sortOrder = column.order = order; 19208 const sortingColumn = states.sortingColumn.value; 19209 let sortProp = states.sortProp.value; 19210 if (sortingColumn !== column || sortingColumn === column && sortingColumn.order === null) { 19211 if (sortingColumn) { 19212 sortingColumn.order = null; 19213 } 19214 states.sortingColumn.value = column; 19215 sortProp = column.prop; 19216 } 19217 states.sortProp.value = sortProp; 19218 states.sortOrder.value = sortOrder; 19219 owner.store.commit("changeSortCondition"); 19220 event.stopPropagation(); 19221 }; 19222 const handleMouseDown = (event, column) => { 19223 if (column.children && column.children.length > 0) { 19224 /* istanbul ignore next @preserve */ 19225 return; 19226 } 19227 if (draggingColumn.value && adjustColumn) { 19228 dragging.value = true; 19229 const tableEl = owner.vnode.el; 19230 const tableLeft = tableEl.getBoundingClientRect().left; 19231 const columnEl = instance.vnode.el.querySelector(`th.${column.id}`); 19232 const columnRect = columnEl.getBoundingClientRect(); 19233 const minLeft = columnRect.left - tableLeft + 150; 19234 dragState.value = { 19235 startMouseLeft: event.clientX, 19236 startLeft: columnRect.right - tableLeft, 19237 startColumnLeft: columnRect.left - tableLeft, 19238 tableLeft 19239 }; 19240 const resizeProxy = owner.refs.resizeProxy; 19241 resizeProxy.style.left = `${dragState.value.startLeft}px`; 19242 const handleMouseMove2 = (event2) => { 19243 const deltaLeft = event2.clientX - dragState.value.startMouseLeft; 19244 const proxyLeft = dragState.value.startLeft + deltaLeft; 19245 resizeProxy.style.left = `${Math.max(minLeft, proxyLeft)}px`; 19246 addClass(resizeProxy, "is-active"); 19247 }; 19248 const handleMouseUp = () => { 19249 if (dragging.value) { 19250 const { startColumnLeft, startLeft } = dragState.value; 19251 const finalLeft = Number.parseInt(resizeProxy.style.left, 10); 19252 const columnWidth = finalLeft - startColumnLeft; 19253 column.width = column.realWidth = columnWidth; 19254 owner.emit("header-dragend", column.width, startLeft - startColumnLeft, column, event); 19255 document.body.style.cursor = ""; 19256 dragging.value = false; 19257 draggingColumn.value = null; 19258 dragState.value = {}; 19259 emit("set-drag-visible", false); 19260 requestAnimationFrame(() => { 19261 owner.store.scheduleLayout(false, true); 19262 }); 19263 } 19264 removeClass(resizeProxy, "is-active"); 19265 document.removeEventListener("mousemove", handleMouseMove2); 19266 document.removeEventListener("mouseup", handleMouseUp); 19267 }; 19268 document.addEventListener("mousemove", handleMouseMove2); 19269 document.addEventListener("mouseup", handleMouseUp); 19270 } 19271 }; 19272 const handleMouseMove = (event, column) => { 19273 if (column.children && column.children.length > 0) { 19274 /* istanbul ignore next @preserve */ 19275 return; 19276 } 19277 if (!column || !column.resizable) { 19278 return; 19279 } 19280 const el = event.target; 19281 const target = el.closest("th"); 19282 if (!dragging.value && adjustColumn) { 19283 const rect = target.getBoundingClientRect(); 19284 const tableEl = owner.vnode.el; 19285 const tableLeft = tableEl.getBoundingClientRect().left; 19286 const columnEl = instance.vnode.el.querySelector(`th.${column.id}`); 19287 const columnRect = columnEl.getBoundingClientRect(); 19288 dragState.value = { 19289 startMouseLeft: event.clientX, 19290 startLeft: columnRect.right - tableLeft, 19291 startColumnLeft: columnRect.left - tableLeft, 19292 tableLeft 19293 }; 19294 const resizeProxy = owner.refs.resizeProxy; 19295 const bodyStyle = document.body.style; 19296 if (rect.width > 12 && rect.right - event.pageX < 8) { 19297 bodyStyle.cursor = "col-resize"; 19298 draggingColumn.value = column; 19299 emit("set-drag-visible", true); 19300 resizeProxy.style.left = `${dragState.value.startLeft}px`; 19301 } else if (!dragging.value) { 19302 bodyStyle.cursor = ""; 19303 draggingColumn.value = null; 19304 emit("set-drag-visible", false); 19305 } 19306 } 19307 }; 19308 const handleMouseOut = () => { 19309 if (!dragging.value) { 19310 emit("set-drag-visible", false); 19311 document.body.style.cursor = ""; 19312 } 19313 }; 19314 return { 19315 handleSortClick, 19316 handleMouseDown, 19317 handleMouseMove, 19318 handleMouseOut 19319 }; 19320} 19321const messages$4 = { 19322 "en-US": { 19323 "table": { 19324 "emptyText": "No Data", 19325 "confirmFilter": "Confirm", 19326 "resetFilter": "Reset", 19327 "sumText": "Sum", 19328 "showAll": "Show all", 19329 "grabbed": "Grabbed", 19330 "dropped": "Dropped", 19331 "settings": "Settings", 19332 "movePosition": "Move to position {index}", 19333 "changeOrder": "Change order of {columnName}", 19334 "columnSettings": "Column settings", 19335 "sortNormal": "Sort {columnName}", 19336 "sortAsc": "Sort {columnName} in ascending order", 19337 "sortDes": "Sort {columnName} in descending order", 19338 "selectRowTemp": "Select Row {index}, {columnName}: {content}", 19339 "changeOrderTemp": "Change order of Row {index}, {columnName}: {content}", 19340 "moreOptionsTemp": "More options about Row {index}, {columnName}: {content}", 19341 "resetColumnSettings": "Reset column settings", 19342 "savedSuccess": "Saved successfully", 19343 "filterButton": "Filter by {columnName}", 19344 "filterPopoverTitle": "Filter the {columnName} column", 19345 "dragAndDropTip": "Press Enter/Space to grab/drop, press arrow up/down to move", 19346 "sortAsc1": "Sort {columnName}, sorted ascending", 19347 "sortDes1": "Sort {columnName}, sorted descending", 19348 "sortAsc2": "Ascending", 19349 "sortDes2": "Descending", 19350 "sortNormal2": "Sorting" 19351 } 19352 }, 19353 "de-DE": { 19354 "table": { 19355 "emptyText": "Keine Daten", 19356 "confirmFilter": "Bestätigen", 19357 "resetFilter": "Zurücksetzen", 19358 "sumText": "Gesamt", 19359 "showAll": "Alle anzeigen", 19360 "grabbed": "Gegriffen", 19361 "dropped": "Abgelegt", 19362 "settings": "Einstellungen", 19363 "movePosition": "Zu Position {index} verschieben", 19364 "changeOrder": "Reihenfolge von {columnName} ändern", 19365 "columnSettings": "Spalteneinstellungen", 19366 "sortNormal": "{columnName} sortieren", 19367 "sortAsc": "{columnName} in aufsteigender Reihenfolge sortieren", 19368 "sortDes": "{columnName} in absteigender Reihenfolge sortieren", 19369 "selectRowTemp": "Zeile {index} auswählen, {columnName}: {content}", 19370 "changeOrderTemp": "Reihenfolge der Zeile {index}, {columnName} ändern: {content}", 19371 "moreOptionsTemp": "Weitere Optionen zu Zeile {index}, {columnName}: {content}", 19372 "resetColumnSettings": "Spalteneinstellungen zurücksetzen", 19373 "savedSuccess": "Speichern erfolgreich", 19374 "filterButton": "Filtern nach {columnName}", 19375 "filterPopoverTitle": "Die Spalte {columnName} filtern", 19376 "dragAndDropTip": "Zum Greifen/Ablegen Eingabe-/Leertaste drücken, zum Verschieben Pfeil nach oben/unten drücken", 19377 "sortAsc1": "Sortieren nach {columnName}, aufsteigend sortiert", 19378 "sortDes1": "Sortieren nach {columnName}, absteigend sortiert", 19379 "sortAsc2": "Aufsteigend", 19380 "sortDes2": "Absteigend", 19381 "sortNormal2": "Sortierung" 19382 } 19383 }, 19384 "es-ES": { 19385 "table": { 19386 "emptyText": "Sin datos", 19387 "confirmFilter": "Confirmar", 19388 "resetFilter": "Restablecer", 19389 "sumText": "Suma", 19390 "showAll": "Mostrar todo", 19391 "grabbed": "Agarrado", 19392 "dropped": "Soltado", 19393 "settings": "Configuración", 19394 "movePosition": "Mover a la posición {index}", 19395 "changeOrder": "Cambiar orden de {columnName}", 19396 "columnSettings": "Configuración de columna", 19397 "sortNormal": "Ordenar {columnName}", 19398 "sortAsc": "Ordenar {columnName} de forma ascendente", 19399 "sortDes": "Ordenar {columnName} de forma descendente", 19400 "selectRowTemp": "Seleccionar fila {index}, {columnName}: {content}.", 19401 "changeOrderTemp": "Cambiar orden de fila {index}, {columnName}: {content}", 19402 "moreOptionsTemp": "Más opciones de fila {index}, {columnName}: {content}", 19403 "resetColumnSettings": "Restablecer configuración de columna", 19404 "savedSuccess": "Guardado correctamente", 19405 "filterButton": "Filtrar por {columnName}",
19406 "filterPopoverTitle": "Filtrar la columna {columnName}", 19407 "dragAndDropTip": "Pulse Intro o la barra espaciadora para agarrar o soltar, pulse la flecha hacia arriba o hacia abajo para moverse", 19408 "sortAsc1": "Ordenar {columnName}, en orden ascendente", 19409 "sortDes1": "Ordenar {columnName}, en orden descendente", 19410 "sortAsc2": "Ascendente", 19411 "sortDes2": "Descendente", 19412 "sortNormal2": "Ordenar" 19413 } 19414 }, 19415 "fr-FR": { 19416 "table": { 19417 "emptyText": "Aucune donnée", 19418 "confirmFilter": "Confirmer", 19419 "resetFilter": "Réinitialiser", 19420 "sumText": "Somme", 19421 "showAll": "Afficher tout", 19422 "grabbed": "Attrapé", 19423 "dropped": "Abandonné", 19424 "settings": "Paramètres", 19425 "movePosition": "Déplacé vers la position {index}", 19426 "changeOrder": "Modifier lâordre de {columnName}", 19427 "columnSettings": "Paramètres des colonnes", 19428 "sortNormal": "Trier {columnName}", 19429 "sortAsc": "Trier {columnName} par ordre croissant", 19430 "sortDes": "Trier {columnName} par ordre décroissant", 19431 "selectRowTemp": "Sélectionner la ligne {index}, {columnName} : {content}", 19432 "changeOrderTemp": "Modifier lâordre de la ligne {index}, {columnName} : {content}", 19433 "moreOptionsTemp": "Plus dâoptions sur la ligne {index}, {columnName} : {content}", 19434 "resetColumnSettings": "Réinitialiser les paramètres de la colonne", 19435 "savedSuccess": "Enregistrement réussi", 19436 "filterButton": "Filtrer par {columnName}", 19437 "filterPopoverTitle": "Filtrer la colonne {columnName}", 19438 "dragAndDropTip": "Appuyez sur Entrée/Espace pour saisir/déposer, appuyer sur les flèches haut/bas pour se déplacer", 19439 "sortAsc1": "Trier {columnName} par ordre croissant", 19440 "sortDes1": "Trier {columnName}, par ordre décroissant", 19441 "sortAsc2": "Ascendant", 19442 "sortDes2": "Descendant", 19443 "sortNormal2": "Tri" 19444 } 19445 }, 19446 "id-ID": { 19447 "table": { 19448 "emptyText": "Tidak Ada Data", 19449 "confirmFilter": "Konfirmasi", 19450 "resetFilter": "Atur ulang", 19451 "sumText": "Jumlah", 19452 "showAll": "Tampilkan semua", 19453 "grabbed": "Diambil", 19454 "dropped": "Dilepas", 19455 "settings": "Pengaturan", 19456 "movePosition": "Pindah ke posisi {index}", 19457 "changeOrder": "Ubah urutan dari {columnName}", 19458 "columnSettings": "Pengaturan kolom", 19459 "sortNormal": "Urutkan {columnName}", 19460 "sortAsc": "Urutkan {columnName} dalam secara menaik", 19461 "sortDes": "Urutkan {columnName} dalam secara menurun", 19462 "selectRowTemp": "Pilih Baris {index}, {columnName}: {content}", 19463 "changeOrderTemp": "Ubah urutan Baris {index}, {columnName}: {content}", 19464 "moreOptionsTemp": "Pilihan lainnya tentang Baris {index}, {columnName}: {content}", 19465 "resetColumnSettings": "Atur ulang pengaturan kolom", 19466 "savedSuccess": "Berhasil disimpan", 19467 "filterButton": "Filter berdasarkan {columnName}", 19468 "filterPopoverTitle": "Filter kolom {columnName}", 19469 "dragAndDropTip": "Tekan Enter/Spasi untuk mengambil/meletakkan, tekan panah atas/bawah untuk memindahkan", 19470 "sortAsc1": "Urutkan {columnName}, diurutkan secara menaik", 19471 "sortDes1": "Urutkan {columnName}, diurutkan secara menurun", 19472 "sortAsc2": "Menaik", 19473 "sortDes2": "Menurun", 19474 "sortNormal2": "Pengurutan" 19475 } 19476 }, 19477 "it-IT": { 19478 "table": { 19479 "emptyText": "Nessun dato", 19480 "confirmFilter": "Conferma", 19481 "resetFilter": "Reimposta", 19482 "sumText": "Somma", 19483 "showAll": "Mostra tutto", 19484 "grabbed": "Afferrato", 19485 "dropped": "Rilasciato", 19486 "settings": "Impostazioni", 19487 "movePosition": "Sposta in posizione {index}", 19488 "changeOrder": "Cambia lâordine di {columnName}", 19489 "columnSettings": "Impostazioni di colonna", 19490 "sortNormal": "Ordina {columnName}", 19491 "sortAsc": "Ordina {columnName} con criterio crescente", 19492 "sortDes": "Ordina {columnName} con criterio decrescente", 19493 "selectRowTemp": "Seleziona riga {index}, {columnName}: {content}", 19494 "changeOrderTemp": "Cambia ordine della riga {index}, {columnName}: {content}", 19495 "moreOptionsTemp": "Altre opzioni su riga {index}, {columnName}: {content}", 19496 "resetColumnSettings": "Reimposta impostazioni di colonna", 19497 "savedSuccess": "Salvataggio riuscito", 19498 "filterButton": "Filtra per {columnName}", 19499 "filterPopoverTitle": "Filtra la colonna {columnName}", 19500 "dragAndDropTip": "Premi Invio o la barra spaziatrice per afferrare/rilasciare, premi la freccia su/giù per spostarti", 19501 "sortAsc1": "Ordina {columnName}, in ordine crescente", 19502 "sortDes1": "Ordina {columnName}, in ordine decrescente", 19503 "sortAsc2": "Crescente", 19504 "sortDes2": "Decrescente", 19505 "sortNormal2": "Ordinamento" 19506 } 19507 }, 19508 "jp-JP": { 19509 "table": {
19510 "emptyText": "ãã¼ã¿ãªã", 19511 "confirmFilter": "確èª", 19512 "resetFilter": "ãªã»ãã", 19513 "sumText": "åè¨", 19514 "showAll": "ãã¹ã¦è¡¨ç¤º", 19515 "grabbed": "ã°ã©ãããã¾ãã", 19516 "dropped": "ããããããã¾ãã", 19517 "settings": "è¨å®", 19518 "movePosition": "ä½ç½® {index} ã«ç§»å", 19519 "changeOrder": "{columnName} ã®é åºã夿´", 19520 "columnSettings": "åã®è¨å®", 19521 "sortNormal": "{columnName} ãã½ã¼ã", 19522 "sortAsc": "{columnName} ãæé ã«ã½ã¼ã", 19523 "sortDes": "{columnName} ãéé ã«ã½ã¼ã", 19524 "selectRowTemp": "è¡ {index}ï¼{columnName}: {content}ï¼ã鏿", 19525 "changeOrderTemp": "è¡ {index}ï¼{columnName}: {content}ï¼ã®é åºã夿´", 19526 "moreOptionsTemp": "è¡ {index}ï¼{columnName}: {content}ï¼ã«é¢ãããã®ä»ã®ãªãã·ã§ã³", 19527 "resetColumnSettings": "åã®è¨å®ããªã»ãã", 19528 "savedSuccess": "æ£å¸¸ã«ä¿åãã¾ãã", 19529 "filterButton": "{columnName} ã§ãã£ã«ã¿", 19530 "filterPopoverTitle": "{columnName} åããã£ã«ã¿", 19531 "dragAndDropTip": "Enter ãã¼ãã¹ãã¼ã¹ãã¼ãæ¼ãã¦ã°ã©ãã¾ãã¯ãããããä¸ä¸ã®ç¢å°ãã¼ãæ¼ãã¦ç§»å", 19532 "sortAsc1": "{columnName}ãæé ã«ä¸¦ã¹æ¿ã", 19533 "sortDes1": "{columnName}ãéé ã«ä¸¦ã¹æ¿ã", 19534 "sortAsc2": "æé ", 19535 "sortDes2": "éé ", 19536 "sortNormal2": "ä¸¦ã¹æ¿ã" 19537 } 19538 }, 19539 "ko-KO": { 19540 "table": { 19541 "emptyText": "ë°ì´í° ìì", 19542 "confirmFilter": "íì¸", 19543 "resetFilter": "ì¬ì¤ì ", 19544 "sumText": "í©ê³", 19545 "showAll": "모ë íì", 19546 "grabbed": "ì¡ììµëë¤", 19547 "dropped": "ëììµëë¤", 19548 "settings": "ì¤ì ", 19549 "movePosition": "{index} ìì¹ë¡ ì´ë", 19550 "changeOrder": "{columnName}ì ìì ë³ê²½", 19551 "columnSettings": "ì´ ì¤ì ", 19552 "sortNormal": "{columnName} ì ë ¬", 19553 "sortAsc": "ì¤ë¦ì°¨ìì¼ë¡ {columnName} ì ë ¬", 19554 "sortDes": "ë´ë¦¼ì°¨ìì¼ë¡ {columnName} ì ë ¬", 19555 "selectRowTemp": "í {index} ì í, {columnName}: {content}", 19556 "changeOrderTemp": "í {index}ì ìì ë³ê²½, {columnName}: {content}", 19557 "moreOptionsTemp": "í {index}ì ëí ì¶ê° ìµì , {columnName}: {content}", 19558 "resetColumnSettings": "ì´ ì¤ì ì¬ì¤ì ", 19559 "savedSuccess": "ì±ê³µì ì¼ë¡ ì ì¥ë¨", 19560 "filterButton": "{columnName}(ì¼)ë¡ íí°ë§", 19561 "filterPopoverTitle": "{columnName} ì´ íí°ë§", 19562 "dragAndDropTip": "Enter/ì¤íì´ì¤ë°ë¥¼ ëë¬ ë기/ë기, ì/ìë íì´í를 ëë¬ ì´ë", 19563 "sortAsc1": "{columnName} ì ë ¬, ì¤ë¦ì°¨ì ì ë ¬ë¨", 19564 "sortDes1": "{columnName} ì ë ¬, ë´ë¦¼ì°¨ì ì ë ¬ë¨", 19565 "sortAsc2": "ì¤ë¦ì°¨ì", 19566 "sortDes2": "ë´ë¦¼ì°¨ì", 19567 "sortNormal2": "ì ë ¬" 19568 } 19569 }, 19570 "nl-NL": { 19571 "table": { 19572 "emptyText": "Geen gegevens", 19573 "confirmFilter": "Bevestigen", 19574 "resetFilter": "Terugzetten", 19575 "sumText": "Som", 19576 "showAll": "Alles weergeven", 19577 "grabbed": "Vastgenomen", 19578 "dropped": "Neergezet", 19579 "settings": "Instellingen", 19580 "movePosition": "Verplaatsen naar positie {index}", 19581 "changeOrder": "De volgorde van {columnName} wijzigen", 19582 "columnSettings": "Kolominstellingen", 19583 "sortNormal": "{columnName} sorteren", 19584 "sortAsc": "{columnName} oplopend sorteren", 19585 "sortDes": "{columnName} aflopend sorteren", 19586 "selectRowTemp": "Selecteer rij {index}, {columnName}: {content}", 19587 "changeOrderTemp": "Volgorde wijzigen van rij {index}, {columnName}: {content}", 19588 "moreOptionsTemp": "Meer opties voor rij {index}, {columnName}: {content}", 19589 "resetColumnSettings": "Kolominstellingen terugzetten", 19590 "savedSuccess": "Opgeslagen", 19591 "filterButton": "Filteren op {columnName}", 19592 "filterPopoverTitle": "De kolom {columnName} filteren", 19593 "dragAndDropTip": "Druk op Enter/spatiebalk om te grijpen/neer te zetten, druk op de pijltoets omhoog/omlaag om te verplaatsen", 19594 "sortAsc1": "Sorteren op {columnName}, oplopend gesorteerd", 19595 "sortDes1": "Sorteren op {columnName}, aflopend gesorteerd", 19596 "sortAsc2": "Oplopend", 19597 "sortDes2": "Aflopend", 19598 "sortNormal2": "Sorteren" 19599 } 19600 }, 19601 "pl-PL": { 19602 "table": { 19603 "emptyText": "Brak danych", 19604 "confirmFilter": "Potwierdź", 19605 "resetFilter": "Zresetuj", 19606 "sumText": "Suma", 19607 "showAll": "Pokaż wszystko", 19608 "grabbed": "Chwycono", 19609 "dropped": "Upuszczono", 19610 "settings": "Ustawienia", 19611 "movePosition": "Przeniesiono na pozycjÄ {index}", 19612 "changeOrder": "ZmieÅ kolejnoÅÄ kolumny {columnName}", 19613 "columnSettings": "Ustawienia kolumn", 19614 "sortNormal": "Sortuj wg {columnName}", 19615 "sortAsc": "Sortuj wg {columnName} rosnÄ co", 19616 "sortDes": "Sortuj wg {columnName} malejÄ co", 19617 "selectRowTemp": "Wybierz wiersz {index}, {columnName}: {content}", 19618 "changeOrderTemp": "ZmieÅ kolejnoÅÄ wiersza {index}, {columnName}: {content}", 19619 "moreOptionsTemp": "WiÄcej opcji dotyczÄ cych wiersza {index}, {columnName}: {content}", 19620 "resetColumnSettings": "Resetowanie ustawieÅ kolumn", 19621 "savedSuccess": "Zapisano pomyÅlnie", 19622 "filterButton": "Filtruj wedÅug {columnName}", 19623 "filterPopoverTitle": "Filtruj kolumnÄ {columnName}", 19624 "dragAndDropTip": "NaciÅnij Enter/SpacjÄ, aby chwyciÄ/upuÅciÄ, naciÅnij strzaÅkÄ w górÄ/w dóÅ, aby przesunÄ Ä", 19625 "sortAsc1": "Sortuj kolumnÄ {columnName}, posortowano rosnÄ co", 19626 "sortDes1": "Sortuj kolumnÄ {columnName}, posortowano malejÄ co", 19627 "sortAsc2": "RosnÄ co", 19628 "sortDes2": "MalejÄ co", 19629 "sortNormal2": "Sortowanie" 19630 } 19631 }, 19632 "pt-PT": { 19633 "table": { 19634 "emptyText": "Sem dados", 19635 "confirmFilter": "Confirmar", 19636 "resetFilter": "Redefinir", 19637 "sumText": "Soma", 19638 "showAll": "Mostrar tudo", 19639 "grabbed": "Agarrou", 19640 "dropped": "Soltou", 19641 "settings": "Configurações", 19642 "movePosition": "Mover para a posição {index}", 19643 "changeOrder": "Alterar ordem de {columnName}", 19644 "columnSettings": "Configuração da coluna", 19645 "sortNormal": "Classificar {columnName}", 19646 "sortAsc": "Classificar {columnName} em ordem crescente", 19647 "sortDes": "Classificar {columnName} em ordem decrescente", 19648 "selectRowTemp": "Selecione a linha {index}, {columnName}: {content}", 19649 "changeOrderTemp": "Altere a ordem da linha {index}, {columnName}: {content}", 19650 "moreOptionsTemp": "Mais opções sobre a linha {index}, {columnName}: {content}", 19651 "resetColumnSettings": "Redefinir as configurações da coluna", 19652 "savedSuccess": "Salvo com sucesso", 19653 "filterButton": "Filtrar por {columnName}", 19654 "filterPopoverTitle": "Filtrar a coluna {columnName}", 19655 "dragAndDropTip": "Pressione Enter/Espaço para agarrar/soltar, pressione a seta para cima/para baixo para mover", 19656 "sortAsc1": "Classificar {columnName}, classificado em ordem crescente", 19657 "sortDes1": "Classificar {columnName}, classificado em ordem decrescente", 19658 "sortAsc2": "Crescente", 19659 "sortDes2": "Decrescente", 19660 "sortNormal2": "Classificação" 19661 } 19662 }, 19663 "ru-RU": { 19664 "table": { 19665 "emptyText": "ÐÐµÑ Ð´Ð°Ð½Ð½ÑÑ ", 19666 "confirmFilter": "ÐодÑвеÑдиÑÑ", 19667 "resetFilter": "СбÑоÑиÑÑ", 19668 "sumText": "СÑмма", 19669 "showAll": "ÐоказаÑÑ Ð²Ñе", 19670 "grabbed": "ÐÐ°Ñ Ð²Ð°Ñено", 19671 "dropped": "ÐеÑемеÑение завеÑÑено", 19672 "settings": "ÐаÑÑÑойки", 19673 "movePosition": "ÐеÑемеÑÑиÑÑ Ð½Ð° позиÑÐ¸Ñ {index}", 19674 "changeOrder": "ÐзмениÑÑ Ð¿Ð¾Ð»Ð¾Ð¶ÐµÐ½Ð¸Ðµ ÑÑолбÑа «{columnName}»", 19675 "columnSettings": "ÐаÑÑÑойки ÑÑолбÑа", 19676 "sortNormal": "СоÑÑиÑовка: {columnName}", 19677 "sortAsc": "УпоÑÑдоÑиÑÑ ÑÑÐ¾Ð»Ð±ÐµÑ Â«{columnName}» по возÑаÑÑаниÑ", 19678 "sortDes": "УпоÑÑдоÑиÑÑ ÑÑÐ¾Ð»Ð±ÐµÑ Â«{columnName}» по ÑбÑваниÑ", 19679 "selectRowTemp": "ÐÑбÑаÑÑ ÑÑÑÐ¾ÐºÑ {index}, {columnName}: {content}", 19680 "changeOrderTemp": "ÐзмениÑÑ Ð¿Ð¾Ð»Ð¾Ð¶ÐµÐ½Ð¸Ðµ ÑÑÑоки {index}, {columnName}: {content}", 19681 "moreOptionsTemp": "ÐополниÑелÑнÑе наÑÑÑойки Ð´Ð»Ñ ÑÑÑоки {index}, {columnName}: {content}", 19682 "resetColumnSettings": "СбÑоÑиÑÑ Ð½Ð°ÑÑÑойки ÑÑолбÑов", 19683 "savedSuccess": "Ð¡Ð¾Ñ Ñанено",
19684 "filterButton": "ФилÑÑÑ: {columnName}", 19685 "filterPopoverTitle": "ФилÑÑÑоваÑÑ Ð¿Ð¾ ÑÑолбÑÑ Â«{columnName}»", 19686 "dragAndDropTip": "ÐажмиÑе «Enter» или пÑобел, ÑÑÐ¾Ð±Ñ Ð¿ÐµÑеÑаÑиÑÑ; иÑполÑзÑйÑе клавиÑи Ñо ÑÑÑелками ввеÑÑ /вниз, ÑÑÐ¾Ð±Ñ Ð¿ÐµÑемеÑÑиÑÑ", 19687 "sortAsc1": "СоÑÑиÑовка по {columnName}, оÑÑоÑÑиÑовано по возÑаÑÑаниÑ", 19688 "sortDes1": "СоÑÑиÑовка {columnName}, по ÑбÑваниÑ", 19689 "sortAsc2": "Ðо возÑаÑÑаниÑ", 19690 "sortDes2": "Ðо ÑбÑваниÑ", 19691 "sortNormal2": "СоÑÑиÑовка" 19692 } 19693 }, 19694 "sv-SE": { 19695 "table": { 19696 "emptyText": "Inga data", 19697 "confirmFilter": "Bekräfta", 19698 "resetFilter": "à terställ", 19699 "sumText": "Summa", 19700 "showAll": "Visa alla", 19701 "grabbed": "Greppade", 19702 "dropped": "Tappade", 19703 "settings": "Inställningar", 19704 "movePosition": "Flyttades till position {index}", 19705 "changeOrder": "Ãndra ordning pÃ¥ {columnName}", 19706 "columnSettings": "Kolumninställningar", 19707 "sortNormal": "Sortera {columnName}", 19708 "sortAsc": "Sortera {columnName} i stigande ordning", 19709 "sortDes": "Sortera {columnName} i fallande ordning", 19710 "selectRowTemp": "Välj rad {index}, {columnName}: {content}", 19711 "changeOrderTemp": "Ãndra ordning pÃ¥ rad {index}, {columnName}: {content}", 19712 "moreOptionsTemp": "Fler alternativ för rad {index}, {columnName}: {content}", 19713 "resetColumnSettings": "à terställ kolumninställningar", 19714 "savedSuccess": "Har sparats", 19715 "filterButton": "Filtrera efter {columnName}", 19716 "filterPopoverTitle": "Filtrera kolumnen {columnName}", 19717 "dragAndDropTip": "Tryck pÃ¥ Enter/Space för att greppa/släppa, tryck pÃ¥ pil upp/ner för att flytta", 19718 "sortAsc1": "Sortera {columnName}, sorterad i stigande ordning", 19719 "sortDes1": "Sortera {columnName}, sorterad i fallande ordning", 19720 "sortAsc2": "Stigande", 19721 "sortDes2": "Fallande", 19722 "sortNormal2": "Sortering" 19723 } 19724 }, 19725 "tr-TR": { 19726 "table": { 19727 "emptyText": "Veri yok", 19728 "confirmFilter": "Onayla", 19729 "resetFilter": "Sıfırla", 19730 "sumText": "Topl.", 19731 "showAll": "Tümünü göster", 19732 "grabbed": "Yakalandı", 19733 "dropped": "Bırakıldı", 19734 "settings": "Ayarlar", 19735 "movePosition": "{index} konumuna taÅı", 19736 "changeOrder": "{columnName} sütununun sırasını deÄiÅtir", 19737 "columnSettings": "Sütun ayarları", 19738 "sortNormal": "{columnName} ögesini sırala", 19739 "sortAsc": "{columnName} ögesini artan düzende sırala", 19740 "sortDes": "{columnName} ögesini azalan düzende sırala", 19741 "selectRowTemp": "Satır {index} seç, {columnName}: {content}", 19742 "changeOrderTemp": "Satır {index} sırasını deÄiÅtir, {columnName}: {content}", 19743 "moreOptionsTemp": "Satır {index} hakkında daha fazla seçenek, {columnName}: {content}", 19744 "resetColumnSettings": "Sütun ayarlarını sıfırla", 19745 "savedSuccess": "BaÅarıyla kaydedildi", 19746 "filterButton": "Filtreleme ölçütü: {columnName}", 19747 "filterPopoverTitle": "{columnName} sütununu filtrele", 19748 "dragAndDropTip": "Yakalamak/bırakmak için Enter/BoÅluk (Space) tuÅuna, hareket ettirmek için yukarı/aÅaÄı oka basın", 19749 "sortAsc1": "{columnName} sıralama, artan düzende sıralanır", 19750 "sortDes1": "{columnName} sıralama, azalan düzende sıralanır", 19751 "sortAsc2": "Artan", 19752 "sortDes2": "Azalan", 19753 "sortNormal2": "Sıralama" 19754 } 19755 }, 19756 "vi-VN": { 19757 "table": { 19758 "emptyText": "Không có dữ liá»u", 19759 "confirmFilter": "Xác nháºn", 19760 "resetFilter": "Äặt lại", 19761 "sumText": "Tá»ng cá»ng", 19762 "showAll": "Hiá»n thá» tất cả", 19763 "grabbed": "Hiá»u rá»i", 19764 "dropped": "Äã thả", 19765 "settings": "Cà i Äặt", 19766 "movePosition": "Chuyá»n sang vá» trà {index}", 19767 "changeOrder": "Thay Äá»i thứ tá»± cá»§a {columnName}", 19768 "columnSettings": "Cà i Äặt cá»t", 19769 "sortNormal": "Sắp xếp {columnName}", 19770 "sortAsc": "Sắp xếp {columnName} theo thứ tá»± A-Z", 19771 "sortDes": "Sắp xếp {columnName} theo thứ tá»± Z-A", 19772 "selectRowTemp": "Chá»n hà ng {index}, {columnName}: {content}", 19773 "changeOrderTemp": "Thay Äá»i thứ tá»± cá»§a Hà ng {index}, {columnName}: {content}", 19774 "moreOptionsTemp": "Thêm tùy chá»n vá» Hà ng {index}, {columnName}: {content}", 19775 "resetColumnSettings": "Äặt lại cà i Äặt cá»t", 19776 "savedSuccess": "Lưu thà nh công", 19777 "filterButton": "Lá»c theo {columnName}", 19778 "filterPopoverTitle": "Lá»c cá»t {columnName}", 19779 "dragAndDropTip": "Nhấn Enter/Space Äá» nắm/thả, nhấn mÅ©i tên lên/xuá»ng Äá» di chuyá»n", 19780 "sortAsc1": "Sắp xếp {columnName}, theo thứ tá»± tÄng dần", 19781 "sortDes1": "Sắp xếp {columnName}, theo thứ tá»± giảm dần", 19782 "sortAsc2": "TÄng dần", 19783 "sortDes2": "Giảm dần", 19784 "sortNormal2": "Sắp xếp" 19785 } 19786 }, 19787 "zh-CN": { 19788 "table": { 19789 "emptyText": "æ æ°æ®", 19790 "confirmFilter": "确认", 19791 "resetFilter": "éç½®", 19792 "sumText": "æ»å", 19793 "showAll": "æ¾ç¤ºå ¨é¨", 19794 "grabbed": "å·²æå", 19795 "dropped": "å·²æ¾ä¸", 19796 "settings": "设置", 19797 "movePosition": "ç§»å¨å°ä½ç½®{index}", 19798 "changeOrder": "æ´æ¹{columnName}ç顺åº", 19799 "columnSettings": "å设置", 19800 "sortNormal": "æåº{columnName}", 19801 "sortAsc": "对{columnName}æååºæåº", 19802 "sortDes": "对{columnName}æéåºæåº", 19803 "selectRowTemp": "éæ©ç¬¬{index}è¡ï¼{columnName}ï¼{content}", 19804 "changeOrderTemp": "æ´æ¹ç¬¬{index}è¡ç顺åºï¼{columnName}ï¼{content}", 19805 "moreOptionsTemp": "å ³äºç¬¬{index}è¡çæ´å¤é项ï¼{columnName}ï¼{content}", 19806 "resetColumnSettings": "éç½®å设置", 19807 "savedSuccess": "ä¿åæå", 19808 "filterButton": "æ{columnName}çé", 19809 "filterPopoverTitle": "çé{columnName}å", 19810 "dragAndDropTip": "æå车é®/ç©ºæ ¼é®å¯æå/æ¾ä¸ï¼æä¸/ä¸ç®å¤´å¯ç§»å¨", 19811 "sortAsc1": "å°{columnName}
19811æåºï¼æååºæåº", 19812 "sortDes1": "å°{columnName}æåºï¼æéåºæåº", 19813 "sortAsc2": "ååº", 19814 "sortDes2": "éåº", 19815 "sortNormal2": "æåº" 19816 } 19817 }, 19818 "zh-TW": { 19819 "table": { 19820 "emptyText": "ç¡è³æ", 19821 "confirmFilter": "確èª", 19822 "resetFilter": "éè¨", 19823 "sumText": "總å", 19824 "showAll": "é¡¯ç¤ºå ¨é¨", 19825 "grabbed": "å·²æå", 19826 "dropped": "å·²æ¾ä¸", 19827 "settings": "è¨å®", 19828 "movePosition": "ç§»åè³ä½ç½®{index}", 19829 "changeOrder": "è®æ´{columnName}çé åº", 19830 "columnSettings": "æ¬è¨å®", 19831 "sortNormal": "æåº{columnName}", 19832 "sortAsc": "ä¾éå¢é åºæåº{columnName}", 19833 "sortDes": "ä¾éæ¸é åºæåº{columnName}", 19834 "selectRowTemp": "é¸å第{index}åï¼{columnName}ï¼{content}", 19835 "changeOrderTemp": "è®æ´ç¬¬{index}åçé åºï¼{columnName}ï¼{content}", 19836 "moreOptionsTemp": "éæ¼ç¬¬{index}åçæ´å¤é¸é ï¼{columnName}ï¼{content}", 19837 "resetColumnSettings": "éè¨æ¬è¨å®", 19838 "savedSuccess": "å²åæå", 19839 "filterButton": "ä¾{columnName}篩é¸", 19840 "filterPopoverTitle": "篩é¸{columnName}æ¬", 19841 "dragAndDropTip": "æä¸Enter/ç©ºæ ¼éµå¯æå/æ¾ä¸ï¼æä¸ä¸/ä¸ç®èå¯ç§»å", 19842 "sortAsc1": "æåº{columnName}ï¼é墿åº", 19843 "sortDes1": "æåº{columnName}ï¼éæ¸æåº", 19844 "sortAsc2": "éå¢", 19845 "sortDes2": "鿏", 19846 "sortNormal2": "æåº" 19847 } 19848 } 19849}; 19850const defaultProps$9 = { 19851 placement: { 19852 type: String, 19853 default: "bottom-start" 19854 }, 19855 column: Object, 19856 upDataColumn: Function 19857}; 19858const _sfc_main$l = defineComponent({ 19859 name: "ZmFilterPanel", 19860 components: { 19861 ZmPopover: _sfc_main$v, 19862 ZmScrollbar: _sfc_main$V, 19863 ZmCheckbox: _sfc_main$O, 19864 ZmCheckboxGroup: _sfc_main$N, 19865 ZmButton: _sfc_main$_ 19866 }, 19867 props: defaultProps$9, 19868 setup(props) { 19869 const instance = getCurrentInstance(); 19870 const owner = inject(TABLE_INJECTION_KEY); 19871 const ns = useNamespace("table-filter"); 19872 const { t } = useLocale(messages$4); 19873 const popoverRef = ref(); 19874 if (!owner.store.states.filterPanels.value[props.column.id]) { 19875 owner.store.states.filterPanels.value[props.column.id] = instance; 19876 } 19877 const arialLabel = computed(() => { 19878 return t("table.filterPopoverTitle", { columnName: props.column.label }); 19879 }); 19880 const triggerBtnArialLabel = computed(() => { 19881 return t("table.filterButton", { columnName: props.column.label }); 19882 }); 19883 const filters = computed(() => { 19884 return props.column && props.column.filters; 19885 }); 19886 const filteredValue = computed({ 19887 get() { 19888 return props.column.filteredValue || []; 19889 }, 19890 set(value) { 19891 props.upDataColumn("filteredValue", value); 19892 } 19893 }); 19894 const handleConfirm = () => { 19895 confirmFilter(filteredValue.value); 19896 hidden(); 19897 }; 19898 const handleReset = () => { 19899 filteredValue.value = []; 19900 confirmFilter(filteredValue.value); 19901 hidden(); 19902 }; 19903 const confirmFilter = (filteredValue2) => { 19904 owner.store.commit("filterChange", { 19905 column: props.column, 19906 values: filteredValue2 19907 }); 19908 }; 19909 const hidden = () => { 19910 var _a; 19911 (_a = popoverRef.value) == null ? void 0 : _a.close(); 19912 }; 19913 return { 19914 FilterV2, 19915 arialLabel, 19916 triggerBtnArialLabel, 19917 ns, 19918 filters, 19919 filteredValue, 19920 popoverRef, 19921 t, 19922 handleReset, 19923 handleConfirm 19924 }; 19925 } 19926}); 19927function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) { 19928 const _component_zm_button = resolveComponent("zm-button"); 19929 const _component_zm_checkbox = resolveComponent("zm-checkbox"); 19930 const _component_zm_checkbox_group = resolveComponent("zm-checkbox-group"); 19931 const _component_zm_scrollbar = resolveComponent("zm-scrollbar"); 19932 const _component_zm_popover = resolveComponent("zm-popover"); 19933 return openBlock(), createBlock(_component_zm_popover, { 19934 ref: "popoverRef", 19935 placement: _ctx.placement, 19936 "floating-options": { 19937 arrow: false, 19938 offsetOptions: 4 19939 }, 19940 "floating-content-class": _ctx.ns.e("popover"),
19941 "aria-label": _ctx.arialLabel 19942 }, { 19943 content: withCtx(() => [ 19944 createBaseVNode("div", { 19945 class: normalizeClass(_ctx.ns.e("content")) 19946 }, [ 19947 createVNode(_component_zm_scrollbar, { 19948 "wrap-class": _ctx.ns.e("wrap"), 19949 "wrap-style": { maxHeight: "200px" } 19950 }, { 19951 default: withCtx(() => [ 19952 createVNode(_component_zm_checkbox_group, { 19953 modelValue: _ctx.filteredValue, 19954 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.filteredValue = $event), 19955 class: normalizeClass(_ctx.ns.e("checkbox-group")), 19956 vertical: "" 19957 }, { 19958 default: withCtx(() => [ 19959 (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.filters, (filter) => { 19960 return openBlock(), createBlock(_component_zm_checkbox, { 19961 key: filter.value, 19962 label: filter.value 19963 }, { 19964 default: withCtx(() => [ 19965 createTextVNode(toDisplayString(filter.text), 1) 19966 ]), 19967 _: 2 19968 }, 1032, ["label"]); 19969 }), 128)) 19970 ]), 19971 _: 1 19972 }, 8, ["modelValue", "class"]) 19973 ]), 19974 _: 1 19975 }, 8, ["wrap-class"]) 19976 ], 2) 19977 ]), 19978 action: withCtx(() => [ 19979 createVNode(_component_zm_button, { onClick: _ctx.handleReset }, { 19980 default: withCtx(() => [ 19981 createTextVNode(toDisplayString(_ctx.t("table.resetFilter")), 1) 19982 ]), 19983 _: 1 19984 }, 8, ["onClick"]), 19985 createVNode(_component_zm_button, { 19986 disabled: _ctx.filteredValue.length === 0, 19987 type: "primary", 19988 onClick: _ctx.handleConfirm 19989 }, { 19990 default: withCtx(() => [ 19991 createTextVNode(toDisplayString(_ctx.t("table.confirmFilter")), 1) 19992 ]), 19993 _: 1 19994 }, 8, ["disabled", "onClick"]) 19995 ]), 19996 default: withCtx(() => [ 19997 createVNode(_component_zm_button, { 19998 icon: _ctx.FilterV2, 19999 type: "tertiary", 20000 size: "sm", 20001 "aria-label": _ctx.triggerBtnArialLabel, 20002 tabindex: "-1" 20003 }, null, 8, ["icon", "aria-label"]) 20004 ]), 20005 _: 1 20006 }, 8, ["placement", "floating-content-class", "aria-label"]); 20007} 20008const FilterPanel = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$4]]); 20009const _sfc_main$k = defineComponent({ 20010 name: "ZmColumnPanel", 20011 components: { 20012 ZmPopover: _sfc_main$v, 20013 ZmScrollbar: _sfc_main$V, 20014 ZmToggle: _sfc_main$A, 20015 ZmButton: _sfc_main$_, 20016 ZmLink: _sfc_main$U, 20017 ZmTooltip: _sfc_main$I, 20018 ZmVisuallyHidden, 20019 Draggable 20020 }, 20021 setup() { 20022 const ns = useNamespace("table-column-setting"); 20023 const owner = inject(TABLE_INJECTION_KEY); 20024 const initDisplayedColumn = owner.store.states.initDisplayedColumn; 20025 const displayedProps = owner.store.states.displayedProps; 20026 const { t } = useLocale(messages$4); 20027 const ariaDescribedby = useId(); 20028 const toggles = ref({}); 20029 const popoverRef = ref(); 20030 const columnList = ref([]); 20031 const movable = computed(() => { 20032 return initDisplayedColumn.value.movable; 20033 }); 20034 const tip = computed(() => { 20035 return initDisplayedColumn.value.tip; 20036 }); 20037 const title = computed(() => { 20038 return initDisplayedColumn.value.title; 20039 }); 20040 const link = computed(() => { 20041 return initDisplayedColumn.value.link; 20042 }); 20043 const showPopover = () => { 20044 const list = owner.store.getColumnList(); 20045 list.forEach((column) => { 20046 toggles.value[column.label] = displayedProps.value.indexOf(column.label) > -1; 20047 }); 20048 columnList.value = list; 20049 }; 20050 const handleShowAll = () => { 20051 const list = owner.store.getColumnList(); 20052 list.forEach((column) => { 20053 toggles.value[column.label] = true; 20054 }); 20055 }; 20056 const handleReset = () => { 20057 owner.store.resetColumnSetting(); 20058 announce(t("table.resetColumnSettings")); 20059 hidden(); 20060 }; 20061 const handleConfirm = () => { 20062 owner.store.updateColumnSetting(getDisplayedProps(), columnList.value); 20063 owner.refs.scrollBarRef.scrollToLeft(); 20064 announce(t("table.savedSuccess")); 20065 hidden(); 20066 }; 20067 const getDisplayedProps = () => { 20068 const ret = []; 20069 Object.keys(toggles.value).forEach((prop) => { 20070 if (toggles.value[prop]) {
20071 ret.push(prop); 20072 } 20073 }); 20074 return ret; 20075 }; 20076 const hidden = () => { 20077 var _a; 20078 (_a = popoverRef.value) == null ? void 0 : _a.close(); 20079 }; 20080 const handleKeyDown = (event, index2) => { 20081 const code = event.code; 20082 const isEdit = columnList.value[index2].isEdit; 20083 const len = columnList.value.length; 20084 switch (code) { 20085 case EVENT_CODE.up: 20086 if (index2 > 0) { 20087 if (isEdit) { 20088 swap$1(columnList.value, index2, index2 - 1); 20089 announceMoved(index2 - 1); 20090 nextTick(() => { 20091 event.target.focus(); 20092 }); 20093 } 20094 } 20095 event.preventDefault(); 20096 break; 20097 case EVENT_CODE.down: 20098 if (index2 < len - 1) { 20099 if (isEdit) { 20100 swap$1(columnList.value, index2, index2 + 1); 20101 announceMoved(index2 + 1); 20102 nextTick(() => { 20103 event.target.focus(); 20104 }); 20105 } 20106 } 20107 event.preventDefault(); 20108 break; 20109 case EVENT_CODE.enter: 20110 case EVENT_CODE.space: 20111 case EVENT_CODE.numpadEnter: 20112 resetColumnListEdit(); 20113 columnList.value[index2].isEdit = !isEdit; 20114 announce(!isEdit ? t("table.grabbed") : t("table.dropped")); 20115 break; 20116 } 20117 }; 20118 const resetColumnListEdit = () => { 20119 columnList.value.forEach((column) => { 20120 column.isEdit = false; 20121 }); 20122 }; 20123 const getDragIcon = (column) => { 20124 return column.isEdit ? Checkmark : DragHandleDots; 20125 }; 20126 const getAriaLabel = (column) => { 20127 return t("table.changeOrder", { columnName: column.displayName }); 20128 }; 20129 const announceMoved = (index2) => { 20130 if (columnList.value[index2].isEdit) { 20131 announce(t("table.movePosition", { index: index2 + 1 })); 20132 } 20133 }; 20134 return { 20135 Setting, 20136 Information, 20137 ns, 20138 popoverRef, 20139 movable, 20140 tip, 20141 title, 20142 link, 20143 columnList, 20144 toggles, 20145 ariaDescribedby, 20146 t, 20147 showPopover, 20148 handleShowAll, 20149 handleReset, 20150 handleConfirm, 20151 handleKeyDown, 20152 getDragIcon, 20153 getAriaLabel 20154 }; 20155 } 20156}); 20157function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) { 20158 const _component_zm_button = resolveComponent("zm-button"); 20159 const _component_zm_tooltip = resolveComponent("zm-tooltip"); 20160 const _component_zm_toggle = resolveComponent("zm-toggle"); 20161 const _component_draggable = resolveComponent("draggable"); 20162 const _component_zm_scrollbar = resolveComponent("zm-scrollbar"); 20163 const _component_zm_link = resolveComponent("zm-link"); 20164 const _component_zm_visually_hidden = resolveComponent("zm-visually-hidden"); 20165 const _component_zm_popover = resolveComponent("zm-popover"); 20166 return openBlock(), createBlock(_component_zm_tooltip, { 20167 disabled: !_ctx.title, 20168 content: _ctx.title, 20169 "disallow-learn-about": "", 20170 placement: "top", 20171 arrow: false 20172 }, { 20173 default: withCtx(() => [ 20174 createVNode(_component_zm_popover, { 20175 ref: "popoverRef", 20176 placement: "bottom-end", 20177 "aria-label": _ctx.t("table.settings"), 20178 "floating-content-class": _ctx.ns.e("popover"), 20179 "floating-options": { 20180 arrow: false, 20181 offsetOptions: 4 20182 }, 20183 "arrow-key": "", 20184 onBeforeShow: _ctx.showPopover 20185 }, { 20186 content: withCtx(() => [ 20187 createVNode(_component_zm_scrollbar, { 20188 "wrap-class": _ctx.ns.e("wrapper"), 20189 "wrap-style": { maxHeight: "200px" } 20190 }, { 20191 default: withCtx(() => [ 20192 _ctx.movable ? (openBlock(), createBlock(_component_draggable, { 20193 key: 0, 20194 modelValue: _ctx.columnList, 20195 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.columnList = $event), 20196 animation: "200", 20197 "ghost-class": "ghost-background-class", 20198 "item-key": "label" 20199 }, { 20200 item: withCtx(({ element: column, index: index2 }) => [ 20201 createBaseVNode("div", { 20202 class: normalizeClass(_ctx.ns.e("item")) 20203 }, [ 20204 _ctx.movable ? (openBlock(), createElementBlock("div", { 20205 key: 0, 20206 class: normalizeClass(_ctx.ns.e("item-movable")) 20207 }, [ 20208 createVNode(_component_zm_button, { 20209 type: "tertiary", 20210 icon: _ctx.getDragIcon(column), 20211 "aria-label": _ctx.getAriaLabel(column), 20212 "aria-describedby": _ctx.ariaDescribedby, 20213 onKeydown: (e) => { 20214 _ctx.handleKeyDown(e, index2); 20215 } 20216 }, null, 8, ["icon", "aria-label", "aria-describedby", "onKeydown"]) 20217 ], 2)) : createCommentVNode("", true), 20218 createBaseVNode("div", { 20219 class: normalizeClass(_ctx.ns.e("item-prop")) 20220 }, [ 20221 createTextVNode(toDisplayString(column.displayName) + " ", 1), 20222 _ctx.tip && _ctx.tip[column.label] ? (openBlock(), createElementBlock("div", { 20223 key: 0, 20224 class: normalizeClass(_ctx.ns.e("item-tip")) 20225 }, [ 20226 createVNode(_component_zm_tooltip, {
20227 arrow: false, 20228 placement: "top" 20229 }, { 20230 content: withCtx(() => [ 20231 createBaseVNode("p", null, toDisplayString(_ctx.tip[column.label]), 1) 20232 ]), 20233 default: withCtx(() => [ 20234 createVNode(_component_zm_button, { 20235 icon: _ctx.Information, 20236 type: "tertiary", 20237 "aria-label": column.displayName 20238 }, null, 8, ["icon", "aria-label"]) 20239 ]), 20240 _: 2 20241 }, 1024) 20242 ], 2)) : createCommentVNode("", true) 20243 ], 2), 20244 createBaseVNode("div", { 20245 class: normalizeClass(_ctx.ns.e("item-toggle")) 20246 }, [ 20247 createVNode(_component_zm_toggle, { 20248 modelValue: _ctx.toggles[column.label], 20249 "onUpdate:modelValue": ($event) => _ctx.toggles[column.label] = $event, 20250 size: "sm", 20251 "aria-label": column.displayName 20252 }, null, 8, ["modelValue", "onUpdate:modelValue", "aria-label"]) 20253 ], 2) 20254 ], 2) 20255 ]), 20256 _: 1 20257 }, 8, ["modelValue"])) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.columnList, (column) => { 20258 return openBlock(), createElementBlock("div", { 20259 key: column.label, 20260 class: normalizeClass(_ctx.ns.e("item")) 20261 }, [ 20262 createBaseVNode("div", { 20263 class: normalizeClass(_ctx.ns.e("item-prop")) 20264 }, [ 20265 createTextVNode(toDisplayString(column.displayName) + " ", 1), 20266 _ctx.tip && _ctx.tip[column.label] ? (openBlock(), createElementBlock("div", { 20267 key: 0, 20268 class: normalizeClass(_ctx.ns.e("item-tip")) 20269 }, [ 20270 createVNode(_component_zm_tooltip, { 20271 arrow: false, 20272 placement: "top" 20273 }, { 20274 content: withCtx(() => [ 20275 createBaseVNode("p", null, toDisplayString(_ctx.tip[column.label]), 1) 20276 ]), 20277 default: withCtx(() => [ 20278 createVNode(_component_zm_button, { 20279 icon: _ctx.Information, 20280 type: "tertiary", 20281 "aria-label": column.displayName 20282 }, null, 8, ["icon", "aria-label"]) 20283 ]), 20284 _: 2 20285 }, 1024) 20286 ], 2)) : createCommentVNode("", true) 20287 ], 2), 20288 createBaseVNode("div", { 20289 class: normalizeClass(_ctx.ns.e("item-toggle")) 20290 }, [ 20291 createVNode(_component_zm_toggle, { 20292 modelValue: _ctx.toggles[column.label], 20293 "onUpdate:modelValue": ($event) => _ctx.toggles[column.label] = $event, 20294 size: "sm", 20295 "aria-label": column.displayName 20296 }, null, 8, ["modelValue", "onUpdate:modelValue", "aria-label"]) 20297 ], 2) 20298 ], 2); 20299 }), 128)) 20300 ]), 20301 _: 1 20302 }, 8, ["wrap-class"]), 20303 _ctx.link ? (openBlock(), createElementBlock("div", { 20304 key: 0, 20305 class: normalizeClass(_ctx.ns.e("link")) 20306 }, [ 20307 createVNode(_component_zm_link, { 20308 href: _ctx.link.href, 20309 target: "_blank", 20310 standalone: "" 20311 }, { 20312 default: withCtx(() => [ 20313 createTextVNode(toDisplayString(_ctx.link.text), 1) 20314 ]), 20315 _: 1 20316 }, 8, ["href"]) 20317 ], 2)) : createCommentVNode("", true), 20318 createVNode(_component_zm_visually_hidden, { id: _ctx.ariaDescribedby }, { 20319 default: withCtx(() => [ 20320 createTextVNode(toDisplayString(_ctx.t("table.dragAndDropTip")), 1) 20321 ]), 20322 _: 1 20323 }, 8, ["id"]) 20324 ]), 20325 action: withCtx(() => [ 20326 createVNode(_component_zm_button, { 20327 type: "tertiary", 20328 onClick: _ctx.handleShowAll 20329 }, { 20330 default: withCtx(() => [ 20331 createTextVNode(toDisplayString(_ctx.t("table.showAll")), 1
20331) 20332 ]), 20333 _: 1 20334 }, 8, ["onClick"]), 20335 createVNode(_component_zm_button, { 20336 class: normalizeClass(_ctx.ns.e("reset-btn")), 20337 onClick: _ctx.handleReset 20338 }, { 20339 default: withCtx(() => [ 20340 createTextVNode(toDisplayString(_ctx.t("table.resetFilter")), 1) 20341 ]), 20342 _: 1 20343 }, 8, ["class", "onClick"]), 20344 createVNode(_component_zm_button, { 20345 type: "primary", 20346 onClick: _ctx.handleConfirm 20347 }, { 20348 default: withCtx(() => [ 20349 createTextVNode(toDisplayString(_ctx.t("table.confirmFilter")), 1) 20350 ]), 20351 _: 1 20352 }, 8, ["onClick"]) 20353 ]), 20354 default: withCtx(() => [ 20355 createVNode(_component_zm_button, { 20356 icon: _ctx.Setting, 20357 class: normalizeClass(_ctx.ns.e("trigger-btn")), 20358 type: "tertiary", 20359 size: "sm", 20360 "aria-label": _ctx.t("table.columnSettings"), 20361 tabindex: "-1" 20362 }, null, 8, ["icon", "class", "aria-label"]) 20363 ]), 20364 _: 1 20365 }, 8, ["aria-label", "floating-content-class", "onBeforeShow"]) 20366 ]), 20367 _: 1 20368 }, 8, ["disabled", "content"]); 20369} 20370const ColumnPanel = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$3]]); 20371const defaultProps$8 = { 20372 defaultSort: { 20373 type: Object, 20374 default: () => { 20375 return { 20376 prop: "", 20377 order: null 20378 }; 20379 } 20380 } 20381}; 20382var __async$c = (__this, __arguments, generator) => { 20383 return new Promise((resolve2, reject) => { 20384 var fulfilled = (value) => { 20385 try { 20386 step(generator.next(value)); 20387 } catch (e) { 20388 reject(e); 20389 } 20390 }; 20391 var rejected = (value) => { 20392 try { 20393 step(generator.throw(value)); 20394 } catch (e) { 20395 reject(e); 20396 } 20397 }; 20398 var step = (x) => x.done ? resolve2(x.value) : Promise.resolve(x.value).then(fulfilled, rejected); 20399 step((generator = generator.apply(__this, __arguments)).next()); 20400 }); 20401}; 20402const TableHeader$1 = defineComponent({ 20403 name: "ZmTableHeader", 20404 components: { 20405 ZmButton, 20406 ZmSkeleton, 20407 ZmSkeletonItem: _sfc_main$n 20408 }, 20409 props: defaultProps$8, 20410 setup(props, { emit }) { 20411 const ns = useNamespace("table");
20412 useLocale(merge({}, messages$4, messages$a, messages$c)); 20413 const owner = inject(TABLE_INJECTION_KEY); 20414 const { isGroup, columnRows } = useUtils$3(); 20415 const { 20416 getHeaderRowStyle, 20417 getHeaderRowClass, 20418 getHeaderCellStyle, 20419 getHeaderCellClass, 20420 getSortState 20421 } = useStyle$3(); 20422 const { handleSortClick, handleMouseDown, handleMouseMove, handleMouseOut } = useEvent$3(emit); 20423 onMounted(() => __async$c(this, null, function* () { 20424 yield nextTick(); 20425 const { prop, order } = props.defaultSort; 20426 owner.store.commit("sort", { prop, order, init: true }); 20427 })); 20428 return () => { 20429 var _a; 20430 const initDisplayedColumn = owner.store.states.initDisplayedColumn; 20431 const isSkeleton = (_a = owner.store.states.skeleton.value) == null ? void 0 : _a.loading; 20432 return h( 20433 "thead", 20434 { 20435 class: { [ns.is("group")]: isGroup.value }, 20436 role: "rowgroup" 20437 }, 20438 [ 20439 columnRows.value.map( 20440 (subColumns, rowIndex) => h( 20441 "tr", 20442 { 20443 class: getHeaderRowClass(rowIndex), 20444 key: rowIndex, 20445 style: getHeaderRowStyle(rowIndex), 20446 role: "row" 20447 }, 20448 [ 20449 subColumns.map((column, cellIndex) => { 20450 const sortStates = getSortState(column); 20451 return h( 20452 "th", 20453 { 20454 class: getHeaderCellClass(rowIndex, cellIndex, subColumns, column), 20455 key: `${column.id}-thead`, 20456 colspan: column.colSpan, 20457 rowspan: column.rowSpan, 20458 style: getHeaderCellStyle(rowIndex, cellIndex, subColumns, column), 20459 onMousedown: ($event) => handleMouseDown($event, column), 20460 onMousemove: ($event) => handleMouseMove($event, column), 20461 onMouseout: handleMouseOut, 20462 role: isMac ? "columnheader" : void 0 20463 }, 20464 [ 20465 !isSkeleton ? h( 20466 "div", 20467 { 20468 class: ["cell"], 20469 role: "presentation" 20470 }, 20471 [ 20472 column.renderHeader({ 20473 column, 20474 store: owner.store 20475 }), 20476 column.sortable && h( 20477 "span", 20478 { 20479 class: "sort-wrapper" 20480 }, 20481 [ 20482 h(ZmButton, { 20483 icon: sortStates.components, 20484 type: "tertiary", 20485 size: "sm", 20486 "aria-label": sortStates.ariaLabel, 20487 tabindex: "-1", 20488 onClick: (e) => { 20489 handleSortClick(e, column); 20490 } 20491 }) 20492 ] 20493 ), 20494 column.filters && h( 20495 "span", 20496 { 20497 class: "filter-wrapper" 20498 }, 20499 [ 20500 h(FilterPanel, { 20501 placement: column.filterPlacement, 20502 column, 20503 upDataColumn: (key, value) => { 20504 column[key] = value; 20505 } 20506 }) 20507 ] 20508 ) 20509 ] 20510 ) : h( 20511 "div", 20512 { 20513 class: "cell" 20514 }, 20515 [ 20516 h( 20517 ZmSkeleton, 20518 { 20519 animated: true 20520 }, 20521 { 20522 template: () => { 20523 return h(_sfc_main$n, { 20524 percent: SKELETON_PERCENT$1 20525 }); 20526 } 20527 } 20528 ) 20529 ] 20530 ) 20531 ] 20532 ); 20533 }), 20534 initDisplayedColumn.value ? h( 20535 "th", 20536 { 20537 colspan: 1, 20538 rowspan: 1, 20539 role: isMac ? "columnheader" : void 0, 20540 class: ns.be("column-setting", "trigger-btn-wrapper") 20541 }, 20542 h(ColumnPanel) 20543 ) : null 20544 ] 20545 ) 20546 ) 20547 ] 20548 ); 20549 }; 20550 } 20551}); 20552function useStyles$1() { 20553 const owner = inject(TABLE_INJECTION_KEY); 20554 const ns = useNamespace("table"); 20555 const flip2 = owner.store.states.flip; 20556 const getRowStyle = (row, rowIndex) => { 20557 const rowStyle = owner.props.rowStyle; 20558 if (typeof rowStyle === "function") { 20559 return rowStyle.call(null, { 20560 row, 20561 rowIndex 20562 }); 20563 } 20564 return rowStyle; 20565 }; 20566 const getRowClass = (row, rowIndex, expandRow) => { 20567 const classes = [ns.e("row")]; 20568 if (owner.store.states.selection.value.includes(row) || row === owner.store.states.singleSection.value) { 20569 classes.push("selection-row"); 20570 } 20571 if (flip2.value) { 20572 classes.push("is-flip"); 20573 } 20574 const rowClassName = owner.props.rowClassName; 20575 if (typeof rowClassName === "string") { 20576 classes.push(rowClassName); 20577 } else if (typeof rowClassName === "function") { 20578 classes.push( 20579 rowClassName.call(null, { 20580 row, 20581 rowIndex 20582 }) 20583 ); 20584 } 20585 const expandRows = owner.store.states.expandRows; 20586 if (!expandRow && expandRows.value.indexOf(row) > -1 && !!owner.props.forceExpand) { 20587 classes.push("force-expanded"); 20588 } 20589 return classes; 20590 };
20591 const getCellStyle = (rowIndex, columnIndex, row, column) => { 20592 const cellStyle = owner.props.cellStyle; 20593 let cellStyles = cellStyle != null ? cellStyle : {}; 20594 if (typeof cellStyle === "function") { 20595 cellStyles = cellStyle.call(null, { 20596 rowIndex, 20597 columnIndex, 20598 row, 20599 column 20600 }); 20601 } 20602 if (flip2.value) { 20603 return Object.assign({}, cellStyles); 20604 } 20605 const fixedStyle = getFixedColumnOffset$1(columnIndex, owner.store, column.fixed); 20606 ensurePosition$1(fixedStyle, "left"); 20607 ensurePosition$1(fixedStyle, "right"); 20608 return Object.assign({}, cellStyles, fixedStyle); 20609 }; 20610 const getCellClass = (rowIndex, columnIndex, row, column) => { 20611 const classes = [column.id, column.align, column.className]; 20612 if (flip2.value) { 20613 classes.push("is-flip"); 20614 } else { 20615 const fixedClasses = getFixedColumnsClass$1(ns.b(), columnIndex, owner.store, column == null ? void 0 : column.fixed); 20616 classes.push(...fixedClasses); 20617 } 20618 const cellClassName = owner.props.cellClassName; 20619 if (typeof cellClassName === "string") { 20620 classes.push(cellClassName); 20621 } else if (typeof cellClassName === "function") { 20622 classes.push( 20623 cellClassName.call(null, { 20624 rowIndex, 20625 columnIndex, 20626 row, 20627 column 20628 }) 20629 ); 20630 } 20631 return classes.filter((className) => Boolean(className)).join(" "); 20632 }; 20633 const getSpan = (row, column, rowIndex, columnIndex) => { 20634 let rowspan = 1; 20635 let colspan = 1; 20636 const fn = owner == null ? void 0 : owner.props.spanMethod; 20637 if (typeof fn === "function") { 20638 const result = fn({ 20639 row, 20640 column, 20641 rowIndex, 20642 columnIndex 20643 }); 20644 if (Array.isArray(result)) { 20645 rowspan = result[0]; 20646 colspan = result[1]; 20647 } else if (typeof result === "object") { 20648 rowspan = result.rowspan; 20649 colspan = result.colspan; 20650 } 20651 } 20652 return { rowspan, colspan }; 20653 }; 20654 return { 20655 getRowStyle, 20656 getRowClass, 20657 getCellStyle, 20658 getCellClass, 20659 getSpan 20660 }; 20661} 20662function useEvent$2() { 20663 const owner = inject(TABLE_INJECTION_KEY); 20664 const handleMouseEnter = debounce((index2) => { 20665 owner.store.commit("setHoverRow", index2); 20666 }, 30); 20667 const handleMouseLeave = debounce(() => { 20668 owner.store.commit("setHoverRow", null); 20669 }, 30); 20670 const handleEvent = (event, row, name) => { 20671 const cell = getCell$1(event); 20672 const column = getColumnByCell$1( 20673 { 20674 columns: owner.store.states.columns.value 20675 }, 20676 cell 20677 ); 20678 owner.emit(`row-${name}`, row, column, event); 20679 }; 20680 const handleClick = (event, row) => { 20681 handleEvent(event, row, "click"); 20682 }; 20683 const handleContextMenu = (event, row) => { 20684 handleEvent(event, row, "contextmenu"); 20685 }; 20686 return { 20687 handleClick, 20688 handleContextMenu, 20689 handleMouseEnter, 20690 handleMouseLeave 20691 }; 20692} 20693function useA11y$3(table, isStickyHeader, adjust, props) { 20694 const ns = useNamespace("table"); 20695 const selector = { 20696 body: `.${ns.e("body-wrapper")}`, 20697 row: "tr:not(.table-list-leave-to):not(.table-list-leave-from)", 20698 cell: "td,th", 20699 tabindex: '[tabindex]:not([aria-hidden="true"])', 20700 header: `.${ns.e("header-wrapper")}`, 20701 footer: `.${ns.e("footer-wrapper")}`, 20702 stickyHeader: `.${ns.namespace}-sticky--fixed .${ns.e("header")}`, 20703 settingBtn: `.${ns.namespace}-table-column-setting__trigger-btn`, 20704 stickySettingBtn: `.${ns.namespace}-sticky--fixed .${ns.namespace}-table-column-setting__trigger-btn` 20705 }; 20706 let gridNode; 20707 let bodyEl; 20708 let footerEl; 20709 let headerEl; 20710 let settingBtnEl; 20711 let focusedRow = 0; 20712 let focusedCol = 0; 20713 let focusedZIndex = 0; 20714 let grid; 20715 const init = () => { 20716 gridNode = table.vnode.el; 20717 bodyEl = gridNode.querySelector(selector.body); 20718 footerEl = gridNode.querySelector(selector.footer); 20719 headerEl = isStickyHeader.value ? gridNode.querySelector(selector.stickyHeader) : gridNode.querySelector(selector.header); 20720 settingBtnEl = isStickyHeader.value ? gridNode.querySelector(selector.stickySettingBtn) : gridNode.querySelector(selector.settingBtn); 20721 }; 20722 const resetTabIndex = () => { 20723 const matchedEls = gridNode.querySelectorAll(selector.tabindex); 20724 Array.prototype.forEach.call(matchedEls, (el) => { 20725 el.setAttribute("tabindex", "-1"); 20726 }); 20727 }; 20728 const findHeaderFocusCells = () => { 20729 const headerRowCount = headerEl.querySelectorAll(selector.row).length; 20730 const displayedColumns = table.store.states.columns.value.filter((column) => { 20731 return column.type !== "expand" || !table.props.forceExpand; 20732 }); 20733 const headerColumnCount = displayedColumns.length; 20734 const headerGrid = Array(headerRowCount).fill(null).map(() => { 20735 return new Array(headerColumnCount).fill(null); 20736 }); 20737 for (let i = 0; i < headerRowCount; i++) {
20738 const row = headerEl.querySelectorAll(selector.row)[i]; 20739 const cells = row.querySelectorAll(selector.cell); 20740 let occupied; 20741 Array.prototype.forEach.call(cells, (cell) => { 20742 let colSpan = cell.getAttribute("colspan"); 20743 let rowSpan = cell.getAttribute("rowspan"); 20744 occupied = headerGrid[i].filter((n) => { 20745 return n !== null; 20746 }); 20747 const focusEls = cell.querySelectorAll(selector.tabindex); 20748 if (colSpan > 1 || rowSpan > 1) { 20749 if (colSpan > 1) { 20750 while (colSpan--) { 20751 headerGrid[i][colSpan + occupied.length] = focusEls; 20752 } 20753 } else if (rowSpan > 1) { 20754 while (rowSpan--) { 20755 if (headerGrid[i + rowSpan]) { 20756 headerGrid[i + rowSpan][occupied.length] = focusEls; 20757 } 20758 } 20759 } 20760 } else if (colSpan == 1 && rowSpan == 1) { 20761 headerGrid[i][occupied.length] = focusEls; 20762 } 20763 }); 20764 if (i === 0 && settingBtnEl) { 20765 headerGrid[i].push([settingBtnEl]); 20766 } 20767 } 20768 return headerGrid; 20769 }; 20770 const findBodyFocusCells = () => { 20771 const bodyRowCount = bodyEl.querySelectorAll(selector.row).length; 20772 const displayedColumns = table.store.states.columns.value.filter((column) => { 20773 return column.type !== "expand" || !table.props.forceExpand; 20774 }); 20775 const bodyColumnCount = displayedColumns.length; 20776 const bodyGrid = Array(bodyRowCount).fill(null).map(() => { 20777 return new Array(bodyColumnCount).fill(null); 20778 }); 20779 for (let i = 0; i < bodyRowCount; i++) { 20780 const row = bodyEl.querySelectorAll(selector.row)[i]; 20781 const cells = row.querySelectorAll(selector.cell); 20782 let occupied; 20783 Array.prototype.forEach.call(cells, (cell) => { 20784 let colSpan = cell.getAttribute("colspan"); 20785 let rowSpan = cell.getAttribute("rowspan"); 20786 occupied = bodyGrid[i].filter((n) => { 20787 return n !== null; 20788 }); 20789 const focusEls = cell.querySelectorAll(selector.tabindex); 20790 if (colSpan > 1 || rowSpan > 1) { 20791 if (colSpan > 1) { 20792 while (colSpan--) { 20793 bodyGrid[i][colSpan + occupied.length] = focusEls; 20794 } 20795 } else if (rowSpan > 1) { 20796 while (rowSpan--) { 20797 if (bodyGrid[i + rowSpan]) { 20798 bodyGrid[i + rowSpan][occupied.length] = focusEls; 20799 } 20800 } 20801 } 20802 } else if (colSpan == 1 && rowSpan == 1) { 20803 bodyGrid[i][occupied.length] = focusEls; 20804 } 20805 }); 20806 } 20807 return bodyGrid; 20808 }; 20809 const findFocusCells = (row) => { 20810 const focusCells = []; 20811 const cells = row.querySelectorAll(selector.cell); 20812 Array.prototype.forEach.call(cells, (cell) => { 20813 const focusEls = cell.querySelectorAll(selector.tabindex); 20814 focusCells.push(focusEls); 20815 }); 20816 return focusCells; 20817 }; 20818 const setupFocusGrid = () => { 20819 grid = []; 20820 const flip2 = table.store.states.flip; 20821 if (!flip2.value && props.showHeader) { 20822 grid = grid.concat(findHeaderFocusCells()); 20823 } 20824 grid = grid.concat(findBodyFocusCells()); 20825 const showSummary = table.store.states.showSummary; 20826 let footerCells = []; 20827 if (showSummary.value) { 20828 footerCells = footerCells.concat(findFocusCells(footerEl.querySelectorAll(selector.row)[0])); 20829 grid.push(footerCells); 20830 } 20831 }; 20832 const shouldResetFocusIndex = () => { 20833 if (!isValidCell(focusedRow, focusedCol, focusedZIndex)) { 20834 focusedRow = 0; 20835 focusedCol = 0; 20836 focusedZIndex = 0; 20837 } 20838 }; 20839 const setFocusPointer = (row, col, zIndex2) => { 20840 if (!isValidCell(row, col, zIndex2)) { 20841 /* istanbul ignore next @preserve */ 20842 return false; 20843 } 20844 const focusedCell = grid[focusedRow][focusedCol][focusedZIndex]; 20845 if (focusedCell) { 20846 focusedCell.setAttribute("tabindex", "-1"); 20847 } 20848 grid[row][col][zIndex2].setAttribute("tabindex", "0"); 20849 focusedRow = row; 20850 focusedCol = col; 20851 focusedZIndex = zIndex2; 20852 return true; 20853 }; 20854 const registerEvents = () => { 20855 clearEvents(); 20856 gridNode.addEventListener("keydown", checkFocusChange); 20857 gridNode.addEventListener("click", focusClickedCell); 20858 }; 20859 const clearEvents = () => { 20860 gridNode == null ? void 0 : gridNode.removeEventListener("keydown", checkFocusChange); 20861 gridNode == null ? void 0 : gridNode.removeEventListener("click", focusClickedCell); 20862 }; 20863 const checkFocusChange = (event) => { 20864 const code = event.code; 20865 let rowCaret = focusedRow;
20866 let colCaret = focusedCol; 20867 let zIndex2 = focusedZIndex; 20868 let nextCell; 20869 switch (code) { 20870 case EVENT_CODE.up: 20871 nextCell = getNextValidCell(0, -1); 20872 rowCaret = nextCell.row; 20873 colCaret = nextCell.col; 20874 zIndex2 = nextCell.zIndex; 20875 break; 20876 case EVENT_CODE.down: 20877 nextCell = getNextValidCell(0, 1); 20878 rowCaret = nextCell.row; 20879 colCaret = nextCell.col; 20880 zIndex2 = nextCell.zIndex; 20881 break; 20882 case EVENT_CODE.left: 20883 nextCell = getNextValidCell(-1, 0); 20884 rowCaret = nextCell.row; 20885 colCaret = nextCell.col; 20886 zIndex2 = nextCell.zIndex; 20887 break; 20888 case EVENT_CODE.right: 20889 nextCell = getNextValidCell(1, 0); 20890 rowCaret = nextCell.row; 20891 colCaret = nextCell.col; 20892 zIndex2 = nextCell.zIndex; 20893 break; 20894 case EVENT_CODE.home: 20895 if (event.ctrlKey) { 20896 /* istanbul ignore next @preserve */ 20897 rowCaret = 0; 20898 } 20899 colCaret = 0; 20900 zIndex2 = 0; 20901 break; 20902 case EVENT_CODE.end: 20903 if (event.ctrlKey) { 20904 /* istanbul ignore next @preserve */ 20905 rowCaret = grid.length - 1; 20906 } 20907 colCaret = grid[focusedRow].length - 1; 20908 zIndex2 = 0; 20909 break; 20910 default: 20911 return; 20912 } 20913 focusCell(rowCaret, colCaret, zIndex2); 20914 if (isValidCell(rowCaret, colCaret, zIndex2)) { 20915 adjust(grid[rowCaret][colCaret][zIndex2]); 20916 } 20917 event.preventDefault(); 20918 event.stopPropagation(); 20919 }; 20920 const focusCell = (row, col, zIndex2, preventScroll = false) => { 20921 if (setFocusPointer(row, col, zIndex2)) { 20922 grid[row][col][zIndex2].focus({ 20923 preventScroll 20924 }); 20925 table.state.syncPosition(); 20926 } 20927 }; 20928 const getNextValidCell = (directionX, directionY) => { 20929 let nextCell = getNextCell(focusedRow, focusedCol, focusedZIndex, directionX, directionY); 20930 while (isEmptyCell(nextCell.row, nextCell.col, nextCell.zIndex) || isSameCell(nextCell.row, nextCell.col, nextCell.zIndex)) { 20931 const currRow = nextCell.row; 20932 const currCol = nextCell.col; 20933 let zIndex2 = nextCell.zIndex; 20934 if (directionX === 0) { 20935 while ((isEmptyCell(nextCell.row, nextCell.col, nextCell.zIndex) || isSameCell(nextCell.row, nextCell.col, nextCell.zIndex)) && !nextCell.ending) { 20936 nextCell = getNextCell(currRow, currCol, zIndex2, 1, 0, true); 20937 zIndex2 = nextCell.zIndex; 20938 } 20939 /* istanbul ignore next @preserve */ 20940 if (nextCell.ending) { 20941 nextCell.ending = false; 20942 nextCell = getNextCell(currRow, currCol, zIndex2, directionX, directionY); 20943 } 20944 } else { 20945 nextCell = getNextCell(currRow, currCol, zIndex2, directionX, directionY); 20946 } 20947 } 20948 return nextCell; 20949 }; 20950 const getNextCell = (currRow, currCol, currZIndex, directionX, directionY, isInCell = false) => { 20951 const currentCells = grid[currRow][currCol]; 20952 const row = currRow + directionY; 20953 let zIndex2 = currZIndex; 20954 let col = currCol; 20955 let ending = false; 20956 if (currZIndex < currentCells.length - 1 && directionX > 0) { 20957 zIndex2++; 20958 } else if (currZIndex > 0 && directionX < 0) { 20959 zIndex2--; 20960 } else { 20961 /* istanbul ignore next @preserve */ 20962 if (isInCell) { 20963 ending = true; 20964 zIndex2 = 0; 20965 } else { 20966 col += directionX; 20967 if (directionX > 0) { 20968 zIndex2 = 0; 20969 } else if (directionX < 0) { 20970 if (isValidCell(row, col, 0)) { 20971 zIndex2 = grid[row][col].length - 1; 20972 } else { 20973 /* istanbul ignore next @preserve */ 20974 zIndex2 = 0; 20975 } 20976 } 20977 } 20978 } 20979 if (directionY !== 0) { 20980 zIndex2 = 0; 20981 } 20982 return { 20983 row, 20984 col, 20985 zIndex: zIndex2, 20986 ending 20987 }; 20988 }; 20989 const focusClickedCell = (event) => { 20990 const clickedGridCell = findClosest(event.target, selector.tabindex); 20991 if (!clickedGridCell) { 20992 return; 20993 } 20994 focusElement(clickedGridCell, true); 20995 }; 20996 const focusElement = (element, preventScroll = false) => { 20997 for (let row = 0; row < grid.length; row++) { 20998 for (let col = 0; col < grid[row].length; col++) { 20999 for (let z = 0; z < grid[row][col].length; z++) { 21000 if (grid[row][col][z] === element) { 21001 focusCell(row, col, z, preventScroll); 21002 return; 21003 } 21004 } 21005 } 21006 } 21007 }; 21008 const findClosest = (element, selector2) => { 21009 if (element && element.matches(selector2)) { 21010 return element; 21011 } 21012 return element.querySelector(selector2); 21013 }; 21014 const isValidCell = (row, col, zIndex2) => { 21015 var _a; 21016 return row >= 0 && col >
21016= 0 && grid && grid.length && row < grid.length && col < grid[row].length && zIndex2 >= 0 && zIndex2 < ((_a = grid[row][col]) == null ? void 0 : _a.length); 21017 }; 21018 const isEmptyCell = (row, col, zIndex2) => { 21019 return row >= 0 && col >= 0 && grid && grid.length && row < grid.length && col < grid[row].length && grid[row][col][zIndex2] && (!isVisible(grid[row][col][zIndex2]) || grid[row][col][zIndex2].tagName === "SPAN" && grid[row][col][zIndex2].innerText.trim() === "" && !hasClass(grid[row][col][zIndex2], "label-empty-wrapper")); 21020 }; 21021 const isSameCell = (row, col, zIndex2) => { 21022 if (isValidCell(row, col, zIndex2)) { 21023 return grid[focusedRow][focusedCol][focusedZIndex] === grid[row][col][zIndex2]; 21024 } 21025 }; 21026 const focus = (row = focusedRow, col = focusedCol, zIndex2 = focusedZIndex) => { 21027 focusCell(row, col, zIndex2); 21028 }; 21029 const buildA11y = function() { 21030 const parentTable = table.state.getParentTable(table); 21031 if (parentTable) { 21032 return; 21033 } 21034 init(); 21035 resetTabIndex(); 21036 setupFocusGrid(); 21037 shouldResetFocusIndex(); 21038 setFocusPointer(focusedRow, focusedCol, focusedZIndex); 21039 registerEvents(); 21040 }; 21041 return { 21042 focus, 21043 focusElement, 21044 buildA11y, 21045 clearEvents 21046 }; 21047} 21048const RENDER_DELAY$1 = 50; 21049function useRender$5(props, layout, store2, table, t) { 21050 const ns = useNamespace("table"); 21051 const resizeState = ref({ 21052 width: null, 21053 height: null, 21054 headerHeight: null 21055 }); 21056 const tableWidth = ref(); 21057 const tableHeaderWidth = ref(); 21058 const emptyTDWidth = ref(); 21059 const headerScrollHeight = ref(0); 21060 const tableScrollHeight = ref(0); 21061 const bodyScrollHeight = ref(0); 21062 const footerScrollHeight = ref(0); 21063 const isGroup = ref(false); 21064 const renderExpanded = ref(null); 21065 const resizeProxyVisible = ref(false); 21066 const isStickyHeader = ref(false); 21067 const tableBodyStyles = computed(() => { 21068 const bodyWidth = layout.bodyWidth.value; 21069 return { 21070 width: bodyWidth && !store2.states.flip.value ? `${bodyWidth}px` : "" 21071 }; 21072 }); 21073 const shouldUpdateHeight = computed(() => { 21074 return props.height || props.maxHeight; 21075 }); 21076 const isEmpty2 = computed(() => { 21077 var _a; 21078 return !((_a = store2.states.skeleton.value) == null ? void 0 : _a.loading) && store2.states.data.value.length === 0; 21079 }); 21080 const computedEmptyText = computed(() => { 21081 return props.emptyText || t("table.emptyText"); 21082 }); 21083 const computedSumText = computed(() => { 21084 return props.sumText || t("table.sumText"); 21085 }); 21086 const scrollbarStyle = computed(() => { 21087 if (props.height) { 21088 return { 21089 height: "100%" 21090 }; 21091 } 21092 if (props.maxHeight) { 21093 if (!Number.isNaN(Number(props.maxHeight))) { 21094 return { 21095 maxHeight: `${props.maxHeight - headerScrollHeight.value - footerScrollHeight.value}px` 21096 }; 21097 } else { 21098 return { 21099 maxHeight: `calc(${props.maxHeight} - ${headerScrollHeight.value + footerScrollHeight.value}px)` 21100 }; 21101 } 21102 } 21103 return {}; 21104 }); 21105 const emptyBlockStyle = computed(() => { 21106 var _a; 21107 let height = "100%"; 21108 if (props.height && bodyScrollHeight.value) { 21109 height = `${bodyScrollHeight.value}px`; 21110 } 21111 const width = tableHeaderWidth.value; 21112 const top = typeof props.stickyHeader !== "boolean" && `${(_a = props.stickyHeader) == null ? void 0 : _a.offset}px` || 0; 21113 return { 21114 width: width ? `${width}px` : "", 21115 height, 21116 paddingTop: top 21117 }; 21118 }); 21119 const emptyTDStyle = computed(() => { 21120 return { 21121 left: `${(tableWidth.value - emptyTDWidth.value) / 2}px` 21122 }; 21123 }); 21124 const stickyContainerCls = computed(() => { 21125 if (props.stickyHeader || props.stickyBar) { 21126 return table.tableId + "__container"; 21127 } 21128 return ""; 21129 }); 21130 const hasSingleSelection = computed(() => { 21131 const columns = store2.states.columns.value; 21132 return columns.some((item) => item.type === "single"); 21133 }); 21134 const radio = computed({ 21135 get() { 21136 return store2.getSingle(); 21137 }, 21138 set(value) { 21139 store2.setSingle(value); 21140 } 21141 }); 21142 const tableCls = computed(() => { 21143 const classes = [ns.e("body")]; 21144 if (store2.states.flip.value) { 21145 classes.push("is-flip"); 21146 } 21147 return classes.join(" "); 21148 }); 21149 const shouldShowHeader = computed(() => { 21150 return props.showHeader && !store2.states.flip.value; 21151 }); 21152 const dragAriaDescribedbyText = computed(() => { 21153 return table.dragAriaDescribedbyText; 21154 }); 21155 const hasScrollClass = (className) => { 21156 const { tableWrapper }
21156 = table.refs; 21157 return !!(tableWrapper && tableWrapper.classList.contains(className)); 21158 }; 21159 const setScrollClass = (className) => { 21160 const { tableWrapper } = table.refs; 21161 setScrollClassByEl(tableWrapper, className); 21162 }; 21163 const setScrollClassByEl = (el, className) => { 21164 if (!el) { 21165 return; 21166 } 21167 const classList = Array.from(el.classList).filter((item) => !item.startsWith("is-scrolling-")); 21168 classList.push(layout.scrollX.value ? className : "is-scrolling-none"); 21169 el.className = classList.join(" "); 21170 }; 21171 const syncPosition = () => { 21172 if (!layout.scrollX.value) { 21173 const scrollingNoneClass = "is-scrolling-none"; 21174 if (!hasScrollClass(scrollingNoneClass)) { 21175 setScrollClass(scrollingNoneClass); 21176 } 21177 return; 21178 } 21179 if (!table.refs.scrollBarRef) { 21180 /* istanbul ignore next @preserve */ 21181 return; 21182 } 21183 const scrollContainer = table.refs.scrollBarRef.wrapRef; 21184 const { scrollLeft, offsetWidth, scrollWidth } = scrollContainer; 21185 const { headerWrapper, footerWrapper } = table.refs; 21186 if (headerWrapper) { 21187 headerWrapper.scrollLeft = scrollLeft; 21188 } 21189 if (footerWrapper) { 21190 footerWrapper.scrollLeft = scrollLeft; 21191 } 21192 const maxScrollLeftPosition = scrollWidth - offsetWidth - 1; 21193 if (scrollLeft >= maxScrollLeftPosition) { 21194 setScrollClass("is-scrolling-right"); 21195 } else if (scrollLeft === 0) { 21196 setScrollClass("is-scrolling-left"); 21197 } else { 21198 setScrollClass("is-scrolling-middle"); 21199 } 21200 }; 21201 const doLayout = () => { 21202 if (shouldUpdateHeight.value) { 21203 layout.updateScrollY(); 21204 } 21205 layout.updateColumnsWidth(); 21206 debouncedUpdateBuildA11y(); 21207 requestAnimationFrame(syncPosition); 21208 }; 21209 const adjust = (el) => { 21210 if (table.refs.scrollBarRef.$el.contains(el)) { 21211 table.refs.scrollBarRef.scrollXIntoView(el, 300, tableWidth.value / 2); 21212 } 21213 }; 21214 const { buildA11y, focus, clearEvents, focusElement } = useA11y$3( 21215 table, 21216 isStickyHeader, 21217 adjust, 21218 props 21219 ); 21220 const debouncedUpdateLayout = debounce(doLayout, RENDER_DELAY$1); 21221 const debouncedUpdateBuildA11y = debounce(buildA11y, RENDER_DELAY$1); 21222 const updateScrollBar = () => { 21223 table.refs.scrollBarRef.updateThumb(); 21224 }; 21225 const bindEvents = () => { 21226 if (table.refs.scrollBarRef.wrapRef) { 21227 useEventListener(table.refs.scrollBarRef.wrapRef, "scroll", syncPosition, { 21228 passive: true 21229 }); 21230 } 21231 useResizeObserver( 21232 table.vnode.el, 21233 throttle(resizeListener, RENDER_DELAY$1, { 21234 leading: false 21235 }) 21236 ); 21237 useResizeObserver( 21238 table.refs.bodyWrapper, 21239 throttle( 21240 () => { 21241 resizeListener(); 21242 table.refs.scrollBarRef.updateThumb(); 21243 }, 21244 RENDER_DELAY$1, 21245 { 21246 leading: false 21247 } 21248 ) 21249 ); 21250 }; 21251 const resizeListener = () => { 21252 var _a, _b, _c, _d; 21253 const el = table.vnode.el; 21254 let shouldUpdateLayout = false; 21255 const { width: oldWidth, height: oldHeight, headerHeight: oldHeaderHeight } = resizeState.value; 21256 const width = tableWidth.value = el.offsetWidth; 21257 if (oldWidth !== width) { 21258 shouldUpdateLayout = true; 21259 } 21260 const height = el.offsetHeight; 21261 if ((props.height || shouldUpdateHeight.value) && oldHeight !== height) { 21262 shouldUpdateLayout = true; 21263 } 21264 const tableHeader = table.refs.headerWrapper; 21265 if (props.showHeader && (tableHeader == null ? void 0 : tableHeader.offsetHeight) !== oldHeaderHeight) { 21266 shouldUpdateLayout = true; 21267 } 21268 tableScrollHeight.value = ((_a = table.refs.tableWrapper) == null ? void 0 : _a.scrollHeight) || 0; 21269 headerScrollHeight.value = (tableHeader == null ? void 0 : tableHeader.scrollHeight) || 0; 21270 footerScrollHeight.value = ((_b = table.refs.footerWrapper) == null ? void 0 : _b.offsetHeight) || 0; 21271 bodyScrollHeight.value = tableScrollHeight.value - headerScrollHeight.value - footerScrollHeight.value; 21272 tableHeaderWidth.value = (_c = table.refs.tableHeader) == null ? void 0 : _c.offsetWidth; 21273 emptyTDWidth.value = (_d = table.refs.emptyTD) == null ? void 0 : _d.offsetWidth; 21274 if (shouldUpdateLayout) { 21275 resizeState.value = { 21276 width, 21277 height, 21278 headerHeight: props.showHeader && (tableHeader == null ? void 0 : tableHeader.offsetHeight) || 0 21279 }; 21280 doLayout(); 21281 } 21282 }; 21283 const getParentTable = (table2) => { 21284 let parent = table2.parent; 21285 let nestedTable = null; 21286 while (parent) { 21287 const componentName = parent.type.name; 21288 if (componentName === "ZmTable") { 21289 nestedTable = parent; 21290 break; 21291 } 21292 parent = parent.parent; 21293 } 21294 return nestedTable; 21295 }; 21296 const setDragVisible = (visible) => { 21297 resizeProxyVisible.value = visible; 21298 }; 21299 const handleStickyChange = (fixed) => { 21300 isStickyHeader.value = fixed; 21301 nextTick(buildA11y); 21302 }; 21303 watchEffect(() => { 21304 layout.setHeight(props.height); 21305 }); 21306 watchEffect(() => { 21307 layout.setMaxHeight(props.maxHeight); 21308 }); 21309 watchEffect(() => { 21310 if (props.expandRowKeys) { 21311 store2.setExpandRowKeysAdapter(props.expandRowKeys); 21312 } 21313 }); 21314 watch( 21315 () => props.data, 21316 (data) => { 21317 table.store.commit("setData", data); 21318 }, 21319 { 21320 immediate: true, 21321 deep: true 21322 } 21323 ); 21324 onMounted(() => { 21325 var _a, _b; 21326 const el = table.vnode.el; 21327 const tableHeader = table.refs.headerWrapper; 21328 resizeState.value = { 21329 width: tableWidth.value = el.offsetWidth, 21330 height: el.offsetHeight, 21331 headerHeight: props.showHeader && tableHeader ? tableHeader.offsetHeight : null 21332 }; 21333 tableHeaderWidth.value = (_a = table.refs.tableHeader) == null ? void 0 : _a.offsetWidth; 21334 emptyTDWidth.value = (_b = table.refs.emptyTD) == null ? void 0 : _b.offsetWidth; 21335 store2.updateColumns(); 21336 bindEvents(); 21337 store2.states.columns.value.forEach((column) => { 21338 if (column.filteredValue && column.filteredValue.length) { 21339 table.store.commit("filterChange", { 21340 column, 21341 values: column.filteredValue, 21342 silent: true 21343 }); 21344 } 21345 }); 21346 table.$ready = true; 21347 requestAnimationFrame(doLayout); 21348 }); 21349 onUnmounted(() => { 21350 clearEvents(); 21351 }); 21352 return { 21353 resizeState, 21354 isGroup, 21355 radio, 21356 renderExpanded, 21357 debouncedUpdateLayout, 21358 tableBodyStyles, 21359 scrollbarStyle, 21360 emptyBlockStyle, 21361 emptyTDStyle, 21362 isEmpty: isEmpty2, 21363 computedEmptyText, 21364 computedSumText, 21365 stickyContainerCls, 21366 hasSingleSelection, 21367 resizeProxyVisible, 21368 tableCls, 21369 shouldShowHeader, 21370 dragAriaDescribedbyText, 21371 tableHeaderWidth, 21372 buildA11y, 21373 focus, 21374 focusElement, 21375 doLayout, 21376 updateScrollBar, 21377 setDragVisible, 21378 getParentTable, 21379 handleStickyChange, 21380 syncPosition 21381 }; 21382} 21383var __defProp$w = Object.defineProperty; 21384var __getOwnPropSymbols$w = Object.getOwnPropertySymbols; 21385var __hasOwnProp$w = Object.prototype.hasOwnProperty; 21386var __propIsEnum$w = Object.prototype.propertyIsEnumerable; 21387var __defNormalProp$w = (obj, key, value) => key in obj ? __defProp$w(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 21388var __spreadValues$w = (a, b) => { 21389 for (var prop in b || (b = {})) 21390 if (__hasOwnProp$w.call(b, prop)) 21391 __defNormalProp$w(a, prop, b[prop]); 21392 if (__getOwnPropSymbols$w) 21393 for (var prop of __getOwnPropSymbols$w(b)) { 21394 if (__propIsEnum$w.call(b, prop)) 21395 __defNormalProp$w(a, prop, b[prop]); 21396 } 21397 return a; 21398}; 21399function useRender$4(props) { 21400 const owner = inject(TABLE_INJECTION_KEY); 21401 const ns = useNamespace("table"); 21402 const indent2 = 32; 21403 const firstDefaultColumnIndex = computed(() => { 21404 return owner.store.states.columns.value.findIndex(({ type }) => type === "default"); 21405 }); 21406 const { getRowStyle, getRowClass, getCellStyle, getCellClass, getSpan } = useStyles$1(); 21407 const { handleMouseEnter, handleMouseLeave, handleClick, handleContextMenu }
21407 = useEvent$2(); 21408 const getKeyOfRow = (row, index2) => { 21409 const rowKey = owner.props.rowKey; 21410 if (rowKey) { 21411 return getRowIdentity$1(row, rowKey); 21412 } 21413 return index2; 21414 }; 21415 const cellChildren = (cellIndex, column, data) => { 21416 return column.renderCell(data); 21417 }; 21418 const rowRender = (row, $index, treeRowData, expanded, forceExpand) => { 21419 const columns = owner.store.states.columns.value.filter((column) => { 21420 return column.type !== "expand" || !forceExpand; 21421 }); 21422 const flip2 = owner.store.states.flip; 21423 const rowClasses = getRowClass(row, $index); 21424 if (treeRowData) { 21425 rowClasses.push(ns.em("row", `level-${treeRowData.level}`)); 21426 } 21427 return h( 21428 "tr", 21429 { 21430 style: [getRowStyle(row, $index)], 21431 class: rowClasses, 21432 key: getKeyOfRow(row, $index), 21433 onMouseenter: () => handleMouseEnter($index), 21434 onMouseleave: handleMouseLeave, 21435 onClick: ($event) => handleClick($event, row), 21436 onContextmenu: ($event) => handleContextMenu($event, row), 21437 role: "row" 21438 }, 21439 columns.map((column, cellIndex) => { 21440 var _a; 21441 const { rowspan, colspan } = getSpan(row, column, $index, cellIndex); 21442 if (!rowspan || !colspan) { 21443 return null; 21444 } 21445 const columnData = __spreadValues$w({}, column); 21446 const data = { 21447 store: owner.store, 21448 _self: props.context, 21449 column: columnData, 21450 row, 21451 $index, 21452 cellIndex, 21453 expanded, 21454 treeNode: null, 21455 t: owner.t 21456 }; 21457 if ((cellIndex === firstDefaultColumnIndex.value || flip2.value) && treeRowData) { 21458 data.treeNode = { 21459 level: treeRowData.level, 21460 indent: treeRowData.level * treeRowData.indent 21461 }; 21462 if (cellIndex === firstDefaultColumnIndex.value && typeof treeRowData.expanded === "boolean") { 21463 data.treeNode.expanded = treeRowData.expanded; 21464 if ("loading" in treeRowData) { 21465 data.treeNode.loading = treeRowData.loading; 21466 } 21467 if ("noLazyChildren" in treeRowData) { 21468 data.treeNode.noLazyChildren = treeRowData.noLazyChildren; 21469 } 21470 } 21471 } 21472 const baseKey = `${$index},${cellIndex}`; 21473 const patchKey = (_a = columnData.columnKey) != null ? _a : ""; 21474 const tdChildren = cellChildren(cellIndex, column, data); 21475 const tdProps = { 21476 style: getCellStyle($index, cellIndex, row, column), 21477 class: getCellClass($index, cellIndex, row, column), 21478 key: `${patchKey}${baseKey}`, 21479 role: "cell", 21480 "aria-describedby": column.id, 21481 rowspan, 21482 colspan 21483 }; 21484 return h("td", tdProps, [tdChildren]); 21485 }) 21486 ); 21487 }; 21488 const wrappedRowRender = (row, $index) => { 21489 const store2 = owner.store; 21490 const { isRowExpanded, assertRowKey } = store2; 21491 const { treeData, lazyTreeNodeMap, childrenColumnName, rowKey } = store2.states; 21492 const columns = store2.states.columns.value; 21493 const hasExpandColumn = columns.some(({ type }) => type === "expand"); 21494 if (hasExpandColumn) { 21495 const forceExpand = owner.props.forceExpand; 21496 const expanded = isRowExpanded(row) || !!forceExpand; 21497 const tr = rowRender(row, $index, void 0, expanded, forceExpand); 21498 const rowClasses = getRowClass(row, $index, true); 21499 const renderExpanded = owner.renderExpanded; 21500 if (expanded) { 21501 const isFixedColumn2 = columns.some(({ type, fixed }) => type === "expand" && fixed); 21502 const expandRowClasses = isFixedColumn2 ? ns.e("expanded-row-fixed") : ""; 21503 const width = `${owner.state.tableHeaderWidth.value}px`; 21504 const colspan = forceExpand ? columns.length - 1 - (forceExpand.col || 1) - owner.store.states.rightFixedLeafColumnsLength.value : columns.length; 21505 return [ 21506 tr, 21507 h( 21508 "tr", 21509 { 21510 class: [rowClasses, expandRowClasses, ns.e("expanded-row")], 21511 style: { 21512 width 21513 }, 21514 key: `expanded-row__${tr.key}`, 21515 role: "row" 21516 }, 21517 [ 21518 forceExpand ? renderEmptyTD(forceExpand) : null, 21519 h( 21520 "td", 21521 { 21522 colspan, 21523 class: `${!forceExpand ? ns.e("expanded-cell") : ns.e("force-expanded-cell")}`, 21524 role: "cell" 21525 }, 21526 [renderExpanded({ row, $index, store: store2, expanded })] 21527 ), 21528 forceExpand ? renderEmptyTD(forceExpand, false) : null 21529 ] 21530 ) 21531 ]; 21532 } else { 21533 return [tr]; 21534 } 21535 } else if (Object.keys(treeData.value).length) { 21536 assertRowKey();
21537 const key = getRowIdentity$1(row, rowKey.value); 21538 let cur = treeData.value[key]; 21539 let treeRowData = null; 21540 if (cur) { 21541 treeRowData = { 21542 expanded: cur.expanded, 21543 level: cur.level, 21544 display: true, 21545 noLazyChildren: false, 21546 loading: false, 21547 indent: indent2 21548 }; 21549 if (typeof cur.lazy === "boolean") { 21550 if (typeof cur.loaded === "boolean" && cur.loaded) { 21551 treeRowData.noLazyChildren = !(cur.children && cur.children.length); 21552 } 21553 treeRowData.loading = cur.loading; 21554 } 21555 } 21556 const tmp = [rowRender(row, $index, treeRowData)]; 21557 if (cur) { 21558 let i = 0; 21559 const traverse = (children, parent) => { 21560 if (!(children && children.length && parent)) { 21561 return; 21562 } 21563 children.forEach((node) => { 21564 const innerTreeRowData = { 21565 display: parent.display && parent.expanded, 21566 level: parent.level + 1, 21567 expanded: false, 21568 noLazyChildren: false, 21569 loading: false, 21570 indent: indent2 21571 }; 21572 const childKey = getRowIdentity$1(node, rowKey.value); 21573 if (childKey === void 0 || childKey === null) { 21574 /* istanbul ignore next @preserve */ 21575 throwError("ZmTable", "For nested data item, row-key is required."); 21576 } 21577 cur = __spreadValues$w({}, treeData.value[childKey]); 21578 if (cur) { 21579 innerTreeRowData.expanded = cur.expanded; 21580 cur.level = cur.level || innerTreeRowData.level; 21581 cur.display = !!(cur.expanded && innerTreeRowData.display); 21582 if (typeof cur.lazy === "boolean") { 21583 if (typeof cur.loaded === "boolean" && cur.loaded) { 21584 innerTreeRowData.noLazyChildren = !(cur.children && cur.children.length); 21585 } 21586 innerTreeRowData.loading = cur.loading; 21587 } 21588 } 21589 i++; 21590 if (parent.display && parent.expanded) { 21591 tmp.push(rowRender(node, $index + i, innerTreeRowData)); 21592 } 21593 if (cur) { 21594 const nodes2 = lazyTreeNodeMap.value[childKey] || node[childrenColumnName.value]; 21595 traverse(nodes2, cur); 21596 } 21597 }); 21598 }; 21599 cur.display = true; 21600 const nodes = lazyTreeNodeMap.value[key] || row[childrenColumnName.value]; 21601 traverse(nodes, cur); 21602 } 21603 return tmp; 21604 } else { 21605 return rowRender(row, $index); 21606 } 21607 }; 21608 const renderEmptyTD = (forceExpand, isLeft = true) => { 21609 if (forceExpand) { 21610 if (isLeft) { 21611 const columns = owner.store.states.fixedColumns.value; 21612 return new Array(forceExpand.col || 1).fill({}).map((m, index2) => { 21613 const column = columns[index2]; 21614 if (columns[index2]) { 21615 const fixedClasses = getFixedColumnsClass$1(ns.b(), index2, owner.store, column.fixed); 21616 const fixedStyle = getFixedColumnOffset$1(index2, owner.store, column.fixed); 21617 ensurePosition$1(fixedStyle, "left");
21618 return renderEmpty(fixedClasses, fixedStyle); 21619 } 21620 return renderEmpty(); 21621 }); 21622 } else { 21623 const columns = owner.store.states.columns.value.filter((column) => { 21624 return column.type !== "expand"; 21625 }); 21626 if (columns.length > 0) 21627 return columns.map((column, index2) => { 21628 if (column.fixed === "right") { 21629 const fixedClasses = getFixedColumnsClass$1(ns.b(), index2, owner.store, column.fixed); 21630 const fixedStyle = getFixedColumnOffset$1(index2, owner.store, column.fixed); 21631 ensurePosition$1(fixedStyle, "right"); 21632 return renderEmpty(fixedClasses, fixedStyle); 21633 } 21634 }); 21635 } 21636 } 21637 }; 21638 const renderEmpty = (fixedClasses, fixedStyle) => { 21639 const label = owner.t ? owner.t("basic.blank") : "â"; 21640 return h( 21641 "td", 21642 { 21643 class: fixedClasses, 21644 style: fixedStyle, 21645 colspan: 1, 21646 rowspan: 1 21647 }, 21648 h( 21649 "div", 21650 { 21651 class: "cell" 21652 }, 21653 h( 21654 "span", 21655 { 21656 tabindex: "-1", 21657 class: ["text-wrapper", "label-empty-wrapper"], 21658 "aria-label": label 21659 }, 21660 h( 21661 "span", 21662 { 21663 class: "label-empty" 21664 }, 21665 label 21666 ) 21667 ) 21668 ) 21669 ); 21670 }; 21671 /* istanbul ignore next @preserve */ 21672 const handleDragEnd = debounce(function(event, data) { 21673 owner.store.commit("setHoverRow", event.newIndex); 21674 owner.emit("drag-end", data); 21675 }, RENDER_DELAY$1); 21676 return { 21677 wrappedRowRender, 21678 handleDragEnd 21679 }; 21680} 21681/* istanbul ignore next @preserve */ 21682const defaultProps$7 = { 21683 context: { 21684 default: () => ({}), 21685 type: Object 21686 }, 21687 rowClassName: [String, Function], 21688 rowStyle: [Object, Function], 21689 highlight: Boolean 21690}; 21691function useLayoutObserver$1(root) { 21692 const instance = getCurrentInstance(); 21693 const tableLayout = root.layout; 21694 const onColumnsChange = (layout) => { 21695 var _a; 21696 const cols = ((_a = root.vnode.el) == null ? void 0 : _a.querySelectorAll("colgroup > col")) || []; 21697 if (!cols.length) { 21698 return; 21699 } 21700 const flattenColumns = layout.getFlattenColumns(); 21701 const columnsMap = {}; 21702 flattenColumns.forEach((column) => { 21703 columnsMap[column.id] = column; 21704 }); 21705 for (let i = 0, j = cols.length; i < j; i++) { 21706 const col = cols[i]; 21707 const name = col.getAttribute("name"); 21708 const column = columnsMap[name]; 21709 if (column) { 21710 col.setAttribute("width", column.realWidth || column.width); 21711 } 21712 } 21713 }; 21714 tableLayout.addObserver(instance); 21715 onMounted(() => { 21716 onColumnsChange(tableLayout); 21717 }); 21718 onUpdated(() => { 21719 onColumnsChange(tableLayout); 21720 }); 21721 onUnmounted(() => { 21722 tableLayout.removeObserver(instance); 21723 }); 21724 return { 21725 onColumnsChange 21726 }; 21727} 21728const TableBody = defineComponent({ 21729 name: "ZmTableBody", 21730 props: defaultProps$7, 21731 emits: ["after-leave", "after-enter"], 21732 setup(props, { emit }) { 21733 const instance = getCurrentInstance(); 21734 const owner = inject(TABLE_INJECTION_KEY); 21735 const { t } = useLocale(merge({}, messages$4, messages$c, messages$a)); 21736 const { onColumnsChange } = useLayoutObserver$1(owner); 21737 const ns = useNamespace("table"); 21738 const { wrappedRowRender, handleDragEnd } = useRender$4(props); 21739 provide(TABLE_BODY_INJECTION_KEY, {}); 21740 instance.state = { 21741 onColumnsChange 21742 }; 21743 watch(owner.store.states.hoverRow, (newVal) => { 21744 const skeleton = owner.store.states.skeleton.value; 21745 if (skeleton && skeleton.loading) { 21746 /* istanbul ignore next @preserve */ 21747 return; 21748 } 21749 requestAnimationFrame(() => { 21750 const el = instance.vnode.el; 21751 const rows = Array.from(el.children).filter((e) => e.classList.contains(`${ns.e("row")}`)); 21752 const newRow = rows[newVal]; 21753 rows.forEach((row) => { 21754 removeClass(row, "hover-row"); 21755 }); 21756 if (newRow) { 21757 addClass(newRow, "hover-row"); 21758 } 21759 }); 21760 }); 21761 const buildSkeleton = () => { 21762 const skeleton = owner.store.states.skeleton.value; 21763 const data = []; 21764 let len = skeleton.row; 21765 while (len--) { 21766 data.push([]); 21767 } 21768 return data; 21769 }; 21770 return () => { 21771 var _a; 21772 let data = owner.store.states.data.value; 21773 if (data.length === 0 && ((_a = owner.store.states.skeleton.value) == null ? void 0 : _a.loading)) { 21774 data = buildSkeleton(); 21775 return h("tbody", [ 21776 data.reduce((acc, row) => { 21777 return acc.concat(wrappedRowRender(row, acc.length)); 21778 }, []) 21779 ]); 21780 } 21781 const hasDraggableColumn = owner.store.states.columns.value.some( 21782 ({ type }) => type === "draggable" 21783 ); 21784 const rowKey = owner.store.states.rowKey.value; 21785 if (hasDraggableColumn) { 21786 owner.dragAriaDescribedbyText.value = t("table.dragAndDropTip"); 21787 } 21788 return hasDraggableColumn ? h( 21789 Draggable, 21790 { 21791 tag: "tbody", 21792 modelValue: data, 21793 animation: 200, 21794 itemKey: rowKey, 21795 "onUpdate:modelValue": (value) => { 21796 owner.store.commit("setData", value); 21797 }, 21798 onEnd: (e) => { 21799 handleDragEnd(e, data); 21800 } 21801 }, 21802 { 21803 item: ({ element, index: index2 }) => { 21804 return wrappedRowRender(element, index2); 21805 } 21806 } 21807 ) : h( 21808 TransitionGroup, 21809 { 21810 tag: "tbody", 21811 name: "table-list", 21812 onAfterLeave: () => { 21813 emit("after-leave"); 21814 }, 21815 onAfterEnter: () => { 21816 emit("after-enter"); 21817 } 21818 }, 21819 () => { 21820 return [ 21821 data.reduce((acc, row) => { 21822 return acc.concat(wrappedRowRender(row, acc.length)); 21823 }, []) 21824 ]; 21825 } 21826 ); 21827 }; 21828 } 21829}); 21830const defaultProps$6 = { 21831 summaryMethod: Function, 21832 sumText: String 21833}; 21834function useStyle$2() { 21835 const owner = inject(TABLE_INJECTION_KEY); 21836 const ns = useNamespace("table"); 21837 const getCellClasses = (columns, cellIndex) => { 21838 const column = columns[cellIndex]; 21839 const classes = [ 21840 column.id, 21841 column.align, 21842 column.labelClassName, 21843 column.className, 21844 ...getFixedColumnsClass$1(ns.b(), cellIndex, owner.store, column.fixed) 21845 ]; 21846 if (cellIndex === 0) { 21847 classes.push("sum-total"); 21848 } 21849 return classes; 21850 }; 21851 const getCellStyles = (column, cellIndex) => { 21852 const fixedStyle = getFixedColumnOffset$1(cellIndex, owner.store, column.fixed); 21853 ensurePosition$1(fixedStyle, "left"); 21854 ensurePosition$1(fixedStyle, "right"); 21855 return fixedStyle; 21856 }; 21857 return { 21858 getCellClasses, 21859 getCellStyles 21860 }; 21861} 21862const TableFooter$1 = defineComponent({ 21863 name: "ZmTableFooter", 21864 props: defaultProps$6, 21865 setup(props) { 21866 const { getCellClasses, getCellStyles } = useStyle$2(); 21867 const ns = useNamespace("table"); 21868 const owner = inject(TABLE_INJECTION_KEY); 21869 return () => { 21870 const data = owner.store.states.data.value; 21871 const columns = owner.store.states.columns.value; 21872 let sums = []; 21873 if (props.summaryMethod) { 21874 sums = props.summaryMethod({ 21875 columns, 21876 data 21877 }); 21878 } else { 21879 columns.forEach((column, index2) => { 21880 if (index2 === 0) { 21881 sums[index2] = props.sumText; 21882 return; 21883 } 21884 const values = data.map((item) => Number(item[column.prop])); 21885 const precisions = []; 21886 let notNumber = true;
21887 values.forEach((value) => { 21888 if (!Number.isNaN(+value)) { 21889 notNumber = false; 21890 const decimal = `${value}`.split(".")[1]; 21891 precisions.push(decimal ? decimal.length : 0); 21892 } 21893 }); 21894 const precision = Math.max.apply(null, precisions); 21895 if (!notNumber) { 21896 sums[index2] = values.reduce((prev, curr) => { 21897 const value = Number(curr); 21898 if (!Number.isNaN(+value)) { 21899 return Number.parseFloat((prev + curr).toFixed(Math.min(precision, 20))); 21900 } else { 21901 return prev; 21902 } 21903 }, 0); 21904 } else { 21905 sums[index2] = ""; 21906 } 21907 }); 21908 } 21909 return h( 21910 "table", 21911 { 21912 class: ns.e("footer"), 21913 cellspacing: "0", 21914 cellpadding: "0", 21915 border: "0", 21916 role: "presentation" 21917 }, 21918 [ 21919 h(TableColgroup$1, { 21920 columns 21921 }), 21922 h("tbody", [ 21923 h( 21924 "tr", 21925 { 21926 role: "row" 21927 }, 21928 [ 21929 ...columns.map( 21930 (column, cellIndex) => h( 21931 "td", 21932 { 21933 key: cellIndex, 21934 colspan: column.colSpan, 21935 rowspan: column.rowSpan, 21936 class: getCellClasses(columns, cellIndex), 21937 style: getCellStyles(column, cellIndex) 21938 }, 21939 [ 21940 h( 21941 "div", 21942 { 21943 class: ["cell", column.labelClassName] 21944 }, 21945 h( 21946 "span", 21947 { 21948 tabindex: "-1", 21949 role: "cell" 21950 }, 21951 [sums[cellIndex]] 21952 ) 21953 ) 21954 ] 21955 ) 21956 ) 21957 ] 21958 ) 21959 ]) 21960 ] 21961 ); 21962 }; 21963 } 21964}); 21965/* istanbul ignore next @preserve */ 21966const defaultProps$5 = { 21967 data: { 21968 type: Array, 21969 default: () => [] 21970 }, 21971 skeleton: Object, 21972 showHeader: { 21973 type: Boolean, 21974 default: true 21975 }, 21976 emptyText: String, 21977 height: [String, Number], 21978 maxHeight: [String, Number], 21979 headerRowClassName: [String, Function], 21980 headerRowStyle: [Object, Function], 21981 headerCellClassName: [String, Function], 21982 headerCellStyle: [Object, Function], 21983 rowClassName: [String, Function], 21984 rowStyle: [Object, Function], 21985 cellClassName: [String, Function], 21986 cellStyle: [Object, Function], 21987 rowKey: [String, Function], 21988 stickyHeader: [Boolean, Object], 21989 stickyBar: [Boolean, Object], 21990 selectOnIndeterminate: { 21991 type: Boolean, 21992 default: true 21993 }, 21994 defaultSort: Object, 21995 defaultExpandAll: Boolean, 21996 showSummary: Boolean, 21997 sumText: String, 21998 summaryMethod: Function, 21999 adjustColumn: Boolean, 22000 treeProps: { 22001 type: Object, 22002 default: () => { 22003 return { 22004 hasChildren: "hasChildren", 22005 children: "children" 22006 }; 22007 } 22008 }, 22009 lazy: Boolean, 22010 load: Function, 22011 expandRowKeys: Array, 22012 initDisplayedColumn: Object, 22013 useFlip: { 22014 type: [Boolean, Object], 22015 default: true 22016 }, 22017 spanMethod: Function, 22018 forceExpand: [Boolean, Object] 22019}; 22020function useUtils$2(store2, radio) { 22021 const instance = getCurrentInstance(); 22022 const getSelectionRows = () => { 22023 return store2.getSelectionRows(); 22024 }; 22025 const toggleRowSelection = (row, selected) => { 22026 store2.toggleRowSelection(row, selected, false); 22027 store2.updateAllSelected(); 22028 }; 22029 const clearSelection = () => { 22030 store2.clearSelection(); 22031 }; 22032 const toggleAllSelection = () => { 22033 store2.commit("toggleAllSelection"); 22034 }; 22035 const getSingleSelection = () => { 22036 return store2.getSingleSelection(); 22037 }; 22038 const setSingleSelection = (row) => { 22039 const data = store2.states.data.value; 22040 const index2 = data.findIndex((element) => { 22041 return isEqual(element, row); 22042 }); 22043 if (index2 > -1) { 22044 radio.value = index2 + 1; 22045 store2.setSingleSelection(row); 22046 instance.state.focus(index2 + 1, 0, 0); 22047 } 22048 }; 22049 const clearSingleSelection = () => { 22050 radio.value = 0; 22051 store2.clearSingleSelection(); 22052 }; 22053 const clearSort = () => { 22054 store2.clearSort(); 22055 }; 22056 const sort2 = (prop, order) => { 22057 store2.commit("sort", { prop, order }); 22058 }; 22059 const clearFilter = (columnKeys) => { 22060 store2.clearFilter(columnKeys); 22061 }; 22062 const toggleRowExpansion = (row, expanded) => { 22063 store2.toggleRowExpansion(row, expanded); 22064 }; 22065 return { 22066 getSelectionRows, 22067 toggleRowSelection, 22068 clearSelection, 22069 toggleAllSelection, 22070 getSingleSelection, 22071 setSingleSelection, 22072 clearSingleSelection, 22073 clearSort, 22074 sort: sort2, 22075 clearFilter, 22076 toggleRowExpansion 22077 }; 22078} 22079function useKeyRender$1(table) { 22080 const observer = ref(); 22081 const initWatchDom = () => { 22082 const el = table.vnode.el; 22083 const columnsWrapper = el.querySelector(".hidden-columns"); 22084 const config = { childList: true, subtree: true }; 22085 const updateOrderFns = table.store.states.updateOrderFns; 22086 observer.value = new MutationObserver(() => { 22087 updateOrderFns.forEach((fn) => fn()); 22088 }); 22089 observer.value.observe(columnsWrapper, config); 22090 }; 22091 onMounted(() => { 22092 initWatchDom(); 22093 }); 22094 onUnmounted(() => { 22095 var _a; 22096 (_a = observer.value) == null ? void 0 : _a.disconnect(); 22097 }); 22098} 22099var __defProp$v = Object.defineProperty; 22100var __defProps$p = Object.defineProperties; 22101var __getOwnPropDescs$p = Object.getOwnPropertyDescriptors; 22102var __getOwnPropSymbols$v = Object.getOwnPropertySymbols; 22103var __hasOwnProp$v = Object.prototype.hasOwnProperty; 22104var __propIsEnum$v = Object.prototype.propertyIsEnumerable; 22105var __defNormalProp$v = (obj, key, value) => key in obj ? __defProp$v(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 22106var __spreadValues$v = (a, b) => { 22107 for (var prop in b || (b = {})) 22108 if (__hasOwnProp$v.call(b, prop)) 22109 __defNormalProp$v(a, prop, b[prop]); 22110 if (__getOwnPropSymbols$v) 22111 for (var prop of __getOwnPropSymbols$v(b)) { 22112 if (__propIsEnum$v.call(b, prop)) 22113 __defNormalProp$v(a, prop, b[prop]); 22114 } 22115 return a; 22116}; 22117var __spreadProps$p = (a, b) => __defProps$p(a, __getOwnPropDescs$p(b)); 22118const DIALOG_INJECTION_KEY = Symbol("ZmDialog"); 22119const dialogContentProps = { 22120 fullscreen: Boolean, 22121 showClose: Boolean, 22122 testId: String, 22123 title: { 22124 type: String, 22125 default: "" 22126 }, 22127 allowedResize: Boolean, 22128 size: { 22129 type: String, 22130 default: "md" 22131 }, 22132 offsetSpace: { type: Number, default: 60 }, 22133 draggable: Boolean 22134}; 22135const dialogContentEmits = ["close"]; 22136const dialogProps = __spreadProps$p(__spreadValues$v({}, dialogContentProps), { 22137 beforeClose: definePropType(Function), 22138 closeOnPressEscape: { 22139 type: Boolean, 22140 default: true 22141 }, 22142 modelValue: Boolean, 22143 zIndex: Number, 22144 width: String, 22145 testId: String, 22146 readDescription: Boolean, 22147 allowedBodyResize: Boolean,
22148 closeOnClickModal: Boolean, 22149 focusTrapImmediate: Boolean, 22150 teleported: { 22151 type: Boolean, 22152 default: true 22153 }, 22154 allowFocusOut: Boolean, 22155 draggable: Boolean, 22156 preventBodyScroll: { 22157 type: Boolean, 22158 default: true 22159 } 22160}); 22161const dialogEmits = ["open", "opened", "close", "closed", "update:modelValue"]; 22162let tableIdSeed$1 = 1; 22163const _sfc_main$j = defineComponent({ 22164 name: "ZmTable", 22165 components: { 22166 TableColgroup: TableColgroup$1, 22167 TableHeader: TableHeader$1, 22168 TableBody, 22169 TableFooter: TableFooter$1, 22170 ZmScrollbar: _sfc_main$V, 22171 ZmSticky: _sfc_main$X, 22172 ZmRadioGroup, 22173 ZmVisuallyHidden 22174 }, 22175 props: defaultProps$5, 22176 emits: [ 22177 "select", 22178 "select-all", 22179 "selection-change", 22180 "single-selection-change", 22181 "sort-change", 22182 "filter-change", 22183 "expand-change", 22184 "header-dragend", 22185 "drag-end", 22186 "row-click", 22187 "row-contextmenu", 22188 "display-columns-change" 22189 ], 22190 setup(props) { 22191 const ns = useNamespace("table"); 22192 const mergedMessages = merge({}, messages$4, messages$a, messages$c); 22193 const { t } = useLocale(mergedMessages); 22194 const table = getCurrentInstance(); 22195 table.t = t; 22196 const dragAriaDescribedby = useId(); 22197 provide(TABLE_INJECTION_KEY, table); 22198 const isInDialog = !!inject(DIALOG_INJECTION_KEY, void 0); 22199 const store2 = createStore$1(table, props); 22200 table.store = store2; 22201 const layout = new TableLayout$1({ 22202 table, 22203 store: table.store 22204 }); 22205 table.layout = layout; 22206 table.tableId = `${ns.namespace}-table_${tableIdSeed$1++}`; 22207 table.useFlip = computed(() => { 22208 return !isInDialog && props.useFlip; 22209 }); 22210 table.dragAriaDescribedby = dragAriaDescribedby.value; 22211 table.dragAriaDescribedbyText = ref(""); 22212 const { 22213 resizeState, 22214 isGroup, 22215 radio, 22216 renderExpanded, 22217 tableBodyStyles, 22218 scrollbarStyle, 22219 emptyBlockStyle, 22220 emptyTDStyle, 22221 isEmpty: isEmpty2, 22222 computedEmptyText, 22223 computedSumText, 22224 debouncedUpdateLayout, 22225 stickyContainerCls, 22226 hasSingleSelection, 22227 resizeProxyVisible, 22228 tableCls, 22229 shouldShowHeader, 22230 dragAriaDescribedbyText, 22231 tableHeaderWidth, 22232 buildA11y, 22233 focus, 22234 focusElement, 22235 doLayout, 22236 updateScrollBar, 22237 setDragVisible, 22238 getParentTable, 22239 handleStickyChange, 22240 syncPosition 22241 } = useRender$5(props, layout, store2, table, t); 22242 const { 22243 getSelectionRows, 22244 toggleRowSelection, 22245 clearSelection, 22246 toggleAllSelection, 22247 getSingleSelection, 22248 setSingleSelection, 22249 clearSingleSelection, 22250 clearSort, 22251 sort: sort2, 22252 clearFilter, 22253 toggleRowExpansion 22254 } = useUtils$2(store2, radio); 22255 table.state = { 22256 isGroup, 22257 resizeState, 22258 doLayout, 22259 debouncedUpdateLayout, 22260 getParentTable, 22261 syncPosition, 22262 buildA11y, 22263 focus, 22264 tableHeaderWidth 22265 }; 22266 useKeyRender$1(table); 22267 return { 22268 ns, 22269 dragAriaDescribedby, 22270 dragAriaDescribedbyText, 22271 layout, 22272 context: table, 22273 store: store2, 22274 tableBodyStyles, 22275 scrollbarStyle, 22276 emptyBlockStyle, 22277 emptyTDStyle, 22278 isEmpty: isEmpty2, 22279 computedEmptyText, 22280 computedSumText, 22281 stickyContainerCls, 22282 hasSingleSelection, 22283 isGroup, 22284 radio, 22285 renderExpanded, 22286 getSelectionRows, 22287 toggleRowSelection, 22288 clearSelection, 22289 toggleAllSelection, 22290 getSingleSelection, 22291 setSingleSelection, 22292 clearSingleSelection, 22293 clearSort, 22294 sort: sort2, 22295 clearFilter, 22296 toggleRowExpansion, 22297 resizeProxyVisible, 22298 tableCls, 22299 shouldShowHeader, 22300 updateScrollBar, 22301 setDragVisible, 22302 handleStickyChange, 22303 buildA11y, 22304 focusElement 22305 }; 22306 } 22307}); 22308const _hoisted_1$d = { 22309 ref: "hiddenColumns", 22310 class: "hidden-columns" 22311}; 22312function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) { 22313 const _component_table_colgroup = resolveComponent("table-colgroup"); 22314 const _component_table_header = resolveComponent("table-header");
22315 const _component_zm_sticky = resolveComponent("zm-sticky"); 22316 const _component_table_body = resolveComponent("table-body"); 22317 const _component_zm_radio_group = resolveComponent("zm-radio-group"); 22318 const _component_zm_scrollbar = resolveComponent("zm-scrollbar"); 22319 const _component_table_footer = resolveComponent("table-footer"); 22320 const _component_zm_visually_hidden = resolveComponent("zm-visually-hidden"); 22321 return openBlock(), createElementBlock("div", { 22322 ref: "tableWrapper", 22323 role: "table", 22324 class: normalizeClass([ 22325 _ctx.ns.b(), 22326 { 22327 [_ctx.ns.m("scrollable-x")]: _ctx.layout.scrollX.value, 22328 [_ctx.ns.m("scrollable-y")]: _ctx.layout.scrollY.value, 22329 [_ctx.ns.m("group")]: _ctx.isGroup, 22330 [_ctx.ns.m("span")]: !!_ctx.spanMethod, 22331 [_ctx.ns.m("enable-row-transition")]: _ctx.store.states.data.value.length !== 0 && _ctx.store.states.data.value.length < 200 22332 } 22333 ]) 22334 }, [ 22335 createBaseVNode("div", { 22336 class: normalizeClass([_ctx.ns.e("inner-wrapper"), _ctx.stickyContainerCls]) 22337 }, [ 22338 createBaseVNode("div", _hoisted_1$d, [ 22339 renderSlot(_ctx.$slots, "default") 22340 ], 512), 22341 _ctx.stickyHeader ? (openBlock(), createBlock(_component_zm_sticky, { 22342 key: 0, 22343 position: "top", 22344 offset: _ctx.stickyHeader.offset, 22345 target: `.${_ctx.stickyContainerCls}`, 22346 onChange: _ctx.handleStickyChange 22347 }, { 22348 default: withCtx(() => [ 22349 _ctx.shouldShowHeader ? (openBlock(), createElementBlock("div", { 22350 key: 0, 22351 ref: "headerWrapper", 22352 class: normalizeClass(_ctx.ns.e("header-wrapper")) 22353 }, [ 22354 createBaseVNode("table", { 22355 ref: "tableHeader", 22356 role: "presentation", 22357 class: normalizeClass(_ctx.ns.e("header")), 22358 style: normalizeStyle(_ctx.tableBodyStyles), 22359 cellpadding: "0", 22360 cellspacing: "0", 22361 border: "0" 22362 }, [ 22363 createVNode(_component_table_colgroup, { 22364 columns: _ctx.store.states.columns.value, 22365 "force-expand": _ctx.forceExpand 22366 }, null, 8, ["columns", "force-expand"]), 22367 createVNode(_component_table_header, { 22368 ref: "tableHeaderRef", 22369 "default-sort": _ctx.defaultSort, 22370 onSetDragVisible: _ctx.setDragVisible 22371 }, null, 8, ["default-sort", "onSetDragVisible"]) 22372 ], 6) 22373 ], 2)) : createCommentVNode("", true) 22374 ]), 22375 _: 1 22376 }, 8, ["offset", "target", "onChange"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [ 22377 _ctx.shouldShowHeader ? (openBlock(), createElementBlock("div", { 22378 key: 0, 22379 ref: "headerWrapper", 22380 class: normalizeClass(_ctx.ns.e("header-wrapper")) 22381 }, [ 22382 createBaseVNode("table", { 22383 ref: "tableHeader", 22384 role: "presentation", 22385 class: normalizeClass(_ctx.ns.e("header")), 22386 style: normalizeStyle(_ctx.tableBodyStyles), 22387 cellpadding: "0", 22388 cellspacing: "0", 22389 border: "0" 22390 }, [ 22391 createVNode(_component_table_colgroup, { 22392 columns: _ctx.store.states.columns.value, 22393 "force-expand": _ctx.forceExpand 22394 }, null, 8, ["columns", "force-expand"]), 22395 createVNode(_component_table_header, { 22396 ref: "tableHeaderRef", 22397 "default-sort": _ctx.defaultSort, 22398 onSetDragVisible: _ctx.setDragVisible 22399 }, null, 8, ["default-sort", "onSetDragVisible"]) 22400 ], 6) 22401 ], 2)) : createCommentVNode("", true) 22402 ], 64)), 22403 createBaseVNode("div", { 22404 ref: "bodyWrapper", 22405 class: normalizeClass(_ctx.ns.e("body-wrapper")) 22406 }, [ 22407 createVNode(_component_zm_scrollbar, { 22408 ref: "scrollBarRef", 22409 "sticky-x-track": _ctx.stickyBar ? { 22410 target: `.${_ctx.stickyContainerCls}`, 22411 offset: _ctx.stickyBar.offset || 2 22412 } : void 0, 22413 "wrap-style": _ctx.scrollbarStyle, 22414 always: "" 22415 }, { 22416 default: withCtx(() => [ 22417 _ctx.hasSingleSelection ? (openBlock(), createBlock(_component_zm_radio_group, { 22418 key: 0, 22419 modelValue: _ctx.radio, 22420 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.radio = $event), 22421 role: "presentation" 22422 }, { 22423 default: withCtx(() => [ 22424 createBaseVNode("table", { 22425 ref: "tableBody", 22426 role: "presentation", 22427 class: normalizeClass(_ctx.ns.e("body")), 22428 cellspacing: "0", 22429 cellpadding: "0", 22430 border: "0", 22431 style: normalizeStyle(_ctx.tableBodyStyles) 22432 }, [ 22433 !_ctx.store.states.flip.value ? (openBlock(), createBlock(_component_table_colgroup, { 22434 key: 0, 22435 columns: _ctx.store.states.columns.value, 22436 "force-expand": _ctx.forceExpand 22437 }, null, 8, ["columns", "force-expand"])) : createCommentVNode("", true), 22438 createVNode(_component_table_body, { 22439 context: _ctx.context,
22440 "row-class-name": _ctx.rowClassName, 22441 "row-style": _ctx.rowStyle 22442 }, null, 8, ["context", "row-class-name", "row-style"]) 22443 ], 6) 22444 ]), 22445 _: 1 22446 }, 8, ["modelValue"])) : (openBlock(), createElementBlock("table", { 22447 key: 1, 22448 ref: "tableBody", 22449 role: "presentation", 22450 class: normalizeClass(_ctx.tableCls), 22451 cellspacing: "0", 22452 cellpadding: "0", 22453 border: "0", 22454 style: normalizeStyle(_ctx.tableBodyStyles) 22455 }, [ 22456 !_ctx.store.states.flip.value ? (openBlock(), createBlock(_component_table_colgroup, { 22457 key: 0, 22458 columns: _ctx.store.states.columns.value, 22459 "force-expand": _ctx.forceExpand 22460 }, null, 8, ["columns", "force-expand"])) : createCommentVNode("", true), 22461 createVNode(_component_table_body, { 22462 context: _ctx.context, 22463 "row-class-name": _ctx.rowClassName, 22464 "row-style": _ctx.rowStyle, 22465 onAfterLeave: _ctx.updateScrollBar, 22466 onAfterEnter: _ctx.updateScrollBar 22467 }, null, 8, ["context", "row-class-name", "row-style", "onAfterLeave", "onAfterEnter"]) 22468 ], 6)), 22469 createBaseVNode("tbody", null, [ 22470 _ctx.isEmpty ? (openBlock(), createElementBlock("tr", { 22471 key: 0, 22472 role: "row", 22473 style: normalizeStyle(_ctx.emptyBlockStyle), 22474 class: normalizeClass(_ctx.ns.e("empty-block")) 22475 }, [ 22476 createBaseVNode("td", { 22477 ref: "emptyTD", 22478 role: "cell", 22479 class: normalizeClass(_ctx.ns.e("empty-text")), 22480 style: normalizeStyle(_ctx.emptyTDStyle) 22481 }, [ 22482 renderSlot(_ctx.$slots, "empty", {}, () => [ 22483 createBaseVNode("span", { 22484 role: "alert", 22485 class: normalizeClass(_ctx.ns.e("empty-image")) 22486 }, toDisplayString(_ctx.computedEmptyText), 3) 22487 ]) 22488 ], 6) 22489 ], 6)) : createCommentVNode("", true) 22490 ]) 22491 ]), 22492 _: 3 22493 }, 8, ["sticky-x-track", "wrap-style"]) 22494 ], 2), 22495 _ctx.showSummary && !_ctx.isEmpty ? (openBlock(), createElementBlock("div", { 22496 key: 2, 22497 ref: "footerWrapper", 22498 class: normalizeClass(_ctx.ns.e("footer-wrapper")) 22499 }, [ 22500 createVNode(_component_table_footer, { 22501 style: normalizeStyle(_ctx.tableBodyStyles), 22502 "sum-text": _ctx.computedSumText, 22503 "summary-method": _ctx.summaryMethod 22504 }, null, 8, ["style", "sum-text", "summary-method"]) 22505 ], 2)) : createCommentVNode("", true) 22506 ], 2), 22507 withDirectives(createBaseVNode("div", { 22508 ref: "resizeProxy", 22509 class: normalizeClass(_ctx.ns.e("column-resize-proxy")) 22510 }, null, 2), [ 22511 [vShow, _ctx.resizeProxyVisible] 22512 ]), 22513 createVNode(_component_zm_visually_hidden, { id: _ctx.dragAriaDescribedby }, { 22514 default: withCtx(() => [ 22515 createTextVNode(toDisplayString(_ctx.dragAriaDescribedbyText), 1) 22516 ]), 22517 _: 1 22518 }, 8, ["id"]) 22519 ], 2); 22520} 22521const Table = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$2]]); 22522const align$1 = ["center", "right"]; 22523const isValidAlignment$1 = (val) => [...align$1].includes(val); 22524const defaultProps$4 = { 22525 width: { 22526 type: [String, Number], 22527 default: "" 22528 }, 22529 minWidth: { 22530 type: [String, Number], 22531 default: 150 22532 }, 22533 prop: String, 22534 label: String, 22535 className: String, 22536 labelClassName: String, 22537 align: { 22538 type: String, 22539 validator: isValidAlignment$1 22540 }, 22541 headerAlign: { 22542 type: String, 22543 validator: isValidAlignment$1 22544 }, 22545 columnKey: String, 22546 fixed: [Boolean, String], 22547 type: { 22548 type: String, 22549 default: "default" 22550 }, 22551 reserveSelection: Boolean, 22552 selectable: Function, 22553 selectableHeader: Function, 22554 selectedColumnIndex: Number, 22555 singleSelectable: Function, 22556 sortable: [Boolean, String], 22557 sortMethod: Function, 22558 sortBy: [String, Function, Array], 22559 sortOrders: { 22560 type: Array, 22561 default: () => { 22562 return ["ascending", "descending", null]; 22563 }, 22564 validator: (val) => { 22565 return val.every((order) => ["ascending", "descending", null].includes(order)); 22566 } 22567 }, 22568 filters: Array, 22569 filterMethod: Function, 22570 filteredValue: Array, 22571 filterPlacement: String, 22572 needDisplay: { 22573 type: Boolean, 22574 default: true 22575 }, 22576 formatter: Function, 22577 showOverflowTooltip: Boolean, 22578 tooltipable: Function 22579}; 22580function useWatcher$2(owner, props) { 22581 const instance = getCurrentInstance(); 22582 const registerComplexWatchers = () => { 22583 const watchProps = ["fixed", "width", "minWidth"];
22584 Object.values(watchProps).forEach((key) => { 22585 watch( 22586 () => props[key], 22587 (newVal) => { 22588 let value = newVal; 22589 if (key === "width" || key === "minWidth") { 22590 value = parseWidth$1(newVal); 22591 } 22592 instance.columnConfig.value[key] = value; 22593 const updateColumns = key === "fixed"; 22594 owner.store.scheduleLayout(updateColumns); 22595 } 22596 ); 22597 }); 22598 }; 22599 const registerNormalWatchers = () => { 22600 const watchProps = [ 22601 "label", 22602 "className", 22603 "labelClassName", 22604 "props", 22605 "sortable", 22606 "filters", 22607 "needDisplay", 22608 "formatter", 22609 "showOverflowTooltip" 22610 ]; 22611 Object.values(watchProps).forEach((key) => { 22612 watch( 22613 () => props[key], 22614 (newVal) => { 22615 instance.columnConfig.value[key] = newVal; 22616 } 22617 ); 22618 }); 22619 }; 22620 return { 22621 registerComplexWatchers, 22622 registerNormalWatchers 22623 }; 22624} 22625const defaultClassNames$1 = { 22626 draggable: "table__draggable-column", 22627 single: "table__single-column" 22628}; 22629function defaultRenderCell$1({ 22630 row, 22631 column, 22632 $index, 22633 t: tFromData 22634}) { 22635 const t = tFromData || useLocale({}, { useScope: "global" }).t; 22636 const prop = column.prop; 22637 const value = prop && getProp(row, prop).value; 22638 if (column.formatter) { 22639 return column.formatter(row, column, value, $index); 22640 } 22641 return (value == null ? void 0 : value.toString()) || h("span", { class: "label-empty" }, t("basic.blank")); 22642} 22643const cellStarts$1 = { 22644 default: {}, 22645 selection: { 22646 width: 52, 22647 minWidth: 52, 22648 realWidth: 52 22649 }, 22650 single: { 22651 width: 52, 22652 minWidth: 52, 22653 realWidth: 52 22654 }, 22655 expand: { 22656 width: 56, 22657 minWidth: 56, 22658 realWidth: 56 22659 }, 22660 draggable: { 22661 width: 44, 22662 minWidth: 44, 22663 realWidth: 44 22664 } 22665}; 22666const getDefaultClassName$1 = (type) => { 22667 return defaultClassNames$1[type] || ""; 22668}; 22669const renderBlack$1 = (scope) => { 22670 var _a; 22671 const t = (scope == null ? void 0 : scope.store) ? (_a = scope.store.table) == null ? void 0 : _a.t : void 0; 22672 const label = t ? t("basic.blank") : "â"; 22673 return h( 22674 "div", 22675 { 22676 class: "label-empty-wrapper", 22677 role: "cell", 22678 tabindex: "-1", 22679 ariaLabel: !isMac ? label : void 0 22680 }, 22681 h( 22682 "span", 22683 { 22684 class: "label-empty" 22685 }, 22686 label 22687 ) 22688 ); 22689}; 22690const cellForced$1 = { 22691 selection: { 22692 renderHeader({ column, store: store2 }) { 22693 var _a; 22694 const disabled = column.selectableHeader ? !column.selectableHeader.call(null) : store2.states.data && store2.states.data.value.length === 0; 22695 const t = (_a = store2.table) == null ? void 0 : _a.t; 22696 return h(_sfc_main$O, { 22697 disabled, 22698 ariaLabel: t ? t("basic.selectAll") : "Select all", 22699 indeterminate: store2.states.selection.value.length > 0 && !store2.states.isAllSelected.value, 22700 readMixed: true, 22701 "onUpdate:modelValue": store2.toggleAllSelection, 22702 modelValue: store2.states.isAllSelected.value 22703 }); 22704 }, 22705 renderCell({ 22706 row, 22707 column, 22708 store: store2, 22709 $index 22710 }) { 22711 const disabled = column.selectable ? !column.selectable.call(null, row, $index) : false; 22712 const tooltip = column.tooltipable ? column.tooltipable.call(null, row, $index) : false; 22713 return tooltip ? h( 22714 _sfc_main$I, 22715 { 22716 content: tooltip 22717 }, 22718 () => { 22719 return h(_sfc_main$O, { 22720 disabled, 22721 "aria-label": getFirstColumnAriaLabel$1(0, row, $index + 2, store2, column), 22722 onChange: () => { 22723 store2.commit("rowSelectedChanged", row); 22724 }, 22725 modelValue: store2.isSelected(row) 22726 }); 22727 } 22728 ) : h(_sfc_main$O, { 22729 disabled, 22730 "aria-label": getFirstColumnAriaLabel$1(0, row, $index + 2, store2, column), 22731 onChange: () => { 22732 store2.commit("rowSelectedChanged", row); 22733 }, 22734 modelValue: store2.isSelected(row) 22735 }); 22736 }, 22737 sortable: false, 22738 resizable: false 22739 }, 22740 single: { 22741 renderHeader(scope) { 22742 return renderBlack$1(scope); 22743 }, 22744 renderCell({ 22745 row, 22746 column, 22747 store: store2, 22748 $index 22749 }) { 22750 store2.assertRowKey(); 22751 const disabled = column.singleSelectable ? !column.singleSelectable.call(null, row, $index) : false;
22752 const tooltip = column.tooltipable ? column.tooltipable.call(null, row, $index) : false; 22753 return tooltip ? h( 22754 _sfc_main$I, 22755 { 22756 content: tooltip 22757 }, 22758 () => { 22759 return h( 22760 _sfc_main$Q, 22761 { 22762 disabled, 22763 key: $index, 22764 label: row[store2.states.rowKey.value], 22765 "aria-label": getFirstColumnAriaLabel$1(0, row, $index + 2, store2, column, isMac) 22766 }, 22767 () => { 22768 return h("span", " "); 22769 } 22770 ); 22771 } 22772 ) : h( 22773 _sfc_main$Q, 22774 { 22775 disabled, 22776 key: $index, 22777 label: row[store2.states.rowKey.value], 22778 "aria-label": getFirstColumnAriaLabel$1(0, row, $index + 2, store2, column, isMac) 22779 }, 22780 () => { 22781 return h("span", " "); 22782 } 22783 ); 22784 }, 22785 sortable: false, 22786 resizable: false 22787 }, 22788 expand: { 22789 renderHeader(scope) { 22790 return renderBlack$1(scope); 22791 }, 22792 renderCell({ 22793 row, 22794 column, 22795 store: store2, 22796 expanded, 22797 $index 22798 }) { 22799 const { ns } = store2; 22800 const classes = [ns.e("expand-icon")]; 22801 if (expanded) { 22802 classes.push(ns.em("expand-icon", "expanded")); 22803 } 22804 return h(_sfc_main$_, { 22805 icon: ChevronRightV2, 22806 type: "tertiary", 22807 size: "sm", 22808 "aria-label": getFirstColumnAriaLabel$1(2, row, $index + 2, store2, column), 22809 ariaExpanded: expanded, 22810 class: classes, 22811 tabindex: "-1", 22812 onClick: () => { 22813 store2.toggleRowExpansion(row); 22814 } 22815 }); 22816 }, 22817 sortable: false, 22818 resizable: false 22819 }, 22820 draggable: { 22821 renderHeader() { 22822 return renderBlack$1(); 22823 }, 22824 renderCell({ 22825 row, 22826 store: store2, 22827 $index, 22828 column 22829 }) { 22830 const owner = inject(TABLE_INJECTION_KEY); 22831 const { t } = useLocale({}, { useScope: "global" }); 22832 const data = store2.states.data.value.slice(); 22833 store2.assertRowKey(); 22834 const handleKeyDown = (event) => { 22835 const code = event.code; 22836 const isEdit = data[$index].isEdit; 22837 const len = data.length; 22838 switch (code) { 22839 case EVENT_CODE.up: 22840 if ($index > 0) { 22841 if (isEdit) { 22842 swap$1(data, $index, $index - 1); 22843 store2.commit("setData", data); 22844 announceMoved($index - 1, t); 22845 nextTick(() => { 22846 owner.state.focus(); 22847 }); 22848 } 22849 } 22850 owner.emit("drag-end", data); 22851 event.preventDefault(); 22852 break; 22853 case EVENT_CODE.down: 22854 if ($index < len - 1) { 22855 if (isEdit) { 22856 swap$1(data, $index, $index + 1); 22857 store2.commit("setData", data); 22858 announceMoved($index + 1, t); 22859 nextTick(() => { 22860 owner.state.focus(); 22861 }); 22862 } 22863 } 22864 owner.emit("drag-end", data); 22865 event.preventDefault(); 22866 break; 22867 case EVENT_CODE.enter: 22868 case EVENT_CODE.numpadEnter: 22869 case EVENT_CODE.space: 22870 resetColumnListEdit(); 22871 data[$index].isEdit = !isEdit; 22872 announce(!isEdit ? t("table.grabbed") : t("table.dropped")); 22873 break; 22874 } 22875 }; 22876 const handleFocus = (event) => { 22877 const node = event.relatedTarget; 22878 if (node && !isInTable$1(node, owner)) { 22879 const isEdit = data[$index].isEdit; 22880 announce(isEdit ? t("table.grabbed") : t("table.dropped")); 22881 } 22882 }; 22883 const resetColumnListEdit = () => { 22884 data.forEach((row2) => { 22885 row2.isEdit = false; 22886 }); 22887 }; 22888 const getDragIcon = (row2) => { 22889 return row2.isEdit ? Checkmark : DragHandleDots; 22890 }; 22891 const announceMoved = (index2, t2) => { 22892 if (data[index2].isEdit) { 22893 announce(t2("table.movePosition", { index: index2 + 2 })); 22894 } 22895 }; 22896 return h(_sfc_main$_, { 22897 type: "tertiary", 22898 size: "sm", 22899 "aria-label": getFirstColumnAriaLabel$1(1, row, $index + 2, store2, column), 22900 "aria-describedby": owner.dragAriaDescribedby, 22901 icon: getDragIcon(row), 22902 tabindex: "-1", 22903 onKeydown: handleKeyDown, 22904 onFocus: handleFocus 22905 }); 22906 }, 22907 sortable: false, 22908 resizable: false 22909 } 22910};
22911function treeCellPrefix$1({ 22912 row, 22913 treeNode, 22914 store: store2, 22915 $index, 22916 column 22917}, flipLabel = false) { 22918 const { ns } = store2; 22919 if (!treeNode) { 22920 if (column.colIndex === 1) { 22921 return h( 22922 "div", 22923 { 22924 class: ns.e("expand-icon") 22925 }, 22926 h("span", { 22927 class: ns.e("indent-empty") 22928 }) 22929 ); 22930 } 22931 return null; 22932 } 22933 const ele = []; 22934 const callback = function(e) { 22935 store2.loadOrToggle(row); 22936 e.stopPropagation(); 22937 }; 22938 if (treeNode.indent) { 22939 ele.push( 22940 h("span", { 22941 class: ns.e("indent"), 22942 style: { "padding-left": `${treeNode.indent}px` } 22943 }) 22944 ); 22945 } 22946 if (!flipLabel && !treeNode.noLazyChildren) { 22947 const expandClasses = [ 22948 ns.e("expand-icon"), 22949 treeNode.expanded ? ns.em("expand-icon", "expanded") : "" 22950 ]; 22951 ele.push( 22952 h( 22953 "div", 22954 { 22955 class: expandClasses 22956 }, 22957 treeNode.loading ? h( 22958 "div", 22959 { 22960 class: { [ns.is("loading")]: treeNode.loading } 22961 }, 22962 h(_sfc_main$12) 22963 ) : typeof treeNode.expanded === "boolean" ? h(_sfc_main$_, { 22964 icon: ChevronRightV2, 22965 type: "tertiary", 22966 size: "sm", 22967 tabindex: "-1", 22968 "aria-label": getFirstColumnAriaLabel$1( 22969 2, 22970 row, 22971 $index + 2, 22972 store2, 22973 column, 22974 void 0, 22975 true 22976 ), 22977 ariaExpanded: treeNode.expanded, 22978 onClick: callback 22979 }) : h("span", { 22980 class: ns.e("indent-empty") 22981 }) 22982 ) 22983 ); 22984 } 22985 return ele; 22986} 22987function useRender$3(owner, props, slots) { 22988 const instance = getCurrentInstance(); 22989 const ns = useNamespace("table"); 22990 const columnId = ref(""); 22991 const realWidth = ref(parseWidth$1(props.width)); 22992 const realMinWidth = ref(parseWidth$1(props.minWidth)); 22993 const isSubColumn = ref(false); 22994 const realAlign = computed(() => { 22995 return props.align ? "is-" + props.align : null; 22996 }); 22997 const realHeaderAlign = computed(() => { 22998 return props.headerAlign ? "is-" + props.headerAlign : realAlign.value; 22999 }); 23000 const columnOrTableParent = computed(() => { 23001 let parent = instance.parent; 23002 while (parent && !parent.tableId && !parent.columnId) { 23003 parent = parent.parent; 23004 } 23005 return parent; 23006 }); 23007 const setColumnWidth = (column) => { 23008 if (column.type === "expand" && owner.props.forceExpand) { 23009 column.realWidth = column.minWidth = column.width = 0; 23010 return column; 23011 } 23012 if (!column.width && realWidth.value) { 23013 column.width = realWidth.value; 23014 } 23015 if (!column.minWidth && realMinWidth.value) { 23016 column.minWidth = realMinWidth.value; 23017 } 23018 column.realWidth = Number(!column.width ? column.minWidth : column.width); 23019 return column; 23020 }; 23021 const setColumnRenders = (column) => { 23022 const originRenderCell = column.renderCell || defaultRenderCell$1; 23023 const renderSkeleton = (props2) => { 23024 return h("div", props2, [ 23025 h( 23026 ZmSkeleton, 23027 { 23028 animated: true 23029 }, 23030 { 23031 template: () => { 23032 return h(_sfc_main$n, { 23033 percent: SKELETON_PERCENT$1 23034 }); 23035 } 23036 } 23037 ) 23038 ]); 23039 }; 23040 if (!column.renderHeader) { 23041 column.renderHeader = (scope) => { 23042 const hasTreeFirstIndent = owner.store.states.hasTree.value && column.colIndex === 1; 23043 instance.columnConfig.value["label"]; 23044 return renderSlot(slots, "header", scope, () => [ 23045 hasTreeFirstIndent && h( 23046 "span", 23047 { 23048 style: { 23049 display: "inline-block", 23050 marginRight: "16px" 23051 } 23052 }, 23053 h("span", { 23054 class: ns.e("indent-empty") 23055 }) 23056 ), 23057 h( 23058 "span", 23059 { 23060 id: `${column.id}`, 23061 class: "label-wrapper", 23062 role: isFirefox && !isMac ? "columnheader" : "cell", 23063 // only windows firefox should set 'columnheader', see https://zoomvideo.atlassian.net/browse/ZU-335#issue8 23064 "aria-colindex": column.colIndex, 23065 tabindex: "-1" 23066 }, 23067 [column.label] 23068 ) 23069 ]); 23070 }; 23071 } 23072 if (column.type === "expand") { 23073 column.renderCell = (data) => { 23074 var _a; 23075 const props2 = { 23076 class: "cell" 23077 }; 23078 if ((_a = owner.store.states.skeleton.value) == null ? void 0 : _a.loading) { 23079 return renderSkeleton(props2); 23080 } 23081 if (!isMac) { 23082 props2["col-index"] = "1"; 23083 props2.role = "cell"; 23084 } 23085 return h("div", props2, [originRenderCell(data)]); 23086 }; 23087 owner.renderExpanded = (data) => { 23088 return slots.default ? slots.default(data) : slots.default; 23089 }; 23090 } else { 23091 column.renderCell = (data) => { 23092 var _a; 23093 const hasTree = owner.store.states.hasTree.value; 23094 const t = data.t || owner.t || (() => "â"); 23095 const props2 = { 23096 class: "cell" 23097 }; 23098 if ((_a = owner.store.states.skeleton.value) == null ? void 0 : _a.loading) { 23099 return renderSkeleton(props2); 23100 } 23101 let children; 23102 if (slots.default) { 23103 const vnodes = slots.default(data); 23104 children = vnodes.some((v) => v.type !== Comment) ? vnodes : originRenderCell(data); 23105 } else { 23106 const prop = column.prop; 23107 const value = prop && getProp(data.row, prop).value; 23108 const props3 = column.type !== "selection" && column.type !== "draggable" && column.type !== "single" ? { 23109 tabIndex: "-1", 23110 class: ["text-wrapper", isEmpty2(data, value) ? "label-empty-wrapper" : ""], 23111 ariaLabel: !value ? t("basic.blank") : null 23112 } : { 23113 "aria-colindex": "1", 23114 class: "flex-wrapper" 23115 }; 23116 if (!isMac) { 23117 props3.role = "cell"; 23118 } 23119 children = h("span", props3, originRenderCell(data)); 23120 } 23121 const prefix = hasTree ? treeCellPrefix$1(data) : null; 23122 if (owner.store.states.flip.value) { 23123 return h("div", props2, [ 23124 h("div", { class: "flip-label" }, [treeCellPrefix$1(data, true), data.column.label]), 23125 [prefix, children] 23126 ]); 23127 } 23128 if (column.showOverflowTooltip) { 23129 props2.class = `${props2.class} ${unref(ns.e("tooltip"))}`; 23130 props2.style = { width: `${data.column.realWidth}px` }; 23131 const toolTipRef = ref(); 23132 debounce(renderTooltip, TRANSITION_DELAY$1)(data, toolTipRef); 23133 if (owner.store.shouldRenderTooltip(data)) { 23134 return h( 23135 ZmTooltip, 23136 { 23137 ref: toolTipRef, 23138 placement: "top", 23139 content: originRenderCell(data), 23140 "disallow-screen-reader": true 23141 }, 23142 () => { 23143 return h("div", props2, [prefix, children]); 23144 } 23145 ); 23146 } 23147 } 23148 return h("div", props2, [prefix, children]); 23149 }; 23150 } 23151 return column; 23152 }; 23153 const isEmpty2 = ({ 23154 row, 23155 column, 23156 $index 23157 }, value) => { 23158 if (column.formatter) { 23159 return !column.formatter(row, column, value, $index); 23160 } 23161 return isNil(value) || value.toString().trim() === ""; 23162 }; 23163 const renderTooltip = (data, toolTipRef) => { 23164 owner.store.renderTooltip(data, toolTipRef.value); 23165 owner.state.buildA11y(); 23166 }; 23167 const setColumnForcedProps = (column) => { 23168 column.resizable = owner.store.states.adjustColumn.value; 23169 const type = column.type; 23170 const source = cellForced$1[type] || {};
23171 Object.keys(source).forEach((prop) => { 23172 column[prop] = source[prop]; 23173 }); 23174 const className = getDefaultClassName$1(type); 23175 if (className) { 23176 const forceClass = `${unref(ns.namespace)}-${className}`; 23177 column.className = column.className ? `${column.className} ${forceClass}` : forceClass; 23178 } 23179 return column; 23180 }; 23181 const getPropsData = (...propsKey) => { 23182 return propsKey.reduce((prev, cur) => { 23183 if (Array.isArray(cur)) { 23184 cur.forEach((key) => { 23185 prev[key] = props[key]; 23186 }); 23187 } 23188 return prev; 23189 }, {}); 23190 }; 23191 const getColumnElIndex = (children, child) => { 23192 return Array.prototype.indexOf.call(children, child); 23193 }; 23194 const updateColumnOrder = () => { 23195 owner.store.commit("updateColumnOrder", instance.columnConfig.value); 23196 }; 23197 return { 23198 columnId, 23199 realAlign, 23200 realHeaderAlign, 23201 isSubColumn, 23202 columnOrTableParent, 23203 setColumnWidth, 23204 setColumnRenders, 23205 setColumnForcedProps, 23206 getPropsData, 23207 getColumnElIndex, 23208 updateColumnOrder 23209 }; 23210} 23211var __defProp$u = Object.defineProperty; 23212var __defProps$o = Object.defineProperties; 23213var __getOwnPropDescs$o = Object.getOwnPropertyDescriptors; 23214var __getOwnPropSymbols$u = Object.getOwnPropertySymbols; 23215var __hasOwnProp$u = Object.prototype.hasOwnProperty; 23216var __propIsEnum$u = Object.prototype.propertyIsEnumerable; 23217var __defNormalProp$u = (obj, key, value) => key in obj ? __defProp$u(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 23218var __spreadValues$u = (a, b) => { 23219 for (var prop in b || (b = {})) 23220 if (__hasOwnProp$u.call(b, prop)) 23221 __defNormalProp$u(a, prop, b[prop]); 23222 if (__getOwnPropSymbols$u) 23223 for (var prop of __getOwnPropSymbols$u(b)) { 23224 if (__propIsEnum$u.call(b, prop)) 23225 __defNormalProp$u(a, prop, b[prop]); 23226 } 23227 return a; 23228}; 23229var __spreadProps$o = (a, b) => __defProps$o(a, __getOwnPropDescs$o(b)); 23230let columnIdSeed$1 = 1; 23231const TableColumn = defineComponent({ 23232 name: "ZmTableColumn", 23233 props: defaultProps$4, 23234 setup(props, { slots }) { 23235 const instance = getCurrentInstance(); 23236 const columnConfig = ref({}); 23237 const owner = inject(TABLE_INJECTION_KEY); 23238 const { registerNormalWatchers, registerComplexWatchers } = useWatcher$2(owner, props); 23239 registerNormalWatchers(); 23240 registerComplexWatchers(); 23241 const { 23242 columnId, 23243 realAlign, 23244 realHeaderAlign, 23245 isSubColumn, 23246 setColumnWidth, 23247 setColumnRenders, 23248 setColumnForcedProps, 23249 getPropsData, 23250 getColumnElIndex, 23251 updateColumnOrder, 23252 columnOrTableParent 23253 } = useRender$3(owner, props, slots); 23254 const parent = columnOrTableParent.value; 23255 columnId.value = `${parent.tableId || parent.columnId}_column_${columnIdSeed$1++}`; 23256 isSubColumn.value = owner !== parent; 23257 const type = props.type || "default"; 23258 const defaults = __spreadProps$o(__spreadValues$u({}, cellStarts$1[type]), { 23259 id: columnId.value, 23260 align: realAlign, 23261 headerAlign: realHeaderAlign, 23262 isSubColumn: false, 23263 type 23264 }); 23265 const basicProps = [ 23266 "prop", 23267 "columnKey", 23268 "label", 23269 "className", 23270 "labelClassName", 23271 "fixed", 23272 "type", 23273 "resizable", 23274 "needDisplay", 23275 "formatter", 23276 "showOverflowTooltip" 23277 ]; 23278 const selectProps2 = [ 23279 "selectable", 23280 "reserveSelection", 23281 "selectableHeader", 23282 "selectedColumnIndex", 23283 "singleSelectable", 23284 "tooltipable" 23285 ]; 23286 const sortProps = ["sortable", "sortMethod", "sortBy", "sortOrders"]; 23287 const filterProps = ["filterMethod", "filters", "filteredValue", "filterPlacement"]; 23288 let column = getPropsData(basicProps, selectProps2, sortProps, filterProps); 23289 column = mergeOptions$1(defaults, column); 23290 const chains = compose$1(setColumnRenders, setColumnWidth, setColumnForcedProps); 23291 column = chains(column); 23292 columnConfig.value = column; 23293 onMounted(() => { 23294 var _a; 23295 const children = isSubColumn.value ? parent.vnode.el.children : (_a = parent.refs.hiddenColumns) == null ? void 0 : _a.children; 23296 const getColumnIndex = () => getColumnElIndex(children || [], instance.vnode.el); 23297 columnConfig.value.getColumnIndex = getColumnIndex; 23298 const columnIndex = getColumnIndex(); 23299 columnIndex > -1 && owner.store.commit( 23300 "insertColumn", 23301 columnConfig.value, 23302 isSubColumn.value ? parent.columnConfig.value : null, 23303 updateColumnOrder 23304 ); 23305 }); 23306 onBeforeUnmount(() => { 23307 const columnIndex = columnConfig.value.getColumnIndex(); 23308 columnIndex > -1 && owner.store.commit( 23309 "removeColumn", 23310 columnConfig.value, 23311 isSubColumn.value ? parent.columnConfig.value : null, 23312 updateColumnOrder 23313 ); 23314 }); 23315 instance.columnId = columnId.value; 23316 instance.columnConfig = columnConfig; 23317 return () => { 23318 var _a, _b;
23319 try { 23320 const renderDefault = (_a = slots.default) == null ? void 0 : _a.call(slots, { 23321 row: {}, 23322 column: {}, 23323 $index: -1 23324 }); 23325 const children = []; 23326 if (Array.isArray(renderDefault)) { 23327 for (const childNode of renderDefault) { 23328 if (((_b = childNode.type) == null ? void 0 : _b.name) === "ZmTableColumn") { 23329 children.push(childNode); 23330 } 23331 } 23332 } 23333 const vnode = h("div", children); 23334 return vnode; 23335 } catch (e) { 23336 /* istanbul ignore next @preserve */ 23337 return h("div", []); 23338 } 23339 }; 23340 } 23341}); 23342withInstall(Table, { 23343 TableColumn 23344}); 23345const ACCORDION_INJECTION_KEY = Symbol("ZmAccordionContextKey"); 23346const accordionProps = { 23347 independent: Boolean, 23348 arrowPosition: { 23349 type: String, 23350 default: "leading" 23351 }, 23352 modelValue: { 23353 type: [Array, String, Number], 23354 /* istanbul ignore next @preserve */ 23355 default() { 23356 return []; 23357 } 23358 } 23359}; 23360const emitChangeFn = (value) => isNumber(value) || isString(value) || isArray(value); 23361const accordionEmits = { 23362 [VUE_EVENT_NAMES.CHANGE]: emitChangeFn, 23363 [VUE_EVENT_NAMES.UPDATE_MODEL]: emitChangeFn 23364}; 23365var __defProp$t = Object.defineProperty; 23366var __defProps$n = Object.defineProperties; 23367var __getOwnPropDescs$n = Object.getOwnPropertyDescriptors; 23368var __getOwnPropSymbols$t = Object.getOwnPropertySymbols; 23369var __hasOwnProp$t = Object.prototype.hasOwnProperty; 23370var __propIsEnum$t = Object.prototype.propertyIsEnumerable; 23371var __defNormalProp$t = (obj, key, value) => key in obj ? __defProp$t(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 23372var __spreadValues$t = (a, b) => { 23373 for (var prop in b || (b = {})) 23374 if (__hasOwnProp$t.call(b, prop)) 23375 __defNormalProp$t(a, prop, b[prop]); 23376 if (__getOwnPropSymbols$t) 23377 for (var prop of __getOwnPropSymbols$t(b)) { 23378 if (__propIsEnum$t.call(b, prop)) 23379 __defNormalProp$t(a, prop, b[prop]); 23380 } 23381 return a; 23382}; 23383var __spreadProps$n = (a, b) => __defProps$n(a, __getOwnPropDescs$n(b)); 23384const _sfc_main$i = /* @__PURE__ */ defineComponent(__spreadProps$n(__spreadValues$t({}, { 23385 name: "ZmAccordion" 23386}), { 23387 __name: "accordion", 23388 props: accordionProps, 23389 emits: accordionEmits, 23390 setup(__props, { emit: __emit }) { 23391 const emit = __emit; 23392 const props = __props; 23393 const ns = useNamespace("accordion"); 23394 const activeNames = ref(ensureArray(props.modelValue)); 23395 const setActiveNames = (newActiveNames) => { 23396 activeNames.value = newActiveNames; 23397 const value = !props.independent ? activeNames.value[0] : activeNames.value; 23398 emit(VUE_EVENT_NAMES.UPDATE_MODEL, value); 23399 emit(VUE_EVENT_NAMES.CHANGE, value); 23400 }; 23401 const handleItemClick = (name) => { 23402 if (!props.independent) { 23403 setActiveNames([activeNames.value[0] === name ? "" : name]); 23404 } else { 23405 const index2 = activeNames.value.indexOf(name); 23406 if (index2 > -1) { 23407 activeNames.value.splice(index2, 1); 23408 } else { 23409 activeNames.value.push(name); 23410 } 23411 setActiveNames(activeNames.value); 23412 } 23413 }; 23414 watch( 23415 () => props.modelValue, 23416 () => activeNames.value = ensureArray(props.modelValue), 23417 { deep: true } 23418 ); 23419 provide(ACCORDION_INJECTION_KEY, { 23420 activeNames, 23421 handleItemClick, 23422 arrowPosition: toRef(() => props.arrowPosition) 23423 }); 23424 return (_ctx, _cache) => { 23425 return openBlock(), createElementBlock("div", { 23426 class: normalizeClass(unref(ns).b()) 23427 }, [ 23428 renderSlot(_ctx.$slots, "default") 23429 ], 2); 23430 }; 23431 } 23432})); 23433var __defProp$s = Object.defineProperty; 23434var __defProps$m = Object.defineProperties; 23435var __getOwnPropDescs$m = Object.getOwnPropertyDescriptors; 23436var __getOwnPropSymbols$s = Object.getOwnPropertySymbols; 23437var __hasOwnProp$s = Object.prototype.hasOwnProperty; 23438var __propIsEnum$s = Object.prototype.propertyIsEnumerable; 23439var __defNormalProp$s = (obj, key, value) => key in obj ? __defProp$s(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 23440var __spreadValues$s = (a, b) => { 23441 for (var prop in b || (b = {})) 23442 if (__hasOwnProp$s.call(b, prop)) 23443 __defNormalProp$s(a, prop, b[prop]); 23444 if (__getOwnPropSymbols$s) 23445 for (var prop of __getOwnPropSymbols$s(b)) { 23446 if (__propIsEnum$s.call(b, prop)) 23447 __defNormalProp$s(a, prop, b[prop]); 23448 } 23449 return a; 23450}; 23451var __spreadProps$m = (a, b) => __defProps$m(a, __getOwnPropDescs$m(b)); 23452const accordionItemProps = { 23453 title: { 23454 type: String, 23455 default: "" 23456 }, 23457 testId: String, 23458 name: { 23459 type: [String, Number], 23460 required: true 23461 }, 23462 tabindex: { 23463 type: [String, Number], 23464 default: 0 23465 }, 23466 disabled: Boolean, 23467 regionRole: { 23468 type: String, 23469 default: "region" 23470 }, 23471 showBottomBorder: { 23472 type: Boolean, 23473 default: true 23474 } 23475}; 23476const _hoisted_1$c = ["id", "data-testid", "aria-expanded", "aria-controls", "aria-disabled", "tabindex", "onKeydown"]; 23477const _hoisted_2$6 = ["id", "role", "aria-labelledby"]; 23478const _sfc_main$h = /* @__PURE__ */ defineComponent(__spreadProps$m(__spreadValues$s({}, { 23479 name: "ZmAccordionItem" 23480}), { 23481 __name: "accordion-item", 23482 props: accordionItemProps, 23483 setup(__props) { 23484 const props = __props; 23485 const isRTL = useRTL(); 23486 const ns = useNamespace("accordion"); 23487 const accordion = inject(ACCORDION_INJECTION_KEY, void 0); 23488 const id = useId(); 23489 const isActive = computed(() => accordion.activeNames.value.includes(props.name)); 23490 const containerClass = computed(() => [ 23491 ns.b("item"), 23492 ns.is("active", unref(isActive)), 23493 ns.is("bottom-border", props.showBottomBorder) 23494 ]); 23495 const triggerClass = computed(() => [ 23496 ns.be("item", "trigger"), 23497 ns.is("active", unref(isActive)), 23498 ns.is("disabled", props.disabled) 23499 ]); 23500 const isTrailingArrow = computed(() => { 23501 return accordion.arrowPosition.value === "trailing"; 23502 }); 23503 const arrowClass = computed(() => { 23504 if (!isRTL.value) { 23505 return [ns.be("item", "arrow"), ns.is("active", unref(isActive))]; 23506 } else { 23507 return [ns.be("item", "arrow-rtl"), ns.is("active", unref(isActive))]; 23508 } 23509 }); 23510 const regionId = computed(() => ns.b(`region-${unref(id)}`)); 23511 const triggerId = computed(() => ns.b(`trigger-${unref(id)}`)); 23512 const handleTriggerClick = () => { 23513 if (props.disabled) 23514 return;
23515 accordion.handleItemClick(props.name); 23516 }; 23517 return (_ctx, _cache) => { 23518 return openBlock(), createElementBlock("div", { 23519 class: normalizeClass(containerClass.value) 23520 }, [ 23521 createBaseVNode("div", { 23522 id: triggerId.value, 23523 class: normalizeClass(triggerClass.value), 23524 "data-testid": _ctx.testId, 23525 "aria-expanded": isActive.value, 23526 "aria-controls": regionId.value, 23527 "aria-disabled": _ctx.disabled, 23528 role: "button", 23529 tabindex: _ctx.tabindex, 23530 onClick: handleTriggerClick, 23531 onKeydown: withKeys(withModifiers(handleTriggerClick, ["prevent", "stop"]), ["space", "enter"]) 23532 }, [ 23533 !isTrailingArrow.value ? (openBlock(), createBlock(unref(ZmIcon), { 23534 key: 0, 23535 class: normalizeClass(arrowClass.value) 23536 }, { 23537 default: withCtx(() => [ 23538 createVNode(unref(ChevronRightV2)) 23539 ]), 23540 _: 1 23541 }, 8, ["class"])) : createCommentVNode("", true), 23542 createBaseVNode("div", { 23543 class: normalizeClass(unref(ns).be("item", "title")) 23544 }, [ 23545 renderSlot(_ctx.$slots, "title", {}, () => [ 23546 createTextVNode(toDisplayString(_ctx.title), 1) 23547 ]) 23548 ], 2), 23549 isTrailingArrow.value ? (openBlock(), createBlock(unref(ZmIcon), { 23550 key: 1, 23551 class: normalizeClass(arrowClass.value) 23552 }, { 23553 default: withCtx(() => [ 23554 createVNode(unref(ChevronRightV2)) 23555 ]), 23556 _: 1 23557 }, 8, ["class"])) : createCommentVNode("", true) 23558 ], 42, _hoisted_1$c), 23559 createVNode(unref(ZmCollapseTransition), null, { 23560 default: withCtx(() => [ 23561 withDirectives(createBaseVNode("div", { 23562 id: regionId.value, 23563 role: _ctx.regionRole, 23564 class: normalizeClass([unref(ns).be("item", "region"), unref(ns).is("tight", isTrailingArrow.value)]), 23565 "aria-labelledby": triggerId.value 23566 }, [ 23567 createBaseVNode("div", { 23568 class: normalizeClass(unref(ns).be("item", "content")) 23569 }, [ 23570 renderSlot(_ctx.$slots, "default") 23571 ], 2) 23572 ], 10, _hoisted_2$6), [ 23573 [vShow, isActive.value] 23574 ]) 23575 ]), 23576 _: 3 23577 }) 23578 ], 2); 23579 }; 23580 } 23581})); 23582const ZmAccordion = withInstall(_sfc_main$i, { 23583 AccordionItem: _sfc_main$h 23584}); 23585const ZmAccordionItem = _sfc_main$h; 23586const messages$3 = { 23587 "en-US": { 23588 "emoji-picker": { 23589 "frequent": "Frequently used", 23590 "people": "Smileys & people", 23591 "nature": "Animals & nature", 23592 "foods": "Food & drink", 23593 "activity": "Activity", 23594 "places": "Travel & places", 23595 "objects": "Objects", 23596 "symbols": "Symbols", 23597 "flags": "Flags", 23598 "search": "Search", 23599 "skin": "Set skin tone:", 23600 "searchResult": "Search result", 23601 "empty": "No results", 23602 "dialog": "Choose an emoji", 23603 "tab": "Emoji categories", 23604 "table": "Categorized emojis", 23605 "skin0": "Default skin tone thumbs-up", 23606 "skin1": "Light skin tone thumbs-up", 23607 "skin2": "Medium-light skin tone thumbs-up", 23608 "skin3": "Medium skin tone thumbs-up", 23609 "skin4": "Medium-dark skin tone thumbs-up", 23610 "skin5": "Dark skin tone thumbs-up", 23611 "color0": "Blue", 23612 "color1": "Pink", 23613 "color2": "Orange", 23614 "color3": "Yellow", 23615 "color4": "Green", 23616 "color5": "Magenta", 23617 "color6": "Purple", 23618 "color7": "Deep Blue", 23619 "color8": "Light Blue", 23620 "color9": "Gray", 23621 "allIcons": "All icons", 23622 "emoji": "Emoji", 23623 "icon": "Icon", 23624 "color": "Set icon color:", 23625 "sticker": "Sticker", 23626 "tabs": "Emoji toolbox", 23627 "addSticker": "Add sticker", 23628 "emojiTable": "Emojis", 23629 "iconTable": "Icons", 23630 "stickerTable": "Stickers", 23631 "custom": "Custom emojis" 23632 } 23633 }, 23634 "de-DE": { 23635 "emoji-picker": { 23636 "frequent": "Häufig verwendet", 23637 "people": "Smileys & Kontakte", 23638 "nature": "Tiere & Natur", 23639 "foods": "Essen & Trinken", 23640 "activity": "Aktivität", 23641 "places": "Reisen & Orte", 23642 "objects": "Objekte", 23643 "symbols": "Symbole", 23644 "flags": "Kennzeichen", 23645 "search": "Suchen", 23646 "skin": "Hautton festlegen:", 23647 "searchResult": "Suchergebnis", 23648 "empty": "Keine Ergebnisse", 23649 "dialog": "Wählen Sie ein Emoji", 23650 "tab": "Emoji-Kategorien", 23651 "table": "Kategorisierte Emojis", 23652 "skin0": "Daumen hoch, Standardhautton", 23653 "skin1": "Daumen hoch, heller Hautton", 23654 "skin2": "Daumen hoch, mittelheller Hautton", 23655 "skin3": "Daumen hoch, mittlerer Hautton", 23656 "skin4": "Daumen hoch, mitteldunkler Hautton", 23657 "skin5": "Daumen hoch, dunkler Hautton", 23658 "color0": "Blau", 23659 "color1": "Rosa", 23660 "color2": "Orange", 23661 "color3": "Gelb", 23662 "color4": "Grün", 23663 "color5": "Magenta", 23664 "color6": "Lila", 23665 "color7": "Tiefblau", 23666 "color8": "Hellblau", 23667 "color9": "Grau", 23668 "allIcons": "Alle Symbole", 23669 "emoji": "Emoji", 23670 "icon": "Symbol", 23671 "color": "Symbolfarbe festlegen:", 23672 "sticker": "Sticker", 23673 "tabs": "Emoji-Werkzeugkasten", 23674 "addSticker": "Sticker hinzufügen", 23675 "emojiTable": "Emojis", 23676 "iconTable": "Symbole", 23677 "stickerTable": "Sticker",
23678 "custom": "Benutzerdefinierte Emojis" 23679 } 23680 }, 23681 "es-ES": { 23682 "emoji-picker": { 23683 "frequent": "Uso frecuente", 23684 "people": "Emoticonos y personas", 23685 "nature": "Animales y naturaleza", 23686 "foods": "Comida y bebida", 23687 "activity": "Actividad", 23688 "places": "Viajes y lugares", 23689 "objects": "Objetos", 23690 "symbols": "SÃmbolos", 23691 "flags": "Banderas", 23692 "search": "Buscar", 23693 "skin": "Establecer tono de piel:", 23694 "searchResult": "Resultado de búsqueda", 23695 "empty": "No hay resultados", 23696 "dialog": "Seleccione un emoji", 23697 "tab": "CategorÃas de emojis", 23698 "table": "Emojis clasificados", 23699 "skin0": "Tono de piel predeterminado con pulgar hacia arriba", 23700 "skin1": "Tono de piel claro con pulgar hacia arriba", 23701 "skin2": "Tono de piel medio claro con pulgar hacia arriba", 23702 "skin3": "Tono de piel medio con pulgar hacia arriba", 23703 "skin4": "Tono de piel medio oscuro con pulgar hacia arriba", 23704 "skin5": "Tono de piel oscuro con pulgar hacia arriba", 23705 "color0": "Azul", 23706 "color1": "Rosado", 23707 "color2": "Naranja", 23708 "color3": "Amarillo", 23709 "color4": "Verde", 23710 "color5": "Magenta", 23711 "color6": "Morado", 23712 "color7": "Azul oscuro", 23713 "color8": "Azul claro", 23714 "color9": "Gris", 23715 "allIcons": "Todos los iconos", 23716 "emoji": "Emoji", 23717 "icon": "Icono", 23718 "color": "Color de icono establecido:", 23719 "sticker": "Adhesivo", 23720 "tabs": "Caja de herramientas de emojis", 23721 "addSticker": "Añadir sticker", 23722 "emojiTable": "Emojis", 23723 "iconTable": "Iconos", 23724 "stickerTable": "Stickers", 23725 "custom": "Emojis personalizados" 23726 } 23727 }, 23728 "fr-FR": { 23729 "emoji-picker": { 23730 "frequent": "Fréquemment utilisé", 23731 "people": "Smileys et Personnes", 23732 "nature": "Animaux et Nature", 23733 "foods": "Nourriture et Boisson", 23734 "activity": "Activité", 23735 "places": "Voyages et Endroits", 23736 "objects": "Objets", 23737 "symbols": "Symboles", 23738 "flags": "Drapeaux", 23739 "search": "Rechercher", 23740 "skin": "Définir la carnation de la peau :", 23741 "searchResult": "Résultat de recherche", 23742 "empty": "Pas de résultats", 23743 "dialog": "Choisir un Emoji", 23744 "tab": "Catégories dâemojis", 23745 "table": "Emojis classés par catégories", 23746 "skin0": "Pouce en lâair, carnation par défaut", 23747 "skin1": "Pouce en lâair, carnation claire", 23748 "skin2": "Pouce en lâair, carnation moyennement claire", 23749 "skin3": "Pouce en lâair, carnation moyenne", 23750 "skin4": "Pouce en lâair, carnation moyennement foncée", 23751 "skin5": "Pouce en lâair, carnation foncée", 23752 "color0": "Bleu", 23753 "color1": "Rose", 23754 "color2": "Orange", 23755 "color3": "Jaune", 23756 "color4": "Vert", 23757 "color5": "Magenta", 23758 "color6": "Violet", 23759 "color7": "Bleu marine", 23760 "color8": "Bleu ciel", 23761 "color9": "Gris", 23762 "allIcons": "Toutes les icônes", 23763 "emoji": "Emoji", 23764 "icon": "Icône", 23765 "color": "Définir la couleur de lâicône :", 23766 "sticker": "Autocollant", 23767 "tabs": "Boîte à outils dâEmoji", 23768 "addSticker": "Ajouter un autocollant", 23769 "emojiTable": "Ãmojis", 23770 "iconTable": "Icônes", 23771 "stickerTable": "Autocollants", 23772 "custom": "Ãmojis personnalisés" 23773 } 23774 }, 23775 "id-ID": { 23776 "emoji-picker": { 23777 "frequent": "Sering digunakan", 23778 "people": "Smiley & Orang", 23779 "nature": "Hewan & Alam", 23780 "foods": "Makanan & Minuman", 23781 "activity": "Aktivitas", 23782 "places": "Perjalanan & Tempat", 23783 "objects": "Objek", 23784 "symbols": "Simbol", 23785 "flags": "Bendera", 23786 "search": "Cari", 23787 "skin": "Atur warna kulit:", 23788 "searchResult": "Hasil Pencarian", 23789 "empty": "Tidak Ada Hasil", 23790 "dialog": "Pilihlah sebuah emoji", 23791 "tab": "Kategori Emoji", 23792 "table": "Emoji yang dikelompokkan", 23793 "skin0": "Warna kulit default jempol ke atas", 23794 "skin1": "Warna kulit terang jempol ke atas", 23795 "skin2": "Warna kulit sedang-terang, jempol ke atas", 23796 "skin3": "Warna kulit sedang, jempol ke atas", 23797 "skin4": "Warna kulit sedang-gelap, jempol ke atas", 23798 "skin5": "Warna kulit gelap jempol ke atas", 23799 "color0": "Biru", 23800 "color1": "Pink", 23801 "color2": "Jingga", 23802 "color3": "Kuning", 23803 "color4": "Hijau", 23804 "color5": "Magenta", 23805 "color6": "Ungu", 23806 "color7": "Biru Tua", 23807 "color8": "Biru Muda", 23808 "color9": "Abu-abu", 23809 "allIcons": "Semua ikon", 23810 "emoji": "Emoji", 23811 "icon": "Ikon", 23812 "color": "Atur warna ikon:", 23813 "sticker": "Stiker", 23814 "tabs": "Kotak alat emoji", 23815 "addSticker": "Tambah stiker", 23816 "emojiTable": "Emoji", 23817 "iconTable": "Ikon", 23818 "stickerTable": "Stiker",
23819 "custom": "Emoji khusus" 23820 } 23821 }, 23822 "it-IT": { 23823 "emoji-picker": { 23824 "frequent": "Usato di frequente", 23825 "people": "Smiley e persone", 23826 "nature": "Animali e natura", 23827 "foods": "Cibo e bevande", 23828 "activity": "Attività ", 23829 "places": "Viaggi e luoghi", 23830 "objects": "Oggetti", 23831 "symbols": "Simboli", 23832 "flags": "Bandiere", 23833 "search": "Cerca", 23834 "skin": "Imposta tonalità della pelle:", 23835 "searchResult": "Risultato della ricerca", 23836 "empty": "Nessun risultato", 23837 "dialog": "Scegli unâemoji", 23838 "tab": "Categorie di emoji", 23839 "table": "Emoji categorizzate", 23840 "skin0": "Pollice in su con carnagione predefinita", 23841 "skin1": "Pollice in su con carnagione chiara", 23842 "skin2": "Pollice in su con carnagione medio-chiara", 23843 "skin3": "Pollice in su con carnagione media", 23844 "skin4": "Pollice in su con carnagione medio-scura", 23845 "skin5": "Pollice in su con carnagione scura", 23846 "color0": "Blu", 23847 "color1": "Rosa", 23848 "color2": "Arancione", 23849 "color3": "Giallo", 23850 "color4": "Verde", 23851 "color5": "Magenta", 23852 "color6": "Viola", 23853 "color7": "Blu scuro", 23854 "color8": "Azzurro", 23855 "color9": "Grigio", 23856 "allIcons": "Tutte le icone", 23857 "emoji": "Emoji", 23858 "icon": "Icona", 23859 "color": "Imposta il colore dellâicona:", 23860 "sticker": "Sticker", 23861 "tabs": "Toolbox emoji", 23862 "addSticker": "Aggiungi sticker", 23863 "emojiTable": "Emoji", 23864 "iconTable": "Icone", 23865 "stickerTable": "Sticker", 23866 "custom": "Emoji personalizzate" 23867 } 23868 }, 23869 "jp-JP": { 23870 "emoji-picker": { 23871 "frequent": "é »ç¹ã«ä½¿ç¨ããã¦ãããã®", 23872 "people": "ã¹ãã¤ãªã¼ã¨äºº", 23873 "nature": "åç©ã¨èªç¶", 23874 "foods": "ãã¼ãã¨ããªã³ã¯", 23875 "activity": "ã¢ã¯ãã£ããã£", 23876 "places": "æ è¡ã¨å ´æ", 23877 "objects": "ç©ä½", 23878 "symbols": "è¨å·", 23879 "flags": "æ", 23880 "search": "æ¤ç´¢", 23881 "skin": "ã¹ãã³ãã¼ã³ãè¨å®ãã¾ã:", 23882 "searchResult": "æ¤ç´¢çµæ", 23883 "empty": "çµæãªã", 23884 "dialog": "çµµæåã鏿", 23885 "tab": "çµµæåã«ãã´ãª", 23886 "table": "ã«ãã´ãªå¥ã®çµµæå", 23887 "skin0": "ããã©ã«ãã®ã¹ãã³ãã¼ã³ã®ããã", 23888 "skin1": "ã©ã¤ãã¹ãã³ãã¼ã³ã®ããã", 23889 "skin2": "ããã£ã¢ã ã©ã¤ãã¹ãã³ãã¼ã³ã®ããã", 23890 "skin3": "ããã£ã¢ã ã¹ãã³ãã¼ã³ã®ããã", 23891 "skin4": "ããã£ã¢ã ãã¼ã¯ã¹ãã³ãã¼ã³ã®ããã", 23892 "skin5": "ãã¼ã¯ã¹ãã³ãã¼ã³ã®ããã", 23893 "color0": "é", 23894 "color1": "ãã³ã¯", 23895 "color2": "ãªã¬ã³ã¸", 23896 "color3": "é»", 23897 "color4": "ç·", 23898 "color5": "ãã¼ã³ã¿", 23899 "color6": "ç´«", 23900 "color7": "ãã£ã¼ããã«ã¼", 23901 "color8": "ã©ã¤ããã«ã¼", 23902 "color9": "ã°ã¬ã¼", 23903 "allIcons": "ãã¹ã¦ã®ã¢ã¤ã³ã³", 23904 "emoji": "çµµæå", 23905 "icon": "ã¢ã¤ã³ã³", 23906 "color": "ã¢ã¤ã³ã³ã®è²ãè¨å®ãã:", 23907 "sticker": "ã¹ããã«ã¼", 23908 "tabs": "çµµæåãã¼ã«ããã¯ã¹", 23909 "addSticker": "ã¹ããã«ã¼ã追å ", 23910 "emojiTable": "çµµæå", 23911 "iconTable": "ã¢ã¤ã³ã³", 23912 "stickerTable": "ã¹ããã«ã¼", 23913 "custom": "ã«ã¹ã¿ã çµµæå" 23914 } 23915 }, 23916 "ko-KO": { 23917 "emoji-picker": { 23918 "frequent": "ì주 ì¬ì©ë¨", 23919 "people": "ì¤ë§ì¼ ê¸°í¸ ë° ì¬ë", 23920 "nature": "ë물 ë° ìì°", 23921 "foods": "ìì ë° ìë£", 23922 "activity": "íë", 23923 "places": "ì¬í ë° ì¥ì", 23924 "objects": "ì¬ë¬¼", 23925 "symbols": "기í¸", 23926 "flags": "ê¹ë°", 23927 "search": "ê²ì", 23928 "skin": "í¼ë¶ì ì¤ì :", 23929 "searchResult": "ê²ì ê²°ê³¼", 23930 "empty": "ê²°ê³¼ ìì", 23931 "dialog": "ì´ëª¨í°ì½ì ì ííì¸ì", 23932 "tab": "ì´ëª¨í°ì½ ì¹´í ê³ ë¦¬", 23933 "table": "ì¹´í ê³ ë¦¬ë³ ì´ëª¨í°ì½", 23934 "skin0": "기본 í¼ë¶ í¤ì ìì§ ì¬ë¦¬ê¸°", 23935 "skin1": "ë°ì í¼ë¶ í¤ì ìì§ ì¬ë¦¬ê¸°", 23936 "skin2": "ì¤ê° ë°ê¸° í¼ë¶ í¤ì ìì§ ì¬ë¦¬ê¸°", 23937 "skin3": "ì¤ê° í¼ë¶ í¤ì ìì§ ì¬ë¦¬ê¸°", 23938 "skin4": "ì¤ê° ì´ëì´ í¼ë¶ í¤ì ìì§ ì¬ë¦¬ê¸°", 23939 "skin5": "ì´ëì´ í¼ë¶ í¤ì ìì§ ì¬ë¦¬ê¸°", 23940 "color0": "íëì", 23941 "color1": "ë¶íì", 23942 "color2": "주í©ì", 23943 "color3": "ë ¸ëì", 23944 "color4": "ë ¹ì", 23945 "color5": "ì주ì", 23946 "color6": "ë³´ë¼ì", 23947 "color7": "ì§í íëì", 23948 "color8": "ì°í íëì", 23949 "color9": "íì", 23950 "allIcons": "모ë ìì´ì½", 23951 "emoji": "ì´ëª¨í°ì½", 23952 "icon": "ìì´ì½", 23953 "color": "ìì´ì½ ìì ì¤ì :", 23954 "sticker": "ì¤í°ì»¤", 23955 "tabs": "ì´ëª¨í°ì½ ë구 ìì", 23956 "addSticker": "ì¤í°ì»¤ ì¶ê°", 23957 "emojiTable": "ì´ëª¨í°ì½", 23958 "iconTable": "ìì´ì½", 23959 "stickerTable": "ì¤í°ì»¤",
23960 "custom": "ì¬ì©ì ì§ì ì´ëª¨í°ì½" 23961 } 23962 }, 23963 "nl-NL": { 23964 "emoji-picker": { 23965 "frequent": "Vaak gebruikt", 23966 "people": "Smileys en mensen", 23967 "nature": "Dieren en natuur", 23968 "foods": "Eten en drinken", 23969 "activity": "Activiteiten", 23970 "places": "Reizen en plaatsen", 23971 "objects": "Voorwerpen", 23972 "symbols": "Symbolen", 23973 "flags": "Vlaggen", 23974 "search": "Zoeken", 23975 "skin": "Huidskleur instellen:", 23976 "searchResult": "Zoekresultaat", 23977 "empty": "Geen resultaten", 23978 "dialog": "Een emoji kiezen", 23979 "tab": "Emoji-categorieën", 23980 "table": "Gecategoriseerde emoji's", 23981 "skin0": "Standaardhuidskleur duim omhoog", 23982 "skin1": "Lichte huidskleur duim omhoog", 23983 "skin2": "Lichtgetinte huidskleur duim omhoog", 23984 "skin3": "Getinte huidskleur duim omhoog", 23985 "skin4": "Donkergetinte huidskleur duim omhoog", 23986 "skin5": "Donkere huidskleur duim omhoog", 23987 "color0": "Blauw", 23988 "color1": "Roze", 23989 "color2": "Oranje", 23990 "color3": "Geel", 23991 "color4": "Groen", 23992 "color5": "Magenta", 23993 "color6": "Paars", 23994 "color7": "Diepblauw", 23995 "color8": "Lichtblauw", 23996 "color9": "Grijs", 23997 "allIcons": "Alle pictogrammen", 23998 "emoji": "Emoji", 23999 "icon": "Pictogram", 24000 "color": "Pictogramkleur instellen:", 24001 "sticker": "Sticker", 24002 "tabs": "Emoji-toolbox", 24003 "addSticker": "Sticker toevoegen", 24004 "emojiTable": "Emoji's", 24005 "iconTable": "Pictogrammen", 24006 "stickerTable": "Stickers", 24007 "custom": "Aangepaste emoji's" 24008 } 24009 }, 24010 "pl-PL": { 24011 "emoji-picker": { 24012 "frequent": "CzÄsto używane", 24013 "people": "Buźki i osoby", 24014 "nature": "ZwierzÄta i przyroda", 24015 "foods": "Å»ywnoÅÄ i napoje", 24016 "activity": "AktywnoÅÄ", 24017 "places": "Podróże i miejsca", 24018 "objects": "Przedmioty", 24019 "symbols": "Symbole", 24020 "flags": "Flagi", 24021 "search": "Wyszukaj", 24022 "skin": "Ustaw odcieÅ skóry:", 24023 "searchResult": "Wynik wyszukiwania", 24024 "empty": "Brak wyników", 24025 "dialog": "Wybierz emotikon", 24026 "tab": "Kategorie emotikon", 24027 "table": "Skategoryzowane emotikony", 24028 "skin0": "DomyÅlny odcieÅ skóry â kciuk w górÄ", 24029 "skin1": "Jasny odcieÅ skóry â kciuk w górÄ", 24030 "skin2": "Årednio jasny odcieÅ skóry â kciuk w górÄ", 24031 "skin3": "Åredni odcieÅ skóry â kciuk w górÄ", 24032 "skin4": "Årednio ciemny odcieÅ skóry â kciuk w górÄ", 24033 "skin5": "Ciemny odcieÅ skóry â kciuk w górÄ", 24034 "color0": "Niebieski", 24035 "color1": "Różowy", 24036 "color2": "PomaraÅczowy", 24037 "color3": "ŻóÅty", 24038 "color4": "Zielony", 24039 "color5": "Magenta", 24040 "color6": "Fioletowy", 24041 "color7": "Modry", 24042 "color8": "Jasnoniebieski", 24043 "color9": "Szary", 24044 "allIcons": "Wszystkie ikony", 24045 "emoji": "Emotikon", 24046 "icon": "Ikona", 24047 "color": "Ustaw kolor ikony:", 24048 "sticker": "Naklejka", 24049 "tabs": "Zestaw narzÄdzi emotikonów", 24050 "addSticker": "Dodaj naklejkÄ", 24051 "emojiTable": "Emotikony", 24052 "iconTable": "Ikony", 24053 "stickerTable": "Naklejki", 24054 "custom": "Niestandardowe emotikony" 24055 } 24056 }, 24057 "pt-PT": { 24058 "emoji-picker": { 24059 "frequent": "Frequentemente usado", 24060 "people": "Carinhas felizes e pessoas", 24061 "nature": "Animais e natureza", 24062 "foods": "Comida e bebida", 24063 "activity": "Atividade", 24064 "places": "Viagem e lugares", 24065 "objects": "Objetos", 24066 "symbols": "SÃmbolos", 24067 "flags": "Bandeiras", 24068 "search": "Pesquisar", 24069 "skin": "Definir tom de pele:", 24070 "searchResult": "Resultado da pesquisa", 24071 "empty": "Nenhum resultado", 24072 "dialog": "Escolha um emoji", 24073 "tab": "Categorias de emoji", 24074 "table": "Emojis categorizados", 24075 "skin0": "Polegar para cima com tom de pele padrão", 24076 "skin1": "Polegar para cima com tom de pele claro", 24077 "skin2": "Polegar para cima com tom de pele médio-claro", 24078 "skin3": "Polegar para cima com tom de pele médio", 24079 "skin4": "Polegar para cima com tom de pele médio-escuro", 24080 "skin5": "Polegar para cima com tom de pele escuro", 24081 "color0": "Azul", 24082 "color1": "Rosa", 24083 "color2": "Laranja", 24084 "color3": "Amarelo", 24085 "color4": "Verde", 24086 "color5": "Magenta", 24087 "color6": "Roxo", 24088 "color7": "Azul escuro", 24089 "color8": "Azul claro", 24090 "color9": "Cinza", 24091 "allIcons": "Todos os Ãcones", 24092 "emoji": "Emoji", 24093 "icon": "Ãcone", 24094 "color": "Definir cor do Ãcone:", 24095 "sticker": "Adesivo", 24096 "tabs": "Caixa de ferramentas de emojis", 24097 "addSticker": "Adicionar adesivo", 24098 "emojiTable": "Emojis", 24099 "iconTable": "Ãcones", 24100 "stickerTable": "Adesivos",
24101 "custom": "Emojis personalizados" 24102 } 24103 }, 24104 "ru-RU": { 24105 "emoji-picker": { 24106 "frequent": "ЧаÑÑо иÑполÑзÑемÑе", 24107 "people": "Ð¡Ð¼Ð°Ð¹Ð»Ñ Ð¸ лÑди", 24108 "nature": "ÐивоÑнÑе и пÑиÑода", 24109 "foods": "Ðда и напиÑки", 24110 "activity": "ÐейÑÑвиÑ", 24111 "places": "ÐÑÑеÑеÑÑÐ²Ð¸Ñ Ð¸ меÑÑа", 24112 "objects": "ÐÑедмеÑÑ", 24113 "symbols": "СимволÑ", 24114 "flags": "Флаги", 24115 "search": "ÐоиÑк", 24116 "skin": "ÐÑбÑаÑÑ ÑÐ²ÐµÑ ÐºÐ¾Ð¶Ð¸:", 24117 "searchResult": "РезÑлÑÑаÑÑ Ð¿Ð¾Ð¸Ñка", 24118 "empty": "РезÑлÑÑаÑÑ Ð½Ðµ найденÑ", 24119 "dialog": "ÐÑбеÑиÑе Ñмодзи", 24120 "tab": "ÐаÑегоÑии Ñмодзи", 24121 "table": "ÐаÑегоÑизиÑованнÑе Ñмодзи", 24122 "skin0": "Ð¦Ð²ÐµÑ ÐºÐ¾Ð¶Ð¸ по ÑмолÑÐ°Ð½Ð¸Ñ Ð´Ð»Ñ Ð¶ÐµÑÑа «нÑавиÑÑÑ»", 24123 "skin1": "СвеÑлÑй оÑÑенок кожи, жеÑÑ Â«Ð½ÑавиÑÑÑ»", 24124 "skin2": "СÑедне-ÑвеÑлÑй оÑÑенок кожи, жеÑÑ Â«Ð½ÑавиÑÑÑ»", 24125 "skin3": "ÐейÑÑалÑнÑй оÑÑенок кожи, жеÑÑ Â«Ð½ÑавиÑÑÑ»", 24126 "skin4": "СÑедне-ÑемнÑй оÑÑенок кожи, жеÑÑ Â«Ð½ÑавиÑÑÑ»", 24127 "skin5": "ТемнÑй оÑÑенок кожи, жеÑÑ Â«Ð½ÑавиÑÑÑ»", 24128 "color0": "Синий", 24129 "color1": "РозовÑй", 24130 "color2": "ÐÑанжевÑй", 24131 "color3": "ÐелÑÑй", 24132 "color4": "ÐеленÑй", 24133 "color5": "ÐÑÑпÑÑнÑй", 24134 "color6": "ФиолеÑовÑй", 24135 "color7": "Темно-Ñиний", 24136 "color8": "ÐолÑбой", 24137 "color9": "СеÑÑй", 24138 "allIcons": "ÐÑе знаÑки", 24139 "emoji": "Ðмодзи", 24140 "icon": "ÐнаÑки", 24141 "color": "Ð¦Ð²ÐµÑ Ð·Ð½Ð°Ñка:", 24142 "sticker": "СÑикеÑÑ", 24143 "tabs": "ÐоллекÑÐ¸Ñ Ñмодзи", 24144 "addSticker": "ÐобавиÑÑ ÑÑикеÑ", 24145 "emojiTable": "Ðмодзи", 24146 "iconTable": "ÐнаÑки", 24147 "stickerTable": "СÑикеÑÑ", 24148 "custom": "ÐолÑзоваÑелÑÑкие Ñмодзи" 24149 } 24150 }, 24151 "sv-SE": { 24152 "emoji-picker": { 24153 "frequent": "Används ofta", 24154 "people": "Smileys och människor", 24155 "nature": "Djur och natur", 24156 "foods": "Mat och dryck", 24157 "activity": "Aktivitet", 24158 "places": "Resor och platser", 24159 "objects": "Objekt", 24160 "symbols": "Symboler", 24161 "flags": "Flaggor", 24162 "search": "Sök", 24163 "skin": "Ställ in hudton:", 24164 "searchResult": "Sökresultat", 24165 "empty": "Inga resultat", 24166 "dialog": "Välj en emoji", 24167 "tab": "Emoji-kategorier", 24168 "table": "Kategoriserade emojis", 24169 "skin0": "Tummen upp med standardhudton", 24170 "skin1": "Tummen upp med ljus hudton", 24171 "skin2": "Tummen upp med medelljus hudton", 24172 "skin3": "Tummen upp med medelhudton", 24173 "skin4": "Tummen upp med medelmörk hudton", 24174 "skin5": "Tummen upp med mörk hudton", 24175 "color0": "BlÃ¥", 24176 "color1": "Rosa", 24177 "color2": "Orange", 24178 "color3": "Gul", 24179 "color4": "Grön", 24180 "color5": "Magenta", 24181 "color6": "Lila", 24182 "color7": "DjupblÃ¥", 24183 "color8": "LjusblÃ¥", 24184 "color9": "GrÃ¥", 24185 "allIcons": "Alla ikoner", 24186 "emoji": "Emoji", 24187 "icon": "Ikon", 24188 "color": "Ange ikonens färg:", 24189 "sticker": "Klistermärke", 24190 "tabs": "Emoji-verktygslÃ¥da", 24191 "addSticker": "Lägg till klistermärke", 24192 "emojiTable": "Emojis", 24193 "iconTable": "Ikoner", 24194 "stickerTable": "Klistermärken", 24195 "custom": "Anpassade emojis" 24196 } 24197 }, 24198 "tr-TR": { 24199 "emoji-picker": { 24200 "frequent": "Sık kullanılan", 24201 "people": "Smiley'ler ve İnsanlar", 24202 "nature": "Hayvanlar ve DoÄa", 24203 "foods": "Yiyecek ve İçecek", 24204 "activity": "Etkinlik", 24205 "places": "Seyahat ve Yerler", 24206 "objects": "Nesneler", 24207 "symbols": "Semboller", 24208 "flags": "Bayraklar", 24209 "search": "Ara", 24210 "skin": "Ten rengini ayarlayın:", 24211 "searchResult": "Arama Sonucu", 24212 "empty": "Sonuç Yok", 24213 "dialog": "Bir emoji seçin", 24214 "tab": "Emoji kategorileri", 24215 "table": "Kategorize edilmiÅ emojiler", 24216 "skin0": "Varsayılan ten renginde baÅparmak yukarı", 24217 "skin1": "Açık ten renginde baÅparmak yukarı", 24218 "skin2": "Orta-açık ten renginde baÅparmak yukarı", 24219 "skin3": "Orta ten renginde baÅparmak yukarı", 24220 "skin4": "Orta-koyu ten renginde baÅparmak yukarı", 24221 "skin5": "Koyu ten renginde baÅparmak yukarı", 24222 "color0": "Mavi", 24223 "color1": "Pembe", 24224 "color2": "Turuncu", 24225 "color3": "Sarı", 24226 "color4": "YeÅil", 24227 "color5": "Eflatun", 24228 "color6": "Mor", 24229 "color7": "Derin Mavi", 24230 "color8": "Açık Mavi", 24231 "color9": "Gri", 24232 "allIcons": "Tüm simgeler", 24233 "emoji": "Emoji", 24234 "icon": "Simge", 24235 "color": "Simge rengini ayarla:", 24236 "sticker": "Ãıkartma", 24237 "tabs": "Emoji araç kutusu", 24238 "addSticker": "Ãıkartma ekle", 24239 "emojiTable": "Emojiler", 24240 "iconTable": "Simgeler", 24241 "stickerTable": "Ãıkartmalar",
24242 "custom": "Ãzel emojiler" 24243 } 24244 }, 24245 "vi-VN": { 24246 "emoji-picker": { 24247 "frequent": "Hay dùng", 24248 "people": "Mặt cưá»i & Ngưá»i", 24249 "nature": "Äá»ng váºt & Thiên nhiên", 24250 "foods": "Thá»±c phẩm & Äá» uá»ng", 24251 "activity": "Hoạt Äá»ng", 24252 "places": "Du lá»ch & Äá»a Äiá»m", 24253 "objects": "Äá»i tượng", 24254 "symbols": "Biá»u tượng", 24255 "flags": "Cá»", 24256 "search": "Tìm kiếm", 24257 "skin": "Äặt tông mà u da:", 24258 "searchResult": "Kết quả tìm kiếm", 24259 "empty": "Không có Kết quả", 24260 "dialog": "Chá»n biá»u tượng cảm xúc", 24261 "tab": "Danh mục biá»u tượng cảm xúc", 24262 "table": "Biá»u tượng cảm xúc ÄÆ°á»£c phân loại", 24263 "skin0": "Tông mà u da mặc Äá»nh ngón tay cái giÆ¡ lên", 24264 "skin1": "Tông mà u da sáng ngón tay cái giÆ¡ lên", 24265 "skin2": "Tông mà u da hÆ¡i sáng ngón tay cái giÆ¡ lên", 24266 "skin3": "Tông mà u da trung bình ngón tay cái giÆ¡ lên", 24267 "skin4": "Tông mà u da hÆ¡i tá»i ngón tay cái giÆ¡ lên", 24268 "skin5": "Tông mà u da tá»i ngón tay cái giÆ¡ lên", 24269 "color0": "Xanh dương", 24270 "color1": "Há»ng", 24271 "color2": "Cam", 24272 "color3": "Và ng", 24273 "color4": "Xanh lá", 24274 "color5": "Há»ng tÃm", 24275 "color6": "TÃm", 24276 "color7": "Xanh dương Äáºm", 24277 "color8": "Xanh dương nhạt", 24278 "color9": "Xám", 24279 "allIcons": "Tất cả biá»u tượng", 24280 "emoji": "Biá»u tượng cảm xúc", 24281 "icon": "Biá»u tượng", 24282 "color": "Äặt mà u biá»u tượng:", 24283 "sticker": "Nhãn dán", 24284 "tabs": "Há»p công cụ biá»u tượng cảm xúc", 24285 "addSticker": "Thêm nhãn dán", 24286 "emojiTable": "Biá»u tượng cảm xúc", 24287 "iconTable": "Biá»u tượng", 24288 "stickerTable": "Nhãn dán", 24289 "custom": "Biá»u tượng cảm xúc tùy chá»nh" 24290 } 24291 }, 24292 "zh-CN": { 24293 "emoji-picker": { 24294 "frequent": "常ç¨", 24295 "people": "表æ &人ç©", 24296 "nature": "å¨ç©&èªç¶", 24297 "foods": "é£ç©&饮æ", 24298 "activity": "æ´»å¨", 24299 "places": "æ è¡&å°ç¹", 24300 "objects": "ç©å", 24301 "symbols": "符å·", 24302 "flags": "æå¸", 24303 "search": "æç´¢", 24304 "skin": "设置è¤è²ï¼", 24305 "searchResult": "æç´¢ç»æ", 24306 "empty": "æ ç»æ", 24307 "dialog": "éæ©è¡¨æ ", 24308 "tab": "表æ ç±»å«", 24309 "table": "å类表æ ", 24310 "skin0": "é»è®¤è¤è²çæ¯èµ", 24311 "skin1": "æµ è¤è²çæ¯èµ", 24312 "skin2": "ä¸çæµ è¤è²çæ¯èµ", 24313 "skin3": "ä¸çè¤è²çæ¯èµ", 24314 "skin4": "ä¸çæ·±è¤è²çæ¯èµ", 24315 "skin5": "æ·±è¤è²çæ¯èµ", 24316 "color0": "èè²", 24317 "color1": "ç²çº¢è²", 24318 "color2": "æ©è²", 24319 "color3": "é»è²", 24320 "color4": "绿è²", 24321 "color5": "å红è²", 24322 "color6": "ç´«è²", 24323 "color7": "æ·±èè²", 24324 "color8": "æ·¡èè²", 24325 "color9": "ç°è²", 24326 "allIcons": "ææå¾æ ", 24327 "emoji": "表æ ", 24328 "icon": "徿 ", 24329 "color": "è®¾ç½®å¾æ é¢è²ï¼", 24330 "sticker": "è´´å¾", 24331 "tabs": "表æ å·¥å ·ç®±", 24332 "addSticker": "æ·»å è´´å¾", 24333 "emojiTable": "表æ ", 24334 "iconTable": "徿 ", 24335 "stickerTable": "è´´å¾", 24336 "custom": "èªå®ä¹è¡¨æ " 24337 } 24338 }, 24339 "zh-TW": { 24340 "emoji-picker": { 24341 "frequent": "常ç¨", 24342 "people": "表æ &人ç©", 24343 "nature": "åç©&èªç¶", 24344 "foods": "é£ç©&飲æ", 24345 "activity": "æ´»å", 24346 "places": "æ è¡&å°é»", 24347 "objects": "ç©ä»¶", 24348 "symbols": "符è", 24349 "flags": "æå¹", 24350 "search": "æå°", 24351 "skin": "è¨ç½®èè²ï¼", 24352 "searchResult": "æå°çµæ", 24353 "empty": "æ²æçµæ", 24354 "dialog": "é¸æè¡¨æ 符è", 24355 "tab": "表æ 符èé¡å¥", 24356 "table": "åé¡ç表æ 符è", 24357 "skin0": "é è¨èè²æ¯è®", 24358 "skin1": "æ·ºèè²æ¯è®", 24359 "skin2": "ä¸çåæ·ºèè²æ¯è®", 24360 "skin3": "ä¸çèè²æ¯è®", 24361 "skin4": "ä¸çåæ·±èè²æ¯è®", 24362 "skin5": "æ·±èè²æ¯è®", 24363 "color0": "èè²", 24364 "color1": "ç²ç´ è²", 24365 "color2": "æ©è²", 24366 "color3": "é»è²", 24367 "color4": "ç¶ è²", 24368 "color5": "æ´ç´ è²", 24369 "color6": "ç´«è²", 24370 "color7": "æ·±èè²", 24371 "color8": "æ·¡èè²", 24372 "color9": "ç°è²", 24373 "allIcons": "ææå示", 24374 "emoji": "表æ 符è", 24375 "icon": "å示", 24376 "color": "è¨å®å示é¡è²ï¼", 24377 "sticker": "è²¼å", 24378 "tabs": "表æ 符èå·¥å ·ç®±", 24379 "addSticker": "æ°å¢è²¼å", 24380 "emojiTable": "表æ 符è", 24381 "iconTable": "å示", 24382 "stickerTable": "è²¼å",
24383 "custom": "èªè¨è¡¨æ 符è" 24384 } 24385 } 24386}; 24387const coachMarkStepProps = { 24388 target: { 24389 type: definePropType([ 24390 String, 24391 Object, 24392 Function 24393 ]), 24394 default: null 24395 }, 24396 imageUrl: { 24397 type: String 24398 }, 24399 imageAlt: { 24400 type: String 24401 }, 24402 title: { 24403 type: String 24404 }, 24405 description: { 24406 type: String 24407 }, 24408 containerClass: { 24409 type: String 24410 }, 24411 testId: { 24412 type: String 24413 }, 24414 enableDismiss: { 24415 type: Boolean, 24416 default: true 24417 }, 24418 placement: { 24419 type: String 24420 }, 24421 maskPadding: { 24422 type: Number 24423 }, 24424 maskRadius: { 24425 type: Number 24426 } 24427}; 24428const COACH_MARK_STEP_COMPONENT_NAME = "ZmCoachMarkStep"; 24429var __defProp$r = Object.defineProperty; 24430var __defProps$l = Object.defineProperties; 24431var __getOwnPropDescs$l = Object.getOwnPropertyDescriptors; 24432var __getOwnPropSymbols$r = Object.getOwnPropertySymbols; 24433var __hasOwnProp$r = Object.prototype.hasOwnProperty; 24434var __propIsEnum$r = Object.prototype.propertyIsEnumerable; 24435var __defNormalProp$r = (obj, key, value) => key in obj ? __defProp$r(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 24436var __spreadValues$r = (a, b) => { 24437 for (var prop in b || (b = {})) 24438 if (__hasOwnProp$r.call(b, prop)) 24439 __defNormalProp$r(a, prop, b[prop]); 24440 if (__getOwnPropSymbols$r) 24441 for (var prop of __getOwnPropSymbols$r(b)) { 24442 if (__propIsEnum$r.call(b, prop)) 24443 __defNormalProp$r(a, prop, b[prop]); 24444 } 24445 return a; 24446}; 24447var __spreadProps$l = (a, b) => __defProps$l(a, __getOwnPropDescs$l(b)); 24448const CoachMarkSteps = { 24449 name: "ZmCoachMarkSteps", 24450 props: { 24451 current: { 24452 type: Number, 24453 default: 0 24454 } 24455 }, 24456 emits: ["update-total"], 24457 setup(props, { slots, emit }) {
24458 let cacheTotal = 0; 24459 return () => { 24460 var _a, _b, _c; 24461 const children = (_a = slots.default) == null ? void 0 : _a.call(slots); 24462 const result = []; 24463 let total = 0; 24464 function filterSteps(children2) { 24465 /* istanbul ignore next @preserve */ 24466 if (!isArray(children2)) 24467 return; 24468 children2.forEach((item) => { 24469 var _a2; 24470 const name = (_a2 = (item == null ? void 0 : item.type) || {}) == null ? void 0 : _a2.name; 24471 if (name === COACH_MARK_STEP_COMPONENT_NAME) { 24472 result.push(item); 24473 total += 1; 24474 } 24475 }); 24476 } 24477 if (children.length) { 24478 filterSteps(flattedChildren((_b = children[0]) == null ? void 0 : _b.children)); 24479 } 24480 if (cacheTotal !== total) { 24481 cacheTotal = total; 24482 emit("update-total", total); 24483 } 24484 if (result.length) { 24485 const currentComp = result[props.current]; 24486 return __spreadProps$l(__spreadValues$r({}, currentComp), { key: (_c = currentComp == null ? void 0 : currentComp.key) != null ? _c : props.current }); 24487 } 24488 return null; 24489 }; 24490 } 24491}; 24492var __defProp$q = Object.defineProperty; 24493var __defProps$k = Object.defineProperties; 24494var __getOwnPropDescs$k = Object.getOwnPropertyDescriptors; 24495var __getOwnPropSymbols$q = Object.getOwnPropertySymbols; 24496var __hasOwnProp$q = Object.prototype.hasOwnProperty; 24497var __propIsEnum$q = Object.prototype.propertyIsEnumerable; 24498var __defNormalProp$q = (obj, key, value) => key in obj ? __defProp$q(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 24499var __spreadValues$q = (a, b) => { 24500 for (var prop in b || (b = {})) 24501 if (__hasOwnProp$q.call(b, prop)) 24502 __defNormalProp$q(a, prop, b[prop]); 24503 if (__getOwnPropSymbols$q) 24504 for (var prop of __getOwnPropSymbols$q(b)) { 24505 if (__propIsEnum$q.call(b, prop)) 24506 __defNormalProp$q(a, prop, b[prop]); 24507 } 24508 return a; 24509}; 24510var __spreadProps$k = (a, b) => __defProps$k(a, __getOwnPropDescs$k(b)); 24511const coachMarkMaskProps = { 24512 clipPath: { 24513 type: String, 24514 default: null 24515 }, 24516 zIndex: { 24517 type: Number, 24518 required: true 24519 } 24520}; 24521const _hoisted_1$b = ["d"]; 24522const _sfc_main$g = /* @__PURE__ */ defineComponent(__spreadProps$k(__spreadValues$q({}, { 24523 name: "ZmCoachMarkMask" 24524}), { 24525 __name: "coach-mark-mask", 24526 props: coachMarkMaskProps, 24527 setup(__props) { 24528 const ns = useNamespace("coach-mark-mask"); 24529 return (_ctx, _cache) => { 24530 return openBlock(), createElementBlock("div", { 24531 class: normalizeClass([unref(ns).b()]), 24532 style: normalizeStyle({ zIndex: _ctx.zIndex }) 24533 }, [ 24534 _ctx.clipPath ? (openBlock(), createElementBlock("svg", { 24535 key: 0, 24536 class: normalizeClass(unref(ns).e("content")) 24537 }, [ 24538 createBaseVNode("path", { d: _ctx.clipPath }, null, 8, _hoisted_1$b) 24539 ], 2)) : createCommentVNode("", true) 24540 ], 6); 24541 }; 24542 } 24543})); 24544function getClipPath(target, padding = 8, radius = 8) { 24545 const rect = target.getBoundingClientRect(); 24546 const { top, left, width, height } = rect; 24547 const offset2 = padding; 24548 const computedWidth = width + offset2; 24549 const computedHeight = height + offset2; 24550 const computedLeft = left - offset2 / 2; 24551 const computedTop = top - offset2 / 2; 24552 const baseInfo = `a${radius},${radius} 0 0 1`; 24553 const roundInfo = { 24554 topRight: `${baseInfo} ${radius},${radius}`, 24555 bottomRight: `${baseInfo} ${-radius},${radius}`, 24556 bottomLeft: `${baseInfo} ${-radius},${-radius}`, 24557 topLeft: `${baseInfo} ${radius},${-radius}` 24558 }; 24559 const windowWidth = window.innerWidth; 24560 const windowHeight = window.innerHeight; 24561 const _path = `M${windowWidth},0 L0,0 L0,${windowHeight} L${windowWidth},${windowHeight} L${windowWidth},0 Z`; 24562 const path = `${_path} M${computedLeft + radius},${computedTop} h${computedWidth - radius * 2} ${roundInfo.topRight} v${computedHeight - radius * 2} ${roundInfo.bottomRight} h${-computedWidth + radius * 2} ${roundInfo.bottomLeft} v${-computedHeight + radius * 2} ${roundInfo.topLeft} z`; 24563 return path; 24564} 24565const coachMarkProps = { 24566 modelValue: { 24567 type: Boolean, 24568 required: true, 24569 default: false 24570 }, 24571 mask: { 24572 type: Boolean, 24573 default: false 24574 }, 24575 placement: { 24576 type: String, 24577 default: "bottom" 24578 }, 24579 storageKey: { 24580 type: String, 24581 default: "" 24582 }, 24583 teleported: { 24584 type: Boolean, 24585 default: false 24586 }, 24587 zIndex: { 24588 type: Number 24589 }, 24590 ariaLabel: { 24591 type: String 24592 }, 24593 autoScrollConfig: { 24594 type: Object, 24595 default: () => { 24596 return { 24597 behavior: "smooth", 24598 block: "center" 24599 }; 24600 } 24601 }, 24602 closeOnClickOutside: { 24603 type: Boolean, 24604 default: false 24605 }, 24606 floatingContainerClass: { 24607 type: String, 24608 default: null 24609 }, 24610 width: { 24611 type: String, 24612 default: "320px" 24613 }, 24614 positionStrategy: { 24615 type: String, 24616 default: "absolute" 24617 },
24618 removeMaskWhenChange: { 24619 type: Boolean, 24620 default: false 24621 }, 24622 afterLeave: { 24623 type: Function, 24624 default: () => true 24625 }, 24626 floatingOptions: { 24627 type: Object, 24628 default() { 24629 return {}; 24630 } 24631 }, 24632 maskPadding: { 24633 type: Number, 24634 default: 8 24635 }, 24636 maskRadius: { 24637 type: Number, 24638 default: 8 24639 } 24640}; 24641const defaultCoachMarkFloatingOptions = { 24642 shift: true, 24643 shiftOptions: { 24644 limiter: limitShift() 24645 }, 24646 flip: true, 24647 flipOptions: {}, 24648 offsetOptions: 12 24649}; 24650const COACH_MARK_PREFIX = "CoachMark"; 24651const COACH_MARK_STORAGE_VALUE = "TRUE"; 24652var COACH_MARK_ACTION = /* @__PURE__ */ ((COACH_MARK_ACTION2) => { 24653 COACH_MARK_ACTION2["NEXT"] = "NEXT"; 24654 COACH_MARK_ACTION2["PREVIOUS"] = "PREVIOUS"; 24655 COACH_MARK_ACTION2["NONE"] = "NONE"; 24656 COACH_MARK_ACTION2["SKIP"] = "SKIP"; 24657 return COACH_MARK_ACTION2; 24658})(COACH_MARK_ACTION || {}); 24659const COACH_MARK_PROVIDE_KEY = "COACH_MARK_PROVIDE_KEY"; 24660var __defProp$p = Object.defineProperty; 24661var __getOwnPropSymbols$p = Object.getOwnPropertySymbols; 24662var __hasOwnProp$p = Object.prototype.hasOwnProperty; 24663var __propIsEnum$p = Object.prototype.propertyIsEnumerable; 24664var __defNormalProp$p = (obj, key, value) => key in obj ? __defProp$p(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 24665var __spreadValues$p = (a, b) => { 24666 for (var prop in b || (b = {})) 24667 if (__hasOwnProp$p.call(b, prop)) 24668 __defNormalProp$p(a, prop, b[prop]); 24669 if (__getOwnPropSymbols$p) 24670 for (var prop of __getOwnPropSymbols$p(b)) { 24671 if (__propIsEnum$p.call(b, prop)) 24672 __defNormalProp$p(a, prop, b[prop]); 24673 } 24674 return a; 24675}; 24676var __async$b = (__this, __arguments, generator) => { 24677 return new Promise((resolve2, reject) => { 24678 var fulfilled = (value) => { 24679 try { 24680 step(generator.next(value)); 24681 } catch (e) { 24682 reject(e); 24683 } 24684 }; 24685 var rejected = (value) => { 24686 try { 24687 step(generator.throw(value)); 24688 } catch (e) { 24689 reject(e); 24690 } 24691 }; 24692 var step = (x) => x.done ? resolve2(x.value) : Promise.resolve(x.value).then(fulfilled, rejected); 24693 step((generator = generator.apply(__this, __arguments)).next()); 24694 }); 24695}; 24696function isInViewPort(element, offset2) { 24697 const viewWidth = window.innerWidth; 24698 const viewHeight = window.innerHeight; 24699 const { top, right, bottom, left } = element.getBoundingClientRect(); 24700 return top + offset2 >= 0 && left + offset2 >= 0 && right - offset2 <= viewWidth && bottom - offset2 <= viewHeight; 24701} 24702const useTarget = (target, scrollIntoViewOptions, maskPadding, maskRadius) => { 24703 const posInfo = ref(null); 24704 const clipPath = ref(); 24705 const getTargetEl = () => { 24706 var _a; 24707 let targetEl2; 24708 if (isString(target.value)) { 24709 targetEl2 = document.querySelector(target.value); 24710 } else if (isFunction(target.value)) { 24711 targetEl2 = target.value(); 24712 } else { 24713 targetEl2 = (_a = target.value) != null ? _a : null; 24714 } 24715 return targetEl2; 24716 }; 24717 const updatePosInfo = () => __async$b(void 0, null, function* () { 24718 const targetEl2 = getTargetEl(); 24719 if (!targetEl2) { 24720 posInfo.value = null; 24721 return; 24722 } 24723 if (!isInViewPort(targetEl2, 4)) { 24724 setTimeout(() => { 24725 targetEl2.scrollIntoView(scrollIntoViewOptions.value); 24726 }, 0); 24727 } 24728 updateClipPath(); 24729 const { left, top, width, height } = targetEl2.getBoundingClientRect(); 24730 posInfo.value = { 24731 left, 24732 top, 24733 width, 24734 height 24735 }; 24736 }); 24737 function updateClipPath() { 24738 const targetEl2 = getTargetEl(); 24739 if (targetEl2 && isInViewPort(targetEl2, 4)) { 24740 raf(() => { 24741 clipPath.value = getClipPath(targetEl2, maskPadding.value, maskRadius.value); 24742 }); 24743 } 24744 } 24745 onMounted(() => { 24746 watch( 24747 [target], 24748 () => { 24749 updatePosInfo(); 24750 }, 24751 { 24752 immediate: true 24753 } 24754 ); 24755 window.addEventListener("resize", updatePosInfo); 24756 window.addEventListener("scroll", updateClipPath); 24757 }); 24758 onBeforeUnmount(() => { 24759 window.removeEventListener("resize", updatePosInfo); 24760 window.removeEventListener("scroll", updateClipPath); 24761 }); 24762 const triggerTarget = computed(() => { 24763 const targetEl2 = getTargetEl(); 24764 return targetEl2; 24765 }); 24766 return { 24767 clipPath, 24768 target: triggerTarget 24769 }; 24770}; 24771const useFloating$1 = (coachMarkProps2, referenceRef, contentRef, arrowRef, zIndex2, strategy, currentStepInstance) => { 24772 var _a, _b; 24773 let cleanup; 24774 const x = ref(); 24775 const y = ref(); 24776 const side = ref(); 24777 const middlewareData = ref({}); 24778 const currentPlacement = ref( 24779 (_b = (_a = currentStepInstance.value) == null ? void 0 : _a.placement) != null ? _b : coachMarkProps2.placement 24780 ); 24781 const floatingOptions = __spreadValues$p(__spreadValues$p({}
24781, defaultCoachMarkFloatingOptions), coachMarkProps2.floatingOptions); 24782 const middleware = computed(() => { 24783 const _middleware = [ 24784 offset(floatingOptions.offsetOptions), 24785 floatingOptions.shift ? shift(floatingOptions.shiftOptions) : null, 24786 floatingOptions.flip ? flip(floatingOptions.flipOptions) : null, 24787 overflowMiddleware() 24788 ].filter(Boolean); 24789 if (unref(arrowRef)) { 24790 _middleware.push( 24791 arrow({ 24792 element: unref(arrowRef), 24793 padding: 4 24794 }) 24795 ); 24796 } 24797 return _middleware; 24798 }); 24799 watchEffect(() => { 24800 doAutoUpdate(); 24801 }); 24802 watch(currentStepInstance, (newStepInstance) => { 24803 var _a2; 24804 currentPlacement.value = (_a2 = newStepInstance == null ? void 0 : newStepInstance.placement) != null ? _a2 : coachMarkProps2.placement; 24805 }); 24806 watch( 24807 currentPlacement, 24808 (newVal) => { 24809 side.value = newVal.split("-")[0]; 24810 }, 24811 { 24812 immediate: true 24813 } 24814 ); 24815 const contentStyle = computed(() => { 24816 const { overflow } = middlewareData.value; 24817 return { 24818 top: unref(y) != null ? `${unref(y)}px` : "", 24819 left: unref(x) != null ? `${unref(x)}px` : "", 24820 maxWidth: (overflow == null ? void 0 : overflow.maxWidth) ? `${overflow == null ? void 0 : overflow.maxWidth}px` : "", 24821 zIndex: unref(zIndex2) 24822 }; 24823 }); 24824 const arrowStyle = computed(() => { 24825 var _a2; 24826 const { x: x2, y: y2 } = (_a2 = middlewareData.value.arrow) != null ? _a2 : {}; 24827 const computeArrowPosition = { 24828 top: "bottom", 24829 bottom: "top", 24830 left: "right", 24831 right: "left" 24832 }; 24833 const computedPlacementPosition = currentPlacement.value.split("-")[0]; 24834 return { 24835 left: x2 != null ? `${x2}px` : "", 24836 top: y2 != null ? `${y2}px` : "", 24837 [computeArrowPosition[computedPlacementPosition]]: "-5px" 24838 }; 24839 }); 24840 function update() { 24841 return __async$b(this, null, function* () { 24842 const referenceEl = unref(referenceRef); 24843 const contentEl = unref(contentRef); 24844 /* istanbul ignore next @preserve */ 24845 if (!referenceEl || !contentEl) 24846 return; 24847 const { 24848 x: _x, 24849 y: _y, 24850 middlewareData: _middlewareData, 24851 placement: _placement 24852 } = yield computePosition(referenceEl, contentEl, { 24853 placement: unref(currentPlacement), 24854 middleware: unref(middleware), 24855 strategy: unref(strategy) 24856 }); 24857 x.value = _x; 24858 y.value = _y; 24859 middlewareData.value = _middlewareData; 24860 currentPlacement.value = _placement; 24861 }); 24862 } 24863 function doAutoUpdate() { 24864 const referenceEl = unref(referenceRef); 24865 const contentEl = unref(contentRef); 24866 if (cleanup) { 24867 cleanup && cleanup(); 24868 cleanup = null; 24869 } 24870 if (referenceEl && contentEl) { 24871 cleanup = autoUpdate(referenceEl, contentEl, update); 24872 } 24873 } 24874 onBeforeUnmount(() => { 24875 cleanup && cleanup(); 24876 }); 24877 return { 24878 update, 24879 contentStyle, 24880 arrowStyle, 24881 side 24882 }; 24883}; 24884const overflowMiddleware = () => { 24885 return { 24886 name: "overflow", 24887 fn(state) { 24888 return __async$b(this, null, function* () { 24889 const overflow = yield detectOverflow(state); 24890 let overWidth = 0; 24891 /* istanbul ignore next @preserve */ 24892 if (overflow.left > 0) 24893 overWidth = overflow.left; 24894 if (overflow.right > 0) 24895 overWidth = overflow.right; 24896 const floatingWidth = state.rects.floating.width; 24897 return { 24898 data: { 24899 maxWidth: floatingWidth - overWidth 24900 } 24901 }; 24902 }); 24903 } 24904 }; 24905}; 24906const useLockscreen = (trigger, options = {}) => { 24907 var _a, _b; 24908 /* istanbul ignore next @preserve */ 24909 if (!isRef(trigger)) { 24910 throwError("[useLockscreen]", "You need to pass a ref param to this function"); 24911 } 24912 const ns = (_a = options.ns) != null ? _a : useNamespace("popup"); 24913 const hiddenCls = computed(() => ns.bm("parent", "hidden")); 24914 /* istanbul ignore next @preserve */ 24915 if (!isClient) { 24916 return; 24917 } 24918 let scrollBarWidth2 = 0; 24919 let addHiddenClass = false; 24920 let bodyWidth = "0"; 24921 const cleanup = () => { 24922 if (addHiddenClass) { 24923 removeClass(document.body, hiddenCls.value); 24924 document.body.style.width = bodyWidth; 24925 addHiddenClass = false;
24926 } 24927 }; 24928 watch( 24929 trigger, 24930 (val) => { 24931 if (!val) { 24932 cleanup(); 24933 return; 24934 } 24935 const NoHiddenClassOnBody = !hasClass(document.body, hiddenCls.value); 24936 scrollBarWidth2 = getScrollBarWidth(ns.namespace); 24937 const bodyHasOverflow = document.documentElement.clientHeight < document.body.scrollHeight; 24938 const bodyOverflowY = getStyle(document.body, "overflowY"); 24939 if ((bodyHasOverflow || bodyOverflowY === "scroll") && NoHiddenClassOnBody) { 24940 bodyWidth = document.body.style.width; 24941 document.body.style.width = `calc(100% - ${scrollBarWidth2}px)`; 24942 addClass(document.body, hiddenCls.value); 24943 addHiddenClass = true; 24944 } 24945 }, 24946 { 24947 immediate: (_b = options.immediate) != null ? _b : false 24948 } 24949 ); 24950 onScopeDispose(() => { 24951 cleanup(); 24952 }); 24953}; 24954var __defProp$o = Object.defineProperty; 24955var __defProps$j = Object.defineProperties; 24956var __getOwnPropDescs$j = Object.getOwnPropertyDescriptors; 24957var __getOwnPropSymbols$o = Object.getOwnPropertySymbols; 24958var __hasOwnProp$o = Object.prototype.hasOwnProperty; 24959var __propIsEnum$o = Object.prototype.propertyIsEnumerable; 24960var __defNormalProp$o = (obj, key, value) => key in obj ? __defProp$o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 24961var __spreadValues$o = (a, b) => { 24962 for (var prop in b || (b = {})) 24963 if (__hasOwnProp$o.call(b, prop)) 24964 __defNormalProp$o(a, prop, b[prop]); 24965 if (__getOwnPropSymbols$o) 24966 for (var prop of __getOwnPropSymbols$o(b)) { 24967 if (__propIsEnum$o.call(b, prop)) 24968 __defNormalProp$o(a, prop, b[prop]); 24969 } 24970 return a; 24971}; 24972var __spreadProps$j = (a, b) => __defProps$j(a, __getOwnPropDescs$j(b)); 24973var __async$a = (__this, __arguments, generator) => { 24974 return new Promise((resolve2, reject) => { 24975 var fulfilled = (value) => { 24976 try { 24977 step(generator.next(value)); 24978 } catch (e) { 24979 reject(e); 24980 } 24981 }; 24982 var rejected = (value) => { 24983 try { 24984 step(generator.throw(value)); 24985 } catch (e) { 24986 reject(e); 24987 } 24988 }; 24989 var step = (x) => x.done ? resolve2(x.value) : Promise.resolve(x.value).then(fulfilled, rejected); 24990 step((generator = generator.apply(__this, __arguments)).next()); 24991 }); 24992}; 24993const _hoisted_1$a = ["data-side", "aria-label", "aria-labelledby"]; 24994const _sfc_main$f = /* @__PURE__ */ defineComponent(__spreadProps$j(__spreadValues$o({}, { 24995 name: "ZmCoachMark" 24996}), { 24997 __name: "coach-mark", 24998 props: coachMarkProps, 24999 emits: ["update:modelValue"], 25000 setup(__props, { expose: __expose, emit: __emit }) { 25001 var _a; 25002 const props = __props; 25003 const emit = __emit; 25004 const teleportedContextClass = useTeleportedContextClass(props); 25005 const instance = getCurrentInstance(); 25006 const ns = useNamespace("coach-mark"); 25007 const baseId = `${ns.b()}__${instance.uid}`; 25008 const localStorageKey = `${COACH_MARK_PREFIX}-${props.storageKey}`; 25009 const { nextZIndex, currentZIndex } = useOverlayZIndex(); 25010 const isChangingStep = ref(false); 25011 const currentIndex = ref(0); 25012 const arrowRef = ref(null); 25013 const coachMarkRef = ref(); 25014 const total = ref(0); 25015 const tempAction = ref(COACH_MARK_ACTION.NONE); 25016 const currentStepInstance = ref(null); 25017 const trapped = ref(false); 25018 const isInitialFocused = ref(false); 25019 const zIndex2 = ref((_a = props.zIndex) != null ? _a : nextZIndex()); 25020 const activeTemplate = computed(() => { 25021 var _a2; 25022 if (isChangingStep.value) 25023 return null; 25024 return (_a2 = currentStepInstance.value) != null ? _a2 : null; 25025 }); 25026 const currentTarget = computed(() => { 25027 var _a2; 25028 return (_a2 = activeTemplate.value) == null ? void 0 : _a2.target; 25029 }); 25030 const currentMaskPadding = computed(() => { 25031 var _a2, _b; 25032 return (_b = (_a2 = currentStepInstance.value) == null ? void 0 : _a2.maskPadding) != null ? _b : props.maskPadding; 25033 }); 25034 const currentMaskRadius = computed(() => { 25035 var _a2, _b; 25036 return (_b = (_a2 = currentStepInstance.value) == null ? void 0 : _a2.maskRadius) != null ? _b : props.maskRadius; 25037 }); 25038 const titleId = computed(() => { 25039 var _a2; 25040 const { title } = (_a2 = currentStepInstance.value) != null ? _a2 : {}; 25041 return title ? `${baseId}__title__${currentIndex.value}` : void 0; 25042 }); 25043 const { target, clipPath } = useTarget( 25044 currentTarget, 25045 toRef(props, "autoScrollConfig"), 25046 currentMaskPadding, 25047 currentMaskRadius 25048 ); 25049 const { contentStyle, arrowStyle, side } = useFloating$1( 25050 props, 25051 target,
25052 coachMarkRef, 25053 arrowRef, 25054 zIndex2, 25055 toRef(props, "positionStrategy"), 25056 currentStepInstance 25057 ); 25058 const { focusTrapRef, startFocus, restoreFocus } = useFocusTrap(); 25059 props.mask && useLockscreen(toRef(props, "modelValue"), { 25060 ns, 25061 immediate: true 25062 }); 25063 watch( 25064 () => currentIndex.value, 25065 (val) => { 25066 if (val >= total.value) { 25067 handleStepEnd(); 25068 return; 25069 } 25070 updateZIndex(); 25071 } 25072 ); 25073 watch( 25074 () => props.modelValue, 25075 (val) => { 25076 if (val) { 25077 if (props.storageKey && localStorage.getItem(localStorageKey) === COACH_MARK_STORAGE_VALUE) { 25078 emit(VUE_EVENT_NAMES.UPDATE_MODEL, false); 25079 } 25080 } else { 25081 resetState(); 25082 } 25083 } 25084 ); 25085 function resetState() { 25086 currentIndex.value = 0; 25087 isInitialFocused.value = false; 25088 currentStepInstance.value = null; 25089 isChangingStep.value = false; 25090 tempAction.value = COACH_MARK_ACTION.NONE; 25091 trapped.value = false; 25092 } 25093 function onUpdateTotal(val) { 25094 total.value = val; 25095 } 25096 function doSkip() { 25097 isChangingStep.value = true; 25098 tempAction.value = COACH_MARK_ACTION.SKIP; 25099 } 25100 function handleAnimationLeave() { 25101 return __async$a(this, null, function* () { 25102 const nextIndexMap = { 25103 [COACH_MARK_ACTION.NONE]: currentIndex.value, 25104 [COACH_MARK_ACTION.PREVIOUS]: currentIndex.value - 1, 25105 [COACH_MARK_ACTION.NEXT]: currentIndex.value + 1, 25106 [COACH_MARK_ACTION.SKIP]: total.value 25107 }; 25108 const nextIndex = nextIndexMap[tempAction.value]; 25109 if (tempAction.value !== COACH_MARK_ACTION.NONE) { 25110 const res = yield props.afterLeave(currentIndex.value, nextIndex, tempAction.value); 25111 /* istanbul ignore next @preserve */ 25112 if (!res) { 25113 return; 25114 } 25115 } 25116 isChangingStep.value = false; 25117 trapped.value = false; 25118 currentIndex.value = nextIndex; 25119 tempAction.value = COACH_MARK_ACTION.NONE; 25120 }); 25121 } 25122 function handleStepEnd() { 25123 props.storageKey && localStorage.setItem(localStorageKey, COACH_MARK_STORAGE_VALUE); 25124 emit(VUE_EVENT_NAMES.UPDATE_MODEL, false); 25125 restoreFocus(); 25126 } 25127 function handleAfterEnter() { 25128 trapped.value = true; 25129 if (isInitialFocused.value) { 25130 tryFocusFirst(); 25131 } else { 25132 isInitialFocused.value = true; 25133 startFocus(); 25134 } 25135 } 25136 function tryFocusFirst() { 25137 if (coachMarkRef.value) { 25138 focusFirstDescendant(obtainAllFocusableElements(coachMarkRef.value), true); 25139 } 25140 } 25141 function onCloseRequested() { 25142 doSkip(); 25143 } 25144 function handleClickOutside() { 25145 doSkip(); 25146 } 25147 function updateZIndex() { 25148 /* istanbul ignore next @preserve */ 25149 if (props.zIndex) 25150 return; 25151 if (currentZIndex.value > zIndex2.value) { 25152 zIndex2.value = nextZIndex(); 25153 } 25154 } 25155 provide(COACH_MARK_PROVIDE_KEY, { 25156 isChangingStep, 25157 currentIndex, 25158 tempAction, 25159 total, 25160 currentStepInstance, 25161 titleId, 25162 doSkip 25163 }); 25164 __expose({ 25165 currentIndex 25166 }); 25167 return (_ctx, _cache) => { 25168 return openBlock(), createBlock(Teleport, { 25169 to: "body", 25170 disabled: !_ctx.teleported 25171 }, [ 25172 createVNode(Transition, { 25173 name: `${unref(ns).namespace}-fade-in-linear` 25174 }, { 25175 default: withCtx(() => [ 25176 _ctx.mask && currentIndex.value < total.value && _ctx.modelValue && unref(clipPath) ? withDirectives((openBlock(), createBlock(_sfc_main$g, { 25177 key: 0, 25178 "clip-path": unref(clipPath), 25179 mask: _ctx.mask, 25180 "z-index": zIndex2.value 25181 }, null, 8, ["clip-path", "mask", "z-index"])), [ 25182 [vShow, !_ctx.removeMaskWhenChange || !isChangingStep.value] 25183 ]) : createCommentVNode("", true) 25184 ]), 25185 _: 1 25186 }, 8, ["name"]), 25187 createVNode(Transition, { 25188 name: `${unref(ns).namespace}-fade-in-linear`, 25189 onAfterLeave: handleAnimationLeave, 25190 onAfterEnter: handleAfterEnter 25191 }, { 25192 default: withCtx(() => [ 25193 _ctx.modelValue ? withDirectives((openBlock(), createElementBlock("div", { 25194 key: 0,
25195 ref_key: "coachMarkRef", 25196 ref: coachMarkRef, 25197 "data-side": unref(side), 25198 role: "dialog", 25199 class: normalizeClass([unref(ns).b(), unref(ns).m("floating"), _ctx.floatingContainerClass, unref(teleportedContextClass)]), 25200 style: normalizeStyle(__spreadProps$j(__spreadValues$o({}, unref(contentStyle)), { width: _ctx.width, position: _ctx.positionStrategy })), 25201 "aria-label": _ctx.ariaLabel, 25202 "aria-labelledby": titleId.value 25203 }, [ 25204 createBaseVNode("div", { 25205 ref_key: "arrowRef", 25206 ref: arrowRef, 25207 style: normalizeStyle(unref(arrowStyle)), 25208 class: normalizeClass([unref(ns).e("arrow")]) 25209 }, null, 6), 25210 createVNode(unref(ZmFocusTrap), { 25211 ref_key: "focusTrapRef", 25212 ref: focusTrapRef, 25213 loop: "", 25214 trapped: trapped.value, 25215 "focus-trap-el": coachMarkRef.value, 25216 onReleaseRequested: onCloseRequested 25217 }, { 25218 default: withCtx(() => [ 25219 createVNode(unref(CoachMarkSteps), { 25220 current: currentIndex.value, 25221 onUpdateTotal 25222 }, { 25223 default: withCtx(() => [ 25224 renderSlot(_ctx.$slots, "default") 25225 ]), 25226 _: 3 25227 }, 8, ["current"]) 25228 ]), 25229 _: 3 25230 }, 8, ["trapped", "focus-trap-el"]) 25231 ], 14, _hoisted_1$a)), [ 25232 [vShow, !isChangingStep.value && unref(target) && currentIndex.value < total.value], 25233 [unref(ClickOutside), handleClickOutside, !_ctx.closeOnClickOutside] 25234 ]) : createCommentVNode("", true) 25235 ]), 25236 _: 3 25237 }, 8, ["name"]) 25238 ], 8, ["disabled"]); 25239 }; 25240 } 25241})); 25242var __defProp$n = Object.defineProperty; 25243var __defProps$i = Object.defineProperties; 25244var __getOwnPropDescs$i = Object.getOwnPropertyDescriptors; 25245var __getOwnPropSymbols$n = Object.getOwnPropertySymbols; 25246var __hasOwnProp$n = Object.prototype.hasOwnProperty; 25247var __propIsEnum$n = Object.prototype.propertyIsEnumerable; 25248var __defNormalProp$n = (obj, key, value) => key in obj ? __defProp$n(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 25249var __spreadValues$n = (a, b) => { 25250 for (var prop in b || (b = {})) 25251 if (__hasOwnProp$n.call(b, prop)) 25252 __defNormalProp$n(a, prop, b[prop]); 25253 if (__getOwnPropSymbols$n) 25254 for (var prop of __getOwnPropSymbols$n(b)) { 25255 if (__propIsEnum$n.call(b, prop)) 25256 __defNormalProp$n(a, prop, b[prop]); 25257 } 25258 return a; 25259}; 25260var __spreadProps$i = (a, b) => __defProps$i(a, __getOwnPropDescs$i(b)); 25261const _hoisted_1$9 = ["data-testid"]; 25262const _hoisted_2$5 = ["alt", "src"]; 25263const _hoisted_3$3 = ["id"]; 25264const _sfc_main$e = /* @__PURE__ */ defineComponent(__spreadProps$i(__spreadValues$n({}, { 25265 name: COACH_MARK_STEP_COMPONENT_NAME 25266}), { 25267 __name: "coach-mark-step", 25268 props: coachMarkStepProps, 25269 setup(__props) { 25270 const props = __props; 25271 const ns = useNamespace("coach-mark-step"); 25272 const { t } = useLocale(messages$c); 25273 const { 25274 currentIndex, 25275 total, 25276 currentStepInstance, 25277 tempAction, 25278 isChangingStep, 25279 doSkip, 25280 titleId 25281 } = inject(COACH_MARK_PROVIDE_KEY); 25282 watch( 25283 props, 25284 (val) => { 25285 currentStepInstance.value = val; 25286 }, 25287 { 25288 immediate: true 25289 } 25290 ); 25291 function handlePrevious() { 25292 isChangingStep.value = true; 25293 tempAction.value = COACH_MARK_ACTION.PREVIOUS; 25294 } 25295 function handleNext() { 25296 isChangingStep.value = true; 25297 tempAction.value = COACH_MARK_ACTION.NEXT; 25298 } 25299 return (_ctx, _cache) => { 25300 return openBlock(), createElementBlock("div", { 25301 key: unref(currentIndex), 25302 class: normalizeClass([unref(ns).e("container"), _ctx.containerClass]), 25303 "data-testid": _ctx.testId 25304 }, [ 25305 renderSlot(_ctx.$slots, "header", {}, () => [ 25306 _ctx.imageUrl ? (openBlock(), createElementBlock("img", { 25307 key: 0, 25308 class: normalizeClass([unref(ns).e("header")]), 25309 alt: _ctx.imageAlt, 25310 src: _ctx.imageUrl 25311 }, null, 10, _hoisted_2$5)) : createCommentVNode("", true) 25312 ]), 25313 renderSlot(_ctx.$slots, "default", {}, () => [ 25314 createBaseVNode("div", { 25315 class: normalizeClass([unref(ns).e("body")]) 25316 }, [ 25317 createBaseVNode("div", { 25318 id: unref(titleId), 25319 class: normalizeClass([unref(ns).e("title")]), 25320 role: "heading", 25321 "aria-level": "2" 25322 }, toDisplayString(_ctx.title), 11, _hoisted_3$3), 25323 createBaseVNode("div", { 25324 class: normalizeClass([unref(ns).e("content")]) 25325 }, toDisplayString(_ctx.description), 3) 25326 ], 2) 25327 ]), 25328 renderSlot(_ctx.$slots, "footer", { 25329 skip: unref(doSkip), 25330 previous: handlePrevious, 25331 next: handleNext 25332 }, () => [ 25333 createBaseVNode("div", { 25334 class: normalizeClass([unref(ns).e("footer")]) 25335 }, [ 25336 renderSlot(_ctx.$slots, "progress", { 25337 current: unref(currentIndex), 25338 total: unref(total) 25339 }, () => [ 25340 createBaseVNode("div", { 25341 class: normalizeClass([unref(ns).e("progress")]) 25342 }, toDisplayString(unref(currentIndex) + 1) + "/" + toDisplayString(unref(total)), 3) 25343 ]), 25344 createBaseVNode("div", { 25345 class: normalizeClass([unref(ns).e("actions")]) 25346 }, [ 25347 _ctx.enableDismiss ? renderSlot(_ctx.$slots, "skip", { 25348 key: 0, 25349 skip: unref(doSkip) 25350 }, () => [ 25351 createVNode(unref(ZmButton), { 25352 type: "tertiary", 25353 size: "sm", 25354 "test-id": unref(buildTestId)(_ctx.testId, "-dismiss"), 25355 onClick: unref(doSkip) 25356 }, { 25357 default: withCtx(() => [ 25358 createTextVNode(toDisplayString(unref(t)("basic.dismiss")), 1) 25359 ]), 25360 _: 1 25361 }, 8, ["test-id", "onClick"]) 25362 ]) : createCommentVNode("", true), 25363 renderSlot(_ctx.$slots, "previous", { previous: handlePrevious }, () => [ 25364 unref(currentIndex) > 0 ? (openBlock(), createBlock(unref(ZmButton), { 25365 key: 0, 25366 type: "tertiary", 25367 size: "sm", 25368 "test-id": unref(buildTestId)(_ctx.testId, "-previous"), 25369 onClick: handlePrevious 25370 }, { 25371 default: withCtx(() => [ 25372 createTextVNode(toDisplayString(unref(t)("basic.prev")), 1
25372) 25373 ]), 25374 _: 1 25375 }, 8, ["test-id"])) : createCommentVNode("", true) 25376 ]), 25377 renderSlot(_ctx.$slots, "next", { 25378 next: handleNext, 25379 currentStep: unref(currentIndex) 25380 }, () => [ 25381 createVNode(unref(ZmButton), { 25382 type: unref(currentIndex) === unref(total) - 1 ? "primary" : "secondary", 25383 size: "sm", 25384 "test-id": unref(buildTestId)(_ctx.testId, unref(currentIndex) === unref(total) - 1 ? "-ok" : "-next"), 25385 onClick: handleNext 25386 }, { 25387 default: withCtx(() => [ 25388 createTextVNode(toDisplayString(unref(currentIndex) === unref(total) - 1 ? unref(t)("basic.ok") : unref(t)("basic.next")), 1) 25389 ]), 25390 _: 1 25391 }, 8, ["type", "test-id"]) 25392 ]) 25393 ], 2) 25394 ], 2) 25395 ]) 25396 ], 10, _hoisted_1$9); 25397 }; 25398 } 25399})); 25400const ZmCoachMark = withInstall(_sfc_main$f, { 25401 CoachMarkStep: _sfc_main$e 25402}); 25403const ZmCoachMarkStep = _sfc_main$e; 25404const CONFIRM_COLUMNS_CHANGE_SOURCE = { 25405 RESET: "reset", 25406 CONFIRM: "confirm" 25407}; 25408/* istanbul ignore next @preserve */ 25409const defaultProps$3 = { 25410 data: { 25411 type: Array, 25412 default: () => [] 25413 }, 25414 rowKey: { 25415 type: [String, Function], 25416 default: "", 25417 require: true, 25418 validator: (val) => { 25419 if (isEmpty(val)) { 25420 console.error("ZmVirtualTable:", "rowKey is required!"); 25421 return false; 25422 } 25423 return true; 25424 } 25425 }, 25426 keeps: { 25427 type: Number, 25428 default: 20 25429 }, 25430 height: { 25431 type: [String, Number], 25432 default: 400 25433 }, 25434 showHeader: { 25435 type: Boolean, 25436 default: true 25437 }, 25438 greyHeader: Boolean, 25439 border: Boolean, 25440 pullup: Boolean, 25441 skeleton: Object, 25442 emptyText: String, 25443 headerRowClassName: [String, Function], 25444 headerRowStyle: [Object, Function], 25445 headerCellClassName: [String, Function], 25446 headerCellStyle: [Object, Function], 25447 rowClassName: [String, Function], 25448 rowStyle: [Object, Function], 25449 cellClassName: [String, Function], 25450 cellStyle: [Object, Function], 25451 selectOnIndeterminate: { 25452 type: Boolean, 25453 default: true 25454 }, 25455 defaultSort: Object, 25456 defaultExpandAll: Boolean, 25457 showSummary: Boolean, 25458 sumText: String, 25459 summaryMethod: Function, 25460 adjustColumn: Boolean, 25461 treeProps: { 25462 type: Object, 25463 default: () => { 25464 return { 25465 hasChildren: "hasChildren", 25466 children: "children" 25467 }; 25468 } 25469 }, 25470 lazy: Boolean, 25471 load: Function, 25472 expandRowKeys: Array, 25473 initDisplayedColumn: Object, 25474 externalSetting: Boolean, 25475 spanMethod: Function, 25476 forceExpand: [Object, Boolean], 25477 alwaysScrollbar: { 25478 type: Boolean, 25479 default: true 25480 }, 25481 showExpandIcon: { 25482 type: Boolean, 25483 default: true 25484 }, 25485 threshold: { 25486 type: Number, 25487 default: 1 25488 }, 25489 draggable: Boolean, 25490 highlightCurrentRow: Boolean, 25491 ariaLabel: String, 25492 ariaDescribedby: String, 25493 testId: String 25494}; 25495/* istanbul ignore next @preserve */ 25496const colgroupProps = { 25497 columns: { 25498 type: Array, 25499 default: () => [] 25500 } 25501}; 25502const TableColgroup = defineComponent({ 25503 name: "ZmVirtualColgroup", 25504 props: colgroupProps, 25505 setup(props) { 25506 const owner = inject(Virtual_TABLE_INJECTION_KEY); 25507 const getPropsData = (column) => { 25508 const propsData = { 25509 key: column.id, 25510 name: column.id 25511 }; 25512 return propsData; 25513 }; 25514 const shouldAppendSettingsCol = computed(() => { 25515 var _a; 25516 const initDisplayedColumn = owner.store.states.initDisplayedColumn; 25517 const isSkeleton = (_a = owner.store.states.skeleton.value) == null ? void 0 : _a.loading; 25518 return !owner.props.externalSetting && initDisplayedColumn.value && !isSkeleton; 25519 }); 25520 return () => h("colgroup", {}, [ 25521 ...props.columns.map((column) => h("col", getPropsData(column))), 25522 shouldAppendSettingsCol.value ? h("col", { 25523 key: "virtual-table_settings_col", 25524 name: "virtual-table_settings_col", 25525 width: 1 25526 }) : null 25527 ]); 25528 } 25529}); 25530const getAllColumns = (columns) => { 25531 const result = []; 25532 columns.forEach((column) => { 25533 if (column.children) { 25534 result.push(column); 25535 result.push.apply(result, getAllColumns(column.children)); 25536 } else { 25537 result.push(column); 25538 } 25539 }); 25540 return result; 25541}; 25542const setColIndex = (rows, owner) => { 25543 const headerRowCount = rows.length; 25544 const displayedColumns = owner.store.states.columns.value.filter((column) => { 25545 return column.type !== "expand" || !owner.props.forceExpand && owner.props.showExpandIcon; 25546 }); 25547 const headerColumnCount = displayedColumns.length; 25548 const headerGrid = Array(headerRowCount).fill(null).map(() => { 25549 return new Array(headerColumnCount).fill(null); 25550 }); 25551 for (let i = 0; i < headerRowCount; i++) { 25552 const cells = rows[i]; 25553 let occupied; 25554 Array.prototype.forEach.call(cells, (cell) => { 25555 let colSpan = cell.colSpan; 25556 let rowSpan = cell.rowSpan; 25557 occupied = headerGrid[i].filter((n) => { 25558 return n !== null; 25559 }); 25560 if (colSpan > 1 || rowSpan > 1) { 25561 if (colSpan > 1) { 25562 while (colSpan--) { 25563 headerGrid[i][colSpan + occupied.length] = cell; 25564 } 25565 } else if (rowSpan > 1) { 25566 while (rowSpan--) { 25567 headerGrid[i + rowSpan][occupied.length] = cell; 25568 } 25569 } 25570 } else if (colSpan == 1 && rowSpan == 1) { 25571 headerGrid[i][occupied.length] = cell; 25572 } 25573 }); 25574 } 25575 for (let i = 0; i < headerRowCount; i++) { 25576 const cells = headerGrid[i]; 25577 Array.prototype.forEach.call(cells, (cell, index2) => { 25578 if (cell) { 25579 cell.colIndex = index2 + 1; 25580 } 25581 }); 25582 } 25583}; 25584const convertToRows = (originColumns, owner) => { 25585 let maxLevel = 1; 25586 const traverse = (column, parent) => { 25587 if (parent) { 25588 column.level = parent.level + 1; 25589 if (maxLevel < column.level) { 25590 maxLevel = column.level; 25591 } 25592 } 25593 if (column.children) { 25594 let colSpan = 0;
25595 column.children.forEach((subColumn) => { 25596 traverse(subColumn, column); 25597 colSpan += subColumn.colSpan; 25598 }); 25599 column.colSpan = colSpan; 25600 } else { 25601 column.colSpan = 1; 25602 } 25603 }; 25604 originColumns.forEach((column) => { 25605 column.level = 1; 25606 traverse(column, void 0); 25607 }); 25608 const rows = []; 25609 for (let i = 0; i < maxLevel; i++) { 25610 rows.push([]); 25611 } 25612 const allColumns = getAllColumns(originColumns); 25613 allColumns.forEach((column) => { 25614 if (column.type === "expand" && (owner.props.forceExpand || !owner.props.showExpandIcon)) { 25615 return; 25616 } 25617 if (!column.children) { 25618 column.rowSpan = maxLevel - column.level + 1; 25619 } else { 25620 column.rowSpan = 1; 25621 column.children.forEach((col) => { 25622 col.isSubColumn = true; 25623 }); 25624 } 25625 rows[column.level - 1].push(column); 25626 }); 25627 setColIndex(rows, owner); 25628 return rows; 25629}; 25630function useUtils$1() { 25631 const owner = inject(Virtual_TABLE_INJECTION_KEY); 25632 const columnRows = computed(() => { 25633 return convertToRows(owner.store.states.originColumns.value, owner); 25634 }); 25635 const isGroup = computed(() => { 25636 const result = columnRows.value.length > 1; 25637 if (result) { 25638 owner.state.isGroup.value = true; 25639 } 25640 return result; 25641 }); 25642 return { 25643 isGroup, 25644 columnRows 25645 }; 25646} 25647const TRANSITION_DELAY = 330; 25648const SKELETON_PERCENT = 66; 25649function getRowIdentity(row, rowKey) { 25650 if (typeof rowKey === "string") { 25651 return row[rowKey] + ""; 25652 } 25653 return rowKey.call(null, row); 25654} 25655function parseWidth(width) { 25656 if (width === "") { 25657 return width; 25658 } 25659 width = Number.parseInt(width, 10); 25660 if (Number.isNaN(width)) { 25661 /* istanbul ignore next @preserve */ 25662 width = ""; 25663 } 25664 return width; 25665} 25666function parseHeight(height) { 25667 if (typeof height === "number") { 25668 return height; 25669 } 25670 if (typeof height === "string") { 25671 if (/^\d+(?:px)?$/.test(height)) { 25672 return Number.parseInt(height, 10); 25673 } else { 25674 return height; 25675 } 25676 } 25677} 25678function mergeOptions(defaults, config) { 25679 const options = {}; 25680 let key; 25681 for (key in defaults) { 25682 options[key] = defaults[key]; 25683 } 25684 for (key in config) { 25685 if (hasOwn(config, key)) { 25686 const value = config[key]; 25687 if (typeof value !== "undefined") { 25688 options[key] = value; 25689 } 25690 } 25691 } 25692 return options; 25693} 25694function compose(...funcs) { 25695 return funcs.reduce((pre, cur) => { 25696 return (...args) => pre(cur(...args)); 25697 }); 25698} 25699function getOffset(offset2, column) { 25700 return offset2 + (column.realWidth === null || Number.isNaN(column.realWidth) ? Number(column.width) : column.realWidth); 25701} 25702function getCurrentColumns(column) { 25703 if (column.children) { 25704 /* istanbul ignore next @preserve */ 25705 return flatMap(column.children, getCurrentColumns); 25706 } else { 25707 return [column]; 25708 } 25709} 25710function getColSpan(colSpan, column) { 25711 return colSpan + column.colSpan; 25712} 25713function isFixedColumn(index2, store2, fixed, realColumns) { 25714 let start = 0; 25715 let after = index2; 25716 const columns = store2.states.columns.value.filter((column) => { 25717 return column.type !== "expand" || !store2.states.forceExpand.value && store2.states.showExpandIcon.value; 25718 }); 25719 if (realColumns) { 25720 const curColumns = getCurrentColumns(realColumns[index2]); 25721 const preColumns = columns.slice(0, columns.indexOf(curColumns[0])); 25722 start = preColumns.reduce(getColSpan, 0); 25723 after = start + curColumns.reduce(getColSpan, 0) - 1; 25724 } else { 25725 start = index2; 25726 } 25727 let fixedLayout; 25728 switch (fixed) { 25729 case "left": 25730 if (after < store2.states.fixedLeafColumnsLength.value) { 25731 fixedLayout = "left"; 25732 } 25733 break; 25734 case "right": 25735 if (start >= columns.length - store2.states.rightFixedLeafColumnsLength.value) { 25736 fixedLayout = "right"; 25737 } 25738 break; 25739 default: 25740 if (after < store2.states.fixedLeafColumnsLength.value) { 25741 fixedLayout = "left"; 25742 } 25743 } 25744 return { 25745 direction: fixedLayout, 25746 start, 25747 after 25748 }; 25749} 25750function getFixedColumnOffset(index2, store2, isRTL, fixed, realColumns) { 25751 if (!fixed) { 25752 return; 25753 } 25754 const { direction, start, after } = isFixedColumn(index2, store2, fixed, realColumns); 25755 const styles = {}; 25756 const isLeft = direction === "left"; 25757 const columns = store2.states.columns.value.filter((column) => { 25758 return column.type !== "expand" || !store2.states.forceExpand.value && store2.states.showExpandIcon.value; 25759 }); 25760 if (isLeft) { 25761 const offset2 = columns.slice(0, start).reduce(getOffset, 0); 25762 if (!isRTL.value) { 25763 styles.left = offset2; 25764 } else { 25765 styles.right = offset2; 25766 } 25767 } else { 25768 const offset2 = columns.slice(after + 1).reverse().reduce(getOffset, 0); 25769 if (!isRTL.value) { 25770 styles.right = offset2; 25771 } else { 25772 styles.left = offset2; 25773 } 25774 } 25775 return styles; 25776} 25777function getFixedColumnsClass(namespace2, index2, store2, fixed, realColumns) { 25778 const classes = []; 25779 if (!fixed) { 25780 return classes; 25781 } 25782 const showExpandIcon = store2.states.showExpandIcon.value; 25783 const columns = store2.states.columns.value.filter((column) => { 25784 return column.type !== "expand" || !store2.states.forceExpand.value && showExpandIcon; 25785 }); 25786 const { direction, start, after } = isFixedColumn(index2, store2, fixed, realColumns); 25787 if (direction) { 25788 const isLeft = direction === "left"; 25789 classes.push(`${namespace2}-fixed-column--${direction}`); 25790 if (isLeft && after === store2.states.fixedLeafColumnsLength.value - 1 - (showExpandIcon ? 0 : 1)) { 25791 classes.push("is-last-column"); 25792 } else if (!isLeft && start === columns.length - store2.states.rightFixedLeafColumnsLength.value) { 25793 classes.push("is-first-column"); 25794 } 25795 } 25796 return classes; 25797} 25798function ensurePosition(style, key) { 25799 if (!style) { 25800 return; 25801 } 25802 if (!Number.isNaN(style[key])) { 25803 style[key] = `${style[key]}px`; 25804 } 25805} 25806function getKeysMap(array, rowKey) { 25807 const arrayMap = {}; 25808 array.forEach((row, index2) => { 25809 arrayMap[getRowIdentity(row, rowKey)] = { row, index: index2 }; 25810 }); 25811 return arrayMap; 25812} 25813function orderBy(array, sortProp, sortOrder, sortMethod, sortBy) { 25814 const reverse = sortOrder === "descending" ? -1 : 1; 25815 const getKey = sortMethod ? null : function(value, index2) { 25816 if (sortBy) { 25817 if (!Array.isArray(sortBy)) { 25818 sortBy = [sortBy]; 25819 } 25820 return sortBy.map((by) => { 25821 if (typeof by === "string") { 25822 return get(value, by); 25823 } else { 25824 return by(value, index2, array); 25825 } 25826 }); 25827 } 25828 return [isObject(value) ? get(value, sortProp) : value]; 25829 }; 25830 const compare = function(a, b) { 25831 if (sortMethod) { 25832 return sortMethod(a.value, b.value); 25833 } 25834 for (let i = 0, len = a.key.length; i < len; i++) { 25835 if (a.key[i] < b.key[i]) { 25836 return -1; 25837 } 25838 if (a.key[i] > b.key[i]) { 25839 return 1; 25840 } 25841 } 25842 return 0; 25843 }; 25844 return array.map((value, index2) => { 25845 return { 25846 value, 25847 index: index2, 25848 key: getKey ? getKey(value, index2) : null 25849 }; 25850 }).sort((a, b) => { 25851 let order = compare(a, b); 25852 if (!order) { 25853 order = a.index - b.index; 25854 } 25855 return order * +reverse; 25856 }).map((item) => item.value); 25857} 25858function getColumnById(table, columnId) { 25859 let column = null; 25860 table.columns.forEach((item) => { 25861 if (item.id === columnId) { 25862 column = item; 25863 } 25864 }); 25865 return column; 25866} 25867function getColumnByKey(table, columnKey) { 25868 let column = null; 25869 for (let i = 0; i < table.columns.length; i++) { 25870 const item = table.columns[i]; 25871 if (item.columnKey === columnKey) { 25872 column = item; 25873 break; 25874 } 25875 } 25876 if (!column) { 25877 /* istanbul ignore next @preserve */ 25878 throwError("ZmVirtualTable", `No column matching with column-key: ${columnKey}`); 25879 } 25880 return column; 25881} 25882function walkTreeNode(root, cb, childrenKey, lazyKey) { 25883 const isNil2 = (array) => !(Array.isArray(array) && array.length); 25884 function _walker(parent, children, level) { 25885 cb(parent, children, level);
25886 children.forEach((item) => { 25887 /* istanbul ignore next @preserve */ 25888 if (item[lazyKey]) { 25889 cb(item, null, level + 1); 25890 return; 25891 } 25892 const children2 = item[childrenKey]; 25893 if (!isNil2(children2)) { 25894 _walker(item, children2, level + 1); 25895 } 25896 }); 25897 } 25898 root.forEach((item) => { 25899 if (item[lazyKey]) { 25900 cb(item, null, 0); 25901 return; 25902 } 25903 const children = item[childrenKey]; 25904 if (!isNil2(children)) { 25905 _walker(item, children, 0); 25906 } 25907 }); 25908} 25909function notMovableColumn(column) { 25910 return column.type === "selection" || column.type === "expand" || column.type === "single" || column.type === "draggable" || column.fixed; 25911} 25912function swap(arr, i, j) { 25913 const temp = arr[i]; 25914 arr[i] = arr[j]; 25915 arr[j] = temp; 25916} 25917function getFirstColumnAriaLabel(type, row, index2, store2, column, readCount, useTree2) { 25918 var _a; 25919 const t = (_a = store2.table) == null ? void 0 : _a.t; 25920 if (!t) { 25921 return ""; 25922 } 25923 const translateKeys = ["table.selectRowTemp", "table.changeOrderTemp", "table.moreOptionsTemp"]; 25924 const columns = store2.states.columns.value; 25925 const firstColumn = columns[column.selectedColumnIndex ? column.selectedColumnIndex : useTree2 ? 0 : 1]; 25926 const prefix = t(translateKeys[type], { 25927 index: index2, 25928 columnName: firstColumn.label, 25929 content: firstColumn.ariaLabel ? row[firstColumn.ariaLabel] : row[firstColumn.prop] 25930 }); 25931 /* istanbul ignore next @preserve */ 25932 if (readCount) { 25933 const total = store2.states.data.value.length; 25934 const suffix = t("a11y.loopList", { 25935 index: index2 - 1, 25936 total 25937 }); 25938 return prefix + " " + suffix; 25939 } 25940 return prefix; 25941} 25942function isInTable(node, table) { 25943 return table.vnode.el.contains(node); 25944} 25945function getCell(event) { 25946 var _a; 25947 return (_a = event.target) == null ? void 0 : _a.closest("td"); 25948} 25949function getColumnByCell(table, cell) { 25950 const matches2 = ((cell == null ? void 0 : cell.className) || "").match( 25951 new RegExp(`${getNamespace()}-virtual-table_[^\\s]+`, "gm") 25952 ); 25953 if (matches2) { 25954 return getColumnById(table, matches2[0]); 25955 } 25956 /* istanbul ignore next @preserve */ 25957 return null; 25958} 25959function getVisibleDescendants(row, getChildren, isExpanded) { 25960 const descendants = []; 25961 function traverse(node) { 25962 const children = getChildren(node); 25963 if (!children || !children.length) { 25964 return; 25965 } 25966 for (const child of children) { 25967 descendants.push(child); 25968 if (isExpanded(child)) { 25969 traverse(child); 25970 } 25971 } 25972 } 25973 traverse(row); 25974 return descendants; 25975} 25976function findRowByKey(tree, targetKey, rowKey) { 25977 for (const node of tree) { 25978 if (node[rowKey] === targetKey) { 25979 return node; 25980 } 25981 const children = node.children; 25982 if (Array.isArray(children)) { 25983 const found = findRowByKey(children, targetKey, rowKey); 25984 if (found) { 25985 return found; 25986 } 25987 } 25988 } 25989 return null; 25990} 25991function onTransitionEndOnce(el, callback, fallbackMs) { 25992 let done = false; 25993 const finish = () => { 25994 if (done) 25995 return; 25996 done = true; 25997 clearTimeout(timer); 25998 el.removeEventListener("transitionend", onEnd); 25999 callback(); 26000 }; 26001 const onEnd = () => finish(); 26002 el.addEventListener("transitionend", onEnd, { once: true }); 26003 let duration = fallbackMs; 26004 if (duration == null) { 26005 const cs = getComputedStyle(el); 26006 const parseTime = (s) => s.split(",").map((t) => t.trim().endsWith("ms") ? parseFloat(t) : parseFloat(t) * 1e3); 26007 const delays = parseTime(cs.transitionDelay || "0s"); 26008 const durations = parseTime(cs.transitionDuration || "0s"); 26009 duration = Math.max(...durations.map((d, i) => d + (delays[i] || delays[0] || 0))); 26010 } 26011 const timer = setTimeout(finish, (duration || 0) + 50); 26012} 26013let tableIdSeed = 1; 26014const getTableIdSeed = () => tableIdSeed++; 26015function useStyle$1() { 26016 const owner = inject(Virtual_TABLE_INJECTION_KEY); 26017 const ns = useNamespace("virtual-table"); 26018 const t = owner.t; 26019 const isRTL = useRTL(); 26020 const disabledBtn = computed(() => { 26021 return owner.store.states.data.value.length === 0; 26022 }); 26023 const getHeaderRowStyle = (rowIndex) => { 26024 const headerRowStyle = owner.props.headerRowStyle; 26025 if (typeof headerRowStyle === "function") { 26026 return headerRowStyle.call(null, { rowIndex }); 26027 } 26028 return headerRowStyle; 26029 }; 26030 const getHeaderRowClass = (rowIndex) => { 26031 const classes = [ns.e("append-row")]; 26032 const headerRowClassName = owner.props.headerRowClassName; 26033 if (typeof headerRowClassName === "string") { 26034 classes.push(headerRowClassName); 26035 } else if (typeof headerRowClassName === "function") { 26036 classes.push(headerRowClassName.call(null, { rowIndex })); 26037 } 26038 return classes.join(" "); 26039 };
26040 const getHeaderCellStyle = (rowIndex, columnIndex, row, column) => { 26041 var _a; 26042 let headerCellStyles = (_a = owner.props.headerCellStyle) != null ? _a : {}; 26043 if (typeof headerCellStyles === "function") { 26044 headerCellStyles = headerCellStyles.call(null, { 26045 rowIndex, 26046 columnIndex, 26047 row, 26048 column 26049 }); 26050 } 26051 const fixedStyle = getFixedColumnOffset( 26052 columnIndex, 26053 owner.store, 26054 isRTL, 26055 column == null ? void 0 : column.fixed, 26056 row 26057 ); 26058 ensurePosition(fixedStyle, "left"); 26059 ensurePosition(fixedStyle, "right"); 26060 return Object.assign({}, headerCellStyles, fixedStyle); 26061 }; 26062 const getHeaderCellClass = (rowIndex, columnIndex, row, column) => { 26063 const fixedClasses = getFixedColumnsClass( 26064 ns.b(), 26065 columnIndex, 26066 owner.store, 26067 column == null ? void 0 : column.fixed, 26068 row 26069 ); 26070 const sortStateClass = getSortState(column).states; 26071 const filterStateClass = getFilterClass(column); 26072 const classes = [ 26073 column.id, 26074 column.headerAlign, 26075 column.className, 26076 column.labelClassName, 26077 sortStateClass, 26078 filterStateClass, 26079 ...fixedClasses 26080 ]; 26081 if (column.resizable) { 26082 classes.push("resizable-column"); 26083 } 26084 if (disabledBtn.value) { 26085 classes.push("disabled-btn"); 26086 } 26087 if (owner.props.greyHeader || owner.state.isGroup.value) { 26088 classes.push("grey-cell"); 26089 } 26090 const headerCellClassName = owner.props.headerCellClassName; 26091 if (typeof headerCellClassName === "string") { 26092 classes.push(headerCellClassName); 26093 } else if (typeof headerCellClassName === "function") { 26094 classes.push( 26095 headerCellClassName.call(null, { 26096 rowIndex, 26097 columnIndex, 26098 row, 26099 column 26100 }) 26101 ); 26102 } 26103 return classes.filter((className) => Boolean(className)).join(" "); 26104 }; 26105 const getSortState = (column) => { 26106 switch (column.order) { 26107 case "ascending": 26108 return { 26109 components: ArrowUp, 26110 states: "sort-emphasize", 26111 ariaLabel: t("table.sortAsc1", { columnName: column.label }) 26112 }; 26113 case "descending": 26114 return { 26115 components: ArrowDown, 26116 states: "sort-emphasize", 26117 ariaLabel: t("table.sortDes1", { columnName: column.label }) 26118 }; 26119 default: 26120 return { 26121 components: Sort, 26122 states: "", 26123 ariaLabel: t("table.sortNormal", { columnName: column.label }) 26124 }; 26125 } 26126 }; 26127 const getSortTooltip = (column) => { 26128 switch (column.order) { 26129 case "ascending": 26130 return t("table.sortAsc2"); 26131 case "descending": 26132 return t("table.sortDes2"); 26133 default: 26134 return t("table.sortNormal2"); 26135 } 26136 }; 26137 const getFilterClass = (column) => { 26138 if (column.filters && column.filteredValue && column.filteredValue.length > 0) { 26139 return "filter-emphasize"; 26140 } 26141 }; 26142 return { 26143 disabledBtn, 26144 getHeaderRowStyle, 26145 getHeaderRowClass, 26146 getHeaderCellStyle, 26147 getHeaderCellClass, 26148 getSortState, 26149 getSortTooltip 26150 }; 26151} 26152function useEvent$1(emit) { 26153 const instance = getCurrentInstance(); 26154 const owner = inject(Virtual_TABLE_INJECTION_KEY); 26155 const isRTL = useRTL(); 26156 const draggingColumn = ref(null); 26157 const dragging = ref(false); 26158 const dragState = ref({}); 26159 const adjustColumn = owner.store.states.adjustColumn.value; 26160 const toggleOrder = (column) => { 26161 const order = column.order; 26162 const sortOrders = column.sortOrders; 26163 const index2 = sortOrders.indexOf(order); 26164 return sortOrders[index2 > sortOrders.length - 2 ? 0 : index2 + 1]; 26165 }; 26166 const handleSortClick = (event, column) => { 26167 const order = toggleOrder(column); 26168 const states = owner.store.states; 26169 const sortOrder = column.order = order; 26170 const sortingColumn = states.sortingColumn.value; 26171 let sortProp = states.sortProp.value; 26172 if (sortingColumn !== column || sortingColumn === column && sortingColumn.order === null) { 26173 if (sortingColumn) { 26174 /* istanbul ignore next @preserve */ 26175 sortingColumn.order = null; 26176 } 26177 states.sortingColumn.value = column; 26178 sortProp = column.prop; 26179 } 26180 states.sortProp.value = sortProp; 26181 states.sortOrder.value = sortOrder; 26182 owner.store.commit("changeSortCondition"); 26183 event.stopPropagation(); 26184 }; 26185 const handleMouseDown = (event, column) => { 26186 if (column.children) { 26187 /* istanbul ignore next @preserve */ 26188 column = column.children[column.children.length - 1]; 26189 } 26190 if (draggingColumn.value && adjustColumn) { 26191 dragging.value = true; 26192 const tableEl = owner.vnode.el; 26193 const tableLeft = tableEl.getBoundingClientRect().left; 26194 const tableRight = tableEl.getBoundingClientRect().right; 26195 const columnEl = instance.vnode.el.querySelector(`th.${column.id}`); 26196 const columnRect = columnEl.getBoundingClientRect(); 26197 const minLeft = columnRect.left - tableLeft + 148; 26198 const minRight = tableRight - columnRect.right + 148; 26199 dragState.value = { 26200 startMouseLeft: event.clientX, 26201 startLeft: columnRect.right - tableLeft, 26202 startColumnLeft: columnRect.left - tableLeft, 26203 tableLeft, 26204 startRight: tableRight - columnRect.left, 26205 startColumnRight: tableRight - columnRect.right, 26206 tableRight 26207 }; 26208 const resizeProxy = owner.refs.resizeProxy; 26209 const handleMouseMove2 = (event2) => { 26210 disableUserSelect(); 26211 let columnWidth; 26212 const deltaLeft = event2.clientX - dragState.value.startMouseLeft; 26213 if (!isRTL.value) { 26214 const proxyLeft = dragState.value.startLeft + deltaLeft; 26215 resizeProxy.style.left = `${Math.max(minLeft, proxyLeft)}px`; 26216 const finalLeft = Number.parseInt(resizeProxy.style.left, 10); 26217 columnWidth = finalLeft - dragState.value.startColumnLeft + 2; 26218 } else { 26219 const proxyRight = dragState.value.startRight - deltaLeft; 26220 resizeProxy.style.right = `${Math.max(minRight, proxyRight)}px`; 26221 const finaRight = Number.parseInt(resizeProxy.style.right, 10); 26222 columnWidth = finaRight - dragState.value.startColumnRight + 2; 26223 } 26224 column.width = column.realWidth = columnWidth; 26225 addClass(resizeProxy, "is-active"); 26226 requestAnimationFrame(() => { 26227 owner.store.scheduleLayout(false, true); 26228 }); 26229 }; 26230 const handleMouseUp = () => { 26231 enableUserSelect(); 26232 if (dragging.value) { 26233 const { startColumnLeft, startLeft, startColumnRight, startRight } = dragState.value; 26234 const width = !isRTL.value ? startLeft - startColumnLeft : startColumnRight - startRight; 26235 owner.emit("header-dragend", column.width, width, column, event); 26236 document.body.style.cursor = ""; 26237 dragging.value = false;
26238 draggingColumn.value = null; 26239 dragState.value = {}; 26240 emit("set-drag-visible", false); 26241 requestAnimationFrame(() => { 26242 owner.store.scheduleLayout(false, true); 26243 }); 26244 } 26245 removeClass(resizeProxy, "is-active"); 26246 document.removeEventListener("mousemove", handleMouseMove2); 26247 document.removeEventListener("mouseup", handleMouseUp); 26248 }; 26249 document.addEventListener("mousemove", handleMouseMove2); 26250 document.addEventListener("mouseup", handleMouseUp); 26251 } 26252 }; 26253 const handleMouseMove = (event, column) => { 26254 if (!column || !column.resizable) { 26255 return; 26256 } 26257 if (column.children) { 26258 /* istanbul ignore next @preserve */ 26259 column = column.children[column.children.length - 1]; 26260 } 26261 const el = event.target; 26262 const target = el.closest("th"); 26263 if (!dragging.value && adjustColumn) { 26264 const rect = target.getBoundingClientRect(); 26265 const tableEl = owner.vnode.el; 26266 const tableLeft = tableEl.getBoundingClientRect().left; 26267 const tableRight = tableEl.getBoundingClientRect().right; 26268 const columnEl = instance.vnode.el.querySelector(`th.${column.id}`); 26269 const columnRect = columnEl.getBoundingClientRect(); 26270 dragState.value = { 26271 startMouseLeft: event.clientX, 26272 startLeft: columnRect.right - tableLeft, 26273 startColumnLeft: columnRect.left - tableLeft, 26274 tableLeft, 26275 startRight: tableRight - columnRect.left, 26276 startColumnRight: tableRight - columnRect.right, 26277 tableRight 26278 }; 26279 const resizeProxy = owner.refs.resizeProxy; 26280 const bodyStyle = document.body.style; 26281 if (shouldNear(rect, event)) { 26282 bodyStyle.cursor = "col-resize"; 26283 draggingColumn.value = column; 26284 emit("set-drag-visible", true); 26285 if (!isRTL.value) { 26286 resizeProxy.style.left = `${dragState.value.startLeft - 2}px`; 26287 } else { 26288 resizeProxy.style.right = `${dragState.value.startRight - 2}px`; 26289 } 26290 } else if (!dragging.value) { 26291 bodyStyle.cursor = ""; 26292 draggingColumn.value = null; 26293 emit("set-drag-visible", false); 26294 } 26295 } 26296 }; 26297 const shouldNear = (rect, event) => { 26298 if (!isRTL.value) { 26299 return rect.width > 12 && rect.right - event.pageX < 8; 26300 } else { 26301 return rect.width > 12 && event.pageX - rect.left < 8; 26302 } 26303 }; 26304 const handleMouseOut = () => { 26305 if (!dragging.value) { 26306 emit("set-drag-visible", false); 26307 document.body.style.cursor = ""; 26308 } 26309 }; 26310 return { 26311 handleSortClick, 26312 handleMouseDown, 26313 handleMouseMove, 26314 handleMouseOut 26315 }; 26316} 26317var __defProp$m = Object.defineProperty; 26318var __defProps$h = Object.defineProperties; 26319var __getOwnPropDescs$h = Object.getOwnPropertyDescriptors; 26320var __getOwnPropSymbols$m = Object.getOwnPropertySymbols; 26321var __hasOwnProp$m = Object.prototype.hasOwnProperty; 26322var __propIsEnum$m = Object.prototype.propertyIsEnumerable; 26323var __defNormalProp$m = (obj, key, value) => key in obj ? __defProp$m(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 26324var __spreadValues$m = (a, b) => { 26325 for (var prop in b || (b = {})) 26326 if (__hasOwnProp$m.call(b, prop)) 26327 __defNormalProp$m(a, prop, b[prop]); 26328 if (__getOwnPropSymbols$m) 26329 for (var prop of __getOwnPropSymbols$m(b)) { 26330 if (__propIsEnum$m.call(b, prop)) 26331 __defNormalProp$m(a, prop, b[prop]); 26332 } 26333 return a; 26334}; 26335var __spreadProps$h = (a, b) => __defProps$h(a, __getOwnPropDescs$h(b)); 26336const _sfc_main$d = /* @__PURE__ */ defineComponent(__spreadProps$h(__spreadValues$m({}, { 26337 name: "ZmVirtualFilterPanel" 26338}), { 26339 __name: "filter-panel", 26340 props: { 26341 placement: { 26342 type: String, 26343 default: "bottom-start" 26344 }, 26345 column: Object, 26346 upDataColumn: Function, 26347 disabled: Boolean, 26348 testId: String 26349 }, 26350 setup(__props) { 26351 const props = __props; 26352 const instance = getCurrentInstance(); 26353 const owner = inject(Virtual_TABLE_INJECTION_KEY); 26354 const ns = useNamespace("virtual-table-filter"); 26355 const { t } = useLocale(messages$4); 26356 const popoverRef = ref(); 26357 if (!owner.store.states.filterPanels.value[props.column.id]) { 26358 owner.store.states.filterPanels.value[props.column.id] = instance; 26359 } 26360 const arialLabel = computed(() => {
26361 return t("table.filterPopoverTitle", { columnName: props.column.label }); 26362 }); 26363 const triggerBtnArialLabel = computed(() => { 26364 return t("table.filterButton", { columnName: props.column.label }); 26365 }); 26366 const filters = computed(() => { 26367 return props.column && props.column.filters; 26368 }); 26369 const filteredValue = computed({ 26370 get() { 26371 return props.column.filteredValue || []; 26372 }, 26373 set(value) { 26374 props.upDataColumn("filteredValue", value); 26375 } 26376 }); 26377 const handleConfirm = () => { 26378 confirmFilter(filteredValue.value); 26379 hidden(); 26380 }; 26381 const handleReset = () => { 26382 filteredValue.value = []; 26383 confirmFilter(filteredValue.value); 26384 hidden(); 26385 }; 26386 const confirmFilter = (filteredValue2) => { 26387 owner.store.commit("filterChange", { 26388 column: props.column, 26389 values: filteredValue2 26390 }); 26391 owner.refs.root.repaint(owner.store.randomFlip); 26392 }; 26393 const hidden = () => { 26394 var _a; 26395 (_a = popoverRef.value) == null ? void 0 : _a.close(); 26396 }; 26397 return (_ctx, _cache) => { 26398 return openBlock(), createBlock(_sfc_main$v, { 26399 ref_key: "popoverRef", 26400 ref: popoverRef, 26401 placement: __props.placement, 26402 "border-radius": 12, 26403 "floating-options": { 26404 arrow: false, 26405 offsetOptions: 4 26406 }, 26407 "floating-content-class": unref(ns).e("popover"), 26408 "aria-label": arialLabel.value, 26409 disabled: __props.disabled, 26410 "test-id": unref(buildTestId)(__props.testId, "-popover") 26411 }, { 26412 content: withCtx(() => [ 26413 createBaseVNode("div", { 26414 class: normalizeClass(unref(ns).e("content")) 26415 }, [ 26416 createVNode(_sfc_main$V, { 26417 "wrap-class": unref(ns).e("wrap"), 26418 "wrap-style": { maxHeight: "200px" } 26419 }, { 26420 default: withCtx(() => [ 26421 createVNode(_sfc_main$N, { 26422 modelValue: filteredValue.value, 26423 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => filteredValue.value = $event), 26424 layout: "menu", 26425 class: normalizeClass(unref(ns).e("checkbox-group")), 26426 vertical: "" 26427 }, { 26428 default: withCtx(() => [ 26429 (openBlock(true), createElementBlock(Fragment, null, renderList(filters.value, (filter) => { 26430 return openBlock(), createBlock(_sfc_main$O, { 26431 key: filter.value, 26432 label: filter.value, 26433 "test-id": unref(buildTestId)(__props.testId, `-checkbox-${filter.value}`) 26434 }, { 26435 default: withCtx(() => [ 26436 createTextVNode(toDisplayString(filter.text), 1) 26437 ]), 26438 _: 2 26439 }, 1032, ["label", "test-id"]); 26440 }), 128)) 26441 ]), 26442 _: 1 26443 }, 8, ["modelValue", "class"]) 26444 ]), 26445 _: 1 26446 }, 8, ["wrap-class"]) 26447 ], 2) 26448 ]), 26449 action: withCtx(() => [ 26450 createVNode(_sfc_main$_, { 26451 size: "sm", 26452 "test-id": unref(buildTestId)(__props.testId, "-reset"), 26453 onClick: handleReset 26454 }, { 26455 default: withCtx(() => [ 26456 createTextVNode(toDisplayString(unref(t)("table.resetFilter")), 1) 26457 ]), 26458 _: 1 26459 }, 8, ["test-id"]), 26460 createVNode(_sfc_main$_, { 26461 size: "sm", 26462 disabled: filteredValue.value.length === 0, 26463 type: "primary", 26464 "test-id": unref(buildTestId)(__props.testId, "-confirm"), 26465 onClick: handleConfirm 26466 }, { 26467 default: withCtx(() => [ 26468 createTextVNode(toDisplayString(unref(t)("table.confirmFilter")), 1) 26469 ]), 26470 _: 1 26471 }, 8, ["disabled", "test-id"]) 26472 ]), 26473 default: withCtx(() => [ 26474 createVNode(_sfc_main$_, { 26475 icon: unref(FilterV2), 26476 type: "tertiary", 26477 size: "sm", 26478 "aria-label": triggerBtnArialLabel.value, 26479 tabindex: "-1", 26480 disabled: __props.disabled, 26481 "test-id": __props.testId 26482 }, null, 8, ["icon", "aria-label", "disabled", "test-id"]) 26483 ]), 26484 _: 1 26485 }, 8, ["placement", "floating-content-class", "aria-label", "disabled", "test-id"]); 26486 }; 26487 } 26488})); 26489const messages$2 = { 26490 "en-US": { 26491 "virtual-list": { 26492 "move": "Move item" 26493 } 26494 }, 26495 "de-DE": { 26496 "virtual-list": { 26497 "move": "Element verschieben" 26498 } 26499 }, 26500 "es-ES": { 26501 "virtual-list": { 26502 "move": "Mover elemento" 26503 } 26504 }, 26505 "fr-FR": { 26506 "virtual-list": { 26507 "move": "Déplacer lâélément" 26508 } 26509 }, 26510 "id-ID": { 26511 "virtual-list": { 26512 "move": "Pindahkan item" 26513 } 26514 }, 26515 "it-IT": { 26516 "virtual-list": { 26517 "move": "Sposta elemento" 26518 } 26519 }, 26520 "jp-JP": { 26521 "virtual-list": { 26522 "move": "é ç®ãç§»å" 26523 } 26524 }, 26525 "ko-KO": { 26526 "virtual-list": { 26527 "move": "í목 ì´ë" 26528 } 26529 }, 26530 "nl-NL": { 26531 "virtual-list": { 26532 "move": "Item verplaatsen" 26533 } 26534 }, 26535 "pl-PL": { 26536 "virtual-list": { 26537 "move": "PrzenieÅ element" 26538 } 26539 }, 26540 "pt-PT": { 26541 "virtual-list": { 26542 "move": "Mover item" 26543 } 26544 }, 26545 "ru-RU": { 26546 "virtual-list": { 26547 "move": "ÐеÑемеÑÑиÑÑ ÑлеменÑ" 26548 } 26549 }, 26550 "sv-SE": { 26551 "virtual-list": { 26552 "move": "Flytta objekt" 26553 } 26554 },
26555 "tr-TR": { 26556 "virtual-list": { 26557 "move": "Ãgeyi taÅı" 26558 } 26559 }, 26560 "vi-VN": { 26561 "virtual-list": { 26562 "move": "Di chuyá»n mục" 26563 } 26564 }, 26565 "zh-CN": { 26566 "virtual-list": { 26567 "move": "ç§»å¨é¡¹ç®" 26568 } 26569 }, 26570 "zh-TW": { 26571 "virtual-list": { 26572 "move": "ç§»é¤é ç®" 26573 } 26574 } 26575}; 26576let uid = 0; 26577function createProgrammaticComponentManager() { 26578 const configs = shallowRef([]); 26579 const holderIds = shallowRef([]); 26580 const Holder = defineComponent({ 26581 name: "ZmProgrammaticComponentHolder", 26582 setup() { 26583 const { uid: uid2 } = getCurrentInstance(); 26584 holderIds.value = [...holderIds.value, uid2]; 26585 onUnmounted(() => { 26586 holderIds.value = holderIds.value.filter((id) => id !== uid2); 26587 }); 26588 const active = computed(() => uid2 === holderIds.value[0]); 26589 return () => { 26590 if (!active.value) { 26591 debugWarn( 26592 "ZmProgrammaticComponentHolder", 26593 "Each Holder should only be used in one place." 26594 ); 26595 return null; 26596 } 26597 return configs.value.map((config) => { 26598 return h( 26599 config.Comp, 26600 mergeProps(proxyRefs(config.propsRef.value), { 26601 key: `ZmProgrammaticComponent__${config.id}`, 26602 ref: config.instanceRef 26603 }) 26604 ); 26605 }); 26606 }; 26607 } 26608 }); 26609 const render2 = (Comp, props) => { 26610 if (!isObject(Comp) && !isFunction(Comp)) 26611 return; 26612 const id = uid++; 26613 let active = true; 26614 const config = { 26615 id, 26616 Comp, 26617 propsRef: shallowRef(isObject(props) ? props : {}), 26618 instanceRef: shallowRef(null) 26619 }; 26620 configs.value = [...configs.value, config]; 26621 function destroy() { 26622 if (!active) 26623 return; 26624 active = false; 26625 const index2 = configs.value.indexOf(config); 26626 if (index2 > -1) { 26627 configs.value = configs.value.filter((c) => c !== config); 26628 } 26629 } 26630 function update(props2) { 26631 if (!active) 26632 return; 26633 config.propsRef.value = isObject(props2) ? props2 : {}; 26634 } 26635 return { 26636 get id() { 26637 return id; 26638 }, 26639 destroy, 26640 update, 26641 get instance() { 26642 return config.instanceRef.value; 26643 } 26644 }; 26645 }; 26646 return { Holder: markRaw(Holder), render: render2 }; 26647} 26648const pcm = createProgrammaticComponentManager(); 26649const useFloating = (floatingEl) => { 26650 const state = reactive({ 26651 x: 0, 26652 y: 0 26653 }); 26654 const setPosition = (e) => { 26655 const virtualEl = { 26656 getBoundingClientRect() { 26657 return { 26658 width: 0, 26659 height: 0, 26660 x: e.clientX, 26661 y: e.clientY, 26662 top: e.clientY, 26663 left: e.clientX, 26664 right: e.clientX, 26665 bottom: e.clientY 26666 }; 26667 } 26668 }; 26669 computePosition(virtualEl, floatingEl.value, { 26670 placement: "bottom-start", 26671 middleware: [flip()] 26672 }).then(({ x, y }) => { 26673 state.x = x; 26674 state.y = y; 26675 }); 26676 }; 26677 return { 26678 state, 26679 setPosition 26680 }; 26681}; 26682const tieredMenuSubProps = { 26683 menuId: String, 26684 level: { 26685 type: Number, 26686 default: 0 26687 }, 26688 items: Array, 26689 visible: Boolean, 26690 templates: Object, 26691 activeItemPath: Array, 26692 menuFloatingLeft: Boolean, 26693 event: Object, 26694 // Max height for this panel when floating is enabled 26695 panelMaxHeight: [String, Number], 26696 floatingContentClass: String, 26697 zIndex: Number, 26698 teleported: { 26699 type: Boolean, 26700 default: true 26701 } 26702}; 26703const tieredMenuSubEmits = ["item-click", "item-mouseenter", "item-focus"]; 26704var __defProp$l = Object.defineProperty; 26705var __defProps$g = Object.defineProperties; 26706var __getOwnPropDescs$g = Object.getOwnPropertyDescriptors; 26707var __getOwnPropSymbols$l = Object.getOwnPropertySymbols; 26708var __hasOwnProp$l = Object.prototype.hasOwnProperty; 26709var __propIsEnum$l = Object.prototype.propertyIsEnumerable; 26710var __defNormalProp$l = (obj, key, value) => key in obj ? __defProp$l(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 26711var __spreadValues$l = (a, b) => { 26712 for (var prop in b || (b = {})) 26713 if (__hasOwnProp$l.call(b, prop)) 26714 __defNormalProp$l(a, prop, b[prop]); 26715 if (__getOwnPropSymbols$l) 26716 for (var prop of __getOwnPropSymbols$l(b)) { 26717 if (__propIsEnum$l.call(b, prop)) 26718 __defNormalProp$l(a, prop, b[prop]); 26719 } 26720 return a; 26721}; 26722var __spreadProps$g = (a, b) => __defProps$g(a, __getOwnPropDescs$g(b)); 26723const _hoisted_1$8 = ["id", "data-testid", "role", "aria-hidden", "aria-disabled", "aria-expanded", "aria-haspopup", "aria-level", "aria-checked", "aria-describedby", "onFocus", "onClick"]; 26724const _hoisted_2$4 = ["onMouseenter"]; 26725const _hoisted_3$2 = ["data-tiered-menu-layer"]; 26726const _hoisted_4$1 = ["onMouseenter"]; 26727const SUBMENU_OFFSET = 16; 26728const _sfc_main$c = /* @__PURE__ */ defineComponent(__spreadProps$g(__spreadValues$l({}, { 26729 name: "ZmTieredMenuSub" 26730}), { 26731 __name: "tiered-menu-sub", 26732 props: tieredMenuSubProps, 26733 emits: tieredMenuSubEmits, 26734 setup(__props, { emit: __emit }) { 26735 const props = __props; 26736 const emit = __emit; 26737 const ns = useNamespace("tiered-menu"); 26738 const teleportedContextClass = useTeleportedContextClass({ 26739 teleported: computed(() => props.teleported) 26740 }); 26741 const visibleItems = computed(() => { 26742 return props.items.filter((item) => { 26743 return !isPureSeparator(item); 26744 }).map((item) => { 26745 return __spreadValues$l({}, item.item); 26746 }); 26747 }); 26748 const getStyle2 = computed(() => { 26749 const style = {}; 26750 if (props.level >= 1) { 26751 style.zIndex = String((props.level + 1) * 10); 26752 } 26753 return style; 26754 }); 26755 const submenuWrapStyle = computed(() => { 26756 const v = props.panelMaxHeight; 26757 if (!v) { 26758 return void 0; 26759 } 26760 const maxHeight = typeof v === "number" ? `${v}px` : v; 26761 return { maxHeight }; 26762 }); 26763 const submenuPlacement = computed(() => { 26764 return props.menuFloatingLeft ? "left-start" : "right-start"; 26765 }); 26766 const submenuOffsetOptions = computed(() => { 26767 return { 26768 // gap on the main axis (x) 26769 mainAxis: SUBMENU_OFFSET, 26770 // raise content by top offset to align with non-floating rendering 26771 crossAxis: -12 26772 }; 26773 }); 26774 const getItemId = (processedItem) => { 26775 return !isPureSeparator(processedItem) ? `${props.menuId}_${processedItem.key}` : void 0; 26776 }; 26777 const getItemIds = (processedItem) => { 26778 return [getItemId(processedItem) + "__item1", getItemId(processedItem) + "__item2"]; 26779 }; 26780 const getDescriptions = (processedItem) => { 26781 return getItemIds(processedItem).join(" "); 26782 }; 26783 const getItemLabel = (processedItem) => { 26784 const label = getItemProp(processedItem, "label"); 26785 if (label) { 26786 return label; 26787 } 26788 const separator = getItemProp(processedItem, "separator"); 26789 if (typeof separator === "string") { 26790 return separator; 26791 } 26792 return ""; 26793 }; 26794 const getItemProp = (processedItem, name, _params) => { 26795 const val = resolve(processedItem.item[name], _params); 26796 if (name === "icon" && val) { 26797 return markRaw(toRaw(val)); 26798 } 26799 return val; 26800 }; 26801 const getItemRole = (processedItem) => { 26802 const customRole = getItemProp(processedItem, "role"); 26803 if (customRole) { 26804 return customRole; 26805 } 26806 return !isItemSelected(processedItem) ? "menuitem" : "menuitemcheckbox"; 26807 }; 26808 const isItemDisabled = (processedItem) => { 26809 return getItemProp(processedItem, "disabled") || !!getItemProp(processedItem, "separator"); 26810 }; 26811 const isItemGroup = (processedItem) => { 26812 return !isEmpty(processedItem.items); 26813 }; 26814 const isItemActive = (processedItem) => { 26815 return props.activeItemPath.some((path) => path.key === processedItem.key) && !getItemProp(processedItem, "separator"); 26816 }; 26817 const isItemSeparator = (processedItem) => { 26818 const separator = getItemProp(processedItem, "separator"); 26819 return !!separator; 26820 }; 26821 const isItemSeparatorEmpty = (processedItem) => { 26822 const separator = getItemProp(processedItem, "separator"); 26823 return separator === true && !getItemProp(processedItem, "label"); 26824 }; 26825 const isPureSeparator = (processedItem) => { 26826 const separator = getItemProp(processedItem, "separator"); 26827 return separator === true; 26828 }; 26829 const isItemSelected = (processedItem) => { 26830 return getItemProp(processedItem, "selected") && !isItemGroup(processedItem); 26831 };
26832 const handleItemClick = (event, processedItem) => { 26833 if (isItemDisabled(processedItem)) { 26834 /* istanbul ignore next @preserve */ 26835 return; 26836 } 26837 const commandResult = getItemProp(processedItem, "command", { 26838 originalEvent: event, 26839 item: processedItem.item, 26840 triggerEvent: props.event 26841 }); 26842 emit("item-click", { originalEvent: event, processedItem, commandResult }); 26843 }; 26844 const handleItemMouseEnter = (event, processedItem) => { 26845 if (isItemDisabled(processedItem)) { 26846 return; 26847 } 26848 emit("item-mouseenter", { originalEvent: event, processedItem }); 26849 }; 26850 const handleItemFocus = (event, processedItem) => { 26851 emit("item-focus", { originalEvent: event, processedItem, items: visibleItems.value }); 26852 }; 26853 return (_ctx, _cache) => { 26854 const _component_zm_tiered_menu_sub = resolveComponent("zm-tiered-menu-sub"); 26855 return openBlock(), createBlock(Transition, { 26856 name: `${unref(ns).namespace}-fade-in-linear` 26857 }, { 26858 default: withCtx(() => [ 26859 (_ctx.level === 0 ? true : _ctx.visible) ? (openBlock(), createElementBlock("ul", { 26860 key: 0, 26861 ref: "subMenuRef", 26862 style: normalizeStyle(getStyle2.value) 26863 }, [ 26864 (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (processedItem) => { 26865 return openBlock(), createElementBlock("li", { 26866 key: getItemId(processedItem), 26867 id: getItemId(processedItem), 26868 "data-testid": getItemProp(processedItem, "testId"), 26869 role: getItemRole(processedItem), 26870 class: normalizeClass([ 26871 unref(ns).e("item"), 26872 unref(ns).is("separator", !!getItemProp(processedItem, "separator")), 26873 unref(ns).is("separator-empty", isItemSeparatorEmpty(processedItem)), 26874 unref(ns).is("empty", isItemSeparator(processedItem)), 26875 unref(ns).is("active", isItemActive(processedItem)), 26876 unref(ns).is("danger", getItemProp(processedItem, "danger")), 26877 unref(ns).is("disabled", getItemProp(processedItem, "disabled")) 26878 ]), 26879 "aria-hidden": isPureSeparator(processedItem), 26880 "aria-disabled": isItemDisabled(processedItem) || void 0, 26881 "aria-expanded": isItemGroup(processedItem) ? isItemActive(processedItem) : void 0, 26882 "aria-haspopup": isItemGroup(processedItem) ? "menu" : void 0, 26883 "aria-level": _ctx.level + 1, 26884 "aria-checked": isItemSelected(processedItem), 26885 "aria-describedby": getDescriptions(processedItem), 26886 tabindex: "-1", 26887 onFocus: ($event) => handleItemFocus($event, processedItem), 26888 onClick: withModifiers(($event) => handleItemClick($event, processedItem), ["stop"]) 26889 }, [ 26890 isItemGroup(processedItem) ? (openBlock(), createBlock(unref(ZmFloating), { key: 0 }, { 26891 default: withCtx(() => [ 26892 createVNode(unref(ZmFloatingTrigger), null, { 26893 default: withCtx(() => [ 26894 createBaseVNode("div", { 26895 class: normalizeClass(unref(ns).e("item-content")), 26896 onMouseenter: ($event) => handleItemMouseEnter($event, processedItem) 26897 }, [ 26898 !_ctx.templates.item ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [ 26899 getItemProp(processedItem, "icon") ? (openBlock(), createBlock(unref(ZmIcon), { 26900 key: 0, 26901 class: normalizeClass(unref(ns).e("item-icon")) 26902 }, { 26903 default: withCtx(() => [ 26904 (openBlock(), createBlock(resolveDynamicComponent(getItemProp(processedItem, "icon")))) 26905 ]), 26906 _: 2 26907 }, 1032, ["class"])) : createCommentVNode("", true), 26908 createBaseVNode("span", { 26909 role: "presentation", 26910 class: normalizeClass(unref(ns).e("item-label")) 26911 }, toDisplayString(getItemLabel(processedItem)), 3), 26912 createVNode(unref(ZmIcon), { 26913 class: normalizeClass(unref(ns).e("submenu-icon")), 26914 "should-r-t-l": "" 26915 }, { 26916 default: withCtx(() => [ 26917 createVNode(unref(ChevronRightV2)) 26918 ]), 26919 _: 1 26920 }, 8, ["class"]), 26921 isItemSelected(processedItem) ? (openBlock(), createBlock(unref(ZmIcon), { 26922 key: 1, 26923 class: normalizeClass(unref(ns).e("submenu-icon")) 26924 }, { 26925 default: withCtx(() => [ 26926 createVNode(unref(Checkmark)) 26927 ]), 26928 _: 1 26929 }, 8, ["class"])) : createCommentVNode("", true) 26930 ], 64)) : (openBlock(), createBlock(resolveDynamicComponent(_ctx.templates.item), { 26931 key: 1, 26932 ids: getItemIds(processedItem), 26933 item: processedItem.item, 26934 items: _ctx.items.map((item) => item.item), 26935 submenu: isItemGroup(processedItem), 26936 label: getItemLabel(processedItem) 26937 }, null, 8, ["ids", "item", "items", "submenu", "label"])) 26938 ], 42, _hoisted_2$4) 26939 ]), 26940 _: 2 26941 }, 1024), 26942 (openBlock(), createBlock(Teleport, { 26943 to: "body", 26944 disabled: !_ctx.teleported 26945 }, [ 26946 createVNode(Transition, { 26947 name: `${unref(ns).namespace}-fade-in-linear` 26948 }, { 26949 default: withCtx(() => [ 26950 withDirectives(createVNode(unref(ZmFloatingContent), { 26951 visible: isItemActive(processedItem) && isItemGroup(processedItem), 26952 class: normalizeClass([ 26953 unref(ns).e("floating-content"), 26954 props.floatingContentClass, 26955 unref(teleportedContextClass) 26956 ]), 26957 placement: submenuPlacement.value, 26958 "offset-options": submenuOffsetOptions.value, 26959 "z-index": _ctx.zIndex 26960 }, { 26961 default: withCtx(() => [ 26962 createBaseVNode("div", { "data-tiered-menu-layer": _ctx.menuId }, [ 26963 createVNode(unref(ZmScrollbar), { "wrap-style": submenuWrapStyle.value }, {
26964 default: withCtx(() => [ 26965 createVNode(_component_zm_tiered_menu_sub, { 26966 id: getItemId(processedItem) + "_list", 26967 role: "menu", 26968 "menu-id": _ctx.menuId, 26969 class: normalizeClass([unref(ns).e("submenu"), unref(ns).em("submenu", "floating")]), 26970 items: processedItem.items, 26971 "active-item-path": _ctx.activeItemPath, 26972 level: _ctx.level + 1, 26973 visible: true, 26974 templates: _ctx.templates, 26975 "menu-floating-left": _ctx.menuFloatingLeft, 26976 "panel-max-height": props.panelMaxHeight, 26977 "floating-content-class": props.floatingContentClass, 26978 "z-index": _ctx.zIndex, 26979 teleported: _ctx.teleported, 26980 onItemClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("item-click", $event)), 26981 onItemMouseenter: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("item-mouseenter", $event)), 26982 onItemFocus: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("item-focus", $event)) 26983 }, null, 8, ["id", "menu-id", "class", "items", "active-item-path", "level", "templates", "menu-floating-left", "panel-max-height", "floating-content-class", "z-index", "teleported"]) 26984 ]), 26985 _: 2 26986 }, 1032, ["wrap-style"]) 26987 ], 8, _hoisted_3$2) 26988 ]), 26989 _: 2 26990 }, 1032, ["visible", "class", "placement", "offset-options", "z-index"]), [ 26991 [vShow, isItemActive(processedItem) && isItemGroup(processedItem)] 26992 ]) 26993 ]), 26994 _: 2 26995 }, 1032, ["name"]) 26996 ], 8, ["disabled"])) 26997 ]), 26998 _: 2 26999 }, 1024)) : (openBlock(), createElementBlock("div", { 27000 key: 1, 27001 class: normalizeClass(unref(ns).e("item-content")), 27002 onMouseenter: ($event) => handleItemMouseEnter($event, processedItem) 27003 }, [ 27004 !_ctx.templates.item ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [ 27005 getItemProp(processedItem, "icon") ? (openBlock(), createBlock(unref(ZmIcon), { 27006 key: 0, 27007 class: normalizeClass(unref(ns).e("item-icon")) 27008 }, { 27009 default: withCtx(() => [ 27010 (openBlock(), createBlock(resolveDynamicComponent(getItemProp(processedItem, "icon")))) 27011 ]), 27012 _: 2 27013 }, 1032, ["class"])) : createCommentVNode("", true), 27014 createBaseVNode("span", { 27015 role: "presentation", 27016 class: normalizeClass(unref(ns).e("item-label")) 27017 }, toDisplayString(getItemLabel(processedItem)), 3), 27018 isItemSelected(processedItem) ? (openBlock(), createBlock(unref(ZmIcon), { 27019 key: 1, 27020 class: normalizeClass(unref(ns).e("submenu-icon")) 27021 }, { 27022 default: withCtx(() => [ 27023 createVNode(unref(Checkmark)) 27024 ]), 27025 _: 1 27026 }, 8, ["class"])) : createCommentVNode("", true) 27027 ], 64)) : (openBlock(), createBlock(resolveDynamicComponent(_ctx.templates.item), { 27028 key: 1, 27029 ids: getItemIds(processedItem), 27030 item: processedItem.item, 27031 items: _ctx.items.map((item) => item.item), 27032 submenu: isItemGroup(processedItem), 27033 label: getItemLabel(processedItem) 27034 }, null, 8, ["ids", "item", "items", "submenu", "label"])) 27035 ], 42, _hoisted_4$1)) 27036 ], 42, _hoisted_1$8); 27037 }), 128)) 27038 ], 4)) : createCommentVNode("", true) 27039 ]), 27040 _: 1 27041 }, 8, ["name"]); 27042 }; 27043 } 27044})); 27045var __defProp$k = Object.defineProperty; 27046var __defProps$f = Object.defineProperties; 27047var __getOwnPropDescs$f = Object.getOwnPropertyDescriptors; 27048var __getOwnPropSymbols$k = Object.getOwnPropertySymbols; 27049var __hasOwnProp$k = Object.prototype.hasOwnProperty; 27050var __propIsEnum$k = Object.prototype.propertyIsEnumerable; 27051var __defNormalProp$k = (obj, key, value) => key in obj ? __defProp$k(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 27052var __spreadValues$k = (a, b) => { 27053 for (var prop in b || (b = {})) 27054 if (__hasOwnProp$k.call(b, prop)) 27055 __defNormalProp$k(a, prop, b[prop]); 27056 if (__getOwnPropSymbols$k) 27057 for (var prop of __getOwnPropSymbols$k(b)) { 27058 if (__propIsEnum$k.call(b, prop)) 27059 __defNormalProp$k(a, prop, b[prop]); 27060 } 27061 return a; 27062}; 27063var __spreadProps$f = (a, b) => __defProps$f(a, __getOwnPropDescs$f(b)); 27064var __async$9 = (__this, __arguments, generator) => { 27065 return new Promise((resolve2, reject) => { 27066 var fulfilled = (value) => {
27067 try { 27068 step(generator.next(value)); 27069 } catch (e) { 27070 reject(e); 27071 } 27072 }; 27073 var rejected = (value) => { 27074 try { 27075 step(generator.throw(value)); 27076 } catch (e) { 27077 reject(e); 27078 } 27079 }; 27080 var step = (x) => x.done ? resolve2(x.value) : Promise.resolve(x.value).then(fulfilled, rejected); 27081 step((generator = generator.apply(__this, __arguments)).next()); 27082 }); 27083}; 27084const contextMenuProps = { 27085 modelValue: Boolean, 27086 data: Array, 27087 zIndex: Number, 27088 event: Object, 27089 teleported: { 27090 type: String, 27091 default: "body" 27092 }, 27093 disabled: Boolean, 27094 skeleton: Object 27095}; 27096const contextMenuEmits = ["open", "closed", "update:modelValue"]; 27097const _sfc_main$b = /* @__PURE__ */ defineComponent(__spreadProps$f(__spreadValues$k({}, { 27098 name: "ZmContextMenu" 27099}), { 27100 __name: "context-menu", 27101 props: contextMenuProps, 27102 emits: contextMenuEmits, 27103 setup(__props, { emit: __emit }) { 27104 const props = __props; 27105 const emit = __emit; 27106 const ns = useNamespace("context-menu"); 27107 const menuId = useId().value; 27108 const { nextZIndex } = useOverlayZIndex(); 27109 const teleportedContextClass = useTeleportedContextClass({ 27110 teleported: props.teleported === "body" 27111 }); 27112 const zIndex2 = ref(); 27113 const root = ref();
27114 const activeItemPath = ref([]); 27115 const visible = ref(false); 27116 const { setPosition, state } = useFloating(root); 27117 const menuStyle = computed(() => { 27118 return { 27119 left: `${state.x}px`, 27120 top: `${state.y}px`, 27121 zIndex: zIndex2.value 27122 }; 27123 }); 27124 const isSeparator = (item) => { 27125 return !!item["separator"]; 27126 }; 27127 const createProcessedItems = (items, level = 0, parentKey = "", parent) => { 27128 const processedItems2 = []; 27129 let index2 = -1; 27130 items && items.forEach((item, i) => { 27131 if (!isSeparator(item)) { 27132 index2++; 27133 } 27134 const key = (parentKey !== "" ? parentKey + "_" : "") + index2; 27135 const newItem = { 27136 item, 27137 index: index2, 27138 originIndex: i, 27139 level, 27140 key, 27141 parent, 27142 parentKey 27143 }; 27144 newItem["items"] = createProcessedItems(item.items, level + 1, key, newItem); 27145 processedItems2.push(newItem); 27146 }); 27147 return processedItems2; 27148 }; 27149 const processedItems = computed(() => { 27150 return createProcessedItems(props.data || []); 27151 }); 27152 const shouldShow = computed(() => { 27153 return visible.value && !props.disabled; 27154 }); 27155 const handleMenuClosed = () => { 27156 emit("closed"); 27157 emit("update:modelValue", false); 27158 }; 27159 const open = () => { 27160 visible.value = true; 27161 emit("open"); 27162 }; 27163 const hide2 = () => { 27164 visible.value = false; 27165 activeItemPath.value = []; 27166 }; 27167 const handleItemClick = (event) => { 27168 const { processedItem } = event; 27169 const { items } = processedItem; 27170 const leaf = isEmpty(items); 27171 if (leaf) { 27172 hide2(); 27173 } 27174 }; 27175 const handleItemMouseEnter = (event) => { 27176 const { processedItem } = event; 27177 handleItemChange(processedItem); 27178 }; 27179 const handleItemChange = (processedItem) => { 27180 const { key, parentKey, items } = processedItem; 27181 const grouped = !isEmpty(items);
27182 const _activeItemPath = activeItemPath.value.filter((p) => { 27183 return p.parentKey !== parentKey && p.parentKey !== key; 27184 }); 27185 if (grouped) { 27186 _activeItemPath.push(processedItem); 27187 } 27188 activeItemPath.value = _activeItemPath; 27189 }; 27190 const handleClickOutside = (e) => { 27191 if (e.which === 1) { 27192 hide2(); 27193 } 27194 }; 27195 watch( 27196 () => props.event, 27197 (val) => __async$9(this, null, function* () { 27198 yield nextTick(); 27199 setPosition(val); 27200 }), 27201 { 27202 immediate: true 27203 } 27204 ); 27205 watch( 27206 () => props.modelValue, 27207 (val) => { 27208 if (val) { 27209 open(); 27210 zIndex2.value = nextZIndex(); 27211 } 27212 }, 27213 { 27214 immediate: true 27215 } 27216 ); 27217 return (_ctx, _cache) => { 27218 return openBlock(), createBlock(Teleport, { to: _ctx.teleported }, [ 27219 createVNode(Transition, { 27220 name: `${unref(ns).namespace}-fade-in-linear`, 27221 onAfterLeave: handleMenuClosed 27222 }, { 27223 default: withCtx(() => { 27224 var _a; 27225 return [ 27226 withDirectives((openBlock(), createElementBlock("div", { 27227 ref_key: "root", 27228 ref: root, 27229 class: normalizeClass([unref(ns).b(), unref(teleportedContextClass)]), 27230 style: normalizeStyle(menuStyle.value) 27231 }, [ 27232 ((_a = _ctx.skeleton) == null ? void 0 : _a.loading) ? (openBlock(), createElementBlock("div", { 27233 key: 0, 27234 class: normalizeClass(unref(ns).e("skeleton")) 27235 }, [ 27236 createVNode(unref(ZmSkeleton), { animated: "" }, { 27237 template: withCtx(() => [ 27238 (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.skeleton.row, (row, index2) => { 27239 return openBlock(), createElementBlock("div", { 27240 key: index2, 27241 class: normalizeClass(unref(ns).e("skeleton-item")) 27242 }, [ 27243 createVNode(unref(ZmSkeletonItem), { variant: "text" }) 27244 ], 2); 27245 }), 128)) 27246 ]), 27247 _: 1 27248 }) 27249 ], 2)) : (openBlock(), createBlock(_sfc_main$c, { 27250 key: 1, 27251 id: unref(menuId) + "_list", 27252 ref: "menuRef", 27253 role: "menu", 27254 "menu-id": unref(menuId), 27255 class: normalizeClass(unref(ns).e("root-list")), 27256 "aria-orientation": "vertical", 27257 items: processedItems.value, 27258 "active-item-path": activeItemPath.value, 27259 level: 0, 27260 templates: _ctx.$slots, 27261 event: _ctx.event, 27262 onItemClick: handleItemClick, 27263 onItemMouseenter: handleItemMouseEnter 27264 }, null, 8, ["id", "menu-id", "class", "items", "active-item-path", "templates", "event"])) 27265 ], 6)), [ 27266 [vShow, shouldShow.value], 27267 [unref(ClickOutside), handleClickOutside] 27268 ]) 27269 ]; 27270 }), 27271 _: 1 27272 }, 8, ["name"]) 27273 ], 8, ["to"]); 27274 }; 27275 } 27276})); 27277var __defProp$j = Object.defineProperty; 27278var __defProps$e = Object.defineProperties; 27279var __getOwnPropDescs$e = Object.getOwnPropertyDescriptors; 27280var __getOwnPropSymbols$j = Object.getOwnPropertySymbols; 27281var __hasOwnProp$j = Object.prototype.hasOwnProperty; 27282var __propIsEnum$j = Object.prototype.propertyIsEnumerable; 27283var __defNormalProp$j = (obj, key, value) => key in obj ? __defProp$j(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 27284var __spreadValues$j = (a, b) => { 27285 for (var prop in b || (b = {})) 27286 if (__hasOwnProp$j.call(b, prop)) 27287 __defNormalProp$j(a, prop, b[prop]); 27288 if (__getOwnPropSymbols$j) 27289 for (var prop of __getOwnPropSymbols$j(b)) { 27290 if (__propIsEnum$j.call(b, prop)) 27291 __defNormalProp$j(a, prop, b[prop]); 27292 } 27293 return a; 27294}; 27295var __spreadProps$e = (a, b) => __defProps$e(a, __getOwnPropDescs$e(b)); 27296const contextMenuWrapperProps = { 27297 data: Array, 27298 event: Object, 27299 templates: Function, 27300 teleported: String, 27301 disabled: Boolean, 27302 skeleton: Object 27303}; 27304const contextMenuWrapperEmits = ["open", "closed"]; 27305const _sfc_main$a = /* @__PURE__ */ defineComponent(__spreadProps$e(__spreadValues$j({}, { 27306 name: "ZmContextMenuWrapper" 27307}), { 27308 __name: "context-menu-wrapper", 27309 props: contextMenuWrapperProps, 27310 emits: contextMenuWrapperEmits, 27311 setup(__props, { emit: __emit }) { 27312 const props = __props; 27313 const emit = __emit; 27314 const visible = ref(true); 27315 const handleClosed = () => { 27316 emit("closed"); 27317 }; 27318 const handleOpen = () => { 27319 emit("open"); 27320 }; 27321 const renderContent = { 27322 render() { 27323 if (props.templates) { 27324 return h( 27325 _sfc_main$b, 27326 { 27327 modelValue: visible.value, 27328 "onUpdate:modelValue": (value) => { 27329 visible.value = value; 27330 }, 27331 data: props.data, 27332 event: props.event, 27333 teleported: props.teleported, 27334 disabled: props.disabled, 27335 skeleton: props.skeleton, 27336 onClosed: handleClosed, 27337 onOpen: handleOpen 27338 }, 27339 { 27340 item: ({ item, label, submenu }) => { 27341 return props.templates({ item, label, submenu }); 27342 } 27343 } 27344 ); 27345 } else { 27346 return h(_sfc_main$b, { 27347 modelValue: visible.value, 27348 "onUpdate:modelValue": (value) => { 27349 visible.value = value; 27350 }, 27351 data: props.data, 27352 event: props.event, 27353 teleported: props.teleported, 27354 disabled: props.disabled, 27355 skeleton: props.skeleton, 27356 onClosed: handleClosed, 27357 onOpen: handleOpen 27358 }); 27359 } 27360 } 27361 }; 27362 return (_ctx, _cache) => { 27363 return openBlock(), createBlock(resolveDynamicComponent(renderContent)); 27364 }; 27365 } 27366})); 27367var __async$8 = (__this, __arguments, generator) => { 27368 return new Promise((resolve2, reject) => { 27369 var fulfilled = (value) => {
27370 try { 27371 step(generator.next(value)); 27372 } catch (e) { 27373 reject(e); 27374 } 27375 }; 27376 var rejected = (value) => { 27377 try { 27378 step(generator.throw(value)); 27379 } catch (e) { 27380 reject(e); 27381 } 27382 }; 27383 var step = (x) => x.done ? resolve2(x.value) : Promise.resolve(x.value).then(fulfilled, rejected); 27384 step((generator = generator.apply(__this, __arguments)).next()); 27385 }); 27386}; 27387let pc; 27388function createContextMenu(el, options) { 27389 const event = ref({}); 27390 const disabled = ref(false); 27391 const open = () => { 27392 pc == null ? void 0 : pc.destroy(); 27393 pc = pcm.render(_sfc_main$a, { 27394 event: isRef(el) ? event.value : el, 27395 data: options.data, 27396 templates: options.templates, 27397 teleported: options.teleported, 27398 disabled: disabled.value, 27399 skeleton: options.skeleton, 27400 onClosed: () => { 27401 pc == null ? void 0 : pc.destroy(); 27402 pc = void 0; 27403 options.onClosed && options.onClosed(); 27404 }, 27405 onOpen: () => { 27406 if (!disabled.value) { 27407 options.onOpen && options.onOpen(); 27408 } 27409 } 27410 }); 27411 }; 27412 const handleContextMenu = (e) => __async$8(this, null, function* () { 27413 event.value = e; 27414 e.preventDefault(); 27415 e.stopPropagation(); 27416 open(); 27417 }); 27418 const disable = () => { 27419 disabled.value = true; 27420 }; 27421 const restore = () => { 27422 disabled.value = false; 27423 }; 27424 if (isRef(el)) { 27425 let removeContextMenu; 27426 onMounted(() => { 27427 removeContextMenu = useEventListener(el.value, "contextmenu", handleContextMenu); 27428 }); 27429 onUnmounted(() => { 27430 /* istanbul ignore next @preserve */ 27431 removeContextMenu(); 27432 }); 27433 } 27434 return { 27435 disable, 27436 restore, 27437 open 27438 }; 27439} 27440var __defProp$i = Object.defineProperty; 27441var __defProps$d = Object.defineProperties; 27442var __getOwnPropDescs$d = Object.getOwnPropertyDescriptors; 27443var __getOwnPropSymbols$i = Object.getOwnPropertySymbols; 27444var __hasOwnProp$i = Object.prototype.hasOwnProperty; 27445var __propIsEnum$i = Object.prototype.propertyIsEnumerable; 27446var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$i(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 27447var __spreadValues$i = (a, b) => { 27448 for (var prop in b || (b = {})) 27449 if (__hasOwnProp$i.call(b, prop)) 27450 __defNormalProp$i(a, prop, b[prop]); 27451 if (__getOwnPropSymbols$i) 27452 for (var prop of __getOwnPropSymbols$i(b)) { 27453 if (__propIsEnum$i.call(b, prop)) 27454 __defNormalProp$i(a, prop, b[prop]); 27455 } 27456 return a; 27457}; 27458var __spreadProps$d = (a, b) => __defProps$d(a, __getOwnPropDescs$d(b)); 27459const _hoisted_1$7 = ["aria-label", "aria-setsize", "aria-posinset", "aria-describedby", "data-row", "data-testid"]; 27460const _sfc_main$9 = /* @__PURE__ */ defineComponent(__spreadProps$d(__spreadValues$i({}, { 27461 name: "ZmVirtualColumnItem" 27462}), { 27463 __name: "column-item", 27464 props: { 27465 column: Object, 27466 movable: Boolean, 27467 describedbyId: String, 27468 describedbyId2: String, 27469 wrapperId: String, 27470 tip: Object, 27471 toggles: Object, 27472 disabled: Boolean, 27473 list: Object, 27474 index: Number, 27475 total: Number, 27476 tabMoreId: String, 27477 testId: String 27478 }, 27479 emits: ["toggle", "keydown"], 27480 setup(__props, { emit: __emit }) { 27481 const props = __props; 27482 const emit = __emit; 27483 const ns = useNamespace("virtual-table-column-setting"); 27484 const { t } = useLocale(merge({}, messages$4, messages$2)); 27485 const value = ref(props.toggles[props.column.label]); 27486 const root = ref(); 27487 if (props.movable) { 27488 const items = [ 27489 { 27490 label: t("virtual-list.move"), 27491 command: ({ triggerEvent }) => { 27492 props.list.drag(triggerEvent); 27493 } 27494 } 27495 ]; 27496 createContextMenu(root, { 27497 data: items, 27498 teleported: `#${props.wrapperId}` 27499 }); 27500 } 27501 const getDragIcon = (column) => { 27502 return column.isEdit ? Checkmark : DragHandleDots; 27503 }; 27504 const getAriaLabel = (column) => { 27505 return t("table.changeOrder", { columnName: column.displayName }); 27506 }; 27507 const getDescribedby = (column) => { 27508 return column.isEdit ? `${props.describedbyId2} ${props.describedbyId}` : props.describedbyId; 27509 }; 27510 const handleKeydown = (e) => { 27511 emit("keydown", e, props.index); 27512 }; 27513 watch(value, (val) => { 27514 emit("toggle", props.column, val); 27515 }); 27516 watch( 27517 () => props.toggles, 27518 (val) => { 27519 value.value = val[props.column.label]; 27520 }, 27521 { 27522 deep: true 27523 } 27524 ); 27525 return (_ctx, _cache) => { 27526 return openBlock(), createElementBlock("div", { 27527 ref_key: "root", 27528 ref: root, 27529 role: "option", 27530 "aria-label": __props.column.displayName, 27531 "aria-setsize": __props.total, 27532 "aria-posinset": __props.index + 1, 27533 "aria-describedby": __props.tabMoreId, 27534 "data-row": __props.index, 27535 "data-testid": __props.testId, 27536 class: normalizeClass(unref(ns).e("item")) 27537 }, [ 27538 __props.movable ? (openBlock(), createElementBlock("div", { 27539 key: 0, 27540 class: normalizeClass(unref(ns).e("item-movable")) 27541 }, [ 27542 createVNode(unref(ZmInlineIconButton), { 27543 icon: getDragIcon(__props.column), 27544 "aria-label": getAriaLabel(__props.column), 27545 "aria-describedby": getDescribedby(__props.column), 27546 size: "lg", 27547 tabindex: "-1", 27548 "test-id": unref(buildTestId)(__props.testId, "-drag"), 27549 onKeydown: handleKeydown 27550 }, null, 8, ["icon", "aria-label", "aria-describedby", "test-id"]) 27551 ], 2)) : createCommentVNode("", true), 27552 createBaseVNode("div", { 27553 class: normalizeClass(unref(ns).e("item-prop")) 27554 }, [ 27555 createVNode(_sfc_main$O, { 27556 modelValue: value.value, 27557 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => value.value = $event), 27558 disabled: __props.disabled, 27559 size: "sm", 27560 "aria-label": __props.column.displayName, 27561 "test-id": unref(buildTestId)(__props.testId, "-checkbox") 27562 }, { 27563 default: withCtx(() => [ 27564 createTextVNode(toDisplayString(__props.column.displayName), 1) 27565 ]), 27566 _: 1 27567 }, 8, ["modelValue", "disabled", "aria-label", "test-id"]), 27568 __props.tip && __props.tip[__props.column.label] ? (openBlock(), createElementBlock("div", { 27569 key: 0, 27570 class: normalizeClass(unref(ns).e("item-tip")) 27571 }, [ 27572 createVNode(unref(ZmInfoPopover), { 27573 placement: "top", 27574 "test-id": unref(buildTestId)(__props.testId, "-info-popover") 27575 }, { 27576 content: withCtx(() => [ 27577 createBaseVNode("p", null, toDisplayString(__props.tip[__props.column.label]), 1) 27578 ]), 27579 default: withCtx(() => [ 27580 createVNode(unref(ZmInlineIconButton), { 27581 tabindex: "-1", 27582 icon: unref(Information), 27583 "aria-label": __props.column.displayName, 27584 "test-id": unref(buildTestId)(__props.testId, "-info") 27585 }, null, 8, ["icon", "aria-label", "test-id"]) 27586 ]), 27587 _: 1 27588 }, 8, ["test-id"]) 27589 ], 2)) : createCommentVNode("", true) 27590 ], 2) 27591 ], 10, _hoisted_1$7); 27592 }; 27593 } 27594})); 27595const useA11y$2 = (originData, root, adjust, repaint, throttleTime) => { 27596 const ns = useNamespace("virtual-table-column-setting"); 27597 const selector = { 27598 cell: `.${ns.e("item")}`,
27599 tabindex: '[tabindex]:not([aria-hidden="true"])' 27600 }; 27601 let listNode; 27602 const focusedRow = ref(0); 27603 const list = ref([]); 27604 const setListNode = () => { 27605 listNode = root.value.wrapRef; 27606 }; 27607 const findFocusCells = (cell) => { 27608 const focusCells = []; 27609 const cells = cell == null ? void 0 : cell.querySelectorAll(selector.tabindex); 27610 /* istanbul ignore next @preserve */ 27611 if (!cells) { 27612 return [cell]; 27613 } 27614 Array.prototype.forEach.call(cells, (cell2) => { 27615 focusCells.push(cell2); 27616 }); 27617 return [cell, ...focusCells]; 27618 }; 27619 const findCell = (i) => { 27620 const id = originData.value[i].label; 27621 return listNode.querySelector(`[data-key="${id}"]`); 27622 }; 27623 const setupFocusList = () => { 27624 list.value = []; 27625 const rowCount = originData.value.length; 27626 for (let i = 0; i < rowCount; i++) { 27627 list.value.push(findFocusCells(findCell(i))); 27628 } 27629 }; 27630 const setTableIndex = (focusedCells, val) => { 27631 Array.prototype.forEach.call(focusedCells, (cell) => { 27632 cell == null ? void 0 : cell.setAttribute("tabindex", val); 27633 }); 27634 }; 27635 const setFocusPointer = (row) => { 27636 const focusedCells = list.value[focusedRow.value]; 27637 setTableIndex(focusedCells, "-1"); 27638 setTableIndex(list.value[row], "0"); 27639 focusedRow.value = row; 27640 return true; 27641 }; 27642 const resetTabIndex = () => { 27643 const matchedEls = listNode.querySelectorAll(selector.tabindex); 27644 Array.prototype.forEach.call(matchedEls, (el) => { 27645 el.setAttribute("tabindex", "-1"); 27646 }); 27647 }; 27648 const registerEvents = () => { 27649 clearEvents(); 27650 listNode.addEventListener("keydown", checkFocusChange); 27651 listNode.addEventListener("focusin", handleFocusIn); 27652 }; 27653 const clearEvents = () => { 27654 listNode.removeEventListener("keydown", checkFocusChange); 27655 listNode.removeEventListener("focusin", handleFocusIn); 27656 }; 27657 const clearFocusRow = () => { 27658 focusedRow.value = 0; 27659 }; 27660 const handleFocusIn = (event) => { 27661 if (isPerformingKeyboardAction() && event.relatedTarget && !listNode.contains(event.relatedTarget)) { 27662 const rowCaret = focusedRow.value; 27663 focusCell(rowCaret); 27664 setTimeout(() => { 27665 repaint == null ? void 0 : repaint(); 27666 }, 20); 27667 } 27668 }; 27669 const checkFocusChange = (event) => { 27670 const code = event.code; 27671 let rowCaret = focusedRow.value; 27672 let nextCell; 27673 switch (code) { 27674 case EVENT_CODE.up: 27675 nextCell = getNextValidCell(-1); 27676 if (nextCell.row < 0) { 27677 rowCaret = list.value.length - 1; 27678 focusToEnd(event); 27679 return; 27680 } else { 27681 rowCaret = nextCell.row; 27682 break; 27683 } 27684 case EVENT_CODE.down: 27685 nextCell = getNextValidCell(1); 27686 if (nextCell.row > list.value.length - 1) { 27687 focusToHome(event); 27688 return; 27689 } else { 27690 rowCaret = nextCell.row; 27691 break; 27692 } 27693 case EVENT_CODE.home: 27694 focusToHome(event); 27695 return; 27696 case EVENT_CODE.end: 27697 focusToEnd(event); 27698 return; 27699 default: 27700 return; 27701 } 27702 focusCell(rowCaret); 27703 if (list.value[rowCaret]) { 27704 adjust(list.value[rowCaret][0]); 27705 } 27706 event.preventDefault(); 27707 event.stopPropagation(); 27708 }; 27709 const focusToHome = (event) => { 27710 event.preventDefault(); 27711 event.stopPropagation(); 27712 root.value.scrollToTop(); 27713 setTimeout(() => { 27714 buildA11y(); 27715 const rowCaret = 0; 27716 focusCell(rowCaret); 27717 if (list.value[rowCaret]) { 27718 adjust(list.value[rowCaret][0]); 27719 } 27720 }, throttleTime); 27721 }; 27722 const focusToEnd = (event) => { 27723 event.preventDefault(); 27724 event.stopPropagation(); 27725 root.value.scrollToBottom(); 27726 setTimeout(() => { 27727 buildA11y(); 27728 const rowCaret = list.value.length - 1; 27729 focusCell(rowCaret); 27730 if (list.value[rowCaret]) { 27731 adjust(list.value[rowCaret][0]); 27732 } 27733 }, throttleTime); 27734 }; 27735 const focusCell = (row) => { 27736 if (setFocusPointer(row)) { 27737 list.value[row][0].focus(); 27738 } 27739 }; 27740 const getNextValidCell = (directionY) => { 27741 const nextCell = getNextCell(focusedRow.value, directionY); 27742 return nextCell; 27743 }; 27744 const getNextCell = (currRow, directionY) => {
27745 const row = currRow + directionY; 27746 return { 27747 row 27748 }; 27749 }; 27750 const isValidCell = (row) => { 27751 return row >= 0 && list.value && list.value.length && row < list.value.length && list.value[row][0] !== null; 27752 }; 27753 /* istanbul ignore next @preserve */ 27754 const resetAvailableFocused = () => { 27755 const el = listNode.querySelector(selector.cell); 27756 if (el) { 27757 focusedRow.value = Number.parseInt(el.dataset.row); 27758 buildA11y(); 27759 } 27760 }; 27761 const buildA11y = () => { 27762 /* istanbul ignore next @preserve */ 27763 if (originData.value.length === 0) { 27764 return; 27765 } 27766 setupFocusList(); 27767 resetTabIndex(); 27768 /* istanbul ignore next @preserve */ 27769 if (!isValidCell(focusedRow.value)) { 27770 resetAvailableFocused(); 27771 return false; 27772 } 27773 setFocusPointer(focusedRow.value); 27774 registerEvents(); 27775 }; 27776 return { 27777 list, 27778 focusedRow, 27779 setListNode, 27780 buildA11y, 27781 clearEvents, 27782 clearFocusRow 27783 }; 27784}; 27785var __defProp$h = Object.defineProperty; 27786var __defProps$c = Object.defineProperties; 27787var __getOwnPropDescs$c = Object.getOwnPropertyDescriptors; 27788var __getOwnPropSymbols$h = Object.getOwnPropertySymbols; 27789var __hasOwnProp$h = Object.prototype.hasOwnProperty; 27790var __propIsEnum$h = Object.prototype.propertyIsEnumerable; 27791var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$h(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 27792var __spreadValues$h = (a, b) => { 27793 for (var prop in b || (b = {})) 27794 if (__hasOwnProp$h.call(b, prop)) 27795 __defNormalProp$h(a, prop, b[prop]); 27796 if (__getOwnPropSymbols$h) 27797 for (var prop of __getOwnPropSymbols$h(b)) { 27798 if (__propIsEnum$h.call(b, prop)) 27799 __defNormalProp$h(a, prop, b[prop]); 27800 } 27801 return a; 27802}; 27803var __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b)); 27804var __async$7 = (__this, __arguments, generator) => { 27805 return new Promise((resolve2, reject) => { 27806 var fulfilled = (value) => { 27807 try { 27808 step(generator.next(value)); 27809 } catch (e) { 27810 reject(e); 27811 } 27812 }; 27813 var rejected = (value) => { 27814 try { 27815 step(generator.throw(value)); 27816 } catch (e) { 27817 reject(e); 27818 } 27819 }; 27820 var step = (x) => x.done ? resolve2(x.value) : Promise.resolve(x.value).then(fulfilled, rejected); 27821 step((generator = generator.apply(__this, __arguments)).next()); 27822 }); 27823}; 27824const INPUT_DELAY = 300; 27825const MAX_HEIGHT = 224; 27826const _sfc_main$8 = /* @__PURE__ */ defineComponent(__spreadProps$c(__spreadValues$h({}, { 27827 name: "ZmVirtualColumnPanel" 27828}), { 27829 __name: "column-panel", 27830 props: { 27831 owner: Object 27832 }, 27833 setup(__props) { 27834 const props = __props; 27835 const ns = useNamespace("virtual-table-column-setting"); 27836 const owner = props.owner; 27837 const initDisplayedColumn = owner.store.states.initDisplayedColumn; 27838 const displayedProps = owner.store.states.displayedProps; 27839 const tableTestId = computed(() => owner.props.testId); 27840 const { t } = useLocale(merge({}, messages$4, messages$3, messages$a)); 27841 const ariaDescribedby = useId().value; 27842 const ariaDescribedby2 = useId().value; 27843 const tabMoreId = useId().value; 27844 const toggles = ref({}); 27845 const disabes = ref({}); 27846 const popoverRef = ref(); 27847 const listRef = ref(); 27848 const columnList = ref([]); 27849 const throttleTime = ref(50); 27850 const searchValue = ref(); 27851 const searchResults = ref([]); 27852 const computedColumnList = computed(() => { 27853 if (search.value) { 27854 if (searchValue.value) { 27855 return searchResults.value; 27856 } 27857 return columnList.value; 27858 } 27859 return columnList.value; 27860 }); 27861 const triggerBtnStyle = computed(() => { 27862 return { 27863 top: 6 + (owner.state.headerCount.value - 1) * 18 + "px" 27864 }; 27865 }); 27866 const wrapperId = computed(() => { 27867 var _a; 27868 return (_a = popoverRef.value) == null ? void 0 : _a.bodyId; 27869 }); 27870 const search = computed(() => { 27871 return initDisplayedColumn.value.search; 27872 }); 27873 const movable = computed(() => { 27874 return initDisplayedColumn.value.movable && (!search.value || searchValue.value === ""); 27875 }); 27876 const tip = computed(() => { 27877 return initDisplayedColumn.value.tip; 27878 }); 27879 const title = computed(() => { 27880 return initDisplayedColumn.value.title; 27881 }); 27882 const link = computed(() => { 27883 return initDisplayedColumn.value.link; 27884 }); 27885 const ignore = computed(() => { 27886 return initDisplayedColumn.value.ignore; 27887 }); 27888 const movableProps = computed(() => { 27889 return columnList.value.map((column) => { 27890 return column.label; 27891 }); 27892 }); 27893 const scrollbarWrapStyle = computed(() => { 27894 return { 27895 maxHeight: `${MAX_HEIGHT}px`, 27896 cursor: movable.value ? "pointer" : "default" 27897 }; 27898 }); 27899 const disableConfirm = computed(() => { 27900 let disabled = true; 27901 Object.keys(toggles.value).some((key) => { 27902 if (toggles.value[key]) { 27903 disabled = false;
27904 return true; 27905 } 27906 }); 27907 return disabled; 27908 }); 27909 const showPopover = () => __async$7(this, null, function* () { 27910 const list2 = owner.store.getColumnList(); 27911 list2.forEach((column) => { 27912 toggles.value[column.label] = displayedProps.value.indexOf(column.label) > -1; 27913 if (ignore.value) { 27914 ignore.value.some((item) => { 27915 if (item === column.label) { 27916 disabes.value[item] = true; 27917 toggles.value[column.label] = true; 27918 return true; 27919 } 27920 }); 27921 } 27922 }); 27923 columnList.value = list2; 27924 if (search.value) { 27925 searchValue.value = ""; 27926 searchResults.value = []; 27927 initFuse(); 27928 } 27929 yield nextTick(); 27930 setListNode(); 27931 buildA11y(); 27932 scrollTo(0); 27933 }); 27934 let fuse = null; 27935 const initFuse = () => { 27936 fuse = new entry_default(columnList.value, { 27937 keys: ["label"], 27938 threshold: 0.2 27939 }); 27940 }; 27941 const getDisable = (item) => { 27942 return disabes.value[item.label]; 27943 }; 27944 const handleToggle = (column, val) => { 27945 toggles.value[column.label] = val; 27946 }; 27947 const handleShowAll = () => { 27948 const list2 = owner.store.getColumnList(); 27949 list2.forEach((column) => { 27950 toggles.value[column.label] = true; 27951 }); 27952 }; 27953 const handleReset = () => { 27954 owner.store.resetColumnSetting(); 27955 const resetDisplayedProps = [...displayedProps.value]; 27956 const resetMovableProps = owner.store.states.movableList.value.map((col) => col.label); 27957 owner.emit( 27958 "confirm-columns-change", 27959 resetDisplayedProps, 27960 resetMovableProps, 27961 CONFIRM_COLUMNS_CHANGE_SOURCE.RESET 27962 ); 27963 announce(t("table.resetColumnSettings")); 27964 hidden(); 27965 }; 27966 const handleConfirm = () => { 27967 const displayed = getDisplayedProps(); 27968 const order = movableProps.value; 27969 owner.store.updateColumnSetting(displayed, columnList.value); 27970 owner.emit("confirm-columns-change", displayed, order, CONFIRM_COLUMNS_CHANGE_SOURCE.CONFIRM); 27971 announce(t("table.savedSuccess")); 27972 hidden(); 27973 }; 27974 const getDisplayedProps = () => { 27975 const ret = []; 27976 Object.keys(toggles.value).forEach((prop) => { 27977 if (toggles.value[prop]) { 27978 ret.push(prop); 27979 } 27980 }); 27981 return ret; 27982 }; 27983 const hidden = () => { 27984 var _a; 27985 (_a = popoverRef.value) == null ? void 0 : _a.close(); 27986 }; 27987 const handleKeyDown = (event, index2) => { 27988 const code = event.code; 27989 const isEdit = columnList.value[index2].isEdit; 27990 const len = columnList.value.length; 27991 let rowCaret = index2; 27992 switch (code) { 27993 case EVENT_CODE.up: 27994 if (index2 > 0) { 27995 if (isEdit) { 27996 swap(columnList.value, index2, index2 - 1); 27997 announceMoved(index2 - 1); 27998 nextTick(() => { 27999 event.target.focus(); 28000 }); 28001 rowCaret = index2 - 1; 28002 focusedRow.value = rowCaret; 28003 buildA11y(); 28004 event.preventDefault(); 28005 event.stopPropagation(); 28006 } 28007 } else { 28008 if (isEdit) { 28009 event.preventDefault(); 28010 event.stopPropagation(); 28011 } 28012 } 28013 break; 28014 case EVENT_CODE.down: 28015 if (index2 < len - 1) { 28016 if (isEdit) { 28017 swap(columnList.value, index2, index2 + 1); 28018 announceMoved(index2 + 1); 28019 nextTick(() => { 28020 event.target.focus(); 28021 }); 28022 rowCaret = index2 + 1; 28023 focusedRow.value = rowCaret; 28024 buildA11y(); 28025 event.preventDefault(); 28026 event.stopPropagation(); 28027 } 28028 } else { 28029 if (isEdit) { 28030 event.preventDefault(); 28031 event.stopPropagation(); 28032 } 28033 } 28034 break; 28035 case EVENT_CODE.enter: 28036 case EVENT_CODE.numpadEnter: 28037 case EVENT_CODE.space: 28038 resetColumnListEdit(); 28039 columnList.value[index2].isEdit = !isEdit; 28040 announce(!isEdit ? t("table.grabbed") : t("table.dropped")); 28041 break; 28042 } 28043 if (list.value[index2]) { 28044 adjust(list.value[index2][0]); 28045 } 28046 }; 28047 const resetColumnListEdit = () => { 28048 columnList.value.forEach((column) => { 28049 column.isEdit = false;
28050 }); 28051 }; 28052 const announceMoved = (index2) => { 28053 if (columnList.value[index2].isEdit) { 28054 announce(t("table.movePosition", { index: index2 + 1 })); 28055 } 28056 }; 28057 /* istanbul ignore next @preserve */ 28058 const handleChange = () => __async$7(this, null, function* () { 28059 yield nextTick(); 28060 debouncedUpdateBuildA11y(); 28061 }); 28062 const handleColumnListUpdate = (newList) => { 28063 if (search.value && searchValue.value) { 28064 /* istanbul ignore next @preserve */ 28065 searchResults.value = newList; 28066 } else { 28067 columnList.value = newList; 28068 } 28069 }; 28070 const adjust = (el) => { 28071 listRef.value.scrollbarRef.scrollYIntoView(el, 300, MAX_HEIGHT / 2); 28072 }; 28073 const scrollTo = (index2) => { 28074 listRef.value.scrollToKey(columnList.value[index2].label); 28075 }; 28076 const repaint = () => { 28077 listRef.value.repaint(); 28078 }; 28079 const clear = () => { 28080 clearFocusRow(); 28081 clearEvents(); 28082 }; 28083 const { list, focusedRow, setListNode, buildA11y, clearFocusRow, clearEvents } = useA11y$2( 28084 computedColumnList, 28085 listRef, 28086 adjust, 28087 repaint, 28088 throttleTime.value 28089 ); 28090 const debouncedUpdateBuildA11y = debounce(buildA11y, throttleTime.value); 28091 watch( 28092 () => searchValue.value, 28093 debounce((val) => __async$7(this, null, function* () { 28094 if (val === "") { 28095 searchResults.value = []; 28096 } else { 28097 const results = fuse == null ? void 0 : fuse.search(val); 28098 searchResults.value = results.map((result) => { 28099 return result.item; 28100 }); 28101 } 28102 yield nextTick(); 28103 clearFocusRow(); 28104 buildA11y(); 28105 listRef.value.forceUpdate(); 28106 }), INPUT_DELAY) 28107 ); 28108 return (_ctx, _cache) => { 28109 return openBlock(), createBlock(_sfc_main$I, { 28110 disabled: !title.value, 28111 content: title.value, 28112 "disallow-learn-about": "", 28113 placement: "top", 28114 arrow: false 28115 }, { 28116 default: withCtx(() => [ 28117 createVNode(_sfc_main$v, { 28118 ref_key: "popoverRef", 28119 ref: popoverRef, 28120 placement: "bottom-end", 28121 "aria-label": unref(t)("table.settings"), 28122 "test-id": unref(buildTestId)(tableTestId.value, "-gear-popover"), 28123 "floating-content-class": unref(ns).e("popover"), 28124 "floating-options": { 28125 arrow: false, 28126 offsetOptions: 4 28127 }, 28128 "border-radius": 12, 28129 onBeforeShow: showPopover, 28130 onBeforeHide: _cache[1] || (_cache[1] = ($event) => clear()) 28131 }, { 28132 content: withCtx(() => [ 28133 search.value ? (openBlock(), createElementBlock("div", { 28134 key: 0, 28135 class: normalizeClass(unref(ns).e("search")) 28136 }, [ 28137 createVNode(unref(ZmInput), { 28138 modelValue: searchValue.value, 28139 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchValue.value = $event), 28140 bare: "", 28141 "lead-icon": unref(Magnifier), 28142 placeholder: unref(t)("emoji-picker.search"), 28143 clearable: "", 28144 "test-id": unref(buildTestId)(tableTestId.value, "-gear-search") 28145 }, null, 8, ["modelValue", "lead-icon", "placeholder", "test-id"]), 28146 createVNode(unref(ZmDivider), { 28147 padding: "none", 28148 style: { "margin": "4px 0 4px" } 28149 }) 28150 ], 2)) : createCommentVNode("", true), 28151 createVNode(unref(ZmVirtualList), { 28152 ref_key: "listRef", 28153 ref: listRef, 28154 "model-value": computedColumnList.value, 28155 "data-key": "label", 28156 keeps: 30, 28157 "wrap-class": unref(ns).e("list"), 28158 "throttle-time": throttleTime.value, 28159 "scrollbar-wrap-style": scrollbarWrapStyle.value, 28160 draggable: movable.value, 28161 "scrollbar-vertical-track-right": "6px", 28162 "onUpdate:modelValue": handleColumnListUpdate, 28163 onRangeChange: handleChange 28164 }, { 28165 item: withCtx(({ record, index: index2 }) => [ 28166 createVNode(_sfc_main$9, { 28167 column: record, 28168 movable: movable.value, 28169 "describedby-id": unref(ariaDescribedby), 28170 "describedby-id2": unref(ariaDescribedby2), 28171 "wrapper-id": wrapperId.value, 28172 tip: tip.value, 28173 toggles: toggles.value, 28174 disabled: getDisable(record), 28175 list: listRef.value, 28176 index: index2, 28177 total: computedColumnList.value.length, 28178 "tab-more-id": unref(tabMoreId), 28179 "test-id": unref(buildTestId)(tableTestId.value, `-gear-item-${record.label}`), 28180 onToggle: handleToggle, 28181 onKeydown: handleKeyDown 28182 }, null, 8, ["column", "movable", "describedby-id", "describedby-id2", "wrapper-id", "tip", "toggles", "disabled", "list", "index", "total", "tab-more-id", "test-id"]) 28183 ]), 28184 _: 1 28185 }, 8, ["model-value", "wrap-class", "throttle-time", "scrollbar-wrap-style", "draggable"]), 28186 link.value ? (openBlock(), createElementBlock("div", { 28187 key: 1, 28188 class: normalizeClass(unref(ns).e("link")) 28189 }, [ 28190 createVNode(_sfc_main$U, { 28191 href: link.value.href, 28192 target: "_blank", 28193 standalone: "", 28194 "test-id": unref(buildTestId)(tableTestId.value, "-gear-link") 28195 }, { 28196 default: withCtx(() => [ 28197 createTextVNode(toDisplayString(link.value.text), 1) 28198 ]), 28199 _: 1 28200 }, 8, ["href", "test-id"]) 28201 ], 2)) : createCommentVNode("", true), 28202 movable.value ? (openBlock(), createBlock(unref(ZmVisuallyHidden), { 28203 key: 2, 28204 id: unref(ariaDescribedby) 28205 }, { 28206 default: withCtx(() => [ 28207 createTextVNode(toDisplayString(unref(t)("table.dragAndDropTip")), 1) 28208 ]), 28209 _: 1 28210 }, 8, ["id"])) : createCommentVNode("", true), 28211 movable.value ? (openBlock(), createBlock(unref(ZmVisuallyHidden), { 28212 key: 3, 28213 id: unref(ariaDescribedby2) 28214 }, { 28215 default: withCtx(() => [ 28216 createTextVNode(toDisplayString(unref(t)("table.grabbed")), 1) 28217 ]), 28218 _: 1 28219 }, 8, ["id"])) : createCommentVNode("", true), 28220 createVNode(unref(ZmVisuallyHidden), { id: unref(tabMoreId) }, { 28221 default: withCtx(() => [ 28222 createTextVNode(toDisplayString(unref(t)("a11y.tabMore")), 1
28222) 28223 ]), 28224 _: 1 28225 }, 8, ["id"]) 28226 ]), 28227 action: withCtx(() => [ 28228 createVNode(_sfc_main$_, { 28229 type: "tertiary", 28230 size: "sm", 28231 "test-id": unref(buildTestId)(tableTestId.value, "-gear-show-all"), 28232 onClick: handleShowAll 28233 }, { 28234 default: withCtx(() => [ 28235 createTextVNode(toDisplayString(unref(t)("table.showAll")), 1) 28236 ]), 28237 _: 1 28238 }, 8, ["test-id"]), 28239 createVNode(_sfc_main$_, { 28240 class: normalizeClass(unref(ns).e("reset-btn")), 28241 size: "sm", 28242 "test-id": unref(buildTestId)(tableTestId.value, "-gear-reset"), 28243 onClick: handleReset 28244 }, { 28245 default: withCtx(() => [ 28246 createTextVNode(toDisplayString(unref(t)("table.resetFilter")), 1) 28247 ]), 28248 _: 1 28249 }, 8, ["class", "test-id"]), 28250 createVNode(_sfc_main$_, { 28251 type: "primary", 28252 size: "sm", 28253 disabled: disableConfirm.value, 28254 "test-id": unref(buildTestId)(tableTestId.value, "-gear-confirm"), 28255 onClick: handleConfirm 28256 }, { 28257 default: withCtx(() => [ 28258 createTextVNode(toDisplayString(unref(t)("table.confirmFilter")), 1) 28259 ]), 28260 _: 1 28261 }, 8, ["disabled", "test-id"]) 28262 ]), 28263 default: withCtx(() => [ 28264 renderSlot(_ctx.$slots, "default", {}, () => [ 28265 createVNode(_sfc_main$_, {
28266 icon: unref(Setting), 28267 class: normalizeClass(unref(ns).e("trigger-btn")), 28268 style: normalizeStyle(triggerBtnStyle.value), 28269 type: "tertiary", 28270 size: "sm", 28271 "aria-label": unref(t)("table.columnSettings"), 28272 "test-id": unref(buildTestId)(tableTestId.value, "-gear"), 28273 tabindex: "-1" 28274 }, null, 8, ["icon", "class", "style", "aria-label", "test-id"]) 28275 ]) 28276 ]), 28277 _: 3 28278 }, 8, ["aria-label", "test-id", "floating-content-class"]) 28279 ]), 28280 _: 3 28281 }, 8, ["disabled", "content"]); 28282 }; 28283 } 28284})); 28285const defaultProps$2 = { 28286 defaultSort: { 28287 type: Object, 28288 default: () => { 28289 return { 28290 prop: "", 28291 order: null 28292 }; 28293 } 28294 }, 28295 externalSetting: Boolean, 28296 testId: String 28297}; 28298var __async$6 = (__this, __arguments, generator) => { 28299 return new Promise((resolve2, reject) => { 28300 var fulfilled = (value) => { 28301 try { 28302 step(generator.next(value)); 28303 } catch (e) { 28304 reject(e); 28305 } 28306 }; 28307 var rejected = (value) => { 28308 try { 28309 step(generator.throw(value)); 28310 } catch (e) { 28311 reject(e); 28312 } 28313 }; 28314 var step = (x) => x.done ? resolve2(x.value) : Promise.resolve(x.value).then(fulfilled, rejected); 28315 step((generator = generator.apply(__this, __arguments)).next()); 28316 }); 28317}; 28318const TableHeader = defineComponent({ 28319 name: "ZmVirtualTableHeader", 28320 components: { 28321 ZmButton, 28322 ZmSkeleton, 28323 ZmSkeletonItem: _sfc_main$n 28324 }, 28325 props: defaultProps$2, 28326 setup(props, { emit }) { 28327 const ns = useNamespace("virtual-table");
28328 useLocale(merge({}, messages$4, messages$a, messages$c)); 28329 const owner = inject(Virtual_TABLE_INJECTION_KEY); 28330 const { isGroup, columnRows } = useUtils$1(); 28331 const { 28332 disabledBtn, 28333 getHeaderRowStyle, 28334 getHeaderRowClass, 28335 getHeaderCellStyle, 28336 getHeaderCellClass, 28337 getSortState, 28338 getSortTooltip 28339 } = useStyle$1(); 28340 const { handleSortClick, handleMouseDown, handleMouseMove, handleMouseOut } = useEvent$1(emit); 28341 const getTabindex = (column) => { 28342 if (column.slots.header || column.type === "selection" || column.sortable || column.filters) { 28343 return void 0; 28344 } 28345 return "-1"; 28346 }; 28347 const getColumnTestIdKey = (column) => { 28348 return column.prop || column.columnKey || column.id; 28349 }; 28350 onMounted(() => __async$6(this, null, function* () { 28351 yield nextTick(); 28352 const { prop, order } = props.defaultSort; 28353 owner.store.commit("sort", { prop, order, init: true }); 28354 })); 28355 watch( 28356 () => props.defaultSort, 28357 (val) => { 28358 const { prop, order } = val; 28359 owner.store.commit("sort", { prop, order, init: true }); 28360 } 28361 ); 28362 return () => { 28363 var _a; 28364 const initDisplayedColumn = owner.store.states.initDisplayedColumn; 28365 const isSkeleton = (_a = owner.store.states.skeleton.value) == null ? void 0 : _a.loading; 28366 const shouldRenderSettings = (rowIndex) => { 28367 return !props.externalSetting && initDisplayedColumn.value && rowIndex === 0 && !isSkeleton; 28368 }; 28369 return h( 28370 "thead", 28371 { 28372 class: { [ns.is("group")]: isGroup.value }, 28373 "data-testid": buildTestId(props.testId, "-thead") 28374 }, 28375 [ 28376 columnRows.value.map( 28377 (subColumns, rowIndex) => h( 28378 "tr", 28379 { 28380 class: getHeaderRowClass(rowIndex), 28381 key: rowIndex, 28382 style: getHeaderRowStyle(rowIndex), 28383 role: "row", 28384 "aria-index": rowIndex + 1 28385 }, 28386 [ 28387 subColumns.map((column, cellIndex) => { 28388 const sortStates = getSortState(column); 28389 return h( 28390 "th", 28391 { 28392 class: getHeaderCellClass(rowIndex, cellIndex, subColumns, column), 28393 key: `${column.id}-thead`, 28394 colspan: column.colSpan, 28395 rowspan: column.rowSpan, 28396 style: getHeaderCellStyle(rowIndex, cellIndex, subColumns, column), 28397 onMousedown: ($event) => handleMouseDown($event, column), 28398 onMousemove: ($event) => handleMouseMove($event, column), 28399 onMouseout: handleMouseOut, 28400 role: "columnheader", 28401 tabindex: getTabindex(column), 28402 "aria-colindex": column.colIndex 28403 }, 28404 [ 28405 !isSkeleton ? h( 28406 "div", 28407 { 28408 class: ["cell"] 28409 }, 28410 [ 28411 column.renderHeader({ 28412 column, 28413 store: owner.store, 28414 index: rowIndex 28415 }), 28416 column.sortable && h( 28417 "span", 28418 { 28419 class: "sort-wrapper" 28420 }, 28421 h( 28422 ZmTooltip, 28423 { 28424 placement: "top", 28425 content: getSortTooltip(column), 28426 arrow: false, 28427 "disallow-screen-reader": true 28428 }, 28429 () => { 28430 return [ 28431 h(ZmButton, { 28432 icon: sortStates.components, 28433 type: "tertiary", 28434 size: "sm", 28435 "aria-label": sortStates.ariaLabel, 28436 testId: buildTestId( 28437 props.testId, 28438 `-sort-${getColumnTestIdKey(column)}` 28439 ), 28440 tabindex: "-1", 28441 disabled: disabledBtn.value, 28442 onClick: (e) => { 28443 handleSortClick(e, column); 28444 } 28445 }) 28446 ]; 28447 } 28448 ) 28449 ), 28450 column.filters && h( 28451 "span", 28452 { 28453 class: "filter-wrapper" 28454 }, 28455 [ 28456 h(_sfc_main$d, { 28457 placement: column.filterPlacement, 28458 column, 28459 testId: buildTestId( 28460 props.testId, 28461 `-filter-${getColumnTestIdKey(column)}` 28462 ), 28463 upDataColumn: (key, value) => { 28464 column[key] = value; 28465 } 28466 }) 28467 ] 28468 ) 28469 ] 28470 ) : h( 28471 "div", 28472 { 28473 class: "cell" 28474 }, 28475 [ 28476 h( 28477 ZmSkeleton, 28478 { 28479 animated: true 28480 }, 28481 { 28482 template: () => { 28483 return h(_sfc_main$n, { 28484 percent: SKELETON_PERCENT 28485 }); 28486 } 28487 } 28488 ) 28489 ] 28490 ) 28491 ] 28492 ); 28493 }), 28494 shouldRenderSettings(rowIndex) ? h( 28495 "th", 28496 { 28497 colspan: 1, 28498 rowspan: columnRows.value.length, 28499 role: "columnheader", 28500 class: ns.be("column-setting", "trigger-btn-wrapper") 28501 }, 28502 h(_sfc_main$8, { 28503 owner 28504 }) 28505 ) : null 28506 ] 28507 ) 28508 ) 28509 ] 28510 ); 28511 }; 28512 } 28513}); 28514const defaultProps$1 = { 28515 summaryMethod: Function, 28516 sumText: String, 28517 headerCount: Number, 28518 testId: String 28519}; 28520function useStyle() { 28521 const owner = inject(Virtual_TABLE_INJECTION_KEY); 28522 const ns = useNamespace("virtual-table"); 28523 const isRTL = useRTL(); 28524 const getCellClasses = (columns, cellIndex) => { 28525 const column = columns[cellIndex]; 28526 const classes = [ 28527 column.align, 28528 column.labelClassName, 28529 column.className, 28530 ...getFixedColumnsClass(ns.b(), cellIndex, owner.store, column.fixed) 28531 ]; 28532 if (cellIndex === 0) { 28533 classes.push("sum-total"); 28534 } 28535 return classes; 28536 }; 28537 const getCellStyles = (column, cellIndex) => { 28538 const fixedStyle = getFixedColumnOffset(cellIndex, owner.store, isRTL, column.fixed); 28539 ensurePosition(fixedStyle, "left"); 28540 ensurePosition(fixedStyle, "right"); 28541 return fixedStyle; 28542 }; 28543 return { 28544 getCellClasses, 28545 getCellStyles 28546 }; 28547} 28548const TableFooter = defineComponent({ 28549 name: "ZmVirtualTableFooter", 28550 props: defaultProps$1, 28551 setup(props) { 28552 const { getCellClasses, getCellStyles } = useStyle(); 28553 const ns = useNamespace("virtual-table"); 28554 const owner = inject(Virtual_TABLE_INJECTION_KEY); 28555 return () => { 28556 const data = owner.store.states.data.value; 28557 const columns = owner.store.states.columns.value; 28558 let sums = []; 28559 if (props.summaryMethod) { 28560 sums = props.summaryMethod({ 28561 columns, 28562 data 28563 }); 28564 } else { 28565 columns.forEach((column, index2) => { 28566 if (index2 === 0) { 28567 sums[index2] = props.sumText; 28568 return; 28569 } 28570 const values = data.map((item) => Number(item[column.prop])); 28571 const precisions = []; 28572 let notNumber = true;
28573 values.forEach((value) => { 28574 if (!Number.isNaN(+value)) { 28575 notNumber = false; 28576 const decimal = `${value}`.split(".")[1]; 28577 precisions.push(decimal ? decimal.length : 0); 28578 } 28579 }); 28580 const precision = Math.max.apply(null, precisions); 28581 if (!notNumber) { 28582 sums[index2] = values.reduce((prev, curr) => { 28583 const value = Number(curr); 28584 if (!Number.isNaN(+value)) { 28585 return Number.parseFloat((prev + curr).toFixed(Math.min(precision, 20))); 28586 } else { 28587 /* istanbul ignore next @preserve */ 28588 return prev; 28589 } 28590 }, 0); 28591 } else { 28592 sums[index2] = ""; 28593 } 28594 }); 28595 } 28596 return h( 28597 "tfoot", 28598 { 28599 class: ns.e("footer"), 28600 "data-testid": buildTestId(props.testId, "-tfoot") 28601 }, 28602 h( 28603 "tr", 28604 { 28605 role: "row", 28606 class: ns.e("append-row"), 28607 "aria-rowindex": props.headerCount + data.length + 1 28608 }, 28609 [ 28610 ...columns.map( 28611 (column, cellIndex) => h( 28612 "td", 28613 { 28614 key: cellIndex, 28615 colspan: column.colSpan, 28616 rowspan: column.rowSpan, 28617 class: getCellClasses(columns, cellIndex), 28618 style: getCellStyles(column, cellIndex), 28619 role: "gridcell", 28620 tabindex: "-1" 28621 }, 28622 [ 28623 h( 28624 "div", 28625 { 28626 class: ["cell", column.labelClassName] 28627 }, 28628 h("span", [sums[cellIndex]]) 28629 ) 28630 ] 28631 ) 28632 ) 28633 ] 28634 ) 28635 ); 28636 }; 28637 } 28638}); 28639function useStyles(table) { 28640 const ns = useNamespace("virtual-table"); 28641 const isRTL = useRTL(); 28642 const getRowStyle = (row, rowIndex) => { 28643 const rowStyle = table.props.rowStyle; 28644 if (typeof rowStyle === "function") { 28645 return rowStyle.call(null, { 28646 row, 28647 rowIndex 28648 }); 28649 } 28650 return rowStyle; 28651 }; 28652 const getRowClass = (row, rowIndex) => { 28653 var _a; 28654 const classes = [ns.e("row")]; 28655 const highlightRow = table.props.highlightCurrentRow && !table.state.hasMultiSelection.value && !table.state.hasSingleSelection.value && table.store.states.currentRow.value === row; 28656 if (table.store.states.selection.value.includes(row) || row === table.store.states.singleSection.value || highlightRow) { 28657 classes.push("selection-row"); 28658 } 28659 if (table.store.states.data.value.length === 0 && ((_a = table.store.states.skeleton.value) == null ? void 0 : _a.loading)) { 28660 classes.push(ns.e("skeleton")); 28661 } 28662 const rowClassName = table.props.rowClassName; 28663 if (typeof rowClassName === "string") { 28664 classes.push(rowClassName); 28665 } else if (typeof rowClassName === "function") { 28666 classes.push( 28667 rowClassName.call(null, { 28668 row, 28669 rowIndex 28670 }) 28671 ); 28672 } 28673 return classes; 28674 }; 28675 const getCellStyle = (rowIndex, columnIndex, row, column) => { 28676 const cellStyle = table.props.cellStyle;
28677 let cellStyles = cellStyle != null ? cellStyle : {}; 28678 if (typeof cellStyle === "function") { 28679 cellStyles = cellStyle.call(null, { 28680 rowIndex, 28681 columnIndex, 28682 row, 28683 column 28684 }); 28685 } 28686 const fixedStyle = getFixedColumnOffset(columnIndex, table.store, isRTL, column.fixed); 28687 ensurePosition(fixedStyle, "left"); 28688 ensurePosition(fixedStyle, "right"); 28689 return Object.assign({}, cellStyles, fixedStyle); 28690 }; 28691 const getCellClass = (rowIndex, columnIndex, row, column) => { 28692 const classes = [column.id, column.align, column.className]; 28693 const fixedClasses = getFixedColumnsClass(ns.b(), columnIndex, table.store, column == null ? void 0 : column.fixed); 28694 classes.push(...fixedClasses); 28695 const cellClassName = table.props.cellClassName; 28696 if (typeof cellClassName === "string") { 28697 classes.push(cellClassName); 28698 } else if (typeof cellClassName === "function") { 28699 classes.push( 28700 cellClassName.call(null, { 28701 rowIndex, 28702 columnIndex, 28703 row, 28704 column 28705 }) 28706 ); 28707 } 28708 return classes.filter((className) => Boolean(className)).join(" "); 28709 }; 28710 const getSpan = (rowIndex, columnIndex, row, column) => { 28711 let rowspan = 1; 28712 let colspan = 1; 28713 const fn = table.props.spanMethod; 28714 if (typeof fn === "function") { 28715 const result = fn({ 28716 row, 28717 column, 28718 rowIndex, 28719 columnIndex 28720 }); 28721 if (Array.isArray(result)) { 28722 rowspan = result[0]; 28723 colspan = result[1]; 28724 } else if (typeof result === "object") { 28725 rowspan = result.rowspan; 28726 colspan = result.colspan; 28727 } 28728 } 28729 return { rowspan, colspan }; 28730 }; 28731 return { 28732 getRowStyle, 28733 getRowClass, 28734 getCellStyle, 28735 getCellClass, 28736 getSpan 28737 }; 28738} 28739function useRender$2(table) { 28740 const columns = computed(() => { 28741 return table.store.states.columns.value.filter((column) => { 28742 return column.type !== "expand" || !table.props.forceExpand && table.props.showExpandIcon; 28743 }); 28744 }); 28745 const firstDefaultColumnIndex = computed(() => { 28746 return table.store.states.columns.value.findIndex(({ type }) => type === "default"); 28747 }); 28748 const getColumnKey = (cellIndex, index2, column) => { 28749 var _a; 28750 const patchKey = (_a = column.columnKey) != null ? _a : ""; 28751 const baseKey = `${index2},${cellIndex}`; 28752 return `${patchKey}${baseKey}`; 28753 }; 28754 const cellChildren = (cellIndex, index2, row, column, treeRowData) => { 28755 const expanded = table.store.isRowExpanded(row); 28756 const data = { 28757 store: table.store, 28758 _self: table, 28759 column, 28760 row, 28761 index: index2, 28762 cellIndex, 28763 expanded, 28764 treeNode: null, 28765 t: table.t 28766 }; 28767 if (cellIndex === firstDefaultColumnIndex.value && treeRowData) { 28768 data.treeNode = { 28769 level: treeRowData.level, 28770 indent: treeRowData.level * treeRowData.indent 28771 }; 28772 if (cellIndex === firstDefaultColumnIndex.value && typeof treeRowData.expanded === "boolean") { 28773 data.treeNode.expanded = treeRowData.expanded; 28774 if ("loading" in treeRowData) { 28775 data.treeNode.loading = treeRowData.loading; 28776 } 28777 if ("noLazyChildren" in treeRowData) { 28778 data.treeNode.noLazyChildren = treeRowData.noLazyChildren; 28779 } 28780 } 28781 } 28782 return column.renderCell(data); 28783 }; 28784 return { 28785 columns, 28786 getColumnKey, 28787 cellChildren 28788 }; 28789} 28790function useEvent(table) { 28791 const handleEvent = (event, row, name) => { 28792 const cell = getCell(event); 28793 const column = getColumnByCell( 28794 { 28795 columns: table.store.states.columns.value 28796 }, 28797 cell 28798 ); 28799 table.emit(name, row, column, event); 28800 }; 28801 const handleClick = (event, row) => { 28802 const currentRow = table.store.states.currentRow; 28803 if (row === currentRow.value) { 28804 currentRow.value = null; 28805 } else { 28806 currentRow.value = row; 28807 } 28808 handleEvent(event, row, "row-click"); 28809 }; 28810 const handleContextMenu = (event, row) => { 28811 handleEvent(event, row, "row-contextmenu"); 28812 }; 28813 const handleCellMouseEnter = (event, row) => { 28814 handleEvent(event, row, "cell-mouse-enter"); 28815 }; 28816 const handleCellMouseLeave = (event, row) => { 28817 handleEvent(event, row, "cell-mouse-leave"); 28818 }; 28819 return { 28820 handleClick, 28821 handleContextMenu, 28822 handleCellMouseEnter, 28823 handleCellMouseLeave 28824 }; 28825} 28826const manualExpandMap = /* @__PURE__ */ new Set(); 28827function markManualExpand(key) { 28828 manualExpandMap.add(key); 28829} 28830function isManualExpand(key) { 28831 return manualExpandMap.has(key); 28832} 28833function clearManualExpand(key) { 28834 manualExpandMap.delete(key); 28835} 28836const animatingMap = /* @__PURE__ */ new Map(); 28837function isAnimating(key) { 28838 return animatingMap.get(key) === true; 28839} 28840function setAnimating(key, value) { 28841 if (value) { 28842 animatingMap.set(key, true); 28843 } else { 28844 animatingMap.delete(key); 28845 } 28846} 28847function animateCollapse(rowKey, el, callback) { 28848 if (!el) { 28849 return callback(); 28850 } 28851 const height = el.offsetHeight; 28852 el.style.height = height + "px"; 28853 el.offsetHeight; 28854 requestAnimationFrame(() => { 28855 el.style.transition = "height 0.3s ease, opacity 0.3s ease, padding 0.3s ease"; 28856 el.style.height = "0px"; 28857 el.style.opacity = "0"; 28858 el.style.paddingTop = "0"; 28859 el.style.paddingBottom = "0"; 28860 setAnimating(rowKey, true); 28861 onTransitionEndOnce(el, () => { 28862 setAnimating(rowKey, false); 28863 callback(); 28864 }); 28865 }); 28866} 28867function createExpandTransition() { 28868 const style = { 28869 opacity: "", 28870 paddingTop: "", 28871 paddingBottom: "" 28872 }; 28873 const resetStyle = (el) => { 28874 el.style.height = ""; 28875 el.style.opacity = style.opacity; 28876 el.style.paddingTop = style.paddingTop; 28877 el.style.paddingBottom = style.paddingBottom; 28878 }; 28879 return { 28880 onBeforeEnter(el) { 28881 style.paddingTop = el.style.paddingTop; 28882 style.paddingBottom = el.style.paddingBottom; 28883 el.style.height = "0"; 28884 el.style.opacity = "0"; 28885 el.style.paddingTop = "0"; 28886 el.style.paddingBottom = "0"; 28887 }, 28888 onEnter(el, done) { 28889 var _a, _b;
28890 const key = (_b = (_a = el.closest("tr")) == null ? void 0 : _a.getAttribute("data-key")) == null ? void 0 : _b.replace("expanded-row__", ""); 28891 if (!key || !isManualExpand(key)) { 28892 return done(); 28893 } 28894 clearManualExpand(key); 28895 const height = el.scrollHeight + 32; 28896 const paddingTop = style.paddingTop; 28897 const paddingBottom = style.paddingBottom; 28898 el.style.transition = "height 0.3s ease, opacity 0.3s ease, padding 0.3s ease"; 28899 requestAnimationFrame(() => { 28900 el.style.height = height + "px"; 28901 el.style.opacity = "1"; 28902 el.style.paddingTop = paddingTop; 28903 el.style.paddingBottom = paddingBottom; 28904 }); 28905 el.addEventListener( 28906 "transitionend", 28907 () => { 28908 el.style.transition = ""; 28909 resetStyle(el); 28910 done(); 28911 }, 28912 { once: true } 28913 ); 28914 } 28915 }; 28916} 28917const insertedKeys = /* @__PURE__ */ new Set(); 28918function markTreeRowInserted(key) { 28919 insertedKeys.add(key); 28920} 28921function isRowInserted(key) { 28922 return insertedKeys.has(key); 28923} 28924function clearTreeRowInserted(key) { 28925 insertedKeys.delete(key); 28926} 28927const collapsingMap = /* @__PURE__ */ new Map(); 28928function isCollapsing(key) { 28929 return collapsingMap.get(key) === true; 28930} 28931function setCollapsing(key, value) { 28932 if (value) { 28933 collapsingMap.set(key, true); 28934 } else { 28935 collapsingMap.delete(key); 28936 } 28937} 28938function animateTreeCollapse(rowKey, el, callback) { 28939 if (!el) { 28940 return callback(); 28941 } 28942 el.style.transition = "none"; 28943 el.style.transformOrigin = "top"; 28944 el.style.opacity = "1"; 28945 el.style.transform = "scaleY(1)"; 28946 el.offsetHeight; 28947 setCollapsing(rowKey, true); 28948 requestAnimationFrame(() => { 28949 el.style.transition = "transform 0.3s ease, opacity 0.3s ease"; 28950 el.style.transform = "scaleY(0.1)"; 28951 el.style.opacity = "0"; 28952 onTransitionEndOnce(el, () => { 28953 setCollapsing(rowKey, false); 28954 callback(); 28955 }); 28956 }); 28957} 28958var __defProp$g = Object.defineProperty; 28959var __getOwnPropSymbols$g = Object.getOwnPropertySymbols; 28960var __hasOwnProp$g = Object.prototype.hasOwnProperty; 28961var __propIsEnum$g = Object.prototype.propertyIsEnumerable; 28962var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$g(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 28963var __spreadValues$g = (a, b) => { 28964 for (var prop in b || (b = {})) 28965 if (__hasOwnProp$g.call(b, prop)) 28966 __defNormalProp$g(a, prop, b[prop]); 28967 if (__getOwnPropSymbols$g) 28968 for (var prop of __getOwnPropSymbols$g(b)) { 28969 if (__propIsEnum$g.call(b, prop)) 28970 __defNormalProp$g(a, prop, b[prop]); 28971 } 28972 return a; 28973}; 28974const virtualTableRowProps = { 28975 row: Object, 28976 index: Number, 28977 expand: Boolean, 28978 tree: Object, 28979 draggable: Boolean, 28980 headerCount: { 28981 type: Number, 28982 default: 0 28983 } 28984}; 28985const TableRow = defineComponent({ 28986 name: "ZmVirtualTableRow", 28987 props: virtualTableRowProps, 28988 setup(props) { 28989 const table = inject(Virtual_TABLE_INJECTION_KEY); 28990 const mergedMessages = merge({}, messages$4, messages$a, messages$c, messages$2); 28991 const { t } = useLocale(mergedMessages); 28992 const store2 = table.store; 28993 const ns = useNamespace("virtual-table"); 28994 const rowRef = ref(); 28995 const isRTL = useRTL(); 28996 const tableTestId = computed(() => table.props.testId); 28997 const isInserted = computed(() => { 28998 const rowKeyVal = getRowIdentity(props.row, store2.states.rowKey.value); 28999 return isRowInserted(rowKeyVal); 29000 }); 29001 const { handleClick, handleContextMenu, handleCellMouseEnter, handleCellMouseLeave } = useEvent(table); 29002 const { getRowStyle, getRowClass, getCellStyle, getCellClass, getSpan } = useStyles(table); 29003 const { columns, getColumnKey, cellChildren } = useRender$2(table); 29004 if (props.draggable) { 29005 const items = [ 29006 { 29007 label: t("virtual-list.move"), 29008 command: ({ triggerEvent }) => { 29009 table.refs.root.drag(triggerEvent); 29010 } 29011 } 29012 ]; 29013 createContextMenu(rowRef, { 29014 data: items 29015 }); 29016 } 29017 const rowRender = () => { 29018 const index2 = props.index;
29019 const row = props.row; 29020 const treeRowData = props.tree; 29021 const rowKeyVal = getRowIdentity(row, store2.states.rowKey.value); 29022 const rowClasses = getRowClass(row, index2); 29023 if (treeRowData) { 29024 rowClasses.push(ns.em("row", `level-${treeRowData.level}`)); 29025 } 29026 const renderTr = () => { 29027 return h( 29028 "tr", 29029 { 29030 role: "row", 29031 ref: rowRef, 29032 style: getRowStyle(row, index2), 29033 class: rowClasses, 29034 "aria-rowindex": index2 + 1 + props.headerCount, 29035 "data-testid": buildTestId(tableTestId.value, `-row-${rowKeyVal}`), 29036 onClick: ($event) => handleClick($event, row), 29037 onContextmenu: ($event) => handleContextMenu($event, row) 29038 }, 29039 columns.value.map((column, cellIndex) => { 29040 const { rowspan, colspan } = getSpan(index2, cellIndex, row, column); 29041 if (!rowspan || !colspan) { 29042 return null; 29043 } 29044 return h( 29045 "td", 29046 { 29047 key: getColumnKey(cellIndex, index2, column), 29048 role: "gridcell", 29049 tabindex: getTabindex(column), 29050 colspan, 29051 rowspan, 29052 style: getCellStyle(index2, cellIndex, row, column), 29053 class: getCellClass(index2, cellIndex, row, column), 29054 onMouseenter: ($event) => handleCellMouseEnter($event, row), 29055 onMouseleave: ($event) => handleCellMouseLeave($event, row) 29056 }, 29057 [cellChildren(cellIndex, index2, row, column, treeRowData)] 29058 ); 29059 }) 29060 ); 29061 }; 29062 return isInserted.value ? h( 29063 Transition, 29064 { 29065 name: `${getNamespace()}-tree-row-insert`, 29066 appear: true, 29067 onEnter() { 29068 clearTreeRowInserted(rowKeyVal); 29069 } 29070 }, 29071 () => renderTr() 29072 ) : renderTr(); 29073 }; 29074 const getTabindex = (column) => { 29075 const colIndex = table.state.hasMultiSelection.value || table.state.hasSingleSelection.value ? 2 : 1; 29076 const hasTreeFirstIndent = store2.states.hasTree.value && column.colIndex === colIndex; 29077 if (column.slots.default || column.type === "selection" || column.type === "draggable" || column.type === "single" || hasTreeFirstIndent) { 29078 return void 0; 29079 } 29080 return "-1"; 29081 }; 29082 const expandRowRender = () => { 29083 const index2 = props.index; 29084 const row = props.row; 29085 const columns2 = store2.states.columns.value; 29086 const isFixedColumn2 = columns2.some(({ type, fixed }) => type === "expand" && fixed); 29087 const expandRowClasses = isFixedColumn2 ? ns.e("expanded-row-fixed") : ""; 29088 const width = `${table.state.tableHeaderWidth.value}px`; 29089 const forceExpand = table.props.forceExpand; 29090 const showExpandIcon = table.props.showExpandIcon; 29091 const colspan = forceExpand ? columns2.length - 1 - (forceExpand.col || 1) - store2.states.rightFixedLeafColumnsLength.value : !showExpandIcon ? columns2.length - 1 : columns2.length; 29092 const expandTransition = createExpandTransition(); 29093 const rowKeyVal = getRowIdentity(row, store2.states.rowKey.value); 29094 return h( 29095 "tr", 29096 { 29097 role: "row", 29098 "aria-rowindex": index2 + 1 + props.headerCount, 29099 "data-testid": buildTestId(tableTestId.value, `-row-${rowKeyVal}-expanded`), 29100 style: { 29101 width 29102 }, 29103 class: [getRowClass(row, index2), expandRowClasses, ns.e("expanded-row")] 29104 }, 29105 [ 29106 forceExpand ? renderEmptyTD(forceExpand) : null, 29107 h( 29108 "td", 29109 { 29110 colspan, 29111 class: `${!forceExpand ? ns.e("expanded-cell") : ns.e("force-expanded-cell")}`, 29112 role: "gridcell" 29113 }, 29114 [ 29115 h( 29116 Transition, 29117 __spreadValues$g({ 29118 name: "expand-row", 29119 appear: isManualExpand(rowKeyVal) 29120 }, expandTransition), 29121 () => h("div", { class: ns.e("expand-inner") }, [ 29122 table.renderExpanded({ row, index: index2, store: store2, expanded: props.expand }) 29123 ]) 29124 ) 29125 ] 29126 ), 29127 forceExpand ? renderEmptyTD(forceExpand, false) : null 29128 ] 29129 ); 29130 }; 29131 const renderEmptyTD = (forceExpand, isLeft = true) => { 29132 if (forceExpand) { 29133 if (isLeft) { 29134 const columns2 = store2.states.fixedColumns.value;
29135 return new Array(forceExpand.col || 1).fill({}).map((m, index2) => { 29136 const column = columns2[index2]; 29137 if (columns2[index2]) { 29138 const fixedClasses = getFixedColumnsClass(ns.b(), index2, store2, column.fixed); 29139 const fixedStyle = getFixedColumnOffset(index2, store2, isRTL, column.fixed); 29140 ensurePosition(fixedStyle, "left"); 29141 return renderEmpty(fixedClasses, fixedStyle); 29142 } 29143 return renderEmpty(); 29144 }); 29145 } else { 29146 const columns2 = store2.states.columns.value.filter((column) => { 29147 return column.type !== "expand"; 29148 }); 29149 if (columns2.length > 0) 29150 return columns2.map((column, index2) => { 29151 if (column.fixed === "right") { 29152 const fixedClasses = getFixedColumnsClass(ns.b(), index2, store2, column.fixed); 29153 const fixedStyle = getFixedColumnOffset(index2, store2, isRTL, column.fixed); 29154 ensurePosition(fixedStyle, "right");
29155 return renderEmpty(fixedClasses, fixedStyle); 29156 } 29157 }); 29158 } 29159 } 29160 }; 29161 const renderEmpty = (fixedClasses, fixedStyle) => { 29162 return h( 29163 "td", 29164 { 29165 role: "gridcell", 29166 tabindex: "-1", 29167 class: fixedClasses, 29168 style: fixedStyle, 29169 colspan: 1, 29170 rowspan: 1 29171 }, 29172 h( 29173 "div", 29174 { 29175 class: "cell" 29176 }, 29177 h( 29178 "span", 29179 { 29180 class: ["text-wrapper", "label-empty-wrapper"], 29181 "aria-label": t("basic.blank") 29182 }, 29183 h( 29184 "span", 29185 { 29186 class: "label-empty" 29187 }, 29188 t("basic.blank") 29189 ) 29190 ) 29191 ) 29192 ); 29193 }; 29194 return () => { 29195 const expand = props.expand; 29196 return expand ? expandRowRender() : rowRender(); 29197 }; 29198 } 29199}); 29200var __async$5 = (__this, __arguments, generator) => { 29201 return new Promise((resolve2, reject) => { 29202 var fulfilled = (value) => { 29203 try { 29204 step(generator.next(value)); 29205 } catch (e) { 29206 reject(e); 29207 } 29208 }; 29209 var rejected = (value) => { 29210 try { 29211 step(generator.throw(value)); 29212 } catch (e) { 29213 reject(e); 29214 } 29215 }; 29216 var step = (x) => x.done ? resolve2(x.value) : Promise.resolve(x.value).then(fulfilled, rejected); 29217 step((generator = generator.apply(__this, __arguments)).next()); 29218 }); 29219}; 29220const sortData = (data, states) => { 29221 const sortingColumn = states.sortingColumn; 29222 if (!sortingColumn || sortingColumn.sortable === "custom") { 29223 return data; 29224 } 29225 return orderBy( 29226 data, 29227 states.sortProp, 29228 states.sortOrder, 29229 sortingColumn.sortMethod, 29230 sortingColumn.sortBy 29231 ); 29232}; 29233function useSort(watcherData) { 29234 const instance = getCurrentInstance(); 29235 const ns = useNamespace("virtual-table"); 29236 const data = watcherData.data; 29237 const sortingColumn = ref(null); 29238 const sortProp = ref(""); 29239 const sortOrder = ref(null); 29240 const updateSort = (column, prop, order) => { 29241 if (sortingColumn.value && sortingColumn.value !== column) { 29242 sortingColumn.value.order = null; 29243 } 29244 sortingColumn.value = column; 29245 sortProp.value = prop; 29246 sortOrder.value = order; 29247 }; 29248 const execSort = () => { 29249 const filteredData = instance.store.states.filteredData; 29250 data.value = sortData(filteredData.value, { 29251 sortingColumn: sortingColumn.value, 29252 sortProp: sortProp.value, 29253 sortOrder: sortOrder.value 29254 }); 29255 }; 29256 const execQuery = (ignore = void 0) => { 29257 const execFilter = instance.store.execFilter; 29258 if (!(ignore && ignore.filter)) { 29259 execFilter(); 29260 } 29261 execSort(); 29262 }; 29263 const clearSort = () => { 29264 if (!sortingColumn.value) { 29265 /* istanbul ignore next @preserve */ 29266 return; 29267 } 29268 updateSort(null, "", null); 29269 instance.store.commit("changeSortCondition", { 29270 silent: true 29271 }); 29272 }; 29273 const initArr = () => { 29274 const len = instance.props.keeps; 29275 const result = []; 29276 for (let i = 0; i < len; i++) { 29277 result.push(i); 29278 } 29279 return result; 29280 }; 29281 const getRect2 = (arr, rows) => { 29282 const result = {}; 29283 arr.map((v, index2) => { 29284 var _a; 29285 result[index2] = (_a = rows[v]) == null ? void 0 : _a.getBoundingClientRect(); 29286 }); 29287 return result; 29288 }; 29289 const randomFlip = () => __async$5(this, null, function* () { 29290 yield nextTick(); 29291 const arr = initArr(); 29292 const rows = instance.vnode.el.querySelectorAll(`.${ns.e("row")}`); 29293 if (!rows) { 29294 /* istanbul ignore next @preserve */ 29295 return; 29296 } 29297 const firstRect = getRect2(arr, rows); 29298 const randomArr = shuffle(arr); 29299 const lastRect = getRect2(randomArr, rows); 29300 arr.forEach((v, index2) => { 29301 const first = firstRect[index2]; 29302 const last = lastRect[index2]; 29303 if (!first || !last) { 29304 return; 29305 } 29306 const deltaY = first.top - last.top; 29307 rows[v].style = `transform: translateY(${deltaY}px)`; 29308 setTimeout(() => { 29309 rows[v].style = "transition: all .3s"; 29310 rows[v].style.transform = ""; 29311 }, 20); 29312 }); 29313 }); 29314 return { 29315 updateSort, 29316 execSort, 29317 execQuery, 29318 clearSort, 29319 randomFlip, 29320 states: { 29321 sortingColumn, 29322 sortProp, 29323 sortOrder 29324 } 29325 }; 29326} 29327const BATCH_SIZE = 100; 29328function useSelection(watcherData) { 29329 const instance = getCurrentInstance(); 29330 const data = watcherData.data; 29331 const rowKey = watcherData.rowKey; 29332 const selection = shallowRef([]); 29333 const selectionMap = /* @__PURE__ */ new Map(); 29334 const reserveSelection = ref(false); 29335 const isAllSelected = ref(false); 29336 const selectOnIndeterminate = ref(false); 29337 const selectable = ref(null); 29338 const loading = ref(false); 29339 const isSelected = (row) => { 29340 return selectionMap.has(getRowIdentity(row, rowKey.value)); 29341 }; 29342 const clearSelection = () => { 29343 isAllSelected.value = false;
29344 if (selectionMap.size) { 29345 selectionMap.clear(); 29346 selection.value = []; 29347 instance.emit("selection-change", []); 29348 } 29349 }; 29350 const cleanSelection = () => { 29351 const selectedKeys = Array.from(selectionMap.keys()); 29352 const dataMap = getKeysMap(data.value, rowKey.value); 29353 const deleted = selectedKeys.filter((key) => !dataMap[key]); 29354 if (deleted.length) { 29355 deleted.forEach((key) => selectionMap.delete(key)); 29356 selection.value = Array.from(selectionMap.values()); 29357 instance.emit("selection-change", selection.value.slice()); 29358 } 29359 }; 29360 const getSelectionRows = () => { 29361 return selection.value.slice(); 29362 }; 29363 const toggleRowSelection = (row, selected, emitChange = true) => { 29364 const changedRows = /* @__PURE__ */ new Set(); 29365 const toggle = (node, add2) => { 29366 const id2 = getRowIdentity(node, rowKey.value); 29367 const exists = selectionMap.has(id2); 29368 if (add2 && !exists) { 29369 selectionMap.set(id2, node); 29370 changedRows.add(id2); 29371 } else if (!add2 && exists) { 29372 selectionMap.delete(id2); 29373 changedRows.add(id2); 29374 } 29375 const children = node.children; 29376 if (Array.isArray(children)) { 29377 children.forEach((child) => toggle(child, add2)); 29378 } 29379 }; 29380 const id = getRowIdentity(row, rowKey.value); 29381 const included = selectionMap.has(id); 29382 const add = typeof selected === "boolean" ? selected : !included; 29383 toggle(row, add); 29384 if (changedRows.size > 0) { 29385 selection.value = Array.from(selectionMap.values()); 29386 if (emitChange) { 29387 instance.emit("select", selection.value.slice(), row); 29388 } 29389 instance.emit("selection-change", selection.value.slice()); 29390 } 29391 }; 29392 const toggleAllSelection = () => { 29393 const value = selectOnIndeterminate.value ? !isAllSelected.value : !(isAllSelected.value || selectionMap.size); 29394 isAllSelected.value = value; 29395 const rows = data.value; 29396 const total = rows.length; 29397 const batchSize = BATCH_SIZE; 29398 let index2 = 0; 29399 let childrenCount = 0; 29400 let selectionChanged = false; 29401 const rowIdentityCache = /* @__PURE__ */ new Map(); 29402 const childrenCountCache = /* @__PURE__ */ new Map(); 29403 const getRowId = (row) => { 29404 if (rowIdentityCache.has(row)) { 29405 return rowIdentityCache.get(row); 29406 } 29407 const id = getRowIdentity(row, rowKey.value); 29408 rowIdentityCache.set(row, id); 29409 return id; 29410 }; 29411 const getChildCountCached = (id) => { 29412 if (childrenCountCache.has(id)) { 29413 return childrenCountCache.get(id); 29414 } 29415 const count = getChildrenCount(id); 29416 childrenCountCache.set(id, count); 29417 return count; 29418 }; 29419 const toggleRecursive = (row) => { 29420 toggleRowSelection(row, value, false); 29421 }; 29422 const processBatch = () => { 29423 const end = Math.min(index2 + batchSize, total); 29424 for (; index2 < end; index2++) { 29425 const row = rows[index2]; 29426 const rowIndex = index2 + childrenCount; 29427 const rowId = getRowId(row); 29428 childrenCount += getChildCountCached(rowId); 29429 if (selectable.value) { 29430 if (selectable.value.call(null, row, rowIndex)) { 29431 toggleRecursive(row); 29432 selectionChanged = true; 29433 } 29434 } else { 29435 toggleRecursive(row); 29436 selectionChanged = true; 29437 } 29438 } 29439 if (index2 < total) { 29440 requestIdle(processBatch); 29441 } else { 29442 loading.value = false; 29443 selection.value = Array.from(selectionMap.values()); 29444 const result = selection.value.slice(); 29445 if (selectionChanged) { 29446 instance.emit("selection-change", result); 29447 } 29448 instance.emit("select-all", result); 29449 } 29450 }; 29451 loading.value = true; 29452 requestIdle(processBatch); 29453 }; 29454 const updateSelectionByRowKey = () => { 29455 const selectedMap = getKeysMap(selection.value, rowKey.value); 29456 data.value.forEach((row) => { 29457 const rowId = getRowIdentity(row, rowKey.value); 29458 const rowInfo = selectedMap[rowId]; 29459 if (rowInfo) { 29460 selectionMap.set(rowId, row); 29461 } 29462 }); 29463 selection.value = Array.from(selectionMap.values()); 29464 }; 29465 const updateAllSelected = () => { 29466 var _a; 29467 if (data.value.length === 0) { 29468 isAllSelected.value = false;
29469 return; 29470 } 29471 const selectedKeys = new Set(selectionMap.keys()); 29472 const isSelected2 = (row) => selectedKeys.has(getRowIdentity(row, rowKey.value)); 29473 let isAllSelected_ = true; 29474 let selectedCount = 0; 29475 let childrenCount = 0; 29476 for (let i = 0, j = data.value.length; i < j; i++) { 29477 const rowIndex = i + childrenCount; 29478 const item = data.value[i]; 29479 const isRowSelectable = (_a = selectable.value) == null ? void 0 : _a.call(null, item, rowIndex); 29480 if (!isSelected2(item)) { 29481 if (!selectable.value || isRowSelectable) { 29482 isAllSelected_ = false; 29483 break; 29484 } 29485 } else { 29486 selectedCount++; 29487 } 29488 childrenCount += getChildrenCount(getRowIdentity(item, rowKey.value)); 29489 } 29490 if (selectedCount === 0) { 29491 isAllSelected_ = false; 29492 } 29493 isAllSelected.value = isAllSelected_; 29494 }; 29495 const getChildrenCount = (rowKey2) => { 29496 var _a; 29497 const { treeData } = instance.store.states; 29498 let count = 0; 29499 const children = (_a = treeData.value[rowKey2]) == null ? void 0 : _a.children; 29500 if (children) { 29501 count += children.length; 29502 children.forEach((childKey) => { 29503 count += getChildrenCount(childKey); 29504 }); 29505 } 29506 return count; 29507 }; 29508 return { 29509 isSelected, 29510 clearSelection, 29511 cleanSelection, 29512 getSelectionRows, 29513 toggleRowSelection, 29514 toggleAllSelection, 29515 updateSelectionByRowKey, 29516 updateAllSelected, 29517 states: { 29518 selection, 29519 reserveSelection, 29520 isAllSelected, 29521 selectOnIndeterminate, 29522 selectable, 29523 loading 29524 } 29525 }; 29526} 29527function useSingle(watcherData) { 29528 const instance = getCurrentInstance(); 29529 const data = watcherData.data; 29530 const rowKey = watcherData.rowKey; 29531 const singleSection = ref(null); 29532 const getSingleSelection = () => { 29533 return singleSection.value; 29534 }; 29535 const setSingleSelection = (row) => { 29536 singleSection.value = row; 29537 }; 29538 const clearSingleSelection = () => { 29539 singleSection.value = null; 29540 instance.emit("single-selection-change", []); 29541 }; 29542 const getSingle = () => { 29543 if (singleSection.value) { 29544 return getRowIdentity(singleSection.value, rowKey.value); 29545 } 29546 }; 29547 const setSingle = (value) => { 29548 const { treeData, rowKey: rowKey2 } = instance.store.states; 29549 const isTreeMode = Object.keys(treeData.value).length > 0; 29550 if (isTreeMode) { 29551 const treeRoot = data.value; 29552 const row = findRowByKey(treeRoot, value, rowKey2.value); 29553 if (row) { 29554 singleSection.value = row; 29555 instance.emit("single-selection-change", row); 29556 } 29557 } else { 29558 data.value.forEach((row) => { 29559 if (getRowIdentity(row, rowKey2.value) === value) { 29560 singleSection.value = row; 29561 instance.emit("single-selection-change", row); 29562 return; 29563 } 29564 }); 29565 } 29566 }; 29567 return { 29568 getSingleSelection, 29569 setSingleSelection, 29570 clearSingleSelection, 29571 getSingle, 29572 setSingle, 29573 states: { 29574 singleSection 29575 } 29576 }; 29577} 29578function createKeysMapGetter(rowKey) { 29579 let cacheData = null; 29580 let cacheMap = {}; 29581 return function getKeysMap2(data) { 29582 if (data === cacheData) { 29583 return cacheMap; 29584 } 29585 const map = {}; 29586 for (let i = 0; i < data.length; i++) { 29587 const row = data[i]; 29588 const key = getRowIdentity(row, rowKey); 29589 map[key] = { row, index: i }; 29590 } 29591 cacheData = data; 29592 cacheMap = map; 29593 return map; 29594 }; 29595} 29596function useExpand(watcherData) { 29597 const instance = getCurrentInstance(); 29598 const data = watcherData.data; 29599 const rowKey = watcherData.rowKey; 29600 const defaultExpandAll = ref(false); 29601 const expandedKeySet = ref(/* @__PURE__ */ new Set()); 29602 const forceExpand = computed(() => { 29603 return instance.props.forceExpand; 29604 }); 29605 const showExpandIcon = computed(() => { 29606 return instance.props.showExpandIcon; 29607 }); 29608 const updateExpandRows = () => { 29609 if (defaultExpandAll.value || forceExpand.value && !forceExpand.value.expandRowKeys) { 29610 const fullSet = /* @__PURE__ */ new Set(); 29611 for (const row of data.value) { 29612 const key = typeof rowKey.value === "function" ? rowKey.value(row) : String(row[rowKey.value]); 29613 fullSet.add(key); 29614 } 29615 expandedKeySet.value = fullSet; 29616 } else { 29617 const getKeysMap2 = createKeysMapGetter(rowKey.value);
29618 const keysMap = getKeysMap2(data.value); 29619 expandedKeySet.value = new Set([...expandedKeySet.value].filter((key) => keysMap[key])); 29620 } 29621 }; 29622 const toggleRowExpansion = (row, expanded) => { 29623 const key = typeof rowKey.value === "function" ? rowKey.value(row) : String(row[rowKey.value]); 29624 const has = expandedKeySet.value.has(key); 29625 const shouldExpand = typeof expanded === "boolean" ? expanded : !has; 29626 if (shouldExpand && !has) { 29627 expandedKeySet.value = new Set(expandedKeySet.value).add(key); 29628 instance.emit("expand-change", row, getExpandedRows()); 29629 } else if (!shouldExpand && has) { 29630 const newSet = new Set(expandedKeySet.value); 29631 newSet.delete(key); 29632 expandedKeySet.value = newSet; 29633 instance.emit("expand-change", row, getExpandedRows()); 29634 } 29635 }; 29636 const isRowExpanded = (row) => { 29637 if (forceExpand.value && !forceExpand.value.expandRowKeys) { 29638 return true; 29639 } 29640 const key = typeof rowKey.value === "function" ? rowKey.value(row) : String(row[rowKey.value]); 29641 return expandedKeySet.value.has(key); 29642 }; 29643 const setExpandRowKeys = (rowKeys) => { 29644 expandedKeySet.value = new Set(rowKeys); 29645 void expandedKeySet.value; 29646 }; 29647 const getExpandedRows = () => { 29648 const getKeysMap2 = createKeysMapGetter(rowKey.value); 29649 const keysMap = getKeysMap2(data.value); 29650 return [...expandedKeySet.value].map((key) => keysMap[key]).filter(Boolean).map((entry) => entry.row); 29651 }; 29652 return { 29653 updateExpandRows, 29654 toggleRowExpansion, 29655 isRowExpanded, 29656 setExpandRowKeys, 29657 states: { 29658 defaultExpandAll, 29659 forceExpand, 29660 showExpandIcon 29661 } 29662 }; 29663} 29664function useFilter(watcherData) { 29665 const instance = getCurrentInstance(); 29666 const _data = watcherData._data; 29667 const columns = watcherData.columns; 29668 const filters = ref({}); 29669 const filteredData = ref([]); 29670 const filterPanels = ref({}); 29671 const updateFilters = (columns2, values) => { 29672 if (!Array.isArray(columns2)) { 29673 columns2 = [columns2]; 29674 } 29675 const filters_ = {}; 29676 columns2.forEach((col) => { 29677 filters.value[col.id] = values; 29678 filters_[col.columnKey || col.id] = values; 29679 }); 29680 return filters_; 29681 }; 29682 const execFilter = () => { 29683 let sourceData = unref(_data); 29684 Object.keys(filters.value).forEach((columnId) => { 29685 const values = filters.value[columnId]; 29686 if (!values || values.length === 0) { 29687 return; 29688 } 29689 const column = getColumnById( 29690 { 29691 columns: columns.value 29692 }, 29693 columnId 29694 ); 29695 if (column && column.filterMethod) { 29696 sourceData = sourceData.filter((row) => { 29697 return values.some((value) => column.filterMethod.call(null, value, row, column)); 29698 }); 29699 } 29700 }); 29701 filteredData.value = sourceData; 29702 }; 29703 const clearFilter = (columnKeys) => { 29704 const panels = Object.assign({}, filterPanels.value); 29705 const keys = Object.keys(panels); 29706 if (!keys.length) { 29707 /* istanbul ignore next @preserve */ 29708 return; 29709 } 29710 if (Array.isArray(columnKeys)) { 29711 const columns_ = columnKeys.map( 29712 (key) => getColumnByKey( 29713 { 29714 columns: columns.value 29715 }, 29716 key 29717 ) 29718 ); 29719 keys.forEach((key) => { 29720 const column = columns_.find((col) => col.id === key); 29721 if (column) { 29722 column.filteredValue = []; 29723 } 29724 }); 29725 instance.store.commit("filterChange", { 29726 column: columns_, 29727 values: [], 29728 silent: true 29729 }); 29730 } else { 29731 keys.forEach((key) => { 29732 const column = columns.value.find((col) => col.id === key); 29733 if (column) { 29734 column.filteredValue = []; 29735 } 29736 }); 29737 filters.value = {}; 29738 instance.store.commit("filterChange", { 29739 column: {}, 29740 values: [], 29741 silent: true 29742 }); 29743 } 29744 }; 29745 return { 29746 updateFilters, 29747 execFilter, 29748 clearFilter, 29749 states: { 29750 filters, 29751 filteredData, 29752 filterPanels 29753 } 29754 }; 29755} 29756var __defProp$f = Object.defineProperty; 29757var __getOwnPropSymbols$f = Object.getOwnPropertySymbols; 29758var __hasOwnProp$f = Object.prototype.hasOwnProperty; 29759var __propIsEnum$f = Object.prototype.propertyIsEnumerable; 29760var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 29761var __spreadValues$f = (a, b) => { 29762 for (var prop in b || (b = {})) 29763 if (__hasOwnProp$f.call(b, prop)) 29764 __defNormalProp$f(a, prop, b[prop]); 29765 if (__getOwnPropSymbols$f) 29766 for (var prop of __getOwnPropSymbols$f(b)) { 29767 if (__propIsEnum$f.call(b, prop)) 29768 __defNormalProp$f(a, prop, b[prop]); 29769 } 29770 return a; 29771}; 29772function useTree$1(watcherData) { 29773 const expandRowKeys = ref([]); 29774 const treeData = ref({}); 29775 const lazy = ref(false); 29776 const lazyTreeNodeMap = ref({}); 29777 const lazyColumnIdentifier = ref("hasChildren"); 29778 const childrenColumnName = ref("children"); 29779 const instance = getCurrentInstance(); 29780 const data = watcherData.data; 29781 const rowKey = watcherData.rowKey; 29782 const debounceA11y = debounce(() => { 29783 /* istanbul ignore next @preserve */ 29784 instance.state.focus(); 29785 }, TRANSITION_DELAY); 29786 const normalizedData = computed(() => { 29787 if (!rowKey.value) { 29788 return {}; 29789 } 29790 return normalize(data.value); 29791 }); 29792 const hasTree = computed(() => { 29793 return normalizedData.value && Object.keys(normalizedData.value).length > 0; 29794 }); 29795 const normalizedLazyNode = computed(() => {
29796 const keys = Object.keys(lazyTreeNodeMap.value); 29797 const res = {}; 29798 if (!keys.length) { 29799 return res; 29800 } 29801 keys.forEach((key) => { 29802 if (lazyTreeNodeMap.value[key].length) { 29803 const item = { children: [] }; 29804 lazyTreeNodeMap.value[key].forEach((row) => { 29805 const currentRowKey = getRowIdentity(row, rowKey.value); 29806 item.children.push(currentRowKey); 29807 if (row[lazyColumnIdentifier.value] && !res[currentRowKey]) { 29808 /* istanbul ignore next @preserve */ 29809 res[currentRowKey] = { children: [] }; 29810 } 29811 }); 29812 res[key] = item; 29813 } 29814 }); 29815 return res; 29816 }); 29817 const normalize = (data2) => { 29818 const res = {}; 29819 walkTreeNode( 29820 data2, 29821 (parent, children, level) => { 29822 const parentId = getRowIdentity(parent, rowKey.value); 29823 if (Array.isArray(children)) { 29824 res[parentId] = { 29825 children: children.map((row) => getRowIdentity(row, rowKey.value)), 29826 level 29827 }; 29828 } else if (lazy.value) { 29829 res[parentId] = { 29830 children: [], 29831 lazy: true, 29832 level 29833 }; 29834 } 29835 }, 29836 childrenColumnName.value, 29837 lazyColumnIdentifier.value 29838 ); 29839 return res; 29840 }; 29841 const updateTreeData = (ifChangeExpandRowKeys = false) => { 29842 const nested = normalizedData.value; 29843 const normalizedLazyNode_ = normalizedLazyNode.value; 29844 const keys = Object.keys(nested); 29845 const newTreeData = {}; 29846 const ifExpandAll = instance.store.states.defaultExpandAll.value; 29847 if (keys.length) { 29848 const oldTreeData = unref(treeData); 29849 const rootLazyRowKeys = []; 29850 const getExpanded = (oldValue, key) => { 29851 if (ifChangeExpandRowKeys) { 29852 if (expandRowKeys.value) { 29853 return ifExpandAll || expandRowKeys.value.includes(key); 29854 } else { 29855 /* istanbul ignore next @preserve */ 29856 return !!(ifExpandAll || oldValue.expanded); 29857 } 29858 } else { 29859 const included = ifExpandAll || expandRowKeys.value && expandRowKeys.value.includes(key); 29860 return !!((oldValue == null ? void 0 : oldValue.expanded) || included); 29861 } 29862 }; 29863 keys.forEach((key) => { 29864 const oldValue = oldTreeData[key]; 29865 const newValue = __spreadValues$f({}, nested[key]); 29866 newValue.expanded = getExpanded(oldValue, key); 29867 if (newValue.lazy) { 29868 const { loaded = false, loading = false } = oldValue || {}; 29869 newValue.loaded = !!loaded; 29870 newValue.loading = !!loading; 29871 rootLazyRowKeys.push(key); 29872 } 29873 newTreeData[key] = newValue; 29874 }); 29875 const lazyKeys = Object.keys(normalizedLazyNode_); 29876 if (lazy.value && lazyKeys.length && rootLazyRowKeys.length) { 29877 lazyKeys.forEach((key) => { 29878 const oldValue = oldTreeData[key]; 29879 const lazyNodeChildren = normalizedLazyNode_[key].children; 29880 if (rootLazyRowKeys.includes(key)) { 29881 if (newTreeData[key].children.length !== 0) { 29882 /* istanbul ignore next @preserve */ 29883 throwError("ZmVirtualTable", "children must be an empty array"); 29884 } 29885 newTreeData[key].children = lazyNodeChildren; 29886 } else { 29887 /* istanbul ignore next @preserve */ 29888 const { loaded = false, loading = false } = oldValue || {}; 29889 /* istanbul ignore next @preserve */ 29890 newTreeData[key] = { 29891 lazy: true, 29892 loaded: !!loaded, 29893 loading: !!loading, 29894 expanded: getExpanded(oldValue, key), 29895 children: lazyNodeChildren, 29896 level: "" 29897 }; 29898 } 29899 }); 29900 } 29901 } 29902 treeData.value = newTreeData; 29903 }; 29904 const getChildren = (row) => { 29905 const key = getRowIdentity(row, instance.store.states.rowKey.value); 29906 const lazyMap = lazyTreeNodeMap.value; 29907 if (lazyMap[key]) { 29908 return lazyMap[key]; 29909 } 29910 const childrenKey = childrenColumnName.value; 29911 const children = row[childrenKey]; 29912 if (Array.isArray(children)) { 29913 return children; 29914 } 29915 return []; 29916 }; 29917 watch( 29918 () => expandRowKeys.value, 29919 () => { 29920 updateTreeData(true); 29921 } 29922 ); 29923 watch( 29924 () => normalizedData.value, 29925 () => { 29926 updateTreeData(); 29927 } 29928 ); 29929 watch( 29930 () => normalizedLazyNode.value, 29931 () => { 29932 updateTreeData(); 29933 } 29934 ); 29935 const updateTreeExpandKeys = (value) => { 29936 expandRowKeys.value = value; 29937 updateTreeData(); 29938 }; 29939 const toggleTreeExpansion = (row, expanded) => { 29940 const id = getRowIdentity(row, rowKey.value); 29941 const data2 = id && treeData.value[id]; 29942 if (id && data2 && "expanded" in data2) { 29943 const oldExpanded = data2.expanded; 29944 expanded = typeof expanded === "undefined" ? !data2.expanded : expanded; 29945 treeData.value[id].expanded = expanded; 29946 if (oldExpanded !== expanded) {
29947 instance.emit("expand-change", row, expanded); 29948 } 29949 } 29950 setTimeout(() => { 29951 isPerformingKeyboardAction() && instance.state.focus(); 29952 }, 0); 29953 }; 29954 const loadOrToggle = (row) => { 29955 const id = getRowIdentity(row, rowKey.value); 29956 const data2 = treeData.value[id]; 29957 if (lazy.value && data2 && "loaded" in data2 && !data2.loaded) { 29958 loadData(row, id, data2); 29959 } else { 29960 toggleTreeExpansion(row, void 0); 29961 } 29962 }; 29963 const loadData = (row, key, treeNode) => { 29964 const { load } = instance.props; 29965 if (load && !treeData.value[key].loaded) { 29966 treeData.value[key].loading = true; 29967 load(row, treeNode, (data2) => { 29968 if (!Array.isArray(data2)) { 29969 /* istanbul ignore next @preserve */ 29970 throwError("ZmVirtualTable", "data must be an array"); 29971 } 29972 treeData.value[key].loading = false; 29973 treeData.value[key].loaded = true; 29974 treeData.value[key].expanded = true; 29975 if (data2.length) { 29976 lazyTreeNodeMap.value[key] = data2; 29977 } 29978 instance.emit("expand-change", row, true); 29979 isPerformingKeyboardAction() && debounceA11y(); 29980 }); 29981 } 29982 }; 29983 return { 29984 loadOrToggle, 29985 toggleTreeExpansion, 29986 updateTreeExpandKeys, 29987 updateTreeData, 29988 getChildren, 29989 states: { 29990 expandRowKeys, 29991 treeData, 29992 lazy, 29993 lazyTreeNodeMap, 29994 lazyColumnIdentifier, 29995 childrenColumnName, 29996 hasTree 29997 } 29998 }; 29999} 30000function useTooltip() { 30001 const instance = getCurrentInstance(); 30002 const ns = useNamespace("virtual-table"); 30003 const tooltipData = ref({}); 30004 let flushing = false; 30005 const cached = {}; 30006 const flushTooltip = (data, flag) => { 30007 if (!cached[data.column.id]) { 30008 cached[data.column.id] = []; 30009 } 30010 cached[data.column.id][data.index] = flag; 30011 if (!flushing) { 30012 flushing = true; 30013 setTimeout(() => { 30014 Object.keys(cached).forEach((col) => { 30015 cached[col].forEach((flag2, index2) => { 30016 if (!tooltipData.value[col]) { 30017 tooltipData.value[col] = []; 30018 } 30019 tooltipData.value[col][index2] = flag2; 30020 }); 30021 }); 30022 flushing = false; 30023 instance.state.buildA11y(); 30024 }, TRANSITION_DELAY); 30025 } 30026 }; 30027 const renderTooltip = (data, tooltip) => { 30028 var _a; 30029 const node = instance.vnode.el; 30030 const value = getRowIdentity(data.row, instance.props.rowKey); 30031 const rows = Array.from(node.querySelectorAll(`.${ns.e("row")}`)); 30032 const row = rows.find((row2) => { 30033 return row2.dataset.key === value; 30034 }); 30035 const cellChild = (_a = row == null ? void 0 : row.querySelector(`.${data.column.id}`)) == null ? void 0 : _a.querySelector("span.text-wrapper"); 30036 if (!cellChild) { 30037 /* istanbul ignore next @preserve */ 30038 return; 30039 } 30040 const trigger = data.column.slots.default ? cellChild : row == null ? void 0 : row.querySelector(`.${data.column.id}`); 30041 tooltip == null ? void 0 : tooltip.updateTriggerRef(trigger); 30042 if (hasEllipsis(cellChild)) { 30043 flushTooltip(data, true); 30044 } else { 30045 flushTooltip(data, false); 30046 } 30047 }; 30048 const shouldRenderTooltip = (data) => { 30049 var _a; 30050 return ((_a = tooltipData.value[data.column.id]) == null ? void 0 : _a[data.index]) && !isEmpty2(data); 30051 }; 30052 const isEmpty2 = ({ row, column }) => { 30053 const prop = column.prop; 30054 const value = prop && getProp(row, prop).value; 30055 return isNil(value) || value.toString().trim() === ""; 30056 }; 30057 return { 30058 renderTooltip, 30059 shouldRenderTooltip 30060 }; 30061} 30062var __async$4 = (__this, __arguments, generator) => { 30063 return new Promise((resolve2, reject) => { 30064 var fulfilled = (value) => { 30065 try { 30066 step(generator.next(value)); 30067 } catch (e) { 30068 reject(e); 30069 } 30070 }; 30071 var rejected = (value) => { 30072 try { 30073 step(generator.throw(value)); 30074 } catch (e) { 30075 reject(e); 30076 } 30077 }; 30078 var step = (x) => x.done ? resolve2(x.value) : Promise.resolve(x.value).then(fulfilled, rejected); 30079 step((generator = generator.apply(__this, __arguments)).next()); 30080 }); 30081}; 30082function useColumnSetting(watcherData) { 30083 const instance = getCurrentInstance(); 30084 const displayedProps = ref([]); 30085 const initDisplayedColumn = ref(null); 30086 const movableList = ref([]); 30087 const _columns = watcherData._columns; 30088 const initMovableList = ref([]); 30089 const displayedColumnsKey = computed(() => { 30090 if (initDisplayedColumn.value) { 30091 return `zm-virtual-table-${initDisplayedColumn.value.key}`; 30092 } 30093 /* istanbul ignore next @preserve */ 30094 return null; 30095 }); 30096 const newPropsKey = computed(() => { 30097 if (initDisplayedColumn.value) { 30098 return `zm-virtual-table-${initDisplayedColumn.value.key}-new`; 30099 } 30100 /* istanbul ignore next @preserve */ 30101 return null; 30102 }); 30103 const movableColumnsKey = computed(() => { 30104 if (initDisplayedColumn.value) { 30105 return `zm-virtual-table-${initDisplayedColumn.value.key}-movable`; 30106 } 30107 /* istanbul ignore next @preserve */ 30108 return null; 30109 }); 30110 const useStorage = computed(() => { 30111 if (initDisplayedColumn.value) { 30112 return !initDisplayedColumn.value.noStorage; 30113 } 30114 /* istanbul ignore next @preserve */ 30115 return null; 30116 }); 30117 const handleDisplayedProps = () => { 30118 displayedProps.value = updateDisplayedProps(); 30119 }; 30120 const updateDisplayedProps = () => { 30121 let props = initDisplayedColumn.value.props; 30122 let _movableList = initMovableList.value; 30123 if (useStorage.value) { 30124 props = store.get(displayedColumnsKey.value, props || []); 30125 _movableList = store.get(movableColumnsKey.value, initMovableList.value); 30126 const newProps = initDisplayedColumn.value.newProps || []; 30127 const cacheStoreProps = store.get(newPropsKey.value, []); 30128 const tip = initDisplayedColumn.value.tip; 30129 newProps.forEach((newProp) => { 30130 if (cacheStoreProps.indexOf(newProp) === -1) { 30131 if (props.indexOf(newProp) === -1) { 30132 props.push(newProp); 30133 } 30134 const inMovable = _movableList.find((item) => { 30135 return item.label === newProp; 30136 }); 30137 if (!inMovable && initDisplayedColumn.value.movable) { 30138 const column = _columns.value.find((column2) => { 30139 return column2.prop === newProp; 30140 }); 30141 if (column) { 30142 _movableList.push({ 30143 displayName: column.label, 30144 label: column.prop, 30145 ariaLabel: column.label, 30146 tip: tip ? tip[column.prop] : false, 30147 isEdit: false 30148 }); 30149 } 30150 } 30151 cacheStoreProps.push(newProp); 30152 store.set(newPropsKey.value, cacheStoreProps); 30153 } 30154 }); 30155 } 30156 movableList.value = _movableList; 30157 return props; 30158 }; 30159 const updateDisplayedColumns = () => { 30160 _columns.value.forEach((column) => { 30161 if (notMovableColumn(column)) { 30162 return; 30163 } 30164 if (!column.needDisplay && displayedProps.value.indexOf(column.prop
30164) > -1) { 30165 instance.store.commit("showColumn", column.prop); 30166 } else if (column.needDisplay && displayedProps.value.indexOf(column.prop) === -1) { 30167 instance.store.commit("hideColumn", column.prop); 30168 } 30169 }); 30170 }; 30171 const updateColumnSetting = (_displayedProps, columnList) => { 30172 displayedProps.value = _displayedProps; 30173 if (initDisplayedColumn.value.movable) { 30174 movableList.value = columnList; 30175 } 30176 }; 30177 const getColumnList = () => { 30178 const tip = initDisplayedColumn.value.tip; 30179 return _columns.value.filter((column) => { 30180 return !notMovableColumn(column); 30181 }).map((column) => { 30182 return { 30183 displayName: column.label, 30184 label: column.prop, 30185 ariaLabel: column.label, 30186 tip: tip ? tip[column.prop] : false, 30187 isEdit: false 30188 }; 30189 }); 30190 }; 30191 const getMovableList = () => { 30192 const props = initDisplayedColumn.value.movableProps; 30193 const tip = initDisplayedColumn.value.tip; 30194 let list; 30195 if (props) { 30196 list = []; 30197 for (let i = 0; i < props.length; i++) { 30198 const column = _columns.value.find((column2) => { 30199 return column2.prop === props[i]; 30200 }); 30201 list.push({ 30202 displayName: column.label, 30203 label: column.prop, 30204 ariaLabel: column.label, 30205 tip: tip ? tip[column.prop] : false, 30206 isEdit: false 30207 }); 30208 } 30209 } 30210 return list; 30211 }; 30212 const resetColumnSetting = () => { 30213 if (useStorage.value) { 30214 store.remove(displayedColumnsKey.value); 30215 store.remove(movableColumnsKey.value); 30216 store.remove(newPropsKey.value); 30217 } 30218 handleDisplayedProps(); 30219 }; 30220 const updateMovableColumn = () => { 30221 initMovableList.value = getMovableList() || getColumnList(); 30222 handleDisplayedProps(); 30223 }; 30224 watch( 30225 () => initDisplayedColumn.value, 30226 (newVal, oldVal) => __async$4(this, null, function* () { 30227 if (newVal) { 30228 if (!oldVal && newVal.movable) { 30229 yield nextTick(); 30230 initMovableList.value = getMovableList() || getColumnList(); 30231 } 30232 handleDisplayedProps(); 30233 } 30234 }) 30235 ); 30236 watch( 30237 () => displayedProps.value, 30238 (newVal) => { 30239 useStorage.value && store.set(displayedColumnsKey.value, newVal); 30240 nextTick(() => { 30241 updateDisplayedColumns(); 30242 instance.emit("display-columns-change", displayedProps.value); 30243 }); 30244 } 30245 ); 30246 watch( 30247 () => movableList.value, 30248 (newVal) => { 30249 useStorage.value && store.set(movableColumnsKey.value, newVal); 30250 nextTick(() => { 30251 instance.store.commit("updateMovableColumn", newVal); 30252 }); 30253 } 30254 ); 30255 return { 30256 updateColumnSetting, 30257 updateMovableColumn, 30258 updateDisplayedColumns, 30259 resetColumnSetting, 30260 getColumnList, 30261 states: { 30262 displayedProps, 30263 movableList, 30264 initDisplayedColumn 30265 } 30266 }; 30267} 30268var __defProp$e = Object.defineProperty; 30269var __getOwnPropSymbols$e = Object.getOwnPropertySymbols; 30270var __hasOwnProp$e = Object.prototype.hasOwnProperty; 30271var __propIsEnum$e = Object.prototype.propertyIsEnumerable; 30272var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 30273var __spreadValues$e = (a, b) => { 30274 for (var prop in b || (b = {})) 30275 if (__hasOwnProp$e.call(b, prop)) 30276 __defNormalProp$e(a, prop, b[prop]); 30277 if (__getOwnPropSymbols$e) 30278 for (var prop of __getOwnPropSymbols$e(b)) { 30279 if (__propIsEnum$e.call(b, prop)) 30280 __defNormalProp$e(a, prop, b[prop]); 30281 } 30282 return a; 30283}; 30284const doFlattenColumns = (columns) => { 30285 const result = []; 30286 columns.forEach((column) => { 30287 if (column.children && column.children.length > 0) { 30288 result.push.apply(result, doFlattenColumns(column.children)); 30289 } else { 30290 result.push(column); 30291 } 30292 }); 30293 return result; 30294}; 30295function useWatcher$1() { 30296 const instance = getCurrentInstance(); 30297 const skeleton = ref(null); 30298 const rowKey = ref(""); 30299 const originColumns = ref([]); 30300 const columns = ref([]); 30301 const _columns = ref([]); 30302 const data = ref([]); 30303 const _data = ref([]); 30304 const hoverRow = ref(null); 30305 const fixedColumns = ref([]); 30306 const rightFixedColumns = ref([]); 30307 const leafColumnsLength = ref(0); 30308 const fixedLeafColumnsLength = ref(0); 30309 const rightFixedLeafColumnsLength = ref(0); 30310 const adjustColumn = ref(false); 30311 const showSummary = ref(false); 30312 const updateOrderFns = []; 30313 const currentRow = ref(); 30314 const updateChildFixed = (column) => { 30315 var _a; 30316 (_a = column.children) == null ? void 0 : _a.forEach((childColumn) => { 30317 childColumn.fixed = column.fixed; 30318 updateChildFixed(childColumn); 30319 }); 30320 }; 30321 const updateColumns = () => { 30322 const displayedColumns = _columns.value.filter((column) => { 30323 return column.needDisplay; 30324 }); 30325 displayedColumns.forEach((column) => { 30326 updateChildFixed(column); 30327 }); 30328 fixedColumns.value = displayedColumns.filter((column) => { 30329 return column.fixed === true || column.fixed === "left"; 30330 }); 30331 rightFixedColumns.value = displayedColumns.filter((column) => { 30332 return column.fixed === "right"; 30333 });
30334 const notFixedColumns = displayedColumns.filter((column) => !column.fixed); 30335 originColumns.value = [].concat(fixedColumns.value).concat(notFixedColumns).concat(rightFixedColumns.value); 30336 const leafColumns = doFlattenColumns(notFixedColumns); 30337 const fixedLeafColumns = doFlattenColumns(fixedColumns.value); 30338 const rightFixedLeafColumns = doFlattenColumns(rightFixedColumns.value); 30339 leafColumnsLength.value = leafColumns.length; 30340 fixedLeafColumnsLength.value = fixedLeafColumns.length; 30341 rightFixedLeafColumnsLength.value = rightFixedLeafColumns.length; 30342 columns.value = [].concat(fixedLeafColumns).concat(leafColumns).concat(rightFixedLeafColumns); 30343 }; 30344 const scheduleLayout = (needUpdateColumns, immediate = false) => { 30345 if (needUpdateColumns) { 30346 updateColumns(); 30347 } 30348 if (immediate) { 30349 instance.state.doLayout(); 30350 } else { 30351 instance.state.debouncedUpdateLayout(); 30352 } 30353 }; 30354 const { 30355 updateFilters, 30356 execFilter, 30357 clearFilter, 30358 states: filterStates 30359 } = useFilter({ _data, columns }); 30360 const { 30361 updateSort, 30362 execSort, 30363 execQuery, 30364 clearSort, 30365 randomFlip, 30366 states: sortStates 30367 } = useSort({ data }); 30368 const { 30369 isSelected, 30370 clearSelection, 30371 cleanSelection, 30372 getSelectionRows, 30373 toggleRowSelection, 30374 toggleAllSelection, 30375 updateSelectionByRowKey, 30376 updateAllSelected, 30377 states: selectionStates 30378 } = useSelection({ data, rowKey }); 30379 const { 30380 getSingleSelection, 30381 setSingleSelection, 30382 clearSingleSelection, 30383 getSingle, 30384 setSingle, 30385 states: singleStates 30386 } = useSingle({ data, rowKey }); 30387 const { 30388 updateExpandRows, 30389 toggleRowExpansion, 30390 isRowExpanded, 30391 setExpandRowKeys, 30392 states: expandStates 30393 } = useExpand({ data, rowKey }); 30394 const { 30395 loadOrToggle, 30396 toggleTreeExpansion, 30397 updateTreeExpandKeys, 30398 updateTreeData, 30399 getChildren, 30400 states: treeStates 30401 } = useTree$1({ data, rowKey }); 30402 const { renderTooltip, shouldRenderTooltip } = useTooltip(); 30403 const { 30404 updateColumnSetting, 30405 updateMovableColumn, 30406 updateDisplayedColumns, 30407 resetColumnSetting, 30408 getColumnList, 30409 states: columnSettingStates 30410 } = useColumnSetting({ _columns }); 30411 const setExpandRowKeysAdapter = (val) => { 30412 setExpandRowKeys(val); 30413 updateTreeExpandKeys(val); 30414 }; 30415 return { 30416 updateColumns, 30417 scheduleLayout, 30418 setExpandRowKeysAdapter, 30419 updateColumnSetting, 30420 updateMovableColumn, 30421 updateDisplayedColumns, 30422 resetColumnSetting, 30423 getColumnList, 30424 isSelected, 30425 clearSelection, 30426 cleanSelection, 30427 getSelectionRows, 30428 toggleRowSelection, 30429 toggleAllSelection, 30430 updateSelectionByRowKey, 30431 updateAllSelected, 30432 getSingleSelection, 30433 setSingleSelection, 30434 clearSingleSelection, 30435 getSingle, 30436 setSingle, 30437 updateSort, 30438 execSort, 30439 execQuery, 30440 randomFlip, 30441 clearSort, 30442 updateFilters, 30443 execFilter, 30444 clearFilter, 30445 updateExpandRows, 30446 toggleRowExpansion, 30447 isRowExpanded, 30448 loadOrToggle, 30449 toggleTreeExpansion, 30450 updateTreeExpandKeys, 30451 updateTreeData, 30452 getChildren, 30453 renderTooltip, 30454 shouldRenderTooltip, 30455 setExpandRowKeys, 30456 states: __spreadValues$e(__spreadValues$e(__spreadValues$e(__spreadValues$e(__spreadValues$e(__spreadValues$e(__spreadValues$e({ 30457 skeleton, 30458 rowKey, 30459 originColumns, 30460 columns, 30461 _columns, 30462 data, 30463 _data, 30464 hoverRow, 30465 fixedColumns, 30466 rightFixedColumns, 30467 leafColumnsLength, 30468 fixedLeafColumnsLength, 30469 rightFixedLeafColumnsLength, 30470 adjustColumn, 30471 showSummary, 30472 updateOrderFns, 30473 currentRow 30474 }, filterStates), sortStates), selectionStates), singleStates), expandStates), treeStates), columnSettingStates) 30475 }; 30476} 30477var __defProp$d = Object.defineProperty; 30478var __defProps$b = Object.defineProperties; 30479var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors; 30480var __getOwnPropSymbols$d = Object.getOwnPropertySymbols; 30481var __hasOwnProp$d = Object.prototype.hasOwnProperty; 30482var __propIsEnum$d = Object.prototype.propertyIsEnumerable; 30483var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 30484var __spreadValues$d = (a, b) => { 30485 for (var prop in b || (b = {})) 30486 if (__hasOwnProp$d.call(b, prop)) 30487 __defNormalProp$d(a, prop, b[prop]); 30488 if (__getOwnPropSymbols$d) 30489 for (var prop of __getOwnPropSymbols$d(b)) { 30490 if (__propIsEnum$d.call(b, prop)) 30491 __defNormalProp$d(a, prop, b[prop]); 30492 } 30493 return a; 30494}; 30495var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b)); 30496function replaceColumn(array, column) { 30497 return array.map((item) => { 30498 var _a; 30499 if (item.id === column.id) { 30500 return column; 30501 } else if ((_a = item.children) == null ? void 0 : _a.length) { 30502 /* istanbul ignore next @preserve */ 30503 item.children = replaceColumn(item.children, column); 30504 } 30505 return item; 30506 }); 30507} 30508function sortColumn(array) { 30509 array.forEach((item) => { 30510 var _a, _b; 30511 item.no = (_a = item.getColumnIndex) == null ? void 0 : _a.call(item); 30512 if ((_b = item.children) == null ? void 0 : _b.length) { 30513 sortColumn(item.children); 30514 } 30515 }); 30516 array.sort((cur, pre) => cur.no - pre.no); 30517} 30518function useStore() { 30519 const instance = getCurrentInstance(); 30520 const watcher = useWatcher$1(); 30521 const ns = useNamespace("virtual-table"); 30522 const mutations = { 30523 setData(states, data) { 30524 const dataInstanceChanged = unref(states._data) !== data; 30525 states.data.value = data; 30526 states._data.value = data; 30527 instance.store.execQuery(); 30528 instance.store.updateExpandRows(); 30529 if (unref(states.reserveSelection)) { 30530 instance.store.updateSelectionByRowKey(); 30531 } else { 30532 if (dataInstanceChanged) { 30533 instance.store.clearSelection(); 30534 } else { 30535 instance.store.cleanSelection(); 30536 } 30537 } 30538 instance.store.updateAllSelected(); 30539 if (instance.$ready) { 30540 instance.store.scheduleLayout(); 30541 } 30542 }, 30543 insertColumn(states, column, parent, updateColumnOrder) { 30544 const array = unref(states._columns); 30545 let newColumns = []; 30546 if (!parent) { 30547 array.push(column); 30548 newColumns = array; 30549 } else { 30550 if (parent && !parent.children) { 30551 parent.children = []; 30552 } 30553 parent.children.push(column); 30554 newColumns = replaceColumn(array, parent); 30555 } 30556 states._columns.value = newColumns; 30557 states.updateOrderFns.push(updateColumnOrder); 30558 if (column.type === "selection") { 30559 states.selectable.value = column.selectable; 30560 states.reserveSelection.value = column.reserveSelection; 30561 } 30562 if (instance.$ready) { 30563 instance.store.updateColumns(); 30564 instance.store.scheduleLayout(); 30565 } 30566 }, 30567 updateColumnOrder(states, column) { 30568 var _a; 30569 const newColumnIndex = (_a = column.getColumnIndex) == null ? void 0 : _a.call(column); 30570 if (newColumnIndex === column.no) { 30571 return; 30572 } 30573 sortColumn(states._columns.value); 30574 if (instance.$ready) { 30575 instance.store.updateColumns(); 30576 } 30577 }, 30578 removeColumn(states, column, parent, updateColumnOrder) { 30579 const array = unref(states._columns) || []; 30580 if (parent) { 30581 parent.children.splice( 30582 parent.children.findIndex((item) => item.id === column.id), 30583 1 30584 ); 30585 states._columns.value = replaceColumn(array, parent); 30586 } else { 30587 const index2 = array.indexOf(column); 30588 if (index2 > -1) { 30589 array.splice(index2, 1); 30590 states._columns.value = array; 30591 } 30592 } 30593 const updateFnIndex = states.updateOrderFns.indexOf(updateColumnOrder); 30594 updateFnIndex > -1 && states.updateOrderFns.splice(updateFnIndex, 1); 30595 if (instance.$ready) { 30596 instance.store.updateColumns(); 30597 instance.store.scheduleLayout(); 30598 } 30599 }, 30600 showColumn(states, prop) { 30601 states._columns.value.some((column) => { 30602 if (column.prop === prop) { 30603 column.needDisplay = true; 30604 return true; 30605 } 30606 }); 30607 if (instance.$ready) { 30608 instance.store.updateColumns(); 30609 instance.store.scheduleLayout(); 30610 } 30611 }, 30612 hideColumn(states, prop) { 30613 states._columns.value.some((column) => { 30614 if (column.prop === prop) { 30615 column.needDisplay = false;
30616 return true; 30617 } 30618 }); 30619 if (instance.$ready) { 30620 instance.store.updateColumns(); 30621 instance.store.scheduleLayout(); 30622 } 30623 }, 30624 updateMovableColumn(states, movableList) { 30625 if (!movableList || !movableList.length) { 30626 /* istanbul ignore next @preserve */ 30627 return; 30628 } 30629 const array = []; 30630 const _columns = states._columns; 30631 states._columns.value.forEach((column) => { 30632 if (notMovableColumn(column)) { 30633 array.push(column); 30634 } 30635 }); 30636 movableList.forEach((item) => { 30637 _columns.value.some((column) => { 30638 if (column.prop === item.label) { 30639 array.push(column); 30640 return true; 30641 } 30642 }); 30643 }); 30644 states._columns.value = array; 30645 if (instance.$ready) { 30646 instance.store.updateColumns(); 30647 instance.store.scheduleLayout(); 30648 } 30649 }, 30650 toggleAllSelection() { 30651 instance.store.toggleAllSelection(); 30652 }, 30653 rowSelectedChanged(states, row) { 30654 instance.store.toggleRowSelection(row); 30655 instance.store.updateAllSelected(); 30656 }, 30657 sort(states, options) { 30658 const { prop, order, init } = options; 30659 if (prop) { 30660 const column = unref(states.columns).find((column2) => column2.prop === prop); 30661 if (column) { 30662 column.order = order; 30663 instance.store.updateSort(column, prop, order); 30664 instance.store.commit("changeSortCondition", { init }); 30665 } 30666 } 30667 }, 30668 changeSortCondition(states, options) { 30669 const { sortingColumn, sortProp, sortOrder } = states; 30670 const columnValue = unref(sortingColumn); 30671 const propValue = unref(sortProp); 30672 const orderValue = unref(sortOrder); 30673 if (orderValue === null) { 30674 states.sortingColumn.value = null; 30675 states.sortProp.value = ""; 30676 } 30677 const ignore = { filter: true }; 30678 instance.store.execQuery(ignore); 30679 if (!options || !(options.silent || options.init)) { 30680 instance.emit("sort-change", { 30681 column: columnValue, 30682 prop: propValue, 30683 order: orderValue 30684 }); 30685 instance.refs.root.repaint(instance.store.randomFlip); 30686 } 30687 }, 30688 filterChange(states, options) { 30689 const { column, values, silent } = options; 30690 const newFilters = instance.store.updateFilters(column, values); 30691 instance.store.execQuery(); 30692 instance.store.updateAllSelected(); 30693 if (!silent) { 30694 instance.emit("filter-change", newFilters); 30695 instance.refs.root.repaint(); 30696 } 30697 } 30698 }; 30699 const commit = function(name, ...args) { 30700 const mutations2 = instance.store.mutations; 30701 if (mutations2[name]) { 30702 mutations2[name].apply(instance, [instance.store.states].concat(args)); 30703 } 30704 }; 30705 return __spreadProps$b(__spreadValues$d({ 30706 ns 30707 }, watcher), { 30708 mutations, 30709 commit 30710 }); 30711} 30712const InitialStateMap = { 30713 skeleton: "skeleton", 30714 rowKey: "rowKey", 30715 selectOnIndeterminate: "selectOnIndeterminate", 30716 defaultExpandAll: "defaultExpandAll", 30717 adjustColumn: "adjustColumn", 30718 showSummary: "showSummary", 30719 lazy: "lazy", 30720 ["treeProps.hasChildren"]: { 30721 key: "lazyColumnIdentifier", 30722 default: "hasChildren" 30723 }, 30724 ["treeProps.children"]: { 30725 key: "childrenColumnName", 30726 default: "children" 30727 }, 30728 initDisplayedColumn: "initDisplayedColumn" 30729}; 30730function createStore(table, props) { 30731 const store2 = useStore(); 30732 store2.table = table; 30733 Object.keys(InitialStateMap).forEach((key) => { 30734 handleValue( 30735 getValue(props, key), 30736 key, 30737 store2 30738 ); 30739 }); 30740 proxyTableProps(store2, props); 30741 return store2; 30742} 30743function handleValue(value, key, store2) { 30744 let newVal = value; 30745 let storeKey = InitialStateMap[key]; 30746 if (typeof InitialStateMap[key] === "object") { 30747 storeKey = storeKey.key; 30748 newVal = newVal || InitialStateMap[key].default; 30749 } 30750 store2.states[storeKey].value = newVal; 30751} 30752function proxyTableProps(store2, props) { 30753 Object.keys(InitialStateMap).forEach((key) => { 30754 watch( 30755 () => getValue(props, key), 30756 (value) => { 30757 handleValue(value, key, store2); 30758 } 30759 ); 30760 }); 30761} 30762function getValue(props, key) { 30763 if (key.includes(".")) {
30764 const keyList = key.split("."); 30765 let value = props; 30766 keyList.forEach((key2) => { 30767 value = value[key2]; 30768 }); 30769 return value; 30770 } else { 30771 return props[key]; 30772 } 30773} 30774function useLayoutObserver() { 30775 const instance = getCurrentInstance(); 30776 const tableLayout = instance.layout; 30777 const onColumnsChange = (layout) => { 30778 var _a; 30779 const cols = ((_a = instance.vnode.el) == null ? void 0 : _a.querySelectorAll("colgroup > col")) || []; 30780 if (!cols.length) { 30781 return; 30782 } 30783 const flattenColumns = layout.getFlattenColumns(); 30784 const columnsMap = {}; 30785 flattenColumns.forEach((column) => { 30786 columnsMap[column.id] = column; 30787 }); 30788 for (let i = 0, j = cols.length; i < j; i++) { 30789 const col = cols[i]; 30790 const name = col.getAttribute("name"); 30791 const column = columnsMap[name]; 30792 if (column) { 30793 col.setAttribute("width", column.realWidth || column.width); 30794 } 30795 } 30796 }; 30797 tableLayout.addObserver(instance); 30798 onMounted(() => { 30799 onColumnsChange(tableLayout); 30800 }); 30801 onUpdated(() => { 30802 onColumnsChange(tableLayout); 30803 }); 30804 onUnmounted(() => { 30805 tableLayout.removeObserver(instance); 30806 }); 30807 return { 30808 onColumnsChange 30809 }; 30810} 30811function useA11y$1(originData, adjust, props) { 30812 const ns = useNamespace("virtual-table"); 30813 const table = getCurrentInstance(); 30814 const selector = { 30815 body: "tbody", 30816 row: `.${ns.e("row")},.${ns.e("append-row")}`, 30817 header: "thead", 30818 footer: "tfoot", 30819 cell: "td,th", 30820 tabindex: '[tabindex]:not([aria-hidden="true"]):not([a11y-ignore="true"])', 30821 settingBtn: `.${ns.namespace}-virtual-table-column-setting__trigger-btn` 30822 }; 30823 let gridNode; 30824 let bodyEl; 30825 let footerEl; 30826 let headerEl; 30827 let settingBtn; 30828 let focusedRow = 0; 30829 let focusedCol = 0; 30830 let focusedZIndex = 0; 30831 let grid; 30832 const init = () => { 30833 gridNode = table.vnode.el.querySelector("table"); 30834 bodyEl = gridNode.querySelector(selector.body); 30835 footerEl = gridNode.querySelector(selector.footer); 30836 headerEl = gridNode.querySelector(selector.header); 30837 }; 30838 const resetTabIndex = () => { 30839 const matchedEls = gridNode.querySelectorAll(selector.tabindex); 30840 Array.prototype.forEach.call(matchedEls, (el) => { 30841 el.setAttribute("tabindex", "-1"); 30842 }); 30843 }; 30844 const findHeaderFocusCells = () => { 30845 const headerRowCount = headerEl.querySelectorAll(selector.row).length; 30846 const displayedColumns = table.store.states.columns.value.filter((column) => { 30847 return column.type !== "expand" || !table.props.forceExpand && table.props.showExpandIcon; 30848 }); 30849 const headerColumnCount = displayedColumns.length; 30850 const headerGrid = Array(headerRowCount).fill(null).map(() => { 30851 return new Array(headerColumnCount).fill(null); 30852 }); 30853 for (let i = 0; i < headerRowCount; i++) { 30854 const row = headerEl.querySelectorAll(selector.row)[i]; 30855 const cells = row.querySelectorAll(selector.cell); 30856 Array.prototype.forEach.call(cells, (cell) => { 30857 const colSpanNum = Number(cell.getAttribute("colspan") || 1); 30858 const rowSpanNum = Number(cell.getAttribute("rowspan") || 1); 30859 const focusEls = getFocusElements(cell); 30860 placeCellSpan(headerGrid, i, colSpanNum, rowSpanNum, focusEls); 30861 }); 30862 } 30863 settingBtn = headerEl.querySelector(selector.settingBtn); 30864 if (settingBtn) { 30865 headerGrid[0][headerColumnCount] = [settingBtn]; 30866 } 30867 return headerGrid; 30868 }; 30869 const setAriaColIndex = (headerGrid) => { 30870 let preEl; 30871 let el; 30872 for (let i = 0; i < headerGrid.length; i++) { 30873 for (let j = 0; j < headerGrid[i].length; j++) { 30874 el = getHeader(headerGrid[i][j][0]); 30875 if (el && el !== preEl) { 30876 el.setAttribute("aria-colindex", (j + 1).toString()); 30877 } 30878 preEl = el; 30879 } 30880 } 30881 }; 30882 const getHeader = (el) => { 30883 let parent = el; 30884 while (parent && parent.tagName.toLocaleLowerCase() !== "th") { 30885 parent = parent.parentNode; 30886 } 30887 return parent; 30888 }; 30889 const findStartCol = (rowArr, need) => { 30890 let start = 0; 30891 while (start <= rowArr.length - need) { 30892 let ok = true; 30893 for (let k = 0; k < need; k++) { 30894 if (rowArr[start + k] !== null) { 30895 ok = false;
30896 start = start + k + 1; 30897 break; 30898 } 30899 } 30900 if (ok) { 30901 return start; 30902 } 30903 } 30904 return -1; 30905 }; 30906 const placeCellSpan = (grid2d, baseRow, colSpanNum, rowSpanNum, value) => { 30907 const startCol = findStartCol(grid2d[baseRow], colSpanNum); 30908 if (startCol === -1) 30909 return; 30910 for (let r = 0; r < rowSpanNum; r++) { 30911 const rowRef = grid2d[baseRow + r]; 30912 if (!rowRef) { 30913 continue; 30914 } 30915 for (let c = 0; c < colSpanNum; c++) { 30916 rowRef[startCol + c] = value; 30917 } 30918 } 30919 }; 30920 const getTableCellRoot = (el) => { 30921 let parent = el; 30922 while (parent && parent.tagName !== "TD" && parent.tagName !== "TH") { 30923 parent = parent.parentNode; 30924 } 30925 return parent; 30926 }; 30927 const findBodyFocusCells = () => { 30928 const displayedColumns = table.store.states.columns.value.filter((column) => { 30929 return column.type !== "expand" || !table.props.forceExpand && table.props.showExpandIcon; 30930 }); 30931 const bodyColumnCount = displayedColumns.length; 30932 const bodyRowCount = originData.value.length; 30933 const bodyGrid = Array(bodyRowCount).fill(null).map(() => { 30934 return new Array(bodyColumnCount).fill(null); 30935 }); 30936 for (let i = 0; i < bodyRowCount; i++) { 30937 const item = originData.value[i]; 30938 let key = getRowIdentity(item, props.rowKey); 30939 if (item.__expand__) { 30940 key = `expanded-row__${key}`; 30941 } 30942 const row = bodyEl.querySelector(`[data-key="${key}"]`); 30943 if (!row) { 30944 continue; 30945 } 30946 const cells = row == null ? void 0 : row.querySelectorAll(selector.cell); 30947 Array.prototype.forEach.call(cells, (cell) => { 30948 const colSpanNum = Number(cell.getAttribute("colspan") || 1); 30949 const rowSpanNum = Number(cell.getAttribute("rowspan") || 1); 30950 const focusEls = getFocusElements(cell); 30951 placeCellSpan(bodyGrid, i, colSpanNum, rowSpanNum, focusEls); 30952 }); 30953 } 30954 return bodyGrid; 30955 }; 30956 const getFocusElements = (cell) => { 30957 if (cell.getAttribute("tabindex")) { 30958 return [cell]; 30959 } 30960 return cell.querySelectorAll(selector.tabindex); 30961 }; 30962 const findFocusCells = (row) => { 30963 const focusCells = []; 30964 const cells = row == null ? void 0 : row.querySelectorAll(selector.cell); 30965 if (cells) { 30966 Array.prototype.forEach.call(cells, (cell) => { 30967 const focusEls = getFocusElements(cell); 30968 focusCells.push(focusEls); 30969 }); 30970 } 30971 return focusCells; 30972 }; 30973 const setupFocusGrid = () => { 30974 grid = []; 30975 if (props.showHeader) { 30976 const headerGrid = findHeaderFocusCells(); 30977 grid = grid.concat(headerGrid); 30978 setAriaColIndex(headerGrid); 30979 } 30980 grid = grid.concat(findBodyFocusCells()); 30981 const showSummary = table.store.states.showSummary; 30982 if (showSummary.value) { 30983 let footerCells = []; 30984 footerCells = footerCells.concat(findFocusCells(footerEl.querySelectorAll(selector.row)[0])); 30985 grid.push(footerCells); 30986 } 30987 }; 30988 const shouldResetFocusIndex = () => { 30989 if (!isValidCell(focusedRow, focusedCol, focusedZIndex)) { 30990 focusedRow = 0; 30991 focusedCol = 0; 30992 focusedZIndex = 0; 30993 } 30994 }; 30995 const setFocusPointer = (row, col, zIndex2) => { 30996 if (!isValidCell(row, col, zIndex2)) { 30997 /* istanbul ignore next @preserve */ 30998 return false; 30999 } 31000 const focusedCell = grid[focusedRow][focusedCol][focusedZIndex]; 31001 if (focusedCell) { 31002 focusedCell.setAttribute("tabindex", "-1"); 31003 } 31004 grid[row][col][zIndex2].setAttribute("tabindex", "0"); 31005 focusedRow = row; 31006 focusedCol = col; 31007 focusedZIndex = zIndex2; 31008 return true; 31009 }; 31010 const registerEvents = () => { 31011 clearEvents(); 31012 gridNode.addEventListener("keydown", checkFocusChange); 31013 gridNode.addEventListener("click", focusClickedCell); 31014 gridNode.addEventListener("focusin", checkFocusIn); 31015 }; 31016 const clearEvents = () => { 31017 gridNode == null ? void 0 : gridNode.removeEventListener("keydown", checkFocusChange); 31018 gridNode == null ? void 0 : gridNode.removeEventListener("click", focusClickedCell); 31019 gridNode == null ? void 0 : gridNode.removeEventListener("focusin", checkFocusIn); 31020 }; 31021 const checkFocusChange = (event) => { 31022 const code = event.code; 31023 let rowCaret = focusedRow;
31024 let colCaret = focusedCol; 31025 let zIndex2 = focusedZIndex; 31026 let nextCell; 31027 switch (code) { 31028 case EVENT_CODE.up: 31029 nextCell = getNextValidCell(0, -1); 31030 rowCaret = nextCell.row; 31031 colCaret = nextCell.col; 31032 zIndex2 = nextCell.zIndex; 31033 break; 31034 case EVENT_CODE.down: 31035 if (event.target === settingBtn) { 31036 const row = headerEl.querySelectorAll(selector.row).length; 31037 const col = grid[0].length - 2; 31038 focusCell(row, col, 0); 31039 event.preventDefault(); 31040 event.stopPropagation(); 31041 return; 31042 } 31043 nextCell = getNextValidCell(0, 1); 31044 rowCaret = nextCell.row; 31045 colCaret = nextCell.col; 31046 zIndex2 = nextCell.zIndex; 31047 break; 31048 case EVENT_CODE.left: 31049 if (event.target === settingBtn) { 31050 const col = grid[0].length - 2; 31051 focusCell(0, col, 0); 31052 event.preventDefault(); 31053 event.stopPropagation(); 31054 return; 31055 } 31056 nextCell = getNextValidCell(-1, 0); 31057 rowCaret = nextCell.row; 31058 colCaret = nextCell.col; 31059 zIndex2 = nextCell.zIndex; 31060 break; 31061 case EVENT_CODE.right: 31062 nextCell = getNextValidCell(1, 0); 31063 rowCaret = nextCell.row; 31064 colCaret = nextCell.col; 31065 zIndex2 = nextCell.zIndex; 31066 break; 31067 case EVENT_CODE.home: 31068 if (event.ctrlKey) { 31069 /* istanbul ignore next @preserve */ 31070 rowCaret = 0; 31071 } 31072 colCaret = 0; 31073 zIndex2 = 0; 31074 break; 31075 case EVENT_CODE.end: 31076 if (event.ctrlKey) { 31077 /* istanbul ignore next @preserve */ 31078 rowCaret = grid.length - 1; 31079 } 31080 colCaret = grid[focusedRow].length - 1; 31081 zIndex2 = 0; 31082 break; 31083 default: 31084 return; 31085 } 31086 focusCell(rowCaret, colCaret, zIndex2); 31087 adjust(grid[focusedRow][focusedCol][focusedZIndex]); 31088 event.preventDefault(); 31089 event.stopPropagation(); 31090 }; 31091 const checkFocusIn = (event) => { 31092 if (!isPerformingKeyboardAction()) { 31093 return; 31094 } 31095 if (!event.relatedTarget) { 31096 table.refs.root.repaint(); 31097 return; 31098 } 31099 if (!isInTable(event.relatedTarget, table)) { 31100 if (isValidCell(focusedRow, focusedCol, focusedZIndex)) { 31101 table.refs.root.repaint(); 31102 } 31103 } 31104 }; 31105 const focusCell = (row, col, zIndex2, preventScroll = false) => { 31106 if (setFocusPointer(row, col, zIndex2)) { 31107 grid[row][col][zIndex2].focus({ 31108 preventScroll 31109 }); 31110 } 31111 }; 31112 const getNextValidCell = (directionX, directionY) => { 31113 let nextCell = getNextCell(focusedRow, focusedCol, focusedZIndex, directionX, directionY); 31114 while (isEmptyCell(nextCell.row, nextCell.col)) { 31115 const currRow = nextCell.row; 31116 const currCol = nextCell.col; 31117 const zIndex2 = 0; 31118 nextCell = getNextCell(currRow, currCol, zIndex2, directionX, directionY); 31119 } 31120 while (isSameCell(nextCell.row, nextCell.col, nextCell.zIndex) || directionX !== 0 && nextCell.col !== focusedCol && isSameCellRoot(nextCell.row, nextCell.col, nextCell.zIndex)) { 31121 const currRow = nextCell.row; 31122 const currCol = nextCell.col; 31123 let zIndex2 = nextCell.zIndex; 31124 if (directionX === 0) { 31125 while (isSameCell(nextCell.row, nextCell.col, nextCell.zIndex) && !nextCell.ending) { 31126 nextCell = getNextCell(currRow, currCol, zIndex2, 1, 0, true); 31127 zIndex2 = nextCell.zIndex; 31128 } 31129 /* istanbul ignore next @preserve */ 31130 if (nextCell.ending) { 31131 nextCell.ending = false; 31132 nextCell = getNextCell(currRow, currCol, zIndex2, directionX, directionY); 31133 } 31134 } else { 31135 nextCell = getNextCell(currRow, currCol, zIndex2, directionX, directionY); 31136 } 31137 } 31138 return nextCell; 31139 }; 31140 const getNextCell = (currRow, currCol, currZIndex, directionX, directionY, isInCell = false) => { 31141 const currentCells = grid[currRow][currCol]; 31142 const row = currRow + directionY; 31143 let zIndex2 = currZIndex; 31144 let col = currCol; 31145 let ending = false; 31146 if (!currentCells) { 31147 return { 31148 row, 31149 col, 31150 zIndex: zIndex2, 31151 ending 31152 }; 31153 } 31154 if (currZIndex < currentCells.length - 1 && directionX > 0) { 31155 zIndex2++; 31156 } else if (currZIndex > 0 && directionX < 0) { 31157 zIndex2--; 31158 } else { 31159 /* istanbul ignore next @preserve */ 31160 if (isInCell) { 31161 ending = true; 31162 zIndex2 = 0; 31163 } else { 31164 col += directionX; 31165 if (directionX > 0) { 31166 zIndex2 = 0; 31167 } else if (directionX < 0) { 31168 if (isValidCell(row, col, 0)) { 31169 zIndex2 = grid[row][col].length - 1; 31170 } else { 31171 /* istanbul ignore next @preserve */ 31172 zIndex2 = 0; 31173 } 31174 } 31175 } 31176 } 31177 if (directionY !== 0) { 31178 zIndex2 = 0; 31179 } 31180 return { 31181 row, 31182 col, 31183 zIndex: zIndex2, 31184 ending 31185 }; 31186 }; 31187 const focusClickedCell = (event) => { 31188 const clickedGridCell = findClosest(event.target, selector.tabindex); 31189 if (!clickedGridCell) { 31190 return; 31191 } 31192 focusElement(clickedGridCell, true); 31193 }; 31194 const focusElement = (element, preventScroll = false) => { 31195 for (let row = 0; row < grid.length; row++) { 31196 for (let col = 0; col < grid[row].length; col++) { 31197 if (grid[row][col]) { 31198 for (let z = 0; z < grid[row][col].length; z++) { 31199 if (grid[row][col][z] === element) { 31200 focusCell(row, col, z, preventScroll); 31201 return; 31202 } 31203 } 31204 } 31205 } 31206 } 31207 }; 31208 const findClosest = (element, selector2) => { 31209 var _a; 31210 while (element && element.tagName !== "TD" && element.tagName !== "TH") { 31211 if ((_a = element.matches) == null ? void 0 : _a.call(element, selector2)) { 31212 return element; 31213 } 31214 element = element.parentNode; 31215 } 31216 return (element == null ? void 0 : element.getAttribute("tabindex")) ? element : element == null ? void 0 : element.querySelector(selector2); 31217 }; 31218 const isValidCell = (row, col, zIndex2) => { 31219 var _a; 31220 return row >= 0 && col >
31220= 0 && grid && grid.length && row < grid.length && col < grid[row].length && zIndex2 >= 0 && zIndex2 < ((_a = grid[row][col]) == null ? void 0 : _a.length); 31221 }; 31222 const isEmptyCell = (row, col) => { 31223 return row >= 0 && col >= 0 && grid && grid.length && row < grid.length && col < grid[row].length && (grid[row][col] === null || !grid[row][col].length); 31224 }; 31225 const isSameCell = (row, col, zIndex2) => { 31226 if (isValidCell(row, col, zIndex2)) { 31227 return grid[focusedRow][focusedCol][focusedZIndex] === grid[row][col][zIndex2]; 31228 } 31229 }; 31230 const isSameCellRoot = (row, col, zIndex2) => { 31231 if (!isValidCell(row, col, zIndex2)) { 31232 return false; 31233 } 31234 const current = grid[focusedRow][focusedCol][focusedZIndex]; 31235 const next = grid[row][col][zIndex2]; 31236 if (!current || !next) { 31237 return false; 31238 } 31239 return getTableCellRoot(current) === getTableCellRoot(next); 31240 }; 31241 const focus = (row = focusedRow, col = focusedCol, zIndex2 = focusedZIndex) => { 31242 focusCell(row, col, zIndex2); 31243 }; 31244 const resetAvailableFocused = () => { 31245 const el = bodyEl.querySelector(selector.row); 31246 const headerRowCount = props.showHeader ? headerEl.querySelectorAll(selector.row).length : 0; 31247 if (el) { 31248 const key = el.dataset.key; 31249 focusedRow = originData.value.findIndex((item) => { 31250 return getRowIdentity(item, props.rowKey) == key; 31251 }) + headerRowCount; 31252 focusedCol = 0; 31253 focusedZIndex = 0; 31254 if (!isValidCell(focusedRow, focusedCol, focusedZIndex)) { 31255 return; 31256 } 31257 /* istanbul ignore next @preserve */ 31258 buildA11y(); 31259 } else { 31260 shouldResetFocusIndex(); 31261 buildA11y(); 31262 } 31263 }; 31264 const buildA11y = function() { 31265 init(); 31266 resetTabIndex(); 31267 setupFocusGrid(); 31268 if (!isValidCell(focusedRow, focusedCol, focusedZIndex)) { 31269 resetAvailableFocused(); 31270 return false; 31271 } 31272 shouldResetFocusIndex(); 31273 setFocusPointer(focusedRow, focusedCol, focusedZIndex); 31274 registerEvents(); 31275 }; 31276 return { 31277 focus, 31278 focusElement, 31279 buildA11y, 31280 clearEvents 31281 }; 31282} 31283var __defProp$c = Object.defineProperty; 31284var __defProps$a = Object.defineProperties; 31285var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors; 31286var __getOwnPropSymbols$c = Object.getOwnPropertySymbols; 31287var __hasOwnProp$c = Object.prototype.hasOwnProperty; 31288var __propIsEnum$c = Object.prototype.propertyIsEnumerable; 31289var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 31290var __spreadValues$c = (a, b) => { 31291 for (var prop in b || (b = {})) 31292 if (__hasOwnProp$c.call(b, prop)) 31293 __defNormalProp$c(a, prop, b[prop]); 31294 if (__getOwnPropSymbols$c) 31295 for (var prop of __getOwnPropSymbols$c(b)) { 31296 if (__propIsEnum$c.call(b, prop)) 31297 __defNormalProp$c(a, prop, b[prop]); 31298 } 31299 return a; 31300}; 31301var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b)); 31302var __async$3 = (__this, __arguments, generator) => { 31303 return new Promise((resolve2, reject) => { 31304 var fulfilled = (value) => { 31305 try { 31306 step(generator.next(value)); 31307 } catch (e) { 31308 reject(e); 31309 } 31310 }; 31311 var rejected = (value) => { 31312 try { 31313 step(generator.throw(value)); 31314 } catch (e) { 31315 reject(e); 31316 } 31317 }; 31318 var step = (x) => x.done ? resolve2(x.value) : Promise.resolve(x.value).then(fulfilled, rejected); 31319 step((generator = generator.apply(__this, __arguments)).next()); 31320 }); 31321}; 31322const RENDER_DELAY = 50; 31323const indent = 32; 31324function useRender$1(props, layout, table, t) { 31325 const ns = useNamespace("virtual-table"); 31326 const store2 = table.store; 31327 const { onColumnsChange } = useLayoutObserver(); 31328 const root = ref(); 31329 const resizeState = ref({ 31330 width: null, 31331 height: null, 31332 innerHeight: null 31333 }); 31334 const tableWidth = ref(); 31335 const tableHeaderWidth = ref(); 31336 const emptyTDWidth = ref(); 31337 const loadingTDWidth = ref(); 31338 const isGroup = ref(false); 31339 const resizeProxyVisible = ref(false); 31340 const scrollVertically = ref(false); 31341 const headerCount = ref(0); 31342 const tableBodyStyles = computed(() => { 31343 const bodyWidth = layout.bodyWidth.value; 31344 return { 31345 width: `${bodyWidth}px` 31346 }; 31347 }); 31348 const isEmpty2 = computed(() => { 31349 var _a; 31350 return !((_a = store2.states.skeleton.value) == null ? void 0 : _a.loading) && store2.states.data.value.length === 0; 31351 }); 31352 const computedEmptyText = computed(() => { 31353 return props.emptyText || t("table.emptyText"); 31354 }); 31355 const computedSumText = computed(() => { 31356 return props.sumText || t("table.sumText"); 31357 }); 31358 const columns = computed(() => { 31359 return store2.states.columns.value.filter((column) => { 31360 return column.type !== "expand" || !props.forceExpand && props.showExpandIcon; 31361 }); 31362 }); 31363 const loading = computed(() => { 31364 return store2.states.data.value.length > 0 && props.pullup && scrollVertically.value; 31365 }); 31366 const innerLoading = computed(() => { 31367 return store2.states.loading.value; 31368 }); 31369 const syncSkeletonGridAriaHidden = () => { 31370 var _a, _b, _c, _d; 31371 const grid = (_c = (_b = (_a = root.value) == null ? void 0 : _a.$el) == null ? void 0 : _b.querySelector) == null ? void 0 : _c.call(_b, "table"); 31372 if (!grid) { 31373 return; 31374 } 31375 if ((_d = store2.states.skeleton.value) == null ? void 0 : _d.loading) { 31376 grid.setAttribute("aria-hidden", "true"); 31377 } else { 31378 grid.removeAttribute("aria-hidden"); 31379 } 31380 }; 31381 const computedData = computed({ 31382 get: () => { 31383 var _a; 31384 const data = store2.states.data.value; 31385 if (data.length === 0 && ((_a = props.skeleton) == null ? void 0 : _a.loading)) { 31386 return buildSkeleton(); 31387 } 31388 const { treeData, lazyTreeNodeMap, columns: columns2, childrenColumnName, rowKey } = store2.states; 31389 const hasExpandColumn = columns2.value.some(({ type }) => type === "expand"); 31390 if (hasExpandColumn) { 31391 const rows = []; 31392 for (let i = 0; i < data.length; i++) {
31393 const row = data[i]; 31394 rows.push(row); 31395 if (store2.isRowExpanded(row)) { 31396 rows.push(__spreadProps$a(__spreadValues$c({}, row), { 31397 __expand__: true 31398 })); 31399 } 31400 } 31401 return rows; 31402 } else if (Object.keys(treeData.value).length) { 31403 const rows = []; 31404 for (let i = 0; i < data.length; i++) { 31405 const row = data[i]; 31406 const key = getRowIdentity(row, rowKey.value); 31407 let cur = treeData.value[key]; 31408 let treeRowData = null; 31409 if (cur) { 31410 treeRowData = { 31411 expanded: cur.expanded, 31412 level: cur.level, 31413 display: true, 31414 noLazyChildren: false, 31415 loading: false, 31416 indent 31417 }; 31418 if (typeof cur.lazy === "boolean") { 31419 if (typeof cur.loaded === "boolean" && cur.loaded) { 31420 treeRowData.noLazyChildren = !(cur.children && cur.children.length); 31421 } 31422 treeRowData.loading = cur.loading; 31423 } 31424 } 31425 rows.push(__spreadProps$a(__spreadValues$c({}, row), { 31426 __tree__: treeRowData 31427 })); 31428 if (cur) { 31429 const traverse = (children, parent) => { 31430 if (!(children && children.length && parent)) { 31431 return; 31432 } 31433 children.forEach((node) => { 31434 const innerTreeRowData = { 31435 display: parent.display && parent.expanded, 31436 level: parent.level + 1, 31437 expanded: false, 31438 noLazyChildren: false, 31439 loading: false, 31440 indent 31441 }; 31442 const childKey = getRowIdentity(node, rowKey.value); 31443 if (childKey === void 0 || childKey === null) { 31444 /* istanbul ignore next @preserve */ 31445 throwError("ZmVirtualTable", "For nested data item, row-key is required."); 31446 } 31447 cur = __spreadValues$c({}, treeData.value[childKey]); 31448 if (cur) { 31449 innerTreeRowData.expanded = cur.expanded; 31450 cur.level = cur.level || innerTreeRowData.level; 31451 cur.display = !!(cur.expanded && innerTreeRowData.display); 31452 /* istanbul ignore next @preserve */ 31453 if (typeof cur.lazy === "boolean") { 31454 if (typeof cur.loaded === "boolean" && cur.loaded) { 31455 innerTreeRowData.noLazyChildren = !(cur.children && cur.children.length); 31456 } 31457 innerTreeRowData.loading = cur.loading; 31458 } 31459 } 31460 if (parent.display && parent.expanded) { 31461 rows.push(__spreadProps$a(__spreadValues$c({}, node), { 31462 __tree__: innerTreeRowData 31463 })); 31464 } 31465 if (cur) { 31466 const nodes2 = lazyTreeNodeMap.value[childKey] || node[childrenColumnName.value]; 31467 traverse(nodes2, cur); 31468 } 31469 }); 31470 }; 31471 cur.display = true; 31472 const nodes = lazyTreeNodeMap.value[key] || row[childrenColumnName.value]; 31473 traverse(nodes, cur); 31474 } 31475 } 31476 return rows; 31477 } 31478 return data; 31479 }, 31480 set: (val) => { 31481 store2.commit("setData", val); 31482 } 31483 }); 31484 const hasDraggableColumn = computed(() => { 31485 return store2.states.columns.value.some(({ type }) => type === "draggable"); 31486 }); 31487 const buildSkeleton = () => { 31488 const skeleton = store2.states.skeleton.value; 31489 const data = []; 31490 let len = skeleton.row; 31491 while (len--) { 31492 data.push([]); 31493 } 31494 return data; 31495 }; 31496 const syncPosition = () => { 31497 var _a, _b; 31498 if (!layout.scrollX.value) { 31499 const scrollingNoneClass = "is-scrolling-none"; 31500 if (!hasScrollClass(scrollingNoneClass)) { 31501 setScrollClass(scrollingNoneClass); 31502 } 31503 return; 31504 } 31505 const scrollContainer = (_b = (_a = root.value) == null ? void 0 : _a.scrollbarRef) == null ? void 0 : _b.wrapRef; 31506 const { scrollLeft, offsetWidth, scrollWidth }
31506 = scrollContainer; 31507 const maxScrollLeftPosition = scrollWidth - offsetWidth - 1; 31508 if (scrollLeft >= maxScrollLeftPosition) { 31509 setScrollClass("is-scrolling-right"); 31510 } else if (scrollLeft === 0) { 31511 setScrollClass("is-scrolling-left"); 31512 } else { 31513 setScrollClass("is-scrolling-middle"); 31514 } 31515 }; 31516 const hasScrollClass = (className) => { 31517 var _a; 31518 const tableWrapper = (_a = root.value) == null ? void 0 : _a.scrollbarRef.$el; 31519 return !!(tableWrapper && tableWrapper.classList.contains(className)); 31520 }; 31521 const emptyBlockStyle = computed(() => { 31522 const width = tableHeaderWidth.value; 31523 return { 31524 width: width ? `${width}px` : "" 31525 }; 31526 }); 31527 const loadingBlockStyle = computed(() => { 31528 const width = tableHeaderWidth.value; 31529 return { 31530 width: width ? `${width}px` : "" 31531 }; 31532 }); 31533 const emptyTDStyle = computed(() => { 31534 return { 31535 left: `${(tableWidth.value - emptyTDWidth.value) / 2}px` 31536 }; 31537 }); 31538 const loadingTDStyle = computed(() => { 31539 return { 31540 left: `${(tableWidth.value - loadingTDWidth.value) / 2}px` 31541 }; 31542 }); 31543 const hasSingleSelection = computed(() => { 31544 const columns2 = store2.states.columns.value; 31545 return columns2.some((item) => item.type === "single"); 31546 }); 31547 const hasMultiSelection = computed(() => { 31548 const columns2 = store2.states.columns.value; 31549 return columns2.some((item) => item.type === "selection"); 31550 }); 31551 const radio = computed({ 31552 get() { 31553 return store2.getSingle(); 31554 }, 31555 set(value) { 31556 store2.setSingle(value); 31557 } 31558 }); 31559 const handleRadioChange = (val) => { 31560 radio.value = val; 31561 }; 31562 const handleChange = () => __async$3(this, null, function* () { 31563 yield nextTick(); 31564 debouncedUpdateBuildA11y(); 31565 }); 31566 const handleBottomLoading = () => { 31567 if (props.pullup && props.data.length > 0) { 31568 table.emit("loading"); 31569 } 31570 }; 31571 const handleDragEnd = (e) => { 31572 table.emit("drag-end", e.list); 31573 }; 31574 const dragAriaDescribedbyText = computed(() => { 31575 const hasDraggableColumn2 = table.store.states.columns.value.some( 31576 ({ type }) => type === "draggable" 31577 ); 31578 if (hasDraggableColumn2) { 31579 return t("table.dragAndDropTip"); 31580 } 31581 return null; 31582 }); 31583 const dragAriaDescribedbyText2 = computed(() => { 31584 const hasDraggableColumn2 = table.store.states.columns.value.some( 31585 ({ type }) => type === "draggable" 31586 ); 31587 if (hasDraggableColumn2) { 31588 return t("table.grabbed"); 31589 } 31590 return null; 31591 }); 31592 const setScrollClass = (className) => { 31593 var _a, _b; 31594 setScrollClassByEl((_b = (_a = root.value) == null ? void 0 : _a.scrollbarRef) == null ? void 0 : _b.$el.querySelector("table"), className); 31595 }; 31596 const setScrollClassByEl = (el, className) => { 31597 if (!el) { 31598 /* istanbul ignore next @preserve */ 31599 return; 31600 } 31601 const classList = Array.from(el.classList).filter((item) => !item.startsWith("is-scrolling-")); 31602 classList.push(layout.scrollX.value ? className : "is-scrolling-none"); 31603 el.className = classList.join(" "); 31604 }; 31605 const doLayout = () => { 31606 var _a, _b; 31607 if (!root.value) { 31608 return; 31609 } 31610 layout.updateColumnsWidth(); 31611 layout.setHeight(props.height, (_a = root.value.scrollbarRef) == null ? void 0 : _a.wrapRef); 31612 if (!((_b = store2.states.skeleton.value) == null ? void 0 : _b.loading)) { 31613 debouncedUpdateBuildA11y(); 31614 } 31615 requestAnimationFrame(() => { 31616 var _a2, _b2, _c, _d, _e; 31617 syncPosition(); 31618 (_b2 = (_a2 = root.value) == null ? void 0 : _a2.scrollbarRef) == null ? void 0 : _b2.updateThumb(); 31619 scrollVertically.value = (_c = root.value) == null ? void 0 : _c.scrollbarRef.canScrollVertically(); 31620 loadingTDWidth.value = (_d = table.refs.loadingTD) == null ? void 0 : _d.offsetWidth; 31621 if (props.showHeader) { 31622 headerCount.value = (_e = table.refs.tableHeader.$el) == null ? void 0 : _e.querySelectorAll(`.${ns.e("append-row")}`).length; 31623 } 31624 }); 31625 }; 31626 const adjust = (el) => { 31627 var _a, _b, _c, _d, _e; 31628 (_b = (_a = root.value) == null ? void 0 : _a.scrollbarRef) == null ? void 0 : _b.scrollXIntoView(el, 300, tableWidth.value / 2); 31629 (_e = (_c = root.value) == null ? void 0 : _c.scrollbarRef) == null ? void 0 : _e.scrollYIntoView(el, 300, ((_d = table.vnode.el) == null ? void 0 : _d.offsetHeight) / 2); 31630 }; 31631 const { buildA11y, focus, clearEvents, focusElement } = useA11y$1(computedData, adjust, props); 31632 const debouncedUpdateLayout = debounce(doLayout, RENDER_DELAY); 31633 const debouncedUpdateBuildA11y = debounce(buildA11y, RENDER_DELAY); 31634 const bindEvents = () => { 31635 var _a, _b; 31636 useEventListener((_b = (_a = root.value) == null ? void 0 : _a.scrollbarRef) == null ? void 0 : _b.wrapRef, "scroll", syncPosition, { 31637 passive: true 31638 }); 31639 useResizeObserver(table.vnode.el, resizeListener); 31640 useResizeObserver(root.value.wrapRef, resizeListener); 31641 }; 31642 const resizeListener = () => { 31643 var _a; 31644 const el = root.value.$el; 31645 const innerEl = el.querySelector("table"); 31646 let shouldUpdateLayout = false;
31647 const { width: oldWidth, height: oldHeight, innerHeight: oldInnerHeight } = resizeState.value; 31648 const width = tableWidth.value = el.offsetWidth; 31649 if (oldWidth !== width) { 31650 shouldUpdateLayout = true; 31651 } 31652 const height = el.offsetHeight; 31653 if (oldHeight !== height) { 31654 shouldUpdateLayout = true; 31655 } 31656 const innerHeight = innerEl.offsetHeight; 31657 if (oldInnerHeight !== innerHeight) { 31658 shouldUpdateLayout = true; 31659 } 31660 if (props.showHeader) { 31661 tableHeaderWidth.value = table.refs.tableHeader.$el.offsetWidth; 31662 } 31663 emptyTDWidth.value = (_a = table.refs.emptyTD) == null ? void 0 : _a.offsetWidth; 31664 if (shouldUpdateLayout) { 31665 resizeState.value = { 31666 width, 31667 height, 31668 innerHeight 31669 }; 31670 doLayout(); 31671 } 31672 }; 31673 const setDragVisible = (visible) => { 31674 resizeProxyVisible.value = visible; 31675 }; 31676 const forceUpdate = () => { 31677 var _a; 31678 (_a = root.value) == null ? void 0 : _a.forceUpdate(); 31679 }; 31680 const scrollToOffset = (offset2) => { 31681 var _a; 31682 (_a = root.value) == null ? void 0 : _a.scrollToOffset(offset2); 31683 }; 31684 const scrollToKey = (key) => { 31685 var _a; 31686 (_a = root.value) == null ? void 0 : _a.scrollToKey(key); 31687 }; 31688 const scrollToBottom = () => { 31689 var _a; 31690 (_a = root.value) == null ? void 0 : _a.scrollToBottom(); 31691 }; 31692 const scrollToTop = () => { 31693 var _a; 31694 (_a = root.value) == null ? void 0 : _a.scrollToTop(); 31695 }; 31696 const getOffset2 = () => { 31697 var _a; 31698 return (_a = root.value) == null ? void 0 : _a.getOffset(); 31699 }; 31700 const updateMovableColumn = () => { 31701 table.store.updateMovableColumn(); 31702 }; 31703 const updateDisplayedColumns = () => { 31704 table.store.updateDisplayedColumns(); 31705 }; 31706 watchEffect(() => { 31707 if (props.expandRowKeys) { 31708 store2.setExpandRowKeysAdapter(props.expandRowKeys); 31709 } 31710 }); 31711 watchEffect(() => { 31712 if (typeof props.forceExpand === "object" && props.forceExpand.expandRowKeys) { 31713 store2.setExpandRowKeys(props.forceExpand.expandRowKeys); 31714 } 31715 }); 31716 watch( 31717 () => props.data, 31718 (newVal, oldVal) => { 31719 var _a; 31720 store2.commit("setData", newVal); 31721 if (!props.pullup && (newVal == null ? void 0 : newVal.length) !== (oldVal == null ? void 0 : oldVal.length)) { 31722 (_a = root.value) == null ? void 0 : _a.repaint(); 31723 } 31724 }, 31725 { 31726 immediate: true 31727 } 31728 ); 31729 watch( 31730 () => computedData.value, 31731 () => __async$3(this, null, function* () { 31732 var _a; 31733 yield nextTick(); 31734 if (!((_a = store2.states.skeleton.value) == null ? void 0 : _a.loading)) { 31735 buildA11y(); 31736 } 31737 }) 31738 ); 31739 watch( 31740 () => { 31741 var _a; 31742 return [(_a = store2.states.skeleton.value) == null ? void 0 : _a.loading, root.value]; 31743 }, 31744 () => { 31745 nextTick(syncSkeletonGridAriaHidden); 31746 }, 31747 { flush: "post" } 31748 ); 31749 watch( 31750 () => props.height, 31751 () => { 31752 doLayout(); 31753 } 31754 ); 31755 onMounted(() => { 31756 var _a, _b; 31757 const el = table.vnode.el; 31758 const innerEl = el.querySelector("table"); 31759 resizeState.value = { 31760 width: tableWidth.value = el.offsetWidth, 31761 height: el.offsetHeight, 31762 innerHeight: innerEl.offsetHeight 31763 }; 31764 if (props.showHeader) { 31765 tableHeaderWidth.value = table.refs.tableHeader.$el.offsetWidth; 31766 } 31767 emptyTDWidth.value = (_a = table.refs.emptyTD) == null ? void 0 : _a.offsetWidth; 31768 loadingTDWidth.value = (_b = table.refs.loadingTD) == null ? void 0 : _b.offsetWidth; 31769 store2.updateColumns(); 31770 bindEvents(); 31771 store2.states.columns.value.forEach((column) => { 31772 if (column.filteredValue && column.filteredValue.length) { 31773 store2.commit("filterChange", { 31774 column, 31775 values: column.filteredValue, 31776 silent: true 31777 }); 31778 } 31779 }); 31780 table.$ready = true; 31781 requestAnimationFrame(doLayout); 31782 nextTick(syncSkeletonGridAriaHidden); 31783 }); 31784 onUnmounted(() => { 31785 clearEvents(); 31786 }); 31787 return { 31788 root, 31789 onColumnsChange, 31790 resizeState, 31791 isGroup, 31792 hasDraggableColumn, 31793 radio, 31794 debouncedUpdateLayout, 31795 tableBodyStyles, 31796 columns, 31797 computedData, 31798 loading, 31799 loadingBlockStyle, 31800 loadingTDStyle, 31801 emptyBlockStyle, 31802 emptyTDStyle, 31803 isEmpty: isEmpty2, 31804 computedEmptyText, 31805 computedSumText, 31806 hasSingleSelection, 31807 hasMultiSelection, 31808 resizeProxyVisible, 31809 dragAriaDescribedbyText, 31810 dragAriaDescribedbyText2, 31811 tableHeaderWidth, 31812 innerLoading, 31813 headerCount, 31814 buildA11y, 31815 focus, 31816 focusElement, 31817 doLayout, 31818 setDragVisible, 31819 handleRadioChange, 31820 handleChange, 31821 handleBottomLoading, 31822 handleDragEnd,
31823 forceUpdate, 31824 scrollToOffset, 31825 scrollToKey, 31826 scrollToBottom, 31827 scrollToTop, 31828 getOffset: getOffset2, 31829 updateMovableColumn, 31830 updateDisplayedColumns 31831 }; 31832} 31833class TableLayout2 { 31834 constructor(options) { 31835 this.observers = []; 31836 this.table = options.table; 31837 this.store = options.store; 31838 this.height = ref(null); 31839 this.scrollX = ref(false); 31840 this.bodyWidth = ref(null); 31841 } 31842 setHeight(value, el) { 31843 value = parseHeight(value); 31844 this.height.value = Number(value); 31845 if (!el && (value || value === 0)) { 31846 return nextTick(() => this.setHeight(value, el)); 31847 } 31848 if (typeof value === "number") { 31849 el.style.maxHeight = `${value}px`; 31850 } else if (typeof value === "string") { 31851 el.style.maxHeight = value; 31852 } 31853 } 31854 getFlattenColumns() { 31855 const flattenColumns = []; 31856 const columns = this.table.store.states.columns.value.filter((column) => { 31857 return column.type !== "expand" || this.table.props.showExpandIcon; 31858 }); 31859 columns.forEach((column) => { 31860 flattenColumns.push(column); 31861 }); 31862 return flattenColumns; 31863 } 31864 updateColumnsWidth() { 31865 var _a; 31866 const bodyWidth = this.table.vnode.el.clientWidth; 31867 let bodyMinWidth = 0; 31868 const hasSettingsCol = !this.table.props.externalSetting && !!this.table.store.states.initDisplayedColumn.value && !((_a = this.table.store.states.skeleton.value) == null ? void 0 : _a.loading); 31869 const settingsColWidth = hasSettingsCol ? 1 : 0; 31870 const flattenColumns = this.getFlattenColumns(); 31871 const flexColumns = flattenColumns.filter((column) => typeof column.width !== "number"); 31872 flattenColumns.forEach((column) => { 31873 if (typeof column.width === "number" && column.realWidth) { 31874 column.realWidth = null; 31875 } 31876 }); 31877 if (flexColumns.length > 0) { 31878 flattenColumns.forEach((column) => { 31879 bodyMinWidth += Number(column.width || column.minWidth); 31880 }); 31881 bodyMinWidth += settingsColWidth; 31882 if (bodyMinWidth <= bodyWidth) { 31883 this.scrollX.value = false; 31884 const totalFlexWidth = bodyWidth - bodyMinWidth; 31885 if (flexColumns.length === 1) { 31886 flexColumns[0].realWidth = Number(flexColumns[0].minWidth) + totalFlexWidth; 31887 } else { 31888 const allColumnsWidth = flexColumns.reduce( 31889 (prev, column) => prev + Number(column.minWidth), 31890 0 31891 );
31892 const flexWidthPerPixel = totalFlexWidth / allColumnsWidth; 31893 let noneFirstWidth = 0; 31894 flexColumns.forEach((column, index2) => { 31895 if (index2 === 0) { 31896 return; 31897 } 31898 const flexWidth = Math.floor(Number(column.minWidth) * flexWidthPerPixel); 31899 noneFirstWidth += flexWidth; 31900 column.realWidth = Number(column.minWidth) + flexWidth; 31901 }); 31902 flexColumns[0].realWidth = Number(flexColumns[0].minWidth) + totalFlexWidth - noneFirstWidth; 31903 } 31904 } else { 31905 this.scrollX.value = true; 31906 flexColumns.forEach((column) => { 31907 column.realWidth = Number(column.minWidth); 31908 }); 31909 } 31910 this.bodyWidth.value = Math.max(bodyMinWidth, bodyWidth); 31911 this.table.state.resizeState.value.width = this.bodyWidth.value; 31912 } else { 31913 flattenColumns.forEach((column) => { 31914 column.realWidth = Number(column.width); 31915 bodyMinWidth += column.realWidth; 31916 }); 31917 bodyMinWidth += settingsColWidth; 31918 this.scrollX.value = bodyMinWidth > bodyWidth; 31919 this.bodyWidth.value = bodyMinWidth; 31920 } 31921 this.notifyObservers("columns"); 31922 } 31923 addObserver(observer) { 31924 this.observers.push(observer); 31925 } 31926 removeObserver(observer) { 31927 const index2 = this.observers.indexOf(observer); 31928 if (index2 !== -1) { 31929 this.observers.splice(index2, 1); 31930 } 31931 } 31932 notifyObservers(event) { 31933 const observers = this.observers; 31934 observers.forEach((observer) => { 31935 switch (event) { 31936 case "columns": 31937 observer.state.onColumnsChange(this); 31938 break; 31939 } 31940 }); 31941 } 31942} 31943function useUtils(table, radio) { 31944 const getSelectionRows = () => { 31945 return table.store.getSelectionRows(); 31946 }; 31947 const toggleRowSelection = (row, selected) => { 31948 table.store.toggleRowSelection(row, selected, false); 31949 table.store.updateAllSelected(); 31950 }; 31951 const clearSelection = () => { 31952 table.store.clearSelection(); 31953 }; 31954 const toggleAllSelection = () => { 31955 table.store.commit("toggleAllSelection"); 31956 }; 31957 const getSingleSelection = () => { 31958 return table.store.getSingleSelection(); 31959 }; 31960 const setSingleSelection = (row) => { 31961 const { data, treeData, rowKey } = table.store.states; 31962 const key = getRowIdentity(row, rowKey.value); 31963 const isTreeMode = Object.keys(treeData.value).length > 0; 31964 if (isTreeMode) { 31965 const treeRoot = data.value; 31966 const target = findRowByKey(treeRoot, key, rowKey.value); 31967 if (target) { 31968 radio.value = key; 31969 table.store.setSingleSelection(target); 31970 } 31971 } else { 31972 const target = data.value.find((item) => getRowIdentity(item, rowKey.value) === key); 31973 if (target) { 31974 radio.value = key; 31975 table.store.setSingleSelection(target); 31976 } 31977 } 31978 }; 31979 const clearSingleSelection = () => { 31980 radio.value = 0; 31981 table.store.clearSingleSelection(); 31982 }; 31983 const clearSort = () => { 31984 table.store.clearSort(); 31985 }; 31986 const sort2 = (prop, order) => { 31987 table.store.commit("sort", { prop, order }); 31988 }; 31989 const clearFilter = (columnKeys) => { 31990 table.store.clearFilter(columnKeys); 31991 }; 31992 const toggleRowExpansion = (row, expanded) => { 31993 table.store.toggleRowExpansion(row, expanded); 31994 }; 31995 const loadOrToggleTree = (row) => { 31996 table.store.loadOrToggle(row); 31997 }; 31998 return { 31999 getSelectionRows, 32000 toggleRowSelection, 32001 clearSelection, 32002 toggleAllSelection, 32003 getSingleSelection, 32004 setSingleSelection, 32005 clearSingleSelection, 32006 clearSort, 32007 sort: sort2, 32008 clearFilter, 32009 toggleRowExpansion, 32010 loadOrToggleTree 32011 }; 32012} 32013function useKeyRender(table) { 32014 const observer = ref(); 32015 const initWatchDom = () => { 32016 const el = table.vnode.el; 32017 const columnsWrapper = el.querySelector(".hidden-columns"); 32018 const config = { childList: true, subtree: true }; 32019 const updateOrderFns = table.store.states.updateOrderFns; 32020 observer.value = new MutationObserver(() => { 32021 updateOrderFns.forEach((fn) => fn()); 32022 }); 32023 observer.value.observe(columnsWrapper, config); 32024 }; 32025 onMounted(() => { 32026 initWatchDom(); 32027 }); 32028 onUnmounted(() => { 32029 var _a; 32030 (_a = observer.value) == null ? void 0 : _a.disconnect(); 32031 }); 32032} 32033var __defProp$b = Object.defineProperty; 32034var __defProps$9 = Object.defineProperties; 32035var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors; 32036var __getOwnPropSymbols$b = Object.getOwnPropertySymbols; 32037var __hasOwnProp$b = Object.prototype.hasOwnProperty; 32038var __propIsEnum$b = Object.prototype.propertyIsEnumerable; 32039var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 32040var __spreadValues$b = (a, b) => { 32041 for (var prop in b || (b = {})) 32042 if (__hasOwnProp$b.call(b, prop)) 32043 __defNormalProp$b(a, prop, b[prop]); 32044 if (__getOwnPropSymbols$b) 32045 for (var prop of __getOwnPropSymbols$b(b)) { 32046 if (__propIsEnum$b.call(b, prop)) 32047 __defNormalProp$b(a, prop, b[prop]); 32048 } 32049 return a; 32050}; 32051var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b)); 32052const _hoisted_1$6 = { 32053 ref: "hiddenColumns", 32054 class: "hidden-columns" 32055}; 32056const _hoisted_2$3 = ["data-testid"]; 32057const _hoisted_3$1 = ["data-testid"]; 32058const _sfc_main$7 = /* @__PURE__ */ defineComponent(__spreadProps$9(__spreadValues$b({}, { 32059 name: "ZmVirtualTable" 32060}), { 32061 __name: "table", 32062 props: defaultProps$3, 32063 emits: [ 32064 "loading", 32065 "display-columns-change", 32066 "confirm-columns-change", 32067 "select", 32068 "select-all", 32069 "selection-change", 32070 "single-selection-change",
32071 "sort-change", 32072 "filter-change", 32073 "expand-change", 32074 "header-dragend", 32075 "drag-end", 32076 "row-click", 32077 "row-contextmenu", 32078 "cell-mouse-enter", 32079 "cell-mouse-leave" 32080 ], 32081 setup(__props, { expose: __expose }) { 32082 const props = __props; 32083 const ns = useNamespace("virtual-table"); 32084 const mergedMessages = merge({}, messages$4, messages$a, messages$c); 32085 const { t } = useLocale(mergedMessages); 32086 const table = getCurrentInstance(); 32087 table.t = t; 32088 const dragAriaDescribedby = useId().value; 32089 const dragAriaDescribedby2 = useId().value; 32090 const store2 = createStore(table, props); 32091 table.store = store2; 32092 const layout = new TableLayout2({ 32093 table, 32094 store: table.store 32095 }); 32096 table.layout = layout; 32097 table.tableId = `${ns.namespace}-virtual-table_${getTableIdSeed()}`; 32098 table.dragAriaDescribedby = dragAriaDescribedby; 32099 table.dragAriaDescribedby2 = dragAriaDescribedby2; 32100 provide(Virtual_TABLE_INJECTION_KEY, table); 32101 const { 32102 root, 32103 onColumnsChange, 32104 resizeState, 32105 isGroup, 32106 hasDraggableColumn, 32107 radio, 32108 tableBodyStyles, 32109 columns, 32110 computedData, 32111 loading, 32112 loadingBlockStyle, 32113 loadingTDStyle, 32114 emptyBlockStyle, 32115 emptyTDStyle, 32116 isEmpty: isEmpty2, 32117 computedEmptyText, 32118 computedSumText, 32119 debouncedUpdateLayout, 32120 hasSingleSelection, 32121 hasMultiSelection, 32122 resizeProxyVisible, 32123 dragAriaDescribedbyText, 32124 dragAriaDescribedbyText2, 32125 tableHeaderWidth, 32126 innerLoading, 32127 headerCount, 32128 buildA11y, 32129 focus, 32130 focusElement, 32131 doLayout, 32132 setDragVisible, 32133 handleRadioChange, 32134 handleChange, 32135 handleBottomLoading, 32136 handleDragEnd, 32137 forceUpdate, 32138 scrollToOffset, 32139 scrollToKey, 32140 scrollToBottom, 32141 scrollToTop, 32142 getOffset: getOffset2, 32143 updateMovableColumn, 32144 updateDisplayedColumns 32145 } = useRender$1(props, layout, table, t); 32146 const { 32147 getSelectionRows, 32148 toggleRowSelection, 32149 clearSelection, 32150 toggleAllSelection, 32151 getSingleSelection, 32152 setSingleSelection, 32153 clearSingleSelection, 32154 clearSort, 32155 sort: sort2, 32156 clearFilter, 32157 toggleRowExpansion, 32158 loadOrToggleTree 32159 } = useUtils(table, radio); 32160 table.state = { 32161 root, 32162 isGroup, 32163 resizeState, 32164 doLayout, 32165 debouncedUpdateLayout, 32166 buildA11y, 32167 focus, 32168 tableHeaderWidth, 32169 headerCount, 32170 onColumnsChange, 32171 hasMultiSelection, 32172 hasSingleSelection 32173 }; 32174 useKeyRender(table); 32175 __expose({ 32176 root, 32177 // for e2e 32178 store: store2, 32179 context: table, 32180 clearSelection, 32181 getSelectionRows, 32182 toggleRowSelection, 32183 toggleAllSelection, 32184 clearSingleSelection, 32185 getSingleSelection, 32186 setSingleSelection, 32187 clearSort, 32188 sort: sort2, 32189 clearFilter, 32190 toggleRowExpansion, 32191 loadOrToggleTree, 32192 forceUpdate, 32193 getOffset: getOffset2, 32194 scrollToOffset, 32195 scrollToKey, 32196 scrollToTop, 32197 scrollToBottom, 32198 updateMovableColumn, 32199 updateDisplayedColumns, 32200 buildA11y, 32201 focusElement, 32202 table 32203 // for outside gear button 32204 }); 32205 return (_ctx, _cache) => { 32206 return withDirectives((openBlock(), createBlock(unref(ZmVirtualList), { 32207 ref_key: "root", 32208 ref: root, 32209 modelValue: unref(computedData), 32210 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(computedData) ? computedData.value = $event : null), 32211 "data-key": _ctx.rowKey, 32212 class: normalizeClass([ 32213 unref(ns).b(), 32214 { 32215 [unref(ns).m("span")]: !!_ctx.spanMethod || unref(isGroup), 32216 [unref(ns).m("border")]: !!_ctx.border 32217 } 32218 ]), 32219 "wrap-style": unref(tableBodyStyles), 32220 "table-mode": "", 32221 keeps: _ctx.keeps, 32222 "has-single-selection": unref(hasSingleSelection), 32223 radio: unref(radio), 32224 draggable: unref(hasDraggableColumn), 32225 "col-count": unref(columns).length, 32226 "always-scrollbar": _ctx.alwaysScrollbar, 32227 threshold: _ctx.threshold, 32228 "header-count": unref(headerCount), 32229 "show-summary": _ctx.showSummary, 32230 "aria-label": _ctx.ariaLabel, 32231 "aria-describedby": _ctx.ariaDescribedby, 32232 "test-id": _ctx.testId, 32233 onDrop: unref(handleDragEnd), 32234 onBottom: unref(handleBottomLoading), 32235 onRadioChange: unref(handleRadioChange), 32236 onRangeChange: unref(handleChange) 32237 }, { 32238 header: withCtx(() => [ 32239 createBaseVNode("div", _hoisted_1$6, [ 32240 renderSlot(_ctx.$slots, "default") 32241 ], 512), 32242 createVNode(unref(TableColgroup), { columns: unref(columns) }, null, 8, ["columns"]), 32243 _ctx.showHeader ? (openBlock(), createBlock(unref(TableHeader), { 32244 key: 0, 32245 ref: "tableHeader", 32246 "default-sort": _ctx.defaultSort, 32247 "external-setting": _ctx.externalSetting, 32248 "test-id": _ctx.testId, 32249 onSetDragVisible: unref(setDragVisible) 32250 }, null, 8, ["default-sort", "external-setting", "test-id", "onSetDragVisible"])) : createCommentVNode("", true) 32251 ]), 32252 item: withCtx(({ record, index: index2, expand, tree }) => [ 32253 createVNode(unref(TableRow), { 32254 row: record, 32255 index: index2, 32256 expand, 32257 tree, 32258 draggable: _ctx.draggable, 32259 "header-count": unref(headerCount) 32260 }, null, 8, ["row", "index", "expand", "tree", "draggable", "header-count"]) 32261 ]), 32262 footer: withCtx(() => [ 32263 unref(loading) ? (openBlock(), createElementBlock("tfoot", { 32264 key: 0, 32265 "data-testid": unref(buildTestId)(_ctx.testId, "-tfoot") 32266 }, [ 32267 createBaseVNode("tr", { 32268 role: "row", 32269 style: normalizeStyle(unref(loadingBlockStyle)), 32270 class: normalizeClass(unref(ns).e("loading")) 32271 }, [ 32272 createBaseVNode("td", { 32273 ref: "loadingTD", 32274 role: "gridcell", 32275 style: normalizeStyle(unref(loadingTDStyle)) 32276 }, [ 32277 createVNode(_sfc_main$12, { size: "md" }) 32278 ], 4)
32279 ], 6) 32280 ], 8, _hoisted_2$3)) : unref(isEmpty2) ? (openBlock(), createElementBlock("tfoot", { 32281 key: 1, 32282 "data-testid": unref(buildTestId)(_ctx.testId, "-tfoot") 32283 }, [ 32284 createBaseVNode("tr", { 32285 role: "row", 32286 style: normalizeStyle(unref(emptyBlockStyle)), 32287 class: normalizeClass(unref(ns).e("empty-block")) 32288 }, [ 32289 createBaseVNode("td", { 32290 ref: "emptyTD", 32291 role: "gridcell", 32292 class: normalizeClass(unref(ns).e("empty-text")), 32293 style: normalizeStyle(unref(emptyTDStyle)) 32294 }, [ 32295 renderSlot(_ctx.$slots, "empty", {}, () => [ 32296 createBaseVNode("span", { 32297 role: "alert", 32298 class: normalizeClass(unref(ns).e("empty-image")) 32299 }, toDisplayString(unref(computedEmptyText)), 3) 32300 ]) 32301 ], 6) 32302 ], 6) 32303 ], 8, _hoisted_3$1)) : _ctx.showSummary ? (openBlock(), createBlock(unref(TableFooter), { 32304 key: 2, 32305 "sum-text": unref(computedSumText), 32306 "summary-method": _ctx.summaryMethod, 32307 "header-count": unref(headerCount), 32308 "test-id": _ctx.testId 32309 }, null, 8, ["sum-text", "summary-method", "header-count", "test-id"])) : createCommentVNode("", true), 32310 withDirectives(createBaseVNode("div", { 32311 ref: "resizeProxy", 32312 class: normalizeClass(unref(ns).e("column-resize-proxy")) 32313 }, null, 2), [ 32314 [vShow, unref(resizeProxyVisible)] 32315 ]), 32316 unref(dragAriaDescribedbyText) ? (openBlock(), createBlock(unref(ZmVisuallyHidden), { 32317 key: 3, 32318 id: unref(dragAriaDescribedby) 32319 }, { 32320 default: withCtx(() => [ 32321 createTextVNode(toDisplayString(unref(dragAriaDescribedbyText)), 1) 32322 ]), 32323 _: 1 32324 }, 8, ["id"])) : createCommentVNode("", true), 32325 unref(dragAriaDescribedbyText2) ? (openBlock(), createBlock(unref(ZmVisuallyHidden), { 32326 key: 4, 32327 id: unref(dragAriaDescribedby2) 32328 }, { 32329 default: withCtx(() => [ 32330 createTextVNode(toDisplayString(unref(dragAriaDescribedbyText2)), 1) 32331 ]), 32332 _: 1 32333 }, 8, ["id"])) : createCommentVNode("", true) 32334 ]), 32335 _: 3 32336 }, 8, ["modelValue", "data-key", "class", "wrap-style", "keeps", "has-single-selection", "radio", "draggable", "col-count", "always-scrollbar", "threshold", "header-count", "show-summary", "aria-label", "aria-describedby", "test-id", "onDrop", "onBottom", "onRadioChange", "onRangeChange"])), [ 32337 [unref(ZmLoadingDirective), unref(innerLoading)] 32338 ]); 32339 }; 32340 } 32341})); 32342const align = ["center", "right"]; 32343const isValidAlignment = (val) => [...align].includes(val); 32344const defaultProps = { 32345 width: { 32346 type: [String, Number], 32347 default: "" 32348 }, 32349 minWidth: { 32350 type: [String, Number], 32351 default: 150 32352 }, 32353 prop: String, 32354 label: String, 32355 className: String, 32356 labelClassName: String, 32357 align: { 32358 type: String, 32359 validator: isValidAlignment 32360 }, 32361 headerAlign: { 32362 type: String, 32363 validator: isValidAlignment 32364 }, 32365 columnKey: String, 32366 fixed: [Boolean, String], 32367 type: { 32368 type: String, 32369 default: "default" 32370 }, 32371 reserveSelection: Boolean, 32372 selectable: Function, 32373 selectableHeader: Function, 32374 selectedColumnIndex: Number, 32375 singleSelectable: Function, 32376 sortable: [Boolean, String], 32377 sortMethod: Function, 32378 sortBy: [String, Function, Array], 32379 sortOrders: { 32380 type: Array, 32381 default: () => { 32382 return ["ascending", "descending", null]; 32383 }, 32384 validator: (val) => { 32385 return val.every((order) => ["ascending", "descending", null].includes(order)); 32386 } 32387 }, 32388 filters: Array, 32389 filterMethod: Function, 32390 filteredValue: Array, 32391 filterPlacement: String, 32392 needDisplay: { 32393 type: Boolean, 32394 default: true 32395 }, 32396 formatter: Function, 32397 showOverflowTooltip: Boolean, 32398 tooltipable: Function, 32399 tooltipPlacement: String,
32400 ariaLabel: String 32401}; 32402function useWatcher(owner, props) { 32403 const instance = getCurrentInstance(); 32404 const registerComplexWatchers = () => { 32405 const watchProps = ["fixed", "width", "minWidth"]; 32406 Object.values(watchProps).forEach((key) => { 32407 watch( 32408 () => props[key], 32409 (newVal) => { 32410 let value = newVal; 32411 if (key === "width" || key === "minWidth") { 32412 value = parseWidth(newVal); 32413 } 32414 instance.columnConfig.value[key] = value; 32415 const updateColumns = key === "fixed"; 32416 owner.store.scheduleLayout(updateColumns); 32417 } 32418 ); 32419 }); 32420 }; 32421 const registerNormalWatchers = () => { 32422 const watchProps = [ 32423 "label", 32424 "className", 32425 "labelClassName", 32426 "props", 32427 "sortable", 32428 "filters", 32429 "needDisplay", 32430 "formatter", 32431 "showOverflowTooltip", 32432 "selectedColumnIndex" 32433 ]; 32434 Object.values(watchProps).forEach((key) => { 32435 watch( 32436 () => props[key], 32437 (newVal) => { 32438 instance.columnConfig.value[key] = newVal; 32439 } 32440 ); 32441 }); 32442 }; 32443 return { 32444 registerComplexWatchers, 32445 registerNormalWatchers 32446 }; 32447} 32448const defaultClassNames = { 32449 draggable: "virtual-table__draggable-column", 32450 single: "virtual-table__single-column" 32451}; 32452function defaultRenderCell({ 32453 row, 32454 column, 32455 index: index2, 32456 t: tFromData 32457}) { 32458 const t = tFromData || useLocale({}, { useScope: "global" }).t; 32459 const prop = column.prop; 32460 const value = prop && getProp(row, prop).value; 32461 if (column.formatter) { 32462 return column.formatter(row, column, value, index2); 32463 } 32464 return (value == null ? void 0 : value.toString()) || h("span", { class: "label-empty" }, t("basic.blank")); 32465} 32466const cellStarts = { 32467 default: {}, 32468 selection: { 32469 width: 52, 32470 minWidth: 52, 32471 realWidth: 52 32472 }, 32473 single: { 32474 width: 52, 32475 minWidth: 52, 32476 realWidth: 52 32477 }, 32478 expand: { 32479 width: 56, 32480 minWidth: 56, 32481 realWidth: 56 32482 }, 32483 draggable: { 32484 width: 44, 32485 minWidth: 44, 32486 realWidth: 44 32487 } 32488}; 32489const getDefaultClassName = (type) => { 32490 return defaultClassNames[type] || ""; 32491}; 32492const getTableTestId = (store2) => { 32493 var _a; 32494 return (_a = store2.table) == null ? void 0 : _a.props.testId; 32495}; 32496const renderBlack = (scope) => { 32497 var _a; 32498 const t = (scope == null ? void 0 : scope.store) ? (_a = scope.store.table) == null ? void 0 : _a.t : void 0; 32499 const label = t ? t("basic.blank") : "â"; 32500 return h( 32501 "div", 32502 { 32503 class: "label-empty-wrapper", 32504 ariaLabel: label 32505 }, 32506 h( 32507 "span", 32508 { 32509 class: "label-empty" 32510 }, 32511 label 32512 ) 32513 ); 32514}; 32515const cellForced = { 32516 selection: { 32517 renderHeader({ column, store: store2 }) { 32518 var _a; 32519 const disabled = column.selectableHeader ? !column.selectableHeader.call(null) : store2.states.data && store2.states.data.value.length === 0; 32520 const t = (_a = store2.table) == null ? void 0 : _a.t; 32521 return h(_sfc_main$O, { 32522 disabled, 32523 ariaLabel: t ? t("basic.selectAll") : "Select all", 32524 testId: buildTestId(getTableTestId(store2), "-selection-checkbox-all"), 32525 indeterminate: store2.states.selection.value.length > 0 && !store2.states.isAllSelected.value, 32526 readMixed: true, 32527 "onUpdate:modelValue": store2.toggleAllSelection, 32528 modelValue: store2.states.isAllSelected.value 32529 }); 32530 }, 32531 renderCell({ 32532 row, 32533 column, 32534 store: store2, 32535 index: index2 32536 }) { 32537 const disabled = column.selectable ? !column.selectable.call(null, row, index2) : false; 32538 const tooltip = column.tooltipable ? column.tooltipable.call(null, row, index2) : false; 32539 const selectionCheckboxTestId = buildTestId( 32540 getTableTestId(store2), 32541 `-selection-checkbox-${getRowIdentity(row, store2.states.rowKey.value)}` 32542 ); 32543 return tooltip ? h( 32544 ZmInfoPopover, 32545 { 32546 content: tooltip, 32547 placement: column.tooltipPlacement, 32548 testId: buildTestId(selectionCheckboxTestId, "-popover") 32549 }, 32550 () => { 32551 return h(_sfc_main$O, { 32552 disabled, 32553 testId: selectionCheckboxTestId, 32554 "aria-label": getFirstColumnAriaLabel(0, row, index2 + 2, store2, column), 32555 onChange: () => { 32556 /* istanbul ignore next @preserve */ 32557 store2.commit("rowSelectedChanged", row); 32558 }, 32559 modelValue: store2.isSelected(row) 32560 }); 32561 } 32562 ) : h(_sfc_main$O, { 32563 disabled, 32564 testId: selectionCheckboxTestId, 32565 "aria-label": getFirstColumnAriaLabel(0, row, index2 + 2, store2, column), 32566 onChange: () => { 32567 store2.commit("rowSelectedChanged", row); 32568 }, 32569 modelValue: store2.isSelected(row) 32570 }); 32571 }, 32572 sortable: false, 32573 resizable: false 32574 }, 32575 single: { 32576 renderHeader(scope) { 32577 return renderSlot(scope.column.slots, "header", { column: scope.column }, () => [ 32578 renderBlack(scope) 32579 ]); 32580 }, 32581 renderCell({ 32582 row, 32583 column, 32584 store: store2, 32585 index: index2 32586 }) { 32587 const disabled = column.singleSelectable ? !column.singleSelectable.call(null, row, index2) : false;
32588 const tooltip = column.tooltipable ? column.tooltipable.call(null, row, index2) : false; 32589 const selectionRadioTestId = buildTestId( 32590 getTableTestId(store2), 32591 `-selection-radio-${getRowIdentity(row, store2.states.rowKey.value)}` 32592 ); 32593 return tooltip ? h( 32594 ZmInfoPopover, 32595 { 32596 content: tooltip, 32597 placement: column.tooltipPlacement, 32598 testId: buildTestId(selectionRadioTestId, "-popover") 32599 }, 32600 () => { 32601 return h( 32602 _sfc_main$Q, 32603 { 32604 disabled, 32605 key: index2, 32606 testId: selectionRadioTestId, 32607 label: getRowIdentity(row, store2.states.rowKey.value), 32608 "aria-label": getFirstColumnAriaLabel(0, row, index2 + 2, store2, column, isMac) 32609 }, 32610 () => { 32611 return h("span", " "); 32612 } 32613 ); 32614 } 32615 ) : h( 32616 _sfc_main$Q, 32617 { 32618 disabled, 32619 key: index2, 32620 testId: selectionRadioTestId, 32621 label: getRowIdentity(row, store2.states.rowKey.value), 32622 "aria-label": getFirstColumnAriaLabel(0, row, index2 + 2, store2, column, isMac) 32623 }, 32624 () => { 32625 return h("span", " "); 32626 } 32627 ); 32628 }, 32629 sortable: false, 32630 resizable: false 32631 }, 32632 expand: { 32633 renderHeader(scope) { 32634 return renderSlot(scope.column.slots, "header", { column: scope.column }, () => [ 32635 renderBlack(scope) 32636 ]); 32637 }, 32638 renderCell({ 32639 row, 32640 column, 32641 store: store2, 32642 expanded, 32643 index: index2 32644 }) { 32645 const { ns } = store2; 32646 const rowKeyVal = getRowIdentity(row, store2.states.rowKey.value); 32647 const isRTL = useRTL(); 32648 return h(_sfc_main$_, { 32649 icon: !isRTL.value ? ChevronRightV2 : ChevronLeftV2, 32650 type: "tertiary", 32651 size: "sm", 32652 testId: buildTestId(getTableTestId(store2), `-expand-chevron-${rowKeyVal}`), 32653 "aria-label": getFirstColumnAriaLabel(2, row, index2 + 2, store2, column), 32654 ariaExpanded: expanded, 32655 class: [ 32656 ns.e("expand-icon"), 32657 store2.isRowExpanded(row) ? ns.em("expand-icon", "expanded") : "", 32658 isAnimating(rowKeyVal) ? ns.em("expand-icon", "animating") : "" 32659 ], 32660 tabindex: "-1", 32661 onClick: () => { 32662 const expanded2 = store2.isRowExpanded(row); 32663 if (expanded2) { 32664 const tr = document.querySelector( 32665 `tr[data-key="expanded-row__${rowKeyVal}"] .${ns.e("expand-inner")}` 32666 ); 32667 animateCollapse(rowKeyVal, tr, () => { 32668 store2.toggleRowExpansion(row); 32669 }); 32670 } else { 32671 markManualExpand(rowKeyVal); 32672 store2.toggleRowExpansion(row); 32673 } 32674 } 32675 }); 32676 }, 32677 sortable: false, 32678 resizable: false 32679 }, 32680 draggable: { 32681 renderHeader({ column }) { 32682 return renderSlot(column.slots, "header", { column }, () => [renderBlack()]); 32683 }, 32684 renderCell({ 32685 row, 32686 store: store2, 32687 index: index2, 32688 column 32689 }) { 32690 const owner = inject(Virtual_TABLE_INJECTION_KEY); 32691 const { t } = useLocale({}, { useScope: "global" }); 32692 const data = store2.states.data.value.slice(); 32693 const handleKeyDown = (event) => { 32694 const code = event.code; 32695 const isEdit = data[index2].isEdit; 32696 const len = data.length; 32697 switch (code) { 32698 case EVENT_CODE.up: 32699 if (index2 > 0) { 32700 if (isEdit) { 32701 swap(data, index2, index2 - 1); 32702 store2.commit("setData", data); 32703 owner.emit("drag-end", data); 32704 announceMoved(index2 - 1); 32705 nextTick(() => { 32706 owner.state.focus(); 32707 }); 32708 } 32709 } 32710 event.preventDefault(); 32711 break; 32712 case EVENT_CODE.down: 32713 if (index2 < len - 1) { 32714 if (isEdit) { 32715 swap(data, index2, index2 + 1); 32716 store2.commit("setData", data); 32717 owner.emit("drag-end", data); 32718 announceMoved(index2 + 1); 32719 nextTick(() => { 32720 owner.state.focus(); 32721 }); 32722 } 32723 } 32724 event.preventDefault(); 32725 break;
32726 case EVENT_CODE.enter: 32727 case EVENT_CODE.numpadEnter: 32728 case EVENT_CODE.space: 32729 resetColumnListEdit(); 32730 data[index2].isEdit = !isEdit; 32731 announce(!isEdit ? t("table.grabbed") : t("table.dropped")); 32732 event.stopPropagation(); 32733 event.preventDefault(); 32734 break; 32735 } 32736 }; 32737 const handleFocus = (event) => { 32738 const node = event.relatedTarget; 32739 if (node && !isInTable(node, owner)) { 32740 const isEdit = data[index2].isEdit; 32741 announce(isEdit ? t("table.grabbed") : t("table.dropped")); 32742 } 32743 }; 32744 const resetColumnListEdit = () => { 32745 data.forEach((row2) => { 32746 row2.isEdit = false; 32747 }); 32748 }; 32749 const getDragIcon = (row2) => { 32750 return row2.isEdit ? Checkmark : DragHandleDots; 32751 }; 32752 const announceMoved = (index22) => { 32753 if (data[index22].isEdit) { 32754 announce(t("table.movePosition", { index: index22 + 1 })); 32755 } 32756 }; 32757 const getDescribedby = (row2) => { 32758 return row2.isEdit ? `${owner.dragAriaDescribedby2} ${owner.dragAriaDescribedby}` : owner.dragAriaDescribedby; 32759 }; 32760 return h(ZmInlineIconButton, { 32761 "aria-label": getFirstColumnAriaLabel(1, row, index2 + 2, store2, column), 32762 "aria-describedby": getDescribedby(row), 32763 icon: getDragIcon(row), 32764 tabindex: "-1", 32765 onKeydown: handleKeyDown, 32766 onFocus: handleFocus 32767 }); 32768 }, 32769 sortable: false, 32770 resizable: false 32771 } 32772}; 32773function treeCellPrefix({ 32774 row, 32775 treeNode, 32776 store: store2, 32777 index: index2, 32778 column 32779}) { 32780 const { ns } = store2; 32781 const vm = getCurrentInstance(); 32782 const isRTL = useRTL(); 32783 if (!treeNode) { 32784 const owner = inject(Virtual_TABLE_INJECTION_KEY); 32785 const colIndex = owner.state.hasMultiSelection.value || owner.state.hasSingleSelection.value ? 2 : 1; 32786 if (column.colIndex === colIndex) { 32787 return h( 32788 "div", 32789 { 32790 class: ns.e("expand-icon") 32791 }, 32792 h("span", { 32793 class: ns.e("indent-empty") 32794 }) 32795 ); 32796 } 32797 return null; 32798 } 32799 const ele = []; 32800 const callback = function(e) { 32801 if (treeNode.expanded) { 32802 const children = getVisibleDescendants(row, store2.getChildren, (child) => { 32803 var _a; 32804 const childKey = getRowIdentity(child, store2.states.rowKey.value); 32805 return (_a = store2.states.treeData.value[childKey]) == null ? void 0 : _a.expanded; 32806 }); 32807 children.forEach((child, index22) => { 32808 const childKey = getRowIdentity(child, store2.states.rowKey.value); 32809 const rowEl = document.querySelector(`tr[data-key="${childKey}"]`); 32810 animateTreeCollapse(childKey, rowEl, () => { 32811 if (index22 === 0) { 32812 store2.loadOrToggle(row); 32813 } 32814 }); 32815 nextTick(() => { 32816 var _a; 32817 (_a = vm == null ? void 0 : vm.proxy) == null ? void 0 : _a.$forceUpdate(); 32818 }); 32819 }); 32820 } else { 32821 const children = store2.getChildren(row); 32822 children.forEach((child) => { 32823 const childKey = getRowIdentity(child, store2.states.rowKey.value); 32824 markTreeRowInserted(childKey); 32825 }); 32826 store2.loadOrToggle(row); 32827 } 32828 e.stopPropagation(); 32829 }; 32830 if (treeNode.indent) { 32831 ele.push( 32832 h("span", { 32833 class: ns.e("indent"), 32834 style: { "padding-left": `${treeNode.indent}px` } 32835 }) 32836 ); 32837 } 32838 if (!treeNode.noLazyChildren) { 32839 const children = store2.getChildren(row); 32840 const currentRowKeyVal = getRowIdentity(row, store2.states.rowKey.value); 32841 let rowKeyVal; 32842 if (children.length) { 32843 rowKeyVal = getRowIdentity(children[0], store2.states.rowKey.value); 32844 } 32845 const expandClasses = [ 32846 ns.e("expand-icon"), 32847 treeNode.expanded ? ns.em("expand-icon", "expanded") : "", 32848 isCollapsing(rowKeyVal) ? ns.em("expand-icon", "animating") : "" 32849 ]; 32850 ele.push( 32851 h( 32852 "div", 32853 { 32854 class: expandClasses 32855 }, 32856 treeNode.loading ? h( 32857 "div", 32858 { 32859 class: { [ns.is("loading")]: treeNode.loading } 32860 }, 32861 h(_sfc_main$12) 32862 ) : typeof treeNode.expanded === "boolean" ? h(_sfc_main$_, { 32863 icon: !isRTL.value ? ChevronRightV2 : ChevronLeftV2, 32864 type: "tertiary", 32865 size: "sm", 32866 testId: buildTestId( 32867 getTableTestId(store2), 32868 `-tree-expand-chevron-${currentRowKeyVal}` 32869 ), 32870 tabindex: "-1", 32871 "aria-label": getFirstColumnAriaLabel( 32872 2, 32873 row, 32874 index2 + 2, 32875 store2, 32876 column, 32877 void 0, 32878 true 32879 ), 32880 ariaExpanded: treeNode.expanded, 32881 onClick: callback 32882 }) : h("span", { 32883 class: ns.e("indent-empty") 32884 }) 32885 ) 32886 ); 32887 } 32888 return ele; 32889} 32890var __defProp$a = Object.defineProperty; 32891var __defProps$8 = Object.defineProperties; 32892var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors; 32893var __getOwnPropSymbols$a = Object.getOwnPropertySymbols; 32894var __hasOwnProp$a = Object.prototype.hasOwnProperty; 32895var __propIsEnum$a = Object.prototype.propertyIsEnumerable; 32896var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 32897var __spreadValues$a = (a, b) => { 32898 for (var prop in b || (b = {})) 32899 if (__hasOwnProp$a.call(b, prop)) 32900 __defNormalProp$a(a, prop, b[prop]); 32901 if (__getOwnPropSymbols$a) 32902 for (var prop of __getOwnPropSymbols$a(b)) { 32903 if (__propIsEnum$a.call(b, prop)) 32904 __defNormalProp$a(a, prop, b[prop]); 32905 } 32906 return a; 32907}; 32908var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b)); 32909function useRender(owner, props, slots) { 32910 const instance = getCurrentInstance(); 32911 const ns = useNamespace("virtual-table");
32912 const t = owner.t || useLocale(messages$c).t; 32913 const columnId = ref(""); 32914 const realWidth = ref(parseWidth(props.width)); 32915 const realMinWidth = ref(parseWidth(props.minWidth)); 32916 const isSubColumn = ref(false); 32917 const realAlign = computed(() => { 32918 return props.align ? "is-" + props.align : null; 32919 }); 32920 const realHeaderAlign = computed(() => { 32921 return props.headerAlign ? "is-" + props.headerAlign : realAlign.value; 32922 }); 32923 const columnOrTableParent = computed(() => { 32924 let parent = instance.parent; 32925 while (parent && !parent.tableId && !parent.columnId) { 32926 parent = parent.parent; 32927 } 32928 return parent; 32929 }); 32930 const setColumnWidth = (column) => { 32931 if (column.type === "expand" && owner.props.forceExpand) { 32932 column.realWidth = column.minWidth = column.width = 0; 32933 return column; 32934 } 32935 if (!column.width && realWidth.value) { 32936 column.width = realWidth.value; 32937 } 32938 if (!column.minWidth && realMinWidth.value) { 32939 column.minWidth = realMinWidth.value; 32940 } 32941 column.realWidth = Number(!column.width ? column.minWidth : column.width); 32942 return column; 32943 }; 32944 /* istanbul ignore next @preserve */ 32945 const simpleEmptyRenderCell = () => { 32946 return h( 32947 "span", 32948 { 32949 class: ["text-wrapper", "label-empty-wrapper"] 32950 }, 32951 h("span", { class: "label-empty" }, t("basic.blank")) 32952 ); 32953 }; 32954 const getTabindex = (column) => { 32955 if (column.sortable || column.filters) { 32956 return "-1"; 32957 } 32958 return void 0; 32959 }; 32960 const setColumnRenders = (column) => { 32961 const originRenderCell = column.renderCell || defaultRenderCell; 32962 const notVnodeRenderCell = column.renderCell || simpleEmptyRenderCell; 32963 const renderSkeleton = (props2) => { 32964 return h("div", props2, [ 32965 h( 32966 ZmSkeleton, 32967 { 32968 animated: true 32969 }, 32970 { 32971 template: () => { 32972 return h(_sfc_main$n, { 32973 percent: SKELETON_PERCENT 32974 }); 32975 } 32976 } 32977 ) 32978 ]); 32979 }; 32980 if (!column.renderHeader) { 32981 column.renderHeader = (scope) => { 32982 const colIndex = owner.state.hasMultiSelection.value || owner.state.hasSingleSelection.value ? 2 : 1; 32983 const hasTreeFirstIndent = owner.store.states.hasTree.value && column.colIndex === colIndex; 32984 instance.columnConfig.value["label"]; 32985 return renderSlot(slots, "header", scope, () => [ 32986 hasTreeFirstIndent && h( 32987 "span", 32988 { 32989 style: { 32990 display: "inline-block", 32991 marginRight: "16px" 32992 } 32993 }, 32994 h("span", { 32995 class: ns.e("indent-empty") 32996 }) 32997 ), 32998 h( 32999 "span", 33000 { 33001 id: `${column.id}`, 33002 class: "label-wrapper", 33003 tabindex: getTabindex(column) 33004 }, 33005 [column.label] 33006 ) 33007 ]); 33008 }; 33009 } 33010 if (column.type === "expand") { 33011 column.renderCell = (data) => { 33012 var _a; 33013 const props2 = { 33014 class: "cell" 33015 }; 33016 if ((_a = owner.store.states.skeleton.value) == null ? void 0 : _a.loading) { 33017 return renderSkeleton(props2); 33018 } 33019 return h("div", props2, [originRenderCell(data)]); 33020 }; 33021 owner.renderExpanded = (data) => { 33022 return slots.default ? slots.default(data) : slots.default; 33023 }; 33024 } else { 33025 column.renderCell = (data) => { 33026 var _a; 33027 const hasTree = owner.store.states.hasTree.value; 33028 const cellT = data.t || owner.t || t; 33029 const props2 = { 33030 class: "cell" 33031 }; 33032 if ((_a = owner.store.states.skeleton.value) == null ? void 0 : _a.loading) { 33033 return renderSkeleton(props2); 33034 } 33035 let children; 33036 if (slots.default) { 33037 const vnodes = slots.default(data); 33038 const vnodesWithKey = vnodes.map((vnode, index2) => { 33039 if (vnode.type !== Comment) { 33040 const key = `${column.id}-${data.index || 0}-${index2}`; 33041 return __spreadProps$8(__spreadValues$a({}, vnode), { 33042 key, 33043 // Ensure props object exists 33044 props: __spreadProps$8(__spreadValues$a({}, vnode.props), { 33045 key 33046 }) 33047 }); 33048 } 33049 return vnode; 33050 }); 33051 children = vnodesWithKey.some((v) => v.type !== Comment) ? vnodesWithKey : notVnodeRenderCell(data); 33052 } else { 33053 const prop = column.prop; 33054 const value = prop && getProp(data.row, prop).value; 33055 const props3 = column.type !== "selection" && column.type !== "draggable" && column.type !== "single" ? { 33056 class: ["text-wrapper", isEmpty2(data, value) ? "label-empty-wrapper" : ""], 33057 ariaLabel: isEmpty2(data, value) ? cellT("basic.blank") : null, 33058 tabindex: hasTree ? "-1" : void 0 33059 } : { 33060 class: "flex-wrapper" 33061 }; 33062 children = h("span", props3, originRenderCell(data)); 33063 } 33064 const prefix = hasTree ? treeCellPrefix(data) : null; 33065 if (column.showOverflowTooltip) { 33066 props2.class = `${props2.class} ${unref(ns.e("tooltip"))}`; 33067 props2.style = { width: `${data.column.realWidth}px` }; 33068 const toolTipRef = ref(); 33069 debounce(renderTooltip, TRANSITION_DELAY)(data, toolTipRef); 33070 if (owner.store.shouldRenderTooltip(data)) { 33071 return h( 33072 ZmTooltip, 33073 { 33074 ref: toolTipRef, 33075 placement: "top", 33076 content: originRenderCell(data),
33077 arrow: false, 33078 "disallow-screen-reader": true, 33079 "is-mutually-exclusive": true 33080 }, 33081 () => { 33082 return h("div", props2, [prefix, children]); 33083 } 33084 ); 33085 } 33086 } 33087 return h("div", props2, [prefix, children]); 33088 }; 33089 } 33090 return column; 33091 }; 33092 const isEmpty2 = ({ 33093 row, 33094 column, 33095 index: index2 33096 }, value) => { 33097 if (column.formatter) { 33098 return !column.formatter(row, column, value, index2); 33099 } 33100 return isNil(value) || value.toString().trim() === ""; 33101 }; 33102 const renderTooltip = (data, toolTipRef) => { 33103 owner.store.renderTooltip(data, toolTipRef.value); 33104 }; 33105 const setColumnForcedProps = (column) => { 33106 column.resizable = owner.store.states.adjustColumn.value; 33107 const type = column.type; 33108 const source = cellForced[type] || {}; 33109 Object.keys(source).forEach((prop) => { 33110 column[prop] = source[prop]; 33111 }); 33112 const className = getDefaultClassName(type); 33113 if (className) { 33114 const forceClass = `${unref(ns.namespace)}-${className}`; 33115 column.className = column.className ? `${column.className} ${forceClass}` : forceClass; 33116 } 33117 return column; 33118 }; 33119 const getPropsData = (...propsKey) => { 33120 return propsKey.reduce((prev, cur) => { 33121 if (Array.isArray(cur)) { 33122 cur.forEach((key) => { 33123 prev[key] = props[key]; 33124 }); 33125 } 33126 return prev; 33127 }, {}); 33128 }; 33129 const getColumnElIndex = (children, child) => { 33130 return Array.prototype.indexOf.call(children, child); 33131 }; 33132 const updateColumnOrder = () => { 33133 owner.store.commit("updateColumnOrder", instance.columnConfig.value); 33134 }; 33135 return { 33136 columnId, 33137 realAlign, 33138 realHeaderAlign, 33139 isSubColumn, 33140 columnOrTableParent, 33141 setColumnWidth, 33142 setColumnRenders, 33143 setColumnForcedProps, 33144 getPropsData, 33145 getColumnElIndex, 33146 updateColumnOrder 33147 }; 33148} 33149var __defProp$9 = Object.defineProperty; 33150var __defProps$7 = Object.defineProperties; 33151var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors; 33152var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols; 33153var __hasOwnProp$9 = Object.prototype.hasOwnProperty; 33154var __propIsEnum$9 = Object.prototype.propertyIsEnumerable; 33155var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 33156var __spreadValues$9 = (a, b) => { 33157 for (var prop in b || (b = {})) 33158 if (__hasOwnProp$9.call(b, prop)) 33159 __defNormalProp$9(a, prop, b[prop]); 33160 if (__getOwnPropSymbols$9) 33161 for (var prop of __getOwnPropSymbols$9(b)) { 33162 if (__propIsEnum$9.call(b, prop)) 33163 __defNormalProp$9(a, prop, b[prop]); 33164 } 33165 return a; 33166}; 33167var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b)); 33168let columnIdSeed = 1; 33169const VirtualTableColumn = defineComponent({ 33170 name: "ZmVirtualTableColumn", 33171 props: defaultProps, 33172 setup(props, { slots }) { 33173 const instance = getCurrentInstance(); 33174 const columnConfig = ref({}); 33175 const owner = inject(Virtual_TABLE_INJECTION_KEY); 33176 const { registerNormalWatchers, registerComplexWatchers } = useWatcher(owner, props); 33177 registerNormalWatchers(); 33178 registerComplexWatchers(); 33179 const { 33180 columnId, 33181 realAlign, 33182 realHeaderAlign, 33183 isSubColumn, 33184 setColumnWidth, 33185 setColumnRenders, 33186 setColumnForcedProps, 33187 getPropsData, 33188 getColumnElIndex, 33189 updateColumnOrder, 33190 columnOrTableParent 33191 } = useRender(owner, props, slots); 33192 const parent = columnOrTableParent.value; 33193 columnId.value = `${parent.tableId || parent.columnId}_column_${columnIdSeed++}`; 33194 isSubColumn.value = owner !== parent; 33195 const type = props.type || "default"; 33196 const defaults = __spreadProps$7(__spreadValues$9({}, cellStarts[type]), { 33197 id: columnId.value, 33198 align: realAlign, 33199 headerAlign: realHeaderAlign, 33200 isSubColumn: false, 33201 type 33202 }); 33203 const basicProps = [ 33204 "prop", 33205 "columnKey", 33206 "label", 33207 "className", 33208 "labelClassName", 33209 "fixed", 33210 "type", 33211 "resizable", 33212 "needDisplay", 33213 "formatter", 33214 "showOverflowTooltip", 33215 "ariaLabel" 33216 ]; 33217 const selectProps2 = [ 33218 "selectable", 33219 "reserveSelection", 33220 "selectableHeader", 33221 "selectedColumnIndex", 33222 "singleSelectable", 33223 "tooltipable", 33224 "tooltipPlacement" 33225 ]; 33226 const sortProps = ["sortable", "sortMethod", "sortBy", "sortOrders"]; 33227 const filterProps = ["filterMethod", "filters", "filteredValue", "filterPlacement"];
33228 let column = getPropsData(basicProps, selectProps2, sortProps, filterProps); 33229 column = mergeOptions(defaults, column); 33230 const chains = compose(setColumnRenders, setColumnWidth, setColumnForcedProps); 33231 column = chains(column); 33232 columnConfig.value = column; 33233 column.slots = slots; 33234 onMounted(() => { 33235 var _a; 33236 const children = isSubColumn.value ? parent.vnode.el.children : (_a = parent.refs.hiddenColumns) == null ? void 0 : _a.children; 33237 const getColumnIndex = () => getColumnElIndex(children || [], instance.vnode.el); 33238 columnConfig.value.getColumnIndex = getColumnIndex; 33239 const columnIndex = getColumnIndex(); 33240 columnIndex > -1 && owner.store.commit( 33241 "insertColumn", 33242 columnConfig.value, 33243 isSubColumn.value ? parent.columnConfig.value : null, 33244 updateColumnOrder 33245 ); 33246 }); 33247 onBeforeUnmount(() => { 33248 const columnIndex = columnConfig.value.getColumnIndex(); 33249 columnIndex > -1 && owner.store.commit( 33250 "removeColumn", 33251 columnConfig.value, 33252 isSubColumn.value ? parent.columnConfig.value : null, 33253 updateColumnOrder 33254 ); 33255 }); 33256 instance.columnId = columnId.value; 33257 instance.columnConfig = columnConfig; 33258 return () => { 33259 var _a, _b; 33260 try { 33261 const renderDefault = (_a = slots.default) == null ? void 0 : _a.call(slots, { 33262 row: {}, 33263 column: {}, 33264 index: -1 33265 }); 33266 const children = []; 33267 if (isArray(renderDefault)) { 33268 for (const childNode of renderDefault) { 33269 if (((_b = childNode.type) == null ? void 0 : _b.name) === "ZmVirtualTableColumn" || childNode.shapeFlag & 2) { 33270 children.push(childNode); 33271 } else if (childNode.type === Fragment && isArray(childNode.children)) { 33272 childNode.children.forEach((vnode2) => { 33273 var _a2; 33274 if ((vnode2 == null ? void 0 : vnode2.patchFlag) !== 1024 && !isString(vnode2 == null ? void 0 : vnode2.children) && (((_a2 = vnode2.type) == null ? void 0 : _a2.name) === "ZmVirtualTableColumn" || vnode2.shapeFlag & 2)) { 33275 children.push(vnode2); 33276 } 33277 }); 33278 } 33279 } 33280 } 33281 const vnode = h("div", children); 33282 return vnode; 33283 } catch (e) { 33284 /* istanbul ignore next @preserve */ 33285 return h("div", []); 33286 } 33287 }; 33288 } 33289}); 33290withInstall(_sfc_main$7, { 33291 VirtualTableColumn, 33292 VirtualColumnPanel: _sfc_main$8 33293}); 33294const messages$1 = { 33295 "en-US": { 33296 "banner": { 33297 "close": "Dismiss banner message" 33298 } 33299 }, 33300 "de-DE": { 33301 "banner": { 33302 "close": "Bannernachricht verwerfen" 33303 } 33304 }, 33305 "es-ES": { 33306 "banner": { 33307 "close": "Descartar mensaje de banner" 33308 } 33309 }, 33310 "fr-FR": { 33311 "banner": { 33312 "close": "Annuler le message de la bannière" 33313 } 33314 }, 33315 "id-ID": { 33316 "banner": { 33317 "close": "Tolak pesan spanduk" 33318 } 33319 }, 33320 "it-IT": { 33321 "banner": { 33322 "close": "Ignora messaggio banner" 33323 } 33324 }, 33325 "jp-JP": { 33326 "banner": { 33327 "close": "ããã¼ ã¡ãã»ã¼ã¸ãéãã" 33328 } 33329 }, 33330 "ko-KO": { 33331 "banner": { 33332 "close": "ë°°ë ë©ìì§ ë«ê¸°" 33333 } 33334 }, 33335 "nl-NL": { 33336 "banner": { 33337 "close": "Bannerbericht sluiten" 33338 } 33339 }, 33340 "pl-PL": { 33341 "banner": { 33342 "close": "OdrzuÄ komunikat banerowy" 33343 } 33344 }, 33345 "pt-PT": { 33346 "banner": { 33347 "close": "Ignorar mensagem de banner" 33348 } 33349 }, 33350 "ru-RU": { 33351 "banner": { 33352 "close": "ÐÑклониÑÑ ÑообÑение в баннеÑе" 33353 } 33354 }, 33355 "sv-SE": { 33356 "banner": { 33357 "close": "Avvisa banderollmeddelande" 33358 } 33359 }, 33360 "tr-TR": { 33361 "banner": { 33362 "close": "Banner mesajını iptal et" 33363 } 33364 }, 33365 "vi-VN": { 33366 "banner": { 33367 "close": "Bá» qua tin nhắn biá»u ngữ" 33368 } 33369 }, 33370 "zh-CN": { 33371 "banner": { 33372 "close": "å ³éæ¨ªå¹ æ¶æ¯" 33373 } 33374 }, 33375 "zh-TW": { 33376 "banner": { 33377 "close": "ééæ©«å¹ è¨æ¯" 33378 } 33379 } 33380}; 33381var __defProp$8 = Object.defineProperty; 33382var __defProps$6 = Object.defineProperties; 33383var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors; 33384var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols; 33385var __hasOwnProp$8 = Object.prototype.hasOwnProperty; 33386var __propIsEnum$8 = Object.prototype.propertyIsEnumerable; 33387var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 33388var __spreadValues$8 = (a, b) => { 33389 for (var prop in b || (b = {})) 33390 if (__hasOwnProp$8.call(b, prop)) 33391 __defNormalProp$8(a, prop, b[prop]); 33392 if (__getOwnPropSymbols$8) 33393 for (var prop of __getOwnPropSymbols$8(b)) { 33394 if (__propIsEnum$8.call(b, prop)) 33395 __defNormalProp$8(a, prop, b[prop]); 33396 } 33397 return a; 33398}; 33399var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b)); 33400const bannerProps = { 33401 title: { 33402 type: String, 33403 default: "" 33404 }, 33405 type: { 33406 type: String, 33407 default: "info" 33408 }, 33409 content: { 33410 type: String, 33411 default: "" 33412 }, 33413 testId: String, 33414 showClose: Boolean, 33415 role: String, 33416 icon: { 33417 type: Object 33418 }, 33419 rounded: { 33420 type: Boolean, 33421 default: true 33422 }, 33423 disallowScreenReader: Boolean 33424}; 33425const bannerEmits = { 33426 close: (evt) => evt instanceof MouseEvent 33427}; 33428const _hoisted_1$5 = ["role", "data-testid"]; 33429const _sfc_main$6 = /* @__PURE__ */ defineComponent(__spreadProps$6(__spreadValues$8({}, { 33430 name: "ZmBanner" 33431}), { 33432 __name: "banner", 33433 props: bannerProps, 33434 emits: bannerEmits, 33435 setup(__props, { expose: __expose, emit: __emit }) { 33436 const props = __props; 33437 const emit = __emit; 33438 const ns = useNamespace("banner"); 33439 const { t } = useLocale(messages$1); 33440 const visible = ref(true); 33441 const ariaRole = computed(() => { 33442 const { role, type, disallowScreenReader } = props; 33443 if (disallowScreenReader) 33444 return void 0; 33445 if (role) 33446 return role; 33447 return type === "info" ? void 0 : "alert"; 33448 }); 33449 const bannerRef = ref(); 33450 const actionSlotMoveToBottom = ref(false); 33451 useResizeObserver(bannerRef, () => { 33452 if (bannerRef.value) { 33453 actionSlotMoveToBottom.value = bannerRef.value.offsetWidth <= 246; 33454 } 33455 }); 33456 const closeBtnClickHandler = (evt) => { 33457 close(); 33458 emit("close", evt); 33459 }; 33460 const close = () => { 33461 visible.value = false;
33462 }; 33463 __expose({ 33464 close 33465 }); 33466 return (_ctx, _cache) => { 33467 return openBlock(), createBlock(Transition, { 33468 name: unref(ns).b("fade") 33469 }, { 33470 default: withCtx(() => [ 33471 withDirectives(createBaseVNode("div", { 33472 ref_key: "bannerRef", 33473 ref: bannerRef, 33474 class: normalizeClass([ 33475 unref(ns).b(), 33476 unref(ns).m(_ctx.type), 33477 unref(ns).is("bleed", !_ctx.rounded), 33478 unref(ns).is("closable", _ctx.showClose), 33479 unref(ns).is("custom", !!_ctx.icon) 33480 ]), 33481 role: ariaRole.value, 33482 "data-testid": _ctx.testId 33483 }, [ 33484 createBaseVNode("div", { 33485 class: normalizeClass(unref(ns).e("main")) 33486 }, [ 33487 createVNode(unref(ZmStatusIcon), { 33488 class: normalizeClass(unref(ns).e("icon")), 33489 type: _ctx.type, 33490 icon: _ctx.icon 33491 }, null, 8, ["class", "type", "icon"]), 33492 createBaseVNode("div", { 33493 class: normalizeClass(unref(ns).e("body")) 33494 }, [ 33495 _ctx.title ? (openBlock(), createElementBlock("div", { 33496 key: 0, 33497 class: normalizeClass(unref(ns).e("title")) 33498 }, toDisplayString(_ctx.title), 3)) : createCommentVNode("", true), 33499 _ctx.$slots.default || _ctx.content ? (openBlock(), createElementBlock("div", { 33500 key: 1, 33501 class: normalizeClass([unref(ns).e("content"), unref(ns).is("gapped", !!_ctx.title)]) 33502 }, [ 33503 renderSlot(_ctx.$slots, "default", {}, () => [ 33504 createTextVNode(toDisplayString(_ctx.content), 1) 33505 ]) 33506 ], 2)) : createCommentVNode("", true), 33507 _ctx.$slots.action && actionSlotMoveToBottom.value ? (openBlock(), createElementBlock("div", { 33508 key: 2, 33509 class: normalizeClass(unref(ns).e("actionable-bottom")) 33510 }, [ 33511 renderSlot(_ctx.$slots, "action") 33512 ], 2)) : createCommentVNode("", true) 33513 ], 2), 33514 _ctx.$slots.action && !actionSlotMoveToBottom.value ? (openBlock(), createElementBlock("div", { 33515 key: 0, 33516 class: normalizeClass([unref(ns).e("actionable"), unref(ns).is("closable", _ctx.showClose)]) 33517 }, [ 33518 renderSlot(_ctx.$slots, "action") 33519 ], 2)) : createCommentVNode("", true), 33520 _ctx.showClose ? (openBlock(), createBlock(unref(ZmButton), { 33521 key: 1, 33522 class: normalizeClass(unref(ns).m("closable")), 33523 size: "sm", 33524 type: "tertiary", 33525 icon: unref(Close), 33526 "test-id": unref(buildTestId)(_ctx.testId, "-close"), 33527 "aria-label": unref(t)("banner.close"), 33528 onClick: closeBtnClickHandler 33529 }, null, 8, ["class", "icon", "test-id", "aria-label"])) : createCommentVNode("", true) 33530 ], 2) 33531 ], 10, _hoisted_1$5), [ 33532 [vShow, visible.value] 33533 ]) 33534 ]), 33535 _: 3 33536 }, 8, ["name"]); 33537 }; 33538 } 33539})); 33540const ZmBanner = withInstall(_sfc_main$6); 33541const useDialog = (props, targetRef, afterDialogOpen, beforeDialogClose, shouldLockScroll) => { 33542 const instance = getCurrentInstance(); 33543 const emit = instance.emit; 33544 const { nextZIndex } = useOverlayZIndex(); 33545 const titleId = useId(); 33546 const contentId = useId(); 33547 const visible = ref(false); 33548 const closed = ref(false); 33549 const rendered = ref(false); 33550 const zIndex2 = ref(props.zIndex || nextZIndex()); 33551 const style = computed(() => { 33552 const ret = { 33553 width: props.width 33554 }; 33555 return ret; 33556 }); 33557 if (shouldLockScroll) { 33558 useLockscreen(visible); 33559 } 33560 function afterEnter() { 33561 emit("opened"); 33562 } 33563 function beforeEnter() { 33564 emit("open"); 33565 } 33566 function afterLeave() { 33567 emit("closed"); 33568 emit("update:modelValue", false); 33569 } 33570 function beforeLeave() { 33571 emit("close"); 33572 beforeDialogClose && beforeDialogClose(); 33573 } 33574 function handleClose(reason) { 33575 function hide2(stoppable) { 33576 if (stoppable) 33577 return; 33578 closed.value = true; 33579 visible.value = false;
33580 } 33581 if (props.beforeClose) { 33582 props.beforeClose(hide2, isString(reason) ? reason : void 0); 33583 } else { 33584 close(); 33585 } 33586 } 33587 function onModalClick() { 33588 if (props.closeOnClickModal) { 33589 handleClose(); 33590 } 33591 } 33592 function open() { 33593 visible.value = true; 33594 } 33595 function close() { 33596 visible.value = false; 33597 } 33598 function onCloseRequested() { 33599 if (props.closeOnPressEscape) { 33600 handleClose("esc"); 33601 } 33602 } 33603 watch( 33604 () => props.modelValue, 33605 (val) => { 33606 if (val) { 33607 closed.value = false; 33608 open(); 33609 rendered.value = true; 33610 zIndex2.value = props.zIndex ? zIndex2.value++ : nextZIndex(); 33611 nextTick(() => { 33612 if (targetRef.value) { 33613 targetRef.value.scrollTop = 0; 33614 } 33615 afterDialogOpen(); 33616 }); 33617 } else { 33618 if (visible.value) { 33619 close(); 33620 } 33621 } 33622 } 33623 ); 33624 onMounted(() => { 33625 if (props.modelValue) { 33626 visible.value = true; 33627 rendered.value = true; 33628 open(); 33629 nextTick(() => { 33630 afterDialogOpen(); 33631 }); 33632 } 33633 }); 33634 return { 33635 beforeEnter, 33636 afterEnter, 33637 afterLeave, 33638 beforeLeave, 33639 handleClose, 33640 onModalClick, 33641 close, 33642 onCloseRequested, 33643 titleId, 33644 contentId: computed(() => props.readDescription ? contentId.value : ""), 33645 closed, 33646 rendered, 33647 visible, 33648 zIndex: zIndex2, 33649 style 33650 }; 33651}; 33652const useDialogBodyResize = (props, targetRef, headerRef, footerRef, dialogBodyMaxHeight) => { 33653 let resizeBody = () => { 33654 }; 33655 let addResizeBodyListener = () => { 33656 }; 33657 let removeResizeBodyListener = () => { 33658 }; 33659 if (props.allowedBodyResize) { 33660 resizeBody = () => { 33661 const dialog = targetRef.value; 33662 const header = headerRef.value; 33663 const footer = footerRef.value; 33664 /* istanbul ignore next @preserve */ 33665 if (!dialog) { 33666 return; 33667 } 33668 const { clientHeight: headerHeight } = header != null ? header : { clientHeight: 0 }; 33669 const { clientHeight: footerHeight } = footer != null ? footer : { clientHeight: 0 }; 33670 dialogBodyMaxHeight.value = Math.max( 33671 window.innerHeight - headerHeight - footerHeight - props.offsetSpace * 2, 33672 30 33673 ); 33674 }; 33675 addResizeBodyListener = () => { 33676 if (isClient) { 33677 window.removeEventListener("resize", resizeBody); 33678 window.addEventListener("resize", resizeBody); 33679 } 33680 }; 33681 removeResizeBodyListener = () => { 33682 if (isClient) { 33683 window.removeEventListener("resize", resizeBody); 33684 } 33685 }; 33686 } 33687 onBeforeUnmount(removeResizeBodyListener); 33688 return { resizeBody, addResizeBodyListener, removeResizeBodyListener }; 33689}; 33690const useDraggable = (targetRef, dragRef, draggable) => { 33691 const transform = { 33692 offsetX: 0, 33693 offsetY: 0 33694 }; 33695 let cleanupDocumentDrag = () => { 33696 }; 33697 const adjustPosition = (moveX, moveY) => { 33698 if (targetRef.value) { 33699 const { offsetX, offsetY } = transform; 33700 const targetRect = targetRef.value.getBoundingClientRect(); 33701 const targetLeft = targetRect.left; 33702 const targetTop = targetRect.top; 33703 const targetWidth = targetRect.width; 33704 const targetHeight = targetRect.height; 33705 const clientWidth = document.documentElement.clientWidth; 33706 const clientHeight = document.documentElement.clientHeight; 33707 const minLeft = -targetLeft + offsetX; 33708 const minTop = -targetTop + offsetY; 33709 const maxLeft = clientWidth - targetLeft - targetWidth + offsetX; 33710 const maxTop = clientHeight - targetTop - (targetHeight < clientHeight ? targetHeight : 0) + offsetY; 33711 moveX = Math.min(Math.max(moveX, minLeft), maxLeft); 33712 moveY = Math.min(Math.max(moveY, minTop), maxTop); 33713 transform.offsetX = moveX; 33714 transform.offsetY = moveY; 33715 targetRef.value.style.transform = `translate(${addUnit(moveX)}, ${addUnit(moveY)})`; 33716 } 33717 }; 33718 const onMousedown = (e) => { 33719 cleanupDocumentDrag(); 33720 const downX = e.clientX; 33721 const downY = e.clientY; 33722 const { offsetX, offsetY } = transform; 33723 const onMousemove = (e2) => { 33724 const moveX = offsetX + e2.clientX - downX; 33725 const moveY = offsetY + e2.clientY - downY; 33726 adjustPosition(moveX, moveY); 33727 }; 33728 const onMouseup = () => { 33729 cleanupDocumentDrag(); 33730 }; 33731 document.addEventListener("mousemove", onMousemove); 33732 document.addEventListener("mouseup", onMouseup); 33733 cleanupDocumentDrag = () => { 33734 document.removeEventListener("mousemove", onMousemove); 33735 document.removeEventListener("mouseup", onMouseup); 33736 cleanupDocumentDrag = () => { 33737 }; 33738 }; 33739 }; 33740 const resetPosition = () => { 33741 transform.offsetX = 0; 33742 transform.offsetY = 0; 33743 if (targetRef.value) { 33744 targetRef.value.style.transform = ""; 33745 } 33746 }; 33747 const updatePosition = () => { 33748 const { offsetX, offsetY } = transform; 33749 adjustPosition(offsetX, offsetY); 33750 }; 33751 watchEffect((onCleanup) => { 33752 const dragEl2 = dragRef.value; 33753 const targetEl2 = targetRef.value; 33754 if (!draggable.value || !dragEl2 || !targetEl2) { 33755 return; 33756 } 33757 dragEl2.addEventListener("mousedown", onMousedown); 33758 window.addEventListener("resize", updatePosition); 33759 onCleanup(() => { 33760 dragEl2.removeEventListener("mousedown", onMousedown); 33761 window.removeEventListener("resize", updatePosition); 33762 }); 33763 }); 33764 onBeforeUnmount(() => { 33765 cleanupDocumentDrag(); 33766 }); 33767 return { 33768 resetPosition 33769 }; 33770}; 33771var __defProp$7 = Object.defineProperty; 33772var __defProps$5 = Object.defineProperties; 33773var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors; 33774var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols; 33775var __hasOwnProp$7 = Object.prototype.hasOwnProperty; 33776var __propIsEnum$7 = Object.prototype.propertyIsEnumerable; 33777var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 33778var __spreadValues$7 = (a, b) => { 33779 for (var prop in b || (b = {})) 33780 if (__hasOwnProp$7.call(b, prop)) 33781 __defNormalProp$7(a, prop, b[prop]); 33782 if (__getOwnPropSymbols$7) 33783 for (var prop of __getOwnPropSymbols$7(b)) { 33784 if (__propIsEnum$7.call(b, prop)) 33785 __defNormalProp$7(a, prop, b[prop]); 33786 } 33787 return a; 33788}; 33789var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
33790const _hoisted_1$4 = ["id"]; 33791const _sfc_main$5 = /* @__PURE__ */ defineComponent(__spreadProps$5(__spreadValues$7({}, { 33792 name: "ZmDialogContent" 33793}), { 33794 __name: "dialog-content", 33795 props: dialogContentProps, 33796 emits: dialogContentEmits, 33797 setup(__props, { expose: __expose, emit: __emit }) { 33798 const props = __props; 33799 const emit = __emit; 33800 const { dialogRef, headerRef, footerRef, ns, style, contentId, scrollbarVerticalPosition } = inject(DIALOG_INJECTION_KEY); 33801 const { focusTrapRef } = inject(FOCUS_TRAP_INJECTION_KEY); 33802 const handleClose = (e) => { 33803 emit("close", e); 33804 }; 33805 const composedDialogRef = composeRefs(focusTrapRef, dialogRef); 33806 const { resetPosition } = useDraggable( 33807 dialogRef, 33808 headerRef, 33809 computed(() => props.draggable) 33810 ); 33811 __expose({ 33812 resetPosition 33813 }); 33814 return (_ctx, _cache) => { 33815 return openBlock(), createElementBlock("div", { 33816 ref: unref(composedDialogRef), 33817 class: normalizeClass([unref(ns).b(), unref(ns).is("fullscreen", _ctx.fullscreen), unref(ns).is(_ctx.size, !unref(style).width)]), 33818 style: normalizeStyle(unref(style)), 33819 tabindex: "-1" 33820 }, [ 33821 createBaseVNode("div", { 33822 ref_key: "headerRef", 33823 ref: headerRef, 33824 class: normalizeClass([ 33825 unref(ns).e("header"), 33826 unref(ns).is("draggable", _ctx.draggable), 33827 unref(ns).is( 33828 "elevated", 33829 unref(scrollbarVerticalPosition) === "middle" || unref(scrollbarVerticalPosition) === "bottom" 33830 ) 33831 ]) 33832 }, [ 33833 renderSlot(_ctx.$slots, "header", {}, () => [ 33834 createBaseVNode("div", { 33835 class: normalizeClass(unref(ns).e("title")), 33836 role: "heading", 33837 "aria-level": 2 33838 }, toDisplayString(_ctx.title), 3) 33839 ]), 33840 _ctx.showClose ? (openBlock(), createBlock(unref(ZmButton), { 33841 key: 0, 33842 class: normalizeClass(unref(ns).e("close")), 33843 type: "tertiary", 33844 icon: unref(Close), 33845 "test-id": unref(buildTestId)(_ctx.testId, "-close"), 33846 "aria-label": "Close", 33847 onClick: handleClose 33848 }, null, 8, ["class", "icon", "test-id"])) : createCommentVNode("", true) 33849 ], 2), 33850 createBaseVNode("div", { 33851 id: unref(contentId), 33852 class: normalizeClass([ 33853 unref(ns).e("body"), 33854 unref(ns).is("lost-footer", !_ctx.$slots.footer), 33855 unref(ns).is("allowed-resize", _ctx.allowedResize) 33856 ]) 33857 }, [ 33858 renderSlot(_ctx.$slots, "default") 33859 ], 10, _hoisted_1$4), 33860 _ctx.$slots.footer ? (openBlock(), createElementBlock("div", { 33861 key: 0, 33862 ref_key: "footerRef", 33863 ref: footerRef, 33864 class: normalizeClass([ 33865 unref(ns).e("footer"), 33866 unref(ns).is( 33867 "elevated", 33868 unref(scrollbarVerticalPosition) === "top" || unref(scrollbarVerticalPosition) === "middle" 33869 ) 33870 ]) 33871 }, [ 33872 renderSlot(_ctx.$slots, "footer") 33873 ], 2)) : createCommentVNode("", true) 33874 ], 6); 33875 }; 33876 } 33877})); 33878var __defProp$6 = Object.defineProperty; 33879var __defProps$4 = Object.defineProperties; 33880var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors; 33881var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols; 33882var __hasOwnProp$6 = Object.prototype.hasOwnProperty; 33883var __propIsEnum$6 = Object.prototype.propertyIsEnumerable; 33884var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 33885var __spreadValues$6 = (a, b) => { 33886 for (var prop in b || (b = {})) 33887 if (__hasOwnProp$6.call(b, prop)) 33888 __defNormalProp$6(a, prop, b[prop]); 33889 if (__getOwnPropSymbols$6) 33890 for (var prop of __getOwnPropSymbols$6(b)) { 33891 if (__propIsEnum$6.call(b, prop)) 33892 __defNormalProp$6(a, prop, b[prop]); 33893 } 33894 return a; 33895}; 33896var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b)); 33897const _hoisted_1$3 = ["data-testid", "aria-label", "aria-labelledby", "aria-describedby"]; 33898const _sfc_main$4 = /* @__PURE__ */ defineComponent(__spreadProps$4(__spreadValues$6({}, { 33899 name: "ZmDialog", 33900 inheritAttrs: false 33901}), { 33902 __name: "dialog", 33903 props: dialogProps, 33904 emits: dialogEmits, 33905 setup(__props, { expose: __expose }) { 33906 const props = __props; 33907 const ns = useNamespace("dialog"); 33908 const { focusTrapRef, startFocus, restoreFocus } = useFocusTrap(); 33909 const dialogRoleRef = ref(); 33910 const dialogContentRef = ref(); 33911 const dialogRef = ref(); 33912 const headerRef = ref(); 33913 const footerRef = ref(); 33914 const scrollbarRef = ref(); 33915 const dialogBodyMaxHeight = ref(); 33916 const teleportedContextClass = useTeleportedContextClass(props); 33917 const bodyStyle = computed(() => { 33918 if (props.allowedBodyResize && dialogBodyMaxHeight.value) { 33919 return { maxHeight: `${dialogBodyMaxHeight.value}px` }; 33920 } 33921 return void 0; 33922 }); 33923 const { resizeBody, addResizeBodyListener, removeResizeBodyListener } = useDialogBodyResize( 33924 props, 33925 dialogRef, 33926 headerRef, 33927 footerRef, 33928 dialogBodyMaxHeight 33929 ); 33930 const draggableResult = computed(() => props.draggable && !props.fullscreen); 33931 function handleBodyResize() { 33932 resizeBody(); 33933 addResizeBodyListener(); 33934 } 33935 const { 33936 visible, 33937 titleId, 33938 contentId, 33939 style, 33940 rendered, 33941 zIndex: zIndex2, 33942 beforeEnter, 33943 afterEnter, 33944 afterLeave, 33945 beforeLeave, 33946 handleClose, 33947 onCloseRequested, 33948 onModalClick 33949 } = useDialog(props, dialogRef, handleBodyResize, removeResizeBodyListener, props.preventBodyScroll); 33950 const scrollbarVerticalPosition = ref(""); 33951 provide(DIALOG_INJECTION_KEY, { 33952 dialogRef, 33953 headerRef, 33954 footerRef, 33955 ns, 33956 style, 33957 zIndex: zIndex2, 33958 contentId, 33959 scrollbarVerticalPosition 33960 }); 33961 const onVerticalScrollbarPositionChange = (position2) => { 33962 scrollbarVerticalPosition.value = position2; 33963 }; 33964 const beforeOpenHandler = () => { 33965 if (props.focusTrapImmediate) { 33966 startFocus(); 33967 } 33968 beforeEnter(); 33969 }; 33970 const afterOpenHandler = () => { 33971 if (!props.focusTrapImmediate) { 33972 startFocus(); 33973 } 33974 afterEnter(); 33975 }; 33976 const afterCloseHandler = () => { 33977 afterLeave(); 33978 restoreFocus(); 33979 }; 33980 const handleOverlayDialog = (event) => { 33981 const target = event.target; 33982 if (target === dialogRoleRef.value) { 33983 onModalClick(); 33984 } 33985 }; 33986 const resetPosition = () => { 33987 var _a; 33988 (_a = dialogContentRef.value) == null ? void 0 : _a.resetPosition(); 33989 }; 33990 onBeforeUnmount(() => { 33991 var _a, _b;
33992 try { 33993 const overlayEl = (_a = dialogRoleRef.value) == null ? void 0 : _a.parentElement; 33994 (_b = overlayEl == null ? void 0 : overlayEl.parentNode) == null ? void 0 : _b.removeChild(overlayEl); 33995 } catch (e) { 33996 } 33997 }); 33998 __expose({ 33999 resetPosition, 34000 onCloseRequested, 34001 scrollbarRef 34002 }); 34003 return (_ctx, _cache) => { 34004 return openBlock(), createBlock(Teleport, { 34005 to: "body", 34006 disabled: !_ctx.teleported 34007 }, [ 34008 createVNode(Transition, { 34009 name: "fade-in-linear", 34010 onBeforeEnter: beforeOpenHandler, 34011 onAfterEnter: afterOpenHandler, 34012 onAfterLeave: afterCloseHandler, 34013 onBeforeLeave: unref(beforeLeave) 34014 }, { 34015 default: withCtx(() => [ 34016 withDirectives(createVNode(unref(ZmOverlay), { 34017 "z-index": unref(zIndex2), 34018 class: normalizeClass(unref(teleportedContextClass)), 34019 onClick: withModifiers(handleOverlayDialog, ["stop"]) 34020 }, { 34021 default: withCtx(() => [ 34022 createBaseVNode("div", { 34023 ref_key: "dialogRoleRef", 34024 ref: dialogRoleRef, 34025 role: "dialog", 34026 "data-testid": _ctx.testId, 34027 "aria-label": _ctx.title || void 0, 34028 "aria-labelledby": !_ctx.title ? unref(titleId) : void 0, 34029 "aria-describedby": _ctx.readDescription ? unref(contentId) : void 0, 34030 class: normalizeClass(`${unref(ns).namespace}-overlay-dialog`) 34031 }, [ 34032 createVNode(unref(ZmFocusTrap), { 34033 ref_key: "focusTrapRef", 34034 ref: focusTrapRef, 34035 loop: "", 34036 trapped: unref(visible), 34037 "allow-focus-out": _ctx.allowFocusOut, 34038 onReleaseRequested: unref(onCloseRequested) 34039 }, { 34040 default: withCtx(() => [ 34041 _cache[0] || (_cache[0] = createBaseVNode("span", { 34042 tabindex: "-1", 34043 "aria-hidden": "true" 34044 }, null, -1)), 34045 unref(rendered) ? (openBlock(), createBlock(_sfc_main$5, mergeProps({ 34046 key: 0, 34047 ref_key: "dialogContentRef", 34048 ref: dialogContentRef 34049 }, _ctx.$attrs, { 34050 fullscreen: _ctx.fullscreen, 34051 "show-close": _ctx.showClose, 34052 "test-id": _ctx.testId, 34053 draggable: draggableResult.value, 34054 title: _ctx.title, 34055 "allowed-resize": _ctx.allowedBodyResize, 34056 size: _ctx.size, 34057 "offset-space": _ctx.offsetSpace, 34058 onClose: unref(handleClose) 34059 }), createSlots({ 34060 header: withCtx(() => [ 34061 renderSlot(_ctx.$slots, "header", { 34062 close: unref(handleClose), 34063 titleId: unref(titleId), 34064 titleClass: unref(ns).e("title") 34065 }) 34066 ]), 34067 _: 2 34068 }, [ 34069 !_ctx.allowedBodyResize ? { 34070 name: "default", 34071 fn: withCtx(() => [ 34072 renderSlot(_ctx.$slots, "default", { contentId: unref(contentId) }) 34073 ]), 34074 key: "0" 34075 } : { 34076 name: "default", 34077 fn: withCtx(() => [ 34078 _ctx.$slots.default ? (openBlock(), createBlock(unref(ZmScrollbar), { 34079 key: 0, 34080 ref_key: "scrollbarRef", 34081 ref: scrollbarRef, 34082 onVerticalScrollbarPositionChange 34083 }, { 34084 default: withCtx(() => [ 34085 createBaseVNode("div", { 34086 ref: "bodyWrapperRef", 34087 class: normalizeClass([unref(ns).e("body-wrapper")]), 34088 style: normalizeStyle(bodyStyle.value) 34089 }, [ 34090 renderSlot(_ctx.$slots, "default", { contentId: unref(contentId) })
34091 ], 6) 34092 ]), 34093 _: 3 34094 }, 512)) : createCommentVNode("", true) 34095 ]), 34096 key: "1" 34097 }, 34098 _ctx.$slots.footer ? { 34099 name: "footer", 34100 fn: withCtx(() => [ 34101 renderSlot(_ctx.$slots, "footer") 34102 ]), 34103 key: "2" 34104 } : void 0 34105 ]), 1040, ["fullscreen", "show-close", "test-id", "draggable", "title", "allowed-resize", "size", "offset-space", "onClose"])) : createCommentVNode("", true) 34106 ]), 34107 _: 3 34108 }, 8, ["trapped", "allow-focus-out", "onReleaseRequested"]) 34109 ], 10, _hoisted_1$3) 34110 ]), 34111 _: 3 34112 }, 8, ["z-index", "class"]), [ 34113 [vShow, unref(visible)] 34114 ]) 34115 ]), 34116 _: 3 34117 }, 8, ["onBeforeLeave"]) 34118 ], 8, ["disabled"]); 34119 }; 34120 } 34121})); 34122const getProxy = (instance) => { 34123 if (instance.exposed) { 34124 return instance.exposeProxy || (instance.exposeProxy = new Proxy(proxyRefs(markRaw(instance.exposed)), { 34125 get(target, key) { 34126 if (key in target) { 34127 return target[key]; 34128 } 34129 }, 34130 /* istanbul ignore next @preserve */ 34131 has(target, key) { 34132 return key in target; 34133 } 34134 })); 34135 } 34136 return instance.proxy; 34137}; 34138const createProgrammaticDialog = (options, context) => { 34139 /* istanbul ignore next @preserve */ 34140 if (!isClient) 34141 return void 0; 34142 const { component, props = {}, events = {} } = options; 34143 if (isObject(component)) { 34144 const rootProps = props; 34145 const emits = Object.keys(events); 34146 if (emits.length) { 34147 component.emits = emits; 34148 for (const emit of emits) { 34149 rootProps[toHandlerKey(emit)] = events[emit]; 34150 } 34151 } 34152 const rootContainer = document.createElement("div"); 34153 rootContainer.setAttribute("data-testid", "zoom-programmatic-dialog-container"); 34154 const vnode = createVNode(component, rootProps); 34155 vnode.appContext = context || createProgrammaticDialog._context; 34156 render(vnode, rootContainer); 34157 const internalComponentInstance = getProxy(vnode.component); 34158 document.body.appendChild(rootContainer); 34159 return { 34160 remove() { 34161 render(null, rootContainer); 34162 document.body.removeChild(rootContainer); 34163 }, 34164 updateProps(newProps) { 34165 render(cloneVNode(vnode, newProps), rootContainer); 34166 }, 34167 getInternalComponentInstance() { 34168 return internalComponentInstance; 34169 } 34170 }; 34171 } 34172}; 34173createProgrammaticDialog._context = null; 34174const ZmDialog = withInstall(_sfc_main$4); 34175withInstallFunction(createProgrammaticDialog); 34176const OFFSET = 16; 34177const instancesInfosMap = { 34178 "top-center": shallowReactive([]), 34179 "top-left": shallowReactive([]), 34180 "top-right": shallowReactive([]), 34181 "bottom-left": shallowReactive([]), 34182 "bottom-right": shallowReactive([]) 34183}; 34184const getInstancesInfoByPosition = (position2) => { 34185 return instancesInfosMap[position2]; 34186}; 34187const addInstanceInfo = (instance) => { 34188 const instancesInfos = getInstancesInfoByPosition(instance.vm.position); 34189 instancesInfos.push(instance); 34190}; 34191const destroyInstancesInfo = (position2, id) => { 34192 if (!position2) { 34193 keysOf(instancesInfosMap).forEach((key) => { 34194 const instancesInfos2 = instancesInfosMap[key]; 34195 for (const { vm } of instancesInfos2) { 34196 vm.close(); 34197 } 34198 instancesInfos2.length = 0; 34199 }); 34200 return; 34201 } 34202 const instancesInfos = getInstancesInfoByPosition(position2); 34203 if (id) { 34204 const index2 = instancesInfos.findIndex((instance) => instance.id === id); 34205 if (index2 > -1) { 34206 instancesInfos[index2].vm.close(); 34207 instancesInfos.splice(index2, 1); 34208 } 34209 } 34210}; 34211const getPrevInstanceOffset = (currentInstanceId, position2) => { 34212 const preInstanceInfo = getPreInstanceInfo(currentInstanceId, position2); 34213 if (preInstanceInfo) { 34214 return preInstanceInfo.vm.edgeOffset; 34215 } 34216 return 0; 34217}; 34218const getPreInstanceInfo = (id, position2) => { 34219 const instancesInfos = getInstancesInfoByPosition(position2); 34220 const index2 = instancesInfos.findIndex((info) => info.id === id); 34221 if (index2 > 0) { 34222 return instancesInfos[index2 - 1]; 34223 } 34224}; 34225const getToastOffset = (id, position2) => { 34226 const prevOffset = getPrevInstanceOffset(id, position2); 34227 return prevOffset + OFFSET; 34228}; 34229var __async$2 = (__this, __arguments, generator) => { 34230 return new Promise((resolve2, reject) => { 34231 var fulfilled = (value) => {
34232 try { 34233 step(generator.next(value)); 34234 } catch (e) { 34235 reject(e); 34236 } 34237 }; 34238 var rejected = (value) => { 34239 try { 34240 step(generator.throw(value)); 34241 } catch (e) { 34242 reject(e); 34243 } 34244 }; 34245 var step = (x) => x.done ? resolve2(x.value) : Promise.resolve(x.value).then(fulfilled, rejected); 34246 step((generator = generator.apply(__this, __arguments)).next()); 34247 }); 34248}; 34249const toastProps = { 34250 position: { 34251 type: String, 34252 default: "top-center" 34253 }, 34254 id: { 34255 type: String, 34256 required: true 34257 }, 34258 title: String, 34259 message: { 34260 type: [String, Object, Function], 34261 default: "" 34262 }, 34263 type: { 34264 type: String, 34265 default: "info" 34266 }, 34267 icon: { 34268 type: Object 34269 }, 34270 dangerouslyUseHTMLString: Boolean, 34271 customClass: String, 34272 testId: String, 34273 duration: { 34274 type: Number, 34275 default: 3e3 34276 }, 34277 showClose: Boolean, 34278 onClose: { 34279 type: Function, 34280 required: true 34281 }, 34282 zIndex: Number, 34283 closeAriaLabel: String, 34284 ariaLabel: String, 34285 hasInteractiveElements: Boolean, 34286 theme: String 34287}; 34288const toastEmits = { 34289 remove: () => true 34290}; 34291const _sfc_main$3 = defineComponent({ 34292 name: "ZmToast", 34293 components: { 34294 ZmFocusTrap, 34295 ZmStatusIcon, 34296 ZmInlineIconButton, 34297 ZmThemeProvider 34298 }, 34299 props: toastProps, 34300 emits: toastEmits, 34301 setup(props, { emit, slots }) { 34302 const ns = useNamespace("toast"); 34303 const teleportedContextClass = useTeleportedContextClass({ teleported: true }); 34304 const { focusTrapRef, startFocus, restoreFocus } = useFocusTrap(); 34305 let t; 34306 try { 34307 t = useLocale(messages$c).t; 34308 } catch (error) { 34309 debugError( 34310 "ZmToast", 34311 `You should register ZmToast by "app.use()" or invoke ZmToast with appContext to make VueI18N compatible` 34312 ); 34313 t = () => "Close"; 34314 } 34315 const contentId = useId(); 34316 const { isDark } = useTheme(); 34317 const themeResult = computed(() => { 34318 const { theme } = props; 34319 /* istanbul ignore next @preserve */ 34320 if (theme) { 34321 return theme; 34322 } 34323 return isDark.value ? "dark" : "light"; 34324 }); 34325 const visible = ref(true); 34326 const messageRef = ref(); 34327 const titleRef = ref(); 34328 const height = ref(0); 34329 const toastRef = ref(); 34330 const focusTrapEl = computed(() => { 34331 var _a; 34332 return (_a = toastRef.value) == null ? void 0 : _a.$el; 34333 }); 34334 const { nextZIndex } = useOverlayZIndex(); 34335 const zIndex2 = props.zIndex || nextZIndex(); 34336 const containerStyle = computed(() => { 34337 const verticalProp = props.position.startsWith("top") ? "top" : "bottom"; 34338 return { 34339 [verticalProp]: `${currentOffset.value}px`, 34340 zIndex: zIndex2 34341 }; 34342 }); 34343 const horizontalClass = computed(() => { 34344 const { position: position2 } = props; 34345 return position2.endsWith("right") ? ns.m("right") : position2.endsWith("left") ? ns.m("left") : ns.m("center"); 34346 }); 34347 const currentOffset = computed(() => { 34348 const { id, position: position2 } = props; 34349 return getToastOffset(id, position2); 34350 }); 34351 const edgeOffset = computed(() => height.value + currentOffset.value); 34352 const shouldPersistent = computed(() => { 34353 const { hasInteractiveElements } = props; 34354 return Boolean(hasInteractiveElements || slots.action); 34355 }); 34356 const ariaLabelResult = computed(() => { 34357 const { title, ariaLabel } = props; 34358 return title || ariaLabel; 34359 }); 34360 let closeReason = "user-action"; 34361 let timer; 34362 const tryStartTimer = () => { 34363 const { duration } = props; 34364 if (duration === 0 || shouldPersistent.value) 34365 return; 34366 timer = window.setTimeout(() => { 34367 close("duration"); 34368 }, duration); 34369 }; 34370 tryStartTimer(); 34371 const tryClearTimer = () => { 34372 if (timer) { 34373 clearTimeout(timer); 34374 timer = void 0; 34375 } 34376 }; 34377 const close = (reason = "user-action") => { 34378 closeReason = reason; 34379 visible.value = false; 34380 }; 34381 const onMenuBeforeOpen = () => { 34382 if (shouldPersistent.value) { 34383 nextTick(() => { 34384 startFocus(); 34385 }); 34386 } 34387 }; 34388 const onMenuAfterClosed = () => { 34389 props.onClose(closeReason); 34390 if (shouldPersistent.value) { 34391 restoreFocus(); 34392 } 34393 emit("remove"); 34394 }; 34395 useResizeObserver(toastRef, () => { 34396 height.value = toastRef.value.$el.getBoundingClientRect().height; 34397 });
34398 useEscapeKeydown(() => { 34399 close("user-action"); 34400 }); 34401 onBeforeUnmount(() => { 34402 tryClearTimer(); 34403 }); 34404 const getAnnouncedText = () => { 34405 let string = ""; 34406 /* istanbul ignore next @preserve */ 34407 if (titleRef.value) { 34408 string += `${titleRef.value.innerText} `; 34409 } 34410 if (messageRef.value) { 34411 string += `${messageRef.value.innerText}`; 34412 } 34413 return string; 34414 }; 34415 watch( 34416 visible, 34417 (newVal) => __async$2(this, null, function* () { 34418 yield nextTick(); 34419 if (!shouldPersistent.value) { 34420 newVal ? announce(getAnnouncedText(), props.type === "info" ? "polite" : "assertive") : destroyAnnouncer(); 34421 } 34422 }), 34423 { immediate: true } 34424 ); 34425 return { 34426 focusTrapRef, 34427 ns, 34428 t, 34429 CloseIcon: Close, 34430 themeResult, 34431 toastRef, 34432 focusTrapEl, 34433 containerStyle, 34434 buildTestId, 34435 contentId, 34436 ariaLabelResult, 34437 horizontalClass, 34438 teleportedContextClass, 34439 visible, 34440 messageRef, 34441 titleRef, 34442 tryStartTimer, 34443 tryClearTimer, 34444 shouldPersistent, 34445 edgeOffset, 34446 onMenuAfterClosed, 34447 onMenuBeforeOpen, 34448 close 34449 }; 34450 } 34451}); 34452const _hoisted_1$2 = ["innerHTML"]; 34453const _hoisted_2$2 = ["id"]; 34454function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) { 34455 const _component_zm_status_icon = resolveComponent("zm-status-icon"); 34456 const _component_zm_inline_icon_button = resolveComponent("zm-inline-icon-button"); 34457 const _component_zm_focus_trap = resolveComponent("zm-focus-trap"); 34458 const _component_zm_theme_provider = resolveComponent("zm-theme-provider"); 34459 return openBlock(), createBlock(Transition, { 34460 name: _ctx.ns.b(_ctx.position), 34461 appear: "", 34462 onBeforeEnter: _ctx.onMenuBeforeOpen, 34463 onAfterLeave: _ctx.onMenuAfterClosed 34464 }, { 34465 default: withCtx(() => [ 34466 withDirectives(createVNode(_component_zm_theme_provider, { 34467 id: _ctx.id, 34468 ref: "toastRef", 34469 "data-testid": _ctx.testId, 34470 theme: _ctx.themeResult, 34471 role: _ctx.shouldPersistent ? "alertdialog" : void 0, 34472 "aria-describedby": _ctx.contentId, 34473 "aria-label": _ctx.ariaLabelResult, 34474 class: normalizeClass([_ctx.ns.b(), _ctx.ns.m(_ctx.type), _ctx.customClass, _ctx.horizontalClass, _ctx.teleportedContextClass]), 34475 style: normalizeStyle(_ctx.containerStyle), 34476 onMouseenter: _ctx.tryClearTimer, 34477 onMouseleave: _ctx.tryStartTimer 34478 }, { 34479 default: withCtx(() => [ 34480 createVNode(_component_zm_focus_trap, { 34481 ref: "focusTrapRef", 34482 loop: "", 34483 trapped: _ctx.shouldPersistent, 34484 "focus-trap-el": _ctx.focusTrapEl 34485 }, { 34486 default: withCtx(() => [ 34487 createBaseVNode("div", { 34488 class: normalizeClass(_ctx.ns.e("main")) 34489 }, [ 34490 createVNode(_component_zm_status_icon, { 34491 class: normalizeClass(_ctx.ns.e("icon")), 34492 type: _ctx.type, 34493 icon: _ctx.icon 34494 }, null, 8, ["class", "type", "icon"]), 34495 createBaseVNode("div", { 34496 class: normalizeClass(_ctx.ns.e("body")) 34497 }, [ 34498 _ctx.title ? (openBlock(), createElementBlock("div", { 34499 key: 0, 34500 ref: "titleRef", 34501 class: normalizeClass(_ctx.ns.e("title")) 34502 }, toDisplayString(_ctx.title), 3)) : createCommentVNode("", true), 34503 _ctx.dangerouslyUseHTMLString ? (openBlock(), createElementBlock("div", { 34504 key: 1, 34505 ref: "messageRef", 34506 class: normalizeClass(_ctx.ns.e("content")), 34507 innerHTML: _ctx.message 34508 }, null, 10, _hoisted_1$2)) : (openBlock(), createElementBlock("div", { 34509 key: 2, 34510 id: _ctx.contentId, 34511 ref: "messageRef", 34512 class: normalizeClass(_ctx.ns.e("content")) 34513 }, [ 34514 renderSlot(_ctx.$slots, "default") 34515 ], 10, _hoisted_2$2)) 34516 ], 2), 34517 _ctx.showClose ? (openBlock(), createBlock(_component_zm_inline_icon_button, { 34518 key: 0, 34519 class: normalizeClass(_ctx.ns.m("closable")), 34520 icon: _ctx.CloseIcon, 34521 "test-id": _ctx.buildTestId(_ctx.testId, "-close"), 34522 "aria-label": _ctx.t("basic.close"), 34523 onClick: _cache[0] || (_cache[0] = ($event) => _ctx.close("user-action")) 34524 }, null, 8, ["class", "icon", "test-id", "aria-label"])) : createCommentVNode("", true) 34525 ], 2), 34526 _ctx.$slots.action ? (openBlock(), createElementBlock("div", { 34527 key: 0, 34528 class: normalizeClass(_ctx.ns.e("actionable")) 34529 }, [ 34530 renderSlot(_ctx.$slots, "action") 34531 ], 2)) : createCommentVNode("", true) 34532 ]), 34533 _: 3 34534 }, 8, ["trapped", "focus-trap-el"]) 34535 ]), 34536 _: 3 34537 }, 8, ["id", "data-testid", "theme", "role", "aria-describedby", "aria-label", "class", "style", "onMouseenter", "onMouseleave"]), [ 34538 [vShow, _ctx.visible] 34539 ]) 34540 ]), 34541 _: 3 34542 }, 8, ["name", "onBeforeEnter", "onAfterLeave"]); 34543} 34544const ToastConstructor = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$1]]); 34545var __defProp$5 = Object.defineProperty; 34546var __defProps$3 = Object.defineProperties; 34547var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors; 34548var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols; 34549var __hasOwnProp$5 = Object.prototype.hasOwnProperty; 34550var __propIsEnum$5 = Object.prototype.propertyIsEnumerable; 34551var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 34552var __spreadValues$5 = (a, b) => { 34553 for (var prop in b || (b = {})) 34554 if (__hasOwnProp$5.call(b, prop)) 34555 __defNormalProp$5(a, prop, b[prop]); 34556 if (__getOwnPropSymbols$5) 34557 for (var prop of __getOwnPropSymbols$5(b)) { 34558 if (__propIsEnum$5.call(b, prop)) 34559 __defNormalProp$5(a, prop, b[prop]); 34560 } 34561 return a; 34562}; 34563var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b)); 34564let toastId = Math.ceil(Math.random() * 1e4); 34565const normalizeOptions = (params) => { 34566 const options = !params || isString(params) || isVNode(params) || isFunction(params) ? { message: params } : params; 34567 const normalizedOptions = __spreadValues$5({}, options); 34568 return normalizedOptions; 34569}; 34570const initToast = function(options, context) { 34571 const id = `toast_${toastId++}`; 34572 const container = document.createElement("div"); 34573 const onCloseHandler = options.onClose; 34574 const props = __spreadProps$3(__spreadValues$5({}, options), { 34575 id, 34576 onClose(reason) { 34577 onCloseHandler == null ? void 0 : onCloseHandler(reason); 34578 destroyInstancesInfo(options.position || "top-center", id); 34579 }, 34580 onRemove() { 34581 render(null, container); 34582 } 34583 }); 34584 const { message, dangerouslyUseHTMLString } = props; 34585 const action = options.action; 34586 const slots = {}; 34587 if (isFunction(message) || isVNode(message) || !dangerouslyUseHTMLString && isString(message)) { 34588 slots.default = isFunction(message) ? message : () => props.message; 34589 } 34590 if (action) { 34591 slots.action = isFunction(action) ? action : () => action; 34592 delete props["action"]; 34593 } 34594 const vnode = createVNode(ToastConstructor, props, slots); 34595 vnode.appContext = context || createToast._context; 34596 render(vnode, container); 34597 document.body.appendChild(container.firstElementChild); 34598 const instanceInfo = { 34599 id, 34600 vm: vnode.component.proxy 34601 }; 34602 return instanceInfo; 34603}; 34604const createToast = (options = {}, context) => { 34605 const normalized = normalizeOptions(options); 34606 const instanceInfo = initToast(normalized, context); 34607 addInstanceInfo(instanceInfo); 34608 return instanceInfo.vm; 34609}; 34610createToast.closeAll = (position2) => { 34611 destroyInstancesInfo(position2); 34612}; 34613createToast._context = null; 34614const ZmToast = withInstallFunction(createToast, "$toast"); 34615const sideMenuSubProps = { 34616 menuId: String, 34617 level: { 34618 type: Number, 34619 default: 0 34620 }, 34621 items: Array, 34622 visible: Boolean, 34623 activeItem: Object, 34624 dragoverItem: Object, 34625 templates: Object, 34626 draggable: Boolean, 34627 hasSubItem: Boolean 34628}; 34629const sideMenuSubEmits = [ 34630 "item-click", 34631 "item-keyboard", 34632 "dragstart", 34633 "drop", 34634 "dragover", 34635 "dragleave" 34636]; 34637var __defProp$4 = Object.defineProperty; 34638var __defProps$2 = Object.defineProperties; 34639var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors; 34640var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols; 34641var __hasOwnProp$4 = Object.prototype.hasOwnProperty; 34642var __propIsEnum$4 = Object.prototype.propertyIsEnumerable; 34643var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 34644var __spreadValues$4 = (a, b) => { 34645 for (var prop in b || (b = {})) 34646 if (__hasOwnProp$4.call(b, prop)) 34647 __defNormalProp$4(a, prop, b[prop]); 34648 if (__getOwnPropSymbols$4) 34649 for (var prop of __getOwnPropSymbols$4(b)) { 34650 if (__propIsEnum$4.call(b, prop)) 34651 __defNormalProp$4(a, prop, b[prop]); 34652 } 34653 return a; 34654}; 34655var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b)); 34656const _sfc_main$2 = /* @__PURE__ */ defineComponent(__spreadProps$2(__spreadValues$4({}, { 34657 name: "ZmSideMenuSub" 34658}), { 34659 __name: "side-menu-sub", 34660 props: sideMenuSubProps, 34661 emits: sideMenuSubEmits, 34662 setup(__props, { emit: __emit }) { 34663 const props = __props; 34664 const emit = __emit; 34665 const ns = useNamespace("side-menu"); 34666 const listTransitionName = `${ns.namespace}-side-menu-list`; 34667 const getDraggable = (processedItem) => { 34668 return props.draggable && !isItemSeparator(processedItem); 34669 }; 34670 const getIconClass = (processedItem) => { 34671 return [ns.e("submenu-icon"), processedItem.expanded && ns.em("submenu-icon", "expanded")]; 34672 }; 34673 const getTabIndex = (processedItem, index2) => { 34674 if (isItemSeparator(processedItem)) { 34675 return void 0; 34676 } 34677 if (!props.activeItem) { 34678 return index2 === 0 && props.level === 0 ? "0" : "-1"; 34679 } 34680 return props.activeItem.key === processedItem.key ? "0" : "-1"; 34681 }; 34682 const getItemId = (processedItem) => { 34683 return `${props.menuId}_${processedItem.key}`; 34684 }; 34685 const getItemLabel = (processedItem) => { 34686 return getItemProp(processedItem, "label"); 34687 }; 34688 const getItemTitle = (processedItem) => { 34689 return getItemProp(processedItem, "title"); 34690 }; 34691 const getItemAriaLabel = (processedItem) => { 34692 return isItemTitle(processedItem) ? getItemTitle(processedItem) : getItemLabel(processedItem); 34693 }; 34694 const getItemProp = (processedItem, name, _params) => { 34695 return resolve(processedItem.item[name], _params); 34696 }; 34697 const getDescriptions = (processedItem) => { 34698 return getItemId(processedItem) + "__item"; 34699 }; 34700 const getBadgeText = (processedItem) => { 34701 return getItemProp(processedItem, "badge").text; 34702 }; 34703 const isItemGroup = (processedItem) => { 34704 return !isEmpty(processedItem.items); 34705 }; 34706 const isItemDisabled = (processedItem) => { 34707 return getItemProp(processedItem, "disabled") || isItemTitle(processedItem); 34708 }; 34709 const isItemActive = (processedItem) => { 34710 var _a; 34711 return ((_a = props.activeItem) == null ? void 0 : _a.key) === processedItem.key && !isItemSeparator(processedItem) && !isItemTitle(processedItem); 34712 }; 34713 const isItemDragover = (processedItem) => { 34714 var _a; 34715 return ((_a = props.dragoverItem) == null ? void 0 : _a.key) === processedItem.key && !isItemSeparator(processedItem) && !isItemTitle(processedItem); 34716 }; 34717 const isItemSeparator = (processedItem) => { 34718 const separator = getItemProp(processedItem, "separator"); 34719 return !!separator; 34720 }; 34721 const isItemTitle = (processedItem) => { 34722 const title = getItemTitle(processedItem); 34723 return !!title; 34724 }; 34725 const isItemPlaceholder = (processedItem) => { 34726 return props.hasSubItem && !isItemGroup(processedItem); 34727 };
34728 const handleItemClick = (event, processedItem) => { 34729 if (isItemDisabled(processedItem) || isItemSeparator(processedItem)) { 34730 return; 34731 } 34732 getItemProp(processedItem, "command", { originalEvent: event, item: processedItem.item }); 34733 emit("item-click", { originalEvent: event, processedItem }); 34734 }; 34735 const handleKeydown = (event, processedItem) => { 34736 emit("item-keyboard", { originalEvent: event, processedItem }); 34737 }; 34738 const handleDragstart = (event, processedItem) => { 34739 emit("dragstart", { originalEvent: event, processedItem }); 34740 }; 34741 const handleDrop = (event, processedItem) => { 34742 emit("drop", { originalEvent: event, processedItem }); 34743 }; 34744 const handleDragOver = (event, processedItem) => { 34745 emit("dragover", { originalEvent: event, processedItem }); 34746 event.preventDefault(); 34747 }; 34748 const handleDragleave = (event, processedItem) => { 34749 emit("dragleave", { originalEvent: event, processedItem }); 34750 }; 34751 return (_ctx, _cache) => { 34752 const _component_zm_side_menu_sub = resolveComponent("zm-side-menu-sub"); 34753 return openBlock(), createBlock(unref(ZmCollapseTransition), null, { 34754 default: withCtx(() => [ 34755 withDirectives((openBlock(), createBlock(resolveDynamicComponent(_ctx.level === 0 ? TransitionGroup : "ul"), normalizeProps(guardReactiveProps(_ctx.level === 0 ? { tag: "ul", name: listTransitionName } : {})), { 34756 default: withCtx(() => [ 34757 (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (processedItem, index2) => { 34758 return openBlock(), createElementBlock("li", { 34759 key: getItemId(processedItem), 34760 role: "none" 34761 }, [ 34762 (openBlock(), createBlock(resolveDynamicComponent(getItemProp(processedItem, "url") ? "a" : "div"), { 34763 id: getItemProp(processedItem, "id"), 34764 tabindex: getTabIndex(processedItem, index2), 34765 role: "treeitem", 34766 href: getItemProp(processedItem, "url"), 34767 target: getItemProp(processedItem, "target"), 34768 "data-testid": getItemProp(processedItem, "testId"), 34769 class: normalizeClass([ 34770 unref(ns).e("item-content"), 34771 unref(ns).is("active", isItemActive(processedItem)), 34772 unref(ns).is("separator", isItemSeparator(processedItem)), 34773 unref(ns).is("title", isItemTitle(processedItem)), 34774 unref(ns).is("dragover", isItemDragover(processedItem)), 34775 unref(ns).is("muted", getItemProp(processedItem, "muted")), 34776 unref(ns).is("disabled", getItemProp(processedItem, "disabled")) 34777 ]), 34778 "aria-hidden": isItemSeparator(processedItem), 34779 "aria-current": isItemActive(processedItem) ? "page" : void 0, 34780 "aria-owns": getItemId(processedItem) + "_list", 34781 "aria-expanded": isItemGroup(processedItem) ? processedItem.expanded : void 0, 34782 "aria-describedby": getDescriptions(processedItem), 34783 "aria-disabled": isItemDisabled(processedItem), 34784 "aria-label": getItemAriaLabel(processedItem), 34785 draggable: getDraggable(processedItem), 34786 onClick: withModifiers(($event) => handleItemClick($event, processedItem), ["stop"]), 34787 onKeydown: ($event) => handleKeydown($event, processedItem), 34788 onDragstart: ($event) => handleDragstart($event, processedItem), 34789 onDrop: ($event) => handleDrop($event, processedItem), 34790 onDragover: ($event) => handleDragOver($event, processedItem), 34791 onDragleave: ($event) => handleDragleave($event, processedItem) 34792 }, { 34793 default: withCtx(() => [ 34794 !_ctx.templates.item ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [ 34795 isItemGroup(processedItem) ? (openBlock(), createBlock(unref(ZmInlineChevronIcon), { 34796 key: 0, 34797 size: "16px", 34798 class: normalizeClass(getIconClass(processedItem)) 34799 }, null, 8, ["class"])) : createCommentVNode("", true), 34800 isItemPlaceholder(processedItem) ? (openBlock(), createElementBlock("span", { 34801 key: 1, 34802 "aria-hidden": "true", 34803 class: normalizeClass(unref(ns).e("item-placeholader")) 34804 }, null, 2)) : createCommentVNode("", true), 34805 getItemProp(processedItem, "icon") ? (openBlock(), createBlock(unref(ZmIcon), { 34806 key: 2, 34807 class: normalizeClass(unref(ns).e("item-icon")) 34808 }, { 34809 default: withCtx(() => [ 34810 (openBlock(), createBlock(resolveDynamicComponent(getItemProp(processedItem, "icon")))) 34811 ]), 34812 _: 2 34813 }, 1032, ["class"])) : createCommentVNode("", true), 34814 isItemTitle(processedItem) ? (openBlock(), createElementBlock("span", { 34815 key: 3, 34816 role: "presentation", 34817 class: normalizeClass(unref(ns).e("item-title")) 34818 }, toDisplayString(getItemTitle(processedItem)), 3)) : (openBlock(), createElementBlock("span", { 34819 key: 4, 34820 role: "presentation", 34821 class: normalizeClass(unref(ns).e("item-label")) 34822 }, toDisplayString(getItemLabel(processedItem)), 3)), 34823 getItemProp(processedItem, "badge") ? (openBlock(), createElementBlock(Fragment, { key: 5 }, [ 34824 getItemProp(processedItem, "badge").type === "custom" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [ 34825 createVNode(unref(ZmBadge), { 34826 class: normalizeClass(unref(ns).e("item-badge")), 34827 type: "custom", 34828 text: getItemProp(processedItem, "badge").text, 34829 color: getItemProp(processedItem, "badge").
34829color, 34830 inverse: getItemProp(processedItem, "badge").inverse 34831 }, null, 8, ["class", "text", "color", "inverse"]), 34832 createVNode(unref(ZmVisuallyHidden), { 34833 id: getDescriptions(processedItem) 34834 }, { 34835 default: withCtx(() => [ 34836 createTextVNode(toDisplayString(getBadgeText(processedItem)), 1) 34837 ]), 34838 _: 2 34839 }, 1032, ["id"]) 34840 ], 64)) : createCommentVNode("", true) 34841 ], 64)) : createCommentVNode("", true) 34842 ], 64)) : (openBlock(), createBlock(resolveDynamicComponent(_ctx.templates.item), { 34843 key: 1, 34844 id: getDescriptions(processedItem), 34845 item: processedItem.item, 34846 submenu: isItemGroup(processedItem), 34847 label: getItemLabel(processedItem), 34848 title: getItemTitle(processedItem), 34849 expanded: processedItem.expanded, 34850 placeholder: isItemPlaceholder(processedItem) 34851 }, null, 8, ["id", "item", "submenu", "label", "title", "expanded", "placeholder"])) 34852 ]), 34853 _: 2 34854 }, 1064, ["id", "tabindex", "href", "target", "data-testid", "class", "aria-hidden", "aria-current", "aria-owns", "aria-expanded", "aria-describedby", "aria-disabled", "aria-label", "draggable", "onClick", "onKeydown", "onDragstart", "onDrop", "onDragover", "onDragleave"])), 34855 isItemGroup(processedItem) ? (openBlock(), createBlock(_component_zm_side_menu_sub, { 34856 key: 0, 34857 id: getItemId(processedItem) + "_list", 34858 role: "group", 34859 "menu-id": _ctx.menuId, 34860 class: normalizeClass([unref(ns).e("list"), unref(ns).e("sub")]), 34861 items: processedItem.items, 34862 "has-sub-item": _ctx.hasSubItem, 34863 level: _ctx.level + 1, 34864 visible: processedItem.expanded, 34865 "active-item": _ctx.activeItem, 34866 "dragover-item": _ctx.dragoverItem, 34867 templates: _ctx.templates, 34868 "aria-label": getItemLabel(processedItem), 34869 draggable: getDraggable(processedItem), 34870 onItemClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("item-click", $event)), 34871 onItemKeyboard: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("item-keyboard", $event)), 34872 onDragstart: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("dragstart", $event)), 34873 onDrop: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("drop", $event)), 34874 onDragover: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("dragover", $event)), 34875 onDragleave: _cache[5] || (_cache[5] = ($event) => _ctx.$emit("dragleave", $event)) 34876 }, null, 8, ["id", "menu-id", "class", "items", "has-sub-item", "level", "visible", "active-item", "dragover-item", "templates", "aria-label", "draggable"])) : createCommentVNode("", true) 34877 ]); 34878 }), 128)) 34879 ]), 34880 _: 1 34881 }, 16)), [ 34882 [vShow, _ctx.level === 0 ? true : _ctx.visible] 34883 ]) 34884 ]), 34885 _: 1 34886 }); 34887 }; 34888 } 34889})); 34890const sideMenuProps = { 34891 data: Array, 34892 testId: String, 34893 defaultExpandAll: Boolean, 34894 expandRowKeys: Array, 34895 adjust: Boolean, 34896 width: { 34897 type: Number, 34898 default: 280 34899 }, 34900 height: { 34901 type: [String, Number], 34902 default: 400 34903 }, 34904 minWidth: { 34905 type: Number, 34906 default: 200 34907 }, 34908 maxWidth: { 34909 type: Number, 34910 default: 400 34911 }, 34912 autoActive: { 34913 type: Boolean, 34914 default: true 34915 }, 34916 activeKey: String, 34917 ariaLabel: String, 34918 draggable: Boolean 34919}; 34920const sideMenuEmits = [ 34921 "dragstart", 34922 "drop", 34923 "dragover", 34924 "dragleave", 34925 "select", 34926 "width-change" 34927]; 34928function useResize(props, emit, width, isRTL) { 34929 const ns = useNamespace("side-menu"); 34930 const resizeProxy = ref(); 34931 const resizeProxyVisible = ref(false); 34932 const dragging = ref(false); 34933 const dragState = ref({}); 34934 const handleMouseDown = (event) => { 34935 if (!props.adjust) { 34936 return; 34937 } 34938 if (resizeProxyVisible.value) { 34939 event.preventDefault(); 34940 disableUserSelect(); 34941 dragging.value = true; 34942 const el = event.target; 34943 const target = el.closest(`.${ns.b()}`); 34944 const minWidth = props.minWidth; 34945 const maxWidth = props.maxWidth; 34946 dragState.value = { 34947 startMouseLeft: event.clientX, 34948 width: parseInt(target.style.width) 34949 }; 34950 const handleMouseMove2 = (event2) => { 34951 const deltaLeft = event2.clientX - dragState.value.startMouseLeft; 34952 const deltaWidth = dragState.value.width + (isRTL.value ? -deltaLeft : deltaLeft); 34953 width.value = Math.min(maxWidth, Math.max(minWidth, deltaWidth)); 34954 addClass(resizeProxy.value, "is-active"); 34955 }; 34956 const handleMouseUp = () => { 34957 enableUserSelect(); 34958 if (dragging.value) { 34959 document.body.style.cursor = ""; 34960 dragging.value = false;
34961 dragState.value = {}; 34962 resizeProxyVisible.value = false; 34963 emit("width-change", width.value); 34964 } 34965 removeClass(resizeProxy.value, "is-active"); 34966 document.removeEventListener("mousemove", handleMouseMove2); 34967 document.removeEventListener("mouseup", handleMouseUp); 34968 }; 34969 document.addEventListener("mousemove", handleMouseMove2); 34970 document.addEventListener("mouseup", handleMouseUp); 34971 } 34972 }; 34973 const handleMouseMove = (event) => { 34974 if (!props.adjust) { 34975 return; 34976 } 34977 const el = event.target; 34978 const target = el.closest(`.${ns.b()}`); 34979 if (!dragging.value) { 34980 const rect = target.getBoundingClientRect(); 34981 const bodyStyle = document.body.style; 34982 if (shouldNear(rect, event)) { 34983 bodyStyle.cursor = "col-resize"; 34984 resizeProxyVisible.value = true; 34985 } else { 34986 bodyStyle.cursor = ""; 34987 resizeProxyVisible.value = false; 34988 } 34989 } 34990 }; 34991 const shouldNear = (rect, event) => { 34992 if (!isRTL.value) { 34993 return rect.right - event.pageX < 8; 34994 } else { 34995 return event.pageX - rect.left < 8; 34996 } 34997 }; 34998 const handleMouseOut = () => { 34999 if (!props.adjust) { 35000 /* istanbul ignore next @preserve */ 35001 return; 35002 } 35003 if (!dragging.value) { 35004 document.body.style.cursor = ""; 35005 resizeProxyVisible.value = false; 35006 } 35007 }; 35008 return { 35009 resizeProxy, 35010 resizeProxyVisible, 35011 handleMouseMove, 35012 handleMouseDown, 35013 handleMouseOut 35014 }; 35015} 35016var __defProp$3 = Object.defineProperty; 35017var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols; 35018var __hasOwnProp$3 = Object.prototype.hasOwnProperty; 35019var __propIsEnum$3 = Object.prototype.propertyIsEnumerable; 35020var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 35021var __spreadValues$3 = (a, b) => { 35022 for (var prop in b || (b = {})) 35023 if (__hasOwnProp$3.call(b, prop)) 35024 __defNormalProp$3(a, prop, b[prop]); 35025 if (__getOwnPropSymbols$3) 35026 for (var prop of __getOwnPropSymbols$3(b)) { 35027 if (__propIsEnum$3.call(b, prop)) 35028 __defNormalProp$3(a, prop, b[prop]); 35029 } 35030 return a; 35031}; 35032function useTree(props, activeItem) { 35033 const instance = getCurrentInstance(); 35034 const expandRowKeys = ref([]); 35035 const treeData = ref({}); 35036 const processedItems = shallowRef([]); 35037 const hasSubItem = ref(false); 35038 const normalizedData = computed(() => { 35039 return normalize(props.data); 35040 }); 35041 const isSeparator = (item) => { 35042 return !!item["separator"]; 35043 }; 35044 const createProcessedItems = (items, level = 0, parentKey = "", parent) => { 35045 const processedItems2 = []; 35046 items && items.forEach((item, index2) => { 35047 var _a; 35048 const key = (parentKey !== "" ? parentKey + "_" : "") + index2; 35049 const newItem = { 35050 item, 35051 index: index2, 35052 level, 35053 key, 35054 parent, 35055 parentKey, 35056 expanded: (_a = treeData.value[item.key]) == null ? void 0 : _a.expanded 35057 }; 35058 if (props.activeKey === item.key) { 35059 activeItem.value = newItem; 35060 } 35061 if (item.items) { 35062 hasSubItem.value = true; 35063 } 35064 newItem["items"] = createProcessedItems(item.items, level
35064+ 1, key, newItem); 35065 processedItems2.push(newItem); 35066 }); 35067 return processedItems2; 35068 }; 35069 const updateTreeData = (ifChangeExpandRowKeys = false) => { 35070 const nested = normalizedData.value; 35071 const keys = Object.keys(nested); 35072 const newTreeData = {}; 35073 if (keys.length) { 35074 const oldTreeData = unref(treeData); 35075 const getExpanded = (oldValue, key) => { 35076 if (ifChangeExpandRowKeys) { 35077 if (expandRowKeys.value) { 35078 return props.defaultExpandAll || expandRowKeys.value.includes(key); 35079 } else { 35080 /* istanbul ignore next @preserve */ 35081 return !!(props.defaultExpandAll || oldValue.expanded); 35082 } 35083 } else { 35084 const included = props.defaultExpandAll || expandRowKeys.value && expandRowKeys.value.includes(key); 35085 return !!((oldValue == null ? void 0 : oldValue.expanded) || included); 35086 } 35087 }; 35088 keys.forEach((key) => { 35089 const oldValue = oldTreeData[key]; 35090 const newValue = __spreadValues$3({}, nested[key]); 35091 newValue.expanded = getExpanded(oldValue, key); 35092 newTreeData[key] = newValue; 35093 }); 35094 } 35095 treeData.value = newTreeData; 35096 }; 35097 const walkTreeNode2 = (root, cb) => { 35098 const isNil2 = (array) => !(Array.isArray(array) && array.length); 35099 function _walker(parent, level, children) { 35100 cb(parent, level, children); 35101 children.forEach((item) => { 35102 const children2 = item.items; 35103 if (!isNil2(children2)) { 35104 _walker(item, level + 1, children2); 35105 } 35106 }); 35107 } 35108 root.forEach((item) => { 35109 const children = item.items; 35110 if (!isNil2(children)) { 35111 _walker(item, 0, children); 35112 } 35113 }); 35114 }; 35115 const normalize = (root) => { 35116 const res = {}; 35117 walkTreeNode2(root, (parent, level, children) => { 35118 if (Array.isArray(children)) { 35119 const parentId = parent.key; 35120 res[parentId] = { 35121 children, 35122 level 35123 }; 35124 } 35125 }); 35126 return res; 35127 }; 35128 const updateTreeExpandKeys = (value) => { 35129 expandRowKeys.value = value; 35130 updateTreeData(); 35131 }; 35132 const toggleTreeExpansion = (item, expanded) => { 35133 const id = item.item.key; 35134 const data = treeData.value[id]; 35135 if (data) { 35136 expanded = typeof expanded === "undefined" ? !data.expanded : expanded; 35137 treeData.value[id].expanded = expanded; 35138 } 35139 }; 35140 const handleFocusout = (e) => { 35141 var _a; 35142 const node = e.relatedTarget; 35143 if (node && inMenu(node)) { 35144 return; 35145 } 35146 const nav = (_a = instance == null ? void 0 : instance.vnode.el) == null ? void 0 : _a.querySelector(`.${getNamespace()}-side-menu__nav`); 35147 const activeNode = nav.querySelector(".is-active"); 35148 if (activeNode) { 35149 resetTabIndex(); 35150 setTabIndex(activeNode); 35151 } 35152 let parent = findActiveItem(processedItems.value); 35153 while (parent) { 35154 toggleTreeExpansion(parent, true); 35155 parent = parent == null ? void 0 : parent.parent; 35156 } 35157 }; 35158 const handleFocusin = (e) => { 35159 let node = e.target; 35160 if (node && inMenu(node)) { 35161 node = findMenuItem(node); 35162 resetTabIndex(); 35163 setTabIndex(node); 35164 } 35165 }; 35166 const resetTabIndex = () => { 35167 var _a; 35168 const nav = (_a = instance == null ? void 0 : instance.vnode.el) == null ? void 0 : _a.querySelector(`.${getNamespace()}-side-menu__nav`); 35169 const matchedEls = nav.querySelectorAll("[tabindex]"); 35170 Array.prototype.forEach.call(matchedEls, (el) => { 35171 el.setAttribute("tabindex", "-1"); 35172 }); 35173 }; 35174 const setTabIndex = (node) => { 35175 const matchedEls = node.querySelectorAll("[tabindex]"); 35176 node.setAttribute("tabindex", "0"); 35177 Array.prototype.forEach.call(matchedEls, (el) => { 35178 el.setAttribute("tabindex", "0"); 35179 }); 35180 }; 35181 const inMenu = (node) => { 35182 var _a; 35183 const el = (_a = instance == null ? void 0 : instance.vnode.el) == null ? void 0 : _a.querySelector(`.${getNamespace()}-side-menu__nav`); 35184 return el == null ? void 0 : el.contains(node); 35185 }; 35186 const isMenuItem = (node) => { 35187 return hasClass(node, `${getNamespace()}-side-menu__item-content`); 35188 }; 35189 const findMenuItem = (el) => { 35190 while (el) { 35191 if (isMenuItem(el)) { 35192 return el; 35193 } 35194 el = el.parentElement; 35195 } 35196 return null; 35197 }; 35198 const findActiveItem = (list) => { 35199 var _a; 35200 for (let i = 0; i < list.length; i++) { 35201 if (list[i].item.key === ((_a = activeItem.value) == null ? void 0 : _a.item.key)) { 35202 return list[i]; 35203 } 35204 if (list[i].items) { 35205 const found = findActiveItem(list[i].items); 35206 if (found) { 35207 return found; 35208 } 35209 } 35210 } 35211 return null; 35212 }; 35213 onMounted(() => { 35214 let parent = findActiveItem(processedItems.value); 35215 while (parent) { 35216 toggleTreeExpansion(parent, true); 35217 parent = parent == null ? void 0 : parent.parent; 35218 } 35219 }); 35220 watch( 35221 () => expandRowKeys.value, 35222 () => { 35223 updateTreeData(true); 35224 } 35225 ); 35226 watch( 35227 () => normalizedData.value, 35228 () => { 35229 updateTreeData(); 35230 } 35231 ); 35232 watch( 35233 () => treeData.value, 35234 () => { 35235 processedItems.value = createProcessedItems(props.data || []); 35236 }, 35237 { 35238 deep: true, 35239 immediate: true 35240 } 35241 ); 35242 watch( 35243 () => props.activeKey, 35244 () => { 35245 processedItems.value = createProcessedItems(props.data || []); 35246 } 35247 ); 35248 return { 35249 processedItems, 35250 hasSubItem, 35251 toggleTreeExpansion,
35252 updateTreeExpandKeys, 35253 updateTreeData, 35254 isSeparator, 35255 handleFocusout, 35256 handleFocusin 35257 }; 35258} 35259var __async$1 = (__this, __arguments, generator) => { 35260 return new Promise((resolve2, reject) => { 35261 var fulfilled = (value) => { 35262 try { 35263 step(generator.next(value)); 35264 } catch (e) { 35265 reject(e); 35266 } 35267 }; 35268 var rejected = (value) => { 35269 try { 35270 step(generator.throw(value)); 35271 } catch (e) { 35272 reject(e); 35273 } 35274 }; 35275 var step = (x) => x.done ? resolve2(x.value) : Promise.resolve(x.value).then(fulfilled, rejected); 35276 step((generator = generator.apply(__this, __arguments)).next()); 35277 }); 35278}; 35279function useA11y(props, emit, toggleTreeExpansion, activeItem) { 35280 const instance = getCurrentInstance(); 35281 let treeNode; 35282 let treeitems; 35283 onMounted(() => { 35284 buildA11y(); 35285 }); 35286 const handleItemKeydown = (event) => __async$1(this, null, function* () { 35287 var _a; 35288 const { processedItem, originalEvent } = event; 35289 const target = originalEvent.currentTarget; 35290 const keyCode = originalEvent.code; 35291 let flag = false; 35292 switch (keyCode) { 35293 case EVENT_CODE.up: 35294 setFocusToPreviousTreeitem(target); 35295 flag = true; 35296 break; 35297 case EVENT_CODE.down: 35298 setFocusToNextTreeitem(target); 35299 flag = true; 35300 break; 35301 case EVENT_CODE.right: 35302 if (isExpandable(target)) { 35303 if (isExpanded(target)) { 35304 setFocusToNextTreeitem(target); 35305 } else { 35306 expandTreeitem(processedItem); 35307 } 35308 } 35309 flag = true; 35310 break; 35311 case EVENT_CODE.left: 35312 if (isExpandable(target) && isExpanded(target)) { 35313 collapseTreeitem(processedItem); 35314 flag = true; 35315 } else { 35316 if (isInSubtree(target)) { 35317 setFocusToParentTreeitem(target); 35318 flag = true; 35319 } 35320 } 35321 break; 35322 case EVENT_CODE.home: 35323 setFocusToTreeitem(treeitems[0]); 35324 flag = true; 35325 break; 35326 case EVENT_CODE.end: 35327 setFocusEndTreeitem(); 35328 flag = true; 35329 break; 35330 case EVENT_CODE.space: 35331 case EVENT_CODE.enter: 35332 case EVENT_CODE.numpadEnter: 35333 if ((_a = processedItem.item) == null ? void 0 : _a.title) { 35334 return; 35335 } 35336 toggleTreeExpansion(processedItem); 35337 if (resolve(processedItem.item["url"]) || resolve(processedItem.item["disabled"])) { 35338 flag = false; 35339 } else { 35340 flag = true; 35341 if (isEmpty(processedItem.items)) { 35342 resolve(processedItem.item["command"], { 35343 originalEvent, 35344 item: processedItem.item 35345 }); 35346 yield nextTick(); 35347 if (props.autoActive) { 35348 activeItem.value = processedItem; 35349 } 35350 emit("select", event); 35351 } 35352 } 35353 } 35354 if (flag) { 35355 originalEvent.stopPropagation(); 35356 originalEvent.preventDefault(); 35357 } 35358 }); 35359 const setFocusToPreviousTreeitem = (treeitem) => { 35360 const visibleTreeitems = getVisibleTreeitems(); 35361 let prevItem; 35362 for (let i = 0; i < visibleTreeitems.length; i++) { 35363 const ti = visibleTreeitems[i]; 35364 if (ti === treeitem) { 35365 break; 35366 } 35367 prevItem = ti; 35368 } 35369 if (prevItem) { 35370 setFocusToTreeitem(prevItem); 35371 } 35372 }; 35373 const setFocusToNextTreeitem = (treeitem) => { 35374 const visibleTreeitems = getVisibleTreeitems(); 35375 let nextItem; 35376 for (let i = visibleTreeitems.length - 1; i >= 0; i--) { 35377 const ti = visibleTreeitems[i]; 35378 if (ti === treeitem) { 35379 break; 35380 } 35381 nextItem = ti; 35382 } 35383 if (nextItem) { 35384 setFocusToTreeitem(nextItem); 35385 } 35386 }; 35387 const getVisibleTreeitems = () => { 35388 const items = []; 35389 for (let i = 0; i < treeitems.length; i++) { 35390 const ti = treeitems[i]; 35391 if (isVisible2(ti)) { 35392 items.push(ti); 35393 } 35394 } 35395 return items; 35396 }; 35397 const isMenuVisible = (el) => { 35398 const style = window.getComputedStyle(el); 35399 return style.display !== "none" && style.visibility !== "hidden" && el.offsetParent !== null && el.clientHeight > 0; 35400 }; 35401 const isVisible2 = (treeitem) => { 35402 if (treeitem.getAttribute("aria-hidden") === "true" || !isMenuVisible(treeitem)) { 35403 return false;
35404 } 35405 if (isInSubtree(treeitem)) { 35406 const parentTreeitem = getParentTreeitem(treeitem); 35407 if (!parentTreeitem || parentTreeitem.getAttribute("aria-expanded") === "false") { 35408 return false; 35409 } 35410 } 35411 return true; 35412 }; 35413 const isInSubtree = (treeitem) => { 35414 if (treeitem.parentNode && treeitem.parentNode.parentNode) { 35415 return treeitem.parentNode.parentNode.getAttribute("role") === "group"; 35416 } 35417 /* istanbul ignore next @preserve */ 35418 return false; 35419 }; 35420 const getParentTreeitem = (treeitem) => { 35421 let node = treeitem.parentNode; 35422 if (node) { 35423 node = node.parentNode; 35424 if (node) { 35425 node = node.previousElementSibling; 35426 if (node && node.getAttribute("role") === "treeitem") { 35427 return node; 35428 } 35429 } 35430 } 35431 /* istanbul ignore next @preserve */ 35432 return null; 35433 }; 35434 const isExpandable = (treeitem) => { 35435 return treeitem.hasAttribute("aria-expanded"); 35436 }; 35437 const isExpanded = (treeitem) => { 35438 return treeitem.getAttribute("aria-expanded") === "true"; 35439 }; 35440 const expandTreeitem = (processedItem) => { 35441 toggleTreeExpansion(processedItem, true); 35442 }; 35443 const collapseTreeitem = (processedItem) => { 35444 toggleTreeExpansion(processedItem, false); 35445 }; 35446 const setFocusToParentTreeitem = (treeitem) => { 35447 if (isInSubtree(treeitem)) { 35448 const parentTreeItem = treeitem.parentNode.parentNode.previousElementSibling; 35449 setFocusToTreeitem(parentTreeItem); 35450 } 35451 }; 35452 const setFocusToTreeitem = (treeitem) => { 35453 treeitem.focus(); 35454 }; 35455 const setFocusEndTreeitem = () => { 35456 const visibleTreeitems = getVisibleTreeitems(); 35457 setFocusToTreeitem(visibleTreeitems[visibleTreeitems.length - 1]); 35458 }; 35459 const buildA11y = () => { 35460 treeNode = instance.vnode.el; 35461 treeitems = treeNode.querySelectorAll('[role="treeitem"]'); 35462 }; 35463 return { 35464 buildA11y, 35465 handleItemKeydown 35466 }; 35467} 35468var __defProp$2 = Object.defineProperty; 35469var __defProps$1 = Object.defineProperties; 35470var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors; 35471var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols; 35472var __hasOwnProp$2 = Object.prototype.hasOwnProperty; 35473var __propIsEnum$2 = Object.prototype.propertyIsEnumerable; 35474var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 35475var __spreadValues$2 = (a, b) => { 35476 for (var prop in b || (b = {})) 35477 if (__hasOwnProp$2.call(b, prop)) 35478 __defNormalProp$2(a, prop, b[prop]); 35479 if (__getOwnPropSymbols$2) 35480 for (var prop of __getOwnPropSymbols$2(b)) { 35481 if (__propIsEnum$2.call(b, prop)) 35482 __defNormalProp$2(a, prop, b[prop]); 35483 } 35484 return a; 35485}; 35486var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b)); 35487var __async = (__this, __arguments, generator) => { 35488 return new Promise((resolve2, reject) => { 35489 var fulfilled = (value) => { 35490 try { 35491 step(generator.next(value)); 35492 } catch (e) { 35493 reject(e); 35494 } 35495 }; 35496 var rejected = (value) => { 35497 try { 35498 step(generator.throw(value)); 35499 } catch (e) { 35500 reject(e); 35501 } 35502 }; 35503 var step = (x) => x.done ? resolve2(x.value) : Promise.resolve(x.value).then(fulfilled, rejected); 35504 step((generator = generator.apply(__this, __arguments)).next()); 35505 }); 35506}; 35507const _imports_0 = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMF80NzkzOF8xNzQ4KSI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzMuNDc4NyA0My41NDkyQzI3LjEyNzkgNDQuMjc3IDIyLjU2OTUgNTAuMDE1NSAyMy4yOTc0IDU2LjM2NjNMMjcuNTE0OCA5My4xNjM3TDI3LjUxNDkgOTMuMTYzN0wzMy4wMDg5IDE0MS4wOTlDMzMuNzM2NyAxNDcuNDUgMzkuNDc1MSAxNTIuMDA4IDQ1LjgyNiAxNTEuMjgxTDE0OC4xNjkgMTM5LjU1MUMxNTQuNTIgMTM4LjgyMyAxNTkuMDc4IDEzMy4wODUgMTU4LjM1IDEyNi43MzRMMTUwLjM4MyA1Ny4yMTgzQzE0OS42NTUgNTAuODY3NSAxNDMuOTE3IDQ2LjMwOTIgMTM3LjU2NiA0Ny4wMzcxTDg4LjAzMyA1Mi43MTQxTDc4Ljg1MjcgNDMuMDA4OUM3Ni4zNDkyIDQwLjM2MjMgNzIuNzQ1NyAzOS4wNDg4IDY5LjEyNjIgMzkuNDYzNkwzMy40Nzg3IDQzLjU0OTJaIiBmaWxsPSIjNjQ4Q0ZFIi8+CjxwYXRoIGQ9Ik0xMzYuOTc2IDQ5LjM2MTFMODUuMDg2IDU1LjM3NzdMMTI5LjY0MyA2NC43MkwxMzkuMjMxIDYzLjgyMjFMMTM2Ljk3NiA0OS4zNjExWiIgZmlsbD0iIzI1MzhCRiIvPgo8cGF0aCBkPSJNMzUuMT
35507EzIDYxLjAwNDNDMzUuMTEzIDYxLjAwNDMgMTA4LjU0OSA1MC40MDE4IDEzNC4zMDQgNTQuNDgwNkMxMzYuODY5IDc2Ljg2MjcgMTQ2Ljk5NiAxMzkuODk1IDE0Ni45OTYgMTM5Ljg5NUw0Ni45NDUyIDE1MS4zNjJMMzUuMTEzIDYxLjAwNDNaIiBmaWxsPSJ3aGl0ZSIvPgo8bWFzayBpZD0ibWFzazBfNDc5MzhfMTc0OCIgc3R5bGU9Im1hc2stdHlwZTphbHBoYSIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iMzUiIHk9IjUzIiB3aWR0aD0iMTEyIiBoZWlnaHQ9Ijk5Ij4KPHBhdGggZD0iTTM1LjExMyA2MS4wMDQzQzM1LjExMyA2MS4wMDQzIDEwOC41NDkgNTAuNDAxOCAxMzQuMzA0IDU0LjQ4MDZDMTM2Ljg2OSA3Ni44NjI3IDE0Ni45OTYgMTM5Ljg5NSAxNDYuOTk2IDEzOS44OTVMNDYuOTQ1MiAxNTEuMzYyTDM1LjExMyA2MS4wMDQzWiIgZmlsbD0id2hpdGUiLz4KPC9tYXNrPgo8ZyBtYXNrPSJ1cmwoI21hc2swXzQ3OTM4XzE3NDgpIj4KPHJlY3QgeD0iLTUxLjkwMTQiIHk9IjY1Ljc1MTMiIHdpZHRoPSIxODcuMjgyIiBoZWlnaHQ9IjE0NC42NjciIHRyYW5zZm9ybT0icm90YXRlKC02LjUzODE2IC01MS45MDE0IDY1Ljc1MTMpIiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXJfNDc5MzhfMTc0OCkiLz4KPC9nPgo8cGF0aCBkPSJNMjYuMTk0NyA4MC4yNDAxQzI1Ljg2ODggNzguMTY0NCAyNy4zMzY5IDc2LjIzNTEgMjkuNDI0MyA3NS45OTU5TDE0Ni41ODUgNjIuNTY4QzE0OC42NzIgNjIuMzI4OCAxNTAuNTM5IDYzLjg3NTkgMTUwLjY5MSA2NS45NzE1TDE1Ni41ODIgMTQ3LjEyQzE1Ni43MjYgMTQ5LjA5NiAxNTUuMjg2IDE1MC44MzMgMTUzLjMxOCAxNTEuMDU4TDQyLjg4NzIgMTYzLjcxNUM0MC45MTkyIDE2My45NCAzOS4xMjM0IDE2Mi41NzQgMzguODE2MSAxNjAuNjE3TDI2LjE5NDcgODAuMjQwMVoiIGZpbGw9IiMyNTM4QkYiLz4KPHBhdGggZD0iTTIyLjU2MzUgODMuNTMyMkMyMi4yMDc0IDgxLjMwMjcgMjMuNzgzIDc5LjIyNjYgMjYuMDI2IDc4Ljk2OTVMMTUxLjA5NCA2NC42MzU1QzE1My4zMzcgNjQuMzc4NCAxNTUuMzQxIDY2LjA0NDIgMTU1LjQ5OSA2OC4yOTY0TDE2MS4xNzIgMTQ5LjM2NUMxNjEuMzIgMTUxLjQ4MSAxNTkuNzc2IDE1My4zMzggMTU3LjY2OSAxNTMuNThMMzkuNzQ0OSAxNjcuMDk1QzM3LjYzNzkgMTY3LjMzNiAzNS43MTQyIDE2NS44NzcgMzUuMzc5OCAxNjMuNzgyTDIyLjU2MzUgODMuNTMyMloiIGZpbGw9IiNBOENDRjgiLz4KPHJlY3QgeD0iNjYuMjIyMiIgeT0iMTM2LjQ1MSIgd2lkdGg9IjU4LjMxNTIiIGhlaWdodD0iNS42MDcyMyIgcng9IjIuODAzNjIiIHRyYW5zZm9ybT0icm90YXRlKC02LjU0IDY2LjIyMjIgMTM2LjQ1MSkiIGZpbGw9IiMyNTM4QkYiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03Mi40Mjk4IDk3LjkwOTFDNzQuMzY3MyA5Ni4wNzQzIDc3LjM4MjUgOTguMzYzNSA3Ni4xMzU4IDEwMC43MjNMNzMuMDUzOSAxMDYuNTU1TDc3LjU4OTYgMTExLjM0NUM3OS40MjQ0IDExMy4yODIgNzcuMTM1MiAxMTYuMjk3IDc0Ljc3NiAxMTUuMDUxTDY4Ljk0MzcgMTExLjk2OUw2NC4xNTQgMTE2LjUwNUM2Mi4yMTY0IDExOC4zMzkgNTkuMjAxMiAxMTYuMDUgNjAuNDQ3OSAxMTMuNjkxTDYzLjUyOTggMTA3Ljg1OUw1OC45OTQxIDEwMy4wNjlDNTcuMTU5MyAxMDEuMTMxIDU5LjQ0ODUgOTguMTE2MiA2MS44MDc4IDk5LjM2MjlMNjcuNjQwMSAxMDIuNDQ1TDcyLjQyOTggOTcuOTA5MVoiIGZpbGw9IiMyNTM4QkYiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMjEuNzc0IDkyLjMwMThDMTIzLjcxMSA5MC40NjcxIDEyNi43MjYgOTIuNzU2MyAxMjUuNDggOTUuMTE1NUwxMjIuMzk4IDEwMC45NDhMMTI2LjkzMyAxMDUuNzM4QzEyOC43NjggMTA3LjY3NSAxMjYuNDc5IDExMC42OSAxMjQuMTIgMTA5LjQ0NEwxMTguMjg3IDEwNi4zNjJMMTEzLjQ5OCAxMTAuODk3QzExMS41NiAxMTIuNzMyIDEwOC41NDUgMTEwLjQ0MyAxMDkuNzkyIDEwOC4wODRMMTEyLjg3NCAxMDIuMjUxTDEwOC4zMzggOTcuNDYxN0MxMDYuNTAzIDk1LjUyNDIgMTA4Ljc5MiA5Mi41MDkgMTExLjE1MiA5My43NTU3TDExNi45ODQgOTYuODM3NkwxMjEuNzc0IDkyLjMwMThaIiBmaWxsPSIjMjUzOEJGIi8+CjxwYXRoIGQ9Ik0tMjguMTE1NSAyMjEuNTU5Qy0zMS4wNjUgMjE4LjcxMyAtMzEuMTQ5IDIxNC4wMTUgLTI4LjMwMzEgMjExLjA2NUwyMy4yODk0IDE1Ny41OTRMMzMuOTcwNCAxNjcuOUwtMTcuNjIyMSAyMjEuMzcxQy0yMC40Njc5IDIyNC4zMiAtMjUuMTY2IDIyNC40MDQgLTI4LjExNTUgMjIxLjU1OVoiIGZpbGw9IiM2NDhDRkUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04Ni41NjU2IDE2OS4wNzZDMTEwLjgxOCAxNTcuMjM0IDEyMC44NzkgMTI3Ljk3NCAxMDkuMDM4IDEwMy43MjJDOTcuMTk2MSA3OS40Njk1IDY3LjkzNjIgNjkuNDA4NCA0My42ODM4IDgxLjI0OTlDMTkuNDMxNCA5My4wOTEzIDkuMzcwNCAxMjIuMzUxIDIxLjIxMTkgMTQ2LjYwNEMzMy4wNTMzIDE3MC44NTYgNjIuMzEzMiAxODAuOTE3IDg2LjU2NTYgMTY5LjA3NlpNODEuOTkyIDE1OS43MDhDMTAxLjA3MSAxNTAuMzkzIDEwOC45ODUgMTI3LjM3NSA5OS42Njk5IDEwOC4yOTZDOTAuMzU0NiA4OS4yMTc5IDY3LjMzNjkgODEuMzAzMiA0OC4yNTgzIDkwLjYxODVDMjkuMTc5OCA5OS45MzM4IDIxLjI2NTEgMTIyLjk1MiAzMC41ODA0IDE0Mi4wM0MzOS44OTU2IDE2MS4xMDkgNjIuOTEzNCAxNjkuMDIzIDgxLjk5MiAxNTkuNzA4WiIgZmlsbD0iIzY0OENGRSIvPgo8ZyBvcGFjaXR5PSIwLjQiPgo8bWFzayBpZD0ibWFzazFfNDc5MzhfMTc0OCIgc3R5bGU9Im1hc2stdHlwZTphbHBoYSIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iLTMxIiB5PSIxNTciIHdpZHRoPSI2NSIgaGVpZ2h0PSI2NyI+CjxwYXRoIGQ9Ik0tMjguMTE2IDIyMS41NTlDLTMxLjA2NTUgMjE4LjcxMyAtMzEuMTQ5NSAyMTQuMDE1IC0yOC4zMDM2IDIxMS4wNjVMMjMuMjg4OSAxNTcuNTk0TDMzLjk3IDE2Ny45TC0xNy42MjI1IDIyMS4zNzFDLTIwLjQ2ODQgMjI0LjMyMSAtMjUuMTY2NSAyMjQuNDA1IC0yOC4xMTYgMjIxLjU1OVoiIGZpbGw9IiM2NDhDRkUiLz4KPC9tYXNrPgo8ZyBtYXNrPSJ1cmwoI21hc2sxXzQ3OTM4XzE3NDgpIj4KPHJlY3QgeD0iLTMzLjQ3MTciIHk9IjIxNi43MDMiIHdpZHRoPSI4MS42NDEiIGhlaWdodD0iMTUuMjEzNCIgdHJhbnNmb3JtPSJyb3RhdGUoLTQ2LjAyNDQgLTMzLjQ3MTcgMjE2LjcwMykiIGZpbGw9InVybCgjcGFpbnQxX2xpbmVhcl80NzkzOF8xNzQ4KSIvPgo8L2c+CjwvZz4KPHJlY3QgeD0iMjMuOTg3MyIgeT0iMTU2LjQ4MyIgd2lkdGg9IjMuMDQwNjUiIGhlaWdodD0iMTQuOTg3NyIgcng9IjEuNTIwMzMiIHRyYW5zZm9ybT0icm90YXRlKC00Ni4wMjQ0IDIzLjk4NzMgMTU2LjQ4MykiIGZpbGw9IiMyNTM4QkYiLz4KPHJlY3QgeD0iMjIuMjQ0MSIgeT0iMTU4LjYxOCIgd2lkdGg9IjMuMDQwNjUiIGhlaWdodD0iMTQuOTg3NyIgcng9IjEuNTIwMzMiIHRyYW5zZm9ybT0icm90YXRlKC00Ni4wMjQ0IDIyLjI0NDEgMTU4LjYxOCkiIGZpbGw9IiMyNTM4QkYiLz4KPHBhdGggZD0iTTEyMy44NDcgMzEuNDY0QzEyMi44MDMgMzEuMTY0NyAxMjIuMjU2IDMwLjAxMzggMTIyLjY4MiAyOS4wMDk1TDEyMy44NTkgMjYuMjI4QzEyNC4yODUgMjUuMjIzNiAxMjUuNDg5IDI0LjgxOTcgMTI2LjQyOSAyNS4zNjY1TDEzOC4xNjEgMzIuMTk0QzEzOC44NzYgMzIuNjEwMiAxMzkuMTcgMzMuNDk2OSAxMzguODQ2ID
35507M0LjI2MTVDMTM4LjUyMiAzNS4wMjYyIDEzNy42ODIgMzUuNDI5MiAxMzYuODg3IDM1LjIwMTNMMTIzLjg0NyAzMS40NjRaIiBmaWxsPSIjMEU3MkVEIi8+CjxwYXRoIGQ9Ik0xNDIuNzY4IDUuNjk1NDdDMTQyLjQzNiA0LjY2ODIyIDE0My4wNjYgMy41Nzc4MiAxNDQuMTE5IDMuMzU2NjNMMTUwLjMzIDIuMDUxODhDMTUxLjM4MyAxLjgzMDY5IDE1Mi4zOTMgMi41NzY2NSAxNTIuNDk3IDMuNjUxOTRMMTU0Ljg3MiAyOC4yOTU0QzE1NC45NjEgMjkuMjE3MiAxNTQuMzQ0IDMwLjA1ODkgMTUzLjQ0MiAzMC4yNDg1TDE1Mi40NzEgMzAuNDUyNEMxNTEuNTY4IDMwLjY0MiAxNTAuNjY5IDMwLjExODcgMTUwLjM4NCAyOS4yMzgyTDE0Mi43NjggNS42OTU0N1oiIGZpbGw9IiMwRTcyRUQiLz4KPHBhdGggZD0iTTE4Ni4wNzEgNzIuNjY4M0MxODYuODcgNzMuMzYzNyAxODguMDkxIDczLjIyMzggMTg4LjcxNCA3Mi4zNjU0TDE5MC41ODMgNjkuNzkzN0MxOTEuMjA3IDY4LjkzNTMgMTkwLjk2NyA2Ny43MjUzIDE5MC4wNjQgNjcuMTczNkwxNzEuNTMzIDU1Ljg1MzVDMTcwLjgzNCA1NS40MjY1IDE2OS45MjUgNTUuNjA5IDE2OS40NDIgNTYuMjczNEMxNjguOTU5IDU2LjkzNzggMTY5LjA2NCA1Ny44NjI0IDE2OS42ODIgNTguNDAwN0wxODYuMDcxIDcyLjY2ODNaIiBmaWxsPSIjMEU3MkVEIi8+CjwvZz4KPGRlZnM+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhcl80NzkzOF8xNzQ4IiB4MT0iLTIxLjk3MTkiIHkxPSIxODkuNTExIiB4Mj0iOTMuMTA3OSIgeTI9Ijc3LjQ0NjgiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzlGQTRDNyIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM5RkE0QzciIHN0b3Atb3BhY2l0eT0iMCIvPgo8L2xpbmVhckdyYWRpZW50Pgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MV9saW5lYXJfNDc5MzhfMTc0OCIgeDE9Ii0xMy4wNjE0IiB5MT0iMjMwLjk2NSIgeDI9Ii0xMC44OTg3IiB5Mj0iMjEyLjc2NSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjMjUzOEJGIi8+CjxzdG9wIG9mZnNldD0iMC45MjcwODMiIHN0b3AtY29sb3I9IiMyNTM4QkYiIHN0b3Atb3BhY2l0eT0iMCIvPgo8L2xpbmVhckdyYWRpZW50Pgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzQ3OTM4XzE3NDgiPgo8cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K"; 35508const _hoisted_1$1 = ["data-testid"]; 35509const _hoisted_2$1 = ["aria-label"]; 35510const _sfc_main$1 = /* @__PURE__ */ defineComponent(__spreadProps$1(__spreadValues$2({}, { 35511 name: "ZmSideMenu" 35512}), { 35513 __name: "side-menu", 35514 props: sideMenuProps, 35515 emits: sideMenuEmits, 35516 setup(__props, { emit: __emit }) { 35517 const props = __props; 35518 const emit = __emit; 35519 const ns = useNamespace("side-menu"); 35520 const menuId = useId().value; 35521 const menuRef = ref(); 35522 const width = ref(props.width); 35523 const activeItem = ref(); 35524 const dragoverItem = ref(); 35525 const usetransitionWidth = ref(false); 35526 const height = computed(() => { 35527 return typeof props.height === "number" ? `${props.height}px` : props.height; 35528 }); 35529 const isRTL = useRTL(); 35530 const { resizeProxy, resizeProxyVisible, handleMouseMove, handleMouseDown, handleMouseOut } = useResize(props, emit, width, isRTL); 35531 const { 35532 processedItems, 35533 hasSubItem, 35534 toggleTreeExpansion, 35535 updateTreeData, 35536 updateTreeExpandKeys, 35537 handleFocusout, 35538 handleFocusin 35539 } = useTree(props, activeItem); 35540 const { handleItemKeydown, buildA11y } = useA11y(props, emit, toggleTreeExpansion, activeItem); 35541 const handleItemClick = (event) => __async(this, null, function* () { 35542 const { processedItem } = event; 35543 toggleTreeExpansion(processedItem); 35544 if (isEmpty(processedItem.items)) { 35545 yield nextTick(); 35546 if (props.autoActive) { 35547 activeItem.value = processedItem; 35548 } 35549 emit("select", event); 35550 } 35551 }); 35552 const handleDragstart = (e) => { 35553 emit("dragstart", e); 35554 }; 35555 const handleDrop = (e) => { 35556 emit("drop", e); 35557 dragoverItem.value = void 0; 35558 }; 35559 const handleDragover = (e) => { 35560 emit("dragover", e); 35561 dragoverItem.value = e.processedItem; 35562 }; 35563 const handleDragleave = (e) => { 35564 emit("dragleave", e); 35565 dragoverItem.value = void 0; 35566 }; 35567 watchEffect(() => { 35568 if (props.expandRowKeys) { 35569 updateTreeExpandKeys(props.expandRowKeys); 35570 } 35571 updateTreeData(); 35572 }); 35573 watch( 35574 () => props.data, 35575 () => __async(this, null, function* () { 35576 yield nextTick(); 35577 buildA11y(); 35578 }) 35579 ); 35580 return (_ctx, _cache) => { 35581 return openBlock(), createElementBlock("div", { 35582 class: normalizeClass(unref(ns).b()), 35583 "data-testid": _ctx.testId, 35584 style: normalizeStyle({ 35585 width: width.value + "px", 35586 transition: usetransitionWidth.value ? "width 0.3s ease-in-out" : "none" 35587 }), 35588 onMousemove: _cache[0] || (_cache[0] = //@ts-ignore 35589 (...args) => unref(handleMouseMove) && unref(handleMouseMove)(...args)), 35590 onMouseout: _cache[1] || (_cache[1] = //@ts-ignore 35591 (...args) => unref(handleMouseOut) && unref(handleMouseOut)(...args)), 35592 onMousedown: _cache[2] || (_cache[2] = //@ts-ignore 35593 (...args) => unref(handleMouseDown) && unref(handleMouseDown)(...args)), 35594 onFocusout: _cache[3] || (_cache[3] = //@ts-ignore 35595 (...args) => unref(handleFocusout) && unref(handleFocusout)(...args)), 35596 onFocusin: _cache[4] || (_cache[4] = //@ts-ignore 35597 (...args) => unref(handleFocusin) && unref(handleFocusin)(...args)) 35598 }, [ 35599 renderSlot(_ctx.$slots, "start"), 35600 createVNode(unref(ZmScrollbar), { 35601 "wrap-style": { height: height.value } 35602 }, { 35603 default: withCtx(() => [ 35604 unref(processedItems).length > 0 ? (openBlock(), createElementBlock("nav", { 35605 key: 0, 35606 "aria-label": _ctx.ariaLabel, 35607 class: normalizeClass(unref(ns).e("nav")) 35608 }, [ 35609 createVNode(_sfc_main$2, { 35610 id: unref(menuId) + "_list", 35611 ref_key: "menuRef", 35612 ref: menuRef, 35613 role: "tree", 35614 "menu-id": unref(menuId), 35615 class: normalizeClass(unref(ns).e("list")), 35616 items: unref(processedItems), 35617 level: 0, 35618 "active-item": activeItem.value, 35619 "dragover-item": dragoverItem.value, 35620 templates: _ctx.$slots, 35621 "aria-label": _ctx.ariaLabel, 35622 draggable: _ctx.draggable, 35623 "has-sub-item": unref(hasSubItem),
35624 onItemClick: handleItemClick, 35625 onItemKeyboard: unref(handleItemKeydown), 35626 onDragstart: handleDragstart, 35627 onDrop: handleDrop, 35628 onDragover: handleDragover, 35629 onDragleave: handleDragleave 35630 }, null, 8, ["id", "menu-id", "class", "items", "active-item", "dragover-item", "templates", "aria-label", "draggable", "has-sub-item", "onItemKeyboard"]) 35631 ], 10, _hoisted_2$1)) : renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [ 35632 createBaseVNode("div", { 35633 class: normalizeClass(unref(ns).e("empty")), 35634 style: normalizeStyle({ height: height.value }) 35635 }, _cache[5] || (_cache[5] = [ 35636 createBaseVNode("img", { src: _imports_0 }, null, -1) 35637 ]), 6) 35638 ]) 35639 ]), 35640 _: 3 35641 }, 8, ["wrap-style"]), 35642 renderSlot(_ctx.$slots, "end"), 35643 withDirectives(createBaseVNode("div", { 35644 ref_key: "resizeProxy", 35645 ref: resizeProxy, 35646 class: normalizeClass(unref(ns).e("column-resize-proxy")) 35647 }, null, 2), [ 35648 [vShow, unref(resizeProxyVisible)] 35649 ]) 35650 ], 46, _hoisted_1$1); 35651 }; 35652 } 35653})); 35654const ZmSideMenu = withInstall(_sfc_main$1); 35655const ZmContextMenuHolder = pcm.Holder; 35656const messages = { 35657 "en-US": { 35658 "messagebox": { 35659 "confirm": "OK", 35660 "cancel": "Cancel", 35661 "showAgain": "Don't show again" 35662 } 35663 }, 35664 "de-DE": { 35665 "messagebox": { 35666 "confirm": "Ok", 35667 "cancel": "Abbrechen", 35668 "showAgain": "Nicht erneut anzeigen" 35669 } 35670 }, 35671 "es-ES": { 35672 "messagebox": { 35673 "confirm": "Aceptar", 35674 "cancel": "Cancelar", 35675 "showAgain": "No volver a mostrar" 35676 } 35677 }, 35678 "fr-FR": { 35679 "messagebox": { 35680 "confirm": "OK", 35681 "cancel": "Annuler", 35682 "showAgain": "Ne plus afficher" 35683 } 35684 }, 35685 "id-ID": { 35686 "messagebox": { 35687 "confirm": "Oke", 35688 "cancel": "Batal", 35689 "showAgain": "Jangan tampilkan lagi" 35690 } 35691 }, 35692 "it-IT": { 35693 "messagebox": { 35694 "confirm": "OK", 35695 "cancel": "Annulla", 35696 "showAgain": "Non mostrare più" 35697 } 35698 }, 35699 "jp-JP": { 35700 "messagebox": { 35701 "confirm": "OK", 35702 "cancel": "ãã£ã³ã»ã«", 35703 "showAgain": "ä»å¾è¡¨ç¤ºããªã" 35704 } 35705 }, 35706 "ko-KO": { 35707 "messagebox": { 35708 "confirm": "íì¸", 35709 "cancel": "ì·¨ì", 35710 "showAgain": "ë¤ì íì ì í¨" 35711 } 35712 }, 35713 "nl-NL": { 35714 "messagebox": { 35715 "confirm": "OK", 35716 "cancel": "Annuleren", 35717 "showAgain": "Niet meer weergeven" 35718 } 35719 }, 35720 "pl-PL": { 35721 "messagebox": { 35722 "confirm": "OK", 35723 "cancel": "Anuluj", 35724 "showAgain": "Nie pokazuj ponownie" 35725 } 35726 }, 35727 "pt-PT": { 35728 "messagebox": { 35729 "confirm": "OK", 35730 "cancel": "Cancelar", 35731 "showAgain": "Não mostrar novamente" 35732 } 35733 }, 35734 "ru-RU": { 35735 "messagebox": { 35736 "confirm": "ÐÐ", 35737 "cancel": "ÐÑмениÑÑ", 35738 "showAgain": "ÐолÑÑе не показÑваÑÑ" 35739 } 35740 }, 35741 "sv-SE": { 35742 "messagebox": { 35743 "confirm": "OK", 35744 "cancel": "Avbryt", 35745 "showAgain": "Visa inte igen" 35746 } 35747 }, 35748 "tr-TR": { 35749 "messagebox": { 35750 "confirm": "Tamam", 35751 "cancel": "İptal", 35752 "showAgain": "Bir daha gösterme" 35753 } 35754 }, 35755 "vi-VN": { 35756 "messagebox": { 35757 "confirm": "Ok", 35758 "cancel": "Há»§y", 35759 "showAgain": "Không hiá»n thá» lại" 35760 } 35761 }, 35762 "zh-CN": { 35763 "messagebox": { 35764 "confirm": "ç¡®å®", 35765 "cancel": "åæ¶", 35766 "showAgain": "ä¸åæ¾ç¤º" 35767 } 35768 }, 35769 "zh-TW": { 35770 "messagebox": { 35771 "confirm": "確å®", 35772 "cancel": "åæ¶", 35773 "showAgain": "ä¸å顯示" 35774 } 35775 } 35776}; 35777var __defProp$1 = Object.defineProperty; 35778var __defProps = Object.defineProperties; 35779var __getOwnPropDescs = Object.getOwnPropertyDescriptors; 35780var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols; 35781var __hasOwnProp$1 = Object.prototype.hasOwnProperty; 35782var __propIsEnum$1 = Object.prototype.propertyIsEnumerable; 35783var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 35784var __spreadValues$1 = (a, b) => { 35785 for (var prop in b || (b = {})) 35786 if (__hasOwnProp$1.call(b, prop)) 35787 __defNormalProp$1(a, prop, b[prop]); 35788 if (__getOwnPropSymbols$1) 35789 for (var prop of __getOwnPropSymbols$1(b)) { 35790 if (__propIsEnum$1.call(b, prop)) 35791 __defNormalProp$1(a, prop, b[prop]); 35792 } 35793 return a; 35794}; 35795var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b)); 35796const messageBoxProps = { 35797 zIndex: Number 35798}; 35799const messageBoxEmits = ["vanish", "action", "checkbox-change"];
35800const _sfc_main = defineComponent({ 35801 name: "ZmMessageBox", 35802 components: { 35803 ZmOverlay, 35804 ZmFocusTrap, 35805 ZmButton, 35806 ZmCheckbox, 35807 ZmThemeProvider 35808 }, 35809 inheritAttrs: false, 35810 props: messageBoxProps, 35811 emits: messageBoxEmits, 35812 setup(props, { emit }) { 35813 const ns = useNamespace("message-box"); 35814 const { focusTrapRef, startFocus, restoreFocus } = useFocusTrap(); 35815 const teleportedContextClass = useTeleportedContextClass({ teleported: true }); 35816 const { t } = useLocale(messages); 35817 const { nextZIndex } = useOverlayZIndex(); 35818 const { doAriaHidden, restoreAriaHidden } = useBodyAriaHidden(() => rootRef.value); 35819 const isChecked = ref(false); 35820 const { isDark } = useTheme(); 35821 const visible = ref(false); 35822 const state = reactive({ 35823 title: "", 35824 message: "", 35825 showCancelButton: false, 35826 action: "", 35827 confirmButtonText: "", 35828 cancelButtonText: "", 35829 isDangerConfirm: false, 35830 confirmButtonLoading: false, 35831 confirmButtonClass: "", 35832 cancelButtonClass: "", 35833 zIndex: props.zIndex || nextZIndex(), 35834 theme: void 0, 35835 beforeClose: null, 35836 width: "", 35837 customClass: "", 35838 dangerouslyUseHTMLString: false, 35839 showCheckbox: false, 35840 testId: void 0 35841 }); 35842 const themeResult = computed(() => { 35843 if (state.theme) { 35844 return state.theme; 35845 } 35846 return isDark.value ? "dark" : "light"; 35847 }); 35848 const style = computed(() => { 35849 const ret = {}; 35850 if (state.width) { 35851 ret.width = state.width; 35852 } 35853 return ret; 35854 }); 35855 const contentId = useId(); 35856 const titleId = useId(); 35857 const rootRef = ref(); 35858 const headerRef = ref(); 35859 const confirmRef = ref(); 35860 const confirmButtonClasses = computed(() => state.confirmButtonClass); 35861 const customClasses = computed(() => state.customClass); 35862 const beforeOpenHandler = () => { 35863 startFocus(); 35864 doAriaHidden(); 35865 }; 35866 const afterCloseHandler = () => { 35867 restoreFocus(); 35868 restoreAriaHidden(); 35869 emit("vanish"); 35870 };
35871 useLockscreen(visible); 35872 useEventListener("hashchange", () => { 35873 close(); 35874 }); 35875 function close(suppressPromiseReject) { 35876 /* istanbul ignore next @preserve */ 35877 if (!visible.value) { 35878 return; 35879 } 35880 visible.value = false; 35881 if (state.action) { 35882 emit("action", state.action, suppressPromiseReject); 35883 } 35884 } 35885 const handleAction = (action) => { 35886 state.action = action; 35887 if (state.beforeClose) { 35888 state.beforeClose(action, state, close); 35889 } else { 35890 close(); 35891 } 35892 }; 35893 const handleCheckboxChange = () => { 35894 emit("checkbox-change", isChecked.value); 35895 }; 35896 return __spreadProps(__spreadValues$1({ 35897 focusTrapRef 35898 }, toRefs(state)), { 35899 t, 35900 ns, 35901 teleportedContextClass, 35902 visible, 35903 contentId, 35904 titleId, 35905 confirmButtonClasses, 35906 customClasses, 35907 beforeOpenHandler, 35908 afterCloseHandler, 35909 rootRef, 35910 headerRef, 35911 confirmRef, 35912 close, 35913 handleAction, 35914 style, 35915 isChecked, 35916 handleCheckboxChange, 35917 themeResult, 35918 buildTestId, 35919 createThemeClassname 35920 }); 35921 } 35922}); 35923const _hoisted_1 = ["data-testid"]; 35924const _hoisted_2 = ["id"]; 35925const _hoisted_3 = ["id", "innerHTML"]; 35926const _hoisted_4 = ["id"]; 35927function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { 35928 const _component_zm_checkbox = resolveComponent("zm-checkbox"); 35929 const _component_zm_button = resolveComponent("zm-button"); 35930 const _component_zm_focus_trap = resolveComponent("zm-focus-trap"); 35931 const _component_zm_theme_provider = resolveComponent("zm-theme-provider"); 35932 const _component_zm_overlay = resolveComponent("zm-overlay"); 35933 return openBlock(), createBlock(Transition, { 35934 name: "fade-in-linear", 35935 onBeforeEnter: _ctx.beforeOpenHandler, 35936 onAfterLeave: _ctx.afterCloseHandler 35937 }, { 35938 default: withCtx(() => [ 35939 withDirectives(createVNode(_component_zm_overlay, { 35940 "z-index": _ctx.zIndex, 35941 class: normalizeClass([_ctx.teleportedContextClass, _ctx.createThemeClassname(_ctx.themeResult)]) 35942 }, { 35943 default: withCtx(() => [ 35944 createVNode(_component_zm_theme_provider, { 35945 theme: _ctx.themeResult, 35946 role: "alertdialog", 35947 "aria-labelledby": _ctx.titleId, 35948 "aria-describedby": _ctx.contentId, 35949 class: normalizeClass([`${_ctx.ns.namespace}-overlay-message-box`, _ctx.customClasses]) 35950 }, { 35951 default: withCtx(() => [ 35952 createVNode(_component_zm_focus_trap, { 35953 ref: "focusTrapRef", 35954 loop: "", 35955 trapped: _ctx.visible, 35956 "focus-trap-el": _ctx.rootRef, 35957 onReleaseRequested: _cache[3] || (_cache[3] = ($event) => _ctx.handleAction("cancel")) 35958 }, { 35959 default: withCtx(() => [ 35960 createBaseVNode("div", { 35961 ref: "rootRef", 35962 class: normalizeClass(_ctx.ns.b()), 35963 style: normalizeStyle(_ctx.style), 35964 "data-testid": _ctx.testId, 35965 tabindex: "-1" 35966 }, [ 35967 createBaseVNode("div", { 35968 ref: "headerRef", 35969 class: normalizeClass(_ctx.ns.e("header")) 35970 }, [ 35971 createBaseVNode("div", { 35972 id: _ctx.titleId, 35973 class: normalizeClass(_ctx.ns.e("title")) 35974 }, toDisplayString(_ctx.title), 11, _hoisted_2) 35975 ], 2), 35976 _ctx.dangerouslyUseHTMLString ? (openBlock(), createElementBlock("div", { 35977 key: 0, 35978 id: _ctx.contentId, 35979 class: normalizeClass(_ctx.ns.e("content")), 35980 innerHTML: _ctx.message 35981 }, null, 10, _hoisted_3)) : (openBlock(), createElementBlock("div", { 35982 key: 1, 35983 id: _ctx.contentId, 35984 class: normalizeClass(_ctx.ns.e("content")) 35985 }, toDisplayString(_ctx.message), 11, _hoisted_4)), 35986 createBaseVNode("div", { 35987 class: normalizeClass(_ctx.ns.e("footer")) 35988 }, [ 35989 _ctx.showCheckbox ? (openBlock(), createBlock(_component_zm_checkbox, { 35990 key: 0, 35991 modelValue: _ctx.isChecked, 35992 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.isChecked = $event), 35993 "test-id": _ctx.buildTestId(_ctx.testId, "-checkbox"), 35994 onChange: _ctx.handleCheckboxChange 35995 }, { 35996 default: withCtx(() => [ 35997 createTextVNode(toDisplayString(_ctx.t("messagebox.showAgain")), 1) 35998 ]), 35999 _: 1 36000 }, 8, ["modelValue", "test-id", "onChange"])) : createCommentVNode("", true), 36001 createBaseVNode("div", { 36002 class: normalizeClass(_ctx.ns.e("btns")) 36003 }, [ 36004 _ctx.showCancelButton ? (openBlock(), createBlock(_component_zm_button, { 36005 key: 0, 36006 class: normalizeClass([_ctx.cancelButtonClass]), 36007 "test-id": _ctx.buildTestId(_ctx.testId, "-cancel"), 36008 onClick: _cache[1] || (_cache[1] = ($event) => _ctx.handleAction("cancel")) 36009 }, { 36010 default: withCtx(() => [ 36011 createTextVNode(toDisplayString(_ctx.cancelButtonText || _ctx.t("messagebox.cancel")), 1) 36012 ]), 36013 _: 1 36014 }, 8, ["class", "test-id"])) : createCommentVNode("", true), 36015 createVNode(_component_zm_button, { 36016 ref: "confirmRef", 36017 danger: _ctx.isDangerConfirm, 36018 type: "primary", 36019 loading: _ctx.confirmButtonLoading, 36020 class: normalizeClass([_ctx.confirmButtonClasse
36020s]), 36021 "test-id": _ctx.buildTestId(_ctx.testId, "-confirm"), 36022 onClick: _cache[2] || (_cache[2] = ($event) => _ctx.handleAction("confirm")) 36023 }, { 36024 default: withCtx(() => [ 36025 createTextVNode(toDisplayString(_ctx.confirmButtonText || _ctx.t("messagebox.confirm")), 1) 36026 ]), 36027 _: 1 36028 }, 8, ["danger", "loading", "class", "test-id"]) 36029 ], 2) 36030 ], 2) 36031 ], 14, _hoisted_1) 36032 ]), 36033 _: 1 36034 }, 8, ["trapped", "focus-trap-el"]) 36035 ]), 36036 _: 1 36037 }, 8, ["theme", "aria-labelledby", "aria-describedby", "class"]) 36038 ]), 36039 _: 1 36040 }, 8, ["z-index", "class"]), [ 36041 [vShow, _ctx.visible] 36042 ]) 36043 ]), 36044 _: 1 36045 }, 8, ["onBeforeEnter", "onAfterLeave"]); 36046} 36047const MessageBoxConstructor = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]); 36048var __defProp = Object.defineProperty; 36049var __getOwnPropSymbols = Object.getOwnPropertySymbols; 36050var __hasOwnProp = Object.prototype.hasOwnProperty; 36051var __propIsEnum = Object.prototype.propertyIsEnumerable; 36052var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 36053var __spreadValues = (a, b) => { 36054 for (var prop in b || (b = {})) 36055 if (__hasOwnProp.call(b, prop)) 36056 __defNormalProp(a, prop, b[prop]); 36057 if (__getOwnPropSymbols) 36058 for (var prop of __getOwnPropSymbols(b)) { 36059 if (__propIsEnum.call(b, prop)) 36060 __defNormalProp(a, prop, b[prop]); 36061 } 36062 return a; 36063}; 36064const messageInstances = /* @__PURE__ */ new Map(); 36065const initInstance = (props, container, appContext = null) => { 36066 const vnode = createVNode(MessageBoxConstructor, props); 36067 vnode.appContext = appContext; 36068 render(vnode, container); 36069 document.body.appendChild(container.firstElementChild); 36070 return vnode.component; 36071}; 36072const genContainer = () => { 36073 return document.createElement("div"); 36074}; 36075const showMessage = (options, appContext) => { 36076 const container = genContainer(); 36077 options.onVanish = () => { 36078 render(null, container); 36079 messageInstances.delete(vm); 36080 }; 36081 options.onAction = (action, suppressPromiseReject) => { 36082 const { reject, resolve: resolve2 } = messageInstances.get(vm); 36083 if (action === "confirm") { 36084 resolve2(action); 36085 } else if (!suppressPromiseReject) { 36086 reject(action); 36087 } 36088 }; 36089 options.onCheckboxChange = (isChecked) => { 36090 var _a; 36091 (_a = options.checkboxChangeHandler) == null ? void 0 : _a.call(options, isChecked); 36092 }; 36093 const instance = initInstance(options, container, appContext); 36094 const vm = instance.proxy; 36095 for (const prop in options) { 36096 if (hasOwn(options, prop) && !hasOwn(vm.$props, prop)) { 36097 vm[prop] = options[prop]; 36098 } 36099 } 36100 vm.visible = true; 36101 return vm; 36102}; 36103function MessageBox(options, appContext) { 36104 /* istanbul ignore next @preserve */ 36105 if (!isClient) { 36106 return Promise.reject(); 36107 } 36108 return new Promise((resolve2, reject) => { 36109 const vm = showMessage(options, appContext != null ? appContext : MessageBox._context); 36110 messageInstances.set(vm, { 36111 options, 36112 resolve: resolve2, 36113 reject 36114 }); 36115 }); 36116} 36117const MESSAGE_BOX_TYPES = ["alert", "confirm"]; 36118const MESSAGE_BOX_DEFAULT_OPTS = { 36119 alert: {}, 36120 confirm: { 36121 showCancelButton: true 36122 } 36123}; 36124MESSAGE_BOX_TYPES.forEach((boxType) => { 36125 MessageBox[boxType] = messageBoxFactory(boxType); 36126}); 36127function messageBoxFactory(boxType) { 36128 return (message, title, options, appContext) => { 36129 return MessageBox( 36130 Object.assign( 36131 __spreadValues({ 36132 title, 36133 message 36134 }, MESSAGE_BOX_DEFAULT_OPTS[boxType]), 36135 options, 36136 { 36137 boxType 36138 } 36139 ), 36140 appContext 36141 ); 36142 }; 36143} 36144MessageBox.close = () => { 36145 messageInstances.forEach((_, vm) => { 36146 vm.close(); 36147 }); 36148 messageInstances.clear(); 36149}; 36150MessageBox._context = null; 36151const ZmMessageBox = MessageBox; 36152ZmMessageBox.install = (app) => { 36153 const appContext = app._context; 36154 const cleanupMessageBoxContext = () => { 36155 if (ZmMessageBox._context === appContext) { 36156 ZmMessageBox._context = null; 36157 } 36158 }; 36159 ZmMessageBox._context = appContext; 36160 const appWithOnUnmount = app; 36161 if (typeof appWithOnUnmount.onUnmount === "function") { 36162 appWithOnUnmount.onUnmount(cleanupMessageBoxContext); 36163 } else if (!appWithOnUnmount.__zoomMessageBoxContextCleanup) { 36164 const originalUnmount = app.unmount; 36165 appWithOnUnmount.__zoomMessageBoxContextCleanup = true; 36166 app.unmount = (...args) => { 36167 cleanupMessageBoxContext(); 36168 return originalUnmount.apply(app, args); 36169 }; 36170 }
36171 app.config.globalProperties.$alert = ZmMessageBox.alert; 36172 app.config.globalProperties.$confirm = ZmMessageBox.confirm; 36173}; 36174export { 36175 useLocale as A, 36176 ZmInfoPopover as B, 36177 ZmLoading as C, 36178 ZmAccordionItem as D, 36179 ZmSkeletonItem as E, 36180 ZmSkeleton as F, 36181 createContextMenu as G, 36182 announce as H, 36183 ZmContextMenuHolder as I, 36184 ZmDropdown as J, 36185 ZmDropdownItem as K, 36186 hasClass as L, 36187 ZmToast as Z, 36188 ZmContext as a, 36189 ZmInlineChevronIcon as b, 36190 ZmScrollbar as c, 36191 ZmSideMenu as d, 36192 ZmIcon as e, 36193 ZmButton as f, 36194 ZmTooltip as g, 36195 ZmBadge as h, 36196 ZmVisuallyHidden as i, 36197 ZmPopover as j, 36198 ZmDialog as k, 36199 ZmMessageBox as l, 36200 ZmLink as m, 36201 ZmCoachMark as n, 36202 ZmTag as o, 36203 ZmCoachMarkStep as p, 36204 ZmToggle as q, 36205 addClass as r, 36206 ZmAccordion as s, 36207 ZmForm as t, 36208 ZmSelect as u, 36209 ZmRadioGroup as v, 36210 ZmRadio as w, 36211 ZmTextarea as x, 36212 ZmCheckbox as y, 36213 ZmBanner as z 36214};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.