Skip to content

Commit

Permalink
Merge branch 'release/v0.2.4'
Browse files Browse the repository at this point in the history
  • Loading branch information
bopm committed Apr 10, 2024
2 parents a9ee07d + 5a5376b commit 8665edd
Show file tree
Hide file tree
Showing 9 changed files with 133 additions and 19 deletions.
2 changes: 1 addition & 1 deletion Gemfile.lock
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
PATH
remote: .
specs:
turbo_material (0.2.3)
turbo_material (0.2.4)
importmap-rails (~> 2.0.1)
rails (~> 7.1, >= 7.1.2)
stimulus-rails (~> 1.3)
Expand Down
2 changes: 1 addition & 1 deletion app/assets/dist/turbo_material/tailwind.css

Large diffs are not rendered by default.

16 changes: 16 additions & 0 deletions app/assets/javascripts/turbo_material/drawer_button_controller.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
static outlets = [ "material-drawer" ]

connect() {
mdc.ripple.MDCRipple.attachTo(this.element);
}

click() {
this.materialDrawerOutlet.toggle();
}

disconnect() {
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import { Controller } from "@hotwired/stimulus";
import { useMatchMedia } from 'stimulus-use';
import { put } from "@rails/request.js";

export default class extends Controller {
drawer = undefined;

static values = {
openUrl: String, closeUrl: String, opened: Boolean, name: String
}

connect() {
this.drawer = mdc.drawer.MDCDrawer.attachTo(this.element);
if (this.openedValue !== undefined) {
if (this.openedValue) {
this.open();
} else {
this.close();
}
}
useMatchMedia(this, {
mediaQueries: {
lg: '(min-width: 1024px)',
}
});
}

lgChanged({ name, media, matches, event }) {
if (this.openedValue) {
if(matches) {
this.open();
} else {
this.close();
}
}
}

isLg({ name, media, matches, event }) {
if (this.openedValue) {
if(matches) {
this.open();
} else {
this.close();
}
}
}

open() {
this.drawer.open = true;
if (this.openUrlValue) {
put(this.openUrlValue, {
body: {
name: this.nameValue,
},
});
}
}

close() {
this.drawer.open = false;
if (this.closeUrlValue) {
put(this.closeUrlValue, {
body: {
name: this.nameValue,
},
});
}
}

toggle() {
if(this.drawer.open) {
this.close();
} else {
this.open();
}
}

disconnect() {
}
}
13 changes: 11 additions & 2 deletions app/assets/stylesheets/turbo_material/application.tailwind.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,15 @@
@tailwind components;
@tailwind utilities;

.mdc-text-field {
background-color: transparent !important;
.mdc-notched-outline__leading {
border-right-style: none !important;
}

.mdc-notched-outline__notch {
border-left-style: none !important;
border-right-style: none !important;
}

.mdc-notched-outline__trailing {
border-left-style: none !important;
}
30 changes: 20 additions & 10 deletions app/views/components/_input.html.erb
Original file line number Diff line number Diff line change
@@ -1,21 +1,31 @@
<%# 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) %>
<label class="mdc-text-field mdc-text-field--filled w-full <%= custom_css %>"
<%# 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') %>
<label class="mdc-text-field <%= style == 'filled' ? 'mdc-text-field--filled' : 'mdc-text-field--outlined' %> w-full <%= custom_css %>"
data-controller="<%= custom_controller || 'material-input' %>" <% if frame %>data-frame="<%= frame %>"<% end %>>
<span class="mdc-text-field__ripple"></span>
<span class="mdc-floating-label" id="<%= id %>-label">
<%= label || name.capitalize %>
</span>
<%- if style == 'filled' -%>
<span class="mdc-text-field__ripple"></span>
<span class="mdc-floating-label" id="<%= id %>-label">
<%= label || name.capitalize %>
</span>
<%- else -%>
<span class="mdc-notched-outline">
<span class="mdc-notched-outline__leading"></span>
<span class="mdc-notched-outline__notch !w-fit">
<span class="mdc-floating-label" id="<%= id %>-label">
<%= label || name.capitalize %>
</span>
</span>
<span class="mdc-notched-outline__trailing"></span>
</span>
<% end %>
<%= form.text_field provide_hidden ? "#{name}_".to_sym : name.to_sym,
class: 'mdc-text-field__input', value: value || form&.object&.[](name.to_sym),
id: id, 'aria-labelledby' => id + '-label',
required: required, disabled: disabled,
type: type, autocomplete: "new-password", data: { frame: frame, **(data) }.compact,
min: min, max: max
%>
<span class="mdc-line-ripple"></span>
<%- if provide_hidden -%>
<%= form.hidden_field name.to_sym, value: value, data: { frame: frame }.compact %>
<%- end -%>
<%- if style == 'filled' -%><span class="mdc-line-ripple"></span><%- end -%>
<%- if provide_hidden -%><%= form.hidden_field name.to_sym, value: value, data: { frame: frame }.compact %><%- end -%>
</label>
<div class="mdc-text-field-helper-line">
<%- if helper -%>
Expand Down
2 changes: 0 additions & 2 deletions app/views/layouts/turbo_material/lookbook.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,6 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<%= stylesheet_link_tag "turbo_material/tailwind", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
<%= javascript_import_module_tag "turbo_material/application" %>
<%= stylesheet_link_tag "turbo_material/application", media: "all" %>
<style>
</style>
</head>
Expand Down
5 changes: 3 additions & 2 deletions lib/lookbook/input_preview.rb
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ class InputPreview < Lookbook::Preview
# @param label text
# @param disabled toggle
# @param required toggle
def default(label: 'Input', disabled: false, required: false)
render 'common/form', helper_name: 'material_input', label: label, name: 'checkbox', id: 'Input', disabled: disabled, required: required
# @param style select { choices: [filled, outlined] }
def default(label: 'Input', disabled: false, required: false, style: 'filled')
render 'common/form', helper_name: 'material_input', label: label, name: 'checkbox', id: 'Input', disabled: disabled, required: required, style: style
end
end
2 changes: 1 addition & 1 deletion lib/turbo_material/version.rb
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
module TurboMaterial
VERSION = "0.2.3"
VERSION = "0.2.4"
end

0 comments on commit 8665edd

Please sign in to comment.