[ { "path": ".babelrc", "content": "{\n \"presets\": [\n [\"es2015\", { \"modules\": false }],\n \"stage-2\"\n ],\n \"plugins\": [\"transform-runtime\"],\n \"comments\": false,\n \"env\": {\n \"test\": {\n \"plugins\": [ \"istanbul\" ]\n }\n }\n}\n" }, { "path": ".editorconfig", "content": "root = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size = 2\nend_of_line = lf\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n" }, { "path": ".eslintignore", "content": "build/*.js\nsrc/assets/*/*.js\nsrc/libs/eventor.js\nconfig/*.js\nsrc/tools/*/*.js\nsrc/components/video/zy.media.js\nsrc/plugins/wechat/1.3.0.js\nsrc/plugins/wechat/1.3.2.js\nsrc/plugins/wechat/origin.1.3.0.js\nsrc/plugins/wechat/origin.1.3.2.js" }, { "path": ".eslintrc.js", "content": "module.exports = {\n root: true,\n parser: 'babel-eslint',\n parserOptions: {\n sourceType: 'module'\n },\n // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style\n extends: 'standard',\n globals: {'expect': true, 'it': true, 'describe': true, 'ga': true, 'window': true, 'document': true, 'alert': true, 'api': true, 'apiready': true},\n env: {\n browser: true\n },\n // required to lint *.vue files\n plugins: [\n 'html'\n ],\n // add your custom rules here\n 'rules': {\n 'eol-last': 0,\n // allow paren-less arrow functions\n 'arrow-parens': 0,\n // allow async-await\n 'generator-star-spacing': 0,\n // allow debugger during development\n 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0\n }\n}\n" }, { "path": ".github/FUNDING.yml", "content": "github: [airyland]\n" }, { "path": ".github/ISSUE_TEMPLATE.md", "content": "\n" }, { "path": ".github/PULL_REQUEST_TEMPLATE.md", "content": "Please makes sure the items are checked before submitting your PR, thank you!\n\n* [ ] `Rebase` before creating a PR to keep commit history clear.\n* [ ] `Only One commit`\n* [ ] No `eslint` errors\n" }, { "path": ".gitignore", "content": ".DS_Store\nnode_modules/\nbower_components/\nnpm-debug.log\n/demo\nbuild/milestone.json\nexamples/webpack/\n.idea\ndist/components-commonjs/\n/site\n/docs/changes\n/docs/demos\n/docs/**/faq/index.md\n/docs/**/components\n/docs/**/demos\n/docs/**/changelog\n/docs/.ream/\n*.vue.vux.*\nsrc/locales/components.yml\n/dist/**/*\nsrc/components/index.js\ntest/unit/coverage/\ndocs/*.map\nv2/\nchanges.json\n.nuxt/\ndocs/releases.json\ndocs/src/routes.json\ndocs/src/faq-routes.json\ndocs/src/tool-routes.json\ndocs/src/_index.js\ndocs/sitemap.txt\ndocs/algolia.json\n/src/demos/**/_index.vue\nyarn-error.log\n.vscode\n" }, { "path": ".npmignore", "content": "build/\ndemo/\ndist/\ndocs/\nnode_modules/\npackages/\nexamples/\ntest/\n/src/*.vue\n/src/*.js\n/src/*.html\n/src/assets/\n/src/demos/\nfavicon.ico\nlogo.png\nCNAME\ncircle.yml\nbower.json\n/assets/\n.babelrc\ndocs/\n*.vue.vux.*\nnuxt/\nyarn.lock\n" }, { "path": ".travis.yml", "content": "language: node_js\nnode_js:\n- 7\nos: linux\ncache:\n yarn: true\nbranches:\n only:\n - v2\ninstall:\n- |\n yarn install\nscript:\n- |\n npm run lint && npm run test\nafter_success:\n- |\n cat ./test/unit/coverage/lcov.info | ./node_modules/.bin/codecov" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) 2016-present, Airyland\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE." }, { "path": "README.md", "content": "

\n \n \n \n

\n

Be Cool with Vue@^2.3.0 and WeUI.

\n\n

\n \n \"\"\n \n
\n \n Live Demo >>\n \n
\n
\n \n \"\"\n \n \n \"\"\n \n \n \"\"\n \n
\n
\n \n \"\"\n \n \n \"\"\n \n
\n \n \"\"\n \n \n \"\"\n \n \n \"\"\n \n
\n \n \"\"\n \n \n \"\"\n \n \n \"\"\n \n \n \"\"\n \n
\n
\n

\n\n## Sponsors\n\n

\n \n \n \n

\n\n\n## Requirements\n\n+ vue@^2.3.0(for .sync modifier)\n+ webpack@^2.0\n+ node@^7.6(development)\n\n## Docs\n\n+ [中文文档](https://vux.li/)\n+ English(working)\n\n## Quick Start\n\n> [vux2 template](https://github.com/airyland/vux2) is directly modified from Vue official [webpack template](https://github.com/vuejs-templates/webpack).\n\n``` bash\nnpm install vue-cli -g\nvue init airyland/vux2 projectPath\n\ncd projectPath\nnpm install // or yarn\nnpm run dev // or yarn dev\n```\n\n## Maintainers\n\n+ [airyland](https://github.com/airyland)\n+ [lichunqiang](https://github.com/lichunqiang)\n+ [graysheeep](https://github.com/graysheeep)\n+ [unclay](https://github.com/unclay)\n+ [wg5945](https://github.com/wg5945)\n+ [Sapphire2k](https://github.com/Sapphire2k)\n\n## Vux is Inspired or Powered By:\n\n+ [Vue](https://github.com/vuejs/vue)\n+ [WeUI](https://github.com/weui/weui)\n+ [FrozenUI](https://github.com/frozenui/frozenui)\n+ [Ant Design](https://github.com/ant-design/ant-design)\n+ [Ant Design Mobile](http://github.com/ant-design/ant-design-mobile)\n+ [XScroll](https://github.com/huxiaoqi567/xscroll)\n+ [Ionic](https://github.com/driftyco/ionic)\n+ [SUI Mobile](https://github.com/sdc-alibaba/SUI-Mobile)\n+ [PhotoSwipe](https://github.com/dimsemenov/PhotoSwipe)\n+ [WePayUI](https://github.com/wepayui/wepayui)\n+ [autosize](https://github.com/jackmoore/autosize)(MIT)\n+ [buefy](https://github.com/buefy/buefy)\n\n## License\n\n[MIT](https://github.com/airyland/vux/blob/v2/LICENSE)\n" }, { "path": "build/build-components.js", "content": "'use strict'\nprocess.env.NODE_ENV = 'production'\n\n/**\n * --locale='zh-CN'\n * --namespace='vux'\n * --components=Group,Cell\n */\n\nvar argv = require('yargs').argv\nvar namespace = argv.namespace || 'vux'\n\nconst { build } = require('./umd-helper')\n\nvar isBuildAll = !argv.components\nvar buildComponents = argv.components ? argv.components.split(',') : []\n\nlet config = require('./webpack.prod.conf.js')\nconst vuxConfig = require('./vux-config')\nvuxConfig.plugins.forEach(function (plugin) {\n if (plugin.name === 'i18n') {\n plugin.vuxStaticReplace = true\n plugin.vuxLocale = argv['locale'] || 'zh-CN'\n }\n})\n\nconst webpack = require('webpack')\nconst mkdirp = require('mkdirp')\nconst fs = require('fs')\nconst touch = require('touch')\nconst path = require('path')\n\nmkdirp.sync(path.resolve(__dirname, '../dist/plugins'))\nmkdirp.sync(path.resolve(__dirname, '../dist/styles'))\n\nlet list = require(path.resolve(__dirname, '../src/datas/vux_component_list.json'))\nconst maps = require(path.resolve(__dirname, '../src/components/map.json'))\n\n// 查找在maps里但不在list里的组件\nlet others = []\nfor (let i in maps) {\n let match = list.filter(function (one) {\n return _camelCase(one.name) === i\n })\n if (match.length === 0 && !/Plugin|Data|Directive|Filter|Item|NOTICE|Demo|Dev|Tool|String|Number|number|format|md5|base64|cookie/.test(i)) {\n others.push({\n name: toDash(i),\n importName: i,\n path: maps[i]\n })\n }\n}\n\nothers.push({\n name: 'swiper-item',\n importName: 'SwiperItem',\n path: maps['SwiperItem']\n})\n\nvar ExtractTextPlugin = require('extract-text-webpack-plugin')\nvar co = require('co')\nvar thunkify = require('thunkify')\nvar pkg = require(path.resolve(__dirname, '../package.json'))\n\nvar utils = require('./utils')\nconfig.devtool = false\nconfig.plugins = config.plugins.slice(0, -2)\nconfig.plugins.forEach((one, index) => {\n if (one.constructor.name === 'HtmlWebpackPlugin') {\n config.plugins.splice(index, 1)\n }\n if (one.constructor.name === 'ExtractTextPlugin') {\n config.plugins.splice(index, 1)\n }\n})\n\nconfig.output.assetsPublicPath = '/'\n\nlet isBuilding = false\n\nco(function* () {\n\n if (!buildComponents.length) {\n try {\n yield build(buildMainConfig(), 'vux')\n } catch (e) {\n console.log(e)\n }\n\n try {\n for (let n = 0; n < others.length; n++) {\n yield build(buildConfig(others[n]), others[n].name)\n }\n } catch (e) {\n console.log(e)\n }\n\n try {\n const pluginList = ['Confirm', 'Toast', 'Device', 'Alert', 'Loading', ' Wechat', 'Ajax']\n for (let j = 0; j < pluginList.length; j++) {\n yield build(buildPlugin(pluginList[j]), `Plugin ${pluginList[j]}`)\n }\n } catch (e) {\n console.log(e)\n }\n }\n\n if (buildComponents.length) {\n list = list.filter(function (one) {\n return buildComponents.indexOf(_camelCase(one.name)) > -1\n })\n }\n\n try {\n for (let i = 0; i < list.length; i++) {\n let one = list[i]\n const name = list[i].name\n if (one.items) {\n // build a commonjs bundle\n yield build(buildConfig({\n name: list[i].name + '-pack',\n importName: _camelCase(list[i].name),\n path: `src/components/${name}/index.js`\n }), `pack: ${list[i].name}`)\n\n for (let j = 0; j < one.items.length; j++) {\n one.name = one.items[j]\n one.path = maps[_camelCase(one.items[j])]\n one.importName = _camelCase(one.items[j])\n yield build(buildConfig(one), one.items[j])\n }\n } else {\n yield build(buildConfig(one), one.name)\n }\n }\n } catch (e) {\n console.log(e)\n }\n\n})\n\nfunction camelCase(input) {\n let str = input.toLowerCase().replace(/-(.)/g, function (match, group1) {\n return group1.toUpperCase();\n })\n str = str.replace(/_(.)/g, function (match, group1) {\n return group1.toUpperCase()\n });\n return str\n}\n\nfunction _camelCase(input) {\n let str = camelCase(input)\n return str.slice(0, 1).toUpperCase() + str.slice(1)\n}\n\nfunction buildMainConfig() {\n\n // list all components\n const list = require('../src/components/map.json')\n let code = `const _vux = {}\\n\nconst isBrowser = typeof window !== 'undefined'\\n`\n code += `isBrowser && (window.vux = _vux)\\n\\n`\n code += `import Style from '../styles/index.vue' // eslint-disable-line\\n`\n\n delete list['NOTICE']\n delete list['ChinaAddressV1Data']\n delete list['vuxTransferDom']\n\n for (let i in list) {\n const name = `${namespace}${i}`\n code += `import ${name} from '${list[i]}'\\n\n_vux['${name}'] = ${name}\\n`\n }\n\n code += `\nif (isBrowser) {\n for (let i in _vux) {\n window[i] = _vux[i]\n }\n}\\n`\n \n fs.writeFileSync(path.resolve(__dirname, '../src/components/index.js'), code)\n\n delete config.entry\n\n config.plugins.forEach((one, index) => {\n if (one.constructor.name === 'ExtractTextPlugin') {\n config.plugins.splice(index, 1)\n }\n })\n\n config.plugins.push(new ExtractTextPlugin({\n filename: `vux.min.css`\n }))\n\n config.entry = config.entry || {}\n config.entry['vux'] = 'src/components/index.js'\n config.output = {}\n config.output.libraryTarget = 'window'\n config.output.filename = `vux.min.js`\n config.output.path = path.resolve(__dirname, `../dist/`)\n delete config.__vueOptions__\n return config\n}\n\n// build plugins\nfunction buildPlugin(name) {\n delete config.entry\n\n config.plugins.forEach((one, index) => {\n if (one.constructor.name === 'ExtractTextPlugin') {\n config.plugins.splice(index, 1)\n }\n })\n\n config.plugins.push(new ExtractTextPlugin({\n filename: 'index.min.css'\n }))\n config.entry = config.entry || {}\n config.entry['plugin'] = `src/plugins/${name.toLowerCase()}/index.js`\n config.output = {}\n config.output.libraryTarget = 'umd'\n config.output.library = `${namespace}${name}Plugin`\n config.output.filename = `index.min.js`\n config.output.path = path.resolve(__dirname, `../dist/plugins/${name.toLowerCase()}`)\n delete config.__vueOptions__\n return config\n}\n\nfunction buildConfig(one, opts) {\n opts = opts || {}\n one.importName = one.importName || _camelCase(one.name)\n one.path = path.resolve(__dirname, '../' + (one.path || maps[one.importName]))\n\n delete config.entry\n\n config.plugins.forEach((one, index) => {\n if (one.constructor.name === 'ExtractTextPlugin') {\n config.plugins.splice(index, 1)\n }\n })\n\n config.plugins.push(new ExtractTextPlugin({\n filename: 'index.min.css'\n }))\n\n config.entry = {}\n config.entry[one.name] = one.path\n config.output = {}\n config.output.libraryTarget = 'umd'\n config.output.library = `${namespace}${one.importName}`\n config.output.filename = `index.min.js`\n config.output.path = path.resolve(__dirname, `../dist/components/${one.name}/`)\n delete config.__vueOptions__\n return config\n}\n\nfunction toDash(str) {\n return str.replace(/([A-Z])/g, function (m, w) {\n return '-' + w.toLowerCase();\n }).replace('-', '')\n}" }, { "path": "build/build-docs.js", "content": "'use strict'\nconst glob = require(\"glob\")\nconst fs = require('fs')\nconst yaml = require('js-yaml')\nconst path = require('path')\nconst _ = require('lodash')\nconst mkdirp = require('mkdirp')\nconst rimraf = require('rimraf')\nconst semver = require('semver')\nconst sortObj = require('sort-object')\n\nmkdirp.sync(path.resolve(__dirname, '../docs/zh-CN/changelog'))\nmkdirp.sync(path.resolve(__dirname, '../docs/en/changelog'))\nmkdirp.sync(path.resolve(__dirname, '../docs/zh-CN/components'))\nmkdirp.sync(path.resolve(__dirname, '../docs/en/components'))\n\nconst aliasMap = {\n Base64Tool: 'base64',\n Md5Tool: 'md5',\n CookieTool: 'cookie',\n CommaTool: 'numberComma',\n PadTool: 'numberPad',\n RandomTool: 'numberRandom',\n FormatTool: 'dateFormat',\n TrimTool: 'stringTrim',\n QuerystringTool: 'querystring',\n DebounceTool: 'debounce',\n ThrottleTool: 'throttle'\n}\n\nlet tMaps = {\n '组件列表': 'Components',\n '该组件已经停止维护。': 'This Component is Deprecated. ',\n '名字': 'name',\n '类型': 'type',\n '参数': 'params',\n '默认': 'default',\n '说明': 'description',\n '该文件为自动生成，请不要修改': 'THIS FILE IS AUTOGENERATED, DONOT EDIT IT',\n '进入demo页面': 'Demo page',\n '编辑文档': 'Edit document',\n 'demo源码': 'Demo source',\n '版本': 'version'\n}\n\nfunction getPath(dir) {\n return path.join(__dirname, dir)\n}\nlet gComponents = []\n\nlet maps = {}\nsaveMaps('numberRange', 'src/tools/number/range.js')\nsaveMaps('dateRange', 'src/tools/date/range.js')\nsaveMaps('TransferDom', 'src/directives/transfer-dom/index.js')\nsaveMaps('trim', 'src/tools/string/trim')\n\n// add AlertModule\nsaveMaps('AlertModule', 'src/plugins/alert/module')\n\nfunction saveMaps(key, value) {\n if (key === 'RangeTool') {\n return\n }\n if (/test|fixture/.test(value)) {\n return\n }\n if (/vux/.test(value)) {\n let index = value.indexOf('src/components')\n if (/Filter$/.test(key)) {\n index = value.indexOf('src/filters')\n }\n if (/Data$/.test(key)) {\n index = value.indexOf('src/datas')\n }\n if (/Plugin$/.test(key)) {\n index = value.indexOf('src/plugins')\n }\n if (/Directive$/.test(key)) {\n index = value.indexOf('src/directives')\n }\n if (/Tool$/.test(key)) {\n index = value.indexOf('src/tools')\n }\n value = value.slice(index, value.length)\n }\n maps[key] = value.replace('../', '')\n if (aliasMap[key]) {\n maps[aliasMap[key]] = maps[key]\n delete maps[key]\n }\n // sort\n const list = []\n for (let i in maps) {\n list.push([i, maps[i]])\n }\n list.sort(function (a, b) {\n return a[0].toLowerCase() > b[0].toLowerCase() ? 1 : -1\n })\n list.unshift(['NOTICE', 'THIS FILE IS AUTOGENERATED BY npm run build-docs'])\n\n const _list = {}\n list.forEach(function (one) {\n _list[one[0]] = one[1]\n })\n fs.writeFileSync(getPath('../src/components/map.json'), JSON.stringify(_list, null, 2))\n}\n\nglob(getPath(\"../src/plugins/**/index.js\"), {}, function (er, files) {\n files.forEach(function (file) {\n let name = getComponentName(file)\n name = _camelCase(name)\n saveMaps(name + 'Plugin', file)\n })\n})\n\nglob(getPath(\"../src/tools/**/*.js\"), {}, function (er, files) {\n files.forEach(function (file) {\n let name = getComponentName(file)\n name = _camelCase(name)\n saveMaps(name + 'Tool', file)\n })\n})\n\nglob(getPath(\"../src/directives/**/index.js\"), {}, function (er, files) {\n files.forEach(function (file) {\n let name = getComponentName(file)\n name = _camelCase(name)\n saveMaps(name + 'Directive', file)\n })\n})\n\nglob(getPath(\"../src/filters/*.js\"), {}, function (er, files) {\n files.forEach(function (file) {\n let name = getComponentName(file)\n name = _camelCase(name)\n saveMaps(name + 'Filter', file)\n })\n})\n\nglob(getPath(\"../src/datas/*.json\"), {}, function (er, files) {\n files.forEach(function (file) {\n let name = getComponentName(file)\n name = _camelCase(name)\n saveMaps(name + 'Data', file)\n })\n})\n\nglob(getPath(\"../src/components/**/*.vue\"), {}, function (er, files) {\n // 生成组件路径映射\n // 语言配置\n let rs = {}\n let enRs = {}\n let zhCnRs = {}\n\n files.forEach(function (file) {\n\n let name = getComponentName(file)\n\n const importName = _camelCase(name)\n\n saveMaps(importName, file)\n\n let content = fs.readFileSync(file, 'utf-8')\n if (content.indexOf('') > -1) {\n\n const name = getComponentName(file)\n\n const results = content.match(/]*>([\\s\\S]*?)<\\/i18n>/)\n const json = yaml.safeLoad(results[1])\n\n rs = Object.assign(rs, setKey(json, name))\n\n for (let i in json) {\n let enItem = {}\n enRs[i] = json[i].en\n }\n\n for (let i in json) {\n zhCnRs[i] = json[i]['zh-CN']\n }\n\n }\n\n })\n\n let dump = yaml.safeDump({\n en: enRs,\n 'zh-CN': zhCnRs\n })\n\n fs.writeFileSync(getPath('../src/locales/all.yml'), dump)\n fs.writeFileSync(getPath('../src/locales/en.yml'), yaml.safeDump(enRs))\n fs.writeFileSync(getPath('../src/locales/zh-CN.yml'), yaml.safeDump(zhCnRs))\n})\n\nfunction setKey(object, name) {\n for (let i in object) {\n object[`vux.${name}.${i}`] = object[i]\n delete object[i]\n }\n return object\n}\n\nglob(getPath('../src/**/metas.yml'), {}, function (err, files) {\n render(files)\n})\n\nglob(getPath('../src/tools/**/metas.yml'), {}, function (err, files) {\n let rs = []\n files.forEach(function (file) {\n const name = file.split('tools/')[1].replace('/metas.yml', '')\n try {\n const json = yaml.safeLoad(fs.readFileSync(file, 'utf-8'))\n rs.push({\n name: name,\n metas: json\n })\n } catch (e) {\n console.log('yml 出错')\n }\n })\n fs.writeFileSync(getPath('../src/tools/changes.json'), JSON.stringify(rs, null, 2))\n})\n\nglob(getPath('../src/plugins/**/metas.yml'), {}, function (err, files) {\n let rs = []\n files.forEach(function (file) {\n const name = file.split('plugins/')[1].replace('/metas.yml', '')\n const json = yaml.safeLoad(fs.readFileSync(file, 'utf-8'))\n rs.push({\n name: name,\n metas: json\n })\n })\n fs.writeFileSync(getPath('../src/plugins/changes.json'), JSON.stringify(rs, null, 2))\n})\n\nglob(getPath('../src/directives/**/metas.yml'), {}, function (err, files) {\n let rs = []\n files.forEach(function (file) {\n const name = file.split('directives/')[1].replace('/metas.yml', '')\n const json = yaml.safeLoad(fs.readFileSync(file, 'utf-8'))\n rs.push({\n name: name,\n metas: json\n })\n })\n fs.writeFileSync(getPath('../src/directives/changes.json'), JSON.stringify(rs, null, 2))\n})\n\nfunction getComponentName(path) {\n let list = path.split('/')\n if (list[list.length - 1] === 'index.vue' || list[list.length - 1] === 'index.js') {\n return list[list.length - 2]\n } else if (list[list.length - 1] === 'metas.yml') {\n return list[list.length - 2]\n } else if (/\\.json/.test(path)) {\n return list[list.length - 1].replace('.json', '')\n } else if (/\\.js/.test(path)) {\n return list[list.length - 1].replace('.js', '')\n } else {\n return list[list.length - 1].replace('.vue', '')\n }\n}\n\nfunction render(files, tag) {\n let components = []\n let infos = []\n\n files.forEach(function (file) {\n\n const name = getComponentName(file)\n const content = fs.readFileSync(file, 'utf-8')\n let json = {}\n\n try {\n json = yaml.safeLoad(content)\n } catch (e) {\n console.log('错误', e)\n }\n let rs = {\n name: name,\n importName: _camelCase(name),\n deprecatedInfo: json.deprecated_info || '',\n props: json.props,\n events: json.events,\n methods: json.methods,\n slots: json.slots,\n extra: json.extra,\n after_extra: json.after_extra,\n tags: json.tags,\n items: json.items,\n json: json\n }\n\n let item = {\n name: name,\n icon: json.icon,\n color: json.color,\n importName: json.importName,\n items: json.items,\n }\n if (json.category) {\n item = {\n ...item,\n category_en: json.category.en,\n 'category_zh-CN': json.category['zh-CN'],\n category_order: json.category_order || 998\n }\n }\n\n if (!tag && item.icon && item.name) {\n const isDir = fs.existsSync(path.join(__dirname, `../src/demos/${item.name}/`))\n item.hasHome = isDir\n gComponents.push(item)\n }\n\n if (json.icon) {\n infos.push({\n name,\n icon: json.icon,\n importName: json.importName,\n metas: json\n })\n }\n\n if (tag && json.tags && json.tags.en && json.tags.en.indexOf(tag) === -1) {\n return\n }\n if (tag && json.tags && !json.tags.en) {\n return\n }\n if (tag && !json.tags) {\n return\n }\n\n if (json.icon) {\n rs.icon = json.icon\n }\n if (json.color) {\n rs.color = json.color\n }\n if (json.import_code) {\n rs.import_code = json.import_code\n }\n rs.status = json.status || 'maintaining'\n if (rs.icon && rs.name) {\n components.push(rs)\n } else {}\n\n })\n if (!tag) {\n gComponents = _.uniqBy(gComponents, 'name')\n fs.writeFileSync(getPath('../src/datas/vux_component_list.json'), JSON.stringify(gComponents, null, 2))\n }\n\n buildChanges(infos)\n buildChanges(infos, 'en')\n\n let langs = ['zh-CN', 'en']\n for (var i = 0; i < langs.length; i++) {\n let lang = langs[i]\n let docs = ''\n if (!tag) {\n // 生成docs\n docs += `---\nnav: ${lang}\n---\n\n \\n## ${t('组件列表')}`\n } else {\n // 生成docs\n docs += `---\nnav: ${lang}\n---\n\n \\n## ${tag}`\n }\n\n components.forEach(function (one) {\n docs += '\\n\\n---\\n'\n docs += `\\n### ${one.importName}_COM`\n\n docs += `\\n${t('编辑文档', lang)}`\n docs += `\\n  ${t(\"进入demo页面\", lang)}`\n docs += `\\n  ${t(\"demo 原始链接\", lang)}`\n docs += `\\n  ${t(\"demo源码\", lang)}\\n`\n\n if (one.status === 'deprecated') {\n docs += `\\n

${t('该组件已经停止维护。')}${one.deprecatedInfo ? one.deprecatedInfo[lang] : ''}

\\n`\n }\n\n if (one.import_code) {\n if (one.import_code !== ' ') {\n docs += '\\n``` js'\n docs += `\\n${one.import_code}`\n docs += '\\n```\\n'\n }\n } else {\n docs += '\\n``` js'\n docs += `\\nimport { ${one.importName} } from 'vux'`\n docs += '\\n```\\n'\n }\n\n if (one.extra && typeof one.extra === 'string' && lang === 'zh-CN') {\n docs += '\\n' + one.extra + '\\n'\n }\n if (one.extra && typeof one.extra === 'object' && one.extra[lang]) {\n docs += '\\n' + one.extra[lang] + '\\n'\n }\n\n if (one.props || one.slots) {\n docs = getComponentInfo(one, lang, docs)\n }\n\n if (one.items) {\n\n docs = getComponentInfo({\n name: one.name,\n hideDemo: one.items.length > 1,\n props: one.json[one.items[0]].props,\n sub_extra: one.json[one.items[0]].sub_extra,\n slots: one.json[one.items[0]].slots,\n events: one.json[one.items[0]].events,\n methods: one.json[one.items[0]].methods\n }, lang, docs, one.items[0])\n\n docs = getComponentInfo({\n name: one.name,\n json: one.json,\n hideDemo: one.items.length > 2,\n props: one.json[one.items[1]].props,\n sub_extra: one.json[one.items[1]].sub_extra,\n slots: one.json[one.items[1]].slots,\n events: one.json[one.items[1]].events,\n methods: one.json[one.items[1]].methods\n }, lang, docs, one.items[1])\n\n if (one.items.length === 3) {\n docs = getComponentInfo({\n name: one.name,\n json: one.json,\n props: one.json[one.items[2]].props,\n sub_extra: one.json[one.items[2]].sub_extra,\n slots: one.json[one.items[2]].slots,\n events: one.json[one.items[2]].events,\n methods: one.json[one.items[2]].methods\n }, lang, docs, one.items[2])\n }\n }\n\n // after extra\n if (one.after_extra) {\n docs += '\\n' + (one.after_extra[lang] || one.after_extra) + '\\n'\n }\n /**\n docs += `\\n
\n Playground is coming soon\n
\\n`\n */\n docs += `\\n\\n\\n`\n })\n }\n\n}\n\nglob(getPath(\"../src/styles/*.yml\"), {}, function (er, files) {\n let infos = []\n files.forEach(function (file) {\n const content = fs.readFileSync(file, 'utf-8')\n const info = yaml.safeLoad(content)\n infos.push(info)\n })\n buildCssDocs(infos)\n})\n\nfunction buildCssDocs(infoList) {\n let docs = `---\nnav: zh-CN\n---\\n`\n infoList.forEach(function (one) {\n docs += `\\n## ${one.name.en}\\n`\n docs += `${one.doc}\\n\\n`\n })\n fs.writeFileSync(getPath(`../docs/zh-CN/css.md`), docs)\n}\n\nfunction getVersion(version) {\n let rs = ''\n if (!version) {\n rs = ''\n } else if (version === 'next') {\n rs = '下个版本'\n } else {\n rs = version\n }\n return `${rs}`\n}\n\nfunction getComponentInfo(one, lang, docs, name) {\n if (one.props || one.slots) {\n if (name) {\n docs += `\\n${_camelCase(name)}\\n`\n }\n }\n if (one.sub_extra) {\n docs += `\\n${one.sub_extra}\\n`\n }\n if (one.props) {\n // prop title\n docs += `\\nProps\\n`\n docs += `\\n| ${t('名字')} | ${t('类型')} | ${t('默认')} | version | ${t('说明')} |\n|-------|-------|-------|-------|-------|\n`\n for (let i in one.props) {\n let prop = one.props[i][lang]\n docs += `| ${getKeyHTML(i)} | ${getTypeHTML(one.props[i].type)} | ${getColorHTML(one.props[i])} | ${getVersion(one.props[i].version)} | ${prop} |\\n`\n }\n }\n\n if (one.slots) {\n // slot title\n docs += `\\nSlots\\n`\n docs += `\\n| ${t('名字')} | ${t('说明')} | ${t('版本')} |\n|-------|-------|-------|\n`\n for (let i in one.slots) {\n let slot = one.slots[i][lang]\n docs += `| ${getKeyHTML(i)} | ${slot} | ${getVersion(one.slots[i].version)} |\\n`\n }\n }\n\n if (one.events) {\n // slot title\n docs += `\\nEvents\\n`\n docs += `\\n| ${t('名字')} | ${t('参数')} | ${t('说明')} | ${t('版本')} |\n|-------|-------|-------|-------|\n`\n for (let i in one.events) {\n let intro = one.events[i][lang]\n let params = one.events[i]['params']\n docs += `| ${getKeyHTML(i)} | ${params || ' '} | ${intro} | ${getVersion(one.events[i].version)} |\\n`\n }\n }\n\n if (one.methods) {\n // slot title\n docs += `\\nMethods\\n`\n docs += `\\n| ${t('名字')} | ${t('参数')} | ${t('说明')} | ${t('版本')} |\n|-------|-------|-------|-------|\n`\n for (let i in one.methods) {\n let intro = one.methods[i][lang]\n let params = one.methods[i]['params']\n docs += `| ${getKeyHTML(i)} | ${params || ' '} | ${intro} |${getVersion(one.methods[i].version)} | \\n`\n }\n }\n\n // docs += `
`\n // docs += `\\n`\n // docs += `\\n\\nDemo\\n`\n // docs += `\\n
进入demo页面
\\n`\n docs += `\\n`\n // docs += `\\n\\nDemo\\n`\n\n if (one.name || name) {\n if (one.hideDemo !== true) {\n docs += `\\n${t(\"进入demo页面\")}\\n`\n }\n }\n\n // do not show change log in component list\n if (one.json && one.json.changes && one.hideDemo !== true && false) {\n let lastestVersion = Object.keys(one.json.changes)[0]\n docs += `\\n
Changes (${lastestVersion})\\n`\n\n docs += `\\n`\n }\n return docs\n}\n\nfunction getKeyHTML(key) {\n return `${key}`\n}\n\nfunction getTypeHTML(type) {\n type = type || 'String'\n if (/,/.test(type)) {\n const list = type.split(',').map(function (one) {\n return one.replace(/^\\s+|\\s+$/g, '')\n }).map(function (one) {\n return `${one}`\n })\n return list.join('
')\n } else {\n return `${type}`\n }\n}\n\nfunction getChangeTagHTML(str, fontSize = '15px') {\n const _split = str.split(']')\n const type = _split[0].replace('[', '')\n const content = _split[1]\n return `
  • ${type} ${content}
    • `\n}\n\nfunction getColorHTML(one) {\n one.default = typeof one.default === 'undefined' ? '' : one.default\n let value = one.default\n if (value === false) {\n return 'false'\n }\n if (!/#/.test(value)) {\n return value\n } else {\n return `${value}`\n }\n}\n\nfunction t(key, lang) {\n if (lang === 'zh-CN') {\n return key\n }\n return tMaps[key] || key\n}\n/**\nfunction transform (object, name) {\n let rs = {\n en: {},\n 'zh-CN': {}\n }\n for(let i in object) {\n rs['en'][`vux.${name}.${i}`] = object[i]['en']\n rs['zh-CN'][`vux.${name}.${i}`] = object[i]['zh-CN']\n }\n return rs\n}\n**/\n\nfunction camelCase(input) {\n let str = input.toLowerCase().replace(/-(.)/g, function (match, group1) {\n return group1.toUpperCase();\n });\n\n str = str.replace(/_(.)/g, function (match, group1) {\n return group1.toUpperCase();\n });\n return str\n}\n\nfunction _camelCase(input) {\n let str = camelCase(input)\n return str.slice(0, 1).toUpperCase() + str.slice(1)\n}\n\nfunction parseChange(str) {\n str = str.replace(/#(\\d+)\\s?/g, function (a, b) {\n return `#${b} `\n })\n str = str.replace(/@(\\w+)\\s?/g, function (a, b) {\n return `${a}`\n })\n return str\n}\n\nconst strMap = {\n en: 'not release yet',\n 'zh-CN': '未发布'\n}\nfunction parseTag(firstTag, tag, lang) {\n if (tag === 'next') {\n return `${tag} (${strMap[lang]})`\n }\n return tag\n}\n\nfunction buildChanges(infos, lang = 'zh-CN') {\n const toolInfos = require(getPath('../src/tools/changes.json'))\n const pluginInfos = require(getPath('../src/plugins/changes.json'))\n const directiveInfos = require(getPath('../src/directives/changes.json'))\n\n infos = infos.concat(toolInfos)\n infos = infos.concat(pluginInfos)\n infos = infos.concat(directiveInfos)\n let rs = {}\n infos.forEach(one => {\n let name = one.name\n let metas = one.metas\n if (metas && metas.changes) {\n for (let i in metas.changes) {\n if (!rs[i]) {\n rs[i] = {}\n }\n rs[i][name] = metas.changes[i][lang]\n }\n }\n })\n const titleMapSum = {\n en: 'releases',\n 'zh-CN': '发布日志'\n }\n const suffixMap = {\n en: ' | VUX - Vue.js Mobile UI Component Framework',\n 'zh-CN': ' | VUX - 基于 WeUI 和 Vue 的移动端组件库'\n }\n let str = `---\ntitle: VUX ${titleMapSum[lang]}${suffixMap[lang]}\n---\\n\n\n# VUX ${titleMapSum[lang]}`\n\n rs = sortObj(rs, {\n sort: function (a, b) {\n if (a === 'next') {\n return -1\n }\n if (b === 'next') {\n return 1\n }\n return semver.gt(a, b) ? -1 : 1\n }\n })\n\n let firstTag = Object.keys(rs)[0]\n let releases = {}\n\n let n = 0\n for (let i in rs) {\n releases[i] = {}\n // releases += `\\n # ${i}\\n`\n if (/next/.test(parseTag(firstTag, i, lang))) {\n str += `\\n

    ${parseTag(firstTag, i, lang)}

    \\n`\n } else {\n str += `\\n

    ${parseTag(firstTag, i)}

    \\n`\n }\n for (let j in rs[i]) {\n // releases += `\\n## ${_camelCase(j)}\\n`\n releases[i][j] = []\n\n rs[i][j] && rs[i][j].forEach(one => {\n releases[i][j].push(one)\n })\n\n if (n <= 2) {\n str += `\\n### ${_camelCase(j)}\\n`\n str += ``\n str += `\\n`\n }\n }\n n++\n }\n\n const titleMap = {\n en: 'released',\n 'zh-CN': '发布日志'\n }\n\n for (let i in releases) {\n const release = releases[i]\n let file = getPath(`../docs/${lang}/changelog/${i}.md`)\n let htmlFile = getPath(`../docs/changes/${lang}/${i}.html`)\n\n let data = {\n lang: lang,\n version: i,\n title: `${i}发布`,\n components: []\n }\n let content = `---\ntitle: VUX ${_camelCase(i)} ${titleMap[lang]}${suffixMap[lang]}\n---\\n\n\n# VUX ${_camelCase(i)} ${titleMap[lang]}`\n for (let j in release) {\n content += `\\n

    ${_camelCase(j)}

    \\n`\n content += ''\n data.components.push({\n name: j,\n list: release[j].map(one => {\n return {\n change: one\n }\n })\n })\n fs.writeFileSync(file, content)\n }\n }\n\n str += '\\n'\n fs.writeFileSync(getPath(`../docs/${lang}/changelog/changelog.md`), str)\n}\n" }, { "path": "build/build-main.js", "content": "'use strict'\n\nconst fs = require('fs')\nconst path = require('path')\n\nconst maps = require(path.resolve(__dirname, '../src/components/map.json'))\ndelete maps.NOTICE\n\nconst target = path.resolve(__dirname, '../index.js')\n\nlet str = `// THIS FILE IS ONLY FOR IDE ENTRY CHECKING NOT FOR REAL USAGE\\n\\n`\nstr += `console.warn('VUX: 如果你看到这一行，说明 vux-loader 配置有问题或者代码书写规范的原因导致无法解析成按需引入组件，会导致打包体积过大。请升级到最新版本 vux-loader，建议开启 eslint(standard)。')\\n\\n`\nfor (let i in maps) {\n str += `import ${i} from './${maps[i]}'\\n`\n}\n\nstr += '\\nexport {\\n'\nfor (let i in maps) {\n str += ` ${i}${i === 'XTextarea' ? '' : ','}\\n`\n}\nstr += '}'\n\nfs.writeFileSync(target, str)\n" }, { "path": "build/build-styles.js", "content": "const postcss = require('postcss')\nconst syntax = require('postcss-less')\nconst path = require('path')\nconst fs = require('fs')\nconst less = require('less')\nconst shell = require('shelljs')\n\nconst distPath = path.resolve(__dirname, `../dist/styles/`)\nshell.rm('-rf', distPath)\nshell.mkdir('-p', distPath)\n\nvar pkg = require(path.join(__dirname, '../package.json'))\n\nconst p = path.resolve(__dirname, '../src/styles/')\n\nfs.readdir(p, function (err, files) {\n if (err) {\n throw err\n }\n files.filter(function (file) {\n return !fs.statSync(path.join(p, file)).isDirectory() && /less/.test(file) && !/index|variable|theme/.test(file)\n }).forEach(function (file) {\n parse(file)\n })\n})\n\nconst getPath = function (name) {\n return path.resolve(__dirname, `../dist/styles/${name}`)\n}\n\nfunction parse (file) {\n var code = fs.readFileSync(path.resolve(__dirname, `../src/styles/${file}`), 'utf-8')\n less.render(code, {\n compress: true,\n paths: [path.resolve(__dirname, '../src/styles')]\n },function (e, output) {\n if (e) {\n throw e\n } else {\n postcss([require('autoprefixer')(['iOS >= 7', 'Android >= 4.1'])])\n .process(output.css, {\n syntax: syntax\n })\n .then(function (result) {\n const dist = getPath(file.replace('less', 'css'));\n fs.writeFileSync(dist, result.css);\n })\n .catch(function(e){\n console.log(e)\n })\n }\n })\n}\n" }, { "path": "build/build.js", "content": "// https://github.com/shelljs/shelljs\nrequire('./check-versions')()\n\nprocess.env.NODE_ENV = 'production'\n\nvar ora = require('ora')\nvar path = require('path')\nvar chalk = require('chalk')\nvar shell = require('shelljs')\nvar webpack = require('webpack')\nvar config = require('../config')\nvar webpackConfig = require('./webpack.prod.conf')\n\nvar spinner = ora('building for production...')\nspinner.start()\n\nvar assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)\nshell.rm('-rf', assetsPath)\nshell.mkdir('-p', assetsPath)\nshell.config.silent = true\nshell.cp('-R', 'static/*', assetsPath)\nshell.config.silent = false\n\nwebpack(webpackConfig, function (err, stats) {\n spinner.stop()\n if (err) throw err\n process.stdout.write(stats.toString({\n colors: true,\n modules: false,\n children: false,\n chunks: false,\n chunkModules: false\n }) + '\\n\\n')\n\n console.log(chalk.cyan(' Build complete.\\n'))\n console.log(chalk.yellow(\n ' Tip: built files are meant to be served over an HTTP server.\\n' +\n ' Opening index.html over file:// won\\'t work.\\n'\n ))\n})\n" }, { "path": "build/check-versions.js", "content": "var chalk = require('chalk')\nvar semver = require('semver')\nvar packageConfig = require('../package.json')\n\nfunction exec (cmd) {\n return require('child_process').execSync(cmd).toString().trim()\n}\n\nvar versionRequirements = [\n {\n name: 'node',\n currentVersion: semver.clean(process.version),\n versionRequirement: packageConfig.engines.node\n },\n {\n name: 'npm',\n currentVersion: exec('npm --version'),\n versionRequirement: packageConfig.engines.npm\n }\n]\n\nmodule.exports = function () {\n var warnings = []\n for (var i = 0; i < versionRequirements.length; i++) {\n var mod = versionRequirements[i]\n if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {\n warnings.push(mod.name + ': ' +\n chalk.red(mod.currentVersion) + ' should be ' +\n chalk.green(mod.versionRequirement)\n )\n }\n }\n\n if (warnings.length) {\n console.log('')\n console.log(chalk.yellow('To use this template, you must update following to modules:'))\n console.log()\n for (var i = 0; i < warnings.length; i++) {\n var warning = warnings[i]\n console.log(' ' + warning)\n }\n console.log()\n process.exit(1)\n }\n}\n" }, { "path": "build/dev-doc.js", "content": "const watch = require('node-watch')\nconst path = require('path')\nconst dir = path.resolve(__dirname, '../src/components')\n\nwatch(dir, function (filename) {\n if (/metas\\.yml/.test(filename)) {\n delete require.cache[require.resolve('./build-docs.js')]\n require('./build-docs.js')\n }\n})" }, { "path": "build/document.js", "content": "'use strict'\n\nconst glob = require(\"glob\")\nconst path = require('path')\nconst yaml = require('js-yaml')\nconst fs = require('fs')\n\nfunction getPath(dir) {\n return path.join(__dirname, dir)\n}\n\nglob(getPath('../src/**/metas.yml'), {}, function (err, files) {\n for(let file of files) {\n console.log(file)\n let content = fs.readFileSync(file, 'utf-8')\n let doc = yaml.safeLoad(content)\n for (let prop in doc.props) {\n console.log(prop)\n let info = doc.props[prop]\n if (!info['en'] || !info['zh-CN']) {\n throw('缺少多语言文档')\n }\n }\n \n }\n})" }, { "path": "build/fetch-github.js", "content": "'use strict'\n\nconst fetch = require('node-fetch')\nconst path = require('path')\nconst fs = require('fs')\nconst relesesPath = path.resolve(__dirname, '../docs/releases.json')\n\nconst get = async function () {\n const res =await fetch('https://api.github.com/repos/airyland/vux/releases')\n return await res.json()\n}\n\nget().then(res => {\n fs.writeFileSync(relesesPath, JSON.stringify(res, null, 2))\n})" }, { "path": "build/less.js", "content": "const less = require('less')\nconst path = require('path')\nconst fs = require('fs')\nconst file = path.resolve(__dirname, '../src/styles/reset.less')\n\nless.render(fs.readFileSync(file, 'utf8'), {\n paths: [path.resolve(__dirname, '../src/styles')]\n},function (e, output) {\n console.log(e, output)\n})" }, { "path": "build/pre-publish.js", "content": "const glob = require('glob')\nconst path = require('path')\nconst fs = require('fs')\nfunction getPath(dir) {\n return path.join(__dirname, dir)\n}\nconst argv = require('yargs').argv\nconsole.log('argv', argv)\nconst version = argv.version\nif (!version) {\n throw('no version specified')\n}\n\nconst pkg = require(getPath('../package.json'))\nconst pkgContent = fs.readFileSync(getPath('../package.json'), 'utf-8')\nfs.writeFileSync(getPath('../package.json'), pkgContent.replace(pkg.version, version.replace('v', '')))\n\nglob(getPath('../src/**/**/metas.yml'), {}, function (err, files) {\n let rs = []\n files.forEach(function (file) {\n console.log(file)\n let content = fs.readFileSync(file, 'utf-8')\n content = content.split('\\n')\n content = content.map(line => {\n console.log(line)\n if (/next:/.test(line)) {\n return line.replace('next', `${version}`)\n } else if (/version: next/.test(line)) {\n return line.replace('next', `${version}`)\n }\n return line\n })\n fs.writeFileSync(file, content.join('\\n'))\n })\n})\n" }, { "path": "build/simulate.sh", "content": "mkdir node_modules/vux\nmkdir node_modules/vux/src\nrm node_modules/vux/package.json\ncp package.json node_modules/vux/\ncp -r src/ node_modules/vux/src/" }, { "path": "build/umd-helper.js", "content": "'use strict'\n\nconst webpack = require('webpack')\nconst mkdirp = require('mkdirp')\nconst fs = require('fs')\nconst touch = require('touch')\nconst path = require('path')\nvar co = require('co')\nvar thunkify = require('thunkify')\n\nvar build = thunkify(function (config, name, cb) {\n let start = new Date().getTime()\n console.log(`start:${name}`)\n webpack(config, function (err, stats) {\n if (!config.entry.vux) {\n mkdirp.sync(path.resolve(config.output.path))\n touch.sync(path.resolve(config.output.path, './index.min.css'))\n }\n var jsonStats = stats.toJson()\n var assets = jsonStats.assets[0]\n var size = assets.size / 1024\n size = size.toFixed(2) + 'k'\n console.log('size', size)\n console.log('time', (new Date().getTime() - start) / 1000 + 's')\n console.log('----------------')\n cb && cb(err)\n })\n})\n\nvar ExtractTextPlugin = require('extract-text-webpack-plugin')\n\nmodule.exports = {\n build,\n ExtractTextPlugin\n}" }, { "path": "build/utils.js", "content": "'use strict'\nconst path = require('path')\nconst config = require('../config')\nconst ExtractTextPlugin = require('extract-text-webpack-plugin')\nconst pkg = require('../package.json')\n\nexports.assetsPath = function (_path) {\n const assetsSubDirectory = process.env.NODE_ENV === 'production'\n ? config.build.assetsSubDirectory\n : config.dev.assetsSubDirectory\n return path.posix.join(assetsSubDirectory, _path)\n}\n\nexports.cssLoaders = function (options) {\n options = options || {}\n\n const cssLoader = {\n loader: 'css-loader',\n options: {\n sourceMap: options.sourceMap\n }\n }\n\n var postcssLoader = {\n loader: 'postcss-loader',\n options: {\n sourceMap: options.sourceMap\n }\n }\n\n // generate loader string to be used with extract text plugin\n function generateLoaders (loader, loaderOptions) {\n const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]\n if (loader) {\n loaders.push({\n loader: loader + '-loader',\n options: Object.assign({}, loaderOptions, {\n sourceMap: options.sourceMap\n })\n })\n }\n\n // Extract CSS when that option is specified\n // (which is the case during production build)\n if (options.extract) {\n return ExtractTextPlugin.extract({\n use: loaders,\n fallback: 'vue-style-loader'\n })\n } else {\n return ['vue-style-loader'].concat(loaders)\n }\n }\n\n // https://vue-loader.vuejs.org/en/configurations/extract-css.html\n return {\n css: generateLoaders(),\n postcss: generateLoaders(),\n less: generateLoaders('less'),\n sass: generateLoaders('sass', { indentedSyntax: true }),\n scss: generateLoaders('sass'),\n stylus: generateLoaders('stylus'),\n styl: generateLoaders('stylus')\n }\n}\n\n// Generate loaders for standalone style files (outside of .vue)\nexports.styleLoaders = function (options) {\n const output = []\n const loaders = exports.cssLoaders(options)\n for (const extension in loaders) {\n const loader = loaders[extension]\n output.push({\n test: new RegExp('\\\\.' + extension + '$'),\n use: loader\n })\n }\n return output\n}\n\nexports.createNotifierCallback = function () {\n const notifier = require('node-notifier')\n\n return (severity, errors) => {\n if (severity !== 'error') {\n return\n }\n const error = errors[0]\n\n const filename = error.file && error.file.split('!').pop()\n notifier.notify({\n title: pkg.name,\n message: severity + ': ' + error.name,\n subtitle: filename || '',\n icon: path.join(__dirname, 'logo.png')\n })\n }\n}\n" }, { "path": "build/vue-loader.conf.js", "content": "var utils = require('./utils')\nvar config = require('../config')\nvar isProduction = process.env.NODE_ENV === 'production'\n\nmodule.exports = {\n loaders: utils.cssLoaders({\n sourceMap: isProduction\n ? config.build.productionSourceMap\n : config.dev.cssSourceMap,\n extract: isProduction\n }),\n postcss: [\n require('autoprefixer')({\n browsers: ['iOS >= 7', 'Android >= 4.1']\n })\n ]\n}\n" }, { "path": "build/vux-config.js", "content": "'use strict'\n\nconst path = require('path')\nconst fs = require('fs')\nconst demoPath = path.resolve(__dirname, '../src/demo_list.json')\nconst glob = require('glob')\nconst match = path.join(__dirname, '../src/demos/*/*.vue')\nconst dir = path.join(__dirname, '../src/demos/')\nconst yaml = require('js-yaml')\nconst reg = /]*>([\\s\\S]*?)<\\/demo>/g\n\nconst argv = require('yargs').argv\nargv.simulate = argv.simulate || false\n\nconst isInclude = function (name, include) {\n let list = include.split(',')\n for (let i = 0; i < list.length; i++) {\n if (name.includes(list[i])) {\n return true\n }\n }\n return false\n}\n\nmodule.exports = {\n options: {\n vuxDev: !argv.simulate, // true\n vuxSetBabel: argv.simulate, // false\n vuxWriteFile: false,\n env: 'dev'\n },\n plugins: [\n 'vux-ui', 'inline-manifest',\n {\n name: 'duplicate-style',\n options: {\n cssProcessorOptions : {\n safe: true,\n zindex: false,\n autoprefixer: {\n add: true,\n \"browsers\": [\n \"iOS >= 7\",\n \"Android >= 4.1\"\n ]\n }\n }\n }\n },\n {\n name: 'progress-bar',\n envs: ['development']\n },\n {\n name: 'js-parser',\n test: /main\\.js/,\n fn: function (source) {\n this.addDependency(demoPath)\n let list = fs.readFileSync(demoPath, 'utf-8')\n list = JSON.parse(list)\n\n let groupList = []\n let dirs = {}\n const listDir = glob.sync(match).filter(one => {\n return !one.includes('_index.vue')\n }).map(one => {\n one = path.normalize(one)\n const component = one.replace(dir, '').replace('.vue', '').replace(path.sep, '/')\n let title = {\n en: 'EXAMPLE',\n 'zh-CN': 'EXAMPLE'\n }\n let order = 999\n const urlpath = '/components/' + component\n let name = one.replace(dir, '').split(path.sep)[0]\n if (!Array.isArray(dirs[name])) {\n dirs[name] = []\n }\n\n const code = fs.readFileSync(path.join(__dirname, `../src/demos/${component}.vue`), 'utf-8')\n\n const rs = code.match(reg)\n if (rs) {\n let meta = yaml.safeLoad(rs[0].replace('', '').trim().replace('', ''))\n if (typeof meta.title === 'string') {\n title.en = meta.title\n title['zh-CN'] = meta.title\n } else if (typeof meta.title === 'object') {\n title.en = meta.title.en\n title['zh-CN'] = meta.title['zh-CN']\n }\n if (meta.order) {\n order = meta.order * 1\n }\n }\n dirs[name].push({\n title,\n path: urlpath,\n order\n })\n return component + '#' + urlpath\n })\n list = list.concat(listDir)\n\n for (let dir in dirs) {\n dirs[dir].sort((a, b) => {\n return a.order > b.order ? 1 : -1\n })\n const file = `\n\n\n`\n fs.writeFileSync(path.join(__dirname, `../src/demos/${dir}/_index.vue`), file)\n groupList.push(`${dir}/_index#/components/${dir}/home`)\n\n }\n list = list.concat(groupList)\n\n if (argv.demo) {\n list = list.filter(item => {\n return item.indexOf(argv.demo) > -1\n })\n }\n let str = []\n list.forEach(one => {\n let filename = one\n let path = `/component/${toDash(one)}`\n if (/#/.test(one)) {\n filename = one.split('#')[0]\n path = one.split('#')[1]\n }\n\n let shouldIncluded = true\n\n if (path !== '/demo' && argv.env && argv.env.include) {\n shouldIncluded = isInclude(path, argv.env.include)\n }\n if (shouldIncluded) {\n str.push(`{\npath: '${path}',\ncomponent: () => import('./demos/${filename}.vue').then(m => m.default)\n}`)\n }\n\n })\n\n // 404 page\n str.push(`{\npath: '*',\ncomponent: () => import('./demos/NotFoundComponent.vue').then(m => m.default)\n}`)\n\n str = `[${str.join(',\\n')}]`\n source = source.replace('const routes = []', 'const routes = ' + str)\n return source\n }\n },\n {\n name: 'i18n',\n vuxStaticReplace: false,\n staticReplace: false,\n extractToFiles: 'src/locales/components.yml',\n localeList: ['en', 'zh-CN']\n },\n {\n name: 'less-theme',\n path: 'src/theme.less'\n }\n ]\n}\n\nfunction toDash(str) {\n return str.replace(/([A-Z])/g, function (m, w) {\n return '-' + w.toLowerCase();\n }).replace('-', '')\n}\n" }, { "path": "build/webpack.base.conf.js", "content": "var path = require('path')\nvar config = require('../config')\nvar utils = require('./utils')\nvar projectRoot = path.resolve(__dirname, '../')\nvar fs = require('fs')\nvar vueLoaderConfig = require('./vue-loader.conf')\n\nvar argv = require('yargs').argv\nargv.simulate = argv.simulate || false\n\nfunction resolve (dir) {\n return path.join(__dirname, '..', dir)\n}\n\nconst webpackConfig = {\n entry: {\n app: './src/main.js'\n },\n output: {\n path: config.build.assetsRoot,\n filename: '[name].js',\n publicPath: process.env.NODE_ENV === 'production'\n ? config.build.assetsPublicPath\n : config.dev.assetsPublicPath\n },\n resolve: {\n extensions: ['.js', '.vue', '.json'],\n modules: [\n resolve('src'),\n resolve('node_modules')\n ],\n alias: {\n 'vue$': 'vue/dist/vue.common.js',\n 'src': resolve('src'),\n 'assets': resolve('src/assets'),\n 'components': resolve('src/components'),\n '@': resolve('src')\n }\n },\n module: {\n rules: [\n {\n test: /\\.(js|vue)$/,\n loader: 'eslint-loader',\n enforce: \"pre\",\n include: [resolve('src'), resolve('test')],\n exclude: /vue.vux.js$/,\n options: {\n formatter: require('eslint-friendly-formatter')\n }\n },\n {\n test: /\\.vue$/,\n loader: 'vue-loader',\n options: vueLoaderConfig\n },\n {\n test: /\\.(yaml|yml)$/,\n loader: 'js-yaml-loader'\n },\n {\n test: /\\.js$/,\n loader: 'babel-loader',\n include: [resolve('src'), resolve('test')]\n },\n {\n test: /\\.(png|jpe?g|gif|svg)(\\?.*)?$/,\n loader: 'url-loader',\n query: {\n limit: 10000,\n name: utils.assetsPath('img/[name].[hash:7].[ext]')\n }\n },\n {\n test: /\\.(woff2?|eot|ttf|otf)(\\?.*)?$/,\n loader: 'url-loader',\n query: {\n limit: 10000,\n name: utils.assetsPath('fonts/[name].[hash:7].[ext]')\n }\n }\n ]\n }\n}\n\nconst vuxLoader = require('vux-loader')\nconst vuxConfig = require('./vux-config')\nmodule.exports = vuxLoader.merge(webpackConfig, vuxConfig)\n\n" }, { "path": "build/webpack.dev.conf.js", "content": "'use strict'\nconst utils = require('./utils')\nconst webpack = require('webpack')\nconst config = require('../config')\nconst merge = require('webpack-merge')\nconst baseWebpackConfig = require('./webpack.base.conf')\nconst HtmlWebpackPlugin = require('html-webpack-plugin')\nconst FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')\nconst portfinder = require('portfinder')\n\nconst devWebpackConfig = merge(baseWebpackConfig, {\n module: {\n rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })\n },\n // cheap-module-eval-source-map is faster for development\n devtool: config.dev.devtool,\n\n // these devServer options should be customized in /config/index.js\n devServer: {\n clientLogLevel: 'warning',\n historyApiFallback: true,\n hot: true,\n compress: true,\n host: process.env.HOST || config.dev.host,\n port: process.env.PORT || config.dev.port,\n open: config.dev.autoOpenBrowser,\n overlay: config.dev.errorOverlay ? {\n warnings: false,\n errors: true,\n } : false,\n publicPath: config.dev.assetsPublicPath,\n proxy: config.dev.proxyTable,\n quiet: true, // necessary for FriendlyErrorsPlugin\n watchOptions: {\n poll: config.dev.poll,\n }\n },\n plugins: [\n new webpack.DefinePlugin({\n 'process.env': require('../config/dev.env')\n }),\n new webpack.HotModuleReplacementPlugin(),\n new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.\n new webpack.NoEmitOnErrorsPlugin(),\n // https://github.com/ampedandwired/html-webpack-plugin\n new HtmlWebpackPlugin({\n filename: 'index.html',\n template: 'index.html',\n inject: true\n }),\n ]\n})\n\nmodule.exports = new Promise((resolve, reject) => {\n portfinder.basePort = process.env.PORT || config.dev.port\n portfinder.getPort((err, port) => {\n if (err) {\n reject(err)\n } else {\n // publish the new Port, necessary for e2e tests\n process.env.PORT = port\n // add port to devServer config\n devWebpackConfig.devServer.port = port\n\n // Add FriendlyErrorsPlugin\n devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({\n compilationSuccessInfo: {\n messages: [`Your application is running here: http://${config.dev.host}:${port}`],\n },\n onErrors: config.dev.notifyOnErrors\n ? utils.createNotifierCallback()\n : undefined\n }))\n\n resolve(devWebpackConfig)\n }\n })\n})\n" }, { "path": "build/webpack.prod.conf.js", "content": "var path = require('path')\nvar config = require('../config')\nvar utils = require('./utils')\nvar webpack = require('webpack')\nvar merge = require('webpack-merge')\nvar baseWebpackConfig = require('./webpack.base.conf')\nvar ExtractTextPlugin = require('extract-text-webpack-plugin')\nvar HtmlWebpackPlugin = require('html-webpack-plugin')\nvar env = process.env.NODE_ENV === 'testing'\n ? require('../config/test.env')\n : require('../config/prod.env')\n\nvar argv = require('yargs').argv\n\nvar webpackConfig = merge(baseWebpackConfig, {\n module: {\n rules: utils.styleLoaders({\n sourceMap: config.build.productionSourceMap,\n extract: true\n })\n },\n devtool: false, // config.build.productionSourceMap ? '#source-map' : false,\n output: {\n path: config.build.assetsRoot,\n publicPath: argv.cdn ? 'https://upcdn.vux.li/demos/v2/' : './',\n filename: utils.assetsPath('js/[name].[chunkhash].js'),\n chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')\n },\n plugins: [\n // http://vuejs.github.io/vue-loader/en/workflow/production.html\n new webpack.DefinePlugin({\n 'process.env': env\n }),\n new webpack.optimize.UglifyJsPlugin({\n compress: {\n warnings: false\n }\n }),\n // extract css into its own file\n new ExtractTextPlugin({\n filename: utils.assetsPath('css/[name].[contenthash].css')\n }),\n // generate dist index.html with correct asset hash for caching.\n // you can customize output by editing /index.html\n // see https://github.com/ampedandwired/html-webpack-plugin\n new HtmlWebpackPlugin({\n filename: process.env.NODE_ENV === 'testing'\n ? 'index.html'\n : config.build.index,\n template: 'index.html',\n inject: true,\n minify: {\n removeComments: true,\n collapseWhitespace: true,\n removeAttributeQuotes: true\n // more options:\n // https://github.com/kangax/html-minifier#options-quick-reference\n },\n // necessary to consistently work with multiple chunks via CommonsChunkPlugin\n chunksSortMode: 'dependency'\n }),\n // split vendor js into its own file\n new webpack.optimize.CommonsChunkPlugin({\n name: 'vendor',\n minChunks: function (module, count) {\n // any required modules inside node_modules are extracted to vendor\n return (\n module.resource &&\n /\\.js$/.test(module.resource) &&\n module.resource.indexOf(\n path.join(__dirname, '../node_modules')\n ) === 0\n )\n }\n }),\n // extract webpack runtime and module manifest to its own file in order to\n // prevent vendor hash from being updated whenever app bundle is updated\n new webpack.optimize.CommonsChunkPlugin({\n name: 'manifest',\n chunks: ['vendor']\n })\n ]\n})\n\nif (config.build.productionGzip) {\n var CompressionWebpackPlugin = require('compression-webpack-plugin')\n\n webpackConfig.plugins.push(\n new CompressionWebpackPlugin({\n asset: '[path].gz[query]',\n algorithm: 'gzip',\n test: new RegExp(\n '\\\\.(' +\n config.build.productionGzipExtensions.join('|') +\n ')$'\n ),\n threshold: 10240,\n minRatio: 0.8\n })\n )\n}\n\nif (config.build.bundleAnalyzerReport) {\n var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin\n webpackConfig.plugins.push(new BundleAnalyzerPlugin())\n}\n\nmodule.exports = webpackConfig\n" }, { "path": "build/webpack.test.conf.js", "content": "// This is the webpack config used for unit tests.\n\nvar utils = require('./utils')\nvar webpack = require('webpack')\nvar merge = require('webpack-merge')\nvar baseConfig = require('./webpack.base.conf')\n\nvar webpackConfig = merge(baseConfig, {\n // use inline sourcemap for karma-sourcemap-loader\n module: {\n rules: utils.styleLoaders()\n },\n devtool: '#inline-source-map',\n resolveLoader: {\n alias: {\n // necessary to to make lang=\"scss\" work in test when using vue-loader's ?inject option\n // see discussion at https://github.com/vuejs/vue-loader/issues/724\n 'scss-loader': 'sass-loader'\n }\n },\n plugins: [\n new webpack.DefinePlugin({\n 'process.env': require('../config/test.env')\n })\n ]\n})\n\n// no need for app entry during tests\ndelete webpackConfig.entry\n\nconst vuxLoader = require('vux-loader')\n\n// set i18n dynamic to false\nmodule.exports = vuxLoader.merge(webpackConfig, {\n plugins: [{\n name: 'i18n',\n vuxStaticReplace: true,\n staticReplace: true,\n extractToFiles: 'src/locales/components.yml',\n localeList: ['en', 'zh-CN']\n }]\n})\n" }, { "path": "circle.yml", "content": "machine:\n node:\n version: 5.3.0" }, { "path": "config/dev.env.js", "content": "var merge = require('webpack-merge')\nvar prodEnv = require('./prod.env')\n\nmodule.exports = merge(prodEnv, {\n NODE_ENV: '\"development\"'\n})\n" }, { "path": "config/index.js", "content": "'use strict'\n// Template version: 1.2.3\n// see http://vuejs-templates.github.io/webpack for documentation.\n\nconst path = require('path')\n\nmodule.exports = {\n dev: {\n\n // Paths\n assetsSubDirectory: 'static',\n assetsPublicPath: '/',\n proxyTable: {},\n\n // Various Dev Server settings\n host: 'localhost', // can be overwritten by process.env.HOST\n port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined\n autoOpenBrowser: false,\n errorOverlay: true,\n notifyOnErrors: true,\n poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-\n\n // Use Eslint Loader?\n // If true, your code will be linted during bundling and\n // linting errors and warnings will be shown in the console.\n useEslint: true,\n // If true, eslint errors and warnings will also be shown in the error overlay\n // in the browser.\n showEslintErrorsInOverlay: false,\n\n /**\n * Source Maps\n */\n\n // https://webpack.js.org/configuration/devtool/#development\n devtool: 'eval-source-map',\n\n // If you have problems debugging vue-files in devtools,\n // set this to false - it *may* help\n // https://vue-loader.vuejs.org/en/options.html#cachebusting\n cacheBusting: true,\n\n // CSS Sourcemaps off by default because relative paths are \"buggy\"\n // with this option, according to the CSS-Loader README\n // (https://github.com/webpack/css-loader#sourcemaps)\n // In our experience, they generally work as expected,\n // just be aware of this issue when enabling this option.\n cssSourceMap: false,\n },\n\n build: {\n // Template for index.html\n index: path.resolve(__dirname, '../docs/demos/temp/index.html'),\n\n // Paths\n assetsRoot: path.resolve(__dirname, '../docs/demos/temp'),\n assetsSubDirectory: 'static',\n assetsPublicPath: './',\n\n /**\n * Source Maps\n */\n\n productionSourceMap: false,\n // https://webpack.js.org/configuration/devtool/#production\n devtool: '#source-map',\n\n // Gzip off by default as many popular static hosts such as\n // Surge or Netlify already gzip all static assets for you.\n // Before setting to `true`, make sure to:\n // npm install --save-dev compression-webpack-plugin\n productionGzip: false,\n productionGzipExtensions: ['js', 'css'],\n\n // Run the build command with an extra argument to\n // View the bundle analyzer report after build finishes:\n // `npm run build --report`\n // Set to `true` or `false` to always turn it on or off\n bundleAnalyzerReport: process.env.npm_config_report\n }\n}\n" }, { "path": "config/prod.env.js", "content": "module.exports = {\n NODE_ENV: '\"production\"'\n}\n" }, { "path": "config/test.env.js", "content": "var merge = require('webpack-merge')\nvar devEnv = require('./dev.env')\n\nmodule.exports = merge(devEnv, {\n NODE_ENV: '\"testing\"'\n})\n" }, { "path": "docs/404.md", "content": "\nPage is being translated..." }, { "path": "docs/about/version.md", "content": "## 版本发布\r\n\r\n

    \r\n`0.x` 版本文档不完整，并且已经不再维护。请更新或者直接使用`2.x`。\r\n

    \r\n\r\n当前开发分支为 [v2](https://github.com/airyland/vux)。\r\n\r\n`2.1.0` ~ `3.0.0` 之间版本不会有影响升级的 `break change`，请放心及时更新版本。\r\n" }, { "path": "docs/compile.js", "content": "'use strict'\r\n\r\nconst glob = require('glob')\r\nconst path = require('path')\r\nconst fs = require('fs')\r\nconst yaml = require('js-yaml')\r\nconst hljs = require('highlight.js')\r\nconst MD = require('markdown-it')\r\nconst argv = require('yargs').argv\r\nlet langs = ['en', 'zh-CN']\r\nconst t = require('./i18n')\r\nconst pkg = require('../package.json')\r\n\r\nconst variables = {}\r\nconst variableMap = {}\r\nconst variablePath = path.join(__dirname, '../src/styles/variable.less')\r\nconst variableContent = fs.readFileSync(variablePath, 'utf-8').split('\\n')\r\n\r\nconst isInclude = function (name, include) {\r\n let list = include.split(',')\r\n for (let i = 0; i < list.length; i++) {\r\n if (name.includes(list[i])) {\r\n return true\r\n }\r\n }\r\n return false\r\n}\r\n\r\nvariableContent.forEach((line, index) => {\r\n if (/^@/.test(line)) {\r\n let temp = line.split(':')\r\n let component = temp[0].replace('@', '').split('-')[0]\r\n if (component === 'button' && /button-tab/.test(line)) {\r\n component = 'button-tab'\r\n }\r\n if (!variables[component]) {\r\n variables[component] = []\r\n }\r\n const name = temp[0].replace('@', '')\r\n let value = temp[1].replace(';', '').trim().replace(/\\/\\*(.*?)\\*\\//, '')\r\n if (value.includes('//')) {\r\n value = value.split(' ')[0].trim()\r\n }\r\n let inherited_name = ''\r\n let is_inherited = false\r\n\r\n if (/@/.test(value)) {\r\n is_inherited = true\r\n inherited_name = value\r\n value = variableMap[value.replace('@', '')]\r\n }\r\n let t = {}\r\n\r\n if (variableContent[index - 1] === '*/' && /:/.test(variableContent[index - 2])) {\r\n let stop = false\r\n let i = 2\r\n while (!stop) {\r\n const temp = variableContent[index - i]\r\n if (/:/.test(temp)) {\r\n let pair = temp.split(':')\r\n t[pair[0].replace('*', '').trim()] = pair[1].trim()\r\n } else {\r\n stop = true\r\n }\r\n i++\r\n }\r\n }\r\n\r\n variables[component].push({\r\n name, \r\n value,\r\n is_inherited,\r\n inherited_name,\r\n desc: t\r\n })\r\n variableMap[name] = value\r\n }\r\n})\r\n\r\nlet contents = []\r\n\r\nconst getAlternate = function (lang, route) {\r\n return langs.filter(_lang => _lang !== lang).map(_lang => {\r\n return {\r\n rel: 'alternate',\r\n hreflang: _lang,\r\n href: route.replace(lang, _lang)\r\n }\r\n })\r\n}\r\n\r\nconst getPath = function (dir) {\r\n return path.join(__dirname, dir)\r\n}\r\n\r\n// for faster test with few languages\r\nif (argv.langs) {\r\n langs = argv.langs.split(',')\r\n}\r\n\r\n// filters routes\r\nlet include\r\nif (argv.include) {\r\n include = argv.include\r\n}\r\n\r\nconst customContainer = require('markdown-it-container')\r\nconst md = new MD({\r\n html: true,\r\n highlight: function (str, lang) {\r\n if (lang && hljs.getLanguage(lang)) {\r\n try {\r\n return '
    ' +\r\n               hljs.highlight(lang, str, true).value +\r\n               '
    ';\r\n } catch (__) {}\r\n }\r\n return '
    ' + md.utils.escapeHtml(str) + '
    ';\r\n }\r\n})\r\n.use(customContainer, 'tip', {\r\n validate: function(params) {\r\n return params.trim() === 'tip'\r\n }\r\n})\r\n.use(customContainer, 'warning', {\r\n validate: function(params) {\r\n return params.trim() === 'warning'\r\n }\r\n})\r\n.use(customContainer, 'danger', {\r\n validate: function(params) {\r\n return params.trim() === 'danger'\r\n }\r\n})\r\n\r\nfunction getComponentName(path) {\r\n let list = path.split('/')\r\n if (list[list.length - 1] === 'index.vue' || list[list.length - 1] === 'index.js') {\r\n return list[list.length - 2]\r\n } else if (list[list.length - 1] === 'metas.yml') {\r\n return list[list.length - 2]\r\n } else if (/\\.json/.test(path)) {\r\n return list[list.length - 1].replace('.json', '')\r\n } else if (/\\.js/.test(path)) {\r\n return list[list.length - 1].replace('.js', '')\r\n } else {\r\n return list[list.length - 1].replace('.vue', '')\r\n }\r\n}\r\n\r\nlet paths = []\r\n\r\nlangs.forEach(lang => {\r\n const faqs = glob.sync(getPath(`./${lang}/faq/*.md`))\r\n const faqRoutes = []\r\n const commonTitle = `${t('title', lang)}`\r\n let faqMd = `\r\n---\r\ntitle: ${t('faq', lang)} | ${commonTitle}\r\n---\r\n\r\n# ${t('faq', lang)}\r\n `\r\n faqs.forEach(one => {\r\n one = '.' + one.replace(__dirname, '')\r\n const content = fs.readFileSync(getPath(one), 'utf-8')\r\n const titleRs = content.match(/\\n#(.*?)\\n/)\r\n if (titleRs && titleRs[1] && one.indexOf('index.md') === -1) {\r\n faqRoutes.push({\r\n title: titleRs[1].trim(),\r\n path: one.replace('./', '/').replace('.md', '.html')\r\n })\r\n\r\n contents.push({\r\n lang,\r\n category: '常见问题',\r\n title: titleRs[1].trim(),\r\n url: one.replace('./', '/').replace('.md', '.html'),\r\n content: md.render(content)\r\n })\r\n }\r\n })\r\n\r\n faqRoutes.forEach(one => {\r\n faqMd += `\r\n * ${one.title}\r\n `\r\n })\r\n\r\n fs.writeFileSync(getPath('./src/faq-routes.json'), JSON.stringify(faqRoutes, null, 2))\r\n\r\n fs.writeFileSync(getPath(`./${lang}/faq/index.md`), faqMd)\r\n\r\n})\r\n\r\n/**\r\n* tools\r\n*/\r\n\r\nlangs.forEach(lang => {\r\n let toolRoutes = []\r\n const tools = glob.sync(getPath(`./${lang}/tools/*.md`))\r\n\r\n tools.forEach(one => {\r\n one = '.' + one.replace(__dirname, '')\r\n const content = fs.readFileSync(getPath(one), 'utf-8')\r\n let titleRs = content.match(/\\n#(.*?)\\n/)\r\n if (titleRs && titleRs[1] && one.indexOf('index.md') === -1) {\r\n titleRs[1] = titleRs[1].replace(/#/g, '')\r\n toolRoutes.push({\r\n title: titleRs[1].trim(),\r\n path: one.replace('./', '/').replace('.md', '.html')\r\n })\r\n\r\n contents.push({\r\n lang,\r\n category: t('Toolkit', lang),\r\n title: t(titleRs[1].trim(), lang),\r\n url: one.replace('./', '/').replace('.md', '.html'),\r\n content: md.render(content)\r\n })\r\n }\r\n })\r\n fs.writeFileSync(getPath(`./src/tool-routes-${lang}.json`), JSON.stringify(toolRoutes, null, 2))\r\n})\r\n\r\n\r\nlet files = []\r\nlangs.forEach(lang => {\r\n files = files.concat(glob.sync(getPath(`./${lang}/**/*.md`)))\r\n})\r\n\r\nfiles = files.map(file => {\r\n return '.' + file.replace(__dirname, '')\r\n})\r\n\r\nif (include) {\r\n files = files.filter(file => {\r\n return isInclude(file, include)\r\n })\r\n}\r\n\r\nlet str = ''\r\n\r\nlangs.forEach(lang => {\r\n str += `\r\n routes.push({\r\n path: '/${lang}/lab/index.html',\r\n component: () => import('../${lang}/lab/index.md')\r\n })\r\n routes.push({\r\n path: '/${lang}/faq',\r\n component: () => import('../${lang}/faq/index.md')\r\n })\r\n routes.push({\r\n path: '/${lang}/',\r\n component: () => import('../${lang}/README.md')\r\n })\r\n routes.push({\r\n path: '/${lang}/about/contributors.html',\r\n component: () => import('../${lang}/about/contributors.vue')\r\n })`\r\n paths.push('/${lang}/')\r\n paths.push('/${lang}/faq/')\r\n paths.push('/${lang}/about/contributors.html')\r\n})\r\n\r\nfiles.forEach(file => {\r\n let currentPath = `${file.replace(/^.\\//, '/').replace('.md', '.html')}`\r\n\r\n if (!include || isInclude(currentPath, include)) {\r\n paths.push(currentPath)\r\n str += `\r\n routes.push({\r\n path: '${currentPath}',\r\n component: () => import('.${file}')\r\n })\r\n `\r\n }\r\n})\r\n\r\n// components\r\nconst components = glob.sync(getPath('../src/components/**/metas.yml'))\r\n\r\nconst colorCode = function (lang, code) {\r\n return '
    ' +\r\n               hljs.highlight(lang, code, true).value +\r\n               '
    '\r\n}\r\n\r\nconst routesList = require(getPath(`../src/demo_list.json`))\r\nconst map = {}\r\nroutesList.forEach(route => {\r\n if (/#/.test(route)) {\r\n let pair = route.split('#')\r\n map[pair[0]] = pair[1]\r\n }\r\n})\r\n\r\ncomponents.forEach((file) => {\r\n const rawMetas = fs.readFileSync(file, 'utf-8')\r\n const metas = yaml.safeLoad(rawMetas)\r\n const root = getPath('../')\r\n const componentName = file.replace(root, '').replace('src/components/', '').replace('/metas.yml', '')\r\n const importName = _camelCase(componentName)\r\n let importList = [{\r\n componentName: componentName,\r\n importName: importName\r\n }]\r\n\r\n if (/meta/.test(componentName)) {\r\n return\r\n }\r\n\r\n // 加入样式变量\r\n metas.variables = variables[componentName.replace('x-', '')]\r\n\r\n // demo 源码\r\n const demoPath = path.join(__dirname, `../src/demos/${importName}.vue`)\r\n let demoCode = ''\r\n try {\r\n demoCode = encodeURIComponent(colorCode('html', fs.readFileSync(demoPath, 'utf-8')))\r\n } catch (e) {}\r\n\r\n if (metas.items) {\r\n importList = []\r\n metas.items.forEach(one=> {\r\n importList.push({\r\n componentName: one,\r\n importName: _camelCase(one)\r\n })\r\n })\r\n }\r\n const parseReg = '`(.*?)`'\r\n const _localImportCode = `import { ${importList.map(one => one.importName).join(', ')} } from 'vux'\r\n\r\nexport default {\r\n components: {\r\n ${importList.map(one => one.importName).join(',\\n ')}\r\n }\r\n}`\r\n const localImportCode = colorCode('js', _localImportCode)\r\n\r\n let exampleCode = ''\r\n if (metas.example) {\r\n exampleCode = colorCode('html', metas.example)\r\n }\r\n\r\n if (metas.tips) {\r\n langs.forEach(lang => {\r\n if (metas.tips[lang]) {\r\n for (let i = 0; i < metas.tips[lang].length; i++) {\r\n metas.tips[lang][i].a = metas.tips[lang][i].a\r\n .replace(/```\\s+(css|js|bash|html)/g, '``` $1\\n')\r\n .replace(/```/g, '\\n```')\r\n metas.tips[lang][i].a = md.render(metas.tips[lang][i].a)\r\n }\r\n }\r\n })\r\n\r\n // add tip on last component\r\n if (metas.items) {\r\n const keys = metas.items\r\n const last = keys[keys.length - 1]\r\n metas[last].tips = metas.tips\r\n }\r\n }\r\n\r\n // render child component description\r\n if (metas.items) {\r\n metas.items.forEach(item => {\r\n if (metas[item].description) {\r\n metas[item].description = md.render(metas[item].description)\r\n }\r\n })\r\n }\r\n\r\n langs.forEach(lang => {\r\n\r\n // find demos\r\n let demos = []\r\n const reg = /]*>([\\s\\S]*?)<\\/demo>/g\r\n let demoHeight = '270px'\r\n let commonNoBackgroundColor = 'true'\r\n let demosDir = getPath(`../src/demos/${componentName}/`)\r\n if (fs.existsSync(demosDir)) {\r\n const list = glob.sync(demosDir + '/*.vue').filter(one => !one.includes('_index.vue'))\r\n .map(one => one.replace(getPath(`../src/demos/`), ''))\r\n .map(one => {\r\n const route = map[one.replace('.vue', '')]\r\n const code = fs.readFileSync(getPath(`../src/demos/`) + one, 'utf-8')\r\n let height = demoHeight\r\n let noBackgroundColor = commonNoBackgroundColor\r\n let order = 999\r\n const rs = code.match(reg)\r\n let title = 'EXAMPLE'\r\n if (rs) {\r\n let meta = yaml.safeLoad(rs[0].replace('\\n', '').replace('', ''))\r\n if (typeof meta.title === 'string') {\r\n title = meta.title\r\n } else if (typeof meta.title === 'object') {\r\n title = meta.title[lang]\r\n }\r\n if (meta.height) {\r\n height = meta.height + 'px'\r\n }\r\n if (meta.noBackgroundColor === false) {\r\n noBackgroundColor === 'false'\r\n }\r\n if (meta.order) {\r\n order = meta.order * 1\r\n }\r\n }\r\n return {\r\n file: one.replace('.vue', ''),\r\n title,\r\n route: route,\r\n code: '
    ' +\r\n                 hljs.highlight('html', code.replace(reg, ''), true).value +\r\n                 '
    ',\r\n oriHeight: height,\r\n height: height,\r\n noBackgroundColor,\r\n order\r\n }\r\n })\r\n demos = list.sort((a, b) => {\r\n return a.order > b.order ? 1 : -1\r\n })\r\n }\r\n\r\n let url = `https://vux.li/demos/v2/#/component/${componentName}`\r\n if (demos.length) {\r\n url = `https://vux.li/demos/v2/#/components/${componentName}/home`\r\n }\r\n\r\n // toc\r\n let toc = []\r\n if (demos.length) {\r\n toc.push({\r\n title: t('Intro', lang),\r\n anchor: 'intro'\r\n })\r\n toc.push({\r\n title: t('Install', lang),\r\n anchor: 'install'\r\n })\r\n toc.push({\r\n title: t('Examples', lang),\r\n anchor: 'examples',\r\n list: demos.map(one => {\r\n return {\r\n title: one.title,\r\n anchor: 'examples:' + one.title\r\n }\r\n }).slice(0, 5)\r\n })\r\n if (metas.items) {\r\n toc.push({\r\n title: 'API',\r\n anchor: 'api',\r\n list: metas.items.map(item => {\r\n return {\r\n title: `<${item}>`,\r\n anchor: 'components:' + item\r\n }\r\n })\r\n })\r\n } else {\r\n toc.push({\r\n title: 'API',\r\n anchor: 'api'\r\n })\r\n }\r\n toc.push({\r\n title: t('Tips', lang),\r\n anchor: 'tips'\r\n })\r\n toc.push({\r\n title: t('Contributors', lang),\r\n anchor: 'contributors'\r\n })\r\n toc.push({\r\n title: t('Changelog', lang),\r\n anchor: 'changelog'\r\n })\r\n }\r\n\r\n const needImport = metas.need_import === false ? false : true\r\n\r\n const gitMetas = require(`./${lang}/components/${componentName}_git_metas.json`)\r\n\r\n // ldjson\r\n const ldjson = {\r\n \"@context\": \"http://schema.org/\",\r\n \"@type\": \"SoftwareApplication\",\r\n \"name\": `Vue Component ${componentName}`,\r\n \"screenshot\": \"\",\r\n \"description\": \"Vue.js component for VUX\",\r\n \"url\": `/${lang}/components/${componentName}.html`,\r\n \"applicationCategory\": t('Component', lang),\r\n \"author\": {\r\n \"@type\": \"Organization\",\r\n \"name\": \"VUX\",\r\n \"url\": \"https://vux.li\"\r\n },\r\n \"downloadUrl\": \"https://vux.li\",\r\n \"softwareVersion\": pkg.version,\r\n \"aggregateRating\": {\r\n \"@type\": \"AggregateRating\",\r\n \"ratingValue\": 5,\r\n \"reviewCount\": gitMetas.commitCount\r\n },\r\n \"operatingSystem\": \"iOS >= 7, Android >= 4.1\",\r\n \"offers\": {\r\n \"@type\": \"Offer\",\r\n \"price\": 0,\r\n \"priceCurrency\": t('priceCurrency', lang),\r\n \"availability\": \"http://schema.org/InStock\"\r\n }\r\n }\r\n\r\n contents.push({\r\n lang: lang,\r\n category: t('Components', lang),\r\n title: importName,\r\n title_alias: componentName,\r\n url: `/${lang}/components/${componentName}.html`\r\n })\r\n\r\n const list = ['Props', 'Events', 'Slots', 'Functions']\r\n\r\n list.forEach(block => {\r\n const key = block.toLowerCase()\r\n if (metas[key]) {\r\n for (let prop in metas[key]) {\r\n contents.push({\r\n lang: lang,\r\n category: t('Component', lang) + ' ' + importName + ' ' + t(block.replace(/s$/, ''), lang),\r\n title: prop,\r\n url: `/${lang}/components/${componentName}.html#${key}-${prop}`,\r\n content: metas[key][prop][lang]\r\n })\r\n }\r\n }\r\n })\r\n\r\n\r\n let _globalImportCode = `// ${t('globally register', lang)}\\n\\nimport Vue from 'vue'\\nimport { ${importList.map(one => one.importName).join(', ')} } from 'vux'\\n\\n`\r\n const urlWithNoTransition = `https://vux.li/demos/v2?locale=${lang}&transition=none/#/component/${componentName}`\r\n\r\n importList.forEach(one => {\r\n _globalImportCode += `Vue.component('${one.componentName}', ${one.importName})\\n`\r\n })\r\n\r\n const globalImportCode = colorCode('js', _globalImportCode)\r\n\r\n\r\n let str = `\r\n \r\n\r\n\r\n \r\n\r\n \r\n `\r\n fs.writeFileSync(getPath(`./${lang}/components/${componentName}.vue`), str)\r\n })\r\n\r\n\r\n})\r\n\r\nlangs.forEach(lang => {\r\n glob.sync(getPath(`./${lang}/components/*.vue`)).forEach(component => {\r\n component = '..' + component.replace(__dirname, '')\r\n const name = component.replace(`../${lang}/components/`, '').replace('.vue', '')\r\n if (!include || isInclude(name, include)) {\r\n str += `\r\n routes.push({\r\n path: '/${lang}/components/${name}.html',\r\n component: () => import('${component}')\r\n })\r\n `\r\n paths.push(`/${lang}/components/${name}.html`)\r\n }\r\n })\r\n})\r\n\r\nif (include) {\r\n paths = paths.filter(path => {\r\n return isInclude(path, include)\r\n })\r\n}\r\n\r\nstr += `\r\nroutes.push({\r\n path: '*',\r\n component: () => import('../404.md')\r\n})\r\n`\r\n\r\nconst ori = fs.readFileSync(getPath('./src/index.js'), 'utf-8')\r\nfs.writeFileSync(getPath('./src/_index.js'), ori.replace('const routes = []', `const routes = []\\n${str}`))\r\nfs.writeFileSync(getPath('./src/routes.json'), JSON.stringify(paths, null, 2))\r\nfs.writeFileSync(getPath('./sitemap.txt'), paths.map(path => `https://doc.vux.li${path}`).join('\\n'))\r\n\r\nfs.writeFileSync(getPath('./algolia.json'), JSON.stringify(contents, null, 2))\r\n\r\nfunction camelCase(input) {\r\n let str = input.toLowerCase().replace(/-(.)/g, function (match, group1) {\r\n return group1.toUpperCase();\r\n });\r\n\r\n str = str.replace(/_(.)/g, function (match, group1) {\r\n return group1.toUpperCase();\r\n });\r\n return str\r\n}\r\n\r\nfunction _camelCase(input) {\r\n let str = camelCase(input)\r\n return str.slice(0, 1).toUpperCase() + str.slice(1)\r\n}\r\n" }, { "path": "docs/component-contributors.js", "content": "const shell = require('shelljs')\nconst path = require('path')\nshell.cd(path.join(__dirname + '../../'))\nconst glob = require('glob')\nconst fs = require('fs')\nconst _ = require('lodash')\n\nconst componentsPath = path.join(__dirname, '../src/components/**/metas.yml')\nconst components = glob.sync(componentsPath)\n\nconst format = JSON.stringify({\n hash: '%H',\n authorName: '%an',\n authorEmail: '%ae',\n date: '%aI',\n // subject: '%s'\n})\n\ncomponents.map(one => one.replace('/metas.yml', '')).forEach(one => {\n const name = one.split('components/')[1]\n const metaFile = path.join(__dirname, `./zh-CN/components/${name}_git_metas.json`)\n const rs = shell.exec(`git log --pretty='format:${format},' -- ${one}`, {\n silent: true\n })\n let str = `[${rs.stdout.slice(0, -1).replace(/\\n/g, ' ').replace(/\"/g, '\\\"')}]`\n str = JSON.parse(str)\n const result = {\n commitCount: str.length,\n commitMembers: _.uniqBy(str, function (one) {\n return one.authorName.toLowerCase()\n }).map(one => {\n return {\n count: str.filter(_one => _one.authorName.toLowerCase() === one.authorName.toLowerCase()).length,\n authorName: one.authorName\n }\n })\n }\n\n result.commitUniqueCount = result.commitMembers.length\n\n fs.writeFileSync(metaFile, JSON.stringify(result, null, 2))\n fs.writeFileSync(metaFile.replace('zh-CN', 'en'), JSON.stringify(result, null, 2))\n})\n" }, { "path": "docs/en/.gitkeep", "content": "" }, { "path": "docs/en/README.md", "content": "---\ntitle: 关于 VUX\n---\n\n

    \n
    \n \n \"\"\n \n
    \n \n 预览地址>>\n \n
    \n
    \n \n \"\"\n \n \n \"\"\n \n \n \"\"\n \n
    \n
    \n \n \"\"\n \n \n \"\"\n \n \n \"\"\n \n
    \n \n \"\"\n \n \n \"\"\n \n \n \"\"\n \n \n \"\"\n \n
    \n
    \n

    \n\n::: warning\n **敲黑板**：VUX 必须配合 `vux-loader` 使用，如果不使用 vux2 模板请按照文档正确配置。
    \n\n **less@3.x** 有严重的兼容问题，请暂时使用 **less@^2.7.3**。\n:::\n\n## 简介\n\n`VUX`（读音 [v'ju:z]，同 `views`）是基于`WeUI`和`Vue`(2.x)开发的移动端UI组件库，主要服务于微信页面。\n\n基于`webpack + vue-loader + vux`可以快速开发移动端页面，配合`vux-loader`方便你在`WeUI`的基础上定制需要的样式。\n\n`vux-loader`保证了组件按需使用，因此不用担心最终打包了整个vux的组件库代码。\n\n`VUX`并不完全依赖于`WeUI`，`VUX` 在 `WeUI` 的基础上扩展了多个常用组件，但是尽量保持整体UI样式接近`WeUI`的设计规范。\n\n::: warning\nVUX 并不是一个能解决所有场景的完美解决方案(实际上也没有一个方案能解决所有问题)，也会出现某些`bug`或者某些特性不支持，所以如果遇到问题麻烦及时**不带情绪正确反馈**，**我们乐于及时解决描述详细方便重现的问题**。
    \n即使你不直接使用 `VUX` 组件代码, 你依然可以参考 VUX 代码来实现自己的组件库。如果一定程度上帮助到了你，那么维护这个项目也就有所意义。\n:::\n\n## 订阅版本发布通知\n\n请使用微信扫描\n\n\n\n## 提示\n::: tip\n`VUX` 是`库`而非`框架`，虽然有专用的 `vux-loader`，但并不影响你自由地使用其他组件库或者工具库。

    \n\n`VUX` 使用的 CSS 预处理工具是 `less`(同 WeUI)，但(利益于 .vue 单文件组件的灵活性)这并不影响你使用 `SASS` 等其他预处理器。

    \n\n用以表示该组件库时请使用大写名字 `VUX`，用在说明版本号时使用小写 `vux@2.x`。\n:::\n" }, { "path": "docs/en/about/before-using-vux.md", "content": "---\ntitle: 开始使用 VUX 之前\n---\n\n# 开始使用 VUX 之前\n\n::: warning\n如果你刚从后端转到前端，可能会被目前前端(表面的)工程复杂度惊吓到，但是放心，使用 `vue-cli` 从模板创建项目可以快速开始编码、构建，仅仅是几行简单的命令不是么？\n:::\n\n在使用 VUX 之前需要你至少已经会使用 `Vue`，同时需要你大概了解 `Node.js`，`npm`，`cnpm`，`yarn` 这些东西。\n\n::: tip\n建议 `Node.js` 版本在 `7.6.0` 以上。\n:::\n\n## 相关工具\n\n### WeUI\n\nVUX 样式基于 [WeUI](https://github.com/weui/weui)，但是你不必通过使用 VUX 来使用 `WeUI`。简单的页面你可以直接引入 `WeUI` 样式。详细请参考 [WeUI 文档](https://github.com/weui/weui)。\n\n### Vue\n\nVUX 基于 `Vue` 的组件库，意味着你需要有 `Vue` 的基础知识。\n\n如果还没有了解过，建议先看看[Vue 官方文档](https://cn.vuejs.org)。\n\n### Webpack\n\n如果你直接使用 `vux2` 模板，你可以暂时不用了解。当你需要自定义一些配置时自然就能很快了解了。\n\n[Webpack 文档](https://webpack.js.org)\n\n### vue-cli\n\nVue 官方用于快速创建项目的工具。\n\n``` js bash\nnpm install vue-cli -g\n```\n\n或者使用 yarn\n\n``` bash\nyarn global add vue-cli\n```\n\n[vue-cli 文档](https://github.com/vuejs/vue-cli)\n\n### vue-loader\n\nwebpack loader，用于编译 `.vue` 文件，官方模板已经帮你配置好。\n\n[vue-loader 文档](https://vue-loader.vuejs.org)\n\n### vux-loader\n\nVUX 组件库的 webpack loader，实现按需加载等功能。它不是替代 `vue-loader` 而是配合 `vue-loader` 使用。如果你使用 vux2 模板，暂不需要手动使用它。\n" }, { "path": "docs/en/about/contributors.vue", "content": "\n\n\n\n\n" }, { "path": "docs/en/about/showcase.md", "content": "---\ntitle: VUX 使用案例\n---\n\n# 使用案例\n\n> 如果你的产品在使用`VUX`, 请直接发 PR 修改 `docs/zh-CN/about/showcase.md`（置于列表最后，统一格式：二维码必须无白边框）。\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n" }, { "path": "docs/en/about/thanks.md", "content": "---\ntitle: 感谢\n---\n\n# Thanks\n\n\n## VUX 参考或者使用了以下开源项目的代码\n\n+ [Vue](https://github.com/vuejs/vue)\n+ [WeUI](https://github.com/weui/weui)\n+ [FrozenUI](https://github.com/frozenui/frozenui)\n+ [Ant Design](https://github.com/ant-design/ant-design)\n+ [Ant Design Mobile](http://github.com/ant-design/ant-design-mobile)\n+ [XScroll](https://github.com/huxiaoqi567/xscroll)\n+ [Ionic](https://github.com/driftyco/ionic)\n+ [SUI Mobile](https://github.com/sdc-alibaba/SUI-Mobile)\n+ [PhotoSwipe](https://github.com/dimsemenov/PhotoSwipe)\n\n## 工具框架\n\n- 世界上最好的语言 `JavaScript`\n- 啥都能做的前端构建工具 [Webpack](https://webpack.js.org/)\n- 简单好用的文档展示工具 [Docute](https://docute.js.org/#/)" }, { "path": "docs/en/contribution/donate.md", "content": "---\ntitle: 捐赠支持 VUX\n---\n\n\n## 捐赠\n\n* [Patreon](https://www.patreon.com/airyland)\n* [PayPal](https://paypal.me/airyland)\n* 支付宝 airyland@qq.com\n" }, { "path": "docs/en/contribution/issue.md", "content": "---\ntitle: 如何提 issue\n---\n\n# 如何提 issue\n\n::: tip\n使用本项目意味着你也有义务帮助其变得更好。\n:::\n\n不要浪费维护者时间。\n\n不要让维护者帮你学习`Vue`，帮你熟悉`vue-loader`，甚至帮你写代码。\n\n不要认为随便一句话就能让维护者明白你的意思，我们没有你想象的那么厉害。\n\n不要提没有任何意义的、代码中带有业务逻辑不方便重现的Issue。\n\n直接关闭你的`issue`不是对你不满，是你提问题方式不对，没有必要再浪费时间说明为什么要关闭你的`issue`。\n\n马虎的提问，缺少上下文和重现步骤是在浪费彼此时间。\n" }, { "path": "docs/en/contribution/pr.md", "content": "---\ntitle: 如何贡献\n---\n\n# 如何贡献\n\n## 文档更新\n\n如果修改了组件代码，需要在组件目录的`metas.yml`加上changes，直接使用`next`作为版本号(如果已经存在该版本号，则直接添加变更条目即可)。\n\n中括号内为变更类型，可选值 `fix` `enhance` `feature` `change`\n\n比如：\n\n``` yml\nchanges:\n next:\n en:\n - '[fix] fix *** bug #issueId'\n - '[feature] new feature'\n zh-CN:\n - '[fix] 修复 *** bug #issueId'\n```\n\n::: tip\n当文档相关的 `PR`被合并后，文档服务器会在`5分钟`内拉取最新代码并执行`npm run build-docs`及`npm run build`实现文档及`demo`更新。\n:::\n\n## 为什么使用 next 为版本号\n\n`next` 表示下个版本，未发布时在 `changelog` 里显示 `next`，提醒用户一些开发中的代码尚未发布。\n\n当进行版本发布时，文档中的 `next` 会被脚本代替成真正的版本号，至此发布完毕。\n\n这样的最大好处是更新代码时可以直接写 `changelog` 不用在意要写哪个版本号，在发布时翻 commit 记录写 `changelog` 是件比较浪费时间的事。\n" }, { "path": "docs/en/contribution/vux-development.md", "content": "---\ntitle: VUX 源码本地运行\n---\n\n# VUX 源码本地运行\n\n::: tip\n请更新 `NodeJS` 版本到 `v7.6.0` 以上，`build` 命令逐步使用 `async`。\n:::\n\n``` bash\nyarn // 使用 yarn.lock 保证依赖版本一致\nyarn dev\n```\n\n## 本地查看文档\n\n``` bash\nnpm run doc:build // 构建文档\ncd docs\nyarn\nnpm run dev // 耗时较长\n```\n\n## 文档相关命令\n\n> docs 目录下的相关命令，它们是 npm run doc:build 的一部分，但是可以单独运行\n\n``` bash\nnode compile // 生成文档路由\nnode component-contributions // 从 git 记录里获取每个组件提交历史\n\nnpm run doc:dev // 运行\n```\n\n## 构建部分文档\n\n文档页面比较多等待 build 命令会长，因此可以只构建部分文档方便快速查看。\n\n``` bash\ncd docs\nnode compile --include datetime // 只构建 datetime 相关文档\nnpm run dev\n```\n" }, { "path": "docs/en/css/1px.md", "content": "---\ntitle: 1px 解决方案\n---\n\n# 1px 解决方案\n\n::: tip\n1px 方案在 VUX 组件内应用广泛，包括 `Grid`, `ButtonTab`, `XTable`, `XButton`, `Cell` 等等。\n\n利用 `Flexbox` + `1px` 你可以实现复杂的宫格布局。\n:::\n\n## 引入\n\n在你项目的`App.vue`引入，组件内不需要再重复引入。\n\n``` html\n\n```\n\n## 可用类名：\n\n- `vux-1px-l` 左边框\n- `vux-1px-r` 右边框\n- `vux-1px-t` 上边框\n- `vux-1px-b` 下边框\n- `vux-1px-tb` 上下边框\n- `vux-1px` 全边框\n\n\n" }, { "path": "docs/en/css/close.md", "content": "---\ntitle: 纯 css close 图标\n---\n\n# 纯 css close 图标\n\n::: tip\n关闭图标主要应用于弹窗(dialog)关闭按钮以及弹窗(popup)头部的关闭按钮。\n:::\n\n## 使用\n\n在你项目的`App.vue`引入，组件内不需要再重复引入。\n\n``` html\n\n```\n\n## 类名\n\n- `vux-close`\n\n\n``` html\n\n```\n\n可以参考 `XDialog` 演示。\n\n## 颜色\n\n当你想设置图标颜色时，直接设置 color 即可。\n\n\n``` html\n\n```\n\n\n" }, { "path": "docs/en/css.md", "content": "---\nnav: zh-CN\n---\n\n## 1px\n\n::: tip\n1px 方案在 VUX 组件内应用广泛，包括 Grid, ButtonTab, XTable, XButton, Cell 等等。\n
    \n
    \n利用 flexbox + 1px 你可以实现复杂的宫格布局。\n:::\n\n在你项目的`App.vue`引入，组件内不需要再重复引入。\n\n``` html\n\n```\n\n可用类名：\n\n- `vux-1px-l` 左边框\n- `vux-1px-r` 右边框\n- `vux-1px-t` 上边框\n- `vux-1px-b` 下边框\n- `vux-1px-tb` 上下边框\n- `vux-1px` 全边框\n\n\n\n## close\n\n::: tip\n关闭图标主要应用于弹窗(popup)的左侧关闭按钮。\n:::\n\n在你项目的`App.vue`引入，组件内不需要再重复引入。\n\n``` html\n\n```\n\n可用类名：\n\n- vux-close\n\n\n``` html\n\n```\n\n可以参考 `XDialog` 演示。\n\n当你想设置图标颜色时，直接设置 color 即可。\n\n\n``` html\n\n```\n\n\n" }, { "path": "docs/en/development/i18n.md", "content": "---\ntitle: 国际化 i18n\n---\n\n# 国际化\n\n::: warning\n暂时只支持配合`vux-loader`使用。\n\n如果你只需要默认的中文组件，那么你可以略过下面说明，只要启用`vux-ui`插件即可。\n:::\n\n默认不配置此插件时，vux源码会按照默认语言`zh-CN`进行静态编译，和原来的使用没有明显不同。\n\n详细请参照 vux-loader的vux-i18n文档" }, { "path": "docs/en/development/remove-click-delay-fastclick.md", "content": "---\ntitle: Vue 应用移除移动端页面点击延迟\n---\n\n# 移除移动端页面点击延迟\n\n::: tip\n直接使用 `WeUI` 样式并引入 `fastclick` 会导致一些点击问题，VUX 组件内部已经做了相关处理。\n:::\n\n## 引入 fastclick\n\n在`main.js`里引用`fastclick`\n\n``` js\nconst FastClick = require('fastclick')\nFastClick.attach(document.body)\n// done\n```" }, { "path": "docs/en/development/router.md", "content": "---\ntitle: vue-router 路由\n---\n\n# 路由\n\n推荐直接使用官方 [vue-router](https://github.com/vuejs/vue-router)，`VUX`部分组件支持`link`属性直接支持`vue-router`的路由参数，`vux2`模板内置了`vue-router`。\n\n::: warning\n如果使用了过渡(转场动画)，在`iPhone`上使用`左划返回`时动画会再执行一遍，目前没有找到可行的处理方法，如果你有处理方案，欢迎`PR`。\n[https://github.com/airyland/vux/pull/2259](https://github.com/airyland/vux/pull/2259)\n:::\n" }, { "path": "docs/en/development/theme.md", "content": "---\ntitle: 主题颜色配置\n---\n\n# 主题颜色配置\n\n## 配置插件\n\n::: warning\n暂时只支持配合`vux-loader`使用。\n\n注意的是主题文件不能引入其他less文件，只能为简单变量列表。\n:::\n\n请配置vux-loader的`less-theme`插件，指定用以覆盖的less文件路径：\n\n``` js\n{\n name: 'less-theme',\n path: 'src/styles/theme.less' // 相对项目根目录路径\n}\n```\n\n## 可配置颜色\n\n源码地址：https://github.com/airyland/vux/blob/v2/src/styles/variable.less\n\n::: tip\n更多配置需求请通过 issue 提出。\n:::\n\n## demo站点的示例配置\n\n源代码地址：[https://github.com/airyland/vux/blob/v2/src/theme.less](https://github.com/airyland/vux/blob/v2/src/theme.less)\n\n## 内部如何实现的？\n\n`vux-loader` 在每个 `less` 文件的编译过程中重写了 `less-loader` 的变量参数，使其能直接覆盖原来变量。" }, { "path": "docs/en/development/typescript.md", "content": "---\ntitle: TypeScript 支持\n---\n\n# TypeScript 支持\n\n> 即将支持\n" }, { "path": "docs/en/development/vue-ajax.md", "content": "---\ntitle: Vue 中使用 ajax\n---\n\n# 发送 ajax 请求\n\n\n:::tip\n`AjaxPlugin` 插件依赖于 [axios](https://github.com/mzabriskie/axios)\n详细 API 文档请查看：[axios](https://github.com/mzabriskie/axios)\n:::\n\n## 版本要求\n\n`AjaxPlugin`在`vux@^2.1.0-rc.20`开始支持\n\n\n## 引入\n\n`main.js` 入口文件中引入：\n\n``` js\nimport { AjaxPlugin } from 'vux'\nVue.use(AjaxPlugin)\n```\n\n## 兼容性问题\n\n需要注意的是`axios`是基于`Promise`的，因此如果你需要兼容低版本浏览器([caniuse](http://caniuse.com/#feat=promises))，需要引入`polyfill`。\n\n`Polyfill` 推荐使用 [es6-promise](https://github.com/stefanpenner/es6-promise)\n\n\n``` js\nrequire('es6-promise').polyfill()\n```\n\n## 全局使用\n\n``` js\nVue.http.post('/api').then()\n```\n\n## 组件中使用\n\n``` js\nexport default {\n created () {\n this.$http.post('/api').then(({data}) => {\n console.log(data)\n })\n }\n}\n```\n" }, { "path": "docs/en/development/vue-global-method.md", "content": "---\ntitle: Vue 全局公用函数\n---\n\n# vue 全局公用函数\n\n如果你需要让一个工具函数在每个组件可用，可以把方法挂载到 `Vue.prototype`上。\n\n## 注册\n\n`main.js` 中\n\n``` js\nVue.prototype.$method = function () {}\n```\n\n::: tip\n一般建议函数名使用 `$` 前缀。像 `vue-router` 的 `$route` 和 `$router`。\n:::\n\n## 使用\n\n那么组件代码里\n\n``` js\nexport default {\n created () {\n this.$method()\n }\n}\n```\n\n## 说明\n\n挂载到 `prototype` 上是为了方便组件内直接用 `this.$method` 来使用，你也可以直接用 `Vue.method`，这样同样可以全局使用，不过在组件内就需要再 import 一次 `Vue` 了。" }, { "path": "docs/en/development/vue-google-analytics.md", "content": "---\ntitle: Vue 中使用谷歌统计\n---\n\n# 使用谷歌统计\n\n单页面应用切换时要手动发送页面统计，首先在 `index.html` 或者 `main.js` 里引入谷歌统计代码：\n\n``` js\n(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){\n(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),\nm=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)\n})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');\n\nga('create', 'UA-yourID', 'auto')\nga('send', 'pageview') // 是否要统计着陆页面访问，取决于你的需求，这个不一定需要，会和`router`统计有重复\n\n```\n\n``` js\n// main.js 里，如果你使用了 vue-router\nrouter.afterEach(function (to) {\n if (window.ga) {\n window.ga('set', 'page', to.fullPath) // 你可能想根据请求参数添加其他参数，可以修改这里的 to.fullPath\n window.ga('send', 'pageview')\n }\n})\n```" }, { "path": "docs/en/development/vue-loader-autoprefix.md", "content": "---\ntitle: vue-loader autoprefix 推荐配置\n---\n\n# autoprefix 推荐配置\n\n`vue`官方模板的设置是`last 2 versions`，可能会导致你在某些`Android`机子上出现问题。\n\n如果你使用 `last 7 versions` 会生成不必要的`-ms`前缀代码.\n\n因此建议同`WeUI`一样，使用配置 `['iOS >= 7', 'Android >= 4.1']`\n\n## 直接在 vux-loader 里配置\n\n如果你没有在 postcss 里配置，你可以直接配置 vux-loader 的 `duplicate-style` 插件：\n\n``` js\n{\n name: 'duplicate-style',\n options: {\n cssProcessorOptions : {\n safe: true,\n zindex: false,\n autoprefixer: {\n add: true,\n \"browsers\": [\n \"iOS >= 7\",\n \"Android >= 4.1\"\n ]\n }\n }\n }\n}\n```\n" }, { "path": "docs/en/development/vue-loader-disable-eslint.md", "content": "---\ntitle: vue-loader 禁用 eslint\n---\n\n# 禁用 eslint\n\n并不推荐禁用`eslint`, 编码规范可以一定程序上保证代码质量。但是如果你确实想禁用，可以删除`build/webpack.base.conf.js`里的相关代码。\n\n``` js\npreLoaders: [\n {\n test: /\\.vue$/,\n loader: 'eslint',\n include: [\n path.join(projectRoot, 'src')\n ],\n exclude: /node_modules/\n },\n {\n test: /\\.js$/,\n loader: 'eslint',\n include: [\n path.join(projectRoot, 'src')\n ],\n exclude: /node_modules/\n }\n]\n```\n\n如果你只是想禁用对某一文件的检测，那么可以在`.eslintignore`里添加规则。\n\n如果你是想禁止某一行的检测，那么可以使用`// eslint-disable-line`。\n\n更加灵活的使用参考 [eslint文档](http://eslint.org/docs/user-guide/configuring#disabling-rules-with-inline-comments)。\n" }, { "path": "docs/en/development/vue-router-page-transition.md", "content": "---\ntitle: 页面切换转场动画\n---\n\n# 页面切换转场动画\n\n你可以注意到 demo 站点的切换动画，本质上是使用 `Vue` 的 `transition` 组件实现的。\n\n- [ ] todo" }, { "path": "docs/en/development/vue-show-loading.md", "content": "---\ntitle: 页面切换时显示loading\n---\n\n# 页面切换显示loading\n\n移动端如果使用异步组件加载那么还是需要一点等待时间的，在网络慢时等待时间会更长。显示`Loading`状态缓解一下用户等待情绪就十分重要。\n\n如果你使用`vue-router`和`vuex`，那么可以很容易实现。\n\n首先，注册一个`module`来保存状态\n\n``` js\nconst store = new Vuex.Store({}) // 这里你可能已经有其他 module\n\nstore.registerModule('vux', { // 名字自己定义\n state: {\n isLoading: false\n },\n mutations: {\n updateLoadingStatus (state, payload) {\n state.isLoading = payload.isLoading\n }\n }\n})\n```\n\n然后使用`vue-router`的`beforeEach`和`afterEach`来更改`loading`状态\n\n``` js\nrouter.beforeEach(function (to, from, next) {\n store.commit('updateLoadingStatus', {isLoading: true})\n next()\n})\n\nrouter.afterEach(function (to) {\n store.commit('updateLoadingStatus', {isLoading: false})\n})\n```\n\n在`App.vue`里使用`loading`组件并从`vuex`获取`isLoading`状态\n\n``` html\n\n```\n\n``` js\nimport { Loading } from 'vux'\nimport { mapState } from 'vuex'\n\nexport default {\n components: {\n Loading\n },\n computed: {\n ...mapState({\n isLoading: state => state.vux.isLoading\n })\n }\n}\n```\n\ndone.\n\n如果你觉得在加载比较快时`Loading`组件一闪而过体验也不大好，那么你可以延迟设置`loading=false`。" }, { "path": "docs/en/development/vue-webpack-code-splitting-async.md", "content": "---\ntitle: Vue 异步加载组件\n---\n\n# 异步加载组件\n\n将所有页面组件一次性加载是一个很浪费资源和考验用户耐心的做法，尤其在移动端。\n\n## 使用方法\n\n`webpack` 提供了[code splitting](https://webpack.js.org/guides/code-splitting-require/)，你可以按照下面写法实现当切换到特定路由时才加载代码。\n\n\n需要注意的是 `vue-loader@13.0.0` 语法有所变更，具体参照发布说明 [v13.0.0](https://github.com/vuejs/vue-loader/releases/tag/v13.0.0)\n\n``` js\n// vue-loader@13.0.0 之前\nconst Foo = () => import('./Foo.vue') // 在 Vue 2.4 + vue-router 2.7 版本下可以正确运行\n\n// vue-loader@13.0.0\nconst Foo = () => import('./Foo.vue').then(m => m.default)\n```\n\n\n## 组件打包问题\n\n如果你在不同的进行了代码分割的 .vue 文件引入了相同的组件，在打包时两个路由的代码都会重复打包该组件。\n\n你可以对重复使用的组件在 `main.js` 进行全局注册，以减少相应 chunk file 的大小并提高下载速度。\n" }, { "path": "docs/en/development/vue-webpack-env.md", "content": "---\ntitle: Vue + webpack 区分测试环境和生产环境\n---\n\n# 区分测试环境和生产环境\n\n如果你使用了 `vux2` 模板或者 `webpack` 模板，默认你可以直接通过判断 `process.env.NODE_ENV` 来区分\n\n比如`统计代码`仅放在 `production` 环境，在不同环境里使用不同的 `API` 接口地址。\n\n``` js\nif (process.env.NODE_ENV === 'production') {\n // 干一些线上才要做的事情\n}\nif (process.env.NODE_ENV === 'development') {\n // 干一些测试时不可告人的事情\n}\n```\n\n如果你是自己配置的环境，可以参考 [webpack DefinePlugin 文档](https://webpack.js.org/plugins/define-plugin/)" }, { "path": "docs/en/development/vux-nuxt-ssr.md", "content": "---\ntitle: vux 使用 nuxt 实现服务端渲染\n---\n\n# vux 使用 nuxt 实现服务端渲染\n\n请直接参考源码目录 [/ssr/nuxt](https://github.com/airyland/vux/tree/v2/ssr/nuxt)\n" }, { "path": "docs/en/directives/v-transfer-dom.md", "content": "---\ntitle: v-transfer-dom 指令\n---\n\n# v-transfer-dom 指令\n\n在移动端应用里，为了便于代码组织，通常我们要将组件放在各个路由的 `.vue` 文件里，但是因为此时组件并不在 `body` 下，加上定位，overflowscrolling 设置等原因，会出现遮罩在弹层之上，z-index 失效等问题。\n\n因此我们推荐在纯弹窗类组件比如 `Alert` `Popup` `XDialog` 等组件上使用 `v-transfer-dom` 实现自动移动到 body 下，解决以上问题。\n\n::: warning\n必须有一个 `div` 作为占位元素否则会出错\n:::\n\n\n## 使用\n\n### 注册局部指令\n\n``` js\nimport { TransferDom } from 'vux'\n\nexport default {\n directives: {\n TransferDom\n }\n}\n```\n\n### 注册全局指令\n\n``` js\nimport { TransferDom } from 'vux'\n\nVue.directive('transfer-dom', TransferDom)\n```\n\n### 模板使用\n\n``` html\n
    \n \n
    \n```" }, { "path": "docs/en/faq/$t-is-not-defined.md", "content": "---\ntitle: $t is not defined\n---\n\n# $t is not defined\n\n一般是两个原因：\n\n## cnpm 导致的问题\n\n如果是直接使用模板后并且使用 `cnpm` 报错，请升级到 `vux-loader@1.0.58`。\n\n该问题出现原因是 `cnpm` 安装后 `node_modules` 里的模块为快捷方式，而 `vux-loader` 之前版本没有考虑到这一特殊情况。\n\n## 未正确配置动态 i18n\n\ndemo例子使用`$t`是因为demo启用了`i18n`，如果你没有使用`vuex-i18n`等相关`i18n`插件，请不要在代码中使用`$t`函数\n" }, { "path": "docs/en/faq/Uncaught-SyntaxError-Unexpected-token-export.md", "content": "---\ntitle: Uncaught SyntaxError: Unexpected token export\n---\n\n# Uncaught SyntaxError: Unexpected token export\n\n原因是Vux的js源码没配置babel，你可以在webpack配置的loaders加上\n\n ``` js\n {\n test: /vux.src.*?js$/,\n loader: 'babel'\n }\n ```\n\n 或者启用`vux-loader`的`vux-ui`插件。" }, { "path": "docs/en/faq/can-vux-used-in-weapp.md", "content": "---\ntitle: VUX 能否在微信小程序里使用\n---\n\n# VUX 能否在微信小程序里使用\n\nSorry，不能。微信小程序是个相对封闭的平台，无法简单地适配也没有计划支持小程序版本。\n\n目前企业主体用户可以使用 `web-view` 组件直接显示 web 页面，间接地使用 VUX。\n\n\n## mpvue 解决方案能否直接迁移 VUX\n\n目前 [mpvue](http://mpvue.com/) 还不支持 `slot`、`slot-scope`，因此迁移有难度，并且小程序存在较多差异，暂未计划。\n" }, { "path": "docs/en/faq/cannot-resolve-inline-desc.md", "content": "---\ntitle: Can't resolve '../inline-desc' in\n--- \n\n# Can't resolve '../inline-desc' in\n\nwebpack resolve 配置\n\n``` js\nresolve: {\n extensions: ['', '.js', '.vue', '.json']\n}\n```" }, { "path": "docs/en/faq/difference-between-vux-template-and-webpack-template.md", "content": "---\ntitle: vux2 和 Vue 官方 webpack 模板区别是什么？\n---\n\n# vux2 和 Vue 官方 webpack 模板区别是什么？\n\n`vux2` 模板 fork 自 `webpack` 模板并进行了配置，和 `webpack` 模板基本同步，因此建议直接使用 vux2 模板。" }, { "path": "docs/en/faq/document-framework.md", "content": "---\ntitle: 文档是用什么工具编写的？\n---\n\n# 文档是用什么工具编写的？\n\n早期版本使用的是 [Docute](https://docute.js.org) by [egoist](https://github.com/egoist)。在`Docute`基础上做了一点样式修改。\n\n2.2.1 后面版本出于 `SEO` 考虑使用 `Vue` 的服务端渲染，使用的框架同样是 [egoist](https://github.com/egoist) 开发的 [ream](https://github.com/ream/ream)。\n\n文档部分样式参照了 [eggjs.org](https://eggjs.org/)，表示感谢。\n\n因此目前无论是组件还是文档都是完全基于 `Vue`，cool right?" }, { "path": "docs/en/faq/does-vux-support-weex.md", "content": "---\ntitle: Does VUX support weex\n---\n\n# Does VUX support weex\n\nNo, and not plan to support it." }, { "path": "docs/en/faq/dupicate-style.md", "content": "---\ntitle: 样式冗余\n---\n\n# 样式冗余\n\n## 调试时\n\n调试时如果你审查元素样式发现有多个重复样式是正常的，因为不同组件可能引用了同样的less源码，而调试时是直接把不同组件样式用`\n ```\n\n- 配置 `vue-loader`（通过配置vux-loader实现）\n\n ``` js\n // vux-loader\n module.exports = {\n configureWebpack: config => {\n require('@vux/loader').merge(config, {\n plugins: ['vux-ui', {\n name: 'less-theme',\n path: 'src/theme.less'\n }]\n })\n }\n }\n ```\n- 配置`babel-loader`以正确编译 VUX 的js源码（通过配置vux-loader实现）\n\n ``` js\n module.exports = {\n configureWebpack: config => {\n require('@vux/loader').merge(config, {\n plugins: ['vux-ui', {\n name: 'less-theme',\n path: 'src/theme.less'\n }]\n })\n }\n }\n ```\n- 安装`less-loader`以正确编译less源码\n\n ``` bash\n npm install less less-loader --save-dev\n ```\n- 安装 `yaml-loader` 以正确进行语言文件读取\n\n ``` bash\n npm install yaml-loader --save-dev\n ```\n\n- 添加 `viewport` meta\n\n ``` html\n \n ```\n- 添加 `Fastclick` 移除移动端点击延迟\n\n ``` js\n const FastClick = require('fastclick')\n FastClick.attach(document.body)\n ```\n- 添加 `vue-router`（如果不需要前端路由，可忽略）\n\n ``` js\n import VueRouter from 'vue-router'\n Vue.use(VueRouter)\n ```\n\n- 添加 webpack plugin, 在构建后去除重复css代码（通过配置vux-loader实现）\n\n ``` js\n plugins: [{\n name: 'duplicate-style'\n }]\n ```\n\n- 如果你使用 `webpack-simple` 模板或者 webpack 配置里缺少 .vue extension 配置，请记得配置：\n\n ``` js\n resolve: {\n extensions: ['.js', '.vue', '.json']\n ```" }, { "path": "docs/en/install/npm.md", "content": "---\ntitle: VUX 安装使用\n---\n\n# 安装使用(webpack)\n\n::: warning\n如果你从没使用过 `VUX`，请参考 快速入门。
    \n不推荐使用 `umd` 方式引用组件，但是如果不得不使用，可以参考 umd 构建\n:::\n\n直接安装或者更新：\n\n``` js\nnpm install vux --save\n```\n\n或者使用 `yarn`\n\n``` js\nyarn add vux // 安装\nyarn upgrade vux // 更新\n```\n\n如果你想直接从 Github 安装，请指定 `v2` 分支\n\n``` bash\nnpm install git://github.com/airyland/vux.git#v2\n```\n\n如果你是从`0.x`更新，请参考： 更新到`2.x`\n\n\n::: warning\nvux2必须配合`vux-loader`使用, 请在`build/webpack.base.conf.js`里参照如下代码进行配置：\n:::\n\n``` js\nconst vuxLoader = require('vux-loader')\nconst webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig\n\nmodule.exports = vuxLoader.merge(webpackConfig, {\n plugins: ['vux-ui']\n})\n```\n\n::: warning\nvux@0.x 已经停止维护，请尽快迁移到 vue@2.x & vuex@2.x & vux@2.x，虽然要花点时间，但是完全值得。\n:::" }, { "path": "docs/en/install/umd.md", "content": "---\ntitle: umd 组件构建及使用\n---\n\n# umd 组件构建及使用\n\n ::: tip\n 从`2.0`开始，推荐使用`webpack`来调用组件，因此不再在`repo`中保存`umd`文件，但提供了生成命令。\n\n 请更新 `NodeJS` 到版本 `7.6.0`及以上。\n\n 例子可查看：[https://github.com/airyland/vux/tree/v2/docs/examples](https://github.com/airyland/vux/tree/v2/docs/examples)\n :::\n\n ::: danger\n 强烈建议使用 `webpack` 的方式开发，在 3.0 之后可能不再提供支持。\n :::\n\n ## 生成命令\n\n ``` bash\n git clone https://github.com/airyland/vux.git --depth=1 // or just update: git pull\n cd vux\n npm install\n npm run build-components\n ```\n\n 默认生成的语言是`zh-CN`，模块命名空间为`vux`，如`vuxGroup`，`vuxCell`，你可以在命令行中配置。\n\n ```\n npm run build-components -- --locale='en' --namespace='X'\n ```\n\n ## 目录结构\n\n 生成的文件夹结构如：\n\n ::: tip\n 出于目录结构一致性考虑，即使是子组件也是一个文件夹，并且会有一个空的`index.min.css`样式文件。\n :::\n\n ```\n |- dist/\n |- vux.min.js ------------ 所有组件打包，仅用于测试，不推荐在生产环境使用\n |- vux.min.css ----------- 所有组件样式打包，同样仅用于测试\n |- components\n |- actionsheet\n |- index.min.js -------- 组件js代码\n |- index.min.css ------- 组件css代码\n ```\n\n ::: tip\n vux.min.js 包括了所有的组件、插件及默认地址库，都挂载在全局变量vux上。当然为了使用方便同样直接挂载到了`window`上。\n\n 组件调用举例: `vuxCell`\n\n 插件调用举例：`vuxAlertPlugin`\n\n 默认地址库调用：`vuxChinaAddressData`\n :::\n\n ## 组件使用\n\n ``` html\n \n \n \n \n scripts\n \n \n \n \n
    \n \n \n \n
    \n\n \n \n\n \n \n \n ```\n\n## 插件使用\n\n\n``` html\n\n\n\n \n \n scripts\n \n \n \n\n\n
    \n
    \n\n \n\n \n\n\n```\n\n## 生成css工具样式\n\n包括`1px`解决方案，构建文件位于`dist/styles/*.css`,构建方式：\n\n``` bash\nnpm run build-styles\n```\n\n::: tip\n为了使用方便，可以使用`npm run xbuild`来执行`build-components` 及 `build-styles`\n:::" }, { "path": "docs/en/install/upgrade-to-vux2.md", "content": "---\ntitle: 升级到 vux@2.x\n---\n\n# 升级到 vux@2.x\n\n### Vue@2.x 主要变更\n\n参考[Vue官方文档](https://cn.vuejs.org/v2/guide/migration.html)进行迁移, 这也是Vux组件的代码更新部分，主要包括：\n\n- `:value.sync` 已经废弃\n- `broadcast` 方法已经废弃\n- `@click` 需要更改为 `@click.native`\n- `v-for`的`(index, item)` => `(item, index)`\n\n### vue-router 更新\n\n配合vue2, `vue-router`同样需要更新到2.0版本以上\n\n原来的路由配置修改为：\n\n``` js\n\nconst routes = [{\n path: '/vux/2.0',\n component: Vux2Demo\n}]\n\nconst router = new VueRouter({\n routes\n})\n\n```\n\n原来的路由挂载修改为：\n\n``` js\nnew Vue({\n router,\n render: h => h(App)\n}).$mount('#app')\n```\n\n`go` 已经不是过去的 `go`了，要用`push`方法来跳转\n\n``` js\nthis.$router.go('/somewhere')\n```\n\n`v-link`也废弃了，使用`router-link`组件来代替\n\n其他请参考官方升级文档: [https://cn.vuejs.org/v2/guide/migration-vue-router.html](https://cn.vuejs.org/v2/guide/migration-vue-router.html)\n\n\n### 不再生成`umd`文件\n\n但是你可以使用`npm run build-components`来生成，请参考文档首页。\n\n### 双向绑定修改为 `v-model`\n\n所有相关Vux调用的 `:value.sync`都需要更改成 `v-model`\n\n``` js\n// 0.x\n\n// 2.x\n\n```\n\n### 使用 vux-loader\n\n原来你可能在webpack中做了这样的配置以正确编译vux的js源码：\n\n``` js\n{\n test: /vux.src.*?js$/,\n loader: 'babel'\n}\n```\n\n或者你也可能使用了低版本`vux-loader`的`getBabelLoader`方法。\n\n现在你可以直接删除这一句了，直接使用vux-loader。\n\n在`webpack.base.conf.js`中这样配置：\n\n``` js\nconst vuxLoader = require('vux-loader')\nmodule.exports = vuxLoader.merge(webpackConfig, {\n options: {},\n plugins: [\n {\n name: 'vux-ui'\n }\n ]\n})\n```\n\n### 引入方式变更\n\n原来你可能是单个组件引入，现在在`vux-loader`的支持下你可以直接这样写：\n\n``` js\nimport { Group, Cell } from 'vux'\n```\n\n\n### 组件名字变更\n\n

    \n 为什么不参照其他组件库全部加上`X`前缀，主要是因为觉得总要写个`X`相当不顺手。\n

    \n\n因Vue2.0限制组件名不能与原有的html5标签一样，因此部分组件进行了重命名，加上 `x-`前缀，所有需要加前缀的组件如下：\n\n- `Progress` => `XProgress`\n- `Switch` => `XSwitch`\n- `Dialog` => `XDialog`\n- `Address` => `XAddress`\n- `Circle` => `XCircle`\n- `XButton`\n- `XImg`\n- `XInput`\n- `XTextarea`\n- `XHeader`\n\n### 各个组件变更：\n\n#### Swiper 引入路径变化\n\n目录结构变化，与其他有子组件的统一，导致引入方式变化：\n\n``` js\n// 0.x\nimport Swiper from 'vux/src/components/swiper'\nimport SwiperItem from 'vux/src/components/swiper-item'\n// 2.0\nimport Swiper from 'vux/src/components/swiper/swiper'\nimport SwiperItem from 'vux/src/components/swiper/swiper-item'\n// 或者\nimport { Swiper, SwiperItem } from 'vux/src/components/swiper' // with vux-loader\n```\n\n#### ColorPicker 废弃\n\n

    \n `2.0.0`可用用，但是后面不再维护。\n

    \n\n这个组件可以由`cell`配合`slot`扩展出来，而且更灵活。没有做过统计，但是感觉使用人数应该挺少。\n\n#### Countdown 废弃\n\n

    \n `2.0.0`可用，但是后面不再维护。\n

    \n\n功能薄弱，比较鸡肋。\n\n#### Scroller reset方法更新\n\n由于 Vue@2.x 的`broadcast`方法已经废弃，并且之前的设计也并不是很好，uuid的绑定也其实是没必要的。\n\n- reset方法变成使用ref的`reset()`方法\n- pullup reset 变成 ref 的 `donePullup()`方法\n- pullup disable 变成 ref 的 `disablePullup()`方法\n- pullup enable 变成 ref 的 `enablePullup()`方法\n- pulldown reset 变成 ref 的 `donePulldown()`方法\n- pullup和pulldown的status绑定变成`v-model=\"status\"`绑定，示例\n\n ``` js\n status: {\n pullupStatus: 'default',\n pulldownStatus: 'default'\n }\n ```\n\n详细参照Scroller文档进行更新\n\n#### 表单默认required为true\n\n保持和`html`规范一致, 影响的组件有 `XInput` `Checklist`\n\n#### Checklist 不显示错误提示\n\n考虑到错误样式目前并不优雅，而用户有自定义错误样式的需要，因此处理成emit一个错误事件+底部slot， 用户可自行处理。\n\n#### XInput 的valid获取\n\n由于Vue2的$ref不再是响应的，因此不能直接在模板中通过ref调用组件的valid值(会报undefined)，所以需要变成在提交时再进行ref来获取valid值。\n\n#### XAddress 默认地址数据更新\n\n目前引用方式：\n\n``` js\nimport { XAddress, ChinaAddressData } from 'vux'\n```\n\n如果你想继续使用旧版本数据\n\n``` js\nimport { XAddress, ChinaAddressV1Data } from 'vux'\n```\n\n按照[最新统计局数据](http://www.stats.gov.cn/tjsj/tjbz/xzqhdm/201608/t20160809_1386477.html)进行更新，部分区域已经不存在，部分id做了更新。因此请*谨慎*更新，评估后端数据存储设计和前端交互再进行更新，避免错误更新用户数据或者导致数据丢失。\n\n完整更新如下图:\n\n

    \n \"\"\n

    \n" }, { "path": "docs/en/install/usage.md", "content": "---\ntitle: VUX 调用例子\n---\n\n# 调用示例\n\n## .vue文件中调用组件\n\n``` html\n\n\n\n```\n\n## main.js中调用plugin\n\n``` js\nimport { AlertPlugin, ToastPlugin } from 'vux'\n\nVue.use(AlertPlugin)\nVue.use(ToastPlugin)\n\n// 详细使用请参考对应组件文档\n```" }, { "path": "docs/en/lab/index.md", "content": "---\ntitle: 实验室\n---\n\n# 实验室\n\n> beta 测试组件将出现在这里。\n\n- [VChart](/en/components/v-chart.html)\n" }, { "path": "docs/en/production/inline-manifest.md", "content": "---\ntitle: Vue 打包优化：使用 inline manifest\n---\n\n# inline manifest\n\n::: tip\n`manifest` 文件为路径配置和异步组件名字列表，该做法可以减少一个`http`请求。\n\n确保 `vux-loader`更新到 `^1.0.35`。\n:::\n\n\n## 修改 index.html 模板\n\n首先在页面的``前加入代码：\n\n``` html\n<%=htmlWebpackPlugin.files.webpackManifest%>\n```\n\n## 配置 vux-loader\n\n在`vux-loader`配置的 `plugins` 列表中加入`inline-manifest`插件\n\n``` js\nplugins:[{\n name: 'inline-manifest'\n}]\n```\n\n或者简化写法直接使用名字：\n\n``` js\nplugins:['inline-manifest']\n```" }, { "path": "docs/en/tools/base64.md", "content": "---\ntitle: base64\n---\n\n# base64\n\n``` js\nimport { base64 } from 'vux'\n\nbase64.encode('VUX')\nbase64.decode('VlVY')\n```" }, { "path": "docs/en/tools/cookie.md", "content": "---\ntitle: cookie\n---\n\n# cookie\n\n``` js\nimport { cookie } from 'vux'\n```\n\n`get *cookie.get(name, [options])*`\n\n获取 cookie 值。`options` 参数可选，取值如下：\n\n1. `converter` 转换函数。如果所获取的 cookie 有值，会在返回前传给 `converter`\n函数进行转换。\n1. 选项对象。对象中可以有两个属性：`converter` 和 `raw`. `raw` 是布尔值，为真时，不会对获取到的\ncookie 值进行 URI 解码。\n\n**注**：如果要获取的 cookie 键值不存在，则返回 `undefined`.\n\n例子：\n\n```js\n// setup\ndocument.cookie = 'foo=1'\ndocument.cookie = 'bar=2'\n\ncookie.get('foo')\n// returns '1'\n\ncookie.get('bar', function(s) { return parseInt(s); } )\n// returns 2\n```\n\n\n`set *cookie.set(name, value, [options])`\n\n设置 cookie 值。参数 `options` 可选，可以有以下属性：`path`（字符串）、`domain`（字符串）、\n`expires`（数值或日期对象）、`raw`（布尔值）。当 `raw` 为真值时，在设置 cookie 值时，不会进行\nURI 编码。\n\n例子：\n\n```js\ncookie.set('foo', 3)\n\ncookie.set('bar', 4, {\n domain: 'example.com',\n path: '/',\n expires: 30\n})\n````\n\n\n`remove *cookie.remove(name, [options])`\n\n移除指定的 cookie.\n\n例子：\n\n```js\ncookie.remove('foo')\n\ncookie.remove('bar', {\n domain: 'example.com',\n path: '/'\n})\n```\n" }, { "path": "docs/en/tools/date.md", "content": "---\ntitle: vue date format\n---\n\n# date format\n\nBuilt-in dateFormat is much smaller size than `moment`。\n\n\n## Usage\n\n``` js\nimport { dateFormat } from 'vux'\n\ndateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss')\n```\n\n## Used as Vue filter\n\n``` js\nimport { dateFormat } from 'vux'\n\nexport default {\n filters: {\n dateFormat\n }\n}\n\n```" }, { "path": "docs/en/tools/debounce-throttle.md", "content": "---\ntitle: debounce\n---\n\n## debounce\n\n::: warning\n请注意了解 `debounce` 和 `throttle` 的区别。如果尚不清楚，请`google`之。\n:::\n\n``` js\nimport { debounce } from 'vux'\n\ndebounce(func, [wait=0], [options={}])\n```\n[详细文档](https://lodash.com/docs/#debounce)\n\n## throttle\n\n``` js\nimport { throttle } from 'vux'\n\nthrottle(func, [wait=0], [options={}])\n```\n\n[详细文档](https://lodash.com/docs/#throttle)\n" }, { "path": "docs/en/tools/md5.md", "content": "---\ntitle: md5\n---\n\n# md5\n\n::: tip\n该工具直接依赖于 [blueimp-md5](https://github.com/blueimp/JavaScript-MD5)\n\n注意: `md5`是消息摘要算法并非加密算法，用于需要加密的场景会有安全问题。\n:::\n\n``` js\nimport { md5 } from 'vux'\n\nmd5('VUX')\n```\n" }, { "path": "docs/en/tools/number.md", "content": "---\ntitle: vue number format\n---\n\n# number format\n\n`numberComma`用于分割数字，默认为3位分割，一般用于格式化`金额`。\n\n`numberPad`用于按照位数补0\n\n`numberRandom`用于生成两个整数范围内的随机整数\n\n``` js\nimport { numberComma, numberPad, numberRandom } from 'vux'\nnumberComma(21342132) // 21,342,132\nnumberComma(21342132, 4) // 2134,2132\nnumberComma(21342132.234) // 21,342,132.234\n\nnumberPad(1) // 01\nnumberPad(234, 4) // 0234\n\nnumberRandom(1, 7) // 2\n```\n" }, { "path": "docs/en/tools/querystring.md", "content": "---\ntitle: Vue querystring url\n---\n\n# url querystring\n\n```js\nimport { querystring } from 'vux'\n\nquerystring.parse('a=b&c=d') // {a:'b',c:'d'}, 默认参数为 location.search\n\nquerystring.stringify({a:'b',c:'d'}) // 'a=b&c=d'，注意不支持复杂嵌套的结构\n```\n" }, { "path": "docs/en/tools/string.md", "content": "---\ntitle: Vue trim string\n---\n\n# trim string\n\n``` js\nimport { trim } from 'vux'\n\ntrim(' 1024 ') // 1024\n```\n" }, { "path": "docs/en/umd.md", "content": "---\r\nnav: zh-CN\r\n---\r\n\r\n## 组件 umd 文件\r\n\r\n

    \r\n 从`2.0`开始，推荐使用`webpack`来调用组件，因此不再在`repo`中保存`umd`文件，但提供了生成命令。\r\n
    \r\n 请更新 `NodeJS` 到版本 `7.6.0`及以上。\r\n
    \r\n 例子可查看：[https://github.com/airyland/vux/tree/v2/docs/examples](https://github.com/airyland/vux/tree/v2/docs/examples)\r\n

    \r\n\r\n ### 生成命令\r\n\r\n ``` bash\r\n git clone https://github.com/airyland/vux.git --depth=1 // or just update: git pull\r\n cd vux\r\n npm install\r\n npm run build-components\r\n ```\r\n\r\n 默认生成的语言是`zh-CN`，模块命名空间为`vux`，如`vuxGroup`，`vuxCell`，你可以在命令行中配置。\r\n\r\n ```\r\n npm run build-components -- --locale='en' --namespace='X'\r\n ```\r\n\r\n ### 目录结构\r\n\r\n 生成的文件夹结构如：\r\n\r\n

    \r\n 出于目录结构一致性考虑，即使是子组件也是一个文件夹，并且会有一个空的`index.min.css`样式文件。\r\n

    \r\n\r\n ```\r\n |- dist/\r\n |- vux.min.js ------------ 所有组件打包，仅用于测试，不推荐在生产环境使用\r\n |- vux.min.css ----------- 所有组件样式打包，同样仅用于测试\r\n |- components\r\n |- actionsheet\r\n |- index.min.js -------- 组件js代码\r\n |- index.min.css ------- 组件css代码\r\n ```\r\n\r\n

    \r\n vux.min.js 包括了所有的组件、插件及默认地址库，都挂载在全局变量vux上。当然为了使用方便同样直接挂载到了`window`上。\r\n
    \r\n 组件调用举例: `vuxCell`\r\n
    \r\n 插件调用举例：`vuxAlertPlugin`\r\n
    \r\n 默认地址库调用：`vuxChinaAddressData`\r\n

    \r\n\r\n ### 组件使用\r\n\r\n ``` html\r\n \r\n \r\n \r\n \r\n scripts\r\n \r\n \r\n \r\n \r\n
    \r\n \r\n \r\n \r\n
    \r\n\r\n \r\n \r\n\r\n \r\n \r\n \r\n ```\r\n### 插件使用\r\n\r\n\r\n``` html\r\n\r\n\r\n\r\n \r\n \r\n scripts\r\n \r\n \r\n \r\n\r\n\r\n
    \r\n
    \r\n\r\n \r\n\r\n \r\n\r\n\r\n```\r\n\r\n### 生成css工具样式\r\n\r\n包括`1px`解决方案，构建文件位于`dist/styles/*.css`,构建方式：\r\n\r\n``` bash\r\nnpm run build-styles\r\n```\r\n\r\n

    为了使用方便，可以使用`npm run xbuild`来执行`build-components` 及 `build-styles`

    " }, { "path": "docs/en/upgrade-to-2.md", "content": "---\nnav: zh-CN\n---\n\n### Vue@2.x 主要变更\n\n参考[Vue官方文档](https://cn.vuejs.org/v2/guide/migration.html)进行迁移, 这也是Vux组件的代码更新部分，主要包括：\n\n- `:value.sync` 已经废弃\n- `broadcast` 方法已经废弃\n- `@click` 需要更改为 `@click.native`\n- `v-for`的`(index, item)` => `(item, index)`\n\n### vue-router 更新\n\n配合vue2, `vue-router`同样需要更新到2.0版本以上\n\n原来的路由配置修改为：\n\n``` js\n\nconst routes = [{\n\tpath: '/vux/2.0',\n\tcomponent: Vux2Demo\n}]\n\nconst router = new VueRouter({\n routes\n})\n\n```\n\n原来的路由挂载修改为：\n\n``` js\nnew Vue({\n router,\n render: h => h(App)\n}).$mount('#app')\n```\n\n`go` 已经不是过去的 `go`了，要用`push`方法来跳转\n\n``` js\nthis.$router.go('/somewhere')\n```\n\n`v-link`也废弃了，使用`router-link`组件来代替\n\n其他请参考官方升级文档: [https://cn.vuejs.org/v2/guide/migration-vue-router.html](https://cn.vuejs.org/v2/guide/migration-vue-router.html)\n\n\n### 不再生成`umd`文件\n\n但是你可以使用`npm run build-components`来生成，请参考文档首页。\n\n### 双向绑定修改为 `v-model`\n\n所有相关Vux调用的 `:value.sync`都需要更改成 `v-model`\n\n``` js\n// 0.x\n\n// 2.x\n\n```\n\n### 使用 vux-loader\n\n原来你可能在webpack中做了这样的配置以正确编译vux的js源码：\n\n``` js\n{\n test: /vux.src.*?js$/,\n loader: 'babel'\n}\n```\n\n或者你也可能使用了低版本`vux-loader`的`getBabelLoader`方法。\n\n现在你可以直接删除这一句了，直接使用vux-loader。\n\n在`webpack.base.conf.js`中这样配置：\n\n``` js\nconst vuxLoader = require('vux-loader')\nmodule.exports = vuxLoader.merge(webpackConfig, {\n options: {},\n plugins: [\n {\n name: 'vux-ui'\n }\n\t]\n})\n```\n\n### 引入方式变更\n\n原来你可能是单个组件引入，现在在`vux-loader`的支持下你可以直接这样写：\n\n``` js\nimport { Group, Cell } from 'vux'\n```\n\n\n### 组件名字变更\n\n

    \n 为什么不参照其他组件库全部加上`X`前缀，主要是因为觉得总要写个`X`相当不顺手。\n

    \n\n因Vue2.0限制组件名不能与原有的html5标签一样，因此部分组件进行了重命名，加上 `x-`前缀，所有需要加前缀的组件如下：\n\n- `Progress` => `XProgress`\n- `Switch` => `XSwitch`\n- `Dialog` => `XDialog`\n- `Address` => `XAddress`\n- `Circle` => `XCircle`\n- `XButton`\n- `XImg`\n- `XInput`\n- `XTextarea`\n- `XHeader`\n\n### 各个组件变更：\n\n#### Swiper 引入路径变化\n\n目录结构变化，与其他有子组件的统一，导致引入方式变化：\n\n``` js\n// 0.x\nimport Swiper from 'vux/src/components/swiper'\nimport SwiperItem from 'vux/src/components/swiper-item'\n// 2.0\nimport Swiper from 'vux/src/components/swiper/swiper'\nimport SwiperItem from 'vux/src/components/swiper/swiper-item'\n// 或者\nimport { Swiper, SwiperItem } from 'vux/src/components/swiper' // with vux-loader\n```\n\n#### ColorPicker 废弃\n\n

    \n `2.0.0`可用用，但是后面不再维护。\n

    \n\n这个组件可以由`cell`配合`slot`扩展出来，而且更灵活。没有做过统计，但是感觉使用人数应该挺少。\n\n#### Countdown 废弃\n\n

    \n `2.0.0`可用，但是后面不再维护。\n

    \n\n功能薄弱，比较鸡肋。\n\n#### Scroller reset方法更新\n\n由于 Vue@2.x 的`broadcast`方法已经废弃，并且之前的设计也并不是很好，uuid的绑定也其实是没必要的。\n\n- reset方法变成使用ref的`reset()`方法\n- pullup reset 变成 ref 的 `donePullup()`方法\n- pullup disable 变成 ref 的 `disablePullup()`方法\n- pullup enable 变成 ref 的 `enablePullup()`方法\n- pulldown reset 变成 ref 的 `donePulldown()`方法\n- pullup和pulldown的status绑定变成`v-model=\"status\"`绑定，示例\n\n ``` js\n status: {\n pullupStatus: 'default',\n pulldownStatus: 'default'\n }\n ```\n\n详细参照Scroller文档进行更新\n\n#### 表单默认required为true\n\n保持和`html`规范一致, 影响的组件有 `XInput` `Checklist`\n\n#### Checklist 不显示错误提示\n\n考虑到错误样式目前并不优雅，而用户有自定义错误样式的需要，因此处理成emit一个错误事件+底部slot， 用户可自行处理。\n\n#### XInput 的valid获取\n\n由于Vue2的$ref不再是响应的，因此不能直接在模板中通过ref调用组件的valid值(会报undefined)，所以需要变成在提交时再进行ref来获取valid值。\n\n#### XAddress 默认地址数据更新\n\n目前引用方式：\n\n``` js\nimport { XAddress, ChinaAddressData } from 'vux'\n```\n\n如果你想继续使用旧版本数据\n\n``` js\nimport { XAddress, ChinaAddressV1Data } from 'vux'\n```\n\n按照[最新统计局数据](http://www.stats.gov.cn/tjsj/tjbz/xzqhdm/201608/t20160809_1386477.html)进行更新，部分区域已经不存在，部分id做了更新。因此请*谨慎*更新，评估后端数据存储设计和前端交互再进行更新，避免错误更新用户数据或者导致数据丢失。\n\n完整更新如下图:\n\n

    \n \"\"\n

    \n" }, { "path": "docs/en/vux-loader/about.md", "content": "---\ntitle: vux-loader 介绍\n---\n\n\n# vux-loader 介绍\n\n

    \n \n \"\"\n \n \n \"\"\n \n

    \n\n`vux-loader`工具的作用是对`.vue`代码进行预处理，不限于 vux 组件库。\n\n它是针对`webpack+vue-loader`项目的工程化工具，简化了webpack插件和loader的使用和编写，支持在vue-loader处理之前进行预处理，同时内置对vux组件专用的配置和优化插件。\n\n当然除了.vue文件外，你还可以对js文件进行预处理。说好的处理.vue文件，为什么连`js`文件也不放过呢？因为只有处理js才能实现理想工程化。举个例子，如果用户需要在`main.js`中调用vux的plugin，他需要这样做：\n\n``` js\nimport AlertPlugin from 'vux/src/plugins/Alert'\nimport ToastPlugin from 'vux/src/plugins/Toast'\n```\n虽然路径不长，但是看着相当不和谐，为了简化这个操作vux提供了更简洁的写法：\n\n``` js\nimport { AlertPlugin, ToastPlugin } from 'vux'\n```\n\n这个操作即是通过`js-parser`插件解析main.js里的`import`语法来实现的，最终进入`babel`处理的代码和上面单独引入一致。\n\n这个工具也许会帮你进一步打开`Vue`项目工程化的思路。\n\n::: tip\n作为通用工具，即使你没有使用 `VUX`，依然可以使用它来进行各种代码处理。\n:::\n\n## 为什么不使用 babel-plugin-import\n\n* VUX 希望使用源码分发\n* VUX 希望无侵入地解决一系列的工程问题，不需要用户手动配置 webpack\n* VUX 希望能统计(匿名)使用情况\n\n而上面这些单纯使用 `babel-plugin-import` 无法做到，所以造了个轮子。\n" }, { "path": "docs/en/vux-loader/how-vux-loader-works.md", "content": "---\ntitle: vux-loader 实现方式\n---\n\n# vux-loader 实现方式\n\n说明一下`vux-loader`是如何和`vue-loader`搞基配合的。\n\n如果你看过`webpack`loader的介绍，理论上说如果需要自己手动先处理代码再传入`vue-loader`,你只需要这样对loader做配置: `vue-loader!my-loader`。但是如果你试过，就知道这个目前行不通。`vue-loader`不会接收上一个loader的source进行处理，因为.vue文件的特殊性，它直接生成了loader string进入下一个处理，处理后的结果大概是这样的：\n\n``` js\n/* styles */\nrequire(\"!!vue-style-loader!css-loader!vue-loader/lib/style-rewriter?id=data-v-20d7ba9a!vue-loader/lib/selector?type=styles&index=0!./index.vue\")\n\n/* script */\n__vue_exports__ = require(\"!!babel-loader!vue-loader/lib/selector?type=script&index=0!./index.vue\")\n\n/* template */\nvar __vue_template__ = require(\"!!vue-loader/lib/template-compiler?id=data-v-20d7ba9a!vue-loader/lib/selector?type=template&index=0!./index.vue\")\n```\n\n那么vue-loader提供了自定义loader string的选项，直接配置可否呢，[#531](https://github.com/vuejs/vue-loader/issues/531)，直接配置会破坏原来的loader参数，导致不能Live reload。\n\n那么最终能想到的就是直接修改`vue-loader`生成的代码，这样既不会影响`vue-loader`原来的逻辑，也能自由控制。\n\n最终实现方式是前置`vux-loader`即：`vux-loader!vue-loader`，vux-loader将vue-loader生成的代码二次处理，分割loader string并(强行)插入vux的 template-loader, style-loader, script-loader，那么你就能理解vux-loader的配置方式了，在3大基本loader里获取到vux-loader的插件配置列表逐个做处理就行了。\n\n上面的代码强行处理后是这样的：\n\n``` js\n/* styles */\nrequire(\"!!vue-style-loader!css-loader!vue-loader/lib/style-rewriter?id=data-v-20d7ba9a!./../../../../vux-loader/src/style-loader.js!vue-loader/lib/selector?type=styles&index=0!./index.vue\")\n\n/* script */\n__vue_exports__ = require(\"!!babel-loader!vue-loader/lib/selector?type=script&index=0!./../../../../vux-loader/src/script-loader.js!./index.vue\")\n\n/* template */\nvar __vue_template__ = require(\"!!vue-loader/lib/template-compiler?id=data-v-20d7ba9a!./../../../../vux-loader/src/template-loader.js!vue-loader/lib/selector?type=template&index=0!./index.vue\")\n```\n\n原理就是这么简单（但是处理时还是遇到一些问题），为了方便使用，编写了常用的一些插件。\n\n至于`js-parser`就只是在`babel-loader`前加上了`vux-loader`的`js-loader`。\n\n而所有的loader, plugins设置都是在`vux-loader`的`merge`方法里来完成。" }, { "path": "docs/en/vux-loader/install.md", "content": "---\ntitle: vux-loader 使用\n---\n\n# vux-loader 使用\n\n## 安装\n\n``` bash\nnpm install vux-loader --save-dev\n```\n\n## 使用\n\n为了降低使用成本及不侵入原来配置，只需要调用`merge`方法对原来`webpack`配置进行操作：\n\n``` js\nconst webpackConfig = {} // 原来的 webpack.base.js 配置\n\nconst vuxLoader = require('vux-loader')\n\nmodule.exports = vuxLoader.merge(webpackConfig, {\n options: {},\n plugins: [{\n name: 'vux-ui'\n }]\n})\n```\n\n::: warning\n更新配置后需要重新运行 `npm run dev` 命令。\n:::\n\n## Options\n\n- `env` 非必选，定义当前环境变量，只在 vux-loader 里使用，用来判断哪些插件需要被执行(如果plugin有定义envs的话)，目的是实现一份配置多个环境使用。\n\n\n## Plugins\n\n插件为一个数组列表，根据需要可以添加你需要的插件，插件名为必须，有些组件不需要额外配置选项。\n\n公用参数为:\n\n- `name` `必须`，插件名字\n- `envs` `非必须`，数组，当前插件在哪些环境变量里执行，不定义则默认执行\n\n下面的插件配置代码将省略 `plugins:[]`的书写。\n\n::: tip\n当使用默认配置时，可以使用简写\n\n``` js\nplugins: ['vux-ui']\n```\n\n等同于\n\n``` js\nplugins: [{\n name: 'vux-ui'\n}]\n```\n:::" }, { "path": "docs/en/vux-loader/plugins.md", "content": "---\ntitle: vux-loader 插件列表\n---\n\n# vux-loader 插件列表\n\n\n## script-parser\n\n> .vue 文件的 script 部分代码处理\n\n``` js\n[{\n name: 'script-parser',\n fn: function (source) {\n return source.replace('VARIABLE', 'v2')\n }\n}]\n```\n\n## style-parser\n\n> `` 代码处理\n\n``` js\n[{\n name: 'style-parser',\n fn: function (source) {\n return source.replace('black', 'white')\n }\n}]\n```\n## template-parser\n\n> template代码替换处理\n\n> 适用于对``模板代码做自定义处理\n\n\n * name 插件名字， `template-parser`\n * replaceList 非必须，正则匹配列表，将直接调用 `replace` 方法进行替换\n * fn 非必须，相比params更灵活的方法，可以对字符串进行处理后返回\n\n插件配置：\n\n``` js\n[\n name: \"template-parser\",\n replaceList: [{\n test: /DeathToPM/g,\n replaceString: '微博-随时随地发现新鲜事'\n }, {\n test: /呵呵我们压根没有底线/g,\n replaceString: '我是有底线的'\n }],\n fn: function (templateSource) {\n return templateSource.replace('智障', '机智')\n }\n]\n```\n\n#### js-parser\n\n> 项目里js文件处理，在babel-loader前进行处理\n\n``` js\n[{\n name: 'js-parser',\n fn: function (source) {\n return source.replace('black', 'white')\n }\n}]\n```\n\n## template-feature-switch\n\n实现根据变量切换template代码\n\n参数：\n\n- `features`，变量列表，值只能为true或者false\n\n``` js\n{\n name: 'template-feature-switch',\n features: {\n feature1: true,\n feature2: false\n }\n}\n```\n\n``` html\n\n```\n那么当 feature1 为 true时，将输出 `AWESOME FEATURE 1 is ON`, 反之则输出 `AWESOME FEATURE 1 is OFF`。注意`on`标签内不限定内容，可以为任何标签代码块，但`避免在on off 里面再嵌套 on off`\n\n\n## vux-ui\n\n

    \n vux组件的配套工具，如果没有使用vux, 不需要添加。\n

    \n\n如果配合`vux`使用，需要手动启用。默认不需要设置选项。\n\n该插件做了以下处理：\n\n- 配置`babel`编译 vux 的js源码\n- 修改vue-loader为 `vux-loader!vue-loader`\n- `import`组件调用解析为单组件引入\n\n```\n{\n name: 'vux-ui'\n}\n```\n\n那么你就可以很方便地引入组件了：\n\n```\n// 0.x\nimport Group from 'vux/src/components/group'\nimport Cell from 'vux/src/components/cell'\n\n// 2.x\nimport { Group, Cell } from 'vux'\n```\n\n## i18n\n\n1. 如果你只是调用中文语言的vux组件，那么你不需要做任何配置。\n\n2. 如果你需要调用英文语言的vux组件，需要配置语言\n\n ``` js\n {\n name: 'i18n',\n vuxStaticReplace: true,\n vuxLocale: 'en'\n }\n ```\n3. 如果你想和demo站点一样可以写`i18n`block，并且需要动态切换语言，那么需要配置插件抽取i18n的内容，并设置非静态替换\n\n ``` js\n {\n name: 'i18n',\n vuxStaticReplace: false,\n staticReplace: false,\n extractToFiles: 'src/locales/components.yml',\n localeList: ['en', 'zh-CN']\n }\n ```\n\n然后你就可以引用`vuex-i18n`插件实现多语言切换了。\n\n参考 [main.js](https://github.com/airyland/vux/blob/v2/src/main.js#L84-L96) 及 [vuex-i18n 文档](https://www.npmjs.com/package/vuex-i18n)(仅当参考，你也可以使用其他i18n插件)。\n\n## less-theme\n\n

    \n注意，path所在文件必须是简单的less变量对，不能import其他文件或者引入变量。\n

    \n\n> less 变量设置和替换\n\n> 适用于全局变量替换, 方便切换主题\n> 这意味着，你不再需要为每个页面引入全局的less文件了，你只需要设置lang为less就可以直接使用变量了\n\n```\n\n```\n\n插件配置：\n\n``` js\n{\n name: 'less-theme',\n path: 'src/styles/theme.less'\n}\n```\n\n## duplicate-style\n\n> css 重复代码清除\n\n

    \n 建议使用vux组件的用户使用，因为vux直接引用less，最终构建的css文件确实会有冗余。\n

    \n\n\n> 在webpack 构建完成后对生成的css文件使用cssnano进行重复样式清除。建议只在production环境下开启，因为dev环境没有必要。\n\n``` js\n{\n name: 'duplicate-style',\n events: {\n done: function () {\n console.log('done!')\n }\n }\n}\n```\n\n## html-build-callback\n\n>html文件处理事件回调\n\n> 适用于在写入html(一般为index.html)文件前进行内容修改，比如替换特定内容\n> 比如写入js配置变量，改变cdn域名，将manifest文件直接写入html以减少请求等\n\n``` js\n{\n name: 'html-build-callback',\n events: {\n 'after-html-processing': function (data, cb) {\n data.html += 'magic footer'\n cb(null, data)\n }\n }\n}\n```\n\n可用事件请参考 [html-webpack-plugin](https://www.npmjs.com/package/html-webpack-plugin)\n\n\n## build-done-callback\n\n> 构建完成事件回调\n> 本质上是在webpack plugin的 done 事件后触发\n\n``` js\n{\n name: 'build-done-callback',\n fn: function () {\n console.log('done!')\n }\n}\n```" }, { "path": "docs/en/vux-loader.md", "content": "---\nnav: zh-CN\n---\n\n

    vux!vue

    \n\n

    \n \n \"\"\n \n \n \"\"\n \n

    \n\n\n### 介绍\n\n`vux-loader`工具的作用是对`.vue`代码进行预处理，不限于 vux 组件库。\n\n它是针对`webpack+vue-loader`项目的工程化工具，简化了webpack插件和loader的使用和编写，支持在vue-loader处理之前进行预处理，同时内置对vux组件专用的配置和优化插件。\n\n当然除了.vue文件外，你还可以对js文件进行预处理。说好的处理.vue文件，为什么连`js`文件也不放过呢？因为只有处理js才能实现理想工程化。举个例子，如果用户需要在`main.js`中调用vux的plugin，他需要这样做：\n\n``` js\nimport AlertPlugin from 'vux/src/plugins/Alert'\nimport ToastPlugin from 'vux/src/plugins/Toast'\n```\n虽然路径不长，但是看着相当不和谐，为了简化这个操作vux提供了更简洁的写法：\n\n``` js\nimport { AlertPlugin, ToastPlugin } from 'vux'\n```\n\n这个操作即是通过`js-parser`插件解析main.js里的`import`语法来实现的，最终进入babel的代码和上面单独引入一致。\n\n这个工具也许会帮你进一步打开`Vue`项目工程化的思路。\n\n

    \n 作为通用工具，即使你没有使用Vux，依然可以使用它来进行各种代码处理。\n
    \n 目前支持 vue-loader@>9.x, 低版本没有具体测试。\n
    \n `vux!vue`的loader写法只兼容webpack@1.x，为了兼容webpack@2.x，处理后的loader配置是`vux-loader!vue-loader`\n

    \n\n### 实现方式\n\n说明一下`vux-loader`是如何和`vue-loader`搞基配合的，vue-loader的issue里不少同学遇到预处理.vue的问题。\n\n如果你看过`webpack`loader的介绍，理论上说如果需要自己手动先处理代码再传入`vue-loader`,你只需要这样对loader做配置: `vue-loader!my-loader`。但是如果你试过，就知道这个目前行不通。`vue-loader`不会接收上一个loader的source进行处理，因为.vue文件的特殊性，它直接生成了loader string进入下一个处理，处理后的结果大概是这样的：\n\n``` js\n/* styles */\nrequire(\"!!vue-style-loader!css-loader!vue-loader/lib/style-rewriter?id=data-v-20d7ba9a!vue-loader/lib/selector?type=styles&index=0!./index.vue\")\n\n/* script */\n__vue_exports__ = require(\"!!babel-loader!vue-loader/lib/selector?type=script&index=0!./index.vue\")\n\n/* template */\nvar __vue_template__ = require(\"!!vue-loader/lib/template-compiler?id=data-v-20d7ba9a!vue-loader/lib/selector?type=template&index=0!./index.vue\")\n```\n\n那么vue-loader提供了自定义loader string的选项，直接配置可否呢，[#531](https://github.com/vuejs/vue-loader/issues/531)，直接配置会破坏原来的loader参数，导致不能Live reload。\n\n那么最终能想到的就是直接修改`vue-loader`生成的代码，这样既不会影响`vue-loader`原来的逻辑，也能自由控制。\n\n最终实现方式是前置`vux-loader`即：`vux-loader!vue-loader`，vux-loader将vue-loader生成的代码二次处理，分割loader string并(强行)插入vux的 template-loader, style-loader, script-loader，那么你就能理解vux-loader的配置方式了，在3大基本loader里获取到vux-loader的插件配置列表逐个做处理就行了。\n\n上面的代码强行处理后是这样的：\n\n``` js\n/* styles */\nrequire(\"!!vue-style-loader!css-loader!vue-loader/lib/style-rewriter?id=data-v-20d7ba9a!./../../../../vux-loader/src/style-loader.js!vue-loader/lib/selector?type=styles&index=0!./index.vue\")\n\n/* script */\n__vue_exports__ = require(\"!!babel-loader!vue-loader/lib/selector?type=script&index=0!./../../../../vux-loader/src/script-loader.js!./index.vue\")\n\n/* template */\nvar __vue_template__ = require(\"!!vue-loader/lib/template-compiler?id=data-v-20d7ba9a!./../../../../vux-loader/src/template-loader.js!vue-loader/lib/selector?type=template&index=0!./index.vue\")\n```\n\n原理就是这么简单（但是处理时还是遇到一些问题），为了方便使用，编写了常用的一些插件。\n\n至于`js-parser`就只是在`babel-loader`前加上了`vux-loader`的`js-loader`。\n\n而所有的loader, plugins设置都是在`vux-loader`的`merge`方法里来完成。\n\n### 实际使用场景\n\n我们可以使用`vux-loader`做一些很有意思的事。\n比如 [#542](https://github.com/vuejs/vue-loader/issues/542) 提到的根据当前feature为判断要输出哪一部分代码，现在已经直接支持，请看 `template-feature-switch`部分。\n\n对于公用组件而言，完全可以实现构建时进行组件瘦身，只保留使用到的代码。\n\n当然如果你愿意，你完全可以自己实现一门语言。\n\n## 安装\n\n``` bash\nnpm install vux-loader --save-dev\n```\n\n## 使用\n\n为了减少使用成本，只需要调用`merge`方法对原来`webpack`配置进行操作：\n\n``` js\nconst webpackConfig = {} // 原来的webpack配置\n\nconst vuxLoader = require('vux-loader')\n\nmodule.exports = vuxLoader.merge(webpackConfig, {\n options: {},\n plugins: [{\n name: 'vux-ui'\n }]\n})\n```\n\n

    \n 更新配置后需要重启npm run dev命令\n

    \n\n### Options\n\n- `env` 非必选，定义当前环境变量，只在vux-loader里使用，用来判断哪些插件需要被执行(如果plugin有定义envs的话)，目的是实现一份配置多个环境使用。\n\n\n### Plugins\n\n插件为一个数组列表，根据需要可以添加你需要的插件，插件名为必须，有些组件不需要额外配置选项。\n\n公用参数为:\n\n- `name` `必须`，插件名字\n- `envs` `非必须`，数组，当前插件在哪些环境变量里执行，不定义则默认执行\n\n下面的插件配置代码将省略 `plugins:[]`的书写。\n\n#### script-parser\n\n> script代码替换处理\n\n``` js\n[{\n name: 'script-parser',\n fn: function (source) {\n return source.replace('VARIABLE', 'v2')\n }\n}]\n```\n\n#### style-parser\n\n> style代码替换处理\n\n``` js\n[{\n name: 'style-parser',\n fn: function (source) {\n return source.replace('black', 'white')\n }\n}]\n```\n#### template-parser\n\n> template代码替换处理\n\n> 适用于对``模板代码做自定义处理\n> 适用于某些更改不频繁但非服务端配置的文字，可能调用多次，也可能手动更改或者批量替换相对麻烦\n>\n> 同样你也可以用来从接口获取最新配置替换特定的占位字符\n>\n> 当然也适用于在源码中对`pm`进行吐槽(千万要记得production环境要有配置，否则可能会上新闻。)\n\n * name 插件名字， `template-parser`\n * replaceList 非必须，正则匹配列表，将直接调用 `replace` 方法进行替换\n * fn 非必须，相比params更灵活的方法，可以对字符串进行处理后返回\n\n插件配置：\n\n``` js\n[\n name: \"template-parser\",\n replaceList: [{\n test: /DeathToPM/g,\n replaceString: '微博-随时随地发现新鲜事'\n }, {\n test: /呵呵我们压根没有底线/g,\n replaceString: '我是有底线的'\n }],\n fn: function (templateSource) {\n return templateSource.replace('智障', '机智')\n }\n]\n```\n\n#### js-parser\n\n> 项目里js文件处理，在babel-loader前进行处理\n\n``` js\n[{\n name: 'js-parser',\n fn: function (source) {\n return source.replace('black', 'white')\n }\n}]\n```\n\n#### template-feature-switch\n\n实现根据变量切换template代码\n\n参数：\n\n- `features`，变量列表，值只能为true或者false\n\n``` js\n{\n name: 'template-feature-switch',\n features: {\n feature1: true,\n feature2: false\n }\n}\n```\n\n``` html\n\n```\n那么当 feature1 为 true时，将输出 `AWESOME FEATURE 1 is ON`, 反之则输出 `AWESOME FEATURE 1 is OFF`。注意`on`标签内不限定内容，可以为任何标签代码块，但`避免在on off 里面再嵌套 on off`\n\n\n#### vux-ui\n\n

    \n vux组件的配套工具，如果没有使用vux, 不需要添加。\n

    \n\n如果配合`vux`使用，需要手动启用。默认不需要设置选项。\n\n该插件做了以下处理：\n\n- 配置`babel`编译 vux 的js源码\n- 修改vue-loader为 `vux-loader!vue-loader`\n- `import`组件调用解析为单组件引入\n\n```\n{\n name: 'vux-ui'\n}\n```\n\n那么你就可以很方便地引入组件了：\n\n```\n// 0.x\nimport Group from 'vux/src/components/group'\nimport Cell from 'vux/src/components/cell'\n\n// 2.x\nimport { Group, Cell } from 'vux'\n```\n\n#### i18n\n\n

    \n请使用正确的 yml 格式。冒号和值之间是有一个空格的，错误的格式将无法生效。\n

    \n\n``` yml\non-show:\n en: emits when popup shows\n zh-CN: 弹窗显示时触发\n```\n\n\n1. 如果你只是调用中文语言的vux组件，那么你不需要做任何配置。\n\n2. 如果你需要调用英文语言的vux组件，需要配置语言\n\n ``` js\n {\n name: 'i18n',\n vuxStaticReplace: true,\n vuxLocale: 'en'\n }\n ```\n3. 如果你想和demo站点一样可以写`i18n`block，并且需要动态切换语言，那么需要配置插件抽取i18n的内容，并设置非静态替换\n\n ``` js\n {\n name: 'i18n',\n vuxStaticReplace: false,\n staticReplace: false,\n extractToFiles: 'src/locales/components.yml',\n localeList: ['en', 'zh-CN']\n }\n ```\n\n然后你就可以引用`vuex-i18n`插件实现多语言切换了。\n\n参考 [main.js](https://github.com/airyland/vux/blob/254574ef30a8c4d341feb7d2ff8245792657bda2/src/main.js#L84-L96) 及 [vuex-i18n 文档](https://www.npmjs.com/package/vuex-i18n)(仅当参考，你也可以使用其他i18n插件)。\n\n#### less-theme\n\n

    \n注意，path所在文件必须是简单的less变量对，不能import其他文件或者引入变量。\n

    \n\n> less 变量设置和替换\n\n> 适用于全局变量替换, 方便切换主题\n> 这意味着，你不再需要为每个页面引入全局的less文件了，你只需要设置lang为less就可以直接使用变量了\n\n```\n\n```\n\n插件配置：\n\n``` js\n{\n name: 'less-theme',\n path: 'src/styles/theme.less'\n}\n```\n\n#### duplicate-style\n\n> css 重复代码清除\n\n

    \n 建议使用vux组件的用户使用，因为vux直接引用less，最终构建的css文件确实会有冗余。\n

    \n\n\n> 在webpack 构建完成后对生成的css文件使用cssnano进行重复样式清除。建议只在production环境下开启，因为dev环境没有必要。\n\n``` js\n{\n name: 'duplicate-style',\n events: {\n done: function () {\n console.log('done!')\n }\n }\n}\n```\n\n#### html-build-callback\n\n>html文件处理事件回调\n\n> 适用于在写入html(一般为index.html)文件前进行内容修改，比如替换特定内容\n> 比如写入js配置变量，改变cdn域名，将manifest文件直接写入html以减少请求等\n\n``` js\n{\n name: 'html-build-callback',\n events: {\n 'after-html-processing': function (data, cb) {\n data.html += 'magic footer'\n cb(null, data)\n }\n }\n}\n```\n\n可用事件请参考 [html-webpack-plugin](https://www.npmjs.com/package/html-webpack-plugin)\n\n\n#### build-done-callback\n\n> 构建完成事件回调\n> 本质上是在webpack plugin的 done 事件后触发\n\n``` js\n{\n name: 'build-done-callback',\n fn: function () {\n console.log('done!')\n }\n}\n```\n\n### 使用案例\n\n\n#### 统一引入less(sass)变量\n\n如果你翻看`vue-loader`的issue, 就会发现不少同学在说，为什么sass, less 变量不能全局使用，需要在每个.vue组件里引入，这个很重复，有没有办法解决。目前除了在webpack里定义路径`alias`外没有其他方法。但是有了`vux-loader`，你可以用`style-parser`在每个`.vue`文件的style前面加上变量的引入了，只要一句代码。\n\n```\n{\n name: 'style-parser',\n fn: function (source) {\n return \"@import '../styles/variable.less'\\n\" + source // 你可以根据this.resourcePath 来确定是否要引入以及引入的相对路径\n }\n}\n```\n\n#### 减少重复代码\n\n`vux`的组件有几十个，同样demo也有几十个，因为webpack并不支持require变量，那么在main里中实现每个组件异步加载都需要这样：\n\n``` js\nconst routes = [\n {\n path: '/component/actionsheet',\n component: function (resolve) {\n require(['./demos/Actionsheet'], resove)\n }\n }\n]\n```\n作为懒人，写几十次这样的代码是一件比较烦人的事，作为热爱地球的人，这样也很不环保，但是有了`vux-loader`, 我们可以这样：\n\n``` js\nconst routes = []\n```\n\n然后在`js-parser`里获取列表数组直接替换， 并且可以调用webpack的`this.addDependency`添加依赖实现修改列表时自动`reload`。从此添加删除组件只要加上或者删除名字就可以了，真是懒机智。\n\n``` js\n {\n name: 'js-parser',\n test: /main\\.js/,\n fn: function (source) {\n this.addDependency(demoPath)\n let list = fs.readFileSync(demoPath, 'utf-8')\n list = JSON.parse(list)\n let str = []\n list.forEach(one => {\n str.push(`{\npath: '/component/${toDash(one)}',\ncomponent: function (resolve) {\nrequire(['./demos/${one}.vue'], resolve)\n}\n}`)\n })\n\n str = `[${str.join(',\\n')}]`\n source = source.replace('const routes = []', 'const routes = ' + str)\n return source\n }\n}\n```\n\n#### 实现import语法转换\n\nvux是没有main入口文件的，因此需要把import语句转换成单个组件引入。但是因为对语法树分析比较烦，能用正则替换的当然就是用正则替换，简单粗暴实用。具体可以看源码。\n\n#### 开源组件多语言支持\n\n如果以js方式分发，一般默认一个语言，用户可以加上另外的语言包，但是代码里必不可少存在相应的转换函数，对于只需要单语言的人来是个浪费和繁琐。要么所有一起打包，这个也极浪费。要么一个一个打包，这样又失去了动态多语言支持。\n\n于是`vux`在`vux-loader`的支持下实现了`使用时构建`，无论是静态输出和动态支持。\n\n### Bug 反馈 && 功能建议\n\n请到[https://github.com/airyland/vux-loader/issues](https://github.com/airyland/vux-loader/issues)\n\n### Todo\n\n- [ ] 支持各个插件的异步返回形式\n- [ ] 在插件中提供webpack的 this 参数\n" }, { "path": "docs/en/wechat/other.md", "content": "---\ntitle: 其他问题\n---\n\n## 如何实现`weui.io`或者星巴克页面的设置顶部bar和页面下拉背景色\n\n微信对于部分合作方开放了`jssdk`的`setBounceBackground`及`setNavigationBarColor`权限，目测暂无申请入口。" }, { "path": "docs/en/wechat/vue-wechat-jssdk.md", "content": "---\ntitle: Vue 应用中使用微信 jssdk\n---\n\n# Vue 应用中使用微信 jssdk\n\n::: warning\n分享接口只有认证公众号才能使用，域名必须备案且在微信后台设置。\n\n先确认已经满足使用`jssdk`的要求再进行开发。\n:::\n\n`WechatPlugin` 插件提供了`commonJS`的引入方式，因此你不需要在 `index.html` 引入文件。\n\n## 版本要求\n\n`WechatPlugin`在`vux@^2.1.0-rc.19`开始支持\n\n## 引入\n\n在 `main.js` 中全局引入：\n\n``` js\nimport { WechatPlugin } from 'vux'\nVue.use(WechatPlugin)\n\nconsole.log(Vue.wechat) // 可以直接访问 wx 对象。\n```\n\n## 组件外使用\n\n考虑到你需要在引入插件后调用`config`方法进行配置，你可以通过 `Vue.wechat` 在组件外部访问`wx`对象。 \n\n`jssdk`需要请求签名配置接口，你可以直接使用 VUX 基于 `Axios` 封装的 `AjaxPlugin`。\n\n``` js\nimport { WechatPlugin, AjaxPlugin } from 'vux'\nVue.use(WechatPlugin)\nVue.use(AjaxPlugin)\n\nVue.http.get('/api', ({data}) => {\n Vue.wechat.config(data.data)\n})\n```\n\n## 组件中使用\n\n那么之后任何组件中都可以通过 `this.$wechat` 访问到 `wx` 对象。\n\n``` js\nexport default {\n created () {\n this.$wechat.onMenuShareTimeline({\n title: 'hello VUX'\n })\n }\n}\n```" }, { "path": "docs/en/wechat/wechat-document-title.md", "content": "---\ntitle: 微信 Vue 单页面应用设置标题\n---\n\n# 微信 Vue 单页面应用设置标题\n\n在微信`iOS` `webview`更新到`WKWebView`之前我们可以通过加载一个 `iframe` 来实现单页面应用`title`更改。但是17年初更新到 `WKWebView` 后该方法也失效。\n\n目前该问题已经解决，在微信 iOS 客户端 `6.3.5` 之后的版本都可以通过 `document.title` 设置标题了。" }, { "path": "docs/examples/loading.html", "content": "\n\n\n \n \n scripts\n \n \n \n\n\n
    \n
    \n
    \n \n

    I'm Loading

    \n
    \n
    \n\n\n" }, { "path": "docs/examples/umd_component_include_all.html", "content": "\n\n\n \n \n scripts\n \n \n\n\n
    \n \n \n \n
    \n\n \n\n\n \n\n\n" }, { "path": "docs/examples/umd_component_include_single.html", "content": "\n\n\n \n \n scripts\n \n \n \n \n\n\n
    \n \n \n \n
    \n\n \n \n\n \n\n\n" }, { "path": "docs/examples/umd_plugin_include_all.html", "content": "\n\n\n \n \n scripts\n \n \n \n\n\n
    \n
    \n\n \n\n \n\n\n" }, { "path": "docs/examples/umd_plugin_include_single.html", "content": "\n\n\n \n \n scripts\n \n \n \n\n\n
    \n
    \n\n \n\n \n\n\n" }, { "path": "docs/i18n.js", "content": "const list = {\n Intro: {\n 'zh-CN': '介绍'\n },\n Install: {\n 'zh-CN': '安装'\n },\n Examples: {\n 'zh-CN': '栗子' // 故意的，不需要改\n },\n Changelog: {\n 'zh-CN': '版本更新'\n },\n faq: {\n 'zh-CN': '常见问题'\n },\n title: {\n 'en': 'VUX - Vue.js Mobile UI Component Framework',\n 'zh-CN': 'VUX - 基于 WeUI 和 Vue 的移动端组件库'\n },\n Directives: {\n 'zh-CN': '指令 Directives'\n },\n Guide: {\n 'zh-CN': '教程'\n },\n Css: {\n 'zh-CN': '样式 CSS'\n },\n '1px': {\n 'zh-CN': '1px 解决方案'\n },\n 'css-close-icon': {\n 'zh-CN': 'css 关闭图标'\n },\n Components: {\n 'zh-CN': '组件'\n },\n Component: {\n 'zh-CN': '组件'\n },\n 'donot need import': {\n 'en': 'You don\\'t need to import this component.',\n 'zh-CN': '该组件可以直接使用，不需要引入。'\n },\n Releases: {\n 'zh-CN': '发布日志'\n },\n Toolkit: {\n 'zh-CN': '工具函数 Tools'\n },\n Lab: {\n 'zh-CN': '实验室'\n },\n Donate: {\n 'zh-CN': '捐赠、赞助'\n },\n 'return FAQ': {\n 'zh-CN': '返回 【常见问题】'\n },\n 'Realtime developers': {\n 'zh-CN': '实时 VUX 开发者'\n },\n 'Developers in 24h': {\n 'zh-CN': '24小时内 VUX 开发者'\n },\n 'globally register': {\n 'en': 'you can also register globally',\n 'zh-CN': '在入口文件全局引入'\n },\n 'default slot': {\n en: 'default',\n 'zh-CN': '默认插槽'\n },\n 'required version': {\n 'zh-CN': '版本要求'\n },\n 'qr': {\n 'en': 'view demos on mobile',\n 'zh-CN': '二维码'\n },\n 'component source code': {\n 'zh-CN': '组件源码'\n },\n 'demo url': {\n 'zh-CN': 'demo 原始链接'\n },\n 'edit document': {\n 'zh-CN': '编辑文档'\n },\n 'demo source code': {\n 'zh-CN': 'demo 源码'\n },\n 'example': {\n 'zh-CN': '使用例子'\n },\n 'Props': {\n 'zh-CN': '属性'\n },\n 'Events': {\n 'zh-CN': '事件'\n },\n 'Slots': {\n 'zh-CN': '插槽'\n },\n 'Functions': {\n 'zh-CN': '方法'\n },\n 'Prop': {\n 'zh-CN': '属性'\n },\n 'Event': {\n 'zh-CN': '事件'\n },\n 'Slot': {\n 'zh-CN': '插槽'\n },\n 'Function': {\n 'zh-CN': '方法'\n },\n 'Related issues': {\n 'zh-CN': '相关 issue'\n },\n 'Contributors': {\n 'zh-CN': '贡献者'\n },\n 'Referrences': {\n 'zh-CN': '参考资料'\n },\n 'Tips': {\n 'zh-CN': '重要提示及已知问题'\n },\n 'component tutorial': {\n 'zh-CN': '组件使用教程'\n },\n 'name': {\n 'zh-CN': '名字'\n },\n 'type': {\n 'zh-CN': '类型'\n },\n 'params': {\n 'zh-CN': '参数'\n },\n 'required vesion': {\n 'zh-CN': '版本要求'\n },\n 'description': {\n 'zh-CN': '说明'\n },\n 'default value': {\n en: 'default',\n 'zh-CN': '默认值'\n },\n 'Total commits quantity:': {\n 'zh-CN': '该组件(包含文档)迭代次数'\n },\n 'Total contributors quantity:': {\n 'zh-CN': '贡献人数'\n },\n 'contribute': {\n 'zh-CN': '贡献次数'\n },\n 'date format': {\n en: 'date-format',\n 'zh-CN': '日期格式化'\n },\n 'number 格式化工具': {\n en: 'number'\n },\n 'url 参数解析': {\n en: 'url querystring'\n },\n 'string 处理工具': {\n en: 'string'\n },\n 'Search documents': {\n 'zh-CN': '搜索文档'\n },\n 'No search results': {\n 'zh-CN': 'Sorry，无搜索结果'\n },\n 'click to copy': {\n 'zh-CN': '点击复制'\n },\n 'copy done!': {\n 'zh-CN': '复制成功'\n },\n 'copy fail!': {\n 'zh-CN': '复制失败'\n },\n 'Variables': {\n 'zh-CN': '样式变量'\n },\n 'is inherited': {\n 'zh-CN': '是否继承自另一变量'\n },\n 'inherited name': {\n 'zh-CN': '继承自变量'\n },\n 'Online developers': {\n 'zh-CN': '在线 VUX 开发者'\n },\n 'priceCurrency': {\n en: 'USD',\n 'zh-CN': 'CNY'\n },\n 'Local Registration': {\n 'zh-CN': '局部注册'\n },\n 'Global Registration': {\n 'zh-CN': '全局注册'\n }\n}\n\nmodule.exports = function (key, lang = 'en') {\n if (!list[key]) {\n return key\n }\n if (!list[key][lang]) {\n return key\n }\n return list[key][lang]\n}\n" }, { "path": "docs/index.html", "content": "\n \n \n \n \n VUX - Vue 移动端 UI 组件库\n \n \n \n \n \n
    \n
    \n
    \n
    \n \n \n \n

    VUX

    \n

    \n 一个凑合的 Vue.js 移动端 UI 组件库\n

    \n
    \n \n \n
    \n

    \n \n \n \n

    \n
    \n
    \n
    \n

    体验不极致

    \n

    是的，VUX 还有很多问题，远远不完美，但一直在解决。

    如果你在使用并且觉得有一些问题，不妨开个 issue 反馈一下，我们乐意解决详细描述的问题。

    \n
    \n
    \n

    维护靠个人

    \n

    是的，没有团队维护。国内大多数开发者都选择了有知名前端团队维护的组件库。

    当然你也可以试试选择 VUX，毕竟维护两年时间，star 12k，一定程度上也说明并不比大公司团队开源的差，不是么？

    \n
    \n
    \n

    开始有了赞助支持

    \n

    是的，我们开始有了赞助来支持开发迭代。

    如果 VUX 帮你节省了大量时间的话，欢迎捐赠以鼓励支持作者。

    \n
    \n
    \n
    \n MIT Licensed | Copyright © 2016-present Airyland | website based on vuepress by Evan You\n
    \n
    \n
    \n
    \n\n \n \n\n" }, { "path": "docs/package.json", "content": "{\n \"scripts\": {\n \"gen\": \"ream generate\",\n \"start\": \"ream start\",\n \"build\": \"ream build\",\n \"dev\": \"ream dev\"\n },\n \"dependencies\": {\n \"axios\": \"^0.16.1\",\n \"babel-plugin-component\": \"^1.1.0\",\n \"element-ui\": \"^2.3.4\",\n \"github-markdown-css\": \"^2.6.0\",\n \"highlight.js\": \"^9.11.0\",\n \"js-yaml\": \"^3.11.0\",\n \"less\": \"^2.7.2\",\n \"less-loader\": \"^4.0.3\",\n \"markdown-it-container\": \"^2.0.0\",\n \"markdown-it-emoji\": \"^1.3.0\",\n \"markdown-it-task-lists\": \"^2.0.0\",\n \"nprogress\": \"^0.2.0\",\n \"v-markdown-loader\": \"0.6.3\",\n \"vue\": \"2.5.16\",\n \"vue-clipboard2\": \"^0.1.0\",\n \"vue-lazyload\": \"^1.2.3\",\n \"vue-meta\": \"^1.0.4\",\n \"vue-template-compiler\": \"2.5.16\",\n \"yaml-loader\": \"^0.4.0\"\n },\n \"devDependencies\": {\n \"algoliasearch\": \"^3.26.0\",\n \"markdown-it\": \"^8.3.1\",\n \"ream\": \"^1.0.0-rc.6\",\n \"shelljs\": \"^0.8.1\",\n \"vue-server-renderer\": \"^2.5.16\",\n \"yargs\": \"^11.0.0\"\n }\n}\n" }, { "path": "docs/ream.config.js", "content": "var hljs = require('highlight.js');\nvar taskLists = require('markdown-it-task-lists');\nvar customContainer = require('markdown-it-container')\nvar emoji = require('markdown-it-emoji');\nvar markdown = require('markdown-it')({\n titleSuffix: ' | VUX - Vue 移动端 UI 组件库',\n ignoreSuffixChar: '|',\n html: true,\n breaks: true,\n typographer: true,\n highlight: function (str, lang) {\n if (lang && hljs.getLanguage(lang)) {\n try {\n return '
    ' +\n               hljs.highlight(lang, str, true).value +\n               '
    ';\n } catch (__) {}\n }\n return '
    ' + markdown.utils.escapeHtml(str) + '
    ';\n }\n})\n// .use(taskLists)\n.use(customContainer, 'tip', {\n validate: function(params) {\n return params.trim() === 'tip'\n }\n})\n.use(customContainer, 'warning', {\n validate: function(params) {\n return params.trim() === 'warning'\n }\n})\n.use(customContainer, 'danger', {\n validate: function(params) {\n return params.trim() === 'danger'\n }\n})\n.use(emoji)\n\nmodule.exports = {\n entry: 'src/_index.js',\n generate: {\n routes: require('./src/routes.json')\n },\n extendWebpack(config) {\n config.module\n .rule('markdown')\n .test(/\\.md$/)\n .use('v-markdown')\n .loader('v-markdown-loader')\n .options(markdown)\n .end()\n .end()\n }\n}\n" }, { "path": "docs/server.js", "content": "const options = require('./ream.config.js')\nconst ream = require('ream')\nconst app = ream(options)\nconst http = require('http')\n\napp.prepare()\n .then(() => {\n const server = http.createServer((req, res) => {\n const handle = app.getRequestHandler()\n handle(req, res)\n })\n server.listen(3000)\n })\n\napp.on('ready', () => {\n console.log('Ready!')\n})\n" }, { "path": "docs/src/App.vue", "content": "\r\n\r\n\r\n" }, { "path": "docs/src/algolia-search.vue", "content": "\n\n\n\n" }, { "path": "docs/src/app.css", "content": "@import '~highlight.js/styles/atom-one-light.css';\n\nbody, ul, li, p {\n margin: 0;\n padding: 0;\n}\n\nbody {\n height: 100vh;\n overflow: hidden;\n min-width: 1200px;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n\n.contributors-tip {\n font-size: 12px;\n color: #666;\n}\n.guide-link {\n font-size: 18px;\n padding: 5px 0;\n}\n\n.markdown-body h1.vux-component-name {\n font-family: Josefin Sans,sans-serif;\n font-size: 2.5em;\n font-weight: 600;\n color: #d95353;\n border-bottom: none;\n padding-bottom: 0;\n margin-top: 0;\n}\n\n.component-description {\n width: calc(100vw - 375px - 340px - 60px);\n font-size: 14px;\n color: #635f5f;\n}\n\n.title-box {\n margin-bottom: 15px;\n padding-top: 10px;\n}\n\n.header-nav {\n padding-left: 15px;\n padding-bottom: 3px;\n border-bottom: 1px solid #ececec;\n}\n\ntr.slot-disabled {\n color: #999;\n}\n\n.type, .change {\n height: 18px;\n font-size: 12px;\n width: 60px;\n color: #fff;\n border-radius: 2px;\n text-align: center;\n display: inline-block;\n padding: 0 3px;\n}\n\n.type {\n color: #666;\n background-color: #ececec;\n}\n\n.change {\n height: 14px;\n width: 72px;\n line-height: 14px;\n}\n.type-object {\n background-color: #33ab70;\n}\n.type-string {\n background-color: #27394c;\n}\n.type-boolean {\n background-color: #d95353;\n}\n.type-function {\n background-color: #f4a358;\n}\n.type-number {\n background-color: #288af0;\n}\n.type-array {\n background-color: #eb1ac1;\n}\n\n\n.change-deprecated {\n background-color: #d95353;\n}\n.change-todo {\n background-color: #27394c;\n}\n.change-enhance, .change-fix {\n background-color: #288af0;\n}\n.change-feature {\n background-color: #288af0;\n}\n.change-change {\n background-color: #e96900;\n}\n\n.markdown-body .highlight pre, .markdown-body pre {\n max-width: 1000px;\n}\n\n.markdown-body .source-code-dialog .highlight pre {\n max-width: none;\n}\n\n.github-icon {\n display: inline-block;\n}\n\n.github-star {\n display: inline-block;\n padding-top: 10px;\n}\n\n.chapter {\n margin-bottom: 15px;\n padding-left: 15px;\n padding-right: 15px;\n}\n\n.chapter-title {\n padding-bottom: 5px;\n font-size: 16px;\n color: #333;\n}\n\n.chapter-page {\n padding-left: 2px;\n}\n\n.chapter-page-item {\n list-style: none;\n}\n\n.chapter-page-item a {\n font-size: 14px;\n color: #666;\n height: 30px;\n line-height: 30px;\n text-decoration: none;\n}\n\n.chapter-page-item a.router-link-exact-active, .chapter-page-item a.router-link-active, a.router-link-active[data-current-category=\"faq\"][href=\"/zh-CN/faq/\"]\n {\n color: green;\n font-weight: bold;\n border-bottom: 1px solid green;\n}\n\n@font-face {\n font-family: Josefin Sans;\n font-style: normal;\n font-weight: 300;\n src: local(\"Josefin Sans Light\"),local(\"JosefinSans-Light\"),url(https://fonts-gstatic.proxy.ustclug.org/s/josefinsans/v9/C6HYlRF50SGJq1XyXj04z7sKtFnhOiVZh9MDlvO1Vys.woff2) format(\"woff2\");\n}\n\n@font-face {\n font-family: Josefin Sans;\n font-style: normal;\n font-weight: 300;\n src: local(\"Josefin Sans Light\"),local(\"JosefinSans-Light\"),url(https://fonts-gstatic.proxy.ustclug.org/s/josefinsans/v9/C6HYlRF50SGJq1XyXj04z0ZRWJQ0UjzR2Uv6RollX_g.woff2) format(\"woff2\");\n}\n\n.big-title {\n font-size: 3em!important;\n color: #42b983\n}\n\n.big-title,.product-title {\n font-family: Josefin Sans,sans-serif\n}\n\n.product-title {\n border-top: 1px solid #333;\n padding-top: 15px;\n padding-bottom: 10px;\n font-size: 14px;\n color: #666;\n text-align: center\n}\n\n.analytics {\n width: 120px;\n margin: 0 auto;\n z-index: 999;\n border: 1px solid #666;\n padding: 5px 1px;\n color: #666;\n margin-top: 25px;\n margin-bottom: 50px;\n}\n\n@media only screen and (min-height:560px) {\n\t.analytics {\n position: absolute;\n bottom: 10px;\n margin-bottom: 0;\n left: 13px;\n }\n}\n\n.vux-version {\n text-align: center;\n width: 50px;\n color: #ccc;\n text-shadow: 0 0 6px rgba(0,120,255,.9)\n}\n\n.vux-title {\n font-weight: 400;\n font-family: Josefin Sans,sans-serif;\n text-align: center;\n font-size: 40px;\n margin: 20px 0\n}\n\n.vux-github {\n color: #fff\n}\n\n.vux-sub-title {\n font-size: 14px;\n font-family: Josefin Sans,sans-serif\n}\n\n.vux-time-ago {\n padding-top: 10px;\n}\n\n.vux-time-ago > span {\n color: #ececec;\n font-size: 1.3em;\n text-shadow: 0 0 6px rgba(0,120,255,.9)\n}\n\n.vux-box,.vux-center {\n text-align: center\n}\n\n.app {\n display: flex;\n}\n.vux-box {\n width: 150px;\n height: 100vh;\n overflow: hidden;\n color: #ccc;\n background-color: #171717;\n}\n.sidebar-inner {\n height: 100vh;\n padding: 0 15px;\n position: relative;\n}\n.summary {\n height: 100vh;\n width: 205px;\n overflow: hidden;\n border-right: 1px solid #E6E6E6\n}\n.summary-inner {\n padding-top: 15px;\n height: 100vh;\n width: 205px;\n box-sizing: border-box;\n overflow: scroll;\n}\n.survey {\n color: #ccc;\n font-size: 12px;\n text-decoration: none;\n}\n.content {\n height: 100vh;\n overflow: scroll;\n padding-top: 60px;\n flex: 1;\n}\n.markdown-body {\n overflow: scroll;\n padding-bottom: 50px;\n padding-right: 15px;\n}\n.header-nav {\n position: fixed;\n top: 0;\n background-color: #fff;\n z-index: 888;\n width: 100%;\n}\n@import '~github-markdown-css/github-markdown.css';\n\n.content .markdown-body {\n padding-left: 25px;\n color: #555;\n}\n\n.markdown-body code {\n padding: 0;\n padding-top: 0.2em;\n padding-bottom: 0.2em;\n margin: 0;\n font-size: 85%;\n color: #687168;\n background-color: #def5df;\n border-radius: 3px;\n}\n.markdown-body code::before,\n.markdown-body code::after {\n letter-spacing: -0.2em;\n content: \"\\00a0\";\n}\n.markdown-body pre {\n word-wrap: normal;\n}\n.markdown-body pre > code {\n padding: 0;\n margin: 0;\n font-size: 100%;\n word-break: normal;\n white-space: pre;\n background: transparent;\n border: 0;\n}\n.markdown-body .highlight pre,\n.markdown-body pre {\n padding: 16px;\n overflow: auto;\n font-size: 85%;\n line-height: 1.45;\n background-color: #f8f8f8;\n border-radius: 3px;\n}\n.markdown-body pre code {\n display: inline;\n max-width: auto;\n padding: 0;\n margin: 0;\n overflow: visible;\n line-height: inherit;\n word-wrap: normal;\n background-color: transparent;\n border: 0;\n}\n.markdown-body pre code::before,\n.markdown-body pre code::after {\n content: normal;\n}\n\n\n.markdown-body a {\n color: #22ab28;\n text-decoration: none;\n}\n\n.markdown-body a:hover, .summary a:hover {\n color: #148a1a;\n}\n\n/**docute**/\ndiv.warning, div.tip, div.danger,p.warning {\n padding: 12px 24px 12px 20px;\n margin: 2em 0;\n border-left: 4px solid;\n position: relative;\n border-bottom-right-radius: 2px;\n border-top-right-radius: 2px;\n &:before {\n content: \"!\";\n position: absolute;\n top: 14px;\n left: -12px;\n color: #fff;\n width: 20px;\n height: 20px;\n border-radius: 100%;\n text-align: center;\n line-height: 20px;\n font-weight: bold;\n font-family: 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;\n }\n &.no-bg {\n background-color: #f8f8f8;\n }\n}\n\ndiv.warning, p.warning {\n border-left-color: #f7d24c;\n background-color: #fefbed;\n &:before {\n background-color: #f7d24c;\n }\n}\n\ndiv.danger, p.danger {\n border-left-color: #f66;\n background-color: rgba(255, 102, 102, 0.06);\n &:before {\n background-color: #f66;\n }\n}\n\ndiv.tip {\n border-left-color: #3c763d;\n background-color: rgba(241, 249, 241, 0.83);\n &:before {\n background-color: #3c763d;\n }\n}\n.markdown-body .tip p {\n margin-bottom: 0;\n}\n.markdown-body .warning p {\n margin-bottom: 0;\n}\n.markdown-body .danger p {\n margin-bottom: 0;\n}\n\n/**\n* docute\n*/\n.header-nav {\n display: flex;\n align-items: center\n}\n\n.header-nav.is-mobile .nav-list {\n height: auto;\n line-height: auto\n}\n\n.header-nav.is-mobile .nav-list .nav-item {\n float: none\n}\n\n.header-nav.is-mobile .nav-list .nav-item>a,.header-nav.is-mobile .nav-list .nav-item>div {\n border-bottom: none;\n height: auto;\n line-height: 30px\n}\n\n\n.header-nav.is-mobile .nav-list .dropdown-list {\n background-color: transparent\n}\n\n.header-nav.is-mobile .nav-list .nav-item-dropdown .dropdown-list {\n position: static;\n display: block;\n transform: none;\n border: none;\n padding: 0\n}\n\n.nav-list {\n list-style: none;\n padding-left: 0;\n margin: 0;\n line-height: 35px;\n height: 47px\n}\n\n.nav-list .sep {\n height: 1px;\n background-color: #f0f0f0;\n display: block;\n margin: 8px 0\n}\n\n.nav-list .label {\n display: block;\n margin-top: 5px;\n font-size: 12px\n}\n\n.nav-list .nav-item {\n float: left;\n margin-right: 20px\n}\n\n.nav-list .nav-item>a,.nav-list .nav-item>div {\n color: #666;\n height: 47px;\n line-height: 47px;\n font-size: 14px;\n border-bottom: 3px solid transparent;\n display: block;\n text-decoration: none;\n}\n\n.nav-list .nav-item>a.link-active,.nav-list .nav-item>div.link-active {\n border-bottom-color: #42b983;\n color: #333\n}\n\n.nav-list .nav-item>a:hover,.nav-list .nav-item>div:hover {\n color: #333\n}\n\n.nav-list .nav-item>a:hover:not(.router-link-active),.nav-list .nav-item>div:hover:not(.router-link-active) {\n border-bottom-color: #e2e2e2\n}\n\n.nav-list .search-item {\n float: left;\n position: relative;\n top: 3px;\n}\n\n.nav-list .nav-item .arrow {\n display: inline-block;\n vertical-align: middle;\n margin-top: -1px;\n margin-left: 6px;\n width: 0;\n height: 0;\n border-left: 4px solid transparent;\n border-right: 4px solid transparent;\n border-top: 5px solid #ccc;\n}\n\n.nav-list .nav-item-dropdown {\n position: relative;\n}\n\n.nav-list .nav-item-dropdown .dropdown-list {\n position: absolute;\n z-index: 9999;\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n display: none;\n background-color: #fff;\n margin: 0;\n list-style-type: none;\n border: 1px solid #e2e2e2;\n border-radius: 3px;\n white-space: nowrap;\n padding: 10px 0\n}\n\n.nav-list .nav-item-dropdown .dropdown-list .dropdown-item {\n font-size: 13px;\n line-height: 28px\n}\n\n.nav-list .nav-item-dropdown .dropdown-list .dropdown-item .router-link-active,.nav-list .nav-item-dropdown .dropdown-list .dropdown-item .router-link:hover {\n color: #42b983\n}\n\n.nav-list .nav-item-dropdown:hover .dropdown-list {\n display: block\n}\n\n.component-list-item > a{\n font-size: 14px;\n}\n\n.code-box {\n font-size: 16px;\n}\n\n.el-icon-info {\n padding-left: 3px;\n}\n\n.el-card {\n box-shadow: none!important;\n border-radius: 0!important;\n}\n\n.tip-answer-box {\n padding-top: 15px;\n}\n\n.prop-name {\n color: green;\n font-weight: 400;\n white-space: nowrap;\n font-family: Menlo,'Menlo Regular',Consolas,monospace;\n}\n\n.chapter-page-item {\n font-weight: 300;\n}\n\n.contributor-item {\n padding-left: 10px;\n}\n\n.el-dialog__wrapper.sourcec-code-dialog {\n right: 410px;\n}\n\n.el-dialog__wrapper.sourcec-code-dialog .el-dialog {\n margin-right: 0!important;\n}\n\n.component-tip-tag {\n vertical-align: middle;\n}\n\n.component-tip-question {\n font-size: 18px;\n font-weight: 500;\n padding-left: 10px;\n vertical-align: middle;\n}\n\n.markdown-body table {\n display: table!important;\n width: 100%;\n}\n\n.markdown-body h1, .markdown-body h2 {\n font-family: Menlo,'Menlo Regular',Consolas,monospace;\n font-weight: 300;\n}\n\n.markdown-body h3 {\n font-family: Menlo,'Menlo Regular',Consolas,monospace;\n font-size: 1.4em;\n font-weight: 500;\n}\n\n.markdown-body table th, .markdown-body table td {\n border: none;\n}\n\n.markdown-body table tr {\n border-top: 1px solid #ddd;\n}\n\n.markdown-body table thead tr {\n background-color: #f0f0f0;\n}\n\n.markdown-body table {\n border-bottom: 1px solid #ddd;\n}\n\n.algolia-search .algolia-highlight {\n font-weight: 500;\n font-style: normal;\n}\n\n.el-input.is-active .el-input__inner, .el-input__inner:focus {\n border-color: #22ab28;\n}\n\n.markdown-body h2.vux-component-name-sub-item {\n font-family: \"Helvetica Neue\",\"Open Sans\",Arial,sans-serif;\n font-size: 2.3em;\n color: #d95353;\n font-weight: 300;\n}\n\n.prop-name > span {\n cursor: pointer;\n}\n\n.prop-name > span:hover {\n background-color: green;\n color: #fff;\n}\n\n.import-code-box {\n position: relative;\n}\n\n.markdown-body .highlight .import-code-box pre, .markdown-body .import-code-box pre {\n max-width: none;\n}\n\n.import-code-box:hover .el-tooltip {\n color: #666;\n}\n\n.import-code-box .el-tooltip {\n position: absolute;\n right: 15px;\n top: 10px;\n color: #ccc;\n cursor: pointer;\n}\n\n.demos {\n display: flex;\n border: 1px solid #ffdd57;\n border-radius: 3px;\n border-top-left-radius: 0px;\n margin-bottom: 25px;\n max-height: 600px;\n overflow: hidden;\n min-width: 750px;\n}\n\n.demo-header {\n margin-top: 10px;\n display: flex;\n}\n\n.demo-title {\n background: #ffdd57;\n border-radius: 3px 3px 0 0;\n display: inline-block;\n font-size: 8px;\n font-weight: 700;\n padding: 4px 8px;\n text-transform: uppercase;\n vertical-align: top;\n}\n\n.demos > div {\n flex: 1;\n overflow: hidden;\n}\n\n.demo-code-box {\n position: relative;\n border-left: 1px solid #ffdd57;\n}\n\n.demo-code-masker {\n cursor: pointer;\n position: absolute;\n top: 0;\n bottom: -10px;\n left: 0;\n right: 0;\n background-color: hsla(0, 0%, 100%, .8);\n border: none;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.demo-code-masker > div {\n color: #7a7a7a;\n cursor: pointer;\n font-weight: 600;\n font-size: 12px;\n text-align: center;\n}\n\n.demo-iframe-box {\n display: flex;\n justify-content: center;\n position: relative;\n}\n\n.demo-code-masker:hover {\n background-color: rgba(255, 221, 87, .8);\n}\n\n.demo-code-box pre {\n margin-bottom: 0;\n}\n\n.demo-path {\n color: #999;\n}\n\n.demo-qr {\n opacity: 0.6;\n display: none;\n}\n\n.demo-code-masker:hover .demo-qr {\n opacity: 1;\n display: inline;\n}\n\n.hide-code {\n position: absolute;\n right: 15px;\n top: 5px;\n font-size: 14px;\n cursor: pointer;\n}\n\n.el-icon-arrow-left, .el-icon-arrow-right {\n font-weight: bold;\n}\n\na.anchor {\n display: block;\n position: relative;\n top: -50px;\n visibility: hidden;\n float: none!important;\n}\n\n.markdown-body .toc ul {\n list-style: none;\n margin-bottom: 0;\n padding-left: 1em;\n}\n\n.markdown-body .toc ul li ul {\n padding-left: 15px;\n}\n\n.components-with-toc {\n width: 80%;\n}\n\n.toc {\n position: fixed;\n right: 15px;\n top:50px;\n border-left: 1px solid #ececec;\n overflow: hidden;\n z-index: 2500;\n background-color: #fff;\n}\n\n.toc a {\n font-size: 12px;\n color: #888;\n}\n\n.component-header-v1 {\n min-height: 600px;\n}\n\n.el-tabs__item.is-active, .el-tabs__item:hover {\n color: green;\n}\n\n.el-tabs__active-bar {\n background-color: green;\n}\n\n.markdown-body table tr:nth-child(2n) {\n background-color: transparent;\n}\n\n.markdown-body table thead tr {\n height: 44px;\n background-color: #f7f7f7;\n}\n\n.best-companies {\n text-align: center;\n}\n\n.best-companies a {\n display: inline-block;\n}\n\n.best-companies img {\n height: 60px;\n margin: 0;\n}\n\n#x-sponsor {\n margin-top: 30px;\n border: 1px solid #444;\n color: #666;\n text-align: center;\n line-height: 60px;\n font-size: 12px;\n cursor: pointer;\n}\n\n.juejin {\n text-decoration: none;\n display: block;\n margin-bottom: 10px;\n position: fixed;\n top: 0;\n left: 150px;\n width: 190px;\n}\n\n.juejin img {\n width: 205px;\n}\n\n.juejin:hover .juejin-desc {\n color: #007fff;\n}\n\n.juejin-name {\n color: #007fff;\n}\n\n.juejin-url {\n color: #888;\n padding-left: 15px;\n font-size: 12px;\n}\n\n.juejin-desc {\n font-size: 12px;\n}\n\n.juejin:visited, .juejin:visited .juejin-desc {\n color: #666;\n}\n" }, { "path": "docs/src/component.vue", "content": "\n\n" }, { "path": "docs/src/index.js", "content": "import Vue from 'vue'\nimport Router from 'vue-router'\nimport App from './App.vue'\nimport Vuex from 'vuex'\nimport axios from 'axios'\nimport yaml from 'js-yaml'\nimport ElementUI from 'element-ui'\nimport 'element-ui/lib/theme-chalk/index.css'\nimport VueLazyload from 'vue-lazyload'\n\nimport VueClipboard from 'vue-clipboard2'\nVue.use(VueClipboard)\n\nVue.use(VueLazyload, {\n lazyComponent: true\n})\n\nVue.use(ElementUI)\nVue.use(Vuex)\n\nif (__BROWSER__) {\n require('./app.css')\n}\n\nconst createStore = () => new Vuex.Store({\n state: {\n contributors: []\n },\n mutations: {\n UPDATE_CONTRIBUTORS(state, payload) {\n state.contributors = payload\n }\n },\n actions: {\n async updateContributors({\n commit\n }, payload) {\n const data = await axios.get(`https://api.github.com/repos/airyland/vux/contributors?per_page=100`).then(res => {\n const list = res.data\n list.forEach((user, index) => {\n // my girl\n if (user.login === 'QiongrongJiang') {\n const saved = user\n list.splice(index, 1)\n list.splice(1, 0, saved)\n return\n }\n })\n return list\n })\n commit('UPDATE_CONTRIBUTORS', data)\n }\n }\n})\n\nconst list = [{\n chapter: 'about',\n pages: [{\n path: 'version',\n title: '版本发布说明'\n }]\n}]\n\n// Lazy-loading (i.e. code-split) your markdown file as vue component\nconst routes = []\n\nVue.use(Router)\n\nconst createRouter = () => {\n const router = new Router({\n mode: 'history',\n routes\n })\n\n if (__BROWSER__) {\n const nprogress = require('nprogress')\n require('nprogress/nprogress.css')\n\n if (process.env.NODE_ENV === 'production') {\n ;\n (function (i, s, o, g, r, a, m) {\n i['GoogleAnalyticsObject'] = r;\n i[r] = i[r] || function () {\n (i[r].q = i[r].q || []).push(arguments)\n }, i[r].l = 1 * new Date();\n a = s.createElement(o),\n m = s.getElementsByTagName(o)[0];\n a.async = 1;\n a.src = g;\n m.parentNode.insertBefore(a, m)\n })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');\n\n ga('create', 'UA-89859411-2', 'auto');\n ga('send', 'pageview');\n\n router.afterEach(function (to) {\n ga('set', 'page', to.fullPath);\n ga('send', 'pageview');\n })\n }\n\n router.beforeEach((from, to, next) => {\n nprogress.start()\n next()\n })\n router.afterEach(() => {\n nprogress.done()\n window.scrollTo(0, 0)\n })\n }\n\n return router\n}\n\nexport default {\n createRouter,\n createStore,\n App\n}\n" }, { "path": "docs/src/summary.js", "content": "module.exports = [{\n title: '入坑指南',\n pages: [{\n title: '关于 VUX',\n path: '/zh-CN/'\n }, {\n title: '使用 VUX 之前',\n path: '/zh-CN/about/before-using-vux.html'\n }, {\n title: '常见问题',\n path: '/zh-CN/faq/'\n }, {\n title: '使用案例',\n path: '/zh-CN/about/showcase.html'\n }, {\n title: '更新日志',\n path: '/zh-CN/changelog/changelog.html'\n }, {\n title: '贡献者们',\n path: '/zh-CN/about/contributors.html'\n }]\n}, {\n title: '安装使用',\n pages: [{\n title: '安装',\n path: '/zh-CN/install/npm.html'\n }, {\n title: '快速开始',\n path: '/zh-CN/install/biolerplate.html'\n }, {\n title: '手动安装配置',\n path: '/zh-CN/install/manual-usage.html'\n }, {\n title: '代码示例',\n path: '/zh-CN/install/usage.html'\n }]\n}, {\n title: '定制',\n pages: [{\n title: '国际化',\n path: '/zh-CN/development/i18n.html'\n }, {\n title: '主题',\n path: '/zh-CN/development/theme.html'\n }]\n}, {\n title: '开发',\n pages: [{\n title: '路由',\n path: '/zh-CN/development/router.html'\n }, {\n title: '在 Nuxt.js 中使用',\n path: '/zh-CN/development/vux-nuxt-ssr.html'\n }, {\n title: 'TypeScript 支持',\n path: '/zh-CN/development/typescript.html'\n }, {\n title: 'Ajax 请求',\n path: '/zh-CN/development/vue-ajax.html'\n }, {\n title: '点击延迟',\n path: '/zh-CN/development/remove-click-delay-fastclick.html'\n }, {\n title: '使用微信 jssdk',\n path: '/zh-CN/wechat/vue-wechat-jssdk.html'\n }, {\n title: '添加谷歌统计',\n path: '/zh-CN/development/vue-google-analytics.html'\n }, {\n title: '页面切换显示 Loading',\n path: '/zh-CN/development/vue-show-loading.html'\n }, {\n title: '异步加载组件',\n path: '/zh-CN/development/vue-webpack-code-splitting-async.html'\n }, {\n title: '区分测试环境和生产环境',\n path: '/zh-CN/development/vue-webpack-env.html'\n }, {\n title: '全局公共函数',\n path: '/zh-CN/development/vue-global-method.html'\n }, {\n title: 'autoprefix 配置',\n path: '/zh-CN/development/vue-loader-autoprefix.html'\n }, {\n title: '禁用 eslint',\n path: '/zh-CN/development/vue-loader-disable-eslint.html'\n }]\n},\n{\n title: 'vux-loader',\n pages: [{\n title: 'vux-loader 是什么？',\n path: '/zh-CN/vux-loader/about.html'\n }, {\n title: '安装使用',\n path: '/zh-CN/vux-loader/install.html'\n }, {\n title: '插件列表',\n path: '/zh-CN/vux-loader/plugins.html'\n }]\n},\n{\n title: '贡献',\n pages: [{\n title: '提交 issue',\n path: '/zh-CN/contribution/issue.html'\n }, {\n title: '提交 pr',\n path: '/zh-CN/contribution/pr.html'\n }, {\n title: '本地开发',\n path: '/zh-CN/contribution/vux-development.html'\n }, {\n title: '感谢',\n path: '/zh-CN/about/thanks.html'\n }]\n}]\n" }, { "path": "docs/src/tool-routes-en.json", "content": "[\n {\n \"title\": \"base64\",\n \"path\": \"/en/tools/base64.html\"\n },\n {\n \"title\": \"cookie\",\n \"path\": \"/en/tools/cookie.html\"\n },\n {\n \"title\": \"date format\",\n \"path\": \"/en/tools/date.html\"\n },\n {\n \"title\": \"debounce\",\n \"path\": \"/en/tools/debounce-throttle.html\"\n },\n {\n \"title\": \"md5\",\n \"path\": \"/en/tools/md5.html\"\n },\n {\n \"title\": \"number format\",\n \"path\": \"/en/tools/number.html\"\n },\n {\n \"title\": \"url querystring\",\n \"path\": \"/en/tools/querystring.html\"\n },\n {\n \"title\": \"trim string\",\n \"path\": \"/en/tools/string.html\"\n }\n]" }, { "path": "docs/src/tool-routes-zh-CN.json", "content": "[\n {\n \"title\": \"base64\",\n \"path\": \"/zh-CN/tools/base64.html\"\n },\n {\n \"title\": \"cookie\",\n \"path\": \"/zh-CN/tools/cookie.html\"\n },\n {\n \"title\": \"date format\",\n \"path\": \"/zh-CN/tools/date.html\"\n },\n {\n \"title\": \"debounce\",\n \"path\": \"/zh-CN/tools/debounce-throttle.html\"\n },\n {\n \"title\": \"md5\",\n \"path\": \"/zh-CN/tools/md5.html\"\n },\n {\n \"title\": \"number 格式化工具\",\n \"path\": \"/zh-CN/tools/number.html\"\n },\n {\n \"title\": \"url 参数解析\",\n \"path\": \"/zh-CN/tools/querystring.html\"\n },\n {\n \"title\": \"string 处理工具\",\n \"path\": \"/zh-CN/tools/string.html\"\n }\n]" }, { "path": "docs/watch.js", "content": "const watch = require('node-watch')\nconst path = require('path')\nconst dir = path.resolve(__dirname, '../src/')\n\ndelete require.cache[require.resolve('./compile.js')]\nrequire(require.resolve('./compile.js'))\n\nwatch(dir, { recursive: true }, function (filename) {\n if (/\\.yml|\\.md/.test(filename) && !/locales/.test(filename)) {\n try {\n delete require.cache[require.resolve('../build/build-docs.js')]\n require('../build/build-docs.js')\n delete require.cache[require.resolve('./compile.js')]\n require(require.resolve('./compile.js'))\n } catch (e) {\n console.log(e)\n }\n }\n})\n" }, { "path": "docs/zh-CN/README.md", "content": "---\ntitle: 关于 VUX\n---\n\n

    \n
    \n \n \"\"\n \n
    \n \n 预览地址>>\n \n
    \n
    \n \n \"\"\n \n \n \"\"\n \n \n \"\"\n \n
    \n
    \n \n \"\"\n \n \n \"\"\n \n \n \"\"\n \n
    \n \n \"\"\n \n \n \"\"\n \n \n \"\"\n \n \n \"\"\n \n
    \n
    \n

    \n\n

    \n \n \n \n

    \n\n

    \n \n \n \n
    \n
    \n \n \n \n

    \n\n::: warning\n VUX 必须配合 `vux-loader` 使用，请按照[https://github.com/airyland/vux/tree/v2/packages/vue-cli-3-example](https://github.com/airyland/vux/tree/v2/packages/vue-cli-3-example)配置。
    \n\n **less@3.x** 有严重的兼容问题，请暂时使用 **less@^2.7.3**。\n \n vux-loader 工具是针对webpack+vue-loader项目的工程化工具，简化了webpack插件和loader的使用和编写，支持在vue-loader处理之前进行预处理，同时内置对vux组件专用的配置和优化插件。 详见 vux-loader readme.md\n\n:::\n\n## 简介\n\n`VUX`（读音 [v'ju:z]，同 `views`）是基于`WeUI`和`Vue`(2.x)开发的移动端UI组件库，主要服务于微信页面。\n\n基于`webpack + vue-loader + vux`可以快速开发移动端页面，配合`vux-loader`方便你在`WeUI`的基础上定制需要的样式。\n\n`vux-loader`保证了组件按需使用，因此不用担心最终打包了整个vux的组件库代码。\n\n`VUX`并不完全依赖于`WeUI`，`VUX` 在 `WeUI` 的基础上扩展了多个常用组件，但是尽量保持整体UI样式接近`WeUI`的设计规范。\n\n::: warning\nVUX 并不是一个能解决所有场景的完美解决方案(实际上也没有一个方案能解决所有问题)，也会出现某些`bug`或者某些特性不支持，所以如果遇到问题麻烦及时**不带情绪正确反馈**，**我们乐于及时解决描述详细方便重现的问题**。
    \n即使你不直接使用 `VUX` 组件代码, 你依然可以参考 VUX 代码来实现自己的组件库。如果一定程度上帮助到了你，那么维护这个项目也就有所意义。\n:::\n\n## 订阅版本发布通知\n\n请使用微信扫描\n\n\n\n## 提示\n::: tip\n`VUX` 是`库`而非`框架`，虽然有专用的 `vux-loader`，但并不影响你自由地使用其他组件库或者工具库。

    \n\n`VUX` 使用的 CSS 预处理工具是 `less`(同 WeUI)，但(利益于 .vue 单文件组件的灵活性)这并不影响你使用 `SASS` 等其他预处理器。

    \n\n用以表示该组件库时请使用大写名字 `VUX`，用在说明版本号时使用小写 `vux@2.x`。\n:::\n" }, { "path": "docs/zh-CN/about/before-using-vux.md", "content": "---\ntitle: 开始使用 VUX 之前\n---\n\n# 开始使用 VUX 之前\n\n::: warning\n如果你刚从后端转到前端，可能会被目前前端(表面的)工程复杂度惊吓到，但是放心，使用 `vue-cli` 从模板创建项目可以快速开始编码、构建，仅仅是几行简单的命令不是么？\n:::\n\n在使用 VUX 之前需要你至少已经会使用 `Vue`，同时需要你大概了解 `Node.js`，`npm`，`cnpm`，`yarn` 这些东西。\n\n::: tip\n建议 `Node.js` 版本在 `7.6.0` 以上。\n:::\n\n## 相关工具\n\n### WeUI\n\nVUX 样式基于 [WeUI](https://github.com/weui/weui)，但是你不必通过使用 VUX 来使用 `WeUI`。简单的页面你可以直接引入 `WeUI` 样式。详细请参考 [WeUI 文档](https://github.com/weui/weui)。\n\n### Vue\n\nVUX 基于 `Vue` 的组件库，意味着你需要有 `Vue` 的基础知识。\n\n如果还没有了解过，建议先看看[Vue 官方文档](https://cn.vuejs.org)。\n\n### Webpack\n\n如果你直接使用 `vux2` 模板，你可以暂时不用了解。当你需要自定义一些配置时自然就能很快了解了。\n\n[Webpack 文档](https://webpack.js.org)\n\n### vue-cli\n\nVue 官方用于快速创建项目的工具。\n\n``` js bash\nnpm install vue-cli -g\n```\n\n或者使用 yarn\n\n``` bash\nyarn global add vue-cli\n```\n\n[vue-cli 文档](https://github.com/vuejs/vue-cli)\n\n### vue-loader\n\nwebpack loader，用于编译 `.vue` 文件，官方模板已经帮你配置好。\n\n[vue-loader 文档](https://vue-loader.vuejs.org)\n\n### vux-loader\n\nVUX 组件库的 webpack loader，实现按需加载等功能。它不是替代 `vue-loader` 而是配合 `vue-loader` 使用。如果你使用 vux2 模板，暂不需要手动使用它。\n" }, { "path": "docs/zh-CN/about/contributors.vue", "content": "\n\n\n\n\n" }, { "path": "docs/zh-CN/about/showcase.md", "content": "---\ntitle: VUX 使用案例\n---\n\n# 使用案例\n\n> 如果你的产品在使用`VUX`, 请直接发 PR 修改 `docs/zh-CN/about/showcase.md`（置于列表最后，统一格式：二维码必须无白边框）。\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\"原味生活\"\n\"牛小云\"\n" }, { "path": "docs/zh-CN/about/thanks.md", "content": "---\ntitle: 感谢\n---\n\n# Thanks\n\n\n## VUX 参考或者使用了以下开源项目的代码\n\n+ [Vue](https://github.com/vuejs/vue)\n+ [WeUI](https://github.com/weui/weui)\n+ [FrozenUI](https://github.com/frozenui/frozenui)\n+ [Ant Design](https://github.com/ant-design/ant-design)\n+ [Ant Design Mobile](http://github.com/ant-design/ant-design-mobile)\n+ [XScroll](https://github.com/huxiaoqi567/xscroll)\n+ [Ionic](https://github.com/driftyco/ionic)\n+ [SUI Mobile](https://github.com/sdc-alibaba/SUI-Mobile)\n+ [PhotoSwipe](https://github.com/dimsemenov/PhotoSwipe)\n\n## 工具框架\n\n- 世界上最好的语言 `JavaScript`\n- 啥都能做的前端构建工具 [Webpack](https://webpack.js.org/)\n- 简单好用的文档展示工具 [Docute](https://docute.js.org/#/)" }, { "path": "docs/zh-CN/contribution/donate.md", "content": "---\ntitle: 捐赠支持 VUX\n---\n\n## 感谢赞助商\n\n
    \n

    \n \n \n \n \n \n \n
    \n \n \n \n

    \n\n
    \n\n## 感谢捐赠用户\n\n> 即将上线，捐赠时的附加信息也将显示在这里。\n\n
    \n\n## 捐赠方式\n\n> 欢迎通过下面渠道进行捐赠\n\n* [Patreon](https://www.patreon.com/airyland)\n* [Open Collective](https://opencollective.com/vux)\n* [PayPal](https://paypal.me/airyland)\n* 支付宝 airyland@qq.com\n* 企业赞助捐赠请联系 i@mao.li\n" }, { "path": "docs/zh-CN/contribution/issue.md", "content": "---\ntitle: 如何提 issue\n---\n\n# 如何提 issue\n\n::: tip\n使用本项目意味着你也有义务帮助其变得更好。\n:::\n\n不要浪费维护者时间。\n\n不要让维护者帮你学习`Vue`，帮你熟悉`vue-loader`，甚至帮你写代码。\n\n不要认为随便一句话就能让维护者明白你的意思，我们没有你想象的那么厉害。\n\n不要提没有任何意义的、代码中带有业务逻辑不方便重现的Issue。\n\n直接关闭你的`issue`不是对你不满，是你提问题方式不对，没有必要再浪费时间说明为什么要关闭你的`issue`。\n\n马虎的提问，缺少上下文和重现步骤是在浪费彼此时间。\n" }, { "path": "docs/zh-CN/contribution/pr.md", "content": "---\ntitle: 如何贡献\n---\n\n# 如何贡献\n\n## 文档更新\n\n如果修改了组件代码，需要在组件目录的`metas.yml`加上changes，直接使用`next`作为版本号(如果已经存在该版本号，则直接添加变更条目即可)。\n\n中括号内为变更类型，可选值 `fix` `enhance` `feature` `change`\n\n比如：\n\n``` yml\nchanges:\n next:\n en:\n - '[fix] fix *** bug #issueId'\n - '[feature] new feature'\n zh-CN:\n - '[fix] 修复 *** bug #issueId'\n```\n\n::: tip\n当文档相关的 `PR`被合并后，文档服务器会在`5分钟`内拉取最新代码并执行`npm run build-docs`及`npm run build`实现文档及`demo`更新。\n:::\n\n## 为什么使用 next 为版本号\n\n`next` 表示下个版本，未发布时在 `changelog` 里显示 `next`，提醒用户一些开发中的代码尚未发布。\n\n当进行版本发布时，文档中的 `next` 会被脚本代替成真正的版本号，至此发布完毕。\n\n这样的最大好处是更新代码时可以直接写 `changelog` 不用在意要写哪个版本号，在发布时翻 commit 记录写 `changelog` 是件比较浪费时间的事。\n" }, { "path": "docs/zh-CN/contribution/vux-development.md", "content": "---\ntitle: VUX 源码本地运行\n---\n\n# VUX 源码本地运行\n\n> phantomjs 可能会遇到无法下载的问题，建议先用 cnpm 全局安装\n\n``` bash\ncnpm install -g phantomjs-prebuilt\n```\n\n::: tip\n请更新 `NodeJS` 版本到 `v7.6.0` 以上，`build` 命令逐步使用 `async`。\n:::\n\n``` bash\nyarn # 使用 yarn.lock 保证依赖版本一致\nyarn dev # 或者 npm run dev\n\n\nyarn dev -- --env.include datetime,alert # 只运行部分组件，耗时短\n```\n\n## 本地查看文档\n\n``` bash\nnpm run doc:build // 构建文档\ncd docs\nyarn\nnpm run dev // 耗时较长\n```\n\n## 文档相关命令\n\n> docs 目录下的相关命令，它们是 npm run doc:build 的一部分，但是可以单独运行\n\n``` bash\nnode compile // 生成文档路由\nnode component-contributions // 从 git 记录里获取每个组件提交历史\n\nnpm run doc:dev // 运行\n```\n\n## 构建部分文档\n\n文档页面比较多等待 build 命令会长，因此可以只构建部分文档方便快速查看。\n\n``` bash\ncd docs\nnode compile --include datetime // 只构建 datetime 相关文档，多个时以英文逗号分隔，如：datetime,alert\nnpm run dev\n```\n\n## 官网文档部署说明\n\n线上页面有 `30分钟` 页面缓存，定时每 `20分钟` 构建一次，因此提交后可能会需要 `1小时` 才会更新到官网。\n" }, { "path": "docs/zh-CN/css/1px.md", "content": "---\ntitle: 1px 解决方案\n---\n\n# 1px 解决方案\n\n::: tip\n1px 方案在 VUX 组件内应用广泛，包括 `Grid`, `ButtonTab`, `XTable`, `XButton`, `Cell` 等等。\n\n利用 `Flexbox` + `1px` 你可以实现复杂的宫格布局。\n:::\n\n## 引入\n\n在你项目的`App.vue`引入，组件内不需要再重复引入。\n\n``` html\n\n```\n\n## 可用类名：\n\n- `vux-1px-l` 左边框\n- `vux-1px-r` 右边框\n- `vux-1px-t` 上边框\n- `vux-1px-b` 下边框\n- `vux-1px-tb` 上下边框\n- `vux-1px` 全边框\n\n\n" }, { "path": "docs/zh-CN/css/close.md", "content": "---\ntitle: 纯 css close 图标\n---\n\n# 纯 css close 图标\n\n::: tip\n关闭图标主要应用于弹窗(dialog)关闭按钮以及弹窗(popup)头部的关闭按钮。\n:::\n\n## 使用\n\n在你项目的`App.vue`引入，组件内不需要再重复引入。\n\n``` html\n\n```\n\n## 类名\n\n- `vux-close`\n\n\n``` html\n\n```\n\n可以参考 `XDialog` 演示。\n\n## 颜色\n\n当你想设置图标颜色时，直接设置 color 即可。\n\n\n``` html\n\n```\n\n\n" }, { "path": "docs/zh-CN/css.md", "content": "---\nnav: zh-CN\n---\n\n## 1px\n\n::: tip\n1px 方案在 VUX 组件内应用广泛，包括 Grid, ButtonTab, XTable, XButton, Cell 等等。\n
    \n
    \n利用 flexbox + 1px 你可以实现复杂的宫格布局。\n:::\n\n在你项目的`App.vue`引入，组件内不需要再重复引入。\n\n``` html\n\n```\n\n可用类名：\n\n- `vux-1px-l` 左边框\n- `vux-1px-r` 右边框\n- `vux-1px-t` 上边框\n- `vux-1px-b` 下边框\n- `vux-1px-tb` 上下边框\n- `vux-1px` 全边框\n\n\n\n## close\n\n::: tip\n关闭图标主要应用于弹窗(popup)的左侧关闭按钮。\n:::\n\n在你项目的`App.vue`引入，组件内不需要再重复引入。\n\n``` html\n\n```\n\n可用类名：\n\n- vux-close\n\n\n``` html\n\n```\n\n可以参考 `XDialog` 演示。\n\n当你想设置图标颜色时，直接设置 color 即可。\n\n\n``` html\n\n```\n\n\n" }, { "path": "docs/zh-CN/development/i18n.md", "content": "---\ntitle: 国际化 i18n\n---\n\n# 国际化\n\n::: warning\n暂时只支持配合`vux-loader`使用。\n\n如果你只需要默认的中文组件，那么你可以略过下面说明，只要启用`vux-ui`插件即可。\n:::\n\n默认不配置此插件时，vux源码会按照默认语言`zh-CN`进行静态编译，和原来的使用没有明显不同。\n\n详细请参照 vux-loader的vux-i18n文档" }, { "path": "docs/zh-CN/development/remove-click-delay-fastclick.md", "content": "---\ntitle: Vue 应用移除移动端页面点击延迟\n---\n\n# 移除移动端页面点击延迟\n\n::: tip\n直接使用 `WeUI` 样式并引入 `fastclick` 会导致一些点击问题，VUX 组件内部已经做了相关处理。\n:::\n\n## 引入 fastclick\n\n在`main.js`里引用`fastclick`\n\n``` js\nconst FastClick = require('fastclick')\nFastClick.attach(document.body)\n// done\n```" }, { "path": "docs/zh-CN/development/router.md", "content": "---\ntitle: vue-router 路由\n---\n\n# 路由\n\n推荐直接使用官方 [vue-router](https://github.com/vuejs/vue-router)，`VUX`部分组件支持`link`属性直接支持`vue-router`的路由参数，`vux2`模板内置了`vue-router`。\n\n::: warning\n如果使用了过渡(转场动画)，在`iPhone`上使用`左划返回`时动画会再执行一遍，目前没有找到可行的处理方法，如果你有处理方案，欢迎`PR`。\n[https://github.com/airyland/vux/pull/2259](https://github.com/airyland/vux/pull/2259)\n:::\n" }, { "path": "docs/zh-CN/development/theme.md", "content": "---\ntitle: 主题颜色配置\n---\n\n# 主题颜色配置\n\n## 配置插件\n\n::: warning\n暂时只支持配合`vux-loader`使用。\n\n注意的是主题文件不能引入其他less文件，只能为简单变量列表。\n:::\n\n请配置vux-loader的`less-theme`插件，指定用以覆盖的less文件路径：\n\n``` js\n{\n name: 'less-theme',\n path: 'src/styles/theme.less' // 相对项目根目录路径\n}\n```\n\n## 可配置颜色\n\n源码地址：https://github.com/airyland/vux/blob/v2/src/styles/variable.less\n\n::: tip\n更多配置需求请通过 issue 提出。\n:::\n\n## demo站点的示例配置\n\n源代码地址：[https://github.com/airyland/vux/blob/v2/src/theme.less](https://github.com/airyland/vux/blob/v2/src/theme.less)\n\n## 内部如何实现的？\n\n`vux-loader` 在每个 `less` 文件的编译过程中重写了 `less-loader` 的变量参数，使其能直接覆盖原来变量。" }, { "path": "docs/zh-CN/development/typescript.md", "content": "---\ntitle: TypeScript 支持\n---\n\n# TypeScript 支持\n\n> 即将支持\n" }, { "path": "docs/zh-CN/development/vue-ajax.md", "content": "---\ntitle: Vue 中使用 ajax\n---\n\n# 发送 ajax 请求\n\n\n:::tip\n`AjaxPlugin` 插件依赖于 [axios](https://github.com/mzabriskie/axios)\n详细 API 文档请查看：[axios](https://github.com/mzabriskie/axios)\n:::\n\n## 版本要求\n\n`AjaxPlugin`在`vux@^2.1.0-rc.20`开始支持\n\n\n## 引入\n\n`main.js` 入口文件中引入：\n\n``` js\nimport { AjaxPlugin } from 'vux'\nVue.use(AjaxPlugin)\n```\n\n## 兼容性问题\n\n需要注意的是`axios`是基于`Promise`的，因此如果你需要兼容低版本浏览器([caniuse](http://caniuse.com/#feat=promises))，需要引入`polyfill`。\n\n`Polyfill` 推荐使用 [es6-promise](https://github.com/stefanpenner/es6-promise)\n\n\n``` js\nrequire('es6-promise').polyfill()\n```\n\n## 全局使用\n\n``` js\nVue.http.post('/api').then()\n```\n\n## 组件中使用\n\n``` js\nexport default {\n created () {\n this.$http.post('/api').then(({data}) => {\n console.log(data)\n })\n }\n}\n```\n" }, { "path": "docs/zh-CN/development/vue-global-method.md", "content": "---\ntitle: Vue 全局公用函数\n---\n\n# vue 全局公用函数\n\n如果你需要让一个工具函数在每个组件可用，可以把方法挂载到 `Vue.prototype`上。\n\n## 注册\n\n`main.js` 中\n\n``` js\nVue.prototype.$method = function () {}\n```\n\n::: tip\n一般建议函数名使用 `$` 前缀。像 `vue-router` 的 `$route` 和 `$router`。\n:::\n\n## 使用\n\n那么组件代码里\n\n``` js\nexport default {\n created () {\n this.$method()\n }\n}\n```\n\n## 说明\n\n挂载到 `prototype` 上是为了方便组件内直接用 `this.$method` 来使用，你也可以直接用 `Vue.method`，这样同样可以全局使用，不过在组件内就需要再 import 一次 `Vue` 了。" }, { "path": "docs/zh-CN/development/vue-google-analytics.md", "content": "---\ntitle: Vue 中使用谷歌统计\n---\n\n# 使用谷歌统计\n\n单页面应用切换时要手动发送页面统计，首先在 `index.html` 或者 `main.js` 里引入谷歌统计代码：\n\n``` js\n(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){\n(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),\nm=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)\n})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');\n\nga('create', 'UA-yourID', 'auto')\nga('send', 'pageview') // 是否要统计着陆页面访问，取决于你的需求，这个不一定需要，会和`router`统计有重复\n\n```\n\n``` js\n// main.js 里，如果你使用了 vue-router\nrouter.afterEach(function (to) {\n if (window.ga) {\n window.ga('set', 'page', to.fullPath) // 你可能想根据请求参数添加其他参数，可以修改这里的 to.fullPath\n window.ga('send', 'pageview')\n }\n})\n```" }, { "path": "docs/zh-CN/development/vue-loader-autoprefix.md", "content": "---\ntitle: vue-loader autoprefix 推荐配置\n---\n\n# autoprefix 推荐配置\n\n`vue`官方模板的设置是`last 2 versions`，可能会导致你在某些`Android`机子上出现问题。\n\n如果你使用 `last 7 versions` 会生成不必要的`-ms`前缀代码.\n\n因此建议同`WeUI`一样，使用配置 `['iOS >= 7', 'Android >= 4.1']`\n\n## 直接在 vux-loader 里配置\n\n如果你没有在 postcss 里配置，你可以直接配置 vux-loader 的 `duplicate-style` 插件：\n\n``` js\n{\n name: 'duplicate-style',\n options: {\n cssProcessorOptions : {\n safe: true,\n zindex: false,\n autoprefixer: {\n add: true,\n \"browsers\": [\n \"iOS >= 7\",\n \"Android >= 4.1\"\n ]\n }\n }\n }\n}\n```\n" }, { "path": "docs/zh-CN/development/vue-loader-disable-eslint.md", "content": "---\ntitle: vue-loader 禁用 eslint\n---\n\n# 禁用 eslint\n\n并不推荐禁用`eslint`, 编码规范可以一定程序上保证代码质量。但是如果你确实想禁用，可以删除`build/webpack.base.conf.js`里的相关代码。\n\n``` js\npreLoaders: [\n {\n test: /\\.vue$/,\n loader: 'eslint',\n include: [\n path.join(projectRoot, 'src')\n ],\n exclude: /node_modules/\n },\n {\n test: /\\.js$/,\n loader: 'eslint',\n include: [\n path.join(projectRoot, 'src')\n ],\n exclude: /node_modules/\n }\n]\n```\n\n如果你只是想禁用对某一文件的检测，那么可以在`.eslintignore`里添加规则。\n\n如果你是想禁止某一行的检测，那么可以使用`// eslint-disable-line`。\n\n更加灵活的使用参考 [eslint文档](http://eslint.org/docs/user-guide/configuring#disabling-rules-with-inline-comments)。\n" }, { "path": "docs/zh-CN/development/vue-router-page-transition.md", "content": "---\ntitle: 页面切换转场动画\n---\n\n# 页面切换转场动画\n\n你可以注意到 demo 站点的切换动画，本质上是使用 `Vue` 的 `transition` 组件实现的。\n\n- [ ] todo" }, { "path": "docs/zh-CN/development/vue-show-loading.md", "content": "---\ntitle: 页面切换时显示loading\n---\n\n# 页面切换显示loading\n\n移动端如果使用异步组件加载那么还是需要一点等待时间的，在网络慢时等待时间会更长。显示`Loading`状态缓解一下用户等待情绪就十分重要。\n\n如果你使用`vue-router`和`vuex`，那么可以很容易实现。\n\n首先，注册一个`module`来保存状态\n\n``` js\nconst store = new Vuex.Store({}) // 这里你可能已经有其他 module\n\nstore.registerModule('vux', { // 名字自己定义\n state: {\n isLoading: false\n },\n mutations: {\n updateLoadingStatus (state, payload) {\n state.isLoading = payload.isLoading\n }\n }\n})\n```\n\n然后使用`vue-router`的`beforeEach`和`afterEach`来更改`loading`状态\n\n``` js\nrouter.beforeEach(function (to, from, next) {\n store.commit('updateLoadingStatus', {isLoading: true})\n next()\n})\n\nrouter.afterEach(function (to) {\n store.commit('updateLoadingStatus', {isLoading: false})\n})\n```\n\n在`App.vue`里使用`loading`组件并从`vuex`获取`isLoading`状态\n\n``` html\n\n```\n\n``` js\nimport { Loading } from 'vux'\nimport { mapState } from 'vuex'\n\nexport default {\n components: {\n Loading\n },\n computed: {\n ...mapState({\n isLoading: state => state.vux.isLoading\n })\n }\n}\n```\n\ndone.\n\n如果你觉得在加载比较快时`Loading`组件一闪而过体验也不大好，那么你可以延迟设置`loading=false`。" }, { "path": "docs/zh-CN/development/vue-webpack-code-splitting-async.md", "content": "---\ntitle: Vue 异步加载组件\n---\n\n# 异步加载组件\n\n将所有页面组件一次性加载是一个很浪费资源和考验用户耐心的做法，尤其在移动端。\n\n## 使用方法\n\n`webpack` 提供了[code splitting](https://webpack.js.org/guides/code-splitting-require/)，你可以按照下面写法实现当切换到特定路由时才加载代码。\n\n\n需要注意的是 `vue-loader@13.0.0` 语法有所变更，具体参照发布说明 [v13.0.0](https://github.com/vuejs/vue-loader/releases/tag/v13.0.0)\n\n``` js\n// vue-loader@13.0.0 之前\nconst Foo = () => import('./Foo.vue') // 在 Vue 2.4 + vue-router 2.7 版本下可以正确运行\n\n// vue-loader@13.0.0\nconst Foo = () => import('./Foo.vue').then(m => m.default)\n```\n\n\n## 组件打包问题\n\n如果你在不同的进行了代码分割的 .vue 文件引入了相同的组件，在打包时两个路由的代码都会重复打包该组件。\n\n你可以对重复使用的组件在 `main.js` 进行全局注册，以减少相应 chunk file 的大小并提高下载速度。\n" }, { "path": "docs/zh-CN/development/vue-webpack-env.md", "content": "---\ntitle: Vue + webpack 区分测试环境和生产环境\n---\n\n# 区分测试环境和生产环境\n\n如果你使用了 `vux2` 模板或者 `webpack` 模板，默认你可以直接通过判断 `process.env.NODE_ENV` 来区分\n\n比如`统计代码`仅放在 `production` 环境，在不同环境里使用不同的 `API` 接口地址。\n\n``` js\nif (process.env.NODE_ENV === 'production') {\n // 干一些线上才要做的事情\n}\nif (process.env.NODE_ENV === 'development') {\n // 干一些测试时不可告人的事情\n}\n```\n\n如果你是自己配置的环境，可以参考 [webpack DefinePlugin 文档](https://webpack.js.org/plugins/define-plugin/)" }, { "path": "docs/zh-CN/development/vux-nuxt-ssr.md", "content": "---\ntitle: vux 使用 nuxt 实现服务端渲染\n---\n\n# vux 使用 nuxt 实现服务端渲染\n\n请直接参考源码目录 [/ssr/nuxt](https://github.com/airyland/vux/tree/v2/ssr/nuxt)\n" }, { "path": "docs/zh-CN/directives/v-transfer-dom.md", "content": "---\ntitle: v-transfer-dom 指令\n---\n\n# v-transfer-dom 指令\n\n在移动端应用里，为了便于代码组织，通常我们要将组件放在各个路由的 `.vue` 文件里，但是因为此时组件并不在 `body` 下，加上定位，overflowscrolling 设置等原因，会出现遮罩在弹层之上，z-index 失效等问题。\n\n因此我们推荐在纯弹窗类组件比如 `Alert` `Popup` `XDialog` 等组件上使用 `v-transfer-dom` 实现自动移动到 body 下，解决以上问题。\n\n::: warning\n必须有一个 `div` 作为占位元素否则会出错\n:::\n\n\n## 使用\n\n### 注册局部指令\n\n``` js\nimport { TransferDom } from 'vux'\n\nexport default {\n directives: {\n TransferDom\n }\n}\n```\n\n### 注册全局指令\n\n``` js\nimport { TransferDom } from 'vux'\n\nVue.directive('transfer-dom', TransferDom)\n```\n\n### 模板使用\n\n``` html\n
    \n \n
    \n```" }, { "path": "docs/zh-CN/faq/$t-is-not-defined.md", "content": "---\ntitle: $t is not defined\n---\n\n# $t is not defined\n\n一般是两个原因：\n\n## cnpm 导致的问题\n\n如果是直接使用模板后并且使用 `cnpm` 报错，请升级到 `vux-loader@1.0.58`。\n\n该问题出现原因是 `cnpm` 安装后 `node_modules` 里的模块为快捷方式，而 `vux-loader` 之前版本没有考虑到这一特殊情况。\n\n## 未正确配置动态 i18n\n\ndemo例子使用`$t`是因为demo启用了`i18n`，如果你没有使用`vuex-i18n`等相关`i18n`插件，请不要在代码中使用`$t`函数\n" }, { "path": "docs/zh-CN/faq/Uncaught-SyntaxError-Unexpected-token-export.md", "content": "---\ntitle: Uncaught SyntaxError: Unexpected token export\n---\n\n# Uncaught SyntaxError: Unexpected token export\n\n原因是Vux的js源码没配置babel，你可以在webpack配置的loaders加上\n\n ``` js\n {\n test: /vux.src.*?js$/,\n loader: 'babel'\n }\n ```\n\n 或者启用`vux-loader`的`vux-ui`插件。" }, { "path": "docs/zh-CN/faq/can-vux-used-in-weapp.md", "content": "---\ntitle: VUX 能否在微信小程序里使用\n---\n\n# VUX 能否在微信小程序里使用\n\nSorry，不能。微信小程序是个相对封闭的平台，无法简单地适配也没有计划支持小程序版本。\n\n目前企业主体用户可以使用 `web-view` 组件直接显示 web 页面，间接地使用 VUX。\n\n\n## mpvue 解决方案能否直接迁移 VUX\n\n目前 [mpvue](http://mpvue.com/) 还不支持 `slot`、`slot-scope`，因此迁移有难度，并且小程序存在较多差异，暂未计划。\n" }, { "path": "docs/zh-CN/faq/cannot-resolve-inline-desc.md", "content": "---\ntitle: Can't resolve '../inline-desc' in\n--- \n\n# Can't resolve '../inline-desc' in\n\nwebpack resolve 配置\n\n``` js\nresolve: {\n extensions: ['', '.js', '.vue', '.json']\n}\n```" }, { "path": "docs/zh-CN/faq/difference-between-vux-template-and-webpack-template.md", "content": "---\ntitle: vux2 和 Vue 官方 webpack 模板区别是什么？\n---\n\n# vux2 和 Vue 官方 webpack 模板区别是什么？\n\n`vux2` 模板 fork 自 `webpack` 模板并进行了配置，和 `webpack` 模板基本同步，因此建议直接使用 vux2 模板。" }, { "path": "docs/zh-CN/faq/document-framework.md", "content": "---\ntitle: 文档是用什么工具编写的？\n---\n\n# 文档是用什么工具编写的？\n\n早期版本使用的是 [Docute](https://docute.js.org) by [egoist](https://github.com/egoist)。在`Docute`基础上做了一点样式修改。\n\n2.2.1 后面版本出于 `SEO` 考虑使用 `Vue` 的服务端渲染，使用的框架同样是 [egoist](https://github.com/egoist) 开发的 [ream](https://github.com/ream/ream)。\n\n文档部分样式参照了 [eggjs.org](https://eggjs.org/)，表示感谢。\n\n因此目前无论是组件还是文档都是完全基于 `Vue`，cool right?" }, { "path": "docs/zh-CN/faq/does-vux-support-weex.md", "content": "---\ntitle: VUX 是否支持 weex\n---\n\n# VUX 是否支持 weex\n\n不支持，也没有计划支持。" }, { "path": "docs/zh-CN/faq/dupicate-style.md", "content": "---\ntitle: 样式冗余\n---\n\n# 样式冗余\n\n## 调试时\n\n调试时如果你审查元素样式发现有多个重复样式是正常的，因为不同组件可能引用了同样的less源码，而调试时是直接把不同组件样式用`\n ```\n\n- 配置 `vue-loader`（通过配置vux-loader实现）\n\n ``` js\n // vux-loader\n module.exports = {\n configureWebpack: config => {\n require('@vux/loader').merge(config, {\n plugins: ['vux-ui', {\n name: 'less-theme',\n path: 'src/theme.less'\n }]\n })\n }\n }\n ```\n- 配置`babel-loader`以正确编译 VUX 的js源码（通过配置vux-loader实现）\n\n ``` js\n module.exports = {\n configureWebpack: config => {\n require('@vux/loader').merge(config, {\n plugins: ['vux-ui', {\n name: 'less-theme',\n path: 'src/theme.less'\n }]\n })\n }\n }\n ```\n- 安装`less-loader`以正确编译less源码\n\n ``` bash\n npm install less less-loader --save-dev\n ```\n- 安装 `yaml-loader` 以正确进行语言文件读取\n\n ``` bash\n npm install yaml-loader --save-dev\n ```\n\n- 添加 `viewport` meta\n\n ``` html\n \n ```\n- 添加 `Fastclick` 移除移动端点击延迟\n\n ``` js\n const FastClick = require('fastclick')\n FastClick.attach(document.body)\n ```\n- 添加 `vue-router`（如果不需要前端路由，可忽略）\n\n ``` js\n import VueRouter from 'vue-router'\n Vue.use(VueRouter)\n ```\n\n- 添加 webpack plugin, 在构建后去除重复css代码（通过配置vux-loader实现）\n\n ``` js\n plugins: [{\n name: 'duplicate-style'\n }]\n ```\n\n- 如果你使用 `webpack-simple` 模板或者 webpack 配置里缺少 .vue extension 配置，请记得配置：\n\n ``` js\n resolve: {\n extensions: ['.js', '.vue', '.json']\n ```" }, { "path": "docs/zh-CN/install/npm.md", "content": "---\ntitle: VUX 安装使用\n---\n\n# 安装使用(webpack)\n\n::: warning\n如果你从没使用过 `VUX`，请参考 快速入门。
    \n不推荐使用 `umd` 方式引用组件，但是如果不得不使用，可以参考 umd 构建\n:::\n\n直接安装或者更新：\n\n``` js\nnpm install vux --save\n```\n\n或者使用 `yarn`\n\n``` js\nyarn add vux // 安装\nyarn upgrade vux // 更新\n```\n\n如果你想直接从 Github 安装，请指定 `v2` 分支\n\n``` bash\nnpm install git://github.com/airyland/vux.git#v2\n```\n\n如果你是从`0.x`更新，请参考： 更新到`2.x`\n\n\n::: warning\nvux2必须配合`vux-loader`使用, 请在`build/webpack.base.conf.js`里参照如下代码进行配置：\n:::\n\n``` js\nconst vuxLoader = require('vux-loader')\nconst webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig\n\nmodule.exports = vuxLoader.merge(webpackConfig, {\n plugins: ['vux-ui']\n})\n```\n\n::: warning\nvux@0.x 已经停止维护，请尽快迁移到 vue@2.x & vuex@2.x & vux@2.x，虽然要花点时间，但是完全值得。\n:::" }, { "path": "docs/zh-CN/install/umd.md", "content": "---\ntitle: umd 组件构建及使用\n---\n\n# umd 组件构建及使用\n\n ::: tip\n 从`2.0`开始，推荐使用`webpack`来调用组件，因此不再在`repo`中保存`umd`文件，但提供了生成命令。\n\n 请更新 `NodeJS` 到版本 `7.6.0`及以上。\n\n 例子可查看：[https://github.com/airyland/vux/tree/v2/docs/examples](https://github.com/airyland/vux/tree/v2/docs/examples)\n :::\n\n ::: danger\n 强烈建议使用 `webpack` 的方式开发，在 3.0 之后可能不再提供支持。\n :::\n\n ## 生成命令\n\n ``` bash\n git clone https://github.com/airyland/vux.git --depth=1 // or just update: git pull\n cd vux\n npm install\n npm run build-components\n ```\n\n 默认生成的语言是`zh-CN`，模块命名空间为`vux`，如`vuxGroup`，`vuxCell`，你可以在命令行中配置。\n\n ```\n npm run build-components -- --locale='en' --namespace='X'\n ```\n\n ## 目录结构\n\n 生成的文件夹结构如：\n\n ::: tip\n 出于目录结构一致性考虑，即使是子组件也是一个文件夹，并且会有一个空的`index.min.css`样式文件。\n :::\n\n ```\n |- dist/\n |- vux.min.js ------------ 所有组件打包，仅用于测试，不推荐在生产环境使用\n |- vux.min.css ----------- 所有组件样式打包，同样仅用于测试\n |- components\n |- actionsheet\n |- index.min.js -------- 组件js代码\n |- index.min.css ------- 组件css代码\n ```\n\n ::: tip\n vux.min.js 包括了所有的组件、插件及默认地址库，都挂载在全局变量vux上。当然为了使用方便同样直接挂载到了`window`上。\n\n 组件调用举例: `vuxCell`\n\n 插件调用举例：`vuxAlertPlugin`\n\n 默认地址库调用：`vuxChinaAddressData`\n :::\n\n ## 组件使用\n\n ``` html\n \n \n \n \n scripts\n \n \n \n \n
    \n \n \n \n
    \n\n \n \n\n \n \n \n ```\n\n## 插件使用\n\n\n``` html\n\n\n\n \n \n scripts\n \n \n \n\n\n
    \n
    \n\n \n\n \n\n\n```\n\n## 生成css工具样式\n\n包括`1px`解决方案，构建文件位于`dist/styles/*.css`,构建方式：\n\n``` bash\nnpm run build-styles\n```\n\n::: tip\n为了使用方便，可以使用`npm run xbuild`来执行`build-components` 及 `build-styles`\n:::" }, { "path": "docs/zh-CN/install/upgrade-to-vux2.md", "content": "---\ntitle: 升级到 vux@2.x\n---\n\n# 升级到 vux@2.x\n\n### Vue@2.x 主要变更\n\n参考[Vue官方文档](https://cn.vuejs.org/v2/guide/migration.html)进行迁移, 这也是Vux组件的代码更新部分，主要包括：\n\n- `:value.sync` 已经废弃\n- `broadcast` 方法已经废弃\n- `@click` 需要更改为 `@click.native`\n- `v-for`的`(index, item)` => `(item, index)`\n\n### vue-router 更新\n\n配合vue2, `vue-router`同样需要更新到2.0版本以上\n\n原来的路由配置修改为：\n\n``` js\n\nconst routes = [{\n path: '/vux/2.0',\n component: Vux2Demo\n}]\n\nconst router = new VueRouter({\n routes\n})\n\n```\n\n原来的路由挂载修改为：\n\n``` js\nnew Vue({\n router,\n render: h => h(App)\n}).$mount('#app')\n```\n\n`go` 已经不是过去的 `go`了，要用`push`方法来跳转\n\n``` js\nthis.$router.go('/somewhere')\n```\n\n`v-link`也废弃了，使用`router-link`组件来代替\n\n其他请参考官方升级文档: [https://cn.vuejs.org/v2/guide/migration-vue-router.html](https://cn.vuejs.org/v2/guide/migration-vue-router.html)\n\n\n### 不再生成`umd`文件\n\n但是你可以使用`npm run build-components`来生成，请参考文档首页。\n\n### 双向绑定修改为 `v-model`\n\n所有相关Vux调用的 `:value.sync`都需要更改成 `v-model`\n\n``` js\n// 0.x\n\n// 2.x\n\n```\n\n### 使用 vux-loader\n\n原来你可能在webpack中做了这样的配置以正确编译vux的js源码：\n\n``` js\n{\n test: /vux.src.*?js$/,\n loader: 'babel'\n}\n```\n\n或者你也可能使用了低版本`vux-loader`的`getBabelLoader`方法。\n\n现在你可以直接删除这一句了，直接使用vux-loader。\n\n在`webpack.base.conf.js`中这样配置：\n\n``` js\nconst vuxLoader = require('vux-loader')\nmodule.exports = vuxLoader.merge(webpackConfig, {\n options: {},\n plugins: [\n {\n name: 'vux-ui'\n }\n ]\n})\n```\n\n### 引入方式变更\n\n原来你可能是单个组件引入，现在在`vux-loader`的支持下你可以直接这样写：\n\n``` js\nimport { Group, Cell } from 'vux'\n```\n\n\n### 组件名字变更\n\n

    \n 为什么不参照其他组件库全部加上`X`前缀，主要是因为觉得总要写个`X`相当不顺手。\n

    \n\n因Vue2.0限制组件名不能与原有的html5标签一样，因此部分组件进行了重命名，加上 `x-`前缀，所有需要加前缀的组件如下：\n\n- `Progress` => `XProgress`\n- `Switch` => `XSwitch`\n- `Dialog` => `XDialog`\n- `Address` => `XAddress`\n- `Circle` => `XCircle`\n- `XButton`\n- `XImg`\n- `XInput`\n- `XTextarea`\n- `XHeader`\n\n### 各个组件变更：\n\n#### Swiper 引入路径变化\n\n目录结构变化，与其他有子组件的统一，导致引入方式变化：\n\n``` js\n// 0.x\nimport Swiper from 'vux/src/components/swiper'\nimport SwiperItem from 'vux/src/components/swiper-item'\n// 2.0\nimport Swiper from 'vux/src/components/swiper/swiper'\nimport SwiperItem from 'vux/src/components/swiper/swiper-item'\n// 或者\nimport { Swiper, SwiperItem } from 'vux/src/components/swiper' // with vux-loader\n```\n\n#### ColorPicker 废弃\n\n

    \n `2.0.0`可用用，但是后面不再维护。\n

    \n\n这个组件可以由`cell`配合`slot`扩展出来，而且更灵活。没有做过统计，但是感觉使用人数应该挺少。\n\n#### Countdown 废弃\n\n

    \n `2.0.0`可用，但是后面不再维护。\n

    \n\n功能薄弱，比较鸡肋。\n\n#### Scroller reset方法更新\n\n由于 Vue@2.x 的`broadcast`方法已经废弃，并且之前的设计也并不是很好，uuid的绑定也其实是没必要的。\n\n- reset方法变成使用ref的`reset()`方法\n- pullup reset 变成 ref 的 `donePullup()`方法\n- pullup disable 变成 ref 的 `disablePullup()`方法\n- pullup enable 变成 ref 的 `enablePullup()`方法\n- pulldown reset 变成 ref 的 `donePulldown()`方法\n- pullup和pulldown的status绑定变成`v-model=\"status\"`绑定，示例\n\n ``` js\n status: {\n pullupStatus: 'default',\n pulldownStatus: 'default'\n }\n ```\n\n详细参照Scroller文档进行更新\n\n#### 表单默认required为true\n\n保持和`html`规范一致, 影响的组件有 `XInput` `Checklist`\n\n#### Checklist 不显示错误提示\n\n考虑到错误样式目前并不优雅，而用户有自定义错误样式的需要，因此处理成emit一个错误事件+底部slot， 用户可自行处理。\n\n#### XInput 的valid获取\n\n由于Vue2的$ref不再是响应的，因此不能直接在模板中通过ref调用组件的valid值(会报undefined)，所以需要变成在提交时再进行ref来获取valid值。\n\n#### XAddress 默认地址数据更新\n\n目前引用方式：\n\n``` js\nimport { XAddress, ChinaAddressData } from 'vux'\n```\n\n如果你想继续使用旧版本数据\n\n``` js\nimport { XAddress, ChinaAddressV1Data } from 'vux'\n```\n\n按照[最新统计局数据](http://www.stats.gov.cn/tjsj/tjbz/xzqhdm/201608/t20160809_1386477.html)进行更新，部分区域已经不存在，部分id做了更新。因此请*谨慎*更新，评估后端数据存储设计和前端交互再进行更新，避免错误更新用户数据或者导致数据丢失。\n\n完整更新如下图:\n\n

    \n \"\"\n

    \n" }, { "path": "docs/zh-CN/install/usage.md", "content": "---\ntitle: VUX 调用例子\n---\n\n# 调用示例\n\n## .vue文件中调用组件\n\n``` html\n\n\n\n```\n\n## main.js中调用plugin\n\n``` js\nimport { AlertPlugin, ToastPlugin } from 'vux'\n\nVue.use(AlertPlugin)\nVue.use(ToastPlugin)\n\n// 详细使用请参考对应组件文档\n```" }, { "path": "docs/zh-CN/lab/index.md", "content": "---\ntitle: 实验室\n---\n\n# 实验室\n\n> beta 测试组件将出现在这里。\n\n\n- [VChart](/zh-CN/components/v-chart.html)\n" }, { "path": "docs/zh-CN/production/inline-manifest.md", "content": "---\ntitle: Vue 打包优化：使用 inline manifest\n---\n\n# inline manifest\n\n::: tip\n`manifest` 文件为路径配置和异步组件名字列表，该做法可以减少一个`http`请求。\n\n确保 `vux-loader`更新到 `^1.0.35`。\n:::\n\n\n## 修改 index.html 模板\n\n首先在页面的``前加入代码：\n\n``` html\n<%=htmlWebpackPlugin.files.webpackManifest%>\n```\n\n## 配置 vux-loader\n\n在`vux-loader`配置的 `plugins` 列表中加入`inline-manifest`插件\n\n``` js\nplugins:[{\n name: 'inline-manifest'\n}]\n```\n\n或者简化写法直接使用名字：\n\n``` js\nplugins:['inline-manifest']\n```" }, { "path": "docs/zh-CN/tools/base64.md", "content": "---\ntitle: base64\n---\n\n# base64\n\n``` js\nimport { base64 } from 'vux'\n\nbase64.encode('VUX')\nbase64.decode('VlVY')\n```" }, { "path": "docs/zh-CN/tools/cookie.md", "content": "---\ntitle: cookie\n---\n\n# cookie\n\n``` js\nimport { cookie } from 'vux'\n```\n\n`get *cookie.get(name, [options])*`\n\n获取 cookie 值。`options` 参数可选，取值如下：\n\n1. `converter` 转换函数。如果所获取的 cookie 有值，会在返回前传给 `converter`\n函数进行转换。\n1. 选项对象。对象中可以有两个属性：`converter` 和 `raw`. `raw` 是布尔值，为真时，不会对获取到的\ncookie 值进行 URI 解码。\n\n**注**：如果要获取的 cookie 键值不存在，则返回 `undefined`.\n\n例子：\n\n```js\n// setup\ndocument.cookie = 'foo=1'\ndocument.cookie = 'bar=2'\n\ncookie.get('foo')\n// returns '1'\n\ncookie.get('bar', function(s) { return parseInt(s); } )\n// returns 2\n```\n\n\n`set *cookie.set(name, value, [options])`\n\n设置 cookie 值。参数 `options` 可选，可以有以下属性：`path`（字符串）、`domain`（字符串）、\n`expires`（数值或日期对象）、`raw`（布尔值）。当 `raw` 为真值时，在设置 cookie 值时，不会进行\nURI 编码。\n\n例子：\n\n```js\ncookie.set('foo', 3)\n\ncookie.set('bar', 4, {\n domain: 'example.com',\n path: '/',\n expires: 30\n})\n````\n\n\n`remove *cookie.remove(name, [options])`\n\n移除指定的 cookie.\n\n例子：\n\n```js\ncookie.remove('foo')\n\ncookie.remove('bar', {\n domain: 'example.com',\n path: '/'\n})\n```\n" }, { "path": "docs/zh-CN/tools/date.md", "content": "---\ntitle: vue date 日期格式化\n---\n\n# date format\n\n相对`moment`来说`十分轻量`的实现。\n\n\n## 使用\n\n``` js\nimport { dateFormat } from 'vux'\n\ndateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss')\n```\n\n## 作为 filter 使用\n\n``` js\nimport { dateFormat } from 'vux'\n\nexport default {\n filters: {\n dateFormat\n }\n}\n\n```" }, { "path": "docs/zh-CN/tools/debounce-throttle.md", "content": "---\ntitle: debounce\n---\n\n## debounce\n\n::: warning\n请注意了解 `debounce` 和 `throttle` 的区别。如果尚不清楚，请`google`之。\n:::\n\n``` js\nimport { debounce } from 'vux'\n\ndebounce(func, [wait=0], [options={}])\n```\n[详细文档](https://lodash.com/docs/#debounce)\n\n## throttle\n\n``` js\nimport { throttle } from 'vux'\n\nthrottle(func, [wait=0], [options={}])\n```\n\n[详细文档](https://lodash.com/docs/#throttle)\n" }, { "path": "docs/zh-CN/tools/md5.md", "content": "---\ntitle: md5\n---\n\n# md5\n\n::: tip\n该工具直接依赖于 [blueimp-md5](https://github.com/blueimp/JavaScript-MD5)\n\n注意: `md5`是消息摘要算法并非加密算法，用于需要加密的场景会有安全问题。\n:::\n\n``` js\nimport { md5 } from 'vux'\n\nmd5('VUX')\n```\n" }, { "path": "docs/zh-CN/tools/number.md", "content": "---\ntitle: vue 数字格式化\n---\n\n# number 格式化工具\n\n`numberComma`用于分割数字，默认为3位分割，一般用于格式化`金额`。\n\n`numberPad`用于按照位数补0\n\n`numberRandom`用于生成两个整数范围内的随机整数\n\n``` js\nimport { numberComma, numberPad, numberRandom } from 'vux'\nnumberComma(21342132) // 21,342,132\nnumberComma(21342132, 4) // 2134,2132\nnumberComma(21342132.234) // 21,342,132.234\n\nnumberPad(1) // 01\nnumberPad(234, 4) // 0234\n\nnumberRandom(1, 7) // 2\n```\n" }, { "path": "docs/zh-CN/tools/querystring.md", "content": "---\ntitle: Vue querystring url 参数解析\n---\n\n# url 参数解析\n\n```js\nimport { querystring } from 'vux'\n\nquerystring.parse('a=b&c=d') // {a:'b',c:'d'}, 默认参数为 location.search\n\nquerystring.stringify({a:'b',c:'d'}) // 'a=b&c=d'，注意不支持复杂嵌套的结构\n```\n" }, { "path": "docs/zh-CN/tools/string.md", "content": "---\ntitle: Vue string 工具函数\n---\n\n# string 处理工具\n\n``` js\nimport { trim } from 'vux'\n\ntrim(' 1024 ') // 1024\n```\n" }, { "path": "docs/zh-CN/umd.md", "content": "---\r\nnav: zh-CN\r\n---\r\n\r\n## 组件 umd 文件\r\n\r\n

    \r\n 从`2.0`开始，推荐使用`webpack`来调用组件，因此不再在`repo`中保存`umd`文件，但提供了生成命令。\r\n
    \r\n 请更新 `NodeJS` 到版本 `7.6.0`及以上。\r\n
    \r\n 例子可查看：[https://github.com/airyland/vux/tree/v2/docs/examples](https://github.com/airyland/vux/tree/v2/docs/examples)\r\n

    \r\n\r\n ### 生成命令\r\n\r\n ``` bash\r\n git clone https://github.com/airyland/vux.git --depth=1 // or just update: git pull\r\n cd vux\r\n npm install\r\n npm run build-components\r\n ```\r\n\r\n 默认生成的语言是`zh-CN`，模块命名空间为`vux`，如`vuxGroup`，`vuxCell`，你可以在命令行中配置。\r\n\r\n ```\r\n npm run build-components -- --locale='en' --namespace='X'\r\n ```\r\n\r\n ### 目录结构\r\n\r\n 生成的文件夹结构如：\r\n\r\n

    \r\n 出于目录结构一致性考虑，即使是子组件也是一个文件夹，并且会有一个空的`index.min.css`样式文件。\r\n

    \r\n\r\n ```\r\n |- dist/\r\n |- vux.min.js ------------ 所有组件打包，仅用于测试，不推荐在生产环境使用\r\n |- vux.min.css ----------- 所有组件样式打包，同样仅用于测试\r\n |- components\r\n |- actionsheet\r\n |- index.min.js -------- 组件js代码\r\n |- index.min.css ------- 组件css代码\r\n ```\r\n\r\n

    \r\n vux.min.js 包括了所有的组件、插件及默认地址库，都挂载在全局变量vux上。当然为了使用方便同样直接挂载到了`window`上。\r\n
    \r\n 组件调用举例: `vuxCell`\r\n
    \r\n 插件调用举例：`vuxAlertPlugin`\r\n
    \r\n 默认地址库调用：`vuxChinaAddressData`\r\n

    \r\n\r\n ### 组件使用\r\n\r\n ``` html\r\n \r\n \r\n \r\n \r\n scripts\r\n \r\n \r\n \r\n \r\n
    \r\n \r\n \r\n \r\n
    \r\n\r\n \r\n \r\n\r\n \r\n \r\n \r\n ```\r\n### 插件使用\r\n\r\n\r\n``` html\r\n\r\n\r\n\r\n \r\n \r\n scripts\r\n \r\n \r\n \r\n\r\n\r\n
    \r\n
    \r\n\r\n \r\n\r\n \r\n\r\n\r\n```\r\n\r\n### 生成css工具样式\r\n\r\n包括`1px`解决方案，构建文件位于`dist/styles/*.css`,构建方式：\r\n\r\n``` bash\r\nnpm run build-styles\r\n```\r\n\r\n

    为了使用方便，可以使用`npm run xbuild`来执行`build-components` 及 `build-styles`

    " }, { "path": "docs/zh-CN/upgrade-to-2.md", "content": "---\nnav: zh-CN\n---\n\n### Vue@2.x 主要变更\n\n参考[Vue官方文档](https://cn.vuejs.org/v2/guide/migration.html)进行迁移, 这也是Vux组件的代码更新部分，主要包括：\n\n- `:value.sync` 已经废弃\n- `broadcast` 方法已经废弃\n- `@click` 需要更改为 `@click.native`\n- `v-for`的`(index, item)` => `(item, index)`\n\n### vue-router 更新\n\n配合vue2, `vue-router`同样需要更新到2.0版本以上\n\n原来的路由配置修改为：\n\n``` js\n\nconst routes = [{\n\tpath: '/vux/2.0',\n\tcomponent: Vux2Demo\n}]\n\nconst router = new VueRouter({\n routes\n})\n\n```\n\n原来的路由挂载修改为：\n\n``` js\nnew Vue({\n router,\n render: h => h(App)\n}).$mount('#app')\n```\n\n`go` 已经不是过去的 `go`了，要用`push`方法来跳转\n\n``` js\nthis.$router.go('/somewhere')\n```\n\n`v-link`也废弃了，使用`router-link`组件来代替\n\n其他请参考官方升级文档: [https://cn.vuejs.org/v2/guide/migration-vue-router.html](https://cn.vuejs.org/v2/guide/migration-vue-router.html)\n\n\n### 不再生成`umd`文件\n\n但是你可以使用`npm run build-components`来生成，请参考文档首页。\n\n### 双向绑定修改为 `v-model`\n\n所有相关Vux调用的 `:value.sync`都需要更改成 `v-model`\n\n``` js\n// 0.x\n\n// 2.x\n\n```\n\n### 使用 vux-loader\n\n原来你可能在webpack中做了这样的配置以正确编译vux的js源码：\n\n``` js\n{\n test: /vux.src.*?js$/,\n loader: 'babel'\n}\n```\n\n或者你也可能使用了低版本`vux-loader`的`getBabelLoader`方法。\n\n现在你可以直接删除这一句了，直接使用vux-loader。\n\n在`webpack.base.conf.js`中这样配置：\n\n``` js\nconst vuxLoader = require('vux-loader')\nmodule.exports = vuxLoader.merge(webpackConfig, {\n options: {},\n plugins: [\n {\n name: 'vux-ui'\n }\n\t]\n})\n```\n\n### 引入方式变更\n\n原来你可能是单个组件引入，现在在`vux-loader`的支持下你可以直接这样写：\n\n``` js\nimport { Group, Cell } from 'vux'\n```\n\n\n### 组件名字变更\n\n

    \n 为什么不参照其他组件库全部加上`X`前缀，主要是因为觉得总要写个`X`相当不顺手。\n

    \n\n因Vue2.0限制组件名不能与原有的html5标签一样，因此部分组件进行了重命名，加上 `x-`前缀，所有需要加前缀的组件如下：\n\n- `Progress` => `XProgress`\n- `Switch` => `XSwitch`\n- `Dialog` => `XDialog`\n- `Address` => `XAddress`\n- `Circle` => `XCircle`\n- `XButton`\n- `XImg`\n- `XInput`\n- `XTextarea`\n- `XHeader`\n\n### 各个组件变更：\n\n#### Swiper 引入路径变化\n\n目录结构变化，与其他有子组件的统一，导致引入方式变化：\n\n``` js\n// 0.x\nimport Swiper from 'vux/src/components/swiper'\nimport SwiperItem from 'vux/src/components/swiper-item'\n// 2.0\nimport Swiper from 'vux/src/components/swiper/swiper'\nimport SwiperItem from 'vux/src/components/swiper/swiper-item'\n// 或者\nimport { Swiper, SwiperItem } from 'vux/src/components/swiper' // with vux-loader\n```\n\n#### ColorPicker 废弃\n\n

    \n `2.0.0`可用用，但是后面不再维护。\n

    \n\n这个组件可以由`cell`配合`slot`扩展出来，而且更灵活。没有做过统计，但是感觉使用人数应该挺少。\n\n#### Countdown 废弃\n\n

    \n `2.0.0`可用，但是后面不再维护。\n

    \n\n功能薄弱，比较鸡肋。\n\n#### Scroller reset方法更新\n\n由于 Vue@2.x 的`broadcast`方法已经废弃，并且之前的设计也并不是很好，uuid的绑定也其实是没必要的。\n\n- reset方法变成使用ref的`reset()`方法\n- pullup reset 变成 ref 的 `donePullup()`方法\n- pullup disable 变成 ref 的 `disablePullup()`方法\n- pullup enable 变成 ref 的 `enablePullup()`方法\n- pulldown reset 变成 ref 的 `donePulldown()`方法\n- pullup和pulldown的status绑定变成`v-model=\"status\"`绑定，示例\n\n ``` js\n status: {\n pullupStatus: 'default',\n pulldownStatus: 'default'\n }\n ```\n\n详细参照Scroller文档进行更新\n\n#### 表单默认required为true\n\n保持和`html`规范一致, 影响的组件有 `XInput` `Checklist`\n\n#### Checklist 不显示错误提示\n\n考虑到错误样式目前并不优雅，而用户有自定义错误样式的需要，因此处理成emit一个错误事件+底部slot， 用户可自行处理。\n\n#### XInput 的valid获取\n\n由于Vue2的$ref不再是响应的，因此不能直接在模板中通过ref调用组件的valid值(会报undefined)，所以需要变成在提交时再进行ref来获取valid值。\n\n#### XAddress 默认地址数据更新\n\n目前引用方式：\n\n``` js\nimport { XAddress, ChinaAddressData } from 'vux'\n```\n\n如果你想继续使用旧版本数据\n\n``` js\nimport { XAddress, ChinaAddressV1Data } from 'vux'\n```\n\n按照[最新统计局数据](http://www.stats.gov.cn/tjsj/tjbz/xzqhdm/201608/t20160809_1386477.html)进行更新，部分区域已经不存在，部分id做了更新。因此请*谨慎*更新，评估后端数据存储设计和前端交互再进行更新，避免错误更新用户数据或者导致数据丢失。\n\n完整更新如下图:\n\n

    \n \"\"\n

    \n" }, { "path": "docs/zh-CN/vux-loader/about.md", "content": "---\ntitle: vux-loader 介绍\n---\n\n\n# vux-loader 介绍\n\n

    \n \n \"\"\n \n \n \"\"\n \n

    \n\n`vux-loader`工具的作用是对`.vue`代码进行预处理，不限于 vux 组件库。\n\n它是针对`webpack+vue-loader`项目的工程化工具，简化了webpack插件和loader的使用和编写，支持在vue-loader处理之前进行预处理，同时内置对vux组件专用的配置和优化插件。\n\n当然除了.vue文件外，你还可以对js文件进行预处理。说好的处理.vue文件，为什么连`js`文件也不放过呢？因为只有处理js才能实现理想工程化。举个例子，如果用户需要在`main.js`中调用vux的plugin，他需要这样做：\n\n``` js\nimport AlertPlugin from 'vux/src/plugins/Alert'\nimport ToastPlugin from 'vux/src/plugins/Toast'\n```\n虽然路径不长，但是看着相当不和谐，为了简化这个操作vux提供了更简洁的写法：\n\n``` js\nimport { AlertPlugin, ToastPlugin } from 'vux'\n```\n\n这个操作即是通过`js-parser`插件解析main.js里的`import`语法来实现的，最终进入`babel`处理的代码和上面单独引入一致。\n\n这个工具也许会帮你进一步打开`Vue`项目工程化的思路。\n\n::: tip\n作为通用工具，即使你没有使用 `VUX`，依然可以使用它来进行各种代码处理。\n:::\n\n## 为什么不使用 babel-plugin-import\n\n* VUX 希望使用源码分发\n* VUX 希望无侵入地解决一系列的工程问题，不需要用户手动配置 webpack\n* VUX 希望能统计(匿名)使用情况\n\n而上面这些单纯使用 `babel-plugin-import` 无法做到，所以造了个轮子。\n" }, { "path": "docs/zh-CN/vux-loader/how-vux-loader-works.md", "content": "---\ntitle: vux-loader 实现方式\n---\n\n# vux-loader 实现方式\n\n说明一下`vux-loader`是如何和`vue-loader`搞基配合的。\n\n如果你看过`webpack`loader的介绍，理论上说如果需要自己手动先处理代码再传入`vue-loader`,你只需要这样对loader做配置: `vue-loader!my-loader`。但是如果你试过，就知道这个目前行不通。`vue-loader`不会接收上一个loader的source进行处理，因为.vue文件的特殊性，它直接生成了loader string进入下一个处理，处理后的结果大概是这样的：\n\n``` js\n/* styles */\nrequire(\"!!vue-style-loader!css-loader!vue-loader/lib/style-rewriter?id=data-v-20d7ba9a!vue-loader/lib/selector?type=styles&index=0!./index.vue\")\n\n/* script */\n__vue_exports__ = require(\"!!babel-loader!vue-loader/lib/selector?type=script&index=0!./index.vue\")\n\n/* template */\nvar __vue_template__ = require(\"!!vue-loader/lib/template-compiler?id=data-v-20d7ba9a!vue-loader/lib/selector?type=template&index=0!./index.vue\")\n```\n\n那么vue-loader提供了自定义loader string的选项，直接配置可否呢，[#531](https://github.com/vuejs/vue-loader/issues/531)，直接配置会破坏原来的loader参数，导致不能Live reload。\n\n那么最终能想到的就是直接修改`vue-loader`生成的代码，这样既不会影响`vue-loader`原来的逻辑，也能自由控制。\n\n最终实现方式是前置`vux-loader`即：`vux-loader!vue-loader`，vux-loader将vue-loader生成的代码二次处理，分割loader string并(强行)插入vux的 template-loader, style-loader, script-loader，那么你就能理解vux-loader的配置方式了，在3大基本loader里获取到vux-loader的插件配置列表逐个做处理就行了。\n\n上面的代码强行处理后是这样的：\n\n``` js\n/* styles */\nrequire(\"!!vue-style-loader!css-loader!vue-loader/lib/style-rewriter?id=data-v-20d7ba9a!./../../../../vux-loader/src/style-loader.js!vue-loader/lib/selector?type=styles&index=0!./index.vue\")\n\n/* script */\n__vue_exports__ = require(\"!!babel-loader!vue-loader/lib/selector?type=script&index=0!./../../../../vux-loader/src/script-loader.js!./index.vue\")\n\n/* template */\nvar __vue_template__ = require(\"!!vue-loader/lib/template-compiler?id=data-v-20d7ba9a!./../../../../vux-loader/src/template-loader.js!vue-loader/lib/selector?type=template&index=0!./index.vue\")\n```\n\n原理就是这么简单（但是处理时还是遇到一些问题），为了方便使用，编写了常用的一些插件。\n\n至于`js-parser`就只是在`babel-loader`前加上了`vux-loader`的`js-loader`。\n\n而所有的loader, plugins设置都是在`vux-loader`的`merge`方法里来完成。" }, { "path": "docs/zh-CN/vux-loader/install.md", "content": "---\ntitle: vux-loader 使用\n---\n\n# vux-loader 使用\n\n## 安装\n\n``` bash\nnpm install vux-loader --save-dev\n```\n\n## 使用\n\n为了降低使用成本及不侵入原来配置，只需要调用`merge`方法对原来`webpack`配置进行操作：\n\n``` js\nconst webpackConfig = {} // 原来的 webpack.base.js 配置\n\nconst vuxLoader = require('vux-loader')\n\nmodule.exports = vuxLoader.merge(webpackConfig, {\n options: {},\n plugins: [{\n name: 'vux-ui'\n }]\n})\n```\n\n::: warning\n更新配置后需要重新运行 `npm run dev` 命令。\n:::\n\n## Options\n\n- `env` 非必选，定义当前环境变量，只在 vux-loader 里使用，用来判断哪些插件需要被执行(如果plugin有定义envs的话)，目的是实现一份配置多个环境使用。\n\n\n## Plugins\n\n插件为一个数组列表，根据需要可以添加你需要的插件，插件名为必须，有些组件不需要额外配置选项。\n\n公用参数为:\n\n- `name` `必须`，插件名字\n- `envs` `非必须`，数组，当前插件在哪些环境变量里执行，不定义则默认执行\n\n下面的插件配置代码将省略 `plugins:[]`的书写。\n\n::: tip\n当使用默认配置时，可以使用简写\n\n``` js\nplugins: ['vux-ui']\n```\n\n等同于\n\n``` js\nplugins: [{\n name: 'vux-ui'\n}]\n```\n:::" }, { "path": "docs/zh-CN/vux-loader/plugins.md", "content": "---\ntitle: vux-loader 插件列表\n---\n\n# vux-loader 插件列表\n\n\n## script-parser\n\n> .vue 文件的 script 部分代码处理\n\n``` js\n[{\n name: 'script-parser',\n fn: function (source) {\n return source.replace('VARIABLE', 'v2')\n }\n}]\n```\n\n## style-parser\n\n> `` 代码处理\n\n``` js\n[{\n name: 'style-parser',\n fn: function (source) {\n return source.replace('black', 'white')\n }\n}]\n```\n## template-parser\n\n> template代码替换处理\n\n> 适用于对``模板代码做自定义处理\n\n\n * name 插件名字， `template-parser`\n * replaceList 非必须，正则匹配列表，将直接调用 `replace` 方法进行替换\n * fn 非必须，相比params更灵活的方法，可以对字符串进行处理后返回\n\n插件配置：\n\n``` js\n[\n name: \"template-parser\",\n replaceList: [{\n test: /DeathToPM/g,\n replaceString: '微博-随时随地发现新鲜事'\n }, {\n test: /呵呵我们压根没有底线/g,\n replaceString: '我是有底线的'\n }],\n fn: function (templateSource) {\n return templateSource.replace('智障', '机智')\n }\n]\n```\n\n#### js-parser\n\n> 项目里js文件处理，在babel-loader前进行处理\n\n``` js\n[{\n name: 'js-parser',\n fn: function (source) {\n return source.replace('black', 'white')\n }\n}]\n```\n\n## template-feature-switch\n\n实现根据变量切换template代码\n\n参数：\n\n- `features`，变量列表，值只能为true或者false\n\n``` js\n{\n name: 'template-feature-switch',\n features: {\n feature1: true,\n feature2: false\n }\n}\n```\n\n``` html\n\n```\n那么当 feature1 为 true时，将输出 `AWESOME FEATURE 1 is ON`, 反之则输出 `AWESOME FEATURE 1 is OFF`。注意`on`标签内不限定内容，可以为任何标签代码块，但`避免在on off 里面再嵌套 on off`\n\n\n## vux-ui\n\n

    \n vux组件的配套工具，如果没有使用vux, 不需要添加。\n

    \n\n如果配合`vux`使用，需要手动启用。默认不需要设置选项。\n\n该插件做了以下处理：\n\n- 配置`babel`编译 vux 的js源码\n- 修改vue-loader为 `vux-loader!vue-loader`\n- `import`组件调用解析为单组件引入\n\n```\n{\n name: 'vux-ui'\n}\n```\n\n那么你就可以很方便地引入组件了：\n\n```\n// 0.x\nimport Group from 'vux/src/components/group'\nimport Cell from 'vux/src/components/cell'\n\n// 2.x\nimport { Group, Cell } from 'vux'\n```\n\n## i18n\n\n1. 如果你只是调用中文语言的vux组件，那么你不需要做任何配置。\n\n2. 如果你需要调用英文语言的vux组件，需要配置语言\n\n ``` js\n {\n name: 'i18n',\n vuxStaticReplace: true,\n vuxLocale: 'en'\n }\n ```\n3. 如果你想和demo站点一样可以写`i18n`block，并且需要动态切换语言，那么需要配置插件抽取i18n的内容，并设置非静态替换\n\n ``` js\n {\n name: 'i18n',\n vuxStaticReplace: false,\n staticReplace: false,\n extractToFiles: 'src/locales/components.yml',\n localeList: ['en', 'zh-CN']\n }\n ```\n\n然后你就可以引用`vuex-i18n`插件实现多语言切换了。\n\n参考 [main.js](https://github.com/airyland/vux/blob/v2/src/main.js#L84-L96) 及 [vuex-i18n 文档](https://www.npmjs.com/package/vuex-i18n)(仅当参考，你也可以使用其他i18n插件)。\n\n## less-theme\n\n

    \n注意，path所在文件必须是简单的less变量对，不能import其他文件或者引入变量。\n

    \n\n> less 变量设置和替换\n\n> 适用于全局变量替换, 方便切换主题\n> 这意味着，你不再需要为每个页面引入全局的less文件了，你只需要设置lang为less就可以直接使用变量了\n\n```\n\n```\n\n插件配置：\n\n``` js\n{\n name: 'less-theme',\n path: 'src/styles/theme.less'\n}\n```\n\n## duplicate-style\n\n> css 重复代码清除\n\n

    \n 建议使用vux组件的用户使用，因为vux直接引用less，最终构建的css文件确实会有冗余。\n

    \n\n\n> 在webpack 构建完成后对生成的css文件使用cssnano进行重复样式清除。建议只在production环境下开启，因为dev环境没有必要。\n\n``` js\n{\n name: 'duplicate-style',\n events: {\n done: function () {\n console.log('done!')\n }\n }\n}\n```\n\n## html-build-callback\n\n>html文件处理事件回调\n\n> 适用于在写入html(一般为index.html)文件前进行内容修改，比如替换特定内容\n> 比如写入js配置变量，改变cdn域名，将manifest文件直接写入html以减少请求等\n\n``` js\n{\n name: 'html-build-callback',\n events: {\n 'after-html-processing': function (data, cb) {\n data.html += 'magic footer'\n cb(null, data)\n }\n }\n}\n```\n\n可用事件请参考 [html-webpack-plugin](https://www.npmjs.com/package/html-webpack-plugin)\n\n\n## build-done-callback\n\n> 构建完成事件回调\n> 本质上是在webpack plugin的 done 事件后触发\n\n``` js\n{\n name: 'build-done-callback',\n fn: function () {\n console.log('done!')\n }\n}\n```" }, { "path": "docs/zh-CN/vux-loader.md", "content": "---\nnav: zh-CN\n---\n\n

    vux!vue

    \n\n

    \n \n \"\"\n \n \n \"\"\n \n

    \n\n\n### 介绍\n\n`vux-loader`工具的作用是对`.vue`代码进行预处理，不限于 vux 组件库。\n\n它是针对`webpack+vue-loader`项目的工程化工具，简化了webpack插件和loader的使用和编写，支持在vue-loader处理之前进行预处理，同时内置对vux组件专用的配置和优化插件。\n\n当然除了.vue文件外，你还可以对js文件进行预处理。说好的处理.vue文件，为什么连`js`文件也不放过呢？因为只有处理js才能实现理想工程化。举个例子，如果用户需要在`main.js`中调用vux的plugin，他需要这样做：\n\n``` js\nimport AlertPlugin from 'vux/src/plugins/Alert'\nimport ToastPlugin from 'vux/src/plugins/Toast'\n```\n虽然路径不长，但是看着相当不和谐，为了简化这个操作vux提供了更简洁的写法：\n\n``` js\nimport { AlertPlugin, ToastPlugin } from 'vux'\n```\n\n这个操作即是通过`js-parser`插件解析main.js里的`import`语法来实现的，最终进入babel的代码和上面单独引入一致。\n\n这个工具也许会帮你进一步打开`Vue`项目工程化的思路。\n\n

    \n 作为通用工具，即使你没有使用Vux，依然可以使用它来进行各种代码处理。\n
    \n 目前支持 vue-loader@>9.x, 低版本没有具体测试。\n
    \n `vux!vue`的loader写法只兼容webpack@1.x，为了兼容webpack@2.x，处理后的loader配置是`vux-loader!vue-loader`\n

    \n\n### 实现方式\n\n说明一下`vux-loader`是如何和`vue-loader`搞基配合的，vue-loader的issue里不少同学遇到预处理.vue的问题。\n\n如果你看过`webpack`loader的介绍，理论上说如果需要自己手动先处理代码再传入`vue-loader`,你只需要这样对loader做配置: `vue-loader!my-loader`。但是如果你试过，就知道这个目前行不通。`vue-loader`不会接收上一个loader的source进行处理，因为.vue文件的特殊性，它直接生成了loader string进入下一个处理，处理后的结果大概是这样的：\n\n``` js\n/* styles */\nrequire(\"!!vue-style-loader!css-loader!vue-loader/lib/style-rewriter?id=data-v-20d7ba9a!vue-loader/lib/selector?type=styles&index=0!./index.vue\")\n\n/* script */\n__vue_exports__ = require(\"!!babel-loader!vue-loader/lib/selector?type=script&index=0!./index.vue\")\n\n/* template */\nvar __vue_template__ = require(\"!!vue-loader/lib/template-compiler?id=data-v-20d7ba9a!vue-loader/lib/selector?type=template&index=0!./index.vue\")\n```\n\n那么vue-loader提供了自定义loader string的选项，直接配置可否呢，[#531](https://github.com/vuejs/vue-loader/issues/531)，直接配置会破坏原来的loader参数，导致不能Live reload。\n\n那么最终能想到的就是直接修改`vue-loader`生成的代码，这样既不会影响`vue-loader`原来的逻辑，也能自由控制。\n\n最终实现方式是前置`vux-loader`即：`vux-loader!vue-loader`，vux-loader将vue-loader生成的代码二次处理，分割loader string并(强行)插入vux的 template-loader, style-loader, script-loader，那么你就能理解vux-loader的配置方式了，在3大基本loader里获取到vux-loader的插件配置列表逐个做处理就行了。\n\n上面的代码强行处理后是这样的：\n\n``` js\n/* styles */\nrequire(\"!!vue-style-loader!css-loader!vue-loader/lib/style-rewriter?id=data-v-20d7ba9a!./../../../../vux-loader/src/style-loader.js!vue-loader/lib/selector?type=styles&index=0!./index.vue\")\n\n/* script */\n__vue_exports__ = require(\"!!babel-loader!vue-loader/lib/selector?type=script&index=0!./../../../../vux-loader/src/script-loader.js!./index.vue\")\n\n/* template */\nvar __vue_template__ = require(\"!!vue-loader/lib/template-compiler?id=data-v-20d7ba9a!./../../../../vux-loader/src/template-loader.js!vue-loader/lib/selector?type=template&index=0!./index.vue\")\n```\n\n原理就是这么简单（但是处理时还是遇到一些问题），为了方便使用，编写了常用的一些插件。\n\n至于`js-parser`就只是在`babel-loader`前加上了`vux-loader`的`js-loader`。\n\n而所有的loader, plugins设置都是在`vux-loader`的`merge`方法里来完成。\n\n### 实际使用场景\n\n我们可以使用`vux-loader`做一些很有意思的事。\n比如 [#542](https://github.com/vuejs/vue-loader/issues/542) 提到的根据当前feature为判断要输出哪一部分代码，现在已经直接支持，请看 `template-feature-switch`部分。\n\n对于公用组件而言，完全可以实现构建时进行组件瘦身，只保留使用到的代码。\n\n当然如果你愿意，你完全可以自己实现一门语言。\n\n## 安装\n\n``` bash\nnpm install vux-loader --save-dev\n```\n\n## 使用\n\n为了减少使用成本，只需要调用`merge`方法对原来`webpack`配置进行操作：\n\n``` js\nconst webpackConfig = {} // 原来的webpack配置\n\nconst vuxLoader = require('vux-loader')\n\nmodule.exports = vuxLoader.merge(webpackConfig, {\n options: {},\n plugins: [{\n name: 'vux-ui'\n }]\n})\n```\n\n

    \n 更新配置后需要重启npm run dev命令\n

    \n\n### Options\n\n- `env` 非必选，定义当前环境变量，只在vux-loader里使用，用来判断哪些插件需要被执行(如果plugin有定义envs的话)，目的是实现一份配置多个环境使用。\n\n\n### Plugins\n\n插件为一个数组列表，根据需要可以添加你需要的插件，插件名为必须，有些组件不需要额外配置选项。\n\n公用参数为:\n\n- `name` `必须`，插件名字\n- `envs` `非必须`，数组，当前插件在哪些环境变量里执行，不定义则默认执行\n\n下面的插件配置代码将省略 `plugins:[]`的书写。\n\n#### script-parser\n\n> script代码替换处理\n\n``` js\n[{\n name: 'script-parser',\n fn: function (source) {\n return source.replace('VARIABLE', 'v2')\n }\n}]\n```\n\n#### style-parser\n\n> style代码替换处理\n\n``` js\n[{\n name: 'style-parser',\n fn: function (source) {\n return source.replace('black', 'white')\n }\n}]\n```\n#### template-parser\n\n> template代码替换处理\n\n> 适用于对``模板代码做自定义处理\n> 适用于某些更改不频繁但非服务端配置的文字，可能调用多次，也可能手动更改或者批量替换相对麻烦\n>\n> 同样你也可以用来从接口获取最新配置替换特定的占位字符\n>\n> 当然也适用于在源码中对`pm`进行吐槽(千万要记得production环境要有配置，否则可能会上新闻。)\n\n * name 插件名字， `template-parser`\n * replaceList 非必须，正则匹配列表，将直接调用 `replace` 方法进行替换\n * fn 非必须，相比params更灵活的方法，可以对字符串进行处理后返回\n\n插件配置：\n\n``` js\n[\n name: \"template-parser\",\n replaceList: [{\n test: /DeathToPM/g,\n replaceString: '微博-随时随地发现新鲜事'\n }, {\n test: /呵呵我们压根没有底线/g,\n replaceString: '我是有底线的'\n }],\n fn: function (templateSource) {\n return templateSource.replace('智障', '机智')\n }\n]\n```\n\n#### js-parser\n\n> 项目里js文件处理，在babel-loader前进行处理\n\n``` js\n[{\n name: 'js-parser',\n fn: function (source) {\n return source.replace('black', 'white')\n }\n}]\n```\n\n#### template-feature-switch\n\n实现根据变量切换template代码\n\n参数：\n\n- `features`，变量列表，值只能为true或者false\n\n``` js\n{\n name: 'template-feature-switch',\n features: {\n feature1: true,\n feature2: false\n }\n}\n```\n\n``` html\n\n```\n那么当 feature1 为 true时，将输出 `AWESOME FEATURE 1 is ON`, 反之则输出 `AWESOME FEATURE 1 is OFF`。注意`on`标签内不限定内容，可以为任何标签代码块，但`避免在on off 里面再嵌套 on off`\n\n\n#### vux-ui\n\n

    \n vux组件的配套工具，如果没有使用vux, 不需要添加。\n

    \n\n如果配合`vux`使用，需要手动启用。默认不需要设置选项。\n\n该插件做了以下处理：\n\n- 配置`babel`编译 vux 的js源码\n- 修改vue-loader为 `vux-loader!vue-loader`\n- `import`组件调用解析为单组件引入\n\n```\n{\n name: 'vux-ui'\n}\n```\n\n那么你就可以很方便地引入组件了：\n\n```\n// 0.x\nimport Group from 'vux/src/components/group'\nimport Cell from 'vux/src/components/cell'\n\n// 2.x\nimport { Group, Cell } from 'vux'\n```\n\n#### i18n\n\n

    \n请使用正确的 yml 格式。冒号和值之间是有一个空格的，错误的格式将无法生效。\n

    \n\n``` yml\non-show:\n en: emits when popup shows\n zh-CN: 弹窗显示时触发\n```\n\n\n1. 如果你只是调用中文语言的vux组件，那么你不需要做任何配置。\n\n2. 如果你需要调用英文语言的vux组件，需要配置语言\n\n ``` js\n {\n name: 'i18n',\n vuxStaticReplace: true,\n vuxLocale: 'en'\n }\n ```\n3. 如果你想和demo站点一样可以写`i18n`block，并且需要动态切换语言，那么需要配置插件抽取i18n的内容，并设置非静态替换\n\n ``` js\n {\n name: 'i18n',\n vuxStaticReplace: false,\n staticReplace: false,\n extractToFiles: 'src/locales/components.yml',\n localeList: ['en', 'zh-CN']\n }\n ```\n\n然后你就可以引用`vuex-i18n`插件实现多语言切换了。\n\n参考 [main.js](https://github.com/airyland/vux/blob/254574ef30a8c4d341feb7d2ff8245792657bda2/src/main.js#L84-L96) 及 [vuex-i18n 文档](https://www.npmjs.com/package/vuex-i18n)(仅当参考，你也可以使用其他i18n插件)。\n\n#### less-theme\n\n

    \n注意，path所在文件必须是简单的less变量对，不能import其他文件或者引入变量。\n

    \n\n> less 变量设置和替换\n\n> 适用于全局变量替换, 方便切换主题\n> 这意味着，你不再需要为每个页面引入全局的less文件了，你只需要设置lang为less就可以直接使用变量了\n\n```\n\n```\n\n插件配置：\n\n``` js\n{\n name: 'less-theme',\n path: 'src/styles/theme.less'\n}\n```\n\n#### duplicate-style\n\n> css 重复代码清除\n\n

    \n 建议使用vux组件的用户使用，因为vux直接引用less，最终构建的css文件确实会有冗余。\n

    \n\n\n> 在webpack 构建完成后对生成的css文件使用cssnano进行重复样式清除。建议只在production环境下开启，因为dev环境没有必要。\n\n``` js\n{\n name: 'duplicate-style',\n events: {\n done: function () {\n console.log('done!')\n }\n }\n}\n```\n\n#### html-build-callback\n\n>html文件处理事件回调\n\n> 适用于在写入html(一般为index.html)文件前进行内容修改，比如替换特定内容\n> 比如写入js配置变量，改变cdn域名，将manifest文件直接写入html以减少请求等\n\n``` js\n{\n name: 'html-build-callback',\n events: {\n 'after-html-processing': function (data, cb) {\n data.html += 'magic footer'\n cb(null, data)\n }\n }\n}\n```\n\n可用事件请参考 [html-webpack-plugin](https://www.npmjs.com/package/html-webpack-plugin)\n\n\n#### build-done-callback\n\n> 构建完成事件回调\n> 本质上是在webpack plugin的 done 事件后触发\n\n``` js\n{\n name: 'build-done-callback',\n fn: function () {\n console.log('done!')\n }\n}\n```\n\n### 使用案例\n\n\n#### 统一引入less(sass)变量\n\n如果你翻看`vue-loader`的issue, 就会发现不少同学在说，为什么sass, less 变量不能全局使用，需要在每个.vue组件里引入，这个很重复，有没有办法解决。目前除了在webpack里定义路径`alias`外没有其他方法。但是有了`vux-loader`，你可以用`style-parser`在每个`.vue`文件的style前面加上变量的引入了，只要一句代码。\n\n```\n{\n name: 'style-parser',\n fn: function (source) {\n return \"@import '../styles/variable.less'\\n\" + source // 你可以根据this.resourcePath 来确定是否要引入以及引入的相对路径\n }\n}\n```\n\n#### 减少重复代码\n\n`vux`的组件有几十个，同样demo也有几十个，因为webpack并不支持require变量，那么在main里中实现每个组件异步加载都需要这样：\n\n``` js\nconst routes = [\n {\n path: '/component/actionsheet',\n component: function (resolve) {\n require(['./demos/Actionsheet'], resove)\n }\n }\n]\n```\n作为懒人，写几十次这样的代码是一件比较烦人的事，作为热爱地球的人，这样也很不环保，但是有了`vux-loader`, 我们可以这样：\n\n``` js\nconst routes = []\n```\n\n然后在`js-parser`里获取列表数组直接替换， 并且可以调用webpack的`this.addDependency`添加依赖实现修改列表时自动`reload`。从此添加删除组件只要加上或者删除名字就可以了，真是懒机智。\n\n``` js\n {\n name: 'js-parser',\n test: /main\\.js/,\n fn: function (source) {\n this.addDependency(demoPath)\n let list = fs.readFileSync(demoPath, 'utf-8')\n list = JSON.parse(list)\n let str = []\n list.forEach(one => {\n str.push(`{\npath: '/component/${toDash(one)}',\ncomponent: function (resolve) {\nrequire(['./demos/${one}.vue'], resolve)\n}\n}`)\n })\n\n str = `[${str.join(',\\n')}]`\n source = source.replace('const routes = []', 'const routes = ' + str)\n return source\n }\n}\n```\n\n#### 实现import语法转换\n\nvux是没有main入口文件的，因此需要把import语句转换成单个组件引入。但是因为对语法树分析比较烦，能用正则替换的当然就是用正则替换，简单粗暴实用。具体可以看源码。\n\n#### 开源组件多语言支持\n\n如果以js方式分发，一般默认一个语言，用户可以加上另外的语言包，但是代码里必不可少存在相应的转换函数，对于只需要单语言的人来是个浪费和繁琐。要么所有一起打包，这个也极浪费。要么一个一个打包，这样又失去了动态多语言支持。\n\n于是`vux`在`vux-loader`的支持下实现了`使用时构建`，无论是静态输出和动态支持。\n\n### Bug 反馈 && 功能建议\n\n请到[https://github.com/airyland/vux-loader/issues](https://github.com/airyland/vux-loader/issues)\n\n### Todo\n\n- [ ] 支持各个插件的异步返回形式\n- [ ] 在插件中提供webpack的 this 参数\n" }, { "path": "docs/zh-CN/wechat/other.md", "content": "---\ntitle: 其他问题\n---\n\n## 如何实现`weui.io`或者星巴克页面的设置顶部bar和页面下拉背景色\n\n微信对于部分合作方开放了`jssdk`的`setBounceBackground`及`setNavigationBarColor`权限，目测暂无申请入口。" }, { "path": "docs/zh-CN/wechat/vue-wechat-jssdk.md", "content": "---\ntitle: Vue 应用中使用微信 jssdk\n---\n\n# Vue 应用中使用微信 jssdk\n\n::: warning\n分享接口只有认证公众号才能使用，域名必须备案且在微信后台设置。\n\n先确认已经满足使用`jssdk`的要求再进行开发。\n:::\n\n`WechatPlugin` 插件提供了`commonJS`的引入方式，因此你不需要在 `index.html` 引入文件。\n\n## 版本要求\n\n`WechatPlugin`在`vux@^2.1.0-rc.19`开始支持\n\n## 引入\n\n在 `main.js` 中全局引入：\n\n``` js\nimport { WechatPlugin } from 'vux'\nVue.use(WechatPlugin)\n\nconsole.log(Vue.wechat) // 可以直接访问 wx 对象。\n```\n\n## 组件外使用\n\n考虑到你需要在引入插件后调用`config`方法进行配置，你可以通过 `Vue.wechat` 在组件外部访问`wx`对象。 \n\n`jssdk`需要请求签名配置接口，你可以直接使用 VUX 基于 `Axios` 封装的 `AjaxPlugin`。\n\n``` js\nimport { WechatPlugin, AjaxPlugin } from 'vux'\nVue.use(WechatPlugin)\nVue.use(AjaxPlugin)\n\nVue.http.get('/api', ({data}) => {\n Vue.wechat.config(data.data)\n})\n```\n\n## 组件中使用\n\n那么之后任何组件中都可以通过 `this.$wechat` 访问到 `wx` 对象。\n\n``` js\nexport default {\n created () {\n this.$wechat.onMenuShareTimeline({\n title: 'hello VUX'\n })\n }\n}\n```" }, { "path": "docs/zh-CN/wechat/wechat-document-title.md", "content": "---\ntitle: 微信 Vue 单页面应用设置标题\n---\n\n# 微信 Vue 单页面应用设置标题\n\n在微信`iOS` `webview`更新到`WKWebView`之前我们可以通过加载一个 `iframe` 来实现单页面应用`title`更改。但是17年初更新到 `WKWebView` 后该方法也失效。\n\n目前该问题已经解决，在微信 iOS 客户端 `6.3.5` 之后的版本都可以通过 `document.title` 设置标题了。" }, { "path": "index.html", "content": "\n\n \n \n \n \n \n vux-ui\n \n \n
    \n \n <%=htmlWebpackPlugin.files.webpackManifest%>\n \n \n \n \n\n" }, { "path": "index.js", "content": "// THIS FILE IS ONLY FOR IDE ENTRY CHECKING NOT FOR REAL USAGE\n\nconsole.warn('VUX: 如果你看到这一行，说明 vux-loader 配置有问题或者代码书写规范的原因导致无法解析成按需引入组件，会导致打包体积过大。请升级到最新版本 vux-loader，建议开启 eslint(standard)。')\n\nimport Actionsheet from './src/components/actionsheet/index.vue'\nimport Agree from './src/components/agree/index.vue'\nimport AjaxPlugin from './src/plugins/ajax/index.js'\nimport Alert from './src/components/alert/index.vue'\nimport AlertModule from './src/plugins/alert/module'\nimport AlertPlugin from './src/plugins/alert/index.js'\nimport AppPlugin from './src/plugins/app/index.js'\nimport Array2stringFilter from './src/filters/array2String.js'\nimport Badge from './src/components/badge/index.vue'\nimport base64 from './src/tools/base64/index.js'\nimport Blur from './src/components/blur/index.vue'\nimport Box from './src/components/box/index.vue'\nimport BusPlugin from './src/plugins/bus/index.js'\nimport ButtonTab from './src/components/button-tab/button-tab.vue'\nimport ButtonTabItem from './src/components/button-tab/button-tab-item.vue'\nimport Calendar from './src/components/calendar/index.vue'\nimport Card from './src/components/card/index.vue'\nimport Cell from './src/components/cell/index.vue'\nimport CellBox from './src/components/cell-box/index.vue'\nimport CellFormPreview from './src/components/cell-form-preview/index.vue'\nimport Checker from './src/components/checker/checker.vue'\nimport CheckerItem from './src/components/checker/checker-item.vue'\nimport CheckIcon from './src/components/check-icon/index.vue'\nimport Checklist from './src/components/checklist/index.vue'\nimport ChinaAddressData from './src/datas/china_address.json'\nimport ChinaAddressV1Data from './src/datas/china_address_v1.json'\nimport ChinaAddressV2Data from './src/datas/china_address_v2.json'\nimport ChinaAddressV3Data from './src/datas/china_address_v3.json'\nimport ChinaAddressV4Data from './src/datas/china_address_v4.json'\nimport ChinamobileTool from './src/tools/validator/chinaMobile.js'\nimport ClickOutsideDirective from './src/directives/click-outside/index.js'\nimport Clocker from './src/components/clocker/index.vue'\nimport CloseDialogsPlugin from './src/plugins/close-dialogs/index.js'\nimport ColorPicker from './src/components/color-picker/index.vue'\nimport ConfigPlugin from './src/plugins/config/index.js'\nimport Confirm from './src/components/confirm/index.vue'\nimport ConfirmPlugin from './src/plugins/confirm/index.js'\nimport cookie from './src/tools/cookie/index.js'\nimport Countdown from './src/components/countdown/index.vue'\nimport Countup from './src/components/countup/index.vue'\nimport dateFormat from './src/tools/date/format.js'\nimport dateRange from './src/tools/date/range.js'\nimport Datetime from './src/components/datetime/index.vue'\nimport DatetimePlugin from './src/plugins/datetime/index.js'\nimport DatetimeRange from './src/components/datetime-range/index.vue'\nimport DatetimeView from './src/components/datetime-view/index.vue'\nimport debounce from './src/tools/debounce/index.js'\nimport Demobasic from './src/components/fullpage/DemoBasic.vue'\nimport Demoindex from './src/components/popover/DemoIndex.vue'\nimport DevicePlugin from './src/plugins/device/index.js'\nimport DevTip from './src/components/dev-tip/index.vue'\nimport Divider from './src/components/divider/index.vue'\nimport Drawer from './src/components/drawer/index.vue'\nimport Flexbox from './src/components/flexbox/flexbox.vue'\nimport FlexboxItem from './src/components/flexbox/flexbox-item.vue'\nimport Flow from './src/components/flow/flow.vue'\nimport FlowLine from './src/components/flow/flow-line.vue'\nimport FlowState from './src/components/flow/flow-state.vue'\nimport FormatTimeFilter from './src/filters/format-time.js'\nimport FormPreview from './src/components/form-preview/index.vue'\nimport FriendlyTimeFilter from './src/filters/friendly-time.js'\nimport Fullpage from './src/components/fullpage/index.vue'\nimport Grid from './src/components/grid/grid.vue'\nimport GridItem from './src/components/grid/grid-item.vue'\nimport Group from './src/components/group/index.vue'\nimport GroupTitle from './src/components/group-title/index.vue'\nimport Icon from './src/components/icon/index.vue'\nimport InlineCalendar from './src/components/inline-calendar/index.vue'\nimport InlineDesc from './src/components/inline-desc/index.vue'\nimport InlineLoading from './src/components/inline-loading/index.vue'\nimport InlineXNumber from './src/components/inline-x-number/index.vue'\nimport InlineXSwitch from './src/components/inline-x-switch/index.vue'\nimport InviewDirective from './src/directives/inview/index.js'\nimport Loading from './src/components/loading/index.vue'\nimport LoadingModule from './src/plugins/loading/module'\nimport LoadingPlugin from './src/plugins/loading/index.js'\nimport LoadMore from './src/components/load-more/index.vue'\nimport LocalePlugin from './src/plugins/locale/index.js'\nimport Marquee from './src/components/marquee/marquee.vue'\nimport MarqueeItem from './src/components/marquee/marquee-item.vue'\nimport Masker from './src/components/masker/index.vue'\nimport md5 from './src/tools/md5/index.js'\nimport Msg from './src/components/msg/index.vue'\nimport Name2valueFilter from './src/filters/name2value.js'\nimport numberComma from './src/tools/number/comma.js'\nimport numberPad from './src/tools/number/pad.js'\nimport numberRandom from './src/tools/number/random.js'\nimport numberRange from './src/tools/number/range.js'\nimport NumberRoller from './src/components/number-roller/index.vue'\nimport Panel from './src/components/panel/index.vue'\nimport Picker from './src/components/picker/index.vue'\nimport Popover from './src/components/popover/index.vue'\nimport Popup from './src/components/popup/index.vue'\nimport PopupHeader from './src/components/popup-header/index.vue'\nimport PopupPicker from './src/components/popup-picker/index.vue'\nimport PopupRadio from './src/components/popup-radio/index.vue'\nimport Previewer from './src/components/previewer/index.vue'\nimport Qrcode from './src/components/qrcode/index.vue'\nimport querystring from './src/tools/querystring/index.js'\nimport Radio from './src/components/radio/index.vue'\nimport Range from './src/components/range/index.vue'\nimport Rater from './src/components/rater/index.vue'\nimport Scroller from './src/components/scroller/index.vue'\nimport Search from './src/components/search/index.vue'\nimport Selector from './src/components/selector/index.vue'\nimport Shake from './src/components/shake/index.vue'\nimport Spinner from './src/components/spinner/index.vue'\nimport Step from './src/components/step/step.vue'\nimport StepItem from './src/components/step/step-item.vue'\nimport Sticky from './src/components/sticky/index.vue'\nimport stringTrim from './src/tools/string/trim.js'\nimport Swipeout from './src/components/swipeout/swipeout.vue'\nimport SwipeoutButton from './src/components/swipeout/swipeout-button.vue'\nimport SwipeoutItem from './src/components/swipeout/swipeout-item.vue'\nimport Swiper from './src/components/swiper/swiper.vue'\nimport SwiperItem from './src/components/swiper/swiper-item.vue'\nimport Tab from './src/components/tab/tab.vue'\nimport Tabbar from './src/components/tabbar/tabbar.vue'\nimport TabbarItem from './src/components/tabbar/tabbar-item.vue'\nimport TabItem from './src/components/tab/tab-item.vue'\nimport throttle from './src/tools/throttle/index.js'\nimport Timeline from './src/components/timeline/timeline.vue'\nimport TimelineItem from './src/components/timeline/timeline-item.vue'\nimport Tip from './src/components/tip/index.vue'\nimport Toast from './src/components/toast/index.vue'\nimport ToastPlugin from './src/plugins/toast/index.js'\nimport TransferDom from './src/directives/transfer-dom/index.js'\nimport TransferDomDirective from './src/directives/transfer-dom/index.js'\nimport trim from './src/tools/string/trim'\nimport Value2nameFilter from './src/filters/value2name.js'\nimport VArea from './src/components/v-chart/v-area.vue'\nimport VAxis from './src/components/v-chart/v-axis.vue'\nimport VBar from './src/components/v-chart/v-bar.vue'\nimport VChart from './src/components/v-chart/v-chart.vue'\nimport VGuide from './src/components/v-chart/v-guide.vue'\nimport Video from './src/components/video/index.vue'\nimport ViewBox from './src/components/view-box/index.vue'\nimport VLegend from './src/components/v-chart/v-legend.vue'\nimport VLine from './src/components/v-chart/v-line.vue'\nimport VPie from './src/components/v-chart/v-pie.vue'\nimport VPoint from './src/components/v-chart/v-point.vue'\nimport VScale from './src/components/v-chart/v-scale.vue'\nimport VTooltip from './src/components/v-chart/v-tooltip.vue'\nimport VuxComponentListData from './src/datas/vux_component_list.json'\nimport WechatEmotion from './src/components/wechat-emotion/index.vue'\nimport WechatPlugin from './src/plugins/wechat/index.js'\nimport WeekCalendar from './src/components/week-calendar/index.vue'\nimport WepayInput from './src/components/wepay-input/index.vue'\nimport XAddress from './src/components/x-address/index.vue'\nimport XButton from './src/components/x-button/index.vue'\nimport XCircle from './src/components/x-circle/index.vue'\nimport XDialog from './src/components/x-dialog/index.vue'\nimport XHeader from './src/components/x-header/index.vue'\nimport XHr from './src/components/x-hr/index.vue'\nimport XImg from './src/components/x-img/index.vue'\nimport XInput from './src/components/x-input/index.vue'\nimport XNumber from './src/components/x-number/index.vue'\nimport XProgress from './src/components/x-progress/index.vue'\nimport XSwitch from './src/components/x-switch/index.vue'\nimport XTable from './src/components/x-table/index.vue'\nimport XTextarea from './src/components/x-textarea/index.vue'\nimport XForm from './src/components/x-form/form.vue'\nimport XFormField from './src/components/x-form/field.vue'\n\n\nexport {\n Actionsheet,\n Agree,\n AjaxPlugin,\n Alert,\n AlertModule,\n AlertPlugin,\n AppPlugin,\n Array2stringFilter,\n Badge,\n base64,\n Blur,\n Box,\n BusPlugin,\n ButtonTab,\n ButtonTabItem,\n Calendar,\n Card,\n Cell,\n CellBox,\n CellFormPreview,\n Checker,\n CheckerItem,\n CheckIcon,\n Checklist,\n ChinaAddressData,\n ChinaAddressV1Data,\n ChinaAddressV2Data,\n ChinaAddressV3Data,\n ChinaAddressV4Data,\n ChinamobileTool,\n ClickOutsideDirective,\n Clocker,\n CloseDialogsPlugin,\n ColorPicker,\n ConfigPlugin,\n Confirm,\n ConfirmPlugin,\n cookie,\n Countdown,\n Countup,\n dateFormat,\n dateRange,\n Datetime,\n DatetimePlugin,\n DatetimeRange,\n DatetimeView,\n debounce,\n Demobasic,\n Demoindex,\n DevicePlugin,\n DevTip,\n Divider,\n Drawer,\n Flexbox,\n FlexboxItem,\n Flow,\n FlowLine,\n FlowState,\n FormatTimeFilter,\n FormPreview,\n FriendlyTimeFilter,\n Fullpage,\n Grid,\n GridItem,\n Group,\n GroupTitle,\n Icon,\n InlineCalendar,\n InlineDesc,\n InlineLoading,\n InlineXNumber,\n InlineXSwitch,\n InviewDirective,\n Loading,\n LoadingModule,\n LoadingPlugin,\n LoadMore,\n LocalePlugin,\n Marquee,\n MarqueeItem,\n Masker,\n md5,\n Msg,\n Name2valueFilter,\n numberComma,\n numberPad,\n numberRandom,\n numberRange,\n NumberRoller,\n Panel,\n Picker,\n Popover,\n Popup,\n PopupHeader,\n PopupPicker,\n PopupRadio,\n Previewer,\n Qrcode,\n querystring,\n Radio,\n Range,\n Rater,\n Scroller,\n Search,\n Selector,\n Shake,\n Spinner,\n Step,\n StepItem,\n Sticky,\n stringTrim,\n Swipeout,\n SwipeoutButton,\n SwipeoutItem,\n Swiper,\n SwiperItem,\n Tab,\n Tabbar,\n TabbarItem,\n TabItem,\n throttle,\n Timeline,\n TimelineItem,\n Tip,\n Toast,\n ToastPlugin,\n TransferDom,\n TransferDomDirective,\n trim,\n Value2nameFilter,\n VArea,\n VAxis,\n VBar,\n VChart,\n VGuide,\n Video,\n ViewBox,\n VLegend,\n VLine,\n VPie,\n VPoint,\n VScale,\n VTooltip,\n VuxComponentListData,\n WechatEmotion,\n WechatPlugin,\n WeekCalendar,\n WepayInput,\n XAddress,\n XButton,\n XCircle,\n XDialog,\n XHeader,\n XHr,\n XImg,\n XInput,\n XNumber,\n XProgress,\n XSwitch,\n XTable,\n XTextarea,\n XForm,\n XFormField\n}\n" }, { "path": "package.json", "content": "{\n \"name\": \"vux\",\n \"version\": \"2.11.1\",\n \"main\": \"index.js\",\n \"description\": \"Mobile web UI based on Vue and WeUI\",\n \"keywords\": [\n \"vux\",\n \"vue\",\n \"vue ui\",\n \"weui\",\n \"vue-components\",\n \"web-components\",\n \"component\",\n \"components\",\n \"mobile ui\",\n \"framework\",\n \"frontend\"\n ],\n \"author\": \"airyland \",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/airyland/vux\"\n },\n \"license\": \"MIT\",\n \"scripts\": {\n \"dev\": \"webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js\",\n \"build\": \"node build/build.js && rimraf docs/demos/v2/ && mkdirp docs/demos/v2 && cp -r docs/demos/temp/* docs/demos/v2/\",\n \"build:cdn\": \"node build/build.js --cdn && rimraf docs/demos/v2/ && mkdirp docs/demos/v2 && cp -rf docs/demos/temp/* docs/demos/v2/\",\n \"unit\": \"cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run\",\n \"test\": \"npm run unit\",\n \"lint\": \"eslint --ext .js,.vue src test/unit/specs\",\n \"doc:build\": \"node build/build-docs.js && node docs/component-contributors && node docs/compile\",\n \"doc:dev\": \"cd docs && npm run dev\",\n \"build-main\": \"node build/build-main.js\",\n \"build-components\": \"node build/build-components.js\",\n \"build-styles\": \"node build/build-styles.js\",\n \"xbuild\": \"npm run build-styles && npm run build-components\"\n },\n \"dependencies\": {\n \"@antv/f2\": \"^3.1.4-beta.2\",\n \"array-filter\": \"^1.0.0\",\n \"array-find\": \"^1.0.0\",\n \"array-map\": \"^0.0.0\",\n \"array-shuffle\": \"^1.0.1\",\n \"async-validator\": \"^3.5.2\",\n \"autosize\": \"^3.0.20\",\n \"axios\": \"^0.15.3\",\n \"big.js\": \"^3.1.3\",\n \"blueimp-md5\": \"^2.6.0\",\n \"countup.js\": \"^1.8.1\",\n \"exif-js\": \"^2.3.0\",\n \"fastclick\": \"^1.0.6\",\n \"lodash.debounce\": \"^4.0.8\",\n \"lodash.throttle\": \"^4.1.1\",\n \"object-assign\": \"^4.1.0\",\n \"qr.js\": \"0.0.0\",\n \"shake.js\": \"^1.2.2\",\n \"validator\": \"^9.3.0\",\n \"vanilla-masker\": \"^1.2.0\",\n \"vux-blazy\": \"^1.6.4\",\n \"vux-xscroll\": \"^3.1.10\",\n \"x-photoswipe\": \"^4.1.3-rc.1\"\n },\n \"devDependencies\": {\n \"autoprefixer\": \"^6.7.2\",\n \"autosize\": \"^3.0.20\",\n \"babel-core\": \"^6.22.1\",\n \"babel-eslint\": \"^7.1.1\",\n \"babel-loader\": \"^7.1.1\",\n \"babel-plugin-istanbul\": \"^3.1.2\",\n \"babel-plugin-transform-runtime\": \"^6.22.0\",\n \"babel-preset-es2015\": \"^6.22.0\",\n \"babel-preset-stage-2\": \"^6.22.0\",\n \"babel-register\": \"^6.22.0\",\n \"babel-runtime\": \"^6.20.0\",\n \"chai\": \"^3.5.0\",\n \"chalk\": \"^1.1.3\",\n \"co\": \"^4.6.0\",\n \"codecov\": \"^2.3.0\",\n \"connect-history-api-fallback\": \"^1.3.0\",\n \"cross-env\": \"^3.1.4\",\n \"css-loader\": \"^0.26.1\",\n \"dayjs\": \"^1.8.16\",\n \"docute-cli\": \"^0.4.0\",\n \"eslint\": \"^3.14.1\",\n \"eslint-config-standard\": \"^6.2.1\",\n \"eslint-friendly-formatter\": \"^2.0.7\",\n \"eslint-loader\": \"^1.6.1\",\n \"eslint-plugin-html\": \"^2.0.0\",\n \"eslint-plugin-promise\": \"^3.4.0\",\n \"eslint-plugin-standard\": \"^2.0.1\",\n \"eventsource-polyfill\": \"^0.9.6\",\n \"express\": \"^4.14.1\",\n \"extract-text-webpack-plugin\": \"^3.0.2\",\n \"file-loader\": \"^0.10.0\",\n \"friendly-errors-webpack-plugin\": \"^1.1.3\",\n \"function-bind\": \"^1.1.0\",\n \"gh-pages\": \"^0.12.0\",\n \"glob\": \"^7.1.1\",\n \"html-webpack-plugin\": \"^2.30.1\",\n \"http-proxy-middleware\": \"^0.17.3\",\n \"inject-loader\": \"^3.0.1\",\n \"js-yaml\": \"^3.7.0\",\n \"js-yaml-loader\": \"^0.1.0\",\n \"json-loader\": \"^0.5.4\",\n \"karma\": \"^1.4.1\",\n \"karma-coverage\": \"^1.1.1\",\n \"karma-mocha\": \"^1.3.0\",\n \"karma-phantomjs-launcher\": \"^1.0.4\",\n \"karma-phantomjs-shim\": \"^1.5.0\",\n \"karma-sinon-chai\": \"^1.3.1\",\n \"karma-sourcemap-loader\": \"^0.3.7\",\n \"karma-spec-reporter\": \"0.0.31\",\n \"karma-webpack\": \"^2.0.2\",\n \"less\": \"^2.7.2\",\n \"less-loader\": \"^2.2.3\",\n \"lodash\": \"^4.17.4\",\n \"lolex\": \"^1.5.2\",\n \"mkdirp\": \"^0.5.1\",\n \"mocha\": \"^3.2.0\",\n \"node-fetch\": \"^1.6.3\",\n \"node-notifier\": \"^5.1.2\",\n \"node-watch\": \"^0.4.1\",\n \"opn\": \"^4.0.2\",\n \"ora\": \"^1.1.0\",\n \"phantomjs-prebuilt\": \"^2.1.14\",\n \"postcss\": \"^5.2.10\",\n \"postcss-less\": \"^0.15.0\",\n \"progress-bar-webpack-plugin\": \"^1.10.0\",\n \"rimraf\": \"^2.6.1\",\n \"semver\": \"^5.3.0\",\n \"shelljs\": \"^0.7.6\",\n \"sinon\": \"^2.3.8\",\n \"sinon-chai\": \"^2.12.0\",\n \"sort-object\": \"^3.0.2\",\n \"thunkify\": \"^2.1.2\",\n \"touch\": \"^1.0.0\",\n \"url-loader\": \"^0.5.7\",\n \"v-markdown-loader\": \"^0.6.3-beta.2\",\n \"vue\": \"2.5.16\",\n \"vue-hot-reload-api\": \"^2.0.11\",\n \"vue-loader\": \"^14.1.1\",\n \"vue-router\": \"^2.5.3\",\n \"vue-style-loader\": \"^2.0.0\",\n \"vue-template-compiler\": \"2.5.16\",\n \"vue-test-utils\": \"1.0.0-beta\",\n \"vuex\": \"^2.3.1\",\n \"vuex-i18n\": \"^1.3.1\",\n \"vuex-router-sync\": \"^4.2.0\",\n \"vux-loader\": \"^1.2.9\",\n \"webpack\": \"^3.8.1\",\n \"webpack-bundle-analyzer\": \"^2.2.1\",\n \"webpack-dev-middleware\": \"^1.12.0\",\n \"webpack-dev-server\": \"^2.9.4\",\n \"webpack-hot-middleware\": \"^2.20.0\",\n \"webpack-merge\": \"^2.6.1\",\n \"yargs\": \"^6.6.0\"\n },\n \"engines\": {\n \"node\": \">= 4.0.0\",\n \"npm\": \">= 3.0.0\"\n }\n}\n" }, { "path": "packages/loader/README.md", "content": "# vux-loader\r\n\r\nA webpack loader for processing .vue file before vue-loader" }, { "path": "packages/loader/libs/get-i18n-block.js", "content": "const reg = /]*>([\\s\\S]*?)<\\/i18n>/\nconst fs = require('fs')\nconst yamlReader = require('js-yaml')\n\n// @todo add global cache\n\n// @todo try parse\nfunction get (code, isFile = false) {\n let content = code\n if (isFile) {\n content = fs.readFileSync(code, 'utf-8')\n }\n const results = content.match(/]*>([\\s\\S]*?)<\\/i18n>/)\n try {\n const local = yamlReader.safeLoad(results[1])\n return local\n } catch (e) {\n return {}\n }\n}\n\nfunction getWithLocale ({ code = '', isFile = false, locale = ''}) {\n const rs = get(code, isFile)\n let _rs = {}\n for (let i in rs) {\n _rs[i] = typeof rs[i][locale] === 'undefined' ? i : rs[i][locale]\n }\n return _rs\n}\n\nexports.get = get\nexports.getWithLocale = getWithLocale\n" }, { "path": "packages/loader/libs/parse-i18n-function.js", "content": "const parse5 = require('parse5')\nconst acorn = require('acorn')\nconst escodegen = require('escodegen')\n\nfunction generateHTML(rs) {\n try {\n let processed = escodegen.generate(rs, {\n format: {\n semicolons: false,\n quotes: 'single',\n compact: false,\n indent: {\n style: '',\n base: 0,\n adjustMultilineComment: false\n }\n }\n })\n processed = processed.replace(/;$/, '')\n .replace(/;\\s/g, ' ')\n .replace('let VALUE = ', '')\n .replace(/;,/g, ',')\n .replace(/;]/g, ']')\n return processed\n } catch (e) {\n }\n}\n\nfunction parseExpression(list, key, map) {\n list.forEach((one, index) => {\n let value = one[key] || one\n if (value.type === 'BinaryExpression') {\n\n for (let i in value) {\n if (i === 'left' || i === 'right') {\n let expression = value[i]\n if (expression.type === 'CallExpression' && expression.callee && expression.callee.name === '$t' && expression.arguments.length === 1) {\n value[i] = buildStringExpression(map[expression.arguments[0].value] || expression.arguments[0].value)\n }\n }\n }\n\n } else if (value.type === 'CallExpression') {\n const rs = buildStringExpression(map[value.arguments[0].value] || value.arguments[0].value)\n if (key) {\n list[index][key] = rs\n } else {\n list[index] = rs\n }\n }\n })\n}\n\nfunction doParseExpression(code, map) {\n if (typeof code === 'string' && !/\\$t/.test(code)) {\n return\n }\n let rs = code\n if (typeof code === 'string') {\n rs = acorn.parse(code, {\n sourceType: 'module'\n })\n }\n\n for (let i = 0; i < rs.body.length; i++) {\n const one = rs.body[i]\n\n if (one.type === 'ExpressionStatement' && one.expression.type === 'ArrayExpression') {\n const elements = one.expression.elements\n parseExpression(elements, '', map)\n } else if (one.type === 'ExpressionStatement' && one.expression && one.expression.callee && one.expression.callee.name === '$t' && one.expression.arguments.length === 1 && one.expression.arguments[0].type !== 'BinaryExpression') {\n one.expression = buildStringExpression(map[one.expression.arguments[0].value] || one.expression.arguments[0].value)\n } else if (one.type === 'ExpressionStatement') { // 表达式模式\n parseCallExpression(one.expression, map)\n } else if (one.type === 'VariableDeclaration') { // 对象类型\n var properties = one.declarations[0].init.properties\n parseExpression(properties, 'value', map)\n } else {\n }\n }\n return rs\n}\n\nfunction parseAttrs(nodes, map) {\n nodes.forEach(one => {\n if (one.nodeName === '#text' && /{{/.test(one.value) && /}}/.test(one.value)) {\n one.value = one.value.replace(/{{(.*?)}}/g, function (a, b) {\n if (b.indexOf('$t(') === -1) {\n return a\n }\n\n let rs = acorn.parse(b, {\n sourceType: 'module'\n })\n\n if (rs.body.length === 1 && rs.body[0].expression && rs.body[0].type === 'ExpressionStatement' && rs.body[0].expression.type === 'CallExpression' && rs.body[0].expression.arguments[0].type === 'Literal') {\n rs = doParseExpression(rs, map)\n if (!rs) {\n return a\n } else {\n let html = generateHTML(rs)\n if (html) {\n html = html.replace(/^'(.*?)'$/, '$1')\n return html\n }\n }\n } else {\n return a\n }\n\n })\n }\n if (one.attrs) {\n for (let i in one.attrs) {\n let attr = one.attrs[i]\n\n if (/\\$t/.test(attr.value)) {\n if (/^:/.test(attr.name) && /^{/.test(attr.value)) {\n attr.value = 'let VALUE = ' + attr.value\n }\n\n let rs = doParseExpression(attr.value, map)\n let processed = generateHTML(rs)\n if (processed) {\n attr.value = processed\n } else {\n // stay unchanged\n }\n }\n\n }\n }\n if (one.childNodes && one.childNodes.length) {\n parseAttrs(one.childNodes, map)\n }\n })\n\n}\n\nfunction parse(code, map) {\n const documentFragment = parse5.parseFragment(code)\n parseAttrs(documentFragment.childNodes, map)\n const html = parse5.serialize(documentFragment)\n return html\n}\n\nexports.parse = parse\n\nfunction parseCallExpression (expression, map) {\n for (let i in expression) {\n if (i === 'left' || i === 'right') {\n let currentExpression = expression[i]\n if (currentExpression.type === 'CallExpression' && currentExpression.callee && currentExpression.callee.name === '$t' && currentExpression.arguments.length === 1) {\n expression[i] = buildStringExpression(map[currentExpression.arguments[0].value] || currentExpression.arguments[0].value)\n } else {\n if (currentExpression.type === 'BinaryExpression') {\n parseCallExpression(currentExpression, map)\n }\n }\n }\n }\n}\n\nfunction buildStringExpression(value) {\n return {\n \"type\": \"ExpressionStatement\",\n \"expression\": {\n \"type\": \"Literal\",\n \"value\": value,\n \"raw\": \"'\" + value + \"'\"\n }\n }\n}" }, { "path": "packages/loader/libs/replace-i18n-for-script.js", "content": "const matchI18nReg = /this.\\$t\\('?(.*?)'?\\)/g\n\nfunction replace (code, map = {}, options = {}) {\n if (!code) {\n return\n }\n code = code.replace(matchI18nReg, function (a, b) {\n return addQuotes(map[b] || b)\n })\n return code\n}\n\nexports.replace = replace\n\nfunction addQuotes (str) {\n return `'${str}'`\n}\n" }, { "path": "packages/loader/package.json", "content": "{\n \"name\": \"@vux/loader\",\n \"version\": \"2.1.3\",\n \"description\": \"extended loader for vux\",\n \"main\": \"src/index.js\",\n \"keywords\": [\n \"vux\",\n \"vue\",\n \"vue-loader\",\n \"vux-loader\",\n \"webpack-loader\",\n \"weui\",\n \"vue-components\",\n \"web-components\",\n \"component\",\n \"components\",\n \"mobile ui\",\n \"framework\",\n \"frontend\"\n ],\n \"author\": \"airyland \",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/airyland/vux\"\n },\n \"license\": \"MIT\",\n \"scripts\": {\n \"test\": \"mocha test/test.js --slow 5000 --timeout 15000\"\n },\n \"dependencies\": {\n \"@babel/core\": \"^7.4.3\",\n \"acorn\": \"^5.1.2\",\n \"babel-plugin-transform-imports\": \"^1.5.1\",\n \"compare-versions\": \"^3.1.0\",\n \"cssnano\": \"^3.7.4\",\n \"draftlog\": \"^1.0.10\",\n \"escodegen\": \"^1.9.0\",\n \"inline-manifest-webpack-plugin\": \"^3.0.1\",\n \"js-yaml\": \"^3.6.1\",\n \"less\": \"^2.7.1\",\n \"loader-utils\": \"^0.2.15\",\n \"node-cli-config\": \"^0.0.1\",\n \"parse5\": \"^3.0.2\",\n \"progress-bar-webpack-plugin\": \"^1.9.3\",\n \"strip-comments\": \"^0.4.4\",\n \"strip-css-comments\": \"^3.0.0\",\n \"touch\": \"^1.0.0\",\n \"underscore\": \"^1.8.3\",\n \"uuid\": \"^3.0.1\",\n \"webpack-merge\": \"^1.1.2\",\n \"webpack-sources\": \"^0.1.2\"\n },\n \"devDependencies\": {\n \"chai\": \"^3.5.0\",\n \"coffee-loader\": \"^0.7.2\",\n \"coffee-script\": \"^1.12.2\",\n \"css-loader\": \"^0.26.1\",\n \"expose-loader\": \"^0.7.1\",\n \"extract-text-webpack-plugin\": \"^2.0.0\",\n \"file-loader\": \"^0.9.0\",\n \"hash-sum\": \"^1.0.2\",\n \"jsdom\": \"^9.9.1\",\n \"less-loader\": \"^2.2.3\",\n \"lodash\": \"^4.17.4\",\n \"memory-fs\": \"^0.4.1\",\n \"mkdirp\": \"^0.5.1\",\n \"normalize-newline\": \"^3.0.0\",\n \"pug\": \"^2.0.0-beta6\",\n \"rimraf\": \"^2.5.4\",\n \"source-map\": \"^0.5.6\",\n \"stylus\": \"^0.54.5\",\n \"stylus-loader\": \"^2.4.0\",\n \"sugarss\": \"^0.2.0\",\n \"vue\": \"^2.1.7\",\n \"vue-html-loader\": \"^1.2.3\",\n \"vue-loader\": \"^9.9.5\",\n \"vue-style-loader\": \"^1.0.0\",\n \"webpack\": \"^3.1.0\"\n }\n}\n" }, { "path": "packages/loader/parse.js", "content": "var babylon = require('babylon')\nconst acorn = require('acorn')\nconst escodegen = require('escodegen')\n// const plugin = require('babel-plugin-import')\n// console.log(babylon)\nconst code = `import{ Group as Groups,\n Cell } from 'vux'; import { X } from 'x'\nimport a from './a'\nimport x from 'vux/src/components/cell'\n var b = '1'`\n\nconst rs = babylon.parse(code, {\n sourceType: 'module'\n})\n// console.log(rs)\nconst format = function (obj) {\n return JSON.stringify(obj, null, 2)\n}\nconst tree = acorn.parse(code, {\n sourceType: 'module'\n})\nconsole.log(format(tree.body))\n\nconst append = acorn.parse(`import{ a, xb,\nc,de} from 'xxx'`, {\n sourceType: 'module'\n})\n// 重新生成\ntree.body.unshift(append)\nconst code2 = escodegen.generate(tree, {\n format: {\n semicolons: false,\n indent: {\n style: ' ',\n base: 0,\n adjustMultilineComment: false\n }\n }\n})\nconsole.log(code2)" }, { "path": "packages/loader/plugins/duplicate-style/index.js", "content": "/**\r\n* https://github.com/NMFR/optimize-css-assets-webpack-plugin\r\n* MIT LICENSE\r\n*/\r\n\r\nvar _ = require('underscore')\r\nvar webpackSources = require('webpack-sources')\r\n\r\nfunction OptimizeCssAssetsPlugin(options) {\r\n options = options || {}\r\n this.options = Object.assign({\r\n canPrint: undefined,\r\n cssProcessor: require('cssnano'),\r\n assetNameRegExp : /\\.css$/g,\r\n cssProcessorOptions : {\r\n safe: true,\r\n zindex: false,\r\n autoprefixer: false\r\n }\r\n }, options)\r\n};\r\n\r\nOptimizeCssAssetsPlugin.prototype.print = function() {\r\n if (this.options.canPrint || (typeof this.options.canPrint === 'undefined' && (process.env.NODE_ENV === 'production' || process.env.__VUX_BUILD__))) {\r\n console.log.apply(console, arguments);\r\n }\r\n};\r\n\r\nOptimizeCssAssetsPlugin.prototype.processCss = function(css) {\r\n return this.options.cssProcessor.process(css, this.options.cssProcessorOptions)\r\n};\r\n\r\nOptimizeCssAssetsPlugin.prototype.createCssAsset = function(css, originalAsset) {\r\n return new webpackSources.RawSource(css);\r\n};\r\n\r\nOptimizeCssAssetsPlugin.prototype.apply = function(compiler) {\r\n var self = this;\r\n if (compiler.hooks) {\r\n const plugin = { name: \"WebpackDuplicateStyle\" };\r\n compiler.hooks.emit.tap(plugin, (compilation) => {\r\n self.print(\"\\n\\n======== vux-loader: duplicate-style start~ ========\");\r\n self.print(\"Starting to optimize CSS...\");\r\n\r\n var assets = compilation.assets;\r\n\r\n var cssAssetNames = _.filter(_.keys(assets), function (assetName) {\r\n return assetName.match(self.options.assetNameRegExp);\r\n });\r\n\r\n var hasErrors = false;\r\n var promises = [];\r\n\r\n _.each(cssAssetNames, function (assetName) {\r\n self.print(\"Processing \" + assetName + \"...\");\r\n var asset = assets[assetName];\r\n var originalCss = asset.source();\r\n // avoid 0% => 0\r\n originalCss = originalCss.replace(/:\\s*0%/g, \":1234%\");\r\n var promise = self.processCss(originalCss);\r\n promise.then(\r\n function (result) {\r\n if (hasErrors) {\r\n self.print(\"Skiping \" + assetName + \" because of an error.\");\r\n return;\r\n }\r\n var processedCss = result.css;\r\n // replace back to 0%\r\n processedCss = processedCss.replace(/:1234%/g, \":0%\");\r\n assets[assetName] = self.createCssAsset(processedCss, asset);\r\n var ratio = \"\";\r\n if (originalCss.length) {\r\n ratio =\r\n \", ratio:\" +\r\n Math.round(\r\n ((processedCss.length * 100) / originalCss.length) * 100\r\n ) /\r\n 100 +\r\n \"%\";\r\n }\r\n self.print(\r\n \"Processed \" +\r\n assetName +\r\n \", before: \" +\r\n originalCss.length +\r\n \", after: \" +\r\n processedCss.length +\r\n ratio\r\n );\r\n },\r\n function (err) {\r\n hasErrors = true;\r\n self.print(\"Error processing file: \" + assetName);\r\n console.error(err);\r\n }\r\n );\r\n promises.push(promise);\r\n });\r\n\r\n Promise.all(promises).then(function () {\r\n self.print(\"======== vux-loader: duplicate-style done! ========\\n\");\r\n });\r\n });\r\n } else {\r\n compiler.plugin(\"emit\", function (compilation, compileCallback) {\r\n self.print(\"\\n\\n======== vux-loader: duplicate-style start~ ========\");\r\n self.print(\"Starting to optimize CSS...\");\r\n\r\n var assets = compilation.assets;\r\n\r\n var cssAssetNames = _.filter(_.keys(assets), function (assetName) {\r\n return assetName.match(self.options.assetNameRegExp);\r\n });\r\n\r\n var hasErrors = false;\r\n var promises = [];\r\n\r\n _.each(\r\n cssAssetNames,\r\n function(assetName) {\r\n self.print('Processing ' + assetName + '...')\r\n var asset = assets[assetName];\r\n var originalCss = asset.source();\r\n // avoid 0% => 0\r\n originalCss = originalCss.replace(/:\\s*0%/g, ':1234%')\r\n var promise = self.processCss(originalCss)\r\n promise.then(\r\n function (result) {\r\n if (hasErrors) {\r\n self.print('Skiping ' + assetName + ' because of an error.')\r\n return;\r\n }\r\n var processedCss = result.css;\r\n // replace back to 0%\r\n processedCss = processedCss.replace(/:1234%/g, ':0%')\r\n assets[assetName] = self.createCssAsset(processedCss, asset);\r\n var ratio = ''\r\n if (originalCss.length) {\r\n ratio = ', ratio:' + (Math.round(((processedCss.length * 100) / originalCss.length) * 100) / 100) + '%'\r\n }\r\n self.print('Processed ' + assetName + ', before: ' + originalCss.length + ', after: ' + processedCss.length + ratio)\r\n }, function(err) {\r\n hasErrors = true;\r\n self.print('Error processing file: ' + assetName)\r\n console.error(err)\r\n }\r\n );\r\n promises.push(promise)\r\n }\r\n );\r\n\r\n Promise.all(promises).then(function () {\r\n compileCallback()\r\n self.print('======== vux-loader: duplicate-style done! ========\\n')\r\n }, compileCallback)\r\n })\r\n }\r\n}\r\n\r\nmodule.exports = OptimizeCssAssetsPlugin\r\n" }, { "path": "packages/loader/plugins/html-build-callback/index.js", "content": "'use strict'\r\n\r\n/**\r\n* https://www.npmjs.com/package/html-webpack-plugin\r\n* Async\r\n html-webpack-plugin-before-html-generation\r\n html-webpack-plugin-before-html-processing\r\n html-webpack-plugin-alter-asset-tags\r\n html-webpack-plugin-after-html-processing\r\n html-webpack-plugin-after-emit\r\n Sync:\r\n html-webpack-plugin-alter-chunks\r\n*/\r\n\r\n/**\r\n* \r\n{\r\n events: {\r\n 'before-html-generation': function (data, cb) {\r\n cb(null, data)\r\n }\r\n } \r\n}\r\n*/\r\n\r\nfunction Plugin(options) {\r\n this.events = options.events\r\n}\r\n\r\nPlugin.prototype.apply = function (compiler) {\r\n let _this = this;\r\n const plugin = { name: \"WebpackHtmlBuildCallback\" };\r\n if (compiler.hooks) {\r\n compiler.hooks.compilation.tap(plugin, (compilation) => {\r\n for (let i in _this.events) {\r\n compilation.plugin(\"html-webpack-plugin-\" + i, _this.events[i]);\r\n }\r\n });\r\n } else {\r\n compiler.plugin(\"compilation\", function (compilation) {\r\n for (let i in _this.events) {\r\n compilation.plugin(\"html-webpack-plugin-\" + i, _this.events[i]);\r\n }\r\n });\r\n }\r\n};\r\n\r\nmodule.exports = Plugin;\r\n" }, { "path": "packages/loader/src/after-less-loader.js", "content": "'use strict'\n\nconst utils = require('loader-utils')\n\nmodule.exports = function (source) {\n this.cacheable()\n const _this = this\n const config = this.vux || utils.getLoaderConfig(this, 'vux')\n\n if (!config.plugins || !config.plugins.length) {\n return source\n }\n\n config.plugins.forEach(function (plugin) {\n // style-parser\n if (plugin.name === 'after-less-parser') {\n if (plugin.fn) {\n source = plugin.fn.call(_this, source)\n }\n }\n })\n\n return source\n}\n" }, { "path": "packages/loader/src/before-template-compiler-loader.js", "content": "'use strict'\n\nconst utils = require('loader-utils')\nconst parseXIcon = require('./libs/parse-x-icon')\n\nmodule.exports = function (source) {\n this.cacheable()\n const _this = this\n const config = this.vux || utils.getLoaderConfig(this, 'vux')\n\n if (!config.plugins || !config.plugins.length) {\n return source\n }\n\n if (config.options.useVuxUI && source.indexOf('') > -1) {\n source = parseXIcon(source, config)\n }\n\n config.plugins.forEach(function (plugin) {\n // style-parser\n if (plugin.name === 'before-template-compiler-parser') {\n if (plugin.fn) {\n source = plugin.fn.call(_this, source)\n }\n }\n })\n\n return source\n}\n" }, { "path": "packages/loader/src/i18n-loader.js", "content": "const yamlReader = require('js-yaml')\n\nmodule.exports = function (source, map) {\n let i18n = {}\n try {\n i18n = yamlReader.safeLoad(source)\n } catch (e) {\n console.log(e)\n }\n\n this.callback(\n null,\n `export default function (Component) {\n Component.options.__i18n = ${\n JSON.stringify(i18n)\n }\n }`,\n map\n )\n}" }, { "path": "packages/loader/src/index.js", "content": "'use strict'\r\n\r\nconst path = require('path')\r\nconst fs = require('fs')\r\nconst merge = require('webpack-merge')\r\nconst yaml = require('js-yaml')\r\nconst _ = require('lodash')\r\nconst pkg = require('../package')\r\n\r\nvar webpack = require('webpack')\r\n\r\nconst scriptLoader = path.join(__dirname, './script-loader.js')\r\nconst noopLoader = path.join(__dirname, './noop-loader.js')\r\n\r\nconst styleLoader = path.join(__dirname, './style-loader.js')\r\nconst templateLoader = path.join(__dirname, './template-loader.js')\r\nconst jsLoader = path.join(__dirname, './js-loader.js')\r\nconst afterLessLoader = path.join(__dirname, './after-less-loader.js')\r\nconst beforeTemplateCompilerLoader = path.join(__dirname, './before-template-compiler-loader.js')\r\n\r\nconst projectRoot = process.cwd()\r\n\r\nconst getLessVariables = require('./libs/get-less-variables')\r\n\r\n/**\r\n * Plugins\r\n */\r\nconst htmlBuildCallbackPlugin = require('../plugins/html-build-callback')\r\nconst DuplicateStyle = require('../plugins/duplicate-style')\r\n\r\n/** build done callback **/\r\n\r\nfunction DonePlugin(callbacks) {\r\n this.callbacks = callbacks || function () {}\r\n // Setup the plugin instance with options...\r\n}\r\n\r\nDonePlugin.prototype.apply = function (compiler) {\r\n let callbacks = this.callbacks\r\n if (compiler.hooks) {\r\n const plugin = {name: 'WebpackDonePlugin'};\r\n compiler.hooks.done.tap(plugin, function () {\r\n callbacks.forEach(function (fn) {\r\n fn()\r\n })\r\n });\r\n } else {\r\n compiler.plugin('done', function () {\r\n callbacks.forEach(function (fn) {\r\n fn()\r\n })\r\n });\r\n }\r\n};\r\n\r\n/** emit plugin **/\r\nfunction EmitPlugin(callback) {\r\n this.callback = callback\r\n}\r\n\r\nEmitPlugin.prototype.apply = function (compiler) {\r\n let callback = this.callback\r\n if (compiler.hooks) {\r\n const plugin = {name: 'WebpackEmitPlugin'};\r\n compiler.hooks.emit.tapAsync(plugin, (compilation, cb) => {\r\n callback(compilation, cb)\r\n })\r\n } else {\r\n compiler.plugin(\"emit\", function (compilation, cb) {\r\n callback(compilation, cb)\r\n });\r\n }\r\n}\r\n\r\nfunction hasPlugin(name, list) {\r\n const match = list.filter(function (one) {\r\n return one.name === name\r\n })\r\n return match.length > 0\r\n}\r\n\r\nfunction getFirstPlugin(name, list) {\r\n const match = list.filter(function (one) {\r\n return one.name === name\r\n })\r\n return match[0]\r\n}\r\n\r\nmodule.exports.merge = function (oldConfig, vuxConfig) {\r\n\r\n oldConfig.module.rules.push({\r\n resourceQuery: /^\\?vue&type=template/,\r\n enforce: 'pre',\r\n loader: path.resolve(__dirname, './template-loader')\r\n })\r\n\r\n oldConfig.module.rules.push({\r\n test: /\\.js/,\r\n loader: path.resolve(__dirname, './js-loader')\r\n })\r\n\r\n // ditto\r\n oldConfig.module.rules.push({\r\n resourceQuery: /\\.js/,\r\n loader: path.resolve(__dirname, './js-loader')\r\n })\r\n\r\n oldConfig.module.rules.push({\r\n resourceQuery: /^\\?vue&type=script/,\r\n enforce: 'pre',\r\n loader: path.resolve(__dirname, './script-loader')\r\n })\r\n\r\n oldConfig.module.rules.push({\r\n resourceQuery: /blockType=i18n/,\r\n loader: path.resolve(__dirname, './i18n-loader')\r\n })\r\n\r\n let variables = {}\r\n\r\n oldConfig = Object.assign({\r\n plugins: []\r\n }, oldConfig)\r\n\r\n let config = Object.assign({\r\n module: {},\r\n plugins: []\r\n }, oldConfig)\r\n\r\n if (!vuxConfig) {\r\n vuxConfig = {\r\n options: {},\r\n plugins: []\r\n }\r\n }\r\n\r\n if (!vuxConfig.options) {\r\n vuxConfig.options = {\r\n buildEnvs: ['production']\r\n }\r\n }\r\n\r\n if (typeof vuxConfig.options.ssr === 'undefined') {\r\n vuxConfig.options.ssr = false\r\n }\r\n\r\n const buildEnvs = vuxConfig.options.buildEnvs || ['production']\r\n if (buildEnvs.indexOf(process.env.NODE_ENV) !== -1) {\r\n process.env.__VUX_BUILD__ = true\r\n } else {\r\n process.env.__VUX_BUILD__ = false\r\n }\r\n\r\n\r\n if (!vuxConfig.plugins) {\r\n vuxConfig.plugins = []\r\n }\r\n\r\n if (vuxConfig.plugins.length) {\r\n vuxConfig.plugins = vuxConfig.plugins.map(function (plugin) {\r\n if (typeof plugin === 'string') {\r\n return {\r\n name: plugin\r\n }\r\n }\r\n return plugin\r\n })\r\n }\r\n\r\n vuxConfig.allPlugins = vuxConfig.allPlugins || []\r\n\r\n // check multi plugin instance\r\n const pluginGroup = _.groupBy(vuxConfig.plugins, function (plugin) {\r\n return plugin.name\r\n })\r\n for (let group in pluginGroup) {\r\n if (pluginGroup[group].length > 1) {\r\n throw (`only one instance is allowed. plugin name: ${group}`)\r\n }\r\n }\r\n\r\n // if exists old vux config, merge options and plugins list\r\n let oldVuxConfig = oldConfig.vux || null\r\n\r\n oldConfig.plugins.forEach(function (plugin) {\r\n if (plugin.constructor.name === 'LoaderOptionsPlugin' && plugin.options.vux) {\r\n oldVuxConfig = plugin.options.vux\r\n }\r\n })\r\n\r\n if (oldVuxConfig) {\r\n // merge old options\r\n vuxConfig.options = Object.assign(oldVuxConfig.options, vuxConfig.options)\r\n // merge old plugins list\r\n vuxConfig.plugins.forEach(function (newPlugin) {\r\n let isSame = false\r\n oldVuxConfig.allPlugins.forEach(function (oldPlugin, index) {\r\n if (newPlugin.name === oldPlugin.name) {\r\n oldVuxConfig.allPlugins.splice(index, 1)\r\n oldVuxConfig.allPlugins.push(newPlugin)\r\n isSame = true\r\n }\r\n })\r\n if (!isSame) {\r\n oldVuxConfig.allPlugins.push(newPlugin)\r\n }\r\n })\r\n vuxConfig.allPlugins = oldVuxConfig.allPlugins\r\n } else {\r\n vuxConfig.allPlugins = vuxConfig.plugins\r\n }\r\n\r\n // filter plugins by env\r\n if (vuxConfig.options.env && vuxConfig.allPlugins.length) {\r\n vuxConfig.plugins = vuxConfig.allPlugins.filter(function (plugin) {\r\n return typeof plugin.envs === 'undefined' || (typeof plugin.envs === 'object' && plugin.envs.length && plugin.envs.indexOf(vuxConfig.options.env) > -1)\r\n })\r\n }\r\n\r\n if (!vuxConfig.options.projectRoot) {\r\n vuxConfig.options.projectRoot = projectRoot\r\n }\r\n\r\n var themes = vuxConfig.plugins.filter(function (plugin) {\r\n return plugin.name === 'less-theme'\r\n })\r\n\r\n if (themes.length) {\r\n const themePath = path.join(vuxConfig.options.projectRoot, themes[0].path)\r\n variables = getLessVariables(themes[0].path)\r\n }\r\n\r\n let vuxVersion\r\n try {\r\n let vuePackagePath = path.resolve(vuxConfig.options.projectRoot, 'node_modules/vux/package.json')\r\n vuxVersion = require(vuePackagePath).version\r\n } catch (e) {}\r\n\r\n // get vue version\r\n let vueVersion\r\n try {\r\n let vuePackagePath = path.resolve(vuxConfig.options.projectRoot, 'node_modules/vue/package.json')\r\n vueVersion = require(vuePackagePath).version\r\n } catch (e) {}\r\n vuxConfig.options.vueVersion = vueVersion\r\n\r\n let vueLoaderVersion\r\n try {\r\n let vueLoaderPackagePath = path.resolve(vuxConfig.options.projectRoot, 'node_modules/vue-loader/package.json')\r\n vueLoaderVersion = require(vueLoaderPackagePath).version\r\n } catch (e) {}\r\n vuxConfig.options.vueLoaderVersion = vueLoaderVersion\r\n\r\n require('./libs/report')({\r\n vueVersion: vueVersion,\r\n vuxVersion: vuxVersion,\r\n vueLoaderVersion: vueLoaderVersion\r\n })\r\n\r\n // check webpack version by module.loaders\r\n let isWebpack2\r\n\r\n if (typeof vuxConfig.options.isWebpack2 !== 'undefined') {\r\n isWebpack2 = vuxConfig.options.isWebpack2\r\n } else if (oldConfig.module && oldConfig.module.rules) {\r\n isWebpack2 = true\r\n } else if (oldConfig.module && oldConfig.module.loaders) {\r\n isWebpack2 = false\r\n }\r\n\r\n if (typeof isWebpack2 === 'undefined') {\r\n const compareVersions = require('compare-versions')\r\n const pkg = require(path.resolve(vuxConfig.options.projectRoot, 'package.json'))\r\n if (pkg.devDependencies.webpack) {\r\n isWebpack2 = compareVersions(pkg.devDependencies.webpack.replace('^', '').replace('~', ''), '2.0.0') > -1\r\n } else {\r\n isWebpack2 = true\r\n }\r\n }\r\n\r\n if (!isWebpack2) {\r\n if (!config.vue) {\r\n config.vue = {\r\n loaders: {\r\n i18n: 'vux-loader/src/noop-loader.js'\r\n }\r\n }\r\n } else {\r\n if (!config.vue.loaders) {\r\n config.vue.loaders = {}\r\n }\r\n config.vue.loaders.i18n = 'vux-loader/src/noop-loader.js'\r\n }\r\n }\r\n\r\n let loaderKey = 'rules' // isWebpack2 ? 'rules' : 'loaders'\r\n\r\n config.module[loaderKey] = config.module[loaderKey] || []\r\n\r\n const useVuxUI = hasPlugin('vux-ui', vuxConfig.plugins)\r\n vuxConfig.options.useVuxUI = true\r\n\r\n /**\r\n * ======== set vux options ========\r\n */\r\n // for webpack@2.x, options should be provided with LoaderOptionsPlugin\r\n if (isWebpack2) {\r\n if (!config.plugins) {\r\n config.plugins = []\r\n }\r\n // delete old config for webpack2\r\n config.plugins.forEach(function (plugin, index) {\r\n if (plugin.constructor.name === 'LoaderOptionsPlugin' && plugin.options.vux) {\r\n config.plugins.splice(index, 1)\r\n }\r\n })\r\n config.plugins.push(new webpack.LoaderOptionsPlugin({\r\n vux: vuxConfig\r\n }))\r\n } else { // for webpack@1.x, merge directly\r\n\r\n config = merge(config, {\r\n vux: vuxConfig\r\n })\r\n\r\n }\r\n\r\n // if (hasPlugin('inline-manifest', vuxConfig.plugins)) {\r\n // var InlineManifestWebpackPlugin = require('inline-manifest-webpack-plugin')\r\n // config.plugins.push(new InlineManifestWebpackPlugin({\r\n // name: 'webpackManifest'\r\n // }))\r\n // }\r\n\r\n if (hasPlugin('progress-bar', vuxConfig.plugins)) {\r\n const ProgressBarPlugin = require('progress-bar-webpack-plugin')\r\n const pluginConfig = getFirstPlugin('progress-bar', vuxConfig.plugins)\r\n config.plugins.push(new ProgressBarPlugin(pluginConfig.options || {}))\r\n }\r\n\r\n if (hasPlugin('vux-ui', vuxConfig.plugins)) {\r\n let mapPath = path.resolve(vuxConfig.options.projectRoot, 'node_modules/vux/src/components/map.json')\r\n if (vuxConfig.options.vuxDev) {\r\n mapPath = path.resolve(vuxConfig.options.projectRoot, 'src/components/map.json')\r\n }\r\n const maps = require(mapPath)\r\n if (isWebpack2) {\r\n config.plugins.push(new webpack.LoaderOptionsPlugin({\r\n vuxMaps: maps\r\n }))\r\n } else {\r\n config = merge(config, {\r\n vuxMaps: maps\r\n })\r\n }\r\n }\r\n\r\n // get less variable alias\r\n if (hasPlugin('vux-ui', vuxConfig.plugins)) {\r\n let variablePath = path.resolve(vuxConfig.options.projectRoot, 'node_modules/vux/src/styles/variable.less')\r\n if (vuxConfig.options.vuxDev) {\r\n variablePath = path.resolve(vuxConfig.options.projectRoot, 'src/styles/variable.less')\r\n }\r\n // parse alias\r\n\r\n const rs = {}\r\n\r\n try {\r\n const content = fs.readFileSync(variablePath, 'utf-8').split('\\n').filter(line => /\\/\\/\\salias/.test(line)).map(line => {\r\n const value = line.split('// alias ')[1].replace(/\\s+/g, '').trim()\r\n const key = line.split('// alias ')[0].replace(/\\s+/g, '').trim().split(':')[0].replace(/^@/, '')\r\n return [key, value]\r\n }).forEach(one => {\r\n rs[one[0]] = one[1]\r\n })\r\n } catch (e) {}\r\n\r\n if (isWebpack2) {\r\n config.plugins.push(new webpack.LoaderOptionsPlugin({\r\n vuxVariableMap: rs\r\n }))\r\n } else {\r\n config = merge(config, {\r\n vuxVariableMap: rs\r\n })\r\n }\r\n }\r\n\r\n /**\r\n * ======== read vux locales and set globally ========\r\n */\r\n if (hasPlugin('vux-ui', vuxConfig.plugins)) {\r\n let vuxLocalesPath = path.resolve(vuxConfig.options.projectRoot, 'node_modules/vux/src/locales/all.yml')\r\n if (vuxConfig.options.vuxDev) {\r\n vuxLocalesPath = path.resolve(vuxConfig.options.projectRoot, 'src/locales/all.yml')\r\n }\r\n try {\r\n const vuxLocalesContent = fs.readFileSync(vuxLocalesPath, 'utf-8')\r\n let vuxLocalesJson = yaml.safeLoad(vuxLocalesContent)\r\n\r\n if (isWebpack2) {\r\n config.plugins.push(new webpack.LoaderOptionsPlugin({\r\n vuxLocales: vuxLocalesJson\r\n }))\r\n } else {\r\n config = merge(config, {\r\n vuxLocales: vuxLocalesJson\r\n })\r\n }\r\n } catch (e) {}\r\n }\r\n\r\n /**\r\n * ======== append vux-loader ========\r\n */\r\n let loaderString = vuxConfig.options.loaderString || 'vux-loader!vue-loader'\r\n const rewriteConfig = vuxConfig.options.rewriteLoaderString\r\n if (typeof rewriteConfig === 'undefined' || rewriteConfig === true) {\r\n let hasAppendVuxLoader = false\r\n\r\n config.module.rules.forEach(function (rule) {\r\n const hasVueLoader = typeof rule.use === 'object' && rule.use.filter(one => {\r\n return one.loader === 'vue-loader'\r\n }).length > 0\r\n })\r\n }\r\n\r\n /**\r\n * ======== append js-loader for ts-loader ========\r\n */\r\n config.module[loaderKey].forEach(function (rule) {\r\n if (rule.use && (rule.use[0] === 'ts-loader' || (typeof rule.use[0] === 'object' && rule.use[0].loader === 'ts-loader'))) {\r\n rule.use.push(jsLoader)\r\n } else {\r\n if (rule.loader === 'ts' || rule.loader === 'ts-loader' || (/\\bts\\b/.test(rule.loader) && !/!/.test(rule.loader))) {\r\n if (isWebpack2 && (rule.query || rule.options)) {\r\n let options\r\n if(rule.options){\r\n options = rule.options\r\n delete rule.options\r\n }else{\r\n options = rule.query\r\n delete rule.query\r\n }\r\n rule.use = [{\r\n loader: 'ts-loader',\r\n options: options\r\n }, jsLoader]\r\n delete rule.loader\r\n } else {\r\n rule.loader = 'ts-loader!' + jsLoader\r\n }\r\n }\r\n }\r\n })\r\n\r\n /**\r\n * ======== append js-loader ========\r\n */\r\n config.module[loaderKey].forEach(function (rule) {\r\n if (Array.isArray(rule.use)) {\r\n if (rule.use.filter(one => one.loader === 'babel-loader').length) {\r\n rule.use.push({\r\n loader: jsLoader\r\n })\r\n }\r\n } else {\r\n if (rule.loader === 'babel' || rule.loader === 'babel-loader' || (/babel/.test(rule.loader) && !/!/.test(rule.loader))) {\r\n if (isWebpack2 && (rule.query || rule.options)) {\r\n let options\r\n if(rule.options){\r\n options = rule.options\r\n delete rule.options\r\n }else{\r\n options = rule.query\r\n delete rule.query\r\n }\r\n rule.use = [{\r\n loader: 'babel-loader',\r\n options: options\r\n }, jsLoader]\r\n delete rule.loader\r\n } else {\r\n rule.loader = 'babel-loader!' + jsLoader\r\n }\r\n }\r\n }\r\n })\r\n\r\n config.module.rules.forEach(function (rule) {\r\n if (Array.isArray(rule.oneOf)) {\r\n rule.oneOf.forEach(function (one) {\r\n one.use.forEach(function (line) {\r\n if (line.loader === 'less-loader') {\r\n line.options = Object.assign(line.options || {}, {\r\n modifyVars: variables\r\n })\r\n }\r\n })\r\n })\r\n }\r\n })\r\n\r\n /**\r\n * ======== set compiling vux js source ========\r\n */\r\n if (hasPlugin('vux-ui', vuxConfig.plugins)) {\r\n // if (typeof vuxConfig.options.vuxSetBabel === 'undefined' || vuxConfig.options.vuxSetBabel === true) {\r\n // config.module[loaderKey].push(getBabelLoader(vuxConfig.options.projectRoot, 'vux', vuxConfig.options.vuxDev))\r\n // }\r\n }\r\n\r\n // set done plugin\r\n if (hasPlugin('build-done-callback', vuxConfig.plugins)) {\r\n const callbacks = vuxConfig.plugins.filter(function (one) {\r\n return one.name === 'build-done-callback'\r\n }).map(function (one) {\r\n return one.fn\r\n })\r\n config.plugins.push(new DonePlugin(callbacks))\r\n }\r\n\r\n config.plugins.push(new DonePlugin([function () {\r\n if (global.reportInterval) {\r\n clearInterval(global.reportInterval)\r\n global.reportInterval = null\r\n }\r\n }]))\r\n\r\n // duplicate styles\r\n if (hasPlugin('duplicate-style', vuxConfig.plugins)) {\r\n let plugin = getFirstPlugin('duplicate-style', vuxConfig.plugins)\r\n let options = plugin.options || {}\r\n config.plugins.push(new DuplicateStyle(options))\r\n }\r\n\r\n if (hasPlugin('build-emit-callback', vuxConfig.plugins)) {\r\n config.plugins = config.plugins || []\r\n const callbacks = vuxConfig.plugins.filter(function (one) {\r\n return one.name === 'build-emit-callback'\r\n }).map(function (one) {\r\n return one.fn\r\n })\r\n if (callbacks.length) {\r\n config.plugins.push(new EmitPlugin(callbacks[0]))\r\n }\r\n }\r\n\r\n if (hasPlugin('html-build-callback', vuxConfig.plugins)) {\r\n let pluginConfig = getFirstPlugin('html-build-callback', vuxConfig.plugins)\r\n config.plugins.push(new htmlBuildCallbackPlugin(pluginConfig))\r\n }\r\n\r\n /**\r\n *======== global variable V_LOCALE ========\r\n */\r\n let locale = ''\r\n if (hasPlugin('i18n', vuxConfig.plugins)) {\r\n const config = getFirstPlugin('i18n', vuxConfig.plugins)\r\n if (config.vuxStaticReplace && config.vuxLocale) {\r\n locale = config.vuxLocale\r\n } else if (config.vuxStaticReplace === false) {\r\n locale = 'MULTI'\r\n }\r\n } else {\r\n locale = 'zh-CN'\r\n }\r\n\r\n /**\r\n *======== global variable V_SSR ========\r\n */\r\n let ssr = false\r\n if (vuxConfig.options.ssr) {\r\n ssr = true\r\n }\r\n\r\n // check if already defined V_LOCALE\r\n let matchLocale = config.plugins.filter(one => {\r\n if (one.constructor.name === 'DefinePlugin') {\r\n if (one.definitions && one.definitions.V_LOCALE) {\r\n return true\r\n }\r\n }\r\n return false\r\n })\r\n if (!matchLocale.length) {\r\n config.plugins.push(new webpack.DefinePlugin({\r\n V_LOCALE: JSON.stringify(locale),\r\n V_SSR: JSON.stringify(ssr),\r\n SUPPORT_SSR_TAG: JSON.stringify(true)\r\n }))\r\n }\r\n\r\n\r\n // save to file so it can be read when using thread-loader\r\n const cacheFile = require.resolve('vux').replace('index.js', '.config.cache.json')\r\n fs.writeFileSync(cacheFile, JSON.stringify(vuxConfig, null, 2))\r\n\r\n\r\n oldConfig = merge(oldConfig, config)\r\n\r\n return config\r\n}\r\n\r\n\r\n/**\r\n * use babel so component's js can be compiled\r\n */\r\nfunction getBabelLoader(projectRoot, name, isDev) {\r\n name = name || 'vux'\r\n if (!projectRoot) {\r\n projectRoot = path.resolve(__dirname, '../../../')\r\n if (/\\.npm/.test(projectRoot)) {\r\n projectRoot = path.resolve(projectRoot, '../../../')\r\n }\r\n }\r\n\r\n let componentPath\r\n let regex\r\n if (!isDev) {\r\n componentPath = fs.realpathSync(projectRoot + `/node_modules/${name}/`) // https://github.com/webpack/webpack/issues/1643\r\n regex = new RegExp(`node_modules.*${name}.src.*?js$`)\r\n } else {\r\n componentPath = projectRoot\r\n regex = new RegExp(`${projectRoot}.src.*?js$`)\r\n }\r\n\r\n return {\r\n test: regex,\r\n loader: 'babel-loader',\r\n include: componentPath\r\n }\r\n}\r\n\r\nfunction setWebpackConfig(oriConfig, appendConfig, isWebpack2) {\r\n if (isWebpack2) {\r\n oriConfig.plugins.push(new webpack.LoaderOptionsPlugin(appendConfig))\r\n } else {\r\n oriConfig = merge(oriConfig, appendConfig)\r\n }\r\n return oriConfig\r\n}\r\n\r\nfunction getOnePlugin(name, plugins) {\r\n const matches = plugins.filter(function (one) {\r\n return one.name === name\r\n })\r\n return matches.length ? matches[0] : null\r\n}\r\n" }, { "path": "packages/loader/src/js-loader.js", "content": "'use strict'\n\nconst utils = require('loader-utils')\nconst path = require('path')\nconst pkg = require('../package')\n\nconst parser = require('./libs/import-parser-v2')\nconst fs = require('fs')\n\nmodule.exports = function (source) {\n\n if (!/(\\.jsx?|\\.tsx?|\\.vue)$/.test(this.resourcePath) || /node_modules/.test(this.resourcePath)) {\n return source\n }\n \n this.cacheable()\n const _this = this\n const vuxConfig = this.vux || utils.getLoaderConfig(this, 'vux')\n \n // 打包时无法获取选项，默认为使用 vux ui\n if (/}\\s+from(.*?)('|\")vux/.test(source)) {\n \n const maps = this.vuxMaps || utils.getLoaderConfig(this, 'vuxMaps')\n // source = parser(source, function (opts) {\n // let str = ''\n // opts.components.forEach(function (component) {\n // let file = `vux/${maps[component.originalName]}`\n // if (vuxConfig.options.vuxDev) {\n // if (vuxConfig.options.resolveVuxDir) {\n // file = file.replace('vux/src/', vuxConfig.options.resolveVuxDir)\n // } else {\n // file = file.replace('vux/src/', './')\n // }\n // }\n // str += `import ${component.newName} from '${file}'\\n`\n // })\n // return str\n // }, 'vux') \n }\n\n source = parser(source, this.resourcePath)\n\n if(/** vuxConfig.options.vuxDev && **/ /main\\.js/.test(this.resourcePath)) {\n source = source.replace(/!vux\\/src/g, '!.')\n }\n\n if (vuxConfig && vuxConfig.plugins && vuxConfig.plugins.length) {\n vuxConfig.plugins.forEach(function (plugin) {\n // js-parser\n if (plugin.name === 'js-parser') {\n if (plugin.fn) {\n if (plugin.test && plugin.test.test(_this.resourcePath)) {\n source = plugin.fn.call(_this, source)\n } else if (!plugin.test) {\n source = plugin.fn.call(_this, source)\n }\n }\n }\n })\n }\n\n /**\n if (/main\\.js/.test(this.resourcePath) && process.env.NODE_ENV === 'development') {\n if (this.options && this.options.context) {\n const pkgPath = vuxConfig.options.vuxDev ? path.join(this.options.context, 'package.json') : path.join(this.options.context, 'node_modules/vux/package.json')\n const vuxPkg = require(pkgPath)\n const webpackPath = path.join(this.options.context, 'node_modules/webpack/package.json')\n const webpackPkg = require(webpackPath)\n const nodeVersion = process.version.match(/^v(\\d+\\.\\d+)/)[1]\n const style = 'background: #35495e; color: yellow;'\n if (typeof vuxConfig.options.showVuxVersionInfo === 'undefined' || vuxConfig.options.showVuxVersionInfo === true) {\n source += `\\n;console.info('[VUX] %cvux@${vuxPkg.version}, vux-loader@${pkg.version}, webpack@${webpackPkg.version}, node@${nodeVersion}\\\\n%c[VUX] 建议反馈请访问 https://github.com/airyland/vux/issues \\\\n[VUX] 关闭该提示请在 vux-loader 配置 options: { showVuxVersionInfo: false }', '${style}', '')`\n }\n }\n }\n **/\n\n return source\n}" }, { "path": "packages/loader/src/libs/babel-transform-imports/.babelrc", "content": "{\n \"presets\": [\"es2015\"]\n}" }, { "path": "packages/loader/src/libs/babel-transform-imports/.gitignore", "content": "node_modules\nnpm-debug.log" }, { "path": "packages/loader/src/libs/babel-transform-imports/README.md", "content": "# babel-plugin-transform-imports\n\nThis a fork of https://bitbucket.org/amctheatres/babel-transform-imports.git\n\nTransforms member style imports:\n\n```javascript\nimport { Row, Grid as MyGrid } from 'react-bootstrap';\nimport { merge } from 'lodash';\n```\n\n...into default style imports:\n\n```javascript\nimport Row from 'react-bootstrap/lib/Row';\nimport MyGrid from 'react-bootstrap/lib/Grid';\nimport merge from 'lodash/merge';\n```\n\n*Note: this plugin is not restricted to the react-bootstrap and lodash\nlibraries. You may use it with any library.*\n\n## Why?\n\nWhen Babel encounters a member style import such as:\n\n```javascript\nimport { Grid, Row, Col } from 'react-bootstrap';\n```\n\nit will generate something similarish to:\n\n```javascript\nvar reactBootstrap = require('react-bootstrap');\nvar Grid = reactBootstrap.Grid;\nvar Row = reactBootstrap.Row;\nvar Col = reactBootstrap.Col;\n```\n\nWhich causes the entire library to be loaded, even though only some components\nare needed. Some libraries are rather large and pulling in the entire module\nwould cause unnecessary bloat to your client optimized (webpack etc.) bundle.\nThe only way around this is to use default style imports:\n\n```javascript\nimport Grid from 'react-bootstrap/lib/Grid';\nimport Row from 'react-bootstrap/lib/Row';\nimport Col from 'react-bootstrap/lib/Col';\n```\n\nBut, the more pieces we need, the more this sucks. This plugin will allow you\nto pull in just the pieces you need, without a separate import for each item.\nAdditionally, it can be configured to throw when somebody accidentally writes\nan import which would cause the entire module to resolve, such as:\n\n```javascript\nimport Bootstrap, { Grid } from 'react-bootstrap';\n// -- or --\nimport * as Bootstrap from 'react-bootstrap';\n```\n\n## Installation\n\n```\nnpm install --save-dev babel-plugin-transform-imports\n```\n\n## Usage\n\n*In .babelrc:*\n\n```json\n{\n \"plugins\": [\n [\"transform-imports\", {\n \"react-bootstrap\": {\n \"transform\": \"react-bootstrap/lib/${member}\",\n \"preventFullImport\": true\n },\n \"lodash\": {\n \"transform\": \"lodash/${member}\",\n \"preventFullImport\": true\n }\n }]\n ]\n}\n```\n\n## Advanced Transformations\n\n### Using regular expressions\n\nSometimes, you may wish to use regular expressions in your transformation (for\nexample, to enforce the same convention in all folder levels on the structure\nof your library).\n\n.babelrc:\n\n```json\n{\n \"plugins\": [\n [\"transform-imports\", {\n \"my-library\\/?(((\\\\w*)?\\/?)*)\": {\n \"transform\": \"my-library/${1}/${member}\",\n \"preventFullImport\": true\n }\n }]\n ]\n}\n```\n\nCauses this code:\n\n```javascript\nimport { MyModule } from 'my-library';\nimport { App } from 'my-library/components';\nimport { Header, Footer } from 'my-library/components/App';\n```\n\nto become:\n\n```javascript\nimport MyModule from 'my-library/MyModule';\nimport App from 'my-library/components/App';\nimport Header from 'my-library/components/App/Header';\nimport Footer from 'my-library/components/App/Footer';\n```\n\n### Using a function as the transformer\n\nIf you need more advanced or more specific transformation logic, and are using\nBabel 7+ with a `.babelrc.js` file, you may provide a function instead of a\nstring for the `transform` option:\n\n.babelrc.js:\n\n```javascript\nmodule.exports = {\n presets: ['@babel/env'],\n plugins: [\n ['transform-imports', {\n 'my-library': {\n transform: function(importName, matches) {\n return `my-library/etc/${importName.toUpperCase()}`;\n },\n preventFullImport: true,\n }\n }]\n ]\n};\n```\n\n### Using a transformation file\n\nIf you need the above flexibility of using a function as a transformer, but\nare still on Babel 6 or cannot use a `.babelrc.js` file for some reason, you\nmay provide a path to a .js file which exports a function to run instead.\nKeep in mind that the .js file will be `require`d relative from this plugin's\npath, likely located in `/node_modules/babel-plugin-transform-imports`. You\nmay provide any filename, as long as it ends with `.js`.\n\n.babelrc:\n\n```json\n{\n \"plugins\": [\n [\"transform-imports\", {\n \"my-library\": {\n \"transform\": \"../../path/to/transform.js\",\n \"preventFullImport\": true\n }\n }]\n ]\n}\n```\n\n/path/to/transform.js:\n\n```javascript\nmodule.exports = function(importName, matches) {\n return 'my-library/etc/' + importName.toUpperCase();\n};\n```\n\n## Webpack\n\nThis can be used as a plugin with babel-loader.\n\nwebpack.config.js:\n```javascript\nmodule: {\n rules: [{\n test: /\\.js$/,\n exclude: /(node_modules|bower_components)/,\n use: {\n loader: 'babel-loader',\n query: {\n plugins: [\n [require('babel-plugin-transform-imports'), {\n 'my-library': {\n transform: function(importName, matches) {\n return 'my-library/etc/' + importName.toUpperCase();\n },\n preventFullImport: true\n }\n }]\n ]\n }\n }\n }]\n}\n```\n\n## Options\n\n| Name | Type | Required | Default | Description |\n| --- | --- | --- | --- | --- |\n| `transform` | `string or function` | yes | `undefined` | The library name to use instead of the one specified in the import statement. ${member} will be replaced with the import name, aka Grid/Row/Col/etc., and ${1-n} will be replaced by any matched regular expression groups. Alternatively, pass a path to a .js file which exports a function to process the transform, which is invoked with parameters: (importName, matches). If using Babel 7+, a function may be passed directly. (see Advanced Transformations) |\n| `preventFullImport` | `boolean` | no | `false` | Whether or not to throw when an import is encountered which would cause the entire module to be imported. |\n| `camelCase` | `boolean` | no | `false` | When set to true, runs ${member} through _.camelCase. |\n| `kebabCase` | `boolean` | no | `false` | When set to true, runs ${member} through _.kebabCase. |\n| `snakeCase` | `boolean` | no | `false` | When set to true, runs ${member} through _.snakeCase. |\n| `skipDefaultConversion` | `boolean` | no | `false` | When set to true, will preserve `import { X }` syntax instead of converting to `import X`. |\n" }, { "path": "packages/loader/src/libs/babel-transform-imports/index.js", "content": "var types = require('babel-types');\nvar isValidPath = require('is-valid-path');\nvar camel = require('lodash.camelcase');\nvar findKey = require('lodash.findkey');\nvar kebab = require('lodash.kebabcase');\nvar snake = require('lodash.snakecase');\nvar pathLib = require('path');\n\nfunction findOptionFromSource(source, state) {\n var opts = state.opts;\n if (opts[source]) return source;\n\n return\n\n var opt = findKey(opts, function (o, _opt) {\n return !isValidPath(_opt) && new RegExp(_opt).test(source);\n });\n if (opt) return opt;\n\n var isRelativePath = source.match(/^\\.{0,2}\\//);\n // This block handles relative paths, such as ./components, ../../components, etc.\n if (isRelativePath) {\n var _source = pathLib.resolve(pathLib.join(\n source[0] === '/' ? '' : pathLib.dirname(state.file.opts.filename),\n source\n ));\n\n if (opts[_source]) {\n return _source;\n }\n }\n}\n\nfunction getMatchesFromSource(opt, source) {\n var regex = new RegExp(opt, 'g');\n var matches = [];\n var m;\n while ((m = regex.exec(source)) !== null) {\n if (m.index === regex.lastIndex) regex.lastIndex++;\n m.forEach(function(match) {\n matches.push(match);\n });\n }\n return matches;\n}\n\nfunction barf(msg) {\n throw new Error('babel-plugin-transform-imports: ' + msg);\n}\n\nfunction transform(transformOption, importName, matches) {\n var isFunction = typeof transformOption === 'function';\n if (/\\.js$/i.test(transformOption) || isFunction) {\n var transformFn;\n\n try {\n transformFn = isFunction ? transformOption : require(transformOption);\n } catch (error) {\n barf('failed to require transform file ' + transformOption);\n }\n\n if (typeof transformFn !== 'function') {\n barf('expected transform function to be exported from ' + transformOption);\n }\n\n return transformFn(importName, matches);\n }\n\n return transformOption.replace(/\\$\\{\\s?([\\w\\d]*)\\s?\\}/ig, function(str, g1) {\n if (g1 === 'member') return importName;\n return matches[g1];\n });\n}\n\nmodule.exports = function() {\n return {\n visitor: {\n ImportDeclaration: function (path, state) {\n // https://github.com/babel/babel/tree/master/packages/babel-types#timportdeclarationspecifiers-source\n\n // path.node has properties 'source' and 'specifiers' attached.\n // path.node.source is the library/module name, aka 'react-bootstrap'.\n // path.node.specifiers is an array of ImportSpecifier | ImportDefaultSpecifier | ImportNamespaceSpecifier\n\n var source = path.node.source.value;\n\n var opt = findOptionFromSource(source, state);\n var isRegexp = opt && !isValidPath(opt);\n var opts = state.opts[opt];\n var hasOpts = !!opts;\n\n if (hasOpts) {\n if (!opts.transform) {\n barf('transform option is required for module ' + source);\n }\n\n var transforms = [];\n\n var fullImports = path.node.specifiers.filter(function(specifier) { return specifier.type !== 'ImportSpecifier' });\n var memberImports = path.node.specifiers.filter(function(specifier) { return specifier.type === 'ImportSpecifier' });\n\n if (fullImports.length > 0) {\n // Examples of \"full\" imports:\n // import * as name from 'module'; (ImportNamespaceSpecifier)\n // import name from 'module'; (ImportDefaultSpecifier)\n\n if (opts.preventFullImport) {\n barf('import of entire module ' + source + ' not allowed due to preventFullImport setting');\n }\n\n if (memberImports.length > 0) {\n // Swap out the import with one that doesn't include member imports. Member imports should each get their own import line\n // transform this:\n // import Bootstrap, { Grid } from 'react-bootstrap';\n // into this:\n // import Bootstrap from 'react-bootstrap';\n transforms.push(types.importDeclaration(fullImports, types.stringLiteral(source)));\n }\n }\n\n var matches = isRegexp ? getMatchesFromSource(opt, source) : [];\n\n memberImports.forEach(function(memberImport) {\n // Examples of member imports:\n // import { member } from 'module'; (ImportSpecifier)\n // import { member as alias } from 'module' (ImportSpecifier)\n\n // transform this:\n // import { Grid as gird } from 'react-bootstrap';\n // into this:\n // import gird from 'react-bootstrap/lib/Grid';\n // or this, if skipDefaultConversion = true:\n // import { Grid as gird } from 'react-bootstrap/lib/Grid';\n\n var importName = memberImport.imported.name;\n if (opts.camelCase) importName = camel(importName);\n if (opts.kebabCase) importName = kebab(importName);\n if (opts.snakeCase) importName = snake(importName);\n\n var replace = transform(opts.transform, importName, matches);\n\n var newImportSpecifier = (opts.skipDefaultConversion)\n ? memberImport\n : types.importDefaultSpecifier(types.identifier(memberImport.local.name));\n transforms.push(types.importDeclaration(\n [newImportSpecifier],\n types.stringLiteral(replace)\n ));\n });\n\n if (transforms.length > 0) {\n path.replaceWithMultiple(transforms);\n }\n }\n }\n }\n }\n}\n" }, { "path": "packages/loader/src/libs/babel-transform-imports/package.json", "content": "{\n \"name\": \"babel-plugin-transform-imports\",\n \"version\": \"1.5.1\",\n \"description\": \"Transforms member style imports (import {x} from 'y') into default style imports (import x from 'y/lib/x')\",\n \"keywords\": [\n \"babel\",\n \"transform\",\n \"import\",\n \"react-bootstrap\",\n \"lodash\"\n ],\n \"main\": \"index.js\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://bitbucket.org/amctheatres/babel-transform-imports.git\"\n },\n \"homepage\": \"https://bitbucket.org/amctheatres/babel-transform-imports\",\n \"scripts\": {\n \"test\": \"node_modules/.bin/mocha --compilers js:babel-register\"\n },\n \"author\": \"AMC Theatres\",\n \"license\": \"ISC\",\n \"dependencies\": {\n \"babel-types\": \"^6.6.0\",\n \"is-valid-path\": \"^0.1.1\",\n \"lodash.camelcase\": \"^4.3.0\",\n \"lodash.findkey\": \"^4.6.0\",\n \"lodash.kebabcase\": \"^4.1.1\",\n \"lodash.snakecase\": \"^4.1.1\"\n },\n \"devDependencies\": {\n \"babel-core\": \"^6.6.0\",\n \"babel-preset-es2015\": \"^6.6.0\",\n \"mocha\": \"^2.4.5\"\n }\n}\n" }, { "path": "packages/loader/src/libs/babel-transform-imports/test/invalidTransform.js", "content": "module.exports = 'this should be a function';" }, { "path": "packages/loader/src/libs/babel-transform-imports/test/tests.js", "content": "import assert from 'assert';\nimport * as babel from 'babel-core';\nimport path from 'path';\n\nfunction createOptions({\n preventFullImport = false,\n transform = 'react-bootstrap/lib/${member}',\n camelCase = false,\n kebabCase = false,\n snakeCase = false,\n skipDefaultConversion = false,\n libraryName = 'react-bootstrap'\n}) {\n return {\n [libraryName]: { transform, preventFullImport, camelCase, kebabCase, snakeCase, skipDefaultConversion }\n };\n};\n\nconst fullImportRegex = /require\\('react-bootstrap'\\);$/gm;\nconst memberImportRegex = /require\\('react-bootstrap\\/lib\\/.+'\\);$/gm;\n\nfunction occurrences(regex, test) {\n return (test.match(regex) || []).length;\n}\n\nfunction transform(code, options = createOptions({})) {\n return babel.transform(code, {\n presets: ['es2015'],\n plugins: [['./index', options]]\n }).code;\n}\n\ndescribe('import transformations', function() {\n it('should handle default imports', function() {\n const code = transform(`import Bootstrap from 'react-bootstrap';`);\n\n assert.equal(occurrences(fullImportRegex, code), 1, 'number of full imports should be 1');\n assert.equal(occurrences(memberImportRegex, code), 0, 'number of member imports should be 0');\n });\n\n it('should handle namespace imports', function() {\n const code = transform(`import * as Bootstrap from 'react-bootstrap';`);\n\n assert.equal(occurrences(fullImportRegex, code), 1, 'number of full imports should be 1');\n assert.equal(occurrences(memberImportRegex, code), 0, 'number of member imports should be 0');\n });\n\n it('should handle member imports', function() {\n const code = transform(`import { Grid, Row as row } from 'react-bootstrap';`);\n\n assert.equal(occurrences(fullImportRegex, code), 0, 'number of full imports should be 0');\n assert.equal(occurrences(memberImportRegex, code), 2, 'number of member imports should be 2');\n });\n\n it('should handle a mix of member and default import styles', function() {\n const code = transform(`import Bootstrap, { Grid, Row as row } from 'react-bootstrap';`);\n\n assert.equal(occurrences(fullImportRegex, code), 1, 'number of full imports should be 1');\n assert.equal(occurrences(memberImportRegex, code), 2, 'number of member imports should be 2');\n });\n\n it('should handle relative filenames', function() {\n const libraryName = path.join(__dirname, '../local/path');\n const _transform = path.join(__dirname, '../local/path/${member}');\n const options = createOptions({ libraryName, transform: _transform })\n const code = transform(`import { LocalThing } from './local/path'`, options);\n\n assert.equal(/require\\('.*LocalThing'\\);$/m.test(code), true, 'LocalThing should be directly required');\n });\n\n it('should handle relative files with regex expressions', function() {\n const libraryName = '((\\.{1,2}\\/?)*)\\/local\\/path';\n const _transform = '${1}/local/path/${member}';\n const options = createOptions({ libraryName, transform: _transform })\n const code = transform(`import { LocalThing } from '../../local/path'`, options);\n\n assert.equal(/require\\('\\.\\.\\/\\.\\.\\/local\\/path\\/LocalThing'\\);$/m.test(code), true, 'regex is transformed');\n });\n\n it('should handle regex expressions', function() {\n const libraryName = 'package-(\\\\w+)\\/?(((\\\\w*)?\\/?)*)';\n const _transform = 'package-${1}/${2}/${member}';\n const options = createOptions({ libraryName, transform: _transform })\n const code = transform(`import { LocalThing } from 'package-one/local/path'`, options);\n\n assert.equal(/require\\('package-one\\/local\\/path\\/LocalThing'\\);$/m.test(code), true, 'regex is transformed');\n });\n});\n\ndescribe('camelCase plugin option', function() {\n it('should use camel casing when set', function() {\n const options = createOptions({ camelCase: true });\n\n const code = transform(`import { CamelMe } from 'react-bootstrap';`, options);\n\n assert.notEqual(code.indexOf('camelMe'), -1, 'member name CamelMe should be transformed to camelMe');\n });\n});\n\ndescribe('kebabCase plugin option', function() {\n it('should use kebab casing when set', function() {\n const options = createOptions({ kebabCase: true });\n\n const code = transform(`import { KebabMe } from 'react-bootstrap';`, options);\n\n assert.notEqual(code.indexOf('kebab-me'), -1, 'member name KababMe should be transformed to kebab-me');\n });\n});\n\ndescribe('snakeCase plugin option', function() {\n it('should use snake casing when set', function() {\n const options = createOptions({ snakeCase: true });\n\n const code = transform(`import { SnakeMe } from 'react-bootstrap';`, options);\n\n assert.notEqual(code.indexOf('snake_me'), -1, 'member name SnakeMe should be transformed to snake_me');\n });\n});\n\ndescribe('transform as function', function() {\n it('should throw when provided filename is invalid', function() {\n const options = createOptions({ transform: 'missingFile.js' });\n\n assert.throws(() => {transform(`import { Row } from 'react-bootstrap';`, options)});\n });\n\n it('should throw when provided filename does not resolve to a function', function() {\n const options = createOptions({ transform: './test/invalidTransform.js' });\n\n assert.throws(() => {transform(`import { Row } from 'react-bootstrap';`, options)});\n });\n\n it('should properly execute transform function when provided', function() {\n const options = createOptions({ transform: './test/transform.js' });\n\n const code = transform(`import { upperCaseMe } from 'react-bootstrap';`, options);\n\n assert.notEqual(code.indexOf('UPPERCASEME'), -1, 'member name upperCaseMe should be transformed to UPPERCASEME');\n });\n\n it('should call the transform as a function when provided as so', function() {\n const options = createOptions({ transform: function(input) { return `path/${input}`; } });\n\n const code = transform(`import { somePath } from 'react-bootstrap';`, options);\n\n assert.notEqual(code.indexOf('path/somePath'), -1, 'function should transform somePath to path/somePath');\n });\n});\n\ndescribe('preventFullImport plugin option', function() {\n it('should throw on default imports when truthy', function() {\n const options = createOptions({ preventFullImport: true });\n\n assert.throws(() => {transform(`import Bootstrap from 'react-bootstrap';`, options)});\n });\n\n it('should throw on namespace imports when truthy', function() {\n const options = createOptions({ preventFullImport: true });\n\n assert.throws(() => {transform(`import * as Bootstrap from 'react-bootstrap';`, options)});\n });\n\n it('should not throw on member imports when truthy', function() {\n const options = createOptions({ preventFullImport: true });\n\n assert.doesNotThrow(() => {transform(`import { Grid, Row as row } from 'react-bootstrap';`, options)});\n });\n});\n\ndescribe('skipDefaultConversion plugin option', function() {\n it('should retain named import syntax when enabled', function() {\n const options = createOptions({ skipDefaultConversion: true });\n\n const code = transform(`import { Grid, Row as row } from 'react-bootstrap';`, options);\n\n assert.equal(code.indexOf('_interopRequireDefault'), -1, 'skipDefaultConversion should not allow conversion to default import');\n })\n});\n\ndescribe('edge cases', function() {\n it('should throw when transform plugin option is missing', function() {\n const options = createOptions({ transform: null });\n\n assert.throws(() => {transform(`import Bootstrap from 'react-bootstrap';`, options)});\n });\n});\n" }, { "path": "packages/loader/src/libs/babel-transform-imports/test/transform.js", "content": "module.exports = function(importName) {\n return 'test/lib/' + importName.toUpperCase();\n}" }, { "path": "packages/loader/src/libs/get-less-variables.js", "content": "'use strict'\nconst fs = require('fs')\nconst path = require('path')\nconst stripeComments = require('strip-css-comments')\n\nmodule.exports = function getLessVariables(theme) {\n return getContent(theme)\n}\n\n\nfunction trim (str) {\n if (!str) {\n return ''\n } else {\n return str.replace(/^\\s+|\\s+$/g, '')\n }\n}\n\nfunction getContent (file) {\n let themeContent = fs.readFileSync(file, 'utf-8')\n themeContent = stripeComments(themeContent)\n var variables = {}\n themeContent.split('\\n').forEach(function (item) {\n if (trim(item).indexOf('//') === 0 || trim(item).indexOf('/*') === 0) {\n return\n }\n\n // has comments\n if (item.indexOf('//') > 0) {\n item = trim(item.slice(0, item.indexOf('//')))\n }\n if (item.indexOf('/*') > 0) {\n item = trim(item.slice(0, item.indexOf('/*')))\n }\n\n var _pair = item.split(':')\n\n if (_pair.length < 2) {\n if (!/@import/.test(_pair[0])) {\n return\n }\n let partFile = _pair[0]\n .replace(/;/g, '')\n .replace('@import', '')\n .replace(/'/g, '')\n .replace(/\"/g, '')\n .replace(/\\s+/g, '').trim()\n const partPath = path.resolve(path.dirname(file), partFile)\n let partVariables = getContent(partPath)\n for (let i in partVariables) {\n variables[i] = partVariables[i]\n }\n } else {\n let key = _pair[0].replace('\\r', '').replace('@', '')\n if (!key) return;\n key = key.trim()\n if (!/^[A-Za-z0-9_-]*$/.test(key)) {\n console.log(`[vux-loader] 疑似不合法命名，将被忽略：${key}`)\n return\n }\n var value = _pair[1].replace(';', '').replace('\\r', '').replace(/^\\s+|\\s+$/g, '')\n variables[key] = value\n }\n\n })\n return variables\n}" }, { "path": "packages/loader/src/libs/getTag.js", "content": "function getTag(content, tag, action='remove') {\n const reg = new RegExp(`<${tag}[^>]*>([\\\\s\\\\S]*?)<\\/${tag}>`, 'g')\n content = content.replace(reg, function (tag, text) {\n if (action ==='remove') {\n return ''\n } else if (action === 'reserve') {\n return text\n }\n })\n return content\n}\n\nfunction removeTagCode (content, tag) {\n return getTag(content, tag, 'remove')\n}\n\nfunction reserveTagCode (content, tag) {\n return getTag(content, tag, 'reserve')\n}\n\nmodule.exports = {\n removeTagCode: removeTagCode,\n reserveTagCode: reserveTagCode,\n getTag: getTag\n}\n" }, { "path": "packages/loader/src/libs/import-parser-v2.js", "content": "const babel = require('@babel/core')\nconst transformPlugin = require('./babel-transform-imports/index')\n\nconst map = require('vux/src/components/map.json')\n\nfunction transform (code, filename) {\n\tconst rs = babel.transform(code, {\n plugins: [[transformPlugin, {\n vux: {\n preventFullImport: true,\n libraryName: 'vux',\n camelCase: false,\n kebabCase: false,\n snakeCase: false,\n transform: function (importName, matches) {\n return `vux/${map[importName]}`\n }\n }\n }]],\n 'filename': filename\n }).code\n\n return `/* this file is transformed by vux-loader */\n/* eslint-disable */\n${rs}`\n}\n\nmodule.exports = transform\n" }, { "path": "packages/loader/src/libs/import-parser.js", "content": "'use strict'\n\nconst stripComments = require('strip-comments')\n\nfunction parse(source, fn, moduleName) {\n // fix no space between import and { \n // ref https://github.com/airyland/vux/issues/1365\n source = source.replace(/import{/g, 'import {')\n source = source.replace(/\\/\\/\\n/g, '')\n source = trimLine(source)\n \n moduleName = moduleName || 'vux'\n if ((moduleName && source.indexOf(moduleName) === -1) || source.indexOf('import') === -1) {\n return source\n }\n const reg = getReg(moduleName)\n\n let replaceList = []\n removeComments(removeCommentLine(source)).replace(reg, function (match1, match2, match3) {\n // dirty way for the moment\n if(match1.indexOf('import') !== match1.lastIndexOf('import')) {\n match1 = match1.slice(match1.lastIndexOf('import'), match1.length)\n }\n\n const components = getNames(match1)\n\n if (fn) {\n const replaceString = fn({\n components: components,\n match1: match1,\n match2: match2,\n match3: match3,\n source: source\n })\n replaceList.push([match1, replaceString])\n }\n })\n source = removeCommentLine(source)\n replaceList.forEach(function (one) {\n source = source.replace(one[0], one[1])\n })\n return source\n}\n\nmodule.exports = parse\n\nfunction getReg(moduleName) {\n return new RegExp(`import\\\\s.*(\\\\n(?!import).*)*from(\\\\s)+('|\")${moduleName}('|\");*`, 'g')\n}\n\nfunction removeCommentLine (source) {\n const rs = source.split('\\n').map(function (line) {\n line = line.replace(/^\\s+|\\s+$/g, '')\n try {\n line = stripComments.line(line)\n } catch (e) {\n }\n return line\n }).join('\\n')\n return rs\n}\n\nfunction getNames(one) {\n const startIndex = one.indexOf('{')\n const endIndex = one.indexOf('}')\n const content = one.slice(startIndex + 1, endIndex)\n const list = content.split(',').map(one => {\n return one.replace(/^\\s+|\\s+$/g, '')\n .replace(/\\n/g, '')\n }).filter(one => {\n return !!one\n }).map(one => {\n\n if (!/\\s+/.test(one)) {\n return {\n originalName: one,\n newName: one\n }\n } else if (/\\s+as/.test(one)) {\n let _list = one.split('as').map(function (one) {\n return one.replace(/^\\s+|\\s+$/g, '')\n })\n return {\n originalName: _list[0],\n newName: _list[1]\n }\n }\n\n return one\n })\n return list\n}\n\nfunction trimLine (str) {\n let isImport = false\n let list = str.split('\\n')\n for (let i = 0; i < list.length; i++) {\n let currentLine = trim(list[i])\n if (/import/.test(currentLine) && !/from\\s+('|\")vux('|\")/.test(currentLine)) {\n isImport = true\n } else if (/from\\s+('|\")(.+)('|\")/.test(currentLine)) {\n if (isImport) {\n isImport = false\n }\n } else {\n if (isImport) {\n list[i] = trim(list[i])\n }\n } \n }\n return list.join('\\n')\n}\n\nfunction trim (str) {\n return str.replace(/^\\s+/, '').replace(/\\s+$/, '')\n}\n\n// http://james.padolsey.com/javascript/removing-comments-in-javascript/\nfunction removeComments(str) {\n str = ('__' + str + '__').split('');\n var mode = {\n singleQuote: false,\n doubleQuote: false,\n regex: false,\n blockComment: false,\n lineComment: false,\n condComp: false\n };\n for (var i = 0, l = str.length; i < l; i++) {\n\n if (mode.regex) {\n if (str[i] === '/' && str[i - 1] !== '\\'') {\n mode.regex = false;\n }\n continue;\n }\n\n if (mode.singleQuote) {\n if (str[i] === \"'\" && str[i - 1] !== '\\'') {\n mode.singleQuote = false;\n }\n continue;\n }\n\n if (mode.doubleQuote) {\n if (str[i] === '\"' && str[i - 1] !== '\\'') {\n mode.doubleQuote = false;\n }\n continue;\n }\n\n if (mode.blockComment) {\n if (str[i] === '*' && str[i + 1] === '/') {\n str[i + 1] = '';\n mode.blockComment = false;\n }\n str[i] = '';\n continue;\n }\n\n if (mode.lineComment) {\n if (str[i + 1] === 'n' || str[i + 1] === 'r') {\n mode.lineComment = false;\n }\n str[i] = '';\n continue;\n }\n\n if (mode.condComp) {\n if (str[i - 2] === '@' && str[i - 1] === '*' && str[i] === '/') {\n mode.condComp = false;\n }\n continue;\n }\n\n mode.doubleQuote = str[i] === '\"';\n mode.singleQuote = str[i] === \"'\";\n\n if (str[i] === '/') {\n\n if (str[i + 1] === '*' && str[i + 2] === '@') {\n mode.condComp = true;\n continue;\n }\n if (str[i + 1] === '*') {\n str[i] = '';\n mode.blockComment = true;\n continue;\n }\n if (str[i + 1] === '/') {\n str[i] = '';\n mode.lineComment = true;\n continue;\n }\n mode.regex = true;\n\n }\n\n }\n const rs = str.join('').slice(2, -2);\n return rs\n}\n" }, { "path": "packages/loader/src/libs/parse-demo-code.js", "content": "'use strict'\n\nconst parse = function (source, lang) {\n\n}\n\nconst code = `\n\n\nDefault:\n zh-CN: 默认\nQuantity:\n zh-CN: 数量\nhello:\n zh-CN: 你好\n\n`" }, { "path": "packages/loader/src/libs/parse-virtual-component.js", "content": "'use strict'\n\nmodule.exports = function (source, name, cb) {\n source = replaceEnd(source, name)\n const reg1 = new RegExp(`<${name}([\\\\s\\\\S]*?)>.*?`, 'g')\n source = source.replace(reg1, function (a, b) {\n let query = getAttributes(a)\n return cb(query, a)\n })\n // for \n const reg2 = new RegExp(`<${name}([\\\\s\\\\S]*?)\\/>`, 'g')\n source = source.replace(reg2, function (a, b) {\n let query = getAttributes(a)\n return cb(query, a)\n })\n return source\n}\n\nfunction replaceEnd(str, name) {\n const list = str.split('')\n\n let start = false\n let end = false\n for (let i = 0; i < list.length; i++) {\n if (list[i] === '<' && list[i + 1] !== '/') {\n if (list.slice(i + 1, i + 1 + name.length).join('') === name) {\n start = true\n } else {\n start = false\n }\n }\n if (list[i] === '/' && list[i + 1] === '>') {\n if (start) {\n end = true\n list[i] = 'V'\n list[i + 1] = 'V'\n }\n }\n }\n\n return list.join('').replace(/VV/g, `>`)\n}\n\nfunction getAttributes (string) {\n let match = string.match(/\\s+(.*?)=\"(.*?)\"/g)\n\n let obj = {}\n let list = match.map(one => {\n return one.replace(/^\\s+|\\s+$/g, '').replace(/\\.native/g, '')\n })\n\n for (let i = 0; i < list.length; i++) {\n const pair = list[i].split('=').map(one => {\n return one.replace(/\"/g, '')\n })\n if (pair.length === 2) {\n obj[pair[0]] = pair[1]\n } else if (pair.length > 2) {\n obj[pair[0]] = pair.slice(1).join('=')\n }\n\n }\n return {\n stringList: list.join(' '),\n arrayList: list,\n objectList: obj\n }\n}\n" }, { "path": "packages/loader/src/libs/parse-x-icon.js", "content": "'use strict'\n\nconst parseVirtualComponent = require('./parse-virtual-component')\nconst path = require('path')\nconst fs = require('fs')\n\nmodule.exports = function (source, config) {\n source = parseVirtualComponent(source, 'x-icon', function (query) {\n let size = query.objectList.size || 24\n let type = query.objectList.type\n let svgPath = path.resolve(config.options.projectRoot, `node_modules/vux/src/icons/${type}.svg`)\n if (config.options.vuxDev) {\n svgPath = path.resolve(config.options.projectRoot, `src/icons/${type}.svg`)\n }\n\n // merge classname\n let className = `vux-x-icon vux-x-icon-${type}`\n if (query.objectList.class) {\n className += ` ${query.objectList.class}`\n }\n\n let props = ''\n for (let i in query.objectList) {\n if (i !== 'class') {\n props += ` ${i}=\"${query.objectList[i]}\"`\n }\n }\n\n const content = fs.readFileSync(svgPath, 'utf-8')\n return content.replace('width=\"512\"', `width=\"${size}\"`)\n .replace('height=\"512\"', `height=\"${size}\"`)\n .replace('sdfdsf`\n\na = a.replace(/\\s+@mousedown=\"(.*?)\"/g, ' ')\na = a.replace(/\\s+@mouseover=\"(.*?)\"/g, ' ')\na = a.replace(/\\s+@mouseup=\"(.*?)\"/g, ' ')\n\nconsole.log(a)" }, { "path": "packages/loader/src/noop-loader.js", "content": "module.exports = function (source) {\n this.cacheable()\n return ''\n}\n" }, { "path": "packages/loader/src/script-loader.js", "content": "'use strict'\r\n\r\nconst utils = require('loader-utils')\r\nconst fs = require('fs')\r\nconst i18nReplaceForScript = require('../libs/replace-i18n-for-script').replace\r\nconst getI18nBlockWithLocale = require('../libs/get-i18n-block').getWithLocale\r\nconst path = require('path')\r\n// const parser = require('./libs/import-parser-v2')\r\n\r\n\r\nmodule.exports = function (source) {\r\n this.cacheable()\r\n const _this = this\r\n let config = this.vux || utils.getLoaderConfig(this, 'vux')\r\n\r\n // no config found when using thread-loader\r\n if (this['thread-loader']) {\r\n const configFile = require.resolve('vux/.config.cache.json')\r\n config = require(configFile)\r\n }\r\n\r\n let i18nPlugin\r\n const i18nPluginsMatch = config.plugins.filter(function (one) {\r\n return one.name === 'i18n'\r\n })\r\n if (i18nPluginsMatch.length) {\r\n i18nPlugin = i18nPluginsMatch[0]\r\n }\r\n let isVuxVueFile = this.resourcePath.replace(/\\\\/g, '/').indexOf('vux/src/components') > -1\r\n if (config.options.vuxDev && this.resourcePath.replace(/\\\\/g, '/').indexOf('src/components') > -1) {\r\n isVuxVueFile = true\r\n }\r\n\r\n const isVuxComponent = this.resourcePath.replace(/\\\\/g, '/').indexOf('/vux/src/components') > -1\r\n\r\n if (config.plugins.length) {\r\n config.plugins.forEach(function (plugin) {\r\n // script-parser\r\n if (plugin.name === 'script-parser') {\r\n if (plugin.fn) {\r\n source = plugin.fn.call(_this, source)\r\n }\r\n }\r\n })\r\n }\r\n\r\n if (config.options.useVuxUI && /}\\s+from(.*?)('|\")vux/.test(source)) {\r\n const maps = this.vuxMaps || utils.getLoaderConfig(this, 'vuxMaps')\r\n // source = parser(source, function (opts) {\r\n // let str = ''\r\n // opts.components.forEach(function (component) {\r\n // let file = `vux/${maps[component.originalName]}`\r\n // if (config.options.vuxDev) {\r\n // if (/App\\.vue/.test(_this.resourcePath)) {\r\n // file = file.replace(/vux\\/src/g, '.')\r\n // } else {\r\n // let relative = '..'\r\n // // component file import other functions\r\n // if (isVuxComponent && !/components/.test(file)) {\r\n // relative = '../..'\r\n // }\r\n\r\n // if (/demos/.test(_this.resourcePath)) {\r\n // const splits = _this.resourcePath.split('demos')[1].split(path.sep).length - 1\r\n // let dir = []\r\n // for (let i = 0; i < splits; i++) {\r\n // dir.push('..')\r\n // }\r\n // relative = dir.join('/')\r\n // }\r\n\r\n // if (config.options.resolveVuxDir) {\r\n // relative = config.options.resolveVuxDir\r\n // }\r\n\r\n // file = file.replace(/vux\\/src/g, relative)\r\n // }\r\n // }\r\n // str += `import ${component.newName} from '${file}'\\n`\r\n // })\r\n // return str\r\n // }, 'vux')\r\n // try {\r\n // source = parser(source)\r\n // } catch (e) {\r\n // console.log(e)\r\n // }\r\n }\r\n\r\n if (config.options.vuxWriteFile === true) {\r\n fs.writeFileSync(this.resourcePath + '.vux.js', source)\r\n }\r\n\r\n if (i18nPlugin && !isVuxVueFile && source.indexOf(`$t('`) > -1 && i18nPlugin.staticReplace === true) {\r\n const rs = getI18nBlockWithLocale({\r\n code: _this.resourcePath,\r\n isFile: true,\r\n locale: i18nPlugin.vuxLocale || 'zh-CN'\r\n })\r\n source = i18nReplaceForScript(source, rs)\r\n }\r\n\r\n return source\r\n}\r\n\r\nfunction camelCaseToDash(str) {\r\n return str.replace(/([a-z])([A-Z])/g, '$1_$2').toLowerCase()\r\n}" }, { "path": "packages/loader/src/style-loader.js", "content": "'use strict'\r\n\r\nconst utils = require('loader-utils')\r\n\r\nmodule.exports = function (source) {\r\n this.cacheable()\r\n const _this = this\r\n let config = this.vux || utils.getLoaderConfig(this, 'vux')\r\n\r\n if (this['thread-loader']) {\r\n const configFile = require.resolve('vux/.config.cache.json')\r\n config = require(configFile)\r\n }\r\n\r\n if (!config.plugins || !config.plugins.length) {\r\n return source\r\n }\r\n\r\n config.plugins.forEach(function (plugin) {\r\n // style-parser\r\n if (plugin.name === 'style-parser') {\r\n if (plugin.fn) {\r\n source = plugin.fn.call(_this, source)\r\n }\r\n }\r\n })\r\n\r\n if (config.options.vuxDev) {\r\n if (/App\\.vue$/.test(this.resourcePath)) {\r\n source = source.replace(/~vux\\/src/g, '.')\r\n } else {\r\n if (config.options.resolveVuxDir) {\r\n // if (_this.resourcePath.includes('pages') && _this.resourcePath.includes('IconLoading') )\r\n // source = source.replace(/~vux\\/src/g, config.options.resolveVuxDir).replace('//', '/')\r\n // if (_this.resourcePath.includes('pages') && _this.resourcePath.includes('IconLoading') )\r\n } else {\r\n source = source.replace(/~vux\\/src/g, '..')\r\n }\r\n }\r\n }\r\n\r\n return source\r\n}\r\n" }, { "path": "packages/loader/src/template-loader.js", "content": "'use strict'\r\n\r\nconst _ = require('lodash')\r\nconst touch = require('touch')\r\nconst utils = require('loader-utils')\r\nconst yamlReader = require('js-yaml')\r\nconst fs = require('fs')\r\nconst path = require('path')\r\nconst matchI18nReg = /\\$t\\('?(.*?)'?\\)/g\r\nconst parseVirtualComponent = require('./libs/parse-virtual-component')\r\nconst parseXIcon = require('./libs/parse-x-icon')\r\nconst removeTagCode = require('./libs/getTag').removeTagCode\r\nconst reserveTagCode = require('./libs/getTag').reserveTagCode\r\nconst compareVersions = require('compare-versions')\r\n\r\nconst i18nParser = require('../libs/parse-i18n-function').parse\r\nconst getI18nBlockWithLocale = require('../libs/get-i18n-block').getWithLocale\r\n\r\nconst getName = function (path) {\r\n return path.replace(/\\\\/g, '/').split('components')[1].replace('index.vue', '').replace(/\\//g, '')\r\n}\r\n\r\nmodule.exports = function (source) {\r\n const _this = this\r\n this.cacheable()\r\n const query = this.query ? utils.parseQuery(this.query) : {}\r\n let config = this.vux || utils.getLoaderConfig(this, 'vux')\r\n\r\n if (this['thread-loader']) {\r\n const configFile = require.resolve('vux/.config.cache.json')\r\n config = require(configFile)\r\n }\r\n\r\n const basename = path.basename(this.resourcePath)\r\n let isVuxVueFile = this.resourcePath.replace(/\\\\/g, '/').indexOf('vux/src/components') > -1\r\n let isVuxVueDemo = this.resourcePath.replace(/\\\\/g, '/').indexOf('vux/src/demos') > -1\r\n if (config.options.vuxDev && this.resourcePath.replace(/\\\\/g, '/').indexOf('src/components') > -1) {\r\n isVuxVueFile = true\r\n }\r\n if (config.options.vuxDev && this.resourcePath.replace(/\\\\/g, '/').indexOf('src/demos') > -1) {\r\n isVuxVueDemo = true\r\n }\r\n\r\n // x-icon\r\n if (config.options.useVuxUI && source.indexOf(' -1) {\r\n source = parseXIcon(source, config)\r\n }\r\n\r\n // v-no-ssr\r\n if (config.options.ssr) {\r\n source = removeTagCode(source, 'v-no-ssr')\r\n source = reserveTagCode(source, 'v-ssr')\r\n } else {\r\n source = removeTagCode(source, 'v-ssr')\r\n source = reserveTagCode(source, 'v-no-ssr')\r\n }\r\n\r\n const locales = this.vuxLocales || utils.getLoaderConfig(this, 'vuxLocales')\r\n\r\n /**\r\n * ======== i18n ========\r\n */\r\n let dynamic = false\r\n let locale = 'zh-CN'\r\n let vuxFunctionName = '$t'\r\n let functionName = '$t'\r\n let staticTranslations = {}\r\n let langs = ['en', 'zh-CN']\r\n let staticReplace\r\n\r\n // 如果不设置, dynamic 为false, local 为 zh-CN\r\n const i18nPluginsMatch = config.plugins.filter(function (one) {\r\n return one.name === 'i18n'\r\n })\r\n\r\n if (i18nPluginsMatch.length) {\r\n dynamic = !i18nPluginsMatch[0].vuxStaticReplace\r\n locale = i18nPluginsMatch[0].vuxLocale || 'zh-CN'\r\n vuxFunctionName = i18nPluginsMatch[0].vuxFunctionName || '$t'\r\n functionName = i18nPluginsMatch[0].functionName || '$t'\r\n langs = i18nPluginsMatch[0].localeList || langs\r\n staticTranslations = i18nPluginsMatch[0].staticTranslations || {}\r\n staticReplace = typeof i18nPluginsMatch[0].staticReplace === 'undefined' ? undefined : i18nPluginsMatch[0].staticReplace\r\n } else {\r\n dynamic = false\r\n locale = 'zh-CN'\r\n vuxFunctionName = '$t'\r\n }\r\n\r\n // 对于小于 vue@2.5.0 的版本，将 slot-scope 替换为 scope\r\n const vueVersion = config.options.vueVersion\r\n const isLt250 = compareVersions(vueVersion, '2.5.0') === -1\r\n\r\n if (isLt250 && (isVuxVueFile || isVuxVueDemo) && source.indexOf('slot-scope=') > -1) {\r\n source = source.replace(/slot-scope=/g, 'scope=')\r\n }\r\n\r\n if ((isVuxVueFile) && source.indexOf(\"$t(\") > -1) {\r\n const name = getName(this.resourcePath)\r\n if (!dynamic) {\r\n source = source.replace(matchI18nReg, function (a, b) {\r\n let key = `vux.${name}.${b}`\r\n\r\n if (a.indexOf('/*') > -1) {\r\n const start = a.indexOf('/*')\r\n const end = a.indexOf('*/')\r\n const str = a.slice(start + 2, end - 1)\r\n const map = {}\r\n const list = str.split(',').map(one => {\r\n one = one.trim()\r\n const pair = one.split(':').map(one => one.trim())\r\n map[pair[0]] = pair[1]\r\n })\r\n\r\n return map[locale]\r\n }\r\n\r\n if (a.indexOf(\"'\") > -1) { // 用于翻译字符\r\n return \"'\" + locales[locale][key] + \"'\"\r\n } else { // 用于翻译变量，如 $t(text)\r\n return b\r\n }\r\n })\r\n } else {\r\n // dynamic 为 true, 则对于 vux 源码，把 key 加上 prefix\r\n source = source.replace(matchI18nReg, function (a, b) {\r\n if (a.indexOf(\"'\") > -1) {\r\n return a.replace(b, `vux.${name}.${b}`).replace('$t', vuxFunctionName)\r\n } else {\r\n return a.replace('$t', vuxFunctionName)\r\n }\r\n })\r\n }\r\n } else if (!isVuxVueFile && source.indexOf(`${functionName}(`) > -1 && staticTranslations && staticReplace === true) {\r\n // 对于项目文件进行静态替换\r\n /**\r\n let matchI18nReg = new RegExp(`\\$${functionName}\\('?(.*?)'?\\)`, 'g')\r\n source = source.replace(matchI18nReg, function (a, b) {\r\n if (a.indexOf(\"'\") > -1) {\r\n return `${ staticTranslations[b] || b }`\r\n }\r\n })\r\n */\r\n const rs = getI18nBlockWithLocale({\r\n code: _this.resourcePath,\r\n isFile: true,\r\n locale: locale\r\n })\r\n source = i18nParser(source, rs)\r\n }\r\n\r\n config.plugins.forEach(function (plugin) {\r\n\r\n // template-feature-switch\r\n /**\r\n show\r\n show\r\n\r\n hide\r\n hide\r\n */\r\n\r\n if (plugin.name === 'template-feature-switch') {\r\n // replace features\r\n if (plugin.features && source.indexOf('') > -1) {\r\n source = parseOnFeature(source, plugin.features)\r\n }\r\n if (plugin.features && source.indexOf('') > -1) {\r\n source = parseOffFeature(source, plugin.features)\r\n }\r\n }\r\n\r\n // 非 vux 组件才需要生成语言\r\n if (!isVuxVueFile && plugin.name === 'i18n' && plugin.extractToFiles) {\r\n\r\n const savePath = path.resolve(config.options.projectRoot, plugin.extractToFiles)\r\n\r\n let format = 'yml'\r\n if (/\\.json$/.test(plugin.extractToFiles)) {\r\n format = 'json'\r\n }\r\n\r\n let fileMode = 'all'\r\n if (plugin.extractToFiles.indexOf('{lang}') !== -1) {\r\n fileMode = 'single'\r\n }\r\n\r\n const isDynamic = plugin.staticReplace === false\r\n\r\n if (isDynamic) {\r\n setTimeout(function () {\r\n const rawFileContent = fs.readFileSync(_this.resourcePath, 'utf-8')\r\n const results = rawFileContent.match(/]*>([\\s\\S]*?)<\\/i18n>/)\r\n if (results) {\r\n let attrsMap = {}\r\n const attrs = results[0].split('\\n')[0].replace('', '')\r\n .replace(/\"/g, '')\r\n .replace(/\\r/g, '')\r\n .split(' ')\r\n .filter(function (one) {\r\n return !!one\r\n }).forEach(function (one) {\r\n let tmp = one.split('=')\r\n attrsMap[tmp[0]] = tmp[1]\r\n })\r\n\r\n try {\r\n const local = yamlReader.safeLoad(results[1])\r\n const rs = parseI18n(local, langs)\r\n let finalConfig = {}\r\n\r\n // all and yml format\r\n if (fileMode === 'all' && format === 'yml') {\r\n touch.sync(savePath)\r\n let currentConfig = fs.readFileSync(savePath, 'utf-8')\r\n if (!currentConfig) {\r\n finalConfig = rs.translations\r\n } else {\r\n finalConfig = mergeLang(yamlReader.safeLoad(currentConfig), rs.translations)\r\n }\r\n if (!currentConfig || (currentConfig && JSON.stringify(yamlReader.safeLoad(currentConfig)) !== JSON.stringify(finalConfig))) {\r\n fs.writeFileSync(savePath, yamlReader.safeDump(finalConfig))\r\n }\r\n }\r\n\r\n if (fileMode === 'all' && format === 'json') {\r\n touch.sync(savePath)\r\n let currentConfig = fs.readFileSync(savePath, 'utf-8')\r\n if (!currentConfig) {\r\n finalConfig = rs.translations\r\n } else {\r\n finalConfig = mergeLang(JSON.parse(currentConfig), rs.translations)\r\n }\r\n if (!currentConfig || (currentConfig && JSON.stringify(currentConfig) !== JSON.stringify(finalConfig))) {\r\n fs.writeFileSync(savePath, JSON.stringify(finalConfig, null, 2))\r\n }\r\n }\r\n\r\n // single and yml\r\n\r\n if (fileMode === 'single' && format === 'yml') {\r\n for (let i = 0; i < langs.length; i++) {\r\n let lang = langs[i]\r\n let savePath = path.resolve(config.options.projectRoot, plugin.extractToFiles).replace('{lang}', lang)\r\n touch.sync(savePath)\r\n let currentConfig = fs.readFileSync(savePath, 'utf-8')\r\n if (!currentConfig) {\r\n finalConfig = rs.translations[lang]\r\n } else {\r\n finalConfig = Object.assign(yamlReader.safeLoad(currentConfig), rs.translations[lang])\r\n }\r\n if (!currentConfig || (currentConfig && JSON.stringify(yamlReader.safeLoad(currentConfig)) !== JSON.stringify(finalConfig))) {\r\n fs.writeFileSync(savePath, yamlReader.safeDump(finalConfig))\r\n }\r\n }\r\n }\r\n\r\n if (fileMode === 'single' && format === 'json') {\r\n\r\n for (let i = 0; i < langs.length; i++) {\r\n let lang = langs[i]\r\n let savePath = path.resolve(config.options.projectRoot, plugin.extractToFiles).replace('{lang}', lang)\r\n touch.sync(savePath)\r\n let currentConfig = fs.readFileSync(savePath, 'utf-8')\r\n if (!currentConfig) {\r\n finalConfig = rs.translations[lang]\r\n } else {\r\n finalConfig = Object.assign(JSON.parse(currentConfig), rs.translations[lang])\r\n }\r\n if (!currentConfig || (currentConfig && JSON.stringify(currentConfig) !== JSON.stringify(finalConfig))) {\r\n fs.writeFileSync(savePath, JSON.stringify(finalConfig, null, 2))\r\n }\r\n }\r\n }\r\n\r\n } catch (e) {\r\n console.log(e)\r\n console.log('yml 格式有误，请重新检查')\r\n }\r\n\r\n }\r\n })\r\n }\r\n }\r\n\r\n // template-parser\r\n if (plugin.name === 'template-parser') {\r\n if (plugin.fn) {\r\n source = plugin.fn.call(_this, source)\r\n }\r\n if (plugin.replaceList && plugin.replaceList.length) {\r\n plugin.replaceList.forEach(function (replacer) {\r\n source = source.replace(replacer.test, replacer.replaceString)\r\n })\r\n }\r\n }\r\n\r\n if (plugin.name === 'template-string-append') {\r\n if (new RegExp(plugin.test).test(_this.resourcePath)) {\r\n var componentName = basename.replace('.vue', '').toLowerCase()\r\n var string = plugin.fn({\r\n resourcePath: _this.resourcePath,\r\n basename: basename\r\n })\r\n if (string) {\r\n source = source.replace(/\\s+$/g, '').replace(/\\\\n/g, '').replace(/<\\/div>$/, string + '
    ')\r\n }\r\n }\r\n }\r\n })\r\n\r\n if (config.options.vuxWriteFile === true) {\r\n fs.writeFileSync(this.resourcePath + '.vux.html', source)\r\n }\r\n\r\n source = removeTagCode(source, 'i18n')\r\n\r\n return source\r\n}\r\n\r\nfunction parseOnFeature(content, features) {\r\n content = content.replace(/]*>([\\s\\S]*?)<\\/on>/g, function (tag, text) {\r\n const key = tag.split('\\n')[0].replace('', '')\r\n .replace(/\"/g, '')\r\n .replace(/\\r/g, '')\r\n .split(' ')\r\n .filter(function (one) {\r\n return !!one\r\n }).map(function (one) {\r\n let tmp = one.split('=')\r\n return tmp[1]\r\n })\r\n if (features[key] && features[key] === true) {\r\n // true\r\n return text\r\n } else {\r\n // false\r\n return ''\r\n }\r\n })\r\n return content\r\n}\r\n\r\nfunction parseOffFeature(content, features) {\r\n content = content.replace(/]*>([\\s\\S]*?)<\\/off>/g, function (tag, text) {\r\n const key = tag.split('\\n')[0].replace('', '')\r\n .replace(/\"/g, '')\r\n .replace(/\\r/g, '')\r\n .split(' ')\r\n .filter(function (one) {\r\n return !!one\r\n }).map(function (one) {\r\n let tmp = one.split('=')\r\n return tmp[1]\r\n })\r\n if (!features[key]) {\r\n // false\r\n return text\r\n } else {\r\n // true\r\n return ''\r\n }\r\n })\r\n return content\r\n}\r\n\r\nfunction parseI18n(json, langs) {\r\n langs = langs || []\r\n if (!langs || !langs.length) {\r\n for (let i in json) {\r\n langs = langs.concat(Object.keys(json[i]))\r\n }\r\n langs = _.uniq(langs)\r\n }\r\n let rs = {}\r\n for (let i = 0; i < langs.length; i++) {\r\n let lang = langs[i]\r\n\r\n if (!rs[lang]) {\r\n rs[lang] = {}\r\n }\r\n\r\n for (let j in json) {\r\n rs[lang][j] = json[j][lang] || j\r\n }\r\n\r\n }\r\n return {\r\n langs: langs,\r\n translations: rs\r\n }\r\n}\r\n\r\nfunction mergeLang(a, b) {\r\n for (let i in b) {\r\n for (let j in b[i]) {\r\n if (!a[i]) {\r\n a[i] = b[i]\r\n }\r\n a[i][j] = b[i][j]\r\n }\r\n }\r\n return a\r\n}\r\n" }, { "path": "packages/loader/test/fixtures/basic.vue", "content": "\r\n\r\n\r\n\r\n\r\n" }, { "path": "packages/loader/test/fixtures/css-modules.vue", "content": "\r\n\r\n\r\n\r\n\r\n" }, { "path": "packages/loader/test/fixtures/es2015.vue", "content": "\r\n" }, { "path": "packages/loader/test/fixtures/extend.vue", "content": "\r\n\r\n\r\n" }, { "path": "packages/loader/test/fixtures/extract-css.vue", "content": "\r\n\r\n\r\n" }, { "path": "packages/loader/test/fixtures/inject.js", "content": "window.injector = require('!!../../lib/loader?inject!./inject.vue')\r\n" }, { "path": "packages/loader/test/fixtures/inject.vue", "content": "\r\n\r\n\r\n" }, { "path": "packages/loader/test/fixtures/media-query.vue", "content": "\r\n" }, { "path": "packages/loader/test/fixtures/postcss.vue", "content": "\r\n" }, { "path": "packages/loader/test/fixtures/pre.vue", "content": "\r\n\r\n\r\n\r\n\r\n" }, { "path": "packages/loader/test/fixtures/resolve.vue", "content": "\r\n\r\n\r\n" }, { "path": "packages/loader/test/fixtures/scoped-css.vue", "content": "\r\n\r\n\r\n
    \r\n\r\n" }, { "path": "packages/loader/test/fixtures/script-import.js", "content": "export default {\r\n data () {\r\n return {\r\n msg: 'Hello from Component A!'\r\n }\r\n }\r\n};" }, { "path": "packages/loader/test/fixtures/script-import.vue", "content": "" }, { "path": "packages/loader/test/fixtures/service.js", "content": "module.exports = {\r\n msg: 'hi'\r\n}\r\n" }, { "path": "packages/loader/test/fixtures/style-import-scoped.css", "content": "h1 { color: green; }\r\n" }, { "path": "packages/loader/test/fixtures/style-import.css", "content": "h1 { color: red; }\r\n" }, { "path": "packages/loader/test/fixtures/style-import.vue", "content": "\r\n\r\n" }, { "path": "packages/loader/test/fixtures/template-import.pug", "content": "div\r\n h1 hello\r\n" }, { "path": "packages/loader/test/fixtures/template-import.vue", "content": "\r\n" }, { "path": "packages/loader/test/test.js", "content": "process.env.VUE_LOADER_TEST = true\r\n\r\nvar path = require('path')\r\nvar webpack = require('webpack')\r\nvar MemoryFS = require('memory-fs')\r\nvar jsdom = require('jsdom')\r\nvar expect = require('chai').expect\r\nvar rimraf = require('rimraf')\r\nvar genId = require('vue-loader/lib/gen-id')\r\nvar SourceMapConsumer = require('source-map').SourceMapConsumer\r\nvar ExtractTextPlugin = require(\"extract-text-webpack-plugin\")\r\nvar compiler = require('vue-loader/lib/template-compiler')\r\nvar normalizeNewline = require('normalize-newline')\r\n\r\nvar vuxLoader = require('../src/index.js')\r\nvar i18nParser = require('../libs/parse-i18n-function').parse\r\nconst i18nParserForScript = require('../libs/replace-i18n-for-script').replace\r\nconst getI18nBlock = require('../libs/get-i18n-block').get\r\nconst getI18nBlockWithLocale = require('../libs/get-i18n-block').getWithLocale\r\n\r\nfunction getOptionsPlugin(config) {\r\n const match = config.plugins.filter(one => {\r\n return one.constructor.name === 'LoaderOptionsPlugin'\r\n })\r\n return match[0]\r\n}\r\n\r\n// var loaderPath = 'expose-loader?vueModule!' + path.resolve(__dirname, '../node_modules/vue-loader/index.js')\r\nvar loaderPath = 'expose-loader?vueModule!' + path.resolve(__dirname, '../src/index.js') + '!vue-loader'\r\nvar mfs = new MemoryFS()\r\nvar globalConfig = {\r\n output: {\r\n path: '/',\r\n filename: 'test.build.js'\r\n },\r\n module: {\r\n rules: [\r\n {\r\n test: /\\.vue$/,\r\n loader: loaderPath\r\n }\r\n ]\r\n }\r\n}\r\n\r\nfunction bundle(options, vuxOptions, cb) {\r\n var vueOptions = options.vue\r\n delete options.vue\r\n var config = Object.assign(globalConfig, options)\r\n\r\n // assign vue Options\r\n if (vueOptions) {\r\n config.plugins = (config.plugins || []).concat(new webpack.LoaderOptionsPlugin({\r\n vue: vueOptions\r\n }))\r\n }\r\n let basicVux = {\r\n options: {\r\n loaderString: loaderPath,\r\n rewriteLoaderString: false,\r\n isWebpack2: true,\r\n isTest: true\r\n }\r\n }\r\n\r\n if (vuxOptions.options) {\r\n for (let i in vuxOptions.options) {\r\n basicVux.options[i] = vuxOptions.options[i]\r\n }\r\n }\r\n\r\n if (vuxOptions.plugins) {\r\n basicVux.plugins = vuxOptions.plugins\r\n }\r\n\r\n config = vuxLoader.merge(config, basicVux)\r\n\r\n var webpackCompiler = webpack(config)\r\n\r\n webpackCompiler.outputFileSystem = mfs\r\n webpackCompiler.run(function (err, stats) {\r\n expect(err).to.be.null\r\n if (stats.compilation.errors.length) {\r\n stats.compilation.errors.forEach(function (err) {\r\n console.error(err.message)\r\n })\r\n }\r\n expect(stats.compilation.errors).to.be.empty\r\n cb(mfs.readFileSync('/test.build.js').toString())\r\n })\r\n}\r\n\r\nfunction test(options, vuxOptions, assert) {\r\n bundle(options, vuxOptions, function (code) {\r\n jsdom.env({\r\n html: '',\r\n src: [code],\r\n done: function (err, window) {\r\n if (err) {\r\n console.log(err[0].data.error.stack)\r\n expect(err).to.be.null\r\n }\r\n assert(window, interopDefault(window.vueModule), window.vueModule)\r\n }\r\n })\r\n })\r\n}\r\n\r\nfunction mockRender(options, data) {\r\n return options.render.call(Object.assign({\r\n _v(val) {\r\n return val\r\n },\r\n _self: {},\r\n $createElement(tag, data, children) {\r\n if (Array.isArray(data)) {\r\n children = data\r\n data = null\r\n }\r\n return {\r\n tag: tag,\r\n data: data,\r\n children: children\r\n }\r\n },\r\n _m(index) {\r\n return options.staticRenderFns[index].call(this)\r\n },\r\n _s(str) {\r\n return String(str)\r\n }\r\n }, data))\r\n}\r\n\r\nfunction interopDefault(module) {\r\n return module ? module.__esModule ? module.default : module : module\r\n}\r\n\r\nvar parse = require('../src/libs/import-parser')\r\n\r\nconst str = parse(`\n\n\n" }, { "path": "packages/loader/test/vux-fixtures/less-theme-import.less", "content": "@import './less-theme-002.less';\n@theme-p-color: red;\n\n@x: x;\n\ndsfdf" }, { "path": "packages/loader/test/vux-fixtures/option-vux-dir.vue", "content": "\n\n" }, { "path": "packages/loader/test/vux-fixtures/script-parser-fn.vue", "content": "\n\n\n\n\n" }, { "path": "packages/loader/test/vux-fixtures/style-parser-basic.vue", "content": "\n\n\n\n\n" }, { "path": "packages/loader/test/vux-fixtures/template-feature-switch-basic.vue", "content": "\r\n\r\n\r\n" }, { "path": "packages/loader/test/vux-fixtures/template-parser-fn.vue", "content": "\n\n\n\n\n" }, { "path": "packages/vue-cli-3-example/.browserslistrc", "content": "> 1%\nlast 2 versions\nnot ie <= 8\n" }, { "path": "packages/vue-cli-3-example/.editorconfig", "content": "[*.{js,jsx,ts,tsx,vue}]\nindent_style = space\nindent_size = 2\ntrim_trailing_whitespace = true\ninsert_final_newline = true\n" }, { "path": "packages/vue-cli-3-example/.eslintrc.js", "content": "module.exports = {\n root: true,\n env: {\n node: true\n },\n 'extends': [\n 'plugin:vue/essential',\n '@vue/standard'\n ],\n rules: {\n 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',\n 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'\n },\n parserOptions: {\n parser: 'babel-eslint'\n }\n}\n" }, { "path": "packages/vue-cli-3-example/.gitignore", "content": ".DS_Store\nnode_modules\n/dist\n\n# local env files\n.env.local\n.env.*.local\n\n# Log files\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Editor directories and files\n.idea\n.vscode\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n*.sw*\n" }, { "path": "packages/vue-cli-3-example/README.md", "content": "# vux-cli3\n\n## Project setup\n```\nyarn install\n```\n\n### Compiles and hot-reloads for development\n```\nyarn run serve\n```\n\n### Compiles and minifies for production\n```\nyarn run build\n```\n\n### Run your tests\n```\nyarn run test\n```\n\n### Lints and fixes files\n```\nyarn run lint\n```\n\n### Customize configuration\nSee [Configuration Reference](https://cli.vuejs.org/config/).\n" }, { "path": "packages/vue-cli-3-example/babel.config.js", "content": "module.exports = {\n presets: [\n '@vue/app'\n ]\n}\n" }, { "path": "packages/vue-cli-3-example/package.json", "content": "{\n \"name\": \"vux-cli3\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"scripts\": {\n \"serve\": \"vue-cli-service serve\",\n \"build\": \"vue-cli-service build\",\n \"lint\": \"vue-cli-service lint\"\n },\n \"dependencies\": {\n \"core-js\": \"^2.6.5\",\n \"vue\": \"^2.6.6\",\n \"vue-router\": \"^3.0.1\",\n \"vuex\": \"^3.0.1\",\n \"vux\": \"^2.9.2\"\n },\n \"devDependencies\": {\n \"@vue/cli-plugin-babel\": \"^3.5.0\",\n \"@vue/cli-plugin-eslint\": \"^3.5.0\",\n \"@vue/cli-service\": \"^3.5.0\",\n \"@vue/eslint-config-standard\": \"^4.0.0\",\n \"@vux/loader\": \"^2.0.0-rc4\",\n \"babel-eslint\": \"^10.0.1\",\n \"eslint\": \"^5.8.0\",\n \"eslint-plugin-vue\": \"^5.0.0\",\n \"less\": \"^3.0.4\",\n \"less-loader\": \"^4.1.0\",\n \"vue-template-compiler\": \"^2.5.21\"\n }\n}\n" }, { "path": "packages/vue-cli-3-example/postcss.config.js", "content": "module.exports = {\n plugins: {\n autoprefixer: {}\n }\n}\n" }, { "path": "packages/vue-cli-3-example/public/index.html", "content": "\n\n \n \n \n \n favicon.ico\">\n vux-cli3\n \n \n \n
    \n \n \n\n" }, { "path": "packages/vue-cli-3-example/src/App.vue", "content": "\n\n\n" }, { "path": "packages/vue-cli-3-example/src/components/HelloWorld.js", "content": "import Group from 'vux/src/components/group/index'\nimport { Cell } from 'vux'\n\nexport default {\n\tcomponents: {\n\t\tGroup,\n\t\tCell\n\t},\n\tprops: {\n\t\tmsg: String\n\t},\n\tmethods: {\n\t\talert () {\n\t\t\tthis.$vux.alert.show('hello')\n\t\t}\n\t}\n}\n" }, { "path": "packages/vue-cli-3-example/src/components/HelloWorld.vue", "content": "\n\n\n\n\n" }, { "path": "packages/vue-cli-3-example/src/main.js", "content": "import Vue from 'vue'\nimport App from './App.vue'\nimport router from './router'\nimport store from './store'\n\nimport { AlertPlugin } from 'vux'\n\nVue.use(AlertPlugin)\n\nVue.config.productionTip = false\n\nnew Vue({\n router,\n store,\n render: h => h(App)\n}).$mount('#app')\n" }, { "path": "packages/vue-cli-3-example/src/router.js", "content": "import Vue from 'vue'\nimport Router from 'vue-router'\nimport Home from './views/Home.vue'\n\nVue.use(Router)\n\nexport default new Router({\n routes: [\n {\n path: '/',\n name: 'home',\n component: Home\n },\n {\n path: '/about',\n name: 'about',\n // route level code-splitting\n // this generates a separate chunk (about.[hash].js) for this route\n // which is lazy-loaded when the route is visited.\n component: () => import(/* webpackChunkName: \"about\" */ './views/About.vue')\n }\n ]\n})\n" }, { "path": "packages/vue-cli-3-example/src/store.js", "content": "import Vue from 'vue'\nimport Vuex from 'vuex'\n\nVue.use(Vuex)\n\nexport default new Vuex.Store({\n state: {\n\n },\n mutations: {\n\n },\n actions: {\n\n }\n})\n" }, { "path": "packages/vue-cli-3-example/src/theme.less", "content": "@yellow: red;\n@theme-color: #FF9900;\n@button-tab-border-color: #ccc;\n@button-tab-active-background-color: @yellow;\n@button-tab-active-font-color: #000;\n\n@switch-checked-bg-color: @yellow;\n@switch-checked-border-color: @yellow;\n\n@number-button-font-color: #FF9900;\n@number-round-button-enabled-border-color: #FF9900;\n\n@swiper-indicator-active-color: #FF9900;\n\n@checklist-icon-active-color: #FF9900;\n\n@tab-text-active-color: #FF9900;\n@tab-bar-active-color: #FF9900;\n\n@dialog-button-text-primary-color: #FF9900;\n\n@form-preview-button-primary-color: #FF9900;\n\n@tabbar-text-active-color: #35495e;\n\n@toast-position-top-offset: 56px;\n@toast-position-bottom-offset: 60px;\n\n@search-cancel-font-color: #FF9900;\n\n@radio-checked-icon-color: #FF9900;\n\n@calendar-arrow-color: #c0c0c0;" }, { "path": "packages/vue-cli-3-example/src/views/About.vue", "content": "\n" }, { "path": "packages/vue-cli-3-example/src/views/Home.vue", "content": "\n\n\n" }, { "path": "packages/vue-cli-3-example/vue.config.js", "content": "module.exports = {\n configureWebpack: config => {\n \trequire('@vux/loader').merge(config, {\n \t \tplugins: ['vux-ui', {\n \t \t\tname: 'less-theme',\n \t \t\tpath: 'src/theme.less'\n \t \t}]\n \t})\n }\n}\n" }, { "path": "src/App.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/actionsheet/index.vue", "content": "\n\n\ncancel:\n en: cancel\n zh-CN: 取消\n\n\n\n\n\n" }, { "path": "src/components/actionsheet/metas.yml", "content": "description: |\n Action Sheet是由用户操作后触发的一种特定的模态弹出框 ，呈现一组与当前情境相关的两个或多个选项。用户可以使用Action Sheet启动某个任务，或者确认是否开始执行某个可能具有破坏性的操作。\n - 高亮危险操作。将危险操作用红色标注，为他们提供其它替代的安全选项。\n - 提供清晰准确的描述。在页面有多个唤起Action Sheet的对象或选项本身不够明晰的情况下，提供清晰准确的描述是非常有必要的。\n - 不要放置过多选项以至于需要滚动才能看完全部选项。\ncategory:\n en: Feedback\n zh-CN: 弹窗提示\nicon: ''\ntags:\n en:\n - actionsheet\n - dialog\n - action sheet\n - choose\n zh-CN:\n - 操作表\n - 提示\nafter_extra:\n en: |\n\n From `v2.1.0`, `menus` supports type: Array.\n\n `label`: label name，you can use simple text or `html`\n\n `value`: event name，if not specified, no `on-click-menu` will be emitted\n\n `type`:\n\n - `primary` primary color\n - `warn` warn color\n - `disabled` gray color, the menu cannot be clicked\n - `info ` the menu item shows as a tip, the same function as `key.noop` when setting menus by `Object`.\n\n ``` js\n [{\n label: 'Are you sure?
    Once deleted, you will never find it.',\n type: 'info'\n }, {\n label: 'Primary',\n type: 'primary',\n value: 'primary'\n }, {\n label: 'Warn',\n type: 'warn'\n }, {\n label: 'Disabled',\n type: 'disabled'\n }, {\n label: 'Default'\n }]\n ```\n\n zh-CN: |\n\n 从`v2.1.0`开始支持数组类型的菜单。\n\n `label`: 菜单名字，支持文字及`html`。\n\n `value`: 英文字符，表示触发事件的名字，如果不设置不会触发`on-click-menu`事件。\n\n `type`: 类型，可选值如下\n\n - `primary` 主色\n - `warn` 警告色\n - `disabled` 不可操作，灰色。点击时不会关闭\n - `info ` 信息提示，点击时不会关闭。作用同对象类型的`key.noop`。\n\n ``` js\n [{\n label: 'Are you sure?
    Once deleted, you will never find it.',\n type: 'info'\n }, {\n label: 'Primary',\n type: 'primary',\n value: 'primary'\n }, {\n label: 'Warn',\n type: 'warn'\n }, {\n label: 'Disabled',\n type: 'disabled'\n }, {\n label: 'Default'\n }]\n ```\nprops:\n value:\n type: Boolean\n default: false\n en: if showing the component; use v-model for binding\n zh-CN: 是否显示, 使用 v-model 绑定变量\n show-cancel:\n type: Boolean\n default: false\n en: if showing the cancel menu; invalid for android theme\n zh-CN: 是否显示取消菜单，对安卓风格无效\n cancel-text:\n type: String\n default: 'cancel(取消)'\n en: text of cancel menu\n zh-CN: 取消菜单的显示文字\n theme:\n type: String\n default: 'ios'\n en: \"theme of menus, can be in ['ios', 'android']\"\n zh-CN: \"菜单风格，可选值为['ios','android']\"\n menus:\n type: Object,Array\n default: '{}'\n en: \"menu items, for example: `{menu1: 'some text'}`, menu name with `.noop` will not trigger click events.
    `Menus` supports array since `v2.1.0`. Keys can be customized. More details below.\"\n zh-CN: \"菜单项列表，举例：`{menu1: '删除'}`，如果名字上带有`.noop`表明这是纯文本(HTML)展示，不会触发事件，用于展示描述或者提醒。
    从`v2.1.0`开始支持数组类型的菜单，可自定义键值，见下面说明。\"\n close-on-clicking-mask:\n type: Boolean\n default: true\n version: v2.0.0\n en: if closing actionsheet when clicking on mask\n zh-CN: 点击遮罩时是否关闭菜单，适用于一些进入页面时需要强制选择的场景。\n close-on-clicking-menu:\n type: Boolean\n default: true\n version: v2.3.8\n en: if hide automatically when clicking on menus\n zh-CN: 点击菜单时是否自动隐藏\nslots:\n header:\n version: v2.3.5\n en: header\n zh-CN: 头部位置\nevents:\n on-click-menu:\n params: (menuKey, menuItem)\n en: fires when clicking on the menu\n zh-CN: 点击菜单时触发\n on-click-menu-{menuKey}:\n params: (menuKey)\n en: shortcut event for easier listening, `menuKey` is related to `label`. For exapmple, you can listen on `on-click-menu-delete` if you have a menu named `delete`\n zh-CN: 点击事件的快捷方式, `menuKey`与`label`的值有关。举例：如果你有一个菜单名字为`delete`, 那么你可以监听 `on-click-menu-delete`\n on-click-menu-cancel:\n en: fires when clicking on the cancel menu\n zh-CN: 点击取消菜单时触发\n on-click-mask:\n version: v2.3.4\n en: fires when clicking on mask\n zh-CN: 点击遮罩时触发\n on-after-show:\n version: v2.9.0\n en: fires when show transition ends\n zh-CN: 显示动画结束时触发\n on-after-hide:\n version: v2.9.0\n en: fires when hide transition ends\n zh-CN: 隐藏动画结束时触发\nchanges:\n v2.9.0:\n en:\n - '[feature] add event:on-after-show event:on-after-hide #2465'\n zh-CN:\n - '[feature] 支持 事件 on-after-show on-after-hide #2465'\n v2.7.4:\n en:\n - '[fix] fix wrong event param when value is zero #2209'\n zh-CN:\n - '[fix] 修复值为 0 时事件参数为空的问题 #2209'\n v2.5.6:\n en:\n - '[fix] Fix json parsing issue for cancel menu #1782'\n zh-CN:\n - '[fix] 修复取消菜单上的 json 解析错误 #1782'\n v2.5.5:\n en:\n - '[feature] Add raw menu item for on-click-menu event #1772'\n zh-CN:\n - '[feature] 支持在 on-click-menu 参数里附带原始 menu 对象 #1772'\n v2.3.5:\n en:\n - '[feature] Support slot:header #1381'\n zh-CN:\n - '[feature] 支持 slot:header #1381'\n v2.3.4:\n en:\n - '[feature] Support event: on-click-mask #1496'\n zh-CN:\n - '[feature] 支持遮罩点击事件 on-click-mask #1496'\n v2.2.0:\n en:\n - '[enhance] Donot update handel z-index in Safari when using v-transfer-dom'\n zh-CN:\n - '[enhance] 在使用 v-transfer-dom 的情况下不再处理 Safari 下的 z-index 问题'\n v2.1.1-rc.11:\n en:\n - '[enhance] Better transition for mask'\n zh-CN:\n - '[enhance] 更加流畅的遮罩层动画'\n v2.1.0:\n en:\n - '[feature] support array type of menu #950 @wuchuguang'\n zh-CN:\n - '[feature] 支持数组定义菜单 #950 @wuchuguang'\n v2.0.0:\n en:\n - '[change] upgrade to vue@2.0, use `v-model` instead of `:show.sync`'\n - '[feature] add prop close-on-clicking-mask'\n zh-CN:\n - '[change] 更新到 vue@2.0，使用 `v-model` 而不是`:show.sync`进行显示属性绑定'\n - '[feature] 添加属性 `close-on-clicking-mask`, 适用于强制选择的场景'\n" }, { "path": "src/components/actionsheet/test.js", "content": "import Actionsheet from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('Actionsheet', () => {\n it('should render correct contents', () => {\n const wrapper = mount(Actionsheet)\n expect(wrapper.contains('div')).to.equal(true)\n })\n})\n" }, { "path": "src/components/agree/index.vue", "content": "\n\n\n\n" }, { "path": "src/components/agree/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('Agree', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('agree')\n })\n})\n" }, { "path": "src/components/alert/index.vue", "content": "\n\n\nbutton_text:\n en: OK\n zh-CN: 确定\n\n\n\n\n\n" }, { "path": "src/components/alert/metas.yml", "content": "icon: ''\ncategory:\n en: Feedback\n zh-CN: 弹窗提示\nextra:\n zh-CN: |\n\n 该组件支持以`plugin`形式调用：\n\n ::: warning\n 以插件形式调用时，和`template`中使用不同，属性名请使用`小驼峰式`，比如`buttonText`而不是`button-text`。\n
    \n
    \n 在 `ViewBox` 或者 `overflow-scrolling:touch` 的容器中使用时，请使用 `prop:transfer-dom` 来解决其引起的 `z-index` 失效问题。详细参考 demo。\n :::\n\n ``` js\n import { AlertPlugin } from 'vux'\n Vue.use(AlertPlugin)\n\n // 或者umd方式\n // 引入构建的js文件\n Vue.use(vuxAlertPlugin)\n ```\n\n ``` js\n // 显示\n this.$vux.alert.show({\n title: 'Vux is Cool',\n content: 'Do you agree?',\n onShow () {\n console.log('Plugin: I\\'m showing')\n },\n onHide () {\n console.log('Plugin: I\\'m hiding')\n }\n })\n\n // 隐藏\n this.$vux.alert.hide()\n\n // 获取显示状态\n this.$vux.alert.isVisible() // v2.9.1 支持\n ```\n\n ::: tip\n 如果你想实现在`vue-router`的`beforeEach`或者`afterEach`的 hook 里关闭，可以使用 `Vue.$vux.alert.hide()`\n :::\n\n ::: tip\n 该组件在 v2.7.2 以上支持单独调用，方法和插件使用一致。\n :::\n\n ``` js\n import { AlertModule } from 'vux'\n\n AlertModule.show({\n title: 'VUX is Cool',\n content: this.$t('Do you agree?'),\n onShow () {\n console.log('Module: I\\'m showing')\n },\n onHide () {\n console.log('Module: I\\'m hiding now')\n }\n })\n ```\n\n\n en: |\n\n This component can be imported as plugin:\n\n ::: warning\n When importing it as plugin, the usage is different from it in `template`. Please use `little camel-case` such as `buttonText` instead of `button-text`.\n :::\n\n ``` js\n import { AlertPlugin } from 'vux'\n Vue.use(AlertPlugin)\n\n // or the way of umd\n // import built js file\n Vue.use(vuxAlertPlugin)\n ```\n\n ``` js\n // show\n this.$vux.alert.show({\n title: 'Vux is Cool',\n content: 'Do you agree?',\n onShow () {\n console.log('Plugin: I\\'m showing')\n },\n onHide () {\n console.log('Plugin: I\\'m hiding')\n }\n })\n // hide\n this.$vux.alert.hide()\n ```\n\n\ntags:\n en:\n - alert\n - dialog\n - message\n zh-CN:\n - 警告\n - 提示\n - 弹窗\nextends:\n - Dialog\nwhen:\n -\n - en: Show some information that user should pay attention to and should be closed only after user has clicked the close button\n - zh-CN: 显示一个用户必须注意到并且必须点击按钮确认才能关闭的信息\nprops:\n value:\n type: Boolean\n default: false\n en: visibility of the component, use v-model for binding\n zh-CN: 是否显示, 使用 v-model 绑定变量\n title:\n type: String\n default: ''\n en: title\n zh-CN: 弹窗标题\n content:\n version: v2.2.0\n type: String\n default: ''\n en: alert content, and will be replaced if using slot:default\n zh-CN: 提示内容，作为 slot:default 的默认内容，如果使用 slot:default, 将会失效\n button-text:\n type: String\n default: ok(确定)\n en: button text\n zh-CN: 按钮文字\n hide-on-blur:\n type: Boolean\n default: false\n en: if closing dialog when clicking on mask\n zh-CN: 是否在点击遮罩时自动关闭弹窗\n mask-transition:\n type: String\n default: vux-fade\n en: mask transition\n zh-CN: 遮罩动画\n dialog-transition:\n type: String\n default: vux-dialog\n en: dialog transition\n zh-CN: 弹窗主体动画\n mask-z-index:\n version: v2.6.4\n type: Number, String\n default: 1000\n en: zIndex of mask\n zh-CN: 遮罩层 z-index 值\nslots:\n default:\n en: dialog content\n zh-CN: 提示内容\nevents:\n on-show:\n en: emits when dialog shows\n zh-CN: 弹窗显示时触发\n on-hide:\n en: emits when dialog is closed\n zh-CN: 弹窗关闭时触发\nchanges:\n v2.9.1:\n en:\n - '[feature] add isVisible function for AlertPlugin #2704'\n zh-CN:\n - '[feature] 添加 isVisible 获取当前显示状态 #2704'\n v2.7.2:\n en:\n - \"[feature] now we can use Alert as a module (import { AlertModule } from 'vux') #2173\"\n zh-CN:\n - \"[feature] 支持作为模块直接调用 (import { AlertModule } from 'vux') #2173\"\n v2.6.4:\n en:\n - '[feature] support prop:mask-z-index'\n zh-CN:\n - '[feature] 支持属性 mask-z-index 设置遮罩 z-index'\n v2.5.5:\n en:\n - '[feature] Support hideOnBlur #1742'\n zh-CN:\n - '[feature] 支持 hideOnBlur #1742'\n v2.2.0:\n en:\n - '[feature] Add prop:content'\n zh-CN:\n - '[feature] 添加属性 prop:content'\n v2.1.1-rc.11:\n en:\n - '[enhance] Reset props data when used as plugin'\n zh-CN:\n - '[enhance] 作为插件使用时，每次都重置属性值'\n v2.1.1-rc.9:\n en:\n - '[fix] Fix onHide callback issue #1023 @jsonviewer'\n zh-CN:\n - '[fix] 修正 onHide 回调被错误调用 #1023 @jsonviewer'\n v2.0.0:\n en:\n - '[change] use `v-model` instead of `:show.sync`'\n - '[todo] fix animation'\n zh-CN:\n - '[change] 使用 `v-model` 而不是`:show.sync`进行显示属性绑定'\n - '[todo] 修复动画'\n" }, { "path": "src/components/alert/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('Alert', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('alert')\n })\n})\n" }, { "path": "src/components/badge/index.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/badge/metas.yml", "content": "description: |\n Badge是指通常出现在图标或文字右上角的红色圆点、数字或者文字，表示有新内容或者待处理的信息。中文一般称呼为小红点、角标或徽标。\n - 强提醒的使用场景。如果只需让用户了解有更新或新内容必然只有一条时，Badge无需标注具体数字，单纯的红点即可，例如微信公众号更新和App版本更新采用无数字类型。\n - 弱提醒的使用场景。如果需要让用户精确了解有多少条更新且新内容有多条，Badge可标注具体的数字，例如IM的未读消息、邮箱的未处理邮件。有数字的Badge给用户带来的心理压力会更大，也会更吸引用户注意力。\n - 注意数字的长度和上限。对于有数字的Badge，由于界面显示空间有限，因此要注意视场景和信息类型决定数字最长显示多少位，如果数字达到上限该如何显示。\n - 谨慎在设计图标时内运用红色圆点元素。红色小圆点这个视觉元素已经成为一种社会性语义符号，即用户看到红色小圆点就会认为这代表着有新内容，因此图标设计应当谨慎使用红色圆点。\ncategory:\n en: Data Display\n zh-CN: 数据展示\nicon: ''\ncolor: '#f74c31'\nreferences:\n zh-CN:\n -\n title: 这个控件叫：Badge/徽标/小红点\n link: https://zhuanlan.zhihu.com/p/26107887\nprops:\n text:\n type: String\n default: ''\n en: text of the Badge\n zh-CN: 显示的文字\nchanges:\n v2.3.3:\n en:\n - '[feature] Use dot styles if no text is specified'\n zh-CN:\n - '[feature] 支持没有指定文字时为 红点 样式'\n v2.2.1-rc.2:\n en:\n - '[fix] Fix className:vux-badge-single not work for number #1223'\n zh-CN:\n - '[fix] 修复个位数字样式不正确 #1223'\n" }, { "path": "src/components/badge/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('Badge', () => {\n it('render single character', () => {\n const wrapper = mount(Comp)\n wrapper.setProps({\n text: 'x'\n })\n expect(wrapper.hasClass('vux-badge-single')).to.equal(true)\n })\n\n it('render multiple character', () => {\n const wrapper = mount(Comp)\n wrapper.setProps({\n text: 'xx'\n })\n expect(wrapper.hasClass('vux-badge-single')).to.equal(false)\n })\n})\n" }, { "path": "src/components/blur/blur.js", "content": "/* Image Blur plugin, author @msurguy\n\n Usage:\n\n Create a set of elements that follows the following HTML structure:\n\n
    \n
    \n ...\n
    \n
    \n\n Add the following css:\n\n .container {\n overflow: hidden\n width: 100%\n position: relative\n }\n\n .container .bg-blur-overlay {\n z-index: -1\n position: absolute\n width: 100%\n height: 100%\n background-image: url('data:image/svg+xmlbase64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSI0NiUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wOCIvPjxzdG9wIG9mZnNldD0iNTklIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMDgiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC45Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g')\n background-size: 100%\n background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(46%, rgba(0, 0, 0, 0.08)), color-stop(59%, rgba(0, 0, 0, 0.08)), color-stop(100%, rgba(0, 0, 0, 0.9)))\n background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.08) 46%, rgba(0, 0, 0, 0.08) 59%, rgba(0, 0, 0, 0.9) 100%)\n background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.08) 46%, rgba(0, 0, 0, 0.08) 59%, rgba(0, 0, 0, 0.9) 100%)\n background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 46%, rgba(0, 0, 0, 0.08) 59%, rgba(0, 0, 0, 0.9) 100%)\n }\n\n .container .bg-blur {\n z-index: -2\n opacity: 0\n position: absolute\n width: 100%\n min-height: 100%\n height: auto\n display: block\n top: 0\n left: 0\n }\n\n .container .content {\n z-index: 1\n }\n\n */\n\nimport Eventor from '../../libs/eventor'\n\n// Random ID generator\nvar randomID = function () {\n return '_' + Math.random().toString(36).substr(2, 9)\n}\n\n// micro lib that creates SVG elements and adds attributes to it\nvar SVG = {\n\n // namespaces\n svgns: 'http://www.w3.org/2000/svg',\n xlink: 'http://www.w3.org/1999/xlink',\n\n // creating of SVG element\n createElement (name, attrs) {\n var element = document.createElementNS(SVG.svgns, name)\n\n if (attrs) {\n SVG.setAttr(element, attrs)\n }\n return element\n },\n\n // setting attributes\n setAttr (element, attrs) {\n for (var i in attrs) {\n if (i === 'href') { // path of an image should be stored as xlink:href attribute\n element.setAttributeNS(SVG.xlink, i, attrs[i])\n } else { // other common attribute\n element.setAttribute(i, attrs[i])\n }\n }\n return element\n }\n}\n\n// backgroundBlur PUBLIC CLASS DEFINITION\n// ================================\n\nvar Blur = function (element, options) {\n this.internalID = randomID()\n this.element = element\n this.width = element.offsetWidth\n this.height = element.offsetHeight\n this.element = element\n this.parent = this.element.parentNode\n this.options = Object.assign({}, Blur.DEFAULTS, options)\n this.overlayEl = this.createOverlay()\n this.blurredImage = null\n this.attachListeners()\n this.generateBlurredImage(this.options.url)\n}\n\nBlur.VERSION = '0.0.1'\n\nEventor.mixTo(Blur)\n\nBlur.DEFAULTS = {\n url: '', // URL to the image\n blurAmount: 10, // Amount of blurrines\n imageClass: '', // CSS class that will be applied to the image and to the SVG element,\n overlayClass: '', // CSS class of the element that will overlay the blur image\n duration: false, // If the image needs to be faded in, how long should that take\n opacity: 1 // Specify the final opacity\n}\n\nBlur.prototype.setBlurAmount = function (blurAmount) {\n this.options.blurAmount = blurAmount\n}\n\nBlur.prototype.attachListeners = function () {\n this.on('ui.blur.loaded', this.fadeIn.bind(this))\n this.on('ui.blur.unload', this.fadeOut.bind(this))\n}\n\nBlur.prototype.fadeIn = function () {\n}\n\nBlur.prototype.fadeOut = function () {\n}\n\nBlur.prototype.generateBlurredImage = function (url) {\n const previousImage = this.blurredImage\n this.internalID = randomID()\n\n if (previousImage) {\n previousImage.parentNode.removeChild(previousImage)\n }\n\n this.blurredImage = this.createSVG(url, this.width, this.height)\n}\n\nBlur.prototype.createOverlay = function () {\n if (this.options.overlayClass && this.options.overlayClass !== '') {\n const div = document.createElement('div')\n div.classList.add(this.options.overlayClass)\n this.parent.insertBefore(div, this.element)\n return div\n }\n\n return false\n}\n\nBlur.prototype.createSVG = function (url, width, height) {\n var that = this\n var svg = SVG.createElement('svg', { // our SVG element\n xmlns: SVG.svgns,\n version: '1.1',\n width: width,\n height: height,\n id: 'blurred' + this.internalID,\n 'class': this.options.imageClass,\n viewBox: '0 0 ' + width + ' ' + height,\n preserveAspectRatio: 'none'\n })\n\n var filterId = 'blur' + this.internalID // id of the filter that is called by image element\n var filter = SVG.createElement('filter', { // filter\n id: filterId\n })\n\n var gaussianBlur = SVG.createElement('feGaussianBlur', { // gaussian blur element\n 'in': 'SourceGraphic', // \"in\" is keyword. Opera generates an error if we don't put quotes\n stdDeviation: this.options.blurAmount // intensity of blur\n })\n\n var image = SVG.createElement('image', { // The image that uses the filter of blur\n x: 0,\n y: 0,\n width: width,\n height: height,\n 'externalResourcesRequired': 'true',\n href: url,\n style: 'filter:url(#' + filterId + ')', // filter link\n preserveAspectRatio: 'none'\n })\n\n image.addEventListener('load', function () {\n that.emit('ui.blur.loaded')\n }, true)\n\n image.addEventListener('SVGLoad', function () {\n that.emit('ui.blur.loaded')\n }, true)\n\n filter.appendChild(gaussianBlur) // adding the element of blur into the element of filter\n svg.appendChild(filter) // adding the filter into the SVG\n svg.appendChild(image) // adding an element of an image into the SVG\n\n // Ensure that the image is shown after duration + 100 msec in case the SVG load event didn't fire or took too long\n if (that.options.duration && that.options.duration > 0) {\n svg.style.opacity = 0\n window.setTimeout(function () {\n if (getStyle(svg, 'opacity') === '0') {\n svg.style.opacity = 1\n }\n }, this.options.duration + 100)\n }\n this.element.insertBefore(svg, this.element.firstChild)\n return svg\n}\n\nBlur.prototype.createIMG = function (url, width, height) {\n var that = this\n var originalImage = this.prependImage(url)\n var newBlurAmount = ((this.options.blurAmount * 2) > 100) ? 100 : (this.options.blurAmount * 2)\n // apply special CSS attributes to the image to blur it\n const styles = {\n // filter property here the intensity of blur multipied by two is around equal to the intensity in common browsers.\n filter: 'progid:DXImageTransform.Microsoft.Blur(pixelradius=' + newBlurAmount + ') ',\n // aligning of the blurred image by vertical and horizontal\n top: -this.options.blurAmount * 2.5,\n left: -this.options.blurAmount * 2.5,\n width: width + (this.options.blurAmount * 2.5),\n height: height + (this.options.blurAmount * 2.5)\n }\n for (var i in styles) {\n originalImage.style[i] = styles[i]\n }\n originalImage.setAttribute('id', this.internalID)\n\n originalImage.onload = function () {\n that.trigger('ui.blur.loaded')\n }\n // Ensure that the image is shown after duration + 100 msec in case the image load event didn't fire or took too long\n if (this.options.duration && this.options.duration > 0) {\n window.setTimeout(function () {\n if (getStyle(originalImage, 'opacity') === '0') {\n originalImage.style.opacity = 1\n }\n }, this.options.duration + 100)\n }\n return originalImage\n}\n\nBlur.prototype.prependImage = function (url) {\n const img = document.createElement('img')\n img.url = url\n img.setAttribute('id', this.internalID)\n img.classList.add(this.options.imageClass)\n if (this.overlayEl) {\n this.parent.insertBefore(img, this.overlayEl)\n } else {\n this.parent.insertBefore(img, this.parent.firstChild)\n }\n return img\n}\n\nexport default Blur\n\nfunction getStyle (ele, prop) {\n return window.getComputedStyle(ele, null).getPropertyValue(prop)\n}\n" }, { "path": "src/components/blur/index.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/blur/metas.yml", "content": "category:\n en: Deprecated\n 'zh-CN': 不再维护\nicon: ''\nextra:\n zh-CN: |\n ::: tip\n 当前组件使用`svg`实现模糊效果。如果在手机上渲染过慢，可以尝试直接使用css3的`blur filter`。\n :::\n en: |\n ::: tip\n This component uses `svg` to implement blur. If rendering it in mobile devices is too slow, you can try to use a css3 featrue -- `blur filter`.\n :::\ntags:\n en:\n - image\n - blur\n zh-CN:\n - 图片\n - 模糊\n - 高斯模糊\nprops:\n blur-amount:\n type: Number\n default: 10\n en: blur amount of the effect\n zh-CN: 模糊程度\n url:\n type: String\n default: ''\n en: url of the image\n zh-CN: 图片地址\n height:\n type: Number\n default: 200\n en: height of the container\n zh-CN: 容器高度\nslots:\n default:\n en: content of the container, above the blur image\n zh-CN: 容器内容，显示在模糊内容上面\n" }, { "path": "src/components/blur/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('Blur', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('blur')\n })\n})\n" }, { "path": "src/components/box/index.vue", "content": "\n\n\n" }, { "path": "src/components/box/metas.yml", "content": "category:\n en: Deprecated\n 'zh-CN': 不再维护\nintro:\n en: a small component for lazy persons who don't want to write less code\n zh-CN: 为div设置margin值，懒人才需要的组件\nprops:\n gap:\n en: margin value\n zh-CN: margin值\n" }, { "path": "src/components/box/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('Box', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('box')\n })\n})\n" }, { "path": "src/components/button-tab/button-tab-item.vue", "content": "\n\n\n" }, { "path": "src/components/button-tab/button-tab.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/button-tab/index.js", "content": "import ButtonTab from './button-tab'\nimport ButtonTabItem from './button-tab-item'\n\nexport {\n ButtonTab,\n ButtonTabItem\n}\n" }, { "path": "src/components/button-tab/metas.yml", "content": "category:\n en: Navigation\n 'zh-CN': 导航\nicon: ''\nimport_code: |\n import { ButtonTab, ButtonTabItem } from 'vux'\nitems:\n - button-tab\n - button-tab-item\ntags:\n en:\n - button\n - tab\n zh-CN:\n - 按钮\n - 选项卡\nbutton-tab:\n props:\n value:\n type: Number\n default: 0\n en: 'current index, start from 0, use `v-model` for binding'\n zh-CN: '当前选中索引值，从0开始，使用 `v-model` 绑定'\n height:\n type: Number\n default: 30\n en: height in px\n zh-CN: 高度值, 单位为像素\nbutton-tab-item:\n props:\n selected:\n type: Boolean\n default: false\n en: if selected\n zh-CN: 是否选中\n events:\n on-item-click:\n params: (index)\n en: emits when item is clicked\n zh-CN: 当前按钮点击时触发\nchanges:\n 2.7.6:\n en:\n - '[fix] fix border disappear bug #2322'\n zh-CN:\n - '[fix] 修复分割线会消失的bug #2322'\n v2.2.0:\n en:\n - '[enhance] Update border style(1px)'\n zh-CN:\n - '[enhance] 更新 1px 边框'\n v2.1.0-rc.46:\n zh-CN:\n - '[feature] 添加更多`less`变量 #896 @erguotou520'\n en:\n - '[feature] add more `less` variables #896 @erguotou520'\n v2.0.0:\n en:\n - '[enhance] remove tap highlight'\n zh-CN:\n - '[enhance] 去除 Android 下点击可能出现的蓝色边框'\n" }, { "path": "src/components/button-tab/test.js", "content": "import Comp from './button-tab.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('ButtonTab', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('button-tab')\n })\n})\n" }, { "path": "src/components/calendar/index.vue", "content": "\n\n\ncancel_text:\n en: cancel\n zh-CN: 取消\nconfirm_text:\n en: done\n zh-CN: 确定\n\n\n\n\n" }, { "path": "src/components/calendar/metas.yml", "content": "category:\n en: Form\n 'zh-CN': 表单\nicon: ''\nextra:\n zh-CN: |\n\n ```html\n \n \n \n ```\n\n ::: tip\n `calendar`只能在`Group`中使用\n
    \n 除了`title`和 `value`, 其他`props`和`inline-calendar`完全一致。\n :::\n\n ::: tip\n 当绑定值为数组时，日历将为多选模式\n :::\n\n en: |\n\n ```html\n \n \n \n ```\n\n ::: tip\n `calendar` can be only used in `Group`\n
    \n Except `title` and `value`, other `props` are the same as those of `inline-calendar`.\n :::\n\ntags:\n en:\n - calendar\n - time\n - date\n zh-CN:\n - 日历\n - 日期\nextends:\n - inline-calendar\n - popup\n - cell\nintro:\n zh-CN: 扩展自inline-calendar, 相关属性可查看inline-calendar文档\n en: extends from inline-calendar. Related props can be found in the document of inline-calendar\nprops:\n value:\n type: String\n default: ''\n zh-CN: \"表单值, v-model 绑定。当值为空时，为单选；当值为[]时，为多选；设置值为'TODAY'可快捷选取当前日期。`placeholder`只有在值为空或[]时显示。\"\n en: form value, binding by v-model. Empty means single seleciton; [] means multiple selection. When the value is \"TODAY\", can quick pick current date. `placeholder` is valid only when the value is empty or [].\n title:\n type: String\n default: ''\n zh-CN: label文字\n en: text of label\n placeholder:\n type: String\n en: placeholder\n zh-CN: 占位提示文字\n show-popup-header:\n version: v2.6.0\n type: Boolean\n en: whether show popup header. Show under multiple selection mode; hide under single selection mode.\n zh-CN: 是否显示弹窗头部，当为多选时强制显示，单选时默认不显示\n popup-header-title:\n version: v2.6.0\n type: String\n en: popup header title\n zh-CN: 弹窗头部文字\n display-format:\n version: v2.6.4\n type: Function\n params: '`(value, type)`'\n en: format value before displaying in cell\n zh-CN: 格式化显示值\n readonly:\n version: v2.7.2\n en: whether disable selecting\n zh-CN: 是否禁用弹窗选择\nevents:\n on-change:\n params: (value)\n en: emits when value changes\n zh-CN: 值改变时触发\n on-show:\n en: emits when popup shows\n zh-CN: 弹窗显示时触发\n on-hide:\n en: emits when popup hides\n zh-CN: 弹窗关闭时触发\nchanges:\n 2.7.6:\n en:\n - '[fix] fix no hiding after selecting the same value #2306'\n zh-CN:\n - '[fix] 修复选中同个日期时无法自动关闭的问题 #2306'\n v2.7.2:\n en:\n - '[feature] add prop:readonly #2178'\n - '[fix] fix event:on-change fires multiple times'\n zh-CN:\n - '[feature] 支持禁用选择属性 prop:readonly #2178'\n - '[fix] 修复 on-change 事件重复触发的问题'\n v2.7.0:\n en:\n - '[fix] fix top border #2104'\n zh-CN:\n - '[fix] 修复上边框 #2104'\n v2.6.4:\n en:\n - '[feature] support prop:display-format #2023'\n zh-CN:\n - '[feature] 支持格式化值显示 #2023'\n v2.6.0:\n en:\n - '[feature] support prop:show-popup-header'\n zh-CN:\n - '[feature] 支持显示弹窗头部(取消，确定)'\n v2.5.10:\n en:\n - '[feature] Support prop:placeholder'\n zh-CN:\n - '[feature] 支持 prop:placeholder'\n" }, { "path": "src/components/calendar/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('Calendar', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('calendar')\n })\n})\n" }, { "path": "src/components/card/index.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/card/metas.yml", "content": "category:\n en: Data Display\n zh-CN: 数据展示\nicon: ''\nprops:\n header.title:\n type: String\n default: ''\n zh-CN: 头部标题，不指定则不显示\n en: title of header, not show without specify content\n footer.title:\n type: String\n default: ''\n zh-CN: 底部标题，不指定则不显示\n en: title of footer, not show without specify content\n footer.link:\n type: String\n default: ''\n zh-CN: 底部链接，普通url或者v-link参数\n en: link in the bottom, normal url or a v-link argument\nevents:\n on-click-footer:\n zh-CN: 点击底部时触发\n en: emits when clicking the footer\n on-click-header:\n zh-CN: 点击头部时触发\n en: emits when clicking the header\nslots:\n header:\n zh-CN: 头部位置\n en: header\n content:\n zh-CN: 中间主体位置\n en: content, the main body part\n footer:\n zh-CN: 底部位置\n en: footer\n" }, { "path": "src/components/card/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('Card', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('card')\n })\n})\n" }, { "path": "src/components/cell/index.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/cell/metas.yml", "content": "category:\n en: Form\n 'zh-CN': 表单\nicon: ''\nextra:\n zh-CN: |\n ```html\n \n \n \n ```\n\n ::: tip\n Cell 组件只能在`Group`中使用\n :::\ntags:\n en:\n - cell\n - form\n zh-CN:\n - 表单\n - 列表\nprops:\n title:\n type: String\n default: ''\n en: label text on the left\n zh-CN: 左边标题文字\n value:\n type: String\n default: ''\n en: right text\n zh-CN: 右侧文字，复杂的样式布局请使用slot\n inline-desc:\n type: String\n default: ''\n en: the text below title\n zh-CN: 标题下面文字，一般为说明文字\n link:\n type: String, Object\n en: redirect link. Can be http(s) protocol; can also be vue-router format\n zh-CN: 点击链接，可以为http(s)协议，也可以是 vue-router 支持的地址形式\n is-link:\n type: Boolean\n default: false\n en: if this is a link; if true, there will be an arrow on the right\n zh-CN: 是否为链接，如果是，右侧将会出现指引点击的右箭头\n primary:\n type: String\n default: 'title'\n en: \"main content area, can be in ['title', 'content']\"\n zh-CN: \"可选值为 ['title', 'content']，对应的div会加上weui_cell_primary类名实现内容宽度自适应\"\n is-loading:\n version: v2.2.0\n type: Boolean\n default: false\n en: if show loading icon, good for asynchronous loading\n zh-CN: 是否显示加载图标，适用于异步加载数据的场景\n value-align:\n version: v2.2.0\n default: left\n en: value's text-align，one of left, right. prop:primary will be set to content if value-align value is right\n zh-CN: 文字值对齐方式，可选值为 left right。当设为 right 时，primary 值将会设为 content\n border-intent:\n version: v2.2.1-rc.1\n type: Boolean\n default: true\n en: if set border intent on the left side\n zh-CN: 是否显示边框与左边的间隙\n arrow-direction:\n version: v2.2.1-rc.1\n type: String\n en: arrow direction, one of up, down\n zh-CN: 右侧箭头方向，可选有 up down\n disabled:\n version: v2.2.2\n type: Boolean\n en: set disabled style for label and arrow (if is-link is true)\n zh-CN: 对 label 和箭头(如果使用 is-link )显示不可操作样式\n align-items:\n version: v2.6.4\n type: String\n default: center\n en: align-items value\n zh-CN: align-items 样式值\nslots:\n default:\n en: \"right area, you can use default slot instead of prop:value so you can use complicated layout\"\n zh-CN: 右侧内容，相比于value的优点是可以用复杂的样式或者调用组件\n value:\n en: \"[deprecated] the same as default slot\"\n zh-CN: \"[废弃] 同默认slot\"\n icon:\n en: icon area before title\n zh-CN: 标题左侧的图像位置\n after-title:\n en: after title\n zh-CN: 标题右侧位置\n child:\n en: the child element of the cell, you can add an element with absolute position\n zh-CN: cell的直接子元素，因此可以添加一个相对于cell绝对定位的元素\n inline-desc:\n version: v2.2.1-rc.6\n en: inline-desc slot, the same function as prop:inline-desc but can use html\n zh-CN: inline-desc 内容，和 prop:inline-desc 功能一样，但是可以使用 html\n title:\n version: v2.3.3\n en: title slot\n zh-CN: title 插槽，方便自定义样式\nchanges:\n v2.9.0:\n en:\n - '[fix] fix weui-loading style'\n zh-CN:\n - '[fix] 修复 weui-loading 样式'\n v2.8.1:\n en:\n - '[fix] fix justify class #2545'\n zh-CN:\n - '[fix] 修复 justify 类名 #2545'\n v2.7.0:\n en:\n - '[fix] fix ssr rendering issue'\n zh-CN:\n - '[fix] 修复 ssr 渲染问题'\n v2.6.4:\n en:\n - '[feature] support prop:align-items'\n zh-CN:\n - '[feature] 支持属性 align-items'\n v2.3.6:\n en:\n - '[feature] Support arrow less variables'\n zh-CN:\n - '[feature] 支持多个箭头样式变量'\n v2.3.3:\n en:\n - '[feature] Support slot:title'\n zh-CN:\n - '[feature] 支持 slot:title'\n v2.2.2:\n en:\n - '[feature] Support prop:disabled'\n zh-CN:\n - '[feature] 支持 prop:disabled 显示禁用样式'\n v2.2.1-rc.6:\n en:\n - '[feature] Support slot:inline-desc'\n zh-CN:\n - '[feature] 支持 slot:inline-desc'\n v2.2.1-rc.1:\n en:\n - '[feature] Support prop:border-intent'\n - '[feature] Support prop:arrow-direction'\n zh-CN:\n - '[feature] 支持 prop:border-intent, 用以不显示边框与左边间隙'\n - '[feature] 支持 prop:arrow-direction, 用以在折叠场景下动态更改方向'\n v2.2.0:\n en:\n - '[feature] Support prop:is-loading'\n zh-CN:\n - '[feature] 支持 prop:is-loading 显示加载图标，适用于异步加载数据的场景'\n v2.1.1-rc.13:\n en:\n - '[fix] Support Group label styles #1110'\n zh-CN:\n - '[fix] 修复 label 宽度不受控于 Group #1110'\n v2.1.1-rc.3:\n en:\n - '[feature] Add font-size variable #990 @wg5945'\n zh-CN:\n - '[feature] 支持字体变量 #990 @wg5945'\n v2.1.0-rc.47:\n zh-CN:\n - '[enhance] 修复内容多时的箭头位置 #715 @greedying '\n" }, { "path": "src/components/cell/props.js", "content": "export default function () {\n return {\n title: [String, Number],\n value: [String, Number, Array],\n isLink: Boolean,\n isLoading: Boolean,\n inlineDesc: [String, Number],\n primary: {\n type: String,\n default: 'title'\n },\n link: [String, Object],\n valueAlign: [String, Boolean, Number],\n borderIntent: {\n type: Boolean,\n default: true\n },\n disabled: Boolean,\n arrowDirection: String, // down or up\n alignItems: String\n }\n}\n" }, { "path": "src/components/cell/test/wrapper.vue", "content": "\n\n\n" }, { "path": "src/components/cell/test.js", "content": "import CellWrapper from './test/wrapper'\nimport Cell from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('Cell.vue', () => {\n it('should render correct value', () => {\n const wrapper = mount(CellWrapper)\n wrapper.setProps({\n value: 'hello'\n })\n expect(wrapper.contains('div')).to.equal(true)\n })\n\n it('prop:align-items', () => {\n const wrapper = mount(Cell, {\n propsData: {\n alignItems: 'flex-start'\n }\n })\n expect(wrapper.hasStyle('-webkit-align-items', 'flex-start')).to.equal(true)\n })\n\n it('prop:title', () => {\n const wrapper = mount(Cell, {\n propsData: {\n title: 'hello'\n }\n })\n expect(wrapper.find('.vux-label').vnode.elm.innerText).to.equal('hello')\n })\n})\n" }, { "path": "src/components/cell-box/index.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/cell-box/metas.yml", "content": "category:\n en: Form\n 'zh-CN': 表单\nicon: ''\nextra:\n zh-CN: >\n ```html\n \n \n \n \n \n ```\n\n ::: tip\n 与`cell`相比，`cell-box`更自由和灵活，只提供`is-link`和`link`属性，内容直接使用默认slot定义。\n
    \n `cell-box`同样只能在`Group`中使用\n :::\ntags:\n - cell\n - form\nprops:\n is-link:\n type: Boolean\n default: false\n en: if this is a link; if true, there will be an arrow on the right\n zh-CN: 是否为链接，如果是，右侧将会出现指引点击的右箭头\n link:\n type: String, Object\n en: redirect link. Can be http(s) protocol; can also be vue-router format\n zh-CN: 点击链接，可以为http(s)协议，也可以是 vue-router 支持的地址形式\n border-intent:\n version: v2.2.1-rc.1\n type: Boolean\n default: true\n en: if set border intent on the left side\n zh-CN: 是否显示边框与左边的间隙\n align-items:\n version: v2.6.5\n type: String\n default: center\n en: flexbox align-items setting\n zh-CN: flex 布局 align-items 设置\nslots:\n default:\n en: content body\n zh-CN: 内容区域\nchanges:\n v2.6.5:\n en:\n - '[feature] add prop:align-items'\n zh-CN:\n - '[feature] 添加属性 align-items'\n v2.5.5:\n en:\n - \"[change] Remove default slot's div wrapper #1769\"\n zh-CN:\n - '[change] 移除默认 slot 的父级 div #1769'\n v2.2.1-rc.1:\n en:\n - '[feature] Support prop:border-intent'\n zh-CN:\n - '[feature] 支持 prop:border-intent, 用以不显示边框与左边间隙'\n v2.1.1-rc.1:\n en:\n - '[feature] new component'\n zh-CN:\n - '[feature] 新组件'\n" }, { "path": "src/components/cell-box/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('CellBox', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('cell-box')\n })\n})\n" }, { "path": "src/components/cell-form-preview/index.vue", "content": "\n\n\n\n\n\n" }, { "path": "src/components/cell-form-preview/metas.yml", "content": "category:\n en: Form\n 'zh-CN': 表单\nname: cell-form-preview\nicon: ''\ntags:\n en:\n - form\n - cell-form-preview\n zh-CN:\n - 表单\n - 预览\nextra: |\n\n ::: warning\n `CellFormPreview` 需要在 `Group` 组件中使用。\n :::\n\n\n ``` html\n \n \n \n \n ```\n\n ``` js\n import { CellFormPreview, Group, Cell } from 'vux'\n\n export default {\n components: {\n CellFormPreview,\n Group,\n Cell\n },\n data () {\n return {\n list: [{\n label: 'Apple',\n value: '3.29'\n }, {\n label: 'Banana',\n value: '1.04'\n }, {\n label: 'Fish',\n value: '8.00'\n }]\n }\n }\n }\n ```\nslots:\nprops:\n list:\n version: v2.2.0\n type: Array\n en: label and value list\n zh-CN: 内容列表，键值包括`label`和`value`，可缺值\n border-intent:\n version: v2.2.1-rc.1\n type: Boolean\n default: true\n en: if set border intent on the left side\n zh-CN: 是否显示边框与左边的间隙\nchanges:\n v2.2.1-rc.1:\n en:\n - '[feature] Support prop:border-intent'\n zh-CN:\n - '[feature] 支持 prop:border-intent, 用以不显示边框与左边间隙'\n v2.2.0:\n en:\n - '[feature] new component'\n zh-CN:\n - '[feature] 新组件'\n" }, { "path": "src/components/cell-form-preview/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('CellFormPreview', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('cell-form-preview')\n })\n})\n" }, { "path": "src/components/check-icon/index.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/check-icon/metas.yml", "content": "category:\n en: Form\n 'zh-CN': 表单\nicon: ''\ntags:\n en:\n - icon\n zh-CN:\n - 图标\nprops:\n value:\n type: Boolean\n version: v2.3.8\n default: false\n en: if selected, use :value.sync for two-way data binding\n zh-CN: 是否选中，使用 :value.sync 双向绑定\n type:\n type: String\n default: unknown\n en: \"style of check icon, can be ['plain']\"\n zh-CN: \"check icon 样式，可选值为['plain']\"\n" }, { "path": "src/components/check-icon/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('CheckIcon', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('check-icon')\n })\n})\n" }, { "path": "src/components/checker/checker-item.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/checker/checker.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/checker/index.js", "content": "import Checker from './checker'\nimport CheckerItem from './checker-item'\n\nexport {\n Checker,\n CheckerItem\n}\n" }, { "path": "src/components/checker/metas.yml", "content": "category:\n en: Form\n 'zh-CN': 表单\nicon: ''\nextra:\n en: |\n\n `Checker` is a more flexible component than `Radio` and `Checklist`.\n\n zh-CN: |\n\n `Checker` 是比`Radio`或者`Checklist`更加灵活的选择组件，可以自定义需要的布局样式。\n\nitems:\n - checker\n - checker-item\ntags:\n en:\n - form\n - checker\n - select\n zh-CN:\n - 表单\n - 选择\nchecker:\n props:\n default-item-class:\n en: default checker-item classname\n zh-CN: 默认状态class\n selected-item-class:\n en: selected check-item classname\n zh-CN: 选中样式class\n disabled-item-class:\n en: disabled check-item classname\n zh-CN: 不可选样式class\n type:\n default: radio\n en: checker type, should be raido or checkbox\n zh-CN: 类型，单选为`radio`, 多选为`checkbox`\n value:\n type: String,Array\n en: selected value, use `v-model` for binding\n zh-CN: 表单值，使用`v-model`绑定\n max:\n type: Number\n en: max selected number when type = checkbox\n zh-CN: 最多可选个数，多选时可用\n radio-required:\n version: v2.6.3\n type: Boolean\n default: false\n en: whether value is required in radio mode. if true, current selected item will always be selected even after clicking\n zh-CN: 在单选模式下是否必选一个值。设为 true 后点击当前选中项不会取消选中。\n events:\n on-change:\n params: '`(value)`'\n en: emits when value is changed\n zh-CN: value值变化时触发\nchecker-item:\n props:\n value:\n en: value of current checker-item\n zh-CN: 当前项的值\n disabled:\n type: Boolean\n default: false\n en: if current item is disabled\n zh-CN: 是否为不可选\n events:\n on-item-click:\n params: '`(itemValue, itemDisabled)`'\n en: emits when current checker-item is clicked\n zh-CN: 当前项被点击时触发\nchanges:\n v2.6.3:\n en:\n - '[feature] support prop:radio-required #2004'\n zh-CN:\n - '[feature] 支持属性 radio-required 强制单选模式下必选一项 #2004'\n v2.6.0:\n en:\n - '[fix] Fix event:on-change do not fire when using :value binding instead of v-model #1945'\n zh-CN:\n - '[fix] 修复 on-change 事件 在使用 :value 绑定的情况下不触发 #1945'\n v2.3.8:\n en:\n - '[enhance] clear value when selected item is disabled #1479'\n zh-CN:\n - '[enhance] 当前选中 item 被 disabled 时清除值 #1479'\n v2.3.2:\n en:\n - '[enhance] Support unselecting current item when clicking again in radio mode #1468'\n zh-CN:\n - '[enhance] 支持在单选的情况下第二次点击时变成不选中当前项 #1468'\n v2.1.1-rc.14:\n en:\n - '[enhance] Now disabled item also emits event:on-item-click #1144'\n zh-CN:\n - '[enhance] 不可选项同样触发事件 on-item-click #1144'\n v2.0.0:\n en:\n - '[feature] Support Object value #705'\n zh-CN:\n - '[feature] 支持Object类型的值 #705'\n" }, { "path": "src/components/checklist/index.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/checklist/metas.yml", "content": "category:\n en: Form\n 'zh-CN': 表单\nicon: ''\ntags:\n en:\n - checklist\n - select\n - form\nextra: |\n\n ::: tip\n 从 v2.6.2 开始，max=1即为单选模式，不会要求先取消上一个选中的才能选中下一个值。\n :::\n\nprops:\n value:\n type: Array\n default: []\n en: form value\n zh-CN: 表单值\n title:\n type: String\n default: ''\n en: title\n zh-CN: 标题\n required:\n type: Boolean\n default: false\n en: if required\n zh-CN: 是否为必选\n options:\n type: Array\n default: []\n en: options list\n zh-CN: 选项列表，可以为`[{key:'name',value:'value',inlineDesc:'inlineDesc'}]`的形式\n max:\n type: Number\n default: ''\n en: max selected number\n zh-CN: 最多可选个数\n min:\n type: Number\n default: ''\n en: min selected number\n zh-CN: 最少可选个数\n random-order:\n type: Boolean\n default: false\n en: if place options in a random order\n zh-CN: 是否随机打乱选项顺序\n check-disabled:\n version: v2.2.1-rc.1\n type: Boolean\n default: true\n en: if disabled item when selectedItems.length === total.length, by using this prop:max no longer works\n zh-CN: 是否进行可选检测，默认情况下当选择个数等于可选个数(max)时，其他项不可选择。该选项主要适用于从多个选项列表中收集值的场景。注意的该选项设为 false 时 max 设置将失效。\n label-position:\n version: v2.2.1-rc.4\n type: String\n default: right\n en: label position, can be set to left or right\n zh-CN: label 位置，可以设置为 left 或者 right\n disabled:\n version: v2.3.8\n en: if disable user from selecting\n zh-CN: 是否禁用操作\nmethods:\n getFullValue:\n version: v2.6.4\n en: get current value with label\n zh-CN: 获取值和对应的显示文字\nevents:\n on-change:\n params: '(value, label)'\n en: emits when value changes, param:label is supported after v2.5.7\n zh-CN: 值变化时触发，参数为 (value, label)，其中 label 参数在 v2.5.7 后支持\nchanges:\n v2.7.0:\n en:\n - '[fix] fix default selected item missing issue #2122'\n zh-CN:\n - '[fix] 修复默认选中项缺失问题 #2122'\n v2.6.5:\n en:\n - '[fix] fix missing icon style when using checklist along #2041'\n - '[fix] initializing the tempValue when created #2059'\n zh-CN:\n - '[fix] 修复仅调用 checklist 组件时图标样式不存在 #2041'\n - '[fix] 在created时，初始化tempValue值 #2059'\n v2.6.4:\n en:\n - '[feature] support method:getFullValue #2022'\n zh-CN:\n - '[feature] 添加方法 getFullValue 获取值和对应的显示文字 #2022'\n v2.6.3:\n en:\n - '[fix] now on-change params has labels as second param #2018'\n zh-CN:\n - '[fix] on-change 参数支持 labels #2018'\n v2.6.2:\n en:\n - '[feature] Support radio mode(max = 1) #1996'\n zh-CN:\n - '[feature] 支持 max=1 交互为单选模式 #1996'\n v2.5.7:\n en:\n - '[feature] Support `label` param for on-change event #1783'\n zh-CN:\n - '[feature] 支持在 on-change 事件中附带 `label` 值 #1783'\n v2.3.8:\n en:\n - '[feature] Add prop:disabled #1254'\n zh-CN:\n - '[feature] 支持 prop:disabled 禁用操作 #1254'\n v2.2.1-rc.4:\n en:\n - '[feature] Support prop:label-position'\n zh-CN:\n - '[feature] 支持通过 prop:label-position 设置 label位置'\n v2.2.1-rc.1:\n en:\n - '[feature] Support prop:check-disabled'\n zh-CN:\n - '[feature] 支持 prop:check-disabled'\n v2.0.0:\n en:\n - '[change] it does not show errors by default, handle errors by on-error events'\n - '[feature] add slot:footer slot:after-title'\n - '[change] if value.length === max, the left items will be disabled'\n - '[change] default required value is false'\n zh-CN:\n - '[change] 默认不显示错误，你可以监听on-error事件结合slot进行处理和显示'\n - '[feature] 添加插槽 footer、after-title'\n - '[change] 如果已经达到max上限，没有选中的选项将不能选择，因此不再和之前版本一样会出现最多可选max个的error信息'\n - '[change] 默认 required 值为false, 与html规范一致'\n v2.5.2:\n en:\n - '[fix] emit event `input` before `on-change`'\n - '[feature] add attribute `inlineDesc` to `options`'\n zh-CN:\n - '[fix] 在 `on-change` 事件之前 emit `input` 事件'\n - '[feature] `options` 中增加 `inlineDesc` 属性'\n" }, { "path": "src/components/checklist/object-filter.js", "content": "export const getValue = function (item) {\n return typeof item === 'object' ? item.value : item\n}\n\nexport const getKey = function (item) {\n return typeof item === 'object' ? item.key : item\n}\n\nexport const getInlineDesc = function (item) {\n return typeof item === 'object' ? item.inlineDesc : ''\n}\n\nexport const getLabel = function (list = [], value) {\n if (!list.length) {\n return value\n }\n if (typeof list[0] === 'string') {\n return value\n }\n const match = list.filter(one => {\n return one.key === value\n })\n if (match.length) {\n return match[0].value || match[0].label\n }\n return value\n}\n\nexport const getLabels = function (list = [], values = []) {\n return values.map(value => getLabel(list, value))\n}\n" }, { "path": "src/components/checklist/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('Checklist', () => {\n it('basic', () => {\n const wrapper = mount(Comp, {\n propsData: {\n options: []\n }\n })\n expect(wrapper.name()).to.equal('checklist')\n })\n})\n" }, { "path": "src/components/clocker/clocker.js", "content": "import Eventor from '../../libs/eventor'\n\n// https://github.com/MoeKit/clocker\nvar instances = []\nvar matchers = []\n// Miliseconds\nmatchers.push(/^[0-9]*$/.source)\n// Month/Day/Year [hours:minutes:seconds]\nmatchers.push(/([0-9]{1,2}\\/){2}[0-9]{4}( [0-9]{1,2}(:[0-9]{2}){2})?/\n .source)\n// Year/Day/Month [hours:minutes:seconds] and\n// Year-Day-Month [hours:minutes:seconds]\nmatchers.push(/[0-9]{4}([/-][0-9]{1,2}){2}( [0-9]{1,2}(:[0-9]{2}){2})?/\n .source)\n// Cast the matchers to a regular expression object\nmatchers = new RegExp(matchers.join('|'))\n// Parse a Date formatted has String to a native object\n\nfunction parseDateString (dateString) {\n // Pass through when a native object is sent\n if (dateString instanceof Date) {\n return dateString\n }\n // Caste string to date object\n if (String(dateString).match(matchers)) {\n // If looks like a milisecond value cast to number before\n // final casting (Thanks to @msigley)\n if (String(dateString).match(/^[0-9]*$/)) {\n dateString = Number(dateString)\n }\n // Replace dashes to slashes\n if (String(dateString).match(/-/)) {\n dateString = String(dateString).replace(/-/g, '/')\n }\n return new Date(dateString)\n } else {\n throw new Error('Couldn\\'t cast `' + dateString +\n '` to a date object.')\n }\n}\n// Map to convert from a directive to offset object property\nvar DIRECTIVE_KEY_MAP = {\n 'Y': 'years',\n 'm': 'months',\n 'w': 'weeks',\n 'D': 'days',\n 'H': 'hours',\n 'M': 'minutes',\n 'S': 'seconds'\n}\n// Returns an escaped regexp from the string\n\nfunction escapedRegExp (str) {\n var sanitize = str.toString().replace(/([.?*+^$[\\]\\\\(){}|-])/g, '\\\\$1')\n return new RegExp(sanitize)\n}\n// Time string formatter\n\nfunction strftime (offsetObject) {\n return function (format) {\n var directives = format.match(/%(-|!)?[A-Z]{1}(:[^]+)?/gi)\n var d2h = false\n if (directives.indexOf('%D') < 0 && directives.indexOf('%H') >= 0) {\n d2h = true\n }\n if (directives) {\n for (var i = 0, len = directives.length; i < len; ++i) {\n var directive = directives[i].match(/%(-|!)?([a-zA-Z]{1})(:[^]+)?/)\n var regexp = escapedRegExp(directive[0])\n var modifier = directive[1] || ''\n var plural = directive[3] || ''\n var value = null\n var key = null\n // Get the key\n directive = directive[2]\n // Swap shot-versions directives\n if (DIRECTIVE_KEY_MAP.hasOwnProperty(directive)) {\n key = DIRECTIVE_KEY_MAP[directive]\n value = Number(offsetObject[key])\n if (key === 'hours' && d2h) {\n value += Number(offsetObject['days']) * 24\n }\n }\n if (value !== null) {\n // Pluralize\n if (modifier === '!') {\n value = pluralize(plural, value)\n }\n // Add zero-padding\n if (modifier === '') {\n if (value < 10) {\n value = '0' + value.toString()\n }\n }\n // Replace the directive\n format = format.replace(regexp, value.toString())\n }\n }\n }\n format = format.replace('%_M1', offsetObject.minutes_1)\n .replace('%_M2', offsetObject.minutes_2)\n .replace('%_S1', offsetObject.seconds_1)\n .replace('%_S2', offsetObject.seconds_2)\n .replace('%_S3', offsetObject.seconds_3)\n .replace('%_H1', offsetObject.hours_1)\n .replace('%_H2', offsetObject.hours_2)\n .replace('%_H3', offsetObject.hours_3)\n .replace('%_D1', offsetObject.days_1)\n .replace('%_D2', offsetObject.days_2)\n .replace('%_D3', offsetObject.days_3)\n format = format.replace(/%%/, '%')\n return format\n }\n}\n// Pluralize\n\nfunction pluralize (format, count) {\n var plural = 's'\n var singular = ''\n if (format) {\n format = format.replace(/(:||\\s)/gi, '').split(/,/)\n if (format.length === 1) {\n plural = format[0]\n } else {\n singular = format[0]\n plural = format[1]\n }\n }\n if (Math.abs(count) === 1) {\n return singular\n } else {\n return plural\n }\n}\n\nfunction splitNumber (number) {\n number = number + ''\n number = (number.length === 1 ? ('0' + number) : number) + ''\n return number.split('')\n}\n\n// The Final Countdown\nvar Countdown = function (finalDate, option) {\n option = option || {}\n this.PRECISION = option.precision || 100 // 0.1 seconds, used to update the DOM\n this.interval = null\n this.offset = {}\n // Register this instance\n this.instanceNumber = instances.length\n instances.push(this)\n // Set the final date and start\n this.setFinalDate(finalDate)\n}\n\nEventor.mixTo(Countdown)\nvar pro = Countdown.prototype\n\nvar fns = {\n start () {\n if (this.interval !== null) {\n clearInterval(this.interval)\n }\n var self = this\n this.update()\n this.interval = setInterval(function () {\n self.update()\n }, this.PRECISION)\n return this\n },\n stop () {\n clearInterval(this.interval)\n this.interval = null\n this._dispatchEvent('stoped')\n return this\n },\n toggle () {\n if (this.interval) {\n this.stop()\n } else {\n this.start()\n }\n return this\n },\n pause () {\n return this.stop()\n },\n resume () {\n return this.start()\n },\n remove () {\n this.stop()\n instances[this.instanceNumber] = null\n },\n setFinalDate (value) {\n this.finalDate = parseDateString(value) // Cast the given date\n return this\n },\n getOffset () {\n this.totalSecsLeft = this.finalDate.getTime() - new Date().getTime() // In miliseconds\n this.totalSecsLeft = Math.ceil(this.totalSecsLeft / 1000)\n this.totalSecsLeft = this.totalSecsLeft < 0 ? 0 : this.totalSecsLeft\n // Calculate the offsets\n return {\n seconds: this.totalSecsLeft % 60,\n minutes: Math.floor(this.totalSecsLeft / 60) % 60,\n hours: Math.floor(this.totalSecsLeft / 60 / 60) % 24,\n days: Math.floor(this.totalSecsLeft / 60 / 60 / 24),\n weeks: Math.floor(this.totalSecsLeft / 60 / 60 / 24 / 7),\n months: Math.floor(this.totalSecsLeft / 60 / 60 / 24 / 30),\n years: Math.floor(this.totalSecsLeft / 60 / 60 / 24 / 365)\n }\n },\n update () {\n // Calculate the offsets\n this.offset = this.getOffset()\n // split offset only for days, hours, minutes, seconds and two number like 45, do not support 100\n\n var list = ['days', 'hours', 'minutes', 'seconds']\n\n for (var i = 0; i < list.length; i++) {\n var key = list[i]\n var numbers = splitNumber(this.offset[key])\n for (let n = 0; n < numbers.length; n++) {\n this.offset[`${key}_${n + 1}`] = numbers[n]\n }\n }\n // Dispatch an event\n if (this.totalSecsLeft === 0) {\n this.stop()\n this._dispatchEvent('finish')\n } else {\n this._dispatchEvent('update')\n }\n return this\n },\n _dispatchEvent (eventName) {\n var event = {}\n event.finalDate = this.finalDate\n event.offset = this.offset\n event.strftime = strftime(this.offset)\n this.emit(eventName, event)\n this.emit('tick', event)\n }\n}\n\nfor (var i in fns) {\n pro[i] = fns[i]\n}\n\nexport default Countdown\n" }, { "path": "src/components/clocker/index.vue", "content": "\n\n\n" }, { "path": "src/components/clocker/metas.yml", "content": "category:\n en: Data Display\n 'zh-CN': 数据展示\nicon: ''\ntags:\n en:\n - time\n - countdown\n zh-CN:\n - 倒计时\n - 时间\nprops:\n time:\n type: String\n default: ''\n en: the end time\n zh-CN: 结束时间\n format:\n type: String\n default: '%D 天 %H 小时 %M 分 %S 秒'\n en: the result format\n zh-CN: 显示格式\nevents:\n on-tick:\n en: triggers on time ticking\n zh-CN: 时间计算时触发，但非精确每1s触发\n on-finish:\n en: triggers on time end\n zh-CN: 时间结束时触发\nslots:\n default:\n en: if specified, will be the format for the result\n zh-CN: 若存在，则作为最终显示出来的格式模板\nchanges:\n v2.7.9:\n en:\n - '[fix] fix bug when initial value is empty string #2449'\n zh-CN:\n - '[fix] 修复更新值为非空时报错问题 #2449'\n v2.7.5:\n en:\n - '[fix] fix this.clocker maybe undefined on hook:beforeDestroy #2258'\n zh-CN:\n - '[fix] 修复 beforeDestroy 调用时 this.clocker 不存在 #2258'" }, { "path": "src/components/clocker/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('Clocker', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('clocker')\n })\n})\n" }, { "path": "src/components/color-picker/index.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/color-picker/metas.yml", "content": "category:\n en: Deprecated\n 'zh-CN': 不再维护\ncategory_order: 999\nstatus: deprecated\ndeprecated_info:\n en: use cell and slot instead\n zh-CN: 请参考源码直接使用cell+slot来实现\nicon: ''\ncolor: '#f2c400'\ntags:\n - color\n - picker\n - 颜色\nprops:\n value:\n type: String\n default: ''\n en: form value\n zh-CN: 表单值\n colors:\n type: Array\n default: []\n en: color list\n zh-CN: 可选颜色列表\n size:\n type: String\n default: large\n en: 'button size, enum: large, middle, small'\n zh-CN: 按钮大小，可选值 large, middle, small\nchanges:\n v2.0.0:\n zh-CN:\n - '[deprecated] 废弃，当前版本后不再继续维护'" }, { "path": "src/components/color-picker/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('ColorPicker', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('color-picker')\n })\n})\n" }, { "path": "src/components/confirm/index.vue", "content": "\n\n\nconfirm_text:\n en: confirm\n zh-CN: 确定\ncancel_text:\n en: cancel\n zh-CN: 取消\n\n\n\n\n\n" }, { "path": "src/components/confirm/metas.yml", "content": "category:\n en: Feedback\n zh-CN: 弹窗提示\nicon: ''\ntags:\n en:\n - dialog\n - message\n - confirm\n zh-CN:\n - 弹窗\n - 消息提示\n - 确认\nextra: |\n\n ::: tip\n 建议参照例子使用 `v-transfer-dom` 将弹窗插入 `body` 节点下，避免组件非 body 子节点导致的各种问题。\n :::\n\n\n 该组件支持以`plugin`形式调用：\n\n ::: warning\n 以插件形式调用时，和`template`中使用不同，属性名请使用`小驼峰式`，比如`confirmText`而不是`confirm-text`。\n :::\n\n ``` js\n import { ConfirmPlugin } from 'vux'\n Vue.use(ConfirmPlugin)\n ```\n\n ``` js\n // 显示\n this.$vux.confirm.show({\n // 组件除show外的属性\n onCancel : () => {\n console.log(this) //当前 vm\n },\n onConfirm : () => {}\n })\n\n // 隐藏\n this.$vux.confirm.hide()\n\n // prompt形式调用\n this.$vux.confirm.prompt('placeholder', {\n onCancel : () => {}\n onConfirm : () =>{}\n })\n\n // 设置输入值\n this.$vux.confirm.setInputValue('value') // 注意需要在 onShow 事件中执行\n\n // 获取显示状态\n this.$vux.confirm.isVisible() // v2.9.1 支持\n ```\nprops:\n value:\n type: Boolean\n default: false\n en: visibility of the component\n zh-CN: 是否显示，使用`v-model`绑定\n show-input:\n version: v2.5.0\n type: Boolean\n default: false\n en: whether show input or not. If true, slot will not work\n zh-CN: 是否显示输入框，如果为true，slot会失效\n placeholder:\n version: v2.5.0\n type: String\n default: ''\n en: placeholder of prompt, valid when show-input is true\n zh-CN: 输入框的提示（仅在showInput为true的情况下有效）\n theme:\n type: String\n default: ios\n en: dialog's style, can be ios or android\n zh-CN: 弹窗风格，可以是ios或android\n enum:\n - ios\n - android\n hide-on-blur:\n type: Boolean\n default: false\n en: if closing dialog when clicking on mask\n zh-CN: 是否在点击遮罩时自动关闭弹窗\n title:\n en: dialog title\n zh-CN: 弹窗标题\n content:\n type: String\n en: dialog content, can use html. Invalid when using slot\n zh-CN: 弹窗内容，作为slot默认内容，可以是html片段，如果使用slot该字段会失效\n confirm-text:\n default: 确认(confirm)\n en: text of confirm button\n zh-CN: 确认按钮的显示文字\n cancel-text:\n default: 取消(cancel)\n en: text of cancel button\n zh-CN: 取消按钮的显示文字\n mask-transition:\n default: 'vux-fade'\n en: mask's transition\n zh-CN: 遮罩动画\n dialog-transition:\n default: 'vux-dialog'\n en: dialog's transition\n zh-CN: 弹窗动画\n close-on-confirm:\n version: v2.5.0\n type: Boolean\n default: true\n en: whether close automatically when confirm button is clicked\n zh-CN: 是否在点击确认按钮时自动关闭\n input-attrs:\n version: v2.5.7\n type: Object\n default: {type: 'text'}\n en: input attributes\n zh-CN: input 属性\n mask-z-index:\n version: v2.6.4\n type: Number, String\n default: 1000\n en: zIndex of mask\n zh-CN: 遮罩层 z-index 值\n show-cancel-button:\n version: v2.9.2\n type: Boolean\n default: true\n en: if show cancel button\n zh-CN: 是否显示取消按钮\n show-confirm-button:\n version: v2.9.2\n type: Boolean\n default: true\n en: if show confirm button\n zh-CN: 是否显示确定按钮\nslots:\n default:\n en: body content of the dialog\n zh-CN: 弹窗主体内容\nevents:\n on-cancel:\n en: triggers when the cancel button is clicked\n zh-CN: 点击取消按钮时触发\n on-confirm:\n params: '(value)'\n en: triggers when the confirm button is clicked\n zh-CN: 点击确定按钮时触发, 参数为prompt中输入的值\n on-show:\n en: triggers when the dialog shows\n zh-CN: 弹窗出现时触发\n on-hide:\n en: triggers when the dialog hides\n zh-CN: 弹窗隐藏时触发\nmethods:\n setInputValue:\n version: v2.5.5\n params: '(value)'\n en: set input value when show-input is true\n zh-CN: 设置输入值，当 show-input 为 true 时有效\nchanges:\n v2.9.2:\n en:\n - '[feature] Support prop: showCancelButton showConfirmButton #2795'\n zh-CN:\n - '[feature] 支持 prop: showCancelButton showConfirmButton #2795'\n v2.9.1:\n en:\n - '[feature] add isVisible function for ConfirmPlugin #2704'\n zh-CN:\n - '[feature] 添加 isVisible 获取当前显示状态 #2704'\n v2.9.0:\n en:\n - '[fix] fix inputAttrs issue with no-default-value #2618'\n - '[fix] fix focus auto-blur issue #2610'\n zh-CN:\n - '[fix] 修复 inputAttrs 无默认值导致的报错 #2618'\n - '[fix] 修复输入框获取焦点后又失去焦点 #2610'\n v2.8.0:\n en:\n - '[fix] fix hard to move cursor'\n zh-CN:\n - '[fix] 修复输入框难以移动光标'\n v2.7.3:\n en:\n - '[fix] fix hard to get focus on input(thanks to @Sapphire2k)'\n zh-CN:\n - '[fix] 修复输入框难以获取 focus 的问题（感谢 @Sapphire2k）'\n v2.6.5:\n en:\n - '[enhance] fix click events trigger twice when clicking fast #2048'\n zh-CN:\n - '[enhance] 修复快速点击按钮时触发多次的问题 #2048'\n v2.6.4:\n en:\n - '[feature] support prop:mask-z-index'\n zh-CN:\n - '[feature] 支持属性 mask-z-index 设置遮罩 z-index'\n v2.5.8:\n en:\n - '[feature] Support method:setInputValue for plugin #1846'\n zh-CN:\n - '[feature] 插件支持 setInputValue 方法 #1846'\n v2.5.7:\n en:\n - '[feature] Support prop:input-attrs #1799'\n zh-CN:\n - '[feature] 支持 prop:input-attrs 设置额外属性 #1799'\n v2.5.5:\n en:\n - '[feature] Add method:setInputValue #1746'\n zh-CN:\n - '[feature] 支持方法 setInputValue 设置输入值 #1746'\n v2.5.0:\n en:\n - '[feature] Support prop:close-on-confirm'\n - '[feature] Support prop:show-input'\n zh-CN:\n - '[feature] 支持 prop:close-on-confirm'\n - '[feature] 支持 prop:show-input'\n v2.1.1-rc.11:\n en:\n - '[fix] Fix plugin value and event watchers'\n - '[fix] Reset prop data when used as plugin'\n zh-CN:\n - '[fix] 修复插件代码里的值和事件监听器'\n - '[fix] 以插件方式显示时强制重置数据'\n" }, { "path": "src/components/confirm/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('Confirm', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('confirm')\n })\n})\n" }, { "path": "src/components/countdown/index.vue", "content": "\n\n" }, { "path": "src/components/countdown/metas.yml", "content": "category:\n en: Deprecated\n 'zh-CN': 不再维护\nicon: ''\nstatus: 'deprecated'\ntags:\n en:\n - number\n - countdown\n zh-CN:\n - 数字\n - 倒数\nprops:\n value:\n type: number\n en: total sections\n zh-CN: 时间，秒为单位\n start:\n type: Boolean\n default: true\n en: if start counting down\n zh-CN: 是否开始计数\nchanges:\n v2.0.0:\n en:\n - '[deprecated] This component is no longer maintained'\n zh-CN:\n - '[deprecated] 下一版本开始不再维护'" }, { "path": "src/components/countdown/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('CountDown', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('countdown')\n })\n})\n" }, { "path": "src/components/countup/index.vue", "content": "\n" }, { "path": "src/components/countup/metas.yml", "content": "category:\n en: Data Display\n 'zh-CN': 数据展示\nicon: ''\ntags:\n en:\n - countup\n - digit\n - number\n zh-CN:\n - 数字\n - 滚动\nprops:\n start-val:\n type: Number\n default: 0\n en: min number\n zh-CN: 开始数字\n end-val:\n type: Number\n en: max number\n zh-CN: 结束数字\n decimals:\n type: Number\n default: 0\n en: decimal length\n zh-CN: 小数点位数\n duration:\n type: Number\n default: 2\n en: duration value (second)\n zh-CN: 耗时（秒）\n options:\n type: 'Object'\n en: options for `countup.js`\n zh-CN: '`countup.js`的设置项'\n start:\n type: Boolean\n default: true\n en: if start counting automatically\n zh-CN: 是否自动开始计数\n tag:\n version: v2.5.5\n type: String\n default: span\n en: render tag\n zh-CN: 渲染标签\nchanges:\n v2.5.5:\n en:\n - '[feature] Add prop:tag for customize tag #1739'\n zh-CN:\n - '[feature] 添加属性 tag 用以定义渲染标签 #1739'\n v2.0.0:\n en:\n - '[feature] Add prop:start'\n - '[change] Update countup -> countup.js'\n zh-CN:\n - '[feature] 添加 prop:`start`, 现在你可以手动开始计数了'\n - '[change] 更新依赖`countup`为`countup.js`'\n" }, { "path": "src/components/countup/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('Countup', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('countup')\n })\n})\n" }, { "path": "src/components/datetime/datetimepicker.js", "content": "import Scroller from '../picker/scroller'\nimport { isToday, generateRange, each, trimZero, addZero, getMaxDay, parseRow, parseDate, getElement, toElement, removeElement } from './util'\nimport { getYears, getMonths, getDays } from './makeData'\n\nconst isBrowser = typeof window === 'object'\n\nconst MASK_TEMPLATE = '
    '\n\nconst TEMPLATE = `
    \n
    \n
    cancel
    \n
    \n
    done
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    `\n\nconst SHOW_ANIMATION_TIME = 200\nconst SHOW_CONTAINER_TIME = 300\n\nconst TYPE_MAP = {\n year: ['YYYY'],\n month: ['MM', 'M'],\n day: ['DD', 'D'],\n hour: ['HH', 'H'],\n minute: ['mm', 'm'],\n noon: ['A']\n}\n\nlet MASK = null\n\nlet CURRENT_PICKER\n\nconst NOW = new Date()\n\nconst DEFAULT_CONFIG = {\n template: TEMPLATE,\n trigger: null,\n output: null,\n currentYear: NOW.getFullYear(),\n currentMonth: NOW.getMonth() + 1,\n minYear: 2000,\n maxYear: 2030,\n minHour: 0,\n maxHour: 23,\n hourList: null,\n minuteList: null,\n startDate: null,\n endDate: null,\n yearRow: '{value}',\n monthRow: '{value}',\n dayRow: '{value}',\n noonRow: '{value}',\n hourRow: '{value}',\n minuteRow: '{value}',\n format: 'YYYY-MM-DD',\n value: NOW.getFullYear() + '-' + (NOW.getMonth() + 1) + '-' + NOW.getDate(),\n onSelect () {},\n onConfirm () {},\n onClear () {},\n onShow () {},\n onHide () {},\n confirmText: 'ok',\n clearText: '',\n cancelText: 'cancel',\n destroyOnHide: false,\n renderInline: false,\n computeHoursFunction: null,\n computeDaysFunction: null,\n isOneInstance: false,\n orderMap: {}\n}\n\nfunction renderScroller (el, data, value, fn) {\n data = data.map(one => {\n one.value = one.value + ''\n return one\n })\n return new Scroller(el, {\n data,\n defaultValue: value + '',\n onSelect: fn\n })\n}\n\nfunction showMask () {\n if (!isBrowser) {\n return\n }\n\n if (!MASK) {\n MASK = toElement(MASK_TEMPLATE)\n document.body.appendChild(MASK)\n\n MASK.addEventListener('click', function () {\n CURRENT_PICKER && CURRENT_PICKER.hide('cancel')\n }, false)\n MASK.addEventListener('touchmove', function (e) {\n e.preventDefault()\n }, false)\n }\n\n MASK.style.display = 'block'\n\n setTimeout(function () {\n MASK && (MASK.style.opacity = 0.5)\n }, 0)\n}\n\nfunction hideMask () {\n if (!MASK) {\n return\n }\n\n MASK.style.opacity = 0\n\n setTimeout(function () {\n MASK && (MASK.style.display = 'none')\n }, SHOW_ANIMATION_TIME)\n}\n\nfunction DatetimePicker (config) {\n const self = this\n self.config = {}\n self.value = config.value || ''\n each(DEFAULT_CONFIG, function (key, val) {\n self.config[key] = config[key] || val\n })\n\n this.renderInline = self.config.renderInline\n\n if (config.defaultSelectedValue && !config.value) {\n self.config.value = config.defaultSelectedValue\n }\n\n if (typeof this.config.startDate === 'string') {\n this.config.startDate = new Date(this.config.startDate.replace(/-/g, '/'))\n }\n\n if (typeof this.config.endDate === 'string') {\n this.config.endDate = new Date(this.config.endDate.replace(/-/g, '/'))\n }\n\n if (this.config.startDate && !this.config.endDate) {\n this.config.endDate = new Date('2030/12/31')\n }\n\n if (!this.config.startDate && this.config.endDate) {\n this.config.startDate = new Date(`${this.config.minYear}/01/01`)\n }\n\n this.reMakeData = !!this.config.startDate && !!this.config.endDate\n\n if (!this.renderInline) {\n let trigger = self.config.trigger\n\n this.triggerHandler = function (e) {\n e.preventDefault()\n self.show(self.value)\n }\n if (trigger && isBrowser) {\n trigger = self.trigger = getElement(trigger)\n this.trigger = trigger\n this.trigger && this.trigger.addEventListener('click', this.triggerHandler, false)\n }\n }\n}\n\nDatetimePicker.prototype = {\n\n _show (newValueMap) {\n const self = this\n self._setText()\n self.container.style.display = 'block'\n\n if (this.renderInline) {\n self.container.classList.add('vux-datetime-view')\n }\n\n each(TYPE_MAP, function (type) {\n self[type + 'Scroller'] && self[type + 'Scroller'].select(type === 'noon' ? newValueMap[type] : trimZero(newValueMap[type]), false)\n })\n\n setTimeout(function () {\n self.container.style['-webkit-transform'] = 'translateY(0)'\n self.container.style.transform = 'translateY(0)'\n }, 0)\n },\n show (value) {\n if (!isBrowser) {\n return\n }\n\n const self = this\n const config = self.config\n if (config.isOneInstance) {\n if (document.querySelector('#vux-datetime-instance')) {\n return\n }\n self.willShow = true\n }\n\n CURRENT_PICKER = self\n const valueMap = self.valueMap = parseDate(config.format, value || config.value)\n let newValueMap = {}\n\n each(TYPE_MAP, function (type, list) {\n newValueMap[type] = list.length === 1 ? valueMap[list[0]] : (valueMap[list[0]] || valueMap[list[1]])\n })\n\n if (self.container) {\n self._show(newValueMap)\n } else {\n let template = config.template\n for (let i in config.orderMap) {\n template = template.replace(`data-role=\"${i}\"`, `data-role=\"${i}\" style=\"order:${config.orderMap[i]}\"`)\n }\n\n const container = self.container = toElement(template)\n if (config.isOneInstance) {\n container.id = 'vux-datetime-instance'\n }\n if (!self.renderInline) {\n document.body.appendChild(container)\n\n self.container.style.display = 'block'\n } else {\n document.querySelector(self.config.trigger).appendChild(container)\n }\n\n each(TYPE_MAP, function (type) {\n const div = self.find('[data-role=' + type + ']')\n if (newValueMap[type] === undefined) {\n removeElement(div)\n return\n }\n let data\n if (type === 'day') {\n data = self._makeData(type, trimZero(newValueMap.year), trimZero(newValueMap.month))\n } else if (type === 'hour') {\n data = self._makeData(type, trimZero(newValueMap.year), trimZero(newValueMap.month), trimZero(newValueMap.day))\n } else {\n data = self._makeData(type)\n }\n\n self[type + 'Scroller'] = renderScroller(div, data, trimZero(newValueMap[type]), function (currentValue) {\n setTimeout(function () {\n config.onSelect.call(self, type, currentValue, self.getValue())\n }, 0)\n if (type === 'year' || type === 'month' || type === 'day') {\n self.hourScroller && self._setHourScroller(self.yearScroller.value, self.monthScroller.value, self.dayScroller.value, self.hourScroller.value)\n }\n let currentDay\n if (type === 'year') {\n const currentMonth = self.monthScroller ? self.monthScroller.value : config.currentMonth\n self._setMonthScroller(currentValue, currentMonth)\n if (self.dayScroller) {\n currentDay = self.dayScroller.value\n self._setDayScroller(currentValue, currentMonth, currentDay)\n }\n } else if (type === 'month') {\n const currentYear = self.yearScroller ? self.yearScroller.value : config.currentYear\n if (self.dayScroller) {\n currentDay = self.dayScroller.value\n self._setDayScroller(currentYear, currentValue, currentDay)\n }\n }\n })\n })\n\n if (!self.renderText && !self.renderInline) {\n if (self.config.confirmText) {\n self.find('[data-role=confirm]').innerText = self.config.confirmText\n }\n\n if (self.config.cancelText) {\n self.find('[data-role=cancel]').innerText = self.config.cancelText\n }\n if (self.config.clearText) {\n self.find('[data-role=clear]').innerText = self.config.clearText\n }\n self.renderText = true\n }\n\n this._show(newValueMap)\n\n self.find('[data-role=cancel]').addEventListener('click', function (e) {\n e.preventDefault()\n self.hide('cancel')\n }, false)\n\n self.find('[data-role=confirm]').addEventListener('click', function (e) {\n e.preventDefault()\n self.confirm()\n }, false)\n\n if (self.config.clearText) {\n self.find('[data-role=clear]').addEventListener('click', function (e) {\n e.preventDefault()\n self.clear()\n }, false)\n }\n }\n\n if (!this.renderInline) {\n showMask()\n config.onShow.call(self)\n }\n },\n\n _setText () {\n if (typeof V_LOCALE !== 'undefined' && V_LOCALE === 'MULTI' && !this.config.renderInline) { // eslint-disable-line\n const trigger = this.trigger\n if (trigger) {\n const confirmText = trigger.getAttribute('data-confirm-text')\n const cancelText = trigger.getAttribute('data-cancel-text')\n this.find('[data-role=confirm]').innerText = confirmText\n this.find('[data-role=cancel]').innerText = cancelText\n }\n }\n },\n\n _makeData (type, year, month, day) {\n const config = this.config\n const valueMap = this.valueMap\n const list = TYPE_MAP[type]\n let data = []\n let min\n let max\n\n if (type === 'year') {\n min = config.minYear\n max = config.maxYear\n if (this.reMakeData) {\n const { minYear, maxYear } = getYears(this.config.startDate, this.config.endDate)\n min = minYear\n max = maxYear\n }\n } else if (type === 'month') {\n min = 1\n max = 12\n if (this.reMakeData) {\n const { minMonth, maxMonth } = getMonths(this.config.startDate, this.config.endDate, this.yearScroller.value * 1)\n min = Math.max(min, minMonth)\n max = Math.min(max, maxMonth)\n }\n } else if (type === 'day') {\n min = 1\n max = getMaxDay(year, month)\n if (this.reMakeData) {\n const { minDay, maxDay } = getDays(this.config.startDate, this.config.endDate, this.yearScroller.value * 1, this.monthScroller.value * 1)\n min = Math.max(min, minDay)\n max = Math.min(max, maxDay)\n }\n } else if (type === 'hour') {\n min = this.config.minHour\n max = this.config.maxHour\n } else if (type === 'minute') {\n min = 0\n max = 59\n }\n for (let i = min; i <= max; i++) {\n let name\n if (type === 'year') {\n name = parseRow(config.yearRow, i)\n } else {\n const val = valueMap[list[0]] ? addZero(i) : i\n name = parseRow(config[type + 'Row'], val)\n }\n data.push({\n name: name,\n value: i\n })\n }\n\n if (type === 'noon') {\n data.push({\n name: '上午',\n value: 'AM'\n })\n data.push({\n name: '下午',\n value: 'PM'\n })\n }\n\n if (type === 'hour' && this.config.hourList) {\n data = this.config.hourList.map(hour => {\n return {\n name: parseRow(config['hourRow'], hour),\n value: Number(hour)\n }\n })\n }\n\n if (type === 'day' && this.config.computeDaysFunction) {\n const rs = this.config.computeDaysFunction({\n year,\n month,\n min,\n max\n }, generateRange)\n if (rs) {\n data = rs.map(day => {\n return {\n name: parseRow(config['dayRow'], addZero(day)),\n value: Number(day)\n }\n })\n }\n }\n\n if (type === 'hour' && this.config.computeHoursFunction) {\n const isTodayVal = isToday(new Date(`${year}/${month}/${day}`), new Date())\n const rs = this.config.computeHoursFunction(`${year}-${month}-${day}`, isTodayVal, generateRange)\n data = rs.map(hour => {\n // #2296\n return {\n name: parseRow(config['hourRow'], hour),\n value: Number(hour)\n }\n })\n }\n\n if (type === 'minute' && this.config.minuteList) {\n data = this.config.minuteList.map(minute => {\n return {\n name: parseRow(config['minuteRow'], minute),\n value: Number(minute)\n }\n })\n }\n return data\n },\n\n // after year change\n _setMonthScroller (currentValue, month) {\n if (!this.monthScroller) {\n return\n }\n const self = this\n this.monthScroller.destroy()\n const div = self.find('[data-role=month]')\n self.monthScroller = renderScroller(div, self._makeData('month'), month, function (currentValue) {\n self.config.onSelect.call(self, 'month', currentValue, self.getValue())\n const currentYear = self.yearScroller ? self.yearScroller.value : self.config.currentYear\n if (self.dayScroller) {\n const currentDay = self.dayScroller.value\n self._setDayScroller(currentYear, currentValue, currentDay)\n }\n if (self.yearScroller && self.monthScroller && self.hourScroller) {\n self._setHourScroller(currentYear, currentValue, self.dayScroller.value, self.hourScroller.value)\n }\n })\n },\n\n _setDayScroller (year, month, day) {\n if (!this.dayScroller) {\n return\n }\n const self = this\n const maxDay = getMaxDay(year, month)\n if (day > maxDay) {\n day = maxDay\n }\n self.dayScroller.destroy()\n const div = self.find('[data-role=day]')\n self.dayScroller = renderScroller(div, self._makeData('day', year, month), day, function (currentValue) {\n self.config.onSelect.call(self, 'day', currentValue, self.getValue())\n self.hourScroller && self._setHourScroller(year, month, currentValue, self.hourScroller.value)\n })\n },\n\n _setHourScroller (year, month, day, hour) {\n if (!this.hourScroller) {\n return\n }\n const self = this\n self.hourScroller.destroy()\n const div = self.find('[data-role=hour]')\n self.hourScroller = renderScroller(div, self._makeData('hour', year, month, day), hour || '', function (currentValue) {\n self.config.onSelect.call(self, 'hour', currentValue, self.getValue())\n })\n },\n\n find (selector) {\n return this.container.querySelector(selector)\n },\n\n hide (type) {\n if (!this.container) {\n return\n }\n const self = this\n self.container.style.removeProperty('transform')\n self.container.style.removeProperty('-webkit-transform')\n\n setTimeout(function () {\n self.container && (self.container.style.display = 'none')\n }, SHOW_CONTAINER_TIME)\n\n hideMask()\n\n self.config.onHide.call(self, type)\n if (self.config.destroyOnHide) {\n setTimeout(() => {\n self.destroy()\n }, 500)\n }\n },\n\n select (type, value) {\n this[type + 'Scroller'].select(value, false)\n },\n\n destroy () {\n const self = this\n this.trigger && this.trigger.removeEventListener('click', this.triggerHandler, false)\n if (!self.config.isOneInstance && !self.willShow) {\n removeElement(MASK)\n MASK = null\n }\n removeElement(self.container)\n self.container = null\n },\n\n getValue () {\n const self = this\n const config = self.config\n\n let value = config.format\n\n function formatValue (scroller, expr1, expr2) {\n if (scroller) {\n const val = scroller.value\n if (expr1) {\n value = value.replace(new RegExp(expr1, 'g'), addZero(val))\n }\n if (expr2) {\n value = value.replace(new RegExp(expr2, 'g'), trimZero(val))\n }\n }\n }\n\n each(TYPE_MAP, function (key, list) {\n formatValue(self[key + 'Scroller'], list[0], list[1])\n })\n\n return value\n },\n\n confirm () {\n const value = this.getValue()\n this.value = value\n\n if (this.config.onConfirm.call(this, value) === false) {\n return\n }\n\n this.hide('confirm')\n },\n\n clear () {\n const value = this.getValue()\n\n if (this.config.onClear.call(this, value) === false) {\n return\n }\n\n this.hide('clear')\n }\n}\n\nexport default DatetimePicker\n" }, { "path": "src/components/datetime/format.js", "content": "export default function (date, fmt = 'YYYY-MM-DD HH:mm:ss') {\n var o = {\n 'M+': date.getMonth() + 1,\n 'D+': date.getDate(),\n 'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12,\n 'H+': date.getHours(),\n 'm+': date.getMinutes(),\n 's+': date.getSeconds(),\n 'q+': Math.floor((date.getMonth() + 3) / 3),\n 'S': date.getMilliseconds()\n }\n var week = {\n '0': '\\u65e5',\n '1': '\\u4e00',\n '2': '\\u4e8c',\n '3': '\\u4e09',\n '4': '\\u56db',\n '5': '\\u4e94',\n '6': '\\u516d'\n }\n if (/(Y+)/.test(fmt)) {\n fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))\n }\n if (/(E+)/.test(fmt)) {\n fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? '\\u661f\\u671f' : '\\u5468') : '') + week[date.getDay() + ''])\n }\n for (var k in o) {\n if (new RegExp('(' + k + ')').test(fmt)) {\n fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))\n }\n }\n return fmt\n}\n" }, { "path": "src/components/datetime/index.vue", "content": "\n\n\ncancel_text:\n en: cancel\n zh-CN: 取消\nconfirm_text:\n en: done\n zh-CN: 确定\n\n\n\n\n\n" }, { "path": "src/components/datetime/makeData.js", "content": "function isLeapYear (year) {\n return year % 100 !== 0 && year % 4 === 0 || year % 400 === 0\n}\n\nfunction getMaxDay (year, month) {\n year = parseFloat(year)\n month = parseFloat(month)\n if (month === 2) {\n return isLeapYear(year) ? 29 : 28\n }\n return [4, 6, 9, 11].indexOf(month) >= 0 ? 30 : 31\n}\n\nfunction getYears (startDate, endDate) {\n let startYear = startDate.getFullYear()\n const endYear = endDate.getFullYear()\n let rs = []\n while (startYear <= endYear) {\n rs.push(startYear)\n startYear++\n }\n return {\n minYear: rs[0],\n maxYear: rs[rs.length - 1]\n }\n}\n\nfunction getMonths (startDate, endDate, year) {\n const startYear = startDate.getFullYear()\n const endYear = endDate.getFullYear()\n const startMonth = startDate.getMonth() + 1\n const endMonth = endDate.getMonth() + 1\n let start = 1\n let end = 12\n if (year === startYear) {\n start = startMonth\n }\n if (year === endYear) {\n end = endMonth\n }\n return {\n minMonth: start,\n maxMonth: end\n }\n}\n\nfunction getDays (startDate, endDate, year, month) {\n const startYear = startDate.getFullYear()\n const endYear = endDate.getFullYear()\n const startMonth = startDate.getMonth() + 1\n const endMonth = endDate.getMonth() + 1\n const startDay = startDate.getDate()\n const endDay = endDate.getDate()\n\n let start = 1\n let end = getMaxDay(year, month)\n\n if (year === startYear && month === startMonth) {\n start = startDay\n }\n if (year === endYear && month === endMonth) {\n end = endDay\n }\n return {\n minDay: start,\n maxDay: end\n }\n}\n\nexport {\n getYears,\n getMonths,\n getDays\n}\n" }, { "path": "src/components/datetime/metas.yml", "content": "category:\n en: Form\n 'zh-CN': 表单\nicon: ''\nextra: |\n ::: tip\n 需要在`Group`组件里使用\n :::\n\n\n 该组件支持以`plugin`形式调用：\n\n ``` js\n // 以 plugin 形式使用时，请在入口处引入：\n import { DatetimePlugin } from 'vux'\n Vue.use(DatetimePlugin)\n\n // 组件内使用\n this.$vux.datetime.show({\n value: '', // 其他参数同 props\n onHide () {\n const _this = this\n },\n onShow () {\n const _this = this\n }\n })\n\n this.$vux.datetime.hide()\n ```\ntips:\n zh-CN:\n -\n q: 是否支持秒(ss)\n a: 不支持，目前常用需求场景并没有需要精确到秒。\n - q: on-confirm 事件获取不到正确的值\n a: |\n 在 `v2.9.0` 之前 on-confirm 不会附带当前值参数，你需要在 `this.$nextTick` 后获取。\n 相关 issue: [#2632](https://github.com/airyland/vux/issues/2632)\ntags:\n en:\n - date\n - datetime\n - form\n zh-CN:\n - 日期\n - 选择\n - 表单\nprops:\n format:\n type: String\n default: 'YYYY-MM-DD'\n en: date format. Special characters are not supported, for example, YYYY-MM-DD HH:mm(do not support ss)\n zh-CN: 时间格式，不支持特殊字符，只能类似 YYYY-MM-DD HH:mm 这样的格式（不支持秒 ss）, 另外支持 YYYY-MM-DD A 这样的格式(A为上下午)\n title:\n type: String\n default: ''\n en: cell title\n zh-CN: 标题\n value:\n type: String\n default: ''\n en: form's value, use `v-model` for binding\n zh-CN: 表单值，`v-model`绑定\n inline-desc:\n type: String\n default: ''\n en: description of the cell\n zh-CN: 描述字符\n placeholder:\n type: String\n default: ''\n en: placeholder, works when value is empty\n zh-CN: 提示文字，当`value`为空时显示\n min-year:\n type: Number\n default: ''\n en: min-year of the form\n zh-CN: 可选择的最小年份\n max-year:\n type: Number\n default: ''\n en: max-year of the form\n zh-CN: 可选择的最大年份\n min-hour:\n type: Number\n default: 0\n en: min hour\n zh-CN: 限定小时最小值\n max-hour:\n type: Number\n default: 23\n en: max hour\n zh-CN: 限定小时最大值\n confirm-text:\n type: String\n default: ok(确认)\n en: confirm button's text\n zh-CN: 确认按钮文字\n cancel-text:\n type: String\n default: cancel(取消)\n en: cancel button's text\n zh-CN: 取消按钮文字\n clear-text:\n type: String\n default: ''\n en: custom button's text which shows in the middle of the header\n zh-CN: 显示在中间的自定义按钮的文字\n year-row:\n type: String\n default: '{value}'\n en: render template for the year column\n zh-CN: 年份的渲染模板\n month-row:\n type: String\n default: '{value}'\n en: render template for the month column\n zh-CN: 月份的渲染模板\n day-row:\n type: String\n default: '{value}'\n en: render template for the day column\n zh-CN: 日期的渲染模板\n hour-row:\n type: String\n default: '{value}'\n en: render template for the hour column\n zh-CN: 小时的渲染模板\n minute-row:\n type: String\n default: '{value}'\n en: render template for the minute column\n zh-CN: 分钟的渲染模板\n start-date:\n type: String\n en: 'start date, must be YYYY-MM-DD. Please use `min-hour` and `max-hour` to limit the range of hours'\n zh-CN: '限定最小日期，格式必须为 YYYY-MM-DD，注意该限制只能限定到日期，不能限定到小时分钟。小时限定请使用`min-hour`和`max-hour`'\n end-date:\n type: String\n en: 'end date, must be YYYY-MM-DD. Please use `min-hour` and `max-hour` to limit the range of hours'\n zh-CN: 限定最大日期，格式必须为 YYYY-MM-DD，注意该限制只能限定到日期，不能限定到小时分钟\n required:\n type: Boolean\n default: false\n en: if required\n zh-CN: 是否必填\n display-format:\n version: v2.1.1-rc.11\n type: Function\n en: used to format display value\n zh-CN: 自定义显示值\n readonly:\n version: v2.3.6\n en: readonly mode, show like a cell\n zh-CN: 只读模式，显示类似于 cell\n show:\n version: v2.3.7\n type: Boolean\n en: control visibility of datetime, require vue^2.3\n zh-CN: 控制显示，要求 vue^2.3\n minute-list:\n version: v2.3.7\n type: Array\n en: specify minute list, for instance ['00', '15', '30', '45']\n zh-CN: 定义分钟列表，比如 ['00', '15', '30', '45']\n hour-list:\n version: v2.3.7\n type: Array\n en: specify hour list, for instance ['09', '10', '11', '12']\n zh-CN: 定义小时列表，比如 ['09', '10', '11', '12']\n default-selected-value:\n version: v2.4.1\n en: set default selected value, works only when value is empty\n zh-CN: 设置默认选中日期，当前 value 为空时有效\n compute-hours-function:\n version: v2.5.5\n type: Function\n en: 'dynamically set hours list, params `(value, isToday, generateRange)`'\n zh-CN: '动态设置小时列表，参数为 `(value, isToday, generateRange)`'\n compute-days-function:\n version: v2.6.1\n type: Function\n en: 'dynamically set days list, params `({year, month, min, max}, generateRange)`'\n zh-CN: '动态设置日期列表，参数为 `({year, month, min, max}, generateRange)`'\n order-map:\n version: v2.9.0\n type: Object\n en: 'set column order, `{year: 1, month: 2, day: 3, hour: 4, minute: 5, noon: 6}`'\n zh-CN: '自定义列顺序, 如 `{year: 1, month: 2, day: 3, hour: 4, minute: 5, noon: 6}`'\nslots:\n default:\n en: trigger element content\n zh-CN: 触发元素内容\n title:\n version: v2.3.6\n en: title slot\n zh-CN: title slot\nevents:\n on-change:\n params: '`(value)`'\n en: $emits when value changes, `(newVal)`\n zh-CN: 表单值变化时触发, 参数 `(newVal)`\n on-clear:\n en: $emits when click the button in the middle of the header\n zh-CN: 点击显示在中间的自定义按钮时触发\n on-show:\n en: fires when datetime shows\n zh-CN: 弹窗显示时触发\n on-hide:\n params: '`(type)`, type is one of [cancel, confirm]'\n version: v2.7.4\n en: fires when datetime hides\n zh-CN: 弹窗关闭时触发\n on-cancel:\n version: v2.7.4\n en: fires when cancel button is clicked or mask is clicked\n zh-CN: 点击取消按钮或者遮罩时触发，等同于事件 on-hide(cancel)\n on-confirm:\n version: v2.7.4\n params: '`(value)` v2.9.0 支持该参数'\n en: fires when confirm button is clicked\n zh-CN: 点击确定按钮时触发，等同于事件 on-hide(confirm)\nchanges:\n v2.9.0:\n en:\n - '[feature] support order-map to customize column orders #2300'\n - '[fix] fix mask cause body scroll in iOS #2593'\n - '[feature] add arg:value for event:on-confirm #2632'\n - '[fix] fire event:on-confirm after nextTick #2632'\n - '[feature] support format YYYY-MM-DD A #2627 @jack87918'\n zh-CN:\n - '[feature] 支持使用 order-map 自定义列顺序 #2300'\n - '[fix] 修复遮罩导致页面滚动 #2593'\n - '[feature] 事件 on-confirm 添加当前值 #2632'\n - '[fix] 在 nextTick 后触发 on-confirm 事件 #2632'\n - '[feature] 支持格式 YYYY-MM-DD A 选择上下午 #2627 @jack87918'\n v2.7.8:\n en:\n - '[fix] fix `on-hide` event trigger twice #2379'\n - '[fix] fix cannot set `show` to `true` initially'\n zh-CN:\n - '[fix] 修复 `on-hide` 事件触发两次的问题 #2379'\n - '[fix] 修复初始化时 `show` 值为 `true` 无效的问题'\n v2.7.6:\n en:\n - '[fix] column value use number type, fix binding value is not equal to datetimepicker value #2296'\n zh-CN:\n - '[fix] 列的值使用number类型，修正绑定值与datetimepicker值不相等 #2296'\n v2.7.4:\n en:\n - '[feature] add event:on-confirm event:on-cancel #2221'\n zh-CN:\n - '[feature] 支持事件 on-confirm on-cancel #2221'\n v2.7.2:\n en:\n - '[enhance] set default start-date if end-date is specified but start-date is not #2158'\n zh-CN:\n - '[enhance] 当指定结束日期但未指定开始日期时使用默认年第一天作为开始日期 #2158'\n v2.7.1:\n en:\n - '[fix] fix less variables do not work in plugin usage #2152'\n zh-CN:\n - '[fix] 修复插件使用时 less 变量不生效问题 #2152'\n v2.7.0:\n en:\n - '[fix] fix ssr i18n bug'\n - '[fix] fix datetime still shows when prop:readonly is true #2079'\n zh-CN:\n - '[fix] 修复服务端渲染多语言 bug'\n - '[fix] 修复 readonly 为 true 时点击还会显示弹窗的问题 #2079'\n v2.6.1:\n en:\n - '[feature] support prop:compute-days-function for dynamically setting days #1992'\n zh-CN:\n - '[feature] 支持属性 compute-days-function 用以动态设置日期 #1992 '\n v2.6.0:\n en:\n - '[fix] fix i18n for cancel_text confirm_text'\n zh-CN:\n - '[fix] 修复取消文字、确认文字国际化显示问题'\n v2.5.11:\n en:\n - '[fix] fix :show.syc=\"false\" do no work #1918'\n - '[fix] fix prop:compute-hours-function not working when month is changed'\n zh-CN:\n - '[fix] 修复 :show.sync 设为 false 无效 #1918'\n - '[fix] 修复特定情况下月份变化不会触发小时重新渲染的问题'\n v2.5.10:\n en:\n - '[feature] support @cell-value-color #1874'\n zh-CN:\n - '[feature] 值文字颜色受控于 @cell-value-color #1874'\n v2.5.9:\n en:\n - '[fix] fix error when format is YYYY #1861'\n zh-CN:\n - '[fix] 修复格式为 YYYY 时的报错 #1861'\n v2.5.5:\n en:\n - '[feature] support prop:compute-hours-function #1749'\n - '[enhance] better mask transition'\n zh-CN:\n - '[feature] 支持动态设置小时列表 #1749'\n - '[enhance] 更加流畅的遮罩层动画'\n v2.4.1:\n en:\n - '[fix] Re-render when readonly is changed #1593'\n - '[feature] Support prop:default-selected-value #1576'\n zh-CN:\n - '[fix] readonly 值变化时重新渲染 #1593'\n - '[feature] 支持通过 prop:default-selected-value 设置默认选中日期 #1576'\n v2.4.0:\n en:\n - '[enhance] use the same popup header style as popup-picker'\n zh-CN:\n - '[enhance] 统一弹窗头部样式，和 popup-picker 一致'\n v2.3.7:\n en:\n - '[feature] Add prop:show to control visibility #1538'\n - '[fix] Fix range error with format YYYY-MM #1358'\n - '[feature] Add prop:hourList prop:minuteList'\n - '[fix] startDate year should overwrite minYear #1358'\n zh-CN:\n - '[feature] 可以使用 :show.sync 来控制控件显示 #1358'\n - '[fix] 修复格式为 YYYY-MM 时的日期范围错误 #1528'\n - '[feature] 支持通过 prop:hourList prop:minuteList 自定义小时和分钟列表'\n - '[fix] 开始日期年份应该覆盖最小年份(minYear) #1358'\n v2.3.6:\n en:\n - '[feature] Add slot:title'\n - '[feature] Add prop:readonly'\n - '[fix] Fix a bug caused by scroller #1406'\n zh-CN:\n - '[feature] 添加 slot:title'\n - '[feature] 添加 prop:readonly'\n - '[fix] 修复 scroller 支持数字类型引入的 bug #1406'\n v2.3.4:\n en:\n - '[fix] do not trigger on-change on first-value-setting'\n zh-CN:\n - '[fix] 初始化时不触发 on-change 事件'\n v2.2.1-rc.8:\n en:\n - '[enhance] now changing prop:format will trigger re-rendering'\n zh-CN:\n - '[enhance] 修改 prop:format 会触发重新渲染'\n v2.2.0:\n en:\n - '[fix] render picker on nextTick #1180'\n zh-CN:\n - '[fix] 在 nextTick 回调渲染 picker 避免赋值报错 #1180'\n v2.1.1-rc.11:\n en:\n - '[feature] Support prop:display-format #1086 @greedying'\n zh-CN:\n - '[feature] 支持格式化显示 prop:display-format #1086 @greedying'\n v2.1.1-rc.7:\n en:\n - '[enhance] Support PC mouse drag #1039 @michael829'\n zh-CN:\n - '[enhance] 支持 PC 上鼠标选择 #1039 @michael829'\n v2.1.0:\n zh-CN:\n - '[fix] 修复`label`宽度没有受限于`group`设置'\n v2.1.0-rc.46:\n zh-CN:\n - '[feature] 支持配置`取消`和`确定`的文字颜色 #715 @greedying'\n" }, { "path": "src/components/datetime/style.less", "content": "@import '../../styles/variable.less';\n\n.dp-container {\n &.vux-datetime-view {\n position: static;\n transition: none;\n & .dp-header {\n display: none;\n }\n }\n}\n\n.vux-datetime-clear {\n text-align: center;\n}\n\n.scroller-component {\n display: block;\n position: relative;\n height: 238px;\n overflow: hidden;\n width: 100%;\n}\n\n.scroller-content {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n z-index: -1;\n}\n\n.scroller-mask {\n position: absolute;\n left: 0;\n top: 0;\n height: 100%;\n margin: 0 auto;\n width: 100%;\n z-index: 3;\n background-image:\n linear-gradient(to bottom, rgba(255,255,255,0.95), rgba(255,255,255,0.6)),\n linear-gradient(to top, rgba(255,255,255,0.95), rgba(255,255,255,0.6));\n background-position: top, bottom;\n background-size: 100% 102px;\n background-repeat: no-repeat;\n}\n\n.scroller-item {\n text-align: center;\n font-size: 16px;\n height: 34px;\n line-height: 34px;\n color: #000;\n}\n\n.scroller-indicator {\n width: 100%;\n height: 34px;\n position: absolute;\n left: 0;\n top: 102px;\n z-index: 3;\n background-image:\n linear-gradient(to bottom, #d0d0d0, #d0d0d0, transparent, transparent),\n linear-gradient(to top, #d0d0d0, #d0d0d0, transparent, transparent);\n background-position: top, bottom;\n background-size: 100% 1px;\n background-repeat: no-repeat;\n}\n\n.dp-container {\n position: fixed;\n width: 100%;\n left: 0;\n bottom: 0;\n z-index: 10000;\n background-color: #fff;\n display: none;\n transition: transform 0.3s ease;\n transform: translateY(100%);\n}\n\n.dp-mask {\n z-index: 998;\n position: fixed;\n width: 100%;\n height: 100%;\n left: 0px;\n top: 0px;\n opacity: 0;\n transition: opacity 0.2s ease-in;\n background-color: #000;\n z-index: 9999;\n}\n\n.dp-header {\n display: flex;\n width: 100%;\n box-align: center;\n align-items: center;\n background-image: linear-gradient(to bottom, #e7e7e7, #e7e7e7, transparent, transparent);\n background-position: bottom;\n background-size: 100% 1px;\n background-repeat: no-repeat;\n}\n\n.dp-header .dp-item {\n color: @datetime-header-item-font-color;\n font-size: 16px;\n height: 44px;\n line-height: 44px;\n cursor: pointer;\n}\n\n.dp-header .dp-item.dp-left {\n color: @datetime-header-item-cancel-font-color;\n}\n\n.dp-header .dp-item.dp-right {\n color: @datetime-header-item-confirm-font-color;\n}\n\n.dp-content {\n display: flex;\n width: 100%;\n box-align: center;\n align-items: center;\n padding: 10px 0;\n}\n\n.dp-header .dp-item,\n.dp-content .dp-item {\n box-sizing: border-box;\n flex: 1;\n}\n.vux-datetime-cancel {\n text-align: left;\n padding-left: 15px;\n}\n.vux-datetime-confirm {\n text-align: right;\n padding-right: 15px;\n}\n.vux-datetime {\n color: #000;\n text-decoration: none;\n}\n.vux-datetime .vux-input-icon {\n float: right;\n}\n.vux-cell-primary {\n flex: 1;\n}" }, { "path": "src/components/datetime/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('Datetime', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('datetime')\n })\n})\n" }, { "path": "src/components/datetime/util.js", "content": "import formater from './format'\n\nexport function each (obj, fn) {\n for (var key in obj) {\n if (obj.hasOwnProperty(key)) {\n if (fn.call(obj[key], key, obj[key]) === false) {\n break\n }\n }\n }\n}\n\nexport function trimZero (val) {\n val = String(val)\n val = val ? parseFloat(val.replace(/^0+/g, '')) : ''\n val = val || 0\n val = val + ''\n return val\n}\n\nexport function generateRange (start = 0, end) {\n let results = []\n for (let i = start; i <= end; i++) {\n results.push(addZero(i))\n }\n return results\n}\n\nexport function isToday (val1, val2) {\n return val1.getFullYear() === val2.getFullYear() && val1.getMonth() === val2.getMonth() && val1.getDate() === val2.getDate()\n}\n\nexport function addZero (val) {\n val = String(val)\n return val.length < 2 ? '0' + val : val\n}\n\nexport function isLeapYear (year) {\n return year % 100 !== 0 && year % 4 === 0 || year % 400 === 0\n}\n\nexport function getMaxDay (year, month) {\n year = parseFloat(year)\n month = parseFloat(month)\n if (month === 2) {\n return isLeapYear(year) ? 29 : 28\n }\n return [4, 6, 9, 11].indexOf(month) >= 0 ? 30 : 31\n}\n\nexport function parseRow (tmpl, value) {\n return tmpl.replace(/\\{value\\}/g, value)\n}\n\n// parse Date String\nexport function parseDate (format, value) {\n const formatParts = format.split(/[^A-Za-z]+/)\n let valueParts = value.replace(/\\s/g, '-').replace(/:/g, '-').replace(/\\//g, '-').split('-')\n if (formatParts.length !== valueParts.length) {\n // if it is error date, use current date\n const date = formater(new Date(), format)\n valueParts = date.split(/\\D+/)\n }\n\n let result = {}\n\n for (let i = 0; i < formatParts.length; i++) {\n if (formatParts[i]) {\n result[formatParts[i]] = valueParts[i]\n }\n }\n return result\n}\n\nexport function getElement (expr) {\n return (typeof expr === 'string') ? document.querySelector(expr) : expr\n}\n\nexport function toElement (html) {\n const tempContainer = document.createElement('div')\n tempContainer.innerHTML = html\n return tempContainer.firstElementChild\n}\n\nexport function removeElement (el) {\n el && el.parentNode.removeChild(el)\n}\n" }, { "path": "src/components/datetime-range/index.vue", "content": "\n\n\n" }, { "path": "src/components/datetime-range/metas.yml", "content": "category:\n en: Form\n 'zh-CN': 表单\nicon: ''\nextra: |\n ::: tip\n 该组件和 `Datetime` 组件不同的地方是`年月日`集中显示在一栏，适合范围不大的日期选择。\n
    \n 需要在`Group`组件里使用\n :::\ntags:\n en:\n - date\n - datetime\n - form\n zh-CN:\n - 日期\n - 选择\n - 表单\nprops:\n title:\n type: String\n default: ''\n en: label text\n zh-CN: 标题文字\n value:\n type: Array\n default: ''\n en: \"form's value, use `v-model` for binding. For example, ['2017-01-15', '03', '05']\"\n zh-CN: \"表单值，`v-model`绑定。比如，['2017-01-15', '03', '05']\"\n inline-desc:\n type: String\n default: ''\n en: description of the cell\n zh-CN: 描述字符\n placeholder:\n type: String\n default: ''\n en: placeholder, works when `value` is empty\n zh-CN: 提示文字，当`value`为空时显示\n start-date:\n type: String\n en: start date (YYYY-MM-DD)\n zh-CN: '限定最小日期，注意该限制只能限定到日期，不能限定到小时分钟'\n end-date:\n type: String\n en: end date (YYYY-MM-DD)\n zh-CN: 限定最大日期，注意该限制只能限定到日期，不能限定到小时分钟\n format:\n default: 'YYYY-MM-DD'\n en: display format for date column\n zh-CN: 日期栏的显示格式\nevents:\n on-change:\n params: '`(value)`'\n en: $emits when value changes, `(newVal)`\n zh-CN: 表单值变化时触发, 参数 `(newVal)`\nchanges:\n v2.2.0:\n en:\n - '[enhance] Use better column width'\n zh-CN:\n - '[enhance] 优化宽度，避免日期栏和左边缘距离过近'\n v2.1.1-rc.9:\n en:\n - '[feature] new component #970 @327326724'\n zh-CN:\n - '[feature] 新组件 #970 @327326724'\n" }, { "path": "src/components/datetime-range/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('DatetimeRange', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('datetime-range')\n })\n})\n" }, { "path": "src/components/datetime-view/index.vue", "content": "\n\n\n" }, { "path": "src/components/datetime-view/metas.yml", "content": "category:\n en: Form\n 'zh-CN': 表单\nicon: ''\nprops:\n value:\n type: String\n default: ''\n en: form's value, use `v-model` for binding\n zh-CN: 表单值，`v-model`绑定\n format:\n default: 'YYYY-MM-DD'\n en: display format for date column\n zh-CN: 日期栏的显示格式\nmethods:\n render:\n version: v2.5.0\n en: re-render component\n zh-CN: 强制重新渲染组件，当主动修改值或者其他非响应属性时需要调用该方法\nchanges:\n v2.9.2:\n en:\n - '[fix] fix render error for DOM not found #2797'\n zh-CN:\n - '[fix] 修复render错误，未找到DOM元素 #2797'\n v2.5.0:\n en:\n - '[feature] new component'\n zh-CN:\n - '[feature] 新组件 DatetimeView'\n" }, { "path": "src/components/datetime-view/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('DatetimeView', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('datetime-view')\n })\n})\n" }, { "path": "src/components/dev-tip/index.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/divider/index.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/divider/metas.yml", "content": "category:\n en: Layout\n 'zh-CN': 布局\nicon: ''\nextra: |\n ::: tip\n 不支持配置分割线颜色，因为线条是通过图片来实现的。好处是在任何背景颜色下都可以适应。如果需要配置颜色，请使用`load-more`组件。\n :::\n\n ``` html\n 我是有底线的\n ```\ntags:\n en:\n - layout\n - divider\n zh-CN:\n - 布局\n - 分割线\nslots:\n default:\n en: title\n zh-CN: 分隔线标题\nreferences:\n - http://www.daqianduan.com/4258.html\n" }, { "path": "src/components/divider/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('Divider', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('divider')\n })\n})\n" }, { "path": "src/components/drawer/index.vue", "content": "/**\r\n* this component is forked from: https://github.com/bajian/vue-drawer\r\n*/\r\n\r\n\r\n\r\n\r\n" }, { "path": "src/components/drawer/metas.yml", "content": "icon: ''\r\ncategory:\r\n en: Navigation\r\n zh-CN: 导航\r\nextra:\r\n en: 'this component is forked from: https://github.com/bajian/vue-drawer'\r\n zh-CN: |\r\n\r\n 当前组件 forked 自 https://github.com/bajian/vue-drawer\r\n\r\n drawer 设计是作为公用侧边栏使用，所以不支持直接在单页面里使用，而是配合 `router-view` 来使用。\r\n\r\n \r\n ``` html\r\n \r\n\r\n ```\r\n\r\n ::: tip\r\n 源码请参考 [App.vue](https://github.com/airyland/vux/blob/v2/src/App.vue)\r\n :::\r\n\r\nprops:\r\n show:\r\n version: v2.4.0\r\n type: Boolean\r\n default: false\r\n en: visibility of the component, use :show.sync to control the visibility(vue@^2.3.3)\r\n zh-CN: 是否展开，使用 :show.sync 绑定(vue@^2.3.3)\r\n drawer-style:\r\n version: v2.4.0\r\n en: menu container styles\r\n zh-CN: 菜单样式\r\n show-mode:\r\n version: v2.4.0\r\n default: overlay\r\n en: animation type, can be push or overlay\r\n zh-CN: 展示方式，push(推开内容区域)或者 overlay(在内容上显示)\r\n placement:\r\n version: v2.4.0\r\n default: left\r\n en: placement, left or right\r\n zh-CN: 显示位置，可以为 left 或者 right\r\nslots:\r\n default:\r\n version: v2.4.0\r\n en: page content container\r\n zh-CN: 主体内容插槽\r\n drawer:\r\n version: v2.4.0\r\n en: drawer menu container\r\n zh-CN: 侧边栏内容插槽\r\nevent:\r\n on-show:\r\n version: v2.4.0\r\n en: emits when drawer is shown\r\n zh-CN: 侧边栏显示时触发\r\n on-hidde:\r\n version: v2.4.0\r\n en: emits when drawer is hidden\r\n zh-CN: 侧边栏关闭时触发\r\nchanges:\r\n v2.4.0:\r\n en:\r\n - '[feature] new component'\r\n zh-CN:\r\n - '[feature] 新组件：侧边栏(beta)'\r\n" }, { "path": "src/components/drawer/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('Drawer', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('drawer')\n })\n})\n" }, { "path": "src/components/flexbox/flexbox-item.vue", "content": "\n\n\n" }, { "path": "src/components/flexbox/flexbox.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/flexbox/index.js", "content": "import Flexbox from './flexbox'\nimport FlexboxItem from './flexbox-item'\n\nexport {\n Flexbox,\n FlexboxItem\n}\n" }, { "path": "src/components/flexbox/metas.yml", "content": "icon: ''\ncategory:\n en: Layout\n 'zh-CN': 布局\ncategory_order: 2\nitems:\n - flexbox\n - flexbox-item\ntags:\n en:\n - flex\n - flexbox\n zh-CN:\n - 布局\n - 栅格\nflexbox:\n props:\n gutter:\n type: Number\n default: 8\n en: gap size (px)\n zh-CN: 间隙像素大小（px）\n orient:\n type: String\n default: horizontal\n en: \"can be in ['horizontal', 'vertical']\"\n zh-CN: \"排布方向，可选['horizontal', 'vertical']\"\n justify:\n en: '`justify-content` in `flex`'\n zh-CN: '`flex`的`justify-content`属性'\n align:\n en: '`align-items` in `flex`'\n zh-CN: '`flex`的`align-items`属性'\n wrap:\n en: '`flex-wrap` in `flex`'\n zh-CN: '`flex`的`flex-wrap`属性'\n direction:\n en: '`flex-direction` in `flex`'\n zh-CN: '`flex`的`flex-direction`属性'\n slots:\n default:\n en: 'content slot for `flexbox-item`'\n zh-CN: '`flexbox-item`的内容插槽'\nflexbox-item:\n props:\n span:\n type: Number\n en: occupied width. If not set, all flexbox-item will get the same width.\n zh-CN: 占用宽度，如果不设置，所有flexbox-item将平分\n order:\n type: String\n en: '`order` in `flex`'\n zh-CN: '`flex`的`order`属性'\n slots:\n default:\n en: content slot\n zh-CN: '内容插槽'\n" }, { "path": "src/components/flexbox/test.js", "content": "import Comp from './flexbox-item.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('Blur', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('flexbox-item')\n })\n})\n" }, { "path": "src/components/flow/flow-line.vue", "content": "\n\n" }, { "path": "src/components/flow/flow-state.vue", "content": "\n\n" }, { "path": "src/components/flow/flow.vue", "content": "\n\n\n\n" }, { "path": "src/components/flow/metas.yml", "content": "category:\n en: Data Display\n 'zh-CN': 数据展示\nicon: ''\nitems:\n - flow\n - flow-state\n - flow-line\nflow:\n props:\n orientation:\n type: String\n default: 'horizontal'\n en: \"orientation of flow, can be in ['horizontal', 'vertical']\"\n zh-CN: \"flow 方向，可选['horizontal', 'vertical']\"\nflow-state:\n props:\n title:\n type: String\n default: ''\n en: title for state point\n zh-CN: 标题\n state:\n type: String,Number\n default: ''\n en: content showed inside state point.\n zh-CN: 在节点中显示的内容\n is-done:\n type: Boolean\n default: false\n en: if done\n zh-CN: 该节点是否完成\n slots:\n title:\n version: v2.7.0\n en: title for state point，default content is prop:title\n zh-CN: 标题插槽，默认内容为 prop:title\nflow-line:\n props:\n tip:\n type: String\n default: ''\n en: tip for flow line, invalid when is-done is true\n zh-CN: 流线的提示文字，当 is-done 为 true 时无效\n tip-direction:\n type: String\n default: top for horizontal flow, left for vertical flow\n en: \"orientation of tip, can be in ['top', 'right', 'bottom', 'left']. If horizontal flow, the default is top; if vertical flow, the default is left\"\n zh-CN: \"提示文字方向，可选['top', 'right', 'bottom', 'left']. 在横向 flow 中默认为 top，纵向默认则为 left\"\n is-done:\n type: Boolean\n default: false\n en: if done\n zh-CN: 该流线是否完成\n line-span:\n type: Number,String\n en: length of flow line. if not set, all flow-line will get the same length\n zh-CN: 流线的整体长度，如果不设置，所有 flow line 将平分\n process-span:\n type: Number,String\n default: 50\n en: percentage rate of progress which will be showed in flow line\n zh-CN: 在 flow line 上显示的进度比例\nchanges:\n v2.7.0:\n en:\n - '[feature] add slot:title for flow-state #2010'\n zh-CN:\n - '[feature] 为 flow-state 添加 slot:title #2010'\n v2.3.1:\n en:\n - '[feature] new component'\n zh-CN:\n - '[feature] 新组件'\n" }, { "path": "src/components/flow/test.js", "content": "import Comp from './flow.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('Flow', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('flow')\n })\n})\n" }, { "path": "src/components/form-preview/index.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/form-preview/metas.yml", "content": "category:\n en: Form\n 'zh-CN': 表单\nicon: ''\ntags:\n en:\n - form\n zh-CN:\n - 表单\nprops:\n header-label:\n type: String\n default: ''\n en: header label\n zh-CN: 头部标题\n header-value:\n type: String\n default: ''\n en: header value\n zh-CN: 头部内容\n body-items:\n type: Array\n default: '[]'\n en: a list of label and value pair\n zh-CN: 主体内容列表， [{label:'label',value:'value'}]\n footer-buttons:\n type: Array\n default: '[]'\n en: |\n button list. Default is a gray style, and the primary text is highlighted. [{style: 'primary', text: 'text', onButtonClick: fn(prop:name), link: '/path'}]\n zh-CN: '底部按钮列表，default 为灰色样式，primary 文字为高亮颜色， [{style: \"primary\", text: \"text\", onButtonClick: fn(prop:name), link: \"/path\"}]'\nchanges:\n v2.5.12:\n en:\n - '[fix] Fix layout issue when header-value is empty #1935'\n zh-CN:\n - '[fix] 修复 header-value 为空时的错位问题 #1935'\n v2.1.1-rc.14:\n en:\n - '[fix] Fix variable: form-preview-button-primary-color'\n - '[feature] Support prop:name #1123'\n zh-CN:\n - '[fix] 修复 less 变量：form-preview-button-primary-color'\n - '[feature] 支持 prop:name 以方便函数调用 #1123'\n v2.1.0-rc.49:\n zh-CN:\n - '[fix] 修复出现滚动条 #920 @asingingfish'\n v2.0.0:\n zh-CN:\n - '[feature] 增加`form-preview`组件'\n" }, { "path": "src/components/form-preview/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('FormPrview', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('form-preview')\n })\n})\n" }, { "path": "src/components/fullpage/DemoBasic.vue", "content": "\n\n\n\n" }, { "path": "src/components/fullpage/index.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/fullpage/lib.js", "content": "/*!\n * zepto.fullpage.js v0.5.0 (https://github.com/yanhaijing/zepto.fullpage)\n * API https://github.com/yanhaijing/zepto.fullpage/blob/master/doc/api.md\n * Copyright 2014 yanhaijing. All Rights Reserved\n * Licensed under MIT (https://github.com/yanhaijing/zepto.fullpage/blob/master/LICENSE)\n */\n\nconst BOX_CLASS = 'vux-fullpage-box'\nconst ANIM_CLASS = 'vux-fullpage-box-anim'\nconst ITEM_CLASS = 'vux-fullpage-item'\nconst DIR_CLASS = 'vux-fullpage-dir'\n\nvar d = {\n page: null,\n start: 0,\n duration: 500,\n loop: false,\n drag: false,\n dir: 'v',\n der: 0.1,\n change: function (data) {},\n beforeChange: function (data) {},\n afterChange: function (data) {},\n orientationchange: function (orientation) {}\n}\n\nfunction touchmove (e) {\n e.preventDefault()\n}\n\nfunction fix (cur, pagesLength, loop) {\n if (cur < 0) {\n return loop ? pagesLength - 1 : 0\n }\n\n if (cur >= pagesLength) {\n return loop ? 0 : pagesLength - 1\n }\n\n return cur\n}\n\nfunction move (ele, dir, dist) {\n var xPx = '0px'\n var yPx = '0px'\n if (dir === 'v') yPx = dist + 'px'\n else xPx = dist + 'px'\n ele.style.cssText += ('-webkit-transform : translate3d(' + xPx + ', ' + yPx + ', 0px);' +\n 'transform : translate3d(' + xPx + ', ' + yPx + ', 0px)')\n}\n\nfunction init (option) {\n var o = option || {}\n for (var key in d) {\n if (!o.hasOwnProperty(key)) {\n o[key] = d[key]\n }\n }\n\n var that = this\n that.curIndex = -1\n that.o = o\n\n that.startY = 0\n that.movingFlag = false\n\n that.ele.classList.add(BOX_CLASS)\n that.parentEle = that.ele.parentNode\n\n var query = o.page\n if (query && query.indexOf('.') === 0) {\n query = query.substring(1, query.length)\n that.pageEles = that.ele.getElementsByClassName(query)\n }\n\n if (!query) {\n that.pageEles = that.ele.children\n }\n\n for (var i = 0; i < that.pageEles.length; i++) {\n var pageEle = that.pageEles[i]\n pageEle.classList.add(ITEM_CLASS)\n pageEle.classList.add(DIR_CLASS + o.dir)\n }\n\n that.pagesLength = that.pageEles.length\n that.update()\n that.initEvent()\n that.start()\n}\n\nfunction Fullpage (ele, option) {\n this.ele = ele\n init.call(this, option)\n}\n\nFullpage.prototype.update = function () {\n let pageEle\n if (this.o.dir === 'h') {\n this.width = this.parentEle.offsetWidth\n for (let i = 0; i < this.pageEles.length; i++) {\n pageEle = this.pageEles[i]\n pageEle.style.width = this.width + 'px'\n }\n this.ele.style.width = (this.width * this.pagesLength) + 'px'\n }\n\n this.height = this.parentEle.offsetHeight\n for (let i = 0; i < this.pageEles.length; i++) {\n pageEle = this.pageEles[i]\n pageEle.style.height = this.height + 'px'\n }\n\n this.moveTo(this.curIndex < 0 ? this.o.start : this.curIndex)\n}\n\nFullpage.prototype.initEvent = function () {\n var that = this\n var ele = that.ele\n\n ele.addEventListener('touchstart', function (e) {\n if (!that.status) {\n return 1\n }\n // e.preventDefault()\n if (that.movingFlag) {\n return 0\n }\n\n that.startX = e.targetTouches[0].pageX\n that.startY = e.targetTouches[0].pageY\n })\n ele.addEventListener('touchend', function (e) {\n if (!that.status) {\n return 1\n }\n // e.preventDefault()\n if (that.movingFlag) {\n return 0\n }\n\n var sub = that.o.dir === 'v' ? (e.changedTouches[0].pageY - that.startY) / that.height : (e.changedTouches[0].pageX - that.startX) / that.width\n var der = (sub > that.o.der || sub < -that.o.der) ? sub > 0 ? -1 : 1 : 0\n\n that.moveTo(that.curIndex + der, true)\n })\n if (that.o.drag) {\n ele.addEventListener('touchmove', function (e) {\n if (!that.status) {\n return 1\n }\n // e.preventDefault()\n if (that.movingFlag) {\n that.startX = e.targetTouches[0].pageX\n that.startY = e.targetTouches[0].pageY\n return 0\n }\n\n var y = e.changedTouches[0].pageY - that.startY\n if ((that.curIndex === 0 && y > 0) || (that.curIndex === that.pagesLength - 1 && y < 0)) y /= 2\n var x = e.changedTouches[0].pageX - that.startX\n if ((that.curIndex === 0 && x > 0) || (that.curIndex === that.pagesLength - 1 && x < 0)) x /= 2\n var dist = (that.o.dir === 'v' ? (-that.curIndex * that.height + y) : (-that.curIndex * that.width + x))\n ele.classList.remove(ANIM_CLASS)\n move(ele, that.o.dir, dist)\n })\n }\n\n window.addEventListener('orientationchange', function () {\n if (window.orientation === 180 || window.orientation === 0) {\n that.o.orientationchange('portrait')\n }\n if (window.orientation === 90 || window.orientation === -90) {\n that.o.orientationchange('landscape')\n }\n }, false)\n\n window.addEventListener('resize', function () {\n that.update()\n }, false)\n}\n\nFullpage.prototype.holdTouch = function () {\n document.addEventListener('touchmove', touchmove)\n}\n\nFullpage.prototype.unholdTouch = function () {\n document.removeEventListener('touchmove', touchmove)\n}\n\nFullpage.prototype.start = function () {\n this.status = 1\n this.holdTouch()\n}\n\nFullpage.prototype.stop = function () {\n this.status = 0\n this.unholdTouch()\n}\n\nFullpage.prototype.getCurIndex = function () {\n return this.curIndex\n}\n\nFullpage.prototype.moveTo = function (next, anim) {\n var that = this\n var ele = that.ele\n var cur = that.curIndex\n next = fix(next, that.pagesLength, that.o.loop)\n\n if (anim) {\n ele.classList.add(ANIM_CLASS)\n } else {\n ele.classList.remove(ANIM_CLASS)\n }\n\n if (next !== cur) {\n var flag = that.o.beforeChange({\n next: next,\n cur: cur\n })\n\n // beforeChange return false to stop scrolling\n if (flag === false) {\n return 1\n }\n }\n\n that.movingFlag = true\n that.curIndex = next\n move(ele, that.o.dir, -next * (that.o.dir === 'v' ? that.height : that.width))\n\n if (next !== cur) {\n that.o.change({\n prev: cur,\n cur: next\n })\n }\n\n window.setTimeout(function () {\n that.movingFlag = false\n if (next !== cur) {\n that.o.afterChange({\n prev: cur,\n cur: next\n })\n for (var i = 0; i < that.pageEles.length; i++) {\n var pageEle = that.pageEles[i]\n if (i === next) {\n pageEle.classList.add('cur')\n } else {\n pageEle.classList.remove('cur')\n }\n }\n }\n }, that.o.duration)\n}\n\nFullpage.prototype.movePrev = function (anim) {\n this.moveTo(this.curIndex - 1, anim)\n}\n\nFullpage.prototype.moveNext = function (anim) {\n this.moveTo(this.curIndex + 1, anim)\n}\n\nexport default Fullpage\n\n" }, { "path": "src/components/grid/grid-item.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/grid/grid.vue", "content": "\n\n\n\n" }, { "path": "src/components/grid/index.js", "content": "import Grid from './grid'\nimport GridItem from './grid-item'\n\nexport {\n Grid,\n GridItem\n}\n" }, { "path": "src/components/grid/metas.yml", "content": "icon: ''\nimport_code: import { Grid, GridItem } from 'vux'\ncategory:\n en: Layout\n 'zh-CN': 布局\ntags:\n en:\n - grid\n - layout\n zh-CN:\n - 宫格\n - 九宫格\n - 布局\nitems:\n - grid\n - grid-item\nextra: |\n\n ``` html\n \n \n \n \n \n ```\ngrid:\n props:\n rows:\n type: Number\n version: v2.2.0\n default: 3\n en: (deprecated after v2.6.0) the number of rows. Less than 5 will be better\n zh-CN: (v2.6.0 之后废弃，使用 col 替代)宫格行数，建议少于`5`\n cols:\n type: Number\n version: v2.6.1\n default: 3\n en: the number of columns. if there is more than one row in grid, need to set cols value, otherwise all grid items will show in one row with the same width\n zh-CN: 列数。如果为非单行 Grid，需要设置 cols，否则所有 GridItem 会平均宽度显示在一行。\n show-lr-borders:\n type: Boolean\n version: v2.8.1\n default: true\n en: whether show left and right borders\n zh-CN: 是否显示左右边框\n show-vertical-dividers:\n type: Boolean\n version: v2.8.1\n default: true\n en: whether show vertical dividers\n zh-CN: 是否显示垂直分割线\n slots:\n default:\n en: 'default slot for `grid-item` list'\n zh-CN: 用于`grid-item`的插槽\ngrid-item:\n props:\n icon:\n en: 'icon url. if using local resources, it is better to use `slot=icon`'\n zh-CN: '图标地址，如果是线上地址，推荐使用该prop。如果是本地图标资源，使用`slot=icon`可以保证资源被正确打包'\n label:\n en: '`label` text'\n zh-CN: '`label` 文字'\n link:\n en: vue-router's path\n zh-CN: vue-router 路径\n slots:\n icon:\n en: 'icon slot, use tag:`img`'\n zh-CN: \"图标内容，直接使用`img`标签\"\n label:\n en: slot for label, the same func as prop:label\n zh-CN: label 文字的 slot，作用同 prop:label\nchanges:\n v2.8.1:\n en:\n - '[feature] add prop:show-lr-borders and prop:show-vertical-dividers #2488'\n zh-CN:\n - '[feature] 支持 prop:show-lr-borders、prop:show-vertical-dividers 用以隐藏左右边线及垂直分割线 #2488'\n v2.6.1:\n en:\n - '[feature] add `cols` props'\n zh-CN:\n - '[feature] 添加 `cols` 属性，自定义列数'\n v2.6.0:\n en:\n - '[change] prop:rows is deprecated #1971'\n zh-CN:\n - '[change] rows 属性已经废弃，使用自动计算 #1971'\n v2.2.0:\n en:\n - '[feature] Support dynamic rows'\n - '[enhance] Hide slot:icon and slot:label if not being set'\n zh-CN:\n - '[feature] 支持定义列数'\n - '[enhance] 如果没有使用 icon 和 label，则直接隐藏 slot:icon 和 slot:label'\n v2.0.14:\n en:\n - '[feature] Add component `grid`'\n zh-CN:\n - '[feature] 增加`grid`九宫格组件'\n" }, { "path": "src/components/group/index.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/group/metas.yml", "content": "category:\n en: Form\n 'zh-CN': 表单\nicon: ''\ntags:\n en:\n - form\n - group\n zh-CN:\n - 表单\n - 分组\nextra:\n en: '`Group` is a special component for wrapping form elements'\n zh-CN: >\n `Group`是一个特殊的表单`wrapper`组件，主要用于将表单分组，单个表单元素也算一组。常见的表单组件都`必须`作为`Group`的子组件。\n 属于`Group`子组件的有：Cell, XInput, XTextarea, XSwitch, Calendar, XNumber, Radio, XAddress, Datetime, Selector\nprops:\n title:\n type: String\n default: ''\n en: group title\n zh-CN: 分组标题\n title-color:\n type: String\n default: ''\n en: group title's color\n zh-CN: 分组标题文字颜色\n label-width:\n type: String\n default: ''\n en: common label width for child components\n zh-CN: 为子元素设定统一label宽度\n label-align:\n type: String\n default: ''\n en: common label text-align for child components\n zh-CN: 为子元素设定统一对齐方式\n label-margin-right:\n type: String\n default: ''\n en: common margin right value for child components\n zh-CN: 为子元素设定统一的右边margin\n gutter:\n type: String\n default: ''\n en: set the marginTop value when there is no title\n zh-CN: 设定group的上边距，只能用于没有标题时\nslots:\n default:\n en: content body for child components\n zh-CN: 子组件插槽\n title:\n version: v2.5.1\n en: title slot\n zh-CN: 标题插槽\nchanges:\n v2.5.4:\n en:\n - '[enhance] XSwitch：labelAlign support justify #1707'\n zh-CN:\n - '[enhance] XSwitch的labelAlign 支持 justify #1707'\n v2.5.3:\n en:\n - '[enhance] prop:labelAlign support justify #1574'\n zh-CN:\n - '[enhance] labelAlign 支持 justify #1574'\n v2.5.1:\n en:\n - '[feature] Add slot:title #1650'\n zh-CN:\n - '[feature] 添加 slot:title #1650'\n v2.3.2:\n en:\n - '[feature] prop:gutter could be a number'\n zh-CN:\n - '[feature] gutter 属性允许为数字类型'\n v2.1.1-rc.2:\n en:\n - '[feature] Support title margin-top variable'\n zh-CN:\n - '[feature] 支持 margin-top 等 less 变量'\n" }, { "path": "src/components/group/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('Group', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('group')\n })\n})\n" }, { "path": "src/components/group-title/index.vue", "content": "\n\n\n\n" }, { "path": "src/components/group-title/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('GroupTitle', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('group-title')\n })\n})\n" }, { "path": "src/components/icon/index.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/icon/metas.yml", "content": "category:\n en: Basic\n zh-CN: 基础组件\nicon: ''\nafter_extra: |\n ``` html\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ```\ntags:\n en:\n - icon\n zh-CN:\n - 图标\nprops:\n type:\n type: String\n default: ''\n en: icon name, optional values are shown in demo\n zh-CN: 图标名字，可选值见demo\n is-msg:\n type: Boolean\n default: false\n en: if used as msg icon. Icon's font-size will be bigger(93px) than default\n zh-CN: 是否用作消息提示页面图标，图标尺寸会使用93px\nchanges:\n v2.1.1-rc.4:\n en:\n - '[change] No more built-in `icon-big` classname, use `is-msg` instead. #988 @greedying'\n zh-CN:\n - '[change] 不再内置类名 `icon-big`, 改用 prop:`is-msg` #988 @greedying'\n v2.1.0:\n zh-CN:\n - '[feature] 更新`WeUI`样式到最新版本'\n - '[change] `type`参数由下划线变为中划线，组件内部做了兼容保证升级时无影响'\n" }, { "path": "src/components/icon/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('Icon', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('icon')\n })\n})\n" }, { "path": "src/components/inline-calendar/index.vue", "content": "\n\n\nweek_day_0:\n en: Su\n zh-CN: 日\nweek_day_1:\n en: Mo\n zh-CN: 一\nweek_day_2:\n en: Tu\n zh-CN: 二\nweek_day_3:\n en: We\n zh-CN: 三\nweek_day_4:\n en: Th\n zh-CN: 四\nweek_day_5:\n en: Fr\n zh-CN: 五\nweek_day_6:\n en: Sa\n zh-CN: 六\n\n\n\n\n\n" }, { "path": "src/components/inline-calendar/metas.yml", "content": "category:\n en: Form\n 'zh-CN': 表单\nicon: ''\ntags:\n en:\n - form\n - calendar\n zh-CN:\n - 日历\n - 表单\nprops:\n value:\n type: String, Array\n default: ''\n en: calendar value, use `v-modle` for binding. String (including empty) means single seleciton; array (including empty array) means multiple selection.\n zh-CN: 当前选中日期，使用`v-model`绑定。值为字符串(包括空字符串)时表示单选日期，为数组(包括空数组)时表示多选。\n render-month:\n type: Array\n default: ''\n en: specify which date to render, for example [2018, 8]\n zh-CN: 指定渲染日期，如 [2018, 8]\n start-date:\n type: String\n default: ''\n en: 'start date with format `YYYY-MM-dd`'\n zh-CN: '起始日期，格式为 `YYYY-MM-dd`'\n end-date:\n type: String\n default: ''\n en: 'end date with format `YYYY-MM-dd`'\n zh-CN: '结束日期，格式为`YYYY-MM-dd`'\n show-last-month:\n type: Boolean\n default: true\n en: if show last month's days\n zh-CN: 是否显示上个月的日期\n show-next-month:\n type: Boolean\n default: true\n en: if show next month's days\n zh-CN: 是否显示下个月的日期\n highlight-weekend:\n type: Boolean\n default: false\n en: if highlight weekend days\n zh-CN: 是否高亮周末\n return-six-rows:\n type: Boolean\n default: true\n en: if always show six rows\n zh-CN: 是否总是渲染6行日期\n hide-header:\n type: Boolean\n default: false\n en: if hiding header\n zh-CN: 是否隐藏日历头部\n hide-week-list:\n type: Boolean\n default: false\n en: if hiding week list\n zh-CN: 是否隐藏星期列表\n replace-text-list:\n type: 'Object'\n default: ''\n en: replace list, for example, {'TODAY':'今'}\n zh-CN: \"替换列表，可以将默认的日期换成文字，比如今天的日期替换成今，{'TODAY':'今'}\"\n weeks-list:\n type: Array\n default: \"['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']\"\n en: 'week list, starting from `Sunday`'\n zh-CN: 星期列表，从周日开始\n render-function:\n type: Function\n default: ''\n en: render function to add extra contents, params `(line, row, dateData)`\n zh-CN: 用于为特定日期添加额外的html内容，参数为(行index,列index,日期详细属性)\n render-on-value-change:\n type: Boolean\n default: true\n en: if re-render calendar if value changes, should set to false when showing multi months\n zh-CN: 当日期变化时是否重新渲染日历，如果是渲染了多个日历的话需要设为false\n disable-past:\n type: Boolean\n default: false\n en: if disable the past days, can work with start-date\n zh-CN: 禁止选择过去的日期，该选项可以与 start-date 同时使用\n disable-future:\n type: Boolean\n default: false\n en: if disable future days, can work with end-date\n zh-CN: 禁止选择未来的日期，该选项可以 end-date 同时使用\n marks:\n version: v2.6.0\n type: Array\n en: (beta) style marks for specified date list\n zh-CN: (beta) 自定义日期标记\n disable-weekend:\n version: v2.7.0\n type: Boolean\n default: false\n en: whether disable weekends\n zh-CN: 是否禁用周六日\n disable-date-function:\n version: v2.7.0\n type: Function\n params: '`(date)`'\n en: check if a date should be disabled\n zh-CN: 自定义标记特定日期是否应该禁用，返回 true 表示禁用，false 表示不禁用，不返回表示和原有逻辑一致(这样不影响和 disable-weekend 等禁用属性同时使用)\nslots:\n each-day:\n version: v2.3.5\n en: you can custom how to display each day\n zh-CN: 用以自定义每一天的显示渲染，推荐使用该 slot 来替代 render-function\nevents:\n on-change:\n en: emits when value is changed\n zh-CN: 值变化时触发\n on-view-change:\n version: v2.5.12\n params: '(data, index)'\n en: fires when render month is changed\n zh-CN: 渲染月份变化时触发。初始化时会触发一次，如果不希望处理初始化时的触发，可以检查第二个参数是否为 0\n on-select-single-date:\n version: 2.7.6\n params: '(currentValue)'\n en: fires when date is selected in radio mode\n zh-CN: 单选模式下选中日期时触发\nmethods:\n getDates:\n version: v2.5.11\n en: get current date list\n zh-CN: 获取当前日期列表\n switchViewToToday:\n version: v2.5.12\n en: render current month\n zh-CN: 渲染当天所在月份\n switchViewToMonth:\n version: v2.5.12\n params: (year, month)\n en: render specified year and month\n zh-CN: 渲染特定年月日期\n switchViewToCurrentValue:\n version: v2.5.12\n en: render with current value's month\n zh-CN: 渲染当前值所在月份\nchanges:\n v2.7.6:\n en:\n - '[feature] add event:on-select-single-date'\n zh-CN:\n - '[feature] 添加事件 on-select-single-date'\n v2.7.3:\n en:\n - '[fix] disable-date-function result conflicts with disable-weekend #2189'\n zh-CN:\n - '[fix] 修复 disable-date-function 取值与禁用周末逻辑冲突 #2189'\n v2.7.2:\n en:\n - '[fix] fix reset-value issue in multiple mode #2160'\n - '[fix] fix props missing in calendar #2105'\n - '[fix] fix disabled weekends still selectable #2178'\n zh-CN:\n - '[fix] 修复多选情况下重置值时没有正确渲染的问题 #2160'\n - '[fix] 修复部分属性没有继承 inline-calendar 的问题 #2105'\n - '[fix] 修复禁用周末日期仍能点击的问题 #2178'\n v2.7.0:\n en:\n - '[enhance] call render function on created hook instead of mounted(ssr)'\n - '[feature] add prop:disable-weekend #2105'\n - '[feature] add prop:disable-date-function #2105'\n - '[fix] remove useless re-render function #2066'\n zh-CN:\n - '[enhance] 在 created hook 执行渲染而不是 mounted(ssr)'\n - '[feature] 添加属性 prop:disable-weekend 来禁用周末 #2105'\n - '[feature] 添加属性 prop:disable-date-function 自定义标记禁用日期 #2105'\n - '[fix] 移除重复的多次重复渲染 #2066'\n v2.6.0:\n en:\n - '[feature] (beta) Support prop:marks to style specified date item'\n - '[fix] fix i18n for days'\n zh-CN:\n - '[feature] (beta) 支持属性 marks 用以自定义特定日期显示样式'\n - '[fix] 修复星期文字 i18n'\n v2.5.12:\n en:\n - '[feature] add method:switchViewToToday switchViewToMonth'\n - '[feature] support event:on-view-change'\n zh-CN:\n - '[feature] 支持 switchViewToToday, switchViewToMonth 等手动渲染方法'\n - '[feature] 支持事件 on-view-change，方便切换月份时请求数据'\n v2.5.11:\n en:\n - '[feature] support method:getDates'\n - '[feature] support less variable @calendar-bg-color'\n zh-CN:\n - '[feature] 支持方法 getDates 用于需要获取渲染日期列表的场合'\n - '[feature] 支持 less 变量 @calendar-bg-color'\n v2.5.9:\n en:\n - '[fix] donot set value to empty string when clicking on current selected item #1862'\n zh-CN:\n - '[fix] 点击当前日期项时不把值置为空 #1862'\n v2.5.8:\n en:\n - '[fix] fix on-change event fires twice #1847'\n zh-CN:\n - '[fix] 修复 on-change 事件触发两次问题 #1847'\n v2.5.5:\n en:\n - '[feature] support multi select #1446 #1467'\n zh-CN:\n - '[feature] 支持多选 #1446 #1467'\n v2.4.0:\n en:\n - '[enhance] re-render when render-month is changed'\n zh-CN:\n - '[enhance] 当 render-month 变化时重新渲染日历'\n v2.3.8:\n en:\n - '[enhance] prevent from clicking invisiable date #1564'\n zh-CN:\n - '[enhance] 不可见日期不可点击 #1564'\n v2.3.6:\n en:\n - '[change] render-function params day => date #1361'\n zh-CN:\n - '[change] render-function 参数 day => date（在 3.0 版本前不会影响目前使用）#1361'\n v2.3.5:\n en:\n - '[feature] Support slot:each-day'\n zh-CN:\n - '[feature] 支持自定义每一天的 html 渲染 slot:each-day'\n v2.3.1:\n en:\n - '[fix] Fix render-function-generated-content visibility issue #1409'\n zh-CN:\n - '[fix] 修复 render-function 生成的内容错误显示问题 #1409'\n v2.2.2:\n en:\n - \"[enhance] when replace text of date is empty string, span of date will not show\"\n zh-CN:\n - '[enhance] 当日期的替代文字为空字符串时，包含日期的 `span` 元素将不显示'\n v2.2.1-rc.2:\n en:\n - \"[enhance] Now next month's day can be clicked and will automatically switch to next month's view #1192\"\n - \"[fix] fix start-date and end-date not reactive #1219\"\n zh-CN:\n - '[enhance] 可以点击下个月日期并自动切换到下个月 #1192'\n - '[fix] 修复 start-date 和 end-date 变化后不重新渲染的问题 #1219'\n v2.1.1-rc.10:\n en:\n - '[feature] Add more less variables. #896'\n zh-CN:\n - '[feature] 支持多个 less 变量. #896'\n v2.1.1-rc.5:\n en:\n - '[fix] fix render-function not reactive'\n zh-CN:\n - '[fix] 修复 render-function 变化不重新渲染的问题'\n" }, { "path": "src/components/inline-calendar/props.js", "content": "export default () => ({\n value: {\n type: [String, Array],\n default: ''\n },\n renderMonth: {\n type: Array, // [2018, 8]\n default () {\n return [null, null]\n }\n },\n startDate: {\n type: String\n },\n endDate: {\n type: String\n },\n showLastMonth: {\n type: Boolean,\n default: true\n },\n showNextMonth: {\n type: Boolean,\n default: true\n },\n highlightWeekend: {\n type: Boolean,\n default: false\n },\n returnSixRows: {\n type: Boolean,\n default: true\n },\n hideHeader: {\n type: Boolean,\n default: false\n },\n hideWeekList: {\n type: Boolean,\n default: false\n },\n replaceTextList: {\n type: Object,\n default () {\n return {}\n }\n },\n weeksList: {\n type: Array,\n validator (val) {\n if (val) {\n return val.length === 7 || val.length === 0\n }\n return true\n }\n },\n renderFunction: {\n type: Function,\n default: () => ''\n },\n renderOnValueChange: {\n type: Boolean,\n default: true\n },\n disablePast: {\n type: Boolean,\n default: false\n },\n disableFuture: {\n type: Boolean,\n default: false\n },\n disableWeekend: {\n type: Boolean,\n default: false\n },\n disableDateFunction: Function,\n marks: {\n type: Array,\n default () {\n return []\n }\n }\n})\n" }, { "path": "src/components/inline-calendar/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('InlineCalendar', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('inline-calendar')\n })\n})\n" }, { "path": "src/components/inline-calendar/util.js", "content": "import format from '../datetime/format'\n\nexport function zero (n) {\n return n < 10 ? '0' + n : n\n}\n\nexport function splitValue (value) {\n let split = value.split('-')\n return {\n year: parseInt(split[0], 10),\n month: parseInt(split[1], 10) - 1,\n day: parseInt(split[2], 10)\n }\n}\n\nexport function getPrevTime (year, month) {\n if (month === 0) {\n return {\n month: 11,\n year: year - 1\n }\n } else {\n return {\n year,\n month: month - 1\n }\n }\n}\n\nexport function getNextTime (year, month) {\n if (month === 11) {\n return {\n month: 0,\n year: year + 1\n }\n } else {\n return {\n year,\n month: month + 1\n }\n }\n}\n\nfunction getTime (str) {\n if (typeof str === 'number') {\n return str\n }\n return typeof str === 'string' ? new Date(str.replace(/-/g, '/')).getTime() : str.getTime()\n}\n\nexport function isBetween (value, disablePast, disableFuture, rangeBegin, rangeEnd) {\n const { start, end } = getRange(disablePast, disableFuture, rangeBegin, rangeEnd)\n value = getTime(value)\n let isGte = start ? value >= getTime(start) : true\n let isLte = end ? value <= getTime(end) : true\n return isGte && isLte\n}\n\nfunction getRange (disablePast = false, disableFuture = false, rangeBegin, rangeEnd) {\n let startOfToday = new Date()\n startOfToday.setHours(0, 0, 0, 0)\n\n if (disablePast) {\n if (!rangeBegin) {\n rangeBegin = startOfToday\n } else {\n rangeBegin = Math.max(startOfToday.getTime(), getTime(rangeBegin))\n }\n }\n\n if (disableFuture) {\n if (!rangeEnd) {\n rangeEnd = startOfToday\n } else {\n rangeEnd = Math.min(startOfToday.getTime(), getTime(rangeEnd))\n }\n }\n return {\n start: rangeBegin,\n end: rangeEnd\n }\n}\n\nexport function getDays ({year, month, value, rangeBegin, rangeEnd, returnSixRows = true}) {\n let today = format(new Date(), 'YYYY-MM-DD')\n\n let _splitValue = splitValue(value || today)\n\n // if year or month is not specified, get them from value\n if (typeof year !== 'number' || typeof month !== 'number' || month < 0) {\n year = _splitValue.year\n month = _splitValue.month\n }\n\n var firstDayOfMonth = new Date(year, month, 1).getDay()\n var lastDateOfMonth = new Date(year, month + 1, 0).getDate()\n var lastDayOfLastMonth = new Date(year, month, 0).getDate()\n\n var i\n var line = 0\n var temp = []\n for (i = 1; i <= lastDateOfMonth; i++) {\n var dow = new Date(year, month, i).getDay()\n // 第一行\n if (dow === 0) {\n temp[line] = []\n } else if (i === 1) {\n temp[line] = []\n\n var k = lastDayOfLastMonth - firstDayOfMonth + 1\n for (let j = 0; j < firstDayOfMonth; j++) {\n let rs = getPrevTime(year, month)\n temp[line].push({\n year: rs.year,\n month: rs.month,\n month_str: rs.month + 1,\n day: k,\n isLastMonth: true\n })\n k++\n }\n }\n\n let _format = format(new Date(year + '/' + (month + 1) + '/' + i), 'YYYY/MM/DD')\n let options = {\n year: year,\n month: month,\n month_str: month + 1,\n day: i,\n isCurrent: value && format(new Date(value), 'YYYY/MM/DD') === _format,\n isToday: format(new Date(), 'YYYY/MM/DD') === _format\n }\n temp[line].push(options)\n\n if (dow === 6) {\n line++\n } else if (i === lastDateOfMonth) {\n let k = 1\n for (dow; dow < 6; dow++) {\n let rs = getNextTime(year, month)\n temp[line].push({\n year: rs.year,\n month: rs.month,\n month_str: rs.month + 1,\n day: k,\n isNextMonth: true\n })\n k++\n }\n }\n }\n\n if (returnSixRows && temp.length === 5) {\n let rs = getNextTime(year, month)\n let start = temp[4][6].isNextMonth ? temp[4][6].day : 0\n temp[5] = []\n for (let i = 0; i < 7; i++) {\n let day = ++start\n temp[5].push({\n year: rs.year,\n month: rs.month,\n month_str: rs.month + 1,\n day: day,\n isNextMonth: true\n })\n }\n }\n\n // 2026-02, there is only 4 lines\n if (returnSixRows && temp.length === 4) {\n let rs = getNextTime(year, month)\n let start = 0\n temp[4] = []\n temp[5] = []\n for (let i = 0; i < 7; i++) {\n let day = ++start\n temp[4].push({\n year: rs.year,\n month: rs.month,\n month_str: rs.month + 1,\n day: day,\n isNextMonth: true\n })\n day = ++start\n temp[5].push({\n year: rs.year,\n month: rs.month,\n month_str: rs.month + 1,\n day: day,\n isNextMonth: true\n })\n }\n }\n\n return {\n year: year,\n month: month,\n month_str: month + 1,\n days: temp.map(line => {\n /**\n * https://github.com/airyland/vux/issues/1361\n * @todo day will be changed to weekDay after v3.0\n */\n line.map((item, index) => {\n item.date = item.day\n item.weekDay = index\n item.isWeekend = index === 0 || index === 6\n item.formatedDate = format(new Date(`${item.year}/${item.month_str}/${item.date}`), 'YYYY-MM-DD')\n return item\n })\n return line\n })\n }\n}\n" }, { "path": "src/components/inline-desc/index.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/inline-desc/metas.yml", "content": "intro:\n en: it is the child component of cell, you cannot use it alone\n zh-CN: cell的子组件，不能单独使用\nslots:\n default:\n en: text content\n zh-CN: 文字内容\n" }, { "path": "src/components/inline-desc/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('InlineDesc', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('inline-desc')\n })\n})\n" }, { "path": "src/components/inline-loading/index.vue", "content": "\n\n\n\n" }, { "path": "src/components/inline-loading/metas.yml", "content": "category:\n en: Feedback\n zh-CN: 弹窗提示\nicon: ''\nextra:\n en: 'require vux@^2.3.4'\n zh-CN: '版本要求 vux@^2.3.4'\nchanges:\n v2.3.4:\n en:\n - '[feature] new component'\n zh-CN:\n - '[feature] 新组件'" }, { "path": "src/components/inline-loading/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('InlineLoading', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('inline-loading')\n })\n})\n" }, { "path": "src/components/inline-x-number/index.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/inline-x-number/metas.yml", "content": "category:\n en: Form\n 'zh-CN': 表单\nicon: ''\nprops:\n width:\n type: String\n default: 50px\n en: width for number\n zh-CN: 数字所占据的宽度\n button-style:\n type: String\n default: square\n en: button style, can be 'round'\n zh-CN: 按钮样式，可选['round']\n min:\n type: Number\n default: ''\n en: min value\n zh-CN: 最小值\n max:\n type: number\n default: ''\n en: max value\n zh-CN: 最大值\nchanges:\n v2.5.2:\n en:\n - '[feature] now inline-x-number is available'\n zh-CN:\n - '[feature] 单独的 inline-x-number 组件可以正常使用了'\n" }, { "path": "src/components/inline-x-number/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('InlineXNumber', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('inline-x-number')\n })\n})\n" }, { "path": "src/components/inline-x-switch/index.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/inline-x-switch/metas.yml", "content": "category:\n en: Form\n 'zh-CN': 表单\nicon: ''\ntags:\n en:\n - switch\n - form\n zh-CN:\n - 表单\n - 开关\nprops:\n disabled:\n type: Boolean\n default: false\n en: if disabled\n zh-CN: 是否不可点击\n value:\n type: Boolean\n default: false\n en: \"component's value, use `v-model` for binding\"\n zh-CN: '表单值, 使用`v-model`绑定'\n value-map:\n type: Array\n default: '[false, true]'\n en: customize not-boolean values\n zh-CN: 用于自定义 false 和 true 映射的实际值，用于方便处理比如接口返回了 0 1 这类非 boolean 值的情况\nevents:\n on-change:\n params: '`(value)`'\n en: triggers when value change, params is (currentValue)\n zh-CN: 值变化时触发，参数为 (currentValue)\nchanges:\n v2.9.0:\n en:\n - '[feature] new component #2624'\n zh-CN:\n - '[feature] 新组件 #2624'" }, { "path": "src/components/inline-x-switch/style.less", "content": "@import '../../styles/weui/widget/weui_cell/weui_form/weui_form_common';\n@import '../../styles/weui/widget/weui_cell/weui_switch';\n\n.weui-cell_switch .weui-cell__ft {\n font-size: 0;\n position: relative;\n}\n\ninput.weui-switch[disabled] {\n opacity: @switch-disabled-opacity;\n}\n\n.vux-x-switch.weui-cell_switch {\n padding-top: 6px;\n padding-bottom: 6px;\n}\n\n.vux-x-switch-overlay {\n width: 60px;\n height: 50px;\n position: absolute;\n right: 0;\n top: 0;\n opacity: 0;\n}" }, { "path": "src/components/load-more/index.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/load-more/metas.yml", "content": "category:\n en: Feedback\n zh-CN: 弹窗提示\nicon: ''\nprops:\n show-loading:\n type: Boolean\n default: true\n en: if show loading icon\n zh-CN: 是否显示 loading 图标\n tip:\n en: tip text. Show dot if there is no text and loading icon\n zh-CN: 提示文字，如果没有显示图标也没有显示文字，则显示点\nchanges:\n 2.7.6:\n en:\n - \"[feature] don't need to set the `background-color`\"\n zh-CN:\n - '[feature] 不再需要设置 `background-color`'\n v2.6.0:\n en:\n - '[fix] fix `tip` is empty and `show-loading` is `false`, the background color is not correct'\n - '[feature] support less variable @load-more-tip-background-color'\n zh-CN:\n - '[fix] 修复 `tip` 为空，且 `show-loading` 为 `false` 时背景颜色不对的问题 '\n - '[feature] 支持 @load-more-tip-background-color 全局设置文字背景颜色'\n v2.0.0:\n en:\n - '[feature] Add `load-more` component'\n zh-CN:\n - '[feature] 增加`load-more`组件'\n" }, { "path": "src/components/load-more/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('LoadMore', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('load-more')\n })\n})\n" }, { "path": "src/components/loading/index.vue", "content": "\n\n\nloading:\n en: loading\n zh-CN: 加载中\n\n\n\n\n\n" }, { "path": "src/components/loading/metas.yml", "content": "category:\n en: Feedback\n zh-CN: 弹窗提示\nicon: ''\ntags:\n en:\n - loading\n - dialog\n zh-CN:\n - 加载\n - 弹窗\n - 提示\nextra: |\n 该组件支持以`plugin`形式调用：\n\n ``` js\n import { LoadingPlugin } from 'vux'\n Vue.use(LoadingPlugin)\n\n // 或者umd方式\n // 引入构建的js文件\n Vue.use(vuxLoadingPlugin)\n ```\n\n ``` js\n // 显示\n this.$vux.loading.show({\n text: 'Loading'\n })\n\n // 隐藏\n this.$vux.loading.hide()\n\n // 获取显示状态\n this.$vux.loading.isVisible() // true or false, v2.9.1 版本支持\n ```\n ::: tip\n loading同样支持在vue外直接使用，请参照 [https://github.com/airyland/vux/blob/v2/docs/examples/loading.html](https://github.com/airyland/vux/blob/v2/docs/examples/loading.html)\n :::\n\n ::: tip\n 从v2.7.8版本开始以组件形式调用增加`delay`参数，从而实现延时显示.\n :::\n\nprops:\n show:\n type: Boolean\n default: false\n en: visibility of the component. Use `v-model` for binding before v2.5.7, otherwise use `:show`\n zh-CN: 显示状态，在 v2.5.7 前使用`v-model`绑定，后面直接使用 `:show` 绑定\n text:\n type: String\n default: '加载中'\n en: loading text, use empty string to hide loading text\n zh-CN: 提示文字，值为空字符时隐藏提示文字\n position:\n type: String\n default: 'fixed'\n en: position, default is `fixed`, you can use `absolute`\n zh-CN: 定位方式，默认为`fixed`，在100%的布局下用`absolute`可以避免抖动\n transition:\n type: String\n default: vux-mask\n en: transition name\n zh-CN: 显示动画名字\nslots:\n default:\n en: content area\n zh-CN: 提示文字区域\nchanges:\n v2.9.1:\n en:\n - '[feature] add isVisible function for LoadingPlugin #2704'\n - '[fix] fix covered by element when using scroll plugins'\n zh-CN:\n - '[feature] 添加 isVisible 获取当前显示状态 #2704'\n - '[fix] 修复使用类 scroll 组件时会被覆盖的问题'\n v2.9.0:\n en:\n - '[fix] add variable loading-z-index #2484'\n - '[enhance] support using empty text to hide loading text #2566'\n zh-CN:\n - '[fix] 添加变量 loading-z-index 避免与 toast-z-index 冲突 #2484'\n - '[enhance] 支持使用空字符隐藏提示文字 #2566'\n v2.5.7:\n en:\n - '[fix] fix vue@2.4 no setter warning, use :show instead of v-model #1798'\n zh-CN:\n - '[fix] 修复 vue@2.4 no setter 警告，可以直接用 :show 绑定 #1798'\n v2.5.0:\n en:\n - '[feature] Add prop:transition'\n zh-CN:\n - '[feature] 支持 prop:transition'\n v2.1.1-rc.11:\n en:\n - '[enhance] Reset prop data when used as plugin'\n - '[enhance] Add fade transition'\n zh-CN:\n - '[enhance] 以插件形式使用时强制重置属性值'\n - '[enhance] 添加渐现动画'\n v2.0.1:\n zh-CN:\n - '[fix] i18n 无配置'\n" }, { "path": "src/components/loading/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('Loading', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('loading')\n })\n})\n" }, { "path": "src/components/map.json", "content": "{\n \"NOTICE\": \"THIS FILE IS AUTOGENERATED BY npm run build-docs\",\n \"Actionsheet\": \"src/components/actionsheet/index.vue\",\n \"Agree\": \"src/components/agree/index.vue\",\n \"AjaxPlugin\": \"src/plugins/ajax/index.js\",\n \"Alert\": \"src/components/alert/index.vue\",\n \"AlertModule\": \"src/plugins/alert/module\",\n \"AlertPlugin\": \"src/plugins/alert/index.js\",\n \"AppPlugin\": \"src/plugins/app/index.js\",\n \"Array2stringFilter\": \"src/filters/array2String.js\",\n \"Badge\": \"src/components/badge/index.vue\",\n \"base64\": \"src/tools/base64/index.js\",\n \"Blur\": \"src/components/blur/index.vue\",\n \"Box\": \"src/components/box/index.vue\",\n \"BusPlugin\": \"src/plugins/bus/index.js\",\n \"ButtonTab\": \"src/components/button-tab/button-tab.vue\",\n \"ButtonTabItem\": \"src/components/button-tab/button-tab-item.vue\",\n \"Calendar\": \"src/components/calendar/index.vue\",\n \"Card\": \"src/components/card/index.vue\",\n \"Cell\": \"src/components/cell/index.vue\",\n \"CellBox\": \"src/components/cell-box/index.vue\",\n \"CellFormPreview\": \"src/components/cell-form-preview/index.vue\",\n \"Checker\": \"src/components/checker/checker.vue\",\n \"CheckerItem\": \"src/components/checker/checker-item.vue\",\n \"CheckIcon\": \"src/components/check-icon/index.vue\",\n \"Checklist\": \"src/components/checklist/index.vue\",\n \"ChinaAddressData\": \"src/datas/china_address.json\",\n \"ChinaAddressV1Data\": \"src/datas/china_address_v1.json\",\n \"ChinaAddressV2Data\": \"src/datas/china_address_v2.json\",\n \"ChinaAddressV3Data\": \"src/datas/china_address_v3.json\",\n \"ChinaAddressV4Data\": \"src/datas/china_address_v4.json\",\n \"ChinamobileTool\": \"src/tools/validator/chinaMobile.js\",\n \"ClickOutsideDirective\": \"src/directives/click-outside/index.js\",\n \"Clocker\": \"src/components/clocker/index.vue\",\n \"CloseDialogsPlugin\": \"src/plugins/close-dialogs/index.js\",\n \"ColorPicker\": \"src/components/color-picker/index.vue\",\n \"ConfigPlugin\": \"src/plugins/config/index.js\",\n \"Confirm\": \"src/components/confirm/index.vue\",\n \"ConfirmPlugin\": \"src/plugins/confirm/index.js\",\n \"cookie\": \"src/tools/cookie/index.js\",\n \"Countdown\": \"src/components/countdown/index.vue\",\n \"Countup\": \"src/components/countup/index.vue\",\n \"dateFormat\": \"src/tools/date/format.js\",\n \"dateRange\": \"src/tools/date/range.js\",\n \"Datetime\": \"src/components/datetime/index.vue\",\n \"DatetimePlugin\": \"src/plugins/datetime/index.js\",\n \"DatetimeRange\": \"src/components/datetime-range/index.vue\",\n \"DatetimeView\": \"src/components/datetime-view/index.vue\",\n \"debounce\": \"src/tools/debounce/index.js\",\n \"Demobasic\": \"src/components/fullpage/DemoBasic.vue\",\n \"Demoindex\": \"src/components/popover/DemoIndex.vue\",\n \"DevicePlugin\": \"src/plugins/device/index.js\",\n \"DevTip\": \"src/components/dev-tip/index.vue\",\n \"Divider\": \"src/components/divider/index.vue\",\n \"Drawer\": \"src/components/drawer/index.vue\",\n \"Field\": \"src/components/x-form/field.vue\",\n \"Flexbox\": \"src/components/flexbox/flexbox.vue\",\n \"FlexboxItem\": \"src/components/flexbox/flexbox-item.vue\",\n \"Flow\": \"src/components/flow/flow.vue\",\n \"FlowLine\": \"src/components/flow/flow-line.vue\",\n \"FlowState\": \"src/components/flow/flow-state.vue\",\n \"Form\": \"src/components/x-form/form.vue\",\n \"FormatTimeFilter\": \"src/filters/format-time.js\",\n \"FormPreview\": \"src/components/form-preview/index.vue\",\n \"FriendlyTimeFilter\": \"src/filters/friendly-time.js\",\n \"Fullpage\": \"src/components/fullpage/index.vue\",\n \"Grid\": \"src/components/grid/grid.vue\",\n \"GridItem\": \"src/components/grid/grid-item.vue\",\n \"Group\": \"src/components/group/index.vue\",\n \"GroupTitle\": \"src/components/group-title/index.vue\",\n \"Icon\": \"src/components/icon/index.vue\",\n \"InlineCalendar\": \"src/components/inline-calendar/index.vue\",\n \"InlineDesc\": \"src/components/inline-desc/index.vue\",\n \"InlineLoading\": \"src/components/inline-loading/index.vue\",\n \"InlineXNumber\": \"src/components/inline-x-number/index.vue\",\n \"InlineXSwitch\": \"src/components/inline-x-switch/index.vue\",\n \"InviewDirective\": \"src/directives/inview/index.js\",\n \"Loading\": \"src/components/loading/index.vue\",\n \"LoadingPlugin\": \"src/plugins/loading/index.js\",\n \"LoadMore\": \"src/components/load-more/index.vue\",\n \"LocalePlugin\": \"src/plugins/locale/index.js\",\n \"Marquee\": \"src/components/marquee/marquee.vue\",\n \"MarqueeItem\": \"src/components/marquee/marquee-item.vue\",\n \"Masker\": \"src/components/masker/index.vue\",\n \"md5\": \"src/tools/md5/index.js\",\n \"Msg\": \"src/components/msg/index.vue\",\n \"Name2valueFilter\": \"src/filters/name2value.js\",\n \"numberComma\": \"src/tools/number/comma.js\",\n \"numberPad\": \"src/tools/number/pad.js\",\n \"numberRandom\": \"src/tools/number/random.js\",\n \"numberRange\": \"src/tools/number/range.js\",\n \"NumberRoller\": \"src/components/number-roller/index.vue\",\n \"Panel\": \"src/components/panel/index.vue\",\n \"Picker\": \"src/components/picker/index.vue\",\n \"Popover\": \"src/components/popover/index.vue\",\n \"Popup\": \"src/components/popup/index.vue\",\n \"PopupHeader\": \"src/components/popup-header/index.vue\",\n \"PopupPicker\": \"src/components/popup-picker/index.vue\",\n \"PopupRadio\": \"src/components/popup-radio/index.vue\",\n \"Preview\": \"src/components/uploader/preview.vue\",\n \"Previewer\": \"src/components/previewer/index.vue\",\n \"Qrcode\": \"src/components/qrcode/index.vue\",\n \"querystring\": \"src/tools/querystring/index.js\",\n \"Radio\": \"src/components/radio/index.vue\",\n \"Range\": \"src/components/range/index.vue\",\n \"Rater\": \"src/components/rater/index.vue\",\n \"Scroller\": \"src/components/scroller/index.vue\",\n \"Search\": \"src/components/search/index.vue\",\n \"Selector\": \"src/components/selector/index.vue\",\n \"Shake\": \"src/components/shake/index.vue\",\n \"Spinner\": \"src/components/spinner/index.vue\",\n \"Step\": \"src/components/step/step.vue\",\n \"StepItem\": \"src/components/step/step-item.vue\",\n \"Sticky\": \"src/components/sticky/index.vue\",\n \"stringTrim\": \"src/tools/string/trim.js\",\n \"Swipeout\": \"src/components/swipeout/swipeout.vue\",\n \"SwipeoutButton\": \"src/components/swipeout/swipeout-button.vue\",\n \"SwipeoutItem\": \"src/components/swipeout/swipeout-item.vue\",\n \"Swiper\": \"src/components/swiper/swiper.vue\",\n \"SwiperItem\": \"src/components/swiper/swiper-item.vue\",\n \"Tab\": \"src/components/tab/tab.vue\",\n \"Tabbar\": \"src/components/tabbar/tabbar.vue\",\n \"TabbarItem\": \"src/components/tabbar/tabbar-item.vue\",\n \"TabItem\": \"src/components/tab/tab-item.vue\",\n \"throttle\": \"src/tools/throttle/index.js\",\n \"Timeline\": \"src/components/timeline/timeline.vue\",\n \"TimelineItem\": \"src/components/timeline/timeline-item.vue\",\n \"Tip\": \"src/components/tip/index.vue\",\n \"Toast\": \"src/components/toast/index.vue\",\n \"ToastPlugin\": \"src/plugins/toast/index.js\",\n \"TransferDom\": \"src/directives/transfer-dom/index.js\",\n \"TransferDomDirective\": \"src/directives/transfer-dom/index.js\",\n \"trim\": \"src/tools/string/trim\",\n \"Uploader\": \"src/components/uploader/index.vue\",\n \"Value2nameFilter\": \"src/filters/value2name.js\",\n \"VArea\": \"src/components/v-chart/v-area.vue\",\n \"VAxis\": \"src/components/v-chart/v-axis.vue\",\n \"VBar\": \"src/components/v-chart/v-bar.vue\",\n \"VChart\": \"src/components/v-chart/v-chart.vue\",\n \"VGuide\": \"src/components/v-chart/v-guide.vue\",\n \"Video\": \"src/components/video/index.vue\",\n \"ViewBox\": \"src/components/view-box/index.vue\",\n \"VLegend\": \"src/components/v-chart/v-legend.vue\",\n \"VLine\": \"src/components/v-chart/v-line.vue\",\n \"VPie\": \"src/components/v-chart/v-pie.vue\",\n \"VPoint\": \"src/components/v-chart/v-point.vue\",\n \"VScale\": \"src/components/v-chart/v-scale.vue\",\n \"VTooltip\": \"src/components/v-chart/v-tooltip.vue\",\n \"VuxComponentListData\": \"src/datas/vux_component_list.json\",\n \"WechatEmotion\": \"src/components/wechat-emotion/index.vue\",\n \"WechatPlugin\": \"src/plugins/wechat/index.js\",\n \"WeekCalendar\": \"src/components/week-calendar/index.vue\",\n \"WepayInput\": \"src/components/wepay-input/index.vue\",\n \"XAddress\": \"src/components/x-address/index.vue\",\n \"XButton\": \"src/components/x-button/index.vue\",\n \"XCircle\": \"src/components/x-circle/index.vue\",\n \"XDialog\": \"src/components/x-dialog/index.vue\",\n \"XHeader\": \"src/components/x-header/index.vue\",\n \"XHr\": \"src/components/x-hr/index.vue\",\n \"XImg\": \"src/components/x-img/index.vue\",\n \"XInput\": \"src/components/x-input/index.vue\",\n \"XNumber\": \"src/components/x-number/index.vue\",\n \"XProgress\": \"src/components/x-progress/index.vue\",\n \"XSwitch\": \"src/components/x-switch/index.vue\",\n \"XTable\": \"src/components/x-table/index.vue\",\n \"XTextarea\": \"src/components/x-textarea/index.vue\"\n}" }, { "path": "src/components/marquee/marquee-item.vue", "content": "\n\n" }, { "path": "src/components/marquee/marquee.vue", "content": "\n\n\n" }, { "path": "src/components/marquee/metas.yml", "content": "category:\n en: Data Display\n 'zh-CN': 数据展示\nicon: ''\nimport_code: \"import { Marquee, MarqueeItem } from 'vux'\"\nitems:\n - marquee\n - marquee-item\nmarquee:\n props:\n interval:\n type: Number\n default: 2000\n en: switch interval time\n zh-CN: 切换时间间隙\n duration:\n type: Number\n default: 300\n en: animation time\n zh-CN: 切换动画时间\n direction:\n default: up\n en: direction of animation, can be in ['up', 'down']\n zh-CN: 切换方向，可选['up', 'down']\n item-height:\n type: Number\n en: item height, set value if marquee initial state is hidden\n zh-CN: 条目高度，当默认状态为隐藏时你需要设置值，否则组件渲染时会获取不到正确高度\n slots:\n default:\n en: container of marquee items\n zh-CN: 内容插槽\nmarquee-item:\n slots:\n default:\n en: content slot\n zh-CN: 内容插槽\nchanges:\n v2.5.10:\n en:\n - '[feature] Support prop:item-height #1885'\n zh-CN:\n - '[feature] 支持 prop:item-height #1885'\n v2.1.1-rc.12:\n en:\n - '[feature] Support async marquee-item'\n zh-CN:\n - '[feature] 支持异步数据渲染'\n v2.1.0:\n en:\n - '[feature] new component'\n zh-CN:\n - '[feature] 新组件'\n" }, { "path": "src/components/marquee/test.js", "content": "import Comp from './marquee.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('Marquee', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('marquee')\n })\n})\n" }, { "path": "src/components/masker/converter.js", "content": "/*!\n * HEX <=> RGB Conversion\n * Copyright(c) 2011 Daniel Lamb \n * MIT Licensed\n */\n\nexport function toRGB (color) {\n let num = parseInt(color, 16)\n return [num >> 16, num >> 8 & 255, num & 255]\n}\n\nexport function toHex (red, green, blue) {\n return ((blue | green << 8 | red << 16) | 1 << 24).toString(16).slice(1)\n}\n" }, { "path": "src/components/masker/index.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/masker/metas.yml", "content": "category:\n en: Deprecated\n zh-CN: 不再维护\nicon: ''\nprops:\n color:\n type: String\n default: '0, 0, 0'\n en: the mask's color in rgb format, for example, '0, 0, 0'\n zh-CN: 遮罩颜色，rgb值，'0, 0, 0'\n opacity:\n type: Number\n default: 0.5\n en: the opacity of the mask\n zh-CN: 遮罩透明度\n fullscreen:\n type: Boolean\n version: v2.1.1-rc.14\n default: false\n en: if masker is fullscreen\n zh-CN: 遮罩是否全屏\nslots:\n default:\n en: content below the mask\n zh-CN: 背景内容，位于遮罩下方，一般为图片\n content:\n en: content above the mask\n zh-CN: 遮罩上方内容，一般显示标题消息\nchanges:\n v2.1.1-rc.14:\n en:\n - '[feature] Support prop:fullscreen'\n zh-CN:\n - '[feature] 支持通过prop设置是否全屏显示'\n" }, { "path": "src/components/masker/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('Masker', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('masker')\n })\n})\n" }, { "path": "src/components/metas.yml", "content": "pullup:\n icon: \npulldown:\n icon: \ncomment:\n icon: \norientation:\n icon: \nshake:\n icon: \nwechat:\n icon: \nyi:\n icon: " }, { "path": "src/components/msg/index.vue", "content": "\n\n\n\n" }, { "path": "src/components/msg/metas.yml", "content": "category:\n en: Feedback\n zh-CN: 弹窗提示\nicon: ''\nextra:\n zh-CN: |\n\n `prop:buttons` 列表是 `slot:buttons` 插槽的默认显示内容，如果 `prop:buttons` 无法满足需求，可以使用 `slot:buttons` 引入 `x-button` 组件。\n\n ``` html\n \n \n \n ```\n\nprops:\n title:\n en: text to show operation status\n zh-CN: 操作状态提示文字\n description:\n en: description\n zh-CN: 描述文字\n icon:\n default: success\n en: 'icon type. You can use `success`, `warn`, `info`, `waiting`'\n zh-CN: '图标类型，可选值有 `success`, `warn`, `info`, `waiting`'\n buttons:\n type: Array\n en: 'buttons list. A button item includes `text`, `type`(the same as x-button type), `link`, `onClick`'\n zh-CN: '操作按钮列表，一个按钮对象包含`text`, `type`(和x-button组件type一致), `link`, `onClick`'\nslots:\n buttons:\n en: used for custom buttons\n zh-CN: 自定义按钮区域元素\n description:\n en: used for custom description\n zh-CN: 自定义描述文字内容\nchanges:\n v2.9.0:\n en:\n - '[change] prop:buttons displays as slot:buttons default content'\n zh-CN:\n - '[change] prop:buttons 数组作为 slot:buttons 默认内容'\n v2.1.0:\n en:\n - '[feature] new component'\n zh-CN:\n - '[feature] 新组件'\n" }, { "path": "src/components/msg/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('Msg', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('msg')\n })\n})\n" }, { "path": "src/components/number-roller/index.vue", "content": "\n\n\n" }, { "path": "src/components/number-roller/lib.js", "content": "const Roller = class {\n constructor (opts) {\n this.container = typeof opts.container === 'string' ? document.querySelector(opts.container) : opts.container\n this.width = opts.width || 1\n if (!this.container) {\n throw Error('no container')\n }\n this.container.style.overflow = 'hidden'\n this.rollHeight = parseInt(window.getComputedStyle(this.container).height)\n\n if (this.rollHeight < 1) {\n this.container.style.height = '20px'\n this.rollHeight = 20\n }\n this.setWidth()\n }\n\n roll (n) {\n var self = this\n this.number = parseInt(n) + ''\n if (this.number.length < this.width) {\n this.number = new Array(this.width - this.number.length + 1).join('0') + this.number\n } else if (this.number.length > this.width) {\n this.width = this.number.length\n this.setWidth()\n }\n Array.prototype.forEach.call(this.container.querySelectorAll('.num'), function (item, i) {\n var currentNum = parseInt(item.querySelector('div:last-child').innerHTML)\n var goalNum = parseInt(self.number[i])\n var gapNum = 0\n var gapStr = ''\n if (currentNum === goalNum) {\n return\n } else if (currentNum < goalNum) {\n gapNum = goalNum - currentNum\n for (let j = currentNum; j < goalNum + 1; j++) {\n gapStr += '
    ' + j + '
    '\n }\n } else {\n gapNum = 10 - currentNum + goalNum\n for (let j = currentNum; j < 10; j++) {\n gapStr += '
    ' + j + '
    '\n }\n for (let j = 0; j < goalNum + 1; j++) {\n gapStr += '
    ' + j + '
    '\n }\n }\n item.style.cssText += '-webkit-transition-duration:0;s-webkit-transform:translateY(0)'\n item.innerHTML = gapStr\n let time = gapNum * (1 / 9)\n setTimeout(() => {\n item.style.cssText += '-webkit-transition-duration:' + time + 's;-webkit-transform:translateY(-' + self.rollHeight * gapNum + 'px)'\n }, 50)\n })\n }\n\n setWidth (n) {\n n = n || this.width\n var str = ''\n for (var i = 0; i < n; i++) {\n str += '
    0
    '\n }\n this.container.innerHTML = str\n }\n}\n\nexport default Roller\n" }, { "path": "src/components/orientation/index.js", "content": "/**\n * v-orientaion=\"landscape\" v-orientaion=\"portrait\"\n */\nimport Orientation from './orientation'\nexport default {\n bind () {\n const _this = this\n const value = this.expression\n const _value = value.toString()[0].toUpperCase() + value.toString().slice(1)\n\n if (Orientation['is' + _value]()) {\n this.el.style.display = 'block'\n } else {\n this.el.style.display = 'none'\n }\n\n Orientation.change(function (e) {\n let info = Orientation.getInfo()\n _this.el.style.display = info[value] ? 'block' : 'none'\n })\n },\n update () {\n },\n unbind () {\n }\n}\n" }, { "path": "src/components/orientation/orientation.js", "content": "/**\n * 横竖屏切换监听器\n * @author ningzbruc@gmail.com\n * @gitbub http://gitbub.com/kingback/orientation/\n * @date 2014-01-15\n * @version 0.0.1\n */\n\n// 原生不支持用resize模拟\nvar ORIENTATION_CHANGE = 'orientationchange'\nvar RESIZE = 'resize'\nvar EVT_ORIENTATION_CHANGE = 'onorientationchange' in window ? ORIENTATION_CHANGE : RESIZE\nvar FUNCTION = 'function'\nvar ON = 'on'\nvar AFTER = 'after'\n\n/**\n * 混入对象属性\n * @method merge\n * @param {Object} s 提供对象\n * @return {Object} r 接收对象\n * @private\n */\n\nfunction merge (s) {\n var r = {}\n var k\n\n if (s) {\n for (k in s) {\n if (s.hasOwnProperty(k)) {\n r[k] = s[k]\n }\n }\n }\n\n return r\n}\n\n/**\n * 绑定方法上下文\n * @method bind\n * @param {Function} fn\n * @param {Object} context\n * @return {Function}\n * @private\n */\n\nfunction bind (fn, context) {\n return fn.bind ? fn.bind(context) : function () {\n fn.apply(context, arguments)\n }\n}\n\n/**\n * 横竖屏切换监听器\n * @constructor Orientation\n * @class\n */\n\nfunction Orientation () {\n this.init.apply(this, arguments)\n}\n\nOrientation.prototype = {\n\n /**\n * 构造器\n * @property constructor\n * @public\n */\n constructor: Orientation,\n\n /**\n * 初始化\n * @method init\n * @public\n */\n init: function (cfg) {\n this._cfg = merge({\n delay: 400\n }, cfg)\n\n // 事件订阅数组\n this._subs = {\n on: [],\n after: []\n }\n\n // 当前信息\n this.info = this.getInfo()\n\n // 绑定事件回调上下文\n this._onWinOrientationChange = bind(this._onWinOrientationChange, this)\n\n // 绑定窗口切换事件\n window.addEventListener(EVT_ORIENTATION_CHANGE, this._onWinOrientationChange, false)\n },\n\n /**\n * 销毁\n * @method destroy\n * @public\n */\n destroy: function () {\n window.removeEventListener(EVT_ORIENTATION_CHANGE, this._onWinOrientationChange, false)\n delete this._subs\n },\n\n /**\n * 创建新实例\n * @method create\n * @return {Orientation} Orientation实例对象\n * @public\n */\n create: function (cfg) {\n return new Orientation(cfg)\n },\n\n /**\n * 获取横竖屏信息\n * @method getInfo\n * @return {Object} 横竖屏相关信息\n * @public\n */\n getInfo: function () {\n // 90度为横屏\n return (EVT_ORIENTATION_CHANGE === ORIENTATION_CHANGE) ? {\n landscape: (window.orientation === 90 || window.orientation === -90),\n portrait: (window.orientation === 0 || window.orientation === -180),\n orientation: window.orientation\n } : {\n landscape: window.screen.width > window.screen.height,\n portrait: window.screen.width <= window.screen.height,\n orientation: window.screen.width > window.screen.height ? 90 : 0\n }\n },\n\n /**\n * 是否是横屏\n * @method isLandscape\n * @return {Boolean}\n * @public\n */\n isLandscape: function () {\n return this.info.landscape\n },\n\n /**\n * 是否是竖屏\n * @method isPortrait\n * @return {Boolean}\n * @public\n */\n isPortrait: function () {\n return this.info.portrait\n },\n\n /**\n * 添加change事件\n * @method change\n * @param {Function} fn 回调函数\n * @param {Boolean} after 时候绑定after事件\n * @chainable\n */\n change: function (fn, after) {\n if (typeof fn === FUNCTION) {\n this._subs[after ? AFTER : ON].push(fn)\n }\n\n return this\n },\n\n /**\n * 触发横竖屏事件\n * @method _fireChange\n * @param {EventFacade} e\n * @protected\n */\n _fireChange: function (e) {\n var self = this\n var info = this.getInfo()\n var subs = this._subs\n var i\n var l\n\n // 如果不等于上次方向，则触发\n if (info.landscape !== this.info.landscape) {\n this.info = merge(info)\n info.originEvent = e\n info.originType = e.type\n\n // 执行on\n for (i = 0, l = subs.on.length; i < l; i++) {\n subs.on[i].call(self, e)\n }\n\n // 执行after\n setTimeout(function () {\n for (i = 0, l = subs.after.length; i < l; i++) {\n subs.after[i].call(self, e)\n }\n }, 0)\n }\n },\n\n /**\n * 检查旋转是否已经完成\n * @method _checkChange\n * @param {EventFacade} e\n * @protected\n */\n _checkChange: function (e) {\n var self = this\n\n if (self._cfg.delay) {\n // iPad打开键盘时旋转比较慢\n clearTimeout(this._changeTimer)\n self._changeTimer = setTimeout(function () {\n self._fireChange(e)\n }, self._cfg.delay)\n } else {\n self._fireChange(e)\n }\n },\n\n /**\n * 横竖屏事件回调\n * @method _onWinOrientationChange\n * @param {EventFacade} e 事件对象\n * @protected\n */\n _onWinOrientationChange: function (e) {\n if (e.type === RESIZE) {\n this._fireChange(e)\n } else {\n this._checkChange(e)\n }\n }\n\n}\n\n// 返回实例\nexport default Orientation.prototype.create()\n" }, { "path": "src/components/panel/index.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/panel/metas.yml", "content": "category:\n en: Data Display\n zh-CN: 数据展示\nicon: ''\nprops:\n header:\n en: header title\n zh-CN: 头部文字\n footer:\n type: 'Object'\n en: 'footer config, `{url: url, title: title}`'\n zh-CN: '尾部配置，`{url: url, title: title}`'\n list:\n type: 'Array'\n en: content list `[{title, desc, src, fallbackSrc, meta:{source,date,other}}]`\n zh-CN: 内容列表，`[{title, desc, src, fallbackSrc, meta:{source,date,other}}]`\n type:\n default: '1'\n en: one of '1', '2', '3', '4', '5'\n zh-CN: 布局类型，可选值 ['1', '2', '3', '4', '5']\nevents:\n on-click-header:\n en: emits when clicking header\n zh-CN: 点击头部时触发\n on-click-item:\n en: emits when clicking item\n params: '`(item)`'\n zh-CN: 点击内容列表时触发\n on-click-footer:\n en: emits when clicking footer\n zh-CN: 点击尾部时触发\nslots:\n header:\n version: v2.7.5\n zh-CN: 头部位置\n en: header\n body:\n version: v2.7.5\n zh-CN: 主体内容部分\n en: the main body part\nchanges:\n v2.7.9:\n en:\n - '[fix] hide footer when footer.title is empty #2476'\n zh-CN:\n - '[fix] footer.title 为空时隐藏 footer #2476'\n v2.7.5:\n en:\n - '[fix] remove duplicate top border'\n - '[feature] add slot:header slot:body #2270'\n zh-CN:\n - '[fix] 移除重复顶部边框样式'\n - '[feature] 添加 slot:header slot:body #2270'\n v2.6.0:\n en:\n - '[enhance] support list prop:fallbackSrc #1923'\n zh-CN:\n - '[enhance] 支持列表 fallbackSrc 属性在图片加载失败后显示 #1923'\n v2.5.7:\n en:\n - '[feature] use v-html binding #1784'\n zh-CN:\n - '[feature] 属性使用 v-html 绑定 #1784'\n v2.5.2:\n en:\n - '[feature] Add type(4,5) and info meta(source,date,other)'\n zh-CN:\n - '[feature] 增加type类型(4,5)和描述信息(来源,时间和其他自定义信息)'\n" }, { "path": "src/components/panel/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('Panel', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('panel')\n })\n})\n" }, { "path": "src/components/picker/animate.js", "content": "const time = Date.now || function () {\n return +new Date()\n}\n\nlet running = {}\nlet counter = 1\nlet desiredFrames = 60\nlet millisecondsPerSecond = 1000\n\n// http://paulirish.com/2011/requestanimationframe-for-smart-animating/\n// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating\n\n// requestAnimationFrame polyfill by Erik Möller\n// fixes from Paul Irish and Tino Zijdel\nif (typeof window !== 'undefined') {\n ;(function () {\n var lastTime = 0\n var vendors = ['ms', 'moz', 'webkit', 'o']\n for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {\n window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame']\n window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame']\n }\n\n if (!window.requestAnimationFrame) {\n window.requestAnimationFrame = function (callback, element) {\n var currTime = new Date().getTime()\n var timeToCall = Math.max(0, 16 - (currTime - lastTime))\n var id = window.setTimeout(function () {\n callback(currTime + timeToCall)\n }, timeToCall)\n lastTime = currTime + timeToCall\n return id\n }\n }\n if (!window.cancelAnimationFrame) {\n window.cancelAnimationFrame = function (id) {\n clearTimeout(id)\n }\n }\n }())\n}\n\nexport default {\n\n // A requestAnimationFrame wrapper / polyfill.\n requestAnimationFrame: (function () {\n if (typeof window !== 'undefined') {\n var requestFrame = window.requestAnimationFrame\n return function (callback, root) {\n requestFrame(callback, root)\n }\n }\n })(),\n\n // Stops the given animation.\n stop (id) {\n var cleared = running[id] != null\n if (cleared) {\n running[id] = null\n }\n return cleared\n },\n\n // Whether the given animation is still running.\n isRunning (id) {\n return running[id] != null\n },\n\n // Start the animation.\n start (stepCallback, verifyCallback, completedCallback, duration, easingMethod, root) {\n var _this = this\n var start = time()\n var lastFrame = start\n var percent = 0\n var dropCounter = 0\n var id = counter++\n\n if (!root) {\n root = document.body\n }\n\n // Compacting running db automatically every few new animations\n if (id % 20 === 0) {\n var newRunning = {}\n for (var usedId in running) {\n newRunning[usedId] = true\n }\n running = newRunning\n }\n\n // This is the internal step method which is called every few milliseconds\n var step = function (virtual) {\n // Normalize virtual value\n var render = virtual !== true\n // Get current time\n var now = time()\n\n // Verification is executed before next animation step\n if (!running[id] || (verifyCallback && !verifyCallback(id))) {\n running[id] = null\n completedCallback && completedCallback(desiredFrames - (dropCounter / ((now - start) / millisecondsPerSecond)), id, false)\n return\n }\n\n // For the current rendering to apply let's update omitted steps in memory.\n // This is important to bring internal state variables up-to-date with progress in time.\n if (render) {\n var droppedFrames = Math.round((now - lastFrame) / (millisecondsPerSecond / desiredFrames)) - 1\n for (var j = 0; j < Math.min(droppedFrames, 4); j++) {\n step(true)\n dropCounter++\n }\n }\n\n // Compute percent value\n if (duration) {\n percent = (now - start) / duration\n if (percent > 1) {\n percent = 1\n }\n }\n\n // Execute step callback, then...\n var value = easingMethod ? easingMethod(percent) : percent\n if ((stepCallback(value, now, render) === false || percent === 1) && render) {\n running[id] = null\n completedCallback && completedCallback(desiredFrames - (dropCounter / ((now - start) / millisecondsPerSecond)), id, percent === 1 || duration == null)\n } else if (render) {\n lastFrame = now\n _this.requestAnimationFrame(step, root)\n }\n }\n\n // Mark as running\n running[id] = true\n // Init first step\n _this.requestAnimationFrame(step, root)\n // Return unique animation ID\n return id\n }\n}\n" }, { "path": "src/components/picker/chain.js", "content": "import filter from 'array-filter'\n\nconst Manager = class {\n constructor (data, count, fixedColumns) {\n if (process.env.NODE_ENV === 'development') {\n const notStringList = data.filter(item => {\n return (item.parent && item.parent !== 0 && item.parent !== '0') && (typeof item.parent === 'number' || typeof item.value === 'number')\n })\n if (notStringList.length) {\n console.warn(`[VUX] picker data's value and parent should be string:\\n${JSON.stringify(notStringList, null, 2)}`)\n }\n }\n this.data = data\n this.count = count\n if (fixedColumns) {\n this.fixedColumns = fixedColumns\n }\n }\n\n getChildren (value) {\n return filter(this.data, one => {\n return one.parent === value\n })\n }\n\n getFirstColumn () {\n return filter(this.data, one => {\n return !one.parent || one.parent === 0 || one.parent === '0'\n })\n }\n\n getPure (obj) {\n return JSON.parse(JSON.stringify(obj))\n }\n\n getColumns (value) {\n // check is data contains the values\n if (value.length > 0) {\n const matchCount = this.getPure(this.data).filter((item) => {\n return this.getPure(value).indexOf(item.value) > -1\n }).length\n if (matchCount < this.getPure(value).length) {\n value = []\n }\n }\n var datas = []\n const max = this.fixedColumns || 8\n for (var i = 0; i < max; i++) {\n if (i === 0) {\n datas.push(this.getFirstColumn())\n } else {\n // 没有数据时，取得上一级的第一个\n if (!value[i]) {\n if (typeof datas[i - 1][0] === 'undefined') {\n break\n } else {\n const topValue = datas[i - 1][0].value\n datas.push(this.getChildren(topValue))\n }\n } else {\n datas.push(this.getChildren(value[i - 1]))\n }\n }\n }\n const list = datas.filter((item) => {\n return item.length > 0\n })\n // correct the column\n this.count = list.length\n return list\n }\n}\n\nexport default Manager\n" }, { "path": "src/components/picker/index.vue", "content": "\n\n\n\n\n\n" }, { "path": "src/components/picker/metas.yml", "content": "description: |\n Picker是指提供多个选项集合供用户选择其中一项的控件。Picker展示区域有限，部分选项会被隐藏，最好是当用户对所有选项都比较熟悉、有预期的时候，才使用Picker。\n - 合理的默认选项能让用户减少操作次数，提升效率。\n - 选项的排列顺序要依据当前上下文情景而定，例如衣服尺码按从小到大的顺序排列，而不是根据衣服尺码的首字母在字母表的顺序排列。\n - 滚轮选择器控制在五列以内。为了保证手机屏幕触控精度，以免发生误触，滚轮选择器建议控制在五列以内。\n - 使用相对概念增强感知。比起绝对的“某年某月日”，用“今天”、“昨天”等相对概念，能更快的激发人对时间的感知。\n - 如果选项非常多，而且选项本身比较复杂难理解需要辅助的解释，建议用容纳更多的选项的其他形式，例如日历或者新页面。\n\n\ncategory:\n en: Form\n 'zh-CN': 表单\nicon: ''\ntags:\n en:\n - picker\n - form\n zh-CN:\n - 选择\n - 表单\n - 联动\nextra: |\n\n ::: warning\n 请确保列表项的`value`值是字符串，使用数字会出错。\n
    \n 如果你的业务接口返回数字值为数字，需要你先处理成字符串；同样，获取到值时为字符串，你需要自己转换成数字。\n :::\n\n 非联动情况下，列表数据格式示例：\n\n ``` js\n // data\n [['小米', 'iPhone', '华为', '情怀', '三星', '其他', '不告诉你'], ['小米1', 'iPhone2', '华为3', '情怀4', '三星5', '其他6', '不告诉你7']]\n\n // 或者使用 name => value 的形式\n [[{\n name: '2019届5班',\n value: '1'\n }, {\n name: '2019届4班',\n value: '2'\n }]]\n\n // value\n ['小米', '小米1']\n ```\n\n 联动时，列表数据格式示例：\n\n ``` js\n // data\n [{\n name: '中国',\n value: 'china',\n parent: '0' // 为一级时可以不写 parent，但是此时允许为数字 0、空字符串或者字符串 '0'\n }, {\n name: '美国',\n value: 'USA',\n parent: '0'\n }, {\n name: '广东',\n value: 'china001',\n parent: 'china'\n }, {\n name: '广西',\n value: 'china002',\n parent: 'china'\n }, {\n name: '美国001',\n value: 'usa001',\n parent: 'USA'\n }, {\n name: '美国002',\n value: 'usa002',\n parent: 'USA'\n }, {\n name: '广州',\n value: 'gz',\n parent: 'china001'\n }, {\n name: '深圳',\n value: 'sz',\n parent: 'china001'\n }, {\n name: '广西001',\n value: 'gx001',\n parent: 'china002'\n }, {\n name: '广西002',\n value: 'gx002',\n parent: 'china002'\n }, {\n name: '美国001_001',\n value: '0003',\n parent: 'usa001'\n }, {\n name: '美国001_002',\n value: '0004',\n parent: 'usa001'\n }, {\n name: '美国002_001',\n value: '0005',\n parent: 'usa002'\n }, {\n name: '美国002_002',\n value: '0006',\n parent: 'usa002'\n }]\n ```\n\nprops:\n value:\n type: Array\n default: ''\n en: 'picker value, use `v-model` for binding'\n zh-CN: '表单值，使用 `v-model` 绑定'\n data:\n type: Array\n default: ''\n en: array list\n zh-CN: 选项列表数据\n columns:\n type: Number\n en: how many columns in chained-mode\n zh-CN: 指定联动模式下的列数，当不指定时表示非联动\n fixed-columns:\n type: Number\n en: how many columns will show\n zh-CN: 指定显示多少列，隐藏多余的\n column-width:\n type: Array\n version: v2.2.0\n en: 'custom width for each picker column, for example for a 3-column picker: [1/2, 1/5] '\n zh-CN: 定义每一列宽度，只需要定义除最后一列宽度，最后一列自动宽度， 比如对于3列选择，可以这样：[1/2, 1/5]\nevents:\n on-change:\n params: '`(value)`'\n en: emits when value is changed\n zh-CN: 选择值变化时触发\nmethods:\n getNameValues:\n version: v2.3.1\n en: get labels of current value\n zh-CN: 根据 value 获取字面值\nchanges:\n v2.9.4:\n en:\n - '[fix] Fix chain mode get value is wrong when quickly scroll multiple children.'\n zh-CN:\n - '[fix] 修复多级联动模式下，快速滚动多个项，取值不正确'\n 2.9.3:\n en:\n - '[fix] fix Uncaught TypeError: Cannot assign to read only property exports of object #3386'\n zh-CN:\n - '[fix] 修复 fix Uncaught TypeError: Cannot assign to read only property exports of object #3386'\n v2.9.0:\n en:\n - '[enhance] show warning when picker value is not a string #2568'\n zh-CN:\n - '[enhance] 开发模式下 picker 数据非字符串时显示提示 #2568'\n v2.7.9:\n en:\n - '[fix] fix typo item_class => itemClass #2457'\n zh-CN:\n - '[fix] 修正 itemClass 拼写错误 #2457'\n v2.7.8:\n en:\n - '[fix] Fix chain mode get value is wrong when the children is empty data.'\n zh-CN:\n - '[fix] 修复多级联动模式下，子代没有数据时，取值不正确。'\n v2.7.3:\n en:\n - '[enhance] add development tip for chained-mode picker without specifying prop:columns'\n zh-CN:\n - '[enhance] 渲染出错时提示是否联动数据忘了指定列数'\n v2.7.0:\n en:\n - '[change] picker move distance do not respect html[data-dpr] by default #2082 #1979'\n zh-CN:\n - '[change] picker 移动距离不再遵从 html[data-dpr]，需使用 ConfigPlugin 配置 #2082 #1979'\n v2.6.2:\n en:\n - '[enhance] scroll distance respects html[data-dpr] #1979'\n zh-CN:\n - '[enhance] 滚动距离支持从 html[data-dpr] 换算 #1979'\n v2.3.1:\n en:\n - '[feature] Add getNameValues Method #1418'\n zh-CN:\n - '[feature] 增加获取对应文字方法 #1418'\n v2.2.1-rc.3:\n en:\n - '[fix] Fix no re-rendering when value is set to empty array. #1230'\n zh-CN:\n - '[fix] 修复当值设为空数组时不会重新渲染的问题. #1230'\n v2.1.1-rc.7:\n en:\n - '[enhance] Support PC mouse drag #1039 @michael829'\n zh-CN:\n - '[enhance] 支持 PC 上鼠标选择 #1039 @michael829'\n v2.4.1:\n en:\n - '[fix] Fix a bug caused by unexpected end of json value #1584'\n zh-CN:\n - '[fix] 修复json格式不正确引起的bug #1584'\n" }, { "path": "src/components/picker/scroller.css", "content": ".scroller-component {\n display: block;\n position: relative;\n height: 238px;\n overflow: hidden;\n width: 100%;\n}\n\n.scroller-content {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n z-index: 1;\n}\n\n.scroller-mask {\n position: absolute;\n left: 0;\n top: 0;\n height: 100%;\n margin: 0 auto;\n width: 100%;\n z-index: 3;\n transform: translateZ(0px);\n background-image:\n -webkit-linear-gradient(top, rgba(255,255,255,0.95), rgba(255,255,255,0.6)),\n -webkit-linear-gradient(bottom, rgba(255,255,255,0.95), rgba(255,255,255,0.6));\n background-image:\n linear-gradient(to bottom, rgba(255,255,255,0.95), rgba(255,255,255,0.6)),\n linear-gradient(to top, rgba(255,255,255,0.95), rgba(255,255,255,0.6));\n background-position: top, bottom;\n background-size: 100% 102px;\n background-repeat: no-repeat;\n}\n\n.scroller-item {\n text-align: center;\n font-size: 16px;\n height: 34px;\n line-height: 34px;\n color: #000;\n}\n\n.scroller-indicator {\n width: 100%;\n height: 34px;\n position: absolute;\n left: 0;\n top: 102px;\n z-index: 3;\n background-image:\n -webkit-linear-gradient(top, #d0d0d0, #d0d0d0, transparent, transparent),\n -webkit-linear-gradient(bottom, #d0d0d0, #d0d0d0, transparent, transparent);\n background-image:\n linear-gradient(to bottom, #d0d0d0, #d0d0d0, transparent, transparent),\n linear-gradient(to top, #d0d0d0, #d0d0d0, transparent, transparent);\n background-position: top, bottom;\n background-size: 100% 1px;\n background-repeat: no-repeat;\n}\n.scroller-item {\n line-clamp: 1;\n -webkit-line-clamp: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n}" }, { "path": "src/components/picker/scroller.js", "content": "/*\n* Anima Scroller\n* Based Zynga Scroller (http://github.com/zynga/scroller)\n* Copyright 2011, Zynga Inc.\n* Licensed under the MIT License.\n* https://raw.github.com/zynga/scroller/master/MIT-LICENSE.txt\n*/\n\nconst isBrowser = typeof window === 'object'\n\nconst TEMPLATE = `\n
    \n
    \n
    \n
    \n
    \n`\n\nimport Animate from './animate'\nimport {\n getElement,\n getComputedStyle,\n easeOutCubic,\n easeInOutCubic\n} from './util'\nimport passiveSupported from '../../libs/passive_supported'\n\nconst getDpr = function () {\n let dpr = 1\n if (isBrowser) {\n if (window.VUX_CONFIG && window.VUX_CONFIG.$picker && window.VUX_CONFIG.$picker.respectHtmlDataDpr) {\n dpr = document.documentElement.getAttribute('data-dpr') || 1\n }\n }\n return dpr\n}\n\nconst Scroller = function (container, options) {\n const self = this\n\n self.isDestroy = false\n\n self.dpr = getDpr()\n\n options = options || {}\n\n self.options = {\n itemClass: 'scroller-item',\n onSelect () {},\n defaultValue: 0,\n data: []\n }\n\n for (var key in options) {\n if (options[key] !== undefined) {\n self.options[key] = options[key]\n }\n }\n\n self.__container = getElement(container)\n\n var tempContainer = document.createElement('div')\n tempContainer.innerHTML = options.template || TEMPLATE\n\n var component = self.__component = tempContainer.querySelector('[data-role=component]')\n var content = self.__content = component.querySelector('[data-role=content]')\n var indicator = component.querySelector('[data-role=indicator]')\n\n var data = self.options.data\n var html = ''\n if (data.length && data[0].constructor === Object) {\n data.forEach(function (row) {\n html += '
    ' + row.name + '
    '\n })\n } else {\n data.forEach(function (val) {\n html += '
    ' + val + '
    '\n })\n }\n content.innerHTML = html\n\n self.__container.appendChild(component)\n\n self.__itemHeight = parseFloat(getComputedStyle(indicator, 'height'), 10)\n\n self.__callback = options.callback || function (top) {\n const distance = -top * self.dpr\n content.style.webkitTransform = 'translate3d(0, ' + distance + 'px, 0)'\n content.style.transform = 'translate3d(0, ' + distance + 'px, 0)'\n }\n\n var rect = component.getBoundingClientRect()\n\n self.__clientTop = (rect.top + component.clientTop) || 0\n\n self.__setDimensions(component.clientHeight, content.offsetHeight)\n\n if (component.clientHeight === 0) {\n self.__setDimensions(parseFloat(getComputedStyle(component, 'height'), 10), 204)\n }\n self.select(self.options.defaultValue, false)\n\n const touchStartHandler = function (e) {\n if (e.target.tagName.match(/input|textarea|select/i)) {\n return\n }\n e.preventDefault()\n self.__doTouchStart(e, e.timeStamp)\n }\n\n const touchMoveHandler = function (e) {\n self.__doTouchMove(e, e.timeStamp)\n }\n\n const touchEndHandler = function (e) {\n self.__doTouchEnd(e.timeStamp)\n }\n\n const willPreventDefault = passiveSupported ? {\n passive: false\n } : false\n const willNotPreventDefault = passiveSupported ? {\n passive: true\n } : false\n\n component.addEventListener('touchstart', touchStartHandler, willPreventDefault)\n component.addEventListener('mousedown', touchStartHandler, willPreventDefault)\n\n component.addEventListener('touchmove', touchMoveHandler, willNotPreventDefault)\n component.addEventListener('mousemove', touchMoveHandler, willNotPreventDefault)\n\n component.addEventListener('touchend', touchEndHandler, willNotPreventDefault)\n component.addEventListener('mouseup', touchEndHandler, willNotPreventDefault)\n}\n\nvar members = {\n value: null,\n __prevValue: null,\n __isSingleTouch: false,\n __isTracking: false,\n __didDecelerationComplete: false,\n __isGesturing: false,\n __isDragging: false,\n __isDecelerating: false,\n __isAnimating: false,\n __clientTop: 0,\n __clientHeight: 0,\n __contentHeight: 0,\n __itemHeight: 0,\n __scrollTop: 0,\n __minScrollTop: 0,\n __maxScrollTop: 0,\n __scheduledTop: 0,\n __lastTouchTop: null,\n __lastTouchMove: null,\n __positions: null,\n __minDecelerationScrollTop: null,\n __maxDecelerationScrollTop: null,\n __decelerationVelocityY: null,\n\n __setDimensions (clientHeight, contentHeight) {\n var self = this\n\n self.__clientHeight = clientHeight\n self.__contentHeight = contentHeight\n\n var totalItemCount = self.options.data.length\n var clientItemCount = Math.round(self.__clientHeight / self.__itemHeight)\n\n self.__minScrollTop = -self.__itemHeight * (clientItemCount / 2)\n self.__maxScrollTop = self.__minScrollTop + totalItemCount * self.__itemHeight - 0.1\n },\n\n selectByIndex (index, animate) {\n var self = this\n if (index < 0 || index > self.__content.childElementCount - 1) {\n return\n }\n self.__scrollTop = self.__minScrollTop + index * self.__itemHeight\n\n self.scrollTo(self.__scrollTop, animate)\n\n self.__selectItem(self.__content.children[index])\n },\n\n select (value, animate) {\n var self = this\n\n var children = self.__content.children\n for (var i = 0, len = children.length; i < len; i++) {\n if (decodeURI(JSON.parse(children[i].dataset.value).value) === value) {\n self.selectByIndex(i, animate)\n return\n }\n }\n\n self.selectByIndex(0, animate)\n },\n\n getValue () {\n return this.value\n },\n\n scrollTo (top, animate) {\n var self = this\n\n animate = (animate === undefined) ? true : animate\n\n if (self.__isDecelerating) {\n Animate.stop(self.__isDecelerating)\n self.__isDecelerating = false\n }\n\n top = Math.round((top / self.__itemHeight).toFixed(5)) * self.__itemHeight\n top = Math.max(Math.min(self.__maxScrollTop, top), self.__minScrollTop)\n\n if (top === self.__scrollTop || !animate) {\n self.__publish(top)\n self.__scrollingComplete()\n return\n }\n self.__publish(top, 250)\n },\n\n destroy () {\n this.isDestroy = true\n this.__component.parentNode && this.__component.parentNode.removeChild(this.__component)\n },\n\n __selectItem (selectedItem) {\n var self = this\n\n var selectedItemClass = self.options.itemClass + '-selected'\n var lastSelectedElem = self.__content.querySelector('.' + selectedItemClass)\n if (lastSelectedElem) {\n lastSelectedElem.classList.remove(selectedItemClass)\n }\n selectedItem.classList.add(selectedItemClass)\n\n if (self.value !== null) {\n self.__prevValue = self.value\n }\n\n self.value = decodeURI(JSON.parse(selectedItem.dataset.value).value)\n },\n\n __scrollingComplete () {\n var self = this\n\n var index = Math.round((self.__scrollTop - self.__minScrollTop - self.__itemHeight / 2) / self.__itemHeight)\n\n self.__selectItem(self.__content.children[index])\n\n if (self.__prevValue !== null && self.__prevValue !== self.value && !self.isDestroy) {\n self.options.onSelect(self.value)\n }\n },\n\n __doTouchStart (ev, timeStamp) {\n const touches = ev.touches\n const self = this\n const target = ev.touches ? ev.touches[0] : ev\n const isMobile = !!ev.touches\n\n if (ev.touches && touches.length == null) {\n throw new Error('Invalid touch list: ' + touches)\n }\n if (timeStamp instanceof Date) {\n timeStamp = timeStamp.valueOf()\n }\n if (typeof timeStamp !== 'number') {\n throw new Error('Invalid timestamp value: ' + timeStamp)\n }\n\n self.__interruptedAnimation = true\n\n if (self.__isDecelerating) {\n Animate.stop(self.__isDecelerating)\n self.__isDecelerating = false\n self.__interruptedAnimation = true\n }\n\n if (self.__isAnimating) {\n Animate.stop(self.__isAnimating)\n self.__isAnimating = false\n self.__interruptedAnimation = true\n }\n\n // Use center point when dealing with two fingers\n var currentTouchTop\n var isSingleTouch = (isMobile && touches.length === 1) || !isMobile\n if (isSingleTouch) {\n currentTouchTop = target.pageY\n } else {\n currentTouchTop = Math.abs(target.pageY + touches[1].pageY) / 2\n }\n\n self.__initialTouchTop = currentTouchTop\n self.__lastTouchTop = currentTouchTop\n self.__lastTouchMove = timeStamp\n self.__lastScale = 1\n self.__enableScrollY = !isSingleTouch\n self.__isTracking = true\n self.__didDecelerationComplete = false\n self.__isDragging = !isSingleTouch\n self.__isSingleTouch = isSingleTouch\n self.__positions = []\n },\n\n __doTouchMove (ev, timeStamp, scale) {\n const self = this\n const touches = ev.touches\n const target = ev.touches ? ev.touches[0] : ev\n const isMobile = !!ev.touches\n\n if (touches && touches.length == null) {\n throw new Error('Invalid touch list: ' + touches)\n }\n if (timeStamp instanceof Date) {\n timeStamp = timeStamp.valueOf()\n }\n if (typeof timeStamp !== 'number') {\n throw new Error('Invalid timestamp value: ' + timeStamp)\n }\n\n // Ignore event when tracking is not enabled (event might be outside of element)\n if (!self.__isTracking) {\n return\n }\n\n var currentTouchTop\n\n // Compute move based around of center of fingers\n if (isMobile && touches.length === 2) {\n currentTouchTop = Math.abs(target.pageY + touches[1].pageY) / 2\n } else {\n currentTouchTop = target.pageY\n }\n\n var positions = self.__positions\n\n // Are we already is dragging mode?\n if (self.__isDragging) {\n var moveY = currentTouchTop - self.__lastTouchTop\n var scrollTop = self.__scrollTop\n\n if (self.__enableScrollY) {\n scrollTop -= moveY\n\n var minScrollTop = self.__minScrollTop\n var maxScrollTop = self.__maxScrollTop\n\n if (scrollTop > maxScrollTop || scrollTop < minScrollTop) {\n // Slow down on the edges\n if (scrollTop > maxScrollTop) {\n scrollTop = maxScrollTop\n } else {\n scrollTop = minScrollTop\n }\n }\n }\n\n // Keep list from growing infinitely (holding min 10, max 20 measure points)\n if (positions.length > 40) {\n positions.splice(0, 20)\n }\n\n // Track scroll movement for decleration\n positions.push(scrollTop, timeStamp)\n\n // Sync scroll position\n self.__publish(scrollTop)\n\n // Otherwise figure out whether we are switching into dragging mode now.\n } else {\n var minimumTrackingForScroll = 0\n var minimumTrackingForDrag = 5\n\n var distanceY = Math.abs(currentTouchTop - self.__initialTouchTop)\n\n self.__enableScrollY = distanceY >= minimumTrackingForScroll\n\n positions.push(self.__scrollTop, timeStamp)\n\n self.__isDragging = self.__enableScrollY && (distanceY >= minimumTrackingForDrag)\n\n if (self.__isDragging) {\n self.__interruptedAnimation = false\n }\n }\n\n // Update last touch positions and time stamp for next event\n self.__lastTouchTop = currentTouchTop\n self.__lastTouchMove = timeStamp\n self.__lastScale = scale\n },\n\n __doTouchEnd (timeStamp) {\n var self = this\n\n if (timeStamp instanceof Date) {\n timeStamp = timeStamp.valueOf()\n }\n if (typeof timeStamp !== 'number') {\n throw new Error('Invalid timestamp value: ' + timeStamp)\n }\n\n // Ignore event when tracking is not enabled (no touchstart event on element)\n // This is required as this listener ('touchmove') sits on the document and not on the element itself.\n if (!self.__isTracking) {\n return\n }\n\n // Not touching anymore (when two finger hit the screen there are two touch end events)\n self.__isTracking = false\n\n // Be sure to reset the dragging flag now. Here we also detect whether\n // the finger has moved fast enough to switch into a deceleration animation.\n if (self.__isDragging) {\n // Reset dragging flag\n self.__isDragging = false\n\n // Start deceleration\n // Verify that the last move detected was in some relevant time frame\n if (self.__isSingleTouch && (timeStamp - self.__lastTouchMove) <= 100) {\n // Then figure out what the scroll position was about 100ms ago\n var positions = self.__positions\n var endPos = positions.length - 1\n var startPos = endPos\n\n // Move pointer to position measured 100ms ago\n for (var i = endPos; i > 0 && positions[i] > (self.__lastTouchMove - 100); i -= 2) {\n startPos = i\n }\n\n // If start and stop position is identical in a 100ms timeframe,\n // we cannot compute any useful deceleration.\n if (startPos !== endPos) {\n // Compute relative movement between these two points\n var timeOffset = positions[endPos] - positions[startPos]\n var movedTop = self.__scrollTop - positions[startPos - 1]\n\n // Based on 50ms compute the movement to apply for each render step\n self.__decelerationVelocityY = movedTop / timeOffset * (1000 / 60)\n\n // How much velocity is required to start the deceleration\n var minVelocityToStartDeceleration = 4\n\n // Verify that we have enough velocity to start deceleration\n if (Math.abs(self.__decelerationVelocityY) > minVelocityToStartDeceleration) {\n self.__startDeceleration(timeStamp)\n }\n }\n }\n }\n\n if (!self.__isDecelerating) {\n self.scrollTo(self.__scrollTop)\n }\n\n // Fully cleanup list\n self.__positions.length = 0\n },\n\n // Applies the scroll position to the content element\n __publish (top, animationDuration) {\n var self = this\n\n // Remember whether we had an animation, then we try to continue based on the current \"drive\" of the animation\n var wasAnimating = self.__isAnimating\n if (wasAnimating) {\n Animate.stop(wasAnimating)\n self.__isAnimating = false\n }\n\n if (animationDuration) {\n // Keep scheduled positions for scrollBy functionality\n self.__scheduledTop = top\n\n var oldTop = self.__scrollTop\n var diffTop = top - oldTop\n\n var step = function (percent, now, render) {\n self.__scrollTop = oldTop + (diffTop * percent)\n // Push values out\n if (self.__callback) {\n self.__callback(self.__scrollTop)\n }\n }\n\n var verify = function (id) {\n return self.__isAnimating === id\n }\n\n var completed = function (renderedFramesPerSecond, animationId, wasFinished) {\n if (animationId === self.__isAnimating) {\n self.__isAnimating = false\n }\n if (self.__didDecelerationComplete || wasFinished) {\n self.__scrollingComplete()\n }\n }\n\n // When continuing based on previous animation we choose an ease-out animation instead of ease-in-out\n self.__isAnimating = Animate.start(step, verify, completed, animationDuration, wasAnimating ? easeOutCubic : easeInOutCubic)\n } else {\n self.__scheduledTop = self.__scrollTop = top\n // Push values out\n if (self.__callback) {\n self.__callback(top)\n }\n }\n },\n\n // Called when a touch sequence end and the speed of the finger was high enough to switch into deceleration mode.\n __startDeceleration (timeStamp) {\n var self = this\n\n self.__minDecelerationScrollTop = self.__minScrollTop\n self.__maxDecelerationScrollTop = self.__maxScrollTop\n\n // Wrap class method\n var step = function (percent, now, render) {\n self.__stepThroughDeceleration(render)\n }\n\n // How much velocity is required to keep the deceleration running\n var minVelocityToKeepDecelerating = 0.5\n\n // Detect whether it's still worth to continue animating steps\n // If we are already slow enough to not being user perceivable anymore, we stop the whole process here.\n var verify = function () {\n var shouldContinue = Math.abs(self.__decelerationVelocityY) >= minVelocityToKeepDecelerating\n if (!shouldContinue) {\n self.__didDecelerationComplete = true\n }\n return shouldContinue\n }\n\n var completed = function (renderedFramesPerSecond, animationId, wasFinished) {\n self.__isDecelerating = false\n if (self.__scrollTop <= self.__minScrollTop || self.__scrollTop >= self.__maxScrollTop) {\n self.scrollTo(self.__scrollTop)\n return\n }\n if (self.__didDecelerationComplete) {\n self.__scrollingComplete()\n }\n }\n\n // Start animation and switch on flag\n self.__isDecelerating = Animate.start(step, verify, completed)\n },\n\n // Called on every step of the animation\n __stepThroughDeceleration (render) {\n var self = this\n\n var scrollTop = self.__scrollTop + self.__decelerationVelocityY\n\n var scrollTopFixed = Math.max(Math.min(self.__maxDecelerationScrollTop, scrollTop), self.__minDecelerationScrollTop)\n if (scrollTopFixed !== scrollTop) {\n scrollTop = scrollTopFixed\n self.__decelerationVelocityY = 0\n }\n\n if (Math.abs(self.__decelerationVelocityY) <= 1) {\n if (Math.abs(scrollTop % self.__itemHeight) < 1) {\n self.__decelerationVelocityY = 0\n }\n } else {\n self.__decelerationVelocityY *= 0.95\n }\n\n self.__publish(scrollTop)\n }\n}\n\n// Copy over members to prototype\nfor (var key in members) {\n Scroller.prototype[key] = members[key]\n}\n\nexport default Scroller\n" }, { "path": "src/components/picker/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('Picker', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('picker')\n })\n})\n" }, { "path": "src/components/picker/util.js", "content": "export function getElement (expr) {\n return (typeof expr === 'string') ? document.querySelector(expr) : expr\n}\n\nexport function getComputedStyle (el, key) {\n var computedStyle = window.getComputedStyle(el)\n return computedStyle[key] || ''\n}\n\n// Easing Equations (c) 2003 Robert Penner, all rights reserved.\n// Open source under the BSD License.\nexport function easeOutCubic (pos) {\n return (Math.pow((pos - 1), 3) + 1)\n}\n\nexport function easeInOutCubic (pos) {\n if ((pos /= 0.5) < 1) {\n return 0.5 * Math.pow(pos, 3)\n }\n return 0.5 * (Math.pow((pos - 2), 3) + 2)\n}\n" }, { "path": "src/components/popover/DemoIndex.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/popover/index.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/popover/metas.yml", "content": "category:\n en: Feedback\n zh-CN: 弹窗提示\nicon: ''\ntags:\n en:\n - popover\n - float menu\n - tooltip\n zh-CN:\n - 弹窗\n - 菜单\n - 提示\nprops:\n content:\n type: String\n default: ''\n en: content of the popover\n zh-CN: 弹出窗口内容\n placement:\n type: String\n default: ''\n en: position of the popover\n zh-CN: 弹出窗口位置\n enum:\n - top\n - right\n - bottom\n - left\n gutter:\n type: Number\n default: 5\n en: the gutter between trigger element and popover arrow\n zh-CN: 箭头和触发元素之间的距离\nslots:\n default:\n en: trigger element\n zh-CN: 触发元素\n content:\n en: content of the popover\n zh-CN: 弹窗内容\nevents:\n on-show:\n en: triggers when popover shows\n zh-CN: 弹窗显示时触发\n on-hide:\n en: triggers when popover hides\n zh-CN: 弹窗隐藏时触发\nchanges:\n v2.9.0:\n en:\n - '[fix] fix position in fixed container #2590'\n zh-CN:\n - '[fix] 修复在 fixed 容器里定位不正确 #2590'\n v2.0.0:\n en:\n - '[todo] wrong position if changing locale'\n zh-CN:\n - '[todo] 当切换i18n语言时，位置不正确'\n\n" }, { "path": "src/components/popover/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('Popover', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('popover')\n })\n})\n" }, { "path": "src/components/popup/index.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/popup/metas.yml", "content": "category:\n en: Feedback\n zh-CN: 弹窗提示\nicon: ''\ntags:\n en:\n - popup\n - dialog\n zh-CN:\n - 弹窗\nprops:\n value:\n type: Boolean\n en: visibility of popup, use `v-model` for binding\n zh-CN: 是否关闭，使用`v-model`绑定\n height:\n type: String\n default: 'auto'\n en: popup height, works when position is top or bottom\n zh-CN: 高度，设置`100%`为整屏高度。当 position 为 top 或者 bottom 时有效。\n hide-on-blur:\n type: Boolean\n default: true\n en: if closing popup when mask being clicked\n zh-CN: 点击遮罩时是否自动关闭\n is-transparent:\n version: v2.1.1-rc.9\n type: Boolean\n default: false\n en: if using transparent background\n zh-CN: 是否为透明背景\n width:\n version: v2.2.1-rc.6\n type: String\n default: auto\n en: if you want to set 100% width, you should use this prop. only works when position is left or right\n zh-CN: 设置 100% 宽度必须使用该属性。在 position 为 left 或者 right 时有效。\n position:\n version: v2.2.1-rc.6\n type: String\n default: bottom\n en: popup position, shoule be one of ['left', 'right', 'top', 'bottom']\n zh-CN: 位置，可取值 ['left', 'right', 'top', 'bottom']\n show-mask:\n version: v2.2.1-rc.6\n type: Boolean\n default: true\n en: whether show mask\n zh-CN: 是否显示遮罩\n popup-style:\n version: v2.5.2\n type: Object\n en: popup style\n zh-CN: 弹窗样式，可以用于强制指定 z-index\n hide-on-deactivated:\n version: v2.5.5\n type: Boolean\n default: true\n en: whether hide popup on deactived event when using keep-alive\n zh-CN: 是否在 deactived 事件触发时自动关闭，避免在路由切换时依然显示弹窗\n should-rerender-on-show:\n version: v2.9.0\n type: Boolean\n default: false\n en: whether rerender body on show\n zh-CN: 是否在显示时重新渲染内容区域(以及滚动到顶部)，适用于每次显示弹窗需要重新获取数据初始化的场景\n should-scroll-top-on-show:\n version: v2.9.0\n type: Boolean\n default: false\n en: whether scroll top on show，add class vux-scrollable if you customize the scrollable div\n zh-CN: 是否在显示时自动滚动到顶部，当你自定义滚动容器时需要手动为该容器加上类名 vux-scrollable\nevents:\n on-hide:\n en: emits when then popup is closed\n zh-CN: 关闭时触发\n on-show:\n en: emits when the popup shows\n zh-CN: 显示时触发\n on-first-show:\n en: emits at the first time the popup shows\n zh-CN: 第一次显示时触发，可以在该事件回调里初始化数据或者界面\nslots:\n default:\n en: content body\n zh-CN: 弹窗主体内容\nchanges:\n v2.9.1:\n en:\n - '[fix] fixed popup has black border on the right #2651'\n zh-CN:\n - '[fix] 修正弹出框右边有黑边 #2651'\n v2.9.0:\n en:\n - '[feature] support prop:should-rerender-on-show for forcing rerendering #2598'\n - '[feature] support prop:should-scroll-top-on-show for forcing scrolling top #2598'\n zh-CN:\n - '[feature] 支持 should-rerender-on-show 实现每次打开重新渲染 #2598'\n - '[feature] 支持自动滚动到顶部 #2598'\n v2.5.12:\n en:\n - '[fix] clean vux-modal-open on beforeDestroy and deactivated #1921'\n zh-CN:\n - '[fix] 在 beforeDestroy 和 deactivated 事件中清除设置于 body 上的 vux-modal-open 类名 #1921'\n v2.5.11:\n en:\n - '[fix] add vux-modal-open only when global config:$layout is VIEW_BOX #1893'\n zh-CN:\n - '[fix] 仅在全局配置 $layout = VIEW_BOX 时用 fixed body 的形式阻止页面滚动 #1893'\n v2.5.10:\n en:\n - '[fix] Fix class helper typo issue #1893'\n zh-CN:\n - '[fix] 修复 class 工具函数拼写错误 #1893'\n v2.5.9:\n en:\n - '[fix] Fix layout errors when body not set 100% width #1867'\n zh-CN:\n - '[feature] 修复当body没有设置100%宽度时出现的布局错乱问题 #1867'\n v2.5.5:\n en:\n - '[feature] Auto hide popup on deactived #1774'\n zh-CN:\n - '[feature] 在 deactived 事件触发时自动关闭，避免在路由切换时依然显示弹窗，可以使用 prop:hide-on-deactivated 进行禁用 #1774'\n v2.5.2:\n en:\n - '[feature] Add prop:popup-style #1656'\n zh-CN:\n - '[feature] 支持弹窗样式设置 prop:popup-style #1656'\n v2.3.7:\n en:\n - '[fix] Fix missing mask when initial value is true #1555'\n zh-CN:\n - '[fix] 修复默认值为 true 时遮罩没有显示的问题 #1555'\n v2.3.3:\n en:\n - '[enhance] Set max-height:100% by default'\n - '[feature] Support prop:max-height'\n - '[fix] disable mask scrolling on mobile #1475 @xiaobinhong1'\n zh-CN:\n - '[enhance] 默认 max-height 设为 100%，避免不设置高度时内容过长无法滚动'\n - '[feature] 支持 prop:max-height'\n - '[fix] 禁止遮罩层在手机上滚动 #1475 @xiaobinhong1'\n v2.2.2:\n en:\n - '[fix] Fix mask closing issue in some situation. #1312'\n zh-CN:\n - '[fix] 修复在某些情况下遮罩被错误关闭的问题 #1312'\n v2.2.1-rc.6:\n en:\n - '[fix] Fix popup classname get lost'\n - '[feature] Support prop:show-mask'\n - '[feature] Support prop:position'\n - '[feature] Support prop:width'\n zh-CN:\n - '[fix] 修复 popup 类名丢失问题'\n - '[feature] 支持 prop:show-mask 隐藏遮罩'\n - '[feature] 支持 prop:position 设定位置'\n - '[feature] 支持 prop:width 设定左右位置时的宽度'\n v2.1.1-rc.11:\n en:\n - '[fix] Fix wrong overflowScrolling when mask is disabled'\n zh-CN:\n - '[fix] 修复遮罩禁用点击时错误设置 overflowScrolling 的问题'\n v2.1.1-rc.9:\n en:\n - '[enhance] Better mask transition'\n - '[feature] Support tranparent background'\n - '[feature] Support less variable: @popup-background-color'\n zh-CN:\n - '[enhance] 更流畅的遮罩层动画'\n - '[feature] 支持透明背景'\n - '[feature] 支持背影颜色变量 @popup-background-color'\n v2.1.1-rc.6:\n en:\n - '[fix] Fix wrong setting of overflow-scrolling when using multi popup on Safari #1015 @think2011'\n zh-CN:\n - '[fix] 修复 Safari 上关闭第二个popup导致的问题 #1015 @think2011'\n v2.1.1-rc.1:\n en:\n - '[fix] Fix overflow-scrolling setting in safari #311 @linhaobin'\n zh-CN:\n - '[fix] 修复 `overflow-scrolling` 设置逻辑遗漏问题 #311 @linhaobin'\n \n" }, { "path": "src/components/popup/popup.js", "content": "import passiveSupported from '../../libs/passive_supported'\nconst isBrowser = typeof window === 'object'\n\n// not a good way but works well\nif (isBrowser) {\n window.__$vuxPopups = window.__$vuxPopups || {}\n}\n\nconst popupDialog = function (option) {\n if (!isBrowser) {\n return\n }\n this.uuid = Math.random().toString(36).substring(3, 8)\n this.params = {}\n if (Object.prototype.toString.call(option) === '[object Object]') {\n this.params = {\n hideOnBlur: option.hideOnBlur,\n onOpen: option.onOpen || function () {},\n onClose: option.onClose || function () {},\n showMask: option.showMask\n }\n }\n if (!!document.querySelectorAll('.vux-popup-mask').length <= 0) {\n this.divMask = document.createElement('a')\n this.divMask.className = 'vux-popup-mask'\n this.divMask.dataset.uuid = ''\n this.divMask.href = 'javascript:void(0)'\n document.body.appendChild(this.divMask)\n }\n let div\n if (!option.container) {\n div = document.createElement('div')\n } else {\n div = option.container\n }\n\n div.className += ` vux-popup-dialog vux-popup-dialog-${this.uuid}`\n if (!this.params.hideOnBlur) {\n div.className += ' vux-popup-mask-disabled'\n }\n\n this.div = div\n\n if (!option.container) {\n document.body.appendChild(div)\n }\n this.container = document.querySelector('.vux-popup-dialog-' + this.uuid)\n this.mask = document.querySelector('.vux-popup-mask')\n this.mask.dataset.uuid += `,${this.uuid}`\n this._bindEvents()\n option = null\n this.containerHandler = () => {\n this.mask && !/show/.test(this.mask.className) && setTimeout(() => {\n !/show/.test(this.mask.className) && (this.mask.style['zIndex'] = -1)\n }, 200)\n }\n\n this.container && this.container.addEventListener('webkitTransitionEnd', this.containerHandler)\n this.container && this.container.addEventListener('transitionend', this.containerHandler)\n}\n\npopupDialog.prototype.onClickMask = function () {\n this.params.hideOnBlur && this.params.onClose()\n}\n\npopupDialog.prototype._bindEvents = function () {\n if (this.params.hideOnBlur) {\n this.mask.addEventListener('click', this.onClickMask.bind(this), false)\n this.mask.addEventListener('touchmove', e => e.preventDefault(), passiveSupported ? {passive: false} : false)\n }\n}\n\npopupDialog.prototype.show = function () {\n if (this.params.showMask) {\n this.mask.classList.add('vux-popup-show')\n this.mask.style['zIndex'] = 500\n }\n this.container.classList.add('vux-popup-show')\n this.params.onOpen && this.params.onOpen(this)\n if (isBrowser) {\n window.__$vuxPopups[this.uuid] = 1\n }\n}\n\npopupDialog.prototype.hide = function (shouldCallback = true) {\n this.container.classList.remove('vux-popup-show')\n if (!document.querySelector('.vux-popup-dialog.vux-popup-show')) {\n this.mask.classList.remove('vux-popup-show')\n setTimeout(() => {\n this.mask && !/show/.test(this.mask.className) && (this.mask.style['zIndex'] = -1)\n }, 400)\n }\n shouldCallback === false && this.params.onClose && this.params.hideOnBlur && this.params.onClose(this)\n this.isShow = false\n if (isBrowser) {\n delete window.__$vuxPopups[this.uuid]\n }\n}\n\npopupDialog.prototype.destroy = function () {\n this.mask.dataset.uuid = this.mask.dataset.uuid.replace(new RegExp(`,${this.uuid}`, 'g'), '')\n if (!this.mask.dataset.uuid) {\n this.mask.removeEventListener('click', this.onClickMask.bind(this), false)\n this.mask && this.mask.parentNode && this.mask.parentNode.removeChild(this.mask)\n } else {\n this.hide()\n }\n this.container.removeEventListener('webkitTransitionEnd', this.containerHandler)\n this.container.removeEventListener('transitionend', this.containerHandler)\n if (isBrowser) {\n delete window.__$vuxPopups[this.uuid]\n }\n}\n\nexport default popupDialog\n" }, { "path": "src/components/popup/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('Popup', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('popup')\n })\n})\n" }, { "path": "src/components/popup-header/index.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/popup-header/metas.yml", "content": "category:\n en: Feedback\n zh-CN: 弹窗提示\nicon: ''\nprops:\n left-text:\n version: v2.5.2\n en: left text\n zh-CN: 左侧文字\n right-text:\n version: v2.5.2\n en: right text\n zh-CN: 右侧文字\n title:\n version: v2.5.2\n en: title\n zh-CN: 标题\n show-bottom-border:\n version: v2.5.2\n en: whether show bottom border\n zh-CN: 是否显示底部边框\nevents:\n on-click-left:\n version: v2.5.2\n en: emits when left text is clicked\n zh-CN: 左侧文字点击时触发\n on-click-right:\n version: v2.5.2\n en: emits when right text is clicked\n zh-CN: 右侧文字点击时触发\nchanges:\n v2.5.9:\n en:\n - '[fix] fix wrong slot name'\n zh-CN:\n - '[fix] 修复错误的 slot 名字'\n v2.5.2:\n en:\n - '[feature] new component'\n zh-CN:\n - '[feature] 新组件 popup-header, 配合 popup 使用统一头部样式'" }, { "path": "src/components/popup-header/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('PopupHeader', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('popup-header')\n })\n})\n" }, { "path": "src/components/popup-picker/index.vue", "content": "\n\n\ncancel_text:\n en: cancel\n zh-CN: 取消\nconfirm_text:\n en: ok\n zh-CN: 完成\n\n\n\n\n\n" }, { "path": "src/components/popup-picker/metas.yml", "content": "category:\n en: Form\n 'zh-CN': 表单\nicon: ''\ntags:\n en:\n - popup\n - picker\n - form\n zh-CN:\n - 表单\n - 选择\n - 弹窗\nextra:\n en: |\n ::: tip\n other props are the same as `Picker`\n :::\n zh-CN: |\n ::: tip\n 其他选项与`picker`一致\n :::\ntips:\n zh-CN:\n -\n q: iPhone 上弹窗显示时遮罩层闪烁\n a: |\n\n 未找到解决方式。在 iOS11 之前会出现，在 iOS11 后似乎已经不能重现，可能要归结于系统浏览器原因。\n 相关 issue: [#2239](https://github.com/airyland/vux/issues/2239)\nprops:\n value:\n type: Array\n en: picker value, use `v-model` for binding\n zh-CN: '表单值，使用`v-model绑定`'\n title:\n en: label text\n zh-CN: 标题\n cancel-text:\n en: popup cancel text\n zh-CN: 弹窗的取消文字\n confirm-text:\n en: popup confirm text\n zh-CN: 弹窗的确认文字\n placeholder:\n en: placeholder\n zh-CN: 提示文字\n show-name:\n type: Boolean\n default: false\n en: if show names instead of keys\n zh-CN: 是否显示文字值而不是key\n inline-desc:\n en: description text below label\n zh-CN: Cell的描述文字\n show:\n type: Boolean\n en: popup show (supports the .sync modifier next)\n zh-CN: 显示 (支持.sync修饰 next)\n value-text-align:\n type: String\n version: v2.1.0-rc.3\n default: right\n en: value's text align\n zh-CN: 'value 对齐方式(text-align)'\n display-format:\n type: Function\n version: v2.1.1-rc.7\n en: 'used to format display text on cell, param: (currentValue)'\n zh-CN: 自定义在cell上的显示格式，参数为当前 value，使用该属性时，show-name 属性将失效\n popup-style:\n version: v2.5.2\n type: Object\n en: popup style\n zh-CN: 弹窗样式，可以用于强制指定 z-index\n popup-title:\n version: v2.7.0\n type: String\n en: popup title\n zh-CN: 弹窗标题\n disabled:\n version: v2.9.0\n type: Boolean\n default: false\n en: whether disable selecting\n zh-CN: 是否禁用选择\nslots:\n title:\n version: v2.3.7\n en: title slot, use scope.labelClass and scope.labelStyle to inherit label styles\n zh-CN: 标题插槽，使用 scope.labelClass 和 scope.labelStyle 继承原有样式(实现样式受控于 group label 设置)\nevents:\n on-change:\n params: '`(value)`'\n en: emits when value is changed\n zh-CN: 值变化时触发\n on-show:\n en: emits when popup shows\n zh-CN: 弹窗出现时触发\n on-hide:\n params: '`(closeType)` true表示confirm(选择确认), false表示其他情况的关闭'\n en: emits when popup is closed\n zh-CN: 弹窗关闭时触发\n on-shadow-change:\n version: v2.5.6\n params: '`(Array ids, Array names)`'\n en: emits when picker value is changed\n zh-CN: picker 值变化时触发，即滑动 picker 时触发\nchanges:\n v2.9.0:\n en:\n - '[feature] add prop:disabled #2594'\n zh-CN:\n - '[feature] 支持属性 disabled #2594'\n v2.7.7:\n en:\n - '[fix] remove the first top line #2371'\n zh-CN:\n - '[fix] 去除第一个子元素的上边线 #2371'\n v2.7.0:\n en:\n - '[feature] add prop:popup-title(use component:popup-header) #1866'\n zh-CN:\n - '[feature] 增加属性 popup-title(使用 popup-header 组件) #1866'\n v2.5.10:\n en:\n - '[feature] support @cell-value-color #1874'\n zh-CN:\n - '[feature] 值文字颜色受控于 @cell-value-color #1874'\n v2.5.8:\n en:\n - '[fix] prevent background scrolling when popup is show #1830'\n zh-CN:\n - '[fix] popup显示时阻止背景滚动 #1830'\n v2.5.7:\n en:\n - '[fix] Fix render issue after changing value #1793'\n zh-CN:\n - '[fix] 修复修改值后第二次打开默认选中项渲染不正确的问题 #1793'\n v2.5.6:\n en:\n - '[feature] Support event:on-shadow-change #1778'\n zh-CN:\n - '[feature] 支持在滑动 picker 时触发事件 on-shadow-change #1778'\n v2.5.3:\n en:\n - '[fix] Fix label style being overwrite after importing x-textarea #1696'\n zh-CN:\n - '[fix] 修复在 x-textarea 后引入 popup-picker label 宽度被覆盖 #1696'\n v2.5.2:\n en:\n - '[feature] Add prop:popup-style #1656'\n zh-CN:\n - '[feature] 支持弹窗样式设置 prop:popup-style #1656'\n v2.4.1:\n en:\n - '[fix] popup-picker-header add touchmove.prevent event #1596'\n zh-CN:\n - '[fix] popup-picker头部区域屏蔽滑动事件 #1596'\n v2.3.8:\n en:\n - '[fix] Fix placeholder missing on iOS9 and iOS8 #1293'\n zh-CN:\n - '[fix] 修复 iOS 低版本下 placeholder 无法显示的问题 #1293'\n v2.3.7:\n en:\n - '[feature] Add slot:title'\n zh-CN:\n - '[feature] 添加 slot:title'\n v2.2.1-rc.7:\n en:\n - '[fix] Fix popup-picker filter issue on v2.2.1-rc.6'\n zh-CN:\n - '[fix] 修复 popup-picker 上个版本转换值的问题'\n v2.2.1-rc.6:\n en:\n - '[enhance] Add param names for display-format'\n zh-CN:\n - '[enhance] display-format 支持 names 作为第二个参数'\n v2.2.1-rc.1:\n en:\n - '[fix] Fix wrong closeType #1209'\n zh-CN:\n - '[fix] 修复错误的弹窗关闭类型 #1209'\n v2.1.1-rc.13:\n en:\n - '[enhance] Use gray for cancel text color'\n zh-CN:\n - '[enhance] 取消文字使用灰色'\n v2.1.1-rc.11:\n en:\n - '[enhance] Fix mask render slowly in Safari. #1083 @sixiakun'\n - '[enhance] Enable transfer-dom by default'\n zh-CN:\n - '[enhance] 修复 Safari 下遮罩层渲染慢的问题 #1083 @sixiakun'\n - '[enhance] 默认开启 transfer-dom，解决非 Safari 也会出现的 z-index 问题'\n v2.1.1-rc.8:\n en:\n - '[enhance] Update header style and add less variables'\n zh-CN:\n - '[enhance] 更新头部样式并新增 less 变量'\n v2.1.1-rc.7:\n en:\n - '[enhance] Support PC mouse drag #1039 @michael829'\n - '[enhance] Support prop:display-format'\n zh-CN:\n - '[enhance] 支持 PC 上鼠标选择 #1039 @michael829'\n - '[enhance] 支持根据值自定义显示格式'\n v2.1.1-rc.1:\n en:\n - '[fix] Fix labelMarginRight #977 @wg5945'\n zh-CN:\n - '[fix] 修复 label 未正确设置 labelMarginRight #977 @wg5945'\n v2.1.0-rc.50:\n en:\n - '[fix] Fix no on-change emits #934 @howyhuang'\n zh-CN:\n - '[fix] 修复`on-change`事件没有触发 #934 @howyhuang'\n" }, { "path": "src/components/popup-picker/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('PopupPicker', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('popup-picker')\n })\n})\n" }, { "path": "src/components/popup-radio/index.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/popup-radio/metas.yml", "content": "category:\n en: Form\n 'zh-CN': 表单\nicon: ''\nextra:\n en: props are the same as cell's and radio's. Be aware that it doesnot support fillMode.\n zh-CN: 属性同 cell 和 Radio 的属性，需要注意的是不支持 fillMode。\ntags:\n en:\n - radio\n - form\n zh-CN:\n - 表单\n - 单选\nprops:\n readonly:\n version: v2.3.6\n en: readonly, shown like a cell\n zh-CN: 只读样式，类似于 cell\nslots:\n popup-header:\n version: v2.3.3\n en: popup header slot\n zh-CN: 弹窗顶部\n each-item:\n version: v2.3.7\n en: custom how label displays\n zh-CN: 自定义每个条目显示内容\nevents:\n on-show:\n version: v2.6.5\n en: fires when popup shows\n zh-CN: 弹窗显示时触发\n on-hide:\n version: v2.6.5\n en: fires when popup hides\n zh-CN: 弹窗关闭时触发\nchanges:\n v2.7.8:\n en:\n - '[fix] fix popup-radio component does not support the border-intent property of the cell component.'\n zh-CN:\n - '[fix] 修复 popup-radio 组件不支持cell组件中 border-intent 的属性。'\n v2.7.0:\n en:\n - '[fix] fix vue@2.5.0 scope issue #2076'\n zh-CN:\n - '[fix] 兼容 vue@2.5.0 scope 更名为 slot-scope 的问题 #2076'\n v2.6.5:\n en:\n - '[feature] add event:on-hde event:on-show #2053'\n zh-CN:\n - '[feature] 支持事件 on-show on-hide #2053'\n v2.6.0:\n en:\n - '[fix] fix placeholder logic #1964'\n zh-CN:\n - '[fix] 修复 placeholder 显示逻辑 #1964'\n v2.5.10:\n en:\n - '[feature] support @cell-value-color #1874'\n zh-CN:\n - '[feature] 值文字颜色受控于 @cell-value-color #1874'\n v2.3.7:\n en:\n - '[feature] Add slot:each-item'\n zh-CN:\n - '[feature] 添加 slot:each-item'\n v2.3.6:\n en:\n - '[feature] Add prop:readonly'\n - '[feature] Add slot:icon'\n zh-CN:\n - '[feature] 添加 prop:readonly'\n - '[feature] 添加 slot:icon'\n v2.3.3:\n en:\n - '[feature] Support slot:popup-header'\n zh-CN:\n - '[feature] 支持 slot:popup-header'\n v2.3.1:\n en:\n - '[fix] fix cell display value'\n zh-CN:\n - '[fix] 修复文字值显示'\n v2.2.1-rc.8:\n en:\n - '[fix] fix label width'\n zh-CN:\n - '[fix] 修复 label 宽度'\n v2.2.1-rc.4:\n en:\n - '[feature] new component'\n zh-CN:\n - '[feature] 新组件'\n" }, { "path": "src/components/popup-radio/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('PopupRadio', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('popup-radio')\n })\n})\n" }, { "path": "src/components/previewer/index.vue", "content": "\n\n\n\n\n\n" }, { "path": "src/components/previewer/metas.yml", "content": "category:\n en: Data Display\n zh-CN: 数据展示\nicon: ''\ntags:\n en:\n - preview\n - swipephoto\n - image\n zh-CN:\n - 预览\n - 图片\ntips:\n zh-CN:\n -\n q: 建议为所有图片定义尺寸\n a: |\n PhotoSwipe 本身要求设置宽高，Previewer 组件会尝试对没有设置宽高的图片先加载再显示，可能会造成性能问题或者宽带浪费。\n 相关 issue:[#2321](https://github.com/airyland/vux/issues/2321)\nextra:\n en: |\n\n > please avoid using large pictures or they may crash your browser(especially on Android).\n\n example for list:\n\n ``` js\n [{\n msrc: 'https://placekitten.com/500/250',\n src: 'https://placekitten.com/800/400',\n w: 600,\n h: 400\n },\n {\n src: 'https://placekitten.com/1200/900',\n msrc: 'https://placekitten.com/120/90', // thumbnail\n w: 1200,\n h: 900\n }]\n ```\n\n ::: warning\n before v2.4.0, `w` and `h` should be specified.\n :::\n\n Prevewing an image by index:\n\n ``` js\n this.$refs.previewer.show(index)\n ```\n\n zh-CN: |\n\n > 注意避免使用过大图片，否则可能会出现卡顿黑屏的情况(尤其是在 Android 机子上) #2514。\n\n list的数据示例如图：\n\n ``` js\n [{\n src: 'https://placekitten.com/800/400',\n w: 600,\n h: 400\n },\n {\n src: 'https://placekitten.com/1200/900',\n msrc: 'https://placekitten.com/120/90', // 缩略图\n w: 1200,\n h: 900\n }]\n ```\n\n ::: warning\n 注意在 v2.4.0 之前 w 和 h 都必须填写\n :::\n\n 显示特定index的图片，使用`ref`:\n\n ``` js\n this.$refs.previewer.show(index)\n ```\n\n

    注意，当你自定义添加按钮时，需要在 photoswipe 选项设置 clickable 元素，否则点击将没有响应

    \n\n\n ``` html\n \n \n \n ```\n\n\n ``` js\n options: {\n isClickableElement: function (el) {\n return /previewer-delete-icon/.test(el.className)\n }\n }\n ```\nprops:\n list:\n type: Array\n en: images list\n zh-CN: 图片列表\n options:\n type: 'Object'\n en: options for `photoswipe`\n zh-CN: '`photoswipe`的设置'\nevents:\n on-close:\n version: v2.2.1-rc.4\n en: fires after closing\n zh-CN: 关闭时触发\n on-index-change:\n version: v2.8.1\n en: fires after index changes(shall not fire on first opening slide)\n zh-CN: 切换图片后触发(首次打开不会触发)\nmethods:\n goTo:\n version: v2.5.10\n params: '(index)'\n en: go to specified image\n zh-CN: 跳转到特定图片\n prev:\n version: v2.5.10\n en: go to previous image\n zh-CN: 跳转到上一张\n next:\n version: v2.5.10\n en: go to next image\n zh-CN: 跳转到下一张\n getCurrentIndex:\n version: v2.6.3\n en: get current index\n zh-CN: 获取当前图片索引\nslots:\n button-after:\n version: v2.6.3\n en: slot after control button list\n zh-CN: 操作按钮之后，可以添加自定义图标\n button-before:\n version: v2.6.3\n en: slot before control button list\n zh-CN: 操作按钮之前，可以添加自定义图标\nchanges:\n v2.8.1:\n en:\n - '[feature] add event:on-index-change #2505'\n zh-CN:\n - '[feature] 支持事件 on-index-change #2505'\n v2.6.4:\n en:\n - '[feature] automatically update view if one slide is deleted'\n zh-CN:\n - '[feature] 方便删除操作，绑定数据减少一张时自动更新示图，有更多图片时切换到下一张，没有时将自动关闭预览'\n v2.6.3:\n en:\n - '[fix] fix method name starts with _ will get vue(2.4.4) warning #2001'\n - '[feature] add method:getCurrentIndex'\n - '[feature] add slot:button-before slot:button-after'\n zh-CN:\n - '[fix] 修复组件函数名字以下划线开头将会被 Vue(2.4.4) 警告的问题 #2001'\n - '[feature] 添加 getCurrentIndex 方法'\n - '[feature] 添加 slot:button-before 和 slot:button-after'\n v2.5.10:\n en:\n - '[enhance] Support method:goTo #1888'\n zh-CN:\n - '[enhance] 支持 goTo 方法 #1888'\n v2.4.0:\n en:\n - '[enhance] Use src as msrc by default'\n - '[enhance] No more force setting width and height #1426'\n zh-CN:\n - '[enhance] 使用图片作为缩略图，防止先显示黑色区域'\n - '[enhance] 不再强制要求设置宽高 #1426'\n v2.2.1-rc.4:\n en:\n - '[enhance] Increase the closing event #1245'\n zh-CN:\n - '[enhance] 增加关闭事件 #1245'\n" }, { "path": "src/components/previewer/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('Previewer', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('previewer')\n })\n})\n" }, { "path": "src/components/qrcode/index.vue", "content": "\n\n\n" }, { "path": "src/components/qrcode/metas.yml", "content": "category:\n en: Data Display\n zh-CN: 数据展示\nicon: ''\ntags:\n - qr\n - qrcode\n - 二维码\nprops:\n value:\n type: String\n default: ''\n en: content, make sure to prefix with http(s) when value is a link\n zh-CN: 编码内容，如果为链接，请保证有http(s)协议名\n size:\n type: Number\n default: 80\n en: size\n zh-CN: 尺寸大小\n bg-color:\n type: String\n default: '#FFFFFF'\n en: background color\n zh-CN: 背景颜色\n fg-color:\n type: String\n default: '#000000'\n en: front color\n zh-CN: 二维码着色\n type:\n type: String\n default: img\n en: 'render type, can be `img` or `canvas`'\n zh-CN: '渲染类型，可以为`img`(适合需要在微信需要长按识别的场景)和`canvas`'\nchanges:\n v2.9.1:\n en: \n - '[fix] fix missing support for Chinese works #2652'\n zh-CN:\n - '[fix] 修复中文支持 #2652'\n v2.7.0:\n en:\n - '[fix] fix errors when value is undefined #2070'\n - '[change] use style to set width and height #2075'\n zh-CN:\n - '[fix] 修复 value 为 undefined 时报错的问题 #2070'\n - '[change] 使用 style 样式设置宽高 #2075'\n v2.1.0-rc.47:\n zh-CN:\n - '[feature] 支持渲染类型为图片 #900 @keepgoingwm'" }, { "path": "src/components/qrcode/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('Qrcode', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('qrcode')\n })\n})\n" }, { "path": "src/components/radio/index.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/radio/metas.yml", "content": "category:\n en: Form\n 'zh-CN': 表单\nicon: ''\ntags:\n en:\n - radio\n - form\n zh-CN:\n - 表单\n - 单选\nextra:\n en: |\n\n ```html\n \n \n \n ```\n `options` can be plain array, or object list with key=> value:\n\n ``` js\n const options = [ 'China', 'Japan' ]\n\n const options2 = [{\n icon: 'http://dn-placeholder.qbox.me/110x110/FF2D55/000',\n key: '001',\n value: 'radio001'\n }, {\n icon: 'http://dn-placeholder.qbox.me/110x110/FF2D55/000',\n key: '002',\n value: 'radio002'\n }]\n ```\n\n ::: tip\n `radio` should be used in `Group`.\n :::\n zh-CN: |\n\n ```html\n \n \n \n ```\n `options`可以为简单数组，也可以为key=>value形式键值对\n\n ``` js\n const options = [ 'China', 'Japan' ]\n\n const options2 = [{\n icon: 'http://dn-placeholder.qbox.me/110x110/FF2D55/000',\n key: '001',\n value: 'radio001'\n }, {\n icon: 'http://dn-placeholder.qbox.me/110x110/FF2D55/000',\n key: '002',\n value: 'radio002'\n }]\n ```\n\n ::: tip\n `radio`只能在`Group`中使用\n :::\nprops:\n value:\n en: radio value, use `v-model` for binding\n zh-CN: 表单值，使用`v-model`绑定\n options:\n type: Array\n en: option list, can be plain array or array with `key=>value`\n zh-CN: 可选列表，可以用字符串组成的数组或者 `key=>value` 的形式\n fill-mode:\n type: Boolean\n default: false\n en: if add an option user can fill\n zh-CN: 是否可填写\n fill-placeholder:\n en: placeholder for fill input\n zh-CN: 可填写时的提示文字\n fill-label:\n en: label for fill input\n zh-CN: 可填写时的label文字\n disabled:\n type: Boolean\n version: v2.3.8\n en: disable selecting\n zh-CN: 禁用操作\n selected-label-style:\n type: Object\n version: v2.4.0\n en: set selected label style\n zh-CN: 设置选中时的 label 样式，比如使用其他颜色更容易区分是否为选中项\nslots:\n each-item:\n version: v2.3.5\n en: custom how to display each item\n zh-CN: 自定义如何显示每一项\nchanges:\n v2.4.0:\n en:\n - '[feature] Add prop:selected-label-style'\n zh-CN:\n - '[feature] 添加属性 prop:selected-label-style 来支持定义选中项的文字样式'\n v2.3.8:\n en:\n - '[feature] Add prop:disabled #1254'\n - '[feature] Add less:@radio-checked-icon-color #896'\n zh-CN:\n - '[feature] 支持 prop:disabled 禁用操作 #1254'\n - '[feature] 支持 less 变量 @radio-checked-icon-color #896'\n v2.3.5:\n en:\n - '[feature] Support slot:each-item'\n zh-CN:\n - '[feature] 支持自定义渲染每一列 slot:each-item'\n v2.1.1-rc.13:\n en:\n - '[fix] Fix not support Number and not reactive #1115'\n zh-CN:\n - '[fix] 修复未响应数据变更的 bug #1115'\n v2.1.1-rc.1:\n en:\n - '[feature] Support icon'\n zh-CN:\n - '[feature] 支持左侧图标'\n" }, { "path": "src/components/radio/props.js", "content": "// used by radio and popup-radio\n\nexport default function () {\n return {\n options: {\n type: Array,\n required: true\n },\n value: [String, Number],\n fillMode: {\n type: Boolean,\n default: false\n },\n fillPlaceholder: {\n type: String,\n default: '其他'\n },\n fillLabel: {\n type: String,\n default: '其他'\n },\n disabled: Boolean,\n selectedLabelStyle: Object\n }\n}\n" }, { "path": "src/components/radio/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('Radio', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('radio')\n })\n})\n" }, { "path": "src/components/range/index.vue", "content": "\n\n\n\n\n\n" }, { "path": "src/components/range/lib/classes.js", "content": "/**\n * Module dependencies.\n */\nimport { indexof } from '../utils'\n\n/**\n * Whitespace regexp.\n */\n\nvar re = /\\s+/\n\n/**\n * toString reference.\n */\n\nvar toString = Object.prototype.toString\n\n/**\n * Wrap `el` in a `ClassList`.\n *\n * @param {Element} el\n * @return {ClassList}\n * @api public\n */\n\nexport default function (el) {\n return new ClassList(el)\n}\n\n/**\n * Initialize a new ClassList for `el`.\n *\n * @param {Element} el\n * @api private\n */\n\nfunction ClassList (el) {\n if (!el || !el.nodeType) {\n throw new Error('A DOM element reference is required')\n }\n this.el = el\n this.list = el.classList\n}\n\n/**\n * Add class `name` if not already present.\n *\n * @param {String} name\n * @return {ClassList}\n * @api public\n */\n\nClassList.prototype.add = function (name) {\n // classList\n if (this.list) {\n this.list.add(name)\n return this\n }\n\n // fallback\n var arr = this.array()\n var i = indexof(arr, name)\n if (!~i) arr.push(name)\n this.el.className = arr.join(' ')\n return this\n}\n\n/**\n * Remove class `name` when present, or\n * pass a regular expression to remove\n * any which match.\n *\n * @param {String|RegExp} name\n * @return {ClassList}\n * @api public\n */\n\nClassList.prototype.remove = function (name) {\n if (toString.call(name) === '[object RegExp]') {\n return this.removeMatching(name)\n }\n\n // classList\n if (this.list) {\n this.list.remove(name)\n return this\n }\n\n // fallback\n var arr = this.array()\n var i = indexof(arr, name)\n if (~i) arr.splice(i, 1)\n this.el.className = arr.join(' ')\n return this\n}\n\n/**\n * Remove all classes matching `re`.\n *\n * @param {RegExp} re\n * @return {ClassList}\n * @api private\n */\n\nClassList.prototype.removeMatching = function (re) {\n var arr = this.array()\n for (var i = 0; i < arr.length; i++) {\n if (re.test(arr[i])) {\n this.remove(arr[i])\n }\n }\n return this\n}\n\n/**\n * Toggle class `name`, can force state via `force`.\n *\n * For browsers that support classList, but do not support `force` yet,\n * the mistake will be detected and corrected.\n *\n * @param {String} name\n * @param {Boolean} force\n * @return {ClassList}\n * @api public\n */\n\nClassList.prototype.toggle = function (name, force) {\n // classList\n if (this.list) {\n if (typeof force !== 'undefined') {\n if (force !== this.list.toggle(name, force)) {\n this.list.toggle(name) // toggle again to correct\n }\n } else {\n this.list.toggle(name)\n }\n return this\n }\n\n // fallback\n if (typeof force !== 'undefined') {\n if (!force) {\n this.remove(name)\n } else {\n this.add(name)\n }\n } else {\n if (this.has(name)) {\n this.remove(name)\n } else {\n this.add(name)\n }\n }\n\n return this\n}\n\n/**\n * Return an array of classes.\n *\n * @return {Array}\n * @api public\n */\n\nClassList.prototype.array = function () {\n var className = this.el.getAttribute('class') || ''\n var str = className.replace(/^\\s+|\\s+$/g, '')\n var arr = str.split(re)\n if (arr[0] === '') arr.shift()\n return arr\n}\n\n/**\n * Check if class `name` is present.\n *\n * @param {String} name\n * @return {ClassList}\n * @api public\n */\n\nClassList.prototype.has =\nClassList.prototype.contains = function (name) {\n return this.list\n ? this.list.contains(name)\n : !!~indexof(this.array(), name)\n}\n" }, { "path": "src/components/range/lib/closest.js", "content": "/**\n * Module Dependencies\n */\n\nimport matches from './matches-selector'\n\n/**\n * Export `closest`\n */\n\nexport default closest\n\n/**\n * Closest\n *\n * @param {Element} el\n * @param {String} selector\n * @param {Element} scope (optional)\n */\n\nfunction closest (el, selector, scope) {\n scope = scope || document.documentElement\n\n // walk up the dom\n while (el && el !== scope) {\n if (matches(el, selector)) return el\n el = el.parentNode\n }\n\n // check scope for match\n return matches(el, selector) ? el : null\n}\n" }, { "path": "src/components/range/lib/delegate.js", "content": "/**\n * Module dependencies.\n */\n\nimport closest from './closest'\nimport event from './event'\n\n/**\n * Delegate event `type` to `selector`\n * and invoke `fn(e)`. A callback function\n * is returned which may be passed to `.unbind()`.\n *\n * @param {Element} el\n * @param {String} selector\n * @param {String} type\n * @param {Function} fn\n * @param {Boolean} capture\n * @return {Function}\n * @api public\n */\n\nexport const bind = function (el, selector, type, fn, capture) {\n return event.bind(el, type, function (e) {\n var target = e.target || e.srcElement\n e.delegateTarget = closest(target, selector, true, el)\n if (e.delegateTarget) fn.call(el, e)\n }, capture)\n}\n\n/**\n * Unbind event `type`'s callback `fn`.\n *\n * @param {Element} el\n * @param {String} type\n * @param {Function} fn\n * @param {Boolean} capture\n * @api public\n */\n\nexport const unbind = function (el, type, fn, capture) {\n event.unbind(el, type, fn, capture)\n}\n" }, { "path": "src/components/range/lib/emitter.js", "content": "\n/**\n * Expose `Emitter`.\n */\n\nexport default Emitter\n\n/**\n * Initialize a new `Emitter`.\n *\n * @api public\n */\n\nfunction Emitter (obj) {\n if (obj) return mixin(obj)\n}\n\n/**\n * Mixin the emitter properties.\n *\n * @param {Object} obj\n * @return {Object}\n * @api private\n */\n\nfunction mixin (obj) {\n for (var key in Emitter.prototype) {\n obj[key] = Emitter.prototype[key]\n }\n return obj\n}\n\n/**\n * Listen on the given `event` with `fn`.\n *\n * @param {String} event\n * @param {Function} fn\n * @return {Emitter}\n * @api public\n */\n\nEmitter.prototype.on =\nEmitter.prototype.addEventListener = function (event, fn) {\n this._callbacks = this._callbacks || {}\n ;(this._callbacks['$' + event] = this._callbacks['$' + event] || []).push(fn)\n return this\n}\n\n/**\n * Adds an `event` listener that will be invoked a single\n * time then automatically removed.\n *\n * @param {String} event\n * @param {Function} fn\n * @return {Emitter}\n * @api public\n */\n\nEmitter.prototype.once = function (event, fn) {\n function on () {\n this.off(event, on)\n fn.apply(this, arguments)\n }\n\n on.fn = fn\n this.on(event, on)\n return this\n}\n\n/**\n * Remove the given callback for `event` or all\n * registered callbacks.\n *\n * @param {String} event\n * @param {Function} fn\n * @return {Emitter}\n * @api public\n */\n\nEmitter.prototype.off =\nEmitter.prototype.removeListener =\nEmitter.prototype.removeAllListeners =\nEmitter.prototype.removeEventListener = function (event, fn) {\n this._callbacks = this._callbacks || {}\n\n // all\n if (!arguments.length) {\n this._callbacks = {}\n return this\n }\n\n // specific event\n var callbacks = this._callbacks['$' + event]\n if (!callbacks) return this\n\n // remove all handlers\n if (arguments.length === 1) {\n delete this._callbacks['$' + event]\n return this\n }\n\n // remove specific handler\n var cb\n for (var i = 0; i < callbacks.length; i++) {\n cb = callbacks[i]\n if (cb === fn || cb.fn === fn) {\n callbacks.splice(i, 1)\n break\n }\n }\n return this\n}\n\n/**\n * Emit `event` with the given args.\n *\n * @param {String} event\n * @param {Mixed} ...\n * @return {Emitter}\n */\n\nEmitter.prototype.emit = function (event) {\n this._callbacks = this._callbacks || {}\n var args = [].slice.call(arguments, 1)\n var callbacks = this._callbacks['$' + event]\n\n if (callbacks) {\n callbacks = callbacks.slice(0)\n for (var i = 0, len = callbacks.length; i < len; ++i) {\n callbacks[i].apply(this, args)\n }\n }\n\n return this\n}\n\n/**\n * Return array of callbacks for `event`.\n *\n * @param {String} event\n * @return {Array}\n * @api public\n */\n\nEmitter.prototype.listeners = function (event) {\n this._callbacks = this._callbacks || {}\n return this._callbacks['$' + event] || []\n}\n\n/**\n * Check if this emitter has `event` handlers.\n *\n * @param {String} event\n * @return {Boolean}\n * @api public\n */\n\nEmitter.prototype.hasListeners = function (event) {\n return !!this.listeners(event).length\n}\n" }, { "path": "src/components/range/lib/event.js", "content": "\n/**\n * Bind `el` event `type` to `fn`.\n *\n * @param {Element} el\n * @param {String} type\n * @param {Function} fn\n * @param {Boolean} capture\n * @return {Function}\n * @api public\n */\n\nconst bind = function (el, type, fn, capture) {\n var bind = window.addEventListener ? 'addEventListener' : 'attachEvent'\n var prefix = bind !== 'addEventListener' ? 'on' : ''\n el[bind](prefix + type, fn, capture || false)\n return fn\n}\n\n/**\n * Unbind `el` event `type`'s callback `fn`.\n *\n * @param {Element} el\n * @param {String} type\n * @param {Function} fn\n * @param {Boolean} capture\n * @return {Function}\n * @api public\n */\n\nconst unbind = function (el, type, fn, capture) {\n var bind = window.addEventListener ? 'addEventListener' : 'attachEvent'\n var prefix = bind !== 'addEventListener' ? 'on' : ''\n var unbind = window.removeEventListener ? 'removeEventListener' : 'detachEvent'\n el[unbind](prefix + type, fn, capture || false)\n return fn\n}\nexport default {\n bind,\n unbind\n}\n" }, { "path": "src/components/range/lib/events.js", "content": "/**\n * Module dependencies.\n */\n\nimport events from './event'\nimport {bind} from './delegate'\n\n/**\n * Expose `Events`.\n */\n\nexport default Events\n\n/**\n * Initialize an `Events` with the given\n * `el` object which events will be bound to,\n * and the `obj` which will receive method calls.\n *\n * @param {Object} el\n * @param {Object} obj\n * @api public\n */\n\nfunction Events (el, obj) {\n if (!(this instanceof Events)) return new Events(el, obj)\n if (!el) throw new Error('element required')\n if (!obj) throw new Error('object required')\n this.el = el\n this.obj = obj\n this._events = {}\n}\n\n/**\n * Subscription helper.\n */\n\nEvents.prototype.sub = function (event, method, cb) {\n this._events[event] = this._events[event] || {}\n this._events[event][method] = cb\n}\n\n/**\n * Bind to `event` with optional `method` name.\n * When `method` is undefined it becomes `event`\n * with the \"on\" prefix.\n *\n * Examples:\n *\n * Direct event handling:\n *\n * events.bind('click') // implies \"onclick\"\n * events.bind('click', 'remove')\n * events.bind('click', 'sort', 'asc')\n *\n * Delegated event handling:\n *\n * events.bind('click li > a')\n * events.bind('click li > a', 'remove')\n * events.bind('click a.sort-ascending', 'sort', 'asc')\n * events.bind('click a.sort-descending', 'sort', 'desc')\n *\n * @param {String} event\n * @param {String|function} [method]\n * @return {Function} callback\n * @api public\n */\n\nEvents.prototype.bind = function (event, method) {\n var e = parse(event)\n var el = this.el\n var obj = this.obj\n var name = e.name\n method = method || 'on' + name\n var args = [].slice.call(arguments, 2)\n\n // callback\n var cb = function () {\n var a = [].slice.call(arguments).concat(args)\n obj[method].apply(obj, a)\n }\n\n // bind\n if (e.selector) {\n cb = bind(el, e.selector, name, cb)\n } else {\n events.bind(el, name, cb)\n }\n\n // subscription for unbinding\n this.sub(name, method, cb)\n\n return cb\n}\n\n/**\n * Unbind a single binding, all bindings for `event`,\n * or all bindings within the manager.\n *\n * Examples:\n *\n * Unbind direct handlers:\n *\n * events.unbind('click', 'remove')\n * events.unbind('click')\n * events.unbind()\n *\n * Unbind delegate handlers:\n *\n * events.unbind('click', 'remove')\n * events.unbind('click')\n * events.unbind()\n *\n * @param {String|Function} [event]\n * @param {String|Function} [method]\n * @api public\n */\n\nEvents.prototype.unbind = function (event, method) {\n if (arguments.length === 0) return this.unbindAll()\n if (arguments.length === 1) return this.unbindAllOf(event)\n\n // no bindings for this event\n var bindings = this._events[event]\n if (!bindings) return\n\n // no bindings for this method\n var cb = bindings[method]\n if (!cb) return\n\n events.unbind(this.el, event, cb)\n}\n\n/**\n * Unbind all events.\n *\n * @api private\n */\n\nEvents.prototype.unbindAll = function () {\n for (var event in this._events) {\n this.unbindAllOf(event)\n }\n}\n\n/**\n * Unbind all events for `event`.\n *\n * @param {String} event\n * @api private\n */\n\nEvents.prototype.unbindAllOf = function (event) {\n var bindings = this._events[event]\n if (!bindings) return\n\n for (var method in bindings) {\n this.unbind(event, method)\n }\n}\n\n/**\n * Parse `event`.\n *\n * @param {String} event\n * @return {Object}\n * @api private\n */\n\nfunction parse (event) {\n var parts = event.split(/ +/)\n return {\n name: parts.shift(),\n selector: parts.join(' ')\n }\n}\n" }, { "path": "src/components/range/lib/matches-selector.js", "content": "/**\n * Module dependencies.\n */\n\nimport { all } from './query'\n\n/**\n * Element prototype.\n */\n\nlet proto = {}\n\nif (typeof window !== 'undefined') {\n proto = window.Element.prototype\n}\n\n/**\n * Vendor function.\n */\n\nvar vendor = proto.matches || proto.webkitMatchesSelector || proto.mozMatchesSelector || proto.msMatchesSelector || proto.oMatchesSelector\n\n/**\n * Expose `match()`.\n */\n\nexport default match\n\n/**\n * Match `el` to `selector`.\n *\n * @param {Element} el\n * @param {String} selector\n * @return {Boolean}\n * @api public\n */\n\nfunction match (el, selector) {\n if (!el || el.nodeType !== 1) return false\n if (vendor) return vendor.call(el, selector)\n var nodes = all(selector, el.parentNode)\n for (var i = 0; i < nodes.length; ++i) {\n if (nodes[i] === el) return true\n }\n return false\n}\n" }, { "path": "src/components/range/lib/mouse.js", "content": "\n/**\n * dependencies.\n */\n\nimport emitter from './emitter'\nimport event from './event'\n\n/**\n * export `Mouse`\n */\n\nexport default function (el, obj) {\n return new Mouse(el, obj)\n}\n\n/**\n * initialize new `Mouse`.\n *\n * @param {Element} el\n * @param {Object} obj\n */\n\nfunction Mouse (el, obj) {\n this.obj = obj || {}\n this.el = el\n}\n\n/**\n * mixin emitter.\n */\n\nemitter(Mouse.prototype)\n\n/**\n * bind mouse.\n *\n * @return {Mouse}\n */\n\nMouse.prototype.bind = function () {\n var obj = this.obj\n var self = this\n\n // up\n function up (e) {\n obj.onmouseup && obj.onmouseup(e)\n event.unbind(document, 'mousemove', move)\n event.unbind(document, 'mouseup', up)\n self.emit('up', e)\n }\n\n // move\n function move (e) {\n obj.onmousemove && obj.onmousemove(e)\n self.emit('move', e)\n }\n\n // down\n self.down = function (e) {\n obj.onmousedown && obj.onmousedown(e)\n event.bind(document, 'mouseup', up)\n event.bind(document, 'mousemove', move)\n self.emit('down', e)\n }\n\n // bind all.\n event.bind(this.el, 'mousedown', self.down)\n\n return this\n}\n\n/**\n * unbind mouse.\n *\n * @return {Mouse}\n */\n\nMouse.prototype.unbind = function () {\n event.unbind(this.el, 'mousedown', this.down)\n this.down = null\n}\n" }, { "path": "src/components/range/lib/query.js", "content": "function one (selector, el = document) {\n return el.querySelector(selector)\n}\nfunction all (selector, el = document) {\n return el.querySelectorAll(selector)\n}\n// function engine(obj) {\n// if (!obj.one) throw new Error('.one callback required')\n// if (!obj.all) throw new Error('.all callback required')\n// return exportJson\n// }\nexport {\n one, all\n}\n// export default one\n" }, { "path": "src/components/range/metas.yml", "content": "category:\n en: Form\n 'zh-CN': 表单\nicon: ''\ntags:\n en:\n - range\n - form\n zh-CN:\n - 选择\n - 表单\nprops:\n value:\n type: Number\n default: 0\n en: form value, use `v-model` for binding\n zh-CN: 表单值，使用`v-model`绑定\n decimal:\n type: Boolean\n default: false\n en: if show decimals when value is changed\n zh-CN: 是否在变化时显示小数\n min:\n type: Number\n default: 0\n en: min number\n zh-CN: 可选最小值\n max:\n type: Number\n default: 100\n en: max number\n zh-CN: 可选最大值\n step:\n type: Number\n default: 1\n en: step value\n zh-CN: 步长\n disabled:\n type: Boolean\n default: false\n en: if disabled\n zh-CN: 是否禁用\n minHTML:\n en: custom html template for min value\n zh-CN: 最小值显示的html模板\n maxHTML:\n en: custom html template for max value\n zh-CN: 最大值显示的html模板\n disabled-opacity:\n type: Number\n en: opacity value when is disabled\n zh-CN: 禁用样式的透明度\n range-bar-height:\n type: Number\n default: 1\n en: range bar's height\n zh-CN: 高度\nevents:\n on-change:\n version: v2.2.2\n params: '`(value)`'\n en: emits when value is changed\n zh-CN: 绑定值变化时触发事件\n on-touchstart:\n version: v2.9.2\n params: '`(event)`'\n en: trigger when finger is placed on element\n zh-CN: 手指放到元素上时触发\n on-touchend:\n version: v2.9.2\n params: '`(event)`'\n en: trigger when finger leaves the element\n zh-CN: 手指离开元素时触发\nchanges:\n v2.9.2:\n en:\n - '[feature] add on-touchstart and on-touchend events #2804'\n zh-CN:\n - '[feature] 新增on-touchstart 和 on-touchend事件 #2804'\n v2.4.0:\n en:\n - '[fix] Fix the situation cannot drag to max value #1556'\n zh-CN:\n - '[fix] 修复一些情况下无法拖到最大值的问题 #1556'\n v2.2.2:\n en:\n - '[feature] Support dynamically setting step #1394'\n zh-CN:\n - '[feature] 支持动态设置 step #1394'\n" }, { "path": "src/components/range/powerange.js", "content": "import { findClosest, getWidth, percentage } from './utils'\nimport classes from './lib/classes'\nimport mouse from './lib/mouse'\nimport events from './lib/events'\n\nfunction Horizontal (element, options) {\n this.element = element\n this.options = options || {}\n this.slider = this.create('span', 'range-bar')\n this.hasAppend = false\n\n if (this.element !== null && this.element.type === 'text') this.init()\n if (this.options.step) {\n this.step(this.slider.offsetWidth || this.options.initialBarWidth, getWidth(this.handle))\n }\n this.setStart(this.options.start)\n}\n\nHorizontal.prototype.setStart = function (start) {\n var begin = (start === null) ? this.options.min : start\n var part = percentage.from(begin - this.options.min, this.options.max - this.options.min) || 0\n var offset = percentage.of(part, this.slider.offsetWidth - this.handle.offsetWidth)\n var position = (this.options.step) ? findClosest(offset, this.steps) : offset\n\n this.setPosition(position)\n this.setValue(this.handle.style.left, this.slider.offsetWidth - this.handle.offsetWidth)\n}\n\nHorizontal.prototype.setStep = function () {\n this.step(getWidth(this.slider) || this.options.initialBarWidth, getWidth(this.handle))\n}\n\nHorizontal.prototype.setPosition = function (val) {\n this.handle.style.left = val + 'px'\n this.slider.querySelector('.range-quantity').style.width = val + 'px'\n}\n\nHorizontal.prototype.onmousedown = function (e) {\n this.options.onTouchstart(e)\n if (e.touches) e = e.touches[0]\n this.startX = e.clientX\n this.handleOffsetX = this.handle.offsetLeft\n this.restrictHandleX = this.slider.offsetWidth - this.handle.offsetWidth\n this.unselectable(this.slider, true)\n}\n\nHorizontal.prototype.changeEvent = function (state) {\n if (typeof Event === 'function' || !document.fireEvent) {\n var event = document.createEvent('HTMLEvents')\n event.initEvent('change', false, true)\n this.element.dispatchEvent(event)\n } else {\n this.element.fireEvent('onchange')\n }\n}\n\nHorizontal.prototype.onmousemove = function (e) {\n e.preventDefault()\n if (e.touches) e = e.touches[0]\n\n var leftOffset = this.handleOffsetX + e.clientX - this.startX\n var position = (this.steps) ? findClosest(leftOffset, this.steps) : leftOffset\n\n if (leftOffset <= 0) {\n this.setPosition(0)\n } else if (leftOffset >= this.restrictHandleX) {\n this.setPosition(this.restrictHandleX)\n } else {\n this.setPosition(position)\n }\n this.setValue(this.handle.style.left, this.slider.offsetWidth - this.handle.offsetWidth)\n}\n\nHorizontal.prototype.unselectable = function (element, set) {\n if (!classes(this.slider).has('unselectable') && set === true) {\n classes(this.slider).add('unselectable')\n } else {\n classes(this.slider).remove('unselectable')\n }\n}\n\nHorizontal.prototype.onmouseup = function (e) {\n this.options.onTouchend(e)\n this.unselectable(this.slider, false)\n}\n\nHorizontal.prototype.disable = function (force) {\n if (this.options.disable || force) {\n this.mouse.unbind()\n this.touch.unbind()\n }\n if (this.options.disable) {\n if (this.options.disableOpacity) {\n this.slider.style.opacity = this.options.disableOpacity\n }\n classes(this.slider).add('range-bar-disabled')\n }\n}\n\nHorizontal.prototype.init = function () {\n this.hide()\n this.append()\n this.bindEvents()\n this.checkValues(this.options.start)\n this.setRange(this.options.min, this.options.max)\n this.disable()\n}\n\nHorizontal.prototype.reInit = function (opts) {\n this.options.start = opts.value\n this.options.min = opts.min\n this.options.max = opts.max\n this.options.step = opts.step\n this.disable(true)\n this.init()\n}\n\nHorizontal.prototype.checkStep = function (value) {\n if (value < 0) value = Math.abs(value)\n this.options.step = value\n return this.options.step\n}\n\nHorizontal.prototype.setValue = function (offset, size) {\n var part = percentage.from(parseFloat(offset), size)\n if (offset === '0px' || size === 0) {\n value = this.options.min\n } else {\n var value = percentage.of(part, this.options.max - this.options.min) + this.options.min\n value = (this.options.decimal) ? (Math.round(value * 100) / 100) : Math.round(value)\n\n if (value > this.options.max) {\n value = this.options.max\n }\n }\n\n var changed = false\n\n changed = this.element.value !== value\n\n this.element.value = value\n this.options.callback(value)\n if (changed) this.changeEvent()\n}\n\nHorizontal.prototype.checkValues = function (start) {\n if (start < this.options.min) this.options.start = this.options.min\n if (start > this.options.max) this.options.start = this.options.max\n if (this.options.min >= this.options.max) this.options.min = this.options.max\n}\n\nHorizontal.prototype.step = function (sliderSize, handleSize) {\n var dimension = sliderSize - handleSize\n var part = percentage.from(this.checkStep(this.options.step), this.options.max - this.options.min)\n var interval = percentage.of(part, dimension)\n var steps = []\n for (let i = 0; i <= dimension; i += interval) {\n steps.push(i)\n }\n\n this.steps = steps\n for (let i = 10; i >= 0; i--) {\n this.steps[steps.length - i] = dimension - interval * i\n }\n\n return this.steps\n}\n\nHorizontal.prototype.create = function (type, name) {\n var elem = document.createElement(type)\n elem.className = name\n\n return elem\n}\n\nHorizontal.prototype.insertAfter = function (reference, target) {\n reference.parentNode.insertBefore(target, reference.nextSibling)\n}\n\nHorizontal.prototype.setRange = function (min, max) {\n if (typeof min === 'number' && typeof max === 'number' && !this.options.hideRange) {\n this.slider.querySelector('.range-min').innerHTML = this.options.minHTML || min\n this.slider.querySelector('.range-max').innerHTML = this.options.maxHTML || max\n }\n}\n\nHorizontal.prototype.generate = function () {\n var elems = {\n 'handle': {\n 'type': 'span',\n 'selector': 'range-handle'\n },\n 'min': {\n 'type': 'span',\n 'selector': 'range-min'\n },\n 'max': {\n 'type': 'span',\n 'selector': 'range-max'\n },\n 'quantity': {\n 'type': 'span',\n 'selector': 'range-quantity'\n }\n }\n\n for (var key in elems) {\n if (elems.hasOwnProperty(key)) {\n var temp = this.create(elems[key].type, elems[key].selector)\n this.slider.appendChild(temp)\n }\n }\n\n return this.slider\n}\n\nHorizontal.prototype.append = function () {\n if (!this.hasAppend) {\n var slider = this.generate()\n this.insertAfter(this.element, slider)\n }\n this.hasAppend = true\n}\n\nHorizontal.prototype.hide = function () {\n this.element.style.display = 'none'\n}\n\nHorizontal.prototype.bindEvents = function () {\n this.handle = this.slider.querySelector('.range-handle')\n this.touch = events(this.handle, this)\n this.touch.bind('touchstart', 'onmousedown')\n this.touch.bind('touchmove', 'onmousemove')\n this.touch.bind('touchend', 'onmouseup')\n this.mouse = mouse(this.handle, this)\n this.mouse.bind()\n}\n\nvar defaults = {\n callback () {},\n decimal: false,\n disable: false,\n disableOpacity: null,\n hideRange: false,\n min: 0,\n max: 100,\n start: null,\n step: null,\n vertical: false\n}\n\nexport default function (element, options) {\n options = options || {}\n\n for (let i in defaults) {\n if (options[i] == null) {\n options[i] = defaults[i]\n }\n }\n\n return new Horizontal(element, options)\n}\n" }, { "path": "src/components/range/powerange.less", "content": "/**\n *\n * Main stylesheet for Powerange.\n * http://abpetkov.github.io/powerange/\n *\n */\n\n/**\n * Horizontal slider style (default).\n */\n \n @import '../../styles/variable.less';\n\n.range-bar {\n background-color: @range-bar-default-color;\n border-radius: 15px;\n display: block;\n height: 1px;\n position: relative;\n width: 100%;\n}\n\n.range-bar-disabled {\n opacity: @range-disabled-opacity;\n}\n\n.range-quantity {\n background-color: @range-bar-active-color;\n border-radius: 15px;\n display: block;\n height: 100%;\n width: 0;\n}\n\n.range-handle {\n background-color: #fff;\n border-radius: 100%;\n cursor: move;\n height: 30px;\n left: 0;\n top: -13px;\n position: absolute;\n width: 30px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);\n}\n\n.range-min,\n.range-max {\n color: #181819;\n font-size: 12px;\n position: absolute;\n text-align: center;\n top: 50%;\n transform: translateY(-50%);\n width: 24px;\n}\n\n.range-min {\n left: -30px;\n}\n\n.range-max {\n right: -30px;\n}\n\n/**\n * Style for disabling text selection on handle move.\n */\n\n.unselectable {\n user-select: none;\n}\n\n/**\n * Style for handle cursor on disabled slider.\n */\n\n.range-disabled {\n cursor: default;\n}" }, { "path": "src/components/range/utils.js", "content": "const indexof = function (arr, obj) {\n if (arr.indexOf) return arr.indexOf(obj)\n for (let i = 0; i < arr.length; ++i) {\n if (arr[i] === obj) return i\n }\n return -1\n}\n\nconst findClosest = function (target, points) {\n var diff = null\n var current = null\n var closest = points[0]\n\n for (let i = 0; i < points.length; i++) {\n diff = Math.abs(target - closest)\n current = Math.abs(target - points[i])\n if (current < diff) {\n closest = points[i]\n }\n }\n\n return closest\n}\n\nfunction getWidth (el) {\n let width = window.getComputedStyle(el, null)['width']\n if (width === '100%' || width === 'auto') {\n return 0\n }\n return parseInt(width, 10)\n}\n\nconst percentage = {\n isNumber: function (num) {\n return typeof num === 'number'\n },\n\n of: function (perc, num) {\n if (percentage.isNumber(perc) && percentage.isNumber(num)) return (perc / 100) * num\n },\n\n from: function (part, target) {\n if (percentage.isNumber(part) && percentage.isNumber(target)) return (part / target) * 100\n }\n}\n\nexport {\n indexof,\n findClosest,\n getWidth,\n percentage\n}\n" }, { "path": "src/components/rater/index.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/rater/metas.yml", "content": "category:\n en: Form\n 'zh-CN': 表单\nicon: ''\ncolor: '#FF9900'\ntags:\n en:\n - form\n - rate\n - rater\n zh-CN:\n - 表单\n - 星级\n - 评分\nprops:\n max:\n type: Number\n default: 5\n en: total star number\n zh-CN: 最多可选个数\n value:\n type: Number\n default: 0\n en: selected value, use `v-model` for binding\n zh-CN: 值，使用 v-model 绑定\n disabled:\n type: Boolean\n default: false\n en: if disabled\n zh-CN: 是否禁用\n star:\n type: String\n default: '★'\n en: start's symbol text\n zh-CN: 字符\n active-color:\n type: String\n default: '#fc6'\n en: symbol color when selected\n zh-CN: 选中时的颜色\n margin:\n type: Number\n default: 2\n en: margin value\n zh-CN: 间隙值\n font-size:\n type: Number\n default: 25\n en: font size\n zh-CN: 字体大小\n min:\n type: Number\n version: v2.7.9\n default: 0\n en: min value\n zh-CN: 最小值\nchanges:\n v2.7.9:\n en:\n - '[feature] prop:min add min value #2439'\n zh-CN:\n - '[feature] prop:min 增加最小值 #2439'\n v2.7.3:\n en:\n - '[feature] prop:star support html #2182'\n zh-CN:\n - '[feature] prop:star 支持 html #2182'\n" }, { "path": "src/components/scroller/index.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/scroller/metas.yml", "content": "category:\n en: Deprecated\n 'zh-CN': 不再维护\ncategory_order: 999\nicon: ''\ntags:\n en:\n - layout\n - scroll\n - scroller\n zh-CN:\n - 布局\n - 滚动\nextra: |\n ::: warning\n 该组件已经不再维护，也不建议使用，大部分情况下也不需要用到该组件。\n
    \n 建议使用第三方相关组件，相关 issue 将不会处理。\n :::\n\n ::: warning\n `Scroller`的内容必须是一个`div`，并且只能有一个`div`\n
    \n `Scroller` 希望解决的是简单的列表问题而不是一个内嵌各种复杂标签交互的容器，很容易发生性能或者交互问题。\n
    \n
    \n 默认高度为整个视口高度，如果你加了`x-header`，那么你需要减去一个`x-header`的高度: `height=\"-46\"`\n\n
    \n
    \n 请确保在你的数据更新后进行`reset`操作(参考下面文档)，如果你做了`reset`还有问题再开`issue`并附上代码，否则将`绝对不会被处理`。\n :::\nafter_extra: |\n pulldown 默认配置:\n\n ``` js\n {\n content: 'Pull Down To Refresh',\n height: 60,\n autoRefresh: false,\n downContent: 'Pull Down To Refresh',\n upContent: 'Release To Refresh',\n loadingContent: 'Loading...',\n clsPrefix: 'xs-plugin-pulldown-'\n }\n ```\n\n pullup 默认配置:\n\n ``` js\n {\n content: 'Pull Up To Refresh',\n pullUpHeight: 60,\n height: 40,\n autoRefresh: false,\n downContent: 'Release To Refresh',\n upContent: 'Pull Up To Refresh',\n loadingContent: 'Loading...',\n clsPrefix: 'xs-plugin-pullup-'\n }\n ```\n\n QA 如何更新数据\n\n 如果展示内容只是简单的增加或者减少，直接调用`reset`方法即可\n\n ``` js\n this.$nextTick(() => {\n this.$refs.scroller.reset()\n })\n ```\n\n 如果展示内容完全重载，那么需要主动设置位置让其能正确回到顶部。适用于改变筛选条件后重载数据的情况\n\n ``` js\n this.$nextTick(() => {\n this.$refs.scroller.reset({\n top: 0\n })\n })\n ```\n\n QA 如何设置pullup完成\n\n 方法1，直接调用ref的`donePullup`方法\n\n ``` js\n this.$refs.demo2.donePullup()\n ```\n\n 方法2，绑定value, 重置状态\n\n ::: tip\n 自定义pullup模板同样是用v-model来绑定以获取状态变化\n :::\n\n ``` html\n \n ```\n\n ``` js\n data () {\n return {\n status: {\n pullupStatus: 'default'\n }\n }\n }\n ```\n\n ```\n // 重置状态为default\n this.status.pullupStatus = 'default\n ```\n\n QA 如何设置pulldown完成\n\n 参照`pullup`, 使用方法`donePulldown`或者绑定`pulldownStatus`然后重置为`default`。\n\n QA 如何禁用或者启用pullup\n\n 在有些情况下，比如数据不多不需要上拉加载或者已经加载完成，我们需要禁用pullup\n 同样可以调用方法 `disablePullup` 或者设置`pullupStatus`为`disabled`\n\n 反之，则调用方法 `enablePullup` 或者设置`pullupStatus`为`enabled`\n\n 启用keep-alive后滚动有问题\n\n 需要在调用Scroller的页面上在 hook: `activated`上执行`reset`\n\n ``` js\n activated () {\n this.$refs.scroller.reset()\n }\n ```\n\n\nevents:\n on-scroll:\n params: '`(position)`'\n en: emits when user scrolls\n zh-CN: '容器滚动时触发，参数为`top`和`left`位置'\n on-scroll-bottom:\n version: v2.2.1-rc.6\n en: emits when user scrolls to bottom. The event may emit multiple times, so you should use a variable for keeping status if you need fetching data\n zh-CN: 滚动到底部时触发，注意事件会触发多次，如果你需要进行数据获取，记得设置一个状态值\n on-pulldown-loading:\n en: emits when scroller is on pulldown-loading status\n zh-CN: 用户触发下拉刷新状态，监听该事件以获取加载新数据\n on-pullup-loading:\n en: emits when scroller is on pullup-loading status\n zh-CN: 用户触发上拉加载状态，监听该事件以加载新数据\nprops:\n value:\n type: 'Object'\n default: ''\n en: current pulldown and pullup status, use `v-model` for binding\n zh-CN: 对象，上拉或者下拉的状态双向绑定，使用 v-model 绑定，pulldownStatus 及 pullupStatus\n height:\n type: String\n default: 'viewport height'\n en: \"scroller's height, you can use `height=-40` to make scroller set to height: `viewportHeight - 40px`\"\n zh-CN: '容器高度，默认为整个viewport高度，注意，该属性接受的是 String 类型，比如 200px，如果你希望scroller自动计算除去头部尾部的高度，请这样设置让组件自动计算，如`height=\"-40\"`'\n lock-x:\n type: Boolean\n default: false\n en: lock the horizontal direction\n zh-CN: 锁定X方向\n lock-y:\n type: Boolean\n default: false\n en: lock the vertical direction\n zh-CN: 锁定Y方向\n scrollbar-x:\n type: Boolean\n default: false\n en: if show horizontal scrollbar\n zh-CN: 是否显示横向滚动条\n scrollbarY:\n type: Boolean\n default: false\n en: if show vertical scrollerbar\n zh-CN: 是否显示垂直方向滚动条\n bounce:\n type: Boolean\n default: true\n en: if use bounce effect\n zh-CN: 是否显示边缘回弹效果\n use-pulldown:\n type: Boolean\n default: false\n en: if use pulldown plugin\n zh-CN: 是否使用下拉组件\n use-pullup:\n type: Boolean\n default: false\n en: if use pullup plugin\n zh-CN: 是否使用上拉组件\n pulldown-config:\n type: Object\n default: see below\n en: config for pulldown plugin\n zh-CN: 下拉组件配置\n pullup-config:\n type: Object\n default: see below\n en: config for pullup plugin\n zh-CN: 上拉组件配置\n scroll-bottom-offset:\n version: v2.2.1-rc.6\n type: Number\n default: 0\n en: where to emit event:on-scroll-bottom before reaching bottom\n zh-CN: 在距离底部多长距离时触发事件 on-scroll-bottom\nslots:\n default:\n en: scroller content, should has only one `div` root\n zh-CN: scroller 内容，必须是一个 `div` 元素\nmethods:\n reset:\n params: '`(position, duration, easing)`'\n en: 'reset scroller to reset height whenever your data is changed. easing can be one of ease-in, ease-in-out, ease, bezier(n, n, n, n)'\n zh-CN: '在内容变化(v-for渲染，异步数据加载)后需要调用，用以重新渲染，避免新加的内容无法上拉看到，一般在 $nextTick 回调里调用。easing 可以为 ease-in, ease-in-out, ease, bezier(n, n, n, n)'\n donePullup:\n en: set pullup done after new data is fetched\n zh-CN: 设置上拉刷新操作完成，在数据加载后执行\n disablePullup:\n en: disable pullup plugin when there is no more data\n zh-CN: 禁用上拉刷新，在没有更多数据时执行\n enablePullup:\n en: enable pullup plugin\n zh-CN: 启用上拉刷新插件\n donePulldown:\n en: set pulldown done after new data is fetched\n zh-CN: 设置下拉刷新操作完成，在数据加载后执行\nchanges:\n v2.6.1:\n en:\n - '[change] call `reset` in `updated` hook'\n zh-CN:\n - '[change] 在`updated` 钩子中调用`reset`'\n v2.2.1-rc.8:\n en:\n - '[change] set prop:prevent-default to false by default'\n zh-CN:\n - '[change] prop:prevent-default 默认设为 false'\n v2.2.1-rc.6:\n en:\n - '[feature] Support event:on-scroll-bottom'\n - '[fix] Disable trigger click'\n zh-CN:\n - '[feature] 支持滚动到底部时触发事件 on-scroll-bottom'\n - '[fix] 禁止点击事件触发，修复 pc 上触发两次的问题'\n v2.2.1-rc.4:\n en:\n - '[feature] Support duration and easing for reset function. #1240'\n zh-CN:\n - '[feature] 支持在滚回顶部时设置时间和缓动 #1240'\n v2.2.0:\n en:\n - '[fix] Fix issue when redirecting on scrolling #1187'\n - '[fix] Fix resize listener not being destroyed #1183'\n zh-CN:\n - '[fix] 修复 resize 事件没有移除导致切换页面报错 #1183'\n - '[fix] 修复滚动情况下跳转页面报错 #1187'\n" }, { "path": "src/components/search/index.vue", "content": "\n\n\ncancel_text:\n en: cancel\n zh-CN: 取消\nplaceholder:\n en: Search\n zh-CN: 搜索\n\n\n\n\n\n" }, { "path": "src/components/search/metas.yml", "content": "category:\n en: Form\n 'zh-CN': 表单\nicon: ''\ntags:\n en:\n - form\n - search\n zh-CN:\n - 表单\n - 搜索\nprops:\n placeholder:\n default: 搜索(search)\n en: placeholder text\n zh-CN: 提示文字\n cancel-text:\n default: 取消(cancel)\n en: cancel text\n zh-CN: 取消文字\n value:\n en: input value, use `v-model` for binding\n zh-CN: 表单值，`v-model`绑定\n results:\n type: Array\n en: \"search results, [{title: 'hello', otherData: otherValue}], will not show when auto-fixed is false\"\n zh-CN: \"指定搜索结果, 为带有 title key 的对象组成的数组，如 [{title: 'hello', otherData: otherValue}], auto-fixed 为 false 时不会显示结果\"\n auto-fixed:\n type: Boolean\n default: true\n en: if auto fixed on top when input gets focus\n zh-CN: 是否自动固定在顶端\n top:\n type: String\n default: '0px'\n en: top value when fixed on top\n zh-CN: 自动固定时距离顶部的距离\n position:\n type: String\n default: 'fixed'\n en: position value when pin the component on the top, one of `fixed`, `absolute`\n zh-CN: '自动固定时的定位，一些布局下可能需要使用其他定位，比如`absolute`'\n auto-scroll-to-top:\n type: Boolean\n default: false\n en: if auto scroll to top when input gets focus\n zh-CN: '`Safari`下弹出键盘时可能会出现看不到input，需要手动滚动，启用该属性会在fix时滚动到顶端'\n type:\n type: String\n default: search\n en: input type\n zh-CN: '即input的`type`属性'\nevents:\n on-submit:\n params: '`(value)`'\n en: emits when form is submitted\n zh-CN: 表单提交时触发\n on-cancel:\n en: emits when cancel button is clicked\n zh-CN: '点击`取消`按钮时触发'\n on-change:\n params: '`(value)`'\n en: emits when value is changed\n zh-CN: 输入文字变化时触发\n on-result-click:\n params: '`(item)`'\n en: emits when result item is clicked\n zh-CN: '点击结果条目时触发，原来的`result-click`事件不符合规范已经废弃'\n on-focus:\n version: v2.1.1-rc.10\n en: when input gets focus\n zh-CN: 输入框获取到焦点时触发\n on-blur:\n version: v2.6.3\n en: fires when input losts focus\n zh-CN: 输入框失去焦点时触发\n on-clear:\n version: v2.9.0\n en: fires when clicking clear icon\n zh-CN: 点击清除按钮时触发\nslots:\n default:\n en: slot above search result\n zh-CN: 搜索结果列表上面 slot，可以用来自定义搜索结果显示区域(results 设为空)\n right:\n en: slot on the right of input\n zh-CN: 输入框右侧 slot\n left:\n version: v2.3.5\n en: slot on the left of input\n zh-CN: 输入框左侧 slot\nmethods:\n setFocus:\n en: \"set focus on input. you should call this method in a click event's callback function on Safari\"\n zh-CN: 获取 input 焦点，在 Safari 上你必须在 click 事件回调里使用才能生效\n setBlur:\n version: v2.3.6\n en: make input lost focus\n zh-CN: 手动设置 input 失去焦点，一般用于在 on-submit 事件中实现隐藏手机键盘\nchanges:\n next:\n en:\n - '[feature] Add prop:type'\n zh-CN:\n - '[feature] 添加属性 type'\n v2.9.0:\n en:\n - '[feature] add event:on-clear #2251'\n zh-CN:\n - '[feature] 添加事件 on-clear #2251'\n 2.7.6:\n en:\n - '[fix] fix not emit on-change and input events when cancel or clear'\n zh-CN:\n - '[fix] 修复 在 cancel 或 clear 时没有触发 on-change 和 input 事件'\n v2.7.3:\n en:\n - '[fix] fix event:on-change fires before compositionend'\n zh-CN:\n - '[fix] 修复输入法导致 on-change 事件提前触发'\n v2.6.3:\n en:\n - '[feature] add event:on-blur'\n zh-CN:\n - '[feature] 添加事件 on-blur'\n v2.3.6:\n en:\n - '[feature] Add method:setBlur'\n zh-CN:\n - '[feature] 添加方法 setBlur'\n v2.3.5:\n en:\n - '[feature] Add slot:left'\n zh-CN:\n - '[feature] 增加 slot:left'\n v2.2.2:\n en:\n - '[enhance] Show search text on iOS keyboard'\n zh-CN:\n - '[enhance] 在 iOS 键盘上显示 search'\n v2.2.0:\n en:\n - '[enhance] emit on-change after input'\n zh-CN:\n - '[enhance] 在 input 后触发 on-change 事件(否则此时 v-model 绑定的值和参数不一致)'\n v2.1.1-rc.13:\n en:\n - '[feature] Add slot:right'\n zh-CN:\n - '[feature] 添加 slot=right'\n v2.1.1-rc.12:\n en:\n - '[enhance] do not emit on-change is isCancel = true'\n zh-CN:\n - '[enhance] 点击取消按钮后不再触发 on-change 事件'\n v2.1.1-rc.10:\n en:\n - '[feature] Add event on-focus'\n zh-CN:\n - '[feature] 支持 on-focus 事件'\n v2.1.0:\n zh-CN:\n - '[feature] 更新到`WeUI`最新代码'\n - '[enhance] 当`value`为空时，不显示清除按钮'\n v2.1.0-rc.47:\n zh-CN:\n - '[enhance] 删除无用代码'\n - '[fix] 修复`取消`按钮在非`fixed`情况下没有出现的问题 @excitedcat'\n - '[fix] 修复页面上多个实例时，`label id`冲突'\n" }, { "path": "src/components/search/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('Search', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('search')\n })\n})\n" }, { "path": "src/components/selector/index.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/selector/metas.yml", "content": "category:\n en: Form\n 'zh-CN': 表单\nicon: ''\nextra:\n zh-CN: |\n ```html\n \n \n \n ```\n\n ::: tip\n `selector`只能在`Group`中使用\n :::\n\n ::: warning\n 在`iOS`上，如果没有指定`placeholder`也没有指定`value`，会出现弹出选择框时默认选中第一个值，但是确定后依然没有选中的情况。\n
    \n 因此对于`iOS`，组件内部在列表项前面增加了一个空的`option`，强制用户滑动选择一次以避免上面的问题。\n :::\ntags:\n en:\n - form\n - select\n - selector\n - option\n zh-CN:\n - 选择\n - 下拉选择\ntips:\n -\n - en: key should be a `String` if you use key=>value\n - zh-CN: 选项的key必须是字符串，使用数字会出现问题\nprops:\n value:\n type: String,Number,Object\n en: form value, use `v-model` for binding\n zh-CN: 表单值，使用v-model绑定\n title:\n en: label text\n zh-CN: 标题\n direction:\n en: align value\n zh-CN: 选项对齐方式，同原生 select 属性一致，可选值为 ltr(left-to-right，默认), rtl\n options:\n type: Array\n en: \"option list, `['one', 'two']` or `[{ key: KEY, value: VALUE }]`\"\n zh-CN: '选项列表，可以为简单数组，或者 `{ key: KEY, value: VALUE }` 结构的键值对数组。当使用键值对时，返回的`value`为`key`的值。'\n name:\n en: form name\n zh-CN: 表单的name名字\n placeholder:\n en: placeholder\n zh-CN: 提示文字\n readonly:\n type: Boolean\n default: 'false'\n en: if the select is readonly\n zh-CN: 是否不可选择\n value-map:\n version: v2.7.2\n type: Array\n en: 'set a [value, label] pair for automatically transforming API data'\n zh-CN: 设置键值对映射用以自动转换接口数据, 如 ['value', 'label']\nevents:\n on-change:\n params: '`(value)`'\n en: emits when value is changed\n zh-CN: 值变化时触发\nmethods:\n getFullValue:\n version: v2.7.2\n en: get full value including all the props(if option items are object)\n zh-CN: 获取当前完整值，在使用了 valueMap 里可以用该方法来获取当前选中值的原始对象\nchanges:\n 2.9.3:\n en:\n - '[fix] fix the chinese bracket show error when direction=rtl #2864'\n zh-CN:\n - '[fix] 修复direction=rtl时的中文括号显示异常 #2864'\n v2.9.0:\n en:\n - '[fix] avoid newer-version-vue select value issue #2633 #2587'\n - '[enhance] use v-html for title #2615'\n zh-CN:\n - '[fix] 修复新版本 vue 导致的 select 值问题 #2633 #2587'\n - '[enhance] 标题使用 v-html #2615'\n v2.7.2:\n en:\n - '[feature] add prop:value-map for automatically transform API data #2139'\n - '[feature] add method:getFullValue for getting full value'\n zh-CN:\n - '[feature] 支持 value-map 属性用以自动转换 API 数据 #2139'\n - '[feature] 支持 getFullValue 方法获取当中选中值的原始数据'\n v2.7.0:\n en:\n - '[fix] fix ssr rendering issue'\n - '[fix] fix placeholder not show when value is null #2101'\n zh-CN:\n - '[fix] 兼容服务端渲染'\n - '[fix] 修复值为 null 时 placeholder 没有显示的问题 #2101'\n v2.3.3:\n en:\n - '[enhance] set placeholder color. #1465'\n zh-CN:\n - '[enhance] 设置 placeholder 颜色. #1465'\n v2.2.2:\n en:\n - '[fix] fix label:for missing'\n zh-CN:\n - '[fix] 修复 label for 属性值缺失'\n v2.2.1-rc.6:\n en:\n - '[fix] fix placeholder. #1273'\n zh-CN:\n - '[fix] 修复 placeholder 逻辑问题. #1273'\n v2.1.1-rc.14:\n en:\n - '[fix] fix can not set Selector name attrbiute bug #1133'\n - '[enhance] Selector value support Boolean. @rbao'\n zh-CN:\n - '[fix] 修复Selector不能设置name属性的问题#1133'\n - '[enhance] Selector的value支持布尔型. @rbao'\n" }, { "path": "src/components/selector/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('Selector', () => {\n it('basic', () => {\n const wrapper = mount(Comp, {\n propsData: {\n options: []\n }\n })\n expect(wrapper.name()).to.equal('selector')\n })\n})\n" }, { "path": "src/components/shake/index.vue", "content": "\n\n\n" }, { "path": "src/components/spinner/index.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/spinner/metas.yml", "content": "category:\n en: Feedback\n zh-CN: 弹窗提示\nicon: ''\nprops:\n type:\n type: String\n default: 'ios'\n en: icon type\n zh-CN: 图标类型\nchanges:\n v2.3.6:\n en:\n - '[feature] Support prop:size #1447'\n zh-CN:\n - '[feature] 支持 prop:size #1447'" }, { "path": "src/components/spinner/requestAnimationFrame.js", "content": "var lastTime = 0\nvar vendors = ['webkit', 'moz']\nfor (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {\n window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame']\n window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame']\n}\n\nif (!window.requestAnimationFrame) {\n window.requestAnimationFrame = function (callback, element) {\n var currTime = new Date().getTime()\n var timeToCall = Math.max(0, 16 - (currTime - lastTime))\n var id = window.setTimeout(function () {\n callback(currTime + timeToCall)\n }, timeToCall)\n lastTime = currTime + timeToCall\n return id\n }\n}\nif (!window.cancelAnimationFrame) {\n window.cancelAnimationFrame = function (id) {\n clearTimeout(id)\n }\n}\n" }, { "path": "src/components/spinner/spinner.js", "content": "/**\n* http://ionicframework.com/docs/api/directive/ionSpinner/\n*/\n\nimport './requestAnimationFrame'\n\nvar TRANSLATE32 = 'translate(32,32)'\nvar STROKE_OPACITY = 'stroke-opacity'\nvar ROUND = 'round'\nvar INDEFINITE = 'indefinite'\nvar DURATION = '750ms'\nvar NONE = 'none'\nvar SHORTCUTS = {\n a: 'animate',\n an: 'attributeName',\n at: 'animateTransform',\n c: 'circle',\n da: 'stroke-dasharray',\n os: 'stroke-dashoffset',\n f: 'fill',\n lc: 'stroke-linecap',\n rc: 'repeatCount',\n sw: 'stroke-width',\n t: 'transform',\n v: 'values'\n}\n\nvar SPIN_ANIMATION = {\n v: '0,32,32;360,32,32',\n an: 'transform',\n type: 'rotate',\n rc: INDEFINITE,\n dur: DURATION\n}\n\nfunction createSvgElement (tagName, data, parent, spinnerName, size) {\n var ele = document.createElement(SHORTCUTS[tagName] || tagName)\n var k, x, y\n\n for (k in data) {\n if (Object.prototype.toString.call(data[k]) === '[object Array]') {\n for (x = 0; x < data[k].length; x++) {\n if (data[k][x].fn) {\n for (y = 0; y < data[k][x].t; y++) {\n createSvgElement(k, data[k][x].fn(y, spinnerName), ele, spinnerName)\n }\n } else {\n createSvgElement(k, data[k][x], ele, spinnerName)\n }\n }\n } else {\n setSvgAttribute(ele, k, data[k])\n }\n }\n if (size && size !== '28px') {\n setSvgAttribute(ele, 'style', `width: ${size}; height: ${size}`)\n }\n parent.appendChild(ele)\n}\n\nfunction setSvgAttribute (ele, k, v) {\n ele.setAttribute(SHORTCUTS[k] || k, v)\n}\n\nfunction animationValues (strValues, i) {\n var values = strValues.split(';')\n var back = values.slice(i)\n var front = values.slice(0, values.length - back.length)\n values = back.concat(front).reverse()\n return values.join(';') + ';' + values[0]\n}\n\nvar IOS_SPINNER = {\n sw: 4,\n lc: ROUND,\n line: [{\n fn (i, spinnerName) {\n return {\n y1: spinnerName === 'ios' ? 17 : 12,\n y2: spinnerName === 'ios' ? 29 : 20,\n t: TRANSLATE32 + ' rotate(' + (30 * i + (i < 6 ? 180 : -180)) + ')',\n a: [{\n fn () {\n return {\n an: STROKE_OPACITY,\n dur: DURATION,\n v: animationValues('0;.1;.15;.25;.35;.45;.55;.65;.7;.85;1', i),\n rc: INDEFINITE\n }\n },\n t: 1\n }]\n }\n },\n t: 12\n }]\n}\n\nvar spinners = {\n\n android: {\n c: [{\n sw: 6,\n da: 128,\n os: 82,\n r: 26,\n cx: 32,\n cy: 32,\n f: NONE\n }]\n },\n\n ios: IOS_SPINNER,\n\n 'ios-small': IOS_SPINNER,\n\n bubbles: {\n sw: 0,\n c: [{\n fn (i) {\n return {\n cx: 24 * Math.cos(2 * Math.PI * i / 8),\n cy: 24 * Math.sin(2 * Math.PI * i / 8),\n t: TRANSLATE32,\n a: [{\n fn () {\n return {\n an: 'r',\n dur: DURATION,\n v: animationValues('1;2;3;4;5;6;7;8', i),\n rc: INDEFINITE\n }\n },\n t: 1\n }]\n }\n },\n t: 8\n }]\n },\n\n circles: {\n\n c: [{\n fn (i) {\n return {\n r: 5,\n cx: 24 * Math.cos(2 * Math.PI * i / 8),\n cy: 24 * Math.sin(2 * Math.PI * i / 8),\n t: TRANSLATE32,\n sw: 0,\n a: [{\n fn () {\n return {\n an: 'fill-opacity',\n dur: DURATION,\n v: animationValues('.3;.3;.3;.4;.7;.85;.9;1', i),\n rc: INDEFINITE\n }\n },\n t: 1\n }]\n }\n },\n t: 8\n }]\n },\n\n crescent: {\n c: [{\n sw: 4,\n da: 128,\n os: 82,\n r: 26,\n cx: 32,\n cy: 32,\n f: NONE,\n at: [SPIN_ANIMATION]\n }]\n },\n\n dots: {\n\n c: [{\n fn (i) {\n return {\n cx: 16 + (16 * i),\n cy: 32,\n sw: 0,\n a: [{\n fn () {\n return {\n an: 'fill-opacity',\n dur: DURATION,\n v: animationValues('.5;.6;.8;1;.8;.6;.5', i),\n rc: INDEFINITE\n }\n },\n t: 1\n }, {\n fn () {\n return {\n an: 'r',\n dur: DURATION,\n v: animationValues('4;5;6;5;4;3;3', i),\n rc: INDEFINITE\n }\n },\n t: 1\n }]\n }\n },\n t: 3\n }]\n },\n\n lines: {\n sw: 7,\n lc: ROUND,\n line: [{\n fn (i) {\n return {\n x1: 10 + (i * 14),\n x2: 10 + (i * 14),\n a: [{\n fn () {\n return {\n an: 'y1',\n dur: DURATION,\n v: animationValues('16;18;28;18;16', i),\n rc: INDEFINITE\n }\n },\n t: 1\n }, {\n fn () {\n return {\n an: 'y2',\n dur: DURATION,\n v: animationValues('48;44;36;46;48', i),\n rc: INDEFINITE\n }\n },\n t: 1\n }, {\n fn () {\n return {\n an: STROKE_OPACITY,\n dur: DURATION,\n v: animationValues('1;.8;.5;.4;1', i),\n rc: INDEFINITE\n }\n },\n t: 1\n }]\n }\n },\n t: 4\n }]\n },\n\n ripple: {\n f: NONE,\n 'fill-rule': 'evenodd',\n sw: 3,\n circle: [{\n fn (i) {\n return {\n cx: 32,\n cy: 32,\n a: [{\n fn () {\n return {\n an: 'r',\n begin: (i * -1) + 's',\n dur: '2s',\n v: '0;24',\n keyTimes: '0;1',\n keySplines: '0.1,0.2,0.3,1',\n calcMode: 'spline',\n rc: INDEFINITE\n }\n },\n t: 1\n }, {\n fn () {\n return {\n an: STROKE_OPACITY,\n begin: (i * -1) + 's',\n dur: '2s',\n v: '.2;1;.2;0',\n rc: INDEFINITE\n }\n },\n t: 1\n }]\n }\n },\n t: 2\n }]\n },\n\n spiral: {\n defs: [{\n linearGradient: [{\n id: 'sGD',\n gradientUnits: 'userSpaceOnUse',\n x1: 55,\n y1: 46,\n x2: 2,\n y2: 46,\n stop: [{\n offset: 0.1,\n class: 'stop1'\n }, {\n offset: 1,\n class: 'stop2'\n }]\n }]\n }],\n g: [{\n sw: 4,\n lc: ROUND,\n f: NONE,\n path: [{\n stroke: 'url(#sGD)',\n d: 'M4,32 c0,15,12,28,28,28c8,0,16-4,21-9'\n }, {\n d: 'M60,32 C60,16,47.464,4,32,4S4,16,4,32'\n }],\n at: [SPIN_ANIMATION]\n }]\n }\n\n}\n\nvar animations = {\n\n android (ele) {\n var self = this\n\n this.stop = false\n\n var rIndex = 0\n var rotateCircle = 0\n var startTime\n var svgEle = ele.querySelector('g')\n var circleEle = ele.querySelector('circle')\n\n function run () {\n if (self.stop) return\n\n var v = easeInOutCubic(Date.now() - startTime, 650)\n var scaleX = 1\n var translateX = 0\n var dasharray = (188 - (58 * v))\n var dashoffset = (182 - (182 * v))\n\n if (rIndex % 2) {\n scaleX = -1\n translateX = -64\n dasharray = (128 - (-58 * v))\n dashoffset = (182 * v)\n }\n\n var rotateLine = [0, -101, -90, -11, -180, 79, -270, -191][rIndex]\n\n setSvgAttribute(circleEle, 'da', Math.max(Math.min(dasharray, 188), 128))\n setSvgAttribute(circleEle, 'os', Math.max(Math.min(dashoffset, 182), 0))\n setSvgAttribute(circleEle, 't', 'scale(' + scaleX + ',1) translate(' + translateX + ',0) rotate(' + rotateLine + ',32,32)')\n\n rotateCircle += 4.1\n if (rotateCircle > 359) rotateCircle = 0\n setSvgAttribute(svgEle, 't', 'rotate(' + rotateCircle + ',32,32)')\n\n if (v >= 1) {\n rIndex++\n if (rIndex > 7) rIndex = 0\n startTime = Date.now()\n }\n\n window.requestAnimationFrame(run)\n }\n\n return function () {\n startTime = Date.now()\n run()\n return self\n }\n }\n\n}\n\nfunction easeInOutCubic (t, c) {\n t /= c / 2\n if (t < 1) return 1 / 2 * t * t * t\n t -= 2\n return 1 / 2 * (t * t * t + 2)\n}\n\nexport default function (el, icon, size) {\n var spinnerName, anim // eslint-disable-line\n spinnerName = icon\n var container = document.createElement('div')\n createSvgElement('svg', {\n viewBox: '0 0 64 64',\n g: [spinners[spinnerName]]\n }, container, spinnerName, size)\n\n // Specifically for animations to work,\n // Android 4.3 and below requires the element to be\n // added as an html string, rather than dynmically\n // building up the svg element and appending it.\n el.innerHTML = container.innerHTML\n start()\n function start () {\n if (animations[spinnerName]) {\n anim = animations[spinnerName](el)()\n }\n }\n return el\n}\n" }, { "path": "src/components/step/index.js", "content": "import Step from './step'\nimport StepItem from './step-item'\n\nexport {\n Step,\n StepItem\n}\n" }, { "path": "src/components/step/metas.yml", "content": "category:\n en: Data Display\n zh-CN: 数据展示\nicon: ''\nitems: \n - step\n - step-item\nstep:\n props: \nstep-item:\n props:\nchanges:\n v2.1.1-rc.13:\n en:\n - '[fix] use export instead of module.exports'\n zh-CN:\n - '[fix] 修复 import 和 module.exports 混用的问题'" }, { "path": "src/components/step/step-item.vue", "content": "\n\n\n" }, { "path": "src/components/step/step.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/sticky/index.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/sticky/metas.yml", "content": "category:\n en: Layout\n zh-CN: 布局\nicon: ''\ntags:\n en:\n - layout\n - sticky\n zh-CN:\n - 布局\n - 定位\nextra: |\n ::: tip\n 在Chrome模拟器运行时你可能会发现没有效果，这是因为Chrome并不支持原生sticky实现而模拟器环境是iPhone，目前程序是根据Safari版本来判断是否原生支持sticky。因此你可以切换到Android系统进行测试，但是真机上是完全正常的交互。\n
    \n
    \n 你也可以设置禁用原生支持检测以获得相同的效果：`:check-sticky-support=\"false\"`\n :::\n\n 如果你没有使用`100%`的布局，也没有头部可以直接这样使用\n\n ``` html\n \n
    Blabla
    \n     \n ```\n\n 如果你像demo一样使用`view-box`和`x-header`，那么需要这样：\n\n ``` html\n \n
    Blabla
    \n     \n ```\n\n 建议加一个`div`高度为内容高度，这样可以避免当定位为`sticky`时下面的元素会突然向上走。\n\n ``` html\n // 禁用原生检测时，可以在外围加\n
    \n \n
    Blabla
    \n     \n
    \n\n // 使用原生检测时，`div`紧挨着组件之后，并设置类名`vux-sticky-fill`\n \n
    Blabla
    \n     \n
    \n ```\n\n ::: warning\n 请不要直接照复制 demo 代码，滚动容器为 window 时请不要指定 scroll-box，滚动容器并非使用 `view-box` 时 id 并不是 `vux_view_box_body`，请按照实际情况来设定。\n :::\n\n\nprops:\n scroll-box:\n default: window\n en: scroll tagget\n zh-CN: '滚动容器，默认为`window`，如果你使用了viewbox，那么你需要指定容器id：`vux_view_box_body`'\n check-sticky-support:\n type: Boolean\n default: 'true'\n en: if check if sticky is supported on current browser\n zh-CN: 是否检测当前浏览器是否支持sticky特性，禁用则在`iPhone`设置上也使用`scroll`实现\n offset:\n type: Number\n default: 0\n en: top distance\n zh-CN: '距离顶部高度，在存在头部（如使用了`x-header`）的情况下需要设置一个距离'\n disabled:\n version: v2.9.0\n type: Boolean\n default: false\n en: whether disable sticky\n zh-CN: 是否禁用，在某些浏览器禁用，比如万恶的 UC\nslots:\n default:\n en: content\n zh-CN: 内容插槽\nmethods:\n bindSticky:\n version: v2.5.4\n en: manually re-bind sticky\n zh-CN: 手动重新绑定，用于内容变化导致位置变化定位不再正确的情况\ntips:\n zh-CN:\n - \n q: 定位位置、时机不正确\n a: |\n 出现这个问题可能是由于在 sticky 上方布局存在异步加载内容，比如图片、延迟加载的内容块。\n\n 这些情况下需要自己判断正确的加载完成的时机调用 `bindSticky` 方法。如果知道图片或者延迟加载的区域大小可以直接设置尺寸用以占位，其他情况下要根据实际情况处理。\n\n 相关 issue: [#2564](https://github.com/airyland/vux/issues/2564)。\n -\n q: UC 浏览器下闪烁跳动\n a: |\n\n `UC 浏览器`的 webview 不支持 `sticky` 也无法实时响应 `onscroll` 事件，fixed 定位的元素会在滚动时跳动，暂时无法解决。\n\n 如果面对的用户群使用 UC 浏览器，建议暂时使用绑定属性 `disabled` 来禁用功能。\n\n\n ``` js\n data () {\n return {\n disabled: typeof navigator !== 'undefined' && /iphone/i.test(navigator.userAgent) && /ucbrowser/i.test(navigator.userAgent)\n }\n }\n ```\n\n 如果你有解决方案，欢迎来 PR 贡献。\n\n 相关 issue [#2601](https://github.com/airyland/vux/issues/2601)。\n\nchanges:\n v2.9.0:\n en:\n - '[feature] add prop:disabled #2601'\n - '[enhance] add development tip if scroll-box doesnot exist'\n zh-CN:\n - '[feature] 添加属性 disabled #2601'\n - '[enhance] scroll-box 不存在时在开发模式下进行提示'\n v2.7.7:\n en:\n - '[fix] Fix the problem of inaccurate positioning and invalid positioning 0 #2367'\n zh-CN:\n - '[fix] 修复定位不准确和定位无效的问题 #2367'\n v2.5.9:\n en:\n - '[fix] Fix scrollTop always return 0 #1827'\n zh-CN:\n - '[fix] 修复 scrollTop 总是返回0的问题 #1827'\n v2.5.4:\n en:\n - '[fix] Auto re-bind after router-view transition is finished'\n - '[fix] Fix position fixed not work in ios #1657'\n zh-CN:\n - '[fix] 在 router-view 动画结束后自动重新绑定'\n - '[fix] 修复在ios上fixed不生效的问题 #1657'\n v2.1.1-rc.1:\n en:\n - '[fix] Fix wrong offset after transition between routes'\n - '[enhance] Set z-index #976 @olymk'\n zh-CN:\n - '[fix] 修复路由间有过渡动画导致顶部距离计算不准确的问题'\n - '[enhance] 设置 z-index 避免被覆盖 #976 @olymk'\n" }, { "path": "src/components/sticky/sticky.js", "content": "// http://efe.baidu.com/blog/position-sticky/\n\n// 检测iOS版本大于等于6\nfunction gtIOS6 () {\n var userAgent = window.navigator.userAgent\n var ios = userAgent.match(/(iPad|iPhone|iPod)\\s+OS\\s([\\d_.]+)/)\n return ios && ios[2] && (parseInt(ios[2].replace(/_/g, '.'), 10) >= 6)\n}\n\n// 判断是否支持sticky属性\nfunction isSupportSticky () {\n var prefixTestList = ['', '-webkit-', '-ms-', '-moz-', '-o-']\n var stickyText = ''\n for (var i = 0; i < prefixTestList.length; i++) {\n stickyText += 'position:' + prefixTestList[i] + 'sticky'\n }\n // 创建一个dom来检查\n var div = document.createElement('div')\n var body = document.body\n div.style.cssText = 'display:none' + stickyText\n body.appendChild(div)\n var isSupport = /sticky/i.test(window.getComputedStyle(div).position)\n body.removeChild(div)\n div = null\n return isSupport\n}\n\nexport default function (nav, options = {}) {\n let scrollBox = options.scrollBox || window\n let offset = options.offset || 0\n const checkStickySupport = options.checkStickySupport === true || false\n if (typeof scrollBox === 'string') {\n scrollBox = document.getElementById(scrollBox)\n if (!scrollBox) {\n if (process.env.NODE_ENV === 'development') {\n console.error('[VUX] sticky:scroll-box element doesn\\'t exist')\n }\n return\n }\n }\n\n let navOffsetY = nav.offsetTop - offset\n scrollBox.removeEventListener('scroll', scrollBox.e)\n\n const getTop = function () {\n if (scrollBox === window) {\n return (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop\n } else {\n return scrollBox.scrollTop\n }\n }\n\n const getFillElem = function (el) {\n let next = el.nextSibling\n // 寻找最近的一个兄弟元素\n while (next.nodeType !== 1) {\n next = next.nextSibling\n }\n if (next.classList.contains('vux-sticky-fill')) {\n return next\n }\n // 没有使用vux-sticky-fill按照之前的方式获取外层容器\n return el.parentNode\n }\n\n const scrollHandler = function () {\n const distance = getTop()\n if (distance > navOffsetY) {\n nav.style.top = offset + 'px'\n nav.classList.add('vux-fixed')\n } else {\n nav.classList.remove('vux-fixed')\n }\n }\n\n if (checkStickySupport && (gtIOS6() || isSupportSticky())) {\n nav.style.top = offset + 'px'\n // 大于等于iOS6版本使用sticky\n nav.classList.add('vux-sticky')\n } else {\n if (nav.classList.contains('vux-fixed')) {\n const top = getTop()\n navOffsetY = getFillElem(nav).offsetTop - offset\n if (top < navOffsetY) {\n nav.classList.remove('vux-fixed')\n }\n } else {\n navOffsetY = nav.offsetTop - offset\n }\n scrollBox.e = scrollHandler\n scrollBox.addEventListener('scroll', scrollHandler)\n }\n}\n" }, { "path": "src/components/swipeout/index.js", "content": "/**\n* Thanks to: http://jdc.jd.com/demo/slide_to_remove/\n*/\n\nimport Swipeout from './swipeout.vue'\nimport SwipeoutItem from './swipeout-item.vue'\nimport SwipeoutButton from './swipeout-button.vue'\n\nexport {\n Swipeout,\n SwipeoutItem,\n SwipeoutButton\n}\n" }, { "path": "src/components/swipeout/metas.yml", "content": "category:\r\n en: Form\r\n zh-CN: 表单\r\nicon: ''\r\nname: swipeout\r\nimport_code: ' '\r\nextra: |\r\n \r\n ``` js\r\n import { Swipeout, SwipeoutItem, SwipeoutButton } from 'vux'\r\n ```\r\n\r\nitems:\r\n - swipeout\r\n - swipeout-item\r\n - swipeout-button\r\nswipeout:\r\n sub_extra: |\r\n 包装子组件的wrap组件\r\n slots:\r\n default:\r\n zh-CN: 子组件插槽\r\nswipeout-button:\r\n props:\r\n text:\r\n zh-CN: '按钮文字，同`slot=default`'\r\n background-color:\r\n zh-CN: 背景颜色\r\n type:\r\n zh-CN: '内置的颜色类型，可选`primary`, `warn`'\r\n width:\r\n default: 80\r\n zh-CN: 按钮宽度\r\n disabled:\r\n type: Boolean\r\n default: false\r\n en: if disabled\r\n zh-CN: 是否禁用\r\nswipeout-item:\r\n props:\r\n sensitivity:\r\n type: Number\r\n default: 0\r\n zh-CN: 滑动多少距离后开始触发菜单显示\r\n auto-close-on-button-click:\r\n type: Boolean\r\n default: true\r\n zh-CN: 点击按钮后是否收回菜单\r\n disabled:\r\n type: Boolean\r\n default: false\r\n zh-CN: 是否不可滑动\r\n threshold:\r\n type: Number\r\n default: 0.3\r\n zh-CN: 滑动多少距离后自动打开菜单，否则收回。可以为小于1的比例或者宽度值\r\n transition-mode:\r\n type: String\r\n default: reveal\r\n zh-CN: 菜单打开方式，`reveal`表示菜单不动内容滑出，`follow`表示菜单随内容滑出\r\n methods:\r\n open:\r\n params: '`(direction)`'\r\n zh-CN: 打开菜单，参数为方向\r\n close:\r\n zh-CN: 关闭菜单\r\n slots:\r\n left-menu:\r\n zh-CN: 左菜单\r\n right-menu:\r\n zh-CN: 右菜单\r\n events:\r\n on-open:\r\n zh-CN: 菜单完全打开时触发\r\n on-close:\r\n zh-CN: 菜单完全关闭时触发\r\nchanges:\r\n next:\r\n en:\r\n - '[feature] Add prop:disabled'\r\n zh-CN:\r\n - '[feature] 添加属性 disabled'\r\n v2.5.5:\r\n en:\r\n - '[enhance] swipeout-item add render method #1688'\r\n zh-CN:\r\n - '[enhance] swipeout-item 新增 render 方法 #1688'\r\n v2.1.1-rc.9:\r\n en:\r\n - '[fix] Fix left-menu is shown when swiping right quickly'\r\n zh-CN:\r\n - '[fix] 修复向右快速滑动时左侧菜单可能会被滑出'\r\n v2.1.1-rc.7:\r\n en:\r\n - '[fix] Fix button click on Android. #1044 @tangtaoit'\r\n zh-CN:\r\n - '[fix] 修复 Android 下按钮点击事件不触发问题 #1044 @tangtaoit'\r\n v2.1.0-rc.50:\r\n zh-CN:\r\n - '[feature] `swipeout`组件`beta`版本'\r\n v2.1.1-rc.14:\r\n en:\r\n - '[fix] Fix left-menu is shown when sliding back and forth #1139'\r\n zh-CN:\r\n - '[fix] 修复来回滑动时左侧菜单可能会被滑出 #1139'\r\n v2.2.0:\r\n en:\r\n - '[fix] Fix cannot scroll when disabled'\r\n - '[fix] Fix unable to trigger click event when disabled on android'\r\n zh-CN:\r\n - '[fix] 修复disabled时不能上下滚动问题'\r\n - '[fix] 修复disabled时，安卓手机上不能触发点击事件的问题'\r\n" }, { "path": "src/components/swipeout/swipeout-button.vue", "content": "\n\n" }, { "path": "src/components/swipeout/swipeout-item.vue", "content": "\n\n\n" }, { "path": "src/components/swipeout/swipeout.vue", "content": "\n\n\n\n" }, { "path": "src/components/swiper/index.js", "content": "import Swiper from './swiper.vue'\nimport SwiperItem from './swiper-item'\n\nexport {\n Swiper,\n SwiperItem\n}\n" }, { "path": "src/components/swiper/metas.yml", "content": "category:\n en: Data Display\n zh-CN: 数据展示\nicon: ''\nextra: |\n ::: tip\n `list`为图片列表快捷设置，如果你需要自定义一些样式，或者内容并不为纯图片，可以引用`swiper-item`组件来自定义。\n
    \n `list` 格式如下\n
    \n\n ``` js\n [{\n url: 'javascript:',\n img: 'https://static.vux.li/demo/1.jpg',\n title: '送你一朵fua'\n }, {\n url: 'javascript:',\n img: 'https://static.vux.li/demo/5.jpg',\n title: '送你一次旅行',\n fallbackImg: 'https://static.vux.li/demo/3.jpg'\n }]\n ```\n\n `fallbackImg` 在 `v2.5.13` 支持，它将在 `img` 加载失败时显示，注意的是 `fallbackImg` 可能会在 `img` 加载成功时也进行了加载，只是不会显示（取决于浏览器实现）。\n\n :::\n\n ::: warning\n 不要在`swiper`里嵌套`scroller`，在`web`上过于复杂化而且手势会有冲突，相关`Issue`将不会处理。\n
    \n
    \n 该组件场景是固定高度的内容列表，不支持为不同 swiper-item 设置不同高度。\n
    \n
    \n 如果确实需要设置不同高度，可以通过 ref 获取 swiper, 通过 this.$refs.swiper.xheight = '100px' 设置。 切记，需要放在 $nextTick 中执行。\n :::\ntips:\n zh-CN:\n -\n q: swiper-item 只有两项时无法循环播放\n a: |\n 是的，建议直接使用 `list` 来实现循环。因为实现原理是对`swiper-item`元素进行移动，需要至少有`3`个`swiper-item`才能保证有上一张和下一张可以切换。\nprops:\n list:\n type: Array\n en: image list, use swiper-item if you need to customize style\n zh-CN: 轮播图片列表，如果有自定义样式需求，请使用 swiper-item(使用 swiper-item 时仅有2个的情况下不支持循环)\n direction:\n type: String\n default: horizontal\n en: swiping direction\n zh-CN: 方向\n show-dots:\n type: Boolean\n default: true\n en: if show indicators\n zh-CN: 是否显示提示点\n show-desc-mask:\n type: Boolean\n default: true\n en: if show description mask\n zh-CN: 是否显示描述半透明遮罩\n dots-position:\n type: String\n default: right\n en: indicator position\n zh-CN: 提示点位置\n dots-class:\n en: custom indicator's classname\n zh-CN: 提示className\n auto:\n type: Boolean\n default: false\n en: if auto playing\n zh-CN: 是否自动轮播\n loop:\n type: Boolean\n default: false\n en: if use loop mode\n zh-CN: 是否循环\n interval:\n type: Number\n default: 3000\n en: interval value\n zh-CN: 轮播停留时长\n threshold:\n type: Number\n default: 50\n en: threshold value\n zh-CN: 当滑动超过这个距离时才滑动\n duration:\n type: Number\n default: 300\n en: transition duration\n zh-CN: 切换动画时间\n height:\n type: String\n default: 180px\n en: height value\n zh-CN: '高度值。如果为`100%`宽度并且知道宽高比，可以设置`aspect-ratio`自动计算高度'\n aspect-ratio:\n type: Number\n en: if specified, height will be caculated automatically\n zh-CN: 用以根据当前可用宽度计算高度值\n min-moving-distance:\n type: Number\n default: 0\n en: min distance before moving\n zh-CN: 超过这个距离时才滑动\n v-model:\n type: Number\n default: 0\n en: index value, use `v-model` for binding\n zh-CN: index 绑定，使用`v-model`，一般不需要绑定\nevents:\n on-index-change:\n params: '`(currentIndex)`'\n en: fires when index is changed\n zh-CN: 轮播 index 变化时触发\n on-get-height:\n version: v2.7.0\n params: '`(height)`'\n en: fires after height is caculated\n zh-CN: 高度获取后触发\nchanges:\n v2.9.2:\n en:\n - '[fix] fix stuck swipe after setting min-moving-distance #2773'\n - '[fix] fix error for repeat setting data in loop #2803'\n zh-CN:\n - '[fix] 修复设置最小移动距离后滑动卡住 #2773'\n - '[fix] 修复在循环模式下重复设置数据的错误 #2803'\n v2.7.7:\n en:\n - '[fix] fix cannot scroll body when touching with one item'\n zh-CN:\n - '[fix] 修复只有一个 item 时无法滚动页面的问题'\n v2.7.6:\n en:\n - '[enhance] stop moving width one item'\n zh-CN:\n - '[enhance] 只有一张图片时阻止滑动跟随'\n v2.7.0:\n en:\n - '[enhance] set shorter distance for first and last item for better experience'\n - '[feature] add event:on-get-height #2112'\n - '[enhance] stop interval if auto is set to false #2027'\n zh-CN:\n - '[enhance] 非循环模式下对第一张和最后一张使用更短的拖动距离'\n - '[feature] 添加事件 event:on-get-height #2112'\n - '[enhance] auto 支持动态设置 #2027'\n v2.6.0:\n en:\n - '[enhance] support fallbackImg for prop:list #1923'\n zh-CN:\n - '[enhance] 支持 list.fallbackImg 属性在图片加载失败时显示预设图片 #1923'\n v2.5.3:\n en:\n - '[fix] clear listTtwoLoopItem when list size !== 2 #1684 @weizs'\n zh-CN:\n - '[fix] 轮播个数不为2时清除 listTtwoLoopItem 列表 #1684 @weizs'\n v2.5.1:\n en:\n - '[fix] Fix array-from issue with webpack@3 #1649'\n zh-CN:\n - '[fix] 修复 array-from 在 webpack@3 下报错问题 #1649'\n v2.3.5:\n en:\n - '[fix] Fix repeat render bug #1458'\n zh-CN:\n - '[fix] 修复重复渲染问题 #1458'\n v2.3.4:\n en:\n - '[fix] Fix click to fail when only two swiper-item and loop #1484 @unclay'\n zh-CN:\n - '[fix] 修复只有两个轮播图且为 loop 时点击失效问题 #1484 @unclay'\n v2.2.1-rc.2:\n en:\n - '[enhance] Use document width as swiper width if initial width is 0 #1188'\n - '[fix] Fix initial index > 0 not works'\n zh-CN:\n - '[enhance] 如果初始化时获取不到宽度则直接使用视口宽度 #1188'\n - '[fix] 修复初始化时 index > 0 不生效'\n v2.1.1-rc.3:\n en:\n - '[fix] Fix nodes list forEach function is undefined #991 @howyhuang'\n zh-CN:\n - '[fix] 修复 node 列表没有 forEach 方法 #991 @howyhuang'\n v2.1.1-rc.2:\n en:\n - '[fix] Fix es6 iterator compability, use forEach'\n zh-CN:\n - '[fix] 修复部分机子不支持 for of 遍历'\n" }, { "path": "src/components/swiper/swiper-item.vue", "content": "\n\n\n" }, { "path": "src/components/swiper/swiper.js", "content": "import objectAssign from 'object-assign'\nconst arrayFrom = (nodeList) => Array.prototype.slice.call(nodeList)\n\nclass Swiper {\n constructor (options) {\n this._default = {\n container: '.vux-swiper',\n item: '.vux-swiper-item',\n direction: 'vertical',\n activeClass: 'active',\n threshold: 50,\n duration: 300,\n auto: false,\n loop: false,\n interval: 3000,\n height: 'auto',\n minMovingDistance: 0\n }\n this._options = objectAssign(this._default, options)\n this._options.height = this._options.height.replace('px', '')\n this._start = {}\n this._move = {}\n this._end = {}\n this._eventHandlers = {}\n this._prev = this._current = this._goto = 0\n this._width = this._height = this._distance = 0\n this._offset = []\n this.$box = this._options.container\n this.$container = this._options.container.querySelector('.vux-swiper')\n this.$items = this.$container.querySelectorAll(this._options.item)\n this.count = this.$items.length\n this.realCount = this.$items.length // real items length\n this._position = [] // used by go event\n this._firstItemIndex = 0\n this._isMoved = false // used by minMovingDistance #2773\n if (!this.count) {\n return\n }\n this._init()\n this._auto()\n this._bind()\n this._onResize()\n return this\n }\n\n _auto () {\n const me = this\n me.stop()\n if (me._options.auto) {\n me.timer = setTimeout(() => {\n me.next()\n }, me._options.interval)\n }\n }\n\n updateItemWidth () {\n this._width = this.$box.offsetWidth || document.documentElement.offsetWidth\n this._distance = this._options.direction === 'horizontal' ? this._width : this._height\n }\n\n stop () {\n this.timer && clearTimeout(this.timer)\n }\n\n _loop () {\n return this._options.loop && this.realCount >= 3\n }\n\n _onResize () {\n const me = this\n this.resizeHandler = () => {\n setTimeout(() => {\n me.updateItemWidth()\n me._setOffset()\n me._setTransform()\n }, 100)\n }\n window.addEventListener('orientationchange', this.resizeHandler, false)\n }\n\n _init () {\n this._height = this._options.height === 'auto' ? 'auto' : this._options.height - 0\n this.updateItemWidth()\n this._initPosition()\n this._activate(this._current)\n this._setOffset()\n this._setTransform()\n if (this._loop()) {\n this._loopRender()\n }\n }\n\n _initPosition () {\n for (let i = 0; i < this.realCount; i++) {\n this._position.push(i)\n }\n }\n\n _movePosition (position) {\n const me = this\n if (position > 0) {\n let firstIndex = me._position.splice(0, 1)\n me._position.push(firstIndex[0])\n } else if (position < 0) {\n let lastIndex = me._position.pop()\n me._position.unshift(lastIndex)\n }\n }\n\n _setOffset () {\n let me = this\n let index = me._position.indexOf(me._current)\n me._offset = []\n arrayFrom(me.$items).forEach(function ($item, key) {\n me._offset.push((key - index) * me._distance)\n })\n }\n\n _setTransition (duration) {\n duration = duration || (this._options.duration || 'none')\n let transition = duration === 'none' ? 'none' : duration + 'ms'\n arrayFrom(this.$items).forEach(function ($item, key) {\n $item.style.webkitTransition = transition\n $item.style.transition = transition\n })\n }\n\n _setTransform (offset) {\n const me = this\n offset = offset || 0\n arrayFrom(me.$items).forEach(function ($item, key) {\n let distance = me._offset[key] + offset\n let transform = `translate3d(${distance}px, 0, 0)`\n if (me._options.direction === 'vertical') {\n transform = `translate3d(0, ${distance}px, 0)`\n }\n $item.style.webkitTransform = transform\n $item.style.transform = transform\n me._isMoved = true\n })\n }\n\n _bind () {\n const me = this\n me.touchstartHandler = (e) => {\n me.stop()\n me._start.x = e.changedTouches[0].pageX\n me._start.y = e.changedTouches[0].pageY\n me._setTransition('none')\n me._isMoved = false\n }\n me.touchmoveHandler = (e) => {\n if (me.count === 1) {\n return\n }\n me._move.x = e.changedTouches[0].pageX\n me._move.y = e.changedTouches[0].pageY\n let distanceX = me._move.x - me._start.x\n let distanceY = me._move.y - me._start.y\n let distance = distanceY\n let noScrollerY = Math.abs(distanceX) > Math.abs(distanceY)\n if (me._options.direction === 'horizontal' && noScrollerY) {\n distance = distanceX\n }\n /* set shorter distance for first and last item for better experience */\n if (!this._options.loop && (this._current === this.count - 1 || this._current === 0)) {\n distance = distance / 3\n }\n if ((((me._options.minMovingDistance && Math.abs(distance) >= me._options.minMovingDistance) || !me._options.minMovingDistance) && noScrollerY) || me._isMoved) {\n me._setTransform(distance)\n }\n\n noScrollerY && e.preventDefault()\n }\n\n me.touchendHandler = (e) => {\n if (me.count === 1) {\n return\n }\n me._end.x = e.changedTouches[0].pageX\n me._end.y = e.changedTouches[0].pageY\n\n let distance = me._end.y - me._start.y\n if (me._options.direction === 'horizontal') {\n distance = me._end.x - me._start.x\n }\n\n distance = me.getDistance(distance)\n if (distance !== 0 && me._options.minMovingDistance && Math.abs(distance) < me._options.minMovingDistance && !me._isMoved) {\n return\n }\n if (distance > me._options.threshold) {\n me.move(-1)\n } else if (distance < -me._options.threshold) {\n me.move(1)\n } else {\n me.move(0)\n }\n\n me._loopRender()\n }\n\n me.transitionEndHandler = (e) => {\n me._activate(me._current)\n let cb = me._eventHandlers.swiped\n cb && cb.apply(me, [me._prev % me.count, me._current % me.count])\n me._auto()\n me._loopRender()\n e.preventDefault()\n }\n me.$container.addEventListener('touchstart', me.touchstartHandler, false)\n me.$container.addEventListener('touchmove', me.touchmoveHandler, false)\n me.$container.addEventListener('touchend', me.touchendHandler, false)\n me.$items[1] && me.$items[1].addEventListener('webkitTransitionEnd', me.transitionEndHandler, false)\n }\n\n _loopRender () {\n const me = this\n if (me._loop()) {\n // issue #507 (delete cloneNode)\n if (me._offset[me._offset.length - 1] === 0) {\n me.$container.appendChild(me.$items[0])\n me._loopEvent(1)\n } else if (me._offset[0] === 0) {\n me.$container.insertBefore(me.$items[me.$items.length - 1], me.$container.firstChild)\n me._loopEvent(-1)\n }\n }\n }\n\n _loopEvent (num) {\n const me = this\n me._itemDestoy()\n me.$items = me.$container.querySelectorAll(me._options.item)\n me.$items[1] && me.$items[1].addEventListener('webkitTransitionEnd', me.transitionEndHandler, false)\n me._movePosition(num)\n me._setOffset()\n me._setTransform()\n }\n\n getDistance (distance) {\n if (this._loop()) {\n return distance\n } else {\n if (distance > 0 && this._current === 0) {\n return 0\n } else if (distance < 0 && this._current === this.realCount - 1) {\n return 0\n } else {\n return distance\n }\n }\n }\n\n _moveIndex (num) {\n if (num !== 0) {\n this._prev = this._current\n this._current += this.realCount\n this._current += num\n this._current %= this.realCount\n }\n }\n\n _activate (index) {\n let clazz = this._options.activeClass\n Array.prototype.forEach.call(this.$items, ($item, key) => {\n $item.classList.remove(clazz)\n if (index === Number($item.dataset.index)) {\n $item.classList.add(clazz)\n }\n })\n }\n\n go (index) {\n const me = this\n me.stop()\n\n index = index || 0\n index += this.realCount\n index = index % this.realCount\n index = this._position.indexOf(index) - this._position.indexOf(this._current)\n\n me._moveIndex(index)\n me._setOffset()\n me._setTransition()\n me._setTransform()\n me._auto()\n return this\n }\n\n next () {\n this.move(1)\n return this\n }\n\n move (num) {\n this.go(this._current + num)\n return this\n }\n\n on (event, callback) {\n if (this._eventHandlers[event]) {\n console.error(`[swiper] event ${event} is already register`)\n }\n if (typeof callback !== 'function') {\n console.error('[swiper] parameter callback must be a function')\n }\n this._eventHandlers[event] = callback\n return this\n }\n\n _itemDestoy () {\n this.$items.length && arrayFrom(this.$items).forEach(item => {\n item.removeEventListener('webkitTransitionEnd', this.transitionEndHandler, false)\n })\n }\n\n destroy () {\n this.stop()\n this._current = 0\n this._setTransform(0)\n window.removeEventListener('orientationchange', this.resizeHandler, false)\n this.$container.removeEventListener('touchstart', this.touchstartHandler, false)\n this.$container.removeEventListener('touchmove', this.touchmoveHandler, false)\n this.$container.removeEventListener('touchend', this.touchendHandler, false)\n this._itemDestoy()\n // remove clone item (used by loop only 2)\n if (this._options.loop && this.count === 2) {\n let $item = this.$container.querySelector(`${this._options.item}-clone`)\n $item && this.$container.removeChild($item)\n $item = this.$container.querySelector(`${this._options.item}-clone`)\n $item && this.$container.removeChild($item)\n }\n }\n}\n\nexport default Swiper\n" }, { "path": "src/components/swiper/swiper.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/tab/index.js", "content": "import Tab from './tab'\nimport TabItem from './tab-item'\n\nexport {\n Tab,\n TabItem\n}\n" }, { "path": "src/components/tab/metas.yml", "content": "category:\n en: Navigation\n zh-CN: 导航\nicon: ''\nitems:\n - tab\n - tab-item\ntags:\n en:\n - tab\n zh-CN:\n - 选项\n - 选项卡\nimport_code: \"import { Tab, TabItem } from 'vux'\"\nextra: |\n\n 如果需要监听`tab-item`的点击事件并取得索引，请使用`on-item-click`事件:\n\n ``` html\n \n \n \n ```\n\ntab:\n props:\n line-width:\n type: Number\n default: 3\n en: line width\n zh-CN: 线条宽度\n active-color:\n en: selected text color\n zh-CN: 选中时文字颜色\n default-color:\n en: default text color\n zh-CN: 默认文字颜色\n disabled-color:\n en: disabled text color\n zh-CN: 不可点击时文字颜色\n bar-active-color:\n en: active color for bar\n zh-CN: '设置底部`bar`颜色，该颜色也可以通过`less`变量`@tab-bar-active-color`设置。'\n animate:\n type: Boolean\n default: true\n en: whether use transition\n zh-CN: 切换时是否需要动画\n custom-bar-width:\n type: String, Function\n version: v2.1.1-rc.7\n en: 'set active bar width, like `50px`. or you can use function, param is `(currentInex)`'\n zh-CN: '设置底部`bar`宽度，默认宽度是整体tab宽度平分，比如`50px`。使用函数时参数为当前索引`index`，你可以定义不同`tab-item`对应的`bar`宽度。'\n badge-label:\n version: v2.3.5\n type: String\n en: badge label\n zh-CN: 徽标文字\n badge-background:\n version: v2.3.5\n type: String\n default: #f74c31\n en: badge background color\n zh-CN: 徽标背景颜色\n badge-color:\n version: v2.3.5\n type: String\n default: #fff\n en: badge font color\n zh-CN: 徽标文字颜色\n prevent-default:\n version: v2.7.2\n default: false\n en: whether prevent auto-switching tab-item when tab-item is clicked\n zh-CN: 是否禁止自动切换 tab-item\n scroll-threshold:\n version: v2.8.1\n type: Number\n default: 4\n en: scroll tabs threshold\n zh-CN: 滚动阀值，超过可滚动\n bar-position:\n version: v2.9.0\n type: String\n default: bottom\n en: bar position, one of [bottom, top]. only works when animate is true.\n zh-CN: 边框位置，可以为 bottom 或者 top。仅支持 animate 为 true 的情况。\n event:\n on-index-change:\n params: '`(index)`'\n en: fires when switching tab-item\n zh-CN: tab-item 切换时触发\n on-before-index-change:\n version: v2.7.2\n params: '`(index)`'\n en: fires when item is clicked and prop:preventDefault is true\n zh-CN: 点击 tab-item 并且 属性 preventDefault 为 true 时触发\ntab-item:\n props:\n disabled:\n type: Boolean\n default: false\n en: wheher disabled clicking\n zh-CN: 是否不可选\n active-class:\n en: active classname for current tab-item\n zh-CN: 当前项选中时的class\n events:\n on-item-click:\n params: '`(index)`'\n version: v2.2.1-rc.4\n en: emits when current tabItem is clicked\n zh-CN: 当前 tabItem 被点击时触发\nchanges:\n v2.9.4:\n en:\n - '[fix] tab #2850'\n zh-CN:\n - '[change] 修复 tab的父级width没有100%或者有padding 滚动造成文字跟横杠错位问题 #2850'\n v2.9.1:\n en:\n - '[fix] fix box-sizing issue #2621. thanks to @suncodeer'\n zh-CN:\n - '[fix] 修复全局 box-sizing 为 border-box 时导致的高度问题 #2621。感谢 @suncodeer '\n v2.9.0:\n en:\n - '[feature] support prop:bar-position'\n zh-CN:\n - '[feature] 支持使用 bar-position 定义边框位置'\n v2.8.1:\n en:\n - '[feature] support prop:scroll-threshold'\n zh-CN:\n - '[feature] 支持滚动'\n v2.7.2:\n en:\n - '[feature] support prop:prevent-default #2176'\n zh-CN:\n - '[feature] 支持阻止自动切换 #2176'\n v2.3.5:\n en:\n - '[feature] Support badge #1513'\n zh-CN:\n - '[feature] 支持设置 badge #1513'\n v2.2.1-rc.4:\n en:\n - '[enhance] Support param:index on event:on-item-click'\n zh-CN:\n - '[enhance] 支持 on-item-click 带上 index 参数'\n v2.1.1-rc.7:\n en:\n - '[feature] Support setting bar width with prop:custom-bar-width'\n - '[fix] Fix errors when initializing without tab-item #1038 @liu2010y'\n zh-CN:\n - '[feature] 支持定义 bar 宽度'\n - '[fix] 修复初始化时没有 tab-item 时导致报错 #1038 @liu2010y'\n v2.1.0-rc.46:\n en:\n - '[feature] add prop:bar-active-color #715 @greedying'\n zh-CN:\n - '[feature] 支持设置 `bar-active-color` #715 @greedying'\n" }, { "path": "src/components/tab/tab-item.vue", "content": "\n\n\n" }, { "path": "src/components/tab/tab.vue", "content": "\n\n\n\n\n\n" }, { "path": "src/components/tabbar/index.js", "content": "import Tabbar from './tabbar'\nimport TabbarItem from './tabbar-item'\n\nexport {\n Tabbar,\n TabbarItem\n}\n" }, { "path": "src/components/tabbar/metas.yml", "content": "category:\n en: Navigation\n zh-CN: 导航\nicon: ''\nitems:\n - tabbar\n - tabbar-item\nimport_code: \"import { Tabbar, TabbarItem } from 'vux'\"\nextra: |\n 支持简单模式，即不指定`icon`，`label`将垂直居中显示。\n\n ::: warning\n 默认定位为 `absolute`，适用于 `100%页面布局`，如果你并非 100% 布局(可以配合使用 view-box 组件)，请手动重置样式为 `position: fixed`\n :::\n\ntags:\n en:\n - tabbar\n zh-CN:\n - 导航\ntabbar:\n props:\n icon-class:\n en: icon's classname\n zh-CN: 图标的class名\n slots:\n default:\n en: slot for tabbar items\n zh-CN: tabbar主体内容，只允许tabbar-item\n events:\n on-index-change:\n version: v2.5.4\n en: emits when value is changed\n zh-CN: value 值变化时触发\ntabbar-item:\n props:\n selected:\n type: Boolean\n default: false\n en: 'if selected, you can also use `v-model=\"index\"` on tabbar to set item selected'\n zh-CN: '是否选中当前项，你也可以使用`v-model`来指定选中的`tabbar-item`的`index`'\n badge:\n en: badge text, if not specified, the badge will not show\n zh-CN: 徽标文字，不指定则不显示\n show-dot:\n type: Boolean\n default: false\n en: if show the red dot\n zh-CN: 是否显示红点\n link:\n en: the url for current tabbar item, can be a url or a `vue-router` link value\n zh-CN: 链接，可以为普通url或者用`vue-link`的路径写法，使用 object 写法指定 replace 为 true 可实现 replace 跳转\n icon-class:\n en: the classname for current icon, if tabbar and tabbar-item both specify icon-class, tabbar-item's will be usePulldown\n zh-CN: 图标类名，如果tabbar也同时定义了icon-class, 会使用tabbar-item的\n slots:\n icon:\n en: icon area\n zh-CN: 图标区域\n icon-active:\n version: v2.1.1-rc.8\n en: will show when current item is activated\n zh-CN: 如果存在，当前 tabbar-item 点击时会显示，用于切换图标\n label:\n en: label text\n zh-CN: 图标下方文字\n events:\n on-item-click:\n en: emits when tabbar item is clicked\n zh-CN: 点击菜单项时触发\nchanges:\n v2.7.7:\n en:\n - '[fix] fix tabbar-item ssr rendering issue'\n zh-CN:\n - '[fix] 修复 tabbar-item 服务端渲染不一致问题'\n v2.7.4:\n en:\n - '[enhance] add development tip for position usage'\n zh-CN:\n - '[enhance] 开发模式下对于非 100% 布局使用显示 absolute 定位说明'\n v2.5.5:\n en:\n - '[feature] Support replace: true for link #1761'\n zh-CN:\n - '[feature] 支持 link 上使用 replace: true 写法 #1761'\n v2.5.4:\n en:\n - '[feature] Add event:on-index-change #1715'\n zh-CN:\n - '[feature] 增加事件 on-index-change #1715'\n v2.1.1-rc.8:\n en:\n - '[feature] Support slot:active-icon'\n zh-CN:\n - '[feature] 支持点击时切换图标'\n v2.1.1-rc.4:\n en:\n - '[fix] fix this.$slots undefined #1000 @asingingfish'\n zh-CN:\n - '[fix] 修复 this.$slots 不存在 #1000 @asingingfish'\n v2.1.1-rc.1:\n en:\n - '[fix] fix variable @tabbar-text-active-color #982 @marsal1212'\n zh-CN:\n - '[fix] 修复 less 变量 @tabbar-text-active-color #982 @marsal1212'\n" }, { "path": "src/components/tabbar/tabbar-item.vue", "content": "\n\n" }, { "path": "src/components/tabbar/tabbar.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/timeline/index.js", "content": "import Timeline from './timeline'\nimport TimelineItem from './timeline-item'\n\nexport {\n Timeline,\n TimelineItem\n}\n" }, { "path": "src/components/timeline/metas.yml", "content": "category:\n en: DataDisplay\n zh-CN: 数据展示\nicon: ''\nimport_code: \"import { Timeline, TimelineItem } from 'vux'\"\nextra: |\n 待补充\nchanges:\n v2.1.1-rc.10:\n en:\n - '[fix] Fix icon position'\n zh-CN:\n - '[fix] 修复图标位置'" }, { "path": "src/components/timeline/timeline-item.vue", "content": "\n\n\n\n" }, { "path": "src/components/timeline/timeline.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/tip/index.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/toast/index.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/toast/metas.yml", "content": "category:\n en: Feedback\n zh-CN: 弹窗提示\nicon: ''\ntags:\n en:\n - toast\n - tip\n - dialog\n zh-CN:\n - 弹窗\n - 提示\nextra: |\n 该组件支持以`plugin`形式调用：\n\n ::: warning\n 以插件形式调用时，和`template`中使用不同，属性名请使用`小驼峰式`，比如`isShowMask`而不是`is-show-mask`。\n :::\n\n ``` js\n import { ToastPlugin } from 'vux'\n Vue.use(ToastPlugin)\n\n // 或者umd方式\n // 引入构建的js文件\n Vue.use(vuxToastPlugin)\n\n // 默认参数\n Vue.use(ToastPlugin, {position: 'top'})\n ```\n\n ``` js\n // 显示\n this.$vux.toast.show({\n text: 'Loading'\n })\n\n // 显示文字\n this.$vux.toast.text('hello', 'top')\n\n // 隐藏\n this.$vux.toast.hide()\n\n // 获取显示状态\n this.$vux.toast.isVisible() // v2.9.1 开始支持\n ```\n\nprops:\n value:\n type: Boolean\n default: false\n en: if showing toast, use v-model for binding\n zh-CN: 是否显示, 使用 v-model 绑定\n time:\n type: Number\n default: 2000\n en: show time\n zh-CN: 显示时间\n type:\n type: String\n default: success\n en: toast type, success, warn, cancel, text\n zh-CN: 类型，可选值 success, warn, cancel, text\n width:\n type: String\n default: 7.6em\n en: toast's width\n zh-CN: 宽度\n is-show-mask:\n type: Boolean\n default: false\n en: if showing mask, users cannot operate other elements on the page\n zh-CN: 是否显示遮罩，如果显示，用户将不能点击页面上其他元素\n text:\n type: String\n default: ''\n en: content of the toast, text or html, the same function as default slot\n zh-CN: 提示内容，支持 html，和默认slot同样功能\n position:\n version: v2.1.1-rc.4\n type: String\n default: 'default'\n en: 'toast position, available values: default, top, middle, bottom'\n zh-CN: 显示位置，可选值 default, top, middle, bottom\nslots:\n default:\n en: default slot, the content of the toast\n zh-CN: 默认slot, 提示内容\nevents:\n on-show:\n en: emits when toast shows\n zh-CN: 提示弹出时触发\n on-hide:\n en: emits when toast hides\n zh-CN: 提示隐藏时触发\nchanges:\n v2.9.1:\n en:\n - '[feature] add isVisible function for ToastPlugin #2704'\n zh-CN:\n - '[feature] 添加 isVisible 获取当前显示状态 #2704'\n v2.7.7:\n en:\n - '[fix] plugin options is used as toast default options'\n zh-CN:\n - '[fix] 插件 options 参数作为toast的默认参数'\n v2.6.3:\n en:\n - '[fix] fix no padding when using slot and type === text'\n zh-CN:\n - '[fix] 修复 type 为 text 时使用 slot 缺失 padding 样式的问题'\n v2.5.8:\n en:\n - \"[fix] Toast's zIndex should be higher than XDialog's #1820\"\n zh-CN:\n - '[fix] zIndex 值应该比 XDialog 大 #1820'\n v2.3.1:\n en:\n - '[feature] Add text method for plugin'\n zh-CN:\n - '[feature] 为插件添加 text 方法方便调用'\n v2.1.1-rc.13:\n en:\n - '[fix] fix After the call is not set webkitOverflowScrolling for touch'\n zh-CN:\n - '[fix] 修复 调用后没有设置webkitOverflowScrolling为touch'\n v2.1.1-rc.10:\n en:\n - '[fix] Fix warn icon style'\n zh-CN:\n - '[fix] 修复警告图标样式'\n v2.1.1-rc.9:\n en:\n - '[enhance] Reset props every time plugin.show is called #870 @jsonviewer'\n zh-CN:\n - '[enhance] 插件调用时每次都重置为默认参数 #870 @jsonviewer'\n v2.1.1-rc.6:\n en:\n - '[fix] fix forbidden style being overwritten #1016 @LaiXuechao'\n zh-CN:\n - '[fix] 修复禁止样式被覆盖 #1016 @LaiXuechao'\n v2.1.1-rc.4:\n en:\n - '[feature] Support position setting. #973 @ LaiXuechao'\n zh-CN:\n - '[feature] 支持显示位置设置 #973 @LaiXuechao'\n v2.1.1-rc.2:\n en:\n - '[feature] Add more less variables'\n zh-CN:\n - '[feature] 支持更多 less 变量'\n v2.0.0:\n en:\n - '[change] use `v-model` instead of `:show.sync`'\n - '[change] do not show mask by default'\n - '[feature] add prop:isShowMask'\n zh-CN:\n - '[change] 使用 `v-model` 而不是`:show.sync`进行显示属性绑定'\n - '[change] 默认不显示遮罩'\n - '[feature] 添加 isShowMask 属性'\n" }, { "path": "src/components/toast/test.js", "content": "import Comp from './index.vue'\n\nimport { mount } from 'vue-test-utils'\nimport { expect } from 'chai'\n\ndescribe('Toast', () => {\n it('basic', () => {\n const wrapper = mount(Comp)\n expect(wrapper.name()).to.equal('toast')\n })\n})\n" }, { "path": "src/components/uploader/index.vue", "content": "\n\n\n" }, { "path": "src/components/uploader/metas.yml", "content": "category:\n en: Form\n 'zh-CN': 表单\nicon: ''\ntags:\n en:\n - uploader\n zh-CN:\n - 上传组件\n\nextra:\n en:\n zh-CN: |\n ```html\n `已经上传${limit}张图片嘞！`\"\n withCredentials\n @before-upload=\"beforeUpload\"\n @after-upload=\"afterUpload\"\n @on-change=\"onChange\"\n @on-cancel=\"onCancel\"\n @on-success=\"onSuccess\"\n @on-error=\"onError\"\n @on-delete=\"onDelete\"\n />\n ```\nprops:\n title:\n type: String\n default: '图片上传'\n en: component title\n zh-CN: 组件标题\n files:\n type: Array\n default: []\n en: initial file data source, through event `on-fileList-change` bind v-model\n zh-CN: 初始化数据源，通过`on-fileList-change`事件绑定 v-model\n limit:\n type: Number, String\n default: 5\n en: limit upload image count\n zh-CN: 限制上传图片个数\n limitPrompt:\n type: Function\n default: (limit) => `不能上传超过${limit}张图片`\n en: prompt for limit alert\n zh-CN: 限制上传alert的提示语\n capture:\n type: Number, String\n default: false\n en: whether only invoke camera\n zh-CN: 是否只选择调用相机\n enableCompress:\n type: Boolean\n default: true\n en: whether enable compress\n zh-CN: 是否压缩\n maxWidth:\n type: String, Number\n default: 1024\n en: image compress max width\n zh-CN: 图片压缩最大宽度\n quality:\n type: String, Number\n default: 0.92\n en: image compress rate\n zh-CN: 图片压缩率\n url:\n type: String\n en: upload server url\n zh-CN: 上传服务器 url\n headers:\n type: Object\n default: {}\n en: custom upload request headers\n zh-CN: 上传文件时自定义请求头\n withCredentials:\n type: Boolean\n en: setting as true, can support CORS set cookie\n zh-CN: 设置为`true`的话，支持标准CORS设置cookie值\n params:\n type: Object\n en: custom formData params\n zh-CN: 上传文件时自定义参数\n name:\n type: String\n default: 'file'\n en: upload formData key, default as `file`\n zh-CN: 上传文件时 FormData 的 Key，默认为 file\n autoUpload:\n type: Boolean\n default: true\n en: whether auto upload\n zh-CN: 是否自动开启上传\n multiple:\n type: String, Boolean\n en: whether support multiple select image, `false` will not support\n zh-CN: 是否支持多选, `false`为不支持\n readonly:\n type: Boolean\n default: false\n en: field readonly (hide add and delete button)\n zh-CN: 只读模式（隐藏添加和删除按钮）\nevents:\n on-change:\n params: '`(FileItem, FileList)`'\n en: emits when file change\n zh-CN: 选完照片，删除照片时，FileList 变化时触发，返回当前改变的 FileItem，以及当前的 FileList\n on-cancel:\n en: emits when cancel select image\n zh-CN: 选择照片后取消的回调，用于错误提示\n on-success:\n params: '`(result, fileItem)`'\n en: emits when file upload success\n zh-CN: 上传请求成功后的回调，返回远程请求的返回结果，及当前添加文件的 FileItem\n on-error:\n params: '`(xhr)`'\n en: emits when file upload failed\n zh-CN: 上传请求失败后的回调，返回`xhr`\n on-delete:\n params: '`(cb)`'\n en: emits when delete file, the first params is a callback which can hide previewer\n zh-CN: 上传删除照片时的回调,返回隐藏 Previewer，删除图片的回调，没监听`onDelete`事件的时候，直接执行删除回调\n before-upload:\n en: emits before invoke xhr request\n zh-CN: 上传图片之前的回调\n after-upload:\n params: '`(action)`'\n en: emits after xhr request finished\n zh-CN: 上传图片之后的回调\n" }, { "path": "src/components/uploader/utils.js", "content": "import EXIF from 'exif-js'\n\n/**\n * Detecting vertical squash in loaded image.\n * Fixes a bug which squash image vertically while drawing into canvas for some images.\n */\nfunction detectVerticalSquash (img) {\n let data\n let ih = img.naturalHeight\n let canvas = document.createElement('canvas')\n canvas.width = 1\n canvas.height = ih\n let ctx = canvas.getContext('2d')\n ctx.drawImage(img, 0, 0)\n try {\n // Prevent cross origin error\n data = ctx.getImageData(0, 0, 1, ih).data\n } catch (err) {\n // hopeless, assume the image is well and good.\n console.log('Cannot check verticalSquash: CORS?')\n return 1\n }\n // search image edge pixel position in case it is squashed vertically.\n var sy = 0\n var ey = ih\n var py = ih\n while (py > sy) {\n var alpha = data[(py - 1) * 4 + 3]\n if (alpha === 0) {\n ey = py\n } else {\n sy = py\n }\n py = (ey + sy) >> 1\n }\n var ratio = py / ih\n return ratio === 0 ? 1 : ratio\n}\n\n/**\n * Detect subsampling in loaded image.\n * In iOS, larger images than 2M pixels may be subsampled in rendering.\n */\nfunction detectSubsampling (img) {\n var iw = img.naturalWidth\n var ih = img.naturalHeight\n if (iw * ih > 1024 * 1024) {\n // subsampling may happen over megapixel image\n var canvas = document.createElement('canvas')\n canvas.width = canvas.height = 1\n var ctx = canvas.getContext('2d')\n ctx.drawImage(img, -iw + 1, 0)\n // subsampled image becomes half smaller in rendering size.\n // check alpha channel value to confirm image is covering edge pixel or not.\n // if alpha value is 0 image is not covering, hence subsampled.\n return ctx.getImageData(0, 0, 1, 1).data[3] === 0\n } else {\n return false\n }\n}\n\n/**\n * Transform canvas coordination according to specified frame size and orientation\n * Orientation value is from EXIF tag\n */\nfunction transformCoordinate (canvas, ctx, width, height, orientation) {\n switch (orientation) {\n case 5:\n case 6:\n case 7:\n case 8:\n canvas.width = height\n canvas.height = width\n break\n default:\n canvas.width = width\n canvas.height = height\n }\n switch (orientation) {\n case 2:\n // horizontal flip\n ctx.translate(width, 0)\n ctx.scale(-1, 1)\n break\n case 3:\n // 180 rotate left\n ctx.translate(width, height)\n ctx.rotate(Math.PI)\n break\n case 4:\n // vertical flip\n ctx.translate(0, height)\n ctx.scale(1, -1)\n break\n case 5:\n // vertical flip + 90 rotate right\n ctx.rotate(0.5 * Math.PI)\n ctx.scale(1, -1)\n break\n case 6:\n // 90 rotate right\n ctx.rotate(0.5 * Math.PI)\n ctx.translate(0, -height)\n break\n case 7:\n // horizontal flip + 90 rotate right\n ctx.rotate(0.5 * Math.PI)\n ctx.translate(width, -height)\n ctx.scale(-1, 1)\n break\n case 8:\n // 90 rotate left\n ctx.rotate(-0.5 * Math.PI)\n ctx.translate(-width, 0)\n break\n default:\n break\n }\n}\n\n// https://stackoverflow.com/a/12300351/6472444\nfunction dataURItoBlob (dataURI) {\n // convert base64 to raw binary data held in a string\n // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this\n var byteString = atob(dataURI.split(',')[1])\n\n // separate out the mime component\n var mimeString = dataURI\n .split(',')[0]\n .split(':')[1]\n .split(';')[0]\n\n // write the bytes of the string to an ArrayBuffer\n var ab = new ArrayBuffer(byteString.length)\n\n // create a view into the buffer\n var ia = new Uint8Array(ab)\n\n // set the bytes of the buffer to the correct values\n for (var i = 0; i < byteString.length; i++) {\n ia[i] = byteString.charCodeAt(i)\n }\n\n // write the ArrayBuffer to a blob, and you're done\n var blob = new Blob([ab], { type: mimeString })\n return blob\n}\n\n/**\n * convert blob to canvas to blob\n */\nfunction handleFile (file, options, doSquash) {\n return new Promise((resolve, reject) => {\n const { maxWidth, quality, enableCompress } = options\n const canvas = document.createElement('canvas')\n const ctx = canvas.getContext('2d')\n const image = new Image()\n try {\n image.src = URL.createObjectURL(file)\n } catch (e) {\n throw Error(e)\n }\n image.onload = () => {\n let w = image.naturalWidth\n let h = image.naturalHeight\n EXIF.getData(image, function () {\n const orientation = EXIF.getTag(this, 'Orientation')\n const subsampled = detectSubsampling(image)\n if (subsampled) {\n w /= 2\n h /= 2\n }\n const vertSquashRatio = doSquash ? detectVerticalSquash(image) : 1\n const dw = enableCompress ? Math.min(Number(maxWidth), w) : w\n const dh = (h * (dw / w)) / vertSquashRatio\n detectImageAutoRotate().then(isImageAutoRotate => {\n console.log('detectImageAutoRotate:', isImageAutoRotate)\n if (!isImageAutoRotate) {\n transformCoordinate(canvas, ctx, dw, dh, orientation)\n } else {\n canvas.width = dw\n canvas.height = dh\n }\n ctx.clearRect(0, 0, dw, dh)\n ctx.drawImage(image, 0, 0, dw, dh)\n URL.revokeObjectURL(image.src)\n canvas.toBlob(\n blob => {\n resolve(new File([blob], file.name, {\n type: file.type\n }))\n },\n file.type,\n quality\n )\n })\n })\n }\n image.onerror = err => reject(err)\n })\n}\n\n/**\n * https://github.com/Mawi137/ngx-image-cropper/issues/306#issuecomment-611771078\n * 判断图片是否被浏览器自动旋转\n */\nfunction detectImageAutoRotate () {\n // 一张 2x1 的 JPEG 图片, EXIF Orientation: 6\n const testAutoOrientationImageURL = 'data:image/jpeg;base64,/9j/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAYAAAAAAAD/2wCEAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf/AABEIAAEAAgMBEQACEQEDEQH/xABKAAEAAAAAAAAAAAAAAAAAAAALEAEAAAAAAAAAAAAAAAAAAAAAAQEAAAAAAAAAAAAAAAAAAAAAEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwA/8H//2Q=='\n let isImageAutoRotate\n return new Promise(resolve => {\n if (isImageAutoRotate === undefined) {\n const img = new Image()\n img.onload = () => {\n isImageAutoRotate = img.width === 1 && img.height === 2\n resolve(isImageAutoRotate)\n }\n img.src = testAutoOrientationImageURL\n } else {\n resolve(isImageAutoRotate)\n }\n })\n}\n\nexport {\n detectVerticalSquash,\n detectSubsampling,\n transformCoordinate,\n dataURItoBlob,\n handleFile,\n detectImageAutoRotate\n}\n" }, { "path": "src/components/v-chart/metas.yml", "content": "icon: ''\ncategory:\n en: Chart\n zh-CN: 图表\nbeta: true\ndescription: |\n\n VChart 基于[F2@蚂蚁金服(MIT license)](https://antv.alipay.com/zh-cn/f2/3.x/)封装的图表组件。\n\n F2 是专为移动端定制的一套开箱即用的可视化解决方案，具有精简、高性能、易扩展的特性，适用于对性能、大小、扩展性要求严苛的场景。\n\n 组件部分属性可能未列出，可以直接参考 [F2文档](https://antv.alipay.com/zh-cn/f2/3.x/api/index.html)\n\nchanges:\n 2.9.3:\n en:\n - '[enhance] v-point can set size and shape, v-line can set shape'\n zh-CN:\n - '[enhance] v-point 可以设置size和shape, v-line 可以设置shape'\ntips:\n zh-CN:\n -\n q: 全局设置分辨率(devicePixelRatio)\n a: |\n\n ``` js\n // 入口文件处设置\n Vue.prototype.$devicePixelRatio = 2\n ```\n -\n q: 自定义渲染行为\n a: |\n\n 在面对复杂的渲染逻辑时，直接使用组件无法满足。此时可以这样处理：\n\n ``` html\n \n ```\n\n ``` js\n methods: {\n renderVChart ({ chart }) {\n // do what you want\n }\n }\n ```\n -\n q: 修改子组件配置不会自动刷新\n a: |\n 是的，考虑到移动端更多是展示而不是操作，暂时不支持自动刷新。\n -\n q: 为什么我自己封装时会报错\n a: |\n\n 要先了解 Vue 组件的生命周期，在 canvas 元素未 mounted 前 F2 无法正确渲染。\n\n ``` js\n mounted () {\n this.$nextTick(( => {\n // do what you want with F2\n })\n }\n ```\n\nitems:\n - v-chart\n - v-line\n - v-area\n - v-bar\n - v-pie\n - v-point\n - v-scale\n - v-axis\n - v-guide\n - v-tooltip\n - v-legend\n - v-guide\nv-chart:\n props:\n prevent-render:\n version: v2.9.1\n type: boolean\n default: false\n en: whether prevent rendering\n zh-CN: 是否自定义渲染逻辑\n prevent-default:\n version: v2.9.1\n type: boolean\n default: false\n en: whether prevent default behavior\n zh-CN: 是否阻止默认行为\n events:\n on-render:\n version: v2.9.1\n params: '`({ chart })`'\n en: fires before render\n zh-CN: 渲染前触发，一般用于配合 `prevent-render` 自定义渲染逻辑\n methods:\n rerender:\n version: v2.9.1\n en: destroy and re-render canvas\n zh-CN: 清除并重新渲染\n repaint:\n version: v2.9.1\n en: repain canvas\n zh-CN: 重新渲染\n destroy:\n version: v2.9.1\n en: destroy chart\n zh-CN: 销毁图表，canvas dom 元素不会销毁\nv-point:\n description: |\n 点，用于点图的构建。Point 为 `Geometry` 的一部分，和其他图表组件一致，支持 shape, color, series-field 等。完整属性文档写参照 [F2 Geometry](https://antv.alipay.com/zh-cn/f2/3.x/api/geometry.html)。\n props:\nv-line:\n description: |\n ::: tip\n 折线图，完整属性文档写参照 [F2 Geometry](https://antv.alipay.com/zh-cn/f2/3.x/api/geometry.html)\n :::\n props:\n shape:\n version: v2.9.1\n type: String\n en: shape type, one of `line`, `smooth`, `dash`\n zh-CN: 线条形状，可选值 `line`(默认), `smooth`(平滑线), `dash`(虚线)\n series-field:\n version: v2.9.1\n type: String\n en: alias to color, specify color value or which field to color\n zh-CN: 用于绘制多组线条时的分组字段名。该属性相当于 F2 里的 `color`，出于理解和设置方便使用 `series-field`\n colors:\n version: v2.9.1\n type: String,Array\n en: colors, use default colors if not specified\n zh-CN: 线条颜色，可以为单个颜色或者颜色列表。不指定时使用默认颜色。\nv-guide:\n description: |\n ::: tip\n 辅助元素，完整属性文档写参照 [F2 Guide](https://antv.alipay.com/zh-cn/f2/3.x/api/guide.html)\n :::\n props:\n type:\n version: v2.9.1\n type: String\n en: guide type, one of `line`, `text`, `tag`, `rect`, `html`, `arc`\n zh-CN: 辅助元素类型，可以为 `line`, `text`, `tag`, `rect`, `html`, `arc`\n options:\n version: v2.9.1\n type: Object\n en: guide options\n zh-CN: 辅助元素属性对象。你也可以在 template 里将属性分开写，不需要使用该 prop，同时使用时属性会被合并。\nv-area:\n props:\n series-field:\n version: v2.9.1\n type: String\n en: alias to color, specify color value or which field to color\n zh-CN: 用于绘制多组线条时的分组字段名。该属性相当于 F2 里的 `color`，出于理解和设置方便使用 `series-field`\n colors:\n version: v2.9.1\n type: String,Array\n en: colors, use default colors if not specified\n zh-CN: 线条颜色，可以为单个颜色或者颜色列表。不指定时使用默认颜色。\nv-tooltip:\n description: |\n ::: tip\n 该组件非必须，渲染折线图时会默认使用配置 `showCrosshairs: true`\n\n 完整属性文档写参照 [F2 Tooltip](https://antv.alipay.com/zh-cn/f2/3.x/api/tooltip.html)\n :::\n props:\n disabled:\n version: v2.9.1\n type: boolean\n default: false\n en: whether disable tooltip\n zh-CN: '[快捷属性，非 F2 原有属性]是否禁用 tooltip, 相当于调用`chart.tooltip(false)`'\n show-x-value:\n version: v2.9.1\n type: boolean\n default: false\n en: whether set display template to `xValue:yValue`, default `xLabel:yValue`\n zh-CN: '[快捷属性，非 F2 原有属性]用于单折线的情况，设定是否将 x 轴值显示在 tooltip 里，默认是 `xLabel:yValue` 的形式(value:23)，启用将变成 `xValue:yValue` 的形式(2017-01-01:23)，建议在 `tickCount` 无法完全显示时启用。该设置会覆盖原有 `onShow` 设置。'\n show-value-in-legend:\n version: v2.9.1\n type: boolean\n default: false\n en: whether hide default tooltip and show value in legend\n zh-CN: '[快捷属性，非 F2 原有属性]是否禁用默认 tooltip 而是显示在 legend 里。适用于有分组(series-field)情况。'\nv-legend:\n description: |\n 图例。[F2 Legend](https://antv.alipay.com/zh-cn/f2/3.x/api/legend.html)。\n props:\n disabled:\n version: v2.9.1\n type: boolean\n default: false\n en: whether disable tooltip\n zh-CN: '[快捷属性，非 F2 原有属性]是否禁用 legend, 相当于调用`chart.legend(false)`'\nv-bar:\n description: |\n 柱状图，使用垂直的柱子显示类别之间的数值比较。\n props:\n colors:\n version: v2.9.1\n type: String,Array\n en: colors, use default colors if not specified\n zh-CN: 线条颜色，可以为单个颜色或者颜色列表。不指定时使用默认颜色。\nv-pie:\n props:\nv-axis:\n description: |\n 坐标轴配置。[详细文档](https://antv.alipay.com/zh-cn/f2/3.x/api/axis.html)。\n props:\n disabled:\n version: v2.9.1\n type: boolean\n zh-CN: 禁用当前坐标轴。\n x:\n version: v2.9.1\n type: boolean\n zh-CN: '[组件属性]是否为 `x轴` 配置。'\n y:\n version: v2.9.1\n type: boolean\n zh-CN: '[组件属性]是否为 `y轴` 配置。'\nv-scale:\n description: |\n 度量 Scale，是数据空间到图形空间的转换桥梁，负责原始数据到 [0, 1] 区间数值的相互转换工作。针对不同的数据类型对应不同类型的度量。详细文档 [F2 Scale](https://antv.alipay.com/zh-cn/f2/3.x/api/scale.html)。\n props:\n field:\n version: v2.9.1\n type: string\n zh-CN: '[组件属性]指定 `坐标轴` 字段。对于简单数据，VChart 可以判断使用哪个字段，但是如果顺序不确定或者多字段的数据，最好手动指定。'\n x:\n version: v2.9.1\n type: boolean\n zh-CN: '[组件属性]是否为 `x轴` 配置。'\n y:\n version: v2.9.1\n type: boolean\n zh-CN: '[组件属性]是否为 `y轴` 配置。'\n type:\n version: v2.9.1\n type: string\n zh-CN: 指定不同的度量类型，支持的 type 为 `identity`、`linear`、`cat`、`timeCat`。\n formatter:\n version: v2.9.1\n type: function\n zh-CN: 回调函数，用于格式化坐标轴刻度点的文本显示，会影响数据在坐标轴 axis、图例 legend、提示信息 tooltip 上的显示。\n range:\n version: v2.9.1\n type: array\n default: '[0, 1]'\n zh-CN: 输出数据的范围，默认[0, 1]，格式为 [min, max]，min 和 max 均为 0 至 1 范围的数据。\n alias:\n version: v2.9.1\n type: string\n zh-CN: '该数据字段的显示别名，一般用于将字段的英文名称转换成中文名(tooltip 中显示)。'\n tick-count:\n version: v2.9.1\n type: number\n default: 5\n zh-CN: 坐标轴上刻度点的个数，设为 0 时表示全部显示。\n ticks:\n version: v2.9.1\n type: array\n zh-CN: '用于指定坐标轴上刻度点的文本信息，当用户设置了 ticks 就会按照 ticks 的个数和文本来显示。如 `[ 0, 50, 100, 150, 200, 300, 500 ]`'\n" }, { "path": "src/components/v-chart/mixin.js", "content": "import { camelAttrs } from './util'\n\nconst defaultShapeMap = {\n line: 'line',\n point: 'circle',\n area: 'area'\n}\n\nexport default {\n props: {\n colors: [String, Array],\n seriesField: String,\n adjust: [String, Object]\n },\n created () {\n this.$parent.set(this.chartName, {\n shape: defaultShapeMap[this.chartName] || '',\n ...this.$props,\n ...camelAttrs(this.$attrs)\n })\n },\n render () {}\n}\n" }, { "path": "src/components/v-chart/util.js", "content": "const camel = function (key) {\n return key.replace(/(-[a-z])/g, function ($1) { return $1.toUpperCase().replace('-', '') })\n}\n\nexport const camelAttrs = function (attrs) {\n for (let i in attrs) {\n const key = camel(i)\n attrs[key] = attrs[i]\n if (key !== i) {\n delete attrs[i]\n }\n }\n return attrs\n}\n" }, { "path": "src/components/v-chart/v-area.vue", "content": "\n" }, { "path": "src/components/v-chart/v-axis.vue", "content": "" }, { "path": "src/components/v-chart/v-bar.vue", "content": "\n" }, { "path": "src/components/v-chart/v-chart.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/v-chart/v-guide.vue", "content": "" }, { "path": "src/components/v-chart/v-legend.vue", "content": "\n" }, { "path": "src/components/v-chart/v-line.vue", "content": "\n" }, { "path": "src/components/v-chart/v-pie.vue", "content": "\n" }, { "path": "src/components/v-chart/v-point.vue", "content": "" }, { "path": "src/components/v-chart/v-scale.vue", "content": "\n" }, { "path": "src/components/v-chart/v-tooltip.vue", "content": "\n" }, { "path": "src/components/video/index.vue", "content": "\n\n\n\n\n" }, { "path": "src/components/video/zy.media.css", "content": "body { margin: 0 }\n\n/* zy.media style */\n.zy_media { background: #000; position: relative }\n.zy_media video, .zy_media audio { width: 100%; position: absolute; top: 0; left: 0; display: block }\n.zy_fullscreen { overflow: hidden }\n.zy_fullscreen .zy_media { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1000 }\n.zy_fullscreen .zy_wrap, .zy_fullscreen video { width: 100%; height: 100% }\n.zy_wrap { width: 100% }\n\n/* 视频标题 */\n.zy_title { height: 34px; padding-left: 10px; color: #fff; font-size: 12px; line-height: 34px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; background: rgba(0, 0, 0, .25); position: absolute; left: 0; right: 0; top: 0; -webkit-transition: top .5s; transition: top .5s }\n\n/* 视频主区中播放、加载中、错误提示 */\n.zy_media .dec_play, .zy_media .dec_loading, .zy_media .dec_error { margin: -32px 0 0 -31px; position: absolute; top: 50%; left: 50% }\n.zy_media .dec_play::before { width: 60px; height: 60px; content: ''; border-radius: 60px; border: #e5e5e4 1px solid; display: block }\n.zy_media .dec_play::after { width: 0; height: 0; content: ''; border-color: transparent transparent transparent #e5e5e4; border-width: 14px 20px; border-style: solid; position: absolute; top: 16px; left: 23px; z-index: 2; display: block }\n.zy_media .dec_loading { width: 62px; height: 62px; -webkit-animation: ani_loading .6s infinite linear; -webkit-animation-fill-mode: forwards; animation: ani_loading .6s infinite linear; animation-fill-mode: forwards }\n@-webkit-keyframes ani_loading {\n\t100% { -webkit-transform: rotate(360deg) }\n}\n@keyframes ani_loading {\n\t100% { transform: rotate(360deg) }\n}\n.zy_media .dec_loading::before { width: 7px; height: 7px; content: ''; border-radius: 7px; background: #fff; opacity: .8; position: absolute; top: 25px }\n.zy_media .dec_loading::after { width: 48px; height: 48px; content: ''; border-radius: 50px; border: 7px solid #fff; opacity: .2; display: block }\n.zy_media .dec_error { width: 62px; height: 62px; margin-top: -53px; margin-left: -25px; white-space: nowrap; color: #fff; font-size: 12px; text-align: center; position: absolute; top: 50%; left: 50%; }\n\n/* 控制栏 */\n.zy_controls { height: 44px; background: rgba(0, 0, 0, .55); position: absolute; left: 0; right: 0; bottom: 0; -webkit-transition: bottom .5s; transition: bottom .5s; display: -webkit-box; display: -webkit-flex; display: flex }\n\n/* 播放、暂停按钮 */\n.zy_playpause_btn { width: 26px; height: 30px; margin-right: 4px; padding: 13px 0 0 14px; position: relative }\n.zy_play::before { width: 0; height: 0; content: ''; border-color: transparent transparent transparent #cbcbcb; border-width: 8px 12px; border-style: solid; display: block }\n.zy_pause::before, .zy_pause::after { width: 3px; height: 14px; content: ''; background: #cbcbcb; position: absolute; top: 13px; left: 14px }\n.zy_pause::after { left: 22px }\n\n/* 时间线操作区 */\n.zy_timeline { margin-right: 10px; -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto }\n.zy_timeline_slider { width: 100%; height: 1px; background: #999; position: relative; top: 21px; left: 0 }\n.zy_timeline_buffering { width: 100%; height: 15px; top: -7px; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)), color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: linear-gradient(-45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); -webkit-background-size: 15px 15px; background-size: 15px 15px; -webkit-animation: ani_buffering 2s linear infinite; animation: ani_buffering 2s linear infinite; position: absolute; }\n@-webkit-keyframes ani_buffering {\n\tfrom { background-position: 0 0 }\n\tto { background-position: 30px 0 }\n}\n@keyframes ani_buffering {\n\tfrom { background-position: 0 0 }\n\tto { background-position: 30px 0 }\n}\n.zy_timeline_loaded { width: 0; height: 1px; background: #e5e5e5; position: absolute; top: 0; left: 0; z-index: 1 }\n.zy_timeline_current { width: 0; height: 1px; background: #ff6159; position: relative; z-index: 2 }\n.zy_timeline_handle { width: 16px; height: 16px; border-radius: 16px; background: #e5e5e5; position: absolute; top: -8px; left: -8px; z-index: 3 }\n\n/* 时间展示 */\n.zy_time { width: auto; height: 44px; margin-right: 5px; line-height: 44px; font-size: 11px; color: #999; text-align: center }\n.zy_time .zy_currenttime { color: #e5e5e5 }\n\n/* 全屏控制按钮 */\n.zy_fullscreen_btn { width: 38px; height: 44px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaBAMAAAEsY2FrAAAAElBMVEX///////////////////////+65XQCAAAABXRSTlMAHm1u3TG+li4AAAB5SURBVBgZBcGxbQNBEAQwPnCXC49TviU4UQnKx8ZP/62YVB58qQCIBwArGgAAwK4HkAUEgEXAEmBFG/AH+B0gN5BrQLwAAG4bXLOBewPXB/AGu6VtG4CeAUCdAaCcAVCcAQAAAAMAzrAD4IwdAM7PDgDOJwBt2wAA/9uDEjcL3fqtAAAAAElFTkSuQmCC); background-repeat: no-repeat; background-position: center; -webkit-background-size: 16px; background-size: 16px }\n.zy_unfullscreen { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaBAMAAAEsY2FrAAAAElBMVEX///////////////////////+65XQCAAAABXRSTlMAHm1u3TG+li4AAAB5SURBVBgZBcGxDcMwEAQwGtH1QuD0WiGAB8gI39z+q4SEhR8AwALAwmAwgCAIS4AV0BYg7UAWEIttwNeA1x7gO8BrQDsAAGlBDpA3kOuAeIO4eDYZAM+WAeDZGQA8nwFo2w4AAAAAANq2A9D7AKDuA0C5D4DiPgDAH9lBEChOLXSRAAAAAElFTkSuQmCC) }\n" }, { "path": "src/components/video/zy.media.js", "content": "/*\n *\n * zy.media.js\n * HTML5