@nexxtmove/ui 1.45.0 → 1.47.0

package/src/components/molecules/ToggleGroup/ToggleGroup.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, useTemplateRef, watch, onMounted, nextTick } from 'vue'
+import { computed, ref, useId, useTemplateRef, watch, onMounted, nextTick } from 'vue'
 import { useResizeObserver } from '@vueuse/core'
 import type { IconName } from '@awesome.me/kit-37b149f3ef/icons'
 import NexxtIcon from '../../atoms/Icon/Icon.vue'
@@ -36,6 +36,22 @@ const props = withDefaults(defineProps<NexxtToggleGroupProps>(), {
 
 const model = defineModel<string>({ required: true })
 
+defineSlots<{
+  /**
+   * Content of one option, replacing the default icon and label. Rendered
+   * twice per option -- once on the button and once in the clipped overlay
+   * that shows the active colour -- so it should draw in `currentColor` and
+   * carry no state or ids of its own. The button keeps its `ariaLabel` /
+   * `tooltip` naming, so content without text still needs `ariaLabel`.
+   */
+  option?: (props: {
+    /** The option being rendered. */
+    option: NexxtToggleGroupOption
+    /** Whether this option is the selected value. */
+    selected: boolean
+  }) => unknown
+}>()
+
 const containerRef = useTemplateRef('containerRef')
 const buttonRefs = ref<HTMLButtonElement[]>([])
 const sliderStyle = ref({ width: '0px', transform: 'translateX(0px)' })
@@ -65,6 +81,71 @@ const updateSlider = async () => {
 
 watch(model, async () => await updateSlider())
 
+/**
+ * Keyboard: the toolbar pattern (WAI-ARIA APG) with a roving tabindex. The
+ * group is one tab stop -- the selected option, or the first when none is --
+ * and the arrow keys move focus between the options, wrapping at the ends;
+ * Home and End jump to the first and last. Moving focus selects nothing:
+ * Enter and Space do, through the button's own click. There are no disabled
+ * options to skip, since an option cannot be disabled.
+ *
+ * While focus moves inside the group the tab stop moves with it, so Shift+Tab
+ * from a later option leaves the group instead of landing on the selected one.
+ * Once focus leaves, the tab stop goes back to the selected option.
+ */
+/**
+ * The root is a `toolbar` (WAI-ARIA APG): a set of buttons with one tab stop
+ * and arrow-key navigation. Not a `radiogroup`, because there the arrows select
+ * and here they only move focus. Each option reports whether it is the chosen
+ * one with `aria-pressed`, so a screen reader hears "Week, toggle button,
+ * pressed". The toolbar is named by the visible `label` when there is one;
+ * otherwise a consumer passes `aria-label`, which falls through to the root.
+ */
+const labelId = useId()
+
+const selectedIndex = computed(() =>
+  Math.max(
+    0,
+    props.options.findIndex((o) => o.value === model.value),
+  ),
+)
+
+/** The option that is focused inside the group; `null` while focus is outside. */
+const focusedIndex = ref<number | null>(null)
+
+const tabStop = computed(() => focusedIndex.value ?? selectedIndex.value)
+
+const NEXT_KEYS: Record<string, (index: number, count: number) => number> = {
+  ArrowRight: (index, count) => (index + 1) % count,
+  ArrowDown: (index, count) => (index + 1) % count,
+  ArrowLeft: (index, count) => (index - 1 + count) % count,
+  ArrowUp: (index, count) => (index - 1 + count) % count,
+  Home: () => 0,
+  End: (_, count) => count - 1,
+}
+
+const onKeydown = (event: KeyboardEvent) => {
+  const move = NEXT_KEYS[event.key]
+  if (!move) return
+
+  const index = buttonRefs.value.indexOf(event.target as HTMLButtonElement)
+  if (index === -1) return
+
+  // Or the arrows would scroll the panel the group sits in.
+  event.preventDefault()
+  buttonRefs.value[move(index, props.options.length)]?.focus()
+}
+
+const onFocusin = (event: FocusEvent) => {
+  const index = buttonRefs.value.indexOf(event.target as HTMLButtonElement)
+  if (index !== -1) focusedIndex.value = index
+}
+
+const onFocusout = (event: FocusEvent) => {
+  const next = event.relatedTarget as Node | null
+  if (!next || !containerRef.value?.contains(next)) focusedIndex.value = null
+}
+
 useResizeObserver(containerRef, () => updateSlider())
 
 onMounted(async () => {
@@ -76,14 +157,17 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="flex flex-col gap-1">
-    <label v-if="label" class="justify-start small-normal text-gray-700">
+  <div class="flex flex-col gap-1" role="toolbar" :aria-labelledby="label ? labelId : undefined">
+    <label v-if="label" :id="labelId" class="justify-start small-normal text-gray-700">
       {{ label }}
     </label>
     <div
       ref="containerRef"
       class="relative isolate flex h-10 gap-1 rounded-xl bg-gray-100 p-1"
       :class="{ 'flex-wrap': !equalWidth }"
+      @keydown="onKeydown"
+      @focusin="onFocusin"
+      @focusout="onFocusout"
     >
       <!-- slider pill -->
       <div
@@ -111,13 +195,17 @@ onMounted(async () => {
           <button
             :ref="(el) => (buttonRefs[index] = el as HTMLButtonElement)"
             type="button"
+            :tabindex="index === tabStop ? 0 : -1"
+            :aria-pressed="option.value === model"
             :aria-label="option.ariaLabel ?? (option.label ? undefined : option.tooltip)"
-            class="relative z-10 flex cursor-pointer items-center justify-center gap-1.5 rounded-lg px-4 py-1.5 whitespace-nowrap text-gray-500 hover:text-gray-700"
+            class="relative z-10 flex cursor-pointer items-center justify-center gap-1.5 rounded-lg px-4 py-1.5 whitespace-nowrap text-gray-700 hover:text-gray-900"
             :class="{ 'flex-1': equalWidth }"
             @click="model = option.value"
           >
-            <NexxtIcon v-if="option.icon" :name="option.icon" />
-            <span v-if="option.label" class="extra-small-semibold">{{ option.label }}</span>
+            <slot name="option" :option="option" :selected="option.value === model">
+              <NexxtIcon v-if="option.icon" :name="option.icon" />
+              <span v-if="option.label" class="extra-small-semibold">{{ option.label }}</span>
+            </slot>
           </button>
           <template #tooltip>{{ option.tooltip }}</template>
         </NexxtTooltip>
@@ -125,13 +213,17 @@ onMounted(async () => {
           v-else
           :ref="(el) => (buttonRefs[index] = el as HTMLButtonElement)"
           type="button"
+          :tabindex="index === tabStop ? 0 : -1"
+          :aria-pressed="option.value === model"
           :aria-label="option.ariaLabel ?? (option.label ? undefined : option.tooltip)"
-          class="relative z-10 flex cursor-pointer items-center justify-center gap-1.5 rounded-lg px-4 py-1.5 whitespace-nowrap text-gray-500 hover:text-gray-700"
+          class="relative z-10 flex cursor-pointer items-center justify-center gap-1.5 rounded-lg px-4 py-1.5 whitespace-nowrap text-gray-700 hover:text-gray-900"
           :class="{ 'flex-1': equalWidth }"
           @click="model = option.value"
         >
-          <NexxtIcon v-if="option.icon" :name="option.icon" />
-          <span v-if="option.label" class="extra-small-semibold">{{ option.label }}</span>
+          <slot name="option" :option="option" :selected="option.value === model">
+            <NexxtIcon v-if="option.icon" :name="option.icon" />
+            <span v-if="option.label" class="extra-small-semibold">{{ option.label }}</span>
+          </slot>
         </button>
       </template>
 
@@ -150,8 +242,10 @@ onMounted(async () => {
           class="flex items-center justify-center gap-1.5 rounded-lg px-4 py-1.5 whitespace-nowrap"
           :class="[{ 'flex-1': equalWidth }, option.activeClass ?? 'text-cornflower-blue-600']"
         >
-          <NexxtIcon v-if="option.icon" :name="option.icon" />
-          <span v-if="option.label" class="extra-small-semibold">{{ option.label }}</span>
+          <slot name="option" :option="option" :selected="option.value === model">
+            <NexxtIcon v-if="option.icon" :name="option.icon" />
+            <span v-if="option.label" class="extra-small-semibold">{{ option.label }}</span>
+          </slot>
         </span>
       </div>
     </div>

package/src/components.json

@@ -74,10 +74,12 @@
   "NexxtVideoPlayer": "components/organisms/VideoPlayer/VideoPlayer.vue",
   "NexxtEditorDimensionField": "components/editor/atoms/EditorDimensionField/EditorDimensionField.vue",
   "NexxtEditorSettingsBlock": "components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue",
+  "NexxtEditorSettingsGroup": "components/editor/atoms/EditorSettingsGroup/EditorSettingsGroup.vue",
   "NexxtEditorAlignItems": "components/editor/molecules/EditorAlignItems/EditorAlignItems.vue",
   "NexxtEditorBackgroundSize": "components/editor/molecules/EditorBackgroundSize/EditorBackgroundSize.vue",
   "NexxtEditorBorder": "components/editor/molecules/EditorBorder/EditorBorder.vue",
   "NexxtEditorColor": "components/editor/molecules/EditorColor/EditorColor.vue",
+  "NexxtEditorDashPattern": "components/editor/molecules/EditorDashPattern/EditorDashPattern.vue",
   "NexxtEditorFlexDirection": "components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue",
   "NexxtEditorFontSize": "components/editor/molecules/EditorFontSize/EditorFontSize.vue",
   "NexxtEditorGap": "components/editor/molecules/EditorGap/EditorGap.vue",
@@ -85,9 +87,11 @@
   "NexxtEditorJustifyContent": "components/editor/molecules/EditorJustifyContent/EditorJustifyContent.vue",
   "NexxtEditorLetterSpacing": "components/editor/molecules/EditorLetterSpacing/EditorLetterSpacing.vue",
   "NexxtEditorLineHeight": "components/editor/molecules/EditorLineHeight/EditorLineHeight.vue",
+  "NexxtEditorLineStyle": "components/editor/molecules/EditorLineStyle/EditorLineStyle.vue",
   "NexxtEditorMaxWidth": "components/editor/molecules/EditorMaxWidth/EditorMaxWidth.vue",
   "NexxtEditorPadding": "components/editor/molecules/EditorPadding/EditorPadding.vue",
   "NexxtEditorRadius": "components/editor/molecules/EditorRadius/EditorRadius.vue",
+  "NexxtEditorShadow": "components/editor/molecules/EditorShadow/EditorShadow.vue",
   "NexxtEditorSize": "components/editor/molecules/EditorSize/EditorSize.vue",
   "NexxtEditorSizeLimit": "components/editor/molecules/EditorSizeLimit/EditorSizeLimit.vue",
   "NexxtEditorTextAlign": "components/editor/molecules/EditorTextAlign/EditorTextAlign.vue"

package/src/index.ts

@@ -78,6 +78,12 @@ export type {
   EditorRadiusMessages,
   EditorRadiusValue,
 } from './components/editor/molecules/EditorRadius/EditorRadius.vue'
+export { EDITOR_SHADOW_OPTIONS } from './components/editor/molecules/EditorShadow/EditorShadow.vue'
+export type {
+  EditorShadowMessages,
+  EditorShadowValue,
+  NexxtEditorShadowProps,
+} from './components/editor/molecules/EditorShadow/EditorShadow.vue'
 export { EDITOR_TEXT_ALIGN_OPTIONS } from './components/editor/molecules/EditorTextAlign/EditorTextAlign.vue'
 export type {
   EditorTextAlignMessages,
@@ -138,6 +144,25 @@ export type {
   EditorSizeValue,
 } from './components/editor/molecules/EditorSize/EditorSize.vue'
 export type { EditorSizeLimitMessages } from './components/editor/molecules/EditorSizeLimit/EditorSizeLimit.vue'
+export {
+  EDITOR_LINE_MIN_THICKNESS,
+  EDITOR_LINE_STYLE_OPTIONS,
+  EDITOR_LINE_THICKNESS_STEPS,
+} from './components/editor/molecules/EditorLineStyle/EditorLineStyle.vue'
+export type {
+  EditorLineStyleMessages,
+  EditorLineStyleValue,
+  EditorLineThickness,
+  NexxtEditorLineStyleProps,
+} from './components/editor/molecules/EditorLineStyle/EditorLineStyle.vue'
+export type { NexxtEditorSettingsGroupProps } from './components/editor/atoms/EditorSettingsGroup/EditorSettingsGroup.vue'
+export type { EditorSettingsHeadingLevel } from './components/editor/atoms/EditorSettingsGroup/editorSettingsGroupContext'
+export { EDITOR_DASH_PATTERN_LIMITS } from './components/editor/molecules/EditorDashPattern/EditorDashPattern.vue'
+export type {
+  EditorDashPatternMessages,
+  EditorDashPatternValue,
+  NexxtEditorDashPatternProps,
+} from './components/editor/molecules/EditorDashPattern/EditorDashPattern.vue'
 export type {
   NexxtTemplateCardContentFeature,
   NexxtTemplateCardProps,
@@ -165,6 +190,7 @@ export { default as NexxtEditorAlignItems } from './components/editor/molecules/
 export { default as NexxtEditorBackgroundSize } from './components/editor/molecules/EditorBackgroundSize/EditorBackgroundSize.vue'
 export { default as NexxtEditorBorder } from './components/editor/molecules/EditorBorder/EditorBorder.vue'
 export { default as NexxtEditorColor } from './components/editor/molecules/EditorColor/EditorColor.vue'
+export { default as NexxtEditorDashPattern } from './components/editor/molecules/EditorDashPattern/EditorDashPattern.vue'
 export { default as NexxtEditorDimensionField } from './components/editor/atoms/EditorDimensionField/EditorDimensionField.vue'
 export { default as NexxtEditorFlexDirection } from './components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue'
 export { default as NexxtEditorFontSize } from './components/editor/molecules/EditorFontSize/EditorFontSize.vue'
@@ -173,10 +199,13 @@ export { default as NexxtEditorHeadingType } from './components/editor/molecules
 export { default as NexxtEditorJustifyContent } from './components/editor/molecules/EditorJustifyContent/EditorJustifyContent.vue'
 export { default as NexxtEditorLetterSpacing } from './components/editor/molecules/EditorLetterSpacing/EditorLetterSpacing.vue'
 export { default as NexxtEditorLineHeight } from './components/editor/molecules/EditorLineHeight/EditorLineHeight.vue'
+export { default as NexxtEditorLineStyle } from './components/editor/molecules/EditorLineStyle/EditorLineStyle.vue'
 export { default as NexxtEditorMaxWidth } from './components/editor/molecules/EditorMaxWidth/EditorMaxWidth.vue'
 export { default as NexxtEditorPadding } from './components/editor/molecules/EditorPadding/EditorPadding.vue'
 export { default as NexxtEditorRadius } from './components/editor/molecules/EditorRadius/EditorRadius.vue'
 export { default as NexxtEditorSettingsBlock } from './components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue'
+export { default as NexxtEditorSettingsGroup } from './components/editor/atoms/EditorSettingsGroup/EditorSettingsGroup.vue'
+export { default as NexxtEditorShadow } from './components/editor/molecules/EditorShadow/EditorShadow.vue'
 export { default as NexxtEditorSize } from './components/editor/molecules/EditorSize/EditorSize.vue'
 export { default as NexxtEditorSizeLimit } from './components/editor/molecules/EditorSizeLimit/EditorSizeLimit.vue'
 export { default as NexxtEditorTextAlign } from './components/editor/molecules/EditorTextAlign/EditorTextAlign.vue'

package/tailwind/nexxtmove.tailwind.custom.css

@@ -50,9 +50,14 @@
   --spacing-8xl: 100rem;
   --spacing-full-width: 116rem; /* 1920px (full hd) minus the sidebar: max app width */
 
-  /* Motion easings. `ease-out-strong` decelerates hard: things that arrive or
-     settle into place. `ease-in-out-strong` for elements that move from one
-     spot to another. */
-  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
+  /* Motion easings. `ease-out-strong` (above) decelerates hard: things that
+     arrive or settle into place. `ease-in-out-strong` for elements that move
+     from one spot to another. */
   --ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);
+
+  /* The one colour of every divider in the editor settings panel, as
+     `border-editor-divider`. Drawn by NexxtEditorSettingsGroup. Same name as
+     the copy in the app theme (app/assets/css/main.css), so the app's own
+     dividers keep resolving; the app drops its copy once it adopts this. */
+  --color-editor-divider: var(--color-gray-200);
 }