Merge branch 'release/v0.2.7'

Gemfile

@@ -22,3 +22,4 @@ gem "lookbook"
 gem "tailwindcss-rails", "~> 2.3"
 
 gem 'carmen'
+

Gemfile.lock

@@ -148,18 +148,18 @@ GEM
     net-smtp (0.5.0)
       net-protocol
     nio4r (2.7.1)
-    nokogiri (1.16.3-aarch64-linux)
+    nokogiri (1.16.5-aarch64-linux)
       racc (~> 1.4)
-    nokogiri (1.16.3-arm64-darwin)
+    nokogiri (1.16.5-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.16.3-x86_64-linux)
+    nokogiri (1.16.5-x86_64-linux)
       racc (~> 1.4)
     psych (5.1.2)
       stringio
     public_suffix (5.0.4)
     puma (6.4.2)
       nio4r (~> 2.0)
-    racc (1.7.3)
+    racc (1.8.0)
     rack (3.0.10)
     rack-session (2.0.0)
       rack (>= 3.0.0)

app/assets/javascripts/turbo_material/material_chips_input_controller.js

@@ -1,23 +1,22 @@
-import { Controller } from "@hotwired/stimulus";
-import { get } from "@rails/request.js";
-import { useClickOutside } from 'stimulus-use';
+import {Controller} from "@hotwired/stimulus";
+import {get} from "@rails/request.js";
+import {useClickOutside} from 'stimulus-use';
 
 export default class extends Controller {
     opened = false;
-    static targets = [ "input", "hidden", "field", "panel" ];
-    static outlets = [ "material-list" ];
+    static targets = ["input", "hidden", "field", "panel"];
+    static outlets = ["material-list"];
 
     static values = {
         url: String,
         suffix: String,
         name: String
     }
 
-
     connect() {
         this.inputEl = this.element.querySelector(".mdc-text-field");
         this.chipsetEl = this.element.querySelector(".mdc-chip-set");
-        mdc.textField.MDCTextField.attachTo(this.inputEl);
+        this.input = mdc.textField.MDCTextField.attachTo(this.inputEl);
         this.chips = mdc.chips.MDCChipSet.attachTo(this.chipsetEl);
         useClickOutside(this);
     }
@@ -44,9 +43,10 @@ export default class extends Controller {
         event.stopPropagation();
         event.preventDefault();
         const chip = this.element.querySelector(`.mdc-chip[data-value="${event.target.dataset.value}"]`);
-        this.chipsetEl.removeChild(chip);
-        if (this.chipsetEl.children.length === 0) {
-            this.inputEl.foundation.adapter.floatLabel(false);
+        const chipIndex = this.chips.foundation.adapter.getIndexOfChipById(chip.id);
+        this.chips.foundation.adapter.removeChipAtIndex(chipIndex);
+        if (this.chips.foundation.adapter.getChipListCount() === 0) {
+            this.input.foundation.adapter.floatLabel(false);
         }
         this.hiddenTarget.value = this.chips.chipsList.map((chip) => chip.root.dataset.value).join(',');
         this.search();
@@ -72,7 +72,7 @@ export default class extends Controller {
 
         this.opened = false;
         this.panelTarget.classList.remove("mdc-menu-surface--open");
-        if(event) {
+        if (event) {
             event.preventDefault();
             event.stopPropagation();
         }
@@ -97,7 +97,7 @@ export default class extends Controller {
         if (!this.opened) return;
 
         this.materialListOutlet.focusNext();
-        if(event) {
+        if (event) {
             event.preventDefault();
             event.stopPropagation();
         }
@@ -107,7 +107,7 @@ export default class extends Controller {
         if (!this.opened) return;
 
         this.materialListOutlet.focusPrevious();
-        if(event) {
+        if (event) {
             event.preventDefault();
             event.stopPropagation();
         }
@@ -117,7 +117,7 @@ export default class extends Controller {
         if (!this.opened) return;
 
         this.select(this.materialListOutlet.list.listElements[event.detail.index]);
-        if(event) {
+        if (event) {
             event.preventDefault();
             event.stopPropagation();
         }

app/helpers/turbo_material/chips_input_options_helper.rb

@@ -0,0 +1,7 @@
+module TurboMaterial
+  module ChipsInputOptionsHelper
+    def material_chips_input_options(kwargs = {})
+      render "components/chips_input_options", **kwargs
+    end
+  end
+end

app/views/components/_chips_input.html.erb

@@ -31,6 +31,6 @@
     <span class="mdc-line-ripple"></span>
   </label>
   <div class="mdc-menu-surface--anchor">
-    <%= render partial: 'components/chips_input_options', locals: { options: options, suffix: suffix, name: name, label: label, fixed: fixed } %>
+    <%= material_chips_input_options options: options, suffix: suffix, name: name, label: label, fixed: fixed  %>
   </div>
 </div>

app/views/components/_chips_input_options.html.erb

@@ -1,7 +1,7 @@
 <%# locals: (suffix:, options: [], label:, name:, opened: 'false', fixed: false) %>
 <%- id = [name, suffix].compact_blank.join('-') -%>
 <div id="<%= "#{id}-panel" %>"
-     class="mdc-menu-surface <%= (opened != 'true' || options.size.zero?) ? '' : 'mdc-menu-surface--open' %> !z-100 <%= fixed ? 'mdc-menu-surface--fixed' : 'mdc-menu-surface--fullwidth' %>"
+     class="mdc-menu-surface <%= ((opened != 'true') || options.size.zero?) ? '' : 'mdc-menu-surface--open' %> !z-100 <%= fixed ? 'mdc-menu-surface--fixed' : 'mdc-menu-surface--fullwidth' %>"
      data-controller="material-menu-surface"
      data-material-chips-input-target="panel" data-size="<%= options.size %>">
   <ul class="mdc-deprecated-list max-h-64 overflow-y-auto"

app/views/components/_input.html.erb

@@ -1,9 +1,9 @@
 <%# 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 %>"
+<label class="mdc-text-field rounded-none <%= style == 'filled' ? 'mdc-text-field--filled' : 'mdc-text-field--outlined' %> <%= value || form&.object&.[](name.to_sym) ? 'mdc-text-field--label-floating' : '' %> w-full <%= custom_css %>"
        data-controller="<%= custom_controller || 'material-input' %>" <% if frame %>data-frame="<%= frame %>"<% end %>>
   <%- if style == 'filled' -%>
     <span class="mdc-text-field__ripple"></span>
-    <span class="mdc-floating-label" id="<%= id %>-label">
+    <span class="mdc-floating-label <%= value || form&.object&.[](name.to_sym) ? 'mdc-floating-label--float-above' : '' %>" id="<%= id %>-label">
       <%= label || name.capitalize %>
     </span>
   <%- else -%>

lib/turbo_material/engine.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 require "importmap-rails"
 
 module TurboMaterial
@@ -11,6 +13,7 @@ class Engine < ::Rails::Engine
         helper TurboMaterial::CheckboxHelper
         helper TurboMaterial::ChipSetHelper
         helper TurboMaterial::ChipsInputHelper
+        helper TurboMaterial::ChipsInputOptionsHelper
         helper TurboMaterial::ChipsSelectHelper
         helper TurboMaterial::DataTableHelper
         helper TurboMaterial::MenuButtonHelper

lib/turbo_material/version.rb

@@ -1,3 +1,3 @@
 module TurboMaterial
-  VERSION = "0.2.6"
+  VERSION = "0.2.7"
 end