@pgcorp/ui-kit 0.1.0

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

@@ -0,0 +1,442 @@
+<template>
+  <div
+    v-if="placement === 'top'"
+    v-bind="ownedAttrs.bindings()"
+    class="s-tabs-header"
+    data-tabs-part="header"
+    :data-placement="placement"
+    :data-position="headerPosition"
+    :data-inset="inset"
+    :data-divider="divider"
+    :class="{
+      's-tabs-header--dividerless': !divider,
+    }"
+  >
+    <div class="s-tabs-header__content" :style="{ paddingRight: controlsPadding }">
+      <div
+        ref="tabListWrapperRef"
+        class="s-tab-list-wrapper"
+        :class="scrollClasses"
+        @wheel.passive="onWheelTabList"
+      >
+        <div
+          ref="tabListRef"
+          class="s-tab-list"
+          @scroll.passive="updateScrollState"
+        >
+          <div
+            v-if="$slots.leading"
+            class="s-tab-list__leading"
+            :role="leadingAriaLabel ? 'group' : undefined"
+            :aria-label="leadingAriaLabel"
+          >
+            <slot name="leading" />
+          </div>
+          <div
+            class="s-tab-list__tabs"
+            :id="tabListId"
+            role="tablist"
+            :aria-label="ariaLabel"
+            aria-orientation="horizontal"
+          >
+            <slot />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      v-if="$slots.controls"
+      ref="controlsRef"
+      class="s-tabs-header__controls"
+      role="group"
+      :aria-label="controlsAriaLabel"
+    >
+      <slot name="controls" />
+    </div>
+  </div>
+  <div
+    v-else
+    v-bind="ownedAttrs.bindings()"
+    ref="tabListWrapperRef"
+    class="s-tab-list-wrapper"
+    :data-placement="placement"
+    :data-inset="inset"
+    :data-divider="divider"
+    :class="scrollClasses"
+    @wheel.passive="onWheelTabList"
+  >
+    <div
+      ref="tabListRef"
+      class="s-tab-list s-tab-list--bottom"
+      :style="{ paddingRight: controlsPadding }"
+      @scroll.passive="updateScrollState"
+    >
+      <div
+        v-if="$slots.leading"
+        class="s-tab-list__leading"
+        :role="leadingAriaLabel ? 'group' : undefined"
+        :aria-label="leadingAriaLabel"
+      >
+        <slot name="leading" />
+      </div>
+      <div
+        class="s-tab-list__tabs"
+        :id="tabListId"
+        role="tablist"
+        :aria-label="ariaLabel"
+        aria-orientation="horizontal"
+      >
+        <slot />
+      </div>
+    </div>
+    <div
+      v-if="$slots.controls"
+      ref="controlsRef"
+      class="s-tabs-header__controls"
+      role="group"
+      :aria-label="controlsAriaLabel"
+    >
+      <slot name="controls" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  computed,
+  inject,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  onUpdated,
+  ref,
+  watch,
+  type VNodeChild,
+} from 'vue'
+import {
+  tabsContextKey,
+  type STabsContext,
+} from '../_internal/tabsContext'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+/**
+ * Публичный layout/overflow owner для tablist и внешних action regions.
+ * Public layout and overflow owner for the tablist and external action regions.
+ */
+export interface Props {
+  /** Размещение list относительно panels. / List placement relative to panels. */
+  placement?: 'top' | 'bottom'
+  /** Показывает разделитель header. / Shows the header divider. */
+  divider?: boolean
+  /** Добавляет внутренний inline inset для scroll row. / Adds an inline inset to the scroll row. */
+  inset?: 'none' | 'compact' | 'content'
+  /** Sticky фиксирует header в scroll owner, static оставляет его в потоке. / Sticky pins the header in its scroll owner; static keeps it in flow. */
+  headerPosition?: 'sticky' | 'static'
+  /** Accessible name role=tablist. / Accessible name for role=tablist. */
+  ariaLabel?: string
+  /** Стабильный id tablist для aria-controls внешних owners. / Stable tablist id for external aria-controls owners. */
+  tabListId?: string
+  /** Accessible name leading controls; включает role=group. / Accessible name for leading controls; enables role=group. */
+  leadingAriaLabel?: string
+  /** Accessible name header actions. / Accessible name for header actions. */
+  controlsAriaLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placement: 'top',
+  divider: true,
+  inset: 'none',
+  headerPosition: 'sticky',
+  ariaLabel: 'Вкладки',
+  tabListId: undefined,
+  leadingAriaLabel: undefined,
+  controlsAriaLabel: 'Действия вкладок',
+})
+
+watch(
+  () => props.tabListId,
+  (tabListId) => {
+    if (tabListId !== undefined && (!tabListId.trim() || tabListId !== tabListId.trim())) {
+      throw new TypeError('STabList: tabListId must be a non-empty string without surrounding whitespace')
+    }
+  },
+  { immediate: true },
+)
+
+defineSlots<{
+  /** STab compositions, зарегистрированные текущим owner. / STab compositions registered by the current owner. */
+  default?: () => VNodeChild
+  /** Controls before tablist semantics. / Controls before tablist semantics. */
+  leading?: () => VNodeChild
+  /** Header actions outside tablist semantics. / Header actions outside tablist semantics. */
+  controls?: () => VNodeChild
+}>()
+const ownedAttrs = useOwnedAttrs({ component: 'STabList', owner: 'active tab-list layout root' })
+useInteractiveLeafRegistration({ owner: 'STabList' })
+
+const maybeCtx = inject<STabsContext>(tabsContextKey)
+if (!maybeCtx) {
+  throw new Error(
+    'STabList должен использоваться внутри STabs. / STabList must be used inside STabs.',
+  )
+}
+const ctx = maybeCtx
+
+const controlsRef = ref<HTMLElement | null>(null)
+const controlsWidth = ref(0)
+const tabListWrapperRef = ref<HTMLElement | null>(null)
+const tabListRef = ref<HTMLElement | null>(null)
+const isScrollable = ref(false)
+const isScrolledToStart = ref(true)
+const isScrolledToEnd = ref(false)
+
+let resizeObserver: ResizeObserver | null = null
+let mutationObserver: MutationObserver | null = null
+let controlsResizeObserver: ResizeObserver | null = null
+let observedControlsElement: HTMLElement | null = null
+const animationFrameIds = new Set<number>()
+
+const controlsPadding = computed(() => {
+  if (!controlsWidth.value) return '0px'
+  return `${controlsWidth.value + 8}px`
+})
+
+const scrollClasses = computed(() => ({
+  'is-scrollable': isScrollable.value,
+  'is-scrolled-to-start': isScrolledToStart.value,
+  'is-scrolled-to-end': isScrolledToEnd.value,
+}))
+
+const getListEl = (): HTMLElement | null => tabListRef.value
+
+const updateControlsWidth = (): void => {
+  controlsWidth.value = controlsRef.value?.offsetWidth ?? 0
+}
+
+const syncControlsResizeObserver = (): void => {
+  const nextElement = controlsRef.value
+  if (nextElement === observedControlsElement) return
+  controlsResizeObserver?.disconnect()
+  controlsResizeObserver = null
+  observedControlsElement = nextElement
+  if (typeof ResizeObserver !== 'undefined' && nextElement) {
+    controlsResizeObserver = new ResizeObserver(updateControlsWidth)
+    controlsResizeObserver.observe(nextElement)
+  }
+}
+
+const scheduleAnimationFrame = (callback: () => void): void => {
+  if (typeof requestAnimationFrame === 'undefined') {
+    callback()
+    return
+  }
+  let frameId = -1
+  let completedSynchronously = false
+  frameId = requestAnimationFrame(() => {
+    completedSynchronously = true
+    if (frameId >= 0) animationFrameIds.delete(frameId)
+    callback()
+  })
+  if (!completedSynchronously) animationFrameIds.add(frameId)
+}
+
+const updateScrollState = (): void => {
+  const element = getListEl()
+  if (!element) return
+
+  const scrollable = element.scrollWidth > element.clientWidth
+  isScrollable.value = scrollable
+  if (scrollable) {
+    isScrolledToStart.value = element.scrollLeft <= 1
+    isScrolledToEnd.value = element.scrollWidth - element.scrollLeft - element.clientWidth <= 1
+    return
+  }
+
+  isScrolledToStart.value = true
+  isScrolledToEnd.value = true
+}
+
+const scrollActiveIntoCenterDom = (): void => {
+  const listElement = getListEl()
+  if (!listElement) return
+  const activeTabElement = ctx.getActiveTabElement()
+  if (!activeTabElement) return
+  const tabCenter = activeTabElement.offsetLeft + activeTabElement.offsetWidth / 2
+  const targetLeft = Math.max(0, tabCenter - listElement.clientWidth / 2)
+  if (typeof listElement.scrollTo === 'function') {
+    listElement.scrollTo({ left: targetLeft, behavior: 'smooth' })
+    return
+  }
+  listElement.scrollLeft = targetLeft
+}
+
+const tabListRegistrationKey = ctx.registerTabList(scrollActiveIntoCenterDom)
+
+const onWheelTabList = (event: WheelEvent): void => {
+  const element = getListEl()
+  if (!element) return
+  const delta = Math.abs(event.deltaY) >= Math.abs(event.deltaX) ? event.deltaY : event.deltaX
+  if (delta === 0) return
+  if (typeof element.scrollBy === 'function') {
+    element.scrollBy({ left: delta, behavior: 'auto' })
+    return
+  }
+  element.scrollLeft += delta
+}
+
+onMounted(() => {
+  updateControlsWidth()
+  syncControlsResizeObserver()
+  void nextTick(() => {
+    updateScrollState()
+    const listElement = getListEl()
+    if (!listElement) return
+    if (typeof ResizeObserver !== 'undefined') {
+      resizeObserver = new ResizeObserver(updateScrollState)
+      resizeObserver.observe(listElement)
+    }
+    if (typeof MutationObserver !== 'undefined') {
+      mutationObserver = new MutationObserver(() => {
+        updateScrollState()
+        scheduleAnimationFrame(scrollActiveIntoCenterDom)
+      })
+      mutationObserver.observe(listElement, {
+        characterData: true,
+        childList: true,
+        subtree: true,
+      })
+    }
+    scheduleAnimationFrame(scrollActiveIntoCenterDom)
+  })
+})
+
+onUpdated(() => {
+  updateControlsWidth()
+  syncControlsResizeObserver()
+})
+
+watch(() => ctx.activeKey.value, () => {
+  void nextTick(() => scheduleAnimationFrame(scrollActiveIntoCenterDom))
+})
+
+defineExpose({
+  scrollActiveIntoCenter: scrollActiveIntoCenterDom,
+})
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect()
+  mutationObserver?.disconnect()
+  controlsResizeObserver?.disconnect()
+  observedControlsElement = null
+  if (typeof cancelAnimationFrame !== 'undefined') {
+    for (const frameId of animationFrameIds) cancelAnimationFrame(frameId)
+  }
+  animationFrameIds.clear()
+  ctx.unregisterTabList(tabListRegistrationKey)
+})
+</script>
+
+<style lang="postcss" scoped>
+@reference "../../../styles/reference.css";
+
+.s-tabs-header {
+  @apply sticky top-0 border-b border-surface-200 dark:border-surface-700;
+  z-index: var(--s-layer-affordance);
+  height: var(--s-tab-row-height);
+  min-height: var(--s-tab-row-height);
+  max-height: var(--s-tab-row-height);
+  background: inherit;
+}
+
+.s-tabs-header--dividerless { border-bottom: 0; }
+.s-tabs-header[data-position='static'] { position: relative; }
+
+[data-inset='compact'] { --s-tab-list-inset-inline: 0.75rem; }
+[data-inset='content'] { --s-tab-list-inset-inline: 1rem; }
+
+@media (min-width: 1024px) {
+  [data-inset='content'] { --s-tab-list-inset-inline: 1.25rem; }
+}
+
+.s-tabs-header__content { @apply h-full; }
+
+.s-tabs-header__controls {
+  @apply absolute inset-y-0 right-0 flex items-center gap-1 px-2;
+  z-index: var(--s-layer-affordance);
+}
+
+.s-tab-list-wrapper {
+  @apply relative h-full shrink-0 overflow-hidden;
+  overscroll-behavior: contain;
+}
+
+.s-tab-list-wrapper[data-placement='bottom'] {
+  height: var(--s-tab-row-height);
+  min-height: var(--s-tab-row-height);
+  max-height: var(--s-tab-row-height);
+}
+
+.s-tab-list-wrapper::before,
+.s-tab-list-wrapper::after {
+  @apply pointer-events-none absolute inset-y-0 opacity-0 transition-opacity;
+  z-index: var(--s-layer-sticky);
+  transition-duration: var(--s-motion-standard);
+  content: '';
+  width: var(--s-tab-overflow-fade-width);
+}
+
+.s-tab-list-wrapper::before {
+  left: 0;
+  background: linear-gradient(to right, var(--s-tab-list-edge-surface), transparent);
+}
+
+.s-tab-list-wrapper::after {
+  right: 0;
+  background: linear-gradient(to left, var(--s-tab-list-edge-surface), transparent);
+}
+
+.s-tab-list-wrapper.is-scrollable:not(.is-scrolled-to-start)::before,
+.s-tab-list-wrapper.is-scrollable:not(.is-scrolled-to-end)::after { opacity: var(--s-tab-overflow-edge-opacity); }
+
+.s-tab-list {
+  @apply flex h-full min-w-0 flex-nowrap items-center overflow-x-auto overflow-y-hidden;
+  padding-right: var(--s-tab-list-inset-inline);
+  padding-left: var(--s-tab-list-inset-inline);
+  scroll-padding-inline: var(--s-tab-list-inset-inline);
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.s-tab-list::-webkit-scrollbar { display: none; }
+.s-tab-list--bottom { @apply justify-between px-2; }
+
+.s-tab-list__leading,
+.s-tab-list__tabs {
+  @apply flex h-full min-w-max flex-none items-center;
+  width: var(--s-tab-list-tabs-width);
+}
+
+.s-tab-list--bottom .s-tab-list__tabs {
+  @apply min-w-full flex-1 justify-between;
+}
+
+.is-scrollable.is-scrolled-to-start:not(.is-scrolled-to-end) .s-tab-list {
+  -webkit-mask-image: linear-gradient(to right, var(--s-tab-overflow-mask-opaque) calc(100% - var(--s-tab-overflow-fade-width)), transparent 100%);
+  mask-image: linear-gradient(to right, var(--s-tab-overflow-mask-opaque) calc(100% - var(--s-tab-overflow-fade-width)), transparent 100%);
+}
+
+.is-scrollable:not(.is-scrolled-to-start).is-scrolled-to-end .s-tab-list {
+  -webkit-mask-image: linear-gradient(to right, transparent 0, var(--s-tab-overflow-mask-opaque) var(--s-tab-overflow-fade-width));
+  mask-image: linear-gradient(to right, transparent 0, var(--s-tab-overflow-mask-opaque) var(--s-tab-overflow-fade-width));
+}
+
+.is-scrollable:not(.is-scrolled-to-start):not(.is-scrolled-to-end) .s-tab-list {
+  -webkit-mask-image: linear-gradient(to right, transparent 0, var(--s-tab-overflow-mask-opaque) var(--s-tab-overflow-fade-width), var(--s-tab-overflow-mask-opaque) calc(100% - var(--s-tab-overflow-fade-width)), transparent 100%);
+  mask-image: linear-gradient(to right, transparent 0, var(--s-tab-overflow-mask-opaque) var(--s-tab-overflow-fade-width), var(--s-tab-overflow-mask-opaque) calc(100% - var(--s-tab-overflow-fade-width)), transparent 100%);
+}
+</style>

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

@@ -0,0 +1,165 @@
+<template>
+  <div
+    v-if="unmount ? state.active : true"
+    v-bind="ownedAttrs.bindings()"
+    ref="panelElement"
+    v-show="unmount ? true : state.active"
+    class="s-tab-panel"
+    :id="state.panelId"
+    :aria-labelledby="state.tabId"
+    :aria-hidden="state.active ? undefined : 'true'"
+    :data-surface="surface"
+    :data-content-gap="contentGap"
+    :data-align="align"
+    :data-padding="padding"
+    :data-overflow="overflow"
+    role="tabpanel"
+    tabindex="0"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  computed,
+  inject,
+  onBeforeUnmount,
+  onMounted,
+  onUpdated,
+  ref,
+  watchEffect,
+  type VNodeChild,
+} from 'vue'
+import { tabsContextKey, type STabsContext } from '../_internal/tabsContext'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+/**
+ * Публичная panel-часть STabs со стабильной ARIA-связью с одноимённой вкладкой.
+ * Public STabs panel part with a stable ARIA relationship to the matching tab.
+ */
+export interface Props {
+  /** Точная stable identity соответствующего STab. / Exact stable identity of the matching STab. */
+  name: string
+  /** Удаляет неактивное содержимое из DOM вместо v-show. / Removes inactive content from the DOM instead of using v-show. */
+  unmount?: boolean
+  /** Владеющая layout-поверхность панели. / Layout surface owned by the panel. */
+  surface?: 'default' | 'workbench-right-drawer' | 'workbench-bottom-dock'
+  /** Семантический интервал между непосредственными участниками. / Semantic gap between direct participants. */
+  contentGap?: 'none' | 'control' | 'content' | 'section' | 'panel'
+  /** Поперечное выравнивание участников панели. / Cross-axis alignment of panel participants. */
+  align?: 'stretch' | 'start' | 'center' | 'end'
+  /** Семантический внутренний отступ panel surface. / Semantic panel-surface padding. */
+  padding?: 'none' | 'control' | 'content' | 'section' | 'panel'
+  /** Политика переполнения panel surface. / Panel-surface overflow policy. */
+  overflow?: 'visible' | 'hidden' | 'auto'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  unmount: false,
+  surface: 'default',
+  contentGap: 'none',
+  align: 'stretch',
+  padding: 'none',
+  overflow: 'visible',
+})
+const ownedAttrs = useOwnedAttrs({ component: 'STabPanel', owner: 'mounted role=tabpanel root' })
+defineSlots<{
+  /** Содержимое панели. / Panel content. */
+  default?: () => VNodeChild
+}>()
+
+const maybeCtx = inject<STabsContext>(tabsContextKey)
+if (!maybeCtx) {
+  throw new Error(
+    'STabPanel должен использоваться внутри STabs. / STabPanel must be used inside STabs.',
+  )
+}
+const ctx = maybeCtx
+const panelElement = ref<HTMLElement | null>(null)
+const registrationKey = ctx.registerPanel({
+  tabKey: props.name,
+  element: () => panelElement.value,
+})
+const state = computed(() => ctx.getPanelState(registrationKey))
+useInteractiveLeafRegistration({ owner: 'STabPanel', active: () => state.value.active })
+
+watchEffect(() => {
+  if (props.unmount && !state.value.active) {
+    ownedAttrs.reject('inactive unmounted tab panel has no DOM owner')
+    return
+  }
+  ownedAttrs.bindings()
+})
+
+onMounted(ctx.notifyPanelOrderChanged)
+onUpdated(() => {
+  if (props.name !== registrationKey) {
+    throw new Error('STabPanel: name is immutable for the lifetime of a mounted panel')
+  }
+  ctx.notifyPanelOrderChanged()
+})
+onBeforeUnmount(() => ctx.unregisterPanel(registrationKey))
+</script>
+
+<style lang="postcss" scoped>
+@reference "../../../styles/reference.css";
+
+.s-tab-panel {
+  @apply flex h-full min-h-0 min-w-0 w-full flex-col text-surface-700 focus:outline-none;
+  @apply dark:text-surface-300;
+}
+
+.s-tab-panel[data-align='start'] { @apply items-start; }
+.s-tab-panel[data-align='center'] { @apply items-center; }
+.s-tab-panel[data-align='end'] { @apply items-end; }
+.s-tab-panel[data-align='stretch'] { @apply items-stretch; }
+
+.s-tab-panel[data-content-gap='control'] { gap: var(--s-space-control-gap); }
+.s-tab-panel[data-content-gap='content'] { gap: var(--s-space-content-gap); }
+.s-tab-panel[data-content-gap='section'] { gap: var(--s-space-section-gap); }
+.s-tab-panel[data-content-gap='panel'] { gap: var(--s-space-panel-gap); }
+
+.s-tab-panel[data-padding='control'] { padding: var(--s-space-control-gap); }
+.s-tab-panel[data-padding='content'] { padding: var(--s-space-content-gap); }
+.s-tab-panel[data-padding='section'] { padding: var(--s-space-section-gap); }
+.s-tab-panel[data-padding='panel'] { padding: var(--s-space-panel-gap); }
+
+.s-tab-panel[data-overflow='visible'] { overflow: visible; }
+.s-tab-panel[data-overflow='hidden'] { overflow: hidden; }
+.s-tab-panel[data-overflow='auto'] {
+  overflow: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+}
+
+.s-tab-panel[data-surface='workbench-right-drawer'],
+.s-tab-panel[data-surface='workbench-bottom-dock'] {
+  @apply flex-1 overflow-y-auto px-5;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+}
+
+.s-tab-panel[data-surface='workbench-right-drawer'] {
+  @apply pb-7 pt-4;
+  scroll-padding-block-start: 1rem;
+  scroll-padding-block-end: calc(var(--workbench-scroll-end-padding, 1rem) + 1rem);
+}
+
+.s-tab-panel[data-surface='workbench-bottom-dock'] {
+  @apply pb-6 pt-5;
+  scroll-padding-block-start: 1.25rem;
+  scroll-padding-block-end: calc(var(--workbench-scroll-end-padding, 1rem) + 1rem);
+}
+
+@media (max-width: 1023px) {
+  .s-tab-panel[data-surface='workbench-bottom-dock'] {
+    scroll-padding-block-end: calc(var(--workbench-scroll-end-padding, 1rem) + 1.5rem);
+  }
+}
+</style>

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

@@ -0,0 +1,33 @@
+<template>
+  <div v-bind="ownedAttrs.bindings()" class="s-tab-panels">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { inject, onBeforeUnmount, type VNodeChild } from 'vue'
+import { tabsContextKey, type STabsContext } from '../_internal/tabsContext'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+
+defineOptions({ inheritAttrs: false })
+
+defineSlots<{
+  /** Набор STabPanel одного owner. / STabPanel collection owned by one STabs. */
+  default?: () => VNodeChild
+}>()
+
+const ownedAttrs = useOwnedAttrs({ component: 'STabPanels', owner: 'tab panels stack root' })
+const context = inject<STabsContext>(tabsContextKey)
+if (!context) throw new Error('STabPanels must be used inside STabs')
+const registrationKey = context.registerPanels()
+onBeforeUnmount(() => context.unregisterPanels(registrationKey))
+</script>
+
+<style lang="postcss" scoped>
+@reference "../../../styles/reference.css";
+
+.s-tab-panels {
+  @apply flex min-h-0 min-w-0 w-full flex-col;
+  flex: var(--s-tab-panels-flex);
+}
+</style>