From 69b9d7f04926067ca84be5640996164a4c303057 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Fri, 22 Nov 2019 16:54:21 +0800
Subject: [PATCH] feat(thing): thing component is for describe a thing

---
 .../components/thing/enUS/basic.md            |  58 ++++++++++
 .../components/thing/enUS/indent.md           |  58 ++++++++++
 .../components/thing/enUS/index.md            |   6 +
 .../components/thing/index.entry              |   0
 .../components/thing/zhCN/index.md            |   0
 packages/common/Thing/index.js                |   8 ++
 packages/common/Thing/src/main.vue            | 104 ++++++++++++++++++
 styles/Thing.scss                             |  53 +++++++++
 8 files changed, 287 insertions(+)
 create mode 100644 demo/documentation/components/thing/enUS/basic.md
 create mode 100644 demo/documentation/components/thing/enUS/indent.md
 create mode 100644 demo/documentation/components/thing/enUS/index.md
 create mode 100644 demo/documentation/components/thing/index.entry
 create mode 100644 demo/documentation/components/thing/zhCN/index.md
 create mode 100644 packages/common/Thing/index.js
 create mode 100644 packages/common/Thing/src/main.vue
 create mode 100644 styles/Thing.scss

diff --git a/demo/documentation/components/thing/enUS/basic.md b/demo/documentation/components/thing/enUS/basic.md
new file mode 100644
index 000000000..d3a64dcdf
--- /dev/null
+++ b/demo/documentation/components/thing/enUS/basic.md
@@ -0,0 +1,58 @@
+# Basic
+```html
+<n-thing>
+  <template v-slot:avatar>
+    <n-avatar>
+      <n-icon>
+        <md-cash />
+      </n-icon>
+    </n-avatar>
+  </template>
+  <template v-slot:header>
+    Money
+  </template>
+  <template v-slot:header-extra>
+    <n-button circle size="tiny">
+      <template v-slot:icon>
+        <md-cash />
+      </template>
+    </n-button>
+  </template>
+  <template v-slot:description>
+    It is what I want.
+  </template>
+  Money is any item or verifiable record that is generally accepted as payment for goods and services and repayment of debts, such as taxes, in a particular country or socio-economic context.
+  <template v-slot:footer>
+    The King of Money
+  </template>
+  <template v-slot:action>
+    <n-button size="tiny" style="margin-right: 8px;">
+      <template v-slot:icon>
+        <md-cash />
+      </template>
+      Add 1$
+    </n-button>
+    <n-button size="tiny" style="margin-right: 8px;">
+      <template v-slot:icon>
+        <md-cash />
+      </template>
+      Add 10$
+    </n-button>
+    <n-button size="tiny">
+      <template v-slot:icon>
+        <md-cash />
+      </template>
+      Add 100$
+    </n-button>
+  </template>
+</n-thing>
+```
+```js
+import mdCash from 'naive-ui/lib/icons/md-cash'
+
+export default {
+  components: {
+    mdCash
+  }
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/thing/enUS/indent.md b/demo/documentation/components/thing/enUS/indent.md
new file mode 100644
index 000000000..83ffb1c3c
--- /dev/null
+++ b/demo/documentation/components/thing/enUS/indent.md
@@ -0,0 +1,58 @@
+# Content Indent
+```html
+<n-thing content-indent>
+  <template v-slot:avatar>
+    <n-avatar>
+      <n-icon>
+        <md-cash />
+      </n-icon>
+    </n-avatar>
+  </template>
+  <template v-slot:header>
+    Money
+  </template>
+  <template v-slot:header-extra>
+    <n-button circle size="tiny">
+      <template v-slot:icon>
+        <md-cash />
+      </template>
+    </n-button>
+  </template>
+  <template v-slot:description>
+    It is what I want.
+  </template>
+  Money is any item or verifiable record that is generally accepted as payment for goods and services and repayment of debts, such as taxes, in a particular country or socio-economic context.
+  <template v-slot:footer>
+    The King of Money
+  </template>
+  <template v-slot:action>
+    <n-button size="tiny" style="margin-right: 8px;">
+      <template v-slot:icon>
+        <md-cash />
+      </template>
+      Add 1$
+    </n-button>
+    <n-button size="tiny" style="margin-right: 8px;">
+      <template v-slot:icon>
+        <md-cash />
+      </template>
+      Add 10$
+    </n-button>
+    <n-button size="tiny">
+      <template v-slot:icon>
+        <md-cash />
+      </template>
+      Add 100$
+    </n-button>
+  </template>
+</n-thing>
+```
+```js
+import mdCash from 'naive-ui/lib/icons/md-cash'
+
+export default {
+  components: {
+    mdCash
+  }
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/thing/enUS/index.md b/demo/documentation/components/thing/enUS/index.md
new file mode 100644
index 000000000..8eaa405b3
--- /dev/null
+++ b/demo/documentation/components/thing/enUS/index.md
@@ -0,0 +1,6 @@
+# Thing
+
+```demo
+basic
+indent
+```
\ No newline at end of file
diff --git a/demo/documentation/components/thing/index.entry b/demo/documentation/components/thing/index.entry
new file mode 100644
index 000000000..e69de29bb
diff --git a/demo/documentation/components/thing/zhCN/index.md b/demo/documentation/components/thing/zhCN/index.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/common/Thing/index.js b/packages/common/Thing/index.js
new file mode 100644
index 000000000..eec8247bc
--- /dev/null
+++ b/packages/common/Thing/index.js
@@ -0,0 +1,8 @@
+/* istanbul ignore file */
+import Thing from './src/main.vue'
+
+Thing.install = function (Vue) {
+  Vue.component(Thing.name, Thing)
+}
+
+export default Thing
diff --git a/packages/common/Thing/src/main.vue b/packages/common/Thing/src/main.vue
new file mode 100644
index 000000000..00a3ee408
--- /dev/null
+++ b/packages/common/Thing/src/main.vue
@@ -0,0 +1,104 @@
+<template>
+  <div
+    class="n-thing"
+    :class="{
+      [`n-${synthesizedTheme}-theme`]: synthesizedTheme
+    }"
+    :style="synthesizedStyle"
+  >
+    <div v-if="$slots.avatar && contentIndent" class="n-thing-avatar">
+      <slot name="avatar" />
+    </div>
+    <div class="n-thing-main">
+      <div v-if="!contentIndent" class="n-thing-avatar-header-wrapper">
+        <div v-if="$slots.avatar && !contentIndent" class="n-thing-avatar">
+          <slot name="avatar" />
+        </div>
+        <div class="n-thing-header-wrapper">
+          <div class="n-thing-header">
+            <div v-if="$slots.header || title" class="n-thing-header__title">
+              <slot name="header">
+                {{ title }}
+              </slot>
+            </div>
+            <div v-if="$slots['header-extra'] || titleExtra" class="n-thing-header__extra">
+              <slot name="header-extra">
+                {{ titleExtra }}
+              </slot>
+            </div>
+          </div>
+          <div v-if="$slots.description || description" class="n-thing-main__description">
+            <slot name="description">
+              {{ description }}
+            </slot>
+          </div>
+        </div>
+      </div>
+      <template v-else>
+        <div class="n-thing-header">
+          <div v-if="$slots.header || title" class="n-thing-header__title">
+            <slot name="header">
+              {{ title }}
+            </slot>
+          </div>
+          <div v-if="$slots['header-extra'] || titleExtra" class="n-thing-header__extra">
+            <slot name="header-extra">
+              {{ titleExtra }}
+            </slot>
+          </div>
+        </div>
+        <div v-if="$slots.description || description" class="n-thing-main__description">
+          <slot name="description">
+            {{ description }}
+          </slot>
+        </div>
+      </template>
+      <div v-if="$slots.default || content" class="n-thing-main__content">
+        <slot>
+          {{ content }}
+        </slot>
+      </div>
+      <div v-if="$slots.footer" class="n-thing-main__footer">
+        <slot name="footer" />
+      </div>
+      <div v-if="$slots.action" class="n-thing-main__action">
+        <slot name="action" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import withapp from '../../../mixins/withapp'
+import themeable from '../../../mixins/themeable'
+
+export default {
+  name: 'NThing',
+  mixins: [ withapp, themeable ],
+  props: {
+    title: {
+      type: String,
+      default: null
+    },
+    titleExtra: {
+      type: String,
+      default: null
+    },
+    description: {
+      type: String,
+      default: null
+    },
+    content: {
+      type: String,
+      default: null
+    },
+    contentIndent: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mounted () {
+    console.log(this.$slots, this.titleExtra)
+  }
+}
+</script>
diff --git a/styles/Thing.scss b/styles/Thing.scss
new file mode 100644
index 000000000..38de438e9
--- /dev/null
+++ b/styles/Thing.scss
@@ -0,0 +1,53 @@
+@import "./mixins/mixins.scss";
+
+@include themes-mixin {
+  @include b(thing) {
+    display: flex;
+    color: $--n-secondary-text-color;
+    transition: color .3s $default-cubic-bezier;
+    font-size: 14px;
+    @include b(thing-avatar) {
+      margin-right: 16px;
+      margin-top: 2px;
+    }
+    @include b(thing-avatar-header-wrapper) {
+      display: flex;
+      flex-wrap: nowrap;
+      @include b(thing-header-wrapper) {
+        flex: 1;
+      }
+    }
+    @include b(thing-main) {
+      flex-grow: 1;
+      @include b(thing-header) {
+        display: flex;
+        margin-bottom: 4px;
+        @include e(title) {
+          font-size: 16px;
+          font-weight: 700;
+          color: $--n-text-color;
+          transition: color .3s $default-cubic-bezier;
+        }
+        @include e(extra) {
+
+        }
+        justify-content: space-between;
+        align-items: center;
+      }
+      @include e(description) {
+        &:not(:last-child) {
+          margin-bottom: 4px;
+        }
+      }
+      @include e(content) {
+        margin-top: 16px;
+      }
+      @include e(footer) {
+        margin-top: 16px;
+      }
+      @include e(action) {
+        margin-top: 16px;
+      }
+    }
+  }
+}