feat(CheckMultiple): add multiple check component

Author: adaptive-shield-matrix

lib/input/check/CheckMultiple.tsx

@@ -0,0 +1,129 @@
+import { mdiCheckboxBlankCircleOutline, mdiCheckboxMarkedCircle } from "@mdi/js"
+import type { Accessor } from "solid-js"
+import { For } from "solid-js"
+import { buttonVariant } from "~ui/interactive/button/buttonCva"
+import { ButtonIcon } from "~ui/interactive/button/ButtonIcon"
+import { classesGridCols3xl } from "~ui/static/container/classesGridCols"
+import { classArr } from "~ui/utils/classArr"
+import { classMerge } from "~ui/utils/classMerge"
+import type { SignalObject } from "~ui/utils/createSignalObject"
+import type { MayHaveButtonVariant } from "~ui/utils/MayHaveButtonVariant"
+import type { MayHaveClass } from "~ui/utils/MayHaveClass"
+import type { MayHaveId } from "~ui/utils/MayHaveId"
+import type { MayHaveInnerClass } from "~ui/utils/MayHaveInnerClass"
+
+export interface CheckMultipleProps extends MayHaveId, MayHaveButtonVariant, MayHaveClass, MayHaveInnerClass {
+  // content
+  valueSignal: SignalObject<string[]>
+  getOptions: Accessor<string[]>
+  valueText?: (value: string) => string
+  // styling
+  optionClass?: string
+}
+
+export function CheckMultiple(p: CheckMultipleProps) {
+  return (
+    <div
+      id={p.id}
+      class={classArr(
+        "group border border-input",
+        "px-2 py-2",
+        "ring-offset-background",
+        "rounded-md",
+        "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+        "flex flex-col items-center justify-center gap-1", // layout
+        p.class,
+      )}
+    >
+      <OptionList
+        valueSignal={p.valueSignal}
+        getOptions={p.getOptions}
+        valueText={p.valueText}
+        variant={p.variant}
+        optionClass={p.optionClass}
+        innerClass={p.innerClass}
+      />
+    </div>
+  )
+}
+
+interface OptionListProps extends MayHaveButtonVariant, MayHaveInnerClass {
+  valueSignal: SignalObject<string[]>
+  getOptions: Accessor<string[]>
+  valueText?: (value: string) => string
+  optionClass?: string
+}
+
+function OptionList(p: OptionListProps) {
+  const innerClass = () => {
+    if (p.innerClass) return p.innerClass
+    const optionAmount = p.getOptions().length
+    if (optionAmount <= 0) return ""
+    const base = " gap-x-2 gap-y-1"
+    if (optionAmount <= 5) return `grid grid-cols-1${base}`
+    if (optionAmount <= 9) return `grid grid-cols-2${base}`
+    return `${classesGridCols3xl}${base}`
+  }
+
+  return (
+    <div class={innerClass()}>
+      <For each={p.getOptions()}>
+        {(option) => (
+          <CheckOption
+            option={option}
+            valueSignal={p.valueSignal}
+            valueText={p.valueText}
+            optionClass={p.optionClass}
+            variant={p.variant}
+          />
+        )}
+      </For>
+    </div>
+  )
+}
+
+interface CheckOptionProps extends MayHaveButtonVariant {
+  option: string
+  valueSignal: SignalObject<string[]>
+  valueText?: (value: string) => string
+  optionClass?: string
+}
+
+function CheckOption(p: CheckOptionProps) {
+  const label = () => (p.valueText ? p.valueText(p.option) : p.option)
+  const isSelected = () => p.valueSignal.get().includes(p.option)
+
+  return (
+    <ButtonIcon
+      role="option"
+      aria-selected={isSelected()}
+      icon={isSelected() ? mdiCheckboxMarkedCircle : mdiCheckboxBlankCircleOutline}
+      // iconRight={isSelected() ? mdiCheckboxMarkedCircle : mdiCheckboxBlankCircleOutline}
+      onClick={() => toggleOption(p)}
+      variant={p.variant ?? buttonVariant.filled}
+      class={classMerge("justify-start text-left", p.optionClass)}
+    >
+      {label()}
+    </ButtonIcon>
+  )
+}
+
+function toggleOption(p: CheckOptionProps) {
+  const hasOption = p.valueSignal.get().includes(p.option)
+  if (hasOption) {
+    optionRemove(p)
+  } else {
+    optionAdd(p)
+  }
+}
+
+function optionRemove(p: CheckOptionProps) {
+  const newValues = p.valueSignal.get().filter((v) => v !== p.option)
+  p.valueSignal.set(newValues)
+}
+
+function optionAdd(p: CheckOptionProps) {
+  const newValues = [...p.valueSignal.get(), p.option]
+  newValues.sort((a, b) => a.localeCompare(b))
+  p.valueSignal.set(newValues)
+}

src/demos/input/DemoCheckMultiple.tsx

@@ -0,0 +1,21 @@
+import { demoGetTextValue } from "@/demos/input/demoGetTextValue"
+import { CheckMultiple } from "~ui/input/check/CheckMultiple"
+import { PageWrapper } from "~ui/static/page/PageWrapper"
+import { createSignalObject } from "~ui/utils/createSignalObject"
+import { arrCreate } from "~utils/arr/arrCreate"
+
+const options10Strings = arrCreate<string>(10, (i) => `${i}`)
+const multiValueSignal = createSignalObject<string[]>([])
+
+export function DemoCheckMultiple() {
+  return (
+    <PageWrapper>
+      <CheckMultiple
+        id="DemoMultiCheck2"
+        valueSignal={multiValueSignal}
+        getOptions={() => options10Strings}
+        valueText={demoGetTextValue}
+      />
+    </PageWrapper>
+  )
+}