duoyun-ui/elements/list.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;
};
// TODO: implement infinite scroll
import { adoptedStyle, customElement, property } 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 './avatar';
import './divider';
const style = createCSSSheet(css `
  :host(:where(:not([hidden]))) {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    font-size: 0.875em;
  }
`);
/**
 * @customElement dy-list
 */
let DuoyunListElement = class DuoyunListElement extends GemElement {
    constructor() {
        super();
        this.render = () => {
            var _a;
            return html `${(_a = this.data) === null || _a === void 0 ? void 0 : _a.map((item) => html `
        <dy-list-item .data=${item} .renderItem=${this.renderItem}></dy-list-item>
        <dy-divider></dy-divider>
      `)}`;
        };
        this.internals.role = 'list';
    }
};
__decorate([
    property
], DuoyunListElement.prototype, "data", void 0);
__decorate([
    property
], DuoyunListElement.prototype, "renderItem", void 0);
DuoyunListElement = __decorate([
    customElement('dy-list'),
    adoptedStyle(style)
], DuoyunListElement);
export { DuoyunListElement };
const itemStyle = createCSSSheet(css `
  :host(:where(:not([hidden]))) {
    display: flex;
    align-items: center;
    gap: 1em;
  }
  .content {
    display: flex;
    flex-direction: column;
    gap: 0.2em;
    min-width: 0;
  }
  .title,
  .description {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .title {
    font-weight: 500;
  }
  .description {
    color: ${theme.describeColor};
  }
`);
/**
 * @customElement dy-list-item
 */
let DuoyunListItemElement = class DuoyunListItemElement extends GemElement {
    constructor() {
        super({ isAsync: true });
        this.render = () => {
            if (!this.data)
                return html ``;
            const { title, avatar, description, status } = this.data;
            return this.renderItem
                ? this.renderItem(this.data)
                : html `
          ${!avatar
                    ? ''
                    : html `
                <div class="avatar">
                  ${typeof avatar === 'string'
                        ? html `<dy-avatar src=${avatar} alt="Avatar" .status=${status}></dy-avatar>`
                        : avatar}
                </div>
              `}
          <div class="content">
            <div class="title">${title}</div>
            <div class="description">${description}</div>
          </div>
        `;
        };
        this.internals.role = 'listitem';
    }
};
__decorate([
    property
], DuoyunListItemElement.prototype, "data", void 0);
__decorate([
    property
], DuoyunListItemElement.prototype, "renderItem", void 0);
DuoyunListItemElement = __decorate([
    customElement('dy-list-item'),
    adoptedStyle(itemStyle)
], DuoyunListItemElement);
export { DuoyunListItemElement };
//# sourceMappingURL=list.js.map