@nexxtmove/ui 1.32.0 → 1.34.0

package/src/components/editor/molecules/EditorRadius/EditorRadius.vue

@@ -11,7 +11,7 @@
  * `full` is last and carries no px: it is a pill, not a size on the scale, so
  * the readout names it instead of measuring it.
  */
-const RADIUS_STEPS = [
+export const EDITOR_RADIUS_STEPS = [
   { token: 'none', px: 0 },
   { token: 'xs', px: 2 },
   { token: 'sm', px: 4 },
@@ -28,7 +28,7 @@ const RADIUS_STEPS = [
  * The radius as the editor needs it: the Tailwind class itself, so the consumer
  * can put the model value straight on the element it styles.
  */
-export type EditorRadiusValue = `rounded-${(typeof RADIUS_STEPS)[number]['token']}`
+export type EditorRadiusValue = `rounded-${(typeof EDITOR_RADIUS_STEPS)[number]['token']}`
 
 /** Overridable copy of the value readout. Every key is optional. */
 export interface EditorRadiusMessages {
@@ -75,7 +75,7 @@ const model = defineModel<EditorRadiusValue>({ required: true })
 
 const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
 
-const maxIndex = RADIUS_STEPS.length - 1
+const maxIndex = EDITOR_RADIUS_STEPS.length - 1
 
 /**
  * Position of the current value on the step list. A value that is not on the
@@ -86,7 +86,7 @@ const maxIndex = RADIUS_STEPS.length - 1
 const stepIndex = computed(() =>
   Math.max(
     0,
-    RADIUS_STEPS.findIndex(({ token }) => `rounded-${token}` === model.value),
+    EDITOR_RADIUS_STEPS.findIndex(({ token }) => `rounded-${token}` === model.value),
   ),
 )
 
@@ -95,12 +95,12 @@ const stepIndex = computed(() =>
 const sliderValue = computed({
   get: () => [stepIndex.value],
   set: ([index]) => {
-    model.value = `rounded-${RADIUS_STEPS[index].token}`
+    model.value = `rounded-${EDITOR_RADIUS_STEPS[index].token}`
   },
 })
 
 const displayValue = computed(() => {
-  const { px } = RADIUS_STEPS[stepIndex.value]
+  const { px } = EDITOR_RADIUS_STEPS[stepIndex.value]
 
   return px === null ? copy.value.full : `${px} ${copy.value.unit}`
 })

package/src/components/molecules/PickerGroup/PickerGroup.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { computed, useId } from 'vue'
+import { usePreferredReducedMotion } from '@vueuse/core'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
+
+interface NexxtPickerGroupProps {
+  /** Heading of the group, and the accessible name of its `role="group"`. */
+  label: string
+  /**
+   * Whether the heading folds the group. `false` turns the heading into a plain label: no
+   * chevron, no click handler, no `aria-expanded`.
+   */
+  collapsible?: boolean
+}
+
+defineOptions({ name: 'NexxtPickerGroup' })
+
+const { label, collapsible = true } = defineProps<NexxtPickerGroupProps>()
+
+/** Whether the options are shown. A closed group has its options out of the DOM. */
+const open = defineModel<boolean>('open', { default: true })
+
+defineSlots<{
+  /** The options: `NexxtPickerItem`s, or anything else with `role="option"`. */
+  default(): unknown
+}>()
+
+const headingId = useId()
+
+const preferredMotion = usePreferredReducedMotion()
+// `motion-reduce:transition-none` alone leaves Vue reading the 120ms off the leaving wrapper, so
+// the options of a "closed" group would linger; without CSS mode they go in the same patch
+const reduced = computed(() => preferredMotion.value === 'reduce')
+
+const HEADING_CLASSES = {
+  base: 'flex h-7 items-center gap-1.5 rounded-lg px-2 extra-small-semibold tracking-wide text-gray-700 uppercase select-none',
+  collapsible: 'cursor-pointer hover:bg-gray-50',
+  static: 'cursor-default',
+}
+
+const CHEVRON_CLASSES = {
+  base: 'extra-small-normal transition-transform motion-reduce:transition-none',
+  open: 'duration-160 ease-out',
+  closed: '-rotate-90 duration-120 ease-in',
+}
+
+const headingClass = computed(() => [
+  HEADING_CLASSES.base,
+  collapsible ? HEADING_CLASSES.collapsible : HEADING_CLASSES.static,
+])
+
+const chevronClass = computed(() => [
+  CHEVRON_CLASSES.base,
+  open.value ? CHEVRON_CLASSES.open : CHEVRON_CLASSES.closed,
+])
+
+// Bound through `v-on`, so a static heading has no click handler at all
+const headingListeners = computed(() =>
+  collapsible ? { click: () => (open.value = !open.value) } : {},
+)
+
+// Options on their way out can no longer be clicked, and assistive tech skips them
+const onBeforeLeave = (el: Element) => el.setAttribute('inert', '')
+</script>
+
+<template>
+  <div
+    role="group"
+    :aria-labelledby="headingId"
+    :aria-expanded="collapsible ? open : undefined"
+    class="flex flex-col not-first:mt-2"
+  >
+    <!-- Not a button and not a tab stop: a listbox may only hold options and groups. The keyboard
+         folds a group with ←/→ from the listbox. `mousedown.prevent` keeps focus where it was. -->
+    <div role="presentation" :class="headingClass" v-on="headingListeners" @mousedown.prevent>
+      <span
+        v-if="collapsible"
+        class="flex size-3 shrink-0 items-center justify-center text-gray-700"
+      >
+        <NexxtIcon name="chevron-down" aria-hidden="true" :class="chevronClass" />
+      </span>
+      <span :id="headingId">{{ label }}</span>
+    </div>
+
+    <!-- No row class on the wrapper itself: after entering it is plain `auto`, so a base class
+         never fights the from/to classes -->
+    <Transition
+      :css="!reduced"
+      enter-active-class="transition-[grid-template-rows,opacity] duration-160 ease-out motion-reduce:transition-none"
+      enter-from-class="grid-rows-[0fr] opacity-0"
+      enter-to-class="grid-rows-[1fr] opacity-100"
+      leave-active-class="transition-[grid-template-rows,opacity] duration-120 ease-in motion-reduce:transition-none"
+      leave-from-class="grid-rows-[1fr] opacity-100"
+      leave-to-class="grid-rows-[0fr] opacity-0"
+      @before-leave="onBeforeLeave"
+    >
+      <div v-if="open" class="grid">
+        <div class="min-h-0 overflow-hidden">
+          <!-- Padding here rather than on the clipping layer, so nothing is left at 0fr -->
+          <div class="flex flex-col gap-0.5 pt-0.5">
+            <slot />
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>