@poveste/app 0.13.1 → 0.15.0

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

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import type { SetupContext, VNode } from 'vue'
 import { Icon } from '@iconify/vue'
 import { useResizeObserver } from '@vueuse/core'
 import { computed, h, onBeforeUnmount, reactive, ref } from 'vue'
@@ -11,9 +12,9 @@ const el = ref<HTMLDivElement>()
 
 const availableWidth = ref(0)
 
-useResizeObserver(el, (entries) => {
-  const containerWidth = entries[0].contentRect.width
-  availableWidth.value = containerWidth - overflowButtonWidth
+useResizeObserver(el, ([entry]) => {
+  if (!entry) return
+  availableWidth.value = entry.contentRect.width - overflowButtonWidth
 })
 
 // Children
@@ -28,8 +29,8 @@ const children = ref(new Map<HTMLElement, ChildState>())
 const visibleChildrenCount = computed(() => {
   let width = 0
   const c = [...children.value.values()].sort((a, b) => a.index - b.index)
-  for (let i = 0; i < c.length; i++) {
-    width += c[i].width
+  for (const [i, child] of c.entries()) {
+    width += child.width
     if (width > availableWidth.value) {
       return i
     }
@@ -43,43 +44,49 @@ const visibleChildrenCount = computed(() => {
 const ChildWrapper = {
   name: 'ChildWrapper',
   props: ['index'],
-  setup(props, { slots }) {
+  setup(props: { index: number }, { slots }: SetupContext) {
     const el = ref<HTMLDivElement>()
 
     const state = reactive({ width: 0, index: props.index })
 
-    useResizeObserver(el, (entries) => {
-      const width = entries[0].contentRect.width
-      if (!children.value.has(el.value)) {
-        children.value.set(el.value, state)
+    useResizeObserver(el, ([entry]) => {
+      // The observer only fires for an element it is observing, so this is
+      // never null here — but `children` is keyed by the element, and an
+      // undefined key would silently make a second entry for the same child.
+      const element = el.value
+      if (!element || !entry) return
+      const width = entry.contentRect.width
+      if (!children.value.has(element)) {
+        children.value.set(element, state)
       }
       state.width = width
     })
 
     onBeforeUnmount(() => {
-      children.value.delete(el.value)
+      const element = el.value
+      if (element) children.value.delete(element)
     })
 
     const visible = computed(() => visibleChildrenCount.value > state.index)
 
-    return () => h('div', { ref: el, style: { visibility: visible.value ? 'visible' : 'hidden' } }, slots.default())
+    return () => h('div', { ref: el, style: { visibility: visible.value ? 'visible' : 'hidden' } }, slots['default']?.())
   },
 }
 
 /**
  * Wraps each child with a <ChildWrapper>
  */
-function ChildrenRender(props, { slots }) {
-  const [fragment] = slots.default()
-  return fragment.children.map((vnode, index) => h(ChildWrapper, { index }, () => [vnode]))
+function ChildrenRender(_props: unknown, { slots }: SetupContext) {
+  const children = slots['default']?.()[0]?.children
+  return Array.isArray(children) ? children.map((vnode, index) => h(ChildWrapper, { index }, () => [vnode])) : []
 }
 
 /**
  * Only renders a part of a children list
  */
-function ChildrenSlice(props, { slots }) {
-  const [fragment] = slots.default()
-  return fragment.children.slice(props.start, props.end)
+function ChildrenSlice(props: { start?: number, end?: number }, { slots }: SetupContext) {
+  const children = slots['default']?.()[0]?.children
+  return Array.isArray(children) ? children.slice(props.start, props.end) as VNode[] : []
 }
 </script>
 

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

@@ -1,12 +1,22 @@
 <script lang="ts" setup>
 import type { ComputedRef } from 'vue'
 import { Icon } from '@iconify/vue'
+import { refAutoReset } from '@vueuse/core'
 import { Dropdown as VDropdown } from 'floating-vue'
-import { computed } from 'vue'
+import { computed, ref, useId } from 'vue'
+
+/*
+ * The WAI-ARIA select-only combobox: the trigger keeps focus and names the active
+ * option through `aria-activedescendant`, so the popup needs no focus of its own.
+ * It was a click-only `<div>` with `<div>` options, which a keyboard could not open
+ * and a screen reader did not list (#828).
+ */
 
 const props = defineProps<{
   modelValue: string
   options: Record<string, string> | Array<string>
+  /** The accessible name of the picker and its list. */
+  label: string
 }>()
 
 const emit = defineEmits<{
@@ -21,23 +31,159 @@ const formattedOptions: ComputedRef<Record<string, string>> = computed(() => {
   return props.options
 })
 
+const entries = computed(() => Object.entries(formattedOptions.value))
+
 const selectedLabel = computed(() => formattedOptions.value[props.modelValue])
 
-function selectValue(value: string, hide: () => void) {
-  emit('update:modelValue', value)
-  emit('select', value)
-  hide()
+const id = useId()
+const listboxId = `${id}-listbox`
+function optionId(index: number) {
+  return `${id}-option-${index}`
+}
+
+const combobox = ref<HTMLElement>()
+const open = ref(false)
+const activeIndex = ref(-1)
+
+function openList(index?: number) {
+  const selected = entries.value.findIndex(([value]) => value === props.modelValue)
+  activeIndex.value = index ?? Math.max(selected, 0)
+  open.value = true
+}
+
+/*
+ * Type-to-select, as the pattern recommends: typed characters within half a second
+ * form one search, and repeating a single character steps through the options
+ * that start with it.
+ */
+const typed = refAutoReset('', 500)
+
+function isTypeaheadKey(event: KeyboardEvent) {
+  if (event.ctrlKey || event.metaKey || event.altKey || event.key.length !== 1) {
+    return false
+  }
+  // Space chooses, unless it continues a search already under way.
+  return event.key !== ' ' || typed.value !== ''
+}
+
+function typeahead(char: string) {
+  const previous = typed.value
+  typed.value = previous + char.toLowerCase()
+  const repeated = [...typed.value].every(c => c === typed.value[0])
+  const search = repeated ? typed.value.charAt(0) : typed.value
+  // A new or repeated character looks past the active option; a longer search may
+  // still match it.
+  const start = repeated ? activeIndex.value + 1 : Math.max(activeIndex.value, 0)
+  const count = entries.value.length
+  for (let offset = 0; offset < count; offset++) {
+    const index = (start + offset) % count
+    if (entries.value[index]?.[1].toLowerCase().startsWith(search)) {
+      activeIndex.value = index
+      return
+    }
+  }
+}
+
+function close() {
+  open.value = false
 }
+
+function choose(index: number) {
+  const entry = entries.value[index]
+  if (entry) {
+    emit('update:modelValue', entry[0])
+    emit('select', entry[0])
+  }
+  close()
+  combobox.value?.focus()
+}
+
+function onKeydown(event: KeyboardEvent) {
+  const last = entries.value.length - 1
+
+  if (isTypeaheadKey(event)) {
+    event.preventDefault()
+    if (!open.value) {
+      openList()
+    }
+    typeahead(event.key)
+    return
+  }
+
+  if (!open.value) {
+    if (['ArrowDown', 'ArrowUp', 'Enter', ' ', 'Home', 'End'].includes(event.key)) {
+      event.preventDefault()
+      openList(event.key === 'Home' ? 0 : event.key === 'End' ? last : undefined)
+    }
+    return
+  }
+
+  switch (event.key) {
+    case 'ArrowDown':
+      event.preventDefault()
+      activeIndex.value = Math.min(activeIndex.value + 1, last)
+      break
+    case 'ArrowUp':
+      event.preventDefault()
+      if (event.altKey) {
+        choose(activeIndex.value)
+      }
+      else {
+        activeIndex.value = Math.max(activeIndex.value - 1, 0)
+      }
+      break
+    case 'Home':
+      event.preventDefault()
+      activeIndex.value = 0
+      break
+    case 'End':
+      event.preventDefault()
+      activeIndex.value = last
+      break
+    case 'Enter':
+    case ' ':
+      event.preventDefault()
+      choose(activeIndex.value)
+      break
+    case 'Escape':
+      event.preventDefault()
+      close()
+      break
+    case 'Tab':
+      // Keeps the default: focus moves on, with the active option chosen.
+      choose(activeIndex.value)
+      break
+  }
+}
+
+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
-      class="cursor-pointer w-full outline-none 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"
+      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"
     >
       <div class="flex-1 truncate">
         <slot :label="selectedLabel">
@@ -49,24 +195,34 @@ function selectValue(value: string, hide: () => void) {
         class="w-4 h-4 flex-none ml-auto"
       />
     </div>
-    <template #popper="{ hide }">
-      <div class="flex flex-col bg-gray-50 dark:bg-gray-700">
+    <template #popper>
+      <div
+        :id="listboxId"
+        role="listbox"
+        :aria-label="label"
+        class="flex flex-col bg-gray-50 dark:bg-gray-700"
+      >
         <div
-          v-for="(label, value) in formattedOptions"
-          v-bind="{ ...$attrs, class: null, style: null }"
-          :key="label"
+          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': props.modelValue === value,
+            'bg-primary-200 dark:bg-primary-800': value === modelValue,
+            'outline outline-2 -outline-offset-2 outline-primary-500': index === activeIndex,
           }"
-          @click="selectValue(value, hide)"
+          @mousedown.prevent
+          @mousemove="activeIndex = index"
+          @click="choose(index)"
         >
           <slot
             name="option"
-            :label="label"
+            :label="optionLabel"
             :value="value"
           >
-            {{ label }}
+            {{ optionLabel }}
           </slot>
         </div>
       </div>

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

@@ -168,15 +168,15 @@ const rightStyle = computed(() => {
   if (!hasBothPanes.value) {
     return { [axis.value]: '100%' }
   }
-  return { [axis.value]: props.fixed ? null : `${100 - boundSplit.value}%` }
+  return { [axis.value]: props.fixed ? undefined : `${100 - boundSplit.value}%` }
 })
 
 const dragging = ref(false)
 let startPosition = 0
 let startSplit = 0
-const el = ref(null)
+const el = ref<HTMLElement>()
 
-function dragStart(e) {
+function dragStart(e: MouseEvent) {
   dragging.value = true
   startPosition = props.orientation === 'landscape' ? e.pageX : e.pageY
   startSplit = boundSplit.value
@@ -184,17 +184,22 @@ function dragStart(e) {
   window.addEventListener('mouseup', dragEnd)
 }
 
-function dragMove(e) {
+function dragMove(e: MouseEvent) {
   if (dragging.value) {
+    // The move listener is on `window`, so it can outlive the element for the
+    // rest of a drag if the pane unmounts under it.
+    const pane = el.value
+    if (!pane) return
+
     let position
     let totalSize
     if (props.orientation === 'landscape') {
       position = e.pageX
-      totalSize = el.value.offsetWidth
+      totalSize = pane.offsetWidth
     }
     else {
       position = e.pageY
-      totalSize = el.value.offsetHeight
+      totalSize = pane.offsetHeight
     }
     const dPosition = position - startPosition
     if (props.fixed) {

package/src/app/components/command/CommandPrompts.vue

@@ -24,7 +24,7 @@ const promptTypes = {
 const answers = reactive<Record<string, any>>({})
 
 // Initial default values
-for (const prompt of props.command.prompts) {
+for (const prompt of props.command.prompts ?? []) {
   let defaultValue
   if (typeof prompt.defaultValue === 'function') {
     defaultValue = prompt.defaultValue(answers)

package/src/app/components/command/CommandPromptsModal.vue

@@ -33,6 +33,7 @@ const commandStore = useCommandStore()
     />
     <div class="bg-white dark:bg-gray-900 md:mt-16 md:mx-auto w-screen max-w-[512px] max-h-[80vh] overflow-y-auto scroll-smooth shadow-xl border border-gray-200 dark:border-gray-750 rounded-lg relative divide-y divide-gray-200 dark:divide-gray-850">
       <CommandPrompts
+        v-if="commandStore.selectedCommand"
         :command="commandStore.selectedCommand"
         @close="close()"
       />

package/src/app/components/command/PromptSelect.vue

@@ -16,8 +16,9 @@ const emit = defineEmits<{
   (e: 'next'): void
 }>()
 
+// Optional coming in, required going out, so the empty case settles here.
 const model = computed({
-  get: () => props.modelValue,
+  get: () => props.modelValue ?? '',
   set: (value) => {
     emit('update:modelValue', value)
     emit('next')
@@ -76,7 +77,7 @@ const {
 } = useSelection(formattedOptions)
 
 function selectIndex(index: number) {
-  const result = formattedOptions.value[index].value
+  const result = formattedOptions.value[index]?.value
   if (result) {
     model.value = result
   }

package/src/app/components/command/PromptText.vue

@@ -9,11 +9,15 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: string): void
+  (e: 'update:modelValue', value: string | undefined): void
 }>()
 
-const model = computed({
-  get: () => props.modelValue,
+// The input needs a string to bind to, so the getter fills in `''` — but an
+// absent answer has to leave as absent. `''` is falsy and *not* nullish, so
+// coercing on the way out would stop a command's `answers.x ?? fallback` from
+// firing, which is the trap #440 was about one file over.
+const model = computed<string | undefined>({
+  get: () => props.modelValue ?? '',
   set: value => emit('update:modelValue', value),
 })
 

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

@@ -50,24 +50,35 @@ const canReset = computed(() => props.variant.state?._hPropState?.[props.compone
 </script>
 
 <template>
-  <component
-    :is="comp"
+  <!-- The remove action is beside the control, not in its actions slot. Inside
+       the control's <label> or checkbox, a label forwarded clicks to it, its
+       name joined the control's name, and Space on it toggled the checkbox (#827). -->
+  <div
     v-if="comp"
-    v-model="model"
-    :placeholder="model === undefined ? definition?.default : null"
-    class="poveste-controls-component-prop-item"
-    :title="`${definition.name}${canReset ? ' *' : ''}`"
+    class="flex items-end hover:bg-primary-100 dark:hover:bg-primary-800"
   >
-    <template #actions>
+    <component
+      :is="comp"
+      v-model="model"
+      :placeholder="model === undefined ? definition?.default : null"
+      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
-        v-tooltip="'Remove override'"
         icon="carbon:erase"
-        class="cursor-pointer w-4 h-4 hover:text-primary-500 dark:hover:text-primary-400 text-gray-900 dark:text-gray-100"
-        :class="[
-          canReset ? 'opacity-50 hover:opacity-100' : 'opacity-25 pointer-events-none',
-        ]"
-        @click.stop="reset()"
+        class="w-4 h-4"
       />
-    </template>
-  </component>
+    </button>
+  </div>
 </template>

package/src/app/components/panel/PaneTabs.vue

@@ -25,13 +25,13 @@ const hasEvents = computed(() => eventsStore.events.length)
   <BaseOverflowMenu class="poveste-pane-tabs h-10 flex-none border-b border-gray-100 dark:border-gray-750">
     <BaseTab
       :to="{ ...$route, query: { ...$route.query, tab: '' } }"
-      :matched="!$route.query.tab"
+      :matched="!$route.query['tab']"
     >
       Controls
     </BaseTab>
     <BaseTab
       :to="{ ...$route, query: { ...$route.query, tab: 'docs' } }"
-      :matched="$route.query.tab === 'docs'"
+      :matched="$route.query['tab'] === 'docs'"
       :class="{
         'opacity-70': !renderedDoc,
       }"
@@ -40,7 +40,7 @@ const hasEvents = computed(() => eventsStore.events.length)
     </BaseTab>
     <BaseTab
       :to="{ ...$route, query: { ...$route.query, tab: 'events' } }"
-      :matched="$route.query.tab === 'events'"
+      :matched="$route.query['tab'] === 'events'"
       :class="{
         'opacity-70': !hasEvents,
       }"
@@ -54,13 +54,13 @@ const hasEvents = computed(() => eventsStore.events.length)
     <template #overflow>
       <BaseOverflowTab
         :to="{ ...$route, query: { ...$route.query, tab: '' } }"
-        :matched="!$route.query.tab"
+        :matched="!$route.query['tab']"
       >
         Controls
       </BaseOverflowTab>
       <BaseOverflowTab
         :to="{ ...$route, query: { ...$route.query, tab: 'docs' } }"
-        :matched="$route.query.tab === 'docs'"
+        :matched="$route.query['tab'] === 'docs'"
         :class="{
           'opacity-70': !renderedDoc,
         }"
@@ -69,7 +69,7 @@ const hasEvents = computed(() => eventsStore.events.length)
       </BaseOverflowTab>
       <BaseOverflowTab
         :to="{ ...$route, query: { ...$route.query, tab: 'events' } }"
-        :matched="$route.query.tab === 'events'"
+        :matched="$route.query['tab'] === 'events'"
         :class="{
           'opacity-70': !hasEvents,
         }"