@pgcorp/ui-kit 0.1.0

package/src/components/layout/SSideMenuButton.vue

@@ -0,0 +1,104 @@
+<template>
+  <div :class="{ 'mt-2': offsetTop }">
+    <SDropdownMenu
+      v-if="contextMenuItems.length && contextMenuTrigger === 'click'"
+      v-slot="{ triggerAttrs }"
+      :items="contextMenuItems"
+      @select="$emit('context-menu-select', $event)"
+    >
+      <SButton
+        v-bind="{ ...buttonProps, ...triggerAttrs }"
+        @click="$emit('click', $event)"
+      />
+    </SDropdownMenu>
+    <SContextMenu
+      v-else-if="contextMenuItems.length"
+      :items="contextMenuItems"
+      :trigger="contextMenuTrigger"
+      @select="$emit('context-menu-select', $event)"
+    >
+      <SButton v-bind="buttonProps" @click="$emit('click', $event)" />
+    </SContextMenu>
+    <SButton v-else v-bind="buttonProps" @click="$emit('click', $event)" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, type Component } from 'vue'
+import SContextMenu from '@pgcorp/ui-kit/shared/controls/SContextMenu.vue'
+import SDropdownMenu from '@pgcorp/ui-kit/shared/controls/SDropdownMenu.vue'
+import SButton from '@pgcorp/ui-kit/shared/controls/SButton.vue'
+import type { SMenuEntry, SMenuSelectableEntry } from '@pgcorp/ui-kit/shared/controls/menu'
+import type { BadgeSeverity } from '@pgcorp/ui-kit/shared/data-display/SBadge.vue'
+import { useOwnedAttrs } from '../../internal/ownedAttrs'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<{
+  title: string
+  icon: Component
+  badge?: string | number
+  badgeSeverity?: BadgeSeverity
+  active?: boolean
+  offsetTop?: boolean
+  disabled?: boolean
+  showLabel?: boolean
+  shortcut?: string | null
+  contextMenuItems?: readonly SMenuEntry[]
+  contextMenuTrigger?: 'contextmenu' | 'click' | 'both'
+  autofocus?: boolean
+}>(), {
+  active: false,
+  badge: undefined,
+  badgeSeverity: 'secondary',
+  offsetTop: false,
+  disabled: false,
+  showLabel: false,
+  shortcut: null,
+  contextMenuItems: () => [],
+  contextMenuTrigger: 'contextmenu',
+  autofocus: false,
+})
+
+const ownedAttrs = useOwnedAttrs({ component: 'SSideMenuButton', owner: 'descendant SButton' })
+
+defineEmits<{
+  (e: 'click', event: MouseEvent): void
+  (e: 'context-menu-select', entry: SMenuSelectableEntry): void
+}>()
+
+const resolvedTitle = computed(() => {
+  if (!props.shortcut) return props.title
+  return `${props.title} (${props.shortcut})`
+})
+
+const buttonProps = computed(() => {
+  const forwardedAttrs = ownedAttrs.bindings()
+  const forwardedDataTestId = forwardedAttrs['data-testid']
+  if (forwardedDataTestId !== undefined && typeof forwardedDataTestId !== 'string') {
+    throw new Error('SSideMenuButton: native attribute "data-testid" must be a string')
+  }
+  return {
+    ...forwardedAttrs,
+    'aria-current': props.active && !props.disabled ? 'page' as const : undefined,
+    'aria-label': props.title,
+    'autofocus': props.autofocus,
+    'data-testid': forwardedDataTestId,
+    'title': resolvedTitle.value,
+    'appearance': props.active && !props.disabled ? 'soft' as const : 'ghost' as const,
+    'badge': props.badge,
+    'badgeSeverity': props.badgeSeverity,
+    'contentAlign': props.showLabel ? 'start' as const : 'center' as const,
+    'disabled': props.disabled,
+    'iconOnly': !props.showLabel,
+    'label': props.showLabel ? props.title : undefined,
+    'leadingIcon': props.icon,
+    'severity': props.active && !props.disabled ? 'primary' as const : 'secondary' as const,
+    'shape': props.showLabel ? 'row' as const : 'circle' as const,
+    'size': 'md' as const,
+    'width': props.showLabel ? 'full' as const : 'auto' as const,
+  }
+})
+</script>

package/src/components/layout/SSideMenuRail.vue

@@ -0,0 +1,47 @@
+<template>
+  <div
+    v-if="visible"
+    v-bind="ownedAttrs.bindings()"
+    class="flex h-full min-h-0 flex-shrink-0 flex-col gap-1 overflow-x-hidden overflow-y-auto border-r border-surface-200 bg-surface-0 p-1 transition-[width] duration-[var(--s-motion-fast)] dark:border-surface-800 dark:bg-surface-950"
+    :class="expanded ? 'w-56 items-stretch' : 'w-12 items-center'"
+  >
+    <div class="flex flex-col gap-1" :class="expanded ? 'items-stretch' : 'items-center'">
+      <slot name="top" />
+    </div>
+
+    <div
+      class="mt-auto flex flex-col gap-1"
+      :class="expanded ? 'items-stretch' : 'items-center'"
+    >
+      <slot name="bottom" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { watchEffect } from 'vue'
+import { useOwnedAttrs } from '../../internal/ownedAttrs'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<{
+  visible?: boolean
+  expanded?: boolean
+}>(), {
+  visible: true,
+  expanded: false,
+})
+
+const ownedAttrs = useOwnedAttrs({
+  component: 'SSideMenuRail',
+  owner: 'visible side-menu rail root',
+})
+
+watchEffect(() => {
+  if (!props.visible) {
+    ownedAttrs.reject('side-menu rail is hidden')
+    return
+  }
+  ownedAttrs.bindings()
+})
+</script>

package/src/components/layout/SStack.css

@@ -0,0 +1,25 @@
+@reference "../../styles/reference.css";
+
+.s-stack {
+  @apply flex min-h-0 min-w-0 flex-col;
+}
+
+.s-stack[data-fill='container'] {
+  @apply h-full flex-1;
+}
+
+.s-stack[data-align='start'] { @apply items-start; }
+.s-stack[data-align='center'] { @apply items-center; }
+.s-stack[data-align='end'] { @apply items-end; }
+.s-stack[data-align='stretch'] { @apply items-stretch; }
+
+.s-stack[data-gap='tight'] { gap: 0.25rem; }
+.s-stack[data-gap='control'] { gap: var(--s-space-control-gap); }
+.s-stack[data-gap='content'] { gap: var(--s-space-content-gap); }
+.s-stack[data-gap='section'] { gap: var(--s-space-section-gap); }
+.s-stack[data-gap='panel'] { gap: var(--s-space-panel-gap); }
+
+.s-stack[data-padding-end='control'] { padding-block-end: var(--s-space-control-gap); }
+.s-stack[data-padding-end='content'] { padding-block-end: var(--s-space-content-gap); }
+.s-stack[data-padding-end='section'] { padding-block-end: var(--s-space-section-gap); }
+.s-stack[data-padding-end='panel'] { padding-block-end: var(--s-space-panel-gap); }

package/src/components/layout/SStack.vue

@@ -0,0 +1,57 @@
+<template>
+  <component
+    :is="as"
+    v-bind="ownedAttrs.bindings()"
+    class="s-stack"
+    :data-gap="gap"
+    :data-padding-end="paddingEnd"
+    :data-fill="fill"
+    :data-align="align"
+  >
+    <slot />
+  </component>
+</template>
+
+<script setup lang="ts">
+import type { VNodeChild } from 'vue'
+import { useOwnedAttrs } from '../../internal/ownedAttrs'
+
+defineOptions({ inheritAttrs: false })
+
+export type SStackGap = 'none' | 'tight' | 'control' | 'content' | 'section' | 'panel'
+export type SStackPadding = 'none' | 'control' | 'content' | 'section' | 'panel'
+
+/**
+ * Вертикальный layout-owner с ограниченной семантической шкалой интервалов.
+ * Vertical layout owner with a constrained semantic spacing scale.
+ */
+export interface Props {
+  /** Семантический HTML-container без интерактивной роли. / Semantic non-interactive HTML container. */
+  as?: 'div' | 'section' | 'article' | 'ul' | 'ol'
+  /** Интервал между непосредственными участниками. / Gap between direct participants. */
+  gap?: SStackGap
+  /** Нижний внутренний отступ для scroll-safe composition. / End padding for scroll-safe composition. */
+  paddingEnd?: SStackPadding
+  /** Container заполняет доступную высоту. / Container fills the available height. */
+  fill?: 'content' | 'container'
+  /** Выравнивание участников по поперечной оси. / Cross-axis participant alignment. */
+  align?: 'stretch' | 'start' | 'center' | 'end'
+}
+
+withDefaults(defineProps<Props>(), {
+  as: 'div',
+  gap: 'content',
+  paddingEnd: 'none',
+  fill: 'content',
+  align: 'stretch',
+})
+
+const ownedAttrs = useOwnedAttrs({ component: 'SStack', owner: 'semantic stack root' })
+
+defineSlots<{
+  /** Участники вертикальной композиции. / Vertical-composition participants. */
+  default?: () => VNodeChild
+}>()
+</script>
+
+<style lang="postcss" src="./SStack.css" scoped></style>

package/src/components/layout/SStatusBarShell.css

@@ -0,0 +1,15 @@
+@reference "../../styles/reference.css";
+
+.s-status-bar-shell {
+  @apply relative isolate flex h-6 flex-shrink-0 items-center justify-between overflow-hidden border-t border-surface-200 bg-surface-0 px-3 text-xs text-surface-500 dark:border-surface-800 dark:bg-surface-950 dark:text-surface-400;
+  z-index: var(--s-layer-status);
+}
+
+.s-status-bar-shell__left,
+.s-status-bar-shell__right {
+  @apply flex items-center gap-2;
+}
+
+.s-status-bar-shell__left {
+  @apply min-w-0;
+}

package/src/components/layout/SStatusBarShell.vue

@@ -0,0 +1,26 @@
+<template>
+  <footer
+    v-bind="ownedAttrs.bindings()"
+    class="s-status-bar-shell"
+  >
+    <div class="s-status-bar-shell__left">
+      <slot name="left" />
+    </div>
+
+    <div class="s-status-bar-shell__right">
+      <slot name="right" />
+    </div>
+
+    <slot />
+  </footer>
+</template>
+
+<script setup lang="ts">
+import { useOwnedAttrs } from '../../internal/ownedAttrs'
+
+defineOptions({ inheritAttrs: false })
+
+const ownedAttrs = useOwnedAttrs({ component: 'SStatusBarShell', owner: 'status bar footer' })
+</script>
+
+<style lang="postcss" src="./SStatusBarShell.css" scoped></style>

package/src/components/layout/SWorkbenchLayout.vue

@@ -0,0 +1,53 @@
+<template>
+  <div
+    v-bind="ownedAttrs.bindings()"
+    :id="resolvedScrollContainerId"
+    class="flex h-full w-full flex-col text-surface-700 dark:text-surface-200"
+    :class="{ 's-workbench-layout--mobile': isMobile }"
+  >
+    <div v-if="!isMobile" class="s-workbench-layout__header">
+      <slot name="header" />
+    </div>
+    <slot name="filter-banner" />
+    <slot name="search-panel" />
+    <div
+      :id="contentId"
+      class="relative flex-grow"
+      :class="{ 'overflow-y-auto': !isMobile }"
+    >
+      <slot />
+    </div>
+    <slot name="bottom-nav" :scroll-container-id="contentId" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useOwnedAttrs } from '../../internal/ownedAttrs'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<{
+  scrollContainerId?: string
+  isMobile?: boolean
+}>(), {
+  scrollContainerId: 's-workbench-scroll',
+  isMobile: false,
+})
+
+const resolvedScrollContainerId = computed(() => props.scrollContainerId)
+const ownedAttrs = useOwnedAttrs({ component: 'SWorkbenchLayout', owner: 'workbench layout root' })
+const contentId = computed(() => `${resolvedScrollContainerId.value}-content`)
+</script>
+
+<style scoped lang="postcss">
+@reference "../../styles/reference.css";
+
+.s-workbench-layout__header {
+  @apply shrink-0 border-b border-surface-200 px-4 py-3 dark:border-surface-700;
+}
+
+.s-workbench-layout--mobile {
+  padding-top: 0;
+}
+</style>

package/src/components/layout/SWorkbenchPanelShell.css

@@ -0,0 +1,161 @@
+@reference "../../styles/reference.css";
+
+.workbench-panel {
+  @apply flex h-full min-h-0 w-full flex-col bg-surface-0 text-surface-700 dark:bg-surface-900 dark:text-surface-200;
+}
+
+.workbench-header {
+  @apply flex shrink-0 items-center gap-2 border-b border-surface-200 px-2 py-1.5 dark:border-surface-700;
+}
+
+.title-container {
+  @apply min-w-0 flex-grow;
+}
+
+.workbench-shell {
+  @apply relative flex min-h-0 flex-grow gap-2 px-4 pb-0 pt-0;
+  --workbench-shell-bottom-inset: calc(env(safe-area-inset-bottom) + 0.75rem);
+  --workbench-resize-hitbox-clearance: 1rem;
+  --workbench-scroll-end-padding: calc(var(--workbench-shell-bottom-inset) + 0.25rem);
+  --workbench-secondary-overlay-offset: calc(
+    var(--workbench-secondary-size) + var(--workbench-shell-bottom-inset) + var(--workbench-resize-hitbox-clearance)
+  );
+  padding-bottom: 0;
+}
+
+.workbench-shell--none,
+.workbench-shell--right-drawer {
+  @apply flex-row;
+}
+
+.workbench-shell--bottom-dock {
+  @apply flex-col gap-0;
+}
+
+.workbench-shell-main {
+  @apply min-h-0 min-w-0 flex-1 overflow-y-auto;
+  overscroll-behavior: contain;
+  scroll-padding-block-start: 0;
+  scroll-padding-block-end: var(--workbench-scroll-end-padding);
+  scrollbar-gutter: stable;
+}
+
+.workbench-shell--bottom-dock.workbench-shell--secondary-open .workbench-shell-main {
+  scroll-padding-block-end: var(--workbench-secondary-overlay-offset);
+}
+
+.workbench-shell-main-content {
+  @apply flex h-full min-h-full min-w-0 flex-1 flex-col gap-2 pb-0;
+}
+
+.workbench-shell--bottom-dock.workbench-shell--secondary-open .workbench-shell-main-content {
+  padding-bottom: 0;
+}
+
+.workbench-shell--bottom-dock.workbench-shell--secondary-open .workbench-shell-main-content::after {
+  width: 100%;
+  height: var(--workbench-secondary-overlay-offset);
+  display: block;
+  flex-shrink: 0;
+  content: "";
+  pointer-events: none;
+}
+
+.workbench-shell-secondary-wrap {
+  @apply relative min-h-0 min-w-0;
+}
+
+.workbench-shell-secondary-wrap--right-drawer {
+  @apply flex flex-shrink-0 flex-col px-2 py-3;
+}
+
+.workbench-shell-secondary-wrap--bottom-dock {
+  @apply pointer-events-none absolute inset-x-0 bottom-0 z-20 flex w-full flex-col justify-end px-5;
+  height: var(--workbench-secondary-overlay-offset);
+  padding-top: var(--workbench-resize-hitbox-clearance);
+  padding-bottom: var(--workbench-shell-bottom-inset);
+}
+
+.workbench-shell-secondary {
+  @apply relative min-h-0 min-w-0 flex-1 overflow-hidden rounded-xl border border-surface-200/80 bg-surface-0/92 shadow-md backdrop-blur-md dark:border-surface-700/80 dark:bg-surface-850/92;
+  background-clip: padding-box;
+}
+
+.workbench-shell-secondary--right-drawer {
+  @apply flex h-full w-full flex-col;
+}
+
+.workbench-shell-secondary--bottom-dock {
+  @apply pointer-events-auto h-full w-full flex-none flex-col;
+}
+
+.workbench-shell-secondary-header {
+  @apply flex items-center justify-between gap-3 border-b border-surface-200/80 px-4 py-3 dark:border-surface-700/80;
+}
+
+.workbench-shell-secondary-header--sticky {
+  @apply sticky top-0 z-10 bg-surface-0/92 backdrop-blur-md dark:bg-surface-850/92;
+}
+
+.workbench-shell-secondary-header-main {
+  @apply min-w-0 flex-1;
+}
+
+.workbench-shell-secondary-header-actions {
+  @apply flex shrink-0 items-center gap-2;
+}
+
+.workbench-shell-secondary-content {
+  @apply min-h-0 min-w-0 flex-1 overflow-y-auto px-5 pt-4;
+  padding-bottom: calc(var(--workbench-scroll-end-padding) + 1rem);
+  overscroll-behavior: contain;
+  scroll-padding-block-end: var(--workbench-scroll-end-padding);
+  scrollbar-gutter: stable;
+}
+
+.workbench-shell-secondary--right-drawer .workbench-shell-secondary-content {
+  padding-bottom: calc(var(--workbench-scroll-end-padding) + 1.25rem);
+}
+
+.workbench-shell-secondary--bottom-dock .workbench-shell-secondary-content {
+  @apply overflow-hidden p-0;
+  padding-bottom: 0;
+}
+
+.loading-message-full {
+  @apply flex h-full items-center justify-center text-surface-500 dark:text-surface-400;
+}
+
+@media (max-width: 1023px) {
+  .workbench-shell {
+    --workbench-shell-bottom-inset: max(4.25rem, calc(env(safe-area-inset-bottom) + 3.5rem));
+    --workbench-scroll-end-padding: calc(var(--workbench-shell-bottom-inset) + 1rem);
+  }
+
+  .workbench-shell--right-drawer.workbench-shell--secondary-responsive-stack {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .workbench-shell--secondary-responsive-stack .workbench-shell-secondary-wrap--right-drawer {
+    width: 100%;
+    max-width: none;
+    height: min(16rem, 38%);
+    flex: none;
+    padding: 0;
+  }
+
+  .workbench-shell--secondary-responsive-stack
+    .workbench-shell-secondary--right-drawer
+    .workbench-shell-secondary-content {
+    padding-bottom: 1rem;
+  }
+
+  .workbench-shell-secondary-content {
+    padding-bottom: calc(var(--workbench-scroll-end-padding) + 1.75rem);
+  }
+
+  .workbench-shell-secondary--right-drawer .workbench-shell-secondary-content {
+    padding-bottom: calc(var(--workbench-scroll-end-padding) + 2rem);
+  }
+}