matestack-ui-bootstrap 2.0.1 → 2.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +36 -60
- data/lib/matestack/ui/bootstrap.rb +1 -0
- data/lib/matestack/ui/bootstrap/content/smart_collection/content.rb +16 -3
- data/lib/matestack/ui/bootstrap/form/checkbox.rb +14 -5
- data/lib/matestack/ui/bootstrap/form/input.rb +7 -5
- data/lib/matestack/ui/bootstrap/form/radio.rb +6 -4
- data/lib/matestack/ui/bootstrap/form/select.rb +2 -2
- data/lib/matestack/ui/bootstrap/form/switch.rb +1 -1
- data/lib/matestack/ui/bootstrap/form/textarea.rb +49 -0
- data/lib/matestack/ui/bootstrap/registry.rb +4 -0
- data/lib/matestack/ui/bootstrap/version.rb +1 -1
- metadata +5 -4
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 765f0c5d8c9c1ff744e18f2f9cf03e988b45527941b13d420b777e304bd04149
|
4
|
+
data.tar.gz: 2b24f828ef784ce5c7f137a7354f3f6eeb6ee46679e38e8e6e1670089bd9d092
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 4576738c13b40735fe220ad577416834b0adc0ec129426cb438843dc7513957d193de42948050e64d1309da6545cb1dbc38d24969d339c7e7b1f10e1ad81e615
|
7
|
+
data.tar.gz: 496c5eefd617f97462c4987a172a4510743f5c896d828f5bf5f7186e2cf8fd46977d049375ffd93be9c588ed1a34e51eb503dee8303632274f05aa66e5ae737c
|
data/README.md
CHANGED
@@ -1,84 +1,60 @@
|
|
1
|
-
|
1
|
+
[![Specs](https://github.com/matestack/matestack-ui-bootstrap/workflows/specs/badge.svg)](https://github.com/matestack/matestack-ui-bootstrap/actions)
|
2
|
+
[![Discord](https://img.shields.io/discord/771413294136426496.svg)](https://discord.com/invite/c6tQxFG)
|
3
|
+
[![Gem Version](https://badge.fury.io/rb/matestack-ui-bootstrap.svg)](https://badge.fury.io/rb/matestack-ui-bootstrap)
|
4
|
+
[![Docs](https://img.shields.io/badge/docs-matestack-blue.svg)](https://docs.matestack.io/matestack-ui-bootstrap)
|
5
|
+
[![Twitter Follow](https://img.shields.io/twitter/follow/matestack.svg?style=social)](https://twitter.com/matestack)
|
2
6
|
|
3
|
-
|
7
|
+
![matestack logo](./logo.png)
|
4
8
|
|
5
|
-
|
9
|
+
# matestack-ui-bootstrap | beautiful, reactive UIs in pure Ruby
|
6
10
|
|
7
|
-
|
11
|
+
As an extension for [`matestack-ui-core`](https://github.com/matestack/matestack-ui-core), `matestack-ui-bootstrap` ships all you need to build beautiful,
|
12
|
+
reactive UIs in pure Ruby and smart CRUD components based on Bootstrap v5.
|
8
13
|
|
9
|
-
|
14
|
+
----
|
10
15
|
|
11
|
-
|
12
|
-
docker-compose build dummy
|
13
|
-
docker-compose run --rm dummy bash
|
14
|
-
```
|
16
|
+
`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.
|
15
17
|
|
16
|
-
|
18
|
+
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
19
|
|
18
|
-
|
19
|
-
bundle install
|
20
|
-
yarn install
|
21
|
-
cd spec/dummy
|
22
|
-
bundle install
|
23
|
-
npm install (npm and not yarn!)
|
24
|
-
rails app:db:setup
|
25
|
-
```
|
20
|
+
----
|
26
21
|
|
27
|
-
|
22
|
+
`matestack-ui-core` does not have an opinion on styling. In contrast, `matestack-ui-bootstrap` ships all Bootstrap v5 components as Matestack UI components usable in pure Ruby. Additionally layout and CRUD components help you to build a beautiful web app meeting typical requirements of a data driven web app.
|
28
23
|
|
29
|
-
|
30
|
-
```shell
|
31
|
-
docker-compose up dummy
|
32
|
-
```
|
24
|
+
Don't think about styling anymore and just create admin or application UIs faster than ever before!
|
33
25
|
|
34
|
-
|
26
|
+
[<img src="https://img.youtube.com/vi/bwsVgCb97v0/0.jpg" width="350">](https://www.youtube.com/watch?v=bwsVgCb97v0)
|
35
27
|
|
36
|
-
|
37
|
-
docker-compose run --rm dummy sh -c "cd spec/dummy && ./bin/webpack --watch"
|
38
|
-
```
|
28
|
+
## Compatibility
|
39
29
|
|
40
|
-
|
30
|
+
### Ruby/Rails
|
41
31
|
|
42
|
-
|
32
|
+
`matestack-ui-bootstrap` is tested against:
|
43
33
|
|
44
|
-
|
34
|
+
- Rails 6.1.1 + Ruby 3.0.0
|
35
|
+
- Rails 6.1.1 + Ruby 2.7.2
|
36
|
+
- Rails 6.0.3.4 + Ruby 2.6.6
|
37
|
+
- Rails 5.2.4.4 + Ruby 2.6.6
|
45
38
|
|
46
|
-
|
47
|
-
docker-compose build dummy
|
48
|
-
docker-compose run --rm dummy bash
|
49
|
-
```
|
39
|
+
Rails versions below 5.2 are not supported.
|
50
40
|
|
51
|
-
|
41
|
+
### Vue.js
|
52
42
|
|
53
|
-
|
54
|
-
bundle install
|
55
|
-
yarn install
|
56
|
-
cd spec/dummy
|
57
|
-
bundle install
|
58
|
-
npm install (npm and not yarn!)
|
59
|
-
rails app:db:setup
|
60
|
-
```
|
43
|
+
`matestack-ui-bootstrap` requires Vue.js and Vuex for its reactivity features. Following version ranges are supported:
|
61
44
|
|
62
|
-
|
45
|
+
- Vue.js ^2.6.0
|
46
|
+
- Vuex ^3.6.0
|
63
47
|
|
64
|
-
|
65
|
-
docker-compose run --rm builder bash
|
48
|
+
Vue 3 / Vuex 4 update is planned for Q2 2021.
|
66
49
|
|
67
|
-
|
50
|
+
## Documentation/Installation
|
68
51
|
|
69
|
-
|
52
|
+
Documentation can be found [here](https://docs.matestack.io/matestack-ui-bootstrap)
|
70
53
|
|
71
|
-
|
72
|
-
bundle exec rspec spec/test
|
73
|
-
```
|
54
|
+
## Changelog
|
74
55
|
|
75
|
-
|
56
|
+
Changelog can be found [here](./CHANGELOG.md)
|
76
57
|
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
gem release
|
81
|
-
npm bump ...
|
82
|
-
npm release
|
83
|
-
git tag ...
|
84
|
-
```
|
58
|
+
## License
|
59
|
+
|
60
|
+
`matestack-ui-bootstrap` is an Open Source project licensed under the terms of the [MIT license](./LICENSE)
|
@@ -98,6 +98,7 @@ module Matestack
|
|
98
98
|
end
|
99
99
|
require "#{base_path}/form/checkbox"
|
100
100
|
require "#{base_path}/form/input"
|
101
|
+
require "#{base_path}/form/textarea"
|
101
102
|
require "#{base_path}/form/radio"
|
102
103
|
require "#{base_path}/form/select"
|
103
104
|
require "#{base_path}/form/submit"
|
@@ -69,7 +69,11 @@ module Matestack::Ui::Bootstrap::Content::SmartCollection::Content
|
|
69
69
|
|
70
70
|
def cell(data, key, value)
|
71
71
|
td class: cell_class(value) do
|
72
|
-
|
72
|
+
if value.is_a?(Hash) && value[:slot]
|
73
|
+
value[:slot].call(data)
|
74
|
+
else
|
75
|
+
plain cell_text(data, key, value)
|
76
|
+
end
|
73
77
|
end
|
74
78
|
end
|
75
79
|
|
@@ -81,8 +85,17 @@ module Matestack::Ui::Bootstrap::Content::SmartCollection::Content
|
|
81
85
|
end
|
82
86
|
|
83
87
|
def cell_text(data, key, value)
|
84
|
-
|
85
|
-
|
88
|
+
if value.is_a?(Hash)
|
89
|
+
if value[:attribute].present?
|
90
|
+
text = data.instance_eval(value[:attribute].to_s)
|
91
|
+
else
|
92
|
+
text = data.instance_eval(key.to_s)
|
93
|
+
end
|
94
|
+
text = value[:format].call(text) if value[:format].present?
|
95
|
+
else
|
96
|
+
text = data.instance_eval(key.to_s)
|
97
|
+
end
|
98
|
+
|
86
99
|
text
|
87
100
|
end
|
88
101
|
|
@@ -10,7 +10,7 @@ class Matestack::Ui::Bootstrap::Form::Checkbox < Matestack::Ui::VueJs::Component
|
|
10
10
|
|
11
11
|
def response
|
12
12
|
div class: "matestack-ui-bootstrap-form-checkbox" do
|
13
|
-
label input_label, class: "form-label", for:
|
13
|
+
label input_label, class: "form-label", ":for": id if input_label && multiple?
|
14
14
|
render_options
|
15
15
|
render_errors
|
16
16
|
render_form_text unless context.form_text.nil? # otherwise renders empty div
|
@@ -19,6 +19,15 @@ class Matestack::Ui::Bootstrap::Form::Checkbox < Matestack::Ui::VueJs::Component
|
|
19
19
|
|
20
20
|
private
|
21
21
|
|
22
|
+
def bootstrap_attributes
|
23
|
+
classes = 'form-check-input'
|
24
|
+
classes = [options[:class], classes].join(' ')
|
25
|
+
{
|
26
|
+
class: classes,
|
27
|
+
disabled: context.disabled
|
28
|
+
}
|
29
|
+
end
|
30
|
+
|
22
31
|
def multiple?
|
23
32
|
checkbox_options.present?
|
24
33
|
end
|
@@ -28,7 +37,7 @@ class Matestack::Ui::Bootstrap::Form::Checkbox < Matestack::Ui::VueJs::Component
|
|
28
37
|
if multiple?
|
29
38
|
checkbox_options.to_a.each do |item|
|
30
39
|
checkbox_wrapper do
|
31
|
-
input options.merge(checkbox_attributes(item)).merge(
|
40
|
+
input options.merge(checkbox_attributes(item)).merge(bootstrap_attributes)
|
32
41
|
bootstrap_label text: item_label(item), for_input: item_id(item)
|
33
42
|
end
|
34
43
|
end
|
@@ -36,7 +45,7 @@ class Matestack::Ui::Bootstrap::Form::Checkbox < Matestack::Ui::VueJs::Component
|
|
36
45
|
else
|
37
46
|
checkbox_wrapper do
|
38
47
|
input true_false_checkbox_attributes.merge(type: :hidden, id: nil, value: 0)
|
39
|
-
input true_false_checkbox_attributes.merge(type: :checkbox, id: item_id(1)
|
48
|
+
input true_false_checkbox_attributes.merge(type: :checkbox, ":id": item_id(1)).merge(bootstrap_attributes)
|
40
49
|
|
41
50
|
bootstrap_label text: input_label, for_input: item_id(1)
|
42
51
|
end
|
@@ -53,7 +62,7 @@ class Matestack::Ui::Bootstrap::Form::Checkbox < Matestack::Ui::VueJs::Component
|
|
53
62
|
end
|
54
63
|
|
55
64
|
def bootstrap_label(text:, for_input:)
|
56
|
-
label text, for: for_input, class: 'form-check-label'
|
65
|
+
label text, ":for": for_input, class: 'form-check-label'
|
57
66
|
end
|
58
67
|
|
59
68
|
def render_errors
|
@@ -73,7 +82,7 @@ class Matestack::Ui::Bootstrap::Form::Checkbox < Matestack::Ui::VueJs::Component
|
|
73
82
|
end
|
74
83
|
|
75
84
|
def render_form_text
|
76
|
-
div
|
85
|
+
div class: "form-text form-text-for-#{attribute_key}" do
|
77
86
|
plain context.form_text
|
78
87
|
end
|
79
88
|
end
|
@@ -16,12 +16,12 @@ class Matestack::Ui::Bootstrap::Form::Input < Matestack::Ui::VueJs::Components::
|
|
16
16
|
|
17
17
|
def response
|
18
18
|
div class: "matestack-ui-bootstrap-input" do
|
19
|
-
label input_label, for:
|
19
|
+
label input_label, ":for": id, class: "form-label" if input_label
|
20
20
|
case context.type
|
21
21
|
when :range
|
22
22
|
input options.merge(input_attributes).merge(bootstrap_range_attributes)
|
23
23
|
if context.show_value
|
24
|
-
div
|
24
|
+
div class: "form-text form-text-for-#{attribute_key}" do
|
25
25
|
plain "{{ data['#{attribute_key}'] }}"
|
26
26
|
end
|
27
27
|
end
|
@@ -37,9 +37,11 @@ class Matestack::Ui::Bootstrap::Form::Input < Matestack::Ui::VueJs::Components::
|
|
37
37
|
|
38
38
|
def bootstrap_input_attributes
|
39
39
|
{
|
40
|
-
id: (options[:id] || attribute_key),
|
41
40
|
class: (options[:class] || "") << (" form-control"),
|
42
|
-
disabled: context.disabled
|
41
|
+
disabled: context.disabled,
|
42
|
+
min: context.min,
|
43
|
+
max: context.max,
|
44
|
+
step: context.step
|
43
45
|
}
|
44
46
|
end
|
45
47
|
|
@@ -108,7 +110,7 @@ class Matestack::Ui::Bootstrap::Form::Input < Matestack::Ui::VueJs::Components::
|
|
108
110
|
end
|
109
111
|
|
110
112
|
def render_form_text
|
111
|
-
div
|
113
|
+
div class: "form-text form-text-for-#{attribute_key}" do
|
112
114
|
plain context.form_text
|
113
115
|
end
|
114
116
|
end
|
@@ -10,12 +10,12 @@ class Matestack::Ui::Bootstrap::Form::Radio < Matestack::Ui::VueJs::Components::
|
|
10
10
|
|
11
11
|
def response
|
12
12
|
div class: "matestack-ui-bootstrap-radio" do
|
13
|
-
label input_label, class: "form-label" if input_label
|
13
|
+
label input_label, class: "form-label", ":for": id if input_label
|
14
14
|
|
15
15
|
radio_options.to_a.each_with_index do |item, index|
|
16
16
|
div class: "form-check #{'form-check-inline' if context.variant == :inline}" do
|
17
17
|
input options.merge(radio_attributes(item)).merge(bootstrap_radio_attributes)
|
18
|
-
label item_label(item), class: "form-check-label", for: item_id(item_value(item))
|
18
|
+
label item_label(item), class: "form-check-label", ":for": item_id(item_value(item))
|
19
19
|
if index == radio_options.to_a.size - 1
|
20
20
|
render_errors
|
21
21
|
end
|
@@ -26,16 +26,18 @@ class Matestack::Ui::Bootstrap::Form::Radio < Matestack::Ui::VueJs::Components::
|
|
26
26
|
|
27
27
|
end
|
28
28
|
|
29
|
+
private
|
29
30
|
|
30
31
|
def bootstrap_radio_attributes
|
32
|
+
classes = 'form-check-input'
|
31
33
|
{
|
32
|
-
class: (options[:class] || "") <<
|
34
|
+
class: (options[:class] || "") << classes,
|
33
35
|
disabled: context.disabled
|
34
36
|
}
|
35
37
|
end
|
36
38
|
|
37
39
|
def render_form_text
|
38
|
-
div
|
40
|
+
div class: "form-text form-text-for-#{attribute_key}" do
|
39
41
|
plain context.form_text
|
40
42
|
end
|
41
43
|
end
|
@@ -10,7 +10,7 @@ class Matestack::Ui::Bootstrap::Form::Select < Matestack::Ui::VueJs::Components:
|
|
10
10
|
|
11
11
|
def response
|
12
12
|
div class: "matestack-ui-bootstrap-form-select" do
|
13
|
-
label input_label, for:
|
13
|
+
label input_label, ":for": id, class: "form-label" if input_label
|
14
14
|
select select_attributes.merge(bootstrap_select_attributes) do
|
15
15
|
render_options
|
16
16
|
end
|
@@ -55,7 +55,7 @@ class Matestack::Ui::Bootstrap::Form::Select < Matestack::Ui::VueJs::Components:
|
|
55
55
|
end
|
56
56
|
|
57
57
|
def render_form_text
|
58
|
-
div
|
58
|
+
div class: "form-text form-text-for-#{attribute_key}" do
|
59
59
|
plain context.form_text
|
60
60
|
end
|
61
61
|
end
|
@@ -10,7 +10,7 @@ class Matestack::Ui::Bootstrap::Form::Switch < Matestack::Ui::Bootstrap::Form::C
|
|
10
10
|
|
11
11
|
def response
|
12
12
|
div class: "matestack-ui-bootstrap-switch" do
|
13
|
-
label input_label, class: "form-label", for:
|
13
|
+
label input_label, class: "form-label", ":for": id if input_label && multiple?
|
14
14
|
render_options
|
15
15
|
render_errors
|
16
16
|
plain context.form_text
|
@@ -0,0 +1,49 @@
|
|
1
|
+
class Matestack::Ui::Bootstrap::Form::Textarea < Matestack::Ui::VueJs::Components::Form::Textarea
|
2
|
+
|
3
|
+
include Matestack::Ui::Bootstrap::Registry
|
4
|
+
|
5
|
+
vue_name "matestack-ui-core-form-textarea"
|
6
|
+
|
7
|
+
optional :form_text
|
8
|
+
optional :disabled
|
9
|
+
optional :placeholder
|
10
|
+
optional :rows
|
11
|
+
optional :cols
|
12
|
+
|
13
|
+
def response
|
14
|
+
div class: "matestack-ui-bootstrap-textarea" do
|
15
|
+
label input_label, ":for": id, class: "form-label" if input_label
|
16
|
+
textarea options.merge(textarea_attributes).merge(bootstrap_textarea_attributes)
|
17
|
+
render_errors
|
18
|
+
render_form_text if context.form_text
|
19
|
+
end
|
20
|
+
end
|
21
|
+
|
22
|
+
def bootstrap_textarea_attributes
|
23
|
+
{
|
24
|
+
class: (options[:class] || "") << (" form-control"),
|
25
|
+
rows: context.rows,
|
26
|
+
cols: context.cols,
|
27
|
+
disabled: context.disabled
|
28
|
+
}
|
29
|
+
end
|
30
|
+
|
31
|
+
def render_errors
|
32
|
+
if display_errors?
|
33
|
+
div class: 'invalid-feedback', 'v-for': "error in #{error_key}" do
|
34
|
+
plain '{{ error }}'
|
35
|
+
end
|
36
|
+
end
|
37
|
+
end
|
38
|
+
|
39
|
+
def input_error_class
|
40
|
+
'is-invalid'
|
41
|
+
end
|
42
|
+
|
43
|
+
def render_form_text
|
44
|
+
div class: "form-text form-text-for-#{attribute_key}" do
|
45
|
+
plain context.form_text
|
46
|
+
end
|
47
|
+
end
|
48
|
+
|
49
|
+
end
|
@@ -114,6 +114,10 @@ module Matestack::Ui::Bootstrap::Registry
|
|
114
114
|
Matestack::Ui::Bootstrap::Form::Input.(text, options, &block)
|
115
115
|
end
|
116
116
|
|
117
|
+
def bs_form_textarea(text=nil, options=nil, &block)
|
118
|
+
Matestack::Ui::Bootstrap::Form::Textarea.(text, options, &block)
|
119
|
+
end
|
120
|
+
|
117
121
|
def bs_form_select(text=nil, options=nil, &block)
|
118
122
|
Matestack::Ui::Bootstrap::Form::Select.(text, options, &block)
|
119
123
|
end
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: matestack-ui-bootstrap
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 2.0
|
4
|
+
version: 2.1.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Jonas Jabari
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2021-
|
12
|
+
date: 2021-06-29 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: matestack-ui-core
|
@@ -17,14 +17,14 @@ dependencies:
|
|
17
17
|
requirements:
|
18
18
|
- - "~>"
|
19
19
|
- !ruby/object:Gem::Version
|
20
|
-
version: '2.
|
20
|
+
version: '2.1'
|
21
21
|
type: :runtime
|
22
22
|
prerelease: false
|
23
23
|
version_requirements: !ruby/object:Gem::Requirement
|
24
24
|
requirements:
|
25
25
|
- - "~>"
|
26
26
|
- !ruby/object:Gem::Version
|
27
|
-
version: '2.
|
27
|
+
version: '2.1'
|
28
28
|
description: Bootstrap v5 components for Matestack UI
|
29
29
|
email:
|
30
30
|
- jonas@matestack.io
|
@@ -91,6 +91,7 @@ files:
|
|
91
91
|
- lib/matestack/ui/bootstrap/form/select.rb
|
92
92
|
- lib/matestack/ui/bootstrap/form/submit.rb
|
93
93
|
- lib/matestack/ui/bootstrap/form/switch.rb
|
94
|
+
- lib/matestack/ui/bootstrap/form/textarea.rb
|
94
95
|
- lib/matestack/ui/bootstrap/index.js
|
95
96
|
- lib/matestack/ui/bootstrap/layout/column.rb
|
96
97
|
- lib/matestack/ui/bootstrap/layout/container.rb
|