@pgcorp/ui-kit 0.1.0

package/src/components/shared/containers/SPopover.vue

@@ -0,0 +1,551 @@
+<template>
+  <div
+    v-bind="rootAttrs.bindings()"
+    class="s-popover-wrapper"
+  >
+    <div class="s-popover relative block w-full">
+      <slot
+        v-if="$slots.trigger"
+        name="trigger"
+        :bindTrigger="bindTrigger"
+        :open="openPopover"
+        :close="closeExplicitly"
+        :isOpen="isOpen"
+      />
+      <SButton
+        v-else
+        v-bind="builtInTriggerBinding"
+        data-s-popover-trigger=""
+        :label="triggerLabel"
+        :leading-icon="triggerLeadingIcon"
+        :trailing-icon="triggerTrailingIcon"
+        :icon-only="triggerIconOnly"
+        :appearance="triggerAppearance"
+        :size="triggerSize"
+        :width="triggerWidth"
+        :content-align="triggerContentAlign"
+        :shape="triggerShape"
+        :severity="triggerSeverity"
+        :badge="triggerBadge"
+        :disabled="disabled"
+        :title="triggerTitle"
+        :aria-label="resolvedTriggerAriaLabel"
+        :data-testid="triggerTestId"
+      >
+        <slot :isOpen="isOpen" />
+      </SButton>
+
+      <transition
+        enter-active-class="transition duration-[var(--s-motion-standard)] ease-out"
+        enter-from-class="translate-y-1 opacity-0"
+        enter-to-class="translate-y-0 opacity-100"
+        leave-active-class="pointer-events-none transition duration-[var(--s-motion-fast)] ease-in"
+        leave-from-class="translate-y-0 opacity-100"
+        leave-to-class="translate-y-1 opacity-0"
+        @enter="focusEnteredPanel"
+      >
+        <Teleport to="body">
+          <div
+            v-if="isOpen"
+            ref="panelRef"
+            class="s-popover-panel"
+            :style="floatingStyle"
+            :data-placement="resolvedPlacement"
+            :data-surface="surface"
+            :data-width="width"
+            tabindex="-1"
+            role="dialog"
+            :id="panelId"
+            :aria-label="ariaLabel"
+            @keydown.tab="handlePanelTab"
+            @focusout="handlePanelFocusout"
+          >
+            <div class="s-popover-content">
+              <slot name="panel" :close="closeExplicitly" />
+            </div>
+          </div>
+        </Teleport>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  computed,
+  ref,
+  onMounted,
+  onUpdated,
+  onBeforeUnmount,
+  nextTick,
+  useId,
+  useSlots,
+  watch,
+  type Component,
+} from 'vue';
+import SButton, {
+  type SButtonAppearance,
+  type SButtonContentAlign,
+  type SButtonSeverity,
+  type SButtonShape,
+  type SButtonSize,
+  type SButtonWidth,
+} from '../controls/SButton.vue';
+import { useFloatingPosition, type FloatingPlacement } from '../../../composables/useFloatingPosition';
+import { findRelativeTabTarget, getFocusableElements } from '../../../internal/focusNavigation';
+import { resolveInteractiveElement } from '../../../internal/interactiveElement';
+import { registerLayer, type LayerRegistration } from '../../../internal/layerStack';
+import { useOwnedAttrs } from '../../../internal/ownedAttrs';
+import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract';
+import type {
+  SPopoverDefaultSlotProps,
+  SPopoverPanelSlotProps,
+  SPopoverPublicApi,
+  SPopoverTriggerActivation,
+  SPopoverTriggerBinding,
+  SPopoverTriggerRefTarget,
+  SPopoverTriggerSlotProps,
+} from './popover';
+
+export interface Props {
+  align?: 'left' | 'right' | 'center';
+  surface?: 'default' | 'transparent';
+  width?: 'trigger' | 'content' | 'sm' | 'md' | 'lg';
+  ariaLabel?: string;
+  triggerAppearance?: SButtonAppearance;
+  triggerSize?: SButtonSize;
+  triggerWidth?: SButtonWidth;
+  triggerContentAlign?: SButtonContentAlign;
+  triggerShape?: SButtonShape;
+  triggerLabel?: string;
+  triggerLeadingIcon?: Component;
+  triggerTrailingIcon?: Component;
+  triggerIconOnly?: boolean;
+  triggerSeverity?: SButtonSeverity;
+  triggerBadge?: string | number;
+  triggerTitle?: string;
+  triggerAriaLabel?: string;
+  triggerTestId?: string;
+  disabled?: boolean;
+  /**
+   * Управляемая видимость; без prop owner хранит toggle-state сам.
+   * Controlled visibility; omit to use the owner's internal toggle state.
+   */
+  open?: boolean;
+}
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<Props>(), {
+  align: 'right',
+  surface: 'default',
+  width: 'trigger',
+  ariaLabel: 'Дополнительные действия',
+  triggerAppearance: 'ghost',
+  triggerSize: 'md',
+  triggerWidth: 'full',
+  triggerContentAlign: 'center',
+  triggerShape: 'default',
+  triggerLabel: undefined,
+  triggerLeadingIcon: undefined,
+  triggerTrailingIcon: undefined,
+  triggerIconOnly: false,
+  triggerSeverity: 'secondary',
+  triggerBadge: undefined,
+  triggerTitle: undefined,
+  triggerAriaLabel: undefined,
+  triggerTestId: undefined,
+  disabled: false,
+  open: undefined,
+});
+const emit = defineEmits<{
+  (e: 'update:open', value: boolean): void;
+}>();
+defineSlots<{
+  trigger?: (props: SPopoverTriggerSlotProps) => unknown;
+  default?: (props: SPopoverDefaultSlotProps) => unknown;
+  panel: (props: SPopoverPanelSlotProps) => unknown;
+}>();
+
+type CloseReason = 'explicit' | 'escape' | 'outside' | 'tab' | 'trigger';
+
+const BUILT_IN_TRIGGER_ID = 'built-in';
+const slots = useSlots();
+const rootAttrs = useOwnedAttrs({ component: 'SPopover', owner: 'root wrapper' });
+if (slots.trigger && slots.default) {
+  throw new Error(
+    'SPopover: default slot is reserved for built-in SButton content and cannot be combined with #trigger; move popover content to #panel',
+  );
+}
+if (!slots.panel) {
+  throw new Error('SPopover: #panel slot is required');
+}
+
+const controlledMode = props.open !== undefined;
+const uncontrolledOpen = ref(false);
+const isOpen = computed(() => props.open ?? uncontrolledOpen.value);
+useInteractiveLeafRegistration({ owner: 'SPopover', active: () => isOpen.value });
+const panelId = `s-popover-panel-${useId()}`;
+const activeTriggerId = ref<string | null>(null);
+const layerZIndex = ref('var(--s-layer-floating)');
+const resolvedTriggerAriaLabel = computed(() =>
+  props.triggerAriaLabel ?? (
+    props.triggerIconOnly || (!props.triggerLabel && !slots.default)
+      ? props.ariaLabel
+      : undefined
+  ),
+);
+let layerRegistration: LayerRegistration | null = null;
+let pendingCloseReason: CloseReason | null = null;
+const placement = computed<FloatingPlacement>(() => {
+  if (props.align === 'left') return 'bottom-start';
+  if (props.align === 'center') return 'bottom-center';
+  return 'bottom-end';
+});
+const {
+  anchorRef: triggerRef,
+  panelRef,
+  floatingStyle,
+  resolvedPlacement,
+  updatePosition,
+} = useFloatingPosition({
+  active: isOpen,
+  placement: () => placement.value,
+  offset: () => 6,
+  boundaryPadding: () => 8,
+  flip: () => true,
+  shift: () => true,
+  widthMatch: () => props.width === 'trigger' ? 'min' : 'none',
+  zIndex: () => layerZIndex.value,
+  scrollStrategy: 'reposition',
+});
+
+class TriggerRecord {
+  target: SPopoverTriggerRefTarget = null;
+  readonly binding: SPopoverTriggerBinding;
+
+  constructor(
+    readonly id: string,
+    readonly activation: SPopoverTriggerActivation,
+  ) {
+    this.binding = {
+      ref: (target) => assignTriggerElement(this, target),
+      get ['aria-expanded']() {
+        return isOpen.value && activeTriggerId.value === id;
+      },
+      get disclosure(): SPopoverTriggerBinding['disclosure'] {
+        return {
+          expanded: isOpen.value && activeTriggerId.value === id,
+          controls: panelId,
+          iconPlacement: 'none',
+        };
+      },
+      'aria-haspopup': 'dialog',
+      'aria-controls': panelId,
+      onClick: (event) => activateBoundTrigger(this, event),
+    };
+  }
+
+  element(): HTMLElement | null {
+    return resolveTriggerElement(this.target, this.id);
+  }
+}
+
+const triggerRecords = new Map<string, TriggerRecord>();
+
+function requireTriggerId(triggerId: string): void {
+  if (triggerId.length === 0 || triggerId.trim() !== triggerId) {
+    throw new Error('SPopover: trigger id must be a non-empty string without surrounding whitespace');
+  }
+}
+
+function resolveTriggerElement(target: SPopoverTriggerRefTarget, triggerId: string): HTMLElement | null {
+  return resolveInteractiveElement(`SPopover: trigger "${triggerId}"`, target);
+}
+
+function assignTriggerElement(record: TriggerRecord, target: SPopoverTriggerRefTarget): void {
+  if (target === null) {
+    record.target = null;
+    return;
+  }
+  if (record.target && record.target !== target) {
+    throw new Error(`SPopover: trigger id "${record.id}" is bound to multiple elements`);
+  }
+  for (const existing of triggerRecords.values()) {
+    if (existing !== record && existing.target === target) {
+      throw new Error(
+        `SPopover: one trigger element cannot use both "${existing.id}" and "${record.id}" ids`,
+      );
+    }
+  }
+  record.target = target;
+}
+
+function bindTrigger(
+  triggerId: string,
+  activation: SPopoverTriggerActivation = 'toggle',
+): SPopoverTriggerBinding {
+  requireTriggerId(triggerId);
+  const existing = triggerRecords.get(triggerId);
+  if (existing) {
+    if (existing.activation !== activation) {
+      throw new Error(
+        `SPopover: trigger "${triggerId}" activation cannot change from "${existing.activation}" to "${activation}"`,
+      );
+    }
+    return existing.binding;
+  }
+  const record = new TriggerRecord(triggerId, activation);
+  triggerRecords.set(triggerId, record);
+  return record.binding;
+}
+
+const builtInTriggerBinding = slots.trigger
+  ? undefined
+  : bindTrigger(BUILT_IN_TRIGGER_ID);
+
+function completeBindingError(triggerId: string): Error {
+  return new Error(
+    `SPopover: custom trigger "${triggerId}" must apply the complete object returned by bindTrigger()`,
+  );
+}
+
+function assertTriggerBinding(record: TriggerRecord): HTMLElement {
+  const element = record.element();
+  if (!element) {
+    throw completeBindingError(record.id);
+  }
+  if (slots.trigger && !(element instanceof HTMLButtonElement)) {
+    throw new Error(
+      `SPopover: custom trigger "${record.id}" must bind directly to a button element, not to a wrapper`,
+    );
+  }
+  if (
+    element.getAttribute('aria-haspopup') !== 'dialog'
+    || element.getAttribute('aria-controls') !== panelId
+    || element.getAttribute('aria-expanded') !== String(isOpen.value && activeTriggerId.value === record.id)
+  ) {
+    throw completeBindingError(record.id);
+  }
+  return element;
+}
+
+function validateMountedTriggerContract(): void {
+  if (triggerRecords.size === 0) {
+    throw new Error('SPopover: #trigger must apply a binding returned by bindTrigger()');
+  }
+  for (const record of triggerRecords.values()) {
+    assertTriggerBinding(record);
+  }
+}
+
+function registeredTriggerIds(): string[] {
+  return [...triggerRecords.values()]
+    .filter((record) => record.element()?.isConnected)
+    .map((record) => record.id)
+    .sort((left, right) => left.localeCompare(right));
+}
+
+function resolveOpenTrigger(triggerId?: string): TriggerRecord {
+  if (triggerId !== undefined) {
+    requireTriggerId(triggerId);
+    const record = triggerRecords.get(triggerId);
+    if (!record?.element()?.isConnected) {
+      throw new Error(`SPopover: programmatic open requires a registered trigger with id "${triggerId}"`);
+    }
+    assertTriggerBinding(record);
+    return record;
+  }
+
+  const ids = registeredTriggerIds();
+  if (ids.length === 0) {
+    throw new Error('SPopover: programmatic open requires one registered trigger anchor');
+  }
+  if (ids.length > 1) {
+    throw new Error(
+      `SPopover: programmatic open is ambiguous; pass one of the registered trigger ids: ${ids.map((id) => `"${id}"`).join(', ')}`,
+    );
+  }
+  const [onlyId] = ids;
+  if (!onlyId) {
+    throw new Error('SPopover: registered trigger inventory is unexpectedly empty');
+  }
+  const record = triggerRecords.get(onlyId);
+  if (!record) {
+    throw new Error('SPopover: registered trigger invariant failed');
+  }
+  assertTriggerBinding(record);
+  return record;
+}
+
+function selectAnchor(record: TriggerRecord): HTMLElement {
+  const element = assertTriggerBinding(record);
+  activeTriggerId.value = record.id;
+  triggerRef.value = element;
+  return element;
+}
+
+function registerOpenLayer(restoreTarget: HTMLElement): void {
+  layerRegistration?.unregister({ restoreFocus: false });
+  layerRegistration = registerLayer({
+    kind: 'popover',
+    root: () => panelRef.value,
+    anchor: () => triggerRef.value,
+    branches: () => [...triggerRecords.values()]
+      .map((record) => record.element())
+      .filter((element): element is HTMLElement => Boolean(element?.isConnected)),
+    restoreTarget,
+    requestDismiss: (reason) => closePopover(reason === 'escape' ? 'escape' : 'outside'),
+  });
+  layerZIndex.value = layerRegistration.zIndex;
+}
+
+function resolveCurrentOpenTrigger(): TriggerRecord {
+  if (activeTriggerId.value !== null) {
+    const activeRecord = triggerRecords.get(activeTriggerId.value);
+    if (activeRecord?.element()?.isConnected) return activeRecord;
+  }
+  return resolveOpenTrigger();
+}
+
+function activateOpenState(record: TriggerRecord = resolveCurrentOpenTrigger()): void {
+  const anchor = selectAnchor(record);
+  registerOpenLayer(anchor);
+  nextTick(updatePosition);
+}
+
+function focusEnteredPanel(element: Element): void {
+  if (!(element instanceof HTMLElement)) {
+    throw new Error('SPopover: transition enter target must be an HTMLElement');
+  }
+  if (isOpen.value) element.focus();
+}
+
+function deactivateOpenState(reason: CloseReason): void {
+  const shouldRestoreFocus = reason === 'explicit' || reason === 'escape' || reason === 'trigger';
+  layerRegistration?.unregister({ restoreFocus: shouldRestoreFocus });
+  layerRegistration = null;
+  layerZIndex.value = 'var(--s-layer-floating)';
+}
+
+function assertControlMode(): void {
+  if ((props.open !== undefined) !== controlledMode) {
+    throw new Error('SPopover: open control mode cannot change after mount');
+  }
+}
+
+function activateBoundTrigger(record: TriggerRecord, _event: MouseEvent): void {
+  if (record.activation === 'manual') {
+    selectAnchor(record);
+    if (isOpen.value) {
+      nextTick(updatePosition);
+    }
+    return;
+  }
+  if (isOpen.value && activeTriggerId.value === record.id) {
+    closePopover('trigger');
+    return;
+  }
+  if (isOpen.value) {
+    const anchor = selectAnchor(record);
+    registerOpenLayer(anchor);
+    nextTick(updatePosition);
+    return;
+  }
+  openPopover(record.id);
+}
+
+function openPopover(triggerId?: string): void {
+  if (!isOpen.value && !props.disabled) {
+    const record = resolveOpenTrigger(triggerId);
+    selectAnchor(record);
+    emit('update:open', true);
+    if (controlledMode) return;
+    activateOpenState(record);
+    uncontrolledOpen.value = true;
+    return;
+  }
+  if (isOpen.value && triggerId !== undefined && triggerId !== activeTriggerId.value) {
+    const record = resolveOpenTrigger(triggerId);
+    const anchor = selectAnchor(record);
+    registerOpenLayer(anchor);
+    nextTick(updatePosition);
+  }
+}
+function closePopover(reason: CloseReason = 'explicit'): void {
+  const wasOpen = isOpen.value;
+  if (wasOpen) {
+    pendingCloseReason = reason;
+    emit('update:open', false);
+    if (controlledMode) return;
+    uncontrolledOpen.value = false;
+    deactivateOpenState(reason);
+    pendingCloseReason = null;
+  }
+}
+
+function closeExplicitly(): void {
+  closePopover('explicit');
+}
+
+function handlePanelTab(event: KeyboardEvent): void {
+  const panel = panelRef.value;
+  const anchor = triggerRef.value;
+  if (!panel || !anchor) return;
+  const focusable = getFocusableElements(panel);
+  const active = document.activeElement;
+  const first = focusable[0];
+  const last = focusable.at(-1);
+  const leavesPanel = focusable.length === 0
+    || (event.shiftKey ? active === panel || active === first : active === last);
+  if (!leavesPanel) return;
+  const scope = layerRegistration?.focusScope() ?? document;
+  const target = findRelativeTabTarget(anchor, scope, panel, event.shiftKey);
+  event.preventDefault();
+  closePopover('tab');
+  if (target) void nextTick(() => target.focus());
+}
+
+function handlePanelFocusout(event: FocusEvent): void {
+  if (!isOpen.value) return;
+  const nextTarget = event.relatedTarget;
+  if (nextTarget instanceof Node) {
+    if (panelRef.value?.contains(nextTarget)) return;
+    const isTrigger = [...triggerRecords.values()].some((record) => record.element()?.contains(nextTarget));
+    if (isTrigger) return;
+  }
+  closePopover('outside');
+}
+
+onMounted(() => {
+  validateMountedTriggerContract();
+  if (isOpen.value) activateOpenState();
+});
+onUpdated(() => {
+  assertControlMode();
+});
+watch(
+  () => props.open,
+  (open) => {
+    assertControlMode();
+    if (open) {
+      activateOpenState();
+      return;
+    }
+    deactivateOpenState(pendingCloseReason ?? 'explicit');
+    pendingCloseReason = null;
+  },
+  { flush: 'post' },
+);
+onBeforeUnmount(() => {
+  layerRegistration?.unregister({ restoreFocus: false });
+  layerRegistration = null;
+});
+
+defineExpose<SPopoverPublicApi>({
+  open: openPopover,
+  close: closeExplicitly,
+});
+</script>
+
+<style lang="postcss" src="./SPopover.css" scoped></style>

package/src/components/shared/containers/SSidebarGroup.css

@@ -0,0 +1,12 @@
+@reference "../../../styles/reference.css";
+
+.s-sidebar-group {
+  @apply w-full;
+  @apply flex flex-col;
+  @apply min-h-0;
+  @apply flex-grow;
+  @apply overflow-hidden;
+}
+
+/* Этот файл определяет базовый flex-контейнер для группы секций. */
+