turbo_material 0.2.6 → 0.2.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6e7bbed44ed9064ad71ffcbf477fd9cd7f1f3280b3cf299826424165bce6d2a6
-  data.tar.gz: 2abd0a679e2bb51f2e233ce1867344acc9a066daa8ffa8b9b273d8b0005b65c4
+  metadata.gz: 6acc440d7f51220ea594251511c1427dc12bfdfcd3089535a6f8c5865301348e
+  data.tar.gz: fd4bab6abf129e3bc7451a885bab1792fa9ef0bd1da1b94230926ab9a5850ff0
 SHA512:
-  metadata.gz: 864e6a811042ebc6f5e5d623a9ecdca174562b28c87abf627c613e3d26569225185ebae5cb477dce980070235dc2d44d589d78e42c18dd480d1c18f3020abad5
-  data.tar.gz: cb5c7c8bd7b6ceccbae90c674f65e5aad0e644ecad2410cdecd6667cc99b6b52b6c8ebb5681c94b0ae8625bdfc5a72359c46e8ff2c0a6a727d8bf2ab6d870158
+  metadata.gz: a8bf8d52a2d46cbf0cbd50e980b75b2895fc0dfd63f7e8f1bed6d379a3f6708ec86f411ec2f48f8f3417526aa546b768d5f7a65d49d2e3d48610d729c6339262
+  data.tar.gz: 1460bdf2047d84584c08c870bf58570991c3142f42a726ceb3a779d4a765853eb5b1b2dafa5c22cd6f43d36920d34a23df9d2f5b11dc2b87c8274a1bbc488c1d

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

@@ -1,24 +1,28 @@
-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
+        name: String,
+        prefetch: Boolean,
+        additionalQueryParams: Object,
     }
 
-
     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);
+        if (this.prefetchValue) {
+            this.search();
+        }
         useClickOutside(this);
     }
 
@@ -44,9 +48,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 +77,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 +102,7 @@ export default class extends Controller {
         if (!this.opened) return;
 
         this.materialListOutlet.focusNext();
-        if(event) {
+        if (event) {
             event.preventDefault();
             event.stopPropagation();
         }
@@ -107,7 +112,7 @@ export default class extends Controller {
         if (!this.opened) return;
 
         this.materialListOutlet.focusPrevious();
-        if(event) {
+        if (event) {
             event.preventDefault();
             event.stopPropagation();
         }
@@ -117,7 +122,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();
         }
@@ -133,6 +138,9 @@ export default class extends Controller {
         params.append("name", this.nameValue);
         params.append("opened", this.opened);
         params.append("exclude", this.hiddenTarget.value);
+        Object.keys(this.additionalQueryParamsValue).forEach((param) => {
+            params.append(param, this.additionalQueryParamsValue[param]);
+        });
         get(`${this.urlValue}?${params.toString()}`, {
             responseKind: "turbo-stream",
         });

data/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

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

@@ -1,9 +1,11 @@
-<%# locals: (form:, disabled: false, required: false, name:, label: nil, id:, frame: nil, suffix: nil, type: 'text', url: nil, selected: [], options: [], value: nil, fixed: false) %>
+<%# locals: (form:, disabled: false, required: false, name:, label: nil, id:, frame: nil, suffix: nil, type: 'text', url: nil, selected: [], options: [], value: nil, fixed: false, prefetch: false, additional_query_params: {}) %>
 <%- id = [name, suffix].compact_blank.join('-') -%>
 <div data-controller="material-chips-input"
      data-material-chips-input-url-value="<%= url %>"
      data-material-chips-input-name-value="<%= name %>"
      data-material-chips-input-material-list-outlet="#<%= "#{id}-list" %>"
+     data-material-chips-input-prefetch-value="<%= prefetch.to_s %>"
+     data-material-chips-input-additional-query-params-value="<%= additional_query_params.to_json %>"
      <% if suffix.present? %>data-material-chips-input-suffix-value="<%= suffix %>"<% end %>
      data-action="keydown.esc->material-chips-input#close keydown.enter->prevent-default country-select-focus->material-chips-input#confirmSelection"
 >
@@ -31,6 +33,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>

data/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"

data/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 -%>

data/lib/turbo_material/engine.rb

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

data/lib/turbo_material/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: turbo_material
 version: !ruby/object:Gem::Version
-  version: 0.2.6
+  version: 0.2.8
 platform: ruby
 authors:
 - Sergey Moiseev
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-04-16 00:00:00.000000000 Z
+date: 2024-05-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -114,6 +114,7 @@ files:
 - app/helpers/turbo_material/checkbox_helper.rb
 - app/helpers/turbo_material/chip_set_helper.rb
 - app/helpers/turbo_material/chips_input_helper.rb
+- app/helpers/turbo_material/chips_input_options_helper.rb
 - app/helpers/turbo_material/chips_select_helper.rb
 - app/helpers/turbo_material/data_table_helper.rb
 - app/helpers/turbo_material/input_helper.rb