[
  {
    "path": ".babelrc",
    "content": "{\n    \"presets\": [\"vue\", [\"es2015\", { \"modules\": false }], \"stage-1\"],\n    \"comments\": false,\n    \"plugins\": [\n        \"transform-runtime\",\n        \"transform-object-assign\"\n    ]\n}\n"
  },
  {
    "path": ".editorconfig",
    "content": "root = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size = 4\nend_of_line = lf\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n\n[*.{json,yml}]\ntrim_trailing_whitespace = false\n\n"
  },
  {
    "path": ".eslintignore",
    "content": "build.js\nwebpack.*.js\n"
  },
  {
    "path": ".eslintrc.js",
    "content": "module.exports = {\n    extends: 'vue-impression',\n    rules: {\n        'import/no-extraneous-dependencies': 0,\n    }\n};\n"
  },
  {
    "path": ".gitignore",
    "content": "/node_modules\n/site/build\n/site/node_modules\n/site/.sass-cache\n/site/src/scripts/components/impression\n/site/src/styles/impression\n/build\n/cache\n*.log\n/.idea\n/.sass-cache\nscss-lint-report.xml\n/lib\n.DS_Store\n/dist\n"
  },
  {
    "path": ".npmignore",
    "content": "/build\n/site\n/.sass-cache\n.DS_Store\nMakefile\n.babelrc\n.editorconfig\n.eslintignore\n.eslintrc.js\n.scss-lint.yml\nindex.todo\n/src\nwebpack.*.js\n*.log\n_config.yml\nbuild.js\ngulpfile.js\nindex.html\n"
  },
  {
    "path": ".scss-lint.yml",
    "content": "scss_files: \"src/styles/**/*.scss\"\nexclude: ['src/styles/font-awesome/**', 'src/styles/modules/_normalize.scss', 'src/styles/modules/_reboot.scss']\nplugin_directories: ['.scss-linters']\n\n# List of gem names to load custom linters from (make sure they are already\n# installed)\nplugin_gems: []\n\n# Default severity of all linters.\nseverity: warning\n\nlinters:\n  BangFormat:\n    enabled: true\n    space_before_bang: true\n    space_after_bang: false\n\n  BemDepth:\n    enabled: false\n    max_elements: 1\n\n  BorderZero:\n    enabled: true\n    convention: zero # or `none`\n\n  ChainedClasses:\n    enabled: false\n\n  ColorKeyword:\n    enabled: true\n\n  ColorVariable:\n    enabled: true\n\n  Comment:\n    enabled: true\n    style: silent\n\n  DebugStatement:\n    enabled: true\n\n  DeclarationOrder:\n    enabled: false\n\n  DisableLinterReason:\n    enabled: false\n\n  DuplicateProperty:\n    enabled: true\n\n  ElsePlacement:\n    enabled: true\n    style: same_line # or 'new_line'\n\n  EmptyLineBetweenBlocks:\n    enabled: true\n    ignore_single_line_blocks: true\n\n  EmptyRule:\n    enabled: true\n\n  ExtendDirective:\n    enabled: false\n\n  FinalNewline:\n    enabled: true\n    present: true\n\n  HexLength:\n    enabled: true\n    style: short # or 'long'\n\n  HexNotation:\n    enabled: true\n    style: lowercase # or 'uppercase'\n\n  HexValidation:\n    enabled: true\n\n  IdSelector:\n    enabled: true\n\n  ImportantRule:\n    enabled: false\n\n  ImportPath:\n    enabled: true\n    leading_underscore: false\n    filename_extension: false\n\n  Indentation:\n    enabled: true\n    allow_non_nested_indentation: false\n    character: space # or 'tab'\n    width: 4\n\n  LeadingZero:\n    enabled: true\n    style: exclude_zero # or 'include_zero'\n\n  MergeableSelector:\n    enabled: true\n    force_nesting: true\n\n  NameFormat:\n    enabled: true\n    allow_leading_underscore: true\n    convention: hyphenated_lowercase # or 'camel_case', or 'snake_case', or a regex pattern\n\n  NestingDepth:\n    enabled: true\n    max_depth: 6\n    ignore_parent_selectors: false\n\n  PlaceholderInExtend:\n    enabled: false\n\n  PrivateNamingConvention:\n    enabled: false\n    prefix: _\n\n  PropertyCount:\n    enabled: false\n    include_nested: false\n    max_properties: 10\n\n  PropertySortOrder:\n    enabled: false\n    ignore_unspecified: false\n    min_properties: 2\n    separate_groups: false\n\n  PropertySpelling:\n    enabled: true\n    extra_properties: []\n    disabled_properties: []\n\n  PropertyUnits:\n    enabled: true\n    global: [\n      'ch', 'em', 'ex', 'rem',                 # Font-relative lengths\n      'cm', 'in', 'mm', 'pc', 'pt', 'px', 'q', # Absolute lengths\n      'vh', 'vw', 'vmin', 'vmax',              # Viewport-percentage lengths\n      'deg', 'grad', 'rad', 'turn',            # Angle\n      'ms', 's',                               # Duration\n      'Hz', 'kHz',                             # Frequency\n      'dpi', 'dpcm', 'dppx',                   # Resolution\n      '%']                                     # Other\n    properties: {}\n\n  PseudoElement:\n    enabled: true\n\n  QualifyingElement:\n    enabled: false\n    allow_element_with_attribute: false\n    allow_element_with_class: false\n    allow_element_with_id: false\n\n  SelectorDepth:\n    enabled: true\n    max_depth: 4\n\n  SelectorFormat:\n    enabled: true\n    convention: hyphenated_lowercase # or 'strict_BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern\n\n  Shorthand:\n    enabled: true\n    allowed_shorthands: [1, 2, 3, 4]\n\n  SingleLinePerProperty:\n    enabled: true\n    allow_single_line_rule_sets: true\n\n  SingleLinePerSelector:\n    enabled: true\n\n  SpaceAfterComma:\n    enabled: true\n    style: one_space # or 'no_space', or 'at_least_one_space'\n\n  SpaceAfterPropertyColon:\n    enabled: true\n    style: one_space # or 'no_space', or 'at_least_one_space', or 'aligned'\n\n  SpaceAfterPropertyName:\n    enabled: true\n\n  SpaceAfterVariableColon:\n    enabled: false\n    style: one_space # or 'no_space', 'at_least_one_space' or 'one_space_or_newline'\n\n  SpaceAfterVariableName:\n    enabled: true\n\n  SpaceAroundOperator:\n    enabled: true\n    style: one_space # or 'at_least_one_space', or 'no_space'\n\n  SpaceBeforeBrace:\n    enabled: true\n    style: space # or 'new_line'\n    allow_single_line_padding: false\n\n  SpaceBetweenParens:\n    enabled: true\n    spaces: 0\n\n  StringQuotes:\n    enabled: true\n    style: single_quotes # or double_quotes\n\n  TrailingSemicolon:\n    enabled: true\n\n  TrailingWhitespace:\n    enabled: true\n\n  TrailingZero:\n    enabled: false\n\n  TransitionAll:\n    enabled: false\n\n  UnnecessaryMantissa:\n    enabled: true\n\n  UnnecessaryParentReference:\n    enabled: true\n\n  UrlFormat:\n    enabled: true\n\n  UrlQuotes:\n    enabled: true\n\n  VariableForProperty:\n    enabled: false\n    properties: []\n\n  VendorPrefix:\n    enabled: true\n    identifier_list: base\n    additional_identifiers: []\n    excluded_identifiers: []\n\n  ZeroUnit:\n    enabled: true\n\n  Compass::*:\n    enabled: false\n"
  },
  {
    "path": "README.md",
    "content": "# vue-impression\n\nA Vue.js 2.0 UI elements for mobile.\n\n## Demo\n\nhttps://newdadafe.github.io/impression_vue/#/button\n\n## Installation\n\n```sh\nyarn add vue-impression\n```\n\n## Usage\n\nstyles:\n\n```scss\n@import '~vue-impression/dist/styles/index.scss';\n```\n\nscripts:\n\n```js\nimport Vue from 'vue';\nimport VueImpression from 'vue-impression';\n\nVue.use(VueImpression);\n```\n\ntree-shaking:\n\n```sh\nyarn add babel-plugin-transform-imports -D\n```\n\n```json\n{\n    \"plugins\": [\n        [\n            \"transform-imports\",\n            {\n                \"vue-impression\": {\n                    \"transform\": \"vue-impression/dist/scripts/components/${member}\",\n                    \"preventFullImport\": true\n                }\n            }\n        ]\n    ]\n}\n```\n\n## Example\n\n```html\n<btn theme=\"primary\" size=\"sm\" @click=\"doSomething\">按钮</btn>\n```\n\n## Components\n\n-   [x] Button\n-   [x] Group\n-   [x] GroupTitle\n-   [x] Cell\n-   [x] Flex\n-   [x] FlexItem\n-   [x] Icon\n-   [x] Navbar\n-   [x] Navigation\n-   [x] Tabbar\n-   [x] Drawer\n-   [x] Loading\n-   [x] Alert\n-   [x] Toast\n-   [x] Radio\n-   [x] RadioGroup\n-   [x] Checkbox\n-   [x] CheckboxGroup\n-   [x] Toggle(Switch)\n-   [x] InputNumber\n-   [x] InputText\n-   [x] InputArea\n-   [x] Selector\n-   [x] Tag\n-   [x] Badge\n-   [x] Tip\n-   [x] HRule(Hr)\n-   [x] InlineSelector\n-   [x] Swipe\n-   [x] SlideUp\n-   [x] SegmentedControl\n-   [x] Media\n-   [x] Card\n-   [x] Picker\n-   [x] DatePicker\n-   [x] Search\n-   [x] BackToTop\n-   [x] Pull down\n-   [x] Pull up\n-   [x] Sideslip\n-   [x] Progressbar\n-   [x] Stepbar\n-   [x] Timeline\n-   [x] Sticky\n\n## Quick start\n\n[generator-vue-impression](https://github.com/NewDadaFE/generator/tree/master/packages/generator-vue-impression)\n"
  },
  {
    "path": "_config.yml",
    "content": "theme: jekyll-theme-cayman"
  },
  {
    "path": "gulpfile.js",
    "content": "const fs = require('fs-extra');\nconst gulp = require('gulp');\nconst minimist = require('minimist');\nconst plugin = require('gulp-load-plugins')();\nconst replaceExt = require('replace-ext');\nconst through = require('through2');\nconst { createDefaultCompiler, assemble } = require('@vue/component-compiler');\n\nconst options = minimist(process.argv.slice(2));\n\nprocess.env.NODE_ENV = options.env || 'production';\n\nconst clean = () => Promise.all([fs.emptyDir('dist'), fs.emptyDir('build')]);\n\nconst copyHTML = () => fs.copy('index.html', 'build/index.html');\n\nconst copyImage = () => fs.copy('src/images', 'build/images');\n\nconst style = () => fs.copy('src/styles', 'dist/styles');\n\nconst sass = () => {\n    return gulp\n        .src('src/styles/index.scss')\n        .pipe(plugin.sass().on('error', plugin.sass.logError))\n        .pipe(plugin.autoprefixer({ browsers: ['last 30 version', '> 90%'] }))\n        .pipe(plugin.cssmin())\n        .pipe(gulp.dest('build/styles'));\n};\n\nconst script = () => {\n    const directory = ['components', 'directives', 'mixins', 'utils'];\n    const compiler = createDefaultCompiler();\n\n    return gulp\n        .src(`src/scripts/?(${directory.join('|')})/**/*.{js,vue}`)\n        .pipe(\n            through.obj((file, encoding, callback) => {\n                if(file.extname === '.vue') {\n                    const result = compiler.compileToDescriptor(\n                        file.basename,\n                        file.contents.toString()\n                    );\n                    const output = assemble(compiler, file.basename, result);\n\n                    file.contents = new Buffer(output.code);\n                    file.path = replaceExt(file.path, '.js');\n                }\n                callback(null, file);\n            })\n        )\n        .pipe(plugin.babel())\n        .pipe(gulp.dest('dist/scripts'));\n};\n\nconst watch = () => gulp.watch('src/styles/**/*.scss', sass);\n\nconst build = gulp.series(clean, gulp.parallel(copyHTML, copyImage, sass));\n\nconst release = gulp.series(clean, gulp.parallel(style, script));\n\nmodule.exports = { watch, build, release };\n"
  },
  {
    "path": "index.html",
    "content": "<!DOCTYPE html>\n<html>\n<head>\n    <meta charset=\"UTF-8\">\n    <title>vue-impression</title>\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no\">\n    <meta name=\"format-detection\" content=\"telephone=no\">\n    <link rel=\"shortcut icon\" type=\"image/x-icon\" href=\"images/favicon.ico\">\n    <link rel=\"stylesheet\" href=\"styles/index.css\">\n    <link rel=\"stylesheet\" href=\"https://fe.imdada.cn/font-awesome/4.7.0/index.css\">\n</head>\n<body>\n    <div id=\"app\"></div>\n    <script src=\"scripts/app.js\"></script>\n</body>\n</html>\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"vue-impression\",\n  \"version\": \"0.21.13\",\n  \"description\": \"A Vue.js 2.0 UI elements for mobile.\",\n  \"sass\": \"dist/styles/index.scss\",\n  \"main\": \"dist/scripts/components/index.js\",\n  \"module\": \"dist/scripts/components/index.js\",\n  \"scripts\": {\n    \"start\": \"gulp build && webpack -p --config webpack.prebuilt.config.js\",\n    \"poststart\": \"webpack-dev-server --config webpack.dev.config.js --colors --port 9008\",\n    \"build:site\": \"gulp build && webpack -p --config webpack.prod.config.js\",\n    \"scsslint\": \"scss-lint src/styles/**/*.scss\",\n    \"eslint\": \"eslint ./src/scripts/\",\n    \"build\": \"npm run eslint && gulp release\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/NewDadaFE/vue-impression.git\"\n  },\n  \"keywords\": [\n    \"Vue 2.0\",\n    \"UI\"\n  ],\n  \"author\": \"NewDadaFE\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/NewDadaFE/vue-impression/issues\"\n  },\n  \"homepage\": \"https://github.com/NewDadaFE/vue-impression#readme\",\n  \"devDependencies\": {\n    \"@vue/component-compiler\": \"^3.6.0\",\n    \"ajv\": \"5.5.2\",\n    \"autoprefixer\": \"^6.5.3\",\n    \"babel-cli\": \"^6.24.1\",\n    \"babel-core\": \"^6.18.2\",\n    \"babel-eslint\": \"^7.1.1\",\n    \"babel-helper-vue-jsx-merge-props\": \"^2.0.2\",\n    \"babel-loader\": \"^6.2.8\",\n    \"babel-plugin-syntax-jsx\": \"^6.18.0\",\n    \"babel-plugin-transform-object-assign\": \"^6.22.0\",\n    \"babel-plugin-transform-runtime\": \"^6.23.0\",\n    \"babel-plugin-transform-vue-jsx\": \"^3.2.0\",\n    \"babel-preset-es2015\": \"^6.18.0\",\n    \"babel-preset-stage-1\": \"^6.24.1\",\n    \"babel-preset-vue\": \"^0.1.0\",\n    \"babel-register\": \"^6.18.0\",\n    \"chalk\": \"^1.1.3\",\n    \"connect-history-api-fallback\": \"^1.3.0\",\n    \"css-loader\": \"^0.26.0\",\n    \"eslint\": \"^3.10.2\",\n    \"eslint-config-vue-impression\": \"2.1.6\",\n    \"eslint-friendly-formatter\": \"^2.0.6\",\n    \"eslint-import-resolver-webpack\": \"^0.7.0\",\n    \"eslint-loader\": \"^1.6.1\",\n    \"eslint-plugin-import\": \"^2.2.0\",\n    \"extract-text-webpack-plugin\": \"2.1.2\",\n    \"file-loader\": \"^0.9.0\",\n    \"fs-extra\": \"^7.0.0\",\n    \"gulp\": \"^4.0.0\",\n    \"gulp-autoprefixer\": \"^3.1.1\",\n    \"gulp-babel\": \"7.0.1\",\n    \"gulp-cssmin\": \"^0.1.7\",\n    \"gulp-imagemin\": \"^3.1.1\",\n    \"gulp-load-plugins\": \"^1.5.0\",\n    \"gulp-minify-css\": \"^1.2.4\",\n    \"gulp-rename\": \"^1.2.2\",\n    \"gulp-sass\": \"4.0.1\",\n    \"html-webpack-plugin\": \"^2.24.1\",\n    \"json-loader\": \"^0.5.4\",\n    \"minimist\": \"^1.2.0\",\n    \"postcss\": \"6.0.23\",\n    \"replace-ext\": \"^1.0.0\",\n    \"through2\": \"^2.0.3\",\n    \"url-loader\": \"^0.5.7\",\n    \"vue-html-loader\": \"^1.2.3\",\n    \"vue-loader\": \"^10.0.0\",\n    \"vue-router\": \"^2.1.1\",\n    \"vue-style-loader\": \"^1.0.0\",\n    \"vue-template-compiler\": \"^2.1.10\",\n    \"webpack\": \"2.7.0\",\n    \"webpack-dashboard\": \"^0.2.0\",\n    \"webpack-dev-middleware\": \"^1.8.4\",\n    \"webpack-dev-server\": \"^1.16.2\",\n    \"webpack-hot-middleware\": \"^2.13.2\",\n    \"webpack-merge\": \"^0.17.0\"\n  },\n  \"dependencies\": {\n    \"babel-runtime\": \"^6.26.0\",\n    \"vue\": \"^2.1.10\"\n  }\n}\n"
  },
  {
    "path": "src/scripts/components/Alert.vue",
    "content": "<template>\n    <div>\n        <transition name=\"zoom\"\n            @after-leave=\"afterLeave\">\n            <div\n                class=\"alert\"\n                v-show=\"currentValue\"\n                @click.self=\"maskClosable && (currentValue = false)\"\n                @touchmove.prevent.stop>\n                <div class=\"alert-modal\">\n                    <div class=\"alert-title\"  v-html=\"title\">\n                    </div>\n                    <div class=\"alert-message\" v-html=\"message\"></div>\n                    <div class=\"alert-footer\" :class=\"{'alert-footer-vertical': vertical}\">\n                        <div\n                            v-for=\"btn in btns\"\n                            class=\"alert-btn\"\n                            @click=\"clickHandle(btn.click)\"\n                            v-html=\"btn.text\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </transition>\n        <mask-layer :clickable=\"false\" />\n    </div>\n</template>\n<script>\n    export default {\n        name: 'alert',\n        props: {\n            // 标题\n            title: {\n                type: String,\n                default: '确认',\n            },\n            // 内容\n            message: String,\n            // 按钮垂直摆放\n            vertical: {\n                type: Boolean,\n                default: false,\n            },\n            // 自动关闭\n            autoClose: {\n                type: Boolean,\n                default: true,\n            },\n            // 点击mask是否可以关闭\n            maskClosable: {\n                type: Boolean,\n                default: false,\n            },\n            // 按钮组\n            btns: {\n                type: Array,\n                default() {\n                    return [{\n                        text: '确定',\n                    }];\n                },\n            },\n        },\n        data() {\n            return {\n                currentValue: false,\n            };\n        },\n        methods: {\n            // 显示\n            show() {\n                this.currentValue = true;\n            },\n            // 按钮点击\n            clickHandle(callback) {\n                callback && callback();\n                this.autoClose && (this.currentValue = false);\n            },\n            hide() {\n                this.autoClose && (this.currentValue = false);\n            },\n            // 移除dom\n            /* global document:true */\n            afterLeave() {\n                document.body.removeChild(this.$el);\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/BackToTop.vue",
    "content": "<template>\n    <div\n        class=\"back-to-top\"\n        :class=\"{'active': active}\"\n        @click.prevent.stop=\"scrollToTopHandle\">\n        <icon class=\"back-to-top-icon\" name=\"arrow-up\" />\n    </div>\n</template>\n\n<script>\n    import { easeInOutCubic } from '../utils/easing';\n    import { getScrollContainer } from '../utils/dom';\n\n    export default {\n        name: 'back-to-top',\n        data() {\n            return {\n                active: false,\n            };\n        },\n        methods: {\n            /* global window:true document:true requestAnimationFrame:true */\n            scrollToTopHandle() {\n                let scrollTop = this.getScrollTop(),\n                    startTime = Date.now();\n\n                let frameFunc = () => {\n                    let timestamp = Date.now(),\n                        time = timestamp - startTime;\n\n                    this.setScrollTop(easeInOutCubic(time, scrollTop, 0, 450));\n                    if(time < 450) {\n                        requestAnimationFrame(frameFunc);\n                    }\n                };\n\n                requestAnimationFrame(frameFunc);\n                this.active = false;\n            },\n            getScrollTop() {\n                return this.scrollTargetEl === document\n                ? window.pageYOffset : this.scrollTargetEl.scrollTop;\n            },\n            setScrollTop(val) {\n                if(this.scrollTargetEl === document) {\n                    document.body.scrollTop = val;\n                    document.documentElement.scrollTop = val;\n\n                    return;\n                }\n\n                this.scrollTargetEl.scrollTop = val;\n            },\n            touchStartHandle() {\n                this._offsetY = this.scrollTargetEl === document\n                ? window.pageYOffset : this.scrollTargetEl.scrollTop;\n            },\n            touchEndHandle() {\n                let scrollTop = this.scrollTargetEl === document\n                ? window.pageYOffset : this.scrollTargetEl.scrollTop;\n\n                // 显示\n                if(scrollTop < this._offsetY && (this._offsetY - scrollTop > 60)) {\n                    this.active = true;\n                } else if(Math.abs(this._offsetY - scrollTop) > 60) {\n                    // 隐藏\n                    this.active = false;\n                }\n\n                this._offsetY = scrollTop;\n            },\n        },\n        mounted() {\n            this.scrollTargetEl = getScrollContainer(this.$el);\n\n            this.scrollTargetEl.addEventListener('touchstart', this.touchStartHandle);\n            this.scrollTargetEl.addEventListener('touchend', this.touchEndHandle);\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/Badge.vue",
    "content": "<template>\n    <div\n        @click=\"$emit('click')\"\n        class=\"badge\"\n        :class=\"{'badge-gap': $slots.default}\">\n        <div class=\"badge-addon\" :class=\"`bg-${theme}`\">{{content}}</div>\n        <slot></slot>\n    </div>\n</template>\n\n<script>\n    export default {\n        name: 'badge',\n        props: {\n            // 内容\n            content: {},\n            // 主题\n            theme: {\n                type: String,\n                default: 'primary',\n                validator(value) {\n                    return ['primary', 'secondary', 'success', 'warning', 'danger'].indexOf(value) > -1;\n                },\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/Button.vue",
    "content": "<template>\n    <button\n        :type=\"type\"\n        @click=\"clickHandle\"\n        class=\"btn\"\n        :class=\"{\n            [`btn-${theme}`]: theme,\n            [`btn-${size}`]: size,\n            [`btn-${theme}-outline`]: hollow,\n            ['btn-block']: block,\n            ['btn-loading']: loading,\n            [`border-${shape}`]: shape,\n        }\"\n        :disabled=\"disabled || loading\">\n        <slot></slot>\n        <loading\n            size=\"sm\"\n            v-if=\"loading\"\n            :theme=\"theme === 'default' ? 'primary' : null\" />\n    </button>\n</template>\n\n<script>\n    // Button\n    export default {\n        name: 'btn',\n        props: {\n            block: Boolean,\n            hollow: Boolean,\n            disabled: Boolean,\n            // 加载中\n            loading: Boolean,\n            // 类型\n            type: {\n                type: String,\n                default: 'button',\n                validator(value) {\n                    return ['button', 'submit', 'reset'].indexOf(value) > -1;\n                },\n            },\n            // 主题\n            theme: {\n                type: String,\n                default: 'primary',\n                validator(value) {\n                    return ['primary', 'secondary', 'default'].indexOf(value) > -1;\n                },\n            },\n            // 尺寸\n            size: {\n                type: String,\n                validator(value) {\n                    return ['sm', 'lg'].indexOf(value) > -1;\n                },\n            },\n            // 形状\n            shape: {\n                type: String,\n                validator(value) {\n                    return ['pill'].indexOf(value) > -1;\n                },\n            },\n        },\n        methods: {\n            clickHandle(event) {\n                this.$emit('click', event);\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/Card.vue",
    "content": "<template>\n    <div class=\"card\" @click=\"$emit('click')\">\n        <slot></slot>\n    </div>\n</template>\n\n<script>\n    export default {\n        name: 'card',\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/CardBody.vue",
    "content": "<template>\n    <div class=\"card-body\" @click=\"$emit('click')\">\n        <slot></slot>\n    </div>\n</template>\n\n<script>\n    export default {\n        name: 'card-body',\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/Cell.vue",
    "content": "<template>\n    <router-link\n        v-if=\"!disabled && to\"\n        :to=\"to\"\n        class=\"cell cell-link\"\n        :class=\"{\n            'cell-disabled': disabled,\n            'cell-no-gap': !hasGap,\n        }\">\n        <div class=\"cell-header\" v-if=\"$slots.header\">\n            <slot name=\"header\"></slot>\n        </div>\n        <span class=\"cell-body\">\n            <slot></slot>\n        </span>\n        <div class=\"cell-footer\" v-if=\"$slots.footer\">\n            <slot name=\"footer\"></slot>\n        </div>\n        <i v-if=\"hasArrow\" class=\"fa fa-angle-right cell-arrow\" />\n    </router-link>\n\n    <a\n        v-else\n        :href=\"!disabled && href\"\n        @click=\"!disabled && $emit('click')\"\n        class=\"cell\"\n        :class=\"{\n            'cell-link': clickable,\n            'cell-disabled': disabled,\n            'cell-no-gap': !hasGap,\n        }\" >\n        <div class=\"cell-header\" v-if=\"$slots.header\">\n            <slot name=\"header\"></slot>\n        </div>\n        <span class=\"cell-body\">\n            <slot></slot>\n        </span>\n        <div class=\"cell-footer\" v-if=\"$slots.footer\">\n            <slot name=\"footer\"></slot>\n        </div>\n        <i v-if=\"hasArrow\" class=\"fa fa-angle-right cell-arrow\" />\n    </a>\n</template>\n\n<script>\n    export default {\n        name: 'cell',\n        props: {\n            to: [String, Object],\n            href: String,\n            disabled: Boolean,\n            hasGap: {\n                type: Boolean,\n                default: true,\n            },\n            hasArrow: {\n                type: Boolean,\n                default() {\n                    // 有href和to时默认为true\n                    return !!(this.href || this.to);\n                },\n            },\n        },\n        computed: {\n            clickable() {\n                return !this.disabled && (this.href || this._events.click);\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/Checkbox.vue",
    "content": "<template>\n    <label\n        class=\"checkbox\"\n        :class=\"'checkbox-' + type\">\n        <input\n            type=\"checkbox\"\n            class=\"checkbox-input\"\n            :disabled=\"disabled || $parent.disabled\"\n            v-model=\"currentValue\">\n        <span class=\"checkbox-addon\">\n            <i class=\"fa fa-check\" />\n        </span>\n        <span class=\"checkbox-label\">\n            <slot></slot>\n        </span>\n    </label>\n</template>\n\n<script>\n    import Sync from '../mixins/sync';\n    \n    export default {\n        name: 'checkbox',\n        mixins: [Sync],\n        props: {\n            type: {\n                type: String,\n                default: 'square',\n                validator(value) {\n                    return ['square', 'circle'].indexOf(value) > -1;\n                },\n            },\n        },\n        data() {\n            let currentValue;\n\n            if(this.isGroupChildComponent) {\n                currentValue = this.$parent.currentValue &&\n                    this.$parent.currentValue.indexOf(this.value) > -1;\n            } else {\n                currentValue = this.value;\n            }\n\n            return { currentValue };\n        },\n        watch: {\n            currentValue(val) {\n                if(this.isGroupChildComponent) {\n                    this.$parent.$emit('optionChecked', this.value);\n                }\n                this.$emit('input', val);\n            },\n        },\n        beforeCreate() {\n            // 是否CheckboxGroup下的子组件\n            this.isGroupChildComponent = this.$parent.$options._componentTag === 'checkbox-group';\n        },\n    };\n</script>"
  },
  {
    "path": "src/scripts/components/CheckboxGroup.vue",
    "content": "<template>\n    <div class=\"checkbox-group\">\n        <slot></slot>\n    </div>\n</template>\n\n<script>\n    import Sync from '../mixins/sync';\n    \n    export default {\n        name: 'checkbox-group',\n        mixins: [Sync],\n        data() {\n            return {\n                currentValue: this.value || [],\n            };\n        },\n        methods: {\n            optionCheckedHandle(option) {\n                this.currentValue = this.currentValue || [];\n                const index = this.currentValue.indexOf(option);\n\n                if(index === -1) {\n                    this.currentValue.push(option);\n                } else {\n                    this.currentValue.splice(index, 1);\n                }\n            },\n        },\n        created() {\n            this.$on('optionChecked', this.optionCheckedHandle);\n        },\n    };\n</script>"
  },
  {
    "path": "src/scripts/components/DatePicker/DateRange.vue",
    "content": "<template>\n\t<div\n\t   v-show=\"visible\"\n\t   class=\"date-range-picker\">\n    \n        <div class=\"header\">\n            <div class=\"header-cnt\">\n                <btn\n                    @click=\"prevMonth\"\n                    class=\"btn btn-left\">\n                    <icon name=\"angle-left\" size=\"lg\"/>\n                </btn>\n                <btn\n                    @click=\"nextMonth\"\n                    class=\"btn btn-right\">\n                    <icon name=\"angle-right\" size=\"lg\"/>\n                </btn>\n                <div>{{ dateLabel }}</div>\n            </div>\n        </div>\n        <date-table\n            selection-mode=\"range\"\n            :date=\"date\"\n            :min-date=\"minDate\"\n            :max-date=\"maxDate\"\n            :range-state=\"rangeState\"\n            :disabled-date=\"disabledDate\"\n            @changerange=\"handleChangeRange\"\n            :first-day-of-week=\"firstDayOfWeek\"\n            @pick=\"handleRangePick\">\n        </date-table>\n\t</div>\n</template>\n\n<script type=\"text/babel\">\n    import DateTable from './DateTable';\n    import Btn from '../Button';\n    import Icon from '../Icon';\n    import {\n        formatDate,\n        isDate,\n        prevMonth,\n        nextMonth,\n    } from '../../utils/date';\n\n    const DayMilliseconds = 24 * 60 * 60 * 1000;\n\n    export default {\n\n        computed: {\n            dateLabel() {\n                /*eslint-disable*/\n                return this.date.getFullYear() + '年' + (this.date.getMonth() + 1) + '月';\n                /*eslint-disable*/\n            },\n        },\n\n        data() {\n            return {\n                popperClass: '',\n                defaultTime: null,\n                minDate: '',\n                maxDate: '',\n                date: new Date(),\n                rangeState: {\n                    endDate: null,\n                    selecting: false,\n                    row: null,\n                    column: null,\n                },\n                visible: '',\n                firstDayOfWeek: 1,\n                dateDisable: false,\n                prevPickedDisableDays: 0,\n                nextPickedDisableDays: 0,\n            };\n        },\n\n        methods: {\n            disabledDate(time) {\n                if(this.dateDisable) {\n                    if(this.maxDate) {\n                        return false;\n                    }\n\n                    if(this.minDate) {\n                        let prePickedDisabled = time.getTime()\n                                                <=\n                                                (new Date(this.minDate).getTime() - this.prevPickedDisableDays * DayMilliseconds);\n                        let nextPickedDisabled = time.getTime()\n                                                >=\n                                                (new Date(this.minDate).getTime() + this.nextPickedDisableDays * DayMilliseconds);\n\n                        return prePickedDisabled || nextPickedDisabled;\n                    }\n                }\n\n                return false;\n            },\n\n            handleChangeRange(val) {\n                this.minDate = val.minDate;\n                this.maxDate = val.maxDate;\n                this.rangeState = val.rangeState;\n            },\n\n            handleRangePick(val, close = true) {\n                const minDate = val.minDate;\n                const maxDate = val.maxDate;\n\n                if(this.maxDate === maxDate && this.minDate === minDate) {\n                    return;\n                }\n                this.onPick && this.onPick(val, formatDate);\n\n                this.maxDate = maxDate;\n                this.minDate = minDate;\n\n                // workaround for https://github.com/ElemeFE/element/issues/7539, should remove this block when we don't have to care about Chromium 55 - 57\n                setTimeout(() => {\n                    this.maxDate = maxDate;\n                    this.minDate = minDate;\n                }, 10);\n                if(!close) {\n                    return;\n                }\n                this.handleConfirm();\n            },\n\n            prevMonth() {\n                this.date = prevMonth(this.date);\n            },\n\n            nextMonth() {\n                this.date = nextMonth(this.date);\n            },\n\n            handleConfirm() {\n                this.$emit('pick', [this.minDate, this.maxDate]);\n            },\n\n            isValidValue(value) {\n                return Array.isArray(value) &&\n                    value && value[0] && value[1] &&\n                    isDate(value[0]) && isDate(value[1]) &&\n                    value[0].getTime() <= value[1].getTime() && (\n                    typeof this.disabledDate === 'function'\n                        ? !this.disabledDate(value[0]) && !this.disabledDate(value[1])\n                        : true\n                );\n            },\n        },\n\n        components: { DateTable, Btn, Icon },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/DatePicker/DateTable.vue",
    "content": "<template>\n    <table\n        cellspacing=\"0\"\n        cellpadding=\"0\"\n        class=\"date-table\"\n        @click=\"handleClick\"\n        @mousemove=\"handleMouseMove\">\n        <tbody>\n            <tr>\n                <th v-if=\"showWeekNumber\"></th>\n                <th v-for=\"week in WEEKS\">{{week}}</th>\n            </tr>\n            <tr\n                class=\"date-table__row\"\n                v-for=\"row in rows\">\n                <td\n                    v-for=\"cell in row\"\n                    :class=\"getCellClasses(cell)\">\n                    <div>\n                        <span>\n                            {{ cell.type==='today' ? '今' : cell.text }}\n                        </span>\n                    </div>\n                </td>\n            </tr>\n        </tbody>\n    </table>\n</template>\n\n<script>\n    import { getFirstDayOfMonth, getDayCountOfMonth, getWeekNumber, getStartDateOfMonth, nextDate } from '../../utils/date';\n    import { hasClass } from '../../utils/dom';\n\n    const WEEKS = ['日', '一', '二', '三', '四', '五', '六'];\n    const clearHours = function(time) {\n        const cloneDate = new Date(time);\n\n        cloneDate.setHours(0, 0, 0, 0);\n\n        return cloneDate.getTime();\n    };\n\n    export default {\n        name: 'date-table',\n\n        props: {\n            // 一周的第一天\n            firstDayOfWeek: {\n                default: 7,\n                type: Number,\n                validator: val => val >= 1 && val <= 7,\n            },\n\n            value: {},\n\n            date: {},\n\n            selectionMode: {\n                type: String,\n                default: 'day',\n            },\n            // 是否展示周\n            showWeekNumber: {\n                type: Boolean,\n                default: false,\n            },\n\n            // 禁选日期\n            disabledDate: {},\n\n            selectedDate: {\n                type: Array,\n            },\n\n            minDate: {},\n\n            maxDate: {},\n\n            // 日期区间\n            rangeState: {\n                default() {\n                    return {\n                        endDate: null,\n                        selecting: false,\n                        row: null,\n                        column: null,\n                    };\n                },\n            },\n        },\n\n        computed: {\n            offsetDay() {\n                const week = this.firstDayOfWeek;\n\n                // 周日为界限，左右偏移的天数，3217654 例如周一就是 -1，目的是调整前两行日期的位置\n\n                return week > 3 ? 7 - week : -week;\n            },\n\n            WEEKS() {\n                const week = this.firstDayOfWeek;\n\n                return WEEKS.concat(WEEKS).slice(week, week + 7);\n            },\n\n            year() {\n                return this.date.getFullYear();\n            },\n\n            month() {\n                return this.date.getMonth();\n            },\n\n            startDate() {\n                return getStartDateOfMonth(this.year, this.month);\n            },\n\n            rows() {\n                // TODO: refactory rows / getCellClasses\n                const date = new Date(this.year, this.month, 1);\n                let day = getFirstDayOfMonth(date); // day of first day\n                const dateCountOfMonth = getDayCountOfMonth(date.getFullYear(), date.getMonth());\n                const dateCountOfLastMonth = getDayCountOfMonth(\n                                                date.getFullYear(),\n                                                (date.getMonth() === 0 ? 11 : date.getMonth() - 1));\n\n                day = (day === 0 ? 7 : day);\n\n                const offset = this.offsetDay;\n                const rows = this.tableRows;\n                let count = 1;\n                let firstDayPosition;\n\n                const startDate = this.startDate;\n                const disabledDate = this.disabledDate;\n                const selectedDate = this.selectedDate || this.value;\n                const now = clearHours(new Date());\n\n                for (let i = 0; i < 6; i++) {\n                    const row = rows[i];\n\n                    if(this.showWeekNumber) {\n                        if(!row[0]) {\n                            row[0] = { type: 'week', text: getWeekNumber(nextDate(startDate, i * 7 + 1)) };\n                        }\n                    }\n\n                    for (let j = 0; j < 7; j++) {\n                        let cell = row[this.showWeekNumber ? j + 1 : j];\n\n                        if(!cell) {\n                            cell = { row: i, column: j, type: 'normal', inRange: false, start: false, end: false };\n                        }\n\n                        cell.type = 'normal';\n\n                        const index = i * 7 + j;\n                        const time = nextDate(startDate, index - offset).getTime();\n\n                        /**     仅选择一次时 选择状态不可保持     **/\n                        if(!this.maxDate) {\n                            // cell.inRange = time >= clearHours(this.minDate);\n                            cell.inRange = cell.end = cell.start = this.minDate &&\n                                                                    time === clearHours(this.minDate);\n                        } else {\n                            cell.inRange = time >= clearHours(this.minDate) &&\n                                        time <= clearHours(this.maxDate);\n                            cell.start = this.minDate && time === clearHours(this.minDate);\n                            cell.end = this.maxDate && time === clearHours(this.maxDate);\n                        }\n\n                        // cell.inRange = time >= clearHours(this.minDate) &&\n                        //                 time <= clearHours(this.maxDate);\n                        // cell.start = this.minDate && time === clearHours(this.minDate);\n                        // cell.end = this.maxDate && time === clearHours(this.maxDate);\n                        /***********************************/\n\n                        const isToday = time === now;\n\n                        if(isToday) {\n                            cell.type = 'today';\n                        }\n\n                        if(i >= 0 && i <= 1) {\n                            if(j + i * 7 >= (day + offset)) {\n                                cell.text = count++;\n                                if(count === 2) {\n                                    firstDayPosition = i * 7 + j;\n                                }\n                            } else {\n                                cell.text = dateCountOfLastMonth - (day + offset - j % 7) + 1 + i * 7;\n                                cell.type = 'prev-month';\n                            }\n                        } else if(count <= dateCountOfMonth) {\n                            cell.text = count++;\n                            if(count === 2) {\n                                firstDayPosition = i * 7 + j;\n                            }\n                        } else {\n                            cell.text = count++ - dateCountOfMonth;\n                            cell.type = 'next-month';\n                        }\n\n                        let newDate = new Date(time);\n\n                        cell.disabled = typeof disabledDate === 'function' && disabledDate(newDate);\n                        /*eslint-disable*/\n                        cell.selected = Array.isArray(selectedDate) &&\n                          selectedDate.filter(date => date.toString() === newDate.toString())[0];\n                        /*eslint-disable*/\n\n                        this.$set(row, this.showWeekNumber ? j + 1 : j, cell);\n                    }\n                }\n\n                rows.firstDayPosition = firstDayPosition;\n\n                return rows;\n            },\n        },\n\n        watch: {\n            'rangeState.endDate'(newVal) {\n                this.markRange(newVal);\n            },\n\n            minDate(newVal, oldVal) {\n                if(newVal && newVal !== oldVal) {\n                    this.rangeState.selecting = true;\n                    this.markRange(newVal);\n                } else if(!newVal) {\n                    this.rangeState.selecting = false;\n                    this.markRange(newVal);\n                } else {\n                    this.markRange();\n                }\n            },\n\n            maxDate(newVal, oldVal) {\n                if(newVal && newVal !== oldVal) {\n                    this.rangeState.selecting = false;\n                    this.markRange(newVal);\n                    this.$emit('pick', {\n                        minDate: this.minDate,\n                        maxDate: this.maxDate,\n                    });\n                }\n            },\n        },\n\n        data() {\n            return {\n                tableRows: [[], [], [], [], [], []],\n            };\n        },\n\n        methods: {\n            getCellClasses(cell) {\n                const selectionMode = this.selectionMode;\n                let classes = [];\n\n                if((cell.type === 'normal' || cell.type === 'today') && !cell.disabled) {\n                    classes.push('available');\n                    if(cell.type === 'today') {\n                        classes.push('today');\n                    }\n                } else {\n                    classes.push(cell.type);\n                }\n\n                if(cell.disabled) {\n                    classes.push('disabled');\n                } else if(cell.inRange) {\n                    classes.push('in-range');\n\n                    if(cell.start) {\n                        classes.push('start-date');\n                    }\n\n                    if(cell.end) {\n                        classes.push('end-date');\n                    }\n                }\n\n                if(cell.selected) {\n                    classes.push('selected');\n                }\n\n                return classes.join(' ');\n            },\n\n            getDateOfCell(row, column) {\n                const offsetFromStart = row * 7\n                                        + (column - (this.showWeekNumber ? 1 : 0))\n                                        - this.offsetDay;\n\n                return nextDate(this.startDate, offsetFromStart);\n            },\n\n            markRange(maxDate) {\n                const startDate = this.startDate;\n\n                if(!maxDate) {\n                    maxDate = this.maxDate;\n                }\n\n                const rows = this.rows;\n                const minDate = this.minDate;\n\n                for (let i = 0, k = rows.length; i < k; i++) {\n                    const row = rows[i];\n\n                    for (let j = 0, l = row.length; j < l; j++) {\n                        /*eslint-disable*/\n                        if(this.showWeekNumber && j === 0) continue;\n                        /*eslint-disable*/\n\n                        const cell = row[j];\n                        const index = i * 7 + j + (this.showWeekNumber ? -1 : 0);\n                        const time = nextDate(startDate, index - this.offsetDay).getTime();\n\n                        if(maxDate && maxDate < minDate) {\n                            cell.inRange = minDate &&\n                                            time >= clearHours(maxDate) &&\n                                            time <= clearHours(minDate);\n                            cell.start = maxDate && time === clearHours(maxDate.getTime());\n                            cell.end = minDate && time === clearHours(minDate.getTime());\n                        } else {\n                            cell.inRange = minDate &&\n                                            time >= clearHours(minDate) &&\n                                            time <= clearHours(maxDate);\n                            cell.start = minDate && time === clearHours(minDate.getTime());\n                            cell.end = maxDate && time === clearHours(maxDate.getTime());\n                        }\n                    }\n                }\n            },\n\n            handleMouseMove(event) {\n                if(!this.rangeState.selecting) {\n                    return;\n                }\n\n                this.$emit('changerange', {\n                    minDate: this.minDate,\n                    maxDate: this.maxDate,\n                    rangeState: this.rangeState,\n                });\n\n                let target = event.target;\n\n                if(target.tagName === 'SPAN') {\n                    target = target.parentNode.parentNode;\n                }\n                if(target.tagName === 'DIV') {\n                    target = target.parentNode;\n                }\n                if(target.tagName !== 'TD') return;\n                else if(hasClass(target, 'disabled')) return;\n\n                const column = target.cellIndex;\n                const row = target.parentNode.rowIndex - 1;\n                const { row: oldRow, column: oldColumn } = this.rangeState;\n\n                if(oldRow !== row || oldColumn !== column) {\n                    this.rangeState.row = row;\n                    this.rangeState.column = column;\n\n                    this.rangeState.endDate = this.getDateOfCell(row, column);\n                }\n            },\n\n            handleClick(event) {\n                let target = event.target;\n\n                if(target.tagName === 'SPAN') {\n                    target = target.parentNode.parentNode;\n                }\n                if(target.tagName === 'DIV') {\n                    target = target.parentNode;\n                }\n\n                if(target.tagName !== 'TD') return;\n                if(hasClass(target, 'disabled')) {\n                    return;\n                }\n\n                const selectionMode = this.selectionMode;\n\n                let year = Number(this.year);\n                let month = Number(this.month);\n\n                const cellIndex = target.cellIndex;\n                const rowIndex = target.parentNode.rowIndex;\n                const cell = this.rows[rowIndex - 1][cellIndex];\n                const text = cell.text;\n                const className = target.className;\n\n                const newDate = new Date(year, month, 1);\n\n                if(className.indexOf('prev') !== -1) {\n                    if(month === 0) {\n                        year -= 1;\n                        month = 11;\n                    } else {\n                        month -= 1;\n                    }\n                    newDate.setFullYear(year);\n                    newDate.setMonth(month);\n                } else if(className.indexOf('next') !== -1) {\n                    if(month === 11) {\n                        year += 1;\n                        month = 0;\n                    } else {\n                        month += 1;\n                    }\n                    newDate.setFullYear(year);\n                    newDate.setMonth(month);\n                }\n\n                newDate.setDate(parseInt(text, 10));\n\n                if(this.selectionMode === 'range') {\n                    if(this.minDate && this.maxDate) {\n                        // 最小，最大日期独有\n\n                        const minDate = new Date(newDate.getTime());\n                        const maxDate = null;\n\n                        this.$emit('pick', { minDate, maxDate }, false);\n                        this.rangeState.selecting = true;\n                        this.markRange(this.minDate);\n                        this.$nextTick(() => {\n                            this.handleMouseMove(event);\n                        });\n                    } else if(this.minDate && !this.maxDate) {\n                        // 有最小日期 无最大日期\n\n                        if(newDate >= this.minDate) {\n                            const maxDate = new Date(newDate.getTime());\n\n                            this.rangeState.selecting = false;\n                            this.$emit('pick', {\n                                minDate: this.minDate,\n                                maxDate,\n                            });\n                        } else {\n                            const minDate = new Date(newDate.getTime());\n\n                            this.rangeState.selecting = false;\n                            this.$emit('pick', { minDate, maxDate: this.minDate });\n                        }\n                    } else if(!this.minDate) {\n                        // 无最小日期\n\n                        const minDate = new Date(newDate.getTime());\n\n                        this.$emit('pick', { minDate, maxDate: this.maxDate }, false);\n                        this.rangeState.selecting = true;\n                        this.markRange(this.minDate);\n                    }\n                } else if(selectionMode === 'day') {\n                    this.$emit('pick', newDate);\n                }\n            },\n        },\n    };\n</script>\n\n"
  },
  {
    "path": "src/scripts/components/DatePicker/Picker.vue",
    "content": "<template>\n    <div\n        class=\"date-picker\"\n        :class=\"{\n            [`date-picker-${size}`]: size,\n            [`date-picker-${theme}`]: theme,\n        }\">\n    </div>\n</template>\n\n<script>\n    import Vue from 'vue';\n    // import { formatDate } from '../../utils/date';\n    import Emitter from '../../mixins/emitter';\n\n    export default {\n        mixins: [Emitter],\n\n        props: {\n            // 主题\n            theme: {\n                type: String,\n                default: 'primary',\n                validator(value) {\n                    return ['primary', 'default'].indexOf(value) > -1;\n                },\n            },\n            // 尺寸\n            size: {\n                type: String,\n                default: 'base',\n                validator(value) {\n                    return ['base', 'sm', 'lg'].indexOf(value) > -1;\n                },\n            },\n            // 是否开启日期不可选\n            dateDisable: {\n                type: Boolean,\n                default: false,\n            },\n            // 相较于当前时间，往前不可选择的天数\n            prevPickedDisableDays: {\n                type: Number,\n                default: 0,\n            },\n            // 相较于当前时间，往后不可选择的天数\n            nextPickedDisableDays: {\n                type: Number,\n                default: 0,\n            },\n\n            value: {},\n            // 是否总是展示日期组件\n            pickerAlwaysShow: {\n                type: Boolean,\n                default: true,\n            },\n            onPick: {},\n        },\n\n        data() {\n            return {\n                pickerVisible: false,\n            };\n        },\n\n        watch: {\n            pickerVisible(val) {\n                if(val) {\n                    this.showPicker();\n                } else {\n                    this.hidePicker();\n                }\n            },\n            value: {\n                immediate: true,\n                handler(val) {\n                    if(this.picker) {\n                        this.picker.value = val;\n                        this.picker.selectedDate = Array.isArray(val) ? val : [];\n                    }\n                },\n            },\n        },\n\n        computed: {\n            selectionMode() {\n                // todo\n                // if(this.type === 'week') {\n                //     return 'week';\n                // } else if(this.type === 'month') {\n                //     return 'month';\n                // } else if(this.type === 'year') {\n                //     return 'year';\n                // } else if(this.type === 'dates') {\n                //     return 'dates';\n                // }\n                //\n                // return 'day';\n                return this.type;\n            },\n\n            // todo\n            pickerSize() {\n                return this.size;\n            },\n        },\n\n        created() {\n            // 默认展示日期选择框\n            this.pickerVisible = true;\n        },\n\n        methods: {\n            hidePicker() {\n                if(this.picker) {\n                    this.picker.resetView && this.picker.resetView();\n                    this.pickerVisible = this.picker.visible = false;\n                }\n            },\n\n            showPicker() {\n                if(this.$isServer) return;\n                if(!this.picker) {\n                    this.mountPicker();\n                }\n                this.pickerVisible = this.picker.visible = true;\n\n                this.picker.value = this.value;\n                this.picker.resetView && this.picker.resetView();\n\n                this.$nextTick(() => {\n                    this.picker.adjustSpinners && this.picker.adjustSpinners();\n                });\n            },\n\n            mountPicker() {\n                this.picker = new Vue(this.view).$mount();\n\n                this.picker.selectedDate = Array.isArray(this.value) && this.value || [];\n                this.$watch('format', format => {\n                    this.picker.format = format;\n                });\n\n                this.picker.dateDisable = this.dateDisable;\n                this.picker.prevPickedDisableDays = this.prevPickedDisableDays;\n                this.picker.nextPickedDisableDays = this.nextPickedDisableDays;\n\n                this.$el.appendChild(this.picker.$el);\n                this.picker.resetView && this.picker.resetView();\n\n                this.picker.onPick = this.onPick;\n\n                this.picker.$on('dodestroy', this.doDestroy);\n                this.picker.$on('pick', (date = '', visible = this.pickerAlwaysShow) => {\n                    this.pickerVisible = this.picker.visible = visible;\n                    this.picker.resetView && this.picker.resetView();\n                });\n\n                this.picker.$on('select-range', (start, end, pos) => {\n                    if(this.refInput.length === 0) return;\n                    if(!pos || pos === 'min') {\n                        this.refInput[0].setSelectionRange(start, end);\n                        this.refInput[0].focus();\n                    } else if(pos === 'max') {\n                        this.refInput[1].setSelectionRange(start, end);\n                        this.refInput[1].focus();\n                    }\n                });\n            },\n\n            unmountPicker() {\n                if(this.picker) {\n                    this.picker.$destroy();\n                    this.picker.$off();\n                    this.picker.$el.parentNode.removeChild(this.picker.$el);\n                }\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/DatePicker/index.js",
    "content": "import Picker from './Picker';\nimport DateRangeView from './DateRange';\n\nconst getView = function(type) {\n    if(type === 'daterange') {\n        return DateRangeView;\n    }\n    // other type view\n\n    return null;\n};\n\nconst DatePicker = {\n    mixins: [Picker],\n\n    name: 'date-picker',\n\n    props: {\n        type: {\n            type: String,\n            default: 'daterange',\n        },\n    },\n\n    watch: {\n        type(type) {\n            if(this.picker) {\n                this.unmountPicker();\n                this.view = getView(type);\n                this.mountPicker();\n            } else {\n                this.view = getView(type);\n            }\n        },\n    },\n\n    created() {\n        this.view = getView(this.type);\n    },\n};\n\nexport default DatePicker;\n"
  },
  {
    "path": "src/scripts/components/Drawer.vue",
    "content": "<template>\n    <div class=\"drawer\">\n        <slot></slot>\n    </div>\n</template>\n\n<script>\n    import Tab from '../mixins/tab';\n\n    export default {\n        name: 'drawer',\n        mixins: [Tab],\n        methods: {\n            reset() {\n                this.currentActiveKey = undefined;\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/DrawerItem.vue",
    "content": "<template>\n    <div\n        class=\"drawer-item\"\n        :class=\"{\n            'active': $parent.currentActiveKey !== undefined && $parent.currentActiveKey === currentEventKey,\n            disabled: disabled || $parent.disabled,\n        }\"\n        @click=\"clickHandle\">\n        <slot></slot>\n        <icon name=\"caret-down\" class=\"drawer-item-icon\"></icon>\n    </div>\n</template>\n\n<script>\n    import TabItem from '../mixins/tabItem';\n\n    export default {\n        name: 'drawer-item',\n        mixins: [TabItem],\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/Flex.vue",
    "content": "<template>\n    <div\n        class=\"flex\"\n        :class=\"[\n            alignClass,\n            {[`flex-justify-${justify}`]: justify},\n            {'flex-vertical': direction === 'column'}\n            ]\">\n        <slot></slot>\n    </div>\n</template>\n\n<script>\n    export default {\n        name: 'flex',\n        props: {\n            // 方向\n            direction: {\n                type: String,\n                default: 'row',\n                validator(value) {\n                    return ['row', 'column'].indexOf(value) > -1;\n                },\n            },\n            // 排版\n            justify: {\n                type: String,\n                validator(value) {\n                    return ['start', 'end', 'center', 'between', 'around'].indexOf(value) > -1;\n                },\n            },\n            // 对齐\n            align: {\n                type: String,\n                validator(value) {\n                    return ['top', 'bottom', 'middle'].indexOf(value) > -1;\n                },\n            },\n        },\n        computed: {\n            alignClass() {\n                let align = this.align;\n\n                if(this.direction === 'row' && !align) {\n                    align = 'middle';\n                }\n\n                return `flex-align-${align}`;\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/FlexItem.vue",
    "content": "<template>\n    <div\n        @click=\"$emit('click')\"\n        class=\"flex-item\"\n        :style=\"{ flex }\">\n        <slot></slot>\n    </div>\n</template>\n\n<script>\n    export default {\n        name: 'flex-item',\n        props: {\n            flex: {\n                type: [Number, String],\n                default: 1,\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/Group.vue",
    "content": "<template>\n    <div class=\"group\">\n        <slot></slot>\n    </div>\n</template>\n\n<script>\n    export default {\n        name: 'group',\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/GroupTitle.vue",
    "content": "<template>\n    <div class=\"group-title\">\n        <slot></slot>\n    </div>\n</template>\n\n<script>\n    export default {\n        name: 'group-title',\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/HRule.vue",
    "content": "<template>\n    <hr class=\"hr\" :class=\"{\n        [`border-${type}`]: type,\n        [`border-${theme}`]: theme,\n    }\">\n</template>\n\n<script>\n    export default {\n        name: 'hrule',\n        props: {\n            type: {\n                type: String,\n                validator(value) {\n                    return ['dashed', 'dotted'].indexOf(value) > -1;\n                },\n            },\n            theme: {\n                type: String,\n                validator(value) {\n                    return ['primary', 'secondary', 'warning', 'success', 'danger'].indexOf(value) > -1;\n                },\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/Icon.vue",
    "content": "<template>\n    <i\n        @click=\"$emit('click')\"\n        class=\"fa\"\n        :class=\"[\n            `fa-${name}`,\n            {\n                [`fa-${size}`]: size,\n                'gap-left': left,\n                'gap-right': right,\n            }\n        ]\" />\n</template>\n\n<script>\n    export default {\n        name: 'icon',\n        props: {\n            left: Boolean,\n            right: Boolean,\n            name: {\n                type: String,\n                required: true,\n            },\n            size: {\n                type: String,\n                validator(value) {\n                    return ['lg', '2x', '3x', '4x', '5x'].indexOf(value) > -1;\n                },\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/InlineSelector.vue",
    "content": "<template>\n    <div class=\"inline-selector\">\n        <slot></slot>\n    </div>\n</template>\n\n<script>\n    import Sync from '../mixins/sync';\n    import Select from '../mixins/select';\n\n    export default {\n        name: 'inline-selector',\n        mixins: [Sync, Select],\n        props: {\n            theme: {\n                type: String,\n                default: 'primary',\n                validator(value) {\n                    return ['primary', 'success', 'warning', 'danger'].indexOf(value) > -1;\n                },\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/InlineSelectorOption.vue",
    "content": "<template>\n    <tag\n        class=\"inline-selector-option\"\n        :class=\"{\n            disabled: disabled || $parent.disabled,\n        }\"\n        hollow\n        size=\"sm\"\n        @click=\"clickHandle\"\n        :theme=\"isActive() ? $parent.theme : 'default'\">\n        <slot></slot>\n    </tag>\n</template>\n\n<script>\n    import SelectOption from '../mixins/selectOption';\n\n    export default {\n        name: 'inline-selector-option',\n        mixins: [SelectOption],\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/InputNumber.vue",
    "content": "<template>\n    <div class=\"input-number\" :class=\"{'input-number-disabled': disabled}\">\n        <a\n            class=\"input-number-minus\"\n            :class=\"{'disabled': currentValue <= min}\"\n            @click=\"minusHandle\">-</a>\n        <input\n            type=\"number\"\n            v-model=\"currentValue\"\n            :disabled=\"disabled\"\n            class=\"input-number-input\">\n        <a\n            class=\"input-number-plus\"\n            :class=\"{'disabled': currentValue >= max}\"\n            @click=\"plusHandle\">\n            +\n        </a>\n    </div>\n</template>\n\n<script>\n    import Sync from '../mixins/sync';\n\n    export default {\n        name: 'input-number',\n        mixins: [Sync],\n        props: {\n            value: {\n                type: Number,\n                default: 0,\n            },\n            max: {\n                type: Number,\n                default: Infinity,\n            },\n            min: {\n                type: Number,\n                default: -Infinity,\n            },\n            step: {\n                type: Number,\n                default: 1,\n            },\n        },\n        methods: {\n            // 减\n            minusHandle() {\n                if(this.disabled || this.currentValue <= this.min) return;\n\n                this.currentValue -= this.step;\n            },\n            // 加\n            plusHandle() {\n                if(this.disabled || this.currentValue >= this.max) return;\n\n                this.currentValue += this.step;\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/InputText.vue",
    "content": "<template>\n    <div class=\"input-text\" v-disfavor=\"blur\">\n        <input\n            type=\"number\"\n            v-if=\"type === 'number'\"\n            ref=\"input\"\n            v-model=\"currentValue\"\n            :disabled=\"currentDisabled\"\n            :placeholder=\"placeholder\"\n            @focus=\"focus = true\"\n            class=\"input-text-input\">\n        <input\n            type=\"tel\"\n            v-else-if=\"type === 'tel'\"\n            ref=\"input\"\n            v-model=\"currentValue\"\n            :disabled=\"currentDisabled\"\n            :placeholder=\"placeholder\"\n            @focus=\"focus = true\"\n            class=\"input-text-input\">\n        <input\n            type=\"date\"\n            v-else-if=\"type === 'date'\"\n            ref=\"input\"\n            v-model=\"currentValue\"\n            :disabled=\"currentDisabled\"\n            :placeholder=\"placeholder\"\n            @focus=\"focus = true\"\n            class=\"input-text-input\">\n        <input\n            type=\"datetime\"\n            v-else-if=\"type === 'datetime'\"\n            ref=\"input\"\n            v-model=\"currentValue\"\n            :disabled=\"currentDisabled\"\n            :placeholder=\"placeholder\"\n            @focus=\"focus = true\"\n            class=\"input-text-input\">\n        <input\n            type=\"time\"\n            v-else-if=\"type === 'time'\"\n            ref=\"input\"\n            v-model=\"currentValue\"\n            :disabled=\"currentDisabled\"\n            :placeholder=\"placeholder\"\n            @focus=\"focus = true\"\n            class=\"input-text-input\">\n        <input\n            type=\"password\"\n            v-else-if=\"type === 'password'\"\n            ref=\"input\"\n            v-model=\"currentValue\"\n            :disabled=\"currentDisabled\"\n            :placeholder=\"placeholder\"\n            @focus=\"focus = true\"\n            class=\"input-text-input\">\n        <input\n            type=\"email\"\n            v-else-if=\"type === 'email'\"\n            ref=\"input\"\n            v-model=\"currentValue\"\n            :disabled=\"currentDisabled\"\n            :placeholder=\"placeholder\"\n            @focus=\"focus = true\"\n            class=\"input-text-input\">\n        <input\n            type=\"text\"\n            v-else\n            ref=\"input\"\n            v-model=\"currentValue\"\n            :disabled=\"currentDisabled\"\n            :placeholder=\"placeholder\"\n            @focus=\"focus = true\"\n            class=\"input-text-input\">\n        <icon\n            v-show=\"clearable && focus && !!currentValue\"\n            class=\"input-text-clear\"\n            name=\"times-circle\"\n            @click=\"clearHandle\"\n            size=\"lg\" />\n        <icon\n            v-if=\"state\"\n            :name=\"getStateIcon()\"\n            :class=\"getStateClass()\"\n            size=\"lg\" />\n    </div>\n</template>\n\n<script>\n    import Sync from '../mixins/sync';\n\n    export default {\n        name: 'input-text',\n        mixins: [Sync],\n        props: {\n            clearable: Boolean,\n            placeholder: String,\n            type: {\n                type: String,\n                default: 'text',\n                validator(value) {\n                    return ['text', 'number', 'tel', 'date', 'datetime', 'time', 'password', 'email'].indexOf(value) > -1;\n                },\n            },\n            state: {\n                type: String,\n                validator(value) {\n                    return ['success', 'warning', 'error'].indexOf(value) > -1;\n                },\n            },\n        },\n        data() {\n            return {\n                focus: false,\n                currentDisabled: this.disabled || this.$parent.disabled,\n            };\n        },\n        methods: {\n            blur() {\n                this.focus = false;\n            },\n            clearHandle() {\n                if(!this.currentDisabled) {\n                    this.currentValue = '';\n                    this.$refs.input.focus();\n                }\n            },\n            getStateClass() {\n                return {\n                    success: 'text-success',\n                    warning: 'text-warning',\n                    error: 'text-danger',\n                }[this.state];\n            },\n            getStateIcon() {\n                return {\n                    success: 'check',\n                    warning: 'exclamation-triangle',\n                    error: 'exclamation-circle',\n                }[this.state];\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/InputTextarea.vue",
    "content": "<template>\n    <div class=\"textarea\">\n        <textarea\n            v-model=\"currentValue\"\n            :disabled=\"disabled\"\n            :placeholder=\"placeholder\"\n            class=\"textarea-input\"\n            :rows=\"rows\"></textarea>\n        <div class=\"textarea-counter\" v-if=\"countable\">{{currentValue.length}}/{{maxLength}}</div>\n    </div>\n</template>\n\n<script>\n    import Sync from '../mixins/sync';\n\n    export default {\n        name: 'input-textarea',\n        mixins: [Sync],\n        props: {\n            placeholder: String,\n            countable: Boolean,\n            maxLength: {\n                type: Number,\n                default: 200,\n            },\n            rows: {\n                type: Number,\n                default: 4,\n            },\n        },\n        data() {\n            return {\n                stage: 0,\n            };\n        },\n        watch: {\n            currentValue(val) {\n                if(val.length > this.maxLength) {\n                    this.currentValue = val.substring(0, this.maxLength);\n                }\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/Loading.vue",
    "content": "<template>\n    <svg\n        class=\"loading\"\n        :class=\"{\n            [`loading-${size}`]: size,\n            [`loading-${theme}`]: theme,\n        }\"\n        viewBox=\"25 25 50 50\">\n        <circle class=\"loading-path\" cx=\"50\" cy=\"50\" r=\"23\" fill=\"none\"/>\n    </svg>\n</template>\n\n<script>\n    export default {\n        name: 'loading',\n        props: {\n            size: {\n                type: String,\n                validator(value) {\n                    return ['sm', 'lg'].indexOf(value) > -1;\n                },\n            },\n            theme: {\n                type: String,\n                validator(value) {\n                    return ['primary', 'secondary'].indexOf(value) > -1;\n                },\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/Loadmore.vue",
    "content": "<template>\n    <div class=\"loadmore\">\n        <div\n            class=\"loadmore-content\"\n            :class=\"{ dropped: topDropped || bottomDropped }\"\n            :style=\"{ transform: `translate3d(0, ${translate}px, 0)` }\">\n            <slot name=\"top\">\n                <div class=\"loadmore-hint loadmore-hint-top\" v-if=\"topMethod\">\n                    <loading v-if=\"showLoading && topStatus === 'loading'\"></loading>\n                    <span class=\"loadmore-text\">{{ topText }}</span>\n                </div>\n            </slot>\n            <slot></slot>\n            <slot name=\"bottom\">\n                <div class=\"loadmore-hint loadmore-hint-bottom\" v-if=\"bottomMethod\">\n                    <loading v-if=\"showLoading && bottomStatus === 'loading'\" ></loading>\n                    <span class=\"loadmore-text\">{{ bottomText }}</span>\n                </div>\n            </slot>\n        </div>\n    </div>\n</template>\n\n<script>\n    export default {\n        name: 'loadmore',\n        props: {\n            topPullText: {\n                type: String,\n                default: 'pull down to refresh',\n            },\n            topDropText: {\n                type: String,\n                default: 'release to load more',\n            },\n            topLoadingText: {\n                type: String,\n                default: 'loading...',\n            },\n            topDistance: {\n                type: Number,\n                default: 70,\n            },\n            topMethod: {\n                type: Function,\n            },\n            topCancelledMethod: {\n                type: Function,\n            },\n            topPulledMethod: {\n                type: Function,\n            },\n            topAllLoaded: {\n                type: Boolean,\n                default: false,\n            },\n            bottomPullText: {\n                type: String,\n                default: 'pull up to refresh',\n            },\n            bottomDropText: {\n                type: String,\n                default: 'release to load more',\n            },\n            bottomLoadingText: {\n                type: String,\n                default: 'loading...',\n            },\n            bottomDistance: {\n                type: Number,\n                default: 70,\n            },\n            bottomMethod: {\n                type: Function,\n            },\n            bottomAllLoaded: {\n                type: Boolean,\n                default: false,\n            },\n            showLoading: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        data() {\n            return {\n                topStatus: '',\n                topText: '',\n                topDropped: false,\n                topPulled: false,\n                bottomStatus: '',\n                bottomText: '',\n                bottomDropped: false,\n                bottomReached: false,\n                scrollElement: null,\n                startY: 0,\n                startScrollTop: 0,\n                currentY: 0,\n                direction: '',\n                translate: 0,\n            };\n        },\n        watch: {\n            topStatus(status) {\n                switch(status) {\n                    case 'pull':\n                        this.topText = this.topPullText;\n                        break;\n                    case 'drop':\n                        this.topText = this.topDropText;\n                        break;\n                    case 'loading':\n                        this.topText = this.topLoadingText;\n                        break;\n                    default:\n                        break;\n                }\n                this.$emit('topStatusChanged', status);\n            },\n            bottomStatus(status) {\n                switch(status) {\n                    case 'pull':\n                        this.bottomText = this.bottomPullText;\n                        break;\n                    case 'drop':\n                        this.bottomText = this.bottomDropText;\n                        break;\n                    case 'loading':\n                        this.bottomText = this.bottomLoadingText;\n                        break;\n                    default:\n                        break;\n                }\n                this.$emit('bottomStatusChanged', status);\n            },\n        },\n        methods: {\n            getScrollElement(element) {\n                let currentNode = element,\n                    overflowY = '';\n\n                while(\n                    currentNode &&\n                    currentNode.tagName !== 'HTML' &&\n                    currentNode.tagName !== 'BODY' &&\n                    currentNode.nodeType === 1\n                ) {\n                    overflowY = document.defaultView.getComputedStyle(currentNode).overflowY;\n                    if(overflowY === 'scroll' || overflowY === 'auto') return currentNode;\n                    currentNode = currentNode.parentNode;\n                }\n\n                return window;\n            },\n            getScrollTop(element) {\n                if(element === window) {\n                    return Math.max(window.pageYOffset || 0, document.documentElement.scrollTop);\n                }\n\n                return element.scrollTop;\n            },\n            handleTouchStart(event) {\n                this.startY = event.touches[0].clientY;\n                this.startScrollTop = this.getScrollTop(this.scrollElement);\n                this.bottomReached = false;\n\n                if(this.topStatus !== 'loading') {\n                    this.topStatus = 'pull';\n                    this.topDropped = false;\n                    this.topPulled = false;\n                }\n\n                if(this.bottomStatus !== 'loading') {\n                    this.bottomStatus = 'pull';\n                    this.bottomDropped = false;\n                }\n            },\n            handleTouchMove(event) {\n                // outside element\n                const rect = this.$el.getBoundingClientRect();\n\n                if(this.startY < rect.top && this.startY > rect.bottom) return;\n\n                // hand moved\n                let distance = 0;\n\n                this.currentY = event.touches[0].clientY;\n                // avoid accident\n                distance = (this.currentY - this.startY) / 2;\n                // detect direction\n                this.direction = distance > 0 ? 'down' : 'up';\n\n                // pull down\n                if(\n                    typeof this.topMethod === 'function' &&\n                    this.topStatus !== 'loading' &&\n                    this.direction === 'down' &&\n                    this.getScrollTop(this.scrollElement) === 0 &&\n                    !this.topAllLoaded\n                ) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    this.translate = distance - this.startScrollTop;\n                    if(this.translate < 0) this.translate = 0;\n                    this.topStatus = this.translate >= this.topDistance ? 'drop' : 'pull';\n                    if(!this.topPulled) {\n                        this.topPulled = true;\n                        this.topPulledMethod && this.topPulledMethod();\n                    }\n                }\n\n                // pull up\n                if(this.direction === 'up') {\n                    this.bottomReached = this.bottomReached || this.isBottomReached();\n                }\n\n                if(\n                    typeof this.bottomMethod === 'function' &&\n                    this.bottomStatus !== 'loading' &&\n                    this.direction === 'up' &&\n                    this.bottomReached &&\n                    !this.bottomAllLoaded\n                ) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    this.translate = this.getScrollTop(this.scrollElement)\n                        - this.startScrollTop\n                        + distance;\n                    if(this.translate > 0) this.translate = 0;\n                    this.bottomStatus = -this.translate >= this.bottomDistance ? 'drop' : 'pull';\n                }\n            },\n            handleTouchEnd() {\n                // pull down\n                if(this.direction === 'down' &&\n                    this.getScrollTop(this.scrollElement) === 0 &&\n                    this.translate > 0\n                ) {\n                    this.topDropped = true;\n\n                    if(this.topStatus === 'drop') {\n                        this.translate = 50;\n                        this.topStatus = 'loading';\n                        this.topMethod();\n                    } else {\n                        this.translate = 0;\n                        this.topStatus = 'pull';\n                        this.topCancelledMethod && this.topCancelledMethod();\n                    }\n                }\n\n                // pull up\n                if(\n                    this.direction === 'up' &&\n                    this.bottomReached &&\n                    this.translate < 0\n                ) {\n                    this.bottomDropped = true;\n                    // reset after pull up takes effect\n                    this.bottomReached = false;\n\n                    if(this.bottomStatus === 'drop') {\n                        this.translate = -50;\n                        this.bottomStatus = 'loading';\n                        this.bottomMethod();\n                    } else {\n                        this.translate = 0;\n                        this.bottomStatus = 'pull';\n                    }\n                }\n\n                // reset direction\n                this.direction = '';\n            },\n            isBottomReached() {\n                if(this.scrollElement === window) {\n                    return (\n                        document.documentElement.clientHeight + (document.body.scrollTop || window.pageYOffset)\n                        === document.body.scrollHeight\n                    );\n                }\n\n                return (\n                    this.scrollElement.getBoundingClientRect().bottom\n                    >= this.$el.getBoundingClientRect().bottom\n                );\n            },\n            onTopLoaded() {\n                this.translate = 0;\n                setTimeout(() => {\n                    this.topStatus = 'pull';\n                }, 200);\n            },\n            onBottomLoaded() {\n                this.bottomStatus = 'pull';\n                this.bottomDropped = false;\n                this.$nextTick(() => {\n                    if(this.scrollElement === window) {\n                        document.body.scrollTop += 50;\n                    } else {\n                        this.scrollElement.scrollTop += 50;\n                    }\n                    this.translate = 0;\n                });\n            },\n        },\n        mounted() {\n            this.topText = this.topPullText;\n            this.topStatus = 'pull';\n            this.bottomStatus = 'pull';\n            this.scrollElement = this.getScrollElement(this.$el);\n\n            if(\n                typeof this.topMethod === 'function' ||\n                typeof this.bottomMethod === 'function'\n            ) {\n                this.$el.addEventListener('touchstart', this.handleTouchStart);\n                this.$el.addEventListener('touchmove', this.handleTouchMove);\n                this.$el.addEventListener('touchend', this.handleTouchEnd);\n            }\n        },\n        beforeDestroy() {\n            if(\n                typeof this.topMethod === 'function' ||\n                typeof this.bottomMethod === 'function'\n            ) {\n                this.$el.removeEventListener('touchstart', this.handleTouchStart);\n                this.$el.removeEventListener('touchmove', this.handleTouchMove);\n                this.$el.removeEventListener('touchend', this.handleTouchEnd);\n            }\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/Mask.vue",
    "content": "<template>\n    <transition :name=\"transition\">\n        <div\n            class=\"mask\"\n            v-show=\"$parent.currentValue\"\n            @click=\"clickable && ($parent.currentValue = false)\">\n        </div>\n    </transition>\n</template>\n\n<script>\n    export default {\n        name: 'mask-layer',\n        props: {\n            transition: {\n                type: String,\n                default: 'fade',\n            },\n            clickable: {\n                type: Boolean,\n                default: true,\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/Media.vue",
    "content": "<template>\n    <div\n        @click=\"$emit('click')\"\n        class=\"media\"\n        :class=\"`flex-align-${align}`\">\n        <slot></slot>\n    </div>\n</template>\n\n<script>\n    export default {\n        name: 'media',\n        props: {\n            // 对齐\n            align: {\n                type: String,\n                default: 'top',\n                validator(value) {\n                    return ['top', 'bottom', 'middle'].indexOf(value) > -1;\n                },\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/MediaBody.vue",
    "content": "<template>\n    <div class=\"media-body\">\n        <slot></slot>\n    </div>\n</template>\n\n<script>\n    export default {\n        name: 'media-body',\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/MediaObject.vue",
    "content": "<template>\n    <div class=\"media-object\">\n        <slot></slot>\n    </div>\n</template>\n\n<script>\n    export default {\n        name: 'media-object',\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/Navbar.vue",
    "content": "<template>\n    <div class=\"navbar\" :class=\"'navbar-' + theme\">\n        <div class=\"navbar-header\">\n            <slot></slot>\n        </div>\n        <div class=\"navbar-body\" v-if=\"$slots.body\">\n            <slot name=\"body\"></slot>\n        </div>\n        <div class=\"navbar-footer\">\n            <slot name=\"footer\"></slot>\n        </div>\n    </div>\n</template>\n\n<script>\n    export default {\n        name: 'navbar',\n        props: {\n            // 主题\n            theme: {\n                type: String,\n                default: 'primary',\n                validator(value) {\n                    return ['primary', 'default'].indexOf(value) > -1;\n                },\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/Navigation.vue",
    "content": "<template>\n    <div class=\"navigation\">\n        <slot></slot>\n    </div>\n</template>\n\n<script>\n    import Tab from '../mixins/tab';\n\n    export default {\n        name: 'navigation',\n        mixins: [Tab],\n        props: {\n            activeKey: {\n                default: 0,\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/NavigationItem.vue",
    "content": "<template>\n    <div\n        class=\"navigation-item\"\n        :class=\"{'active': $parent.currentActiveKey === currentEventKey}\"\n        @click=\"$parent.$emit('itemClick', currentEventKey)\">\n        <slot></slot>\n        <div class=\"navigation-item-label\">\n            {{label}}\n        </div>\n    </div>\n</template>\n\n<script>\n    import TabItem from '../mixins/tabItem';\n\n    export default {\n        name: 'navigation-item',\n        mixins: [TabItem],\n        props: {\n            label: String,\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/Picker.vue",
    "content": "<template>\n    <div\n        class=\"picker\"\n        :class=\"{\n            [`picker-${size}`]: size,\n        }\"\n        ref=\"picker\">\n        <div class=\"picker-mask\"></div>\n        <div class=\"picker-indicator\"></div>\n        <div class=\"picker-list\" :class=\"{active: dragging}\" ref=\"pickerList\">\n            <slot></slot>\n        </div>\n    </div>\n</template>\n\n<script>\n    import Sync from '../mixins/sync';\n    import draggable from '../utils/draggable';\n    import { getTranslate, setTranslate } from '../utils/translate';\n\n    export default {\n        name: 'picker',\n        mixins: [Sync],\n        props: {\n            size: {\n                type: String,\n                validator(value) {\n                    return ['sm', 'lg'].indexOf(value) > -1;\n                },\n            },\n        },\n        data() {\n            return {\n                dragging: false,\n                itemHeight: 0,\n                pickedIndex: -1,\n            };\n        },\n        methods: {\n            // 计算拖拽区间\n            getDragRange() {\n                let { pickerList } = this.$refs;\n\n                return {\n                    min: -1 * this.getOptionHeight() * (pickerList.children.length - 1),\n                    max: 0,\n                };\n            },\n            // 获取每个Option高度\n            getOptionHeight() {\n                if(this.itemHeight) return this.itemHeight;\n\n                let style = document.body.currentStyle ||\n                document.defaultView.getComputedStyle(document.body, '');\n\n                this.itemHeight = 3 * parseInt(style.fontSize, 10);\n\n                return this.itemHeight;\n            },\n            // 选择Option\n            pickOption() {\n                let pickIndex = 0;\n\n                this.$children.forEach((option, index) => {\n                    if(option.value === this.currentValue) {\n                        pickIndex = index;\n                    }\n                });\n\n                let itemHeight = this.getOptionHeight(),\n                    translate = itemHeight * pickIndex * -1;\n\n                setTranslate(this.$refs.pickerList, null, translate);\n                this.pickedIndex = Math.abs(pickIndex);\n            },\n            // 事件初始化\n            initDrag() {\n                let { picker, pickerList } = this.$refs,\n                    prevTranslateY;\n\n                draggable(picker, {\n                    effectEl: pickerList,\n                    onDragStart: ({ translateY }, event) => {\n                        event.preventDefault();\n                        prevTranslateY = translateY;\n                    },\n                    onDrag: ({ dragging, effectEl, translateY }, event) => {\n                        event.preventDefault();\n                        this.dragging = dragging;\n\n                        let maxTranslateY = this.getOptionHeight() * 3;\n                        let currentTranslateY = translateY;\n                        let pickerHeight = this.$children.length * this.getOptionHeight();\n\n                        // 拉过了\n                        if(translateY > 0) {\n                            let rate = (maxTranslateY - translateY) / maxTranslateY;\n\n                            rate = rate >= 0 ? rate : 0.1;\n\n                            currentTranslateY = prevTranslateY + rate * (translateY - prevTranslateY);\n                        } else if(translateY < -pickerHeight) {\n                            let rate = ((translateY - pickerHeight) - maxTranslateY) / maxTranslateY;\n\n                            rate = rate >= 0 ? rate : 0.1;\n\n                            currentTranslateY = prevTranslateY + rate * (translateY - prevTranslateY);\n                        }\n\n                        prevTranslateY = currentTranslateY;\n                        setTranslate(effectEl, null, currentTranslateY);\n                    },\n                    onDragEnd: ({ dragging, startTimestamp, velocityTranslateY }, event) => {\n                        event.preventDefault();\n\n                        this.dragging = dragging;\n                        let momentumRatio = 10,\n                            itemHeight = this.getOptionHeight(),\n                            translateY = getTranslate(pickerList).y,\n                            duration = new Date() - startTimestamp;\n\n                        let momentumTranslate;\n\n                        if(duration < 300) {\n                            momentumTranslate = translateY + (velocityTranslateY * momentumRatio);\n                        }\n\n                        // this.$nextTick(() => {\n                        let translate;\n                        let dragRange = this.getDragRange();\n\n                        if(momentumTranslate) {\n                            translate = Math.round(momentumTranslate / itemHeight) * itemHeight;\n                        } else {\n                            translate = Math.round(translateY / itemHeight) * itemHeight;\n                        }\n\n                        translate = Math.max(Math.min(translate, dragRange.max), dragRange.min);\n                        setTranslate(pickerList, null, translate);\n\n                        this.pickedIndex = Math.abs(translate / itemHeight);\n                        // });\n                    },\n                });\n            },\n        },\n        watch: {\n            pickedIndex(val) {\n                this.currentValue = this.$children[val].value;\n            },\n            value() {\n                this.pickOption();\n            },\n        },\n        mounted() {\n            this.pickOption();\n            this.initDrag();\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/PickerOption.vue",
    "content": "<template>\n    <div\n        class=\"picker-list-item\"\n        :class=\"{active: $parent.currentValue === value}\">\n        <slot></slot>\n    </div>\n</template>\n\n<script>\n    export default {\n        name: 'picker-option',\n        props: {\n            value: {},\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/Progressbar.vue",
    "content": "<template>\n    <div\n        class=\"progressbar\"\n        :class=\"{\n            [`progressbar-${size}`]: size,\n            [`progressbar-${theme}`]: theme,\n        }\">\n        <div class=\"progressbar-indicator\" :style=\"{width: `${value * 100}%`}\">\n            <slot></slot>\n        </div>\n    </div>\n</template>\n\n<script>\n    export default {\n        name: 'progressbar',\n        props: {\n            value: {\n                type: Number,\n                default: 0,\n                required: true,\n                validator(value) {\n                    return value >= 0 && value <= 1;\n                },\n            },\n            // 主题\n            theme: {\n                type: String,\n                default: 'primary',\n                validator(value) {\n                    return ['primary', 'success', 'warning', 'danger'].indexOf(value) > -1;\n                },\n            },\n            // 尺寸\n            size: {\n                type: String,\n                validator(value) {\n                    return ['sm'].indexOf(value) > -1;\n                },\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/Progressbars.vue",
    "content": "<template>\n    <div\n        class=\"progressbars\"\n        :class=\"{\n            [`progressbars-${size}`]: size,\n            [`progressbars-${theme}`]: theme,\n        }\">\n        <div class=\"line-bg\" :style=\"`background-color: ${backgroundColor};`\">\n            <div class=\"line-progress\" :style=\"`width: ${this.progressWidth}; background-color: ${this.foregroundColor};`\"></div>\n        </div>\n        <div\n            v-for=\"(nodeData, index) in nodeDataList\"\n            :key=\"index\"\n            :class=\"getNodeClass(index)\"\n            :style=\"getNodeStyle(index)\"\n            >\n            <div class=\"info\">\n                <slot :name=\"`infoSlot${index}`\" />\n            </div>\n        </div>\n    </div>\n</template>\n\n<script>\n    export default {\n        name: 'progressbars',\n        data() {\n            return {\n                circleWidth: 0.8,\n            }\n        },\n        props: {\n            // 所有节点数值\n            nodeDataList: {\n                type: Array,\n                default: [0, 10, 50],\n                required: true,\n                validator(value) {\n                    return value && value.length >= 2;\n                }\n            },\n            // 当前数值\n            currentData: {\n                type: Number,\n                default: 0,\n                required: true,\n            },\n            // 所有节点展示内容\n            nodeInfoList: {\n                type: Array,\n                default: null,\n                // validator(value) {\n                //     if (value) {\n                //         return value.length === this.nodeDataList.length;\n                //     }\n                //\n                //     return\n                // }\n            },\n            // 主题\n            theme: {\n                type: String,\n                default: 'primary',\n                validator(value) {\n                    return ['primary', 'success', 'warning', 'danger'].indexOf(value) > -1;\n                },\n            },\n            // 尺寸\n            size: {\n                type: String,\n                default: 'sm',\n                validator(value) {\n                    return ['xsm', 'sm', 'lg'].indexOf(value) > -1;\n                },\n            },\n            // 节点形状\n            nodeShape: {\n                type: String,\n                default: 'dot',\n                validator(value) {\n                    return ['circle', 'dot', 'checkCircle'].indexOf(value) > -1;\n                },\n            },\n            // 进度条背景色\n            backgroundColor: {\n                type: String,\n                default: '#DEE0E8',\n            },\n            // 进度条前景色\n            foregroundColor: {\n                type: String,\n                default: '#1C89EA',\n            },\n        },\n        computed: {\n            nodesLength: function () {\n                return this.nodeDataList.length\n            },\n            // 方案一\n            // 进度条百分比 + N个节点宽度 = 精确的进度条长度\n            //\n            // 方案二：\n            // （100% - 所有节点宽度）/（所有节点数 - 1）*（所处区间头节点index + 占当前区间百分比）+\n            // （所处区间头节点index + 1）* 一个节点宽度 =\n            // 精确区间百分比 + 包含所有节点宽度 =\n            // 精确的进度条长度\n            progressWidth: function () {\n                /* eslint-disable */\n                // debugger\n                // 最高等级\n                if (this.currentDotIndex === this.nodesLength - 1) {\n                    return '100%'\n                }\n                // 方案一：总体进度\n                // const widthPercent =\n                // // 每个区间占比\n                // 1 / (this.nodeDataList.length - 1) *\n                // (\n                //     this.currentDotIndex +\n                //       // 当前区间分值\n                //       ((this.currentData - this.nodeDataList[this.currentDotIndex]) /\n                //         // 对应区间总分值\n                //         (this.nodeDataList[this.currentDotIndex + 1] - this.nodeDataList[this.currentDotIndex]))\n                //   )\n                //\n                // return `calc(${widthPercent * 100}% + ${(this.currentDotIndex + 1) * this.circleWidth}em)`\n\n                // 方案二：以下是经过拆解后的计算过程\n                // 当前区间占比\n                const currentAreaPercent =\n                    // 当前区间分值\n                    ((this.currentData - this.nodeDataList[this.currentDotIndex]) /\n                      // 对应区间总分值\n                      (this.nodeDataList[this.currentDotIndex + 1] - this.nodeDataList[this.currentDotIndex]))\n                const part1 = `(100% - ${this.nodesLength * this.circleWidth}em)`\n                const part2 = `${this.nodesLength - 1}`\n                const part3 = `${this.currentDotIndex + currentAreaPercent}`\n                const part4 = `${(this.currentDotIndex + 1) * this.circleWidth}em`\n\n                return `calc(${part1} / ${part2} * ${part3} + ${part4})`\n            },\n            currentDotIndex: function () {\n                  let currentDotIndex = 0\n\n                  for (let i = 0; i < this.nodeDataList.length; i++) {\n                    if (i === (this.nodeDataList.length - 1)) {\n                      if (this.currentData >= this.nodeDataList[i]) {\n                        currentDotIndex = i\n                      }\n                    } else {\n                      if (this.currentData >= this.nodeDataList[i] && this.currentData < this.nodeDataList[i + 1]) {\n                        currentDotIndex = i\n                        break\n                      }\n                    }\n                  }\n\n                  return currentDotIndex\n            },\n        },\n        methods: {\n            getNodeClass(index) {\n              let nodeClass = 'node '\n\n              if (this.nodeShape === 'dot') {\n                  nodeClass += 'dot '\n              } else if (this.nodeShape === 'circle') {\n                  nodeClass += 'circle '\n              } else if (this.nodeShape === 'checkCircle') {\n                  nodeClass += 'check-circle '\n              }\n\n              if (index <= this.currentDotIndex) {\n                nodeClass += 'active '\n              }\n              if (index === this.currentDotIndex) {\n                nodeClass += 'current-dot '\n              }\n\n              return nodeClass\n            },\n            getNodeStyle(index) {\n                let nodeStyle = ''\n\n                if (this.nodeShape === 'dot') {\n                    nodeStyle = 'border-color: '\n                } else if (this.nodeShape === 'circle') {\n                    nodeStyle = 'background-color: '\n                } else if (this.nodeShape === 'checkCircle') {\n                    // nodeStyle = 'color: '\n                    nodeStyle = 'background-color: '\n                }\n\n                if (index <= this.currentDotIndex) {\n                    nodeStyle += `${this.foregroundColor};`\n                } else {\n                    nodeStyle += `${this.backgroundColor};`\n                }\n\n                return `${this.getCirclePosition(index)} ${nodeStyle}`\n            },\n            getCirclePosition(index) {\n                // （全长 - 一个节点宽度） / （节点数 - 1） * 节点索引 = 节点left定位\n                // return `left: calc(100%/${this.nodesLength-1}*${index} - ${this.circleWidth / (this.nodesLength -1 ) * index}em);`\n                return `left: calc((100% - ${this.circleWidth}em) / ${this.nodesLength - 1} * ${index});`\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/Radio.vue",
    "content": "<template>\n    <label\n        class=\"radio\"\n        :class=\"'radio-' + shape\">\n        <input\n            type=\"radio\"\n            class=\"radio-input\"\n            v-model=\"model\"\n            :value=\"isGroupChildComponent ? value : val\"\n            :disabled=\"disabled || $parent.disabled\">\n        <span class=\"radio-addon\">\n            <i v-if=\"shape==='default'\" />\n            <i v-else class=\"fa fa-check\" />\n        </span>\n        <span class=\"radio-label\">\n            <slot></slot>\n        </span>\n    </label>\n</template>\n\n<script>\n    export default {\n        name: 'radio',\n        props: {\n            shape: {\n                type: String,\n                default: 'default',\n                validator(value) {\n                    return ['square', 'circle', 'default'].indexOf(value) > -1;\n                },\n            },\n            value: {},\n            val: {},\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        computed: {\n            model: {\n                get() {\n                    return this.isGroupChildComponent ? this.$parent.value : this.value;\n                },\n                set(val) {\n                    if(this.isGroupChildComponent) {\n                        this.$parent.$emit('input', val);\n                    } else {\n                        this.$emit('input', val);\n                    }\n                },\n            },\n        },\n        beforeCreate() {\n            this.isGroupChildComponent = this.$parent.$options._componentTag === 'radio-group';\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/RadioGroup.vue",
    "content": "<template>\n    <div class=\"radio-group\">\n        <slot></slot>\n    </div>\n</template>\n\n<script>\n    import Sync from '../mixins/sync';\n\n    export default {\n        name: 'radio-group',\n        mixins: [Sync],\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/Searchbar.vue",
    "content": "<template>\n    <div class=\"searchbar\" :class=\"{active: focus}\" v-disfavor=\"blur\">\n        <slot></slot>\n    </div>\n</template>\n\n<script>\n    import Sync from '../mixins/sync';\n\n    export default {\n        name: 'searchbar',\n        mixins: [Sync],\n        props: {\n            clearable: {\n                type: Boolean,\n                default: true,\n            },\n            shape: {\n                type: String,\n                validator(value) {\n                    return ['circle'].indexOf(value) > -1;\n                },\n            },\n            autoBlur: {\n                type: Boolean,\n                default: true,\n            },\n        },\n        data() {\n            return {\n                focus: false,\n            };\n        },\n        methods: {\n            blur() {\n                this.autoBlur && (this.focus = false);\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/SearchbarBtn.vue",
    "content": "<template>\n    <div class=\"searchbar-btn\">\n        <slot></slot>\n    </div>\n</template>\n\n<script>\n    export default {\n        name: 'searchbar-btn',\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/SearchbarPlaceholder.vue",
    "content": "<template>\n    <div\n        @click=\"clickHandle\"\n        class=\"searchbar-input\"\n        :class=\"{\n            'border-circle': $parent.shape === 'circle'\n        }\">\n        <div\n            class=\"searchbar-input-placeholder\"\n            :style=\"{overflow: !!$parent.currentValue ? 'hidden' : 'visible'}\">\n            <slot></slot>\n        </div>\n        <input\n            type=\"text\"\n            class=\"searchbar-input-field\"\n            v-model=\"currentValue\"\n            ref=\"input\">\n        <icon\n            v-show=\"$parent.clearable && !!$parent.currentValue\"\n            class=\"searchbar-input-clear\"\n            name=\"times-circle\"\n            @click=\"currentValue = ''\"\n            size=\"lg\" />\n    </div>\n</template>\n\n<script>\n    export default {\n        name: 'searchbar-placeholder',\n        data() {\n            return {\n                currentValue: this.$parent.value,\n            };\n        },\n        watch: {\n            currentValue(val) {\n                this.$parent.currentValue = val;\n            },\n        },\n        methods: {\n            clickHandle() {\n                this.$parent.focus = true;\n                setTimeout(() => {\n                    this.$refs.input.focus();\n                }, 300);\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/SegmentedControl.vue",
    "content": "<template>\n    <div class=\"segmented-control\" :class=\"{disabled}\">\n        <slot></slot>\n    </div>\n</template>\n\n<script>\n    import Tab from '../mixins/tab';\n\n    export default {\n        name: 'segmented-control',\n        mixins: [Tab],\n        props: {\n            activeKey: {\n                default: 0,\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/SegmentedControlItem.vue",
    "content": "<template>\n    <div\n        class=\"segmented-control-item\"\n        :class=\"{\n            'active': $parent.currentActiveKey === currentEventKey,\n            disabled: disabled || $parent.disabled,\n        }\"\n        @click=\"clickHandle\">\n        <slot></slot>\n    </div>\n</template>\n\n<script>\n    import TabItem from '../mixins/tabItem';\n\n    export default {\n        name: 'segmented-control-item',\n        mixins: [TabItem],\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/Selector.vue",
    "content": "<template>\n    <div class=\"selector\">\n        <slot></slot>\n    </div>\n</template>\n\n<script>\n    import Sync from '../mixins/sync';\n    import Select from '../mixins/select';\n\n    export default {\n        name: 'selector',\n        mixins: [Sync, Select],\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/SelectorOption.vue",
    "content": "<template>\n    <div\n        class=\"cell selector-option\"\n        :class=\"{\n            'active': isActive(),\n            'cell-disabled': disabled || $parent.disabled }\"\n        @click=\"clickHandle\">\n        <span slot=\"header\">\n        </span>\n        <span class=\"cell-body\">\n            <slot></slot>\n        </span>\n        <icon\n            :name=\"checkedIcon\"\n            size=\"lg\"\n            class=\"selector-icon\" />\n    </div>\n</template>\n\n<script>\n    import SelectOption from '../mixins/selectOption';\n\n    export default {\n        name: 'selector-option',\n        mixins: [SelectOption],\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/Sidelip.vue",
    "content": "<template>\n    <div @click=\"$emit('click')\">\n        <transition :name=\"transition\">\n            <div v-show=\"currentValue\" class=\"sidelip\">\n                <slot></slot>\n            </div>\n        </transition>\n        <mask-layer :clickable=\"closeOnClickMask\" />\n    </div>\n</template>\n\n<script>\n    import Sync from '../mixins/sync';\n\n    export default {\n        name: 'sidelip',\n        mixins: [Sync],\n        props: {\n            transition: {\n                type: String,\n                default: 'slide-left',\n            },\n            closeOnClickMask: {\n                type: Boolean,\n                default: true,\n            },\n        },\n        watch: {\n            currentValue(val) {\n                !val && (this.$emit('close'));\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/SlideUp.vue",
    "content": "<template>\n    <div>\n        <transition :name=\"transition\">\n            <div v-show=\"currentValue\" class=\"slideup\">\n                <slot></slot>\n            </div>\n        </transition>\n        <mask-layer :clickable=\"closeOnClickMask\" />\n    </div>\n</template>\n\n<script>\n    import Sync from '../mixins/sync';\n\n    export default {\n        name: 'slideup',\n        mixins: [Sync],\n        props: {\n            transition: {\n                type: String,\n                default: 'slide-up',\n            },\n            closeOnClickMask: {\n                type: Boolean,\n                default: true,\n            },\n        },\n        watch: {\n            currentValue(val) {\n                val ? this.$emit('show') : this.$emit('close');\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/SlideUpBody.vue",
    "content": "<template>\n    <div class=\"slideup-body\" :class=\"{'no-padding': noPadding}\">\n        <slot></slot>\n    </div>\n</template>\n\n<script>\n    export default {\n        name: 'slideup-body',\n        props: {\n            noPadding: Boolean,\n        },\n    };\n</script>\n=\n"
  },
  {
    "path": "src/scripts/components/SlideUpHeader.vue",
    "content": "<template>\n    <div class=\"slideup-header\">\n        <slot></slot>\n    </div>\n</template>\n\n<script>\n    export default {\n        name: 'slideup-header',\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/Stepbar.vue",
    "content": "<template>\n    <div class=\"stepbar\">\n        <slot></slot>\n    </div>\n</template>\n\n<script>\n    import Sync from '../mixins/sync';\n\n    export default {\n        name: 'stepbar',\n        mixins: [Sync],\n        props: {\n            size: {\n                type: String,\n                validator(value) {\n                    return ['sm', 'lg'].indexOf(value) > -1;\n                },\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/StepbarItem.vue",
    "content": "<template>\n    <div class=\"stepbar-item\">\n        <div\n            class=\"stepbar-line\"\n            :class=\"{active: state === 'active' || state === 'finished' }\"\n            v-if=\"!isFirstChild\"></div>\n        <div\n            class=\"stepbar-item-addon\"\n            :class=\"{[state]: state !== 'default'}\">\n            <icon name=\"check\" v-if=\"state === 'finished'\"/>\n            {{state === 'finished' ? '' : (index + 1)}}\n        </div>\n        <div\n            class=\"stepbar-item-title\"\n            :class=\"{[state]: state !== 'default'}\">\n            <slot></slot>\n        </div>\n        <div\n            class=\"stepbar-line\"\n            :class=\"{active: state === 'finished' }\"\n            v-if=\"!isLastChild\"></div>\n    </div>\n</template>\n\n<script>\n    export default {\n        name: 'stepbar-item',\n        props: {\n            description: {\n                type: String,\n            },\n        },\n        data() {\n            return {\n                isFirstChild: false,\n                isLastChild: false,\n                state: 'default',\n                index: 0,\n            };\n        },\n        mounted() {\n            let length = this.$parent.$children.length;\n\n            this.index = this.$parent.$children.indexOf(this);\n\n            this.index === 0 && (this.isFirstChild = true);\n            (this.index === length - 1) && (this.isLastChild = true);\n\n            switch(true) {\n                case this.index === this.$parent.currentValue:\n                    this.state = 'active';\n                    break;\n                case this.index < this.$parent.currentValue:\n                    this.state = 'finished';\n                    break;\n                default:\n                    this.state = 'default';\n            }\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/Sticky.vue",
    "content": "<template>\n    <div>\n        <div :class=\"classes\" :style=\"styles\">\n            <slot></slot>\n        </div>\n    </div>\n</template>\n\n<script>\n    const prefixCls = 'sticky-affix';\n\n    function getScroll(target, top) {\n        const prop = top ? 'pageYOffset' : 'pageXOffset';\n        const method = top ? 'scrollTop' : 'scrollLeft';\n        let ret = target[prop];\n\n        if(typeof ret !== 'number') {\n            ret = window.document.documentElement[method];\n        }\n\n        return ret;\n    }\n\n    function getOffset(element) {\n        const rect = element.getBoundingClientRect();\n        const scrollTop = getScroll(window, true);\n        const scrollLeft = getScroll(window);\n        const docEl = window.document.body;\n        const clientTop = docEl.clientTop || 0;\n        const clientLeft = docEl.clientLeft || 0;\n\n        return {\n            top: rect.top + scrollTop - clientTop,\n            left: rect.left + scrollLeft - clientLeft,\n        };\n    }\n\n    export default {\n        name: 'sticky',\n        props: {\n            offsetTop: {\n                type: Number,\n                default: 0,\n            },\n            offsetBottom: {\n                type: Number,\n            },\n        },\n        data() {\n            return {\n                affix: false,\n                styles: {},\n            };\n        },\n        computed: {\n            offsetType() {\n                let type = 'top';\n\n                if(this.offsetBottom >= 0) {\n                    type = 'bottom';\n                }\n\n                return type;\n            },\n            classes() {\n                return [\n                    {\n                        [`${prefixCls}`]: this.affix,\n                    },\n                ];\n            },\n        },\n        mounted() {\n            window.addEventListener('scroll', this.handleScroll, false);\n            window.addEventListener('resize', this.handleScroll, false);\n        },\n        beforeDestroy() {\n            window.removeEventListener('scroll', this.handleScroll, false);\n            window.removeEventListener('resize', this.handleScroll, false);\n        },\n        methods: {\n            handleScroll() {\n                const affix = this.affix;\n                const scrollTop = getScroll(window, true);\n                const elOffset = getOffset(this.$el);\n                const windowHeight = window.innerHeight;\n                const elHeight = this.$el.getElementsByTagName('div')[0].offsetHeight;\n\n                // Fixed Top\n                if((elOffset.top - this.offsetTop) < scrollTop && this.offsetType === 'top' && !affix) {\n                    this.affix = true;\n                    this.styles = {\n                        top: `${this.offsetTop}px`,\n                        left: `${elOffset.left}px`,\n                        width: `${this.$el.offsetWidth}px`,\n                    };\n                    this.$emit('on-change', true);\n                } else if((elOffset.top - this.offsetTop) > scrollTop && this.offsetType === 'top' && affix) {\n                    this.affix = false;\n                    this.styles = null;\n                    this.$emit('on-change', false);\n                }\n                // Fixed Bottom\n                if((elOffset.top + this.offsetBottom + elHeight) > (scrollTop + windowHeight) && this.offsetType === 'bottom' && !affix) {\n                    this.affix = true;\n                    this.styles = {\n                        bottom: `${this.offsetBottom}px`,\n                        left: `${elOffset.left}px`,\n                        width: `${this.$el.offsetWidth}px`,\n                    };\n                    this.$emit('on-change', true);\n                } else if((elOffset.top + this.offsetBottom + elHeight) < (scrollTop + windowHeight) && this.offsetType === 'bottom' && affix) {\n                    this.affix = false;\n                    this.styles = null;\n                    this.$emit('on-change', false);\n                }\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/Swipe.vue",
    "content": "<template>\n    <div class=\"swipe\" ref=\"swipe\">\n        <div class=\"swipe-items\">\n            <slot></slot>\n        </div>\n        <div class=\"swipe-indicators\" v-show=\"length > 1 ? dots : (dots && onlyOneDot)\">\n            <div\n                v-for=\"index in length\"\n                :key=\"index\"\n                class=\"swipe-indicator\"\n                :class=\"{active: index - 1 === activeIndex}\"\n                ></div>\n        </div>\n    </div>\n</template>\n\n<script>\n    import draggable from '../utils/draggable';\n\n    export default {\n        name: 'swipe',\n        props: {\n            // 自动播放\n            autoplay: {\n                type: Boolean,\n                default: true,\n            },\n            // 默认起始项\n            defaultIndex: {\n                type: Number,\n                default: 0,\n            },\n            // 是否显示指示器\n            dots: {\n                type: Boolean,\n                default: true,\n            },\n            // 只有一张图片时，是否显示指示器\n            onlyOneDot: {\n                type: Boolean,\n                default: true,\n            },\n            // 轮播间隔时间\n            interval: {\n                type: Number,\n                default: 3000,\n            },\n            // 轮播速度\n            speed: {\n                type: Number,\n                default: 300,\n            },\n            dragThreshold: {\n                type: Number,\n                default: 1 / 2,\n            },\n            dragRate: {\n                type: Number,\n                default: 0.2,\n            },\n            onDragStart: Function,\n            onDrag: Function,\n            onDragEnd: Function,\n            // 过渡效果\n            easing: {\n                type: String,\n                default: 'ease-in-out',\n            },\n            // 循环播放\n            cycle: {\n                type: Boolean,\n                default: true,\n            },\n        },\n        data() {\n            return {\n                length: 0,\n                dragging: false,\n                transitioning: false,\n                negative: false,\n                activeIndex: this.defaultIndex,\n                isCycleEnd: false,\n            };\n        },\n        methods: {\n            init() {\n                this.length = this.$children.length;\n            },\n            // 获取前一个索引\n            getPrevIndex() {\n                let prevIndex = this.activeIndex - 1;\n\n                if(!this.cycle) {\n                    return prevIndex < 0 ? 0 : prevIndex;\n                }\n\n                return prevIndex < 0 ? this.length + prevIndex : prevIndex;\n            },\n            // 获取后一个索引\n            getNextIndex() {\n                const nextIndex = this.activeIndex + 1;\n                const length = this.length - 1;\n\n                if(!this.cycle) {\n                    return nextIndex > length ? length : nextIndex;\n                }\n\n                return nextIndex > length ? nextIndex % this.length : nextIndex;\n            },\n            // 是禁止循环\n            isDisableCycle(nextIndex) {\n                if(!this.cycle && nextIndex === this.activeIndex) {\n                    return true;\n                }\n\n                return false;\n            },\n            // 初始化拖拽\n            initDrag() {\n                if(this.length <= 1) {\n                    return;\n                }\n\n                let { swipe } = this.$refs,\n                    translateX,\n                    newIndex,\n                    dragStartTime;\n\n                draggable(swipe, {\n                    onDragStart: () => {\n                        // event.preventDefault();\n                        this.onDragStart && this.onDragStart(this.activeIndex);\n\n                        if(this.transitioning) return;\n\n                        dragStartTime = new Date();\n                        this.dragging = true;\n                        this.isCycleEnd = false;\n                        clearInterval(this.swipeInterval);\n                    },\n                    onDrag: (option, event) => {\n                        event.preventDefault();\n                        if(this.transitioning) return;\n\n                        translateX = option.translateX;\n                        this.onDrag && this.onDrag(this.activeIndex, translateX);\n\n                        if(translateX === 0 || !this.$children[this.activeIndex]) return;\n                        // 往左\n                        if(translateX < 0) {\n                            let nextIndex = this.getNextIndex();\n\n                            // 禁止循环播放\n                            if(this.isDisableCycle(nextIndex)) {\n                                this.isCycleEnd = true;\n\n                                return;\n                            }\n\n                            this.$children[this.activeIndex].swipeToLeft(translateX);\n                            this.$children[nextIndex].swipeToLeft(translateX);\n\n                            this.negative = false;\n                            newIndex = nextIndex;\n                        } else {\n                            // 往右\n                            let prevIndex = this.getPrevIndex();\n\n                            // 禁止循环播放\n                            if(this.isDisableCycle(prevIndex)) {\n                                this.isCycleEnd = true;\n\n                                return;\n                            }\n\n                            this.$children[this.activeIndex].swipeToRight(translateX);\n                            this.$children[prevIndex].swipeToRight(translateX);\n\n                            this.negative = true;\n                            newIndex = prevIndex;\n                        }\n                    },\n                    onDragEnd: () => {\n                        // event.preventDefault();\n                        if(this.transitioning) return;\n\n                        this.dragging = false;\n\n                        if(!this.isCycleEnd && this.$children[this.activeIndex]) {\n                            let threshold = this.$children[this.activeIndex].width * this.dragThreshold,\n                                rate = Math.abs(translateX) / (new Date() - dragStartTime);\n\n                            if(Math.abs(translateX) >= threshold || rate > this.dragRate) {\n                                this.activeIndex = newIndex;\n                            } else if(this.negative) {\n                                let prevIndex = this.getPrevIndex();\n\n                                this.$children[this.activeIndex].swipeToLeft(0);\n                                this.$children[prevIndex].swipeToLeft(0);\n                            } else {\n                                // 往左\n                                let nextIndex = this.getNextIndex();\n\n                                this.$children[this.activeIndex].swipeToRight(0);\n                                this.$children[nextIndex].swipeToRight(0);\n                            }\n                            this.onDragEnd && this.onDragEnd(this.activeIndex);\n                        }\n\n                        setTimeout(() => {\n                            this.play();\n                        }, this.interval);\n                    },\n                });\n            },\n            // 自动播放\n            play() {\n                if(!this.autoplay) return;\n\n                clearInterval(this.swipeInterval);\n                this.swipeInterval = setInterval(() => {\n                    if(this.dragging) return;\n\n                    this.activeIndex = this.getNextIndex();\n                }, this.interval);\n            },\n        },\n        watch: {\n            activeIndex() {\n                this.transitioning = true;\n\n                let nextItem = this.$children[this.activeIndex],\n                    currentIndex = this.negative ? this.getNextIndex() : this.getPrevIndex(),\n                    currentItem = this.$children[currentIndex];\n\n                // 重置()\n                // this.$children.forEach((child, activeIndex) => {\n                //     if(activeIndex !== currentIndex) {\n                //         child.reset(this.negative);\n                //     }\n                // });\n\n                if(!this.negative) {\n                    currentItem.swipeToLeft();\n                    nextItem.swipeToLeft();\n                } else {\n                    currentItem.swipeToRight();\n                    nextItem.swipeToRight();\n                    this.negative = false;\n                }\n            },\n            // 异步swipeItem\n            length() {\n                if(this.length) {\n                    this.initDrag();\n                    this.play();\n                }\n            },\n        },\n        mounted() {\n            this.init();\n        },\n        updated() {\n            this.$nextTick(() => {\n                this.init();\n            });\n            setTimeout(() => {\n                this.transitioning = false;\n            }, this.speed);\n        },\n        beforeDestroy() {\n            clearInterval(this.swipeInterval);\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/SwipeItem.vue",
    "content": "<template>\n    <div class=\"swipe-item\"\n        @webkitTransitionEnd=\"resetByTranslateX()\">\n        <slot></slot>\n    </div>\n</template>\n\n<script>\n    import { getTranslate, setTranslate } from '../utils/translate';\n    import { getPrefixStyle } from '../utils/cssPrefix';\n\n    export default {\n        name: 'swipe-item',\n        data() {\n            return {\n                width: 0,\n                translate: 0,\n            };\n        },\n        methods: {\n            // 根据位移重置\n            resetByTranslateX() {\n                this.$el.style.transition = '';\n\n                let translateX = getTranslate(this.$el).x;\n\n                translateX < 0 && setTranslate(this.$el, this.width, 0);\n            },\n            // 根据是否active重置\n            resetByNegative(negative) {\n                this.$el.style.transition = '';\n                if(this.index !== this.$parent.activeIndex) {\n                    setTranslate(this.$el, negative ? -this.width : this.width, 0);\n                }\n            },\n            // 初始化\n            init() {\n                this.width = this.$el.offsetWidth;\n                this.index = this.$parent.$children.indexOf(this);\n                let translate = this.width;\n\n                if(this.$parent.defaultIndex === this.index) {\n                    translate = 0;\n                }\n\n                setTranslate(this.$el, translate, 0);\n            },\n            // 是否在可编译范围内\n            isInTheLimitRange(translate, negative = false) {\n                let min,\n                    max;\n\n                // 正序\n                if(!negative) {\n                    min = 0;\n                    max = this.width;\n\n                    if(this.index === this.$parent.activeIndex) {\n                        min = -this.width;\n                        max = 0;\n                    }\n                } else {\n                    min = -this.width;\n                    max = 0;\n\n                    if(this.index === this.$parent.activeIndex) {\n                        min = 0;\n                        max = this.width;\n                    }\n                }\n\n                return translate >= min && translate <= max;\n            },\n            // 向左滑动\n            swipeToLeft(translateX) {\n                // 轮播\n                if(!translateX) {\n                    this.$el.style.transition = getPrefixStyle('transform', `${this.$parent.speed}ms ${this.$parent.easing}`);\n\n                    let translate = -this.width;\n\n                    if(this.index === this.$parent.activeIndex) {\n                        translate = 0;\n                    }\n\n                    setTranslate(this.$el, translate, 0);\n\n                    return;\n                }\n\n                // 滑动\n                let initTranslate = this.width;\n\n                if(this.index === this.$parent.activeIndex) {\n                    initTranslate = 0;\n                }\n\n                let finalTranslateX = initTranslate + translateX;\n\n                if(this.isInTheLimitRange(finalTranslateX)) {\n                    setTranslate(this.$el, finalTranslateX, 0);\n                }\n            },\n            // 向右滑动\n            swipeToRight(translateX) {\n                // 轮播\n                if(!translateX) {\n                    this.$el.style.transition = getPrefixStyle('transform', `${this.$parent.speed}ms ${this.$parent.easing}`);\n\n                    let translate = this.width;\n\n                    if(this.index === this.$parent.activeIndex) {\n                        translate = 0;\n                    }\n\n                    setTranslate(this.$el, translate, 0);\n\n                    return;\n                }\n\n                // 滑动\n                let initTranslate = -this.width;\n\n                if(this.index === this.$parent.activeIndex) {\n                    initTranslate = 0;\n                }\n\n                let finalTranslateX = initTranslate + translateX;\n\n                if(this.isInTheLimitRange(finalTranslateX, true)) {\n                    setTranslate(this.$el, finalTranslateX, 0);\n                }\n            },\n        },\n        mounted() {\n            this.init();\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/Tabbar.vue",
    "content": "<template>\n    <div class=\"tabbar\" :class=\"{disabled}\">\n        <slot></slot>\n        <div class=\"tabbar-indicator\" ref=\"indicator\"></div>\n    </div>\n</template>\n\n<script>\n    import Tab from '../mixins/tab';\n    import { setTranslate } from '../utils/translate';\n\n    export default {\n        name: 'tabbar',\n        mixins: [Tab],\n        props: {\n            activeKey: {\n                default: 0,\n            },\n        },\n        methods: {\n            // 设置指示器宽度\n            setIndicatorWidth() {\n                this.indicatorWidth = this.$el.offsetWidth / this.$children.length;\n                this.$refs.indicator.style.width = `${this.indicatorWidth}px`;\n            },\n            // 初始化指示器位置\n            initSelectedIndicator() {\n                this.$children.forEach((child, index) => {\n                    if(this.currentActiveKey === child.currentEventKey) {\n                        let $indicator = this.$refs.indicator,\n                            translateX = index * this.indicatorWidth;\n\n                        setTranslate($indicator, translateX, 0);\n                    }\n                });\n            },\n        },\n        watch: {\n            currentActiveKey() {\n                this.initSelectedIndicator();\n            },\n        },\n        mounted() {\n            this.setIndicatorWidth();\n            this.initSelectedIndicator();\n        },\n        updated() {\n            this.setIndicatorWidth();\n            this.initSelectedIndicator();\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/TabbarItem.vue",
    "content": "<template>\n    <div\n        class=\"tabbar-item\"\n        :class=\"{\n            'active': $parent.currentActiveKey === currentEventKey,\n            disabled: disabled || $parent.disabled,\n        }\"\n        @click=\"clickHandle\">\n        <slot></slot>\n    </div>\n</template>\n\n<script>\n    import TabItem from '../mixins/tabItem';\n\n    export default {\n        name: 'tabbar-item',\n        mixins: [TabItem],\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/Tag.vue",
    "content": "<template>\n    <span\n        @click=\"$emit('click')\"\n        class=\"tag\"\n        :class=\"{\n            [`tag-${theme}`]: !hollow,\n            [`tag-outline-${theme}`]: hollow,\n            [`tag-${size}`]: size,\n            [`border-${shape}`]: shape,\n        }\">\n        <slot></slot>\n    </span>\n</template>\n\n<script>\n    export default {\n        name: 'tag',\n        props: {\n            // 空心\n            hollow: Boolean,\n            // 尺寸\n            size: {\n                type: String,\n                validator(value) {\n                    return ['sm'].indexOf(value) > -1;\n                },\n            },\n            // 主题\n            theme: {\n                type: String,\n                default: 'primary',\n                validator(value) {\n                    return ['primary', 'default', 'success', 'warning', 'danger'].indexOf(value) > -1;\n                },\n            },\n            // 形状\n            shape: {\n                type: String,\n                validator(value) {\n                    return ['pill'].indexOf(value) > -1;\n                },\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/Timeline.vue",
    "content": "<template>\n    <div class=\"timeline\">\n        <slot></slot>\n    </div>\n</template>\n\n<script>\n    export default {\n        name: 'timeline',\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/TimelineItem.vue",
    "content": "<template>\n    <div class=\"timeline-item\" :class=\"{'active': index === 0}\">\n        <div class=\"timeline-item-addon\"></div>\n        <div class=\"timeline-item-line\"></div>\n        <div class=\"timeline-item-body\">\n            <slot></slot>\n        </div>\n    </div>\n</template>\n\n<script>\n    export default {\n        name: 'timeline-item',\n        data() {\n            return {\n                index: -1,\n            };\n        },\n        mounted() {\n            this.index = this.$parent.$children.indexOf(this);\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/Tip.vue",
    "content": "<template>\n    <div class=\"tip\" @click=\"$emit('click')\">\n        <hrule :type=\"type\" :theme=\"theme\" />\n        <span class=\"tip-label\" :class=\"{[`text-${theme}`]: theme}\">\n            <slot></slot>\n        </span>\n        <hrule :type=\"type\" :theme=\"theme\" />\n    </div>\n</template>\n\n<script>\n    export default {\n        name: 'tip',\n        props: {\n            type: {\n                type: String,\n                validator(value) {\n                    return ['dashed', 'dotted'].indexOf(value) > -1;\n                },\n            },\n            theme: {\n                type: String,\n                validator(value) {\n                    return ['primary', 'secondary', 'warning', 'success', 'danger'].indexOf(value) > -1;\n                },\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/Toast.vue",
    "content": "<template>\n    <div>\n        <transition name=\"toast-fade\">\n            <div\n                v-show=\"currentValue\"\n                class=\"toast\"\n                :class=\"[\n                    `toast-${position}`,\n                    { 'toast-lg': type }\n                ]\">\n                <div class=\"toast-icon\" v-if=\"icon\">\n                    <icon :name=\"icon\" />\n                </div>\n                <loading v-else-if=\"type === 'loading'\" />\n                <div class=\"toast-message\" v-html=\"message\" />\n            </div>\n        </transition>\n        <mask-layer\n            :clickable=\"closeOnClickMask\"\n            class=\"bg-transparent\"\n            v-if=\"!!type\"/>\n    </div>\n</template>\n\n<script>\n    export default {\n        name: 'toast',\n        props: {\n            message: String,\n            position: {\n                type: String,\n                default: 'bottom',\n                validator(value) {\n                    return ['bottom', 'top', 'center'].indexOf(value) > -1;\n                },\n            },\n            type: {\n                type: String,\n                validator(value) {\n                    return ['success', 'error', 'warning', 'loading'].indexOf(value) > -1;\n                },\n            },\n            closeOnClickMask: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        data() {\n            return {\n                currentValue: false,\n            };\n        },\n        computed: {\n            icon() {\n                switch(this.type) {\n                    case 'error':\n                        return 'exclamation-circle';\n                    case 'success':\n                        return 'check';\n                    case 'warning':\n                        return 'exclamation-triangle';\n                    default:\n                        return null;\n                }\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/Toggle.vue",
    "content": "<template>\n    <label class=\"toggle\">\n        <input\n            type=\"checkbox\"\n            class=\"toggle-input\"\n            :disabled=\"disabled\"\n            v-model=\"currentValue\">\n        <span class=\"toggle-addon\">\n            <i />\n        </span>\n    </label>\n</template>\n\n<script>\n    import Sync from '../mixins/sync';\n\n    export default {\n        name: 'toggle',\n        mixins: [Sync],\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/components/index.js",
    "content": "import Button from './Button';\nimport Icon from './Icon';\nimport Group from './Group';\nimport GroupTitle from './GroupTitle';\nimport Cell from './Cell';\nimport Flex from './Flex';\nimport FlexItem from './FlexItem';\nimport Navbar from './Navbar';\nimport Tabbar from './Tabbar';\nimport TabbarItem from './TabbarItem';\nimport Mask from './Mask';\nimport Loading from './Loading';\nimport Checkbox from './Checkbox';\nimport CheckboxGroup from './CheckboxGroup';\nimport Radio from './Radio';\nimport RadioGroup from './RadioGroup';\nimport Toggle from './Toggle';\nimport InputNumber from './InputNumber';\nimport InputText from './InputText';\nimport InputTextarea from './InputTextarea';\nimport Selector from './Selector';\nimport SelectorOption from './SelectorOption';\nimport InlineSelector from './InlineSelector';\nimport InlineSelectorOption from './InlineSelectorOption';\nimport Navigation from './Navigation';\nimport NavigationItem from './NavigationItem';\nimport Tag from './Tag';\nimport Tip from './Tip';\nimport HRule from './HRule';\nimport BackToTop from './BackToTop';\nimport Badge from './Badge';\nimport Drawer from './Drawer';\nimport DrawerItem from './DrawerItem';\nimport SlideUp from './SlideUp';\nimport SlideUpHeader from './SlideUpHeader';\nimport SlideUpBody from './SlideUpBody';\nimport SegmentedControl from './SegmentedControl';\nimport SegmentedControlItem from './SegmentedControlItem';\nimport Sidelip from './Sidelip';\nimport Media from './Media';\nimport MediaObject from './MediaObject';\nimport MediaBody from './MediaBody';\nimport Card from './Card';\nimport CardBody from './CardBody';\nimport DatePicker from './DatePicker';\nimport Searchbar from './Searchbar';\nimport SearchbarBtn from './SearchbarBtn';\nimport SearchbarPlaceholder from './SearchbarPlaceholder';\nimport Picker from './Picker';\nimport PickerOption from './PickerOption';\nimport Loadmore from './Loadmore';\nimport Alert from './Alert';\nimport Swipe from './Swipe';\nimport SwipeItem from './SwipeItem';\nimport Progressbar from './Progressbar';\nimport Progressbars from './Progressbars';\nimport Stepbar from './Stepbar';\nimport StepbarItem from './StepbarItem';\nimport Timeline from './Timeline';\nimport TimelineItem from './TimelineItem';\nimport Sticky from './Sticky';\n// global utils\nimport toast from '../utils/toast';\nimport { alert } from '../utils/alert';\nimport loading from '../utils/loading';\n// directives\nimport disfavor from '../directives/disfavor';\n\nconst impression = {\n    Button,\n    Group,\n    GroupTitle,\n    Cell,\n    Flex,\n    FlexItem,\n    Icon,\n    Tag,\n    Tip,\n    HRule,\n    Badge,\n    Media,\n    MediaObject,\n    MediaBody,\n    Card,\n    CardBody,\n    Swipe,\n    SwipeItem,\n    Navbar,\n    Tabbar,\n    TabbarItem,\n    Navigation,\n    NavigationItem,\n    Drawer,\n    DrawerItem,\n    SegmentedControl,\n    SegmentedControlItem,\n    SlideUp,\n    SlideUpHeader,\n    SlideUpBody,\n    Sidelip,\n    Searchbar,\n    SearchbarBtn,\n    SearchbarPlaceholder,\n    Picker,\n    PickerOption,\n    Loadmore,\n    Mask,\n    Alert,\n    Loading,\n    BackToTop,\n    Checkbox,\n    CheckboxGroup,\n    Radio,\n    RadioGroup,\n    Toggle,\n    InputNumber,\n    InputText,\n    InputTextarea,\n    Selector,\n    SelectorOption,\n    InlineSelector,\n    InlineSelectorOption,\n    DatePicker,\n    Progressbar,\n    Progressbars,\n    Stepbar,\n    StepbarItem,\n    Timeline,\n    TimelineItem,\n    Sticky,\n};\n\nconst install = Vue => {\n    if(install.installed) return;\n\n    // components\n    Object.keys(impression).forEach(key => {\n        Vue.component(impression[key].name, impression[key]);\n    });\n\n    // global component utils\n    Vue.$toast = Vue.prototype.$toast = toast;\n    Vue.$alert = Vue.prototype.$alert = alert;\n    Vue.$loading = Vue.prototype.$loading = loading;\n\n    // directives\n    Vue.directive('disfavor', disfavor);\n};\n\nif(typeof window !== 'undefined' && window.Vue) {\n    install(window.Vue);\n}\n\nexport {\n    Button,\n    Group,\n    GroupTitle,\n    Cell,\n    Flex,\n    FlexItem,\n    Icon,\n    Tag,\n    Tip,\n    HRule,\n    Badge,\n    Media,\n    MediaObject,\n    MediaBody,\n    Card,\n    CardBody,\n    Swipe,\n    SwipeItem,\n    Navbar,\n    Tabbar,\n    TabbarItem,\n    Navigation,\n    NavigationItem,\n    Drawer,\n    DrawerItem,\n    SegmentedControl,\n    SegmentedControlItem,\n    SlideUp,\n    SlideUpHeader,\n    SlideUpBody,\n    Sidelip,\n    Searchbar,\n    SearchbarBtn,\n    SearchbarPlaceholder,\n    Picker,\n    PickerOption,\n    Loadmore,\n    Mask,\n    Alert,\n    Loading,\n    BackToTop,\n    Checkbox,\n    CheckboxGroup,\n    Radio,\n    RadioGroup,\n    Toggle,\n    InputNumber,\n    InputText,\n    InputTextarea,\n    Selector,\n    SelectorOption,\n    InlineSelector,\n    InlineSelectorOption,\n    DatePicker,\n    Progressbar,\n    Stepbar,\n    StepbarItem,\n    Timeline,\n    TimelineItem,\n    Sticky,\n};\n\nexport default {\n    install,\n    ...impression,\n};\n"
  },
  {
    "path": "src/scripts/containers/layout.vue",
    "content": "<template>\n    <flex direction=\"column\">\n        <navbar theme=\"default\">\n            <icon name=\"bars\" size=\"lg\" @click=\"showMenubar = true\" />\n            <h3 slot=\"body\">{{$route.name || 'Impression'}}</h3>\n        </navbar>\n        <flex-item>\n            <router-view></router-view>\n        </flex-item>\n        <menubar v-model=\"showMenubar\" />\n    </flex>\n</template>\n\n<script>\n    import menubar from './menubar';\n\n    export default {\n        components: {\n            menubar,\n        },\n        data() {\n            return {\n                showMenubar: false,\n            };\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/containers/menubar.vue",
    "content": "<template>\n    <sidelip v-model=\"currentValue\">\n        <flex direction=\"column\" :style=\"{backgroundColor: '#f0eff5'}\">\n            <navbar theme=\"primary\">\n                <h3>Impression</h3>\n            </navbar>\n            <flex-item>\n                <div v-for=\"group in groups\">\n                    <group-title v-if=\"group.title\"><strong>{{group.title}}</strong></group-title>\n                    <group>\n                        <cell\n                            v-for=\"cell in group.children\"\n                            :to=\"{path: cell.path}\">\n                            <icon size=\"lg\" left :name=\"cell.icon\"></icon>\n                            {{cell.name}}\n                        </cell>\n                    </group>\n                </div>\n            </flex-item>\n            <group>\n                <cell>\n                    NewDadaFE©️所有\n                </cell>\n            </group>\n        </flex>\n    </sidelip>\n</template>\n\n<script>\n    import routesConfig from '../routes.json';\n\n    export default {\n        props: {\n            value: {},\n            disabled: Boolean,\n        },\n        data() {\n            return {\n                currentValue: this.value,\n                groups: routesConfig,\n            };\n        },\n        watch: {\n            value(val) {\n                this.currentValue = val;\n            },\n            currentValue(val) {\n                this.$emit('input', val);\n            },\n            $route() {\n                this.currentValue = false;\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/directives/disfavor.js",
    "content": "import { contains } from '../utils/dom';\n\nconst disfavorContext = '@@disfavor';\n\n// 失去焦点\nexport default {\n    bind(el, binding, vnode) {\n        const clickHandle = event => {\n            if(vnode.context && !contains(el, event.target)) {\n                el[disfavorContext].callback && vnode.context[el[disfavorContext].callback]();\n            }\n        };\n\n        el[disfavorContext] = {\n            clickHandle,\n            callback: binding.expression,\n        };\n\n        document.addEventListener('click', clickHandle);\n    },\n    unbind(el) {\n        let { clickHandle } = el[disfavorContext];\n\n        document.removeEventListener('click', clickHandle);\n    },\n};\n\n"
  },
  {
    "path": "src/scripts/index.js",
    "content": "import Vue from 'vue';\nimport router from './router';\nimport Impression from './components';\n\nVue.use(Impression);\n\n/* eslint-disable no-new */\nnew Vue({\n    el: '#app',\n    router,\n    template: '<router-view></router-view>',\n});\n"
  },
  {
    "path": "src/scripts/mixins/emitter.js",
    "content": "export default {\n    methods: {\n        dispatch(componentName, eventName, params) {\n            let parent = this.$parent || this.$root,\n                name = parent.$options._componentTag;\n\n            while(parent && (!name || name !== componentName)) {\n                parent = parent.$parent;\n\n                if(parent) {\n                    name = parent.$options._componentTag;\n                }\n            }\n\n            if(parent) {\n                parent.$emit.apply(parent, [eventName].concat(params));\n            }\n        },\n    },\n};\n"
  },
  {
    "path": "src/scripts/mixins/select.js",
    "content": "export default {\n    props: {\n        multiple: Boolean,\n    },\n    data() {\n        return {\n            currentText: {},\n        };\n    },\n    methods: {\n        optionClickHandle(option) {\n            if(this.disabled || this.currentValue === option.value) return;\n\n            if(this.multiple) {\n                this.currentValue = this.currentValue || [];\n                let index = this.currentValue.indexOf(option.value);\n\n                if(index === -1) {\n                    this.currentValue.push(option.value);\n                } else {\n                    this.currentValue.splice(index, 1);\n                }\n\n                return;\n            }\n\n            this.currentText = option.$el.innerText.trim();\n            this.currentValue = option.value;\n        },\n    },\n    created() {\n        this.$on('optionClick', this.optionClickHandle);\n    },\n};\n"
  },
  {
    "path": "src/scripts/mixins/selectOption.js",
    "content": "export default {\n    props: {\n        value: {},\n        checkedIcon: {\n            type: String,\n            default: 'check',\n        },\n        disabled: Boolean,\n    },\n    methods: {\n        clickHandle() {\n            if(this.disabled) return;\n\n            this.$parent.$emit.apply(this.$parent, ['optionClick'].concat(this));\n        },\n        isActive() {\n            if(this.$parent.multiple) {\n                return this.$parent.currentValue &&\n                this.$parent.currentValue.indexOf(this.value) !== -1;\n            }\n\n            return this.$parent.currentValue === this.value;\n        },\n    },\n};\n"
  },
  {
    "path": "src/scripts/mixins/sync.js",
    "content": "import { isArray } from '../utils/type';\n\nexport default {\n    props: {\n        value: {},\n        disabled: Boolean,\n    },\n    data() {\n        return {\n            currentValue: this.value,\n        };\n    },\n    watch: {\n        value(val) {\n            this.currentValue = val;\n        },\n        currentValue(val) {\n            if(this.disabled) return;\n\n            if(isArray(val) && val.length === 0) {\n                this.currentValue = undefined;\n\n                return;\n            }\n\n            this.$emit('input', val);\n            this.$emit('change', val, this.currentText);\n        },\n    },\n};\n"
  },
  {
    "path": "src/scripts/mixins/tab.js",
    "content": "export default {\n    props: {\n        activeKey: {},\n        disabled: Boolean,\n    },\n    data() {\n        return {\n            currentActiveKey: this.activeKey,\n        };\n    },\n    methods: {\n        itemClickHandle(val) {\n            if(this.currentActiveKey === val) return;\n\n            this.currentActiveKey = val;\n            this.$emit('change', val);\n        },\n    },\n    created() {\n        this.$on('itemClick', this.itemClickHandle);\n    },\n};\n"
  },
  {
    "path": "src/scripts/mixins/tabItem.js",
    "content": "export default {\n    props: {\n        eventKey: {},\n        disabled: Boolean,\n    },\n    data() {\n        return {\n            currentEventKey: this.eventKey,\n            index: 0,\n        };\n    },\n    mounted() {\n        this.index = this.$parent.$children.indexOf(this);\n        this.eventKey === undefined && (this.currentEventKey = this.index);\n    },\n    methods: {\n        clickHandle() {\n            if(this.disabled || this.$parent.disabled) return;\n\n            this.$parent.$emit('itemClick', this.currentEventKey, this.index);\n        },\n    },\n};\n"
  },
  {
    "path": "src/scripts/router.js",
    "content": "import Vue from 'vue';\nimport VueRouter from 'vue-router';\nimport routesConfig from './routes.json';\n\nVue.use(VueRouter);\n\n// 提取路由\nconst extractRoutes = config => {\n    const routes = [],\n        children = [];\n\n    routes.push({\n        path: '/',\n        component: require('./containers/layout'),\n        children,\n    });\n\n    config.forEach(group => {\n        group.children.forEach(item => {\n            const { path, name } = item;\n\n            children.push({\n                path,\n                name,\n                component: require(`./views${path}`),\n            });\n        });\n    });\n\n    return routes;\n};\n\nconst routes = extractRoutes(routesConfig);\n\n// 创建router对象\nconst router = new VueRouter({\n    base: __dirname,\n    routes,\n});\n\nexport default router;\n"
  },
  {
    "path": "src/scripts/routes.json",
    "content": "[\n    {\n        \"title\": \"Base\",\n        \"children\": [\n            {\n                \"path\": \"/button\",\n                \"name\": \"Button\",\n                \"icon\": \"hand-pointer-o\"\n            },\n            {\n                \"path\": \"/icon\",\n                \"name\": \"Icon\",\n                \"icon\": \"flag\"\n            },\n            {\n                \"path\": \"/cell\",\n                \"name\": \"Group && Cell\",\n                \"icon\": \"list\"\n            },\n            {\n                \"path\": \"/flex\",\n                \"name\": \"Flex && FlexItem\",\n                \"icon\": \"th\"\n            },\n            {\n                \"path\": \"/tag\",\n                \"name\": \"Tag\",\n                \"icon\": \"tag\"\n            },\n            {\n                \"path\": \"/badge\",\n                \"name\": \"Badge\",\n                \"icon\": \"bell-o\"\n            },\n            {\n                \"path\": \"/hrule\",\n                \"name\": \"HRule(Hr)\",\n                \"icon\": \"minus\"\n            },\n            {\n                \"path\": \"/tip\",\n                \"name\": \"Tip\",\n                \"icon\": \"paperclip\"\n            },\n            {\n                \"path\": \"/card\",\n                \"name\": \"Card\",\n                \"icon\": \"file-image-o\"\n            },\n            {\n                \"path\": \"/media\",\n                \"name\": \"Media\",\n                \"icon\": \"id-card-o\"\n            },\n            {\n                \"path\": \"/swipe\",\n                \"name\": \"Swipe\",\n                \"icon\": \"newspaper-o\"\n            },\n            {\n                \"path\": \"/datepicker\",\n                \"name\": \"DatePicker\",\n                \"icon\": \"newspaper-o\"\n            }\n            \n        ]\n    },\n    {\n        \"title\": \"Layout\",\n        \"children\": [\n            {\n                \"path\": \"/navbar\",\n                \"name\": \"Navbar\",\n                \"icon\": \"window-maximize\"\n            },\n            {\n                \"path\": \"/tabbar\",\n                \"name\": \"Tabbar\",\n                \"icon\": \"clone\"\n            },\n            {\n                \"path\": \"/navigation\",\n                \"name\": \"Navigation\",\n                \"icon\": \"tablet\"\n            },\n            {\n                \"path\": \"/drawer\",\n                \"name\": \"Drawer\",\n                \"icon\": \"caret-square-o-down\"\n            },\n            {\n                \"path\": \"/segmented-control\",\n                \"name\": \"SegmentedControl\",\n                \"icon\": \"columns\"\n            },\n            {\n                \"path\": \"/slideup\",\n                \"name\": \"SlideUp\",\n                \"icon\": \"angle-double-up\"\n            },\n            {\n                \"path\": \"/sideslip\",\n                \"name\": \"Sideslip\",\n                \"icon\": \"window-restore\"\n            },\n            {\n                \"path\": \"/searchbar\",\n                \"name\": \"Searchbar\",\n                \"icon\": \"search\"\n            },\n            {\n                \"path\": \"/stepbar\",\n                \"name\": \"Stepbar\",\n                \"icon\": \"flag-checkered\"\n            },\n            {\n                \"path\": \"/timeline\",\n                \"name\": \"Timeline\",\n                \"icon\": \"flag-o\"\n            },\n            {\n                \"path\": \"/picker\",\n                \"name\": \"Picker\",\n                \"icon\": \"building-o\"\n            },\n            {\n                \"path\": \"/pull-down\",\n                \"name\": \"Pull down\",\n                \"icon\": \"long-arrow-down\"\n            },\n            {\n                \"path\": \"/pull-up\",\n                \"name\": \"Pull up\",\n                \"icon\": \"long-arrow-up\"\n            },\n            {\n                \"path\": \"/sticky\",\n                \"name\": \"Sticky Affix\",\n                \"icon\": \"thumb-tack\"\n            }\n        ]\n    },\n    {\n        \"title\": \"prompt\",\n        \"children\": [\n            {\n                \"path\": \"/toast\",\n                \"name\": \"Toast\",\n                \"icon\": \"commenting-o\"\n            },\n            {\n                \"path\": \"/alert\",\n                \"name\": \"Alert\",\n                \"icon\": \"bullhorn\"\n            },\n            {\n                \"path\": \"/loading\",\n                \"name\": \"loading\",\n                \"icon\": \"spinner\"\n            },\n            {\n                \"path\": \"/progressbar\",\n                \"name\": \"Progressbar\",\n                \"icon\": \"battery-three-quarters\"\n            },\n            {\n                \"path\": \"/back-to-top\",\n                \"name\": \"BackToTop\",\n                \"icon\": \"arrow-circle-up\"\n            }\n        ]\n    },\n    {\n        \"title\": \"form\",\n        \"children\": [\n            {\n                \"path\": \"/checkbox\",\n                \"name\": \"Checkbox\",\n                \"icon\": \"check-square\"\n            },\n            {\n                \"path\": \"/radio\",\n                \"name\": \"Radio\",\n                \"icon\": \"dot-circle-o\"\n            },\n            {\n                \"path\": \"/toggle\",\n                \"name\": \"Toggle(Switch)\",\n                \"icon\": \"toggle-on\"\n            },\n            {\n                \"path\": \"/input-text\",\n                \"name\": \"InputText\",\n                \"icon\": \"font\"\n            },\n            {\n                \"path\": \"/input-number\",\n                \"name\": \"InputNumber\",\n                \"icon\": \"plus-circle\"\n            },\n            {\n                \"path\": \"/input-textarea\",\n                \"name\": \"InputTextarea\",\n                \"icon\": \"file-text-o\"\n            },\n            {\n                \"path\": \"/selector\",\n                \"name\": \"Selector\",\n                \"icon\": \"check\"\n            },\n            {\n                \"path\": \"/inline-selecor\",\n                \"name\": \"InlineSelector\",\n                \"icon\": \"th-large\"\n            }\n        ]\n    }\n]\n"
  },
  {
    "path": "src/scripts/utils/alert.js",
    "content": "import Vue from 'vue';\nimport OriginAlert from '../components/Alert';\n\nconst Alert = Vue.extend(OriginAlert);\nlet alertInstance;\n\n// Alert框\nexport const alert = option => {\n    option.title = option.title || '提示';\n\n    alertInstance = new Alert({\n        el: document.createElement('div'),\n    });\n\n    document.body.appendChild(alertInstance.$el);\n\n    Object.assign(alertInstance, option);\n\n    Vue.nextTick(() => {\n        alertInstance.show();\n    });\n\n    return alertInstance;\n};\n\nalert.hide = () => {\n    alertInstance.hide();\n};\n"
  },
  {
    "path": "src/scripts/utils/cssPrefix.js",
    "content": "let engine;\nlet docStyle = document.documentElement.style;\n\nif('MozAppearance' in docStyle) {\n    engine = 'gecko';\n} else if('WebkitAppearance' in docStyle) {\n    engine = 'webkit';\n} else if(typeof navigator.cpuClass === 'string') {\n    engine = 'trident';\n}\n\nexport const vendorPrefix = { trident: 'ms', gecko: 'Moz', webkit: 'Webkit' }[engine];\nexport const cssPrefix = { trident: '-ms-', gecko: '-moz-', webkit: '-webkit-', presto: '-o-' }[engine];\n\nexport const getPrefixStyle = (name, value) => {\n    let namePrefix = `${cssPrefix}${name}`;\n\n    return `${namePrefix} ${value}`;\n};\n"
  },
  {
    "path": "src/scripts/utils/date.js",
    "content": "/*eslint-disable*/\n\nimport dateUtil from './dateUtil';\n\nconst weeks = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];\nconst months = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'];\n\nconst newArray = function(start, end) {\n    let result = [];\n\n    for (let i = start; i <= end; i++) {\n      result.push(i);\n    }\n    return result;\n};\n\nexport const toDate = function(date) {\n    return isDate(date) ? new Date(date) : null;\n};\n\nexport const isDate = function(date) {\n    if(date === null || date === undefined) return false;\n    if(isNaN(new Date(date).getTime())) return false;\n    if(Array.isArray(date)) return false; // deal with `new Date([ new Date() ]) -> new Date()`\n  \n    return true;\n};\n\nexport const isDateObject = function(val) {\n\n    return val instanceof Date;\n};\n\nexport const formatDate = function(date, format) {\n    date = toDate(date);\n    if(!date) return '';\n    \n    return dateUtil.format(date, format || 'yyyy-MM-dd');\n};\n\nexport const parseDate = function(string, format) {\n  \n    return dateUtil.parse(string, format || 'yyyy-MM-dd');\n};\n\nexport const getDayCountOfMonth = function(year, month) {\n    if(month === 3 || month === 5 || month === 8 || month === 10) {\n        return 30;\n    }\n\n    if(month === 1) {\n        if(year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {\n            \n            return 29;\n        } else {\n            \n            return 28;\n        }\n    }\n\n    return 31;\n};\n\nexport const getDayCountOfYear = function(year) {\n    const isLeapYear = year % 400 === 0 || (year % 100 !== 0 && year % 4 === 0);\n    return isLeapYear ? 366 : 365;\n};\n\nexport const getFirstDayOfMonth = function(date) {\n    const temp = new Date(date.getTime());\n    temp.setDate(1);\n    \n    return temp.getDay();\n};\n\n// see: https://stackoverflow.com/questions/3674539/incrementing-a-date-in-javascript\n// {prev, next} Date should work for Daylight Saving Time\n// Adding 24 * 60 * 60 * 1000 does not work in the above scenario\nexport const prevDate = function(date, amount = 1) {\n    \n    return new Date(date.getFullYear(), date.getMonth(), date.getDate() - amount);\n};\n\nexport const nextDate = function(date, amount = 1) {\n    \n    return new Date(date.getFullYear(), date.getMonth(), date.getDate() + amount);\n};\n\nexport const getStartDateOfMonth = function(year, month) {\n    const result = new Date(year, month, 1);\n    const day = result.getDay();\n\n    if(day === 0) {\n        return prevDate(result, 7);\n    } else {\n        return prevDate(result, day);\n    }\n};\n\nexport const getWeekNumber = function(src) {\n    if(!isDate(src)) return null;\n    const date = new Date(src.getTime());\n    date.setHours(0, 0, 0, 0);\n    // Thursday in current week decides the year.\n    date.setDate(date.getDate() + 3 - (date.getDay() + 6) % 7);\n    // January 4 is always in week 1.\n    const week1 = new Date(date.getFullYear(), 0, 4);\n    // Adjust to Thursday in week 1 and count number of weeks from date to week 1.\n    // Rounding should be fine for Daylight Saving Time. Its shift should never be more than 12 hours.\n    return 1 + Math.round(((date.getTime() - week1.getTime()) / 86400000 - 3 + (week1.getDay() + 6) % 7) / 7);\n};\n\nexport const getRangeHours = function(ranges) {\n    const hours = [];\n    let disabledHours = [];\n\n    (ranges || []).forEach(range => {\n        const value = range.map(date => date.getHours());\n\n        disabledHours = disabledHours.concat(newArray(value[0], value[1]));\n    });\n\n    if (disabledHours.length) {\n        for (let i = 0; i < 24; i++) {\n            hours[i] = disabledHours.indexOf(i) === -1;\n        }\n    } else {\n        for (let i = 0; i < 24; i++) {\n            hours[i] = false;\n        }\n    }\n\n    return hours;\n};\n\nexport const range = function(n) {\n    // see https://stackoverflow.com/questions/3746725/create-a-javascript-array-containing-1-n\n\n    return Array.apply(null, {length: n}).map((_, n) => n);\n};\n\nexport const modifyDate = function(date, y, m, d) {\n\n    return new Date(y, m, d, date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds());\n};\n\nexport const modifyTime = function(date, h, m, s) {\n\n    return new Date(date.getFullYear(), date.getMonth(), date.getDate(), h, m, s, date.getMilliseconds());\n};\n\nexport const modifyWithTimeString = (date, time) => {\n    if(date == null || !time) {\n        return date;\n    }\n    time = parseDate(time, 'HH:mm:ss');\n\n    return modifyTime(date, time.getHours(), time.getMinutes(), time.getSeconds());\n};\n\nexport const clearTime = function(date) {\n    return new Date(date.getFullYear(), date.getMonth(), date.getDate());\n};\n\nexport const clearMilliseconds = function(date) {\n    return new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), 0);\n};\n\nexport const limitTimeRange = function(date, ranges, format = 'HH:mm:ss') {\n    // TODO: refactory a more elegant solution\n    if(ranges.length === 0) return date;\n    const normalizeDate = date => dateUtil.parse(dateUtil.format(date, format), format);\n    const ndate = normalizeDate(date);\n    const nranges = ranges.map(range => range.map(normalizeDate));\n    if(nranges.some(nrange => ndate >= nrange[0] && ndate <= nrange[1])) return date;\n\n    let minDate = nranges[0][0];\n    let maxDate = nranges[0][0];\n\n    nranges.forEach(nrange => {\n        minDate = new Date(Math.min(nrange[0], minDate));\n        maxDate = new Date(Math.max(nrange[1], minDate));\n    });\n\n    const ret = ndate < minDate ? minDate : maxDate;\n    // preserve Year/Month/Date\n    return modifyDate(\n        ret,\n        date.getFullYear(),\n        date.getMonth(),\n        date.getDate()\n    );\n};\n\nexport const timeWithinRange = function(date, selectableRange, format) {\n    const limitedDate = limitTimeRange(date, selectableRange, format);\n    return limitedDate.getTime() === date.getTime();\n};\n\nexport const changeYearMonthAndClampDate = function(date, year, month) {\n    // clamp date to the number of days in `year`, `month`\n    // eg: (2010-1-31, 2010, 2) => 2010-2-28\n    const monthDate = Math.min(date.getDate(), getDayCountOfMonth(year, month));\n    \n    return modifyDate(date, year, month, monthDate);\n};\n\nexport const prevMonth = function(date) {\n    const year = date.getFullYear();\n    const month = date.getMonth();\n\n    return month === 0\n        ? changeYearMonthAndClampDate(date, year - 1, 11)\n        : changeYearMonthAndClampDate(date, year, month - 1);\n};\n\nexport const nextMonth = function(date) {\n    const year = date.getFullYear();\n    const month = date.getMonth();\n\n    return month === 11\n        ? changeYearMonthAndClampDate(date, year + 1, 0)\n        : changeYearMonthAndClampDate(date, year, month + 1);\n};\n\nexport const prevYear = function(date, amount = 1) {\n    const year = date.getFullYear();\n    const month = date.getMonth();\n\n    return changeYearMonthAndClampDate(date, year - amount, month);\n};\n\nexport const nextYear = function(date, amount = 1) {\n    const year = date.getFullYear();\n    const month = date.getMonth();\n\n    return changeYearMonthAndClampDate(date, year + amount, month);\n};\n\nexport const extractDateFormat = function(format) {\n    return format\n        .replace(/\\W?m{1,2}|\\W?ZZ/g, '')\n        .replace(/\\W?h{1,2}|\\W?s{1,3}|\\W?a/gi, '')\n        .trim();\n};\n\nexport const extractTimeFormat = function(format) {\n    return format\n        .replace(/\\W?D{1,2}|\\W?Do|\\W?d{1,4}|\\W?M{1,4}|\\W?y{2,4}/g, '')\n        .trim();\n};\n"
  },
  {
    "path": "src/scripts/utils/dateUtil.js",
    "content": "/* Modified from https://github.com/taylorhakes/fecha\n *\n * The MIT License (MIT)\n *\n * Copyright (c) 2015 Taylor Hakes\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n *     The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n *     THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n *     FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n *     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\n/*eslint-disable*/\n// 把 YYYY-MM-DD 改成了 yyyy-MM-dd\n(function (main) {\n  'use strict';\n\n  /**\n   * Parse or format dates\n   * @class fecha\n   */\n  var fecha = {};\n  var token = /d{1,4}|M{1,4}|yy(?:yy)?|S{1,3}|Do|ZZ|([HhMsDm])\\1?|[aA]|\"[^\"]*\"|'[^']*'/g;\n  var twoDigits = /\\d\\d?/;\n  var threeDigits = /\\d{3}/;\n  var fourDigits = /\\d{4}/;\n  var word = /[0-9]*['a-z\\u00A0-\\u05FF\\u0700-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFEF]+|[\\u0600-\\u06FF\\/]+(\\s*?[\\u0600-\\u06FF]+){1,2}/i;\n  var noop = function () {\n  };\n\n  function shorten(arr, sLen) {\n    var newArr = [];\n    for (var i = 0, len = arr.length; i < len; i++) {\n      newArr.push(arr[i].substr(0, sLen));\n    }\n    return newArr;\n  }\n\n  function monthUpdate(arrName) {\n    return function (d, v, i18n) {\n      var index = i18n[arrName].indexOf(v.charAt(0).toUpperCase() + v.substr(1).toLowerCase());\n      if (~index) {\n        d.month = index;\n      }\n    };\n  }\n\n  function pad(val, len) {\n    val = String(val);\n    len = len || 2;\n    while (val.length < len) {\n      val = '0' + val;\n    }\n    return val;\n  }\n\n  var dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];\n  var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n  var monthNamesShort = shorten(monthNames, 3);\n  var dayNamesShort = shorten(dayNames, 3);\n  fecha.i18n = {\n    dayNamesShort: dayNamesShort,\n    dayNames: dayNames,\n    monthNamesShort: monthNamesShort,\n    monthNames: monthNames,\n    amPm: ['am', 'pm'],\n    DoFn: function DoFn(D) {\n      return D + ['th', 'st', 'nd', 'rd'][D % 10 > 3 ? 0 : (D - D % 10 !== 10) * D % 10];\n    }\n  };\n\n  var formatFlags = {\n    D: function(dateObj) {\n      return dateObj.getDay();\n    },\n    DD: function(dateObj) {\n      return pad(dateObj.getDay());\n    },\n    Do: function(dateObj, i18n) {\n      return i18n.DoFn(dateObj.getDate());\n    },\n    d: function(dateObj) {\n      return dateObj.getDate();\n    },\n    dd: function(dateObj) {\n      return pad(dateObj.getDate());\n    },\n    ddd: function(dateObj, i18n) {\n      return i18n.dayNamesShort[dateObj.getDay()];\n    },\n    dddd: function(dateObj, i18n) {\n      return i18n.dayNames[dateObj.getDay()];\n    },\n    M: function(dateObj) {\n      return dateObj.getMonth() + 1;\n    },\n    MM: function(dateObj) {\n      return pad(dateObj.getMonth() + 1);\n    },\n    MMM: function(dateObj, i18n) {\n      return i18n.monthNamesShort[dateObj.getMonth()];\n    },\n    MMMM: function(dateObj, i18n) {\n      return i18n.monthNames[dateObj.getMonth()];\n    },\n    yy: function(dateObj) {\n      return String(dateObj.getFullYear()).substr(2);\n    },\n    yyyy: function(dateObj) {\n      return dateObj.getFullYear();\n    },\n    h: function(dateObj) {\n      return dateObj.getHours() % 12 || 12;\n    },\n    hh: function(dateObj) {\n      return pad(dateObj.getHours() % 12 || 12);\n    },\n    H: function(dateObj) {\n      return dateObj.getHours();\n    },\n    HH: function(dateObj) {\n      return pad(dateObj.getHours());\n    },\n    m: function(dateObj) {\n      return dateObj.getMinutes();\n    },\n    mm: function(dateObj) {\n      return pad(dateObj.getMinutes());\n    },\n    s: function(dateObj) {\n      return dateObj.getSeconds();\n    },\n    ss: function(dateObj) {\n      return pad(dateObj.getSeconds());\n    },\n    S: function(dateObj) {\n      return Math.round(dateObj.getMilliseconds() / 100);\n    },\n    SS: function(dateObj) {\n      return pad(Math.round(dateObj.getMilliseconds() / 10), 2);\n    },\n    SSS: function(dateObj) {\n      return pad(dateObj.getMilliseconds(), 3);\n    },\n    a: function(dateObj, i18n) {\n      return dateObj.getHours() < 12 ? i18n.amPm[0] : i18n.amPm[1];\n    },\n    A: function(dateObj, i18n) {\n      return dateObj.getHours() < 12 ? i18n.amPm[0].toUpperCase() : i18n.amPm[1].toUpperCase();\n    },\n    ZZ: function(dateObj) {\n      var o = dateObj.getTimezoneOffset();\n      return (o > 0 ? '-' : '+') + pad(Math.floor(Math.abs(o) / 60) * 100 + Math.abs(o) % 60, 4);\n    }\n  };\n\n  var parseFlags = {\n    d: [twoDigits, function (d, v) {\n      d.day = v;\n    }],\n    M: [twoDigits, function (d, v) {\n      d.month = v - 1;\n    }],\n    yy: [twoDigits, function (d, v) {\n      var da = new Date(), cent = +('' + da.getFullYear()).substr(0, 2);\n      d.year = '' + (v > 68 ? cent - 1 : cent) + v;\n    }],\n    h: [twoDigits, function (d, v) {\n      d.hour = v;\n    }],\n    m: [twoDigits, function (d, v) {\n      d.minute = v;\n    }],\n    s: [twoDigits, function (d, v) {\n      d.second = v;\n    }],\n    yyyy: [fourDigits, function (d, v) {\n      d.year = v;\n    }],\n    S: [/\\d/, function (d, v) {\n      d.millisecond = v * 100;\n    }],\n    SS: [/\\d{2}/, function (d, v) {\n      d.millisecond = v * 10;\n    }],\n    SSS: [threeDigits, function (d, v) {\n      d.millisecond = v;\n    }],\n    D: [twoDigits, noop],\n    ddd: [word, noop],\n    MMM: [word, monthUpdate('monthNamesShort')],\n    MMMM: [word, monthUpdate('monthNames')],\n    a: [word, function (d, v, i18n) {\n      var val = v.toLowerCase();\n      if (val === i18n.amPm[0]) {\n        d.isPm = false;\n      } else if (val === i18n.amPm[1]) {\n        d.isPm = true;\n      }\n    }],\n    ZZ: [/[\\+\\-]\\d\\d:?\\d\\d/, function (d, v) {\n      var parts = (v + '').match(/([\\+\\-]|\\d\\d)/gi), minutes;\n\n      if (parts) {\n        minutes = +(parts[1] * 60) + parseInt(parts[2], 10);\n        d.timezoneOffset = parts[0] === '+' ? minutes : -minutes;\n      }\n    }]\n  };\n  parseFlags.DD = parseFlags.D;\n  parseFlags.dddd = parseFlags.ddd;\n  parseFlags.Do = parseFlags.dd = parseFlags.d;\n  parseFlags.mm = parseFlags.m;\n  parseFlags.hh = parseFlags.H = parseFlags.HH = parseFlags.h;\n  parseFlags.MM = parseFlags.M;\n  parseFlags.ss = parseFlags.s;\n  parseFlags.A = parseFlags.a;\n\n\n  // Some common format strings\n  fecha.masks = {\n    'default': 'ddd MMM dd yyyy HH:mm:ss',\n    shortDate: 'M/D/yy',\n    mediumDate: 'MMM d, yyyy',\n    longDate: 'MMMM d, yyyy',\n    fullDate: 'dddd, MMMM d, yyyy',\n    shortTime: 'HH:mm',\n    mediumTime: 'HH:mm:ss',\n    longTime: 'HH:mm:ss.SSS'\n  };\n\n  /***\n   * Format a date\n   * @method format\n   * @param {Date|number} dateObj\n   * @param {string} mask Format of the date, i.e. 'mm-dd-yy' or 'shortDate'\n   */\n  fecha.format = function (dateObj, mask, i18nSettings) {\n    var i18n = i18nSettings || fecha.i18n;\n\n    if (typeof dateObj === 'number') {\n      dateObj = new Date(dateObj);\n    }\n\n    if (Object.prototype.toString.call(dateObj) !== '[object Date]' || isNaN(dateObj.getTime())) {\n      throw new Error('Invalid Date in fecha.format');\n    }\n\n    mask = fecha.masks[mask] || mask || fecha.masks['default'];\n\n    return mask.replace(token, function ($0) {\n      return $0 in formatFlags ? formatFlags[$0](dateObj, i18n) : $0.slice(1, $0.length - 1);\n    });\n  };\n\n  /**\n   * Parse a date string into an object, changes - into /\n   * @method parse\n   * @param {string} dateStr Date string\n   * @param {string} format Date parse format\n   * @returns {Date|boolean}\n   */\n  fecha.parse = function (dateStr, format, i18nSettings) {\n    var i18n = i18nSettings || fecha.i18n;\n\n    if (typeof format !== 'string') {\n      throw new Error('Invalid format in fecha.parse');\n    }\n\n    format = fecha.masks[format] || format;\n\n    // Avoid regular expression denial of service, fail early for really long strings\n    // https://www.owasp.org/index.php/Regular_expression_Denial_of_Service_-_ReDoS\n    if (dateStr.length > 1000) {\n      return false;\n    }\n\n    var isValid = true;\n    var dateInfo = {};\n    format.replace(token, function ($0) {\n      if (parseFlags[$0]) {\n        var info = parseFlags[$0];\n        var index = dateStr.search(info[0]);\n        if (!~index) {\n          isValid = false;\n        } else {\n          dateStr.replace(info[0], function (result) {\n            info[1](dateInfo, result, i18n);\n            dateStr = dateStr.substr(index + result.length);\n            return result;\n          });\n        }\n      }\n\n      return parseFlags[$0] ? '' : $0.slice(1, $0.length - 1);\n    });\n\n    if (!isValid) {\n      return false;\n    }\n\n    var today = new Date();\n    if (dateInfo.isPm === true && dateInfo.hour != null && +dateInfo.hour !== 12) {\n      dateInfo.hour = +dateInfo.hour + 12;\n    } else if (dateInfo.isPm === false && +dateInfo.hour === 12) {\n      dateInfo.hour = 0;\n    }\n\n    var date;\n    if (dateInfo.timezoneOffset != null) {\n      dateInfo.minute = +(dateInfo.minute || 0) - +dateInfo.timezoneOffset;\n      date = new Date(Date.UTC(dateInfo.year || today.getFullYear(), dateInfo.month || 0, dateInfo.day || 1,\n        dateInfo.hour || 0, dateInfo.minute || 0, dateInfo.second || 0, dateInfo.millisecond || 0));\n    } else {\n      date = new Date(dateInfo.year || today.getFullYear(), dateInfo.month || 0, dateInfo.day || 1,\n        dateInfo.hour || 0, dateInfo.minute || 0, dateInfo.second || 0, dateInfo.millisecond || 0);\n    }\n    return date;\n  };\n\n  /* istanbul ignore next */\n  if (typeof module !== 'undefined' && module.exports) {\n    module.exports = fecha;\n  } else if (typeof define === 'function' && define.amd) {\n    define(function () {\n      return fecha;\n    });\n  } else {\n    main.fecha = fecha;\n  }\n})(this);\n"
  },
  {
    "path": "src/scripts/utils/dom.js",
    "content": "/**\n * 判断一个元素是否为另一个的后代元素.\n * @param  {[Element]} ancestor     [祖先元素]\n * @param  {[Element]} descendent   [后代元素]\n * @return {[Boolean]}              [是否]\n */\nexport const contains = (ancestor, descendent) => {\n    if(ancestor.compareDocumentPosition) {\n        return ancestor === descendent || !!(ancestor.compareDocumentPosition(descendent) & 16);\n    }\n\n    if(ancestor.contains && descendent.nodeType === 1) {\n        return ancestor.contains(descendent) && ancestor !== descendent;\n    }\n\n    let tmpDescendent = descendent;\n\n    // 递归\n    while(tmpDescendent !== document) {\n        tmpDescendent = tmpDescendent.parentNode;\n\n        if(tmpDescendent === ancestor) return true;\n    }\n\n    return false;\n};\n\n/**\n * 判断元素是否有滚动条.\n * @param  {[Element]} el [元素]\n * @return {[Boolean]}    [是否有滚动条]\n */\nexport const hasScrollbar = el => {\n    if(!el) return false;\n\n    return el.scrollHeight > el.offsetHeight;\n};\n\n/**\n * 返回具有滚动条的祖先元素.\n * @param  {[Element]} el [Dom元素]\n * @return {[Element]}    [祖先元素]\n */\nexport const getScrollContainer = el => {\n    let tmpEl = el;\n\n    while(tmpEl !== document) {\n        tmpEl = tmpEl.parentNode;\n\n        if(hasScrollbar(tmpEl)) return tmpEl;\n    }\n\n    return document;\n};\n\n/**\n * 返回布尔值.\n * @param  {[Element]} el [Dom元素]\n * @param  {[class]} cls [样式]\n * @return {[Boolean]}    [是否有class]\n */\nexport const hasClass = (el, cls) => {\n    if(!el || !cls) return false;\n    if(cls.indexOf(' ') !== -1) throw new Error('className should not contain space.');\n    if(el.classList) {\n        return el.classList.contains(cls);\n    }\n    /*eslint-disable*/\n    return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1;\n    /*eslint-disable*/\n};\n"
  },
  {
    "path": "src/scripts/utils/draggable.js",
    "content": "import { getTranslate } from './translate';\n\n/* global document:true */\nconst draggable = (el, options) => {\n    let prevTranslateX,\n        prevTranslateY,\n        dragState = {\n            dragging: false,\n            effectEl: options.effectEl || el,\n        };\n\n    // start\n    const onTouchStartHandle = (event, sourceEvent) => {\n        if(dragState.dragging) return;\n\n        let translate = getTranslate(dragState.effectEl);\n\n        Object.assign(dragState, {\n            startTimestamp: new Date(),\n            pageX: event.pageX,\n            pageY: event.pageY,\n            translateX: translate.x,\n            translateY: translate.y,\n        });\n\n        document.onselectstart = () => false;\n        document.ondragstart = () => false;\n\n        if(options.onDragStart) options.onDragStart(dragState, sourceEvent);\n    };\n\n    // move\n    const onTouchMoveHandle = (event, sourceEvent) => {\n        let deltaX = event.pageX - dragState.pageX,\n            deltaY = event.pageY - dragState.pageY,\n            translateX = dragState.translateX + deltaX,\n            translateY = dragState.translateY + deltaY,\n            velocityTranslateX = translateX - prevTranslateX || translateX,\n            velocityTranslateY = translateY - prevTranslateY || translateY;\n\n        prevTranslateX = translateX;\n        prevTranslateY = translateY;\n        Object.assign(dragState, {\n            dragging: true,\n            velocityTranslateX,\n            velocityTranslateY,\n        });\n\n        if(options.onDrag) {\n            options.onDrag({\n                ...dragState,\n                deltaX,\n                deltaY,\n                translateX,\n                translateY,\n            }, sourceEvent);\n        }\n    };\n\n    // end\n    const onTouchEndHandle = (event, sourceEvent) => {\n        Object.assign(dragState, {\n            dragging: false,\n        });\n\n        document.onselectstart = null;\n        document.ondragstart = null;\n\n        if(options.onDragEnd) options.onDragEnd(dragState, sourceEvent);\n\n        // reset\n        dragState = {\n            dragging: false,\n            effectEl: options.effectEl || el,\n        };\n    };\n\n    el.addEventListener('touchstart', event => onTouchStartHandle(event.changedTouches[0] || event.touches[0], event));\n    el.addEventListener('touchmove', event => onTouchMoveHandle(event.changedTouches[0] || event.touches[0], event));\n    el.addEventListener('touchend', event => onTouchEndHandle(event.changedTouches[0] || event.touches[0], event));\n    el.addEventListener('touchcancel', event => onTouchEndHandle(event.changedTouches[0] || event.touches[0], event));\n};\n\nexport default draggable;\n"
  },
  {
    "path": "src/scripts/utils/easing.js",
    "content": "// easeInOut\nexport const easeInOutCubic = (time, offset, end, duration) => {\n    let cc = end - offset,\n        tempTime = time / (duration / 2);\n\n    if(tempTime < 1) {\n        return (cc / 2 * tempTime * tempTime * tempTime) + offset;\n    }\n\n    return (cc / 2 * (((tempTime -= 2) * tempTime * tempTime) + 2)) + offset;\n};\n"
  },
  {
    "path": "src/scripts/utils/loading.js",
    "content": "import Vue from 'vue';\nimport OriginToast from '../components/Toast';\n\nconst Toast = Vue.extend(OriginToast);\n\nlet instance,\n    active = false;\n\nexport default {\n    show(message = '加载中') {\n        if(active) return;\n\n        /* global document:true */\n        if(!instance) {\n            instance = new Toast({\n                el: document.createElement('div'),\n            });\n\n            document.body.appendChild(instance.$el);\n        }\n\n        active = true;\n        instance.message = message;\n        instance.type = 'loading';\n        instance.position = 'center';\n\n        Vue.nextTick(() => {\n            instance.show();\n        });\n    },\n    hide() {\n        instance.hide();\n        active = false;\n    },\n    toggle(message) {\n        return active ? this.hide() : this.show(message);\n    },\n};\n"
  },
  {
    "path": "src/scripts/utils/toast.js",
    "content": "import Vue from 'vue';\nimport OriginToast from '../components/Toast';\n\nconst Toast = Vue.extend(OriginToast);\n\n// toast缓存池\nconst toastCache = {\n    cache: [],\n    active: false,\n    pop() {\n        if(this.cache.length) return this.cache.splice(0, 1)[0];\n\n        return new Toast({\n            el: document.createElement('div'),\n        });\n    },\n    push(instance) {\n        this.cache.push(instance);\n    },\n    toggle() {\n        this.active = !this.active;\n    },\n};\n\nToast.prototype.show = function() {\n    this.currentValue = true;\n    toastCache.active = true;\n};\n\nToast.prototype.hide = function() {\n    this.currentValue = false;\n    toastCache.active = false;\n};\n\n/* global document:true */\nconst toastUtil = (options = {}) => {\n    if(toastCache.active) return;\n\n    let duration = options.duration || 2000,\n        instance = toastCache.pop();\n\n    instance.message = typeof options === 'string' ? options : options.message;\n    instance.type = options.type || '';\n    instance.position = options.position || 'bottom';\n\n    document.body.appendChild(instance.$el);\n\n    instance.show();\n    instance.timer = setTimeout(() => {\n        instance.hide();\n\n        toastCache.push(instance);\n    }, duration);\n};\n\nexport default toastUtil;\n"
  },
  {
    "path": "src/scripts/utils/translate.js",
    "content": "import { vendorPrefix } from './cssPrefix';\n\nlet transformProperty = `${vendorPrefix}Transform`;\n\n// 获取位移\nexport const getTranslate = el => {\n    let result = {\n        x: 0,\n        y: 0,\n    };\n\n    if(el === null || el.style === null) return result;\n\n    let transform = el.style[transformProperty];\n    let matches = /translate\\(\\s*(-?\\d+(\\.?\\d+?)?)px,\\s*(-?\\d+(\\.\\d+)?)px\\)\\s*(translateZ\\(0px\\))?/g.exec(transform);\n\n    if(matches) {\n        result.x = +matches[1];\n        result.y = +matches[3];\n    }\n\n    return result;\n};\n\n// 取消位移\nexport const cancelTranslate = el => {\n    if(el === null || el.style === null) return;\n\n    let transform = el.style[transformProperty];\n\n    if(transform) {\n        transform = transform.replace(/translate\\(\\s*(-?\\d+(\\.?\\d+?)?)px,\\s*(-?\\d+(\\.\\d+)?)px\\)\\s*(translateZ\\(0px\\))?/g, '');\n        el.style[transformProperty] = transform;\n    }\n};\n\n// 设置位移\nexport const setTranslate = (el, x, y) => {\n    if(!el) return;\n    if(x === null && y === null) return;\n    // if(!el.style.transform && !x && !y) return;\n\n    let translate = getTranslate(el),\n        currentX = x,\n        currentY = y;\n\n    if(x === null) currentX = translate.x;\n    if(y === null) currentY = translate.y;\n\n    cancelTranslate(el);\n\n    el.style[transformProperty] += ` translate(${currentX ? `${currentX}px` : '0px'}, ${currentY ? `${currentY}px` : '0px'})`;\n};\n\n"
  },
  {
    "path": "src/scripts/utils/type.js",
    "content": "// 是否数组\nexport const isArray = array => Object.prototype.toString.call(array) === '[object Array]';\n"
  },
  {
    "path": "src/scripts/views/alert.vue",
    "content": "<template>\n    <div>\n        <group-title>base</group-title>\n        <group>\n            <cell @click=\"alertClickHandle\">\n                <icon class=\"text-muted\" name=\"exclamation-triangle\" left size=\"lg\" />\n                alert\n            </cell>\n            <cell @click=\"confirmClickHandle\">\n                <icon class=\"text-muted\" name=\"question-circle-o\" left size=\"lg\" />\n                confirm\n            </cell>\n        </group>\n        <group-title>vertical buttons</group-title>\n        <group>\n            <cell @click=\"confirmVerticalClickHandle\">\n                <icon class=\"text-muted\" name=\"question-circle-o\" left size=\"lg\" />\n                confirm\n            </cell>\n        </group>\n    </div>\n</template>\n\n<script>\n    export default {\n        methods: {\n            // alert\n            alertClickHandle() {\n                this.$alert({\n                    maskClosable: true,\n                    btns: [{\n                        text: '关闭',\n                        click() {\n                            console.log('close!!!');\n                        },\n                    }],\n                    title: '<span class=\"text-default\">提示</span>',\n                    message: '这是Vue 2.0组件库！',\n                });\n            },\n            // confirm\n            confirmClickHandle() {\n                this.$alert({\n                    btns: [{\n                        text: '确定',\n                        click() {\n                            console.log('sure!!!');\n                        },\n                    }, {\n                        text: '取消',\n                        click() {\n                            console.log('cancel!!!');\n                        },\n                    }],\n                    title: '<span class=\"text-success\">提示</span>',\n                    message: '这是Vue 2.0组件库！',\n                });\n            },\n            // confirm\n            confirmVerticalClickHandle() {\n                this.$alert({\n                    vertical: true,\n                    btns: [{\n                        text: '验证身份',\n                        click() {\n                            console.log('check!!!');\n                        },\n                    }, {\n                        text: '开始使用',\n                        click() {\n                            console.log('start!!!');\n                        },\n                    }],\n                    title: '<span class=\"text-success\">恭喜你</span>',\n                    message: '通过考试，你已完成初级培训！',\n                });\n            },\n        },\n    };\n\n</script>\n"
  },
  {
    "path": "src/scripts/views/back-to-top.vue",
    "content": "<template>\n    <div>\n        <div v-for=\"n in 10\">\n            <group-title><strong>group {{n}}</strong></group-title>\n            <group>\n                <cell v-for=\"m in 5\">\n                    {{n}}-{{m}}\n                </cell>\n            </group>\n        </div>\n        <back-to-top />\n    </div>\n</template>\n"
  },
  {
    "path": "src/scripts/views/badge.vue",
    "content": "<template>\n    <div>\n        <group-title>base</group-title>\n        <group>\n            <cell>\n                <badge content=\"3\" theme=\"primary\" />\n                <badge content=\"3\" theme=\"secondary\" />\n                <badge content=\"3\" theme=\"success\" />\n                <badge content=\"3\" theme=\"warning\" />\n            </cell>\n            <cell>\n                <badge content=\"3\" theme=\"primary\">\n                    <div class=\"bg-default\" :style=\"{width: '50px', height: '50px'}\"></div>\n                </badge>\n                <badge content=\"99+\" theme=\"secondary\">\n                    <div class=\"bg-default\" :style=\"{width: '50px', height: '50px'}\"></div>\n                </badge>\n                <badge content=\"99+\" theme=\"success\">\n                    <div class=\"bg-default\" :style=\"{width: '50px', height: '50px'}\"></div>\n                </badge>\n                <badge content=\"3\" theme=\"warning\">\n                    <div class=\"bg-default\" :style=\"{width: '50px', height: '50px'}\"></div>\n                </badge>\n            </cell>\n            <cell>\n                <badge content=\"3\" theme=\"primary\">\n                    <icon class=\"text-muted\" size=\"3x\" name=\"bell-o\" />\n                </badge>\n                <badge content=\"3\" theme=\"secondary\">\n                    <icon class=\"text-muted\" size=\"3x\" name=\"shopping-cart\" />\n                </badge>\n                <badge content=\"3\" theme=\"success\">\n                    <icon class=\"text-muted\" size=\"3x\" name=\"bell-o\" />\n                </badge>\n                <badge content=\"3\" theme=\"warning\">\n                    <icon class=\"text-muted\" size=\"3x\" name=\"shopping-cart\" />\n                </badge>\n            </cell>\n        </group>\n        <group-title>dot</group-title>\n        <group>\n            <cell>\n                <badge theme=\"primary\">\n                    <icon class=\"text-muted\" size=\"2x\" name=\"bell-o\" />\n                </badge>\n                <badge theme=\"secondary\">\n                    <icon class=\"text-muted\" size=\"2x\" name=\"bell-o\" />\n                </badge>\n                <badge theme=\"success\">\n                    <icon class=\"text-muted\" size=\"2x\" name=\"shopping-cart\" />\n                </badge>\n                <badge theme=\"warning\">\n                    <icon class=\"text-muted\" size=\"2x\" name=\"shopping-cart\" />\n                </badge>\n            </cell>\n        </group>\n    </div>\n</template>\n"
  },
  {
    "path": "src/scripts/views/button.vue",
    "content": "<template>\n    <div>\n        <group-title>theme</group-title>\n        <group>\n            <cell>\n                <btn theme=\"primary\" @click=\"clickHandle('Vue 2.0')\">primary</btn>\n                <btn theme=\"secondary\">secondary</btn>\n                <btn theme=\"default\">default</btn>\n            </cell>\n        </group>\n        <group-title>hollow</group-title>\n        <group>\n            <cell class=\"bg-inverse\">\n                <btn hollow theme=\"primary\">primary</btn>\n                <btn hollow theme=\"secondary\">secondary</btn>\n                <btn hollow theme=\"default\">default</btn>\n            </cell>\n        </group>\n        <group-title>shape=\"pill\"</group-title>\n        <group>\n            <cell>\n                <btn shape=\"pill\" theme=\"primary\">primary</btn>\n                <btn shape=\"pill\" theme=\"secondary\">secondary</btn>\n                <btn shape=\"pill\" theme=\"default\">default</btn>\n            </cell>\n        </group>\n        <group-title>loading</group-title>\n        <group>\n            <cell>\n                <btn theme=\"primary\" loading>loading</btn>\n                <btn theme=\"default\" loading>保存中</btn>\n            </cell>\n        </group>\n        <group-title>disabled</group-title>\n        <group>\n            <cell>\n                <btn disabled theme=\"primary\">primary</btn>\n                <btn disabled theme=\"secondary\">secondary</btn>\n                <btn disabled theme=\"default\">default</btn>\n            </cell>\n        </group>\n        <group-title>size</group-title>\n        <group>\n            <cell>\n                <btn size=\"sm\" hollow theme=\"primary\">small</btn>\n                <btn theme=\"primary\">normal</btn>\n                <btn size=\"lg\" theme=\"primary\">large</btn>\n            </cell>\n        </group>\n        <group-title>block</group-title>\n        <group>\n            <cell>\n                <btn block size=\"lg\" theme=\"primary\">primary</btn>\n            </cell>\n            <cell>\n                <btn block size=\"lg\" theme=\"secondary\">secondary</btn>\n            </cell>\n            <cell>\n                <btn block size=\"lg\" theme=\"default\">default</btn>\n            </cell>\n        </group>\n    </div>\n</template>\n\n<script>\n    export default {\n        methods: {\n            clickHandle(message) {\n                this.$toast(`hello ${message}`);\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/views/card.vue",
    "content": "<template>\n    <div class=\"container\">\n        <tip><span class=\"text-pure\">科比系列</span></tip>\n        <div class=\"prod-container clearfix\">\n            <div class=\"prod-item\">\n                <card>\n                    <img class=\"img-fluid\" src=\"../../images/kobe8.jpg\" alt=\"kobe 8\">\n                    <card-body>\n                        <p class=\"prod-info\">\n                            Nike耐克 Kobe8 ZK8 科比八代低帮篮球鞋  全配色合集 745334-005科八蓝色 42\n                        </p>\n                        <div class=\"text-danger\">¥ 998</div>\n                    </card-body>\n                </card>\n            </div>\n            <div class=\"prod-item\">\n                <card>\n                    <img class=\"img-fluid\" src=\"../../images/kobe8.jpg\" alt=\"kobe 8\">\n                    <card-body>\n                        <p class=\"prod-info\">\n                            Nike耐克 Kobe8 ZK8 科比八代低帮篮球鞋  全配色合集 745334-005科八蓝色 42\n                        </p>\n                        <div class=\"text-danger\">¥ 998</div>\n                    </card-body>\n                </card>\n            </div>\n            <div class=\"prod-item\">\n                <card>\n                    <img class=\"img-fluid\" src=\"../../images/kobe9.jpg\" alt=\"kobe 10\">\n                    <card-body>\n                        <p class=\"prod-info\">\n                            Nike耐克 Kobe9 ZK9 科比九代低帮篮球鞋  全配色合集 745334-005科九蓝色 42\n                        </p>\n                        <div class=\"text-danger\">¥ 1080</div>\n                    </card-body>\n                </card>\n            </div>\n            <div class=\"prod-item\">\n                <card>\n                    <img class=\"img-fluid\" src=\"../../images/kobe9.jpg\" alt=\"kobe 10\">\n                    <card-body>\n                        <p class=\"prod-info\">\n                            Nike耐克 Kobe9 ZK9 科比九代低帮篮球鞋  全配色合集 745334-005科九蓝色 42\n                        </p>\n                        <div class=\"text-danger\">¥ 1080</div>\n                    </card-body>\n                </card>\n            </div>\n            <div class=\"prod-item\">\n                <card>\n                    <img class=\"img-fluid\" src=\"../../images/kobe10.jpg\" alt=\"kobe 10\">\n                    <card-body>\n                        <p class=\"prod-info\">\n                            Nike耐克 Kobe10 ZK10 科比十代低帮篮球鞋  全配色合集 745334-005科十紫色 42\n                        </p>\n                        <div class=\"text-danger\">¥ 1380</div>\n                    </card-body>\n                </card>\n            </div>\n            <div class=\"prod-item\">\n                <card>\n                    <img class=\"img-fluid\" src=\"../../images/kobe10.jpg\" alt=\"kobe 10\">\n                    <card-body>\n                        <p class=\"prod-info\">\n                            Nike耐克 Kobe10 ZK10 科比十代低帮篮球鞋  全配色合集 745334-005科十紫色 42\n                        </p>\n                        <div class=\"text-danger\">¥ 1380</div>\n                    </card-body>\n                </card>\n            </div>\n        </div>\n    </div>\n</template>\n\n<style>\n    .container {\n        overflow: auto;\n        padding-bottom: 0.5rem;\n        background-color: #ccc;\n    }\n    .prod-container {\n        padding-top: 0.4rem;\n    }\n\n    .prod-item {\n        width: 50%;\n        float: left;\n        padding-bottom: 0.4rem\n    }\n\n    .prod-item:nth-child(2n + 1) {\n        padding-left: 0.6rem;\n        padding-right: 0.2rem;\n    }\n\n    .prod-item:nth-child(2n) {\n        padding-left: 0.2rem;\n        padding-right: 0.6rem;\n    }\n\n    .prod-info {\n        height: 2.8rem;\n        overflow: hidden;\n        display: -webkit-box;\n        text-overflow: ellipsis;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        word-break: break-all;\n    }\n</style>\n"
  },
  {
    "path": "src/scripts/views/cell.vue",
    "content": "<template>\n    <div>\n        <group-title><strong>Base</strong></group-title>\n        <group>\n            <cell>Home</cell>\n            <cell>\n                Library\n                <span slot=\"footer\" class=\"text-primary\">3</span>\n            </cell>\n            <cell @click=\"clickHandle\">\n                Settings\n            </cell>\n            <cell href=\"https://github.com/\">\n                Github\n                <span slot=\"footer\">go</span>\n            </cell>\n        </group>\n        <group-title><strong>Icon</strong></group-title>\n        <group>\n            <cell>\n                <icon class=\"fa-fw\" name=\"home\" size=\"lg\"></icon>\n                Home\n            </cell>\n            <cell>\n                <icon class=\"fa-fw\" name=\"book\" size=\"lg\"></icon>\n                Library\n                <span slot=\"footer\" class=\"text-primary\">3</span>\n            </cell>\n            <cell @click=\"clickHandle\">\n                <icon class=\"fa-fw\" name=\"cog\" size=\"lg\"></icon>\n                Settings\n            </cell>\n            <cell href=\"https://github.com/\">\n                <icon class=\"fa-fw\" name=\"github\" size=\"lg\"></icon>\n                Github\n                <span slot=\"footer\">go</span>\n            </cell>\n        </group>\n        <group>\n            <cell hasArrow>Home</cell>\n            <cell>\n                Library\n                <span slot=\"footer\" class=\"text-primary\">3</span>\n            </cell>\n            <cell @click=\"clickHandle\">\n                Settings\n            </cell>\n            <cell href=\"https://github.com/\" disabled>\n                Github\n                <span slot=\"footer\">go</span>\n            </cell>\n        </group>\n    </div>\n</template>\n\n<script>\n    export default {\n        methods: {\n            clickHandle() {\n                console.log('click!');\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/views/checkbox.vue",
    "content": "<template>\n    <div>\n        <group-title>Base</group-title>\n        <group>\n            <cell>\n                <checkbox @change=\"changeHandle\">default</checkbox>\n                <checkbox slot=\"footer\" :value=\"true\" @change=\"changeHandle\">checked</checkbox>\n            </cell>\n        </group>\n        <group-title>Circle</group-title>\n        <group>\n            <cell>\n                <checkbox type=\"circle\" @change=\"changeHandle\">default</checkbox>\n                <checkbox type=\"circle\" slot=\"footer\" v-model=\"checked\" @change=\"changeHandle\">checked</checkbox>\n            </cell>\n        </group>\n        <group-title>Disabled</group-title>\n        <group>\n            <cell>\n                <checkbox disabled @change=\"changeHandle\">default</checkbox>\n                <checkbox slot=\"footer\" v-model=\"checked\" disabled @change=\"changeHandle\">checked</checkbox>\n            </cell>\n            <cell>\n                <checkbox type=\"circle\" disabled @change=\"changeHandle\">default</checkbox>\n                <checkbox type=\"circle\" slot=\"footer\" v-model=\"checked\" disabled @change=\"changeHandle\">checked</checkbox>\n            </cell>\n        </group>\n        <group-title>\n            CheckboxGroup\n            <span class=\"pull-right\">selected: {{ group }}</span>\n        </group-title>\n        <group>\n            <cell>\n                <checkbox-group v-model=\"group\" @change=\"groupChangeHandle\">\n                    <checkbox value=\"red\">red</checkbox>\n                    <checkbox value=\"green\">green</checkbox>\n                    <checkbox value=\"blue\">blue</checkbox>\n                </checkbox-group>\n            </cell>\n        </group>\n        <group-title>\n            CheckboxGroup disabled\n        </group-title>\n        <group>\n            <cell>\n                <checkbox-group disabled>\n                    <checkbox value=\"red\">red</checkbox>\n                    <checkbox value=\"green\">green</checkbox>\n                    <checkbox value=\"blue\">blue</checkbox>\n                </checkbox-group>\n            </cell>\n        </group>\n        <group-title>\n            Child Checkbox disabled\n            <span class=\"pull-right\">selected: {{ groupDisabled }}</span>\n        </group-title>\n        <group>\n            <cell>\n                <checkbox-group v-model=\"groupDisabled\">\n                    <checkbox value=\"red\" disabled>red</checkbox>\n                    <checkbox value=\"green\">green</checkbox>\n                    <checkbox value=\"blue\">blue</checkbox>\n                </checkbox-group>\n            </cell>\n        </group>\n    </div>\n</template>\n\n<script>\n    export default {\n        data() {\n            return {\n                checked: true,\n                group: ['red'],\n                groupDisabled: [],\n            };\n        },\n        methods: {\n            changeHandle(val) {\n                this.$toast(`选中：${val}`);\n            },\n            groupChangeHandle(val) {\n                this.$toast(`选中：${val}`);\n            },\n        },\n    };\n</script>"
  },
  {
    "path": "src/scripts/views/confirm.vue",
    "content": "<template>\n    <div>\n        <group-title>confirm</group-title>\n        <group>\n            <cell @click=\"showHandle(false)\">\n                <icon class=\"text-muted\" name=\"question-circle-o\" left size=\"lg\" />\n                confirm\n            </cell>\n            <cell @click=\"showHandle(true)\">\n                <icon class=\"text-muted\" name=\"exchange\" left size=\"lg\" />\n                inverseBtn\n            </cell>\n        </group>\n    </div>\n</template>\n\n<script>\n    export default {\n        methods: {\n            showHandle(inverseBtn) {\n                this.$alert({\n                    inverseBtn,\n                    message: '这是Vue 2.0组件库！',\n                });\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/views/datepicker.vue",
    "content": "<template>\n    <div class=\"date-wrapper\">\n        <date-picker\n            type=\"daterange\"\n            size=\"base\"\n            theme=\"default\"\n            :dateDisable=true\n            :nextPickedDisableDays=30\n            :prevPickedDisableDays=30\n            :onPick=\"onPick\"\n        >\n        </date-picker>\n    </div>\n</template>\n\n<script>\n    export default {\n        methods: {\n            // 获取格式化时间数据\n            onPick(val, formatDate) {\n                console.log(val);\n                val.minDate = formatDate(val.minDate, 'yyyy/MM/dd');\n                val.maxDate = formatDate(val.maxDate, 'yyyy/MM/dd');\n                console.log(val);\n            },\n\n            // 获取时间元数据\n            // onPick(val) {\n            //     console.log(val);\n            // },\n        },\n    };\n</script>\n\n<style>\n    .date-wrapper {\n        width: 750px;\n    }\n</style>\n"
  },
  {
    "path": "src/scripts/views/drawer.vue",
    "content": "<template>\n    <div>\n        <group-title>base</group-title>\n        <drawer @change=\"changeHandle\">\n            <drawer-item eventKey=\"分类\">分类</drawer-item>\n            <drawer-item eventKey=\"排序\" disabled>disabled</drawer-item>\n            <drawer-item eventKey=\"筛选\">筛选</drawer-item>\n        </drawer>\n        <group-title>\n            reset\n            <a class=\"pull-right\" href=\"javascript:void(0)\" @click=\"resetHandle\">reset</a>\n        </group-title>\n        <drawer ref=\"drawer\" activeKey=\"排序\" @change=\"changeHandle\">\n            <drawer-item eventKey=\"分类\">分类</drawer-item>\n            <drawer-item eventKey=\"排序\">排序</drawer-item>\n            <drawer-item eventKey=\"筛选\">筛选</drawer-item>\n        </drawer>\n    </div>\n</template>\n\n<script>\n    export default {\n        methods: {\n            changeHandle(val) {\n                this.$toast(`切换至[${val}]`);\n            },\n            resetHandle() {\n                this.$refs.drawer.reset();\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/views/flex.vue",
    "content": "<template>\n    <div>\n        <group-title>等比</group-title>\n        <flex class=\"row\">\n            <flex-item class=\"bg-primary text-center item\">\n                <div>huang</div>\n                <div>huang</div>\n            </flex-item>\n            <flex-item class=\"bg-primary text-center item\">2</flex-item>\n        </flex>\n        <flex class=\"row\">\n            <flex-item class=\"bg-primary text-center item\">1</flex-item>\n            <flex-item class=\"bg-primary text-center item\">2</flex-item>\n            <flex-item class=\"bg-primary text-center item\">3</flex-item>\n            <flex-item class=\"bg-primary text-center item\">4</flex-item>\n        </flex>\n        <flex class=\"row\">\n            <flex-item class=\"bg-primary text-center item\">1</flex-item>\n            <flex-item class=\"bg-primary text-center item\">2</flex-item>\n            <flex-item class=\"bg-primary text-center item\">3</flex-item>\n            <flex-item class=\"bg-primary text-center item\">4</flex-item>\n            <flex-item class=\"bg-primary text-center item\">5</flex-item>\n        </flex>\n        <group-title>占比</group-title>\n        <flex class=\"row\">\n            <flex-item flex=\"2\" class=\"bg-primary text-center item\">1</flex-item>\n            <flex-item class=\"bg-primary text-center item\">2</flex-item>\n        </flex>\n        <flex class=\"row\">\n            <flex-item class=\"bg-primary text-center item\">1</flex-item>\n            <flex-item flex=\"3\" class=\"bg-primary text-center item\">2</flex-item>\n            <flex-item class=\"bg-primary text-center item\">4</flex-item>\n        </flex>\n        <flex class=\"row\">\n            <flex-item class=\"bg-primary text-center item\">1</flex-item>\n            <flex-item class=\"bg-primary text-center item\">2</flex-item>\n            <flex-item class=\"bg-primary text-center item\">3</flex-item>\n            <flex-item class=\"bg-primary text-center item\">4</flex-item>\n            <flex-item flex=\"5\" class=\"bg-primary text-center item\">5</flex-item>\n        </flex>\n    </div>\n</template>\n\n<style>\n    .row {\n        margin-bottom: 1rem;\n    }\n\n    .item {\n        padding: .5rem 0;\n    }\n\n    .item:not(:last-child) {\n        margin-right: 0.5rem;\n    }\n</style>\n"
  },
  {
    "path": "src/scripts/views/hrule.vue",
    "content": "<template>\n    <div>\n        <group-title>base(hr)</group-title>\n        <group>\n            <cell>\n                <hrule />\n            </cell>\n        </group>\n        <group-title>dashed</group-title>\n        <group>\n            <cell>\n                <hrule type=\"dashed\" />\n            </cell>\n        </group>\n        <group-title>dotted</group-title>\n        <group>\n            <cell>\n                <hrule type=\"dotted\" />\n            </cell>\n        </group>\n        <group-title>theme</group-title>\n        <group>\n            <cell>\n                <hrule theme=\"primary\" type=\"dotted\" />\n            </cell>\n            <cell>\n                <hrule theme=\"secondary\" type=\"dotted\" />\n            </cell>\n        </group>\n    </div>\n</template>\n"
  },
  {
    "path": "src/scripts/views/icon.vue",
    "content": "<template>\n    <div>\n        <group-title>fontawesome</group-title>\n        <group>\n            <cell href=\"http://fontawesome.io/icons/\">Fontawesome</cell>\n        </group>\n        <group-title>icons</group-title>\n        <group>\n            <cell>\n                <icon name=\"bell\" left />\n                <icon name=\"car\" left />\n                <icon name=\"camera\" left />\n            </cell>\n            <cell>\n                <icon name=\"bell\" left size=\"lg\" />\n                <icon name=\"car\" left size=\"lg\" />\n                <icon name=\"camera\" left size=\"lg\" />\n            </cell>\n            <cell>\n                <icon name=\"bell\" left size=\"2x\" />\n                <icon name=\"car\" left size=\"2x\" />\n                <icon name=\"camera\" left size=\"2x\" />\n            </cell>\n            <cell>\n                <icon name=\"bell\" left size=\"lg\" class=\"text-danger\" />\n                <icon name=\"car\" left size=\"lg\" class=\"text-danger\" />\n                <icon name=\"camera\" left size=\"lg\" class=\"text-danger\" />\n            </cell>\n        </group>\n    </div>\n</template>\n"
  },
  {
    "path": "src/scripts/views/index.vue",
    "content": "<template>\n    <div>\n        <div v-for=\"group in groups\">\n            <group-title v-if=\"group.title\"><strong>{{group.title}}</strong></group-title>\n            <group>\n                <cell v-for=\"cell in group.children\" :to=\"{path: cell.path}\">\n                    <icon size=\"lg\" left :name=\"cell.icon\"></icon>\n                    {{cell.name}}\n                </cell>\n            </group>\n        </div>\n        <group>\n            <cell>\n                impression\n                <span slot=\"footer\">0.1.0</span>\n            </cell>\n        </group>\n    </div>\n</template>\n\n\n<script>\n    import routesConfig from '../routes.json';\n\n    export default {\n        data() {\n            return {\n                groups: routesConfig,\n            };\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/views/inline-selecor.vue",
    "content": "<template>\n    <div>\n        <group-title>\n            base\n            <span class=\"pull-right\">size: {{size}}</span>\n        </group-title>\n        <group>\n            <cell>\n                <inline-selector v-model=\"size\" @change=\"changeHandle\">\n                    <inline-selector-option value=\"xxl\">XXL</inline-selector-option>\n                    <inline-selector-option value=\"m\">M</inline-selector-option>\n                    <inline-selector-option value=\"s\">S</inline-selector-option>\n                    <inline-selector-option value=\"l\">L</inline-selector-option>\n                    <inline-selector-option value=\"xl\">XL</inline-selector-option>\n                </inline-selector>\n            </cell>\n        </group>\n        <group-title>\n            multiple\n            <span class=\"pull-right\">size: {{multiple}}</span>\n        </group-title>\n        <group>\n            <cell>\n                <inline-selector v-model=\"multiple\" multiple @change=\"changeHandle\">\n                    <inline-selector-option value=\"xxl\">XXL</inline-selector-option>\n                    <inline-selector-option value=\"m\">M</inline-selector-option>\n                    <inline-selector-option value=\"s\">S</inline-selector-option>\n                    <inline-selector-option value=\"l\">L</inline-selector-option>\n                    <inline-selector-option value=\"xl\">XL</inline-selector-option>\n                </inline-selector>\n            </cell>\n        </group>\n        <group-title>\n            disabled\n        </group-title>\n        <group>\n            <cell>\n                <inline-selector disabled @change=\"changeHandle\">\n                    <inline-selector-option value=\"xxl\">XXL</inline-selector-option>\n                    <inline-selector-option value=\"m\">M</inline-selector-option>\n                    <inline-selector-option value=\"s\">S</inline-selector-option>\n                    <inline-selector-option value=\"l\">L</inline-selector-option>\n                    <inline-selector-option value=\"xl\">XL</inline-selector-option>\n                </inline-selector>\n            </cell>\n        </group>\n        <group-title>\n            inline-selector-option disabled\n            <span class=\"pull-right\">size: {{disabled}}</span>\n        </group-title>\n        <group>\n            <cell>\n                <inline-selector v-model=\"disabled\" @change=\"changeHandle\">\n                    <inline-selector-option value=\"xxl\">XXL</inline-selector-option>\n                    <inline-selector-option disabled value=\"m\">M</inline-selector-option>\n                    <inline-selector-option value=\"s\">S</inline-selector-option>\n                    <inline-selector-option disabled value=\"l\">L</inline-selector-option>\n                    <inline-selector-option disabled value=\"xl\">XL</inline-selector-option>\n                </inline-selector>\n            </cell>\n        </group>\n        <group-title>\n            theme: 'danger'\n            <span class=\"pull-right\">size: {{theme}}</span>\n        </group-title>\n        <group>\n            <cell>\n                <inline-selector theme=\"danger\" v-model=\"theme\" @change=\"changeHandle\">\n                    <inline-selector-option value=\"xxl\">XXL</inline-selector-option>\n                    <inline-selector-option value=\"m\">M</inline-selector-option>\n                    <inline-selector-option value=\"s\">S</inline-selector-option>\n                    <inline-selector-option value=\"l\">L</inline-selector-option>\n                    <inline-selector-option value=\"xl\">XL</inline-selector-option>\n                </inline-selector>\n            </cell>\n        </group>\n    </div>\n</template>\n\n<script>\n    export default {\n        data() {\n            return {\n                size: 'l',\n                multiple: [],\n                theme: 'm',\n                disabled: null,\n            };\n        },\n        methods: {\n            changeHandle(value, text) {\n                this.$toast(`${text}: ${value}`);\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/views/input-number.vue",
    "content": "<template>\n    <div>\n        <group-title>Base</group-title>\n        <group>\n            <cell>\n                <span>default</span>\n                <input-number v-model=\"count\" @change=\"changeHandle\" slot=\"footer\"></input-number>\n            </cell>\n            <cell>\n                <span>disabled</span>\n                <input-number disabled :value=\"3\" slot=\"footer\"></input-number>\n            </cell>\n        </group>\n        <group-title>Step</group-title>\n        <group>\n            <cell>\n                step=2\n                <input-number :step=\"2\" slot=\"footer\"></input-number>\n            </cell>\n            <cell>\n                step=3\n                <input-number :step=\"3\" slot=\"footer\"></input-number>\n            </cell>\n        </group>\n        <group-title>Max</group-title>\n        <group>\n            <cell>\n                max=3\n                <input-number :max=\"3\" slot=\"footer\"></input-number>\n            </cell>\n        </group>\n        <group-title>Min</group-title>\n        <group>\n            <cell>\n                min=3\n                <input-number :min=\"3\" :value=\"3\" slot=\"footer\"></input-number>\n            </cell>\n        </group>\n    </div>\n</template>\n\n<script>\n    import Vue from 'vue';\n\n    export default {\n        data() {\n            return {\n                count: 1,\n            };\n        },\n        methods: {\n            changeHandle(value) {\n                Vue.$toast(`当前值：${value}`);\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/views/input-text.vue",
    "content": "<template>\n    <div>\n        <group-title>base</group-title>\n        <group>\n            <cell>\n                <span slot=\"header\">input：</span>\n                <input-text placeholder=\"text input\" />\n            </cell>\n        </group>\n        <group-title>clearable</group-title>\n        <group>\n            <cell>\n                <span slot=\"header\">input：{{ text }}</span>\n                <input-text clearable @change=\"inputHandler\" type=\"number\" v-model=\"text\" />\n            </cell>\n        </group>\n        <group-title>disabled</group-title>\n        <group>\n            <cell disabled>\n                <span slot=\"header\">input：</span>\n                <input-text disabled value=\"disabled\"/>\n            </cell>\n        </group>\n        <group-title>State</group-title>\n        <group>\n            <cell>\n                <span slot=\"header\">success:</span>\n                <input-text clearable state=\"success\" />\n            </cell>\n            <cell>\n                <span slot=\"header\">warning:</span>\n                <input-text clearable state=\"warning\" />\n            </cell>\n            <cell>\n                <span slot=\"header\">error:</span>\n                <input-text clearable state=\"error\" />\n            </cell>\n        </group>\n    </div>\n</template>\n\n<script>\nexport default {\n    data() {\n        return {\n            text: 123,\n        };\n    },\n    methods: {\n        inputHandler(val) {\n            console.log(val);\n        },\n    },\n};\n</script>\n"
  },
  {
    "path": "src/scripts/views/input-textarea.vue",
    "content": "<template>\n    <div>\n        <group-title>base</group-title>\n        <group>\n            <cell class=\"no-padding\">\n                <input-textarea placeholder=\"textarea\" />\n            </cell>\n        </group>\n        <group-title>countable</group-title>\n        <group>\n            <cell class=\"no-padding\">\n                <input-textarea countable value=\"countable\" placeholder=\"countable\" />\n            </cell>\n        </group>\n    </div>\n</template>\n"
  },
  {
    "path": "src/scripts/views/loading.vue",
    "content": "<template>\n    <div>\n        <group-title>loading</group-title>\n        <group>\n            <cell @click=\"showLoadingHandle\">\n                <icon class=\"text-muted\" name=\"spinner\" left size=\"lg\" />\n                show\n            </cell>\n            <cell @click=\"showLoadingMsgHandle('初始化中')\">\n                <icon class=\"text-muted\" name=\"pencil\" left size=\"lg\" />\n                message\n            </cell>\n        </group>\n    </div>\n</template>\n<script>\n    export default{\n        methods: {\n            showLoadingHandle() {\n                this.$loading.toggle();\n                setTimeout(() => {\n                    this.$loading.toggle();\n                }, 3000);\n            },\n            showLoadingMsgHandle(message) {\n                this.$loading.toggle(message);\n\n                setTimeout(() => {\n                    this.$loading.toggle();\n                }, 3000);\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/views/media.vue",
    "content": "<template>\n    <div>\n        <group-title>Media</group-title>\n        <group>\n            <cell>\n                <media>\n                    <media-object>\n                        <img class=\"border-circle\" :style=\"{width: '60px', height: '60px'}\" src=\"../../images/avatar.jpg\">\n                    </media-object>\n                    <media-body>\n                        <h3>vue-impression</h3>\n                        A Vue.js 2.0 UI elements for mobile.\n                    </media-body>\n                </media>\n            </cell>\n            <cell>\n                <media>\n                    <media-body>\n                        <h3>vue-impression</h3>\n                        A Vue.js 2.0 UI elements for mobile.\n                    </media-body>\n                    <media-object>\n                        <img :style=\"{width: '60px', height: '60px'}\" src=\"../../images/avatar.jpg\">\n                    </media-object>\n                </media>\n            </cell>\n        </group>\n    </div>\n</template>\n"
  },
  {
    "path": "src/scripts/views/navbar.vue",
    "content": "<template>\n    <div>\n        <navbar theme=\"default\">\n            <router-link :to=\"{path: '/'}\">\n                <icon name=\"chevron-left\" size=\"lg\"></icon>\n                Back\n            </router-link>\n            <h5 slot=\"body\">Navbar</h5>\n            <span slot=\"footer\">\n                <icon name=\"ellipsis-h\" size=\"lg\"></icon>\n            </span>\n        </navbar>\n\n        <group-title>Base</group-title>\n        <navbar>\n            <router-link :to=\"{path: '/'}\">\n                <icon name=\"chevron-left\" size=\"lg\"></icon>\n            </router-link>\n            <h5 slot=\"body\">Primary</h5>\n            <icon name=\"ellipsis-h\" slot=\"footer\" size=\"lg\"></icon>\n        </navbar>\n\n        <group-title>Default</group-title>\n        <navbar theme=\"default\">\n            <router-link :to=\"{path: '/'}\">\n                <icon name=\"chevron-left\" size=\"lg\"></icon>\n            </router-link>\n            <span slot=\"body\">Default</span>\n            <icon name=\"ellipsis-h\" slot=\"footer\" size=\"lg\"></icon>\n        </navbar>\n    </div>\n</template>\n"
  },
  {
    "path": "src/scripts/views/navigation.vue",
    "content": "<template>\n    <div>\n        <group-title>base</group-title>\n        <navigation>\n            <navigation-item label=\"首页\" />\n            <navigation-item label=\"分类\" />\n            <navigation-item label=\"购物车\" />\n            <navigation-item label=\"订单\" />\n            <navigation-item label=\"我的\" />\n        </navigation>\n        <group-title>icon</group-title>\n        <navigation @change=\"changeHandle\">\n            <navigation-item label=\"首页\">\n                <icon name=\"home\" size=\"lg\" />\n            </navigation-item>\n            <navigation-item label=\"分类\">\n                <icon name=\"list-ul\" size=\"lg\" />\n            </navigation-item>\n            <navigation-item label=\"购物车\">\n                <icon name=\"shopping-cart\" size=\"lg\" />\n            </navigation-item>\n            <navigation-item label=\"订单\">\n                <icon name=\"file-text-o\" size=\"lg\" />\n            </navigation-item>\n            <navigation-item label=\"我的\">\n                <icon name=\"smile-o\" size=\"lg\" />\n            </navigation-item>\n        </navigation>\n    </div>\n</template>\n\n<script>\n    export default {\n        methods: {\n            changeHandle(val) {\n                this.$toast(`选择了第 ${val + 1} 个`);\n            },\n        },\n    };\n</script>\n\n<style>\n    .fa-lg {\n        font-size: 1.6em;\n    }\n</style>\n"
  },
  {
    "path": "src/scripts/views/picker.vue",
    "content": "<template>\n    <div>\n        <group-title>base:{{defaultCity}}</group-title>\n        <picker v-model=\"defaultCity\">\n            <picker-option value=\"北京\">北京</picker-option>\n            <picker-option value=\"上海\">上海</picker-option>\n            <picker-option value=\"广州\">广州</picker-option>\n            <picker-option value=\"南京\">南京</picker-option>\n            <picker-option value=\"杭州\">杭州</picker-option>\n            <picker-option value=\"天津\">天津</picker-option>\n            <picker-option value=\"深圳\">深圳</picker-option>\n            <picker-option value=\"成都\">成都</picker-option>\n            <picker-option value=\"武汉\">武汉</picker-option>\n            <picker-option value=\"厦门\">厦门</picker-option>\n        </picker>\n        <group-title>sm:{{sm}}</group-title>\n        <picker v-model=\"sm\" size=\"sm\">\n            <picker-option value=\"北京\">北京</picker-option>\n            <picker-option value=\"上海\">上海</picker-option>\n            <picker-option value=\"广州\">广州</picker-option>\n            <picker-option value=\"南京\">南京</picker-option>\n            <picker-option value=\"杭州\">杭州</picker-option>\n            <picker-option value=\"天津\">天津</picker-option>\n            <picker-option value=\"深圳\">深圳</picker-option>\n            <picker-option value=\"成都\">成都</picker-option>\n            <picker-option value=\"武汉\">武汉</picker-option>\n            <picker-option value=\"厦门\">厦门</picker-option>\n        </picker>\n        <group-title>lg:{{lg}}</group-title>\n        <picker v-model=\"lg\" size=\"lg\">\n            <picker-option value=\"北京\">北京</picker-option>\n            <picker-option value=\"上海\">上海</picker-option>\n            <picker-option value=\"广州\">广州</picker-option>\n            <picker-option value=\"南京\">南京</picker-option>\n            <picker-option value=\"杭州\">杭州</picker-option>\n            <picker-option value=\"天津\">天津</picker-option>\n            <picker-option value=\"深圳\">深圳</picker-option>\n            <picker-option value=\"成都\">成都</picker-option>\n            <picker-option value=\"武汉\">武汉</picker-option>\n            <picker-option value=\"厦门\">厦门</picker-option>\n        </picker>\n    </div>\n</template>\n\n<script>\n    export default {\n        data() {\n            return {\n                sm: null,\n                lg: null,\n                defaultCity: '杭州',\n            };\n        },\n        mounted() {\n            setTimeout(() => {\n                this.defaultCity = '武汉';\n            }, 3000);\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/views/progressbar.vue",
    "content": "<template>\n    <div>\n        <group-title>base</group-title>\n        <group>\n            <cell>\n                <progressbar :value=\"progress\">\n                    60%\n                </progressbar>\n            </cell>\n            <cell>\n                <progressbar :value=\"progress\" theme=\"success\">\n                    60%\n                </progressbar>\n            </cell>\n            <cell>\n                <progressbar :value=\"progress\" theme=\"warning\">\n                    60%\n                </progressbar>\n            </cell>\n            <cell>\n                <progressbar :value=\"progress\" theme=\"danger\">\n                    60%\n                </progressbar>\n            </cell>\n        </group>\n        <group-title>sm</group-title>\n        <group>\n            <cell>\n                <progressbar size=\"sm\" :value=\"progress\">\n                    60%\n                </progressbar>\n            </cell>\n            <cell>\n                <progressbar size=\"sm\" :value=\"progress\" theme=\"success\">\n                    60%\n                </progressbar>\n            </cell>\n            <cell>\n                <progressbar size=\"sm\" :value=\"progress\" theme=\"warning\">\n                    60%\n                </progressbar>\n            </cell>\n            <cell>\n                <progressbar size=\"sm\" :value=\"progress\" theme=\"danger\">\n                    60%\n                </progressbar>\n            </cell>\n        </group>\n        <group-title>不等分区间<br />\n            BASE<br />必传参数：<br />nodeDataList--节点数据list<br />currentData--当前数值<br /> currentData={{currentData}}\n        </group-title>\n        <group>\n            <cell>\n                <progressbars\n                    :nodeDataList=\"nodeDataList\"\n                    :currentData=\"currentData\">\n                </progressbars>\n            </cell>\n        </group>\n\n        <group-title>\n            backgroundColor--进度条背景色<br />foregroundColor--进度条前景色<br /> currentData={{currentData}}\n        </group-title>\n        <group>\n            <cell>\n                <progressbars\n                    :nodeDataList=\"nodeDataList\"\n                    :currentData=\"currentData\">\n                </progressbars>\n            </cell>\n            <cell>\n                <progressbars\n                    :nodeDataList=\"nodeDataList\"\n                    :currentData=\"currentData\"\n                    backgroundColor=\"#f4f4f4\"\n                    foregroundColor=\"#30BE71\">\n                </progressbars>\n            </cell>\n            <cell>\n                <progressbars\n                    :nodeDataList=\"nodeDataList\"\n                    :currentData=\"currentData\"\n                    foregroundColor=\"#30BE71\">\n                </progressbars>\n            </cell>\n        </group>\n\n        <group-title>\n            size: xsm / sm / lg<br /> currentData={{currentData}}\n        </group-title>\n        <group>\n            <cell>\n                <progressbars\n                    size=\"xsm\"\n                    :nodeDataList=\"nodeDataList\"\n                    :nodeInfoList=\"nodeInfoList\"\n                    :currentData=\"currentData\"\n                    backgroundColor=\"#f4f4f4\"\n                    foregroundColor=\"#30BE71\">\n                </progressbars></cell>\n            </cell>\n            <cell>\n                <progressbars\n                    :nodeDataList=\"nodeDataList\"\n                    :nodeInfoList=\"nodeInfoList\"\n                    :currentData=\"currentData\"\n                    backgroundColor=\"#f4f4f4\"\n                    foregroundColor=\"#30BE71\">\n                </progressbars></cell>\n            </cell>\n            <cell>\n                <progressbars\n                    size=\"lg\"\n                    :nodeDataList=\"nodeDataList\"\n                    :nodeInfoList=\"nodeInfoList\"\n                    :currentData=\"currentData\"\n                    backgroundColor=\"#f4f4f4\"\n                    foregroundColor=\"#30BE71\">\n                </progressbars></cell>\n            </cell>\n        </group>\n\n        <group-title>\n            nodeShape: dot / circle / checkCircle<br /> currentData={{currentData}}\n        </group-title>\n        <group>\n            <cell>\n                <progressbars\n                    :nodeDataList=\"nodeDataList\"\n                    :currentData=\"currentData\"\n                    :nodeInfoList=\"nodeInfoList\"\n                    backgroundColor=\"#f4f4f4\"\n                    foregroundColor=\"#30BE71\">\n                </progressbars></cell>\n            </cell>\n            <cell>\n                <progressbars\n                    nodeShape=\"circle\"\n                    :nodeDataList=\"nodeDataList\"\n                    :nodeInfoList=\"nodeInfoList\"\n                    :currentData=\"currentData\"\n                    backgroundColor=\"#f4f4f4\"\n                    foregroundColor=\"#30BE71\">\n                </progressbars></cell>\n            </cell>\n            <cell>\n                <progressbars\n                    nodeShape=\"checkCircle\"\n                    :nodeDataList=\"nodeDataList\"\n                    :nodeInfoList=\"nodeInfoList\"\n                    :currentData=\"currentData\"\n                    backgroundColor=\"#f4f4f4\"\n                    foregroundColor=\"#30BE71\">\n                </progressbars></cell>\n            </cell>\n        </group>\n        <group-title>\n            复写progressbars的font-size，进度条可以等比缩放<br /> currentData={{currentData}}\n        </group-title>\n        <group>\n            <cell>\n                <progressbars\n                    :nodeDataList=\"nodeDataList\"\n                    :currentData=\"currentData\"\n                    :nodeInfoList=\"nodeInfoList\"\n                    backgroundColor=\"#f4f4f4\"\n                    foregroundColor=\"#30BE71\"\n                    style=\"font-size: 15px;\">\n                </progressbars>\n            </cell>\n            <cell>\n                <progressbars\n                    :nodeDataList=\"nodeDataList\"\n                    :currentData=\"currentData\"\n                    :nodeInfoList=\"nodeInfoList\"\n                    backgroundColor=\"#f4f4f4\"\n                    foregroundColor=\"#30BE71\"\n                    style=\"font-size: 25px;\">\n                </progressbars>\n            </cell>\n            <cell style=\"width: 200px; margin: 0 auto;\">\n                <progressbars\n                    :nodeDataList=\"nodeDataList\"\n                    :currentData=\"currentData\"\n                    :nodeInfoList=\"nodeInfoList\"\n                    backgroundColor=\"#f4f4f4\"\n                    foregroundColor=\"#30BE71\"\n                    style=\"font-size: 35px;\">\n                </progressbars>\n            </cell>\n        </group>\n        <group-title>\n            文案<br /> currentData={{currentData}}\n        </group-title>\n        <group>\n            <cell style=\"padding-bottom: 50px; margin: 0 auto; overflow: visible;\">\n                <progressbars\n                    :nodeDataList=\"nodeDataList\"\n                    :currentData=\"currentData\"\n                    :nodeInfoList=\"nodeInfoList\"\n                    backgroundColor=\"#f4f4f4\"\n                    foregroundColor=\"#30BE71\"\n                    style=\"font-size: 15px;\">\n                    <div v-for=\"(info, index) in nodeInfoList\"\n                         :key=\"index\"\n                         :slot=\"`infoSlot${index}`\">\n                         <div>\n                             {{info}}<br />unit\n                         </div>\n                     </div>\n                </progressbars>\n            </cell>\n            <cell style=\"padding-bottom: 100px; margin: 0 auto; overflow: visible;\">\n                <progressbars\n                    :nodeDataList=\"nodeDataList\"\n                    :currentData=\"currentData\"\n                    :nodeInfoList=\"nodeInfoList\"\n                    backgroundColor=\"#f4f4f4\"\n                    foregroundColor=\"#30BE71\"\n                    style=\"font-size: 25px;\">\n                    <div v-for=\"(info, index) in nodeInfoList\"\n                         :key=\"index\"\n                         :slot=\"`infoSlot${index}`\">\n                         <div>\n                             {{info}}<br />unit\n                         </div>\n                     </div>\n                </progressbars>\n            </cell>\n        </group>\n    </div>\n</template>\n\n<script>\n    export default {\n        data() {\n            return {\n                progress: 0.6,\n                nodeDataList: [0, 10, 100],\n                nodeInfoList: [0, 10, 100],\n                currentData: 99,\n            };\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/views/pull-down.vue",
    "content": "<template>\n    <div>\n        <group-title>\n            Pull down\n            <span class=\"pull-right\">status: {{ topAllLoaded ? 'all loaded' : topStatus }}</span>\n        </group-title>\n        <div class=\"loadmore-wrapper\">\n            <loadmore\n                :topMethod=\"loadTop\"\n                :topAllLoaded=\"topAllLoaded\"\n                @topStatusChanged=\"statusChangeHandle\"\n                ref=\"loadmore\">\n                <ul class=\"loadmore-list\">\n                    <li v-for=\"item in list\" class=\"loadmore-item\">{{ item }}</li>\n                </ul>\n            </loadmore>\n        </div>\n    </div>\n</template>\n\n<script>\n    export default {\n        data() {\n            return {\n                list: [],\n                topStatus: '',\n                topAllLoaded: false,\n            };\n        },\n        methods: {\n            loadTop() {\n                setTimeout(() => {\n                    let firstValue = this.list[0];\n\n                    if(firstValue >= -20) {\n                        for (let i = 1; i <= 10; i += 1) {\n                            this.list.unshift(firstValue - i);\n                        }\n                    }\n\n                    if(this.list[0] === -19) this.topAllLoaded = true;\n\n                    this.$refs.loadmore.onTopLoaded();\n                }, 1500);\n            },\n            statusChangeHandle(status) {\n                this.topStatus = status;\n            },\n        },\n        beforeCreate() {\n            document.documentElement.scrollTop = 0;\n            document.body.scrollTop = 0;\n        },\n        created() {\n            for (let i = 1; i <= 20; i += 1) {\n                this.list.push(i);\n            }\n        },\n    };\n</script>\n\n<style>\n    .loadmore-wrapper {\n        overflow: scroll;\n        background-color: white;\n    }\n\n    .loadmore-list {\n        padding: 4px 4px 0;\n        list-style: none;\n    }\n\n    .loadmore-item {\n        margin-bottom: 4px;\n        height: 50px;\n        line-height: 50px;\n        border-radius: 2px;\n        text-align: center;\n    }\n\n    .loadmore-item:last-child {\n        margin-bottom: 0;\n    }\n</style>\n"
  },
  {
    "path": "src/scripts/views/pull-up.vue",
    "content": "<template>\n    <div>\n        <group-title>\n            Pull up\n            <span class=\"pull-right\">status: {{ bottomAllLoaded ? 'all loaded' : bottomStatus }}</span>\n        </group-title>\n        <div class=\"loadmore-wrapper\">\n            <loadmore\n                :bottomMethod=\"loadBottom\"\n                :bottomAllLoaded=\"bottomAllLoaded\"\n                @bottomStatusChanged=\"statusChangeHandle\"\n                ref=\"loadmore\">\n                <ul class=\"loadmore-list\">\n                    <li v-for=\"item in list\" class=\"loadmore-item\">{{ item }}</li>\n                </ul>\n            </loadmore>\n        </div>\n    </div>\n</template>\n\n<style>\n    .loadmore-wrapper {\n        overflow: scroll;\n        background-color: white;\n    }\n\n    .loadmore-list {\n        padding: 4px 4px 0;\n        list-style: none;\n    }\n\n    .loadmore-item {\n        margin-bottom: 4px;\n        height: 50px;\n        line-height: 50px;\n        border-radius: 2px;\n        text-align: center;\n    }\n\n    .loadmore-item:last-child {\n        margin-bottom: 0;\n    }\n</style>\n\n<script>\n    export default {\n        data() {\n            return {\n                list: [],\n                bottomStatus: '',\n                bottomAllLoaded: false,\n            };\n        },\n        methods: {\n            loadBottom() {\n                setTimeout(() => {\n                    let lastValue = this.list[this.list.length - 1];\n\n                    if(lastValue < 40) {\n                        for (let i = 1; i <= 10; i += 1) {\n                            this.list.push(lastValue + i);\n                        }\n                    }\n\n                    if(this.list[this.list.length - 1] === 40) this.bottomAllLoaded = true;\n\n                    this.$refs.loadmore.onBottomLoaded();\n                }, 1500);\n            },\n            statusChangeHandle(status) {\n                this.bottomStatus = status;\n            },\n        },\n        beforeCreate() {\n            document.documentElement.scrollTop = 0;\n            document.body.scrollTop = 0;\n        },\n        created() {\n            for (let i = 1; i <= 20; i += 1) {\n                this.list.push(i);\n            }\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/views/radio.vue",
    "content": "<template>\n    <div>\n        <group-title>\n            Radio\n            <span class=\"pull-right\">selected: {{ single }}</span>\n        </group-title>\n        <group>\n            <cell>\n                <radio v-model=\"single\" val=\"red\">red</radio>\n                <radio v-model=\"single\" val=\"green\">green</radio>\n                <radio v-model=\"single\" val=\"yellow\">yellow</radio>\n            </cell>\n        </group>\n        <group-title>\n            RadioGroup(<span class=\"text-danger\">推荐</span>)\n            <span class=\"pull-right\">selected: {{ group }}</span>\n        </group-title>\n        <group>\n            <cell>\n                <radio-group v-model=\"group\" @change=\"changeHandle\">\n                    <radio value=\"red\">red</radio>\n                    <radio value=\"green\">green</radio>\n                    <radio value=\"yellow\">yellow</radio>\n                </radio-group>\n            </cell>\n        </group>\n        <group>\n            <cell>\n                <radio-group v-model=\"group\" @change=\"changeHandle\">\n                    <radio shape=\"square\" value=\"red\">red</radio>\n                    <radio shape=\"square\" value=\"green\">green</radio>\n                    <radio shape=\"square\" value=\"yellow\">yellow</radio>\n                </radio-group>\n            </cell>\n        </group>\n\n        <group>\n            <cell>\n                <radio-group v-model=\"group\" @change=\"changeHandle\">\n                    <radio shape=\"circle\" value=\"red\">red</radio>\n                    <radio shape=\"circle\" value=\"green\">green</radio>\n                    <radio shape=\"circle\" value=\"yellow\">yellow</radio>\n                </radio-group>\n            </cell>\n        </group>\n    </div>\n</template>\n\n<script>\n    export default {\n        data() {\n            return {\n                single: 'green',\n                group: 'red',\n            };\n        },\n        methods: {\n            changeHandle(val) {\n                this.$toast(`选中：${val}`);\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/views/searchbar.vue",
    "content": "<template>\n    <div>\n        <group-title>base:{{search}}</group-title>\n        <group>\n            <cell>\n                <searchbar v-model=\"search\" :autoBlur=\"false\">\n                    <searchbar-placeholder>\n                        <icon name=\"search\" left size=\"lg\"></icon>搜索\n                    </searchbar-placeholder>\n                    <searchbar-btn>\n                        <span class=\"text-primary\">搜索</span>\n                    </searchbar-btn>\n                </searchbar>\n            </cell>\n        </group>\n        <group-title>circle</group-title>\n        <group>\n            <cell>\n                <!-- 默认autoBlur为true,点击页面其他位置，会触发blur事件 -->\n                <searchbar shape=\"circle\">\n                    <searchbar-placeholder>\n                        <icon name=\"search\" left size=\"lg\"></icon>搜索\n                    </searchbar-placeholder>\n                    <searchbar-btn>\n                        <span class=\"text-primary\">搜索</span>\n                    </searchbar-btn>\n                </searchbar>\n            </cell>\n        </group>\n    </div>\n</template>\n\n<script>\n    export default {\n        data() {\n            return {\n                search: '123',\n            };\n        },\n        watch: {\n            search(value) {\n                console.log('search', value);\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/views/segmented-control.vue",
    "content": "<template>\n    <div>\n        <group-title>base</group-title>\n        <group>\n            <cell class=\"text-center\">\n                <segmented-control @change=\"changeHandle\">\n                    <segmented-control-item>分组</segmented-control-item>\n                    <segmented-control-item>全部</segmented-control-item>\n                </segmented-control>\n            </cell>\n        </group>\n        <group-title>eventKey</group-title>\n        <group>\n            <cell class=\"text-center\">\n                <segmented-control activeKey=\"未接来电\" @change=\"changeHandle\">\n                    <segmented-control-item eventKey=\"所有通话\">所有通话</segmented-control-item>\n                    <segmented-control-item eventKey=\"未接来电\">未接来电</segmented-control-item>\n                </segmented-control>\n            </cell>\n        </group>\n    </div>\n</template>\n\n<script>\n    export default {\n        methods: {\n            changeHandle(val) {\n                this.$toast(`切换至【${val}】`);\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/views/selector.vue",
    "content": "<template>\n    <div>\n        <group-title>\n            base\n            <span class=\"pull-right\">selected:{{single}}</span>\n        </group-title>\n        <group>\n            <selector v-model=\"single\" @change=\"changeHandle\">\n                <selector-option value=\"Apple\">Apple</selector-option>\n                <selector-option value=\"Orange\">Orange</selector-option>\n                <selector-option value=\"Banana\">Banana</selector-option>\n            </selector>\n        </group>\n        <group-title>\n            multiple\n            <span class=\"pull-right\">selected:{{multiple}}</span>\n        </group-title>\n        <group>\n            <selector v-model=\"multiple\" multiple>\n                <selector-option value=\"Apple\">Apple</selector-option>\n                <selector-option value=\"Orange\">Orange</selector-option>\n                <selector-option value=\"Banana\">Banana</selector-option>\n            </selector>\n        </group>\n        <group-title>\n            disabled\n        </group-title>\n        <group>\n            <selector disabled>\n                <selector-option value=\"Apple\">Apple</selector-option>\n                <selector-option value=\"Orange\">Orange</selector-option>\n                <selector-option value=\"Banana\">Banana</selector-option>\n            </selector>\n        </group>\n        <group-title>\n            selector-option disabled\n            <span class=\"pull-right\">selected:{{disabled}}</span>\n        </group-title>\n        <group>\n            <selector v-model=\"disabled\">\n                <selector-option value=\"Apple\" disabled>disabled</selector-option>\n                <selector-option value=\"Orange\">Orange</selector-option>\n                <selector-option value=\"Banana\">Banana</selector-option>\n            </selector>\n        </group>\n    </div>\n</template>\n\n<script>\n    export default {\n        data() {\n            return {\n                single: 'Apple',\n                multiple: [],\n                disabled: 'Orange',\n            };\n        },\n        methods: {\n            changeHandle(value, text) {\n                this.$toast(`${value}: ${text}`);\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/views/sideslip.vue",
    "content": "<template>\n    <div>\n        <group-title>base</group-title>\n        <group>\n            <cell @click=\"toggleHandle\">sidelip</cell>\n        </group>\n        <sidelip v-model=\"show\">\n            <div class=\"bg-primary\" :style=\"{height: '8rem', padding: '2rem 1rem'}\">\n                <media class=\"bg-transparent\" align=\"middle\">\n                    <media-object>\n                        <img class=\"img-circle\" :style=\"{width: '60px', height: '60px'}\" src=\"../../images/avatar.jpg\">\n                    </media-object>\n                    <media-body>\n                        <h3>Impression</h3>\n                        <a class=\"text-pure\" href=\"https://github.com/NewDadaFE/vue-impression\">NewDadaFE©️所有</a>\n                    </media-body>\n                </media>\n            </div>\n            <group class=\"text-muted no-margin\">\n                <cell>\n                    <icon name=\"map-marker\" size=\"lg\" left></icon>\n                    赚钱地图\n                </cell>\n                <cell>\n                    <badge theme=\"secondary\">\n                        <icon name=\"shopping-bag\" size=\"lg\" left></icon>\n                        达达商城\n                    </badge>\n                </cell>\n                <cell>\n                    <badge theme=\"secondary\">\n                        <icon name=\"bullhorn\" size=\"lg\" left></icon>\n                        众包任务\n                    </badge>\n                </cell>\n                <cell>\n                    <icon name=\"google-wallet\" size=\"lg\" left></icon>\n                    钱包\n                </cell>\n                <cell>\n                    <icon name=\"hand-stop-o\" size=\"lg\" left></icon>\n                    规则\n                </cell>\n                <cell>\n                    <icon name=\"bug\" size=\"lg\" left></icon>\n                    举报\n                </cell>\n                <cell>\n                    <icon name=\"cog\" size=\"lg\" left></icon>\n                    设置\n                </cell>\n            </group>\n        </sidelip>\n    </div>\n</template>\n\n<script>\n    export default {\n        data() {\n            return {\n                show: false,\n            };\n        },\n        methods: {\n            toggleHandle() {\n                this.show = !this.show;\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/views/slideup.vue",
    "content": "<template>\n    <div>\n        <group-title>base</group-title>\n        <group>\n            <cell @click=\"showBase = true\">{{city || '选择地点'}}</cell>\n        </group>\n        <group-title>event:close</group-title>\n        <group>\n            <cell @click=\"showEvent = true\">\n                {{(color || size) ? `已选择：${color}、${size}` : '请选择型号'}}\n            </cell>\n        </group>\n        <slideup v-model=\"showBase\">\n            <slideup-header class=\"text-danger\">\n                <icon name=\"map-marker\"></icon>\n                请选择送货地点：\n            </slideup-header>\n            <slideup-body noPadding>\n                <selector v-model=\"city\" @change=\"showBase = false\">\n                    <selector-option value=\"北京\">北京</selector-option>\n                    <selector-option value=\"上海\">上海</selector-option>\n                    <selector-option value=\"广州\">广州</selector-option>\n                    <selector-option value=\"成都\">成都</selector-option>\n                    <selector-option value=\"南京\">南京</selector-option>\n                    <selector-option value=\"杭州\">杭州</selector-option>\n                    <selector-option value=\"深圳\">深圳</selector-option>\n                    <selector-option value=\"厦门\">厦门</selector-option>\n                    <selector-option value=\"福州\">福州</selector-option>\n                    <selector-option value=\"佛山\">佛山</selector-option>\n                    <selector-option value=\"嘉兴\">嘉兴</selector-option>\n                    <selector-option value=\"宁波\">宁波</selector-option>\n                </selector>\n            </slideup-body>\n        </slideup>\n        <slideup v-model=\"showEvent\" @close=\"closeHandle\">\n            <slideup-header class=\"text-danger\">\n                <icon name=\"map-marker\"></icon>\n                商品：\n            </slideup-header>\n            <slideup-body>\n                <p class=\"text-muted\">颜色</p>\n                <inline-selector v-model=\"color\">\n                    <inline-selector-option value=\"黑咖色\">黑咖色</inline-selector-option>\n                    <inline-selector-option value=\"香槟金\" disabled>香槟金</inline-selector-option>\n                    <inline-selector-option value=\"紫罗兰\">紫罗兰</inline-selector-option>\n                    <inline-selector-option value=\"香槟色\">香槟色</inline-selector-option>\n                    <inline-selector-option value=\"孔雀蓝\" disabled>孔雀蓝</inline-selector-option>\n                </inline-selector>\n                <p></p>\n                <p class=\"text-muted\">尺码</p>\n                <inline-selector v-model=\"size\">\n                    <inline-selector-option value=\"xxl\">XXL</inline-selector-option>\n                    <inline-selector-option value=\"m\">M</inline-selector-option>\n                    <inline-selector-option value=\"s\" disabled>S</inline-selector-option>\n                    <inline-selector-option value=\"l\">L</inline-selector-option>\n                    <inline-selector-option value=\"xl\">XL</inline-selector-option>\n                </inline-selector>\n            </slideup-body>\n        </slideup>\n    </div>\n</template>\n\n<script>\n    export default {\n        data() {\n            return {\n                showBase: false,\n                showEvent: false,\n                city: null,\n                color: '',\n                size: '',\n            };\n        },\n        methods: {\n            closeHandle() {\n                this.$toast('关闭了');\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/views/stepbar.vue",
    "content": "<template>\n    <div>\n        <group-title>base</group-title>\n        <group>\n            <cell>\n                <stepbar :value=\"0\">\n                    <stepbar-item></stepbar-item>\n                    <stepbar-item></stepbar-item>\n                    <stepbar-item></stepbar-item>\n                </stepbar>\n            </cell>\n            <cell>\n                <stepbar :value=\"1\">\n                    <stepbar-item></stepbar-item>\n                    <stepbar-item></stepbar-item>\n                    <stepbar-item></stepbar-item>\n                </stepbar>\n            </cell>\n            <cell>\n                <stepbar :value=\"2\">\n                    <stepbar-item></stepbar-item>\n                    <stepbar-item></stepbar-item>\n                    <stepbar-item></stepbar-item>\n                </stepbar>\n            </cell>\n        </group>\n        <group-title>title</group-title>\n        <group>\n            <cell>\n                <stepbar :value=\"0\">\n                    <stepbar-item>选择订单</stepbar-item>\n                    <stepbar-item>填写资料</stepbar-item>\n                    <stepbar-item>提交材料</stepbar-item>\n                </stepbar>\n            </cell>\n            <cell>\n                <stepbar :value=\"1\">\n                    <stepbar-item>选择订单</stepbar-item>\n                    <stepbar-item>填写资料</stepbar-item>\n                    <stepbar-item>提交材料</stepbar-item>\n                </stepbar>\n            </cell>\n            <cell>\n                <stepbar :value=\"2\">\n                    <stepbar-item>选择订单</stepbar-item>\n                    <stepbar-item>填写资料</stepbar-item>\n                    <stepbar-item>提交材料</stepbar-item>\n                </stepbar>\n            </cell>\n        </group>\n    </div>\n</template>\n"
  },
  {
    "path": "src/scripts/views/sticky.vue",
    "content": "<template>\n    <div>\n        <group-title><strong>Base</strong></group-title>\n        <group>\n            <cell>Home</cell>\n            <cell>\n                Library\n                <span slot=\"footer\" class=\"text-primary\">3</span>\n            </cell>\n            <cell>\n                Settings\n            </cell>\n            <cell href=\"https://github.com/\">\n                Github\n                <span slot=\"footer\">go</span>\n            </cell>\n        </group>\n        <sticky>\n            <span class=\"demo-sticky\">固定在最顶部</span>\n        </sticky>\n        <group-title><strong>Icon</strong></group-title>\n        <group>\n            <cell>\n                <icon class=\"fa-fw\" name=\"home\" size=\"lg\"></icon>\n                Home\n            </cell>\n            <cell>\n                <icon class=\"fa-fw\" name=\"book\" size=\"lg\"></icon>\n                Library\n                <span slot=\"footer\" class=\"text-primary\">3</span>\n            </cell>\n            <cell>\n                <icon class=\"fa-fw\" name=\"cog\" size=\"lg\"></icon>\n                Settings\n            </cell>\n            <cell href=\"https://github.com/\">\n                <icon class=\"fa-fw\" name=\"github\" size=\"lg\"></icon>\n                Github\n                <span slot=\"footer\">go</span>\n            </cell>\n        </group>\n        <group>\n            <cell>\n                <icon class=\"fa-fw\" name=\"home\" size=\"lg\"></icon>\n                Home\n            </cell>\n            <cell>\n                <icon class=\"fa-fw\" name=\"book\" size=\"lg\"></icon>\n                Library\n                <span slot=\"footer\" class=\"text-primary\">3</span>\n            </cell>\n            <cell>\n                <icon class=\"fa-fw\" name=\"cog\" size=\"lg\"></icon>\n                Settings\n            </cell>\n            <cell href=\"https://github.com/\">\n                <icon class=\"fa-fw\" name=\"github\" size=\"lg\"></icon>\n                Github\n                <span slot=\"footer\">go</span>\n            </cell>\n        </group>\n        <sticky :offset-top=\"50\">\n            <span class=\"demo-sticky\">固定在距离顶部 50px 的位置</span>\n        </sticky>\n        <group>\n            <cell>\n                <icon class=\"fa-fw\" name=\"home\" size=\"lg\"></icon>\n                Home\n            </cell>\n            <cell>\n                <icon class=\"fa-fw\" name=\"book\" size=\"lg\"></icon>\n                Library\n                <span slot=\"footer\" class=\"text-primary\">3</span>\n            </cell>\n            <cell>\n                <icon class=\"fa-fw\" name=\"cog\" size=\"lg\"></icon>\n                Settings\n            </cell>\n            <cell href=\"https://github.com/\">\n                <icon class=\"fa-fw\" name=\"github\" size=\"lg\"></icon>\n                Github\n                <span slot=\"footer\">go</span>\n            </cell>\n        </group>\n        <sticky :offset-bottom=\"20\">\n            <span class=\"demo-sticky\">固定在距离底部 20px 的位置</span>\n        </sticky>\n        <group>\n            <cell>\n                <icon class=\"fa-fw\" name=\"home\" size=\"lg\"></icon>\n                Home\n            </cell>\n            <cell>\n                <icon class=\"fa-fw\" name=\"book\" size=\"lg\"></icon>\n                Library\n                <span slot=\"footer\" class=\"text-primary\">3</span>\n            </cell>\n            <cell>\n                <icon class=\"fa-fw\" name=\"cog\" size=\"lg\"></icon>\n                Settings\n            </cell>\n            <cell href=\"https://github.com/\">\n                <icon class=\"fa-fw\" name=\"github\" size=\"lg\"></icon>\n                Github\n                <span slot=\"footer\">go</span>\n            </cell>\n        </group>\n        <sticky :offset-top=\"100\" @on-change=\"change\">\n            <span class=\"demo-sticky\">固定在距离顶部 100px 的位置</span>\n        </sticky>\n        <group>\n            <cell>\n                <icon class=\"fa-fw\" name=\"home\" size=\"lg\"></icon>\n                Home\n            </cell>\n            <cell>\n                <icon class=\"fa-fw\" name=\"book\" size=\"lg\"></icon>\n                Library\n                <span slot=\"footer\" class=\"text-primary\">3</span>\n            </cell>\n            <cell>\n                <icon class=\"fa-fw\" name=\"cog\" size=\"lg\"></icon>\n                Settings\n            </cell>\n            <cell href=\"https://github.com/\">\n                <icon class=\"fa-fw\" name=\"github\" size=\"lg\"></icon>\n                Github\n                <span slot=\"footer\">go</span>\n            </cell>\n        </group>\n        <group>\n            <cell hasArrow>Home</cell>\n            <cell>\n                Library\n                <span slot=\"footer\" class=\"text-primary\">3</span>\n            </cell>\n            <cell>\n                Settings\n            </cell>\n            <cell href=\"https://github.com/\" disabled>\n                Github\n                <span slot=\"footer\">go</span>\n            </cell>\n        </group>\n    </div>\n</template>\n\n<script>\n    export default {\n        methods: {\n            change(status) {\n                this.$toast({\n                    position: 'top',\n                    message: `当前状态：${status}`,\n                });\n            },\n        },\n        mounted() {\n            window.document.querySelector('.flex-vertical').style.height = 'auto';\n        },\n        destroyed() {\n            window.document.querySelector('.flex-vertical').style.height = '';\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/views/swipe.vue",
    "content": "<template>\n    <div>\n        <group-title>base</group-title>\n        <swipe\n            :onDragStart=\"onDragStart\"\n            :onDrag=\"onDrag\"\n            :onDragEnd=\"onDragEnd\">\n            <swipe-item v-for=\"item in swipeItems\" :key=\"item.text\">\n                <div class=\"page-swipe-item\" :class=\"item.theme\">{{item.text}}</div>\n            </swipe-item>\n        </swipe>\n        <group-title>defaultIndex=1, onlyOneDot=false</group-title>\n        <swipe\n            :defaultIndex=\"0\"\n            :onlyOneDot=\"false\">\n            <swipe-item>\n                <div class=\"page-swipe-item bg-primary\">1</div>\n            </swipe-item>\n        </swipe>\n        <group-title>defaultIndex=1</group-title>\n        <swipe :defaultIndex=\"0\">\n            <swipe-item>\n                <div class=\"page-swipe-item bg-primary\">1</div>\n            </swipe-item>\n        </swipe>\n        <group-title>dots=false</group-title>\n        <swipe :dots=\"false\">\n            <swipe-item>\n                <div class=\"page-swipe-item bg-primary\">1</div>\n            </swipe-item>\n            <swipe-item>\n                <div class=\"page-swipe-item bg-secondary\">2</div>\n            </swipe-item>\n            <swipe-item>\n                <div class=\"page-swipe-item bg-success\">3</div>\n            </swipe-item>\n        </swipe>\n        <group-title>autoplay=false</group-title>\n        <swipe :autoplay=\"false\">\n            <swipe-item>\n                <div class=\"page-swipe-item bg-primary\">1</div>\n            </swipe-item>\n            <swipe-item>\n                <div class=\"page-swipe-item bg-secondary\">2</div>\n            </swipe-item>\n            <swipe-item>\n                <div class=\"page-swipe-item bg-success\">3</div>\n            </swipe-item>\n        </swipe>\n        <group-title>cycle=false</group-title>\n        <swipe :cycle=\"false\" :defaultIndex=\"2\">\n            <swipe-item>\n                <div class=\"page-swipe-item bg-primary\">1</div>\n            </swipe-item>\n            <swipe-item>\n                <div class=\"page-swipe-item bg-secondary\">2</div>\n            </swipe-item>\n            <swipe-item>\n                <div class=\"page-swipe-item bg-success\">3</div>\n            </swipe-item>\n        </swipe>\n    </div>\n</template>\n\n<script>\n    export default {\n        data() {\n            return {\n                swipeItems: [],\n            };\n        },\n        methods: {\n            onDragStart(index) {\n                console.log('onDragStart');\n                this.$toast({\n                    message: `onDragStart${index}`,\n                });\n            },\n            onDrag(index) {\n                console.log('onDrag');\n                this.$toast({\n                    message: `onDrag${index}`,\n                });\n            },\n            onDragEnd(index) {\n                console.log(`onDragEnd:${index}`);\n                this.$toast({\n                    message: `onDragEnd${index}`,\n                });\n            },\n        },\n        mounted() {\n            setTimeout(() => {\n                this.swipeItems = [{\n                    text: 1,\n                    theme: 'bg-primary',\n                }, {\n                    text: 2,\n                    theme: 'bg-secondary',\n                }, {\n                    text: 3,\n                    theme: 'bg-success',\n                }, {\n                    text: 4,\n                    theme: 'bg-warning',\n                }, {\n                    text: 5,\n                    theme: 'bg-danger',\n                }];\n            }, 1000);\n        },\n    };\n</script>\n\n\n<style>\n    .swipe {\n        height: 200px;\n    }\n\n    .page-swipe-item {\n        color: #fff;\n        height: 100%;\n        line-height: 200px;\n        text-align: center;\n        font-size: 30px;\n        font-weight: bold;\n    }\n</style>\n"
  },
  {
    "path": "src/scripts/views/tabbar.vue",
    "content": "<template>\n    <div>\n        <group-title>base</group-title>\n        <tabbar class=\"no-margin\" @change=\"changeHandle\">\n            <tabbar-item>Sports</tabbar-item>\n            <tabbar-item>Finance</tabbar-item>\n            <tabbar-item>Science</tabbar-item>\n            <tabbar-item>Military</tabbar-item>\n        </tabbar>\n        <group-title>activeKey=\"Science\"</group-title>\n        <tabbar class=\"no-margin\" activeKey=\"Science\" @change=\"changeHandle\">\n            <tabbar-item eventKey=\"Sports\">Sports</tabbar-item>\n            <tabbar-item eventKey=\"Finance\" disabled>Disabled</tabbar-item>\n            <tabbar-item eventKey=\"Science\">Science</tabbar-item>\n            <tabbar-item eventKey=\"Military\">Military</tabbar-item>\n        </tabbar>\n        <group-title>dynamic</group-title>\n        <tabbar class=\"no-margin\" activeKey=\"Finance\" @change=\"changeHandle\">\n            <tabbar-item v-for=\"item in tabs\" :eventKey=\"item.name\">{{item.name}}</tabbar-item>\n        </tabbar>\n    </div>\n</template>\n\n<script>\n    export default {\n        data() {\n            return {\n                tabs: [{\n                    name: 'Sports',\n                }, {\n                    name: 'Finance',\n                }, {\n                    name: 'Science',\n                }, {\n                    name: 'Military',\n                }],\n            };\n        },\n        methods: {\n            changeHandle(val) {\n                this.$toast(`选择了:${val}`);\n            },\n        },\n        mounted() {\n            setTimeout(() => {\n                this.tabs = [{\n                    name: 'Sports',\n                }, {\n                    name: 'Science',\n                }];\n            }, 1000);\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/views/tag.vue",
    "content": "<template>\n    <div>\n        <group-title>base</group-title>\n        <group>\n            <cell>\n                primary\n                <tag slot=\"footer\">primary</tag>\n            </cell>\n            <cell>\n                success\n                <tag slot=\"footer\" theme=\"success\">success</tag>\n            </cell>\n            <cell>\n                warning\n                <tag slot=\"footer\" theme=\"warning\">warning</tag>\n            </cell>\n            <cell>\n                danger\n                <tag slot=\"footer\" theme=\"danger\">danger</tag>\n            </cell>\n            <cell>\n                default\n                <tag slot=\"footer\" theme=\"default\">default</tag>\n            </cell>\n        </group>\n        <group-title>hollow</group-title>\n        <group>\n            <cell>\n                primary\n                <tag hollow slot=\"footer\">primary</tag>\n            </cell>\n            <cell>\n                success\n                <tag hollow slot=\"footer\" theme=\"success\">success</tag>\n            </cell>\n            <cell>\n                warning\n                <tag hollow slot=\"footer\" theme=\"warning\">warning</tag>\n            </cell>\n            <cell>\n                danger\n                <tag hollow slot=\"footer\" theme=\"danger\">danger</tag>\n            </cell>\n            <cell>\n                default\n                <tag hollow slot=\"footer\" theme=\"default\">default</tag>\n            </cell>\n        </group>\n        <group-title>shape=\"pill\"</group-title>\n        <group>\n            <cell>\n                primary\n                <tag shape=\"pill\" hollow slot=\"footer\">primary</tag>\n            </cell>\n            <cell>\n                success\n                <tag shape=\"pill\" hollow slot=\"footer\" theme=\"success\">success</tag>\n            </cell>\n            <cell>\n                warning\n                <tag shape=\"pill\" hollow slot=\"footer\" theme=\"warning\">warning</tag>\n            </cell>\n            <cell>\n                danger\n                <tag shape=\"pill\" hollow slot=\"footer\" theme=\"danger\">danger</tag>\n            </cell>\n            <cell>\n                default\n                <tag shape=\"pill\" hollow slot=\"footer\" theme=\"default\">default</tag>\n            </cell>\n        </group>\n        <group-title>sm</group-title>\n        <group>\n            <cell>\n                primary\n                <tag size=\"sm\" slot=\"footer\">primary</tag>\n            </cell>\n            <cell>\n                success\n                <tag size=\"sm\" slot=\"footer\" theme=\"success\">success</tag>\n            </cell>\n            <cell>\n                warning\n                <tag size=\"sm\" slot=\"footer\" theme=\"warning\">warning</tag>\n            </cell>\n            <cell>\n                danger\n                <tag size=\"sm\" slot=\"footer\" theme=\"danger\">danger</tag>\n            </cell>\n            <cell>\n                default\n                <tag size=\"sm\" slot=\"footer\" theme=\"default\">default</tag>\n            </cell>\n        </group>\n        <group-title>sm hollow</group-title>\n        <group>\n            <cell>\n                primary\n                <tag size=\"sm\" hollow slot=\"footer\">primary</tag>\n            </cell>\n            <cell>\n                success\n                <tag size=\"sm\" hollow slot=\"footer\" theme=\"success\">success</tag>\n            </cell>\n            <cell>\n                warning\n                <tag size=\"sm\" hollow slot=\"footer\" theme=\"warning\">warning</tag>\n            </cell>\n            <cell>\n                danger\n                <tag size=\"sm\" hollow slot=\"footer\" theme=\"danger\">danger</tag>\n            </cell>\n            <cell>\n                default\n                <tag size=\"sm\" hollow slot=\"footer\" theme=\"default\">default</tag>\n            </cell>\n        </group>\n    </div>\n</template>\n"
  },
  {
    "path": "src/scripts/views/timeline.vue",
    "content": "<template>\n    <div>\n        <group-title>base</group-title>\n        <group>\n            <cell>\n                <timeline>\n                    <timeline-item>\n                        <strong class=\"text-primary\">已签收</strong>\n                    </timeline-item>\n                    <timeline-item>快递到达泉州</timeline-item>\n                    <timeline-item>快递到达福州</timeline-item>\n                    <timeline-item>交付快递</timeline-item>\n                    <timeline-item>订单已生成</timeline-item>\n                </timeline>\n            </cell>\n        </group>\n    </div>\n</template>\n"
  },
  {
    "path": "src/scripts/views/tip.vue",
    "content": "<template>\n    <div>\n        <group-title>base</group-title>\n        <group>\n            <cell>\n                <tip>查看图文详情</tip>\n            </cell>\n        </group>\n        <group-title>type</group-title>\n        <group>\n            <cell>\n                <tip type=\"dotted\">查看图文详情</tip>\n            </cell>\n        </group>\n        <group-title>theme</group-title>\n        <group>\n            <cell>\n                <tip theme=\"primary\">查看图文详情</tip>\n            </cell>\n            <cell>\n                <tip theme=\"secondary\" type=\"dotted\">查看图文详情</tip>\n            </cell>\n        </group>\n    </div>\n</template>\n"
  },
  {
    "path": "src/scripts/views/toast.vue",
    "content": "<template>\n    <div>\n        <group-title>Base</group-title>\n        <group>\n            <cell @click=\"baseClickHandle('')\">\n                <icon class=\"fa-fw text-muted\" name=\"commenting-o\" left size=\"lg\"></icon>\n                default\n            </cell>\n            <cell @click=\"baseClickHandle('success')\">\n                <icon class=\"fa-fw text-success\" name=\"check\" left size=\"lg\"></icon>\n                success\n            </cell>\n            <cell @click=\"baseClickHandle('error')\">\n                <icon class=\"fa-fw text-danger\" name=\"exclamation-circle\" left size=\"lg\"></icon>\n                error\n            </cell>\n            <cell @click=\"baseClickHandle('warning')\">\n                <icon class=\"fa-fw text-warning\" name=\"exclamation-triangle\" left size=\"lg\"></icon>\n                warning\n            </cell>\n        </group>\n        <group-title>Position</group-title>\n        <group>\n            <cell @click=\"positionClickHandle('bottom')\">\n                <icon class=\"fa-fw text-muted\" name=\"hourglass-end\" left size=\"lg\"></icon>\n                bottom\n            </cell>\n            <cell @click=\"positionClickHandle('center')\">\n                <icon class=\"fa-fw text-muted\" name=\"hourglass-half\" left size=\"lg\"></icon>\n                center\n            </cell>\n            <cell @click=\"positionClickHandle('top')\">\n                <icon class=\"fa-fw text-muted\" name=\"hourglass-start\" left size=\"lg\"></icon>\n                top\n            </cell>\n        </group>\n    </div>\n</template>\n\n<script>\n    export default {\n\n        methods: {\n            baseClickHandle(type) {\n                this.$toast({\n                    type,\n                    message: type || 'default',\n                    position: 'bottom',\n                });\n            },\n            positionClickHandle(position) {\n                this.$toast({\n                    position,\n                    message: position,\n                });\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/scripts/views/toggle.vue",
    "content": "<template>\n    <div>\n        <group-title>Base</group-title>\n        <group>\n            <cell>\n                <toggle @change=\"changeHandle\">default</toggle>\n                <toggle slot=\"footer\" v-model=\"checked\" @change=\"changeHandle\">checked</toggle>\n            </cell>\n        </group>\n        <group-title>Disabled</group-title>\n        <group>\n            <cell>\n                <toggle disabled @change=\"changeHandle\">default</toggle>\n                <toggle disabled slot=\"footer\" :value=\"true\" @change=\"changeHandle\">checked</toggle>\n            </cell>\n        </group>\n    </div>\n</template>\n\n<script>\n    export default {\n        data() {\n            return {\n                checked: true,\n            };\n        },\n        methods: {\n            changeHandle(val) {\n                this.$toast(`选中：${val}`);\n            },\n        },\n    };\n</script>\n"
  },
  {
    "path": "src/styles/animate.scss",
    "content": "// fade\n@keyframes fadeIn {\n    from {\n        opacity: 0;\n    }\n\n    to {\n        opacity: 1;\n    }\n}\n\n@keyframes fadeOut {\n    from {\n        opacity: 1;\n    }\n\n    to {\n        opacity: 0;\n    }\n}\n\n\n// slide\n@keyframes slideInUp {\n    from {\n        transform: translate3d(0, 100%, 0);\n    }\n\n    to {\n        transform: translate3d(0, 0, 0);\n    }\n}\n\n@keyframes slideOutDown {\n    from {\n        transform: translate3d(0, 0, 0);\n    }\n\n    to {\n        visibility: hidden;\n        transform: translate3d(0, 100%, 0);\n    }\n}\n\n@keyframes slideInLeft {\n    from {\n        transform: translate3d(-100%, 0, 0);\n    }\n\n    to {\n        transform: translate3d(0, 0, 0);\n    }\n}\n\n@keyframes slideOutLeft {\n    from {\n        transform: translate3d(0, 0, 0);\n    }\n\n    to {\n        visibility: hidden;\n        transform: translate3d(-100%, 0, 0);\n    }\n}\n\n// ZoomIn\n@keyframes lightZoomIn {\n    0% {\n        opacity: .5;\n        transform: scale(.5, .5);\n    }\n\n    100% {\n        opacity: 1;\n        transform: scale(1, 1);\n    }\n}\n\n@keyframes lightZoomOut {\n    0% {\n        transform: scale(1, 1);\n    }\n\n    100% {\n        opacity: .5;\n        transform: scale(.5, .5);\n    }\n}\n"
  },
  {
    "path": "src/styles/index.scss",
    "content": "@import 'variables';\n@import 'mixins';\n@import 'modules';\n@import 'utils';\n@import 'animate';\n\n\n"
  },
  {
    "path": "src/styles/mixins/border.scss",
    "content": "// 上边框\n@mixin border-top {\n    background-image: $border-image-top;\n    background-size: 100% 1px;\n    background-repeat: no-repeat;\n    background-position: left top;\n}\n\n// 下边框\n@mixin border-bottom {\n    background-image: $border-image-bottom;\n    background-size: 100% 1px;\n    background-repeat: no-repeat;\n    background-position: left bottom;\n}\n\n// 上下边框\n@mixin border-vertical {\n    background-image: $border-image-top, $border-image-bottom;\n    background-size: 100% 1px;\n    background-repeat: no-repeat, no-repeat;\n    background-position: left top, left bottom;\n}\n\n@mixin border-left {\n    background-image: $border-image-left;\n    background-size: 1px 100%;\n    background-repeat: no-repeat;\n    background-position: left top;\n}\n\n@mixin no-border {\n    background-size: 0;\n}\n"
  },
  {
    "path": "src/styles/mixins/button.scss",
    "content": "// Button sizes\n@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {\n    padding: $padding-y $padding-x;\n    font-size: $font-size;\n    border-radius: $border-radius;\n}\n\n// Button variant\n@mixin button-variant($color, $bg-color, $border-color) {\n    $active-background: darken($bg-color, 6%);\n    $active-border: darken($border-color, 6%);\n\n    color: $color;\n    background-color: $bg-color;\n    border-color: $border-color;\n\n    &:active,\n    &.active {\n        color: $color;\n        background-color: $active-background;\n        border-color: $active-border;\n    }\n\n    &.disabled,\n    &:disabled {\n        &:hover {\n            background-color: $bg-color;\n            border-color: $border-color;\n        }\n    }\n}\n\n// Button outline variant\n@mixin button-outline-variant($color) {\n    color: $color;\n    border-color: $color;\n    background-color: transparent;\n\n    &:active,\n    &.active {\n        color: $brand-pure;\n        background-color: $color;\n    }\n\n    &.disabled,\n    &:disabled {\n        &:hover {\n            background-color: transparent;\n            border-color: $color;\n        }\n    }\n}\n"
  },
  {
    "path": "src/styles/mixins/media.scss",
    "content": "@mixin respond-to($size) {\n    $query: map-get($all-media-query-device, $size);\n\n    @if not $query {\n        @error 'No value found for `#{$size}`. Please make sure it is defined in `$allMediaDevice` map.';\n    }\n\n    @media only screen and #{if(type-of($query) == 'string', unquote($query), inspect($query))} {\n        @content;\n    }\n}\n"
  },
  {
    "path": "src/styles/mixins/navbar.scss",
    "content": "// Navbar variant\n@mixin navbar-variant($background-color, $color, $has-border) {\n    background-color: $background-color;\n    color: $color;\n\n    @if $has-border {\n        @include border-bottom();\n    }\n\n    a {\n        &,\n        &:active,\n        &:focus {\n            color: $color;\n        }\n    }\n}\n"
  },
  {
    "path": "src/styles/mixins/progressbar.scss",
    "content": "@mixin progressbar-variant($background-color) {\n    .progressbar-indicator {\n        background-color: $background-color;\n    }\n}\n"
  },
  {
    "path": "src/styles/mixins/tag.scss",
    "content": "@mixin tag-variant($background-color) {\n    background-color: $background-color;\n}\n\n@mixin tag-outline-variant($border-color, $color:$border-color) {\n    border-color: $border-color;\n    color: $color;\n}\n"
  },
  {
    "path": "src/styles/mixins/text.scss",
    "content": "// Typography\n@mixin text-emphasis-variant($parent, $color) {\n    #{$parent} {\n        color: $color !important;\n    }\n\n    a#{$parent} {\n        &:hover,\n        &:focus {\n            color: darken($color, 10%) !important;\n        }\n    }\n}\n"
  },
  {
    "path": "src/styles/mixins.scss",
    "content": "// utils\n@import 'mixins/border';\n@import 'mixins/text';\n\n@import 'mixins/button';\n@import 'mixins/navbar';\n@import 'mixins/tag';\n@import 'mixins/progressbar';\n@import 'mixins/media';\n"
  },
  {
    "path": "src/styles/modules/alert.scss",
    "content": ".alert {\n    position: fixed;\n    left: 0;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    z-index: $z-index-alert;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.alert-modal {\n    width: $alert-width;\n    max-width: $alert-max-width;\n    padding: $alert-padding;\n    background-color: $alert-bg-color;\n    border-radius: $alert-border-radius;\n    box-shadow: $alert-box-h-shadow, $alert-box-v-shadow;\n}\n\n.alert-title {\n    text-align: center;\n    font-size: $alert-title-font-size;\n    font-weight: $alert-title-font-weight;\n    color: $alert-title-color;\n}\n\n.alert-message {\n    text-align: $alert-message-text-align;\n    color: $alert-message-color;\n    font-size: $alert-message-font-size;\n    padding: $alert-message-padding;\n    line-height: $alert-message-line-height;\n}\n\n.alert-footer {\n    display: flex;\n    @include border-top;\n}\n\n\n.alert-btn {\n    flex: 1;\n    text-align: center;\n    color: $alert-btn-color;\n    font-size: $alert-btn-font-size;\n    padding: $alert-btn-padding;\n\n    &:not(:first-child) {\n        @include border-left;\n    }\n}\n\n.alert-footer-vertical {\n    flex-direction: column;\n\n    .alert-btn {\n        &:not(:first-child) {\n            @include no-border;\n        }\n\n        &:not(:last-child) {\n            @include border-bottom;\n        }\n    }\n}\n\n.zoom-enter {\n    opacity: .5;\n    transform: scale(.5, .5);\n}\n\n.zoom-enter-active {\n    animation: lightZoomIn $alert-animation-duration $alert-animation-enter-function;\n}\n\n.zoom-leave-active {\n    animation: lightZoomOut $alert-animation-duration $alert-animation-leave-function;\n}\n\n"
  },
  {
    "path": "src/styles/modules/back-to-top.scss",
    "content": ".back-to-top {\n    position: fixed;\n    right: $top-right;\n    bottom: -1.5 * $top-height;\n    z-index: $z-index-top;\n    text-align: center;\n    border-radius: 50%;\n    color: $top-color;\n    background-color: $top-bg-color;\n\n    &.active {\n        bottom: $top-bottom;\n        transition: $top-transition;\n\n        .back-to-top-icon {\n            transform: rotate(0deg);\n            transition: $top-transition;\n        }\n    }\n}\n\ni.back-to-top-icon {\n    width: $top-width;\n    height: $top-height;\n    font-size: $top-font-size;\n    line-height: $top-line-height;\n    transform: rotate(360deg);\n    transform-origin: center center;\n}\n"
  },
  {
    "path": "src/styles/modules/badge.scss",
    "content": ".badge {\n    position: relative;\n    display: inline-block;\n    vertical-align: middle;\n}\n\n.badge-gap {\n    margin-right: $badge-margin-right;\n\n    .badge-addon {\n        box-shadow: $badge-box-shadow;\n    }\n}\n\n.badge-addon {\n    position: absolute;\n    right: 0;\n    top: 0;\n    line-height: 1;\n    text-align: center;\n    border-radius: $border-radius-circle;\n    color: $badge-color;\n    padding: $badge-padding;\n    min-width: $badge-min-width;\n    min-height: $badge-min-height;\n    transform: translateX(100%) translateY(-50%);\n\n    &:not(:empty) {\n        min-width: $badge-min-width-not-empty;\n\n        // 使缩放后得到的是整数的px值\n        $width-px: $badge-min-width-not-empty * $font-size-root;\n        $scale: round($width-px * $badge-scale) / $width-px;\n        transform: translateX(50%) translateY(-50%) scale($scale);\n\n        @include respond-to(md) {\n            $width-px: $badge-min-width-not-empty * $font-size-root-md;\n            $scale: round($width-px * $badge-scale) / $width-px;\n            transform: translateX(50%) translateY(-50%) scale($scale);\n        }\n        @include respond-to(lg) {\n            $width-px: $badge-min-width-not-empty * $font-size-root-lg;\n            $scale: round($width-px * $badge-scale) / $width-px;\n            transform: translateX(50%) translateY(-50%) scale($scale);\n        }\n    }\n\n    &:last-child {\n        position: static;\n        transform: none;\n    }\n}\n"
  },
  {
    "path": "src/styles/modules/button.scss",
    "content": ".btn {\n    display: inline-block;\n    appearance: none;\n    overflow: hidden;\n    outline: 0;\n    text-align: center;\n    white-space: nowrap;\n    vertical-align: middle;\n    user-select: none;\n    border: 1px solid transparent;\n\n    @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-border-radius);\n\n    &,\n    &:active {\n        &:focus {\n            outline: 0;\n            background-image: none;\n        }\n    }\n\n    &:hover,\n    &:focus {\n        text-decoration: none;\n    }\n\n    &:disabled {\n        opacity: $btn-loading-opacity-disabled;\n\n        &:not(.btn-loading) {\n            opacity: $btn-opacity-disabled;\n        }\n    }\n\n    .loading {\n        display: inline-block;\n        vertical-align: middle;\n        margin-left: $btn-loading-gap;\n    }\n}\n\n.btn-block {\n    display: block;\n    width: 100%;\n}\n\n// Size\n.btn-sm {\n    @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);\n}\n\n.btn-lg {\n    @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);\n}\n\n// Theme\n.btn-primary {\n    @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);\n}\n\n.btn-secondary {\n    @include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border);\n}\n\n.btn-default {\n    @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);\n}\n\n// Outline\n.btn-primary-outline {\n    @include button-outline-variant($btn-primary-border);\n}\n\n.btn-secondary-outline {\n    @include button-outline-variant($btn-secondary-border);\n}\n\n.btn-default-outline {\n    @include button-outline-variant($btn-default-border);\n}\n"
  },
  {
    "path": "src/styles/modules/card.scss",
    "content": ".card {\n    background-color: $card-bg-color;\n}\n\n\n.card-body {\n    padding: $card-body-padding;\n}\n"
  },
  {
    "path": "src/styles/modules/cell.scss",
    "content": ".cell {\n    display: flex;\n    align-items: center;\n    overflow: hidden;\n    text-decoration: none;\n    color: $cell-color;\n    padding: $cell-padding;\n    @include border-bottom();\n    background-position: $cell-gap-left 100%;\n    background-color: $cell-bg-color;\n}\n\n.cell-no-gap {\n    background-position: 0 100%;\n}\n\n.cell-link {\n    &:focus {\n        outline: 0;\n        background-image: none;\n        color: $cell-color;\n    }\n\n    &:active {\n        background-color: $cell-bg-color-active;\n    }\n}\n\n.cell-disabled {\n    opacity: .6;\n    // background-color: $cell-bg-color-disabled;\n}\n\n.cell-header {\n    padding-right: $cell-children-gap;\n}\n\n.cell-body {\n    flex: 1;\n    display: block;\n}\n\n.cell-footer {\n    padding-left: $cell-children-gap;\n}\n\n.cell-arrow {\n    color: $cell-arrow-color;\n    margin: $cell-arrow-margin;\n}\n"
  },
  {
    "path": "src/styles/modules/checkbox.scss",
    "content": ".checkbox,\n.radio {\n    user-select: none;\n    display: inline-block;\n}\n\n// shape\n.checkbox-square {\n    .checkbox-addon {\n        border-radius: $checkbox-square-border-radius;\n    }\n}\n\n.checkbox-circle {\n    .checkbox-addon {\n        border-radius: 50%;\n    }\n}\n\n// checkbox\n.checkbox-input,\n.radio-input {\n    display: none;\n\n    &:checked + .checkbox-addon,\n    &:checked + .radio-addon {\n        border-color: $checkbox-border-color-checked;\n        background-color: $checkbox-bg-color-checked;\n\n        i {\n            transform: scale(1);\n        }\n    }\n\n    &:disabled + .checkbox-addon,\n    &:disabled + .radio-addon, {\n        border-color: $checkbox-border-color-disabled;\n        background-color: $checkbox-bg-color-disabled;\n    }\n}\n\n// addon\n.checkbox-addon,\n.radio-addon {\n    font-size: 0;\n    vertical-align: middle;\n    display: inline-block;\n    color: $checkbox-color;\n    padding: $checkbox-padding;\n    background-color: $checkbox-bg-color;\n    border: 1px solid $checkbox-border-color;\n    transition: $checkbox-transition;\n}\n\n.checkbox-addon {\n    line-height: 1;\n\n    i {\n        vertical-align: middle;\n        transform: scale(0);\n        transform-origin: 50% 50%;\n        transition: $checkbox-transition;\n        font-size: $checkbox-addon-font-size;\n        width: $checkbox-addon-font-size;\n        height: $checkbox-addon-font-size;\n        line-height: $checkbox-addon-font-size;\n        padding-top: $checkbox-addon-padding-top;\n    }\n}\n\n.radio-default .radio-addon {\n    border-radius: 50%;\n    padding: $radio-addon-padding;\n    line-height: 1;\n\n    i {\n        text-align: center;\n        vertical-align: middle;\n        display: inline-block;\n        width: $radio-addon-width;\n        height: $radio-addon-height;\n        background: $checkbox-color;\n        border-radius: 50%;\n        transform: scale(0);\n        transform-origin: 50% 50%;\n        transition: $checkbox-transition;\n    }\n}\n\n.radio-square .radio-addon {\n    border-radius: $checkbox-square-border-radius;\n}\n.radio-circle .radio-addon {\n    border-radius: 50%;\n}\n\n.radio-square .radio-addon,\n.radio-circle .radio-addon {\n    line-height: 1;\n\n    i {\n        vertical-align: middle;\n        transform: scale(0);\n        transform-origin: 50% 50%;\n        transition: $checkbox-transition;\n        font-size: $checkbox-addon-font-size;\n        width: $checkbox-addon-font-size;\n        height: $checkbox-addon-font-size;\n        line-height: $checkbox-addon-font-size;\n        padding-top: $checkbox-addon-padding-top;\n    }\n}\n\n// text\n.checkbox-label,\n.radios-label {\n    display: inline-block;\n    margin-left: $checkbox-label-gap;\n}\n\n.checkbox + .checkbox,\n.radio + .radio {\n    margin-left: $checkbox-gap;\n}\n"
  },
  {
    "path": "src/styles/modules/date-picker.scss",
    "content": "$ColorBlue: #1287FF;\n$ColorGrey: #BCC1CC;\n\n.date-picker {\n\twidth: 18.75em;\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n\n    .header {\n        width: 100%;\n        .header-cnt {\n            width: 9em;\n            padding: .5em 0;\n            margin: 0 auto;\n        \n\n            .btn {\n                // width: 2.5em;\n                // height: 2.5em;\n                // line-height: 2.5em;\n                border: none;\n                border-radius: 1.5em;\n                // padding: .35rem .7rem;\n                font-size: .6em;\n\n                &.btn-left {\n                    float: left;\n                    padding: .35em .9em .4em .7em;\n                }\n                &.btn-right {\n                    float: right;\n                    padding: .35em .7em .4em .9em;\n                }\n            }\n\n        \t// font-size: .8em; 改元素其他属性基于此综合计算\n        \tdiv {\n                height: 1.875em;\n                line-height: 1.875em;\n        \t\tfont-size: .8em; // 32px\n    \t\t    font-weight: 500;\n                text-align: center;\n        \t}\n        }\n    }\n\n    table {\n        display: table;\n        table-layout: fixed;\n        width: 100%;\n    }\n\n\n    // font-size: .7em; 其子元素属性基于此综合计算\n    .date-table {\n        font-size: .7em; // 28px\n        user-select: none;\n\n        td {\n            height: 3.9em;\n            padding: .25em 0;\n            box-sizing: border-box;\n            text-align: center;\n            cursor: pointer;\n            position: relative;\n\n            &.prev-month,\n            &.next-month {\n            }\n\n            &.disabled div {\n                cursor: not-allowed;\n            }\n\n            div {\n                height: 2.2em;\n                box-sizing: border-box;\n            }\n\n            span {\n                width: 2.2em;\n                height: 2.2em;\n                line-height: 2.2em;\n                display: block;\n                margin: 0 auto;\n                position: absolute;\n                left: 50%;\n                transform: translateX(-50%);\n                border-radius: 50%;\n            }\n\n            &.today {\n                position: relative;\n            }\n\n            &.in-range div,\n            &.in-range div:hover {\n            }\n\n            &.start-date div {\n                border-top-left-radius: 1em;\n                border-bottom-left-radius: 1em;\n            }\n            &.end-date div {\n                border-top-right-radius: 1em;\n                border-bottom-right-radius: 1em;\n            }\n\n            &.end-date div,\n            &.start-date div {\n            }\n\n            &.end-date span,\n            &.start-date span {\n            }\n        }\n\n        th {\n            padding-top: .3em;\n            font-weight: 400;\n            text-align: center;\n        }\n\n\n    }\n}\n\n\n// Size\n.date-picker-base {\n    font-size: $datepicker-font-size-base;\n}\n\n// Theme\n.date-picker-default {\n    .header {\n        background-color: #FFF;\n\n        .btn {\n            background-color: #f5f5f9;\n            color: #737A89;\n        }\n    }\n\n    table {\n        background-color: #f5f5f9;\n    }\n\n    .date-table {\n        td {\n            color: #22252A;\n\n            &.prev-month,\n            &.next-month {\n                color: $ColorGrey;\n            }\n\n            &.disabled div {\n                    background-color: #EEF1F6;\n                    color: #FFF;\n            }\n\n            &.today {\n                span {\n                    border: 1px solid #22252A;\n                }\n            }\n\n            &.in-range div,\n            &.in-range div:hover {\n                background-color: $ColorBlue;\n                color: #FFF;\n            }\n\n            &.end-date div,\n            &.start-date div {\n                color: #FFF;\n            }\n\n            &.end-date span,\n            &.start-date span {\n                background-color: $ColorBlue;\n            }\n        }\n\n        th {\n            color: $ColorGrey;\n        }\n    }\n}"
  },
  {
    "path": "src/styles/modules/drawer.scss",
    "content": ".drawer {\n    display: flex;\n    color: $drawer-color;\n    background-color: $drawer-bg-color;\n    padding: $drawer-padding;\n    @include border-bottom();\n}\n\n.drawer-item {\n    flex: 1;\n    text-align: center;\n    transition: $drawer-transition;\n\n    &:not(:first-child) {\n        @include border-left;\n    }\n\n    &.active {\n        color: $drawer-color-active;\n\n        .drawer-item-icon {\n            color: $drawer-color-active;\n            transform-origin: 50% 50%;\n            transform: rotate(180deg);\n        }\n    }\n\n    &.disabled {\n        opacity: $drawer-opacity-disabled;\n    }\n}\n\n.drawer-item-icon {\n    color: $drawer-icon-color;\n    margin-left: $drawer-icon-margin-right;\n    transition: $drawer-transition;\n}\n"
  },
  {
    "path": "src/styles/modules/group.scss",
    "content": ".group {\n    padding-top: 1px;\n    padding-bottom: 1px;\n    margin: $group-margin;\n    @include border-vertical();\n    background-color: $cell-bg-color;\n\n\n    > .cell:last-child {\n        background-size: 0;\n    }\n}\n\n// title\n.group-title {\n    padding: $group-title-padding;\n\n    + .group {\n        margin: 0;\n    }\n}\n"
  },
  {
    "path": "src/styles/modules/hrule.scss",
    "content": ".hr {\n    border-width: 0;\n    border-top-width: 1px;\n    border-style: solid;\n    border-color: $hr-color;\n    transform: scaleY(.5);\n    transform-origin: 0 0;\n    margin: $hr-margin;\n}\n\n"
  },
  {
    "path": "src/styles/modules/inline-selector.scss",
    "content": ".inline-selector {\n    display: block;\n}\n\n.inline-selector-option {\n    line-height: 1;\n    padding: $inline-selector-option-padding;\n    transition: $inline-selector-transition;\n    min-width: $inline-selector-option-min-width;\n\n    &.disabled {\n        border-style: dashed;\n    }\n}\n"
  },
  {
    "path": "src/styles/modules/input-number.scss",
    "content": ".input-number {\n    display: inline-block;\n}\n\n.input-number-disabled {\n    opacity: .6;\n\n    .input-number-input {\n        background-color: $number-input-bg-color-disabled;\n    }\n}\n\n.input-number-minus,\n.input-number-plus {\n    text-align: center;\n    display: inline-block;\n    border-radius: 50%;\n    appearance: none;\n    overflow: hidden;\n    outline: 0;\n    white-space: nowrap;\n    vertical-align: middle;\n    user-select: none;\n    font-weight: bold;\n    height: $number-btn-size;\n    width: $number-btn-size;\n    line-height: $number-btn-line-height;\n    border: 1px solid $number-border-color;\n\n    &,\n    &:active,\n    &.active {\n        &:focus {\n            outline: 0;\n            background-image: none;\n        }\n    }\n\n    &:hover,\n    &:focus {\n        text-decoration: none;\n    }\n\n    &.disabled {\n        opacity: $btn-opacity-disabled;\n    }\n}\n\n.input-number-plus:not([href]) {\n    &,\n    &:active,\n    &:focus,\n    &:hover {\n        color: $number-plus-color;\n        background-color: $number-plus-bg-color;\n    }\n\n    &:active:not(.disabled) {\n        background-color: $number-plus-bg-color-active;\n    }\n}\n\n.input-number-minus:not([href]) {\n    &,\n    &:focus,\n    &:hover {\n        color: $number-minus-color;\n        background-color: $number-minus-bg-color;\n    }\n\n    &:active:not(.disabled) {\n        color: $number-minus-color-active;\n        background-color: $number-minus-bg-color-active;\n    }\n}\n\n.input-number-input {\n    text-align: center;\n    vertical-align: middle;\n    width: $number-input-width;\n    padding: $number-input-padding;\n    margin: $number-input-margin;\n    background: $number-input-bg-color;\n    -webkit-appearance: none;\n    -webkit-box-shadow: none;\n    outline: none;\n    line-height: 1;\n    background-image: none;\n    border: 1px solid $number-input-border-color;\n}\n"
  },
  {
    "path": "src/styles/modules/input-text.scss",
    "content": ".input-text {\n    display: flex;\n    align-items: center;\n}\n\n.input-text-input {\n    flex: 1;\n    border: 0;\n    padding: 0;\n    height: 100%;\n    font-size: $input-font-size;\n    background-color: transparent;\n\n    &:focus {\n        outline: none;\n    }\n}\n\ni.input-text-clear {\n    opacity: .2;\n    transition: all .2s ease;\n\n    + i {\n        margin-left: $input-text-icon-gap;\n    }\n}\n"
  },
  {
    "path": "src/styles/modules/input-textarea.scss",
    "content": ".textarea-input {\n    border: 0;\n    width: 100%;\n    resize: none;\n    display: block;\n    appearance: none;\n    user-select: auto;\n    padding: $textarea-padding;\n\n    &:focus {\n        outline: none;\n    }\n}\n\n.textarea-counter {\n    text-align: right;\n    transform-origin: right bottom;\n    transform: scale($textarea-counter-scale);\n    color: $textarea-counter-color;\n    padding: $textarea-counter-padding;\n}\n"
  },
  {
    "path": "src/styles/modules/loading.scss",
    "content": ".loading {\n    width: $loading-width;\n    animation: rotate $loading-animation-duration linear infinite;\n}\n\n.loading-path {\n    stroke-dasharray: 1,100;\n    stroke-dashoffset: 0;\n    stroke-linecap: round;\n    stroke: $loading-path-stroke;\n    stroke-width: $loading-path-stroke-width;\n    animation: dash $loading-path-animation-duration ease-in-out infinite;\n}\n\n.loading-primary {\n    .loading-path {\n        stroke: $loading-path-stroke-primary;\n    }\n}\n\n.loading-secondary {\n    .loading-path {\n        stroke: $loading-path-stroke-secondary;\n    }\n}\n\n.loading-sm {\n    width: $loading-width-sm;\n}\n\n\n\n@keyframes rotate {\n    100% {\n        transform: rotate(1turn);\n    }\n}\n\n@keyframes dash {\n    0% {\n        stroke-dasharray: 1,150;\n        stroke-dashoffset: 0;\n    }\n\n    50% {\n        stroke-dasharray: 90,150;\n        stroke-dashoffset: -35;\n    }\n\n    100% {\n        stroke-dasharray: 90,150;\n        stroke-dashoffset: -124;\n    }\n}\n"
  },
  {
    "path": "src/styles/modules/loadmore.scss",
    "content": ".loadmore {\n    overflow: hidden;\n}\n\n.loadmore-content {\n    &.dropped {\n        transition: $loadmore-dropped-transition;\n    }\n}\n\n.loadmore-hint {\n    text-align: center;\n    height: $loadmore-hint-height;\n    line-height: $loadmore-hint-height;\n\n    .loading {\n        vertical-align: middle;\n    }\n}\n\n.loadmore-hint-top {\n    margin-top: $loadmore-hint-margin;\n}\n\n.loadmore-hint-bottom {\n    margin-bottom: $loadmore-hint-margin;\n}\n\n.loadmore-text {\n    vertical-align: middle;\n}\n"
  },
  {
    "path": "src/styles/modules/mask.scss",
    "content": ".mask {\n    position: fixed;\n    left: 0;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    background-color: $mask-bg-color;\n    z-index: $z-index-mask;\n}\n\n\n.fade-enter {\n    opacity: 0;\n}\n\n.fade-enter-active {\n    animation: fadeIn $mask-animation-enter-duration $mask-animation-enter-function;\n}\n\n.fade-leave-active {\n    animation: fadeOut $mask-animation-leave-duration $mask-animation-leave-function;\n}\n"
  },
  {
    "path": "src/styles/modules/media.scss",
    "content": ".media {\n    display: flex;\n    background-color: $media-bg-color;\n}\n\n\n.media-object {\n    display: block;\n\n    &:first-child {\n        padding-right: $media-object-gap;\n    }\n\n    &:last-child {\n        padding-left: $media-object-gap;\n    }\n}\n\n.media-body {\n    flex: 1;\n    display: block;\n}\n"
  },
  {
    "path": "src/styles/modules/navbar.scss",
    "content": ".navbar {\n    display: flex;\n    user-select: none;\n    padding: $navbar-padding;\n    height: $navbar-height;\n    line-height: $navbar-line-height;\n\n    a {\n\n        &:active,\n        &.active {\n            &:focus {\n                outline: 0;\n                background-image: none;\n            }\n\n        }\n\n        &:hover,\n        &:focus {\n            text-decoration: none;\n        }\n    }\n}\n\n.navbar-header {\n    flex: $navbar-header-flex;\n    padding: $navbar-header-padding;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.navbar-body {\n    flex: $navbar-body-flex;\n    padding: $navbar-body-padding;\n    text-align: center;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.navbar-footer {\n    flex: $navbar-footer-flex;\n    padding: $navbar-footer-padding;\n    text-align: right;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n// theme\n.navbar-primary {\n    @include navbar-variant($navbar-primary-bg-color, $navbar-primary-color, false);\n}\n\n.navbar-default {\n    @include navbar-variant($navbar-default-bg-color, $navbar-default-color, true);\n}\n"
  },
  {
    "path": "src/styles/modules/navigation.scss",
    "content": ".navigation {\n    display: flex;\n    align-items: center;\n    @include border-top();\n    height: $navigation-height;\n    background-color: $navigation-bg-color;\n}\n\n.navigation-item {\n    flex: 1;\n    display: flex;\n    height: 100%;\n    text-align: center;\n    color: $navigation-color;\n    align-items: center;\n    flex-direction: column;\n    justify-content: center;\n\n    &.active {\n        color: $navigation-color-active;\n    }\n}\n\n.navigation-item-label {\n    &:not(:first-child) {\n        margin: $navigation-margin;\n        transform: scale($navigation-label-scale);\n    }\n}\n"
  },
  {
    "path": "src/styles/modules/picker.scss",
    "content": ".picker {\n    width: 100%;\n    display: block;\n    position: relative;\n    overflow: hidden;\n    background: $picker-bg-color;\n    height: $picker-items-count * $picker-item-height;\n}\n\n.picker-sm {\n    height: $picker-items-count-sm * $picker-item-height;\n\n    .picker-list {\n        padding-top: ($picker-items-count-sm - 1) / 2 * $picker-item-height;\n    }\n\n    .picker-mask {\n        background-image: $picker-mask-bg-image-sm;\n        background-size: 100% $picker-item-height * ($picker-items-count-sm - 1) / 2;\n    }\n}\n\n.picker-lg {\n    height: $picker-items-count-lg * $picker-item-height;\n\n    .picker-list {\n        padding-top: ($picker-items-count-lg - 1) / 2 * $picker-item-height;\n    }\n\n    .picker-mask {\n        background-image: $picker-mask-bg-image-lg;\n        background-size: 100% $picker-item-height * ($picker-items-count-lg - 1) / 2;\n    }\n}\n\n.picker-mask {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    z-index: 2;\n    background-image: $picker-mask-bg-image;\n    background-size: 100% $picker-item-height * ($picker-items-count - 1) / 2;\n    background-position: top, bottom;\n    background-repeat: no-repeat;\n}\n\n.picker-indicator {\n    position: absolute;\n    left: 0;\n    top: 50%;\n    width: 100%;\n    height: $picker-tap-height;\n    transform: translateY(-50%);\n    @include border-vertical;\n}\n\n.picker-list {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    text-align: center;\n    padding-top: ($picker-items-count - 1) / 2 * $picker-item-height;\n    transition: $picker-list-transition;\n\n    &.active {\n        transition-duration: 0s;\n    }\n}\n\n.picker-list-item {\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    backface-visibility: hidden;\n    height: $picker-item-height;\n    line-height: $picker-item-line-height;\n    font-size: $picker-item-font-size;\n    padding: $picker-item-padding;\n    transition: $picker-item-transition;\n\n    &.active {\n        font-size: $picker-item-font-size-active;\n        font-weight: $picker-item-font-weight-active;\n    }\n}\n"
  },
  {
    "path": "src/styles/modules/progressbar.scss",
    "content": ".progressbar {\n    height: $progressbar-height;\n    overflow: hidden;\n    background-color: $progressbar-bg-color;\n    border-radius: $progressbar-border-radius;\n    box-shadow: $progressbar-box-shadow;\n}\n\n.progressbar-indicator {\n    float: left;\n    width: 0;\n    height: 100%;\n    text-align: center;\n    line-height: $progressbar-height;\n    font-size: $progressbar-indicator-font-size;\n    color: $progressbar-indicator-color;\n    box-shadow: $progressbar-indicator-box-shadow;\n    transition: $progressbar-indicator-transition;\n}\n\n.progressbar-sm {\n    height: $progressbar-height-sm;\n    border-radius: $progressbar-border-radius-sm;\n\n    .progressbar-indicator {\n        font-size: 0;\n    }\n}\n\n.progressbar-primary {\n    @include progressbar-variant($progressbar-primary-bg);\n}\n\n.progressbar-success {\n    @include progressbar-variant($progressbar-success-bg);\n}\n\n.progressbar-warning {\n    @include progressbar-variant($progressbar-warning-bg);\n}\n\n.progressbar-danger {\n    @include progressbar-variant($progressbar-danger-bg);\n}\n\n\n.progressbars {\n    width: 100%;\n    height: 1.5em;\n    position: relative;\n\n    .node {\n        position: absolute;\n        z-index: 3;\n        top: .35em;\n        width: .8em;\n        height: .8em;\n\n        &.dot {\n            background-color: #FFF;\n            -webkit-border-radius: .4em;\n            border-radius: .4em;\n            -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n            border: .25em solid;\n\n            &.active {\n                // background-color: #6974A0;\n            }\n            &.current {\n\n            }\n        }\n\n        &.circle {\n            border-radius: .4em;\n        }\n\n        &.check-circle {\n            border-radius: .4em;\n\n            &::after {\n                content: '';\n                width: .24em;\n                height: .4em;\n                border-bottom: 1px solid #FFF;\n                border-right: 1px solid #FFF;\n                -webkit-transform: rotate(45deg);\n                -moz-transform: rotate(45deg);\n                transform: rotate(45deg);\n                position: absolute;\n                left: .26em;\n                top: .15em;\n            }\n        }\n\n    }\n\n    .line-bg {\n        width: 100%;\n        height: .5em;\n        border-radius: .25em;\n        position: absolute;\n        z-index: 1;\n        top: .5em;\n        background-color: #DEE0E8;\n\n        .line-progress {\n            height: 100%;\n            background-color: #6974A0;\n            border-radius: .25em;\n        }\n    }\n\n    .info {\n        text-align: center;\n        font-size: 1em;\n        position: absolute;\n        top: 1em;\n        left: 0;\n        transform: translateX(-50%);\n    }\n\n    &.progressbars-lg {\n        font-size: $progressbars-font-size-lg;\n    }\n    &.progressbars-sm {\n        font-size: $progressbars-font-size-sm;\n    }\n    &.progressbars-xsm {\n        font-size: $progressbars-font-size-sm;\n\n        .line-bg {\n            height: .2em;\n            border-radius: .1em;\n\n            .line-progress {\n                border-radius: .1em;\n                height: 100%;\n            }\n        }\n        .node {\n            top: .15em;\n        }\n    }\n}\n"
  },
  {
    "path": "src/styles/modules/searchbar.scss",
    "content": ".searchbar {\n    display: flex;\n    align-items: center;\n\n    &.active {\n        .searchbar-input-field {\n            width: auto;\n            flex: 1;\n        }\n\n        .searchbar-input-placeholder {\n            flex: initial;\n            width: $searchbar-placeholder-width;\n        }\n\n        .searchbar-btn {\n            width: auto;\n            padding: $searchbar-btn-padding;\n        }\n\n        .searchbar-input-clear {\n            width: auto;\n            overflow: visible;\n            padding: $searchbar-clear-padding;\n        }\n    }\n}\n\n.searchbar-input {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    padding: $searchbar-padding;\n    border: 1px solid $searchbar-border-color;\n    border-radius: $searchbar-border-radius;\n}\n\n.searchbar-input-field {\n    height: 100%;\n    outline: none;\n    border: 0;\n    width: 0;\n    overflow: hidden;\n    white-space: nowrap;\n    background-color: transparent;\n    transition: $searchbar-transition;\n\n}\n\n.searchbar-input-placeholder {\n    flex: 1;\n    text-align: center;\n    overflow: visible;\n    white-space: nowrap;\n    opacity: $searchbar-placeholder-opacity;\n    transition: $searchbar-transition;\n\n\n    i {\n        vertical-align: middle;\n    }\n}\n\n.searchbar-input-clear {\n    width: 0;\n    overflow: hidden;\n    white-space: nowrap;\n    opacity: $searchbar-clear-opacity;\n}\n\n.searchbar-btn {\n    width: 0;\n    overflow: hidden;\n    white-space: nowrap;\n    transition: $searchbar-transition;\n}\n"
  },
  {
    "path": "src/styles/modules/segmented-control.scss",
    "content": ".segmented-control {\n    font-size: 0;\n    display: inline-block;\n    border: 1px solid $segmented-control-border-color;\n    border-radius: $segmented-control-border-radius;\n    background-color: $segmented-control-bg-color;\n}\n\n.segmented-control-item {\n    display: inline-block;\n    color: $segmented-control-color;\n    font-size: $segmented-control-item-font-size;\n    padding: $segmented-control-item-padding;\n    transition: $segmented-control-transition;\n\n    &.active {\n        color: $segmented-control-color-active;\n        background-color: $segmented-control-bg-color-active;\n    }\n\n    &.disabled {\n        opacity: $segmented-control-opacity-disabled;\n    }\n}\n\n"
  },
  {
    "path": "src/styles/modules/selector.scss",
    "content": ".selector {\n    > .selector-option:last-child {\n        background-size: 0;\n    }\n}\n\n.selector-option {\n    transition: $selector-color-transition;\n\n    &.active {\n        color: $selector-color-active;\n\n        .selector-icon {\n            transform: scale(1);\n        }\n    }\n}\n\ni.selector-icon {\n    transform: scale(0);\n    transform-origin: 50% 50%;\n    color: $selector-icon-color;\n    transition: $selector-color-transition;\n}\n"
  },
  {
    "path": "src/styles/modules/sidelip.scss",
    "content": ".sidelip {\n    position: fixed;\n    left: 0;\n    top: 0;\n    display: block;\n    height: 100%;\n    overflow-y: auto;\n    -webkit-overflow-scrolling : touch;\n    width: $sidelip-width;\n    z-index: $z-index-sidelip;\n    background-color: $sidelip-bg-color;\n}\n\n.slide-left-enter {\n    transform: translate3d(-100%, 0, 0);\n}\n\n.slide-left-enter-active {\n    animation: slideInLeft $sidelip-animation-enter-duration $sidelip-animation-enter-function;\n}\n\n.slide-left-leave-active {\n    animation: slideOutLeft $sidelip-animation-leave-duration $sidelip-animation-leave-function;\n}\n"
  },
  {
    "path": "src/styles/modules/slideup.scss",
    "content": ".slideup {\n    position: fixed;\n    left: 0;\n    bottom: 0;\n    width: 100%;\n    background-color: $slide-bg-color;\n    z-index: $z-index-slide;\n}\n\n.slideup-header {\n    padding: $slide-header-padding;\n    @include border-bottom;\n}\n\n.slideup-body {\n    overflow-y: auto;\n    -webkit-overflow-scrolling : touch;\n    padding: $slide-body-padding;\n    min-height: $slide-min-height;\n    max-height: $slide-max-height;\n}\n\n.slide-up-enter {\n    transform: translate3d(0, 100%, 0);\n}\n\n.slide-up-enter-active {\n    animation: slideInUp $slide-animation-enter-duration $slide-animation-enter-function;\n}\n\n.slide-up-leave-active {\n    animation: slideOutDown $slide-animation-leave-duration $slide-animation-leave-function;\n}\n"
  },
  {
    "path": "src/styles/modules/stepbar.scss",
    "content": ".stepbar {\n    display: flex;\n    align-items: center;\n}\n\n.stepbar-item {\n    flex: 1;\n    display: flex;\n    align-items: center;\n\n    .fa {\n        font-size: $stepbar-item-addon-icon-font-size;\n        line-height: $stepbar-item-addon-size;\n    }\n}\n\n.stepbar-line {\n    flex: 1;\n    height: $stepbar-line-height;\n    border-top: $stepbar-line-height solid $stepbar-line-border-color;\n    transition: $stepbar-line-transition;\n\n    &:first-child {\n        margin-right: $stepbar-gap;\n    }\n\n    &:last-child {\n        margin-left: $stepbar-gap;\n    }\n\n    &.active {\n        border-color: $stepbar-line-border-color-active;\n    }\n}\n\n.stepbar-item-addon {\n    text-align: center;\n    color: $stepbar-item-addon-color;\n    width: $stepbar-item-addon-size;\n    height: $stepbar-item-addon-size;\n    line-height: $stepbar-item-addon-line-height;\n    border: $stepbar-item-addon-border-width solid $stepbar-item-addon-border-color;\n    border-radius: 50%;\n    transition: $stepbar-item-addon-transition;\n\n    &.active {\n        color: $stepbar-item-addon-color-active;\n        background: $stepbar-item-addon-bg-active;\n        border-color: $stepbar-item-addon-border-color-active;\n    }\n\n    &.finished {\n        color: $stepbar-item-addon-color-finished;\n        border-color: $stepbar-item-addon-border-color-finished;\n    }\n}\n\n.stepbar-item-title {\n    color: $stepbar-item-addon-title-color;\n    margin: 0 $stepbar-gap;\n\n    &.active {\n        color: $stepbar-item-addon-title-color-active;\n        font-weight: $stepbar-item-addon-title-font-weight-active;\n    }\n\n    &.finished {\n        color: $stepbar-item-addon-title-color-active;\n    }\n}\n"
  },
  {
    "path": "src/styles/modules/sticky.scss",
    "content": ".sticky-affix {\n    position: fixed;\n    z-index: 999;\n}\n\n.demo-sticky {\n    display: inline-block;\n    color: #fff;\n    padding: 10px 30px;\n    text-align: center;\n    background: rgba(0,153,229,.9);\n}\n"
  },
  {
    "path": "src/styles/modules/swipe.scss",
    "content": ".swipe {\n    overflow: hidden;\n    position: relative;\n}\n\n.swipe-indicators {\n    position: absolute;\n    left: 50%;\n    bottom: $swipe-indicators-bottom;\n    transform: translateX(-50%);\n}\n\n.swipe-indicator {\n    display: inline-block;\n    border-radius: 50%;\n    padding: $swipe-indicator-padding;\n    border: 1px solid $swipe-indicator-border-color;\n    margin: $swipe-indicator-margin;\n    opacity: $swipe-indicator-opacity;\n    transition: background-color $swipe-indicator-transition-duration $swipe-indicator-transition-function;\n\n    &.active {\n        background-color: $swipe-indicator-bg-color-active;\n    }\n}\n\n.swipe-items {\n    height: 100%;\n}\n\n.swipe-item {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    transform: translateX(-100%);\n}\n"
  },
  {
    "path": "src/styles/modules/tabbar.scss",
    "content": ".tabbar {\n    position: relative;\n    display: flex;\n    height: $tabbar-height;\n    margin-bottom: $tabbar-margin-bottom;\n    background-color: $tabbar-bg-color;\n    @include border-bottom();\n}\n\n.tabbar-item {\n    flex: 1;\n    height: $tabbar-height;\n    line-height: $tabbar-line-height;\n    text-align: center;\n    transition: $tabbar-transition;\n\n    &.active {\n        color: $tabbar-item-color-active;\n        border-bottom-color: $tabbar-item-border-color-active;\n    }\n\n    &.disabled {\n        opacity: $tabbar-opacity-disabled;\n    }\n}\n\n.tabbar-indicator {\n    display: block;\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    background-color: $brand-primary;\n    height: $tabbar-item-border-width;\n    transition: $tabbar-transition;\n}\n"
  },
  {
    "path": "src/styles/modules/tag.scss",
    "content": ".tag {\n    display: inline-block;\n    padding: $tag-padding;\n    color: $tag-color;\n    text-align: center;\n    white-space: nowrap;\n    line-height: 1;\n    border: 1px solid transparent;\n    border-radius: $tag-border-radius;\n}\n\n.tag-sm {\n    padding: $tag-padding-sm;\n    transform-origin: 0 50%;\n    transform: scale($tag-scale-sm);\n}\n\n.tag-primary { @include tag-variant($tag-primary-bg); }\n.tag-success { @include tag-variant($tag-success-bg); }\n.tag-warning { @include tag-variant($tag-warning-bg); }\n.tag-danger { @include tag-variant($tag-danger-bg); }\n.tag-default { @include tag-variant($tag-default-bg); }\n\n\n.tag-outline-primary { @include tag-outline-variant($tag-primary-bg); }\n.tag-outline-success { @include tag-outline-variant($tag-success-bg); }\n.tag-outline-warning { @include tag-outline-variant($tag-warning-bg); }\n.tag-outline-danger { @include tag-outline-variant($tag-danger-bg); }\n.tag-outline-default { @include tag-outline-variant($tag-default-bg, $tag-default-color); }\n"
  },
  {
    "path": "src/styles/modules/timeline.scss",
    "content": ".timeline {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.timeline-item {\n    position: relative;\n    padding-bottom: $timeline-item-padding-bottom;\n\n    &:last-child {\n        padding-bottom: 0;\n\n        .timeline-item-line {\n            display: none;\n        }\n    }\n\n    &.active {\n        .timeline-item-addon {\n            top: 0;\n            width: $timeline-item-addon-size-active;\n            height: $timeline-item-addon-size-active;\n            border-color: $timeline-item-addon-border-color;\n            background: $timeline-item-addon-bg;\n\n            &::after {\n                width: $timeline-item-addon-dot-size-active;\n                height: $timeline-item-addon-dot-size-active;\n                background: $timeline-item-addon-dot-bg-active;\n            }\n        }\n    }\n}\n\n.timeline-item-addon {\n    position: absolute;\n    top: ($timeline-item-addon-size-active - $timeline-item-addon-size) / 2;\n    left: 0;\n    z-index: 2;\n    border: $timeline-item-addon-border-width solid transparent;\n    border-radius: 50%;\n    width: $timeline-item-addon-size-active;\n    height: $timeline-item-addon-size;\n\n    &::after {\n        content: ' ';\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        margin: auto;\n        border-radius: 50%;\n        width: $timeline-item-addon-dot-size;\n        height: $timeline-item-addon-dot-size;\n        background: $timeline-item-addon-dot-bg;\n    }\n\n}\n\n.timeline-item-line {\n    height: 100%;\n    position: absolute;\n    top: $timeline-item-addon-size;\n    left: $timeline-item-addon-size-active / 2;\n    border-left: $timeline-item-line-width solid $timeline-item-line-color;\n}\n\n.timeline-item-body {\n    color: $timeline-item-body-color;\n    display: inline-block;\n    line-height: $timeline-item-body-line-height;\n    padding-left: $timeline-item-body-padding-left;\n}\n"
  },
  {
    "path": "src/styles/modules/tip.scss",
    "content": ".tip {\n    display: flex;\n    align-items: center;\n    padding: $tip-padding;\n\n    .hr {\n        flex: 1;\n    }\n}\n\n.tip-label {\n    color: $tip-label-color;\n    padding: $tip-label-padding;\n}\n"
  },
  {
    "path": "src/styles/modules/toast.scss",
    "content": ".toast {\n    position: fixed;\n    text-align: center;\n    color: $toast-color;\n    z-index: $z-index-toast;\n    max-width: $toast-max-width;\n    background: $toast-bg;\n    padding: $toast-padding;\n    font-size: $toast-font-size;\n    border-radius: $toast-border-radius;\n\n    .loading {\n        margin: $toast-loading-margin;\n    }\n}\n\n.toast-top {\n    left: 50%;\n    top: $toast-position-gap;\n    transform: translate(-50%, 0);\n}\n\n.toast-bottom {\n    left: 50%;\n    bottom: $toast-position-gap;\n    transform: translate(-50%, 0);\n}\n\n.toast-center {\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n}\n\n.toast-lg {\n    padding: $toast-padding-lg;\n    border-radius: $toast-border-radius-lg;\n}\n\n\n.toast-icon {\n    font-size: $toast-icon-font-size;\n    margin-bottom: $toast-icon-margin-bottom;\n}\n\n.toast-message {\n    line-height: 1;\n}\n\n.toast-fade-enter {\n    opacity: 0;\n}\n\n.toast-fade-enter-active {\n    animation: fadeIn $toast-animation-enter-duration $toast-animation-enter-function;\n}\n\n.toast-fade-leave-active {\n    animation: fadeOut $toast-animation-leave-duration $toast-animation-leave-function;\n}\n"
  },
  {
    "path": "src/styles/modules/toggle.scss",
    "content": ".toggle {\n    display: inline-block;\n    position: relative;\n}\n\n.toggle-input {\n    display: none;\n\n    &:checked + .toggle-addon {\n        background-color: $toggle-addon-bg-color-checked;\n\n        i {\n            transform: translateX($toggle-width - $toggle-addon-size - $toggle-padding * 2);\n        }\n    }\n\n    &:disabled + .toggle-addon {\n        opacity: $toggle-addon-opacity-disabled;\n    }\n}\n\n.toggle-addon {\n    line-height: 0;\n    width: $toggle-width;\n    display: inline-block;\n    padding: $toggle-padding;\n    background-color: $toggle-bg-color;\n    border-radius: $toggle-border-radius;\n    transition: $toggle-transition;\n\n    i {\n        border-radius: 50%;\n        display: inline-block;\n        width: $toggle-addon-size;\n        height: $toggle-addon-size;\n        background: $toggle-addon-bg-color;\n        transition: $toggle-transition;\n    }\n}\n"
  },
  {
    "path": "src/styles/modules.scss",
    "content": "// css components\n@import 'modules/button';\n@import 'modules/group';\n@import 'modules/cell';\n@import 'modules/tag';\n@import 'modules/tip';\n@import 'modules/hrule';\n@import 'modules/badge';\n@import 'modules/media';\n@import 'modules/card';\n@import 'modules/swipe';\n\n@import 'modules/navbar';\n@import 'modules/tabbar';\n@import 'modules/navigation';\n@import 'modules/drawer';\n@import 'modules/slideup';\n@import 'modules/segmented-control';\n@import 'modules/sidelip';\n@import 'modules/mask';\n@import 'modules/searchbar';\n@import 'modules/picker';\n@import 'modules/loadmore';\n@import 'modules/stepbar';\n@import 'modules/timeline';\n@import 'modules/sticky';\n\n@import 'modules/toast';\n@import 'modules/loading';\n@import 'modules/alert';\n@import 'modules/progressbar';\n@import 'modules/back-to-top';\n\n@import 'modules/checkbox';\n@import 'modules/toggle';\n@import 'modules/input-number';\n@import 'modules/input-text';\n@import 'modules/input-textarea';\n@import 'modules/selector';\n@import 'modules/inline-selector';\n\n\n@import 'modules/date-picker';\n"
  },
  {
    "path": "src/styles/utils/background.scss",
    "content": "// backgrounds\n.bg-inverse {\n    color: $gray-lighter;\n    background-color: $gray-dark;\n}\n\n.bg-faded {\n    background-color: $gray-lightest;\n}\n\n.bg-default {\n    background-color: $gray-lighter;\n}\n\n.bg-transparent {\n    background-color: transparent !important;\n}\n\n.bg-pure {\n    background-color: $brand-pure !important;\n}\n\n.bg-primary {\n    color: $brand-pure;\n    background-color: $brand-primary !important;\n}\n\n.bg-secondary {\n    background-color: $brand-secondary !important;\n}\n\n.bg-danger {\n    background-color: $brand-danger !important;\n}\n\n.bg-warning {\n    background-color: $brand-warning !important;\n}\n\n.bg-success {\n    background-color: $brand-success !important;\n}\n"
  },
  {
    "path": "src/styles/utils/border.scss",
    "content": "// shape\n.border-circle {\n    border-radius: $border-radius-circle !important;\n}\n\n.border-pill {\n    border-radius: $border-radius-circle !important;\n}\n\n// style\n.border-dashed {\n    border-style: dashed;\n}\n\n.border-dotted {\n    border-style: dotted;\n}\n\n// Theme\n.border-primary {\n    border-color: $brand-primary !important;\n}\n\n.border-secondary {\n    border-color: $brand-secondary !important;\n}\n\n.border-danger {\n    border-color: $brand-danger !important;\n}\n\n.border-success {\n    border-color: $brand-success !important;\n}\n\n.border-warning {\n    border-color: $brand-warning !important;\n}\n"
  },
  {
    "path": "src/styles/utils/clearfix.scss",
    "content": ".clearfix {\n    &::after {\n        content: '';\n        display: table;\n        clear: both;\n    }\n}\n"
  },
  {
    "path": "src/styles/utils/display.scss",
    "content": "\n.invisible {\n    visibility: hidden !important;\n}\n\n.hidden {\n    display: none !important;\n}\n\n.block {\n    display: block !important;\n}\n"
  },
  {
    "path": "src/styles/utils/flex.scss",
    "content": ".flex {\n    overflow: hidden;\n    display: flex;\n}\n\n.flex-vertical {\n    height: 100%;\n    flex-direction: column;\n}\n\n\n.flex-item {\n    flex: 1;\n    overflow-y: auto;\n    -webkit-overflow-scrolling : touch;\n}\n\n\n.flex-align-top { align-items: flex-start; }\n.flex-align-middle { align-items: center; }\n.flex-align-bottom { align-items: flex-end; }\n\n.flex-justify-start { justify-content: flex-start; }\n.flex-justify-end { justify-content: flex-end; }\n.flex-justify-center { justify-content: center; }\n.flex-justify-between { justify-content: space-between; }\n.flex-justify-around { justify-content: space-around; }\n"
  },
  {
    "path": "src/styles/utils/img.scss",
    "content": ".img-circle {\n    border-radius: 50%;\n}\n\n.img-fluid {\n    display: block;\n    max-width: 100%;\n    height: auto;\n}\n"
  },
  {
    "path": "src/styles/utils/reboot.scss",
    "content": "// scss-lint:disable ImportantRule, QualifyingElement, DuplicateProperty\n\n// Reboot\n//\n// Global resets to common HTML elements and more for easier usage by Bootstrap.\n// Adds additional rules on top of Normalize.css, including several overrides.\n\n\n// Reset the box-sizing\n//\n// Change from `box-sizing: content-box` to `border-box` so that when you add\n// `padding` or `border`s to an element, the overall declared `width` does not\n// change. For example, `width: 100px;` will always be `100px` despite the\n// `border: 10px solid red;` and `padding: 20px;`.\n//\n// Heads up! This reset may cause conflicts with some third-party widgets. For\n// recommendations on resolving such conflicts, see\n// http://getbootstrap.com/getting-started/#third-box-sizing.\n//\n// Credit: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/\n\nhtml {\n    height: 100%;\n    box-sizing: border-box;\n    font-size: $font-size-root;\n    -ms-overflow-style: scrollbar;\n    -webkit-tap-highlight-color:rgba(255, 255, 255, 0);\n\n    @include respond-to(md) {\n        font-size: $font-size-root-md;\n    }\n    @include respond-to(lg) {\n        font-size: $font-size-root-lg;\n    }\n}\n\n// iphone 4/5\n// @media only screen\n// and (min-device-width: 320px)\n// and (min-resolution: 2dppx) {\n//     html {\n//         font-size: $font-size-root;\n//     }\n// }\n\n// // iphone 6/7\n// @media only screen\n// and (min-device-width: 360px)\n// and (min-resolution: 2dppx) {\n//     html {\n//         font-size: $font-size-root-md;\n//     }\n// }\n\n// // iphone 6/7 plus\n// @media only screen\n// and (min-device-width: 414px)\n// and (min-resolution: 3dppx) {\n//     html {\n//         font-size: $font-size-root-lg;\n//      }\n// }\n\n*,\n*::before,\n*::after {\n    box-sizing: inherit;\n}\n\n\n// Make viewport responsive\n//\n// @viewport is needed because IE 10+ doesn't honor <meta name=\"viewport\"> in\n// some cases. See http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/.\n// Eventually @viewport will replace <meta name=\"viewport\">.\n//\n// However, `device-width` is broken on IE 10 on Windows (Phone) 8,\n// (see http://timkadlec.com/2013/01/windows-phone-8-and-device-width/ and https://github.com/twbs/bootstrap/issues/10497)\n// and the fix for that involves a snippet of JavaScript to sniff the user agent\n// and apply some conditional CSS.\n//\n// See http://getbootstrap.com/getting-started/#support-ie10-width for the relevant hack.\n//\n// Wrap `@viewport` with `@at-root` for when folks do a nested import (e.g.,\n// `.class-name { @import \"bootstrap\"; }`).\n@at-root {\n    @-ms-viewport { width: device-width; }\n}\n\n\nbody {\n    height: 100%;\n    font-family: $font-family-base;\n    font-size: $font-size-base;\n    line-height: $line-height-base;\n    color: $body-color;\n    background-color: $body-bg;\n    padding: 0;\n    margin: 0;\n}\n\n// Suppress the focus outline on elements that cannot be accessed via keyboard.\n// This prevents an unwanted focus outline from appearing around elements that\n// might still respond to pointer events.\n//\n// Credit: https://github.com/suitcss/base\n[tabindex=\"-1\"]:focus {\n    outline: none !important;\n}\n\n\n//\n// Typography\n//\n\n// Remove top margins from headings\n//\n// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top\n// margin for easier control within type scales as it avoids margin collapsing.\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n    margin-top: 0;\n    margin-bottom: .5rem;\n}\n\n// Reset margins on paragraphs\n//\n// Similarly, the top margin on `<p>`s get reset. However, we also reset the\n// bottom margin to use `rem` units instead of `em`.\np {\n    margin-top: 0;\n    margin-bottom: .5rem;\n}\n\naddress {\n    margin-bottom: .5rem;\n    font-style: normal;\n    line-height: inherit;\n}\n\nol,\nul,\ndl {\n    margin-top: 0;\n    margin-bottom: 1rem;\n}\n\nol ol,\nul ul,\nol ul,\nul ol {\n    margin-bottom: 0;\n}\n\ndt {\n    font-weight: bold;\n}\n\ndd {\n    margin-bottom: .5rem;\n    margin-left: 0; // Undo browser default\n}\n\nblockquote {\n    margin: 0 0 1rem;\n}\n\n\n//\n// Links\n//\n\na {\n    cursor: none;\n    color: $link-color;\n    text-decoration: $link-decoration;\n\n    &:active,\n    &:focus {\n        color: $link-color;\n        text-decoration: none;\n    }\n\n    &:active {\n        color: $link-active-color;\n    }\n}\n\n// And undo these styles for placeholder links/named anchors (without href).\n// It would be more straightforward to just use a[href] in previous block, but that\n// causes specificity issues in many other styles that are too complex to fix.\n// See https://github.com/twbs/bootstrap/issues/19402\n\na:not([href]) {\n    color: inherit;\n    text-decoration: none;\n\n    &:hover,\n    &:focus {\n        color: inherit;\n        text-decoration: none;\n    }\n\n    &:focus {\n        outline: none;\n    }\n}\n\n\n//\n// Code\n//\n\npre {\n    margin-top: 0;\n    margin-bottom: 1rem;\n}\n\n\n//\n// Figures\n//\n\nfigure {\n    margin: 0 0 1rem;\n}\n\n\n//\n// Images\n//\n\nimg {\n    vertical-align: middle;\n}\n\n\n// iOS \"clickable elements\" fix for role=\"button\"\n//\n// Fixes \"clickability\" issue (and more generally, the firing of events such as focus as well)\n// for traditionally non-focusable elements with role=\"button\"\n// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile\n\n[role=\"button\"] {\n    cursor: pointer;\n}\n\n\n// Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.\n//\n// In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11\n// DON'T remove the click delay when `<meta name=\"viewport\" content=\"width=device-width\">` is present.\n// However, they DO support removing the click delay via `touch-action: manipulation`.\n// See:\n// * http://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch\n// * http://caniuse.com/#feat=css-touch-action\n// * http://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay\n\na,\narea,\nbutton,\n[role=\"button\"],\ninput,\nlabel,\nselect,\nsummary,\ntextarea {\n    touch-action: manipulation;\n}\n\n\n//\n// Tables\n//\n\ntable {\n    background-color: $table-bg;\n}\n\ncaption {\n    padding-top: $table-cell-padding;\n    padding-bottom: $table-cell-padding;\n    color: $text-muted;\n    text-align: left;\n    caption-side: bottom;\n}\n\nth {\n    text-align: left;\n}\n\n\n//\n// Forms\n//\n\nlabel {\n    display: inline-block;\n}\n\n// Work around a Firefox/IE bug where the transparent `button` background\n// results in a loss of the default `button` focus styles.\n//\n// Credit: https://github.com/suitcss/base/\nbutton:focus {\n    outline: 1px dotted;\n    outline: 5px auto -webkit-focus-ring-color;\n}\n\ninput,\nbutton,\nselect,\ntextarea {\n    margin: 0;\n    line-height: inherit;\n    border-radius: 0;\n}\n\ntextarea {\n    font-size: $font-size-base;\n    resize: none;\n}\n\nfieldset {\n    min-width: 0;\n    padding: 0;\n    margin: 0;\n    border: 0;\n}\n\nlegend {\n    display: block;\n    width: 100%;\n    padding: 0;\n    margin-bottom: .5rem;\n    font-size: 1.5rem;\n    line-height: inherit;\n}\n\ninput[type=\"search\"] {\n    -webkit-appearance: none;\n}\n\n// todo: needed?\noutput {\n    display: inline-block;\n}\n\n// Always hide an element with the `hidden` HTML attribute (from PureCSS).\n[hidden] {\n    display: none !important;\n}\n"
  },
  {
    "path": "src/styles/utils/spacing.scss",
    "content": ".no-margin {\n    margin: 0 !important;\n}\n\n.no-padding {\n    padding: 0 !important;\n}\n\n.gap-left {\n    margin-right: $spacer-gap;\n}\n\n.gap-right {\n    margin-left: $spacer-gap;\n}\n"
  },
  {
    "path": "src/styles/utils/text.scss",
    "content": "// Contextual colors\n\n@include text-emphasis-variant('.text-muted', $text-muted);\n\n@include text-emphasis-variant('.text-primary', $brand-primary);\n\n@include text-emphasis-variant('.text-success', $brand-success);\n\n@include text-emphasis-variant('.text-info', $brand-info);\n\n@include text-emphasis-variant('.text-warning', $brand-warning);\n\n@include text-emphasis-variant('.text-danger', $brand-danger);\n\n@include text-emphasis-variant('.text-secondary', $brand-secondary);\n\n@include text-emphasis-variant('.text-pure', $brand-pure);\n\n//== Text align\n.text-center { text-align: center; }\n.text-left { text-align: left; }\n.text-right { text-align: right; }\n"
  },
  {
    "path": "src/styles/utils.scss",
    "content": "@import 'utils/reboot';\n\n@import 'utils/flex';\n@import 'utils/spacing';\n@import 'utils/background';\n@import 'utils/text';\n@import 'utils/display';\n@import 'utils/img';\n@import 'utils/border';\n@import 'utils/clearfix';\n"
  },
  {
    "path": "src/styles/variables.scss",
    "content": "// Colors\n$brand-primary: #1C89EA !default;\n$brand-secondary: #FF7043 !default;\n$brand-success: #30BE71 !default;\n$brand-info: #2b71b5 !default;\n$brand-warning: #fab83a !default;\n$brand-danger: #EA413A !default;\n$brand-pure: #fff !default;\n\n$gray-dark: #373a3c !default;\n$gray: #55595c !default;\n$gray-light: #999 !default;\n$gray-lighter: #eceeef !default;\n$gray-lightest: #f4f4f4 !default;\n\n// Border radius\n$border-radius: 2px !default;\n$border-radius-lg: 4px !default;\n$border-radius-sm: 1px !default;\n$border-radius-circle: 10rem !default;\n\n// Cursor\n$cursor-pointer: pointer !default;\n\n// Opacity\n$opacity-disabled: .65 !default;\n\n// z-index\n$z-index-top: 1000 !default;\n$z-index-mask: 1010 !default;\n$z-index-slide: 1020 !default;\n$z-index-sidelip: 1020 !default;\n$z-index-toast: 1030 !default;\n$z-index-alert: 1030 !default;\n\n// Base\n$font-family-base: -apple-system, BlinkMacSystemFont, \"Microsoft YaHei\", \"WenQuanYi Micro Hei\", \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", Arial, sans-serif !default;\n$line-height-base: 1.43 !default;\n$body-color: #333 !default;\n$body-bg: #f0eff5 !default;\n$text-muted: $gray-light !default;\n\n$font-size-root: 12px !default;\n$font-size-root-md: 14px !default;\n$font-size-root-lg: 16px !default;\n\n$font-size-base: 1rem !default;\n$font-size-lg: 1.4rem !default;\n$font-size-sm: .875rem !default;\n\n// media query\n$all-media-query-device: (\n  'sm': '(min-width: 320px) and (min-resolution: 2dppx)',\n  'md': '(min-width: 360px) and (min-resolution: 2dppx)',\n  'lg': '(min-width: 414px) and (min-resolution: 3dppx)',\n) !default;\n\n\n$spacer:   1rem !default;\n$spacer-x: $spacer !default;\n$spacer-y: $spacer !default;\n$spacer-gap: $spacer / 2 !default;\n\n// Border\n$border-color: #e0e0e0 !default;\n$border-image-top: linear-gradient(to bottom, $border-color, $border-color 50%, transparent 0) !default;\n$border-image-bottom: linear-gradient(to top, $border-color, $border-color 50%, transparent 0) !default;\n$border-image-left: linear-gradient(to right, $border-color, $border-color 50%, transparent 0) !default;\n\n// Hr\n$hr-color: $border-color !default;\n$hr-margin: 1rem 0 !default;\n\n// Links\n$link-color: $brand-primary !default;\n$link-decoration: none !default;\n$link-active-color: darken($link-color, 15%) !default;\n\n// Tables\n$table-bg: $brand-pure !default;\n$table-cell-padding: .75rem !default;\n$table-sm-cell-padding: .3rem !default;\n\n// Buttons\n$btn-opacity-disabled: $opacity-disabled !default;\n$btn-loading-opacity-disabled: .9 !default;\n\n$btn-font-size: $font-size-base !default;\n$btn-padding-x: 1.6rem !default;\n$btn-padding-y: .7rem !default;\n$btn-border-radius: $border-radius !default;\n\n$btn-font-size-sm: $font-size-sm !default;\n$btn-padding-x-sm: .6rem !default;\n$btn-padding-y-sm: .2rem !default;\n$btn-border-radius-sm: $border-radius-sm !default;\n\n$btn-font-size-lg: $font-size-lg !default;\n$btn-padding-x-lg: 2rem !default;\n$btn-padding-y-lg: 1rem !default;\n$btn-border-radius-lg: $border-radius-lg !default;\n\n$btn-primary-color: $brand-pure;\n$btn-primary-bg: $brand-primary !default;\n$btn-primary-border: $brand-primary !default;\n\n$btn-secondary-color: $brand-pure;\n$btn-secondary-bg: $brand-secondary !default;\n$btn-secondary-border: $brand-secondary !default;\n\n$btn-default-color: $gray;\n$btn-default-bg: #fff !default;\n$btn-default-border: $border-color !default;\n\n$btn-loading-gap: .25rem !default;\n\n// Group/Cell\n$group-bg-color: $brand-pure !default;\n$group-margin: 1rem 0 0 0 !default;\n\n$group-title-padding: .5rem 1rem !default;\n\n$cell-color: $body-color !default;\n$cell-bg-color: $brand-pure !default;\n$cell-padding: 1.2rem 1rem !default;\n$cell-gap-left: 1rem !default;\n$cell-children-gap: 1rem !default;\n\n$cell-bg-color-active: $gray-lightest !default;\n$cell-bg-color-disabled: $border-color !default;\n\n$cell-arrow-color: #818a91 !default;\n$cell-arrow-margin: 0 0 0 $spacer-gap !default;\n\n// Navbar\n$navbar-height: 3.67rem !default;\n$navbar-line-height: $navbar-height !default;\n$navbar-padding: 0 !default;\n\n$navbar-header-flex: .5 !default;\n$navbar-header-padding: 0 1rem !default;\n$navbar-body-flex: 1 !default;\n$navbar-body-padding: 0 1rem !default;\n$navbar-footer-flex: .5 !default;\n$navbar-footer-padding: 0 1rem !default;\n\n$navbar-primary-color: $brand-pure !default;\n$navbar-primary-bg-color: $brand-primary !default;\n\n$navbar-default-color: #666 !default;\n$navbar-default-bg-color: $brand-pure !default;\n\n// Tabbar\n$tabbar-bg-color: $brand-pure !default;\n$tabbar-margin-bottom: 1rem !default;\n$tabbar-height: $navbar-height !default;\n$tabbar-line-height: $tabbar-height !default;\n$tabbar-transition: all .3s cubic-bezier(.86, 0, .07, 1) !default;\n$tabbar-opacity-disabled: $opacity-disabled !default;\n\n$tabbar-item-border-width: .167rem !default;\n$tabbar-item-color-active: $brand-primary !default;\n$tabbar-item-border-color-active: $brand-primary !default;\n\n// Toast\n$toast-bg: rgba(0, 0, 0, .6) !default;\n$toast-color: $brand-pure !default;\n$toast-font-size: 1.1rem !default;\n$toast-border-radius: .333rem !default;\n$toast-border-radius-lg: .5rem !default;\n$toast-padding: 1rem 1.2rem !default;\n$toast-padding-lg: 1rem 3.5rem 1.5rem !default;\n$toast-position-gap: 4rem !default;\n$toast-max-width: 80% !default;\n$toast-animation-enter-duration: .6s !default;\n$toast-animation-enter-function: ease-in !default;\n$toast-animation-leave-duration: .3s !default;\n$toast-animation-leave-function: cubic-bezier(.6, .04, .98, .34) !default;\n\n$toast-icon-font-size: 4rem !default;\n$toast-icon-margin-bottom: .5rem !default;\n\n$toast-loading-margin: 1rem 0 !default;\n\n// Alert\n$alert-width: 22.5rem !default;\n$alert-max-width: 22.5rem !default;\n$alert-padding: 2.145rem 0 0 0 !default;\n$alert-bg-color: $brand-pure !default;\n$alert-border-radius: $border-radius-lg !default;\n$alert-animation-duration: .2s !default;\n$alert-animation-enter-function: cubic-bezier(.08, .82, .167, 1) !default;\n$alert-animation-leave-function: cubic-bezier(.6, .04, .98, .34) !default;\n\n$alert-title-font-size: 1.43rem !default;\n$alert-title-font-weight: bold !default;\n$alert-title-color: #333333 !default;\n\n$alert-message-color: #666666 !default;\n$alert-message-font-size: 1.07rem !default;\n$alert-message-padding: 1.785rem 1.43rem !default;\n$alert-message-line-height: 1.43 !default;\n$alert-message-text-align: center !default;\n\n$alert-btn-color: $brand-primary !default;\n$alert-btn-font-size: 1.215rem !default;\n$alert-btn-padding: 1rem 0 !default;\n\n$alert-box-h-shadow: 0 0 0.85rem 0 rgba(0, 0, 0, 0.22) !default;\n$alert-box-v-shadow: 0 0.85rem 0.85rem 0 rgba(0, 0, 0, 0.30) !default;\n\n// Checkbox\n$checkbox-padding: 3px !default;\n$checkbox-color: $brand-pure !default;\n$checkbox-bg-color: $brand-pure !default;\n$checkbox-border-color: #ddd !default;\n$checkbox-transition: all .2s ease-in !default;\n\n$checkbox-bg-color-checked: $brand-primary !default;\n$checkbox-border-color-checked: $brand-primary !default;\n$checkbox-bg-color-disabled: #dfdfdf !default;\n$checkbox-border-color-disabled: $checkbox-border-color !default;\n\n\n$checkbox-addon-font-size: 1.5rem !default;\n$checkbox-addon-padding-top: 0 !default;\n$radio-addon-width: 1.0rem !default;\n$radio-addon-height: $radio-addon-width !default;\n$radio-addon-padding: .5rem !default;\n\n$checkbox-label-gap: .167rem !default;\n\n$checkbox-square-border-radius: $border-radius !default;\n\n$checkbox-gap: 1rem !default;\n\n// Toggle\n$toggle-addon-size: 1.34rem !default;\n$toggle-addon-bg-color: $brand-pure !default;\n$toggle-addon-bg-color-checked: $brand-primary !default;\n$toggle-addon-opacity-disabled: $opacity-disabled !default;\n\n$toggle-bg-color: #e7eaec !default;\n$toggle-width: 3.84rem !default;\n$toggle-padding: 0.25rem !default;\n$toggle-border-radius: $toggle-addon-size !default;\n$toggle-transition: all .2s ease !default;\n\n// Number\n$number-border-color: $brand-primary !default;\n\n$number-btn-size: 2.0rem !default;\n$number-btn-line-height: $number-btn-size - 0.167 !default;\n\n$number-plus-color: $brand-pure !default;\n$number-plus-bg-color: $brand-primary !default;\n$number-plus-bg-color-active: darken($number-plus-bg-color, 6%) !default;\n\n$number-minus-color: $brand-primary !default;\n$number-minus-bg-color: $brand-pure !default;\n$number-minus-color-active: $brand-pure !default;\n$number-minus-bg-color-active: $brand-primary !default;\n\n$number-input-width: 3rem !default;\n$number-input-bg-color: $brand-pure !default;\n$number-input-border-color: #d9d9d9 !default;\n$number-input-padding: .6rem .3rem !default;\n$number-input-margin: 0 .167rem !default;\n$number-input-bg-color-disabled: #eee !default;\n\n// InputText\n$input-font-size: 1rem !default;\n$input-text-icon-gap: 1rem !default;\n\n// InputTeaxtarea\n$textarea-padding: .6rem !default;\n\n$textarea-counter-scale: .8 !default;\n$textarea-counter-color: $text-muted !default;\n$textarea-counter-padding: 0 $textarea-padding / $textarea-counter-scale .2rem 0 !default;\n\n// Selector\n$selector-color-active: $brand-primary !default;\n$selector-icon-color: $brand-primary !default;\n$selector-color-transition: all .2s ease-in-out !default;\n\n// InlineSelector\n$inline-selector-transition: all .2s ease-in !default;\n$inline-selector-option-min-width: 4.583rem !default;\n$inline-selector-option-padding: .6rem .2rem !default;\n\n\n// Tag\n$tag-padding: .4em .6em !default;\n$tag-color: $brand-pure !default;\n$tag-border-radius: $border-radius !default;\n\n$tag-padding-sm: .2em .4em !default;\n$tag-scale-sm: .85 !default;\n\n$tag-primary-bg: $brand-primary !default;\n$tag-success-bg: $brand-success !default;\n$tag-warning-bg: $brand-warning !default;\n$tag-danger-bg: $brand-danger !default;\n$tag-default-bg: #ccc !default;\n$tag-default-color: #666 !default;\n\n// Navigation\n$navigation-height: 4.0833rem !default;\n$navigation-color: #888 !default;\n$navigation-color-active: $brand-primary !default;\n$navigation-bg-color: $tabbar-bg-color !default;\n\n$navigation-label-scale: .8 !default;\n$navigation-margin: .167rem 0 -.8rem 0 !default;\n\n// Tip\n$tip-padding: 1rem 4rem !default;\n\n$tip-line-height: 1px !default;\n\n$tip-label-padding: 0 1rem !default;\n$tip-label-color: #888 !default;\n\n// BackToTop\n$top-right: 2.5rem !default;\n$top-bottom: 2.5rem !default;\n$top-color: $brand-pure !default;\n$top-width: 3.5rem !default;\n$top-height: 3.5rem !default;\n$top-line-height: 3.5rem !default;\n$top-font-size: 1.667rem !default;\n$top-bg-color: rgba(0, 0, 0, .3) !default;\n$top-transition: all .6s ease-in-out !default;\n\n// Badge\n$badge-color: $brand-pure !default;\n$badge-padding: 0.25rem !default;\n$badge-min-width: 0.5rem !default;\n$badge-min-width-not-empty: 1rem + $badge-padding * 2 !default;\n$badge-min-height: 0.5rem !default;\n$badge-margin-right: $badge-min-width-not-empty / 2 !default;\n$badge-scale: .8 !default;\n$badge-box-shadow: 0 0 0 1px $brand-pure !default;\n\n// Drawer\n$drawer-color: #666 !default;\n$drawer-bg-color: $tabbar-bg-color !default;\n$drawer-padding: ($navbar-height - $line-height-base * 1) / 2 0 !default;\n$drawer-transition: all .2s ease-in-out !default;\n\n$drawer-color-active: $brand-primary !default;\n$drawer-opacity-disabled: $opacity-disabled !default;\n\n$drawer-icon-color: #999 !default;\n$drawer-icon-margin-right: .167rem !default;\n\n// mask\n$mask-bg-color: rgba(0, 0, 0, .3) !default;\n$mask-animation-enter-duration: .3s !default;\n$mask-animation-enter-function: ease !default;\n$mask-animation-leave-duration: .2s !default;\n$mask-animation-leave-function: ease !default;\n\n\n// Slide\n$slide-bg-color: $brand-pure !default;\n$slide-min-height: 5rem !default;\n$slide-max-height: 25rem !default;\n$slide-animation-enter-duration: .3s !default;\n$slide-animation-enter-function: ease-in-out !default;\n$slide-animation-leave-duration: .2s !default;\n$slide-animation-leave-function: ease-in-out !default;\n\n$slide-header-padding: 1rem !default;\n\n$slide-body-padding: 1rem !default;\n\n// Sidelip\n$sidelip-width: 65% !default;\n$sidelip-bg-color: $brand-pure !default;\n$sidelip-animation-enter-duration: .3s !default;\n$sidelip-animation-enter-function: ease !default;\n$sidelip-animation-leave-duration: .2s !default;\n$sidelip-animation-leave-function: ease-in-out !default;\n\n// SegmentedControl\n$segmented-control-color: $brand-primary !default;\n$segmented-control-bg-color: $brand-pure !default;\n$segmented-control-border-color: $brand-primary !default;\n$segmented-control-border-radius: $border-radius-lg !default;\n$segmented-control-transition: all .3s ease-in-out !default;\n\n$segmented-control-opacity-disabled: $opacity-disabled !default;\n\n$segmented-control-color-active: $brand-pure !default;\n$segmented-control-bg-color-active: $brand-primary !default;\n\n$segmented-control-item-padding: .4rem .6rem !default;\n$segmented-control-item-font-size: $font-size-base !default;\n\n\n// Meida\n$media-bg-color: $brand-pure !default;\n$media-object-gap: 1rem !default;\n\n// Card\n$card-bg-color: $brand-pure !default;\n$card-body-padding: .6rem 1rem !default;\n\n//  Searchbar\n$searchbar-padding: .5rem !default;\n$searchbar-border-color: $border-color !default;\n$searchbar-border-radius: $border-radius !default;\n$searchbar-transition: all .3s ease !default;\n\n$searchbar-placeholder-opacity: .2 !default;\n$searchbar-placeholder-width: 1rem + 0.5rem !default;\n\n$searchbar-clear-padding: 0 0 0 .5rem !default;\n$searchbar-clear-opacity: .2 !default;\n\n$searchbar-btn-padding: 0 .5rem !default;\n\n// Loadmore\n$loadmore-dropped-transition: .2s !default;\n\n$loadmore-hint-height: 4.167rem !default;\n$loadmore-hint-margin: -4.167rem !default;\n\n// Loading\n$loading-width: 4rem !default;\n$loading-animation-duration: 2s !default;\n\n$loading-path-stroke: $border-color !default;\n$loading-path-stroke-width: 3 !default;\n$loading-path-animation-duration: 1.5s !default;\n\n$loading-path-stroke-primary: $brand-primary !default;\n$loading-path-stroke-secondary: $brand-secondary !default;\n\n$loading-width-sm: 1rem !default;\n\n// Picker\n$picker-bg-color: $brand-pure !default;\n$picker-items-count: 5 !default;\n$picker-items-count-sm: 3 !default;\n$picker-items-count-lg: 7 !default;\n\n$picker-item-font-size: 1.2rem !default;\n$picker-item-height: 3rem !default;\n$picker-item-line-height: $picker-item-height !default;\n$picker-item-padding: 0 1rem !default;\n$picker-item-transition: all .2s ease !default;\n\n$picker-item-font-size-active: 1.3rem !default;\n$picker-item-font-weight-active: bold !default;\n\n$picker-mask-bg-size: 100% $picker-item-height * 2 !default;\n$picker-mask-leve-1: hsla(0, 0%, 100%, .95) !default;\n$picker-mask-leve-2: hsla(0, 0%, 100%, .6) !default;\n$picker-mask-leve-3: hsla(0, 0%, 100%, .3) !default;\n$picker-mask-bg-image: linear-gradient(180deg, $picker-mask-leve-1, $picker-mask-leve-2), linear-gradient(0deg, $picker-mask-leve-1, $picker-mask-leve-2) !default;\n$picker-mask-bg-image-sm: linear-gradient(180deg, $picker-mask-leve-3), linear-gradient(0deg, $picker-mask-leve-3) !default;\n$picker-mask-bg-image-lg: linear-gradient(180deg, $picker-mask-leve-1, $picker-mask-leve-2, $picker-mask-leve-3), linear-gradient(0deg, $picker-mask-leve-1, $picker-mask-leve-2, $picker-mask-leve-3) !default;\n\n$picker-tap-height: $picker-item-height !default;\n\n$picker-list-transition: all .3s ease-out !default;\n\n// Swipe\n$swipe-indicators-bottom: .5rem !default;\n\n$swipe-indicator-padding: 0.25rem !default;\n$swipe-indicator-margin: 0 1px !default;\n$swipe-indicator-opacity: 1 !default;\n$swipe-indicator-border-color: $brand-pure !default;\n$swipe-indicator-bg-color-active: $brand-pure !default;\n$swipe-indicator-transition-duration: .3s !default;\n$swipe-indicator-transition-function: ease-in-out !default;\n\n// Progressbar\n$progressbar-height: 1.667rem !default;\n$progressbar-border-radius: $border-radius-lg !default;\n$progressbar-bg-color: $gray-lightest !default;\n$progressbar-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1) !default;\n\n$progressbar-primary-bg: $brand-primary !default;\n$progressbar-success-bg: $brand-success !default;\n$progressbar-warning-bg: $brand-warning !default;\n$progressbar-danger-bg: $brand-danger !default;\n\n$progressbar-indicator-color: $brand-pure !default;\n$progressbar-indicator-font-size: $font-size-sm !default;\n$progressbar-indicator-transition: width .6s ease !default;\n$progressbar-indicator-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15) !default;\n\n$progressbar-height-sm: .667rem !default;\n$progressbar-border-radius-sm: $progressbar-height-sm !default;\n\n\n// Stepbar\n$stepbar-gap: .167rem !default;\n\n\n$stepbar-item-addon-size: 1.5rem !default;\n$stepbar-item-addon-line-height: 1.357rem !default;\n$stepbar-item-addon-color: $text-muted !default;\n\n$stepbar-item-addon-color-active: $brand-pure !default;\n$stepbar-item-addon-bg-active: $brand-primary !default;\n$stepbar-item-addon-border-color-active: $brand-primary !default;\n$stepbar-item-addon-border-width: 1px !default;\n$stepbar-item-addon-border-color: $border-color !default;\n$stepbar-item-addon-icon-font-size: 1rem !default;\n$stepbar-item-addon-transition: all .2s ease-in !default;\n\n\n$stepbar-item-addon-color-finished: $brand-primary !default;\n$stepbar-item-addon-border-color-finished: $brand-primary !default;\n\n\n$stepbar-item-addon-title-color: $text-muted !default;\n$stepbar-item-addon-title-color-active: $body-color !default;\n$stepbar-item-addon-title-font-weight-active: bold !default;\n\n\n$stepbar-line-height: 1px !default;\n$stepbar-line-color: $border-color !default;\n$stepbar-line-border-color: $stepbar-line-color !default;\n$stepbar-line-border-color-active: $brand-primary !default;\n$stepbar-line-transition: all .2s ease-in !default;\n\n// Timeline\n$timeline-item-padding-bottom: 2rem !default;\n\n$timeline-item-addon-bg: $brand-pure !default;\n$timeline-item-addon-size: 1rem !default;\n$timeline-item-addon-border-width: 2px !default;\n\n$timeline-item-addon-size-active: 2.0rem !default;\n$timeline-item-addon-border-color: $brand-primary !default;\n\n$timeline-item-addon-dot-size: 1rem !default;\n$timeline-item-addon-dot-size-active: 1rem !default;\n$timeline-item-addon-dot-bg: #cbcccd !default;\n$timeline-item-addon-dot-bg-active: $brand-primary !default;\n\n$timeline-item-line-width: 1px !default;\n$timeline-item-line-color: $timeline-item-addon-dot-bg !default;\n\n$timeline-item-body-color: $text-muted !default;\n$timeline-item-body-padding-left: ($timeline-item-addon-size-active + .7 * 1) !default;\n$timeline-item-body-line-height: $timeline-item-addon-size-active !default;\n\n\n// date-picker\n$datepicker-font-size-base: 20px !default;\n// progressbars\n$progressbars-font-size-lg: 20px !default;\n$progressbars-font-size-sm: 15px !default;\n"
  },
  {
    "path": "webpack.dev.config.js",
    "content": "const path = require('path'),\n    webpack = require('webpack'),\n    DashboardPlugin = require('webpack-dashboard/plugin');\n\nmodule.exports = {\n    devtool: 'eval-source-map',\n    entry: {\n        app: [\n            `webpack-dev-server/client?http://localhost:9008`,\n            'webpack/hot/dev-server',\n            './src/scripts/index.js'],\n    },\n    output: {\n        path: path.join(__dirname, 'dist'),\n        filename: 'app.js',\n        publicPath: '/scripts',\n    },\n    resolve: {\n        extensions: ['.js', '.vue'],\n        modules: [path.join(__dirname, 'node_modules')],\n        alias: {\n            vue$: 'vue/dist/vue',\n        },\n    },\n    module: {\n        rules: [\n        {\n            test: /\\.js$/,\n            enforce: 'pre',\n            loader: 'eslint-loader',\n            include: path.join(__dirname, 'src'),\n            exclude: /node_modules/,\n        },{\n            test: /\\.vue$/,\n            loader: 'vue-loader',\n        }, {\n            test: /\\.js$/,\n            loader: 'babel-loader',\n            include: path.join(__dirname, 'src'),\n            exclude: /node_modules/,\n        }, {\n            test: /\\.scss$/,\n            use: ['style-loader', 'css-loader', 'scss-loader'],\n        }, {\n            test: /\\.(jpe?g|png|gif|svg)$/i,\n            loader: 'url-loader',\n        }, {\n            test: /\\.json$/,\n            loader: 'json-loader',\n        }],\n    },\n    plugins: [\n        new webpack.HotModuleReplacementPlugin(),\n        new DashboardPlugin(),\n    ],\n    devServer: {\n        host: '0.0.0.0',\n        disableHostCheck: true,\n        contentBase: './build',\n        publicPath: '/scripts',\n        hot: true,\n        historyApiFallback: true,\n        stats: {\n            colors: true,\n            chunks: false,\n            children: false,\n        },\n        headers: {\n            'Access-Control-Allow-Origin': '*',\n        },\n    },\n};\n"
  },
  {
    "path": "webpack.prebuilt.config.js",
    "content": "const path = require('path')\nconst webpack = require('webpack')\n\nmodule.exports = {\n    entry: './src/scripts/components/index',\n    output: {\n        path: path.join(__dirname, 'build', 'scripts'),\n        filename: 'vue-impression.js',\n        publicPath: '/',\n    },\n    plugins: [\n        new webpack.DefinePlugin({\n            'process.env.NODE_ENV': '\"production\"',\n        }),\n        new webpack.optimize.UglifyJsPlugin({\n            compress: {\n                warnings: false,\n            },\n            comments: false,\n            mangle: {\n                except: ['$super', '$', 'exports', 'require', 'module'],\n            },\n        }),\n        new webpack.optimize.MinChunkSizePlugin({minChunkSize: 51200}),\n        new webpack.optimize.OccurrenceOrderPlugin(),\n    ],\n    resolve: {\n        extensions: ['.js', '.vue'],\n    },\n    module: {\n        loaders: [{\n            test: /\\.vue$/,\n            loader: 'vue-loader',\n        }, {\n            test: /\\.js$/,\n            loader: 'babel-loader',\n            exclude: /node_modules/,\n        }, {\n            test: /\\.(jpe?g|png|gif|svg)$/i,\n            loader: 'url-loader',\n        }, {\n            test: /\\.json$/,\n            loader: 'json-loader',\n        }],\n    },\n};\n"
  },
  {
    "path": "webpack.prod.config.js",
    "content": "var path = require('path'),\n    webpack = require('webpack');\n\nmodule.exports = {\n    entry: './src/scripts/index',\n    output: {\n        path: path.join(__dirname, 'build', 'scripts'),\n        filename: 'app.js',\n        publicPath: '/',\n    },\n    plugins: [\n        new webpack.DefinePlugin({\n            'process.env.NODE_ENV': '\"production\"',\n        }),\n        new webpack.optimize.UglifyJsPlugin({\n            compress: {\n                warnings: false,\n            },\n            comments: false,\n            mangle: {\n                except: ['$super', '$', 'exports', 'require', 'module'],\n            },\n        }),\n        new webpack.optimize.MinChunkSizePlugin({ minChunkSize: 51200 }),\n        new webpack.optimize.OccurrenceOrderPlugin(),\n    ],\n    resolve: {\n        extensions: ['.js', '.vue'],\n        modules: [path.join(__dirname, 'node_modules')],\n        alias: {\n            vue$: 'vue/dist/vue',\n        },\n    },\n    module: {\n        rules: [{\n            test: /\\.vue$/,\n            loader: 'vue-loader',\n        }, {\n            test: /\\.js$/,\n            loader: 'babel-loader',\n            exclude: /node_modules/,\n        }, {\n            test: /\\.(jpe?g|png|gif|svg)$/i,\n            loader: 'url-loader',\n        }, {\n            test: /\\.json$/,\n            loader: 'json-loader',\n        }],\n    },\n};\n"
  }
]