turbo_material 0.1.9 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 13b9d9d2e54b372094a3cb3d6a4ce2c5beb30417f57296795516d7ae8ee4d0e3
-  data.tar.gz: c8ecebe27c2236eea437c5c0a28a4cd7450ecaa15dd71d6f70d95d491df740cd
+  metadata.gz: cf21c621bf44bbc786c329a850f58fc3bb952fa5f600e837484f9a921a1d7c33
+  data.tar.gz: fbe2a7a91241c7ee710217e654085bcef3dde492c25d2c3b40befc060b07b220
 SHA512:
-  metadata.gz: e143747eb338b42ba472b03103039a7cf479d19a6ce7f1ba362d67ff2007a2185d98c9724132078fe07fde35b3adec4b217c0fcca9109a5cb0f4f98433106eb4
-  data.tar.gz: dbbc4bca36bed11426fa34844c7b45bcf725a9d7134fc45454cf81563833a008f23aa7ce995eeac0ad71dadd053c3809ee19ff74e9082184d4ac0535b717682b
+  metadata.gz: adde992869e1f5d336f34727784349eb77cc7c8417c2d935b856d5d40f1d42a267ac0f0b09309965cdce79c85413b4e9248c5dcf269c5fefceac77ac3e4848cd
+  data.tar.gz: 2a3226658c58fd5ca0ced9362e547960e56d2619ba218d0e959d0d2f7e3d2591fcb8f73c6c800cff67463b81b4416b9e848deb38606aa70edae52cfb09b2ce32

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 %>
   >
+    <%- if outlined -%>
     <span class="mdc-select__ripple"></span>
-    <%- if label -%>
-    <span id="<%= id %>-label" class="mdc-floating-label"><%= label || name.capitalize %></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.0"
 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.0
 platform: ruby
 authors:
 - Sergey Moiseev