matestack-ui-core 2.0.0 → 3.0.0.rc2

data/lib/matestack/ui/core/helper.rb

@@ -2,22 +2,22 @@ module Matestack
   module Ui
     module Core
       module Helper
-        
+
         def self.included(base)
           base.extend ClassMethods
         end
-        
+
         module ClassMethods
           def inherited(subclass)
-            subclass.matestack_app(@matestack_app)
+            subclass.matestack_layout(@matestack_layout)
             super
           end
-          
-          def matestack_app(app = nil)
-            @matestack_app = app ? app : @matestack_app
+
+          def matestack_layout(layout = nil)
+            @matestack_layout = layout ? layout : @matestack_layout
           end
         end
-        
+
         def render(*args)
           setup_context
           if args.first.is_a?(Class) && args.first.ancestors.include?(Base)
@@ -30,35 +30,35 @@ module Matestack
             end
 
             options = args.second || {}
-            app = options.delete(:matestack_app) || self.class.matestack_app
+            layout = options.delete(:matestack_layout) || self.class.matestack_layout
             page = args.first
 
             if controller_layout == false
-              layout = app ? app.layout : false
+              root_layout = layout ? layout.layout : false
             else
               if controller_layout.nil?
-                layout = "application"
+                root_layout = "application"
               else
-                layout = controller_layout
+                root_layout = controller_layout
               end
             end
-            
-            if app && params[:only_page].nil? && params[:component_key].nil? && params[:component_class].nil?
-              render_app app, page, options, layout
+
+            if layout && params[:only_page].nil? && params[:component_key].nil? && params[:component_class].nil?
+              render_layout layout, page, options, root_layout
             else
               if params[:component_key] && params[:component_class].nil?
-                render_component app, page, params[:component_key], options
+                render_component layout, page, params[:component_key], options
               elsif params[:component_class]
                 if params[:component_key]
                   render_component nil, params[:component_class].constantize, params[:component_key], JSON.parse(params[:public_options] || '{}')
-                else 
+                else
                   render html: params[:component_class].constantize.(public_options: JSON.parse(params[:public_options] || '{}'))
                 end
               else
                 if params[:only_page]
                   render_page page, options, false
                 else
-                  render_page page, options, layout
+                  render_page page, options, root_layout
                 end
               end
             end
@@ -66,26 +66,26 @@ module Matestack
             super
           end
         end
-        
-        def render_app(app, page, options, layout)
-          render html: app.new(options) { page.new(options) }.render_content.html_safe, layout: layout
+
+        def render_layout(layout, page, options, root_layout)
+          render html: layout.new(options) { page.new(options) }.render_content.html_safe, layout: root_layout
         end
-        
-        def render_page(page, options, layout)
-          render html: page.new(options).render_content.html_safe, layout: layout
+
+        def render_page(page, options, root_layout)
+          render html: page.new(options).render_content.html_safe, layout: root_layout
         end
-        
-        def render_component(app, page, component_key, options)
-          app ? app.new(options) { page.new(options) } : page.new(options) # create page structure in order to later access registered async components
+
+        def render_component(layout, page, component_key, options)
+          layout ? layout.new(options) { page.new(options) } : page.new(options) # create page structure in order to later access registered async components
           render html: Matestack::Ui::Core::Context.async_components[component_key].render_content.html_safe, layout: false
         end
-        
+
         def setup_context
           Matestack::Ui::Core::Context.params = self.params
           Matestack::Ui::Core::Context.controller = (self.class <= ActionController::Base) ? self : @_controller
         end
-        
+
       end
     end
   end
-end
+end

data/lib/matestack/ui/core/{app.rb → layout.rb}

@@ -1,36 +1,25 @@
 module Matestack
   module Ui
     module Core
-      class App < Base
-        
+      class Layout < Base
+
         def initialize(options = {})
           @controller = Context.controller
-          Context.app = self
+          Context.layout = self
           super(nil, nil, options)
         end
 
-        def component_attributes
-          {
-            is: 'matestack-ui-core-app',
-            'inline-template': true,
-          }
-        end
-
-        def loading_state_element
-        end
-
-
         # layout class method to specify if a rails layout should be used
         def self.inherited(subclass)
           subclass.layout(@layout)
           super
         end
-          
+
         def self.layout(layout = nil)
           @layout = layout ? layout : @layout
         end
-        
+
       end
     end
   end
-end
+end

data/lib/matestack/ui/core/page.rb

@@ -7,56 +7,6 @@ module Matestack
           super(nil, nil, options)
         end
 
-        def create_children
-          self.page do
-            self.response
-          end
-        end
-
-        def page
-          if params[:only_page]
-            div class: 'matestack-page-root' do
-              yield
-            end
-          else
-            Base.new(:component, component_attributes) do
-              div class: 'matestack-page-container', 'v-bind:class': '{ "loading": loading === true }'  do
-                if Matestack::Ui::Core::Context.app.respond_to? :loading_state_element
-                  div class: 'loading-state-element-wrapper', 'v-bind:class': '{ "loading": loading === true }'  do
-                    Matestack::Ui::Core::Context.app.loading_state_element
-                  end
-                end
-                div class: 'matestack-page-wrapper', 'v-bind:class': '{ "loading": loading === true }' do
-                  div 'v-if': 'asyncPageTemplate == null' do
-                    div class: 'matestack-page-root' do
-                      yield
-                    end
-                  end
-                  div 'v-if': 'asyncPageTemplate != null' do
-                    div class: 'matestack-page-root' do
-                      Base.new('v-runtime-template', ':template': 'asyncPageTemplate')
-                    end
-                  end
-                end
-              end
-            end
-          end
-        end
-
-        def component_attributes
-          {
-            is: 'matestack-ui-core-page-content',
-            ref: 'some-id',
-            ':params': params.to_json,
-            ':component-config': {
-              #TODO Remove?!
-              show_on: 'a-event',
-              hide_on: 'test'
-            }.to_json,
-            'inline-template': true
-          }
-        end
-
       end
     end
   end

data/lib/matestack/ui/core/tag_helper.rb

@@ -24,8 +24,12 @@ module Matestack
           end
         end
 
-        def plain(text)
-          Matestack::Ui::Core::Base.new(nil, text, nil)
+        def plain(text=nil, options=nil, &block)
+          if block_given?
+            Matestack::Ui::Core::Base.new(nil, yield, options)
+          else
+            Matestack::Ui::Core::Base.new(nil, text, options)
+          end
         end
 
         def unescape(text)
@@ -33,14 +37,6 @@ module Matestack
         end
         alias unescaped unescape
 
-        def matestack(&block)
-          div(id: 'matestack-ui') do
-            Base.new(:component, component_attributes) do
-              div(class: 'matestack-app-wrapper', &block)
-            end
-          end
-        end
-
         # override image in order to implement automatically using rails assets path
         def img(text = nil, options = {}, &block)
           # if :src attribut given try to replace automatically
@@ -88,6 +84,17 @@ module Matestack
           plain render options
         end
 
+        def detached(text=nil, options=nil, &block)
+          options = {} if options.nil?
+          options[:detach_from_parent] = true
+          Matestack::Ui::Core::Base.new(nil, text, options, &block)
+        end
+
+        def detached_to_s(text=nil, options=nil, &block)
+          detached(text, options, &block).to_str
+        end
+        alias matestack_to_s detached_to_s
+
       end
     end
   end

data/lib/matestack/ui/core/version.rb

@@ -1,7 +1,7 @@
 module Matestack
   module Ui
     module Core
-      VERSION = '2.0.0'
+      VERSION = '3.0.0.rc2'
     end
   end
 end

data/lib/matestack/ui/core.rb

@@ -12,55 +12,12 @@ end
 require "#{base_path}/context"
 require "#{base_path}/properties"
 require "#{base_path}/base"
-require "#{base_path}/vue_attributes"
 require "#{base_path}/component"
 require "#{base_path}/page"
-require "#{base_path}/app"
+require "#{base_path}/layout"
 require "#{base_path}/helper"
 
 # require abbreveations for apps, pages and components
-require "matestack/ui/app"
+require "matestack/ui/layout"
 require "matestack/ui/page"
 require "matestack/ui/component"
-
-# VueJs Components
-vue_js_base_path = 'matestack/ui/vue_js'
-module Matestack
-  module Ui
-    module VueJs
-
-    end
-  end
-end
-
-require "#{vue_js_base_path}/vue"
-require "#{vue_js_base_path}/components/toggle"
-require "#{vue_js_base_path}/components/onclick"
-require "#{vue_js_base_path}/components/transition"
-require "#{vue_js_base_path}/components/async"
-require "#{vue_js_base_path}/components/action"
-require "#{vue_js_base_path}/components/cable"
-require "#{vue_js_base_path}/components/isolated"
-require "#{vue_js_base_path}/components/form/context"
-require "#{vue_js_base_path}/components/form/base"
-require "#{vue_js_base_path}/components/form/form"
-require "#{vue_js_base_path}/components/form/input"
-require "#{vue_js_base_path}/components/form/textarea"
-require "#{vue_js_base_path}/components/form/checkbox"
-require "#{vue_js_base_path}/components/form/radio"
-require "#{vue_js_base_path}/components/form/select"
-require "#{vue_js_base_path}/components/collection/helper"
-require "#{vue_js_base_path}/components/collection/content"
-require "#{vue_js_base_path}/components/collection/filter"
-require "#{vue_js_base_path}/components/collection/filter_reset"
-require "#{vue_js_base_path}/components/collection/next"
-require "#{vue_js_base_path}/components/collection/order"
-require "#{vue_js_base_path}/components/collection/order_toggle"
-require "#{vue_js_base_path}/components/collection/order_toggle_indicator"
-require "#{vue_js_base_path}/components/collection/page"
-require "#{vue_js_base_path}/components/collection/previous"
-require "#{vue_js_base_path}/components"
-require "#{vue_js_base_path}/initialize"
-
-# require abbreveations for apps, pages and components
-require "matestack/ui/vue_js_component"

data/lib/matestack/ui/layout.rb

@@ -0,0 +1 @@
+Matestack::Ui::Layout = Matestack::Ui::Core::Layout

data/lib/matestack/ui/page.rb

@@ -1 +1 @@
-Matestack::Ui::Page = Matestack::Ui::Core::Page
+Matestack::Ui::Page = Matestack::Ui::Core::Page

metadata

@@ -1,15 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: matestack-ui-core
 version: !ruby/object:Gem::Version
-  version: 2.0.0
+  version: 3.0.0.rc2
 platform: ruby
 authors:
 - Jonas Jabari
-- Nils Henning
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-04-12 00:00:00.000000000 Z
+date: 2022-02-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -31,7 +30,6 @@ description: Matestack provides a collection of open source gems made for Ruby o
   Rails app.
 email:
 - jonas@matestack.io
-- nils@matestack.io
 executables: []
 extensions: []
 extra_rdoc_files: []
@@ -39,79 +37,20 @@ files:
 - LICENSE
 - README.md
 - Rakefile
-- lib/matestack/ui/app.rb
 - lib/matestack/ui/component.rb
 - lib/matestack/ui/core.rb
-- lib/matestack/ui/core/app.rb
 - lib/matestack/ui/core/base.rb
 - lib/matestack/ui/core/component.rb
 - lib/matestack/ui/core/context.rb
 - lib/matestack/ui/core/helper.rb
+- lib/matestack/ui/core/layout.rb
 - lib/matestack/ui/core/page.rb
 - lib/matestack/ui/core/properties.rb
 - lib/matestack/ui/core/slots.rb
 - lib/matestack/ui/core/tag_helper.rb
 - lib/matestack/ui/core/version.rb
-- lib/matestack/ui/core/vue_attributes.rb
+- lib/matestack/ui/layout.rb
 - lib/matestack/ui/page.rb
-- lib/matestack/ui/vue_js/app/app.js
-- lib/matestack/ui/vue_js/app/location.js
-- lib/matestack/ui/vue_js/app/store.js
-- lib/matestack/ui/vue_js/components.rb
-- lib/matestack/ui/vue_js/components/action.js
-- lib/matestack/ui/vue_js/components/action.rb
-- lib/matestack/ui/vue_js/components/async.js
-- lib/matestack/ui/vue_js/components/async.rb
-- lib/matestack/ui/vue_js/components/cable.js
-- lib/matestack/ui/vue_js/components/cable.rb
-- lib/matestack/ui/vue_js/components/collection/content.js
-- lib/matestack/ui/vue_js/components/collection/content.rb
-- lib/matestack/ui/vue_js/components/collection/filter.js
-- lib/matestack/ui/vue_js/components/collection/filter.rb
-- lib/matestack/ui/vue_js/components/collection/filter_reset.rb
-- lib/matestack/ui/vue_js/components/collection/helper.rb
-- lib/matestack/ui/vue_js/components/collection/next.rb
-- lib/matestack/ui/vue_js/components/collection/order.js
-- lib/matestack/ui/vue_js/components/collection/order.rb
-- lib/matestack/ui/vue_js/components/collection/order_toggle.rb
-- lib/matestack/ui/vue_js/components/collection/order_toggle_indicator.rb
-- lib/matestack/ui/vue_js/components/collection/page.rb
-- lib/matestack/ui/vue_js/components/collection/previous.rb
-- lib/matestack/ui/vue_js/components/form/base.rb
-- lib/matestack/ui/vue_js/components/form/checkbox.js
-- lib/matestack/ui/vue_js/components/form/checkbox.rb
-- lib/matestack/ui/vue_js/components/form/checkbox_mixin.js
-- lib/matestack/ui/vue_js/components/form/context.rb
-- lib/matestack/ui/vue_js/components/form/form.js
-- lib/matestack/ui/vue_js/components/form/form.rb
-- lib/matestack/ui/vue_js/components/form/input.js
-- lib/matestack/ui/vue_js/components/form/input.rb
-- lib/matestack/ui/vue_js/components/form/input_mixin.js
-- lib/matestack/ui/vue_js/components/form/radio.js
-- lib/matestack/ui/vue_js/components/form/radio.rb
-- lib/matestack/ui/vue_js/components/form/radio_mixin.js
-- lib/matestack/ui/vue_js/components/form/select.js
-- lib/matestack/ui/vue_js/components/form/select.rb
-- lib/matestack/ui/vue_js/components/form/select_mixin.js
-- lib/matestack/ui/vue_js/components/form/textarea.js
-- lib/matestack/ui/vue_js/components/form/textarea.rb
-- lib/matestack/ui/vue_js/components/form/textarea_mixin.js
-- lib/matestack/ui/vue_js/components/isolated.js
-- lib/matestack/ui/vue_js/components/isolated.rb
-- lib/matestack/ui/vue_js/components/mixin.js
-- lib/matestack/ui/vue_js/components/onclick.js
-- lib/matestack/ui/vue_js/components/onclick.rb
-- lib/matestack/ui/vue_js/components/toggle.js
-- lib/matestack/ui/vue_js/components/toggle.rb
-- lib/matestack/ui/vue_js/components/transition.js
-- lib/matestack/ui/vue_js/components/transition.rb
-- lib/matestack/ui/vue_js/event_hub.js
-- lib/matestack/ui/vue_js/helpers/query_params_helper.js
-- lib/matestack/ui/vue_js/index.js
-- lib/matestack/ui/vue_js/initialize.rb
-- lib/matestack/ui/vue_js/page/content.js
-- lib/matestack/ui/vue_js/vue.rb
-- lib/matestack/ui/vue_js_component.rb
 homepage: https://matestack.io
 licenses:
 - MIT
@@ -128,11 +67,11 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
-rubygems_version: 3.1.2
+rubygems_version: 3.1.4
 signing_key: 
 specification_version: 4
 summary: Escape the frontend hustle & easily create interactive web apps in pure Ruby.

data/lib/matestack/ui/app.rb

@@ -1 +0,0 @@
-Matestack::Ui::App = Matestack::Ui::Core::App

data/lib/matestack/ui/core/vue_attributes.rb

@@ -1,13 +0,0 @@
-module Matestack
-  module Ui
-    module Core
-      class VueAttributes
-
-        def self.method_missing(message, *args, &block)
-          return "{{ #{message} }}"
-        end
-        
-      end
-    end
-  end
-end

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

@@ -1,40 +0,0 @@
-import Vue from 'vue/dist/vue.esm'
-import VRuntimeTemplate from "v-runtime-template"
-import Vuex from 'vuex'
-
-import isNavigatingToAnotherPage from "./location"
-import matestackEventHub from '../event_hub'
-
-const componentDef = {
-  props: ['appConfig', 'params'],
-  data: function(){
-    return {}
-  },
-  computed: Vuex.mapState({
-    asyncTemplate: state => state.pageTemplate,
-    currentPathName: state => state.currentPathName,
-    currentSearch: state => state.currentSearch,
-    currentOrigin: state => state.currentOrigin,
-  }),
-  mounted: function(){
-    const self = this;
-    window.addEventListener("popstate", (event) => {
-      if (isNavigatingToAnotherPage({
-          origin: self.currentOrigin,
-          pathName: self.currentPathName,
-          search: self.currentSearch
-        }, document.location)){
-          matestackEventHub.$emit("page_loading_triggered", document.location.pathname + document.location.search);
-          this.$store.commit('setPageLoading', true);
-          self.$store.dispatch("navigateTo", { url: document.location.pathname + document.location.search, backwards: true } );
-      }
-    })
-  },
-  components: {
-    VRuntimeTemplate: VRuntimeTemplate
-  }
-}
-
-let component = Vue.component('matestack-ui-core-app', componentDef)
-
-export default componentDef

data/lib/matestack/ui/vue_js/app/location.js

@@ -1,9 +0,0 @@
-const isNavigatingToAnotherPage = function(currentLocation, targetLocation) {
-
-  // omits hash by design
-  return currentLocation.pathName !== targetLocation.pathname ||
-    currentLocation.origin !== targetLocation.origin ||
-    currentLocation.search !== targetLocation.search
-}
-
-export default isNavigatingToAnotherPage

data/lib/matestack/ui/vue_js/app/store.js

@@ -1,103 +0,0 @@
-import Vue from 'vue/dist/vue.esm'
-import Vuex from 'vuex'
-import axios from 'axios'
-import matestackEventHub from '../event_hub'
-
-Vue.use(Vuex)
-
-const store = new Vuex.Store({
-  state: {
-    pageTemplate: null,
-    pageLoading: false,
-    currentPathName: document.location.pathname,
-    currentSearch: document.location.search,
-    currentOrigin: document.location.origin
-  },
-  mutations: {
-    setPageTemplate (state, serverResponse){
-      state.pageTemplate = serverResponse
-    },
-    setPageLoading (state, boolean){
-      state.pageLoading = boolean
-    },
-    setCurrentLocation (state, current){
-      state.currentPathName = current.path
-      state.currentSearch = current.search
-      state.currentOrigin = current.origin
-    },
-    resetPageTemplate (state) {
-      state.pageTemplate = null;
-    },
-    pageScrollTop (state) {
-      //https://stackoverflow.com/a/35940276/13886137
-      const getScrollParent = function(node) {
-        if (node == null) {
-          return null
-        }
-        if (node.scrollHeight > node.clientHeight) {
-          return node
-        } else {
-          return getScrollParent(node.parentNode)
-        }
-      }
-      var scrollParent = getScrollParent(document.getElementsByClassName("matestack-page-root")[0])
-      if(scrollParent){
-        scrollParent.scrollTop = 0;
-      }
-      // getScrollParent(document.getElementsByClassName("matestack-page-root")[0]).scrollTop = 0
-    }
-  },
-  actions: {
-    navigateTo ({ commit, state }, { url, backwards }) {
-      const self = this
-      commit('setPageLoading', true)
-      matestackEventHub.$emit("page_loading", url);
-      if (typeof matestackUiCoreTransitionStart !== 'undefined') {
-        matestackUiCoreTransitionStart(url);
-      }
-      if (!window.history.pushState) {
-        document.location.href = url;
-        return;
-      }
-      return new Promise((resolve, reject) => {
-        axios({
-          method: "get",
-          url: url,
-          headers: {
-            'X-CSRF-Token': document.getElementsByName("csrf-token")[0].getAttribute('content')
-          },
-          params: {"only_page": true}
-        })
-        .then(function(response){
-          if (backwards){
-            window.history.replaceState({matestackApp: true, url: url}, null, url);
-          } else {
-            window.history.pushState({matestackApp: true, url: url}, null, url);
-          }
-          setTimeout(function () {
-            resolve(response["data"]);
-            commit('setPageTemplate', response["data"])
-            commit('setCurrentLocation', { path: url.split("?")[0], search: document.location.search, origin: document.location.origin })
-            commit('setPageLoading', false)
-            commit('pageScrollTop')
-            matestackEventHub.$emit("page_loaded", url);
-            if (typeof matestackUiCoreTransitionSuccess !== 'undefined') {
-              matestackUiCoreTransitionSuccess(url);
-            }
-          }, 5);
-        })
-        .catch(function(error){
-          setTimeout(function () {
-            resolve(error)
-            matestackEventHub.$emit("page_loading_error", error);
-            if (typeof matestackUiCoreTransitionError !== 'undefined') {
-              matestackUiCoreTransitionError(url);
-            }
-          }, 5);
-        })
-      })
-    }
-  }
-})
-
-export default store