Skip to content

Commit 8665edd

Browse files
bopmbopm
committed
Merge branch 'release/v0.2.4'
2 parents a9ee07d + 5a5376b commit 8665edd

File tree

9 files changed

+133
-19
lines changed

9 files changed

+133
-19
lines changed

‎Gemfile.lock

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
PATH
22
remote: .
33
specs:
4-
turbo_material (0.2.3)
4+
turbo_material (0.2.4)
55
importmap-rails (~> 2.0.1)
66
rails (~> 7.1, >= 7.1.2)
77
stimulus-rails (~> 1.3)

‎app/assets/dist/turbo_material/tailwind.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/assets/javascripts/turbo_material/drawer_button_controller.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { Controller } from "@hotwired/stimulus";
2+
3+
export default class extends Controller {
4+
static outlets = [ "material-drawer" ]
5+
6+
connect() {
7+
mdc.ripple.MDCRipple.attachTo(this.element);
8+
}
9+
10+
click() {
11+
this.materialDrawerOutlet.toggle();
12+
}
13+
14+
disconnect() {
15+
}
16+
}

‎app/assets/javascripts/turbo_material/material_drawer_controller.js

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import { Controller } from "@hotwired/stimulus";
2+
import { useMatchMedia } from 'stimulus-use';
3+
import { put } from "@rails/request.js";
4+
5+
export default class extends Controller {
6+
drawer = undefined;
7+
8+
static values = {
9+
openUrl: String, closeUrl: String, opened: Boolean, name: String
10+
}
11+
12+
connect() {
13+
this.drawer = mdc.drawer.MDCDrawer.attachTo(this.element);
14+
if (this.openedValue !== undefined) {
15+
if (this.openedValue) {
16+
this.open();
17+
} else {
18+
this.close();
19+
}
20+
}
21+
useMatchMedia(this, {
22+
mediaQueries: {
23+
lg: '(min-width: 1024px)',
24+
}
25+
});
26+
}
27+
28+
lgChanged({ name, media, matches, event }) {
29+
if (this.openedValue) {
30+
if(matches) {
31+
this.open();
32+
} else {
33+
this.close();
34+
}
35+
}
36+
}
37+
38+
isLg({ name, media, matches, event }) {
39+
if (this.openedValue) {
40+
if(matches) {
41+
this.open();
42+
} else {
43+
this.close();
44+
}
45+
}
46+
}
47+
48+
open() {
49+
this.drawer.open = true;
50+
if (this.openUrlValue) {
51+
put(this.openUrlValue, {
52+
body: {
53+
name: this.nameValue,
54+
},
55+
});
56+
}
57+
}
58+
59+
close() {
60+
this.drawer.open = false;
61+
if (this.closeUrlValue) {
62+
put(this.closeUrlValue, {
63+
body: {
64+
name: this.nameValue,
65+
},
66+
});
67+
}
68+
}
69+
70+
toggle() {
71+
if(this.drawer.open) {
72+
this.close();
73+
} else {
74+
this.open();
75+
}
76+
}
77+
78+
disconnect() {
79+
}
80+
}

‎app/assets/stylesheets/turbo_material/application.tailwind.css

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,15 @@
22
@tailwind components;
33
@tailwind utilities;
44

5-
.mdc-text-field {
6-
background-color: transparent !important;
5+
.mdc-notched-outline__leading {
6+
border-right-style: none !important;
7+
}
8+
9+
.mdc-notched-outline__notch {
10+
border-left-style: none !important;
11+
border-right-style: none !important;
12+
}
13+
14+
.mdc-notched-outline__trailing {
15+
border-left-style: none !important;
716
}

‎app/views/components/_input.html.erb

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,31 @@
1-
<%# locals: (form:, custom_controller: nil, custom_css: nil, disabled: false, required: false, name:, label: nil, id:, checked: false, frame: nil, provide_hidden: false, value: nil, type: 'text', data: {}, min: nil, max: nil, helper: nil, parent: nil) %>
2-
<label class="mdc-text-field mdc-text-field--filled w-full <%= custom_css %>"
1+
<%# locals: (form:, custom_controller: nil, custom_css: nil, disabled: false, required: false, name:, label: nil, id:, checked: false, frame: nil, provide_hidden: false, value: nil, type: 'text', data: {}, min: nil, max: nil, helper: nil, parent: nil, style: 'filled') %>
2+
<label class="mdc-text-field <%= style == 'filled' ? 'mdc-text-field--filled' : 'mdc-text-field--outlined' %> w-full <%= custom_css %>"
33
data-controller="<%= custom_controller || 'material-input' %>" <% if frame %>data-frame="<%= frame %>"<% end %>>
4-
<span class="mdc-text-field__ripple"></span>
5-
<span class="mdc-floating-label" id="<%= id %>-label">
6-
<%= label || name.capitalize %>
7-
</span>
4+
<%- if style == 'filled' -%>
5+
<span class="mdc-text-field__ripple"></span>
6+
<span class="mdc-floating-label" id="<%= id %>-label">
7+
<%= label || name.capitalize %>
8+
</span>
9+
<%- else -%>
10+
<span class="mdc-notched-outline">
11+
<span class="mdc-notched-outline__leading"></span>
12+
<span class="mdc-notched-outline__notch !w-fit">
13+
<span class="mdc-floating-label" id="<%= id %>-label">
14+
<%= label || name.capitalize %>
15+
</span>
16+
</span>
17+
<span class="mdc-notched-outline__trailing"></span>
18+
</span>
19+
<% end %>
820
<%= form.text_field provide_hidden ? "#{name}_".to_sym : name.to_sym,
921
class: 'mdc-text-field__input', value: value || form&.object&.[](name.to_sym),
1022
id: id, 'aria-labelledby' => id + '-label',
1123
required: required, disabled: disabled,
1224
type: type, autocomplete: "new-password", data: { frame: frame, **(data) }.compact,
1325
min: min, max: max
1426
%>
15-
<span class="mdc-line-ripple"></span>
16-
<%- if provide_hidden -%>
17-
<%= form.hidden_field name.to_sym, value: value, data: { frame: frame }.compact %>
18-
<%- end -%>
27+
<%- if style == 'filled' -%><span class="mdc-line-ripple"></span><%- end -%>
28+
<%- if provide_hidden -%><%= form.hidden_field name.to_sym, value: value, data: { frame: frame }.compact %><%- end -%>
1929
</label>
2030
<div class="mdc-text-field-helper-line">
2131
<%- if helper -%>

‎app/views/layouts/turbo_material/lookbook.html.erb

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,6 @@
99
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
1010
<%= stylesheet_link_tag "turbo_material/tailwind", "data-turbo-track": "reload" %>
1111
<%= javascript_importmap_tags %>
12-
<%= javascript_import_module_tag "turbo_material/application" %>
13-
<%= stylesheet_link_tag "turbo_material/application", media: "all" %>
1412
<style>
1513
</style>
1614
</head>

‎lib/lookbook/input_preview.rb

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ class InputPreview < Lookbook::Preview
33
# @param label text
44
# @param disabled toggle
55
# @param required toggle
6-
def default(label: 'Input', disabled: false, required: false)
7-
render 'common/form', helper_name: 'material_input', label: label, name: 'checkbox', id: 'Input', disabled: disabled, required: required
6+
# @param style select { choices: [filled, outlined] }
7+
def default(label: 'Input', disabled: false, required: false, style: 'filled')
8+
render 'common/form', helper_name: 'material_input', label: label, name: 'checkbox', id: 'Input', disabled: disabled, required: required, style: style
89
end
910
end

‎lib/turbo_material/version.rb

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
module TurboMaterial
2-
VERSION = "0.2.3"
2+
VERSION = "0.2.4"
33
end

0 commit comments

Comments
 (0)