ui/src/result/index.js

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

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

class Result extends Component {
  static props = {
    title: {
      type: String,
      default: '',
      attribute: false
    },
    subTitle: { type: String, default: '' },
    type: {
      type: String,
      default: 'success'
    },
    icon: {
      type: String,
      default: ''
    }
  }

  static styles = [
    css`
      :host {
        position: relative;
        display: inline-block;
        text-align: center;
      }
      :host([type='warning']) .icon {
        background: #e6a23c;
        wc-icon {
          transform: translateY(-2px);
        }
      }
      :host([type='error']) .icon {
        --size: 24px;
        background: #f56c6c;
      }
      :host([type='info']) .icon {
        background: #909399;
      }
      .result {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        text-align: center;
        box-sizing: border-box;
        padding: 40px 30px;
      }
      .icon-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .icon {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 53px;
        height: 53px;
        border-radius: 50%;
        color: #fff;
        background: #67c23a;
      }
      .title {
        margin-top: 20px;
      }
      .sub-title {
        margin-top: 10px;
      }
      .extra {
        margin-top: 30px;
      }
      span {
        font-size: 14px;
        color: #5e6d82;
        line-height: 1.5em;
      }
    `
  ]
  get iconName() {
    if (this.icon) {
      return this.icon
    }
    if (this.type === 'success') {
      return 'get'
    }
    if (this.type === 'error') {
      return 'close'
    }
    return this.type
  }

  render() {
    return html`
      <div class="result">
        <div class="icon-wrapper">
          <slot name="icon">
            <div class="icon">
              <wc-icon name=${this.iconName}></wc-icon>
            </div>
          </slot>
        </div>

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

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

        <div class="extra">
          <slot name="extra"></slot>
        </div>
      </div>
    `
  }
}

Result.reg('result')