matestack-ui-core 0.7.2.1 → 1.0.0.rc.1

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

@@ -2,7 +2,10 @@ module Matestack::Ui::Core::Form::Submit
   class Submit < Matestack::Ui::Core::Component::Static
 
     def setup
-      @tag_attributes.merge!({ "@click.prevent": "perform" })
+      @tag_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/heading/heading.rb

@@ -1,5 +1,7 @@
 module Matestack::Ui::Core::Heading
   class Heading < Matestack::Ui::Core::Component::Static
 
+    attr_reader :argument, :options
+
   end
 end

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

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

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

@@ -0,0 +1,14 @@
+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
+
+  end
+end

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

@@ -6,6 +6,7 @@ module Matestack::Ui::Core::Img
         src: ActionController::Base.helpers.asset_path(options[:path]),
         height: options[:height],
         width: options[:width],
+        usemap: options[:usemap],
         alt: options[:alt]
       })
     end

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

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

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

@@ -1,5 +1,13 @@
 module Matestack::Ui::Core::Input
   class Input < Matestack::Ui::Core::Component::Static
+    
+    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
+
+    def type
+      options[:type]
+    end
 
   end
 end

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

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

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

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

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

@@ -0,0 +1,2 @@
+%div{@tag_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[: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

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

@@ -1,30 +1,54 @@
 import Vue from 'vue/dist/vue.esm'
+import { turbolinksAdapterMixin } from 'vue-turbolinks';
 
-import app from 'app/app'
-import async from 'async/async'
-import pageContent from 'page/content'
-import store from 'app/store'
-import component from 'component/component'
-import anonymDynamicComponent from 'component/anonym-dynamic-component'
-import html from 'html/html'
-import transition from 'transition/transition'
-import action from 'action/action'
-import form from 'form/form'
-import view from 'view/view'
-import onclick from 'onclick/onclick'
-import collectionContent from 'collection/content/content'
-import collectionFilter from 'collection/filter/filter'
-import collectionOrder from 'collection/order/order'
+// Import from app/concepts/matestack/ui/core:
+import app from '../app/app'
+import async from '../async/async'
+import pageContent from '../page/content/content'
+import toggle from '../toggle/toggle'
+import store from '../app/store'
+import component from '../component/component'
+import anonymDynamicComponent from '../component/anonym-dynamic-component'
+import transition from '../transition/transition'
+import action from '../action/action'
+import form from '../form/form'
+import onclick from '../onclick/onclick'
+import collectionContent from '../collection/content/content'
+import collectionFilter from '../collection/filter/filter'
+import collectionOrder from '../collection/order/order'
+import isolate from '../isolated/isolated'
 
 let matestackUiApp = undefined
 
+// this event fires first and always
 document.addEventListener('DOMContentLoaded', () => {
-
-    matestackUiApp = new Vue({
-      el: "#matestack_ui",
+  // somehow we need to inject the turbolinks mixin even
+  // if the turbolinks:load event will recreate the vue instance
+  // skipping the injection here caused errors when submitting forms or action
+  // if they were present on the first page, which was loaded and activated turbolinks
+  // the mixin does not impact the app when turbolinks is disabled
+  matestackUiApp = new Vue({
+      el: "#matestack-ui",
+      mixins: [turbolinksAdapterMixin],
       store: store
-    })
+  })
+})
 
+// this event fires after DOMContentLoaded and only if turbolinks are enabled
+document.addEventListener('turbolinks:load', () => {
+  // we need to empty the currently stored pageTemplate state variable
+  // otherwise the matestack page will jump back to the latest pageTemplate
+  // fetched during the last matestack transition as the turbolinks powered
+  // page transition does not write the matestack store pageTemplate state variable
+  store.commit('resetPageTemplate')
+  // we need to destroy the vue app instance
+  matestackUiApp.$destroy();
+  // and recreate it right afterwards in order to work when used with turbolinks
+  matestackUiApp = new Vue({
+      el: "#matestack-ui",
+      mixins: [turbolinksAdapterMixin],
+      store: store
+  })
 })
 
 export default Vue

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

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

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

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

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

@@ -1,5 +1,10 @@
 module Matestack::Ui::Core::Label
   class Label < Matestack::Ui::Core::Component::Static
-
+    def setup
+      @tag_attributes.merge!({
+        for: options[:for],
+        form: options[:form]
+      })
+    end
   end
 end