@pgcorp/ui-kit 0.10.0 → 0.10.1

package/src/components/layout/SResizeHandle.vue

@@ -1,291 +0,0 @@
-<template>
-  <button
-    v-bind="ownedAttrs.bindings()"
-    type="button"
-    role="separator"
-    :aria-orientation="orientation"
-    :aria-label="validatedLabel"
-    :aria-valuenow="validatedRange.value"
-    :aria-valuemin="validatedRange.min"
-    :aria-valuemax="validatedRange.max"
-    :aria-disabled="disabled || undefined"
-    :disabled="disabled"
-    :title="validatedLabel"
-    :data-testid="dataTestId"
-    :data-resizing="effectiveResizing || undefined"
-    :data-hidden-on-narrow="hiddenOnNarrow || undefined"
-    :data-hitbox="validatedHitbox"
-    :data-orientation="orientation"
-    :data-variant="variant"
-    :class="handleClasses"
-    @pointerdown="handlePointerDown"
-    @keydown="handleKeydown"
-  >
-    <span aria-hidden="true" :class="lineClasses"></span>
-  </button>
-</template>
-
-<script setup lang="ts">
-import { computed, onBeforeUnmount, ref } from 'vue'
-import { useOwnedAttrs } from '../../internal/ownedAttrs'
-import { useInteractiveLeafRegistration } from '../../internal/passiveContentContract'
-import {
-  acquirePointerInteractionLease,
-  type PointerInteractionLease,
-} from '../../internal/pointerInteractionLease'
-import { validateExactString, validateNonEmptyString } from '../../internal/runtimeContract'
-
-defineOptions({ inheritAttrs: false })
-
-export type SResizeHandleHitbox = 'compact' | 'standard' | 'spacious'
-
-const RESIZE_HANDLE_HITBOXES = ['compact', 'standard', 'spacious'] as const satisfies readonly SResizeHandleHitbox[]
-
-const props = withDefaults(defineProps<{
-  orientation: 'vertical' | 'horizontal'
-  variant?: 'inline' | 'overlay'
-  valueDirection?: 'forward' | 'reverse'
-  label: string
-  dataTestId?: string
-  resizing?: boolean
-  hiddenOnNarrow?: boolean
-  disabled?: boolean
-  value?: number
-  min?: number
-  max?: number
-  step?: number
-  pointerScale?: number
-  /** Семантическая толщина pointer/focus hitbox; visual divider остаётся однопиксельным. */
-  hitbox?: SResizeHandleHitbox
-}>(), {
-  orientation: 'vertical',
-  variant: 'inline',
-  valueDirection: 'forward',
-  dataTestId: undefined,
-  resizing: false,
-  hiddenOnNarrow: false,
-  disabled: false,
-  value: 50,
-  min: 0,
-  max: 100,
-  step: 10,
-  pointerScale: 1,
-  hitbox: undefined,
-})
-
-const emit = defineEmits<{
-  (event: 'resize-start', pointerEvent: PointerEvent): void
-  (event: 'resize', value: number): void
-  (event: 'resize-end', value: number): void
-}>()
-
-type PointerResizeState = {
-  pointerId: number
-  startCoordinate: number
-  startValue: number
-  latestValue: number
-  target: HTMLButtonElement
-  interactionLease: PointerInteractionLease
-}
-
-const pointerResizeState = ref<PointerResizeState | null>(null)
-const ownedAttrs = useOwnedAttrs({ component: 'SResizeHandle', owner: 'native separator button' })
-useInteractiveLeafRegistration({ owner: 'SResizeHandle' })
-const effectiveResizing = computed(() => props.resizing || pointerResizeState.value !== null)
-const validatedLabel = computed(() => validateNonEmptyString('SResizeHandle', 'label', props.label))
-const validatedHitbox = computed(() => validateExactString(
-  'SResizeHandle',
-  'hitbox',
-  props.hitbox ?? (props.variant === 'overlay' ? 'spacious' : 'compact'),
-  RESIZE_HANDLE_HITBOXES,
-))
-const validatedRange = computed(() => {
-  assertRangeContract()
-  return { value: props.value, min: props.min, max: props.max }
-})
-
-function assertRangeContract(): void {
-  if (![props.value, props.min, props.max, props.step, props.pointerScale].every(Number.isFinite)) {
-    throw new RangeError('SResizeHandle: value, min, max, step и pointerScale должны быть конечными числами')
-  }
-  if (props.min > props.max) {
-    throw new RangeError(`SResizeHandle: min ${props.min} не может превышать max ${props.max}`)
-  }
-  if (props.value < props.min || props.value > props.max) {
-    throw new RangeError(
-      `SResizeHandle: value ${props.value} должен находиться в диапазоне ${props.min}..${props.max}`,
-    )
-  }
-  if (props.step <= 0) {
-    throw new RangeError('SResizeHandle: step должен быть больше нуля')
-  }
-  if (props.pointerScale <= 0) {
-    throw new RangeError('SResizeHandle: pointerScale должен быть больше нуля')
-  }
-}
-
-function clampValue(value: number): number {
-  return Math.min(props.max, Math.max(props.min, value))
-}
-
-function pointerCoordinate(event: PointerEvent): number {
-  return props.orientation === 'vertical' ? event.clientX : event.clientY
-}
-
-function handlePointerMove(event: PointerEvent): void {
-  const state = pointerResizeState.value
-  if (!state || state.pointerId !== event.pointerId) return
-
-  const direction = props.valueDirection === 'forward' ? 1 : -1
-  const delta = (pointerCoordinate(event) - state.startCoordinate) * direction * props.pointerScale
-  const nextValue = clampValue(state.startValue + delta)
-  if (nextValue === state.latestValue) return
-
-  state.latestValue = nextValue
-  emit('resize', nextValue)
-}
-
-function finishPointerResize(event: PointerEvent): void {
-  const state = pointerResizeState.value
-  if (!state || state.pointerId !== event.pointerId) return
-  cleanupPointerResize(true)
-}
-
-function handleLostPointerCapture(event: PointerEvent): void {
-  const state = pointerResizeState.value
-  if (!state || state.pointerId !== event.pointerId) return
-  cleanupPointerResize(true)
-}
-
-function cleanupPointerResize(emitEnd: boolean): void {
-  const state = pointerResizeState.value
-  if (!state) return
-
-  window.removeEventListener('pointermove', handlePointerMove)
-  window.removeEventListener('pointerup', finishPointerResize)
-  window.removeEventListener('pointercancel', finishPointerResize)
-  state.target.removeEventListener('lostpointercapture', handleLostPointerCapture)
-  try {
-    if (state.target.hasPointerCapture?.(state.pointerId)) {
-      state.target.releasePointerCapture(state.pointerId)
-    }
-  } finally {
-    state.interactionLease.release()
-    pointerResizeState.value = null
-  }
-
-  if (emitEnd) emit('resize-end', state.latestValue)
-}
-
-function handlePointerDown(event: PointerEvent): void {
-  if (props.disabled || (event.pointerType !== 'touch' && event.button !== 0)) return
-  assertRangeContract()
-  cleanupPointerResize(false)
-
-  const target = event.currentTarget as HTMLButtonElement
-  const interactionLease = acquirePointerInteractionLease({
-    cursor: props.orientation === 'vertical' ? 'col-resize' : 'row-resize',
-  })
-  try {
-    target.focus({ preventScroll: true })
-    target.setPointerCapture?.(event.pointerId)
-    event.preventDefault()
-  } catch (error: unknown) {
-    interactionLease.release()
-    throw error
-  }
-
-  pointerResizeState.value = {
-    pointerId: event.pointerId,
-    startCoordinate: pointerCoordinate(event),
-    startValue: props.value,
-    latestValue: props.value,
-    target,
-    interactionLease,
-  }
-  window.addEventListener('pointermove', handlePointerMove)
-  window.addEventListener('pointerup', finishPointerResize)
-  window.addEventListener('pointercancel', finishPointerResize)
-  target.addEventListener('lostpointercapture', handleLostPointerCapture)
-  emit('resize-start', event)
-}
-
-function handleKeydown(event: KeyboardEvent): void {
-  if (props.disabled) return
-  assertRangeContract()
-  const backwardKey = props.orientation === 'vertical' ? 'ArrowLeft' : 'ArrowUp'
-  const forwardKey = props.orientation === 'vertical' ? 'ArrowRight' : 'ArrowDown'
-  const decreaseKey = props.valueDirection === 'forward' ? backwardKey : forwardKey
-  const increaseKey = props.valueDirection === 'forward' ? forwardKey : backwardKey
-  let nextValue: number | undefined
-
-  if (event.key === decreaseKey) nextValue = props.value - props.step
-  if (event.key === increaseKey) nextValue = props.value + props.step
-  if (event.key === 'Home') nextValue = props.min
-  if (event.key === 'End') nextValue = props.max
-  if (nextValue === undefined) return
-
-  event.preventDefault()
-  emit('resize', clampValue(nextValue))
-}
-
-onBeforeUnmount(() => {
-  cleanupPointerResize(false)
-})
-
-const handleClasses = computed(() => [
-  's-resize-handle group flex touch-none border-0 bg-transparent p-0',
-  { 'max-lg:hidden': props.hiddenOnNarrow },
-  props.variant === 'inline'
-    ? 'relative flex-shrink-0'
-    : 'pointer-events-auto absolute z-[var(--s-layer-floating)] items-center justify-center',
-  props.orientation === 'vertical'
-    ? props.variant === 'inline'
-      ? 'self-stretch cursor-col-resize items-stretch justify-center'
-      : 'inset-y-3 left-2 -translate-x-1/2 cursor-col-resize'
-    : props.variant === 'inline'
-      ? 'w-full cursor-row-resize items-center justify-stretch'
-      : 'inset-x-5 top-0 -translate-y-1/2 cursor-row-resize',
-])
-
-const lineClasses = computed(() =>
-  props.orientation === 'vertical'
-    ? props.variant === 'inline'
-      ? 'block h-full w-px bg-surface-200 transition-colors group-hover:bg-primary-500/45 dark:bg-surface-700 dark:group-hover:bg-primary-500/55'
-      : 'block h-24 w-1.5 rounded-full border border-surface-200/80 bg-surface-0/95 shadow-sm transition-colors group-hover:border-primary-300 group-hover:bg-primary-50/95 group-data-[resizing=true]:border-primary-300 group-data-[resizing=true]:bg-primary-50/95 dark:border-surface-700/80 dark:bg-surface-850/95 dark:group-hover:border-primary-500/70 dark:group-hover:bg-surface-800/95 dark:group-data-[resizing=true]:border-primary-500/70 dark:group-data-[resizing=true]:bg-surface-800/95'
-    : props.variant === 'inline'
-      ? 'block h-px w-full bg-surface-200 transition-colors group-hover:bg-primary-500/45 dark:bg-surface-700 dark:group-hover:bg-primary-500/55'
-      : 'block h-1.5 w-24 rounded-full border border-surface-200/80 bg-surface-0/95 shadow-sm transition-colors group-hover:border-primary-300 group-hover:bg-primary-50/95 group-data-[resizing=true]:border-primary-300 group-data-[resizing=true]:bg-primary-50/95 dark:border-surface-700/80 dark:bg-surface-850/95 dark:group-hover:border-primary-500/70 dark:group-hover:bg-surface-800/95 dark:group-data-[resizing=true]:border-primary-500/70 dark:group-data-[resizing=true]:bg-surface-800/95',
-)
-</script>
-
-<style scoped>
-.s-resize-handle[data-orientation='vertical'][data-hitbox='compact'] {
-  width: var(--s-resize-handle-hitbox-compact);
-}
-
-.s-resize-handle[data-orientation='vertical'][data-hitbox='standard'] {
-  width: var(--s-resize-handle-hitbox-standard);
-}
-
-.s-resize-handle[data-orientation='vertical'][data-hitbox='spacious'] {
-  width: var(--s-resize-handle-hitbox-spacious);
-}
-
-.s-resize-handle[data-orientation='horizontal'][data-hitbox='compact'] {
-  height: var(--s-resize-handle-hitbox-compact);
-}
-
-.s-resize-handle[data-orientation='horizontal'][data-hitbox='standard'] {
-  height: var(--s-resize-handle-hitbox-standard);
-}
-
-.s-resize-handle[data-orientation='horizontal'][data-hitbox='spacious'] {
-  height: var(--s-resize-handle-hitbox-spacious);
-}
-
-.s-resize-handle:focus-visible {
-  outline: var(--s-focus-ring-width) solid var(--s-focus-ring-color);
-  outline-offset: var(--s-focus-ring-offset);
-}
-</style>

package/src/components/layout/SSideMenuButton.vue

@@ -1,105 +0,0 @@
-<template>
-  <div class="w-full" :class="{ 'mt-2': offsetTop }">
-    <SDropdownMenu
-      v-if="contextMenuItems.length && contextMenuTrigger === 'click'"
-      v-slot="{ triggerAttrs }"
-      :items="contextMenuItems"
-      @select="$emit('context-menu-select', $event)"
-    >
-      <SButton
-        v-bind="{ ...buttonProps, ...triggerAttrs }"
-        @click="$emit('click', $event)"
-      />
-    </SDropdownMenu>
-    <SContextMenu
-      v-else-if="contextMenuItems.length"
-      :items="contextMenuItems"
-      :trigger="contextMenuTrigger"
-      @select="$emit('context-menu-select', $event)"
-    >
-      <SButton v-bind="buttonProps" @click="$emit('click', $event)" />
-    </SContextMenu>
-    <SButton v-else v-bind="buttonProps" @click="$emit('click', $event)" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, type Component } from 'vue'
-import SContextMenu from '@pgcorp/ui-kit/shared/controls/SContextMenu.vue'
-import SDropdownMenu from '@pgcorp/ui-kit/shared/controls/SDropdownMenu.vue'
-import SButton from '@pgcorp/ui-kit/shared/controls/SButton.vue'
-import type { SMenuEntry, SMenuSelectableEntry } from '@pgcorp/ui-kit/shared/controls/menu'
-import type { BadgeSeverity } from '@pgcorp/ui-kit/shared/data-display/SBadge.vue'
-import { useOwnedAttrs } from '../../internal/ownedAttrs'
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = withDefaults(defineProps<{
-  title: string
-  icon: Component
-  badge?: string | number
-  badgeSeverity?: BadgeSeverity
-  active?: boolean
-  offsetTop?: boolean
-  disabled?: boolean
-  showLabel?: boolean
-  shortcut?: string | null
-  contextMenuItems?: readonly SMenuEntry[]
-  contextMenuTrigger?: 'contextmenu' | 'click' | 'both'
-  autofocus?: boolean
-}>(), {
-  active: false,
-  badge: undefined,
-  badgeSeverity: 'secondary',
-  offsetTop: false,
-  disabled: false,
-  showLabel: false,
-  shortcut: null,
-  contextMenuItems: () => [],
-  contextMenuTrigger: 'contextmenu',
-  autofocus: false,
-})
-
-const ownedAttrs = useOwnedAttrs({ component: 'SSideMenuButton', owner: 'descendant SButton' })
-
-defineEmits<{
-  (e: 'click', event: MouseEvent): void
-  (e: 'context-menu-select', entry: SMenuSelectableEntry): void
-}>()
-
-const resolvedTitle = computed(() => {
-  if (!props.shortcut) return props.title
-  return `${props.title} (${props.shortcut})`
-})
-
-const buttonProps = computed(() => {
-  const forwardedAttrs = ownedAttrs.bindings()
-  const forwardedDataTestId = forwardedAttrs['data-testid']
-  if (forwardedDataTestId !== undefined && typeof forwardedDataTestId !== 'string') {
-    throw new Error('SSideMenuButton: native attribute "data-testid" must be a string')
-  }
-  return {
-    ...forwardedAttrs,
-    'aria-current': props.active && !props.disabled ? 'page' as const : undefined,
-    'aria-label': props.title,
-    'autofocus': props.autofocus,
-    'data-testid': forwardedDataTestId,
-    'title': resolvedTitle.value,
-    'appearance': props.active && !props.disabled ? 'soft' as const : 'ghost' as const,
-    'badge': props.badge,
-    'badgeSeverity': props.badgeSeverity,
-    'contentAlign': props.showLabel ? 'start' as const : 'center' as const,
-    'disabled': props.disabled,
-    'iconOnly': !props.showLabel,
-    'iconSize': 'large' as const,
-    'label': props.showLabel ? props.title : undefined,
-    'leadingIcon': props.icon,
-    'severity': props.active && !props.disabled ? 'primary' as const : 'secondary' as const,
-    'shape': 'row' as const,
-    'size': props.showLabel ? 'md' as const : 'lg' as const,
-    'width': 'full' as const,
-  }
-})
-</script>

package/src/components/layout/SSideMenuRail.vue

@@ -1,44 +0,0 @@
-<template>
-  <div
-    v-if="visible"
-    v-bind="ownedAttrs.bindings()"
-    class="flex h-full min-h-0 flex-shrink-0 flex-col gap-1 overflow-x-hidden overflow-y-auto border-r border-surface-200 bg-surface-0 p-1 transition-[width] duration-[var(--s-motion-fast)] dark:border-surface-800 dark:bg-surface-950"
-    :class="expanded ? 'w-56 items-stretch' : 'w-14 items-stretch'"
-  >
-    <div class="flex flex-col items-stretch gap-1">
-      <slot name="top" />
-    </div>
-
-    <div class="mt-auto flex flex-col items-stretch gap-1">
-      <slot name="bottom" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { watchEffect } from 'vue'
-import { useOwnedAttrs } from '../../internal/ownedAttrs'
-
-defineOptions({ inheritAttrs: false })
-
-const props = withDefaults(defineProps<{
-  visible?: boolean
-  expanded?: boolean
-}>(), {
-  visible: true,
-  expanded: false,
-})
-
-const ownedAttrs = useOwnedAttrs({
-  component: 'SSideMenuRail',
-  owner: 'visible side-menu rail root',
-})
-
-watchEffect(() => {
-  if (!props.visible) {
-    ownedAttrs.reject('side-menu rail is hidden')
-    return
-  }
-  ownedAttrs.bindings()
-})
-</script>

package/src/components/layout/SStack.vue

@@ -1,65 +0,0 @@
-<template>
-  <component
-    :is="as"
-    v-bind="ownedAttrs.bindings()"
-    class="s-stack"
-    :data-gap="gap"
-    :data-direction="direction"
-    :data-padding-end="paddingEnd"
-    :data-fill="fill"
-    :data-align="align"
-    :data-justify="justify"
-  >
-    <slot />
-  </component>
-</template>
-
-<script setup lang="ts">
-import type { VNodeChild } from 'vue'
-import { useOwnedAttrs } from '../../internal/ownedAttrs'
-
-defineOptions({ inheritAttrs: false })
-
-export type SStackGap = 'none' | 'tight' | 'control' | 'content' | 'section' | 'panel'
-export type SStackPadding = 'none' | 'control' | 'content' | 'section' | 'panel'
-
-/**
- * Flex layout-owner с ограниченной семантической шкалой интервалов.
- * Flex layout owner with a constrained semantic spacing scale.
- */
-export interface Props {
-  /** Семантический HTML-container без интерактивной роли. / Semantic non-interactive HTML container. */
-  as?: 'div' | 'section' | 'article' | 'ul' | 'ol'
-  /** Направление основной оси. / Main-axis direction. */
-  direction?: 'column' | 'row'
-  /** Интервал между непосредственными участниками. / Gap between direct participants. */
-  gap?: SStackGap
-  /** Нижний внутренний отступ для scroll-safe composition. / End padding for scroll-safe composition. */
-  paddingEnd?: SStackPadding
-  /** Container заполняет доступную высоту. / Container fills the available height. */
-  fill?: 'content' | 'container'
-  /** Выравнивание участников по поперечной оси. / Cross-axis participant alignment. */
-  align?: 'stretch' | 'start' | 'center' | 'end'
-  /** Распределение участников по основной оси. / Main-axis participant distribution. */
-  justify?: 'start' | 'center' | 'end' | 'between'
-}
-
-withDefaults(defineProps<Props>(), {
-  as: 'div',
-  direction: 'column',
-  gap: 'content',
-  paddingEnd: 'none',
-  fill: 'content',
-  align: 'stretch',
-  justify: 'start',
-})
-
-const ownedAttrs = useOwnedAttrs({ component: 'SStack', owner: 'semantic stack root' })
-
-defineSlots<{
-  /** Участники вертикальной композиции. / Vertical-composition participants. */
-  default?: () => VNodeChild
-}>()
-</script>
-
-<style lang="postcss" src="./SStack.css" scoped></style>

package/src/components/layout/SStatusBarShell.vue

@@ -1,26 +0,0 @@
-<template>
-  <footer
-    v-bind="ownedAttrs.bindings()"
-    class="s-status-bar-shell"
-  >
-    <div class="s-status-bar-shell__left">
-      <slot name="left" />
-    </div>
-
-    <div class="s-status-bar-shell__right">
-      <slot name="right" />
-    </div>
-
-    <slot />
-  </footer>
-</template>
-
-<script setup lang="ts">
-import { useOwnedAttrs } from '../../internal/ownedAttrs'
-
-defineOptions({ inheritAttrs: false })
-
-const ownedAttrs = useOwnedAttrs({ component: 'SStatusBarShell', owner: 'status bar footer' })
-</script>
-
-<style lang="postcss" src="./SStatusBarShell.css" scoped></style>

package/src/components/layout/SWorkbenchLayout.vue

@@ -1,53 +0,0 @@
-<template>
-  <div
-    v-bind="ownedAttrs.bindings()"
-    :id="resolvedScrollContainerId"
-    class="flex h-full w-full flex-col text-surface-700 dark:text-surface-200"
-    :class="{ 's-workbench-layout--mobile': isMobile }"
-  >
-    <div v-if="!isMobile" class="s-workbench-layout__header">
-      <slot name="header" />
-    </div>
-    <slot name="filter-banner" />
-    <slot name="search-panel" />
-    <div
-      :id="contentId"
-      class="relative flex-grow"
-      :class="{ 'overflow-y-auto': !isMobile }"
-    >
-      <slot />
-    </div>
-    <slot name="bottom-nav" :scroll-container-id="contentId" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useOwnedAttrs } from '../../internal/ownedAttrs'
-
-defineOptions({ inheritAttrs: false })
-
-const props = withDefaults(defineProps<{
-  scrollContainerId?: string
-  isMobile?: boolean
-}>(), {
-  scrollContainerId: 's-workbench-scroll',
-  isMobile: false,
-})
-
-const resolvedScrollContainerId = computed(() => props.scrollContainerId)
-const ownedAttrs = useOwnedAttrs({ component: 'SWorkbenchLayout', owner: 'workbench layout root' })
-const contentId = computed(() => `${resolvedScrollContainerId.value}-content`)
-</script>
-
-<style scoped lang="postcss">
-@reference "../../styles/reference.css";
-
-.s-workbench-layout__header {
-  @apply shrink-0 border-b border-surface-200 px-4 py-3 dark:border-surface-700;
-}
-
-.s-workbench-layout--mobile {
-  padding-top: 0;
-}
-</style>