@pgcorp/ui-kit 0.10.0 → 0.10.2

package/src/components/layout/SAppShell.vue

@@ -1,235 +0,0 @@
-<script setup lang="ts">
-import { computed, getCurrentInstance, useSlots } from 'vue'
-import type { RouteLocationRaw } from 'vue-router'
-import { hasOwn } from '../../internal/es2020'
-import { useOwnedAttrs } from '../../internal/ownedAttrs'
-import { validateNonEmptyString } from '../../internal/runtimeContract'
-import { useUiKitLocale } from '../../composables/useUiKitLocale'
-import SBadge from '../shared/data-display/SBadge.vue'
-import SPanel from '../shared/containers/SPanel.vue'
-import SLink from '../shared/controls/SLink.vue'
-import type { AppShellNavigationItem, ShellBadgeSeverity } from './types'
-import SAppBrand from './_internal/SAppBrand.vue'
-
-defineOptions({ inheritAttrs: false })
-
-interface SharedProps {
-  brandTitle: string
-  brandTo?: RouteLocationRaw | null
-  brandSubtitle?: string
-}
-
-export interface SAppShellAppProps extends SharedProps {
-  mode?: 'app'
-  pageEyebrow?: string
-  pageTitle: string
-  pageBadgeLabel?: string
-  pageBadgeSeverity?: ShellBadgeSeverity
-  userLabel?: string
-  navigation?: readonly AppShellNavigationItem[]
-  navigationLabel?: string
-  showSidebar?: boolean
-}
-
-export interface SAppShellPublicProps extends SharedProps {
-  mode: 'public'
-  pageEyebrow?: never
-  pageTitle?: never
-  pageBadgeLabel?: never
-  pageBadgeSeverity?: never
-  userLabel?: never
-  navigation?: never
-  navigationLabel?: never
-  showSidebar?: never
-}
-
-export type Props = SAppShellAppProps | SAppShellPublicProps
-
-interface RuntimeProps extends SharedProps {
-  mode?: 'app' | 'public'
-  pageEyebrow?: string
-  pageTitle?: string
-  pageBadgeLabel?: string
-  pageBadgeSeverity?: ShellBadgeSeverity
-  userLabel?: string
-  navigation?: readonly AppShellNavigationItem[]
-  navigationLabel?: string
-  showSidebar?: boolean
-}
-
-const props = defineProps<RuntimeProps>()
-const { t } = useUiKitLocale()
-function requireComponentInstance() {
-  const instance = getCurrentInstance()
-  if (!instance) throw new Error('SAppShell: component instance unavailable during setup')
-  return instance
-}
-const componentInstance = requireComponentInstance()
-const slots = useSlots()
-const hasBrandIcon = computed(() => Boolean(slots['brand-icon']))
-const hasBrandLogo = computed(() => Boolean(slots['brand-logo']))
-
-type ResolvedShell =
-  | { mode: 'public' }
-  | {
-      mode: 'app'
-      navigation: readonly AppShellNavigationItem[]
-      navigationLabel: string
-      pageBadgeLabel: string
-      pageBadgeSeverity: ShellBadgeSeverity
-      pageEyebrow: string
-      pageTitle: string
-      showSidebar: boolean
-      userLabel: string
-    }
-
-const appOnlyPropNames = [
-  'pageEyebrow',
-  'pageTitle',
-  'pageBadgeLabel',
-  'pageBadgeSeverity',
-  'userLabel',
-  'navigation',
-  'navigationLabel',
-  'showSidebar',
-] as const
-
-function toKebabCase(value: string): string {
-  return value.replace(/[A-Z]/g, (character) => `-${character.toLowerCase()}`)
-}
-
-function hasExplicitProp(propName: string): boolean {
-  const vnodeProps = componentInstance.vnode.props
-  return vnodeProps !== null && (
-    hasOwn(vnodeProps, propName)
-    || hasOwn(vnodeProps, toKebabCase(propName))
-  )
-}
-
-const shell = computed<ResolvedShell>(() => {
-  validateNonEmptyString('SAppShell', 'brandTitle', props.brandTitle)
-  if (props.mode === 'public') {
-    for (const propName of appOnlyPropNames) {
-      if (hasExplicitProp(propName)) {
-        throw new TypeError(`SAppShell: app-only prop '${propName}' недоступен в public mode / is unavailable in public mode`)
-      }
-    }
-    return { mode: 'public' }
-  }
-
-  return {
-    mode: 'app',
-    navigation: props.navigation ?? [],
-    navigationLabel: validateNonEmptyString(
-      'SAppShell',
-      'navigationLabel',
-      props.navigationLabel ?? t('navigation.main'),
-    ),
-    pageBadgeLabel: props.pageBadgeLabel ?? '',
-    pageBadgeSeverity: props.pageBadgeSeverity ?? 'info',
-    pageEyebrow: props.pageEyebrow ?? '',
-    pageTitle: validateNonEmptyString('SAppShell', 'pageTitle', props.pageTitle),
-    showSidebar: hasExplicitProp('showSidebar') ? props.showSidebar === true : true,
-    userLabel: props.userLabel ?? '',
-  }
-})
-
-const shouldShowSidebar = computed(() => shell.value.mode === 'app' && shell.value.showSidebar)
-const ownedAttrs = useOwnedAttrs({ component: 'SAppShell', owner: 'application shell root' })
-</script>
-
-<template>
-  <div v-bind="ownedAttrs.bindings()" class="min-h-screen">
-    <div class="mx-auto flex min-h-screen max-w-[1680px] gap-6 p-4 lg:p-6">
-      <aside
-        v-if="shouldShowSidebar"
-        class="hidden w-72 shrink-0 self-start lg:flex lg:flex-col"
-      >
-        <div class="sticky top-0">
-          <SPanel surface-overflow="clip">
-            <template #header>
-              <SAppBrand
-                :title="brandTitle"
-                :subtitle="brandSubtitle"
-                :to="brandTo"
-                placement="sidebar"
-              >
-                <template v-if="hasBrandLogo" #logo><slot name="brand-logo" /></template>
-                <template v-if="hasBrandIcon" #icon><slot name="brand-icon" /></template>
-              </SAppBrand>
-            </template>
-            <nav class="space-y-2 px-2 pb-2" :aria-label="shell.mode === 'app' ? shell.navigationLabel : undefined">
-              <SLink
-                v-for="item in shell.mode === 'app' ? shell.navigation : []"
-                :key="item.key"
-                :to="item.to"
-                variant="navigation"
-                width="full"
-                :active="item.active"
-                :leading-icon="item.icon"
-              >
-                {{ item.label }}
-                <template v-if="item.badgeLabel" #trailing>
-                  <SBadge :severity="item.badgeSeverity ?? 'secondary'">
-                    {{ item.badgeLabel }}
-                  </SBadge>
-                </template>
-              </SLink>
-            </nav>
-            <template #actions>
-              <slot name="sidebar-actions" />
-            </template>
-          </SPanel>
-        </div>
-      </aside>
-
-      <div class="min-w-0 flex-1">
-        <header
-          class="mb-6 px-1"
-          :class="shell.mode === 'app'
-            ? 'rounded-[1.4rem] border border-surface-200/80 bg-surface-0/88 px-4 py-3 shadow-sm backdrop-blur dark:border-surface-700 dark:bg-surface-900/74'
-            : 'rounded-[var(--s-app-shell-floating-radius)] border border-surface-200/80 bg-surface-0/82 px-4 py-3 shadow-[var(--s-app-shell-floating-shadow)] backdrop-blur dark:border-surface-700 dark:bg-surface-900/72'"
-        >
-          <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
-            <div v-if="shell.mode === 'app'" class="min-w-0">
-              <div v-if="shell.pageEyebrow" class="text-xs uppercase tracking-[0.3em] text-surface-500">{{ shell.pageEyebrow }}</div>
-              <div class="flex flex-wrap items-center gap-2">
-                <h1 class="text-lg font-semibold">{{ shell.pageTitle }}</h1>
-                <SBadge v-if="shell.pageBadgeLabel" :severity="shell.pageBadgeSeverity">
-                  {{ shell.pageBadgeLabel }}
-                </SBadge>
-              </div>
-              <div v-if="shell.userLabel" class="text-sm text-surface-500">
-                {{ shell.userLabel }}
-              </div>
-            </div>
-
-            <SAppBrand
-              v-else
-              :title="brandTitle"
-              :subtitle="brandSubtitle"
-              :to="brandTo"
-              placement="header"
-            >
-              <template v-if="hasBrandLogo" #logo>
-                <slot name="brand-logo" />
-              </template>
-              <template v-if="hasBrandIcon" #icon>
-                <slot name="brand-icon" />
-              </template>
-            </SAppBrand>
-
-            <div class="flex flex-wrap items-center gap-2">
-              <slot name="header-actions" />
-            </div>
-          </div>
-        </header>
-
-        <slot name="banner" />
-        <main class="pb-8 pt-1">
-          <slot />
-        </main>
-      </div>
-    </div>
-  </div>
-</template>

package/src/components/layout/SDockRegion.vue

@@ -1,202 +0,0 @@
-<template>
-  <div
-    v-if="contract.visible"
-    v-bind="ownedAttrs.bindings()"
-    :class="containerClasses"
-    :data-dock-placement="contract.placement"
-    :data-responsive-size="contract.responsiveSize"
-  >
-    <template v-for="part in orderedParts" :key="part">
-      <SResizeHandle
-        v-if="part === 'handle'"
-        :orientation="handleOrientation"
-        :value-direction="handleValueDirection"
-        :variant="contract.handleVariant"
-        :label="resolvedResizeLabel"
-        :data-test-id="contract.resizeTestId ?? `${contract.placement}-dock-resizer`"
-        :hidden-on-narrow="contract.hideResizeHandleOnNarrow"
-        :resizing="effectiveResizing"
-        :value="size"
-        :min="minSize"
-        :max="maxSize"
-        :step="resizeStep"
-        @resize-start="handleResizeStart"
-        @resize="emit('resize', $event)"
-        @resize-end="handleResizeEnd"
-      />
-
-      <div
-        v-else
-        :data-testid="`${placement}-dock-panel`"
-        :class="panelClasses"
-        :style="panelStyle"
-      >
-        <slot />
-      </div>
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, type CSSProperties } from 'vue'
-import { useUiKitLocale } from '../../composables/useUiKitLocale'
-import { useOwnedAttrs } from '../../internal/ownedAttrs'
-import {
-  validateBoolean,
-  validateExactString,
-  validateNonEmptyString,
-} from '../../internal/runtimeContract'
-import SResizeHandle from './SResizeHandle.vue'
-
-defineOptions({ inheritAttrs: false })
-
-type DockPlacement = 'left' | 'right' | 'bottom'
-
-const props = withDefaults(defineProps<{
-  placement: DockPlacement
-  visible: boolean
-  size: number
-  minSize?: number
-  maxSize?: number
-  resizeStep?: number
-  resizing?: boolean
-  surface?: 'base' | 'subtle' | 'transparent'
-  elevated?: boolean
-  resizeLabel?: string
-  resizeTestId?: string
-  handleVariant?: 'inline' | 'overlay'
-  hideResizeHandleOnNarrow?: boolean
-  responsiveSize?: 'fixed' | 'fill-on-narrow'
-}>(), {
-  minSize: 0,
-  maxSize: 4096,
-  resizeStep: 10,
-  resizing: false,
-  surface: 'base',
-  elevated: false,
-  resizeLabel: undefined,
-  resizeTestId: undefined,
-  handleVariant: 'inline',
-  hideResizeHandleOnNarrow: false,
-  responsiveSize: 'fixed',
-})
-const { t } = useUiKitLocale()
-
-const emit = defineEmits<{
-  (event: 'resize-start', pointerEvent: PointerEvent): void
-  (event: 'resize', size: number): void
-  (event: 'resize-end', size: number): void
-}>()
-
-const pointerResizing = ref(false)
-const ownedAttrs = useOwnedAttrs({ component: 'SDockRegion', owner: 'dock region root' })
-const contract = computed(() => ({
-  placement: validateExactString(
-    'SDockRegion', 'placement', props.placement, ['left', 'right', 'bottom'] as const,
-  ),
-  visible: validateBoolean('SDockRegion', 'visible', props.visible),
-  surface: validateExactString(
-    'SDockRegion', 'surface', props.surface, ['base', 'subtle', 'transparent'] as const,
-  ),
-  elevated: validateBoolean('SDockRegion', 'elevated', props.elevated),
-  handleVariant: validateExactString(
-    'SDockRegion', 'handleVariant', props.handleVariant, ['inline', 'overlay'] as const,
-  ),
-  hideResizeHandleOnNarrow: validateBoolean(
-    'SDockRegion', 'hideResizeHandleOnNarrow', props.hideResizeHandleOnNarrow,
-  ),
-  responsiveSize: validateExactString(
-    'SDockRegion', 'responsiveSize', props.responsiveSize, ['fixed', 'fill-on-narrow'] as const,
-  ),
-  resizeTestId: props.resizeTestId === undefined
-    ? undefined
-    : validateNonEmptyString('SDockRegion', 'resizeTestId', props.resizeTestId),
-}))
-const effectiveResizing = computed(() => props.resizing || pointerResizing.value)
-
-const handleOrientation = computed(() => contract.value.placement === 'bottom' ? 'horizontal' : 'vertical')
-const handleValueDirection = computed(() => contract.value.placement === 'left' ? 'forward' : 'reverse')
-const orderedParts = computed<readonly ('panel' | 'handle')[]>(() => contract.value.placement === 'left'
-  ? ['panel', 'handle']
-  : ['handle', 'panel'])
-
-const resolvedResizeLabel = computed(() => {
-  if (props.resizeLabel !== undefined) {
-    return validateNonEmptyString('SDockRegion', 'resizeLabel', props.resizeLabel)
-  }
-  if (contract.value.placement === 'bottom') return t('layout.resizeBottomPanel')
-  if (contract.value.placement === 'left') return t('layout.resizeLeftPanel')
-  return t('layout.resizeRightPanel')
-})
-
-function handleResizeStart(event: PointerEvent): void {
-  pointerResizing.value = true
-  emit('resize-start', event)
-}
-
-function handleResizeEnd(size: number): void {
-  pointerResizing.value = false
-  emit('resize-end', size)
-}
-
-const containerClasses = computed(() => contract.value.placement === 'bottom'
-  ? 'contents'
-  : ['flex min-h-0 flex-shrink-0', { relative: contract.value.handleVariant === 'overlay' }])
-
-const panelClasses = computed(() => [
-  's-dock-region__panel relative flex-shrink-0',
-  contract.value.placement === 'bottom' ? 'flex min-h-0 flex-col' : 'h-full min-h-0',
-  contract.value.surface === 'base'
-    ? 'bg-surface-0 dark:bg-surface-900'
-    : contract.value.surface === 'subtle'
-      ? 'bg-surface-50 dark:bg-surface-850'
-      : 'bg-transparent',
-  {
-    'transition-none': effectiveResizing.value,
-    'z-[var(--s-layer-navigation)] overflow-visible': contract.value.elevated,
-    'z-[var(--s-layer-affordance)] overflow-hidden': contract.value.placement === 'bottom' && !contract.value.elevated,
-  },
-])
-
-const panelStyle = computed<CSSProperties>(() => {
-  if (![props.size, props.minSize, props.maxSize, props.resizeStep].every(Number.isFinite)) {
-    throw new RangeError('SDockRegion: size, minSize, maxSize и resizeStep должны быть конечными числами')
-  }
-  if (props.minSize > props.maxSize) {
-    throw new RangeError(`SDockRegion: minSize ${props.minSize} не может превышать maxSize ${props.maxSize}`)
-  }
-  if (props.size < props.minSize || props.size > props.maxSize) {
-    throw new RangeError(
-      `SDockRegion: size ${props.size} должен находиться в диапазоне ${props.minSize}..${props.maxSize}`,
-    )
-  }
-  if (props.resizeStep <= 0) {
-    throw new RangeError('SDockRegion: resizeStep должен быть больше нуля')
-  }
-
-  return { '--s-dock-region-size': `${props.size}px` }
-})
-</script>
-
-<style scoped>
-.s-dock-region__panel {
-  width: var(--s-dock-region-size);
-}
-
-[data-dock-placement='bottom'] > .s-dock-region__panel {
-  width: 100%;
-  height: var(--s-dock-region-size);
-}
-
-@media (max-width: 1023px) {
-  [data-responsive-size='fill-on-narrow'] {
-    width: 100%;
-    height: 100%;
-  }
-
-  [data-responsive-size='fill-on-narrow'] > .s-dock-region__panel {
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>