matestack-ui-core 1.3.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 +98 -113
- 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 +68 -61
- 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 +77 -408
- 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 -18
- 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
|
|
@@ -15,6 +26,8 @@ Reactivity included if desired.
|
|
15
26
|
|
16
27
|
You end up writing 50% less code while increasing productivity, maintainability and developer happiness. Work with pure Ruby. If necessary, extend with pure JavaScript. No Opal involved.
|
17
28
|
|
29
|
+
[<img src="https://img.youtube.com/vi/Mue5gs6Wtq4/0.jpg" width="350">](https://www.youtube.com/watch?v=Mue5gs6Wtq4)
|
30
|
+
|
18
31
|
The main goals are:
|
19
32
|
|
20
33
|
- More maintainable UI code, using a component-based structure written in Ruby
|
@@ -25,13 +38,35 @@ The main goals are:
|
|
25
38
|
it alongside your classic views and incrementally turn your Rails-App into a
|
26
39
|
dynamic Web-App.
|
27
40
|
|
41
|
+
## Compatibility
|
42
|
+
|
43
|
+
### Ruby/Rails
|
44
|
+
|
45
|
+
`matestack-ui-core` is tested against:
|
46
|
+
|
47
|
+
- Rails 6.1.1 + Ruby 3.0.0
|
48
|
+
- Rails 6.1.1 + Ruby 2.7.2
|
49
|
+
- Rails 6.0.3.4 + Ruby 2.6.6
|
50
|
+
- Rails 5.2.4.4 + Ruby 2.6.6
|
51
|
+
|
52
|
+
Rails versions below 5.2 are not supported.
|
53
|
+
|
54
|
+
### Vue.js
|
55
|
+
|
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
|
60
|
+
|
61
|
+
Vue 3 / Vuex 4 update is planned for Q2 2021.
|
62
|
+
|
28
63
|
## Documentation/Installation
|
29
64
|
|
30
65
|
Documentation can be found [here](https://docs.matestack.io)
|
31
66
|
|
32
67
|
## Getting started
|
33
68
|
|
34
|
-
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)
|
35
70
|
|
36
71
|
## Changelog
|
37
72
|
|
@@ -66,16 +101,16 @@ The Ruby method \"div\" for example calls one of the static core components, res
|
|
66
101
|
|
67
102
|
class Components::Card < Matestack::Ui::Component
|
68
103
|
|
69
|
-
|
104
|
+
required :body
|
70
105
|
optional :title
|
71
106
|
optional :image
|
72
107
|
|
73
108
|
def response
|
74
109
|
div class: "card shadow-sm border-0 bg-light" do
|
75
|
-
img path: image, class: "w-100" if image.present?
|
110
|
+
img path: context.image, class: "w-100" if context.image.present?
|
76
111
|
div class: "card-body" do
|
77
|
-
|
78
|
-
paragraph class: "card-text"
|
112
|
+
h5 context.title if context.title.present?
|
113
|
+
paragraph context.body, class: "card-text"
|
79
114
|
end
|
80
115
|
end
|
81
116
|
end
|
@@ -86,32 +121,18 @@ end
|
|
86
121
|
|
87
122
|
#### Use your Ruby UI components on your existing Rails views
|
88
123
|
|
89
|
-
|
90
|
-
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.
|
91
125
|
|
92
126
|
`app/views/your_view.html.erb`
|
93
127
|
|
94
128
|
```erb
|
95
129
|
|
96
130
|
<!-- some other erb markup -->
|
97
|
-
<%=
|
131
|
+
<%= Components::Card.(title: "hello", body: "world") %>
|
98
132
|
<!-- some other erb markup -->
|
99
133
|
|
100
134
|
```
|
101
135
|
|
102
|
-
`app/matestack/components/registry.rb`
|
103
|
-
|
104
|
-
```ruby
|
105
|
-
module Components::Registry
|
106
|
-
|
107
|
-
Matestack::Ui::Core::Component::Registry.register_components(
|
108
|
-
card: Components::Card,
|
109
|
-
#...
|
110
|
-
)
|
111
|
-
|
112
|
-
end
|
113
|
-
```
|
114
|
-
|
115
136
|
|
116
137
|
#### Use Ruby methods as partials
|
117
138
|
|
@@ -124,23 +145,23 @@ Using this approach helps you to create a clean, readable and maintainable codeb
|
|
124
145
|
|
125
146
|
class Components::Card < Matestack::Ui::Component
|
126
147
|
|
127
|
-
|
148
|
+
required :body
|
128
149
|
optional :title
|
129
150
|
optional :image
|
130
151
|
optional :footer
|
131
152
|
|
132
153
|
def response
|
133
154
|
div class: "card shadow-sm border-0 bg-light" do
|
134
|
-
img path: image, class: "w-100" if image.present?
|
155
|
+
img path: context.image, class: "w-100" if context.image.present?
|
135
156
|
card_content
|
136
|
-
card_footer if footer.present?
|
157
|
+
card_footer if context.footer.present?
|
137
158
|
end
|
138
159
|
end
|
139
160
|
|
140
161
|
def card_content
|
141
162
|
div class: "card-body" do
|
142
|
-
|
143
|
-
paragraph class: "card-
|
163
|
+
h5 context.title if context.title.present?
|
164
|
+
paragraph context.body, class: "card-body"
|
144
165
|
end
|
145
166
|
end
|
146
167
|
|
@@ -158,7 +179,7 @@ end
|
|
158
179
|
|
159
180
|
```erb
|
160
181
|
<!-- some other erb markup -->
|
161
|
-
<%=
|
182
|
+
<%= Components::Card.(title: "hello", body: "world", footer: "foo") %>
|
162
183
|
<!-- some other erb markup -->
|
163
184
|
```
|
164
185
|
|
@@ -176,7 +197,7 @@ class Components::BlueCard < Components::Card
|
|
176
197
|
|
177
198
|
def response
|
178
199
|
div class: "card shadow-sm border-0 bg-primary text-white" do
|
179
|
-
img path: image, class: "w-100" if image.present?
|
200
|
+
img path: context.image, class: "w-100" if context.image.present?
|
180
201
|
card_content #defined in parent class
|
181
202
|
card_footer if footer.present? #defined in parent class
|
182
203
|
end
|
@@ -186,24 +207,11 @@ end
|
|
186
207
|
|
187
208
|
```
|
188
209
|
|
189
|
-
`app/matestack/components/registry.rb`
|
190
|
-
|
191
|
-
```ruby
|
192
|
-
module Components::Registry
|
193
|
-
|
194
|
-
Matestack::Ui::Core::Component::Registry.register_components(
|
195
|
-
blue_card: Components::BlueCard,
|
196
|
-
#...
|
197
|
-
)
|
198
|
-
|
199
|
-
end
|
200
|
-
```
|
201
|
-
|
202
210
|
`app/views/your_view.html.erb`
|
203
211
|
|
204
212
|
```erb
|
205
213
|
<!-- some other erb markup -->
|
206
|
-
<%=
|
214
|
+
<%= Components::BlueCard.(title: "hello", body: "world") %>
|
207
215
|
<!-- some other erb markup -->
|
208
216
|
```
|
209
217
|
|
@@ -218,15 +226,15 @@ You decide when using a Ruby method partial should be replaced by another self c
|
|
218
226
|
|
219
227
|
class Components::Card < Matestack::Ui::Component
|
220
228
|
|
221
|
-
|
229
|
+
required :body
|
222
230
|
optional :title
|
223
231
|
optional :image
|
224
232
|
|
225
233
|
def response
|
226
234
|
div class: "card shadow-sm border-0 bg-light" do
|
227
|
-
img path: image, class: "w-100" if image.present?
|
235
|
+
img path: context.image, class: "w-100" if context.image.present?
|
228
236
|
# calling the CardBody component rather than using Ruby method partials
|
229
|
-
|
237
|
+
Components::CardBody.(title: context.title, body: context.body)
|
230
238
|
end
|
231
239
|
end
|
232
240
|
|
@@ -239,15 +247,15 @@ end
|
|
239
247
|
|
240
248
|
class Components::CardBody < Matestack::Ui::Component
|
241
249
|
|
242
|
-
|
250
|
+
required :body
|
243
251
|
optional :title
|
244
252
|
|
245
253
|
def response
|
246
254
|
# Just an example. Would make more sense, if this component had
|
247
255
|
# a more complex structure
|
248
256
|
div class: "card-body" do
|
249
|
-
|
250
|
-
paragraph class: "card-
|
257
|
+
h5 context.title if context.title.present?
|
258
|
+
paragraph context.body, class: "card-body"
|
251
259
|
end
|
252
260
|
end
|
253
261
|
|
@@ -256,20 +264,6 @@ end
|
|
256
264
|
```
|
257
265
|
|
258
266
|
|
259
|
-
`app/matestack/components/registry.rb`
|
260
|
-
|
261
|
-
```ruby
|
262
|
-
module Components::Registry
|
263
|
-
|
264
|
-
Matestack::Ui::Core::Component::Registry.register_components(
|
265
|
-
card: Components::Card,
|
266
|
-
card_body: Components::CardBody,
|
267
|
-
#...
|
268
|
-
)
|
269
|
-
|
270
|
-
end
|
271
|
-
```
|
272
|
-
|
273
267
|
#### Yield components into components
|
274
268
|
|
275
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!
|
@@ -282,17 +276,17 @@ Using this approach gives you more flexibility when using your UI components. Of
|
|
282
276
|
|
283
277
|
class Components::Card < Matestack::Ui::Component
|
284
278
|
|
285
|
-
|
279
|
+
required :body
|
286
280
|
optional :title
|
287
281
|
optional :image
|
288
282
|
|
289
283
|
def response
|
290
284
|
div class: "card shadow-sm border-0 bg-light" do
|
291
|
-
img path: image, class: "w-100" if image.present?
|
292
|
-
|
285
|
+
img path: context.image, class: "w-100" if context.image.present?
|
286
|
+
Components::CardBody.() do
|
293
287
|
# yielding a block into the card_body component
|
294
|
-
|
295
|
-
paragraph class: "card-
|
288
|
+
h5 context.title if context.title.present?
|
289
|
+
paragraph context.body, class: "card-body"
|
296
290
|
end
|
297
291
|
end
|
298
292
|
end
|
@@ -311,7 +305,7 @@ class Components::CardBody < Matestack::Ui::Component
|
|
311
305
|
# Just an example. Would make more sense, if this component had
|
312
306
|
# a more complex structure
|
313
307
|
div class: "card-body" do
|
314
|
-
|
308
|
+
yield if block_given?
|
315
309
|
end
|
316
310
|
end
|
317
311
|
|
@@ -330,27 +324,26 @@ Slots help you to build complex UI components with multiple named content placeh
|
|
330
324
|
|
331
325
|
class Components::Card < Matestack::Ui::Component
|
332
326
|
|
333
|
-
|
327
|
+
required :body
|
334
328
|
optional :title
|
335
329
|
optional :image
|
336
330
|
|
337
331
|
def response
|
338
332
|
div class: "card shadow-sm border-0 bg-light" do
|
339
|
-
img path: image, class: "w-100" if image.present?
|
340
|
-
|
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
|
+
})
|
341
338
|
end
|
342
339
|
end
|
343
340
|
|
344
341
|
def heading_slot
|
345
|
-
|
346
|
-
heading size: 5, text: title if title.present?
|
347
|
-
end
|
342
|
+
h5 context.title if context.title.present?
|
348
343
|
end
|
349
344
|
|
350
345
|
def body_slot
|
351
|
-
|
352
|
-
paragraph class: "card-text", text: body
|
353
|
-
end
|
346
|
+
paragraph context.body, class: "card-body"
|
354
347
|
end
|
355
348
|
|
356
349
|
end
|
@@ -362,17 +355,17 @@ end
|
|
362
355
|
|
363
356
|
class Components::CardBody < Matestack::Ui::Component
|
364
357
|
|
365
|
-
|
358
|
+
required :slots
|
366
359
|
|
367
360
|
def response
|
368
361
|
# Just an example. Would make more sense, if this component had
|
369
362
|
# a more complex structure
|
370
363
|
div class: "card-body" do
|
371
364
|
div class: "heading-section" do
|
372
|
-
slot
|
365
|
+
slot :heading
|
373
366
|
end
|
374
367
|
div class: "body-section" do
|
375
|
-
slot
|
368
|
+
slot :body
|
376
369
|
end
|
377
370
|
end
|
378
371
|
end
|
@@ -399,7 +392,7 @@ class Components::SomeComponent < Matestack::Ui::Component
|
|
399
392
|
|
400
393
|
def response
|
401
394
|
onclick emit: "some_event" do
|
402
|
-
button
|
395
|
+
button "click me"
|
403
396
|
end
|
404
397
|
toggle show_on: "some_event", hide_after: 5000 do
|
405
398
|
plain "Oh yes! You clicked me!"
|
@@ -423,7 +416,7 @@ class Components::SomeComponent < Matestack::Ui::Component
|
|
423
416
|
|
424
417
|
def response
|
425
418
|
action my_action_config do
|
426
|
-
button
|
419
|
+
button "click me"
|
427
420
|
end
|
428
421
|
toggle show_on: "some_event", hide_after: 5000 do
|
429
422
|
plain "Success!"
|
@@ -456,16 +449,10 @@ Events emitted by the \"form\" component can be used to toggle parts of the UI.
|
|
456
449
|
|
457
450
|
class Components::SomeComponent < Matestack::Ui::Component
|
458
451
|
|
459
|
-
def prepare
|
460
|
-
@new_active_record_instance = MyActiveRecordModel.new
|
461
|
-
end
|
462
|
-
|
463
452
|
def response
|
464
|
-
|
453
|
+
matestack_form my_form_config do
|
465
454
|
form_input key: :some_attribute, type: :text
|
466
|
-
|
467
|
-
button text: "click me"
|
468
|
-
end
|
455
|
+
button "click me", type: :submit
|
469
456
|
end
|
470
457
|
toggle show_on: "submitted", hide_after: 5000 do
|
471
458
|
span class: "message success" do
|
@@ -481,7 +468,7 @@ class Components::SomeComponent < Matestack::Ui::Component
|
|
481
468
|
|
482
469
|
def my_form_config
|
483
470
|
{
|
484
|
-
for:
|
471
|
+
for: MyActiveRecordModel.new,
|
485
472
|
path: some_rails_route_path,
|
486
473
|
method: :post,
|
487
474
|
success: {
|
@@ -499,7 +486,7 @@ end
|
|
499
486
|
|
500
487
|
#### Implement asynchronous, event-based UI rerendering in pure Ruby
|
501
488
|
|
502
|
-
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!
|
503
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.
|
504
491
|
|
505
492
|
`app/matestack/components/some_component.rb`
|
@@ -509,14 +496,14 @@ The \"async\" component requests a new version of its body at the server via an
|
|
509
496
|
class Components::SomeComponent < Matestack::Ui::Component
|
510
497
|
|
511
498
|
def response
|
512
|
-
|
499
|
+
matestack_form my_form_config do
|
513
500
|
#...
|
514
501
|
end
|
515
502
|
#...
|
516
503
|
async rerender_on: "submitted", id: "my-model-list" do
|
517
504
|
ul do
|
518
505
|
MyActiveRecordModel.last(5).each do |model|
|
519
|
-
li
|
506
|
+
li model.some_attribute
|
520
507
|
end
|
521
508
|
end
|
522
509
|
end
|
@@ -550,14 +537,14 @@ The \"cable\" component can be configured to receive events and data pushed via
|
|
550
537
|
class Components::SomeComponent < Matestack::Ui::Component
|
551
538
|
|
552
539
|
def response
|
553
|
-
|
540
|
+
matestack_form my_form_config do
|
554
541
|
#...
|
555
542
|
end
|
556
543
|
#...
|
557
544
|
ul do
|
558
545
|
cable prepend_on: "new_element_created", id: "mocked-instance-list" do
|
559
546
|
MyActiveRecordModel.last(5).each do |model|
|
560
|
-
li
|
547
|
+
li model
|
561
548
|
end
|
562
549
|
end
|
563
550
|
end
|
@@ -573,7 +560,7 @@ end
|
|
573
560
|
# within your controller action handling the form input
|
574
561
|
ActionCable.server.broadcast("matestack_ui_core", {
|
575
562
|
event: "new_element_created",
|
576
|
-
data:
|
563
|
+
data: "<li>foo</li>" # or better: calling a component here
|
577
564
|
})
|
578
565
|
|
579
566
|
```
|
@@ -606,11 +593,11 @@ end
|
|
606
593
|
```ruby
|
607
594
|
class Components::MyVueJsComponent < Matestack::Ui::VueJsComponent
|
608
595
|
|
609
|
-
|
596
|
+
vue_name "my-vue-js-component"
|
610
597
|
|
611
598
|
def response
|
612
599
|
div class: "my-vue-js-component" do
|
613
|
-
button
|
600
|
+
button "@click": "increaseValue"
|
614
601
|
br
|
615
602
|
plain "{{ dynamicValue }}!"
|
616
603
|
end
|
@@ -622,7 +609,7 @@ end
|
|
622
609
|
`app/matestack/components/my_vue_js_component.js`
|
623
610
|
|
624
611
|
```javascript
|
625
|
-
|
612
|
+
Vue.component('my-vue-js-component', {
|
626
613
|
mixins: [MatestackUiCore.componentMixin],
|
627
614
|
data: () => {
|
628
615
|
return {
|
@@ -632,7 +619,7 @@ MatestackUiCore.Vue.component('my-vue-js-component', {
|
|
632
619
|
methods: {
|
633
620
|
increaseValue(){
|
634
621
|
this.dynamicValue++
|
635
|
-
MatestackUiCore.
|
622
|
+
MatestackUiCore.eventHub.$emit("some_event")
|
636
623
|
}
|
637
624
|
}
|
638
625
|
});
|
@@ -656,15 +643,15 @@ class SomeApp::App < Matestack::Ui::App
|
|
656
643
|
def response
|
657
644
|
nav do
|
658
645
|
transition path: page1_path do
|
659
|
-
button
|
646
|
+
button "Page 1"
|
660
647
|
end
|
661
648
|
transition path: page2_path do
|
662
|
-
button
|
649
|
+
button "Page 2"
|
663
650
|
end
|
664
651
|
end
|
665
652
|
main do
|
666
653
|
div class: "container" do
|
667
|
-
|
654
|
+
yield
|
668
655
|
end
|
669
656
|
end
|
670
657
|
end
|
@@ -718,8 +705,7 @@ Work with controllers, actions and routing as you're used to! Controller hooks (
|
|
718
705
|
|
719
706
|
class SomeController < ApplicationController
|
720
707
|
|
721
|
-
include Matestack::Ui::Core::
|
722
|
-
include Components::Registry
|
708
|
+
include Matestack::Ui::Core::Helper
|
723
709
|
|
724
710
|
matestack_app SomeApp::App
|
725
711
|
|
@@ -763,23 +749,21 @@ class SomeApp::App < Matestack::Ui::App
|
|
763
749
|
def response
|
764
750
|
nav do
|
765
751
|
transition path: page1_path do
|
766
|
-
button
|
752
|
+
button "Page 1"
|
767
753
|
end
|
768
754
|
transition path: page2_path do
|
769
|
-
button
|
755
|
+
button "Page 2"
|
770
756
|
end
|
771
757
|
end
|
772
758
|
main do
|
773
759
|
div class: "container" do
|
774
|
-
|
760
|
+
yield
|
775
761
|
end
|
776
762
|
end
|
777
763
|
end
|
778
764
|
|
779
765
|
def loading_state_element
|
780
|
-
|
781
|
-
div class: 'some-loading-element-styles'
|
782
|
-
end
|
766
|
+
div class: 'some-loading-element-styles'
|
783
767
|
end
|
784
768
|
|
785
769
|
end
|
@@ -815,4 +799,5 @@ end
|
|
815
799
|
```
|
816
800
|
|
817
801
|
## License
|
818
|
-
|
802
|
+
|
803
|
+
`matestack-ui-core` is an Open Source project licensed under the terms of the [MIT license](./LICENSE)
|