matestack-ui-core 0.7.0 → 0.7.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 99d5baa395a0bbd08fb3dd6ba51de334b3408399aa7bde23057fc1e2c6fd7f8a
-  data.tar.gz: 3cc9af9f8129174ae0628119476dc6c4760ffe49d6edca24478afacb74494818
+  metadata.gz: e645c4e03f7a9cbc1104d1d84b20c108125a384534dc3da249aad457fa7974a7
+  data.tar.gz: c6bb027cd246f3ad8ca3ce317362b9437e09a88fe8fcc7ce61e8c2e2909e0033
 SHA512:
-  metadata.gz: b998a602726e454b65525852bfe72e7c604c18ac4f9f789afbd0c6321c0cc752ad9837cc4b90da71789080bfc1f672d768d3b1240029e0f4c740e8b72edd7dd8
-  data.tar.gz: acf096659352f4eca3c0f7861e291e3cbe022b8a0cb17c5391163057a60941cceef4cf604c9b3dfc26b8553f8475d466959880ed60116ff28a842985728712f0
+  metadata.gz: a13177effcfb1a6d26f7cb920f71a10dee6946c0d7a2c8d3dc09d4c18651c642e62bbf79f7793e4ae9e36cfbcd9ac645e7ab8c7fabea611d27930ae17c7aa628
+  data.tar.gz: 3896719f9b477a9745fd2cec800669dcb8257e21f87f2bc8fd10d7f26ca79610e77caaa04642c571e6a2ded10e64270a2d6f862d9f5a03c74d8a8e2a6bbcdc9d

data/README.md

@@ -1,6 +1,7 @@
-[![CircleCI](https://circleci.com/gh/basemate/matestack-ui-core/tree/master.svg?style=shield)](https://circleci.com/gh/basemate/matestack-ui-core/tree/master)
+![](https://github.com/matestack/matestack-ui-core/workflows/specs/badge.svg)
 [![Gitter](https://badges.gitter.im/basemate/community.svg)](https://gitter.im/basemate/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
 [![Gem Version](https://badge.fury.io/rb/matestack-ui-core.svg)](https://badge.fury.io/rb/matestack-ui-core)
+[![Docs](https://img.shields.io/badge/docs-matestack-blue.svg)](https://www.matestack.org/docs/install)
 
 ![matestack logo](./logo.png)
 
@@ -19,6 +20,17 @@ matestack can progressively replace the classic Rails-View-Layer. You are able t
 it alongside your classic views and incrementally turn your Rails-App into a
 dynamic Web-App.
 
+### Current State: 
+
+We love to see more and more people using and contributing to matestack-ui-core. Our current version is 0.7.4 and it's not perfect yet. We recommend you to start using matestack-ui-core in a side project and report issues as this helps us to push matestack-ui-core towards a production ready 1.0.0. At matestack, we already use matestack-ui-core in production as we know how to handle current issues and bypass them with deep insights of the core implementation. We plan to invest time and money (yes, we're hiring) on following improvements:
+
+* debugging and error handling
+* core refactoring, increased core maintainability and code quality
+* better integration in existing rails apps
+* improved documentation
+* improved dynamic core components (especially form components)
+
+
 ### Installation:
 
 Click here to see how you can add Matestack UI to your existing Rails application: [Installation Guide](./docs/install)
@@ -30,7 +42,7 @@ Click here to see how you can add Matestack UI to your existing Rails applicatio
 class Pages::MyPage < Matestack::Ui::Page
 
   def prepare
-    @technologies = ["Rails", "Vue.js", "Trailblazer", "Rspec", "Capybara"]
+    @technologies = ["Rails", "Vue.js", "Trailblazer", "RSpec", "Capybara"]
   end
 
   def response
@@ -205,7 +217,7 @@ ActionCable.server.broadcast("matestack_ui_core", {
 
 ### Documentation
 
-Documentation can be found [here](./docs)
+Documentation can be found [here](https://www.matestack.org/docs/install)
 
 ### Changelog
 
@@ -213,15 +225,7 @@ Changelog can be found [here](./CHANGELOG.md)
 
 ### Roadmap
 
-Scheduled for 0.7.0:
-- Better naming conventions
-- Webpacker/Yarn Integration
-- Advanced Websockets Integration
-- 1:n Relations in Form components
-- More Form Components (Multi Select Components)
-- Component Based Caching
-- Rails View Integration
-- Dockerized Core Development
+In order to see what we planned to add and release the upcoming months, just have a look at our future [milestones](https://github.com/basemate/matestack-ui-core/milestones) and get in touch via our [chat](https://gitter.im/basemate/community) for feedback! The upcoming issues and feature requests will be added to one of these milestones regarding priority and implementation effort.
 
 ### Community
 

data/Rakefile

@@ -32,3 +32,35 @@ require 'rake/testtask'
 # end
 #
 # task default: :test
+
+task :webpack => 'webpack:build'
+
+namespace :webpack do
+  task :build => ['build:development', 'build:production']
+
+  namespace :build do
+    task :development => 'yarn:install' do
+      Bundler.with_unbundled_env do
+        sh "cd builder && bin/webpack"
+      end
+    end
+    task :production => 'yarn:install' do
+      Bundler.with_unbundled_env do
+        sh "cd builder && bin/rake webpacker:compile"
+      end
+    end
+  end
+
+  task :watch => 'yarn:install' do
+    Bundler.with_unbundled_env do
+      sh "cd builder && bin/webpack --watch"
+    end
+  end
+
+  namespace :yarn do
+    task :install do
+      sh "yarn install && cd builder && yarn install"
+    end
+  end
+end
+

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

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

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

@@ -0,0 +1,12 @@
+module Matestack::Ui::Core::Abbr
+  class Abbr < Matestack::Ui::Core::Component::Static
+    REQUIRED_KEYS = [:title]
+
+    def setup
+      @tag_attributes.merge!({
+        "title": options[:title]
+      })
+    end
+
+  end
+end

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

@@ -2,9 +2,8 @@ import Vue from 'vue/dist/vue.esm'
 import Vuex from 'vuex'
 import axios from 'axios'
 
-import matestackEventHub from 'js/event-hub'
-
-import componentMixin from 'component/component'
+import matestackEventHub from '../js/event-hub'
+import componentMixin from '../component/component'
 
 const componentDef = {
   mixins: [componentMixin],
@@ -14,32 +13,55 @@ const componentDef = {
   methods: {
     perform: function(){
       const self = this
-      axios({
-        method: self.componentConfig["method"],
-        url: self.componentConfig["action_path"],
-        data: self.componentConfig["data"],
-        headers: {
-          'X-CSRF-Token': document.getElementsByName("csrf-token")[0].getAttribute('content')
-        }
-      })
-      .then(function(response){
-        if (self.componentConfig["success"] != undefined && self.componentConfig["success"]["emit"] != undefined) {
-          matestackEventHub.$emit(self.componentConfig["success"]["emit"], response.data);
-        }
-        if (self.componentConfig["success"] != undefined && self.componentConfig["success"]["transition"] != undefined && self.$store != undefined) {
-          let path = self.componentConfig["success"]["transition"]["path"]
-          self.$store.dispatch('navigateTo', {url: path, backwards: false})
-        }
-      })
-      .catch(function(error){
-        if (self.componentConfig["failure"] != undefined && self.componentConfig["failure"]["emit"] != undefined) {
-          matestackEventHub.$emit(self.componentConfig["failure"]["emit"], error.response.data);
-        }
-        if (self.componentConfig["failure"] != undefined && self.componentConfig["failure"]["transition"] != undefined && self.$store != undefined) {
-          let path = self.componentConfig["failure"]["transition"]["path"]
-          self.$store.dispatch('navigateTo', {url: path, backwards: false})
-        }
-      })
+      if (
+        (self.componentConfig["confirm"] == undefined) || confirm(self.componentConfig["confirm_text"])
+      )
+      {
+        axios({
+          method: self.componentConfig["method"],
+          url: self.componentConfig["action_path"],
+          data: self.componentConfig["data"],
+          headers: {
+            'X-CSRF-Token': document.getElementsByName("csrf-token")[0].getAttribute('content')
+          }
+        })
+        .then(function(response){
+          if (self.componentConfig["success"] != undefined && self.componentConfig["success"]["emit"] != undefined) {
+            matestackEventHub.$emit(self.componentConfig["success"]["emit"], response.data);
+          }
+          if (self.componentConfig["success"] != undefined
+            && self.componentConfig["success"]["transition"] != undefined
+            && (
+              self.componentConfig["success"]["transition"]["follow_response"] == undefined
+              ||
+              self.componentConfig["success"]["transition"]["follow_response"] === false
+            )
+            && self.$store != undefined
+          ) {
+            let path = self.componentConfig["success"]["transition"]["path"]
+            self.$store.dispatch('navigateTo', {url: path, backwards: false})
+            return;
+          }
+          if (self.componentConfig["success"] != undefined
+            && self.componentConfig["success"]["transition"] != undefined
+            && self.componentConfig["success"]["transition"]["follow_response"] === true
+            && self.$store != undefined
+          ) {
+            let path = response.data["transition_to"] || response.request.responseURL;
+            self.$store.dispatch('navigateTo', {url: path, backwards: false});
+            return;
+          }
+        })
+        .catch(function(error){
+          if (self.componentConfig["failure"] != undefined && self.componentConfig["failure"]["emit"] != undefined) {
+            matestackEventHub.$emit(self.componentConfig["failure"]["emit"], error.response.data);
+          }
+          if (self.componentConfig["failure"] != undefined && self.componentConfig["failure"]["transition"] != undefined && self.$store != undefined) {
+            let path = self.componentConfig["failure"]["transition"]["path"]
+            self.$store.dispatch('navigateTo', {url: path, backwards: false})
+          }
+        })
+      }
     }
   }
 }

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

@@ -19,6 +19,9 @@ module Matestack::Ui::Core::Action
       if options[:notify].nil?
         @component_config[:notify] = true
       end
+      if @component_config[:confirm] = options[:confirm]
+        @component_config[:confirm_text] = options[:confirm].try(:[], :text) || "Are you sure?"
+      end
     end
 
     def action_path

data/app/concepts/matestack/ui/core/actionview/dynamic.haml

@@ -0,0 +1,6 @@
+%component{dynamic_tag_attributes}
+  %div
+    %div{"v-if": "asyncTemplate == null"}
+      = render_content
+    %div{"v-if": "asyncTemplate != null"}
+      %v-runtime-template{":template":"asyncTemplate"}

data/app/concepts/matestack/ui/core/actionview/dynamic.rb

@@ -0,0 +1,28 @@
+module Matestack::Ui::Core::Actionview
+  class Dynamic < Matestack::Ui::Core::Component::Dynamic
+
+    include ActionView::Helpers::ActiveModelHelper
+    include ActionView::Helpers::ActiveModelInstanceTag
+    include ActionView::Helpers::AssetTagHelper
+    include ActionView::Helpers::AssetUrlHelper
+    include ActionView::Helpers::AtomFeedHelper
+    include ActionView::Helpers::CacheHelper
+    include ActionView::Helpers::CaptureHelper
+    include ActionView::Helpers::CspHelper
+    include ActionView::Helpers::CsrfHelper
+    include ActionView::Helpers::DateHelper
+    include ActionView::Helpers::DebugHelper
+    include ActionView::Helpers::FormHelper
+    include ActionView::Helpers::FormOptionsHelper
+    include ActionView::Helpers::FormTagHelper
+    include ActionView::Helpers::JavaScriptHelper
+    include ActionView::Helpers::NumberHelper
+    include ActionView::Helpers::OutputSafetyHelper
+    include ActionView::Helpers::SanitizeHelper
+    include ActionView::Helpers::TagHelper
+    include ActionView::Helpers::TextHelper
+    include ActionView::Helpers::TranslationHelper
+    include ActionView::Helpers::UrlHelper
+
+  end
+end

data/app/concepts/matestack/ui/core/actionview/static.haml

@@ -0,0 +1 @@
+= render_content

data/app/concepts/matestack/ui/core/actionview/static.rb

@@ -0,0 +1,28 @@
+module Matestack::Ui::Core::Actionview
+  class Static < Matestack::Ui::Core::Component::Static
+
+    include ActionView::Helpers::ActiveModelHelper
+    include ActionView::Helpers::ActiveModelInstanceTag
+    include ActionView::Helpers::AssetTagHelper
+    include ActionView::Helpers::AssetUrlHelper
+    include ActionView::Helpers::AtomFeedHelper
+    include ActionView::Helpers::CacheHelper
+    include ActionView::Helpers::CaptureHelper
+    include ActionView::Helpers::CspHelper
+    include ActionView::Helpers::CsrfHelper
+    include ActionView::Helpers::DateHelper
+    include ActionView::Helpers::DebugHelper
+    include ActionView::Helpers::FormHelper
+    include ActionView::Helpers::FormOptionsHelper
+    include ActionView::Helpers::FormTagHelper
+    include ActionView::Helpers::JavaScriptHelper
+    include ActionView::Helpers::NumberHelper
+    include ActionView::Helpers::OutputSafetyHelper
+    include ActionView::Helpers::SanitizeHelper
+    include ActionView::Helpers::TagHelper
+    include ActionView::Helpers::TextHelper
+    include ActionView::Helpers::TranslationHelper
+    include ActionView::Helpers::UrlHelper
+
+  end
+end

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

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

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

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

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

@@ -1,7 +1,7 @@
 import Vue from 'vue/dist/vue.esm'
-import axios from 'axios'
 import VRuntimeTemplate from "v-runtime-template"
 import Vuex from 'vuex'
+import isNavigatingToAnotherPage from "./location"
 
 const componentDef = {
   props: ['appConfig', 'params'],
@@ -12,9 +12,10 @@ const componentDef = {
     asyncTemplate: state => state.pageTemplate,
   }),
   mounted: function(){
-    const self = this;
-    window.onpopstate = function(event) {
-      self.$store.dispatch("navigateTo", {url: document.location.pathname, backwards: true} );
+    window.onpopstate = (event) => {
+      if (isNavigatingToAnotherPage(document.location, event)) {
+        this.$store.dispatch("navigateTo", {url: document.location.pathname, backwards: true} );
+      };
     }
   },
   components: {
@@ -22,6 +23,8 @@ const componentDef = {
   }
 }
 
+
+
 let component = Vue.component('matestack-ui-core-app', componentDef)
 
 export default componentDef

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

@@ -1,33 +1,9 @@
 module Matestack::Ui::Core::App
   class App < Trailblazer::Cell
-    include ActionView::Helpers::ActiveModelHelper
-    include ActionView::Helpers::ActiveModelInstanceTag
-    include ActionView::Helpers::AssetTagHelper
-    include ActionView::Helpers::AssetUrlHelper
-    include ActionView::Helpers::AtomFeedHelper
-    include ActionView::Helpers::CacheHelper
-    include ActionView::Helpers::CaptureHelper
-    include ActionView::Helpers::CspHelper
-    include ActionView::Helpers::CsrfHelper
-    include ActionView::Helpers::DateHelper
-    include ActionView::Helpers::DebugHelper
-    include ActionView::Helpers::FormHelper
-    include ActionView::Helpers::FormOptionsHelper
-    include ActionView::Helpers::FormTagHelper
-    include ActionView::Helpers::JavaScriptHelper
-    include ActionView::Helpers::NumberHelper
-    include ActionView::Helpers::OutputSafetyHelper
-    include ActionView::Helpers::RecordTagHelper
-    # include ActionView::Helpers::RenderingHelper
-    include ActionView::Helpers::SanitizeHelper
-    include ActionView::Helpers::TagHelper
-    include ActionView::Helpers::TextHelper
-    include ActionView::Helpers::TranslationHelper
-    include ActionView::Helpers::UrlHelper
-    include ::Cell::Haml
+
+    include Matestack::Ui::Core::Cell
     include Matestack::Ui::Core::ApplicationHelper
     include Matestack::Ui::Core::ToCell
-    # include ::Rails.application.routes.url_helpers
 
     view_paths << "#{Matestack::Ui::Core::Engine.root}/app/concepts"
 
@@ -53,7 +29,6 @@ module Matestack::Ui::Core::App
       return ""
     end
 
-
     def initialize(model=nil, options={})
       super
       @nodes = {}
@@ -87,7 +62,7 @@ module Matestack::Ui::Core::App
       @nodes = Matestack::Ui::Core::AppNode.build(self, &block)
 
       @nodes.each do |key, node|
-        @cells[key] = to_cell(key, node["component_name"], node["config"], node["argument"], node["components"], nil)
+        @cells[key] = to_cell(key, node["component_name"], node["config"], node["argument"], node["components"], nil, node["cached_params"])
       end
     end
 

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

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

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

@@ -1,8 +1,7 @@
 import Vue from 'vue/dist/vue.esm'
 import Vuex from 'vuex'
 import axios from 'axios'
-
-import matestackEventHub from 'js/event-hub'
+import matestackEventHub from '../js/event-hub'
 
 Vue.use(Vuex)
 

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

@@ -0,0 +1 @@
+%area{@tag_attributes}

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

@@ -0,0 +1,18 @@
+module Matestack::Ui::Core::Area
+  class Area < Matestack::Ui::Core::Component::Static
+    def setup
+      @tag_attributes.merge!({
+        alt: options[:alt],
+        coords: options[:coords].join(','),
+        download: options[:download],
+        href: options[:href],
+        hreflang: options[:hreflang],
+        media: options[:media],
+        rel: options[:rel],
+        shape: options[:shape],
+        target: options[:target],
+        type: options[:type]
+      })
+    end
+  end
+end