duoyun-ui/elements/tree.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 __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 _DuoyunTreeElement_highlights, _DuoyunTreeElement_tagsMap, _DuoyunTreeElement_statusMap, _DuoyunTreeElement_onClick, _DuoyunTreeElement_getItemColor, _DuoyunTreeElement_renderItem;
var DuoyunTreeElement_1;
// https://spectrum.adobe.com/page/tree-view/
import { adoptedStyle, customElement, emitter, property, boolattribute, part, } from '@mantou/gem/lib/decorators';
import { GemElement, html } from '@mantou/gem/lib/element';
import { createCSSSheet, css, styleMap } from '@mantou/gem/lib/utils';
import { icons } from '../lib/icons';
import { commonHandle } from '../lib/hotkeys';
import { theme, getSemanticColor } from '../lib/theme';
import { getCascaderBubbleWeakMap } from '../lib/utils';
import { focusStyle } from '../lib/styles';
import './use';
const statusRank = {
    negative: 3,
    notice: 2,
    positive: 1,
};
const itemStyle = createCSSSheet(css `
  :host(:where(:not([hidden]))) {
    display: flex;
    align-items: center;
    gap: 0.3em;
    cursor: pointer;
    line-height: 2;
    user-select: none;
  }
  :host(:hover) {
    background-color: ${theme.lightBackgroundColor};
  }
  :host([highlight]) {
    background-color: ${theme.hoverBackgroundColor};
  }
  .icon {
    width: 1.3em;
    flex-shrink: 0;
  }
  .expandable {
    margin-inline-start: 0.3em;
  }
  .label {
    flex-grow: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .tags {
    flex-shrink: 1;
    white-space: nowrap;
    margin-inline: 1em;
  }
  .children {
    width: 0.5em;
    aspect-ratio: 1;
    background: currentColor;
    border-radius: 10em;
  }
`);
/**
 * @customElement dy-tree-item
 */
let _DuoyunTreeItemElement = class _DuoyunTreeItemElement extends GemElement {
    constructor() {
        super({ delegatesFocus: true });
        this.render = () => {
            if (!this.item)
                return html ``;
            const { label, children, icon, context, tags } = this.item;
            return html `
      <dy-use
        class="icon expandable"
        .element=${!children ? undefined : this.expanded ? icons.expand : icons.right}
      ></dy-use>
      ${icon ? html `<dy-use class="icon" .element=${icon}></dy-use>` : ''}
      ${context ? html `<div class="context">${context}</div>` : ''}
      <span class="label">${label}</span>
      ${this.hastags ? html `<div class="tags children"></div>` : ''}
      ${tags ? html `<div class="tags">${tags.join(', ')}</div>` : ''}
    `;
        };
        this.internals.role = 'treeitem';
    }
};
__decorate([
    boolattribute
], _DuoyunTreeItemElement.prototype, "expanded", void 0);
__decorate([
    boolattribute
], _DuoyunTreeItemElement.prototype, "highlight", void 0);
__decorate([
    boolattribute
], _DuoyunTreeItemElement.prototype, "hastags", void 0);
__decorate([
    property
], _DuoyunTreeItemElement.prototype, "item", void 0);
_DuoyunTreeItemElement = __decorate([
    customElement('dy-tree-item'),
    adoptedStyle(itemStyle)
], _DuoyunTreeItemElement);
const style = createCSSSheet(css `
  :host(:where(:not([hidden]))) {
    display: block;
    font-size: 0.875em;
  }
`);
/**
 * @customElement dy-tree
 * @fires itemclick
 */
let DuoyunTreeElement = DuoyunTreeElement_1 = class DuoyunTreeElement extends GemElement {
    constructor() {
        super({ delegatesFocus: true });
        this.state = {
            expandItem: new Set(),
        };
        _DuoyunTreeElement_highlights.set(this, void 0);
        // folder
        _DuoyunTreeElement_tagsMap.set(this, void 0);
        _DuoyunTreeElement_statusMap.set(this, void 0);
        _DuoyunTreeElement_onClick.set(this, (item) => {
            var _a;
            const value = (_a = item.value) !== null && _a !== void 0 ? _a : item.label;
            this.itemclick(value);
            if (item.children) {
                const { expandItem } = this.state;
                if (expandItem.has(value)) {
                    expandItem.delete(value);
                }
                else {
                    expandItem.add(value);
                }
                this.setState({});
            }
        });
        _DuoyunTreeElement_getItemColor.set(this, (item) => {
            const status = item.status || __classPrivateFieldGet(this, _DuoyunTreeElement_statusMap, "f").get(item);
            return (status && getSemanticColor(status)) || theme.textColor;
        });
        _DuoyunTreeElement_renderItem.set(this, (item, level) => {
            var _a, _b, _c;
            const value = (_a = item.value) !== null && _a !== void 0 ? _a : item.label;
            const expanded = this.state.expandItem.has((_b = item.value) !== null && _b !== void 0 ? _b : item.label);
            return html `
      <dy-tree-item
        tabindex="0"
        @keydown=${commonHandle}
        @click=${() => __classPrivateFieldGet(this, _DuoyunTreeElement_onClick, "f").call(this, item)}
        part=${DuoyunTreeElement_1.item}
        style=${styleMap({ paddingLeft: `${level}em`, color: __classPrivateFieldGet(this, _DuoyunTreeElement_getItemColor, "f").call(this, item) })}
        .hastags=${__classPrivateFieldGet(this, _DuoyunTreeElement_tagsMap, "f").has(item)}
        .item=${item}
        .expanded=${expanded}
        .highlight=${__classPrivateFieldGet(this, _DuoyunTreeElement_highlights, "f").has(value)}
      ></dy-tree-item>
      ${expanded ? (_c = item.children) === null || _c === void 0 ? void 0 : _c.map((item) => __classPrivateFieldGet(this, _DuoyunTreeElement_renderItem, "f").call(this, item, level + 1)) : ''}
    `;
        });
        this.willMount = () => {
            this.memo(() => {
                __classPrivateFieldSet(this, _DuoyunTreeElement_highlights, new Set(this.highlights), "f");
            }, () => [this.highlights]);
            this.memo(() => {
                __classPrivateFieldSet(this, _DuoyunTreeElement_tagsMap, getCascaderBubbleWeakMap(this.data, 'children', (e) => e.tags), "f");
                __classPrivateFieldSet(this, _DuoyunTreeElement_statusMap, getCascaderBubbleWeakMap(this.data, 'children', (e) => e.status, (a, b) => (statusRank[a] > statusRank[b] ? a : b)), "f");
            }, () => [this.data]);
        };
        this.mounted = () => {
            this.effect(() => {
                if (!this.data)
                    return;
                const getExpandableValues = (list) => list.map((e) => { var _a; return (e.children ? [(_a = e.label) !== null && _a !== void 0 ? _a : e.value, ...getExpandableValues(e.children)] : undefined); });
                const newValue = new Set(getExpandableValues(this.data).flat());
                this.state.expandItem.forEach((e) => {
                    if (!newValue.has(e)) {
                        this.state.expandItem.delete(e);
                        this.setState({});
                    }
                });
            }, () => [this.data]);
        };
        this.render = () => {
            var _a;
            return html `${(_a = this.data) === null || _a === void 0 ? void 0 : _a.map((item) => __classPrivateFieldGet(this, _DuoyunTreeElement_renderItem, "f").call(this, item, 0))}`;
        };
        this.internals.role = 'tree';
    }
};
_DuoyunTreeElement_highlights = new WeakMap(), _DuoyunTreeElement_tagsMap = new WeakMap(), _DuoyunTreeElement_statusMap = new WeakMap(), _DuoyunTreeElement_onClick = new WeakMap(), _DuoyunTreeElement_getItemColor = new WeakMap(), _DuoyunTreeElement_renderItem = new WeakMap();
__decorate([
    property
], DuoyunTreeElement.prototype, "data", void 0);
__decorate([
    property
], DuoyunTreeElement.prototype, "highlights", void 0);
__decorate([
    emitter
], DuoyunTreeElement.prototype, "itemclick", void 0);
__decorate([
    part
], DuoyunTreeElement, "item", void 0);
DuoyunTreeElement = DuoyunTreeElement_1 = __decorate([
    customElement('dy-tree'),
    adoptedStyle(style),
    adoptedStyle(focusStyle)
], DuoyunTreeElement);
export { DuoyunTreeElement };
//# sourceMappingURL=tree.js.map