duoyun-ui 0.0.2

package/elements/map.js

@@ -0,0 +1,323 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _DuoyunMapElement_projection, _DuoyunMapElement_areas, _DuoyunMapElement_onPan, _DuoyunMapElement_onEnd, _DuoyunMapElement_onLeaveArea, _DuoyunMapElement_onLeaveNode, _DuoyunMapElement_renderArea, _DuoyunMapElement_renderName, _DuoyunMapElement_renderNode;
+import { html, adoptedStyle, createCSSSheet, css, svg, customElement, property, emitter, styleMap, classMap, state, } from '@mantou/gem';
+import { geoProjection, geoMercatorRaw, geoEquirectangularRaw, geoPath } from 'd3-geo';
+import { theme } from '../lib/theme';
+import { DuoyunLoadableBaseElement } from './base/loadable';
+import '@mantou/gem/elements/gesture';
+// https://github.com/d3/d3-geo/blob/main/src/projection/equirectangular.js
+// https://github.com/d3/d3-geo/blob/main/src/projection/mercator.js
+const customProjectionRaw = (lambda, phi) => {
+    const limit = (Math.PI / 180) * 53;
+    const maxPhi = (Math.PI / 180) * 95;
+    const total = maxPhi - limit;
+    const [, y1] = geoEquirectangularRaw(lambda, phi);
+    const [, y2] = geoMercatorRaw(lambda, phi);
+    const phiAbs = Math.abs(phi);
+    const ratio = phiAbs > limit ? (phiAbs - limit) / total : 0;
+    const y = y1 * ratio + y2 * (1 - ratio);
+    return [lambda, y];
+};
+// TODO: implement `invert`
+export const geoCommonProjection = () => geoProjection(customProjectionRaw).scale(152.63);
+// viewbox 1
+// https://www.zhangxinxu.com/sp/svgo/
+export const shapes = [
+    // 圆
+    {
+        strokeScale: 1,
+        scale: 2,
+        d: 'M1 .36A.5.5 0 0 1 .64 1 .5.5 0 0 1 0 .64a.42.42 0 0 1 0-.27A.49.49 0 0 1 .63 0 .51.51 0 0 1 1 .29z',
+    },
+    // 三边形
+    {
+        strokeScale: 0.9,
+        scale: 2,
+        d: 'M.5109 0.01L.0087 .88h1.0046L.5109 .01z',
+    },
+    // 菱形
+    {
+        strokeScale: 0.8,
+        scale: 2,
+        d: 'M0.00704 0.5071l0.5-0.5 0.5 0.5-0.5 0.5z',
+    },
+    // 五边形
+    {
+        strokeScale: 0.8,
+        scale: 2,
+        d: 'M0.5030.0062L0.0059 0.3674l0.1899 0.5844h0.6145l0.19-0.5844L0.5030.0062z',
+    },
+    // 六角
+    {
+        strokeScale: 0.7,
+        scale: 2.5,
+        d: 'M.73.48L.86.25H.6L.43 0 .3.23H0l.13.25L0 .75h.26L.43 1 .56.77h.3L.73.52V.48z',
+    },
+    // 四角
+    {
+        strokeScale: 0.7,
+        scale: 3,
+        d: 'M0.4974 0L0.3709 0.3726 0 0.4988l0.3692 0.1286L0.4974 1l0.1255-0.372L0.9972 0.5 0.6263 0.3744z',
+    },
+    // 五角
+    {
+        strokeScale: 0.7,
+        scale: 2.5,
+        d: 'M0.5107 0.8l-0.309 0.1624 0.059-0.344-0.25-0.2437 0.3455-0.0502L0.5107 0.0113l0.1546 0.3131 0.3454 0.0502-0.25 0.2437 0.0591 0.344-0.3091-0.1624z',
+    },
+    // 正方形
+    {
+        strokeScale: 0.9,
+        scale: 2,
+        d: 'M0 0L0 1L1 1L1 0z',
+    },
+];
+const style = createCSSSheet(css `
+  :host {
+    display: block;
+    border-radius: ${theme.normalRound};
+    background-color: ${theme.lightBackgroundColor};
+    aspect-ratio: 2 / 1;
+  }
+  svg {
+    overflow: visible;
+  }
+  .area {
+    stroke: ${theme.backgroundColor};
+    transition: opacity 0.3s ${theme.timingFunction};
+  }
+  .area.current:not(.disabled):hover {
+    opacity: 0.8;
+  }
+  .name {
+    fill: ${theme.textColor};
+    stroke: ${theme.backgroundColor};
+    paint-order: stroke;
+    pointer-events: none;
+    text-anchor: middle;
+  }
+  .node {
+    paint-order: stroke;
+    transform-origin: center;
+    transform-box: fill-box;
+    stroke-opacity: 0.4;
+    --translate: calc(-50% + var(--x)), calc(-50% + var(--y));
+    transform: translate(var(--translate)) scale(var(--scale));
+    /* await chrome implement */
+    transition: scale 0.3s ${theme.timingFunction};
+  }
+  .node.current:hover {
+    transform: translate(var(--translate)) scale(calc(var(--scale) * 1.5));
+  }
+`);
+/**
+ * @customElement dy-map
+ * @fire hover-node
+ * @fire leave-node
+ * @fire click-node
+ * @fire hover-area
+ * @fire leave-area
+ * @fire click-area
+ */
+let DuoyunMapElement = class DuoyunMapElement extends DuoyunLoadableBaseElement {
+    constructor() {
+        super();
+        this.scale = 1;
+        this.translate2D = [0, 0];
+        this.state = {};
+        _DuoyunMapElement_projection.set(this, void 0);
+        _DuoyunMapElement_areas.set(this, void 0);
+        _DuoyunMapElement_onPan.set(this, ({ detail }) => {
+            this.grabbing = true;
+            this.pan(detail);
+        });
+        _DuoyunMapElement_onEnd.set(this, () => {
+            this.grabbing = false;
+        });
+        _DuoyunMapElement_onLeaveArea.set(this, (detail) => {
+            this.leaveArea(detail);
+            this.setState({ currentArea: undefined });
+        });
+        _DuoyunMapElement_onLeaveNode.set(this, (detail) => {
+            this.leaveNode(detail);
+            this.setState({ currentNode: undefined });
+        });
+        this.willMount = () => {
+            this.memo(() => {
+                var _a, _b;
+                __classPrivateFieldSet(this, _DuoyunMapElement_projection, ((_a = this.getProjection) === null || _a === void 0 ? void 0 : _a.call(this, geoCommonProjection)) || geoCommonProjection(), "f");
+                const pathFn = geoPath().projection(__classPrivateFieldGet(this, _DuoyunMapElement_projection, "f"));
+                __classPrivateFieldSet(this, _DuoyunMapElement_areas, (_b = this.geo) === null || _b === void 0 ? void 0 : _b.features.map(({ geometry, properties }) => {
+                    return {
+                        path: pathFn(geometry),
+                        center: pathFn.centroid(geometry),
+                        name: (properties && (properties.name || properties.NAME)) || '',
+                    };
+                }), "f");
+            }, () => [this.geo, this.getProjection]);
+        };
+        _DuoyunMapElement_renderArea.set(this, (area, isCurrent) => {
+            var _a;
+            const { name, path } = area;
+            const color = (_a = this.getAreaColor) === null || _a === void 0 ? void 0 : _a.call(this, name, isCurrent);
+            const onMouseover = (originEvent) => {
+                if (isCurrent) {
+                    this.hoverArea({ name, originEvent });
+                }
+                else {
+                    this.setState({ currentArea: area });
+                }
+            };
+            return svg `
+      <path
+        class=${classMap({ area: true, disabled: !color, current: isCurrent })}
+        d=${path}
+        stroke-width=${0.1 / this.scale}
+        fill=${color || theme.disabledColor}
+        @click=${(originEvent) => this.clickArea({ name, originEvent })}
+        @mouseover=${onMouseover}
+        @mouseout=${(originEvent) => isCurrent && __classPrivateFieldGet(this, _DuoyunMapElement_onLeaveArea, "f").call(this, { name, originEvent })}
+      ></path>
+    `;
+        });
+        _DuoyunMapElement_renderName.set(this, ({ name, center: [x, y] }, isCurrent) => {
+            var _a;
+            return svg `
+      <text
+        class=${classMap({ name: true, current: isCurrent })}
+        x=${x}
+        y=${y}
+        font-size=${2.5 / this.scale}
+        stroke-width=${0.5 / this.scale}>
+        ${(_a = this.getAreaName) === null || _a === void 0 ? void 0 : _a.call(this, name, isCurrent)}
+      </text>
+    `;
+        });
+        _DuoyunMapElement_renderNode.set(this, (node, isCurrent) => {
+            var _a;
+            const { id, type = '0', position: pos } = node;
+            const position = __classPrivateFieldGet(this, _DuoyunMapElement_projection, "f").call(this, pos) || [0, 0];
+            const color = ((_a = this.getNodeColor) === null || _a === void 0 ? void 0 : _a.call(this, id, isCurrent)) || theme.textColor;
+            const shape = shapes[type];
+            const scale = shape.scale / this.scale;
+            const onMouseover = (originEvent) => {
+                if (isCurrent) {
+                    this.hoverNode({ id, originEvent });
+                }
+                else {
+                    this.setState({ currentNode: node });
+                }
+            };
+            return svg `
+      <path
+        class=${classMap({ node: true, current: isCurrent })}
+        style=${`--x: ${position[0]}px; --y: ${position[1]}px; --scale: ${scale}`}
+        d=${shape.d}
+        fill=${color}
+        stroke=${theme.backgroundColor}
+        stroke-width=${(2 / scale) * shape.strokeScale}
+        @click=${(originEvent) => this.clickNode({ id, originEvent })}
+        @mouseover=${onMouseover}
+        @mouseout=${(originEvent) => isCurrent && __classPrivateFieldGet(this, _DuoyunMapElement_onLeaveNode, "f").call(this, { id, originEvent })}
+      ></path>
+    `;
+        });
+        this.render = () => {
+            var _a, _b, _c;
+            const { currentArea, currentNode } = this.state;
+            return html `
+      <gem-gesture @pan=${__classPrivateFieldGet(this, _DuoyunMapElement_onPan, "f")} @end=${__classPrivateFieldGet(this, _DuoyunMapElement_onEnd, "f")}>
+        ${svg `
+          <svg
+            part="svg"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="-180 -90 360 180"
+            aria-hidden="true"
+            style=${styleMap({
+                transform: `scale(${this.scale}) translate(${this.translate2D[0]}px, ${this.translate2D[1]}px)`,
+            })}>
+            ${(_a = __classPrivateFieldGet(this, _DuoyunMapElement_areas, "f")) === null || _a === void 0 ? void 0 : _a.map((area) => (area === currentArea ? '' : __classPrivateFieldGet(this, _DuoyunMapElement_renderArea, "f").call(this, area, false)))}
+            ${currentArea ? __classPrivateFieldGet(this, _DuoyunMapElement_renderArea, "f").call(this, currentArea, true) : ''}
+            ${(_b = __classPrivateFieldGet(this, _DuoyunMapElement_areas, "f")) === null || _b === void 0 ? void 0 : _b.map((area) => __classPrivateFieldGet(this, _DuoyunMapElement_renderName, "f").call(this, area, false))}
+            ${currentArea ? __classPrivateFieldGet(this, _DuoyunMapElement_renderName, "f").call(this, currentArea, true) : ''}
+            ${__classPrivateFieldGet(this, _DuoyunMapElement_areas, "f") && ((_c = this.nodes) === null || _c === void 0 ? void 0 : _c.map((node) => (node === currentNode ? '' : __classPrivateFieldGet(this, _DuoyunMapElement_renderNode, "f").call(this, node, false))))}
+            ${currentNode ? __classPrivateFieldGet(this, _DuoyunMapElement_renderNode, "f").call(this, currentNode, true) : ''}
+          </svg>
+        `}
+      </gem-gesture>
+    `;
+        };
+        this.internals.role = 'img';
+    }
+};
+_DuoyunMapElement_projection = new WeakMap(), _DuoyunMapElement_areas = new WeakMap(), _DuoyunMapElement_onPan = new WeakMap(), _DuoyunMapElement_onEnd = new WeakMap(), _DuoyunMapElement_onLeaveArea = new WeakMap(), _DuoyunMapElement_onLeaveNode = new WeakMap(), _DuoyunMapElement_renderArea = new WeakMap(), _DuoyunMapElement_renderName = new WeakMap(), _DuoyunMapElement_renderNode = new WeakMap();
+__decorate([
+    property
+], DuoyunMapElement.prototype, "getProjection", void 0);
+__decorate([
+    property
+], DuoyunMapElement.prototype, "geo", void 0);
+__decorate([
+    property
+], DuoyunMapElement.prototype, "getAreaColor", void 0);
+__decorate([
+    property
+], DuoyunMapElement.prototype, "getAreaName", void 0);
+__decorate([
+    property
+], DuoyunMapElement.prototype, "nodes", void 0);
+__decorate([
+    property
+], DuoyunMapElement.prototype, "getNodeColor", void 0);
+__decorate([
+    property
+], DuoyunMapElement.prototype, "scale", void 0);
+__decorate([
+    property
+], DuoyunMapElement.prototype, "translate2D", void 0);
+__decorate([
+    state
+], DuoyunMapElement.prototype, "grabbing", void 0);
+__decorate([
+    emitter
+], DuoyunMapElement.prototype, "pan", void 0);
+__decorate([
+    emitter
+], DuoyunMapElement.prototype, "hoverNode", void 0);
+__decorate([
+    emitter
+], DuoyunMapElement.prototype, "leaveNode", void 0);
+__decorate([
+    emitter
+], DuoyunMapElement.prototype, "clickNode", void 0);
+__decorate([
+    emitter
+], DuoyunMapElement.prototype, "hoverArea", void 0);
+__decorate([
+    emitter
+], DuoyunMapElement.prototype, "clickArea", void 0);
+__decorate([
+    emitter
+], DuoyunMapElement.prototype, "leaveArea", void 0);
+DuoyunMapElement = __decorate([
+    customElement('dy-map'),
+    adoptedStyle(style)
+], DuoyunMapElement);
+export { DuoyunMapElement };
+//# sourceMappingURL=map.js.map

package/elements/map.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"map.js","sourceRoot":"","sources":["../src/elements/map.ts"],"names":[],"mappings":"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"}

package/elements/menu.d.ts

@@ -0,0 +1,58 @@
+import { GemElement, TemplateResult } from '@mantou/gem';
+import './compartment';
+import './button';
+import './options';
+export declare type Menu = MenuItem[] | TemplateResult;
+export interface MenuItem {
+    /**`---` is separator */
+    text: string | TemplateResult;
+    description?: string | TemplateResult;
+    tag?: string | TemplateResult;
+    disabled?: boolean;
+    danger?: boolean;
+    selected?: boolean;
+    handle?: () => void | Promise<void>;
+    menu?: Menu;
+}
+declare type MenuStore = {
+    width?: string;
+    maxHeight?: string;
+    activeElement: HTMLElement | null;
+    menuStack: {
+        searchable?: boolean;
+        menu: Menu;
+        x: number;
+        y: number;
+    }[];
+};
+declare type OpenMenuOptions = {
+    /**auto calc `x`/`y` via `activeElement` */
+    activeElement?: HTMLElement | null;
+    x?: number;
+    y?: number;
+    width?: string;
+    /**only support first menu */
+    maxHeight?: string;
+    /**only support first menu */
+    searchable?: boolean;
+};
+export declare const menuStore: import("@mantou/gem").Store<MenuStore>;
+/**
+ * @customElement dy-menu
+ */
+export declare class DuoyunMenuElement extends GemElement {
+    #private;
+    static instance?: DuoyunMenuElement;
+    static open(menu: Menu, options?: OpenMenuOptions): Promise<void>;
+    static confirm(text: string | TemplateResult, options: OpenMenuOptions & {
+        danger?: boolean;
+        okText?: string | TemplateResult;
+    }): Promise<unknown>;
+    static close(): void;
+    constructor();
+    mounted: () => () => void;
+    render: () => TemplateResult;
+}
+export declare const ContextMenu: typeof DuoyunMenuElement;
+export {};
+//# sourceMappingURL=menu.d.ts.map

package/elements/menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../src/elements/menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,UAAU,EASV,cAAc,EACf,MAAM,aAAa,CAAC;AAOrB,OAAO,eAAe,CAAC;AACvB,OAAO,UAAU,CAAC;AAClB,OAAO,WAAW,CAAC;AAEnB,oBAAY,IAAI,GAAG,QAAQ,EAAE,GAAG,cAAc,CAAC;AAC/C,MAAM,WAAW,QAAQ;IACvB,wBAAwB;IACxB,IAAI,EAAE,MAAM,GAAG,cAAc,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC;IACtC,GAAG,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACpC,IAAI,CAAC,EAAE,IAAI,CAAC;CACb;AAED,aAAK,SAAS,GAAG;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,SAAS,EAAE;QACT,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,IAAI,EAAE,IAAI,CAAC;QACX,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;KACX,EAAE,CAAC;CACL,CAAC;AAEF,aAAK,eAAe,GAAG;IACrB,2CAA2C;IAC3C,aAAa,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACnC,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6BAA6B;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,SAAS,wCAGpB,CAAC;AAuCH;;GAEG;AACH,qBAGa,iBAAkB,SAAQ,UAAU;;IAC/C,MAAM,CAAC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;WAEvB,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,GAAE,eAAoB;WAoB9C,OAAO,CAClB,IAAI,EAAE,MAAM,GAAG,cAAc,EAC7B,OAAO,EAAE,eAAe,GAAG;QAAE,MAAM,CAAC,EAAE,OAAO,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,GAAG,cAAc,CAAA;KAAE;IA2BnF,MAAM,CAAC,KAAK;;IAyFZ,OAAO,mBASL;IAEF,MAAM,uBAiDJ;CACH;AAED,eAAO,MAAM,WAAW,0BAAoB,CAAC"}

package/elements/menu.js

@@ -0,0 +1,256 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _DuoyunMenuElement_instances, _DuoyunMenuElement_width_get, _DuoyunMenuElement_menuEles_get, _DuoyunMenuElement_offset, _DuoyunMenuElement_onEnterMenu, _DuoyunMenuElement_execHandle, _DuoyunMenuElement_onKeydown, _DuoyunMenuElement_initPosition;
+import { html, GemElement, customElement, connectStore, createStore, updateStore, styleMap, createCSSSheet, css, adoptedStyle, } from '@mantou/gem';
+import { icons } from '../lib/icons';
+import { locale } from '../lib/locale';
+import { setBodyInert } from '../lib/utils';
+import { hotkeys } from '../lib/hotkeys';
+import './compartment';
+import './button';
+import './options';
+export const menuStore = createStore({
+    activeElement: null,
+    menuStack: [],
+});
+function toggleActiveState(ele, active) {
+    var _a;
+    if (!ele)
+        return;
+    if (ele instanceof GemElement) {
+        if ((_a = ele.constructor.defineCSSStates) === null || _a === void 0 ? void 0 : _a.includes('active')) {
+            ele.active = active;
+        }
+        // button/combobox
+        ele.internals.ariaExpanded = String(active);
+    }
+}
+let closeResolve;
+const style = createCSSSheet(css `
+  :host {
+    display: block;
+    position: fixed;
+    z-index: 99999999;
+    inset: 0;
+    font-size: 0.875em;
+    cursor: default;
+    user-select: none;
+  }
+  .mask {
+    position: absolute;
+    inset: 0;
+  }
+  .menu-custom-container {
+    padding: 0.4em 1em;
+  }
+  .menu {
+    outline: none;
+    position: absolute;
+    font-size: 1em;
+  }
+`);
+/**
+ * @customElement dy-menu
+ */
+let DuoyunMenuElement = class DuoyunMenuElement extends GemElement {
+    constructor() {
+        super();
+        _DuoyunMenuElement_instances.add(this);
+        _DuoyunMenuElement_offset.set(this, 4);
+        _DuoyunMenuElement_onEnterMenu.set(this, (evt, menuStackIndex, subMenu) => {
+            if (subMenu) {
+                const { left, top, width } = evt.target.getBoundingClientRect();
+                const em = parseFloat(getComputedStyle(this).fontSize);
+                const x = left + 2 * width < innerWidth ? left + width - 0.75 * em : left - width + 0.75 * em;
+                const y = top - 0.4 * em;
+                updateStore(menuStore, {
+                    menuStack: [...menuStore.menuStack.slice(0, menuStackIndex + 1), { x, y, menu: subMenu }],
+                });
+            }
+            else {
+                updateStore(menuStore, {
+                    menuStack: menuStore.menuStack.slice(0, menuStackIndex + 1),
+                });
+            }
+        });
+        _DuoyunMenuElement_execHandle.set(this, (handle) => {
+            if (handle) {
+                ContextMenu.close();
+                handle();
+            }
+        });
+        _DuoyunMenuElement_onKeydown.set(this, (evt, menuStackIndex) => {
+            const focusPrevMenu = () => {
+                var _a;
+                updateStore(menuStore, {
+                    menuStack: menuStore.menuStack.slice(0, menuStackIndex),
+                });
+                (_a = __classPrivateFieldGet(this, _DuoyunMenuElement_instances, "a", _DuoyunMenuElement_menuEles_get)[menuStackIndex - 1]) === null || _a === void 0 ? void 0 : _a.focus();
+            };
+            hotkeys({
+                esc: menuStackIndex === 0 ? ContextMenu.close : focusPrevMenu,
+                left: focusPrevMenu,
+                right: () => { var _a; return (_a = __classPrivateFieldGet(this, _DuoyunMenuElement_instances, "a", _DuoyunMenuElement_menuEles_get)[menuStackIndex + 1]) === null || _a === void 0 ? void 0 : _a.focus(); },
+            })(evt);
+        });
+        _DuoyunMenuElement_initPosition.set(this, () => {
+            const element = __classPrivateFieldGet(this, _DuoyunMenuElement_instances, "a", _DuoyunMenuElement_menuEles_get).shift();
+            const { activeElement, menuStack, maxHeight } = menuStore;
+            const { scrollHeight, clientHeight, clientWidth } = element;
+            const menu = menuStack[0];
+            const height = scrollHeight + 2;
+            const width = clientWidth + 2;
+            if (activeElement) {
+                const { left, right, top, bottom } = activeElement.getBoundingClientRect();
+                const isXOverflow = innerWidth - left < width + __classPrivateFieldGet(this, _DuoyunMenuElement_offset, "f");
+                const isYOverflow = innerHeight - bottom < height + 2 * __classPrivateFieldGet(this, _DuoyunMenuElement_offset, "f") && top > height + 2 * __classPrivateFieldGet(this, _DuoyunMenuElement_offset, "f");
+                updateStore(menuStore, {
+                    maxHeight: maxHeight || `${isYOverflow ? top - 2 * __classPrivateFieldGet(this, _DuoyunMenuElement_offset, "f") : innerHeight - bottom - 2 * __classPrivateFieldGet(this, _DuoyunMenuElement_offset, "f")}px`,
+                    menuStack: [
+                        {
+                            ...menu,
+                            x: isXOverflow ? right - width : left,
+                            y: isYOverflow ? top - height - 2 * __classPrivateFieldGet(this, _DuoyunMenuElement_offset, "f") : bottom,
+                        },
+                    ],
+                });
+            }
+            else {
+                const y = innerHeight - menu.y > width ? menu.y : Math.max(0, menu.y - (scrollHeight - clientHeight));
+                updateStore(menuStore, { menuStack: [{ ...menu, y }] });
+            }
+        });
+        this.mounted = () => {
+            var _a;
+            __classPrivateFieldGet(this, _DuoyunMenuElement_initPosition, "f").call(this);
+            (_a = __classPrivateFieldGet(this, _DuoyunMenuElement_instances, "a", _DuoyunMenuElement_menuEles_get).shift()) === null || _a === void 0 ? void 0 : _a.focus();
+            const restoreInert = setBodyInert(this);
+            ContextMenu.instance = this;
+            return () => {
+                restoreInert();
+                ContextMenu.instance = undefined;
+            };
+        };
+        this.render = () => {
+            const { menuStack, maxHeight } = menuStore;
+            return html `
+      <div class="mask" @click=${ContextMenu.close}></div>
+      ${menuStack.map(({ x, y, menu, searchable }, index, _, calcWidth = __classPrivateFieldGet(this, _DuoyunMenuElement_instances, "a", _DuoyunMenuElement_width_get) === 'auto' ? '0px' : __classPrivateFieldGet(this, _DuoyunMenuElement_instances, "a", _DuoyunMenuElement_width_get)) => html `
+          <dy-options
+            class="menu"
+            style=${styleMap({
+                width: __classPrivateFieldGet(this, _DuoyunMenuElement_instances, "a", _DuoyunMenuElement_width_get),
+                maxHeight: maxHeight && index === 0 ? `${maxHeight}` : `calc(100vh - 0.8em - ${y + 2 * __classPrivateFieldGet(this, _DuoyunMenuElement_offset, "f")}px)`,
+                top: `${y + __classPrivateFieldGet(this, _DuoyunMenuElement_offset, "f")}px`,
+                left: `min(${x}px, calc(100vw - ${calcWidth} - ${2 * __classPrivateFieldGet(this, _DuoyunMenuElement_offset, "f")}px))`,
+            })}
+            @keydown=${(evt) => __classPrivateFieldGet(this, _DuoyunMenuElement_onKeydown, "f").call(this, evt, index)}
+            ?searchable=${searchable}
+            .options=${Array.isArray(menu)
+                ? menu.map(({ text, description, tag, handle, disabled, selected, danger, menu: subMenu }, _index, __arr, onPointerEnter = (evt) => __classPrivateFieldGet(this, _DuoyunMenuElement_onEnterMenu, "f").call(this, evt, index, subMenu), onClick = !disabled ? () => __classPrivateFieldGet(this, _DuoyunMenuElement_execHandle, "f").call(this, handle) : undefined) => {
+                    var _a;
+                    return ({
+                        label: text,
+                        description,
+                        tag,
+                        disabled,
+                        danger,
+                        highlight: !!(subMenu && subMenu === ((_a = menuStack[index + 1]) === null || _a === void 0 ? void 0 : _a.menu)),
+                        icon: subMenu ? icons.right : selected ? icons.check : undefined,
+                        onClick: subMenu ? onPointerEnter : onClick,
+                        onPointerEnter,
+                    });
+                })
+                : undefined}
+          >
+            ${Array.isArray(menu)
+                ? ''
+                : html `
+                  <div class="menu-custom-container">
+                    <dy-compartment .content=${menu}></dy-compartment>
+                  </div>
+                `}
+          </dy-options>
+        `)}
+    `;
+        };
+        document.body.append(this);
+    }
+    static async open(menu, options = {}) {
+        var _a;
+        const { activeElement = null, x = 0, y = 0, width, maxHeight, searchable } = options;
+        if (Array.isArray(menu) && menu.length === 0)
+            throw new Error('menu length is 0');
+        toggleActiveState(activeElement, true);
+        updateStore(menuStore, {
+            width,
+            maxHeight,
+            activeElement,
+            menuStack: [{ x, y, menu, searchable }],
+        });
+        if (ContextMenu.instance) {
+            // await `ContextMenu` content update
+            await Promise.resolve();
+            __classPrivateFieldGet((_a = ContextMenu.instance), _DuoyunMenuElement_initPosition, "f").call(_a);
+        }
+        else {
+            new ContextMenu();
+        }
+        await new Promise((res) => (closeResolve = res));
+    }
+    static async confirm(text, options) {
+        return new Promise((res, rej) => {
+            const onClick = () => {
+                ContextMenu.close();
+                res(null);
+            };
+            ContextMenu.open(html `
+          <style>
+            .confirm-button {
+              text-align: right;
+              margin-top: 2em;
+            }
+          </style>
+          <div class="confirm-text">${text}</div>
+          <div class="confirm-button">
+            <dy-button @click=${onClick} .color=${options.danger ? 'danger' : 'normal'}>
+              ${options.okText || locale.ok}
+            </dy-button>
+          </div>
+        `, options).then(rej);
+        });
+    }
+    static close() {
+        var _a, _b;
+        if (!ContextMenu.instance)
+            return;
+        toggleActiveState(menuStore.activeElement, false);
+        closeResolve();
+        ContextMenu.instance.remove();
+        // specify keyboard navigation location
+        (_a = menuStore.activeElement) === null || _a === void 0 ? void 0 : _a.focus();
+        (_b = menuStore.activeElement) === null || _b === void 0 ? void 0 : _b.blur();
+    }
+};
+_DuoyunMenuElement_offset = new WeakMap(), _DuoyunMenuElement_onEnterMenu = new WeakMap(), _DuoyunMenuElement_execHandle = new WeakMap(), _DuoyunMenuElement_onKeydown = new WeakMap(), _DuoyunMenuElement_initPosition = new WeakMap(), _DuoyunMenuElement_instances = new WeakSet(), _DuoyunMenuElement_width_get = function _DuoyunMenuElement_width_get() {
+    return menuStore.width || '15em';
+}, _DuoyunMenuElement_menuEles_get = function _DuoyunMenuElement_menuEles_get() {
+    return [...this.shadowRoot.querySelectorAll('.menu')];
+};
+DuoyunMenuElement = __decorate([
+    customElement('dy-menu'),
+    connectStore(menuStore),
+    adoptedStyle(style)
+], DuoyunMenuElement);
+export { DuoyunMenuElement };
+export const ContextMenu = DuoyunMenuElement;
+//# sourceMappingURL=menu.js.map