turbo_material 0.1.8 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9c5202d5448845f0cc5510c5a877bdfc9d128d7d016b4eb42c73f6b3ff27cdd9
-  data.tar.gz: 7daaa56ab8ed778bf42d6a302b1fb64f7ef6741baffba33044147ea9a66d95ef
+  metadata.gz: cf21c621bf44bbc786c329a850f58fc3bb952fa5f600e837484f9a921a1d7c33
+  data.tar.gz: fbe2a7a91241c7ee710217e654085bcef3dde492c25d2c3b40befc060b07b220
 SHA512:
-  metadata.gz: c500bb6fe137b1300f5f58e4d16e9984f4f0e38c4cb072b44773e158a46ae183deadbc0712d462f7284a89a4bed2fa2197464349cb016a5945ccdc1360c671cd
-  data.tar.gz: 6a1b6fd662262bf5014aac7659e0c0858b291c3680540cd81366e37773437d03f9d4719915f5ad62ec15cfc952fba48525a1dd1c41e22bafe9ea7f49c7046bdc
+  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 <%= 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,8 +10,18 @@
        <% if disabled %>aria-disabled="true"<% end %>
        <% if required %>aria-required="true"<% end %>
   >
+    <%- if outlined -%>
     <span class="mdc-select__ripple"></span>
-    <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">
         <%= selected_text || value %>
@@ -35,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.8"
+  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.8
+  version: 0.2.0
 platform: ruby
 authors:
 - Sergey Moiseev