npm - @poveste/app - Versions diffs - 0.15.0 → 0.16.0 - Mend

@poveste/app 0.15.0 → 0.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (77) hide show

package/src/app/components/base/BaseDropdown.vue ADDED Viewed

@@ -0,0 +1,142 @@
+<script lang="ts" setup>
+import { HstTooltip, PopoverAnchor, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, portalTarget } from '@poveste/controls'
+import { onMounted, ref, shallowRef } from 'vue'
+// The wrapper below is what a caller's class and `data-testid` are for, the way
+// they were on `VDropdown` itself.
+defineOptions({ inheritAttrs: false })
+const props = withDefaults(defineProps<{
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  align?: 'start' | 'center' | 'end'
+  /** floating-vue's `skidding`: a shift along the trigger's own edge. */
+  alignOffset?: number
+  /**
+   * Refuses to open, rather than disabling the button. A disabled button takes
+   * no pointer events, and the one site that sets this still wants its tooltip.
+   */
+  disabled?: boolean
+  /**
+   * Rendered here rather than around the trigger at the call site, because
+   * where the tooltip sits relative to the anchor below decides whether this
+   * opens in the right place at all.
+   */
+  tooltip?: string | null | undefined
+}>(), {
+  side: 'bottom',
+  align: 'center',
+  alignOffset: 0,
+  disabled: false,
+  tooltip: undefined,
+})
+const open = ref(false)
+function setOpen(value: boolean) {
+  open.value = value && !props.disabled
+}
+// After mount, not during setup: the chrome's root is only in the document once
+// the tree it wraps has been inserted.
+const target = shallowRef<HTMLElement>()
+onMounted(() => {
+  target.value = portalTarget()
+})
+</script>
+<template>
+  <PopoverRoot
+    :open="open"
+    @update:open="setOpen"
+  >
+    <!-- The anchor is the wrapper, not the trigger, and it has to sit outside
+    the tooltip. A tooltip is a popper too, so a trigger rendered inside one
+    registers itself as *its* anchor, and the panel then has none: it opens at
+    the top-left corner, off-screen, which a test asking only whether it is
+    visible still passes. -->
+    <PopoverAnchor as-child>
+      <div
+        v-bind="$attrs"
+        class="poveste-dropdown-trigger"
+      >
+        <!-- No tooltip while the panel is up: it would sit on top of the first
+        row. -->
+        <HstTooltip :content="open ? null : tooltip">
+          <PopoverTrigger as-child>
+            <slot :open="open" />
+          </PopoverTrigger>
+        </HstTooltip>
+      </div>
+    </PopoverAnchor>
+    <PopoverPortal
+      v-if="target"
+      :to="target"
+    >
+      <PopoverContent
+        class="poveste-dropdown"
+        :side="side"
+        :align="align"
+        :side-offset="8"
+        :align-offset="alignOffset"
+        :collision-padding="4"
+      >
+        <slot
+          name="popper"
+          :close="() => setOpen(false)"
+        />
+      </PopoverContent>
+    </PopoverPortal>
+  </PopoverRoot>
+</template>
+<style lang="pcss">
+/* floating-vue put the same zero on its own wrapper, and the triggers that
+   wanted text to sit normally say `leading-normal` because of it. */
+.poveste-dropdown-trigger {
+  line-height: 0;
+}
+.poveste-dropdown {
+  background: #fff;
+  color: #000;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  box-shadow: 0 6px 30px rgb(0 0 0 / .1);
+  /* A row that paints to the panel's edge has to stop at the rounded corner,
+     which the `overflow-y: auto` on floating-vue's inner element did. */
+  overflow: hidden;
+  z-index: 100;
+  /*
+   * What Tailwind's `dark:` compiles to, spelled out because `@apply` in a
+   * single-file component needs a `@reference` and no component here has one.
+   * Not `.ptw-dark &`: the chrome CSS is wrapped in `@scope` and `.ptw-dark`
+   * sits on `<html>`, above the scope root, so a descendant rule keyed on it
+   * never matches and the panel falls back to the light colours (#101). This
+   * puts the condition on the subject instead, and adds no specificity — so it
+   * has to come after the light values to win.
+   */
+  &:where(.ptw-dark, .ptw-dark *) {
+    background: var(--color-gray-700);
+    border-color: var(--color-gray-850);
+    color: var(--color-gray-100);
+  }
+  &:focus-visible {
+    outline: none;
+  }
+  &[data-state='open'] {
+    transform-origin: var(--reka-popover-content-transform-origin);
+    animation: poveste-dropdown-open .15s cubic-bezier(0, 1, .5, 1);
+  }
+}
+@keyframes poveste-dropdown-open {
+  from {
+    opacity: 0;
+    transform: scale(.75);
+  }
+}
+</style>

package/src/app/components/base/BaseOverflowMenu.vue CHANGED Viewed

@@ -3,6 +3,7 @@ import type { SetupContext, VNode } from 'vue'
 import { Icon } from '@iconify/vue'
 import { useResizeObserver } from '@vueuse/core'
 import { computed, h, onBeforeUnmount, reactive, ref } from 'vue'
+import BaseDropdown from './BaseDropdown.vue'
 // Container
@@ -99,18 +100,22 @@ function ChildrenSlice(props: { start?: number, end?: number }, { slots }: Setup
       <slot />
     </ChildrenRender>
-    <VDropdown
+    <BaseDropdown
       v-if="visibleChildrenCount < children.size"
     >
-      <div
-        role="button"
+      <!-- A `<button>`, where this was a `role="button"` div with no `tabindex`:
+      the popover writes `aria-expanded` onto whatever it is given, and axe
+      rejects that on an element with no role it can name (#924). A keyboard
+      reaches the hidden tabs now, which it could not before. -->
+      <button
+        aria-label="More"
         class="cursor-pointer hover:bg-primary-50 dark:hover:bg-primary-900 w-8 h-full flex items-center justify-center absolute top-0 right-0"
       >
         <Icon
           icon="carbon:caret-down"
           class="w-4 h-4 opacity-50 group-hover:opacity-100"
         />
-      </div>
+      </button>
       <template #popper>
         <div class="flex flex-col items-stretch">
@@ -121,6 +126,6 @@ function ChildrenSlice(props: { start?: number, end?: number }, { slots }: Setup
           </ChildrenSlice>
         </div>
       </template>
-    </VDropdown>
+    </BaseDropdown>
   </div>
 </template>

package/src/app/components/base/BaseSelect.vue CHANGED Viewed

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import type { ComputedRef } from 'vue'
 import { Icon } from '@iconify/vue'
+import { PopoverAnchor, PopoverContent, PopoverPortal, PopoverRoot, portalTarget } from '@poveste/controls'
 import { refAutoReset } from '@vueuse/core'
-import { Dropdown as VDropdown } from 'floating-vue'
-import { computed, ref, useId } from 'vue'
+import { computed, nextTick, onMounted, ref, shallowRef, useId, watch } from 'vue'
 /*
  * The WAI-ARIA select-only combobox: the trigger keeps focus and names the active
@@ -156,76 +156,149 @@ function onKeydown(event: KeyboardEvent) {
   }
 }
+// After mount, not during setup: the chrome's root is only in the document once
+// the tree it wraps has been inserted.
+const target = shallowRef<HTMLElement>()
+onMounted(() => {
+  target.value = portalTarget()
+})
+/*
+ * Reka spares its own trigger from the dismiss it fires on any pointer or focus
+ * landing outside the popup — but only a `PopoverTrigger` registers as one, and
+ * this trigger cannot be that: `PopoverTrigger` writes its own `aria-expanded`,
+ * `aria-controls` and `aria-haspopup="dialog"` over the listbox wiring the
+ * combobox pattern is built on. So the dismiss is declined here instead.
+ *
+ * Without it the popup is impossible to close by clicking the picker: the
+ * dismiss lands on `pointerdown`, the handler below then reads `open` as false
+ * and opens it again, and the whole thing looks like a click that did nothing.
+ * Neither aria spec catches it — both drive this from the keyboard, on purpose.
+ */
+function keepOpenOnTheTrigger(event: Event) {
+  if (combobox.value?.contains(event.target as Node)) {
+    event.preventDefault()
+  }
+}
+/*
+ * A capped list scrolls, and `aria-activedescendant` moves an option the browser
+ * has no reason to reveal — the focus never leaves the trigger, so nothing
+ * scrolls on its own.
+ */
+watch([open, activeIndex], async ([isOpen, index]) => {
+  if (!isOpen || index < 0) {
+    return
+  }
+  await nextTick()
+  target.value?.ownerDocument.getElementById(optionId(index))?.scrollIntoView({ block: 'nearest' })
+})
 defineExpose({
   focus: () => combobox.value?.focus(),
 })
 </script>
 <template>
-  <!-- `no-auto-focus`: floating-vue otherwise moves focus into the popup once it
-       shows, and the combobox pattern keeps it on the trigger, which owns the keys. -->
-  <VDropdown
-    v-model:shown="open"
-    class="poveste-base-select"
-    :triggers="[]"
-    no-auto-focus
-    auto-size
-    auto-boundary-max-size
-  >
-    <div
-      ref="combobox"
-      role="combobox"
-      tabindex="0"
-      :aria-label="label"
-      aria-haspopup="listbox"
-      :aria-expanded="open"
-      :aria-controls="open ? listboxId : undefined"
-      :aria-activedescendant="open && activeIndex >= 0 ? optionId(activeIndex) : undefined"
-      class="cursor-pointer w-full outline-none focus-visible:border-primary-500 px-2 h-[27px] -my-1 border border-solid border-black/25 dark:border-white/25 hover:border-primary-500 dark:hover:border-primary-500 rounded-sm flex gap-2 items-center leading-normal"
-      @click="open ? close() : openList()"
-      @keydown="onKeydown"
+  <PopoverRoot v-model:open="open">
+    <PopoverAnchor
+      as-child
+      class="poveste-base-select"
     >
-      <div class="flex-1 truncate">
-        <slot :label="selectedLabel">
-          {{ selectedLabel }}
-        </slot>
-      </div>
-      <Icon
-        icon="carbon:chevron-sort"
-        class="w-4 h-4 flex-none ml-auto"
-      />
-    </div>
-    <template #popper>
       <div
-        :id="listboxId"
-        role="listbox"
+        ref="combobox"
+        role="combobox"
+        tabindex="0"
         :aria-label="label"
-        class="flex flex-col bg-gray-50 dark:bg-gray-700"
+        aria-haspopup="listbox"
+        :aria-expanded="open"
+        :aria-controls="open ? listboxId : undefined"
+        :aria-activedescendant="open && activeIndex >= 0 ? optionId(activeIndex) : undefined"
+        class="cursor-pointer w-full outline-none focus-visible:border-primary-500 px-2 h-[27px] -my-1 border border-solid border-black/25 dark:border-white/25 hover:border-primary-500 dark:hover:border-primary-500 rounded-sm flex gap-2 items-center leading-normal"
+        @click="open ? close() : openList()"
+        @keydown="onKeydown"
+      >
+        <div class="flex-1 truncate">
+          <slot :label="selectedLabel">
+            {{ selectedLabel }}
+          </slot>
+        </div>
+        <Icon
+          icon="carbon:chevron-sort"
+          class="w-4 h-4 flex-none ml-auto"
+        />
+      </div>
+    </PopoverAnchor>
+    <PopoverPortal
+      v-if="target"
+      :to="target"
+    >
+      <!-- The popup takes no focus at either end: the combobox pattern keeps it on
+           the trigger, which owns the keys. Deliberate rather than load-bearing
+           today — Reka moves focus into the content on open, and only skips it
+           here because the options are divs with nothing focusable in them. The
+           aria specs cannot fail on this, so removing it would look safe. -->
+      <PopoverContent
+        class="poveste-base-select-popper"
+        align="start"
+        :side-offset="6"
+        :collision-padding="8"
+        @open-auto-focus.prevent
+        @close-auto-focus.prevent
+        @interact-outside="keepOpenOnTheTrigger"
       >
         <div
-          v-for="([value, optionLabel], index) of entries"
-          :id="optionId(index)"
-          :key="value"
-          role="option"
-          :aria-selected="value === modelValue"
-          class="px-2 py-1 cursor-pointer hover:bg-primary-100 dark:hover:bg-primary-700"
-          :class="{
-            'bg-primary-200 dark:bg-primary-800': value === modelValue,
-            'outline outline-2 -outline-offset-2 outline-primary-500': index === activeIndex,
-          }"
-          @mousedown.prevent
-          @mousemove="activeIndex = index"
-          @click="choose(index)"
+          :id="listboxId"
+          role="listbox"
+          :aria-label="label"
+          class="poveste-base-select-options flex flex-col bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100"
         >
-          <slot
-            name="option"
-            :label="optionLabel"
-            :value="value"
+          <div
+            v-for="([value, optionLabel], index) of entries"
+            :id="optionId(index)"
+            :key="value"
+            role="option"
+            :aria-selected="value === modelValue"
+            class="px-2 py-1 cursor-pointer hover:bg-primary-100 dark:hover:bg-primary-700"
+            :class="{
+              'bg-primary-200 dark:bg-primary-800': value === modelValue,
+              'outline outline-2 -outline-offset-2 outline-primary-500': index === activeIndex,
+            }"
+            @mousedown.prevent
+            @mousemove="activeIndex = index"
+            @click="choose(index)"
           >
-            {{ optionLabel }}
-          </slot>
+            <slot
+              name="option"
+              :label="optionLabel"
+              :value="value"
+            >
+              {{ optionLabel }}
+            </slot>
+          </div>
         </div>
-      </div>
-    </template>
-  </VDropdown>
+      </PopoverContent>
+    </PopoverPortal>
+  </PopoverRoot>
 </template>
+<style lang="pcss">
+.poveste-base-select-popper {
+  /* The trigger's own width, which is what floating-vue's `auto-size` gave. */
+  min-width: var(--reka-popper-anchor-width);
+  z-index: 100;
+  &:focus-visible {
+    outline: none;
+  }
+}
+.poveste-base-select-options {
+  /* The room Reka measured between the trigger and the viewport edge, which is
+     what `auto-boundary-max-size` gave: a story with more presets than fit below
+     its picker otherwise drew them off the screen, reachable by nothing. */
+  max-height: var(--reka-popover-content-available-height);
+  overflow-y: auto;
+}
+</style>

package/src/app/components/base/BaseSplitPane.vue CHANGED Viewed

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, onUnmounted, ref, watch } from 'vue'
+import { computed, onUnmounted, ref, useId, watch } from 'vue'
 const props = defineProps({
   orientation: {
@@ -49,6 +49,17 @@ const props = defineProps({
     default: true,
   },
+  /**
+   * What the divider is called to a screen reader.
+   *
+   * Four are on screen at once and they resize different things, so a shared
+   * default would announce four identical separators.
+   */
+  label: {
+    type: String,
+    default: 'Resize panels',
+  },
   /**
    * Whether the first pane exists at all.
    *
@@ -225,6 +236,56 @@ watch(hasBothPanes, (both) => {
   }
 })
+/*
+ * The keyboard half, which the divider had none of: it was a `div` with a
+ * `mousedown` handler, so the layout could only be changed with a pointer and a
+ * screen reader was told nothing was there (#995).
+ *
+ * The arrow step is one unit of whatever `split` is measured in — percent
+ * normally, pixels under `fixed` — and `PageUp`/`PageDown` move by ten, because
+ * one pixel per press is not a usable way to move a pixel-sized pane.
+ */
+const STEP = 1
+const PAGE_STEP = 10
+function moveBy(amount: number) {
+  currentSplit.value = Math.min(props.max, Math.max(props.min, boundSplit.value + amount))
+}
+function onKeydown(event: KeyboardEvent) {
+  const back = props.orientation === 'landscape' ? 'ArrowLeft' : 'ArrowUp'
+  const forward = props.orientation === 'landscape' ? 'ArrowRight' : 'ArrowDown'
+  switch (event.key) {
+    case back:
+      moveBy(-STEP)
+      break
+    case forward:
+      moveBy(STEP)
+      break
+    case 'PageUp':
+      moveBy(-PAGE_STEP)
+      break
+    case 'PageDown':
+      moveBy(PAGE_STEP)
+      break
+    case 'Home':
+      currentSplit.value = props.min
+      break
+    case 'End':
+      currentSplit.value = props.max
+      break
+    default:
+      return
+  }
+  // Only for a key this handles: the arrows scroll the pane otherwise, and a
+  // blanket `prevent` would stop that everywhere the divider has focus.
+  event.preventDefault()
+}
+const firstPaneId = useId()
 function removeDragListeners() {
   window.removeEventListener('mousemove', dragMove)
   window.removeEventListener('mouseup', dragEnd)
@@ -248,6 +309,7 @@ onUnmounted(() => {
   >
     <div
       v-if="showFirst"
+      :id="firstPaneId"
       class="relative top-0 left-0 z-20"
       :class="{
         'pointer-events-none': dragging,
@@ -260,7 +322,15 @@ onUnmounted(() => {
       <div
         v-if="hasBothPanes"
-        class="dragger absolute z-100 hover:bg-primary-500/50 transition-colors duration-150 delay-150"
+        role="separator"
+        tabindex="0"
+        :aria-label="label"
+        :aria-orientation="orientation === 'landscape' ? 'vertical' : 'horizontal'"
+        :aria-controls="firstPaneId"
+        :aria-valuenow="Math.round(boundSplit)"
+        :aria-valuemin="min"
+        :aria-valuemax="max"
+        class="dragger absolute z-100 hover:bg-primary-500/50 focus-visible:bg-primary-500/50 focus-visible:outline-2 focus-visible:outline-primary-500 transition-colors duration-150 delay-150"
         :class="{
           'top-0 bottom-0 cursor-ew-resize': orientation === 'landscape',
           'left-0 right-0 cursor-ns-resize': orientation === 'portrait',
@@ -268,6 +338,7 @@ onUnmounted(() => {
           'bg-primary-500/25': dragging,
         }"
         @mousedown.prevent="dragStart"
+        @keydown="onKeydown"
       />
     </div>
     <div

package/src/app/components/panel/ControlsComponentPropItem.vue CHANGED Viewed

@@ -2,7 +2,7 @@
 import type { AutoPropComponentDefinition, PropDefinition } from '@poveste/shared'
 import type { Variant } from '../../types'
 import { Icon } from '@iconify/vue'
-import { HstCheckbox, HstJson, HstNumber, HstText } from '@poveste/controls'
+import { HstCheckbox, HstJson, HstNumber, HstText, HstTooltip } from '@poveste/controls'
 import { computed } from 'vue'
 const props = defineProps<{
@@ -64,21 +64,22 @@ const canReset = computed(() => props.variant.state?._hPropState?.[props.compone
       class="poveste-controls-component-prop-item grow min-w-0"
       :title="`${definition.name}${canReset ? ' *' : ''}`"
     />
-    <button
-      v-tooltip="'Remove override'"
-      type="button"
-      :aria-label="`Remove override of ${definition.name}`"
-      :disabled="!canReset"
-      class="flex-none flex mr-2 mb-[10px] p-0 bg-transparent border-0 cursor-pointer text-gray-900 dark:text-gray-100 hover:text-primary-500 dark:hover:text-primary-400"
-      :class="[
-        canReset ? 'opacity-50 hover:opacity-100 focus-visible:opacity-100' : 'opacity-25 pointer-events-none',
-      ]"
-      @click="reset()"
-    >
-      <Icon
-        icon="carbon:erase"
-        class="w-4 h-4"
-      />
-    </button>
+    <HstTooltip content="Remove override">
+      <button
+        type="button"
+        :aria-label="`Remove override of ${definition.name}`"
+        :disabled="!canReset"
+        class="flex-none flex mr-2 mb-[10px] p-0 bg-transparent border-0 cursor-pointer text-gray-900 dark:text-gray-100 hover:text-primary-500 dark:hover:text-primary-400"
+        :class="[
+          canReset ? 'opacity-50 hover:opacity-100 focus-visible:opacity-100' : 'opacity-25 pointer-events-none',
+        ]"
+        @click="reset()"
+      >
+        <Icon
+          icon="carbon:erase"
+          class="w-4 h-4"
+        />
+      </button>
+    </HstTooltip>
   </div>
 </template>

package/src/app/components/panel/ControlsComponentProps.vue CHANGED Viewed

@@ -2,6 +2,7 @@
 import type { AutoPropComponentDefinition } from '@poveste/shared'
 import type { Variant } from '../../types'
 import { Icon } from '@iconify/vue'
+import { HstTooltip } from '@poveste/controls'
 import ControlsComponentPropItem from './ControlsComponentPropItem.vue'
 defineProps<{
@@ -13,11 +14,12 @@ defineProps<{
 <template>
   <div class="poveste-controls-component-props">
     <div class="font-mono p-2 flex items-center gap-1">
-      <Icon
-        v-tooltip="'Auto-detected props'"
-        icon="carbon:flash"
-        class="w-4 h-4 text-primary-500 flex-none"
-      />
+      <HstTooltip content="Auto-detected props">
+        <Icon
+          icon="carbon:flash"
+          class="w-4 h-4 text-primary-500 flex-none"
+        />
+      </HstTooltip>
       <div>
         <span class="opacity-30">&lt;</span>{{ definition.name }}<span class="opacity-30">&gt;</span>
       </div>

package/src/app/components/panel/ControlsComponentState.vue CHANGED Viewed

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Variant } from '@poveste/shared'
 import { Icon } from '@iconify/vue'
+import { HstTooltip } from '@poveste/controls'
 import { computed } from 'vue'
 import ControlsComponentStateItem from './ControlsComponentStateItem.vue'
@@ -15,11 +16,12 @@ const stateKeys = computed(() => Object.keys(props.variant.state || {})
 <template>
   <div class="poveste-controls-component-init-state">
     <div class="p-2 flex items-center gap-1">
-      <Icon
-        v-tooltip="'Auto-detected state'"
-        icon="carbon:data-vis-1"
-        class="w-4 h-4 text-primary-500 flex-none"
-      />
+      <HstTooltip content="Auto-detected state">
+        <Icon
+          icon="carbon:data-vis-1"
+          class="w-4 h-4 text-primary-500 flex-none"
+        />
+      </HstTooltip>
       <div>
         State
       </div>