@nexxtmove/ui 1.33.0 → 1.34.0

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>