matestack-ui-core 2.0.0 → 3.0.0.rc2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/LICENSE +1 -1
- data/README.md +15 -478
- data/lib/matestack/ui/core/base.rb +24 -7
- data/lib/matestack/ui/core/context.rb +2 -2
- data/lib/matestack/ui/core/helper.rb +29 -29
- data/lib/matestack/ui/core/{app.rb → layout.rb} +6 -17
- data/lib/matestack/ui/core/page.rb +0 -50
- data/lib/matestack/ui/core/tag_helper.rb +17 -10
- data/lib/matestack/ui/core/version.rb +1 -1
- data/lib/matestack/ui/core.rb +2 -45
- data/lib/matestack/ui/layout.rb +1 -0
- data/lib/matestack/ui/page.rb +1 -1
- metadata +7 -68
- data/lib/matestack/ui/app.rb +0 -1
- data/lib/matestack/ui/core/vue_attributes.rb +0 -13
- data/lib/matestack/ui/vue_js/app/app.js +0 -40
- data/lib/matestack/ui/vue_js/app/location.js +0 -9
- data/lib/matestack/ui/vue_js/app/store.js +0 -103
- data/lib/matestack/ui/vue_js/components/action.js +0 -151
- data/lib/matestack/ui/vue_js/components/action.rb +0 -46
- data/lib/matestack/ui/vue_js/components/async.js +0 -110
- data/lib/matestack/ui/vue_js/components/async.rb +0 -84
- data/lib/matestack/ui/vue_js/components/cable.js +0 -100
- data/lib/matestack/ui/vue_js/components/cable.rb +0 -69
- data/lib/matestack/ui/vue_js/components/collection/content.js +0 -97
- data/lib/matestack/ui/vue_js/components/collection/content.rb +0 -32
- data/lib/matestack/ui/vue_js/components/collection/filter.js +0 -45
- data/lib/matestack/ui/vue_js/components/collection/filter.rb +0 -29
- data/lib/matestack/ui/vue_js/components/collection/filter_reset.rb +0 -19
- data/lib/matestack/ui/vue_js/components/collection/helper.rb +0 -128
- data/lib/matestack/ui/vue_js/components/collection/next.rb +0 -19
- data/lib/matestack/ui/vue_js/components/collection/order.js +0 -46
- data/lib/matestack/ui/vue_js/components/collection/order.rb +0 -28
- data/lib/matestack/ui/vue_js/components/collection/order_toggle.rb +0 -21
- data/lib/matestack/ui/vue_js/components/collection/order_toggle_indicator.rb +0 -30
- data/lib/matestack/ui/vue_js/components/collection/page.rb +0 -21
- data/lib/matestack/ui/vue_js/components/collection/previous.rb +0 -19
- data/lib/matestack/ui/vue_js/components/form/base.rb +0 -167
- data/lib/matestack/ui/vue_js/components/form/checkbox.js +0 -15
- data/lib/matestack/ui/vue_js/components/form/checkbox.rb +0 -105
- data/lib/matestack/ui/vue_js/components/form/checkbox_mixin.js +0 -83
- data/lib/matestack/ui/vue_js/components/form/context.rb +0 -15
- data/lib/matestack/ui/vue_js/components/form/form.js +0 -275
- data/lib/matestack/ui/vue_js/components/form/form.rb +0 -64
- data/lib/matestack/ui/vue_js/components/form/input.js +0 -15
- data/lib/matestack/ui/vue_js/components/form/input.rb +0 -37
- data/lib/matestack/ui/vue_js/components/form/input_mixin.js +0 -58
- data/lib/matestack/ui/vue_js/components/form/radio.js +0 -15
- data/lib/matestack/ui/vue_js/components/form/radio.rb +0 -76
- data/lib/matestack/ui/vue_js/components/form/radio_mixin.js +0 -65
- data/lib/matestack/ui/vue_js/components/form/select.js +0 -15
- data/lib/matestack/ui/vue_js/components/form/select.rb +0 -88
- data/lib/matestack/ui/vue_js/components/form/select_mixin.js +0 -61
- data/lib/matestack/ui/vue_js/components/form/textarea.js +0 -15
- data/lib/matestack/ui/vue_js/components/form/textarea.rb +0 -37
- data/lib/matestack/ui/vue_js/components/form/textarea_mixin.js +0 -44
- data/lib/matestack/ui/vue_js/components/isolated.js +0 -108
- data/lib/matestack/ui/vue_js/components/isolated.rb +0 -86
- data/lib/matestack/ui/vue_js/components/mixin.js +0 -22
- data/lib/matestack/ui/vue_js/components/onclick.js +0 -19
- data/lib/matestack/ui/vue_js/components/onclick.rb +0 -37
- data/lib/matestack/ui/vue_js/components/toggle.js +0 -71
- data/lib/matestack/ui/vue_js/components/toggle.rb +0 -38
- data/lib/matestack/ui/vue_js/components/transition.js +0 -42
- data/lib/matestack/ui/vue_js/components/transition.rb +0 -40
- data/lib/matestack/ui/vue_js/components.rb +0 -94
- data/lib/matestack/ui/vue_js/event_hub.js +0 -5
- data/lib/matestack/ui/vue_js/helpers/query_params_helper.js +0 -56
- data/lib/matestack/ui/vue_js/index.js +0 -52
- data/lib/matestack/ui/vue_js/initialize.rb +0 -5
- data/lib/matestack/ui/vue_js/page/content.js +0 -23
- data/lib/matestack/ui/vue_js/vue.rb +0 -63
- data/lib/matestack/ui/vue_js_component.rb +0 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: bca440b8da1782dde2827f08cef9915e72b715d5b9e08b1d89c1e1d816bf5d01
|
4
|
+
data.tar.gz: a8489ec244c77cc02c6b7bb4549ee8cd009a7d6a805ce00c032efd3306aa26ca
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 6e65668a7af15e0c358ac8d8e22d6e2defc0129467296ab56d9664145b75a564b6b9d3b33b9df84f5f784854d63da721f450b15575839dcab1a82b68c712f611
|
7
|
+
data.tar.gz: eba2e0d427f917bdf201755c01a4a8ef842f5be0e50fa19a0c9cc7d59b56ae33203b820500e16b6a645d98adad8a8cc50fdfc103614de13421c105cce10fc47c
|
data/LICENSE
CHANGED
data/README.md
CHANGED
@@ -6,44 +6,18 @@
|
|
6
6
|
|
7
7
|
![matestack logo](./logo.png)
|
8
8
|
|
9
|
-
# matestack-ui-core |
|
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
|
-
----
|
9
|
+
# matestack-ui-core | Component based web UIs in pure Ruby for Rails
|
21
10
|
|
22
11
|
Boost your productivity & easily create component based web UIs in pure Ruby.
|
23
|
-
Reactivity included if desired.
|
24
|
-
|
25
|
-
`matestack-ui-core` enables you to craft maintainable web UIs in pure Ruby, skipping ERB and HTML. UI code becomes a native and fun part of your Rails app. Thanks to reactive core components, reactivity can be optionally added on top without writing JavaScript, just using a simple Ruby DSL.
|
26
|
-
|
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.
|
28
|
-
|
29
|
-
[<img src="https://img.youtube.com/vi/Mue5gs6Wtq4/0.jpg" width="350">](https://www.youtube.com/watch?v=Mue5gs6Wtq4)
|
30
|
-
|
31
|
-
The main goals are:
|
32
|
-
|
33
|
-
- More maintainable UI code, using a component-based structure written in Ruby
|
34
|
-
- Increased development speed and happiness, offering prebuilt UI-Components for typical requirements
|
35
|
-
- Modern, dynamic UI feeling without the need to implement a separate JavaScript Application
|
36
12
|
|
37
|
-
`matestack-ui-core` can progressively replace the classic Rails-View-Layer. You are able to use
|
38
|
-
it alongside your classic views
|
39
|
-
dynamic Web-App.
|
13
|
+
`matestack-ui-core` enables you to craft maintainable web UIs in pure Ruby, skipping ERB and HTML. UI code becomes a native and fun part of your Rails app. `matestack-ui-core` can progressively replace the classic Rails-View-Layer. You are able to use
|
14
|
+
it alongside your classic views.
|
40
15
|
|
41
16
|
## Compatibility
|
42
17
|
|
43
|
-
### Ruby/Rails
|
44
|
-
|
45
18
|
`matestack-ui-core` is tested against:
|
46
19
|
|
20
|
+
- Rails 7.0.1 + Ruby 3.0.0
|
47
21
|
- Rails 6.1.1 + Ruby 3.0.0
|
48
22
|
- Rails 6.1.1 + Ruby 2.7.2
|
49
23
|
- Rails 6.0.3.4 + Ruby 2.6.6
|
@@ -51,22 +25,13 @@ dynamic Web-App.
|
|
51
25
|
|
52
26
|
Rails versions below 5.2 are not supported.
|
53
27
|
|
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
|
-
|
63
28
|
## Documentation/Installation
|
64
29
|
|
65
|
-
Documentation can be found [here](https://docs.matestack.io)
|
30
|
+
Documentation can be found [here](https://docs.matestack.io/matestack-ui-core)
|
66
31
|
|
67
32
|
## Getting started
|
68
33
|
|
69
|
-
A getting started guide can be found [here](https://docs.matestack.io/getting-started/
|
34
|
+
A getting started guide can be found [here](https://docs.matestack.io/matestack-ui-core/getting-started/hello-world)
|
70
35
|
|
71
36
|
## Changelog
|
72
37
|
|
@@ -80,11 +45,7 @@ As a low-barrier feedback channel for our early users, we have set up a Discord
|
|
80
45
|
|
81
46
|
We are happy to accept contributors of any kind! In order to make it as easy and fun as possible to contribute to `matestack-ui-core`, we would like to onboard contributors personally! Best way to become a contributor: Ping us on Discord! We will schedule a video call with you and show you, how and what to work on :)
|
82
47
|
|
83
|
-
|
84
|
-
|
85
|
-
## Features
|
86
|
-
|
87
|
-
On our [landingpage](https://www.matestack.io), we're presenting the following features alongside some live demos!
|
48
|
+
## Feature walk-through
|
88
49
|
|
89
50
|
### 1. Create UI components in pure Ruby
|
90
51
|
|
@@ -128,7 +89,7 @@ Components can be then called on Rails views (not only! see below), enabling you
|
|
128
89
|
```erb
|
129
90
|
|
130
91
|
<!-- some other erb markup -->
|
131
|
-
<%= Components::Card.(title: "hello", body: "world") %>
|
92
|
+
<%= Components::Card.call(title: "hello", body: "world") %>
|
132
93
|
<!-- some other erb markup -->
|
133
94
|
|
134
95
|
```
|
@@ -167,7 +128,7 @@ class Components::Card < Matestack::Ui::Component
|
|
167
128
|
|
168
129
|
def card_footer
|
169
130
|
div class: "card-footer text-muted" do
|
170
|
-
plain footer
|
131
|
+
plain context.footer
|
171
132
|
end
|
172
133
|
end
|
173
134
|
|
@@ -179,7 +140,7 @@ end
|
|
179
140
|
|
180
141
|
```erb
|
181
142
|
<!-- some other erb markup -->
|
182
|
-
<%= Components::Card.(title: "hello", body: "world", footer: "foo") %>
|
143
|
+
<%= Components::Card.call(title: "hello", body: "world", footer: "foo") %>
|
183
144
|
<!-- some other erb markup -->
|
184
145
|
```
|
185
146
|
|
@@ -199,7 +160,7 @@ class Components::BlueCard < Components::Card
|
|
199
160
|
div class: "card shadow-sm border-0 bg-primary text-white" do
|
200
161
|
img path: context.image, class: "w-100" if context.image.present?
|
201
162
|
card_content #defined in parent class
|
202
|
-
card_footer if footer.present? #defined in parent class
|
163
|
+
card_footer if context.footer.present? #defined in parent class
|
203
164
|
end
|
204
165
|
end
|
205
166
|
|
@@ -211,7 +172,7 @@ end
|
|
211
172
|
|
212
173
|
```erb
|
213
174
|
<!-- some other erb markup -->
|
214
|
-
<%= Components::BlueCard.(title: "hello", body: "world") %>
|
175
|
+
<%= Components::BlueCard.call(title: "hello", body: "world") %>
|
215
176
|
<!-- some other erb markup -->
|
216
177
|
```
|
217
178
|
|
@@ -234,7 +195,7 @@ class Components::Card < Matestack::Ui::Component
|
|
234
195
|
div class: "card shadow-sm border-0 bg-light" do
|
235
196
|
img path: context.image, class: "w-100" if context.image.present?
|
236
197
|
# calling the CardBody component rather than using Ruby method partials
|
237
|
-
Components::CardBody.(title: context.title, body: context.body)
|
198
|
+
Components::CardBody.call(title: context.title, body: context.body)
|
238
199
|
end
|
239
200
|
end
|
240
201
|
|
@@ -283,7 +244,7 @@ class Components::Card < Matestack::Ui::Component
|
|
283
244
|
def response
|
284
245
|
div class: "card shadow-sm border-0 bg-light" do
|
285
246
|
img path: context.image, class: "w-100" if context.image.present?
|
286
|
-
Components::CardBody.() do
|
247
|
+
Components::CardBody.call() do
|
287
248
|
# yielding a block into the card_body component
|
288
249
|
h5 context.title if context.title.present?
|
289
250
|
paragraph context.body, class: "card-body"
|
@@ -331,7 +292,7 @@ class Components::Card < Matestack::Ui::Component
|
|
331
292
|
def response
|
332
293
|
div class: "card shadow-sm border-0 bg-light" do
|
333
294
|
img path: context.image, class: "w-100" if context.image.present?
|
334
|
-
Components::CardBody.(slots: {
|
295
|
+
Components::CardBody.call(slots: {
|
335
296
|
heading: method(:heading_slot),
|
336
297
|
body: method(:body_slot)
|
337
298
|
})
|
@@ -374,430 +335,6 @@ end
|
|
374
335
|
|
375
336
|
```
|
376
337
|
|
377
|
-
|
378
|
-
### 2. Use reactive UI components in pure Ruby
|
379
|
-
|
380
|
-
What about going even one step further and implement REACTIVE UIs in pure Ruby? Matestack's reactive core components can be used with a simple Ruby DSL enabling you to create reactive UIs without touching JavaScript!
|
381
|
-
|
382
|
-
#### Toggle parts of the UI based on events
|
383
|
-
|
384
|
-
Matestack offers an event hub. Reactive components can emit and receive events through this event hub. \"onclick\" and \"toggle\" calling two of these reactive core components.
|
385
|
-
\"onclick\" emits an event which causes the body of the \"toggle\" component to be visible for 5 seconds in this example.
|
386
|
-
|
387
|
-
`app/matestack/components/some_component.rb`
|
388
|
-
|
389
|
-
```ruby
|
390
|
-
|
391
|
-
class Components::SomeComponent < Matestack::Ui::Component
|
392
|
-
|
393
|
-
def response
|
394
|
-
onclick emit: "some_event" do
|
395
|
-
button "click me"
|
396
|
-
end
|
397
|
-
toggle show_on: "some_event", hide_after: 5000 do
|
398
|
-
plain "Oh yes! You clicked me!"
|
399
|
-
end
|
400
|
-
end
|
401
|
-
|
402
|
-
end
|
403
|
-
|
404
|
-
```
|
405
|
-
|
406
|
-
#### Call controller actions without JavaScript
|
407
|
-
|
408
|
-
Core components offer basic dynamic behaviour and let you easily call controller actions and react to server responses on the client side without full page reload.
|
409
|
-
The \"action\" component is configured to emit an event after successfully performed an HTTP request against a Rails controller action, which is receive by the \"toggle\" component, displaying the success message.
|
410
|
-
|
411
|
-
`app/matestack/components/some_component.rb`
|
412
|
-
|
413
|
-
```ruby
|
414
|
-
|
415
|
-
class Components::SomeComponent < Matestack::Ui::Component
|
416
|
-
|
417
|
-
def response
|
418
|
-
action my_action_config do
|
419
|
-
button "click me"
|
420
|
-
end
|
421
|
-
toggle show_on: "some_event", hide_after: 5000 do
|
422
|
-
plain "Success!"
|
423
|
-
end
|
424
|
-
end
|
425
|
-
|
426
|
-
def my_action_config
|
427
|
-
{
|
428
|
-
path: some_rails_route_path,
|
429
|
-
method: :post,
|
430
|
-
success: {
|
431
|
-
emit: "some_event"
|
432
|
-
}
|
433
|
-
}
|
434
|
-
end
|
435
|
-
|
436
|
-
end
|
437
|
-
|
438
|
-
```
|
439
|
-
|
440
|
-
|
441
|
-
### Dynamically handle form input without JavaScript
|
442
|
-
|
443
|
-
Create dynamic forms for ActiveRecord Models (or plain objects) and display server side responses, like validation errors or success messages, without relying on a full page reload.
|
444
|
-
Events emitted by the \"form\" component can be used to toggle parts of the UI.
|
445
|
-
|
446
|
-
`app/matestack/components/some_component.rb`
|
447
|
-
|
448
|
-
```ruby
|
449
|
-
|
450
|
-
class Components::SomeComponent < Matestack::Ui::Component
|
451
|
-
|
452
|
-
def response
|
453
|
-
matestack_form my_form_config do
|
454
|
-
form_input key: :some_attribute, type: :text
|
455
|
-
button "click me", type: :submit
|
456
|
-
end
|
457
|
-
toggle show_on: "submitted", hide_after: 5000 do
|
458
|
-
span class: "message success" do
|
459
|
-
plain "created successfully"
|
460
|
-
end
|
461
|
-
end
|
462
|
-
toggle show_on: "failed", hide_after: 5000 do
|
463
|
-
span class: "message failure" do
|
464
|
-
plain "data was not saved, please check form"
|
465
|
-
end
|
466
|
-
end
|
467
|
-
end
|
468
|
-
|
469
|
-
def my_form_config
|
470
|
-
{
|
471
|
-
for: MyActiveRecordModel.new,
|
472
|
-
path: some_rails_route_path,
|
473
|
-
method: :post,
|
474
|
-
success: {
|
475
|
-
emit: "submitted"
|
476
|
-
},
|
477
|
-
failure: {
|
478
|
-
emit: "failed"
|
479
|
-
}
|
480
|
-
}
|
481
|
-
end
|
482
|
-
|
483
|
-
end
|
484
|
-
|
485
|
-
```
|
486
|
-
|
487
|
-
#### Implement asynchronous, event-based UI rerendering in pure Ruby
|
488
|
-
|
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!
|
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.
|
491
|
-
|
492
|
-
`app/matestack/components/some_component.rb`
|
493
|
-
|
494
|
-
```ruby
|
495
|
-
|
496
|
-
class Components::SomeComponent < Matestack::Ui::Component
|
497
|
-
|
498
|
-
def response
|
499
|
-
matestack_form my_form_config do
|
500
|
-
#...
|
501
|
-
end
|
502
|
-
#...
|
503
|
-
async rerender_on: "submitted", id: "my-model-list" do
|
504
|
-
ul do
|
505
|
-
MyActiveRecordModel.last(5).each do |model|
|
506
|
-
li model.some_attribute
|
507
|
-
end
|
508
|
-
end
|
509
|
-
end
|
510
|
-
end
|
511
|
-
|
512
|
-
def my_form_config
|
513
|
-
{
|
514
|
-
#...
|
515
|
-
success: {
|
516
|
-
emit: "submitted"
|
517
|
-
},
|
518
|
-
failure: {
|
519
|
-
emit: "failed"
|
520
|
-
}
|
521
|
-
}
|
522
|
-
end
|
523
|
-
|
524
|
-
end
|
525
|
-
|
526
|
-
```
|
527
|
-
|
528
|
-
#### Manipulate parts of the UI via ActionCable
|
529
|
-
|
530
|
-
\"async\" rerenders its whole body - but what about just appending the element to the list after successful form submission?
|
531
|
-
The \"cable\" component can be configured to receive events and data pushed via ActionCable from the server side and just append/prepend new chunks of HTM (ideally rendered through a component) to the current \"cable\" component body. Updating and deleting is also supported!
|
532
|
-
|
533
|
-
`app/matestack/components/some_component.rb`
|
534
|
-
|
535
|
-
```ruby
|
536
|
-
|
537
|
-
class Components::SomeComponent < Matestack::Ui::Component
|
538
|
-
|
539
|
-
def response
|
540
|
-
matestack_form my_form_config do
|
541
|
-
#...
|
542
|
-
end
|
543
|
-
#...
|
544
|
-
ul do
|
545
|
-
cable prepend_on: "new_element_created", id: "mocked-instance-list" do
|
546
|
-
MyActiveRecordModel.last(5).each do |model|
|
547
|
-
li model
|
548
|
-
end
|
549
|
-
end
|
550
|
-
end
|
551
|
-
end
|
552
|
-
|
553
|
-
end
|
554
|
-
|
555
|
-
```
|
556
|
-
|
557
|
-
`app/controllers/some_controller.rb`
|
558
|
-
|
559
|
-
```ruby
|
560
|
-
# within your controller action handling the form input
|
561
|
-
ActionCable.server.broadcast("matestack_ui_core", {
|
562
|
-
event: "new_element_created",
|
563
|
-
data: "<li>foo</li>" # or better: calling a component here
|
564
|
-
})
|
565
|
-
|
566
|
-
```
|
567
|
-
|
568
|
-
#### Easily extend with Vue.js
|
569
|
-
|
570
|
-
Matestack's dynamic parts are built on Vue.js. If you want to implement custom dynamic behaviour, you can simply create your own Vue components and use them along matestacks core components.
|
571
|
-
It's even possible to interact with matestack's core components using the built-in event bus.
|
572
|
-
|
573
|
-
`app/matestack/components/some_component.rb`
|
574
|
-
|
575
|
-
```ruby
|
576
|
-
|
577
|
-
class Components::SomeComponent < Matestack::Ui::Component
|
578
|
-
|
579
|
-
def response
|
580
|
-
my_vue_js_component
|
581
|
-
toggle show_on: "some_event", hide_after: "3000" do
|
582
|
-
span class: "message success" do
|
583
|
-
plain "event triggered from custom vuejs component"
|
584
|
-
end
|
585
|
-
end
|
586
|
-
end
|
587
|
-
|
588
|
-
end
|
589
|
-
|
590
|
-
```
|
591
|
-
`app/matestack/components/my_vue_js_component.rb`
|
592
|
-
|
593
|
-
```ruby
|
594
|
-
class Components::MyVueJsComponent < Matestack::Ui::VueJsComponent
|
595
|
-
|
596
|
-
vue_name "my-vue-js-component"
|
597
|
-
|
598
|
-
def response
|
599
|
-
div class: "my-vue-js-component" do
|
600
|
-
button "@click": "increaseValue"
|
601
|
-
br
|
602
|
-
plain "{{ dynamicValue }}!"
|
603
|
-
end
|
604
|
-
end
|
605
|
-
|
606
|
-
end
|
607
|
-
```
|
608
|
-
|
609
|
-
`app/matestack/components/my_vue_js_component.js`
|
610
|
-
|
611
|
-
```javascript
|
612
|
-
Vue.component('my-vue-js-component', {
|
613
|
-
mixins: [MatestackUiCore.componentMixin],
|
614
|
-
data: () => {
|
615
|
-
return {
|
616
|
-
dynamicValue: 0
|
617
|
-
};
|
618
|
-
},
|
619
|
-
methods: {
|
620
|
-
increaseValue(){
|
621
|
-
this.dynamicValue++
|
622
|
-
MatestackUiCore.eventHub.$emit("some_event")
|
623
|
-
}
|
624
|
-
}
|
625
|
-
});
|
626
|
-
```
|
627
|
-
|
628
|
-
### 3. Create whole SPA-like apps in pure Ruby
|
629
|
-
|
630
|
-
The last step in order to leverage the full Matestack power: Create app (~Rails layout) and page (Rails ~view) classes and implement dynamic page transitions without any JavaScript implementation required.
|
631
|
-
|
632
|
-
#### Create your layouts and views in pure Ruby
|
633
|
-
|
634
|
-
The app class is used to define a layout, usually containing some kind of header, footer and navigation. The page class is used to define a view. Following the same principles as seen on components, you can use components (core or your own) in order to create the UI.
|
635
|
-
The \"transition\" component enables dynamic page transition, replacing the content within \"yield_page\" with new serverside rendered content.
|
636
|
-
|
637
|
-
`app/matestack/some_app/app.rb`
|
638
|
-
|
639
|
-
```ruby
|
640
|
-
|
641
|
-
class SomeApp::App < Matestack::Ui::App
|
642
|
-
|
643
|
-
def response
|
644
|
-
nav do
|
645
|
-
transition path: page1_path do
|
646
|
-
button "Page 1"
|
647
|
-
end
|
648
|
-
transition path: page2_path do
|
649
|
-
button "Page 2"
|
650
|
-
end
|
651
|
-
end
|
652
|
-
main do
|
653
|
-
div class: "container" do
|
654
|
-
yield
|
655
|
-
end
|
656
|
-
end
|
657
|
-
end
|
658
|
-
|
659
|
-
end
|
660
|
-
|
661
|
-
```
|
662
|
-
|
663
|
-
`app/matestack/some_app/pages/page1.rb`
|
664
|
-
|
665
|
-
```ruby
|
666
|
-
class SomeApp::Pages::Page1 < Matestack::Ui::Page
|
667
|
-
|
668
|
-
def response
|
669
|
-
div class: "row" do
|
670
|
-
div class: "col" do
|
671
|
-
plain "Page 1"
|
672
|
-
end
|
673
|
-
end
|
674
|
-
end
|
675
|
-
|
676
|
-
end
|
677
|
-
|
678
|
-
```
|
679
|
-
|
680
|
-
`app/matestack/some_app/pages/page2.rb`
|
681
|
-
|
682
|
-
```ruby
|
683
|
-
class SomeApp::Pages::Page2 < Matestack::Ui::Page
|
684
|
-
|
685
|
-
def response
|
686
|
-
div class: "row" do
|
687
|
-
div class: "col" do
|
688
|
-
plain "Page 2"
|
689
|
-
end
|
690
|
-
end
|
691
|
-
end
|
692
|
-
|
693
|
-
end
|
694
|
-
|
695
|
-
```
|
696
|
-
|
697
|
-
#### Apps and pages are referenced in your Rails controllers and actions
|
698
|
-
|
699
|
-
Instead of referencing Rails layouts and views on your controllers, you just use apps and pages as substitutes.
|
700
|
-
Work with controllers, actions and routing as you're used to! Controller hooks (e.g. devise's authenticate_user) would still work!
|
701
|
-
|
702
|
-
`app/controllers/some_controller.rb`
|
703
|
-
|
704
|
-
```ruby
|
705
|
-
|
706
|
-
class SomeController < ApplicationController
|
707
|
-
|
708
|
-
include Matestack::Ui::Core::Helper
|
709
|
-
|
710
|
-
matestack_app SomeApp::App
|
711
|
-
|
712
|
-
def page1
|
713
|
-
render SomeApp::Page1
|
714
|
-
end
|
715
|
-
|
716
|
-
def page2
|
717
|
-
render SomeApp::Page2
|
718
|
-
end
|
719
|
-
|
720
|
-
end
|
721
|
-
|
722
|
-
```
|
723
|
-
|
724
|
-
`app/config/routes.rb`
|
725
|
-
|
726
|
-
```ruby
|
727
|
-
Rails.application.routes.draw do
|
728
|
-
|
729
|
-
root to: 'some#page1'
|
730
|
-
|
731
|
-
get :page1, to: 'some#page1'
|
732
|
-
get :page2, to: 'some#page2'
|
733
|
-
|
734
|
-
end
|
735
|
-
|
736
|
-
```
|
737
|
-
|
738
|
-
#### Use CSS animations for fancy page transition animations
|
739
|
-
|
740
|
-
Use matestack's css classes applied to the wrapping DOM structure of a page in order to add CSS animiations, whenever a page transition is performed."
|
741
|
-
You can even inject a loading state element, enriching your page transition effect.
|
742
|
-
|
743
|
-
`app/matestack/some_app/app.rb`
|
744
|
-
|
745
|
-
```ruby
|
746
|
-
|
747
|
-
class SomeApp::App < Matestack::Ui::App
|
748
|
-
|
749
|
-
def response
|
750
|
-
nav do
|
751
|
-
transition path: page1_path do
|
752
|
-
button "Page 1"
|
753
|
-
end
|
754
|
-
transition path: page2_path do
|
755
|
-
button "Page 2"
|
756
|
-
end
|
757
|
-
end
|
758
|
-
main do
|
759
|
-
div class: "container" do
|
760
|
-
yield
|
761
|
-
end
|
762
|
-
end
|
763
|
-
end
|
764
|
-
|
765
|
-
def loading_state_element
|
766
|
-
div class: 'some-loading-element-styles'
|
767
|
-
end
|
768
|
-
|
769
|
-
end
|
770
|
-
|
771
|
-
```
|
772
|
-
|
773
|
-
`app/assets/stylesheets/application.scss`
|
774
|
-
|
775
|
-
```scss
|
776
|
-
|
777
|
-
.matestack-page-container{
|
778
|
-
|
779
|
-
.matestack-page-wrapper {
|
780
|
-
opacity: 1;
|
781
|
-
transition: opacity 0.2s ease-in-out;
|
782
|
-
|
783
|
-
&.loading {
|
784
|
-
opacity: 0;
|
785
|
-
}
|
786
|
-
}
|
787
|
-
|
788
|
-
.loading-state-element-wrapper{
|
789
|
-
opacity: 0;
|
790
|
-
transition: opacity 0.3s ease-in-out;
|
791
|
-
|
792
|
-
&.loading {
|
793
|
-
opacity: 1;
|
794
|
-
}
|
795
|
-
}
|
796
|
-
|
797
|
-
}
|
798
|
-
|
799
|
-
```
|
800
|
-
|
801
338
|
## License
|
802
339
|
|
803
340
|
`matestack-ui-core` is an Open Source project licensed under the terms of the [MIT license](./LICENSE)
|
@@ -12,7 +12,13 @@ module Matestack
|
|
12
12
|
attr_accessor :html_tag, :text, :options, :parent, :escape, :bind_to_parent
|
13
13
|
|
14
14
|
def initialize(html_tag = nil, text = nil, options = {}, &block)
|
15
|
-
|
15
|
+
return unless render?
|
16
|
+
|
17
|
+
if options && options[:detach_from_parent] == true
|
18
|
+
self.bind_to_parent = false
|
19
|
+
else
|
20
|
+
self.bind_to_parent = ([:without_parent].include?(html_tag) ? false : true)
|
21
|
+
end
|
16
22
|
self.slots = self.options.delete(:slots) if self.options
|
17
23
|
# extract_options(text, options) is called in properties
|
18
24
|
self.html_tag = html_tag if self.bind_to_parent
|
@@ -26,6 +32,12 @@ module Matestack
|
|
26
32
|
self
|
27
33
|
end
|
28
34
|
|
35
|
+
# can be optionally overwritten in subclass
|
36
|
+
# in order to conditionally render the component
|
37
|
+
def render?
|
38
|
+
true
|
39
|
+
end
|
40
|
+
|
29
41
|
# check if text is given and set text and options accordingly
|
30
42
|
def extract_options(text, options)
|
31
43
|
if text.is_a? Hash
|
@@ -92,16 +104,21 @@ module Matestack
|
|
92
104
|
end
|
93
105
|
end
|
94
106
|
|
95
|
-
def method_missing(name, *args, &block)
|
96
|
-
|
97
|
-
|
107
|
+
def method_missing(name, *args, **kwargs, &block)
|
108
|
+
if view_context && view_context.respond_to?(name, true)
|
109
|
+
view_context_response = view_context.send(name, *args, **kwargs, &block)
|
110
|
+
return view_context_response
|
111
|
+
end
|
112
|
+
if Rails.application.routes.url_helpers.respond_to?(name, true)
|
113
|
+
return Rails.application.routes.url_helpers.send(name, *args, &block)
|
114
|
+
end
|
98
115
|
return raise NameError, "#{name} is not defined for #{self.class}", caller
|
99
116
|
end
|
100
117
|
|
101
|
-
|
102
|
-
|
103
|
-
Matestack::Ui::Core::VueAttributes
|
118
|
+
def to_str
|
119
|
+
render_content
|
104
120
|
end
|
121
|
+
alias to_s to_str
|
105
122
|
|
106
123
|
end
|
107
124
|
end
|
@@ -3,7 +3,7 @@ module Matestack
|
|
3
3
|
module Core
|
4
4
|
class Context < ActiveSupport::CurrentAttributes
|
5
5
|
|
6
|
-
attribute :
|
6
|
+
attribute :layout
|
7
7
|
attribute :parent
|
8
8
|
attribute :isolated_parent
|
9
9
|
attribute :params
|
@@ -14,4 +14,4 @@ module Matestack
|
|
14
14
|
end
|
15
15
|
end
|
16
16
|
end
|
17
|
-
end
|
17
|
+
end
|