duoyun-ui/elements/card.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 _DuoyunCardElement_onOpenMenu;
var DuoyunCardElement_1;
// https://spectrum.adobe.com/page/cards/
import { adoptedStyle, customElement, attribute, property, part } from '@mantou/gem/lib/decorators';
import { html } from '@mantou/gem/lib/element';
import { createCSSSheet, css } 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 { DuoyunLoadableBaseElement } from './base/loadable';
import { ContextMenu } from './menu';
import './use';
const style = createCSSSheet(css `
  :host(:where(:not([hidden]))) {
    display: flex;
    flex-direction: column;
    padding: 1em;
    border: 1px solid ${theme.borderColor};
    border-radius: ${theme.normalRound};
  }
  .preview {
    display: block;
    margin: -1em -1em 1em;
    aspect-ratio: 2 / 1;
    background: ${theme.hoverBackgroundColor};
    width: calc(100% + 2em);
    object-fit: cover;
  }
  .avatar {
    display: block;
    width: 4em;
    height: 4em;
    border: 2px solid ${theme.backgroundColor};
    background: ${theme.describeColor};
    border-radius: 4em;
    margin-block: -4em 1em;
    object-fit: cover;
  }
  .header {
    display: flex;
    gap: 0.2em;
    align-items: baseline;
    margin-block-end: 1em;
  }
  .title {
    font-size: 1.125em;
    font-weight: bold;
    color: ${theme.highlightColor};
  }
  .detail {
    flex-grow: 1;
    font-size: 0.875em;
    color: ${theme.describeColor};
  }
  .detail:not(.right) {
    text-transform: uppercase;
  }
  .right {
    flex-grow: 0;
    white-space: nowrap;
  }
  .actions {
    width: 1.5em;
    padding: 0.1em;
    border-radius: ${theme.normalRound};
    align-self: center;
  }
  .actions:where(:hover, [data-active], :state(active)) {
    background-color: ${theme.hoverBackgroundColor};
  }
  slot[name='body']::slotted(*) {
    hyphens: auto;
    margin-block-end: 0em !important;
  }
  slot[name='footer']::slotted(*) {
    margin-block-start: 1em;
    padding-block-start: 1em;
    border-block-start: 1px solid ${theme.borderColor};
    border-radius: 0;
    display: flex;
    justify-content: flex-end;
    gap: 1em;
  }
`);
/**
 * @customElement dy-card
 * @attr header
 * @attr detail
 * @attr avatar
 * @attr preview
 */
let DuoyunCardElement = DuoyunCardElement_1 = class DuoyunCardElement extends DuoyunLoadableBaseElement {
    constructor() {
        super({ delegatesFocus: true });
        _DuoyunCardElement_onOpenMenu.set(this, (evt) => {
            const target = evt.target;
            ContextMenu.open(this.actions.map((e) => ({ ...e, handle: () => e.handle(target) })), { activeElement: target });
        });
        this.render = () => {
            return html `
      ${this.preview
                ? html `<img
            part=${DuoyunCardElement_1.preview}
            alt="preview"
            class="preview"
            src=${this.preview}
            crossorigin=${this.crossorigin}
          />`
                : ''}
      ${this.avatar
                ? html `<img
            part=${DuoyunCardElement_1.avatar}
            alt="avatar"
            class="avatar"
            src=${this.avatar}
            crossorigin=${this.crossorigin}
          />`
                : ''}
      ${this.header
                ? html `
            <div class="header">
              <div class="title">${this.header}</div>
              <div class="detail">${this.detail}</div>
              <div class="detail right">${this.detailRight}</div>
              ${this.actions
                    ? html `
                    <dy-use
                      tabindex="0"
                      role="button"
                      class="actions"
                      @click=${__classPrivateFieldGet(this, _DuoyunCardElement_onOpenMenu, "f")}
                      @keydown=${commonHandle}
                      .element=${icons.more}
                    ></dy-use>
                  `
                    : ''}
            </div>
          `
                : ''}
      <slot name="body"></slot>
      <slot></slot>
      <slot name="footer"></slot>
    `;
        };
        this.internals.role = 'group';
    }
};
_DuoyunCardElement_onOpenMenu = new WeakMap();
__decorate([
    attribute
], DuoyunCardElement.prototype, "avatar", void 0);
__decorate([
    attribute
], DuoyunCardElement.prototype, "preview", void 0);
__decorate([
    property
], DuoyunCardElement.prototype, "header", void 0);
__decorate([
    property
], DuoyunCardElement.prototype, "detail", void 0);
__decorate([
    property
], DuoyunCardElement.prototype, "detailRight", void 0);
__decorate([
    property
], DuoyunCardElement.prototype, "actions", void 0);
__decorate([
    attribute
], DuoyunCardElement.prototype, "crossorigin", void 0);
__decorate([
    part
], DuoyunCardElement, "preview", void 0);
__decorate([
    part
], DuoyunCardElement, "avatar", void 0);
DuoyunCardElement = DuoyunCardElement_1 = __decorate([
    customElement('dy-card'),
    adoptedStyle(style),
    adoptedStyle(focusStyle)
], DuoyunCardElement);
export { DuoyunCardElement };
//# sourceMappingURL=card.js.map