@nexxtmove/ui 1.51.0 → 1.52.0

package/dist/nuxt.js

@@ -94,6 +94,7 @@ var s = {
 	NexxtEditorLineHeight: "components/editor/molecules/EditorLineHeight/EditorLineHeight.vue",
 	NexxtEditorLineStyle: "components/editor/molecules/EditorLineStyle/EditorLineStyle.vue",
 	NexxtEditorMaxWidth: "components/editor/molecules/EditorMaxWidth/EditorMaxWidth.vue",
+	NexxtEditorOverrideStatus: "components/editor/molecules/EditorOverrideStatus/EditorOverrideStatus.vue",
 	NexxtEditorPadding: "components/editor/molecules/EditorPadding/EditorPadding.vue",
 	NexxtEditorRadius: "components/editor/molecules/EditorRadius/EditorRadius.vue",
 	NexxtEditorShadow: "components/editor/molecules/EditorShadow/EditorShadow.vue",

package/package.json

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

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

@@ -0,0 +1,213 @@
+<script lang="ts">
+export interface NexxtEditorOverrideStatusProps {
+  /** Whether the setting differs from where its value comes from without an override. */
+  overridden: boolean
+  /**
+   * The status while the setting is not overridden, such as `'Volgt huisstijl'`
+   * or `'Grootte 100% (origineel)'`. With `hideWhenDefault` it is not shown,
+   * but it is still announced when a reset brings the setting back.
+   */
+  label: string
+  /**
+   * The status while the setting is overridden, shown next to a dot. Defaults
+   * to the Dutch `'Aangepast'`; a value such as `'Grootte 150%'` works too.
+   */
+  overriddenLabel?: string
+  /**
+   * Text of the reset button, shown only while overridden, such as
+   * `'Terug naar huisstijl'`.
+   */
+  resetLabel: string
+  /** Render no status line at all while the setting is not overridden. */
+  hideWhenDefault?: boolean
+  /**
+   * A selector, matched inside the default slot, for the element that takes the
+   * focus after a reset. Defaults to the first focusable element in the slot.
+   * When it matches nothing focusable, the first focusable element is used, and
+   * without one the component itself takes the focus.
+   */
+  focusTarget?: string
+}
+
+/** Everything that can take the focus; `tabIndex` and state are checked per element. */
+const FOCUSABLE =
+  'a[href], button, input, select, textarea, [tabindex], [contenteditable="true"], [contenteditable=""]'
+
+/** How long an announcement stays in the live region before it is cleared again. */
+const ANNOUNCEMENT_MS = 1000
+</script>
+
+<script lang="ts" setup>
+import { computed, nextTick, onBeforeUnmount, ref, useTemplateRef, watch } from 'vue'
+
+defineOptions({ name: 'NexxtEditorOverrideStatus' })
+
+const {
+  overridden,
+  label,
+  overriddenLabel = 'Aangepast',
+  resetLabel,
+  hideWhenDefault = false,
+  focusTarget,
+} = defineProps<NexxtEditorOverrideStatusProps>()
+
+const emit = defineEmits<{
+  /** The reset button was pressed. The parent clears the override. */
+  reset: []
+}>()
+
+defineSlots<{
+  /** The control the status belongs to, rendered above the status line. */
+  default?: () => unknown
+}>()
+
+const root = useTemplateRef<HTMLElement>('root')
+const row = useTemplateRef<HTMLElement>('row')
+
+const status = computed(() => (overridden ? overriddenLabel : label))
+
+const showRow = computed(() => overridden || !hideWhenDefault)
+
+/**
+ * Whether an element can take the focus right now. `tabIndex` is -1 for the
+ * cells a roving tabindex skips, so only the tab stop of such a group counts.
+ */
+const canFocus = (el: Element): el is HTMLElement =>
+  el instanceof HTMLElement &&
+  el.tabIndex >= 0 &&
+  !el.matches(':disabled') &&
+  !el.closest('[inert]') &&
+  // Not in jsdom; a real browser also skips elements that are not rendered.
+  (typeof el.checkVisibility !== 'function' || el.checkVisibility())
+
+/**
+ * Candidates in the slot only: the status line itself is about to go. An
+ * invalid selector matches nothing rather than throwing, so a typo in
+ * `focusTarget` cannot stop the reset.
+ */
+const inSlot = (selector: string) => {
+  let matches: Element[]
+  try {
+    matches = [...(root.value?.querySelectorAll(selector) ?? [])]
+  } catch {
+    // `process.env.NODE_ENV` stays in the library build, so the consumer's
+    // bundler decides whether this runs (as in NexxtTabs).
+    if (process.env.NODE_ENV !== 'production') {
+      console.warn(
+        `[NexxtEditorOverrideStatus] \`focusTarget\` is not a valid selector: "${selector}". The focus goes to the first focusable element instead.`,
+      )
+    }
+    return []
+  }
+  return matches.filter((el): el is HTMLElement => !row.value?.contains(el) && canFocus(el))
+}
+
+/** The last resort: the component itself, focusable for this one move only. */
+const focusRoot = () => {
+  const el = root.value
+  if (!el) return
+  const release = () => el.removeAttribute('tabindex')
+  el.setAttribute('tabindex', '-1')
+  el.addEventListener('blur', release, { once: true })
+  el.focus()
+  // Without the focus there is no blur to wait for: take the tabindex off now.
+  if (document.activeElement !== el) {
+    el.removeEventListener('blur', release)
+    release()
+  }
+}
+
+const focusControl = () => {
+  const target = (focusTarget ? inSlot(focusTarget)[0] : undefined) ?? inSlot(FOCUSABLE)[0]
+  target?.focus()
+  if (!target || document.activeElement !== target) focusRoot()
+}
+
+const focusIsLost = () => {
+  const active = document.activeElement
+  return !active || active === document.body || !root.value?.contains(active)
+}
+
+/**
+ * The reset button goes with the override, which would drop the focus on
+ * `body`. The focus moves to the control first, while the button still
+ * exists; after the update it is checked again, in case the reset replaced the
+ * control it landed on. The reset is emitted whatever the focus move does.
+ */
+const onReset = async () => {
+  try {
+    focusControl()
+  } finally {
+    emit('reset')
+  }
+  await nextTick()
+  if (focusIsLost()) focusControl()
+}
+
+/**
+ * Only the switch between overridden and not is announced, with the status
+ * that belongs to the new state. A new `overriddenLabel` within the override,
+ * such as "Grootte 110%" on every arrow key, stays silent: the control already
+ * announces its own value. And only while the focus is inside: then the switch
+ * follows from what the user just did (a reset, a change in the control).
+ * Switching to another element in the editor changes every status at once,
+ * and that stays silent. Cleared afterwards, so the copy is not read twice
+ * when browsing.
+ */
+const announcement = ref('')
+let clearTimer: ReturnType<typeof setTimeout> | undefined
+
+watch(
+  () => overridden,
+  () => {
+    if (!root.value?.contains(document.activeElement)) return
+    announcement.value = status.value
+    clearTimeout(clearTimer)
+    clearTimer = setTimeout(() => (announcement.value = ''), ANNOUNCEMENT_MS)
+  },
+)
+
+onBeforeUnmount(() => clearTimeout(clearTimer))
+</script>
+
+<template>
+  <div
+    ref="root"
+    class="rounded-sm outline-cornflower-blue-600 focus-visible:outline-2 focus-visible:outline-offset-2"
+  >
+    <!--
+      `rounded-sm` and the outline only show when the root itself holds the
+      focus: the fallback after a reset when the slot has nothing focusable.
+    -->
+    <slot />
+
+    <div
+      v-if="showRow"
+      ref="row"
+      :class="['flex items-center justify-between gap-3', $slots.default && 'pt-2']"
+    >
+      <span
+        v-if="overridden"
+        class="flex items-center gap-1.5 extra-small-normal text-cornflower-blue-700"
+      >
+        <span aria-hidden="true" class="size-1.5 shrink-0 rounded-full bg-cornflower-blue-500" />
+        {{ status }}
+      </span>
+      <span v-else class="extra-small-normal text-gray-700">{{ status }}</span>
+
+      <!-- No `focus:outline-none`: in Tailwind v4 it hides the focus-visible ring. -->
+      <button
+        v-if="overridden"
+        type="button"
+        class="shrink-0 cursor-pointer rounded-sm extra-small-link text-gray-800 hover:text-gray-950 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cornflower-blue-600"
+        @click="onReset"
+      >
+        {{ resetLabel }}
+      </button>
+    </div>
+
+    <div role="status" aria-live="polite" aria-atomic="true" class="sr-only">
+      {{ announcement }}
+    </div>
+  </div>
+</template>

package/src/components.json

@@ -91,6 +91,7 @@
   "NexxtEditorLineHeight": "components/editor/molecules/EditorLineHeight/EditorLineHeight.vue",
   "NexxtEditorLineStyle": "components/editor/molecules/EditorLineStyle/EditorLineStyle.vue",
   "NexxtEditorMaxWidth": "components/editor/molecules/EditorMaxWidth/EditorMaxWidth.vue",
+  "NexxtEditorOverrideStatus": "components/editor/molecules/EditorOverrideStatus/EditorOverrideStatus.vue",
   "NexxtEditorPadding": "components/editor/molecules/EditorPadding/EditorPadding.vue",
   "NexxtEditorRadius": "components/editor/molecules/EditorRadius/EditorRadius.vue",
   "NexxtEditorShadow": "components/editor/molecules/EditorShadow/EditorShadow.vue",

package/src/index.ts

@@ -226,6 +226,7 @@ export { default as NexxtEditorLetterSpacing } from './components/editor/molecul
 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 NexxtEditorOverrideStatus } from './components/editor/molecules/EditorOverrideStatus/EditorOverrideStatus.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'