duoyun-ui/elements/side-navigation.js

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 _DuoyunSideNavigationElement_onClickChildren, _DuoyunSideNavigationElement_checkGroupStatus, _DuoyunSideNavigationElement_renderItem;
import { connectStore, adoptedStyle, customElement, property } from '@mantou/gem/lib/decorators';
import { html } from '@mantou/gem/lib/element';
import { history } from '@mantou/gem/lib/history';
import { createCSSSheet, css } from '@mantou/gem/lib/utils';
import { theme } from '../lib/theme';
import { commonHandle } from '../lib/hotkeys';
import { focusStyle } from '../lib/styles';
import { createPath, matchPath } from './route';
import { DuoyunScrollBaseElement } from './base/scroll';
import './link';
const style = createCSSSheet(css `
  :host(:where(:not([hidden]))) {
    user-select: none;
    display: flex;
  }
  :host,
  .group-body,
  .children {
    flex-direction: column;
    gap: 3px;
  }
  .group-body,
  .children {
    display: flex;
  }
  .item {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: 0.5em 0.75em;
    font-size: 0.875em;
    border-radius: ${theme.normalRound};
    color: unset;
    text-decoration: none;
    line-height: 1.2;
  }
  .children .item {
    padding-inline-start: calc(0.75em + 1em);
  }
  .item:where(:hover, [data-active], :state(active)) {
    background-color: ${theme.hoverBackgroundColor};
  }
  .group {
    margin-block: 1.2em;
  }
  .group + .group {
    margin-top: 0;
  }
  .group-title {
    cursor: default;
    padding: 0.945em;
    text-transform: uppercase;
    font-size: 0.7em;
    color: ${theme.describeColor};
  }
`);
/**
 * @customElement dy-side-navigation
 */
let DuoyunSideNavigationElement = class DuoyunSideNavigationElement extends DuoyunScrollBaseElement {
    constructor() {
        super({ delegatesFocus: true });
        this.items = [];
        // children open state
        this.state = {};
        _DuoyunSideNavigationElement_onClickChildren.set(this, (title) => {
            this.setState({ [title]: !this.state[title] });
        });
        _DuoyunSideNavigationElement_checkGroupStatus.set(this, () => {
            var _a;
            const { path } = history.getParams();
            const matchChildren = (e) => {
                var _a;
                if ('group' in e) {
                    e.group.forEach(matchChildren);
                    return;
                }
                const has = (_a = e.children) === null || _a === void 0 ? void 0 : _a.some((e) => e.pattern ? matchPath(e.pattern, path) : e.children ? e.children.some(matchChildren) : false);
                if (has && e.title) {
                    this.setState({ [e.title]: true });
                    return true;
                }
            };
            (_a = this.items) === null || _a === void 0 ? void 0 : _a.forEach(matchChildren);
        });
        _DuoyunSideNavigationElement_renderItem.set(this, ({ pattern, title = '<No Title>', slot, params, query, hash, children }) => {
            return html `
      <dy-active-link
        class="item"
        tabindex="0"
        @keydown=${commonHandle}
        @click=${children && (() => __classPrivateFieldGet(this, _DuoyunSideNavigationElement_onClickChildren, "f").call(this, title))}
        doc-title=${title}
        path=${pattern ? createPath({ pattern }, { params }) : ''}
        query=${query ? query.toString() : ''}
        hash=${hash || ''}
        pattern=${!pattern ? '' : pattern.endsWith('*') ? pattern : `${pattern}/*`}
      >
        <span>${title}</span>${slot}
      </dy-active-link>
      ${children && this.state[title] ? html `<div class="children">${children.map(__classPrivateFieldGet(this, _DuoyunSideNavigationElement_renderItem, "f"))}</div>` : ''}
    `;
        });
        this.willMount = () => {
            this.memo(() => __classPrivateFieldGet(this, _DuoyunSideNavigationElement_checkGroupStatus, "f").call(this), () => [history.getParams().path]);
        };
        this.render = () => {
            var _a;
            if (!((_a = this.items) === null || _a === void 0 ? void 0 : _a.length))
                return html ``;
            return html `${this.items.map((item) => 'group' in item
                ? html `
            <div class="group" role="group">
              <div class="group-title">${item.title}${item.slot}</div>
              <div class="group-body">${item.group.map((e) => __classPrivateFieldGet(this, _DuoyunSideNavigationElement_renderItem, "f").call(this, e))}</div>
            </div>
          `
                : __classPrivateFieldGet(this, _DuoyunSideNavigationElement_renderItem, "f").call(this, item))}`;
        };
        this.internals.role = 'navigation';
        this.internals.ariaLabel = 'Side Navigation';
    }
};
_DuoyunSideNavigationElement_onClickChildren = new WeakMap(), _DuoyunSideNavigationElement_checkGroupStatus = new WeakMap(), _DuoyunSideNavigationElement_renderItem = new WeakMap();
__decorate([
    property
], DuoyunSideNavigationElement.prototype, "items", void 0);
DuoyunSideNavigationElement = __decorate([
    customElement('dy-side-navigation'),
    adoptedStyle(style),
    adoptedStyle(focusStyle),
    connectStore(history.store)
], DuoyunSideNavigationElement);
export { DuoyunSideNavigationElement };
//# sourceMappingURL=side-navigation.js.map