@pgcorp/ui-kit 0.10.0 → 0.10.2

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

@@ -1,443 +0,0 @@
-<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
-        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="resolvedAriaLabel"
-            aria-orientation="horizontal"
-          >
-            <slot />
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      v-if="$slots.controls"
-      ref="controlsRef"
-      class="s-tabs-header__controls"
-      role="group"
-      :aria-label="resolvedControlsAriaLabel"
-    >
-      <slot name="controls" />
-    </div>
-  </div>
-  <div
-    v-else
-    v-bind="ownedAttrs.bindings()"
-    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="resolvedAriaLabel"
-        aria-orientation="horizontal"
-      >
-        <slot />
-      </div>
-    </div>
-    <div
-      v-if="$slots.controls"
-      ref="controlsRef"
-      class="s-tabs-header__controls"
-      role="group"
-      :aria-label="resolvedControlsAriaLabel"
-    >
-      <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 { useUiKitLocale } from '../../../composables/useUiKitLocale'
-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: undefined,
-  tabListId: undefined,
-  leadingAriaLabel: undefined,
-  controlsAriaLabel: undefined,
-})
-const { t } = useUiKitLocale()
-const resolvedAriaLabel = computed(() => props.ariaLabel ?? t('navigation.tabs'))
-const resolvedControlsAriaLabel = computed(() => props.controlsAriaLabel ?? t('navigation.tabActions'))
-
-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 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

@@ -1,165 +0,0 @@
-<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

@@ -1,33 +0,0 @@
-<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>