vue_component_builder 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: c25e5c9c087b2a37d88edc55818f27740819ffa52f4c49943af3bab227539419
+  data.tar.gz: 79fa4daf5feea6d09a772fb20639f0da92e1d79f62f91abb110bf947e976f320
+SHA512:
+  metadata.gz: 6def592509fd62b21911bbff2ce47eace0e77ed57cf92e187ab71de594e9693287064bd4a2011bc05bca056c26599ecdcbf8d846f81f571e85e7aa616e9c2202
+  data.tar.gz: 553a4b308adbad2e310a3fadd4f69384c8da9d6a1dcd91591a254565605be155e198c8e0c0eaf6f38f49feffc035944ab8f3c2cbe9581dc74746672c33184a04

data/.gitignore

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

data/.travis.yml

@@ -0,0 +1,7 @@
+---
+sudo: false
+language: ruby
+cache: bundler
+rvm:
+  - 2.6.1
+before_install: gem install bundler -v 1.17.2

data/CODE_OF_CONDUCT.md

@@ -0,0 +1,74 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, gender identity and expression, level of experience,
+nationality, personal appearance, race, religion, or sexual identity and
+orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at TODO: Write your email address. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at [http://contributor-covenant.org/version/1/4][version]
+
+[homepage]: http://contributor-covenant.org
+[version]: http://contributor-covenant.org/version/1/4/

data/Gemfile

@@ -0,0 +1,6 @@
+source "https://rubygems.org"
+
+git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }
+
+# Specify your gem's dependencies in vue_component_builder.gemspec
+gemspec

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2021 TODO: Write your name
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,47 @@
+# Vue Component Builder
+Generate Vue component CRUD from Rails model mapping
+
+### Install
+
+In development section of your **Gemfile** put:
+
+```ruby
+gem 'vue_component_builder'
+```
+
+And run
+
+```shell
+$ bundle install
+```
+
+### Features
+
+ - Generate validate inputs from model validates roles;
+ - Generate Vue methods hook with create, show, update, list and destroy javascript methods with Axios api calls template;
+ - Recognize model attributes types (string, integer, datetime, date, decimal) and generate form fields according to them;
+ - Mapping labels of form component from the i18n model;
+ - Generate table list of in the same screen;
+ - Exclude attributes models option;
+ - Select theme [element-plus](https://element-plus.org/). (is default) 
+
+### Usage
+
+```ruby
+model=Fruit
+component=MyFruitComponent
+theme=element-plus
+exclude=id,created_at,updated_at [optional]
+```
+
+```shell
+$ rails g vue_component:builder model=Fruit  component=MyFruitComponent theme=element-plus exclude=id,created_at,updated_at
+```
+
+### TODO / coming soon
+
+- Implement gem test;
+- More theme options like Vuesax, BootstrapVue, Buefy or  PrimeVue;
+- Output directory option of generated component.
+- Add search option in table;
+- Add filter in table.

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_component_builder"
+
+# 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(__FILE__)

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/builder/template/element-plus/boolean.vue.erb

@@ -0,0 +1,9 @@
+<!-- <%= "#{@field[:name]}" %> -->
+<el-row :gutter='24'>
+  <el-col :span='24'>
+    <el-form-item label='<%= @field[:label] %>' :label-width='formLabelWidth'>
+      <el-switch v-model='this.<%= "#{@options[:model][:name]}.#{@field[:name]}" %>'></el-switch>
+    </el-form-item>
+  </el-col>
+</el-row>
+

data/lib/builder/template/element-plus/datetime.vue.erb

@@ -0,0 +1,9 @@
+<!-- <%= "#{@field[:name]}" %> -->
+<el-row :gutter='24'>
+  <el-col :span='24'>
+    <el-form-item label='<%= @field[:label] %>' :label-width='formLabelWidth'>
+      <el-date-picker v-model='this.<%= "#{@options[:model][:name]}.#{@field[:name]}" %>' type='date'></el-date-picker>
+    </el-form-item>
+  </el-col>
+</el-row>
+

data/lib/builder/template/element-plus/decimal.vue.erb

@@ -0,0 +1,14 @@
+<!-- <%= "#{@field[:name]}" %> -->
+<el-row :gutter='24'>
+  <el-col :span='24'>
+    <el-form-item label='<%= @field[:label] %>' :label-width='formLabelWidth'>
+      <el-input-number
+        v-model='this.<%= "#{@options[:model][:name]}.#{@field[:name]}" %>'
+        :precision="2"
+        :step="0.1"
+        :max="10"
+        autocomplete='off'></el-input-number>
+    </el-form-item>
+  </el-col>
+</el-row>
+

data/lib/builder/template/element-plus/form/boolean.vue.erb

@@ -0,0 +1,8 @@
+<el-row :gutter='24'>
+  <el-col :span='24'>
+    <el-form-item label='<%= @attribute[:label] %>' :label-width='formLabelWidth'>
+      <el-switch
+        v-model='<%= "#{@options[:model][:name]}.#{@attribute[:name]}" %>'></el-switch>
+    </el-form-item>
+  </el-col>
+</el-row>

data/lib/builder/template/element-plus/form/datetime.vue.erb

@@ -0,0 +1,9 @@
+<el-row :gutter='24'>
+  <el-col :span='24'>
+    <el-form-item label='<%= @attribute[:label] %>' :label-width='formLabelWidth'>
+      <el-date-picker format="DD/MM/YYYY"
+                      style="width: 129px"
+                      v-model='<%= "#{@options[:model][:name]}.#{@attribute[:name]}" %>' type='date'></el-date-picker>
+    </el-form-item>
+  </el-col>
+</el-row>

data/lib/builder/template/element-plus/form/decimal.vue.erb

@@ -0,0 +1,7 @@
+<el-row :gutter='24'>
+  <el-col :span='24'>
+    <el-form-item label='<%= @attribute[:label] %>' :label-width='formLabelWidth'>
+      <el-input-number v-model='<%= "#{@options[:model][:name]}.#{@attribute[:name]}" %>' autocomplete='off'></el-input-number>
+    </el-form-item>
+  </el-col>
+</el-row>

data/lib/builder/template/element-plus/form/integer.vue.erb

@@ -0,0 +1,7 @@
+<el-row :gutter='24'>
+  <el-col :span='24'>
+    <el-form-item label='<%= @attribute[:label] %>' :label-width='formLabelWidth'>
+      <el-input-number v-model='<%= "#{@options[:model][:name]}.#{@attribute[:name]}" %>' autocomplete='off'></el-input-number>
+    </el-form-item>
+  </el-col>
+</el-row>

data/lib/builder/template/element-plus/form/string.vue.erb

@@ -0,0 +1,7 @@
+<el-row :gutter='24'>
+  <el-col :span='24'>
+    <el-form-item label='<%= @attribute[:label] %>' :label-width='formLabelWidth'>
+      <el-input v-model='<%= "#{@options[:model][:name]}.#{@attribute[:name]}" %>' autocomplete='off'></el-input>
+    </el-form-item>
+  </el-col>
+</el-row>

data/lib/builder/template/element-plus/integer.vue.erb

@@ -0,0 +1,9 @@
+<!-- <%= "#{@field[:name]}" %> -->
+<el-row :gutter='24'>
+  <el-col :span='24'>
+    <el-form-item label='<%= @field[:label] %>' :label-width='formLabelWidth'>
+      <el-input-number v-model='this.<%= "#{@options[:model][:name]}.#{@field[:name]}" %>' autocomplete='off'></el-input-number>
+    </el-form-item>
+  </el-col>
+</el-row>
+

data/lib/builder/template/element-plus/js/boolean.js.erb

@@ -0,0 +1 @@
+<%=@attribute[:name] %>: false

data/lib/builder/template/element-plus/js/datetime.js.erb

@@ -0,0 +1 @@
+<%=@attribute[:name] %>: ""

data/lib/builder/template/element-plus/js/decimal.js.erb

@@ -0,0 +1 @@
+<%=@attribute[:name] %>: 0.0

data/lib/builder/template/element-plus/js/hooks/data.js.erb

@@ -0,0 +1,13 @@
+data() {
+    return {
+        activeTabName: '<%= @options[:model][:name] %>_tab',
+        formLabelWidth: '120px',
+        
+        <%= @options[:model][:name] %>:
+        {
+            id: null,
+            <%= @attributes %>
+        },
+        <%= @options[:model][:name].pluralize %>:[],
+    }
+}

data/lib/builder/template/element-plus/js/hooks/methods.js.erb

@@ -0,0 +1,5 @@
+methods: {
+    <%=@methods %>,
+    <%=@validateForm %>
+    <%=@resetForm %>
+}

data/lib/builder/template/element-plus/js/hooks/mounted.js.erb

@@ -0,0 +1,3 @@
+mounted() {
+    this.index();
+},

data/lib/builder/template/element-plus/js/integer.js.erb

@@ -0,0 +1 @@
+<%=@attribute[:name] %>: 0

data/lib/builder/template/element-plus/js/methods/create.js.erb

@@ -0,0 +1,15 @@
+async <%=@method_name %>() {
+    this.loading = true;
+    if(this.validateForm()){
+        const payload = this.<%= @options[:model][:name] %>
+        const response = await api.post(`<%= @options[:model][:name].pluralize %>`, payload);
+        this.$notify({
+            title: '<%= @options[:model][:name] %>',
+            message: response.data.message,
+            quadrant: 'success',
+        });
+        this.resetForm();
+        this.index();
+    }
+    this.loading = false;
+},

data/lib/builder/template/element-plus/js/methods/destroy.js.erb

@@ -0,0 +1,7 @@
+async <%=@method_name %>() {
+    this.loading = true;
+    const response = await api.delete(`<%= "#{@options[:model][:name].pluralize}/${this.#{@options[:model][:name]}.id}" %>`,);
+    this.<%= @options[:model][:name].pluralize %> = response.data;
+    this.index();
+    this.loading = false;
+},

data/lib/builder/template/element-plus/js/methods/index.js.erb

@@ -0,0 +1,6 @@
+async <%=@method_name %>() {
+    this.loading = true;
+    const response = await api.get(`<%= @options[:model][:name].pluralize %>`);
+    this.<%= @options[:model][:name].pluralize %> = response.data;
+    this.loading = false;
+},

data/lib/builder/template/element-plus/js/methods/resetForm.js.erb

@@ -0,0 +1,5 @@
+resetForm() {
+    this.<%= @options[:model][:name] %> = {
+        <%= @attributes %>
+    }
+}

data/lib/builder/template/element-plus/js/methods/show.js.erb

@@ -0,0 +1,6 @@
+async <%=@method_name %>(id) {
+    this.loading = true;
+    const response = await api.get(`<%= @options[:model][:name].pluralize %>/${id}`);
+    this.<%= @options[:model][:name] %> = response.data;
+    this.loading = false;
+},

data/lib/builder/template/element-plus/js/methods/update.js.erb

@@ -0,0 +1,15 @@
+async update() {
+    if(this.validateForm()){
+        const payload = this.<%= @options[:model][:name] %>
+            const response = await api.put(
+            `<%= "#{@options[:model][:name].pluralize}/${this.#{@options[:model][:name]}.id}" %>`,
+            payload
+        );
+        this.$notify({
+            title: '<%= @options[:model][:name].capitalize %>',
+            message: response.data.message,
+            quadrant: 'success',
+        });
+        this.index();
+    }
+}

data/lib/builder/template/element-plus/js/methods/validate.js.erb

@@ -0,0 +1,4 @@
+validateForm() {
+    <%= @rules %>
+    return true
+},

data/lib/builder/template/element-plus/js/methods/validate_rules.js.erb

@@ -0,0 +1,8 @@
+if (this.<%= @options[:model][:name] %>.<%= @attribute[:name] %> === null) {
+    this.$notify({
+        title: 'Atenção',
+        message: 'O campo <%= @attribute[:label] %> deve ser preenchido',
+        type: 'warning'
+    }, {root: true})
+    return false
+}

data/lib/builder/template/element-plus/js/string.js.erb

@@ -0,0 +1 @@
+<%=@attribute[:name] %>: ""

data/lib/builder/template/element-plus/main.vue.erb

@@ -0,0 +1,62 @@
+<template>
+  <div style='width: 100%'>
+    <el-main>
+      <el-row :gutter='24'>
+        <el-col :span='4'>
+          <Settingsmenu/>
+        </el-col>
+        <el-col :span='13'>
+          <el-tabs v-model='this.activeTabName' type='border-card'>
+            <el-tab-pane name='<%= @options[:model][:name] %>_tab'>
+
+              <template #label>
+                <span><i class='el-icon-check'></i> <%= @options[:model][:name].capitalize %></span>
+              </template>
+
+              <el-form :model='<%= @options[:model][:name] %>'>
+
+                <%= @form_attributes %>
+
+                <el-button-group>
+                  <el-button v-if='this.<%= @options[:model][:name] %>.id' @click='this.update()' plain type='primary'>Atualizar</el-button>
+                  <el-button v-else @click='this.create()' plain type='success'>Salvar</el-button>
+                  <el-popconfirm
+                    v-if='this.<%= @options[:model][:name] %>.id'
+                    confirm-button-text='Sim'
+                    cancel-button-text='Não'
+                    icon='el-icon-info'
+                    icon-color='orange'
+                    title='Deseja realmente excluir este registro?'
+                    @confirm='this.destroy()'
+                  >
+                    <template #reference>
+                      <el-button type='danger'>Excluir</el-button>
+                    </template>
+                  </el-popconfirm>
+                  <el-button @click='this.resetForm()' plain type='info'>Novo</el-button>
+                </el-button-group>
+              </el-form>
+              <br>
+              <el-divider></el-divider>
+              <br>
+              <%= @table %>
+            </el-tab-pane>
+          </el-tabs>
+        </el-col>
+      </el-row>
+    </el-main>
+  </div>
+</template>
+
+<style>
+  .showRecord {
+    cursor: pointer;
+    color: rgb(64, 158, 255);
+    display: block;
+    padding: 5px;
+  }
+</style>
+
+<script>
+    <%= @script %>
+</script>

data/lib/builder/template/element-plus/script.js.erb

@@ -0,0 +1,11 @@
+import {api} from '../../api/index';
+import Settingsmenu from './Settingsmenu';
+
+export default {
+    components: {
+        Settingsmenu,
+    },
+    <%= "#{@data_hook}," %>
+    <%= "#{@mounted_hook}" %>
+    <%= "#{@methods_hook}" %>
+};

data/lib/builder/template/element-plus/string.vue.erb

@@ -0,0 +1,9 @@
+<!-- <%= "#{@field[:name]}" %> -->
+<el-row :gutter='24'>
+  <el-col :span='24'>
+    <el-form-item label='<%= @field[:label] %>' :label-width='formLabelWidth'>
+      <el-input v-model='this.<%= "#{@options[:model][:name]}.#{@field[:name]}" %>' :step='1'></el-input>
+    </el-form-item>
+  </el-col>
+</el-row>
+

data/lib/builder/template/element-plus/table/boolean.vue.erb

@@ -0,0 +1,9 @@
+<el-table-column
+  prop='<%= @attribute[:name] %>'
+  label='<%= @attribute[:label] %>'
+  width='110px'>
+  <template #default='<%= @options[:model][:name] %>'>
+    <el-tag v-if='<%= "#{@options[:model][:name]}.row.#{@attribute[:name]}" %>' type='success'>Sim</el-tag>
+    <el-tag v-else type='danger'>Não</el-tag>
+  </template>
+</el-table-column>

data/lib/builder/template/element-plus/table/datetime.vue.erb

@@ -0,0 +1,10 @@
+<el-table-column
+  prop='<%= @attribute[:name] %>'
+  label='<%= @attribute[:label] %>'
+  width='auto'>
+  <template #default='<%= @options[:model][:name] %>'>
+                        <span class='showRecord' @click='show(<%= @options[:model][:name] %>.row.id)'>
+                          {{ <%= "#{@options[:model][:name]}.row.#{@attribute[:name]}" %> }}
+                        </span>
+  </template>
+</el-table-column>

data/lib/builder/template/element-plus/table/decimal.vue.erb

@@ -0,0 +1,10 @@
+<el-table-column
+  prop='<%= @attribute[:name] %>'
+  label='<%= @attribute[:label] %>'
+  width='auto'>
+  <template #default='<%= @options[:model][:name] %>'>
+                        <span class='showRecord' @click='show(<%= @options[:model][:name] %>.row.id)'>
+                          {{ <%= "#{@options[:model][:name]}.row.#{@attribute[:name]}" %> }}
+                        </span>
+  </template>
+</el-table-column>

data/lib/builder/template/element-plus/table/integer.vue.erb

@@ -0,0 +1,10 @@
+<el-table-column
+  prop='<%= @attribute[:name] %>'
+  label='<%= @attribute[:label] %>'
+  width='auto'>
+  <template #default='<%= @options[:model][:name] %>'>
+                        <span class='showRecord' @click='show(<%= @options[:model][:name] %>.row.id)'>
+                          {{ <%= "#{@options[:model][:name]}.row.#{@attribute[:name]}" %> }}
+                        </span>
+  </template>
+</el-table-column>

data/lib/builder/template/element-plus/table/string.vue.erb

@@ -0,0 +1,10 @@
+<el-table-column
+  prop='<%= @attribute[:name] %>'
+  label='<%= @attribute[:label] %>'
+  width='auto'>
+  <template #default='<%= @options[:model][:name] %>'>
+                        <span class='showRecord' @click='show(<%= @options[:model][:name] %>.row.id)'>
+                          {{ <%= "#{@options[:model][:name]}.row.#{@attribute[:name]}" %> }}
+                        </span>
+  </template>
+</el-table-column>

data/lib/builder/template/element-plus/table/table-component.vue.erb

@@ -0,0 +1,11 @@
+<el-row :gutter='24'>
+  <el-col :span='24'>
+    <el-scrollbar height='350px'>
+      <el-table
+        :data='<%= @options[:model][:name].pluralize %>'
+        style='width: 100%'>
+        <%= @columns %>
+      </el-table>
+    </el-scrollbar>
+  </el-col>
+</el-row>

data/lib/vue_component_builder/version.rb

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

data/lib/vue_component_builder.rb

@@ -0,0 +1,229 @@
+require "vue_component_builder/version"
+require 'rails/generators/base'
+require 'fileutils'
+
+module VueComponentBuilder
+  module Generators
+    class NewGenerator < Rails::Generators::Base
+
+      def execute
+        p 'Building Vue component...'
+
+        if ARGV.empty?
+          raise StandardError, <<-ERROR.strip_heredoc
+
+          Be sure to have informed the params needed:
+            e.g
+              model=Fruit
+              component=MyFruitComponent
+              theme=element-plus
+              exclude=id,created_at,updated_at [optional]
+
+            rails g vue_component_builder:new model=Fruit  component=MyFruitComponent theme=element-plus exclude=id,created_at,updated_at
+          ERROR
+        end
+
+        input = {}
+        ARGV.to_a.each do |arg|
+          command = arg.split('=')
+          input[command[0].to_sym] = command[1]
+        end
+
+        input[:exclude] = input[:exclude].try(:split, ',')
+
+        @options = {
+          component: input[:component],
+          theme: input[:theme],
+          model: {
+            name: input[:model].downcase.to_s,
+            attributes: [],
+            exclude: input[:exclude],
+            class: eval(input[:model].capitalize.to_s)
+          },
+          controller: {
+            name: "#{input[:model].to_s.pluralize}Controller",
+            methods: []
+          },
+        }
+
+        @options[:controller].merge!(methods: eval("Api::V1::#{@options[:controller][:name]}").instance_methods(false).map { |m| m.to_s })
+        attributes = @options[:model][:class].columns_hash.map do |k, v|
+          label = I18n.t("activerecord.attributes.#{@options[:model][:name]}.#{k}", default: k.upcase)
+          unless @options[:model][:exclude].nil?
+            { name: k, type: v.type.to_s, label: label } if !@options[:model][:exclude].include? k
+          else
+            { name: k, type: v.type.to_s, label: label }
+          end
+        end
+        @options[:model].merge!(attributes: attributes.compact)
+        self.build
+      end
+
+      protected
+
+      def build
+        # output_dir = "#{__dir__}/builder/output/#{@options[:component].to_s}.vue"
+        output_dir = "#{Rails.root}/public/#{@options[:component].to_s}.vue"
+        @form_attributes = generate_form_attribute
+
+        # Read tempalte
+        @data_hook = data_hook
+        @mounted_hook = mounted_hook
+        @methods_hook = methods_hook
+        @table = generate_table
+        @script = readTemplate('script.js.erb')
+        template = readTemplate('main.vue.erb')
+
+        # Output
+        File.open(output_dir, 'w') { |file| file.write(template) }
+        p "The component 'public/#{@options[:component].to_s}.vue' was builded successfully"
+      end
+
+      def generate_form_attribute
+        response = ''
+        @options[:model][:attributes].each do |attribute|
+          inputTemplate = case attribute[:type]
+                          when 'integer'
+                            'integer'
+                          when 'string'
+                            'string'
+                          when 'boolean'
+                            'boolean'
+                          when 'datetime'
+                          when 'date'
+                            'datetime'
+                          else
+                            'string'
+                          end
+
+          @attribute = attribute
+          response += readTemplate("/form/#{inputTemplate}.vue.erb")
+        end
+        response
+      end
+
+      def generate_validateForm
+        presence_validated_attributes = @options[:model][:class].validators.map do |validator|
+          validator.attributes if validator.is_a?(ActiveRecord::Validations::PresenceValidator)
+        end.compact.flatten
+
+        @rules = ""
+        presence_validated_attributes.each do |attribute|
+          @attribute = @options[:model][:attributes].select { |attr| attr[:name] == attribute.to_s }[0]
+          @rules += readTemplate("js/methods/validate_rules.js.erb")
+        end
+        @rules
+        readTemplate("js/methods/validate.js.erb")
+      end
+
+      def generate_reset_form
+        @attributes = ""
+        @options[:model][:attributes].each do |attribute|
+          @attributes += "#{attribute[:name]}: #{attribute[:type] == 'boolean' ? 'false' : 'null'},"
+        end
+        readTemplate("js/methods/resetForm.js.erb")
+      end
+
+      def readTemplate templateName
+        template_dir = "#{__dir__}/builder/template/#{@options[:theme]}"
+        template = ERB.new File.read("#{template_dir}/#{templateName}"), nil, '%'
+        template.result(binding)
+      end
+
+      def data_hook
+        attributes = ''
+        @options[:model][:attributes].each do |attribute|
+          unless attribute[:name] == 'id'
+            @attribute = attribute
+            inputTemplate = case attribute[:type]
+                            when 'integer'
+                              'integer'
+                            when 'string'
+                              'string'
+                            when 'boolean'
+                              'boolean'
+                            when 'datetime'
+                            when 'date'
+                              'datetime'
+                            else
+                              'string'
+                            end
+
+            attributes += readTemplate("js/#{inputTemplate}.js.erb")
+            attributes += ",\n"
+          end
+        end
+        @attributes = attributes.chop
+        response = readTemplate('js/hooks/data.js.erb')
+        response
+      end
+
+      def mounted_hook
+        readTemplate('js/hooks/mounted.js.erb')
+      end
+
+      def methods_hook
+        # content = "#{self.resetForm}"
+        @methods = ""
+        @options[:controller][:methods].each do |method|
+          method_name = method.to_s
+          @method_name = method_name
+          @methods += eval("generate_call_#{method_name}")
+        end
+
+        @validateForm = generate_validateForm
+        @resetForm = generate_reset_form
+
+        response = readTemplate('js/hooks/methods.js.erb')
+        response
+      end
+
+      def generate_call_index
+        readTemplate('js/methods/index.js.erb')
+      end
+
+      def generate_call_show
+        readTemplate('js/methods/show.js.erb')
+      end
+
+      def generate_call_create
+        readTemplate('js/methods/create.js.erb')
+      end
+
+      def generate_call_destroy
+        readTemplate('js/methods/destroy.js.erb')
+      end
+
+      def generate_call_update
+        readTemplate('js/methods/update.js.erb')
+      end
+
+      def generate_call_edit
+        ""
+      end
+
+      def generate_table
+        @columns = generate_table_column
+        readTemplate('/table/table-component.vue.erb')
+      end
+
+      def generate_table_column
+        content = ""
+        @options[:model][:attributes].each do |attribute|
+          content += generate_column_by_type attribute
+        end
+        content
+      end
+
+      def generate_column_by_type attribute
+        @attribute = attribute
+        case attribute[:type]
+        when 'boolean'
+          readTemplate('/table/boolean.vue.erb')
+        else
+          readTemplate('/table/string.vue.erb')
+        end
+      end
+    end
+  end
+end

data/vue_component_builder.gemspec

@@ -0,0 +1,40 @@
+
+lib = File.expand_path("../lib", __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require "vue_component_builder/version"
+
+Gem::Specification.new do |spec|
+  spec.name          = "vue_component_builder"
+  spec.version       = VueComponentBuilder::VERSION
+  spec.authors       = ["Yonatha Almeida"]
+  spec.email         = ["yonathalmeida@gmail.com"]
+
+  spec.summary       = %q{Generate Vue component CRUD from Rails model mapping}
+  spec.description   = %q{Wrapper vue component}
+  spec.homepage      = "https://github.com/Yonatha/vue_component_builder"
+  spec.license       = "MIT"
+
+  # 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["homepage_uri"] = spec.homepage
+    spec.metadata["source_code_uri"] = "https://github.com/Yonatha/vue_component_builder"
+    spec.metadata["changelog_uri"] = "https://github.com/Yonatha/vue_component_builder"
+  else
+    raise "RubyGems 2.0 or newer is required to protect against " \
+      "public gem pushes."
+  end
+
+  # Specify which files should be added to the gem when it is released.
+  # The `git ls-files -z` loads the files in the RubyGem that have been added into git.
+  spec.files         = Dir.chdir(File.expand_path('..', __FILE__)) do
+    `git ls-files -z`.split("\x0").reject { |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.17"
+  spec.add_development_dependency "rake", "~> 10.0"
+  spec.add_development_dependency "minitest", "~> 5.0"
+end

metadata

@@ -0,0 +1,134 @@
+--- !ruby/object:Gem::Specification
+name: vue_component_builder
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Yonatha Almeida
+autorequire: 
+bindir: exe
+cert_chain: []
+date: 2021-10-06 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.17'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.17'
+- !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: Wrapper vue component
+email:
+- yonathalmeida@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".gitignore"
+- ".travis.yml"
+- CODE_OF_CONDUCT.md
+- Gemfile
+- LICENSE.txt
+- README.md
+- Rakefile
+- bin/console
+- bin/setup
+- lib/builder/template/element-plus/boolean.vue.erb
+- lib/builder/template/element-plus/datetime.vue.erb
+- lib/builder/template/element-plus/decimal.vue.erb
+- lib/builder/template/element-plus/form/boolean.vue.erb
+- lib/builder/template/element-plus/form/datetime.vue.erb
+- lib/builder/template/element-plus/form/decimal.vue.erb
+- lib/builder/template/element-plus/form/integer.vue.erb
+- lib/builder/template/element-plus/form/string.vue.erb
+- lib/builder/template/element-plus/integer.vue.erb
+- lib/builder/template/element-plus/js/boolean.js.erb
+- lib/builder/template/element-plus/js/datetime.js.erb
+- lib/builder/template/element-plus/js/decimal.js.erb
+- lib/builder/template/element-plus/js/hooks/data.js.erb
+- lib/builder/template/element-plus/js/hooks/methods.js.erb
+- lib/builder/template/element-plus/js/hooks/mounted.js.erb
+- lib/builder/template/element-plus/js/integer.js.erb
+- lib/builder/template/element-plus/js/methods/create.js.erb
+- lib/builder/template/element-plus/js/methods/destroy.js.erb
+- lib/builder/template/element-plus/js/methods/index.js.erb
+- lib/builder/template/element-plus/js/methods/resetForm.js.erb
+- lib/builder/template/element-plus/js/methods/show.js.erb
+- lib/builder/template/element-plus/js/methods/update.js.erb
+- lib/builder/template/element-plus/js/methods/validate.js.erb
+- lib/builder/template/element-plus/js/methods/validate_rules.js.erb
+- lib/builder/template/element-plus/js/string.js.erb
+- lib/builder/template/element-plus/main.vue.erb
+- lib/builder/template/element-plus/script.js.erb
+- lib/builder/template/element-plus/string.vue.erb
+- lib/builder/template/element-plus/table/boolean.vue.erb
+- lib/builder/template/element-plus/table/datetime.vue.erb
+- lib/builder/template/element-plus/table/decimal.vue.erb
+- lib/builder/template/element-plus/table/integer.vue.erb
+- lib/builder/template/element-plus/table/string.vue.erb
+- lib/builder/template/element-plus/table/table-component.vue.erb
+- lib/vue_component_builder.rb
+- lib/vue_component_builder/version.rb
+- vue_component_builder.gemspec
+homepage: https://github.com/Yonatha/vue_component_builder
+licenses:
+- MIT
+metadata:
+  homepage_uri: https://github.com/Yonatha/vue_component_builder
+  source_code_uri: https://github.com/Yonatha/vue_component_builder
+  changelog_uri: https://github.com/Yonatha/vue_component_builder
+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: []
+rubygems_version: 3.0.1
+signing_key: 
+specification_version: 4
+summary: Generate Vue component CRUD from Rails model mapping
+test_files: []