matestack-ui-vuejs 3.0.0.rc1

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': 'vc.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/lib/matestack/ui/vue_js/components/transition.js

@@ -0,0 +1,44 @@
+import matestackEventHub from '../event_hub'
+import componentMixin from './mixin'
+import componentHelpers from './helpers'
+
+const componentDef = {
+  mixins: [componentMixin],
+  template: componentHelpers.inlineTemplate,
+  data: function(){
+    return {}
+  },
+  inject: [
+    'appNavigateTo',
+    'currentPathName',
+    'setPageLoading',
+    'pageLoading'
+  ],
+  computed: {
+    isActive () {
+      return (this.props["link_path"].split("?")[0]) === this.currentPathName
+    },
+    isChildActive () {
+      return ((this.props["link_path"].split("?")[0]) !== this.currentPathName) && (this.currentPathName.indexOf(this.props["link_path"].split("?")[0]) !== -1)
+    }
+  },
+  methods: {
+    navigateTo: function(url){
+      const self = this
+      matestackEventHub.$emit("page_loading_triggered", url);
+      this.setPageLoading(true)
+      if (self.props["delay"] != undefined) {
+        setTimeout(function () {
+          self.performNavigation(url)
+        }, parseInt(self.props["delay"]));
+      } else {
+        this.performNavigation(url)
+      }
+    },
+    performNavigation: function(url){
+      this.appNavigateTo({url: url, backwards: false})
+    }
+  }
+}
+
+export default componentDef

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,
+              'v-on:click.prevent': "vc.navigateTo(\"#{ctx.path}\")",
+              "v-bind:class": "{ active: vc.isActive, 'active-child': vc.isChildActive }"
+            })
+          end
+
+          def vue_props
+            {
+              link_path: ctx.path,
+              delay: ctx.delay,
+            }
+          end
+
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,100 @@
+import matestackEventHub from '../event_hub'
+
+const transitionHandlingMixin = {
+  methods: {
+    successTransitionHandling: function(response){
+      const self = this
+      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.appNavigateTo != undefined
+      ) {
+        let path = self.props["success"]["transition"]["path"]
+        self.appNavigateTo({url: path, backwards: false})
+        return;
+      }
+      if (self.props["success"] != undefined
+        && self.props["success"]["transition"] != undefined
+        && self.props["success"]["transition"]["follow_response"] === true
+        && self.appNavigateTo != undefined
+      ) {
+        let path = response.data["transition_to"] || response.request.responseURL
+        self.appNavigateTo({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
+        )
+      ) {
+        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
+      ) {
+        let path = response.data["redirect_to"] || response.request.responseURL
+        window.location.href = path
+        return;
+      }
+    },
+    failureTransitionHandling: function(error){
+      const self = this
+      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.appNavigateTo != undefined
+      ) {
+        let path = self.props["failure"]["transition"]["path"]
+        self.appNavigateTo({url: path, backwards: false})
+        return;
+      }
+      if (self.props["failure"] != undefined
+        && self.props["failure"]["transition"] != undefined
+        && self.props["failure"]["transition"]["follow_response"] === true
+        && self.appNavigateTo != undefined
+      ) {
+        let path = error.response.data["transition_to"] || response.request.responseURL
+        self.appNavigateTo({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
+        )
+      ) {
+        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
+      ) {
+        let path = error.response.data["redirect_to"] || response.request.responseURL
+        window.location.href = path
+        return;
+      }
+    }
+  }
+}
+
+export default transitionHandlingMixin

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

@@ -0,0 +1,118 @@
+module Matestack
+  module Ui
+    module VueJs
+      module Components
+
+          def matestack_vue_js_app(text=nil, options=nil, &block)
+             Matestack::Ui::VueJs::Components::App.(text, options, &block)
+          end
+
+          def page_switch(text=nil, options=nil, &block)
+             Matestack::Ui::VueJs::Components::PageSwitch.(text, options, &block)
+          end
+
+          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::NestedForm.(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/event_hub.js

@@ -0,0 +1,12 @@
+import mitt from 'mitt'
+
+const emitter = mitt()
+
+const eventHub = {
+  $on: (...args) => emitter.on(...args),
+  $once: (...args) => emitter.once(...args),
+  $off: (...args) => emitter.off(...args),
+  $emit: (...args) => emitter.emit(...args)
+}
+
+export default eventHub

data/lib/matestack/ui/vue_js/helpers/query_params_helper.js

@@ -0,0 +1,56 @@
+const updateQueryParams = (key, value, url) => {
+    if (!url) url = window.location.href;
+    let re = new RegExp(`([?&])${key}=.*?(&|#|$)(.*)`, "gi"), hash;
+
+    if (re.test(url)) {
+        if (typeof value !== 'undefined' && value !== null)
+            return url.replace(re, `$1${key}=${value}$2$3`);
+        else {
+            hash = url.split('#');
+            url = hash[0].replace(re, '$1$3').replace(/(&|\?)$/, '');
+            if (typeof hash[1] !== 'undefined' && hash[1] !== null)
+                url += `#${hash[1]}`;
+            return url;
+        }
+    }
+    else {
+        if (typeof value !== 'undefined' && value !== null) {
+            const separator = url.indexOf('?') !== -1 ? '&' : '?';
+            hash = url.split('#');
+            url = `${hash[0]}${separator}${key}=${value}`;
+            if (typeof hash[1] !== 'undefined' && hash[1] !== null)
+                url += `#${hash[1]}`;
+            return url;
+        }
+        else
+            return url;
+    }
+};
+
+const getQueryParam = (name, url) => {
+    if (!url) url = window.location.href;
+    name = name.replace(/[\[\]]/g, '\\$&');
+    const regex = new RegExp(`[?&]${name}(=([^&#]*)|&|#|$)`), results = regex.exec(url);
+    if (!results) return null;
+    if (!results[2]) return '';
+    return decodeURIComponent(results[2].replace(/\+/g, ' '));
+};
+
+const queryParamsToObject = () => {
+  const search = window.location.search.substring(1);
+  if(search.length === 0){
+    return {}
+  } else {
+    const result = JSON.parse(
+      `{"${search.replace(/&/g, '","').replace(/=/g,'":"')}"}`,
+      (key, value) => { return key===""?value:decodeURIComponent(value) }
+    );
+    return result;
+  }
+};
+
+export default {
+  updateQueryParams: updateQueryParams,
+  getQueryParam: getQueryParam,
+  queryParamsToObject: queryParamsToObject
+}

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

@@ -0,0 +1,94 @@
+import Vue from 'vue'
+
+import eventHub from './event_hub'
+const matestackEventHub = eventHub // for compatibility with 1.x
+
+import componentMixin from './components/mixin'
+import componentHelpers from './components/helpers'
+
+import app from './components/app'
+
+import pageSwitch from './components/page_switch'
+
+import runtimeRender from './components/runtime_render'
+
+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 nestedForm from './components/form/nested_form'
+import fieldsForAddItem from './components/form/fields_for_add_item'
+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 registerComponents = function(appInstance){
+  appInstance.config.compilerOptions.whitespace = "preserve"
+  appInstance.config.compilerOptions.isCustomElement = tag => tag === 'matestack-component-template'
+  appInstance.config.unwrapInjectedRef = true
+
+  appInstance.component('matestack-ui-core-runtime-render', runtimeRender)
+
+  appInstance.component('matestack-ui-core-app', app)
+  appInstance.component('matestack-ui-core-page-switch', pageSwitch)
+  appInstance.component('matestack-ui-core-collection-content', collectionContent)
+  appInstance.component('matestack-ui-core-collection-filter', collectionFilter)
+  appInstance.component('matestack-ui-core-collection-order', collectionOrder)
+  appInstance.component('matestack-ui-core-toggle', toggle)
+  appInstance.component('matestack-ui-core-onclick', onclick)
+  appInstance.component('matestack-ui-core-transition', transition)
+  appInstance.component('matestack-ui-core-async', async)
+  appInstance.component('matestack-ui-core-action', action)
+  appInstance.component('matestack-ui-core-cable', cable)
+  appInstance.component('matestack-ui-core-isolate', isolate)
+  appInstance.component('matestack-ui-core-form', form)
+  appInstance.component('matestack-ui-core-form-checkbox', formCheckbox)
+  appInstance.component('matestack-ui-core-form-input', formInput)
+  appInstance.component('matestack-ui-core-form-radio', formRadio)
+  appInstance.component('matestack-ui-core-form-select', formSelect)
+  appInstance.component('matestack-ui-core-form-textarea', formTextarea)
+  appInstance.component('matestack-ui-core-form-nested-form', nestedForm)
+  appInstance.component('matestack-ui-core-form-fields-for-add-item', fieldsForAddItem)
+
+  return appInstance
+}
+
+const mount = function(appInstance, elementId='#matestack-ui'){
+  registerComponents(appInstance)
+
+  appInstance.mount(elementId)
+
+  return appInstance
+}
+
+const MatestackUiVueJs = {
+  eventHub,
+  matestackEventHub, // for compatibility with 1.x
+  componentMixin,
+  componentHelpers,
+  formInputMixin,
+  formSelectMixin,
+  formCheckboxMixin,
+  formTextareaMixin,
+  formRadioMixin,
+  registerComponents,
+  mount
+}
+
+export default MatestackUiVueJs

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

@@ -0,0 +1,10 @@
+class Matestack::Ui::Core::Base
+
+  include Matestack::Ui::VueJs::Components
+
+  # give easy access to vue data attributes
+  def vue
+    Matestack::Ui::VueJs::VueAttributes
+  end
+
+end

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

@@ -0,0 +1,67 @@
+module Matestack
+  module Ui
+    module VueJs
+      module Utils
+
+        def self.included(base)
+          base.extend(ClassMethods)
+        end
+        module ClassMethods
+          def vue_name(name = nil)
+            name ? @vue_name = name : @vue_name
+          end
+
+          def inherited(subclass)
+            subclass.vue_name(self.vue_name)
+            super
+          end
+        end
+
+        def vue_component(&block)
+          Matestack::Ui::Core::Base.new(:component, component_attributes) do
+            Matestack::Ui::Core::Base.new("matestack-component-template", 'id': "uid-#{component_uid}") do
+              yield
+            end
+          end
+        end
+
+        def component_attributes
+          {
+            is: vue_name,
+            ref: component_id,
+            ':params': params.to_json,
+            ':props': base_vue_props.merge(vue_props)&.to_json,
+            'v-slot': "{ vc }"
+          }
+        end
+
+        def component_id
+          options[:id] || nil
+        end
+
+        def component_uid
+          @component_uid ||= SecureRandom.hex
+        end
+
+        def base_vue_props
+          { component_uid: component_uid }
+        end
+
+        def vue_props
+          {} # can be overwritten in sub class
+        end
+        alias :config :vue_props
+
+        def scoped_ref(value)
+          return "#{component_uid}-#{value}" unless value.nil?
+        end
+
+        def vue_name
+          raise "vue_name missing for #{self.class}" unless self.class.vue_name
+          self.class.vue_name
+        end
+
+      end
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+module Matestack
+  module Ui
+    module VueJs
+      VERSION = '3.0.0.rc1'
+    end
+  end
+end

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

@@ -0,0 +1,75 @@
+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) do
+            Matestack::Ui::Core::Base.new("matestack-component-template", 'id': "uid-#{component_uid}") do
+              yield
+            end
+          end
+        end
+
+        def component_attributes
+          {
+            is: vue_name,
+            ref: component_id,
+            ':params': params.to_json,
+            ':props': base_vue_props.merge(vue_props)&.to_json,
+            'v-slot': "{ vc }"
+          }
+        end
+
+        def component_id
+          options[:id] || nil
+        end
+
+        def component_uid
+          @component_uid ||= SecureRandom.hex
+        end
+
+        def base_vue_props
+          { component_uid: component_uid }
+        end
+
+        def vue_props
+          {} # can be overwritten in sub class
+        end
+        alias :config :vue_props
+
+        def scoped_ref(value)
+          return "#{component_uid}-#{value}" unless value.nil?
+        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

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

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