@pgcorp/ui-kit 0.1.0

package/src/components/shared/navigation/STab.vue

@@ -0,0 +1,363 @@
+<template>
+  <SContextMenu
+    :items="contextMenuItems ?? []"
+    :enabled="hasContextMenu"
+    :trigger="contextMenuTrigger"
+    boundary-layout="contents"
+    @select="$emit('context-menu-select', $event)"
+  >
+    <div
+      v-bind="ownedAttrs.bindings()"
+      class="s-tab-container"
+      :class="{ 's-tab-container--selected': state.active }"
+      :data-close-mode="ctx.closeButtonMode.value"
+      :data-disabled="state.disabled || undefined"
+      :data-editing="editing || undefined"
+      :style="containerStyle"
+      role="presentation"
+    >
+      <button
+        ref="tabButtonRef"
+        class="s-tab__trigger"
+        type="button"
+        :style="{ visibility: editing ? 'hidden' : undefined }"
+        :disabled="disabled"
+        :title="title"
+        :aria-hidden="editing || undefined"
+        :aria-selected="state.active"
+        :aria-controls="state.panelId"
+        :aria-label="ariaLabel"
+        :id="state.tabId"
+        :tabindex="editing ? -1 : state.tabIndex"
+        :data-editing="editing || undefined"
+        role="tab"
+        @click="ctx.activateTab(registrationKey)"
+        @focus="ctx.focusTab(registrationKey)"
+        @keydown="ctx.handleTabKeydown(registrationKey, $event)"
+      >
+        <PassiveContentBoundary :contract="passiveContentContract">
+          <span
+            v-if="$slots.leading"
+            class="s-tab__leading"
+            :aria-hidden="leadingDecorative ? 'true' : undefined"
+          >
+            <slot name="leading" />
+          </span>
+          <span v-if="$slots.default" class="s-tab__label">
+            <slot />
+          </span>
+          <span
+            v-if="$slots.trailing"
+            class="s-tab__trailing"
+            :aria-hidden="trailingDecorative ? 'true' : undefined"
+          >
+            <slot name="trailing" />
+          </span>
+        </PassiveContentBoundary>
+      </button>
+
+      <div v-if="editing && $slots.editor" class="s-tab__editor" @click.stop @dblclick.stop>
+        <slot name="editor" />
+      </div>
+
+      <div
+        v-if="hasSiblingActions"
+        ref="actionsRef"
+        class="s-tab__sibling-actions"
+        @click.stop
+        @dblclick.stop
+        @mousedown.stop
+      >
+        <slot name="actions" />
+        <span v-if="$slots.close" class="s-tab__close">
+          <slot name="close" />
+        </span>
+      </div>
+    </div>
+  </SContextMenu>
+</template>
+
+<script setup lang="ts">
+import {
+  computed,
+  inject,
+  onBeforeUnmount,
+  onMounted,
+  onUpdated,
+  ref,
+  type VNodeChild,
+} from 'vue'
+import SContextMenu from '../controls/SContextMenu.vue'
+import type { SMenuEntry, SMenuSelectableEntry } from '../controls/menu'
+import { tabsContextKey, type STabsContext } from '../_internal/tabsContext'
+import {
+  PassiveContentBoundary,
+  useInteractiveLeafRegistration,
+  type PassiveContentContract,
+} from '../../../internal/passiveContentContract'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+/**
+ * Публичный контракт участника STabs; selection, IDs и keyboard принадлежат owner STabs.
+ * Public STabs participant contract; selection, IDs, and keyboard behavior belong to STabs.
+ */
+export interface Props {
+  /** Единственная stable identity selection и panel inventory. / Sole stable selection and panel-inventory identity. */
+  name: string
+  /** Исключает вкладку из активации и roving focus. / Excludes the tab from activation and roving focus. */
+  disabled?: boolean
+  /** Нативная подсказка tab trigger. / Native tab-trigger tooltip. */
+  title?: string
+  /** Явное accessible name для icon-only content. / Explicit accessible name for icon-only content. */
+  ariaLabel?: string
+  /** Показывает editor sibling и исключает trigger из tab order. / Shows the sibling editor and removes the trigger from tab order. */
+  editing?: boolean
+  /** Скрывает leading slot от accessibility tree, когда он декоративный. / Hides a decorative leading slot from the accessibility tree. */
+  leadingDecorative?: boolean
+  /** Скрывает trailing slot от accessibility tree, когда он декоративный. / Hides a decorative trailing slot from the accessibility tree. */
+  trailingDecorative?: boolean
+  /** Контекстные действия, размещаемые на внешнем host, а не внутри trigger. / Context actions hosted outside the tab trigger. */
+  contextMenuItems?: readonly SMenuEntry[]
+  /** Событие открытия контекстного меню. / Context-menu opening gesture. */
+  contextMenuTrigger?: 'contextmenu' | 'click' | 'both'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  title: undefined,
+  ariaLabel: undefined,
+  editing: false,
+  leadingDecorative: true,
+  trailingDecorative: true,
+  contextMenuItems: undefined,
+  contextMenuTrigger: 'contextmenu',
+})
+defineEmits<{
+  'context-menu-select': [entry: SMenuSelectableEntry]
+}>()
+const ownedAttrs = useOwnedAttrs({ component: 'STab', owner: 'tab participant container' })
+const slots = defineSlots<{
+  /** Основная метка вкладки. / Primary tab label. */
+  default?: () => VNodeChild
+  /** Leading content; decorative by default. / Leading content; decorative by default. */
+  leading?: () => VNodeChild
+  /** Trailing content; decorative by default. / Trailing content; decorative by default. */
+  trailing?: () => VNodeChild
+  /** Focusable actions rendered as trigger siblings. / Focusable actions rendered as trigger siblings. */
+  actions?: () => VNodeChild
+  /** Close action rendered as a trigger sibling. / Close action rendered as a trigger sibling. */
+  close?: () => VNodeChild
+  /** Rename/editor control rendered as a trigger sibling. / Rename/editor control rendered as a trigger sibling. */
+  editor?: () => VNodeChild
+}>()
+
+const maybeCtx = inject<STabsContext>(tabsContextKey)
+if (!maybeCtx) {
+  throw new Error(
+    'STab должен использоваться внутри STabs. / STab must be used inside STabs.',
+  )
+}
+const ctx = maybeCtx
+
+const tabButtonRef = ref<HTMLButtonElement | null>(null)
+const actionsRef = ref<HTMLElement | null>(null)
+const siblingActionsWidth = ref(0)
+let actionsResizeObserver: ResizeObserver | null = null
+let observedActionsElement: HTMLElement | null = null
+
+useInteractiveLeafRegistration({ owner: 'STab' })
+const passiveContentContract: PassiveContentContract = {
+  owner: 'STab',
+  region: 'passive tab trigger content',
+  guidance: 'Передайте focusable controls через actions, close или editor slot. / Use the actions, close, or editor slot for focusable controls.',
+}
+
+const tabElement = (): HTMLElement | null => {
+  return tabButtonRef.value
+}
+
+const registrationKey = ctx.registerTab({
+  tabKey: props.name,
+  disabled: () => props.disabled,
+  element: tabElement,
+})
+
+const state = computed(() => ctx.getTabState(registrationKey))
+const hasSiblingActions = computed(() => Boolean(slots.actions || slots.close))
+const hasContextMenu = computed(() => Boolean(props.contextMenuItems?.length))
+const containerStyle = computed(() => {
+  const siblingSpace = hasSiblingActions.value ? siblingActionsWidth.value : 0
+  const basePaddingInline = 'var(--s-tab-base-padding-inline)'
+  const paddingInlineEnd = ctx.closeButtonMode.value === 'overlay' && siblingSpace > 0
+    ? `calc(${basePaddingInline} + ${siblingSpace}px + var(--s-tab-sibling-actions-gap))`
+    : basePaddingInline
+  return {
+    '--s-tab-sibling-actions-space': `${siblingSpace}px`,
+    '--s-tab-padding-inline-start': basePaddingInline,
+    '--s-tab-padding-inline-end': paddingInlineEnd,
+  }
+})
+
+function updateSiblingActionsWidth(): void {
+  siblingActionsWidth.value = actionsRef.value?.offsetWidth ?? 0
+}
+
+function syncActionsResizeObserver(): void {
+  const nextElement = actionsRef.value
+  if (observedActionsElement === nextElement) return
+  actionsResizeObserver?.disconnect()
+  actionsResizeObserver = null
+  observedActionsElement = nextElement
+  if (typeof ResizeObserver !== 'undefined' && nextElement) {
+    actionsResizeObserver = new ResizeObserver(updateSiblingActionsWidth)
+    actionsResizeObserver.observe(nextElement)
+  }
+}
+
+onMounted(() => {
+  updateSiblingActionsWidth()
+  syncActionsResizeObserver()
+  ctx.notifyTabOrderChanged()
+})
+
+onUpdated(() => {
+  if (props.name !== registrationKey) {
+    throw new Error('STab: name is immutable for the lifetime of a mounted participant')
+  }
+  updateSiblingActionsWidth()
+  syncActionsResizeObserver()
+  ctx.notifyTabOrderChanged()
+})
+
+onBeforeUnmount(() => {
+  actionsResizeObserver?.disconnect()
+  observedActionsElement = null
+  ctx.unregisterTab(registrationKey)
+})
+</script>
+
+<style lang="postcss" scoped>
+@reference "../../../styles/reference.css";
+
+.s-tab-container {
+  @apply relative box-border inline-flex min-w-0 flex-none items-center whitespace-nowrap;
+  flex: var(--s-tab-flex);
+  width: var(--s-tab-width);
+  min-width: var(--s-tab-min-width);
+  max-width: var(--s-tab-max-width);
+  height: var(--s-tab-row-height);
+  border-bottom: var(--s-tab-indicator-width) solid transparent;
+  border-radius: var(--s-tab-radius);
+  overflow: hidden;
+}
+
+.s-tab-container--selected {
+  border-color: var(--s-tab-selected-border-color);
+}
+
+.s-tab__trigger {
+  @apply relative inline-flex min-w-0 flex-1 items-center justify-center border-0 bg-transparent text-sm font-medium leading-5;
+  align-self: stretch;
+  width: 100%;
+  min-height: var(--s-tab-trigger-min-height);
+  margin: 0;
+  padding-block-start: calc(var(--s-tab-padding-block) + var(--s-tab-content-offset-y));
+  padding-block-end: var(--s-tab-padding-block);
+  padding-inline-start: var(--s-tab-padding-inline-start);
+  padding-inline-end: var(--s-tab-padding-inline-end);
+  border-radius: inherit;
+  color: var(--s-tab-color);
+  cursor: pointer;
+  flex-direction: var(--s-tab-direction);
+  gap: var(--s-tab-gap);
+  font-family: inherit;
+  text-align: center;
+  touch-action: manipulation;
+  transition:
+    background-color var(--s-motion-fast) ease,
+    color var(--s-motion-fast) ease,
+    transform var(--s-motion-fast) ease;
+  appearance: none;
+}
+
+.s-tab__trigger:hover:not(:disabled) {
+  background-color: var(--s-tab-hover-background);
+  color: var(--s-tab-hover-color);
+}
+
+.s-tab__trigger[aria-selected='true'] {
+  color: var(--s-tab-selected-color);
+}
+
+.s-tab__trigger:focus-visible {
+  z-index: 1;
+  outline: var(--s-focus-ring-width) solid var(--s-focus-ring-color);
+  outline-offset: var(--s-focus-ring-inset-offset);
+}
+
+.s-tab__trigger:active:not(:disabled) {
+  transform: translateY(var(--s-tab-active-translate-y));
+}
+
+.s-tab__trigger:disabled {
+  color: var(--s-tab-disabled-color);
+  cursor: not-allowed;
+  opacity: var(--s-tab-disabled-opacity);
+}
+
+:global(.dark) .s-tab__trigger {
+  color: var(--s-tab-color);
+}
+
+:global(.dark) .s-tab__trigger:hover:not(:disabled) {
+  background-color: var(--s-tab-hover-background);
+  color: var(--s-tab-hover-color);
+}
+
+:global(.dark) .s-tab__trigger[aria-selected='true'] {
+  color: var(--s-tab-selected-color);
+}
+
+:global(.dark) .s-tab__trigger:disabled {
+  color: var(--s-tab-disabled-color);
+}
+
+.s-tab__leading,
+.s-tab__trailing,
+.s-tab__close {
+  @apply inline-flex shrink-0 items-center;
+}
+
+.s-tab__label {
+  display: var(--s-tab-label-display);
+  flex: var(--s-tab-label-flex);
+  min-width: 0;
+  overflow: hidden;
+  font-size: var(--s-tab-label-size);
+  line-height: var(--s-tab-label-line-height);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.s-tab__sibling-actions {
+  @apply inline-flex shrink-0 items-center gap-0.5;
+  z-index: var(--s-layer-sticky);
+}
+
+.s-tab-container[data-close-mode='overlay'] .s-tab__sibling-actions {
+  @apply absolute inset-y-0 right-0;
+}
+
+.s-tab-container[data-editing='true'] .s-tab__editor {
+  padding-right: calc(var(--s-tab-sibling-actions-space) + var(--s-tab-sibling-actions-gap));
+}
+
+.s-tab__editor {
+  @apply absolute inset-0 z-0 flex min-w-0 items-center;
+}
+
+</style>