@nexxtmove/ui 1.38.0 → 1.40.0

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,
@@ -33,18 +34,22 @@ export type {
   NexxtPlaceholderInputMessages,
   NexxtPlaceholderInputProps,
 } from './components/molecules/PlaceholderInput/PlaceholderInput.vue'
+export { EDITOR_ALIGN_ITEMS_OPTIONS } from './components/editor/molecules/EditorAlignItems/EditorAlignItems.vue'
 export type {
   EditorAlignItemsMessages,
   EditorAlignItemsValue,
 } from './components/editor/molecules/EditorAlignItems/EditorAlignItems.vue'
+export { EDITOR_BACKGROUND_SIZE_OPTIONS } from './components/editor/molecules/EditorBackgroundSize/EditorBackgroundSize.vue'
 export type {
   EditorBackgroundSizeMessages,
   EditorBackgroundSizeValue,
 } from './components/editor/molecules/EditorBackgroundSize/EditorBackgroundSize.vue'
+export { EDITOR_FLEX_DIRECTION_OPTIONS } from './components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue'
 export type {
   EditorFlexDirectionMessages,
   EditorFlexDirectionValue,
 } from './components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue'
+export { EDITOR_GAP_STEPS } from './components/editor/molecules/EditorGap/EditorGap.vue'
 export type {
   EditorGapMessages,
   EditorGapValue,
@@ -58,10 +63,12 @@ export type {
   EditorColorThemeRole,
   EditorColorValue,
 } from './components/editor/molecules/EditorColor/EditorColor.vue'
+export { EDITOR_BORDER_STEPS } from './components/editor/molecules/EditorBorder/EditorBorder.vue'
 export type {
   EditorBorderMessages,
   EditorBorderWidth,
 } from './components/editor/molecules/EditorBorder/EditorBorder.vue'
+export { EDITOR_HEADING_TYPE_OPTIONS } from './components/editor/molecules/EditorHeadingType/EditorHeadingType.vue'
 export type {
   EditorHeadingTypeMessages,
   EditorHeadingTypeValue,
@@ -71,10 +78,12 @@ export type {
   EditorRadiusMessages,
   EditorRadiusValue,
 } from './components/editor/molecules/EditorRadius/EditorRadius.vue'
+export { EDITOR_TEXT_ALIGN_OPTIONS } from './components/editor/molecules/EditorTextAlign/EditorTextAlign.vue'
 export type {
   EditorTextAlignMessages,
   EditorTextAlignValue,
 } from './components/editor/molecules/EditorTextAlign/EditorTextAlign.vue'
+export { EDITOR_JUSTIFY_CONTENT_OPTIONS } from './components/editor/molecules/EditorJustifyContent/EditorJustifyContent.vue'
 export type {
   EditorJustifyContentMessages,
   EditorJustifyContentValue,
@@ -94,7 +103,11 @@ export type {
   EditorLetterSpacingMessages,
   EditorLetterSpacingValue,
 } from './components/editor/molecules/EditorLetterSpacing/EditorLetterSpacing.vue'
-export type { EditorPaddingMessages } from './components/editor/molecules/EditorPadding/EditorPadding.vue'
+export { EDITOR_PADDING_STEPS } from './components/editor/molecules/EditorPadding/EditorPadding.vue'
+export type {
+  EditorPaddingMessages,
+  EditorPaddingStep,
+} from './components/editor/molecules/EditorPadding/EditorPadding.vue'
 export type {
   NexxtTemplateCardContentFeature,
   NexxtTemplateCardProps,