turbo_material 0.1.9 → 0.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 13b9d9d2e54b372094a3cb3d6a4ce2c5beb30417f57296795516d7ae8ee4d0e3
-  data.tar.gz: c8ecebe27c2236eea437c5c0a28a4cd7450ecaa15dd71d6f70d95d491df740cd
+  metadata.gz: 0daad5f849db4ba1b3050e0eb5b4662eb8b4042b0afbe297dd7760781df1960a
+  data.tar.gz: 675e7daddb793efe2c5d630ce1ef3c8b2ecd8f5009a6dde0e360c45f663fb7ab
 SHA512:
-  metadata.gz: e143747eb338b42ba472b03103039a7cf479d19a6ce7f1ba362d67ff2007a2185d98c9724132078fe07fde35b3adec4b217c0fcca9109a5cb0f4f98433106eb4
-  data.tar.gz: dbbc4bca36bed11426fa34844c7b45bcf725a9d7134fc45454cf81563833a008f23aa7ce995eeac0ad71dadd053c3809ee19ff74e9082184d4ac0535b717682b
+  metadata.gz: 9228ff4cf67e473a38f221b979804b5f889005bb9c566f863a97e4cfa3b337e17f9f02caa7e6deccaa9098dca104ed4e6b824367a32009aad80c047d65c6782d
+  data.tar.gz: 9a0b5c7d94f9051904100e3d294d514bc97350ffaef2ea6c3665440c65cf691a2bdd25a96b8c30fa8bf1eb3b9a7273a4343ba325fa64dde776ab0c5239a166b6

data/app/assets/javascripts/turbo_material/material_select_controller.js

@@ -1,10 +1,17 @@
 import { Controller } from "@hotwired/stimulus";
 
 export default class extends Controller {
-    connect() {
-        const select = mdc.select.MDCSelect.attachTo(this.element)
-    }
+  connect() {
+    const select = mdc.select.MDCSelect.attachTo(this.element);
+    select.listen("MDCSelect:change", () => {
+      select.root.dispatchEvent(
+        new CustomEvent("submit-now", {
+          bubbles: true,
+          cancelable: true,
+        }),
+      );
+    });
+  }
 
-    disconnect() {
-    }
+  disconnect() {}
 }

data/app/views/components/_select.html.erb

@@ -1,5 +1,5 @@
-<%# locals: (form:, disabled: false, required: false, name:, label: nil, id:, checked: false, value: nil, parent: nil, frame: nil, selected_text: nil, fixed: false, options: [], hint: nil, helper: nil, additional_classes: 'w-full') %>
-<div class="mdc-select mdc-select--filled <%= label ? '' : 'mdc-select--no-label' %> <%= disabled ? ' mdc-select--disabled' : '' %><%= required ? ' mdc-select--required' : '' %> <%= additional_classes %>"
+<%# locals: (form:, disabled: false, required: false, name:, label: nil, id:, checked: false, value: nil, parent: nil, frame: nil, selected_text: nil, fixed: false, options: [], hint: nil, helper: nil, additional_classes: 'w-full', outlined: false) %>
+<div class="mdc-select <%= outlined ? 'mdc-select--outlined' : 'mdc-select--filled' %> <%= label ? '' : 'mdc-select--no-label' %> <%= disabled ? ' mdc-select--disabled' : '' %><%= required ? ' mdc-select--required' : '' %> <%= additional_classes %>"
      data-controller="material-select" <% if frame %> data-frame="<%= frame %>"<% end %> id="<%= id %>">
   <%= form.hidden_field name.to_sym, value: value %>
   <div class="mdc-select__anchor"
@@ -10,9 +10,17 @@
        <% if disabled %>aria-disabled="true"<% end %>
        <% if required %>aria-required="true"<% end %>
   >
-    <span class="mdc-select__ripple"></span>
-    <%- if label -%>
-    <span id="<%= id %>-label" class="mdc-floating-label"><%= label || name.capitalize %></span>
+    <%- unless outlined -%>
+        <span class="mdc-select__ripple"></span>
+        <%- if label -%><span id="<%= id %>-label" class="mdc-floating-label"><%= label || name.capitalize %></span><%- end -%>
+    <%- else -%>
+      <span class="mdc-notched-outline">
+        <span class="mdc-notched-outline__leading"></span>
+        <span class="mdc-notched-outline__notch">
+          <%- if label -%><span id="outlined-select-label" class="mdc-floating-label"><%= label || name.capitalize %></span><%- end -%>
+        </span>
+        <span class="mdc-notched-outline__trailing"></span>
+      </span>
     <%- end -%>
     <span class="mdc-select__selected-text-container">
       <span id="<%= id %>-selected-text" class="mdc-select__selected-text">
@@ -37,7 +45,7 @@
               </polygon>
             </svg>
           </span>
-    <span class="mdc-line-ripple"></span>
+    <%- unless outlined -%><span class="mdc-line-ripple"></span><%- end -%>
   </div>
 
   <div class="mdc-select__menu mdc-menu mdc-menu-surface !z-100 <%= fixed ? 'mdc-menu-surface--fixed' : 'mdc-menu-surface--fullwidth' %>" id="<%= id %>-surface">

data/lib/turbo_material/version.rb

@@ -1,3 +1,3 @@
 module TurboMaterial
-  VERSION = "0.1.9"
+  VERSION = "0.2.1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: turbo_material
 version: !ruby/object:Gem::Version
-  version: 0.1.9
+  version: 0.2.1
 platform: ruby
 authors:
 - Sergey Moiseev