', '')
+ .replace('', '')
+ }
+}
+
module.exports = {
resolve: {
extensions: ['.js', '.vue', '.json'],
@@ -100,6 +120,56 @@ module.exports = {
limit: 10000,
name: assetsPath('fonts/[name].[hash:7].[ext]')
}
+ },
+ {
+ test: /\.md$/,
+ loader: 'vue-markdown-loader',
+ options: {
+ use: [
+ [require('markdown-it-anchor'), {
+ level: 2,
+ slugify: slugify,
+ permalink: true,
+ permalinkBefore: true,
+ permalinkHref: function (slug) {
+ return '#' + slug
+ }
+ }],
+ [require('markdown-it-container'), 'demo', {
+ validate: function (params) {
+ return params.trim().match(/^demo\s*(.*)$/)
+ },
+ render: function (tokens, idx) {
+ var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/)
+ if (tokens[idx].nesting === 1) {
+ var description = (m && m.length > 1) ? m[1] : ''
+ var content = tokens[idx + 1].content
+ var html = convert(striptags.strip(content, ['script', 'style'])).replace(/(<[^>]*)=""(?=.*>)/g, '$1')
+ var script = striptags.fetch(content, 'script')
+ var style = striptags.fetch(content, 'style')
+ var jsfiddle = { html: html, script: script, style: style }
+ var descriptionHTML = description ? md.render(description) : ''
+
+ jsfiddle = md.utils.escapeHtml(JSON.stringify(jsfiddle))
+
+ return `
+ ${html}
+ ${descriptionHTML}
+ `
+ }
+ return ` \n`
+ }
+ }],
+ [require('markdown-it-container'), 'tip']
+ ],
+ preprocess: function (MarkdownIt, source) {
+ MarkdownIt.renderer.rules.table_open = function () {
+ return ''
+ }
+ MarkdownIt.renderer.rules.fence = wrap(MarkdownIt.renderer.rules.fence)
+ return source
+ }
+ }
}
]
}
diff --git a/build/webpack.dev.conf.js b/build/webpack.dev.conf.js
index c508511..a463c3d 100644
--- a/build/webpack.dev.conf.js
+++ b/build/webpack.dev.conf.js
@@ -41,14 +41,15 @@ var webpackConfig = merge(baseWebpackConfig, {
]
})
-if (isProd) {
+if (isProd) {
webpackConfig.output.chunkFilename = isProd ? '[name].[chunkhash:7].js' : '[name].js'
webpackConfig.externals = [
{
vue: 'Vue',
'vue-router': 'VueRouter'
- },
- nodeExternals()
+ }
+ // ,
+ // nodeExternals()
]
webpackConfig.plugins.push.apply(webpackConfig.plugins, [
new webpack.optimize.UglifyJsPlugin({
@@ -57,7 +58,8 @@ if (isProd) {
}
}),
new ExtractTextPlugin({
- filename: '[name].[contenthash:7].css'
+ filename: '[name].[contenthash:7].css',
+ allChunks: true
}),
// 压缩抽取的 CSS。 我们正在使用此插件,以便可以重复使用来自不同组件的可能重复的CSS。
new OptimizeCSSPlugin({
diff --git a/components.json b/components.json
index 1b2a1d3..c836c05 100644
--- a/components.json
+++ b/components.json
@@ -1,3 +1,4 @@
{
- "button": "./packages/button/index.js"
+ "button": "./packages/button/index.js",
+ "icon": "./packages/icon/index.js"
}
diff --git a/document/App.vue b/document/App.vue
index 509ee04..48ac5f9 100644
--- a/document/App.vue
+++ b/document/App.vue
@@ -1,23 +1,143 @@
-
-
-
-
+ a {
+ color: #4078c0;
+ text-decoration: none;
+ }
+ code {
+ background-color: #f9fafc;
+ padding: 0 4px;
+ border: 1px solid #eaeefb;
+ border-radius: 4px;
+ }
+ button, input, select, textarea {
+ font-family: inherit;
+ font-size: inherit;
+ line-height: inherit;
+ color: inherit;
+ }
+ .hljs {
+ line-height: 1.8;
+ font-family: Menlo, Monaco, Consolas, Courier, monospace;
+ font-size: 12px;
+ padding: 18px 24px;
+ background-color: #f9fafc;
+ border: solid 1px #eaeefb;
+ margin-bottom: 25px;
+ border-radius: 4px;
+ -webkit-font-smoothing: auto;
+ }
+ .page-container {
+ width: 1140px;
+ padding: 55px 30px 0 30px;
+ margin: 0 auto;
+
+ h2 {
+ font-size: 28px;
+ color: #1f2d3d;
+ margin: 0;
+ }
+ h3 {
+ font-size: 22px;
+ }
+ h2, h3, h4, h5 {
+ font-weight: normal;
+ color: #1f2f3d;
+
+ &:hover a {
+ opacity: .4;
+ }
+
+ a {
+ float: left;
+ margin-left: -20px;
+ opacity: 0;
+ cursor: pointer;
+
+ &:hover {
+ opacity: .4;
+ }
+ }
+ }
+ p {
+ font-size: 14px;
+ color: #5e6d82;
+ line-height: 1.5em;
+ }
+ .tip {
+ padding: 8px 16px;
+ background-color: #ECF8FF;
+ border-radius: 4px;
+ border-left: #50bfff 5px solid;
+ margin-top: 20px;
+
+ code {
+ background-color: rgba(#fff, .7);
+ color: #445368;
+ }
+ }
+ }
+
\ No newline at end of file
diff --git a/document/components/Hello.vue b/document/components/Hello.vue
deleted file mode 100644
index 438e263..0000000
--- a/document/components/Hello.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-
-
- {{ msg }}
- Essential Links
-
- - Core Docs
- - Forum
- - Gitter Chat
- - Twitter
-
- - Docs for This Template
-
- Ecosystem
-
- - vue-router
- - vuex
- - vue-loader
- - awesome-vue
-
-
-
-
-
-
-
-
-
diff --git a/document/components/demo-block.vue b/document/components/demo-block.vue
new file mode 100644
index 0000000..526bcbe
--- /dev/null
+++ b/document/components/demo-block.vue
@@ -0,0 +1,245 @@
+
+
+
+
+
+
+
+
+
+
+ {{ isExpanded ? '隐藏代码' : '显示代码' }}
+
+
+
+
+
+
diff --git a/document/components/footer-nav.vue b/document/components/footer-nav.vue
new file mode 100644
index 0000000..aac6ee2
--- /dev/null
+++ b/document/components/footer-nav.vue
@@ -0,0 +1,97 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/document/components/side-nav.vue b/document/components/side-nav.vue
new file mode 100644
index 0000000..e073f2e
--- /dev/null
+++ b/document/components/side-nav.vue
@@ -0,0 +1,76 @@
+
+
+
+
+
+
+
+
+
diff --git a/document/docs/button.md b/document/docs/button.md
new file mode 100644
index 0000000..51af7a1
--- /dev/null
+++ b/document/docs/button.md
@@ -0,0 +1,92 @@
+## Button 按钮
+
+主要提供了 3 种主要按钮,Raised 按钮是一个标准按钮,意味着行动,并有一定深度,Floating 圆形按钮用于非常重要的功能。Flat 按钮通常用在cards 或 modals中。
+
+
+### Raised 浮动按钮
+
+:::demo 通过 `icon` 属性可以为按钮添加图标,同时利用 `position` 属性更改图标在按钮中的位置。可以通过 `type` 属性为按钮设置颜色。
+```html
+Button
+Button
+Button
+Button
+
+```
+:::
+
+### Floating action 悬浮响应按钮
+
+:::demo 通过设置 `floating` 属性为 `true`变换到悬浮响应按钮。
+```html
+
+
+```
+:::
+
+### Flat 扁平按钮
+
+:::demo 通过设置 `flat` 属性为 `true`变换到扁平按钮。
+```html
+
+
+```
+:::
+
+### Submit 按钮
+
+:::demo 通过设置 `nativeType` 属性为按钮指定类型。
+```html
+
+```
+:::
+
+### 大
+
+此按钮有更大的高度,可以用于引人注意。
+
+:::demo 通过设置 `size` 属性为按钮大小。
+```html
+Button
+Button
+Button
+```
+:::
+
+### 禁用
+
+此样式可应用于所有按钮类型。
+
+:::demo 通过设置 `disabled` 属性禁用按钮。
+```html
+Button
+Button
+Button
+
+```
+:::
+
+### 加载中
+
+:::demo `icon`属性的值可以是一个对象,属性可以 `Icon` 组件的所有 `props`。
+```html
+加载中
+```
+:::
+
+### Attributes
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+|---------- |-------- |---------- |------------- |-------- |
+| floating | 响应悬浮类型按钮 | boolean | — | false |
+| flat | 扁平按钮 | boolean | — | false |
+| nativeType | 按钮类型 | string | button, submit, reset | button |
+| disabled | 是否禁用按钮 | boolean | — | false |
+| type | 按钮颜色, 需要是 class | string | — | — |
+| size | 按钮大小 | string | large | — |
+| icon | 带图标,Icon 组件中的图标名 | string/object | — | — |
+| position | 图标位置 | string | — | — |
+
+### Events
+| 事件名称 | 说明 | 回调参数 |
+|---------- |-------- |---------- |
+| click | 点击按钮时触发 | event |
diff --git a/document/docs/icon.md b/document/docs/icon.md
new file mode 100644
index 0000000..f4964d9
--- /dev/null
+++ b/document/docs/icon.md
@@ -0,0 +1,92 @@
+
+
+## Icon 图标
+
+计划只提供组件库使用到的图标集合。如果想使用更多的 Goggle's [material-design-icons](https://github.com/google/material-design-icons) 中的图标,请在 [http://icons.savoygu.com](http://icons.savoygu.com) 上进行查找。
+
+### 使用方式
+
+:::demo 通过 `spin` 为图标添加旋转动画,`scale` 进行图标缩放,`flip` 进行水平和垂直方向翻转。
+```html
+
+ 默认
+
+
+
+ linear 旋转
+
+
+
+ step(8) 旋转
+
+
+
+ 缩放
+
+
+
+ 垂直翻转
+
+
+
+ 水平翻转
+
+
+
+ 反转(白色)
+
+
+```
+:::
+
+使用详情参考:[https://github.com/savoygu/vue-md-icons](https://github.com/savoygu/vue-md-icons)
+
+### Attributes
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+|---------- |-------- |---------- |------------- |-------- |
+| name | 图标名称 | string | — | — |
+| scale | 缩放比例 | number/string | 正整数 | 1 |
+| spin | 是否 linear 旋转图标 | boolean | — | false |
+| inverse | 是否反转图标 | boolean | — | false |
+| pulse | 是否 step(8) 旋转图标 | boolean | — | false |
+| flip | 翻转图标 | string | normal, horizontal, vertical | normal |
+| label | 屏幕阅读器 | string | — | — |
diff --git a/document/dom/class.js b/document/dom/class.js
new file mode 100644
index 0000000..baf53f5
--- /dev/null
+++ b/document/dom/class.js
@@ -0,0 +1,15 @@
+export const hasClass = function (obj, cls) {
+ return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'))
+}
+
+export const addClass = function (obj, cls) {
+ if (!hasClass(obj, cls)) obj.className += ' ' + cls
+}
+
+export const removeClass = function (obj, cls) {
+ if (hasClass(obj, cls)) obj.className = obj.className.replace(new RegExp('(\\s|^)' + cls + '(\\s|$)'), ' ')
+}
+
+export const toggleClass = function (obj, cls) {
+ hasClass(obj, cls) ? removeClass(obj, cls) : addClass(obj, cls)
+}
diff --git a/document/index.tpl b/document/index.tpl
index a2a7969..8b1ef7c 100644
--- a/document/index.tpl
+++ b/document/index.tpl
@@ -10,4 +10,18 @@
<% } %>