matestack-ui-core 1.3.0 → 2.0.0

data/lib/matestack/ui/vue_js/components/isolated.rb

@@ -0,0 +1,86 @@
+module Matestack
+  module Ui
+    module VueJs
+      module Components
+        class Isolated < Matestack::Ui::VueJs::Vue
+          vue_name 'matestack-ui-core-isolate'
+
+          optional :defer, :init_on, :public_options, :rerender_on, :rerender_delay
+
+          def initialize(html_tag = nil, text = nil, options = {}, &block)
+            extract_options(text, options)
+            only_public_options!
+            isolated_parent = Matestack::Ui::Core::Context.isolated_parent
+            Matestack::Ui::Core::Context.isolated_parent = self
+            super(html_tag, text, options, &block)
+            Matestack::Ui::Core::Context.isolated_parent = isolated_parent
+          end
+
+          def create_children
+            # content only should be rendered if param :component_class is present
+            warn "[WARNING] '#{self.class}' was accessed but not authorized" unless authorized?
+            if params[:component_class].present?
+              self.response if authorized?
+            else
+              self.isolated do
+                self.response if authorized?
+              end
+            end
+          end
+
+          def isolated
+            Matestack::Ui::Core::Base.new(:component, component_attributes) do
+              div class: 'matestack-isolated-component-container', 'v-bind:class': '{ loading: loading === true }' do
+                if self.respond_to? :loading_state_element
+                  div class: 'loading-state-element-wrapper', 'v-bind:class': '{ loading: loading === true }' do
+                    loading_state_element
+                  end
+                end
+                unless ctx.defer || ctx.init_on
+                  div class: 'matestack-isolated-component-wrapper', 'v-if': 'isolatedTemplate == null', 'v-bind:class': '{ loading: loading === true }' do
+                    div class: 'matestack-isolated-component-root' do
+                      yield
+                    end
+                  end
+                end
+                div class: 'matestack-isolated-component-wrapper', 'v-if': 'isolatedTemplate != null', 'v-bind:class': '{ loading: loading === true }' do
+                  div class: 'matestack-isolated-component-root' do
+                    Matestack::Ui::Core::Base.new('v-runtime-template', ':template': 'isolatedTemplate')
+                  end
+                end
+              end
+            end
+          end
+
+          def vue_props
+            {
+              component_class: self.class.name,
+              public_options: ctx.public_options,
+              defer: ctx.defer,
+              rerender_on: ctx.rerender_on,
+              rerender_delay: ctx.rerender_delay,
+              init_on: ctx.init_on,
+            }
+          end
+
+          def public_options
+            ctx.public_options || {}
+          end
+
+          def authorized?
+            raise "'authorized?' needs to be implemented by '#{self.class}'"
+          end
+
+          def only_public_options!
+            if self.options.except(:defer, :init_on, :public_options, :rerender_on, :rerender_delay).keys.any?
+              error_message = "isolated components can only take params in a public_options hash, which will be exposed to the client side in order to perform an async request with these params."
+              error_message << " Check your usages of '#{self.class}' components"
+              raise error_message
+            end
+          end
+
+        end
+      end
+    end
+  end
+end

data/{app/concepts/matestack/ui/core/component/component.js → lib/matestack/ui/vue_js/components/mixin.js}

@@ -1,7 +1,7 @@
-import matestackEventHub from '../js/event-hub'
+import matestackEventHub from '../event_hub'
 
 const componentMixin = {
-  props: ['componentConfig', 'params'],
+  props: ['props', 'params'],
   methods: {
     registerEvents: function(events, callback){
       if(events != undefined){

data/{app/concepts/matestack/ui/core/onclick → lib/matestack/ui/vue_js/components}/onclick.js

@@ -1,7 +1,6 @@
 import Vue from 'vue/dist/vue.esm'
-
-import matestackEventHub from '../js/event-hub'
-import componentMixin from '../component/component'
+import matestackEventHub from '../event_hub'
+import componentMixin from './mixin'
 
 const componentDef = {
   mixins: [componentMixin],
@@ -10,7 +9,7 @@ const componentDef = {
   },
   methods: {
     perform: function(){
-      matestackEventHub.$emit(this.componentConfig["emit"], this.componentConfig["data"])
+      matestackEventHub.$emit(this.props["emit"], this.props["data"])
     }
   }
 }

data/lib/matestack/ui/vue_js/components/onclick.rb

@@ -0,0 +1,37 @@
+module Matestack
+  module Ui
+    module VueJs
+      module Components
+        class Onclick < Matestack::Ui::VueJs::Vue
+          vue_name 'matestack-ui-core-onclick'
+
+          optional :emit, :data
+
+          def response
+            a onclick_attributes do
+              yield
+            end
+          end
+
+          def onclick_attributes
+            options.merge({
+              class: "matestack-onclick-component-root",
+              '@click.prevent': 'perform',
+              href: "#"
+            })
+          end
+
+          protected
+
+          def vue_props
+            {
+              emit: ctx.emit,
+              data: ctx.data,
+            }
+          end
+
+        end
+      end
+    end
+  end
+end

data/{app/concepts/matestack/ui/core/toggle → lib/matestack/ui/vue_js/components}/toggle.js

@@ -1,6 +1,6 @@
 import Vue from 'vue/dist/vue.esm'
-import matestackEventHub from '../js/event-hub'
-import componentMixin from '../component/component'
+import matestackEventHub from '../event_hub'
+import componentMixin from './mixin'
 
 const componentDef = {
   mixins: [componentMixin],
@@ -21,10 +21,10 @@ const componentDef = {
       }
       this.showing = true
       this.event.data = event_data
-      if(this.componentConfig["hide_after"] != undefined){
+      if(this.props["hide_after"] != undefined){
         self.hide_after_timeout = setTimeout(function () {
           self.hide()
-        }, parseInt(this.componentConfig["hide_after"]));
+        }, parseInt(this.props["hide_after"]));
       }
     },
     hide: function(){
@@ -34,33 +34,33 @@ const componentDef = {
   },
   created: function () {
     const self = this
-    if(this.componentConfig["show_on"] != undefined){
+    if(this.props["show_on"] != undefined){
       this.showing = false
-      var show_events = this.componentConfig["show_on"].split(",")
+      var show_events = this.props["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(",")
+    if(this.props["hide_on"] != undefined){
+      var hide_events = this.props["hide_on"].split(",")
       hide_events.forEach(hide_event => matestackEventHub.$on(hide_event.trim(), self.hide));
     }
-    if(this.componentConfig["show_on"] != undefined){
+    if(this.props["show_on"] != undefined){
       this.showing = false
     }
-    if(this.componentConfig["init_show"] == true){
+    if(this.props["init_show"] == true){
       this.showing = true
     }
   },
   beforeDestroy: function() {
     const self = this
     clearTimeout(self.hide_after_timeout)
-    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(",")
+    matestackEventHub.$off(this.props["show_on"], self.show);
+    matestackEventHub.$off(this.props["hide_on"], self.hide);
+    if(this.props["show_on"] != undefined){
+      var shown_events = this.props["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(",")
+    if(this.props["hide_on"] != undefined){
+      var hiden_events = this.props["hide_on"].split(",")
       hiden_events.forEach(hide_event => matestackEventHub.$off(hide_event.trim(), self.hide));
     }
   },
@@ -68,4 +68,4 @@ const componentDef = {
 
 let component = Vue.component('matestack-ui-core-toggle', componentDef)
 
-export default componentDef
+export default componentDef

data/lib/matestack/ui/vue_js/components/toggle.rb

@@ -0,0 +1,38 @@
+module Matestack
+  module Ui
+    module VueJs
+      module Components
+        class Toggle < Matestack::Ui::VueJs::Vue
+          vue_name 'matestack-ui-core-toggle'
+
+          optional :show_on, :hide_on, :hide_after, :init_show
+
+          def response
+            div toggle_attributes do
+              yield
+            end
+          end
+
+          def toggle_attributes
+            options.merge({
+              class: "matestack-toggle-component-root", 
+              'v-if': 'showing'
+            })
+          end
+
+          protected
+
+          def vue_props
+            {
+              show_on: ctx.show_on,
+              hide_on: ctx.hide_on,
+              hide_after: ctx.hide_after,
+              init_show: ctx.init_show,
+            }
+          end
+
+        end
+      end
+    end
+  end
+end

data/{app/concepts/matestack/ui/core/transition → lib/matestack/ui/vue_js/components}/transition.js

@@ -1,7 +1,7 @@
 import Vue from 'vue/dist/vue.esm'
 import Vuex from 'vuex'
-import componentMixin from '../component/component'
-import matestackEventHub from '../js/event-hub'
+import componentMixin from './mixin'
+import matestackEventHub from '../event_hub'
 
 const componentDef = {
   mixins: [componentMixin],
@@ -10,10 +10,10 @@ const componentDef = {
   },
   computed: Vuex.mapState({
     isActive (state) {
-      return (this.componentConfig["link_path"].split("?")[0]) === state.currentPathName
+      return (this.props["link_path"].split("?")[0]) === state.currentPathName
     },
     isChildActive (state) {
-      return ((this.componentConfig["link_path"].split("?")[0]) !== state.currentPathName) && (state.currentPathName.indexOf(this.componentConfig["link_path"].split("?")[0]) !== -1)
+      return ((this.props["link_path"].split("?")[0]) !== state.currentPathName) && (state.currentPathName.indexOf(this.props["link_path"].split("?")[0]) !== -1)
     }
   }),
   methods: {
@@ -21,10 +21,10 @@ const componentDef = {
       const self = this
       matestackEventHub.$emit("page_loading_triggered", url);
       this.$store.commit('setPageLoading', true);
-      if (self.componentConfig["delay"] != undefined) {
+      if (self.props["delay"] != undefined) {
         setTimeout(function () {
           self.performNavigation(url)
-        }, parseInt(self.componentConfig["delay"]));
+        }, parseInt(self.props["delay"]));
       } else {
         this.performNavigation(url)
       }

data/lib/matestack/ui/vue_js/components/transition.rb

@@ -0,0 +1,40 @@
+module Matestack
+  module Ui
+    module VueJs
+      module Components
+        class Transition < Matestack::Ui::VueJs::Vue
+          vue_name 'matestack-ui-core-transition'
+
+          optional :path, :delay
+
+          def response
+            a attributes do
+              if block_given?
+                yield
+              end
+              plain self.text if self.text
+            end
+          end
+
+          protected
+
+          def attributes
+            options.merge({
+              href: ctx.path,
+              '@click.prevent': "navigateTo(\"#{ctx.path}\")",
+              "v-bind:class": "{ active: isActive, 'active-child': isChildActive }"
+            })
+          end
+
+          def vue_props
+            {
+              link_path: ctx.path,
+              delay: ctx.delay,
+            }
+          end
+
+        end
+      end
+    end
+  end
+end

data/lib/matestack/ui/vue_js/event_hub.js

@@ -0,0 +1,5 @@
+import Vue from 'vue/dist/vue.esm'
+
+const eventHub = new Vue();
+
+export default eventHub

data/lib/matestack/ui/vue_js/index.js

@@ -0,0 +1,52 @@
+// import Vue from 'vue/dist/vue.esm'
+// import Vuex from 'vuex'
+// import axios from 'axios'
+
+import eventHub from './event_hub'
+
+const matestackEventHub = eventHub // for compatibility with 1.x
+
+import componentMixin from './components/mixin'
+
+import app from './app/app'
+import store from './app/store'
+
+import pageContent from './page/content' //TODO Rename to page
+
+import collectionContent from './components/collection/content'
+import collectionFilter from './components/collection/filter'
+import collectionOrder from './components/collection/order'
+
+import toggle from './components/toggle'
+import onclick from './components/onclick'
+import transition from './components/transition'
+import async from './components/async'
+import action from './components/action'
+import cable from './components/cable'
+import isolate from './components/isolated'
+import form from './components/form/form'
+import formCheckbox from './components/form/checkbox'
+import formInput from './components/form/input'
+import formRadio from './components/form/radio'
+import formSelect from './components/form/select'
+import formTextarea from './components/form/textarea'
+
+import formInputMixin from './components/form/input_mixin'
+import formSelectMixin from './components/form/select_mixin'
+import formRadioMixin from './components/form/radio_mixin'
+import formCheckboxMixin from './components/form/checkbox_mixin'
+import formTextareaMixin from './components/form/textarea_mixin'
+
+const MatestackUiCore = {
+  store,
+  eventHub,
+  matestackEventHub, // for compatibility with 1.x
+  componentMixin,
+  formInputMixin,
+  formSelectMixin,
+  formCheckboxMixin,
+  formTextareaMixin,
+  formRadioMixin
+}
+
+export default MatestackUiCore

data/lib/matestack/ui/vue_js/initialize.rb

@@ -0,0 +1,5 @@
+class Matestack::Ui::Core::Base
+
+  include Matestack::Ui::VueJs::Components
+
+end

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

@@ -1,6 +1,6 @@
 import Vue from 'vue/dist/vue.esm'
 import Vuex from 'vuex'
-import componentMixin from '../../component/component'
+import componentMixin from '../components/mixin'
 
 import VRuntimeTemplate from "v-runtime-template"
 

data/lib/matestack/ui/vue_js/vue.rb

@@ -0,0 +1,63 @@
+module Matestack
+  module Ui
+    module VueJs
+      class Vue < Matestack::Ui::Component
+
+        def initialize(html_tag = nil, text = nil, options = {}, &block)
+          extract_options(text, options)
+          super(html_tag, text, options, &block)
+        end
+
+        def create_children(&block)
+          vue_component do
+            self.response do
+              block.call if block_given?
+            end
+          end
+        end
+
+        def vue_component(&block)
+          Matestack::Ui::Core::Base.new(:component, component_attributes, &block)
+        end
+
+        def component_attributes
+          {
+            is: vue_name,
+            ref: component_id,
+            ':params': params.to_json,
+            ':props': self.vue_props.to_json,
+            'inline-template': true
+          }
+        end
+
+        def component_id
+          options[:id] || nil
+        end
+
+        def vue_props
+          # raise "config needs to be overwritten by #{self.class}"
+        end
+        alias :config :vue_props
+
+        def vue_props
+          # raise "config needs to be overwritten by #{self.class}"
+        end
+
+        def self.vue_name(name = nil)
+          name ? @vue_name = name : @vue_name
+        end
+
+        def vue_name
+          raise "vue_name missing for #{self.class}" unless self.class.vue_name
+          self.class.vue_name
+        end
+
+        def self.inherited(subclass)
+          subclass.vue_name(self.vue_name)
+          super
+        end
+
+      end
+    end
+  end
+end