ui/src/result/result.js

/**
 * {结果}
 * @author yutent<yutent.io@gmail.com>
 * @date 2023/04/28 16:14:10
 */

import { css, html, Component } from 'wkit'
import '../icon/icon.js'

class Result extends Component {
  static props = {
    title: 'str!',
    subTitle: '',
    type: 'success',
    icon: ''
  }

  static styles = [
    css`
      :host {
        display: inline-flex;
      }

      :host([type='success']) .icon {
        background: var(--color-teal-1);
      }
      :host([type='warning']) .icon {
        background: var(--color-orange-1);
      }
      :host([type='error']) .icon {
        background: var(--color-red-1);
      }
      :host([type='info']) .icon {
        background: var(--color-blue-1);
      }

      .container {
        display: flex;
        align-items: center;
        flex-direction: column;
        text-align: center;
        max-width: 440px;
        padding: 36px 32px;
        line-height: 1.5;
        font-size: 14px;
        color: var(--color-dark-1);
      }

      .icon {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 52px;
        height: 52px;
        line-height: 1;
        border-radius: 50%;
        background: var(--wc-result-icon-color, var(--color-dark-1));
        color: #fff;
      }
      .title {
        margin-top: 16px;
        font-size: 18px;
      }
      .sub-title {
        margin-top: 6px;
      }
      .extra {
        margin-top: 12px;
      }
    `
  ]

  get #icon() {
    if (this.icon) {
      return this.icon
    }
    if (this.type === 'success') {
      return 'get'
    }
    if (this.type === 'error') {
      return 'deny'
    }
    return this.type
  }

  render() {
    return html`
      <main class="container">
        <div class="icon">
          <slot name="icon"><wc-icon name=${this.#icon}></wc-icon></slot>
        </div>

        <h3 class="title">
          <slot name="title">${this.title}</slot>
        </h3>

        <section class="sub-title">
          <slot name="sub-title">${this.subTitle}</slot>
        </section>

        <cite class="extra"><slot></slot></cite>
      </main>
    `
  }
}

Result.reg('result')