mainej / headlessui-reagent Goto Github PK
View Code? Open in Web Editor NEWreagent wrappers for @headlessui/react components
License: MIT License
reagent wrappers for @headlessui/react components
License: MIT License
I've copied people
, person-by-id
and listbox-example
into my own project and it causes the following error:
Uncaught Error: Assert failed: Invalid Hiccup form: [nil {:leave "transition ease-in duration-100", :leave-from "opacity-100", :leave-to "opacity-0"} [G__33906 {:class "absolute w-full py-1 mt-1 overflow-auto text-base bg-white rounded-md shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"} ([G__33906 {:value 1, :class #object[Function]} #object[Function]] [G__33906 {:value 2, :class #object[Function]} #object[Function]] [G__33906 {:value 3, :class #object[Function]} #object[Function]] [G__33906 {:value 4, :class #object[Function]} #object[Function]] [G__33906 {:value 5, :class #object[Function]} #object[Function]] [G__33906 {:value 6, :class #object[Function]} #object[Function]])]]
(in G__33906)
(valid-tag? tag)
reagent$impl$template$vec_to_elem template.cljs:277
reagent$impl$template$as_element template.cljs:294
reagent$impl$protocols$Compiler$as_element$arity$2 template.cljs:315
reagent$impl$protocols$as_element protocols.cljs:6
make_element template.cljs:140
3 core.cljs:5688
2 cljs.core.js:20602
I can't figure out why it works in the example but not when the code is copy pasted into my project.
My project also uses Shadow-cljs version 2.17.3 and Reagent 1.1.0.
The listbox-example
works fine when I remove the ui//transition
wrapping of the options.
I've built my combobox component using the example file. When trying to render multiple combobox-option components with :as prop, I get the following error caught TypeError: aItem.compareDocumentPosition is not a function.
It works fine if I only have one combobox-option, but for multiple instances it fails. The component which is given to :as is copied from the documentation.
(defn panel-ul [props children]
(into [:ul.bg-red-500 props] children))
And here is the full component
`(defn multi-select []
(r/with-let [!selected (r/atom (first people))
!query (r/atom "")
!filtered-people (r/reaction
(let [query @!query]
(if (str/blank? query)
people
(filter #(str/includes? (string->query (:name %)) query)
people))))]
(let [selected @!selected
filtered-people @!filtered-people]
[:div.w-72.h-72
[ui/combobox {:multiple true
:value filtered-people
:on-change #(reset! !selected (get person-by-id %))}
[:div.relative.mt-1
[:div.relative.w-full.text-left.bg-white.rounded-lg.shadow-md.cursor-default.focus:outline-none.focus-visible:ring-2.focus-visible:ring-opacity-75.focus-visible:ring-white.focus-visible:ring-offset-teal-300.focus-visible:ring-offset-2.sm:text-sm.overflow-hidden
[ui/combobox-input {:class #{"w-full" "border-none" "focus:ring-0" "py-2" "pl-3" "pr-10" "text-sm" "leading-5" "text-gray-900"}
:display-value (fn [id] (:name (get person-by-id id)))
:on-change #(reset! !query (string->query (.-value (.-target %))))}]
[ui/combobox-button {:class #{"absolute" "inset-y-0" "right-0" "flex" "items-center" "pr-2"}}
[icons/icon-semantic
{:class #{"font-black"}}
"magnifying-glass"]]
[ui/transition
{:leave "transition ease-in duration-100"
:leave-from "opacity-100"
:leave-to "opacity-0"}]]
[ui/combobox-options {:as "div.absolute.w-full.py-1.mt-1.overflow-auto.text-base.bg-white.rounded-md.shadow-lg.max-h-60.ring-1.ring-black.ring-opacity-5.focus:outline-none.sm:text-sm" :static true}
[:<>
(for [person filtered-people]
^{:key (:id person)}
[:div.options-wrapper
[ui/combobox-option
{:value (:id person)
:as panel-ul}]])]]]]])))`
On windows in the example
dir, running npm install
and then npx shadow-cljs watch app
gives:
The required JS dependency "react" is not available, it was required by "node_modules/@heroicons/react/solid/AcademicCapIcon.js".
Does package.json
need to include react
? Sorry if I'm missing something, I don't know much about npm.
[ui/transition-child
{:as Fragment
:enter "transition-opacity ease-linear duration-300",
:enter-from "opacity-0",
:enter-to "opacity-100",
:leave "transition-opacity ease-linear duration-300",
:leave-from "opacity-100",
:leave-to "opacity-0"}
Uncaught TypeError: Cannot read properties of undefined (reading 'add')
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.