matestack-ui-core 0.7.3 → 0.7.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5c58a7c3107da2943a7443d50e8cf07ba1f379bc58b71a3f97d00700ad87773b
-  data.tar.gz: d76f2c74cd96afad0b6e4071c751c46122a294690e03f6006ec395e84af24637
+  metadata.gz: e645c4e03f7a9cbc1104d1d84b20c108125a384534dc3da249aad457fa7974a7
+  data.tar.gz: c6bb027cd246f3ad8ca3ce317362b9437e09a88fe8fcc7ce61e8c2e2909e0033
 SHA512:
-  metadata.gz: e02c8a827ab68d86343df60902c2c245b9eff1374d3c2f77adbb050472270ad4858c0d9b0b0473dd06315c2f33f089e9237870d7cfe4f977c6e1d65145b4b4fa
-  data.tar.gz: 895b45ac12b0f494e5f40c3b5214884d28fb23657602d3b5c4f6637f6353817fda117898743f280dcfd7376aa508b4ae507cd28da6624e2a78fb77b9034d0542
+  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,9 +20,20 @@ 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](https://www.matestack.org/docs/install)
+Click here to see how you can add Matestack UI to your existing Rails application: [Installation Guide](./docs/install)
 
 ### Features:
 
@@ -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
@@ -213,7 +225,7 @@ Changelog can be found [here](./CHANGELOG.md)
 
 ### Roadmap
 
-We're currently finalizing the roadmap towards to a stable 1.0 release, supposed to happen towards the end of the year! For details make sure to check the [release management project](https://github.com/basemate/matestack-ui-core/projects/2) and get in touch via our [chat](https://gitter.im/basemate/community) for feedback!
+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/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/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,7 +1,7 @@
 module Matestack::Ui::Core::App
   class App < Trailblazer::Cell
 
-    include ::Cell::Haml
+    include Matestack::Ui::Core::Cell
     include Matestack::Ui::Core::ApplicationHelper
     include Matestack::Ui::Core::ToCell
 

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,7 +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/async/async.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 '../js/event-hub'
+import componentMixin from '../component/component'
 
 const componentDef = {
   mixins: [componentMixin],

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
+    REQUIRED_KEYS = [:dir]
+
+    def setup
+      @tag_attributes.merge!({
+        "dir": options[:dir]
+      })
+    end
+  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/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/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],

data/app/concepts/matestack/ui/core/component/anonym-dynamic-component.js

@@ -1,5 +1,5 @@
 import Vue from 'vue/dist/vue.esm'
-import componentMixin from 'component/component'
+import componentMixin from './component'
 
 const componentDef = {
   mixins: [componentMixin]

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

@@ -1,7 +1,7 @@
 import Vue from 'vue/dist/vue.esm'
 import axios from 'axios'
 import VRuntimeTemplate from "v-runtime-template"
-import matestackEventHub from 'js/event-hub'
+import matestackEventHub from '../js/event-hub'
 
 const componentMixin = {
   props: ['componentConfig', 'params'],

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

@@ -1,9 +1,9 @@
 module Matestack::Ui::Core::Component
   class Dynamic < Trailblazer::Cell
-
-    include ::Cell::Haml
+    include Matestack::Ui::Core::Cell
     include Matestack::Ui::Core::ApplicationHelper
     include Matestack::Ui::Core::ToCell
+    include Matestack::Ui::Core::HasViewContext
 
     view_paths << "#{Matestack::Ui::Core::Engine.root}/app/concepts"
     view_paths << "#{::Rails.root}/app/matestack"

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

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

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

@@ -0,0 +1,9 @@
+module Matestack::Ui::Core::Data
+  class Data < Matestack::Ui::Core::Component::Static
+    def setup
+      @tag_attributes.merge!({
+        "value": options[:value] ||= nil
+      })
+    end
+  end
+end

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,9 @@
+module Matestack::Ui::Core::Dialog
+  class Dialog < Matestack::Ui::Core::Component::Static
+    def setup
+      @tag_attributes.merge!({
+        "open": options[:open] ||= nil
+      })
+    end
+  end
+end

data/app/concepts/matestack/ui/core/form/form.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],
@@ -88,6 +87,22 @@ const componentDef = {
       }
       self.data = data;
     },
+    shouldResetFormOnSuccessfulSubmit() {
+      const self = this
+      if (self.componentConfig['success'] != undefined && self.componentConfig['success']['reset'] != undefined) {
+        return self.componentConfig['success']['reset']
+      } else {
+        return self.shouldResetFormOnSuccessfulSubmitByDefault()
+      }
+    },
+    shouldResetFormOnSuccessfulSubmitByDefault() {
+      const self = this
+      if (self.componentConfig["method"] == "put") {
+        return false
+      } else {
+        return true
+      }
+    },
     perform: function(){
       const self = this
       let payload = {}
@@ -126,8 +141,11 @@ const componentDef = {
           self.$store.dispatch('navigateTo', {url: path, backwards: false})
           return;
         }
-        self.setProps(self.data, null);
-        self.initValues()
+        if (self.shouldResetFormOnSuccessfulSubmit())
+        {
+          self.setProps(self.data, null);
+          self.initValues();
+        }
         self.showInlineForm = false;
       })
       .catch(function(error){