コード例 #1
0
ファイル: vue-table.min.js プロジェクト: mbronstein/flask-vue
!function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a="function"==typeof require&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}for(var i="function"==typeof require&&require,o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){var inserted=exports.cache={};exports.insert=function(css){if(!inserted[css]){inserted[css]=!0;var elem=document.createElement("style");return elem.setAttribute("type","text/css"),"textContent"in elem?elem.textContent=css:elem.styleSheet.cssText=css,document.getElementsByTagName("head")[0].appendChild(elem),elem}}},{}],2:[function(require,module,exports){var __vueify_insert__=require("vueify/lib/insert-css");__vueify_insert__.insert(".vuetable th.sortable:hover{color:#2185d0;cursor:pointer}.vuetable-actions{width:15%;padding:12px 0;text-align:center}.vuetable-pagination{background:#f9fafb!important}.vuetable-pagination-info{margin-top:auto;margin-bottom:auto}");Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={props:{wrapperClass:{type:String,default:function(){return null}},tableWrapper:{type:String,default:function(){return null}},tableClass:{type:String,default:function(){return"ui blue striped selectable celled stackable attached table"}},loadingClass:{type:String,default:function(){return"loading"}},dataPath:{type:String,default:function(){return"data"}},paginationPath:{type:String,default:function(){return"links.pagination"}},fields:{type:Array,required:!0},apiUrl:{type:String,required:!0},sortOrder:{type:Array,default:function(){return[]}},multiSort:{type:Boolean,default:function(){return!1}},multiSortKey:{type:String,default:"alt"},perPage:{type:Number,coerce:function(val){return parseInt(val)},default:function(){return 10}},ascendingIcon:{type:String,default:function(){return"blue chevron up icon"}},descendingIcon:{type:String,default:function(){return"blue chevron down icon"}},appendParams:{type:Array,default:function(){return[]}},showPagination:{type:Boolean,default:function(){return!0}},paginationComponent:{type:String,default:function(){return"vuetable-pagination"}},paginationInfoTemplate:{type:String,default:function(){return"Displaying {from} to {to} of {total} items"}},paginationInfoNoDataTemplate:{type:String,default:function(){return"No relevant data"}},paginationClass:{type:String,default:function(){return"ui bottom attached segment grid"}},paginationInfoClass:{type:String,default:function(){return"left floated left aligned six wide column"}},paginationComponentClass:{type:String,default:function(){return"right floated right aligned six wide column"}},paginationConfig:{type:String,default:function(){return"paginationConfig"}},paginationConfigCallback:{type:String,default:function(){return"paginationConfig"}},itemActions:{type:Array,default:function(){return[]}},queryParams:{type:Object,default:function(){return{sort:"sort",page:"page",perPage:"per_page"}}},loadOnStart:{type:Boolean,default:function(){return!0}},selectedTo:{type:Array,default:function(){return[]}},httpData:{type:Object,default:function(){return{}}},httpOptions:{type:Object,default:function(){return{}}},detailRow:{type:String,default:""},detailRowCallback:{type:String,default:""},detailRowId:{type:String,default:"id"},detailRowTransition:{type:String,default:""},detailRowClass:{type:String,default:"vuetable-detail-row"},detailRowComponent:{type:String,default:""},rowClassCallback:{type:String,default:""}},data:function(){return{eventPrefix:"vuetable:",tableData:null,tablePagination:null,currentPage:1,visibleDetailRows:[]}},directives:{attr:{update:function(value){for(var i in value)this.el.setAttribute(i,value[i])}}},computed:{paginationInfo:function(){return null==this.tablePagination||0==this.tablePagination.total?this.paginationInfoNoDataTemplate:this.paginationInfoTemplate.replace("{from}",this.tablePagination.from||0).replace("{to}",this.tablePagination.to||0).replace("{total}",this.tablePagination.total||0)},useDetailRow:function(){return this.tableData&&"undefined"==typeof this.tableData[0][this.detailRowId]?(console.warn('You need to define "detail-row-id" in order for detail-row feature to work!'),!1):""!==this.detailRowCallback.trim()||""!==this.detailRowComponent},useDetailRowComponent:function(){return""!==this.detailRowComponent},countVisibleFields:function(){return this.fields.filter(function(field){return field.visible}).length}},methods:{normalizeFields:function(){var obj,self=this;this.fields.forEach(function(field,i){obj="string"==typeof field?{name:field,title:self.setTitle(field),titleClass:"",dataClass:"",callback:null,visible:!0}:{name:field.name,title:void 0===field.title?self.setTitle(field.name):field.title,sortField:field.sortField,titleClass:void 0===field.titleClass?"":field.titleClass,dataClass:void 0===field.dataClass?"":field.dataClass,callback:void 0===field.callback?"":field.callback,visible:void 0===field.visible||field.visible},self.fields.$set(i,obj)})},setTitle:function(str){return this.isSpecialField(str)?"":this.titleCase(str)},titleCase:function(str){return str.replace(/\w+/g,function(txt){return txt.charAt(0).toUpperCase()+txt.substr(1).toLowerCase()})},notIn:function(str,arr){return arr.indexOf(str)===-1},loadData:function(){var self=this,wrapper=document.querySelector(this.tableWrapper);this.showLoadingAnimation(wrapper);var url=this.apiUrl+"?"+this.getAllQueryParams();this.$http.get(url,this.httpData,this.httpOptions).then(function(response){self.tableData=self.getObjectValue(response.body,self.dataPath,null),self.tablePagination=self.getObjectValue(response.body,self.paginationPath,null),null===self.tablePagination&&console.warn('vuetable: pagination-path "'+self.paginationPath+'" not found. It looks like the data returned from the sever does not have pagination information or you may have set it incorrectly.'),self.$nextTick(function(){self.dispatchEvent("load-success",response),self.broadcastEvent("load-success",self.tablePagination),self.hideLoadingAnimation(wrapper)})},function(response){self.dispatchEvent("load-error",response),self.broadcastEvent("load-error",response),self.hideLoadingAnimation(wrapper)})},getAllQueryParams:function(){var params=[this.queryParams.sort+"="+this.getSortParam(),this.queryParams.page+"="+this.currentPage,this.queryParams.perPage+"="+this.perPage].join("&");return this.appendParams.length>0&&(params+="&"+this.appendParams.join("&")),params},showLoadingAnimation:function(wrapper){null!==wrapper&&this.addClass(wrapper,this.loadingClass),this.dispatchEvent("loading")},hideLoadingAnimation:function(wrapper){null!==wrapper&&this.removeClass(wrapper,this.loadingClass),this.dispatchEvent("loaded")},getTitle:function(field){return"undefined"==typeof field.title?field.name.replace("."," "):field.title},getSortParam:function(){return this.sortOrder&&""!=this.sortOrder.field?"function"==typeof this.$parent.getSortParam?this.$parent.getSortParam.call(this.$parent,this.sortOrder):this.getDefaultSortParam():""},getDefaultSortParam:function(){for(var result="",i=0;i<this.sortOrder.length;i++){var fieldName="undefined"==typeof this.sortOrder[i].sortField?this.sortOrder[i].field:this.sortOrder[i].sortField;result+=fieldName+"|"+this.sortOrder[i].direction+(i+1<this.sortOrder.length?",":"")}return result},addClass:function(el,className){el.classList?el.classList.add(className):el.className+=" "+className},removeClass:function(el,className){el.classList?el.classList.remove(className):el.className=el.className.replace(new RegExp("(^|\\b)"+className.split(" ").join("|")+"(\\b|$)","gi")," ")},dispatchEvent:function(eventName,args){this.$dispatch(this.eventPrefix+eventName,args)},broadcastEvent:function(eventName,args){this.$broadcast(this.eventPrefix+eventName,args)},orderBy:function(field,event){if(this.isSortable(field)){var key=this.multiSortKey.toLowerCase()+"Key";if(this.multiSort&&event[key]){var i=this.currentSortOrder(field);i===!1?this.sortOrder.push({field:field.name,direction:"asc"}):"asc"==this.sortOrder[i].direction?this.sortOrder[i].direction="desc":this.sortOrder.splice(i,1)}else 0==this.sortOrder.length&&this.sortOrder.push({field:"",direction:"asc"}),this.sortOrder.splice(1),this.sortOrder[0].field==field.name?this.sortOrder[0].direction="asc"==this.sortOrder[0].direction?"desc":"asc":this.sortOrder[0].direction="asc",this.sortOrder[0].field=field.name,this.sortOrder[0].sortField=field.sortField;this.currentPage=1,this.loadData()}},isSortable:function(field){return!("undefined"==typeof field.sortField)},isCurrentSortField:function(field){return this.currentSortOrder(field)!==!1},currentSortOrder:function(field){if(!this.isSortable(field))return!1;for(var i=0;i<this.sortOrder.length;i++)if(this.sortOrder[i].field==field.name)return i;return!1},sortIcon:function(field){var i=this.currentSortOrder(field);return i!==!1?"asc"==this.sortOrder[i].direction?this.ascendingIcon:this.descendingIcon:""},sortIconOpacity:function(field){var max=1,min=.3,step=.3,count=this.sortOrder.length,current=this.currentSortOrder(field);max-count*step<min&&(step=(max-min)/(count-1));var opacity=max-current*step;return opacity},gotoPreviousPage:function(){this.currentPage>1&&(this.currentPage--,this.loadData())},gotoNextPage:function(){this.currentPage<this.tablePagination.last_page&&(this.currentPage++,this.loadData())},gotoPage:function(page){page!=this.currentPage&&page>0&&page<=this.tablePagination.last_page&&(this.currentPage=page,this.loadData())},isSpecialField:function(fieldName){return"__"===fieldName.slice(0,2)},hasCallback:function(item){return!!item.callback},callCallback:function(field,item){if(this.hasCallback(field)){var args=field.callback.split("|"),func=args.shift();return"function"==typeof this.$parent[func]?args.length>0?this.$parent[func].apply(this.$parent,[this.getObjectValue(item,field.name)].concat(args)):this.$parent[func].call(this.$parent,this.getObjectValue(item,field.name)):null}},getObjectValue:function(object,path,defaultValue){defaultValue="undefined"==typeof defaultValue?null:defaultValue;var obj=object;if(""!=path.trim()){var keys=path.split(".");keys.forEach(function(key){return null===obj||"undefined"==typeof obj[key]||null===obj[key]?void(obj=defaultValue):void(obj=obj[key])})}return obj},callAction:function(action,data){this.$dispatch(this.eventPrefix+"action",action,data)},addParam:function(param){this.appendParams.push(param)},toggleCheckbox:function(isChecked,dataItem,fieldName){var idColumn=this.extractArgs(fieldName);return void 0===idColumn?void console.warn('You did not provide reference id column with "__checkbox:<column_name>" field!'):void(isChecked?this.selectedTo.push(dataItem[idColumn]):this.selectedTo.$remove(dataItem[idColumn]))},toggleAllCheckboxes:function(isChecked,fieldName){var self=this,idColumn=this.extractArgs(fieldName);isChecked?this.tableData.forEach(function(dataItem){self.isSelectedRow(dataItem,fieldName)||self.selectedTo.push(dataItem[idColumn])}):this.tableData.forEach(function(dataItem){self.selectedTo.$remove(dataItem[idColumn])})},isSelectedRow:function(dataItem,fieldName){return this.selectedTo.indexOf(dataItem[this.extractArgs(fieldName)])>=0},extractName:function(string){return string.split(":")[0].trim()},extractArgs:function(string){return string.split(":")[1]},callDetailRowCallback:function(item){var func=this.detailRowCallback.trim();return""===func?"":"function"==typeof this.$parent[func]?this.$parent[func].call(this.$parent,item):void console.error('Function "'+func+'()" does not exist!')},isVisibleDetailRow:function(rowId){return this.visibleDetailRows.indexOf(rowId)>=0},showDetailRow:function(rowId){this.isVisibleDetailRow(rowId)||this.visibleDetailRows.push(rowId)},hideDetailRow:function(rowId){this.isVisibleDetailRow(rowId)&&this.visibleDetailRows.$remove(rowId)},toggleDetailRow:function(rowId){this.isVisibleDetailRow(rowId)?this.hideDetailRow(rowId):this.showDetailRow(rowId)},onRowClass:function(dataItem,index){var func=this.rowClassCallback.trim();return""!==func&&"function"==typeof this.$parent[func]?this.$parent[func].call(this.$parent,dataItem,index):""},onRowChanged:function(dataItem){return this.dispatchEvent("row-changed",dataItem),!0},onRowClicked:function(dataItem,event){return this.$dispatch(this.eventPrefix+"row-clicked",dataItem,event),!0},onCellClicked:function(dataItem,field,event){this.$dispatch(this.eventPrefix+"cell-clicked",dataItem,field,event)},onCellDoubleClicked:function(dataItem,field,event){this.$dispatch(this.eventPrefix+"cell-dblclicked",dataItem,field,event)},onDetailRowClick:function(dataItem,event){this.$dispatch(this.eventPrefix+"detail-row-clicked",dataItem,event)},callPaginationConfig:function(){"function"==typeof this.$parent[this.paginationConfigCallback]&&this.$parent[this.paginationConfigCallback].call(this.$parent,this.$refs.pagination.$options.name)},logDeprecatedMessage:function(name,replacer){var msg='"{name}" prop is being deprecated and will be removed in the future. Please use "{replacer}" instead.';console.warn(msg.replace("{name}",name).replace("{replacer}",replacer))},checkForDeprecatedProps:function(){"paginationConfig"!==this.paginationConfig&&this.logDeprecatedMessage("paginationConfig","paginationConfigCallback"),""!==this.detailRow&&this.logDeprecatedMessage("detail-row","detail-row-callback"),""!==this.detailRowCallback&&this.logDeprecatedMessage("detail-row-callback","detail-row-component")}},watch:{multiSort:function(newVal,oldVal){newVal===!1&&this.sortOrder.length>1&&(this.sortOrder.splice(1),this.loadData())}},events:{"vuetable-pagination:change-page":function(page){"prev"==page?this.gotoPreviousPage():"next"==page?this.gotoNextPage():this.gotoPage(page)},"vuetable:reload":function(){this.loadData()},"vuetable:refresh":function(){this.currentPage=1,this.loadData()},"vuetable:goto-page":function(page){this.$emit("vuetable-pagination:change-page",page)},"vuetable:set-options":function(options){for(var n in options)this.$set(n,options[n])},"vuetable:toggle-detail":function(dataItem){this.toggleDetailRow(dataItem)},"vuetable:show-detail":function(dataItem){this.showDetailRow(dataItem)},"vuetable:hide-detail":function(dataItem){this.hideDetailRow(dataItem)}},created:function(){this.checkForDeprecatedProps(),this.normalizeFields(),this.loadOnStart&&this.loadData(),this.$nextTick(function(){this.callPaginationConfig()})}},module.exports.__esModule&&(module.exports=module.exports.default),("function"==typeof module.exports?module.exports.options:module.exports).template='<div class={{wrapperClass}}><table class="vuetable {{tableClass}}"><thead><tr><template v-for="field in fields"><template v-if=field.visible><template v-if=isSpecialField(field.name)><th v-if="extractName(field.name) == \'__checkbox\'" class="{{field.titleClass || \'\'}}"><input type=checkbox @change="toggleAllCheckboxes($event.target.checked, field.name)"><th v-if="extractName(field.name) == \'__component\'" @click="orderBy(field, $event)" class="{{field.titleClass || \'\'}} {{isSortable(field) ? \'sortable\' : \'\'}}">{{field.title || \'\'}} <i v-if="isCurrentSortField(field) &amp;&amp; field.title" class="{{ sortIcon(field) }}" v-bind:style="{opacity: sortIconOpacity(field)}"></i><th v-if="notIn(extractName(field.name), [\'__checkbox\', \'__component\'])" id={{field.name}} class="{{field.titleClass || \'\'}}">{{field.title || \'\'}}</template><template v-else=""><th @click="orderBy(field, $event)" id=_{{field.name}} class="{{field.titleClass || \'\'}} {{isSortable(field) ? \'sortable\' : \'\'}}">{{getTitle(field) | capitalize}}&nbsp; <i v-if=isCurrentSortField(field) class="{{ sortIcon(field) }}" v-bind:style="{opacity: sortIconOpacity(field)}"></i></template></template></template><tbody v-cloak=""><template v-for="(itemNumber, item) in tableData"><tr @click="onRowClicked(item, $event)" :render=onRowChanged(item) :class="onRowClass(item, itemNumber)"><template v-for="field in fields"><template v-if=field.visible><template v-if=isSpecialField(field.name)><td v-if="extractName(field.name) == \'__sequence\'" class="vuetable-sequence {{field.dataClass}}" v-html="tablePagination.from + itemNumber"><td v-if="extractName(field.name) == \'__checkbox\'" class="vuetable-checkboxes {{field.dataClass}}"><input type=checkbox @change="toggleCheckbox($event.target.checked, item, field.name)" :checked="isSelectedRow(item, field.name)"><td v-if="field.name == \'__actions\'" class="vuetable-actions {{field.dataClass}}"><template v-for="action in itemActions"><button class="{{ action.class }}" @click="callAction(action.name, item)" v-attr=action.extra><i class="{{ action.icon }}"></i> {{ action.label }}</button></template><td v-if="extractName(field.name) == \'__component\'" class={{field.dataClass}}><component :is=extractArgs(field.name) :row-data=item></component></template><template v-else=""><td v-if=hasCallback(field) class={{field.dataClass}} @click="onCellClicked(item, field, $event)" @dblclick="onCellDoubleClicked(item, field, $event)">{{{ callCallback(field, item) }}}<td v-else="" class={{field.dataClass}} @click="onCellClicked(item, field, $event)" @dblclick="onCellDoubleClicked(item, field, $event)">{{{ getObjectValue(item, field.name, "") }}}</template></template></template></tr><template v-if=useDetailRow><template v-if=useDetailRowComponent><tr v-if=isVisibleDetailRow(item[detailRowId]) @click="onDetailRowClick(item, $event)" :transition=detailRowTransition :class=[detailRowClass]><td :colspan=countVisibleFields><component :is=detailRowComponent :row-data=item></component></template><template v-else=""><tr v-if=isVisibleDetailRow(item[detailRowId]) v-html=callDetailRowCallback(item) @click="onDetailRowClick(item, $event)" :transition=detailRowTransition :class=[detailRowClass]></template></template></template></table><div v-if=showPagination class="vuetable-pagination {{paginationClass}}"><div class="vuetable-pagination-info {{paginationInfoClass}}" v-html=paginationInfo></div><div v-show="tablePagination &amp;&amp; tablePagination.last_page > 1" class="vuetable-pagination-component {{paginationComponentClass}}"><component v-ref:pagination="" :is=paginationComponent></component></div></div></div>'},{"vueify/lib/insert-css":1}],3:[function(require,module,exports){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(exports,"__esModule",{value:!0});var _VuetablePaginationMixin=require("./VuetablePaginationMixin.vue"),_VuetablePaginationMixin2=_interopRequireDefault(_VuetablePaginationMixin);exports.default={mixins:[_VuetablePaginationMixin2.default]},module.exports.__esModule&&(module.exports=module.exports.default),("function"==typeof module.exports?module.exports.options:module.exports).template='<div class={{wrapperClass}}><a @click=loadPage(1) class="btn-nav {{linkClass}} {{isOnFirstPage ? disabledClass : \'\'}}"><i v-if="icons.first != \'\'" class={{icons.first}}></i> <span v-else="">«</span> </a><a @click="loadPage(\'prev\')" class="btn-nav {{linkClass}} {{isOnFirstPage ? disabledClass : \'\'}}"><i v-if="icons.next != \'\'" class={{icons.prev}}></i> <span v-else="">&nbsp;‹</span></a><template v-if=notEnoughPages><template v-for="n in totalPage"><a @click=loadPage(n+1) class="{{pageClass}} {{isCurrentPage(n+1) ? activeClass : \'\'}}">{{ n+1 }}</a></template></template><template v-else=""><template v-for="n in windowSize"><a @click=loadPage(windowStart+n) class="{{pageClass}} {{isCurrentPage(windowStart+n) ? activeClass : \'\'}}">{{ windowStart+n }}</a></template></template><a @click="loadPage(\'next\')" class="btn-nav {{linkClass}} {{isOnLastPage ? disabledClass : \'\'}}"><i v-if="icons.next != \'\'" class={{icons.next}}></i> <span v-else="">›&nbsp;</span> </a><a @click=loadPage(totalPage) class="btn-nav {{linkClass}} {{isOnLastPage ? disabledClass : \'\'}}"><i v-if="icons.last != \'\'" class={{icons.last}}></i> <span v-else="">»</span></a></div>'},{"./VuetablePaginationMixin.vue":5}],4:[function(require,module,exports){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(exports,"__esModule",{value:!0});var _VuetablePaginationMixin=require("./VuetablePaginationMixin.vue"),_VuetablePaginationMixin2=_interopRequireDefault(_VuetablePaginationMixin);exports.default={mixins:[_VuetablePaginationMixin2.default],props:{dropdownClass:{type:String,default:function(){return"ui search dropdown"}},pageText:{type:String,default:function(){return"Page"}}},methods:{loadPage:function(page){"prev"!=page||this.isOnFirstPage?"next"!=page||this.isOnLastPage||this.setDropdownToPage(this.tablePagination.current_page+1):this.setDropdownToPage(this.tablePagination.current_page-1),this.$dispatch("vuetable-pagination:change-page",page)},setDropdownToPage:function(page){this.$nextTick(function(){document.getElementById("vuetable-pagination-dropdown").value=page})},selectPage:function(event){this.$dispatch("vuetable-pagination:change-page",event.target.selectedIndex+1)}},events:{"vuetable:load-success":function(tablePagination){this.tablePagination=tablePagination,this.setDropdownToPage(tablePagination.current_page)}}},module.exports.__esModule&&(module.exports=module.exports.default),("function"==typeof module.exports?module.exports.options:module.exports).template='<div class={{wrapperClass}}><a @click="loadPage(\'prev\')" class="{{linkClass}} {{isOnFirstPage ? disabledClass : \'\'}}"><i :class=icons.prev></i></a><select id=vuetable-pagination-dropdown class={{dropdownClass}} @change=selectPage($event)><template v-for="n in totalPage"><option class={{pageClass}} value={{n+1}}>{{pageText}} {{n+1}}</template></select><a @click="loadPage(\'next\')" class="{{linkClass}} {{isOnLastPage ? disabledClass : \'\'}}"><i :class=icons.next></i></a></div>'},{"./VuetablePaginationMixin.vue":5}],5:[function(require,module,exports){"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={props:{wrapperClass:{type:String,default:function(){return"ui right floated pagination menu"}},activeClass:{type:String,default:function(){return"active large"}},disabledClass:{type:String,default:function(){return"disabled"}},pageClass:{type:String,default:function(){return"item"}},linkClass:{type:String,default:function(){return"icon item"}},icons:{type:Object,default:function(){return{first:"angle double left icon",prev:"left chevron icon",next:"right chevron icon",last:"angle double right icon"}}},onEachSide:{type:Number,coerce:function(value){return parseInt(value)},default:function(){return 2}}},data:function(){return{tablePagination:null}},computed:{totalPage:function(){return null==this.tablePagination?0:this.tablePagination.last_page},isOnFirstPage:function(){return null!=this.tablePagination&&1==this.tablePagination.current_page},isOnLastPage:function(){return null!=this.tablePagination&&this.tablePagination.current_page==this.tablePagination.last_page},notEnoughPages:function(){return this.totalPage<2*this.onEachSide+4},windowSize:function(){return 2*this.onEachSide+1},windowStart:function(){return!this.tablePagination||this.tablePagination.current_page<=this.onEachSide?1:this.tablePagination.current_page>=this.totalPage-this.onEachSide?this.totalPage-2*this.onEachSide:this.tablePagination.current_page-this.onEachSide}},methods:{loadPage:function(page){this.$dispatch("vuetable-pagination:change-page",page)},isCurrentPage:function(page){return page==this.tablePagination.current_page}},events:{"vuetable:load-success":function(tablePagination){this.tablePagination=tablePagination},"vuetable-pagination:set-options":function(options){for(var n in options)this.$set(n,options[n])}}},module.exports.__esModule&&(module.exports=module.exports.default)},{}],6:[function(require,module,exports){Vue.component("vuetable-pagination",require("./components/VuetablePagination.vue")),Vue.component("vuetable-pagination-dropdown",require("./components/VuetablePaginationDropdown.vue")),Vue.component("vuetable",require("./components/Vuetable.vue"))},{"./components/Vuetable.vue":2,"./components/VuetablePagination.vue":3,"./components/VuetablePaginationDropdown.vue":4}]},{},[6]);
コード例 #2
0
ファイル: styl.js プロジェクト: Kingdaro/vueify
var __vueify_insert__ = require("vueify/lib/insert-css")
var __vueify_style__ = __vueify_insert__.insert("body{font:100% Helvetica,sans-serif;color:#333}")
コード例 #3
0
ファイル: vue-table.js プロジェクト: gdemir/vue-table
},{}],3:[function(require,module,exports){
var __vueify_insert__ = require("vueify/lib/insert-css")
var __vueify_style__ = __vueify_insert__.insert("\n.vuetable th.sortable:hover {\n  color: #2185d0;\n  cursor: pointer;\n}\n.vuetable-actions {\n  width: 15%;\n  padding: 12px 0px;\n  text-align: center;\n}\n.vuetable-pagination {\n  background: #f9fafb !important;\n}\n.vuetable-pagination-info {\n  margin-top: auto;\n  margin-bottom: auto;\n}\n")
'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.default = {
    props: {
        wrapperClass: {
            type: String,
            default: function _default() {
                return null;
            }
        },
        tableWrapper: {
            type: String,
            default: function _default() {
                return null;
            }
        },
        tableClass: {
            type: String,
            default: function _default() {
                return 'ui blue striped selectable celled stackable attached table';
            }
        },
        loadingClass: {
            type: String,
            default: function _default() {
                return 'loading';
            }
        },
        dataPath: {
            type: String,
            default: function _default() {
                return 'data';
            }
        },
        paginationPath: {
            type: String,
            default: function _default() {
                return 'links.pagination';
            }
        },
        fields: {
            type: Array,
            required: true
        },
        apiUrl: {
            type: String,
            required: true
        },
        sortOrder: {
            type: Array,
            default: function _default() {
                return [];
                /* array of
                    {
                        field: '',
                        direction: 'asc'
                    }
                objects */
            }
        },
        multiSort: {
            type: Boolean,
            default: function _default() {
                return false;
            }
        },
        /*
         * physical key that will trigger multi-sort option
         * possible values: 'alt', 'ctrl', 'meta', 'shift'
         * 'ctrl' might not work as expected on Mac
         */
        multiSortKey: {
            type: String,
            default: 'alt'
        },
        perPage: {
            type: Number,
            coerce: function coerce(val) {
                return parseInt(val);
            },
            default: function _default() {
                return 10;
            }
        },
        ascendingIcon: {
            type: String,
            default: function _default() {
                return 'blue chevron up icon';
            }
        },
        descendingIcon: {
            type: String,
            default: function _default() {
                return 'blue chevron down icon';
            }
        },
        appendParams: {
            type: Array,
            default: function _default() {
                return [];
            }
        },
        showPagination: {
            type: Boolean,
            default: function _default() {
                return true;
            }
        },
        paginationComponent: {
            type: String,
            default: function _default() {
                return 'vuetable-pagination';
            }
        },
        paginationInfoTemplate: {
            type: String,
            default: function _default() {
                return "Displaying {from} to {to} of {total} items";
            }
        },
        paginationInfoNoDataTemplate: {
            type: String,
            default: function _default() {
                return 'No relevant data';
            }
        },
        paginationClass: {
            type: String,
            default: function _default() {
                return 'ui bottom attached segment grid';
            }
        },
        paginationInfoClass: {
            type: String,
            default: function _default() {
                return 'left floated left aligned six wide column';
            }
        },
        paginationComponentClass: {
            type: String,
            default: function _default() {
                return 'right floated right aligned six wide column';
            }
        },
        paginationConfig: {
            type: String,
            default: function _default() {
                return 'paginationConfig';
            }
        },
        itemActions: {
            type: Array,
            default: function _default() {
                return [];
            }
        },
        queryParams: {
            type: Object,
            default: function _default() {
                return {
                    sort: 'sort',
                    page: 'page',
                    perPage: 'per_page'
                };
            }
        },
        loadOnStart: {
            type: Boolean,
            default: function _default() {
                return true;
            }
        },
        selectedTo: {
            type: Array,
            default: function _default() {
                return [];
            }
        },
        httpData: {
            type: Object,
            default: function _default() {
                return {};
            }
        },
        httpOptions: {
            type: Object,
            default: function _default() {
                return {};
            }
        },
        detailRow: {
            type: String,
            default: ''
        },
        detailRowId: {
            type: String,
            default: 'id'
        },
        detailRowTransition: {
            type: String,
            default: ''
        },
        detailRowClass: {
            type: String,
            default: 'vuetable-detail-row'
        },
        rowClassCallback: {
            type: String,
            default: ''
        }
    },
    data: function data() {
        return {
            version: '1.2.1',
            eventPrefix: 'vuetable:',
            tableData: null,
            tablePagination: null,
            currentPage: 1,
            visibleDetailRows: []
        };
    },
    directives: {
        'attr': {
            update: function update(value) {
                for (var i in value) {
                    this.el.setAttribute(i, value[i]);
                }
            }
        }
    },
    computed: {
        paginationInfo: function paginationInfo() {
            if (this.tablePagination == null || this.tablePagination.total == 0) {
                return this.paginationInfoNoDataTemplate;
            }

            return this.paginationInfoTemplate.replace('{from}', this.tablePagination.from || 0).replace('{to}', this.tablePagination.to || 0).replace('{total}', this.tablePagination.total || 0);
        },
        useDetailRow: function useDetailRow() {
            if (typeof this.tableData[0][this.detailRowId] === 'undefined') {
                console.warn('You need to define "detail-row-id" in order for detail-row feature to work!');
                return false;
            }

            return this.detailRow.trim() !== '';
        }
    },
    methods: {
        normalizeFields: function normalizeFields() {
            var self = this;
            var obj;
            this.fields.forEach(function (field, i) {
                if (typeof field === 'string') {
                    obj = {
                        name: field,
                        title: self.setTitle(field),
                        titleClass: '',
                        dataClass: '',
                        callback: null,
                        visible: true
                    };
                } else {
                    obj = {
                        name: field.name,
                        title: field.title === undefined ? self.setTitle(field.name) : field.title,
                        sortField: field.sortField,
                        titleClass: field.titleClass === undefined ? '' : field.titleClass,
                        dataClass: field.dataClass === undefined ? '' : field.dataClass,
                        callback: field.callback === undefined ? '' : field.callback,
                        visible: field.visible === undefined ? true : field.visible
                    };
                }
                self.fields.$set(i, obj);
            });
        },
        setTitle: function setTitle(str) {
            if (this.isSpecialField(str)) {
                return '';
            }

            return this.titleCase(str);
        },
        titleCase: function titleCase(str) {
            return str.replace(/\w+/g, function (txt) {
                return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
            });
        },
        loadData: function loadData() {
            var wrapper = document.querySelector(this.tableWrapper);
            this.showLoadingAnimation(wrapper);

            var params = [this.queryParams.sort + '=' + this.getSortParam(), this.queryParams.page + '=' + this.currentPage, this.queryParams.perPage + '=' + this.perPage];

            var url = this.apiUrl + '?' + params.join('&');
            if (this.appendParams.length > 0) {
                url += '&' + this.appendParams.join('&');
            }
            var self = this;
            this.$http.get(url, this.httpData, this.httpOptions).then(function (response) {
                self.tableData = self.getObjectValue(response.data, self.dataPath, null);
                self.tablePagination = self.getObjectValue(response.data, self.paginationPath, null);
                if (self.tablePagination === null) {
                    console.warn('vuetable: pagination-path "' + self.paginationPath + '" not found. ' + 'It looks like the data returned from the sever does not have pagination information ' + 'or you may have set it incorrectly.');
                }

                self.dispatchEvent('load-success', response);
                self.broadcastEvent('load-success', self.tablePagination);

                self.hideLoadingAnimation(wrapper);
            }, function (response) {
                self.dispatchEvent('load-error', response);
                self.broadcastEvent('load-error', response);

                self.hideLoadingAnimation(wrapper);
            });
        },
        showLoadingAnimation: function showLoadingAnimation(wrapper) {
            if (wrapper !== null) {
                this.addClass(wrapper, this.loadingClass);
            }
            this.dispatchEvent('loading');
        },
        hideLoadingAnimation: function hideLoadingAnimation(wrapper) {
            if (wrapper !== null) {
                this.removeClass(wrapper, this.loadingClass);
            }
            this.dispatchEvent('loaded');
        },
        getTitle: function getTitle(field) {
            if (typeof field.title === 'undefined') {
                return field.name.replace('.', ' ');
            }
            return field.title;
        },
        getSortParam: function getSortParam() {
            if (!this.sortOrder || this.sortOrder.field == '') {
                return '';
            }

            var result = '';

            for (var i = 0; i < this.sortOrder.length; i++) {
                var fieldName = typeof this.sortOrder[i].sortField === 'undefined' ? this.sortOrder[i].field : this.sortOrder[i].sortField;

                result += fieldName + '|' + this.sortOrder[i].direction + (i + 1 < this.sortOrder.length ? ',' : '');
            }

            return result;
        },
        addClass: function addClass(el, className) {
            if (el.classList) el.classList.add(className);else el.className += ' ' + className;
        },
        removeClass: function removeClass(el, className) {
            if (el.classList) el.classList.remove(className);else el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
        },
        dispatchEvent: function dispatchEvent(eventName, args) {
            this.$dispatch(this.eventPrefix + eventName, args);
        },
        broadcastEvent: function broadcastEvent(eventName, args) {
            this.$broadcast(this.eventPrefix + eventName, args);
        },
        orderBy: function orderBy(field, event) {
            if (!this.isSortable(field)) {
                return;
            }

            var key = this.multiSortKey.toLowerCase() + 'Key';

            if (this.multiSort && event[key]) {
                //adding column to multisort
                var i = this.currentSortOrder(field);

                if (i === false) {
                    //this field is not in the sort array yet
                    this.sortOrder.push({
                        field: field.name,
                        direction: 'asc'
                    });
                } else {
                    //this field is in the sort array, now we change its state
                    if (this.sortOrder[i].direction == 'asc') {
                        // switch direction
                        this.sortOrder[i].direction = 'desc';
                    } else {
                        //remove sort condition
                        this.sortOrder.splice(i, 1);
                    }
                }
            } else {
                //no multisort, or resetting sort
                if (this.sortOrder.length == 0) {
                    this.sortOrder.push({
                        field: '',
                        direction: 'asc'
                    });
                }

                this.sortOrder.splice(1); //removes additional columns

                if (this.sortOrder[0].field == field.name) {
                    // change sort direction
                    this.sortOrder[0].direction = this.sortOrder[0].direction == 'asc' ? 'desc' : 'asc';
                } else {
                    // reset sort direction
                    this.sortOrder[0].direction = 'asc';
                }
                this.sortOrder[0].field = field.name;
                this.sortOrder[0].sortField = field.sortField;
            }

            this.currentPage = 1; // reset page index
            this.loadData();
        },
        isSortable: function isSortable(field) {
            return !(typeof field.sortField == 'undefined');
        },
        isCurrentSortField: function isCurrentSortField(field) {
            return this.currentSortOrder(field) !== false;
        },
        currentSortOrder: function currentSortOrder(field) {
            if (!this.isSortable(field)) {
                return false;
            }

            for (var i = 0; i < this.sortOrder.length; i++) {
                if (this.sortOrder[i].field == field.name) {
                    return i;
                }
            }

            return false;
        },
        sortIcon: function sortIcon(field) {
            var i = this.currentSortOrder(field);
            if (i !== false) {
                return this.sortOrder[i].direction == 'asc' ? this.ascendingIcon : this.descendingIcon;
            } else {
                return '';
            }
        },
        sortIconOpacity: function sortIconOpacity(field) {
            //fields with stronger precedence have darker color

            //if there are few fields, we go down by 0.3
            //ex. 2 fields are selected: 1.0, 0.7

            //if there are more we go down evenly on the given spectrum
            //ex. 6 fields are selected: 1.0, 0.86, 0.72, 0.58, 0.44, 0.3

            var max = 1.0;
            var min = 0.3;
            var step = 0.3;

            var count = this.sortOrder.length;
            var current = this.currentSortOrder(field);

            if (max - count * step < min) {
                step = (max - min) / (count - 1);
            }

            var opacity = max - current * step;

            return opacity;
        },
        gotoPreviousPage: function gotoPreviousPage() {
            if (this.currentPage > 1) {
                this.currentPage--;
                this.loadData();
            }
        },
        gotoNextPage: function gotoNextPage() {
            if (this.currentPage < this.tablePagination.last_page) {
                this.currentPage++;
                this.loadData();
            }
        },
        gotoPage: function gotoPage(page) {
            if (page != this.currentPage && page > 0 && page <= this.tablePagination.last_page) {
                this.currentPage = page;
                this.loadData();
            }
        },
        isSpecialField: function isSpecialField(fieldName) {
            return fieldName.startsWith('__');
        },
        hasCallback: function hasCallback(item) {
            return item.callback ? true : false;
        },
        callCallback: function callCallback(field, item) {
            if (!this.hasCallback(field)) return;

            var args = field.callback.split('|');
            var func = args.shift();

            if (typeof this.$parent[func] == 'function') {
                return args.length > 0 ? this.$parent[func].apply(this.$parent, [this.getObjectValue(item, field.name)].concat(args)) : this.$parent[func].call(this.$parent, this.getObjectValue(item, field.name));
            }

            return null;
        },
        getObjectValue: function getObjectValue(object, path, defaultValue) {
            defaultValue = typeof defaultValue == 'undefined' ? null : defaultValue;

            var obj = object;
            if (path.trim() != '') {
                var keys = path.split('.');
                keys.forEach(function (key) {
                    if (obj !== null && typeof obj[key] != 'undefined' && obj[key] !== null) {
                        obj = obj[key];
                    } else {
                        obj = defaultValue;
                        return;
                    }
                });
            }
            return obj;
        },
        callAction: function callAction(action, data) {
            this.$dispatch(this.eventPrefix + 'action', action, data);
        },
        addParam: function addParam(param) {
            this.appendParams.push(param);
        },
        toggleCheckbox: function toggleCheckbox(isChecked, dataItem, fieldName) {
            var idColumn = this.extractArgs(fieldName);
            if (idColumn === undefined) {
                console.warn('You did not provide reference id column with "__checkbox:<column_name>" field!');
                return;
            }
            if (isChecked) {
                this.selectedTo.push(dataItem[idColumn]);
            } else {
                this.selectedTo.$remove(dataItem[idColumn]);
            }
        },
        toggleAllCheckboxes: function toggleAllCheckboxes(isChecked, fieldName) {
            var self = this;
            var idColumn = this.extractArgs(fieldName);

            if (isChecked) {
                this.tableData.forEach(function (dataItem) {
                    if (!self.isSelectedRow(dataItem, fieldName)) {
                        self.selectedTo.push(dataItem[idColumn]);
                    }
                });
            } else {
                this.tableData.forEach(function (dataItem) {
                    self.selectedTo.$remove(dataItem[idColumn]);
                });
            }
        },
        isSelectedRow: function isSelectedRow(dataItem, fieldName) {
            return this.selectedTo.indexOf(dataItem[this.extractArgs(fieldName)]) >= 0;
        },
        extractName: function extractName(string) {
            return string.split(':')[0].trim();
        },
        extractArgs: function extractArgs(string) {
            return string.split(':')[1];
        },
        detailRowCallback: function detailRowCallback(item) {
            var func = this.detailRow.trim();
            if (func === '') {
                return '';
            }

            if (typeof this.$parent[func] == 'function') {
                return this.$parent[func].call(this.$parent, item);
            }
        },
        isVisibleDetailRow: function isVisibleDetailRow(rowId) {
            return this.visibleDetailRows.indexOf(rowId) >= 0;
        },
        showDetailRow: function showDetailRow(rowId) {
            if (!this.isVisibleDetailRow(rowId)) {
                this.visibleDetailRows.push(rowId);
            }
        },
        hideDetailRow: function hideDetailRow(rowId) {
            if (this.isVisibleDetailRow(rowId)) {
                this.visibleDetailRows.$remove(rowId);
            }
        },
        toggleDetailRow: function toggleDetailRow(rowId) {
            if (this.isVisibleDetailRow(rowId)) {
                this.hideDetailRow(rowId);
            } else {
                this.showDetailRow(rowId);
            }
        },
        onRowClass: function onRowClass(dataItem, index) {
            var func = this.rowClassCallback.trim();

            if (func !== '' && typeof this.$parent[func] === 'function') {
                return this.$parent[func].call(this.$parent, dataItem, index);
            }
            return '';
        },
        onRowChanged: function onRowChanged(dataItem) {
            this.dispatchEvent('row-changed', dataItem);
            return true;
        },
        onRowClicked: function onRowClicked(dataItem, event) {
            this.$dispatch(this.eventPrefix + 'row-clicked', dataItem, event);
            return true;
        },
        onCellDoubleClicked: function onCellDoubleClicked(dataItem, field, event) {
            this.$dispatch(this.eventPrefix + 'cell-dblclicked', dataItem, field, event);
        },
        onDetailRowClick: function onDetailRowClick(dataItem, event) {
            this.$dispatch('detail-row-clicked', dataItem, event);
        },
        callPaginationConfig: function callPaginationConfig() {
            if (typeof this.$parent[this.paginationConfig] === 'function') {
                this.$parent[this.paginationConfig].call(this.$parent, this.$refs.pagination.$options.name);
            }
        }
    },
    watch: {
        'multiSort': function multiSort(newVal, oldVal) {
            if (newVal === false && this.sortOrder.length > 1) {
                this.sortOrder.splice(1);
                this.loadData();
            }
        }
    },
    events: {
        'vuetable-pagination:change-page': function vuetablePaginationChangePage(page) {
            if (page == 'prev') {
                this.gotoPreviousPage();
            } else if (page == 'next') {
                this.gotoNextPage();
            } else {
                this.gotoPage(page);
            }
        },
        'vuetable:reload': function vuetableReload() {
            this.loadData();
        },
        'vuetable:refresh': function vuetableRefresh() {
            this.currentPage = 1;
            this.loadData();
        },
        'vuetable:goto-page': function vuetableGotoPage(page) {
            this.$emit('vuetable-pagination:change-page', page);
        },
        'vuetable:set-options': function vuetableSetOptions(options) {
            for (var n in options) {
                this.$set(n, options[n]);
            }
        },
        'vuetable:toggle-detail': function vuetableToggleDetail(dataItem) {
            this.toggleDetailRow(dataItem);
        },
        'vuetable:show-detail': function vuetableShowDetail(dataItem) {
            this.showDetailRow(dataItem);
        },
        'vuetable:hide-detail': function vuetableHideDetail(dataItem) {
            this.hideDetailRow(dataItem);
        }
    },
    created: function created() {
        this.normalizeFields();
        if (this.loadOnStart) {
            this.loadData();
        }
        this.$nextTick(function () {
            this.callPaginationConfig();
        });
    }
};
if (module.exports.__esModule) module.exports = module.exports.default
;(typeof module.exports === "function"? module.exports.options: module.exports).template = "\n<div class=\"{{wrapperClass}}\">\n    <table class=\"vuetable {{tableClass}}\">\n        <thead>\n            <tr>\n                <template v-for=\"field in fields\">\n                    <template v-if=\"field.visible\">\n                        <template v-if=\"isSpecialField(field.name)\">\n                            <th v-if=\"extractName(field.name) == '__checkbox'\" class=\"{{field.titleClass || ''}}\">\n                                <input type=\"checkbox\" @change=\"toggleAllCheckboxes($event.target.checked, field.name)\">\n                            </th>\n                            <th v-else=\"\" id=\"{{field.name}}\" class=\"{{field.titleClass || ''}}\">\n                                {{field.title || ''}}\n                            </th>\n                        </template>\n                        <template v-else=\"\">\n                            <th @click=\"orderBy(field, $event)\" id=\"_{{field.name}}\" class=\"{{field.titleClass || ''}} {{isSortable(field) ? 'sortable' : ''}}\">\n                                {{getTitle(field) | capitalize}}&nbsp;\n                                <i v-if=\"isCurrentSortField(field)\" class=\"{{ sortIcon(field) }}\" v-bind:style=\"{opacity: sortIconOpacity(field)}\"></i>\n                            </th>\n                        </template>\n                    </template>\n                </template>\n            </tr>\n        </thead>\n        <tbody v-cloak=\"\">\n            <template v-for=\"(itemNumber, item) in tableData\">\n                <tr @click=\"onRowClicked(item, $event)\" :render=\"onRowChanged(item)\" :class=\"onRowClass(item, itemNumber)\">\n                    <template v-for=\"field in fields\">\n                        <template v-if=\"field.visible\">\n                            <template v-if=\"isSpecialField(field.name)\">\n                                <td v-if=\"extractName(field.name) == '__sequence'\" class=\"vuetable-sequence {{field.dataClass}}\" v-html=\"tablePagination.from + itemNumber\">\n                                </td>\n                                <td v-if=\"extractName(field.name) == '__checkbox'\" class=\"vuetable-checkboxes {{field.dataClass}}\">\n                                    <input type=\"checkbox\" @change=\"toggleCheckbox($event.target.checked, item, field.name)\" :checked=\"isSelectedRow(item, field.name)\">\n                                </td>\n                                <td v-if=\"field.name == '__actions'\" class=\"vuetable-actions {{field.dataClass}}\">\n                                    <template v-for=\"action in itemActions\">\n                                        <button class=\"{{ action.class }}\" @click=\"callAction(action.name, item)\" v-attr=\"action.extra\">\n                                            <i class=\"{{ action.icon }}\"></i> {{ action.label }}\n                                        </button>\n                                    </template>\n                                </td>\n                            </template>\n                            <template v-else=\"\">\n                                <td v-if=\"hasCallback(field)\" class=\"{{field.dataClass}}\" @dblclick=\"onCellDoubleClicked(item, field, $event)\">\n                                    {{{ callCallback(field, item) }}}\n                                </td>\n                                <td v-else=\"\" class=\"{{field.dataClass}}\" @dblclick=\"onCellDoubleClicked(item, field, $event)\">\n                                    {{{ getObjectValue(item, field.name, \"\") }}}\n                                </td>\n                            </template>\n                        </template>\n                    </template>\n                </tr>\n                <template v-if=\"useDetailRow\">\n                    <tr v-if=\"isVisibleDetailRow(item[detailRowId])\" v-html=\"detailRowCallback(item)\" @click=\"onDetailRowClick(item, $event)\" :transition=\"detailRowTransition\" class=\"{{detailRowClass}}\"></tr>\n                </template>\n            </template>\n        </tbody>\n    </table>\n    <div v-if=\"showPagination\" class=\"vuetable-pagination {{paginationClass}}\">\n        <div class=\"vuetable-pagination-info {{paginationInfoClass}}\" v-html=\"paginationInfo\">\n        </div>\n        <div v-show=\"tablePagination &amp;&amp; tablePagination.last_page > 1\" class=\"vuetable-pagination-component {{paginationComponentClass}}\">\n            <component v-ref:pagination=\"\" :is=\"paginationComponent\"></component>\n        </div>\n    </div>\n</div>\n"
if (module.hot) {(function () {  module.hot.accept()
  var hotAPI = require("vue-hot-reload-api")
  hotAPI.install(require("vue"), true)
  if (!hotAPI.compatible) return
  module.hot.dispose(function () {
    __vueify_insert__.cache["\n.vuetable th.sortable:hover {\n  color: #2185d0;\n  cursor: pointer;\n}\n.vuetable-actions {\n  width: 15%;\n  padding: 12px 0px;\n  text-align: center;\n}\n.vuetable-pagination {\n  background: #f9fafb !important;\n}\n.vuetable-pagination-info {\n  margin-top: auto;\n  margin-bottom: auto;\n}\n"] = false
    document.head.removeChild(__vueify_style__)
  })
  if (!module.hot.data) {
    hotAPI.createRecord("_v-a86009c0", module.exports)
  } else {
    hotAPI.update("_v-a86009c0", module.exports, (typeof module.exports === "function" ? module.exports.options : module.exports).template)
  }
})()}
},{"vue":"vue","vue-hot-reload-api":1,"vueify/lib/insert-css":2}],4:[function(require,module,exports){
コード例 #4
0
ファイル: basic.js プロジェクト: Kingdaro/vueify
var __vueify_insert__ = require("vueify/lib/insert-css")
var __vueify_style__ = __vueify_insert__.insert("html{font-size:20px}")
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require("babel-runtime/helpers/createClass");

var _createClass3 = _interopRequireDefault(_createClass2);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var Test = function () {
  function Test() {
    (0, _classCallCheck3.default)(this, Test);
  }

  (0, _createClass3.default)(Test, [{
    key: "ok",
    value: function ok() {}
  }]);
  return Test;
}();

var evens = [2, 4, 6, 8];