vue_crud 0.1.0 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 7a3968959d978911425d23ccc57bad7a6e520b1d
-  data.tar.gz: e22d398e429375cb72eb45068d691f8e8db1201d
+  metadata.gz: 506d7ad9c2466b813f95735b7f9c10c7eeffe02e
+  data.tar.gz: 66e86d9227f5fdef4418616b03c1d8ea56ae1cff
 SHA512:
-  metadata.gz: 68fcb6ff3f771628a6d82db744af6e76d87b9e143dea98ab6736a9412d0cd59a82ecc938279c0098fe1e73d6bf43dffea411d7dba191dc6f6e2f0ca1fe478fe2
-  data.tar.gz: b57aad62dbf33091b101f4128cabb298a8e73952fa28570a9b7504dbe174c8cd67cd6a19b7020b28d4104ca0cea5a9ce1a5934d6c32f0f6a08e9975a39e3868a
+  metadata.gz: 5b9864cab21691306ea0bf3e632181a856f0fd0ab6707a996f2f25d7a24d5f48c267c6ed71222ad3de355ac66ddfb955aa59e71980878c1be1d6c578f95d3295
+  data.tar.gz: c73a836eeded14260e4315d260f769256c76dcc9b423648d930d9355a4fdaf1e01479b6985fafa5b811f1baeaa30010bfefd7fe9b25fd3b4779ce99e1c3901ec

data/lib/generators/vue_crud/install_generator.rb

@@ -1,4 +1,3 @@
-#lib/generators/gemname/install_generator.rb
 require 'rails/generators'
 module VueCrud
   class InstallGenerator < Rails::Generators::Base

data/lib/generators/vue_crud/templates/vue_crud.html

@@ -1,31 +1,35 @@
 <script type="text/javascript">
 $(document).ready(function() {
+    var column_type = 'card';
     $('.vue_form_for_new').html($('#vue_form').html());
-    var model_row = $($('#model-row').html());
-    model_row.find('.custom_model_row').html(
-        $('#custom_model_row').html()
+    var models = $($('#models-' + column_type).html());
+    models.find('.custom_models').html(
+        $('#custom_models').html()
     );
-    model_row.find('.custom_action').html(
+    models.find('.custom_action').html(
         $('#custom_action').html()
     );
-    model_row.find('.vue_form_for_edit').html(
+    models.find('.vue_form_for_edit').html(
         $('#vue_form').html()
     );
-    model_row.find('.custom_modal_body').html(
+    models.find('.custom_modal_body').html(
         $('#custom_modal_body').html()
     );
-    model_row.find('.custom_modal_action').html(
+    models.find('.custom_modal_action').html(
         $('#custom_modal_action').html()
     );
 
-    $('#model-row').html(model_row);
-    vue_init();
+    $('#models-' + column_type).html(models);
+    vue_init({
+        column_type: column_type,
+        suffix: '.json'
+    });
     $('.filter .ui.dropdown').dropdown();
 });
 </script>
 
 
-<div id="models">
+<div id="vue_crud">
     <input type="text" name="progress" id="form-progress">
     <h1 class="ui header">
         {{ info.titles.title }}
@@ -48,7 +52,7 @@ $(document).ready(function() {
     </div>
     <div class="ui divider"></div>
     <!-- NOTE: Pagination -->
-    <div class="ui pagination menu">
+    <div class="ui pagination menu" v-if="column_type == 'card'">
         <a class="item" @click.prevent="setPage(currentPage-1)" :class="{'disabled': (currentPage == '1')}">
         ＜
         </a>
@@ -59,12 +63,43 @@ $(document).ready(function() {
         ＞
         </a>
     </div>
-    <div class="ui divider"></div>
-    <!-- NOTE: model-row -->
-    <div class="row ui cards">
-        <model-row is="model-row" v-for="model in filteredModels" :model="model" :info="info" :selected_attribute="model_prefix + '.' + selected_attribute"></model-row>
+    <div class="ui divider" v-if="column_type == 'card'"></div>
+    <!-- NOTE: models -->
+    <div class="row ui cards" v-if="column_type == 'card'">
+        <models v-for="model in filteredModels" :model="model" :info="info" :selected_attribute="model_prefix + '.' + selected_attribute"></models>
     </div>
 
+    <table class="ui celled table" v-if="column_type == 'table'">
+        <thead>
+            <tr>
+                <th v-for="attribute in info.model_attributes" v-if="attribute.visible" :class="{highlight: attribute.model_prefix + '.' + attribute.name == model_prefix + '.' + selected_attribute}">
+                    {{ attribute.display_name }}
+                </th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr is="models" v-for="model in filteredModels" :model="model" :info="info" :selected_attribute="model_prefix + '.' + selected_attribute">
+            </tr>
+        </tbody>
+        <tfoot>
+            <tr>
+                <th :colspan="info.model_attributes.length">
+                    <div class="ui right floated pagination menu">
+                        <a class="item" @click.prevent="setPage(currentPage-1)" :class="{'disabled': (currentPage == '1')}">
+                        ＜
+                        </a>
+                        <a v-for="n in totalPage" @click.prevent="setPage(n)" :class="{'active': (currentPage == (n))}" class="item">
+                        {{n}}
+                        </a>
+                        <a class="item" @click.prevent="setPage(currentPage+1)" :class="{'disabled': (currentPage == totalPage)}">
+                        ＞
+                        </a>
+                    </div>
+                </th>
+            </tr>
+        </tfoot>
+    </table>
+
     <!-- NOTE: modal for new action -->
     <div class="ui modal new_modal" id="modelModal">
         <div class="header">Create {{ info.titles.title }}</div>
@@ -81,7 +116,22 @@ $(document).ready(function() {
 </div>
 
 <!-- NOTE: Templates -->
-<script type="text/x-template" id="model-row">
+<script type="text/x-template" id="models-table">
+    <tr>
+      <!-- <td>
+        <div class="ui ribbon label">First</div>
+      </td> -->
+      <td v-for="attribute in info.model_attributes" v-if="attribute.visible" :class="{highlight: attribute.model_prefix + '.' + attribute.name == selected_attribute}">
+          <p v-if="attribute.model_prefix">
+              {{ model[attribute.model_prefix][attribute.name] }}
+          </p>
+          <p v-else>
+              {{ model[attribute.name] }}
+          </p>
+      </td>
+    </tr>
+</script>
+<script type="text/x-template" id="models-card">
     <div class="col-md-4">
         <div class="card">
             <div class="content">
@@ -102,8 +152,8 @@ $(document).ready(function() {
                             </div>
                         </div>
                     </div>
-                    <!-- NOTE: Custom model row -->
-                    <div class="custom_model_row"></div>
+                    <!-- NOTE: Custom models -->
+                    <div class="custom_models"></div>
                 </div>
             </div>
             <div class="extra content">
@@ -209,13 +259,13 @@ $(document).ready(function() {
 </script>
 <!-- NOTE: memo-->
 <!-- <div class="row well well-sm">
-    <model-row is="model-row" v-for="model in models" :model="model"></model-row>
+    <models v-for="model in models" :model="model"></models>
 </div> -->
 <!--         ┌───────────────────────────────────────┐         -->
 <!--         │                                       ↓         -->
 <!-- v-for model in models 這個 model 會透過 :model="model" 傳值到 template，無法直接使用 v-for 迴圈出來的 model -->
 <!--                                          │
-In model-row component          props: {      ↓
+In models component          props: {      ↓
                                     model: Object
                                 }
 -->

data/lib/vue_crud/version.rb

@@ -1,3 +1,3 @@
 module VueCrud
-  VERSION = "0.1.0"
+  VERSION = "0.1.1"
 end

data/vendor/assets/javascripts/vue_crud.js

@@ -1,5 +1,6 @@
+(function(){var t,e,n,r,s,o,i,u,a,c,l,p,h,g,f,d,m,y,v,w,b,k,S,q,L,x,T,R,P,E,j,M,A,N,O,_,F,C,U,W,X,I,D,H,z,B,G,J,Q,K=[].slice,V={}.hasOwnProperty,Y=function(t,e){function n(){this.constructor=t}for(var r in e)V.call(e,r)&&(t[r]=e[r]);return n.prototype=e.prototype,t.prototype=new n,t.__super__=e.prototype,t},Z=[].indexOf||function(t){for(var e=0,n=this.length;n>e;e++)if(e in this&&this[e]===t)return e;return-1};for(b={catchupTime:100,initialRate:.03,minTime:250,ghostTime:100,maxProgressPerFrame:20,easeFactor:1.25,startOnPageLoad:!0,restartOnPushState:!0,restartOnRequestAfter:500,target:"body",elements:{checkInterval:100,selectors:["body"]},eventLag:{minSamples:10,sampleCount:3,lagThreshold:3},ajax:{trackMethods:["GET"],trackWebSockets:!0,ignoreURLs:[]}},P=function(){var t;return null!=(t="undefined"!=typeof performance&&null!==performance&&"function"==typeof performance.now?performance.now():void 0)?t:+new Date},j=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame,w=window.cancelAnimationFrame||window.mozCancelAnimationFrame,null==j&&(j=function(t){return setTimeout(t,50)},w=function(t){return clearTimeout(t)}),A=function(t){var e,n;return e=P(),(n=function(){var r;return r=P()-e,r>=33?(e=P(),t(r,function(){return j(n)})):setTimeout(n,33-r)})()},M=function(){var t,e,n;return n=arguments[0],e=arguments[1],t=3<=arguments.length?K.call(arguments,2):[],"function"==typeof n[e]?n[e].apply(n,t):n[e]},k=function(){var t,e,n,r,s,o,i;for(e=arguments[0],r=2<=arguments.length?K.call(arguments,1):[],o=0,i=r.length;i>o;o++)if(n=r[o])for(t in n)V.call(n,t)&&(s=n[t],null!=e[t]&&"object"==typeof e[t]&&null!=s&&"object"==typeof s?k(e[t],s):e[t]=s);return e},m=function(t){var e,n,r,s,o;for(n=e=0,s=0,o=t.length;o>s;s++)r=t[s],n+=Math.abs(r),e++;return n/e},q=function(t,e){var n,r,s;if(null==t&&(t="options"),null==e&&(e=!0),s=document.querySelector("[data-pace-"+t+"]")){if(n=s.getAttribute("data-pace-"+t),!e)return n;try{return JSON.parse(n)}catch(o){return r=o,"undefined"!=typeof console&&null!==console?console.error("Error parsing inline pace options",r):void 0}}},i=function(){function t(){}return t.prototype.on=function(t,e,n,r){var s;return null==r&&(r=!1),null==this.bindings&&(this.bindings={}),null==(s=this.bindings)[t]&&(s[t]=[]),this.bindings[t].push({handler:e,ctx:n,once:r})},t.prototype.once=function(t,e,n){return this.on(t,e,n,!0)},t.prototype.off=function(t,e){var n,r,s;if(null!=(null!=(r=this.bindings)?r[t]:void 0)){if(null==e)return delete this.bindings[t];for(n=0,s=[];n<this.bindings[t].length;)s.push(this.bindings[t][n].handler===e?this.bindings[t].splice(n,1):n++);return s}},t.prototype.trigger=function(){var t,e,n,r,s,o,i,u,a;if(n=arguments[0],t=2<=arguments.length?K.call(arguments,1):[],null!=(i=this.bindings)?i[n]:void 0){for(s=0,a=[];s<this.bindings[n].length;)u=this.bindings[n][s],r=u.handler,e=u.ctx,o=u.once,r.apply(null!=e?e:this,t),a.push(o?this.bindings[n].splice(s,1):s++);return a}},t}(),c=window.Pace||{},window.Pace=c,k(c,i.prototype),E=c.options=k({},b,window.paceOptions,q()),G=["ajax","document","eventLag","elements"],D=0,z=G.length;z>D;D++)F=G[D],E[F]===!0&&(E[F]=b[F]);a=function(t){function e(){return J=e.__super__.constructor.apply(this,arguments)}return Y(e,t),e}(Error),e=function(){function t(){this.progress=0}return t.prototype.getElement=function(){var t;if(null==this.el){if(t=document.querySelector(E.target),!t)throw new a;this.el=document.createElement("div"),this.el.className="pace pace-active",document.body.className=document.body.className.replace(/pace-done/g,""),document.body.className+=" pace-running",this.el.innerHTML='<div class="pace-progress">\n  <div class="pace-progress-inner"></div>\n</div>\n<div class="pace-activity"></div>',null!=t.firstChild?t.insertBefore(this.el,t.firstChild):t.appendChild(this.el)}return this.el},t.prototype.finish=function(){var t;return t=this.getElement(),t.className=t.className.replace("pace-active",""),t.className+=" pace-inactive",document.body.className=document.body.className.replace("pace-running",""),document.body.className+=" pace-done"},t.prototype.update=function(t){return this.progress=t,this.render()},t.prototype.destroy=function(){try{this.getElement().parentNode.removeChild(this.getElement())}catch(t){a=t}return this.el=void 0},t.prototype.render=function(){var t,e,n,r,s,o,i;if(null==document.querySelector(E.target))return!1;for(t=this.getElement(),r="translate3d("+this.progress+"%, 0, 0)",i=["webkitTransform","msTransform","transform"],s=0,o=i.length;o>s;s++)e=i[s],t.children[0].style[e]=r;var u=document.getElementById("form-progress");return"undefined"!=typeof u&&null!=u&&(u.value=0|this.progress,jQuery(u).change()),(!this.lastRenderedProgress||this.lastRenderedProgress|0!==this.progress|0)&&(t.children[0].setAttribute("data-progress-text",""+(0|this.progress)+"%"),this.progress>=100?n="99":(n=this.progress<10?"0":"",n+=0|this.progress),t.children[0].setAttribute("data-progress",""+n)),this.lastRenderedProgress=this.progress},t.prototype.done=function(){return this.progress>=100},t}(),u=function(){function t(){this.bindings={}}return t.prototype.trigger=function(t,e){var n,r,s,o,i;if(null!=this.bindings[t]){for(o=this.bindings[t],i=[],r=0,s=o.length;s>r;r++)n=o[r],i.push(n.call(this,e));return i}},t.prototype.on=function(t,e){var n;return null==(n=this.bindings)[t]&&(n[t]=[]),this.bindings[t].push(e)},t}(),I=window.XMLHttpRequest,X=window.XDomainRequest,W=window.WebSocket,S=function(t,e){var n,r,s,o;o=[];for(r in e.prototype)try{s=e.prototype[r],o.push(null==t[r]&&"function"!=typeof s?t[r]=s:void 0)}catch(i){n=i}return o},T=[],c.ignore=function(){var t,e,n;return e=arguments[0],t=2<=arguments.length?K.call(arguments,1):[],T.unshift("ignore"),n=e.apply(null,t),T.shift(),n},c.track=function(){var t,e,n;return e=arguments[0],t=2<=arguments.length?K.call(arguments,1):[],T.unshift("track"),n=e.apply(null,t),T.shift(),n},_=function(t){var e;if(null==t&&(t="GET"),"track"===T[0])return"force";if(!T.length&&E.ajax){if("socket"===t&&E.ajax.trackWebSockets)return!0;if(e=t.toUpperCase(),Z.call(E.ajax.trackMethods,e)>=0)return!0}return!1},l=function(t){function e(){var t,n=this;e.__super__.constructor.apply(this,arguments),t=function(t){var e;return e=t.open,t.open=function(r,s){return _(r)&&n.trigger("request",{type:r,url:s,request:t}),e.apply(t,arguments)}},window.XMLHttpRequest=function(e){var n;return n=new I(e),t(n),n};try{S(window.XMLHttpRequest,I)}catch(r){}if(null!=X){window.XDomainRequest=function(){var e;return e=new X,t(e),e};try{S(window.XDomainRequest,X)}catch(r){}}if(null!=W&&E.ajax.trackWebSockets){window.WebSocket=function(t,e){var r;return r=null!=e?new W(t,e):new W(t),_("socket")&&n.trigger("request",{type:"socket",url:t,protocols:e,request:r}),r};try{S(window.WebSocket,W)}catch(r){}}}return Y(e,t),e}(u),H=null,L=function(){return null==H&&(H=new l),H},O=function(t){var e,n,r,s;for(s=E.ajax.ignoreURLs,n=0,r=s.length;r>n;n++)if(e=s[n],"string"==typeof e){if(-1!==t.indexOf(e))return!0}else if(e.test(t))return!0;return!1},L().on("request",function(e){var n,r,s,o,i;return o=e.type,s=e.request,i=e.url,O(i)?void 0:c.running||E.restartOnRequestAfter===!1&&"force"!==_(o)?void 0:(r=arguments,n=E.restartOnRequestAfter||0,"boolean"==typeof n&&(n=0),setTimeout(function(){var e,n,i,u,a,l;if(e="socket"===o?s.readyState<2:0<(u=s.readyState)&&4>u){for(c.restart(),a=c.sources,l=[],n=0,i=a.length;i>n;n++){if(F=a[n],F instanceof t){F.watch.apply(F,r);break}l.push(void 0)}return l}},n))}),t=function(){function t(){var t=this;this.elements=[],L().on("request",function(){return t.watch.apply(t,arguments)})}return t.prototype.watch=function(t){var e,n,r,s;return r=t.type,e=t.request,s=t.url,O(s)?void 0:(n="socket"===r?new g(e):new f(e),this.elements.push(n))},t}(),f=function(){function t(t){var e,n,r,s,o,i,u=this;if(this.progress=0,null!=window.ProgressEvent)for(n=null,t.addEventListener("progress",function(t){return u.progress=t.lengthComputable?100*t.loaded/t.total:u.progress+(100-u.progress)/2},!1),i=["load","abort","timeout","error"],r=0,s=i.length;s>r;r++)e=i[r],t.addEventListener(e,function(){return u.progress=100},!1);else o=t.onreadystatechange,t.onreadystatechange=function(){var e;return 0===(e=t.readyState)||4===e?u.progress=100:3===t.readyState&&(u.progress=50),"function"==typeof o?o.apply(null,arguments):void 0}}return t}(),g=function(){function t(t){var e,n,r,s,o=this;for(this.progress=0,s=["error","open"],n=0,r=s.length;r>n;n++)e=s[n],t.addEventListener(e,function(){return o.progress=100},!1)}return t}(),r=function(){function t(t){var e,n,r,o;for(null==t&&(t={}),this.elements=[],null==t.selectors&&(t.selectors=[]),o=t.selectors,n=0,r=o.length;r>n;n++)e=o[n],this.elements.push(new s(e))}return t}(),s=function(){function t(t){this.selector=t,this.progress=0,this.check()}return t.prototype.check=function(){var t=this;return document.querySelector(this.selector)?this.done():setTimeout(function(){return t.check()},E.elements.checkInterval)},t.prototype.done=function(){return this.progress=100},t}(),n=function(){function t(){var t,e,n=this;this.progress=null!=(e=this.states[document.readyState])?e:100,t=document.onreadystatechange,document.onreadystatechange=function(){return null!=n.states[document.readyState]&&(n.progress=n.states[document.readyState]),"function"==typeof t?t.apply(null,arguments):void 0}}return t.prototype.states={loading:0,interactive:50,complete:100},t}(),o=function(){function t(){var t,e,n,r,s,o=this;this.progress=0,t=0,s=[],r=0,n=P(),e=setInterval(function(){var i;return i=P()-n-50,n=P(),s.push(i),s.length>E.eventLag.sampleCount&&s.shift(),t=m(s),++r>=E.eventLag.minSamples&&t<E.eventLag.lagThreshold?(o.progress=100,clearInterval(e)):o.progress=100*(3/(t+3))},50)}return t}(),h=function(){function t(t){this.source=t,this.last=this.sinceLastUpdate=0,this.rate=E.initialRate,this.catchup=0,this.progress=this.lastProgress=0,null!=this.source&&(this.progress=M(this.source,"progress"))}return t.prototype.tick=function(t,e){var n;return null==e&&(e=M(this.source,"progress")),e>=100&&(this.done=!0),e===this.last?this.sinceLastUpdate+=t:(this.sinceLastUpdate&&(this.rate=(e-this.last)/this.sinceLastUpdate),this.catchup=(e-this.progress)/E.catchupTime,this.sinceLastUpdate=0,this.last=e),e>this.progress&&(this.progress+=this.catchup*t),n=1-Math.pow(this.progress/100,E.easeFactor),this.progress+=n*this.rate*t,this.progress=Math.min(this.lastProgress+E.maxProgressPerFrame,this.progress),this.progress=Math.max(0,this.progress),this.progress=Math.min(100,this.progress),this.lastProgress=this.progress,this.progress},t}(),C=null,N=null,y=null,U=null,d=null,v=null,c.running=!1,x=function(){return E.restartOnPushState?c.restart():void 0},null!=window.history.pushState&&(B=window.history.pushState,window.history.pushState=function(){return x(),B.apply(window.history,arguments)}),null!=window.history.replaceState&&(Q=window.history.replaceState,window.history.replaceState=function(){return x(),Q.apply(window.history,arguments)}),p={ajax:t,elements:r,document:n,eventLag:o},(R=function(){var t,n,r,s,o,i,u,a;for(c.sources=C=[],i=["ajax","elements","document","eventLag"],n=0,s=i.length;s>n;n++)t=i[n],E[t]!==!1&&C.push(new p[t](E[t]));for(a=null!=(u=E.extraSources)?u:[],r=0,o=a.length;o>r;r++)F=a[r],C.push(new F(E));return c.bar=y=new e,N=[],U=new h})(),c.stop=function(){return c.trigger("stop"),c.running=!1,y.destroy(),v=!0,null!=d&&("function"==typeof w&&w(d),d=null),R()},c.restart=function(){return c.trigger("restart"),c.stop(),c.start()},c.go=function(){var t;return c.running=!0,y.render(),t=P(),v=!1,d=A(function(e,n){var r,s,o,i,u,a,l,p,g,f,d,m,w,b,k,S;for(p=100-y.progress,s=d=0,o=!0,a=m=0,b=C.length;b>m;a=++m)for(F=C[a],f=null!=N[a]?N[a]:N[a]=[],u=null!=(S=F.elements)?S:[F],l=w=0,k=u.length;k>w;l=++w)i=u[l],g=null!=f[l]?f[l]:f[l]=new h(i),o&=g.done,g.done||(s++,d+=g.tick(e));return r=d/s,y.update(U.tick(e,r)),y.done()||o||v?(y.update(100),c.trigger("done"),setTimeout(function(){return y.finish(),c.running=!1,c.trigger("hide")},Math.max(E.ghostTime,Math.max(E.minTime-(P()-t),0)))):n()})},c.start=function(t){k(E,t),c.running=!0;try{y.render()}catch(e){a=e}return document.querySelector(".pace")?(c.trigger("start"),c.go()):setTimeout(c.start,50)},"function"==typeof define&&define.amd?define(function(){return c}):"object"==typeof exports?module.exports=c:E.startOnPageLoad&&c.start()}).call(this);
+
 $(document).ajaxStart(function() { Pace.restart(); });
-var suffix = '.json';
 Vue.config.devtools = true;
 Pace.on('done', function() {
     $('#form-progress').val('0');
@@ -11,7 +12,7 @@ function sleep(time) {
 function obj_to_json(obj) {
     return JSON.parse(JSON.stringify(obj));
 }
-var model_row_mixin = {}
+var models_mixin = {}
 var root_mixin = {}
 function updateQueryStringParam(key, value) {
     baseUrl = [location.protocol, '//', location.host, location.pathname].join('');
@@ -40,14 +41,19 @@ function getParameterByName(name) {
     if (!results[2]) return '';
     return decodeURIComponent(results[2].replace(/\+/g, " "));
 }
-function vue_init() {
+function vue_init(params = {}) {
+    var default_options = {
+        suffix: '.json',
+        column_type: 'card'
+    }
+    var options = $.extend(true, {}, default_options, params)
     Vue.filter('datetime', function (value) {
         return new Date(value).toLocaleString();
     })
 
-    var modelRowComponent = Vue.component('model-row', {
-        mixins: [model_row_mixin],
-        template: '#model-row',
+    var modelsComponent = Vue.component('models', {
+        mixins: [models_mixin],
+        template: '#models-' + options.column_type,
         props: {
             model: Object,
             selected_attribute: String,
@@ -93,7 +99,7 @@ function vue_init() {
                 if(confirm("Are you sure?") == true) {
                     $.ajax({
                         method: 'DELETE',
-                        url: that.info.url_prefix + '/' + that.model.id + suffix,
+                        url: that.info.url_prefix + '/' + that.model.id + options.suffix,
                         success: function(res) {
                             $(that.$el).remove();
                         },
@@ -114,7 +120,7 @@ function vue_init() {
                     data: {
                         model: that.model,
                     },
-                    url: that.info.url_prefix + '/' + that.model.id + suffix,
+                    url: that.info.url_prefix + '/' + that.model.id + options.suffix,
                     beforeSend: function() {
                         modal.find('.dimmer').toggleClass('active');
                         $('.progress-bar').css('width', '0');
@@ -140,10 +146,11 @@ function vue_init() {
         }
     })
 
-    var modelsVue = new Vue({
+    var rootVue = new Vue({
         mixins: [root_mixin],
-        el: '#models',
+        el: '#vue_crud',
         data: {
+            column_type: options.column_type,
             models: [],
             info: {
                 url_prefix: '',
@@ -165,12 +172,12 @@ function vue_init() {
         mounted: function() {
             var that = this;
             $.ajax({
-                url: window.location.pathname + '/info' + suffix,
+                url: window.location.pathname + '/info' + options.suffix,
                 success: function(res) {
                     that.info = res;
                     that.model = obj_to_json(that.info.structure);
                     $.ajax({
-                        url: that.info.url_prefix + suffix,
+                        url: that.info.url_prefix + options.suffix,
                         success: function(res) {
                             that.models = res;
                         }
@@ -256,7 +263,7 @@ function vue_init() {
                     data: {
                         model: that.model,
                     },
-                    url: that.info.url_prefix + suffix,
+                    url: that.info.url_prefix + options.suffix,
                     before: function() {
                         $('.new_modal').find('.dimmer').toggleClass('active');
                         $('.progress-bar').css('width', '0');

data/vendor/assets/stylesheets/vue_crud.css

@@ -1,8 +1,10 @@
+.pace{-webkit-pointer-events:none;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.pace-inactive{display:none}.pace .pace-progress{background:#29d;position:fixed;z-index:2000;top:0;right:100%;width:100%;height:2px}
+
 .ui.cards > .card > .extra a.save_now {
     color: rgb(33, 133, 208);
     opacity: 1;
 }
-.progress {
+.card .progress {
     margin-bottom: 0;
     border-radius: 0;
     height: 10px;
@@ -14,6 +16,18 @@
 .summary.highlight {
     border: 2px solid #a90000;
 }
+th.highlight {
+    border: 2px solid #a90000 !important;
+}
+td.highlight {
+    border-left: 2px solid #a90000 !important;
+    border-right: 2px solid #a90000;
+}
+tbody tr:last-child td.highlight {
+    border-left: 2px solid #a90000 !important;
+    border-right: 2px solid #a90000;
+    border-bottom: 2px solid #a90000;
+}
 .inline-block {
     display: inline-block;
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: vue_crud
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.1
 platform: ruby
 authors:
 - Donald Chiang
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2016-11-02 00:00:00.000000000 Z
+date: 2016-11-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler