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

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

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

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

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

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

@@ -1,2 +1,6 @@
-%div{@tag_attributes}
-  = yield
+%component{dynamic_tag_attributes}
+  %div{class: "matestack-async-component-container", "v-bind:class": "{ 'loading': loading === true }"}
+    %div{class: "matestack-async-component-wrapper", "v-if": "asyncTemplate == null", "v-bind:class": "{ 'loading': loading === true }"}
+      = render_content
+    %div{class: "matestack-async-component-wrapper", "v-if": "asyncTemplate != null", "v-bind:class": "{ 'loading': loading === true }"}
+      %v-runtime-template{":template":"asyncTemplate"}

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

@@ -1,13 +1,17 @@
 import Vue from 'vue/dist/vue.esm'
-import matestackEventHub from 'js/event-hub'
-import componentMixin from 'component/component'
+import axios from 'axios'
+import VRuntimeTemplate from "v-runtime-template"
+import matestackEventHub from '../js/event-hub'
+import componentMixin from '../component/component'
 
 const componentDef = {
   mixins: [componentMixin],
   data: function(){
     return {
+      asyncTemplate: null,
       showing: true,
-      hide_after_timeout: null,
+      loading: false,
+      hideAfterTimeout: null,
       event: {
         data: {}
       }
@@ -27,7 +31,7 @@ const componentDef = {
         }
       }
       if(this.componentConfig["hide_after"] != undefined){
-        self.hide_after_timeout = setTimeout(function () {
+        self.hideAfterTimeout = setTimeout(function () {
           self.hide()
         }, parseInt(this.componentConfig["hide_after"]));
       }
@@ -38,16 +42,53 @@ const componentDef = {
     },
     startDefer: function(){
       const self = this
+      self.loading = true;
       setTimeout(function () {
         self.rerender()
       }, parseInt(this.componentConfig["defer"]));
+    },
+    rerender: function(){
+      var self = this;
+      self.loading = true;
+      axios({
+        method: "get",
+        url: location.pathname + location.search,
+        headers: {
+          'X-CSRF-Token': document.getElementsByName("csrf-token")[0].getAttribute('content')
+        },
+        params: {
+          "component_key": self.componentConfig["component_key"],
+          "component_class": self.componentConfig["parent_class"]
+        }
+      })
+      .then(function(response){
+        var tmp_dom_element = document.createElement('div');
+        tmp_dom_element.innerHTML = response['data'];
+        var template = tmp_dom_element.querySelector('#' + self.componentConfig["component_key"]).outerHTML;
+        self.loading = false;
+        self.asyncTemplate = template;
+      })
+      .catch(function(error){
+        console.log(error)
+        matestackEventHub.$emit('async_rerender_error', { id: self.componentConfig["component_key"] })
+      })
     }
   },
   created: function () {
     const self = this
-    matestackEventHub.$on(this.componentConfig["rerender_on"], self.rerender)
-    matestackEventHub.$on(this.componentConfig["show_on"], self.show)
-    matestackEventHub.$on(this.componentConfig["hide_on"], self.hide)
+    if(this.componentConfig["show_on"] != undefined){
+      this.showing = false
+      var show_events = this.componentConfig["show_on"].split(",")
+      show_events.forEach(show_event => matestackEventHub.$on(show_event.trim(), self.show));
+    }
+    if(this.componentConfig["hide_on"] != undefined){
+      var hide_events = this.componentConfig["hide_on"].split(",")
+      hide_events.forEach(hide_event => matestackEventHub.$on(hide_event.trim(), self.hide));
+    }
+    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));
+    }
     if(this.componentConfig["show_on"] != undefined){
       this.showing = false
     }
@@ -64,11 +105,26 @@ const componentDef = {
   },
   beforeDestroy: function() {
     const self = this
-    clearTimeout(self.hide_after_timeout)
+    clearTimeout(self.hideAfterTimeout)
     matestackEventHub.$off(this.componentConfig["rerender_on"], self.rerender);
     matestackEventHub.$off(this.componentConfig["show_on"], self.show);
     matestackEventHub.$off(this.componentConfig["hide_on"], self.hide);
+    if(this.componentConfig["show_on"] != undefined){
+      var shown_events = this.componentConfig["show_on"].split(",")
+      shown_events.forEach(show_event => matestackEventHub.$off(show_event.trim(), self.show));
+    }
+    if(this.componentConfig["hide_on"] != undefined){
+      var hiden_events = this.componentConfig["hide_on"].split(",")
+      hiden_events.forEach(hide_event => matestackEventHub.$off(hide_event.trim(), self.hide));
+    }
+    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.rerender));
+    }
   },
+  components: {
+    VRuntimeTemplate: VRuntimeTemplate
+  }
 }
 
 let component = Vue.component('matestack-ui-core-async', componentDef)

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

@@ -1,12 +1,37 @@
 module Matestack::Ui::Core::Async
-  class Async < Matestack::Ui::Core::Component::Dynamic
+  class Async < Matestack::Ui::Core::Component::Rerender
+    vue_js_component_name "matestack-ui-core-async"
 
-    def setup
-      @rerender = true
+    optional :id # will be required in 1.0.0
+
+    def initialize(*args)
+      super
+      ActiveSupport::Deprecation.warn(
+        'Calling async components without id is deprecated. Instead provide a unique id for async components.'
+      ) if id.blank?
+      @component_config[:component_key] = id || "async_#{Digest::SHA256.hexdigest(caller[3])}"
+      if @included_config.present? && @included_config[:isolated_parent_class].present?
+        @component_config[:parent_class] = @included_config[:isolated_parent_class]
+      end
       @tag_attributes.merge!({
-        "v-if": "showing"
+        "v-if": "showing",
+        id: @component_config[:component_key]
       })
     end
 
+    def show
+      render :async
+    end
+
+    def render_content
+      render :children_wrapper do
+        render :children
+      end
+    end
+
+    def get_component_key
+      @component_config[:component_key]
+    end
+
   end
 end

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

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

data/app/concepts/matestack/ui/core/{pg/pg.haml → b/b.haml}

@@ -1,4 +1,4 @@
-%p{@tag_attributes}
+%b{@tag_attributes}
   - if options[:text].nil? && block_given?
     = yield
   - else

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,11 @@
+module Matestack::Ui::Core::Bdo
+  class Bdo < Matestack::Ui::Core::Component::Static
+    requires :dir
+
+    def setup
+      @tag_attributes.merge!({
+        "dir": options[:dir]
+      })
+    end
+  end
+end

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

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

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

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

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

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

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

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

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

@@ -1,8 +1,8 @@
 import Vue from 'vue/dist/vue.esm'
-import matestackEventHub from 'js/event-hub'
-import queryParamsHelper from 'js/helpers/query-params-helper'
-import componentMixin from 'component/component'
-import asyncMixin from 'async/async'
+import matestackEventHub from '../../js/event-hub'
+import queryParamsHelper from '../../js/helpers/query-params-helper'
+import componentMixin from '../../component/component'
+import asyncMixin from '../../async/async'
 
 const componentDef = {
   mixins: [componentMixin, asyncMixin],

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

@@ -1,8 +1,8 @@
 module Matestack::Ui::Core::Collection::Content
-  class Content < Matestack::Ui::Core::Component::Dynamic
+  class Content < Matestack::Ui::Core::Component::Rerender
+    vue_js_component_name 'matestack-ui-core-collection-content'
 
     def setup
-      @rerender = true
       @component_config = @component_config.except(:data, :paginated_data)
     end
 

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

@@ -1,5 +1,7 @@
-module Matestack::Ui::Core::Collection::Content::Page::Link
-  class Link < Matestack::Ui::Core::Component::Static
+module Matestack::Ui::Core::Collection::Content::Page
+  module Link
+    class Link::Link < Matestack::Ui::Core::Component::Static
 
+    end
   end
 end

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

@@ -1,7 +1,7 @@
 import Vue from 'vue/dist/vue.esm'
-import matestackEventHub from 'js/event-hub'
-import queryParamsHelper from 'js/helpers/query-params-helper'
-import componentMixin from 'component/component'
+import matestackEventHub from '../../js/event-hub'
+import queryParamsHelper from '../../js/helpers/query-params-helper'
+import componentMixin from '../../component/component'
 
 const componentDef = {
   mixins: [componentMixin],

data/app/concepts/matestack/ui/core/collection/filter/filter.rb

@@ -1,16 +1,15 @@
 module Matestack::Ui::Core::Collection::Filter
   class Filter < Matestack::Ui::Core::Component::Dynamic
+    vue_js_component_name 'matestack-ui-core-collection-filter'
 
     def setup
       @component_config = @component_config.except(:data, :paginated_data)
     end
 
     def response
-      components {
-        div @tag_attributes do
-          yield_components
-        end
-      }
+      div @tag_attributes do
+        yield_components
+      end
     end
 
   end

data/app/concepts/matestack/ui/core/collection/filter/select/select.haml

@@ -0,0 +1,10 @@
+- if options[:type] == :dropdown
+
+  %select{@tag_attributes}
+    %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

data/app/concepts/matestack/ui/core/collection/filter/select/select.rb

@@ -0,0 +1,29 @@
+module Matestack::Ui::Core::Collection::Filter::Select
+  class Select < Matestack::Ui::Core::Component::Static
+
+    def setup
+      if options[:type].nil?
+        options[:type] = :dropdown #nothing else supported at the moment
+      end
+      @tag_attributes.merge!({
+        "v-model#{'.number' if options[:type] == :number}": input_key,
+        type: options[:type],
+        class: options[:class],
+        id: component_id,
+        "@keyup.enter": "submitFilter()",
+        "@change": "$forceUpdate()",
+        ref: "filter.#{attr_key}",
+        placeholder: options[:placeholder]
+      })
+    end
+
+    def input_key
+      'filter["' + options[:key].to_s + '"]'
+    end
+
+    def attr_key
+      return options[:key].to_s
+    end
+
+  end
+end

data/app/concepts/matestack/ui/core/collection/helper.rb

@@ -1,6 +1,6 @@
 module Matestack::Ui::Core::Collection
 
-  CollectionConfig = Struct.new(:id, :init_offset, :init_limit, :filtered_count, :base_count, :data, :context) do
+  CollectionConfig = Struct.new(:id, :init_offset, :init_limit, :filtered_count, :base_count, :data, :params) do
 
     def paginated_data
       resulting_data = data
@@ -11,11 +11,11 @@ module Matestack::Ui::Core::Collection
     end
 
     def get_collection_offset
-      (context[:params]["#{id}-offset".to_sym] ||= init_offset).to_i
+      (params["#{id}-offset".to_sym] ||= init_offset).to_i
     end
 
     def get_collection_limit
-      (context[:params]["#{id}-limit".to_sym] ||= init_limit).to_i
+      (params["#{id}-limit".to_sym] ||= init_limit).to_i
     end
 
     def pages
@@ -63,7 +63,7 @@ module Matestack::Ui::Core::Collection
 
     def get_collection_filter collection_id, key=nil
       filter_hash = {}
-      context[:params].each do |param_key, param_value|
+      controller_params.each do |param_key, param_value|
         if param_key.start_with?("#{collection_id}-filter-")
           param_key.gsub("#{collection_id}-filter-", "")
           filter_hash[param_key.gsub("#{collection_id}-filter-", "").to_sym] = param_value
@@ -78,7 +78,7 @@ module Matestack::Ui::Core::Collection
 
     def get_collection_order collection_id, key=nil
       order_hash = {}
-      context[:params].each do |param_key, param_value|
+      controller_params.each do |param_key, param_value|
         if param_key.start_with?("#{collection_id}-order-")
           param_key.gsub("#{collection_id}-order-", "")
           order_hash[param_key.gsub("#{collection_id}-order-", "").to_sym] = param_value
@@ -101,7 +101,7 @@ module Matestack::Ui::Core::Collection
         filtered_count,
         base_count,
         data,
-        context
+        controller_params,
       )
 
       @collections[id.to_sym] = collection_config
@@ -109,5 +109,13 @@ module Matestack::Ui::Core::Collection
       return collection_config
     end
 
+    # try to get params from either controller params, when called in a rails legacy view or
+    # from cells context when called in a matestack app/page/component
+    def controller_params
+      return context[:params] if defined? context
+      return params.to_unsafe_h if defined? params
+      raise 'collection component is missing access to params or context'
+    end
+
   end
 end

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

@@ -1,7 +1,7 @@
 import Vue from 'vue/dist/vue.esm'
-import matestackEventHub from 'js/event-hub'
-import queryParamsHelper from 'js/helpers/query-params-helper'
-import componentMixin from 'component/component'
+import matestackEventHub from '../../js/event-hub'
+import queryParamsHelper from '../../js/helpers/query-params-helper'
+import componentMixin from '../../component/component'
 
 const componentDef = {
   mixins: [componentMixin],
@@ -16,7 +16,7 @@ const componentDef = {
         this.ordering[key] = "asc"
       } else if (this.ordering[key] == "asc") {
         this.ordering[key] = "desc"
-      } else if (this.ordering[key] = "desc") {
+      } else if (this.ordering[key] == "desc") {
         this.ordering[key] = undefined
       }
       var url;