From b8e64073826ed77d9794ab7716c79637cbd4384f Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Thu, 20 Feb 2020 16:26:34 +0800 Subject: [PATCH] feat(table): add table component --- demo/deploymentIndex.js | 1 - demo/devIndex.js | 1 - .../components/table/enUS/basic.md | 19 ++++++ .../components/table/enUS/index.md | 11 ++++ .../components/table/index.entry | 0 .../components/table/zhCN/basic.md | 19 ++++++ .../components/table/zhCN/index.md | 11 ++++ demo/init.js | 2 + demo/loaders/convertMd2Doc.js | 6 +- demo/loaders/mdRenderer.js | 22 +++++++ demo/menuOptions.js | 10 +++ demo/styles/markdown.scss | 63 ------------------- src/Table/TBody/index.js | 7 --- src/Table/TBody/src/main.vue | 19 ------ src/Table/Td/index.js | 7 --- src/Table/Th/index.js | 7 --- src/Table/Th/src/main.vue | 17 ----- src/Table/Thead/index.js | 7 --- src/Table/Thead/src/main.vue | 15 ----- src/Table/Tr/index.js | 7 --- src/Table/index.js | 28 ++++----- src/Table/src/{main.vue => Table.vue} | 13 +--- src/Table/src/Tbody.vue | 13 ++++ src/Table/{Td/src/main.vue => src/Td.vue} | 7 ++- src/Table/src/Th.vue | 13 ++++ src/Table/src/Thead.vue | 13 ++++ src/Table/{Tr/src/main.vue => src/Tr.vue} | 8 +-- styles/Table.scss | 40 +++++++++++- 28 files changed, 199 insertions(+), 187 deletions(-) create mode 100644 demo/documentation/components/table/enUS/basic.md create mode 100644 demo/documentation/components/table/enUS/index.md create mode 100644 demo/documentation/components/table/index.entry create mode 100644 demo/documentation/components/table/zhCN/basic.md create mode 100644 demo/documentation/components/table/zhCN/index.md delete mode 100644 demo/styles/markdown.scss delete mode 100644 src/Table/TBody/index.js delete mode 100644 src/Table/TBody/src/main.vue delete mode 100644 src/Table/Td/index.js delete mode 100644 src/Table/Th/index.js delete mode 100644 src/Table/Th/src/main.vue delete mode 100644 src/Table/Thead/index.js delete mode 100644 src/Table/Thead/src/main.vue delete mode 100644 src/Table/Tr/index.js rename src/Table/src/{main.vue => Table.vue} (68%) create mode 100644 src/Table/src/Tbody.vue rename src/Table/{Td/src/main.vue => src/Td.vue} (63%) create mode 100644 src/Table/src/Th.vue create mode 100644 src/Table/src/Thead.vue rename src/Table/{Tr/src/main.vue => src/Tr.vue} (68%) diff --git a/demo/deploymentIndex.js b/demo/deploymentIndex.js index 40f58e141..c2b48dd5e 100644 --- a/demo/deploymentIndex.js +++ b/demo/deploymentIndex.js @@ -2,7 +2,6 @@ import { Vue, router, i18n, hljs } from './init' import demoRouterView from './demoRouterView' import NaiveUI from '../lib/index' import '../lib/styles/index.css' -import './styles/markdown.scss' Vue.use(NaiveUI) NaiveUI.setHljs(hljs) diff --git a/demo/devIndex.js b/demo/devIndex.js index 65d96a419..e7fc458ba 100644 --- a/demo/devIndex.js +++ b/demo/devIndex.js @@ -3,7 +3,6 @@ import { Vue, router, i18n, hljs } from './init' import demoRouterView from './demoRouterView' import NaiveUI from '../src/index' import '../styles/index.scss' -import './styles/markdown.scss' Vue.use(NaiveUI) NaiveUI.setHljs(hljs) diff --git a/demo/documentation/components/table/enUS/basic.md b/demo/documentation/components/table/enUS/basic.md new file mode 100644 index 000000000..db3cfb498 --- /dev/null +++ b/demo/documentation/components/table/enUS/basic.md @@ -0,0 +1,19 @@ +# Basic +```html + + + Abandon + Abormal + Abolish + ... + It's hard to learn words + + + 放弃 + 反常的 + 彻底废除 + ... + Damn it! I can't remember those words. + + +``` diff --git a/demo/documentation/components/table/enUS/index.md b/demo/documentation/components/table/enUS/index.md new file mode 100644 index 000000000..3bdf770e9 --- /dev/null +++ b/demo/documentation/components/table/enUS/index.md @@ -0,0 +1,11 @@ +# Table + +If you only want to render some basic table, use it. If you want to render structured data, see Data Table. + +## Demos +```demo +basic +``` + +## Components +You can use `n-table`, `n-thead`, `n-tbody`, `n-tr`, `n-th` and `n-td`. diff --git a/demo/documentation/components/table/index.entry b/demo/documentation/components/table/index.entry new file mode 100644 index 000000000..e69de29bb diff --git a/demo/documentation/components/table/zhCN/basic.md b/demo/documentation/components/table/zhCN/basic.md new file mode 100644 index 000000000..f00013ac2 --- /dev/null +++ b/demo/documentation/components/table/zhCN/basic.md @@ -0,0 +1,19 @@ +# 基础用法 +```html + + + Abandon + Abormal + Abolish + ... + 万事开头难 + + + 放弃 + 反常的 + 彻底废除 + ... + 干！我刚才背的是啥 + + +``` diff --git a/demo/documentation/components/table/zhCN/index.md b/demo/documentation/components/table/zhCN/index.md new file mode 100644 index 000000000..276c0750a --- /dev/null +++ b/demo/documentation/components/table/zhCN/index.md @@ -0,0 +1,11 @@ +# Table + +如果你只想画点简单的表格，用它。需要渲染数据请看数据表格 Data Table。 + +## 演示 +```demo +basic +``` + +## Components +你可以使用 `n-table`、`n-thead`、`n-tbody`、`n-tr`、`n-th` 和 `n-td`。 diff --git a/demo/init.js b/demo/init.js index f36a402de..eff71429a 100644 --- a/demo/init.js +++ b/demo/init.js @@ -73,6 +73,7 @@ import element from './documentation/components/element' import log from './documentation/components/log' import code from './documentation/components/code' import upload from './documentation/components/upload' +import table from './documentation/components/table' import demo from './demo' import ComponentDemo from './utils/ComponentDemo' @@ -224,6 +225,7 @@ const routes = [ { path: '/n-code', component: code }, { path: '/n-typography', component: typography }, { path: '/n-upload', component: upload }, + { path: '/n-table', component: table }, { path: '/n-icon-transition-debug', component: iconTransitionDebug diff --git a/demo/loaders/convertMd2Doc.js b/demo/loaders/convertMd2Doc.js index c339ef56f..9faf775ce 100644 --- a/demo/loaders/convertMd2Doc.js +++ b/demo/loaders/convertMd2Doc.js @@ -102,13 +102,13 @@ function convertMd2ComponentDocumentation (text) { } headerPart.links = {} footerPart.links = {} - const documentationHTML = `
${marked.parser(headerPart, { + const documentationHTML = `${marked.parser(headerPart, { gfm: true, renderer: mdRenderer - })}
\n` + '\n' + `
${marked.parser(footerPart, { + })}\n` + '\n' + `${marked.parser(footerPart, { gfm: true, renderer: mdRenderer - })}
\n` + })}\n` // console.log(documentationHTML) // const classedDocumentationHTML = addClassToHTML(documentationHTML, 'markdown') const demosReg = // diff --git a/demo/loaders/mdRenderer.js b/demo/loaders/mdRenderer.js index bf127b0a9..db5ae0467 100644 --- a/demo/loaders/mdRenderer.js +++ b/demo/loaders/mdRenderer.js @@ -4,6 +4,28 @@ const marked = require('marked') function createRenderer (wrapCodeWithCard = true) { const renderer = new marked.Renderer() const overrides = { + table (header, body) { + if (body) body = '' + body + '' + return '\n' + + '\n' + + header + + '\n' + + body + + '\n' + }, + + tablerow (content) { + return '\n' + content + '\n' + }, + + tablecell (content, flags) { + const type = flags.header ? 'th' : 'td' + const tag = flags.align + ? '<' + type + ` class="n-table__${type}"` + ' align="' + flags.align + '">' + : '<' + type + ` class="n-table__${type}"` + '>' + return tag + content + '\n' + }, + code: (code, language) => { const isLanguageValid = !!(language && hljs.getLanguage(language)) if (!isLanguageValid) { diff --git a/demo/menuOptions.js b/demo/menuOptions.js index 2825d0552..41a23500d 100644 --- a/demo/menuOptions.js +++ b/demo/menuOptions.js @@ -328,6 +328,12 @@ export default function (locale, instance) { titleExtra: 'Statistic', path: `/${instance.lang}/${instance.theme}` + '/n-statistic' }, + { + name: 'Table', + title: '表格', + titleExtra: 'Table', + path: `/${instance.lang}/${instance.theme}` + '/n-table' + }, { name: 'Thing', title: '东西', @@ -762,6 +768,10 @@ export default function (locale, instance) { name: 'Statistic', path: `/${instance.lang}/${instance.theme}` + '/n-statistic' }, + { + name: 'Table', + path: `/${instance.lang}/${instance.theme}` + '/n-table' + }, { name: 'Thing', path: `/${instance.lang}/${instance.theme}` + '/n-thing' diff --git a/demo/styles/markdown.scss b/demo/styles/markdown.scss deleted file mode 100644 index a67488fa3..000000000 --- a/demo/styles/markdown.scss +++ /dev/null @@ -1,63 +0,0 @@ -@import '../../styles/mixins/config.scss'; -@import '../../styles/mixins/mixins.scss'; - -@include themes-mixin { - @if $theme == 'dark' { - .markdown { - table { - font-size: 14px; - width: 100%; - border: 1px solid $--n-divider-color; - border-radius: 6px; - text-align: left; - border-collapse: separate; - border-spacing: 0; - overflow: hidden; - background: $--neutral-card; - transition: background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier, color .3s $--n-ease-in-out-cubic-bezier; - th { - background-clip: padding-box; - white-space: nowrap; - color: $--overlay-text-1; - transition: background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier, color .3s $--n-ease-in-out-cubic-bezier; - background-color: $--n-action-background-color; - // background-clip: padding-box; - text-align: inherit; - padding: 14px 12px; - vertical-align: inherit; - font-style: none; - font-weight: 400; - text-transform: none; - border: none; - font-weight: 500; - border-color: $--n-divider-color; - border-bottom: 1px solid $--n-divider-color; - } - td { - color: $--overlay-text-2; - transition: background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier, color .3s $--n-ease-in-out-cubic-bezier; - background-color: $--n-table-body-background-color; - // background-clip: padding-box; - padding: 12px; - } - } - } - } @else { - .n-light-theme .markdown { - table { - background: white; - border: 1px solid $--n-divider-color; - th { - white-space: nowrap; - color: $--overlay-text-1; - background: $--n-action-background-color; - border-bottom: 1px solid $--n-divider-color; - } - td { - color: $--overlay-text-2; - background-color: white; - } - } - } - } -} \ No newline at end of file diff --git a/src/Table/TBody/index.js b/src/Table/TBody/index.js deleted file mode 100644 index d62e184fb..000000000 --- a/src/Table/TBody/index.js +++ /dev/null @@ -1,7 +0,0 @@ -import NTbody from './src/main.vue' - -NTbody.install = function (Vue) { - Vue.component(NTbody.name, NTbody) -} - -export default NTbody diff --git a/src/Table/TBody/src/main.vue b/src/Table/TBody/src/main.vue deleted file mode 100644 index 338ad4264..000000000 --- a/src/Table/TBody/src/main.vue +++ /dev/null @@ -1,19 +0,0 @@ - - - - diff --git a/src/Table/Td/index.js b/src/Table/Td/index.js deleted file mode 100644 index f5b3e768b..000000000 --- a/src/Table/Td/index.js +++ /dev/null @@ -1,7 +0,0 @@ -import NTh from './src/main.vue' - -NTh.install = function (Vue) { - Vue.component(NTh.name, NTh) -} - -export default NTh diff --git a/src/Table/Th/index.js b/src/Table/Th/index.js deleted file mode 100644 index f5b3e768b..000000000 --- a/src/Table/Th/index.js +++ /dev/null @@ -1,7 +0,0 @@ -import NTh from './src/main.vue' - -NTh.install = function (Vue) { - Vue.component(NTh.name, NTh) -} - -export default NTh diff --git a/src/Table/Th/src/main.vue b/src/Table/Th/src/main.vue deleted file mode 100644 index c07df0451..000000000 --- a/src/Table/Th/src/main.vue +++ /dev/null @@ -1,17 +0,0 @@ - - - - - diff --git a/src/Table/Thead/index.js b/src/Table/Thead/index.js deleted file mode 100644 index 518442bf2..000000000 --- a/src/Table/Thead/index.js +++ /dev/null @@ -1,7 +0,0 @@ -import NThead from './src/main.vue' - -NThead.install = function (Vue) { - Vue.component(NThead.name, NThead) -} - -export default NThead diff --git a/src/Table/Thead/src/main.vue b/src/Table/Thead/src/main.vue deleted file mode 100644 index 71711faa6..000000000 --- a/src/Table/Thead/src/main.vue +++ /dev/null @@ -1,15 +0,0 @@ - - - diff --git a/src/Table/Tr/index.js b/src/Table/Tr/index.js deleted file mode 100644 index 5bf0d1854..000000000 --- a/src/Table/Tr/index.js +++ /dev/null @@ -1,7 +0,0 @@ -import NTr from './src/main.vue' - -NTr.install = function (Vue) { - Vue.component(NTr.name, NTr) -} - -export default NTr diff --git a/src/Table/index.js b/src/Table/index.js index 9745ef83e..815b3915f 100644 --- a/src/Table/index.js +++ b/src/Table/index.js @@ -1,17 +1,17 @@ -import NTable from './src/main.vue' -import NTh from './Th/src/main.vue' -import NTr from './Tr/src/main.vue' -import NTd from './Td/src/main.vue' -import NThead from './Thead/src/main.vue' -import NTbody from './TBody/src/main.vue' +import Table from './src/Table.vue' +import Th from './src/Th.vue' +import Tr from './src/Tr.vue' +import Td from './src/Td.vue' +import Thead from './src/Thead.vue' +import Tbody from './src/Tbody.vue' -NTable.install = function (Vue) { - Vue.component(NTable.name, NTable) - Vue.component(NTh.name, NTh) - Vue.component(NTr.name, NTr) - Vue.component(NTd.name, NTd) - Vue.component(NTbody.name, NTbody) - Vue.component(NThead.name, NThead) +Table.install = function (Vue) { + Vue.component(Table.name, Table) + Vue.component(Th.name, Th) + Vue.component(Tr.name, Tr) + Vue.component(Td.name, Td) + Vue.component(Tbody.name, Tbody) + Vue.component(Thead.name, Thead) } -export default NTable +export default Table diff --git a/src/Table/src/main.vue b/src/Table/src/Table.vue similarity index 68% rename from src/Table/src/main.vue rename to src/Table/src/Table.vue index ae5488539..d43f6d2c4 100644 --- a/src/Table/src/main.vue +++ b/src/Table/src/Table.vue @@ -1,15 +1,12 @@ - - diff --git a/src/Table/src/Tbody.vue b/src/Table/src/Tbody.vue new file mode 100644 index 000000000..07e8dd85a --- /dev/null +++ b/src/Table/src/Tbody.vue @@ -0,0 +1,13 @@ + + + diff --git a/src/Table/Td/src/main.vue b/src/Table/src/Td.vue similarity index 63% rename from src/Table/Td/src/main.vue rename to src/Table/src/Td.vue index 329b895c5..85c6671b1 100644 --- a/src/Table/Td/src/main.vue +++ b/src/Table/src/Td.vue @@ -1,12 +1,13 @@ diff --git a/src/Table/src/Th.vue b/src/Table/src/Th.vue new file mode 100644 index 000000000..f76775487 --- /dev/null +++ b/src/Table/src/Th.vue @@ -0,0 +1,13 @@ + + + diff --git a/src/Table/src/Thead.vue b/src/Table/src/Thead.vue new file mode 100644 index 000000000..a5287bab6 --- /dev/null +++ b/src/Table/src/Thead.vue @@ -0,0 +1,13 @@ + + + diff --git a/src/Table/Tr/src/main.vue b/src/Table/src/Tr.vue similarity index 68% rename from src/Table/Tr/src/main.vue rename to src/Table/src/Tr.vue index bacff056d..e3ba02d1f 100644 --- a/src/Table/Tr/src/main.vue +++ b/src/Table/src/Tr.vue @@ -1,5 +1,7 @@ @@ -9,7 +11,3 @@ export default { name: 'NTr' } - - diff --git a/styles/Table.scss b/styles/Table.scss index 66ffd4063..6b73de475 100644 --- a/styles/Table.scss +++ b/styles/Table.scss @@ -1 +1,39 @@ -@import "./mixins/mixins.scss"; \ No newline at end of file +@import "./mixins/mixins.scss"; + +@include themes-mixin { + @include b(table) { + font-size: 14px; + width: 100%; + border: 1px solid $--n-divider-color; + border-radius: 6px; + text-align: left; + border-collapse: separate; + border-spacing: 0; + overflow: hidden; + background: $--neutral-card; + transition: background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier, color .3s $--n-ease-in-out-cubic-bezier; + @include e(th) { + background-clip: padding-box; + white-space: nowrap; + color: $--overlay-text-1; + transition: background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier, color .3s $--n-ease-in-out-cubic-bezier; + background-color: $--n-action-background-color; + text-align: inherit; + padding: 14px 12px; + vertical-align: inherit; + font-style: none; + font-weight: 400; + text-transform: none; + border: none; + font-weight: 500; + border-color: $--n-divider-color; + border-bottom: 1px solid $--n-divider-color; + } + @include e(td) { + color: $--overlay-text-2; + transition: background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier, color .3s $--n-ease-in-out-cubic-bezier; + background-color: $--n-table-body-background-color; + padding: 12px; + } + } +} \ No newline at end of file