progress on sheet

This commit is contained in:
2024-10-12 20:19:22 -07:00
parent 06a23d4d10
commit fc64f81ace

View File

@@ -130,14 +130,16 @@
"No results found"]]]]]) "No results found"]]]]])
(defn multi-typeahead- [params] (defn multi-typeahead- [params]
(println "VALUE IS" (:value params))
[:div.relative {:x-data (hx/json {:open false [:div.relative {:x-data (hx/json {:open false
:baseUrl (if (str/includes? (:url params) "?") :baseUrl (if (str/includes? (:url params) "?")
(str (:url params) "&q=") (str (:url params) "&q=")
(str (:url params) "?q=")) (str (:url params) "?q="))
:value (map (fn [v] {:value ((:value-fn params identity) v) :value (map (fn [v] ((:value-fn params identity) v))
:label ((:content-fn params identity) v)})
(:value params)) (:value params))
:lookup (into {}
(map (fn [v] [ ((:value-fn params identity) v)
((:content-fn params identity) v)])
(:value params)))
:x-init (str "$watch('value', v => $dispatch('change')); ") :x-init (str "$watch('value', v => $dispatch('change')); ")
:search "" :search ""
:active -1 :active -1
@@ -148,7 +150,7 @@
:warning_badge nil}) :warning_badge nil})
;; :x-modelable "value.value" TODO ;; :x-modelable "value.value" TODO
;; :x-model (:x-model params) TODO ;; :x-model (:x-model params) TODO
:x-init "popper = Popper.createPopper($refs.input, $refs.dropdown, {placement: 'bottom-start', strategy: 'fixed', modifiers: {name: 'offset', options: {offset: [0, 10]}}}) :x-init "value=new Set(value || []); popper = Popper.createPopper($refs.input, $refs.dropdown, {placement: 'bottom-start', strategy: 'fixed', modifiers: {name: 'offset', options: {offset: [0, 10]}}})
warning_badge = Popper.createPopper($refs.warning_badge, $refs.warning_pop, {placement: 'top', strategy: 'fixed', modifiers: {name: 'offset', options: {offset: [10,0 ]}}})"} warning_badge = Popper.createPopper($refs.warning_badge, $refs.warning_pop, {placement: 'top', strategy: 'fixed', modifiers: {name: 'offset', options: {offset: [10,0 ]}}})"}
(if (:disabled params) (if (:disabled params)
[:span {:x-text "value.label"}] [:span {:x-text "value.label"}]
@@ -159,15 +161,15 @@
:tabindex 0 :tabindex 0
:x-init (:x-init params) :x-init (:x-init params)
:x-ref "input"} :x-ref "input"}
[:template {:x-for "v in value"} [:template {:x-for "v in Array.from(value.values())"}
[:input (-> params [:input (-> params
(dissoc :class :value-fn :content-fn :placeholder :x-model) (dissoc :class :value-fn :content-fn :placeholder :x-model)
(assoc (assoc
:type "hidden" :type "hidden"
"x-bind:value" "v.value" "x-bind:value" "v"
))]] ))]]
[:div.flex.w-full.justify-items-stretch [:div.flex.w-full.justify-items-stretch
[:span.flex-grow.text-left [:span {"x-text" "value.length"} ] [:span.flex-grow.text-left [:span {"x-text" "value.size"} ]
" selected"] " selected"]
[:div {:class "w-3 h-3 m-1 inline ml-1 justify-self-end text-gray-500 self-center"} [:div {:class "w-3 h-3 m-1 inline ml-1 justify-self-end text-gray-500 self-center"}
@@ -205,7 +207,7 @@
"placeholder" (:placeholder params) "placeholder" (:placeholder params)
"@keydown.down.prevent" "active ++; active = active >= elements.length - 1 ? elements.length - 1 : active" "@keydown.down.prevent" "active ++; active = active >= elements.length - 1 ? elements.length - 1 : active"
"@keydown.up.prevent" "active --; active = active < 0 ? 0 : active" "@keydown.up.prevent" "active --; active = active < 0 ? 0 : active"
"@keydown.enter.prevent.stop" "if ($data.elements[active]) { value.push($data.elements[active]) }" "@keydown.enter.prevent.stop" "if ($data.elements[active]) { if (value.has($data.elements[active].value)) { value.delete($data.elements[active].value) } else {value.add($data.elements[active].value); lookup[$data.elements[active].value] = $data.elements[active].label} } "
"x-init" "$watch('search', s => { if($el.value.length > 2) {fetch(baseUrl + s).then(data=>data.json()).then(data => {elements = data; active=-1}) }})"}] "x-init" "$watch('search', s => { if($el.value.length > 2) {fetch(baseUrl + s).then(data=>data.json()).then(data => {elements = data; active=-1}) }})"}]
[:div.dropdown-options {:class "rounded-b-lg overflow-hidden"} [:div.dropdown-options {:class "rounded-b-lg overflow-hidden"}
[:template {:x-for "(element, index) in elements"} [:template {:x-for "(element, index) in elements"}
@@ -215,9 +217,9 @@
":class" "active == index ? 'active' : ''" ":class" "active == index ? 'active' : ''"
"@mouseover" "active = index" "@mouseover" "active = index"
"@mouseout" "active = -1" "@mouseout" "active = -1"
"@click.prevent" "value.push({value: element.value, label: element.label});" "@click.prevent" "if (value.has(element.value)) { value.delete(element.value) } else {value.add(element.value); lookup[element.value] = element.label}"
} }
[ :input {:type "checkbox" ":checked" "value.map(i=>i.value).includes(element.value)"} ] [ :input {:type "checkbox" ":checked" "value.has(element.value)"} ]
[:span {"x-html" "element.label"}]]]] [:span {"x-html" "element.label"}]]]]
[:template {:x-if "elements.length == 0"} [:template {:x-if "elements.length == 0"}
[:li {:class "px-4 py-2 flex gap-2 items-center outline-0 focus:bg-neutral-100 hover:bg-neutral-100 whitespace-nowrap [&.active]:bg-primary-500 text-gray-800 dark:text-gray-100 text-xs "} [:li {:class "px-4 py-2 flex gap-2 items-center outline-0 focus:bg-neutral-100 hover:bg-neutral-100 whitespace-nowrap [&.active]:bg-primary-500 text-gray-800 dark:text-gray-100 text-xs "}