Be Cool with Vue@^2.3.0 and WeUI.
## Sponsors
${t('该组件已经停止维护。')}${one.deprecatedInfo ? one.deprecatedInfo[lang] : ''}
\n` } if (one.import_code) { if (one.import_code !== ' ') { docs += '\n``` js' docs += `\n${one.import_code}` docs += '\n```\n' } } else { docs += '\n``` js' docs += `\nimport { ${one.importName} } from 'vux'` docs += '\n```\n' } if (one.extra && typeof one.extra === 'string' && lang === 'zh-CN') { docs += '\n' + one.extra + '\n' } if (one.extra && typeof one.extra === 'object' && one.extra[lang]) { docs += '\n' + one.extra[lang] + '\n' } if (one.props || one.slots) { docs = getComponentInfo(one, lang, docs) } if (one.items) { docs = getComponentInfo({ name: one.name, hideDemo: one.items.length > 1, props: one.json[one.items[0]].props, sub_extra: one.json[one.items[0]].sub_extra, slots: one.json[one.items[0]].slots, events: one.json[one.items[0]].events, methods: one.json[one.items[0]].methods }, lang, docs, one.items[0]) docs = getComponentInfo({ name: one.name, json: one.json, hideDemo: one.items.length > 2, props: one.json[one.items[1]].props, sub_extra: one.json[one.items[1]].sub_extra, slots: one.json[one.items[1]].slots, events: one.json[one.items[1]].events, methods: one.json[one.items[1]].methods }, lang, docs, one.items[1]) if (one.items.length === 3) { docs = getComponentInfo({ name: one.name, json: one.json, props: one.json[one.items[2]].props, sub_extra: one.json[one.items[2]].sub_extra, slots: one.json[one.items[2]].slots, events: one.json[one.items[2]].events, methods: one.json[one.items[2]].methods }, lang, docs, one.items[2]) } } // after extra if (one.after_extra) { docs += '\n' + (one.after_extra[lang] || one.after_extra) + '\n' } /** docs += `\n`0.x` 版本文档不完整，并且已经不再维护。请更新或者直接使用`2.x`。
当前开发分支为 [v2](https://github.com/airyland/vux)。 `2.1.0` ~ `3.0.0` 之间版本不会有影响升级的 `break change`，请放心及时更新版本。 ================================================ FILE: docs/compile.js ================================================ 'use strict' const glob = require('glob') const path = require('path') const fs = require('fs') const yaml = require('js-yaml') const hljs = require('highlight.js') const MD = require('markdown-it') const argv = require('yargs').argv let langs = ['en', 'zh-CN'] const t = require('./i18n') const pkg = require('../package.json') const variables = {} const variableMap = {} const variablePath = path.join(__dirname, '../src/styles/variable.less') const variableContent = fs.readFileSync(variablePath, 'utf-8').split('\n') const isInclude = function (name, include) { let list = include.split(',') for (let i = 0; i < list.length; i++) { if (name.includes(list[i])) { return true } } return false } variableContent.forEach((line, index) => { if (/^@/.test(line)) { let temp = line.split(':') let component = temp[0].replace('@', '').split('-')[0] if (component === 'button' && /button-tab/.test(line)) { component = 'button-tab' } if (!variables[component]) { variables[component] = [] } const name = temp[0].replace('@', '') let value = temp[1].replace(';', '').trim().replace(/\/\*(.*?)\*\//, '') if (value.includes('//')) { value = value.split(' ')[0].trim() } let inherited_name = '' let is_inherited = false if (/@/.test(value)) { is_inherited = true inherited_name = value value = variableMap[value.replace('@', '')] } let t = {} if (variableContent[index - 1] === '*/' && /:/.test(variableContent[index - 2])) { let stop = false let i = 2 while (!stop) { const temp = variableContent[index - i] if (/:/.test(temp)) { let pair = temp.split(':') t[pair[0].replace('*', '').trim()] = pair[1].trim() } else { stop = true } i++ } } variables[component].push({ name, value, is_inherited, inherited_name, desc: t }) variableMap[name] = value } }) let contents = [] const getAlternate = function (lang, route) { return langs.filter(_lang => _lang !== lang).map(_lang => { return { rel: 'alternate', hreflang: _lang, href: route.replace(lang, _lang) } }) } const getPath = function (dir) { return path.join(__dirname, dir) } // for faster test with few languages if (argv.langs) { langs = argv.langs.split(',') } // filters routes let include if (argv.include) { include = argv.include } const customContainer = require('markdown-it-container') const md = new MD({ html: true, highlight: function (str, lang) { if (lang && hljs.getLanguage(lang)) { try { return '
' +
hljs.highlight(lang, str, true).value +
'' + md.utils.escapeHtml(str) + '' +
hljs.highlight(lang, code, true).value +
'' +
hljs.highlight('html', code.replace(reg, ''), true).value +
'
${t('demo url', lang)}
${t('demo source code', lang)}
${t('edit document', lang)}
${t('component source code', lang)}
${t('qr', lang)}
${t('donot need import', lang)}
$1') : '' }
| ${t('name', lang)} | ${t('type', lang)} | ${t('default value', lang)} | ${t('description', lang)} | ${t('required version', lang)} |
|
|
{{ prop.default}} | {{ prop.version || '--'}} |
| ${t('name', lang)} | ${t('params', lang)} | ${t('description', lang)} | ${t('required version', lang)} |
|
|
{{ event['version'] || '--' }} |
| ${t('name', lang)} | ${t('description', lang)} | ${t('required version', lang)} |
|
|
{{ slot['version'] || '--' }} |
| ${t('name', lang)} | ${t('params', lang)} | ${t('description', lang)} | ${t('required version', lang)} |
|
|
{{ method['version'] }} |
| ${t('name', lang)} | ${t('default value', lang)} | ${t('description', lang)} | ${t('inherited name', lang)} |
|
|
{{ variable.value }} | {{ variable['desc']['${lang}'] || '--' }} | {{ variable.inherited_name }} |
${t('Total commits quantity:', lang)} {{ gitMetas.commitCount }}，${t('Total contributors quantity:', lang)} {{gitMetas.commitUniqueCount}}
{{person.authorName}}
## 提示
::: tip
`VUX` 是`库`而非`框架`，虽然有专用的 `vux-loader`，但并不影响你自由地使用其他组件库或者工具库。
================================================
FILE: docs/en/about/thanks.md
================================================
---
title: 感谢
---
# Thanks
## VUX 参考或者使用了以下开源项目的代码
+ [Vue](https://github.com/vuejs/vue)
+ [WeUI](https://github.com/weui/weui)
+ [FrozenUI](https://github.com/frozenui/frozenui)
+ [Ant Design](https://github.com/ant-design/ant-design)
+ [Ant Design Mobile](http://github.com/ant-design/ant-design-mobile)
+ [XScroll](https://github.com/huxiaoqi567/xscroll)
+ [Ionic](https://github.com/driftyco/ionic)
+ [SUI Mobile](https://github.com/sdc-alibaba/SUI-Mobile)
+ [PhotoSwipe](https://github.com/dimsemenov/PhotoSwipe)
## 工具框架
- 世界上最好的语言 `JavaScript`
- 啥都能做的前端构建工具 [Webpack](https://webpack.js.org/)
- 简单好用的文档展示工具 [Docute](https://docute.js.org/#/)
================================================
FILE: docs/en/contribution/donate.md
================================================
---
title: 捐赠支持 VUX
---
## 捐赠
* [Patreon](https://www.patreon.com/airyland)
* [PayPal](https://paypal.me/airyland)
* 支付宝 airyland@qq.com
================================================
FILE: docs/en/contribution/issue.md
================================================
---
title: 如何提 issue
---
# 如何提 issue
::: tip
使用本项目意味着你也有义务帮助其变得更好。
:::
不要浪费维护者时间。
不要让维护者帮你学习`Vue`，帮你熟悉`vue-loader`，甚至帮你写代码。
不要认为随便一句话就能让维护者明白你的意思，我们没有你想象的那么厉害。
不要提没有任何意义的、代码中带有业务逻辑不方便重现的Issue。
直接关闭你的`issue`不是对你不满，是你提问题方式不对，没有必要再浪费时间说明为什么要关闭你的`issue`。
马虎的提问，缺少上下文和重现步骤是在浪费彼此时间。
================================================
FILE: docs/en/contribution/pr.md
================================================
---
title: 如何贡献
---
# 如何贡献
## 文档更新
如果修改了组件代码，需要在组件目录的`metas.yml`加上changes，直接使用`next`作为版本号(如果已经存在该版本号，则直接添加变更条目即可)。
中括号内为变更类型，可选值 `fix` `enhance` `feature` `change`
比如：
``` yml
changes:
next:
en:
- '[fix] fix *** bug #issueId'
- '[feature] new feature'
zh-CN:
- '[fix] 修复 *** bug #issueId'
```
::: tip
当文档相关的 `PR`被合并后，文档服务器会在`5分钟`内拉取最新代码并执行`npm run build-docs`及`npm run build`实现文档及`demo`更新。
:::
## 为什么使用 next 为版本号
`next` 表示下个版本，未发布时在 `changelog` 里显示 `next`，提醒用户一些开发中的代码尚未发布。
当进行版本发布时，文档中的 `next` 会被脚本代替成真正的版本号，至此发布完毕。
这样的最大好处是更新代码时可以直接写 `changelog` 不用在意要写哪个版本号，在发布时翻 commit 记录写 `changelog` 是件比较浪费时间的事。
================================================
FILE: docs/en/contribution/vux-development.md
================================================
---
title: VUX 源码本地运行
---
# VUX 源码本地运行
::: tip
请更新 `NodeJS` 版本到 `v7.6.0` 以上，`build` 命令逐步使用 `async`。
:::
``` bash
yarn // 使用 yarn.lock 保证依赖版本一致
yarn dev
```
## 本地查看文档
``` bash
npm run doc:build // 构建文档
cd docs
yarn
npm run dev // 耗时较长
```
## 文档相关命令
> docs 目录下的相关命令，它们是 npm run doc:build 的一部分，但是可以单独运行
``` bash
node compile // 生成文档路由
node component-contributions // 从 git 记录里获取每个组件提交历史
npm run doc:dev // 运行
```
## 构建部分文档
文档页面比较多等待 build 命令会长，因此可以只构建部分文档方便快速查看。
``` bash
cd docs
node compile --include datetime // 只构建 datetime 相关文档
npm run dev
```
================================================
FILE: docs/en/css/1px.md
================================================
---
title: 1px 解决方案
---
# 1px 解决方案
::: tip
1px 方案在 VUX 组件内应用广泛，包括 `Grid`, `ButtonTab`, `XTable`, `XButton`, `Cell` 等等。
利用 `Flexbox` + `1px` 你可以实现复杂的宫格布局。
:::
## 引入
在你项目的`App.vue`引入，组件内不需要再重复引入。
``` html
```
## 可用类名：
- `vux-1px-l` 左边框
- `vux-1px-r` 右边框
- `vux-1px-t` 上边框
- `vux-1px-b` 下边框
- `vux-1px-tb` 上下边框
- `vux-1px` 全边框
================================================
FILE: docs/en/css/close.md
================================================
---
title: 纯 css close 图标
---
# 纯 css close 图标
::: tip
关闭图标主要应用于弹窗(dialog)关闭按钮以及弹窗(popup)头部的关闭按钮。
:::
## 使用
在你项目的`App.vue`引入，组件内不需要再重复引入。
``` html
```
## 类名
- `vux-close`
``` html
```
可以参考 `XDialog` 演示。
## 颜色
当你想设置图标颜色时，直接设置 color 即可。
``` html
```
================================================
FILE: docs/en/css.md
================================================
---
nav: zh-CN
---
## 1px
::: tip
1px 方案在 VUX 组件内应用广泛，包括 Grid, ButtonTab, XTable, XButton, Cell 等等。
为什么不参照其他组件库全部加上`X`前缀，主要是因为觉得总要写个`X`相当不顺手。
因Vue2.0限制组件名不能与原有的html5标签一样，因此部分组件进行了重命名，加上 `x-`前缀，所有需要加前缀的组件如下： - `Progress` => `XProgress` - `Switch` => `XSwitch` - `Dialog` => `XDialog` - `Address` => `XAddress` - `Circle` => `XCircle` - `XButton` - `XImg` - `XInput` - `XTextarea` - `XHeader` ### 各个组件变更： #### Swiper 引入路径变化 目录结构变化，与其他有子组件的统一，导致引入方式变化： ``` js // 0.x import Swiper from 'vux/src/components/swiper' import SwiperItem from 'vux/src/components/swiper-item' // 2.0 import Swiper from 'vux/src/components/swiper/swiper' import SwiperItem from 'vux/src/components/swiper/swiper-item' // 或者 import { Swiper, SwiperItem } from 'vux/src/components/swiper' // with vux-loader ``` #### ColorPicker 废弃`2.0.0`可用用，但是后面不再维护。
这个组件可以由`cell`配合`slot`扩展出来，而且更灵活。没有做过统计，但是感觉使用人数应该挺少。 #### Countdown 废弃`2.0.0`可用，但是后面不再维护。
功能薄弱，比较鸡肋。 #### Scroller reset方法更新 由于 Vue@2.x 的`broadcast`方法已经废弃，并且之前的设计也并不是很好，uuid的绑定也其实是没必要的。 - reset方法变成使用ref的`reset()`方法 - pullup reset 变成 ref 的 `donePullup()`方法 - pullup disable 变成 ref 的 `disablePullup()`方法 - pullup enable 变成 ref 的 `enablePullup()`方法 - pulldown reset 变成 ref 的 `donePulldown()`方法 - pullup和pulldown的status绑定变成`v-model="status"`绑定，示例 ``` js status: { pullupStatus: 'default', pulldownStatus: 'default' } ``` 详细参照Scroller文档进行更新 #### 表单默认required为true 保持和`html`规范一致, 影响的组件有 `XInput` `Checklist` #### Checklist 不显示错误提示 考虑到错误样式目前并不优雅，而用户有自定义错误样式的需要，因此处理成emit一个错误事件+底部slot， 用户可自行处理。 #### XInput 的valid获取 由于Vue2的$ref不再是响应的，因此不能直接在模板中通过ref调用组件的valid值(会报undefined)，所以需要变成在提交时再进行ref来获取valid值。 #### XAddress 默认地址数据更新 目前引用方式： ``` js import { XAddress, ChinaAddressData } from 'vux' ``` 如果你想继续使用旧版本数据 ``` js import { XAddress, ChinaAddressV1Data } from 'vux' ``` 按照[最新统计局数据](http://www.stats.gov.cn/tjsj/tjbz/xzqhdm/201608/t20160809_1386477.html)进行更新，部分区域已经不存在，部分id做了更新。因此请*谨慎*更新，评估后端数据存储设计和前端交互再进行更新，避免错误更新用户数据或者导致数据丢失。 完整更新如下图:
从`2.0`开始，推荐使用`webpack`来调用组件，因此不再在`repo`中保存`umd`文件，但提供了生成命令。
请更新 `NodeJS` 到版本 `7.6.0`及以上。
例子可查看：[https://github.com/airyland/vux/tree/v2/docs/examples](https://github.com/airyland/vux/tree/v2/docs/examples)
出于目录结构一致性考虑，即使是子组件也是一个文件夹，并且会有一个空的`index.min.css`样式文件。
``` |- dist/ |- vux.min.js ------------ 所有组件打包，仅用于测试，不推荐在生产环境使用 |- vux.min.css ----------- 所有组件样式打包，同样仅用于测试 |- components |- actionsheet |- index.min.js -------- 组件js代码 |- index.min.css ------- 组件css代码 ```
vux.min.js 包括了所有的组件、插件及默认地址库，都挂载在全局变量vux上。当然为了使用方便同样直接挂载到了`window`上。
组件调用举例: `vuxCell`
插件调用举例：`vuxAlertPlugin`
默认地址库调用：`vuxChinaAddressData`
