matestack-ui-core 1.0.0.rc.1 → 1.3.0

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

@@ -1,11 +1,14 @@
+require_relative './base'
+
 module Matestack::Ui::Core::Form::Submit
-  class Submit < Matestack::Ui::Core::Component::Static
+  class Submit < Base
+
+    vue_js_component_name "matestack-ui-core-form-submit"
 
-    def setup
-      @tag_attributes.merge!({
-        "@click.prevent": "perform",
-        "v-bind:class": "{ 'loading': loading }"
-        })
+    def response
+      span attributes: submit_attributes do
+        yield_components
+      end
     end
 
   end

data/app/concepts/matestack/ui/core/form/textarea/base.rb

@@ -0,0 +1,49 @@
+require_relative '../utils'
+require_relative '../has_errors'
+module Matestack::Ui::Core::Form::Textarea
+  class Base < Matestack::Ui::Core::Component::Dynamic
+    include Matestack::Ui::Core::Form::Utils
+    include Matestack::Ui::Core::Form::HasErrors
+
+    requires :key
+    optional :multiple, :init, for: { as: :input_for }, label: { as: :input_label }
+
+    html_attributes :autofocus, :cols, :dirname, :disabled, :form, :maxlength,
+      :name, :placeholder, :readonly, :required, :rows, :wrap
+
+    def setup
+      @component_config[:init_value] = init_value
+    end
+
+    def component_id
+      "textarea-component-for-#{attr_key}"
+    end
+
+    def input_key
+      "$parent.data[\"#{key}\"]"
+    end
+
+    def error_key
+      "$parent.errors[\"#{key}\"]"
+    end
+
+    def change_event
+      "inputChanged('#{attr_key}')"
+    end
+
+    def textarea_attributes
+      html_attributes.merge(attributes: vue_attributes)
+    end
+
+    def vue_attributes
+      (options[:attributes] || {}).merge({
+        'v-model': input_key,
+        '@change': change_event,
+        'v-bind:class': "{ '#{input_error_class}': #{error_key} }",
+        "init-value": init_value,
+        ref: "input.#{attr_key}",
+      })
+    end
+
+  end
+end

data/app/concepts/matestack/ui/core/form/textarea/mixin.js

@@ -0,0 +1,41 @@
+const formTextareaMixin = {
+  methods: {
+    initialize: function(){
+      const self = this
+      let data = {};
+
+      for (let key in this.$refs) {
+        let initValue = this.$refs[key]["attributes"]["init-value"];
+
+        if (initValue) {
+          data[key.replace("input.", "")] = initValue["value"];
+          Object.assign(self.$parent.data, data);
+          self.afterInitialize(initValue["value"])
+        } else {
+          data[key.replace("input.", "")] = null;
+          Object.assign(self.$parent.data, data);
+          self.afterInitialize(null)
+        }
+      }
+
+      //without the timeout it's somehow not working
+      setTimeout(function () {
+        self.$forceUpdate()
+      }, 1);
+    },
+    inputChanged: function (key) {
+      this.$parent.resetErrors(key);
+      this.$forceUpdate();
+    },
+    afterInitialize: function(value){
+      // can be used in the main component for further initialization steps
+    },
+    setValue: function (value){
+      this.$parent.data[this.componentConfig["key"]] = value
+      this.$forceUpdate();
+    }
+  }
+
+}
+
+export default formTextareaMixin

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

@@ -0,0 +1,15 @@
+import Vue from "vue/dist/vue.esm";
+
+import formTextareaMixin from "./mixin";
+import componentMixin from "../../component/component";
+
+const componentDef = {
+  mixins: [componentMixin, formTextareaMixin],
+  data() {
+    return {};
+  }
+}
+
+let component = Vue.component("matestack-ui-core-form-textarea", componentDef);
+
+export default componentDef;

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

@@ -1,28 +1,17 @@
-require_relative '../utils'
-require_relative '../has_errors'
+require_relative './base'
+
 module Matestack::Ui::Core::Form::Textarea
-  class Textarea < Matestack::Ui::Core::Textarea::Textarea
-    include Matestack::Ui::Core::Form::Utils
-    include Matestack::Ui::Core::Form::HasErrors
+  class Textarea < Base
 
-    requires :key
-    optional :multiple, :init, for: { as: :input_for }, label: { as: :input_label }
+    vue_js_component_name "matestack-ui-core-form-textarea"
 
     def response
-      label text: input_label if input_label
-      textarea html_attributes.merge(attributes: vue_attributes)
-      render_errors
+      div class: "matestack-ui-core-form-textarea" do
+        label text: input_label if input_label
+        textarea textarea_attributes
+        render_errors
+      end
     end
 
-    def vue_attributes
-      (options[:attributes] || {}).merge({
-        'v-model': input_key,
-        '@change': "inputChanged('#{attr_key}')",
-        'v-bind:class': "{ '#{input_error_class}': #{error_key} }",
-        "init-value": init_value,
-        ref: "input.#{attr_key}",
-      })
-    end
-    
   end
-end
+end

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

@@ -1,3 +1,3 @@
-%header{@tag_attributes}
+%header{ html_attributes }
   - if block_given?
     = yield

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

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

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

@@ -1,50 +1,5 @@
-- case options[:size]
-- when 1
-  %h1{@tag_attributes}
-    - if options[:text].blank?
-      - if block_given?
-        = yield
-    - else
-      = options[:text]
-- when 2
-  %h2{@tag_attributes}
-    - if options[:text].blank?
-      - if block_given?
-        = yield
-    - else
-      = options[:text]
-- when 3
-  %h3{@tag_attributes}
-    - if options[:text].blank?
-      - if block_given?
-        = yield
-    - else
-      = options[:text]
-- when 4
-  %h4{@tag_attributes}
-    - if options[:text].blank?
-      - if block_given?
-        = yield
-    - else
-      = options[:text]
-- when 5
-  %h5{@tag_attributes}
-    - if options[:text].blank?
-      - if block_given?
-        = yield
-    - else
-      = options[:text]
-- when 6
-  %h6{@tag_attributes}
-    - if options[:text].blank?
-      - if block_given?
-        = yield
-    - else
-      = options[:text]
+- if text.blank? && block_given?
+  = content_tag("h#{size || 1}", html_attributes) do
+    = yield
 - else
-  %h1{@tag_attributes}
-    - if options[:text].blank?
-      - if block_given?
-        = yield
-    - else
-      = options[:text]
+  = content_tag("h#{size || 1}", text, html_attributes)

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

@@ -1,7 +1,5 @@
 module Matestack::Ui::Core::Heading
   class Heading < Matestack::Ui::Core::Component::Static
-
-    attr_reader :argument, :options
-
+    optional :text, :size
   end
 end

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

@@ -1 +1 @@
-%hr{@tag_attributes}
+%hr{ html_attributes }

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

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

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

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

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

@@ -1,5 +1,5 @@
 module Matestack::Ui::Core::Icon
   class Icon < Matestack::Ui::Core::Component::Static
-
+    optional :text
   end
 end

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

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

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

@@ -1,14 +1,7 @@
 module Matestack::Ui::Core::Iframe
   class Iframe < Matestack::Ui::Core::Component::Static
-
-    def setup
-      @tag_attributes.merge!({
-        src: options[:src],
-        height: options[:height],
-        width: options[:width],
-        srcdoc: options[:srcdoc]
-      })
-    end
-
+    html_attributes :allow, :allowfullscreen, :allowpaymentrequest, :height, :name, 
+      :referrerpolicy, :sandbox, :src, :srcdoc, :width
+    optional :text
   end
 end

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

@@ -1 +1 @@
-%img{@tag_attributes}
+%img{ img_attributes }

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

@@ -1,14 +1,14 @@
 module Matestack::Ui::Core::Img
   class Img < Matestack::Ui::Core::Component::Static
+    html_attributes :alt, :crossorigin, :height, :ismap, :longdesc, :referrerpolicy, 
+      :sizes, :src, :srcset, :usemap, :width
 
-    def setup
-      @tag_attributes.merge!({
-        src: ActionController::Base.helpers.asset_path(options[:path]),
-        height: options[:height],
-        width: options[:width],
-        usemap: options[:usemap],
-        alt: options[:alt]
-      })
+    optional :path
+
+    def img_attributes
+      html_attributes.tap do |attributes|
+        attributes[:src] = ActionController::Base.helpers.asset_path(path) if path
+      end
     end
 
   end

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

@@ -5,9 +5,5 @@ module Matestack::Ui::Core::Input
       :formenctype, :formmethod, :formnovalidate, :formtarget, :height, :list, :max, :maxlength, :min, :minlength, 
       :multiple, :name, :pattern, :placeholder, :readonly, :required, :size, :src, :step, :type, :value, :width
 
-    def type
-      options[:type]
-    end
-
   end
 end

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

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

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

@@ -1,10 +1,6 @@
 module Matestack::Ui::Core::Ins
   class Ins < Matestack::Ui::Core::Component::Static
-    def setup
-      @tag_attributes.merge!({
-        cite: options[:cite],
-        datetime: options[:datetime]
-      })
-    end
+    html_attributes :cite, :datetime
+    optional :text
   end
 end

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

@@ -1,2 +1,2 @@
-%div{@tag_attributes.merge(class: "matestack-isolated-component-root")}
+%div{ html_attributes.merge(class: "matestack-isolated-component-root") }
   =yield

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

@@ -4,7 +4,7 @@ module Matestack::Ui::Core::Isolated
 
     def initialize(*args)
       super
-      @public_options = args.map { |hash| hash[:public_options] }[0]
+      @public_options = args.map { |hash| hash&.dig(:public_options) }[0]
     end
 
     def public_options

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

@@ -4,6 +4,7 @@ import { turbolinksAdapterMixin } from 'vue-turbolinks';
 // Import from app/concepts/matestack/ui/core:
 import app from '../app/app'
 import async from '../async/async'
+import cable from '../cable/cable'
 import pageContent from '../page/content/content'
 import toggle from '../toggle/toggle'
 import store from '../app/store'
@@ -12,6 +13,17 @@ import anonymDynamicComponent from '../component/anonym-dynamic-component'
 import transition from '../transition/transition'
 import action from '../action/action'
 import form from '../form/form'
+import formInput from '../form/input/input'
+import formInputMixin from '../form/input/mixin'
+import formSelect from '../form/select/select'
+import formSelectMixin from '../form/select/mixin'
+import formRadio from '../form/radio/radio'
+import formRadioMixin from '../form/radio/mixin'
+import formCheckbox from '../form/checkbox/checkbox'
+import formCheckboxMixin from '../form/checkbox/mixin'
+import formTextarea from '../form/textarea/textarea'
+import formTextareaMixin from '../form/textarea/mixin'
+import formSubmit from '../form/submit/submit'
 import onclick from '../onclick/onclick'
 import collectionContent from '../collection/content/content'
 import collectionFilter from '../collection/filter/filter'

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

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

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

@@ -1,4 +1,5 @@
 module Matestack::Ui::Core::Kbd
   class Kbd < Matestack::Ui::Core::Component::Static
+    optional :text
   end
 end

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

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

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

@@ -1,10 +1,6 @@
 module Matestack::Ui::Core::Label
   class Label < Matestack::Ui::Core::Component::Static
-    def setup
-      @tag_attributes.merge!({
-        for: options[:for],
-        form: options[:form]
-      })
-    end
+    html_attributes :for, :form
+    optional :text
   end
 end