@gzmjs/menu 0.1.0

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

@@ -0,0 +1,44 @@
+import { MiOptions } from './model';
+import { ViewListModel, ViewGroupElement } from '@gzmjs/mvvm';
+import { Corner } from '@gzmjs/ui-basic';
+import * as MI from './menuItem';
+export declare const tagName = "GZM-MENU";
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: Menu;
+    }
+}
+export interface MenuOptions extends ViewListModel<MiOptions, MI.MenuItem, Menu> {
+    tagName?: typeof tagName;
+}
+export declare function createMenu(...menuItems: MiOptions[]): Menu;
+export declare class Menu extends ViewGroupElement<MiOptions, MI.MenuItem, MenuOptions> {
+    #private;
+    constructor();
+    readonly shadowRoot: ShadowRoot;
+    show($attachTo: HTMLElement, attachCorner: Corner, corner?: Corner): void;
+    get isActive(): boolean;
+    accessor up: boolean;
+    accessor down: boolean;
+    $supMenuItem?: MI.MenuItem;
+    /**
+     * 关闭自己以及下级菜单
+     */
+    close(): void;
+    /**
+     * 关闭所有菜单，包括上级和上级的上级
+     */
+    closeAll(): void;
+    /**
+     * 场景：
+     * 此菜单显示了一个子菜单，子菜单获得输入焦点。鼠标没有点击子菜单，却点击了此菜单（如另一个submenu菜单项，或者不属于菜单项的任意菜单部分）。
+     * 子菜单 blur 事件触发，这时不能关闭所有的菜单，而是从子菜单开始向上找，将未获得焦点的菜单全部关闭。
+     * @returns
+     */
+    protected _closeIfNotActive(): void;
+    protected _closeSubMenu(): void;
+    protected _getViewItemTagName(): string;
+    get $viewItemsContainer(): HTMLElement | ShadowRoot;
+    protected $section: HTMLElement;
+    protected readonly groupElementTagName: string;
+}

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

@@ -0,0 +1,27 @@
+import { MiOptions } from './model.ts';
+import { AttributeHandlers } from '@gzmjs/ui-basic';
+import { ViewElement } from '@gzmjs/mvvm';
+type MenuItemTag = 'click' | 'link' | 'check' | 'radio' | 'menu';
+declare const mutableAttributes: readonly ["tag", "label", "icon", "badge", "checked", "href", "target"];
+export declare const tagName = "GZM-MENU-ITEM";
+export declare const styleSheet: CSSStyleSheet;
+export declare class MenuItem extends ViewElement<MiOptions> implements AttributeHandlers<typeof mutableAttributes[number]> {
+    $divs: HTMLElement[];
+    connectedCallback(): void;
+    accessor tag: MenuItemTag | undefined;
+    accessor label: string | undefined;
+    accessor icon: string | undefined;
+    accessor badge: string | undefined;
+    accessor active: boolean;
+    accessor checked: boolean;
+    accessor href: string | undefined;
+    accessor target: string | undefined;
+    _tag_set<MenuItemTag>(tag: MenuItemTag | null, old: MenuItemTag | null): void;
+    _icon_set(icn: string | null): void;
+    _label_set(lbl: string | null): void;
+    _badge_set(bdg: string | null): void;
+    _checked_set(): void;
+    _href_set(nv: string | null): void;
+    _target_set(nv: string | null): void;
+}
+export {};

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

@@ -0,0 +1,19 @@
+import { ViewListModel, ViewGroupElement } from '@gzmjs/mvvm';
+import { MiOptions } from './model';
+import * as MI from './menuItem';
+export declare const tagName = "GZM-MENU-LIST";
+export interface MenuListOptions extends ViewListModel<MiOptions, MI.MenuItem, MenuList> {
+    tagName?: typeof tagName;
+}
+export declare class MenuList extends ViewGroupElement<MiOptions, MI.MenuItem, MenuListOptions> {
+    #private;
+    constructor();
+    readonly shadowRoot: ShadowRoot;
+    _closeSubMenu(): void;
+    protected _closeIfNotActive(): void;
+    closeAll(): void;
+    protected _getViewItemTagName(): string;
+    get $viewItemsContainer(): HTMLElement | ShadowRoot;
+    protected readonly groupElementTagName: string;
+    protected $section: HTMLElement;
+}

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

@@ -0,0 +1,40 @@
+import { ViewModel } from '@gzmjs/mvvm';
+import { MenuItem } from './menuItem';
+interface IMiOptions extends ViewModel<MenuItem> {
+    label: string;
+    icon?: string;
+    group?: string;
+    badge?: string;
+    /**
+     * 本来这个属性只适用于 check 和 radio，为了在 menu 中调用 setModelProperty('check') 改到这里。
+     * 同时需要对其他菜单项添加 checked?: never。
+     */
+    checked?: boolean;
+}
+interface IClick extends IMiOptions {
+    readonly tag: 'click';
+    checked?: never;
+    onclick?: (this: IClick, ev: MouseEvent, vm: IClick) => unknown;
+}
+interface ILink extends IMiOptions {
+    readonly tag: 'link';
+    href: string;
+    target?: string;
+    checked?: never;
+    onclick?: (this: ILink, ev: MouseEvent, vm: ILink) => unknown;
+}
+interface ICheck extends IMiOptions {
+    readonly tag: 'check';
+    onclick?: (this: ICheck, ev: MouseEvent, vm: ICheck) => unknown;
+}
+interface IRadio extends IMiOptions {
+    readonly tag: 'radio';
+    onclick?: (this: IRadio, ev: MouseEvent, vm: IRadio) => unknown;
+}
+export interface ISubMenu extends IMiOptions {
+    readonly tag: 'menu';
+    checked?: never;
+    subItems: MiOptions[];
+}
+export type MiOptions = IClick | ILink | ICheck | IRadio | ISubMenu;
+export {};

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { tagName as menuTagName, type MenuOptions, createMenu, Menu } from './009-menu/menu';
+export { tagName as menuListTagName, type MenuListOptions, MenuList } from './009-menu/menuList';

package/dist/menu.es.js

@@ -0,0 +1,659 @@
+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";
+function createMenu(...menuItems) {
+  const $menu = document.createElement(tagName$1);
+  $menu.modelList = menuItems;
+  $menu.setAttribute("popover", "manual");
+  return $menu;
+}
+const styleSheet$1 = createStyleSheet({
+  ":host": {
+    "display": "block",
+    "opacity": "0.9",
+    "z-index": "10000",
+    //否则可能造成：网页原本没有滚动栏，appendTo(body)之后出现滚动栏，在定位后滚动栏又消失，最终出现偏差
+    "top": "0",
+    "left": "0",
+    //去掉 focus 后会显示的黑框
+    "outline-style": "none"
+  },
+  section: `
+        display:inline-grid;
+        grid-template-columns: auto auto auto auto;
+        max-height:80vh;
+        overflow-y:hidden;
+    `,
+  //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;
+    `
+});
+const scrollStyleSheet = createStyleSheet({
+  //scroll 指示器
+  [tagName$1]: `
+        max-height: 80vh;
+        scroll-behavior: smooth;
+    ` + gzmFrame,
+  //不理解为什么浏览器默认样式是 overflow: auto !important。
+  [tagName$1 + "[popover]:popover-open"]: `
+        overflow-y: hidden !important;
+    `,
+  [tagName$1 + "[up]::before"]: `
+        content: '△';
+        position: absolute;
+        top: -0.5rem;
+        left: 50%;
+        transform: translateX(-50%);
+    `,
+  [tagName$1 + "[down]::after"]: `
+        content: '▽';
+        position: absolute;
+        bottom: -0.5rem;
+        left: 50%;
+        transform: translateX(-50%);
+    `
+});
+_Menu_decorators = [defineElement({ tagName: tagName$1, style: scrollStyleSheet })];
+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);
+      }
+      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;
+}
+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,
+  tagName as menuListTagName,
+  tagName$1 as menuTagName
+};
+//# sourceMappingURL=menu.es.js.map

package/dist/menu.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.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}\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\nconst styleSheet = createStyleSheet({\r\n    ':host': {\r\n        'display': 'block',\r\n        'opacity': '0.9',\r\n        'z-index': '10000',\r\n\r\n        //否则可能造成：网页原本没有滚动栏，appendTo(body)之后出现滚动栏，在定位后滚动栏又消失，最终出现偏差\r\n        'top':'0',\r\n        'left':'0',\r\n\r\n        //去掉 focus 后会显示的黑框\r\n        'outline-style': 'none',\r\n    },\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:hidden;\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\nconst scrollStyleSheet = createStyleSheet({\r\n    //scroll 指示器\r\n    [tagName]: `\r\n        max-height: 80vh;\r\n        scroll-behavior: smooth;\r\n    ` + gzmFrame,\r\n    //不理解为什么浏览器默认样式是 overflow: auto !important。\r\n    [tagName + '[popover]:popover-open']: `\r\n        overflow-y: hidden !important;\r\n    `,\r\n    [tagName + '[up]::before']: `\r\n        content: '△';\r\n        position: absolute;\r\n        top: -0.5rem;\r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n    `,\r\n    [tagName + '[down]::after']: `\r\n        content: '▽';\r\n        position: absolute;\r\n        bottom: -0.5rem;\r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n    `,\r\n});\r\n\r\n@defineElement({tagName, style: scrollStyleSheet})\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: 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        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        this.closeAll();\r\n    }\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}","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":["_a","_init","tagName","styleSheet","__publicField","__privateAdd","__runInitializers","__decoratorStart","__decorateElement","MI.tagName","$s","MI.styleSheet","M.createMenu"],"mappings":"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"}

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@gzmjs/menu",
+  "description": "GZMJS UI Menu Component",
+  "version": "0.1.0",
+  "module": "dist/menu.es.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "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.0",
+    "@gzmjs/ui-basic": "^0.3.0"
+  }
+}