nitro_kit 0.5.0 → 0.5.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b8300c577f175e7d5d72554924f11f38dc66ca00b4dee13d0ec68aa5a3e1d0cf
-  data.tar.gz: ea1bf5a4b4d259a41c5979dd1f380631deb658ab68feb98d83afc978a340fe58
+  metadata.gz: c6eec3cce7aa4fea915dc5db94356849f55d1335797a682651382287d9f63207
+  data.tar.gz: ea81efcdcd9d8b6e60a697f7d3b6e38ed26e6f6226f48a6ad249f9b984c6ae1b
 SHA512:
-  metadata.gz: 0a1f06668d4e2aae4ad2863bcb3c5925d96ca62567e7bc0a3c7bddc6f2dcd36131bcc6c3c6834b4a30f88dbe5c22e695261a1047cd2d50169846bdc944496df5
-  data.tar.gz: 3ecb781fcbf9e5c8dd270c68d07dfc54517ecb32ba6096b65a91d497562edda9f2dfa99255deb75e99262971272f1198108e6cf214cabb65ce0b1048f4853abc
+  metadata.gz: 48a1d7b809cad9a30dae1e0d53210faea9c13e22b5c977fab4c3f4024a3fd7f7a4a30e50e69a449e817083a586388d162fc43d7ddf6a96a1159472b26eab0259
+  data.tar.gz: faecf1f62cd5e31fb729dd0c6ed80ff75245661d57adf09930e9b5a8de0b7f75f622776a391d6d8ebf22233a2a17375df02eb1bf459fdb0e47c6d0dc086f0c1f

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.1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: nitro_kit
 version: !ruby/object:Gem::Version
-  version: 0.5.0
+  version: 0.5.1
 platform: ruby
 authors:
 - Mikkel Malmberg
@@ -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