duoyun-ui/elements/toast.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 __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
    if (kind === "m") throw new TypeError("Private method is not writable");
    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
};
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 _DuoyunToastElement_over, _DuoyunToastElement_getIcon;
import { adoptedStyle, customElement, property } from '@mantou/gem/lib/decorators';
import { GemElement, html, TemplateResult } from '@mantou/gem/lib/element';
import { createCSSSheet, css, classMap, isArrayChange } from '@mantou/gem/lib/utils';
import { icons } from '../lib/icons';
import { theme } from '../lib/theme';
import './use';
const style = createCSSSheet(css `
  :host(:where(:not([hidden]))) {
    z-index: ${theme.popupZIndex};
    position: fixed;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 1em;
    top: calc(1em + env(titlebar-area-height, var(--titlebar-area-height, 0px)));
    left: 50%;
    transform: translateX(-50%);
    max-width: 90%;
    font-size: 0.875em;
  }
  .item {
    display: flex;
    align-items: center;
    gap: 0.5em;
    color: white;
    background: ${theme.informativeColor};
    border-radius: ${theme.normalRound};
    padding: 0.6em 0.8em;
    line-height: 1;
    max-width: 100%;
  }
  .success {
    background: ${theme.positiveColor};
  }
  .warning {
    background: ${theme.noticeColor};
  }
  .error {
    background: ${theme.negativeColor};
  }
  .icon {
    width: 1.2em;
  }
  .body {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .body::first-letter {
    text-transform: capitalize;
  }
`);
const itemMap = new Map();
/**
 * @customElement dy-toast
 */
let DuoyunToastElement = class DuoyunToastElement extends GemElement {
    constructor() {
        super();
        _DuoyunToastElement_over.set(this, Promise.resolve());
        _DuoyunToastElement_getIcon.set(this, (type) => {
            switch (type) {
                case 'success':
                    return icons.success;
                case 'warning':
                    return icons.warning;
                case 'error':
                    return icons.error;
                default:
                    return icons.info;
            }
        });
        this.mounted = () => {
            Toast.instance = this;
            return () => (Toast.instance = undefined);
        };
        this.render = () => {
            var _a;
            return html `
      ${(_a = this.data) === null || _a === void 0 ? void 0 : _a.map(({ type, content }) => html `
          <div class=${classMap({ item: true, [type]: true })}>
            <dy-use class="icon" .element=${__classPrivateFieldGet(this, _DuoyunToastElement_getIcon, "f").call(this, type)}></dy-use>
            <span class="body">${content}</span>
          </div>
        `)}
    `;
        };
        this.internals.role = 'alert';
        this.internals.ariaLive = 'polite';
        if (Toast.instance)
            throw new Error('Single instance component');
        document.body.append(this);
        this.addEventListener('mouseover', () => {
            __classPrivateFieldSet(this, _DuoyunToastElement_over, new Promise((res) => {
                this.addEventListener('mouseout', () => res(), { once: true });
            }), "f");
        });
    }
    static open(type, content, { debug, duration = 3000 } = {}) {
        var _a;
        const toast = Toast.instance || new Toast();
        const item = ((_a = toast.data) === null || _a === void 0 ? void 0 : _a.find((e) => {
            if (e.type !== type)
                return false;
            // support simple `TemplateResult`
            return e.content instanceof TemplateResult && content instanceof TemplateResult
                ? content.strings.join() === e.content.strings.join() &&
                    !isArrayChange(content.values, e.content.values)
                : e.content === content;
        })) || { type, content };
        clearTimeout(itemMap.get(item));
        toast.data = [...(toast.data || []).filter((e) => e !== item), item];
        itemMap.set(item, window.setTimeout(async () => {
            await __classPrivateFieldGet(toast, _DuoyunToastElement_over, "f");
            if (!toast.data)
                return;
            itemMap.delete(item);
            toast.data = toast.data.filter((e) => e !== item);
            if (toast.data.length === 0)
                toast.remove();
        }, debug ? 1000000 : duration));
    }
};
_DuoyunToastElement_over = new WeakMap(), _DuoyunToastElement_getIcon = new WeakMap();
__decorate([
    property
], DuoyunToastElement.prototype, "data", void 0);
DuoyunToastElement = __decorate([
    customElement('dy-toast'),
    adoptedStyle(style)
], DuoyunToastElement);
export { DuoyunToastElement };
export const Toast = DuoyunToastElement;
//# sourceMappingURL=toast.js.map