duoyun-ui/elements/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 _DuoyunPickElement_isContain, _DuoyunPickElement_genMenu, _DuoyunPickElement_onOpen;
import { connectStore, 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 { commonHandle } from '../lib/hotkeys';
import { focusStyle } from '../lib/styles';
import { ContextMenu } from './menu';
import './use';
export const pickerStyle = createCSSSheet(css `
  :host(:where(:not([hidden]))) {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    border: 1px solid ${theme.borderColor};
    border-radius: ${theme.normalRound};
    line-height: 2;
    padding: 0.1em 0.5em;
    gap: 0.5em;
    font-size: 0.875em;
    box-sizing: border-box;
  }
  :host(:where([data-active], :state(active))) {
    background: ${theme.lightBackgroundColor};
  }
  :host([disabled]) {
    cursor: not-allowed;
    border-color: transparent;
    background: ${theme.disabledColor};
  }
  :host([disabled]) dy-use {
    pointer-events: none;
  }
  :host([borderless]) {
    width: auto;
    border-color: transparent;
  }
  dy-use {
    flex-shrink: 0;
    padding-block: 0.4em;
    width: 1.2em;
    color: ${theme.borderColor};
  }
  :host(:not([disabled]):where(:hover, [data-active], :state(active))) dy-use {
    color: ${theme.textColor};
  }
`);
export class BasePickerElement {
}
const style = createCSSSheet(css `
  :host {
    width: 12em;
  }
  .value {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .placeholder {
    color: ${theme.describeColor};
  }
`);
/**
 * @customElement dy-picker
 * @attr disabled
 * @attr borderless
 * @attr selectmode
 * @attr fit
 * @attr multiple
 */
let DuoyunPickElement = class DuoyunPickElement extends GemElement {
    constructor() {
        super();
        _DuoyunPickElement_isContain.set(this, (value) => {
            return this.multiple ? this.value.includes(value) : this.value === value;
        });
        _DuoyunPickElement_genMenu.set(this, ({ label, description, value, children }) => {
            const v = value !== null && value !== void 0 ? value : label;
            return {
                text: label,
                description,
                selected: !this.selectmode && !children && __classPrivateFieldGet(this, _DuoyunPickElement_isContain, "f").call(this, v),
                handle: children
                    ? undefined
                    : () => {
                        if (this.multiple) {
                            const set = new Set(this.value);
                            set.has(v) ? set.delete(v) : set.add(v);
                            this.change([...set]);
                        }
                        else if (!__classPrivateFieldGet(this, _DuoyunPickElement_isContain, "f").call(this, v)) {
                            this.change(v);
                        }
                    },
                menu: children === null || children === void 0 ? void 0 : children.map(__classPrivateFieldGet(this, _DuoyunPickElement_genMenu, "f")),
            };
        });
        _DuoyunPickElement_onOpen.set(this, async () => {
            if (this.disabled || !this.options || !this.options.length)
                return;
            await ContextMenu.open(this.options.map(__classPrivateFieldGet(this, _DuoyunPickElement_genMenu, "f")), {
                activeElement: this,
                width: this.fit ? `${this.getBoundingClientRect().width}px` : undefined,
            });
        });
        this.updated = () => {
            if (this.active) {
                __classPrivateFieldGet(this, _DuoyunPickElement_onOpen, "f").call(this);
            }
        };
        this.mounted = () => {
            return () => this.active && ContextMenu.close();
        };
        this.render = () => {
            var _a;
            const currents = (_a = this.options) === null || _a === void 0 ? void 0 : _a.map((e) => (e.children ? [e, ...e.children] : e)).flat().filter((e) => { var _a; return __classPrivateFieldGet(this, _DuoyunPickElement_isContain, "f").call(this, (_a = e.value) !== null && _a !== void 0 ? _a : e.label); });
            const currentLabels = currents === null || currents === void 0 ? void 0 : currents.map((e) => e.label);
            const isEmpty = !(currentLabels === null || currentLabels === void 0 ? void 0 : currentLabels.length);
            return html `
      <div class=${classMap({ value: true, placeholder: isEmpty })}>
        ${isEmpty ? this.placeholder : typeof currentLabels[0] === 'object' ? currentLabels : currentLabels.join()}
      </div>
      <dy-use class="icon" .element=${icons.expand}></dy-use>
    `;
        };
        this.addEventListener('click', __classPrivateFieldGet(this, _DuoyunPickElement_onOpen, "f"));
        this.addEventListener('keydown', commonHandle);
        this.tabIndex = 0;
        this.internals.role = 'combobox';
    }
    showPicker() {
        __classPrivateFieldGet(this, _DuoyunPickElement_onOpen, "f").call(this);
    }
};
_DuoyunPickElement_isContain = new WeakMap(), _DuoyunPickElement_genMenu = new WeakMap(), _DuoyunPickElement_onOpen = new WeakMap();
__decorate([
    attribute
], DuoyunPickElement.prototype, "placeholder", void 0);
__decorate([
    boolattribute
], DuoyunPickElement.prototype, "disabled", void 0);
__decorate([
    boolattribute
], DuoyunPickElement.prototype, "borderless", void 0);
__decorate([
    boolattribute
], DuoyunPickElement.prototype, "selectmode", void 0);
__decorate([
    boolattribute
], DuoyunPickElement.prototype, "fit", void 0);
__decorate([
    boolattribute
], DuoyunPickElement.prototype, "multiple", void 0);
__decorate([
    state
], DuoyunPickElement.prototype, "active", void 0);
__decorate([
    property
], DuoyunPickElement.prototype, "options", void 0);
__decorate([
    property
], DuoyunPickElement.prototype, "value", void 0);
__decorate([
    globalemitter
], DuoyunPickElement.prototype, "change", void 0);
DuoyunPickElement = __decorate([
    customElement('dy-picker'),
    adoptedStyle(style),
    adoptedStyle(pickerStyle),
    adoptedStyle(focusStyle),
    connectStore(icons)
], DuoyunPickElement);
export { DuoyunPickElement };
//# sourceMappingURL=picker.js.map