matestack-ui-core 0.7.4 → 1.0.1

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

@@ -1,13 +1,14 @@
 import Vue from 'vue/dist/vue.esm'
+import { turbolinksAdapterMixin } from 'vue-turbolinks';
 
 // Import from app/concepts/matestack/ui/core:
 import app from '../app/app'
 import async from '../async/async'
-import pageContent from '../page/content'
+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 html from '../html/html'
 import transition from '../transition/transition'
 import action from '../action/action'
 import form from '../form/form'
@@ -15,16 +16,39 @@ 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,6 @@
 module Matestack::Ui::Core::Li
   class Li < Matestack::Ui::Core::Component::Static
-
+    html_attributes :value
+    optional :text
   end
 end

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

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

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

@@ -1,25 +1,21 @@
 module Matestack::Ui::Core::Link
   class Link < Matestack::Ui::Core::Component::Static
+    html_attributes :download, :href, :hreflang, :media, :ping, :referrerpolicy, :rel, :target, :type
 
-    REQUIRED_KEYS = [:path]
+    optional :text, :path, params: { as: :link_params }
 
-    def setup
-      @tag_attributes.merge!({
-        "class": options[:class],
-        "id": component_id,
-        "method": options[:method],
-        "target": options[:target] ||= nil,
-        "href": link_path,
-        "title": options[:title]
-      })
+    def link_attributes
+      html_attributes.tap do |attributes|
+        attributes[:href] = link_path if path
+      end
     end
 
     def link_path
-      if options[:path].is_a?(Symbol)
-        return ::Rails.application.routes.url_helpers.send(options[:path], options[:params])
+      if path.is_a?(Symbol)
+        return ::Rails.application.routes.url_helpers.send(path, link_params)
       end
-      if options[:path].is_a?(String)
-        return options[:path]
+      if path.is_a?(String)
+        return path
       end
     end
 

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

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

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

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

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

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

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

@@ -1,11 +1,5 @@
 module Matestack::Ui::Core::Map
   class Map < Matestack::Ui::Core::Component::Static
-    REQUIRED_KEYS = [:name]
-
-    def setup
-      @tag_attributes.merge!({
-        name: options[:name]
-      })
-    end
+    html_attributes :name
   end
 end

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

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

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

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

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

@@ -1,4 +1,4 @@
-%meter{@tag_attributes}
+%meter{ html_attributes }
   - if block_given?
     = yield
     

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

@@ -1,14 +1,5 @@
 module Matestack::Ui::Core::Meter
   class Meter < Matestack::Ui::Core::Component::Static
-    def setup
-      @tag_attributes.merge!({
-        value: options[:value],
-        min: options[:min],
-        max: options[:max],
-        low: options[:low],
-        high: options[:high],
-        optimum: options[:optimum]
-      })
-    end
+    html_attributes :form, :high, :low, :max, :min, :optimum, :value
   end
 end

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

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

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

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

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

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

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

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

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

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

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

@@ -1,15 +1,5 @@
 module Matestack::Ui::Core::Object
   class Object < Matestack::Ui::Core::Component::Static
-    def setup
-      @tag_attributes.merge!({
-        width: options[:width],
-        height: options[:height],
-        data: options[:data],
-        form: options[:form],
-        name: options[:name],
-        type: options[:type],
-        usemap: options[:usemap]
-      })
-    end
+    html_attributes :data, :form, :height, :name, :type, :typemustmatch, :usemap, :width
   end
 end

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

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

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

@@ -1,5 +1,5 @@
 module Matestack::Ui::Core::Ol
   class Ol < Matestack::Ui::Core::Component::Static
-
+    html_attributes :reversed, :start, :type
   end
 end

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

@@ -1,2 +1,2 @@
-%div{@tag_attributes, "@click": "perform"}
+%div{ html_attributes, "@click": "perform" }
   = yield

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

@@ -1,5 +1,6 @@
 module Matestack::Ui::Core::Onclick
     class Onclick < Matestack::Ui::Core::Component::Dynamic
+      vue_js_component_name "matestack-ui-core-onclick"
 
   end
 end

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

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

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

@@ -1,10 +1,5 @@
 module Matestack::Ui::Core::Optgroup
   class Optgroup < Matestack::Ui::Core::Component::Static
-    def setup
-      @tag_attributes.merge!(
-        disabled: options[:disabled] ||= nil,
-        label: options[:label]
-      )
-    end
+    html_attributes :disabled, :label
   end
 end

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

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

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

@@ -1,12 +1,6 @@
 module Matestack::Ui::Core::Option
   class Option < Matestack::Ui::Core::Component::Static
-    def setup
-      @tag_attributes.merge!(
-        disabled: options[:disabled] ||= nil,
-        selected: options[:selected] ||= nil,
-        label: options[:label],
-        value: options[:value]
-      )
-    end
+    html_attributes :disabled, :label, :selected, :value
+    optional :text
   end
 end

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

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

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

@@ -1,11 +1,6 @@
 module Matestack::Ui::Core::Output
   class Output < Matestack::Ui::Core::Component::Static
-    def setup
-      @tag_attributes.merge!(
-        name: options[:name],
-        for: options[:for],
-        form: options[:form]
-      )
-    end
+    html_attributes :for, :form, :name
+    optional :text
   end
 end

data/app/concepts/matestack/ui/core/page/{content.js → content/content.js}

@@ -1,6 +1,8 @@
 import Vue from 'vue/dist/vue.esm'
 import Vuex from 'vuex'
-import componentMixin from '../component/component'
+import componentMixin from '../../component/component'
+
+import VRuntimeTemplate from "v-runtime-template"
 
 const componentDef = {
   mixins: [componentMixin],
@@ -9,7 +11,11 @@ const componentDef = {
   },
   computed: Vuex.mapState({
     asyncPageTemplate: state => state.pageTemplate,
-  })
+    loading: state => state.pageLoading
+  }),
+  components: {
+    VRuntimeTemplate: VRuntimeTemplate
+  }
 }
 
 let component = Vue.component('matestack-ui-core-page-content', componentDef)

data/app/concepts/matestack/ui/core/page/content/content.rb

@@ -0,0 +1,28 @@
+module Matestack::Ui::Core::Page::Content
+  class Content < Matestack::Ui::Core::Component::Dynamic
+    vue_js_component_name "matestack-ui-core-page-content"
+
+    def response
+      div class: "matestack-page-container", attributes: loading_classes do
+        if options[:slots] && options[:slots][:loading_state]
+          div class: "loading-state-element-wrapper", attributes: loading_classes do
+            slot options[:slots][:loading_state]
+          end
+        end
+        div class: "matestack-page-wrapper", attributes: loading_classes  do
+          div attributes: { "v-if": "asyncPageTemplate == null" } do
+            yield_components
+          end
+          div attributes: { "v-if": "asyncPageTemplate != null" } do
+            plain content_tag("v-runtime-template", nil, ":template": "asyncPageTemplate")
+          end
+        end
+      end
+    end
+
+    def loading_classes
+      { "v-bind:class": "{ 'loading': loading === true }" }
+    end
+
+  end
+end