================================================
FILE: packages/indicator/README.md
================================================
# Overview
vue-indicator is a mobile loading indicator plugin for vue.js.
# Installation
First, install `vue-indicator` from npm:
```bash
$ npm install vue-indicator
```
Then use it:
```Javascript
// ES6 mudule
import Indicator from 'vue-indicator';
// CommonJS
const Indicator = require('vue-indicator').default;
```
# Usage
Open an indicator:
```Javascript
Indicator.open();
```
Open an indicator with a string:
```Javascript
Indicator.open('Loading...');
```
Open an indicator with an object:
```Javascript
Indicator.open({ text:'Loading...', spinnerType: 'fading-circle' });
```
Then close it:
```Javascript
Indicator.close();
```
# API
| Option | Description | Value | Default |
|-------------|----------------|-------------------------------------------------------------|---------|
| text | indicator text | String | |
| spinnerType | spinner type | 'snake', 'fading-circle', 'double-bounce', 'triple-bounce' | 'snake' |
# License
MIT
================================================
FILE: packages/indicator/cooking.conf.js
================================================
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, 'index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'MintIndicator',
extractCSS: 'style.css',
extends: config.extends,
alias: config.alias,
externals: config.externals
});
module.exports = cooking.resolve();
================================================
FILE: packages/indicator/index.js
================================================
import Vue from 'vue';
const Indicator = Vue.extend(require('./src/indicator.vue'));
let instance;
export default {
open(options = {}) {
if (!instance) {
instance = new Indicator({
el: document.createElement('div')
});
}
if (instance.visible) return;
instance.text = typeof options === 'string' ? options : options.text || '';
instance.spinnerType = options.spinnerType || 'snake';
document.body.appendChild(instance.$el);
Vue.nextTick(() => {
instance.visible = true;
});
},
close() {
if (instance) {
instance.visible = false;
}
}
};
================================================
FILE: packages/indicator/package.json
================================================
{
"name": "mint-indicator",
"description": "",
"version": "0.1.0",
"main": "lib/index.js",
"author": "elemefe",
"homepage": "https://github.com/ElemeFE/mint-ui",
"license": "MIT",
"repository": "https://github.com/ElemeFE/mint-ui/tree/master/components/mint-indicator",
"dependencies": {
}
}
================================================
FILE: packages/indicator/src/indicator.vue
================================================
{{ text }}
================================================
FILE: packages/infinite-scroll/README.md
================================================
# mint-infinite-scroll
================================================
FILE: packages/infinite-scroll/index.js
================================================
import 'mint-ui/src/style/empty.css';
export { default } from './src/infinite-scroll.js';
================================================
FILE: packages/infinite-scroll/src/directive.js
================================================
import Vue from 'vue';
const ctx = '@@InfiniteScroll';
var throttle = function(fn, delay) {
var now, lastExec, timer, context, args; //eslint-disable-line
var execute = function() {
fn.apply(context, args);
lastExec = now;
};
return function() {
context = this;
args = arguments;
now = Date.now();
if (timer) {
clearTimeout(timer);
timer = null;
}
if (lastExec) {
var diff = delay - (now - lastExec);
if (diff < 0) {
execute();
} else {
timer = setTimeout(() => {
execute();
}, diff);
}
} else {
execute();
}
};
};
var getScrollTop = function(element) {
if (element === window) {
return Math.max(window.pageYOffset || 0, document.documentElement.scrollTop);
}
return element.scrollTop;
};
var getComputedStyle = Vue.prototype.$isServer ? {} : document.defaultView.getComputedStyle;
var getScrollEventTarget = function(element) {
var currentNode = element;
// bugfix, see http://w3help.org/zh-cn/causes/SD9013 and http://stackoverflow.com/questions/17016740/onscroll-function-is-not-working-for-chrome
while (currentNode && currentNode.tagName !== 'HTML' && currentNode.tagName !== 'BODY' && currentNode.nodeType === 1) {
var overflowY = getComputedStyle(currentNode).overflowY;
if (overflowY === 'scroll' || overflowY === 'auto') {
return currentNode;
}
currentNode = currentNode.parentNode;
}
return window;
};
var getVisibleHeight = function(element) {
if (element === window) {
return document.documentElement.clientHeight;
}
return element.clientHeight;
};
var getElementTop = function(element) {
if (element === window) {
return getScrollTop(window);
}
return element.getBoundingClientRect().top + getScrollTop(window);
};
var isAttached = function(element) {
var currentNode = element.parentNode;
while (currentNode) {
if (currentNode.tagName === 'HTML') {
return true;
}
if (currentNode.nodeType === 11) {
return false;
}
currentNode = currentNode.parentNode;
}
return false;
};
var doBind = function() {
if (this.binded) return; // eslint-disable-line
this.binded = true;
var directive = this;
var element = directive.el;
directive.scrollEventTarget = getScrollEventTarget(element);
directive.scrollListener = throttle(doCheck.bind(directive), 200);
directive.scrollEventTarget.addEventListener('scroll', directive.scrollListener);
var disabledExpr = element.getAttribute('infinite-scroll-disabled');
var disabled = false;
if (disabledExpr) {
this.vm.$watch(disabledExpr, function(value) {
directive.disabled = value;
if (!value && directive.immediateCheck) {
doCheck.call(directive);
}
});
disabled = Boolean(directive.vm[disabledExpr]);
}
directive.disabled = disabled;
var distanceExpr = element.getAttribute('infinite-scroll-distance');
var distance = 0;
if (distanceExpr) {
distance = Number(directive.vm[distanceExpr] || distanceExpr);
if (isNaN(distance)) {
distance = 0;
}
}
directive.distance = distance;
var immediateCheckExpr = element.getAttribute('infinite-scroll-immediate-check');
var immediateCheck = true;
if (immediateCheckExpr) {
immediateCheck = Boolean(directive.vm[immediateCheckExpr]);
}
directive.immediateCheck = immediateCheck;
if (immediateCheck) {
doCheck.call(directive);
}
var eventName = element.getAttribute('infinite-scroll-listen-for-event');
if (eventName) {
directive.vm.$on(eventName, function() {
doCheck.call(directive);
});
}
};
var doCheck = function(force) {
var scrollEventTarget = this.scrollEventTarget;
var element = this.el;
var distance = this.distance;
if (force !== true && this.disabled) return; //eslint-disable-line
var viewportScrollTop = getScrollTop(scrollEventTarget);
var viewportBottom = viewportScrollTop + getVisibleHeight(scrollEventTarget);
var shouldTrigger = false;
if (scrollEventTarget === element) {
shouldTrigger = scrollEventTarget.scrollHeight - viewportBottom <= distance;
} else {
var elementBottom = getElementTop(element) - getElementTop(scrollEventTarget) + element.offsetHeight + viewportScrollTop;
shouldTrigger = viewportBottom + distance >= elementBottom;
}
if (shouldTrigger && this.expression) {
this.expression();
}
};
export default {
bind(el, binding, vnode) {
el[ctx] = {
el,
vm: vnode.context,
expression: binding.value
};
const args = arguments;
var cb = function() {
el[ctx].vm.$nextTick(function() {
if (isAttached(el)) {
doBind.call(el[ctx], args);
}
el[ctx].bindTryCount = 0;
var tryBind = function() {
if (el[ctx].bindTryCount > 10) return; //eslint-disable-line
el[ctx].bindTryCount++;
if (isAttached(el)) {
doBind.call(el[ctx], args);
} else {
setTimeout(tryBind, 50);
}
};
tryBind();
});
};
if (el[ctx].vm._isMounted) {
cb();
return;
}
el[ctx].vm.$on('hook:mounted', cb);
},
unbind(el) {
if (el[ctx] && el[ctx].scrollEventTarget) {
el[ctx].scrollEventTarget.removeEventListener('scroll', el[ctx].scrollListener);
}
}
};
================================================
FILE: packages/infinite-scroll/src/infinite-scroll.js
================================================
import InfiniteScroll from './directive';
import 'mint-ui/src/style/empty.css';
import Vue from 'vue';
const install = function(Vue) {
Vue.directive('InfiniteScroll', InfiniteScroll);
};
if (!Vue.prototype.$isServer && window.Vue) {
window.infiniteScroll = InfiniteScroll;
Vue.use(install); // eslint-disable-line
}
InfiniteScroll.install = install;
export default InfiniteScroll;
================================================
FILE: packages/lazyload/README.md
================================================
# mint-lazyload
================================================
FILE: packages/lazyload/index.js
================================================
import 'mint-ui/src/style/empty.css';
export { default } from './src/lazyload.js';
================================================
FILE: packages/lazyload/src/lazyload.js
================================================
import Lazyload from 'vue-lazyload';
import 'mint-ui/src/style/empty.css';
export default Lazyload;
================================================
FILE: packages/loadmore/README.md
================================================
# Overview
mint-loadmore is a two-direction mobile pull-to-refresh component for vue.js.
# Installation
```bash
$ npm install mint-loadmore
```
# Usage
Import `mint-loadmore` to your project:
```Javascript
require('mint-loadmore/lib/index.css');
// ES6 mudule
import Loadmore from 'mint-loadmore';
// CommonJS
const Loadmore = require('mint-loadmore').default;
```
Register component:
```Javascript
Vue.component('loadmore', Loadmore);
```
Then use it:
```html
...
```
# Example
Visit [this page](http://leopoldthecoder.github.io/Demos/vue-loadmore/index.html) using your mobile device.
```html
{{ item }}
{{ item }}
↓Loading...
```
For upward direction, pull the component `topDistance` pixels away from the top and then release it, the function you appointed as `top-method` will run:
```Javascript
loadTop(id) {
...// load more data
this.$broadcast('onTopLoaded', id);
}
```
At the end of your `top-method`, don't forget to broadcast the `onTopLoaded` event so that `mint-loadmore` removes `topLoadingText`. Note that a parameter called `id` is passed to `loadTop` and `onTopLoaded`. This is because after the top data is loaded, some reposition work is performed inside a `mint-loadmore` instance, and `id` simply tells the component which instance should be repositioned. You don't need to do anything more than passing `id` to `onTopLoaded` just as shown above.
For downward direction, things are similar. To invoke `bottom-method`, just pull the component `bottomDistance` pixels away from the bottom and then release it.
```Javascript
loadBottom(id) {
...// load more data
this.allLoaded = true;// if all data are loaded
this.$broadcast('onBottomLoaded', id);
}
```
Remember to set `bottom-all-loaded` to `true` after all data are loaded. And of course broadcast `onBottomLoaded` with `id`.
You can customize the top and bottom DOM using an HTML template. For example, to customize the top DOM, you'll need to add a variable that syncs with `top-status` on `loadmore` tag, and then write your template with a `slot` attribute set to `top` and `class` set to `mint-loadmore-top`. `top-status` has three possible values that indicates which status the component is at:
* `pull` if the component is being pulled yet not ready to drop (top distance is within the distance threshold defined by `topDistance`)
* `drop` if the component is ready to drop
* `loading` if `topMethod` is running
And of course, if a top HTMl template is given, `topPullText`, `topDropText` and `topLoadingText` are all unnecessary.
Don't need to load data from upward direction? Simply omit the `topMethod` attribute. Same goes to downward.
Upon loaded, `loadmore` will automatically check if it is tall enough to fill its container. If not, `bottom-method` will run until its container is filled. Turn off `auto-fill` if you'd rather handle this manually.
# API
| Option | Description | Value | Default |
|-------------------|------------------------------------------------------------------|----------|-------------|
| autoFill | if `true`, `loadmore` will check and fill its container | Boolean | true |
| topPullText | top text when the component is being pulled down | String | '下拉刷新' |
| topDropText | top text when the component is ready to drop | String | '释放更新' |
| topLoadingText | top text while `topMethod` is running | String | '加载中...' |
| topDistance | distance threshold that triggers `topMethod` | Number | 70 |
| topMethod | upward load-more function | Function | |
| bottomPullText | bottom text when the component is being pulled up | String | '上拉刷新' |
| bottomDropText | bottom text when the component is ready to drop | String | '释放更新' |
| bottomLoadingText | bottom text while `bottomMethod` is running | String | '加载中...' |
| bottomDistance | distance threshold that triggers `bottomMethod` | Number | 70 |
| bottomMethod | downward load-more function | Function | |
| bottomAllLoaded | if `true`, `bottomMethod` can no longer be triggered | Boolean | false |
# License
MIT
================================================
FILE: packages/loadmore/cooking.conf.js
================================================
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, 'index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'MintLoadmore',
extractCSS: 'style.css',
extends: config.extends,
alias: config.alias,
externals: config.externals
});
module.exports = cooking.resolve();
================================================
FILE: packages/loadmore/index.js
================================================
export { default } from './src/loadmore.vue';
================================================
FILE: packages/loadmore/package.json
================================================
{
"name": "mint-loadmore",
"description": "",
"version": "0.1.2",
"main": "lib/index.js",
"author": "elemefe",
"homepage": "https://github.com/ElemeFE/mint-ui",
"license": "MIT",
"repository": "https://github.com/ElemeFE/mint-ui/tree/master/components/mint-loadmore",
"dependencies": {}
}
================================================
FILE: packages/loadmore/src/loadmore.vue
================================================
{{ topText }}
{{ bottomText }}
================================================
FILE: packages/message-box/README.md
================================================
# mint-message-box
================================================
FILE: packages/message-box/index.js
================================================
export { default } from './src/message-box.js';
================================================
FILE: packages/message-box/src/message-box.js
================================================
var CONFIRM_TEXT = '确定';
var CANCEL_TEXT = '取消';
var defaults = {
title: '提示',
message: '',
type: '',
showInput: false,
showClose: true,
modalFade: false,
lockScroll: false,
closeOnClickModal: true,
inputValue: null,
inputPlaceholder: '',
inputPattern: null,
inputValidator: null,
inputErrorMessage: '',
showConfirmButton: true,
showCancelButton: false,
confirmButtonPosition: 'right',
confirmButtonHighlight: false,
cancelButtonHighlight: false,
confirmButtonText: CONFIRM_TEXT,
cancelButtonText: CANCEL_TEXT,
confirmButtonClass: '',
cancelButtonClass: ''
};
import Vue from 'vue';
import msgboxVue from './message-box.vue';
var merge = function(target) {
for (var i = 1, j = arguments.length; i < j; i++) {
var source = arguments[i];
for (var prop in source) {
if (source.hasOwnProperty(prop)) {
var value = source[prop];
if (value !== undefined) {
target[prop] = value;
}
}
}
}
return target;
};
var MessageBoxConstructor = Vue.extend(msgboxVue);
var currentMsg, instance;
var msgQueue = [];
const defaultCallback = action => {
if (currentMsg) {
var callback = currentMsg.callback;
if (typeof callback === 'function') {
if (instance.showInput) {
callback(instance.inputValue, action);
} else {
callback(action);
}
}
if (currentMsg.resolve) {
var $type = currentMsg.options.$type;
if ($type === 'confirm' || $type === 'prompt') {
if (action === 'confirm') {
if (instance.showInput) {
currentMsg.resolve({ value: instance.inputValue, action });
} else {
currentMsg.resolve(action);
}
} else if (action === 'cancel' && currentMsg.reject) {
currentMsg.reject(action);
}
} else {
currentMsg.resolve(action);
}
}
}
};
var initInstance = function() {
instance = new MessageBoxConstructor({
el: document.createElement('div')
});
instance.callback = defaultCallback;
};
var showNextMsg = function() {
if (!instance) {
initInstance();
}
if (!instance.value || instance.closeTimer) {
if (msgQueue.length > 0) {
currentMsg = msgQueue.shift();
var options = currentMsg.options;
for (var prop in options) {
if (options.hasOwnProperty(prop)) {
instance[prop] = options[prop];
}
}
if (options.callback === undefined) {
instance.callback = defaultCallback;
}
['modal', 'showClose', 'closeOnClickModal', 'closeOnPressEscape'].forEach(prop => {
if (instance[prop] === undefined) {
instance[prop] = true;
}
});
document.body.appendChild(instance.$el);
Vue.nextTick(() => {
instance.value = true;
});
}
}
};
var MessageBox = function(options, callback) {
if (typeof options === 'string') {
options = {
title: options
};
if (arguments[1]) {
options.message = arguments[1];
}
if (arguments[2]) {
options.type = arguments[2];
}
} else if (options.callback && !callback) {
callback = options.callback;
}
if (typeof Promise !== 'undefined') {
return new Promise(function(resolve, reject) { // eslint-disable-line
msgQueue.push({
options: merge({}, defaults, MessageBox.defaults || {}, options),
callback: callback,
resolve: resolve,
reject: reject
});
showNextMsg();
});
} else {
msgQueue.push({
options: merge({}, defaults, MessageBox.defaults || {}, options),
callback: callback
});
showNextMsg();
}
};
MessageBox.setDefaults = function(defaults) {
MessageBox.defaults = defaults;
};
MessageBox.alert = function(message, title, options) {
if (typeof title === 'object') {
options = title;
title = '';
}
return MessageBox(merge({
title: title,
message: message,
$type: 'alert',
closeOnPressEscape: false,
closeOnClickModal: false
}, options));
};
MessageBox.confirm = function(message, title, options) {
if (typeof title === 'object') {
options = title;
title = '';
}
return MessageBox(merge({
title: title,
message: message,
$type: 'confirm',
showCancelButton: true
}, options));
};
MessageBox.prompt = function(message, title, options) {
if (typeof title === 'object') {
options = title;
title = '';
}
return MessageBox(merge({
title: title,
message: message,
showCancelButton: true,
showInput: true,
$type: 'prompt'
}, options));
};
MessageBox.close = function() {
if (!instance) return;
instance.value = false;
msgQueue = [];
currentMsg = null;
};
export default MessageBox;
export { MessageBox };
================================================
FILE: packages/message-box/src/message-box.vue
================================================
================================================
FILE: packages/palette-button/README.md
================================================
# Overview
palette-button is a set of buttons that can expand and collapse
# Usage
see example
# Option
- content: the text content of the main button
- offset: the offset arc of the fan-shaped area
- direction: the direction of the fan-shaped area, belongs to one of the ['lt', 't', 'rt', 'r', 'rb', 'b', 'lb', 'l']
- radius: the radius of the fan-shaped area
- mainButtonStyle: set the style of the main button
# Method
- toggle: toggle between expand and collapse
- expand: expand all sub buttons
- collapse: collapse all sub buttons
# Event
- expand: begin expand sub buttons
- expanded: all sub buttons has been expanded
- collapse: begin collapse sub buttons
================================================
FILE: packages/palette-button/cooking.conf.js
================================================
var cooking = require('cooking');
var path = require('path');
cooking.set({
entry: {
index: path.join(__dirname, 'index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'MintPaletteButton',
extractCSS: 'style.css',
extends: ['vue', 'saladcss']
});
cooking.add('resolve.alias', {
'main': path.join(__dirname, '../../src'),
'mint-ui': path.join(__dirname, '..')
});
cooking.add('externals', {
vue: {
root: 'Vue',
commonjs: 'vue',
commonjs2: 'vue',
amd: 'vue'
}
});
module.exports = cooking.resolve();
================================================
FILE: packages/palette-button/index.js
================================================
export { default } from './src/palette-button.vue';
================================================
FILE: packages/palette-button/package.json
================================================
{
"name": "mint-palette-button",
"description": "",
"version": "0.1.0",
"main": "lib/index.js",
"author": "cia.fbi.007@hotmail.com",
"homepage": "https://github.com/ElemeFE/mint-ui",
"license": "MIT",
"repository": "https://github.com/ElemeFE/mint-ui/tree/master/components/palette-button",
"dependencies": {
}
}
================================================
FILE: packages/palette-button/src/palette-button.vue
================================================
{{content}}
================================================
FILE: packages/picker/README.md
================================================
# Overview
vue-picker is a multi-slot picker based on vue.js.
# Install
```Bash
npm install vue-picker --save
```
```JavaScript
require ('mint-picker/lib/index.css');
// ES6 mudule
import Picker from 'mint-picker';
// CommonJS
const Picker = require('mint-picker').default;
```
Register component:
```Javascript
Vue.component('picker', Picker);
```
# Usage
```HTML
```
```JavaScript
export default {
methods: {
onValuesChange(picker, values) {
if (values[0] > values[1]) {
picker.setSlotValue(1, values[0]);
}
}
},
data() {
return {
slots: [
{
flex: 1,
values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
className: 'slot1',
textAlign: 'right'
}, {
divider: true,
content: '-',
className: 'slot2'
}, {
flex: 1,
values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
className: 'slot3',
textAlign: 'left'
}
]
};
}
};
```
# Options
Picker Options:
| Option | Description |
| ----- | ----- |
| slots | Array(default: []) the slot config of picker. |
| showToolbar | Boolean(default: false) show a toolbar on top of picker when showToolbar is true. |
| visibleItemCount | Number(default: 5) visible item count of each slot. |
| rotateEffect | Boolean(default: false) use rotate effect on picker item when rotateEffect is true. |
| itemHeight | Number(default: 36) height of each slot. |
Picker Methods:
- getSlotValue(index): get the value of specific slot.
- setSlotValue(index, value): set the value of specific slot.
- getSlotValues(index): get the values of specific slot.
- setSlotValues(index, values): set the values of specific slot.
- getValues(): values of all slots except divider slots.
- setValues(values): set values(Array) of all slots except divider slots.
Picker Slot Options:
| Option | Description |
| ----- | ----- |
| divider | Boolean(default: false) - just a divider slot when divider is true. |
| content | String - text content in divider slot. |
| values | values of this slot. |
| textAlign | text align of this slot's item. |
| flex | the style.flex value of this slot. |
| className | className of this slot. |
# License
MIT
================================================
FILE: packages/picker/cooking.conf.js
================================================
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, 'index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'MintPicker',
extractCSS: 'style.css',
extends: config.extends,
alias: config.alias,
externals: config.externals
});
module.exports = cooking.resolve();
================================================
FILE: packages/picker/index.js
================================================
export { default } from './src/picker.vue';
================================================
FILE: packages/picker/package.json
================================================
{
"name": "mint-picker",
"description": "",
"version": "0.1.0",
"main": "lib/index.js",
"homepage": "https://github.com/ElemeFE/mint-ui",
"license": "MIT",
"repository": "https://github.com/ElemeFE/mint-ui/tree/master/components/mint-picker",
"keywords": [
"picker",
"multi slots",
"vue"
],
"author": "long.zhang@ele.me",
"dependencies": {
"raf.js": "0.0.4",
"wind-dom": "0.0.3"
}
}
================================================
FILE: packages/picker/src/draggable.js
================================================
let isDragging = false;
import Vue from 'vue';
const supportTouch = !Vue.prototype.$isServer && 'ontouchstart' in window;
export default function(element, options) {
const moveFn = function(event) {
if (options.drag) {
options.drag(supportTouch ? event.changedTouches[0] || event.touches[0] : event);
}
};
const endFn = function(event) {
if (!supportTouch) {
document.removeEventListener('mousemove', moveFn);
document.removeEventListener('mouseup', endFn);
}
document.onselectstart = null;
document.ondragstart = null;
isDragging = false;
if (options.end) {
options.end(supportTouch ? event.changedTouches[0] || event.touches[0] : event);
}
};
element.addEventListener(supportTouch ? 'touchstart' : 'mousedown', function(event) {
if (isDragging) return;
document.onselectstart = function() { return false; };
document.ondragstart = function() { return false; };
if (!supportTouch) {
document.addEventListener('mousemove', moveFn);
document.addEventListener('mouseup', endFn);
}
isDragging = true;
if (options.start) {
event.preventDefault();
options.start(supportTouch ? event.changedTouches[0] || event.touches[0] : event);
}
});
if (supportTouch) {
element.addEventListener('touchmove', moveFn);
element.addEventListener('touchend', endFn);
element.addEventListener('touchcancel', endFn);
}
};
================================================
FILE: packages/picker/src/picker-slot.vue
================================================
带自定义图标