Initial commit
This commit is contained in:
moyus
commit
36c6454b79
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"presets": [
|
||||
["env", {
|
||||
"modules": false,
|
||||
"targets": {
|
||||
"browsers": ["iOS >= 8", "Android >= 4"]
|
||||
}
|
||||
}]
|
||||
],
|
||||
"plugins": ["transform-object-rest-spread"],
|
||||
"env": {
|
||||
"test": {
|
||||
"presets": [["env", {
|
||||
"modules": false
|
||||
}], "stage-2"],
|
||||
"plugins": ["istanbul"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
build/*.js
|
||||
config/*.js
|
||||
lib/*
|
||||
output/*
|
||||
examples/*
|
||||
site/*
|
||||
**/*.spec.*
|
||||
**/demo/data/**
|
||||
scroller.js
|
||||
animate.js
|
||||
gulpfile.js
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
module.exports = {
|
||||
parserOptions: {ecmaVersion: 8, sourceType: 'module', ecmaFeatures: {jsx: true, experimentalObjectRestSpread: true}},
|
||||
env: {es6: true, node: true, browser: true},
|
||||
plugins: ['html', 'json'],
|
||||
extends: ['eslint-config-aesir-mandatory'],
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
.DS_Store
|
||||
node_modules/
|
||||
dist/
|
||||
lib/
|
||||
output/
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
test/unit/coverage
|
||||
test/e2e/reports
|
||||
selenium-debug.log
|
||||
site/public
|
||||
site/dist
|
||||
site/build/bin/algolia-key.js
|
||||
|
||||
docs/
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
---
|
||||
title: 更新日志
|
||||
---
|
||||
|
||||
<!-- CUTOFF -->
|
||||
### 0.4.13
|
||||
|
||||
`2018-01-19`
|
||||
|
||||
- **Feature**
|
||||
- `ActionBar`属性`has-text`默认值为是否存在`slot`，即如果使用插槽可忽略`has-text`
|
||||
|
||||
- **Fix**
|
||||
- 修复`DatePicker`月份`undefined` #26
|
||||
- 修复`Icon`部分安卓机无法展示内置SVG问题 #27
|
||||
- 修复`ActionBar`的`Props`默认值设置无效 #28
|
||||
- 修复`TabPicker`在安卓`6.1`异步级联滑动问题
|
||||
|
||||
|
||||
### 0.4.8
|
||||
|
||||
`2018-01-16`
|
||||
|
||||
- **Feature**
|
||||
|
||||
- 新增组件`Codebox`, `Cashier`, `Chart`
|
||||
- `FieldItem`的属性`customized`默认值为是否存在`slot`，即如果使用插槽可忽略`customized` #23
|
||||
- `InputItem`新增属性`is-title-latent`用于支持表单标题延迟显示
|
||||
- `Radio`的`v-model`绑定由`options: Array<{text, value}>`中的`text`修改为`value`
|
||||
- `NumberKeyboard`新增属性`type`和`is-view`用于支持不同主题和键盘页面内嵌展示
|
||||
|
||||
- **Fix**
|
||||
- 修复`PopupTitleBar`无法引入
|
||||
- 修复`ImageViewer`部分安卓机无法关闭问题 #20
|
||||
- 修复`Picker`的`refresh`方法导致列表滚动异常 #24
|
||||
- 修复`InputItem`输入汉字异常 #25
|
||||
|
||||
|
||||
<!-- CUTOFF -->
|
||||
### 0.3.0
|
||||
|
||||
`2017-12-18`
|
||||
|
||||
- **Feature**
|
||||
|
||||
- `Radio`, `Selector`, `DropMenu`, `Tabs`, `TabPicker`支持`slot-scope`
|
||||
- `TabPicker`新增`data-struct`，`asyncFunc`支持普通，级联和异步三种数据结构
|
||||
- `Tip`新增`show/hide`事件
|
||||
- `Picker`新增`initial`事件
|
||||
- `DatePicker`新增`text-render`钩子方法满足列项内容自定义
|
||||
|
||||
- **Fix**
|
||||
- 修复`SwiperItem`无法引入错误
|
||||
- 修复`InputItem`, `NumberKeyboard`双向绑定异常
|
||||
- 修复`Popup`动画监听异常导致`hide`事件可能不会触发
|
||||
- 修复`Dialog`和`Toast`被遮盖问题
|
||||
- 修复`FieldItem`, `Tag`样式问题
|
||||
|
||||
### 0.2.0
|
||||
|
||||
`2017-11-28`
|
||||
|
||||
- **Feature**
|
||||
|
||||
- 新增组件`Radio`, `DatePicker`, `Captcha`
|
||||
- `Field`新增`solid`属性用来固定布局
|
||||
- `Steps`新增配置`icon`属性
|
||||
- `Agree`新增`slot`用来展示文案
|
||||
|
||||
- **Fix**
|
||||
- 修复部分文档，样式和错误
|
||||
|
||||
<!-- CUTOFF -->
|
||||
### 0.1.0
|
||||
|
||||
`2017-11-21`
|
||||
|
||||
- **Feature**
|
||||
|
||||
- 完成开发版开发，用于内部体验和测试
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
# Contribution Guideline
|
||||
|
||||
Thanks for considering to contribute this project. All issues and pull requests are highly appreciated.
|
||||
|
||||
## Pull Requests
|
||||
|
||||
Before sending pull request to this project, please read and follow guidelines below.
|
||||
|
||||
1. Branch: We only accept pull request on `dev` branch.
|
||||
2. Coding style: Follow the coding style used in mand-mobile.
|
||||
3. Commit message: Use English and be aware of your spelling.
|
||||
4. Test: Make sure to test your code.
|
||||
|
||||
Add device mode, API version, related log, screenshots and other related information in your pull request if possible.
|
||||
|
||||
NOTE: We assume all your contribution can be licensed under the [Apache License 2.0](https://github.com/didi/mand-mobile/blob/master/LICENSE).
|
||||
|
||||
## Issues
|
||||
|
||||
We love clearly described issues. :)
|
||||
|
||||
Following information can help us to resolve issues faster.
|
||||
|
||||
* Device mode and hardware information.
|
||||
* API version.
|
||||
* Logs.
|
||||
* Screenshots.
|
||||
* Steps to reproduce the issue.
|
||||
|
|
@ -0,0 +1,433 @@
|
|||
Apache License
|
||||
|
||||
Version 2.0, January 2004
|
||||
|
||||
http://www.apache.org/licenses/
|
||||
|
||||
|
||||
|
||||
|
||||
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
||||
|
||||
|
||||
|
||||
|
||||
1. Definitions.
|
||||
|
||||
|
||||
|
||||
|
||||
"License" shall mean the terms and conditions for use, reproduction,
|
||||
|
||||
and distribution as defined by Sections 1 through 9 of this document.
|
||||
|
||||
|
||||
|
||||
|
||||
"Licensor" shall mean the copyright owner or entity authorized by
|
||||
|
||||
the copyright owner that is granting the License.
|
||||
|
||||
|
||||
|
||||
|
||||
"Legal Entity" shall mean the union of the acting entity and all
|
||||
|
||||
other entities that control, are controlled by, or are under common
|
||||
|
||||
control with that entity. For the purposes of this definition,
|
||||
|
||||
"control" means (i) the power, direct or indirect, to cause the
|
||||
|
||||
direction or management of such entity, whether by contract or
|
||||
|
||||
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
||||
|
||||
outstanding shares, or (iii) beneficial ownership of such entity.
|
||||
|
||||
|
||||
|
||||
|
||||
"You" (or "Your") shall mean an individual or Legal Entity
|
||||
|
||||
exercising permissions granted by this License.
|
||||
|
||||
|
||||
|
||||
|
||||
"Source" form shall mean the preferred form for making modifications,
|
||||
|
||||
including but not limited to software source code, documentation
|
||||
|
||||
source, and configuration files.
|
||||
|
||||
|
||||
|
||||
|
||||
"Object" form shall mean any form resulting from mechanical
|
||||
|
||||
transformation or translation of a Source form, including but
|
||||
|
||||
not limited to compiled object code, generated documentation,
|
||||
|
||||
and conversions to other media types.
|
||||
|
||||
|
||||
|
||||
|
||||
"Work" shall mean the work of authorship, whether in Source or
|
||||
|
||||
Object form, made available under the License, as indicated by a
|
||||
|
||||
copyright notice that is included in or attached to the work
|
||||
|
||||
(an example is provided in the Appendix below).
|
||||
|
||||
|
||||
|
||||
|
||||
"Derivative Works" shall mean any work, whether in Source or Object
|
||||
|
||||
form, that is based on (or derived from) the Work and for which the
|
||||
|
||||
editorial revisions, annotations, elaborations, or other modifications
|
||||
|
||||
represent, as a whole, an original work of authorship. For the purposes
|
||||
|
||||
of this License, Derivative Works shall not include works that remain
|
||||
|
||||
separable from, or merely link (or bind by name) to the interfaces of,
|
||||
|
||||
the Work and Derivative Works thereof.
|
||||
|
||||
|
||||
|
||||
|
||||
"Contribution" shall mean any work of authorship, including
|
||||
|
||||
the original version of the Work and any modifications or additions
|
||||
|
||||
to that Work or Derivative Works thereof, that is intentionally
|
||||
|
||||
submitted to Licensor for inclusion in the Work by the copyright owner
|
||||
|
||||
or by an individual or Legal Entity authorized to submit on behalf of
|
||||
|
||||
the copyright owner. For the purposes of this definition, "submitted"
|
||||
|
||||
means any form of electronic, verbal, or written communication sent
|
||||
|
||||
to the Licensor or its representatives, including but not limited to
|
||||
|
||||
communication on electronic mailing lists, source code control systems,
|
||||
|
||||
and issue tracking systems that are managed by, or on behalf of, the
|
||||
|
||||
Licensor for the purpose of discussing and improving the Work, but
|
||||
|
||||
excluding communication that is conspicuously marked or otherwise
|
||||
|
||||
designated in writing by the copyright owner as "Not a Contribution."
|
||||
|
||||
|
||||
|
||||
|
||||
"Contributor" shall mean Licensor and any individual or Legal Entity
|
||||
|
||||
on behalf of whom a Contribution has been received by Licensor and
|
||||
|
||||
subsequently incorporated within the Work.
|
||||
|
||||
|
||||
|
||||
|
||||
2. Grant of Copyright License. Subject to the terms and conditions of
|
||||
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
|
||||
copyright license to reproduce, prepare Derivative Works of,
|
||||
|
||||
publicly display, publicly perform, sublicense, and distribute the
|
||||
|
||||
Work and such Derivative Works in Source or Object form.
|
||||
|
||||
|
||||
|
||||
|
||||
3. Grant of Patent License. Subject to the terms and conditions of
|
||||
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
|
||||
(except as stated in this section) patent license to make, have made,
|
||||
|
||||
use, offer to sell, sell, import, and otherwise transfer the Work,
|
||||
|
||||
where such license applies only to those patent claims licensable
|
||||
|
||||
by such Contributor that are necessarily infringed by their
|
||||
|
||||
Contribution(s) alone or by combination of their Contribution(s)
|
||||
|
||||
with the Work to which such Contribution(s) was submitted. If You
|
||||
|
||||
institute patent litigation against any entity (including a
|
||||
|
||||
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
||||
|
||||
or a Contribution incorporated within the Work constitutes direct
|
||||
|
||||
or contributory patent infringement, then any patent licenses
|
||||
|
||||
granted to You under this License for that Work shall terminate
|
||||
|
||||
as of the date such litigation is filed.
|
||||
|
||||
|
||||
|
||||
|
||||
4. Redistribution. You may reproduce and distribute copies of the
|
||||
|
||||
Work or Derivative Works thereof in any medium, with or without
|
||||
|
||||
modifications, and in Source or Object form, provided that You
|
||||
|
||||
meet the following conditions:
|
||||
|
||||
|
||||
|
||||
|
||||
(a) You must give any other recipients of the Work or
|
||||
|
||||
Derivative Works a copy of this License; and
|
||||
|
||||
|
||||
|
||||
|
||||
(b) You must cause any modified files to carry prominent notices
|
||||
|
||||
stating that You changed the files; and
|
||||
|
||||
|
||||
|
||||
|
||||
(c) You must retain, in the Source form of any Derivative Works
|
||||
|
||||
that You distribute, all copyright, patent, trademark, and
|
||||
|
||||
attribution notices from the Source form of the Work,
|
||||
|
||||
excluding those notices that do not pertain to any part of
|
||||
|
||||
the Derivative Works; and
|
||||
|
||||
|
||||
|
||||
|
||||
(d) If the Work includes a "NOTICE" text file as part of its
|
||||
|
||||
distribution, then any Derivative Works that You distribute must
|
||||
|
||||
include a readable copy of the attribution notices contained
|
||||
|
||||
within such NOTICE file, excluding those notices that do not
|
||||
|
||||
pertain to any part of the Derivative Works, in at least one
|
||||
|
||||
of the following places: within a NOTICE text file distributed
|
||||
|
||||
as part of the Derivative Works; within the Source form or
|
||||
|
||||
documentation, if provided along with the Derivative Works; or,
|
||||
|
||||
within a display generated by the Derivative Works, if and
|
||||
|
||||
wherever such third-party notices normally appear. The contents
|
||||
|
||||
of the NOTICE file are for informational purposes only and
|
||||
|
||||
do not modify the License. You may add Your own attribution
|
||||
|
||||
notices within Derivative Works that You distribute, alongside
|
||||
|
||||
or as an addendum to the NOTICE text from the Work, provided
|
||||
|
||||
that such additional attribution notices cannot be construed
|
||||
|
||||
as modifying the License.
|
||||
|
||||
|
||||
|
||||
|
||||
You may add Your own copyright statement to Your modifications and
|
||||
|
||||
may provide additional or different license terms and conditions
|
||||
|
||||
for use, reproduction, or distribution of Your modifications, or
|
||||
|
||||
for any such Derivative Works as a whole, provided Your use,
|
||||
|
||||
reproduction, and distribution of the Work otherwise complies with
|
||||
|
||||
the conditions stated in this License.
|
||||
|
||||
|
||||
|
||||
|
||||
5. Submission of Contributions. Unless You explicitly state otherwise,
|
||||
|
||||
any Contribution intentionally submitted for inclusion in the Work
|
||||
|
||||
by You to the Licensor shall be under the terms and conditions of
|
||||
|
||||
this License, without any additional terms or conditions.
|
||||
|
||||
Notwithstanding the above, nothing herein shall supersede or modify
|
||||
|
||||
the terms of any separate license agreement you may have executed
|
||||
|
||||
with Licensor regarding such Contributions.
|
||||
|
||||
|
||||
|
||||
|
||||
6. Trademarks. This License does not grant permission to use the trade
|
||||
|
||||
names, trademarks, service marks, or product names of the Licensor,
|
||||
|
||||
except as required for reasonable and customary use in describing the
|
||||
|
||||
origin of the Work and reproducing the content of the NOTICE file.
|
||||
|
||||
|
||||
|
||||
|
||||
7. Disclaimer of Warranty. Unless required by applicable law or
|
||||
|
||||
agreed to in writing, Licensor provides the Work (and each
|
||||
|
||||
Contributor provides its Contributions) on an "AS IS" BASIS,
|
||||
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
||||
|
||||
implied, including, without limitation, any warranties or conditions
|
||||
|
||||
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
||||
|
||||
PARTICULAR PURPOSE. You are solely responsible for determining the
|
||||
|
||||
appropriateness of using or redistributing the Work and assume any
|
||||
|
||||
risks associated with Your exercise of permissions under this License.
|
||||
|
||||
|
||||
|
||||
|
||||
8. Limitation of Liability. In no event and under no legal theory,
|
||||
|
||||
whether in tort (including negligence), contract, or otherwise,
|
||||
|
||||
unless required by applicable law (such as deliberate and grossly
|
||||
|
||||
negligent acts) or agreed to in writing, shall any Contributor be
|
||||
|
||||
liable to You for damages, including any direct, indirect, special,
|
||||
|
||||
incidental, or consequential damages of any character arising as a
|
||||
|
||||
result of this License or out of the use or inability to use the
|
||||
|
||||
Work (including but not limited to damages for loss of goodwill,
|
||||
|
||||
work stoppage, computer failure or malfunction, or any and all
|
||||
|
||||
other commercial damages or losses), even if such Contributor
|
||||
|
||||
has been advised of the possibility of such damages.
|
||||
|
||||
|
||||
|
||||
|
||||
9. Accepting Warranty or Additional Liability. While redistributing
|
||||
|
||||
the Work or Derivative Works thereof, You may choose to offer,
|
||||
|
||||
and charge a fee for, acceptance of support, warranty, indemnity,
|
||||
|
||||
or other liability obligations and/or rights consistent with this
|
||||
|
||||
License. However, in accepting such obligations, You may act only
|
||||
|
||||
on Your own behalf and on Your sole responsibility, not on behalf
|
||||
|
||||
of any other Contributor, and only if You agree to indemnify,
|
||||
|
||||
defend, and hold each Contributor harmless for any liability
|
||||
|
||||
incurred by, or claims asserted against, such Contributor by reason
|
||||
|
||||
of your accepting any such warranty or additional liability.
|
||||
|
||||
|
||||
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
|
||||
|
||||
|
||||
APPENDIX: How to apply the Apache License to your work.
|
||||
|
||||
|
||||
|
||||
|
||||
To apply the Apache License to your work, attach the following
|
||||
|
||||
boilerplate notice, with the fields enclosed by brackets "{}"
|
||||
|
||||
replaced with your own identifying information. (Don't include
|
||||
|
||||
the brackets!) The text should be enclosed in the appropriate
|
||||
|
||||
comment syntax for the file format. We also recommend that a
|
||||
|
||||
file or class name and description of purpose be included on the
|
||||
|
||||
same "printed page" as the copyright notice for easier
|
||||
|
||||
identification within third-party archives.
|
||||
|
||||
|
||||
|
||||
|
||||
Copyright (C) 2017 Beijing Didi Infinity Technology and Development Co.,Ltd. All rights reserved.
|
||||
|
||||
|
||||
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
||||
you may not use this file except in compliance with the License.
|
||||
|
||||
You may obtain a copy of the License at
|
||||
|
||||
|
||||
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
|
||||
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
||||
See the License for the specific language governing permissions and
|
||||
|
||||
limitations under the License.
|
||||
|
|
@ -0,0 +1,141 @@
|
|||
<div align="center">
|
||||
<a href="#">
|
||||
<img width="80" src="./assets/logo.png" alt="LOGO">
|
||||
</a>
|
||||
</div>
|
||||
<div align="center">
|
||||
<a href="http://forthebadge.com">
|
||||
<img src="http://forthebadge.com/images/badges/made-with-vue.svg">
|
||||
</a>
|
||||
<a href="http://forthebadge.com">
|
||||
<img src="http://forthebadge.com/images/badges/built-with-love.svg">
|
||||
</a>
|
||||
<a href="http://forthebadge.com">
|
||||
<img src="http://forthebadge.com/images/badges/makes-people-smile.svg">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
# mand-mobile
|
||||
|
||||
[](https://travis-ci.org/adidi/mand-mobile)
|
||||
[](https://codecov.io/gh/didi/mand-mobile/branch/master)
|
||||
[](https://www.npmjs.org/package/mand-mobile)
|
||||
[](http://npmtrends.com/mand-mobile)
|
||||
[](http://isitmaintained.com/project/didi/mand-mobile "Average time to resolve an issue")
|
||||
[](http://isitmaintained.com/project/didi/mand-mobile "Percentage of issues still open")
|
||||
|
||||
A mobile UI toolkit, based on `Vue.js 2`, designed for financial scenes.
|
||||
|
||||
## Links
|
||||
|
||||
* [Home](https://didi.github.io/mand-mobile/)
|
||||
* [Developer Instruction](site/docs/development.md)
|
||||
* [Theme Customization](site/docs/theme.md)
|
||||
* [Change Log](CHANGELOG.md)
|
||||
* [Examples](https://didi.github.io/mand-mobile/example/)
|
||||
|
||||
|
||||
|
||||
## Install & Usage
|
||||
|
||||
### Install
|
||||
|
||||
```shell
|
||||
npm install mand-mobile --save
|
||||
```
|
||||
|
||||
### Import
|
||||
|
||||
* Use <a href="https://github.com/ant-design/babel-plugin-import" target="_blank">babel-plugin-import</a>
|
||||
or
|
||||
<a href="https://github.com/Brooooooklyn/ts-import-plugin" target="_blank">ts-import-plugin</a> (Recommended)
|
||||
|
||||
```javascript
|
||||
import { Button } from 'mand-mobile'
|
||||
```
|
||||
|
||||
* Manually import
|
||||
|
||||
```javascript
|
||||
import Button from 'mand-mobile/lib/button'
|
||||
import 'mand-mobile/lib/button/style'
|
||||
```
|
||||
|
||||
* Totally import
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import mandMobile from 'mand-mobile'
|
||||
import 'mand-mobile/lib/mand-mobile.css'
|
||||
|
||||
Vue.use(mandMobile)
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
Select the components that you need to build your webapp. Find more details in [component preview](/mfe/mand-mobile/docs/preview).
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div id="app">
|
||||
<md-field title="form" class="block">
|
||||
<md-input-item
|
||||
title="name"
|
||||
placeholder="Please input your name."
|
||||
></md-input-item>
|
||||
<md-field-item
|
||||
title="sex"
|
||||
arrow="arrow-right"
|
||||
:value="sex"
|
||||
@click="isPickerShow = true"
|
||||
solid
|
||||
></md-field-item>
|
||||
<md-picker
|
||||
v-model="isPickerShow"
|
||||
:data="pickerData"
|
||||
title="sex"
|
||||
></md-picker>
|
||||
</md-field>
|
||||
<md-agree class="agree">
|
||||
Agree to the privacy policy.
|
||||
</md-agree>
|
||||
<md-action-bar :actions="actionBarData">
|
||||
¥128.00
|
||||
</md-action-bar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
Agree,
|
||||
ActionBar,
|
||||
Field,
|
||||
FieldItem,
|
||||
InputItem,
|
||||
Picker
|
||||
} from 'mand-mobile'
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
|
||||
components: {
|
||||
[Agree.name]: Agree,
|
||||
[ActionBar.name]: ActionBar,
|
||||
[Field.name]: Field,
|
||||
[FieldItem.name]: FieldItem,
|
||||
[InputItem.name]: InputItem,
|
||||
[Picker.name]: Picker
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
isPickerShow: false,
|
||||
actionBarData: [{
|
||||
text: 'confirm'
|
||||
}],
|
||||
pickerData: [[{text:'male'},{text:'female'}]]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 643 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
|
|
@ -0,0 +1,49 @@
|
|||
'use strict'
|
||||
const chalk = require('chalk')
|
||||
const semver = require('semver')
|
||||
const packageConfig = require('../package.json')
|
||||
const shell = require('shelljs')
|
||||
function exec (cmd) {
|
||||
return require('child_process').execSync(cmd).toString().trim()
|
||||
}
|
||||
|
||||
const versionRequirements = [
|
||||
{
|
||||
name: 'node',
|
||||
currentVersion: semver.clean(process.version),
|
||||
versionRequirement: packageConfig.engines.node
|
||||
}
|
||||
]
|
||||
|
||||
if (shell.which('npm')) {
|
||||
versionRequirements.push({
|
||||
name: 'npm',
|
||||
currentVersion: exec('npm --version'),
|
||||
versionRequirement: packageConfig.engines.npm
|
||||
})
|
||||
}
|
||||
|
||||
module.exports = function () {
|
||||
const warnings = []
|
||||
for (let i = 0; i < versionRequirements.length; i++) {
|
||||
const mod = versionRequirements[i]
|
||||
if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
|
||||
warnings.push(mod.name + ': ' +
|
||||
chalk.red(mod.currentVersion) + ' should be ' +
|
||||
chalk.green(mod.versionRequirement)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
if (warnings.length) {
|
||||
console.log('')
|
||||
console.log(chalk.yellow('To use this template, you must update following to modules:'))
|
||||
console.log()
|
||||
for (let i = 0; i < warnings.length; i++) {
|
||||
const warning = warnings[i]
|
||||
console.log(' ' + warning)
|
||||
}
|
||||
console.log()
|
||||
process.exit(1)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,196 @@
|
|||
const prompt = require('inquirer').createPromptModule()
|
||||
const shellJs = require('shelljs')
|
||||
const path = require('path')
|
||||
const bluebird = require('bluebird')
|
||||
const ora = require('ora')
|
||||
const moment = require('moment')
|
||||
const userName = require('git-user-name')
|
||||
const userEmail = require('git-user-email')
|
||||
const fs = bluebird.promisifyAll(require('fs'))
|
||||
|
||||
// path
|
||||
const CWD = process.cwd()
|
||||
const COMPONENTS_PATH = path.resolve(CWD, './components')
|
||||
const EXPECT_SHELL = path.resolve(CWD, './build/template.exp')
|
||||
const DEMO_INDEX_PATH = path.resolve(CWD, './examples/demo-index.js')
|
||||
const COMPONENT_INDEX = path.resolve(CWD, './components/index.js')
|
||||
const COMPONENT_JSON = path.resolve(CWD, './examples/components.json')
|
||||
|
||||
function init (answers) {
|
||||
return Promise.resolve(answers)
|
||||
.then(checkNoRepeat)
|
||||
.then(create)
|
||||
.then(sync)
|
||||
.catch(err => {
|
||||
console.warn(err)
|
||||
})
|
||||
}
|
||||
|
||||
function checkNoRepeat(answers) {
|
||||
return fs.readdirAsync(COMPONENTS_PATH)
|
||||
.then(files => {
|
||||
return Promise.all(files.map(file => checkFile(COMPONENTS_PATH, file, answers.componentName))).then(() => answers)
|
||||
})
|
||||
}
|
||||
|
||||
function upperFirst(str) {
|
||||
return String.prototype.replace.call(str, /^\w/, function (match) {
|
||||
return String.prototype.toUpperCase.call(match)
|
||||
})
|
||||
}
|
||||
|
||||
function changeKebabToCamel(str) {
|
||||
return String.prototype.replace.call(str, /\-(\w)/g, function(match, p1) {
|
||||
return String.prototype.toUpperCase.call(p1)
|
||||
})
|
||||
}
|
||||
|
||||
function sync(answers) {
|
||||
return Promise.all([syncToComponentJson(answers), syncToExample(answers), syncToIndex(answers)]).then(() =>answers)
|
||||
}
|
||||
|
||||
function syncToExample(answers) {
|
||||
fs.readFileAsync(DEMO_INDEX_PATH, 'utf8')
|
||||
.then(str => {
|
||||
return compile(answers, str)
|
||||
})
|
||||
.then(str => fs.writeFileAsync(DEMO_INDEX_PATH, str, 'utf8'))
|
||||
.then(() => answers)
|
||||
}
|
||||
|
||||
function syncToIndex(answers) {
|
||||
/* 同步components/index文件 */
|
||||
fs.readFileAsync(COMPONENT_INDEX, 'utf8')
|
||||
.then(str => {
|
||||
return compile(answers, str)
|
||||
})
|
||||
.then(str => fs.writeFileAsync(COMPONENT_INDEX, str, 'utf8'))
|
||||
.then(() => answers)
|
||||
}
|
||||
|
||||
function syncToComponentJson(answers) {
|
||||
const json = require(COMPONENT_JSON)
|
||||
let index = json.findIndex(item => item.category === answers.componentType)
|
||||
if (index === -1) {
|
||||
index = json.length
|
||||
json.push({
|
||||
category: answers.componentType,
|
||||
list: [],
|
||||
})
|
||||
}
|
||||
json[index].list.push({
|
||||
name: answers.componentNameUpper,
|
||||
path: `/${answers.componentName}`,
|
||||
icon: answers.componentName,
|
||||
text: answers.componentCnName,
|
||||
})
|
||||
Array.prototype.forEach.call(json, element => {
|
||||
Array.prototype.sort.call(element.list, function(a, b) {
|
||||
return a.name > b.name ? 1 : -1
|
||||
})
|
||||
})
|
||||
Array.prototype.sort.call(json, (a, b) => {
|
||||
return a.category > b.category ? 1: -1
|
||||
})
|
||||
return fs.writeFileAsync(COMPONENT_JSON, JSON.stringify(json), 'utf8')
|
||||
.then(answers => answers)
|
||||
}
|
||||
|
||||
function compile(metaData, fileStr) {
|
||||
return String.prototype.replace.call(fileStr, /\/\*.*@init<%(.*)%>.*\*\//g, function (match, p1) {
|
||||
return (String.prototype.replace.call(p1, /\${(\w*)}/g, function (innMatch, innP1) {
|
||||
return metaData[innP1]
|
||||
})) + '\r' +match
|
||||
})
|
||||
}
|
||||
|
||||
function checkFile(dir, file, name) {
|
||||
const filePath = path.resolve(dir, `./${file}`)
|
||||
return fs.statAsync(filePath)
|
||||
.then(stat => {
|
||||
if (stat.isDirectory()) {
|
||||
if (name === file) {
|
||||
return Promise.reject(`组件库中已经存在名为${name}的组件！请仔细核对后重新创建`)
|
||||
}
|
||||
}
|
||||
return
|
||||
})
|
||||
}
|
||||
|
||||
function exec (command, argvs) {
|
||||
const spinner = ora('Loading...').start()
|
||||
const result = shellJs.exec(`${command} ${argvs.map(item => `\'${item}\'`).join(' ')} >> /dev/null`)
|
||||
spinner.succeed(['执行完毕'])
|
||||
return result
|
||||
}
|
||||
|
||||
function create(answers) {
|
||||
exec('expect', [EXPECT_SHELL, answers.componentCnName, answers.componentName, answers.componentType, answers.componentDesc, answers.author, answers.time, COMPONENTS_PATH])
|
||||
return answers
|
||||
}
|
||||
|
||||
function getUserInfo() {
|
||||
let user = userName()
|
||||
if (!user) {
|
||||
user = 'anonymous'
|
||||
}
|
||||
const email = userEmail()
|
||||
if (email) {
|
||||
user += ` <${email}>`
|
||||
}
|
||||
return user
|
||||
}
|
||||
|
||||
function launch() {
|
||||
return prompt([
|
||||
{
|
||||
type: 'input',
|
||||
name: 'componentName',
|
||||
message: '请输入要创建的组件名称(kebab-case):',
|
||||
validate: function (str) {
|
||||
return /^[a-z][a-z|-]*[a-z]$/.test(str)
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
name: 'componentCnName',
|
||||
message: '请输入要创建的组件中文名称(中文):',
|
||||
},
|
||||
{
|
||||
type: 'list',
|
||||
choices: [
|
||||
"basic",
|
||||
"feedback",
|
||||
"form",
|
||||
"business",
|
||||
],
|
||||
name: 'componentType',
|
||||
message: '组件类型',
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
name: 'componentDesc',
|
||||
message: '组件描述',
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
name: 'author',
|
||||
message: '作者',
|
||||
default: getUserInfo(),
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
name: 'time',
|
||||
message: 'time',
|
||||
default: moment().format('YYYY年MM月DD日')
|
||||
}
|
||||
])
|
||||
.then(answers => {
|
||||
answers = Object.assign(answers, {
|
||||
componentNameUpper: upperFirst(changeKebabToCamel(answers.componentName))
|
||||
})
|
||||
return init(answers)
|
||||
})
|
||||
}
|
||||
|
||||
launch()
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
const wrap = require('word-wrap')
|
||||
|
||||
module.exports = {
|
||||
prompter: function(cz, commit) {
|
||||
cz.prompt([
|
||||
{
|
||||
type: "list",
|
||||
name: "type",
|
||||
message: "select the type of change that you\'re committing",
|
||||
choices: [
|
||||
{
|
||||
name: "feat: a feature addition (required)",
|
||||
value: "feat",
|
||||
},
|
||||
{
|
||||
name: "fix: fix a bug",
|
||||
value: "fix",
|
||||
},
|
||||
{
|
||||
name: "doc: a document modify or addition",
|
||||
value: "doc",
|
||||
},
|
||||
{
|
||||
name: "build: The front-end engineering",
|
||||
value: "build",
|
||||
},
|
||||
{
|
||||
name: "example: Example for component",
|
||||
value: "example"
|
||||
},
|
||||
{
|
||||
name: "test: unit test for component",
|
||||
value: "test"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "input",
|
||||
name: "scoped",
|
||||
message: "affected components for this commit, for example: button\n",
|
||||
},
|
||||
{
|
||||
type: "input",
|
||||
name: "description",
|
||||
message: "Abstract of this commit, perfer English\n",
|
||||
validate: function (str) {
|
||||
return !!str
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "input",
|
||||
name: "issue",
|
||||
message: "Related issue number for this commit, please split with \'\,\'\n",
|
||||
validate: function (str) {
|
||||
return /(\d*\,)*\d*/.test(str)
|
||||
}
|
||||
}
|
||||
])
|
||||
.then(answers => {
|
||||
const maxLineWidth = 80;
|
||||
|
||||
const wrapOptions = {
|
||||
trim: true,
|
||||
newline: '\n',
|
||||
indent:'',
|
||||
width: maxLineWidth
|
||||
};
|
||||
|
||||
|
||||
// Hard limit this line
|
||||
let body = answers.type
|
||||
if (answers.scoped) {
|
||||
body += `(${answers.scoped}): `
|
||||
} else {
|
||||
body += ': '
|
||||
}
|
||||
body += answers.description
|
||||
if (answers.issue) {
|
||||
const issue = answers.issue.split(',')
|
||||
body += `[${issue.map(item => '#'+item).join(',')}]`
|
||||
}
|
||||
wrap(body, wrapOptions)
|
||||
commit(body)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,146 @@
|
|||
const path = require('path')
|
||||
const glob = require('glob')
|
||||
const compiler = require('vueify').compiler
|
||||
const bluebird = require('bluebird')
|
||||
const fs = bluebird.promisifyAll(require('fs'))
|
||||
const copy = require('recursive-copy')
|
||||
const stylus = require('stylus')
|
||||
const babel = bluebird.promisifyAll(require('babel-core'))
|
||||
const TARGET_LIB_BASE = 'lib'
|
||||
const SRC_BASE = 'components'
|
||||
|
||||
|
||||
function babelPluginInsertCssImportForVue ({ types: t }) {
|
||||
function computedSameDirCssPosition(filePath) {
|
||||
const filePathParse = path.parse(filePath)
|
||||
return `./style/${filePathParse.name}.css`
|
||||
}
|
||||
return {
|
||||
visitor: {
|
||||
Program(path, state) {
|
||||
const importLiteral = computedSameDirCssPosition(state.opts.filePath)
|
||||
path.unshiftContainer('body', t.ImportDeclaration([],t.StringLiteral(importLiteral)))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function compileVueStylus (content, cb) {
|
||||
stylus(content)
|
||||
// .include(path.join(__dirname, 'src/*'))
|
||||
.import(path.join(__dirname, '../../components/_style/mixin/*.styl'))
|
||||
.import(path.join(__dirname, '../../node_modules/nib/lib/nib/vendor'))
|
||||
.import(path.join(__dirname, '../../node_modules/nib/lib/nib/gradients'))
|
||||
.import(path.join(__dirname, '../../node_modules/nib/lib/nib/flex'))
|
||||
.render((err, css) => {
|
||||
if (err) {
|
||||
throw err
|
||||
}
|
||||
cb(null, css)
|
||||
})
|
||||
}
|
||||
|
||||
function computedCompilerConfig(filePath) {
|
||||
return {
|
||||
extractCSS: true,
|
||||
babel: {
|
||||
plugins: [
|
||||
[babelPluginInsertCssImportForVue, {
|
||||
filePath,
|
||||
}]
|
||||
]
|
||||
},
|
||||
customCompilers: {
|
||||
stylus: compileVueStylus
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function move(destDir) {
|
||||
return new Promise((resolve, reject) => {
|
||||
copy(SRC_BASE, destDir, {filter: function(item) {
|
||||
if (/demo|test/.test(item)) {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}}, function (err, result) {
|
||||
if (err) {
|
||||
reject(err)
|
||||
}
|
||||
resolve(result)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function compileVueAndReplace(filePath) {
|
||||
const styleDir = path.join(path.dirname(filePath), 'style')
|
||||
if (!fs.existsSync(styleDir)) {
|
||||
fs.mkdirSync(styleDir)
|
||||
}
|
||||
const fileBaseName = path.basename(filePath, '.vue')
|
||||
const cssFilePath = path.join(styleDir, `${fileBaseName}.css`)
|
||||
const jsFilePath = filePath.replace(/\.vue$/, '.js')
|
||||
console.info(cssFilePath, jsFilePath)
|
||||
const fileContent = fs.readFileSync(filePath, {
|
||||
encoding: 'utf8',
|
||||
})
|
||||
const config = computedCompilerConfig(filePath)
|
||||
compiler.applyConfig(config)
|
||||
let styleContent = ''
|
||||
const styleCb = res => {
|
||||
if (res.style) {
|
||||
styleContent = res.style
|
||||
}
|
||||
}
|
||||
compiler.on('style', styleCb)
|
||||
return new Promise((resolve, reject) => {
|
||||
compiler.compile(fileContent, filePath, (err, result) => {
|
||||
if (err) {
|
||||
reject(err)
|
||||
}
|
||||
compiler.removeListener('style', styleCb)
|
||||
fs.writeFileAsync(jsFilePath, result)
|
||||
.then(() => fs.writeFileAsync(cssFilePath, styleContent))
|
||||
.then(() => {
|
||||
return fs.unlinkAsync(filePath)
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function compileJsAndReplace(filePath){
|
||||
babel.transformFileAsync(filePath)
|
||||
.then(({code}) => {
|
||||
return fs.writeFileAsync(filePath, code)
|
||||
})
|
||||
.catch(error => {
|
||||
console.info(`${filePath} build error::error.stack=${error.stack}`)
|
||||
})
|
||||
}
|
||||
|
||||
function compileAndReplaceAllJsFile() {
|
||||
const fileGlob = `${TARGET_LIB_BASE}/**/*.js`
|
||||
const jsFiles = glob.sync(fileGlob)
|
||||
return Promise.all(jsFiles.map(compileJsAndReplace))
|
||||
.catch(e => {
|
||||
console.info(e)
|
||||
})
|
||||
}
|
||||
|
||||
function compileAndReplaceAllVueFile() {
|
||||
const fileGlob = `${TARGET_LIB_BASE}/**/*.vue`
|
||||
const jsFiles = glob.sync(fileGlob)
|
||||
return Promise.all(jsFiles.map(compileVueAndReplace))
|
||||
.catch(e => {
|
||||
console.info(e)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
function main() {
|
||||
return move('lib')
|
||||
.then(() => Promise.all([compileAndReplaceAllJsFile(), compileAndReplaceAllVueFile()]))
|
||||
.catch(e => console.info(e))
|
||||
}
|
||||
|
||||
main()
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
const { rollupPlugin, EXAMPLE_OUTPUT_DIR, PROJECT_DIR } = require('./rollup-plugin-config')
|
||||
const rollup = require('rollup')
|
||||
const path = require('path')
|
||||
|
||||
const inputOptions = {
|
||||
input: path.resolve(PROJECT_DIR, 'examples/main.indemand.js'),
|
||||
plugins: rollupPlugin,
|
||||
}
|
||||
|
||||
const outputCommonjsOptions = {
|
||||
file: path.resolve(EXAMPLE_OUTPUT_DIR, 'mand-mobile-example.js'),
|
||||
format: 'umd',
|
||||
}
|
||||
|
||||
function build() {
|
||||
return rollup.rollup(inputOptions)
|
||||
.then(bundle => {
|
||||
return bundle.write(outputCommonjsOptions).then(() => {
|
||||
console.info('build example succ')
|
||||
})
|
||||
})
|
||||
.catch(err => {
|
||||
console.info(err)
|
||||
console.info('build error')
|
||||
})
|
||||
}
|
||||
|
||||
build()
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
const rollup = require('rollup')
|
||||
const path = require('path')
|
||||
const {
|
||||
LIB_DIR,
|
||||
PROJECT_DIR,
|
||||
rollupPlugin
|
||||
} = require('./rollup-plugin-config')
|
||||
|
||||
const inputOptions = {
|
||||
input: path.resolve(PROJECT_DIR, 'components/index.js'),
|
||||
external: ['vue'],
|
||||
plugins: rollupPlugin
|
||||
}
|
||||
const outputUmdOptions = {
|
||||
file: path.resolve(LIB_DIR, 'mand-mobile.umd.js'),
|
||||
format: 'umd',
|
||||
name: 'mand-mobile'
|
||||
}
|
||||
|
||||
const outputEsOptions = {
|
||||
file: path.resolve(LIB_DIR, 'mand-mobile.esm.js'),
|
||||
format: 'es',
|
||||
}
|
||||
|
||||
function build() {
|
||||
return rollup.rollup(inputOptions)
|
||||
.then(bundle => {
|
||||
return Promise.all([
|
||||
bundle.write(outputUmdOptions).then(() => {
|
||||
console.info('build umd module succ')
|
||||
}),
|
||||
bundle.write(outputEsOptions).then(() => {
|
||||
console.info('build es module succ')
|
||||
})
|
||||
])
|
||||
})
|
||||
.catch(err => {
|
||||
console.info(err)
|
||||
console.info('build error')
|
||||
})
|
||||
}
|
||||
|
||||
build()
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
const rollup = require('rollup')
|
||||
const path = require('path')
|
||||
const { rollupPlugin, DEV_OUTPUT_DIR, PROJECT_DIR } = require('./rollup-plugin-config')
|
||||
|
||||
|
||||
// express
|
||||
const livereload = require('livereload')
|
||||
const express = require('express')
|
||||
const history = require('connect-history-api-fallback')
|
||||
// const opn = require('opn')
|
||||
const port = 4000
|
||||
|
||||
const inputOptions = {
|
||||
input: path.resolve(PROJECT_DIR, 'examples/main.indemand.js'),
|
||||
plugins: rollupPlugin,
|
||||
}
|
||||
|
||||
const outputCommonjsOptions = {
|
||||
file: path.resolve(DEV_OUTPUT_DIR, 'mand-mobile-dev.js'),
|
||||
format: 'umd',
|
||||
}
|
||||
|
||||
function watch() {
|
||||
const watchOptions = {
|
||||
...inputOptions,
|
||||
output: outputCommonjsOptions,
|
||||
}
|
||||
const watcher = rollup.watch(watchOptions)
|
||||
watcher.on('event', e => {
|
||||
console.info(e)
|
||||
if (e.code === 'END') {
|
||||
console.info('resource rebuild')
|
||||
}
|
||||
if (e.code === 'ERROR') {
|
||||
console.info(e)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
function serve(path) {
|
||||
return express.static(path, {})
|
||||
}
|
||||
|
||||
function runServer() {
|
||||
// rollup buildwatch
|
||||
watch()
|
||||
|
||||
// livereload
|
||||
const lrserver = livereload.createServer()
|
||||
lrserver.watch(path.join(process.cwd(), 'output'))
|
||||
|
||||
// static resource server
|
||||
const app = express()
|
||||
app.use(history({
|
||||
verbose: true
|
||||
}))
|
||||
app.use('/', serve(DEV_OUTPUT_DIR))
|
||||
app.listen(port, function() {
|
||||
console.log('> Starting dev server...')
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
runServer()
|
||||
|
|
@ -0,0 +1,159 @@
|
|||
const path = require('path')
|
||||
const os = require('os')
|
||||
const fs = require('fs')
|
||||
const aliasPlugin = require('rollup-plugin-alias')
|
||||
const replacePlugin = require('rollup-plugin-replace')
|
||||
const jsonPlugin = require('rollup-plugin-json')
|
||||
const urlPlugin = require('rollup-plugin-url')
|
||||
const nodeResolvePlugin = require('rollup-plugin-node-resolve')
|
||||
const vuePlugin = require('rollup-plugin-vue')
|
||||
const babel = require('rollup-plugin-babel')
|
||||
const common = require('rollup-plugin-commonjs')
|
||||
const stylusMixin = require('../stylus-mixin')
|
||||
const builtins = require('rollup-plugin-node-builtins')
|
||||
const uglify = require('rollup-plugin-uglify')
|
||||
const nodeGlobals = require('rollup-plugin-node-globals')
|
||||
const glob = require('rollup-plugin-glob-import')
|
||||
const progress = require('rollup-plugin-progress')
|
||||
const fillHtmlPlugin = require('rollup-plugin-template-html')
|
||||
const filesize = require('rollup-plugin-filesize')
|
||||
const postcss = require('rollup-plugin-postcss')
|
||||
// const postcssUrl = require('postcss-url')
|
||||
|
||||
const babelrc = require('babelrc-rollup').default
|
||||
|
||||
const isProduction = process.env.NODE_ENV === 'production'
|
||||
const isTest = process.env.NODE_ENV === 'testing'
|
||||
const isDev = !(isProduction || isTest)
|
||||
const isExample = process.env.BUILD_TYPE === 'example'
|
||||
|
||||
function resolve(dir) {
|
||||
return path.resolve(__dirname, '../..', dir)
|
||||
}
|
||||
const LIB_DIR = resolve('lib')
|
||||
const PROJECT_DIR = resolve('.')
|
||||
|
||||
const tmpDir = os.tmpdir()
|
||||
const DEV_OUTPUT_DIR = fs.mkdtempSync(`${tmpDir}${path.sep}`)
|
||||
const EXAMPLE_OUTPUT_DIR = resolve('docs/example')
|
||||
|
||||
const tmpTestDir = os.tmpdir()
|
||||
const TEST_OUTPUT_DIR = fs.mkdtempSync(`${tmpTestDir}${path.sep}`)
|
||||
|
||||
function vueWarpper() {
|
||||
let distDir = '', fileName = ''
|
||||
if (isDev) {
|
||||
distDir = DEV_OUTPUT_DIR
|
||||
fileName = 'mand-mobile-dev.css'
|
||||
} else if (isExample) {
|
||||
distDir = EXAMPLE_OUTPUT_DIR
|
||||
fileName = 'mand-mobile-example.css'
|
||||
} else if (isProduction) {
|
||||
distDir = LIB_DIR
|
||||
fileName = 'mand-mobile.css'
|
||||
} else if (isTest) {
|
||||
distDir = TEST_OUTPUT_DIR
|
||||
fileName = 'mand-mobile-test.css'
|
||||
}
|
||||
return vuePlugin({
|
||||
css: path.resolve(distDir, fileName),
|
||||
stylus: {
|
||||
use: [stylusMixin],
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const vue = vueWarpper()
|
||||
// const css = cssWarpper()
|
||||
|
||||
function conditionHelper(condition, plugins) {
|
||||
return condition ? plugins : []
|
||||
}
|
||||
|
||||
const rollupPlugin = [
|
||||
// resolve
|
||||
...(conditionHelper(!isDev, [
|
||||
aliasPlugin({
|
||||
resolve: ['.js', '/index.js', '.css', '.vue', '.svg'], // @TODO '/index.js' hack
|
||||
'mand-mobile/components': resolve('components'),
|
||||
'mand-mobile/lib': resolve('lib'),
|
||||
'mand-mobile': resolve('lib/mand-mobile.esm.js'),
|
||||
'@examples/assets/images/bank-zs.svg': resolve('examples/assets/images/bank-zs.svg')
|
||||
}),
|
||||
])),
|
||||
...(conditionHelper(isDev, [
|
||||
aliasPlugin({
|
||||
resolve: ['.js', '/index.js', '.css', '.vue', '.svg'], // @TODO '/index.js' hack
|
||||
'mand-mobile/components': resolve('components'),
|
||||
'mand-mobile/lib': resolve('lib'),
|
||||
'mand-mobile': resolve('components'),
|
||||
'@examples/assets/images/bank-zs.svg': resolve('examples/assets/images/bank-zs.svg')
|
||||
}),
|
||||
])),
|
||||
nodeResolvePlugin({
|
||||
extensions: [ '.js', '.json', '.vue' ],
|
||||
}),
|
||||
...(conditionHelper(isTest, [
|
||||
common({
|
||||
exclude: ['components/_util/*.js'],
|
||||
namedExports: { 'avoriaz': ['mount', 'shallow'] },
|
||||
}),
|
||||
glob(),
|
||||
])),
|
||||
|
||||
// inject
|
||||
replacePlugin({
|
||||
'process.env.NODE_ENV': `"${process.env.NODE_ENV}"`
|
||||
}),
|
||||
...(conditionHelper(isTest, [
|
||||
builtins(),
|
||||
nodeGlobals(),
|
||||
])),
|
||||
|
||||
// resource
|
||||
urlPlugin({
|
||||
limit: 10 * 1024,
|
||||
}),
|
||||
jsonPlugin(),
|
||||
vue,
|
||||
postcss(),
|
||||
babel(babelrc({
|
||||
addModuleOptions: false,
|
||||
findRollupPresets: true,
|
||||
addExternalHelpersPlugin: false,
|
||||
})),
|
||||
|
||||
// dest
|
||||
...(conditionHelper(isProduction, [
|
||||
uglify({
|
||||
compress: {},
|
||||
}),
|
||||
])),
|
||||
...(conditionHelper(isDev, [
|
||||
fillHtmlPlugin({
|
||||
template: resolve('examples/index.html'),
|
||||
publicPath: '/',
|
||||
destFile: path.resolve(DEV_OUTPUT_DIR, 'index.html')
|
||||
})
|
||||
])),
|
||||
...(conditionHelper(isExample, [
|
||||
fillHtmlPlugin({
|
||||
template: resolve('examples/index.html'),
|
||||
publicPath: '/',
|
||||
destFile: path.resolve(EXAMPLE_OUTPUT_DIR, 'index.html')
|
||||
})
|
||||
])),
|
||||
// cli
|
||||
progress(),
|
||||
...(conditionHelper(isProduction, [
|
||||
filesize(),
|
||||
])),
|
||||
]
|
||||
|
||||
module.exports = {
|
||||
LIB_DIR,
|
||||
PROJECT_DIR,
|
||||
EXAMPLE_OUTPUT_DIR,
|
||||
DEV_OUTPUT_DIR,
|
||||
rollupPlugin,
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
const path = require('path')
|
||||
module.exports = function useMixin(style) {
|
||||
return style
|
||||
.import(path.join(__dirname, '../components/_style/mixin/*.styl'))
|
||||
.import(path.join(__dirname, '../node_modules/nib/lib/nib/vendor'))
|
||||
.import(path.join(__dirname, '../node_modules/nib/lib/nib/gradients'))
|
||||
.import(path.join(__dirname, '../node_modules/nib/lib/nib/flex'))
|
||||
}
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
#!/usr/bin/expect
|
||||
|
||||
set timeout 30
|
||||
set chinese_name [lindex $argv 0]
|
||||
set component_name [lindex $argv 1]
|
||||
set component_type [lindex $argv 2]
|
||||
set component_desc [lindex $argv 3]
|
||||
set author [lindex $argv 4]
|
||||
set create_time [lindex $argv 5]
|
||||
set component_path [lindex $argv 6]
|
||||
spawn mfe init mfe-template-mfd-mobile "$component_path/${component_name}"
|
||||
|
||||
expect "组件中文名称，如：轻提示"
|
||||
|
||||
send "${chinese_name}\r"
|
||||
|
||||
expect "组件类型, 选项: basic feedback form business"
|
||||
|
||||
send "${component_type}\r"
|
||||
|
||||
expect "组件描述"
|
||||
|
||||
send "${component_desc}\r"
|
||||
|
||||
expect "Author"
|
||||
|
||||
send "${author}\r"
|
||||
|
||||
expect "name"
|
||||
|
||||
send "${component_name}\r"
|
||||
|
||||
expect "time"
|
||||
|
||||
send "${create_time}\r"
|
||||
|
||||
expect eof
|
||||
|
||||
exit
|
||||
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
'use strict'
|
||||
require('../check-versions')()
|
||||
|
||||
process.env.NODE_ENV = 'production'
|
||||
|
||||
// // const ora = require('ora')
|
||||
const rm = require('rimraf')
|
||||
const path = require('path')
|
||||
const chalk = require('chalk')
|
||||
const webpack = require('webpack')
|
||||
const config = require('../../config')
|
||||
const webpackConfig = require('./webpack.example.conf')
|
||||
|
||||
|
||||
rm(path.join(config.example.assetsRoot, config.example.assetsSubDirectory), err => {
|
||||
if (err) {
|
||||
throw err
|
||||
}
|
||||
webpack(webpackConfig, function (err, stats) {
|
||||
// spinner.stop()
|
||||
if (err) {
|
||||
throw err
|
||||
}
|
||||
process.stdout.write(stats.toString({
|
||||
colors: true,
|
||||
modules: false,
|
||||
children: false,
|
||||
chunks: false,
|
||||
chunkModules: false
|
||||
}) + '\n\n')
|
||||
|
||||
if (stats.hasErrors()) {
|
||||
console.log(chalk.red(' Build failed with errors.\n'))
|
||||
process.exit(1)
|
||||
}
|
||||
|
||||
console.log(chalk.cyan(' Build complete.\n'))
|
||||
console.log(chalk.yellow(
|
||||
' Tip: built files are meant to be served over an HTTP server.\n' +
|
||||
' Opening index.html over file:// won\'t work.\n'
|
||||
))
|
||||
})
|
||||
})
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
'use strict'
|
||||
require('../check-versions')()
|
||||
|
||||
process.env.NODE_ENV = 'production'
|
||||
|
||||
const chalk = require('chalk')
|
||||
const webpack = require('webpack')
|
||||
const webpackConfig = require('./webpack.build.conf')
|
||||
|
||||
webpack(webpackConfig, function (err, stats) {
|
||||
if (err) {
|
||||
throw err
|
||||
}
|
||||
process.stdout.write(stats.toString({
|
||||
colors: true,
|
||||
modules: false,
|
||||
children: false,
|
||||
chunks: false,
|
||||
chunkModules: false
|
||||
}) + '\n\n')
|
||||
|
||||
if (stats.hasErrors()) {
|
||||
console.log(chalk.red(' Build failed with errors.\n'))
|
||||
process.exit(1)
|
||||
}
|
||||
|
||||
console.log(chalk.cyan(' Build complete.\n'))
|
||||
})
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
|
||||
/**
|
||||
* Build style entry of all components
|
||||
*/
|
||||
|
||||
const fs = require('fs-extra')
|
||||
const path = require('path')
|
||||
const components = require('../../examples/components.json')
|
||||
const dependencyTree = require('dependency-tree')
|
||||
const libDir = path.resolve(__dirname, '../../lib')
|
||||
|
||||
const SEP = path.sep
|
||||
|
||||
function generateComponentsList (components) {
|
||||
const list = ['field-item', 'swiper-item', 'popup-title-bar']
|
||||
components.map(nav =>
|
||||
nav.list.map(item =>
|
||||
list.push(item.path.substr(1))
|
||||
)
|
||||
)
|
||||
return list
|
||||
}
|
||||
|
||||
const componentList = generateComponentsList(components)
|
||||
function checkComponentHasStyle(componentName) {
|
||||
if (~componentName.indexOf('.js')) {
|
||||
componentName = componentName.replace('.js', '.css')
|
||||
return fs.existsSync(path.join(__dirname, `../lib/style/${componentName}`))
|
||||
} else {
|
||||
return fs.existsSync(path.join(__dirname, `../lib/style/${componentName}/index.css`))
|
||||
}
|
||||
}
|
||||
|
||||
function search(tree, checkList) {
|
||||
tree && Object.keys(tree).forEach(key => {
|
||||
search(tree[key], checkList)
|
||||
const component = key.split(`${SEP}mand-mobile${SEP}lib${SEP}`)[1].replace(`${SEP}index.js`, '').replace(`mixins${SEP}`, '')
|
||||
if (checkList.indexOf(component) === -1) {
|
||||
checkList.push(component)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// Analyze component dependencies
|
||||
function analyzeDependencies(componentName, libDir) {
|
||||
const checkList = []
|
||||
search(dependencyTree({
|
||||
directory: libDir,
|
||||
filename: path.resolve(libDir, componentName, 'index.js'),
|
||||
filter: path => path.indexOf(`mand-mobile${SEP}lib${SEP}`) !== -1
|
||||
}), checkList)
|
||||
return checkList.filter(component => checkComponentHasStyle(component))
|
||||
}
|
||||
|
||||
componentList.forEach(componentName => {
|
||||
const content = analyzeDependencies(componentName, libDir).map(component => {
|
||||
if (~component.indexOf('.js')) {
|
||||
component = component.replace('.js', '.css')
|
||||
return `require('../../style/${component}')`
|
||||
} else {
|
||||
return `require('../../style/${component}/index.css')`
|
||||
}
|
||||
})
|
||||
content.unshift('require(\'../../style/global.css\')')
|
||||
fs.outputFileSync(path.join(libDir, componentName, './style/index.js'), content.join('\n'))
|
||||
})
|
||||
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
/* eslint-disable */
|
||||
'use strict'
|
||||
require('eventsource-polyfill')
|
||||
var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
|
||||
|
||||
hotClient.subscribe(function (event) {
|
||||
if (event.action === 'reload') {
|
||||
window.location.reload()
|
||||
}
|
||||
})
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
'use strict'
|
||||
require('../check-versions')()
|
||||
|
||||
const config = require('../../config')
|
||||
if (!process.env.NODE_ENV) {
|
||||
process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
|
||||
}
|
||||
|
||||
const opn = require('opn')
|
||||
const path = require('path')
|
||||
const express = require('express')
|
||||
const webpack = require('webpack')
|
||||
const proxyMiddleware = require('http-proxy-middleware')
|
||||
let webpackConfig = require('./webpack.dev.conf')
|
||||
// default port where dev server listens for incoming traffic
|
||||
const port = process.env.PORT || config.dev.port
|
||||
// automatically open browser, if not set will be false
|
||||
const autoOpenBrowser = !!config.dev.autoOpenBrowser
|
||||
// Define HTTP proxies to your custom API backend
|
||||
// https://github.com/chimurai/http-proxy-middleware
|
||||
const proxyTable = config.dev.proxyTable
|
||||
|
||||
const app = express()
|
||||
const compiler = webpack(webpackConfig)
|
||||
const resolve = file => path.resolve(__dirname, file)
|
||||
const devMiddleware = require('webpack-dev-middleware')(compiler, {
|
||||
publicPath: webpackConfig.output.publicPath,
|
||||
})
|
||||
|
||||
const hotMiddleware = require('webpack-hot-middleware')(compiler, {
|
||||
log: false,
|
||||
heartbeat: 2000
|
||||
})
|
||||
|
||||
const serve = function (path) {
|
||||
return express.static(resolve(path), {})
|
||||
}
|
||||
|
||||
|
||||
// force page reload when html-webpack-plugin template changes
|
||||
// currently disabled until this is resolved:
|
||||
// https://github.com/jantimon/html-webpack-plugin/issues/680
|
||||
// compiler.plugin('compilation', function (compilation) {
|
||||
// compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
|
||||
// hotMiddleware.publish({ action: 'reload' })
|
||||
// cb()
|
||||
// })
|
||||
// })
|
||||
|
||||
// enable hot-reload and state-preserving
|
||||
// compilation error display
|
||||
app.use(hotMiddleware)
|
||||
|
||||
// proxy api requests
|
||||
Object.keys(proxyTable).forEach(function (context) {
|
||||
let options = proxyTable[context]
|
||||
if (typeof options === 'string') {
|
||||
options = { target: options }
|
||||
}
|
||||
app.use(proxyMiddleware(options.filter || context, options))
|
||||
})
|
||||
|
||||
// handle fallback for HTML5 history API
|
||||
app.use(require('connect-history-api-fallback')())
|
||||
|
||||
// serve webpack bundle output
|
||||
app.use(devMiddleware)
|
||||
app.use('/static', serve(path.join(__dirname, '../../static')))
|
||||
// serve pure static assets
|
||||
// const staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
|
||||
// app.use(staticPath, express.static('./static'))
|
||||
|
||||
var _resolve
|
||||
var _reject
|
||||
var readyPromise = new Promise((resolve, reject) => {
|
||||
_resolve = resolve
|
||||
_reject = reject
|
||||
})
|
||||
|
||||
var server
|
||||
var portfinder = require('portfinder')
|
||||
portfinder.basePort = port
|
||||
|
||||
console.log('> Starting dev server...')
|
||||
devMiddleware.waitUntilValid(() => {
|
||||
portfinder.getPort((err, port) => {
|
||||
if (err) {
|
||||
_reject(err)
|
||||
}
|
||||
process.env.PORT = port
|
||||
var uri = 'http://localhost:' + port
|
||||
console.log('> Listening at ' + uri + '\n')
|
||||
// when env is testing, don't need open it
|
||||
if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
|
||||
opn(uri)
|
||||
}
|
||||
server = app.listen(port)
|
||||
_resolve()
|
||||
})
|
||||
})
|
||||
|
||||
module.exports = {
|
||||
ready: readyPromise,
|
||||
close: () => {
|
||||
server.close()
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
'use strict'
|
||||
const path = require('path')
|
||||
const config = require('../../config')
|
||||
const ExtractTextPlugin = require('extract-text-webpack-plugin')
|
||||
const resolve = file => path.resolve(__dirname, file)
|
||||
|
||||
exports.assetsPath = function (_path) {
|
||||
const assetsSubDirectory = process.env.NODE_ENV === 'production'
|
||||
? config.build.assetsSubDirectory
|
||||
: config.dev.assetsSubDirectory
|
||||
return path.posix.join(assetsSubDirectory, _path)
|
||||
}
|
||||
|
||||
exports.cssLoaders = function (options) {
|
||||
options = options || {}
|
||||
|
||||
const cssLoader = {
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
minimize: process.env.NODE_ENV === 'production',
|
||||
sourceMap: options.sourceMap
|
||||
}
|
||||
}
|
||||
|
||||
// generate loader string to be used with extract text plugin
|
||||
function generateLoaders (loader, loaderOptions) {
|
||||
const loaders = [cssLoader]
|
||||
if (loader) {
|
||||
loaders.push({
|
||||
loader: loader + '-loader',
|
||||
options: Object.assign({}, loaderOptions, {
|
||||
sourceMap: options.sourceMap
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// Extract CSS when that option is specified
|
||||
// (which is the case during production build)
|
||||
if (options.extract) {
|
||||
return ExtractTextPlugin.extract({
|
||||
use: loaders,
|
||||
fallback: 'vue-style-loader'
|
||||
})
|
||||
} else {
|
||||
return ['vue-style-loader'].concat(loaders)
|
||||
}
|
||||
}
|
||||
|
||||
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
|
||||
const stylusMixins = [
|
||||
'~nib/lib/nib/vendor',
|
||||
'~nib/lib/nib/gradients.styl',
|
||||
'~nib/lib/nib/flex',
|
||||
resolve('../../components/_style/mixin/util.styl'),
|
||||
resolve('../../components/_style/mixin/theme.styl'),
|
||||
resolve('../../examples/theme.custom.styl')
|
||||
]
|
||||
return {
|
||||
css: generateLoaders(),
|
||||
postcss: generateLoaders(),
|
||||
stylus: generateLoaders('stylus', {
|
||||
import: stylusMixins
|
||||
}),
|
||||
styl: generateLoaders('stylus', {
|
||||
import: stylusMixins
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// Generate loaders for standalone style files (outside of .vue)
|
||||
exports.styleLoaders = function (options) {
|
||||
const output = []
|
||||
const loaders = exports.cssLoaders(options)
|
||||
for (const extension in loaders) {
|
||||
if (loaders.hasOwnProperty(extension)) {
|
||||
const loader = loaders[extension]
|
||||
output.push({
|
||||
test: new RegExp('\\.' + extension + '$'),
|
||||
use: loader
|
||||
})
|
||||
}
|
||||
}
|
||||
return output
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
'use strict'
|
||||
const utils = require('./utils')
|
||||
const config = require('../../config')
|
||||
const isProduction = process.env.NODE_ENV === 'production'
|
||||
|
||||
module.exports = {
|
||||
loaders: utils.cssLoaders({
|
||||
sourceMap: isProduction
|
||||
? config.build.productionSourceMap
|
||||
: config.dev.cssSourceMap,
|
||||
extract: isProduction
|
||||
}),
|
||||
transformToRequire: {
|
||||
video: 'src',
|
||||
source: 'src',
|
||||
img: 'src',
|
||||
image: 'xlink:href'
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
'use strict'
|
||||
const path = require('path')
|
||||
const utils = require('./utils')
|
||||
const vueLoaderConfig = require('./vue-loader.conf')
|
||||
|
||||
function resolve (dir) {
|
||||
return path.join(__dirname, '../..', dir)
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
resolve: {
|
||||
extensions: ['.js', '.vue', '.json'],
|
||||
alias: {
|
||||
'vue$': 'vue/dist/vue.runtime.esm.js',
|
||||
'@examples': resolve('examples'),
|
||||
'mand-mobile/lib': resolve('components'),
|
||||
'mand-mobile/components': resolve('components'),
|
||||
'mand-mobile': resolve('components'),
|
||||
}
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(js|vue)$/,
|
||||
loader: 'eslint-loader',
|
||||
enforce: 'pre',
|
||||
include: [resolve('components'), resolve('examples'), resolve('test')],
|
||||
options: {
|
||||
quiet: true,
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.vue$/,
|
||||
loader: 'vue-loader',
|
||||
options: vueLoaderConfig
|
||||
},
|
||||
{
|
||||
test: /\.js$/,
|
||||
loader: 'babel-loader?cacheDirectory',
|
||||
include: [resolve('components'), resolve('examples'), resolve('test')]
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpe?g|gif)(\?.*)?$/,
|
||||
loader: 'url-loader',
|
||||
options: {
|
||||
limit: 10000,
|
||||
name: utils.assetsPath('img/[name].[hash:7].[ext]')
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.svg$/,
|
||||
loader: 'svg-sprite-loader',
|
||||
include: [resolve('components'), resolve('examples/assets/images')]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
'use strict'
|
||||
const utils = require('./utils')
|
||||
const config = require('../../config')
|
||||
const webpack = require('webpack')
|
||||
const merge = require('webpack-merge')
|
||||
const baseWebpackConfig = require('./webpack.base.conf')
|
||||
const ExtractTextPlugin = require('extract-text-webpack-plugin')
|
||||
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
|
||||
const ProgressBarPlugin = require('progress-bar-webpack-plugin')
|
||||
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
|
||||
const pkg = require('../../package.json')
|
||||
|
||||
const env = config.build.env
|
||||
|
||||
const webpackConfig = merge(baseWebpackConfig, {
|
||||
entry: {
|
||||
'mand-mobile': './components/index.js',
|
||||
},
|
||||
devtool: config.build.productionSourceMap ? '#source-map' : false,
|
||||
output: {
|
||||
path: config.build.assetsRoot,
|
||||
filename: utils.assetsPath('[name].js'),
|
||||
library: 'mand-mobile',
|
||||
libraryTarget: 'umd',
|
||||
umdNamedDefine: true
|
||||
},
|
||||
module: {
|
||||
rules: utils.styleLoaders({ sourceMap: config.build.cssSourceMap })
|
||||
},
|
||||
externals: {
|
||||
vue: {
|
||||
root: 'Vue',
|
||||
commonjs: 'vue',
|
||||
commonjs2: 'vue',
|
||||
amd: 'vue'
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
new ProgressBarPlugin({
|
||||
format: ' BUILD MAND_MOBILE [:bar] :percent (:elapsed seconds)',
|
||||
clear: false
|
||||
}),
|
||||
// http://vuejs.github.io/vue-loader/en/workflow/production.html
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': env,
|
||||
'MAN_VERSION': `'${pkg.version}'`
|
||||
}),
|
||||
// UglifyJs do not support ES6+, you can also use babel-minify for better treeshaking: https://github.com/babel/minify
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
compress: {
|
||||
warnings: false
|
||||
},
|
||||
output: {
|
||||
ascii_only: true
|
||||
}
|
||||
}),
|
||||
// extract css into its own file
|
||||
new ExtractTextPlugin({
|
||||
filename: utils.assetsPath('[name].css')
|
||||
}),
|
||||
// Compress extracted CSS. We are using this plugin so that possible
|
||||
// duplicated CSS from different components can be deduped.
|
||||
new OptimizeCSSPlugin({
|
||||
cssProcessorOptions: {
|
||||
safe: true
|
||||
}
|
||||
}),
|
||||
new webpack.optimize.ModuleConcatenationPlugin()
|
||||
]
|
||||
})
|
||||
|
||||
if (process.env.npm_package_config_analysis) {
|
||||
webpackConfig.plugins.push(new BundleAnalyzerPlugin({
|
||||
// Can be `server`, `static` or `disabled`.
|
||||
// In `server` mode analyzer will start HTTP server to show bundle report.
|
||||
// In `static` mode single HTML file with bundle report will be generated.
|
||||
// In `disabled` mode you can use this plugin to just generate Webpack Stats JSON file by setting `generateStatsFile` to `true`.
|
||||
analyzerMode: 'server',
|
||||
// Host that will be used in `server` mode to start HTTP server.
|
||||
analyzerHost: 'localhost',
|
||||
// Port that will be used in `server` mode to start HTTP server.
|
||||
analyzerPort: 8888,
|
||||
// Path to bundle report file that will be generated in `static` mode.
|
||||
// Relative to bundles output directory.
|
||||
reportFilename: 'report.html',
|
||||
// Module sizes to show in report by default.
|
||||
// Should be one of `stat`, `parsed` or `gzip`.
|
||||
// See "Definitions" section for more information.
|
||||
defaultSizes: 'parsed',
|
||||
// Automatically open report in default browser
|
||||
openAnalyzer: true,
|
||||
// If `true`, Webpack Stats JSON file will be generated in bundles output directory
|
||||
generateStatsFile: false,
|
||||
// Name of Webpack Stats JSON file that will be generated if `generateStatsFile` is `true`.
|
||||
// Relative to bundles output directory.
|
||||
statsFilename: 'stats.json',
|
||||
// Options for `stats.toJson()` method.
|
||||
// For example you can exclude sources of your modules from stats file with `source: false` option.
|
||||
// See more options here: https://github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
|
||||
statsOptions: null,
|
||||
// Log level. Can be 'info', 'warn', 'error' or 'silent'.
|
||||
logLevel: 'info'
|
||||
}))
|
||||
}
|
||||
|
||||
module.exports = webpackConfig
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
const utils = require('./utils')
|
||||
const webpack = require('webpack')
|
||||
const config = require('../../config')
|
||||
const merge = require('webpack-merge')
|
||||
const baseWebpackConfig = require('./webpack.base.conf')
|
||||
const poststylus = require('poststylus')
|
||||
const pxtorem = require('postcss-pxtorem')
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin')
|
||||
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
|
||||
const DashBoardPlugin = require('webpack-dashboard/plugin')
|
||||
const pkg = require('../../package.json')
|
||||
// add hot-reload related code to entry chunks
|
||||
// Object.keys(baseWebpackConfig.entry).forEach(function (name) {
|
||||
// baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
|
||||
// })
|
||||
const pxtoremConfig = pxtorem({ rootValue: 100, propWhiteList: [] })
|
||||
|
||||
module.exports = merge(baseWebpackConfig, {
|
||||
entry: {
|
||||
'index': ['./build/webpack/dev-client', './examples/main.js']
|
||||
},
|
||||
output: {
|
||||
path: config.dev.assetsRoot,
|
||||
filename: '[name].js',
|
||||
chunkFilename: '[name].js',
|
||||
publicPath: config.dev.assetsPublicPath
|
||||
},
|
||||
module: {
|
||||
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
|
||||
},
|
||||
// cheap-module-eval-source-map is faster for development
|
||||
devtool: '#cheap-module-eval-source-map',
|
||||
plugins: [
|
||||
new DashBoardPlugin(),
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': config.dev.env,
|
||||
'MAN_VERSION': `'${pkg.version}'`
|
||||
}),
|
||||
// https://github.com/seaneking/poststylus#webpack
|
||||
new webpack.LoaderOptionsPlugin({
|
||||
options: {
|
||||
stylus: {
|
||||
use: [poststylus(pxtoremConfig)]
|
||||
}
|
||||
}
|
||||
}),
|
||||
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
|
||||
new webpack.HotModuleReplacementPlugin(),
|
||||
new webpack.NoEmitOnErrorsPlugin(),
|
||||
// https://github.com/ampedandwired/html-webpack-plugin
|
||||
new HtmlWebpackPlugin({
|
||||
filename: config.dev.index,
|
||||
template: './examples/index.html',
|
||||
inject: true
|
||||
}),
|
||||
new FriendlyErrorsPlugin()
|
||||
]
|
||||
})
|
||||
|
|
@ -0,0 +1,142 @@
|
|||
'use strict'
|
||||
const path = require('path')
|
||||
const utils = require('./utils')
|
||||
const webpack = require('webpack')
|
||||
const config = require('../../config')
|
||||
const merge = require('webpack-merge')
|
||||
const poststylus = require('poststylus')
|
||||
const pxtorem = require('postcss-pxtorem')
|
||||
const baseWebpackConfig = require('./webpack.base.conf')
|
||||
const CopyWebpackPlugin = require('copy-webpack-plugin')
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin')
|
||||
const ProgressBarPlugin = require('progress-bar-webpack-plugin')
|
||||
const ExtractTextPlugin = require('extract-text-webpack-plugin')
|
||||
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
|
||||
|
||||
const env = config.example.env
|
||||
|
||||
const webpackConfig = merge(baseWebpackConfig, {
|
||||
entry: {
|
||||
'index': './examples/main.js',
|
||||
},
|
||||
module: {
|
||||
rules: utils.styleLoaders({
|
||||
sourceMap: config.example.productionSourceMap,
|
||||
extract: true
|
||||
})
|
||||
},
|
||||
devtool: config.example.productionSourceMap ? '#source-map' : false,
|
||||
output: {
|
||||
path: config.example.assetsRoot,
|
||||
filename: utils.assetsPath('js/[name].[chunkhash:7].js'),
|
||||
chunkFilename: utils.assetsPath('js/[name].[chunkhash:7].js'),
|
||||
publicPath: config.example.assetsPublicPath
|
||||
},
|
||||
plugins: [
|
||||
new ProgressBarPlugin({
|
||||
format: ' BUILD EXAMPLES [:bar] :percent (:elapsed seconds)',
|
||||
clear: false
|
||||
}),
|
||||
// http://vuejs.github.io/vue-loader/en/workflow/production.html
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': env
|
||||
}),
|
||||
// UglifyJs do not support ES6+, you can also use babel-minify for better treeshaking: https://github.com/babel/minify
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
compress: {
|
||||
warnings: false
|
||||
},
|
||||
output: {
|
||||
ascii_only: true
|
||||
}
|
||||
}),
|
||||
// extract css into its own file
|
||||
new ExtractTextPlugin({
|
||||
filename: utils.assetsPath('css/[name].[contenthash:7].css')
|
||||
}),
|
||||
// Compress extracted CSS. We are using this plugin so that possible
|
||||
// duplicated CSS from different components can be deduped.
|
||||
new OptimizeCSSPlugin({
|
||||
cssProcessorOptions: {
|
||||
safe: true
|
||||
}
|
||||
}),
|
||||
// generate dist index.html with correct asset hash for caching.
|
||||
// you can customize output by editing /index.html
|
||||
// see https://github.com/ampedandwired/html-webpack-plugin
|
||||
new HtmlWebpackPlugin({
|
||||
filename: config.example.index,
|
||||
template: './examples/index.html',
|
||||
inject: true,
|
||||
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
|
||||
chunksSortMode: 'dependency'
|
||||
}),
|
||||
// keep module.id stable when vender modules does not change
|
||||
new webpack.HashedModuleIdsPlugin(),
|
||||
// split vendor js into its own file
|
||||
new webpack.optimize.CommonsChunkPlugin({
|
||||
name: 'vendor',
|
||||
minChunks: function (module) {
|
||||
// any required modules inside node_modules are extracted to vendor
|
||||
return (
|
||||
module.resource &&
|
||||
/\.js$/.test(module.resource) &&
|
||||
module.resource.indexOf(
|
||||
path.join(__dirname, '../../node_modules')
|
||||
) === 0
|
||||
)
|
||||
}
|
||||
}),
|
||||
// extract webpack runtime and module manifest to its own file in order to
|
||||
// prevent vendor hash from being updated whenever app bundle is updated
|
||||
new webpack.optimize.CommonsChunkPlugin({
|
||||
name: 'manifest',
|
||||
chunks: ['vendor']
|
||||
}),
|
||||
// copy custom static assets
|
||||
new CopyWebpackPlugin([
|
||||
{
|
||||
from: path.resolve(__dirname, '../static'),
|
||||
to: config.example.assetsSubDirectory,
|
||||
ignore: ['.*']
|
||||
}
|
||||
]),
|
||||
new webpack.LoaderOptionsPlugin({
|
||||
options: {
|
||||
stylus: {
|
||||
use: [poststylus([
|
||||
pxtorem({
|
||||
rootValue: 100,
|
||||
propWhiteList: [],
|
||||
})
|
||||
])]
|
||||
}
|
||||
}
|
||||
})
|
||||
]
|
||||
})
|
||||
|
||||
if (config.example.productionGzip) {
|
||||
const CompressionWebpackPlugin = require('compression-webpack-plugin')
|
||||
|
||||
webpackConfig.plugins.push(
|
||||
new CompressionWebpackPlugin({
|
||||
asset: '[path].gz[query]',
|
||||
algorithm: 'gzip',
|
||||
test: new RegExp(
|
||||
'\\.(' +
|
||||
config.example.productionGzipExtensions.join('|') +
|
||||
')$'
|
||||
),
|
||||
threshold: 10240,
|
||||
minRatio: 0.8
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
if (config.example.bundleAnalyzerReport) {
|
||||
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
|
||||
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
|
||||
}
|
||||
|
||||
module.exports = webpackConfig
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
'use strict'
|
||||
// This is the webpack config used for unit tests.
|
||||
|
||||
const utils = require('./utils')
|
||||
const webpack = require('webpack')
|
||||
const merge = require('webpack-merge')
|
||||
const ProgressBarPlugin = require('progress-bar-webpack-plugin')
|
||||
const ExtractTextPlugin = require('extract-text-webpack-plugin')
|
||||
const baseWebpackConfig = require('./webpack.base.conf')
|
||||
|
||||
const webpackConfig = merge(baseWebpackConfig, {
|
||||
// use inline sourcemap for karma-sourcemap-loader
|
||||
module: {
|
||||
rules: utils.styleLoaders()
|
||||
},
|
||||
devtool: '#cheap-module-eval-source-map',
|
||||
plugins: [
|
||||
new ProgressBarPlugin(),
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': require('../../config/test.env')
|
||||
}),
|
||||
// extract css into its own file
|
||||
new ExtractTextPlugin({
|
||||
filename: utils.assetsPath('[name].css')
|
||||
})
|
||||
]
|
||||
})
|
||||
|
||||
// no need for app entry during tests
|
||||
delete webpackConfig.entry
|
||||
|
||||
module.exports = webpackConfig
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
body
|
||||
font-family font-family-normal
|
||||
-webkit-tap-highlight-color transparent
|
||||
-webkit-font-smoothing antialiased
|
||||
-moz-osx-font-smoothing grayscale
|
||||
ol, li
|
||||
list-style none
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title/><path d="M366.08 196.096c5.632 5.632 5.632 14.336 0 19.968l-99.84 99.84c-5.632 5.632-14.848 5.632-19.968 0l-100.352-99.84c-5.632-5.632-5.632-14.336 0-19.968s14.336-5.632 19.968 0L256 286.208l90.112-90.112c5.632-5.632 14.336-5.632 19.968 0z"/></svg>
|
||||
|
After Width: | Height: | Size: 343 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title/><path d="M315.904 366.08c-5.632 5.632-14.336 5.632-19.968 0l-99.84-100.352c-5.632-5.12-5.632-14.336 0-19.968l99.84-99.84c5.632-5.632 14.336-5.632 19.968 0s5.632 14.336 0 19.968L225.792 256l90.112 90.112c5.632 5.632 5.632 14.336 0 19.968z"/></svg>
|
||||
|
After Width: | Height: | Size: 341 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title/><path d="M196.096 145.92c5.632-5.632 14.336-5.632 19.968 0l99.84 99.84c5.632 5.632 5.632 14.848 0 19.968l-99.84 100.352c-5.632 5.632-14.336 5.632-19.968 0s-5.632-14.336 0-19.968L286.208 256l-90.112-90.112c-5.632-5.632-5.632-14.336 0-19.968z"/></svg>
|
||||
|
After Width: | Height: | Size: 344 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title/><path d="M145.92 315.904c-5.632-5.632-5.632-14.336 0-19.968l100.352-99.84c5.12-5.632 14.336-5.632 19.968 0l99.84 99.84c5.632 5.632 5.632 14.336 0 19.968s-14.336 5.632-19.968 0L256 225.792l-90.112 90.112c-5.632 5.632-14.336 5.632-19.968 0z"/></svg>
|
||||
|
After Width: | Height: | Size: 342 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title/><path d="M256 496C123.449 496 16 388.551 16 256S123.449 16 256 16s240 107.449 240 240-107.449 240-240 240zm-23.441-375l7.031 165H271l8.441-165h-46.879zm44.692 218.76c-5.921-5.809-13.069-8.719-21.439-8.719-8.381 0-15.461 2.91-21.24 8.719-5.779 5.831-8.681 12.881-8.681 21.18 0 9.499 3.03 16.89 9.079 22.17 6.049 5.291 13.129 7.931 21.24 7.931 7.969 0 14.951-2.681 20.94-8.029 5.981-5.34 8.97-12.701 8.97-22.069 0-8.299-2.959-15.349-8.869-21.18z"/></svg>
|
||||
|
After Width: | Height: | Size: 547 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title/><path d="M256 29.696C131.072 29.696 29.696 131.072 29.696 256S131.072 482.304 256 482.304 482.304 380.928 482.304 256 380.928 29.696 256 29.696zm90.112 296.448l-19.968 19.968L256 275.968l-70.144 70.144-19.968-19.968L236.032 256l-70.144-70.144 19.968-19.968L256 236.032l70.144-70.144 19.968 19.968L275.968 256l70.144 70.144z"/></svg>
|
||||
|
After Width: | Height: | Size: 427 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title/><path d="M256 29.696C131.072 29.696 29.696 131.072 29.696 256S131.072 482.304 256 482.304 482.304 380.928 482.304 256 380.928 29.696 256 29.696zm-22.528 304.64l.512.512-19.968 19.968L128 268.8l19.968-19.968 65.536 65.536 145.92-145.92 19.968 19.968-145.92 145.92z"/></svg>
|
||||
|
After Width: | Height: | Size: 367 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title/><path fill="none" stroke="#ccc" stroke-width="24.381" d="M467.81 256c0 116.98-94.83 211.81-211.81 211.81S44.19 372.98 44.19 256 139.02 44.19 256 44.19 467.81 139.02 467.81 256z"/></svg>
|
||||
|
After Width: | Height: | Size: 280 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title/><path d="M111.104 91.136L256 236.032 400.896 91.136l19.968 19.968L275.968 256l144.896 144.896-19.968 19.968L256 275.968 111.104 420.864l-19.968-19.968L236.032 256 91.136 111.104l19.968-19.968z"/></svg>
|
||||
|
After Width: | Height: | Size: 296 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title/><path d="M241.778 270.222v128c0 7.854 6.368 14.222 14.222 14.222s14.222-6.368 14.222-14.222v-128h128c7.854 0 14.222-6.368 14.222-14.222s-6.368-14.222-14.222-14.222h-128v-128c0-7.855-6.368-14.222-14.222-14.222s-14.222 6.367-14.222 14.222v128h-128c-7.855 0-14.222 6.368-14.222 14.222s6.367 14.222 14.222 14.222h128z"/><path d="M0 256C0 114.615 114.615 0 256 0s256 114.615 256 256-114.615 256-256 256S0 397.385 0 256zm28.445 0c0 125.675 101.88 227.555 227.555 227.555S483.555 381.675 483.555 256c0-125.675-101.88-227.555-227.555-227.555S28.445 130.325 28.445 256z"/></svg>
|
||||
|
After Width: | Height: | Size: 664 B |
Binary file not shown.
|
After Width: | Height: | Size: 543 B |
Binary file not shown.
|
After Width: | Height: | Size: 947 B |
Binary file not shown.
|
After Width: | Height: | Size: 493 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="670" height="512" viewBox="0 0 670 512"><title/><path d="M222.793 371.595L55.698 204.5-.001 260.198l222.793 222.793L640.529 65.254 584.831 9.555 222.793 371.593z"/><path d="M55.699 232.35L27.85 260.199l194.944 194.944L612.682 65.255l-27.849-27.849-362.038 362.038L55.7 232.349z"/></svg>
|
||||
|
After Width: | Height: | Size: 333 B |
|
|
@ -0,0 +1 @@
|
|||
<svg class="lds-spinner" width="200" height="200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background:0 0"><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee"><animate attributeName="opacity" values="1;0" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite"/></rect><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee" transform="rotate(30 50 50)"><animate attributeName="opacity" values="1;0" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite"/></rect><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee" transform="rotate(60 50 50)"><animate attributeName="opacity" values="1;0" dur="1s" begin="-0.75s" repeatCount="indefinite"/></rect><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee" transform="rotate(90 50 50)"><animate attributeName="opacity" values="1;0" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite"/></rect><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee" transform="rotate(120 50 50)"><animate attributeName="opacity" values="1;0" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite"/></rect><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee" transform="rotate(150 50 50)"><animate attributeName="opacity" values="1;0" dur="1s" begin="-0.5s" repeatCount="indefinite"/></rect><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee" transform="rotate(180 50 50)"><animate attributeName="opacity" values="1;0" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite"/></rect><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee" transform="rotate(210 50 50)"><animate attributeName="opacity" values="1;0" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite"/></rect><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee" transform="rotate(240 50 50)"><animate attributeName="opacity" values="1;0" dur="1s" begin="-0.25s" repeatCount="indefinite"/></rect><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee" transform="rotate(270 50 50)"><animate attributeName="opacity" values="1;0" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite"/></rect><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee" transform="rotate(300 50 50)"><animate attributeName="opacity" values="1;0" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite"/></rect><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee" transform="rotate(330 50 50)"><animate attributeName="opacity" values="1;0" dur="1s" begin="0s" repeatCount="indefinite"/></rect></svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
|
|
@ -0,0 +1,310 @@
|
|||
/*
|
||||
* components
|
||||
*/
|
||||
|
||||
// button
|
||||
button-primary-fill = color-primary
|
||||
button-primary-fill-disabled = color-bg-disabled
|
||||
button-primary-fill-tap = color-bg-tap
|
||||
button-primary-width = 100%
|
||||
button-primary-height = 100px
|
||||
button-primary-font-size = 32px
|
||||
|
||||
button-ghost-fill = color-bg-base
|
||||
button-ghost-fill-tap = color-bg-tap
|
||||
button-ghost-primary-fill-tap = color-bg-tap-hightlight
|
||||
button-ghost-width = 160px
|
||||
button-ghost-height = 60px
|
||||
button-ghost-width-sm = 130px
|
||||
button-ghost-height-sm = 50px
|
||||
button-ghost-font-size = 24px
|
||||
button-ghost-color = color-border-element
|
||||
button-ghost-primary-color = color-primary
|
||||
|
||||
button-link-fill = color-bg-base
|
||||
button-link-fill-tap = color-bg-tap
|
||||
button-link-width = 100%
|
||||
button-link-height = 100px
|
||||
button-link-color = color-primary-tap
|
||||
|
||||
// icon
|
||||
icon-size-xs = 20px
|
||||
icon-size-sm = 24px
|
||||
icon-size-md = 32px
|
||||
icon-size-lg = 42px
|
||||
|
||||
// action-bar
|
||||
action-bar-width = 100%
|
||||
action-bar-height = 100px
|
||||
action-bar-button-font-size = 32px
|
||||
action-bar-text-font-size = 36px
|
||||
action-bar-button-color = color-text-base
|
||||
action-bar-button-color-hightlight = color-text-base-inverse
|
||||
action-bar-text-color = color-primary
|
||||
action-bar-button-fill = color-bg-base
|
||||
action-bar-button-fill-hightlight = color-primary
|
||||
action-bar-shadow = shadow-top
|
||||
action-bar-zindex = 100
|
||||
|
||||
// notice-bar
|
||||
notice-bar-fill = #4A4C5B
|
||||
notice-bar-color = color-text-base-inverse
|
||||
notice-bar-zindex = 1300
|
||||
|
||||
// stepper
|
||||
stepper-fill = color-primary-background
|
||||
stepper-disabled-opacity = opacity-disabled
|
||||
stepper-color = color-text-base
|
||||
stepper-height = 50px
|
||||
stepper-width-button = 50px
|
||||
stepper-width-input = 60px
|
||||
stepper-radius-button = 0 0 0 0
|
||||
stepper-radius-input = 0 0 0 0
|
||||
|
||||
// steps
|
||||
steps-color = color-text-disabled
|
||||
steps-color-active = color-primary
|
||||
steps-border = dotted 2px steps-color
|
||||
steps-border-active = solid 2px steps-color
|
||||
steps-size = 12px
|
||||
steps-size-active = 32px
|
||||
|
||||
// tab
|
||||
tab-color = color-primary-tap
|
||||
tab-font-size = 28px
|
||||
tab-height = 80px
|
||||
tab-ink-bar-height = 3px
|
||||
tab-zindex = 101
|
||||
|
||||
// field
|
||||
field-padding = h-gap-lg
|
||||
field-padding-h = 32px
|
||||
field-padding-v = 29px
|
||||
field-title-font-size = 28px
|
||||
field-title-weight = font-weight-medium = 500
|
||||
field-title-color = #333
|
||||
field-title-font-weight = font-weight-medium
|
||||
field-title-margin = 26px
|
||||
field-item-height = 100px
|
||||
field-item-padding-v = 22px
|
||||
field-item-bg-color = color-bg-base
|
||||
field-item-color = color-text-base
|
||||
field-item-color-check = color-text-minor
|
||||
field-item-color-action = color-text-link
|
||||
field-item-font-size = 28px
|
||||
field-item-font-size-check = 24px
|
||||
field-item-icon-color = #CCC
|
||||
field-item-border-color = #E6E6E6
|
||||
field-item-color-disabled = opacity-disabled
|
||||
|
||||
// input-item
|
||||
input-item-height = 100px
|
||||
input-item-title-width = 170px
|
||||
input-item-title-gap = 22px
|
||||
input-item-font-size = 28px
|
||||
input-item-title-latent-font-size = 26px
|
||||
input-item-font-size-large = 42px
|
||||
input-item-font-size-error = 22px
|
||||
input-item-font-weight = font-weight-normal
|
||||
input-item-color = color-text-base
|
||||
input-item-title-latent-color = #666
|
||||
input-item-color-disabled = opacity-disabled
|
||||
input-item-color-error = #FF525D
|
||||
input-item-placeholder = color-text-placeholder
|
||||
input-item-placeholder-hightlight = color-primary
|
||||
input-item-icon = color-text-placeholder // delete icon
|
||||
|
||||
// radio
|
||||
radio-fill = color-primary-tap
|
||||
|
||||
// switch
|
||||
switch-fill = color-primary
|
||||
switch-fill-inverse = color-bg-disabled
|
||||
switch-handle-color = #FFF
|
||||
switch-item-color-disabled = opacity-disabled
|
||||
|
||||
// agree
|
||||
agree-fill = color-primary
|
||||
agree-fill-inverse = color-bg-disabled
|
||||
agree-size-sm = 32px
|
||||
agree-size-lg = 44px
|
||||
|
||||
// action-sheet
|
||||
action-sheet-height = 120px
|
||||
action-sheet-font-size = 30px
|
||||
action-sheet-zindex = 1101
|
||||
|
||||
// picker
|
||||
picker-font-size = 30px
|
||||
picker-disabled-opacity = .2
|
||||
picker-color = color-text-base
|
||||
picker-zindex = 1100
|
||||
|
||||
// selector
|
||||
selector-height= 100px
|
||||
selector-disabled-opacity = .2
|
||||
selector-font-size = 30px
|
||||
selector-color = color-text-base
|
||||
selector-zindex = 1102
|
||||
|
||||
// dialog
|
||||
dialog-width = 534px
|
||||
dialog-radius = 0 0 0 0
|
||||
dialog-title-font-size = 32px
|
||||
dialog-text-font-size = 28px
|
||||
dialog-action-height = 100px
|
||||
dialog-action-font-size = 32px
|
||||
dialog-icon-size = 100px
|
||||
dialog-icon-fill = color-text-caption
|
||||
dialog-zindex = 1402
|
||||
|
||||
// toast
|
||||
toast-fill = rgba(0, 0, 0, .8)
|
||||
toast-font-size = 28px
|
||||
toast-color = #ccc
|
||||
toast-zindex = 1401
|
||||
|
||||
// tip
|
||||
tip-fill = rgba(74, 76, 91, 0.8)
|
||||
tip-font-size = 24px
|
||||
tip-color = #fff
|
||||
tip-zindex = 1300
|
||||
|
||||
// captcha
|
||||
captcha-zindex = 1400
|
||||
captcha-keyboard-zindex = 1403
|
||||
captcha-content-offset-top = 60px
|
||||
|
||||
// codebox
|
||||
codebox-font-size = font-body-normal
|
||||
codebox-width = 60px
|
||||
codebox-gutter = 10px
|
||||
codebox-border-color = color-border-base
|
||||
codebox-border-active-color = color-primary
|
||||
codebox-blink-color = color-primary
|
||||
codebox-input-height = 68px
|
||||
codebox-input-padding = 16px 32px
|
||||
codebox-input-font-size = 28px
|
||||
codebox-input-border-color = color-border-base
|
||||
codebox-dot-color = #000
|
||||
|
||||
// chart
|
||||
chart-line-color = #ccc
|
||||
chart-path-color = #fa8919
|
||||
chart-text-color = #666
|
||||
chart-label-size = 22px
|
||||
chart-value-size = 20px
|
||||
|
||||
// popup
|
||||
popup-title-bar-height = 110px
|
||||
popup-title-bar-font-size-button = 28px
|
||||
popup-title-bar-font-size-title = 36px
|
||||
popup-zindex = 1000
|
||||
|
||||
// drop-menu
|
||||
drop-menu-height = 82px
|
||||
drop-menu-zindex = 1200
|
||||
drop-menu-color = color-text-link
|
||||
drop-menu-font-size = font-body-normal
|
||||
|
||||
// number-keyboard
|
||||
number-keyboard-width = 100%
|
||||
number-keyboard-height = 428px
|
||||
number-keyboard-key-height = 107px
|
||||
number-keyboard-key-bg = #ebebeb
|
||||
number-keyboard-key-bg-tap = #f0f0f0
|
||||
number-keyboard-key-confirm-bg = color-primary
|
||||
number-keyboard-key-confirm-bg-tap = #DD7F49
|
||||
number-keyboard-key-font-size = 48px
|
||||
number-keyboard-key-color = color-text-minor
|
||||
number-keyboard-key-color-simple = #000
|
||||
number-keyboard-zindex = 1403
|
||||
|
||||
//tab-picker
|
||||
tab-picker-font-size = 28px
|
||||
tab-picker-color = color-text-base
|
||||
tab-picker-hignlight-color = color-primary
|
||||
tab-picker-min-height = 100px
|
||||
|
||||
// date-picker
|
||||
date-picker-font-size = 28px
|
||||
date-time-picker-font-size = 24px
|
||||
|
||||
/*
|
||||
* global color
|
||||
*/
|
||||
|
||||
// brand color
|
||||
color-primary = #fc9153 // 1st main color for buttons & hightlight text which is not clickable
|
||||
color-primary-tap = #3ca0e6 // 2nd main color for links and selected element
|
||||
color-primary-background = #f3f4f5 // 3rd main color for background
|
||||
|
||||
// text color
|
||||
color-text-base = #333 // default text color
|
||||
color-text-base-inverse = #fff // default inverse text color
|
||||
color-text-minor = #666 // auxiliary text color
|
||||
color-text-caption = #999 // subtitle and describe text color
|
||||
color-text-disabled = #ccc // input placeholder
|
||||
color-text-placeholder = #ccc // input placeholder
|
||||
color-text-hightlight = color-primary // hight text color
|
||||
color-text-link = color-primary-tap // link text color
|
||||
|
||||
// border color
|
||||
color-border-base = #d9d9d9 // defalut gap color of items
|
||||
color-border-minor = #ebebeb // gap color of items
|
||||
color-border-element = #999 // border color of element such as button
|
||||
|
||||
// background color
|
||||
color-bg-base = #fff // default background color
|
||||
color-bg-disabled = #CCC // background color for disabeld element
|
||||
color-bg-mask = rgba(0, 0, 0, .4) // background color for mask layer
|
||||
color-bg-tap = rgba(0, 0, 0, .08) // background color for element click state
|
||||
color-bg-tap-hightlight = rgba(252, 145, 83, .08) // background color for hightlight element click state
|
||||
|
||||
// opacity
|
||||
opacity-disabled = .4 // opacity of disabled button, switch, agree
|
||||
|
||||
/*
|
||||
* global size
|
||||
*/
|
||||
|
||||
// text size
|
||||
font-heading-large = 42px
|
||||
font-heading-medium = 36px
|
||||
font-heading-normal = 32px
|
||||
font-body-large = 30px
|
||||
font-body-normal = 28px
|
||||
font-minor-large = 24px
|
||||
font-minor-normal = 20px
|
||||
|
||||
font-weight-normal = 400
|
||||
font-weight-medium = 500
|
||||
font-weight-bold = 600
|
||||
|
||||
// radius size
|
||||
radius-normal = 4px
|
||||
radius-circle = 50%
|
||||
|
||||
// border size
|
||||
border-width-base = 2px
|
||||
|
||||
// gap size
|
||||
h-gap-sm = 12px
|
||||
h-gap-md = 20px
|
||||
h-gap-lg = 32px
|
||||
v-gap-sm = 12px
|
||||
v-gap-md = 20px
|
||||
v-gap-lg = 32px
|
||||
|
||||
/*
|
||||
* global other
|
||||
*/
|
||||
|
||||
// box shadow
|
||||
shadow-bottom = 0 2px 4px rgba(0, 0, 0, .12)
|
||||
shadow-top = 0 -2px 4px rgba(0, 0, 0, .12)
|
||||
|
||||
// animate
|
||||
ease-in-out-quint = cubic-bezier(.86, 0, .07, 1)
|
||||
|
||||
font-family-normal = "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
absolute-pos(t = 0, r = 0, b = 0, l = 0)
|
||||
top t
|
||||
right r
|
||||
bottom b
|
||||
left l
|
||||
fixed-pos(t = 0, r = 0, b = 0, l = 0)
|
||||
absolute-pos(t, r, b, l)
|
||||
|
||||
clearfix()
|
||||
&:after
|
||||
content ""
|
||||
display table
|
||||
clear both
|
||||
// normalize()
|
||||
// margin 0
|
||||
// padding 0
|
||||
// list-style none
|
||||
|
||||
word-break()
|
||||
word-break break-all
|
||||
word-wrap break-word
|
||||
word-ellipsis()
|
||||
white-space nowrap
|
||||
overflow hidden
|
||||
text-overflow ellipsis
|
||||
|
||||
hairline-common(direction, color)
|
||||
content ''
|
||||
position absolute
|
||||
z-index 2
|
||||
background-color color
|
||||
transform-origin 100% 50%
|
||||
if direction == top
|
||||
transform scaleY(0.5) translateY(-100%)
|
||||
@media (min-resolution: 3dppx)
|
||||
transform scaleY(0.33) translateY(-100%)
|
||||
else if direction == bottom
|
||||
transform scaleY(0.5) translateY(100%)
|
||||
@media (min-resolution: 3dppx)
|
||||
transform scaleY(0.33) translateY(100%)
|
||||
else if direction == left
|
||||
transform scaleX(0.5) translateX(-100%)
|
||||
@media (min-resolution: 3dppx)
|
||||
transform scaleX(0.33) translateX(-100%)
|
||||
else if direction == right
|
||||
transform scaleX(0.5) translateX(100%)
|
||||
@media (min-resolution: 3dppx)
|
||||
transform scaleX(0.33) translateX(100%)
|
||||
|
||||
hairline(direction = all, color = color-line-1, radius = false)
|
||||
position relative
|
||||
if direction == top
|
||||
&::after
|
||||
hairline-common(direction, color)
|
||||
top 0
|
||||
left 0
|
||||
width 100%
|
||||
height border-width-base
|
||||
|
||||
else if direction == bottom
|
||||
&::before
|
||||
hairline-common(direction, color)
|
||||
bottom 0
|
||||
left 0
|
||||
width 100%
|
||||
height border-width-base
|
||||
|
||||
else if direction == left
|
||||
&::after
|
||||
hairline-common(direction, color)
|
||||
top 0
|
||||
left 0
|
||||
width border-width-base
|
||||
height 100%
|
||||
|
||||
else if direction == right
|
||||
&::before
|
||||
hairline-common(direction, color)
|
||||
top 0
|
||||
right 0
|
||||
width border-width-base
|
||||
height 100%
|
||||
|
||||
else
|
||||
&::after
|
||||
content ''
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
width 200%
|
||||
height 200%
|
||||
border solid border-width-base color
|
||||
box-sizing border-box
|
||||
transform-origin 0 0
|
||||
transform scale(0.5)
|
||||
z-index 2
|
||||
if radius
|
||||
border-radius radius-normal * 2
|
||||
|
||||
svg-background(svg)
|
||||
background-image url(svg)
|
||||
|
||||
vertical-height(height)
|
||||
height height
|
||||
line-height height
|
||||
|
|
@ -0,0 +1,204 @@
|
|||
const Animate = (global => {
|
||||
const time =
|
||||
Date.now ||
|
||||
(() => {
|
||||
return +new Date()
|
||||
})
|
||||
const desiredFrames = 60
|
||||
const millisecondsPerSecond = 1000
|
||||
|
||||
let running = {}
|
||||
let counter = 1
|
||||
|
||||
return {
|
||||
/**
|
||||
* A requestAnimationFrame wrapper / polyfill.
|
||||
*
|
||||
* @param callback {Function} The callback to be invoked before the next repaint.
|
||||
* @param root {HTMLElement} The root element for the repaint
|
||||
*/
|
||||
requestAnimationFrame: (() => {
|
||||
// Check for request animation Frame support
|
||||
const requestFrame =
|
||||
global.requestAnimationFrame ||
|
||||
global.webkitRequestAnimationFrame ||
|
||||
global.mozRequestAnimationFrame ||
|
||||
global.oRequestAnimationFrame
|
||||
let isNative = !!requestFrame
|
||||
|
||||
if (requestFrame && !/requestAnimationFrame\(\)\s*\{\s*\[native code\]\s*\}/i.test(requestFrame.toString())) {
|
||||
isNative = false
|
||||
}
|
||||
|
||||
if (isNative) {
|
||||
return (callback, root) => {
|
||||
requestFrame(callback, root)
|
||||
}
|
||||
}
|
||||
|
||||
const TARGET_FPS = 60
|
||||
let requests = {}
|
||||
let requestCount = 0
|
||||
let rafHandle = 1
|
||||
let intervalHandle = null
|
||||
let lastActive = +new Date()
|
||||
|
||||
return callback => {
|
||||
const callbackHandle = rafHandle++
|
||||
|
||||
// Store callback
|
||||
requests[callbackHandle] = callback
|
||||
requestCount++
|
||||
|
||||
// Create timeout at first request
|
||||
if (intervalHandle === null) {
|
||||
intervalHandle = setInterval(() => {
|
||||
const time = +new Date()
|
||||
const currentRequests = requests
|
||||
|
||||
// Reset data structure before executing callbacks
|
||||
requests = {}
|
||||
requestCount = 0
|
||||
|
||||
for (const key in currentRequests) {
|
||||
if (currentRequests.hasOwnProperty(key)) {
|
||||
currentRequests[key](time)
|
||||
lastActive = time
|
||||
}
|
||||
}
|
||||
|
||||
// Disable the timeout when nothing happens for a certain
|
||||
// period of time
|
||||
if (time - lastActive > 2500) {
|
||||
clearInterval(intervalHandle)
|
||||
intervalHandle = null
|
||||
}
|
||||
}, 1000 / TARGET_FPS)
|
||||
}
|
||||
|
||||
return callbackHandle
|
||||
}
|
||||
})(),
|
||||
|
||||
/**
|
||||
* Stops the given animation.
|
||||
*
|
||||
* @param id {Integer} Unique animation ID
|
||||
* @return {Boolean} Whether the animation was stopped (aka, was running before)
|
||||
*/
|
||||
stop(id) {
|
||||
const cleared = running[id] != null
|
||||
cleared && (running[id] = null)
|
||||
return cleared
|
||||
},
|
||||
|
||||
/**
|
||||
* Whether the given animation is still running.
|
||||
*
|
||||
* @param id {Integer} Unique animation ID
|
||||
* @return {Boolean} Whether the animation is still running
|
||||
*/
|
||||
isRunning(id) {
|
||||
return running[id] != null
|
||||
},
|
||||
|
||||
/**
|
||||
* Start the animation.
|
||||
*
|
||||
* @param stepCallback {Function} Pointer to function which is executed on every step.
|
||||
* Signature of the method should be `function(percent, now, virtual) { return continueWithAnimation; }`
|
||||
* @param verifyCallback {Function} Executed before every animation step.
|
||||
* Signature of the method should be `function() { return continueWithAnimation; }`
|
||||
* @param completedCallback {Function}
|
||||
* Signature of the method should be `function(droppedFrames, finishedAnimation) {}`
|
||||
* @param duration {Integer} Milliseconds to run the animation
|
||||
* @param easingMethod {Function} Pointer to easing function
|
||||
* Signature of the method should be `function(percent) { return modifiedValue; }`
|
||||
* @param root {Element ? document.body} Render root, when available. Used for internal
|
||||
* usage of requestAnimationFrame.
|
||||
* @return {Integer} Identifier of animation. Can be used to stop it any time.
|
||||
*/
|
||||
start(stepCallback, verifyCallback, completedCallback, duration, easingMethod, root) {
|
||||
const start = time()
|
||||
let lastFrame = start
|
||||
let percent = 0
|
||||
let dropCounter = 0
|
||||
const id = counter++
|
||||
|
||||
if (!root) {
|
||||
root = document.body
|
||||
}
|
||||
|
||||
// Compacting running db automatically every few new animations
|
||||
if (id % 20 === 0) {
|
||||
const newRunning = {}
|
||||
for (const usedId in running) {
|
||||
newRunning[usedId] = true
|
||||
}
|
||||
running = newRunning
|
||||
}
|
||||
|
||||
// This is the internal step method which is called every few milliseconds
|
||||
const step = virtual => {
|
||||
// Normalize virtual value
|
||||
const render = virtual !== true
|
||||
|
||||
// Get current time
|
||||
const now = time()
|
||||
|
||||
// Verification is executed before next animation step
|
||||
if (!running[id] || (verifyCallback && !verifyCallback(id))) {
|
||||
running[id] = null
|
||||
completedCallback &&
|
||||
completedCallback(desiredFrames - dropCounter / ((now - start) / millisecondsPerSecond), id, false)
|
||||
return
|
||||
}
|
||||
|
||||
// For the current rendering to apply let's update omitted steps in memory.
|
||||
// This is important to bring internal state variables up-to-date with progress in time.
|
||||
if (render) {
|
||||
const droppedFrames = Math.round((now - lastFrame) / (millisecondsPerSecond / desiredFrames)) - 1
|
||||
for (let j = 0; j < Math.min(droppedFrames, 4); j++) {
|
||||
step(true)
|
||||
dropCounter++
|
||||
}
|
||||
}
|
||||
|
||||
// Compute percent value
|
||||
if (duration) {
|
||||
percent = (now - start) / duration
|
||||
if (percent > 1) {
|
||||
percent = 1
|
||||
}
|
||||
}
|
||||
|
||||
// Execute step callback, then...
|
||||
let value = easingMethod ? easingMethod(percent) : percent
|
||||
value = isNaN(value) ? 0 : value
|
||||
if ((stepCallback(value, now, render) === false || percent === 1) && render) {
|
||||
running[id] = null
|
||||
completedCallback &&
|
||||
completedCallback(
|
||||
desiredFrames - dropCounter / ((now - start) / millisecondsPerSecond),
|
||||
id,
|
||||
percent === 1 || duration == null,
|
||||
)
|
||||
} else if (render) {
|
||||
lastFrame = now
|
||||
this.requestAnimationFrame(step, root)
|
||||
}
|
||||
}
|
||||
|
||||
// Mark as running
|
||||
running[id] = true
|
||||
|
||||
// Init first step
|
||||
this.requestAnimationFrame(step, root)
|
||||
|
||||
// Return unique animation ID
|
||||
return id
|
||||
},
|
||||
}
|
||||
})(window)
|
||||
|
||||
export default Animate
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
import {isProd} from './env'
|
||||
|
||||
export const warn = (msg, fn = 'error') => {
|
||||
!isProd && console[fn](`[Mand-Mobile]: ${msg}`)
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
// Development environment
|
||||
export const isProd = process.env.NODE_ENV === 'production'
|
||||
|
||||
// Browser environment sniffing
|
||||
export const inBrowser = typeof window !== 'undefined'
|
||||
export const UA = inBrowser && window.navigator.userAgent.toLowerCase()
|
||||
export const isAndroid = UA && UA.indexOf('android') > 0
|
||||
export const isIOS = UA && /iphone|ipad|ipod|ios/.test(UA)
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
export function formatValueByGapRule(gapRule, value, gap = ' ', range, isAdd = 1) {
|
||||
const arr = value ? value.split('') : []
|
||||
let showValue = ''
|
||||
const rule = []
|
||||
gapRule.split('|').some((n, j) => {
|
||||
rule[j] = +n + (rule[j - 1] ? +rule[j - 1] : 0)
|
||||
})
|
||||
let j = 0
|
||||
arr.some((n, i) => {
|
||||
// Remove the excess part
|
||||
if (i > rule[rule.length - 1] - 1) {
|
||||
return
|
||||
}
|
||||
if (i > 0 && i === rule[j]) {
|
||||
showValue = showValue + gap + n
|
||||
j++
|
||||
} else {
|
||||
showValue = showValue + '' + n
|
||||
}
|
||||
})
|
||||
let adapt = 0
|
||||
rule.some((n, j) => {
|
||||
if (range === +n + 1 + j) {
|
||||
adapt = 1 * isAdd
|
||||
}
|
||||
})
|
||||
range = typeof range !== 'undefined' ? (range === 0 ? 0 : range + adapt) : showValue.length
|
||||
return {value: showValue, range: range}
|
||||
}
|
||||
|
||||
export function formatValueByGapStep(step, value, gap = ' ', direction = 'right', range, isAdd = 1, oldValue = '') {
|
||||
if (value.length === 0) {
|
||||
return {value, range}
|
||||
}
|
||||
|
||||
const arr = value && value.split('')
|
||||
let _range = range
|
||||
let showValue = ''
|
||||
|
||||
if (direction === 'right') {
|
||||
for (let j = arr.length - 1, k = 0; j >= 0; j--, k++) {
|
||||
const m = arr[j]
|
||||
showValue = k > 0 && k % step === 0 ? m + gap + showValue : m + '' + showValue
|
||||
}
|
||||
if (isAdd === 1) {
|
||||
// 在添加的情况下，如果添加前字符串的长度减去新的字符串的长度为2，说明多了一个间隔符，需要调整range
|
||||
if (oldValue.length - showValue.length === -2) {
|
||||
_range = range + 1
|
||||
}
|
||||
} else {
|
||||
// 在删除情况下，如果删除前字符串的长度减去新的字符串的长度为2，说明少了一个间隔符，需要调整range
|
||||
if (oldValue.length - showValue.length === 2) {
|
||||
_range = range - 1
|
||||
}
|
||||
// 删除到最开始，range 保持 0
|
||||
if (_range <= 0) {
|
||||
_range = 0
|
||||
}
|
||||
}
|
||||
} else {
|
||||
arr.some((n, i) => {
|
||||
showValue = i > 0 && i % step === 0 ? showValue + gap + n : showValue + '' + n
|
||||
})
|
||||
const adapt = range % (step + 1) === 0 ? 1 * isAdd : 0
|
||||
_range = typeof range !== 'undefined' ? (range === 0 ? 0 : range + adapt) : showValue.length
|
||||
}
|
||||
|
||||
return {value: showValue, range: _range}
|
||||
}
|
||||
|
||||
export function trimValue(value, gap = ' ') {
|
||||
value = typeof value === 'undefined' ? '' : value
|
||||
const reg = new RegExp(gap, 'g')
|
||||
value = value.toString().replace(reg, '')
|
||||
return value
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
export * from './debug'
|
||||
export * from './env'
|
||||
export * from './store'
|
||||
export * from './lang'
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
export function noop() {}
|
||||
|
||||
/**
|
||||
* Include external script dynamically
|
||||
*/
|
||||
export function requireRemoteScript(src, callback) {
|
||||
const doc = document
|
||||
const head = doc.head || doc.getElementsByTagName('head')[0]
|
||||
|
||||
let node = doc.createElement('script')
|
||||
const supportOnload = 'onload' in node
|
||||
const onload = function() {
|
||||
node = null
|
||||
typeof callback === 'function' && callback()
|
||||
}
|
||||
|
||||
if (supportOnload) {
|
||||
node.onload = onload
|
||||
} else {
|
||||
node.onreadystatechange = function() {
|
||||
if (/loaded|complete/.test(node.readyState)) {
|
||||
onload()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
node.async = true
|
||||
node.crossOrigin = true
|
||||
node.charset = 'utf-8'
|
||||
node.src = src
|
||||
head.appendChild(node)
|
||||
}
|
||||
|
||||
export function getDpr() {
|
||||
const getParam = (name, str) => {
|
||||
const reg = new RegExp(`(^|,)${name}=([^,]*)(,|$)`, 'i')
|
||||
const r = str.match(reg)
|
||||
if (r != null) {
|
||||
return r[2]
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
const viewPort = document.querySelector('meta[name=viewport]')
|
||||
|
||||
if (!viewPort) {
|
||||
return 1
|
||||
}
|
||||
|
||||
const viewPortContent = viewPort.getAttribute('content')
|
||||
const initialScale = +(getParam('initial-scale', viewPortContent) || 1)
|
||||
const maximumScale = +(getParam('maximum-scale', viewPortContent) || 1)
|
||||
const minimumScale = +(getParam('minimum-scale', viewPortContent) || 1)
|
||||
|
||||
return 1 / Math.min(initialScale, maximumScale, minimumScale)
|
||||
}
|
||||
|
||||
/**
|
||||
* transform a Function to Blob Url
|
||||
*/
|
||||
export function functionToUrl(fn) {
|
||||
const blob = new Blob([`(${fn.toString()})(null)`], {type: 'application/javascript'})
|
||||
return URL.createObjectURL(blob)
|
||||
}
|
||||
|
||||
/**
|
||||
* generate random id
|
||||
*/
|
||||
export function randomId(prefix = '', length = 8) {
|
||||
return `${prefix}-${parseInt(Math.random() * 10 ** length)}`
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
export const render = (function(global) {
|
||||
const docStyle = document.documentElement.style
|
||||
|
||||
let engine
|
||||
|
||||
if (global.opera && Object.prototype.toString.call(opera) === '[object Opera]') {
|
||||
engine = 'presto'
|
||||
} else if ('MozAppearance' in docStyle) {
|
||||
engine = 'gecko'
|
||||
} else if ('WebkitAppearance' in docStyle) {
|
||||
engine = 'webkit'
|
||||
} else if (typeof navigator.cpuClass === 'string') {
|
||||
engine = 'trident'
|
||||
}
|
||||
|
||||
const vendorPrefix = {
|
||||
trident: 'ms',
|
||||
gecko: 'Moz',
|
||||
webkit: 'Webkit',
|
||||
presto: 'O',
|
||||
}[engine]
|
||||
|
||||
const helperElem = document.createElement('div')
|
||||
const perspectiveProperty = vendorPrefix + 'Perspective'
|
||||
const transformProperty = vendorPrefix + 'Transform'
|
||||
|
||||
if (helperElem.style[perspectiveProperty] !== undefined) {
|
||||
return function(content, left, top) {
|
||||
// console.log(top)
|
||||
content.style[transformProperty] = `translate3d(${-left}px,${-top}px,0)`
|
||||
}
|
||||
} else if (helperElem.style[transformProperty] !== undefined) {
|
||||
return function(content, left, top) {
|
||||
content.style[transformProperty] = `translate(${-left}px,${-top}px,0)`
|
||||
}
|
||||
} else {
|
||||
return function(content, left, top) {
|
||||
content.style.marginLeft = left ? `${-left}px` : ''
|
||||
content.style.marginTop = top ? `${-top}px` : ''
|
||||
}
|
||||
}
|
||||
})(window)
|
||||
|
|
@ -0,0 +1,915 @@
|
|||
/*
|
||||
* Based on the work of: Scroller
|
||||
* http://github.com/zynga/scroller
|
||||
*
|
||||
* Copyright 2011, Zynga Inc.
|
||||
* Licensed under the MIT License.
|
||||
* https://raw.github.com/zynga/scroller/master/MIT-LICENSE.txt
|
||||
*
|
||||
*/
|
||||
import {noop, warn, extend} from './index'
|
||||
|
||||
import Animate from './animate'
|
||||
|
||||
const members = {
|
||||
_isSingleTouch: false,
|
||||
_isTracking: false,
|
||||
_didDecelerationComplete: false,
|
||||
_isGesturing: false,
|
||||
_isDragging: false,
|
||||
_isDecelerating: false,
|
||||
_isAnimating: false,
|
||||
_clientLeft: 0,
|
||||
_clientTop: 0,
|
||||
_clientWidth: 0,
|
||||
_clientHeight: 0,
|
||||
_contentWidth: 0,
|
||||
_contentHeight: 0,
|
||||
_snapWidth: 100,
|
||||
_snapHeight: 100,
|
||||
_refreshHeight: null,
|
||||
_refreshActive: false,
|
||||
_refreshActivate: null,
|
||||
_refreshDeactivate: null,
|
||||
_refreshStart: null,
|
||||
_zoomLevel: 1,
|
||||
_scrollLeft: 0,
|
||||
_scrollTop: 0,
|
||||
_maxScrollLeft: 0,
|
||||
_maxScrollTop: 0,
|
||||
_scheduledLeft: 0,
|
||||
_scheduledTop: 0,
|
||||
_lastTouchLeft: null,
|
||||
_lastTouchTop: null,
|
||||
_lastTouchMove: null,
|
||||
_positions: null,
|
||||
_minDecelerationScrollLeft: null,
|
||||
_minDecelerationScrollTop: null,
|
||||
_maxDecelerationScrollLeft: null,
|
||||
_maxDecelerationScrollTop: null,
|
||||
_decelerationVelocityX: null,
|
||||
_decelerationVelocityY: null,
|
||||
}
|
||||
|
||||
const easeOutCubic = pos => {
|
||||
return Math.pow(pos - 1, 3) + 1
|
||||
}
|
||||
|
||||
const easeInOutCubic = pos => {
|
||||
if ((pos /= 0.5) < 1) {
|
||||
return 0.5 * Math.pow(pos, 3)
|
||||
}
|
||||
|
||||
return 0.5 * (Math.pow(pos - 2, 3) + 2)
|
||||
}
|
||||
|
||||
export default class Scroller {
|
||||
constructor(callback = noop, options) {
|
||||
this.options = {
|
||||
scrollingX: true,
|
||||
scrollingY: true,
|
||||
animating: true,
|
||||
animationDuration: 250,
|
||||
bouncing: true,
|
||||
locking: true,
|
||||
paging: false,
|
||||
snapping: false,
|
||||
zooming: false,
|
||||
minZoom: 0.5,
|
||||
maxZoom: 3,
|
||||
speedMultiplier: 1,
|
||||
scrollingComplete: noop,
|
||||
penetrationDeceleration: 0.03,
|
||||
penetrationAcceleration: 0.08,
|
||||
}
|
||||
extend(this.options, options)
|
||||
this._callback = callback
|
||||
}
|
||||
|
||||
/**
|
||||
* Configures the dimensions of the client (outer) and content (inner) elements.
|
||||
* Requires the available space for the outer element and the outer size of the inner element.
|
||||
* All values which are falsy (null or zero etc.) are ignored and the old value is kept.
|
||||
*
|
||||
* @param clientWidth {Integer ? null} Inner width of outer element
|
||||
* @param clientHeight {Integer ? null} Inner height of outer element
|
||||
* @param contentWidth {Integer ? null} Outer width of inner element
|
||||
* @param contentHeight {Integer ? null} Outer height of inner element
|
||||
*/
|
||||
setDimensions(clientWidth, clientHeight, contentWidth, contentHeight) {
|
||||
// Only update values which are defined
|
||||
if (clientWidth === +clientWidth) {
|
||||
this._clientWidth = clientWidth
|
||||
}
|
||||
|
||||
if (clientHeight === +clientHeight) {
|
||||
this._clientHeight = clientHeight
|
||||
}
|
||||
|
||||
if (contentWidth === +contentWidth) {
|
||||
this._contentWidth = contentWidth
|
||||
}
|
||||
|
||||
if (contentHeight === +contentHeight) {
|
||||
this._contentHeight = contentHeight
|
||||
}
|
||||
|
||||
// Refresh maximums
|
||||
this._computeScrollMax()
|
||||
|
||||
// Refresh scroll position
|
||||
this.scrollTo(this._scrollLeft, this._scrollTop, true)
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets the client coordinates in relation to the document.
|
||||
*
|
||||
* @param left {Integer ? 0} Left position of outer element
|
||||
* @param top {Integer ? 0} Top position of outer element
|
||||
*/
|
||||
setPosition(left, top) {
|
||||
this._clientLeft = left || 0
|
||||
this._clientTop = top || 0
|
||||
}
|
||||
|
||||
/**
|
||||
* Configures the snapping (when snapping is active)
|
||||
*
|
||||
* @param width {Integer} Snapping width
|
||||
* @param height {Integer} Snapping height
|
||||
*/
|
||||
setSnapSize(width, height) {
|
||||
this._snapWidth = width
|
||||
this._snapHeight = height
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the scroll position and zooming values
|
||||
*
|
||||
* @return {Map} `left` and `top` scroll position and `zoom` level
|
||||
*/
|
||||
getValues() {
|
||||
return {
|
||||
left: this._scrollLeft,
|
||||
top: this._scrollTop,
|
||||
zoom: this._zoomLevel,
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the maximum scroll values
|
||||
*
|
||||
* @return {Map} `left` and `top` maximum scroll values
|
||||
*/
|
||||
getScrollMax() {
|
||||
return {
|
||||
left: this._maxScrollLeft,
|
||||
top: this._maxScrollTop,
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Activates pull-to-refresh. A special zone on the top of the list to start a list refresh whenever
|
||||
* the user event is released during visibility of this zone. This was introduced by some apps on iOS like
|
||||
* the official Twitter client.
|
||||
*
|
||||
* @param height {Integer} Height of pull-to-refresh zone on top of rendered list
|
||||
* @param activateCallback {Function} Callback to execute on activation. This is for signalling the user about a refresh is about to happen when he release.
|
||||
* @param deactivateCallback {Function} Callback to execute on deactivation. This is for signalling the user about the refresh being cancelled.
|
||||
* @param startCallback {Function} Callback to execute to start the real async refresh action. Call {@link #finishPullToRefresh} after finish of refresh.
|
||||
*/
|
||||
activatePullToRefresh(height, activateCallback, deactivateCallback, startCallback) {
|
||||
this._refreshHeight = height
|
||||
this._refreshActivate = activateCallback
|
||||
this._refreshDeactivate = deactivateCallback
|
||||
this._refreshStart = startCallback
|
||||
}
|
||||
|
||||
/**
|
||||
* Starts pull-to-refresh manually.
|
||||
*/
|
||||
triggerPullToRefresh() {
|
||||
// Use publish instead of scrollTo to allow scrolling to out of boundary position
|
||||
// We don't need to normalize scrollLeft, zoomLevel, etc. here because we only y-scrolling when pull-to-refresh is enabled
|
||||
this._publish(this._scrollLeft, -this._refreshHeight, this._zoomLevel, true)
|
||||
|
||||
if (this._refreshStart) {
|
||||
this._refreshStart()
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Signalizes that pull-to-refresh is finished.
|
||||
*/
|
||||
finishPullToRefresh() {
|
||||
this._refreshActive = false
|
||||
|
||||
if (this._refreshDeactivate) {
|
||||
this._refreshDeactivate()
|
||||
}
|
||||
|
||||
this.scrollTo(this._scrollLeft, this._scrollTop, true)
|
||||
}
|
||||
|
||||
/**
|
||||
* Scrolls to the given position. Respect limitations and snapping automatically.
|
||||
*
|
||||
* @param left {Number?null} Horizontal scroll position, keeps current if value is <code>null</code>
|
||||
* @param top {Number?null} Vertical scroll position, keeps current if value is <code>null</code>
|
||||
* @param animate {Boolean?false} Whether the scrolling should happen using an animation
|
||||
* @param zoom {Number?null} Zoom level to go to
|
||||
*/
|
||||
scrollTo(left, top, animate, zoom = 1) {
|
||||
// Stop deceleration
|
||||
if (this._isDecelerating) {
|
||||
Animate.stop(this._isDecelerating)
|
||||
this._isDecelerating = false
|
||||
}
|
||||
|
||||
// Correct coordinates based on new zoom level
|
||||
if (zoom != null && zoom !== this._zoomLevel) {
|
||||
if (!this.options.zooming) {
|
||||
warn('Zooming is not enabled!')
|
||||
}
|
||||
zoom = zoom ? zoom : 1
|
||||
left *= zoom
|
||||
top *= zoom
|
||||
|
||||
// // Recompute maximum values while temporary tweaking maximum scroll ranges
|
||||
this._computeScrollMax(zoom)
|
||||
} else {
|
||||
// Keep zoom when not defined
|
||||
zoom = this._zoomLevel
|
||||
}
|
||||
|
||||
if (!this.options.scrollingX) {
|
||||
left = this._scrollLeft
|
||||
} else {
|
||||
if (this.options.paging) {
|
||||
left = Math.round(left / this._clientWidth) * this._clientWidth
|
||||
} else if (this.options.snapping) {
|
||||
left = Math.round(left / this._snapWidth) * this._snapWidth
|
||||
}
|
||||
}
|
||||
|
||||
if (!this.options.scrollingY) {
|
||||
top = this._scrollTop
|
||||
} else {
|
||||
if (this.options.paging) {
|
||||
top = Math.round(top / this._clientHeight) * this._clientHeight
|
||||
} else if (this.options.snapping) {
|
||||
top = Math.round(top / this._snapHeight) * this._snapHeight
|
||||
}
|
||||
}
|
||||
|
||||
// Limit for allowed ranges
|
||||
left = Math.max(Math.min(this._maxScrollLeft, left), 0)
|
||||
top = Math.max(Math.min(this._maxScrollTop, top), 0)
|
||||
|
||||
// Don't animate when no change detected, still call publish to make sure
|
||||
// that rendered position is really in-sync with internal data
|
||||
if (left === this._scrollLeft && top === this._scrollTop) {
|
||||
animate = false
|
||||
}
|
||||
|
||||
// Publish new values
|
||||
if (!this._isTracking) {
|
||||
this._publish(left, top, zoom, animate)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Zooms to the given level. Supports optional animation. Zooms
|
||||
* the center when no coordinates are given.
|
||||
*
|
||||
* @param level {Number} Level to zoom to
|
||||
* @param animate {Boolean ? false} Whether to use animation
|
||||
* @param originLeft {Number ? null} Zoom in at given left coordinate
|
||||
* @param originTop {Number ? null} Zoom in at given top coordinate
|
||||
* @param callback {Function ? null} A callback that gets fired when the zoom is complete.
|
||||
*/
|
||||
zoomTo(level, animate, originLeft, originTop, callback) {
|
||||
if (!this.options.zooming) {
|
||||
warn('Zooming is not enabled!')
|
||||
}
|
||||
|
||||
// Add callback if exists
|
||||
if (callback) {
|
||||
this._zoomComplete = callback
|
||||
}
|
||||
|
||||
// Stop deceleration
|
||||
if (this._isDecelerating) {
|
||||
Animate.stop(this._isDecelerating)
|
||||
this._isDecelerating = false
|
||||
}
|
||||
|
||||
const oldLevel = this._zoomLevel
|
||||
|
||||
// Normalize input origin to center of viewport if not defined
|
||||
if (originLeft == null) {
|
||||
originLeft = this._clientWidth / 2
|
||||
}
|
||||
|
||||
if (originTop == null) {
|
||||
originTop = this._clientHeight / 2
|
||||
}
|
||||
|
||||
// Limit level according to configuration
|
||||
level = Math.max(Math.min(level, this.options.maxZoom), this.options.minZoom)
|
||||
|
||||
// Recompute maximum values while temporary tweaking maximum scroll ranges
|
||||
this._computeScrollMax(level)
|
||||
|
||||
// Recompute left and top coordinates based on new zoom level
|
||||
let left = (originLeft + this._scrollLeft) * level / oldLevel - originLeft
|
||||
let top = (originTop + this._scrollTop) * level / oldLevel - originTop
|
||||
|
||||
// Limit x-axis
|
||||
if (left > this._maxScrollLeft) {
|
||||
left = this._maxScrollLeft
|
||||
} else if (left < 0) {
|
||||
left = 0
|
||||
}
|
||||
|
||||
// Limit y-axis
|
||||
if (top > this._maxScrollTop) {
|
||||
top = this._maxScrollTop
|
||||
} else if (top < 0) {
|
||||
top = 0
|
||||
}
|
||||
|
||||
// Push values out
|
||||
this._publish(left, top, level, animate)
|
||||
}
|
||||
|
||||
doTouchStart(touches, timeStamp) {
|
||||
// Array-like check is enough here
|
||||
if (touches.length == null) {
|
||||
warn(`Invalid touch list: ${touches}`)
|
||||
}
|
||||
if (timeStamp instanceof Date) {
|
||||
timeStamp = timeStamp.valueOf()
|
||||
}
|
||||
if (typeof timeStamp !== 'number') {
|
||||
warn(`Invalid timestamp value: ${timeStamp}`)
|
||||
}
|
||||
|
||||
// Reset interruptedAnimation flag
|
||||
this._interruptedAnimation = true
|
||||
|
||||
// Stop deceleration
|
||||
if (this._isDecelerating) {
|
||||
Animate.stop(this._isDecelerating)
|
||||
this._isDecelerating = false
|
||||
this._interruptedAnimation = true
|
||||
}
|
||||
|
||||
// Stop animation
|
||||
if (this._isAnimating) {
|
||||
Animate.stop(this._isAnimating)
|
||||
this._isAnimating = false
|
||||
this._interruptedAnimation = true
|
||||
}
|
||||
|
||||
// Use center point when dealing with two fingers
|
||||
const isSingleTouch = touches.length === 1
|
||||
let currentTouchLeft, currentTouchTop
|
||||
|
||||
if (isSingleTouch) {
|
||||
currentTouchLeft = touches[0].pageX
|
||||
currentTouchTop = touches[0].pageY
|
||||
} else {
|
||||
currentTouchLeft = Math.abs(touches[0].pageX + touches[1].pageX) / 2
|
||||
currentTouchTop = Math.abs(touches[0].pageY + touches[1].pageY) / 2
|
||||
}
|
||||
|
||||
// Store initial positions
|
||||
this._initialTouchLeft = currentTouchLeft
|
||||
this._initialTouchTop = currentTouchTop
|
||||
|
||||
// Store current zoom level
|
||||
this._zoomLevelStart = this._zoomLevel
|
||||
|
||||
// Store initial touch positions
|
||||
this._lastTouchLeft = currentTouchLeft
|
||||
this._lastTouchTop = currentTouchTop
|
||||
|
||||
// Store initial move time stamp
|
||||
this._lastTouchMove = timeStamp
|
||||
|
||||
// Reset initial scale
|
||||
this._lastScale = 1
|
||||
|
||||
// Reset locking flags
|
||||
this._enableScrollX = !isSingleTouch && this.options.scrollingX
|
||||
this._enableScrollY = !isSingleTouch && this.options.scrollingY
|
||||
|
||||
// Reset tracking flag
|
||||
this._isTracking = true
|
||||
|
||||
// Reset deceleration complete flag
|
||||
this._didDecelerationComplete = false
|
||||
|
||||
// Dragging starts directly with two fingers, otherwise lazy with an offset
|
||||
this._isDragging = !isSingleTouch
|
||||
|
||||
// Some features are disabled in multi touch scenarios
|
||||
this._isSingleTouch = isSingleTouch
|
||||
|
||||
// Clearing data structure
|
||||
this._positions = []
|
||||
}
|
||||
|
||||
doTouchMove(touches, timeStamp, scale) {
|
||||
// Array-like check is enough here
|
||||
if (touches.length == null) {
|
||||
warn(`Invalid touch list: ${touches}`)
|
||||
}
|
||||
|
||||
if (timeStamp instanceof Date) {
|
||||
timeStamp = timeStamp.valueOf()
|
||||
}
|
||||
|
||||
if (typeof timeStamp !== 'number') {
|
||||
warn(`Invalid timestamp value: ${timeStamp}`)
|
||||
}
|
||||
|
||||
// Ignore event when tracking is not enabled (event might be outside of element)
|
||||
if (!this._isTracking) {
|
||||
return
|
||||
}
|
||||
|
||||
let currentTouchLeft, currentTouchTop
|
||||
|
||||
// Compute move based around of center of fingers
|
||||
if (touches.length === 2) {
|
||||
currentTouchLeft = Math.abs(touches[0].pageX + touches[1].pageX) / 2
|
||||
currentTouchTop = Math.abs(touches[0].pageY + touches[1].pageY) / 2
|
||||
} else {
|
||||
currentTouchLeft = touches[0].pageX
|
||||
currentTouchTop = touches[0].pageY
|
||||
}
|
||||
|
||||
const positions = this._positions
|
||||
|
||||
// Are we already is dragging mode?
|
||||
if (this._isDragging) {
|
||||
// Compute move distance
|
||||
const moveX = currentTouchLeft - this._lastTouchLeft
|
||||
const moveY = currentTouchTop - this._lastTouchTop
|
||||
|
||||
// Read previous scroll position and zooming
|
||||
let scrollLeft = this._scrollLeft
|
||||
let scrollTop = this._scrollTop
|
||||
let level = this._zoomLevel
|
||||
|
||||
// Work with scaling
|
||||
if (scale != null && this.options.zooming) {
|
||||
const oldLevel = level
|
||||
|
||||
// Recompute level based on previous scale and new scale
|
||||
level = level / this.__lastScale * scale
|
||||
|
||||
// Limit level according to configuration
|
||||
level = Math.max(Math.min(level, this.options.maxZoom), this.options.minZoom)
|
||||
|
||||
// Only do further compution when change happened
|
||||
if (oldLevel !== level) {
|
||||
// Compute relative event position to container
|
||||
var currentTouchLeftRel = currentTouchLeft - this._clientLeft
|
||||
var currentTouchTopRel = currentTouchTop - this._clientTop
|
||||
|
||||
// Recompute left and top coordinates based on new zoom level
|
||||
scrollLeft = (currentTouchLeftRel + scrollLeft) * level / oldLevel - currentTouchLeftRel
|
||||
scrollTop = (currentTouchTopRel + scrollTop) * level / oldLevel - currentTouchTopRel
|
||||
|
||||
// Recompute max scroll values
|
||||
this.__computeScrollMax(level)
|
||||
}
|
||||
}
|
||||
|
||||
if (this._enableScrollX) {
|
||||
scrollLeft -= moveX * this.options.speedMultiplier
|
||||
const maxScrollLeft = this._maxScrollLeft
|
||||
|
||||
if (scrollLeft > maxScrollLeft || scrollLeft < 0) {
|
||||
// Slow down on the edges
|
||||
if (this.options.bouncing) {
|
||||
scrollLeft += moveX / 2 * this.options.speedMultiplier
|
||||
} else if (scrollLeft > maxScrollLeft) {
|
||||
scrollLeft = maxScrollLeft
|
||||
} else {
|
||||
scrollLeft = 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Compute new vertical scroll position
|
||||
if (this._enableScrollY) {
|
||||
scrollTop -= moveY * this.options.speedMultiplier
|
||||
const maxScrollTop = this._maxScrollTop
|
||||
if (scrollTop > maxScrollTop || scrollTop < 0) {
|
||||
// Slow down on the edges
|
||||
if (this.options.bouncing) {
|
||||
scrollTop += moveY / 2 * this.options.speedMultiplier
|
||||
} else if (scrollTop > maxScrollTop) {
|
||||
scrollTop = maxScrollTop
|
||||
} else {
|
||||
scrollTop = 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Keep list from growing infinitely (holding min 10, max 20 measure points)
|
||||
if (positions.length > 60) {
|
||||
positions.splice(0, 30)
|
||||
}
|
||||
|
||||
// Track scroll movement for decleration
|
||||
positions.push(scrollLeft, scrollTop, timeStamp)
|
||||
|
||||
// Sync scroll position
|
||||
this._publish(scrollLeft, scrollTop)
|
||||
|
||||
// Otherwise figure out whether we are switching into dragging mode now.
|
||||
} else {
|
||||
const minimumTrackingForScroll = this.options.locking ? 3 : 0
|
||||
const minimumTrackingForDrag = 5
|
||||
|
||||
const distanceX = Math.abs(currentTouchLeft - this._initialTouchLeft)
|
||||
const distanceY = Math.abs(currentTouchTop - this._initialTouchTop)
|
||||
|
||||
this._enableScrollX = this.options.scrollingX && distanceX >= minimumTrackingForScroll
|
||||
this._enableScrollY = this.options.scrollingY && distanceY >= minimumTrackingForScroll
|
||||
|
||||
positions.push(this._scrollLeft, this._scrollTop, timeStamp)
|
||||
|
||||
this._isDragging =
|
||||
(this._enableScrollX || this._enableScrollY) &&
|
||||
(distanceX >= minimumTrackingForDrag || distanceY >= minimumTrackingForDrag)
|
||||
if (this._isDragging) {
|
||||
this._interruptedAnimation = false
|
||||
}
|
||||
}
|
||||
|
||||
// Update last touch positions and time stamp for next event
|
||||
this._lastTouchLeft = currentTouchLeft
|
||||
this._lastTouchTop = currentTouchTop
|
||||
this._lastTouchMove = timeStamp
|
||||
}
|
||||
|
||||
doTouchEnd(timeStamp) {
|
||||
if (timeStamp instanceof Date) {
|
||||
timeStamp = timeStamp.valueOf()
|
||||
}
|
||||
|
||||
if (typeof timeStamp !== 'number') {
|
||||
warn(`Invalid timestamp value: ${timeStamp}`)
|
||||
}
|
||||
// Ignore event when tracking is not enabled (no touchstart event on element)
|
||||
// This is required as this listener ('touchmove') sits on the document and not on the element itthis.
|
||||
if (!this._isTracking) {
|
||||
return
|
||||
}
|
||||
|
||||
// Not touching anymore (when two finger hit the screen there are two touch end events)
|
||||
this._isTracking = false
|
||||
|
||||
// Be sure to reset the dragging flag now. Here we also detect whether
|
||||
// the finger has moved fast enough to switch into a deceleration animation.
|
||||
if (this._isDragging) {
|
||||
// Reset dragging flag
|
||||
this._isDragging = false
|
||||
|
||||
// Start deceleration
|
||||
// Verify that the last move detected was in some relevant time frame
|
||||
if (this._isSingleTouch && this.options.animating && timeStamp - this._lastTouchMove <= 100) {
|
||||
// Then figure out what the scroll position was about 100ms ago
|
||||
const positions = this._positions
|
||||
const endPos = positions.length - 1
|
||||
let startPos = endPos
|
||||
|
||||
// Move pointer to position measured 100ms ago
|
||||
for (let i = endPos; i > 0 && positions[i] > this._lastTouchMove - 100; i -= 3) {
|
||||
startPos = i
|
||||
}
|
||||
|
||||
// If start and stop position is identical in a 100ms timeframe,
|
||||
// we cannot compute any useful deceleration.
|
||||
if (startPos !== endPos) {
|
||||
// Compute relative movement between these two points
|
||||
const timeOffset = positions[endPos] - positions[startPos]
|
||||
const movedLeft = this._scrollLeft - positions[startPos - 2]
|
||||
const movedTop = this._scrollTop - positions[startPos - 1]
|
||||
|
||||
// Based on 50ms compute the movement to apply for each render step
|
||||
this._decelerationVelocityX = movedLeft / timeOffset * (1000 / 60)
|
||||
this._decelerationVelocityY = movedTop / timeOffset * (1000 / 60)
|
||||
|
||||
// How much velocity is required to start the deceleration
|
||||
const minVelocityToStartDeceleration = this.options.paging || this.options.snapping ? 4 : 1
|
||||
|
||||
// Verify that we have enough velocity to start deceleration
|
||||
if (
|
||||
Math.abs(this._decelerationVelocityX) > minVelocityToStartDeceleration ||
|
||||
Math.abs(this._decelerationVelocityY) > minVelocityToStartDeceleration
|
||||
) {
|
||||
// Deactivate pull-to-refresh when decelerating
|
||||
if (!this._refreshActive) {
|
||||
this._startDeceleration(timeStamp)
|
||||
}
|
||||
} else {
|
||||
this.options.scrollingComplete()
|
||||
}
|
||||
} else {
|
||||
this.options.scrollingComplete()
|
||||
}
|
||||
} else if (timeStamp - this._lastTouchMove > 100) {
|
||||
!this.options.snapping && this.options.scrollingComplete()
|
||||
}
|
||||
}
|
||||
|
||||
// If this was a slower move it is per default non decelerated, but this
|
||||
// still means that we want snap back to the bounds which is done here.
|
||||
// This is placed outside the condition above to improve edge case stability
|
||||
// e.g. touchend fired without enabled dragging. This should normally do not
|
||||
// have modified the scroll positions or even showed the scrollbars though.
|
||||
if (!this._isDecelerating) {
|
||||
if (this._refreshActive && this._refreshStart) {
|
||||
// Use publish instead of scrollTo to allow scrolling to out of boundary position
|
||||
// We don't need to normalize scrollLeft, zoomLevel, etc. here because we only y-scrolling when pull-to-refresh is enabled
|
||||
this._publish(this._scrollLeft, -this._refreshHeight, this._zoomLevel, true)
|
||||
|
||||
if (this._refreshStart) {
|
||||
this._refreshStart()
|
||||
}
|
||||
} else {
|
||||
if (this._interruptedAnimation || this._isDragging) {
|
||||
this.options.scrollingComplete()
|
||||
}
|
||||
|
||||
this.scrollTo(this._scrollLeft, this._scrollTop, true, this._zoomLevel)
|
||||
// Directly signalize deactivation (nothing todo on refresh?)
|
||||
if (this._refreshActive) {
|
||||
this._refreshActive = false
|
||||
if (this._refreshDeactivate) {
|
||||
this._refreshDeactivate()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fully cleanup list
|
||||
this._positions.length = 0
|
||||
}
|
||||
|
||||
_publish(left, top, zoom = 1, animate = false) {
|
||||
// Remember whether we had an animation, then we try to continue based on the current "drive" of the animation
|
||||
const wasAnimating = this._isAnimating
|
||||
|
||||
if (wasAnimating) {
|
||||
Animate.stop(wasAnimating)
|
||||
this._isAnimating = false
|
||||
}
|
||||
|
||||
if (animate && this.options.animating) {
|
||||
// Keep scheduled positions for scrollBy/zoomBy functionality
|
||||
this._scheduledLeft = left
|
||||
this._scheduledTop = top
|
||||
this._scheduledZoom = zoom
|
||||
|
||||
const oldLeft = this._scrollLeft
|
||||
const oldTop = this._scrollTop
|
||||
const oldZoom = this._zoomLevel
|
||||
|
||||
const diffLeft = left - oldLeft
|
||||
const diffTop = top - oldTop
|
||||
const diffZoom = zoom - oldZoom
|
||||
|
||||
const step = (percent, now, render) => {
|
||||
if (render) {
|
||||
this._scrollLeft = oldLeft + diffLeft * percent
|
||||
this._scrollTop = oldTop + diffTop * percent
|
||||
this._zoomLevel = oldZoom + diffZoom * percent
|
||||
// Push values out
|
||||
if (this._callback) {
|
||||
this._callback(this._scrollLeft, this._scrollTop, this._zoomLevel)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const verify = id => {
|
||||
return this._isAnimating === id
|
||||
}
|
||||
|
||||
const completed = (renderedFramesPerSecond, animationId, wasFinished) => {
|
||||
if (animationId === this._isAnimating) {
|
||||
this._isAnimating = false
|
||||
}
|
||||
|
||||
if (this._didDecelerationComplete || wasFinished) {
|
||||
this.options.scrollingComplete()
|
||||
}
|
||||
|
||||
if (this.options.zooming) {
|
||||
this._computeScrollMax()
|
||||
if (this._zoomComplete) {
|
||||
this._zoomComplete()
|
||||
this._zoomComplete = null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// When continuing based on previous animation we choose an ease-out animation instead of ease-in-out
|
||||
this._isAnimating = Animate.start(
|
||||
step,
|
||||
verify,
|
||||
completed,
|
||||
this.options.animationDuration,
|
||||
wasAnimating ? easeOutCubic : easeInOutCubic,
|
||||
)
|
||||
} else {
|
||||
this._scheduledLeft = this._scrollLeft = left
|
||||
this._scheduledTop = this._scrollTop = top
|
||||
this._scheduledZoom = this._zoomLevel = zoom
|
||||
|
||||
// Push values out
|
||||
if (this._callback) {
|
||||
this._callback(left, top)
|
||||
}
|
||||
|
||||
// Fix max scroll ranges
|
||||
if (this.options.zooming) {
|
||||
this._computeScrollMax()
|
||||
if (this._zoomComplete) {
|
||||
this._zoomComplete()
|
||||
this._zoomComplete = null
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_computeScrollMax(zoomLevel) {
|
||||
if (zoomLevel == null) {
|
||||
zoomLevel = this._zoomLevel
|
||||
}
|
||||
|
||||
this._maxScrollLeft = Math.max(this._contentWidth * zoomLevel - this._clientWidth, 0)
|
||||
this._maxScrollTop = Math.max(this._contentHeight * zoomLevel - this._clientHeight, 0)
|
||||
}
|
||||
|
||||
_startDeceleration(timeStamp) {
|
||||
if (this.options.paging) {
|
||||
const scrollLeft = Math.max(Math.min(this._scrollLeft, this._maxScrollLeft), 0)
|
||||
const scrollTop = Math.max(Math.min(this._scrollTop, this._maxScrollTop), 0)
|
||||
const clientWidth = this._clientWidth
|
||||
const clientHeight = this._clientHeight
|
||||
|
||||
// We limit deceleration not to the min/max values of the allowed range, but to the size of the visible client area.
|
||||
// Each page should have exactly the size of the client area.
|
||||
this._minDecelerationScrollLeft = Math.floor(scrollLeft / clientWidth) * clientWidth
|
||||
this._minDecelerationScrollTop = Math.floor(scrollTop / clientHeight) * clientHeight
|
||||
this._maxDecelerationScrollLeft = Math.ceil(scrollLeft / clientWidth) * clientWidth
|
||||
this._maxDecelerationScrollTop = Math.ceil(scrollTop / clientHeight) * clientHeight
|
||||
} else {
|
||||
this._minDecelerationScrollLeft = 0
|
||||
this._minDecelerationScrollTop = 0
|
||||
this._maxDecelerationScrollLeft = this._maxScrollLeft
|
||||
this._maxDecelerationScrollTop = this._maxScrollTop
|
||||
}
|
||||
|
||||
// Wrap class method
|
||||
const step = (percent, now, render) => {
|
||||
this._stepThroughDeceleration(render)
|
||||
}
|
||||
|
||||
// How much velocity is required to keep the deceleration running
|
||||
const minVelocityToKeepDecelerating = this.options.snapping ? 4 : 0.001
|
||||
|
||||
// Detect whether it's still worth to continue animating steps
|
||||
// If we are already slow enough to not being user perceivable anymore, we stop the whole process here.
|
||||
const verify = () => {
|
||||
const shouldContinue =
|
||||
Math.abs(this._decelerationVelocityX) >= minVelocityToKeepDecelerating ||
|
||||
Math.abs(this._decelerationVelocityY) >= minVelocityToKeepDecelerating
|
||||
if (!shouldContinue) {
|
||||
this._didDecelerationComplete = true
|
||||
}
|
||||
return shouldContinue
|
||||
}
|
||||
|
||||
const completed = (renderedFramesPerSecond, animationId, wasFinished) => {
|
||||
this._isDecelerating = false
|
||||
// if (this._didDecelerationComplete) {
|
||||
// this.options.scrollingComplete()
|
||||
// }
|
||||
|
||||
// Animate to grid when snapping is active, otherwise just fix out-of-boundary positions
|
||||
this.scrollTo(this._scrollLeft, this._scrollTop, this.options.snapping)
|
||||
}
|
||||
|
||||
// Start animation and switch on flag
|
||||
this._isDecelerating = Animate.start(step, verify, completed)
|
||||
}
|
||||
|
||||
_stepThroughDeceleration(render) {
|
||||
//
|
||||
// COMPUTE NEXT SCROLL POSITION
|
||||
//
|
||||
|
||||
// Add deceleration to scroll position
|
||||
let scrollLeft = this._scrollLeft + this._decelerationVelocityX
|
||||
let scrollTop = this._scrollTop + this._decelerationVelocityY
|
||||
|
||||
//
|
||||
// HARD LIMIT SCROLL POSITION FOR NON BOUNCING MODE
|
||||
//
|
||||
|
||||
if (!this.options.bouncing) {
|
||||
var scrollLeftFixed = Math.max(
|
||||
Math.min(this._maxDecelerationScrollLeft, scrollLeft),
|
||||
this._minDecelerationScrollLeft,
|
||||
)
|
||||
if (scrollLeftFixed !== scrollLeft) {
|
||||
scrollLeft = scrollLeftFixed
|
||||
this._decelerationVelocityX = 0
|
||||
}
|
||||
var scrollTopFixed = Math.max(Math.min(this._maxDecelerationScrollTop, scrollTop), this._minDecelerationScrollTop)
|
||||
if (scrollTopFixed !== scrollTop) {
|
||||
scrollTop = scrollTopFixed
|
||||
this._decelerationVelocityY = 0
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// UPDATE SCROLL POSITION
|
||||
//
|
||||
|
||||
if (render) {
|
||||
this._publish(scrollLeft, scrollTop, this._zoomLevel)
|
||||
} else {
|
||||
this._scrollLeft = scrollLeft
|
||||
this._scrollTop = scrollTop
|
||||
}
|
||||
|
||||
//
|
||||
// SLOW DOWN
|
||||
//
|
||||
|
||||
// Slow down velocity on every iteration
|
||||
if (!this.options.paging) {
|
||||
// This is the factor applied to every iteration of the animation
|
||||
// to slow down the process. This should emulate natural behavior where
|
||||
// objects slow down when the initiator of the movement is removed
|
||||
var frictionFactor = 0.95
|
||||
this._decelerationVelocityX *= frictionFactor
|
||||
this._decelerationVelocityY *= frictionFactor
|
||||
}
|
||||
|
||||
//
|
||||
// BOUNCING SUPPORT
|
||||
//
|
||||
|
||||
if (this.options.bouncing) {
|
||||
var scrollOutsideX = 0
|
||||
var scrollOutsideY = 0
|
||||
|
||||
// This configures the amount of change applied to deceleration/acceleration when reaching boundaries
|
||||
var penetrationDeceleration = this.options.penetrationDeceleration
|
||||
var penetrationAcceleration = this.options.penetrationAcceleration
|
||||
|
||||
// Check limits
|
||||
if (scrollLeft < this._minDecelerationScrollLeft) {
|
||||
scrollOutsideX = this._minDecelerationScrollLeft - scrollLeft
|
||||
} else if (scrollLeft > this._maxDecelerationScrollLeft) {
|
||||
scrollOutsideX = this._maxDecelerationScrollLeft - scrollLeft
|
||||
}
|
||||
|
||||
if (scrollTop < this._minDecelerationScrollTop) {
|
||||
scrollOutsideY = this._minDecelerationScrollTop - scrollTop
|
||||
} else if (scrollTop > this._maxDecelerationScrollTop) {
|
||||
scrollOutsideY = this._maxDecelerationScrollTop - scrollTop
|
||||
}
|
||||
|
||||
// Slow down until slow enough, then flip back to snap position
|
||||
if (scrollOutsideX !== 0) {
|
||||
if (scrollOutsideX * this._decelerationVelocityX <= 0) {
|
||||
this._decelerationVelocityX += scrollOutsideX * penetrationDeceleration
|
||||
} else {
|
||||
this._decelerationVelocityX = scrollOutsideX * penetrationAcceleration
|
||||
}
|
||||
}
|
||||
|
||||
if (scrollOutsideY !== 0) {
|
||||
if (scrollOutsideY * this._decelerationVelocityY <= 0) {
|
||||
this._decelerationVelocityY += scrollOutsideY * penetrationDeceleration
|
||||
} else {
|
||||
this._decelerationVelocityY = scrollOutsideY * penetrationAcceleration
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
extend(Scroller.prototype, members)
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
import {noop} from './lang'
|
||||
/**
|
||||
* Mix properties into target object.
|
||||
*/
|
||||
export function extend(to, _from) {
|
||||
for (const key in _from) {
|
||||
to[key] = _from[key]
|
||||
}
|
||||
return to
|
||||
}
|
||||
|
||||
/**
|
||||
* Multiple Array traversal
|
||||
* @return 1 continue
|
||||
* @return 2 break
|
||||
*/
|
||||
export function traverse(data, childrenKeys = [], fn = noop) {
|
||||
if (!data) {
|
||||
return
|
||||
}
|
||||
if (typeof childrenKeys === 'function') {
|
||||
fn = childrenKeys
|
||||
childrenKeys = []
|
||||
}
|
||||
let level = 0 // current level
|
||||
let indexs = [] // index set of all levels
|
||||
const walk = curData => {
|
||||
for (let i = 0, len = curData.length; i < len; i++) {
|
||||
const isArray = Array.isArray(curData[i])
|
||||
const key = Array.isArray(childrenKeys) ? childrenKeys[level] : childrenKeys
|
||||
if (isArray || (curData[i] && curData[i][key])) {
|
||||
level++
|
||||
indexs.push(i)
|
||||
walk(isArray ? curData[i] : curData[i][key])
|
||||
} else if (level >= childrenKeys.length) {
|
||||
const res = fn(curData[i], level, [...indexs, i])
|
||||
if (res === 1) {
|
||||
continue
|
||||
} else if (res === 2) {
|
||||
break
|
||||
}
|
||||
} else {
|
||||
continue
|
||||
}
|
||||
}
|
||||
level = 0
|
||||
indexs = []
|
||||
}
|
||||
walk(data)
|
||||
}
|
||||
/**
|
||||
* Merge an Array of Objects into a single Object.
|
||||
*/
|
||||
export function toObject(arr) {
|
||||
const res = {}
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
if (arr[i]) {
|
||||
extend(res, arr[i])
|
||||
}
|
||||
}
|
||||
return res
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert an Array-like object to a real Array.
|
||||
*/
|
||||
export function toArray(list, start) {
|
||||
start = start || 0
|
||||
let i = list.length - start
|
||||
const ret = []
|
||||
while (i--) {
|
||||
ret.unshift(list[i + start])
|
||||
}
|
||||
return ret
|
||||
}
|
||||
|
||||
/**
|
||||
* whether item is in list or list equal item
|
||||
*/
|
||||
export function inArray(list, item) {
|
||||
return Array.isArray(list) ? !!~list.indexOf(item) : item === list
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert a input value to a number for persistence.
|
||||
* If the conversion fails, return original string.
|
||||
*/
|
||||
export function toNumber(val) {
|
||||
const n = parseFloat(val)
|
||||
return isNaN(n) ? val : n
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert a value to a string
|
||||
*/
|
||||
export function toString(val) {
|
||||
return val == null ? '' : typeof val === 'object' ? JSON.stringify(val, null, 2) : String(val)
|
||||
}
|
||||
|
||||
/**
|
||||
* Determine whether the two objects are equal or not shallowly
|
||||
*/
|
||||
|
||||
export function compareObjects(object0, object1) {
|
||||
let ret = true
|
||||
|
||||
if (!object0 || !object1) {
|
||||
ret = false
|
||||
} else if (typeof object0 !== 'object' || typeof object1 !== 'object') {
|
||||
ret = false
|
||||
} else if (JSON.stringify(object0) !== JSON.stringify(object1)) {
|
||||
ret = false
|
||||
}
|
||||
|
||||
return ret
|
||||
}
|
||||
|
||||
/**
|
||||
* Check object is empty
|
||||
*/
|
||||
export function isEmptyObject(obj) {
|
||||
for (const key in obj) {
|
||||
if (obj.hasOwnProperty(key)) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
---
|
||||
title: ActionBar 操作栏
|
||||
preview: https://didi.github.io/mand-mobile/examples/action-bar
|
||||
---
|
||||
|
||||
汇集若干文案或操作按钮的吸底边栏，可用于展示表单信息与提交按钮
|
||||
|
||||
### 引入
|
||||
|
||||
```javascript
|
||||
import { ActionBar } from 'mand-mobile'
|
||||
|
||||
Vue.component(ActionBar.name, ActionBar)
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
<!-- DEMO -->
|
||||
|
||||
|
||||
### API
|
||||
|
||||
#### ActionBar Props
|
||||
|属性 | 说明 | 类型 | 默认值 | 备注|
|
||||
|----|-----|------|------|------|
|
||||
|actions|按钮组|Array<{text, disabled, onClick}>|-|`text`为按钮文案，<br/>`disabled`为是否禁用改按钮，<br/>`onClick`为点击事件响应函数，传参数与`click`事件相同|
|
||||
|has-text|是否显示文案|Boolean|是否含有`slot`|文案可通过`slot`传入|
|
||||
|
||||
|
||||
#### ActionBar Events
|
||||
|
||||
##### @click(event, action)
|
||||
按钮点击事件
|
||||
|
||||
|属性 | 说明 | 类型 |
|
||||
|----|-----|------|
|
||||
|action|actions列表中与被点击按钮对应的对象|Object: {text, disabled, ...}|
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
export default {
|
||||
'name': 'action-bar',
|
||||
'text': '操作栏',
|
||||
'category': 'basic',
|
||||
'description': '',
|
||||
'author': 'xuxiaoyan'
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<template>
|
||||
<div class="md-example-child md-example-child-action-bar md-example-child-0">
|
||||
<md-action-bar :actions="data"></md-action-bar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
import {ActionBar, Toast} from 'mand-mobile'
|
||||
|
||||
export default {
|
||||
title: '通栏多按钮',
|
||||
name: 'action-bar-demo',
|
||||
height: 150,
|
||||
components: {
|
||||
[ActionBar.name]: ActionBar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: [
|
||||
{
|
||||
text: '操作一',
|
||||
onClick: this.handleClick,
|
||||
},
|
||||
{
|
||||
text: '操作二',
|
||||
onClick: this.handleClick,
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick() {
|
||||
Toast.succeed('Click')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<template>
|
||||
<div class="md-example-child md-example-child-action-bar md-example-child-1">
|
||||
<md-action-bar :actions="data"></md-action-bar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
import {ActionBar, Toast} from 'mand-mobile'
|
||||
|
||||
export default {
|
||||
title: '通栏多按钮禁用',
|
||||
name: 'action-bar-demo',
|
||||
height: 150,
|
||||
components: {
|
||||
[ActionBar.name]: ActionBar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: [
|
||||
{
|
||||
text: '操作一',
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
text: '操作二',
|
||||
onClick: this.handleClick,
|
||||
},
|
||||
{
|
||||
text: '操作三',
|
||||
disabled: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick() {
|
||||
Toast.succeed('Click')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<template>
|
||||
<div class="md-example-child md-example-child-action-bar md-example-child-2">
|
||||
<md-action-bar :actions="data" @click="onBtnClick">
|
||||
¥128.00
|
||||
</md-action-bar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
import {ActionBar, Dialog} from 'mand-mobile'
|
||||
|
||||
export default {
|
||||
title: '通栏带文案',
|
||||
name: 'action-bar-demo',
|
||||
height: 150,
|
||||
components: {
|
||||
[ActionBar.name]: ActionBar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: [
|
||||
{
|
||||
text: '操作',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onBtnClick(event, action) {
|
||||
Dialog.alert({
|
||||
content: `${action.text}完成`,
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<template>
|
||||
<div class="md-example action-bar">
|
||||
<section class="md-example-section" v-for="(demo, index) in demos" :key="index">
|
||||
<div class="md-example-title" v-html="demo.title"></div>
|
||||
<div class="md-example-content">
|
||||
<component :is="demo"></component>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
import createDemoModule from '../../../examples/create-demo-module'
|
||||
import Demo0 from './cases/demo0'
|
||||
import Demo1 from './cases/demo1'
|
||||
import Demo2 from './cases/demo2'
|
||||
|
||||
export default {
|
||||
...createDemoModule('action-bar', [Demo0, Demo1, Demo2]),
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
.md-example.action-bar
|
||||
.md-example-section
|
||||
.md-action-bar
|
||||
position relative !important
|
||||
</style>
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
<template>
|
||||
<div
|
||||
class="md-action-bar"
|
||||
:class="{'with-text': hasText, 'multi-action': !!this.actions.length }">
|
||||
<div class="md-action-bar-text" v-if="hasText">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div class="md-action-bar-button">
|
||||
<template v-for="(item, index) in actions">
|
||||
<div
|
||||
class="button-item"
|
||||
:key="index"
|
||||
:class="{disabled: !!item.disabled}"
|
||||
@click="$_onBtnClick($event, item)"
|
||||
v-html="item.text"
|
||||
></div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
import {isEmptyObject} from '../_util'
|
||||
|
||||
export default {
|
||||
name: 'md-action-bar',
|
||||
|
||||
props: {
|
||||
actions: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
hasText: {
|
||||
type: Boolean,
|
||||
default() {
|
||||
return !isEmptyObject(this.$slots)
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
// MARK: events handler
|
||||
$_onBtnClick(event, action) {
|
||||
if (action.disabled) {
|
||||
return
|
||||
}
|
||||
action.onClick && action.onClick(event, action)
|
||||
this.$emit('click', event, action)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
.md-action-bar
|
||||
position fixed
|
||||
z-index action-bar-zindex
|
||||
left 0
|
||||
bottom 0
|
||||
width action-bar-width
|
||||
height action-bar-height
|
||||
padding-bottom constant(safe-area-inset-bottom)
|
||||
background color-bg-base
|
||||
clearfix()
|
||||
.md-action-bar-text
|
||||
float left
|
||||
display flex
|
||||
height 100%
|
||||
width 65%
|
||||
padding-left h-gap-lg
|
||||
align-items center
|
||||
overflow hidden
|
||||
color action-bar-text-color
|
||||
font-size action-bar-text-font-size
|
||||
box-sizing border-box
|
||||
.md-action-bar-button
|
||||
display flex
|
||||
height 100%
|
||||
.button-item
|
||||
display flex
|
||||
float right
|
||||
align-items center
|
||||
justify-content center
|
||||
flex 1
|
||||
color action-bar-button-color
|
||||
font-size action-bar-button-font-size
|
||||
font-weight font-weight-medium
|
||||
background action-bar-button-fill
|
||||
hairline(right, color-border-base)
|
||||
-webkit-user-select none
|
||||
-webkit-tap-highlight-color transparent
|
||||
&.disabled
|
||||
opacity opacity-disabled
|
||||
&:nth-last-of-type(2)
|
||||
&::before
|
||||
display none
|
||||
&:last-of-type
|
||||
background action-bar-button-fill-hightlight
|
||||
color action-bar-button-color-hightlight
|
||||
&.disabled
|
||||
background color-bg-disabled
|
||||
color color-text-base-inverse
|
||||
&::before
|
||||
display none
|
||||
&::after
|
||||
absolute-pos()
|
||||
display none
|
||||
content ''
|
||||
position absolute
|
||||
box-sizing border-box
|
||||
background-color color-bg-tap
|
||||
&:active::after
|
||||
display block
|
||||
|
||||
&.with-text.multi-action
|
||||
.md-action-bar-text
|
||||
width 40%
|
||||
</style>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
import ActionBar from '../index'
|
||||
import {mount} from 'avoriaz'
|
||||
|
||||
describe('ActionBar', () => {
|
||||
let wrapper
|
||||
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy()
|
||||
})
|
||||
|
||||
it('create a action-bar', () => {
|
||||
wrapper = mount(ActionBar, {
|
||||
propsData: {
|
||||
actions: [
|
||||
{
|
||||
text: '1',
|
||||
},
|
||||
{
|
||||
text: '2',
|
||||
},
|
||||
],
|
||||
},
|
||||
})
|
||||
const buttons = wrapper.find('.button-item')
|
||||
const button = wrapper.find('.button-item')[0]
|
||||
const eventStub = sinon.stub(wrapper.vm, '$emit')
|
||||
button.trigger('click')
|
||||
expect(buttons.length).to.equal(2)
|
||||
expect(eventStub.calledOnce).to.be.true
|
||||
expect(eventStub.calledWith('click')).to.be.true
|
||||
})
|
||||
|
||||
it('create a action-bar with disabled button', () => {
|
||||
wrapper = mount(ActionBar, {
|
||||
propsData: {
|
||||
actions: [
|
||||
{
|
||||
text: '1',
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
text: '2',
|
||||
},
|
||||
],
|
||||
},
|
||||
})
|
||||
const button0 = wrapper.find('.button-item')[0]
|
||||
expect(button0.hasClass('disabled')).to.equal(true)
|
||||
})
|
||||
|
||||
it('create a action-bar with text', () => {
|
||||
wrapper = mount(ActionBar, {
|
||||
propsData: {
|
||||
actions: [
|
||||
{
|
||||
text: '1',
|
||||
},
|
||||
],
|
||||
hasText: true,
|
||||
},
|
||||
})
|
||||
const text = wrapper.find('.md-action-bar-text')
|
||||
expect(text.length > 0).to.equal(true)
|
||||
})
|
||||
})
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
---
|
||||
title: ActionSheet 动作面板
|
||||
preview: https://didi.github.io/mand-mobile/examples/action-sheet
|
||||
---
|
||||
|
||||
用于提供场景相关的多个操作动作
|
||||
|
||||
### 引入
|
||||
|
||||
```javascript
|
||||
import { ActionSheet } from 'mand-mobile'
|
||||
|
||||
Vue.component(ActionSheet.name, ActionSheet)
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
<!-- DEMO -->
|
||||
|
||||
### API
|
||||
|
||||
#### ActionSheet Props
|
||||
|属性 | 说明 | 类型 | 默认值 |
|
||||
|----|-----|------|------|
|
||||
|v-model|面板是否可见|Boolean| `false`|
|
||||
|title|面板标题|String|- |
|
||||
|options|面板选项| Array<{text, value}>| `[]`|
|
||||
|default-index|默认选中项| Boolean| `0`|
|
||||
|invalid-index|禁用选择项索引 |Number|`-1`|
|
||||
|cancel-text|取消按钮文案 |String |-|
|
||||
|
||||
#### ActionSheet Events
|
||||
|
||||
##### @selected(item)
|
||||
选择事件
|
||||
|
||||
|属性 | 说明 | 类型 |
|
||||
|----|-----|------|
|
||||
|item| 选中项的值 | Object: {text, value} |
|
||||
|
||||
##### @cancel()
|
||||
取消选择事件
|
||||
|
||||
##### @show()
|
||||
面板展示事件
|
||||
|
||||
##### @hide()
|
||||
面板隐藏事件
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
export default {
|
||||
'name': 'action-sheet',
|
||||
'text': '底部弹窗',
|
||||
'category': 'feedback',
|
||||
'description': '',
|
||||
'author': 'qiman'
|
||||
}
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<template>
|
||||
<div class="md-example-child md-example-child-action-sheet">
|
||||
<md-button @click.native="$_showActionSheet">唤起动作面板</md-button>
|
||||
<md-action-sheet
|
||||
v-model="value"
|
||||
:title="title"
|
||||
:default-index="defaultIndex"
|
||||
:invalid-index="invalidIndex"
|
||||
:cancel-text="cancelText"
|
||||
:options="options"
|
||||
@selected="$_selected"
|
||||
@cancel="$_cancel"
|
||||
></md-action-sheet>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
import {ActionSheet, Button, Dialog} from 'mand-mobile'
|
||||
|
||||
export default {
|
||||
name: 'action-sheet-demo',
|
||||
height: 500,
|
||||
components: {
|
||||
[ActionSheet.name]: ActionSheet,
|
||||
[Button.name]: Button,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: false,
|
||||
title: '操作说明的title',
|
||||
options: [
|
||||
{
|
||||
label: '选项1',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: '选项2',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '选项3',
|
||||
value: 2,
|
||||
},
|
||||
],
|
||||
defaultIndex: 1,
|
||||
invalidIndex: 2,
|
||||
cancelText: '取消',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
$_showActionSheet() {
|
||||
this.value = true
|
||||
},
|
||||
$_selected(item) {
|
||||
Dialog.alert({
|
||||
content: `selected: ${JSON.stringify(item)}`,
|
||||
})
|
||||
console.log('action-sheet selected:', JSON.stringify(item))
|
||||
},
|
||||
$_cancel() {
|
||||
Dialog.alert({
|
||||
content: 'cancel',
|
||||
})
|
||||
console.log('action-sheet cancel')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<template>
|
||||
<div class="md-example action-sheet">
|
||||
<section class="md-example-section" v-for="(demo, index) in demos" :key="index">
|
||||
<div class="md-example-title" v-html="demo.title"></div>
|
||||
<div class="md-example-content">
|
||||
<component :is="demo"></component>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
import createDemoModule from '../../../examples/create-demo-module'
|
||||
import Demo0 from './cases/demo0'
|
||||
|
||||
export default {
|
||||
...createDemoModule('action-sheet', [Demo0]),
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,146 @@
|
|||
<template>
|
||||
<div class="md-action-sheet">
|
||||
<md-popup
|
||||
v-model="isActionSheetShow"
|
||||
position="bottom"
|
||||
prevent-scroll
|
||||
@show="$_onShow"
|
||||
@hide="$_onHide"
|
||||
>
|
||||
<div class="md-action-sheet-content">
|
||||
<header v-if="title">{{ title }}</header>
|
||||
<ul>
|
||||
<template v-for="(item, index) in options">
|
||||
<li
|
||||
:key="index"
|
||||
:class="{
|
||||
'active': index === clickIndex,
|
||||
'disabled': index=== invalidIndex,
|
||||
'md-action-sheet-item': true
|
||||
}"
|
||||
@click="$_onSelect(item, index)"
|
||||
v-html="item.text || item.label"
|
||||
></li>
|
||||
</template>
|
||||
<li class="cancel-btn" @click="$_onCancel">{{ cancelText }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</md-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
import Popup from '../popup'
|
||||
import {inArray} from '../_util'
|
||||
|
||||
export default {
|
||||
name: 'md-action-sheet',
|
||||
|
||||
components: {
|
||||
[Popup.name]: Popup,
|
||||
},
|
||||
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
options: {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
},
|
||||
},
|
||||
defaultIndex: {
|
||||
type: Number,
|
||||
default: -1,
|
||||
},
|
||||
invalidIndex: {
|
||||
type: Number,
|
||||
default: -1,
|
||||
},
|
||||
cancelText: {
|
||||
type: String,
|
||||
default: '取消',
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
isActionSheetShow: this.value,
|
||||
clickIndex: -1,
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
value(newVal) {
|
||||
this.isActionSheetShow = newVal
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.clickIndex = this.defaultIndex
|
||||
},
|
||||
|
||||
methods: {
|
||||
// MARK: events handler, 如 $_onButtonClick
|
||||
$_onShow() {
|
||||
this.$emit('show')
|
||||
},
|
||||
$_onHide() {
|
||||
this.$emit('hide')
|
||||
this.$emit('input', false)
|
||||
},
|
||||
$_onSelect(item, index) {
|
||||
if (index === this.invalidIndex || inArray(this.invalidIndex, index)) {
|
||||
return
|
||||
}
|
||||
this.clickIndex = index
|
||||
this.$emit('selected', item)
|
||||
this.$emit('input', false)
|
||||
},
|
||||
$_onCancel() {
|
||||
this.$emit('cancel')
|
||||
this.$emit('input', false)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.md-action-sheet
|
||||
color color-text-base
|
||||
-webkit-font-smoothing antialiased
|
||||
.md-action-sheet-content
|
||||
overflow hidden
|
||||
position relative
|
||||
width 100%
|
||||
font-size action-sheet-font-size
|
||||
background color-bg-base
|
||||
text-align center
|
||||
header
|
||||
vertical-height(action-sheet-height)
|
||||
padding 0 30px
|
||||
word-ellipsis()
|
||||
>ul
|
||||
li
|
||||
vertical-height(action-sheet-height)
|
||||
hairline(top, color-border-base)
|
||||
box-sizing border-box
|
||||
font-size font-body-normal
|
||||
&.active
|
||||
color button-primary-fill
|
||||
&.disabled
|
||||
opacity field-item-color-disabled
|
||||
&.cancel-btn
|
||||
height 132px
|
||||
line-height 120px
|
||||
&::before
|
||||
display block
|
||||
content ''
|
||||
height 12px
|
||||
background color-primary-background
|
||||
</style>
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
import ActionSheet from '../index'
|
||||
import {mount} from 'avoriaz'
|
||||
|
||||
describe('ActionSheet', () => {
|
||||
let wrapper
|
||||
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy()
|
||||
})
|
||||
|
||||
it('create a action-sheet', done => {
|
||||
wrapper = mount(ActionSheet, {
|
||||
propsData: {
|
||||
options: [
|
||||
{
|
||||
label: '选项1',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: '选项2',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '选项3',
|
||||
value: 2,
|
||||
},
|
||||
],
|
||||
value: true,
|
||||
},
|
||||
})
|
||||
|
||||
expect(wrapper.hasClass('md-action-sheet')).to.be.true
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.find('.md-action-sheet-item').length).to.equal(3)
|
||||
done()
|
||||
})
|
||||
})
|
||||
|
||||
it('create a action-sheet with defaultIndex', done => {
|
||||
wrapper = mount(ActionSheet, {
|
||||
propsData: {
|
||||
options: [
|
||||
{
|
||||
label: '选项1',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: '选项2',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '选项3',
|
||||
value: 2,
|
||||
},
|
||||
],
|
||||
value: true,
|
||||
defaultIndex: 1,
|
||||
},
|
||||
})
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.find('.md-action-sheet-item')[1].hasClass('active')).to.equal(true)
|
||||
done()
|
||||
})
|
||||
})
|
||||
|
||||
it('action-sheet events selected', done => {
|
||||
wrapper = mount(ActionSheet, {
|
||||
propsData: {
|
||||
options: [
|
||||
{
|
||||
label: '选项1',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: '选项2',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '选项3',
|
||||
value: 2,
|
||||
},
|
||||
],
|
||||
value: true,
|
||||
activeIndex: 1,
|
||||
},
|
||||
})
|
||||
const eventStub = sinon.stub(wrapper.vm, '$emit')
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
wrapper.find('.md-action-sheet-item')[0].trigger('click')
|
||||
expect(wrapper.vm.clickIndex).equal(0)
|
||||
expect(eventStub.calledWith('selected')).to.be.true
|
||||
done()
|
||||
})
|
||||
})
|
||||
|
||||
it('selector events cancel', done => {
|
||||
wrapper = mount(ActionSheet, {
|
||||
propsData: {
|
||||
options: [
|
||||
{
|
||||
label: '选项1',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: '选项2',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '选项3',
|
||||
value: 2,
|
||||
},
|
||||
],
|
||||
value: true,
|
||||
activeIndex: 1,
|
||||
},
|
||||
})
|
||||
const eventStub = sinon.stub(wrapper.vm, '$emit')
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
const cancelBtn = wrapper.find('.cancel-btn')[0]
|
||||
cancelBtn.trigger('click')
|
||||
expect(eventStub.calledWith('cancel')).to.be.true
|
||||
done()
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
---
|
||||
title: Agree 勾选按钮
|
||||
preview: https://didi.github.io/mand-mobile/examples/agree
|
||||
---
|
||||
|
||||
用于标记切换某种状态，如协议勾选
|
||||
|
||||
### 引入
|
||||
|
||||
```javascript
|
||||
import { Agree } from 'mand-mobile'
|
||||
|
||||
Vue.component(Agree.name, Agree)
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
<!-- DEMO -->
|
||||
|
||||
### API
|
||||
|
||||
#### Agree Props
|
||||
|属性 | 说明 | 类型 | 默认值 |
|
||||
|----|-----|------|------|
|
||||
|v-model|是否选中|Boolean|`false`|
|
||||
|disabled|是否禁用|Boolean|`false`|
|
||||
|size|按钮大小，可选值同icon|String|`md`|
|
||||
|
||||
#### Agree Events
|
||||
|
||||
##### @change(name, checked)
|
||||
勾选状态发生变化事件
|
||||
|
||||
|属性 | 说明 | 类型 |
|
||||
|----|-----|------|
|
||||
|name|单选按钮名称，唯一标识|Number/String|
|
||||
|checked|是否选中|Boolean|
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
export default {
|
||||
'name': 'agree',
|
||||
'text': '单选框',
|
||||
'category': 'form',
|
||||
'description': '',
|
||||
'author': 'chengyanjing'
|
||||
}
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<template>
|
||||
<div class="md-example-child md-example-child-agree md-example-child-0">
|
||||
<md-agree
|
||||
v-model="agreeConf.checked"
|
||||
:disabled="agreeConf.disabled"
|
||||
:size="agreeConf.size"
|
||||
@change="onChange(agreeConf.name, agreeConf.checked, $event)"
|
||||
>
|
||||
本人承诺投保人已充分了解本保险产品，并保证投保信息的真实性，理解并同意
|
||||
</md-agree>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
import {Agree} from 'mand-mobile'
|
||||
|
||||
export default {
|
||||
name: 'agree-demo',
|
||||
title: '选中状态',
|
||||
height: 120,
|
||||
components: {
|
||||
[Agree.name]: Agree,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
agreeConf: {
|
||||
checked: true,
|
||||
name: 'agree0',
|
||||
size: 'lg',
|
||||
disabled: false,
|
||||
introduction: '选中状态',
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange(name, checked) {
|
||||
console.log(`agree name = ${name} is ${checked ? 'checked' : 'unchecked'}`)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<template>
|
||||
<div class="md-example-child md-example-child-agree md-example-child-1">
|
||||
<md-agree
|
||||
v-model="agreeConf.checked"
|
||||
:disabled="agreeConf.disabled"
|
||||
:size="agreeConf.size"
|
||||
@change="onChange(agreeConf.name, agreeConf.checked, $event)"
|
||||
>
|
||||
本人承诺投保人已充分了解本保险产品，并保证投保信息的真实性，理解并同意
|
||||
</md-agree>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
import {Agree} from 'mand-mobile'
|
||||
|
||||
export default {
|
||||
name: 'agree-demo',
|
||||
title: '未选中状态',
|
||||
height: 120,
|
||||
components: {
|
||||
[Agree.name]: Agree,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
agreeConf: {
|
||||
checked: false,
|
||||
name: 'agree1',
|
||||
size: 'lg',
|
||||
disabled: false,
|
||||
introduction: '未选中状态',
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange(name, checked) {
|
||||
console.log(`agree name = ${name} is ${checked ? 'checked' : 'unchecked'}`)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<template>
|
||||
<div class="md-example-child md-example-child-agree md-example-child-2">
|
||||
<md-agree
|
||||
v-model="agreeConf.checked"
|
||||
:disabled="agreeConf.disabled"
|
||||
:size="agreeConf.size"
|
||||
@change="onChange(agreeConf.name, agreeConf.checked, $event)"
|
||||
>
|
||||
本人承诺投保人已充分了解本保险产品，并保证投保信息的真实性，理解并同意
|
||||
</md-agree>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
import {Agree} from 'mand-mobile'
|
||||
|
||||
export default {
|
||||
name: 'agree-demo',
|
||||
title: '选中不可用状态',
|
||||
height: 120,
|
||||
components: {
|
||||
[Agree.name]: Agree,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
agreeConf: {
|
||||
checked: true,
|
||||
name: 'agree2',
|
||||
size: 'lg',
|
||||
disabled: true,
|
||||
introduction: '选中不可用状态',
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange(name, checked) {
|
||||
console.log(`agree name = ${name} is ${checked ? 'checked' : 'unchecked'}`)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<template>
|
||||
<div class="md-example-child md-example-child-agree md-example-child-3">
|
||||
<md-agree
|
||||
v-model="agreeConf.checked"
|
||||
:disabled="agreeConf.disabled"
|
||||
:size="agreeConf.size"
|
||||
@change="onChange(agreeConf.name, agreeConf.checked, $event)"
|
||||
>
|
||||
本人承诺投保人已充分了解本保险产品，并保证投保信息的真实性，理解并同意
|
||||
</md-agree>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
import {Agree} from 'mand-mobile'
|
||||
|
||||
export default {
|
||||
name: 'agree-demo',
|
||||
title: '未选中不可用状态',
|
||||
height: 120,
|
||||
components: {
|
||||
[Agree.name]: Agree,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
agreeConf: {
|
||||
checked: false,
|
||||
name: 'agree3',
|
||||
size: 'lg',
|
||||
disabled: true,
|
||||
introduction: '未选中不可用状态',
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange(name, checked) {
|
||||
console.log(`agree name = ${name} is ${checked ? 'checked' : 'unchecked'}`)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<template>
|
||||
<div class="md-example agree">
|
||||
<section class="md-example-section" v-for="(demo, index) in demos" :key="index">
|
||||
<div class="md-example-title" v-html="demo.title"></div>
|
||||
<div class="md-example-content">
|
||||
<component :is="demo"></component>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
import createDemoModule from '../../../examples/create-demo-module'
|
||||
import Demo0 from './cases/demo0'
|
||||
import Demo1 from './cases/demo1'
|
||||
import Demo2 from './cases/demo2'
|
||||
import Demo3 from './cases/demo3'
|
||||
|
||||
export default {...createDemoModule('action-sheet', [Demo0, Demo1, Demo2, Demo3])}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
.md-example.agree
|
||||
.md-example-child
|
||||
padding v-gap-md h-gap-lg
|
||||
font-size font-minor-large
|
||||
background color-bg-base
|
||||
</style>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<template>
|
||||
<div
|
||||
class="md-agree"
|
||||
:class="[
|
||||
disabled ? 'disabled' : ''
|
||||
]">
|
||||
<div
|
||||
class="agree-icon"
|
||||
:class="[
|
||||
value ? 'checked' : ''
|
||||
]"
|
||||
@click="$_onChange($event)">
|
||||
<md-icon
|
||||
:name="iconName"
|
||||
:size="size"></md-icon>
|
||||
</div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
import Icon from '../icon'
|
||||
export default {
|
||||
name: 'md-agree',
|
||||
|
||||
components: {
|
||||
[Icon.name]: Icon,
|
||||
},
|
||||
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'md',
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
|
||||
computed: {
|
||||
iconName() {
|
||||
return this.value ? 'circle-right' : 'circle'
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
// MARK: events handler, 如 $_onButtonClick
|
||||
$_onChange(event) {
|
||||
if (this.disabled) {
|
||||
return
|
||||
}
|
||||
this.$emit('input', !this.value)
|
||||
this.$emit('change', event)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
.md-agree
|
||||
display flex
|
||||
&.disabled
|
||||
opacity opacity-disabled
|
||||
.agree-icon
|
||||
margin-right 10px
|
||||
color agree-fill-inverse
|
||||
&.checked
|
||||
color agree-fill
|
||||
</style>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
import Agree from '../index'
|
||||
import {mount} from 'avoriaz'
|
||||
|
||||
describe('Agree', () => {
|
||||
let wrapper
|
||||
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy()
|
||||
})
|
||||
|
||||
it('create a simple agree', () => {
|
||||
wrapper = mount(Agree)
|
||||
expect(wrapper.hasClass('md-agree')).to.be.true
|
||||
})
|
||||
|
||||
it('create a simple checked agree and then uncheck it', () => {
|
||||
wrapper = mount(Agree, {
|
||||
propsData: {
|
||||
value: true,
|
||||
},
|
||||
})
|
||||
expect(wrapper.vm.iconName).to.equal('circle-right')
|
||||
|
||||
const eventStub = sinon.stub(wrapper.vm, '$emit')
|
||||
wrapper.find('.agree-icon')[0].trigger('click')
|
||||
expect(eventStub.calledWith('change')).to.be.true
|
||||
})
|
||||
|
||||
it('create a simple unchecked agree and then check it', () => {
|
||||
wrapper = mount(Agree, {
|
||||
propsData: {
|
||||
value: false,
|
||||
},
|
||||
})
|
||||
expect(wrapper.vm.iconName).to.equal('circle')
|
||||
|
||||
wrapper.vm.value = true
|
||||
expect(wrapper.vm.iconName).to.equal('circle-right')
|
||||
})
|
||||
|
||||
it('create a disabled agree', () => {
|
||||
wrapper = mount(Agree, {
|
||||
propsData: {
|
||||
disabled: true,
|
||||
},
|
||||
})
|
||||
expect(wrapper.hasClass('disabled')).to.be.true
|
||||
})
|
||||
})
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
---
|
||||
title: Button 按钮
|
||||
preview: https://didi.github.io/mand-mobile/examples/button
|
||||
---
|
||||
|
||||
按钮组件，可配置多种不同的按钮样式
|
||||
|
||||
### 引入
|
||||
|
||||
```javascript
|
||||
import { Button } from 'mand-mobile'
|
||||
|
||||
Vue.component(Button.name, Button)
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
<!-- DEMO -->
|
||||
|
||||
### API
|
||||
|
||||
#### Button Props
|
||||
|属性 | 说明 | 类型 | 默认值 | 备注 |
|
||||
|----|-----|------|------ |------|
|
||||
|type|按钮类型|String|`primary`|`primary`, `ghost`, `ghost-primary`, `link`|
|
||||
|size|按钮大小|String|`large`|`large`, `small`。仅在`type`为`ghost/ghost-primary`时生效|
|
||||
|icon|按钮图标|String|-|可选值请参考组件`Icon`|
|
||||
|disabled|是否禁用|Boolean|`false`|-|
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<template>
|
||||
<div class="md-example-child md-example-child-button md-example-child-button-0">
|
||||
<md-button>Primary</md-button>
|
||||
<md-button disabled>Primary Disabled</md-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
import {Button} from 'mand-mobile'
|
||||
|
||||
export default {
|
||||
name: 'button-demo',
|
||||
title: '主按钮',
|
||||
components: {
|
||||
[Button.name]: Button,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<template>
|
||||
<div class="md-example-child md-example-child-button md-example-child-button-1">
|
||||
<md-button type="ghost">Ghost</md-button>
|
||||
<md-button type="ghost" disabled style="margin-left:5px">Ghost</md-button>
|
||||
<md-button type="ghost-primary" style="margin-left:5px">Ghost-P</md-button>
|
||||
<md-button type="ghost-primary" disabled style="margin-left:5px">Ghost-P</md-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
import {Button} from 'mand-mobile'
|
||||
|
||||
export default {
|
||||
name: 'button-demo',
|
||||
title: '线性按钮',
|
||||
components: {
|
||||
[Button.name]: Button,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<template>
|
||||
<div class="md-example-child md-example-child-button md-example-child-button-2">
|
||||
<md-button type="ghost" size="small">Ghost-S</md-button>
|
||||
<md-button type="ghost" size="small" disabled style="margin-left:5px">Ghost-S</md-button>
|
||||
<md-button type="ghost-primary" size="small" style="margin-left:5px">Ghost-P-S</md-button>
|
||||
<md-button type="ghost-primary" size="small" disabled style="margin-left:5px">Ghost-P-S</md-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
import {Button} from 'mand-mobile'
|
||||
|
||||
export default {
|
||||
name: 'button-demo',
|
||||
title: '线性按钮小尺寸',
|
||||
components: {
|
||||
[Button.name]: Button,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<template>
|
||||
<div class="md-example-child md-example-child-button md-example-child-button-3">
|
||||
<div class="md-example-box-content">每个人都有属于自己的一片森林，也许我们从来不曾去过，但它一直在那里，总会在那里。迷失的人迷失了，相逢的人会再相逢。</div>
|
||||
<md-button type="link">阅读全文</md-button>
|
||||
<div class="md-example-box-content" style="margin-top:10px">希望你可以记住我，记住我这样活过，这样在你身边待过。</div>
|
||||
<md-button type="link" icon="hollow-plus">加入收藏</md-button>
|
||||
<div class="md-example-box-content" style="margin-top:10px">少年时我们追求激情，成熟后却迷恋平庸。在我们寻找、伤害、背离之后，还能一如既往地相信爱情，这是一种勇气。</div>
|
||||
<md-button type="link" disabled>评论</md-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
import {Button} from 'mand-mobile'
|
||||
|
||||
export default {
|
||||
name: 'button-demo',
|
||||
title: '文字链接按钮',
|
||||
components: {
|
||||
[Button.name]: Button,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.md-example-child-button-3
|
||||
.md-example-box-content
|
||||
float left
|
||||
width 100%
|
||||
padding 60px h-gap-lg
|
||||
color color-text-base
|
||||
font-size font-minor-large
|
||||
text-align left
|
||||
background color-bg-base
|
||||
box-sizing border-box
|
||||
line-height 1.5
|
||||
text-indent 2em
|
||||
.md-button
|
||||
float left
|
||||
</style>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<template>
|
||||
<div class="md-example button">
|
||||
<section class="md-example-section" v-for="(demo, index) in demos" :key="index">
|
||||
<div class="md-example-title" v-html="demo.title"></div>
|
||||
<div class="md-example-content">
|
||||
<component :is="demo"></component>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
import createDemoModule from '../../../examples/create-demo-module'
|
||||
import Demo0 from './cases/demo0'
|
||||
import Demo1 from './cases/demo1'
|
||||
import Demo2 from './cases/demo2'
|
||||
import Demo3 from './cases/demo3'
|
||||
|
||||
export default {
|
||||
...createDemoModule('button', [Demo0, Demo1, Demo2, Demo3]),
|
||||
}
|
||||
|
||||
// export default {
|
||||
// name: `button-demo`,
|
||||
// data() {
|
||||
// return {
|
||||
// demos: [Demo0, Demo1, Demo2, Demo3],
|
||||
// }
|
||||
// },
|
||||
// }
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
.md-example.button
|
||||
.md-example-section
|
||||
float left
|
||||
width 100%
|
||||
margin-bottom 10px
|
||||
h1
|
||||
margin-bottom 10px
|
||||
color color-gray-1
|
||||
font-size font-heading-normal
|
||||
font-weight normal
|
||||
.md-button
|
||||
float left
|
||||
margin-bottom 10px
|
||||
.md-example-box
|
||||
float left
|
||||
width 100%
|
||||
hairline(top)
|
||||
.md-example-box-content
|
||||
float left
|
||||
width 100%
|
||||
padding 60px h-gap-lg
|
||||
color color-text-base
|
||||
font-size font-minor-large
|
||||
text-align left
|
||||
background color-bg-base
|
||||
box-sizing border-box
|
||||
line-height 1.5
|
||||
text-indent 2em
|
||||
.md-button
|
||||
margin 0
|
||||
</style>
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
<template>
|
||||
<div
|
||||
class="md-button"
|
||||
:class="[type, size, disabled ? 'disabled' : '', icon ? 'with-icon' : '']"
|
||||
@click="$_onBtnClick"
|
||||
>
|
||||
<div class="md-button-inner">
|
||||
<template v-if="icon">
|
||||
<md-icon :name="icon"></md-icon>
|
||||
</template>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
import Icon from '../icon'
|
||||
export default {
|
||||
name: 'md-button',
|
||||
|
||||
components: {
|
||||
[Icon.name]: Icon,
|
||||
},
|
||||
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: 'primary',
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'large',
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
$_onBtnClick(event) {
|
||||
if (this.disabled) {
|
||||
event.stopImmediatePropagation()
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
.md-button
|
||||
-webkit-user-select none
|
||||
-webkit-tap-highlight-color transparent
|
||||
position relative
|
||||
text-align center
|
||||
border-radius radius-normal
|
||||
box-sizing border-box
|
||||
overflow visible
|
||||
// &.disabled
|
||||
// pointer-events none
|
||||
&::before
|
||||
absolute-pos()
|
||||
display none
|
||||
content ''
|
||||
position absolute
|
||||
box-sizing border-box
|
||||
&:active::before
|
||||
display block
|
||||
.md-button-inner
|
||||
width 100%
|
||||
height 100%
|
||||
overflow hidden
|
||||
text-overflow ellipsis
|
||||
word-break break-word
|
||||
white-space nowrap
|
||||
|
||||
// type
|
||||
&.primary
|
||||
background-color button-primary-fill
|
||||
color color-text-base-inverse
|
||||
&:active::before
|
||||
background-color button-primary-fill-tap
|
||||
&.disabled
|
||||
background-color button-primary-fill-disabled
|
||||
&.large, &.small
|
||||
width button-primary-width
|
||||
height button-primary-height
|
||||
line-height button-primary-height
|
||||
font-size button-primary-font-size
|
||||
font-weight font-weight-medium
|
||||
|
||||
&.ghost
|
||||
color button-ghost-color
|
||||
hairline(all, button-ghost-color, true)
|
||||
&:active::before
|
||||
background-color button-ghost-fill-tap
|
||||
&.ghost-primary
|
||||
color button-ghost-primary-color
|
||||
hairline(all, button-ghost-primary-color, true)
|
||||
&:active::before
|
||||
background-color button-ghost-primary-fill-tap
|
||||
&.ghost, &.ghost-primary
|
||||
&.disabled
|
||||
opacity opacity-disabled
|
||||
&.large
|
||||
width button-ghost-width
|
||||
height button-ghost-height
|
||||
line-height button-ghost-height
|
||||
font-size button-ghost-font-size
|
||||
&.small
|
||||
width button-ghost-width-sm
|
||||
height button-ghost-height-sm
|
||||
line-height button-ghost-height-sm
|
||||
font-size button-ghost-font-size
|
||||
|
||||
&.link
|
||||
background-color button-link-fill
|
||||
color button-link-color
|
||||
.md-button-inner
|
||||
hairline(top, color-border-base)
|
||||
hairline(bottom, color-border-base)
|
||||
display flex
|
||||
align-items center
|
||||
justify-content center
|
||||
&:active::before
|
||||
background-color button-link-fill-tap
|
||||
&.disabled
|
||||
opacity opacity-disabled
|
||||
&.large, &.small
|
||||
width button-link-width
|
||||
height button-link-height
|
||||
font-size font-heading-normal
|
||||
&.with-icon
|
||||
.md-icon
|
||||
display flex
|
||||
align-items center
|
||||
justify-content center
|
||||
margin-right h-gap-sm
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
import Button from '../index'
|
||||
import {mount} from 'avoriaz'
|
||||
|
||||
describe('Button', () => {
|
||||
let wrapper
|
||||
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy()
|
||||
})
|
||||
|
||||
it('create default button', () => {
|
||||
wrapper = mount(Button)
|
||||
|
||||
expect(wrapper.hasClass('md-button') && wrapper.hasClass('primary') && wrapper.hasClass('large')).to.equal(true)
|
||||
})
|
||||
|
||||
it('create primary button', () => {
|
||||
wrapper = mount(Button, {
|
||||
propsData: {
|
||||
type: 'primary',
|
||||
},
|
||||
})
|
||||
|
||||
expect(wrapper.hasClass('primary')).to.equal(true)
|
||||
})
|
||||
|
||||
it('create ghost button', () => {
|
||||
wrapper = mount(Button, {
|
||||
propsData: {
|
||||
type: 'ghost',
|
||||
},
|
||||
})
|
||||
|
||||
expect(wrapper.hasClass('ghost')).to.equal(true)
|
||||
})
|
||||
|
||||
it('create ghost-primary button', () => {
|
||||
wrapper = mount(Button, {
|
||||
propsData: {
|
||||
type: 'ghost-primary',
|
||||
},
|
||||
})
|
||||
|
||||
expect(wrapper.hasClass('ghost-primary')).to.equal(true)
|
||||
})
|
||||
|
||||
it('create link button', () => {
|
||||
wrapper = mount(Button, {
|
||||
propsData: {
|
||||
type: 'link',
|
||||
},
|
||||
})
|
||||
|
||||
expect(wrapper.hasClass('link')).to.equal(true)
|
||||
})
|
||||
|
||||
it('create disabled button', () => {
|
||||
wrapper = mount(Button, {
|
||||
propsData: {
|
||||
disabled: true,
|
||||
},
|
||||
})
|
||||
|
||||
expect(wrapper.hasClass('disabled')).to.equal(true)
|
||||
})
|
||||
|
||||
it('create icon button', () => {
|
||||
wrapper = mount(Button, {
|
||||
propsData: {
|
||||
icon: 'hollow-plus',
|
||||
},
|
||||
})
|
||||
|
||||
expect(wrapper.hasClass('with-icon')).to.equal(true)
|
||||
})
|
||||
|
||||
it('create large button', () => {
|
||||
wrapper = mount(Button, {
|
||||
propsData: {
|
||||
size: 'large',
|
||||
},
|
||||
})
|
||||
|
||||
expect(wrapper.hasClass('large')).to.equal(true)
|
||||
})
|
||||
|
||||
it('create small button', () => {
|
||||
wrapper = mount(Button, {
|
||||
propsData: {
|
||||
size: 'small',
|
||||
},
|
||||
})
|
||||
|
||||
expect(wrapper.hasClass('small')).to.equal(true)
|
||||
})
|
||||
})
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
---
|
||||
title: Captcha 验证码
|
||||
preview: https://didi.github.io/mand-mobile/examples/captcha
|
||||
---
|
||||
|
||||
验证码校验窗口
|
||||
|
||||
### 引入
|
||||
|
||||
```javascript
|
||||
import { Captcha } from 'mand-mobile'
|
||||
|
||||
Vue.component(Captcha.name, Captcha)
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
<!-- DEMO -->
|
||||
|
||||
### API
|
||||
|
||||
#### Captcha Props
|
||||
|属性 | 说明 | 类型 | 默认值|
|
||||
|----|-----|------|------|
|
||||
|v-model|验证码窗口是否显示|Boolean|`false`|
|
||||
|is-view|是否内嵌在页面内展示，否则以弹层形式|Boolean|`false`|
|
||||
|maxlength|字符最大输入长度, 若为`-1`则不限制输入长度|Number|`4`|
|
||||
|mask|是否掩码|Boolean|`false`|
|
||||
|system|是否使用系统默认键盘|Boolean|`false`|
|
||||
|title|窗口标题|String|-|
|
||||
|appendTo|挂载节点|HTMLElement|`document.body`|
|
||||
|count|倒计时时长, 设置为0的时候不显示倒计时按钮|Number|`60`|
|
||||
|
||||
|
||||
#### Captcha Methods
|
||||
|
||||
#### countdown()
|
||||
开始倒计时
|
||||
|
||||
#### Captcha Events
|
||||
|
||||
##### @show()
|
||||
验证码组件显示事件
|
||||
|
||||
#### @hide()
|
||||
验证码组件隐藏事件
|
||||
|
||||
#### @send(countdown)
|
||||
触发发送验证码事件, 会在第一次显示的时候触发, 其余情况则会在点击重发按钮后出发
|
||||
|
||||
#### @submit(code)
|
||||
用户提交输入内容事件
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
export default {
|
||||
'name': 'captcha',
|
||||
'text': '验证码窗口',
|
||||
'category': 'business',
|
||||
'description': '交互式验证码校验弹窗',
|
||||
'author': 'liuxinyumichael'
|
||||
}
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
<template>
|
||||
<div class="md-example-child md-example-child-captcha">
|
||||
<md-field title="文案">
|
||||
<md-input-item
|
||||
title="标题"
|
||||
v-model="title"
|
||||
></md-input-item>
|
||||
<md-input-item
|
||||
title="插槽内容"
|
||||
v-model="content"
|
||||
></md-input-item>
|
||||
</md-field>
|
||||
|
||||
<md-field title="配置">
|
||||
|
||||
<md-field-item
|
||||
title="限制验证码长度"
|
||||
customized
|
||||
align="right">
|
||||
<md-switch v-model="limit"></md-switch>
|
||||
</md-field-item>
|
||||
|
||||
<md-input-item
|
||||
title="验证码长度"
|
||||
type="tel"
|
||||
v-model="maxlength"
|
||||
></md-input-item>
|
||||
|
||||
<md-field-item
|
||||
title="采用掩码"
|
||||
customized
|
||||
align="right">
|
||||
<md-switch v-model="mask"></md-switch>
|
||||
</md-field-item>
|
||||
|
||||
<md-field-item
|
||||
title="使用系统键盘"
|
||||
customized
|
||||
align="right">
|
||||
<md-switch v-model="system"></md-switch>
|
||||
</md-field-item>
|
||||
|
||||
</md-field>
|
||||
<md-button @click.native="next">确定</md-button>
|
||||
|
||||
<md-captcha
|
||||
ref="captcha"
|
||||
v-model="show"
|
||||
:title="title"
|
||||
:maxlength="limit ? parseFloat(maxlength) : -1"
|
||||
:system="system"
|
||||
:mask="mask"
|
||||
:appendTo="appendTo"
|
||||
@submit="submit"
|
||||
@show="onShow"
|
||||
@hide="onHide"
|
||||
@send="onSend"
|
||||
>
|
||||
{{content}}
|
||||
</md-captcha>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
import {Button, Toast, Captcha, InputItem, Field, FieldItem, Switch} from 'mand-mobile'
|
||||
|
||||
export default {
|
||||
name: 'captcha-demo',
|
||||
title: '自定义',
|
||||
height: 650,
|
||||
components: {
|
||||
[Button.name]: Button,
|
||||
[Captcha.name]: Captcha,
|
||||
[InputItem.name]: InputItem,
|
||||
[Field.name]: Field,
|
||||
[FieldItem.name]: FieldItem,
|
||||
[Switch.name]: Switch,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
appendTo: document.querySelector('.doc-demo-box-priview') || document.body,
|
||||
title: '手机验证码',
|
||||
content: '哎哟，不错哟~',
|
||||
limit: true,
|
||||
maxlength: '6',
|
||||
mask: false,
|
||||
system: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
next() {
|
||||
this.show = true
|
||||
},
|
||||
submit(val) {
|
||||
const max = parseFloat(this.maxlength)
|
||||
if (max < 0 || val.length === max) {
|
||||
this.show = false
|
||||
Toast({
|
||||
content: `你输入了${val}`,
|
||||
})
|
||||
}
|
||||
},
|
||||
onSend() {
|
||||
this.$refs.captcha.countdown()
|
||||
},
|
||||
onShow() {},
|
||||
onHide() {},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
.md-example-child-captcha
|
||||
padding 20px
|
||||
.md-field
|
||||
margin-bottom 40px
|
||||
</style>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<template>
|
||||
<div class="md-example-child md-example-child-captcha-1">
|
||||
<md-captcha
|
||||
:maxlength="4"
|
||||
:isView="true"
|
||||
>
|
||||
验证码已发送至186****5407
|
||||
</md-captcha>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
import {Captcha} from 'mand-mobile'
|
||||
|
||||
export default {
|
||||
name: 'captcha-demo',
|
||||
title: '内联',
|
||||
height: 650,
|
||||
components: {
|
||||
[Captcha.name]: Captcha,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
.md-example-child-captcha-1
|
||||
height 650px
|
||||
padding 30px 0
|
||||
.md-number-keyboard
|
||||
margin-top 30px
|
||||
</style>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<<template>
|
||||
<div class="md-example captcha">
|
||||
<section class="md-example-section" v-for="(demo, index) in demos" :key="index">
|
||||
<div class="md-example-title" v-html="demo.title"></div>
|
||||
<div class="md-example-content">
|
||||
<component :is="demo"></component>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
import createDemoModule from '../../../examples/create-demo-module'
|
||||
import Demo0 from './cases/demo0'
|
||||
// import Demo1 from './cases/demo1'
|
||||
export default {...createDemoModule('captcha', [Demo0])}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
.md-example.captcha
|
||||
.md-example-child
|
||||
padding 0
|
||||
.md-example-section
|
||||
float left
|
||||
width 100%
|
||||
margin-bottom 10px
|
||||
h1
|
||||
margin-bottom 10px
|
||||
color color-gray-1
|
||||
font-size font-heading-normal
|
||||
font-weight normal
|
||||
.md-example-box
|
||||
float left
|
||||
width 100%
|
||||
hairline(top)
|
||||
.md-example-box-content
|
||||
float left
|
||||
width 100%
|
||||
padding 60px h-gap-lg
|
||||
color color-text-base
|
||||
font-size font-minor-large
|
||||
text-align left
|
||||
background color-bg-base
|
||||
box-sizing border-box
|
||||
line-height 1.5
|
||||
text-indent 2em
|
||||
.md-button
|
||||
margin 0
|
||||
</style>
|
||||
|
|
@ -0,0 +1,207 @@
|
|||
<template>
|
||||
<div class="md-captcha" v-show="isView || value || visible">
|
||||
<template v-if="isView">
|
||||
<div class="md-captcha-content">
|
||||
<h2 class="md-captcha-title" v-if="title" v-text="title"></h2>
|
||||
<div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
<md-button
|
||||
v-if="count"
|
||||
type="ghost"
|
||||
size="small"
|
||||
v-text="counterText"
|
||||
:disabled="this.isCounting"
|
||||
@click.native="$_onClickResend"
|
||||
></md-button>
|
||||
</div>
|
||||
<md-codebox
|
||||
ref="codebox"
|
||||
v-model="code"
|
||||
:maxlength="maxlength"
|
||||
:system="system"
|
||||
:closable="false"
|
||||
:isView="isView"
|
||||
:mask="mask"
|
||||
:autofocus="false"
|
||||
@submit="$_onSubmit"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<md-dialog
|
||||
:value="value"
|
||||
:closable="true"
|
||||
:appendTo="false"
|
||||
position="center"
|
||||
@input="$_onInput"
|
||||
@show="$_onShow"
|
||||
@hide="$_onHide"
|
||||
>
|
||||
<div class="md-captcha-content">
|
||||
<h2 class="md-captcha-title" v-if="title" v-text="title"></h2>
|
||||
<div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
<md-button
|
||||
v-if="count"
|
||||
type="ghost"
|
||||
size="small"
|
||||
v-text="counterText"
|
||||
:disabled="this.isCounting"
|
||||
@click.native="$_onClickResend"
|
||||
></md-button>
|
||||
</div>
|
||||
<md-codebox
|
||||
ref="codebox"
|
||||
v-model="code"
|
||||
:maxlength="maxlength"
|
||||
:system="system"
|
||||
:closable="false"
|
||||
:mask="mask"
|
||||
:autofocus="false"
|
||||
@submit="$_onSubmit"
|
||||
/>
|
||||
</md-dialog>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
import Dialog from '../dialog'
|
||||
import Codebox from '../codebox'
|
||||
import Button from '../button'
|
||||
|
||||
export default {
|
||||
name: 'md-captcha',
|
||||
|
||||
components: {
|
||||
[Dialog.name]: Dialog,
|
||||
[Codebox.name]: Codebox,
|
||||
[Button.name]: Button,
|
||||
},
|
||||
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
},
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
maxlength: {
|
||||
type: [Number, String],
|
||||
default: 4,
|
||||
},
|
||||
mask: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
system: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
appendTo: {
|
||||
default: () => document.body,
|
||||
},
|
||||
count: {
|
||||
type: Number,
|
||||
default: 60,
|
||||
},
|
||||
isView: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
code: '',
|
||||
visible: false,
|
||||
counterText: '发送验证码',
|
||||
isCounting: false,
|
||||
firstShown: false,
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
value(val) {
|
||||
if (val) {
|
||||
this.code = ''
|
||||
if (!this.firstShown) {
|
||||
this.firstShown = true
|
||||
this.$emit('send', this.countdown)
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
if (this.appendTo && !this.isView) {
|
||||
this.appendTo.appendChild(this.$el)
|
||||
}
|
||||
if (this.value) {
|
||||
this.firstShown = true
|
||||
this.$emit('send', this.countdown)
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
// MARK: events handler, 如 $_onButtonClick
|
||||
$_onInput(val) {
|
||||
this.$emit('input', val)
|
||||
},
|
||||
$_onShow() {
|
||||
this.visible = true
|
||||
this.$refs.codebox.focus()
|
||||
this.$emit('show')
|
||||
},
|
||||
$_onHide() {
|
||||
this.visible = false
|
||||
this.$refs.codebox.blur()
|
||||
this.$emit('hide')
|
||||
},
|
||||
$_onSubmit(code) {
|
||||
this.$emit('submit', code)
|
||||
this.resetcount()
|
||||
},
|
||||
$_onClickResend() {
|
||||
this.$emit('send', this.countdown)
|
||||
},
|
||||
// MARK: public methods
|
||||
countdown() {
|
||||
clearInterval(this.__counter__)
|
||||
let i = this.count - 1
|
||||
this.isCounting = true
|
||||
this.counterText = `${i}s后重发`
|
||||
this.__counter__ = setInterval(() => {
|
||||
if (i === 0) {
|
||||
this.resetcount()
|
||||
} else {
|
||||
i--
|
||||
this.counterText = `${i}s后重发`
|
||||
}
|
||||
}, 1000)
|
||||
},
|
||||
resetcount() {
|
||||
this.isCounting = false
|
||||
this.counterText = '发送验证码'
|
||||
clearInterval(this.__counter__)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
.md-captcha
|
||||
.md-dialog .md-dialog-content
|
||||
margin-bottom number-keyboard-height
|
||||
.md-captcha-content
|
||||
text-align center
|
||||
margin-bottom 20px
|
||||
font-size 24px
|
||||
.md-captcha-title
|
||||
color color-text-base
|
||||
font-size 32px
|
||||
margin-bottom 15px
|
||||
.md-button
|
||||
margin 0.34rem auto
|
||||
</style>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
import Captcha from '../index'
|
||||
import sinon from 'sinon'
|
||||
import {mount} from 'avoriaz'
|
||||
|
||||
describe('Captcha', () => {
|
||||
let wrapper
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy()
|
||||
})
|
||||
|
||||
it('create a simple captcha', () => {
|
||||
wrapper = mount(Captcha, {
|
||||
propsData: {
|
||||
system: true,
|
||||
value: true,
|
||||
},
|
||||
})
|
||||
|
||||
expect(wrapper.hasClass('md-captcha')).to.be.true
|
||||
})
|
||||
|
||||
it('create a captcha and not append to body', () => {
|
||||
wrapper = mount(Captcha, {
|
||||
propsData: {
|
||||
appendTo: false,
|
||||
},
|
||||
})
|
||||
|
||||
expect(wrapper.vm.$el.parentNode).not.to.equal(document.body)
|
||||
})
|
||||
|
||||
it('should clean code after shown again', () => {
|
||||
wrapper = mount(Captcha, {
|
||||
propsData: {
|
||||
value: false,
|
||||
},
|
||||
data: {
|
||||
code: '123',
|
||||
},
|
||||
})
|
||||
|
||||
wrapper.setProps({
|
||||
value: true,
|
||||
})
|
||||
|
||||
expect(wrapper.vm.code).to.equal('')
|
||||
})
|
||||
|
||||
it('emit submit events', done => {
|
||||
wrapper = mount(Captcha, {
|
||||
propsData: {
|
||||
maxlength: 4,
|
||||
value: false,
|
||||
isView: true,
|
||||
appendTo: false,
|
||||
},
|
||||
})
|
||||
|
||||
const eventStub = sinon.stub(wrapper.vm, '$emit')
|
||||
wrapper.setProps({
|
||||
value: true,
|
||||
})
|
||||
wrapper.setData({
|
||||
code: '123',
|
||||
})
|
||||
setTimeout(() => {
|
||||
wrapper.first('.keyboard-number-item').trigger('click')
|
||||
setTimeout(() => {
|
||||
expect(eventStub.calledWith('submit', '1231')).to.be.true
|
||||
done()
|
||||
}, 0)
|
||||
}, 500)
|
||||
})
|
||||
})
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
---
|
||||
title: Cashier 收银台
|
||||
preview: https://didi.github.io/mand-mobile/examples/cashier
|
||||
---
|
||||
|
||||
业务支付弹窗，支持支付渠道选择和支付验证码发送
|
||||
|
||||
### 引入
|
||||
|
||||
```javascript
|
||||
import { Cashier } from 'mand-mobile'
|
||||
|
||||
Vue.component(Cashier.name, Cashier)
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
<!-- DEMO -->
|
||||
|
||||
### API
|
||||
|
||||
#### Cashier Props
|
||||
|属性 | 说明 | 类型 | 默认值 | 备注|
|
||||
|----|-----|------|------|------|
|
||||
|v-model|收银台是否显示|Boolean|`false`|-|
|
||||
|channels|支付渠道数据源|Array<{text, value, icon}>|`[]`|`icon`可作为`className`或组件`Icon`的`name`属性|
|
||||
|default-index|默认选中支付渠道索引|Number|`0`|-|
|
||||
|title|收银台弹窗标题|String|`支付`|-|
|
||||
|payment-title|支付金额标题|String|`支付金额`|支持`html fragment`|
|
||||
|payment-amount|支付金额|String|`0.00`|支持`html fragment`|
|
||||
|payment-describe|支付金额说明|String|-|支持`html fragment`|
|
||||
|
||||
#### Cashier Methods
|
||||
|
||||
##### next(scene, option)
|
||||
进入收银台下一步
|
||||
|
||||
|参数 | 说明 | 类型 | 默认值|
|
||||
|----|-----|------|------|
|
||||
| scene | 步骤标识, 'captcha(发送验证码)', 'loading(支付中)', 'success(支付成功)', 'fail(支付失败)' | String |-|
|
||||
| option | 当前步骤配置 | Object |属性如下所示|
|
||||
|
||||
* `captcha` option
|
||||
|
||||
|属性 | 说明 | 类型 | 默认值 | 备注|
|
||||
|----|-----|------|------|------|
|
||||
|text|发送验证码说明 | String |-|支持`html fragment`|
|
||||
|maxlength|验证码位数 | Number |`4`|若为`-1`则不限制输入长度|
|
||||
|count|验证码重新发送倒计时 | Number |`60`|若为`0`则不显示重新发送|
|
||||
|onSend|验证码发送回调 | Function(countdown: Function) |-|`countdown`为开始倒计时方法|
|
||||
|onSubmit|验证码提交回调 | Function(code: String) |-|`code`为输入的验证码|
|
||||
|
||||
* `loading` option
|
||||
|
||||
|属性 | 说明 | 类型 | 默认值 | 备注|
|
||||
|----|-----|------|------|------|
|
||||
|text|支付中说明 | String |`支付结果查询中...`|支持`html fragment`|
|
||||
|
||||
* `success` option
|
||||
|
||||
|属性 | 说明 | 类型 | 默认值 | 备注|
|
||||
|----|-----|------|------|------|
|
||||
|text|支付成功说明 | String |`支付成功`|支持`html fragment`|
|
||||
|
||||
* `fail` option
|
||||
|
||||
|属性 | 说明 | 类型 | 默认值 | 备注|
|
||||
|----|-----|------|------|------|
|
||||
|text|支付失败说明 | String |`支付失败，请稍后重试`|支持`html fragment`|
|
||||
|
||||
#### Cashier Events
|
||||
|
||||
##### @select(item: {text, value})
|
||||
支付渠道选中事件
|
||||
|
||||
##### @pay(item: {text, value})
|
||||
支付渠道确认并发起支付事件
|
||||
|
||||
##### @cancel()
|
||||
取消支付事件
|
||||
|
||||
##### @show()
|
||||
收银台弹窗展示事件
|
||||
|
||||
##### @hide()
|
||||
收银台弹窗隐藏事件
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
export default {
|
||||
"name": "cashier",
|
||||
"text": "收银台",
|
||||
"category": "business",
|
||||
"description": "",
|
||||
"author": "xuxiaoyan"
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue