@pgcorp/ui-kit 0.1.0

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

@@ -0,0 +1,360 @@
+<template>
+  <div
+    class="s-collapsible-panel"
+    ref="rootEl"
+    :data-density="density"
+    :data-surface="surface"
+    :data-content-padding="contentPadding"
+    v-bind="ownedAttrs.bindings()"
+  >
+    <div class="s-collapsible-panel-header">
+      <div class="s-collapsible-panel-trigger">
+        <SButton
+          :id="triggerId"
+          :appearance="headerVariant === 'minimal' ? 'ghost' : 'soft'"
+          severity="secondary"
+          shape="row"
+          :size="buttonSize"
+          width="full"
+          content-align="between"
+          :disabled="disabled"
+          :disclosure="{ expanded: isOpen, controls: panelId }"
+          @click="toggle"
+        >
+          <SDisclosureSummary
+            :title="summary"
+            :typography="summaryTypography"
+            :casing="summaryCase"
+            :state="summaryState"
+            :facts="summaryFacts"
+            :badges="summaryBadges"
+            :status="summaryStatus"
+          />
+        </SButton>
+      </div>
+      <div v-if="hasActions" class="s-collapsible-panel-actions">
+        <slot name="actions" />
+      </div>
+    </div>
+    <div
+      :id="panelId"
+      :aria-labelledby="triggerId"
+      role="region"
+      ref="contentWrapEl"
+      class="s-collapsible-panel-content w-full min-w-0"
+      :class="[{ 'min-h-0 flex flex-col grow overflow-y-auto overflow-x-hidden': fill }, { 'no-transition': noAnimation }]"
+      :data-open="isOpen"
+      v-show="shouldShowContent"
+      :style="{
+        ...(noAnimation ? { transition: 'none' } : {})
+      }"
+    >
+      <div ref="contentInnerEl" class="s-collapsible-panel-inner">
+        <slot v-if="hasBeenOpened" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import SDisclosureSummary from '../_internal/SDisclosureSummary.vue'
+import SButton from '../controls/SButton.vue'
+import { useDisclosure } from '../../../composables/useDisclosure'
+import type {
+  SDisclosureSummaryBadge,
+  SDisclosureSummaryCase,
+  SDisclosureSummaryFact,
+  SDisclosureSummaryState,
+  SDisclosureSummaryStatus,
+  SDisclosureSummaryTypography,
+} from './disclosureSummary'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+export interface Props {
+  summary: string
+  summaryTypography?: SDisclosureSummaryTypography
+  summaryCase?: SDisclosureSummaryCase
+  summaryState?: SDisclosureSummaryState
+  summaryFacts?: readonly SDisclosureSummaryFact[]
+  summaryBadges?: readonly SDisclosureSummaryBadge[]
+  summaryStatus?: SDisclosureSummaryStatus
+  defaultOpen?: boolean
+  // Support v-model:open
+  open?: boolean
+  fill?: boolean
+  density?: 'comfortable' | 'compact' | 'dense'
+  contentPadding?: 'density' | 'none'
+  headerVariant?: 'default' | 'minimal'
+  lazy?: boolean
+  noAnimation?: boolean
+  surface?: 'card' | 'plain'
+  id?: string
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  summaryTypography: 'default',
+  summaryCase: 'sentence',
+  summaryState: undefined,
+  summaryFacts: () => [],
+  summaryBadges: () => [],
+  summaryStatus: undefined,
+  defaultOpen: false,
+  open: undefined,
+  fill: false,
+  density: 'comfortable',
+  contentPadding: 'density',
+  headerVariant: 'default',
+  lazy: false,
+  noAnimation: false,
+  surface: 'card',
+  id: undefined,
+  disabled: false,
+})
+
+const slots = defineSlots<{
+  default(): unknown
+  actions?(): unknown
+}>()
+
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+}>()
+const hasActions = computed(() => Boolean(slots.actions))
+const ownedAttrs = useOwnedAttrs({ component: 'SCollapsiblePanel', owner: 'collapsible panel root' })
+const buttonSize = computed(() => props.density === 'comfortable' ? 'md' : 'sm')
+
+const controlledOpen = computed(() => props.open ?? false)
+const disclosure = useDisclosure({
+  id: props.id,
+  open: props.open !== undefined ? controlledOpen : undefined,
+  defaultOpen: props.open === undefined ? props.defaultOpen : undefined,
+  disabled: () => props.disabled,
+  onUpdate: (value) => emit('update:open', value),
+})
+const { isOpen, triggerId, panelId } = disclosure
+
+// Состояние видимости контента (display: block/none)
+// Показываем, если открыто ИЛИ идет анимация.
+// Это убирает элементы из Layout Tree, когда они закрыты.
+const isAnimating = ref(false)
+const shouldShowContent = computed(() => isOpen.value || isAnimating.value)
+
+const hasBeenOpened = ref(!props.lazy || props.defaultOpen || (props.open === true))
+
+watch(() => props.open, (val) => {
+  if (val) hasBeenOpened.value = true
+})
+
+function toggle() {
+  if (props.disabled) return
+  if (props.noAnimation) {
+    disclosure.toggle()
+    return
+  }
+
+  const root = rootEl.value
+  const wrap = contentWrapEl.value
+
+  isAnimating.value = true
+
+  root?.classList.add('is-animating')
+  root?.classList.remove('is-opened')
+  wrap?.classList.add('is-animating')
+  wrap?.classList.remove('is-opened')
+
+  disclosure.toggle()
+}
+
+const contentWrapEl = ref<HTMLElement | null>(null)
+const contentInnerEl = ref<HTMLElement | null>(null)
+const rootEl = ref<HTMLElement | null>(null)
+let resizeObserver: ResizeObserver | null = null
+let pendingHeightSyncFrame: number | null = null
+
+function cancelPendingHeightSync(): void {
+  if (pendingHeightSyncFrame !== null) {
+    window.cancelAnimationFrame(pendingHeightSyncFrame)
+    pendingHeightSyncFrame = null
+  }
+}
+
+function syncAnimatedMaxHeight(): void {
+  const wrap = contentWrapEl.value
+  const inner = contentInnerEl.value
+  if (!wrap || !inner || !isOpen.value || !isAnimating.value) return
+
+  const nextMaxHeight = `${inner.scrollHeight}px`
+  if (wrap.style.maxHeight !== nextMaxHeight) {
+    wrap.style.maxHeight = nextMaxHeight
+  }
+}
+
+function scheduleAnimatedMaxHeightSync(): void {
+  cancelPendingHeightSync()
+  pendingHeightSyncFrame = window.requestAnimationFrame(() => {
+    pendingHeightSyncFrame = null
+    syncAnimatedMaxHeight()
+  })
+}
+
+function setOpenStyles() {
+  const el = contentWrapEl.value
+  if (!el) return
+  el.classList.remove('is-animating')
+  el.classList.add('is-opened')
+  el.style.overflow = ''
+  el.style.maxHeight = ''
+  const root = rootEl.value
+  if (root) {
+    root.classList.remove('is-animating')
+    root.classList.add('is-opened')
+  }
+}
+
+function setClosedStyles() {
+  const el = contentWrapEl.value
+  if (!el) return
+  el.classList.remove('is-animating')
+  el.classList.remove('is-opened')
+  el.style.maxHeight = '0px'
+  el.style.overflow = 'hidden'
+  const root = rootEl.value
+  if (root) {
+    root.classList.remove('is-animating')
+    root.classList.remove('is-opened')
+  }
+}
+
+async function applyImmediateState(open: boolean) {
+  if (open) {
+    await nextTick()
+    hasBeenOpened.value = true
+    setOpenStyles()
+  } else {
+    setClosedStyles()
+  }
+  isAnimating.value = false
+}
+
+async function animateOpen() {
+  const el = contentWrapEl.value
+  if (!el) return
+  const root = rootEl.value
+  
+  // Ждем nextTick, чтобы v-show="true" применился и элемент появился в DOM
+  await nextTick()
+  
+  el.classList.remove('is-opened')
+  el.classList.add('is-animating')
+  if (root) {
+    root.classList.add('is-animating')
+    root.classList.remove('is-opened')
+  }
+  
+  el.style.overflow = 'hidden'
+  el.style.maxHeight = '0px'
+  // Force layout calc
+  void el.offsetHeight
+  
+  el.style.maxHeight = el.scrollHeight + 'px'
+  
+  const onEnd = () => {
+    el.removeEventListener('transitionend', onEnd)
+    if (!isOpen.value) return // прервано закрытием
+    cancelPendingHeightSync()
+    el.style.maxHeight = ''
+    el.style.overflow = ''
+    el.classList.remove('is-animating')
+    el.classList.add('is-opened')
+    if (root) {
+      root.classList.remove('is-animating')
+      root.classList.add('is-opened')
+    }
+    isAnimating.value = false
+  }
+  el.addEventListener('transitionend', onEnd)
+}
+
+function animateClose() {
+  const el = contentWrapEl.value
+  if (!el) return
+  const root = rootEl.value
+  
+  isAnimating.value = true // ensure visible during anim
+  
+  el.classList.add('is-animating')
+  el.classList.remove('is-opened')
+  if (root) {
+    root.classList.add('is-animating')
+    root.classList.remove('is-opened')
+  }
+  
+  if (el.style.maxHeight === '' || el.style.maxHeight === 'none') {
+    el.style.maxHeight = el.scrollHeight + 'px'
+    void el.offsetHeight
+  }
+  
+  el.style.overflow = 'hidden'
+  el.style.maxHeight = '0px'
+  
+  const onEnd = () => {
+    el.removeEventListener('transitionend', onEnd)
+    if (isOpen.value) return // прервано открытием
+    cancelPendingHeightSync()
+    el.classList.remove('is-animating')
+    if (root) {
+      root.classList.remove('is-animating')
+    }
+    isAnimating.value = false // trigger v-show=false
+  }
+  el.addEventListener('transitionend', onEnd)
+}
+
+onMounted(() => {
+  const el = contentWrapEl.value
+  if (!el) return
+  el.style.willChange = 'max-height'
+  
+  if (props.noAnimation) {
+    void applyImmediateState(isOpen.value)
+  } else if (isOpen.value) {
+    setOpenStyles()
+  } else {
+    // Closed initially
+    setClosedStyles()
+  }
+  
+  const target = contentInnerEl.value
+  if (!props.noAnimation && 'ResizeObserver' in window && target) {
+    resizeObserver = new ResizeObserver(() => {
+      scheduleAnimatedMaxHeightSync()
+    })
+    resizeObserver.observe(target)
+  }
+})
+
+onBeforeUnmount(() => {
+  cancelPendingHeightSync()
+  if (resizeObserver) {
+    resizeObserver.disconnect()
+    resizeObserver = null
+  }
+})
+
+watch(isOpen, (open) => {
+  if (props.noAnimation) {
+    void applyImmediateState(open)
+    return
+  }
+  if (open) animateOpen()
+  else animateClose()
+})
+</script>
+
+<style lang="postcss" src="./SCollapsiblePanel.css" scoped></style>

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

@@ -0,0 +1,60 @@
+@reference "../../../styles/reference.css";
+
+.s-drawer-backdrop {
+  @apply fixed inset-0;
+  background: var(--s-overlay-backdrop-surface);
+  -webkit-backdrop-filter: blur(var(--s-overlay-backdrop-blur));
+  backdrop-filter: blur(var(--s-overlay-backdrop-blur));
+}
+
+.s-drawer-shell {
+  @apply fixed inset-0;
+}
+
+.s-drawer-positioner {
+  @apply absolute inset-0 flex items-stretch justify-end;
+}
+
+.s-drawer-backdrop-enter-active,
+.s-drawer-backdrop-leave-active {
+  transition: opacity var(--s-motion-standard) ease;
+}
+
+.s-drawer-backdrop-enter-from,
+.s-drawer-backdrop-leave-to {
+  opacity: 0;
+}
+
+.s-drawer-panel-enter-active,
+.s-drawer-panel-leave-active {
+  transition:
+    opacity var(--s-motion-standard) ease,
+    transform var(--s-motion-standard) ease;
+}
+
+.s-drawer-panel-enter-from,
+.s-drawer-panel-leave-to {
+  opacity: 0;
+  transform: translateX(1.5rem);
+}
+
+@media (max-width: 767px) {
+  .s-drawer-panel-enter-from,
+  .s-drawer-panel-leave-to {
+    transform: translateY(1.5rem);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .s-drawer-backdrop-enter-active,
+  .s-drawer-backdrop-leave-active,
+  .s-drawer-panel-enter-active,
+  .s-drawer-panel-leave-active {
+    transition: none;
+  }
+
+  .s-drawer-panel-enter-from,
+  .s-drawer-panel-leave-to {
+    transform: none;
+  }
+}

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

@@ -0,0 +1,86 @@
+<template>
+  <teleport to="body">
+    <transition name="s-drawer-backdrop">
+      <div v-if="open" class="s-drawer-backdrop" :style="backdropStyle" aria-hidden="true" />
+    </transition>
+
+    <transition name="s-drawer-panel">
+      <div v-if="open" class="s-drawer-shell" :style="surfaceStyle">
+        <div class="s-drawer-positioner">
+          <SDialogSurface
+            v-bind="ownedAttrs.bindings()"
+            :presentation="dialogPresentation"
+            :title="title"
+            :accessible-name="ariaLabel"
+            :closable="closable"
+            :set-surface-element="setPanelElement"
+            @request-close="closeDrawer"
+          >
+            <template v-if="$slots.header" #header>
+              <slot name="header" />
+            </template>
+            <slot />
+            <template v-if="$slots.footer" #footer="{ close }">
+              <slot name="footer" :close="close" />
+            </template>
+          </SDialogSurface>
+        </div>
+      </div>
+    </transition>
+  </teleport>
+</template>
+
+<script setup lang="ts">
+import { computed, toRef } from 'vue'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { useDialogOverlay } from '../../../composables/useDialogOverlay'
+import SDialogSurface from '../_internal/SDialogSurface.vue'
+import type {
+  DialogSurfaceDrawerSize,
+  DrawerDialogSurfacePresentation,
+} from '../_internal/dialogSurface'
+
+defineOptions({ inheritAttrs: false })
+
+export type DrawerSize = DialogSurfaceDrawerSize
+
+export interface Props {
+  open: boolean
+  title?: string
+  closable?: boolean
+  size?: DrawerSize
+  mobileFullScreen?: boolean
+  ariaLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: undefined,
+  closable: true,
+  size: 'md',
+  mobileFullScreen: true,
+  ariaLabel: 'Боковая панель',
+})
+
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+}>()
+
+const ownedAttrs = useOwnedAttrs({ component: 'SDrawer', owner: 'drawer dialog surface' })
+const dialogPresentation = computed<DrawerDialogSurfacePresentation>(() => ({
+  kind: 'drawer',
+  size: props.size,
+  mobileFullScreen: props.mobileFullScreen,
+}))
+
+function closeDrawer() {
+  emit('update:open', false)
+}
+
+const { setPanelElement, backdropStyle, surfaceStyle } = useDialogOverlay({
+  open: toRef(props, 'open'),
+  closable: toRef(props, 'closable'),
+  requestClose: closeDrawer,
+})
+</script>
+
+<style lang="postcss" src="./SDrawer.css" scoped></style>

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

@@ -0,0 +1,26 @@
+@reference "../../../styles/reference.css";
+
+.s-form-grid {
+  @apply grid min-w-0 grid-cols-1 gap-4;
+}
+
+.s-form-grid[data-density='compact'] {
+  @apply gap-x-4 gap-y-3;
+}
+
+.s-form-grid[data-responsive='fixed'][data-columns='2'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.s-form-grid[data-responsive='fixed'][data-columns='3'] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.s-form-grid[data-responsive='fixed'][data-columns='4'] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+
+@media (min-width: 768px) {
+  .s-form-grid[data-responsive='collapse'][data-columns='2'],
+  .s-form-grid[data-responsive='collapse'][data-columns='3'],
+  .s-form-grid[data-responsive='collapse'][data-columns='4'] {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1024px) {
+  .s-form-grid[data-responsive='collapse'][data-columns='3'] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .s-form-grid[data-responsive='collapse'][data-columns='4'] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+}

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

@@ -0,0 +1,46 @@
+<template>
+  <div
+    v-bind="ownedAttrs.bindings()"
+    class="s-form-grid"
+    :data-columns="columns"
+    :data-density="density"
+    :data-responsive="responsive"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { VNodeChild } from 'vue'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+
+defineOptions({ inheritAttrs: false })
+
+/**
+ * Адаптивный owner сетки полей без consumer grid- и gap-переопределений.
+ * Responsive form-grid owner without consumer grid and gap overrides.
+ */
+export interface Props {
+  /** Максимальное число колонок на широком viewport. / Maximum column count on a wide viewport. */
+  columns?: 1 | 2 | 3 | 4
+  /** Плотность межколоночных и межстрочных интервалов. / Column and row spacing density. */
+  density?: 'comfortable' | 'compact'
+  /** Collapse складывает поля в одну колонку на узком viewport. / Collapse stacks fields on narrow viewports. */
+  responsive?: 'collapse' | 'fixed'
+}
+
+withDefaults(defineProps<Props>(), {
+  columns: 2,
+  density: 'comfortable',
+  responsive: 'collapse',
+})
+
+const ownedAttrs = useOwnedAttrs({ component: 'SFormGrid', owner: 'form grid root' })
+
+defineSlots<{
+  /** Поля или SFormGridItem. / Fields or SFormGridItem participants. */
+  default?: () => VNodeChild
+}>()
+</script>
+
+<style lang="postcss" src="./SFormGrid.css" scoped></style>

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

@@ -0,0 +1,18 @@
+@reference "../../../styles/reference.css";
+
+.s-form-grid-item {
+  @apply min-w-0;
+}
+
+.s-form-grid-item[data-span='full'] {
+  grid-column: 1 / -1;
+}
+
+@media (min-width: 768px) {
+  .s-form-grid-item[data-span='2'] { grid-column: span 2 / span 2; }
+}
+
+@media (min-width: 1024px) {
+  .s-form-grid-item[data-span='3'] { grid-column: span 3 / span 3; }
+  .s-form-grid-item[data-span='4'] { grid-column: span 4 / span 4; }
+}

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

@@ -0,0 +1,29 @@
+<template>
+  <div v-bind="ownedAttrs.bindings()" class="s-form-grid-item" :data-span="span">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { VNodeChild } from 'vue'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+
+defineOptions({ inheritAttrs: false })
+
+/** Типизированный участник SFormGrid с адаптивным span. / Typed SFormGrid participant with responsive span. */
+export interface Props {
+  /** Число занятых колонок или вся текущая строка. / Occupied column count or the full current row. */
+  span?: 1 | 2 | 3 | 4 | 'full'
+}
+
+withDefaults(defineProps<Props>(), { span: 1 })
+
+const ownedAttrs = useOwnedAttrs({ component: 'SFormGridItem', owner: 'form grid item root' })
+
+defineSlots<{
+  /** Поле или связанная композиция полей. / Field or related field composition. */
+  default?: () => VNodeChild
+}>()
+</script>
+
+<style lang="postcss" src="./SFormGridItem.css" scoped></style>

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

@@ -0,0 +1,74 @@
+<template>
+  <div v-bind="ownedAttrs.bindings()" class="s-left-sidebar">
+    <SPanel
+      :title="title"
+      :icon="icon"
+      :state="state"
+      :no-content-padding="true"
+      :grow="true"
+      :layout="layout"
+      :scroll-behavior="scrollBehavior"
+      surface-radius="none"
+      surface-tone="transparent"
+      surface-border="none"
+    >
+      <template #actions>
+        <slot name="actions" />
+      </template>
+
+      <SSidebarGroup
+        v-if="state.status === 'ready'"
+        :sections-state="sectionsState"
+        @update-sections="emit('update-sections', $event)"
+        @toggle-section="emit('toggle-section', $event)"
+      >
+        <slot />
+      </SSidebarGroup>
+    </SPanel>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { type FunctionalComponent, type HTMLAttributes, type VNodeProps } from 'vue';
+import SPanel from './SPanel.vue';
+import SSidebarGroup from './SSidebarGroup.vue';
+import type { SAsyncStateContract } from '../feedback/SAsyncState.vue';
+import type { SidebarGroupEmits, SidebarSectionsState } from './sidebar';
+import { useOwnedAttrs } from '../../../internal/ownedAttrs';
+
+defineOptions({ inheritAttrs: false });
+
+export interface Props {
+  title?: string;
+  icon?: FunctionalComponent<HTMLAttributes & VNodeProps>;
+  /** Единственное состояние содержимого sidebar. / The sole sidebar-content state. */
+  state?: SAsyncStateContract;
+  sectionsState: SidebarSectionsState;
+  layout?: 'desktop' | 'mobile';
+  scrollBehavior?: 'auto' | 'body' | 'self';
+}
+
+withDefaults(defineProps<Props>(), {
+  title: undefined,
+  icon: undefined,
+  state: () => ({ status: 'ready' }),
+  layout: 'desktop',
+  scrollBehavior: 'auto',
+});
+
+const emit = defineEmits<SidebarGroupEmits>();
+const ownedAttrs = useOwnedAttrs({ component: 'SLeftSidebar', owner: 'left-sidebar root' });
+</script>
+
+<style scoped>
+@reference "../../../styles/reference.css";
+
+.s-left-sidebar {
+  /* 
+    Компонент должен быть flex-контейнером, чтобы правильно управлять высотой
+    дочернего SPanel и занимать все доступное пространство, которое ему
+    выделяет родительский layout.
+  */
+  @apply flex flex-col h-full w-full;
+}
+</style>