@pgcorp/ui-kit 0.10.0 → 0.10.1

package/src/components/layout/SWorkbenchPanelShell.vue

@@ -1,288 +0,0 @@
-<template>
-  <div v-bind="ownedAttrs.bindings()" class="workbench-panel" data-testid="workbench-panel-shell">
-    <slot name="dialogs" />
-
-    <div class="workbench-header">
-      <slot name="header-navigation" />
-      <div class="title-container">
-        <slot name="title" />
-      </div>
-      <slot name="header-actions" />
-    </div>
-
-    <slot name="status" />
-
-    <slot v-if="renderState.mode === 'creating'" name="creating" />
-
-    <SAsyncState v-else :state="renderState.state">
-      <template v-if="$slots.loading" #loading="slotProps">
-        <slot name="loading" v-bind="slotProps" />
-      </template>
-      <template v-if="$slots.error" #error="slotProps">
-        <slot name="error" v-bind="slotProps" />
-      </template>
-
-      <div
-        ref="shellRef"
-        class="workbench-shell"
-        :class="shellClasses"
-        :style="shellStyle"
-      >
-        <div class="workbench-shell-main" data-testid="workbench-shell-main">
-          <div class="workbench-shell-main-content">
-            <slot name="main" />
-          </div>
-        </div>
-
-        <div
-          v-if="showSecondary"
-          class="workbench-shell-secondary-wrap"
-          :class="`workbench-shell-secondary-wrap--${secondaryPlacement}`"
-        >
-          <SDockRegion
-            :placement="dockPlacement"
-            :visible="showSecondary"
-            :size="secondarySizePx"
-            :min-size="secondaryBounds.min"
-            :max-size="secondaryBounds.max"
-            :resize-step="16"
-            :resize-label="secondaryResizeLabel"
-            :resize-test-id="secondaryResizeTestId"
-            :hide-resize-handle-on-narrow="secondaryResponsiveStack"
-            :responsive-size="secondaryResponsiveStack ? 'fill-on-narrow' : 'fixed'"
-            handle-variant="overlay"
-            surface="transparent"
-            @resize-start="refreshSecondaryBounds"
-            @resize="resizeSecondary"
-          >
-            <div
-              class="workbench-shell-secondary flex flex-col"
-              :class="`workbench-shell-secondary--${secondaryPlacement}`"
-              data-testid="workbench-shell-secondary"
-            >
-              <div
-                v-if="$slots['secondary-header'] || $slots['secondary-actions']"
-                class="workbench-shell-secondary-header"
-                :class="{ 'workbench-shell-secondary-header--sticky': secondaryStickyHeader }"
-                data-testid="workbench-shell-secondary-header"
-              >
-                <div class="workbench-shell-secondary-header-main">
-                  <slot name="secondary-header" />
-                </div>
-                <div class="workbench-shell-secondary-header-actions">
-                  <slot name="secondary-actions" />
-                </div>
-              </div>
-
-              <div
-                class="workbench-shell-secondary-content"
-                :class="{ 'flex min-h-0 flex-col': isBottomDock }"
-                data-testid="workbench-shell-secondary-content"
-              >
-                <slot name="secondary" />
-              </div>
-            </div>
-          </SDockRegion>
-        </div>
-      </div>
-    </SAsyncState>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref, useSlots, watch } from 'vue'
-import { useUiKitLocale } from '../../composables/useUiKitLocale'
-import SAsyncState from '../shared/feedback/SAsyncState.vue'
-import { useOwnedAttrs } from '../../internal/ownedAttrs'
-import {
-  validateBoolean,
-  validateExactString,
-} from '../../internal/runtimeContract'
-import SDockRegion from './SDockRegion.vue'
-import type { WorkbenchPanelState } from './types'
-
-defineOptions({ inheritAttrs: false })
-
-type SecondaryPlacement = 'none' | 'right-drawer' | 'bottom-dock'
-type SecondarySize = 'sm' | 'md' | 'lg'
-const RIGHT_DRAWER_WIDTHS: Record<SecondarySize, number> = {
-  sm: 320,
-  md: 384,
-  lg: 480,
-}
-
-const BOTTOM_DOCK_HEIGHTS: Record<SecondarySize, number> = {
-  sm: 240,
-  md: 304,
-  lg: 384,
-}
-
-const props = withDefaults(defineProps<{
-  state: WorkbenchPanelState
-  secondaryPlacement?: SecondaryPlacement
-  secondaryOpen?: boolean
-  secondarySize?: SecondarySize
-  secondaryStickyHeader?: boolean
-  secondaryResponsiveStack?: boolean
-}>(), {
-  secondaryPlacement: 'none',
-  secondaryOpen: true,
-  secondarySize: 'md',
-  secondaryStickyHeader: false,
-  secondaryResponsiveStack: false,
-})
-const { t } = useUiKitLocale()
-
-const slots = useSlots()
-const ownedAttrs = useOwnedAttrs({ component: 'SWorkbenchPanelShell', owner: 'workbench panel root' })
-const shellRef = ref<HTMLElement | null>(null)
-const secondarySizePx = ref(resolveSecondarySizePx(props.secondaryPlacement, props.secondarySize))
-const secondaryBounds = ref(resolveSecondaryBounds())
-let shellResizeObserver: ResizeObserver | null = null
-const renderState = computed(() => {
-  assertShellOptions()
-  const candidate: unknown = props.state
-  if (
-    typeof candidate !== 'object'
-    || candidate === null
-    || Array.isArray(candidate)
-    || Reflect.get(candidate, 'status') !== 'creating'
-  ) {
-    return {
-      mode: 'async' as const,
-      state: candidate as Exclude<WorkbenchPanelState, { status: 'creating' }>,
-    }
-  }
-  if (Object.keys(candidate).length !== 1) {
-    throw new TypeError('SWorkbenchPanelShell: state со status=creating должен содержать только поле status')
-  }
-  return { mode: 'creating' as const }
-})
-
-const hasSecondary = computed(() =>
-  Boolean(slots.secondary || slots['secondary-header'] || slots['secondary-actions'])
-)
-
-const showSecondary = computed(() =>
-  props.secondaryPlacement !== 'none'
-  && props.secondaryOpen
-  && hasSecondary.value
-)
-
-const isBottomDock = computed(() => props.secondaryPlacement === 'bottom-dock')
-const dockPlacement = computed<'right' | 'bottom'>(() => isBottomDock.value ? 'bottom' : 'right')
-const secondaryResizeLabel = computed(() => isBottomDock.value
-  ? t('layout.resizeBottomPanel')
-  : t('layout.resizeSidePanel'))
-const secondaryResizeTestId = computed(() => isBottomDock.value
-  ? 'workbench-shell-resize-handle-bottom'
-  : 'workbench-shell-resize-handle-right')
-
-const shellClasses = computed(() => [
-  `workbench-shell--${props.secondaryPlacement}`,
-  `workbench-shell--secondary-${props.secondarySize}`,
-  {
-    'workbench-shell--secondary-open': showSecondary.value,
-    'workbench-shell--secondary-responsive-stack': props.secondaryResponsiveStack,
-  },
-])
-
-const shellStyle = computed<Record<string, string>>(() => {
-  return {
-    '--workbench-secondary-size': `${secondarySizePx.value}px`,
-  }
-})
-
-watch(
-  () => [props.secondaryPlacement, props.secondarySize] as const,
-  ([secondaryPlacement, secondarySize]) => {
-    secondarySizePx.value = resolveSecondarySizePx(secondaryPlacement, secondarySize)
-    secondaryBounds.value = resolveSecondaryBounds()
-  },
-  { immediate: true },
-)
-
-function resolveSecondarySizePx(
-  secondaryPlacement: SecondaryPlacement,
-  secondarySize: SecondarySize,
-): number {
-  if (secondaryPlacement === 'bottom-dock') {
-    return BOTTOM_DOCK_HEIGHTS[secondarySize]
-  }
-
-  return RIGHT_DRAWER_WIDTHS[secondarySize]
-}
-
-function resolveSecondaryBounds(): { min: number, max: number } {
-  const shell = shellRef.value
-  if (!shell) {
-    return props.secondaryPlacement === 'bottom-dock'
-      ? { min: 192, max: 640 }
-      : { min: 248, max: 768 }
-  }
-
-  if (props.secondaryPlacement === 'right-drawer') {
-    if (shell.clientWidth <= 0) return { min: 248, max: 768 }
-    const shellWidth = Math.max(shell.clientWidth, 320)
-    const minWidth = Math.min(320, Math.max(248, Math.floor(shellWidth * 0.34)))
-    const maxWidth = Math.max(minWidth, Math.floor(shellWidth * 0.62))
-    return { min: minWidth, max: maxWidth }
-  }
-
-  if (props.secondaryPlacement === 'bottom-dock') {
-    if (shell.clientHeight <= 0) return { min: 192, max: 640 }
-    const shellHeight = Math.max(shell.clientHeight, 320)
-    const minHeight = Math.min(320, Math.max(192, Math.floor(shellHeight * 0.24)))
-    const maxHeight = Math.max(minHeight, Math.floor(shellHeight * 0.68))
-    return { min: minHeight, max: maxHeight }
-  }
-
-  return { min: 0, max: 0 }
-}
-
-function refreshSecondaryBounds(): void {
-  const bounds = resolveSecondaryBounds()
-  secondaryBounds.value = bounds
-  secondarySizePx.value = Math.min(bounds.max, Math.max(bounds.min, secondarySizePx.value))
-}
-
-function resizeSecondary(nextSize: number): void {
-  refreshSecondaryBounds()
-  secondarySizePx.value = Math.min(
-    secondaryBounds.value.max,
-    Math.max(secondaryBounds.value.min, nextSize),
-  )
-}
-
-function assertShellOptions(): void {
-  validateExactString(
-    'SWorkbenchPanelShell',
-    'secondaryPlacement',
-    props.secondaryPlacement,
-    ['none', 'right-drawer', 'bottom-dock'] as const,
-  )
-  validateExactString(
-    'SWorkbenchPanelShell',
-    'secondarySize',
-    props.secondarySize,
-    ['sm', 'md', 'lg'] as const,
-  )
-  validateBoolean('SWorkbenchPanelShell', 'secondaryOpen', props.secondaryOpen)
-  validateBoolean('SWorkbenchPanelShell', 'secondaryStickyHeader', props.secondaryStickyHeader)
-  validateBoolean('SWorkbenchPanelShell', 'secondaryResponsiveStack', props.secondaryResponsiveStack)
-}
-
-onMounted(() => {
-  refreshSecondaryBounds()
-  if (typeof ResizeObserver === 'undefined' || !shellRef.value) return
-  shellResizeObserver = new ResizeObserver(refreshSecondaryBounds)
-  shellResizeObserver.observe(shellRef.value)
-})
-
-onBeforeUnmount(() => {
-  shellResizeObserver?.disconnect()
-  shellResizeObserver = null
-})
-</script>
-
-<style lang="postcss" src="./SWorkbenchPanelShell.css" scoped></style>

package/src/components/layout/_internal/SAppBrand.vue

@@ -1,37 +0,0 @@
-<script setup lang="ts">
-import { computed, useSlots } from 'vue'
-import type { RouteLocationRaw } from 'vue-router'
-import SLink from '../../shared/controls/SLink.vue'
-import SAppBrandContent from './SAppBrandContent.vue'
-
-withDefaults(defineProps<{
-  title: string
-  subtitle?: string
-  to?: RouteLocationRaw | null
-  placement: 'sidebar' | 'header'
-}>(), {
-  subtitle: '',
-  to: null,
-})
-
-const slots = useSlots()
-const hasLogo = computed(() => Boolean(slots.logo))
-const hasIcon = computed(() => Boolean(slots.icon))
-</script>
-
-<template>
-  <div class="s-app-brand" :data-placement="placement">
-    <SLink v-if="to" :to="to" variant="brand" :aria-label="hasLogo ? title : undefined">
-      <SAppBrandContent :title="title" :subtitle="subtitle" :placement="placement" :has-logo="hasLogo" :has-icon="hasIcon">
-        <template v-if="hasLogo" #logo><slot name="logo" /></template>
-        <template v-if="hasIcon" #icon><slot name="icon" /></template>
-      </SAppBrandContent>
-    </SLink>
-    <div v-else data-s-app-brand-passive>
-      <SAppBrandContent :title="title" :subtitle="subtitle" :placement="placement" :has-logo="hasLogo" :has-icon="hasIcon">
-        <template v-if="hasLogo" #logo><slot name="logo" /></template>
-        <template v-if="hasIcon" #icon><slot name="icon" /></template>
-      </SAppBrandContent>
-    </div>
-  </div>
-</template>

package/src/components/layout/_internal/SAppBrandContent.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-withDefaults(defineProps<{
-  title: string
-  subtitle?: string
-  placement: 'sidebar' | 'header'
-  hasLogo?: boolean
-  hasIcon?: boolean
-}>(), {
-  subtitle: '',
-  hasLogo: false,
-  hasIcon: false,
-})
-</script>
-
-<template>
-  <span class="s-app-brand__content" :data-placement="placement">
-    <slot v-if="hasLogo" name="logo" />
-    <template v-else>
-      <span v-if="hasIcon" class="s-app-brand__icon" aria-hidden="true">
-        <slot name="icon" />
-      </span>
-      <span class="s-app-brand__text">
-        <span class="s-app-brand__title">{{ title }}</span>
-        <span v-if="subtitle" class="s-app-brand__subtitle">{{ subtitle }}</span>
-      </span>
-    </template>
-  </span>
-</template>
-
-<style lang="postcss" src="./SAppBrand.css" scoped></style>

package/src/components/layout/types.ts

@@ -1,28 +0,0 @@
-import type { Component } from 'vue'
-import type { RouteLocationRaw } from 'vue-router'
-import type { BadgeSeverity } from '../shared/data-display/SBadge.vue'
-import type { SAsyncStateContract } from '../shared/feedback/SAsyncState.vue'
-
-export type ShellBadgeSeverity = BadgeSeverity
-
-/**
- * Точное взаимоисключающее состояние рабочей панели.
- * Exact mutually exclusive workbench panel state.
- */
-type WorkbenchPanelAsyncState = Exclude<SAsyncStateContract, { status: 'empty' }> extends infer State
-  ? State extends { status: 'loading' }
-    ? State & { message: string }
-    : State
-  : never
-
-export type WorkbenchPanelState = { status: 'creating' } | WorkbenchPanelAsyncState
-
-export interface AppShellNavigationItem {
-  key: string
-  label: string
-  to: RouteLocationRaw
-  icon?: Component
-  badgeLabel?: string
-  badgeSeverity?: ShellBadgeSeverity
-  active?: boolean
-}

package/src/components/shared/_internal/SDialogSurface.vue

@@ -1,124 +0,0 @@
-<template>
-  <component
-    :is="rootTag"
-    :ref="setSurfaceElement"
-    v-bind="$attrs"
-    class="s-dialog-surface"
-    :data-presentation="presentation.kind"
-    :data-layout="surfaceLayout"
-    :data-size="presentation.size"
-    :data-placement="drawerPresentation?.placement"
-    :data-surface="modalPresentation?.surface"
-    :data-scroll="modalPresentation?.scrollBehavior"
-    tabindex="-1"
-    role="dialog"
-    aria-modal="true"
-    :aria-labelledby="hasHeader ? titleId : undefined"
-    :aria-label="hasHeader ? undefined : accessibleName"
-  >
-    <component :is="headerTag" v-if="hasHeader" class="s-dialog-surface__header">
-      <component :is="headingTag" :id="titleId" class="s-dialog-surface__title">
-        <slot name="header">{{ title }}</slot>
-      </component>
-      <SButton
-        v-if="closable"
-        :leading-icon="X"
-        icon-only
-        appearance="text"
-        size="sm"
-        :aria-label="t('dialog.close')"
-        @click="requestClose"
-      />
-    </component>
-
-    <div class="s-dialog-surface__body">
-      <slot />
-    </div>
-
-    <div
-      v-if="hasFooter"
-      class="s-dialog-surface__footer"
-      :data-layout="hasSplitFooter ? 'split' : 'end'"
-    >
-      <template v-if="hasSplitFooter">
-        <div v-if="$slots['footer-start']" class="s-dialog-surface__footer-start">
-          <slot name="footer-start" :close="requestClose" />
-        </div>
-        <div v-if="$slots['footer-end']" class="s-dialog-surface__footer-end">
-          <slot name="footer-end" :close="requestClose" />
-        </div>
-      </template>
-      <slot v-else name="footer" :close="requestClose" />
-    </div>
-  </component>
-</template>
-
-<script setup lang="ts">
-import { computed, useId, useSlots, type ComponentPublicInstance } from 'vue'
-import { useUiKitLocale } from '../../../composables/useUiKitLocale'
-
-import { X } from '../../icons/sputnigUiIcons'
-import SButton from '../controls/SButton.vue'
-import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
-import {
-  assertDialogSurfacePresentation,
-  type DialogSurfacePresentation,
-  type ModalDialogSurfacePresentation,
-} from './dialogSurface'
-
-defineOptions({ inheritAttrs: false })
-
-const props = defineProps<{
-  presentation: DialogSurfacePresentation
-  title?: string
-  accessibleName: string
-  closable: boolean
-  setSurfaceElement: (element: Element | ComponentPublicInstance | null) => void
-}>()
-
-const emit = defineEmits<{
-  'request-close': []
-}>()
-const { t } = useUiKitLocale()
-
-defineSlots<{
-  header?: () => unknown
-  default?: () => unknown
-  footer?: (properties: { close: () => void }) => unknown
-  'footer-start'?: (properties: { close: () => void }) => unknown
-  'footer-end'?: (properties: { close: () => void }) => unknown
-}>()
-
-assertDialogSurfacePresentation(props.presentation)
-useInteractiveLeafRegistration({ owner: 'SDialogSurface' })
-
-const slots = useSlots()
-const titleId = `s-dialog-title-${useId()}`
-const isModal = computed(() => props.presentation.kind === 'modal')
-const modalPresentation = computed<ModalDialogSurfacePresentation | null>(() => (
-  props.presentation.kind === 'modal' ? props.presentation : null
-))
-const drawerPresentation = computed(() => (
-  props.presentation.kind === 'drawer' ? props.presentation : null
-))
-const hasHeader = computed(() => Boolean(props.title || slots.header))
-const hasSplitFooter = computed(() => isModal.value && Boolean(slots['footer-start'] || slots['footer-end']))
-const hasFooter = computed(() => hasSplitFooter.value || Boolean(slots.footer))
-const rootTag = 'div'
-const headerTag = computed(() => (isModal.value ? 'div' : 'header'))
-const headingTag = computed(() => (isModal.value ? 'h3' : 'h2'))
-type DialogSurfaceLayout = 'contained' | 'fullscreen' | 'side-panel' | 'mobile-fullscreen' | 'bottom-sheet'
-
-const surfaceLayout = computed<DialogSurfaceLayout>(() => {
-  const presentation = props.presentation
-  if (presentation.kind === 'drawer') {
-    if (presentation.placement === 'bottom') return 'bottom-sheet'
-    return presentation.mobileFullScreen ? 'mobile-fullscreen' : 'side-panel'
-  }
-  return presentation.fullscreen || presentation.size === 'full' ? 'fullscreen' : 'contained'
-})
-
-const requestClose = (): void => emit('request-close')
-</script>
-
-<style lang="postcss" src="./SDialogSurface.css" scoped></style>

package/src/components/shared/_internal/SDisclosureSummary.vue

@@ -1,121 +0,0 @@
-<template>
-  <span
-    class="s-disclosure-summary"
-    :data-summary-typography="typography"
-    :data-summary-case="casing"
-  >
-    <span
-      v-if="statePresentation"
-      class="s-disclosure-summary__state"
-      :data-summary-state="state"
-      :data-summary-state-tone="statePresentation.tone"
-      aria-hidden="true"
-    >
-      <SProgressIndicator
-        v-if="state === 'progress'"
-        :accessibility="{ mode: 'decorative' }"
-        size="xs"
-        tone="info"
-      />
-      <component v-else :is="statePresentation.icon" class="s-disclosure-summary__state-icon" />
-    </span>
-    <span class="s-disclosure-summary__title">{{ title }}</span>
-    <span v-if="facts.length > 0" class="s-disclosure-summary__facts">
-      <span
-        v-for="fact in facts"
-        :key="fact.id"
-        class="s-disclosure-summary__fact"
-        :data-summary-fact-tone="fact.tone ?? 'neutral'"
-      >
-        <span v-if="fact.label" class="s-disclosure-summary__fact-label">{{ fact.label }}</span>
-        <span class="s-disclosure-summary__fact-value">{{ fact.value }}</span>
-      </span>
-    </span>
-    <span v-if="badges.length > 0" class="s-disclosure-summary__badges">
-      <SBadge
-        v-for="badge in badges"
-        :key="badge.id"
-        :severity="badge.severity ?? 'secondary'"
-        size="xs"
-        :title="badge.title"
-      >
-        {{ badge.label }}
-      </SBadge>
-    </span>
-    <span v-if="status" class="s-disclosure-summary__status">
-      <SStatus
-        :label="status.label"
-        :tone="status.tone ?? 'neutral'"
-        :title="status.title"
-        :icon="null"
-        size="xs"
-      />
-    </span>
-  </span>
-</template>
-
-<script setup lang="ts">
-import { computed, watchEffect } from 'vue'
-
-import { resolveFeedbackIndicator } from '../../../internal/feedbackPresentation'
-import { validateNonEmptyString } from '../../../internal/runtimeContract'
-import SBadge from '../data-display/SBadge.vue'
-import SProgressIndicator from '../data-display/SProgressIndicator.vue'
-import SStatus from '../data-display/SStatus.vue'
-import type {
-  SDisclosureSummaryBadge,
-  SDisclosureSummaryCase,
-  SDisclosureSummaryFact,
-  SDisclosureSummaryState,
-  SDisclosureSummaryStatus,
-  SDisclosureSummaryTypography,
-} from '../containers/disclosureSummary'
-
-const props = withDefaults(defineProps<{
-  title: string
-  typography?: SDisclosureSummaryTypography
-  casing?: SDisclosureSummaryCase
-  state?: SDisclosureSummaryState
-  facts?: readonly SDisclosureSummaryFact[]
-  badges?: readonly SDisclosureSummaryBadge[]
-  status?: SDisclosureSummaryStatus
-}>(), {
-  typography: 'default',
-  casing: 'sentence',
-  state: undefined,
-  facts: () => [],
-  badges: () => [],
-  status: undefined,
-})
-
-const statePresentation = computed(() => props.state ? resolveFeedbackIndicator(props.state) : null)
-
-watchEffect(() => {
-  if (props.title.trim().length === 0) {
-    throw new Error('SDisclosureSummary: title must be a non-empty string')
-  }
-  const factIds = new Set<string>()
-  props.facts.forEach((fact, index) => {
-    const id = validateNonEmptyString('SDisclosureSummary', `facts[${index}].id`, fact.id)
-    if (factIds.has(id)) throw new Error(`SDisclosureSummary: duplicate facts id "${id}"`)
-    factIds.add(id)
-    if (String(fact.value).trim().length === 0) {
-      throw new Error(`SDisclosureSummary: facts[${index}].value must be non-empty`)
-    }
-  })
-  const badgeIds = new Set<string>()
-  props.badges.forEach((badge, index) => {
-    const id = validateNonEmptyString('SDisclosureSummary', `badges[${index}].id`, badge.id)
-    if (badgeIds.has(id)) throw new Error(`SDisclosureSummary: duplicate badges id "${id}"`)
-    badgeIds.add(id)
-    if (String(badge.label).trim().length === 0) {
-      throw new Error(`SDisclosureSummary: badges[${index}].label must be non-empty`)
-    }
-  })
-  if (props.status && props.status.label.trim().length === 0) {
-    throw new Error('SDisclosureSummary: status.label must be a non-empty string')
-  }
-})
-</script>
-
-<style lang="postcss" src="./SDisclosureSummary.css" scoped></style>