nitro_kit 0.5.0 → 0.5.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b8300c577f175e7d5d72554924f11f38dc66ca00b4dee13d0ec68aa5a3e1d0cf
-  data.tar.gz: ea1bf5a4b4d259a41c5979dd1f380631deb658ab68feb98d83afc978a340fe58
+  metadata.gz: 141423c594eb4edd2084765d1d9852750019ed2f017a604694e250024e96905b
+  data.tar.gz: 0bcd6aa1a87e02c7e2d09ffaa06e9dec1e83c764b73fe71a0ffd460dbfe23647
 SHA512:
-  metadata.gz: 0a1f06668d4e2aae4ad2863bcb3c5925d96ca62567e7bc0a3c7bddc6f2dcd36131bcc6c3c6834b4a30f88dbe5c22e695261a1047cd2d50169846bdc944496df5
-  data.tar.gz: 3ecb781fcbf9e5c8dd270c68d07dfc54517ecb32ba6096b65a91d497562edda9f2dfa99255deb75e99262971272f1198108e6cf214cabb65ce0b1048f4853abc
+  metadata.gz: 69ec22e2e77d95551809913d4704abae453ffe5a21760d594aea5757bcdb15521c7a04835c0d28708bd411039aff1fdf14bc60f1ae1faf24851fc72e4ea666fb
+  data.tar.gz: a941e992a0171a82198d8d0fe877954facae984fef073338b6045a546905562ec2a93dcff77c95a216256f335393d754736e49e639d8bac82d7ff4cbf1496189

data/app/components/nitro_kit/avatar.rb

@@ -2,8 +2,6 @@
 
 module NitroKit
   class Avatar < Component
-    include ActionView::Helpers::AssetUrlHelper
-
     def initialize(src_arg = nil, src: nil, size: :md, **attrs)
       @src = src_arg || src
       @size = size
@@ -23,7 +21,7 @@ module NitroKit
     end
 
     def image
-      helpers.image_tag(src, class: image_class)
+      safe(helpers.image_tag(src, class: image_class))
     end
 
     private

data/app/components/nitro_kit/field.rb

@@ -22,7 +22,7 @@ module NitroKit
       @options = attrs[:options]
 
       @field_attrs = attrs
-      @field_label = label || field_name.to_s.humanize
+      @field_label = label.nil? ? field_name.to_s.humanize : label
       @field_description = description
       @field_error_messages = errors
 

data/app/components/nitro_kit/form_builder.rb

@@ -8,10 +8,14 @@ module NitroKit
       @template.render(NitroKit::Fieldset.new(**attrs), &block)
     end
 
-    def field(field_name, **attrs, &block)
-      label = attrs.fetch(:label, field_name.to_s.humanize)
+    def field(field_name, label: nil, errors: nil, **attrs, &block)
+      if label.nil?
+        label = attrs.fetch(:label, field_name.to_s.humanize)
+      end
 
-      errors = object && object.errors.include?(field_name) ? object.errors.full_messages_for(field_name) : nil
+      if errors.nil?
+        errors = (object && object.errors.include?(field_name) ? object.errors.full_messages_for(field_name) : nil)
+      end
 
       @template.render(NitroKit::Field.new(self, field_name, label:, errors:, **attrs), &block)
     end
@@ -20,7 +24,7 @@ module NitroKit
       @template.render(FieldGroup.new(**attrs), &block)
     end
 
-    # Inputs
+    # Input types
 
     %i[
       checkbox
@@ -47,7 +51,8 @@ module NitroKit
     ]
       .each do |method|
         define_method(method) do |*args, **attrs, &block|
-          @template.send("nk_#{method}", *args, **attrs, &block)
+          type = method.to_s.gsub(/_field$/, "")
+          field(*args, **attrs, type:, label: false, &block)
         end
       end
 

data/app/components/nitro_kit/radio_button.rb

@@ -2,8 +2,6 @@
 
 module NitroKit
   class RadioButton < Component
-    include ActionView::Helpers::FormTagHelper
-
     def initialize(label: nil, **attrs)
       @label = label
       @id = id || SecureRandom.hex(4)

data/app/helpers/nitro_kit/input_helper.rb

@@ -27,7 +27,9 @@ module NitroKit
       week
     ]
       .each do |type|
-        define_method("nk_#{type}_field") do |**attrs|
+        define_method("nk_#{type}_field_tag") do |compat_name = nil, compat_value = nil, **attrs|
+          attrs[:name] ||= compat_name
+          attrs[:value] ||= compat_value
           nk_input(type:, **attrs)
         end
       end

data/app/javascript/controllers/nk/accordion_controller.js

@@ -0,0 +1,18 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["trigger", "content"];
+
+  toggle(event) {
+    const trigger = event.target;
+    const content = trigger.parentElement.querySelector(
+      "[data-nk--accordion-target=content]",
+    );
+
+    const isExpanded = trigger.getAttribute("aria-expanded") === "true";
+
+    // Toggle current item
+    trigger.setAttribute("aria-expanded", (!isExpanded).toString());
+    content.setAttribute("aria-hidden", isExpanded.toString());
+  }
+}

data/app/javascript/controllers/nk/combobox_controller.js

@@ -0,0 +1,130 @@
+import { Controller } from "@hotwired/stimulus";
+import Combobox from "@github/combobox-nav";
+import {
+  computePosition,
+  offset,
+  flip,
+  shift,
+  autoUpdate,
+} from "@floating-ui/dom";
+
+export default class extends Controller {
+  static targets = ["input", "list", "hiddenField", "clearButton"];
+  static values = {
+    open: { type: Boolean, default: false },
+    // Options for floating-ui
+    placement: { type: String },
+    // Options for combobox-nav
+    tabInsertsSuggestions: { type: Boolean },
+    firstOptionSelectionMode: { type: String },
+    scrollIntoViewOptions: { type: Object },
+  };
+
+  connect() {
+    this.combobox = new Combobox(this.inputTarget, this.listTarget, {
+      tabInsertsSuggestions: this.tabInsertsSuggestionsValue,
+      firstOptionSelectionMode: this.firstOptionSelectionModeValue,
+      scrollIntoViewOptions: this.scrollIntoViewOptionsValue,
+    });
+
+    this.updatePosition();
+
+    this.listTarget.addEventListener("combobox-commit", (event) => {
+      this.select(event);
+      this.close();
+    });
+  }
+
+  disconnect() {
+    this.combobox.destroy();
+  }
+
+  select(event) {
+    this.inputTarget.value = event.target.textContent;
+    this.hiddenFieldTarget.value =
+      event.target.dataset.value || event.target.textContent;
+  }
+
+  open() {
+    this.openValue = true;
+  }
+
+  close() {
+    this.openValue = false;
+  }
+
+  focusShift({ target }) {
+    if (!this.openValue) return;
+    if (this.element.contains(target)) return;
+
+    this.close();
+  }
+
+  windowClick({ target }) {
+    if (!this.openValue) return;
+    if (this.element.contains(target)) return;
+
+    this.close();
+  }
+
+  clear() {
+    this.combobox.resetSelection();
+    this.inputTarget.value = "";
+    this.input();
+    this.hiddenFieldTarget.value = "";
+  }
+
+  input(_event) {
+    if (!this.isOpen) this.open();
+
+    const filter = this.inputTarget.value.toLowerCase();
+
+    Array.from(this.listTarget.children).forEach((item) => {
+      const value = item.dataset.value?.toLowerCase();
+      const text = item.textContent.toLowerCase();
+
+      if (value?.includes(filter) || text.includes(filter)) {
+        item.setAttribute("role", "option");
+      } else {
+        item.removeAttribute("role");
+      }
+    });
+
+    this.hiddenFieldTarget.value = this.inputTarget.value;
+  }
+
+  openValueChanged(state, _previous) {
+    if (!this.combobox) return;
+
+    if (state) {
+      this.combobox.start();
+
+      this.listTarget.dataset.state = "open";
+
+      this.clearAutoUpdate = autoUpdate(
+        this.inputTarget,
+        this.listTarget,
+        this.updatePosition,
+      );
+    } else {
+      this.combobox.stop();
+
+      this.listTarget.dataset.state = "closed";
+
+      if (this.clearAutoUpdate) {
+        this.clearAutoUpdate();
+      }
+    }
+  }
+
+  updatePosition = () => {
+    computePosition(this.inputTarget, this.listTarget, {
+      placement: this.placementValue,
+      middleware: [offset(5), flip(), shift({ padding: 5 })],
+    }).then(({ x, y }) => {
+      this.listTarget.style.left = `${x}px`;
+      this.listTarget.style.top = `${y}px`;
+      this.listTarget.style.width = `${this.inputTarget.clientWidth}px`;
+    });
+  };
+}

data/app/javascript/controllers/nk/datepicker_controller.js

@@ -0,0 +1,5 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["input"];
+}

data/app/javascript/controllers/nk/dialog_controller.js

@@ -0,0 +1,19 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["trigger", "dialog"];
+
+  open() {
+    this.dialogTarget.showModal();
+  }
+
+  close() {
+    this.dialogTarget.close();
+  }
+
+  clickOutside(event) {
+    if (event.target === this.dialogTarget) {
+      this.close();
+    }
+  }
+}

data/app/javascript/controllers/nk/dropdown_controller.js

@@ -0,0 +1,78 @@
+import { Controller } from "@hotwired/stimulus";
+import {
+  computePosition,
+  offset,
+  flip,
+  shift,
+  autoUpdate,
+} from "@floating-ui/dom";
+
+export default class extends Controller {
+  static targets = ["trigger", "content"];
+  static values = {
+    placement: { type: String, default: "bottom" },
+  };
+
+  connect() {
+    this.updatePosition();
+  }
+
+  disconnect() {
+    this.close();
+  }
+
+  get isExpanded() {
+    return this.triggerTarget.getAttribute("aria-expanded") === "true";
+  }
+
+  updatePosition = () => {
+    computePosition(this.triggerTarget, this.contentTarget, {
+      placement: this.placementValue,
+      middleware: [offset(5), flip(), shift({ padding: 5 })],
+    }).then(({ x, y }) => {
+      this.contentTarget.style.left = `${x}px`;
+      this.contentTarget.style.top = `${y}px`;
+    });
+  };
+
+  open = () => {
+    this.triggerTarget.setAttribute("aria-expanded", "true");
+    this.contentTarget.setAttribute("aria-hidden", "false");
+
+    document.addEventListener("click", this.clickOutside);
+
+    this.clearAutoUpdate = autoUpdate(
+      this.triggerTarget,
+      this.contentTarget,
+      this.updatePosition,
+    );
+  };
+
+  close = () => {
+    this.triggerTarget.setAttribute("aria-expanded", "false");
+    this.contentTarget.setAttribute("aria-hidden", "true");
+
+    document.removeEventListener("click", this.clickOutside);
+
+    if (this.clearAutoUpdate) {
+      this.clearAutoUpdate();
+    }
+  };
+
+  toggle = () => {
+    if (this.isExpanded) {
+      this.close();
+    } else {
+      this.open();
+    }
+  };
+
+  clickOutside = (event) => {
+    if (
+      !this.contentTarget.contains(event.target) &&
+      !this.triggerTarget.contains(event.target)
+    ) {
+      this.close();
+    }
+  };
+}

data/app/javascript/controllers/nk/switch_controller.js

@@ -0,0 +1,32 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  connect() {
+    if (!this.element.hasAttribute("tabindex")) {
+      this.element.setAttribute("tabindex", "0");
+    }
+  }
+
+  click() {
+    if (this.element.hasAttribute("disabled")) return;
+
+    this.toggle();
+  }
+
+  keydown(event) {
+    if (this.element.hasAttribute("disabled")) return;
+
+    if (event.code === "Space" || event.code === "Enter") {
+      event.preventDefault();
+      this.toggle();
+    }
+  }
+
+  get checked() {
+    return this.element.getAttribute("aria-checked") === "true";
+  }
+
+  toggle() {
+    this.element.setAttribute("aria-checked", (!this.checked).toString());
+  }
+}

data/app/javascript/controllers/nk/tabs_controller.js

@@ -0,0 +1,46 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["tab", "panel"];
+  static values = { active: String };
+
+  setActiveTab(event) {
+    this.activeValue = event.params.key;
+  }
+
+  prevTab(event) {
+    const prevTab = event.target.previousElementSibling;
+    if (prevTab) {
+      prevTab.click();
+      prevTab.focus();
+    }
+  }
+
+  nextTab(event) {
+    const nextTab = event.target.nextElementSibling;
+    if (nextTab) {
+      nextTab.click();
+      nextTab.focus();
+    }
+  }
+
+  activeValueChanged() {
+    const value = this.activeValue;
+
+    this.panelTargets.forEach((panel) => {
+      if (panel.dataset.key === value) {
+        panel.ariaHidden = false;
+      } else {
+        panel.ariaHidden = true;
+      }
+    });
+
+    this.tabTargets.forEach((tab) => {
+      if (tab.dataset.key === value) {
+        tab.ariaSelected = true;
+      } else {
+        tab.ariaSelected = false;
+      }
+    });
+  }
+}

data/app/javascript/controllers/nk/toast_controller.js

@@ -0,0 +1,68 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["list", "template", "sink"];
+  static values = {
+    duration: { type: Number, default: 5000 },
+  };
+
+  connect() {
+    this.#flushSink();
+
+    if (this.hasSinkTarget) {
+      this.mutationObserver = new MutationObserver(([event]) => {
+        if (event.addedNodes.length === 0) return;
+        this.#flushSink();
+      });
+      this.mutationObserver.observe(this.sinkTarget, { childList: true });
+    }
+  }
+
+  disconnect() {
+    if (this.mutationObserver) this.mutationObserver.disconnect();
+  }
+
+  toast({ params }) {
+    const { title, description } = params;
+    const item = this.templateTarget.content.cloneNode(true);
+
+    item.querySelector("[data-slot=title]").textContent = title;
+    item.querySelector("[data-slot=description]").textContent = description;
+
+    this.show(item);
+  }
+
+  show(item) {
+    this.clear();
+    this.listTarget.appendChild(item);
+
+    requestAnimationFrame(() => {
+      this.listTarget.children[0].dataset.state = "open";
+    });
+
+    if (this.timer) clearTimeout(this.timer);
+
+    this.timer = setTimeout(() => {
+      this.hide();
+    }, this.durationValue);
+  }
+
+  hide() {
+    this.listTarget.children[0].dataset.state = "closed";
+
+    setTimeout(() => {
+      this.clear();
+    }, 250);
+  }
+
+  clear() {
+    this.listTarget.innerHTML = "";
+  }
+
+  #flushSink() {
+    for (const li of this.sinkTarget.children) {
+      this.show(li.cloneNode(true));
+      li.remove();
+    }
+  }
+}

data/app/javascript/controllers/nk/tooltip_controller.js

@@ -0,0 +1,59 @@
+import { Controller } from "@hotwired/stimulus";
+import {
+  computePosition,
+  offset,
+  flip,
+  shift,
+  autoUpdate,
+} from "@floating-ui/dom";
+
+export default class extends Controller {
+  static targets = ["content"];
+  static values = {
+    open: { type: Boolean, default: false },
+    // Options for floating-ui
+    placement: { type: String, default: "top" },
+  };
+
+  connect() {
+    this.updatePosition();
+  }
+
+  disconnect() {
+    this.close();
+  }
+
+  open() {
+    this.openValue = true;
+  }
+
+  close() {
+    this.openValue = false;
+  }
+
+  openValueChanged(state, _previous) {
+    this.contentTarget.dataset.state = state ? "open" : "closed";
+
+    if (state) {
+      this.clearAutoUpdate = autoUpdate(
+        this.element,
+        this.contentTarget,
+        this.updatePosition,
+      );
+    } else {
+      if (this.clearAutoUpdate) {
+        this.clearAutoUpdate();
+      }
+    }
+  }
+
+  updatePosition = () => {
+    computePosition(this.element, this.contentTarget, {
+      placement: this.placementValue,
+      middleware: [offset(5), flip(), shift({ padding: 5 })],
+    }).then(({ x, y }) => {
+      this.contentTarget.style.left = `${x}px`;
+      this.contentTarget.style.top = `${y}px`;
+    });
+  };
+}

data/lib/nitro_kit/version.rb

@@ -1,3 +1,3 @@
 module NitroKit
-  VERSION = "0.5.0"
+  VERSION = "0.5.2"
 end

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: nitro_kit
 version: !ruby/object:Gem::Version
-  version: 0.5.0
+  version: 0.5.2
 platform: ruby
 authors:
 - Mikkel Malmberg
 bindir: bin
 cert_chain: []
-date: 2025-02-10 00:00:00.000000000 Z
+date: 2025-02-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -120,6 +120,15 @@ files:
 - app/helpers/nitro_kit/textarea_helper.rb
 - app/helpers/nitro_kit/toast_helper.rb
 - app/helpers/nitro_kit/tooltip_helper.rb
+- app/javascript/controllers/nk/accordion_controller.js
+- app/javascript/controllers/nk/combobox_controller.js
+- app/javascript/controllers/nk/datepicker_controller.js
+- app/javascript/controllers/nk/dialog_controller.js
+- app/javascript/controllers/nk/dropdown_controller.js
+- app/javascript/controllers/nk/switch_controller.js
+- app/javascript/controllers/nk/tabs_controller.js
+- app/javascript/controllers/nk/toast_controller.js
+- app/javascript/controllers/nk/tooltip_controller.js
 - lib/generators/nitro_kit/component_generator.rb
 - lib/nitro_kit.rb
 - lib/nitro_kit/engine.rb