ruby_ui 1.0.0.beta1 → 1.0.0.rc1

data/lib/ruby_ui/combobox/combobox_search_input.rb

@@ -2,21 +2,37 @@
 
 module RubyUI
   class ComboboxSearchInput < Base
-    def initialize(placeholder:, **attrs)
+    def initialize(placeholder:, **)
       @placeholder = placeholder
-      super(**attrs)
+      super(**)
     end
 
     def view_template
-      input_container do
-        search_icon
+      div class: "flex text-muted-foreground items-center border-b px-3" do
+        icon
         input(**attrs)
       end
     end
 
     private
 
-    def search_icon
+    def default_attrs
+      {
+        type: "search",
+        class: "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none border-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        role: "searchbox",
+        placeholder: @placeholder,
+        data: {
+          ruby_ui__combobox_target: "searchInput",
+          action: "keyup->ruby-ui--combobox#filterItems search->ruby-ui--combobox#filterItems"
+        },
+        autocomplete: "off",
+        autocorrect: "off",
+        spellcheck: "false"
+      }
+    end
+
+    def icon
       svg(
         xmlns: "http://www.w3.org/2000/svg",
         viewbox: "0 0 24 24",
@@ -33,24 +49,5 @@ module RubyUI
         )
       end
     end
-
-    def input_container(&)
-      div(class: "flex items-center border-b px-3", &)
-    end
-
-    def default_attrs
-      {
-        class:
-          "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-        placeholder: @placeholder,
-        data: {
-          action: "input->ruby-ui--combobox#onSearchInput",
-          ruby_ui__combobox_target: "search"
-        },
-        autocomplete: "off",
-        autocorrect: "off",
-        spellcheck: false
-      }
-    end
   end
 end

data/lib/ruby_ui/combobox/combobox_toggle_all_checkbox.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ComboboxToggleAllCheckbox < Base
+    def view_template
+      input(type: "checkbox", **attrs)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: [
+          "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background accent-primary",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "disabled:cursor-not-allowed disabled:opacity-50"
+        ],
+        data: {
+          ruby_ui__combobox_target: "toggleAll",
+          action: "change->ruby-ui--combobox#toggleAllItems"
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/combobox/combobox_trigger.rb

@@ -2,15 +2,38 @@
 
 module RubyUI
   class ComboboxTrigger < Base
-    def view_template(&block)
+    def initialize(placeholder: "", **)
+      @placeholder = placeholder
+      super(**)
+    end
+
+    def view_template
       button(**attrs) do
-        block&.call
+        span(class: "truncate", data: {ruby_ui__combobox_target: "triggerContent"}) do
+          @placeholder
+        end
         icon
       end
     end
 
     private
 
+    def default_attrs
+      {
+        type: "button",
+        class: "flex h-full w-full items-center whitespace-nowrap rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 justify-between",
+        data: {
+          placeholder: @placeholder,
+          ruby_ui__combobox_target: "trigger",
+          action: "ruby-ui--combobox#openPopover"
+        },
+        aria: {
+          haspopup: "listbox",
+          expanded: "false"
+        }
+      }
+    end
+
     def icon
       svg(
         xmlns: "http://www.w3.org/2000/svg",
@@ -30,23 +53,5 @@ module RubyUI
         )
       end
     end
-
-    def default_attrs
-      {
-        data: {
-          action: "ruby-ui--combobox#onTriggerClick",
-          ruby_ui__combobox_target: "trigger"
-        },
-        type: "button",
-        role: "combobox",
-        aria: {
-          expanded: "false",
-          haspopup: "listbox",
-          autocomplete: "none",
-          activedescendant: true
-        },
-        class: "flex h-full w-full items-center whitespace-nowrap rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 w-[200px] justify-between"
-      }
-    end
   end
 end

data/lib/ruby_ui/command/command_controller.js

@@ -0,0 +1,136 @@
+import { Controller } from "@hotwired/stimulus";
+import Fuse from "fuse.js";
+
+// Connects to data-controller="ruby-ui--command"
+export default class extends Controller {
+  static targets = ["input", "group", "item", "empty", "content"];
+
+  static values = {
+    open: {
+      type: Boolean,
+      default: false,
+    },
+  };
+
+  connect() {
+    this.inputTarget.focus();
+    this.searchIndex = this.buildSearchIndex();
+    this.toggleVisibility(this.emptyTargets, false);
+    this.selectedIndex = -1;
+
+    if (this.openValue) {
+      this.open();
+    }
+  }
+
+  open(e) {
+    e.preventDefault();
+    document.body.insertAdjacentHTML("beforeend", this.contentTarget.innerHTML);
+    // prevent scroll on body
+    document.body.classList.add("overflow-hidden");
+  }
+
+  dismiss() {
+    // allow scroll on body
+    document.body.classList.remove("overflow-hidden");
+    // remove the element
+    console.log("this.element", this.element);
+    this.element.remove();
+  }
+
+  filter(e) {
+    // Deselect any previously selected item
+    this.deselectAll();
+
+    const query = e.target.value.toLowerCase();
+    if (query.length === 0) {
+      this.resetVisibility();
+      return;
+    }
+
+    this.toggleVisibility(this.itemTargets, false);
+
+    const results = this.searchIndex.search(query);
+    results.forEach((result) =>
+      this.toggleVisibility([result.item.element], true),
+    );
+
+    this.toggleVisibility(this.emptyTargets, results.length === 0);
+    this.updateGroupVisibility();
+  }
+
+  toggleVisibility(elements, isVisible) {
+    elements.forEach((el) => el.classList.toggle("hidden", !isVisible));
+  }
+
+  updateGroupVisibility() {
+    this.groupTargets.forEach((group) => {
+      const hasVisibleItems =
+        group.querySelectorAll(
+          "[data-ruby-ui--command-target='item']:not(.hidden)",
+        ).length > 0;
+      this.toggleVisibility([group], hasVisibleItems);
+    });
+  }
+
+  resetVisibility() {
+    this.toggleVisibility(this.itemTargets, true);
+    this.toggleVisibility(this.groupTargets, true);
+    this.toggleVisibility(this.emptyTargets, false);
+  }
+
+  buildSearchIndex() {
+    const options = {
+      keys: ["value"],
+      threshold: 0.2,
+      includeMatches: true,
+    };
+    const items = this.itemTargets.map((el) => ({
+      value: el.dataset.value,
+      element: el,
+    }));
+    return new Fuse(items, options);
+  }
+
+  handleKeydown(e) {
+    const visibleItems = this.itemTargets.filter(
+      (item) => !item.classList.contains("hidden"),
+    );
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      this.updateSelectedItem(visibleItems, 1);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      this.updateSelectedItem(visibleItems, -1);
+    } else if (e.key === "Enter" && this.selectedIndex !== -1) {
+      e.preventDefault();
+      visibleItems[this.selectedIndex].click();
+    }
+  }
+
+  updateSelectedItem(visibleItems, direction) {
+    if (this.selectedIndex >= 0) {
+      this.toggleAriaSelected(visibleItems[this.selectedIndex], false);
+    }
+
+    this.selectedIndex += direction;
+
+    // Ensure the selected index is within the bounds of the visible items
+    if (this.selectedIndex < 0) {
+      this.selectedIndex = visibleItems.length - 1;
+    } else if (this.selectedIndex >= visibleItems.length) {
+      this.selectedIndex = 0;
+    }
+
+    this.toggleAriaSelected(visibleItems[this.selectedIndex], true);
+  }
+
+  toggleAriaSelected(element, isSelected) {
+    element.setAttribute("aria-selected", isSelected.toString());
+  }
+
+  deselectAll() {
+    this.itemTargets.forEach((item) => this.toggleAriaSelected(item, false));
+    this.selectedIndex = -1;
+  }
+}

data/lib/ruby_ui/context_menu/context_menu_controller.js

@@ -0,0 +1,144 @@
+import { Controller } from "@hotwired/stimulus";
+import tippy from "tippy.js";
+
+export default class extends Controller {
+  static targets = ["trigger", "content", "menuItem"];
+  static values = {
+    options: {
+      type: Object,
+      default: {},
+    },
+    // make content width of the trigger element (true/false)
+    matchWidth: {
+      type: Boolean,
+      default: false,
+    }
+  }
+
+  connect() {
+    this.boundHandleKeydown = this.handleKeydown.bind(this); // Bind the function so we can remove it later
+    this.initializeTippy();
+    this.selectedIndex = -1;
+  }
+
+  disconnect() {
+    this.destroyTippy();
+  }
+
+  initializeTippy() {
+    const defaultOptions = {
+      content: this.contentTarget.innerHTML,
+      allowHTML: true,
+      interactive: true,
+      onShow: (instance) => {
+        this.matchWidthValue && this.setContentWidth(instance); // ensure content width matches trigger width
+        this.addEventListeners();
+      },
+      onHide: () => {
+        this.removeEventListeners();
+        this.deselectAll();
+      },
+      popperOptions: {
+        modifiers: [
+          {
+            name: "offset",
+            options: {
+              offset: [0, 4]
+            },
+          },
+        ],
+      }
+    };
+
+    const mergedOptions = { ...this.optionsValue, ...defaultOptions };
+    this.tippy = tippy(this.triggerTarget, mergedOptions);
+  }
+
+  destroyTippy() {
+    if (this.tippy) {
+      this.tippy.destroy();
+    }
+  }
+
+  setContentWidth(instance) {
+    // box-sizing: border-box
+    const content = instance.popper.querySelector('.tippy-content');
+    if (content) {
+      content.style.width = `${instance.reference.offsetWidth}px`;
+    }
+  }
+
+  handleContextMenu(event) {
+    event.preventDefault();
+    this.open();
+  }
+
+  open() {
+    this.tippy.show();
+  }
+
+  close() {
+    this.tippy.hide();
+  }
+
+  handleKeydown(e) {
+    // return if no menu items (one line fix for)
+    if (this.menuItemTargets.length === 0) { return; }
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      this.updateSelectedItem(1);
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      this.updateSelectedItem(-1);
+    } else if (e.key === 'Enter' && this.selectedIndex !== -1) {
+      e.preventDefault();
+      this.menuItemTargets[this.selectedIndex].click();
+    }
+  }
+
+  updateSelectedItem(direction) {
+    // Check if any of the menuItemTargets have aria-selected="true" and set the selectedIndex to that index
+    this.menuItemTargets.forEach((item, index) => {
+      if (item.getAttribute('aria-selected') === 'true') {
+        this.selectedIndex = index;
+      }
+    });
+
+    if (this.selectedIndex >= 0) {
+      this.toggleAriaSelected(this.menuItemTargets[this.selectedIndex], false);
+    }
+
+    this.selectedIndex += direction;
+
+    if (this.selectedIndex < 0) {
+      this.selectedIndex = this.menuItemTargets.length - 1;
+    } else if (this.selectedIndex >= this.menuItemTargets.length) {
+      this.selectedIndex = 0;
+    }
+
+    this.toggleAriaSelected(this.menuItemTargets[this.selectedIndex], true);
+  }
+
+  toggleAriaSelected(element, isSelected) {
+    // Add or remove attribute
+    if (isSelected) {
+      element.setAttribute('aria-selected', 'true');
+    } else {
+      element.removeAttribute('aria-selected');
+    }
+  }
+
+  deselectAll() {
+    this.menuItemTargets.forEach(item => this.toggleAriaSelected(item, false));
+    this.selectedIndex = -1;
+  }
+
+  addEventListeners() {
+    document.addEventListener('keydown', this.boundHandleKeydown);
+  }
+
+  removeEventListeners() {
+    document.removeEventListener('keydown', this.boundHandleKeydown);
+  }
+}

data/lib/ruby_ui/dialog/dialog_content.rb

@@ -34,7 +34,7 @@ module RubyUI
       {
         data_state: "open",
         class: [
-          "fixed pointer-events-auto left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
+          "fixed flex flex-col pointer-events-auto left-[50%] top-[50%] z-50 w-full max-h-screen overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
           SIZES[@size]
         ]
       }
@@ -43,7 +43,7 @@ module RubyUI
     def close_button
       button(
         type: "button",
-        class: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
+        class: "absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
         data_action: "click->ruby-ui--dialog#dismiss"
       ) do
         svg(

data/lib/ruby_ui/dialog/dialog_controller.js

@@ -0,0 +1,32 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="dialog"
+export default class extends Controller {
+  static targets = ["content"]
+  static values = {
+    open: {
+      type: Boolean,
+      default: false
+    },
+  }
+
+  connect() {
+    if (this.openValue) {
+      this.open()
+    }
+  }
+
+  open(e) {
+    e.preventDefault()
+    document.body.insertAdjacentHTML('beforeend', this.contentTarget.innerHTML)
+    // prevent scroll on body
+    document.body.classList.add('overflow-hidden')
+  }
+
+  dismiss() {
+    // allow scroll on body
+    document.body.classList.remove('overflow-hidden')
+    // remove the element
+    this.element.remove()
+  }
+}

data/lib/ruby_ui/dialog/dialog_footer.rb

@@ -10,7 +10,7 @@ module RubyUI
 
     def default_attrs
       {
-        class: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 gap-y-2 sm:gap-y-0"
+        class: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 gap-y-2 sm:gap-y-0 rtl:space-x-reverse"
       }
     end
   end

data/lib/ruby_ui/dialog/dialog_header.rb

@@ -10,7 +10,7 @@ module RubyUI
 
     def default_attrs
       {
-        class: "flex flex-col space-y-1.5 text-center sm:text-left"
+        class: "flex flex-col space-y-1.5 text-center sm:text-left rtl:sm:text-right"
       }
     end
   end

data/lib/ruby_ui/dropdown_menu/dropdown_menu_controller.js

@@ -0,0 +1,120 @@
+import { Controller } from "@hotwired/stimulus";
+import { computePosition, flip, shift, offset } from "@floating-ui/dom";
+
+export default class extends Controller {
+  static targets = ["trigger", "content", "menuItem"];
+  static values = {
+    open: {
+      type: Boolean,
+      default: false,
+    },
+    options: {
+      type: Object,
+      default: {},
+    },
+  }
+
+  connect() {
+    this.boundHandleKeydown = this.#handleKeydown.bind(this); // Bind the function so we can remove it later
+    this.selectedIndex = -1;
+  }
+
+  #computeTooltip() {
+    computePosition(this.triggerTarget, this.contentTarget, {
+      placement: this.optionsValue.placement || "top",
+      middleware: [flip(), shift(), offset(8)],
+    }).then(({ x, y }) => {
+      Object.assign(this.contentTarget.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+      });
+    });
+  }
+
+  onClickOutside(event) {
+    if (!this.openValue) return;
+    if (this.element.contains(event.target)) return;
+
+    event.preventDefault();
+    this.close();
+  }
+
+  toggle() {
+    this.contentTarget.classList.contains("hidden") ? this.#open() : this.close();
+  }
+
+  #open() {
+    this.openValue = true;
+    this.#deselectAll();
+    this.#addEventListeners();
+    this.#computeTooltip()
+    this.contentTarget.classList.remove("hidden");
+  }
+
+  close() {
+    this.openValue = false;
+    this.#removeEventListeners();
+    this.contentTarget.classList.add("hidden");
+  }
+
+  #handleKeydown(e) {
+    // return if no menu items (one line fix for)
+    if (this.menuItemTargets.length === 0) { return; }
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      this.#updateSelectedItem(1);
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      this.#updateSelectedItem(-1);
+    } else if (e.key === 'Enter' && this.selectedIndex !== -1) {
+      e.preventDefault();
+      this.menuItemTargets[this.selectedIndex].click();
+    }
+  }
+
+  #updateSelectedItem(direction) {
+    // Check if any of the menuItemTargets have aria-selected="true" and set the selectedIndex to that index
+    this.menuItemTargets.forEach((item, index) => {
+      if (item.getAttribute('aria-selected') === 'true') {
+        this.selectedIndex = index;
+      }
+    });
+
+    if (this.selectedIndex >= 0) {
+      this.#toggleAriaSelected(this.menuItemTargets[this.selectedIndex], false);
+    }
+
+    this.selectedIndex += direction;
+
+    if (this.selectedIndex < 0) {
+      this.selectedIndex = this.menuItemTargets.length - 1;
+    } else if (this.selectedIndex >= this.menuItemTargets.length) {
+      this.selectedIndex = 0;
+    }
+
+    this.#toggleAriaSelected(this.menuItemTargets[this.selectedIndex], true);
+  }
+
+  #toggleAriaSelected(element, isSelected) {
+    // Add or remove attribute
+    if (isSelected) {
+      element.setAttribute('aria-selected', 'true');
+    } else {
+      element.removeAttribute('aria-selected');
+    }
+  }
+
+  #deselectAll() {
+    this.menuItemTargets.forEach(item => this.#toggleAriaSelected(item, false));
+    this.selectedIndex = -1;
+  }
+
+  #addEventListeners() {
+    document.addEventListener('keydown', this.boundHandleKeydown);
+  }
+
+  #removeEventListeners() {
+    document.removeEventListener('keydown', this.boundHandleKeydown);
+  }
+}

data/lib/ruby_ui/form/form_field_controller.js

@@ -0,0 +1,61 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["input", "error"];
+  static values = { shouldValidate: false };
+
+  connect() {
+    if (this.hasErrorTarget) {
+      if (this.errorTarget.textContent) {
+        this.shouldValidateValue = true;
+      } else {
+        this.errorTarget.classList.add("hidden");
+      }
+    }
+  }
+
+  onInvalid(error) {
+    error.preventDefault();
+
+    this.shouldValidateValue = true;
+    this.#setErrorMessage();
+  }
+
+  onInput() {
+    this.#setErrorMessage();
+  }
+
+  onChange() {
+    this.#setErrorMessage();
+  }
+
+  #setErrorMessage() {
+    if (!this.shouldValidateValue) return;
+
+    if (this.inputTarget.validity.valid) {
+      this.errorTarget.textContent = "";
+      this.errorTarget.classList.add("hidden");
+    } else {
+      this.errorTarget.textContent = this.#getValidationMessage();
+      this.errorTarget.classList.remove("hidden");
+    }
+  }
+
+  #getValidationMessage() {
+    let errorMessage;
+
+    const { validity, dataset, validationMessage } = this.inputTarget;
+
+    if (validity.tooLong) errorMessage = dataset.tooLong;
+    if (validity.tooShort) errorMessage = dataset.tooShort;
+    if (validity.badInput) errorMessage = dataset.badInput;
+    if (validity.typeMismatch) errorMessage = dataset.typeMismatch;
+    if (validity.stepMismatch) errorMessage = dataset.stepMismatch;
+    if (validity.valueMissing) errorMessage = dataset.valueMissing;
+    if (validity.rangeOverflow) errorMessage = dataset.rangeOverflow;
+    if (validity.rangeUnderflow) errorMessage = dataset.rangeUnderflow;
+    if (validity.patternMismatch) errorMessage = dataset.patternMismatch;
+
+    return errorMessage || validationMessage;
+  }
+}