get first stimulusjs dropdown working

This commit is contained in:
drusepth 2022-04-15 14:09:05 -07:00
parent 3dfeb5dc15
commit 719ce145e6
2 changed files with 6 additions and 3 deletions

View File

@ -1,6 +1,9 @@
import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"
import Dropdown from 'stimulus-dropdown'
const application = Application.start()
application.register('dropdown', Dropdown)
const context = require.context(".", true, /\.js$/)
application.load(definitionsFromContext(context))

View File

@ -224,9 +224,9 @@
<div class="relative z-10 bg-white border-b border-gray-200 pb-4">
<div class="max-w-7xl mx-auto px-4 flex items-center justify-between sm:px-6 lg:px-8">
<div class="relative inline-block text-left">
<div data-controller="dropdown" class="relative inline-block text-left">
<div>
<button type="button" class="group inline-flex justify-center text-sm font-medium text-gray-700 hover:text-gray-900" id="menu-button" aria-expanded="false" aria-haspopup="true">
<button data-action="dropdown#toggle click@window->dropdown#hide" type="button" class="group inline-flex justify-center text-sm font-medium text-gray-700 hover:text-gray-900" id="menu-button" aria-expanded="false" aria-haspopup="true">
Sort
<!-- Heroicon name: solid/chevron-down -->
<svg class="flex-shrink-0 -mr-1 ml-1 h-5 w-5 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
@ -245,7 +245,7 @@
From: "transform opacity-100 scale-100"
To: "transform opacity-0 scale-95"
-->
<div class="origin-top-left absolute left-0 mt-2 w-40 rounded-md shadow-2xl bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
<div data-dropdown-target="menu" class="origin-top-left absolute left-0 mt-2 w-40 rounded-md shadow-2xl bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
<div class="py-1" role="none">
<!--
Active: "bg-gray-100", Not Active: ""