duoyun-ui/elements/shortcut-record.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 _DuoyunShortcutRecordElement_instances, _DuoyunShortcutRecordElement_tooltip_get, _DuoyunShortcutRecordElement_onKeydown;
var DuoyunShortcutRecordElement_1;
import { adoptedStyle, customElement, attribute, globalemitter, property, boolattribute, part, } from '@mantou/gem/lib/decorators';
import { GemElement, html } from '@mantou/gem/lib/element';
import { createCSSSheet, css } from '@mantou/gem/lib/utils';
import { theme } from '../lib/theme';
import { isNotNullish } from '../lib/types';
import { normalizeKey, getDisplayKey } from '../lib/hotkeys';
import { focusStyle } from '../lib/styles';
import './paragraph';
const style = createCSSSheet(css `
  :host(:where(:not([hidden]))) {
    display: inline-flex;
    align-items: center;
    font-size: 0.875em;
    box-sizing: border-box;
    width: 15em;
    height: calc(2.2em + 2px);
    padding-inline: 0.4em;
    gap: 0.2em;
    border-radius: ${theme.normalRound};
    border: 1px solid ${theme.borderColor};
    white-space: nowrap;
  }
  :host(:focus) {
    border-color: ${theme.textColor};
    background-color: ${theme.lightBackgroundColor};
  }
  .paragraph {
    display: contents;
    line-height: 1.2;
  }
  .placeholder,
  .tooltip {
    color: ${theme.describeColor};
    -webkit-user-select: none;
    user-select: none;
  }
  :host(:focus) .placeholder {
    display: none;
  }
  .tooltip {
    font-style: italic;
  }
  :host(:not(:focus)) .tooltip {
    display: none;
  }
`);
/**
 * @customElement dy-shortcut-record
 * @attr placeholder
 * @attr tooltip
 * @attr disabled
 */
let DuoyunShortcutRecordElement = DuoyunShortcutRecordElement_1 = class DuoyunShortcutRecordElement extends GemElement {
    constructor() {
        super();
        _DuoyunShortcutRecordElement_instances.add(this);
        _DuoyunShortcutRecordElement_onKeydown.set(this, (evt) => {
            const keys = [
                ...new Set([
                    evt.ctrlKey ? 'ctrl' : null,
                    evt.metaKey ? 'meta' : null,
                    evt.shiftKey ? 'shift' : null,
                    evt.altKey ? 'alt' : null,
                    evt.code,
                ]
                    .filter(isNotNullish)
                    .map(normalizeKey)),
            ];
            this.change(keys);
            evt.stopPropagation();
            evt.preventDefault();
        });
        this.render = () => {
            return html `
      <dy-paragraph class="paragraph">
        ${this.value
                ? html `${this.value.map((key) => html `<kbd part=${DuoyunShortcutRecordElement_1.kbd}>${getDisplayKey(key)}</kbd>`)}`
                : html `
              <div class="placeholder">${this.placeholder}</div>
              <div class="tooltip">${__classPrivateFieldGet(this, _DuoyunShortcutRecordElement_instances, "a", _DuoyunShortcutRecordElement_tooltip_get)}</div>
            `}
      </dy-paragraph>
    `;
        };
        this.internals.role = 'input';
        this.addEventListener('keydown', __classPrivateFieldGet(this, _DuoyunShortcutRecordElement_onKeydown, "f"));
        this.effect(() => {
            if (this.disabled) {
                this.removeAttribute('tabindex');
            }
            else {
                this.tabIndex = 0;
            }
            this.internals.ariaDisabled = String(this.disabled);
        });
    }
};
_DuoyunShortcutRecordElement_onKeydown = new WeakMap(), _DuoyunShortcutRecordElement_instances = new WeakSet(), _DuoyunShortcutRecordElement_tooltip_get = function _DuoyunShortcutRecordElement_tooltip_get() {
    return this.tooltip || 'Please keypress...';
};
__decorate([
    attribute
], DuoyunShortcutRecordElement.prototype, "placeholder", void 0);
__decorate([
    attribute
], DuoyunShortcutRecordElement.prototype, "tooltip", void 0);
__decorate([
    boolattribute
], DuoyunShortcutRecordElement.prototype, "disabled", void 0);
__decorate([
    globalemitter
], DuoyunShortcutRecordElement.prototype, "change", void 0);
__decorate([
    property
], DuoyunShortcutRecordElement.prototype, "value", void 0);
__decorate([
    part
], DuoyunShortcutRecordElement, "kbd", void 0);
DuoyunShortcutRecordElement = DuoyunShortcutRecordElement_1 = __decorate([
    customElement('dy-shortcut-record'),
    adoptedStyle(style),
    adoptedStyle(focusStyle)
], DuoyunShortcutRecordElement);
export { DuoyunShortcutRecordElement };
//# sourceMappingURL=shortcut-record.js.map