duoyun-ui/elements/button.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 _DuoyunButtonElement_instances, _DuoyunButtonElement_color_get, _DuoyunButtonElement_onClickDropdown;
var DuoyunButtonElement_1;
import { connectStore, adoptedStyle, customElement, attribute, property, boolattribute, refobject, state, part, } from '@mantou/gem/lib/decorators';
import { GemElement, html } from '@mantou/gem/lib/element';
import { history } from '@mantou/gem/lib/history';
import { createCSSSheet, css, QueryString } from '@mantou/gem/lib/utils';
import { theme, getSemanticColor } from '../lib/theme';
import { icons } from '../lib/icons';
import { commonHandle } from '../lib/hotkeys';
import { focusStyle } from '../lib/styles';
import { createHistoryParams } from './route';
import { ContextMenu } from './menu';
const style = createCSSSheet(css `
  :host(:where(:not([hidden]))) {
    --color: ${theme.backgroundColor};
    display: inline-flex;
    align-items: stretch;
    line-height: 1.2;
    cursor: default;
    user-select: none;
    font-size: 0.875em;
    border-radius: ${theme.normalRound};
    white-space: nowrap;
  }
  .content,
  .dropdown {
    position: relative;
    color: var(--color);
    background: var(--bg);
    border: 1px solid var(--bg);
  }
  .content {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3em;
    padding: 0.5em 1.5em;
    min-width: 3em;
    border-radius: inherit;
  }
  .dropdown {
    display: flex;
    border-radius: 0 ${theme.normalRound} ${theme.normalRound} 0;
    margin-inline-start: -1px;
    padding-inline: 0.2em;
    width: 1.4em;
  }
  .icon {
    width: 1.2em;
  }
  :host([small]) {
    font-size: 0.75em;
  }
  :host([small]) .content {
    min-width: auto;
    padding: 0.5em 0.8em;
  }
  :host([small]) .dropdown {
    padding: 0.5em;
  }
  :host([type='reverse']) :where(.content, .dropdown) {
    color: var(--bg);
    border-color: var(--bg);
    background: transparent;
  }
  :host([color='normal']) {
    --bg: ${theme.primaryColor};
  }
  :host([color='danger']) {
    --bg: ${theme.negativeColor};
  }
  :host([color='cancel']) {
    --bg: ${theme.hoverBackgroundColor};
    --color: ${theme.textColor};
  }
  :host([disabled]) {
    cursor: not-allowed;
    --bg: ${theme.disabledColor};
  }
  :where(
      :host(:where([data-active], :state(active))) .content,
      .content:where(:hover),
      .dropdown:where(:hover, [data-active], :state(active))
    )::after {
    content: '';
    position: absolute;
    inset: -1px;
    background-color: currentColor;
    border-radius: inherit;
    opacity: 0.1;
  }
  :host([disabled]) ::after {
    content: none;
  }
`);
/**
 * @customElement dy-button
 * @attr type
 * @attr color
 * @attr small
 * @attr disabled
 */
let DuoyunButtonElement = DuoyunButtonElement_1 = class DuoyunButtonElement extends GemElement {
    constructor() {
        super({ delegatesFocus: true });
        _DuoyunButtonElement_instances.add(this);
        _DuoyunButtonElement_onClickDropdown.set(this, async (e) => {
            e.stopPropagation();
            if (this.disabled)
                return;
            if (this.dropdown) {
                const { element } = this.dropdownRef;
                const { right, bottom } = element.getBoundingClientRect();
                const { width } = this.getBoundingClientRect();
                element.active = true;
                await ContextMenu.open(this.dropdown, {
                    x: right - width,
                    y: bottom,
                    width: `${width}px`,
                });
                element.active = false;
            }
        });
        this.render = () => {
            return html `
      <style>
        :host {
          --bg: ${__classPrivateFieldGet(this, _DuoyunButtonElement_instances, "a", _DuoyunButtonElement_color_get)};
        }
      </style>
      <div
        tabindex="0"
        role="button"
        aria-disabled=${this.disabled}
        @keydown=${commonHandle}
        class="content"
        part=${DuoyunButtonElement_1.button}
      >
        ${this.icon ? html `<dy-use class="icon" .element=${this.icon}></dy-use>` : ''}
        <slot></slot>
      </div>
      ${this.dropdown
                ? html `
            <style>
              div.content {
                border-start-end-radius: 0;
                border-end-end-radius: 0;
              }
              span.dropdown {
                border-start-start-radius: 0;
                border-end-start-radius: 0;
              }
            </style>
            <dy-use
              ref=${this.dropdownRef.ref}
              class="dropdown"
              part=${DuoyunButtonElement_1.dropdown}
              tabindex="0"
              @keydown=${commonHandle}
              role="button"
              aria-disabled=${this.disabled}
              @click=${__classPrivateFieldGet(this, _DuoyunButtonElement_onClickDropdown, "f")}
              .element=${icons.expand}
            ></dy-use>
          `
                : ''}
    `;
        };
        this.addEventListener('click', () => {
            if (this.disabled)
                return;
            if (this.route) {
                history.push(createHistoryParams(this.route, {
                    title: this.route.title,
                    params: this.params,
                    query: new QueryString(this.query),
                }));
            }
        });
    }
};
_DuoyunButtonElement_onClickDropdown = new WeakMap(), _DuoyunButtonElement_instances = new WeakSet(), _DuoyunButtonElement_color_get = function _DuoyunButtonElement_color_get() {
    return getSemanticColor(this.color) || this.color || theme.primaryColor;
};
__decorate([
    attribute
], DuoyunButtonElement.prototype, "type", void 0);
__decorate([
    attribute
], DuoyunButtonElement.prototype, "color", void 0);
__decorate([
    boolattribute
], DuoyunButtonElement.prototype, "small", void 0);
__decorate([
    boolattribute
], DuoyunButtonElement.prototype, "disabled", void 0);
__decorate([
    property
], DuoyunButtonElement.prototype, "dropdown", void 0);
__decorate([
    property
], DuoyunButtonElement.prototype, "route", void 0);
__decorate([
    property
], DuoyunButtonElement.prototype, "params", void 0);
__decorate([
    property
], DuoyunButtonElement.prototype, "query", void 0);
__decorate([
    property
], DuoyunButtonElement.prototype, "icon", void 0);
__decorate([
    state
], DuoyunButtonElement.prototype, "active", void 0);
__decorate([
    refobject
], DuoyunButtonElement.prototype, "dropdownRef", void 0);
__decorate([
    part
], DuoyunButtonElement, "button", void 0);
__decorate([
    part
], DuoyunButtonElement, "dropdown", void 0);
DuoyunButtonElement = DuoyunButtonElement_1 = __decorate([
    customElement('dy-button'),
    adoptedStyle(style),
    adoptedStyle(focusStyle),
    connectStore(icons)
], DuoyunButtonElement);
export { DuoyunButtonElement };
//# sourceMappingURL=button.js.map