duoyun-ui/elements/timeline.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;
};
// https://ant.design/components/timeline/
import { adoptedStyle, customElement, property } from '@mantou/gem/lib/decorators';
import { html } from '@mantou/gem/lib/element';
import { createCSSSheet, css, styleMap, classMap } from '@mantou/gem/lib/utils';
import { theme } from '../lib/theme';
import { DuoyunScrollBaseElement } from './base/scroll';
import './use';
const style = createCSSSheet(css `
  :host(:where(:not([hidden]))) {
    --size: 1.5em;
    line-height: var(--size);
    display: block;
  }
  .item {
    position: relative;
    padding-inline-start: var(--size);
  }
  .line,
  .dot {
    position: absolute;
    content: '';
    left: calc(var(--size) / 4);
  }
  .line {
    top: var(--size);
    bottom: 0;
    transform: translateX(-50%);
    width: 2px;
    background-color: ${theme.borderColor};
  }
  .last {
    display: none;
  }
  .dot {
    top: calc(var(--size) / 2);
    box-sizing: border-box;
    width: calc(var(--size) / 2);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
  }
  .circle {
    border-radius: 50%;
    color: ${theme.informativeColor};
    border: 2px solid currentColor;
  }
  .desc {
    color: ${theme.describeColor};
    padding-block-end: 0.5em;
  }
`);
/**
 * @customElement dy-timeline
 */
let DuoyunTimelineElement = class DuoyunTimelineElement extends DuoyunScrollBaseElement {
    constructor() {
        super();
        this.render = () => {
            const events = this.events;
            if (!events)
                return html ``;
            return html `
      ${events.map(({ title, description, icon, color }, index) => html `
          <div role="listitem" class="item">
            <div class=${classMap({ line: true, last: index === events.length - 1 })}></div>
            <dy-use
              class=${classMap({ dot: true, circle: !icon })}
              style=${styleMap({ color })}
              .element=${icon}
            ></dy-use>
            <div class="title">${title}</div>
            <div class="desc">${description}</div>
          </div>
        `)}
    `;
        };
        this.internals.role = 'list';
    }
};
__decorate([
    property
], DuoyunTimelineElement.prototype, "events", void 0);
DuoyunTimelineElement = __decorate([
    customElement('dy-timeline'),
    adoptedStyle(style)
], DuoyunTimelineElement);
export { DuoyunTimelineElement };
//# sourceMappingURL=timeline.js.map