matestack-ui-core 1.5.0 → 2.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/LICENSE +17 -5
- data/README.md +78 -115
- data/Rakefile +0 -2
- data/lib/matestack/ui/app.rb +1 -0
- data/lib/matestack/ui/component.rb +1 -0
- data/lib/matestack/ui/core.rb +58 -10
- data/lib/matestack/ui/core/app.rb +36 -0
- data/lib/matestack/ui/core/base.rb +109 -0
- data/lib/matestack/ui/core/component.rb +8 -0
- data/lib/matestack/ui/core/context.rb +17 -0
- data/lib/matestack/ui/core/helper.rb +91 -0
- data/lib/matestack/ui/core/page.rb +63 -0
- data/lib/matestack/ui/core/properties.rb +105 -0
- data/lib/matestack/ui/core/slots.rb +15 -0
- data/lib/matestack/ui/core/tag_helper.rb +94 -0
- data/lib/matestack/ui/core/version.rb +1 -1
- data/lib/matestack/ui/core/vue_attributes.rb +13 -0
- data/lib/matestack/ui/page.rb +1 -0
- data/{app/concepts/matestack/ui/core → lib/matestack/ui/vue_js}/app/app.js +2 -3
- data/{app/concepts/matestack/ui/core → lib/matestack/ui/vue_js}/app/location.js +0 -0
- data/{app/concepts/matestack/ui/core → lib/matestack/ui/vue_js}/app/store.js +1 -1
- data/lib/matestack/ui/vue_js/components.rb +94 -0
- data/lib/matestack/ui/vue_js/components/action.js +151 -0
- data/lib/matestack/ui/vue_js/components/action.rb +46 -0
- data/{app/concepts/matestack/ui/core/async → lib/matestack/ui/vue_js/components}/async.js +22 -22
- data/lib/matestack/ui/vue_js/components/async.rb +84 -0
- data/{app/concepts/matestack/ui/core/cable → lib/matestack/ui/vue_js/components}/cable.js +14 -14
- data/lib/matestack/ui/vue_js/components/cable.rb +69 -0
- data/{app/concepts/matestack/ui/core/collection/content → lib/matestack/ui/vue_js/components/collection}/content.js +21 -22
- data/lib/matestack/ui/vue_js/components/collection/content.rb +32 -0
- data/lib/matestack/ui/vue_js/components/collection/filter.js +45 -0
- data/lib/matestack/ui/vue_js/components/collection/filter.rb +29 -0
- data/lib/matestack/ui/vue_js/components/collection/filter_reset.rb +19 -0
- data/{app/concepts/matestack/ui/core → lib/matestack/ui/vue_js/components}/collection/helper.rb +66 -65
- data/lib/matestack/ui/vue_js/components/collection/next.rb +19 -0
- data/lib/matestack/ui/vue_js/components/collection/order.js +46 -0
- data/lib/matestack/ui/vue_js/components/collection/order.rb +28 -0
- data/lib/matestack/ui/vue_js/components/collection/order_toggle.rb +21 -0
- data/lib/matestack/ui/vue_js/components/collection/order_toggle_indicator.rb +30 -0
- data/lib/matestack/ui/vue_js/components/collection/page.rb +21 -0
- data/lib/matestack/ui/vue_js/components/collection/previous.rb +19 -0
- data/lib/matestack/ui/vue_js/components/form/base.rb +167 -0
- data/{app/concepts/matestack/ui/core/form/checkbox → lib/matestack/ui/vue_js/components/form}/checkbox.js +2 -2
- data/lib/matestack/ui/vue_js/components/form/checkbox.rb +105 -0
- data/{app/concepts/matestack/ui/core/form/checkbox/mixin.js → lib/matestack/ui/vue_js/components/form/checkbox_mixin.js} +5 -2
- data/lib/matestack/ui/vue_js/components/form/context.rb +15 -0
- data/{app/concepts/matestack/ui/core → lib/matestack/ui/vue_js/components}/form/form.js +53 -53
- data/lib/matestack/ui/vue_js/components/form/form.rb +64 -0
- data/{app/concepts/matestack/ui/core/form/input → lib/matestack/ui/vue_js/components/form}/input.js +2 -2
- data/lib/matestack/ui/vue_js/components/form/input.rb +37 -0
- data/{app/concepts/matestack/ui/core/form/input/mixin.js → lib/matestack/ui/vue_js/components/form/input_mixin.js} +5 -2
- data/{app/concepts/matestack/ui/core/form/radio → lib/matestack/ui/vue_js/components/form}/radio.js +2 -2
- data/lib/matestack/ui/vue_js/components/form/radio.rb +76 -0
- data/{app/concepts/matestack/ui/core/form/radio/mixin.js → lib/matestack/ui/vue_js/components/form/radio_mixin.js} +4 -1
- data/{app/concepts/matestack/ui/core/form/select → lib/matestack/ui/vue_js/components/form}/select.js +2 -2
- data/lib/matestack/ui/vue_js/components/form/select.rb +88 -0
- data/{app/concepts/matestack/ui/core/form/select/mixin.js → lib/matestack/ui/vue_js/components/form/select_mixin.js} +5 -2
- data/{app/concepts/matestack/ui/core/form/textarea → lib/matestack/ui/vue_js/components/form}/textarea.js +2 -2
- data/lib/matestack/ui/vue_js/components/form/textarea.rb +37 -0
- data/{app/concepts/matestack/ui/core/form/textarea/mixin.js → lib/matestack/ui/vue_js/components/form/textarea_mixin.js} +5 -2
- data/{app/concepts/matestack/ui/core/isolated → lib/matestack/ui/vue_js/components}/isolated.js +19 -19
- data/lib/matestack/ui/vue_js/components/isolated.rb +86 -0
- data/{app/concepts/matestack/ui/core/component/component.js → lib/matestack/ui/vue_js/components/mixin.js} +2 -2
- data/{app/concepts/matestack/ui/core/onclick → lib/matestack/ui/vue_js/components}/onclick.js +3 -4
- data/lib/matestack/ui/vue_js/components/onclick.rb +37 -0
- data/{app/concepts/matestack/ui/core/toggle → lib/matestack/ui/vue_js/components}/toggle.js +17 -17
- data/lib/matestack/ui/vue_js/components/toggle.rb +38 -0
- data/{app/concepts/matestack/ui/core/transition → lib/matestack/ui/vue_js/components}/transition.js +6 -6
- data/lib/matestack/ui/vue_js/components/transition.rb +40 -0
- data/lib/matestack/ui/vue_js/event_hub.js +5 -0
- data/{app/concepts/matestack/ui/core/js/helpers/query-params-helper.js → lib/matestack/ui/vue_js/helpers/query_params_helper.js} +0 -0
- data/lib/matestack/ui/vue_js/index.js +52 -0
- data/lib/matestack/ui/vue_js/initialize.rb +5 -0
- data/{app/concepts/matestack/ui/core/page/content → lib/matestack/ui/vue_js/page}/content.js +1 -1
- data/lib/matestack/ui/vue_js/vue.rb +63 -0
- data/lib/matestack/ui/vue_js_component.rb +2 -0
- metadata +75 -404
- data/app/concepts/matestack/ui/core/abbr/abbr.haml +0 -5
- data/app/concepts/matestack/ui/core/abbr/abbr.rb +0 -5
- data/app/concepts/matestack/ui/core/action/action.haml +0 -3
- data/app/concepts/matestack/ui/core/action/action.js +0 -152
- data/app/concepts/matestack/ui/core/action/action.rb +0 -80
- data/app/concepts/matestack/ui/core/actionview/dynamic.haml +0 -6
- data/app/concepts/matestack/ui/core/actionview/dynamic.rb +0 -28
- data/app/concepts/matestack/ui/core/actionview/static.haml +0 -1
- data/app/concepts/matestack/ui/core/actionview/static.rb +0 -28
- data/app/concepts/matestack/ui/core/address/address.haml +0 -5
- data/app/concepts/matestack/ui/core/address/address.rb +0 -5
- data/app/concepts/matestack/ui/core/app/app.haml +0 -3
- data/app/concepts/matestack/ui/core/app/app.rb +0 -51
- data/app/concepts/matestack/ui/core/area/area.haml +0 -1
- data/app/concepts/matestack/ui/core/area/area.rb +0 -6
- data/app/concepts/matestack/ui/core/article/article.haml +0 -5
- data/app/concepts/matestack/ui/core/article/article.rb +0 -5
- data/app/concepts/matestack/ui/core/aside/aside.haml +0 -3
- data/app/concepts/matestack/ui/core/aside/aside.rb +0 -4
- data/app/concepts/matestack/ui/core/async/async.haml +0 -6
- data/app/concepts/matestack/ui/core/async/async.rb +0 -37
- data/app/concepts/matestack/ui/core/async/children_wrapper.haml +0 -2
- data/app/concepts/matestack/ui/core/b/b.haml +0 -5
- data/app/concepts/matestack/ui/core/b/b.rb +0 -5
- data/app/concepts/matestack/ui/core/bdi/bdi.haml +0 -5
- data/app/concepts/matestack/ui/core/bdi/bdi.rb +0 -5
- data/app/concepts/matestack/ui/core/bdo/bdo.haml +0 -5
- data/app/concepts/matestack/ui/core/bdo/bdo.rb +0 -6
- data/app/concepts/matestack/ui/core/blockquote/blockquote.haml +0 -5
- data/app/concepts/matestack/ui/core/blockquote/blockquote.rb +0 -6
- data/app/concepts/matestack/ui/core/br/br.haml +0 -5
- data/app/concepts/matestack/ui/core/br/br.rb +0 -5
- data/app/concepts/matestack/ui/core/button/button.haml +0 -5
- data/app/concepts/matestack/ui/core/button/button.rb +0 -7
- data/app/concepts/matestack/ui/core/cable/cable.haml +0 -4
- data/app/concepts/matestack/ui/core/cable/cable.rb +0 -28
- data/app/concepts/matestack/ui/core/cable/children_wrapper.haml +0 -2
- data/app/concepts/matestack/ui/core/caption/caption.haml +0 -5
- data/app/concepts/matestack/ui/core/caption/caption.rb +0 -5
- data/app/concepts/matestack/ui/core/cite/cite.haml +0 -5
- data/app/concepts/matestack/ui/core/cite/cite.rb +0 -5
- data/app/concepts/matestack/ui/core/code/code.haml +0 -5
- data/app/concepts/matestack/ui/core/code/code.rb +0 -5
- data/app/concepts/matestack/ui/core/collection/content/content.rb +0 -16
- data/app/concepts/matestack/ui/core/collection/content/next/next.haml +0 -3
- data/app/concepts/matestack/ui/core/collection/content/next/next.rb +0 -5
- data/app/concepts/matestack/ui/core/collection/content/page/link/link.haml +0 -3
- data/app/concepts/matestack/ui/core/collection/content/page/link/link.rb +0 -7
- data/app/concepts/matestack/ui/core/collection/content/previous/previous.haml +0 -3
- data/app/concepts/matestack/ui/core/collection/content/previous/previous.rb +0 -5
- data/app/concepts/matestack/ui/core/collection/filter/filter.js +0 -48
- data/app/concepts/matestack/ui/core/collection/filter/filter.rb +0 -16
- data/app/concepts/matestack/ui/core/collection/filter/input/input.rb +0 -28
- data/app/concepts/matestack/ui/core/collection/filter/reset/reset.haml +0 -3
- data/app/concepts/matestack/ui/core/collection/filter/reset/reset.rb +0 -5
- data/app/concepts/matestack/ui/core/collection/filter/select/select.haml +0 -10
- data/app/concepts/matestack/ui/core/collection/filter/select/select.rb +0 -30
- data/app/concepts/matestack/ui/core/collection/filter/submit/submit.haml +0 -3
- data/app/concepts/matestack/ui/core/collection/filter/submit/submit.rb +0 -5
- data/app/concepts/matestack/ui/core/collection/order/order.js +0 -56
- data/app/concepts/matestack/ui/core/collection/order/order.rb +0 -16
- data/app/concepts/matestack/ui/core/collection/order/toggle/indicator/indicator.rb +0 -17
- data/app/concepts/matestack/ui/core/collection/order/toggle/toggle.haml +0 -3
- data/app/concepts/matestack/ui/core/collection/order/toggle/toggle.rb +0 -4
- data/app/concepts/matestack/ui/core/component/anonym-dynamic-component.js +0 -10
- data/app/concepts/matestack/ui/core/component/base.rb +0 -430
- data/app/concepts/matestack/ui/core/component/children.haml +0 -2
- data/app/concepts/matestack/ui/core/component/dynamic.haml +0 -6
- data/app/concepts/matestack/ui/core/component/dynamic.rb +0 -47
- data/app/concepts/matestack/ui/core/component/dynamic_without_rerender.haml +0 -2
- data/app/concepts/matestack/ui/core/component/static.rb +0 -7
- data/app/concepts/matestack/ui/core/data/data.haml +0 -5
- data/app/concepts/matestack/ui/core/data/data.rb +0 -6
- data/app/concepts/matestack/ui/core/datalist/datalist.haml +0 -3
- data/app/concepts/matestack/ui/core/datalist/datalist.rb +0 -4
- data/app/concepts/matestack/ui/core/dd/dd.haml +0 -5
- data/app/concepts/matestack/ui/core/dd/dd.rb +0 -5
- data/app/concepts/matestack/ui/core/del/del.haml +0 -5
- data/app/concepts/matestack/ui/core/del/del.rb +0 -6
- data/app/concepts/matestack/ui/core/details/details.haml +0 -3
- data/app/concepts/matestack/ui/core/details/details.rb +0 -5
- data/app/concepts/matestack/ui/core/dfn/dfn.haml +0 -5
- data/app/concepts/matestack/ui/core/dfn/dfn.rb +0 -6
- data/app/concepts/matestack/ui/core/dialog/dialog.haml +0 -5
- data/app/concepts/matestack/ui/core/dialog/dialog.rb +0 -6
- data/app/concepts/matestack/ui/core/div/div.haml +0 -3
- data/app/concepts/matestack/ui/core/div/div.rb +0 -4
- data/app/concepts/matestack/ui/core/dl/dl.haml +0 -5
- data/app/concepts/matestack/ui/core/dl/dl.rb +0 -5
- data/app/concepts/matestack/ui/core/dt/dt.haml +0 -5
- data/app/concepts/matestack/ui/core/dt/dt.rb +0 -5
- data/app/concepts/matestack/ui/core/em/em.haml +0 -5
- data/app/concepts/matestack/ui/core/em/em.rb +0 -5
- data/app/concepts/matestack/ui/core/fieldset/fieldset.haml +0 -5
- data/app/concepts/matestack/ui/core/fieldset/fieldset.rb +0 -6
- data/app/concepts/matestack/ui/core/figure/figure.haml +0 -3
- data/app/concepts/matestack/ui/core/figure/figure.rb +0 -4
- data/app/concepts/matestack/ui/core/footer/footer.haml +0 -3
- data/app/concepts/matestack/ui/core/footer/footer.rb +0 -4
- data/app/concepts/matestack/ui/core/form/checkbox/base.rb +0 -120
- data/app/concepts/matestack/ui/core/form/checkbox/checkbox.rb +0 -16
- data/app/concepts/matestack/ui/core/form/form.haml +0 -2
- data/app/concepts/matestack/ui/core/form/form.rb +0 -104
- data/app/concepts/matestack/ui/core/form/has_errors.rb +0 -54
- data/app/concepts/matestack/ui/core/form/has_input_html_attributes.rb +0 -13
- data/app/concepts/matestack/ui/core/form/input/base.rb +0 -75
- data/app/concepts/matestack/ui/core/form/input/input.rb +0 -17
- data/app/concepts/matestack/ui/core/form/radio/base.rb +0 -90
- data/app/concepts/matestack/ui/core/form/radio/radio.rb +0 -16
- data/app/concepts/matestack/ui/core/form/select/base.rb +0 -98
- data/app/concepts/matestack/ui/core/form/select/select.rb +0 -19
- data/app/concepts/matestack/ui/core/form/submit/base.rb +0 -12
- data/app/concepts/matestack/ui/core/form/submit/submit.js +0 -19
- data/app/concepts/matestack/ui/core/form/submit/submit.rb +0 -15
- data/app/concepts/matestack/ui/core/form/textarea/base.rb +0 -49
- data/app/concepts/matestack/ui/core/form/textarea/textarea.rb +0 -17
- data/app/concepts/matestack/ui/core/form/utils.rb +0 -47
- data/app/concepts/matestack/ui/core/header/header.haml +0 -3
- data/app/concepts/matestack/ui/core/header/header.rb +0 -4
- data/app/concepts/matestack/ui/core/heading/heading.haml +0 -5
- data/app/concepts/matestack/ui/core/heading/heading.rb +0 -5
- data/app/concepts/matestack/ui/core/hr/hr.haml +0 -1
- data/app/concepts/matestack/ui/core/hr/hr.rb +0 -4
- data/app/concepts/matestack/ui/core/icon/icon.haml +0 -5
- data/app/concepts/matestack/ui/core/icon/icon.rb +0 -5
- data/app/concepts/matestack/ui/core/iframe/iframe.haml +0 -5
- data/app/concepts/matestack/ui/core/iframe/iframe.rb +0 -7
- data/app/concepts/matestack/ui/core/img/img.haml +0 -1
- data/app/concepts/matestack/ui/core/img/img.rb +0 -15
- data/app/concepts/matestack/ui/core/input/input.haml +0 -1
- data/app/concepts/matestack/ui/core/input/input.rb +0 -9
- data/app/concepts/matestack/ui/core/ins/ins.haml +0 -5
- data/app/concepts/matestack/ui/core/ins/ins.rb +0 -6
- data/app/concepts/matestack/ui/core/isolated/children_wrapper.haml +0 -2
- data/app/concepts/matestack/ui/core/isolated/isolated.haml +0 -10
- data/app/concepts/matestack/ui/core/isolated/isolated.rb +0 -59
- data/app/concepts/matestack/ui/core/js/core.js +0 -66
- data/app/concepts/matestack/ui/core/js/event-hub.js +0 -5
- data/app/concepts/matestack/ui/core/kbd/kbd.haml +0 -5
- data/app/concepts/matestack/ui/core/kbd/kbd.rb +0 -5
- data/app/concepts/matestack/ui/core/label/label.haml +0 -5
- data/app/concepts/matestack/ui/core/label/label.rb +0 -6
- data/app/concepts/matestack/ui/core/legend/legend.haml +0 -5
- data/app/concepts/matestack/ui/core/legend/legend.rb +0 -5
- data/app/concepts/matestack/ui/core/li/li.haml +0 -5
- data/app/concepts/matestack/ui/core/li/li.rb +0 -6
- data/app/concepts/matestack/ui/core/link/link.haml +0 -5
- data/app/concepts/matestack/ui/core/link/link.rb +0 -23
- data/app/concepts/matestack/ui/core/main/main.haml +0 -3
- data/app/concepts/matestack/ui/core/main/main.rb +0 -4
- data/app/concepts/matestack/ui/core/map/map.haml +0 -3
- data/app/concepts/matestack/ui/core/map/map.rb +0 -5
- data/app/concepts/matestack/ui/core/mark/mark.haml +0 -5
- data/app/concepts/matestack/ui/core/mark/mark.rb +0 -5
- data/app/concepts/matestack/ui/core/meter/meter.haml +0 -4
- data/app/concepts/matestack/ui/core/meter/meter.rb +0 -5
- data/app/concepts/matestack/ui/core/nav/nav.haml +0 -3
- data/app/concepts/matestack/ui/core/nav/nav.rb +0 -4
- data/app/concepts/matestack/ui/core/noscript/noscript.haml +0 -5
- data/app/concepts/matestack/ui/core/noscript/noscript.rb +0 -5
- data/app/concepts/matestack/ui/core/object/object.haml +0 -1
- data/app/concepts/matestack/ui/core/object/object.rb +0 -5
- data/app/concepts/matestack/ui/core/ol/ol.haml +0 -3
- data/app/concepts/matestack/ui/core/ol/ol.rb +0 -5
- data/app/concepts/matestack/ui/core/onclick/onclick.haml +0 -2
- data/app/concepts/matestack/ui/core/onclick/onclick.rb +0 -6
- data/app/concepts/matestack/ui/core/optgroup/optgroup.haml +0 -3
- data/app/concepts/matestack/ui/core/optgroup/optgroup.rb +0 -5
- data/app/concepts/matestack/ui/core/option/option.haml +0 -5
- data/app/concepts/matestack/ui/core/option/option.rb +0 -6
- data/app/concepts/matestack/ui/core/output/output.haml +0 -5
- data/app/concepts/matestack/ui/core/output/output.rb +0 -6
- data/app/concepts/matestack/ui/core/page/content/content.rb +0 -28
- data/app/concepts/matestack/ui/core/page/page.haml +0 -3
- data/app/concepts/matestack/ui/core/page/page.rb +0 -30
- data/app/concepts/matestack/ui/core/paragraph/paragraph.haml +0 -5
- data/app/concepts/matestack/ui/core/paragraph/paragraph.rb +0 -5
- data/app/concepts/matestack/ui/core/param/param.haml +0 -1
- data/app/concepts/matestack/ui/core/param/param.rb +0 -5
- data/app/concepts/matestack/ui/core/partial/partial.haml +0 -2
- data/app/concepts/matestack/ui/core/partial/partial.rb +0 -4
- data/app/concepts/matestack/ui/core/picture/picture.haml +0 -3
- data/app/concepts/matestack/ui/core/picture/picture.rb +0 -4
- data/app/concepts/matestack/ui/core/plain/plain.rb +0 -9
- data/app/concepts/matestack/ui/core/pre/pre.haml +0 -5
- data/app/concepts/matestack/ui/core/pre/pre.rb +0 -5
- data/app/concepts/matestack/ui/core/progress/progress.haml +0 -3
- data/app/concepts/matestack/ui/core/progress/progress.rb +0 -5
- data/app/concepts/matestack/ui/core/q/q.haml +0 -5
- data/app/concepts/matestack/ui/core/q/q.rb +0 -6
- data/app/concepts/matestack/ui/core/rp/rp.haml +0 -5
- data/app/concepts/matestack/ui/core/rp/rp.rb +0 -5
- data/app/concepts/matestack/ui/core/rt/rt.haml +0 -5
- data/app/concepts/matestack/ui/core/rt/rt.rb +0 -5
- data/app/concepts/matestack/ui/core/ruby/ruby.haml +0 -5
- data/app/concepts/matestack/ui/core/ruby/ruby.rb +0 -5
- data/app/concepts/matestack/ui/core/s/s.haml +0 -5
- data/app/concepts/matestack/ui/core/s/s.rb +0 -6
- data/app/concepts/matestack/ui/core/samp/samp.haml +0 -5
- data/app/concepts/matestack/ui/core/samp/samp.rb +0 -5
- data/app/concepts/matestack/ui/core/section/section.haml +0 -3
- data/app/concepts/matestack/ui/core/section/section.rb +0 -4
- data/app/concepts/matestack/ui/core/select/select.haml +0 -3
- data/app/concepts/matestack/ui/core/select/select.rb +0 -7
- data/app/concepts/matestack/ui/core/slot/slot.haml +0 -2
- data/app/concepts/matestack/ui/core/slot/slot.rb +0 -4
- data/app/concepts/matestack/ui/core/small/small.haml +0 -5
- data/app/concepts/matestack/ui/core/small/small.rb +0 -5
- data/app/concepts/matestack/ui/core/span/span.haml +0 -5
- data/app/concepts/matestack/ui/core/span/span.rb +0 -5
- data/app/concepts/matestack/ui/core/strong/strong.haml +0 -5
- data/app/concepts/matestack/ui/core/strong/strong.rb +0 -5
- data/app/concepts/matestack/ui/core/sub/sub.haml +0 -5
- data/app/concepts/matestack/ui/core/sub/sub.rb +0 -5
- data/app/concepts/matestack/ui/core/summary/summary.haml +0 -5
- data/app/concepts/matestack/ui/core/summary/summary.rb +0 -5
- data/app/concepts/matestack/ui/core/sup/sup.haml +0 -5
- data/app/concepts/matestack/ui/core/sup/sup.rb +0 -5
- data/app/concepts/matestack/ui/core/table/table.haml +0 -3
- data/app/concepts/matestack/ui/core/table/table.rb +0 -4
- data/app/concepts/matestack/ui/core/tbody/tbody.haml +0 -3
- data/app/concepts/matestack/ui/core/tbody/tbody.rb +0 -4
- data/app/concepts/matestack/ui/core/td/td.haml +0 -5
- data/app/concepts/matestack/ui/core/td/td.rb +0 -6
- data/app/concepts/matestack/ui/core/template/template.haml +0 -3
- data/app/concepts/matestack/ui/core/template/template.rb +0 -4
- data/app/concepts/matestack/ui/core/textarea/textarea.haml +0 -5
- data/app/concepts/matestack/ui/core/textarea/textarea.rb +0 -10
- data/app/concepts/matestack/ui/core/tfoot/tfoot.haml +0 -3
- data/app/concepts/matestack/ui/core/tfoot/tfoot.rb +0 -4
- data/app/concepts/matestack/ui/core/th/th.haml +0 -5
- data/app/concepts/matestack/ui/core/th/th.rb +0 -6
- data/app/concepts/matestack/ui/core/thead/thead.haml +0 -3
- data/app/concepts/matestack/ui/core/thead/thead.rb +0 -4
- data/app/concepts/matestack/ui/core/time/time.haml +0 -3
- data/app/concepts/matestack/ui/core/time/time.rb +0 -5
- data/app/concepts/matestack/ui/core/toggle/toggle.haml +0 -2
- data/app/concepts/matestack/ui/core/toggle/toggle.rb +0 -13
- data/app/concepts/matestack/ui/core/tr/tr.haml +0 -3
- data/app/concepts/matestack/ui/core/tr/tr.rb +0 -4
- data/app/concepts/matestack/ui/core/transition/transition.haml +0 -5
- data/app/concepts/matestack/ui/core/transition/transition.rb +0 -38
- data/app/concepts/matestack/ui/core/u/u.haml +0 -5
- data/app/concepts/matestack/ui/core/u/u.rb +0 -6
- data/app/concepts/matestack/ui/core/ul/ul.haml +0 -3
- data/app/concepts/matestack/ui/core/ul/ul.rb +0 -4
- data/app/concepts/matestack/ui/core/unescaped/unescaped.rb +0 -9
- data/app/concepts/matestack/ui/core/var/var.haml +0 -5
- data/app/concepts/matestack/ui/core/var/var.rb +0 -5
- data/app/concepts/matestack/ui/core/video/video.haml +0 -3
- data/app/concepts/matestack/ui/core/video/video.rb +0 -13
- data/app/concepts/matestack/ui/core/view/view.haml +0 -1
- data/app/concepts/matestack/ui/core/view/view.rb +0 -30
- data/app/concepts/matestack/ui/core/wbr/wbr.haml +0 -5
- data/app/concepts/matestack/ui/core/wbr/wbr.rb +0 -5
- data/app/concepts/matestack/ui/core/youtube/youtube.haml +0 -1
- data/app/concepts/matestack/ui/core/youtube/youtube.rb +0 -28
- data/app/helpers/matestack/ui/core/application_helper.rb +0 -111
- data/app/javascript/matestack-ui-core/index.js +0 -32
- data/app/javascript/matestack-ui-core/styles/index.scss +0 -5
- data/app/javascript/packs/matestack-ui-core.js +0 -8
- data/app/lib/matestack/ui/app.rb +0 -1
- data/app/lib/matestack/ui/component.rb +0 -1
- data/app/lib/matestack/ui/core/has_view_context.rb +0 -16
- data/app/lib/matestack/ui/core/html_attributes.rb +0 -43
- data/app/lib/matestack/ui/core/properties.rb +0 -161
- data/app/lib/matestack/ui/core/rendering/default_renderer_class_determiner.rb +0 -33
- data/app/lib/matestack/ui/core/rendering/main_renderer.rb +0 -203
- data/app/lib/matestack/ui/dynamic_actionview_component.rb +0 -1
- data/app/lib/matestack/ui/dynamic_component.rb +0 -1
- data/app/lib/matestack/ui/isolated_component.rb +0 -1
- data/app/lib/matestack/ui/page.rb +0 -1
- data/app/lib/matestack/ui/static_actionview_component.rb +0 -1
- data/app/lib/matestack/ui/static_component.rb +0 -1
- data/app/lib/matestack/ui/vue_js_component.rb +0 -1
- data/config/routes.rb +0 -2
- data/lib/generators/matestack/app/USAGE +0 -21
- data/lib/generators/matestack/app/app_generator.rb +0 -25
- data/lib/generators/matestack/app/templates/app/controllers/%file_name%_controller.rb.tt +0 -5
- data/lib/generators/matestack/app/templates/app/matestack/apps/%file_name%.rb.tt +0 -28
- data/lib/generators/matestack/component/USAGE +0 -20
- data/lib/generators/matestack/component/component_generator.rb +0 -29
- data/lib/generators/matestack/component/templates/app/matestack/components/%namespace%/%file_name%.haml.tt +0 -5
- data/lib/generators/matestack/component/templates/app/matestack/components/%namespace%/%file_name%.js.tt +0 -17
- data/lib/generators/matestack/component/templates/app/matestack/components/%namespace%/%file_name%.rb.tt +0 -11
- data/lib/generators/matestack/component/templates/app/matestack/components/%namespace%/%file_name%.scss.tt +0 -1
- data/lib/generators/matestack/core/component/USAGE +0 -16
- data/lib/generators/matestack/core/component/component_generator.rb +0 -23
- data/lib/generators/matestack/core/component/templates/app/concepts/matestack/ui/core/%file_name%/%file_name%.haml.tt +0 -5
- data/lib/generators/matestack/core/component/templates/app/concepts/matestack/ui/core/%file_name%/%file_name%.rb.tt +0 -4
- data/lib/generators/matestack/core/component/templates/docs/components/%file_name%.md.tt +0 -45
- data/lib/generators/matestack/core/component/templates/spec/usage/components/%file_name%_spec.rb +0 -31
- data/lib/generators/matestack/page/USAGE +0 -28
- data/lib/generators/matestack/page/page_generator.rb +0 -54
- data/lib/generators/matestack/page/templates/app/matestack/pages/%app_name%/%namespace%/%file_name%.rb.tt +0 -29
- data/lib/matestack/ui/core/cell.rb +0 -31
- data/lib/matestack/ui/core/component/registry.rb +0 -47
- data/lib/matestack/ui/core/components.rb +0 -271
- data/lib/matestack/ui/core/dsl.rb +0 -6
- data/lib/matestack/ui/core/engine.rb +0 -35
- data/lib/tasks/matestack/ui/core_tasks.rake +0 -4
- data/vendor/assets/javascripts/dist/manifest.json +0 -18
- data/vendor/assets/javascripts/dist/manifest.json.br +0 -0
- data/vendor/assets/javascripts/dist/manifest.json.gz +0 -0
- data/vendor/assets/javascripts/dist/matestack-ui-core.css +0 -3
- data/vendor/assets/javascripts/dist/matestack-ui-core.css.map +0 -1
- data/vendor/assets/javascripts/dist/matestack-ui-core.js +0 -17734
- data/vendor/assets/javascripts/dist/matestack-ui-core.js.map +0 -1
- data/vendor/assets/javascripts/dist/matestack-ui-core.min.css +0 -0
- data/vendor/assets/javascripts/dist/matestack-ui-core.min.js +0 -3
- data/vendor/assets/javascripts/dist/matestack-ui-core.min.js.LICENSE.txt +0 -11
- data/vendor/assets/javascripts/dist/matestack-ui-core.min.js.br +0 -0
- data/vendor/assets/javascripts/dist/matestack-ui-core.min.js.gz +0 -0
- data/vendor/assets/javascripts/dist/matestack-ui-core.min.js.map +0 -1
- data/vendor/assets/javascripts/dist/matestack-ui-core.min.js.map.br +0 -0
- data/vendor/assets/javascripts/dist/matestack-ui-core.min.js.map.gz +0 -0
- data/vendor/assets/javascripts/matestack-ui-core.js.erb +0 -2
- data/vendor/assets/stylesheets/dist +0 -1
- data/vendor/assets/stylesheets/matestack-ui-core.css.erb +0 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: a187da8c82641bf2c77bbb1b4a43b0b7e474d5870435ac1163cc28d09575ca48
|
4
|
+
data.tar.gz: 4337c9c2a671b9597fda5b88992bde5dffd89f945719f8e19991802bd98a23fa
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 46cb76c518e3146058dd8b27bc20e4699196d1321abfa3fa019a0809e3b7c62b46769a286300620848a465cbdcfd04607be1dbe6e7a99930490c80980031dcd3
|
7
|
+
data.tar.gz: f393f4268fb80477eacd18d117555cb605782f24ce6c5cf6aa4aa74c518ca94a9897ebd1bb1ed4b7edc4d81ac9d3f2d707ff3345462f0a77ec3b6a15646a4296
|
data/LICENSE
CHANGED
@@ -1,8 +1,20 @@
|
|
1
1
|
Copyright (c) Matestack GmbH
|
2
2
|
|
3
|
-
|
4
|
-
|
5
|
-
|
3
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
4
|
+
a copy of this software and associated documentation files (the
|
5
|
+
"Software"), to deal in the Software without restriction, including
|
6
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
7
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
8
|
+
permit persons to whom the Software is furnished to do so, subject to
|
9
|
+
the following conditions:
|
6
10
|
|
7
|
-
|
8
|
-
|
11
|
+
The above copyright notice and this permission notice shall be
|
12
|
+
included in all copies or substantial portions of the Software.
|
13
|
+
|
14
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
15
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
16
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
17
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
18
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
19
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
20
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
CHANGED
@@ -8,6 +8,17 @@
|
|
8
8
|
|
9
9
|
# matestack-ui-core | UI in pure Ruby
|
10
10
|
|
11
|
+
----
|
12
|
+
Version 2.0.0 was released on the 12th of April and proudly presented at RailsConf. Click here for more details
|
13
|
+
|
14
|
+
Most important changes:
|
15
|
+
|
16
|
+
- Changed to MIT License
|
17
|
+
- 5 to 12 times better rendering performance (depending on the context)
|
18
|
+
- Removed Trailblazer dependency
|
19
|
+
- Improved core code readability/maintainability
|
20
|
+
----
|
21
|
+
|
11
22
|
Boost your productivity & easily create component based web UIs in pure Ruby.
|
12
23
|
Reactivity included if desired.
|
13
24
|
|
@@ -42,8 +53,10 @@ Rails versions below 5.2 are not supported.
|
|
42
53
|
|
43
54
|
### Vue.js
|
44
55
|
|
45
|
-
`matestack-ui-core`
|
46
|
-
|
56
|
+
`matestack-ui-core` optionally requires Vue.js and Vuex for its reactivity features. Following version ranges are supported:
|
57
|
+
|
58
|
+
- Vue.js ^2.6.0
|
59
|
+
- Vuex ^3.6.0
|
47
60
|
|
48
61
|
Vue 3 / Vuex 4 update is planned for Q2 2021.
|
49
62
|
|
@@ -53,7 +66,7 @@ Documentation can be found [here](https://docs.matestack.io)
|
|
53
66
|
|
54
67
|
## Getting started
|
55
68
|
|
56
|
-
A getting started guide can be found [here](https://docs.matestack.io/
|
69
|
+
A getting started guide can be found [here](https://docs.matestack.io/getting-started/tutorial)
|
57
70
|
|
58
71
|
## Changelog
|
59
72
|
|
@@ -88,16 +101,16 @@ The Ruby method \"div\" for example calls one of the static core components, res
|
|
88
101
|
|
89
102
|
class Components::Card < Matestack::Ui::Component
|
90
103
|
|
91
|
-
|
104
|
+
required :body
|
92
105
|
optional :title
|
93
106
|
optional :image
|
94
107
|
|
95
108
|
def response
|
96
109
|
div class: "card shadow-sm border-0 bg-light" do
|
97
|
-
img path: image, class: "w-100" if image.present?
|
110
|
+
img path: context.image, class: "w-100" if context.image.present?
|
98
111
|
div class: "card-body" do
|
99
|
-
|
100
|
-
paragraph class: "card-text"
|
112
|
+
h5 context.title if context.title.present?
|
113
|
+
paragraph context.body, class: "card-text"
|
101
114
|
end
|
102
115
|
end
|
103
116
|
end
|
@@ -108,32 +121,18 @@ end
|
|
108
121
|
|
109
122
|
#### Use your Ruby UI components on your existing Rails views
|
110
123
|
|
111
|
-
|
112
|
-
The Ruby method \"card\" for example calls your \"Card\" class, enabling you to create a reuseable card components, abstracting UI complexity in your ow components.
|
124
|
+
Components can be then called on Rails views (not only! see below), enabling you to create a reusable card components, abstracting UI complexity in your own components.
|
113
125
|
|
114
126
|
`app/views/your_view.html.erb`
|
115
127
|
|
116
128
|
```erb
|
117
129
|
|
118
130
|
<!-- some other erb markup -->
|
119
|
-
<%=
|
131
|
+
<%= Components::Card.(title: "hello", body: "world") %>
|
120
132
|
<!-- some other erb markup -->
|
121
133
|
|
122
134
|
```
|
123
135
|
|
124
|
-
`app/matestack/components/registry.rb`
|
125
|
-
|
126
|
-
```ruby
|
127
|
-
module Components::Registry
|
128
|
-
|
129
|
-
Matestack::Ui::Core::Component::Registry.register_components(
|
130
|
-
card: Components::Card,
|
131
|
-
#...
|
132
|
-
)
|
133
|
-
|
134
|
-
end
|
135
|
-
```
|
136
|
-
|
137
136
|
|
138
137
|
#### Use Ruby methods as partials
|
139
138
|
|
@@ -146,23 +145,23 @@ Using this approach helps you to create a clean, readable and maintainable codeb
|
|
146
145
|
|
147
146
|
class Components::Card < Matestack::Ui::Component
|
148
147
|
|
149
|
-
|
148
|
+
required :body
|
150
149
|
optional :title
|
151
150
|
optional :image
|
152
151
|
optional :footer
|
153
152
|
|
154
153
|
def response
|
155
154
|
div class: "card shadow-sm border-0 bg-light" do
|
156
|
-
img path: image, class: "w-100" if image.present?
|
155
|
+
img path: context.image, class: "w-100" if context.image.present?
|
157
156
|
card_content
|
158
|
-
card_footer if footer.present?
|
157
|
+
card_footer if context.footer.present?
|
159
158
|
end
|
160
159
|
end
|
161
160
|
|
162
161
|
def card_content
|
163
162
|
div class: "card-body" do
|
164
|
-
|
165
|
-
paragraph class: "card-
|
163
|
+
h5 context.title if context.title.present?
|
164
|
+
paragraph context.body, class: "card-body"
|
166
165
|
end
|
167
166
|
end
|
168
167
|
|
@@ -180,7 +179,7 @@ end
|
|
180
179
|
|
181
180
|
```erb
|
182
181
|
<!-- some other erb markup -->
|
183
|
-
<%=
|
182
|
+
<%= Components::Card.(title: "hello", body: "world", footer: "foo") %>
|
184
183
|
<!-- some other erb markup -->
|
185
184
|
```
|
186
185
|
|
@@ -198,7 +197,7 @@ class Components::BlueCard < Components::Card
|
|
198
197
|
|
199
198
|
def response
|
200
199
|
div class: "card shadow-sm border-0 bg-primary text-white" do
|
201
|
-
img path: image, class: "w-100" if image.present?
|
200
|
+
img path: context.image, class: "w-100" if context.image.present?
|
202
201
|
card_content #defined in parent class
|
203
202
|
card_footer if footer.present? #defined in parent class
|
204
203
|
end
|
@@ -208,24 +207,11 @@ end
|
|
208
207
|
|
209
208
|
```
|
210
209
|
|
211
|
-
`app/matestack/components/registry.rb`
|
212
|
-
|
213
|
-
```ruby
|
214
|
-
module Components::Registry
|
215
|
-
|
216
|
-
Matestack::Ui::Core::Component::Registry.register_components(
|
217
|
-
blue_card: Components::BlueCard,
|
218
|
-
#...
|
219
|
-
)
|
220
|
-
|
221
|
-
end
|
222
|
-
```
|
223
|
-
|
224
210
|
`app/views/your_view.html.erb`
|
225
211
|
|
226
212
|
```erb
|
227
213
|
<!-- some other erb markup -->
|
228
|
-
<%=
|
214
|
+
<%= Components::BlueCard.(title: "hello", body: "world") %>
|
229
215
|
<!-- some other erb markup -->
|
230
216
|
```
|
231
217
|
|
@@ -240,15 +226,15 @@ You decide when using a Ruby method partial should be replaced by another self c
|
|
240
226
|
|
241
227
|
class Components::Card < Matestack::Ui::Component
|
242
228
|
|
243
|
-
|
229
|
+
required :body
|
244
230
|
optional :title
|
245
231
|
optional :image
|
246
232
|
|
247
233
|
def response
|
248
234
|
div class: "card shadow-sm border-0 bg-light" do
|
249
|
-
img path: image, class: "w-100" if image.present?
|
235
|
+
img path: context.image, class: "w-100" if context.image.present?
|
250
236
|
# calling the CardBody component rather than using Ruby method partials
|
251
|
-
|
237
|
+
Components::CardBody.(title: context.title, body: context.body)
|
252
238
|
end
|
253
239
|
end
|
254
240
|
|
@@ -261,15 +247,15 @@ end
|
|
261
247
|
|
262
248
|
class Components::CardBody < Matestack::Ui::Component
|
263
249
|
|
264
|
-
|
250
|
+
required :body
|
265
251
|
optional :title
|
266
252
|
|
267
253
|
def response
|
268
254
|
# Just an example. Would make more sense, if this component had
|
269
255
|
# a more complex structure
|
270
256
|
div class: "card-body" do
|
271
|
-
|
272
|
-
paragraph class: "card-
|
257
|
+
h5 context.title if context.title.present?
|
258
|
+
paragraph context.body, class: "card-body"
|
273
259
|
end
|
274
260
|
end
|
275
261
|
|
@@ -278,20 +264,6 @@ end
|
|
278
264
|
```
|
279
265
|
|
280
266
|
|
281
|
-
`app/matestack/components/registry.rb`
|
282
|
-
|
283
|
-
```ruby
|
284
|
-
module Components::Registry
|
285
|
-
|
286
|
-
Matestack::Ui::Core::Component::Registry.register_components(
|
287
|
-
card: Components::Card,
|
288
|
-
card_body: Components::CardBody,
|
289
|
-
#...
|
290
|
-
)
|
291
|
-
|
292
|
-
end
|
293
|
-
```
|
294
|
-
|
295
267
|
#### Yield components into components
|
296
268
|
|
297
269
|
Sometimes it's not enough to just pass simple data into a component. No worries! You can just yield a block into your components!
|
@@ -304,17 +276,17 @@ Using this approach gives you more flexibility when using your UI components. Of
|
|
304
276
|
|
305
277
|
class Components::Card < Matestack::Ui::Component
|
306
278
|
|
307
|
-
|
279
|
+
required :body
|
308
280
|
optional :title
|
309
281
|
optional :image
|
310
282
|
|
311
283
|
def response
|
312
284
|
div class: "card shadow-sm border-0 bg-light" do
|
313
|
-
img path: image, class: "w-100" if image.present?
|
314
|
-
|
285
|
+
img path: context.image, class: "w-100" if context.image.present?
|
286
|
+
Components::CardBody.() do
|
315
287
|
# yielding a block into the card_body component
|
316
|
-
|
317
|
-
paragraph class: "card-
|
288
|
+
h5 context.title if context.title.present?
|
289
|
+
paragraph context.body, class: "card-body"
|
318
290
|
end
|
319
291
|
end
|
320
292
|
end
|
@@ -333,7 +305,7 @@ class Components::CardBody < Matestack::Ui::Component
|
|
333
305
|
# Just an example. Would make more sense, if this component had
|
334
306
|
# a more complex structure
|
335
307
|
div class: "card-body" do
|
336
|
-
|
308
|
+
yield if block_given?
|
337
309
|
end
|
338
310
|
end
|
339
311
|
|
@@ -352,27 +324,26 @@ Slots help you to build complex UI components with multiple named content placeh
|
|
352
324
|
|
353
325
|
class Components::Card < Matestack::Ui::Component
|
354
326
|
|
355
|
-
|
327
|
+
required :body
|
356
328
|
optional :title
|
357
329
|
optional :image
|
358
330
|
|
359
331
|
def response
|
360
332
|
div class: "card shadow-sm border-0 bg-light" do
|
361
|
-
img path: image, class: "w-100" if image.present?
|
362
|
-
|
333
|
+
img path: context.image, class: "w-100" if context.image.present?
|
334
|
+
Components::CardBody.(slots: {
|
335
|
+
heading: method(:heading_slot),
|
336
|
+
body: method(:body_slot)
|
337
|
+
})
|
363
338
|
end
|
364
339
|
end
|
365
340
|
|
366
341
|
def heading_slot
|
367
|
-
|
368
|
-
heading size: 5, text: title if title.present?
|
369
|
-
end
|
342
|
+
h5 context.title if context.title.present?
|
370
343
|
end
|
371
344
|
|
372
345
|
def body_slot
|
373
|
-
|
374
|
-
paragraph class: "card-text", text: body
|
375
|
-
end
|
346
|
+
paragraph context.body, class: "card-body"
|
376
347
|
end
|
377
348
|
|
378
349
|
end
|
@@ -384,17 +355,17 @@ end
|
|
384
355
|
|
385
356
|
class Components::CardBody < Matestack::Ui::Component
|
386
357
|
|
387
|
-
|
358
|
+
required :slots
|
388
359
|
|
389
360
|
def response
|
390
361
|
# Just an example. Would make more sense, if this component had
|
391
362
|
# a more complex structure
|
392
363
|
div class: "card-body" do
|
393
364
|
div class: "heading-section" do
|
394
|
-
slot
|
365
|
+
slot :heading
|
395
366
|
end
|
396
367
|
div class: "body-section" do
|
397
|
-
slot
|
368
|
+
slot :body
|
398
369
|
end
|
399
370
|
end
|
400
371
|
end
|
@@ -421,7 +392,7 @@ class Components::SomeComponent < Matestack::Ui::Component
|
|
421
392
|
|
422
393
|
def response
|
423
394
|
onclick emit: "some_event" do
|
424
|
-
button
|
395
|
+
button "click me"
|
425
396
|
end
|
426
397
|
toggle show_on: "some_event", hide_after: 5000 do
|
427
398
|
plain "Oh yes! You clicked me!"
|
@@ -445,7 +416,7 @@ class Components::SomeComponent < Matestack::Ui::Component
|
|
445
416
|
|
446
417
|
def response
|
447
418
|
action my_action_config do
|
448
|
-
button
|
419
|
+
button "click me"
|
449
420
|
end
|
450
421
|
toggle show_on: "some_event", hide_after: 5000 do
|
451
422
|
plain "Success!"
|
@@ -478,16 +449,10 @@ Events emitted by the \"form\" component can be used to toggle parts of the UI.
|
|
478
449
|
|
479
450
|
class Components::SomeComponent < Matestack::Ui::Component
|
480
451
|
|
481
|
-
def prepare
|
482
|
-
@new_active_record_instance = MyActiveRecordModel.new
|
483
|
-
end
|
484
|
-
|
485
452
|
def response
|
486
|
-
|
453
|
+
matestack_form my_form_config do
|
487
454
|
form_input key: :some_attribute, type: :text
|
488
|
-
|
489
|
-
button text: "click me"
|
490
|
-
end
|
455
|
+
button "click me", type: :submit
|
491
456
|
end
|
492
457
|
toggle show_on: "submitted", hide_after: 5000 do
|
493
458
|
span class: "message success" do
|
@@ -503,7 +468,7 @@ class Components::SomeComponent < Matestack::Ui::Component
|
|
503
468
|
|
504
469
|
def my_form_config
|
505
470
|
{
|
506
|
-
for:
|
471
|
+
for: MyActiveRecordModel.new,
|
507
472
|
path: some_rails_route_path,
|
508
473
|
method: :post,
|
509
474
|
success: {
|
@@ -521,7 +486,7 @@ end
|
|
521
486
|
|
522
487
|
#### Implement asynchronous, event-based UI rerendering in pure Ruby
|
523
488
|
|
524
|
-
Using
|
489
|
+
Using Matestack's built-in event system, you can rerender parts of the UI on client side events, such as form or action submissions. Even server side events pushed via ActionCable may be received!
|
525
490
|
The \"async\" component requests a new version of its body at the server via an HTTP GET request after receiving the configured event. After successfu server response, the DOM of the \"async\" component gets updated. Everything else stays untouched.
|
526
491
|
|
527
492
|
`app/matestack/components/some_component.rb`
|
@@ -531,14 +496,14 @@ The \"async\" component requests a new version of its body at the server via an
|
|
531
496
|
class Components::SomeComponent < Matestack::Ui::Component
|
532
497
|
|
533
498
|
def response
|
534
|
-
|
499
|
+
matestack_form my_form_config do
|
535
500
|
#...
|
536
501
|
end
|
537
502
|
#...
|
538
503
|
async rerender_on: "submitted", id: "my-model-list" do
|
539
504
|
ul do
|
540
505
|
MyActiveRecordModel.last(5).each do |model|
|
541
|
-
li
|
506
|
+
li model.some_attribute
|
542
507
|
end
|
543
508
|
end
|
544
509
|
end
|
@@ -572,14 +537,14 @@ The \"cable\" component can be configured to receive events and data pushed via
|
|
572
537
|
class Components::SomeComponent < Matestack::Ui::Component
|
573
538
|
|
574
539
|
def response
|
575
|
-
|
540
|
+
matestack_form my_form_config do
|
576
541
|
#...
|
577
542
|
end
|
578
543
|
#...
|
579
544
|
ul do
|
580
545
|
cable prepend_on: "new_element_created", id: "mocked-instance-list" do
|
581
546
|
MyActiveRecordModel.last(5).each do |model|
|
582
|
-
li
|
547
|
+
li model
|
583
548
|
end
|
584
549
|
end
|
585
550
|
end
|
@@ -595,7 +560,7 @@ end
|
|
595
560
|
# within your controller action handling the form input
|
596
561
|
ActionCable.server.broadcast("matestack_ui_core", {
|
597
562
|
event: "new_element_created",
|
598
|
-
data:
|
563
|
+
data: "<li>foo</li>" # or better: calling a component here
|
599
564
|
})
|
600
565
|
|
601
566
|
```
|
@@ -628,11 +593,11 @@ end
|
|
628
593
|
```ruby
|
629
594
|
class Components::MyVueJsComponent < Matestack::Ui::VueJsComponent
|
630
595
|
|
631
|
-
|
596
|
+
vue_name "my-vue-js-component"
|
632
597
|
|
633
598
|
def response
|
634
599
|
div class: "my-vue-js-component" do
|
635
|
-
button
|
600
|
+
button "@click": "increaseValue"
|
636
601
|
br
|
637
602
|
plain "{{ dynamicValue }}!"
|
638
603
|
end
|
@@ -644,7 +609,7 @@ end
|
|
644
609
|
`app/matestack/components/my_vue_js_component.js`
|
645
610
|
|
646
611
|
```javascript
|
647
|
-
|
612
|
+
Vue.component('my-vue-js-component', {
|
648
613
|
mixins: [MatestackUiCore.componentMixin],
|
649
614
|
data: () => {
|
650
615
|
return {
|
@@ -654,7 +619,7 @@ MatestackUiCore.Vue.component('my-vue-js-component', {
|
|
654
619
|
methods: {
|
655
620
|
increaseValue(){
|
656
621
|
this.dynamicValue++
|
657
|
-
MatestackUiCore.
|
622
|
+
MatestackUiCore.eventHub.$emit("some_event")
|
658
623
|
}
|
659
624
|
}
|
660
625
|
});
|
@@ -678,15 +643,15 @@ class SomeApp::App < Matestack::Ui::App
|
|
678
643
|
def response
|
679
644
|
nav do
|
680
645
|
transition path: page1_path do
|
681
|
-
button
|
646
|
+
button "Page 1"
|
682
647
|
end
|
683
648
|
transition path: page2_path do
|
684
|
-
button
|
649
|
+
button "Page 2"
|
685
650
|
end
|
686
651
|
end
|
687
652
|
main do
|
688
653
|
div class: "container" do
|
689
|
-
|
654
|
+
yield
|
690
655
|
end
|
691
656
|
end
|
692
657
|
end
|
@@ -740,8 +705,7 @@ Work with controllers, actions and routing as you're used to! Controller hooks (
|
|
740
705
|
|
741
706
|
class SomeController < ApplicationController
|
742
707
|
|
743
|
-
include Matestack::Ui::Core::
|
744
|
-
include Components::Registry
|
708
|
+
include Matestack::Ui::Core::Helper
|
745
709
|
|
746
710
|
matestack_app SomeApp::App
|
747
711
|
|
@@ -785,23 +749,21 @@ class SomeApp::App < Matestack::Ui::App
|
|
785
749
|
def response
|
786
750
|
nav do
|
787
751
|
transition path: page1_path do
|
788
|
-
button
|
752
|
+
button "Page 1"
|
789
753
|
end
|
790
754
|
transition path: page2_path do
|
791
|
-
button
|
755
|
+
button "Page 2"
|
792
756
|
end
|
793
757
|
end
|
794
758
|
main do
|
795
759
|
div class: "container" do
|
796
|
-
|
760
|
+
yield
|
797
761
|
end
|
798
762
|
end
|
799
763
|
end
|
800
764
|
|
801
765
|
def loading_state_element
|
802
|
-
|
803
|
-
div class: 'some-loading-element-styles'
|
804
|
-
end
|
766
|
+
div class: 'some-loading-element-styles'
|
805
767
|
end
|
806
768
|
|
807
769
|
end
|
@@ -837,4 +799,5 @@ end
|
|
837
799
|
```
|
838
800
|
|
839
801
|
## License
|
840
|
-
|
802
|
+
|
803
|
+
`matestack-ui-core` is an Open Source project licensed under the terms of the [MIT license](./LICENSE)
|