\n\n\n\n\n\n"
},
{
"path": "packages/indicator/README.md",
"content": "# Overview\nvue-indicator is a mobile loading indicator plugin for vue.js.\n\n# Installation\nFirst, install `vue-indicator` from npm:\n```bash\n$ npm install vue-indicator\n```\n\nThen use it:\n```Javascript\n// ES6 mudule\nimport Indicator from 'vue-indicator';\n\n// CommonJS\nconst Indicator = require('vue-indicator').default;\n```\n\n# Usage\nOpen an indicator:\n```Javascript\nIndicator.open();\n```\n\nOpen an indicator with a string:\n```Javascript\nIndicator.open('Loading...');\n```\n\nOpen an indicator with an object:\n```Javascript\nIndicator.open({ text:'Loading...', spinnerType: 'fading-circle' });\n```\n\nThen close it:\n```Javascript\nIndicator.close();\n```\n\n# API\n| Option | Description | Value | Default |\n|-------------|----------------|-------------------------------------------------------------|---------|\n| text | indicator text | String | |\n| spinnerType | spinner type | 'snake', 'fading-circle', 'double-bounce', 'triple-bounce' | 'snake' |\n\n# License\nMIT\n"
},
{
"path": "packages/indicator/cooking.conf.js",
"content": "var cooking = require('cooking');\nvar path = require('path');\nvar config = require('../../build/config');\n\ncooking.set({\n entry: {\n index: path.join(__dirname, 'index.js')\n },\n dist: path.join(__dirname, 'lib'),\n template: false,\n format: 'umd',\n moduleName: 'MintIndicator',\n extractCSS: 'style.css',\n extends: config.extends,\n alias: config.alias,\n externals: config.externals\n});\n\nmodule.exports = cooking.resolve();\n"
},
{
"path": "packages/indicator/index.js",
"content": "import Vue from 'vue';\n\nconst Indicator = Vue.extend(require('./src/indicator.vue'));\nlet instance;\n\nexport default {\n open(options = {}) {\n if (!instance) {\n instance = new Indicator({\n el: document.createElement('div')\n });\n }\n if (instance.visible) return;\n instance.text = typeof options === 'string' ? options : options.text || '';\n instance.spinnerType = options.spinnerType || 'snake';\n document.body.appendChild(instance.$el);\n\n Vue.nextTick(() => {\n instance.visible = true;\n });\n },\n\n close() {\n if (instance) {\n instance.visible = false;\n }\n }\n};\n"
},
{
"path": "packages/indicator/package.json",
"content": "{\n \"name\": \"mint-indicator\",\n \"description\": \"\",\n \"version\": \"0.1.0\",\n \"main\": \"lib/index.js\",\n \"author\": \"elemefe\",\n \"homepage\": \"https://github.com/ElemeFE/mint-ui\",\n \"license\": \"MIT\",\n \"repository\": \"https://github.com/ElemeFE/mint-ui/tree/master/components/mint-indicator\",\n \"dependencies\": {\n }\n}"
},
{
"path": "packages/indicator/src/indicator.vue",
"content": "\n \n
\n
\n \n {{ text }}\n
\n \n
\n \n\n\n\n\n\n"
},
{
"path": "packages/infinite-scroll/README.md",
"content": "# mint-infinite-scroll"
},
{
"path": "packages/infinite-scroll/index.js",
"content": "import 'mint-ui/src/style/empty.css';\nexport { default } from './src/infinite-scroll.js';\n"
},
{
"path": "packages/infinite-scroll/src/directive.js",
"content": "import Vue from 'vue';\nconst ctx = '@@InfiniteScroll';\n\nvar throttle = function(fn, delay) {\n var now, lastExec, timer, context, args; //eslint-disable-line\n\n var execute = function() {\n fn.apply(context, args);\n lastExec = now;\n };\n\n return function() {\n context = this;\n args = arguments;\n\n now = Date.now();\n\n if (timer) {\n clearTimeout(timer);\n timer = null;\n }\n\n if (lastExec) {\n var diff = delay - (now - lastExec);\n if (diff < 0) {\n execute();\n } else {\n timer = setTimeout(() => {\n execute();\n }, diff);\n }\n } else {\n execute();\n }\n };\n};\n\nvar getScrollTop = function(element) {\n if (element === window) {\n return Math.max(window.pageYOffset || 0, document.documentElement.scrollTop);\n }\n\n return element.scrollTop;\n};\n\nvar getComputedStyle = Vue.prototype.$isServer ? {} : document.defaultView.getComputedStyle;\n\nvar getScrollEventTarget = function(element) {\n var currentNode = element;\n // bugfix, see http://w3help.org/zh-cn/causes/SD9013 and http://stackoverflow.com/questions/17016740/onscroll-function-is-not-working-for-chrome\n while (currentNode && currentNode.tagName !== 'HTML' && currentNode.tagName !== 'BODY' && currentNode.nodeType === 1) {\n var overflowY = getComputedStyle(currentNode).overflowY;\n if (overflowY === 'scroll' || overflowY === 'auto') {\n return currentNode;\n }\n currentNode = currentNode.parentNode;\n }\n return window;\n};\n\nvar getVisibleHeight = function(element) {\n if (element === window) {\n return document.documentElement.clientHeight;\n }\n\n return element.clientHeight;\n};\n\nvar getElementTop = function(element) {\n if (element === window) {\n return getScrollTop(window);\n }\n return element.getBoundingClientRect().top + getScrollTop(window);\n};\n\nvar isAttached = function(element) {\n var currentNode = element.parentNode;\n while (currentNode) {\n if (currentNode.tagName === 'HTML') {\n return true;\n }\n if (currentNode.nodeType === 11) {\n return false;\n }\n currentNode = currentNode.parentNode;\n }\n return false;\n};\n\nvar doBind = function() {\n if (this.binded) return; // eslint-disable-line\n this.binded = true;\n\n var directive = this;\n var element = directive.el;\n\n directive.scrollEventTarget = getScrollEventTarget(element);\n directive.scrollListener = throttle(doCheck.bind(directive), 200);\n directive.scrollEventTarget.addEventListener('scroll', directive.scrollListener);\n\n var disabledExpr = element.getAttribute('infinite-scroll-disabled');\n var disabled = false;\n\n if (disabledExpr) {\n this.vm.$watch(disabledExpr, function(value) {\n directive.disabled = value;\n if (!value && directive.immediateCheck) {\n doCheck.call(directive);\n }\n });\n disabled = Boolean(directive.vm[disabledExpr]);\n }\n directive.disabled = disabled;\n\n var distanceExpr = element.getAttribute('infinite-scroll-distance');\n var distance = 0;\n if (distanceExpr) {\n distance = Number(directive.vm[distanceExpr] || distanceExpr);\n if (isNaN(distance)) {\n distance = 0;\n }\n }\n directive.distance = distance;\n\n var immediateCheckExpr = element.getAttribute('infinite-scroll-immediate-check');\n var immediateCheck = true;\n if (immediateCheckExpr) {\n immediateCheck = Boolean(directive.vm[immediateCheckExpr]);\n }\n directive.immediateCheck = immediateCheck;\n\n if (immediateCheck) {\n doCheck.call(directive);\n }\n\n var eventName = element.getAttribute('infinite-scroll-listen-for-event');\n if (eventName) {\n directive.vm.$on(eventName, function() {\n doCheck.call(directive);\n });\n }\n};\n\nvar doCheck = function(force) {\n var scrollEventTarget = this.scrollEventTarget;\n var element = this.el;\n var distance = this.distance;\n\n if (force !== true && this.disabled) return; //eslint-disable-line\n var viewportScrollTop = getScrollTop(scrollEventTarget);\n var viewportBottom = viewportScrollTop + getVisibleHeight(scrollEventTarget);\n\n var shouldTrigger = false;\n\n if (scrollEventTarget === element) {\n shouldTrigger = scrollEventTarget.scrollHeight - viewportBottom <= distance;\n } else {\n var elementBottom = getElementTop(element) - getElementTop(scrollEventTarget) + element.offsetHeight + viewportScrollTop;\n\n shouldTrigger = viewportBottom + distance >= elementBottom;\n }\n\n if (shouldTrigger && this.expression) {\n this.expression();\n }\n};\n\nexport default {\n bind(el, binding, vnode) {\n el[ctx] = {\n el,\n vm: vnode.context,\n expression: binding.value\n };\n const args = arguments;\n var cb = function() {\n el[ctx].vm.$nextTick(function() {\n if (isAttached(el)) {\n doBind.call(el[ctx], args);\n }\n\n el[ctx].bindTryCount = 0;\n\n var tryBind = function() {\n if (el[ctx].bindTryCount > 10) return; //eslint-disable-line\n el[ctx].bindTryCount++;\n if (isAttached(el)) {\n doBind.call(el[ctx], args);\n } else {\n setTimeout(tryBind, 50);\n }\n };\n\n tryBind();\n });\n };\n if (el[ctx].vm._isMounted) {\n cb();\n return;\n }\n el[ctx].vm.$on('hook:mounted', cb);\n },\n\n unbind(el) {\n if (el[ctx] && el[ctx].scrollEventTarget) {\n el[ctx].scrollEventTarget.removeEventListener('scroll', el[ctx].scrollListener);\n }\n }\n};\n"
},
{
"path": "packages/infinite-scroll/src/infinite-scroll.js",
"content": "import InfiniteScroll from './directive';\nimport 'mint-ui/src/style/empty.css';\nimport Vue from 'vue';\n\nconst install = function(Vue) {\n Vue.directive('InfiniteScroll', InfiniteScroll);\n};\n\nif (!Vue.prototype.$isServer && window.Vue) {\n window.infiniteScroll = InfiniteScroll;\n Vue.use(install); // eslint-disable-line\n}\n\nInfiniteScroll.install = install;\nexport default InfiniteScroll;\n"
},
{
"path": "packages/lazyload/README.md",
"content": "# mint-lazyload"
},
{
"path": "packages/lazyload/index.js",
"content": "import 'mint-ui/src/style/empty.css';\nexport { default } from './src/lazyload.js';\n"
},
{
"path": "packages/lazyload/src/lazyload.js",
"content": "import Lazyload from 'vue-lazyload';\nimport 'mint-ui/src/style/empty.css';\n\nexport default Lazyload;\n"
},
{
"path": "packages/loadmore/README.md",
"content": "# Overview\nmint-loadmore is a two-direction mobile pull-to-refresh component for vue.js.\n\n# Installation\n```bash\n$ npm install mint-loadmore\n```\n\n# Usage\nImport `mint-loadmore` to your project:\n```Javascript\nrequire('mint-loadmore/lib/index.css');\n\n// ES6 mudule\nimport Loadmore from 'mint-loadmore';\n\n// CommonJS\nconst Loadmore = require('mint-loadmore').default;\n```\n\nRegister component:\n```Javascript\nVue.component('loadmore', Loadmore);\n```\n\nThen use it:\n```html\n\n ...\n\n```\n\n# Example\nVisit [this page](http://leopoldthecoder.github.io/Demos/vue-loadmore/index.html) using your mobile device.\n```html\n\n
\n
{{ item }}
\n
\n\n\n
\n
{{ item }}
\n
\n
\n ↓\n Loading...\n
\n\n```\nFor upward direction, pull the component `topDistance` pixels away from the top and then release it, the function you appointed as `top-method` will run:\n```Javascript\nloadTop(id) {\n ...// load more data\n this.$broadcast('onTopLoaded', id);\n}\n```\nAt 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.\n\nFor downward direction, things are similar. To invoke `bottom-method`, just pull the component `bottomDistance` pixels away from the bottom and then release it.\n```Javascript\nloadBottom(id) {\n ...// load more data\n this.allLoaded = true;// if all data are loaded\n this.$broadcast('onBottomLoaded', id);\n}\n```\nRemember to set `bottom-all-loaded` to `true` after all data are loaded. And of course broadcast `onBottomLoaded` with `id`.\n\nYou 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:\n* `pull` if the component is being pulled yet not ready to drop (top distance is within the distance threshold defined by `topDistance`)\n* `drop` if the component is ready to drop\n* `loading` if `topMethod` is running\n\nAnd of course, if a top HTMl template is given, `topPullText`, `topDropText` and `topLoadingText` are all unnecessary.\n\nDon't need to load data from upward direction? Simply omit the `topMethod` attribute. Same goes to downward.\n\nUpon 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.\n\n# API\n| Option | Description | Value | Default |\n|-------------------|------------------------------------------------------------------|----------|-------------|\n| autoFill | if `true`, `loadmore` will check and fill its container | Boolean | true |\n| topPullText | top text when the component is being pulled down | String | '下拉刷新' |\n| topDropText | top text when the component is ready to drop | String | '释放更新' |\n| topLoadingText | top text while `topMethod` is running | String | '加载中...' |\n| topDistance | distance threshold that triggers `topMethod` | Number | 70 |\n| topMethod | upward load-more function | Function | |\n| bottomPullText | bottom text when the component is being pulled up | String | '上拉刷新' |\n| bottomDropText | bottom text when the component is ready to drop | String | '释放更新' |\n| bottomLoadingText | bottom text while `bottomMethod` is running | String | '加载中...' |\n| bottomDistance | distance threshold that triggers `bottomMethod` | Number | 70 |\n| bottomMethod | downward load-more function | Function | |\n| bottomAllLoaded | if `true`, `bottomMethod` can no longer be triggered | Boolean | false |\n\n# License\nMIT\n"
},
{
"path": "packages/loadmore/cooking.conf.js",
"content": "var cooking = require('cooking');\nvar path = require('path');\nvar config = require('../../build/config');\n\ncooking.set({\n entry: {\n index: path.join(__dirname, 'index.js')\n },\n dist: path.join(__dirname, 'lib'),\n template: false,\n format: 'umd',\n moduleName: 'MintLoadmore',\n extractCSS: 'style.css',\n extends: config.extends,\n alias: config.alias,\n externals: config.externals\n});\n\nmodule.exports = cooking.resolve();\n"
},
{
"path": "packages/loadmore/index.js",
"content": "export { default } from './src/loadmore.vue';\n"
},
{
"path": "packages/loadmore/package.json",
"content": "{\n \"name\": \"mint-loadmore\",\n \"description\": \"\",\n \"version\": \"0.1.2\",\n \"main\": \"lib/index.js\",\n \"author\": \"elemefe\",\n \"homepage\": \"https://github.com/ElemeFE/mint-ui\",\n \"license\": \"MIT\",\n \"repository\": \"https://github.com/ElemeFE/mint-ui/tree/master/components/mint-loadmore\",\n \"dependencies\": {}\n}\n"
},
{
"path": "packages/loadmore/src/loadmore.vue",
"content": "\n
\n\n\n\n\n\n"
},
{
"path": "packages/palette-button/README.md",
"content": "# Overview\npalette-button is a set of buttons that can expand and collapse\n\n# Usage\n\nsee example\n\n# Option\n- content: the text content of the main button\n- offset: the offset arc of the fan-shaped area\n- direction: the direction of the fan-shaped area, belongs to one of the ['lt', 't', 'rt', 'r', 'rb', 'b', 'lb', 'l']\n- radius: the radius of the fan-shaped area\n- mainButtonStyle: set the style of the main button\n\n# Method\n- toggle: toggle between expand and collapse\n- expand: expand all sub buttons\n- collapse: collapse all sub buttons\n\n# Event\n- expand: begin expand sub buttons\n- expanded: all sub buttons has been expanded\n- collapse: begin collapse sub buttons"
},
{
"path": "packages/palette-button/cooking.conf.js",
"content": "var cooking = require('cooking');\nvar path = require('path');\n\ncooking.set({\n entry: {\n index: path.join(__dirname, 'index.js')\n },\n dist: path.join(__dirname, 'lib'),\n template: false,\n format: 'umd',\n moduleName: 'MintPaletteButton',\n extractCSS: 'style.css',\n\n extends: ['vue', 'saladcss']\n});\n\ncooking.add('resolve.alias', {\n 'main': path.join(__dirname, '../../src'),\n 'mint-ui': path.join(__dirname, '..')\n});\n\ncooking.add('externals', {\n vue: {\n root: 'Vue',\n commonjs: 'vue',\n commonjs2: 'vue',\n amd: 'vue'\n }\n});\n\nmodule.exports = cooking.resolve();\n"
},
{
"path": "packages/palette-button/index.js",
"content": "export { default } from './src/palette-button.vue';\n"
},
{
"path": "packages/palette-button/package.json",
"content": "{\n \"name\": \"mint-palette-button\",\n \"description\": \"\",\n \"version\": \"0.1.0\",\n \"main\": \"lib/index.js\",\n \"author\": \"cia.fbi.007@hotmail.com\",\n \"homepage\": \"https://github.com/ElemeFE/mint-ui\",\n \"license\": \"MIT\",\n \"repository\": \"https://github.com/ElemeFE/mint-ui/tree/master/components/palette-button\",\n \"dependencies\": {\n }\n}"
},
{
"path": "packages/palette-button/src/palette-button.vue",
"content": "\n
\n
\n \n
\n
\n {{content}}\n
\n
\n\n\n\n\n\n"
},
{
"path": "packages/picker/README.md",
"content": "# Overview\nvue-picker is a multi-slot picker based on vue.js.\n\n# Install\n\n```Bash\nnpm install vue-picker --save\n```\n\n```JavaScript\nrequire ('mint-picker/lib/index.css');\n\n// ES6 mudule\nimport Picker from 'mint-picker';\n\n// CommonJS\nconst Picker = require('mint-picker').default;\n```\nRegister component:\n```Javascript\nVue.component('picker', Picker);\n```\n\n# Usage\n\n```HTML\n\n \n \n \n\n```\n\n```JavaScript\nexport default {\n methods: {\n onValuesChange(picker, values) {\n if (values[0] > values[1]) {\n picker.setSlotValue(1, values[0]);\n }\n }\n },\n\n data() {\n return {\n slots: [\n {\n flex: 1,\n values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],\n className: 'slot1',\n textAlign: 'right'\n }, {\n divider: true,\n content: '-',\n className: 'slot2'\n }, {\n flex: 1,\n values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],\n className: 'slot3',\n textAlign: 'left'\n }\n ]\n };\n }\n};\n```\n\n# Options\n\nPicker Options:\n\n| Option | Description |\n| ----- | ----- |\n| slots | Array(default: []) the slot config of picker. |\n| showToolbar | Boolean(default: false) show a toolbar on top of picker when showToolbar is true. |\n| visibleItemCount | Number(default: 5) visible item count of each slot. |\n| rotateEffect | Boolean(default: false) use rotate effect on picker item when rotateEffect is true. |\n| itemHeight | Number(default: 36) height of each slot. |\n\nPicker Methods:\n\n- getSlotValue(index): get the value of specific slot.\n- setSlotValue(index, value): set the value of specific slot.\n- getSlotValues(index): get the values of specific slot.\n- setSlotValues(index, values): set the values of specific slot.\n- getValues(): values of all slots except divider slots.\n- setValues(values): set values(Array) of all slots except divider slots.\n\nPicker Slot Options:\n\n| Option | Description |\n| ----- | ----- |\n| divider | Boolean(default: false) - just a divider slot when divider is true. |\n| content | String - text content in divider slot. |\n| values | values of this slot. |\n| textAlign | text align of this slot's item. |\n| flex | the style.flex value of this slot. |\n| className | className of this slot. |\n\n# License\nMIT"
},
{
"path": "packages/picker/cooking.conf.js",
"content": "var cooking = require('cooking');\nvar path = require('path');\nvar config = require('../../build/config');\n\ncooking.set({\n entry: {\n index: path.join(__dirname, 'index.js')\n },\n dist: path.join(__dirname, 'lib'),\n template: false,\n format: 'umd',\n moduleName: 'MintPicker',\n extractCSS: 'style.css',\n extends: config.extends,\n alias: config.alias,\n externals: config.externals\n});\n\nmodule.exports = cooking.resolve();\n"
},
{
"path": "packages/picker/index.js",
"content": "export { default } from './src/picker.vue';\n"
},
{
"path": "packages/picker/package.json",
"content": "{\n \"name\": \"mint-picker\",\n \"description\": \"\",\n \"version\": \"0.1.0\",\n \"main\": \"lib/index.js\",\n \"homepage\": \"https://github.com/ElemeFE/mint-ui\",\n \"license\": \"MIT\",\n \"repository\": \"https://github.com/ElemeFE/mint-ui/tree/master/components/mint-picker\",\n \"keywords\": [\n \"picker\",\n \"multi slots\",\n \"vue\"\n ],\n \"author\": \"long.zhang@ele.me\",\n \"dependencies\": {\n \"raf.js\": \"0.0.4\",\n \"wind-dom\": \"0.0.3\"\n }\n}"
},
{
"path": "packages/picker/src/draggable.js",
"content": "let isDragging = false;\nimport Vue from 'vue';\n\nconst supportTouch = !Vue.prototype.$isServer && 'ontouchstart' in window;\n\nexport default function(element, options) {\n const moveFn = function(event) {\n if (options.drag) {\n options.drag(supportTouch ? event.changedTouches[0] || event.touches[0] : event);\n }\n };\n\n const endFn = function(event) {\n if (!supportTouch) {\n document.removeEventListener('mousemove', moveFn);\n document.removeEventListener('mouseup', endFn);\n }\n document.onselectstart = null;\n document.ondragstart = null;\n\n isDragging = false;\n\n if (options.end) {\n options.end(supportTouch ? event.changedTouches[0] || event.touches[0] : event);\n }\n };\n\n element.addEventListener(supportTouch ? 'touchstart' : 'mousedown', function(event) {\n if (isDragging) return;\n document.onselectstart = function() { return false; };\n document.ondragstart = function() { return false; };\n\n if (!supportTouch) {\n document.addEventListener('mousemove', moveFn);\n document.addEventListener('mouseup', endFn);\n }\n isDragging = true;\n\n if (options.start) {\n event.preventDefault();\n options.start(supportTouch ? event.changedTouches[0] || event.touches[0] : event);\n }\n });\n\n if (supportTouch) {\n element.addEventListener('touchmove', moveFn);\n element.addEventListener('touchend', endFn);\n element.addEventListener('touchcancel', endFn);\n }\n};\n"
},
{
"path": "packages/picker/src/picker-slot.vue",
"content": "\n
![](\"../assets/100x100.png\")
\n 带自定义图标\n