vue_crud 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 7a3968959d978911425d23ccc57bad7a6e520b1d
+  data.tar.gz: e22d398e429375cb72eb45068d691f8e8db1201d
+SHA512:
+  metadata.gz: 68fcb6ff3f771628a6d82db744af6e76d87b9e143dea98ab6736a9412d0cd59a82ecc938279c0098fe1e73d6bf43dffea411d7dba191dc6f6e2f0ca1fe478fe2
+  data.tar.gz: b57aad62dbf33091b101f4128cabb298a8e73952fa28570a9b7504dbe174c8cd67cd6a19b7020b28d4104ca0cea5a9ce1a5934d6c32f0f6a08e9975a39e3868a

data/.gitignore

@@ -0,0 +1,9 @@
+/.bundle/
+/.yardoc
+/Gemfile.lock
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/

data/.travis.yml

@@ -0,0 +1,5 @@
+sudo: false
+language: ruby
+rvm:
+  - 2.3.0
+before_install: gem install bundler -v 1.13.4

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in vue_crud.gemspec
+gemspec

data/README.md

@@ -0,0 +1,36 @@
+# VueCrud
+
+Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/vue_crud`. To experiment with that code, run `bin/console` for an interactive prompt.
+
+TODO: Delete this and the text above, and describe your gem
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'vue_crud'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install vue_crud
+
+## Usage
+
+TODO: Write usage instructions here
+
+## Development
+
+After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake test` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+
+To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/vue_crud.
+

data/Rakefile

@@ -0,0 +1,10 @@
+require "bundler/gem_tasks"
+require "rake/testtask"
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << "test"
+  t.libs << "lib"
+  t.test_files = FileList['test/**/*_test.rb']
+end
+
+task :default => :test

data/bin/console

@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+
+require "bundler/setup"
+require "vue_crud"
+
+# You can add fixtures and/or initialization code here to make experimenting
+# with your gem easier. You can also use a different console, if you like.
+
+# (If you use this, don't forget to add pry to your Gemfile!)
+# require "pry"
+# Pry.start
+
+require "irb"
+IRB.start

data/bin/setup

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+set -euo pipefail
+IFS=$'\n\t'
+set -vx
+
+bundle install
+
+# Do any other automated setup that you need to do here

data/lib/generators/vue_crud/install_generator.rb

@@ -0,0 +1,11 @@
+#lib/generators/gemname/install_generator.rb
+require 'rails/generators'
+module VueCrud
+  class InstallGenerator < Rails::Generators::Base
+      source_root File.expand_path("../templates", __FILE__)
+
+      def copy_template_file
+        copy_file "vue_crud.html", "public/vue_crud.html"
+      end
+  end
+end

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

@@ -0,0 +1,221 @@
+<script type="text/javascript">
+$(document).ready(function() {
+    $('.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()
+    );
+    model_row.find('.custom_action').html(
+        $('#custom_action').html()
+    );
+    model_row.find('.vue_form_for_edit').html(
+        $('#vue_form').html()
+    );
+    model_row.find('.custom_modal_body').html(
+        $('#custom_modal_body').html()
+    );
+    model_row.find('.custom_modal_action').html(
+        $('#custom_modal_action').html()
+    );
+
+    $('#model-row').html(model_row);
+    vue_init();
+    $('.filter .ui.dropdown').dropdown();
+});
+</script>
+
+
+<div id="models">
+    <input type="text" name="progress" id="form-progress">
+    <h1 class="ui header">
+        {{ info.titles.title }}
+        <div class="sub header"><small>{{ info.titles.subtitle }}</small></div>
+    </h1>
+    <div class="ui blue button" data-modal="#modelModal">Add</div>
+    <div class="ui divider"></div>
+    <!-- NOTE: Filter -->
+    <div class="ui left action right icon labeled input filter" :class="{loading: is_calculating}">
+        <a :href="info.url_prefix" class="ui button red" v-show="selected_attribute">Reset</a>
+        <div class="ui basic floating dropdown button">
+            <div class="text">{{ selected_attribute || 'Attribute' }}</div>
+            <i class="dropdown icon"></i>
+            <div class="menu attribute_select">
+                <div class="item attribute_option" v-for="attribute in info.model_attributes" :model_prefix="attribute.model_prefix || ''" :target="attribute.name" :class="{selected: selected_attribute == attribute.name,active: selected_attribute == attribute.name}">{{ attribute.display_name }}</div>
+            </div>
+        </div>
+        <input type="text" id="searchQuery" :placeholder="searchStatus" v-model="searchQuery">
+        <i class="icon search"></i>
+    </div>
+    <div class="ui divider"></div>
+    <!-- NOTE: Pagination -->
+    <div class="ui 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>
+    <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>
+
+    <!-- NOTE: modal for new action -->
+    <div class="ui modal new_modal" id="modelModal">
+        <div class="header">Create {{ info.titles.title }}</div>
+        <!-- NOTE: Vue form -->
+        <div class="content vue_form_for_new"></div>
+        <div class="actions">
+            <div class="ui basic gray cancel button">Cancel</div>
+            <div @click="createModel" class="ui primary button">Create</div>
+        </div>
+        <div class="ui blue bottom attached progress">
+            <div class="bar" :style="{width: progress + '%'}"></div>
+        </div>
+    </div>
+</div>
+
+<!-- NOTE: Templates -->
+<script type="text/x-template" id="model-row">
+    <div class="col-md-4">
+        <div class="card">
+            <div class="content">
+                <div class="header" v-if="info.titles.title_attribute_model_prefix">{{ model[info.titles.title_attribute_model_prefix][info.titles.title_attribute] }}</div>
+                <div class="header" v-else>{{ model[info.titles.title_attribute] }}</div>
+                <div class="meta">{{ info.titles.model_name }}</div>
+                <div class="ui divider"></div>
+                <div class="description">
+                    <div class="ui small feed" v-for="attribute in info.model_attributes" v-if="attribute.visible">
+                        <div class="event">
+                            <div class="content">
+                                <div class="summary" :class="{highlight: attribute.model_prefix + '.' + attribute.name == selected_attribute}" v-if="attribute.model_prefix">
+                                    {{ attribute.display_name }}: {{ model[attribute.model_prefix][attribute.name] }}
+                                </div>
+                                <div class="summary" :class="{highlight: attribute.model_prefix + '.' + attribute.name == selected_attribute}" v-else>
+                                    {{ attribute.display_name }}: {{ model[attribute.name] }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- NOTE: Custom model row -->
+                    <div class="custom_model_row"></div>
+                </div>
+            </div>
+            <div class="extra content">
+                <div class="ui orange right ribbon label" v-show="modified">您有尚未儲存的變更，<a href="#" @click="updateModel(false)" onclick="return false" class="save_now">立即儲存</a></div>
+                <div class="ui teal right ribbon label" v-show="is_success">儲存成功</div>
+                <div class="ui divider"></div>
+                <!-- NOTE: Custom action -->
+                <div class="inline-block custom_action"></div>
+                <div class="ui blue button" :data-modal="'#editModal_' + model.id">Edit</div>
+                <div @click="deleteModel" class="ui basic red right floated button" v-show="!deleteMode">Delete</div>
+            </div>
+            <div class="ui modal" :id="'editModal_' + model.id">
+                <div class="ui inverted dimmer">
+                    <div class="ui indeterminate text loader">Progressing</div>
+                </div>
+                <div class="header">Update {{ info.titles.title }}</div>
+                <div class="content">
+                    <!-- NOTE: Not customMode -->
+                    <div v-show="!customMode" class="vue_form_for_edit"></div>
+                    <!-- NOTE: Is customMode -->
+                    <!-- NOTE: Custom modal body -->
+                    <div v-show="customMode"><div class="custom_modal_body"></div></div>
+                </div>
+                <div class="actions">
+                    <button class="ui basic gray cancel button">Cancel</button>
+                    <button @click="updateModel" class="ui button blue" v-show="!customMode">Update</button>
+                    <!-- NOTE: Custom modal action -->
+                    <div class="inline-block custom_modal_action"></div>
+                </div>
+            </div>
+            <div class="ui blue bottom attached progress">
+                <div class="bar" :style="{width: progress + '%'}"></div>
+            </div>
+        </div>
+    </div>
+</script>
+
+<script type="text/x-template" id="vue_form">
+    <form class="ui form">
+        <div v-for="attribute in info.model_attributes" v-if="attribute.editable">
+            <div class="field" v-if="attribute.type == 'select'">
+                <label :for="'model_' + attribute.display_name">{{ attribute.display_name }}</label>
+                <select :id="'model_' + attribute.display_name" v-if="attribute.model_prefix" v-model="model[attribute.model_prefix][attribute.name]" class="ui fluid dropdown">
+                    <option v-for="option in attribute.options" :value="option.value" v-text="option.text"></option>
+                </select>
+                <select :id="'model_' + attribute.display_name" v-else v-model="model[attribute.name]" class="ui fluid dropdown">
+                    <option v-for="option in attribute.options" :value="option.value" v-text="option.text"></option>
+                </select>
+                <div class="ui pointing red basic label" v-show="errors[attribute.name]">
+                    <span style="color: red" v-for="(error, index) in errors[attribute.name]">
+                        <span v-if="index > 0">,</span> {{ error }}
+                    </span>
+                </div>
+            </div>
+            <div class="field" v-if="attribute.type == 'multiSelect'">
+                <label :for="'model_' + attribute.display_name">{{ attribute.display_name }}</label>
+                <select :id="'model_' + attribute.display_name" multiple v-if="attribute.model_prefix" v-model="model[attribute.model_prefix][attribute.name]" class="ui fluid dropdown">
+                    <option v-for="option in attribute.options" :value="option.value" v-text="option.text"></option>
+                </select>
+                <select :id="'model_' + attribute.display_name" multiple v-else v-model="model[attribute.name]" class="ui fluid dropdown">
+                    <option v-for="option in attribute.options" :value="option.value" v-text="option.text"></option>
+                </select>
+                <div class="ui pointing red basic label" v-show="errors[attribute.name]">
+                    <span style="color: red" v-for="(error, index) in errors[attribute.name]">
+                        <span v-if="index > 0">,</span> {{ error }}
+                    </span>
+                </div>
+            </div>
+            <div class="field" v-if="attribute.type == 'textarea'">
+                <label :for="'model_' + attribute.display_name">{{ attribute.display_name }}</label>
+                <textarea :id="'model_' + attribute.display_name" v-if="attribute.model_prefix" v-model="model[attribute.model_prefix][attribute.name]"></textarea>
+                <textarea :id="'model_' + attribute.display_name" v-else v-model="model[attribute.name]"></textarea>
+                <div class="ui pointing red basic label" v-show="errors[attribute.name]">
+                    <span style="color: red" v-for="(error, index) in errors[attribute.name]">
+                        <span v-if="index > 0">,</span> {{ error }}
+                    </span>
+                </div>
+            </div>
+            <div class="field" v-if="attribute.type == 'checkbox'">
+                <div class="ui slider checkbox">
+                    <input type="checkbox" :id="'model_' + attribute.display_name" v-if="attribute.model_prefix" v-model="model[attribute.model_prefix][attribute.name]">
+                    <input type="checkbox" :id="'model_' + attribute.display_name" v-else v-model="model[attribute.name]">
+                    <label :for="'model_' + attribute.display_name">{{ attribute.display_name }}</label>
+                </div>
+                <div class="ui pointing red basic label" v-show="errors[attribute.name]">
+                    <span style="color: red" v-for="(error, index) in errors[attribute.name]">
+                        <span v-if="index > 0">,</span> {{ error }}
+                    </span>
+                </div>
+            </div>
+            <div class="field" v-if="attribute.type != 'select' && attribute.type != 'multiSelect' && attribute.type != 'textarea' && attribute.type != 'checkbox'">
+                <label :for="'model_' + attribute.display_name">{{ attribute.display_name }}</label>
+                <input :type="attribute.type" :id="'model_' + attribute.display_name" v-if="attribute.model_prefix" v-model="model[attribute.model_prefix][attribute.name]">
+                <input :type="attribute.type" :id="'model_' + attribute.display_name" v-else v-model="model[attribute.name]">
+                <div class="ui pointing red basic label" v-show="errors[attribute.name]">
+                    <span style="color: red" v-for="(error, index) in errors[attribute.name]">
+                        <span v-if="index > 0">,</span> {{ error }}
+                    </span>
+                </div>
+            </div>
+        </div>
+    </form>
+</script>
+<!-- NOTE: memo-->
+<!-- <div class="row well well-sm">
+    <model-row is="model-row" v-for="model in models" :model="model"></model-row>
+</div> -->
+<!--         ┌───────────────────────────────────────┐         -->
+<!--         │                                       ↓         -->
+<!-- v-for model in models 這個 model 會透過 :model="model" 傳值到 template，無法直接使用 v-for 迴圈出來的 model -->
+<!--                                          │
+In model-row component          props: {      ↓
+                                    model: Object
+                                }
+-->

data/lib/vue_crud/engine.rb

@@ -0,0 +1,4 @@
+module VueCrud
+    class Engine < Rails::Engine
+    end
+end

data/lib/vue_crud/version.rb

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

data/lib/vue_crud.rb

@@ -0,0 +1,6 @@
+require "vue_crud/version"
+require "vue_crud/engine"
+require "generators/vue_crud/install_generator"
+module VueCrud
+  # Your code goes here...
+end

data/vendor/assets/javascripts/vue_crud.js

@@ -0,0 +1,295 @@
+$(document).ajaxStart(function() { Pace.restart(); });
+var suffix = '.json';
+Vue.config.devtools = true;
+Pace.on('done', function() {
+    $('#form-progress').val('0');
+});
+var event_hub = new Vue();
+function sleep(time) {
+  return new Promise((resolve) => setTimeout(resolve, time));
+}
+function obj_to_json(obj) {
+    return JSON.parse(JSON.stringify(obj));
+}
+var model_row_mixin = {}
+var root_mixin = {}
+function updateQueryStringParam(key, value) {
+    baseUrl = [location.protocol, '//', location.host, location.pathname].join('');
+    urlQueryString = document.location.search;
+    var newParam = key + '=' + value,
+    params = '?' + newParam;
+
+    // If the "search" string exists, then build params from it
+    if (urlQueryString) {
+        keyRegex = new RegExp('([\?&])' + key + '[^&]*');
+        // If param exists already, update it
+        if (urlQueryString.match(keyRegex) !== null) {
+            params = urlQueryString.replace(keyRegex, "$1" + newParam);
+        } else { // Otherwise, add it to end of query string
+            params = urlQueryString + '&' + newParam;
+        }
+    }
+    window.history.replaceState({}, "", baseUrl + params);
+}
+function getParameterByName(name) {
+    var url = window.location.href;
+    name = name.replace(/[\[\]]/g, "\\$&");
+    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
+        results = regex.exec(url);
+    if (!results) return '';
+    if (!results[2]) return '';
+    return decodeURIComponent(results[2].replace(/\+/g, " "));
+}
+function vue_init() {
+    Vue.filter('datetime', function (value) {
+        return new Date(value).toLocaleString();
+    })
+
+    var modelRowComponent = Vue.component('model-row', {
+        mixins: [model_row_mixin],
+        template: '#model-row',
+        props: {
+            model: Object,
+            selected_attribute: String,
+            info: Object
+        },
+        data: function() {
+            return {
+                progress: '0',
+                errors: {},
+                modified: false,
+                customMode:  false,
+                deleteMode: false,
+                is_success: false
+            }
+        },
+        watch: {
+            model: {
+                handler: function (value, old_value) {
+                    // old_value and value(model self) will be changed on Computed method
+                    // Only watch model's data change so set value === old_value
+                    // value === old_value means model not change
+                    if(value === old_value) {
+                        this.modified = true;
+                        this.is_success = false;
+                    }
+                },
+                deep: true
+            }
+        },
+        mounted: function() {
+            event_hub.$on('update_progress', function(progress) {
+                this.progress = progress;
+            }.bind(this));
+
+            event_hub.$on('cancel_customMode', function() {
+                this.customMode = false;
+            }.bind(this));
+        },
+        methods: {
+            deleteModel: function () {
+                var that = this;
+                that.deleteMode = true;
+                if(confirm("Are you sure?") == true) {
+                    $.ajax({
+                        method: 'DELETE',
+                        url: that.info.url_prefix + '/' + that.model.id + suffix,
+                        success: function(res) {
+                            $(that.$el).remove();
+                        },
+                        error: function(res) {
+                            that.deleteMode = false;
+                        }
+                    })
+                }
+                else {
+                    that.deleteMode = false;
+                }
+            },
+            updateModel: function() {
+                var that = this;
+                var modal = $('#editModal_' + that.model.id);
+                $.ajax({
+                    method: 'PATCH',
+                    data: {
+                        model: that.model,
+                    },
+                    url: that.info.url_prefix + '/' + that.model.id + suffix,
+                    beforeSend: function() {
+                        modal.find('.dimmer').toggleClass('active');
+                        $('.progress-bar').css('width', '0');
+                    },
+                    success: function(res) {
+                        that.errors = {};
+                        that.modified = false;
+                        that.is_success = true;
+                        sleep(500).then(() => {
+                            modal.find('.dimmer').toggleClass('active');
+                            modal.modal('hide');
+                        });
+                        sleep(1500).then(() => {
+                            that.is_success = false;
+                        });
+                    },
+                    error: function(res) {
+                        that.errors = res.responseJSON.errors;
+                        modal.find('.dimmer').toggleClass('active');
+                    }
+                });
+            }
+        }
+    })
+
+    var modelsVue = new Vue({
+        mixins: [root_mixin],
+        el: '#models',
+        data: {
+            models: [],
+            info: {
+                url_prefix: '',
+                titles: {},
+                structure: {},
+                model_attributes: []
+            },
+            model: {},
+            errors: {},
+            progress: '0',
+            countOfPage: 9,
+            currentPage: getParameterByName("p") || 1,
+            searchQuery: getParameterByName("q"),
+            filteredModelCount: null,
+            is_calculating: false,
+            model_prefix: getParameterByName("mp"),
+            selected_attribute: getParameterByName("sa")
+        },
+        mounted: function() {
+            var that = this;
+            $.ajax({
+                url: window.location.pathname + '/info' + suffix,
+                success: function(res) {
+                    that.info = res;
+                    that.model = obj_to_json(that.info.structure);
+                    $.ajax({
+                        url: that.info.url_prefix + suffix,
+                        success: function(res) {
+                            that.models = res;
+                        }
+                    });
+                }
+            });
+            event_hub.$on('update_progress', function(progress) {
+                this.progress = progress;
+            }.bind(this));
+            $('#form-progress').change(function(){
+                event_hub.$emit('update_progress', $(this).val());
+            });
+            $(document).delegate('.attribute_option', 'click', function(event) {
+                var model_prefix = $('.attribute_select').find('.item.selected').attr('model_prefix');
+                var selected_attribute = $('.attribute_select').find('.item.selected').attr('target') || "id";
+                that.model_prefix = model_prefix;
+                that.selected_attribute = selected_attribute;
+                updateQueryStringParam('mp', that.model_prefix);
+                updateQueryStringParam('sa', that.selected_attribute);
+            });
+        },
+        computed: {
+            searchStatus: function() {
+                if (this.is_calculating) {
+                    return 'Loading...'
+                } else {
+                    return '✓ Done';
+                }
+            },
+            pageStart: function() {
+                var that = this;
+                return (that.currentPage - 1) * that.countOfPage;
+            },
+            totalPage: function() {
+                var that = this;
+                if(that.searchQuery.trim() === '') {
+                    return Math.ceil(that.models.length / that.countOfPage);
+                }
+                else{
+                    return Math.ceil(that.filteredModelCount / that.countOfPage);
+                }
+            },
+            filteredModels: function() {
+                var that = this;
+                that.is_calculating = true;
+                var result = that.models.filter(function (model) {
+                    if(that.model_prefix.length > 0) {
+                        return String(model[that.model_prefix][that.selected_attribute]).indexOf(that.searchQuery) !== -1;
+                    }
+                    else {
+                        return String(model[that.selected_attribute]).indexOf(that.searchQuery) !== -1;
+                    }
+                });
+                that.filteredModelCount = result.length
+                setTimeout(function () {
+                    that.is_calculating = false
+                }, 500)
+                return result.slice(
+                    that.pageStart,
+                    that.countOfPage + that.pageStart
+                );
+            }
+        },
+        watch: {
+          searchQuery: function () {
+              this.currentPage = 1;
+              updateQueryStringParam('q', this.searchQuery);
+              updateQueryStringParam('p', 1);
+          }
+        },
+        methods: {
+            setPage: function(idx){
+                if( idx <= 0 || idx > this.totalPage ){
+                    return;
+                }
+                this.currentPage = idx;
+                updateQueryStringParam('p', this.currentPage);
+            },
+            createModel: function () {
+                var that = this;
+                $.ajax({
+                    method: 'POST',
+                    data: {
+                        model: that.model,
+                    },
+                    url: that.info.url_prefix + suffix,
+                    before: function() {
+                        $('.new_modal').find('.dimmer').toggleClass('active');
+                        $('.progress-bar').css('width', '0');
+                    },
+                    success: function(res) {
+                        var modal = $(that.$el).parents('.modal');
+                        that.errors = {};
+                        that.model = obj_to_json(that.info.structure);
+                        that.models.push(res);
+                        sleep(500).then(() => {
+                            $('.new_modal').find('.dimmer').toggleClass('active');
+                            $('.new_modal').modal('hide');
+                        });
+                    },
+                    error: function(res) {
+                        that.errors = res.responseJSON.errors;
+                        $('.new_modal').find('.dimmer').toggleClass('active');
+                    }
+                });
+            }
+        }
+    })
+}
+$(document).ready(function() {
+    $(document).delegate('[data-modal]', 'click', function(event) {
+        var target = $(this).data('modal');
+        $(target).modal({
+            onShow: function() {
+                $(this).find('select.ui.dropdown').dropdown();
+            },
+            onHide: function() {
+                event_hub.$emit('cancel_customMode');
+            }
+        }).modal('show');
+    });
+});

data/vendor/assets/stylesheets/vue_crud.css

@@ -0,0 +1,19 @@
+.ui.cards > .card > .extra a.save_now {
+    color: rgb(33, 133, 208);
+    opacity: 1;
+}
+.progress {
+    margin-bottom: 0;
+    border-radius: 0;
+    height: 10px;
+}
+#form-progress {
+    position: fixed;
+    top: -9999px;
+}
+.summary.highlight {
+    border: 2px solid #a90000;
+}
+.inline-block {
+    display: inline-block;
+}

data/vue_crud.gemspec

@@ -0,0 +1,35 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'vue_crud/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "vue_crud"
+  spec.version       = VueCrud::VERSION
+  spec.authors       = ["Donald Chiang"]
+  spec.email         = ["dc@mynet.com.tw"]
+  spec.license       = "MIT"
+  spec.summary       = %q{Vue js CRUD scaffold}
+  spec.description   = %q{Vue js CRUD scaffold}
+  spec.homepage      = "http://www.mynet.com.tw"
+
+  # Prevent pushing this gem to RubyGems.org. To allow pushes either set the 'allowed_push_host'
+  # to allow pushing to a single host or delete this section to allow pushing to any host.
+  # if spec.respond_to?(:metadata)
+  #   spec.metadata['allowed_push_host'] = 'http://mygemserver.com'
+  # else
+  #   raise "RubyGems 2.0 or newer is required to protect against " \
+  #     "public gem pushes."
+  # end
+
+  spec.files         = `git ls-files -z`.split("\x0").reject do |f|
+    f.match(%r{^(test|spec|features)/})
+  end
+  spec.bindir        = "exe"
+  spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
+  spec.require_paths = ["lib"]
+
+  spec.add_development_dependency "bundler", "~> 1.13"
+  spec.add_development_dependency "rake", "~> 10.0"
+  spec.add_development_dependency "minitest", "~> 5.0"
+end

metadata

@@ -0,0 +1,101 @@
+--- !ruby/object:Gem::Specification
+name: vue_crud
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Donald Chiang
+autorequire: 
+bindir: exe
+cert_chain: []
+date: 2016-11-02 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.13'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.13'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+- !ruby/object:Gem::Dependency
+  name: minitest
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+description: Vue js CRUD scaffold
+email:
+- dc@mynet.com.tw
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".gitignore"
+- ".travis.yml"
+- Gemfile
+- README.md
+- Rakefile
+- bin/console
+- bin/setup
+- lib/generators/vue_crud/install_generator.rb
+- lib/generators/vue_crud/templates/vue_crud.html
+- lib/vue_crud.rb
+- lib/vue_crud/engine.rb
+- lib/vue_crud/version.rb
+- vendor/assets/javascripts/vue_crud.js
+- vendor/assets/stylesheets/vue_crud.css
+- vue_crud.gemspec
+homepage: http://www.mynet.com.tw
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.5.1
+signing_key: 
+specification_version: 4
+summary: Vue js CRUD scaffold
+test_files: []