duoyun-ui/elements/cascader-picker.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 _DuoyunCascaderPickElement_cascader, _DuoyunCascaderPickElement_onChange, _DuoyunCascaderPickElement_onOpen, _DuoyunCascaderPickElement_renderValue, _DuoyunCascaderPickElement_renderMultipleValue;
import { adoptedStyle, customElement, attribute, globalemitter, property, boolattribute, state, } from '@mantou/gem/lib/decorators';
import { GemElement, html } from '@mantou/gem/lib/element';
import { createCSSSheet, css, classMap } from '@mantou/gem/lib/utils';
import { theme } from '../lib/theme';
import { icons } from '../lib/icons';
import { getCascaderDeep } from '../lib/utils';
import { commonHandle } from '../lib/hotkeys';
import { focusStyle } from '../lib/styles';
import { ContextMenu } from './menu';
import { pickerStyle } from './picker';
import './use';
import './cascader';
import './tag';
const style = createCSSSheet(css `
  :host {
    width: 15em;
  }
  .value {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    gap: 0.5em;
  }
  .placeholder {
    color: ${theme.describeColor};
  }
`);
/**
 * @customElement dy-cascader-picker
 */
let DuoyunCascaderPickElement = class DuoyunCascaderPickElement extends GemElement {
    constructor() {
        super();
        _DuoyunCascaderPickElement_cascader.set(this, void 0);
        _DuoyunCascaderPickElement_onChange.set(this, ({ detail, target }) => {
            __classPrivateFieldSet(this, _DuoyunCascaderPickElement_cascader, target, "f");
            this.change(detail);
            if (!this.multiple) {
                ContextMenu.close();
            }
        });
        _DuoyunCascaderPickElement_onOpen.set(this, () => {
            var _a;
            if (this.disabled || !((_a = this.options) === null || _a === void 0 ? void 0 : _a.length))
                return;
            ContextMenu.open(html `
        <dy-cascader
          style="margin: -0.4em -1em; min-height: 10em;"
          .options=${this.options}
          .value=${this.value}
          @change=${(evt) => __classPrivateFieldGet(this, _DuoyunCascaderPickElement_onChange, "f").call(this, evt)}
          ?multiple=${this.multiple}
        >
          ${this.fit
                ? html `
                <style>
                  dy-cascader::part(column) {
                    width: ${this.getBoundingClientRect().width / getCascaderDeep(this.options, 'children')}px;
                  }
                </style>
              `
                : ''}
        </dy-cascader>
      `, {
                activeElement: this,
                width: 'auto',
            });
        });
        _DuoyunCascaderPickElement_renderValue.set(this, (value) => {
            return html `${value.join(' / ')}`;
        });
        _DuoyunCascaderPickElement_renderMultipleValue.set(this, (value) => {
            return html ` ${value.map((e) => html `<dy-tag small>${e.join(' / ')}</dy-tag>`)} `;
        });
        this.mounted = () => {
            this.effect(() => {
                if (__classPrivateFieldGet(this, _DuoyunCascaderPickElement_cascader, "f")) {
                    __classPrivateFieldGet(this, _DuoyunCascaderPickElement_cascader, "f").value = this.value;
                }
            }, () => [this.value]);
            return () => this.active && ContextMenu.close();
        };
        this.render = () => {
            var _a;
            const isEmpty = this.multiple ? !((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) : !this.value;
            return html `
      <div class=${classMap({ value: true, placeholder: isEmpty })}>
        ${isEmpty
                ? this.placeholder
                : this.multiple
                    ? __classPrivateFieldGet(this, _DuoyunCascaderPickElement_renderMultipleValue, "f").call(this, this.value)
                    : __classPrivateFieldGet(this, _DuoyunCascaderPickElement_renderValue, "f").call(this, this.value)}
      </div>
      <dy-use class="icon" .element=${icons.expand}></dy-use>
    `;
        };
        this.addEventListener('click', __classPrivateFieldGet(this, _DuoyunCascaderPickElement_onOpen, "f"));
        this.addEventListener('keydown', commonHandle);
        this.tabIndex = 0;
        this.internals.role = 'combobox';
    }
    showPicker() {
        __classPrivateFieldGet(this, _DuoyunCascaderPickElement_onOpen, "f").call(this);
    }
};
_DuoyunCascaderPickElement_cascader = new WeakMap(), _DuoyunCascaderPickElement_onChange = new WeakMap(), _DuoyunCascaderPickElement_onOpen = new WeakMap(), _DuoyunCascaderPickElement_renderValue = new WeakMap(), _DuoyunCascaderPickElement_renderMultipleValue = new WeakMap();
__decorate([
    attribute
], DuoyunCascaderPickElement.prototype, "placeholder", void 0);
__decorate([
    property
], DuoyunCascaderPickElement.prototype, "options", void 0);
__decorate([
    boolattribute
], DuoyunCascaderPickElement.prototype, "fit", void 0);
__decorate([
    boolattribute
], DuoyunCascaderPickElement.prototype, "disabled", void 0);
__decorate([
    boolattribute
], DuoyunCascaderPickElement.prototype, "multiple", void 0);
__decorate([
    globalemitter
], DuoyunCascaderPickElement.prototype, "change", void 0);
__decorate([
    property
], DuoyunCascaderPickElement.prototype, "value", void 0);
__decorate([
    state
], DuoyunCascaderPickElement.prototype, "active", void 0);
DuoyunCascaderPickElement = __decorate([
    customElement('dy-cascader-picker'),
    adoptedStyle(style),
    adoptedStyle(pickerStyle),
    adoptedStyle(focusStyle)
], DuoyunCascaderPickElement);
export { DuoyunCascaderPickElement };
//# sourceMappingURL=cascader-picker.js.map