vue_component_builder 0.1.1 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6520cb101838c2379af8c3b3dfb958a443bbb3423719d48d3a5fdb2daaf065fc
-  data.tar.gz: f63d561a92cc892719da4348cbbc6820fe5f09432926c52107911e5d5a3c9051
+  metadata.gz: 2c2d2c3ae4082e3535616040172eca097e4e2becdb87b25e066dedd8e44323d4
+  data.tar.gz: d2d949fec4849dfb38b10e8e446a9d2d56ed6d87bc09af4bafbc2107e86017ac
 SHA512:
-  metadata.gz: cd13245bc12a763a8b259f7f547cd08f39dc23c5033258113be4b7f2c0d4ee512418870cc751f804d027f2348032f35d4902b474b96404541702cb437781d8f1
-  data.tar.gz: bdf646a8fbf56a40ff4a2cc86739b42a4bcbff1a488c9b52b36c21ab04730e7e6ad9918304e906f9a35c0c7fee0495221da31036709fa3fd6dfac668abfdb02e
+  metadata.gz: 78b3b399ffa11bb94d1d7a0a9b67cf17c40cc3a0e1416a2ddae8359f784c22a6f1ebf8bb84e8866b71bc3b422c448a31c165779f843dc607d1f9e4e1455d005c
+  data.tar.gz: 8c70a5b66e01fd7baf95c8eccb4c39e1989ba755b17e95e4e8e94004a9e768c944b6b519567fc6f9f753b5579eae2146154f62a4f0161f3b71bc9e3b994d9292

data/README.md

@@ -1,6 +1,21 @@
 # Vue Component Builder
 Generate Vue component CRUD from Rails model mapping
 
+### Preview
+
+Default theme
+
+![](./scheenshot/default.png)
+
+Element-plus theme
+
+![](./scheenshot/element-plus.png)
+
+
+### Compatibility
+
+vue 3.x to element-plus theme
+
 ### Install
 
 In development section of your **Gemfile** put:
@@ -30,18 +45,19 @@ $ bundle install
 ```ruby
 model=Fruit
 component=MyFruitComponent
-theme=element-plus
+theme=default [default or element-plus]
 exclude=id,created_at,updated_at [optional]
 ```
 
 ```shell
-$ rails g vue_component_builder:new model=Fruit  component=MyFruitComponent theme=element-plus exclude=id,created_at,updated_at
+$ rails g vue_component_builder:new model=Fruit  component=MyFruitComponent theme=default exclude=id,created_at,updated_at
 ```
 
 The new component will be generated inside in your Rails public folder 
 ```shell
 public/MyFruitComponent.vue
 ```
+Then you can copy this component to your Vue application folder.
 
 ### TODO / coming soon
 

data/lib/builder/template/default/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/default/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/default/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/default/form/boolean.vue.erb

@@ -0,0 +1,6 @@
+<div>
+  <%= @attribute[:label] %>:
+  <input
+    v-model='<%= "#{@options[:model][:name]}.#{@attribute[:name]}" %>'
+    type="checkbox" name="<%= @attribute[:name] %>" :checked="<%= @attribute[:name] %>">
+</div>

data/lib/builder/template/default/form/datetime.vue.erb

@@ -0,0 +1,4 @@
+<div>
+  <%= @attribute[:label] %>:
+  <input v-model='<%= "#{@options[:model][:name]}.#{@attribute[:name]}" %>' type='date'>
+</div>

data/lib/builder/template/default/form/decimal.vue.erb

@@ -0,0 +1,4 @@
+<div>
+  <%= @attribute[:label] %>:
+  <input v-model='<%= "#{@options[:model][:name]}.#{@attribute[:name]}" %>' autocomplete='off'>
+</div>

data/lib/builder/template/default/form/integer.vue.erb

@@ -0,0 +1,7 @@
+<div>
+  <%= @attribute[:label] %>:
+  <input v-model='<%= "#{@options[:model][:name]}.#{@attribute[:name]}" %>'
+         type="number"
+         min="0" max="100"
+         autocomplete='off'>
+</div>

data/lib/builder/template/default/form/string.vue.erb

@@ -0,0 +1,4 @@
+<div>
+  <%= @attribute[:label] %>:
+  <input v-model='<%= "#{@options[:model][:name]}.#{@attribute[:name]}" %>' autocomplete='off'>
+</div>

data/lib/builder/template/default/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/default/js/boolean.js.erb

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

data/lib/builder/template/default/js/datetime.js.erb

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

data/lib/builder/template/default/js/decimal.js.erb

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

data/lib/builder/template/default/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/default/js/hooks/methods.js.erb

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

data/lib/builder/template/default/js/hooks/mounted.js.erb

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

data/lib/builder/template/default/js/integer.js.erb

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

data/lib/builder/template/default/js/methods/create.js.erb

@@ -0,0 +1,9 @@
+async <%=@method_name %>() {
+    if(this.validateForm()){
+        const payload = this.<%= @options[:model][:name] %>
+        const response = await api.post(`<%= @options[:model][:name].pluralize %>`, payload);
+        alert(response.data.message)
+        this.resetForm();
+        this.index();
+    }
+},

data/lib/builder/template/default/js/methods/destroy.js.erb

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

data/lib/builder/template/default/js/methods/index.js.erb

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

data/lib/builder/template/default/js/methods/resetForm.js.erb

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

data/lib/builder/template/default/js/methods/show.js.erb

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

data/lib/builder/template/default/js/methods/update.js.erb

@@ -0,0 +1,11 @@
+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
+        );
+        alert(response.data.message)
+        this.index();
+    }
+}

data/lib/builder/template/default/js/methods/validate.js.erb

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

data/lib/builder/template/default/js/methods/validate_rules.js.erb

@@ -0,0 +1,4 @@
+if (this.<%= @options[:model][:name] %>.<%= @attribute[:name] %> === null) {
+    alert('O campo <%= @attribute[:label] %> deve ser preenchido')
+    return false
+}

data/lib/builder/template/default/js/string.js.erb

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

data/lib/builder/template/default/main.vue.erb

@@ -0,0 +1,30 @@
+<template>
+  <div style="padding: 20px">
+    <h3><%= @options[:model][:name].capitalize %></h3>
+    <form>
+      <%= @form_attributes %>
+      <button-group>
+        <button v-if='this.<%= @options[:model][:name] %>.id' @click='this.update()' type='button'>Update</button>
+        <button v-else @click='this.create()' type='button'>Save</button>
+        <button @click="this.destroy()" type='button'>Delete</button>
+        <button @click='this.resetForm()' type='button'>New</button>
+      </button-group>
+    </form>
+
+    <%= @table %>
+
+  </div>
+</template>
+
+<style>
+    table span {
+        cursor: pointer;
+        color: rgb(64, 158, 255);
+        display: block;
+        padding: 5px;
+    }
+</style>
+
+<script>
+    <%= @script %>
+</script>

data/lib/builder/template/default/script.js.erb

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

data/lib/builder/template/default/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/default/table/boolean.vue.erb

@@ -0,0 +1,4 @@
+<td>
+  <span v-if='<%= "item.#{@attribute[:name]}" %>' type='success'>Yes</span>
+  <span v-else type='danger'>No</span>
+</td>

data/lib/builder/template/default/table/datetime.vue.erb

@@ -0,0 +1,5 @@
+<td>
+  <span @click='show(item.id)'>
+    {{ <%= "item.#{@attribute[:name]}" %> }}
+  </span>
+</td>

data/lib/builder/template/default/table/decimal.vue.erb

@@ -0,0 +1,5 @@
+<td>
+  <span @click='show(item.id)'>
+    {{ <%= "item.#{@attribute[:name]}" %> }}
+  </span>
+</td>

data/lib/builder/template/default/table/integer.vue.erb

@@ -0,0 +1,5 @@
+<td>
+  <span @click='show(item.id)'>
+    {{ <%= "item.#{@attribute[:name]}" %> }}
+  </span>
+</td>

data/lib/builder/template/default/table/string.vue.erb

@@ -0,0 +1,5 @@
+<td>
+  <span @click='show(item.id)'>
+    {{ <%= "item.#{@attribute[:name]}" %> }}
+  </span>
+</td>

data/lib/builder/template/default/table/table-component.vue.erb

@@ -0,0 +1,9 @@
+<div>
+  <table>
+    <tbody>
+    <tr v-for="(item,i) in <%= @options[:model][:name].pluralize %>" :key="i">
+      <%= @columns %>
+    </tr>
+    </tbody>
+  </table>
+</div>

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

@@ -1,11 +1,8 @@
 <template>
-  <div style='width: 100%'>
+  <div style="width: 100%;">
     <el-main>
       <el-row :gutter='24'>
-        <el-col :span='4'>
-          ...
-        </el-col>
-        <el-col :span='24'>
+        <el-col :span='13'>
           <el-tabs v-model='this.activeTabName' type='border-card'>
             <el-tab-pane name='<%= @options[:model][:name] %>_tab'>
 
@@ -18,22 +15,22 @@
                 <%= @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-button v-if='this.<%= @options[:model][:name] %>.id' @click='this.update()' plain type='primary'>Update</el-button>
+                  <el-button v-else @click='this.create()' plain type='success'>Save</el-button>
                   <el-popconfirm
                     v-if='this.<%= @options[:model][:name] %>.id'
-                    confirm-button-text='Sim'
-                    cancel-button-text='Não'
+                    confirm-button-text='Yes'
+                    cancel-button-text='No'
                     icon='el-icon-info'
                     icon-color='orange'
-                    title='Deseja realmente excluir este registro?'
+                    title='Are you sure delete this item?'
                     @confirm='this.destroy()'
                   >
                     <template #reference>
-                      <el-button type='danger'>Excluir</el-button>
+                      <el-button type='danger'>Delete</el-button>
                     </template>
                   </el-popconfirm>
-                  <el-button @click='this.resetForm()' plain type='info'>Novo</el-button>
+                  <el-button @click='this.resetForm()' plain type='info'>New</el-button>
                 </el-button-group>
               </el-form>
               <br>

data/lib/vue_component_builder/version.rb

@@ -1,3 +1,3 @@
 module VueComponentBuilder
-  VERSION = "0.1.1"
+  VERSION = "0.1.2"
 end

data/lib/vue_component_builder.rb

@@ -1,5 +1,5 @@
 require "vue_component_builder/version"
-require 'rails/generators/base'
+require 'rails/generators'
 require 'fileutils'
 
 module VueComponentBuilder
@@ -14,12 +14,12 @@ module VueComponentBuilder
 
           Be sure to have informed the params needed:
             e.g
-              model=Fruit
-              component=MyFruitComponent
-              theme=element-plus
-              exclude=id,created_at,updated_at [optional]
+                model=Fruit
+                component=MyFruitComponent
+                theme=default [default or 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
+            rails g vue_component_builder:new model=Fruit  component=MyFruitComponent theme=default exclude=id,created_at,updated_at
           ERROR
         end
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: vue_component_builder
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.1.2
 platform: ruby
 authors:
 - Yonatha Almeida
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2021-10-07 00:00:00.000000000 Z
+date: 2021-10-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -68,6 +68,40 @@ files:
 - Rakefile
 - bin/console
 - bin/setup
+- lib/builder/template/default/boolean.vue.erb
+- lib/builder/template/default/datetime.vue.erb
+- lib/builder/template/default/decimal.vue.erb
+- lib/builder/template/default/form/boolean.vue.erb
+- lib/builder/template/default/form/datetime.vue.erb
+- lib/builder/template/default/form/decimal.vue.erb
+- lib/builder/template/default/form/integer.vue.erb
+- lib/builder/template/default/form/string.vue.erb
+- lib/builder/template/default/integer.vue.erb
+- lib/builder/template/default/js/boolean.js.erb
+- lib/builder/template/default/js/datetime.js.erb
+- lib/builder/template/default/js/decimal.js.erb
+- lib/builder/template/default/js/hooks/data.js.erb
+- lib/builder/template/default/js/hooks/methods.js.erb
+- lib/builder/template/default/js/hooks/mounted.js.erb
+- lib/builder/template/default/js/integer.js.erb
+- lib/builder/template/default/js/methods/create.js.erb
+- lib/builder/template/default/js/methods/destroy.js.erb
+- lib/builder/template/default/js/methods/index.js.erb
+- lib/builder/template/default/js/methods/resetForm.js.erb
+- lib/builder/template/default/js/methods/show.js.erb
+- lib/builder/template/default/js/methods/update.js.erb
+- lib/builder/template/default/js/methods/validate.js.erb
+- lib/builder/template/default/js/methods/validate_rules.js.erb
+- lib/builder/template/default/js/string.js.erb
+- lib/builder/template/default/main.vue.erb
+- lib/builder/template/default/script.js.erb
+- lib/builder/template/default/string.vue.erb
+- lib/builder/template/default/table/boolean.vue.erb
+- lib/builder/template/default/table/datetime.vue.erb
+- lib/builder/template/default/table/decimal.vue.erb
+- lib/builder/template/default/table/integer.vue.erb
+- lib/builder/template/default/table/string.vue.erb
+- lib/builder/template/default/table/table-component.vue.erb
 - lib/builder/template/element-plus/boolean.vue.erb
 - lib/builder/template/element-plus/datetime.vue.erb
 - lib/builder/template/element-plus/decimal.vue.erb