matestack-ui-core 0.7.5 → 1.1.0

data/app/concepts/matestack/ui/core/form/submit/submit.haml

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

data/app/concepts/matestack/ui/core/form/submit/submit.rb

@@ -1,8 +1,11 @@
 module Matestack::Ui::Core::Form::Submit
   class Submit < Matestack::Ui::Core::Component::Static
 
-    def setup
-      @tag_attributes.merge!({ "@click.prevent": "perform" })
+    def submit_attributes
+      html_attributes.merge!({
+        "@click.prevent": "perform",
+        "v-bind:class": "{ 'loading': loading }"
+      })
     end
 
   end

data/app/concepts/matestack/ui/core/form/textarea/textarea.rb

@@ -0,0 +1,28 @@
+require_relative '../utils'
+require_relative '../has_errors'
+module Matestack::Ui::Core::Form::Textarea
+  class Textarea < Matestack::Ui::Core::Textarea::Textarea
+    include Matestack::Ui::Core::Form::Utils
+    include Matestack::Ui::Core::Form::HasErrors
+
+    requires :key
+    optional :multiple, :init, for: { as: :input_for }, label: { as: :input_label }
+
+    def response
+      label text: input_label if input_label
+      textarea html_attributes.merge(attributes: vue_attributes)
+      render_errors
+    end
+
+    def vue_attributes
+      (options[:attributes] || {}).merge({
+        'v-model': input_key,
+        '@change': "inputChanged('#{attr_key}')",
+        'v-bind:class': "{ '#{input_error_class}': #{error_key} }",
+        "init-value": init_value,
+        ref: "input.#{attr_key}",
+      })
+    end
+    
+  end
+end

data/app/concepts/matestack/ui/core/form/utils.rb

@@ -0,0 +1,47 @@
+module Matestack::Ui::Core::Form::Utils
+
+  def input_key
+    "data['#{attr_key.to_s}']"
+  end
+
+  def input_wrapper
+    case input_for
+    when nil
+      return nil
+    when Symbol, String
+      return input_for
+    end
+    if input_for.respond_to?(:model_name)
+      return input_for.model_name.singular
+    end
+  end
+
+  def attr_key
+    if input_wrapper.nil?
+      return "#{key.to_s}"
+    else
+      return "#{input_wrapper}.#{key.to_s}"
+    end
+  end
+
+  def init_value
+    return init unless init.nil?
+
+    unless input_for.nil?
+      value = parse_value(input_for.send key)
+    else
+      unless @included_config.nil? && @included_config[:for].nil?
+        if @included_config[:for].respond_to?(key)
+          value = parse_value(@included_config[:for].send key)
+        else
+          @included_config[:for][key] if @included_config[:for].is_a?(Hash)
+        end
+      end
+    end
+  end
+
+  def parse_value(value)
+    value
+  end
+
+end

data/app/concepts/matestack/ui/core/header/header.haml

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

data/app/concepts/matestack/ui/core/header/header.rb

@@ -1,5 +1,4 @@
 module Matestack::Ui::Core::Header
   class Header < Matestack::Ui::Core::Component::Static
-
   end
 end

data/app/concepts/matestack/ui/core/heading/heading.haml

@@ -1,50 +1,5 @@
-- 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]
+- if text.blank? && block_given?
+  = content_tag("h#{size || 1}", html_attributes) do
+    = yield
 - else
-  %h1{@tag_attributes}
-    - if options[:text].blank?
-      - if block_given?
-        = yield
-    - else
-      = options[:text]
+  = content_tag("h#{size || 1}", text, html_attributes)

data/app/concepts/matestack/ui/core/heading/heading.rb

@@ -1,5 +1,5 @@
 module Matestack::Ui::Core::Heading
   class Heading < Matestack::Ui::Core::Component::Static
-
+    optional :text, :size
   end
 end

data/app/concepts/matestack/ui/core/hr/hr.haml

@@ -1 +1 @@
-%hr{@tag_attributes}
+%hr{ html_attributes }

data/app/concepts/matestack/ui/core/hr/hr.rb

@@ -1,5 +1,4 @@
 module Matestack::Ui::Core::Hr
   class Hr < Matestack::Ui::Core::Component::Static
-
   end
 end

data/app/concepts/matestack/ui/core/icon/icon.haml

@@ -1,5 +1,5 @@
-%i{@tag_attributes}
-  - if options[:text].nil? && block_given?
+%i{ html_attributes }
+  - if text.nil? && block_given?
     = yield
   - else
-    = options[:text]
+    = text

data/app/concepts/matestack/ui/core/icon/icon.rb

@@ -1,5 +1,5 @@
 module Matestack::Ui::Core::Icon
   class Icon < Matestack::Ui::Core::Component::Static
-
+    optional :text
   end
 end

data/app/concepts/matestack/ui/core/iframe/iframe.haml

@@ -1,5 +1,5 @@
-%iframe{@tag_attributes}
-  - if options[:text].nil? && block_given?
+%iframe{ html_attributes }
+  - if text.nil? && block_given?
     = yield
   - else
-    = options[:text]
+    = text

data/app/concepts/matestack/ui/core/iframe/iframe.rb

@@ -1,14 +1,7 @@
 module Matestack::Ui::Core::Iframe
   class Iframe < Matestack::Ui::Core::Component::Static
-
-    def setup
-      @tag_attributes.merge!({
-        src: options[:src],
-        height: options[:height],
-        width: options[:width],
-        srcdoc: options[:srcdoc]
-      })
-    end
-
+    html_attributes :allow, :allowfullscreen, :allowpaymentrequest, :height, :name, 
+      :referrerpolicy, :sandbox, :src, :srcdoc, :width
+    optional :text
   end
 end

data/app/concepts/matestack/ui/core/img/img.haml

@@ -1 +1 @@
-%img{@tag_attributes}
+%img{ img_attributes }

data/app/concepts/matestack/ui/core/img/img.rb

@@ -1,14 +1,14 @@
 module Matestack::Ui::Core::Img
   class Img < Matestack::Ui::Core::Component::Static
+    html_attributes :alt, :crossorigin, :height, :ismap, :longdesc, :referrerpolicy, 
+      :sizes, :src, :srcset, :usemap, :width
 
-    def setup
-      @tag_attributes.merge!({
-        src: ActionController::Base.helpers.asset_path(options[:path]),
-        height: options[:height],
-        width: options[:width],
-        usemap: options[:usemap],
-        alt: options[:alt]
-      })
+    optional :path
+
+    def img_attributes
+      html_attributes.tap do |attributes|
+        attributes[:src] = ActionController::Base.helpers.asset_path(path) if path
+      end
     end
 
   end

data/app/concepts/matestack/ui/core/input/input.haml

@@ -1,2 +1 @@
-%input{ @tag_attributes,
-  type: type }
+%input{ html_attributes }

data/app/concepts/matestack/ui/core/input/input.rb

@@ -1,9 +1,9 @@
 module Matestack::Ui::Core::Input
   class Input < Matestack::Ui::Core::Component::Static
-
-    def type
-      options[:type]
-    end
+    
+    html_attributes :accept, :alt, :autocomplete, :autofocus, :checked, :dirname, :disabled, :form, :formaction, 
+      :formenctype, :formmethod, :formnovalidate, :formtarget, :height, :list, :max, :maxlength, :min, :minlength, 
+      :multiple, :name, :pattern, :placeholder, :readonly, :required, :size, :src, :step, :type, :value, :width
 
   end
 end

data/app/concepts/matestack/ui/core/ins/ins.haml

@@ -1,5 +1,5 @@
-%ins{@tag_attributes}
-  - if options[:text].nil? && block_given?
+%ins{ html_attributes }
+  - if text.nil? && block_given?
     = yield
   - else
-    = options[:text]
+    = text

data/app/concepts/matestack/ui/core/ins/ins.rb

@@ -1,10 +1,6 @@
 module Matestack::Ui::Core::Ins
   class Ins < Matestack::Ui::Core::Component::Static
-    def setup
-      @tag_attributes.merge!({
-        cite: options[:cite],
-        datetime: options[:datetime]
-      })
-    end
+    html_attributes :cite, :datetime
+    optional :text
   end
 end

data/app/concepts/matestack/ui/core/isolated/children_wrapper.haml

@@ -0,0 +1,2 @@
+%div{ html_attributes.merge(class: "matestack-isolated-component-root") }
+  =yield

data/app/concepts/matestack/ui/core/isolated/isolated.haml

@@ -0,0 +1,10 @@
+%component{dynamic_tag_attributes}
+  %div{loading_classes.merge(class: "matestack-isolated-component-container")}
+    - if loading_state_element.present?
+      %div{loading_classes.merge(class: "loading-state-element-wrapper")}
+        =loading_state_element
+    - unless options[:defer] || options[:init_on]
+      %div{class: "matestack-isolated-component-wrapper", "v-if": "isolatedTemplate == null", "v-bind:class": "{ 'loading': loading === true }"}
+        = render_isolated_content
+    %div{class: "matestack-isolated-component-wrapper", "v-if": "isolatedTemplate != null", "v-bind:class": "{ 'loading': loading === true }"}
+      %v-runtime-template{":template":"isolatedTemplate"}

data/app/concepts/matestack/ui/core/isolated/isolated.js

@@ -0,0 +1,108 @@
+import Vue from 'vue/dist/vue.esm'
+import axios from 'axios'
+import VRuntimeTemplate from "v-runtime-template"
+import matestackEventHub from '../js/event-hub'
+
+const componentDef = {
+  props: ['componentConfig', 'params'],
+  data: function(){
+    return {
+      isolatedTemplate: null,
+      loading: false,
+      loadingError: false
+    }
+  },
+  methods: {
+    rerender: function(){
+      var self = this;
+      self.loading = true;
+      self.loadingError = false;
+      if(self.componentConfig["rerender_delay"] != undefined){
+        setTimeout(function () {
+          self.renderIsolatedContent();
+        }, parseInt(this.componentConfig["rerender_delay"]));
+      } else {
+        self.renderIsolatedContent();
+      }
+    },
+    renderIsolatedContent: function(){
+      var self = this;
+      self.loading = true;
+      self.loadingError = false;
+      axios({
+        method: "get",
+        url: location.pathname + location.search,
+        headers: {
+          'X-CSRF-Token': document.getElementsByName("csrf-token")[0].getAttribute('content')
+        },
+        params: {
+          "component_class": self.componentConfig["component_class"],
+          "public_options": self.componentConfig["public_options"]
+        }
+      })
+      .then(function(response){
+        self.loading = false;
+        self.loadingStart = false;
+        self.loadingEnd = true;
+        self.isolatedTemplate = response['data'];
+      })
+      .catch(function(error){
+        self.loadingError = true;
+        matestackEventHub.$emit('isolate_rerender_error', { class: self.componentConfig["component_class"] })
+      })
+    },
+    startDefer: function(){
+      const self = this
+      self.loading = true;
+      setTimeout(function () {
+        self.renderIsolatedContent()
+      }, parseInt(this.componentConfig["defer"]));
+    }
+  },
+  created: function () {
+    const self = this
+  },
+  beforeDestroy: function() {
+    const self = this
+    if(this.componentConfig["rerender_on"] != undefined){
+      var rerender_events = this.componentConfig["rerender_on"].split(",")
+      rerender_events.forEach(rerender_event => matestackEventHub.$off(rerender_event.trim(), self.renderIsolatedContent));
+    }
+  },
+  mounted: function (){
+    const self = this
+    if(this.componentConfig["init_on"] === undefined || this.componentConfig["init_on"] === null){
+      if(self.componentConfig["defer"] == true || Number.isInteger(self.componentConfig["defer"])){
+        if(!isNaN(self.componentConfig["defer"])){
+          self.startDefer()
+        }
+        else{
+          self.renderIsolatedContent();
+        }
+      }
+    }else{
+      if(self.componentConfig["defer"] != undefined){
+        if(!isNaN(self.componentConfig["defer"])){
+          var init_on_events = this.componentConfig["init_on"].split(",")
+          init_on_events.forEach(init_on_event => matestackEventHub.$on(init_on_event.trim(), self.startDefer));
+        }
+      }else{
+        var init_on_events = this.componentConfig["init_on"].split(",")
+        init_on_events.forEach(init_on_event => matestackEventHub.$on(init_on_event.trim(), self.renderIsolatedContent));
+      }
+    }
+
+    if(this.componentConfig["rerender_on"] != undefined){
+      var rerender_events = this.componentConfig["rerender_on"].split(",")
+      rerender_events.forEach(rerender_event => matestackEventHub.$on(rerender_event.trim(), self.rerender));
+    }
+
+  },
+  components: {
+    VRuntimeTemplate: VRuntimeTemplate
+  }
+}
+
+let component = Vue.component('matestack-ui-core-isolate', componentDef)
+
+export default componentDef

data/app/concepts/matestack/ui/core/isolated/isolated.rb

@@ -0,0 +1,59 @@
+module Matestack::Ui::Core::Isolated
+  class Isolated < Matestack::Ui::Core::Component::Dynamic
+    vue_js_component_name "matestack-ui-core-isolate"
+
+    def initialize(*args)
+      super
+      @public_options = args.map { |hash| hash&.dig(:public_options) }[0]
+    end
+
+    def public_options
+      @public_options ||= {}
+    end
+
+    # def params
+    #   context[:params] || matestack_context[:params]
+    # end
+
+    def setup
+      @component_config[:component_class] = self.class.name
+      @component_config[:public_options] = @options[:public_options]
+      @component_config[:defer] = @options[:defer]
+      @component_config[:rerender_on] = @options[:rerender_on]
+      @component_config[:rerender_delay] = @options[:rerender_delay]
+      @component_config[:init_on] = @options[:init_on]
+    end
+
+    def loading_classes
+      { "v-bind:class": "{ 'loading': loading === true }" }
+    end
+
+    # overwrite parent class render mechanism in order to make sure to only render wrapper
+    def render_content
+      show
+    end
+
+    # only render vuejs component wrapper on show
+    def show
+      render :isolated
+    end
+
+    # this method gets called when the isolate vuejs component requests isolated content
+    def render_isolated_content
+      if authorized?
+        render :children_wrapper do
+          render :children
+        end
+      end
+    end
+
+    def authorized?
+      raise "please implement the `authorized? method: isolated components have to be authorized separately"
+    end
+
+    def loading_state_element
+      nil # overwrite in subclass
+    end
+
+  end
+end