@operato/menu 10.6.0 → 10.8.0

package/dist/src/ox-menu-portrait.d.ts

@@ -1,13 +1,168 @@
 import '@material/web/icon/icon.js';
 import { LitElement, nothing, TemplateResult } from 'lit';
 import { Menu } from './types.js';
-export declare class OxMenuPortrait extends LitElement {
+declare const OxMenuPortrait_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+export declare class OxMenuPortrait extends OxMenuPortrait_base {
     static styles: import("lit").CSSResult[];
     menus?: Menu[];
     activeTopLevel?: Menu;
     activeMenu?: Menu;
     path: string;
-    renderMenus(menus: Menu[], activeTopLevel?: Menu, activeMenu?: Menu): TemplateResult | typeof nothing;
-    render(): TemplateResult | typeof nothing;
+    /**
+     * 레일 모드 — 접을 수 있고, 접히면 하위가 팝업으로 뜬다.
+     *
+     * **옵트인이다.** 켜지 않은 앱은 지금과 한 글자도 다르지 않다. 모양이 함께 바뀌는 것은 취향이
+     * 아니라 요건이다 — 기존 모양은 줄마다 폭 전체를 쓰는 밑줄이 있고 왼쪽 여백이 16px 이라 56px
+     * 에서 무너진다(§`menu-rail-styles.ts`).
+     */
+    rail: boolean;
+    /**
+     * 접힘 — 아이콘만.
+     *
+     * **주인은 이 컴포넌트가 아니다.** 폭을 정하는 요소는 `ox-menu-part` 이고(그쪽에 `min-width`
+     * 가 있다), 셸의 리사이즈 손잡이도 그 요소에 인라인 폭을 쓴다. 그래서 상태와 저장은 그쪽이
+     * 갖고 여기는 받아서 그린다.
+     */
+    collapsed: boolean;
+    /**
+     * 서랍인가 — 화면 위에 겹쳐 떴다가 닫히는 메뉴.
+     *
+     * 그때 최상위는 **펼치기만** 한다. 누르는 순간 서랍이 닫히면 그 묶음의 나머지 하위를 볼
+     * 기회가 없다(§`ox-menu-part` 의 `drawer`).
+     */
+    drawer: boolean;
+    /**
+     * 지금 어떤 모양으로 서 있나 — 세 플래그에서 하나로 모은다.
+     *
+     * 이 값과 그에 딸린 두 답(`하위를 어디에` · `최상위가 이동하나`)은 `menu-mode.ts` 에 있고
+     * 시험으로 못박혀 있다. 여기서 그때그때 판단하지 않는다 — 그렇게 하다가 네 번 깨졌다.
+     */
+    private get mode();
+    /** 접힌 상태에서 팝업으로 열린 최상위 메뉴. 시스템 팝업이면 SYSTEM 이다. */
+    private popped?;
+    /**
+     * 시스템 항목 — 프로필 · 로그아웃 · 설정처럼 **앱이 아니라 프레임워크가 붙이는 것**들.
+     *
+     * 하드코딩하지 않는다. 각 패키지가 부팅할 때 `ADD_MORENDA` 로 등록하고(권한이 없으면 등록
+     * 자체를 안 한다), 우리는 그 목록을 그대로 그린다. 그래서 목록이 비면 이 자리도 없다.
+     */
+    morendas: any[];
+    private _unsubscribeStore?;
+    /** 팝업 자리 — 누른 항목의 오른쪽. 세로는 그린 뒤 재서 맞춘다(§`fitPopup`). */
+    private _popLeft;
+    private _popTop;
+    /** 누른 항목의 윗선. 화면에 들어가면 이 자리를 쓴다. */
+    private _popPrefer;
+    /** 팝업이 화면 안에 들어가게 세로 자리를 맞춘다. 팝업 밖 여백. */
+    private static readonly POP_MARGIN;
+    /**
+     * 팝업 밖을 누르면 닫는다.
+     *
+     * ── 팝업 안의 클릭을 막지 않는다 ────────────────────────────────────────
+     * 한때 팝업 컨테이너에 stopPropagation 을 걸어 두었다. 팝업 안을 눌러도 이 처리기가 받아
+     * 곧바로 닫히던 것을 막으려던 것인데, 그것이 **셸의 라우터까지 막았다.**
+     *
+     * 라우터는 document.body 에서 클릭을 받아 composedPath 로 A 를 찾고 preventDefault 한 뒤
+     * 화면만 바꾼다(@operato/shell 의 installRouter). 클릭이 거기까지 못 가면 브라우저의 기본
+     * 이동이 그대로 일어나 **페이지 전체가 다시 읽혔다.**
+     *
+     * 그래서 막지 않고, 여기서 「팝업 안이면 닫지 않는다」로 가른다. 줄을 누를 때 닫는 일은 그
+     * 줄의 처리기가 한다.
+     */
+    private _onDocClick;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * 마우스를 올렸을 때 뜨는 글.
+     *
+     * ── 접혔을 때는 이름이 먼저다 ───────────────────────────────────────────
+     * 접히면 아이콘만 남으므로 **이름을 모른다.** 그때는 이름을 윗줄에 얹고 설명을 아랫줄에 둔다.
+     * 펼쳐져 있으면 이름은 이미 옆에 있으니 설명만 낸다.
+     *
+     * 줄바꿈으로 잇는다 — 대시로 이으면 설명 안의 대시와 겹쳐 「A — B — C」가 된다.
+     *
+     * 설명도 없고 이름도 안 보이는 경우가 아니면 아무것도 내지 않는다. 이름을 그대로 되풀이하는
+     * 툴팁은 소음이다.
+     */
+    private hoverText;
+    /**
+     * @param depth 0 이면 최상위다. **하위도 `active` 를 달기 때문에** 깊이를 값으로 넘긴다 —
+     *   CSS 로 「최상위인 li」를 가리려면 `:not(li li)` 같은 것이 필요하고, 그건 읽는 사람이
+     *   한 번 더 생각해야 하는 선택자다.
+     */
+    renderMenus(menus: Menu[], activeTopLevel?: Menu, activeMenu?: Menu, depth?: number): TemplateResult | typeof nothing;
+    render(): TemplateResult<1>;
+    /**
+     * 시스템 항목 — **바닥에 붙는다.**
+     *
+     * 프로필 · 로그아웃 · 설정은 하루에 한 번 여는 것이고, 일하는 화면들과 같은 깊이에 있으면
+     * 자주 여는 것을 밀어낸다. 그래서 메뉴 끝에 두고 사이를 빈 자리로 벌린다.
+     *
+     * 목록이 비면 이 자리도 없다 — 각 패키지가 권한이 없으면 등록 자체를 안 하므로, 비어 있는
+     * 것은 「볼 것이 없다」는 뜻이다. 빈 묶음 이름만 남겨 두면 눌러도 아무 일이 없다.
+     *
+     * 펼친 상태에서도 팝업으로 연다. 이 항목들은 **주소가 아니라 함수**라, 그 자리에서 펼치면
+     * 옆의 하위 메뉴들과 같은 모양이 되어 「눌러도 화면이 안 바뀌는 메뉴」로 읽힌다.
+     */
+    private renderSystem;
+    /** 시스템 항목은 주소가 아니라 함수다. 이동을 막고 부른다. */
+    private runMorenda;
+    /**
+     * 시스템 줄을 누른다 — **다른 최상위와 똑같은 두 갈래다.**
+     *
+     * 한때 시스템만 자기 상태(`popped`)를 따로 썼다. 다른 최상위는 `activeTopLevel` 하나를 나눠
+     * 쓰는데 시스템만 그 밖에 있었으니, **다른 묶음이 열려 있어도 시스템이 함께 열렸다.** 한 번에
+     * 하나만 열리는 규칙에서 이 줄만 빠져 있었다.
+     *
+     * 이제 같은 상태를 쓴다. 접힌 레일에서만 팝업이고, 그때는 다른 최상위도 팝업이다.
+     */
+    private openSystem;
+    /**
+     * 접힌 상태에서 하위 메뉴를 팝업으로 낸다.
+     *
+     * 그 자리에서 열지 않는 이유는 56px 안에 들여쓴 목록이 들어가지 않기 때문이다. 접힌 레일에서
+     * 하위를 열 길이 없으면 **접는 순간 화면의 절반에 갈 수 없게 된다** — 접기가 기능이 아니라
+     * 함정이 된다.
+     */
+    private renderPopped;
+    /**
+     * 시스템 항목 줄들 — **이것만 따로 그린다.**
+     *
+     * morenda 는 주소가 아니라 함수를 갖는다(`action`). 아이콘과 이름도 Lit 템플릿이라 `Menu` 모양이
+     * 아니다. 억지로 `Menu` 로 바꿔 넘기면 그 변환이 또 옮겨 적는 자리가 된다.
+     */
+    private renderSystemRows;
+    /**
+     * 팝업이 화면 안에 들어가게 세로 자리를 맞춘다.
+     *
+     * ── 왜 그린 뒤에 하나 ───────────────────────────────────────────────────
+     * 높이를 알아야 맞출 수 있고, 높이는 그려 봐야 안다. 항목마다 하위 수가 다르다 — 「기준정보」는
+     * 열여섯 줄이고 「배우기」는 한 줄이다.
+     *
+     * ── 규칙 ────────────────────────────────────────────────────────────────
+     * 누른 항목의 윗선에서 시작하는 것이 바람이다. 그대로 두면 아래쪽 항목에서 팝업이 화면 밖으로
+     * 나간다. 그래서 **아래로 넘치는 만큼 위로 올린다.** 그래도 안 들어가면 위 여백에 붙이고
+     * 그때만 스크롤한다.
+     *
+     * 자리를 반응 상태로 두지 않고 style 에 바로 쓴다 — 값이 바뀔 때마다 다시 그리면 그 렌더에서
+     * 또 재게 되고, 재는 값이 그리기에 달려 있으므로 서로 물린다.
+     */
+    private fitPopup;
+    /**
+     * 노브를 그 항목의 가운데 높이에 둔다.
+     *
+     * ── 범위를 벗어나면 감추지 않고 끝에 붙인다 ──────────────────────────────
+     * 팝업이 위로 밀리는 것은 **아래에 자리가 없어서**이고, 그만큼만 밀린다. 그래서 그 항목은
+     * 거의 항상 팝업의 세로 범위 안으로 들어온다. 벗어나는 것은 라운드 모서리에 걸치는 몇 px
+     * 뿐이다. 그때 감추면 **자리가 좁을 때만 표시가 사라진다** — 가장 필요한 순간이다.
+     *
+     * 그래서 모서리 안쪽으로 붙인다. 정확히 그 줄을 가리키지 못해도 「위쪽」·「아래쪽」은
+     * 가리키고, 어느 항목인지는 그 항목의 popped 표시가 말한다.
+     */
+    private fitKnob;
+    protected updated(): void;
+    /** 접기/펼치기는 `ox-menu-part` 가 한다 — 폭과 저장이 그쪽 것이다. 여기서는 뜻만 올린다. */
+    private toggleCollapsed;
     firstUpdated(): void;
 }
+export {};