matestack-ui-core 1.3.1 → 2.1.0

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

@@ -0,0 +1,15 @@
+module Matestack
+  module Ui
+    module Core
+      module Slots
+
+        attr_accessor :slots
+
+        def slot(key, *args)
+          slots[key].call(*args)
+        end
+
+      end
+    end
+  end
+end

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

@@ -0,0 +1,94 @@
+require_relative 'slots'
+module Matestack
+  module Ui
+    module Core
+      module TagHelper
+        extend Gem::Deprecate
+        include Slots
+
+        # can't take content or a block
+        VOID_TAGS = %i[area base br col hr img input link meta param command keygen source]
+
+        TAGS = [:a, :abbr, :acronym, :address, :applet, :area, :article, :aside, :audio, :b, :base, :basefont, :bdi, :bdo, :big, :blockquote, :body, :br, :button, :canvas, :caption, :center, :cite, :code, :col, :colgroup, :data, :datalist, :dd, :del, :details, :dfn, :dialog, :dir, :div, :dl, :dt, :em, :embed, :fieldset, :figcaption, :figure, :font, :footer, :form, :frame, :frameset, :h1, :h2, :h3, :h4, :h5, :h6, :head, :header, :hr, :html, :i, :iframe, :img, :input, :ins, :kbd, :label, :legend, :li, :link, :main, :map, :mark, :meta, :meter, :nav, :noframes, :noscript, :object, :ol, :optgroup, :option, :output, :paragraph, :param, :picture, :pre, :progress, :q, :rp, :rt, :ruby, :s, :samp, :script, :section, :select, :small, :source, :span, :strike, :strong, :style, :sub, :summary, :sup, :svg, :table, :tbody, :td, :template, :textarea, :tfoot, :th, :thead, :time, :title, :tr, :track, :tt, :u, :ul, :var, :video, :wbr]
+
+        VOID_TAGS.each do |tag|
+          define_method tag do |options = {}|
+            Matestack::Ui::Core::Base.new(tag, nil, options)
+          end
+        end
+
+        TAGS.each do |tag|
+          define_method tag do |text = nil, options = {}, &block|
+            tag = :p if tag == :paragraph
+            Matestack::Ui::Core::Base.new(tag, text, options, &block)
+          end
+        end
+
+        def plain(text)
+          Matestack::Ui::Core::Base.new(nil, text, nil)
+        end
+
+        def unescape(text)
+          Matestack::Ui::Core::Base.new(nil, text&.html_safe, escape: false)
+        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
+          if src = text.delete(:path)
+            text[:src] = ActionController::Base.helpers.asset_path(src)
+          end
+          Matestack::Ui::Core::Base.new(:img, text, options, &block)
+        end
+
+        def a(text = nil, options = {}, &block)
+          # if :path attribut given rename to href
+          if text.is_a?(Hash)
+            text[:href] = text.delete(:path) if text[:href].nil?
+          else
+            options[:href] = options.delete(:path) if options[:href].nil?
+          end
+          Matestack::Ui::Core::Base.new(:a, text, options, &block)
+        end
+
+        # support old heading component
+        def heading(text = nil, options=nil, &block)
+          if text.is_a?(Hash)
+            options = text
+          end
+
+          case options[:size]
+          when 1
+            h1(text, options, &block)
+          when 2
+            h2(text, options, &block)
+          when 3
+            h3(text, options, &block)
+          when 4
+            h4(text, options, &block)
+          when 5
+            h5(text, options, &block)
+          when 6
+            h6(text, options, &block)
+          else
+            h1(text, options, &block)
+          end
+        end
+
+        def rails_render(options = {})
+          plain render options
+        end
+
+      end
+    end
+  end
+end

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

@@ -1,7 +1,7 @@
 module Matestack
   module Ui
     module Core
-      VERSION = '1.3.1'
+      VERSION = '2.1.0'
     end
   end
 end

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

@@ -0,0 +1,13 @@
+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/page.rb

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

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

@@ -1,8 +1,9 @@
 import Vue from 'vue/dist/vue.esm'
 import VRuntimeTemplate from "v-runtime-template"
 import Vuex from 'vuex'
+
 import isNavigatingToAnotherPage from "./location"
-import matestackEventHub from '../js/event-hub'
+import matestackEventHub from '../event_hub'
 
 const componentDef = {
   props: ['appConfig', 'params'],
@@ -34,8 +35,6 @@ const componentDef = {
   }
 }
 
-
-
 let component = Vue.component('matestack-ui-core-app', componentDef)
 
 export default componentDef

data/{app/concepts/matestack/ui/core → lib/matestack/ui/vue_js}/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 '../event_hub'
 
 Vue.use(Vuex)
 

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

@@ -0,0 +1,111 @@
+module Matestack
+  module Ui
+    module VueJs
+      module Components
+
+          def toggle(text=nil, options=nil, &block)
+             Matestack::Ui::VueJs::Components::Toggle.(text, options, &block)
+          end
+
+          def onclick(text=nil, options=nil, &block)
+             Matestack::Ui::VueJs::Components::Onclick.(text, options, &block)
+          end
+
+          def transition(text=nil, options=nil, &block)
+             Matestack::Ui::VueJs::Components::Transition.(text, options, &block)
+          end
+
+          def async(text=nil, options=nil, &block)
+             Matestack::Ui::VueJs::Components::Async.(text, options, &block)
+          end
+
+          def action(text=nil, options=nil, &block)
+             Matestack::Ui::VueJs::Components::Action.(text, options, &block)
+          end
+
+          def cable(text=nil, options=nil, &block)
+             Matestack::Ui::VueJs::Components::Cable.(text, options, &block)
+          end
+
+          def matestack_form(text=nil, options=nil, &block)
+             Matestack::Ui::VueJs::Components::Form::Form.(text, options, &block)
+          end
+
+          def form_fields_for(text=nil, options=nil, &block)
+            # in order to provide a more intuitiv API while calling the default
+            # form, we transform the arguments a bit:
+            options[:for] = text
+            options[:fields_for] = options.delete(:key)
+            text = nil
+            Matestack::Ui::VueJs::Components::Form::Form.(text, options, &block)
+          end
+
+          def form_fields_for_remove_item(text=nil, options=nil, &block)
+             Matestack::Ui::VueJs::Components::Form::FieldsForRemoveItem.(text, options, &block)
+          end
+
+          def form_fields_for_add_item(text=nil, options=nil, &block)
+             Matestack::Ui::VueJs::Components::Form::FieldsForAddItem.(text, options, &block)
+          end
+
+          def form_input(text=nil, options=nil, &block)
+             Matestack::Ui::VueJs::Components::Form::Input.(text, options, &block)
+          end
+
+          def form_textarea(text=nil, options=nil, &block)
+             Matestack::Ui::VueJs::Components::Form::Textarea.(text, options, &block)
+          end
+
+          def form_checkbox(text=nil, options=nil, &block)
+             Matestack::Ui::VueJs::Components::Form::Checkbox.(text, options, &block)
+          end
+
+          def form_radio(text=nil, options=nil, &block)
+             Matestack::Ui::VueJs::Components::Form::Radio.(text, options, &block)
+          end
+
+          def form_select(text=nil, options=nil, &block)
+             Matestack::Ui::VueJs::Components::Form::Select.(text, options, &block)
+          end
+
+          def collection_content(text=nil, options=nil, &block)
+             Matestack::Ui::VueJs::Components::Collection::Content.(text, options, &block)
+          end
+
+          def collection_filter(text=nil, options=nil, &block)
+             Matestack::Ui::VueJs::Components::Collection::Filter.(text, options, &block)
+          end
+
+          def collection_filter_reset(text=nil, options=nil, &block)
+             Matestack::Ui::VueJs::Components::Collection::FilterReset.(text, options, &block)
+          end
+
+          def collection_order(text=nil, options=nil, &block)
+             Matestack::Ui::VueJs::Components::Collection::Order.(text, options, &block)
+          end
+
+          def collection_order_toggle(text=nil, options=nil, &block)
+             Matestack::Ui::VueJs::Components::Collection::OrderToggle.(text, options, &block)
+          end
+
+          def collection_order_toggle_indicator(text=nil, options=nil, &block)
+             Matestack::Ui::VueJs::Components::Collection::OrderToggleIndicator.(text, options, &block)
+          end
+
+          def collection_content_next(text=nil, options=nil, &block)
+             Matestack::Ui::VueJs::Components::Collection::Next.(text, options, &block)
+          end
+
+          def collection_content_previous(text=nil, options=nil, &block)
+             Matestack::Ui::VueJs::Components::Collection::Previous.(text, options, &block)
+          end
+
+          def collection_content_page_link(text=nil, options=nil, &block)
+             Matestack::Ui::VueJs::Components::Collection::Page.(text, options, &block)
+          end
+
+
+      end
+    end
+  end
+end

data/lib/matestack/ui/vue_js/components/action.js

@@ -0,0 +1,151 @@
+import Vue from 'vue/dist/vue.esm'
+import Vuex from 'vuex'
+import axios from 'axios'
+import matestackEventHub from '../event_hub'
+import componentMixin from './mixin'
+
+const componentDef = {
+  mixins: [componentMixin],
+  data: function(){
+    return {}
+  },
+  methods: {
+    perform: function(){
+      const self = this
+      if (
+        (self.props["confirm"] == undefined) || confirm(self.props["confirm_text"])
+      )
+      {
+        if (self.props["emit"] != undefined) {
+          matestackEventHub.$emit(self.props["emit"]);
+        }
+        if (self.props["delay"] != undefined) {
+          setTimeout(function () {
+            self.sendRequest()
+          }, parseInt(self.props["delay"]));
+        } else {
+          this.sendRequest()
+        }
+      }
+    },
+    sendRequest: function(){
+      const self = this
+      axios({
+          method: self.props["method"],
+          url: self.props["action_path"],
+          data: self.props["data"],
+          headers: {
+            'X-CSRF-Token': document.getElementsByName("csrf-token")[0].getAttribute('content')
+          }
+        }
+      )
+      .then(function(response){
+        if (self.props["success"] != undefined && self.props["success"]["emit"] != undefined) {
+          matestackEventHub.$emit(self.props["success"]["emit"], response.data);
+        }
+
+        // transition handling
+        if (self.props["success"] != undefined
+          && self.props["success"]["transition"] != undefined
+          && (
+            self.props["success"]["transition"]["follow_response"] == undefined
+            ||
+            self.props["success"]["transition"]["follow_response"] === false
+          )
+          && self.$store != undefined
+        ) {
+          let path = self.props["success"]["transition"]["path"]
+          self.$store.dispatch('navigateTo', {url: path, backwards: false})
+          return;
+        }
+        if (self.props["success"] != undefined
+          && self.props["success"]["transition"] != undefined
+          && self.props["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;
+        }
+        // redirect handling
+        if (self.props["success"] != undefined
+          && self.props["success"]["redirect"] != undefined
+          && (
+            self.props["success"]["redirect"]["follow_response"] == undefined
+            ||
+            self.props["success"]["redirect"]["follow_response"] === false
+          )
+          && self.$store != undefined
+        ) {
+          let path = self.props["success"]["redirect"]["path"]
+          window.location.href = path
+          return;
+        }
+        if (self.props["success"] != undefined
+          && self.props["success"]["redirect"] != undefined
+          && self.props["success"]["redirect"]["follow_response"] === true
+          && self.$store != undefined
+        ) {
+          let path = response.data["redirect_to"] || response.request.responseURL
+          window.location.href = path
+          return;
+        }
+      })
+      .catch(function(error){
+        if (self.props["failure"] != undefined && self.props["failure"]["emit"] != undefined) {
+          matestackEventHub.$emit(self.props["failure"]["emit"], error.response.data);
+        }
+        // transition handling
+        if (self.props["failure"] != undefined
+          && self.props["failure"]["transition"] != undefined
+          && (
+            self.props["failure"]["transition"]["follow_response"] == undefined
+            ||
+            self.props["failure"]["transition"]["follow_response"] === false
+          )
+          && self.$store != undefined
+        ) {
+          let path = self.props["failure"]["transition"]["path"]
+          self.$store.dispatch('navigateTo', {url: path, backwards: false})
+          return;
+        }
+        if (self.props["failure"] != undefined
+          && self.props["failure"]["transition"] != undefined
+          && self.props["failure"]["transition"]["follow_response"] === true
+          && self.$store != undefined
+        ) {
+          let path = error.response.data["transition_to"] || response.request.responseURL
+          self.$store.dispatch('navigateTo', {url: path, backwards: false})
+          return;
+        }
+        // redirect handling
+        if (self.props["failure"] != undefined
+          && self.props["failure"]["redirect"] != undefined
+          && (
+            self.props["failure"]["redirect"]["follow_response"] == undefined
+            ||
+            self.props["failure"]["redirect"]["follow_response"] === false
+          )
+          && self.$store != undefined
+        ) {
+          let path = self.props["failure"]["redirect"]["path"]
+          window.location.href = path
+          return;
+        }
+        if (self.props["failure"] != undefined
+          && self.props["failure"]["redirect"] != undefined
+          && self.props["failure"]["redirect"]["follow_response"] === true
+          && self.$store != undefined
+        ) {
+          let path = error.response.data["redirect_to"] || response.request.responseURL
+          window.location.href = path
+          return;
+        }
+      })
+    }
+  }
+}
+
+let component = Vue.component('matestack-ui-core-action', componentDef)
+
+export default componentDef

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

@@ -0,0 +1,46 @@
+module Matestack
+  module Ui
+    module VueJs
+      module Components
+        class Action < Matestack::Ui::VueJs::Vue
+          vue_name 'matestack-ui-core-action'
+
+          optional :path, :success, :failure, :notify, :confirm, :confirm_text, :data, :delay, :emit
+
+          def response
+            a attributes do
+              yield
+            end
+          end
+
+          def attributes
+            {
+              href: ctx.path,
+              '@click.prevent': 'perform',
+            }.merge(options)
+          end
+
+          def vue_props
+            {}.tap do |conf|
+              conf[:action_path] = ctx.path
+              conf[:method] = action_method
+              conf[:success] = ctx.success
+              conf[:failure] = ctx.failure
+              conf[:notify] = true if ctx.notify.nil?
+              conf[:confirm] = ctx.confirm
+              conf[:confirm_text] = ctx.confirm.try(:[], :text) || 'Are you sure?'
+              conf[:data] = ctx.data
+              conf[:delay] = ctx.delay
+              conf[:emit] = ctx.emit
+            end
+          end
+
+          def action_method
+            @action_method ||= options.delete(:method)
+          end
+
+        end
+      end
+    end
+  end
+end