duoyun-ui/elements/cascader.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 _DuoyunCascaderElement_instances, _DuoyunCascaderElement_value_get, _DuoyunCascaderElement_deep, _DuoyunCascaderElement_valueObj, _DuoyunCascaderElement_onChange, _DuoyunCascaderElement_onClick;
var DuoyunCascaderElement_1;
import { adoptedStyle, customElement, globalemitter, property, boolattribute, part, } from '@mantou/gem/lib/decorators';
import { GemElement, html } from '@mantou/gem/lib/element';
import { createCSSSheet, css, styleMap, classMap } from '@mantou/gem/lib/utils';
import { icons } from '../lib/icons';
import { structuredClone, getCascaderDeep, readProp } from '../lib/utils';
import { theme } from '../lib/theme';
import { isNotNullish } from '../lib/types';
import './use';
import './checkbox';
const style = createCSSSheet(css `
  :host(:where(:not([hidden]))) {
    display: flex;
    align-items: stretch;
  }
  .list {
    box-sizing: border-box;
    margin: 0;
    padding: 0.2em 0;
    width: 12em;
    overflow: auto;
  }
  .list + .list {
    border-inline-start: 1px solid ${theme.borderColor};
  }
  .item {
    display: flex;
    align-items: center;
    gap: 0.5em;
    line-height: 1.6;
    padding: 0.3em 0.3em 0.3em 0.6em;
  }
  .item:hover,
  .item.selected {
    background-color: ${theme.lightBackgroundColor};
  }
  .checkbox {
    margin-inline-start: 0.2em;
  }
  .label {
    cursor: default;
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .right {
    width: 1.2em;
  }
`);
const token = Symbol();
/**
 * @customElement dy-cascader
 * @attr fit
 * @attr multiple
 */
let DuoyunCascaderElement = DuoyunCascaderElement_1 = class DuoyunCascaderElement extends GemElement {
    constructor() {
        super(...arguments);
        _DuoyunCascaderElement_instances.add(this);
        this.state = {
            selected: [],
        };
        _DuoyunCascaderElement_deep.set(this, 1);
        _DuoyunCascaderElement_valueObj.set(this, {});
        _DuoyunCascaderElement_onChange.set(this, (index, item, evt) => {
            var _a;
            evt.stopPropagation();
            const valueClone = structuredClone(__classPrivateFieldGet(this, _DuoyunCascaderElement_valueObj, "f"));
            let obj = valueClone;
            // set new value(select part)
            for (let i = 0; i < index; i++) {
                const { value, label } = this.state.selected[i];
                const k = value !== null && value !== void 0 ? value : label;
                if (!obj[k])
                    obj[k] = {};
                obj = obj[k];
            }
            // set new value(children part)
            const generator = (item) => item.children
                ? item.children.reduce((p, c) => {
                    var _a;
                    const v = generator(c);
                    const k = (_a = c.value) !== null && _a !== void 0 ? _a : c.label;
                    if (v === false) {
                        delete p[k];
                    }
                    else {
                        p[k] = generator(c);
                    }
                    return p;
                }, {})
                : evt.detail;
            obj[(_a = item.value) !== null && _a !== void 0 ? _a : item.label] = generator(item);
            // parse obj to array
            const value = [];
            const parse = (obj, init) => {
                const keys = Object.keys(obj);
                keys.forEach((key) => {
                    if (obj[key] === true) {
                        value.push([...init, key]);
                    }
                    parse(obj[key], [...init, key]);
                });
            };
            parse(valueClone, []);
            this.change(value);
        });
        _DuoyunCascaderElement_onClick.set(this, (index, item) => {
            const { selected } = this.state;
            const clickValue = selected.slice(0, index).concat(item);
            if (selected[index] !== item) {
                this.setState({ selected: clickValue });
            }
            if (!this.multiple && !item.children) {
                this.change(clickValue.map((e) => { var _a; return (_a = e.value) !== null && _a !== void 0 ? _a : e.label; }));
            }
        });
        this.willMount = () => {
            this.memo(() => {
                var _a, _b;
                if (!this.options)
                    return;
                __classPrivateFieldSet(this, _DuoyunCascaderElement_deep, getCascaderDeep(this.options, 'children'), "f");
                // init state
                if (!this.state.selected.length) {
                    const selected = [];
                    (_b = (_a = __classPrivateFieldGet(this, _DuoyunCascaderElement_instances, "a", _DuoyunCascaderElement_value_get)) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.forEach((val, index) => {
                        const item = (index ? selected[selected.length - 1].children : this.options).find((e) => { var _a; return val === ((_a = e.value) !== null && _a !== void 0 ? _a : e.label); });
                        selected.push(item);
                    });
                    this.setState({ selected });
                }
            }, () => [this.options]);
            this.memo(() => {
                var _a, _b;
                // generator obj via value(array)
                __classPrivateFieldSet(this, _DuoyunCascaderElement_valueObj, ((_a = __classPrivateFieldGet(this, _DuoyunCascaderElement_instances, "a", _DuoyunCascaderElement_value_get)) === null || _a === void 0 ? void 0 : _a.reduce((p, value) => {
                    value.reduce((pp, s, index, arr) => {
                        if (index === arr.length - 1) {
                            pp[s] = true;
                            return pp;
                        }
                        else {
                            return (pp[s] = pp[s] || {});
                        }
                    }, p);
                    return p;
                }, {})) || {}, "f");
                // append check status to obj via value(array)
                const check = (path, item) => {
                    var _a, _b;
                    const key = String((_a = item.value) !== null && _a !== void 0 ? _a : item.label);
                    const sub = readProp(__classPrivateFieldGet(this, _DuoyunCascaderElement_valueObj, "f"), [...path, key]);
                    if (sub === true || !sub)
                        return;
                    const keys = Object.keys(sub);
                    if (!keys.length)
                        sub[token] = -1;
                    sub[token] = ((_b = item.children) === null || _b === void 0 ? void 0 : _b.every((e) => {
                        var _a;
                        const k = String((_a = e.value) !== null && _a !== void 0 ? _a : e.label);
                        if (sub[k] === true) {
                            return true;
                        }
                        else {
                            check([...path, key], e);
                            if (sub[k] && sub[k][token] === 1)
                                return true;
                        }
                    }))
                        ? 1
                        : 0;
                };
                (_b = this.options) === null || _b === void 0 ? void 0 : _b.forEach((e) => check([], e));
            }, () => [this.value]);
        };
        this.render = () => {
            if (!this.options)
                return html ``;
            const { selected } = this.state;
            const listStyle = styleMap({ width: this.fit ? `${100 / __classPrivateFieldGet(this, _DuoyunCascaderElement_deep, "f")}%` : undefined });
            return html `
      ${[this.options, ...selected.map((e) => e.children).filter(isNotNullish)].map((list, index) => html `
          <ul part=${DuoyunCascaderElement_1.column} class="list" style=${listStyle}>
            ${list.map((item, _i, _arr, status = readProp(__classPrivateFieldGet(this, _DuoyunCascaderElement_valueObj, "f"), [...selected.slice(0, index), item].map((e) => { var _a; return String((_a = e.value) !== null && _a !== void 0 ? _a : e.label); }))) => {
                var _a;
                return html `
                <li
                  class=${classMap({ item: true, selected: selected[index] === item })}
                  @click=${() => __classPrivateFieldGet(this, _DuoyunCascaderElement_onClick, "f").call(this, index, item)}
                >
                  ${this.multiple
                    ? html `
                        <dy-checkbox
                          class="checkbox"
                          @change=${(evt) => __classPrivateFieldGet(this, _DuoyunCascaderElement_onChange, "f").call(this, index, item, evt)}
                          ?checked=${status === true || (status === null || status === void 0 ? void 0 : status[token]) === 1}
                          ?indeterminate=${status !== true && (status === null || status === void 0 ? void 0 : status[token]) === 0}
                        ></dy-checkbox>
                      `
                    : ''}
                  <span class="label">${(_a = item.value) !== null && _a !== void 0 ? _a : item.label}</span>
                  <dy-use class="right" .element=${item.children && icons.right}></dy-use>
                </li>
              `;
            })}
          </ul>
        `)}
    `;
        };
    }
};
_DuoyunCascaderElement_deep = new WeakMap(), _DuoyunCascaderElement_valueObj = new WeakMap(), _DuoyunCascaderElement_onChange = new WeakMap(), _DuoyunCascaderElement_onClick = new WeakMap(), _DuoyunCascaderElement_instances = new WeakSet(), _DuoyunCascaderElement_value_get = function _DuoyunCascaderElement_value_get() {
    if (!this.value)
        return;
    return (this.multiple ? this.value : [this.value]);
};
__decorate([
    property
], DuoyunCascaderElement.prototype, "options", void 0);
__decorate([
    boolattribute
], DuoyunCascaderElement.prototype, "fit", void 0);
__decorate([
    boolattribute
], DuoyunCascaderElement.prototype, "multiple", void 0);
__decorate([
    globalemitter
], DuoyunCascaderElement.prototype, "change", void 0);
__decorate([
    property
], DuoyunCascaderElement.prototype, "value", void 0);
__decorate([
    part
], DuoyunCascaderElement, "column", void 0);
DuoyunCascaderElement = DuoyunCascaderElement_1 = __decorate([
    customElement('dy-cascader'),
    adoptedStyle(style)
], DuoyunCascaderElement);
export { DuoyunCascaderElement };
//# sourceMappingURL=cascader.js.map