@pgcorp/ui-kit 0.10.0 → 0.10.1

package/src/components/shared/_internal/SHeaderSurface.vue

@@ -1,80 +0,0 @@
-<template>
-  <header
-    :class="kind === 'page' ? 's-page-header' : 's-section-header'"
-    :data-kind="kind"
-    :data-actions-layout="kind === 'page' ? trailingLayout : undefined"
-    :data-trailing-layout="kind === 'section' ? trailingLayout : undefined"
-    :data-appearance="kind === 'page' ? appearance : undefined"
-    :data-size="size"
-    :data-variant="kind === 'section' ? variant : undefined"
-    :data-divider="kind === 'section' && divider ? 'true' : undefined"
-    :data-padding="kind === 'section' ? padding : undefined"
-    :data-spacing-after="kind === 'section' ? spacingAfter : undefined"
-  >
-    <div :class="kind === 'page' ? 's-page-header__copy' : 's-section-header__copy'">
-      <div
-        v-if="eyebrow"
-        :class="kind === 'page' ? 's-page-header__eyebrow' : 's-section-header__eyebrow'"
-      >{{ eyebrow }}</div>
-      <component
-        :is="`h${headingLevel}`"
-        :class="kind === 'page' ? 's-page-header__title' : 's-section-header__title'"
-        :data-presentation="titlePresentation"
-      >{{ title }}</component>
-      <p
-        v-if="description"
-        :class="kind === 'page' ? 's-page-header__description' : 's-section-header__description'"
-      >{{ description }}</p>
-      <p v-if="kind === 'section' && meta" class="s-section-header__meta">{{ meta }}</p>
-    </div>
-
-    <div v-if="hasTrailing" :class="kind === 'page' ? 's-page-header__actions' : 's-section-header__trailing'">
-      <template v-if="kind === 'page'">
-        <slot name="actions" />
-      </template>
-      <template v-else>
-        <div v-if="$slots.badges" class="s-section-header__badges"><slot name="badges" /></div>
-        <div v-if="$slots.actions" class="s-section-header__actions"><slot name="actions" /></div>
-      </template>
-    </div>
-  </header>
-</template>
-
-<script setup lang="ts">
-import { computed, useSlots } from 'vue'
-
-export interface Props {
-  kind: 'page' | 'section'
-  title: string
-  eyebrow?: string | null
-  description?: string | null
-  meta?: string | null
-  headingLevel: 1 | 2 | 3 | 4
-  titlePresentation?: 'visible' | 'assistive'
-  appearance?: 'bare' | 'plain' | 'panel'
-  size: 'compact' | 'default' | 'sm' | 'md'
-  variant?: 'default' | 'display'
-  divider?: boolean
-  padding?: 'none' | 'sm' | 'md'
-  spacingAfter?: 'none' | 'sm' | 'md'
-  trailingLayout: 'responsive' | 'inline' | 'stacked'
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  eyebrow: undefined,
-  description: undefined,
-  meta: undefined,
-  titlePresentation: 'visible',
-  appearance: 'panel',
-  variant: 'default',
-  divider: false,
-  padding: 'none',
-  spacingAfter: 'none',
-})
-const slots = useSlots()
-const hasTrailing = computed(() => props.kind === 'page'
-  ? Boolean(slots.actions)
-  : Boolean(slots.badges || slots.actions))
-</script>
-
-<style lang="postcss" src="./SHeaderSurface.css" scoped></style>

package/src/components/shared/_internal/SListboxGroup.vue

@@ -1,24 +0,0 @@
-<template>
-  <li class="s-listbox-group" :data-variant="variant" role="group" :aria-labelledby="labelId">
-    <span :id="labelId" class="s-listbox-group__label">
-      {{ label }}
-    </span>
-    <ul class="s-listbox-group__options" role="presentation">
-      <slot />
-    </ul>
-  </li>
-</template>
-
-<script setup lang="ts">
-export interface Props {
-  label: string
-  labelId: string
-  variant?: 'select' | 'color'
-}
-
-withDefaults(defineProps<Props>(), {
-  variant: 'select',
-})
-</script>
-
-<style lang="postcss" src="./SListboxGroup.css" scoped></style>

package/src/components/shared/_internal/SMenuItem.vue

@@ -1,213 +0,0 @@
-<template>
-  <component
-    :is="destinationComponent"
-    v-if="entry.kind === 'destination' && !entry.disabled"
-    v-bind="destinationBindings"
-    class="s-menu-item"
-    role="menuitem"
-    :data-layout="entry.layout ?? 'row'"
-    :data-density="context.density.value"
-    :data-menu-entry-id="entry.id"
-    :data-current="entry.current || undefined"
-    tabindex="-1"
-    :aria-current="entry.current ? 'page' : undefined"
-    @click="handleDestinationClick"
-    @pointermove="emit('pointer-intent')"
-    @vue:mounted="bindInteractiveVNode"
-    @vue:updated="bindInteractiveVNode"
-    @vue:before-unmount="unbindInteractiveElement"
-  >
-    <span class="s-menu-item__main">
-      <span class="s-menu-item__state" />
-      <component :is="entry.icon" v-if="entry.icon" class="s-menu-item__icon" aria-hidden="true" />
-      <span class="s-menu-item__label">{{ entry.label }}</span>
-    </span>
-    <span v-if="entry.badge !== undefined || entry.shortcut" class="s-menu-item__meta">
-      <span v-if="entry.badge !== undefined" class="s-menu-item__badge">
-        <SBadge :severity="entry.badgeSeverity ?? 'secondary'" size="xs">{{ entry.badge }}</SBadge>
-      </span>
-      <span v-if="entry.shortcut" class="s-menu-item__shortcut" aria-hidden="true">{{ entry.shortcut }}</span>
-    </span>
-  </component>
-  <button
-    v-else
-    class="s-menu-item"
-    type="button"
-    :role="itemRole"
-    :data-layout="entry.layout ?? 'row'"
-    :data-density="context.density.value"
-    :data-menu-entry-id="entry.id"
-    :data-current="isCurrent || undefined"
-    tabindex="-1"
-    :aria-disabled="entry.disabled || undefined"
-    :aria-current="isCurrent ? 'page' : undefined"
-    :aria-checked="checkedState"
-    :aria-haspopup="entry.kind === 'submenu' ? 'menu' : undefined"
-    :aria-expanded="entry.kind === 'submenu' ? submenuOpen : undefined"
-    @click="handleSelect"
-    @pointermove="emit('pointer-intent')"
-    @vue:mounted="bindInteractiveVNode"
-    @vue:updated="bindInteractiveVNode"
-    @vue:before-unmount="unbindInteractiveElement"
-  >
-    <span class="s-menu-item__main">
-      <span class="s-menu-item__state">
-        <Check
-          v-if="entry.kind === 'checkbox' && entry.checked !== false"
-          class="s-menu-item__state-icon"
-          aria-hidden="true"
-        />
-        <span
-          v-else-if="entry.kind === 'radio' && entry.checked"
-          class="s-menu-item__radio-dot"
-          aria-hidden="true"
-        />
-      </span>
-      <component :is="entry.icon" v-if="entry.icon" class="s-menu-item__icon" aria-hidden="true" />
-      <span class="s-menu-item__label">{{ entry.label }}</span>
-    </span>
-    <span v-if="entry.badge !== undefined || entry.shortcut || entry.kind === 'submenu'" class="s-menu-item__meta">
-      <span v-if="entry.badge !== undefined" class="s-menu-item__badge">
-        <SBadge :severity="entry.badgeSeverity ?? 'secondary'" size="xs">{{ entry.badge }}</SBadge>
-      </span>
-      <span v-if="entry.shortcut" class="s-menu-item__shortcut" aria-hidden="true">{{ entry.shortcut }}</span>
-      <ChevronRight v-if="entry.kind === 'submenu'" class="s-menu-item__submenu-icon" aria-hidden="true" />
-    </span>
-  </button>
-</template>
-
-<script setup lang="ts">
-import { computed, inject, ref, type VNode } from 'vue'
-import { RouterLink } from 'vue-router'
-import { resolveLinkTarget } from '../../../internal/linkTarget'
-import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
-import { Check, ChevronRight } from '../../icons/sputnigUiIcons'
-import type { SMenuActivationEvent, SMenuInteractiveEntry } from '../controls/menu'
-import SBadge from '../data-display/SBadge.vue'
-import { menuContextKey } from './menuContext'
-
-defineOptions({ inheritAttrs: false })
-
-const maybeContext = inject(menuContextKey)
-if (!maybeContext) throw new Error('SMenuItem must be used inside SMenuSurface')
-const context = maybeContext
-
-export interface Props {
-  entry: SMenuInteractiveEntry
-  submenuOpen?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), { submenuOpen: false })
-const emit = defineEmits<{
-  select: [event: SMenuActivationEvent]
-  'open-submenu': []
-  'pointer-intent': []
-}>()
-const interactiveElement = ref<HTMLElement | null>(null)
-useInteractiveLeafRegistration({ owner: 'SMenuItem' })
-let unregister: (() => void) | undefined
-let suppressNextDestinationSelection = false
-
-const destinationTarget = computed(() => props.entry.kind === 'destination'
-  ? resolveLinkTarget({
-      href: props.entry.href,
-      to: props.entry.to,
-      target: props.entry.target ?? '_self',
-      rel: props.entry.rel,
-      owner: `SMenuItem(${props.entry.id})`,
-    })
-  : null)
-const destinationComponent = computed(() => destinationTarget.value?.kind === 'router' ? RouterLink : 'a')
-const destinationBindings = computed(() => destinationTarget.value?.bindings ?? {})
-const itemRole = computed(() => props.entry.kind === 'checkbox'
-  ? 'menuitemcheckbox'
-  : props.entry.kind === 'radio' ? 'menuitemradio' : 'menuitem')
-const checkedState = computed(() => props.entry.kind === 'checkbox' || props.entry.kind === 'radio'
-  ? props.entry.checked
-  : undefined)
-const isCurrent = computed(() => (
-  props.entry.kind === 'action' || props.entry.kind === 'destination'
-) && Boolean(props.entry.current && !props.entry.disabled))
-
-function requireInteractiveElement(): HTMLElement {
-  const element = interactiveElement.value
-  if (!element) throw new Error('SMenuItem: interactive element is unavailable')
-  return element
-}
-
-function bindInteractiveVNode(vnode: VNode): void {
-  if (!(vnode.el instanceof HTMLElement)) {
-    throw new Error('SMenuItem: interactive component must render one HTMLElement root')
-  }
-  if (interactiveElement.value === vnode.el) return
-  unregister?.()
-  interactiveElement.value = vnode.el
-  unregister = context.register({
-    entryId: props.entry.id,
-    label: () => props.entry.label,
-    hasSubmenu: () => props.entry.kind === 'submenu',
-    element: requireInteractiveElement,
-    setTabStop: (active) => { requireInteractiveElement().tabIndex = active ? 0 : -1 },
-    focus: () => requireInteractiveElement().focus(),
-    isFocused: () => document.activeElement === interactiveElement.value,
-    ownsEventTarget: (target) => target instanceof Node && (
-      target === interactiveElement.value || requireInteractiveElement().contains(target)
-    ),
-    activate: activateFromKeyboard,
-  })
-}
-
-function unbindInteractiveElement(): void {
-  unregister?.()
-  unregister = undefined
-  interactiveElement.value = null
-}
-
-function handleSelect(event: MouseEvent): void {
-  if (props.entry.disabled) {
-    event.preventDefault()
-    event.stopPropagation()
-    return
-  }
-  if (props.entry.kind === 'submenu') {
-    emit('open-submenu')
-    return
-  }
-  emit('select', event)
-}
-
-function handleDestinationClick(event: MouseEvent): void {
-  if (suppressNextDestinationSelection && event.detail === 0) {
-    return
-  }
-  suppressNextDestinationSelection = false
-  emit('select', event)
-}
-
-function activateFromKeyboard(event: KeyboardEvent): void {
-  if (props.entry.disabled) return
-  if (props.entry.kind === 'submenu') {
-    event.preventDefault()
-    emit('open-submenu')
-    return
-  }
-  if (props.entry.kind === 'destination') {
-    emit('select', event)
-    const navigationPrevented = event.defaultPrevented
-    event.preventDefault()
-    if (!navigationPrevented) {
-      suppressNextDestinationSelection = true
-      try {
-        requireInteractiveElement().click()
-      } finally {
-        suppressNextDestinationSelection = false
-      }
-    }
-    return
-  }
-  event.preventDefault()
-  emit('select', event)
-}
-</script>
-
-<style lang="postcss" src="./SMenuItem.css" scoped></style>

package/src/components/shared/_internal/SMenuLayer.vue

@@ -1,48 +0,0 @@
-<template>
-  <div
-    ref="layerRef"
-    class="s-menu-layer"
-    :class="[
-      `s-menu-layer--${kind}`,
-      kind === 'context' ? 's-context-menu' : kind === 'dropdown' ? 's-dropdown-menu-items' : 's-submenu-items',
-    ]"
-    :data-kind="kind"
-    role="region"
-    :aria-label="landmarkLabel"
-    :style="layerStyle"
-  >
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-import type { ElementApi } from '../../../internal/interactiveElement'
-
-export type SMenuLayerApi = ElementApi<HTMLDivElement>
-
-interface Props {
-  kind: 'dropdown' | 'context' | 'submenu'
-  landmarkLabel: string
-  position: { left: number; top: number }
-  zIndex: string
-}
-
-const props = defineProps<Props>()
-const layerRef = ref<HTMLDivElement | null>(null)
-const layerStyle = computed(() => ({
-  left: `${props.position.left}px`,
-  top: `${props.position.top}px`,
-  zIndex: props.zIndex,
-}))
-
-const getElement = (): HTMLDivElement => {
-  const element = layerRef.value
-  if (!element) throw new Error('SMenuLayer: layer element is unavailable')
-  return element
-}
-
-defineExpose<SMenuLayerApi>({ getElement })
-</script>
-
-<style lang="postcss" src="./SMenuLayer.css" scoped></style>

package/src/components/shared/_internal/SMenuSeparator.vue

@@ -1,13 +0,0 @@
-<template>
-  <div class="s-menu-separator" role="separator" :data-menu-entry-id="entryId" />
-</template>
-
-<script setup lang="ts">
-defineOptions({ inheritAttrs: false })
-
-defineProps<{
-  entryId: string
-}>()
-</script>
-
-<style lang="postcss" src="./SMenuSeparator.css" scoped></style>

package/src/components/shared/_internal/SToastItem.vue

@@ -1,101 +0,0 @@
-<template>
-  <div
-    :data-s-tone="toneBinding['data-s-tone']"
-    class="s-toast"
-    :role="liveAttributes.role"
-    :aria-live="liveAttributes.ariaLive"
-    :aria-atomic="liveAttributes.ariaAtomic"
-    @mouseenter="emit('lifetime-pause', notification.id, 'pointer')"
-    @mouseleave="emit('lifetime-resume', notification.id, 'pointer')"
-    @focusin="emit('lifetime-pause', notification.id, 'focus')"
-    @focusout="onFocusOut"
-  >
-    <div class="s-toast-icon">
-      <component
-        :is="presentation.icon"
-        class="h-5 w-5"
-      />
-    </div>
-
-    <div class="s-toast-content">
-      <strong class="s-toast-title">
-        {{ notification.title || presentation.fallbackTitle }}
-      </strong>
-      <p v-if="notification.message" class="s-toast-body">
-        {{ notification.message }}
-      </p>
-      <div v-if="notification.actions?.length" class="s-toast-actions">
-        <SButton
-          v-for="action in notification.actions"
-          :key="action.id"
-          size="xs"
-          severity="secondary"
-          :appearance="action.appearance ?? 'soft'"
-          :label="action.label"
-          @click="emit('action', { notificationId: notification.id, actionId: action.id })"
-        />
-      </div>
-    </div>
-
-    <div v-if="notification.dismissible !== false" class="s-toast-close">
-      <SButton
-        size="xs"
-        appearance="ghost"
-        icon-only
-        :leading-icon="X"
-        :aria-label="t('feedback.closeNotification')"
-        @click="emit('dismiss', notification.id)"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts" generic="Id extends SToastId = string, ActionId extends SToastActionId = string">
-import { computed } from 'vue'
-import { useUiKitLocale } from '../../../composables/useUiKitLocale'
-
-import { X } from '../../icons/sputnigUiIcons'
-import { resolveFeedbackLive, resolveFeedbackPresentation } from '../../../internal/feedbackPresentation'
-import { resolveSemanticToneBinding } from '../../../internal/semanticTone'
-import type {
-  SToastActionId,
-  SToastActionIntent,
-  SToastId,
-  SToastPresentation,
-} from '../data-display/toast'
-import SButton from '../controls/SButton.vue'
-
-defineOptions({ inheritAttrs: false })
-
-const props = defineProps<{
-  notification: SToastPresentation<Id, ActionId>
-}>()
-
-const emit = defineEmits<{
-  dismiss: [id: Id]
-  action: [intent: SToastActionIntent<Id, ActionId>]
-  'lifetime-pause': [id: Id, reason: 'pointer' | 'focus']
-  'lifetime-resume': [id: Id, reason: 'pointer' | 'focus']
-}>()
-const { t } = useUiKitLocale()
-const presentation = computed(() => resolveFeedbackPresentation(props.notification.severity, t))
-const toneBinding = computed(() => resolveSemanticToneBinding(
-  'SToastItem',
-  'notification.severity',
-  props.notification.severity,
-  ['info', 'success', 'warn', 'danger'] as const,
-))
-const liveAttributes = computed(() => resolveFeedbackLive(props.notification.severity, 'auto'))
-
-function onFocusOut(event: FocusEvent): void {
-  const currentTarget = event.currentTarget
-  const relatedTarget = event.relatedTarget
-  if (
-    currentTarget instanceof HTMLElement
-    && relatedTarget instanceof Node
-    && currentTarget.contains(relatedTarget)
-  ) return
-  emit('lifetime-resume', props.notification.id, 'focus')
-}
-</script>
-<style lang="postcss" src="./SToastItem.css" scoped></style>