@pgcorp/ui-kit 0.1.0

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

@@ -0,0 +1,27 @@
+/*
+  Стили для компонента SModal.
+*/
+@reference "../../../styles/reference.css";
+
+.s-modal-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-modal-container {
+  @apply fixed inset-0 overflow-y-auto;
+}
+
+.s-modal-panel-container {
+  @apply flex min-h-full items-center justify-center p-4 text-center;
+}
+
+.s-modal-panel-container--fullscreen {
+  @apply items-stretch justify-stretch p-0 text-left;
+}

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

@@ -0,0 +1,105 @@
+<template>
+  <teleport to="body">
+    <transition name="s-modal-backdrop">
+      <div v-if="open" class="s-modal-backdrop" :style="backdropStyle" aria-hidden="true"></div>
+    </transition>
+
+    <transition name="s-modal-panel">
+      <div v-if="open" class="s-modal-container" :style="surfaceStyle">
+        <div class="s-modal-panel-container" :class="{ 's-modal-panel-container--fullscreen': isFullscreen }">
+          <SDialogSurface
+            v-bind="ownedAttrs.bindings()"
+            :presentation="dialogPresentation"
+            :title="title"
+            :accessible-name="ariaLabel"
+            :closable="closable"
+            :set-surface-element="setPanelElement"
+            @request-close="closeModal"
+          >
+            <template v-if="$slots.header" #header>
+              <slot name="header" />
+            </template>
+            <slot />
+            <template v-if="$slots.footer" #footer="{ close }">
+              <slot name="footer" :close="close" />
+            </template>
+            <template v-if="$slots['footer-start']" #footer-start="{ close }">
+              <slot name="footer-start" :close="close" />
+            </template>
+            <template v-if="$slots['footer-end']" #footer-end="{ close }">
+              <slot name="footer-end" :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 {
+  DialogSurfaceModalSize,
+  DialogSurfaceScrollBehavior,
+  DialogSurfaceTone,
+  ModalDialogSurfacePresentation,
+} from '../_internal/dialogSurface'
+
+defineOptions({ inheritAttrs: false })
+
+export type ModalSize = DialogSurfaceModalSize
+export type ModalSurface = DialogSurfaceTone
+export type ModalScrollBehavior = DialogSurfaceScrollBehavior
+
+export interface Props {
+  open: boolean
+  title?: string
+  closable?: boolean
+  size?: ModalSize
+  fullScreen?: boolean
+  layout?: 'desktop' | 'mobile-fullscreen'
+  surface?: ModalSurface
+  scrollBehavior?: ModalScrollBehavior
+  ariaLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: undefined,
+  closable: true,
+  size: 'md',
+  fullScreen: false,
+  layout: 'desktop',
+  surface: 'default',
+  scrollBehavior: 'page',
+  ariaLabel: 'Модальное окно',
+})
+
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+}>()
+
+function closeModal() {
+  emit('update:open', false)
+}
+
+const isFullscreen = computed(() => props.fullScreen || props.layout === 'mobile-fullscreen')
+
+const ownedAttrs = useOwnedAttrs({ component: 'SModal', owner: 'modal dialog surface' })
+const dialogPresentation = computed<ModalDialogSurfacePresentation>(() => ({
+  kind: 'modal',
+  size: props.size,
+  fullscreen: isFullscreen.value,
+  surface: props.surface,
+  scrollBehavior: props.scrollBehavior,
+}))
+const { setPanelElement, backdropStyle, surfaceStyle } = useDialogOverlay({
+  open: toRef(props, 'open'),
+  closable: toRef(props, 'closable'),
+  requestClose: closeModal,
+})
+</script>
+
+<style lang="postcss" src="./SModal.css" scoped></style>

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

@@ -0,0 +1,66 @@
+@reference "../../../styles/reference.css";
+
+.s-page-header {
+  @apply flex min-w-0 items-start justify-between gap-4 border border-surface-200 bg-surface-0 p-5 shadow-sm;
+  @apply dark:border-surface-700 dark:bg-surface-900;
+  border-radius: var(--radius-sm);
+}
+
+.s-page-header[data-appearance='plain'] {
+  @apply border-x-0 border-t-0 bg-transparent px-0 pt-0 shadow-none dark:bg-transparent;
+  border-radius: 0;
+}
+
+.s-page-header[data-size='compact'] {
+  @apply p-4;
+}
+
+.s-page-header[data-appearance='plain'][data-size='compact'] {
+  @apply px-0 pt-0;
+}
+
+.s-page-header__copy {
+  @apply min-w-0;
+}
+
+.s-page-header__eyebrow {
+  @apply text-xs font-medium uppercase text-surface-500 dark:text-surface-400;
+}
+
+.s-page-header__title {
+  @apply m-0 text-2xl font-semibold leading-tight text-surface-900 dark:text-surface-50;
+}
+
+.s-page-header[data-size='compact'] .s-page-header__title {
+  @apply text-xl;
+}
+
+.s-page-header__eyebrow + .s-page-header__title {
+  @apply mt-1;
+}
+
+.s-page-header__description {
+  @apply mt-2 max-w-4xl text-sm text-surface-500 dark:text-surface-400;
+}
+
+.s-page-header__actions {
+  @apply flex shrink-0 flex-wrap items-center justify-end gap-2;
+}
+
+.s-page-header[data-actions-layout='stacked'] {
+  @apply flex-col;
+}
+
+.s-page-header[data-actions-layout='stacked'] .s-page-header__actions {
+  @apply w-full justify-start;
+}
+
+@media (max-width: 639px) {
+  .s-page-header[data-actions-layout='responsive'] {
+    @apply flex-col;
+  }
+
+  .s-page-header[data-actions-layout='responsive'] .s-page-header__actions {
+    @apply w-full justify-start;
+  }
+}

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

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+
+defineOptions({ inheritAttrs: false })
+
+withDefaults(defineProps<{
+  title: string
+  description?: string
+  eyebrow?: string
+  headingLevel?: 1 | 2 | 3
+  appearance?: 'plain' | 'panel'
+  size?: 'compact' | 'default'
+  actionsLayout?: 'responsive' | 'inline' | 'stacked'
+}>(), {
+  description: undefined,
+  eyebrow: undefined,
+  headingLevel: 2,
+  appearance: 'panel',
+  size: 'default',
+  actionsLayout: 'responsive',
+})
+
+const ownedAttrs = useOwnedAttrs({ component: 'SPageHeader', owner: 'page header root' })
+</script>
+
+<template>
+  <header
+    v-bind="ownedAttrs.bindings()"
+    class="s-page-header"
+    :data-actions-layout="actionsLayout"
+    :data-appearance="appearance"
+    :data-size="size"
+  >
+    <div class="s-page-header__copy">
+      <div v-if="eyebrow" class="s-page-header__eyebrow">{{ eyebrow }}</div>
+      <component :is="`h${headingLevel}`" class="s-page-header__title">{{ title }}</component>
+      <p v-if="description" class="s-page-header__description">{{ description }}</p>
+    </div>
+    <div v-if="$slots.actions" class="s-page-header__actions">
+      <slot name="actions" />
+    </div>
+  </header>
+</template>
+
+<style lang="postcss" src="./SPageHeader.css" scoped></style>

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

@@ -0,0 +1,134 @@
+@reference "../../../styles/reference.css";
+
+.s-panel {
+  @apply relative flex flex-col rounded-lg border bg-surface-0 dark:bg-surface-800 border-surface-200 dark:border-surface-700;
+  @apply text-surface-700 dark:text-surface-300;
+  @apply min-h-0 min-w-0 w-full flex-none; /* предотвращаем горизонтальное распирание, панель заполняет доступную ширину; flex-none исключает сжатие панелей в flex-контейнерах */
+}
+
+.s-panel[data-grow='true'] {
+  flex: 1 1 0%;
+  height: 100%;
+}
+
+.s-panel--radius-none {
+  @apply rounded-none;
+}
+
+.s-panel--radius-md {
+  @apply rounded-md;
+}
+
+.s-panel--tone-transparent {
+  @apply bg-transparent dark:bg-transparent;
+}
+
+.s-panel--tone-subtle {
+  @apply bg-surface-0 dark:bg-surface-800/50;
+}
+
+.s-panel--border-none {
+  @apply border-none;
+}
+
+.s-panel--elevation-overlay {
+  box-shadow: var(--shadow-xl);
+}
+
+.s-panel[data-surface-overflow='clip'] {
+  overflow: clip;
+}
+
+.s-panel[data-layout='mobile'] {
+  @apply rounded-none border border-surface-100 dark:border-surface-700;
+}
+
+.s-panel-header {
+  @apply flex items-center justify-between p-3 border-b border-surface-200 dark:border-surface-700 shrink-0;
+}
+
+.s-panel-header-left {
+  @apply flex items-center min-w-0;
+  gap: var(--s-space-control-gap);
+}
+
+.s-panel-icon {
+  @apply h-5 w-5 text-surface-500 dark:text-surface-400;
+}
+
+.s-panel-title {
+  @apply text-base font-semibold text-surface-800 dark:text-surface-200 truncate;
+}
+
+.s-panel-heading {
+  @apply min-w-0;
+}
+
+.s-panel-description {
+  @apply mt-0.5 whitespace-normal text-sm text-surface-500 dark:text-surface-400;
+  overflow-wrap: anywhere;
+}
+
+.s-panel-header-right {
+  @apply flex items-center min-w-0 shrink-0;
+  gap: var(--s-space-content-gap);
+}
+
+.s-panel-content {
+  /* Базово без внутренних скроллов; прокрутка включается только для grow-панелей */
+  @apply min-h-0 min-w-0 w-full; /* безопасная ширина для любых сеток/инпутов внутри */
+}
+
+.s-panel-content[data-content-layout='stack'] {
+  @apply flex flex-col;
+}
+
+.s-panel-content[data-content-layout='stack'][data-content-gap='control'] {
+  gap: var(--s-space-control-gap);
+}
+
+.s-panel-content[data-content-layout='stack'][data-content-gap='content'] {
+  gap: var(--s-space-content-gap);
+}
+
+.s-panel-content[data-content-layout='stack'][data-content-gap='section'] {
+  gap: var(--s-space-section-gap);
+}
+
+.s-panel-content[data-content-layout='stack'][data-content-gap='panel'] {
+  gap: var(--s-space-panel-gap);
+}
+
+.s-panel-scroll-end-spacer {
+  height: 1rem;
+  flex: 0 0 1rem;
+  pointer-events: none;
+}
+
+.s-panel-content[data-grow='true'] > * {
+  flex-shrink: 0;
+}
+
+.s-panel-content--scroll-body {
+  @apply overflow-visible; /* прокручивает родитель body/контейнер */
+}
+
+.s-panel-content--scroll-self {
+  @apply overflow-y-auto overflow-x-hidden;
+}
+
+.s-panel-content--scroll-child {
+  overflow: hidden;
+}
+
+.s-panel-footer {
+  @apply flex min-h-8 min-w-0 flex-wrap items-center border-t border-surface-200 px-3 py-1.5 text-xs text-surface-500;
+  @apply dark:border-surface-700 dark:text-surface-400;
+  gap: var(--s-space-control-gap);
+}
+
+/* Вложенные компоненты сохраняют собственную высоту; grow управляет прокруткой SPanel. */
+.s-panel-loading {
+  @apply flex w-full max-w-md flex-col text-center;
+  gap: var(--s-space-content-gap);
+}

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

@@ -0,0 +1,169 @@
+<template>
+  <div
+    v-bind="ownedAttrs.bindings()"
+    class="s-panel"
+    :class="[
+      scrollBehavior && `s-panel--scroll-${scrollBehavior}`,
+      surfaceRadius === 'none' && 's-panel--radius-none',
+      surfaceRadius === 'md' && 's-panel--radius-md',
+      surfaceTone === 'transparent' && 's-panel--tone-transparent',
+      surfaceTone === 'subtle' && 's-panel--tone-subtle',
+      surfaceBorder === 'none' && 's-panel--border-none',
+      surfaceElevation === 'overlay' && 's-panel--elevation-overlay',
+    ]"
+    :data-grow="grow || undefined"
+    :data-layout="layout"
+    :data-surface-overflow="surfaceOverflow"
+  >
+    <div
+      v-if="title || $slots.actions || $slots.header"
+      class="s-panel-header"
+    >
+      <div class="s-panel-header-left">
+        <slot name="header">
+          <component :is="icon" v-if="icon" class="s-panel-icon" />
+          <div v-if="title" class="s-panel-heading">
+            <component :is="`h${headingLevel}`" :id="validatedTitleId" class="s-panel-title">{{ title }}</component>
+            <p v-if="description" class="s-panel-description">{{ description }}</p>
+          </div>
+        </slot>
+      </div>
+      <div class="s-panel-header-right">
+        <slot name="actions" />
+      </div>
+    </div>
+    <div
+      class="s-panel-content"
+      :id="validatedContentId"
+      :class="{
+        'p-4': !noContentPadding,
+        'flex-grow min-h-0 min-w-0 overflow-y-auto overflow-x-hidden': grow,
+        's-panel-content--scroll-body': scrollBehavior === 'body',
+        's-panel-content--scroll-self': scrollBehavior === 'self',
+        's-panel-content--scroll-child': scrollBehavior === 'child',
+      }"
+      :data-content-layout="contentLayout"
+      :data-content-gap="contentGap"
+      :data-grow="grow || undefined"
+    >
+      <SAsyncState :state="state">
+        <template v-if="state.status === 'error' && state.endpoint" #error>
+          <SMessage severity="danger" title="Ошибка ответа сервера">
+            <div class="space-y-1">
+              <div>{{ state.message }}</div>
+              <div class="text-xs text-danger-700 dark:text-danger-300">
+                Запрос: {{ state.endpoint }}
+              </div>
+            </div>
+          </SMessage>
+        </template>
+        <template #loading="{ message }">
+          <div class="s-panel-loading">
+            <SProgressBar :accessibility="{ mode: 'label', label: message }" mode="indeterminate" />
+            <span>{{ message }}</span>
+          </div>
+        </template>
+        <slot />
+      </SAsyncState>
+      <div v-if="grow" class="s-panel-scroll-end-spacer" aria-hidden="true"></div>
+    </div>
+    <div v-if="$slots.footer" :id="validatedFooterId" class="s-panel-footer">
+      <slot name="footer" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots, watchEffect, type FunctionalComponent, type HTMLAttributes, type VNodeProps } from 'vue'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { validateDomId } from '../../../internal/runtimeContract'
+import SAsyncState, { type SAsyncStateContract } from '../feedback/SAsyncState.vue'
+import SMessage from '../data-display/SMessage.vue'
+import SProgressBar from '../data-display/SProgressBar.vue'
+
+defineOptions({ inheritAttrs: false })
+
+export interface Props {
+  title?: string
+  /** DOM id встроенного heading для связи с composed content. / DOM id of the built-in heading for composed-content labelling. */
+  titleId?: string
+  /** DOM id content viewport для composed navigation и testing. / DOM id of the content viewport for composed navigation and testing. */
+  contentId?: string
+  description?: string
+  /** Уровень заголовка в document outline. / Heading level in the document outline. */
+  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
+  icon?: FunctionalComponent<HTMLAttributes & VNodeProps>
+  /** Единственное состояние контента; omission означает ready. / The sole content-state contract; omission means ready. */
+  state?: SAsyncStateContract
+  noContentPadding?: boolean
+  /** Компоновка slot content без скрытого воздействия на child margins. / Slot-content layout without hidden child-margin styling. */
+  contentLayout?: 'block' | 'stack'
+  /** Семантический интервал layout; none не добавляет неявный spacing. / Semantic layout gap; none adds no implicit spacing. */
+  contentGap?: 'none' | 'control' | 'content' | 'section' | 'panel'
+  grow?: boolean
+  layout?: 'desktop' | 'mobile'
+  /** child делегирует scrolling вложенному владельцу viewport. / child delegates scrolling to the nested viewport owner. */
+  scrollBehavior?: 'auto' | 'body' | 'self' | 'child'
+  /** Семантический радиус поверхности; значения не принимают raw CSS lengths. / Semantic surface radius; values never accept raw CSS lengths. */
+  surfaceRadius?: 'default' | 'md' | 'none'
+  /** Семантический тон поверхности. / Semantic surface tone. */
+  surfaceTone?: 'default' | 'subtle' | 'transparent'
+  surfaceBorder?: 'default' | 'none'
+  /** Семантическая высота тени surface. / Semantic surface shadow elevation. */
+  surfaceElevation?: 'flat' | 'overlay'
+  /** Управляет clipping корневой surface без consumer class overrides. / Controls root-surface clipping without consumer class overrides. */
+  surfaceOverflow?: 'visible' | 'clip'
+  /** DOM id общего footer/status region. / DOM id of the shared footer/status region. */
+  footerId?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: undefined,
+  titleId: undefined,
+  contentId: undefined,
+  description: undefined,
+  headingLevel: 3,
+  icon: undefined,
+  state: () => ({ status: 'ready' }),
+  noContentPadding: false,
+  contentLayout: 'stack',
+  contentGap: 'none',
+  grow: false,
+  layout: 'desktop',
+  scrollBehavior: 'auto',
+  surfaceRadius: 'default',
+  surfaceTone: 'default',
+  surfaceBorder: 'default',
+  surfaceElevation: 'flat',
+  surfaceOverflow: 'visible',
+  footerId: undefined,
+})
+
+const slots = useSlots()
+const ownedAttrs = useOwnedAttrs({ component: 'SPanel', owner: 'panel surface root' })
+const validatedTitleId = computed(() => {
+  if (props.titleId === undefined) return undefined
+  if (!props.title) {
+    throw new TypeError('SPanel: titleId требует title. / SPanel: titleId requires title.')
+  }
+  return validateDomId('SPanel', 'titleId', props.titleId)
+})
+const validatedContentId = computed(() => props.contentId === undefined
+  ? undefined
+  : validateDomId('SPanel', 'contentId', props.contentId))
+const validatedFooterId = computed(() => {
+  if (props.footerId === undefined) return undefined
+  if (!slots.footer) {
+    throw new TypeError('SPanel: footerId требует footer slot. / SPanel: footerId requires the footer slot.')
+  }
+  return validateDomId('SPanel', 'footerId', props.footerId)
+})
+
+watchEffect(() => {
+  void validatedTitleId.value
+  void validatedContentId.value
+  void validatedFooterId.value
+})
+</script>
+
+<style lang="postcss" src="./SPanel.css" scoped></style>

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

@@ -0,0 +1,35 @@
+@reference "../../../styles/reference.css";
+
+.s-popover-wrapper {
+  @apply relative;
+}
+
+.s-popover-panel {
+  display: inline-block;
+}
+
+.s-popover-content {
+  @apply rounded-lg text-left;
+  background: var(--s-floating-surface);
+  color: var(--s-floating-foreground);
+  box-shadow: 0 0 0 1px var(--s-floating-outline), var(--s-elevation-floating);
+  display: inline-block;
+}
+
+.s-popover-panel[data-width='sm'] {
+  width: min(20rem, calc(100vw - 1rem));
+}
+
+.s-popover-panel[data-width='md'] {
+  width: min(28rem, calc(100vw - 1rem));
+}
+
+.s-popover-panel[data-width='lg'] {
+  width: min(36rem, calc(100vw - 1rem));
+}
+
+.s-popover-panel[data-surface='transparent'] .s-popover-content {
+  @apply bg-transparent shadow-none dark:bg-transparent;
+  box-shadow: none;
+  max-width: 90vw;
+}