@gzmjs/menu 0.3.0 → 0.3.2

package/dist/009-menu/menu.d.ts

@@ -44,3 +44,4 @@ export declare class Menu extends ViewGroupElement<MiOptions, MI.MenuItem, MenuO
 }
 export declare function createMenu(...menuItems: MiOptions[]): Menu;
 export declare function createMenuWithModel(vm: MenuOptions): Menu;
+//# sourceMappingURL=menu.d.ts.map

package/dist/009-menu/menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../src/009-menu/menu.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,SAAS,EAAW,MAAM,SAAS,CAAC;AACjD,OAAO,KAAK,EAAE,MAAM,YAAY,CAAC;AACjC,OAAO,EAAC,KAAK,aAAa,EAAE,gBAAgB,EAAC,MAAM,aAAa,CAAC;AACjE,OAAO,EAA6C,KAAK,MAAM,EAA8E,MAAM,iBAAiB,CAAC;AAErK,eAAO,MAAM,OAAO,aAAa,CAAC;AAClC,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC;KACnB;CACJ;AAED,MAAM,WAAW,WAAY,SAAQ,aAAa,CAAC,SAAS,EAAE,EAAE,CAAC,QAAQ,EAAE,IAAI,CAAC;IAC5E,OAAO,CAAC,EAAE,OAAO,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,CAAC,QAAQ,EAAE,EAAE,EAAE,UAAU,KAAK,IAAI,CAAC;CAChG;AA8BD,qBACa,IAAK,SAAQ,gBAAgB,CAAC,SAAS,EAAE,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC;;;IAY3E,SAAiB,UAAU,EAAE,UAAU,CAAC;IA0BjC,IAAI,CAAC,SAAS,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM;IAezE,IAAW,QAAQ,YAIlB;IAmFD,QAAQ,CAAC,EAAE,EAAE,OAAO,CAAS;IAG7B,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAS;IAI/B,YAAY,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC;IAgB3B;;OAEG;IACH,KAAK;IAIL;;OAEG;IACH,QAAQ;IAQR;;;;;OAKG;IACH,SAAS,CAAC,iBAAiB;IAa3B,SAAS,CAAC,aAAa;IAevB,SAAS,CAAC,mBAAmB,IAAI,MAAM;IAGvC,IAAW,mBAAmB,IAAI,WAAW,GAAG,UAAU,CAEzD;IACD,SAAS,CAAC,QAAQ,cAAqC;IACvD,SAAS,CAAC,QAAQ,CAAC,mBAAmB,EAAE,MAAM,CAAS;CAE1D;AAmBD,wBAAgB,UAAU,CAAC,GAAG,SAAS,EAAE,SAAS,EAAE,GAAG,IAAI,CAK1D;AAED,wBAAgB,mBAAmB,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,CAKzD"}

package/dist/009-menu/menuItem.d.ts

@@ -25,3 +25,4 @@ export declare class MenuItem extends ViewElement<MiOptions> implements Attribut
     _target_set(nv: string | null): void;
 }
 export {};
+//# sourceMappingURL=menuItem.d.ts.map

package/dist/009-menu/menuItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menuItem.d.ts","sourceRoot":"","sources":["../../src/009-menu/menuItem.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,YAAY,CAAC;AAC1C,OAAO,EAAkH,KAAK,iBAAiB,EAAC,MAAM,iBAAiB,CAAC;AACxK,OAAO,EAAC,WAAW,EAAC,MAAM,aAAa,CAAC;AAExC,KAAK,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;AACjE,QAAA,MAAM,iBAAiB,yEAA0E,CAAC;AAClG,eAAO,MAAM,OAAO,kBAAkB,CAAC;AAEvC,eAAO,MAAM,UAAU,eAuCrB,CAAC;AAEH,qBACa,QAAS,SAAQ,WAAW,CAAC,SAAS,CAAE,YAAW,iBAAiB,CAAC,OAAO,iBAAiB,CAAC,MAAM,CAAC,CAAC;IAG/G,KAAK,EAAE,WAAW,EAAE,CAAsI;IAE1J,iBAAiB;IAQjB,QAAQ,CAAC,GAAG,EAAE,WAAW,GAAG,SAAS,CAAC;IAGtC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAGnC,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAOlC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAGnC,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAS;IAGjC,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAS;IAGlC,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAGlC,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAEpC,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE,WAAW,GAAG,IAAI,EAAE,GAAG,EAAE,WAAW,GAAG,IAAI;IA0CtE,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAI5B,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAI7B,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAa7B,YAAY;IAwBZ,SAAS,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAI3B,WAAW,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;CAKhC"}

package/dist/009-menu/menuList.d.ts

@@ -17,3 +17,4 @@ export declare class MenuList extends ViewGroupElement<MiOptions, MI.MenuItem, M
     protected readonly groupElementTagName: string;
     protected $section: HTMLElement;
 }
+//# sourceMappingURL=menuList.d.ts.map

package/dist/009-menu/menuList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menuList.d.ts","sourceRoot":"","sources":["../../src/009-menu/menuList.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,aAAa,EAAE,gBAAgB,EAAC,MAAM,aAAa,CAAC;AAEjE,OAAO,KAAK,EAAC,SAAS,EAAW,MAAM,SAAS,CAAC;AACjD,OAAO,KAAK,EAAE,MAAM,YAAY,CAAC;AAGjC,eAAO,MAAM,OAAO,kBAAkB,CAAC;AACvC,MAAM,WAAW,eAAgB,SAAQ,aAAa,CAAC,SAAS,EAAE,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IACpF,OAAO,CAAC,EAAE,OAAO,OAAO,CAAC;CAC5B;AAgCD,qBACa,QAAS,SAAQ,gBAAgB,CAAC,SAAS,EAAE,EAAE,CAAC,QAAQ,EAAE,eAAe,CAAC;;;IAQnF,SAAiB,UAAU,EAAE,UAAU,CAAC;IAuCxC,aAAa;IAWb,SAAS,CAAC,iBAAiB;IAG3B,QAAQ;IAMR,SAAS,CAAC,mBAAmB,IAAI,MAAM;IAGvC,IAAW,mBAAmB,IAAI,WAAW,GAAG,UAAU,CAEzD;IACD,SAAS,CAAC,QAAQ,CAAC,mBAAmB,EAAE,MAAM,CAAS;IACvD,SAAS,CAAC,QAAQ,cAAqC;CAE1D"}

package/dist/009-menu/model.d.ts

@@ -39,3 +39,4 @@ export interface ISubMenu extends IMiOptions {
 }
 export type MiOptions = IClick | ILink | ICheck | IRadio | ISubMenu;
 export {};
+//# sourceMappingURL=model.d.ts.map

package/dist/009-menu/model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"model.d.ts","sourceRoot":"","sources":["../../src/009-menu/model.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAC3C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,YAAY,CAAC;AAEzC,UAAU,UAAW,SAAQ,SAAS,CAAC,QAAQ,CAAC;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AACD,UAAU,MAAO,SAAQ,UAAU;IAC/B,QAAQ,CAAC,GAAG,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC;CACnE;AACD,UAAU,KAAM,SAAQ,UAAU;IAC9B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,KAAK,KAAK,OAAO,CAAC;CACjE;AACD,UAAU,MAAO,SAAQ,UAAU;IAC/B,QAAQ,CAAC,GAAG,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC;CACnE;AACD,UAAU,MAAO,SAAQ,UAAU;IAC/B,QAAQ,CAAC,GAAG,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC;CACnE;AACD,MAAM,WAAW,QAAS,SAAQ,UAAU;IACxC,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,QAAQ,EAAE,SAAS,EAAE,CAAC;IACtB,OAAO,CAAC,EAAE,KAAK,CAAC;CACnB;AACD,MAAM,MAAM,SAAS,GACjB,MAAM,GACN,KAAK,GACL,MAAM,GACN,MAAM,GACN,QAAQ,CAAC"}

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export { tagName as menuTagName, type MenuOptions, Menu, createMenu, createMenuWithModel } from './009-menu/menu';
 export { tagName as menuListTagName, type MenuListOptions, MenuList } from './009-menu/menuList';
 export { type MiOptions } from './009-menu/model';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,IAAI,WAAW,EAAE,KAAK,WAAW,EAAE,IAAI,EAAE,UAAU,EAAE,mBAAmB,EAAC,MAAM,iBAAiB,CAAC;AAChH,OAAO,EAAC,OAAO,IAAI,eAAe,EAAE,KAAK,eAAe,EAAE,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AAC/F,OAAO,EAAC,KAAK,SAAS,EAAC,MAAM,kBAAkB,CAAC"}

package/dist/index.es.js

@@ -0,0 +1,423 @@
+import { createStyleSheet as ee, defineElement as te, iconCache as q, strAttr as A, boolAttr as V, iconTagName as rt, badgeTagName as ct, gzmFrame as at, baseStyle as Me, isLeftCorner as lt, isTopCorner as ht, makeCorner as dt, CornerHelper as ut, xy as U } from "@gzmjs/ui-basic";
+import { ViewElement as _t, ViewGroupElement as Se } from "@gzmjs/mvvm";
+var pt = Object.create, ie = Object.defineProperty, vt = Object.getOwnPropertyDescriptor, ye = (t, e) => (e = Symbol[t]) ? e : /* @__PURE__ */ Symbol.for("Symbol." + t), T = (t) => {
+  throw TypeError(t);
+}, Ee = (t, e, i) => e in t ? ie(t, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : t[e] = i, $e = (t, e) => ie(t, "name", { value: e, configurable: !0 }), ft = (t) => [, , , pt(t?.[ye("metadata")] ?? null)], Ie = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], O = (t) => t !== void 0 && typeof t != "function" ? T("Function expected") : t, mt = (t, e, i, o, s) => ({ kind: Ie[t], name: e, metadata: o, addInitializer: (r) => i._ ? T("Already initialized") : s.push(O(r || null)) }), gt = (t, e) => Ee(e, ye("metadata"), t[3]), p = (t, e, i, o) => {
+  for (var s = 0, r = t[e >> 1], h = r && r.length; s < h; s++) e & 1 ? r[s].call(i) : o = r[s].call(i, o);
+  return o;
+}, y = (t, e, i, o, s, r) => {
+  var h, c, E, _, g, n = e & 7, k = !!(e & 8), d = !!(e & 16), f = n > 3 ? t.length + 1 : n ? k ? 1 : 2 : 0, P = Ie[n + 5], W = n > 3 && (t[f - 1] = []), R = t[f] || (t[f] = []), u = n && (!d && !k && (s = s.prototype), n < 5 && (n > 3 || !d) && vt(n < 4 ? s : { get [i]() {
+    return ke(this, r);
+  }, set [i](a) {
+    return be(this, r, a);
+  } }, i));
+  n ? d && n < 4 && $e(r, (n > 2 ? "set " : n > 1 ? "get " : "") + i) : $e(s, i);
+  for (var C = o.length - 1; C >= 0; C--)
+    _ = mt(n, i, E = {}, t[3], R), n && (_.static = k, _.private = d, g = _.access = { has: d ? (a) => kt(s, a) : (a) => i in a }, n ^ 3 && (g.get = d ? (a) => (n ^ 1 ? ke : bt)(a, s, n ^ 4 ? r : u.get) : (a) => a[i]), n > 2 && (g.set = d ? (a, z) => be(a, s, z, n ^ 4 ? r : u.set) : (a, z) => a[i] = z)), c = (0, o[C])(n ? n < 4 ? d ? r : u[P] : n > 4 ? void 0 : { get: u.get, set: u.set } : s, _), E._ = 1, n ^ 4 || c === void 0 ? O(c) && (n > 4 ? W.unshift(c) : n ? d ? r = c : u[P] = c : s = c) : typeof c != "object" || c === null ? T("Object expected") : (O(h = c.get) && (u.get = h), O(h = c.set) && (u.set = h), O(h = c.init) && W.unshift(h));
+  return n || gt(t, s), u && ie(s, i, u), d ? n ^ 4 ? r : u : s;
+}, $t = (t, e, i) => Ee(t, e + "", i), se = (t, e, i) => e.has(t) || T("Cannot " + i), kt = (t, e) => Object(e) !== e ? T('Cannot use the "in" operator on this value') : t.has(e), ke = (t, e, i) => (se(t, e, "read from private field"), i ? i.call(t) : e.get(t)), I = (t, e, i) => e.has(t) ? T("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, i), be = (t, e, i, o) => (se(t, e, "write to private field"), o ? o.call(t, i) : e.set(t, i), i), bt = (t, e, i) => (se(t, e, "access private method"), i), Ce, ze, Ae, xe, Te, Ne, Pe, We, j, Oe, l, oe, ne, re, ce, ae, le, he, de;
+const wt = ["tag", "label", "icon", "badge", "checked", "href", "target"], v = "GZM-MENU-ITEM", Le = ee({
+  [v]: `
+        cursor: pointer;
+        display: contents;
+    `,
+  //因为 display:contents，只能设置每一个grid单元的边框来实现hover效果。
+  [`${v}>*`]: `
+        border:1px solid transparent;
+        padding-inline:0.125rem;
+    `,
+  [`${v}>*:not(:last-child)`]: `
+        border-right:0;
+    `,
+  [`${v}>*:not(:first-child)`]: `
+        border-left:0;
+    `,
+  [`${v}:active>*, ${v}[active]>*`]: {
+    color: "var(--gzm-a-btn-txt-color)",
+    background: "var(--gzm-a-btn-background)",
+    border: "var(--gzm-a-btn-border)"
+  },
+  [`${v}:hover>*`]: {
+    background: "var(--gzm-h-btn-background)",
+    border: "var(--gzm-h-btn-border)",
+    color: "var(--gzm-h-btn-txt-color)"
+  },
+  //link <a> 的颜色
+  [`${v} a`]: `
+        color: inherit;
+    `,
+  //menu
+  //https://www.compart.com/en/unicode/U+2BC8
+  [`${v}[tag=menu]>div:last-child::after`]: `
+        content: '⯈';
+        font-size: 0.75rem;
+        padding-right:0.125rem;
+    `
+});
+Oe = [te({ tagName: v, mutableAttributes: wt })];
+class m extends (j = _t, We = [A], Pe = [A], Ne = [A], Te = [A], xe = [V], Ae = [V], ze = [A], Ce = [A], j) {
+  constructor() {
+    super(...arguments), $t(this, "$divs", [document.createElement(rt), document.createElement("div"), document.createElement("div"), document.createElement("div")]), I(this, oe, p(l, 8, this)), p(l, 11, this), I(this, ne, p(l, 12, this)), p(l, 15, this), I(this, re, p(l, 16, this)), p(l, 19, this), I(this, ce, p(l, 20, this)), p(l, 23, this), I(this, ae, p(l, 24, this, !1)), p(l, 27, this), I(this, le, p(l, 28, this, !1)), p(l, 31, this), I(this, he, p(l, 32, this)), p(l, 35, this), I(this, de, p(l, 36, this)), p(l, 39, this);
+  }
+  connectedCallback() {
+    this.childElementCount === 0 && this.append(...this.$divs);
+  }
+  _tag_set(e, i) {
+    if (i !== e) {
+      if (e === "check" || e === "radio" ? this._checked_set() : (i === "check" || i === "radio") && this._icon_set(this.icon ?? null), e === "link") {
+        const o = this.$divs[1], s = this.$divs[1] = document.createElement("a");
+        o.isConnected && o.replaceWith(s), this._label_set(this.label ?? null), this._href_set(this.href ?? null), this._target_set(this.target ?? "_blank");
+      } else if (i === "link") {
+        const o = this.$divs[1], s = this.$divs[1] = document.createElement("div");
+        o.isConnected && o.replaceWith(s), this._label_set(this.label ?? null);
+      }
+      e === "menu" || i === "menu" && (this.$divs[3].innerHTML = "");
+    }
+  }
+  _icon_set(e) {
+    const i = this.$divs[0];
+    i.icon = e ?? void 0;
+  }
+  _label_set(e) {
+    const i = this.$divs[1];
+    i.textContent = e;
+  }
+  _badge_set(e) {
+    const i = this.$divs[2];
+    if (!e) {
+      i.innerHTML = "";
+      return;
+    }
+    let o = i.firstElementChild;
+    o || (o = document.createElement(ct), i.append(o)), o.badge = e;
+  }
+  _checked_set() {
+    const e = this.tag, i = this.checked;
+    e === "check" ? this._icon_set(i ? De : Ge) : e === "radio" && this._icon_set(i ? Fe : He);
+  }
+  _href_set(e) {
+    const i = this.$divs[1];
+    i.href = e || "javascript:void(0);";
+  }
+  _target_set(e) {
+    const i = this.$divs[1];
+    i.target = e ?? "_blank";
+  }
+  // #endregion
+}
+l = ft(j);
+oe = /* @__PURE__ */ new WeakMap();
+ne = /* @__PURE__ */ new WeakMap();
+re = /* @__PURE__ */ new WeakMap();
+ce = /* @__PURE__ */ new WeakMap();
+ae = /* @__PURE__ */ new WeakMap();
+le = /* @__PURE__ */ new WeakMap();
+he = /* @__PURE__ */ new WeakMap();
+de = /* @__PURE__ */ new WeakMap();
+y(l, 4, "tag", We, m, oe);
+y(l, 4, "label", Pe, m, ne);
+y(l, 4, "icon", Ne, m, re);
+y(l, 4, "badge", Te, m, ce);
+y(l, 4, "active", xe, m, ae);
+y(l, 4, "checked", Ae, m, le);
+y(l, 4, "href", ze, m, he);
+y(l, 4, "target", Ce, m, de);
+m = y(l, 0, "MenuItem", Oe, m);
+p(l, 1, m);
+const He = "gzm-menu-item-radio-unchecked", Fe = "gzm-menu-item-radio-checked", Ge = "gzm-menu-item-checkbox-unchecked", De = "gzm-menu-item-checkbox-checked";
+q[Ge] = `<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>`;
+q[De] = `<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>`;
+q[He] = `<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>`;
+q[Fe] = `<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 Mt = Object.create, ue = Object.defineProperty, St = Object.getOwnPropertyDescriptor, Ve = (t, e) => (e = Symbol[t]) ? e : /* @__PURE__ */ Symbol.for("Symbol." + t), N = (t) => {
+  throw TypeError(t);
+}, Ue = (t, e, i) => e in t ? ue(t, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : t[e] = i, we = (t, e) => ue(t, "name", { value: e, configurable: !0 }), yt = (t) => [, , , Mt(t?.[Ve("metadata")] ?? null)], Be = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], L = (t) => t !== void 0 && typeof t != "function" ? N("Function expected") : t, Et = (t, e, i, o, s) => ({ kind: Be[t], name: e, metadata: o, addInitializer: (r) => i._ ? N("Already initialized") : s.push(L(r || null)) }), It = (t, e) => Ue(e, Ve("metadata"), t[3]), H = (t, e, i, o) => {
+  for (var s = 0, r = t[e >> 1], h = r && r.length; s < h; s++) e & 1 ? r[s].call(i) : o = r[s].call(i, o);
+  return o;
+}, _e = (t, e, i, o, s, r) => {
+  var h, c, E, _, g, n = e & 7, k = !!(e & 8), d = !!(e & 16), f = n > 3 ? t.length + 1 : n ? k ? 1 : 2 : 0, P = Be[n + 5], W = n > 3 && (t[f - 1] = []), R = t[f] || (t[f] = []), u = n && (!d && !k && (s = s.prototype), n < 5 && (n > 3 || !d) && St(n < 4 ? s : { get [i]() {
+    return w(this, r);
+  }, set [i](a) {
+    return B(this, r, a);
+  } }, i));
+  n ? d && n < 4 && we(r, (n > 2 ? "set " : n > 1 ? "get " : "") + i) : we(s, i);
+  for (var C = o.length - 1; C >= 0; C--)
+    _ = Et(n, i, E = {}, t[3], R), n && (_.static = k, _.private = d, g = _.access = { has: d ? (a) => Ct(s, a) : (a) => i in a }, n ^ 3 && (g.get = d ? (a) => (n ^ 1 ? w : b)(a, s, n ^ 4 ? r : u.get) : (a) => a[i]), n > 2 && (g.set = d ? (a, z) => B(a, s, z, n ^ 4 ? r : u.set) : (a, z) => a[i] = z)), c = (0, o[C])(n ? n < 4 ? d ? r : u[P] : n > 4 ? void 0 : { get: u.get, set: u.set } : s, _), E._ = 1, n ^ 4 || c === void 0 ? L(c) && (n > 4 ? W.unshift(c) : n ? d ? r = c : u[P] = c : s = c) : typeof c != "object" || c === null ? N("Object expected") : (L(h = c.get) && (u.get = h), L(h = c.set) && (u.set = h), L(h = c.init) && W.unshift(h));
+  return n || It(t, s), u && ue(s, i, u), d ? n ^ 4 ? r : u : s;
+}, Z = (t, e, i) => Ue(t, typeof e != "symbol" ? e + "" : e, i), pe = (t, e, i) => e.has(t) || N("Cannot " + i), Ct = (t, e) => Object(e) !== e ? N('Cannot use the "in" operator on this value') : t.has(e), w = (t, e, i) => (pe(t, e, "read from private field"), i ? i.call(t) : e.get(t)), x = (t, e, i) => e.has(t) ? N("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, i), B = (t, e, i, o) => (pe(t, e, "write to private field"), o ? o.call(t, i) : e.set(t, i), i), b = (t, e, i) => (pe(t, e, "access private method"), i), Ye, qe, J, Re, K, $, Ze, je, Je, Ke, Q, D, S, ve, fe, M, Qe;
+const G = "GZM-MENU", zt = ee({
+  ":host": `
+        display: block;
+        opacity: 0.9;
+        top:0;
+        left:0;
+        outline: none;
+        padding: 0.5rem !important;
+    ` + at,
+  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;
+    `
+});
+Re = [te({ tagName: G })];
+class F extends (J = Se, qe = [V], Ye = [V], J) {
+  constructor() {
+    super(), x(this, $), x(this, K, (o) => {
+      const r = o.target.closest(v);
+      if (r) {
+        if (r.tag === "menu") {
+          b(this, $, Qe).call(this, r);
+          return;
+        }
+        r.tag === "check" ? r.setModelProperty("checked", !r.checked) : r.tag === "radio" && !r.checked && (r.parentElement?.querySelectorAll("*[tag=radio][checked]")?.forEach((h) => h.setModelProperty("checked", !1)), r.setModelProperty("checked", !0)), r.model?.onclick || Xe(this)?.itemClick?.(r.model, r, o), this.closeAll();
+      }
+    }), x(this, Q, (o) => {
+      const s = this.$section;
+      this.up && o.deltaY < 0 && (s.scrollTop += o.deltaY, b(this, $, D).call(this)), this.down && o.deltaY > 0 && (s.scrollTop += o.deltaY, b(this, $, D).call(this));
+    }), x(this, ve, H(S, 8, this, !1)), H(S, 11, this), x(this, fe, H(S, 12, this, !1)), H(S, 15, this), Z(this, "$supMenuItem"), x(this, M), Z(this, "$section", document.createElement("section")), Z(this, "groupElementTagName", "NAV");
+    const e = this.$section;
+    e.addEventListener("click", w(this, K), !0), e.addEventListener("wheel", w(this, Q), { passive: !0 });
+    const i = this.attachShadow({ mode: "open" });
+    i.adoptedStyleSheets = [Me, zt, Le], i.appendChild(e);
+  }
+  // #region 处理显示和隐藏
+  show(e, i, o) {
+    if (o === void 0) {
+      const s = lt(i), r = ht(i);
+      o = dt(!s, r);
+    }
+    b(this, $, Ke).call(this), new ut(this, o, e, i).pos(), this.focus(), b(this, $, D).call(this), this.onblur = b(this, $, je), this.onkeydown = b(this, $, Je);
+  }
+  get isActive() {
+    const e = this === document.activeElement || !!this.shadowRoot.activeElement;
+    return console.debug(G, "isActive", e), e;
+  }
+  /**
+   * 关闭自己以及下级菜单
+   */
+  close() {
+    this._closeSubMenu(), this.remove();
+  }
+  /**
+   * 关闭所有菜单，包括上级和上级的上级
+   */
+  closeAll() {
+    this.close(), this.$supMenuItem && Y(this.$supMenuItem)?.closeAll();
+  }
+  /**
+   * 场景：
+   * 此菜单显示了一个子菜单，子菜单获得输入焦点。鼠标没有点击子菜单，却点击了此菜单（如另一个submenu菜单项，或者不属于菜单项的任意菜单部分）。
+   * 子菜单 blur 事件触发，这时不能关闭所有的菜单，而是从子菜单开始向上找，将未获得焦点的菜单全部关闭。
+   * @returns 
+   */
+  _closeIfNotActive() {
+    if (this.isActive) {
+      this._closeSubMenu();
+      return;
+    }
+    this.$supMenuItem ? Y(this.$supMenuItem)?._closeIfNotActive() : this.close();
+  }
+  _closeSubMenu() {
+    if (w(this, M)) {
+      const e = w(this, M).$supMenuItem;
+      e && (e.active = !1, w(this, M).$supMenuItem = void 0), w(this, M).close(), B(this, M, void 0);
+    }
+    this.focus();
+  }
+  // #endregion
+  // #region 重写 ViewGroupElement
+  _getViewItemTagName() {
+    return v;
+  }
+  get $viewItemsContainer() {
+    return this.$section;
+  }
+  // #endregion
+}
+S = yt(J);
+K = /* @__PURE__ */ new WeakMap();
+$ = /* @__PURE__ */ new WeakSet();
+Ze = function() {
+  this.isActive ? this.focus() : this._closeIfNotActive();
+};
+je = function() {
+  console.debug(G, "blur"), w(this, M) || window.setTimeout(() => {
+    b(this, $, Ze).call(this);
+  }, 25);
+};
+Je = function(t) {
+  t.key === "Escape" && (this.$supMenuItem ? Y(this.$supMenuItem)?._closeSubMenu() : this.close());
+};
+Ke = function() {
+  this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0");
+};
+Q = /* @__PURE__ */ new WeakMap();
+D = function() {
+  this.up = !1, this.down = !1;
+  const t = this.$section;
+  if (t.scrollHeight <= t.clientHeight)
+    return;
+  t.scrollTop > 0 && (this.up = !0), t.scrollTop + t.clientHeight - t.scrollHeight < -1 && (this.down = !0);
+};
+ve = /* @__PURE__ */ new WeakMap();
+fe = /* @__PURE__ */ new WeakMap();
+M = /* @__PURE__ */ new WeakMap();
+Qe = function(t) {
+  const e = t.model?.subItems;
+  if (!e) return;
+  this._closeSubMenu(), t.active = !0;
+  const i = B(this, M, et(...e));
+  i.$supMenuItem = t, i.show(t.$divs[3], U.rightTop, U.leftTop);
+};
+_e(S, 4, "up", qe, F, ve);
+_e(S, 4, "down", Ye, F, fe);
+F = _e(S, 0, "Menu", Re, F);
+H(S, 1, F);
+function Y(t) {
+  return t.getRootNode().host;
+}
+function Xe(t) {
+  if (t.model?.itemClick)
+    return t.model;
+  if (t.$supMenuItem) {
+    const e = Y(t.$supMenuItem);
+    if (e)
+      return Xe(e);
+  }
+}
+function et(...t) {
+  const e = document.createElement(G);
+  return e.modelList = t, e.setAttribute("popover", "manual"), e;
+}
+function Bt(t) {
+  const e = document.createElement(G);
+  return e.model = t, e.setAttribute("popover", "manual"), e;
+}
+var At = Object.create, me = Object.defineProperty, xt = Object.getOwnPropertyDescriptor, tt = (t, e) => (e = Symbol[t]) ? e : /* @__PURE__ */ Symbol.for("Symbol." + t), it = (t) => {
+  throw TypeError(t);
+}, Tt = (t, e, i) => e in t ? me(t, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : t[e] = i, Nt = (t, e) => me(t, "name", { value: e, configurable: !0 }), Pt = (t) => [, , , At(t?.[tt("metadata")] ?? null)], Wt = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], st = (t) => t !== void 0 && typeof t != "function" ? it("Function expected") : t, Ot = (t, e, i, o, s) => ({ kind: Wt[t], name: e, metadata: o, addInitializer: (r) => i._ ? it("Already initialized") : s.push(st(r || null)) }), Lt = (t, e) => Tt(e, tt("metadata"), t[3]), Ht = (t, e, i, o) => {
+  for (var s = 0, r = t[e >> 1], h = r && r.length; s < h; s++) r[s].call(i);
+  return o;
+}, Ft = (t, e, i, o, s, r) => {
+  var h, c, E, _ = e & 7, g = !1, n = 0, k = t[n] || (t[n] = []), d = _ && (s = s.prototype, _ < 5 && (_ > 3 || !g) && xt(s, i));
+  Nt(s, i);
+  for (var f = o.length - 1; f >= 0; f--)
+    E = Ot(_, i, c = {}, t[3], k), h = (0, o[f])(s, E), c._ = 1, st(h) && (s = h);
+  return Lt(t, s), d && me(s, i, d), g ? _ ^ 4 ? r : d : s;
+}, ot, ge, nt;
+const Gt = "GZM-MENU-LIST", Dt = ee({
+  ":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;
+    `
+});
+ot = [te({ tagName: Gt })];
+class X extends (nt = Se) {
+  constructor() {
+    super();
+    const e = this.attachShadow({ mode: "open" });
+    e.adoptedStyleSheets = [Me, Dt, Le], e.addEventListener("click", this.#t, !0), e.appendChild(this.$section);
+  }
+  //捕获阶段在先，而 item.model.onclick 后被调用。为了让这里的 checked 属性先被修改。
+  #t = (e) => {
+    const o = e.target.closest(v);
+    if (o) {
+      if (this.shadowRoot.querySelectorAll(v + "[active]").forEach((s) => s.active = !1), o.active = !0, o.tag === "menu") {
+        this.#i(o);
+        return;
+      }
+      o.tag === "check" ? o.setModelProperty("checked", !o.checked) : o.tag === "radio" && !o.checked && (o.parentElement?.querySelectorAll("*[tag=radio][checked]")?.forEach((s) => s.setModelProperty("checked", !1)), o.setModelProperty("checked", !0)), this._closeSubMenu();
+    }
+  };
+  // #region 处理子菜单
+  #e;
+  //当前显示的子菜单
+  #i(e) {
+    const i = e.model?.subItems;
+    if (!i) return;
+    this._closeSubMenu();
+    const o = this.#e = et(...i);
+    o.$supMenuItem = e, o.show(e.$divs[3], U.rightTop, U.leftTop);
+  }
+  _closeSubMenu() {
+    if (this.#e) {
+      const e = this.#e.$supMenuItem;
+      e && (e.active = !1, this.#e.$supMenuItem = void 0), this.#e.close(), this.#e = void 0;
+    }
+  }
+  _closeIfNotActive() {
+    this._closeSubMenu();
+  }
+  closeAll() {
+    this._closeSubMenu();
+  }
+  // #endregion
+  // #region 重写 ViewGroupElement
+  _getViewItemTagName() {
+    return v;
+  }
+  get $viewItemsContainer() {
+    return this.$section;
+  }
+  groupElementTagName = "NAV";
+  $section = document.createElement("section");
+  // #endregion
+}
+ge = Pt(nt);
+X = Ft(ge, 0, "MenuList", ot, X);
+Ht(ge, 1, X);
+export {
+  F as Menu,
+  X as MenuList,
+  et as createMenu,
+  Bt as createMenuWithModel,
+  Gt as menuListTagName,
+  G as menuTagName
+};
+//# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","sources":["../src/009-menu/menuItem.ts","../src/009-menu/menu.ts","../src/009-menu/menuList.ts"],"sourcesContent":["import type {MiOptions} from './model.ts';\r\nimport {type Badge, badgeTagName, boolAttr, createStyleSheet, defineElement, type Icon, iconTagName, strAttr, iconCache, type AttributeHandlers} from '@gzmjs/ui-basic';\r\nimport {ViewElement} from '@gzmjs/mvvm';\r\n\r\ntype MenuItemTag = 'click' | 'link' | 'check' | 'radio' | 'menu';\r\nconst mutableAttributes = ['tag', 'label', 'icon', 'badge', 'checked', 'href', 'target'] as const;\r\nexport const tagName = 'GZM-MENU-ITEM';\r\n\r\nexport const styleSheet = createStyleSheet({\r\n    [tagName]: `\r\n        cursor: pointer;\r\n        display: contents;\r\n    `,\r\n\r\n    //因为 display:contents，只能设置每一个grid单元的边框来实现hover效果。\r\n    [`${tagName}>*`]: `\r\n        border:1px solid transparent;\r\n        padding-inline:0.125rem;\r\n    `,\r\n    [`${tagName}>*:not(:last-child)`]: `\r\n        border-right:0;\r\n    `,\r\n    [`${tagName}>*:not(:first-child)`]: `\r\n        border-left:0;\r\n    `,\r\n    [`${tagName}:active>*, ${tagName}[active]>*`]: {\r\n        color: 'var(--gzm-a-btn-txt-color)',\r\n        background: 'var(--gzm-a-btn-background)',\r\n        border: 'var(--gzm-a-btn-border)',\r\n    },\r\n    [`${tagName}:hover>*`]: {\r\n        background: 'var(--gzm-h-btn-background)',\r\n        border: 'var(--gzm-h-btn-border)',\r\n        color: 'var(--gzm-h-btn-txt-color)',\r\n    },\r\n    //link <a> 的颜色\r\n    [`${tagName} a`]: `\r\n        color: inherit;\r\n    `,\r\n\r\n    //menu\r\n    //https://www.compart.com/en/unicode/U+2BC8\r\n    [`${tagName}[tag=menu]>div:last-child::after`]: `\r\n        content: '⯈';\r\n        font-size: 0.75rem;\r\n        padding-right:0.125rem;\r\n    `,\r\n});\r\n\r\n@defineElement({tagName, mutableAttributes})\r\nexport class MenuItem extends ViewElement<MiOptions> implements AttributeHandlers<typeof mutableAttributes[number]> {\r\n\r\n    //一共 4 个，用来放置: icon, label, badge, submenu。整个 menu 是 grid 布局，这 4 个 div 就是一行的占位符。\r\n    $divs: HTMLElement[] = [document.createElement(iconTagName), document.createElement('div'), document.createElement('div'), document.createElement('div')];\r\n\r\n    connectedCallback() {\r\n        if (this.childElementCount === 0) {\r\n            this.append(...this.$divs);\r\n        }\r\n    }\r\n    \r\n    // #region 处理所有的属性\r\n    @strAttr\r\n    accessor tag: MenuItemTag | undefined;\r\n\r\n    @strAttr\r\n    accessor label: string | undefined;\r\n\r\n    @strAttr\r\n    accessor icon: string | undefined;\r\n\r\n    /* 不要定义 group 属性，当 group 改变时由 menu 去处理 model event。\r\n    @ATR.getStrAttr\r\n    public get group(): string {return '';}*/\r\n\r\n    @strAttr\r\n    accessor badge: string | undefined;\r\n\r\n    @boolAttr\r\n    accessor active: boolean = false;\r\n\r\n    @boolAttr\r\n    accessor checked: boolean = false;\r\n\r\n    @strAttr\r\n    accessor href: string | undefined;\r\n\r\n    @strAttr\r\n    accessor target: string | undefined;\r\n\r\n    _tag_set<MenuItemTag>(tag: MenuItemTag | null, old: MenuItemTag | null) {\r\n        if (old === tag) return;\r\n\r\n        //处理图标\r\n        if (tag === 'check' || tag === 'radio') {\r\n            //现在无论是 check 还是 radio，都必须重新设置 icon，而且是根据 checked 来设置。\r\n            this._checked_set();\r\n        }\r\n        else if (old === 'check' || old === 'radio') {\r\n            this._icon_set(this.icon ?? null);\r\n        }\r\n\r\n        //处理文本\r\n        if (tag === 'link') {\r\n            const $d = this.$divs[1]!;\r\n            const $a = this.$divs[1] = document.createElement('a');\r\n            if ($d.isConnected) {\r\n                $d.replaceWith($a);\r\n            }\r\n            this._label_set(this.label ?? null);\r\n            this._href_set(this.href ?? null);\r\n            this._target_set(this.target ?? '_blank');\r\n        }\r\n        else if (old === 'link') {\r\n            const $a = this.$divs[1]!;\r\n            const $d = this.$divs[1] = document.createElement('div');\r\n            if ($a.isConnected) {\r\n                $a.replaceWith($d);\r\n            }\r\n            this._label_set(this.label ?? null);\r\n        }\r\n\r\n        //badge 对所有的都一样，无需处理\r\n\r\n        //处理 submenu\r\n        if (tag === 'menu') {\r\n            //什么都不需要做\r\n        }\r\n        else if (old === 'menu') {\r\n            this.$divs[3]!.innerHTML = '';\r\n        }\r\n    }    \r\n    _icon_set(icn: string | null) {\r\n        const $icn = this.$divs[0] as Icon;\r\n        $icn.icon = icn ?? void 0;\r\n    }\r\n    _label_set(lbl: string | null) {\r\n        const $div = this.$divs[1]!;\r\n        $div.textContent = lbl;\r\n    }\r\n    _badge_set(bdg: string | null) {\r\n        const $div = this.$divs[2]!;\r\n        if (!bdg) {\r\n            $div.innerHTML = '';\r\n            return;\r\n        }\r\n        let $bdg = $div.firstElementChild as Badge;\r\n        if (!$bdg) {\r\n            $bdg = document.createElement(badgeTagName);\r\n            $div.append($bdg);\r\n        }\r\n        $bdg.badge = bdg;\r\n    }\r\n    _checked_set() {\r\n        const tag = this.tag;\r\n        const checked = this.checked;\r\n\r\n        //https://old.unicode-table.com/en/sets/check/\r\n        if (tag === 'check') {\r\n            //this._icon_set(icn, checked ? '▣' : '▢');\r\n            this._icon_set(checked ? checkboxChecked : checkboxUnchecked);\r\n        }\r\n        else if (tag === 'radio') {\r\n            //this._icon_set(icn, checked ? '◉' : '◯');\r\n            this._icon_set(checked ? radioChecked : radioUnchecked);\r\n            /*\r\n            if (this.checked && this.inputName) {\r\n                //相同 input-name 的其他项要\r\n                const ra = this.parentElement.querySelectorAll(`${menuItemTagName}[input-name='${this.inputName}'][type='radio']`);\r\n                for (const r of ra) {\r\n                    if (r !== this && r.checked) {\r\n                        r.checked = false;\r\n                    }\r\n                }\r\n            }*/\r\n        }\r\n    }\r\n    _href_set(nv: string | null) {\r\n        const $a = this.$divs[1] as HTMLAnchorElement;\r\n        $a.href = nv || 'javascript:void(0);';\r\n    }\r\n    _target_set(nv: string | null) {\r\n        const $a = this.$divs[1] as HTMLAnchorElement;\r\n        $a.target = nv ?? '_blank';\r\n    }\r\n    // #endregion\r\n}\r\n\r\nconst radioUnchecked = 'gzm-menu-item-radio-unchecked';\r\nconst radioChecked = 'gzm-menu-item-radio-checked';\r\nconst checkboxUnchecked = 'gzm-menu-item-checkbox-unchecked';\r\nconst checkboxChecked = 'gzm-menu-item-checkbox-checked';\r\n\r\niconCache[checkboxUnchecked] =\r\n`<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\">\r\n   <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"></path>\r\n   <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>\r\n</svg>`;\r\n\r\niconCache[checkboxChecked] =\r\n`<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\">\r\n    <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"></path>\r\n    <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>\r\n</svg>`;\r\n\r\niconCache[radioUnchecked] =\r\n`<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\">\r\n    <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"></path>\r\n    <path d=\"M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\"></path>\r\n</svg>`;\r\n\r\niconCache[radioChecked] =\r\n`<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\">\r\n    <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"></path>\r\n    <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>\r\n</svg>`;","import type {MiOptions, ISubMenu} from './model';\r\nimport * as MI from './menuItem';\r\nimport {type ViewListModel, ViewGroupElement} from '@gzmjs/mvvm';\r\nimport {baseStyle, createStyleSheet, defineElement, type Corner, CornerHelper, isLeftCorner, isTopCorner, makeCorner, boolAttr, xy, gzmFrame} from '@gzmjs/ui-basic';\r\n\r\nexport const tagName = 'GZM-MENU';//弹出式菜单\r\ndeclare global {\r\n    interface HTMLElementTagNameMap {\r\n        [tagName]: Menu;\r\n    }\r\n}\r\n\r\nexport interface MenuOptions extends ViewListModel<MiOptions, MI.MenuItem, Menu> {\r\n    tagName?: typeof tagName;\r\n    itemClick?: (this: MenuOptions, item: MiOptions, $item: MI.MenuItem, ev: MouseEvent) => void;\r\n}\r\n\r\nconst styleSheet = createStyleSheet({\r\n    ':host': `\r\n        display: block;\r\n        opacity: 0.9;\r\n        top:0;\r\n        left:0;\r\n        outline: none;\r\n        padding: 0.5rem !important;\r\n    ` + gzmFrame,\r\n    section: `\r\n        display:inline-grid;\r\n        grid-template-columns: auto auto auto auto;\r\n        max-height:80vh;\r\n        overflow-y:auto;\r\n    `,\r\n    //group\r\n    nav: `\r\n        display:contents;\r\n    `,\r\n    //delimiter\r\n    'nav:not(:first-child)::before': `\r\n        content: '';\r\n        grid-column: 1 / span 4;\r\n        border-top: var(--gzm-btn-border);\r\n        margin: 0.5rem 0;\r\n    `\r\n});\r\n\r\n@defineElement({tagName})\r\nexport class Menu extends ViewGroupElement<MiOptions, MI.MenuItem, MenuOptions> {\r\n    constructor() {\r\n        super();\r\n\r\n        const $s = this.$section;\r\n        $s.addEventListener('click', this.#onClick, true);//捕获阶段\r\n        $s.addEventListener('wheel', this.#onwheel, {passive:true});//否则浏览器警告\r\n\r\n        const root = this.attachShadow({ mode: 'open' });\r\n        root.adoptedStyleSheets = [baseStyle, styleSheet, MI.styleSheet];\r\n        root.appendChild($s);\r\n    }\r\n    declare readonly shadowRoot: ShadowRoot;\r\n\r\n    //捕获阶段在先，而 $item.model.onclick 后被调用。为了让这里的 checked 属性先被修改。\r\n    #onClick = (e: MouseEvent) => {\r\n        const $t = e.target as Element;\r\n        const $item = $t.closest(MI.tagName) as MI.MenuItem;\r\n        if (!$item) return;\r\n\r\n        if ($item.tag === 'menu') {\r\n            this.#showSubMenu($item);\r\n            return;\r\n        }\r\n        \r\n        if ($item.tag === 'check') {\r\n            $item.setModelProperty('checked', !$item.checked);\r\n        }\r\n        else if ($item.tag === 'radio' && !$item.checked) {\r\n            $item.parentElement?.querySelectorAll<MI.MenuItem>('*[tag=radio][checked]')?.forEach($x => $x.setModelProperty('checked', false));\r\n            $item.setModelProperty('checked', true);\r\n        }\r\n        if (!$item.model?.onclick) {\r\n            findMenuModelWithClick(this)?.itemClick?.($item.model!, $item, e);\r\n        }\r\n        this.closeAll();\r\n    }\r\n    // #region 处理显示和隐藏\r\n    public show($attachTo: HTMLElement, attachCorner: Corner, corner?: Corner) {\r\n        if (corner === void 0) {\r\n            const isLeft = isLeftCorner(attachCorner);\r\n            const isTop = isTopCorner(attachCorner);\r\n            corner = makeCorner(!isLeft, isTop);\r\n        }\r\n        this.#checkTabIndex();\r\n        \r\n        new CornerHelper(this, corner, $attachTo, attachCorner).pos();\r\n\r\n        this.focus();\r\n        this.#checkScroll();\r\n        this.onblur = this.#onblur;\r\n        this.onkeydown = this.#onkeydown;\r\n    }\r\n    public get isActive() {\r\n        const ret = this === document.activeElement || !!this.shadowRoot.activeElement;\r\n        console.debug(tagName, 'isActive', ret);\r\n        return ret;\r\n    }\r\n    /**\r\n     * 当失去焦点,则判断当前获得焦点的元素是否是container的子元素,如果不是则关闭\r\n     */\r\n    #checkActive() {\r\n        if (this.isActive) {\r\n            /**\r\n             * 当前焦点元素是子元素，则使容器再次获得焦点，否则下次就不会触发onblur事件。\r\n             * 举例：datepicker控件，弹出的日历中点击选择月份，会触发onblur事件。\r\n             * 如果不将焦点重新设置到容器，则鼠标点击 body 不会关闭 popup。\r\n             */\r\n            this.focus();\r\n        }\r\n        else {\r\n            this._closeIfNotActive();\r\n        }\r\n    }\r\n    #onblur() {\r\n        //https://devdocs.io/dom/element/blur_event\r\n        console.debug(tagName, 'blur');\r\n\r\n        if (!this.#subMenu) {\r\n            //当不存在子菜单的时候，就需要关闭当前菜单。\r\n            window.setTimeout(() => {\r\n                this.#checkActive();\r\n            }, 25);\r\n        }\r\n    }\r\n    #onkeydown(e: KeyboardEvent) {\r\n        if (e.key === 'Escape') {\r\n            //esc，如果是子菜单则只关闭自己这一级\r\n            if (this.$supMenuItem) {\r\n                const $m = tryGetMenu(this.$supMenuItem);\r\n                $m?._closeSubMenu();                    \r\n            }\r\n            else {\r\n                this.close();\r\n            }\r\n        }\r\n    }\r\n    #checkTabIndex() {\r\n        if (!this.hasAttribute('tabindex')) {\r\n            this.setAttribute('tabindex', '0');\r\n        }\r\n    }\r\n    // #endregion\r\n\r\n    // #region 处理滚动\r\n    #onwheel = (e: WheelEvent) => {\r\n        //https://devdocs.io/dom/element/wheel_event\r\n        const $s = this.$section;\r\n        //console.debug(tagName, 'scroll', `${$s.scrollHeight}, ${$s.scrollTop}, ${$s.clientHeight}`, `${e.deltaMode} ${e.deltaY}`);\r\n        \r\n        if (this.up && e.deltaY < 0) {\r\n            $s.scrollTop += e.deltaY;\r\n            this.#checkScroll();\r\n        }\r\n        if (this.down && e.deltaY > 0) {\r\n            $s.scrollTop += e.deltaY;\r\n            this.#checkScroll();\r\n        }\r\n    }\r\n    #checkScroll() {\r\n        this.up = false;\r\n        this.down = false;\r\n        //console.debug(`${this.scrollTop} ${this.clientHeight} ${this.scrollHeight}`);\r\n\r\n        const $s = this.$section;\r\n        if ($s.scrollHeight <= $s.clientHeight) {\r\n            return;\r\n        }\r\n        if ($s.scrollTop > 0) {\r\n            this.up = true;\r\n        }\r\n\r\n        const diff = $s.scrollTop + $s.clientHeight - $s.scrollHeight;\r\n        //console.debug(tagName, 'checkScroll', diff);\r\n        if ( diff < -1) { //浮点数计算有误差，逻辑上应该是 < 0。\r\n            this.down = true;\r\n        }\r\n    }\r\n\r\n    @boolAttr\r\n    accessor up: boolean = false;\r\n\r\n    @boolAttr\r\n    accessor down: boolean = false;\r\n    // #endregion\r\n\r\n    // #region 处理子菜单\r\n    $supMenuItem?: MI.MenuItem;   //作为子菜单存在的时候，这个值指向上级菜单的菜单项\r\n    #subMenu?: Menu;   //当前显示的子菜单\r\n\r\n    #showSubMenu($mi: MI.MenuItem) {\r\n        const sis = ($mi.model as ISubMenu)?.subItems;\r\n        if (!sis) return;\r\n        \r\n        this._closeSubMenu();\r\n\r\n        $mi.active = true;    //显示子菜单的时候可以明显看出上一级的菜单项\r\n\r\n        const $sm = this.#subMenu = createMenu(...sis);\r\n        $sm.$supMenuItem = $mi;\r\n        $sm.show($mi.$divs[3]!, xy.rightTop, xy.leftTop);\r\n    }\r\n    \r\n    /**\r\n     * 关闭自己以及下级菜单\r\n     */\r\n    close() {\r\n        this._closeSubMenu();\r\n        this.remove();\r\n    }\r\n    /**\r\n     * 关闭所有菜单，包括上级和上级的上级\r\n     */\r\n    closeAll() {\r\n        this.close();\r\n\r\n        if (this.$supMenuItem) {\r\n            const $m = tryGetMenu(this.$supMenuItem);\r\n            $m?.closeAll();\r\n        }\r\n    }\r\n    /**\r\n     * 场景：\r\n     * 此菜单显示了一个子菜单，子菜单获得输入焦点。鼠标没有点击子菜单，却点击了此菜单（如另一个submenu菜单项，或者不属于菜单项的任意菜单部分）。\r\n     * 子菜单 blur 事件触发，这时不能关闭所有的菜单，而是从子菜单开始向上找，将未获得焦点的菜单全部关闭。\r\n     * @returns \r\n     */\r\n    protected _closeIfNotActive() {\r\n        if (this.isActive) {\r\n            this._closeSubMenu();\r\n            return;\r\n        }\r\n        if (this.$supMenuItem) {\r\n            const $m = tryGetMenu(this.$supMenuItem);\r\n            $m?._closeIfNotActive();\r\n        }\r\n        else {\r\n            this.close();\r\n        }\r\n    }\r\n    protected _closeSubMenu() {\r\n        if (this.#subMenu) {\r\n            const $mi = this.#subMenu.$supMenuItem;\r\n            if ($mi) {\r\n                $mi.active = false;\r\n                this.#subMenu.$supMenuItem = void 0;\r\n            }\r\n            this.#subMenu.close();\r\n            this.#subMenu = void 0;\r\n        }\r\n        this.focus();\r\n    }\r\n    // #endregion\r\n\r\n    // #region 重写 ViewGroupElement\r\n    protected _getViewItemTagName(): string {\r\n        return MI.tagName;\r\n    }\r\n    public get $viewItemsContainer(): HTMLElement | ShadowRoot {\r\n        return this.$section;\r\n    }\r\n    protected $section = document.createElement('section');\r\n    protected readonly groupElementTagName: string = 'NAV';\r\n    // #endregion\r\n}\r\n\r\nfunction tryGetMenu(mi: MI.MenuItem): Menu | undefined {\r\n    const sr = mi.getRootNode() as ShadowRoot;\r\n    return sr.host as Menu;\r\n}\r\n\r\nfunction findMenuModelWithClick($menu: Menu): MenuOptions | undefined {\r\n    if ($menu.model?.itemClick) {\r\n        return $menu.model;\r\n    }\r\n    if ($menu.$supMenuItem) {\r\n        const $m = tryGetMenu($menu.$supMenuItem);\r\n        if ($m) {\r\n            return findMenuModelWithClick($m);\r\n        }\r\n    }\r\n}\r\n\r\nexport function createMenu(...menuItems: MiOptions[]): Menu {\r\n    const $menu = document.createElement(tagName);\r\n    $menu.modelList = menuItems;\r\n    $menu.setAttribute('popover', 'manual');\r\n    return $menu;\r\n}\r\n\r\nexport function createMenuWithModel(vm: MenuOptions): Menu {\r\n    const $menu = document.createElement(tagName);\r\n    $menu.model = vm;\r\n    $menu.setAttribute('popover', 'manual');\r\n    return $menu;\r\n}\r\n","import {type ViewListModel, ViewGroupElement} from '@gzmjs/mvvm';\r\nimport {baseStyle, createStyleSheet, defineElement, xy} from '@gzmjs/ui-basic';\r\nimport type {MiOptions, ISubMenu} from './model';\r\nimport * as MI from './menuItem';\r\nimport * as M from './menu';\r\n\r\nexport const tagName = 'GZM-MENU-LIST';//非弹出式菜单\r\nexport interface MenuListOptions extends ViewListModel<MiOptions, MI.MenuItem, MenuList> {\r\n    tagName?: typeof tagName;\r\n}\r\n\r\nconst styleSheet = createStyleSheet({\r\n    ':host': `\r\n        display:inline-block;\r\n    `,\r\n    \r\n    //菜单项太多要求出现滚动栏，如果:host出现滚动栏很难看。\r\n    //所以由 section 出现滚动栏，在 :host 和 section 之间要有 padding。\r\n    section: `\r\n        display:inline-grid;\r\n        grid-template-columns: auto auto auto auto;\r\n        max-height:100%;\r\n        overflow-y:auto;\r\n    `,\r\n\r\n    //group\r\n    nav: `\r\n        display:contents;\r\n    `,\r\n    'nav[label]:not([label=\"\"])::before': `\r\n        content: attr(label);\r\n        font-weight: bolder;\r\n        grid-column: 1 / span 4;\r\n        padding-inline: 0.25rem;\r\n        padding-bottom: 0.25rem;\r\n    `,\r\n    'nav[label]:not([label=\"\"]):not(:first-child)::before': `\r\n        padding-top: 1rem;\r\n    `,\r\n});\r\n\r\n@defineElement({tagName})\r\nexport class MenuList extends ViewGroupElement<MiOptions, MI.MenuItem, MenuListOptions> {\r\n    constructor() {\r\n        super();\r\n        const root = this.attachShadow({ mode: 'open' });\r\n        root.adoptedStyleSheets = [baseStyle, styleSheet, MI.styleSheet];\r\n        root.addEventListener('click', this.#onClick, true);//捕获阶段\r\n        root.appendChild(this.$section);\r\n    }\r\n    declare readonly shadowRoot: ShadowRoot;\r\n\r\n    //捕获阶段在先，而 item.model.onclick 后被调用。为了让这里的 checked 属性先被修改。\r\n    #onClick = (e: Event) => {\r\n        const $t = e.target as Element;\r\n        const item = $t.closest(MI.tagName) as MI.MenuItem;\r\n        if (!item) return;\r\n\r\n        //清除其他选中项\r\n        this.shadowRoot.querySelectorAll<MI.MenuItem>(MI.tagName + '[active]').forEach($x => $x.active = false);\r\n        item.active = true;    //选中点击项。\r\n\r\n        if (item.tag === 'menu') {\r\n            this.#showSubMenu(item);\r\n            return;\r\n        }\r\n        if (item.tag === 'check') {\r\n            item.setModelProperty('checked', !item.checked);\r\n        }\r\n        else if (item.tag === 'radio' && !item.checked) {\r\n            item.parentElement?.querySelectorAll<MI.MenuItem>('*[tag=radio][checked]')?.forEach($x => $x.setModelProperty('checked', false));\r\n            item.setModelProperty('checked', true);\r\n        }\r\n        this._closeSubMenu();\r\n    };\r\n\r\n    // #region 处理子菜单\r\n    #subMenu?: M.Menu;   //当前显示的子菜单\r\n\r\n    #showSubMenu($mi: MI.MenuItem) {\r\n        const sis = ($mi.model as ISubMenu)?.subItems;\r\n        if (!sis) return;\r\n\r\n        this._closeSubMenu();\r\n\r\n        const $sm = this.#subMenu = M.createMenu(...sis);\r\n        $sm.$supMenuItem = $mi;\r\n        $sm.show($mi.$divs[3]!, xy.rightTop, xy.leftTop);\r\n    }\r\n    _closeSubMenu() {\r\n        if (this.#subMenu) {\r\n            const $mi = this.#subMenu.$supMenuItem;\r\n            if ($mi) {\r\n                $mi.active = false;\r\n                this.#subMenu.$supMenuItem = void 0;\r\n            }\r\n            this.#subMenu.close();\r\n            this.#subMenu = void 0;\r\n        }\r\n    }\r\n    protected _closeIfNotActive() {\r\n        this._closeSubMenu();\r\n    }\r\n    closeAll() {\r\n        this._closeSubMenu();\r\n    }\r\n    // #endregion\r\n\r\n    // #region 重写 ViewGroupElement\r\n    protected _getViewItemTagName(): string {\r\n        return MI.tagName;\r\n    }\r\n    public get $viewItemsContainer(): HTMLElement | ShadowRoot {\r\n        return this.$section;\r\n    }\r\n    protected readonly groupElementTagName: string = 'NAV';\r\n    protected $section = document.createElement('section');\r\n    // #endregion\r\n}\r\n"],"names":["_target_dec","_href_dec","_checked_dec","_active_dec","_badge_dec","_icon_dec","_label_dec","_tag_dec","_a","_MenuItem_decorators","_init","_tag","_label","_icon","_badge","_active","_checked","_href","_target","mutableAttributes","tagName","styleSheet","createStyleSheet","defineElement","MenuItem","ViewElement","strAttr","boolAttr","__publicField","iconTagName","__privateAdd","__runInitializers","tag","old","$d","$a","icn","$icn","lbl","$div","bdg","$bdg","badgeTagName","checked","checkboxChecked","checkboxUnchecked","radioChecked","radioUnchecked","nv","__decoratorStart","__decorateElement","iconCache","_down_dec","_up_dec","_Menu_decorators","_onClick","_Menu_instances","checkActive_fn","onblur_fn","onkeydown_fn","checkTabIndex_fn","_onwheel","checkScroll_fn","_up","_down","_subMenu","showSubMenu_fn","gzmFrame","Menu","ViewGroupElement","e","$item","MI.tagName","__privateMethod","$x","findMenuModelWithClick","$s","__privateGet","root","baseStyle","MI.styleSheet","$attachTo","attachCorner","corner","isLeft","isLeftCorner","isTop","isTopCorner","makeCorner","CornerHelper","ret","tryGetMenu","$mi","__privateSet","sis","$sm","createMenu","xy","mi","$menu","$m","menuItems","createMenuWithModel","vm","_MenuList_decorators","MenuList","#onClick","item","#showSubMenu","#subMenu","M.createMenu"],"mappings":"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"}

package/package.json

@@ -1,30 +1,19 @@
 {
   "name": "@gzmjs/menu",
   "description": "GZMJS UI Menu Component",
-  "version": "0.3.0",
-  "module": "dist/menu.es.js",
+  "version": "0.3.2",
+  "module": "dist/index.es.js",
   "types": "dist/index.d.ts",
   "type": "module",
   "files": [
     "dist"
   ],
+  "dependencies": {
+    "@gzmjs/mvvm": "0.1.5",
+    "@gzmjs/ui-basic": "0.4.0"
+  },
   "scripts": {
-    "dev": "vite",
     "build": "tsc && vite build",
-    "preview": "vite preview",
     "analyzer": "vite-bundle-visualizer"
-  },
-  "devDependencies": {
-    "@types/node": "^25.1.0",
-    "eslint": "^9.39.2",
-    "typescript": "~5.9.3",
-    "typescript-eslint": "^8.54.0",
-    "vite": "^7.2.4",
-    "vite-bundle-visualizer": "^1.2.1",
-    "vite-plugin-dts": "^4.5.4"
-  },
-  "dependencies": {
-    "@gzmjs/mvvm": "^0.1.3",
-    "@gzmjs/ui-basic": "^0.3.14"
   }
-}
+}