stimulus 和 turbo js and tailwindcss实现一个cascader

对于一个Cascader（级联选择器）组件，我们可以使用 Stimulus、Turbo.js 和 Tailwind CSS 来实现。下面是一个简单的实现示例：

首先，我们需要定义一个 Stimulus 控制器来管理 Cascader 组件的行为：

// cascader_controller.js

import { Controller } from "stimulus"

export default class extends Controller {
  static targets = [ "select", "options" ]

  connect() {
    this.selectTarget.addEventListener("change", this.handleChange.bind(this))
  }

  handleChange() {
    const value = this.selectTarget.value
    const option = this.optionsTarget.querySelector(`[data-value="${value}"]`)
    if (option) {
      option.click()
    }
  }
}

在上面的代码中，我们定义了 Cascader 控制器，它有两个目标：select 和 options。select 目标是一个 <select> 元素，它用于显示当前已选择的选项。options 目标是一个包含所有选项的列表，每个选项都是一个链接。当用户选择一个选项时，我们将更新 select 元素的值，并触发相应的事件。

接下来，我们需要在 HTML 中使用 Cascader 控制器：

<!-- cascader.html -->

<div data-controller="cascader">
  <select data-target="cascader.select">
    <option value="">请选择</option>
  </select>
  <ul data-target="cascader.options">
    <li><a href="#" data-value="1">选项1</a></li>
    <li><a href="#" data-value="2">选项2</a></li>
    <li><a href="#" data-value="3">选项3</a></li>
  </ul>
</div>

在上面的代码中，我们使用了 data-controller 属性来指定 Cascader 控制器，并使用了 data-target 属性来指定控制器的目标元素。我们还添加了一些选项，每个选项都是一个链接，它们的值通过 data-value 属性来指定。

最后，我们需要使用 Turbo.js 和 Tailwind CSS 来处理页面的动态更新和样式：

// application.js

import { Turbo } from "@hotwired/turbo"
import { start } from "@hotwired/turbo-rails"
import { Application } from "stimulus"
import CascaderController from "./cascader_controller"

const application = Application.start()
application.register("cascader", CascaderController)

start()

Turbo.setProgressBarDelay(0)
Turbo.setProgressBarPosition(0)

document.addEventListener("turbo:load", () => {
  Turbo.clearCache()
})

/* application.css */

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

[data-controller="cascader"] {
  display: inline-block;
  position: relative;
}

[data-controller="cascader"] select {
  appearance: none;
  background-color: white;
  border: 1px solid gray;
  border-radius: 3px;
  box-shadow: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.5;
  padding: 0.5em 1em;
  width: 100%;
}

[data-controller="cascader"] ul {
  background-color: white;
  border: 1px solid gray;
  border-radius: 3px;
  box-shadow: none;
  display: none;
  left: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 100%;
  width: 100%;
  z-index: 999;
}

[data-controller="cascader"] li {
  display: block;
  margin: 0;
  padding: 0;
}

[data-controller="cascader"] a {
  color: black;
  display: block;
  font-size: 14px;
  line-height: 1.5;
  padding: 0.5em 1em;
  text-decoration: none;
  white-space: nowrap;
}

[data-controller="cascader"] a:hover {
  background-color: gray;
  color: white;
}

[data-controller="cascader"] select:focus + ul {
  display: block;
}

在上面的代码中，我们定义了 Cascader 组件的样式，并使用了 Tailwind CSS 来实现它。我们还使用了 Turbo.js 来处理页面的动态更新，以及用 Stimulus 控制器来管理 Cascader 组件的行为。

现在，我们已经成功地实现了一个 Cascader 组件，用户可以使用它来进行级联选择。