feat(table): add table component

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)

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)

demo/documentation/components/table/enUS/basic.md

@@ -0,0 +1,19 @@
+# Basic
+```html
+<n-table>
+  <n-thead>
+    <n-th>Abandon</n-th>
+    <n-th>Abormal</n-th>
+    <n-th>Abolish</n-th>
+    <n-th>...</n-th>
+    <n-th>It's hard to learn words</n-th>
+  </n-thead>
+  <n-tbody>
+    <n-td>放弃</n-td>
+    <n-td>反常的</n-td>
+    <n-td>彻底废除</n-td>
+    <n-td>...</n-td>
+    <n-td>Damn it! I can't remember those words.</n-td>
+  </n-tbody>
+</n-table>
+```

demo/documentation/components/table/enUS/index.md

@@ -0,0 +1,11 @@
+# Table
+<!--single-column-->
+If you only want to render some basic table, use it. If you want to render structured data, see <n-a to="n-data-table">Data Table</n-a>.
+
+## Demos
+```demo
+basic
+```
+
+## Components
+You can use `n-table`, `n-thead`, `n-tbody`, `n-tr`, `n-th` and `n-td`.

demo/documentation/components/table/zhCN/basic.md

@@ -0,0 +1,19 @@
+# 基础用法
+```html
+<n-table>
+  <n-thead>
+    <n-th>Abandon</n-th>
+    <n-th>Abormal</n-th>
+    <n-th>Abolish</n-th>
+    <n-th>...</n-th>
+    <n-th>万事开头难</n-th>
+  </n-thead>
+  <n-tbody>
+    <n-td>放弃</n-td>
+    <n-td>反常的</n-td>
+    <n-td>彻底废除</n-td>
+    <n-td>...</n-td>
+    <n-td>干！我刚才背的是啥</n-td>
+  </n-tbody>
+</n-table>
+```

demo/documentation/components/table/zhCN/index.md

@@ -0,0 +1,11 @@
+# Table
+<!--single-column-->
+如果你只想画点简单的表格，用它。需要渲染数据请看<n-a to="n-data-table">数据表格 Data Table</n-a>。
+
+## 演示
+```demo
+basic
+```
+
+## Components
+你可以使用 `n-table`、`n-thead`、`n-tbody`、`n-tr`、`n-th` 和 `n-td`。

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

demo/loaders/convertMd2Doc.js

@@ -102,13 +102,13 @@ function convertMd2ComponentDocumentation (text) {
   }
   headerPart.links = {}
   footerPart.links = {}
-  const documentationHTML = `<section class="markdown header-part">${marked.parser(headerPart, {
+  const documentationHTML = `${marked.parser(headerPart, {
     gfm: true,
     renderer: mdRenderer
-  })}</section>\n` + '<!--demos-->\n' + `<section class="markdown footer-part">${marked.parser(footerPart, {
+  })}\n` + '<!--demos-->\n' + `${marked.parser(footerPart, {
     gfm: true,
     renderer: mdRenderer
-  })}</section>\n`
+  })}\n`
   // console.log(documentationHTML)
   // const classedDocumentationHTML = addClassToHTML(documentationHTML, 'markdown')
   const demosReg = /<!--demos-->/

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 = '<tbody class="n-table__tbody">' + body + '</tbody>'
+      return '<n-table>\n' +
+        '<thead class="n-table__thead">\n' +
+        header +
+        '</thead>\n' +
+        body +
+        '</n-table>\n'
+    },
+
+    tablerow (content) {
+      return '<tr class="n-table__tr">\n' + content + '</tr>\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 + '</' + type + '>\n'
+    },
+
     code: (code, language) => {
       const isLanguageValid = !!(language && hljs.getLanguage(language))
       if (!isLanguageValid) {

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'

demo/styles/markdown.scss

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

src/Table/TBody/index.js

@@ -1,7 +0,0 @@
-import NTbody from './src/main.vue'
-
-NTbody.install = function (Vue) {
-  Vue.component(NTbody.name, NTbody)
-}
-
-export default NTbody

src/Table/TBody/src/main.vue

@@ -1,19 +0,0 @@
-<!--
- * @Author: Volankey@gmail.com
- * @Company: Tusimple
- * @Date: 2019-11-07 13:46:09
- * @LastEditors: Jiwen.bai
- * @LastEditTime: 2019-11-07 13:46:10
- -->
-<template>
-  <tbody>
-    <slot />
-  </tbody>
-</template>
-
-<script>
-export default {
-  name: 'NTbody',
-  props: {}
-}
-</script>

src/Table/Td/index.js

@@ -1,7 +0,0 @@
-import NTh from './src/main.vue'
-
-NTh.install = function (Vue) {
-  Vue.component(NTh.name, NTh)
-}
-
-export default NTh

src/Table/Th/index.js

@@ -1,7 +0,0 @@
-import NTh from './src/main.vue'
-
-NTh.install = function (Vue) {
-  Vue.component(NTh.name, NTh)
-}
-
-export default NTh

src/Table/Th/src/main.vue

@@ -1,17 +0,0 @@
-<template>
-  <th>
-    <slot>
-      default th content
-    </slot>
-  </th>
-</template>
-
-<script>
-export default {
-  name: 'NTh'
-}
-</script>
-
-<style lang="scss" scoped>
-
-</style>

src/Table/Thead/index.js

@@ -1,7 +0,0 @@
-import NThead from './src/main.vue'
-
-NThead.install = function (Vue) {
-  Vue.component(NThead.name, NThead)
-}
-
-export default NThead

src/Table/Thead/src/main.vue

@@ -1,15 +0,0 @@
-<template>
-  <thead>
-    <slot>
-      default thead content
-    </slot>
-  </thead>
-</template>
-
-<script>
-export default {
-  name: 'NThead',
-  props: {
-  }
-}
-</script>

src/Table/Tr/index.js

@@ -1,7 +0,0 @@
-import NTr from './src/main.vue'
-
-NTr.install = function (Vue) {
-  Vue.component(NTr.name, NTr)
-}
-
-export default NTr

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

src/Table/src/Table.vue

@@ -1,15 +1,12 @@
 <template>
-  <div
+  <table
     class="n-table"
     :class="{
-
       [`n-${syntheticTheme}-theme`]: syntheticTheme
     }"
   >
-    <table cellspacing="0">
-      <slot>default table content</slot>
-    </table>
-  </div>
+    <slot />
+  </table>
 </template>
 
 <script>
@@ -21,7 +18,3 @@ export default {
   mixins: [withapp, themeable]
 }
 </script>
-
-<style lang="scss" scoped>
-
-</style>

src/Table/src/Tbody.vue

@@ -0,0 +1,13 @@
+<template>
+  <tbody
+    class="n-table__tbody"
+  >
+    <slot />
+  </tbody>
+</template>
+
+<script>
+export default {
+  name: 'NTbody'
+}
+</script>

src/Table/src/Td.vue

@@ -1,12 +1,13 @@
 <template>
-  <td>
+  <td
+    class="n-table__td"
+  >
     <slot />
   </td>
 </template>
 
 <script>
 export default {
-  name: 'NTd',
-  props: {}
+  name: 'NTd'
 }
 </script>

src/Table/src/Th.vue

@@ -0,0 +1,13 @@
+<template>
+  <th
+    class="n-table__th"
+  >
+    <slot />
+  </th>
+</template>
+
+<script>
+export default {
+  name: 'NTh'
+}
+</script>

src/Table/src/Thead.vue

@@ -0,0 +1,13 @@
+<template>
+  <thead
+    class="n-table__thead"
+  >
+    <slot />
+  </thead>
+</template>
+
+<script>
+export default {
+  name: 'NThead'
+}
+</script>

src/Table/src/Tr.vue

@@ -1,5 +1,7 @@
 <template>
-  <tr>
+  <tr
+    class="n-table__tr"
+  >
     <slot />
   </tr>
 </template>
@@ -9,7 +11,3 @@ export default {
   name: 'NTr'
 }
 </script>
-
-<style lang="scss" scoped>
-
-</style>

styles/Table.scss

@@ -1 +1,39 @@
-@import "./mixins/mixins.scss";
+@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;
+    }
+  }
+}