@dosgato/dialog 1.5.9 → 1.6.0

package/dist/Checkbox.svelte

@@ -6,14 +6,28 @@
   export let value: boolean
   export let onChange: any = undefined
   export let onBlur: any = undefined
+  export let onKeydown: any = undefined
   export let descid: string | undefined = undefined
   export let disabled = false
   export let valid = false
   export let invalid = false
   export let inputelement: HTMLInputElement = undefined as any
+  export let indeterminate = false
+  export let tabindex: number | undefined = undefined
+
+  $: if (inputelement) {
+    if (!indeterminate && inputelement.indeterminate) {
+      inputelement.style.setProperty('--cb-transition', 'none')
+      inputelement.indeterminate = false
+      // restore after one frame so checked transitions still animate
+      requestAnimationFrame(() => { inputelement.style.removeProperty('--cb-transition') })
+    } else {
+      inputelement.indeterminate = indeterminate
+    }
+  }
 </script>
 
-<input bind:this={inputelement} {id} type="checkbox" {name} class:valid class:invalid {disabled} aria-describedby={descid} bind:checked={value} on:change={onChange} on:blur={onBlur}>
+<input bind:this={inputelement} {id} type="checkbox" {name} class:valid class:invalid {disabled} aria-describedby={descid} {tabindex} bind:checked={value} on:change={onChange} on:blur={onBlur} on:keydown={onKeydown}>
 
 <style>
 input, input:before, input:after {
@@ -45,7 +59,7 @@ input[type="checkbox"]::before {
   clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
   transform: scale(0);
   transform-origin: bottom left;
-  transition: 120ms transform ease-in-out;
+  transition: var(--cb-transition, 120ms transform ease-in-out);
   box-shadow: inset 1em 1em var(--dialog-checkbox-color, currentColor);
   /* Windows High Contrast Mode */
   background-color: CanvasText;
@@ -53,6 +67,12 @@ input[type="checkbox"]::before {
 
 input[type="checkbox"]:checked::before {
   transform: scale(1);
+  transition: 120ms transform ease-in-out;
+}
+
+input[type="checkbox"]:indeterminate::before {
+  clip-path: polygon(10% 40%, 10% 60%, 90% 60%, 90% 40%);
+  transform: scale(1);
 }
 
 input[type="checkbox"]:focus {

package/dist/Checkbox.svelte.d.ts

@@ -6,11 +6,14 @@ declare const __propDef: {
         value: boolean;
         onChange?: any;
         onBlur?: any;
+        onKeydown?: any;
         descid?: string | undefined;
         disabled?: boolean;
         valid?: boolean;
         invalid?: boolean;
         inputelement?: HTMLInputElement;
+        indeterminate?: boolean;
+        tabindex?: number | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/FieldChoices.svelte

@@ -3,13 +3,19 @@
   choices than the available width of the `<div>` will support then it will create multiple rows to render within using
   flex. Ordering is top down by default but can be order horizontally by toggling `leftToRight`.
   The value of the field will be an array corresponding to the values of the checkboxes that are checked.
+
+  Choices may optionally include a `group` property. When any choices have a group, they are rendered in fieldsets
+  with the group string as the legend. Choices without a group render ungrouped. All choices still write to the
+  same field path. `selectAll` adds a global select-all checkbox. `groupSelect` adds per-group select-all
+  checkboxes. The two props are independent and can be used separately or together.
 -->
 <script lang="ts">
   import { getContext } from 'svelte'
   import { Field, FORM_CONTEXT, arraySerialize, FORM_INHERITED_PATH } from '@txstate-mws/svelte-forms'
   import type { FormStore } from '@txstate-mws/svelte-forms'
   import { derivedStore } from '@txstate-mws/svelte-store'
-  import { isNotBlank, randomid } from 'txstate-utils'
+  import { isNotBlank, randomid, sortby } from 'txstate-utils'
+  import { modifierKey, ScreenReaderOnly } from '@txstate-mws/svelte-components'
   import Container from './Container.svelte'
   import Checkbox from './Checkbox.svelte'
   import { getDescribedBy } from './helpers'
@@ -19,7 +25,7 @@
   export let id: string | undefined = undefined
   export let path: string
   export let label = ''
-  export let choices: { label?: string, value: any, disabled?: boolean }[] | undefined
+  export let choices: { label?: string, value: any, disabled?: boolean, group?: string }[] | undefined
   export let defaultValue: any = []
   export let conditional: boolean | undefined = undefined
   export let maxwidth = 250
@@ -28,6 +34,7 @@
   export let extradescid: string | undefined = undefined
   export let helptext: string | undefined = undefined
   export let selectAll = false
+  export let groupSelect = false
 
   const store = getContext<FormStore>(FORM_CONTEXT)
   const inheritedPath = getContext<string>(FORM_INHERITED_PATH)
@@ -36,6 +43,7 @@
   const currentWidth = derivedStore(store, 'width')
   $: cols = Math.min(Math.ceil($currentWidth / maxwidth), choices?.length ?? 0)
 
+  // Flat layout (used when no groups)
   let orders: number[]
   let width = '100%'
   function redoLayout (..._: any) {
@@ -45,11 +53,17 @@
   }
   $: redoLayout(choices, cols)
 
+  $: choiceOrder = new Map(choices?.map((c, i) => [c.value, i]) ?? [])
+
+  function sortByChoiceOrder (values: any[]) {
+    return sortby(values, v => choiceOrder.get(v) ?? 0)
+  }
+
   function onChangeCheckbox (setVal: (val: any) => void, choice: NonNullable<typeof choices>[number], included: boolean) {
     setVal(v => {
       if (v == null) return included ? [] : [choice.value]
       if (included) return v.filter(s => s !== choice.value)
-      else return [...v, choice.value]
+      else return sortByChoiceOrder([...v, choice.value])
     })
   }
 
@@ -59,42 +73,203 @@
   }
   $: reactToValue($val)
 
-  let selectAllElement: HTMLInputElement | undefined
+  // Grouping
+  $: hasGroups = choices?.some(c => c.group) ?? false
+
+  let groups: { name: string, items: { choice: NonNullable<typeof choices>[number], originalIndex: number }[] }[] = []
+  let groupLayouts = new Map<string, { width: string, orders: number[] }>()
+
+  function computeGroups (..._: any) {
+    if (!hasGroups || !choices) { groups = []; return }
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity -- already handling reactivity (maintain svelte 4 compat)
+    const map = new Map<string, typeof groups[number]['items']>()
+    for (let i = 0; i < choices.length; i++) {
+      const key = choices[i].group ?? ''
+      if (!map.has(key)) map.set(key, [])
+      map.get(key)!.push({ choice: choices[i], originalIndex: i })
+    }
+    groups = Array.from(map.entries()).map(([name, items]) => ({ name, items }))
+  }
+  $: computeGroups(choices, hasGroups)
+
+  function computeGroupLayouts (..._: any) {
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity -- already handling reactivity (maintain svelte 4 compat)
+    const layouts = new Map<string, { width: string, orders: number[] }>()
+    const maxCols = Math.max(...groups.map(g => Math.min(Math.ceil($currentWidth / maxwidth), g.items.length)), 1)
+    const w = `${100 / maxCols}%`
+    for (const group of groups) {
+      const count = group.items.length
+      const rows = Math.ceil(count / maxCols)
+      const ords = group.items.map((_, i) =>
+        leftToRight ? i : Math.floor((i + 1) / maxCols) + rows * (i % maxCols)
+      )
+      layouts.set(group.name, { width: w, orders: ords })
+    }
+    groupLayouts = layouts
+  }
+  $: computeGroupLayouts(groups, $currentWidth)
+
+  // Select all
   const selectAllId = randomid()
 
   $: selectAllChecked = choices?.every(choice => choice.disabled || selected.has(choice.value)) ?? false
+  $: selectAllIndeterminate = !selectAllChecked && (choices?.some(choice => !choice.disabled && selected.has(choice.value)) ?? false)
 
   function selectAllChanged () {
     if (selectAllChecked) {
-      // it was checked and is now unchecked, clear it out
       void store.setField(finalPath, [])
     } else {
-      // it was not checked and now it is checked
       void store.setField(finalPath, choices?.filter(choice => !choice.disabled).map(choice => choice.value) ?? [])
     }
   }
 
+  // Per-group select all
+  // selected must be passed explicitly so Svelte tracks it as a template dependency
+  function isGroupAllChecked (items: typeof groups[number]['items'], sel: Set<any>): boolean {
+    return items.length > 0 && items.every(item => item.choice.disabled || sel.has(item.choice.value))
+  }
+
+  function isGroupIndeterminate (items: typeof groups[number]['items'], sel: Set<any>): boolean {
+    const enabledItems = items.filter(item => !item.choice.disabled)
+    const selectedCount = enabledItems.filter(item => sel.has(item.choice.value)).length
+    return selectedCount > 0 && selectedCount < enabledItems.length
+  }
+
+  function groupSelectChanged (items: typeof groups[number]['items']) {
+    const allChecked = isGroupAllChecked(items, selected)
+    const groupValues = items.filter(item => !item.choice.disabled).map(item => item.choice.value)
+    if (allChecked) {
+      const removing = new Set(groupValues)
+      void store.setField(finalPath, [...selected].filter(v => !removing.has(v)))
+    } else {
+      // eslint-disable-next-line svelte/prefer-svelte-reactivity -- already handling reactivity (maintain svelte 4 compat)
+      const newSelected = new Set(selected)
+      for (const v of groupValues) newSelected.add(v)
+      void store.setField(finalPath, sortByChoiceOrder(Array.from(newSelected)))
+    }
+  }
+
+  // Roving tabindex - flat list of focusable checkbox DOM ids
+  let focusableIds: string[] = []
+  let activeId = ''
+  const groupCheckboxIds: Record<string, string> = {}
+  const groupLegendIds: Record<string, string> = {}
+
+  function getGroupCheckboxId (groupName: string) {
+    groupCheckboxIds[groupName] ??= randomid()
+    return groupCheckboxIds[groupName]
+  }
+
+  function getGroupLegendId (groupName: string) {
+    groupLegendIds[groupName] ??= randomid()
+    return groupLegendIds[groupName]
+  }
+
+  function computeFocusables (..._: any) {
+    const ids: string[] = []
+    if (selectAll) ids.push(selectAllId)
+    if (hasGroups) {
+      for (const group of groups) {
+        if (group.name && (selectAll || groupSelect)) ids.push(getGroupCheckboxId(group.name))
+        for (const item of group.items) {
+          if (!item.choice.disabled) ids.push(`${finalPath}.${item.originalIndex}`)
+        }
+      }
+    } else {
+      for (let i = 0; i < (choices?.length ?? 0); i++) {
+        if (!choices![i].disabled) ids.push(`${finalPath}.${i}`)
+      }
+    }
+    focusableIds = ids
+    if (!activeId || !ids.includes(activeId)) {
+      activeId = ids[0] ?? ''
+    }
+  }
+  $: computeFocusables(choices, groups, hasGroups, selectAll, groupSelect)
+
+  function onKeydown (e: KeyboardEvent) {
+    if (modifierKey(e)) return
+    let direction = 0
+    if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') direction = -1
+    else if (e.key === 'ArrowDown' || e.key === 'ArrowRight') direction = 1
+    if (!direction) return
+    e.preventDefault()
+    const idx = focusableIds.indexOf(activeId)
+    const next = idx + direction
+    if (next >= 0 && next < focusableIds.length) {
+      activeId = focusableIds[next]
+      document.getElementById(activeId)?.focus()
+    }
+  }
+
+  function tabindexFor (domId: string): number {
+    return activeId === domId ? 0 : -1
+  }
+
   const descid = randomid()
 </script>
 
 <Field {path} {defaultValue} allowedValues={choices?.map(choice => choice.value)} allowedValuesMultiple {conditional} let:path={fullpath} let:value let:onBlur let:setVal let:messages let:valid let:invalid serialize={arraySerialize}>
   <Container path={fullpath} {id} {label} {messages} {descid} {related} {helptext} let:messagesid let:helptextid>
-    <div class="dialog-choices {className}" class:valid class:invalid>
+    <div class="dialog-choices {className}" class:valid class:invalid role="listbox" aria-multiselectable={true} aria-label={label}>
       {#if selectAll}
-        <label for={selectAllId} style:width>
-          <Checkbox id={selectAllId} name={selectAllId} bind:inputelement={selectAllElement} value={selectAllChecked} onChange={selectAllChanged} />
+        <label for={selectAllId} style:width={hasGroups ? '100%' : width}>
+          <Checkbox id={selectAllId} name={selectAllId} value={selectAllChecked} indeterminate={selectAllIndeterminate} onChange={selectAllChanged} {onKeydown} tabindex={tabindexFor(selectAllId)} />
           <span>Select All</span>
         </label>
       {/if}
-      {#each choices as choice, idx (choice.value)}
-        {@const checkid = `${fullpath}.${idx}`}
-        {@const included = value?.includes(choice.value)}
-        {@const label = choice.label || (typeof choice.value === 'string' ? choice.value : '')}
-        <label for={checkid} style:width style:order={orders[idx]}>
-          <Checkbox id={checkid} name={checkid} value={included} descid={getDescribedBy([descid, messagesid, helptextid, extradescid])} disabled={choice.disabled} onChange={() => onChangeCheckbox(setVal, choice, included)} {onBlur} />
-          <span>{label}</span>
-        </label>
-      {/each}
+      {#if hasGroups}
+        {#each groups as group (group.name)}
+          {@const layout = groupLayouts.get(group.name)}
+          {#if group.name}
+            {@const groupLegendId = getGroupLegendId(group.name)}
+            <div class="dialog-choices-group">
+              {#if selectAll || groupSelect}
+                {@const groupCkId = getGroupCheckboxId(group.name)}
+                <label class="dialog-choices-group-header">
+                  <Checkbox id={groupCkId} name="group-{group.name}" value={isGroupAllChecked(group.items, selected)} indeterminate={isGroupIndeterminate(group.items, selected)} onChange={() => groupSelectChanged(group.items)} {onKeydown} tabindex={tabindexFor(groupCkId)} />
+                  <span id={groupLegendId}><ScreenReaderOnly>Select all </ScreenReaderOnly>{group.name}</span>
+                </label>
+              {:else}
+                <div class="dialog-choices-group-header" id={groupLegendId}>{group.name}</div>
+              {/if}
+              <div class="dialog-choices-items">
+                {#each group.items as item, groupIdx (item.choice.value)}
+                  {@const checkid = `${fullpath}.${item.originalIndex}`}
+                  {@const included = value?.includes(item.choice.value)}
+                  {@const choiceLabel = item.choice.label || (typeof item.choice.value === 'string' ? item.choice.value : '')}
+                  <label for={checkid} style:width={layout?.width} style:order={layout?.orders[groupIdx]}>
+                    <Checkbox id={checkid} name={checkid} value={included} descid={getDescribedBy([groupLegendId, descid, messagesid, helptextid, extradescid])} disabled={item.choice.disabled} onChange={() => onChangeCheckbox(setVal, item.choice, included)} {onBlur} {onKeydown} tabindex={tabindexFor(checkid)} />
+                    <span>{choiceLabel}</span>
+                  </label>
+                {/each}
+              </div>
+            </div>
+          {:else}
+            <div class="dialog-choices-items">
+              {#each group.items as item, groupIdx (item.choice.value)}
+                {@const checkid = `${fullpath}.${item.originalIndex}`}
+                {@const included = value?.includes(item.choice.value)}
+                {@const choiceLabel = item.choice.label || (typeof item.choice.value === 'string' ? item.choice.value : '')}
+                <label for={checkid} style:width={layout?.width} style:order={layout?.orders[groupIdx]}>
+                  <Checkbox id={checkid} name={checkid} value={included} descid={getDescribedBy([descid, messagesid, helptextid, extradescid])} disabled={item.choice.disabled} onChange={() => onChangeCheckbox(setVal, item.choice, included)} {onBlur} {onKeydown} tabindex={tabindexFor(checkid)} />
+                  <span>{choiceLabel}</span>
+                </label>
+              {/each}
+            </div>
+          {/if}
+        {/each}
+      {:else}
+        {#each choices as choice, idx (choice.value)}
+          {@const checkid = `${fullpath}.${idx}`}
+          {@const included = value?.includes(choice.value)}
+          {@const label = choice.label || (typeof choice.value === 'string' ? choice.value : '')}
+          <label for={checkid} style:width style:order={orders[idx]}>
+            <Checkbox id={checkid} name={checkid} value={included} descid={getDescribedBy([descid, messagesid, helptextid, extradescid])} disabled={choice.disabled} onChange={() => onChangeCheckbox(setVal, choice, included)} {onBlur} {onKeydown} tabindex={tabindexFor(checkid)} />
+            <span>{label}</span>
+          </label>
+        {/each}
+      {/if}
     </div>
   </Container>
 </Field>
@@ -117,4 +292,19 @@
   label :global(input[type="checkbox"]) {
     transform: none;
   }
+  .dialog-choices-group {
+    padding: 0;
+    margin: 0 0 0.3em 0;
+    width: 100%;
+  }
+  .dialog-choices-group-header {
+    font-weight: 600;
+    margin-bottom: 0.3em;
+  }
+  .dialog-choices-items {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    padding-left: 1.5em;
+  }
 </style>

package/dist/FieldChoices.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
             label?: string;
             value: any;
             disabled?: boolean;
+            group?: string;
         }[] | undefined;
         defaultValue?: any;
         conditional?: boolean | undefined;
@@ -18,6 +19,7 @@ declare const __propDef: {
         extradescid?: string | undefined;
         helptext?: string | undefined;
         selectAll?: boolean;
+        groupSelect?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -32,6 +34,11 @@ export type FieldChoicesSlots = typeof __propDef.slots;
  * choices than the available width of the `<div>` will support then it will create multiple rows to render within using
  * flex. Ordering is top down by default but can be order horizontally by toggling `leftToRight`.
  * The value of the field will be an array corresponding to the values of the checkboxes that are checked.
+ *
+ * Choices may optionally include a `group` property. When any choices have a group, they are rendered in fieldsets
+ * with the group string as the legend. Choices without a group render ungrouped. All choices still write to the
+ * same field path. `selectAll` adds a global select-all checkbox. `groupSelect` adds per-group select-all
+ * checkboxes. The two props are independent and can be used separately or together.
  */
 export default class FieldChoices extends SvelteComponentTyped<FieldChoicesProps, FieldChoicesEvents, FieldChoicesSlots> {
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dosgato/dialog",
   "description": "A component library for building forms that edit a JSON document.",
-  "version": "1.5.9",
+  "version": "1.6.0",
   "scripts": {
     "prepublishOnly": "npm run package",
     "dev": "vite dev --force",