@nexxtmove/ui 1.39.0 → 1.40.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "1.39.0",
+  "version": "1.40.1",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue

@@ -12,6 +12,11 @@ interface NexxtEditorSettingsBlockProps {
   switchable?: boolean
 }
 
+/**
+ * One labelled setting in the editor sidebar, optionally collapsible via a
+ * switch. The block draws no separator of its own: the consumer groups and
+ * divides blocks on the wrapper, e.g. `divide-y divide-gray-200`.
+ */
 defineOptions({ name: 'NexxtEditorSettingsBlock' })
 
 const { label, switchable = false } = defineProps<NexxtEditorSettingsBlockProps>()
@@ -32,7 +37,7 @@ const inert = computed(() => (open.value ? undefined : true))
 </script>
 
 <template>
-  <div class="border-b border-gray-200 py-4 last:border-b-0">
+  <div class="py-4">
     <!--
       Switch.vue sets `inheritAttrs: false` and binds `$attrs` on its sr-only
       input, so a class on <Switch> never reaches its root <label>. The child

package/src/components/organisms/ComboboxPanel/ComboboxPanel.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-import { ref, useTemplateRef, computed, onMounted, onUnmounted } from 'vue'
+import { ref, useTemplateRef, computed, onMounted, onUnmounted, useId } from 'vue'
 import NexxtChip from '../../atoms/Chip/Chip.vue'
 import NexxtIcon from '../../atoms/Icon/Icon.vue'
 import NexxtInputField from '../../molecules/InputField/InputField.vue'
-import type { ComboboxOptions } from './combobox-types'
+import ComboboxPanelOptions, { type OptionSection } from './_ComboboxPanelOptions.vue'
+import type { ComboboxOption, ComboboxOptions, NexxtComboboxGroup } from './combobox-types'
 
 type ComboboxPanelProps = {
   icon?: InstanceType<typeof NexxtIcon>['name']
@@ -57,20 +58,53 @@ const getLabel = (option: string | { label: string; value: string | number }) =>
 const getValue = (option: string | { label: string; value: string | number }) =>
   typeof option === 'string' ? option : option.value
 
+const isGroup = (item: ComboboxOption | NexxtComboboxGroup): item is NexxtComboboxGroup =>
+  typeof item === 'object' && 'options' in item
+
+const groupIdBase = useId()
+
+// Flat options become one untitled section, so everything below runs on one shape. Ids come from
+// the group's position in `options`, not in the filtered list, so a heading keeps its id while
+// searching
+const sections = computed((): OptionSection[] => {
+  const items: (ComboboxOption | NexxtComboboxGroup)[] = props.options
+  const groups = items.filter(isGroup)
+  if (groups.length === 0) {
+    return [
+      { id: groupIdBase, options: items.filter((item): item is ComboboxOption => !isGroup(item)) },
+    ]
+  }
+  return groups.map((group, index) => ({
+    id: `${groupIdBase}-group-${index}`,
+    label: group.label,
+    options: group.options,
+  }))
+})
+
+const allOptions = computed(() => sections.value.flatMap((section) => section.options))
+
 const selectedLabels = computed(() =>
   selected.value.map((val) => {
-    const match = props.options.find((o) => getValue(o) === val)
+    const match = allOptions.value.find((o) => getValue(o) === val)
     return { value: val, label: match ? getLabel(match) : String(val), isCustom: !match }
   }),
 )
 
-const filteredOptions = computed(() => {
+// Matches on the option label only; a group without matches drops out, heading included
+const filteredSections = computed(() => {
   const q = search.value.toLowerCase()
-  return props.options
-    .filter((o) => props.singleSelect || !selected.value.includes(getValue(o)))
-    .filter((o) => getLabel(o).toLowerCase().includes(q))
+  return sections.value
+    .map((section) => ({
+      ...section,
+      options: section.options
+        .filter((o) => props.singleSelect || !selected.value.includes(getValue(o)))
+        .filter((o) => getLabel(o).toLowerCase().includes(q)),
+    }))
+    .filter((section) => section.options.length > 0)
 })
 
+const filteredOptions = computed(() => filteredSections.value.flatMap((section) => section.options))
+
 const showAddHint = computed(() => {
   if (!props.allowNew || !search.value) return false
   if (filteredOptions.value.length > 0) return false
@@ -92,6 +126,9 @@ const toggleSingle = (option: string | { label: string; value: string | number }
   emit('select')
 }
 
+const pickOption = (option: ComboboxOption) =>
+  props.singleSelect ? toggleSingle(option) : selectOption(option)
+
 const handleEnter = () => {
   if (props.singleSelect) {
     if (filteredOptions.value.length > 0) toggleSingle(filteredOptions.value[0])
@@ -110,7 +147,7 @@ const addNewItem = () => {
   if (!trimmed) return
   const lower = trimmed.toLowerCase()
   const alreadySelected = selectedLabels.value.some((item) => item.label.toLowerCase() === lower)
-  const existsAsOption = props.options.some((o) => getLabel(o).toLowerCase() === lower)
+  const existsAsOption = allOptions.value.some((o) => getLabel(o).toLowerCase() === lower)
   if (alreadySelected || existsAsOption) return
   if (props.singleSelect) {
     selected.value = [trimmed]
@@ -210,25 +247,12 @@ defineExpose({ focus })
           tabindex="0"
           class="scrollbar-thin max-h-56 overflow-y-auto"
         >
-          <li
-            v-for="option in filteredOptions"
-            :key="getValue(option)"
-            role="option"
-            :aria-selected="selected.includes(getValue(option))"
-            class="flex w-full cursor-pointer items-center gap-2 px-6 py-3 text-left text-sm whitespace-nowrap text-gray-700 transition-colors duration-200 hover:bg-gray-100 hover:text-purple-600 focus:bg-gray-100 focus:outline-none"
-            :class="{
-              'font-medium text-cornflower-blue-600':
-                singleSelect && selected.includes(getValue(option)),
-            }"
-            @click="singleSelect ? toggleSingle(option) : selectOption(option)"
-          >
-            {{ getLabel(option) }}
-            <NexxtIcon
-              v-if="singleSelect && selected.includes(getValue(option))"
-              name="check"
-              class="ml-auto shrink-0 text-xs"
-            />
-          </li>
+          <ComboboxPanelOptions
+            :sections="filteredSections"
+            :selected
+            :single-select
+            @pick="pickOption"
+          />
         </ul>
         <div
           v-if="showAddHint"
@@ -299,25 +323,13 @@ defineExpose({ focus })
       </TransitionGroup>
     </Transition>
     <ul role="listbox" aria-multiselectable="true" class="scrollbar-thin max-h-56 overflow-y-auto">
-      <li
-        v-for="option in filteredOptions"
-        :key="getValue(option)"
-        role="option"
-        :aria-selected="selected.includes(getValue(option))"
-        class="flex w-full min-w-42 cursor-pointer items-center gap-2 px-6 py-3 text-left text-sm whitespace-nowrap text-gray-700 transition-colors duration-200 hover:bg-gray-100 hover:text-purple-600 focus:bg-gray-100 focus:outline-none"
-        :class="{
-          'font-medium text-cornflower-blue-600':
-            singleSelect && selected.includes(getValue(option)),
-        }"
-        @click="singleSelect ? toggleSingle(option) : selectOption(option)"
-      >
-        {{ getLabel(option) }}
-        <NexxtIcon
-          v-if="singleSelect && selected.includes(getValue(option))"
-          name="check"
-          class="ml-auto shrink-0 text-xs"
-        />
-      </li>
+      <ComboboxPanelOptions
+        :sections="filteredSections"
+        :selected
+        :single-select
+        inline
+        @pick="pickOption"
+      />
     </ul>
     <div
       v-if="showAddHint"

package/src/components/organisms/ComboboxPanel/_ComboboxPanelOptions.vue

@@ -0,0 +1,96 @@
+<script lang="ts">
+import type { ComboboxOption } from './combobox-types'
+
+/** A run of options in the listbox; `label` is set for a titled group only. */
+export type OptionSection = { id: string; label?: string; options: ComboboxOption[] }
+
+export interface ComboboxPanelOptionsProps {
+  /** Visible options per section. An untitled section renders its options straight into the list. */
+  sections: OptionSection[]
+  /** Selected values. */
+  selected: (string | number)[]
+  /** Marks the selected option with a tint and a check. */
+  singleSelect?: boolean
+  /** Inline layout (inside `NexxtCombobox`): rows get a minimum width. */
+  inline?: boolean
+}
+</script>
+
+<script lang="ts" setup>
+import { createReusableTemplate } from '@vueuse/core'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
+
+defineOptions({ name: 'NexxtComboboxPanelOptions' })
+
+const {
+  sections,
+  selected,
+  singleSelect = false,
+  inline = false,
+} = defineProps<ComboboxPanelOptionsProps>()
+
+const emit = defineEmits<{ pick: [option: ComboboxOption] }>()
+
+const getLabel = (option: ComboboxOption) => (typeof option === 'string' ? option : option.label)
+
+const getValue = (option: ComboboxOption) => (typeof option === 'string' ? option : option.value)
+
+const isSelected = (option: ComboboxOption) => selected.includes(getValue(option))
+
+const isActive = (option: ComboboxOption) => singleSelect && isSelected(option)
+
+// One option row, shared by grouped and flat sections. Both bindings are declared as props:
+// undeclared, they would be attrs and fall through onto the `<li>`
+const [DefineOption, ReuseOption] = createReusableTemplate<{
+  option: ComboboxOption
+  indented?: boolean
+}>({
+  props: { option: { type: [String, Object], required: true }, indented: Boolean },
+})
+
+const OPTION_CLASS =
+  'flex w-full cursor-pointer items-center gap-2 py-3 text-left text-sm whitespace-nowrap text-gray-700 transition-colors duration-200 hover:bg-gray-100 hover:text-purple-600 focus:bg-gray-100 focus:outline-none'
+
+// Options in a group step in 12px past their heading, so the hierarchy reads at a glance
+const optionClass = (option: ComboboxOption, indented = false) => [
+  OPTION_CLASS,
+  indented ? 'pr-6 pl-9' : 'px-6',
+  { 'min-w-42': inline, 'font-medium text-cornflower-blue-600': isActive(option) },
+]
+</script>
+
+<template>
+  <DefineOption v-slot="{ option, indented }">
+    <li
+      role="option"
+      :aria-selected="isSelected(option)"
+      :class="optionClass(option, indented)"
+      @click="emit('pick', option)"
+    >
+      {{ getLabel(option) }}
+      <NexxtIcon v-if="isActive(option)" name="check" class="ml-auto shrink-0 text-xs" />
+    </li>
+  </DefineOption>
+
+  <template v-for="section in sections" :key="section.id">
+    <!-- `<li>` may not carry role="group", so the group sits in a presentational item. A listbox
+         may only hold options and groups: the heading is presentational too, and names the group
+         through `aria-labelledby` -->
+    <li v-if="section.label !== undefined" role="none">
+      <div role="group" :aria-labelledby="section.id">
+        <div
+          role="presentation"
+          class="px-6 pt-3 pb-1 extra-small-semibold tracking-wide text-gray-700 uppercase select-none"
+        >
+          <span :id="section.id">{{ section.label }}</span>
+        </div>
+        <ul role="none">
+          <ReuseOption v-for="option in section.options" :key="getValue(option)" :option indented />
+        </ul>
+      </div>
+    </li>
+    <template v-else>
+      <ReuseOption v-for="option in section.options" :key="getValue(option)" :option />
+    </template>
+  </template>
+</template>

package/src/components/organisms/ComboboxPanel/combobox-types.ts

@@ -1,5 +1,24 @@
 export type ComboboxOption = string | { label: string; value: string | number }
 
+/**
+ * A titled group of options. Option values must be unique across **all** groups: selection is
+ * stored by value only, so a value that appears twice cannot tell its groups apart.
+ */
+export type NexxtComboboxGroup = {
+  /** Heading shown above the group, and the accessible name of its `role="group"`. */
+  label: string
+  /** The options of this group. */
+  options: ComboboxOption[]
+}
+
 export type ComboboxOptions =
   | { options: string[]; allowNew?: boolean }
   | { options: { label: string; value: string | number }[]; allowNew?: never }
+  | {
+      /**
+       * Options in titled groups. Values must be unique across all groups. Groups cannot be
+       * combined with `allowNew`.
+       */
+      options: NexxtComboboxGroup[]
+      allowNew?: never
+    }

package/src/index.ts

@@ -13,6 +13,7 @@ export type { EnergyLabelLetter } from './components/atoms/EnergyLabel/EnergyLab
 export type { IconType, NexxtIconName } from './components/atoms/Icon/Icon.vue'
 export type { CustomIconName } from './components/atoms/Icon/customIcons'
 export type { NexxtTabItem } from './components/molecules/Tabs/Tabs.vue'
+export type { NexxtComboboxGroup } from './components/organisms/ComboboxPanel/combobox-types'
 export type {
   NexxtPageCardProps,
   NexxtPageCardSlots,