├── tutorial ├── 03.md ├── img │ ├── final.gif │ ├── result01.png │ ├── clearSearchVal.gif │ ├── setSearchList.gif │ └── updateSearchKey.gif ├── 03 │ ├── old.html │ ├── index.html │ └── INFO.md ├── 01.md └── 02.md ├── src ├── vuex │ ├── getters.js │ ├── middlewares.js │ ├── store.js │ ├── mutation-types.js │ ├── modules │ │ ├── searchGroup.js │ │ └── search.js │ └── actions.js ├── assets │ ├── font │ │ ├── roboto │ │ │ ├── Roboto-Bold.eot │ │ │ ├── Roboto-Bold.ttf │ │ │ ├── Roboto-Bold.woff │ │ │ ├── Roboto-Light.eot │ │ │ ├── Roboto-Light.ttf │ │ │ ├── Roboto-Thin.eot │ │ │ ├── Roboto-Thin.ttf │ │ │ ├── Roboto-Thin.woff │ │ │ ├── Roboto-Bold.woff2 │ │ │ ├── Roboto-Light.woff │ │ │ ├── Roboto-Light.woff2 │ │ │ ├── Roboto-Medium.eot │ │ │ ├── Roboto-Medium.ttf │ │ │ ├── Roboto-Medium.woff │ │ │ ├── Roboto-Regular.eot │ │ │ ├── Roboto-Regular.ttf │ │ │ ├── Roboto-Thin.woff2 │ │ │ ├── Roboto-Medium.woff2 │ │ │ ├── Roboto-Regular.woff │ │ │ └── Roboto-Regular.woff2 │ │ ├── iconfont │ │ │ ├── MaterialIcons-Regular.eot │ │ │ ├── MaterialIcons-Regular.ttf │ │ │ ├── MaterialIcons-Regular.woff │ │ │ ├── MaterialIcons-Regular.woff2 │ │ │ └── README.md │ │ └── material-design-icons │ │ │ ├── Material-Design-Icons.eot │ │ │ ├── Material-Design-Icons.ttf │ │ │ ├── Material-Design-Icons.woff │ │ │ └── Material-Design-Icons.woff2 │ ├── js │ │ └── bootstrap-material-design │ │ │ ├── css │ │ │ ├── ripples.min.css.map │ │ │ ├── ripples.min.css │ │ │ ├── ripples.css │ │ │ └── ripples.css.map │ │ │ └── js │ │ │ ├── ripples.min.js │ │ │ ├── ripples.min.js.map │ │ │ ├── material.min.js │ │ │ ├── material.min.js.map │ │ │ ├── ripples.js │ │ │ └── material.js │ └── css │ │ └── md-facefont.css ├── api │ ├── index.js │ └── resource.js ├── config.js ├── index.html ├── components │ ├── List.vue │ ├── App.vue │ ├── SearchGroup.vue │ └── Search.vue └── main.js ├── amd ├── src │ ├── assets │ │ ├── images │ │ │ └── xiaofan.png │ │ ├── font │ │ │ ├── roboto │ │ │ │ ├── Roboto-Bold.eot │ │ │ │ ├── Roboto-Bold.ttf │ │ │ │ ├── Roboto-Bold.woff │ │ │ │ ├── Roboto-Bold.woff2 │ │ │ │ ├── Roboto-Light.eot │ │ │ │ ├── Roboto-Light.ttf │ │ │ │ ├── Roboto-Light.woff │ │ │ │ ├── Roboto-Medium.eot │ │ │ │ ├── Roboto-Medium.ttf │ │ │ │ ├── Roboto-Thin.eot │ │ │ │ ├── Roboto-Thin.ttf │ │ │ │ ├── Roboto-Thin.woff │ │ │ │ ├── Roboto-Thin.woff2 │ │ │ │ ├── Roboto-Light.woff2 │ │ │ │ ├── Roboto-Medium.woff │ │ │ │ ├── Roboto-Medium.woff2 │ │ │ │ ├── Roboto-Regular.eot │ │ │ │ ├── Roboto-Regular.ttf │ │ │ │ ├── Roboto-Regular.woff │ │ │ │ └── Roboto-Regular.woff2 │ │ │ ├── iconfont │ │ │ │ ├── MaterialIcons-Regular.eot │ │ │ │ ├── MaterialIcons-Regular.ttf │ │ │ │ ├── MaterialIcons-Regular.woff │ │ │ │ ├── MaterialIcons-Regular.woff2 │ │ │ │ └── README.md │ │ │ └── material-design-icons │ │ │ │ ├── Material-Design-Icons.eot │ │ │ │ ├── Material-Design-Icons.ttf │ │ │ │ ├── Material-Design-Icons.woff │ │ │ │ └── Material-Design-Icons.woff2 │ │ ├── js │ │ │ ├── bootstrap │ │ │ │ ├── fonts │ │ │ │ │ ├── glyphicons-halflings-regular.eot │ │ │ │ │ ├── glyphicons-halflings-regular.ttf │ │ │ │ │ ├── glyphicons-halflings-regular.woff │ │ │ │ │ └── glyphicons-halflings-regular.woff2 │ │ │ │ ├── js │ │ │ │ │ └── npm.js │ │ │ │ └── css │ │ │ │ │ └── bootstrap-theme.min.css.map │ │ │ └── bootstrap-material-design │ │ │ │ ├── css │ │ │ │ ├── ripples.min.css.map │ │ │ │ ├── ripples.min.css │ │ │ │ ├── ripples.css │ │ │ │ └── ripples.css.map │ │ │ │ └── js │ │ │ │ ├── ripples.min.js │ │ │ │ ├── ripples.min.js.map │ │ │ │ ├── material.min.js │ │ │ │ ├── material.min.js.map │ │ │ │ ├── ripples.js │ │ │ │ └── material.js │ │ └── css │ │ │ └── md-facefont.css │ ├── vuex │ │ ├── getters.js │ │ ├── store.js │ │ ├── mutation-types.js │ │ ├── modules │ │ │ ├── search.js │ │ │ └── searchGroup.js │ │ └── actions.js │ ├── component │ │ ├── List.js │ │ ├── App.js │ │ ├── SearchGroup.js │ │ └── Search.js │ ├── main.js │ ├── config.js │ ├── api │ │ └── index.js │ ├── lib │ │ └── vuex.min.js │ └── require.js └── index.html ├── .babelrc ├── webpack.config.js ├── index.html ├── server.js ├── package.json ├── README.md ├── webpack.config.dev.js ├── gulpfile.babel.js ├── webpack.config.prod.js └── .eslintrc /tutorial/03.md: -------------------------------------------------------------------------------- 1 | # 注意事项 TODOS -------------------------------------------------------------------------------- /tutorial/img/final.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/tutorial/img/final.gif -------------------------------------------------------------------------------- /tutorial/img/result01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/tutorial/img/result01.png -------------------------------------------------------------------------------- /src/vuex/getters.js: -------------------------------------------------------------------------------- 1 | export const isEmptySearchKey = (store) => { 2 | return store.search.searchKey !== "" 3 | } -------------------------------------------------------------------------------- /tutorial/img/clearSearchVal.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/tutorial/img/clearSearchVal.gif -------------------------------------------------------------------------------- /tutorial/img/setSearchList.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/tutorial/img/setSearchList.gif -------------------------------------------------------------------------------- /amd/src/assets/images/xiaofan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/amd/src/assets/images/xiaofan.png -------------------------------------------------------------------------------- /tutorial/img/updateSearchKey.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/tutorial/img/updateSearchKey.gif -------------------------------------------------------------------------------- /src/assets/font/roboto/Roboto-Bold.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/src/assets/font/roboto/Roboto-Bold.eot -------------------------------------------------------------------------------- /src/assets/font/roboto/Roboto-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/src/assets/font/roboto/Roboto-Bold.ttf -------------------------------------------------------------------------------- /src/assets/font/roboto/Roboto-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/src/assets/font/roboto/Roboto-Bold.woff -------------------------------------------------------------------------------- /src/assets/font/roboto/Roboto-Light.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/src/assets/font/roboto/Roboto-Light.eot -------------------------------------------------------------------------------- /src/assets/font/roboto/Roboto-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/src/assets/font/roboto/Roboto-Light.ttf -------------------------------------------------------------------------------- /src/assets/font/roboto/Roboto-Thin.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/src/assets/font/roboto/Roboto-Thin.eot -------------------------------------------------------------------------------- /src/assets/font/roboto/Roboto-Thin.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/src/assets/font/roboto/Roboto-Thin.ttf -------------------------------------------------------------------------------- /src/assets/font/roboto/Roboto-Thin.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/src/assets/font/roboto/Roboto-Thin.woff -------------------------------------------------------------------------------- /src/assets/font/roboto/Roboto-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/src/assets/font/roboto/Roboto-Bold.woff2 -------------------------------------------------------------------------------- /src/assets/font/roboto/Roboto-Light.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/src/assets/font/roboto/Roboto-Light.woff -------------------------------------------------------------------------------- /src/assets/font/roboto/Roboto-Light.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/src/assets/font/roboto/Roboto-Light.woff2 -------------------------------------------------------------------------------- /src/assets/font/roboto/Roboto-Medium.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/src/assets/font/roboto/Roboto-Medium.eot -------------------------------------------------------------------------------- /src/assets/font/roboto/Roboto-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/src/assets/font/roboto/Roboto-Medium.ttf -------------------------------------------------------------------------------- /src/assets/font/roboto/Roboto-Medium.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/src/assets/font/roboto/Roboto-Medium.woff -------------------------------------------------------------------------------- /src/assets/font/roboto/Roboto-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/src/assets/font/roboto/Roboto-Regular.eot -------------------------------------------------------------------------------- /src/assets/font/roboto/Roboto-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/src/assets/font/roboto/Roboto-Regular.ttf -------------------------------------------------------------------------------- /src/assets/font/roboto/Roboto-Thin.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/src/assets/font/roboto/Roboto-Thin.woff2 -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-2"], 3 | "plugins": ["transform-runtime","add-module-exports"], 4 | "comments": false 5 | } 6 | -------------------------------------------------------------------------------- /amd/src/assets/font/roboto/Roboto-Bold.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/amd/src/assets/font/roboto/Roboto-Bold.eot -------------------------------------------------------------------------------- /amd/src/assets/font/roboto/Roboto-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/amd/src/assets/font/roboto/Roboto-Bold.ttf -------------------------------------------------------------------------------- /amd/src/assets/font/roboto/Roboto-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/amd/src/assets/font/roboto/Roboto-Bold.woff -------------------------------------------------------------------------------- /amd/src/assets/font/roboto/Roboto-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/amd/src/assets/font/roboto/Roboto-Bold.woff2 -------------------------------------------------------------------------------- /amd/src/assets/font/roboto/Roboto-Light.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/amd/src/assets/font/roboto/Roboto-Light.eot -------------------------------------------------------------------------------- /amd/src/assets/font/roboto/Roboto-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/amd/src/assets/font/roboto/Roboto-Light.ttf -------------------------------------------------------------------------------- /amd/src/assets/font/roboto/Roboto-Light.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/amd/src/assets/font/roboto/Roboto-Light.woff -------------------------------------------------------------------------------- /amd/src/assets/font/roboto/Roboto-Medium.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/amd/src/assets/font/roboto/Roboto-Medium.eot -------------------------------------------------------------------------------- /amd/src/assets/font/roboto/Roboto-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/amd/src/assets/font/roboto/Roboto-Medium.ttf -------------------------------------------------------------------------------- /amd/src/assets/font/roboto/Roboto-Thin.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/amd/src/assets/font/roboto/Roboto-Thin.eot -------------------------------------------------------------------------------- /amd/src/assets/font/roboto/Roboto-Thin.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/amd/src/assets/font/roboto/Roboto-Thin.ttf -------------------------------------------------------------------------------- /amd/src/assets/font/roboto/Roboto-Thin.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/amd/src/assets/font/roboto/Roboto-Thin.woff -------------------------------------------------------------------------------- /amd/src/assets/font/roboto/Roboto-Thin.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/amd/src/assets/font/roboto/Roboto-Thin.woff2 -------------------------------------------------------------------------------- /src/assets/font/roboto/Roboto-Medium.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/src/assets/font/roboto/Roboto-Medium.woff2 -------------------------------------------------------------------------------- /src/assets/font/roboto/Roboto-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/src/assets/font/roboto/Roboto-Regular.woff -------------------------------------------------------------------------------- /src/assets/font/roboto/Roboto-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/src/assets/font/roboto/Roboto-Regular.woff2 -------------------------------------------------------------------------------- /amd/src/assets/font/roboto/Roboto-Light.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/amd/src/assets/font/roboto/Roboto-Light.woff2 -------------------------------------------------------------------------------- /amd/src/assets/font/roboto/Roboto-Medium.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/amd/src/assets/font/roboto/Roboto-Medium.woff -------------------------------------------------------------------------------- /amd/src/assets/font/roboto/Roboto-Medium.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/amd/src/assets/font/roboto/Roboto-Medium.woff2 -------------------------------------------------------------------------------- /amd/src/assets/font/roboto/Roboto-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/amd/src/assets/font/roboto/Roboto-Regular.eot -------------------------------------------------------------------------------- /amd/src/assets/font/roboto/Roboto-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/amd/src/assets/font/roboto/Roboto-Regular.ttf -------------------------------------------------------------------------------- /amd/src/assets/font/roboto/Roboto-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/amd/src/assets/font/roboto/Roboto-Regular.woff -------------------------------------------------------------------------------- /amd/src/assets/font/roboto/Roboto-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/amd/src/assets/font/roboto/Roboto-Regular.woff2 -------------------------------------------------------------------------------- /src/assets/font/iconfont/MaterialIcons-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/src/assets/font/iconfont/MaterialIcons-Regular.eot -------------------------------------------------------------------------------- /src/assets/font/iconfont/MaterialIcons-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/src/assets/font/iconfont/MaterialIcons-Regular.ttf -------------------------------------------------------------------------------- /src/assets/font/iconfont/MaterialIcons-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/src/assets/font/iconfont/MaterialIcons-Regular.woff -------------------------------------------------------------------------------- /src/vuex/middlewares.js: -------------------------------------------------------------------------------- 1 | import createLogger from 'vuex/logger' 2 | 3 | export default process.env.NODE_ENV !== 'production' 4 | ? [createLogger()] 5 | : [] -------------------------------------------------------------------------------- /amd/src/assets/font/iconfont/MaterialIcons-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/amd/src/assets/font/iconfont/MaterialIcons-Regular.eot -------------------------------------------------------------------------------- /amd/src/assets/font/iconfont/MaterialIcons-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/amd/src/assets/font/iconfont/MaterialIcons-Regular.ttf -------------------------------------------------------------------------------- /src/assets/font/iconfont/MaterialIcons-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/src/assets/font/iconfont/MaterialIcons-Regular.woff2 -------------------------------------------------------------------------------- /amd/src/assets/font/iconfont/MaterialIcons-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/amd/src/assets/font/iconfont/MaterialIcons-Regular.woff -------------------------------------------------------------------------------- /amd/src/assets/font/iconfont/MaterialIcons-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/amd/src/assets/font/iconfont/MaterialIcons-Regular.woff2 -------------------------------------------------------------------------------- /src/api/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by on 2016/4/1. 3 | */ 4 | import {searchParamList} from "./resource"; 5 | 6 | export default { 7 | getSearchParamList:searchParamList 8 | } -------------------------------------------------------------------------------- /src/assets/font/material-design-icons/Material-Design-Icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/src/assets/font/material-design-icons/Material-Design-Icons.eot -------------------------------------------------------------------------------- /src/assets/font/material-design-icons/Material-Design-Icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/src/assets/font/material-design-icons/Material-Design-Icons.ttf -------------------------------------------------------------------------------- /src/assets/font/material-design-icons/Material-Design-Icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/src/assets/font/material-design-icons/Material-Design-Icons.woff -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | if(process.env.NODE_ENV === 'production'){ 2 | module.exports = require('./webpack.config.prod') 3 | }else{ 4 | module.exports = require('./webpack.config.dev') 5 | } -------------------------------------------------------------------------------- /amd/src/assets/js/bootstrap/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/amd/src/assets/js/bootstrap/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /amd/src/assets/js/bootstrap/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/amd/src/assets/js/bootstrap/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /src/assets/font/material-design-icons/Material-Design-Icons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/src/assets/font/material-design-icons/Material-Design-Icons.woff2 -------------------------------------------------------------------------------- /amd/src/assets/font/material-design-icons/Material-Design-Icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/amd/src/assets/font/material-design-icons/Material-Design-Icons.eot -------------------------------------------------------------------------------- /amd/src/assets/font/material-design-icons/Material-Design-Icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/amd/src/assets/font/material-design-icons/Material-Design-Icons.ttf -------------------------------------------------------------------------------- /amd/src/assets/font/material-design-icons/Material-Design-Icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/amd/src/assets/font/material-design-icons/Material-Design-Icons.woff -------------------------------------------------------------------------------- /amd/src/assets/font/material-design-icons/Material-Design-Icons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/amd/src/assets/font/material-design-icons/Material-Design-Icons.woff2 -------------------------------------------------------------------------------- /amd/src/assets/js/bootstrap/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/amd/src/assets/js/bootstrap/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /amd/src/assets/js/bootstrap/fonts/glyphicons-halflings-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yelingfeng/vuex-tutorial/HEAD/amd/src/assets/js/bootstrap/fonts/glyphicons-halflings-regular.woff2 -------------------------------------------------------------------------------- /amd/src/vuex/getters.js: -------------------------------------------------------------------------------- 1 | define(function(){ 2 | 3 | return { 4 | isEmptySearchKey : function(store){ 5 | return store.search.searchKey !== "" 6 | } 7 | } 8 | 9 | }); -------------------------------------------------------------------------------- /src/config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by on 2016/4/1. 3 | */ 4 | export const API_ROOT = (process.env.NODE_ENV === 'production') 5 | ?'http://localhost:8400/api' 6 | :'http://localhost:8400/api' 7 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | <%= htmlWebpackPlugin.options.title %> 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/api/resource.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by on 2016/4/1. 3 | */ 4 | import Vue from 'vue' 5 | import VueResource from 'vue-resource' 6 | import {API_ROOT} from '../config' 7 | 8 | Vue.use(VueResource); 9 | // HTTP相关 10 | // Vue.http.options.crossOrigin = true 11 | export const searchParamList = (options) => Vue.http.post(API_ROOT + '/search',options); -------------------------------------------------------------------------------- /amd/src/component/List.js: -------------------------------------------------------------------------------- 1 | 2 | define(function(require){ 3 | var Vue = require("vue"); 4 | return Vue.extend({ 5 | template : "#list-template", 6 | props:['data'], 7 | computed : { 8 | isEmpty : function(){ 9 | return this.data.length == 0 ; 10 | } 11 | } 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/assets/font/iconfont/README.md: -------------------------------------------------------------------------------- 1 | The recommended way to use the Material Icons font is hosted by Google Fonts, 2 | available here: 3 | 4 | ``` 5 | 7 | ``` 8 | 9 | Read more in our full usage guide: 10 | http://google.github.io/material-design-icons/#icon-font-for-the-web 11 | 12 | -------------------------------------------------------------------------------- /amd/src/assets/font/iconfont/README.md: -------------------------------------------------------------------------------- 1 | The recommended way to use the Material Icons font is hosted by Google Fonts, 2 | available here: 3 | 4 | ``` 5 | 7 | ``` 8 | 9 | Read more in our full usage guide: 10 | http://google.github.io/material-design-icons/#icon-font-for-the-web 11 | 12 | -------------------------------------------------------------------------------- /src/vuex/store.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | import search from "./modules/search" 4 | import searchGroup from "./modules/searchGroup" 5 | import middlewares from './middlewares' 6 | 7 | const debug = process.env.NODE_ENV !== 'production' 8 | Vue.use(Vuex) 9 | Vue.config.debug = debug 10 | 11 | export default new Vuex.Store({ 12 | modules: { 13 | search, 14 | searchGroup 15 | }, 16 | strict: debug, 17 | middlewares 18 | }) 19 | -------------------------------------------------------------------------------- /src/vuex/mutation-types.js: -------------------------------------------------------------------------------- 1 | 2 | // 查询组件types 3 | // 查询组件中的 查询信息 4 | export const SEARCH_PARAM_LIST = 'SEARCH_PARAM_LIST' 5 | export const SET_SEARCH_LIST = "SET_SEARCH_LIST" 6 | export const GET_SEARCH_LIST = "GET_SEARCH_LIST" 7 | export const GET_SEARCH_GROUP_DATA = "GET_SEARCH_GROUP_DATA" 8 | 9 | // 设置查询分组值到state 10 | export const SET_SEARCH_GROUP_VAL = 'SET_SEARCH_GROUP_VAL' 11 | export const CLEAR_SEARCH_VAL = "CLEAR_SEARCH_VAL" 12 | export const UPDATE_SEARCH_VAL = "UPDATE_SEARCH_VAL" 13 | -------------------------------------------------------------------------------- /amd/src/vuex/store.js: -------------------------------------------------------------------------------- 1 | 2 | define(function(require){ 3 | 4 | var Vue = require("vue"); 5 | var Vuex = require("vueX"); 6 | var search = require("vuex/modules/search"); 7 | var searchGroup = require("vuex/modules/searchGroup"); 8 | Vue.use(Vuex) 9 | Vue.config.debug = true; 10 | 11 | return new Vuex.Store({ 12 | modules: { 13 | search : search, 14 | searchGroup :searchGroup 15 | }, 16 | strict: true, 17 | middlewares: [Vuex.createLogger] 18 | }) 19 | }) 20 | 21 | -------------------------------------------------------------------------------- /amd/src/vuex/mutation-types.js: -------------------------------------------------------------------------------- 1 | define(function(){ 2 | return { 3 | // 查询组件types 4 | // 查询组件中的 查询信息 5 | SEARCH_PARAM_LIST : 'SEARCH_PARAM_LIST', 6 | SET_SEARCH_LIST : "SET_SEARCH_LIST", 7 | GET_SEARCH_LIST : "GET_SEARCH_LIST", 8 | GET_SEARCH_GROUP_DATA : "GET_SEARCH_GROUP_DATA", 9 | // 设置查询分组值到state 10 | SET_SEARCH_GROUP_VAL : 'SET_SEARCH_GROUP_VAL', 11 | CLEAR_SEARCH_VAL : "CLEAR_SEARCH_VAL", 12 | UPDATE_SEARCH_VAL : "UPDATE_SEARCH_VAL" 13 | } 14 | }); 15 | -------------------------------------------------------------------------------- /amd/src/assets/js/bootstrap/js/npm.js: -------------------------------------------------------------------------------- 1 | // This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment. 2 | require('../../js/transition.js') 3 | require('../../js/alert.js') 4 | require('../../js/button.js') 5 | require('../../js/carousel.js') 6 | require('../../js/collapse.js') 7 | require('../../js/dropdown.js') 8 | require('../../js/modal.js') 9 | require('../../js/tooltip.js') 10 | require('../../js/popover.js') 11 | require('../../js/scrollspy.js') 12 | require('../../js/tab.js') 13 | require('../../js/affix.js') -------------------------------------------------------------------------------- /amd/src/assets/js/bootstrap-material-design/css/ripples.min.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["less/ripples.less"],"names":[],"mappings":"AAAA,YACI,SAAA,SAEJ,kBACI,SAAA,SACA,IAAA,EACA,KAAA,EACA,QAAA,EACA,MAAA,KACA,OAAA,KACA,SAAA,OACA,cAAA,QACA,eAAA,KAEJ,QACI,SAAA,SACA,MAAA,KACA,OAAA,KACA,YAAA,MACA,WAAA,MACA,cAAA,KACA,iBAAA,KACA,iBAAA,gBACA,kBAAA,SAAA,cAAA,SAAA,aAAA,SAAA,UAAA,SACA,yBAAA,IAAA,qBAAA,IAAA,oBAAA,IAAA,iBAAA,IACA,QAAA,EACA,eAAA,KAEJ,kBACI,mBAAA,QAAA,KAAA,QAAA,GAAA,kBAAA,IAAA,wBAAA,IAAA,cAAA,QAAA,KAAA,QAAA,GAAA,aAAA,IAAA,wBAAA,IAAA,WAAA,QAAA,KAAA,QAAA,GAAA,UAAA,IAAA,wBAAA,IACA,QAAA,GAEJ,mBACI,mBAAA,QAAA,IAAA,OAAA,aAAA,cAAA,QAAA,IAAA,OAAA,aAAA,WAAA,QAAA,IAAA,OAAA,aACA,QAAA"} -------------------------------------------------------------------------------- /src/assets/js/bootstrap-material-design/css/ripples.min.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["less/ripples.less"],"names":[],"mappings":"AAAA,YACI,SAAA,SAEJ,kBACI,SAAA,SACA,IAAA,EACA,KAAA,EACA,QAAA,EACA,MAAA,KACA,OAAA,KACA,SAAA,OACA,cAAA,QACA,eAAA,KAEJ,QACI,SAAA,SACA,MAAA,KACA,OAAA,KACA,YAAA,MACA,WAAA,MACA,cAAA,KACA,iBAAA,KACA,iBAAA,gBACA,kBAAA,SAAA,cAAA,SAAA,aAAA,SAAA,UAAA,SACA,yBAAA,IAAA,qBAAA,IAAA,oBAAA,IAAA,iBAAA,IACA,QAAA,EACA,eAAA,KAEJ,kBACI,mBAAA,QAAA,KAAA,QAAA,GAAA,kBAAA,IAAA,wBAAA,IAAA,cAAA,QAAA,KAAA,QAAA,GAAA,aAAA,IAAA,wBAAA,IAAA,WAAA,QAAA,KAAA,QAAA,GAAA,UAAA,IAAA,wBAAA,IACA,QAAA,GAEJ,mBACI,mBAAA,QAAA,IAAA,OAAA,aAAA,cAAA,QAAA,IAAA,OAAA,aAAA,WAAA,QAAA,IAAA,OAAA,aACA,QAAA"} -------------------------------------------------------------------------------- /amd/src/main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by on 2016/3/25. 3 | */ 4 | define(function(require){ 5 | var Vue = require("vue"); 6 | var store = require("vuex/store") 7 | var app = require("component/App") 8 | var $ = require("jquery"); 9 | require("bootstrap") 10 | require("ripples") 11 | require("material") 12 | 13 | Vue.config.debug = true; 14 | Vue.config.devtools = true; 15 | 16 | new Vue({ 17 | el : "body", 18 | store: store, 19 | ready: function(){ 20 | $.material.init(); 21 | }, 22 | components:{ 23 | App: app 24 | } 25 | }); 26 | }); 27 | 28 | 29 | -------------------------------------------------------------------------------- /src/components/List.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | -------------------------------------------------------------------------------- /amd/src/component/App.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by on 2016/3/25. 3 | */ 4 | define(function(require){ 5 | 6 | var Vue = require("vue"); 7 | var searchComponent = require("component/Search"); 8 | var searchList = require("component/List"); 9 | var app = Vue.extend({ 10 | template : "#app-template", 11 | vuex :{ 12 | getters : { 13 | searchResultList: function(store){ 14 | return store.search.searchResultList 15 | } 16 | } 17 | }, 18 | components:{ 19 | searchComponent : searchComponent, 20 | searchList : searchList 21 | } 22 | }); 23 | return app 24 | }); 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/vuex/modules/searchGroup.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by on 2016/4/27. 3 | */ 4 | import { 5 | SET_SEARCH_GROUP_VAL 6 | } from '../mutation-types' 7 | const state = { 8 | // 分组值 9 | searchGroup : "1", 10 | // 查询分组项 11 | searchGroupItem : [ 12 | { 13 | name: "个人", 14 | value: 1 15 | }, { 16 | name: "公司", 17 | value: 2 18 | },{ 19 | name: "国家", 20 | value: 3 21 | } 22 | ] 23 | } 24 | 25 | // mutations 26 | const mutations = { 27 | // 设置查询分组值 28 | [SET_SEARCH_GROUP_VAL] (state, searchGroup) { 29 | state.searchGroup = searchGroup; 30 | }, 31 | 32 | } 33 | export default { 34 | state,mutations 35 | } -------------------------------------------------------------------------------- /src/vuex/modules/search.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by on 2016/4/1. 3 | */ 4 | import { 5 | SET_SEARCH_LIST, 6 | CLEAR_SEARCH_VAL, 7 | UPDATE_SEARCH_VAL 8 | } from '../mutation-types' 9 | 10 | const state = { 11 | // 查询条件 12 | searchKey : "", 13 | // 查询结果 14 | searchResultList : [] 15 | } 16 | 17 | // mutations 18 | const mutations = { 19 | [SET_SEARCH_LIST] (state,list) { 20 | state.searchResultList = list; 21 | }, 22 | [UPDATE_SEARCH_VAL](state , key){ 23 | state.searchKey = key ; 24 | }, 25 | [CLEAR_SEARCH_VAL](state){ 26 | state.searchKey = ""; 27 | state.searchResultList = []; 28 | } 29 | } 30 | 31 | export default { 32 | state, 33 | mutations 34 | } 35 | 36 | 37 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './components/App' 3 | import $ from "jquery" 4 | import store from './vuex/store' 5 | import 'font-awesome/css/font-awesome.css' 6 | import 'bootstrap/dist/css/bootstrap.css' 7 | import './assets/css/md-facefont.css' 8 | import "./assets/js/bootstrap-material-design/css/bootstrap-material-design.css" 9 | import "./assets/js/bootstrap-material-design/css/ripples.min.css" 10 | import "bootstrap/dist/js/bootstrap.min" 11 | import "./assets/js/bootstrap-material-design/js/ripples.min.js" 12 | import "./assets/js/bootstrap-material-design/js/material.min.js" 13 | new Vue({ 14 | el : "body", 15 | store, 16 | components:{ 17 | App 18 | }, 19 | ready(){ 20 | $.material.init() 21 | } 22 | }) 23 | 24 | -------------------------------------------------------------------------------- /amd/src/vuex/modules/search.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by on 2016/4/1. 3 | */ 4 | define(function(require){ 5 | var types = require("vuex/mutation-types"); 6 | var state = { 7 | // 查询条件 8 | searchKey : "", 9 | // 查询结果 10 | searchResultList : [] 11 | } 12 | // mutations 13 | var mutations = {} 14 | 15 | mutations[types.SET_SEARCH_LIST] = function(state,list) { 16 | state.searchResultList = list; 17 | } 18 | mutations[types.UPDATE_SEARCH_VAL] = function(state , key) { 19 | state.searchKey = key ; 20 | } 21 | mutations[types.CLEAR_SEARCH_VAL] = function(state ) { 22 | state.searchKey = ""; 23 | state.searchResultList = []; 24 | } 25 | 26 | return { 27 | state : state, 28 | mutations : mutations 29 | } 30 | }); 31 | 32 | 33 | -------------------------------------------------------------------------------- /src/vuex/actions.js: -------------------------------------------------------------------------------- 1 | import api from "./../api" 2 | import * as types from './mutation-types' 3 | 4 | // 设置查询分组 5 | export const setSearchGroup = ({ dispatch }, group,key) => { 6 | // 设置searchGroup 值 7 | dispatch(types.SET_SEARCH_GROUP_VAL, group) 8 | // 查询结果 9 | searchParamList({dispatch},group,key) 10 | } 11 | 12 | // clear 查询项 13 | export const clearSearchKey = ({dispatch} ) =>{ 14 | dispatch(types.CLEAR_SEARCH_VAL) 15 | } 16 | 17 | // 更新查询项 18 | export const updateSearchKey = ({dispatch},key) =>{ 19 | dispatch(types.UPDATE_SEARCH_VAL,key); 20 | } 21 | 22 | // 查询结果集合 23 | export const searchParamList = ({dispatch},group,key) =>{ 24 | // 根据group和key 查询 25 | api.getSearchParamList({type:group,key:key}).then(reply => { 26 | if(reply.data.result){ 27 | dispatch(types.SET_SEARCH_LIST,reply.data.result); 28 | } 29 | }); 30 | } -------------------------------------------------------------------------------- /amd/src/config.js: -------------------------------------------------------------------------------- 1 | require.config({ 2 | baseUrl : "./src", 3 | paths :{ 4 | jquery:"./lib/jquery.min", 5 | vue:"./lib/vue", 6 | vueResource:"./lib/vue-resource.min", 7 | vueX:"./lib/vuex", 8 | api :"./api/index", 9 | lodash : "./lib/lodash.min", 10 | bootstrap : "./assets/js/bootstrap/js/bootstrap.min", 11 | ripples : "./assets/js/bootstrap-material-design/js/ripples.min", 12 | material:"./assets/js/bootstrap-material-design/js/material.min" 13 | }, 14 | shim : { 15 | bootstrap : ['jquery'], 16 | ripples:['jquery'], 17 | material:['jquery'], 18 | }, 19 | packages: [ 20 | { 21 | name: 'components', 22 | location: 'component', 23 | main: 'components' 24 | }, 25 | { 26 | name : "vuex", 27 | location :"vuex", 28 | main : "vuex" 29 | } 30 | ] 31 | }) 32 | require(["./main"]) -------------------------------------------------------------------------------- /amd/src/vuex/modules/searchGroup.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by on 2016/4/27. 3 | */ 4 | /** 5 | * Created by on 2016/4/1. 6 | */ 7 | define(function(require){ 8 | var types = require("vuex/mutation-types"); 9 | var state = { 10 | // 分组值 11 | searchGroup : 0, 12 | // 查询分组项 13 | searchGroupItem : [ 14 | { 15 | name: "全部", 16 | value: 0 17 | }, 18 | { 19 | name: "分类1", 20 | value: 1 21 | }, { 22 | name: "分类2", 23 | value: 2 24 | },{ 25 | name: "分类3", 26 | value: 3 27 | } 28 | ] 29 | } 30 | // mutations 31 | var mutations = {} 32 | mutations[types.SET_SEARCH_GROUP_VAL] = function(state, searchGroup) { 33 | state.searchGroup = searchGroup; 34 | } 35 | 36 | return { 37 | state : state, 38 | mutations : mutations 39 | } 40 | }); -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var express = require('express'); 3 | var cors = require("cors"); 4 | 5 | var app = new express(); 6 | var port = process.env.PORT || 8400; 7 | app.use(express.static(path.join(__dirname, 'dist'))); 8 | app.use(cors()); 9 | 10 | app.get("/", function(req, res) { 11 | return res.sendFile(__dirname + '/dist/index.html') 12 | }) 13 | 14 | 15 | app.post("/api/search" , function(req, res){ 16 | res.send({ 17 | result :[ 18 | { 19 | "name" : "张三", 20 | "address" : "朝阳区/汇鑫大厦", 21 | 22 | }, 23 | { 24 | "name" : "李四", 25 | "address" : "昌平区天通苑龙德广场", 26 | }, 27 | { 28 | "name" : "王五", 29 | "address" : "通州区富丽华大厦", 30 | } 31 | ] 32 | }); 33 | }) 34 | 35 | 36 | 37 | app.listen(port, function(err) { 38 | if (err) { 39 | console.error(err) 40 | } else { 41 | console.info("==> 🌎 Listening on port %s. Open up http://localhost:%s/ in your browser.", port, port) 42 | } 43 | }) 44 | -------------------------------------------------------------------------------- /src/assets/js/bootstrap-material-design/css/ripples.min.css: -------------------------------------------------------------------------------- 1 | .withripple{position:relative}.ripple-container{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;overflow:hidden;border-radius:inherit;pointer-events:none}.ripple{position:absolute;width:20px;height:20px;margin-left:-10px;margin-top:-10px;border-radius:100%;background-color:#000;background-color:rgba(0,0,0,.05);-webkit-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);-webkit-transform-origin:50%;-ms-transform-origin:50%;-o-transform-origin:50%;transform-origin:50%;opacity:0;pointer-events:none}.ripple.ripple-on{-webkit-transition:opacity .15s ease-in 0s,-webkit-transform .5s cubic-bezier(.4,0,.2,1) .1s;-o-transition:opacity .15s ease-in 0s,-o-transform .5s cubic-bezier(.4,0,.2,1) .1s;transition:opacity .15s ease-in 0s,transform .5s cubic-bezier(.4,0,.2,1) .1s;opacity:.1}.ripple.ripple-out{-webkit-transition:opacity .1s linear 0s!important;-o-transition:opacity .1s linear 0s!important;transition:opacity .1s linear 0s!important;opacity:0} 2 | /*# sourceMappingURL=ripples.min.css.map */ -------------------------------------------------------------------------------- /amd/src/assets/js/bootstrap-material-design/css/ripples.min.css: -------------------------------------------------------------------------------- 1 | .withripple{position:relative}.ripple-container{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;overflow:hidden;border-radius:inherit;pointer-events:none}.ripple{position:absolute;width:20px;height:20px;margin-left:-10px;margin-top:-10px;border-radius:100%;background-color:#000;background-color:rgba(0,0,0,.05);-webkit-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);-webkit-transform-origin:50%;-ms-transform-origin:50%;-o-transform-origin:50%;transform-origin:50%;opacity:0;pointer-events:none}.ripple.ripple-on{-webkit-transition:opacity .15s ease-in 0s,-webkit-transform .5s cubic-bezier(.4,0,.2,1) .1s;-o-transition:opacity .15s ease-in 0s,-o-transform .5s cubic-bezier(.4,0,.2,1) .1s;transition:opacity .15s ease-in 0s,transform .5s cubic-bezier(.4,0,.2,1) .1s;opacity:.1}.ripple.ripple-out{-webkit-transition:opacity .1s linear 0s!important;-o-transition:opacity .1s linear 0s!important;transition:opacity .1s linear 0s!important;opacity:0} 2 | /*# sourceMappingURL=ripples.min.css.map */ -------------------------------------------------------------------------------- /amd/src/vuex/actions.js: -------------------------------------------------------------------------------- 1 | define(function(require){ 2 | var api = require("api"); 3 | var types = require("vuex/mutation-types") 4 | var actions = { 5 | // 设置查询分组 6 | setSearchGroup : function(store,group,key){ 7 | store.dispatch(types.SET_SEARCH_GROUP_VAL, group); 8 | // 查询结果 9 | actions.searchParamList(store,group,key); 10 | }, 11 | // clear 查询项 12 | clearSearchKey : function(store){ 13 | store.dispatch(types.CLEAR_SEARCH_VAL) 14 | }, 15 | // 更新查询项 16 | updateSearchKey : function(store , key){ 17 | store.dispatch(types.UPDATE_SEARCH_VAL,key); 18 | }, 19 | // 查询结果集合 20 | searchParamList : function(store , group ,key){ 21 | var result = api.searchParamList({ 22 | type:group, 23 | key:key 24 | }); 25 | if(result.data){ 26 | store.dispatch(types.SET_SEARCH_LIST,result.data); 27 | } 28 | } 29 | 30 | } 31 | return actions; 32 | }) 33 | -------------------------------------------------------------------------------- /src/components/App.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 36 | 37 | 40 | -------------------------------------------------------------------------------- /amd/src/component/SearchGroup.js: -------------------------------------------------------------------------------- 1 | 2 | define(function(require){ 3 | var actions = require("vuex/actions"); 4 | var Vue = require("vue"); 5 | return Vue.extend({ 6 | template: "#searchgroup-template", 7 | vuex : { 8 | getters : { 9 | searchKey : function(store){ 10 | return store.search.searchKey; 11 | }, 12 | searchGroup : function(store){ 13 | return store.searchGroup.searchGroup 14 | } 15 | }, 16 | actions : { 17 | setSearchGroup :actions.setSearchGroup 18 | } 19 | }, 20 | computed : { 21 | curName : function(){ 22 | let cname ; 23 | this.items.forEach((it) =>{ 24 | if(it.value == this.searchGroup) cname = it.name 25 | }) 26 | return cname 27 | } 28 | }, 29 | methods : { 30 | menuClick : function(it){ 31 | this.setSearchGroup(it.value,this.searchKey) 32 | } 33 | }, 34 | components:{ 35 | }, 36 | props : ['items'] 37 | }) 38 | }) 39 | -------------------------------------------------------------------------------- /tutorial/03/old.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 旧版vuex写法 6 | 7 | 8 | 9 | 10 |
11 | 12 |
13 | 61 | 62 | -------------------------------------------------------------------------------- /src/assets/js/bootstrap-material-design/css/ripples.css: -------------------------------------------------------------------------------- 1 | .withripple { 2 | position: relative; 3 | } 4 | .ripple-container { 5 | position: absolute; 6 | top: 0; 7 | left: 0; 8 | z-index: 1; 9 | width: 100%; 10 | height: 100%; 11 | overflow: hidden; 12 | border-radius: inherit; 13 | pointer-events: none; 14 | } 15 | .ripple { 16 | position: absolute; 17 | width: 20px; 18 | height: 20px; 19 | margin-left: -10px; 20 | margin-top: -10px; 21 | border-radius: 100%; 22 | background-color: #000; 23 | background-color: rgba(0, 0, 0, 0.05); 24 | -webkit-transform: scale(1); 25 | -ms-transform: scale(1); 26 | -o-transform: scale(1); 27 | transform: scale(1); 28 | -webkit-transform-origin: 50%; 29 | -ms-transform-origin: 50%; 30 | -o-transform-origin: 50%; 31 | transform-origin: 50%; 32 | opacity: 0; 33 | pointer-events: none; 34 | } 35 | .ripple.ripple-on { 36 | -webkit-transition: opacity 0.15s ease-in 0s, -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; 37 | -o-transition: opacity 0.15s ease-in 0s, -o-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; 38 | transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; 39 | opacity: 0.1; 40 | } 41 | .ripple.ripple-out { 42 | -webkit-transition: opacity 0.1s linear 0s !important; 43 | -o-transition: opacity 0.1s linear 0s !important; 44 | transition: opacity 0.1s linear 0s !important; 45 | opacity: 0; 46 | } 47 | /*# sourceMappingURL=ripples.css.map */ -------------------------------------------------------------------------------- /amd/src/assets/js/bootstrap-material-design/css/ripples.css: -------------------------------------------------------------------------------- 1 | .withripple { 2 | position: relative; 3 | } 4 | .ripple-container { 5 | position: absolute; 6 | top: 0; 7 | left: 0; 8 | z-index: 1; 9 | width: 100%; 10 | height: 100%; 11 | overflow: hidden; 12 | border-radius: inherit; 13 | pointer-events: none; 14 | } 15 | .ripple { 16 | position: absolute; 17 | width: 20px; 18 | height: 20px; 19 | margin-left: -10px; 20 | margin-top: -10px; 21 | border-radius: 100%; 22 | background-color: #000; 23 | background-color: rgba(0, 0, 0, 0.05); 24 | -webkit-transform: scale(1); 25 | -ms-transform: scale(1); 26 | -o-transform: scale(1); 27 | transform: scale(1); 28 | -webkit-transform-origin: 50%; 29 | -ms-transform-origin: 50%; 30 | -o-transform-origin: 50%; 31 | transform-origin: 50%; 32 | opacity: 0; 33 | pointer-events: none; 34 | } 35 | .ripple.ripple-on { 36 | -webkit-transition: opacity 0.15s ease-in 0s, -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; 37 | -o-transition: opacity 0.15s ease-in 0s, -o-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; 38 | transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; 39 | opacity: 0.1; 40 | } 41 | .ripple.ripple-out { 42 | -webkit-transition: opacity 0.1s linear 0s !important; 43 | -o-transition: opacity 0.1s linear 0s !important; 44 | transition: opacity 0.1s linear 0s !important; 45 | opacity: 0; 46 | } 47 | /*# sourceMappingURL=ripples.css.map */ -------------------------------------------------------------------------------- /src/components/SearchGroup.vue: -------------------------------------------------------------------------------- 1 | 13 | 18 | -------------------------------------------------------------------------------- /amd/src/component/Search.js: -------------------------------------------------------------------------------- 1 | define(function(require){ 2 | var Vue = require("vue"); 3 | var SearchGroup = require("component/SearchGroup"); 4 | var actions = require("vuex/actions") 5 | var getters = require("vuex/getters"); 6 | 7 | return Vue.extend({ 8 | vuex :{ 9 | getters : { 10 | searchGroupItem: function(store){ 11 | return store.searchGroup.searchGroupItem 12 | }, 13 | searchGroup:function(store){ 14 | return store.searchGroup.searchGroup 15 | }, 16 | searchKey : function(store){ 17 | return store.search.searchKey 18 | }, 19 | isEmptySearchKey : getters.isEmptySearchKey 20 | }, 21 | actions: { 22 | searchParamList:actions.searchParamList , 23 | clearSearchKey:actions.clearSearchKey, 24 | updateSearchKey:actions.updateSearchKey 25 | } 26 | }, 27 | methods : { 28 | clearAction:function(){ 29 | this.clearSearchKey() 30 | }, 31 | searchAction:function(e){ 32 | if(this.searchKey.length){ 33 | this.searchParamList(this.searchGroup,this.searchKey) 34 | } 35 | }, 36 | update:function(e){ 37 | this.updateSearchKey(e.target.value) 38 | } 39 | }, 40 | template : "#search-template", 41 | components:{ 42 | searchGroup:SearchGroup 43 | } 44 | }); 45 | }); 46 | 47 | -------------------------------------------------------------------------------- /tutorial/03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 新版vuex写法 6 | 7 | 8 | 9 | 10 |
11 | 66 | 67 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vuex-tutorial", 3 | "version": "1.0.0", 4 | "description": "vuex-tutorial", 5 | "main": "index.js", 6 | "author": "yelingfeng", 7 | "license": "MIT", 8 | "scripts": { 9 | "dev": "gulp serve", 10 | "build": "gulp build" 11 | }, 12 | "dependencies": { 13 | "babel-runtime": "^5.8.0" 14 | }, 15 | "devDependencies": { 16 | "babel-core": "^6.0.0", 17 | "babel-loader": "^6.0.0", 18 | "babel-plugin-add-module-exports": "^0.1.2", 19 | "babel-plugin-transform-runtime": "^6.0.0", 20 | "babel-preset-es2015": "^6.0.0", 21 | "babel-preset-stage-2": "^6.0.0", 22 | "babel-register": "^6.7.2", 23 | "bootstrap": "^3.3.6", 24 | "cors": "^2.7.1", 25 | "cross-env": "^1.0.6", 26 | "css-loader": "^0.23.0", 27 | "del": "^2.2.0", 28 | "eslint": "^2.4.0", 29 | "express": "^4.13.4", 30 | "extract-text-webpack-plugin": "^1.0.1", 31 | "file-loader": "^0.8.4", 32 | "gulp": "^3.9.1", 33 | "gulp-env": "^0.4.0", 34 | "gulp-nodemon": "^2.0.6", 35 | "gulp-sequence": "^0.4.5", 36 | "gulp-util": "^3.0.7", 37 | "html-webpack-plugin": "^2.15.0", 38 | "image-webpack-loader": "^1.6.3", 39 | "jquery": "^3.0", 40 | "json-loader": "^0.5.4", 41 | "lodash": "^4.6.1", 42 | "moment": "^2.13.0", 43 | "open": "0.0.5", 44 | "style-loader": "^0.13.1", 45 | "url-loader": "^0.5.7", 46 | "vue": "^1.0.20", 47 | "vue-hot-reload-api": "^1.2.0", 48 | "vue-html-loader": "^1.0.0", 49 | "vue-loader": "^8.2.1", 50 | "vue-resource": "^0.7.0", 51 | "vue-style-loader": "^1.0.0", 52 | "vue-toastr": "^1.0.3", 53 | "vue-validator": "^2.0.0", 54 | "vuex": "^0.6.2", 55 | "webpack": "^1.12.2", 56 | "webpack-dev-server": "^1.12.0" 57 | } 58 | 59 | } 60 | -------------------------------------------------------------------------------- /amd/src/api/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by on 2016/5/6. 3 | */ 4 | define(function(require){ 5 | 6 | var _ = require("lodash"); 7 | 8 | return { 9 | searchParamList : function(param){ 10 | 11 | var type = param.type ; 12 | var key = param.key ; 13 | 14 | var data = [ 15 | { 16 | "name" : "AA", 17 | "address" : "北京市朝阳区101-0A", 18 | "type" : "1" 19 | }, 20 | { 21 | "name" : "BB", 22 | "address" : "北京市朝阳区101-0B", 23 | "type" : "2" 24 | }, 25 | { 26 | "name" : "CC", 27 | "address" : "北京市朝阳区101-0C", 28 | "type" : "3" 29 | }, 30 | { 31 | "name" : "DD", 32 | "address" : "北京市朝阳区101-0D", 33 | "type" : "3" 34 | }, 35 | { 36 | "name" : "EE", 37 | "address" : "北京市朝阳区101-0E", 38 | "type" : "3" 39 | }, 40 | { 41 | "name" : "FFF", 42 | "address" : "北京市朝阳区101-0F", 43 | "type" : "2" 44 | } 45 | ] 46 | 47 | if(type != null && key !== ""){ 48 | if(type != 0 ){ 49 | var newData = _.chain(data).filter(function(it){ 50 | return it.type == type && it.name.indexOf(key) > -1 ; 51 | }).value(); 52 | data = newData; 53 | } 54 | 55 | } 56 | 57 | 58 | 59 | return { 60 | data :data 61 | } 62 | } 63 | } 64 | 65 | }) -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vuex-tutorial 2 | 3 | > 一个`vuex`教程 主要介绍如何实际操作`vuex` 4 | [demo](http://yelingfeng.github.io/vuex-tutorial ) 5 | 6 | # newList 7 | - [x] [vuex2.x新旧变化整理](/tutorial/03/INFO.md) 8 | - [x] [requirejs快速构建教程](/tutorial/02.md) 9 | - [x] [新增amd版本](https://github.com/yelingfeng/vuex-tutorial/tree/master/amd) 10 | 11 | ## 前言 12 | 13 | 该代码示例使用的vue相关资源 详细看`package.json` 核心(`vue+vuex`) 14 | 其他相关参考[jackblog](https://github.com/jackhutu/jackblog-vue) 工程(使用了该项目的gulp和webpack配置) 15 | 16 | - [x] [Vuejs](https://github.com/vuejs/vue) 17 | - [x] [Vuex](https://github.com/vuejs/vuex) 18 | - [x] [Vue-resource](https://github.com/vuejs/vue-resource) 19 | - [x] [bootstrap-material-design](https://github.com/FezVrasta/bootstrap-material-design) 20 | 21 | # vuex 22 | 23 | 一句话介绍`vuex`是什么,官方说明"一个专门为 `Vue.js` 应用设计的状态管理架构" 24 | 25 | 状态管理: 简单理解就是统一管理和维护各个vue组件的可变化状态(你可以理解成`vue`组件里的某些`data`) 26 | 27 | ## 实战介绍 28 | 完成一个简单搜索查询功能 效果如下 29 | 30 | ![](/tutorial/img/result01.png) 31 | 32 | ## 组件介绍 33 | - `App` 34 | 主程序组件 35 | - `Search` 36 | 搜索框组件 37 | - `SearchGroup` 38 | 分组类型组件 39 | - `List` 40 | 结果集合组件 41 | 42 | ## 组件内actions说明 43 | (这里主要描述调用逻辑 结果都是一个`list`) 44 | 45 | ### App 46 | `App`包含了组件`Search`和`List` 47 | 48 | > searchResultList 返回结果action 直接从`actions`获取放到`list`中 49 | 50 | ### Search 51 | `Search`组件中包含子组件`SearchGroup` 主要包含功能 52 | 53 | > searchAction 54 | 根据key进行查询action 放大镜和回车同时绑定了事件 55 | 56 | > clearAction 57 | 清除key的值action 58 | 59 | ### SearchGroup 60 | 61 | > setSearchGroup 62 | 根据分组值进行查询action 63 | 64 | 65 | # 教程 66 | - [目录结构](/tutorial/01.md) 67 | - [requirejs快速构建教程](/tutorial/02.md) 68 | - [TODOS2](/tutorial/03.md) 69 | 70 | 71 | 72 | # 环境准备 73 | ### 初始化 74 | ``` 75 | $ npm install 76 | ``` 77 | 78 | ### 开发 79 | 启动webpack环境 80 | ``` 81 | npm run dev 82 | ``` 83 | 启动一个express服务器 84 | ``` 85 | node server.js 86 | ``` 87 | ### 构建 88 | ``` 89 | npm run build 90 | ``` 91 | 92 | # License 93 | 94 | MIT 95 | 96 | 97 | -------------------------------------------------------------------------------- /webpack.config.dev.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | var HtmlWebpackPlugin = require('html-webpack-plugin') 4 | var ExtractTextPlugin = require('extract-text-webpack-plugin'); 5 | 6 | module.exports = { 7 | devtool: 'source-map', 8 | debug:true, 9 | entry: [ 10 | 'webpack/hot/only-dev-server', 11 | './src/main' 12 | ], 13 | output: { 14 | path: process.cwd(), 15 | filename: 'bundle.js', 16 | publicPath: '/' 17 | }, 18 | plugins: [ 19 | new webpack.optimize.OccurenceOrderPlugin(), 20 | new webpack.HotModuleReplacementPlugin(), 21 | new webpack.NoErrorsPlugin(), 22 | new HtmlWebpackPlugin({ 23 | title : "vuex-tutorial", 24 | template: path.join(__dirname,'/src/index.html'), 25 | inject: true 26 | }), 27 | new webpack.ProvidePlugin({ 28 | $: "jquery", 29 | jQuery: "jquery", 30 | "window.jQuery": "jquery" 31 | }), 32 | new ExtractTextPlugin('[hash:8].style.css', { allChunks: true }) 33 | ], 34 | module: { 35 | loaders: [ 36 | { 37 | test: /\.vue$/, 38 | loader: 'vue' 39 | }, 40 | { 41 | test: /\.js$/, 42 | loader: 'babel', 43 | exclude: /node_modules|vue\/dist|vue-hot-reload-api|vue-router\/|vue-loader/ 44 | }, 45 | { 46 | test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap' ) 47 | }, 48 | { 49 | test: /\.(jpe?g|png|gif)$/i, 50 | loaders: [ 51 | 'url?limit=10000&name=images/[hash:8].[name].[ext]', 52 | 'image-webpack?{progressive:true, optimizationLevel: 7, interlaced: false, pngquant:{quality: "65-90", speed: 4}}' 53 | ] 54 | },{ 55 | test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 56 | loader: 'url?limit=10000&name=fonts/[hash:8].[name].[ext]' 57 | }] 58 | }, 59 | vue: { 60 | loaders: { 61 | js: 'babel' 62 | } 63 | }, 64 | resolve: { 65 | root: path.resolve(__dirname, 'node_modules'), 66 | extensions: ['','.js','.vue','.scss'] 67 | } 68 | } 69 | 70 | -------------------------------------------------------------------------------- /src/assets/js/bootstrap-material-design/css/ripples.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["/less/ripples.less","ripples.css"],"names":[],"mappings":"AAAA;EACI,mBAAA;CCCH;ADCD;EACI,mBAAA;EACA,OAAA;EACA,QAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,iBAAA;EACA,uBAAA;EACA,qBAAA;CCCH;ADCD;EACI,mBAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,kBAAA;EACA,oBAAA;EACA,uBAAA;EACA,sCAAA;EACA,4BAAA;MAAA,wBAAA;OAAA,uBAAA;UAAA,oBAAA;EACA,8BAAA;MAAA,0BAAA;OAAA,yBAAA;UAAA,sBAAA;EACA,WAAA;EACA,qBAAA;CCCH;ADCD;EACI,uGAAA;OAAA,6FAAA;UAAA,uFAAA;EACA,aAAA;CCCH;ADCD;EACI,sDAAA;OAAA,iDAAA;UAAA,8CAAA;EACA,WAAA;CCCH","file":"ripples.css","sourcesContent":[".withripple {\n position: relative;\n}\n.ripple-container {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n width: 100%;\n height: 100%;\n overflow: hidden;\n border-radius: inherit;\n pointer-events: none;\n}\n.ripple {\n position: absolute;\n width: 20px;\n height: 20px;\n margin-left: -10px;\n margin-top: -10px;\n border-radius: 100%;\n background-color: #000; // fallback color\n background-color: rgba(0,0,0,0.05);\n transform: scale(1);\n transform-origin: 50%;\n opacity: 0;\n pointer-events: none;\n}\n.ripple.ripple-on {\n transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;\n opacity: 0.1;\n}\n.ripple.ripple-out {\n transition: opacity 0.1s linear 0s !important;\n opacity: 0;\n}\n",".withripple {\n position: relative;\n}\n.ripple-container {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n width: 100%;\n height: 100%;\n overflow: hidden;\n border-radius: inherit;\n pointer-events: none;\n}\n.ripple {\n position: absolute;\n width: 20px;\n height: 20px;\n margin-left: -10px;\n margin-top: -10px;\n border-radius: 100%;\n background-color: #000;\n background-color: rgba(0, 0, 0, 0.05);\n transform: scale(1);\n transform-origin: 50%;\n opacity: 0;\n pointer-events: none;\n}\n.ripple.ripple-on {\n transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;\n opacity: 0.1;\n}\n.ripple.ripple-out {\n transition: opacity 0.1s linear 0s !important;\n opacity: 0;\n}\n/*# sourceMappingURL=ripples.css.map */"]} -------------------------------------------------------------------------------- /amd/src/assets/js/bootstrap-material-design/css/ripples.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["/less/ripples.less","ripples.css"],"names":[],"mappings":"AAAA;EACI,mBAAA;CCCH;ADCD;EACI,mBAAA;EACA,OAAA;EACA,QAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,iBAAA;EACA,uBAAA;EACA,qBAAA;CCCH;ADCD;EACI,mBAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,kBAAA;EACA,oBAAA;EACA,uBAAA;EACA,sCAAA;EACA,4BAAA;MAAA,wBAAA;OAAA,uBAAA;UAAA,oBAAA;EACA,8BAAA;MAAA,0BAAA;OAAA,yBAAA;UAAA,sBAAA;EACA,WAAA;EACA,qBAAA;CCCH;ADCD;EACI,uGAAA;OAAA,6FAAA;UAAA,uFAAA;EACA,aAAA;CCCH;ADCD;EACI,sDAAA;OAAA,iDAAA;UAAA,8CAAA;EACA,WAAA;CCCH","file":"ripples.css","sourcesContent":[".withripple {\n position: relative;\n}\n.ripple-container {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n width: 100%;\n height: 100%;\n overflow: hidden;\n border-radius: inherit;\n pointer-events: none;\n}\n.ripple {\n position: absolute;\n width: 20px;\n height: 20px;\n margin-left: -10px;\n margin-top: -10px;\n border-radius: 100%;\n background-color: #000; // fallback color\n background-color: rgba(0,0,0,0.05);\n transform: scale(1);\n transform-origin: 50%;\n opacity: 0;\n pointer-events: none;\n}\n.ripple.ripple-on {\n transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;\n opacity: 0.1;\n}\n.ripple.ripple-out {\n transition: opacity 0.1s linear 0s !important;\n opacity: 0;\n}\n",".withripple {\n position: relative;\n}\n.ripple-container {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n width: 100%;\n height: 100%;\n overflow: hidden;\n border-radius: inherit;\n pointer-events: none;\n}\n.ripple {\n position: absolute;\n width: 20px;\n height: 20px;\n margin-left: -10px;\n margin-top: -10px;\n border-radius: 100%;\n background-color: #000;\n background-color: rgba(0, 0, 0, 0.05);\n transform: scale(1);\n transform-origin: 50%;\n opacity: 0;\n pointer-events: none;\n}\n.ripple.ripple-on {\n transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;\n opacity: 0.1;\n}\n.ripple.ripple-out {\n transition: opacity 0.1s linear 0s !important;\n opacity: 0;\n}\n/*# sourceMappingURL=ripples.css.map */"]} -------------------------------------------------------------------------------- /gulpfile.babel.js: -------------------------------------------------------------------------------- 1 | import path from 'path' 2 | import gulp from 'gulp' 3 | import gutil from 'gulp-util' 4 | import WebpackDevServer from "webpack-dev-server" 5 | import webpack from "webpack" 6 | import del from 'del' 7 | import env from 'gulp-env' 8 | import gulpSequence from 'gulp-sequence' 9 | import nodemon from 'gulp-nodemon' 10 | import open from 'open' 11 | 12 | const DEV_PORT = 5100,PROD_PORT = 8400 13 | gulp.task('serve', cb =>{ 14 | let webpackConfig = require('./webpack.config') 15 | let myConfig = Object.create(webpackConfig) 16 | myConfig.entry.unshift('webpack-dev-server/client?http://localhost:' + DEV_PORT) 17 | new WebpackDevServer(webpack(myConfig), { 18 | noInfo: false, 19 | hot: true, 20 | inline: true, 21 | historyApiFallback: true, 22 | publicPath: myConfig.output.publicPath, 23 | stats: { 24 | colors: true 25 | } 26 | }).listen(DEV_PORT, "localhost", err => { 27 | if(err) throw new gutil.PluginError("webpack-dev-server", err) 28 | gutil.log("[webpack-dev-server]", "==> 🌎 http://localhost:" + DEV_PORT) 29 | open('http://localhost:' + DEV_PORT) 30 | }); 31 | }) 32 | 33 | gulp.task('clean', cb => del([path.join(__dirname, '/dist/*')])) 34 | 35 | gulp.task('set-env-prod', ()=>{ 36 | env({ 37 | vars: { 38 | 'NODE_ENV':'production' 39 | } 40 | }) 41 | }) 42 | 43 | gulp.task('webpack', cb => { 44 | let webpackConfig = require('./webpack.config') 45 | let myConfig = Object.create(webpackConfig) 46 | webpack(myConfig, function(err, stats) { 47 | if(err) throw new gutil.PluginError("webpack", err) 48 | gutil.log("[webpack]", stats.toString({ 49 | // output options 50 | })) 51 | cb() 52 | }) 53 | }) 54 | 55 | gulp.task('webpack:dist',gulpSequence('set-env-prod','webpack')) 56 | 57 | gulp.task('build', gulpSequence('clean','webpack:dist')) 58 | 59 | gulp.task('nodemon', ()=> { 60 | nodemon({ 61 | script: path.join(__dirname,'/server.js'), 62 | ext: 'js', 63 | watch: [ 64 | path.join(__dirname,'/dist') 65 | ], 66 | env: { 'NODE_ENV': 'production','PORT':PROD_PORT } 67 | }) 68 | }) 69 | 70 | gulp.task('serve:dist',gulpSequence('build','nodemon')) -------------------------------------------------------------------------------- /src/components/Search.vue: -------------------------------------------------------------------------------- 1 | 12 | 33 | -------------------------------------------------------------------------------- /webpack.config.prod.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin'); 4 | var HtmlWebpackPlugin = require('html-webpack-plugin'); 5 | 6 | module.exports = { 7 | entry: { 8 | vendor: ['vue','vuex'], 9 | bundle: './src/main' 10 | }, 11 | output: { 12 | path: path.join(__dirname, 'dist'), 13 | filename: '[hash:8].[name].js' 14 | }, 15 | plugins: [ 16 | new webpack.DefinePlugin({ 17 | 'process.env':{ 18 | 'NODE_ENV': JSON.stringify('production') 19 | } 20 | }), 21 | new webpack.optimize.OccurenceOrderPlugin(), 22 | new webpack.optimize.UglifyJsPlugin({ 23 | compress: { warnings: false }, 24 | minimize: true 25 | }), 26 | new webpack.optimize.CommonsChunkPlugin({ 27 | name: "vendor", 28 | //filename:"vendor.js", 29 | minChunks: Infinity //Infinity 30 | }), 31 | new ExtractTextPlugin('[hash:8].style.css', { allChunks: true }), 32 | new HtmlWebpackPlugin({ 33 | title: "vuex-tutorial", 34 | template: path.join(__dirname,'src/index.html'), //模板文件 35 | inject:'body', 36 | hash:false, //为静态资源生成hash值 37 | minify:{ //压缩HTML文件 38 | removeComments:false, //移除HTML中的注释 39 | collapseWhitespace:true //删除空白符与换行符 40 | } 41 | }), 42 | new webpack.ProvidePlugin({ 43 | $: "jquery", 44 | jQuery: "jquery", 45 | "window.jQuery": "jquery" 46 | }) 47 | ], 48 | module: { 49 | loaders: [ 50 | { 51 | test: /\.vue$/, 52 | loader: 'vue' 53 | }, 54 | { 55 | test: /\.js$/, 56 | loader: 'babel', 57 | exclude: /node_modules|vue\/dist|vue-hot-reload-api|vue-router\/|vue-loader/ 58 | }, 59 | { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap' ) }, 60 | //{ test: /\.(css|scss)$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap!sass-loader?sourceMap&includePaths[]=' + path.resolve(__dirname, "./node_modules/compass-mixins/lib") ) }, 61 | { 62 | test: /\.(jpe?g|png|gif)$/i, 63 | loaders: [ 64 | 'url?limit=10000&name=images/[hash:8].[name].[ext]', 65 | 'image-webpack?{progressive:true, optimizationLevel: 7, interlaced: false, pngquant:{quality: "65-90", speed: 4}}' 66 | ] 67 | },{ 68 | test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 69 | loader: 'url?limit=10000&name=fonts/[hash:8].[name].[ext]' 70 | } 71 | 72 | ] 73 | }, 74 | resolve: { 75 | root: path.resolve(__dirname, 'node_modules'), 76 | extensions: ['','.js','.vue','.scss'] 77 | } 78 | } 79 | 80 | -------------------------------------------------------------------------------- /src/assets/js/bootstrap-material-design/js/ripples.min.js: -------------------------------------------------------------------------------- 1 | !function(a,b,c,d){"use strict";function e(b,c){g=this,this.element=a(b),this.options=a.extend({},h,c),this._defaults=h,this._name=f,this.init()}var f="ripples",g=null,h={};e.prototype.init=function(){var c=this.element;c.on("mousedown touchstart",function(d){if(!g.isTouch()||"mousedown"!==d.type){c.find(".ripple-container").length||c.append('
');var e=c.children(".ripple-container"),f=g.getRelY(e,d),h=g.getRelX(e,d);if(f||h){var i=g.getRipplesColor(c),j=a("
");j.addClass("ripple").css({left:h,top:f,"background-color":i}),e.append(j),function(){return b.getComputedStyle(j[0]).opacity}(),g.rippleOn(c,j),setTimeout(function(){g.rippleEnd(j)},500),c.on("mouseup mouseleave touchend",function(){j.data("mousedown","off"),"off"===j.data("animating")&&g.rippleOut(j)})}}})},e.prototype.getNewSize=function(a,b){return Math.max(a.outerWidth(),a.outerHeight())/b.outerWidth()*2.5},e.prototype.getRelX=function(a,b){var c=a.offset();return g.isTouch()?(b=b.originalEvent,1===b.touches.length?b.touches[0].pageX-c.left:!1):b.pageX-c.left},e.prototype.getRelY=function(a,b){var c=a.offset();return g.isTouch()?(b=b.originalEvent,1===b.touches.length?b.touches[0].pageY-c.top:!1):b.pageY-c.top},e.prototype.getRipplesColor=function(a){var c=a.data("ripple-color")?a.data("ripple-color"):b.getComputedStyle(a[0]).color;return c},e.prototype.hasTransitionSupport=function(){var a=c.body||c.documentElement,b=a.style,e=b.transition!==d||b.WebkitTransition!==d||b.MozTransition!==d||b.MsTransition!==d||b.OTransition!==d;return e},e.prototype.isTouch=function(){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)},e.prototype.rippleEnd=function(a){a.data("animating","off"),"off"===a.data("mousedown")&&g.rippleOut(a)},e.prototype.rippleOut=function(a){a.off(),g.hasTransitionSupport()?a.addClass("ripple-out"):a.animate({opacity:0},100,function(){a.trigger("transitionend")}),a.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",function(){a.remove()})},e.prototype.rippleOn=function(a,b){var c=g.getNewSize(a,b);g.hasTransitionSupport()?b.css({"-ms-transform":"scale("+c+")","-moz-transform":"scale("+c+")","-webkit-transform":"scale("+c+")",transform:"scale("+c+")"}).addClass("ripple-on").data("animating","on").data("mousedown","on"):b.animate({width:2*Math.max(a.outerWidth(),a.outerHeight()),height:2*Math.max(a.outerWidth(),a.outerHeight()),"margin-left":-1*Math.max(a.outerWidth(),a.outerHeight()),"margin-top":-1*Math.max(a.outerWidth(),a.outerHeight()),opacity:.2},500,function(){b.trigger("transitionend")})},a.fn.ripples=function(b){return this.each(function(){a.data(this,"plugin_"+f)||a.data(this,"plugin_"+f,new e(this,b))})}}(jQuery,window,document); 2 | //# sourceMappingURL=ripples.min.js.map -------------------------------------------------------------------------------- /amd/src/assets/js/bootstrap-material-design/js/ripples.min.js: -------------------------------------------------------------------------------- 1 | !function(a,b,c,d){"use strict";function e(b,c){g=this,this.element=a(b),this.options=a.extend({},h,c),this._defaults=h,this._name=f,this.init()}var f="ripples",g=null,h={};e.prototype.init=function(){var c=this.element;c.on("mousedown touchstart",function(d){if(!g.isTouch()||"mousedown"!==d.type){c.find(".ripple-container").length||c.append('
');var e=c.children(".ripple-container"),f=g.getRelY(e,d),h=g.getRelX(e,d);if(f||h){var i=g.getRipplesColor(c),j=a("
");j.addClass("ripple").css({left:h,top:f,"background-color":i}),e.append(j),function(){return b.getComputedStyle(j[0]).opacity}(),g.rippleOn(c,j),setTimeout(function(){g.rippleEnd(j)},500),c.on("mouseup mouseleave touchend",function(){j.data("mousedown","off"),"off"===j.data("animating")&&g.rippleOut(j)})}}})},e.prototype.getNewSize=function(a,b){return Math.max(a.outerWidth(),a.outerHeight())/b.outerWidth()*2.5},e.prototype.getRelX=function(a,b){var c=a.offset();return g.isTouch()?(b=b.originalEvent,1===b.touches.length?b.touches[0].pageX-c.left:!1):b.pageX-c.left},e.prototype.getRelY=function(a,b){var c=a.offset();return g.isTouch()?(b=b.originalEvent,1===b.touches.length?b.touches[0].pageY-c.top:!1):b.pageY-c.top},e.prototype.getRipplesColor=function(a){var c=a.data("ripple-color")?a.data("ripple-color"):b.getComputedStyle(a[0]).color;return c},e.prototype.hasTransitionSupport=function(){var a=c.body||c.documentElement,b=a.style,e=b.transition!==d||b.WebkitTransition!==d||b.MozTransition!==d||b.MsTransition!==d||b.OTransition!==d;return e},e.prototype.isTouch=function(){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)},e.prototype.rippleEnd=function(a){a.data("animating","off"),"off"===a.data("mousedown")&&g.rippleOut(a)},e.prototype.rippleOut=function(a){a.off(),g.hasTransitionSupport()?a.addClass("ripple-out"):a.animate({opacity:0},100,function(){a.trigger("transitionend")}),a.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",function(){a.remove()})},e.prototype.rippleOn=function(a,b){var c=g.getNewSize(a,b);g.hasTransitionSupport()?b.css({"-ms-transform":"scale("+c+")","-moz-transform":"scale("+c+")","-webkit-transform":"scale("+c+")",transform:"scale("+c+")"}).addClass("ripple-on").data("animating","on").data("mousedown","on"):b.animate({width:2*Math.max(a.outerWidth(),a.outerHeight()),height:2*Math.max(a.outerWidth(),a.outerHeight()),"margin-left":-1*Math.max(a.outerWidth(),a.outerHeight()),"margin-top":-1*Math.max(a.outerWidth(),a.outerHeight()),opacity:.2},500,function(){b.trigger("transitionend")})},a.fn.ripples=function(b){return this.each(function(){a.data(this,"plugin_"+f)||a.data(this,"plugin_"+f,new e(this,b))})}}(jQuery,window,document); 2 | //# sourceMappingURL=ripples.min.js.map -------------------------------------------------------------------------------- /tutorial/01.md: -------------------------------------------------------------------------------- 1 | # vuex的常用目录结构 2 | ``` 3 | |--modules 4 | |-----saerch.js 5 | |-----searchGrouop.js 6 | |--actions.js 7 | |--getters.js 8 | |--middlewares.js 9 | |--mutation-types.js 10 | |--store.js 11 | ``` 12 | # 各文件使用说明 13 | ## modules 14 | module 也就是`vuex`概念里的`store`,这里模块拆分了 15 | 存放我们实际项目中要使用的`vuex`模块, 一般可以针对组件级别定义. 16 | 例如这里我们定义了`search.js`和`searchGroup.js` 然而module最后会在`store.js`中统一使用 17 | ```js 18 | import search from "./modules/search" 19 | import searchGroup from "./modules/searchGroup" 20 | 21 | export default new Vuex.Store({ 22 | modules: { 23 | search, 24 | searchGroup 25 | } 26 | }) 27 | ``` 28 | 29 | 1. module如果编写 30 | 31 | module里定义`store`和`mutations`。`store`是我们正常要维护的状态数据,`mutatinons`是操作和维护store的处理 32 | 33 | ```js 34 | const state = { 35 | // 查询条件 36 | searchKey : "", 37 | // 查询结果 38 | searchResultList : [] 39 | } 40 | const mutations = { 41 | [SET_SEARCH_LIST] (state,list) { 42 | state.searchResultList = list; 43 | }, 44 | [UPDATE_SEARCH_VAL](state , key){ 45 | state.searchKey = key ; 46 | }, 47 | [CLEAR_SEARCH_VAL](state){ 48 | state.searchKey = ""; 49 | state.searchResultList = []; 50 | } 51 | } 52 | ``` 53 | 54 | ## actions 55 | 这里定义我们vue组件要操作的动作事件, 比如请求一个异步操作,获取其他组件的状态等 56 | 57 | ```js 58 | // actions.js 59 | // 查询结果集合 60 | export const searchParamList = ({dispatch},group,key) =>{ 61 | // 根据group和key 查询 62 | api.getSearchParamList({type:group,key:key}).then(reply => { 63 | if(reply.data.result){ 64 | dispatch(types.SET_SEARCH_LIST,reply.data.result); 65 | } 66 | }); 67 | } 68 | ``` 69 | 70 | ## getters 71 | `getters` 定义公用的getters处理 ,例如正常组件里想`computed`一个状态但在vuex里面不知道怎么处理，就可以在这里处理。 72 | > Getters Must Be Pure 这东西必须是个纯函数 73 | 74 | 这里判断了一下查询框的值有没有, 用于X图标显示 75 | 76 | ```js 77 | // getters.js 78 | export const isEmptySearchKey = (store) => { 79 | return store.search.searchKey !== "" 80 | } 81 | // Search.vue 82 | import {isEmptySearchKey} from "../vuex/getters" 83 | export default{ 84 | vuex: { 85 | getters: { 86 | isEmptySearchKey 87 | }, 88 | actions: { 89 | 90 | } 91 | } 92 | } 93 | 94 | ``` 95 | 96 | ## middlewares 97 | `middlewares`中间件处理的东西，这里主要开发时候在控制台查看一些处理日志， `vuex`本身自带,其他没有研究过。 98 | 99 | ## mutation-types 100 | 定义`mutation`里用到的方法常量值，统一处理在这里，一般都是业务字符串常量。 101 | 102 | ```js 103 | // 设置查询分组值 104 | export const SET_SEARCH_GROUP_VAL = 'SET_SEARCH_GROUP_VAL' 105 | // 清除查询值 106 | export const CLEAR_SEARCH_VAL = "CLEAR_SEARCH_VAL" 107 | // 修改查询值 108 | export const UPDATE_SEARCH_VAL = "UPDATE_SEARCH_VAL" 109 | ``` 110 | 111 | ## store 112 | `store.js`核心文件，这里就是vuex基本的写法了，先引用vue和vuex 然后user(Vuex),把定义好的`modules`,`middlewares`引入进来然后返回一个Vuex.store 113 | ```js 114 | import Vue from 'vue' 115 | import Vuex from 'vuex' 116 | import search from "./modules/search" 117 | import searchGroup from "./modules/searchGroup" 118 | import middlewares from './middlewares' 119 | 120 | const debug = process.env.NODE_ENV !== 'production' 121 | Vue.use(Vuex) 122 | Vue.config.debug = debug 123 | 124 | export default new Vuex.Store({ 125 | modules: { 126 | search, 127 | searchGroup 128 | }, 129 | strict: debug, 130 | middlewares 131 | }) 132 | 133 | ``` 134 | 135 | * strict : 这个属性如果设置true 一旦非mutation地方修改store里的值 就会提示error,意思就别随便动我的状态 136 | -------------------------------------------------------------------------------- /amd/src/assets/js/bootstrap-material-design/js/ripples.min.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["ripples.js"],"names":["$","window","document","undefined","Ripples","element","options","self","this","extend","defaults","_defaults","_name","ripples","init","prototype","$element","on","event","isTouch","type","find","append","$wrapper","children","relY","getRelY","relX","getRelX","rippleColor","getRipplesColor","$ripple","addClass","css","left","top","background-color","getComputedStyle","opacity","rippleOn","setTimeout","rippleEnd","data","rippleOut","getNewSize","Math","max","outerWidth","outerHeight","wrapperOffset","offset","originalEvent","touches","length","pageX","pageY","color","hasTransitionSupport","thisBody","body","documentElement","thisStyle","style","support","transition","WebkitTransition","MozTransition","MsTransition","OTransition","test","navigator","userAgent","off","animate","trigger","remove","size","-ms-transform","-moz-transform","-webkit-transform","transform","width","height","margin-left","margin-top","fn","each","jQuery"],"mappings":"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","file":"ripples.min.js"} -------------------------------------------------------------------------------- /src/assets/js/bootstrap-material-design/js/ripples.min.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["ripples.js"],"names":["$","window","document","undefined","Ripples","element","options","self","this","extend","defaults","_defaults","_name","ripples","init","prototype","$element","on","event","isTouch","type","find","append","$wrapper","children","relY","getRelY","relX","getRelX","rippleColor","getRipplesColor","$ripple","addClass","css","left","top","background-color","getComputedStyle","opacity","rippleOn","setTimeout","rippleEnd","data","rippleOut","getNewSize","Math","max","outerWidth","outerHeight","wrapperOffset","offset","originalEvent","touches","length","pageX","pageY","color","hasTransitionSupport","thisBody","body","documentElement","thisStyle","style","support","transition","WebkitTransition","MozTransition","MsTransition","OTransition","test","navigator","userAgent","off","animate","trigger","remove","size","-ms-transform","-moz-transform","-webkit-transform","transform","width","height","margin-left","margin-top","fn","each","jQuery"],"mappings":"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","file":"ripples.min.js"} -------------------------------------------------------------------------------- /amd/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | vuex-tutorial-amd 6 | 7 | 8 | 9 | 10 | 49 | 50 | 51 | 52 | 53 | 71 | 72 | 73 | 92 | 93 | 94 | 105 | 106 | 118 | 119 | 120 | 121 | 122 | -------------------------------------------------------------------------------- /tutorial/03/INFO.md: -------------------------------------------------------------------------------- 1 | # vuex入门实例(3/3) 2 | 3 | 最后一篇 想写下vuex 2.0以后的变化, 其实严格意义不算入门了 大家随便看看就好 算这个系列的完结吧 ：） 4 | 5 | vuex为了迎合vue2.0的变化 进行了大量的调整和优化 6 | 7 | 先看下尤大2.0的设计 [传送门](https://github.com/vuejs/vuex/issues/236) 8 | 9 | 总结下大概有几点变化 10 | 11 | 12 | ## 1. 更加语义化 13 | 14 | 原文 Terms naming change for better semantics这个语义化说的是触发`action`和`mutation`的API上 15 | 16 | 在使用`action`的时候 我们一般是从vue组件本身`dispatch`派发一个action 这个其实只是一个命令 并没有实际 17 | 改变什么， 而`dispatch`一个`mutation` 其实是改变了vuex本身的数据 所以一般从数据角度理解 这种应该属于事物提交。那么变化之后的命名就是`commit`这样更加语义化 也更好的理解职责 18 | 19 | ### 新的写法 20 | ### dispatch --> Action 21 | ``` javascript 22 | methods:{ 23 | Add : function(){ 24 | this.$store.dispatch('ADD',2).then(function(resp){ 25 | console.log(resp) 26 | }) 27 | } 28 | } 29 | 30 | ``` 31 | ### commit --> Mutation 32 | ``` javascript 33 | actions:{ 34 | "ADD" : function(store , param){ 35 | return new Promise(function(resolve, reject) { 36 | store.commit('ADD',param) 37 | resolve("ok"); 38 | }) 39 | } 40 | } 41 | ``` 42 | 43 | 1.x 写法就是触发`action`和`mutation`都叫`dispatch` 44 | 45 | ``` javascript 46 | ADD: function(store, param ){ 47 | store.dispatch('COMMIT',param) 48 | } 49 | ``` 50 | 51 | ## 2. 更灵活 52 | 53 | 1.x之前的版本action是不定义在vuex里的, 而2.x actions可以直接在store中定义了 也就是可以在store实例中直接dispatch 54 | 55 | ```javascript 56 | var store = new Vuex.Store({ 57 | state: { 58 | messages: 0 59 | }, 60 | mutations:{ 61 | "ADD": function(state, msg) { 62 | state.messages += msg; 63 | } 64 | }, 65 | // action不用再去外面定义 可以直接写在构建参数里 66 | actions:{ 67 | "ADD" : function(store , param){ 68 | store.commit('ADD',param) 69 | }, 70 | } 71 | }) 72 | store.dispatch('ADD',2) 73 | ``` 74 | 75 | 而getter也是如此 在vue中直接取getters 76 | 77 | ```javascript 78 | computed:{ 79 | msg : function(){ 80 | return this.$store.getters.getMessage 81 | } 82 | } 83 | ``` 84 | 85 | 86 | ## 3. Promise Action 87 | 88 | 原文 `Composable Action Flow `直译 `可组合的action流` 89 | 其实这个组合事件流概念 没怎么用过 也不好翻译 我就简单从变化性翻译它 90 | 就是action现在返回了promise 在之前的版本 并没有返回promise 而2.x的源码中已经返回了promise 91 | 所以也就可以支持所谓的Composable Action 92 | 93 | ``` javascript 94 | // action我们定义一个返回promise的add action 95 | actions:{ 96 | "ADD" : function(store , param){ 97 | return new Promise(function(resolve, reject) { 98 | store.commit('ADD',param) 99 | resolve("ok"); 100 | }) 101 | } 102 | } 103 | 104 | // 这里可以在dispatch之后直接处理异步 105 | this.$store.dispatch('ADD',2).then(function(resp){ 106 | console.log(resp) // ok 107 | }) 108 | 109 | 110 | ``` 111 | 112 | 113 | ## 4. MapGetters/ MapActions 114 | 115 | 新版vuex提供了几个封装方法 `mapState`, `mapMutations`, `mapGetters`,`mapActions` 116 | 117 | 这些都是什么鬼呢？ 118 | 119 | 其实如果你用过vuex1.x以下的版本 其实它就是我们vue组件中的`vuex`属性的 换了一种更高逼格写法 120 | 121 | 可以定义一组要获取的actions getters 然后map进来 122 | 123 | ```javascript 124 | // 旧版写法 125 | var App = Vue.extend({ 126 | template:"....", 127 | vuex:{ 128 | getters:{ 129 | msg : function(state){ 130 | return state.messages 131 | } 132 | }, 133 | actions:{ 134 | add :actions.ADD 135 | } 136 | } 137 | }) 138 | 139 | // 新版写法 es5 写法 140 | var App = Vue.extend({ 141 | template:"....", 142 | computed:Vuex.mapGetters({ 143 | msg : 'getMessage' 144 | }), 145 | methods:Vuex.mapGetters({ 146 | add : 'ADD' 147 | }) 148 | }) 149 | ``` 150 | 这种本质跟1.x的`vuex`写法是一样的 内部都是使用vue的`Object.defineProperty`取做响应式 151 | ```javascript 152 | // es6写法 支持rest参数这种写法 也可以直接完全使用map套装注入 153 | import { mapGetters, mapActions } from 'vuex' 154 | export default { 155 | computed: { 156 | someComuted () { … }, 157 | ...mapGetters(['getMessage', 'getName']) 158 | }, 159 | methods: { 160 | someMethod () { … }, 161 | ...mapActions(['ADD','EDIT']) 162 | } 163 | } 164 | 165 | ``` 166 | 167 | ##5. Silent 168 | 169 | 在commit一个mutation的时候 是否触发订阅的插件。 170 | 171 | 默认silent为false 如果silent设置为true 则表示不触发注册的subscribe 172 | 173 | 一般注册的插件包括dev-tools 都不会触发了 174 | 175 | ```javascript 176 | // 实例代码 177 | store.commit('ADD',param,{ silent: true}) 178 | 179 | ``` 180 | 181 | ```javascript 182 | 183 | // 源码 184 | if (!options || !options.silent) { 185 | this._subscribers.forEach(sub => sub(mutation, this.state)) 186 | } 187 | 188 | ``` 189 | 190 | 191 | ##6. 其他变动 192 | 193 | 最新的`vuex-2.0.0.rc5` 为说明API一些新变化 194 | ```javascript 195 | 196 | // 这个就是换个名字 197 | store.middlewares -> store.plugins 198 | 199 | // 这货貌似干掉又被还原了 尤大真是喜怒无常 哈 200 | store.watch 201 | 202 | // 使用subscribe 监听vuex的变化 203 | store.subscribe((mutation, state) => { ... }) 204 | 205 | // 注册模块 206 | registerModule 207 | 208 | // 注销模块 209 | unregisterModule 210 | ``` 211 | 212 | ## 总结 213 | 214 | 总体来说vuex2.0的变化还是跟vue本身一样 也算折腾了一下 新版的写法和逼格更高些。 215 | 作为vue全家桶中重要的状态流管理框架 vuex值得你拥有 216 | 217 | [demo地址](https://github.com/yelingfeng/vuex-tutorial/blob/master/tutorial/03 ) 218 | -------------------------------------------------------------------------------- /amd/src/assets/js/bootstrap-material-design/js/material.min.js: -------------------------------------------------------------------------------- 1 | !function(a){function b(a){return"undefined"==typeof a.which?!0:"number"==typeof a.which&&a.which>0?!a.ctrlKey&&!a.metaKey&&!a.altKey&&8!=a.which&&9!=a.which&&13!=a.which&&16!=a.which&&17!=a.which&&20!=a.which&&27!=a.which:!1}function c(b){var c=a(b);c.prop("disabled")||c.closest(".form-group").addClass("is-focused")}function d(b){b.closest("label").hover(function(){var b=a(this).find("input");b.prop("disabled")||c(b)},function(){e(a(this).find("input"))})}function e(b){a(b).closest(".form-group").removeClass("is-focused")}a.expr[":"].notmdproc=function(b){return a(b).data("mdproc")?!1:!0},a.material={options:{validate:!0,input:!0,ripples:!0,checkbox:!0,togglebutton:!0,radio:!0,arrive:!0,autofill:!1,withRipples:[".btn:not(.btn-link)",".card-image",".navbar a:not(.withoutripple)",".dropdown-menu a",".nav-tabs a:not(.withoutripple)",".withripple",".pagination li:not(.active):not(.disabled) a:not(.withoutripple)"].join(","),inputElements:"input.form-control, textarea.form-control, select.form-control",checkboxElements:".checkbox > label > input[type=checkbox]",togglebuttonElements:".togglebutton > label > input[type=checkbox]",radioElements:".radio > label > input[type=radio]"},checkbox:function(b){var c=a(b?b:this.options.checkboxElements).filter(":notmdproc").data("mdproc",!0).after("");d(c)},togglebutton:function(b){var c=a(b?b:this.options.togglebuttonElements).filter(":notmdproc").data("mdproc",!0).after("");d(c)},radio:function(b){var c=a(b?b:this.options.radioElements).filter(":notmdproc").data("mdproc",!0).after("");d(c)},input:function(b){a(b?b:this.options.inputElements).filter(":notmdproc").data("mdproc",!0).each(function(){var b=a(this),c=b.closest(".form-group");0!==c.length||"hidden"===b.attr("type")||b.attr("hidden")||(b.wrap("
"),c=b.closest(".form-group")),b.attr("data-hint")&&(b.after("

"+b.attr("data-hint")+"

"),b.removeAttr("data-hint"));var d={"input-lg":"form-group-lg","input-sm":"form-group-sm"};if(a.each(d,function(a,d){b.hasClass(a)&&(b.removeClass(a),c.addClass(d))}),b.hasClass("floating-label")){var e=b.attr("placeholder");b.attr("placeholder",null).removeClass("floating-label");var f=b.attr("id"),g="";f&&(g="for='"+f+"'"),c.addClass("label-floating"),b.after("")}(null===b.val()||"undefined"==b.val()||""===b.val())&&c.addClass("is-empty"),c.append(""),c.find("input[type=file]").length>0&&c.addClass("is-fileinput")})},attachInputEventHandlers:function(){var d=this.options.validate;a(document).on("change",".checkbox input[type=checkbox]",function(){a(this).blur()}).on("keydown paste",".form-control",function(c){b(c)&&a(this).closest(".form-group").removeClass("is-empty")}).on("keyup change",".form-control",function(){var b=a(this),c=b.closest(".form-group"),e="undefined"==typeof b[0].checkValidity||b[0].checkValidity();""===b.val()?c.addClass("is-empty"):c.removeClass("is-empty"),d&&(e?c.removeClass("has-error"):c.addClass("has-error"))}).on("focus",".form-control, .form-group.is-fileinput",function(){c(this)}).on("blur",".form-control, .form-group.is-fileinput",function(){e(this)}).on("change",".form-group input",function(){var b=a(this);if("file"!=b.attr("type")){var c=b.closest(".form-group"),d=b.val();d?c.removeClass("is-empty"):c.addClass("is-empty")}}).on("change",".form-group.is-fileinput input[type='file']",function(){var b=a(this),c=b.closest(".form-group"),d="";a.each(this.files,function(a,b){d+=b.name+", "}),d=d.substring(0,d.length-2),d?c.removeClass("is-empty"):c.addClass("is-empty"),c.find("input.form-control[readonly]").val(d)})},ripples:function(b){a(b?b:this.options.withRipples).ripples()},autofill:function(){var b=setInterval(function(){a("input[type!=checkbox]").each(function(){var b=a(this);b.val()&&b.val()!==b.attr("value")&&b.trigger("change")})},100);setTimeout(function(){clearInterval(b)},1e4)},attachAutofillEventHandlers:function(){var b;a(document).on("focus","input",function(){var c=a(this).parents("form").find("input").not("[type=file]");b=setInterval(function(){c.each(function(){var b=a(this);b.val()!==b.attr("value")&&b.trigger("change")})},100)}).on("blur",".form-group input",function(){clearInterval(b)})},init:function(b){this.options=a.extend({},this.options,b);var c=a(document);a.fn.ripples&&this.options.ripples&&this.ripples(),this.options.input&&(this.input(),this.attachInputEventHandlers()),this.options.checkbox&&this.checkbox(),this.options.togglebutton&&this.togglebutton(),this.options.radio&&this.radio(),this.options.autofill&&(this.autofill(),this.attachAutofillEventHandlers()),document.arrive&&this.options.arrive&&(a.fn.ripples&&this.options.ripples&&c.arrive(this.options.withRipples,function(){a.material.ripples(a(this))}),this.options.input&&c.arrive(this.options.inputElements,function(){a.material.input(a(this))}),this.options.checkbox&&c.arrive(this.options.checkboxElements,function(){a.material.checkbox(a(this))}),this.options.radio&&c.arrive(this.options.radioElements,function(){a.material.radio(a(this))}),this.options.togglebutton&&c.arrive(this.options.togglebuttonElements,function(){a.material.togglebutton(a(this))}))}}}(jQuery); 2 | //# sourceMappingURL=material.min.js.map -------------------------------------------------------------------------------- /src/assets/js/bootstrap-material-design/js/material.min.js: -------------------------------------------------------------------------------- 1 | !function(a){function b(a){return"undefined"==typeof a.which?!0:"number"==typeof a.which&&a.which>0?!a.ctrlKey&&!a.metaKey&&!a.altKey&&8!=a.which&&9!=a.which&&13!=a.which&&16!=a.which&&17!=a.which&&20!=a.which&&27!=a.which:!1}function c(b){var c=a(b);c.prop("disabled")||c.closest(".form-group").addClass("is-focused")}function d(b){b.closest("label").hover(function(){var b=a(this).find("input");b.prop("disabled")||c(b)},function(){e(a(this).find("input"))})}function e(b){a(b).closest(".form-group").removeClass("is-focused")}a.expr[":"].notmdproc=function(b){return a(b).data("mdproc")?!1:!0},a.material={options:{validate:!0,input:!0,ripples:!0,checkbox:!0,togglebutton:!0,radio:!0,arrive:!0,autofill:!1,withRipples:[".btn:not(.btn-link)",".card-image",".navbar a:not(.withoutripple)",".dropdown-menu a",".nav-tabs a:not(.withoutripple)",".withripple",".pagination li:not(.active):not(.disabled) a:not(.withoutripple)"].join(","),inputElements:"input.form-control, textarea.form-control, select.form-control",checkboxElements:".checkbox > label > input[type=checkbox]",togglebuttonElements:".togglebutton > label > input[type=checkbox]",radioElements:".radio > label > input[type=radio]"},checkbox:function(b){var c=a(b?b:this.options.checkboxElements).filter(":notmdproc").data("mdproc",!0).after("");d(c)},togglebutton:function(b){var c=a(b?b:this.options.togglebuttonElements).filter(":notmdproc").data("mdproc",!0).after("");d(c)},radio:function(b){var c=a(b?b:this.options.radioElements).filter(":notmdproc").data("mdproc",!0).after("");d(c)},input:function(b){a(b?b:this.options.inputElements).filter(":notmdproc").data("mdproc",!0).each(function(){var b=a(this),c=b.closest(".form-group");0!==c.length||"hidden"===b.attr("type")||b.attr("hidden")||(b.wrap("
"),c=b.closest(".form-group")),b.attr("data-hint")&&(b.after("

"+b.attr("data-hint")+"

"),b.removeAttr("data-hint"));var d={"input-lg":"form-group-lg","input-sm":"form-group-sm"};if(a.each(d,function(a,d){b.hasClass(a)&&(b.removeClass(a),c.addClass(d))}),b.hasClass("floating-label")){var e=b.attr("placeholder");b.attr("placeholder",null).removeClass("floating-label");var f=b.attr("id"),g="";f&&(g="for='"+f+"'"),c.addClass("label-floating"),b.after("")}(null===b.val()||"undefined"==b.val()||""===b.val())&&c.addClass("is-empty"),c.append(""),c.find("input[type=file]").length>0&&c.addClass("is-fileinput")})},attachInputEventHandlers:function(){var d=this.options.validate;a(document).on("change",".checkbox input[type=checkbox]",function(){a(this).blur()}).on("keydown paste",".form-control",function(c){b(c)&&a(this).closest(".form-group").removeClass("is-empty")}).on("keyup change",".form-control",function(){var b=a(this),c=b.closest(".form-group"),e="undefined"==typeof b[0].checkValidity||b[0].checkValidity();""===b.val()?c.addClass("is-empty"):c.removeClass("is-empty"),d&&(e?c.removeClass("has-error"):c.addClass("has-error"))}).on("focus",".form-control, .form-group.is-fileinput",function(){c(this)}).on("blur",".form-control, .form-group.is-fileinput",function(){e(this)}).on("change",".form-group input",function(){var b=a(this);if("file"!=b.attr("type")){var c=b.closest(".form-group"),d=b.val();d?c.removeClass("is-empty"):c.addClass("is-empty")}}).on("change",".form-group.is-fileinput input[type='file']",function(){var b=a(this),c=b.closest(".form-group"),d="";a.each(this.files,function(a,b){d+=b.name+", "}),d=d.substring(0,d.length-2),d?c.removeClass("is-empty"):c.addClass("is-empty"),c.find("input.form-control[readonly]").val(d)})},ripples:function(b){a(b?b:this.options.withRipples).ripples()},autofill:function(){var b=setInterval(function(){a("input[type!=checkbox]").each(function(){var b=a(this);b.val()&&b.val()!==b.attr("value")&&b.trigger("change")})},100);setTimeout(function(){clearInterval(b)},1e4)},attachAutofillEventHandlers:function(){var b;a(document).on("focus","input",function(){var c=a(this).parents("form").find("input").not("[type=file]");b=setInterval(function(){c.each(function(){var b=a(this);b.val()!==b.attr("value")&&b.trigger("change")})},100)}).on("blur",".form-group input",function(){clearInterval(b)})},init:function(b){this.options=a.extend({},this.options,b);var c=a(document);a.fn.ripples&&this.options.ripples&&this.ripples(),this.options.input&&(this.input(),this.attachInputEventHandlers()),this.options.checkbox&&this.checkbox(),this.options.togglebutton&&this.togglebutton(),this.options.radio&&this.radio(),this.options.autofill&&(this.autofill(),this.attachAutofillEventHandlers()),document.arrive&&this.options.arrive&&(a.fn.ripples&&this.options.ripples&&c.arrive(this.options.withRipples,function(){a.material.ripples(a(this))}),this.options.input&&c.arrive(this.options.inputElements,function(){a.material.input(a(this))}),this.options.checkbox&&c.arrive(this.options.checkboxElements,function(){a.material.checkbox(a(this))}),this.options.radio&&c.arrive(this.options.radioElements,function(){a.material.radio(a(this))}),this.options.togglebutton&&c.arrive(this.options.togglebuttonElements,function(){a.material.togglebutton(a(this))}))}}}(jQuery); 2 | //# sourceMappingURL=material.min.js.map -------------------------------------------------------------------------------- /amd/src/assets/js/bootstrap-material-design/js/material.min.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["material.js"],"names":["$","_isChar","evt","which","ctrlKey","metaKey","altKey","_addFormGroupFocus","element","$element","prop","closest","addClass","_toggleTypeFocus","$input","hover","$i","this","find","_removeFormGroupFocus","removeClass","expr","notmdproc","obj","data","material","options","validate","input","ripples","checkbox","togglebutton","radio","arrive","autofill","withRipples","join","inputElements","checkboxElements","togglebuttonElements","radioElements","selector","filter","after","each","$formGroup","length","attr","wrap","removeAttr","legacySizes","input-lg","input-sm","legacySize","standardSize","hasClass","placeholder","id","forAttribute","val","append","attachInputEventHandlers","document","on","blur","e","isValid","checkValidity","value","files","i","file","name","substring","loading","setInterval","$this","trigger","setTimeout","clearInterval","attachAutofillEventHandlers","focused","$inputs","parents","not","init","extend","$document","fn","jQuery"],"mappings":"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","file":"material.min.js"} -------------------------------------------------------------------------------- /src/assets/js/bootstrap-material-design/js/material.min.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["material.js"],"names":["$","_isChar","evt","which","ctrlKey","metaKey","altKey","_addFormGroupFocus","element","$element","prop","closest","addClass","_toggleTypeFocus","$input","hover","$i","this","find","_removeFormGroupFocus","removeClass","expr","notmdproc","obj","data","material","options","validate","input","ripples","checkbox","togglebutton","radio","arrive","autofill","withRipples","join","inputElements","checkboxElements","togglebuttonElements","radioElements","selector","filter","after","each","$formGroup","length","attr","wrap","removeAttr","legacySizes","input-lg","input-sm","legacySize","standardSize","hasClass","placeholder","id","forAttribute","val","append","attachInputEventHandlers","document","on","blur","e","isValid","checkValidity","value","files","i","file","name","substring","loading","setInterval","$this","trigger","setTimeout","clearInterval","attachAutofillEventHandlers","focused","$inputs","parents","not","init","extend","$document","fn","jQuery"],"mappings":"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","file":"material.min.js"} -------------------------------------------------------------------------------- /amd/src/assets/js/bootstrap/css/bootstrap-theme.min.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["less/theme.less","less/mixins/vendor-prefixes.less","less/mixins/gradients.less","less/mixins/reset-filter.less"],"names":[],"mappings":"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"} -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "node": true 5 | }, 6 | 7 | "ecmaFeatures": { 8 | "arrowFunctions": true, 9 | "destructuring": true, 10 | "classes": true, 11 | "defaultParams": true, 12 | "blockBindings": true, 13 | "modules": true, 14 | "objectLiteralComputedProperties": true, 15 | "objectLiteralShorthandMethods": true, 16 | "objectLiteralShorthandProperties": true, 17 | "restParams": true, 18 | "spread": true, 19 | "templateStrings": true 20 | }, 21 | 22 | "rules": { 23 | "accessor-pairs": 2, 24 | "array-bracket-spacing": 0, 25 | "block-scoped-var": 0, 26 | "brace-style": [2, "1tbs", { "allowSingleLine": true }], 27 | "camelcase": 0, 28 | "comma-dangle": [2, "never"], 29 | "comma-spacing": [2, { "before": false, "after": true }], 30 | "comma-style": [2, "last"], 31 | "complexity": 0, 32 | "computed-property-spacing": 0, 33 | "consistent-return": 0, 34 | "consistent-this": 0, 35 | "constructor-super": 2, 36 | "curly": [2, "multi-line"], 37 | "default-case": 0, 38 | "dot-location": [2, "property"], 39 | "dot-notation": 0, 40 | "eol-last": 2, 41 | "eqeqeq": [2, "allow-null"], 42 | "func-names": 0, 43 | "func-style": 0, 44 | "generator-star-spacing": [2, { "before": true, "after": true }], 45 | "guard-for-in": 0, 46 | "handle-callback-err": [2, "^(err|error)$" ], 47 | "indent": [2, 2, { "SwitchCase": 1 }], 48 | "key-spacing": [2, { "beforeColon": false, "afterColon": true }], 49 | "linebreak-style": 0, 50 | "lines-around-comment": 0, 51 | "max-nested-callbacks": 0, 52 | "new-cap": [2, { "newIsCap": true, "capIsNew": false }], 53 | "new-parens": 2, 54 | "newline-after-var": 0, 55 | "no-alert": 0, 56 | "no-array-constructor": 2, 57 | "no-caller": 2, 58 | "no-catch-shadow": 0, 59 | "no-cond-assign": 2, 60 | "no-console": 0, 61 | "no-constant-condition": 0, 62 | "no-continue": 0, 63 | "no-control-regex": 2, 64 | "no-debugger": 2, 65 | "no-delete-var": 2, 66 | "no-div-regex": 0, 67 | "no-dupe-args": 2, 68 | "no-dupe-keys": 2, 69 | "no-duplicate-case": 2, 70 | "no-else-return": 0, 71 | "no-empty": 0, 72 | "no-empty-character-class": 2, 73 | "no-empty-label": 2, 74 | "no-eq-null": 0, 75 | "no-eval": 2, 76 | "no-ex-assign": 2, 77 | "no-extend-native": 2, 78 | "no-extra-bind": 2, 79 | "no-extra-boolean-cast": 2, 80 | "no-extra-parens": 0, 81 | "no-extra-semi": 0, 82 | "no-fallthrough": 2, 83 | "no-floating-decimal": 2, 84 | "no-func-assign": 2, 85 | "no-implied-eval": 2, 86 | "no-inline-comments": 0, 87 | "no-inner-declarations": [2, "functions"], 88 | "no-invalid-regexp": 2, 89 | "no-irregular-whitespace": 2, 90 | "no-iterator": 2, 91 | "no-label-var": 2, 92 | "no-labels": 2, 93 | "no-lone-blocks": 2, 94 | "no-lonely-if": 0, 95 | "no-loop-func": 0, 96 | "no-mixed-requires": 0, 97 | "no-mixed-spaces-and-tabs": 2, 98 | "no-multi-spaces": 2, 99 | "no-multi-str": 2, 100 | "no-multiple-empty-lines": [2, { "max": 1 }], 101 | "no-native-reassign": 2, 102 | "no-negated-in-lhs": 2, 103 | "no-nested-ternary": 0, 104 | "no-new": 0, 105 | "no-new-func": 0, 106 | "no-new-object": 2, 107 | "no-new-require": 2, 108 | "no-new-wrappers": 2, 109 | "no-obj-calls": 2, 110 | "no-octal": 2, 111 | "no-octal-escape": 2, 112 | "no-param-reassign": 0, 113 | "no-path-concat": 0, 114 | "no-process-env": 0, 115 | "no-process-exit": 0, 116 | "no-proto": 0, 117 | "no-redeclare": 2, 118 | "no-regex-spaces": 2, 119 | "no-restricted-modules": 0, 120 | "no-return-assign": 2, 121 | "no-script-url": 0, 122 | "no-self-compare": 2, 123 | "no-sequences": 2, 124 | "no-shadow": 0, 125 | "no-shadow-restricted-names": 2, 126 | "no-spaced-func": 2, 127 | "no-sparse-arrays": 2, 128 | "no-sync": 0, 129 | "no-ternary": 0, 130 | "no-this-before-super": 2, 131 | "no-throw-literal": 2, 132 | "no-trailing-spaces": 2, 133 | "no-undef": 2, 134 | "no-undef-init": 2, 135 | "no-undefined": 0, 136 | "no-underscore-dangle": 0, 137 | "no-unexpected-multiline": 2, 138 | "no-unneeded-ternary": 2, 139 | "no-unreachable": 2, 140 | "no-unused-expressions": 0, 141 | "no-unused-vars": [2, { "vars": "all", "args": "none" }], 142 | "no-use-before-define": 0, 143 | "no-var": 0, 144 | "no-void": 0, 145 | "no-warning-comments": 0, 146 | "no-with": 2, 147 | "object-curly-spacing": 0, 148 | "object-shorthand": 0, 149 | "one-var": [2, { "initialized": "never" }], 150 | "operator-assignment": 0, 151 | "operator-linebreak": [2, "after", { "overrides": { "?": "before", ":": "before" } }], 152 | "padded-blocks": 0, 153 | "prefer-const": 0, 154 | "quote-props": 0, 155 | "quotes": [2, "single", "avoid-escape"], 156 | "radix": 2, 157 | "semi": [2, "never"], 158 | "semi-spacing": 0, 159 | "sort-vars": 0, 160 | "space-after-keywords": [2, "always"], 161 | "space-before-blocks": [2, "always"], 162 | "space-before-function-paren": [2, "always"], 163 | "space-in-parens": [2, "never"], 164 | "space-infix-ops": 2, 165 | "space-return-throw-case": 2, 166 | "space-unary-ops": [2, { "words": true, "nonwords": false }], 167 | "spaced-comment": [2, "always", { "markers": ["global", "globals", "eslint", "eslint-disable", "*package", "!"] }], 168 | "strict": 0, 169 | "use-isnan": 2, 170 | "valid-jsdoc": 0, 171 | "valid-typeof": 2, 172 | "vars-on-top": 0, 173 | "wrap-iife": [2, "any"], 174 | "wrap-regex": 0, 175 | "yoda": [2, "never"] 176 | } 177 | } 178 | -------------------------------------------------------------------------------- /amd/src/lib/vuex.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Vuex v0.6.2 3 | * (c) 2016 Evan You 4 | * Released under the MIT License. 5 | */ 6 | !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.Vuex=e()}(this,function(){"use strict";function t(t){return t.reduce(function(t,e){return Object.keys(e).forEach(function(n){var o=t[n];o?Array.isArray(o)?o.push(e[n]):t[n]=[t[n],e[n]]:t[n]=e[n]}),t},{})}function e(t){if(Array.isArray(t))return t.map(e);if(t&&"object"===("undefined"==typeof t?"undefined":s["typeof"](t))){for(var n={},o=Object.keys(t),r=0,i=o.length;i>r;r++){var a=o[r];n[a]=e(t[a])}return n}return t}function n(t){if(!u){var e=t.$watch("__vuex__",function(t){return t});u=t._watchers[0].constructor,e()}return u}function o(t){return c||(c=t._data.__ob__.dep.constructor),c}function r(t){function e(){var t=this.$options,e=t.store,n=t.vuex;if(e?this.$store=e:t.parent&&t.parent.$store&&(this.$store=t.parent.$store),n){this.$store||console.warn("[vuex] store not injected. make sure to provide the store option in your root component.");var o=n.state,r=n.getters,a=n.actions;if(o&&!r&&(console.warn("[vuex] vuex.state option will been deprecated in 1.0. Use vuex.getters instead."),r=o),r){t.computed=t.computed||{};for(var u in r)i(this,u,r[u])}if(a){t.methods=t.methods||{};for(var c in a)t.methods[c]=s(a[c],this.$store)}}}function r(){throw new Error("vuex getter properties are read-only.")}function i(t,e,n){Object.defineProperty(t,e,{enumerable:!0,configurable:!0,get:a(t.$store,n),set:r})}function a(t,e){var r=t._getterCacheId;if(e[r])return e[r];var i=t._vm,a=n(i),s=o(i),u=new a(i,function(t){return e(t)},null,{lazy:!0}),c=function(){return u.dirty&&u.evaluate(),s.target&&u.depend(),u.value};return e[r]=c,c}function s(t,e){return function(){for(var n=arguments.length,o=Array(n),r=0;n>r;r++)o[r]=arguments[r];return t.call.apply(t,[this,e].concat(o))}}var u=t.prototype._init;t.prototype._init=function(){var t=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];t.init=t.init?[e].concat(t.init):e,u.call(this,t)};var c=t.config.optionMergeStrategies.computed;t.config.optionMergeStrategies.vuex=function(t,e){return t?e?{getters:c(t.getters,e.getters),state:c(t.state,e.state),actions:c(t.actions,e.actions)}:t:e}}function i(t){d=t,r(d)}function a(){console.warn("[vuex] Vuex.createLogger has been deprecated.Use `import createLogger from 'vuex/logger' instead.")}var s={};s["typeof"]="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol?"symbol":typeof t},s.classCallCheck=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},s.createClass=function(){function t(t,e){for(var n=0;no;o++)n[o]=arguments[o];y.apply(t,n)},!d)throw new Error("[vuex] must call Vue.use(Vuex) before creating a store instance.");var _=d.config.silent;d.config.silent=!0,this._vm=new d({data:r}),d.config.silent=_,this._setupModuleState(r,c),this._setupModuleMutations(c),this._setupMiddlewares(h,r),v&&this._setupMutationCheck()}return s.createClass(o,[{key:"dispatch",value:function(t){for(var n=this,o=arguments.length,r=Array(o>1?o-1:0),i=1;o>i;i++)r[i-1]=arguments[i];"object"===("undefined"==typeof t?"undefined":s["typeof"](t))&&t.type&&1===arguments.length&&(r=[t],t=t.type);var a=this._mutations[t],u=this._prevSnapshot,c=this.state,f=void 0,h=void 0;a?(this._dispatching=!0,Array.isArray(a)?a.forEach(function(t){return t.apply(void 0,[c].concat(s.toConsumableArray(r)))}):a.apply(void 0,[c].concat(s.toConsumableArray(r))),this._dispatching=!1,this._needSnapshots&&(f=this._prevSnapshot=e(c),h=e(r)),this._middlewares.forEach(function(e){e.onMutation&&(e.snapshot?e.onMutation({type:t,payload:h},f,u,n):e.onMutation({type:t,payload:r},c,n))})):console.warn("[vuex] Unknown mutation: "+t)}},{key:"watch",value:function(t,e,n){var o=this;return this._vm.$watch(function(){return"function"==typeof t?t(o.state):o._vm.$get(t)},e,n)}},{key:"hotUpdate",value:function(){var t=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],e=t.mutations,n=t.modules;this._rootMutations=this._mutations=e||this._rootMutations,this._setupModuleMutations(n||this._modules)}},{key:"_setupModuleState",value:function(t,e){var n=d.parsers.path.setPath;Object.keys(e).forEach(function(o){n(t,o,e[o].state||{})})}},{key:"_setupModuleMutations",value:function(e){var n=this._modules,o=d.parsers.path.getPath,r=[this._rootMutations];Object.keys(e).forEach(function(t){n[t]=e[t]}),Object.keys(n).forEach(function(t){var e=n[t];if(e&&e.mutations){var i={};Object.keys(e.mutations).forEach(function(n){var r=e.mutations[n];i[n]=function(e){for(var n=arguments.length,i=Array(n>1?n-1:0),a=1;n>a;a++)i[a-1]=arguments[a];r.apply(void 0,[o(e,t)].concat(i))}}),r.push(i)}}),this._mutations=t(r)}},{key:"_setupMutationCheck",value:function(){var t=this,e=n(this._vm);new e(this._vm,"$data",function(){if(!t._dispatching)throw new Error("[vuex] Do not mutate vuex store state outside mutation handlers.")},{deep:!0,sync:!0})}},{key:"_setupMiddlewares",value:function(t,n){var o=this;this._middlewares=[h].concat(t),this._needSnapshots=t.some(function(t){return t.snapshot}),this._needSnapshots&&console.log("[vuex] One or more of your middlewares are taking state snapshots for each mutation. Make sure to use them only during development.");var r=this._prevSnapshot=this._needSnapshots?e(n):null;this._middlewares.forEach(function(t){t.onInit&&t.onInit(t.snapshot?r:n,o)})}},{key:"state",get:function(){return this._vm._data},set:function(t){throw new Error("[vuex] Vuex root state is read only.")}}]),o}();"undefined"!=typeof window&&window.Vue&&i(window.Vue);var v={Store:p,install:i,createLogger:a};return v}); -------------------------------------------------------------------------------- /src/assets/js/bootstrap-material-design/js/ripples.js: -------------------------------------------------------------------------------- 1 | /* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */ 2 | /* globals jQuery, navigator */ 3 | 4 | (function($, window, document, undefined) { 5 | 6 | "use strict"; 7 | 8 | /** 9 | * Define the name of the plugin 10 | */ 11 | var ripples = "ripples"; 12 | 13 | 14 | /** 15 | * Get an instance of the plugin 16 | */ 17 | var self = null; 18 | 19 | 20 | /** 21 | * Define the defaults of the plugin 22 | */ 23 | var defaults = {}; 24 | 25 | 26 | /** 27 | * Create the main plugin function 28 | */ 29 | function Ripples(element, options) { 30 | self = this; 31 | 32 | this.element = $(element); 33 | 34 | this.options = $.extend({}, defaults, options); 35 | 36 | this._defaults = defaults; 37 | this._name = ripples; 38 | 39 | this.init(); 40 | } 41 | 42 | 43 | /** 44 | * Initialize the plugin 45 | */ 46 | Ripples.prototype.init = function() { 47 | var $element = this.element; 48 | 49 | $element.on("mousedown touchstart", function(event) { 50 | /** 51 | * Verify if the user is just touching on a device and return if so 52 | */ 53 | if(self.isTouch() && event.type === "mousedown") { 54 | return; 55 | } 56 | 57 | 58 | /** 59 | * Verify if the current element already has a ripple wrapper element and 60 | * creates if it doesn't 61 | */ 62 | if(!($element.find(".ripple-container").length)) { 63 | $element.append("
"); 64 | } 65 | 66 | 67 | /** 68 | * Find the ripple wrapper 69 | */ 70 | var $wrapper = $element.children(".ripple-container"); 71 | 72 | 73 | /** 74 | * Get relY and relX positions 75 | */ 76 | var relY = self.getRelY($wrapper, event); 77 | var relX = self.getRelX($wrapper, event); 78 | 79 | 80 | /** 81 | * If relY and/or relX are false, return the event 82 | */ 83 | if(!relY && !relX) { 84 | return; 85 | } 86 | 87 | 88 | /** 89 | * Get the ripple color 90 | */ 91 | var rippleColor = self.getRipplesColor($element); 92 | 93 | 94 | /** 95 | * Create the ripple element 96 | */ 97 | var $ripple = $("
"); 98 | 99 | $ripple 100 | .addClass("ripple") 101 | .css({ 102 | "left": relX, 103 | "top": relY, 104 | "background-color": rippleColor 105 | }); 106 | 107 | 108 | /** 109 | * Append the ripple to the wrapper 110 | */ 111 | $wrapper.append($ripple); 112 | 113 | 114 | /** 115 | * Make sure the ripple has the styles applied (ugly hack but it works) 116 | */ 117 | (function() { return window.getComputedStyle($ripple[0]).opacity; })(); 118 | 119 | 120 | /** 121 | * Turn on the ripple animation 122 | */ 123 | self.rippleOn($element, $ripple); 124 | 125 | 126 | /** 127 | * Call the rippleEnd function when the transition "on" ends 128 | */ 129 | setTimeout(function() { 130 | self.rippleEnd($ripple); 131 | }, 500); 132 | 133 | 134 | /** 135 | * Detect when the user leaves the element 136 | */ 137 | $element.on("mouseup mouseleave touchend", function() { 138 | $ripple.data("mousedown", "off"); 139 | 140 | if($ripple.data("animating") === "off") { 141 | self.rippleOut($ripple); 142 | } 143 | }); 144 | 145 | }); 146 | }; 147 | 148 | 149 | /** 150 | * Get the new size based on the element height/width and the ripple width 151 | */ 152 | Ripples.prototype.getNewSize = function($element, $ripple) { 153 | 154 | return (Math.max($element.outerWidth(), $element.outerHeight()) / $ripple.outerWidth()) * 2.5; 155 | }; 156 | 157 | 158 | /** 159 | * Get the relX 160 | */ 161 | Ripples.prototype.getRelX = function($wrapper, event) { 162 | var wrapperOffset = $wrapper.offset(); 163 | 164 | if(!self.isTouch()) { 165 | /** 166 | * Get the mouse position relative to the ripple wrapper 167 | */ 168 | return event.pageX - wrapperOffset.left; 169 | } else { 170 | /** 171 | * Make sure the user is using only one finger and then get the touch 172 | * position relative to the ripple wrapper 173 | */ 174 | event = event.originalEvent; 175 | 176 | if(event.touches.length === 1) { 177 | return event.touches[0].pageX - wrapperOffset.left; 178 | } 179 | 180 | return false; 181 | } 182 | }; 183 | 184 | 185 | /** 186 | * Get the relY 187 | */ 188 | Ripples.prototype.getRelY = function($wrapper, event) { 189 | var wrapperOffset = $wrapper.offset(); 190 | 191 | if(!self.isTouch()) { 192 | /** 193 | * Get the mouse position relative to the ripple wrapper 194 | */ 195 | return event.pageY - wrapperOffset.top; 196 | } else { 197 | /** 198 | * Make sure the user is using only one finger and then get the touch 199 | * position relative to the ripple wrapper 200 | */ 201 | event = event.originalEvent; 202 | 203 | if(event.touches.length === 1) { 204 | return event.touches[0].pageY - wrapperOffset.top; 205 | } 206 | 207 | return false; 208 | } 209 | }; 210 | 211 | 212 | /** 213 | * Get the ripple color 214 | */ 215 | Ripples.prototype.getRipplesColor = function($element) { 216 | 217 | var color = $element.data("ripple-color") ? $element.data("ripple-color") : window.getComputedStyle($element[0]).color; 218 | 219 | return color; 220 | }; 221 | 222 | 223 | /** 224 | * Verify if the client browser has transistion support 225 | */ 226 | Ripples.prototype.hasTransitionSupport = function() { 227 | var thisBody = document.body || document.documentElement; 228 | var thisStyle = thisBody.style; 229 | 230 | var support = ( 231 | thisStyle.transition !== undefined || 232 | thisStyle.WebkitTransition !== undefined || 233 | thisStyle.MozTransition !== undefined || 234 | thisStyle.MsTransition !== undefined || 235 | thisStyle.OTransition !== undefined 236 | ); 237 | 238 | return support; 239 | }; 240 | 241 | 242 | /** 243 | * Verify if the client is using a mobile device 244 | */ 245 | Ripples.prototype.isTouch = function() { 246 | return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); 247 | }; 248 | 249 | 250 | /** 251 | * End the animation of the ripple 252 | */ 253 | Ripples.prototype.rippleEnd = function($ripple) { 254 | $ripple.data("animating", "off"); 255 | 256 | if($ripple.data("mousedown") === "off") { 257 | self.rippleOut($ripple); 258 | } 259 | }; 260 | 261 | 262 | /** 263 | * Turn off the ripple effect 264 | */ 265 | Ripples.prototype.rippleOut = function($ripple) { 266 | $ripple.off(); 267 | 268 | if(self.hasTransitionSupport()) { 269 | $ripple.addClass("ripple-out"); 270 | } else { 271 | $ripple.animate({"opacity": 0}, 100, function() { 272 | $ripple.trigger("transitionend"); 273 | }); 274 | } 275 | 276 | $ripple.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() { 277 | $ripple.remove(); 278 | }); 279 | }; 280 | 281 | 282 | /** 283 | * Turn on the ripple effect 284 | */ 285 | Ripples.prototype.rippleOn = function($element, $ripple) { 286 | var size = self.getNewSize($element, $ripple); 287 | 288 | if(self.hasTransitionSupport()) { 289 | $ripple 290 | .css({ 291 | "-ms-transform": "scale(" + size + ")", 292 | "-moz-transform": "scale(" + size + ")", 293 | "-webkit-transform": "scale(" + size + ")", 294 | "transform": "scale(" + size + ")" 295 | }) 296 | .addClass("ripple-on") 297 | .data("animating", "on") 298 | .data("mousedown", "on"); 299 | } else { 300 | $ripple.animate({ 301 | "width": Math.max($element.outerWidth(), $element.outerHeight()) * 2, 302 | "height": Math.max($element.outerWidth(), $element.outerHeight()) * 2, 303 | "margin-left": Math.max($element.outerWidth(), $element.outerHeight()) * (-1), 304 | "margin-top": Math.max($element.outerWidth(), $element.outerHeight()) * (-1), 305 | "opacity": 0.2 306 | }, 500, function() { 307 | $ripple.trigger("transitionend"); 308 | }); 309 | } 310 | }; 311 | 312 | 313 | /** 314 | * Create the jquery plugin function 315 | */ 316 | $.fn.ripples = function(options) { 317 | return this.each(function() { 318 | if(!$.data(this, "plugin_" + ripples)) { 319 | $.data(this, "plugin_" + ripples, new Ripples(this, options)); 320 | } 321 | }); 322 | }; 323 | 324 | })(jQuery, window, document); 325 | -------------------------------------------------------------------------------- /amd/src/assets/js/bootstrap-material-design/js/ripples.js: -------------------------------------------------------------------------------- 1 | /* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */ 2 | /* globals jQuery, navigator */ 3 | 4 | (function($, window, document, undefined) { 5 | 6 | "use strict"; 7 | 8 | /** 9 | * Define the name of the plugin 10 | */ 11 | var ripples = "ripples"; 12 | 13 | 14 | /** 15 | * Get an instance of the plugin 16 | */ 17 | var self = null; 18 | 19 | 20 | /** 21 | * Define the defaults of the plugin 22 | */ 23 | var defaults = {}; 24 | 25 | 26 | /** 27 | * Create the main plugin function 28 | */ 29 | function Ripples(element, options) { 30 | self = this; 31 | 32 | this.element = $(element); 33 | 34 | this.options = $.extend({}, defaults, options); 35 | 36 | this._defaults = defaults; 37 | this._name = ripples; 38 | 39 | this.init(); 40 | } 41 | 42 | 43 | /** 44 | * Initialize the plugin 45 | */ 46 | Ripples.prototype.init = function() { 47 | var $element = this.element; 48 | 49 | $element.on("mousedown touchstart", function(event) { 50 | /** 51 | * Verify if the user is just touching on a device and return if so 52 | */ 53 | if(self.isTouch() && event.type === "mousedown") { 54 | return; 55 | } 56 | 57 | 58 | /** 59 | * Verify if the current element already has a ripple wrapper element and 60 | * creates if it doesn't 61 | */ 62 | if(!($element.find(".ripple-container").length)) { 63 | $element.append("
"); 64 | } 65 | 66 | 67 | /** 68 | * Find the ripple wrapper 69 | */ 70 | var $wrapper = $element.children(".ripple-container"); 71 | 72 | 73 | /** 74 | * Get relY and relX positions 75 | */ 76 | var relY = self.getRelY($wrapper, event); 77 | var relX = self.getRelX($wrapper, event); 78 | 79 | 80 | /** 81 | * If relY and/or relX are false, return the event 82 | */ 83 | if(!relY && !relX) { 84 | return; 85 | } 86 | 87 | 88 | /** 89 | * Get the ripple color 90 | */ 91 | var rippleColor = self.getRipplesColor($element); 92 | 93 | 94 | /** 95 | * Create the ripple element 96 | */ 97 | var $ripple = $("
"); 98 | 99 | $ripple 100 | .addClass("ripple") 101 | .css({ 102 | "left": relX, 103 | "top": relY, 104 | "background-color": rippleColor 105 | }); 106 | 107 | 108 | /** 109 | * Append the ripple to the wrapper 110 | */ 111 | $wrapper.append($ripple); 112 | 113 | 114 | /** 115 | * Make sure the ripple has the styles applied (ugly hack but it works) 116 | */ 117 | (function() { return window.getComputedStyle($ripple[0]).opacity; })(); 118 | 119 | 120 | /** 121 | * Turn on the ripple animation 122 | */ 123 | self.rippleOn($element, $ripple); 124 | 125 | 126 | /** 127 | * Call the rippleEnd function when the transition "on" ends 128 | */ 129 | setTimeout(function() { 130 | self.rippleEnd($ripple); 131 | }, 500); 132 | 133 | 134 | /** 135 | * Detect when the user leaves the element 136 | */ 137 | $element.on("mouseup mouseleave touchend", function() { 138 | $ripple.data("mousedown", "off"); 139 | 140 | if($ripple.data("animating") === "off") { 141 | self.rippleOut($ripple); 142 | } 143 | }); 144 | 145 | }); 146 | }; 147 | 148 | 149 | /** 150 | * Get the new size based on the element height/width and the ripple width 151 | */ 152 | Ripples.prototype.getNewSize = function($element, $ripple) { 153 | 154 | return (Math.max($element.outerWidth(), $element.outerHeight()) / $ripple.outerWidth()) * 2.5; 155 | }; 156 | 157 | 158 | /** 159 | * Get the relX 160 | */ 161 | Ripples.prototype.getRelX = function($wrapper, event) { 162 | var wrapperOffset = $wrapper.offset(); 163 | 164 | if(!self.isTouch()) { 165 | /** 166 | * Get the mouse position relative to the ripple wrapper 167 | */ 168 | return event.pageX - wrapperOffset.left; 169 | } else { 170 | /** 171 | * Make sure the user is using only one finger and then get the touch 172 | * position relative to the ripple wrapper 173 | */ 174 | event = event.originalEvent; 175 | 176 | if(event.touches.length === 1) { 177 | return event.touches[0].pageX - wrapperOffset.left; 178 | } 179 | 180 | return false; 181 | } 182 | }; 183 | 184 | 185 | /** 186 | * Get the relY 187 | */ 188 | Ripples.prototype.getRelY = function($wrapper, event) { 189 | var wrapperOffset = $wrapper.offset(); 190 | 191 | if(!self.isTouch()) { 192 | /** 193 | * Get the mouse position relative to the ripple wrapper 194 | */ 195 | return event.pageY - wrapperOffset.top; 196 | } else { 197 | /** 198 | * Make sure the user is using only one finger and then get the touch 199 | * position relative to the ripple wrapper 200 | */ 201 | event = event.originalEvent; 202 | 203 | if(event.touches.length === 1) { 204 | return event.touches[0].pageY - wrapperOffset.top; 205 | } 206 | 207 | return false; 208 | } 209 | }; 210 | 211 | 212 | /** 213 | * Get the ripple color 214 | */ 215 | Ripples.prototype.getRipplesColor = function($element) { 216 | 217 | var color = $element.data("ripple-color") ? $element.data("ripple-color") : window.getComputedStyle($element[0]).color; 218 | 219 | return color; 220 | }; 221 | 222 | 223 | /** 224 | * Verify if the client browser has transistion support 225 | */ 226 | Ripples.prototype.hasTransitionSupport = function() { 227 | var thisBody = document.body || document.documentElement; 228 | var thisStyle = thisBody.style; 229 | 230 | var support = ( 231 | thisStyle.transition !== undefined || 232 | thisStyle.WebkitTransition !== undefined || 233 | thisStyle.MozTransition !== undefined || 234 | thisStyle.MsTransition !== undefined || 235 | thisStyle.OTransition !== undefined 236 | ); 237 | 238 | return support; 239 | }; 240 | 241 | 242 | /** 243 | * Verify if the client is using a mobile device 244 | */ 245 | Ripples.prototype.isTouch = function() { 246 | return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); 247 | }; 248 | 249 | 250 | /** 251 | * End the animation of the ripple 252 | */ 253 | Ripples.prototype.rippleEnd = function($ripple) { 254 | $ripple.data("animating", "off"); 255 | 256 | if($ripple.data("mousedown") === "off") { 257 | self.rippleOut($ripple); 258 | } 259 | }; 260 | 261 | 262 | /** 263 | * Turn off the ripple effect 264 | */ 265 | Ripples.prototype.rippleOut = function($ripple) { 266 | $ripple.off(); 267 | 268 | if(self.hasTransitionSupport()) { 269 | $ripple.addClass("ripple-out"); 270 | } else { 271 | $ripple.animate({"opacity": 0}, 100, function() { 272 | $ripple.trigger("transitionend"); 273 | }); 274 | } 275 | 276 | $ripple.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() { 277 | $ripple.remove(); 278 | }); 279 | }; 280 | 281 | 282 | /** 283 | * Turn on the ripple effect 284 | */ 285 | Ripples.prototype.rippleOn = function($element, $ripple) { 286 | var size = self.getNewSize($element, $ripple); 287 | 288 | if(self.hasTransitionSupport()) { 289 | $ripple 290 | .css({ 291 | "-ms-transform": "scale(" + size + ")", 292 | "-moz-transform": "scale(" + size + ")", 293 | "-webkit-transform": "scale(" + size + ")", 294 | "transform": "scale(" + size + ")" 295 | }) 296 | .addClass("ripple-on") 297 | .data("animating", "on") 298 | .data("mousedown", "on"); 299 | } else { 300 | $ripple.animate({ 301 | "width": Math.max($element.outerWidth(), $element.outerHeight()) * 2, 302 | "height": Math.max($element.outerWidth(), $element.outerHeight()) * 2, 303 | "margin-left": Math.max($element.outerWidth(), $element.outerHeight()) * (-1), 304 | "margin-top": Math.max($element.outerWidth(), $element.outerHeight()) * (-1), 305 | "opacity": 0.2 306 | }, 500, function() { 307 | $ripple.trigger("transitionend"); 308 | }); 309 | } 310 | }; 311 | 312 | 313 | /** 314 | * Create the jquery plugin function 315 | */ 316 | $.fn.ripples = function(options) { 317 | return this.each(function() { 318 | if(!$.data(this, "plugin_" + ripples)) { 319 | $.data(this, "plugin_" + ripples, new Ripples(this, options)); 320 | } 321 | }); 322 | }; 323 | 324 | })(jQuery, window, document); 325 | -------------------------------------------------------------------------------- /tutorial/02.md: -------------------------------------------------------------------------------- 1 | # vuex快速使用指南2 2 | 3 | 这章节我准备以requirejs模块化，讲解下如何快速上手vuex 4 | 5 | [源码地址](https://github.com/yelingfeng/vuex-tutorial/tree/master/amd) 6 | 7 | 工程代码结构如下 8 | ``` 9 | |--src 10 | |----api 11 | |----assets 12 | |----component 13 | |----lib 14 | |----vuex 15 | |----config.js 16 | |----main.js 17 | |----require.js 18 | |--index.html 19 | ``` 20 | 21 | | 目录文件 | 说明 | 22 | | --------: | :----- | 23 | | src | 存放所有源码 | 24 | | api | 数据处理接口 | 25 | | assets | 一些资源文件css, images ,js等 | 26 | | components | 存放vue组件 | 27 | | lib | 依赖包 `vuex` `vuex-resource` `lodash`等 | 28 | | vuex | vuex文件详细看上一节[点我](/tutorial/01.md) | 29 | | config.js | requirejs配置文件| 30 | | main.js | 主入口文件| 31 | 32 | ### 1. index.html 引入`requirejs`并加载依赖css 33 | ```html 34 | 35 | 36 | 37 | 38 | 39 | 40 | ``` 41 | 42 | ### 2. config.js 配置环境依赖 43 | 44 | 这里加入`jquery`,`vue` ,`vue-resource`,`vuex` , `lodash`,`bootstrap-material-design` 45 | `bootstrap-material-design` 46 | 47 | 本身依赖`jquery`和`bootstrap`配置好`shim`,之后`require`我们的`main.js` 48 | ``` javascript 49 | require.config({ 50 | baseUrl : "./src", 51 | paths :{ 52 | jquery:"./lib/jquery.min", 53 | vue:"./lib/vue", 54 | vueResource:"./lib/vue-resource.min", 55 | vueX:"./lib/vuex", 56 | api :"./api/index", 57 | lodash : "./lib/lodash.min", 58 | bootstrap : "./assets/js/bootstrap/js/bootstrap.min", 59 | ripples : "./assets/js/bootstrap-material-design/js/ripples.min", 60 | material:"./assets/js/bootstrap-material-design/js/material.min" 61 | }, 62 | shim : { 63 | bootstrap : ['jquery'], 64 | ripples:['jquery'], 65 | material:['jquery'], 66 | }, 67 | packages: [ 68 | { 69 | name: 'components', 70 | location: 'component', 71 | main: 'components' 72 | }, 73 | { 74 | name : "vuex", 75 | location :"vuex", 76 | main : "vuex" 77 | } 78 | ] 79 | }) 80 | require(["./main"]) 81 | 82 | ``` 83 | ### 3. main.js 创建我们的应用 84 | 85 | 引入依赖包,我们写的App.js 和vuex的`store`对象. 86 | 87 | 创建vue对象 并 加载vuex的`store` 挂到body上 ready后初始化我们的`bootstrap-material-design` 88 | 89 | ``` javascript 90 | define(function(require){ 91 | var Vue = require("vue"); 92 | var store = require("vuex/store") 93 | var app = require("component/App") 94 | var $ = require("jquery"); 95 | require("bootstrap") 96 | require("ripples") 97 | require("material") 98 | 99 | Vue.config.debug = true; 100 | Vue.config.devtools = true; 101 | 102 | new Vue({ 103 | el : "body", 104 | store: store, 105 | ready: function(){ 106 | $.material.init(); 107 | }, 108 | components:{ 109 | App: app 110 | } 111 | }); 112 | }); 113 | ``` 114 | 115 | ### 4. 创建我们应用的状态管理 116 | 117 | **vuex/store.js** 这里同时加载我们的多个业务`state` (search,searchGroup), 118 | 119 | `vuex`在实例化的时候会合并我们定义的modules 进而完成模块化的需求 120 | 121 | ```javascript 122 | define(function(require){ 123 | var Vue = require("vue"); 124 | var Vuex = require("vueX"); 125 | var search = require("vuex/modules/search"); 126 | var searchGroup = require("vuex/modules/searchGroup"); 127 | Vue.use(Vuex) 128 | Vue.config.debug = true; 129 | 130 | return new Vuex.Store({ 131 | modules: { 132 | search : search, 133 | searchGroup :searchGroup 134 | }, 135 | strict: true, 136 | middlewares: [Vuex.createLogger] 137 | }) 138 | }); 139 | ``` 140 | 141 | ### 5. 创建操作类型types 142 | 143 | **vuex/mutation-types.js** 以search组件为说明 我们需要3个动作操作分别是如下 144 | 145 | **设置需要显示的结果数组** 146 | > **SET_SEARCH_LIST** 147 | ![](/tutorial/img/setSearchList.gif) 148 | 149 | **更新查询值** 150 | > **UPDATE_SEARCH_VAL** 151 | ![](/tutorial/img/updateSearchKey.gif) 152 | 153 | **清空我们的查询值** 154 | > **CLEAR_SEARCH_VAL** 155 | ![](/tutorial/img/clearSearchVal.gif) 156 | 157 | 定义好类型后 在`mutations`和`actions`里使用 158 | 159 | ``` javascript 160 | { 161 | SET_SEARCH_LIST : "SET_SEARCH_LIST", 162 | UPDATE_SEARCH_VAL : "UPDATE_SEARCH_VAL", 163 | CLEAR_SEARCH_VAL : "CLEAR_SEARCH_VAL", 164 | } 165 | ``` 166 | 167 | 168 | 169 | ### 6.创建业务模块modules 170 | 171 | 这里以**vuex/modules/search.js**为例 172 | 173 | 我们定义个`state` 包括2个属性`searchKey`和`searchResultList` 174 | 175 | 分别配置 操作类型变化的`state`处理。 176 | 177 | 最后返回我们的`state`和`mutations` 178 | 179 | 以官网API中表示，`mutation` 必须是同步函数 所以异步操作尽量在`actions`里处理 180 | 181 | ```javascript 182 | define(function(require){ 183 | var types = require("vuex/mutation-types"); 184 | var state = { 185 | // 查询条件 186 | searchKey : "", 187 | // 查询结果 188 | searchResultList : [] 189 | } 190 | // mutations 191 | var mutations = {} 192 | 193 | mutations[types.SET_SEARCH_LIST] = function(state,list) { 194 | state.searchResultList = list; 195 | } 196 | mutations[types.UPDATE_SEARCH_VAL] = function(state , key) { 197 | state.searchKey = key ; 198 | } 199 | mutations[types.CLEAR_SEARCH_VAL] = function(state ) { 200 | state.searchKey = ""; 201 | state.searchResultList = []; 202 | } 203 | 204 | return { 205 | state : state, 206 | mutations : mutations 207 | } 208 | }); 209 | ``` 210 | 211 | ### 6.创建动作actions 212 | 213 | 这里定义也是对应3个操作 214 | > 清空查询项 215 | > 更新查询项 216 | > 获取查询结果集合 217 | 218 | `clearSearchKey` 方法中 219 | 220 | > 1. 获取store 221 | > 2. 使用store.dispatch(对应types) 触发变化mutation 222 | (如果参数可以在第二个参数后面加 最新版本也可以直接对象形式传参数) 223 | 224 | ```javascript 225 | define(function(require){ 226 | var api = require("api"); 227 | var types = require("vuex/mutation-types") 228 | var actions = { 229 | // clear 查询项 230 | clearSearchKey : function(store){ 231 | store.dispatch(types.CLEAR_SEARCH_VAL) 232 | }, 233 | // 更新查询项 234 | updateSearchKey : function(store , key){ 235 | store.dispatch(types.UPDATE_SEARCH_VAL,key); 236 | }, 237 | // 查询结果集合 238 | searchParamList : function(store , group ,key){ 239 | var result = api.searchParamList({ 240 | type:group, 241 | key:key 242 | }); 243 | if(result.data){ 244 | store.dispatch(types.SET_SEARCH_LIST,result.data); 245 | } 246 | } 247 | 248 | } 249 | return actions; 250 | }) 251 | 252 | ``` 253 | 254 | ### 7. 创建业务组件 255 | 折腾了这么多 终于可以写组件了 - -！以`component/Search.js`为说明 256 | 257 | 我们引用`searchGroup`组件 ,`vuex`的`actions` 再组件中创建`vuex`对象 258 | 259 | 在组件中配置getters来接收store的state 260 | 261 | > 例如`searchKey`我们引用了`vuex/modules/search`中的`state`对象中的`searchKey` 这里我们只是只读不去修改 262 | 263 | 配置methods来接受`vuex/actions`里的操作方法 264 | 最后编写我们其他代码 完成search.js的创建 265 | 266 | ``` javascript 267 | var Vue = require("vue"); 268 | var SearchGroup = require("component/SearchGroup"); 269 | var actions = require("vuex/actions") 270 | var getters = require("vuex/getters"); 271 | return Vue.extend({ 272 | vuex :{ 273 | getters : { 274 | searchGroupItem: function(store){ 275 | return store.searchGroup.searchGroupItem 276 | }, 277 | searchGroup:function(store){ 278 | return store.searchGroup.searchGroup 279 | }, 280 | searchKey : function(store){ 281 | return store.search.searchKey 282 | }, 283 | isEmptySearchKey : getters.isEmptySearchKey 284 | }, 285 | actions: { 286 | searchParamList:actions.searchParamList , 287 | clearSearchKey:actions.clearSearchKey, 288 | updateSearchKey:actions.updateSearchKey 289 | } 290 | }, 291 | methods : { 292 | clearAction:function(){ 293 | this.clearSearchKey() 294 | }, 295 | searchAction:function(e){ 296 | if(this.searchKey.length){ 297 | this.searchParamList(this.searchGroup,this.searchKey) 298 | } 299 | }, 300 | update:function(e){ 301 | this.updateSearchKey(e.target.value) 302 | } 303 | }, 304 | template : "#search-template", 305 | components:{ 306 | searchGroup:SearchGroup 307 | } 308 | }); 309 | ``` 310 | 311 | ## 最终效果 312 | 313 | 经过以上步骤完成一个`search`组件在`vuex`的框架体系中的创建流程,当然步骤其实挺麻烦的 还有很多细节和方法没点到 还请见谅。 314 | 315 | 个人水平有限 只能BB到这里 结合本文可以去看es6的版本。 316 | 317 | 说下vuex下组件的一个整体流程 318 | 319 | search.js中触发一个`methodA` 320 | --> `methodA`触发(getter --> Actions `methodA`) 321 | --> `methodA` 通过**vuex.actions**里actions **store.dispatch(types.METHODA)** 322 | --> **vuex.modules.search**配置的mutations[types.METHODA] 进行state的操作 323 | --> state改变某个状态A 响应到search.js中属性a (getter --> a = search.A) 324 | 325 | ![](/tutorial/img/final.gif) 326 | 327 | ------ 328 | 作者 329 | [yelingfeng](https://github.com/yelingfeng) 330 | 331 | 相关链接 332 | 333 | [vuejs](https://github.com/vuejs/vue) 334 | [vuex](https://github.com/vuejs/vuex) 335 | [requirejs](https://github.com/requirejs/requirejs) 336 | 337 | 特别感谢jackblog-vue 338 | 339 | [jackblog-vue](https://github.com/jackhutu/jackblog-vue) 340 | 341 | | 专业技术群分享| 342 | | :----- | 343 | |Vuejs 364912432| 344 | |Angularjs 238251402| 345 | |React 530415177| 346 | |Nodejs 422910907| 347 | |PHP高级开发 132984819| 348 | |JAVA高级开发 145381037| 349 | |移动微信前端开发 148257606| 350 | -------------------------------------------------------------------------------- /src/assets/css/md-facefont.css: -------------------------------------------------------------------------------- 1 | 2 | /* cyrillic-ext */ 3 | @font-face { 4 | font-family: 'Roboto'; 5 | font-style: normal; 6 | font-weight: 300; 7 | src: local('Roboto Light'), local('Roboto-Light'), url("./../font/roboto/Roboto-Light.woff2") format('woff2'); 8 | unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; 9 | } 10 | /* cyrillic */ 11 | @font-face { 12 | font-family: 'Roboto'; 13 | font-style: normal; 14 | font-weight: 300; 15 | src: local('Roboto Light'), local('Roboto-Light'), url("./../font/roboto/Roboto-Light.woff2") format('woff2'); 16 | unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; 17 | } 18 | /* greek-ext */ 19 | @font-face { 20 | font-family: 'Roboto'; 21 | font-style: normal; 22 | font-weight: 300; 23 | src: local('Roboto Light'), local('Roboto-Light'), url("./../font/roboto/Roboto-Light.woff2") format('woff2'); 24 | unicode-range: U+1F00-1FFF; 25 | } 26 | /* greek */ 27 | @font-face { 28 | font-family: 'Roboto'; 29 | font-style: normal; 30 | font-weight: 300; 31 | src: local('Roboto Light'), local('Roboto-Light'), url("./../font/roboto/Roboto-Light.woff2") format('woff2'); 32 | unicode-range: U+0370-03FF; 33 | } 34 | /* vietnamese */ 35 | @font-face { 36 | font-family: 'Roboto'; 37 | font-style: normal; 38 | font-weight: 300; 39 | src: local('Roboto Light'), local('Roboto-Light'), url("./../font/roboto/Roboto-Light.woff2") format('woff2'); 40 | unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB; 41 | } 42 | /* latin-ext */ 43 | @font-face { 44 | font-family: 'Roboto'; 45 | font-style: normal; 46 | font-weight: 300; 47 | src: local('Roboto Light'), local('Roboto-Light'), url("./../font/roboto/Roboto-Light.woff2") format('woff2'); 48 | unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; 49 | } 50 | /* latin */ 51 | @font-face { 52 | font-family: 'Roboto'; 53 | font-style: normal; 54 | font-weight: 300; 55 | src: local('Roboto Light'), local('Roboto-Light'), url("./../font/roboto/Roboto-Light.woff2") format('woff2'); 56 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; 57 | } 58 | /* cyrillic-ext */ 59 | @font-face { 60 | font-family: 'Roboto'; 61 | font-style: normal; 62 | font-weight: 400; 63 | src: local('Roboto'), local('Roboto-Regular'), url("./../font/roboto/Roboto-Regular.woff2") format('woff2'); 64 | unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; 65 | } 66 | /* cyrillic */ 67 | @font-face { 68 | font-family: 'Roboto'; 69 | font-style: normal; 70 | font-weight: 400; 71 | src: local('Roboto'), local('Roboto-Regular'), url("./../font/roboto/Roboto-Regular.woff2") format('woff2'); 72 | unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; 73 | } 74 | /* greek-ext */ 75 | @font-face { 76 | font-family: 'Roboto'; 77 | font-style: normal; 78 | font-weight: 400; 79 | src: local('Roboto'), local('Roboto-Regular'), url("./../font/roboto/Roboto-Regular.woff2") format('woff2'); 80 | unicode-range: U+1F00-1FFF; 81 | } 82 | /* greek */ 83 | @font-face { 84 | font-family: 'Roboto'; 85 | font-style: normal; 86 | font-weight: 400; 87 | src: local('Roboto'), local('Roboto-Regular'), url("./../font/roboto/Roboto-Regular.woff2") format('woff2'); 88 | unicode-range: U+0370-03FF; 89 | } 90 | /* vietnamese */ 91 | @font-face { 92 | font-family: 'Roboto'; 93 | font-style: normal; 94 | font-weight: 400; 95 | src: local('Roboto'), local('Roboto-Regular'), url("./../font/roboto/Roboto-Regular.woff2") format('woff2'); 96 | unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB; 97 | } 98 | /* latin-ext */ 99 | @font-face { 100 | font-family: 'Roboto'; 101 | font-style: normal; 102 | font-weight: 400; 103 | src: local('Roboto'), local('Roboto-Regular'), url("./../font/roboto/Roboto-Regular.woff2") format('woff2'); 104 | unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; 105 | } 106 | /* latin */ 107 | @font-face { 108 | font-family: 'Roboto'; 109 | font-style: normal; 110 | font-weight: 400; 111 | src: local('Roboto'), local('Roboto-Regular'), url("./../font/roboto/Roboto-Regular.woff2") format('woff2'); 112 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; 113 | } 114 | /* cyrillic-ext */ 115 | @font-face { 116 | font-family: 'Roboto'; 117 | font-style: normal; 118 | font-weight: 500; 119 | src: local('Roboto Medium'), local('Roboto-Medium'), url("./../font/roboto/Roboto-Medium.woff2") format('woff2'); 120 | unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; 121 | } 122 | /* cyrillic */ 123 | @font-face { 124 | font-family: 'Roboto'; 125 | font-style: normal; 126 | font-weight: 500; 127 | src: local('Roboto Medium'), local('Roboto-Medium'), url("./../font/roboto/Roboto-Medium.woff2") format('woff2'); 128 | unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; 129 | } 130 | /* greek-ext */ 131 | @font-face { 132 | font-family: 'Roboto'; 133 | font-style: normal; 134 | font-weight: 500; 135 | src: local('Roboto Medium'), local('Roboto-Medium'), url("./../font/roboto/Roboto-Medium.woff2") format('woff2'); 136 | unicode-range: U+1F00-1FFF; 137 | } 138 | /* greek */ 139 | @font-face { 140 | font-family: 'Roboto'; 141 | font-style: normal; 142 | font-weight: 500; 143 | src: local('Roboto Medium'), local('Roboto-Medium'), url("./../font/roboto/Roboto-Medium.woff2") format('woff2'); 144 | unicode-range: U+0370-03FF; 145 | } 146 | /* vietnamese */ 147 | @font-face { 148 | font-family: 'Roboto'; 149 | font-style: normal; 150 | font-weight: 500; 151 | src: local('Roboto Medium'), local('Roboto-Medium'), url("./../font/roboto/Roboto-Medium.woff2") format('woff2'); 152 | unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB; 153 | } 154 | /* latin-ext */ 155 | @font-face { 156 | font-family: 'Roboto'; 157 | font-style: normal; 158 | font-weight: 500; 159 | src: local('Roboto Medium'), local('Roboto-Medium'), url("./../font/roboto/Roboto-Medium.woff2") format('woff2'); 160 | unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; 161 | } 162 | /* latin */ 163 | @font-face { 164 | font-family: 'Roboto'; 165 | font-style: normal; 166 | font-weight: 500; 167 | src: local('Roboto Medium'), local('Roboto-Medium'), url("./../font/roboto/Roboto-Medium.woff2") format('woff2'); 168 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; 169 | } 170 | /* cyrillic-ext */ 171 | @font-face { 172 | font-family: 'Roboto'; 173 | font-style: normal; 174 | font-weight: 700; 175 | src: local('Roboto Bold'), local('Roboto-Bold'), url("./../font/roboto/Roboto-Bold.woff2") format('woff2'); 176 | unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; 177 | } 178 | /* cyrillic */ 179 | @font-face { 180 | font-family: 'Roboto'; 181 | font-style: normal; 182 | font-weight: 700; 183 | src: local('Roboto Bold'), local('Roboto-Bold'), url("./../font/roboto/Roboto-Bold.woff2") format('woff2'); 184 | unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; 185 | } 186 | /* greek-ext */ 187 | @font-face { 188 | font-family: 'Roboto'; 189 | font-style: normal; 190 | font-weight: 700; 191 | src: local('Roboto Bold'), local('Roboto-Bold'), url("./../font/roboto/Roboto-Bold.woff2") format('woff2'); 192 | unicode-range: U+1F00-1FFF; 193 | } 194 | /* greek */ 195 | @font-face { 196 | font-family: 'Roboto'; 197 | font-style: normal; 198 | font-weight: 700; 199 | src: local('Roboto Bold'), local('Roboto-Bold'), url("./../font/roboto/Roboto-Bold.woff2") format('woff2'); 200 | unicode-range: U+0370-03FF; 201 | } 202 | /* vietnamese */ 203 | @font-face { 204 | font-family: 'Roboto'; 205 | font-style: normal; 206 | font-weight: 700; 207 | src: local('Roboto Bold'), local('Roboto-Bold'), url("./../font/roboto/Roboto-Bold.woff2") format('woff2'); 208 | unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB; 209 | } 210 | /* latin-ext */ 211 | @font-face { 212 | font-family: 'Roboto'; 213 | font-style: normal; 214 | font-weight: 700; 215 | src: local('Roboto Bold'), local('Roboto-Bold'), url("./../font/roboto/Roboto-Bold.woff2") format('woff2'); 216 | unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; 217 | } 218 | /* latin */ 219 | @font-face { 220 | font-family: 'Roboto'; 221 | font-style: normal; 222 | font-weight: 700; 223 | src: local('Roboto Bold'), local('Roboto-Bold'), url("./../font/roboto/Roboto-Bold.woff2") format('woff2'); 224 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; 225 | } 226 | 227 | @font-face { 228 | font-family: 'Material Icons'; 229 | font-style: normal; 230 | font-weight: 400; 231 | src: url("./../font/iconfont/MaterialIcons-Regular.eot"); /* For IE6-8 */ 232 | src: local('Material Icons'), 233 | local('MaterialIcons-Regular'), 234 | url("./../font/iconfont/MaterialIcons-Regular.woff2") format('woff2'), 235 | url("./../font/iconfont/MaterialIcons-Regular.woff") format('woff'), 236 | url("./../font/iconfont/MaterialIcons-Regular.ttf") format('truetype'); 237 | } 238 | .material-icons { 239 | font-family: 'Material Icons'; 240 | font-weight: normal; 241 | font-style: normal; 242 | font-size: 24px; /* Preferred icon size */ 243 | display: inline-block; 244 | width: 1em; 245 | height: 1em; 246 | line-height: 1; 247 | text-transform: none; 248 | /* Support for all WebKit browsers. */ 249 | -webkit-font-smoothing: antialiased; 250 | /* Support for Safari and Chrome. */ 251 | text-rendering: optimizeLegibility; 252 | /* Support for Firefox. */ 253 | -moz-osx-font-smoothing: grayscale; 254 | /* Support for IE. */ 255 | font-feature-settings: 'liga'; 256 | } -------------------------------------------------------------------------------- /amd/src/assets/css/md-facefont.css: -------------------------------------------------------------------------------- 1 | 2 | /* cyrillic-ext */ 3 | @font-face { 4 | font-family: 'Roboto'; 5 | font-style: normal; 6 | font-weight: 300; 7 | src: local('Roboto Light'), local('Roboto-Light'), url("./../font/roboto/Roboto-Light.woff2") format('woff2'); 8 | unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; 9 | } 10 | /* cyrillic */ 11 | @font-face { 12 | font-family: 'Roboto'; 13 | font-style: normal; 14 | font-weight: 300; 15 | src: local('Roboto Light'), local('Roboto-Light'), url("./../font/roboto/Roboto-Light.woff2") format('woff2'); 16 | unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; 17 | } 18 | /* greek-ext */ 19 | @font-face { 20 | font-family: 'Roboto'; 21 | font-style: normal; 22 | font-weight: 300; 23 | src: local('Roboto Light'), local('Roboto-Light'), url("./../font/roboto/Roboto-Light.woff2") format('woff2'); 24 | unicode-range: U+1F00-1FFF; 25 | } 26 | /* greek */ 27 | @font-face { 28 | font-family: 'Roboto'; 29 | font-style: normal; 30 | font-weight: 300; 31 | src: local('Roboto Light'), local('Roboto-Light'), url("./../font/roboto/Roboto-Light.woff2") format('woff2'); 32 | unicode-range: U+0370-03FF; 33 | } 34 | /* vietnamese */ 35 | @font-face { 36 | font-family: 'Roboto'; 37 | font-style: normal; 38 | font-weight: 300; 39 | src: local('Roboto Light'), local('Roboto-Light'), url("./../font/roboto/Roboto-Light.woff2") format('woff2'); 40 | unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB; 41 | } 42 | /* latin-ext */ 43 | @font-face { 44 | font-family: 'Roboto'; 45 | font-style: normal; 46 | font-weight: 300; 47 | src: local('Roboto Light'), local('Roboto-Light'), url("./../font/roboto/Roboto-Light.woff2") format('woff2'); 48 | unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; 49 | } 50 | /* latin */ 51 | @font-face { 52 | font-family: 'Roboto'; 53 | font-style: normal; 54 | font-weight: 300; 55 | src: local('Roboto Light'), local('Roboto-Light'), url("./../font/roboto/Roboto-Light.woff2") format('woff2'); 56 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; 57 | } 58 | /* cyrillic-ext */ 59 | @font-face { 60 | font-family: 'Roboto'; 61 | font-style: normal; 62 | font-weight: 400; 63 | src: local('Roboto'), local('Roboto-Regular'), url("./../font/roboto/Roboto-Regular.woff2") format('woff2'); 64 | unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; 65 | } 66 | /* cyrillic */ 67 | @font-face { 68 | font-family: 'Roboto'; 69 | font-style: normal; 70 | font-weight: 400; 71 | src: local('Roboto'), local('Roboto-Regular'), url("./../font/roboto/Roboto-Regular.woff2") format('woff2'); 72 | unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; 73 | } 74 | /* greek-ext */ 75 | @font-face { 76 | font-family: 'Roboto'; 77 | font-style: normal; 78 | font-weight: 400; 79 | src: local('Roboto'), local('Roboto-Regular'), url("./../font/roboto/Roboto-Regular.woff2") format('woff2'); 80 | unicode-range: U+1F00-1FFF; 81 | } 82 | /* greek */ 83 | @font-face { 84 | font-family: 'Roboto'; 85 | font-style: normal; 86 | font-weight: 400; 87 | src: local('Roboto'), local('Roboto-Regular'), url("./../font/roboto/Roboto-Regular.woff2") format('woff2'); 88 | unicode-range: U+0370-03FF; 89 | } 90 | /* vietnamese */ 91 | @font-face { 92 | font-family: 'Roboto'; 93 | font-style: normal; 94 | font-weight: 400; 95 | src: local('Roboto'), local('Roboto-Regular'), url("./../font/roboto/Roboto-Regular.woff2") format('woff2'); 96 | unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB; 97 | } 98 | /* latin-ext */ 99 | @font-face { 100 | font-family: 'Roboto'; 101 | font-style: normal; 102 | font-weight: 400; 103 | src: local('Roboto'), local('Roboto-Regular'), url("./../font/roboto/Roboto-Regular.woff2") format('woff2'); 104 | unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; 105 | } 106 | /* latin */ 107 | @font-face { 108 | font-family: 'Roboto'; 109 | font-style: normal; 110 | font-weight: 400; 111 | src: local('Roboto'), local('Roboto-Regular'), url("./../font/roboto/Roboto-Regular.woff2") format('woff2'); 112 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; 113 | } 114 | /* cyrillic-ext */ 115 | @font-face { 116 | font-family: 'Roboto'; 117 | font-style: normal; 118 | font-weight: 500; 119 | src: local('Roboto Medium'), local('Roboto-Medium'), url("./../font/roboto/Roboto-Medium.woff2") format('woff2'); 120 | unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; 121 | } 122 | /* cyrillic */ 123 | @font-face { 124 | font-family: 'Roboto'; 125 | font-style: normal; 126 | font-weight: 500; 127 | src: local('Roboto Medium'), local('Roboto-Medium'), url("./../font/roboto/Roboto-Medium.woff2") format('woff2'); 128 | unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; 129 | } 130 | /* greek-ext */ 131 | @font-face { 132 | font-family: 'Roboto'; 133 | font-style: normal; 134 | font-weight: 500; 135 | src: local('Roboto Medium'), local('Roboto-Medium'), url("./../font/roboto/Roboto-Medium.woff2") format('woff2'); 136 | unicode-range: U+1F00-1FFF; 137 | } 138 | /* greek */ 139 | @font-face { 140 | font-family: 'Roboto'; 141 | font-style: normal; 142 | font-weight: 500; 143 | src: local('Roboto Medium'), local('Roboto-Medium'), url("./../font/roboto/Roboto-Medium.woff2") format('woff2'); 144 | unicode-range: U+0370-03FF; 145 | } 146 | /* vietnamese */ 147 | @font-face { 148 | font-family: 'Roboto'; 149 | font-style: normal; 150 | font-weight: 500; 151 | src: local('Roboto Medium'), local('Roboto-Medium'), url("./../font/roboto/Roboto-Medium.woff2") format('woff2'); 152 | unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB; 153 | } 154 | /* latin-ext */ 155 | @font-face { 156 | font-family: 'Roboto'; 157 | font-style: normal; 158 | font-weight: 500; 159 | src: local('Roboto Medium'), local('Roboto-Medium'), url("./../font/roboto/Roboto-Medium.woff2") format('woff2'); 160 | unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; 161 | } 162 | /* latin */ 163 | @font-face { 164 | font-family: 'Roboto'; 165 | font-style: normal; 166 | font-weight: 500; 167 | src: local('Roboto Medium'), local('Roboto-Medium'), url("./../font/roboto/Roboto-Medium.woff2") format('woff2'); 168 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; 169 | } 170 | /* cyrillic-ext */ 171 | @font-face { 172 | font-family: 'Roboto'; 173 | font-style: normal; 174 | font-weight: 700; 175 | src: local('Roboto Bold'), local('Roboto-Bold'), url("./../font/roboto/Roboto-Bold.woff2") format('woff2'); 176 | unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; 177 | } 178 | /* cyrillic */ 179 | @font-face { 180 | font-family: 'Roboto'; 181 | font-style: normal; 182 | font-weight: 700; 183 | src: local('Roboto Bold'), local('Roboto-Bold'), url("./../font/roboto/Roboto-Bold.woff2") format('woff2'); 184 | unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; 185 | } 186 | /* greek-ext */ 187 | @font-face { 188 | font-family: 'Roboto'; 189 | font-style: normal; 190 | font-weight: 700; 191 | src: local('Roboto Bold'), local('Roboto-Bold'), url("./../font/roboto/Roboto-Bold.woff2") format('woff2'); 192 | unicode-range: U+1F00-1FFF; 193 | } 194 | /* greek */ 195 | @font-face { 196 | font-family: 'Roboto'; 197 | font-style: normal; 198 | font-weight: 700; 199 | src: local('Roboto Bold'), local('Roboto-Bold'), url("./../font/roboto/Roboto-Bold.woff2") format('woff2'); 200 | unicode-range: U+0370-03FF; 201 | } 202 | /* vietnamese */ 203 | @font-face { 204 | font-family: 'Roboto'; 205 | font-style: normal; 206 | font-weight: 700; 207 | src: local('Roboto Bold'), local('Roboto-Bold'), url("./../font/roboto/Roboto-Bold.woff2") format('woff2'); 208 | unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB; 209 | } 210 | /* latin-ext */ 211 | @font-face { 212 | font-family: 'Roboto'; 213 | font-style: normal; 214 | font-weight: 700; 215 | src: local('Roboto Bold'), local('Roboto-Bold'), url("./../font/roboto/Roboto-Bold.woff2") format('woff2'); 216 | unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; 217 | } 218 | /* latin */ 219 | @font-face { 220 | font-family: 'Roboto'; 221 | font-style: normal; 222 | font-weight: 700; 223 | src: local('Roboto Bold'), local('Roboto-Bold'), url("./../font/roboto/Roboto-Bold.woff2") format('woff2'); 224 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; 225 | } 226 | 227 | @font-face { 228 | font-family: 'Material Icons'; 229 | font-style: normal; 230 | font-weight: 400; 231 | src: url("./../font/iconfont/MaterialIcons-Regular.eot"); /* For IE6-8 */ 232 | src: local('Material Icons'), 233 | local('MaterialIcons-Regular'), 234 | url("./../font/iconfont/MaterialIcons-Regular.woff2") format('woff2'), 235 | url("./../font/iconfont/MaterialIcons-Regular.woff") format('woff'), 236 | url("./../font/iconfont/MaterialIcons-Regular.ttf") format('truetype'); 237 | } 238 | .material-icons { 239 | font-family: 'Material Icons'; 240 | font-weight: normal; 241 | font-style: normal; 242 | font-size: 24px; /* Preferred icon size */ 243 | display: inline-block; 244 | width: 1em; 245 | height: 1em; 246 | line-height: 1; 247 | text-transform: none; 248 | /* Support for all WebKit browsers. */ 249 | -webkit-font-smoothing: antialiased; 250 | /* Support for Safari and Chrome. */ 251 | text-rendering: optimizeLegibility; 252 | /* Support for Firefox. */ 253 | -moz-osx-font-smoothing: grayscale; 254 | /* Support for IE. */ 255 | font-feature-settings: 'liga'; 256 | } -------------------------------------------------------------------------------- /src/assets/js/bootstrap-material-design/js/material.js: -------------------------------------------------------------------------------- 1 | /* globals jQuery */ 2 | 3 | (function ($) { 4 | // Selector to select only not already processed elements 5 | $.expr[":"].notmdproc = function (obj) { 6 | if ($(obj).data("mdproc")) { 7 | return false; 8 | } else { 9 | return true; 10 | } 11 | }; 12 | 13 | function _isChar(evt) { 14 | if (typeof evt.which == "undefined") { 15 | return true; 16 | } else if (typeof evt.which == "number" && evt.which > 0) { 17 | return ( 18 | !evt.ctrlKey 19 | && !evt.metaKey 20 | && !evt.altKey 21 | && evt.which != 8 // backspace 22 | && evt.which != 9 // tab 23 | && evt.which != 13 // enter 24 | && evt.which != 16 // shift 25 | && evt.which != 17 // ctrl 26 | && evt.which != 20 // caps lock 27 | && evt.which != 27 // escape 28 | ); 29 | } 30 | return false; 31 | } 32 | 33 | function _addFormGroupFocus(element) { 34 | var $element = $(element); 35 | if (!$element.prop('disabled')) { // this is showing as undefined on chrome but works fine on firefox?? 36 | $element.closest(".form-group").addClass("is-focused"); 37 | } 38 | } 39 | 40 | function _toggleTypeFocus($input) { 41 | $input.closest('label').hover(function () { 42 | var $i = $(this).find('input'); 43 | if (!$i.prop('disabled')) { // hack because the _addFormGroupFocus() wasn't identifying the property on chrome 44 | _addFormGroupFocus($i); // need to find the input so we can check disablement 45 | } 46 | }, function () { 47 | _removeFormGroupFocus($(this).find('input')); 48 | }); 49 | } 50 | 51 | function _removeFormGroupFocus(element) { 52 | $(element).closest(".form-group").removeClass("is-focused"); // remove class from form-group 53 | } 54 | 55 | $.material = { 56 | "options": { 57 | // These options set what will be started by $.material.init() 58 | "validate": true, 59 | "input": true, 60 | "ripples": true, 61 | "checkbox": true, 62 | "togglebutton": true, 63 | "radio": true, 64 | "arrive": true, 65 | "autofill": false, 66 | 67 | "withRipples": [ 68 | ".btn:not(.btn-link)", 69 | ".card-image", 70 | ".navbar a:not(.withoutripple)", 71 | ".dropdown-menu a", 72 | ".nav-tabs a:not(.withoutripple)", 73 | ".withripple", 74 | ".pagination li:not(.active):not(.disabled) a:not(.withoutripple)" 75 | ].join(","), 76 | "inputElements": "input.form-control, textarea.form-control, select.form-control", 77 | "checkboxElements": ".checkbox > label > input[type=checkbox]", 78 | "togglebuttonElements": ".togglebutton > label > input[type=checkbox]", 79 | "radioElements": ".radio > label > input[type=radio]" 80 | }, 81 | "checkbox": function (selector) { 82 | // Add fake-checkbox to material checkboxes 83 | var $input = $((selector) ? selector : this.options.checkboxElements) 84 | .filter(":notmdproc") 85 | .data("mdproc", true) 86 | .after(""); 87 | 88 | _toggleTypeFocus($input); 89 | }, 90 | "togglebutton": function (selector) { 91 | // Add fake-checkbox to material checkboxes 92 | var $input = $((selector) ? selector : this.options.togglebuttonElements) 93 | .filter(":notmdproc") 94 | .data("mdproc", true) 95 | .after(""); 96 | 97 | _toggleTypeFocus($input); 98 | }, 99 | "radio": function (selector) { 100 | // Add fake-radio to material radios 101 | var $input = $((selector) ? selector : this.options.radioElements) 102 | .filter(":notmdproc") 103 | .data("mdproc", true) 104 | .after(""); 105 | 106 | _toggleTypeFocus($input); 107 | }, 108 | "input": function (selector) { 109 | $((selector) ? selector : this.options.inputElements) 110 | .filter(":notmdproc") 111 | .data("mdproc", true) 112 | .each(function () { 113 | var $input = $(this); 114 | 115 | // Requires form-group standard markup (will add it if necessary) 116 | var $formGroup = $input.closest(".form-group"); // note that form-group may be grandparent in the case of an input-group 117 | if ($formGroup.length === 0 && $input.attr('type') !== "hidden" && !$input.attr('hidden')) { 118 | $input.wrap("
"); 119 | $formGroup = $input.closest(".form-group"); // find node after attached (otherwise additional attachments don't work) 120 | } 121 | 122 | // Legacy - Add hint label if using the old shorthand data-hint attribute on the input 123 | if ($input.attr("data-hint")) { 124 | $input.after("

" + $input.attr("data-hint") + "

"); 125 | $input.removeAttr("data-hint"); 126 | } 127 | 128 | // Legacy - Change input-sm/lg to form-group-sm/lg instead (preferred standard and simpler css/less variants) 129 | var legacySizes = { 130 | "input-lg": "form-group-lg", 131 | "input-sm": "form-group-sm" 132 | }; 133 | $.each(legacySizes, function (legacySize, standardSize) { 134 | if ($input.hasClass(legacySize)) { 135 | $input.removeClass(legacySize); 136 | $formGroup.addClass(standardSize); 137 | } 138 | }); 139 | 140 | // Legacy - Add label-floating if using old shorthand 141 | if ($input.hasClass("floating-label")) { 142 | var placeholder = $input.attr("placeholder"); 143 | $input.attr("placeholder", null).removeClass("floating-label"); 144 | var id = $input.attr("id"); 145 | var forAttribute = ""; 146 | if (id) { 147 | forAttribute = "for='" + id + "'"; 148 | } 149 | $formGroup.addClass("label-floating"); 150 | $input.after(""); 151 | } 152 | 153 | // Set as empty if is empty (damn I must improve this...) 154 | if ($input.val() === null || $input.val() == "undefined" || $input.val() === "") { 155 | $formGroup.addClass("is-empty"); 156 | } 157 | 158 | // Add at the end of the form-group 159 | $formGroup.append(""); 160 | 161 | // Support for file input 162 | if ($formGroup.find("input[type=file]").length > 0) { 163 | $formGroup.addClass("is-fileinput"); 164 | } 165 | }); 166 | }, 167 | "attachInputEventHandlers": function () { 168 | var validate = this.options.validate; 169 | 170 | $(document) 171 | .on("change", ".checkbox input[type=checkbox]", function () { 172 | $(this).blur(); 173 | }) 174 | .on("keydown paste", ".form-control", function (e) { 175 | if (_isChar(e)) { 176 | $(this).closest(".form-group").removeClass("is-empty"); 177 | } 178 | }) 179 | .on("keyup change", ".form-control", function () { 180 | var $input = $(this); 181 | var $formGroup = $input.closest(".form-group"); 182 | var isValid = (typeof $input[0].checkValidity === "undefined" || $input[0].checkValidity()); 183 | 184 | if ($input.val() === "") { 185 | $formGroup.addClass("is-empty"); 186 | } 187 | else { 188 | $formGroup.removeClass("is-empty"); 189 | } 190 | 191 | // Validation events do not bubble, so they must be attached directly to the input: http://jsfiddle.net/PEpRM/1/ 192 | // Further, even the bind method is being caught, but since we are already calling #checkValidity here, just alter 193 | // the form-group on change. 194 | // 195 | // NOTE: I'm not sure we should be intervening regarding validation, this seems better as a README and snippet of code. 196 | // BUT, I've left it here for backwards compatibility. 197 | if (validate) { 198 | if (isValid) { 199 | $formGroup.removeClass("has-error"); 200 | } 201 | else { 202 | $formGroup.addClass("has-error"); 203 | } 204 | } 205 | }) 206 | .on("focus", ".form-control, .form-group.is-fileinput", function () { 207 | _addFormGroupFocus(this); 208 | }) 209 | .on("blur", ".form-control, .form-group.is-fileinput", function () { 210 | _removeFormGroupFocus(this); 211 | }) 212 | // make sure empty is added back when there is a programmatic value change. 213 | // NOTE: programmatic changing of value using $.val() must trigger the change event i.e. $.val('x').trigger('change') 214 | .on("change", ".form-group input", function () { 215 | var $input = $(this); 216 | if ($input.attr("type") == "file") { 217 | return; 218 | } 219 | 220 | var $formGroup = $input.closest(".form-group"); 221 | var value = $input.val(); 222 | if (value) { 223 | $formGroup.removeClass("is-empty"); 224 | } else { 225 | $formGroup.addClass("is-empty"); 226 | } 227 | }) 228 | // set the fileinput readonly field with the name of the file 229 | .on("change", ".form-group.is-fileinput input[type='file']", function () { 230 | var $input = $(this); 231 | var $formGroup = $input.closest(".form-group"); 232 | var value = ""; 233 | $.each(this.files, function (i, file) { 234 | value += file.name + ", "; 235 | }); 236 | value = value.substring(0, value.length - 2); 237 | if (value) { 238 | $formGroup.removeClass("is-empty"); 239 | } else { 240 | $formGroup.addClass("is-empty"); 241 | } 242 | $formGroup.find("input.form-control[readonly]").val(value); 243 | }); 244 | }, 245 | "ripples": function (selector) { 246 | $((selector) ? selector : this.options.withRipples).ripples(); 247 | }, 248 | "autofill": function () { 249 | // This part of code will detect autofill when the page is loading (username and password inputs for example) 250 | var loading = setInterval(function () { 251 | $("input[type!=checkbox]").each(function () { 252 | var $this = $(this); 253 | if ($this.val() && $this.val() !== $this.attr("value")) { 254 | $this.trigger("change"); 255 | } 256 | }); 257 | }, 100); 258 | 259 | // After 10 seconds we are quite sure all the needed inputs are autofilled then we can stop checking them 260 | setTimeout(function () { 261 | clearInterval(loading); 262 | }, 10000); 263 | }, 264 | "attachAutofillEventHandlers": function () { 265 | // Listen on inputs of the focused form (because user can select from the autofill dropdown only when the input has focus) 266 | var focused; 267 | $(document) 268 | .on("focus", "input", function () { 269 | var $inputs = $(this).parents("form").find("input").not("[type=file]"); 270 | focused = setInterval(function () { 271 | $inputs.each(function () { 272 | var $this = $(this); 273 | if ($this.val() !== $this.attr("value")) { 274 | $this.trigger("change"); 275 | } 276 | }); 277 | }, 100); 278 | }) 279 | .on("blur", ".form-group input", function () { 280 | clearInterval(focused); 281 | }); 282 | }, 283 | "init": function (options) { 284 | this.options = $.extend({}, this.options, options); 285 | var $document = $(document); 286 | 287 | if ($.fn.ripples && this.options.ripples) { 288 | this.ripples(); 289 | } 290 | if (this.options.input) { 291 | this.input(); 292 | this.attachInputEventHandlers(); 293 | } 294 | if (this.options.checkbox) { 295 | this.checkbox(); 296 | } 297 | if (this.options.togglebutton) { 298 | this.togglebutton(); 299 | } 300 | if (this.options.radio) { 301 | this.radio(); 302 | } 303 | if (this.options.autofill) { 304 | this.autofill(); 305 | this.attachAutofillEventHandlers(); 306 | } 307 | 308 | if (document.arrive && this.options.arrive) { 309 | if ($.fn.ripples && this.options.ripples) { 310 | $document.arrive(this.options.withRipples, function () { 311 | $.material.ripples($(this)); 312 | }); 313 | } 314 | if (this.options.input) { 315 | $document.arrive(this.options.inputElements, function () { 316 | $.material.input($(this)); 317 | }); 318 | } 319 | if (this.options.checkbox) { 320 | $document.arrive(this.options.checkboxElements, function () { 321 | $.material.checkbox($(this)); 322 | }); 323 | } 324 | if (this.options.radio) { 325 | $document.arrive(this.options.radioElements, function () { 326 | $.material.radio($(this)); 327 | }); 328 | } 329 | if (this.options.togglebutton) { 330 | $document.arrive(this.options.togglebuttonElements, function () { 331 | $.material.togglebutton($(this)); 332 | }); 333 | } 334 | 335 | } 336 | } 337 | }; 338 | 339 | })(jQuery); 340 | -------------------------------------------------------------------------------- /amd/src/assets/js/bootstrap-material-design/js/material.js: -------------------------------------------------------------------------------- 1 | /* globals jQuery */ 2 | 3 | (function ($) { 4 | // Selector to select only not already processed elements 5 | $.expr[":"].notmdproc = function (obj) { 6 | if ($(obj).data("mdproc")) { 7 | return false; 8 | } else { 9 | return true; 10 | } 11 | }; 12 | 13 | function _isChar(evt) { 14 | if (typeof evt.which == "undefined") { 15 | return true; 16 | } else if (typeof evt.which == "number" && evt.which > 0) { 17 | return ( 18 | !evt.ctrlKey 19 | && !evt.metaKey 20 | && !evt.altKey 21 | && evt.which != 8 // backspace 22 | && evt.which != 9 // tab 23 | && evt.which != 13 // enter 24 | && evt.which != 16 // shift 25 | && evt.which != 17 // ctrl 26 | && evt.which != 20 // caps lock 27 | && evt.which != 27 // escape 28 | ); 29 | } 30 | return false; 31 | } 32 | 33 | function _addFormGroupFocus(element) { 34 | var $element = $(element); 35 | if (!$element.prop('disabled')) { // this is showing as undefined on chrome but works fine on firefox?? 36 | $element.closest(".form-group").addClass("is-focused"); 37 | } 38 | } 39 | 40 | function _toggleTypeFocus($input) { 41 | $input.closest('label').hover(function () { 42 | var $i = $(this).find('input'); 43 | if (!$i.prop('disabled')) { // hack because the _addFormGroupFocus() wasn't identifying the property on chrome 44 | _addFormGroupFocus($i); // need to find the input so we can check disablement 45 | } 46 | }, function () { 47 | _removeFormGroupFocus($(this).find('input')); 48 | }); 49 | } 50 | 51 | function _removeFormGroupFocus(element) { 52 | $(element).closest(".form-group").removeClass("is-focused"); // remove class from form-group 53 | } 54 | 55 | $.material = { 56 | "options": { 57 | // These options set what will be started by $.material.init() 58 | "validate": true, 59 | "input": true, 60 | "ripples": true, 61 | "checkbox": true, 62 | "togglebutton": true, 63 | "radio": true, 64 | "arrive": true, 65 | "autofill": false, 66 | 67 | "withRipples": [ 68 | ".btn:not(.btn-link)", 69 | ".card-image", 70 | ".navbar a:not(.withoutripple)", 71 | ".dropdown-menu a", 72 | ".nav-tabs a:not(.withoutripple)", 73 | ".withripple", 74 | ".pagination li:not(.active):not(.disabled) a:not(.withoutripple)" 75 | ].join(","), 76 | "inputElements": "input.form-control, textarea.form-control, select.form-control", 77 | "checkboxElements": ".checkbox > label > input[type=checkbox]", 78 | "togglebuttonElements": ".togglebutton > label > input[type=checkbox]", 79 | "radioElements": ".radio > label > input[type=radio]" 80 | }, 81 | "checkbox": function (selector) { 82 | // Add fake-checkbox to material checkboxes 83 | var $input = $((selector) ? selector : this.options.checkboxElements) 84 | .filter(":notmdproc") 85 | .data("mdproc", true) 86 | .after(""); 87 | 88 | _toggleTypeFocus($input); 89 | }, 90 | "togglebutton": function (selector) { 91 | // Add fake-checkbox to material checkboxes 92 | var $input = $((selector) ? selector : this.options.togglebuttonElements) 93 | .filter(":notmdproc") 94 | .data("mdproc", true) 95 | .after(""); 96 | 97 | _toggleTypeFocus($input); 98 | }, 99 | "radio": function (selector) { 100 | // Add fake-radio to material radios 101 | var $input = $((selector) ? selector : this.options.radioElements) 102 | .filter(":notmdproc") 103 | .data("mdproc", true) 104 | .after(""); 105 | 106 | _toggleTypeFocus($input); 107 | }, 108 | "input": function (selector) { 109 | $((selector) ? selector : this.options.inputElements) 110 | .filter(":notmdproc") 111 | .data("mdproc", true) 112 | .each(function () { 113 | var $input = $(this); 114 | 115 | // Requires form-group standard markup (will add it if necessary) 116 | var $formGroup = $input.closest(".form-group"); // note that form-group may be grandparent in the case of an input-group 117 | if ($formGroup.length === 0 && $input.attr('type') !== "hidden" && !$input.attr('hidden')) { 118 | $input.wrap("
"); 119 | $formGroup = $input.closest(".form-group"); // find node after attached (otherwise additional attachments don't work) 120 | } 121 | 122 | // Legacy - Add hint label if using the old shorthand data-hint attribute on the input 123 | if ($input.attr("data-hint")) { 124 | $input.after("

" + $input.attr("data-hint") + "

"); 125 | $input.removeAttr("data-hint"); 126 | } 127 | 128 | // Legacy - Change input-sm/lg to form-group-sm/lg instead (preferred standard and simpler css/less variants) 129 | var legacySizes = { 130 | "input-lg": "form-group-lg", 131 | "input-sm": "form-group-sm" 132 | }; 133 | $.each(legacySizes, function (legacySize, standardSize) { 134 | if ($input.hasClass(legacySize)) { 135 | $input.removeClass(legacySize); 136 | $formGroup.addClass(standardSize); 137 | } 138 | }); 139 | 140 | // Legacy - Add label-floating if using old shorthand 141 | if ($input.hasClass("floating-label")) { 142 | var placeholder = $input.attr("placeholder"); 143 | $input.attr("placeholder", null).removeClass("floating-label"); 144 | var id = $input.attr("id"); 145 | var forAttribute = ""; 146 | if (id) { 147 | forAttribute = "for='" + id + "'"; 148 | } 149 | $formGroup.addClass("label-floating"); 150 | $input.after(""); 151 | } 152 | 153 | // Set as empty if is empty (damn I must improve this...) 154 | if ($input.val() === null || $input.val() == "undefined" || $input.val() === "") { 155 | $formGroup.addClass("is-empty"); 156 | } 157 | 158 | // Add at the end of the form-group 159 | $formGroup.append(""); 160 | 161 | // Support for file input 162 | if ($formGroup.find("input[type=file]").length > 0) { 163 | $formGroup.addClass("is-fileinput"); 164 | } 165 | }); 166 | }, 167 | "attachInputEventHandlers": function () { 168 | var validate = this.options.validate; 169 | 170 | $(document) 171 | .on("change", ".checkbox input[type=checkbox]", function () { 172 | $(this).blur(); 173 | }) 174 | .on("keydown paste", ".form-control", function (e) { 175 | if (_isChar(e)) { 176 | $(this).closest(".form-group").removeClass("is-empty"); 177 | } 178 | }) 179 | .on("keyup change", ".form-control", function () { 180 | var $input = $(this); 181 | var $formGroup = $input.closest(".form-group"); 182 | var isValid = (typeof $input[0].checkValidity === "undefined" || $input[0].checkValidity()); 183 | 184 | if ($input.val() === "") { 185 | $formGroup.addClass("is-empty"); 186 | } 187 | else { 188 | $formGroup.removeClass("is-empty"); 189 | } 190 | 191 | // Validation events do not bubble, so they must be attached directly to the input: http://jsfiddle.net/PEpRM/1/ 192 | // Further, even the bind method is being caught, but since we are already calling #checkValidity here, just alter 193 | // the form-group on change. 194 | // 195 | // NOTE: I'm not sure we should be intervening regarding validation, this seems better as a README and snippet of code. 196 | // BUT, I've left it here for backwards compatibility. 197 | if (validate) { 198 | if (isValid) { 199 | $formGroup.removeClass("has-error"); 200 | } 201 | else { 202 | $formGroup.addClass("has-error"); 203 | } 204 | } 205 | }) 206 | .on("focus", ".form-control, .form-group.is-fileinput", function () { 207 | _addFormGroupFocus(this); 208 | }) 209 | .on("blur", ".form-control, .form-group.is-fileinput", function () { 210 | _removeFormGroupFocus(this); 211 | }) 212 | // make sure empty is added back when there is a programmatic value change. 213 | // NOTE: programmatic changing of value using $.val() must trigger the change event i.e. $.val('x').trigger('change') 214 | .on("change", ".form-group input", function () { 215 | var $input = $(this); 216 | if ($input.attr("type") == "file") { 217 | return; 218 | } 219 | 220 | var $formGroup = $input.closest(".form-group"); 221 | var value = $input.val(); 222 | if (value) { 223 | $formGroup.removeClass("is-empty"); 224 | } else { 225 | $formGroup.addClass("is-empty"); 226 | } 227 | }) 228 | // set the fileinput readonly field with the name of the file 229 | .on("change", ".form-group.is-fileinput input[type='file']", function () { 230 | var $input = $(this); 231 | var $formGroup = $input.closest(".form-group"); 232 | var value = ""; 233 | $.each(this.files, function (i, file) { 234 | value += file.name + ", "; 235 | }); 236 | value = value.substring(0, value.length - 2); 237 | if (value) { 238 | $formGroup.removeClass("is-empty"); 239 | } else { 240 | $formGroup.addClass("is-empty"); 241 | } 242 | $formGroup.find("input.form-control[readonly]").val(value); 243 | }); 244 | }, 245 | "ripples": function (selector) { 246 | $((selector) ? selector : this.options.withRipples).ripples(); 247 | }, 248 | "autofill": function () { 249 | // This part of code will detect autofill when the page is loading (username and password inputs for example) 250 | var loading = setInterval(function () { 251 | $("input[type!=checkbox]").each(function () { 252 | var $this = $(this); 253 | if ($this.val() && $this.val() !== $this.attr("value")) { 254 | $this.trigger("change"); 255 | } 256 | }); 257 | }, 100); 258 | 259 | // After 10 seconds we are quite sure all the needed inputs are autofilled then we can stop checking them 260 | setTimeout(function () { 261 | clearInterval(loading); 262 | }, 10000); 263 | }, 264 | "attachAutofillEventHandlers": function () { 265 | // Listen on inputs of the focused form (because user can select from the autofill dropdown only when the input has focus) 266 | var focused; 267 | $(document) 268 | .on("focus", "input", function () { 269 | var $inputs = $(this).parents("form").find("input").not("[type=file]"); 270 | focused = setInterval(function () { 271 | $inputs.each(function () { 272 | var $this = $(this); 273 | if ($this.val() !== $this.attr("value")) { 274 | $this.trigger("change"); 275 | } 276 | }); 277 | }, 100); 278 | }) 279 | .on("blur", ".form-group input", function () { 280 | clearInterval(focused); 281 | }); 282 | }, 283 | "init": function (options) { 284 | this.options = $.extend({}, this.options, options); 285 | var $document = $(document); 286 | 287 | if ($.fn.ripples && this.options.ripples) { 288 | this.ripples(); 289 | } 290 | if (this.options.input) { 291 | this.input(); 292 | this.attachInputEventHandlers(); 293 | } 294 | if (this.options.checkbox) { 295 | this.checkbox(); 296 | } 297 | if (this.options.togglebutton) { 298 | this.togglebutton(); 299 | } 300 | if (this.options.radio) { 301 | this.radio(); 302 | } 303 | if (this.options.autofill) { 304 | this.autofill(); 305 | this.attachAutofillEventHandlers(); 306 | } 307 | 308 | if (document.arrive && this.options.arrive) { 309 | if ($.fn.ripples && this.options.ripples) { 310 | $document.arrive(this.options.withRipples, function () { 311 | $.material.ripples($(this)); 312 | }); 313 | } 314 | if (this.options.input) { 315 | $document.arrive(this.options.inputElements, function () { 316 | $.material.input($(this)); 317 | }); 318 | } 319 | if (this.options.checkbox) { 320 | $document.arrive(this.options.checkboxElements, function () { 321 | $.material.checkbox($(this)); 322 | }); 323 | } 324 | if (this.options.radio) { 325 | $document.arrive(this.options.radioElements, function () { 326 | $.material.radio($(this)); 327 | }); 328 | } 329 | if (this.options.togglebutton) { 330 | $document.arrive(this.options.togglebuttonElements, function () { 331 | $.material.togglebutton($(this)); 332 | }); 333 | } 334 | 335 | } 336 | } 337 | }; 338 | 339 | })(jQuery); 340 | -------------------------------------------------------------------------------- /amd/src/require.js: -------------------------------------------------------------------------------- 1 | /* 2 | RequireJS 2.1.11 Copyright (c) 2010-2014, The Dojo Foundation All Rights Reserved. 3 | Available via the MIT or new BSD license. 4 | see: http://github.com/jrburke/requirejs for details 5 | */ 6 | var requirejs,require,define; 7 | (function(ca){function G(b){return"[object Function]"===M.call(b)}function H(b){return"[object Array]"===M.call(b)}function v(b,c){if(b){var d;for(d=0;dthis.depCount&&!this.defined){if(G(c)){if(this.events.error&&this.map.isDefine||h.onError!==da)try{f=i.execCb(b,c,e,f)}catch(d){a=d}else f=i.execCb(b,c,e,f);this.map.isDefine&&void 0===f&&((e=this.module)?f=e.exports:this.usingExports&& 19 | (f=this.exports));if(a)return a.requireMap=this.map,a.requireModules=this.map.isDefine?[this.map.id]:null,a.requireType=this.map.isDefine?"define":"require",w(this.error=a)}else f=c;this.exports=f;if(this.map.isDefine&&!this.ignore&&(p[b]=f,h.onResourceLoad))h.onResourceLoad(i,this.map,this.depMaps);y(b);this.defined=!0}this.defining=!1;this.defined&&!this.defineEmitted&&(this.defineEmitted=!0,this.emit("defined",this.exports),this.defineEmitComplete=!0)}}else this.fetch()}},callPlugin:function(){var a= 20 | this.map,b=a.id,d=m(a.prefix);this.depMaps.push(d);r(d,"defined",t(this,function(f){var d,g;g=j(ba,this.map.id);var J=this.map.name,u=this.map.parentMap?this.map.parentMap.name:null,p=i.makeRequire(a.parentMap,{enableBuildCallback:!0});if(this.map.unnormalized){if(f.normalize&&(J=f.normalize(J,function(a){return c(a,u,!0)})||""),f=m(a.prefix+"!"+J,this.map.parentMap),r(f,"defined",t(this,function(a){this.init([],function(){return a},null,{enabled:!0,ignore:!0})})),g=j(k,f.id)){this.depMaps.push(f); 21 | if(this.events.error)g.on("error",t(this,function(a){this.emit("error",a)}));g.enable()}}else g?(this.map.url=i.nameToUrl(g),this.load()):(d=t(this,function(a){this.init([],function(){return a},null,{enabled:!0})}),d.error=t(this,function(a){this.inited=!0;this.error=a;a.requireModules=[b];B(k,function(a){0===a.map.id.indexOf(b+"_unnormalized")&&y(a.map.id)});w(a)}),d.fromText=t(this,function(f,c){var g=a.name,J=m(g),k=O;c&&(f=c);k&&(O=!1);q(J);s(l.config,b)&&(l.config[g]=l.config[b]);try{h.exec(f)}catch(j){return w(C("fromtexteval", 22 | "fromText eval for "+b+" failed: "+j,j,[b]))}k&&(O=!0);this.depMaps.push(J);i.completeLoad(g);p([g],d)}),f.load(a.name,p,d,l))}));i.enable(d,this);this.pluginMaps[d.id]=d},enable:function(){W[this.map.id]=this;this.enabling=this.enabled=!0;v(this.depMaps,t(this,function(a,b){var c,f;if("string"===typeof a){a=m(a,this.map.isDefine?this.map:this.map.parentMap,!1,!this.skipMap);this.depMaps[b]=a;if(c=j(N,a.id)){this.depExports[b]=c(this);return}this.depCount+=1;r(a,"defined",t(this,function(a){this.defineDep(b, 23 | a);this.check()}));this.errback&&r(a,"error",t(this,this.errback))}c=a.id;f=k[c];!s(N,c)&&(f&&!f.enabled)&&i.enable(a,this)}));B(this.pluginMaps,t(this,function(a){var b=j(k,a.id);b&&!b.enabled&&i.enable(a,this)}));this.enabling=!1;this.check()},on:function(a,b){var c=this.events[a];c||(c=this.events[a]=[]);c.push(b)},emit:function(a,b){v(this.events[a],function(a){a(b)});"error"===a&&delete this.events[a]}};i={config:l,contextName:b,registry:k,defined:p,urlFetched:T,defQueue:A,Module:$,makeModuleMap:m, 24 | nextTick:h.nextTick,onError:w,configure:function(a){a.baseUrl&&"/"!==a.baseUrl.charAt(a.baseUrl.length-1)&&(a.baseUrl+="/");var b=l.shim,c={paths:!0,bundles:!0,config:!0,map:!0};B(a,function(a,b){c[b]?(l[b]||(l[b]={}),V(l[b],a,!0,!0)):l[b]=a});a.bundles&&B(a.bundles,function(a,b){v(a,function(a){a!==b&&(ba[a]=b)})});a.shim&&(B(a.shim,function(a,c){H(a)&&(a={deps:a});if((a.exports||a.init)&&!a.exportsFn)a.exportsFn=i.makeShimExports(a);b[c]=a}),l.shim=b);a.packages&&v(a.packages,function(a){var b, 25 | a="string"===typeof a?{name:a}:a;b=a.name;a.location&&(l.paths[b]=a.location);l.pkgs[b]=a.name+"/"+(a.main||"main").replace(ja,"").replace(R,"")});B(k,function(a,b){!a.inited&&!a.map.unnormalized&&(a.map=m(b))});if(a.deps||a.callback)i.require(a.deps||[],a.callback)},makeShimExports:function(a){return function(){var b;a.init&&(b=a.init.apply(ca,arguments));return b||a.exports&&ea(a.exports)}},makeRequire:function(a,e){function g(f,c,d){var j,l;e.enableBuildCallback&&(c&&G(c))&&(c.__requireJsBuild= 26 | !0);if("string"===typeof f){if(G(c))return w(C("requireargs","Invalid require call"),d);if(a&&s(N,f))return N[f](k[a.id]);if(h.get)return h.get(i,f,a,g);j=m(f,a,!1,!0);j=j.id;return!s(p,j)?w(C("notloaded",'Module name "'+j+'" has not been loaded yet for context: '+b+(a?"":". Use require([])"))):p[j]}L();i.nextTick(function(){L();l=q(m(null,a));l.skipMap=e.skipMap;l.init(f,c,d,{enabled:!0});D()});return g}e=e||{};V(g,{isBrowser:z,toUrl:function(b){var e,d=b.lastIndexOf("."),g=b.split("/")[0];if(-1!== 27 | d&&(!("."===g||".."===g)||1g.attachEvent.toString().indexOf("[native code"))&&!Z?(O=!0,g.attachEvent("onreadystatechange",b.onScriptLoad)): 34 | (g.addEventListener("load",b.onScriptLoad,!1),g.addEventListener("error",b.onScriptError,!1)),g.src=d,L=g,D?y.insertBefore(g,D):y.appendChild(g),L=null,g;if(fa)try{importScripts(d),b.completeLoad(c)}catch(j){b.onError(C("importscripts","importScripts failed for "+c+" at "+d,j,[c]))}};z&&!r.skipDataMain&&U(document.getElementsByTagName("script"),function(b){y||(y=b.parentNode);if(K=b.getAttribute("data-main"))return q=K,r.baseUrl||(E=q.split("/"),q=E.pop(),Q=E.length?E.join("/")+"/":"./",r.baseUrl= 35 | Q),q=q.replace(R,""),h.jsExtRegExp.test(q)&&(q=K),r.deps=r.deps?r.deps.concat(q):[q],!0});define=function(b,c,d){var g,h;"string"!==typeof b&&(d=c,c=b,b=null);H(c)||(d=c,c=null);!c&&G(d)&&(c=[],d.length&&(d.toString().replace(la,"").replace(ma,function(b,d){c.push(d)}),c=(1===d.length?["require"]:["require","exports","module"]).concat(c)));if(O){if(!(g=L))P&&"interactive"===P.readyState||U(document.getElementsByTagName("script"),function(b){if("interactive"===b.readyState)return P=b}),g=P;g&&(b|| 36 | (b=g.getAttribute("data-requiremodule")),h=F[g.getAttribute("data-requirecontext")])}(h?h.defQueue:S).push([b,c,d])};define.amd={jQuery:!0};h.exec=function(b){return eval(b)};h(r)}})(this); 37 | --------------------------------------------------------------------------------