matestack-ui-vuejs 3.0.0.rc1 → 3.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c794def649692d36847b14964ae62336f5caef8b6176c54dca0527933f699ef1
-  data.tar.gz: 6e588a4b84523a77133927ea8dd139e21cd8cb4f32fdff7a426613d50cd4d5ef
+  metadata.gz: b8903c4a0b4e9f78dab449dbba0ba30d58a4e5972eda54c994d984db17c92e48
+  data.tar.gz: 4be958ee0af7ca08fd299b45602a7cb1fdc5658a08aa3e143fbcdcbd6de953aa
 SHA512:
-  metadata.gz: fb1e2b903e3a37fe6d99608496d44bf946716ea6562bea64a9a61fd6867b8fe2b380e5732c44a37675d51004bb6f01f4e071a1ea4e410a6750f003b825683d20
-  data.tar.gz: 3a0a48ed03ffbb7241acda5908be725f827d859fa0ff83fc886df7841b9cddb35df4aa4521a6d49ef72bec080b415ba27e3f520b2096fb27ca6fab17c84a18b8
+  metadata.gz: da56aa8dfd8a8bdbd14470aae5f1d41b543fde8b047d18980d989b681267ad635fe1a078d65cde80c9fac4f0db700c086b811dfee7077fc5b76d8eff6295f65e
+  data.tar.gz: 36e841b06b328ef539bb8d54c29baa8d7b0f8b9845e836e12e155240e253e7eb0f40a11a075e72a6dd2195cfe9b6cd0d7659a0379adf5012ec124ca656608d94

data/README.md

@@ -10,6 +10,8 @@
 
 Boost your productivity & easily create reactive web UIs in pure Ruby. Easily extend with pure JavaScript if required. No Opal involved.
 
+**New repo, old git history? This repo was duplicated from `matestack-ui-core` in order to extract Vue.js features into `matestack-ui-vuejs` in Feburary 2022**
+
 ## About
 
 `matestack-ui-vuejs` ships all you need to build **reactive** UIs in **pure Ruby** orchestrating prebuilt Vue.js components with a simple Ruby DSL.

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

@@ -12,7 +12,7 @@ module Matestack
             end
 
             def component_attributes
-              super.merge("matestack-ui-core-ref": "#{form_context.component_uid}-#{component_id}")
+              super.merge("matestack-ui-vuejs-ref": "#{form_context.component_uid}-#{component_id}")
             end
 
             def component_id
@@ -45,7 +45,11 @@ module Matestack
               if ctx.id.present?
                 "'#{ctx.id}'"
               else
-                "'#{key}'+vc.parentNestedFormRuntimeId"
+                if form_context.is_nested_form?
+                  "'#{key}'+vc.parentNestedFormRuntimeId"
+                else
+                  "'#{key}'"
+                end
               end
             end
 
@@ -61,7 +65,7 @@ module Matestack
 
             def attributes
               (options || {}).merge({
-                "matestack-ui-core-ref": scoped_ref("input.#{attribute_key}"),
+                "matestack-ui-vuejs-ref": matestack_ui_vuejs_ref("input.#{attribute_key}"),
                 ":id": id,
                 type: ctx.type,
                 multiple: ctx.multiple,

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

@@ -47,7 +47,7 @@ module Matestack
                 type: :checkbox,
                 name: item_label(item),
                 "#{value_key(item)}": item_value(item),
-                "matestack-ui-core-ref": scoped_ref("select.multiple.#{key}"),
+                "matestack-ui-vuejs-ref": matestack_ui_vuejs_ref("select.multiple.#{key}"),
                 'v-on:change': change_event,
                 'init-value': (init_value || []).to_json,
                 'v-bind:class': "{ '#{error_class}': #{error_key} }",

data/lib/matestack/ui/vue_js/components/form/fields_for_add_item.js

@@ -14,12 +14,20 @@ const componentDef = {
   ],
   methods: {
     addItem: function(key){
-      var templateString = JSON.parse(this.getElement().querySelector('#prototype-template-for-'+key).dataset[":template"])
-      var tmp_dom_elem = document.createElement('div')
-      tmp_dom_elem.innerHTML = templateString
-      var static_prototype_template_uid = tmp_dom_elem.querySelector('matestack-component-template').id.replace("uid-", "")
-      var dynamic_prototype_template_uid = Math.floor(Math.random() * 1000000000);
-      var templateString = templateString.replaceAll(static_prototype_template_uid, dynamic_prototype_template_uid);
+      var templateString = JSON.parse(this.getTemplateElement().querySelector('#prototype-template-for-'+key).dataset[":template"])
+      var regex = /"component_uid":"(.+?)"/g
+      var staticComponentUidMatches = templateString.matchAll(regex)
+      var staticComponentUids = []
+      for (const match of staticComponentUidMatches) {
+        staticComponentUids.push(match[1])
+      }
+      staticComponentUids.forEach(function(uid){
+        var newUid = Math.floor(Math.random() * 1000000000);
+        templateString = templateString.replaceAll(uid, newUid);
+      })
+      var tmpDomElem = document.createElement('div')
+      tmpDomElem.innerHTML = templateString
+    
       if (this.parentNestedFormRuntimeTemplateDomElements[key] == null){
         var dom_elem = document.createElement('div')
         dom_elem.innerHTML = templateString

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

@@ -25,7 +25,7 @@ module Matestack
             def attributes
               {
                 class: 'matestack-form',
-                "matestack-ui-core-ref": scoped_ref('form'),
+                "matestack-ui-vuejs-ref": matestack_ui_vuejs_ref('form'),
                 'v-bind:class': "{ 'has-errors': vc.hasErrors(), loading: vc.loading }",
                 'v-on:submit.prevent': 'vc.perform',
               }

data/lib/matestack/ui/vue_js/components/form/nested_form.js

@@ -106,13 +106,13 @@ const componentDef = {
       this.parentDeletedNestedForms[this.props["fields_for"]] = [];
     }
 
-    var id = parseInt(self.getElement().querySelector('.matestack-form-fields-for').id.replace(this.props["fields_for"]+"_child_", ""))
+    var id = parseInt(self.getTemplateElement().querySelector('.matestack-form-fields-for').id.replace(this.props["fields_for"]+"_child_", ""))
 
     //setup data binding for serverside rendered nested forms
     if (isNaN(id)){
       id = this.parentNestedForms[this.props["fields_for"]].length
       this.nestedFormRuntimeId = "_"+this.props["fields_for"]+"_child_"+id
-      this.getElement().id = this.props["fields_for"]+"_child_"+id
+      this.getTemplateElement().id = this.props["fields_for"]+"_child_"+id
       this.initValues()
       this.parentFormData[this.props["fields_for"]].push(this.data);
       this.parentNestedForms[this.props["fields_for"]].push(this);

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

@@ -36,7 +36,7 @@ module Matestack
                 ":id": item_id(item),
                 name: item_name(item),
                 type: :radio,
-                "matestack-ui-core-ref": scoped_ref("select.#{key}"),
+                "matestack-ui-vuejs-ref": matestack_ui_vuejs_ref("select.#{key}"),
                 'value-type': value_type(item_value(radio_options.first))
               }).tap do |attrs|
                 attrs[value_key(item)] = item_value(item)

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

@@ -44,7 +44,7 @@ module Matestack
               attributes.except(:options).merge({
                 multiple: multiple,
                 ":id": id,
-                "matestack-ui-core-ref": scoped_ref("select#{'.multiple' if multiple}.#{key}"),
+                "matestack-ui-vuejs-ref": matestack_ui_vuejs_ref("select#{'.multiple' if multiple}.#{key}"),
                 'value-type': value_type(select_options.first),
                 'init-value': init_value,
               })

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

@@ -1,7 +1,7 @@
 import matestackEventHub from '../event_hub'
 
 const componentMixin = {
-  props: ['props', 'params', 'matestack-ui-core-ref'],
+  props: ['props', 'params', 'matestack-ui-vuejs-ref'],
   computed: {
     vc: function(){
       return this;
@@ -15,13 +15,13 @@ const componentMixin = {
       // that's the reason for the following workaround
       var componentScopedRefs = {};
       var scopeId = this.props['component_uid'];
-      var componentRelativeRefs = this.getElement().querySelectorAll("[matestack-ui-core-ref]")
+      var componentRelativeRefs = this.getTemplateElement().querySelectorAll("[matestack-ui-vuejs-ref]")
       // var defaultSlot = this.$slots.default({ vc: this.vc })[0]
       // var globalRefs = defaultSlot.context.$refs
       for (let i in componentRelativeRefs) {
         let node = componentRelativeRefs[i]
         if (node.getAttribute){
-          let nodeRef = node.getAttribute("matestack-ui-core-ref")
+          let nodeRef = node.getAttribute("matestack-ui-vuejs-ref")
           if(nodeRef.startsWith(scopeId)){
             componentScopedRefs[nodeRef.replace(scopeId+"-", "")] = node
           }
@@ -30,9 +30,12 @@ const componentMixin = {
       }
       return componentScopedRefs;
     },
-    getElement: function(){
+    getTemplateElement: function(){
       return document.getElementById("uid-"+this.props['component_uid']);
     },
+    getElement: function(){
+      return this.getTemplateElement().firstChild;
+    },
     registerEvents: function(events, callback){
       if(events != undefined){
         var event_names = events.split(",")

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

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

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

@@ -18,7 +18,7 @@ module Matestack
 
         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
+            Matestack::Ui::Core::Base.new("matestack-component-template", 'for': vue_name, 'id': "uid-#{component_uid}") do
               yield
             end
           end
@@ -51,7 +51,7 @@ module Matestack
         end
         alias :config :vue_props
 
-        def scoped_ref(value)
+        def matestack_ui_vuejs_ref(value)
           return "#{component_uid}-#{value}" unless value.nil?
         end
 

data/lib/matestack/ui/vue_js.rb

@@ -11,7 +11,6 @@ end
 
 require "#{vue_js_base_path}/version"
 
-require "#{vue_js_base_path}/utils"
 require "#{vue_js_base_path}/vue_attributes"
 require "#{vue_js_base_path}/vue"
 require "#{vue_js_base_path}/components/app"

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: matestack-ui-vuejs
 version: !ruby/object:Gem::Version
-  version: 3.0.0.rc1
+  version: 3.0.0
 platform: ruby
 authors:
 - Jonas Jabari
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-02-11 00:00:00.000000000 Z
+date: 2022-03-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: matestack-ui-core
@@ -118,7 +118,6 @@ files:
 - 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/utils.rb
 - lib/matestack/ui/vue_js/version.rb
 - lib/matestack/ui/vue_js/vue.rb
 - lib/matestack/ui/vue_js/vue_attributes.rb
@@ -139,9 +138,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubygems_version: 3.1.4
 signing_key: 

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

@@ -1,67 +0,0 @@
-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