stimulus

<form data-controller="query-sync" data-action="change->query-sync#apply">
  <select name="status" class="rounded border p-2">
    <option value="">Any</option>
    <option value="open">Open</option>
    <option value="closed">Closed</option>
  </select>

import { Controller } from "@hotwired/stimulus"
import Mousetrap from "mousetrap"

export default class extends Controller {
  connect() {
    // Global shortcuts

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["form"]
  static values = { delay: { type: Number, default: 250 } }

import { Application } from "@hotwired/stimulus"
import FormSubmitController from "./controllers/form_submit_controller"

const application = Application.start()
application.debug = false

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["modal", "message", "confirm", "cancel"]
  static values = {
    message: String

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static values = {
    url: String,
    delay: { type: Number, default: 800 },

<h1>Products</h1>

<%= form_with url: products_path, method: :get,
              data: { turbo_frame: "products_list", turbo_action: "advance" } do |f| %>
  <div class="filters">
    <%= f.text_field :q, value: params[:q], placeholder: "Search products" %>

<div data-controller="disclosure">
  <button type="button" data-action="disclosure#toggle" aria-expanded="false" class="font-medium">
    Advanced
  </button>
  <div data-disclosure-target="panel" class="mt-2 hidden">
    <%= render 'advanced_filters' %>

<nav class="site-nav" data-controller="preload">
  <ul>
    <li>
      <%= link_to "Dashboard", dashboard_path,
            class: "nav-link",
            data: { turbo_preload: true } %>

class Comment < ApplicationRecord
  belongs_to :post
  belongs_to :author, class_name: "User"

  has_rich_text :body

<div data-controller="toast" data-toast-timeout-value="2500" class="rounded bg-gray-900 px-3 py-2 text-white">
  <div class="flex items-start justify-between gap-3">
    <div><%= message %></div>
    <button type="button" data-action="toast#close">✕</button>
  </div>
</div>

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["bar", "percent", "status"]
  static values = {
    current: { type: Number, default: 0 },