@pgcorp/ui-kit 0.1.0

package/src/components/shared/complex/types.ts

@@ -0,0 +1,102 @@
+import type { Component } from 'vue'
+import type { SelectionKey } from '../_internal/useSelectionRoving'
+
+export type { SelectionKey } from '../_internal/useSelectionRoving'
+
+/**
+ * Стратегия множественного выбора узла. / Multiple-selection behavior for an item.
+ *
+ * `descendants` выбирает только явно выбираемые дочерние узлы и не добавляет
+ * контейнер в пользовательский selection set. `self-and-descendants` нужен
+ * доменным деревьям, где родитель одновременно является самостоятельной
+ * сущностью и контейнером.
+ */
+export type TreeMultipleSelection =
+  | 'self'
+  | 'descendants'
+  | 'self-and-descendants'
+  | 'disabled'
+
+export type TreeIcon = Component
+
+/**
+ * Точная модель доменного дерева. / Exact domain-tree model.
+ *
+ * STree не читает поля доменного объекта по строковым именам. Каждый источник
+ * данных обязан один раз объявить identity, label, hierarchy и behavior.
+ */
+export interface TreeModel<T extends object, K extends SelectionKey = SelectionKey> {
+  key(node: T): K
+  label(node: T): string
+  children(node: T): readonly T[]
+  disabled(node: T): boolean
+  icon(node: T): TreeIcon | undefined
+  multipleSelection(node: T): TreeMultipleSelection
+}
+
+/**
+ * Единое состояние выбора. / Single canonical selection state.
+ *
+ * Checkbox является presentation множественного режима, а не отдельной
+ * identity model.
+ */
+export type TreeSelection<K extends SelectionKey = SelectionKey> =
+  | Readonly<{ mode: 'none' }>
+  | Readonly<{ mode: 'single'; key: K | null }>
+  | Readonly<{ mode: 'multiple'; keys: ReadonlySet<K> }>
+
+export type TreeDensity = 'regular' | 'compact'
+export type TreeActionsLayout = 'reserved' | 'overlay'
+export type TreeExpandControl = 'button' | 'row'
+export type TreeSelectionRail = 'hidden' | 'visible'
+export type TreeRowVariant = 'default' | 'table'
+
+export interface STreeProps<T extends object, K extends SelectionKey = SelectionKey> {
+  nodes: readonly T[]
+  model: TreeModel<T, K>
+  label: string
+  selection: TreeSelection<K>
+  expanded?: ReadonlySet<K>
+  density?: TreeDensity
+  actionsLayout?: TreeActionsLayout
+  expandControl?: TreeExpandControl
+  selectionRail?: TreeSelectionRail
+  rowVariant?: TreeRowVariant
+}
+
+export interface TreeNodeEvent<T extends object, K extends SelectionKey = SelectionKey> {
+  node: T
+  key: K
+}
+
+export type TreeActivationOrigin = 'pointer' | 'keyboard'
+
+/**
+ * Активация конечного узла независимо от модели выбора. / Leaf activation independent of selection mode.
+ */
+export interface TreeNodeActivationEvent<T extends object, K extends SelectionKey = SelectionKey>
+  extends TreeNodeEvent<T, K> {
+  origin: TreeActivationOrigin
+}
+
+export interface STreeNodeContentScope<T extends object, K extends SelectionKey = SelectionKey> {
+  node: T
+  key: K
+  isSelected: boolean
+  isPartiallySelected: boolean
+  isExpanded: boolean
+  hasChildren: boolean
+  toggle: () => void
+  select: () => void
+  level: number
+  density: TreeDensity
+  actionsLayout: TreeActionsLayout
+  expandControl: TreeExpandControl
+  selectionRail: TreeSelectionRail
+  rowVariant: TreeRowVariant
+}
+
+export interface STreeNodeActionsScope<T extends object, K extends SelectionKey = SelectionKey> {
+  node: T
+  key: K
+}

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

@@ -0,0 +1,103 @@
+@reference "../../../styles/reference.css";
+
+.s-cloud-chrome {
+  --s-cloud-chrome-row-height: var(--s-density-row-default);
+  --s-cloud-chrome-row-edge-divider: transparent;
+  width: 100%;
+  min-width: 0;
+  color: var(--s-cloud-chrome-foreground);
+  background: var(--s-cloud-chrome-surface);
+  border: 1px solid var(--s-cloud-chrome-border);
+  box-shadow: var(--s-cloud-chrome-shadow);
+  -webkit-backdrop-filter: var(--s-cloud-chrome-backdrop-filter);
+  backdrop-filter: var(--s-cloud-chrome-backdrop-filter);
+  border-radius: var(--s-cloud-chrome-radius);
+}
+
+.s-cloud-chrome[data-density='compact'] {
+  --s-cloud-chrome-row-height: var(--s-density-row-compact);
+}
+
+.s-cloud-chrome[data-density='comfortable'] {
+  --s-cloud-chrome-row-height: var(--s-density-row-comfortable);
+}
+
+.s-cloud-chrome--flat,
+.s-cloud-chrome--embedded {
+  border-color: transparent;
+  box-shadow: none;
+  background: transparent;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+
+.s-cloud-chrome--embedded {
+  --s-cloud-chrome-empty-border-radius: 0;
+  --s-cloud-chrome-empty-border-width: 1px 0;
+  --s-cloud-chrome-empty-background: transparent;
+  border-radius: 0;
+}
+
+.s-cloud-chrome--editing {
+  border-style: dashed;
+}
+
+.s-cloud-chrome--drop-active {
+  background: var(--s-cloud-chrome-drop-surface);
+  border-color: var(--s-cloud-chrome-drop-border);
+}
+
+.s-cloud-chrome--hidden-zone {
+  --s-cloud-chrome-surface: var(--s-cloud-chrome-hidden-surface);
+  --s-cloud-chrome-border: var(--s-cloud-chrome-hidden-border);
+}
+
+.s-cloud-chrome--edge-divider {
+  --s-cloud-chrome-row-edge-divider: var(--s-cloud-chrome-row-divider);
+}
+
+.s-cloud-chrome__header {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  min-height: var(--s-cloud-chrome-row-height);
+  @apply items-center gap-2 px-3 py-0;
+}
+
+.s-cloud-chrome__title {
+  color: var(--s-cloud-chrome-title-foreground);
+  @apply min-w-0 truncate text-xs font-semibold;
+}
+
+.s-cloud-chrome__description {
+  color: var(--s-cloud-chrome-description-foreground);
+  @apply min-w-0 truncate text-[11px];
+}
+
+.s-cloud-chrome__actions {
+  @apply flex shrink-0 items-center gap-1;
+}
+
+.s-cloud-chrome__body {
+  min-height: var(--s-cloud-chrome-row-height);
+  @apply flex min-w-0 flex-col;
+}
+
+.s-cloud-chrome__body[data-padding='default'] {
+  @apply p-1;
+}
+
+.s-cloud-chrome__body[data-padding='none'] {
+  @apply p-0;
+}
+
+.s-cloud-chrome__body[data-gap='default'] {
+  @apply gap-1;
+}
+
+.s-cloud-chrome__body[data-gap='none'] {
+  @apply gap-0;
+}
+
+.s-cloud-chrome__body--empty {
+  min-height: calc(var(--s-cloud-chrome-row-height) + 0.5rem);
+}

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

@@ -0,0 +1,87 @@
+<template>
+  <section
+    v-bind="ownedAttrs.bindings()"
+    class="s-cloud-chrome"
+    :data-density="density"
+    :class="{
+      's-cloud-chrome--editing': editing,
+      's-cloud-chrome--drop-active': dropActive,
+      's-cloud-chrome--hidden-zone': zone === 'hidden',
+      's-cloud-chrome--flat': surface === 'flat',
+      's-cloud-chrome--embedded': surface === 'embedded',
+      's-cloud-chrome--edge-divider': edgeDivider,
+    }"
+  >
+    <div v-if="title || description || $slots.actions" class="s-cloud-chrome__header">
+      <div class="min-w-0">
+        <div v-if="title" class="s-cloud-chrome__title">{{ title }}</div>
+        <div v-if="description" class="s-cloud-chrome__description">{{ description }}</div>
+      </div>
+      <div v-if="$slots.actions" class="s-cloud-chrome__actions">
+        <slot name="actions" />
+      </div>
+    </div>
+    <div
+      class="s-cloud-chrome__body"
+      :class="{ 's-cloud-chrome__body--empty': empty }"
+      :data-zone="zone"
+      :data-padding="resolvedBodyPadding"
+      :data-gap="resolvedBodyGap"
+    >
+      <slot />
+      <SCloudChromeEmpty v-if="empty && emptyText">{{ emptyText }}</SCloudChromeEmpty>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import SCloudChromeEmpty from './SCloudChromeEmpty.vue'
+
+defineOptions({ inheritAttrs: false })
+
+export type SCloudChromeBodySpacing = 'default' | 'none'
+export type SCloudChromeDensity = 'compact' | 'default' | 'comfortable'
+
+export interface Props {
+  title?: string
+  description?: string
+  zone?: 'top' | 'composer' | 'hidden'
+  editing?: boolean
+  dropActive?: boolean
+  empty?: boolean
+  emptyText?: string
+  surface?: 'cloud' | 'flat' | 'embedded'
+  edgeDivider?: boolean
+  bodyPadding?: SCloudChromeBodySpacing
+  bodyGap?: SCloudChromeBodySpacing
+  density?: SCloudChromeDensity
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: undefined,
+  description: undefined,
+  zone: 'top',
+  editing: false,
+  dropActive: false,
+  empty: false,
+  emptyText: '',
+  surface: 'cloud',
+  edgeDivider: false,
+  bodyPadding: undefined,
+  bodyGap: undefined,
+  density: 'default',
+})
+
+const ownedAttrs = useOwnedAttrs({ component: 'SCloudChrome', owner: 'cloud chrome section' })
+
+const resolvedBodyPadding = computed(() => props.bodyPadding ?? (
+  props.surface === 'embedded' ? 'none' : 'default'
+))
+const resolvedBodyGap = computed(() => props.bodyGap ?? (
+  props.surface === 'embedded' ? 'none' : 'default'
+))
+</script>
+
+<style lang="postcss" src="./SCloudChrome.css"></style>

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

@@ -0,0 +1,10 @@
+@reference "../../../styles/reference.css";
+
+.s-cloud-chrome-empty {
+  min-height: var(--s-cloud-chrome-row-height);
+  @apply flex items-center border border-dashed px-3;
+  border-color: var(--s-cloud-chrome-empty-border);
+  border-radius: var(--s-cloud-chrome-empty-border-radius);
+  border-width: var(--s-cloud-chrome-empty-border-width);
+  background: var(--s-cloud-chrome-empty-background);
+}

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

@@ -0,0 +1,18 @@
+<template>
+  <div v-bind="ownedAttrs.bindings()" class="s-cloud-chrome-empty">
+    <SEmptyState presentation="inline" size="sm">
+      <template #title><slot /></template>
+    </SEmptyState>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import SEmptyState from '../data-display/SEmptyState.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const ownedAttrs = useOwnedAttrs({ component: 'SCloudChromeEmpty', owner: 'empty-state root' })
+</script>
+
+<style lang="postcss" src="./SCloudChromeEmpty.css"></style>

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

@@ -0,0 +1,78 @@
+@reference "../../../styles/reference.css";
+
+.s-cloud-chrome-row {
+  min-height: var(--s-cloud-chrome-row-height);
+  height: var(--s-cloud-chrome-row-height);
+  min-width: 0;
+  background: var(--s-cloud-chrome-row-surface);
+  border: 1px solid var(--s-cloud-chrome-row-border);
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  border-radius: var(--s-cloud-chrome-row-radius);
+  @apply grid items-center gap-1 px-1 text-sm;
+}
+
+.s-cloud-chrome-row--embedded {
+  background: transparent;
+  border-color: transparent;
+  border-radius: 0;
+  border-bottom-color: var(--s-cloud-chrome-row-divider);
+  box-shadow: none;
+}
+
+.s-cloud-chrome-row--embedded:first-child {
+  border-top-color: transparent;
+}
+
+.s-cloud-chrome-row--embedded:last-child {
+  border-bottom-color: var(--s-cloud-chrome-row-edge-divider);
+}
+
+.s-cloud-chrome-row--static {
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.s-cloud-chrome-row--hidden {
+  opacity: 0.82;
+}
+
+.s-cloud-chrome-row:focus-within {
+  box-shadow: var(--s-cloud-chrome-row-focus-shadow);
+}
+
+.s-cloud-chrome-row__drag-handle {
+  cursor: grab;
+}
+
+.s-cloud-chrome-row__drag-handle:active {
+  cursor: grabbing;
+}
+
+.s-cloud-chrome-row__content {
+  @apply min-w-0 overflow-hidden;
+}
+
+.s-cloud-chrome-row__actions {
+  @apply flex shrink-0 items-center gap-0.5;
+}
+
+.sortable-chosen.s-cloud-chrome-row {
+  cursor: grabbing;
+}
+
+.sortable-ghost.s-cloud-chrome-row {
+  opacity: 0.34;
+  background: var(--s-cloud-chrome-drop-surface);
+  border-color: var(--s-cloud-chrome-drop-border);
+}
+
+.sortable-drag.s-cloud-chrome-row,
+.sortable-fallback.s-cloud-chrome-row {
+  pointer-events: none;
+  z-index: var(--s-layer-drag);
+  opacity: 0.96;
+  transform: scale(1.01);
+  box-shadow: var(--s-cloud-chrome-drag-shadow);
+  background: var(--s-cloud-chrome-row-drag-surface);
+  -webkit-backdrop-filter: var(--s-cloud-chrome-backdrop-filter);
+  backdrop-filter: var(--s-cloud-chrome-backdrop-filter);
+}

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

@@ -0,0 +1,108 @@
+<template>
+  <div
+    v-bind="ownedAttrs.bindings()"
+    class="s-cloud-chrome-row"
+    :class="{
+      's-cloud-chrome-row--static': !editing || !draggable,
+      's-cloud-chrome-row--hidden': hidden,
+      's-cloud-chrome-row--embedded': appearance === 'embedded',
+    }"
+    :data-item-id="itemId"
+  >
+    <div v-if="editing && draggable" class="s-cloud-chrome-row__drag-handle">
+      <SDragHandle
+        :label="label"
+        :can-move-previous="canMoveUp"
+        :can-move-next="canMoveDown"
+        @drag-start="$emit('drag-start', $event)"
+        @reorder="handleReorder"
+      />
+    </div>
+
+    <div class="s-cloud-chrome-row__content">
+      <slot />
+    </div>
+
+    <div v-if="editing || $slots.actions" class="s-cloud-chrome-row__actions">
+      <slot name="actions" />
+      <SButton
+        v-if="editing && canHide && !hidden"
+        size="sm"
+        severity="secondary"
+        appearance="ghost"
+        icon-only
+        :leading-icon="HideIcon"
+        :title="`Скрыть: ${label}`"
+        :aria-label="`Скрыть: ${label}`"
+        @click="$emit('hide')"
+      />
+      <SButton
+        v-if="editing && canRestore"
+        size="sm"
+        severity="secondary"
+        appearance="ghost"
+        icon-only
+        :leading-icon="ResetIcon"
+        :title="`Вернуть: ${label}`"
+        :aria-label="`Вернуть: ${label}`"
+        @click="$emit('restore')"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getSputnigUiIconComponent } from '../../icons/sputnigUiIcons'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import SButton from '../controls/SButton.vue'
+import SDragHandle from '../controls/SDragHandle.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const HideIcon = getSputnigUiIconComponent('hide')
+const ResetIcon = getSputnigUiIconComponent('reset')
+const ownedAttrs = useOwnedAttrs({ component: 'SCloudChromeRow', owner: 'cloud chrome row root' })
+
+export interface Props {
+  itemId?: string
+  label: string
+  editing?: boolean
+  hidden?: boolean
+  draggable?: boolean
+  canHide?: boolean
+  canRestore?: boolean
+  canMoveUp?: boolean
+  canMoveDown?: boolean
+  appearance?: 'raised' | 'embedded'
+}
+
+withDefaults(defineProps<Props>(), {
+  itemId: undefined,
+  editing: false,
+  hidden: false,
+  draggable: true,
+  canHide: false,
+  canRestore: false,
+  canMoveUp: false,
+  canMoveDown: false,
+  appearance: 'raised',
+})
+
+const emit = defineEmits<{
+  (event: 'drag-start', pointerEvent: PointerEvent): void
+  (event: 'hide'): void
+  (event: 'restore'): void
+  (event: 'move-up'): void
+  (event: 'move-down'): void
+}>()
+
+function handleReorder(direction: -1 | 1): void {
+  if (direction === -1) {
+    emit('move-up')
+    return
+  }
+  emit('move-down')
+}
+</script>
+
+<style lang="postcss" src="./SCloudChromeRow.css"></style>

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

@@ -0,0 +1,57 @@
+@reference "../../../styles/reference.css";
+
+.s-collapsible-panel {
+  @apply min-h-0 min-w-0 w-full relative z-0 flex flex-col flex-none overflow-hidden rounded-lg border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-800;
+}
+
+.s-collapsible-panel[data-surface='plain'] {
+  @apply rounded-none border-0 bg-transparent dark:bg-transparent;
+}
+
+
+.s-collapsible-panel-header {
+  @apply flex min-w-0 shrink-0 items-center gap-1;
+}
+
+.s-collapsible-panel-trigger {
+  @apply min-w-0 flex-1;
+}
+
+.s-collapsible-panel-actions {
+  @apply flex shrink-0 items-center gap-1 pr-1;
+}
+
+.s-collapsible-panel-content {
+  @apply min-w-0 w-full overflow-x-hidden overflow-hidden; /* скрываем контент при анимации высоты */
+  background: inherit;
+  transition: max-height var(--s-motion-standard) ease;
+  will-change: max-height;
+  max-height: 0; /* закрыто по умолчанию */
+}
+
+.s-collapsible-panel-content.is-opened {
+  max-height: none; /* открыто — высота по контенту, остаётся в нормальном потоке */
+  transition: none;
+  overflow-y: visible;
+}
+.s-collapsible-panel-inner {
+  @apply p-4 text-sm text-surface-600 dark:text-surface-300;
+}
+
+/* При анимации скрываем бордеры, чтобы не мигал временный «разделитель» */
+.s-collapsible-panel-content.is-animating {
+  border-color: transparent;
+}
+/* Во время анимации сохраняем нижний бордер заголовка, чтобы не было «пропадания» разделителя */
+/* Density modes */
+.s-collapsible-panel[data-density='compact'] .s-collapsible-panel-inner {
+  @apply p-3;
+}
+
+.s-collapsible-panel[data-density='dense'] .s-collapsible-panel-inner {
+  @apply p-2 text-xs;
+}
+
+.s-collapsible-panel[data-content-padding='none'] > .s-collapsible-panel-content > .s-collapsible-panel-inner {
+  padding: 0;
+}