wcui/src/base/card.wc

<template>
  <div class="card">
    <header class="header"><slot name="header" /></header>
    <main class="body"><slot /></main>
  </div>
</template>

<style lang="scss">
:host {
  display: flex;
  width: 100%;
  border-radius: 3px;
}

.header {
  display: none;
  padding: 8px 16px;
  border-bottom: 1px solid var(--color-plain-2);
  font-size: 16px;

  &.show {
    display: block;
  }
}
.card {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid var(--color-plain-2);
  border-radius: inherit;
  font-size: 14px;
  background: #fff;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease-in-out;
}

:host([shadow='hover']) {
  .card {
    box-shadow: none;

    &:hover {
      box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
    }
  }
}

:host([shadow='never']) {
  .card {
    box-shadow: none;
  }
}

.body {
  padding: 16px;
}
</style>

<script>
export default class Card {
  props = {
    shadow: '',
    padding: 16
  }

  __init__() {
    /* render */

    var elem = this.root.children[1]
    this.__HEADER__ = elem.children[0]
    this.__BODY__ = elem.children[1]
  }

  mounted() {
    var elems = this.__HEADER__.firstChild.assignedNodes()

    if (elems.length) {
      this.__HEADER__.classList.toggle('show', true)
    }
  }

  watch() {
    switch (name) {
      case 'padding':
        val = +val
        this.props.padding = val > 0 ? val : 0
        this.__BODY__.style.padding = `${this.props.padding}px`
        break
    }
  }
}
</script>