matestack-ui-core 0.6.0

data/app/concepts/form/cell/submit.rb

@@ -0,0 +1,9 @@
+module Form::Cell
+  class Submit < Component::Cell::Static
+
+    def setup
+      @tag_attributes.merge!({ "@click.prevent": "perform" })
+    end
+
+  end
+end

data/app/concepts/form/js/form.js

@@ -0,0 +1,136 @@
+import Vue from 'vue/dist/vue.esm'
+import Vuex from 'vuex'
+import axios from 'axios'
+
+import matestackEventHub from 'core/js/event-hub'
+
+import componentMixin from 'component/js/component'
+
+const componentDef = {
+  mixins: [componentMixin],
+  data: function(){
+    return {
+      data: {},
+      showInlineForm: false,
+      errors: {}
+    }
+  },
+  methods: {
+    initDataKey: function(key, initValue){
+      this.data[key] = initValue;
+    },
+    inputChanged: function(key){
+      this.resetErrors(key)
+    },
+    updateFormValue: function(key, value){
+      this.data[key] = value;
+    },
+    resetErrors: function(key){
+      if (this.errors[key]){
+        this.errors[key] = null;
+      }
+    },
+    launchInlineForm: function(key, value){
+      this.showInlineForm = true;
+      this.data[key] = value;
+      const self = this;
+      setTimeout(function () {
+        self.$refs.inlineinput.focus();
+      }, 300);
+    },
+    closeInlineForm: function(){
+      this.showInlineForm = false;
+    },
+    setProps: function(flat, newVal){
+       for(var i in flat){
+         if((typeof flat[i] === "object") && !(flat[i] instanceof Array)){
+           setProps(flat[i], newVal);
+           return;
+         } else {
+           flat[i] = newVal;
+         }
+      }
+    },
+    initValues: function(){
+      let self = this;
+      let data = {}
+      for (let key in self.$refs) {
+        let initValue = self.$refs[key]["attributes"]["init-value"]
+        let valueType = self.$refs[key]["attributes"]["value-type"]
+
+        if (key.startsWith("input.")){
+          if(initValue){
+            data[key.replace('input.', '')] = initValue["value"]
+          }else{
+            data[key.replace('input.', '')] = null
+          }
+        }
+        if (key.startsWith("select.")){
+          if (key.startsWith("select.multiple.")){
+            if(initValue){
+              data[key.replace('select.multiple.', '')] = JSON.parse(initValue["value"])
+            }else{
+              data[key.replace('select.multiple.', '')] = []
+            }
+          }else{
+            if(initValue){
+              if(valueType && valueType["value"] == "Integer")
+                data[key.replace('select.', '')] = parseInt(initValue["value"])
+              else{
+                data[key.replace('select.', '')] = initValue["value"]
+              }
+            }else{
+              data[key.replace('select.', '')] = null
+            }
+          }
+
+        }
+      }
+      self.data = data;
+    },
+    perform: function(){
+      const self = this
+      let payload = {}
+      payload[self.componentConfig["for"]] = self.data
+      axios({
+        method: self.componentConfig["method"],
+        url: self.componentConfig["submit_path"],
+        data: payload,
+        headers: {
+          'X-CSRF-Token': document.getElementsByName("csrf-token")[0].getAttribute('content')
+        }
+      })
+      .then(function(response){
+        if (self.componentConfig["success"] != undefined && self.componentConfig["success"]["emit"] != undefined) {
+          matestackEventHub.$emit(self.componentConfig["success"]["emit"], response.data);
+        }
+        if (self.componentConfig["success"] != undefined && self.componentConfig["success"]["transition"] != undefined && self.$store != undefined) {
+          let path = self.componentConfig["success"]["transition"]["path"]
+          self.$store.dispatch('navigateTo', {url: path, backwards: false})
+        }
+        self.setProps(self.data, null);
+        self.initValues()
+        self.showInlineForm = false;
+      })
+      .catch(function(error){
+        if(error.response && error.response.data && error.response.data.errors){
+          self.errors = error.response.data.errors;
+        }
+        if (self.componentConfig["failure"] != undefined && self.componentConfig["failure"]["emit"] != undefined) {
+          matestackEventHub.$emit(self.componentConfig["failure"]["emit"], error.response.data);
+        }
+        if (self.componentConfig["failure"] != undefined && self.componentConfig["failure"]["transition"] != undefined && self.$store != undefined) {
+          let path = self.componentConfig["failure"]["transition"]["path"]
+          self.$store.dispatch('navigateTo', {url: path, backwards: false})
+        }
+      })
+    }
+  },
+  mounted: function(){
+    this.initValues()
+  }
+}
+
+let component = Vue.component('form-cell', componentDef)
+
+export default componentDef

data/app/concepts/form/view/form.haml

@@ -0,0 +1,2 @@
+%form{@tag_attributes}
+  = yield

data/app/concepts/form/view/inline.haml

@@ -0,0 +1,6 @@
+%div{"v-if": "!showInlineForm", "@click": "launchInlineForm(\"#{options[:key]}\", \"#{options[:value]}\")"}
+  = options[:value]
+%div{"v-if": "showInlineForm"}
+  %input{"ref": "inlineinput", "v-model": input_key, "@blur": "perform", "@keyup.esc": "closeInlineForm", class: options[:class], id: component_id}
+    - if block_given?
+      = yield

data/app/concepts/form/view/input.haml

@@ -0,0 +1,29 @@
+- if options[:label]
+  %label=options[:label]
+
+- if [:text, :number, :email, :date, :password].include?(options[:type])
+  %input{"v-model#{'.number' if options[:type] == :number}": input_key,
+    type: options[:type],
+    class: options[:class],
+    id: component_id,
+    "@change": "inputChanged(\"#{attr_key}\")",
+    ref: "input.#{attr_key}",
+    placeholder: options[:placeholder],
+    "init-value": init_value}
+  %span{class: "errors", "v-if": error_key }
+    %span{class: "error", "v-for": "error in  #{error_key}"}
+      {{ error }}
+
+- if options[:type] == :textarea
+  %textarea{"v-model": input_key,
+    class: options[:class],
+    id: component_id,
+    "@change": "inputChanged(\"#{attr_key}\")",
+    ref: "input.#{attr_key}",
+    placeholder: options[:placeholder],
+    "init-value": init_value,
+    rows: options[:rows],
+    cols: options[:cols]}
+  %span{class: "errors", "v-if": error_key }
+    %span{class: "error", "v-for": "error in  #{error_key}"}
+      {{ error }}

data/app/concepts/form/view/select.haml

@@ -0,0 +1,72 @@
+- if options[:label]
+
+  %label=options[:label]
+
+- if options[:type] == :dropdown
+
+  %select{"#{model_binding}" => input_key,
+    id: component_id,
+    ref: "select.#{attr_key}",
+    "@change": "inputChanged(\"#{attr_key}\")",
+    "init-value": init_value,
+    "value-type": options_type}
+    %option{disabled: true}= options[:placeholder]
+    - if options[:options].is_a?(Hash)
+      - options[:options].each do |key, value|
+        %option{value: key}=value
+    - if options[:options].is_a?(Array)
+      - options[:options].each do |option|
+        %option{value: option}=option
+  %span{class: "errors", "v-if": error_key }
+    %span{class: "error", "v-for": "error in  #{error_key}"}
+      {{ error }}
+
+- if options[:type] == :checkbox
+
+  %div{id: component_id, ref: "select.multiple.#{attr_key}", "init-value": init_value}
+    - if options[:options].is_a?(Hash)
+      - options[:options].each do |key, value|
+        %input{type: :checkbox,
+        "#{model_binding}": input_key,
+        "@change": "inputChanged(\"#{attr_key}\")",
+        "value-type": options_type,
+        name: value,
+        value: key}/
+        %label=value
+    - if options[:options].is_a?(Array)
+      - options[:options].each do |value|
+        %input{type: :checkbox,
+        "#{model_binding}": input_key,
+        "@change": "inputChanged(\"#{attr_key}\")",
+        "value-type": options_type,
+        name: value,
+        value: value}/
+        %label=value
+  %span{class: "errors", "v-if": error_key }
+    %span{class: "error", "v-for": "error in  #{error_key}"}
+      {{ error }}
+
+- if options[:type] == :radio
+
+  %div{id: component_id, ref: "select.#{attr_key}", "init-value": init_value}
+    - if options[:options].is_a?(Hash)
+      - options[:options].each do |key, value|
+        %input{type: :radio,
+        "#{model_binding}": input_key,
+        "@change": "inputChanged(\"#{attr_key}\")",
+        "value-type": options_type,
+        name: value,
+        value: key}/
+        %label=value
+    - if options[:options].is_a?(Array)
+      - options[:options].each do |value|
+        %input{type: :radio,
+        "#{model_binding}": input_key,
+        "@change": "inputChanged(\"#{attr_key}\")",
+        "value-type": options_type,
+        name: value,
+        value: value}/
+        %label=value
+  %span{class: "errors", "v-if": error_key }
+    %span{class: "error", "v-for": "error in  #{error_key}"}
+      {{ error }}

data/app/concepts/form/view/submit.haml

@@ -0,0 +1,3 @@
+%span{@tag_attributes}
+  - if block_given?
+    = yield

data/app/concepts/header/cell/header.rb

@@ -0,0 +1,5 @@
+module Header::Cell
+  class Header < Component::Cell::Static
+
+  end
+end

data/app/concepts/header/view/header.haml

@@ -0,0 +1,3 @@
+%header{@tag_attributes}
+  - if block_given?
+    = yield

data/app/concepts/heading/cell/heading.rb

@@ -0,0 +1,5 @@
+module Heading::Cell
+  class Heading < Component::Cell::Static
+
+  end
+end

data/app/concepts/heading/view/heading.haml

@@ -0,0 +1,50 @@
+- case options[:size]
+- when 1
+  %h1{@tag_attributes}
+    - if options[:text].blank?
+      - if block_given?
+        = yield
+    - else
+      = options[:text]
+- when 2
+  %h2{@tag_attributes}
+    - if options[:text].blank?
+      - if block_given?
+        = yield
+    - else
+      = options[:text]
+- when 3
+  %h3{@tag_attributes}
+    - if options[:text].blank?
+      - if block_given?
+        = yield
+    - else
+      = options[:text]
+- when 4
+  %h4{@tag_attributes}
+    - if options[:text].blank?
+      - if block_given?
+        = yield
+    - else
+      = options[:text]
+- when 5
+  %h5{@tag_attributes}
+    - if options[:text].blank?
+      - if block_given?
+        = yield
+    - else
+      = options[:text]
+- when 6
+  %h6{@tag_attributes}
+    - if options[:text].blank?
+      - if block_given?
+        = yield
+    - else
+      = options[:text]
+- else
+  %h1{@tag_attributes}
+    - if options[:text].blank?
+      - if block_given?
+        = yield
+    - else
+      = options[:text]

data/app/concepts/html/cell/html.rb

@@ -0,0 +1,17 @@
+require_dependency "cell/partial"
+
+module Html::Cell
+  class Html < Component::Cell::Dynamic
+
+    include Cell::ViewModel::Partial
+
+    view_paths << "#{::Rails.root}/app/views"
+
+    def include_partial(&block)
+      render partial: "#{options[:path]}" do
+        capture(&block)
+      end
+    end
+
+  end
+end

data/app/concepts/html/js/html.js

@@ -0,0 +1,10 @@
+import Vue from 'vue/dist/vue.esm'
+import componentMixin from 'component/js/component'
+
+const componentDef = {
+  mixins: [componentMixin]
+}
+
+let component = Vue.component('html-cell', componentDef)
+
+export default component

data/app/concepts/html/view/html.haml

@@ -0,0 +1,3 @@
+%div{"id": custom_id, "data-matestack-id": component_id}
+  = include_partial do
+    = yield

data/app/concepts/icon/cell/icon.rb

@@ -0,0 +1,5 @@
+module Icon::Cell
+  class Icon < Component::Cell::Static
+
+  end
+end

data/app/concepts/icon/view/icon.haml

@@ -0,0 +1,6 @@
+%i{@tag_attributes}
+  - if options[:text].blank?
+    - if block_given?
+      = yield
+  - else
+    = options[:text]

data/app/concepts/img/cell/img.rb

@@ -0,0 +1,5 @@
+module Img::Cell
+  class Img < Component::Cell::Static
+
+  end
+end

data/app/concepts/img/view/img.haml

@@ -0,0 +1 @@
+= image_tag(ActionController::Base.helpers.asset_path(options[:path]), height: options[:height], width: options[:width], alt: options[:alt], class: options[:class], id: options[:id])

data/app/concepts/input/cell/input.rb

@@ -0,0 +1,5 @@
+module Input::Cell
+  class Input < Component::Cell::Static
+
+  end
+end

data/app/concepts/input/view/input.haml

@@ -0,0 +1,3 @@
+%input{@tag_attributes}
+  - if block_given?
+    = yield

data/app/concepts/label/cell/label.rb

@@ -0,0 +1,5 @@
+module Label::Cell
+  class Label < Component::Cell::Static
+
+  end
+end

data/app/concepts/label/view/label.haml

@@ -0,0 +1,7 @@
+- if options[:text].blank?
+  %label{@tag_attributes}
+    - if block_given?
+      = yield
+- else
+  %label{@tag_attributes}
+    = options[:text]

data/app/concepts/li/cell/li.rb

@@ -0,0 +1,5 @@
+module Li::Cell
+  class Li < Component::Cell::Static
+
+  end
+end

data/app/concepts/li/view/li.haml

@@ -0,0 +1,6 @@
+%li{@tag_attributes}
+  - if options[:text].blank?
+    - if block_given?
+      = yield
+  - else
+    = options[:text]