PageSourceSearch

https://zfgst1.zoomgov.com/fe-static/fe-frame-popups/chunks/zoom-ui-vue3.9uHRANFW.js

js zoomgov.com collected 2026-09-24 08:38:16 UTC 1,212,941 bytes, 36,214 lines download raw bytes

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 tả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.