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; + } + } + } +}