@pgcorp/ui-kit 0.1.0

package/src/components/shared/controls/SContextMenu.vue

@@ -0,0 +1,186 @@
+<template>
+  <div
+    v-bind="ownedAttrs.bindings()"
+    class="s-context-menu-boundary"
+    :data-layout="boundaryLayout"
+    @click="handleBoundaryClick"
+    @contextmenu="handleBoundaryContextMenu"
+  >
+    <slot :trigger-props="triggerProps" />
+    <teleport to="body">
+      <transition
+        enter-active-class="transition ease-out duration-[var(--s-motion-fast)]"
+        enter-from-class="transform opacity-0 scale-95"
+        enter-to-class="transform opacity-100 scale-100"
+        leave-active-class="transition ease-in duration-[var(--s-motion-instant)]"
+        leave-from-class="transform opacity-100 scale-100"
+        leave-to-class="transform opacity-0 scale-95"
+      >
+        <SMenuLayer
+          v-if="isOpen"
+          ref="layerRef"
+          kind="context"
+          landmark-label="Контекстные действия"
+          :position="position"
+          :z-index="zIndex"
+        >
+          <SMenuSurface
+            :id="menuId"
+            label="Контекстные действия"
+            autofocus
+            :initial-focus="initialMenuFocus"
+            :items="items"
+            @dismiss-tree="closeMenu('outside')"
+            @escape="closeMenu('escape')"
+            @focus-exit="closeMenu('outside')"
+            @select="handleSelect"
+            @tab="closeMenuForTab"
+          />
+        </SMenuLayer>
+      </transition>
+    </teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useId, watch, watchEffect } from 'vue'
+import type { VNodeChild } from 'vue'
+import { findFocusableOwner } from '../../../internal/focusNavigation'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
+import { useMenuLayer } from '../../../internal/useMenuLayer'
+import SMenuLayer from '../_internal/SMenuLayer.vue'
+import type { SMenuLayerApi } from '../_internal/SMenuLayer.vue'
+import SMenuSurface from './SMenuSurface.vue'
+import { validateSMenuEntries, type SMenuActivationEvent, type SMenuEntry, type SMenuSelectableEntry } from './menu'
+
+defineOptions({ inheritAttrs: false })
+
+export interface Props {
+  items: readonly SMenuEntry[];
+  /** False оставляет boundary полностью inert: не открывает menu и не перехватывает native events. / False keeps the boundary fully inert: it neither opens the menu nor intercepts native events. */
+  enabled?: boolean;
+  trigger?: 'contextmenu' | 'click' | 'both';
+  boundaryLayout?: 'block' | 'inline' | 'contents';
+}
+
+/**
+ * ARIA-связь canonical trigger с принадлежащим ему context-menu layer.
+ * ARIA relationship between the canonical trigger and its owned context-menu layer.
+ */
+export interface SContextMenuTriggerProps {
+  readonly 'aria-haspopup'?: 'menu'
+  readonly 'aria-expanded'?: boolean
+  readonly 'aria-controls'?: string
+  readonly onKeydown?: (event: KeyboardEvent) => void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  enabled: true,
+  trigger: 'contextmenu',
+  boundaryLayout: 'block',
+})
+const emit = defineEmits<{
+  select: [entry: SMenuSelectableEntry, event: SMenuActivationEvent]
+}>()
+defineSlots<{
+  /** Canonical interactive owner получает готовые ARIA props. / The canonical interactive owner receives complete ARIA props. */
+  default?: (props: { triggerProps: SContextMenuTriggerProps }) => VNodeChild
+}>()
+const ownedAttrs = useOwnedAttrs({ component: 'SContextMenu', owner: 'interaction boundary root' })
+useInteractiveLeafRegistration({ owner: 'SContextMenu', active: () => props.enabled })
+
+const generatedMenuId = useId()
+const menuId = `s-context-menu-${generatedMenuId}`
+const initialMenuFocus = ref<'first' | 'last'>('first')
+const layerRef = ref<SMenuLayerApi | null>(null)
+const layerElement = computed(() => layerRef.value?.getElement() ?? null)
+const {
+  isOpen,
+  position,
+  zIndex,
+  open,
+  close: closeMenu,
+  closeForTab: closeMenuForTab,
+} = useMenuLayer(layerElement)
+const triggerProps = computed<SContextMenuTriggerProps>(() => (
+  props.enabled
+    ? {
+        'aria-haspopup': 'menu',
+        'aria-expanded': isOpen.value,
+        'aria-controls': menuId,
+        onKeydown: handleTriggerKeydown,
+      }
+    : {}
+))
+
+const openMenu = async (event: MouseEvent): Promise<void> => {
+  if (!props.enabled) return
+  initialMenuFocus.value = 'first'
+  const boundary = event.currentTarget instanceof Element ? event.currentTarget : null
+  const focusTarget = findFocusableOwner(event.target, boundary)
+    ?? findFocusableOwner(document.activeElement)
+  const isKeyboardActivation = event.clientX === 0 && event.clientY === 0 && event.detail === 0
+  await open(
+    isKeyboardActivation && focusTarget
+      ? { type: 'element', element: focusTarget, align: 'left' }
+      : { type: 'point', x: event.clientX, y: event.clientY },
+    focusTarget,
+  )
+}
+
+const handleTriggerKeydown = (event: KeyboardEvent): void => {
+  if (
+    !props.enabled
+    || (props.trigger !== 'click' && props.trigger !== 'both')
+    || (event.key !== 'ArrowDown' && event.key !== 'ArrowUp')
+  ) return
+  const trigger = event.currentTarget
+  if (!(trigger instanceof HTMLElement)) {
+    throw new TypeError('SContextMenu: trigger keydown currentTarget must be an HTMLElement')
+  }
+  event.preventDefault()
+  event.stopPropagation()
+  initialMenuFocus.value = event.key === 'ArrowUp' ? 'last' : 'first'
+  void open({ type: 'element', element: trigger, align: 'left' }, trigger)
+}
+
+const activateBoundary = (event: MouseEvent): void => {
+  if (!props.enabled) return
+  event.preventDefault()
+  event.stopPropagation()
+  void openMenu(event)
+}
+
+const handleBoundaryClick = (event: MouseEvent): void => {
+  if (props.trigger === 'click' || props.trigger === 'both') activateBoundary(event)
+}
+
+const handleBoundaryContextMenu = (event: MouseEvent): void => {
+  if (props.trigger === 'contextmenu' || props.trigger === 'both') activateBoundary(event)
+}
+
+watch(() => props.enabled, (enabled) => {
+  if (!enabled) closeMenu('programmatic')
+})
+
+const handleSelect = (item: SMenuSelectableEntry, event: SMenuActivationEvent): void => {
+  if (item.disabled) return
+  closeMenu('selection')
+  emit('select', item, event)
+}
+
+watchEffect(() => {
+  validateSMenuEntries(props.items)
+  if (typeof props.enabled !== 'boolean') throw new TypeError('SContextMenu: enabled must be a boolean')
+  if (!['contextmenu', 'click', 'both'].includes(props.trigger)) {
+    throw new TypeError("SContextMenu: trigger must be 'contextmenu', 'click', or 'both'")
+  }
+  if (!['block', 'inline', 'contents'].includes(props.boundaryLayout)) {
+    throw new TypeError("SContextMenu: boundaryLayout must be 'block', 'inline', or 'contents'")
+  }
+})
+
+</script>
+
+<style lang="postcss" src="./SContextMenu.css" scoped></style>

package/src/components/shared/controls/SContextToggleButton.vue

@@ -0,0 +1,64 @@
+<template>
+  <SButton
+    v-bind="ownedAttrs.bindings()"
+    appearance="text"
+    icon-only
+    shape="circle"
+    :size="size"
+    :severity="partial ? 'warn' : inContext ? 'primary' : 'secondary'"
+    :title="accessibleTitle"
+    :aria-label="accessibleTitle"
+    :pressed="pressedState"
+    :leading-icon="stateIcon"
+    :loading="loading"
+    @click="emit('click')"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed, type Component } from 'vue'
+import { Minus, MinusCircle, PlusCircle } from '../../icons/sputnigUiIcons'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { validateNonEmptyString } from '../../../internal/runtimeContract'
+import SButton from './SButton.vue'
+
+defineOptions({ inheritAttrs: false })
+
+/** Доменный toggle добавления сущности в контекст. / Domain toggle for adding an entity to context. */
+export interface Props {
+  inContext: boolean
+  partial?: boolean
+  addTitle?: string
+  removeTitle?: string
+  size?: 'sm' | 'md' | 'lg'
+  loading?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  partial: false,
+  addTitle: 'Добавить в контекст',
+  removeTitle: 'Убрать из контекста',
+  size: 'sm',
+  loading: false,
+})
+
+const emit = defineEmits<{
+  (e: 'click'): void
+}>()
+const ownedAttrs = useOwnedAttrs({ component: 'SContextToggleButton', owner: 'toggle button' })
+
+const accessibleLabels = computed(() => ({
+  add: validateNonEmptyString('SContextToggleButton', 'addTitle', props.addTitle),
+  remove: validateNonEmptyString('SContextToggleButton', 'removeTitle', props.removeTitle),
+}))
+const accessibleTitle = computed(() => (
+  props.inContext ? accessibleLabels.value.remove : accessibleLabels.value.add
+))
+const pressedState = computed<boolean | 'mixed'>(() => (
+  props.partial ? 'mixed' : props.inContext
+))
+const stateIcon = computed<Component>(() => {
+  if (!props.inContext) return PlusCircle
+  return props.partial ? Minus : MinusCircle
+})
+</script>

package/src/components/shared/controls/SDragHandle.vue

@@ -0,0 +1,100 @@
+<template>
+  <SButton
+    v-bind="ownedAttrs.bindings()"
+    size="sm"
+    severity="secondary"
+    appearance="ghost"
+    icon-only
+    :leading-icon="DragIcon"
+    :disabled="disabled"
+    :pressed="keyboardActive"
+    :title="accessibleLabel"
+    :aria-label="accessibleLabel"
+    :aria-keyshortcuts="keyboardShortcuts"
+    data-s-drag-handle
+    :data-state="keyboardActive ? 'keyboard-active' : 'idle'"
+    @click="handleClick"
+    @pointerdown="handlePointerDown"
+    @keydown="handleKeydown"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watchEffect } from 'vue'
+import { getSputnigUiIconComponent } from '../../icons/sputnigUiIcons'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { validateNonEmptyString } from '../../../internal/runtimeContract'
+import SButton from './SButton.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<{
+  label: string
+  orientation?: 'vertical' | 'horizontal'
+  canMovePrevious?: boolean
+  canMoveNext?: boolean
+  disabled?: boolean
+}>(), {
+  orientation: 'vertical',
+  canMovePrevious: false,
+  canMoveNext: false,
+  disabled: false,
+})
+
+const emit = defineEmits<{
+  (event: 'drag-start', pointerEvent: PointerEvent): void
+  (event: 'reorder', direction: -1 | 1): void
+  (event: 'keyboard-active-change', active: boolean): void
+}>()
+
+const DragIcon = getSputnigUiIconComponent('drag')
+const ownedAttrs = useOwnedAttrs({ component: 'SDragHandle', owner: 'drag handle command' })
+const keyboardActive = ref(false)
+const validatedLabel = computed(() => validateNonEmptyString('SDragHandle', 'label', props.label))
+const keyboardShortcuts = computed(() => props.orientation === 'vertical'
+  ? 'Enter Space ArrowUp ArrowDown Escape'
+  : 'Enter Space ArrowLeft ArrowRight Escape')
+const accessibleLabel = computed(() => keyboardActive.value
+  ? `Перемещение: ${validatedLabel.value}. Используйте стрелки, Enter — завершить, Escape — отменить`
+  : `Переместить: ${validatedLabel.value}. Нажмите Enter и используйте стрелки`)
+
+function setKeyboardActive(active: boolean): void {
+  if (keyboardActive.value === active) return
+  keyboardActive.value = active
+  emit('keyboard-active-change', active)
+}
+
+function handleClick(event: MouseEvent): void {
+  if (props.disabled || event.detail > 0) return
+  setKeyboardActive(!keyboardActive.value)
+}
+
+function handlePointerDown(event: PointerEvent): void {
+  if (props.disabled) return
+  setKeyboardActive(false)
+  emit('drag-start', event)
+}
+
+function handleKeydown(event: KeyboardEvent): void {
+  if (props.disabled || !keyboardActive.value) return
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    setKeyboardActive(false)
+    return
+  }
+
+  const previousKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'
+  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'
+  if (event.key !== previousKey && event.key !== nextKey) return
+
+  event.preventDefault()
+  const direction = event.key === previousKey ? -1 : 1
+  if (direction === -1 && !props.canMovePrevious) return
+  if (direction === 1 && !props.canMoveNext) return
+  emit('reorder', direction)
+}
+
+watchEffect(() => {
+  if (props.disabled) setKeyboardActive(false)
+})
+</script>

package/src/components/shared/controls/SDropdownMenu.css

@@ -0,0 +1,5 @@
+@reference "../../../styles/reference.css";
+
+.s-dropdown-menu {
+  @apply relative inline-block self-start text-left;
+}

package/src/components/shared/controls/SDropdownMenu.vue

@@ -0,0 +1,188 @@
+<template>
+  <div class="s-dropdown-menu">
+    <slot v-if="hasCustomTrigger" :trigger-attrs="triggerAttrs()" />
+    <SButton
+      v-else
+      v-bind="triggerAttrs()"
+      label="Опции"
+      :disclosure="{ expanded: isOpen, controls: menuId }"
+      severity="secondary"
+    />
+    <teleport to="body">
+      <SMenuLayer
+        v-if="isOpen"
+        ref="layerRef"
+        kind="dropdown"
+        :landmark-label="menuLabel"
+        :position="position"
+        :z-index="zIndex"
+      >
+        <SMenuSurface
+          ref="menuSurfaceRef"
+          :id="menuId"
+          :label="menuLabel"
+          density="compact"
+          autofocus
+          :initial-focus="initialFocus"
+          :items="items"
+          @dismiss-tree="close('outside')"
+          @escape="close('escape')"
+          @focus-exit="close('outside')"
+          @select="select"
+          @tab="closeForTab"
+        />
+      </SMenuLayer>
+    </teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  computed,
+  nextTick,
+  onMounted,
+  ref,
+  useId,
+  watchEffect,
+  type VNodeChild,
+  type VNodeRef,
+} from 'vue'
+import { useOwnedAttrs, type OwnedAttributeBindings } from '../../../internal/ownedAttrs'
+import { useMenuLayer } from '../../../internal/useMenuLayer'
+import SMenuLayer from '../_internal/SMenuLayer.vue'
+import type { SMenuLayerApi } from '../_internal/SMenuLayer.vue'
+import SButton from './SButton.vue'
+import SMenuSurface, { type SMenuSurfaceApi } from './SMenuSurface.vue'
+import { validateSMenuEntries, type SMenuActivationEvent, type SMenuEntry, type SMenuSelectableEntry } from './menu'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<{
+  items: readonly SMenuEntry[]
+  align?: 'left' | 'right'
+  menuLabel?: string
+}>(), {
+  align: 'right',
+  menuLabel: 'Дополнительные действия',
+})
+const emit = defineEmits<{
+  select: [entry: SMenuSelectableEntry, event: SMenuActivationEvent]
+}>()
+export type SDropdownMenuTriggerAttrs = OwnedAttributeBindings<'SDropdownMenu'> & {
+  readonly ref: VNodeRef
+  readonly 'aria-haspopup': 'menu'
+  readonly 'aria-expanded': boolean
+  readonly 'aria-controls': string
+  readonly onClick: (event?: Event) => void
+  readonly onKeydown: (event: KeyboardEvent) => void
+}
+const slots = defineSlots<{
+  /** Единственный custom-trigger contract: attrs должны принадлежать реальному control. / The sole custom-trigger contract: attrs must be bound to the actual control. */
+  default?: (props: { triggerAttrs: SDropdownMenuTriggerAttrs }) => VNodeChild
+}>()
+
+const ownedAttrs = useOwnedAttrs({ component: 'SDropdownMenu', owner: 'menu trigger' })
+const layerRef = ref<SMenuLayerApi | null>(null)
+const menuSurfaceRef = ref<SMenuSurfaceApi | null>(null)
+let registeredTriggerTarget: Element | object | null = null
+const layerElement = computed(() => layerRef.value?.getElement() ?? null)
+const {
+  isOpen,
+  position,
+  zIndex,
+  close,
+  closeForTab,
+  open,
+  toggle: toggleLayer,
+} = useMenuLayer(layerElement)
+const menuId = `s-dropdown-menu-${useId()}`
+const initialFocus = ref<'first' | 'last'>('first')
+const hasCustomTrigger = Boolean(slots.default)
+
+function resolveTriggerElement(target: Element | object | null): HTMLElement | null {
+  if (target === null) return null
+  if (target instanceof HTMLElement) return target
+  const getElement = Reflect.get(target, 'getElement')
+  if (typeof getElement !== 'function') {
+    throw new Error('SDropdownMenu: trigger ref must resolve to an HTMLElement or UI-kit leaf API')
+  }
+  const element: unknown = Reflect.apply(getElement, target, [])
+  if (!(element instanceof HTMLElement)) {
+    throw new Error('SDropdownMenu: trigger leaf getElement() must return an HTMLElement')
+  }
+  return element
+}
+
+const bindTriggerElement: VNodeRef = (target) => {
+  if (target !== null && registeredTriggerTarget !== null && target !== registeredTriggerTarget) {
+    throw new Error('SDropdownMenu: trigger binding must belong to exactly one UI-kit leaf')
+  }
+  registeredTriggerTarget = target
+}
+
+const triggerAttrs = (): SDropdownMenuTriggerAttrs => {
+  const attrs = ownedAttrs.bindings()
+  if (Object.prototype.hasOwnProperty.call(attrs, 'onClick')) {
+    throw new Error('SDropdownMenu: @click belongs to the typed triggerAttrs activation contract')
+  }
+  return {
+    ...attrs,
+    ref: bindTriggerElement,
+    'aria-haspopup': 'menu' as const,
+    'aria-expanded': isOpen.value,
+    'aria-controls': menuId,
+    onClick: toggle,
+    onKeydown: handleTriggerKeydown,
+  }
+}
+
+function triggerElement(event?: Event): HTMLElement {
+  const trigger = resolveTriggerElement(registeredTriggerTarget)
+  if (!trigger) throw new Error('SDropdownMenu: expected exactly one trigger, received 0')
+  if (event?.currentTarget instanceof HTMLElement && event.currentTarget !== trigger) {
+    throw new Error('SDropdownMenu: activation target does not match the registered trigger')
+  }
+  return trigger
+}
+
+onMounted(() => {
+  const trigger = triggerElement()
+  if (trigger.getAttribute('aria-haspopup') !== 'menu' || trigger.getAttribute('aria-controls') !== menuId) {
+    throw new Error('SDropdownMenu: expected exactly one trigger, received 0')
+  }
+})
+
+function toggle(event?: Event): void {
+  const trigger = triggerElement(event)
+  initialFocus.value = 'first'
+  toggleLayer({ type: 'element', element: trigger, align: props.align }, trigger)
+}
+
+async function handleTriggerKeydown(event: KeyboardEvent): Promise<void> {
+  if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return
+  event.preventDefault()
+  event.stopPropagation()
+  const trigger = triggerElement(event)
+  initialFocus.value = event.key === 'ArrowUp' ? 'last' : 'first'
+  if (!isOpen.value) {
+    await open({ type: 'element', element: trigger, align: props.align }, trigger)
+  }
+  await nextTick()
+  if (initialFocus.value === 'last') menuSurfaceRef.value?.focusLast()
+  else menuSurfaceRef.value?.focusFirst()
+}
+
+function select(item: SMenuSelectableEntry, event: SMenuActivationEvent): void {
+  if (item.disabled) return
+  close('selection')
+  emit('select', item, event)
+}
+
+watchEffect(() => {
+  validateSMenuEntries(props.items)
+  if (!props.menuLabel.trim()) throw new TypeError('SDropdownMenu: menuLabel must be a non-empty string')
+  if (props.align !== 'left' && props.align !== 'right') throw new TypeError("SDropdownMenu: align must be 'left' or 'right'")
+})
+</script>
+
+<style lang="postcss" src="./SDropdownMenu.css" scoped></style>

package/src/components/shared/controls/SField.css

@@ -0,0 +1,79 @@
+@reference "../../../styles/reference.css";
+
+.s-field {
+  @apply grid w-full min-w-0;
+  grid-template-areas:
+    "label"
+    "control"
+    "help"
+    "error";
+}
+
+.s-field[data-fill='container'] {
+  @apply h-full;
+}
+
+.s-field--stacked[data-fill='container'] {
+  grid-template-rows: auto minmax(0, 1fr) auto auto;
+}
+
+.s-field--inline[data-fill='container'] {
+  grid-template-rows: minmax(0, 1fr) auto auto;
+}
+
+.s-field[data-fill='container'] .s-field__control {
+  @apply min-h-0;
+}
+
+.s-field--inline {
+  @apply items-start gap-x-2;
+  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-areas:
+    "control label"
+    ". help"
+    ". error";
+}
+
+.s-field__label {
+  grid-area: label;
+  @apply mb-1 block min-w-0 text-sm font-medium text-surface-700 dark:text-surface-300;
+}
+
+.s-field--inline .s-field__label {
+  @apply mb-0 cursor-pointer whitespace-normal;
+  overflow-wrap: anywhere;
+}
+
+.s-field__control {
+  grid-area: control;
+  @apply min-w-0;
+}
+
+.s-field--inline .s-field__control {
+  @apply flex items-center;
+}
+
+.s-field__required {
+  @apply ml-0.5 text-danger-600 dark:text-danger-400;
+}
+
+.s-field__help,
+.s-field__error {
+  @apply mt-1 min-w-0 whitespace-normal text-xs;
+  overflow-wrap: anywhere;
+}
+
+.s-field__help {
+  grid-area: help;
+  @apply text-surface-500 dark:text-surface-400;
+}
+
+.s-field__error {
+  grid-area: error;
+  @apply text-danger-600 dark:text-danger-400;
+}
+
+.s-field[data-disabled='true'] .s-field__label,
+.s-field[data-readonly='true'] .s-field__label {
+  color: var(--s-field-disabled-foreground);
+}