@pgcorp/ui-kit 0.10.0 → 0.10.2

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

@@ -1,79 +0,0 @@
-<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 { 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' | 'child';
-}
-
-interface Emits {
-  'update-sections': [state: SidebarSectionsState];
-  'toggle-section': [key: string];
-}
-
-withDefaults(defineProps<Props>(), {
-  title: undefined,
-  icon: undefined,
-  state: () => ({ status: 'ready' }),
-  layout: 'desktop',
-  scrollBehavior: 'child',
-});
-
-const emit = defineEmits<Emits>();
-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>

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

@@ -1,108 +0,0 @@
-<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="resolvedAriaLabel"
-            :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 { useUiKitLocale } from '../../../composables/useUiKitLocale'
-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: undefined,
-})
-const { t } = useUiKitLocale()
-
-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 resolvedAriaLabel = computed(() => props.ariaLabel ?? t('dialog.modal'))
-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.vue

@@ -1,44 +0,0 @@
-<script setup lang="ts">
-import { useOwnedAttrs } from '../../../internal/ownedAttrs'
-import SHeaderSurface from '../_internal/SHeaderSurface.vue'
-
-defineOptions({ inheritAttrs: false })
-
-withDefaults(defineProps<{
-  title: string
-  description?: string
-  eyebrow?: string
-  headingLevel?: 1 | 2 | 3
-  appearance?: 'bare' | 'plain' | 'panel'
-  size?: 'compact' | 'default'
-  actionsLayout?: 'responsive' | 'inline' | 'stacked'
-  titlePresentation?: 'visible' | 'assistive'
-}>(), {
-  description: undefined,
-  eyebrow: undefined,
-  headingLevel: 2,
-  appearance: 'panel',
-  size: 'default',
-  actionsLayout: 'responsive',
-  titlePresentation: 'visible',
-})
-
-const ownedAttrs = useOwnedAttrs({ component: 'SPageHeader', owner: 'page header root' })
-</script>
-
-<template>
-  <SHeaderSurface
-    v-bind="ownedAttrs.bindings()"
-    kind="page"
-    :title="title"
-    :description="description"
-    :eyebrow="eyebrow"
-    :heading-level="headingLevel"
-    :appearance="appearance"
-    :size="size"
-    :trailing-layout="actionsLayout"
-    :title-presentation="titlePresentation"
-  >
-    <template v-if="$slots.actions" #actions><slot name="actions" /></template>
-  </SHeaderSurface>
-</template>

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

@@ -1,179 +0,0 @@
-<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"
-      :data-header-layout="headerLayout"
-    >
-      <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="t('feedback.serverResponseError')">
-            <div class="space-y-1">
-              <div>{{ state.message }}</div>
-              <div class="text-xs text-danger-700 dark:text-danger-300">
-                {{ t('feedback.request') }} {{ 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 && scrollBehavior !== 'child'"
-        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 { useUiKitLocale } from '../../../composables/useUiKitLocale'
-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
-  /** Адаптация heading/actions: auto складывает actions под heading при нехватке места. / Heading/actions adaptation: auto stacks actions below the heading when space is constrained. */
-  headerLayout?: 'auto' | 'inline' | 'stacked'
-}
-
-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,
-  headerLayout: 'auto',
-})
-
-const slots = useSlots()
-const { t } = useUiKitLocale()
-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>