@gzmjs/menu 0.3.0 → 0.3.2

package/dist/menu.es.js

@@ -1,653 +0,0 @@
-import { createStyleSheet, defineElement, iconCache, strAttr, boolAttr, iconTagName, badgeTagName, gzmFrame, baseStyle, isLeftCorner, isTopCorner, makeCorner, CornerHelper, xy } from "@gzmjs/ui-basic";
-import { ViewElement, ViewGroupElement } from "@gzmjs/mvvm";
-var __create$2 = Object.create;
-var __defProp$2 = Object.defineProperty;
-var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
-var __knownSymbol$2 = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
-var __typeError$2 = (msg) => {
-  throw TypeError(msg);
-};
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __name$2 = (target, value) => __defProp$2(target, "name", { value, configurable: true });
-var __decoratorStart$2 = (base) => [, , , __create$2(base?.[__knownSymbol$2("metadata")] ?? null)];
-var __decoratorStrings$2 = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
-var __expectFn$2 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$2("Function expected") : fn;
-var __decoratorContext$2 = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$2[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$2("Already initialized") : fns.push(__expectFn$2(fn || null)) });
-var __decoratorMetadata$2 = (array, target) => __defNormalProp$2(target, __knownSymbol$2("metadata"), array[3]);
-var __runInitializers$2 = (array, flags, self, value) => {
-  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
-  return value;
-};
-var __decorateElement$2 = (array, flags, name, decorators, target, extra) => {
-  var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
-  var j = k > 3 ? array.length + 1 : k ? s ? 1 : 2 : 0, key = __decoratorStrings$2[k + 5];
-  var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
-  var desc = k && (!p && !s && (target = target.prototype), k < 5 && (k > 3 || !p) && __getOwnPropDesc$2(k < 4 ? target : { get [name]() {
-    return __privateGet$1(this, extra);
-  }, set [name](x) {
-    return __privateSet$1(this, extra, x);
-  } }, name));
-  k ? p && k < 4 && __name$2(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name$2(target, name);
-  for (var i = decorators.length - 1; i >= 0; i--) {
-    ctx = __decoratorContext$2(k, name, done = {}, array[3], extraInitializers);
-    if (k) {
-      ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn$1(target, x) : (x) => name in x };
-      if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet$1 : __privateMethod$1)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
-      if (k > 2) access.set = p ? (x, y) => __privateSet$1(x, target, y, k ^ 4 ? extra : desc.set) : (x, y) => x[name] = y;
-    }
-    it = (0, decorators[i])(k ? k < 4 ? p ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
-    if (k ^ 4 || it === void 0) __expectFn$2(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
-    else if (typeof it !== "object" || it === null) __typeError$2("Object expected");
-    else __expectFn$2(fn = it.get) && (desc.get = fn), __expectFn$2(fn = it.set) && (desc.set = fn), __expectFn$2(fn = it.init) && initializers.unshift(fn);
-  }
-  return k || __decoratorMetadata$2(array, target), desc && __defProp$2(target, name, desc), p ? k ^ 4 ? extra : desc : target;
-};
-var __publicField$1 = (obj, key, value) => __defNormalProp$2(obj, key + "", value);
-var __accessCheck$1 = (obj, member, msg) => member.has(obj) || __typeError$2("Cannot " + msg);
-var __privateIn$1 = (member, obj) => Object(obj) !== obj ? __typeError$2('Cannot use the "in" operator on this value') : member.has(obj);
-var __privateGet$1 = (obj, member, getter) => (__accessCheck$1(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$1 = (obj, member, value) => member.has(obj) ? __typeError$2("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$1 = (obj, member, value, setter) => (__accessCheck$1(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
-var __privateMethod$1 = (obj, member, method) => (__accessCheck$1(obj, member, "access private method"), method);
-var _target_dec, _href_dec, _checked_dec, _active_dec, _badge_dec, _icon_dec, _label_dec, _tag_dec, _a$2, _MenuItem_decorators, _init$2, _tag, _label, _icon, _badge, _active, _checked, _href, _target;
-const mutableAttributes = ["tag", "label", "icon", "badge", "checked", "href", "target"];
-const tagName$2 = "GZM-MENU-ITEM";
-const styleSheet$2 = createStyleSheet({
-  [tagName$2]: `
-        cursor: pointer;
-        display: contents;
-    `,
-  //因为 display:contents，只能设置每一个grid单元的边框来实现hover效果。
-  [`${tagName$2}>*`]: `
-        border:1px solid transparent;
-        padding-inline:0.125rem;
-    `,
-  [`${tagName$2}>*:not(:last-child)`]: `
-        border-right:0;
-    `,
-  [`${tagName$2}>*:not(:first-child)`]: `
-        border-left:0;
-    `,
-  [`${tagName$2}:active>*, ${tagName$2}[active]>*`]: {
-    color: "var(--gzm-a-btn-txt-color)",
-    background: "var(--gzm-a-btn-background)",
-    border: "var(--gzm-a-btn-border)"
-  },
-  [`${tagName$2}:hover>*`]: {
-    background: "var(--gzm-h-btn-background)",
-    border: "var(--gzm-h-btn-border)",
-    color: "var(--gzm-h-btn-txt-color)"
-  },
-  //link <a> 的颜色
-  [`${tagName$2} a`]: `
-        color: inherit;
-    `,
-  //menu
-  //https://www.compart.com/en/unicode/U+2BC8
-  [`${tagName$2}[tag=menu]>div:last-child::after`]: `
-        content: '⯈';
-        font-size: 0.75rem;
-        padding-right:0.125rem;
-    `
-});
-_MenuItem_decorators = [defineElement({ tagName: tagName$2, mutableAttributes })];
-class MenuItem extends (_a$2 = ViewElement, _tag_dec = [strAttr], _label_dec = [strAttr], _icon_dec = [strAttr], _badge_dec = [strAttr], _active_dec = [boolAttr], _checked_dec = [boolAttr], _href_dec = [strAttr], _target_dec = [strAttr], _a$2) {
-  constructor() {
-    super(...arguments);
-    __publicField$1(this, "$divs", [document.createElement(iconTagName), document.createElement("div"), document.createElement("div"), document.createElement("div")]);
-    __privateAdd$1(this, _tag, __runInitializers$2(_init$2, 8, this)), __runInitializers$2(_init$2, 11, this);
-    __privateAdd$1(this, _label, __runInitializers$2(_init$2, 12, this)), __runInitializers$2(_init$2, 15, this);
-    __privateAdd$1(this, _icon, __runInitializers$2(_init$2, 16, this)), __runInitializers$2(_init$2, 19, this);
-    __privateAdd$1(this, _badge, __runInitializers$2(_init$2, 20, this)), __runInitializers$2(_init$2, 23, this);
-    __privateAdd$1(this, _active, __runInitializers$2(_init$2, 24, this, false)), __runInitializers$2(_init$2, 27, this);
-    __privateAdd$1(this, _checked, __runInitializers$2(_init$2, 28, this, false)), __runInitializers$2(_init$2, 31, this);
-    __privateAdd$1(this, _href, __runInitializers$2(_init$2, 32, this)), __runInitializers$2(_init$2, 35, this);
-    __privateAdd$1(this, _target, __runInitializers$2(_init$2, 36, this)), __runInitializers$2(_init$2, 39, this);
-  }
-  connectedCallback() {
-    if (this.childElementCount === 0) {
-      this.append(...this.$divs);
-    }
-  }
-  _tag_set(tag, old) {
-    if (old === tag) return;
-    if (tag === "check" || tag === "radio") {
-      this._checked_set();
-    } else if (old === "check" || old === "radio") {
-      this._icon_set(this.icon ?? null);
-    }
-    if (tag === "link") {
-      const $d = this.$divs[1];
-      const $a = this.$divs[1] = document.createElement("a");
-      if ($d.isConnected) {
-        $d.replaceWith($a);
-      }
-      this._label_set(this.label ?? null);
-      this._href_set(this.href ?? null);
-      this._target_set(this.target ?? "_blank");
-    } else if (old === "link") {
-      const $a = this.$divs[1];
-      const $d = this.$divs[1] = document.createElement("div");
-      if ($a.isConnected) {
-        $a.replaceWith($d);
-      }
-      this._label_set(this.label ?? null);
-    }
-    if (tag === "menu") ;
-    else if (old === "menu") {
-      this.$divs[3].innerHTML = "";
-    }
-  }
-  _icon_set(icn) {
-    const $icn = this.$divs[0];
-    $icn.icon = icn ?? void 0;
-  }
-  _label_set(lbl) {
-    const $div = this.$divs[1];
-    $div.textContent = lbl;
-  }
-  _badge_set(bdg) {
-    const $div = this.$divs[2];
-    if (!bdg) {
-      $div.innerHTML = "";
-      return;
-    }
-    let $bdg = $div.firstElementChild;
-    if (!$bdg) {
-      $bdg = document.createElement(badgeTagName);
-      $div.append($bdg);
-    }
-    $bdg.badge = bdg;
-  }
-  _checked_set() {
-    const tag = this.tag;
-    const checked = this.checked;
-    if (tag === "check") {
-      this._icon_set(checked ? checkboxChecked : checkboxUnchecked);
-    } else if (tag === "radio") {
-      this._icon_set(checked ? radioChecked : radioUnchecked);
-    }
-  }
-  _href_set(nv) {
-    const $a = this.$divs[1];
-    $a.href = nv || "javascript:void(0);";
-  }
-  _target_set(nv) {
-    const $a = this.$divs[1];
-    $a.target = nv ?? "_blank";
-  }
-  // #endregion
-}
-_init$2 = __decoratorStart$2(_a$2);
-_tag = /* @__PURE__ */ new WeakMap();
-_label = /* @__PURE__ */ new WeakMap();
-_icon = /* @__PURE__ */ new WeakMap();
-_badge = /* @__PURE__ */ new WeakMap();
-_active = /* @__PURE__ */ new WeakMap();
-_checked = /* @__PURE__ */ new WeakMap();
-_href = /* @__PURE__ */ new WeakMap();
-_target = /* @__PURE__ */ new WeakMap();
-__decorateElement$2(_init$2, 4, "tag", _tag_dec, MenuItem, _tag);
-__decorateElement$2(_init$2, 4, "label", _label_dec, MenuItem, _label);
-__decorateElement$2(_init$2, 4, "icon", _icon_dec, MenuItem, _icon);
-__decorateElement$2(_init$2, 4, "badge", _badge_dec, MenuItem, _badge);
-__decorateElement$2(_init$2, 4, "active", _active_dec, MenuItem, _active);
-__decorateElement$2(_init$2, 4, "checked", _checked_dec, MenuItem, _checked);
-__decorateElement$2(_init$2, 4, "href", _href_dec, MenuItem, _href);
-__decorateElement$2(_init$2, 4, "target", _target_dec, MenuItem, _target);
-MenuItem = __decorateElement$2(_init$2, 0, "MenuItem", _MenuItem_decorators, MenuItem);
-__runInitializers$2(_init$2, 1, MenuItem);
-const radioUnchecked = "gzm-menu-item-radio-unchecked";
-const radioChecked = "gzm-menu-item-radio-checked";
-const checkboxUnchecked = "gzm-menu-item-checkbox-unchecked";
-const checkboxChecked = "gzm-menu-item-checkbox-checked";
-iconCache[checkboxUnchecked] = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-   <path d="M3 3m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z"></path>
-</svg>`;
-iconCache[checkboxChecked] = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-    <path d="M18.333 2c1.96 0 3.56 1.537 3.662 3.472l.005 .195v12.666c0 1.96 -1.537 3.56 -3.472 3.662l-.195 .005h-12.666a3.667 3.667 0 0 1 -3.662 -3.472l-.005 -.195v-12.666c0 -1.96 1.537 -3.56 3.472 -3.662l.195 -.005h12.666zm-2.626 7.293a1 1 0 0 0 -1.414 0l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.32 1.497l2 2l.094 .083a1 1 0 0 0 1.32 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z" stroke-width="0" fill="currentColor"></path>
-</svg>`;
-iconCache[radioUnchecked] = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-    <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
-</svg>`;
-iconCache[radioChecked] = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-    <path d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z" stroke-width="0" fill="currentColor"></path>
-</svg>`;
-var __create$1 = Object.create;
-var __defProp$1 = Object.defineProperty;
-var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
-var __knownSymbol$1 = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
-var __typeError$1 = (msg) => {
-  throw TypeError(msg);
-};
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __name$1 = (target, value) => __defProp$1(target, "name", { value, configurable: true });
-var __decoratorStart$1 = (base) => [, , , __create$1(base?.[__knownSymbol$1("metadata")] ?? null)];
-var __decoratorStrings$1 = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
-var __expectFn$1 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$1("Function expected") : fn;
-var __decoratorContext$1 = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$1[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$1("Already initialized") : fns.push(__expectFn$1(fn || null)) });
-var __decoratorMetadata$1 = (array, target) => __defNormalProp$1(target, __knownSymbol$1("metadata"), array[3]);
-var __runInitializers$1 = (array, flags, self, value) => {
-  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
-  return value;
-};
-var __decorateElement$1 = (array, flags, name, decorators, target, extra) => {
-  var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
-  var j = k > 3 ? array.length + 1 : k ? s ? 1 : 2 : 0, key = __decoratorStrings$1[k + 5];
-  var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
-  var desc = k && (!p && !s && (target = target.prototype), k < 5 && (k > 3 || !p) && __getOwnPropDesc$1(k < 4 ? target : { get [name]() {
-    return __privateGet(this, extra);
-  }, set [name](x) {
-    return __privateSet(this, extra, x);
-  } }, name));
-  k ? p && k < 4 && __name$1(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name$1(target, name);
-  for (var i = decorators.length - 1; i >= 0; i--) {
-    ctx = __decoratorContext$1(k, name, done = {}, array[3], extraInitializers);
-    if (k) {
-      ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn(target, x) : (x) => name in x };
-      if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
-      if (k > 2) access.set = p ? (x, y) => __privateSet(x, target, y, k ^ 4 ? extra : desc.set) : (x, y) => x[name] = y;
-    }
-    it = (0, decorators[i])(k ? k < 4 ? p ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
-    if (k ^ 4 || it === void 0) __expectFn$1(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
-    else if (typeof it !== "object" || it === null) __typeError$1("Object expected");
-    else __expectFn$1(fn = it.get) && (desc.get = fn), __expectFn$1(fn = it.set) && (desc.set = fn), __expectFn$1(fn = it.init) && initializers.unshift(fn);
-  }
-  return k || __decoratorMetadata$1(array, target), desc && __defProp$1(target, name, desc), p ? k ^ 4 ? extra : desc : target;
-};
-var __publicField = (obj, key, value) => __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError$1("Cannot " + msg);
-var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError$1('Cannot use the "in" operator on this value') : member.has(obj);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError$1("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _down_dec, _up_dec, _a$1, _Menu_decorators, _onClick, _Menu_instances, checkActive_fn, onblur_fn, onkeydown_fn, checkTabIndex_fn, _onwheel, checkScroll_fn, _init$1, _up, _down, _subMenu, showSubMenu_fn;
-const tagName$1 = "GZM-MENU";
-const styleSheet$1 = createStyleSheet({
-  ":host": `
-        display: block;
-        opacity: 0.9;
-        top:0;
-        left:0;
-        outline: none;
-        padding: 0.5rem !important;
-    ` + gzmFrame,
-  section: `
-        display:inline-grid;
-        grid-template-columns: auto auto auto auto;
-        max-height:80vh;
-        overflow-y:auto;
-    `,
-  //group
-  nav: `
-        display:contents;
-    `,
-  //delimiter
-  "nav:not(:first-child)::before": `
-        content: '';
-        grid-column: 1 / span 4;
-        border-top: var(--gzm-btn-border);
-        margin: 0.5rem 0;
-    `
-});
-_Menu_decorators = [defineElement({ tagName: tagName$1 })];
-class Menu extends (_a$1 = ViewGroupElement, _up_dec = [boolAttr], _down_dec = [boolAttr], _a$1) {
-  constructor() {
-    super();
-    __privateAdd(this, _Menu_instances);
-    __privateAdd(this, _onClick, (e) => {
-      const $t = e.target;
-      const $item = $t.closest(tagName$2);
-      if (!$item) return;
-      if ($item.tag === "menu") {
-        __privateMethod(this, _Menu_instances, showSubMenu_fn).call(this, $item);
-        return;
-      }
-      if ($item.tag === "check") {
-        $item.setModelProperty("checked", !$item.checked);
-      } else if ($item.tag === "radio" && !$item.checked) {
-        $item.parentElement?.querySelectorAll("*[tag=radio][checked]")?.forEach(($x) => $x.setModelProperty("checked", false));
-        $item.setModelProperty("checked", true);
-      }
-      if (!$item.model?.onclick) {
-        findMenuModelWithClick(this)?.itemClick?.($item.model, $item, e);
-      }
-      this.closeAll();
-    });
-    __privateAdd(this, _onwheel, (e) => {
-      const $s2 = this.$section;
-      if (this.up && e.deltaY < 0) {
-        $s2.scrollTop += e.deltaY;
-        __privateMethod(this, _Menu_instances, checkScroll_fn).call(this);
-      }
-      if (this.down && e.deltaY > 0) {
-        $s2.scrollTop += e.deltaY;
-        __privateMethod(this, _Menu_instances, checkScroll_fn).call(this);
-      }
-    });
-    __privateAdd(this, _up, __runInitializers$1(_init$1, 8, this, false)), __runInitializers$1(_init$1, 11, this);
-    __privateAdd(this, _down, __runInitializers$1(_init$1, 12, this, false)), __runInitializers$1(_init$1, 15, this);
-    __publicField(this, "$supMenuItem");
-    __privateAdd(this, _subMenu);
-    __publicField(this, "$section", document.createElement("section"));
-    __publicField(this, "groupElementTagName", "NAV");
-    const $s = this.$section;
-    $s.addEventListener("click", __privateGet(this, _onClick), true);
-    $s.addEventListener("wheel", __privateGet(this, _onwheel), { passive: true });
-    const root = this.attachShadow({ mode: "open" });
-    root.adoptedStyleSheets = [baseStyle, styleSheet$1, styleSheet$2];
-    root.appendChild($s);
-  }
-  // #region 处理显示和隐藏
-  show($attachTo, attachCorner, corner) {
-    if (corner === void 0) {
-      const isLeft = isLeftCorner(attachCorner);
-      const isTop = isTopCorner(attachCorner);
-      corner = makeCorner(!isLeft, isTop);
-    }
-    __privateMethod(this, _Menu_instances, checkTabIndex_fn).call(this);
-    new CornerHelper(this, corner, $attachTo, attachCorner).pos();
-    this.focus();
-    __privateMethod(this, _Menu_instances, checkScroll_fn).call(this);
-    this.onblur = __privateMethod(this, _Menu_instances, onblur_fn);
-    this.onkeydown = __privateMethod(this, _Menu_instances, onkeydown_fn);
-  }
-  get isActive() {
-    const ret = this === document.activeElement || !!this.shadowRoot.activeElement;
-    console.debug(tagName$1, "isActive", ret);
-    return ret;
-  }
-  /**
-   * 关闭自己以及下级菜单
-   */
-  close() {
-    this._closeSubMenu();
-    this.remove();
-  }
-  /**
-   * 关闭所有菜单，包括上级和上级的上级
-   */
-  closeAll() {
-    this.close();
-    if (this.$supMenuItem) {
-      const $m = tryGetMenu(this.$supMenuItem);
-      $m?.closeAll();
-    }
-  }
-  /**
-   * 场景：
-   * 此菜单显示了一个子菜单，子菜单获得输入焦点。鼠标没有点击子菜单，却点击了此菜单（如另一个submenu菜单项，或者不属于菜单项的任意菜单部分）。
-   * 子菜单 blur 事件触发，这时不能关闭所有的菜单，而是从子菜单开始向上找，将未获得焦点的菜单全部关闭。
-   * @returns 
-   */
-  _closeIfNotActive() {
-    if (this.isActive) {
-      this._closeSubMenu();
-      return;
-    }
-    if (this.$supMenuItem) {
-      const $m = tryGetMenu(this.$supMenuItem);
-      $m?._closeIfNotActive();
-    } else {
-      this.close();
-    }
-  }
-  _closeSubMenu() {
-    if (__privateGet(this, _subMenu)) {
-      const $mi = __privateGet(this, _subMenu).$supMenuItem;
-      if ($mi) {
-        $mi.active = false;
-        __privateGet(this, _subMenu).$supMenuItem = void 0;
-      }
-      __privateGet(this, _subMenu).close();
-      __privateSet(this, _subMenu, void 0);
-    }
-    this.focus();
-  }
-  // #endregion
-  // #region 重写 ViewGroupElement
-  _getViewItemTagName() {
-    return tagName$2;
-  }
-  get $viewItemsContainer() {
-    return this.$section;
-  }
-  // #endregion
-}
-_init$1 = __decoratorStart$1(_a$1);
-_onClick = /* @__PURE__ */ new WeakMap();
-_Menu_instances = /* @__PURE__ */ new WeakSet();
-checkActive_fn = function() {
-  if (this.isActive) {
-    this.focus();
-  } else {
-    this._closeIfNotActive();
-  }
-};
-onblur_fn = function() {
-  console.debug(tagName$1, "blur");
-  if (!__privateGet(this, _subMenu)) {
-    window.setTimeout(() => {
-      __privateMethod(this, _Menu_instances, checkActive_fn).call(this);
-    }, 25);
-  }
-};
-onkeydown_fn = function(e) {
-  if (e.key === "Escape") {
-    if (this.$supMenuItem) {
-      const $m = tryGetMenu(this.$supMenuItem);
-      $m?._closeSubMenu();
-    } else {
-      this.close();
-    }
-  }
-};
-checkTabIndex_fn = function() {
-  if (!this.hasAttribute("tabindex")) {
-    this.setAttribute("tabindex", "0");
-  }
-};
-_onwheel = /* @__PURE__ */ new WeakMap();
-checkScroll_fn = function() {
-  this.up = false;
-  this.down = false;
-  const $s = this.$section;
-  if ($s.scrollHeight <= $s.clientHeight) {
-    return;
-  }
-  if ($s.scrollTop > 0) {
-    this.up = true;
-  }
-  const diff = $s.scrollTop + $s.clientHeight - $s.scrollHeight;
-  if (diff < -1) {
-    this.down = true;
-  }
-};
-_up = /* @__PURE__ */ new WeakMap();
-_down = /* @__PURE__ */ new WeakMap();
-_subMenu = /* @__PURE__ */ new WeakMap();
-showSubMenu_fn = function($mi) {
-  const sis = $mi.model?.subItems;
-  if (!sis) return;
-  this._closeSubMenu();
-  $mi.active = true;
-  const $sm = __privateSet(this, _subMenu, createMenu(...sis));
-  $sm.$supMenuItem = $mi;
-  $sm.show($mi.$divs[3], xy.rightTop, xy.leftTop);
-};
-__decorateElement$1(_init$1, 4, "up", _up_dec, Menu, _up);
-__decorateElement$1(_init$1, 4, "down", _down_dec, Menu, _down);
-Menu = __decorateElement$1(_init$1, 0, "Menu", _Menu_decorators, Menu);
-__runInitializers$1(_init$1, 1, Menu);
-function tryGetMenu(mi) {
-  const sr = mi.getRootNode();
-  return sr.host;
-}
-function findMenuModelWithClick($menu) {
-  if ($menu.model?.itemClick) {
-    return $menu.model;
-  }
-  if ($menu.$supMenuItem) {
-    const $m = tryGetMenu($menu.$supMenuItem);
-    if ($m) {
-      return findMenuModelWithClick($m);
-    }
-  }
-}
-function createMenu(...menuItems) {
-  const $menu = document.createElement(tagName$1);
-  $menu.modelList = menuItems;
-  $menu.setAttribute("popover", "manual");
-  return $menu;
-}
-function createMenuWithModel(vm) {
-  const $menu = document.createElement(tagName$1);
-  $menu.model = vm;
-  $menu.setAttribute("popover", "manual");
-  return $menu;
-}
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-var __decoratorStart = (base) => [, , , __create(base?.[__knownSymbol("metadata")] ?? null)];
-var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
-var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
-var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
-var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
-var __runInitializers = (array, flags, self, value) => {
-  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) fns[i].call(self);
-  return value;
-};
-var __decorateElement = (array, flags, name, decorators, target, extra) => {
-  var it, done, ctx, k = flags & 7, p = false;
-  var j = 0;
-  var extraInitializers = array[j] || (array[j] = []);
-  var desc = k && (target = target.prototype, k < 5 && (k > 3 || !p) && __getOwnPropDesc(target, name));
-  __name(target, name);
-  for (var i = decorators.length - 1; i >= 0; i--) {
-    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
-    it = (0, decorators[i])(target, ctx), done._ = 1;
-    __expectFn(it) && (target = it);
-  }
-  return __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
-};
-var _MenuList_decorators, _init, _a;
-const tagName = "GZM-MENU-LIST";
-const styleSheet = createStyleSheet({
-  ":host": `
-        display:inline-block;
-    `,
-  //菜单项太多要求出现滚动栏，如果:host出现滚动栏很难看。
-  //所以由 section 出现滚动栏，在 :host 和 section 之间要有 padding。
-  section: `
-        display:inline-grid;
-        grid-template-columns: auto auto auto auto;
-        max-height:100%;
-        overflow-y:auto;
-    `,
-  //group
-  nav: `
-        display:contents;
-    `,
-  'nav[label]:not([label=""])::before': `
-        content: attr(label);
-        font-weight: bolder;
-        grid-column: 1 / span 4;
-        padding-inline: 0.25rem;
-        padding-bottom: 0.25rem;
-    `,
-  'nav[label]:not([label=""]):not(:first-child)::before': `
-        padding-top: 1rem;
-    `
-});
-_MenuList_decorators = [defineElement({ tagName })];
-class MenuList extends (_a = ViewGroupElement) {
-  constructor() {
-    super();
-    const root = this.attachShadow({ mode: "open" });
-    root.adoptedStyleSheets = [baseStyle, styleSheet, styleSheet$2];
-    root.addEventListener("click", this.#onClick, true);
-    root.appendChild(this.$section);
-  }
-  //捕获阶段在先，而 item.model.onclick 后被调用。为了让这里的 checked 属性先被修改。
-  #onClick = (e) => {
-    const $t = e.target;
-    const item = $t.closest(tagName$2);
-    if (!item) return;
-    this.shadowRoot.querySelectorAll(tagName$2 + "[active]").forEach(($x) => $x.active = false);
-    item.active = true;
-    if (item.tag === "menu") {
-      this.#showSubMenu(item);
-      return;
-    }
-    if (item.tag === "check") {
-      item.setModelProperty("checked", !item.checked);
-    } else if (item.tag === "radio" && !item.checked) {
-      item.parentElement?.querySelectorAll("*[tag=radio][checked]")?.forEach(($x) => $x.setModelProperty("checked", false));
-      item.setModelProperty("checked", true);
-    }
-    this._closeSubMenu();
-  };
-  // #region 处理子菜单
-  #subMenu;
-  //当前显示的子菜单
-  #showSubMenu($mi) {
-    const sis = $mi.model?.subItems;
-    if (!sis) return;
-    this._closeSubMenu();
-    const $sm = this.#subMenu = createMenu(...sis);
-    $sm.$supMenuItem = $mi;
-    $sm.show($mi.$divs[3], xy.rightTop, xy.leftTop);
-  }
-  _closeSubMenu() {
-    if (this.#subMenu) {
-      const $mi = this.#subMenu.$supMenuItem;
-      if ($mi) {
-        $mi.active = false;
-        this.#subMenu.$supMenuItem = void 0;
-      }
-      this.#subMenu.close();
-      this.#subMenu = void 0;
-    }
-  }
-  _closeIfNotActive() {
-    this._closeSubMenu();
-  }
-  closeAll() {
-    this._closeSubMenu();
-  }
-  // #endregion
-  // #region 重写 ViewGroupElement
-  _getViewItemTagName() {
-    return tagName$2;
-  }
-  get $viewItemsContainer() {
-    return this.$section;
-  }
-  groupElementTagName = "NAV";
-  $section = document.createElement("section");
-  // #endregion
-}
-_init = __decoratorStart(_a);
-MenuList = __decorateElement(_init, 0, "MenuList", _MenuList_decorators, MenuList);
-__runInitializers(_init, 1, MenuList);
-export {
-  Menu,
-  MenuList,
-  createMenu,
-  createMenuWithModel,
-  tagName as menuListTagName,
-  tagName$1 as menuTagName
-};
-//# sourceMappingURL=menu.es.js.map