update 2.0.0

.gitattributes

@@ -0,0 +1 @@
+*.svelte linguist-language=HTML

.gitignore

@@ -0,0 +1,5 @@
+.DS_Store
+node_modules
+dist/*
+.idea/*
+.idea

.npmrc

@@ -0,0 +1,4 @@
+registry=http://172.17.12.206:8081/repository/npm-group/
+email=jukaifeng@lingtu.com
+always-auth=true
+_auth="bGluZ3R1OjEyMzQ1Ng=="

.prettierrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  trailingComma: 'es5',
+  tabWidth: 2,
+  semi: false,
+  singleQuote: true,
+  printWidth: 120,
+  semi: false,
+}

.travis.yml

@@ -0,0 +1,32 @@
+language: node_js
+node_js: lts/*
+
+branches:
+  only:
+    - master
+    - dev
+    # Tags
+    - /^v\d+\.\d+(\.\d+)?(-\S*)?$/
+    - /^greenkeeper\//
+
+addons:
+  apt:
+    packages:
+      - xvfb
+
+install:
+  - export DISPLAY=':99.0'
+  - Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 &
+  - npm ci || npm install
+
+script: skip
+
+jobs:
+  include:
+    - stage: release
+      node_js: lts/*
+      deploy:
+        provider: script
+        skip_cleanup: true
+        script:
+          - npx semantic-release

LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2019 Brian Hann; Modified Copyright (c) 2020 Keifer Ju
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

README.md

@@ -0,0 +1,128 @@
+
+
+
+# svelma-pro
+
+基于开源项目[svelma](https://github.com/c0bra/svelma) 扩展和修改.
+
+原项目组件比较少,存在一些小bug,所以在原有的组件库的基础上，扩展了一些常见的组件,并对发现的一些bug进行了修改，对原有的组件功能,事件以及用户配置进行更人性化的修改和扩展。
+
+
+# 文档
+
+[文档及Demo](http://172.17.60.20:380/svelma-pro/)
+
+# 快速开始
+
+### 1. 通过template创建svelte应用(或者sapper应用)
+
+[https://github.com/sveltejs/template](sveltejs/template) 是一个svelte的初始化模板. [degit](https://www.npmjs.com/package/degit)这个脚手架可以帮你获取它:
+
+    $ npx degit sveltejs/template my-svelma-project
+    $ cd my-svelma-project
+    $ npm install
+
+
+### 2. 引入bulma样式及svelma-pro组件等依赖
+
+#### bulma and svelma-pro
+
+    $ npm install --save bulma svelma-pro
+
+#### scss
+
+     $ npm install --save-dev svelte-preprocess autoprefixer node-sass sass
+
+
+### 3. config
+在你的rollup或者webpack配置文件中添加scss支持:
+
+```js
+// rollup配置  rollup.config.js
+import sveltePreprocess from 'svelte-preprocess';
+
+// ...
+
+const preprocess = sveltePreprocess({
+  scss: {
+    includePaths: ['src'],
+  },
+  postcss: {
+    plugins: [require('autoprefixer')],
+  },
+});
+
+export default {
+  // ... 
+  plugins: [
+    svelte({
+      // ...
+      preprocess: preprocess,
+    })
+  ]
+}
+```
+
+```js
+// webpack配置  webpack.config.js
+import sveltePreprocess from 'svelte-preprocess';
+
+// ...
+const preprocess = sveltePreprocess({
+  scss: {
+    includePaths: ['src'],
+  },
+  postcss: {
+    plugins: [require('autoprefixer')],
+  },
+});
+
+module.export = {
+  // ... 
+  module: {
+    rules: [
+      {
+        test: /.(svelte|html)$/,
+        use: {
+          loader: 'svelte-loader',
+          options: {
+            preprocess, 
+            // ...
+          }
+        }
+      },
+    ]
+  },
+  ]
+}
+```
+
+### 4. 引入Bulma的CSS样式和svelma-pro组件
+
+```html
+
+<!-- main.js or client.js(sapper) -->
+<script>
+  import 'bulma/css/bulma.css'
+</script>
+```
+
+### 5. 引入 [Font Awesome](https://fontawesome.com/) 图标:
+
+在你的主HTML配置CDN页面:
+
+```html
+<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"></link>
+```
+
+...或者通过npm包:
+
+    $ npm install --save @fortawesome/fontawesome-free
+
+```html
+ <!-- main.js or client.js(sapper) -->
+<script>
+  import 'bulma/css/bulma.css'
+  import '@fortawesome/fontawesome-free/css/all.css'
+</script>
+```

deploy/.gitignore

@@ -0,0 +1,2 @@
+.DS_Store
+node_modules

deploy/LICENSE

@@ -0,0 +1,6 @@
+ISC License (ISC)
+Copyright 2020 bgwd666;Modified Copyright 2020 Keifer Ju
+
+Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

deploy/README.md

@@ -0,0 +1,69 @@
+基于`bgwd666`的[deploy](https://github.com/bgwd666/deploy)发布脚本做了一些适合我自己的修改,在此万分感谢.
+
+### 使用方法:
+
+1. `在自己项目根目录`拉取代码
+```
+npx degit https://github.com/KeiferJu/auto-deploy.git deploy
+
+cd deploy
+
+npm install
+```
+
+2. 配置使用
+
+在项目package.json中配置命令:
+```
+   ...
+
+  "scripts": {
+      ...
+    "deploy": "node ./deploy/upload.js"
+  },
+
+  ...
+```
+
+然后在`deploy/config.js`里面配置上自己服务器信息,执行命令就可以部署了:
+```
+npm run deploy
+```
+
+### 相关配置项
+
+#### 必要配置
+- OUTPUT_PATH: 
+    
+    需要上传文件夹路径,默认dist
+- SERVER_PATH: 
+    
+    服务器路径
+- SSH_USER: 
+    
+    服务器用户名
+- PRIVATE_KEY: 
+    
+    用秘钥登录服务器(推荐)的秘钥地址, 本机私钥文件地址(需要在服务器用户目录 一般是 /root/.ssh/authorized_keys 配置公钥 并该文件权限为 600, (.ssh文件夹一般默认隐藏)
+- PASSWORD: 
+    
+    如果密码登录,填入密码,并且不能设置PRIVATE_KEY参数
+
+- PORT:
+    端口
+
+
+#### 扩展配置
+- CLEAR_OLDFILES: 
+    
+    是否默认删除上传文件夹内容
+- RENAME: 
+    
+    是否改名,字符串,参数为是文件夹新名字
+- BACKUP:
+  
+    是否备份,默认false
+- EXTENDS
+ 
+    任务结束后,有时有的操作需要其他命令支持,可以使用扩展,填入自己要用的命令数组.例如:['cd demo', 'rm -rf *']
+    

deploy/config.js

@@ -0,0 +1,40 @@
+module.exports = Object.freeze({
+  development: {//测试
+    SERVER_PATH: '172.17.60.20', // ssh地址 服务器地址
+    SSH_USER: 'root', // ssh 用户名
+    //方式一 用秘钥登录服务器(推荐), private 本机私钥文件地址(需要在服务器用户目录 一般是 /root/.ssh/authorized_keys 配置公钥 并该文件权限为 600, (.ssh文件夹一般默认隐藏)
+    // PRIVATE_KEY: 'C:/Users/Html5/.ssh/id_rsa',
+    PASSWORD: '123456', //方式二 用密码连接服务器
+    PATH: '/smartmapx/www', // 需要上传的服务器目录地址 如 /usr/local/nginx/html
+    OUTPUT_PATH: 'docs/__sapper__/export/svelma-pro', // 需要上传文件夹路径,默认dist
+    PORT: 22
+  },
+  production: {//正式
+    SERVER_PATH: 'xxx',
+    SSH_USER: 'root',
+     //方式一 用秘钥登录服务器(推荐), private 本机私钥文件地址(需要在服务器用户目录 一般是 /root/.ssh/authorized_keys 配置公钥 并该文件权限为 600, (.ssh文件夹一般默认隐藏)
+    // PRIVATE_KEY: 'C:/Users/Html5/.ssh/id_rsa',
+    PASSWORD: '123456',
+    PATH: '/smartmapx/www', // 需要上传的服务器目录地址 如 /usr/local/nginx/html
+    OUTPUT_PATH: 'docs/__sapper__/export/svelma-pro',  // 需要上传文件夹路径,默认dist
+    PORT: 22
+  }
+})
+
+/**
+ * 必要配置
+ */
+// OUTPUT_PATH: 需要上传文件夹路径,默认dist
+// SERVER_PATH: 服务器路径
+// SSH_USER: 服务器用户名
+// PRIVATE_KEY: 'C:/Users/Html5/.ssh/id_rsa'  用秘钥登录服务器(推荐)的秘钥地址, private 本机私钥文件地址(需要在服务器用户目录 一般是 /root/.ssh/authorized_keys 配置公钥 并该文件权限为 600, (.ssh文件夹一般默认隐藏)
+// PASSWORD: 密码
+// PORT: 端口
+
+/**
+ * 扩展配置
+ */
+// CLEAR_OLDFILES: 是否首先清空删除上传文件夹里面原有内容,慎用
+// RENAME : 是否改名,字符串,参数为是文件夹新名字
+// BACKUP: 是否备份,默认false
+// EXTENDS: 任务结束后,有时有的操作需要其他命令支持,可以使用扩展,填入自己要用的命令数组.例如:['cd demo', 'rm -rf *']

deploy/package-lock.json

@@ -0,0 +1,915 @@
+{
+  "name": "auto-deploy",
+  "version": "1.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@types/color-name": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
+      "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==",
+      "dev": true
+    },
+    "aggregate-error": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.0.1.tgz",
+      "integrity": "sha512-quoaXsZ9/BLNae5yiNoUz+Nhkwz83GhWwtYFglcjEQB2NDHCIpApbqXxIFnm4Pq/Nvhrsq5sYJFyohrrxnTGAA==",
+      "dev": true,
+      "requires": {
+        "clean-stack": "^2.0.0",
+        "indent-string": "^4.0.0"
+      }
+    },
+    "ansi-escapes": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.1.tgz",
+      "integrity": "sha512-JWF7ocqNrp8u9oqpgV+wH5ftbt+cfvv+PTjOvKLT3AdYly/LmORARfEVT1iyjwN+4MqE5UmVKoAdIBqeoCHgLA==",
+      "dev": true,
+      "requires": {
+        "type-fest": "^0.11.0"
+      }
+    },
+    "ansi-regex": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+      "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+      "dev": true
+    },
+    "ansi-styles": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+      "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+      "dev": true,
+      "requires": {
+        "@types/color-name": "^1.1.1",
+        "color-convert": "^2.0.1"
+      }
+    },
+    "asn1": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
+      "integrity": "sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==",
+      "dev": true,
+      "requires": {
+        "safer-buffer": "~2.1.0"
+      }
+    },
+    "balanced-match": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
+      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
+      "dev": true
+    },
+    "bcrypt-pbkdf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
+      "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=",
+      "dev": true,
+      "requires": {
+        "tweetnacl": "^0.14.3"
+      }
+    },
+    "bl": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-1.2.2.tgz",
+      "integrity": "sha512-e8tQYnZodmebYDWGH7KMRvtzKXaJHx3BbilrgZCfvyLUYdKpK1t5PSPmpkny/SgiTSCnjfLW7v5rlONXVFkQEA==",
+      "dev": true,
+      "requires": {
+        "readable-stream": "^2.3.5",
+        "safe-buffer": "^5.1.1"
+      }
+    },
+    "brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "buffer-alloc": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/buffer-alloc/-/buffer-alloc-1.2.0.tgz",
+      "integrity": "sha512-CFsHQgjtW1UChdXgbyJGtnm+O/uLQeZdtbDo8mfUgYXCHSM1wgrVxXm6bSyrUuErEb+4sYVGCzASBRot7zyrow==",
+      "dev": true,
+      "requires": {
+        "buffer-alloc-unsafe": "^1.1.0",
+        "buffer-fill": "^1.0.0"
+      }
+    },
+    "buffer-alloc-unsafe": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz",
+      "integrity": "sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg==",
+      "dev": true
+    },
+    "buffer-crc32": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+      "integrity": "sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=",
+      "dev": true
+    },
+    "buffer-fill": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/buffer-fill/-/buffer-fill-1.0.0.tgz",
+      "integrity": "sha1-+PeLdniYiO858gXNY39o5wISKyw=",
+      "dev": true
+    },
+    "chalk": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+      "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      }
+    },
+    "chardet": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
+      "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
+      "dev": true
+    },
+    "clean-stack": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
+      "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
+      "dev": true
+    },
+    "cli-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
+      "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
+      "dev": true,
+      "requires": {
+        "restore-cursor": "^3.1.0"
+      }
+    },
+    "cli-spinners": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.2.0.tgz",
+      "integrity": "sha512-tgU3fKwzYjiLEQgPMD9Jt+JjHVL9kW93FiIMX/l7rivvOD4/LL0Mf7gda3+4U2KJBloybwgj5KEoQgGRioMiKQ==",
+      "dev": true
+    },
+    "cli-width": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.0.tgz",
+      "integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=",
+      "dev": true
+    },
+    "clone": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
+      "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=",
+      "dev": true
+    },
+    "color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "requires": {
+        "color-name": "~1.1.4"
+      }
+    },
+    "color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "compressing2": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/compressing2/-/compressing2-1.5.1.tgz",
+      "integrity": "sha512-HwQAWFZi+Tu0CXolV5ENTkunpyCF4p6BbKunlGJKUvQEQynxhW8Z6AB6VmAV4qYP8m6FZH4nzHHHO7gnvdBQCQ==",
+      "dev": true,
+      "requires": {
+        "flushwritable": "^1.0.0",
+        "get-ready": "^1.0.0",
+        "iconv-lite": "^0.5.0",
+        "mkdirp": "^0.5.1",
+        "pump": "^3.0.0",
+        "streamifier": "^0.1.1",
+        "tar-stream": "^1.5.2",
+        "yauzl": "^2.7.0",
+        "yazl": "^2.4.2"
+      }
+    },
+    "concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
+      "dev": true
+    },
+    "core-util-is": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
+      "dev": true
+    },
+    "defaults": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz",
+      "integrity": "sha1-xlYFHpgX2f8I7YgUd/P+QBnz730=",
+      "dev": true,
+      "requires": {
+        "clone": "^1.0.2"
+      }
+    },
+    "emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true
+    },
+    "end-of-stream": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
+      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
+      "dev": true,
+      "requires": {
+        "once": "^1.4.0"
+      }
+    },
+    "escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+      "dev": true
+    },
+    "external-editor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz",
+      "integrity": "sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==",
+      "dev": true,
+      "requires": {
+        "chardet": "^0.7.0",
+        "iconv-lite": "^0.4.24",
+        "tmp": "^0.0.33"
+      },
+      "dependencies": {
+        "iconv-lite": {
+          "version": "0.4.24",
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+          "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+          "dev": true,
+          "requires": {
+            "safer-buffer": ">= 2.1.2 < 3"
+          }
+        }
+      }
+    },
+    "fd-slicer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
+      "integrity": "sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=",
+      "dev": true,
+      "requires": {
+        "pend": "~1.2.0"
+      }
+    },
+    "figures": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
+      "integrity": "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==",
+      "dev": true,
+      "requires": {
+        "escape-string-regexp": "^1.0.5"
+      }
+    },
+    "flushwritable": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/flushwritable/-/flushwritable-1.0.0.tgz",
+      "integrity": "sha1-PjKNj95BKtR+c44751C00pAENJg=",
+      "dev": true
+    },
+    "fs-constants": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
+      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
+      "dev": true
+    },
+    "fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
+      "dev": true
+    },
+    "get-ready": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/get-ready/-/get-ready-1.0.0.tgz",
+      "integrity": "sha1-+RgX8emt7P6hOlYq38jeiDqzR4I=",
+      "dev": true
+    },
+    "glob": {
+      "version": "7.1.6",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+      "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+      "dev": true,
+      "requires": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      }
+    },
+    "has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true
+    },
+    "iconv-lite": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.5.1.tgz",
+      "integrity": "sha512-ONHr16SQvKZNSqjQT9gy5z24Jw+uqfO02/ngBSBoqChZ+W8qXX7GPRa1RoUnzGADw8K63R1BXUMzarCVQBpY8Q==",
+      "dev": true,
+      "requires": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      }
+    },
+    "indent-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+      "dev": true
+    },
+    "inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+      "dev": true,
+      "requires": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
+    },
+    "inquirer": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.1.0.tgz",
+      "integrity": "sha512-5fJMWEmikSYu0nv/flMc475MhGbB7TSPd/2IpFV4I4rMklboCH2rQjYY5kKiYGHqUF9gvaambupcJFFG9dvReg==",
+      "dev": true,
+      "requires": {
+        "ansi-escapes": "^4.2.1",
+        "chalk": "^3.0.0",
+        "cli-cursor": "^3.1.0",
+        "cli-width": "^2.0.0",
+        "external-editor": "^3.0.3",
+        "figures": "^3.0.0",
+        "lodash": "^4.17.15",
+        "mute-stream": "0.0.8",
+        "run-async": "^2.4.0",
+        "rxjs": "^6.5.3",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0",
+        "through": "^2.3.6"
+      }
+    },
+    "interpret": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.2.0.tgz",
+      "integrity": "sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw==",
+      "dev": true
+    },
+    "is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true
+    },
+    "is-interactive": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz",
+      "integrity": "sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==",
+      "dev": true
+    },
+    "is-promise": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.1.0.tgz",
+      "integrity": "sha1-eaKp7OfwlugPNtKy87wWwf9L8/o=",
+      "dev": true
+    },
+    "isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+      "dev": true
+    },
+    "lodash": {
+      "version": "4.17.15",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
+      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
+      "dev": true
+    },
+    "log-symbols": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-3.0.0.tgz",
+      "integrity": "sha512-dSkNGuI7iG3mfvDzUuYZyvk5dD9ocYCYzNU6CYDE6+Xqd+gwme6Z00NS3dUh8mq/73HaEtT7m6W+yUPtU6BZnQ==",
+      "dev": true,
+      "requires": {
+        "chalk": "^2.4.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "color-convert": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+          "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+          "dev": true,
+          "requires": {
+            "color-name": "1.1.3"
+          }
+        },
+        "color-name": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "mimic-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+      "dev": true
+    },
+    "minimatch": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "dev": true,
+      "requires": {
+        "brace-expansion": "^1.1.7"
+      }
+    },
+    "minimist": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+      "dev": true
+    },
+    "mkdirp": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.3.tgz",
+      "integrity": "sha512-P+2gwrFqx8lhew375MQHHeTlY8AuOJSrGf0R5ddkEndUkmwpgUob/vQuBD1V22/Cw1/lJr4x+EjllSezBThzBg==",
+      "dev": true,
+      "requires": {
+        "minimist": "^1.2.5"
+      }
+    },
+    "mute-stream": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
+      "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==",
+      "dev": true
+    },
+    "node-ssh": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/node-ssh/-/node-ssh-8.0.0.tgz",
+      "integrity": "sha512-xqX3ia49AYDcL02KUqk+rtdqTSbLcca+R2MasiLGuF55NBH1BYvw61iFXSMR898vA8vYMTQDSVRvTLx4Lior5Q==",
+      "dev": true,
+      "requires": {
+        "p-map": "^3.0.0",
+        "sb-promisify": "^2.0.1",
+        "sb-scandir": "^2.0.0",
+        "shell-escape": "^0.2.0",
+        "ssh2": "^0.8.7"
+      }
+    },
+    "once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+      "dev": true,
+      "requires": {
+        "wrappy": "1"
+      }
+    },
+    "onetime": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.0.tgz",
+      "integrity": "sha512-5NcSkPHhwTVFIQN+TUqXoS5+dlElHXdpAWu9I0HP20YOtIi+aZ0Ct82jdlILDxjLEAWwvm+qj1m6aEtsDVmm6Q==",
+      "dev": true,
+      "requires": {
+        "mimic-fn": "^2.1.0"
+      }
+    },
+    "ora": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/ora/-/ora-4.0.3.tgz",
+      "integrity": "sha512-fnDebVFyz309A73cqCipVL1fBZewq4vwgSHfxh43vVy31mbyoQ8sCH3Oeaog/owYOs/lLlGVPCISQonTneg6Pg==",
+      "dev": true,
+      "requires": {
+        "chalk": "^3.0.0",
+        "cli-cursor": "^3.1.0",
+        "cli-spinners": "^2.2.0",
+        "is-interactive": "^1.0.0",
+        "log-symbols": "^3.0.0",
+        "mute-stream": "0.0.8",
+        "strip-ansi": "^6.0.0",
+        "wcwidth": "^1.0.1"
+      }
+    },
+    "os-tmpdir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+      "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
+      "dev": true
+    },
+    "p-map": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/p-map/-/p-map-3.0.0.tgz",
+      "integrity": "sha512-d3qXVTF/s+W+CdJ5A29wywV2n8CQQYahlgz2bFiA+4eVNJbHJodPZ+/gXwPGh0bOqA+j8S+6+ckmvLGPk1QpxQ==",
+      "dev": true,
+      "requires": {
+        "aggregate-error": "^3.0.0"
+      }
+    },
+    "path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
+      "dev": true
+    },
+    "path-parse": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
+      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
+      "dev": true
+    },
+    "pend": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
+      "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=",
+      "dev": true
+    },
+    "process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "dev": true
+    },
+    "pump": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+      "dev": true,
+      "requires": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
+    "readable-stream": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+      "dev": true,
+      "requires": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      },
+      "dependencies": {
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+          "dev": true
+        }
+      }
+    },
+    "rechoir": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
+      "integrity": "sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=",
+      "dev": true,
+      "requires": {
+        "resolve": "^1.1.6"
+      }
+    },
+    "resolve": {
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.15.1.tgz",
+      "integrity": "sha512-84oo6ZTtoTUpjgNEr5SJyzQhzL72gaRodsSfyxC/AXRvwu0Yse9H8eF9IpGo7b8YetZhlI6v7ZQ6bKBFV/6S7w==",
+      "dev": true,
+      "requires": {
+        "path-parse": "^1.0.6"
+      }
+    },
+    "restore-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
+      "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
+      "dev": true,
+      "requires": {
+        "onetime": "^5.1.0",
+        "signal-exit": "^3.0.2"
+      }
+    },
+    "run-async": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.0.tgz",
+      "integrity": "sha512-xJTbh/d7Lm7SBhc1tNvTpeCHaEzoyxPrqNlvSdMfBTYwaY++UJFyXUOxAtsRUXjlqOfj8luNaR9vjCh4KeV+pg==",
+      "dev": true,
+      "requires": {
+        "is-promise": "^2.1.0"
+      }
+    },
+    "rxjs": {
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.4.tgz",
+      "integrity": "sha512-naMQXcgEo3csAEGvw/NydRA0fuS2nDZJiw1YUWFKU7aPPAPGZEsD4Iimit96qwCieH6y614MCLYwdkrWx7z/7Q==",
+      "dev": true,
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
+    "safe-buffer": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.0.tgz",
+      "integrity": "sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg==",
+      "dev": true
+    },
+    "safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true
+    },
+    "sb-promisify": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/sb-promisify/-/sb-promisify-2.0.2.tgz",
+      "integrity": "sha1-QnelR1RIiqlnXYhuNU24lMm9yYE=",
+      "dev": true
+    },
+    "sb-scandir": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/sb-scandir/-/sb-scandir-2.0.0.tgz",
+      "integrity": "sha512-SKbyMJB0DUt9OgN4tP2RBcn9OsR26DEpe+nwaDkQTNcrJSJI0FlLhXhBpTd/YEnlQ2GdLrbszSNekGLw4rweOQ==",
+      "dev": true,
+      "requires": {
+        "p-map": "^1.2.0",
+        "sb-promisify": "^2.0.1"
+      },
+      "dependencies": {
+        "p-map": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/p-map/-/p-map-1.2.0.tgz",
+          "integrity": "sha512-r6zKACMNhjPJMTl8KcFH4li//gkrXWfbD6feV8l6doRHlzljFWGJ2AP6iKaCJXyZmAUMOPtvbW7EXkbWO/pLEA==",
+          "dev": true
+        }
+      }
+    },
+    "shell-escape": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/shell-escape/-/shell-escape-0.2.0.tgz",
+      "integrity": "sha1-aP0CXrBJC09WegJ/C/IkgLX4QTM=",
+      "dev": true
+    },
+    "shelljs": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.8.3.tgz",
+      "integrity": "sha512-fc0BKlAWiLpwZljmOvAOTE/gXawtCoNrP5oaY7KIaQbbyHeQVg01pSEuEGvGh3HEdBU4baCD7wQBwADmM/7f7A==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.0.0",
+        "interpret": "^1.0.0",
+        "rechoir": "^0.6.2"
+      }
+    },
+    "signal-exit": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
+      "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
+      "dev": true
+    },
+    "ssh2": {
+      "version": "0.8.9",
+      "resolved": "https://registry.npmjs.org/ssh2/-/ssh2-0.8.9.tgz",
+      "integrity": "sha512-GmoNPxWDMkVpMFa9LVVzQZHF6EW3WKmBwL+4/GeILf2hFmix5Isxm7Amamo8o7bHiU0tC+wXsGcUXOxp8ChPaw==",
+      "dev": true,
+      "requires": {
+        "ssh2-streams": "~0.4.10"
+      }
+    },
+    "ssh2-streams": {
+      "version": "0.4.10",
+      "resolved": "https://registry.npmjs.org/ssh2-streams/-/ssh2-streams-0.4.10.tgz",
+      "integrity": "sha512-8pnlMjvnIZJvmTzUIIA5nT4jr2ZWNNVHwyXfMGdRJbug9TpI3kd99ffglgfSWqujVv/0gxwMsDn9j9RVst8yhQ==",
+      "dev": true,
+      "requires": {
+        "asn1": "~0.2.0",
+        "bcrypt-pbkdf": "^1.0.2",
+        "streamsearch": "~0.1.2"
+      }
+    },
+    "streamifier": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/streamifier/-/streamifier-0.1.1.tgz",
+      "integrity": "sha1-l+mNj6TRBdYqJpHR3AfoINuN/E8=",
+      "dev": true
+    },
+    "streamsearch": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-0.1.2.tgz",
+      "integrity": "sha1-gIudDlb8Jz2Am6VzOOkpkZoanxo=",
+      "dev": true
+    },
+    "string-width": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz",
+      "integrity": "sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==",
+      "dev": true,
+      "requires": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.0"
+      }
+    },
+    "string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "~5.1.0"
+      },
+      "dependencies": {
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+          "dev": true
+        }
+      }
+    },
+    "strip-ansi": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+      "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+      "dev": true,
+      "requires": {
+        "ansi-regex": "^5.0.0"
+      }
+    },
+    "supports-color": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
+      "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
+      "dev": true,
+      "requires": {
+        "has-flag": "^4.0.0"
+      }
+    },
+    "tar-stream": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-1.6.2.tgz",
+      "integrity": "sha512-rzS0heiNf8Xn7/mpdSVVSMAWAoy9bfb1WOTYC78Z0UQKeKa/CWS8FOq0lKGNa8DWKAn9gxjCvMLYc5PGXYlK2A==",
+      "dev": true,
+      "requires": {
+        "bl": "^1.0.0",
+        "buffer-alloc": "^1.2.0",
+        "end-of-stream": "^1.0.0",
+        "fs-constants": "^1.0.0",
+        "readable-stream": "^2.3.0",
+        "to-buffer": "^1.1.1",
+        "xtend": "^4.0.0"
+      }
+    },
+    "through": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
+      "dev": true
+    },
+    "tmp": {
+      "version": "0.0.33",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
+      "integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==",
+      "dev": true,
+      "requires": {
+        "os-tmpdir": "~1.0.2"
+      }
+    },
+    "to-buffer": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/to-buffer/-/to-buffer-1.1.1.tgz",
+      "integrity": "sha512-lx9B5iv7msuFYE3dytT+KE5tap+rNYw+K4jVkb9R/asAb+pbBSM17jtunHplhBe6RRJdZx3Pn2Jph24O32mOVg==",
+      "dev": true
+    },
+    "tslib": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.11.1.tgz",
+      "integrity": "sha512-aZW88SY8kQbU7gpV19lN24LtXh/yD4ZZg6qieAJDDg+YBsJcSmLGK9QpnUjAKVG/xefmvJGd1WUmfpT/g6AJGA==",
+      "dev": true
+    },
+    "tweetnacl": {
+      "version": "0.14.5",
+      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
+      "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
+      "dev": true
+    },
+    "type-fest": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.11.0.tgz",
+      "integrity": "sha512-OdjXJxnCN1AvyLSzeKIgXTXxV+99ZuXl3Hpo9XpJAv9MBcHrrJOQ5kV7ypXOuQie+AmWG25hLbiKdwYTifzcfQ==",
+      "dev": true
+    },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
+      "dev": true
+    },
+    "wcwidth": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
+      "integrity": "sha1-8LDc+RW8X/FSivrbLA4XtTLaL+g=",
+      "dev": true,
+      "requires": {
+        "defaults": "^1.0.3"
+      }
+    },
+    "wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
+      "dev": true
+    },
+    "xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "dev": true
+    },
+    "yauzl": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
+      "integrity": "sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=",
+      "dev": true,
+      "requires": {
+        "buffer-crc32": "~0.2.3",
+        "fd-slicer": "~1.1.0"
+      }
+    },
+    "yazl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/yazl/-/yazl-2.5.1.tgz",
+      "integrity": "sha512-phENi2PLiHnHb6QBVot+dJnaAZ0xosj7p3fWl+znIjBDlnMI2PsZCJZ306BPTFOaHf5qdDEI8x5qFrSOBN5vrw==",
+      "dev": true,
+      "requires": {
+        "buffer-crc32": "~0.2.3"
+      }
+    }
+  }
+}

deploy/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "auto-deploy",
+  "version": "1.0.0",
+  "description": "",
+  "main": "upload.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/KeiferJu/auto-deploy.git"
+  },
+  "keywords": [],
+  "author": "KeiferJu <jkf19980216@163.com> (myllcn.com)",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/KeiferJu/auto-deploy/issues"
+  },
+  "homepage": "https://github.com/KeiferJu/auto-deploy#readme",
+  "devDependencies": {
+    "chalk": "^3.0.0",
+    "compressing2": "^1.5.1",
+    "inquirer": "^7.1.0",
+    "node-ssh": "^8.0.0",
+    "ora": "^4.0.3",
+    "shelljs": "^0.8.3"
+  }
+}

deploy/spinner_style.js

@@ -0,0 +1,937 @@
+const style = {
+	"dots": {
+		"interval": 80,
+		"frames": [
+			"⠋",
+			"⠙",
+			"⠹",
+			"⠸",
+			"⠼",
+			"⠴",
+			"⠦",
+			"⠧",
+			"⠇",
+			"⠏"
+		]
+	},
+	"dots2": {
+		"interval": 80,
+		"frames": [
+			"⣾",
+			"⣽",
+			"⣻",
+			"⢿",
+			"⡿",
+			"⣟",
+			"⣯",
+			"⣷"
+		]
+	},
+	"dots3": {
+		"interval": 80,
+		"frames": [
+			"⠋",
+			"⠙",
+			"⠚",
+			"⠞",
+			"⠖",
+			"⠦",
+			"⠴",
+			"⠲",
+			"⠳",
+			"⠓"
+		]
+	},
+	"dots4": {
+		"interval": 80,
+		"frames": [
+			"⠄",
+			"⠆",
+			"⠇",
+			"⠋",
+			"⠙",
+			"⠸",
+			"⠰",
+			"⠠",
+			"⠰",
+			"⠸",
+			"⠙",
+			"⠋",
+			"⠇",
+			"⠆"
+		]
+	},
+	"dots5": {
+		"interval": 80,
+		"frames": [
+			"⠋",
+			"⠙",
+			"⠚",
+			"⠒",
+			"⠂",
+			"⠂",
+			"⠒",
+			"⠲",
+			"⠴",
+			"⠦",
+			"⠖",
+			"⠒",
+			"⠐",
+			"⠐",
+			"⠒",
+			"⠓",
+			"⠋"
+		]
+	},
+	"dots6": {
+		"interval": 80,
+		"frames": [
+			"⠁",
+			"⠉",
+			"⠙",
+			"⠚",
+			"⠒",
+			"⠂",
+			"⠂",
+			"⠒",
+			"⠲",
+			"⠴",
+			"⠤",
+			"⠄",
+			"⠄",
+			"⠤",
+			"⠴",
+			"⠲",
+			"⠒",
+			"⠂",
+			"⠂",
+			"⠒",
+			"⠚",
+			"⠙",
+			"⠉",
+			"⠁"
+		]
+	},
+	"dots7": {
+		"interval": 80,
+		"frames": [
+			"⠈",
+			"⠉",
+			"⠋",
+			"⠓",
+			"⠒",
+			"⠐",
+			"⠐",
+			"⠒",
+			"⠖",
+			"⠦",
+			"⠤",
+			"⠠",
+			"⠠",
+			"⠤",
+			"⠦",
+			"⠖",
+			"⠒",
+			"⠐",
+			"⠐",
+			"⠒",
+			"⠓",
+			"⠋",
+			"⠉",
+			"⠈"
+		]
+	},
+	"dots8": {
+		"interval": 80,
+		"frames": [
+			"⠁",
+			"⠁",
+			"⠉",
+			"⠙",
+			"⠚",
+			"⠒",
+			"⠂",
+			"⠂",
+			"⠒",
+			"⠲",
+			"⠴",
+			"⠤",
+			"⠄",
+			"⠄",
+			"⠤",
+			"⠠",
+			"⠠",
+			"⠤",
+			"⠦",
+			"⠖",
+			"⠒",
+			"⠐",
+			"⠐",
+			"⠒",
+			"⠓",
+			"⠋",
+			"⠉",
+			"⠈",
+			"⠈"
+		]
+	},
+	"dots9": {
+		"interval": 80,
+		"frames": [
+			"⢹",
+			"⢺",
+			"⢼",
+			"⣸",
+			"⣇",
+			"⡧",
+			"⡗",
+			"⡏"
+		]
+	},
+	"dots10": {
+		"interval": 80,
+		"frames": [
+			"⢄",
+			"⢂",
+			"⢁",
+			"⡁",
+			"⡈",
+			"⡐",
+			"⡠"
+		]
+	},
+	"dots11": {
+		"interval": 100,
+		"frames": [
+			"⠁",
+			"⠂",
+			"⠄",
+			"⡀",
+			"⢀",
+			"⠠",
+			"⠐",
+			"⠈"
+		]
+	},
+	"dots12": {
+		"interval": 80,
+		"frames": [
+			"⢀⠀",
+			"⡀⠀",
+			"⠄⠀",
+			"⢂⠀",
+			"⡂⠀",
+			"⠅⠀",
+			"⢃⠀",
+			"⡃⠀",
+			"⠍⠀",
+			"⢋⠀",
+			"⡋⠀",
+			"⠍⠁",
+			"⢋⠁",
+			"⡋⠁",
+			"⠍⠉",
+			"⠋⠉",
+			"⠋⠉",
+			"⠉⠙",
+			"⠉⠙",
+			"⠉⠩",
+			"⠈⢙",
+			"⠈⡙",
+			"⢈⠩",
+			"⡀⢙",
+			"⠄⡙",
+			"⢂⠩",
+			"⡂⢘",
+			"⠅⡘",
+			"⢃⠨",
+			"⡃⢐",
+			"⠍⡐",
+			"⢋⠠",
+			"⡋⢀",
+			"⠍⡁",
+			"⢋⠁",
+			"⡋⠁",
+			"⠍⠉",
+			"⠋⠉",
+			"⠋⠉",
+			"⠉⠙",
+			"⠉⠙",
+			"⠉⠩",
+			"⠈⢙",
+			"⠈⡙",
+			"⠈⠩",
+			"⠀⢙",
+			"⠀⡙",
+			"⠀⠩",
+			"⠀⢘",
+			"⠀⡘",
+			"⠀⠨",
+			"⠀⢐",
+			"⠀⡐",
+			"⠀⠠",
+			"⠀⢀",
+			"⠀⡀"
+		]
+	},
+	"line": {
+		"interval": 130,
+		"frames": [
+			"-",
+			"\\",
+			"|",
+			"/"
+		]
+	},
+	"line2": {
+		"interval": 100,
+		"frames": [
+			"⠂",
+			"-",
+			"–",
+			"—",
+			"–",
+			"-"
+		]
+	},
+	"pipe": {
+		"interval": 100,
+		"frames": [
+			"┤",
+			"┘",
+			"┴",
+			"└",
+			"├",
+			"┌",
+			"┬",
+			"┐"
+		]
+	},
+	"simpleDots": {
+		"interval": 400,
+		"frames": [
+			".  ",
+			".. ",
+			"...",
+			"   "
+		]
+	},
+	"simpleDotsScrolling": {
+		"interval": 200,
+		"frames": [
+			".  ",
+			".. ",
+			"...",
+			" ..",
+			"  .",
+			"   "
+		]
+	},
+	"star": {
+		"interval": 70,
+		"frames": [
+			"✶",
+			"✸",
+			"✹",
+			"✺",
+			"✹",
+			"✷"
+		]
+	},
+	"star2": {
+		"interval": 80,
+		"frames": [
+			"+",
+			"x",
+			"*"
+		]
+	},
+	"flip": {
+		"interval": 70,
+		"frames": [
+			"_",
+			"_",
+			"_",
+			"-",
+			"`",
+			"`",
+			"'",
+			"´",
+			"-",
+			"_",
+			"_",
+			"_"
+		]
+	},
+	"hamburger": {
+		"interval": 100,
+		"frames": [
+			"☱",
+			"☲",
+			"☴"
+		]
+	},
+	"growVertical": {
+		"interval": 120,
+		"frames": [
+			"▁",
+			"▃",
+			"▄",
+			"▅",
+			"▆",
+			"▇",
+			"▆",
+			"▅",
+			"▄",
+			"▃"
+		]
+	},
+	"growHorizontal": {
+		"interval": 120,
+		"frames": [
+			"▏",
+			"▎",
+			"▍",
+			"▌",
+			"▋",
+			"▊",
+			"▉",
+			"▊",
+			"▋",
+			"▌",
+			"▍",
+			"▎"
+		]
+	},
+	"balloon": {
+		"interval": 140,
+		"frames": [
+			" ",
+			".",
+			"o",
+			"O",
+			"@",
+			"*",
+			" "
+		]
+	},
+	"balloon2": {
+		"interval": 120,
+		"frames": [
+			".",
+			"o",
+			"O",
+			"°",
+			"O",
+			"o",
+			"."
+		]
+	},
+	"noise": {
+		"interval": 100,
+		"frames": [
+			"▓",
+			"▒",
+			"░"
+		]
+	},
+	"bounce": {
+		"interval": 120,
+		"frames": [
+			"⠁",
+			"⠂",
+			"⠄",
+			"⠂"
+		]
+	},
+	"boxBounce": {
+		"interval": 120,
+		"frames": [
+			"▖",
+			"▘",
+			"▝",
+			"▗"
+		]
+	},
+	"boxBounce2": {
+		"interval": 100,
+		"frames": [
+			"▌",
+			"▀",
+			"▐",
+			"▄"
+		]
+	},
+	"triangle": {
+		"interval": 50,
+		"frames": [
+			"◢",
+			"◣",
+			"◤",
+			"◥"
+		]
+	},
+	"arc": {
+		"interval": 100,
+		"frames": [
+			"◜",
+			"◠",
+			"◝",
+			"◞",
+			"◡",
+			"◟"
+		]
+	},
+	"circle": {
+		"interval": 120,
+		"frames": [
+			"◡",
+			"⊙",
+			"◠"
+		]
+	},
+	"squareCorners": {
+		"interval": 180,
+		"frames": [
+			"◰",
+			"◳",
+			"◲",
+			"◱"
+		]
+	},
+	"circleQuarters": {
+		"interval": 120,
+		"frames": [
+			"◴",
+			"◷",
+			"◶",
+			"◵"
+		]
+	},
+	"circleHalves": {
+		"interval": 50,
+		"frames": [
+			"◐",
+			"◓",
+			"◑",
+			"◒"
+		]
+	},
+	"squish": {
+		"interval": 100,
+		"frames": [
+			"╫",
+			"╪"
+		]
+	},
+	"toggle": {
+		"interval": 250,
+		"frames": [
+			"⊶",
+			"⊷"
+		]
+	},
+	"toggle2": {
+		"interval": 80,
+		"frames": [
+			"▫",
+			"▪"
+		]
+	},
+	"toggle3": {
+		"interval": 120,
+		"frames": [
+			"□",
+			"■"
+		]
+	},
+	"toggle4": {
+		"interval": 100,
+		"frames": [
+			"■",
+			"□",
+			"▪",
+			"▫"
+		]
+	},
+	"toggle5": {
+		"interval": 100,
+		"frames": [
+			"▮",
+			"▯"
+		]
+	},
+	"toggle6": {
+		"interval": 300,
+		"frames": [
+			"ဝ",
+			"၀"
+		]
+	},
+	"toggle7": {
+		"interval": 80,
+		"frames": [
+			"⦾",
+			"⦿"
+		]
+	},
+	"toggle8": {
+		"interval": 100,
+		"frames": [
+			"◍",
+			"◌"
+		]
+	},
+	"toggle9": {
+		"interval": 100,
+		"frames": [
+			"◉",
+			"◎"
+		]
+	},
+	"toggle10": {
+		"interval": 100,
+		"frames": [
+			"㊂",
+			"㊀",
+			"㊁"
+		]
+	},
+	"toggle11": {
+		"interval": 50,
+		"frames": [
+			"⧇",
+			"⧆"
+		]
+	},
+	"toggle12": {
+		"interval": 120,
+		"frames": [
+			"☗",
+			"☖"
+		]
+	},
+	"toggle13": {
+		"interval": 80,
+		"frames": [
+			"=",
+			"*",
+			"-"
+		]
+	},
+	"arrow": {
+		"interval": 100,
+		"frames": [
+			"←",
+			"↖",
+			"↑",
+			"↗",
+			"→",
+			"↘",
+			"↓",
+			"↙"
+		]
+	},
+	"arrow2": {
+		"interval": 80,
+		"frames": [
+			"⬆️ ",
+			"↗️ ",
+			"➡️ ",
+			"↘️ ",
+			"⬇️ ",
+			"↙️ ",
+			"⬅️ ",
+			"↖️ "
+		]
+  },
+	"arrow3": {
+		"interval": 120,
+		"frames": [
+			"▹▹▹▹▹",
+			"▸▹▹▹▹",
+			"▹▸▹▹▹",
+			"▹▹▸▹▹",
+			"▹▹▹▸▹",
+			"▹▹▹▹▸"
+		]
+  },
+  "arrow4": {
+		"interval": 80,
+		"frames": [
+      "[>            ]",
+      "[>>>          ]",
+      "[>>>>>        ]",
+      "[>>>>>>>      ]",
+      "[>>>>>>>>>    ]",
+      "[>>>>>>>>>>>  ]",
+      "[>>>>>>>>>>>>>]"
+		]
+	},
+	"bouncingBar": {
+		"interval": 80,
+		"frames": [
+			"[    ]",
+			"[=   ]",
+			"[==  ]",
+			"[=== ]",
+			"[ ===]",
+			"[  ==]",
+			"[   =]",
+			"[    ]",
+			"[   =]",
+			"[  ==]",
+			"[ ===]",
+			"[====]",
+			"[=== ]",
+			"[==  ]",
+			"[=   ]"
+		]
+	},
+	"bouncingBall": {
+		"interval": 80,
+		"frames": [
+			"( ●    )",
+			"(  ●   )",
+			"(   ●  )",
+			"(    ● )",
+			"(     ●)",
+			"(    ● )",
+			"(   ●  )",
+			"(  ●   )",
+			"( ●    )",
+			"(●     )"
+		]
+	},
+	"smiley": {
+		"interval": 200,
+		"frames": [
+			"😄 ",
+			"😝 "
+		]
+	},
+	"monkey": {
+		"interval": 300,
+		"frames": [
+			"🙈 ",
+			"🙈 ",
+			"🙉 ",
+			"🙊 "
+		]
+	},
+	"hearts": {
+		"interval": 100,
+		"frames": [
+			"💛 ",
+			"💙 ",
+			"💜 ",
+			"💚 ",
+			"❤️ "
+		]
+	},
+	"clock": {
+		"interval": 100,
+		"frames": [
+			"🕛 ",
+			"🕐 ",
+			"🕑 ",
+			"🕒 ",
+			"🕓 ",
+			"🕔 ",
+			"🕕 ",
+			"🕖 ",
+			"🕗 ",
+			"🕘 ",
+			"🕙 ",
+			"🕚 "
+		]
+	},
+	"earth": {
+		"interval": 180,
+		"frames": [
+			"🌍 ",
+			"🌎 ",
+			"🌏 "
+		]
+	},
+	"moon": {
+		"interval": 80,
+		"frames": [
+			"🌑 ",
+			"🌒 ",
+			"🌓 ",
+			"🌔 ",
+			"🌕 ",
+			"🌖 ",
+			"🌗 ",
+			"🌘 "
+		]
+	},
+	"runner": {
+		"interval": 140,
+		"frames": [
+			"🚶 ",
+			"🏃 "
+		]
+	},
+	"pong": {
+		"interval": 80,
+		"frames": [
+			"▐⠂       ▌",
+			"▐⠈       ▌",
+			"▐ ⠂      ▌",
+			"▐ ⠠      ▌",
+			"▐  ⡀     ▌",
+			"▐  ⠠     ▌",
+			"▐   ⠂    ▌",
+			"▐   ⠈    ▌",
+			"▐    ⠂   ▌",
+			"▐    ⠠   ▌",
+			"▐     ⡀  ▌",
+			"▐     ⠠  ▌",
+			"▐      ⠂ ▌",
+			"▐      ⠈ ▌",
+			"▐       ⠂▌",
+			"▐       ⠠▌",
+			"▐       ⡀▌",
+			"▐      ⠠ ▌",
+			"▐      ⠂ ▌",
+			"▐     ⠈  ▌",
+			"▐     ⠂  ▌",
+			"▐    ⠠   ▌",
+			"▐    ⡀   ▌",
+			"▐   ⠠    ▌",
+			"▐   ⠂    ▌",
+			"▐  ⠈     ▌",
+			"▐  ⠂     ▌",
+			"▐ ⠠      ▌",
+			"▐ ⡀      ▌",
+			"▐⠠       ▌"
+		]
+	},
+	"shark": {
+		"interval": 120,
+		"frames": [
+			"▐|\\____________▌",
+			"▐_|\\___________▌",
+			"▐__|\\__________▌",
+			"▐___|\\_________▌",
+			"▐____|\\________▌",
+			"▐_____|\\_______▌",
+			"▐______|\\______▌",
+			"▐_______|\\_____▌",
+			"▐________|\\____▌",
+			"▐_________|\\___▌",
+			"▐__________|\\__▌",
+			"▐___________|\\_▌",
+			"▐____________|\\▌",
+			"▐____________/|▌",
+			"▐___________/|_▌",
+			"▐__________/|__▌",
+			"▐_________/|___▌",
+			"▐________/|____▌",
+			"▐_______/|_____▌",
+			"▐______/|______▌",
+			"▐_____/|_______▌",
+			"▐____/|________▌",
+			"▐___/|_________▌",
+			"▐__/|__________▌",
+			"▐_/|___________▌",
+			"▐/|____________▌"
+		]
+	},
+	"dqpb": {
+		"interval": 100,
+		"frames": [
+			"d",
+			"q",
+			"p",
+			"b"
+		]
+	},
+	"weather": {
+		"interval": 100,
+		"frames": [
+			"☀️ ",
+			"☀️ ",
+			"☀️ ",
+			"🌤 ",
+			"⛅️ ",
+			"🌥 ",
+			"☁️ ",
+			"🌧 ",
+			"🌨 ",
+			"🌧 ",
+			"🌨 ",
+			"🌧 ",
+			"🌨 ",
+			"⛈ ",
+			"🌨 ",
+			"🌧 ",
+			"🌨 ",
+			"☁️ ",
+			"🌥 ",
+			"⛅️ ",
+			"🌤 ",
+			"☀️ ",
+			"☀️ "
+		]
+	},
+	"christmas": {
+		"interval": 400,
+		"frames": [
+			"🌲",
+			"🎄"
+		]
+	},
+	"grenade": {
+		"interval": 80,
+		"frames": [
+			"،   ",
+			"′   ",
+			" ´ ",
+ 			" ‾ ",
+			"  ⸌",
+			"  ⸊",
+			"  |",
+			"  ⁎",
+			"  ⁕",
+			" ෴ ",
+			"  ⁓",
+			"   ",
+			"   ",
+			"   "
+		]
+	},
+	"point": {
+		"interval": 125,
+		"frames": [
+			"∙∙∙",
+			"●∙∙",
+			"∙●∙",
+			"∙∙●",
+			"∙∙∙"
+		]
+	},
+	"layer": {
+		"interval": 150,
+		"frames": [
+			"-",
+			"=",
+			"≡"
+		]
+	},
+	"betaWave": {
+		"interval": 80,
+		"frames": [
+			"ρββββββ",
+			"βρβββββ",
+			"ββρββββ",
+			"βββρβββ",
+			"ββββρββ",
+			"βββββρβ",
+			"ββββββρ"
+		]
+	}
+}
+module.exports = style;

deploy/upload.js

@@ -0,0 +1,265 @@
+const chalk = require('chalk') //命令行颜色
+const ora = require('ora') // 加载流程动画
+const spinner_style = require('./spinner_style') //加载动画样式
+const shell = require('shelljs') // 执行shell命令
+const node_ssh = require('node-ssh') // ssh连接服务器
+const inquirer = require('inquirer') //命令行交互
+const zipFile = require('compressing2') // 压缩zip
+const fs = require('fs') // nodejs内置文件模块
+const path = require('path') // nodejs内置路径模块
+const CONFIG = require('./config') // 配置
+
+const SSH = new node_ssh();
+let config; // 用于保存 inquirer 命令行交互后选择正式|测试版的配置
+
+//logs
+const defaultLog = log => console.log(chalk.blue(`---------------- ${log} ----------------`));
+const errorLog = log => console.log(chalk.red(`---------------- ${log} ----------------`));
+const successLog = log => console.log(chalk.green(`---------------- ${log} ----------------`));
+
+//文件夹目录
+const distZipPath = path.resolve(__dirname, `./smx-bundle.tar.gz`); //打包后地址(smx-bundle.tar.gz是文件名,不需要更改, 主要在config中配置 PATH 即可)
+
+
+
+//压缩代码
+const zipDist = async () => {
+  const distDir = path.resolve(__dirname, '../' + config.OUTPUT_PATH);
+  const loading = ora(defaultLog('正在压缩代码')).start();
+  loading.spinner = spinner_style.arrow4;
+  try {
+    await zipFile.tgz.compressDir(distDir, distZipPath)
+    successLog('压缩成功!');
+  } catch (error) {
+    errorLog(error);
+    errorLog('压缩失败, 退出程序!');
+    process.exit(); //退出流程
+  }
+  loading.stop();
+}
+
+//连接服务器
+const connectSSH = async () => {
+  const loading = ora(defaultLog('正在连接服务器')).start();
+  loading.spinner = spinner_style.arrow4;
+  try {
+
+    const options = config.privateKey ? {
+      host: config.SERVER_PATH,
+      username: config.SSH_USER,
+      privateKey: config.PRIVATE_KEY, //秘钥登录(推荐) 方式一
+      tryKeyboard: true,
+      port: config.PORT
+    } : {
+      host: config.SERVER_PATH,
+      username: config.SSH_USER,
+      password: config.PASSWORD, // 密码登录 方式二
+      tryKeyboard: true,
+      port: config.PORT
+    }
+
+    await SSH.connect(options);
+    successLog('SSH连接成功!');
+  } catch (error) {
+    errorLog(error);
+    errorLog('SSH连接失败!');
+    process.exit(); //退出流程
+  }
+  loading.stop();
+}
+
+
+
+//传送zip文件到服务器
+const uploadZipBySSH = async () => {
+  //连接ssh
+  await connectSSH();
+  //线上目标文件清空
+  await clearOldFile();
+
+
+
+
+  const loading = ora(defaultLog('准备上传文件')).start();
+  loading.spinner = spinner_style.arrow4;
+  try {
+    await SSH.putFiles([{
+      local: distZipPath,
+      remote: config.PATH + '/smx-bundle.tar.gz'
+    }]); //local 本地 ; remote 服务器 ;
+    successLog('上传成功!');
+    loading.text = '正在解压文件';
+    await runCommand('tar -zxvf  ./smx-bundle.tar.gz'); //解压
+
+    // 是否备份文件
+    if (config.BACKUP) {
+      await runCommand(`mv ${config.PATH}/smx-bundle.tar.gz ${config.PATH}/${config.OLD_NAME}.${new Date().toLocaleDateString()}.tar.gz`); //解压完删除线上压缩包
+    } else {
+      await runCommand(`rm -rf ${config.PATH}/smx-bundle.tar.gz`); //解压完删除线上压缩包
+    }
+
+
+    //将目标目录改名
+    if (config.RENAME) {
+      await runCommand(`mv ${config.PATH}/${config.OLD_NAME}  ${config.PATH}/${config.RENAME}`);
+    }
+
+
+    // 后续扩展命令
+    if (config.EXTENDS) {
+      for (let v of config.EXTENDS) {
+        await runCommand(v)
+      }
+    }
+
+    SSH.dispose(); //断开连接
+  } catch (error) {
+    errorLog(error);
+    errorLog('上传失败!');
+    process.exit(); //退出流程
+  }
+  loading.stop();
+}
+
+
+//清空线上目标目录里的旧文件
+const clearOldFile = async () => {
+
+  try {
+    await runCommand(`rm -r ${config.PATH}/${config.OLD_NAME}`);
+  } catch {
+    // console.log('服务器未发现原始部署文档');
+  }
+  if (config.RENAME) {
+    try {
+      await runCommand(`rm -r ${config.PATH}/${config.RENAME}`);
+    } catch {
+      // console.log('服务器未发现原始部署文档');
+    }
+  }
+
+  if (config.CLEAR_OLDFILES) {
+    const commands = ['ls', 'rm -rf *'];
+    await Promise.all(commands.map(async (it) => {
+      return await runCommand(it);
+    }));
+  }
+}
+
+// 删除本地上传后的打包文件
+const deleteFile = function async () {
+  delPath = distZipPath;
+  try {
+    /**
+     * @des 判断文件或文件夹是否存在
+     */
+    if (fs.existsSync(delPath)) {
+      fs.unlinkSync(delPath);
+    } else {
+      console.log('inexistence path：', delPath);
+    }
+  } catch (error) {
+    console.log('删除本地打包文件失败', error);
+  }
+}
+
+
+
+/**
+ * 线上执行命令
+ * @param {String} command 命令操作 如 ls
+ */
+const runCommand = async (command) => {
+  const result = await SSH.exec(command, [], {
+    cwd: config.PATH
+  })
+  // defaultLog(result);
+}
+
+
+
+
+
+
+
+//----------------------------------------发布程序---------------------------------------------------------//
+const runUploadTask = async () => {
+  console.log(chalk.yellow(`--------->  欢迎使用 Sm@rtMapX前端组 自动部署工具  <---------`));
+  //压缩代码
+  await zipDist();
+
+  //连接服务器上传文件
+  await uploadZipBySSH();
+
+  //删除本地打包文件
+  await deleteFile();
+
+  successLog('大吉大利, 部署成功!');
+  process.exit();
+}
+
+// 开始前的配置检查
+/**
+ * 
+ * @param {Object} conf 配置对象
+ */
+const checkConfig = (conf) => {
+  const checkArr = Object.entries(conf);
+  checkArr.map(it => {
+    const key = it[0];
+    if (key === 'PATH' && conf[key] === '/') { //上传压缩包前会清空目标目录内所有文件
+      errorLog('PATH 不能是服务器根目录!');
+      process.exit(); //退出流程
+    }
+    if (!conf[key]) {
+      errorLog(`配置项 ${key} 不能为空`);
+      process.exit(); //退出流程
+    }
+  })
+}
+//--------------------------------------------------------------------------------------------------//
+
+// 执行交互后 启动发布程序
+inquirer
+  .prompt([{
+    type: 'confirm',
+    message: '请确认您的上传目录及修改目录(RENAME)在服务器上没有被用于存储其他数据,以下部署将会删除这些目录',
+    name: 'confirm',
+  }, {
+    type: 'list',
+    message: '选择您的部署环境',
+    name: 'env',
+    choices: [{
+      name: '测试环境',
+      value: 'development'
+    }, {
+      name: '正式环境',
+      value: 'production'
+    }],
+    when: function (answers) { // 当watch为true的时候才会提问当前问题
+      return answers.confirm
+    }
+  }])
+  .then(answers => {
+    if (answers.confirm) {
+      config = CONFIG[answers.env];
+      if (!config.OUTPUT_PATH) {
+        config.OUTPUT_PATH = 'dist';
+      }
+
+      if (!config.PORT) {
+        config.PORT = 22;
+      }
+
+      const names = config.OUTPUT_PATH.split('/');
+      if (names[names.length - 1]) {
+        config.OLD_NAME = names[names.length - 1];
+      } else {
+        config.OLD_NAME = names[names.length - 2];
+      }
+
+
+      checkConfig(config); // 检查
+      runUploadTask(); // 发布
+    }
+  });

docs/.gitignore

@@ -0,0 +1,5 @@
+.DS_Store
+node_modules
+yarn-error.log
+/cypress/screenshots/
+/__sapper__/

docs/README.md

@@ -0,0 +1,128 @@
+
+
+
+# svelma-pro
+
+基于开源项目[svelma](https://github.com/c0bra/svelma) 扩展和修改.
+
+原项目组件比较少,存在一些小bug,所以在原有的组件库的基础上，扩展了一些常见的组件,并对发现的一些bug进行了修改，对原有的组件功能,事件以及用户配置进行更人性化的修改和扩展。
+
+
+# 文档
+
+[文档及Demo](http://172.17.60.20:380/svelma-pro/)
+
+# 快速开始
+
+### 1. 通过template创建svelte应用(或者sapper应用)
+
+[https://github.com/sveltejs/template](sveltejs/template) 是一个svelte的初始化模板. [degit](https://www.npmjs.com/package/degit)这个脚手架可以帮你获取它:
+
+    $ npx degit sveltejs/template my-svelma-project
+    $ cd my-svelma-project
+    $ npm install
+
+
+### 2. 引入bulma样式及svelma-pro组件等依赖
+
+#### bulma and svelma-pro
+
+    $ npm install --save bulma svelma-pro
+
+#### scss
+
+     $ npm install --save-dev svelte-preprocess autoprefixer node-sass sass
+
+
+### 3. config
+在你的rollup或者webpack配置文件中添加scss支持:
+
+```js
+// rollup配置  rollup.config.js
+import sveltePreprocess from 'svelte-preprocess';
+
+// ...
+
+const preprocess = sveltePreprocess({
+  scss: {
+    includePaths: ['src'],
+  },
+  postcss: {
+    plugins: [require('autoprefixer')],
+  },
+});
+
+export default {
+  // ... 
+  plugins: [
+    svelte({
+      // ...
+      preprocess: preprocess,
+    })
+  ]
+}
+```
+
+```js
+// webpack配置  webpack.config.js
+import sveltePreprocess from 'svelte-preprocess';
+
+// ...
+const preprocess = sveltePreprocess({
+  scss: {
+    includePaths: ['src'],
+  },
+  postcss: {
+    plugins: [require('autoprefixer')],
+  },
+});
+
+module.export = {
+  // ... 
+  module: {
+    rules: [
+      {
+        test: /.(svelte|html)$/,
+        use: {
+          loader: 'svelte-loader',
+          options: {
+            preprocess, 
+            // ...
+          }
+        }
+      },
+    ]
+  },
+  ]
+}
+```
+
+### 4. 引入Bulma的CSS样式和svelma-pro组件
+
+```html
+
+<!-- main.js or client.js(sapper) -->
+<script>
+  import 'bulma/css/bulma.css'
+</script>
+```
+
+### 5. 引入 [Font Awesome](https://fontawesome.com/) 图标:
+
+在你的主HTML配置CDN页面:
+
+```html
+<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"></link>
+```
+
+...或者通过npm包:
+
+    $ npm install --save @fortawesome/fontawesome-free
+
+```html
+ <!-- main.js or client.js(sapper) -->
+<script>
+  import 'bulma/css/bulma.css'
+  import '@fortawesome/fontawesome-free/css/all.css'
+</script>
+```

docs/appveyor.yml

@@ -0,0 +1,18 @@
+version: "{build}"
+
+shallow_clone: true
+
+init:
+  - git config --global core.autocrlf false
+
+build: off
+
+environment:
+  matrix:
+    # node.js
+    - nodejs_version: stable
+
+install:
+  - ps: Install-Product node $env:nodejs_version
+  - npm install cypress
+  - npm install

docs/cypress.json

@@ -0,0 +1,4 @@
+{
+	"baseUrl": "http://localhost:3000",
+	"video": false
+}

docs/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

docs/cypress/integration/spec.js

@@ -0,0 +1,19 @@
+describe('Sapper template app', () => {
+	beforeEach(() => {
+		cy.visit('/')
+	});
+
+	it('has the correct <h1>', () => {
+		cy.contains('h1', 'Great success!')
+	});
+
+	it('navigates to /about', () => {
+		cy.get('nav a').contains('about').click();
+		cy.url().should('include', '/about');
+	});
+
+	it('navigates to /blog', () => {
+		cy.get('nav a').contains('blog').click();
+		cy.url().should('include', '/blog');
+	});
+});

docs/cypress/plugins/index.js

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

docs/cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This is will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

docs/cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

docs/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "svelma-site",
+  "description": "Docs and examples for Svelma",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "sapper dev",
+    "build": "sapper build --legacy",
+    "export": "sapper export --legacy",
+    "start": "node __sapper__/build"
+  },
+  "dependencies": {
+    "bulma": "^0.7.5",
+    "clipboard": "^2.0.4",
+    "compression": "^1.7.1",
+    "highlight.js": "^9.15.6",
+    "lodash": "^4.17.15",
+    "polka": "^0.5.0",
+    "sirv": "^0.4.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
+    "@babel/plugin-transform-runtime": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/runtime": "^7.0.0",
+    "@jackfranklin/rollup-plugin-markdown": "^0.2.0",
+    "chokidar": "^3.0.1",
+    "codesandbox": "^2.1.6",
+    "npm-run-all": "^4.1.5",
+    "rollup": "^1.0.0",
+    "rollup-plugin-babel": "^4.0.2",
+    "rollup-plugin-commonjs": "^9.1.6",
+    "rollup-plugin-includepaths": "^0.2.3",
+    "rollup-plugin-json": "^4.0.0",
+    "rollup-plugin-node-resolve": "^4.0.0",
+    "rollup-plugin-replace": "^2.0.0",
+    "rollup-plugin-scss": "^1.0.1",
+    "rollup-plugin-svelte": "^5.0.1",
+    "rollup-plugin-terser": "^4.0.4",
+    "sapper": "^0.27.4"
+  }
+}

docs/rollup.config.js

@@ -0,0 +1,131 @@
+import path from 'path'
+import { promisify } from 'util'
+import { exec as execRaw } from 'child_process'
+import alias from 'rollup-plugin-alias'
+import autoPreprocess from 'svelte-preprocess'
+import babel from 'rollup-plugin-babel'
+import commonjs from 'rollup-plugin-commonjs'
+import json from 'rollup-plugin-json'
+import resolve from 'rollup-plugin-node-resolve'
+import replace from 'rollup-plugin-replace'
+import svelte from 'rollup-plugin-svelte'
+import { terser } from 'rollup-plugin-terser'
+import config from 'sapper/config/rollup.js'
+import pkg from './package.json'
+import markdown from '@jackfranklin/rollup-plugin-markdown'
+
+const exec = promisify(execRaw)
+const mode = process.env.NODE_ENV
+const dev = mode === 'development'
+const legacy = !!process.env.SAPPER_LEGACY_BUILD
+
+export default {
+  client: {
+    watch: { chokidar: true },
+    input: config.client.input(),
+    output: config.client.output(),
+    plugins: [
+      replace({
+        'process.browser': true,
+        'process.env.NODE_ENV': JSON.stringify(mode),
+      }),
+      alias({
+        resolve: ['.js', '.mjs', '.html', '.svelte'],
+        '~': path.join(__dirname, '../src'),
+        'svelma-pro': '../src/index.js',
+      }),
+      // scss(),
+      svelte({
+        dev,
+        hydratable: true,
+        emitCss: true,
+        preprocess: autoPreprocess({
+          postcss: {
+            plugins: [require('autoprefixer')()],
+          },
+        })
+      }),
+      resolve(),
+      commonjs(),
+      json(),
+      markdown(),
+      legacy &&
+        babel({
+          extensions: ['.js', '.mjs', '.html', '.svelte'],
+          runtimeHelpers: true,
+          exclude: ['node_modules/@babel/**'],
+          presets: [
+            [
+              '@babel/preset-env',
+              {
+                targets: '> 0.25%, not dead',
+              },
+            ],
+          ],
+          plugins: [
+            '@babel/plugin-syntax-dynamic-import',
+            [
+              '@babel/plugin-transform-runtime',
+              {
+                useESModules: true,
+              },
+            ],
+          ],
+        }),
+
+      !dev &&
+        terser({
+          module: true,
+        })
+    ],
+  },
+
+  server: {
+    watch: { chokidar: true },
+    input: config.server.input(),
+    output: config.server.output(),
+    plugins: [
+      replace({
+        'process.browser': false,
+        'process.env.NODE_ENV': JSON.stringify(mode),
+      }),
+      alias({
+        resolve: ['.js', '.mjs', '.html', '.svelte'],
+        '~': path.join(__dirname, '../src'),
+        'svelma-pro': '../src/index.js',
+      }),
+      // scss(),
+      svelte({
+        generate: 'ssr',
+        dev,
+        preprocess: autoPreprocess({
+          postcss: {
+            plugins: [require('autoprefixer')()],
+          },
+        })
+      }),
+      resolve(),
+      commonjs(),
+      json(),
+      markdown()
+    ],
+    external: Object.keys(pkg.dependencies).concat(
+      require('module').builtinModules || Object.keys(process.binding('natives'))
+    ),
+  },
+
+  serviceworker: {
+    watch: { chokidar: true },
+    input: config.serviceworker.input(),
+    output: config.serviceworker.output(),
+    plugins: [
+      resolve(),
+      replace({
+        'process.browser': true,
+        'process.env.NODE_ENV': JSON.stringify(mode),
+      }),
+      commonjs(),
+      !dev && terser(),
+    ],
+  },
+}

docs/src/client.js

@@ -0,0 +1,14 @@
+import * as sapper from '@sapper/app';
+import hljs from 'highlight.js/lib/highlight';
+import bash from 'highlight.js/lib/languages/bash';
+import xml from 'highlight.js/lib/languages/xml';
+import javascript from 'highlight.js/lib/languages/javascript';
+import "../../src/svelma-pro.css";
+
+hljs.registerLanguage('bash', bash);
+hljs.registerLanguage('xml', xml);
+hljs.registerLanguage('javascript', javascript);
+
+sapper.start({
+	target: document.querySelector('#sapper')
+});

docs/src/components/Code.svelte

@@ -0,0 +1,110 @@
+<script>
+  import Clipboard from 'clipboard'
+  import hljs from 'highlight.js/lib/highlight'
+  import { beforeUpdate, tick, onMount, onDestroy } from 'svelte'
+
+  export let lang = 'js'
+  export let code = ''
+  export let showCopy = true
+  let _code = ''
+  let button
+  let codeElm
+  let clip
+  let show = false
+  let compiled
+  let observer
+
+  $: {
+    _code = code || (codeElm && codeElm.innerHTML) || _code
+    updateCode(code)
+  }
+
+  function updateCode(newCode) {
+    if (!newCode) return
+    code = newCode.trim()
+    compiled = hljs.highlightAuto(code, [lang]).value
+  }
+
+  onMount(async () => {
+    if (codeElm.innerHTML) code = codeElm.innerHTML
+
+    if (button) {
+      clip = new Clipboard(button, {
+        text: trigger => code,
+      })
+    }
+
+    const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
+    observer = new MutationObserver(() => {
+      if (codeElm && codeElm.innerHTML) updateCode(codeElm.innerHTML)
+    })
+    observer.observe(codeElm, {
+      subtree: true,
+      childList: true,
+      characterData: true,
+    })
+
+    await tick()
+
+    show = true
+  })
+
+  onDestroy(() => {
+    if (clip) clip.destroy()
+    if (observer) observer.disconnect()
+  })
+</script>
+
+<style>
+  .codeview {
+    padding: 0;
+  }
+
+  .codeview:not(:last-child) {
+    margin-bottom: 1.5rem;
+  }
+
+  figure.highlight {
+    position: relative;
+  }
+
+  .button-container {
+    position: absolute;
+    right: 0;
+  }
+
+  /* code {
+    padding: 1.25rem 1.5rem;
+  } */
+
+  pre.hidden {
+    visibility: hidden;
+    height: 0px;
+    padding: 0px;
+  }
+
+  pre.show {
+    /* display: block; */
+    visibility: visible;
+  }
+</style>
+
+<div class="codeview">
+  <figure class="highlight is-expanded">
+    {#if showCopy}
+      <div class="button-container">
+        <button class="button is-text is-small copy-code" bind:this={button}>Copy</button>
+      </div>
+    {/if}
+    <pre class="hidden">
+      <code class={lang} bind:this={codeElm}>
+        <slot />
+      </code>
+    </pre>
+    <pre class:hidden={!show} class:show>
+      <code>
+        {@html compiled}
+      </code>
+    </pre>
+  </figure>
+</div>

docs/src/components/CodepenButton.svelte

@@ -0,0 +1,113 @@
+<script>
+  import { getParameters } from 'codesandbox/lib/api/define'
+
+  export let title = 'Svelma Example'
+  export let code
+
+  let form
+
+  function extractTag(code, tag) {
+    let start = code.indexOf(`<${tag}>`)
+    if (start === -1) return
+
+    start = start + tag.length + 2
+    const end = code.lastIndexOf(`<\/${tag}>`)
+
+    const extracted = code.substring(start, end)
+
+    return extracted
+  }
+
+  function extractHTML(code) {
+    code = code.replace(/<script>[\s\S]*<\/script>/im, '')
+    code = code.replace(/<script>[\s\S]*<\/style>/im, '')
+
+    return code
+  }
+
+  $: value = getParameters({
+    files: {
+      'sandbox.config.json': {
+        content: {
+          template: 'svelte',
+        },
+      },
+      'index.html': {
+        content: `<html>
+  <body>
+    <link
+      id="external-css"
+      rel="stylesheet"
+      type="text/css"
+      href="https://unpkg.com/bulma/css/bulma.min.css"
+      media="all"
+    />
+    <link
+      id="external-css2"
+      rel="stylesheet"
+      type="text/css"
+      href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
+      media="all"
+    />
+  </body>
+</html>`,
+      },
+      'index.js': {
+        content: `import App from "./App.svelte";
+
+const app = new App({
+  target: document.body
+});
+
+export default app;`,
+      },
+      'App.svelte': { content: code },
+      'package.json': {
+        content: {
+          name: 'svelma-example',
+          version: '1.0.0',
+          devDependencies: {
+            'npm-run-all': '^4.1.5',
+            rollup: '^1.10.1',
+            'rollup-plugin-commonjs': '^9.3.4',
+            'rollup-plugin-node-resolve': '^4.2.3',
+            'rollup-plugin-svelte': '^5.0.3',
+            'rollup-plugin-terser': '^4.0.4',
+            'sirv-cli': '^0.3.1',
+          },
+          dependencies: {
+            svelte: 'latest',
+            svelma: 'latest',
+            '@fortawesome/fontawesome-free': 'latest',
+            bulma: 'latest',
+          },
+          scripts: {
+            build: 'rollup -c',
+            autobuild: 'rollup -c -w',
+            dev: 'run-p start:dev autobuild',
+            start: 'sirv public',
+            'start:dev': 'sirv public --dev',
+          },
+        },
+      },
+    },
+  })
+
+  function open() {
+    form.submit()
+  }
+</script>
+
+<style>
+  .slot-wrap {
+    cursor: pointer;
+    pointer-events: auto;
+  }
+</style>
+
+<form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank" bind:this={form}>
+  <input type="hidden" name="parameters" {value} />
+  <div class="slot-wrap" on:click={open}>
+    <slot />
+  </div>
+</form>

docs/src/components/DocHeader.svelte

@@ -0,0 +1,18 @@
+<script>
+  export let title
+  export let subtitle
+
+  $: newTitle = `${title} | Svelma`
+</script>
+
+<svelte:head>
+  <meta property="og:type" content="article" />
+  <meta property="og:title" content={newTitle} />
+  <meta property="og:description" content={subtitle} />
+</svelte:head>
+
+<!-- Doc for a Svelma Component -->
+<header class="header">
+  <h1 class="title">{title}</h1>
+  <h2 class="subtitle">{subtitle}</h2>
+</header>

docs/src/components/Example.svelte

@@ -0,0 +1,194 @@
+<script>
+  import { onMount } from 'svelte'
+  import { Button } from 'svelma-pro'
+  import Code from './Code.svelte'
+  import CodepenButton from './CodepenButton.svelte'
+
+  export let lang = 'xml'
+  export let code
+  export let horizontal = false
+
+  let showCode = false
+
+  function show() {
+    showCode = true
+  }
+
+  function hide(e) {
+    e.stopPropagation()
+    showCode = false
+  }
+</script>
+
+<style lang="scss">
+  .snippet {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: stretch;
+    border-radius: 6px;
+    border-top-left-radius: 0;
+    border: 2px solid #f5f5f5;
+    flex-direction: row;
+    margin-top: 3em;
+
+    &.horizontal {
+      flex-direction: column;
+    }
+  }
+
+  @media screen and (max-width: 1087px) {
+    .snippet {
+      flex-direction: column;
+    }
+  }
+
+  .preview {
+    min-width: 50%;
+    padding: 1.5rem;
+  }
+
+  .code {
+    min-width: 50%;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    border-radius: 0 6px 6px 0;
+    border-left: 1px solid #f5f5f5;
+    overflow: hidden;
+    position: relative;
+    /* cursor: pointer;
+    pointer-events: auto; */
+
+    /*
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      opacity: 0.8;
+      background-color: white;
+      content: '<> Show Code';
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      z-index: 1;
+      font-size: 0.75rem;
+    }*/
+
+    /*
+    &:hover::before {
+      background-color: #ffdd57;
+    }
+
+    & :global(pre),
+    & :global(pre code) {
+      overflow: hidden;
+    }
+
+    &.show-code {
+      cursor: auto;
+
+      &::before {
+        content: inherit;
+      }
+
+      & :global(figure) {
+        margin-bottom: 3em;
+      }
+
+      & :global(pre) {
+        overflow: auto;
+      }
+    }*/
+  }
+
+  .snippet::before {
+    background: #ffdd57;
+    border-radius: 2px 2px 0 0;
+    bottom: 100%;
+    color: rgba(0, 0, 0, 0.7);
+    content: 'Example';
+    display: inline-block;
+    font-size: 7px;
+    font-weight: 700;
+    left: -1px;
+    letter-spacing: 1px;
+    margin-left: -1px;
+    padding: 3px 5px;
+    position: absolute;
+    text-transform: uppercase;
+    vertical-align: top;
+  }
+
+  .snippet::before {
+    content: 'Snippet';
+    align-items: stretch;
+    display: flex;
+  }
+
+  .codepen-button {
+    position: absolute;
+    display: inline-flex;
+    background: #ffdd57;
+    border-radius: 4px 4px 0 0;
+    bottom: 100%;
+    font-size: 7px;
+    font-weight: 700;
+    right: -1px;
+    padding: 0 0 0 8px;
+    vertical-align: top;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    line-height: 17px;
+  }
+
+  /*.code {
+    :global(.codeview) {
+      height: 100%;
+
+      :global(figure) {
+        height: 100%;
+
+        :global(pre:not(.hidden)) {
+          height: 100%;
+        }
+      }
+    }
+  }*/
+
+  :global(.codeview) {
+    margin-bottom: 0 !important;
+  }
+
+  :global(.btn-show-code) {
+    align-self: center;
+    margin: 2em 0 0.5em;
+    position: absolute;
+    bottom: 0;
+    background: none;
+  }
+</style>
+
+<div class="snippet" class:horizontal>
+  <CodepenButton {code}>
+    <div class="codepen-button">
+      Codesandbox
+      <i class="icon is-small fas fa-external-link-alt" />
+    </div>
+  </CodepenButton>
+  <div class="preview">
+    <slot name="preview" />
+  </div>
+  <div class="code">
+    <!-- class:show-code={showCode} on:click={show} -->
+    <Code {lang} {code} />
+
+    <!-- {#if showCode}
+      <Button class="btn-show-code is-rounded is-outline has-text-grey-light" on:click|stopPropagation={hide}>
+        Hide Code
+      </Button>
+    {/if} -->
+  </div>
+</div>

docs/src/components/JSDoc.svelte

@@ -0,0 +1,93 @@
+<script>
+  export let jsdoc
+  export let showEvent = false
+  export let showHeader = true
+</script>
+
+<style>
+  @media screen and (max-width: 1087px) {
+    .table-wrapper {
+      overflow-x: scroll;
+    }
+  }
+</style>
+
+{#if jsdoc}
+  {#if showHeader}<hr class="is-medium" />{/if}
+
+  <section>
+    {#if showHeader}<h2 class="title is-4">API</h2>{/if}
+
+    <div class="table-wrapper">
+      <table class="table is-fullwidth">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Description</th>
+            <th>Type</th>
+            <th>Values</th>
+            <th>Default</th>
+          </tr>
+        </thead>
+        <tbody>
+          {#each jsdoc as doc}
+          {#if !doc.isEvent}
+            <tr>
+              <td>
+                <code>{doc.name}</code>
+              </td>
+              <td>
+                {@html doc.description}{#if doc.optional}, optional{/if}
+              </td>
+              <td>{(doc.type || []).join(', ')}</td>
+              <td>
+                {@html doc.values || '&mdash;'}
+              </td>
+              <td>
+                {@html ('defaultvalue' in doc && `<code>${doc.defaultvalue}</code>`) || '&mdash;'}
+              </td>
+            </tr>
+             {/if}
+          {/each}
+        </tbody>
+      </table>
+    </div>
+  </section>
+{/if}
+{#if showEvent}
+  {#if showHeader}<hr class="is-medium" />{/if}
+
+  <section>
+    {#if showHeader}<h2 class="title is-4">EVENT</h2>{/if}
+
+    <div class="table-wrapper">
+      <table class="table is-fullwidth">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Parameters</th>
+            <th>Description</th>
+          </tr>
+        </thead>
+        <tbody>
+          {#each jsdoc as doc}
+          {#if doc.isEvent}
+            <tr>
+              <td>
+                <code>{doc.name}</code>
+              </td>
+              <td>
+                {@html doc.values || '&mdash;'}
+              </td>
+              <td>
+                {@html doc.description}{#if doc.optional}, optional{/if}
+              </td>
+          
+            </tr>
+            {/if}
+          {/each}
+        </tbody>
+      </table>
+    </div>
+  </section>
+{/if}

docs/src/components/MDDoc.svelte

@@ -0,0 +1,42 @@
+<script>
+  export let html;
+</script>
+
+<style lang="scss">
+  :global(#smx-md-doc) {
+    :global(h1, h2, h3, h4, h5, h6) {
+      font-size: initial;
+      font-weight: bold;
+      margin: 30px 0;
+    }
+
+    :global(table) {
+      width: 100%;
+      background: #fff;
+      border: solid 1px #ddd;
+      margin-bottom: 1.25rem;
+      table-layout: auto;
+    }
+
+    :global(td, th) {
+      border: 1px solid #dbdbdb;
+      border-width: 0 0 1px;
+      padding: 0.5em 0.75em;
+      vertical-align: top;
+    }
+
+    :global(ul) {
+      font-family: inherit;
+      font-size: 1rem;
+      line-height: 1.6;
+      list-style-position: outside;
+      margin-bottom: 1.25rem;
+      margin-left: 1.1rem;
+      list-style: initial;
+    }
+  }
+</style>
+
+<div id="smx-md-doc">
+  {@html html}
+</div>

docs/src/components/Nav.svelte

@@ -0,0 +1,27 @@
+<script>
+  export let segment
+
+</script>
+
+<style>
+  img.logo {
+    padding: 0 10px;
+    vertical-align: top;
+  }
+
+  .brand {
+    text-transform: uppercase;
+    font-weight: bold;
+  }
+</style>
+
+<nav id="navbar" class="navbar has-shadow is-spaced">
+  <div class="container" style="height: 50px;min-height: 50px">
+    <div class="navbar-brand">
+      <a href="/" class="navbar-item brand">
+        <!-- <img src="svelma-pro-logo.svg" class="logo" alt="Svelma: Bulma components for Svelte" /> -->
+        svelma-pro
+      </a>
+    </div>
+  </div>
+</nav>

docs/src/components/Sidebar.svelte

@@ -0,0 +1,141 @@
+<script context="module">
+  export async function preload({ params, query }) {
+    // const res = await this.fetch('')
+  }
+</script>
+
+<script>
+  import difference from 'lodash/difference'
+  import { Svelma as Components } from 'svelma-pro'
+
+  const formComponents = ['Input', 'Field', 'Switch'].sort() // Form
+  const omittedComponents = ['Tab', 'NavItem', 'NavLayout', 'CollapseItem'] // 子选项不显示
+  let components = ['Form', ...Object.keys(Components)].sort()
+  let newComponents = ['Timepicker', 'Datepicker', 'ColorPicker', 'Layout', 'Tip', 'Nav', 'Select', 'Slider', 'Stable', 'District'] // 新组件
+  components = difference(components, [...formComponents, ...omittedComponents])
+
+  const bulmaElements = ['Media', 'Table', 'Hero', 'Tiles'].sort()
+</script>
+
+<style lang="scss">
+  .sidebar {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    width: 16rem;
+    padding: 3rem 1rem;
+    background: #f5f5f5;
+    overflow-y: auto;
+    max-height: calc(100vh - 2rem - 50px);
+  }
+
+  .sidebar > ul {
+    margin-bottom: 1.5em;
+    margin-top: 0;
+
+    ul {
+      margin-left: 1.5em;
+    }
+  }
+
+  .sidebar li {
+    font-weight: 600;
+  }
+
+  .sidebar-label {
+    margin-bottom: 0.5em;
+    color: #7a7a7a;
+    font-size: 0.9em;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+  }
+
+  .sidebar-bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 50%;
+    background: #f5f5f5;
+    // min-height: calc(100vh - 4rem);
+    height: 100%;
+    z-index: -1;
+    width: 100%;
+    z-index: -1;
+  }
+
+  @media screen and (max-width: 1087px) {
+    .sidebar {
+      order: 2;
+      width: 100%;
+      overflow-y: auto;
+      max-height: calc(100vh - 2rem - 50px);
+    }
+  }
+
+  .new {
+    color: #fff;
+    background: red;
+    font-size: 12px;
+    border-radius: 3px;
+    display: inline-block;
+    transform: scale(0.8);
+    padding: 1px;
+  }
+</style>
+
+<div class="sidebar-bg" />
+<aside class="sidebar">
+  <p class="sidebar-label">Installation</p>
+  <ul>
+    <li>
+      <a href="install">Start</a>
+    </li>
+  </ul>
+  <p class="sidebar-label">Bulma Elements</p>
+  <ul>
+    <li>
+      <a href="bulma/intro">Intro</a>
+    </li>
+    {#each bulmaElements as c}
+      <li>
+        <a href="bulma/{c.toLowerCase()}">{c}</a>
+      </li>
+    {/each}
+  </ul>
+  <p class="sidebar-label">Svelma Components</p>
+  <ul>
+    {#each components as c}
+      <li>
+        {#if c === 'Form'}
+          <p>{c}</p>
+          <ul>
+            {#each formComponents as fc}
+              <li>
+                <a href="components/{fc.toLowerCase()}">
+                   {fc}
+                  {#if newComponents.includes(fc)}
+                    <span class="new">New</span>
+                  {/if}
+                </a>
+              </li>
+            {/each}
+          </ul>
+        {:else}
+          <a href="components/{c.toLowerCase()}">
+             {c}
+            {#if newComponents.includes(c)}
+              <span class="new">New</span>
+            {/if}
+          </a>
+        {/if}
+      </li>
+    {/each}
+    <!-- <li>
+      <a href="/components/collapse">Collapse</a>
+    </li>
+    <li>
+      <a href="/components/icon">Icon</a>
+    </li> -->
+  </ul>
+</aside>

docs/src/mddocs/stable.md

@@ -0,0 +1,207 @@
+
+
+## 参数
+
+| Option            | Type         | Description                                    |
+| ----------------- | ------------ | ---------------------------------------------- |
+| `columns`         | Object[]     | 列配置                |
+| `rows`            | Object[]     | 行数据                              |
+| `sortBy`          | String       | 需要排序列key                                 |
+| `sortOrder`       | Number       | 排序 `1` = 升序, `-1` 降序             |
+| `clickCol`        | function     | event listener/callback                        |
+| `clickRow`        | function     | event listener/callback                        |
+| `clickCell`       | function     | event listener/callback                        |
+| `classNameTable`  | String/Array |  class name(s) for table element     |
+| `classNameThead`  | String/Array |  class name(s) for thead element     |
+| `classNameTbody`  | String/Array |  class name(s) for tbody element     |
+| `classNameSelect` | String/Array |  class name(s) for select elements   |
+| `classNameRow`    | String/Array |  class name(s) for row elements      |
+| `classNameCell`   | String/Array |  class name(s) for cell elements     |
+| `fullwidth`   | Boolean | 是否全宽度   |
+| `bordered`   | Boolean | 为所有单元格添加边框   |
+| `hoverable`   | Boolean | 在每行上添加悬停效果    |
+| `striped`   | Boolean | 在表中添加条纹    |
+| `narrow`   | Boolean | 使单元格变窄     |
+| `custom`   | Boolean | 自定义列    |
+| `tWidth`   | String | 宽度   |
+| `tHeight`   | String | 高度    |
+| `fixedHeader`   | Boolean | 固定表头,固定表头时需要设置父级div高度或者自定义`tHeight`。    |
+| `activedRowKey`   | Array | 选中key    |
+| `key`   | String | 唯一id，设置激活行时必须设置    |
+
+
+### Events
+
+点击事件
+
+- clickCell: `event`, `col`, `key`
+- clickRow: `event`, `row`
+- clickCol: `event`, `row`, `key`
+- checked: `event`,`checkbox`
+
+_‡_ 字段允许双向绑定
+
+
+
+## 列配置
+
+| Option            | Type           | Description                                                                             |
+| ----------------- | -------------- | --------------------------------------------------------------------------------------- |
+| `key`             | String         | 数据唯一key                                                     |
+| `title`           | String         | 显示标题                                                                        |
+| `[class]`         | String         | 单元格指定样式类名                                                       |
+| `[sortable]`      | Boolean        | 是否开启排序                                    |
+| `[filterOptions]` | Array/Function | _optional_ array of objects with `name` and `value`. Function is provided array of rows |
+| `[filterValue]`   | String         | 要过滤的值，通常与值相同                                   |
+| `[headerClass]`   | String         | 标题头指定样式类名                                                   |
+| `[renderValue]`   | Function       | 自定义呈现渲染html                                   |
+| `component`   | Boolean | 展示自定义组件,目前只允许针对某一列进行设置   |
+
+
+## 样式配置
+在引入bluma的scss样式下，我们可以使用变量来控制表格风格样式。
+
+| Name            | Type           | Default value  | 	Computed value  |
+| --------------------------------------------------------------------------------------- | -------------- |  -------------- | -------------- | 
+| $table-color	| color	| $text-strong	| hsl(0, 0%, 21%) |
+| $table-background-color|	color|	$scheme-main|	hsl(0, 0%, 100%)|
+| $table-cell-border	|size	|1px solid $border	||
+| $table-cell-border-width	|size|	0 0 1px	||
+| $table-cell-padding	|size	|0.5em 0.75em	||
+| $table-cell-heading-color|	color|	$text-strong|	hsl(0, 0%, 21%)|
+| $table-head-cell-border-width|	size|	0 0 2px	||
+| $table-head-cell-color|	color	|$text-strong|	hsl(0, 0%, 21%)|
+| $table-foot-cell-border-width|	size|	2px 0 0	||
+| $table-foot-cell-color	|color|	$text-strong|	hsl(0, 0%, 21%)|
+| $table-head-background-color|	string	|transparent	||
+| $table-body-background-color	|string	|transparent	||
+| $table-foot-background-color|	string	|transparent	||
+| $table-row-hover-background-color	|color	|$scheme-main-bis	|hsl(0, 0%, 98%)|
+| $table-row-active-background-color	|color	|$primary	|hsl(171, 100%, 41%)|
+| $table-row-active-color|	color	|$primary-invert|	#fff|
+| $table-striped-row-even-background-color	| color	|$scheme-main-bis	|hsl(0, 0%, 98%)|
+| $table-striped-row-even-hover-background-color |	color	|$scheme-main-ter|	hsl(0, 0%, 96%)|
+| $table-colors |	function|	$colors	|mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)|
+
+
+
+## 案例
+
+```html
+<script>
+  import Table from "../../Table";
+  const rows = [
+    /** 数据体 */
+  ];
+  const columns = [
+    /** 列设置 */
+  ];
+</script>
+
+<Table columns="{columns}" rows="{rows}"></Table>
+```
+## Sample Data and config
+
+```js
+// define some sample data...
+const rows = [
+  { id: 1, first_name: "Marilyn", last_name: "Monroe", gender: "female" },
+  { id: 2, first_name: "Abraham", last_name: "Lincoln", gender: "male" },
+  { id: 3, first_name: "Mother", last_name: "Teresa", gender: "female" },
+  { id: 4, first_name: "John F.", last_name: "Kennedy", gender: "male" },
+  { id: 5, first_name: "Martin Luther", last_name: "King", gender: "male" },
+  { id: 6, first_name: "Nelson", last_name: "Mandela", gender: "male" },
+  { id: 7, first_name: "Winston", last_name: "Churchill", gender: "male" },
+  { id: 8, first_name: "George", last_name: "Soros", gender: "male" },
+  { id: 9, first_name: "Bill", last_name: "Gates", gender: "male" },
+  { id: 10, first_name: "Muhammad", last_name: "Ali", gender: "male" },
+  { id: 11, first_name: "Mahatma", last_name: "Gandhi", gender: "male" },
+  { id: 12, first_name: "Margaret", last_name: "Thatcher", gender: "female" },
+  { id: 13, first_name: "Christopher", last_name: "Columbus", gender: "male" },
+  { id: 14, first_name: "Charles", last_name: "Darwin", gender: "male" },
+  { id: 15, first_name: "Elvis", last_name: "Presley", gender: "male" },
+  { id: 16, first_name: "Albert", last_name: "Einstein", gender: "male" },
+  { id: 17, first_name: "Paul", last_name: "McCartney", gender: "male" },
+  { id: 18, first_name: "Queen", last_name: "Victoria", gender: "female" },
+  { id: 19, first_name: "Pope", last_name: "Francis", gender: "male" }
+  // etc...
+];
+
+// define column configs
+const columns = [
+  {
+    key: "id",
+    title: "ID",
+    sortable: true,
+    filterOptions: rows => {
+      // generate groupings of 0-10, 10-20 etc...
+      let nums = {};
+      rows.forEach(row => {
+        let num = Math.floor(row.id / 10);
+        if (nums[num] === undefined)
+          nums[num] = { name: `${num * 10} to ${(num + 1) * 10}`, value: num };
+      });
+      // fix order
+      nums = Object.entries(nums)
+        .sort()
+        .reduce((o, [k, v]) => ((o[k] = v), o), {});
+      return Object.values(nums);
+    },
+    filterValue: v => Math.floor(v.id / 10),
+    headerClass: "text-left"
+  },
+  {
+    key: "first_name",
+    title: "FIRST_NAME",
+    sortable: true,
+    filterOptions: rows => {
+      // use first letter of first_name to generate filter
+      let letrs = {};
+      rows.forEach(row => {
+        let letr = row.first_name.charAt(0);
+        if (letrs[letr] === undefined)
+          letrs[letr] = {
+            name: `${letr.toUpperCase()}`,
+            value: letr.toLowerCase()
+          };
+      });
+      // fix order
+      letrs = Object.entries(letrs)
+        .sort()
+        .reduce((o, [k, v]) => ((o[k] = v), o), {});
+      return Object.values(letrs);
+    },
+    filterValue: v => v.first_name.charAt(0).toLowerCase()
+  },
+  {
+    key: "last_name",
+    title: "LAST_NAME",
+    sortable: true,
+    filterOptions: rows => {
+      // use first letter of last_name to generate filter
+      let letrs = {};
+      rows.forEach(row => {
+        let letr = row.last_name.charAt(0);
+        if (letrs[letr] === undefined)
+          letrs[letr] = {
+            name: `${letr.toUpperCase()}`,
+            value: letr.toLowerCase()
+          };
+      });
+      // fix order
+      letrs = Object.entries(letrs)
+        .sort()
+        .reduce((o, [k, v]) => ((o[k] = v), o), {});
+      return Object.values(letrs);
+    },
+    filterValue: v => v.last_name.charAt(0).toLowerCase()
+  },
+  {
+    key: "gender",
+    title: "GENDER",
+    renderValue: v => v.gender.charAt(0).toUpperCase() + v.gender.substring(1), // capitalize
+    sortable: true,
+    filterOptions: ["male", "female"] // provide array
+  }
+];
+```

docs/src/routes/_error.svelte

@@ -0,0 +1,40 @@
+<script>
+	export let status;
+	export let error;
+
+	const dev = process.env.NODE_ENV === 'development';
+</script>
+
+<style>
+	h1, p {
+		margin: 0 auto;
+	}
+
+	h1 {
+		font-size: 2.8em;
+		font-weight: 700;
+		margin: 0 0 0.5em 0;
+	}
+
+	p {
+		margin: 1em auto;
+	}
+
+	@media (min-width: 480px) {
+		h1 {
+			font-size: 4em;
+		}
+	}
+</style>
+
+<svelte:head>
+	<title>{status}</title>
+</svelte:head>
+
+<h1>{status}</h1>
+
+<p>{error.message}</p>
+
+{#if dev && error.stack}
+	<pre>{error.stack}</pre>
+{/if}

docs/src/routes/_layout.svelte

@@ -0,0 +1,79 @@
+<!-- <script context="module">
+  export async function preload({ path }) {
+    const url = 'https://c0bra.github.io' + `/svelma-pro/${path}`.replace(/\/\//g, '/').replace(/([^\/]$)/, '$1/')
+
+    return { url };
+  }
+</script> -->
+
+<script>
+  import 'bulma/css/bulma.css'
+  import 'highlight.js/styles/github.css'
+
+  import { afterUpdate } from 'svelte'
+  import { stores } from '@sapper/app';
+  import Nav from '../components/Nav.svelte'
+  import Sidebar from '../components/Sidebar.svelte'
+
+  const { page } = stores()
+
+  export let segment
+  let url
+
+  // page.subscribe(({ path }) => {
+  //   url = 'https://c0bra.github.io' + `/svelma-pro/${path}`.replace(/\/\//g, '/').replace(/([^\/]$)/, '$1/')
+  // })
+
+  // afterUpdate(function() {
+  //   console.log('I updated!', this)
+  // })
+</script>
+
+<style lang="scss">
+  .docs {
+    display: flex;
+    position: relative;
+    flex-direction: row;
+  }
+
+  .docs-main {
+    flex-grow: 1;
+    flex-shrink: 1;
+    padding: 3rem;
+    background-color: white;
+    // min-height: calc(100vh - 4rem);
+    max-height: calc(100vh - 2rem - 50px);
+    overflow: auto;
+  }
+
+  @media screen and (max-width: 1087px) {
+    .docs {
+      flex-direction: column;
+    }
+
+    .docs-main {
+      min-height: unset;
+    }
+  }
+</style>
+
+<svelte:head>
+  <title>svelma-pro</title>
+  <meta property="og:site_name" content="Svelma" />
+  <meta property="og:image" content="https://c0bra.github.io/svelma-pro/svelma-pro-logo.png" />
+  <meta property="og:image:width" content="200" />
+  <meta property="og:image:height" content="200" />
+  <meta property="og:url" content={url}>
+</svelte:head>
+
+<Nav {segment} />
+
+<main>
+  <section class="docs">
+    <Sidebar />
+
+    <div class="docs-main">
+      <slot />
+    </div>
+  </section>
+</main>

docs/src/routes/about.svelte

@@ -0,0 +1,7 @@
+<svelte:head>
+	<title>关于</title>
+</svelte:head>
+
+<h1>关于页面</h1>
+
+<p>本文档基于MIT开源项目svelma扩展修改</p>

docs/src/routes/blog/[slug].json.js

@@ -0,0 +1,28 @@
+import posts from './_posts.js';
+
+const lookup = new Map();
+posts.forEach(post => {
+	lookup.set(post.slug, JSON.stringify(post));
+});
+
+export function get(req, res, next) {
+	// the `slug` parameter is available because
+	// this file is called [slug].json.js
+	const { slug } = req.params;
+
+	if (lookup.has(slug)) {
+		res.writeHead(200, {
+			'Content-Type': 'application/json'
+		});
+
+		res.end(lookup.get(slug));
+	} else {
+		res.writeHead(404, {
+			'Content-Type': 'application/json'
+		});
+
+		res.end(JSON.stringify({
+			message: `Not found`
+		}));
+	}
+}

docs/src/routes/blog/[slug].svelte

@@ -0,0 +1,64 @@
+<script context="module">
+	export async function preload({ params, query }) {
+		// the `slug` parameter is available because
+		// this file is called [slug].html
+		const res = await this.fetch(`blog/${params.slug}.json`);
+		const data = await res.json();
+
+		if (res.status === 200) {
+			return { post: data };
+		} else {
+			this.error(res.status, data.message);
+		}
+	}
+</script>
+
+<script>
+	export let post;
+</script>
+
+<style>
+	/*
+		By default, CSS is locally scoped to the component,
+		and any unused styles are dead-code-eliminated.
+		In this page, Svelte can't know which elements are
+		going to appear inside the {{{post.html}}} block,
+		so we have to use the :global(...) modifier to target
+		all elements inside .content
+	*/
+	.content :global(h2) {
+		font-size: 1.4em;
+		font-weight: 500;
+	}
+
+	.content :global(pre) {
+		background-color: #f9f9f9;
+		box-shadow: inset 1px 1px 5px rgba(0,0,0,0.05);
+		padding: 0.5em;
+		border-radius: 2px;
+		overflow-x: auto;
+	}
+
+	.content :global(pre) :global(code) {
+		background-color: transparent;
+		padding: 0;
+	}
+
+	.content :global(ul) {
+		line-height: 1.5;
+	}
+
+	.content :global(li) {
+		margin: 0 0 0.5em 0;
+	}
+</style>
+
+<svelte:head>
+	<title>{post.title}</title>
+</svelte:head>
+
+<h1>{post.title}</h1>
+
+<div class='content'>
+	{@html post.html}
+</div>

docs/src/routes/blog/_posts.js

@@ -0,0 +1,92 @@
+// Ordinarily, you'd generate this data from markdown files in your
+// repo, or fetch them from a database of some kind. But in order to
+// avoid unnecessary dependencies in the starter template, and in the
+// service of obviousness, we're just going to leave it here.
+
+// This file is called `_posts.js` rather than `posts.js`, because
+// we don't want to create an `/blog/posts` route — the leading
+// underscore tells Sapper not to do that.
+
+const posts = [
+	{
+		title: 'What is Sapper?',
+		slug: 'what-is-sapper',
+		html: `
+			<p>First, you have to know what <a href='https://svelte.dev'>Svelte</a> is. Svelte is a UI framework with a bold new idea: rather than providing a library that you write code with (like React or Vue, for example), it's a compiler that turns your components into highly optimized vanilla JavaScript. If you haven't already read the <a href='https://svelte.dev/blog/frameworks-without-the-framework'>introductory blog post</a>, you should!</p>
+
+			<p>Sapper is a Next.js-style framework (<a href='blog/how-is-sapper-different-from-next'>more on that here</a>) built around Svelte. It makes it embarrassingly easy to create extremely high performance web apps. Out of the box, you get:</p>
+
+			<ul>
+				<li>Code-splitting, dynamic imports and hot module replacement, powered by webpack</li>
+				<li>Server-side rendering (SSR) with client-side hydration</li>
+				<li>Service worker for offline support, and all the PWA bells and whistles</li>
+				<li>The nicest development experience you've ever had, or your money back</li>
+			</ul>
+
+			<p>It's implemented as Express middleware. Everything is set up and waiting for you to get started, but you keep complete control over the server, service worker, webpack config and everything else, so it's as flexible as you need it to be.</p>
+		`
+	},
+
+	{
+		title: 'How to use Sapper',
+		slug: 'how-to-use-sapper',
+		html: `
+			<h2>Step one</h2>
+			<p>Create a new project, using <a href='https://github.com/Rich-Harris/degit'>degit</a>:</p>
+
+			<pre><code>npx degit sveltejs/sapper-template#rollup my-app
+			cd my-app
+			npm install # or yarn!
+			npm run dev
+			</code></pre>
+
+			<h2>Step two</h2>
+			<p>Go to <a href='http://localhost:3000'>localhost:3000</a>. Open <code>my-app</code> in your editor. Edit the files in the <code>src/routes</code> directory or add new ones.</p>
+
+			<h2>Step three</h2>
+			<p>...</p>
+
+			<h2>Step four</h2>
+			<p>Resist overdone joke formats.</p>
+		`
+	},
+
+	{
+		title: 'Why the name?',
+		slug: 'why-the-name',
+		html: `
+			<p>In war, the soldiers who build bridges, repair roads, clear minefields and conduct demolitions — all under combat conditions — are known as <em>sappers</em>.</p>
+
+			<p>For web developers, the stakes are generally lower than those for combat engineers. But we face our own hostile environment: underpowered devices, poor network connections, and the complexity inherent in front-end engineering. Sapper, which is short for <strong>S</strong>velte <strong>app</strong> mak<strong>er</strong>, is your courageous and dutiful ally.</p>
+		`
+	},
+
+	{
+		title: 'How is Sapper different from Next.js?',
+		slug: 'how-is-sapper-different-from-next',
+		html: `
+			<p><a href='https://github.com/zeit/next.js'>Next.js</a> is a React framework from <a href='https://zeit.co'>Zeit</a>, and is the inspiration for Sapper. There are a few notable differences, however:</p>
+
+			<ul>
+				<li>It's powered by <a href='https://svelte.dev'>Svelte</a> instead of React, so it's faster and your apps are smaller</li>
+				<li>Instead of route masking, we encode route parameters in filenames. For example, the page you're looking at right now is <code>src/routes/blog/[slug].html</code></li>
+				<li>As well as pages (Svelte components, which render on server or client), you can create <em>server routes</em> in your <code>routes</code> directory. These are just <code>.js</code> files that export functions corresponding to HTTP methods, and receive Express <code>request</code> and <code>response</code> objects as arguments. This makes it very easy to, for example, add a JSON API such as the one <a href='blog/how-is-sapper-different-from-next.json'>powering this very page</a></li>
+				<li>Links are just <code>&lt;a&gt;</code> elements, rather than framework-specific <code>&lt;Link&gt;</code> components. That means, for example, that <a href='blog/how-can-i-get-involved'>this link right here</a>, despite being inside a blob of HTML, works with the router as you'd expect.</li>
+			</ul>
+		`
+	},
+
+	{
+		title: 'How can I get involved?',
+		slug: 'how-can-i-get-involved',
+		html: `
+			<p>We're so glad you asked! Come on over to the <a href='https://github.com/sveltejs/svelte'>Svelte</a> and <a href='https://github.com/sveltejs/sapper'>Sapper</a> repos, and join us in the <a href='https://svelte.dev/chat'>Discord chatroom</a>. Everyone is welcome, especially you!</p>
+		`
+	}
+];
+
+posts.forEach(post => {
+	post.html = post.html.replace(/^\t{3}/gm, '');
+});
+
+export default posts;

docs/src/routes/blog/index.json.js

@@ -0,0 +1,16 @@
+import posts from './_posts.js';
+
+const contents = JSON.stringify(posts.map(post => {
+	return {
+		title: post.title,
+		slug: post.slug
+	};
+}));
+
+export function get(req, res) {
+	res.writeHead(200, {
+		'Content-Type': 'application/json'
+	});
+
+	res.end(contents);
+}

docs/src/routes/blog/index.svelte

@@ -0,0 +1,34 @@
+<script context="module">
+	export function preload({ params, query }) {
+		return this.fetch(`blog.json`).then(r => r.json()).then(posts => {
+			return { posts };
+		});
+	}
+</script>
+
+<script>
+	export let posts;
+</script>
+
+<style>
+	ul {
+		margin: 0 0 1em 0;
+		line-height: 1.5;
+	}
+</style>
+
+<svelte:head>
+	<title>Blog</title>
+</svelte:head>
+
+<h1>Recent posts</h1>
+
+<ul>
+	{#each posts as post}
+		<!-- we're using the non-standard `rel=prefetch` attribute to
+				tell Sapper to load the data for the page as soon as
+				the user hovers over the link or taps it, instead of
+				waiting for the 'click' event -->
+		<li><a rel='prefetch' href='blog/{post.slug}'>{post.title}</a></li>
+	{/each}
+</ul>

docs/src/routes/bulma/hero.svelte

@@ -0,0 +1,77 @@
+<script>
+  import { onDestroy, onMount } from 'svelte'
+  import { slide } from 'svelte/transition'
+  import Codepreview from '../../components/Code.svelte'
+  import DocHeader from '../../components/DocHeader.svelte'
+  import Example from '../../components/Example.svelte'
+
+  const types = ['is-primary', 'is-success', 'is-danger', 'is-warning', 'is-info', 'is-link']
+  let type = 'is-primary'
+
+  async function update() {
+    type = ''
+
+    setTimeout(() => {
+      type = types[Math.floor(Math.random() * types.length)];
+    }, 1000)
+  }
+</script>
+
+<DocHeader title="Hero" subtitle="Hero headers" />
+
+<Example horizontal={true} code={`<script>
+  import { slide } from 'svelte/transition'
+
+  const types = ['is-primary', 'is-success', 'is-danger', 'is-warning', 'is-info', 'is-link']
+  let type = 'is-primary'
+
+  async function update() {
+    type = ''
+
+    setTimeout(() => {
+      type = types[Math.floor(Math.random() * types.length)];
+    }, 1000)
+  }
+</script>
+
+<button class="button is-primary" on:click={update}>Update Hero</button>
+
+<br />
+<br />
+
+{#if type}
+  <section class="hero {type}" transition:slide>
+    <div class="hero-body">
+      <div class="container">
+        <h1 class="title">
+          Title
+        </h1>
+        <h2 class="subtitle">
+          Subtitle
+        </h2>
+      </div>
+    </div>
+  </section>
+{/if}`}>
+  <div slot="preview">
+    <button class="button is-primary" on:click={update}>Update Hero</button>
+
+    <br />
+    <br />
+
+    {#if type}
+      <section class="hero {type}" transition:slide>
+        <div class="hero-body">
+          <div class="container">
+            <h1 class="title">
+              Title
+            </h1>
+            <h2 class="subtitle">
+              Subtitle
+            </h2>
+          </div>
+        </div>
+      </section>
+    {/if}
+  </div>
+</Example>

docs/src/routes/bulma/intro.svelte

@@ -0,0 +1,9 @@
+<script>
+  import DocHeader from '../../components/DocHeader.svelte'
+</script>
+
+<DocHeader title="Bulma Elements" subtitle="在Svelte中使用常规Bulma元素" />
+
+<p class="content">
+  许多Bulma组件很容易与常规的Svelte代码一起使用，而不需要额外的Svelma组件层。本节的文档将讨论如何在Svelte中使用这些元素。
+</p>

docs/src/routes/bulma/media.svelte

@@ -0,0 +1,141 @@
+<script>
+  import { onDestroy, onMount } from 'svelte'
+  import { fade, slide } from 'svelte/transition'
+  import Codepreview from '../../components/Code.svelte'
+  import DocHeader from '../../components/DocHeader.svelte'
+  import Example from '../../components/Example.svelte'
+
+  let timer
+  let user
+
+  const titleize = s => s.replace(/^([a-z])/, (_, r) => r.toUpperCase())
+
+  async function updateUser() {
+    user = null
+    user = (await (await fetch('https://randomuser.me/api/')).json()).results[0]
+  }
+
+  onMount(() => updateUser())
+</script>
+
+<DocHeader title="Media" subtitle="Social media UI element" />
+
+<Example horizontal={true} code={`<script>
+  import { onDestroy, onMount } from 'svelte'
+  import { fade } from 'svelte/transition'
+
+  let user
+
+  const titleize = s => s.replace(/^([a-z])/, (_, r) => r.toUpperCase())
+
+  async function updateUser() {
+    user = null
+    user = (await (await fetch('https://randomuser.me/api/')).json()).results[0]
+  }
+</script>
+
+<button class="button is-primary" on:click={updateUser}>Fetch New User</button>
+
+<br />
+<br />
+
+<div class="box">
+  <article class="media">
+    <div class="media-left">
+      <figure class="image is-64x64">
+        {#if user}
+          <img transition:fade class="is-rounded" src={user.picture.medium} alt="Profile picture" />
+        {/if}
+      </figure>
+    </div>
+    <div class="media-content">
+      <div class="content">
+        {#if user}
+          <p transition:fade>
+            <strong>{titleize(user.name.first)} {titleize(user.name.last)}</strong>
+            <small>@{user.login.username}</small>
+            <small />
+            <br />
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla
+            egestas. Nullam condimentum luctus turpis.
+          </p>
+        {/if}
+      </div>
+      {#if user}
+        <nav class="level is-mobile" transition:fade>
+          <div class="level-left">
+            <a href class="level-item" aria-label="reply">
+              <span class="icon is-small">
+                <i class="fas fa-reply" aria-hidden="true" />
+              </span>
+            </a>
+            <a href class="level-item" aria-label="retweet">
+              <span class="icon is-small">
+                <i class="fas fa-retweet" aria-hidden="true" />
+              </span>
+            </a>
+            <a href class="level-item" aria-label="like">
+              <span class="icon is-small">
+                <i class="fas fa-heart" aria-hidden="true" />
+              </span>
+            </a>
+          </div>
+        </nav>
+      {/if}
+    </div>
+  </article>
+</div>`}>
+  <div slot="preview">
+    <button class="button is-primary" on:click={updateUser}>Fetch New User</button>
+
+    <br />
+    <br />
+
+    <div class="box">
+      <article class="media">
+        <div class="media-left">
+          <figure class="image is-64x64">
+            {#if user}
+              <img transition:fade class="is-rounded" src={user.picture.medium} alt="Profile picture" />
+            {/if}
+          </figure>
+        </div>
+        <div class="media-content">
+          <div class="content">
+            {#if user}
+              <p transition:fade>
+                <strong>{titleize(user.name.first)} {titleize(user.name.last)}</strong>
+                <small>@{user.login.username}</small>
+                <small />
+                <br />
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla
+                egestas. Nullam condimentum luctus turpis.
+              </p>
+            {/if}
+          </div>
+          {#if user}
+            <nav class="level is-mobile" transition:fade>
+              <div class="level-left">
+                <a href class="level-item" aria-label="reply">
+                  <span class="icon is-small">
+                    <i class="fas fa-reply" aria-hidden="true" />
+                  </span>
+                </a>
+                <a href class="level-item" aria-label="retweet">
+                  <span class="icon is-small">
+                    <i class="fas fa-retweet" aria-hidden="true" />
+                  </span>
+                </a>
+                <a href class="level-item" aria-label="like">
+                  <span class="icon is-small">
+                    <i class="fas fa-heart" aria-hidden="true" />
+                  </span>
+                </a>
+              </div>
+            </nav>
+          {/if}
+        </div>
+      </article>
+    </div>
+  </div>
+</Example>

docs/src/routes/bulma/table.svelte

@@ -0,0 +1,128 @@
+<script>
+  import { onMount } from 'svelte'
+  import Codepreview from '../../components/Code.svelte'
+  import DocHeader from '../../components/DocHeader.svelte'
+  import Example from '../../components/Example.svelte'
+
+  let loading = false
+  let users = []
+
+  const titleize = s => s.replace(/^([a-z])/, (_, r) => r.toUpperCase())
+
+  async function update() {
+    loading = true
+
+    users = []
+    users = (await (await fetch('https://randomuser.me/api/?results=10')).json()).results
+
+    loading = false
+  }
+
+  onMount(() => update())
+</script>
+
+<DocHeader title="Tables" subtitle="Pretty HTML tables" />
+
+<Example code={`<script>
+  let loading = false
+  let users = []
+
+  const titleize = s => s.replace(/^([a-z])/, (_, r) => r.toUpperCase())
+
+  async function update() {
+    loading = true
+
+    users = []
+    users = (await (await fetch('https://randomuser.me/api/?results=10')).json()).results
+
+    loading = false
+  }
+
+  onMount(() => update())
+</script>
+
+<button class="button is-primary" on:click={update}>Update</button>
+<button class="button is-primary" on:click={() => users = []}>No Data</button>
+
+<br>
+<br>
+
+<table class="table is-fullwidth">
+  <thead>
+    <tr>
+      <th></th>
+      <th>First Name</th>
+      <th>Last Name</th>
+      <th>City</th>
+      <th>State</th>
+    </tr>
+  </thead>
+  <tbody>
+    {#each users as user}
+      <tr>
+        <td><figure class="image"><img class="is-rounded" src="{user.picture.thumbnail}" alt=""></figure></td>
+        <td>{titleize(user.name.first)}</td>
+        <td>{titleize(user.name.last)}</td>
+        <td>{titleize(user.location.city)}</td>
+        <td>{titleize(user.location.state)}</td>
+      </tr>
+    {:else}
+      {#if !loading}
+        <tr>
+          <td colspan="5">
+            <section class="section">
+              <div class="content has-text-grey has-text-centered">
+                <p><i class="far fa-3x fa-frown"></i></p>
+                <p>No data</p>
+              </div>
+            </section>
+          </td>
+        </tr>
+      {/if}
+    {/each}
+  </tbody>
+</table>`}>
+  <div slot="preview">
+    <button class="button is-primary" on:click={update}>Update</button>
+    <button class="button is-primary" on:click={() => users = []}>No Data</button>
+
+    <br>
+    <br>
+
+    <table class="table is-fullwidth">
+      <thead>
+        <tr>
+          <th></th>
+          <th>First Name</th>
+          <th>Last Name</th>
+          <th>City</th>
+          <th>State</th>
+        </tr>
+      </thead>
+      <tbody>
+        {#each users as user}
+          <tr>
+            <td><figure class="image"><img class="is-rounded" src="{user.picture.thumbnail}" alt=""></figure></td>
+            <td>{titleize(user.name.first)}</td>
+            <td>{titleize(user.name.last)}</td>
+            <td>{titleize(user.location.city)}</td>
+            <td>{titleize(user.location.state)}</td>
+          </tr>
+        {:else}
+          {#if !loading}
+            <tr>
+              <td colspan="5">
+                <section class="section">
+                  <div class="content has-text-grey has-text-centered">
+                    <p><i class="far fa-3x fa-frown"></i></p>
+                    <p>No data</p>
+                  </div>
+                </section>
+              </td>
+            </tr>
+          {/if}
+        {/each}
+      </tbody>
+    </table>
+  </div>
+</Example>

docs/src/routes/bulma/tiles.svelte

@@ -0,0 +1,179 @@
+<script>
+  import { onDestroy, onMount } from 'svelte'
+  import DocHeader from '../../components/DocHeader.svelte'
+  import Example from '../../components/Example.svelte'
+
+  async function waitForDraggabilly() {
+    return new Promise((resolve, reject) => {
+      const interval = setInterval(() => {
+        if (Draggabilly) {
+          clearInterval(interval);
+          resolve();
+        }
+      }, 250);
+    });
+  }
+
+  onMount(async () => {
+    const draggables = document.querySelectorAll('.tile.is-child');
+
+    await waitForDraggabilly();
+
+    for (const elm of draggables) {
+      let drag = new Draggabilly(elm, { // .tile:not(.is-ancestor)
+        containment: '.tile.is-ancestor',
+      });
+    }
+  })
+</script>
+
+<style>
+.tile:not(.is-ancestor) {
+  user-select: none;
+}
+
+:global(.is-dragging) {
+  transform: rotate(25deg);
+  cursor: move;
+}
+</style>
+
+<DocHeader title="Tiles" subtitle="2D grids with flexbox" />
+
+<Example code={`<script>
+  import { onMount } from 'svelte'
+
+  waitForDraggabilly() {
+    return new Promise((resolve, reject) => {
+      const interval = setInterval({
+        if (Draggabilly) {
+          clearInterval(interval);
+          resolve();
+        }
+      }, 100);
+    });
+  }
+
+  onMount(async () => {
+    const draggables = document.querySelectorAll('.tile.is-child');
+
+    await waitForDraggabilly();
+
+    for (const elm of draggables) {
+      let drag = new Draggabilly(elm, {
+        containment: '.tile.is-ancestor',
+      });
+    }
+  })
+</script>
+
+<style>
+.tile:not(.is-ancestor) {
+  user-select: none;
+}
+
+:global(.is-dragging) {
+  transform: rotate(25deg);
+  cursor: move;
+}
+</style>
+
+<script src="https://unpkg.com/draggabilly@2/dist/draggabilly.pkgd.min.js"></script>
+
+<div class="tile is-ancestor">
+  <div class="tile is-vertical is-8">
+    <div class="tile">
+      <div class="tile is-parent is-vertical">
+        <article class="tile is-child notification is-primary">
+          <p class="title">Vertical...</p>
+          <p class="subtitle">Top tile</p>
+        </article>
+        <article class="tile is-child notification is-warning">
+          <p class="title">...tiles</p>
+          <p class="subtitle">Bottom tile</p>
+        </article>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child notification is-info">
+          <p class="title">Middle tile</p>
+          <p class="subtitle">With an image</p>
+          <figure class="image is-4by3">
+            <img src="https://bulma.io/images/placeholders/640x480.png" />
+          </figure>
+        </article>
+      </div>
+    </div>
+    <div class="tile is-parent">
+      <article class="tile is-child notification is-danger">
+        <p class="title">Wide tile</p>
+        <p class="subtitle">Aligned with the right tile</p>
+        <div class="content">
+          <!-- Content -->
+        </div>
+      </article>
+    </div>
+  </div>
+  <div class="tile is-parent">
+    <article class="tile is-child notification is-success">
+      <div class="content">
+        <p class="title">Tall tile</p>
+        <p class="subtitle">With even more content</p>
+        <div class="content">
+          <!-- Content -->
+        </div>
+      </div>
+    </article>
+  </div>
+</div>`}>
+  <div slot="preview">
+    <script src="https://unpkg.com/draggabilly@2/dist/draggabilly.pkgd.min.js"></script>
+
+    <h5 class="title">Click to drag tiles</h5>
+
+    <div class="tile is-ancestor">
+      <div class="tile is-vertical is-8">
+        <div class="tile">
+          <div class="tile is-parent is-vertical">
+            <article class="tile is-child notification is-primary">
+              <p class="title">Vertical...</p>
+              <p class="subtitle">Top tile</p>
+            </article>
+            <article class="tile is-child notification is-warning">
+              <p class="title">...tiles</p>
+              <p class="subtitle">Bottom tile</p>
+            </article>
+          </div>
+          <div class="tile is-parent">
+            <article class="tile is-child notification is-info">
+              <p class="title">Middle tile</p>
+              <p class="subtitle">With an image</p>
+              <figure class="image is-4by3">
+                <img src="https://bulma.io/images/placeholders/640x480.png" alt="profile" />
+              </figure>
+            </article>
+          </div>
+        </div>
+        <div class="tile is-parent">
+          <article class="tile is-child notification is-danger">
+            <p class="title">Wide tile</p>
+            <p class="subtitle">Aligned with the right tile</p>
+            <div class="content">
+              <!-- Content -->
+            </div>
+          </article>
+        </div>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child notification is-success">
+          <div class="content">
+            <p class="title">Tall tile</p>
+            <p class="subtitle">With even more content</p>
+            <div class="content">
+              <!-- Content -->
+            </div>
+          </div>
+        </article>
+      </div>
+    </div>
+  </div>
+</Example>

docs/src/routes/components/[slug].json.js

@@ -0,0 +1,14 @@
+import jsdocs from './jsdocs.json'
+
+const titleize = s => s.replace(/^([a-z])/, (_, r) => r.toUpperCase())
+
+export async function get(req, res, next) {
+  const { slug } = req.params;
+
+  res.setHeader('Content-Type', 'application/json');
+	res.end(
+    JSON.stringify(
+      jsdocs[titleize(slug)]
+    )
+  );
+}

docs/src/routes/components/button.svelte

@@ -0,0 +1,180 @@
+<script context="module">
+  export async function preload(page, session) {
+    const res = await this.fetch(`components/button.json`)
+    const jsdoc = await res.json()
+
+    return { jsdoc }
+  }
+</script>
+
+<script>
+  import { onMount } from 'svelte'
+  import { Button, Icon } from 'svelma-pro'
+  import DocHeader from '../../components/DocHeader.svelte'
+  import Example from '../../components/Example.svelte'
+  import JSDoc from '../../components/JSDoc.svelte'
+
+  export let jsdoc
+
+  let counter = 0
+</script>
+
+<style>
+  .buttons {
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+  }
+</style>
+
+<DocHeader title="Buttons" subtitle="可点击按钮" />
+
+<Example
+  code={`<Button type="is-primary" on:click={() => counter++}>
+  Click!: {counter}
+</Button>`}>
+  <div slot="preview">
+    <Button type="is-primary" on:click={() => counter++}>Click!: {counter}</Button>
+  </div>
+</Example>
+
+<hr class="is-medium" />
+
+<p class="title is-4">状态,样式和类型</p>
+
+<Example
+  code={`<div class="buttons">
+  <Button type="is-primary">Primary</Button>
+  <Button type="is-success">Success</Button>
+  <Button type="is-danger">Danger</Button>
+  <Button type="is-warning">Warning</Button>
+  <Button type="is-info">Info</Button>
+  <Button type="is-link">Link</Button>
+  <Button type="is-light">Light</Button>
+  <Button type="is-dark">Dark</Button>
+  <Button type="is-text">Text</Button>
+</div>
+<div class="buttons">
+  <Button disabled>Disabled</Button>
+  <Button type="is-primary" loading>Loading</Button>
+  <Button type="is-success" rounded>Rounded</Button>
+  <Button type="is-info" outline>Outlined</Button>
+</div>
+<div class="buttons">
+  <div class="notification is-primary">
+    <Button type="is-primary" inverted>Inverted</Button>
+    <Button type="is-primary" inverted outlined>Invert Outlined</Button>
+  </div>
+</div>
+<div class="buttons">
+  <Button type="is-primary" nativeType="submit">Submit</Button>
+  <Button type="is-primary" nativeType="reset">Reset</Button>
+</div>`}>
+  <div slot="preview">
+    <div class="buttons">
+      <Button type="is-primary">Primary</Button>
+      <Button type="is-success">Success</Button>
+      <Button type="is-danger">Danger</Button>
+      <Button type="is-warning">Warning</Button>
+      <Button type="is-info">Info</Button>
+      <Button type="is-link">Link</Button>
+      <Button type="is-light">Light</Button>
+      <Button type="is-dark">Dark</Button>
+      <Button type="is-text">Text</Button>
+    </div>
+    <div class="buttons">
+      <Button disabled>Disabled</Button>
+      <Button type="is-primary" loading>Loading</Button>
+      <Button type="is-success" rounded>Rounded</Button>
+      <Button type="is-info" outline>Outlined</Button>
+    </div>
+    <div class="buttons">
+      <div class="notification is-primary">
+        <Button type="is-primary" inverted>Inverted</Button>
+        <Button type="is-primary" inverted outlined>Invert Outlined</Button>
+      </div>
+    </div>
+    <div class="buttons">
+      <Button type="is-primary" nativeType="submit">Submit</Button>
+      <Button type="is-primary" nativeType="reset">Reset</Button>
+    </div>
+  </div>
+</Example>
+
+<hr class="is-medium" />
+
+<p class="title is-4">Sizes</p>
+
+<Example
+  code={`<div class="buttons">
+  <Button size="is-small">Small</Button>
+  <Button>Default</Button>
+  <Button size="is-medium">Medium</Button>
+  <Button size="is-large">Large</Button>
+</div>`}>
+  <div slot="preview">
+    <div class="buttons">
+      <Button size="is-small">Small</Button>
+      <Button>Default</Button>
+      <Button size="is-medium">Medium</Button>
+      <Button size="is-large">Large</Button>
+    </div>
+  </div>
+</Example>
+
+<hr class="is-medium" />
+
+<p class="title is-4">Icons</p>
+
+<Example
+  code={`<div class="buttons">
+  <Button>
+    <Icon icon="bold" />
+  </Button>
+  <Button>
+    <Icon icon="underline" />
+  </Button>
+  <Button>
+    <Icon icon="italic" />
+  </Button>
+</div>
+<div class="buttons">
+  <Button iconPack="fab" iconLeft="github">GitHub</Button>
+  <Button type="is-primary" iconPack="fab" iconLeft="twitter">Twitter</Button>
+  <Button type="is-success" iconPack="fa" iconLeft="check">Save</Button>
+  <Button type="is-danger" outline iconPack="fa" iconRight="times">Delete</Button>
+</div>
+<div class="buttons">
+  <Button size="is-small" iconPack="fab" iconLeft="github">GitHub</Button>
+  <Button iconLeft="github" iconPack="fab">GitHub</Button>
+  <Button size="is-medium" iconPack="fab" iconLeft="github">GitHub</Button>
+  <Button size="is-large" iconPack="fab" iconLeft="github">GitHub</Button>
+</div>`}>
+  <div slot="preview">
+    <div class="buttons">
+      <Button>
+        <Icon icon="bold" />
+      </Button>
+      <Button>
+        <Icon icon="underline" />
+      </Button>
+      <Button>
+        <Icon icon="italic" />
+      </Button>
+    </div>
+    <div class="buttons">
+      <Button iconPack="fab" iconLeft="github">GitHub</Button>
+      <Button type="is-primary" iconPack="fab" iconLeft="twitter">Twitter</Button>
+      <Button type="is-success" iconPack="fa" iconLeft="check">Save</Button>
+      <Button type="is-danger" outline iconPack="fa" iconRight="times">Delete</Button>
+    </div>
+    <div class="buttons">
+      <Button size="is-small" iconPack="fab" iconLeft="github">GitHub</Button>
+      <Button iconLeft="github" iconPack="fab">GitHub</Button>
+      <Button size="is-medium" iconPack="fab" iconLeft="github">GitHub</Button>
+      <Button size="is-large" iconPack="fab" iconLeft="github">GitHub</Button>
+    </div>
+  </div>
+</Example>
+
+<JSDoc {jsdoc} />

docs/src/routes/components/carousel.svelte

@@ -0,0 +1,56 @@
+<script context="module">
+  export async function preload() {
+    const res = await this.fetch(`components/carousel.json`);
+    const jsdoc = await res.json();
+
+    return {
+      jsdoc
+    };
+  }
+</script>
+<script>
+  import {
+    Carousel
+  } from 'svelma-pro'
+  import DocHeader from '../../components/DocHeader.svelte'
+  import Example from '../../components/Example.svelte'
+  import JSDoc from '../../components/JSDoc.svelte'
+
+  export let jsdoc
+
+  let options = [
+    'http://dev.smartmapx.com/assets/source-img/banner/banner.jpg',
+    'http://dev.smartmapx.com/assets/source-img/banner/banner2.jpg',
+    'http://dev.smartmapx.com/assets/source-img/banner/banner3.jpg',
+    'http://dev.smartmapx.com/assets/source-img/banner/banner4.jpg'
+  ];
+</script>
+<style>
+  .preview {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+</style>
+
+<DocHeader title="Carousel" subtitle="跑马灯" />
+
+<Example code={`<script>
+  import { Carousel } from 'svelma-pro'
+
+  let options = [
+  'http://dev.smartmapx.com/assets/source-img/banner/banner.jpg',
+  'http://dev.smartmapx.com/assets/source-img/banner/banner2.jpg',
+  'http://dev.smartmapx.com/assets/source-img/banner/banner3.jpg',
+  'http://dev.smartmapx.com/assets/source-img/banner/banner4.jpg'
+  ];
+  </script>
+
+  <Carousel options={options} />
+  `}>
+  <div slot="preview" class="preview">
+    <Carousel options={options} />
+  </div>
+</Example>
+
+<JSDoc {jsdoc}></JSDoc>

docs/src/routes/components/collapse.svelte

@@ -0,0 +1,225 @@
+<script context="module">
+	export async function preload() {
+		const res = await this.fetch(`components/collapse.json`);
+    const jsdoc = await res.json();
+
+		return { jsdoc };
+	}
+</script>
+
+<script>
+  import { Collapse, CollapseItem } from 'svelma-pro'
+  import DocHeader from '../../components/DocHeader.svelte'
+  import Example from '../../components/Example.svelte'
+  import JSDoc from '../../components/JSDoc.svelte'
+
+  export let jsdoc
+
+
+  let activeNames1 = '1';
+
+  function change(e) {
+    console.log(e.detail)
+  }
+</script>
+<style>
+  .notification {
+    background-color: #ffffff;
+    margin: 0;
+  }
+</style>
+
+<DocHeader title="Collapse" subtitle="可折叠元素" />
+
+
+<p class="title is-4">基础用法</p>
+<Example code={`<script>
+  import { Collapse, CollapseItem } from 'svelma-pro'
+
+  let activeNames = ['1', '2'];
+
+  function change(e) {
+    console.log(e.detail)
+  }
+</script>
+
+<Collapse activeNames={activeNames} on:change={change}>
+  <CollapseItem title="Click Me!" name='1'>
+    <div class="notification">
+      <div class="content">
+        <h3>Subtitle</h3>
+        <p>Lorem ipsum dolor...</p>
+      </div>
+    </div>
+  </CollapseItem>
+  <CollapseItem title="娱乐新闻" name='2'>
+    <div class="notification"> 
+      <div class="content">
+        <p>娱乐八卦天天有</p>
+      </div>
+    </div>
+  </CollapseItem>
+  <CollapseItem title="体育新闻" name='3'>
+    <div class="notification"> 
+      <div class="content">
+        <p>这里有你最喜欢的体育趣闻</p>
+      </div>
+    </div>
+  </CollapseItem>
+</Collapse>`}>
+  <div slot="preview">
+    <Collapse activeNames={activeNames1} on:change={change}>
+      <CollapseItem title="Click Me!" name='1'>
+        <div class="notification">
+          <div class="content">
+            <h3>Subtitle</h3>
+            <p>Lorem ipsum dolor...</p>
+          </div>
+        </div>
+      </CollapseItem>
+      <CollapseItem title="娱乐新闻" name='2'>
+        <div class="notification"> 
+          <div class="content">
+            <p>娱乐八卦天天有</p>
+          </div>
+        </div>
+      </CollapseItem>
+      <CollapseItem title="体育新闻" name='3'>
+        <div class="notification"> 
+          <div class="content">
+            <p>这里有你最喜欢的体育趣闻</p>
+          </div>
+        </div>
+      </CollapseItem>
+    </Collapse>
+  </div>
+</Example>
+<hr class="is-medium" />
+
+<p class="title is-4">手风琴模式</p>
+<Example code={`<script>
+  import { Collapse, CollapseItem } from 'svelma-pro'
+
+  let accordion = true;
+
+  function change(e) {
+    console.log(e.detail)
+  }
+</script>
+
+<Collapse accordion activeNames='1'  on:change={change}>
+  <CollapseItem active="{true}" title="目录一" name="1">
+    <div class="notification">
+      <div class="content">
+        <h3>Subtitle</h3>
+        <p>Lorem ipsum dolor...</p>
+      </div>
+    </div>
+  </CollapseItem>
+  <CollapseItem title="目录二" name="3">
+    <div class="notification">
+      <div class="content">
+        <p>我最喜欢的颜色</p>
+      </div>
+    </div>
+  </CollapseItem>
+</Collapse>`}>
+  <div slot="preview">
+    <Collapse accordion activeNames='1'>
+      <CollapseItem title="目录一" name="1">
+        <div class="notification">
+          <div class="content">
+            <h3>Subtitle</h3>
+            <p>Lorem ipsum dolor...</p>
+          </div>
+        </div>
+      </CollapseItem>
+      <CollapseItem title="目录二" name="2">
+        <div class="notification">
+          <div class="content">
+            <p>我最喜欢的颜色</p>
+          </div>
+        </div>
+      </CollapseItem>
+    </Collapse>
+  </div>
+</Example>
+<hr class="is-medium" />
+
+<p class="title is-4">自定义面板标题</p>
+<Example code={`<script>
+  import { Collapse, CollapseItem } from 'svelma-pro'
+
+</script>
+
+<Collapse>
+  <CollapseItem name="1">
+    <div slot="title">
+      我是自定义面板!
+      <i class="fa fa-check"></i>
+    </div>
+    <div class="notification">
+      <div class="content">
+        <h3>Subtitle</h3>
+        <p>Lorem ipsum dolor...</p>
+      </div>
+    </div>
+  </CollapseItem>
+  <CollapseItem title="我是标题面板" name="2">
+    <div class="notification">
+      <div class="content">
+        <p>我最喜欢的颜色</p>
+      </div>
+    </div>
+  </CollapseItem>
+</Collapse>`}>
+  <div slot="preview">
+    <Collapse>
+      <CollapseItem name="1">
+        <div slot="title">
+          我是自定义面板!
+          <i class="fa fa-check"></i>
+        </div>
+        <div class="notification">
+          <div class="content">
+            <h3>Subtitle</h3>
+            <p>Lorem ipsum dolor...</p>
+          </div>
+        </div>
+      </CollapseItem>
+      <CollapseItem title="我是标题面板" name="2">
+        <div class="notification">
+          <div class="content">
+            <p>我最喜欢的颜色</p>
+          </div>
+        </div>
+      </CollapseItem>
+    </Collapse>
+  </div>
+</Example>
+
+<JSDoc {jsdoc} showEvent="true"></JSDoc>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <!-- <Collapse>
+      <button class="button is-primary" slot="trigger">Click Me!</button>
+      <div class="notification">
+        <div class="content">
+          <h3>Subtitle</h3>
+          <p>Lorem ipsum dolor...</p>
+        </div>
+      </div>
+    </Collapse> -->

docs/src/routes/components/colorpicker.svelte

@@ -0,0 +1,60 @@
+<script context="module">
+  export async function preload() {
+    const res = await this.fetch(`components/colorPicker.json`);
+    const jsdoc = await res.json();
+
+    return { jsdoc };
+  }
+</script>
+<script>
+    import {
+        ColorPicker
+    } from 'svelma-pro'
+    import DocHeader from '../../components/DocHeader.svelte'
+    import Example from '../../components/Example.svelte'
+    import JSDoc from '../../components/JSDoc.svelte'
+
+    export let jsdoc
+    let color = "rgba(70,197,85,1)";
+
+    function change(e) {
+        console.log(e.detail)
+    }
+</script>
+
+<DocHeader title="ColorPicker" subtitle="拾色器" />
+
+<Example code={`<script>
+    import { ColorPicker } from 'svelma-pro'
+    let color = "rgba(70,197,85,1)";
+
+
+    function change(e){
+    console.log(e.detail)
+    }
+    </script>
+
+    <ColorPicker {color} on:change={change} switchs={false}/>
+    `}>
+    <div slot="preview">
+        <ColorPicker {color} on:change={change} switchs={false} />
+    </div>
+</Example>
+
+<hr class="is-medium" />
+
+<p class="title is-4">面板模式</p>
+
+<Example code={`<script>
+  import { ColorPicker } from 'svelma-pro'
+   let color = "rgba(70,197,85,1)";
+</script>
+
+<ColorPicker {color} on:change={change}  mode="2"/>
+`}>
+  <div slot="preview">
+    <ColorPicker {color} mode="2"/>
+  </div>
+</Example>
+
+<JSDoc {jsdoc} showEvent="true"></JSDoc>

docs/src/routes/components/datepicker.svelte

@@ -0,0 +1,77 @@
+<script context="module">
+  export async function preload(page, session) {
+    const res = await this.fetch(`components/datepicker.json`)
+    const jsdoc = await res.json()
+
+    return { jsdoc }
+  }
+</script>
+<script>
+  import { Datepicker }  from 'svelma-pro'
+  import DocHeader from '../../components/DocHeader.svelte'
+  import Example from '../../components/Example.svelte'
+    import JSDoc from '../../components/JSDoc.svelte'
+
+  export let jsdoc
+
+let result = 1584517629215;
+
+function click(e){
+  alert(e.detail.time)
+}
+</script>
+
+<DocHeader title="Datepicker" subtitle="日期选择器" />
+
+<p class="title is-4">默认与暗黑主题</p>
+
+<Example code={`<script>
+  import {Datepicker} from 'svelma-pro'
+</script>
+
+<Datepicker/>
+<Datepicker theme="dark"/>
+`}>
+<div slot="preview">
+    <Datepicker/>
+    <Datepicker theme="dark"/>
+</div>
+</Example>
+
+<hr class="is-medium" />
+
+<p class="title is-4">范围选择与自由选择</p>
+
+<Example code={`<script>
+  import {Datepicker} from 'svelma-pro'
+</script>
+
+<Datepicker pickerRule="freeChoice"/>
+<Datepicker pickerRule="rangeChoice"/>
+`}>
+<div slot="preview">
+    <Datepicker pickerRule="freeChoice"/>
+    <Datepicker pickerRule="rangeChoice"/>
+</div>
+</Example>
+
+<hr class="is-medium" />
+
+<p class="title is-4">获取结果</p>
+
+<Example code={`<script>
+  import Datepicker from 'svelma-pro'
+
+  function click(e){
+    alert(e.detail.timeStamp)
+  }
+</script>
+
+<Datepicker on:dateChecked={click}/>
+`}>
+<div slot="preview">
+    <Datepicker on:dateChecked={click}/>
+</div>
+</Example>
+
+<JSDoc {jsdoc} showEvent="true"/>

docs/src/routes/components/dialog.svelte

@@ -0,0 +1,129 @@
+<script context="module">
+  export async function preload() {
+    const res = await this.fetch(`components/dialog.json`);
+    const jsdoc = await res.json();
+
+    return { jsdoc };
+  }
+</script>
+
+<script>
+  import { Button, Dialog, Toast } from 'svelma-pro'
+  import Codepreview from '../../components/Code.svelte'
+  import DocHeader from '../../components/DocHeader.svelte'
+  import Example from '../../components/Example.svelte'
+  import JSDoc from '../../components/JSDoc.svelte'
+
+  export let jsdoc
+
+  function alert() {
+    Dialog.alert('Alles ist gut')
+  }
+
+  const thenHandler = result => Toast.create(`You ${result ? 'confirmed' : 'canceled'}`)
+
+  function confirm(type) {
+    switch(type) {
+      case 'custom':
+        return Dialog.confirm({
+          message: 'This is a custom confirmation message',
+          title: "I'm a title!",
+          type: 'is-danger',
+          icon: 'times-circle'
+        })
+        .then(thenHandler)
+      default:
+        Dialog.confirm('Shall we dance?')
+        .then(thenHandler)
+    }
+  }
+
+  function prompt(opts) {
+    Dialog.prompt({
+      message: "What is your quest?",
+      ...opts
+    })
+    .then(prompt => Toast.create(`Your answer was: '${prompt}'`))
+  }
+</script>
+
+<DocHeader title="Dialog" subtitle="用户警报，提示和确认对话框" />
+
+<p class="title is-4">Alert and Dialog</p>
+
+<p class="content">Use <code>Dialog.alert()</code> and <code>Dialog.confirm()</code> to create these kinds of dialogs.
+The methods return a promise that is resolved when the user cancels or confirms the alert. If the use closes/cancels the
+value will be <code>false</code>. If the user clicks the confirm button the value will be <code>true</code>.
+
+The first argument can either be an object of options or a string to use as the message.</p>
+
+<Example code={`<script>
+  import { Button, Dialog, Toast } from 'svelma-pro'
+
+  function alert() {
+    Dialog.alert('Alles ist gut')
+  }
+
+  const thenHandler = result => Toast.create(\`You \${result ? 'confirmed' : 'canceled'}\`)
+
+  function confirm(type) {
+    switch(type) {
+      case 'custom':
+        return Dialog.confirm({
+          message: 'This is a custom confirmation message',
+          title: "I'm a title!",
+          type: 'is-danger',
+          icon: 'times-circle'
+        })
+        .then(thenHandler)
+      default:
+        Dialog.confirm('Shall we dance?')
+        .then(thenHandler)
+    }
+  }
+</script>
+
+<Button type="is-primary" on:click={() => alert()}>Dialog</Button>
+<Button type="is-info" on:click={() => confirm()}>Confirm</Button>
+<Button type="is-danger" on:click={() => confirm('custom')}>Confirm (custom)</Button>
+`}>
+  <div slot="preview">
+    <Button type="is-primary" on:click={() => alert()}>Dialog</Button>
+    <Button type="is-info" on:click={() => confirm()}>Confirm</Button>
+    <Button type="is-danger" on:click={() => confirm('custom')}>Confirm (custom)</Button>
+  </div>
+</Example>
+
+<hr class="is-medium">
+
+<p class="title is-4">Prompt</p>
+
+<p class="content">Use <code>Dialog.prompt()</code> to programmatically create prompts for user input. By default the
+dialog will be created with a required text input. You can control the props (attributes) on the prompt with the
+<code>inputProps</code> prop.
+
+<code>prompt()</code> returns a promise that will be resolved with the prompt input value if the user confirms, or null
+if they cancel/close.</p>
+
+<Example code={`<script>
+  import { Button, Dialog, Toast } from 'svelma-pro'
+
+  function prompt(opts) {
+    Dialog.prompt({
+      message: "What is your quest?",
+      ...opts
+    })
+    .then(prompt => Toast.create(\`Your answer was: '\${prompt}'\`))
+  }
+</script>
+
+<Button type="is-primary" on:click={() => prompt()}>Prompt</Button>
+<Button type="is-link" on:click={() => prompt({ message: 'Which date?', inputProps: { type: 'date' }})}>Date Prompt</Button>`
+}>
+  <div slot="preview">
+    <Button type="is-primary" on:click={() => prompt()}>Prompt</Button>
+    <Button type="is-link" on:click={() => prompt({ message: 'Which date?', inputProps: { type: 'date' }})}>Date Prompt</Button>
+  </div>
+</Example>
+
+<JSDoc {jsdoc} />

docs/src/routes/components/district.svelte

@@ -0,0 +1,50 @@
+<script>
+  import { District } from 'svelma-pro'
+  import DocHeader from '../../components/DocHeader.svelte'
+  import Example from '../../components/Example.svelte'
+
+  let province_name = "北京市";
+  let city_name = "市辖区";
+  let county_name = "昌平区";
+
+  function checkEvent(e){
+    console.log(e)
+  }
+</script>
+
+<DocHeader title="District" subtitle="省市区级联" />
+
+<Example code={`<script>
+  import { District } from 'svelma-pro'
+</script>
+
+<District />
+`}>
+  <div slot="preview">
+    <District />
+  </div>
+</Example>
+
+<hr class="is-medium">
+
+<p class="title is-4">绑定</p>
+
+<Example code={`<script>
+  import { District } from 'svelma-pro'
+
+
+  let province_name = "北京市";
+  let city_name = "市辖区";
+  let county_name = "昌平区";
+
+  function checkEvent(e){
+    console.log(e)
+  }
+</script>
+
+<District />
+`}>
+  <div slot="preview">
+    <District province_name={province_name} city_name={city_name} county_name={county_name} on:checked={checkEvent}/>
+  </div>
+</Example>

docs/src/routes/components/field.svelte

@@ -0,0 +1,269 @@
+<script context="module">
+	export async function preload(page, session) {
+		const res = await this.fetch(`components/field.json`);
+    const jsdoc = await res.json();
+
+		return { jsdoc };
+	}
+</script>
+
+<script>
+  import { Button, Field, Icon, Input } from 'svelma-pro'
+  import DocHeader from '../../components/DocHeader.svelte'
+  import Example from '../../components/Example.svelte'
+  import JSDoc from '../../components/JSDoc.svelte'
+
+  let name = 'Moby Dick'
+
+  export let jsdoc
+</script>
+
+<DocHeader title="Field" subtitle="添加功能和样式表单元素/输入" />
+
+<Example code={`<script>
+  import { Field, Input } from 'svelma-pro'
+</script>
+
+<Field label="Name">
+  <Input value="Rich Harris" />
+</Field>
+
+<Field label="Email" type="is-danger" message="Email is invalid">
+  <Input value="john@" />
+</Field>
+
+<Field label="Username" type="is-success" message="Username is available">
+  <Input value="joey55" />
+</Field>`}>
+  <div slot="preview">
+    <Field label="Name">
+      <Input value="Rich Harris" />
+    </Field>
+
+    <Field label="Email" type="is-danger" message="Email is invalid">
+      <Input value="john@" />
+    </Field>
+
+    <Field label="Username" type="is-success" message="Username is available">
+      <Input value="joey55" />
+    </Field>
+  </div>
+</Example>
+
+<hr class="is-medium">
+
+<p class="title is-4">Addons</p>
+
+Multiple controls in a field get attached.  Use <code>expanded</code> property on the control to fill up space on the line.
+
+<Example code={`<script>
+  import { Button, Field, Icon, Input } from 'svelma-pro'
+</script>
+
+<Field>
+  <Input type="search" placeholder="Search" icon="search" />
+  <p class="control">
+    <Button type="is-primary">Search</Button>
+  </p>
+</Field>
+
+<Field>
+  <Input type="search" placeholder="This is expanded" expanded />
+  <p class="control">
+    <Button type="is-static">@gmail.com</Button>
+  </p>
+</Field>
+
+<hr>
+
+<Field>
+  <div class="control"><Button><Icon icon="bold"></Icon></Button></div>
+  <div class="control"><Button><Icon icon="italic"></Icon></Button></div>
+  <div class="control"><Button><Icon icon="underline"></Icon></Button></div>
+  <div class="control"><Button><Icon icon="align-left"></Icon></Button></div>
+  <div class="control"><Button><Icon icon="align-center"></Icon></Button></div>
+  <div class="control"><Button><Icon icon="align-right"></Icon></Button></div>
+  <Input expanded icon="comment" placeholder="Text here" />
+</Field>
+
+<Field>
+  <div class="control"><Button type="is-primary">Button</Button></div>
+  <div class="control"><Button type="is-primary"><Icon icon="search" /></Button></div>
+</Field>`}>
+  <div slot="preview">
+    <Field>
+      <Input type="search" placeholder="Search" icon="search" />
+      <p class="control">
+        <Button type="is-primary">Search</Button>
+      </p>
+    </Field>
+
+    <Field>
+      <Input type="search" placeholder="This is expanded" expanded />
+      <p class="control">
+        <Button type="is-static">@gmail.com</Button>
+      </p>
+    </Field>
+
+    <hr>
+
+    <Field>
+      <div class="control"><Button><Icon icon="bold"></Icon></Button></div>
+      <div class="control"><Button><Icon icon="italic"></Icon></Button></div>
+      <div class="control"><Button><Icon icon="underline"></Icon></Button></div>
+      <div class="control"><Button><Icon icon="align-left"></Icon></Button></div>
+      <div class="control"><Button><Icon icon="align-center"></Icon></Button></div>
+      <div class="control"><Button><Icon icon="align-right"></Icon></Button></div>
+      <Input expanded icon="comment" placeholder="Text here" />
+    </Field>
+
+    <Field>
+      <div class="control"><Button type="is-primary">Button</Button></div>
+      <div class="control"><Button type="is-primary"><Icon icon="search" /></Button></div>
+    </Field>
+  </div>
+</Example>
+
+<hr class="is-medium">
+
+<p class="title is-4">Groups</p>
+
+Use the <code>grouped</code> property to group controls together. Use the <code>expanded</code> property to make a control take up remaining space.
+
+<Example code={`<script>
+  import { Button, Field, Input } from 'svelma-pro'
+</script>
+
+<Field grouped>
+  <Input type="search" placeholder="Search" icon="search" />
+  <p class="control">
+    <Button type="is-primary">Search</Button>
+  </p>
+</Field>
+
+<Field grouped>
+  <Input type="search" placeholder="Search" icon="search" expanded />
+  <p class="control">
+    <Button type="is-primary">Search</Button>
+  </p>
+</Field>`}>
+  <div slot="preview">
+    <Field grouped>
+      <Input type="search" placeholder="Search" icon="search" />
+      <p class="control">
+        <Button type="is-primary">Search</Button>
+      </p>
+    </Field>
+
+    <Field grouped>
+      <Input type="search" placeholder="Search" icon="search" expanded />
+      <p class="control">
+        <Button type="is-primary">Search</Button>
+      </p>
+    </Field>
+  </div>
+</Example>
+
+<hr class="is-medium">
+
+<p class="title is-4">Nested Groups</p>
+
+You can nest fields inside fields. You have to use the <code>expanded</code> property on the <strong>Field</strong> to fill up the remaining space. 
+
+<Example code={`<script>
+  import { Button, Field, Input } from 'svelma-pro'
+</script>
+
+<Field grouped>
+  <Field label="Button">
+    <Button type="is-primary">Button</Button>
+  </Field>
+
+  <Field label="Name" expanded>
+    <Input />
+  </Field>
+
+  <Field label="Email" expanded>
+    <Input />
+  </Field>
+</Field>`}>
+  <div slot="preview">
+    <Field grouped>
+      <Field label="Button">
+        <Button type="is-primary">Button</Button>
+      </Field>
+
+      <Field label="Name" expanded>
+        <Input />
+      </Field>
+
+      <Field label="Email" expanded>
+        <Input />
+      </Field>
+    </Field>
+  </div>
+</Example>
+
+<hr class="is-medium">
+
+<p class="title is-4">Responsive Groups</p>
+
+Add <code>groupMultiline</code> property to allow controls to fill up multiple lines.
+
+<Example code={`<script>
+  import { Button, Field, Input } from 'svelma-pro'
+</script>
+
+<Field grouped groupMultiline>
+  <Input />
+  {#each Array(30).fill().map((x, i) => i+1) as num}
+    <div class="control">
+      <Button>{num}</Button>
+    </div>
+  {/each}
+</Field>`}>
+  <div slot="preview">
+    <Field grouped groupMultiline>
+      <Input />
+      {#each Array(30).fill().map((x, i) => i+1) as num}
+        <div class="control">
+          <Button>{num}</Button>
+        </div>
+      {/each}
+    </Field>
+  </div>
+</Example>
+
+<hr class="is-medium">
+
+<p class="title is-4">Positions</p>
+
+Use <code>position</code> property to align Field horizontally.
+
+<Example code={`<script>
+  import { Button, Field, Input } from 'svelma-pro'
+</script>
+
+<Field position="is-centered">
+  <Input />
+  <div class="control"><Button type="is-primary">Button</Button></div>
+</Field>
+
+<Field grouped position="is-right">
+  <Input />
+  <div class="control"><Button type="is-primary">Button</Button></div>
+</Field>`}>
+  <div slot="preview">
+    <Field position="is-centered">
+      <Input />
+      <div class="control"><Button type="is-primary">Button</Button></div>
+    </Field>
+
+    <Field grouped position="is-right">
+      <Input />
+      <div class="control"><Button type="is-primary">Button</Button></div>
+    </Field>
+  </div>
+</Example>
+
+<JSDoc {jsdoc}></JSDoc>

docs/src/routes/components/icon.svelte

@@ -0,0 +1,33 @@
+<script>
+  import { Icon } from 'svelma-pro'
+  import DocHeader from '../../components/DocHeader.svelte'
+  import Example from '../../components/Example.svelte'
+</script>
+
+<DocHeader title="Icon" subtitle="浮标" />
+
+<Example code={`<script>
+  import { Icon } from 'svelma-pro'
+</script>
+
+<Icon pack="fab" size="is-large" icon="github" />
+`}>
+  <div slot="preview">
+    <Icon pack="fab" size="is-large" icon="github"/>
+  </div>
+</Example>
+
+<hr class="is-medium" />
+
+<p class="title is-4">添加角标</p>
+
+<Example code={`<script>
+  import { Icon } from 'svelma-pro'
+</script>
+
+<Icon pack="fab" size="is-large" icon="github" num="99"/>
+`}>
+  <div slot="preview">
+    <Icon pack="fab" size="is-large" icon="github"  num="99"/>
+  </div>
+</Example>

docs/src/routes/components/input.svelte

@@ -0,0 +1,213 @@
+<script context="module">
+  export async function preload() {
+    const res = await this.fetch(`components/input.json`);
+    const jsdoc = await res.json();
+
+    return { jsdoc };
+  }
+</script>
+
+<script>
+  import { Field, Input } from 'svelma-pro'
+  import Codeview from '../../components/Code.svelte'
+  import DocHeader from '../../components/DocHeader.svelte'
+  import Example from '../../components/Example.svelte'
+  import JSDoc from '../../components/JSDoc.svelte'
+
+  export let jsdoc
+
+  let bound = {
+    name: 'Rich Harris',
+    email: 'rich@',
+    username: 'richie55',
+    password: 'secret123',
+  }
+</script>
+
+<DocHeader title="Input" subtitle="用户输入控件" />
+
+<p class="content">
+  Mostly just wraps <code>{`<input>`}</code>  and <code>{`<textarea>`}</code> so additional Bulma features can be bound easily.
+</p>
+
+<br>
+
+<Example code={`<script>
+  import { Input } from 'svelma-pro'
+</script>
+
+<Input type="text" placeholder="Text input" />
+`}>
+  <div slot="preview">
+    <Input type="text" placeholder="Text input" />
+  </div>
+</Example>
+
+<br>
+
+<p class="title is-4">Types and colors</p>
+
+<p class="content">Wrap with <a href="components/field"><strong>Field</strong></a> for additional features</p>
+
+<Example code={`<script>
+  import { Field, Input } from 'svelma-pro'
+
+  let bound = {
+    name: 'Rich Harris',
+    email: 'rich@',
+    username: 'richie55',
+    password: 'secret123',
+  }
+</script>
+
+<Field label="Name">
+  <Input type="text" bind:value={bound.name} placeholder="Text input" />
+</Field>
+
+<Field label="Email" type="is-danger" message="Invalid email"> 
+  <Input type="email" bind:value={bound.email} maxlength="30" />
+</Field>
+
+<Field label="Username" type="is-success" message="Username available"> 
+  <Input type="email" bind:value={bound.username} />
+</Field>
+
+<Field label="Password"> 
+  <Input type="password" bind:value={bound.password} passwordReveal={true} />
+</Field>
+
+<Field label="Textarea"> 
+  <Input type="textarea" maxlength="200" />
+</Field>
+`}>
+  <div slot="preview">
+    <Codeview lang="js" showCopy={false}>
+// Bound values
+{JSON.stringify(bound, null, 2)}
+    </Codeview>
+
+    <br>
+
+    <Field label="Name">
+      <Input type="text" bind:value={bound.name} placeholder="Text input" />
+    </Field>
+
+    <Field label="Email" type="is-danger" message="Invalid email"> 
+      <Input type="email" bind:value={bound.email} maxlength="30" />
+    </Field>
+
+    <Field label="Username" type="is-success" message="Username available"> 
+      <Input type="email" bind:value={bound.username} />
+    </Field>
+
+    <Field label="Password"> 
+      <Input type="password" bind:value={bound.password} passwordReveal={true} />
+    </Field>
+
+    <Field label="Textarea"> 
+      <Input type="textarea" maxlength="200" />
+    </Field>
+  </div>
+</Example>
+
+<hr class="is-medium">
+
+<p class="title is-4">States, plus more styles</p>
+
+<Example code={`<script>
+  import { Field, Input } from 'svelma-pro'
+</script>
+
+<Field>
+  <Input placeholder="No label" />
+</Field>
+
+<Field label="Rounded">
+  <Input class="is-rounded" placeholder="Rounded" />
+</Field>
+
+<Field label="Info" type="is-info"> 
+  <Input placeholder="Info" />
+</Field>
+
+<Field label="Warning" type="is-warning"> 
+  <Input placeholder="Warning" />
+</Field>
+
+<Field label="Disabled"> 
+  <Input placeholder="Disabled" disabled />
+</Field>
+
+<Field label="Loading">
+  <Input placeholder="Loading" loading />
+</Field>`}>
+  <div slot="preview">
+    <Field>
+      <Input placeholder="No label" />
+    </Field>
+
+    <Field label="Rounded">
+      <Input class="is-rounded" placeholder="Rounded" />
+    </Field>
+
+    <Field label="Info" type="is-info"> 
+      <Input placeholder="Info" />
+    </Field>
+
+    <Field label="Warning" type="is-warning"> 
+      <Input placeholder="Warning" />
+    </Field>
+
+    <Field label="Disabled"> 
+      <Input placeholder="Disabled" disabled />
+    </Field>
+
+    <Field label="Loading">
+      <Input placeholder="Loading" loading />
+    </Field>
+  </div>
+</Example>
+
+<hr class="is-medium">
+
+<p class="title is-4">Sizes</p>
+
+<Example code={`<script>
+  import { Field, Input } from 'svelma-pro'
+</script>
+
+<Field>
+  <Input placeholder="Small" size="is-small" />
+</Field>
+
+<Field>
+  <Input placeholder="Default" />
+</Field>
+
+<Field>
+  <Input placeholder="Medium" size="is-medium" />
+</Field>
+
+<Field>
+  <Input placeholder="Large" size="is-large" />
+</Field>`}>
+  <div slot="preview">
+    <Field>
+      <Input placeholder="Small" size="is-small" />
+    </Field>
+
+    <Field>
+      <Input placeholder="Default" />
+    </Field>
+
+    <Field>
+      <Input placeholder="Medium" size="is-medium" />
+    </Field>
+
+    <Field>
+      <Input placeholder="Large" size="is-large" />
+    </Field>
+  </div>
+</Example>
+
+<JSDoc {jsdoc}></JSDoc>

docs/src/routes/components/layout.svelte

@@ -0,0 +1,55 @@
+<script context="module">
+  export async function preload(page, session) {
+    const res = await this.fetch(`components/layout.json`)
+    const jsdoc = await res.json()
+
+    return { jsdoc }
+  }
+</script>
+<script>
+  import { Layout, Children } from 'svelma-pro'
+  import DocHeader from '../../components/DocHeader.svelte'
+  import Example from '../../components/Example.svelte'
+
+    import JSDoc from '../../components/JSDoc.svelte'
+
+  export let jsdoc
+</script>
+
+<DocHeader title="Layout" subtitle="布局" />
+
+<Example
+  code={`<script>
+  import { Layout, Children } from 'svelma-pro';
+</script>
+
+<Layout>
+  <Children.Sider width="100px">
+    侧边栏
+  </Children.Sider>
+  <Layout>
+    <Children.Header>
+      头部
+    </Children.Header>
+    <Children.Content height="300px">
+      内容
+    </Children.Content>
+    <Children.Footer>
+      脚部
+    </Children.Footer>
+  </Layout>
+</Layout>
+`}>
+  <div slot="preview">
+    <Layout>
+      <Children.Sider width="100px">侧边栏</Children.Sider>
+      <Layout>
+        <Children.Header>头部</Children.Header>
+        <Children.Content height="300px">内容</Children.Content>
+        <Children.Footer>脚部</Children.Footer>
+      </Layout>
+    </Layout>
+  </div>
+</Example>
+
+<JSDoc {jsdoc} />

docs/src/routes/components/message.svelte

@@ -0,0 +1,34 @@
+<script>
+  import { Button, Message } from 'svelma-pro'
+  import DocHeader from '../../components/DocHeader.svelte'
+  import Example from '../../components/Example.svelte'
+
+  let open
+</script>
+
+<DocHeader title="Message" subtitle="传递信息的消息块" />
+
+<Example code={`<script>
+  import { Button, Message } from 'svelma-pro'
+
+  let open
+</script>
+
+<Button class="block" on:click={() => open = !open}>Toggle</Button>
+<Message active={!open} title="Default"
+  on:close={active => open = active}>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  Fusce id fermentum quam. Proin sagittis, nibh id
+  hendrerit imperdiet, elit sapien laoreet elit
+</Message>`}>
+  <div slot="preview">
+    <Button class="block" on:click={() => open = !open}>Toggle</Button>
+    <Message active={!open} title="Default"
+      on:close={active => open = active}
+    >
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Fusce id fermentum quam. Proin sagittis, nibh id
+      hendrerit imperdiet, elit sapien laoreet elit
+    </Message>
+  </div>
+</Example>

docs/src/routes/components/modal.svelte

@@ -0,0 +1,45 @@
+<script context="module">
+  export async function preload() {
+    const res = await this.fetch(`components/modal.json`);
+    const jsdoc = await res.json();
+
+    return { jsdoc };
+  }
+</script>
+<script>
+  import { Button, Modal } from 'svelma-pro'
+  import DocHeader from '../../components/DocHeader.svelte'
+  import Example from '../../components/Example.svelte'
+  import JSDoc from '../../components/JSDoc.svelte'
+
+  export let jsdoc
+
+
+  let active = false
+</script>
+
+<DocHeader title="Modal" subtitle="模态框" />
+
+<Example code={`<script>
+  import { Button, Modal } from 'svelma-pro'
+  
+  let active = false
+</script>
+
+<Button class="block" on:click={() => active = !active}>Toggle</Button>
+<Modal bind:active={active}>
+  <p class="image is-4by3">
+    <img alt="Test image" src="https://via.placeholder.com/1280x920"/>
+  </p>
+</Modal>`}>
+  <div slot="preview">
+    <Button class="block" on:click={() => active = !active}>Toggle</Button>
+    <Modal bind:active={active}>
+      <p class="image is-4by3">
+        <img alt="Test image" src="https://via.placeholder.com/1280x920"/>
+      </p>
+    </Modal>
+  </div>
+</Example>
+
+<JSDoc {jsdoc}  showEvent="true"/>

docs/src/routes/components/nav.svelte

@@ -0,0 +1,114 @@
+<script context="module">
+  export async function preload(page, session) {
+    const res = await this.fetch(`components/nav.json`)
+    const res2 = await this.fetch(`components/navItem.json`)
+    const res3 = await this.fetch(`components/navLayout.json`)
+    const jsdoc = await res.json()
+    const jsdocItem = await res2.json()
+    const jsdocLayout = await res3.json()
+    return { jsdoc ,jsdocItem, jsdocLayout}
+  }
+</script>
+<script>
+  import { Nav, NavItem, NavLayout, Button } from 'svelma-pro'
+  import DocHeader from '../../components/DocHeader.svelte'
+  import Example from '../../components/Example.svelte'
+
+    import JSDoc from '../../components/JSDoc.svelte'
+
+  export let jsdoc
+  export let jsdocItem
+  export let jsdocLayout
+</script>
+
+<DocHeader title="Nav" subtitle="导航" />
+
+<Example
+  code={`<script>
+  import { Nav, NavItem, NavLayout } from 'svelma-pro'
+</script>
+
+  <Nav logoImg="/logo-192.png">
+    <NavLayout navPosition="center">
+      <NavItem>管理工具</NavItem>
+      <NavItem>开发资源</NavItem>
+    </NavLayout>
+    <NavLayout navPosition="end">
+      <NavItem>
+        <Button type="is-link">登录</Button>
+      </NavItem>
+    </NavLayout>
+  </Nav>
+`}>
+  <div slot="preview" style="position: relative;">
+  <Nav logoImg="/logo-192.png">
+    <NavLayout navPosition="center">
+      <NavItem>管理工具</NavItem>
+      <NavItem>开发资源</NavItem>
+    </NavLayout>
+    <NavLayout navPosition="end">
+      <NavItem>
+        <Button type="is-link">登录</Button>
+      </NavItem>
+    </NavLayout>
+  </Nav>
+  </div>
+</Example>
+
+<hr class="is-medium" />
+
+<p class="title is-4">下拉列表</p>
+
+<Example
+  code={`<script>
+  import { Nav, NavItem, NavLayout } from 'svelma-pro'
+</script>
+
+  <Nav logoImg="/logo-192.png" background="rgba(0,0,0)">
+      <NavItem isHover={true}>
+        <span style="color:#fff">管理工具</span>
+        <div slot="hover">
+          <NavItem>开发资源</NavItem>
+          <NavItem>开发资源</NavItem>
+          <NavItem>开发资源</NavItem>
+        </div>
+      </NavItem>
+      <NavItem><span style="color:#fff">开发资源</span></NavItem>
+    </Nav>
+`}>
+  <div slot="preview" style="position: relative;">
+    <Nav logoImg="/logo-192.png" background="rgba(0,0,0)">
+      <NavItem isHover={true}>
+        <span style="color:#fff">管理工具</span>
+        <div slot="hover">
+          <NavItem>开发资源</NavItem>
+          <NavItem>开发资源</NavItem>
+          <NavItem>开发资源</NavItem>
+        </div>
+      </NavItem>
+      <NavItem><span style="color:#fff">开发资源</span></NavItem>
+    </Nav>
+  </div>
+</Example>
+
+<hr class="is-medium" />
+
+<h2 class="title is-4 is-spaced">API</h2>
+
+<h3 class="subtitle">Nav</h3>
+
+<JSDoc {jsdoc}  showHeader={false}/>
+
+<br>
+<br>
+
+<h3 class="subtitle is-spaced">NavItem</h3>
+
+<JSDoc jsdoc={jsdocItem} showHeader={false}></JSDoc>
+
+<br>
+<br>
+
+<h3 class="subtitle is-spaced">NavLayout</h3>
+
+<JSDoc jsdoc={jsdocLayout} showHeader={false}></JSDoc>

docs/src/routes/components/notification.svelte

@@ -0,0 +1,236 @@
+<script context="module">
+  export async function preload() {
+    const res = await this.fetch(`components/notification.json`)
+    const jsdoc = await res.json()
+
+    return { jsdoc }
+  }
+</script>
+
+<script>
+  import { Button, Notification } from 'svelma-pro'
+  import DocHeader from '../../components/DocHeader.svelte'
+  import Example from '../../components/Example.svelte'
+  import JSDoc from '../../components/JSDoc.svelte'
+
+  export let jsdoc
+  let isOpen = true
+  let autoIsOpen = false
+
+  function open(props) {
+    Notification.create({ message: 'I am a notification message', ...props })
+  }
+
+  function showNotification(props) {
+    Notification.create({
+      message: 'You opened this programmatically!',
+      ...props
+    })
+  }
+</script>
+
+<style>
+
+</style>
+
+<DocHeader title="Notification" subtitle="提醒用户的通知" />
+
+<Example
+  code={`<script>
+  import { Button, Notification } from 'svelma-pro';
+
+  let isOpen = true
+</script>
+
+<Button class="block" on:click={() => (isOpen = !isOpen)}>Toggle</Button>
+<Notification bind:active={isOpen}>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
+  hendrerit imperdiet, elit sapien laoreet elit
+</Notification>`}>
+  <div slot="preview">
+    <Button class="block" on:click={() => (isOpen = !isOpen)}>Toggle</Button>
+    <Notification bind:active={isOpen}>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
+      hendrerit imperdiet, elit sapien laoreet elit
+    </Notification>
+  </div>
+</Example>
+
+<hr class="is-medium" />
+
+<p class="title is-4">Types</p>
+
+<Example
+  code={`<script>
+  import { Notification } from 'svelma-pro';
+</script>
+
+<Notification>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
+  hendrerit imperdiet, elit sapien laoreet elit
+</Notification>
+
+<Notification type="is-info">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
+  hendrerit imperdiet, elit sapien laoreet elit
+</Notification>
+
+<Notification type="is-success">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
+  hendrerit imperdiet, elit sapien laoreet elit
+</Notification>
+
+<Notification type="is-warning">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
+  hendrerit imperdiet, elit sapien laoreet elit
+</Notification>
+
+<Notification type="is-danger">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
+  hendrerit imperdiet, elit sapien laoreet elit
+</Notification>`}>
+  <div slot="preview">
+    <Notification>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
+      hendrerit imperdiet, elit sapien laoreet elit
+    </Notification>
+
+    <Notification type="is-info">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
+      hendrerit imperdiet, elit sapien laoreet elit
+    </Notification>
+
+    <Notification type="is-success">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
+      hendrerit imperdiet, elit sapien laoreet elit
+    </Notification>
+
+    <Notification type="is-warning">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
+      hendrerit imperdiet, elit sapien laoreet elit
+    </Notification>
+
+    <Notification type="is-danger">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
+      hendrerit imperdiet, elit sapien laoreet elit
+    </Notification>
+  </div>
+</Example>
+
+<hr class="is-medium" />
+
+<p class="title is-4">Icons</p>
+
+<Example
+  code={`<script>
+  import { Notification } from 'svelma-pro';
+</script>
+
+<Notification icon="question-circle">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
+  hendrerit imperdiet, elit sapien laoreet elit
+</Notification>
+
+<Notification type="is-info" icon={true}>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
+  hendrerit imperdiet, elit sapien laoreet elit
+</Notification>
+
+<Notification type="is-success" icon={true}>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
+  hendrerit imperdiet, elit sapien laoreet elit
+</Notification>
+
+<Notification type="is-warning" icon={true}>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
+  hendrerit imperdiet, elit sapien laoreet elit
+</Notification>
+
+<Notification type="is-danger" icon={true}>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
+  hendrerit imperdiet, elit sapien laoreet elit
+</Notification>`}>
+  <div slot="preview">
+    <Notification icon="question-circle">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
+      hendrerit imperdiet, elit sapien laoreet elit
+    </Notification>
+
+    <Notification type="is-info" icon={true}>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
+      hendrerit imperdiet, elit sapien laoreet elit
+    </Notification>
+
+    <Notification type="is-success" icon={true}>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
+      hendrerit imperdiet, elit sapien laoreet elit
+    </Notification>
+
+    <Notification type="is-warning" icon={true}>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
+      hendrerit imperdiet, elit sapien laoreet elit
+    </Notification>
+
+    <Notification type="is-danger" icon={true}>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
+      hendrerit imperdiet, elit sapien laoreet elit
+    </Notification>
+  </div>
+</Example>
+
+<hr class="is-medium" />
+
+<p class="title is-4">Auto-close</p>
+
+<p>
+  Notification will close automatically after
+  <code>duration</code>
+  .
+</p>
+
+<Example code={`<script>
+  import { Button, Notification } from 'svelma-pro';
+
+  let autoIsOpen = false
+</script>
+
+<Button class="block" on:click={() => (autoIsOpen = true)}>Show</Button>
+<Notification bind:active={autoIsOpen} autoClose={true}>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
+  hendrerit imperdiet, elit sapien laoreet elit
+</Notification>`}>
+  <div slot="preview">
+    <Button class="block" on:click={() => (autoIsOpen = true)}>Show</Button>
+    <Notification bind:active={autoIsOpen} autoClose={true}>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
+      hendrerit imperdiet, elit sapien laoreet elit
+    </Notification>
+  </div>
+</Example>
+
+<hr class="is-medium" />
+
+<p class="title is-4">Opening with code</p>
+
+<Example code={`<script>
+  import { Button, Notification } from 'svelma-pro';
+
+  function showNotification(props) {
+    Notification.create({
+      message: 'You opened this programmatically!',
+      ...props
+    })
+  }
+</script>
+
+<Button class="block" on:click={() => showNotification()}>Show Notification</Button>
+<Button class="block" type="is-success" on:click={() => showNotification({ type: 'is-success' })}>Show Notification (success)</Button>
+<Button class="block" type="is-danger" on:click={() => showNotification({ type: 'is-danger', position: 'is-bottom-right', icon: true })}>Show Notification (danger)</Button>`}>
+  <div slot="preview">
+    <Button class="block" on:click={() => showNotification()}>Show Notification</Button>
+    <Button class="block" type="is-success" on:click={() => showNotification({ type: 'is-success' })}>Show Notification (success)</Button>
+    <Button class="block" type="is-danger" on:click={() => showNotification({ type: 'is-danger', position: 'is-bottom-right', icon: true })}>Show Notification (danger)</Button>
+  </div>
+</Example>
+
+<JSDoc {jsdoc} />

docs/src/routes/components/pagination.svelte

@@ -0,0 +1,19 @@
+<script>
+  import {Pagination} from 'svelma-pro'
+  import DocHeader from '../../components/DocHeader.svelte'
+  import Example from '../../components/Example.svelte'
+</script>
+
+<DocHeader title="Pagination" subtitle="分页" />
+
+<Example
+  code={`<script>
+import {Pagination} from 'svelma-pro'
+</script>
+
+<Pagination current="1" total="10" show="5" align="centered" />
+`}>
+ <div slot="preview">
+    <Pagination current="1" total="10" show="5" align="centered" />
+ </div>
+</Example>

docs/src/routes/components/progress.svelte

@@ -0,0 +1,72 @@
+<script>
+  import { onDestroy, onMount } from 'svelte'
+  import Codepreview from '../../components/Code.svelte'
+  import DocHeader from '../../components/DocHeader.svelte'
+  import Example from '../../components/Example.svelte'
+  import { Progress } from 'svelma-pro'
+
+  const types = ['is-primary', 'is-success', 'is-danger', 'is-warning', 'is-info', 'is-link']
+  const progresses = Array(6).fill(0)
+
+  function update() {
+    types.forEach((type, i) => {
+      progresses[i] = Math.floor(Math.random() * 100)
+    })
+  }
+  
+  onMount(() => {
+    update()
+  })
+</script>
+
+<DocHeader title="Progress" subtitle="进度条" />
+
+<Example code={`<script>
+  import { onDestroy, onMount } from 'svelte'
+  import { Progress } from 'svelma-pro'
+  
+  const types = ['is-primary', 'is-success', 'is-danger', 'is-warning', 'is-info', 'is-link']
+  const progresses = Array(6).fill(0)
+  
+  function update() {
+    types.forEach((type, i) => {
+      progresses[i] = Math.floor(Math.random() * 100)
+    })
+  }
+  
+  onMount(() => {
+    update()
+  })
+</script>
+
+<button class="button is-primary" on:click={update}>Update</button>
+
+<br />
+<br />
+
+{#each types as type, i}
+  <Progress {type} value={progresses[i]} duration={i * 200} max="100"></Progress>
+{/each}
+
+<br>
+<br>
+
+<p class="title is-5">Indeterminate (no value)</p>
+<Progress max="100"></Progress>`}>
+  <div slot="preview">
+    <button class="button is-primary" on:click={update}>Update</button>
+
+    <br />
+    <br />
+
+    {#each types as type, i}
+      <Progress {type} value={progresses[i]} duration={i * 200} max="100"></Progress>
+    {/each}
+
+    <br>
+    <br>
+    
+    <p class="title is-5">Indeterminate (no value)</p>
+    <Progress max="100"></Progress>
+  </div>
+</Example>

docs/src/routes/components/select.svelte

@@ -0,0 +1,119 @@
+<script context="module">
+  export async function preload(page, session) {
+    const res = await this.fetch(`components/select.json`)
+    const jsdoc = await res.json()
+
+    return { jsdoc }
+  }
+</script>
+
+<script>
+  import { onMount } from 'svelte'
+  import { Table, Icon, Datepicker, Select } from 'svelma-pro'
+  import DocHeader from '../../components/DocHeader.svelte'
+  import Example from '../../components/Example.svelte'
+  import JSDoc from '../../components/JSDoc.svelte'
+
+    export let jsdoc
+
+ 
+    onMount(() => {
+
+    })
+    let value = '';
+
+    const params = [
+        {"label": "点", "value": "point"},
+        {"label": "圆", "value": "ellipse"},
+        {"label": "图片", "value": "billboard"},
+        {"label": "文字", "value": "label"}
+    ]
+
+    function select(e) {
+        console.log(e.detail)
+    }
+</script>
+
+<style>
+
+</style>
+<DocHeader title="Select" subtitle="下拉选择框" />
+
+<!-- <button class="button is-primary"  on:click="{() => add()}">添加</button> -->
+
+<p class="title is-4">基础用法</p>
+<Example
+  code={`<script>
+    import { Select } from 'svelma-pro'
+    let value = '';
+    const params = [
+        {"label": "点", "value": "point"},
+        {"label": "圆", "value": "ellipse"},
+        {"label": "图片", "value": "billboard"},
+        {"label": "文字", "value": "label"}
+    ]
+
+    function select(e) {
+        console.log(e.detail)
+    }
+</script>
+<Select
+    MulChoice={false}
+    ArrayList={params}
+    Noenable={false}
+    Modify={'width:100%'}
+    bind:Choose={value}
+    on:changSelect={select} >
+</Select>
+`}>
+ <div slot="preview">
+    <Select
+        MulChoice={false}
+        ArrayList={params}
+        Noenable={false}
+        Modify={'width:100%'}
+        bind:Choose={value}
+        on:changSelect={select} />
+ </div>
+</Example>
+<hr class="is-medium" />
+
+
+<p class="title is-4">多选</p>
+<Example
+  code={`<script>
+    import { Select } from 'svelma-pro'
+    let value = '';
+    const params = [
+        {"label": "点", "value": "point"},
+        {"label": "圆", "value": "ellipse"},
+        {"label": "图片", "value": "billboard"},
+        {"label": "文字", "value": "label"}
+    ]
+
+    function select(e) {
+        console.log(e.detail)
+    }
+</script>
+<Select
+    MulChoice={true}
+    ArrayList={params}
+    Noenable={false}
+    Modify={'width:100%'}
+    bind:Choose={value}
+    on:changSelect={select} >
+</Select>
+`}>
+ <div slot="preview">
+    <Select
+        MulChoice={true}
+        ArrayList={params}
+        Noenable={false}
+        Modify={'width:100%'}
+        bind:Choose={value}
+        on:changSelect={select} />
+ </div>
+</Example>
+<hr class="is-medium" />
+
+<JSDoc {jsdoc} showEvent="true"/>

docs/src/routes/components/slider.svelte

@@ -0,0 +1,63 @@
+<script context="module">
+	export async function preload() {
+		const res = await this.fetch(`components/slider.json`);
+    const jsdoc = await res.json();
+
+		return { jsdoc };
+	}
+</script>
+<script>
+  import { Slider } from 'svelma-pro'
+  import DocHeader from '../../components/DocHeader.svelte'
+  import Example from '../../components/Example.svelte'
+  import JSDoc from '../../components/JSDoc.svelte'
+
+    export let jsdoc
+   let value = [0, 1];
+   let range2 = [10, 110];
+
+   function change() {
+     console.log(value[0])
+   }
+</script>
+
+
+<DocHeader title="Slider" subtitle="滑动条" />
+
+<Example code={`<script>
+  import { Slider } from 'svelma-pro'
+  let value = [0, 1];
+
+  function change() {
+     console.log(value[0])
+   }
+</script>
+{value[0]}
+<Slider bind:value min="0" max="1" on:dragEnd={() => change()} step="0.01"/>
+`}>
+  <div slot="preview">
+    {value[0]}
+    <Slider bind:value min="0" max="1" on:dragEnd={() => change()} step="0.01"/>
+  </div>
+</Example>
+
+<hr class="is-medium" />
+
+<p class="title is-4">范围选择</p>
+
+<Example code={`<script>
+import { Slider } from 'svelma-pro'
+
+ let range2 = [10, 110];
+</script>
+
+ {value[0]}-{value[1]}
+ <Slider max="200" step="10" bind:value={range2} range order tip="true"/>
+`}>
+  <div slot="preview">
+  {range2[0]}-{range2[1]}
+   <Slider max="200" step="10" bind:value={range2} range order tip="true"/>
+  </div>
+</Example>
+
+<JSDoc {jsdoc} showEvent="true"></JSDoc>

docs/src/routes/components/snackbar.svelte

@@ -0,0 +1,58 @@
+<script context="module">
+  export async function preload() {
+    const res = await this.fetch(`components/snackbar.json`);
+    const jsdoc = await res.json();
+
+    return { jsdoc };
+  }
+</script>
+
+<script>
+  import { Button, Snackbar } from 'svelma-pro'
+  import DocHeader from '../../components/DocHeader.svelte'
+  import Example from '../../components/Example.svelte'
+  import JSDoc from '../../components/JSDoc.svelte'
+
+  export let jsdoc
+
+  function open(props) {
+    Snackbar.create({ message: 'I am a snackbar message', ...props })
+  }
+</script>
+
+<style>
+.buttons {
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+}
+</style>
+
+<DocHeader title="Snackbar" subtitle="比提示轻量,比吐司重要的提醒框" />
+
+<Example code={`<script>
+  import { Button, Snackbar } from 'svelma-pro'
+
+  function open(props) {
+    Snackbar.create({ message: 'I am a snackbar message', ...props })
+  }
+</script>
+
+<div class="buttons">
+  <Button on:click={() => open()}>Default Snackbar</Button>
+  <Button type="is-success" on:click={() => open({ type: 'is-success' })}>Success</Button>
+  <Button type="is-danger" on:click={() => open({ type: 'is-danger', actionText: 'retry', position: 'is-top-right' })}>Top Right</Button>
+  <Button type="is-primary" on:click={() => open({ background: 'has-background-grey-lighter' })}>Custom Background</Button>
+</div>`}>
+  <div slot="preview">
+    <div class="buttons">
+      <Button on:click={() => open()}>Default Snackbar</Button>
+      <Button type="is-success" on:click={() => open({ type: 'is-success' })}>Success</Button>
+      <Button type="is-danger" on:click={() => open({ type: 'is-danger', actionText: 'retry', position: 'is-top-right' })}>Top Right</Button>
+      <Button type="is-primary" on:click={() => open({ background: 'has-background-grey-lighter' })}>Custom Background</Button>
+    </div>
+  </div>
+</Example>
+
+
+<JSDoc {jsdoc} />

docs/src/routes/components/stable.svelte

@@ -0,0 +1,274 @@
+<script context="module">
+  export async function preload(page, session) {
+    const res = await this.fetch(`components/stable.json`)
+    const jsdoc = await res.json()
+
+    return {
+      jsdoc
+    }
+  }
+</script>
+
+<script>
+  import {
+    onMount
+  } from 'svelte'
+  import {
+    Stable,
+    Icon,
+    Datepicker,
+    Button
+  } from 'svelma-pro'
+  import DocHeader from '../../components/DocHeader.svelte'
+  import Example from '../../components/Example.svelte'
+  import JSDoc from '../../components/JSDoc.svelte'
+  import MDDoc from '../../components/MDDoc.svelte';
+  import md from '../../mddocs/stable.md';
+
+  export let jsdoc
+
+  let colums = [{
+    key: "id",
+    title: "ID"
+  }, 
+  {
+    key: "name",
+    title: "名称"
+  }, 
+  {
+    key: "date",
+    title: "时间"
+  }, 
+  {
+    key: "admin",
+    title: "权限"
+  },
+   {
+    key: "desc",
+    title: "描述"
+  }];
+  let data = [{
+      id: 1,
+      name: 'A',
+      date: '2017/10/01',
+      admin: '01',
+      desc: '我是01'
+    },
+    {
+      id: 2,
+      name: 'B',
+      date: '2020/03/19',
+      admin: '02',
+      desc: '我是02'
+    },
+    {
+      id: 3,
+      name: 'C',
+      date: '2019/07/15',
+      admin: '03',
+      desc: '我是03'
+    },
+  ];
+
+
+  let sortBy = "first_name";
+  let sortOrder = 1;
+
+  const colums2 = [{
+      key: "id",
+      title: "ID",
+      sortable: true,
+    },
+    {
+      key: "first_name",
+      title: "FIRST NAME",
+      sortable: true,
+    },
+    {
+      key: "last_name",
+      title: "LAST NAME",
+      sortable: true,
+      component: true
+    },
+    {
+      key: "email",
+      title: "EMAIL",
+      sortable: true
+    },
+    {
+      key: "gender",
+      title: "GENDER",
+      sortable: true,
+    },
+    {
+      key: "ip_address",
+      title: "IP ADDRESS",
+      sortable: true,
+    },
+  ];
+
+  let data2 = [{
+      id: 1,
+      first_name: "1",
+      last_name: "234",
+      gender: "Mal1e",
+      ip_address: "192.168.",
+      email: "234",
+    },
+    {
+      id: 2,
+      first_name: "2",
+      last_name: "234",
+      gender: "Male",
+      ip_address: "192.168.",
+      email: "234",
+    },
+  ];
+
+
+    function submit(v){
+    alert('当前行为'+v.id);
+  }
+</script>
+
+<style>
+:global(.button){
+  margin: 3px;
+}
+</style>
+<DocHeader title="stable" subtitle="表格" />
+
+<!-- <button class="button is-primary"  on:click="{() => add()}">添加</button> -->
+
+<p class="title is-4">基础表格</p>
+<Example horizontal={true} code={`<script>
+  import { Stable } from 'svelma-pro'
+  let colums = [
+  {key: "id",title: "ID"},
+  {key: "name",title: "名称"},
+  {key: "date",title: "时间"},
+  {key: "admin",title: "权限"},
+  {key: "desc",title: "描述"}];
+  let data = [
+  {id: 1,name: 'A',date: '2017/10/01',admin: '01',desc: '我是01'},
+  {id: 2,name: 'B',date: '2020/03/19',admin: '02',desc: '我是02'},
+  {id: 3,name: 'C',date: '2019/07/15',admin: '03',desc: '我是03'},
+  ];
+  </script>
+  <Stable columns={colums} rows={data}></Stable>
+  `}>
+  <div slot="preview" style="height: 200px">
+    <Stable columns={colums} rows={data}></Stable>
+  </div>
+</Example>
+<hr class="is-medium" />
+
+
+<p class="title is-4">表格设置</p>
+更多设置参数见文档。
+<Example horizontal={true} code={`<script>
+  import { Stable } from 'svelma-pro'
+  let colums = [
+  {key: "id",title: "ID"},
+  {key: "name",title: "名称"},
+  {key: "date",title: "时间"},
+  {key: "admin",title: "权限"},
+  {key: "desc",title: "描述"}];
+  let data = [
+  {id: 1,name: 'A',date: '2017/10/01',admin: '01',desc: '我是01'},
+  {id: 2,name: 'B',date: '2020/03/19',admin: '02',desc: '我是02'},
+  {id: 3,name: 'C',date: '2019/07/15',admin: '03',desc: '我是03'},
+  ];
+  </script>
+  <Stable columns={colums} rows={data} checkbox={true} bordered={true} narrow={true}></Stable>
+  `}>
+  <div slot="preview" style="height:200px">
+    <Stable columns={colums} rows={data} checkbox={true} bordered={true} narrow={true}></Stable>
+  </div>
+</Example>
+<hr class="is-medium" />
+
+
+<p class="title is-4">高级表格配置</p>
+更多高级配置项详见文档。
+<Example horizontal={true} code={`<script>
+  import { Stable } from 'svelma-pro'
+  import {Button} from "svelma-pro";
+
+  let sortBy = "first_name";
+  let sortOrder = 1;
+
+  const colums2 = [{
+      key: "id",
+      title: "ID",
+      sortable: true,
+    },
+    {
+      key: "first_name",
+      title: "FIRST NAME",
+      sortable: true,
+    },
+    {
+      key: "last_name",
+      title: "LAST NAME",
+      sortable: true,
+      component: true
+    },
+    {
+      key: "email",
+      title: "EMAIL",
+      sortable: true
+    },
+    {
+      key: "gender",
+      title: "GENDER",
+      sortable: true,
+    },
+    {
+      key: "ip_address",
+      title: "IP ADDRESS",
+      sortable: true,
+    },
+  ];
+
+  const data2 = [{
+      id: 234,
+      first_name: "1",
+      last_name: "234",
+      gender: "Mal1e",
+      ip_address: "192.168.",
+      email: "234",
+    },
+    {
+      id: 234,
+      first_name: "2",
+      last_name: "234",
+      gender: "Male",
+      ip_address: "192.168.",
+      email: "234",
+    },
+  ];
+
+  function submit(v){
+    alert('当前行为'+v.id);
+  }
+
+     <Stable columns={colums2} rows={data2} bind:sortBy bind:sortOrder>
+      <div class="buttons" slot="component" let:row>
+        <Button type="is-primary" size="is-small" on:click={(e)=>submit(row)}>Submit</Button>
+        <Button type="is-primary" size="is-small" >Reset</Button>
+      </div>
+    </Stable>
+  `}>
+  <div slot="preview" style="height:200px">
+    <Stable columns={colums2} rows={data2} bind:sortBy bind:sortOrder key={'id'} activedRowKey={[2]}>
+      <div class="buttons" slot="component" let:row>
+        <Button type="is-primary" size="is-small"  on:click={(e)=>submit(row)}>Submit</Button>
+        <Button type="is-primary" size="is-small" >Reset</Button>
+      </div>
+    </Stable>
+  </div>
+</Example>
+
+<MDDoc html={md.html}></MDDoc>
+<!-- <img src="./stable.png" alt=""> -->

docs/src/routes/components/switch.svelte

@@ -0,0 +1,134 @@
+<script context="module">
+  export async function preload() {
+    const res = await this.fetch(`components/switch.json`);
+    const jsdoc = await res.json();
+
+    return { jsdoc };
+  }
+</script>
+
+<script>
+  import { Switch } from 'svelma-pro'
+  import DocHeader from '../../components/DocHeader.svelte'
+  import Example from '../../components/Example.svelte'
+  import JSDoc from '../../components/JSDoc.svelte'
+
+  export let jsdoc
+  let val
+</script>
+
+<DocHeader title="Switch" subtitle="开关" />
+
+<Example code={`<script>
+  import { Switch } from 'svelma-pro'
+  
+  let val
+</script>
+
+<div class="field">
+  <Switch bind:checked={val}>Foo</Switch>
+  <br>
+  <code>value = {JSON.stringify(val)}</code>
+</div>
+<div class="field">
+  <Switch disabled>Disabled</Switch>
+</div>
+`}>
+  <div slot="preview">
+    <div class="field">
+      <Switch bind:checked={val}>Foo</Switch>
+      <br>
+      <code>value = {JSON.stringify(val)}</code>
+    </div>
+    <div class="field">
+      <Switch disabled>Disabled</Switch>
+    </div>
+  </div>
+</Example>
+
+<hr class="is-medium">
+<p class="title is-4">Types</p>
+
+<Example code={`<script>
+  import { Switch } from 'svelma-pro'
+</script>
+
+<div class="field">
+  <Switch checked="true" type="is-primary">Primary</Switch>
+</div>
+<div class="field">
+  <Switch checked="true" type="is-danger">Danger</Switch>
+</div>
+<div class="field">
+  <Switch checked="true" type="is-warning">Warning</Switch>
+</div>
+<div class="field">
+  <Switch checked="true" type="is-info">Info</Switch>
+</div>
+<div class="field">
+  <Switch checked="true" type="is-link">Link</Switch>
+</div>
+<div class="field">
+  <Switch checked="true" type="is-dark">Dark</Switch>
+</div>
+`}>
+  <div slot="preview">
+    <div class="field">
+      <Switch checked="true" type="is-primary">Primary</Switch>
+    </div>
+    <div class="field">
+      <Switch checked="true" type="is-danger">Danger</Switch>
+    </div>
+    <div class="field">
+      <Switch checked="true" type="is-warning">Warning</Switch>
+    </div>
+    <div class="field">
+      <Switch checked="true" type="is-info">Info</Switch>
+    </div>
+    <div class="field">
+      <Switch checked="true" type="is-link">Link</Switch>
+    </div>
+    <div class="field">
+      <Switch checked="true" type="is-dark">Dark</Switch>
+    </div>
+  </div>
+</Example>
+
+<hr class="is-medium">
+<p class="title is-4">Sizes</p>
+
+<Example code={`<script>
+  import { Switch } from 'svelma-pro'
+</script>
+
+<div class="field">
+  <Switch size="is-small">Small</Switch>
+</div>
+<div class="field">
+  <Switch>Default</Switch>
+</div>
+<div class="field">
+  <Switch size="is-medium">Medium</Switch>
+</div>
+<div class="field">
+  <Switch size="is-large">Large</Switch>
+</div>
+</div>
+`}>
+  <div slot="preview">
+    <div class="field">
+      <Switch size="is-small">Small</Switch>
+    </div>
+    <div class="field">
+      <Switch>Default</Switch>
+    </div>
+    <div class="field">
+      <Switch size="is-medium">Medium</Switch>
+    </div>
+    <div class="field">
+      <Switch size="is-large">Large</Switch>
+    </div>
+  </div>
+</Example>
+
+<JSDoc {jsdoc}></JSDoc>

docs/src/routes/components/table.svelte

@@ -0,0 +1,262 @@
+<script context="module">
+  export async function preload(page, session) {
+    const res = await this.fetch(`components/table.json`)
+    const jsdoc = await res.json()
+
+    return { jsdoc }
+  }
+</script>
+
+<script>
+  import { onMount } from 'svelte'
+  import { Table, Icon, Datepicker } from 'svelma-pro'
+  import DocHeader from '../../components/DocHeader.svelte'
+  import Example from '../../components/Example.svelte'
+  import JSDoc from '../../components/JSDoc.svelte'
+
+  export let jsdoc
+
+  let counter = 0
+  let users = []
+  async function update() {
+    users = (await (await fetch('https://randomuser.me/api/?results=10')).json()).results
+  }
+  onMount(() => {
+    update()
+  })
+  let thead = ['ID', '名称', '日期', '负责人', '描述'];
+  let tbody = [
+    {id: 1, name: 'Sm@rtMapX', date: '2017/10/01 - 2019/11/30', admin: '王勤', desc: '敏捷GIS开发平台'},
+    {id: 2, name: 'Sm@rtEarthX', date: '2020/03/19 - 2020/10/15', admin: '宋伟', desc: '三维地图'},
+    {id: 3, name: 'Sm@rtNaviX', date: '2019/07/15 - 2020/01/15', admin: '宋伟', desc: '区域导航'},
+  ];
+
+  let thead5 = ['address', 'wkb_geometry', 'ogc_fid', 'name'];
+  let thead1 = ['address', 'wkb_geometry', 'ogc_fid', 'name', 'phone', 'phone', 'phone', 'phone', 'phone', 'phone', 'phone', 'phone', 'phone', 'phone', 'phone', 'phone', 'phone'];
+
+  let tbody6 = [
+    {"address":"云桥路875号","wkb_geometry":"{\"type\":\"Point\",\"coordinates\":[121.61760661737,31.2496435849155]}","ogc_fid":1,"name":"东区支行"},
+    {"address":"上海市浦东新区杨思路2号","wkb_geometry":"{\"type\":\"Point\",\"coordinates\":[121.485048227148,31.1566628156962]}","ogc_fid":2,"name":"杨思中石油"},
+    {"address":"上海市浦东新区张扬路648号","wkb_geometry":"{\"type\":\"Point\",\"coordinates\":[121.520938183314,31.2283605523532]}","ogc_fid":3,"name":"浙商银行"},
+    {"address":"上海市浦东新区浦东大道637号（近东方路）","wkb_geometry":"{\"type\":\"Point\",\"coordinates\":[121.522826426731,31.2408016168448]}","ogc_fid":4,"name":"大道支行"},
+    {"address":"上海市浦东新区浦东大道968号","wkb_geometry":"{\"type\":\"Point\",\"coordinates\":[121.534173711507,31.2420590355424]}","ogc_fid":5,"name":"大道二支行"},
+    {"address":"上海市浦东新区张扬路1593号（近桃林路）","wkb_geometry":"{\"type\":\"Point\",\"coordinates\":[121.538959941046,31.2349002816665]}","ogc_fid":6,"name":"桃林支行"},
+    {"address":"上海市浦东新区龚路公路1401号","wkb_geometry":"{\"type\":\"Point\",\"coordinates\":[121.71956776239,31.2741792468696]}","ogc_fid":7,"name":"浦东殡仪馆"},
+    {"address":"上海市浦东新区民春路32号","wkb_geometry":"{\"type\":\"Point\",\"coordinates\":[121.656079901542,31.2719406353719]}","ogc_fid":8,"name":"曹路支行"},
+    {"address":"上海市龙东大道5385号","wkb_geometry":"{\"type\":\"Point\",\"coordinates\":[121.68271016779,31.2341896769549]}","ogc_fid":9,"name":"龙东大道支行"},
+    {"address":"上海市浦东新区唐安路810-826号","wkb_geometry":"{\"type\":\"Point\",\"coordinates\":[121.653015908286,31.2078347418325]}","ogc_fid":10,"name":"唐镇支行"},
+    {"address":"上海市浦东新区高木桥路275号-279号","wkb_geometry":"{\"type\":\"Point\",\"coordinates\":[121.630379093694,31.1834015245085]}","ogc_fid":11,"name":"孙桥支行"},
+    {"address":"上海市张江路639号","wkb_geometry":"{\"type\":\"Point\",\"coordinates\":[121.615940251585,31.2048503375227]}","ogc_fid":12,"name":"张江支行"},
+    {"address":"上海市张江路605号","wkb_geometry":"{\"type\":\"Point\",\"coordinates\":[121.615703625075,31.2053547740292]}","ogc_fid":13,"name":"南京张江"},
+    {"address":"上海市浦东新区张江蔡伦路1200号","wkb_geometry":"{\"type\":\"Point\",\"coordinates\":[121.596673922555,31.19402692412]}","ogc_fid":14,"name":"中医大"}
+  ];
+  let tbody1 = [
+    {"address":"云桥路875号","wkb_geometry":"{\"type\":\"Point\",\"coordinates\":[121.61760661737,31.2496435849155]}","ogc_fid":1,"name":"东区支行", "phone": "13627220747", "phone1": "13627220747", "phone2": "13627220747", "phone3": "13627220747", "phone4": "13627220747", "phone5": "13627220747", "phone6": "13627220747", "phone7": "13627220747", "phone8": "13627220747", "phone9": "13627220747", "phone10": "13627220747", "phone11": "13627220747", "phone12": "13627220747"},
+    {"address":"云桥路875号","wkb_geometry":"{\"type\":\"Point\",\"coordinates\":[121.61760661737,31.2496435849155]}","ogc_fid":1,"name":"东区支行", "phone": "13627220747", "phone1": "13627220747", "phone2": "13627220747", "phone3": "13627220747", "phone4": "13627220747", "phone5": "13627220747", "phone6": "13627220747", "phone7": "13627220747", "phone8": "13627220747", "phone9": "13627220747", "phone10": "13627220747", "phone11": "13627220747", "phone12": "13627220747"},
+   {"address":"云桥路875号","wkb_geometry":"{\"type\":\"Point\",\"coordinates\":[121.61760661737,31.2496435849155]}","ogc_fid":1,"name":"东区支行", "phone": "13627220747", "phone1": "13627220747", "phone2": "13627220747", "phone3": "13627220747", "phone4": "13627220747", "phone5": "13627220747", "phone6": "13627220747", "phone7": "13627220747", "phone8": "13627220747", "phone9": "13627220747", "phone10": "13627220747", "phone11": "13627220747", "phone12": "13627220747"},
+   {"address":"云桥路875号","wkb_geometry":"{\"type\":\"Point\",\"coordinates\":[121.61760661737,31.2496435849155]}","ogc_fid":1,"name":"东区支行", "phone": "13627220747", "phone1": "13627220747", "phone2": "13627220747", "phone3": "13627220747", "phone4": "13627220747", "phone5": "13627220747", "phone6": "13627220747", "phone7": "13627220747", "phone8": "13627220747", "phone9": "13627220747", "phone10": "13627220747", "phone11": "13627220747", "phone12": "13627220747"},
+   {"address":"云桥路875号","wkb_geometry":"{\"type\":\"Point\",\"coordinates\":[121.61760661737,31.2496435849155]}","ogc_fid":1,"name":"东区支行", "phone": "13627220747", "phone1": "13627220747", "phone2": "13627220747", "phone3": "13627220747", "phone4": "13627220747", "phone5": "13627220747", "phone6": "13627220747", "phone7": "13627220747", "phone8": "13627220747", "phone9": "13627220747", "phone10": "13627220747", "phone11": "13627220747", "phone12": "13627220747"},
+   {"address":"云桥路875号","wkb_geometry":"{\"type\":\"Point\",\"coordinates\":[121.61760661737,31.2496435849155]}","ogc_fid":1,"name":"东区支行", "phone": "13627220747", "phone1": "13627220747", "phone2": "13627220747", "phone3": "13627220747", "phone4": "13627220747", "phone5": "13627220747", "phone6": "13627220747", "phone7": "13627220747", "phone8": "13627220747", "phone9": "13627220747", "phone10": "13627220747", "phone11": "13627220747", "phone12": "13627220747"},
+   {"address":"云桥路875号","wkb_geometry":"{\"type\":\"Point\",\"coordinates\":[121.61760661737,31.2496435849155]}","ogc_fid":1,"name":"东区支行", "phone": "13627220747", "phone1": "13627220747", "phone2": "13627220747", "phone3": "13627220747", "phone4": "13627220747", "phone5": "13627220747", "phone6": "13627220747", "phone7": "13627220747", "phone8": "13627220747", "phone9": "13627220747", "phone10": "13627220747", "phone11": "13627220747", "phone12": "13627220747"},
+   {"address":"云桥路875号","wkb_geometry":"{\"type\":\"Point\",\"coordinates\":[121.61760661737,31.2496435849155]}","ogc_fid":1,"name":"东区支行", "phone": "13627220747", "phone1": "13627220747", "phone2": "13627220747", "phone3": "13627220747", "phone4": "13627220747", "phone5": "13627220747", "phone6": "13627220747", "phone7": "13627220747", "phone8": "13627220747", "phone9": "13627220747", "phone10": "13627220747", "phone11": "13627220747", "phone12": "13627220747"},
+   {"address":"云桥路875号","wkb_geometry":"{\"type\":\"Point\",\"coordinates\":[121.61760661737,31.2496435849155]}","ogc_fid":1,"name":"东区支行", "phone": "13627220747", "phone1": "13627220747", "phone2": "13627220747", "phone3": "13627220747", "phone4": "13627220747", "phone5": "13627220747", "phone6": "13627220747", "phone7": "13627220747", "phone8": "13627220747", "phone9": "13627220747", "phone10": "13627220747", "phone11": "13627220747", "phone12": "13627220747"},
+   {"address":"云桥路875号","wkb_geometry":"{\"type\":\"Point\",\"coordinates\":[121.61760661737,31.2496435849155]}","ogc_fid":1,"name":"东区支行", "phone": "13627220747", "phone1": "13627220747", "phone2": "13627220747", "phone3": "13627220747", "phone4": "13627220747", "phone5": "13627220747", "phone6": "13627220747", "phone7": "13627220747", "phone8": "13627220747", "phone9": "13627220747", "phone10": "13627220747", "phone11": "13627220747", "phone12": "13627220747"},
+   {"address":"云桥路875号","wkb_geometry":"{\"type\":\"Point\",\"coordinates\":[121.61760661737,31.2496435849155]}","ogc_fid":1,"name":"东区支行", "phone": "13627220747", "phone1": "13627220747", "phone2": "13627220747", "phone3": "13627220747", "phone4": "13627220747", "phone5": "13627220747", "phone6": "13627220747", "phone7": "13627220747", "phone8": "13627220747", "phone9": "13627220747", "phone10": "13627220747", "phone11": "13627220747", "phone12": "13627220747"}
+  ];
+
+  function getChecked(res) {
+    console.log(res.detail)
+  }
+  function add() {
+    tbody.push({id: 4, name: 'Sm@334rtNaviX', date: '201r349/07/15 - 2020/01/15', admin: '宋434伟', desc: '区域434导航'})
+    // tbody = tbody;
+    // console.log(tbody)
+  }
+</script>
+
+<style>
+
+</style>
+<DocHeader title="table" subtitle="表格" />
+
+<!-- <button class="button is-primary"  on:click="{() => add()}">添加</button> -->
+
+<p class="title is-4">基础表格</p>
+<Example
+  horizontal={true}
+  code={`<script>
+  import { Table } from 'svelma-pro'
+  let thead = ['ID', '名称', '日期', '负责人', '描述']
+  let tbody = [
+    {id: 1, name: 'Sm@rtMapX', date: '2017/10/01 - 2019/11/30', admin: '王勤', desc: '敏捷GIS开发平台'},
+    {id: 2, name: 'Sm@rtEarthX', date: '2020/03/19 - 2020/10/15', admin: '宋伟', desc: '三维地图'},
+    {id: 3, name: 'Sm@rtNaviX', date: '2019/07/15 - 2020/01/15', admin: '宋伟', desc: '区域导航'},
+  ]
+</script>
+<Table 
+  types="is-bordered is-striped is-hoverable is-fullwidth"
+  thead={thead}
+  tbody={tbody}>
+</Table>
+`}>
+ <div slot="preview">
+  <Table 
+    types="is-bordered is-striped is-hoverable is-fullwidth"
+    thead={thead}
+    bind:tbody={tbody}>
+  </Table>
+ </div>
+</Example>
+<hr class="is-medium" />
+
+
+
+<p class="title is-4">自定义表格</p>
+  <!-- <Table custom={false} checkbox {thead} {tbody} bodyHeight="400px" on:checked="{(res) => getChecked(res)}" types="is-bordered is-striped is-hoverable is-fullwidth"> -->
+<Example
+  horizontal={true}
+  code={`<script>
+  import { Table, Datepicker } from 'svelma-pro'
+  let thead = ['ID', '名称', '日期', '负责人', '描述']
+  let tbody = [
+    {id: 1, name: 'Sm@rtMapX', date: '2017/10/01 - 2019/11/30', admin: '王勤', desc: '敏捷GIS开发平台'},
+    {id: 2, name: 'Sm@rtEarthX', date: '2020/03/19 - 2020/10/15', admin: '宋伟', desc: '三维地图'},
+    {id: 3, name: 'Sm@rtNaviX', date: '2019/07/15 - 2020/01/15', admin: '宋伟', desc: '区域导航'},
+  ]
+</script>
+<!-- 自定义表格的表格基础样式都属于自定义范畴 -->
+<Table 
+  types="is-bordered is-striped is-hoverable is-fullwidth" 
+  custom thead={thead} tbody={tbody}>
+  <!-- head插槽会返回相应渲染值：head -->
+  <th slot="head" let:head>
+    {#if head == '负责人'}
+      <span style="color: red">{head}</span>
+    {:else}
+      <span>{head}</span>
+    {/if}
+  </th>
+  <!-- body插槽会返回相应行的对象和索引:row、index, 以及每列对应的key -->
+  <td slot="body" let:row let:key let:index>
+    {#if key == 'admin'}
+      <span style="color: red">{row[key]}</span>
+    {:else if key == 'date'}
+      <Datepicker/>
+    {:else}
+      <span>{row[key]}</span>
+    {/if}
+  </td>
+</Table>
+`}>
+ <div slot="preview">
+  <Table 
+    types="is-bordered is-striped is-hoverable is-fullwidth"
+    custom thead={thead} tbody={tbody}>
+    <!-- head插槽会返回相应渲染值：head -->
+    <th slot="head" let:head>
+      {#if head == '负责人'}
+        <span style="color: red">{head}</span>
+      {:else}
+        <span>{head}</span>
+      {/if}
+    </th>
+    <!-- body插槽会返回相应行的对象和索引:row、index, 以及每列对应的key -->
+    <td slot="body" let:row let:key let:index>
+      {#if key == 'admin'}
+        <span style="color: red">{row[key]}</span>
+      {:else if key == 'date'}
+        <Datepicker/>
+      {:else}
+        <span>{row[key]}</span>
+      {/if}
+    </td>
+  </Table>
+ </div>
+</Example>  
+<hr class="is-medium" />
+
+
+<p class="title is-4">添加选择框</p>
+<Example
+  horizontal={true}
+  code={`<script>
+  import { Table } from 'svelma-pro'
+  let thead = ['ID', '名称', '日期', '负责人', '描述']
+  let tbody = [
+    {id: 1, name: 'Sm@rtMapX', date: '2017/10/01 - 2019/11/30', admin: '王勤', desc: '敏捷GIS开发平台'},
+    {id: 2, name: 'Sm@rtEarthX', date: '2020/03/19 - 2020/10/15', admin: '宋伟', desc: '三维地图'},
+    {id: 3, name: 'Sm@rtNaviX', date: '2019/07/15 - 2020/01/15', admin: '宋伟', desc: '区域导航'},
+  ]
+  function getChecked(res) {
+    console.log(res.detail)
+  }
+</script>
+<Table 
+  types="is-bordered is-striped is-hoverable is-fullwidth"
+  thead={thead}
+  tbody={tbody}
+  checkbox
+  on:checked={(res) => getChecked(res)}>
+</Table>
+`}>
+ <div slot="preview">
+  <Table 
+    types="is-bordered is-striped is-hoverable is-fullwidth"
+    thead={thead}
+    tbody={tbody}
+    checkbox 
+    on:checked={(res) => getChecked(res)}>
+  </Table>
+ </div>
+</Example>
+<hr class="is-medium" />
+
+
+<p class="title is-4">固定表头</p>
+<Example
+  horizontal={true}
+  code={`<script>
+  import { Table } from 'svelma-pro'
+
+  let thead = ['address', 'wkb_geometry', 'ogc_fid', 'name', 'phone', 'phone', 'phone', 'phone', 'phone', 'phone', 'phone', 'phone', 'phone', 'phone', 'phone', 'phone', 'phone'];
+  let tbody = [
+    {"address":"云桥路875号","wkb_geometry":"{\"type\":\"Point\",\"coordinates\":[121.61760661737,31.2496435849155]}","ogc_fid":1,"name":"东区支行", "phone": "13627220747", "phone1": "13627220747", "phone2": "13627220747", "phone3": "13627220747", "phone4": "13627220747", "phone5": "13627220747", "phone6": "13627220747", "phone7": "13627220747", "phone8": "13627220747", "phone9": "13627220747", "phone10": "13627220747", "phone11": "13627220747", "phone12": "13627220747"},
+    {"address":"云桥路875号","wkb_geometry":"{\"type\":\"Point\",\"coordinates\":[121.61760661737,31.2496435849155]}","ogc_fid":1,"name":"东区支行", "phone": "13627220747", "phone1": "13627220747", "phone2": "13627220747", "phone3": "13627220747", "phone4": "13627220747", "phone5": "13627220747", "phone6": "13627220747", "phone7": "13627220747", "phone8": "13627220747", "phone9": "13627220747", "phone10": "13627220747", "phone11": "13627220747", "phone12": "13627220747"},
+    {"address":"云桥路875号","wkb_geometry":"{\"type\":\"Point\",\"coordinates\":[121.61760661737,31.2496435849155]}","ogc_fid":1,"name":"东区支行", "phone": "13627220747", "phone1": "13627220747", "phone2": "13627220747", "phone3": "13627220747", "phone4": "13627220747", "phone5": "13627220747", "phone6": "13627220747", "phone7": "13627220747", "phone8": "13627220747", "phone9": "13627220747", "phone10": "13627220747", "phone11": "13627220747", "phone12": "13627220747"},
+    {"address":"云桥路875号","wkb_geometry":"{\"type\":\"Point\",\"coordinates\":[121.61760661737,31.2496435849155]}","ogc_fid":1,"name":"东区支行", "phone": "13627220747", "phone1": "13627220747", "phone2": "13627220747", "phone3": "13627220747", "phone4": "13627220747", "phone5": "13627220747", "phone6": "13627220747", "phone7": "13627220747", "phone8": "13627220747", "phone9": "13627220747", "phone10": "13627220747", "phone11": "13627220747", "phone12": "13627220747"},
+    {"address":"云桥路875号","wkb_geometry":"{\"type\":\"Point\",\"coordinates\":[121.61760661737,31.2496435849155]}","ogc_fid":1,"name":"东区支行", "phone": "13627220747", "phone1": "13627220747", "phone2": "13627220747", "phone3": "13627220747", "phone4": "13627220747", "phone5": "13627220747", "phone6": "13627220747", "phone7": "13627220747", "phone8": "13627220747", "phone9": "13627220747", "phone10": "13627220747", "phone11": "13627220747", "phone12": "13627220747"},
+    {"address":"云桥路875号","wkb_geometry":"{\"type\":\"Point\",\"coordinates\":[121.61760661737,31.2496435849155]}","ogc_fid":1,"name":"东区支行", "phone": "13627220747", "phone1": "13627220747", "phone2": "13627220747", "phone3": "13627220747", "phone4": "13627220747", "phone5": "13627220747", "phone6": "13627220747", "phone7": "13627220747", "phone8": "13627220747", "phone9": "13627220747", "phone10": "13627220747", "phone11": "13627220747", "phone12": "13627220747"},
+    {"address":"云桥路875号","wkb_geometry":"{\"type\":\"Point\",\"coordinates\":[121.61760661737,31.2496435849155]}","ogc_fid":1,"name":"东区支行", "phone": "13627220747", "phone1": "13627220747", "phone2": "13627220747", "phone3": "13627220747", "phone4": "13627220747", "phone5": "13627220747", "phone6": "13627220747", "phone7": "13627220747", "phone8": "13627220747", "phone9": "13627220747", "phone10": "13627220747", "phone11": "13627220747", "phone12": "13627220747"},
+    {"address":"云桥路875号","wkb_geometry":"{\"type\":\"Point\",\"coordinates\":[121.61760661737,31.2496435849155]}","ogc_fid":1,"name":"东区支行", "phone": "13627220747", "phone1": "13627220747", "phone2": "13627220747", "phone3": "13627220747", "phone4": "13627220747", "phone5": "13627220747", "phone6": "13627220747", "phone7": "13627220747", "phone8": "13627220747", "phone9": "13627220747", "phone10": "13627220747", "phone11": "13627220747", "phone12": "13627220747"},
+    {"address":"云桥路875号","wkb_geometry":"{\"type\":\"Point\",\"coordinates\":[121.61760661737,31.2496435849155]}","ogc_fid":1,"name":"东区支行", "phone": "13627220747", "phone1": "13627220747", "phone2": "13627220747", "phone3": "13627220747", "phone4": "13627220747", "phone5": "13627220747", "phone6": "13627220747", "phone7": "13627220747", "phone8": "13627220747", "phone9": "13627220747", "phone10": "13627220747", "phone11": "13627220747", "phone12": "13627220747"},
+    {"address":"云桥路875号","wkb_geometry":"{\"type\":\"Point\",\"coordinates\":[121.61760661737,31.2496435849155]}","ogc_fid":1,"name":"东区支行", "phone": "13627220747", "phone1": "13627220747", "phone2": "13627220747", "phone3": "13627220747", "phone4": "13627220747", "phone5": "13627220747", "phone6": "13627220747", "phone7": "13627220747", "phone8": "13627220747", "phone9": "13627220747", "phone10": "13627220747", "phone11": "13627220747", "phone12": "13627220747"},
+    {"address":"云桥路875号","wkb_geometry":"{\"type\":\"Point\",\"coordinates\":[121.61760661737,31.2496435849155]}","ogc_fid":1,"name":"东区支行", "phone": "13627220747", "phone1": "13627220747", "phone2": "13627220747", "phone3": "13627220747", "phone4": "13627220747", "phone5": "13627220747", "phone6": "13627220747", "phone7": "13627220747", "phone8": "13627220747", "phone9": "13627220747", "phone10": "13627220747", "phone11": "13627220747", "phone12": "13627220747"}
+  ];
+  function getChecked(res) {
+    console.log(res.detail)
+  }
+</script>
+<!-- 自定义表格固定表头在下拉时不起作用 -->
+<Table 
+  types="is-bordered is-striped is-hoverable is-fullwidth"
+  thead={thead}
+  tbody={tbody}
+  checkbox
+  bodyHeight="400px"
+  on:checked={(res) => getChecked(res)}>
+</Table>
+`}>
+ <div slot="preview">
+  <!-- 自定义表格固定表头在下拉时不起作用 -->
+  <Table 
+    types="is-bordered is-striped is-hoverable is-fullwidth"
+    thead={thead1}
+    tbody={tbody1}
+    checkbox 
+    bodyHeight="400px"
+    on:checked={(res) => getChecked(res)}>
+  </Table>
+ </div>
+</Example>
+
+<JSDoc {jsdoc} showEvent="true"/>

docs/src/routes/components/tabs.svelte

@@ -0,0 +1,210 @@
+<script context="module">
+  export async function preload() {
+    const tabsRes = await this.fetch(`components/tabs.json`);
+    const tabRes = await this.fetch(`components/tab.json`);
+    const jsdocTabs = await tabsRes.json();
+    const jsdocTab = await tabRes.json();
+
+    return { jsdocTabs, jsdocTab };
+  }
+</script>
+
+<script>
+  import { Tabs, Tab } from 'svelma-pro'
+  import DocHeader from '../../components/DocHeader.svelte'
+  import Example from '../../components/Example.svelte'
+  import JSDoc from '../../components/JSDoc.svelte'
+
+  export let jsdocTabs
+  export let jsdocTab
+</script>
+
+<DocHeader title="Tabs" subtitle="横向导航选项卡" />
+
+<Example code={`<script>
+  import { Tabs, Tab } from 'svelma-pro'
+</script>
+
+<Tabs>
+  <Tab label="Svelte">
+    Is cool
+  </Tab>
+  <Tab label="Vue">
+    Is good
+  </Tab>
+  <Tab label="Angular">
+    lol no
+  </Tab>
+</Tabs>`}>
+  <div slot="preview">
+    <Tabs>
+      <Tab label="Svelte">
+        Is cool
+      </Tab>
+      <Tab label="Vue">
+        Is good
+      </Tab>
+      <Tab label="Angular">
+        lol no
+      </Tab>
+    </Tabs>
+  </div>
+</Example>
+
+<hr class="is-medium">
+
+<p class="title is-4">Icons and Sizes</p>
+
+<Example code={`<script>
+  import { Tabs, Tab } from 'svelma-pro'
+</script>
+
+<Tabs>
+  <Tab label="People" icon="users"></Tab>
+  <Tab label="Places" icon="map-marker-alt"></Tab>
+  <Tab label="Things" icon="ellipsis-h"></Tab>
+</Tabs>
+
+<Tabs size="is-medium">
+  <Tab label="People" icon="users"></Tab>
+  <Tab label="Places" icon="map-marker-alt"></Tab>
+  <Tab label="Things" icon="ellipsis-h"></Tab>
+</Tabs>
+
+<Tabs size="is-large">
+  <Tab label="People" icon="users"></Tab>
+  <Tab label="Places" icon="map-marker-alt"></Tab>
+  <Tab label="Things" icon="ellipsis-h"></Tab>
+</Tabs>`}>
+  <div slot="preview">
+    <Tabs>
+      <Tab label="People" icon="users"></Tab>
+      <Tab label="Places" icon="map-marker-alt"></Tab>
+      <Tab label="Things" icon="ellipsis-h"></Tab>
+    </Tabs>
+
+    <Tabs size="is-medium">
+      <Tab label="People" icon="users"></Tab>
+      <Tab label="Places" icon="map-marker-alt"></Tab>
+      <Tab label="Things" icon="ellipsis-h"></Tab>
+    </Tabs>
+
+    <Tabs size="is-large">
+      <Tab label="People" icon="users"></Tab>
+      <Tab label="Places" icon="map-marker-alt"></Tab>
+      <Tab label="Things" icon="ellipsis-h"></Tab>
+    </Tabs>
+  </div>
+</Example>
+
+<hr class="is-medium">
+
+<p class="title is-4">Position</p>
+
+<Example code={`<script>
+  import { Tabs, Tab } from 'svelma-pro'
+</script>
+
+<Tabs position="is-centered">
+  <Tab label="People" icon="users"></Tab>
+  <Tab label="Places" icon="map-marker-alt"></Tab>
+  <Tab label="Things" icon="ellipsis-h"></Tab>
+</Tabs>
+
+<Tabs position="is-right">
+  <Tab label="People" icon="users"></Tab>
+  <Tab label="Places" icon="map-marker-alt"></Tab>
+  <Tab label="Things" icon="ellipsis-h"></Tab>
+</Tabs>`}>
+  <div slot="preview">
+    <Tabs position="is-centered">
+      <Tab label="People" icon="users"></Tab>
+      <Tab label="Places" icon="map-marker-alt"></Tab>
+      <Tab label="Things" icon="ellipsis-h"></Tab>
+    </Tabs>
+
+    <Tabs position="is-right">
+      <Tab label="People" icon="users"></Tab>
+      <Tab label="Places" icon="map-marker-alt"></Tab>
+      <Tab label="Things" icon="ellipsis-h"></Tab>
+    </Tabs>
+  </div>
+</Example>
+
+<hr class="is-medium">
+
+<p class="title is-4">Style</p>
+
+<p class="content">
+  Use <code>is-boxed</code>, <code>is-toggle</code>, <code>is-toggle</code> and <code>is-toggle-rounded</code>, or
+  <code>is-fullwidth</code> to alter to style of your tabs.
+</p>
+
+<Example code={`<script>
+  import { Tabs, Tab } from 'svelma-pro'
+</script>
+
+<Tabs style="is-boxed">
+  <Tab label="People" icon="users"></Tab>
+  <Tab label="Places" icon="map-marker-alt"></Tab>
+  <Tab label="Things" icon="ellipsis-h"></Tab>
+</Tabs>
+
+<Tabs style="is-toggle">
+  <Tab label="People" icon="users"></Tab>
+  <Tab label="Places" icon="map-marker-alt"></Tab>
+  <Tab label="Things" icon="ellipsis-h"></Tab>
+</Tabs>
+
+<Tabs style="is-toggle is-toggle-rounded">
+  <Tab label="People" icon="users"></Tab>
+  <Tab label="Places" icon="map-marker-alt"></Tab>
+  <Tab label="Things" icon="ellipsis-h"></Tab>
+</Tabs>
+
+<Tabs style="is-fullwidth">
+  <Tab label="People" icon="users"></Tab>
+  <Tab label="Places" icon="map-marker-alt"></Tab>
+  <Tab label="Things" icon="ellipsis-h"></Tab>
+</Tabs>`}>
+  <div slot="preview">
+    <Tabs style="is-boxed">
+      <Tab label="People" icon="users"></Tab>
+      <Tab label="Places" icon="map-marker-alt"></Tab>
+      <Tab label="Things" icon="ellipsis-h"></Tab>
+    </Tabs>
+
+    <Tabs style="is-toggle">
+      <Tab label="People" icon="users"></Tab>
+      <Tab label="Places" icon="map-marker-alt"></Tab>
+      <Tab label="Things" icon="ellipsis-h"></Tab>
+    </Tabs>
+
+    <Tabs style="is-toggle is-toggle-rounded">
+      <Tab label="People" icon="users"></Tab>
+      <Tab label="Places" icon="map-marker-alt"></Tab>
+      <Tab label="Things" icon="ellipsis-h"></Tab>
+    </Tabs>
+
+    <Tabs style="is-fullwidth">
+      <Tab label="People" icon="users"></Tab>
+      <Tab label="Places" icon="map-marker-alt"></Tab>
+      <Tab label="Things" icon="ellipsis-h"></Tab>
+    </Tabs>
+  </div>
+</Example>
+
+<hr class="is-medium" />
+
+<h2 class="title is-4 is-spaced">API</h2>
+
+<h3 class="subtitle">Tabs</h3>
+
+<JSDoc jsdoc={jsdocTabs} showHeader={false}  showEvent="true"></JSDoc>
+
+<br>
+<br>
+
+<h3 class="subtitle is-spaced">Tab</h3>
+
+<JSDoc jsdoc={jsdocTab} showHeader={false}></JSDoc>

docs/src/routes/components/timepicker.svelte

@@ -0,0 +1,39 @@
+<script context="module">
+  export async function preload(page, session) {
+    const res = await this.fetch(`components/timepicker.json`)
+    const jsdoc = await res.json()
+
+    return { jsdoc }
+  }
+</script>
+<script>
+  import {Timepicker} from 'svelma-pro'
+  import DocHeader from '../../components/DocHeader.svelte'
+  import Example from '../../components/Example.svelte'
+  import JSDoc from '../../components/JSDoc.svelte'
+
+  export let jsdoc
+
+   let time = new Date();
+
+   function test(e){
+    //  debugger;
+     console.log(e)
+   }
+</script>
+
+<DocHeader title="Timepicker" subtitle="时间选择器" />
+
+<Example
+  code={`<script>
+import {Timepicker} from 'svelma-pro'
+</script>
+
+<Timepicker bind:time />
+`}>
+ <div slot="preview">
+    <Timepicker bind:time  on:change={test}/>
+ </div>
+</Example>
+
+<JSDoc {jsdoc} showEvent="true"/>

docs/src/routes/components/tip.svelte

@@ -0,0 +1,73 @@
+<script>
+  import { Tip,Button } from 'svelma-pro'
+  import DocHeader from '../../components/DocHeader.svelte'
+  import Example from '../../components/Example.svelte'
+
+let config = {
+    content: '<div class="tooltip">Styled tooltip text</div>',
+    allowHTML: true,
+    trigger: 'click',
+    onShow: function(instance) {
+    console.log(instance);
+    }
+  }
+</script>
+
+<style>
+  :global(.tooltip) {
+    color: orange;
+    font-weight: bold;
+    text-transform: uppercase;
+  }
+</style>
+
+<DocHeader title="Tip" subtitle="提示" />
+
+<Example code={`<script>
+  import { Tip } from 'svelma-pro'
+</script>
+
+<Tip content="你好"></Tip>
+`}>
+  <div slot="preview">
+    <Tip content="你好">
+      <Button type="is-link">Link</Button>
+    </Tip>
+  </div>
+</Example>
+
+<hr class="is-medium" />
+
+<p class="title is-4">自定义设置</p>
+<p class="content">更多配置请参考<a href="https://atomiks.github.io/tippyjs/">tippy</a>.</p>
+
+<Example code={`<script>
+import { Tip } from 'svelma-pro'
+
+let config = {
+    content: '<div class="tooltip">Styled tooltip text</div>',
+    allowHTML: true,
+    trigger: 'click',
+    onShow: function(instance) {
+        console.log(instance);
+}
+</script>
+
+<style>
+  :global(.tooltip) {
+    color: orange;
+    font-weight: bold;
+    text-transform: uppercase;
+  }
+</style>
+
+<Tip config="{config}">
+   <Button type="is-link">Link</Button>
+</Tip>
+`}>
+  <div slot="preview">
+    <Tip config={config}>
+        <Button type="is-link">Link</Button>
+    </Tip>
+  </div>
+</Example>

docs/src/routes/components/toast.svelte

@@ -0,0 +1,55 @@
+<script context="module">
+  export async function preload() {
+    const res = await this.fetch(`components/toast.json`);
+    const jsdoc = await res.json();
+
+    return { jsdoc };
+  }
+</script>
+
+<script>
+  import { Button, Toast } from 'svelma-pro'
+  import DocHeader from '../../components/DocHeader.svelte'
+  import Example from '../../components/Example.svelte'
+  import JSDoc from '../../components/JSDoc.svelte'
+
+  export let jsdoc
+
+  function open(type, position, background) {
+    Toast.create({ message: 'I am a toast', type, position, background })
+  }
+</script>
+
+<style>
+.buttons {
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+}
+</style>
+
+<DocHeader title="Toast" subtitle="吐司" />
+
+<Example code={`<script>
+  import { Button, Toast } from 'svelma-pro'
+
+  function open(type, position) {
+    Toast.create({ message: 'I am a toast', type, position })
+  }
+</script>
+
+<Button on:click={() => open()}>Toast</Button>
+<Button type="is-success" on:click={() => open('is-success')}>Success</Button>
+<Button type="is-danger" on:click={() => open('is-danger', 'is-bottom-right')}>Bottom Right</Button>
+<Button type="is-primary" on:click={() => open('is-primary', 'is-top', 'has-background-grey-lighter')}>Custom Background</Button>`}>
+  <div slot="preview">
+    <div class="buttons">
+      <Button on:click={() => open()}>Toast</Button>
+      <Button type="is-success" on:click={() => open('is-success')}>Success</Button>
+      <Button type="is-danger" on:click={() => open('is-danger', 'is-bottom-right')}>Bottom Right</Button>
+      <Button type="is-primary" on:click={() => open('is-primary', 'is-top', 'has-background-grey-lighter')}>Custom Background</Button>
+    </div>
+  </div>
+</Example>
+
+<JSDoc {jsdoc} />

docs/src/routes/index.svelte

@@ -0,0 +1,72 @@
+<script>
+  import { Message } from 'svelma-pro'
+</script>
+
+<style>
+  h1,
+  /* figure, */
+  p {
+    text-align: center;
+    margin: 0 auto;
+  }
+
+  h1 {
+    font-size: 2.8em;
+    text-transform: uppercase;
+    font-weight: 700;
+    margin: 0 0 0.5em 0;
+  }
+
+  /* figure {
+    margin: 0 0 1em 0;
+  }
+
+  img {
+    width: 100%;
+    max-width: 400px;
+    margin: 0 0 1em 0;
+  } */
+
+  p {
+    margin: 1em auto;
+  }
+
+  @media (min-width: 480px) {
+    h1 {
+      font-size: 4em;
+    }
+  }
+
+  pre {
+    display: inline-flex;
+  }
+</style>
+
+<svelte:head>
+  <title>svelma-pro</title>
+  <meta property="og:type" content="website" />
+  <meta property="og:title" content="Svelma" />
+  <meta property="og:description" content="Bulma components for Svelte" />
+</svelte:head>
+
+<div class="hero is-full-height">
+  <div class="hero-body">
+    <div class="container has-text-centered">
+      <h1 class="title">svelma-pro</h1>
+      <h2 class="subtitle">基于bluma样式库为svelte及sapper框架封装的通用组件库.</h2>
+
+      <pre>
+        <code>$ npm install svelma-pro</code>
+      </pre>
+
+      <br />
+      <br />
+
+      <p>
+        <Message title="Note!" type="is-primary" showClose={false}>
+          为了针对svelte市面成熟组件库缺少及组件分散的情况,团队在开源项目的基础上定制及扩展团队私有组件库,可以避免大量的引入分散组件导致的模块管理混乱及市面组件无法自定义扩展,升级等问题.
+        </Message>
+      </p>
+    </div>
+  </div>
+</div>

docs/src/routes/install/index.svelte

@@ -0,0 +1,155 @@
+<script>
+  import { Message } from 'svelma-pro'
+  import DocHeader from '../../components/DocHeader.svelte'
+  import Codeview from '../../components/Code.svelte'
+</script>
+
+<DocHeader title="Start" subtitle="如何使用" />
+<br/>
+<br/>
+<div class="media">
+  <div class="media-left">
+    <p class="title">1</p>
+  </div>
+  <div class="media-content">
+    <p class="title">NPM</p>
+    <p class="subtitle is-spaced">此组件库适用于基于rollup或者webpack搭建的svelte及sapper项目</p>
+    <p class="title is-4">下载安装</p>
+
+    <div class="content">下载bluma与组件库.</div>
+
+    <Codeview lang="bash">npm install --save bulma svelma-pro</Codeview>
+
+    <div class="content">集成scss模板语法支持(因为组件库采用了类似vue的scss模板写法,所以需要也集成进去).</div>
+
+    <Codeview lang="bash">npm install --save-dev svelte-preprocess autoprefixer node-sass sass</Codeview>
+
+    <div class="content">
+      添加
+      <code>scss编译</code>
+      到你的
+      <code>rollup.config.js</code>
+      配置文件中(或者webpack.config.js).
+    </div>
+
+    <Codeview
+      lang="js"
+      code={`import sveltePreprocess from 'svelte-preprocess';
+const preprocess = sveltePreprocess({
+  scss: {
+    includePaths: ['src'],
+  },
+  postcss: {
+    plugins: [require('autoprefixer')],
+  },
+});
+
+// ...
+
+export default {
+  // ... 
+  plugins: [
+    svelte({
+      // ...
+      preprocess: preprocess,
+    })
+  ]
+}`} />
+
+   <div class="content">
+      如果使用webpack,在
+      <code>webpack.config.js</code>
+      配置文件中.
+    </div>
+    <Codeview
+      lang="js"
+      code={`import sveltePreprocess from 'svelte-preprocess';
+const preprocess = sveltePreprocess({
+  scss: {
+    includePaths: ['src'],
+  },
+  postcss: {
+    plugins: [require('autoprefixer')],
+  },
+});
+
+// ...
+
+module.export = {
+  // ... 
+  module: {
+    rules: [
+      {
+        test: /\.(svelte|html)$/,
+        use: {
+          loader: 'svelte-loader',
+          options: {
+            preprocess, 
+            // ...
+          }
+        }
+      },
+    ]
+  },
+  ]
+}`} />
+
+    <p class="title is-4">使用</p>
+    <div class="content">引入bluma样式到您的项目</div>
+    <Codeview lang="html" code={`
+<!-- main.js或者client.js全局引入 -->
+<script>
+  import 'bulma/css/bulma.css'
+</script>
+    `}>
+    </Codeview>
+
+    <div class="content">
+      svelma-pro组件可以一次导入一个，就像这样
+    </div>
+    <Codeview lang="html" code={`
+<script>
+  import { Button } from 'svelma-pro'
+</script>
+
+<Button>I am a Button</Button>
+    `}>
+    </Codeview>
+
+    <div class="content">
+      或导入完整的Svelma软件包。
+    </div>
+    <Codeview lang="html" code={`
+<script>
+  import { Svelma } from 'svelma-pro'
+</script>
+
+<Svelma.Button>I am a Button</Svelma.Button>
+    `}>
+    </Codeview>
+    
+  </div>
+</div>
+
+<hr class="is-medium">
+
+<div class="media">
+  <div class="media-left">
+    <p class="title">2</p>
+  </div>
+  <div class="media-content">
+    <p class="title is-spaced">使用 [Font Awesome] 图标</p>
+
+    添加 CDN 在你的 HTML 页面:
+    <Codeview lang="bash" code={`
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"></link>
+`}/>
+    ...或者使用npm包:
+    <Codeview lang="bash" code={`npm install --save @fortawesome/fontawesome-free`}/>
+<Codeview lang="bash" code={`<!-- main.js or client.js(sapper) -->
+<script>
+  import '@fortawesome/fontawesome-free/css/all.css'
+</script>`}/>
+
+ </div>
+</div>

docs/src/server.js

@@ -0,0 +1,18 @@
+import sirv from 'sirv';
+import polka from 'polka';
+import compression from 'compression';
+import * as sapper from '@sapper/server';
+
+const { PORT, NODE_ENV } = process.env;
+const dev = NODE_ENV === 'development';
+
+polka() // You can also use Express
+	.use(...[
+		process.env.SAPPER_EXPORT && '/svelma-pro' || undefined,
+		compression({ threshold: 0 }),
+		sirv('static', { dev }),
+		sapper.middleware()
+	].filter(x => !!x))
+	.listen(PORT, err => {
+		if (err) console.log('error', err);
+	});

docs/src/service-worker.js

@@ -0,0 +1,82 @@
+import { timestamp, files, shell, routes } from '@sapper/service-worker';
+
+const ASSETS = `cache${timestamp}`;
+
+// `shell` is an array of all the files generated by the bundler,
+// `files` is an array of everything in the `static` directory
+const to_cache = shell.concat(files);
+const cached = new Set(to_cache);
+
+self.addEventListener('install', event => {
+	event.waitUntil(
+		caches
+			.open(ASSETS)
+			.then(cache => cache.addAll(to_cache))
+			.then(() => {
+				self.skipWaiting();
+			})
+	);
+});
+
+self.addEventListener('activate', event => {
+	event.waitUntil(
+		caches.keys().then(async keys => {
+			// delete old caches
+			for (const key of keys) {
+				if (key !== ASSETS) await caches.delete(key);
+			}
+
+			self.clients.claim();
+		})
+	);
+});
+
+self.addEventListener('fetch', event => {
+	if (event.request.method !== 'GET' || event.request.headers.has('range')) return;
+
+	const url = new URL(event.request.url);
+
+	// don't try to handle e.g. data: URIs
+	if (!url.protocol.startsWith('http')) return;
+
+	// ignore dev server requests
+	if (url.hostname === self.location.hostname && url.port !== self.location.port) return;
+
+	// always serve static files and bundler-generated assets from cache
+	if (url.host === self.location.host && cached.has(url.pathname)) {
+		event.respondWith(caches.match(event.request));
+		return;
+	}
+
+	// for pages, you might want to serve a shell `service-worker-index.html` file,
+	// which Sapper has generated for you. It's not right for every
+	// app, but if it's right for yours then uncomment this section
+	/*
+	if (url.origin === self.origin && routes.find(route => route.pattern.test(url.pathname))) {
+		event.respondWith(caches.match('/service-worker-index.html'));
+		return;
+	}
+	*/
+
+	if (event.request.cache === 'only-if-cached') return;
+
+	// for everything else, try the network first, falling back to
+	// cache if the user is offline. (If the pages never change, you
+	// might prefer a cache-first approach to a network-first one.)
+	event.respondWith(
+		caches
+			.open(`offline${timestamp}`)
+			.then(async cache => {
+				try {
+					const response = await fetch(event.request);
+					cache.put(event.request, response.clone());
+					return response;
+				} catch(err) {
+					const response = await cache.match(event.request);
+					if (response) return response;
+
+					throw err;
+				}
+			})
+	);
+});

docs/src/template.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <meta name="theme-color" content="#333333" />
+
+    %sapper.base%
+
+    <link rel="stylesheet" href="global.css" />
+    <link rel="manifest" href="manifest.json" />
+    <link rel="icon" type="image/png" href="favicon.ico" />
+
+    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" /> -->
+    <!-- <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script> -->
+    <link rel="stylesheet" href="./all.css"></link>
+
+    <!-- Sapper generates a <style> tag containing critical CSS
+	     for the current page. CSS for the rest of the app is
+	     lazily loaded when it precaches secondary pages -->
+    %sapper.styles%
+
+    <!-- This contains the contents of the <svelte:head> component, if
+	     the current page has one -->
+    %sapper.head%
+  </head>
+  <body>
+    <!-- The application will be rendered inside this element,
+	     because `app/client.js` references it -->
+    <div id="sapper">%sapper.html%</div>
+
+    <!-- Sapper creates a <script> tag containing `app/client.js`
+	     and anything else it needs to hydrate the app and
+	     initialise the router -->
+    %sapper.scripts%
+  </body>
+</html>

docs/static/global.css

@@ -0,0 +1,85 @@
+/* body {
+  margin: 0;
+  font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,
+    Helvetica Neue, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #333;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0 0 0.5em 0;
+  font-weight: 400;
+  line-height: 1.2;
+}
+
+h1 {
+  font-size: 2em;
+}
+
+a {
+  color: inherit;
+}
+
+code {
+  font-family: menlo, inconsolata, monospace;
+  font-size: calc(1em - 2px);
+  color: #555;
+  background-color: #f0f0f0;
+  padding: 0.2em 0.4em;
+  border-radius: 2px;
+}
+
+@media (min-width: 400px) {
+  body {
+    font-size: 16px;
+  }
+} */
+header.header {
+  border-bottom: 2px solid #f5f5f5;
+  margin-bottom: 3rem;
+  padding-bottom: 3rem;
+}
+
+header.header .subtitle {
+  color: #7a7a7a;
+}
+
+hr.is-medium {
+  margin: 3rem 0
+}
+
+.control .icon.is-clickable, .control.has-icons-left .icon.is-clickable, .control.has-icons-right .icon.is-clickable {
+  pointer-events: auto;
+  cursor: pointer;
+}
+html::-webkit-scrollbar{
+  display: none;
+}
+
+
+ @media screen and (max-width: 1087px){
+  html::-webkit-scrollbar{
+    width: 5px;
+    display: block;
+  }
+  html::-webkit-scrollbar-track{
+    background: rgb(239, 239, 239);
+    border-radius:2px;
+  }
+  html::-webkit-scrollbar-thumb{
+    background: #bfbfbf;
+    border-radius:10px;
+  }
+  html::-webkit-scrollbar-thumb:hover{
+    background: #333;
+  }
+  html::-webkit-scrollbar-corner{
+    background: #179a16;
+  }
+} 

docs/static/manifest.json

@@ -0,0 +1,20 @@
+{
+	"background_color": "#ffffff",
+	"theme_color": "#333333",
+	"name": "Svelma",
+	"short_name": "Svelma",
+	"display": "minimal-ui",
+	"start_url": "/",
+	"icons": [
+		{
+			"src": "logo-192.png",
+			"sizes": "192x192",
+			"type": "image/png"
+		},
+		{
+			"src": "logo-512.png",
+			"sizes": "512x512",
+			"type": "image/png"
+		}
+	]
+}

docs/static/svelma-logo.svg

@@ -0,0 +1,86 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Gravit.io -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   style="isolation:isolate"
+   viewBox="0 0 93.19593 126.78137"
+   width="93.19593"
+   height="126.78137"
+   version="1.1"
+   id="svg13"
+   sodipodi:docname="svelte-logo(1).svg"
+   inkscape:version="0.92.2 5c3e80d, 2017-08-06">
+  <metadata
+     id="metadata17">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1107"
+     inkscape:window-height="721"
+     id="namedview15"
+     showgrid="false"
+     inkscape:zoom="1.0300053"
+     inkscape:cx="254.27558"
+     inkscape:cy="73.807952"
+     inkscape:window-x="189"
+     inkscape:window-y="87"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg13"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <defs
+     id="defs5">
+    <clipPath
+       id="_clipPath_tx9IWIff9jpFhn3EvaPjyIq3XXdSNcS0">
+      <rect
+         width="519"
+         height="139"
+         id="rect2"
+         x="0"
+         y="0" />
+    </clipPath>
+  </defs>
+  <g
+     clip-path="url(#_clipPath_tx9IWIff9jpFhn3EvaPjyIq3XXdSNcS0)"
+     id="g11"
+     inkscape:export-xdpi="95.919998"
+     inkscape:export-ydpi="95.919998"
+     transform="translate(-22.975806,-7.0562131)">
+    <path
+       d="M 110.23,28.39 C 99.83,13.51 97.139206,0.86190476 82.289206,10.321905 L 38.36,35.18 c -7.117,4.47 -12.025,11.729 -13.52,20 -1.247,6.904 -0.156,14.026 3.1,20.24 -2.232,3.386 -3.752,7.189 -4.47,11.18 -1.505,8.446 0.46,17.142 5.45,24.12 10.4,14.88 13.090794,29.58762 27.940794,20.12762 L 100.79,104 c 7.109,-4.479 12.013,-11.734 13.52,-20 1.243,-6.902 0.148,-14.02 -3.11,-20.23 2.231,-3.387 3.754,-7.19 4.48,-11.18 1.5,-8.446 -0.464,-17.14 -5.45,-24.12"
+       id="path7"
+       inkscape:connector-curvature="0"
+       style="fill:#00c4a7"
+       sodipodi:nodetypes="ccccccccccccc" />
+    <path
+       d="m 61.89,112.135 c -8.41,2.183 -17.288,-1.111 -22.24,-8.25 -2.999,-4.195 -4.178,-9.423 -3.27,-14.5 0.147,-0.817 0.355,-1.623 0.62,-2.41 l 0.49,-1.5 1.34,1 c 3.08,2.249 6.519,3.96 10.17,5.06 l 1,0.29 -0.09,1 c -0.096,1.371 0.289,2.733 1.09,3.85 1.494,2.148 4.168,3.137 6.7,2.48 0.565,-0.152 1.105,-0.388 1.6,-0.7 l 26.04,-16.62 c 1.293,-0.813 2.183,-2.135 2.45,-3.64 0.269,-1.532 -0.091,-3.107 -1,-4.37 -1.494,-2.147 -4.168,-3.137 -6.7,-2.48 -0.566,0.15 -1.106,0.386 -1.6,0.7 l -10,6.35 c -1.636,1.037 -3.419,1.82 -5.29,2.32 -8.395,2.169 -17.253,-1.118 -22.2,-8.24 -2.99,-4.199 -4.162,-9.426 -3.25,-14.5 0.893,-4.984 3.844,-9.362 8.13,-12.06 L 72,29.295 c 1.626,-1.035 3.399,-1.817 5.26,-2.32 8.407,-2.183 17.283,1.111 22.23,8.25 3.002,4.194 4.185,9.422 3.28,14.5 -0.156,0.822 -0.363,1.634 -0.62,2.43 l -0.5,1.5 -1.33,-1 c -3.087,-2.265 -6.536,-3.99 -10.2,-5.1 l -1,-0.29 0.09,-1 c 0.115,-1.378 -0.26,-2.752 -1.06,-3.88 -1.503,-2.11 -4.155,-3.069 -6.66,-2.41 -0.566,0.15 -1.106,0.386 -1.6,0.7 L 53.8,57.265 c -1.288,0.815 -2.177,2.131 -2.45,3.63 -0.264,1.535 0.096,3.112 1,4.38 1.487,2.127 4.133,3.115 6.65,2.48 0.564,-0.154 1.103,-0.39 1.6,-0.7 l 10,-6.34 c 1.634,-1.048 3.422,-1.834 5.3,-2.33 8.405,-2.189 17.282,1.102 22.23,8.24 3,4.195 4.183,9.423 3.28,14.5 -0.893,4.985 -3.844,9.363 -8.13,12.06 l -26.09,16.62 c -1.639,1.041 -3.426,1.826 -5.3,2.33"
+       id="path9"
+       inkscape:connector-curvature="0"
+       style="fill:#ffffff" />
+  </g>
+</svg>