@pgcorp/ui-kit 0.10.0 → 0.10.1

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

@@ -1,109 +0,0 @@
-<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
-        size="xs"
-        :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="xs"
-        severity="secondary"
-        appearance="ghost"
-        icon-only
-        :leading-icon="HideIcon"
-        :title="`Скрыть: ${label}`"
-        :aria-label="`Скрыть: ${label}`"
-        @click="$emit('hide')"
-      />
-      <SButton
-        v-if="editing && canRestore"
-        size="xs"
-        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.vue

@@ -1,360 +0,0 @@
-<template>
-  <div
-    class="s-collapsible-panel"
-    ref="rootEl"
-    :data-density="density"
-    :data-surface="surface"
-    :data-content-padding="contentPadding"
-    v-bind="ownedAttrs.bindings()"
-  >
-    <div class="s-collapsible-panel-header">
-      <div class="s-collapsible-panel-trigger">
-        <SButton
-          :id="triggerId"
-          :appearance="headerVariant === 'minimal' ? 'ghost' : 'soft'"
-          severity="secondary"
-          shape="row"
-          :size="buttonSize"
-          width="full"
-          content-align="between"
-          :disabled="disabled"
-          :disclosure="{ expanded: isOpen, controls: panelId }"
-          @click="toggle"
-        >
-          <SDisclosureSummary
-            :title="summary"
-            :typography="summaryTypography"
-            :casing="summaryCase"
-            :state="summaryState"
-            :facts="summaryFacts"
-            :badges="summaryBadges"
-            :status="summaryStatus"
-          />
-        </SButton>
-      </div>
-      <div v-if="hasActions" class="s-collapsible-panel-actions">
-        <slot name="actions" />
-      </div>
-    </div>
-    <div
-      :id="panelId"
-      :aria-labelledby="triggerId"
-      role="region"
-      ref="contentWrapEl"
-      class="s-collapsible-panel-content w-full min-w-0"
-      :class="[{ 'min-h-0 flex flex-col grow overflow-y-auto overflow-x-hidden': fill }, { 'no-transition': noAnimation }]"
-      :data-open="isOpen"
-      v-show="shouldShowContent"
-      :style="{
-        ...(noAnimation ? { transition: 'none' } : {})
-      }"
-    >
-      <div ref="contentInnerEl" class="s-collapsible-panel-inner">
-        <slot v-if="hasBeenOpened" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
-import { useOwnedAttrs } from '../../../internal/ownedAttrs'
-import SDisclosureSummary from '../_internal/SDisclosureSummary.vue'
-import SButton from '../controls/SButton.vue'
-import { useDisclosure } from '../../../composables/useDisclosure'
-import type {
-  SDisclosureSummaryBadge,
-  SDisclosureSummaryCase,
-  SDisclosureSummaryFact,
-  SDisclosureSummaryState,
-  SDisclosureSummaryStatus,
-  SDisclosureSummaryTypography,
-} from './disclosureSummary'
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-export interface Props {
-  summary: string
-  summaryTypography?: SDisclosureSummaryTypography
-  summaryCase?: SDisclosureSummaryCase
-  summaryState?: SDisclosureSummaryState
-  summaryFacts?: readonly SDisclosureSummaryFact[]
-  summaryBadges?: readonly SDisclosureSummaryBadge[]
-  summaryStatus?: SDisclosureSummaryStatus
-  defaultOpen?: boolean
-  // Support v-model:open
-  open?: boolean
-  fill?: boolean
-  density?: 'comfortable' | 'compact' | 'dense'
-  contentPadding?: 'density' | 'none'
-  headerVariant?: 'default' | 'minimal'
-  lazy?: boolean
-  noAnimation?: boolean
-  surface?: 'card' | 'plain'
-  id?: string
-  disabled?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  summaryTypography: 'default',
-  summaryCase: 'sentence',
-  summaryState: undefined,
-  summaryFacts: () => [],
-  summaryBadges: () => [],
-  summaryStatus: undefined,
-  defaultOpen: false,
-  open: undefined,
-  fill: false,
-  density: 'comfortable',
-  contentPadding: 'density',
-  headerVariant: 'default',
-  lazy: false,
-  noAnimation: false,
-  surface: 'card',
-  id: undefined,
-  disabled: false,
-})
-
-const slots = defineSlots<{
-  default(): unknown
-  actions?(): unknown
-}>()
-
-const emit = defineEmits<{
-  'update:open': [value: boolean]
-}>()
-const hasActions = computed(() => Boolean(slots.actions))
-const ownedAttrs = useOwnedAttrs({ component: 'SCollapsiblePanel', owner: 'collapsible panel root' })
-const buttonSize = computed(() => props.density === 'comfortable' ? 'md' : 'sm')
-
-const controlledOpen = computed(() => props.open ?? false)
-const disclosure = useDisclosure({
-  id: props.id,
-  open: props.open !== undefined ? controlledOpen : undefined,
-  defaultOpen: props.open === undefined ? props.defaultOpen : undefined,
-  disabled: () => props.disabled,
-  onUpdate: (value) => emit('update:open', value),
-})
-const { isOpen, triggerId, panelId } = disclosure
-
-// Состояние видимости контента (display: block/none)
-// Показываем, если открыто ИЛИ идет анимация.
-// Это убирает элементы из Layout Tree, когда они закрыты.
-const isAnimating = ref(false)
-const shouldShowContent = computed(() => isOpen.value || isAnimating.value)
-
-const hasBeenOpened = ref(!props.lazy || props.defaultOpen || (props.open === true))
-
-watch(() => props.open, (val) => {
-  if (val) hasBeenOpened.value = true
-})
-
-function toggle() {
-  if (props.disabled) return
-  if (props.noAnimation) {
-    disclosure.toggle()
-    return
-  }
-
-  const root = rootEl.value
-  const wrap = contentWrapEl.value
-
-  isAnimating.value = true
-
-  root?.classList.add('is-animating')
-  root?.classList.remove('is-opened')
-  wrap?.classList.add('is-animating')
-  wrap?.classList.remove('is-opened')
-
-  disclosure.toggle()
-}
-
-const contentWrapEl = ref<HTMLElement | null>(null)
-const contentInnerEl = ref<HTMLElement | null>(null)
-const rootEl = ref<HTMLElement | null>(null)
-let resizeObserver: ResizeObserver | null = null
-let pendingHeightSyncFrame: number | null = null
-
-function cancelPendingHeightSync(): void {
-  if (pendingHeightSyncFrame !== null) {
-    window.cancelAnimationFrame(pendingHeightSyncFrame)
-    pendingHeightSyncFrame = null
-  }
-}
-
-function syncAnimatedMaxHeight(): void {
-  const wrap = contentWrapEl.value
-  const inner = contentInnerEl.value
-  if (!wrap || !inner || !isOpen.value || !isAnimating.value) return
-
-  const nextMaxHeight = `${inner.scrollHeight}px`
-  if (wrap.style.maxHeight !== nextMaxHeight) {
-    wrap.style.maxHeight = nextMaxHeight
-  }
-}
-
-function scheduleAnimatedMaxHeightSync(): void {
-  cancelPendingHeightSync()
-  pendingHeightSyncFrame = window.requestAnimationFrame(() => {
-    pendingHeightSyncFrame = null
-    syncAnimatedMaxHeight()
-  })
-}
-
-function setOpenStyles() {
-  const el = contentWrapEl.value
-  if (!el) return
-  el.classList.remove('is-animating')
-  el.classList.add('is-opened')
-  el.style.overflow = ''
-  el.style.maxHeight = ''
-  const root = rootEl.value
-  if (root) {
-    root.classList.remove('is-animating')
-    root.classList.add('is-opened')
-  }
-}
-
-function setClosedStyles() {
-  const el = contentWrapEl.value
-  if (!el) return
-  el.classList.remove('is-animating')
-  el.classList.remove('is-opened')
-  el.style.maxHeight = '0px'
-  el.style.overflow = 'hidden'
-  const root = rootEl.value
-  if (root) {
-    root.classList.remove('is-animating')
-    root.classList.remove('is-opened')
-  }
-}
-
-async function applyImmediateState(open: boolean) {
-  if (open) {
-    await nextTick()
-    hasBeenOpened.value = true
-    setOpenStyles()
-  } else {
-    setClosedStyles()
-  }
-  isAnimating.value = false
-}
-
-async function animateOpen() {
-  const el = contentWrapEl.value
-  if (!el) return
-  const root = rootEl.value
-  
-  // Ждем nextTick, чтобы v-show="true" применился и элемент появился в DOM
-  await nextTick()
-  
-  el.classList.remove('is-opened')
-  el.classList.add('is-animating')
-  if (root) {
-    root.classList.add('is-animating')
-    root.classList.remove('is-opened')
-  }
-  
-  el.style.overflow = 'hidden'
-  el.style.maxHeight = '0px'
-  // Force layout calc
-  void el.offsetHeight
-  
-  el.style.maxHeight = el.scrollHeight + 'px'
-  
-  const onEnd = () => {
-    el.removeEventListener('transitionend', onEnd)
-    if (!isOpen.value) return // прервано закрытием
-    cancelPendingHeightSync()
-    el.style.maxHeight = ''
-    el.style.overflow = ''
-    el.classList.remove('is-animating')
-    el.classList.add('is-opened')
-    if (root) {
-      root.classList.remove('is-animating')
-      root.classList.add('is-opened')
-    }
-    isAnimating.value = false
-  }
-  el.addEventListener('transitionend', onEnd)
-}
-
-function animateClose() {
-  const el = contentWrapEl.value
-  if (!el) return
-  const root = rootEl.value
-  
-  isAnimating.value = true // ensure visible during anim
-  
-  el.classList.add('is-animating')
-  el.classList.remove('is-opened')
-  if (root) {
-    root.classList.add('is-animating')
-    root.classList.remove('is-opened')
-  }
-  
-  if (el.style.maxHeight === '' || el.style.maxHeight === 'none') {
-    el.style.maxHeight = el.scrollHeight + 'px'
-    void el.offsetHeight
-  }
-  
-  el.style.overflow = 'hidden'
-  el.style.maxHeight = '0px'
-  
-  const onEnd = () => {
-    el.removeEventListener('transitionend', onEnd)
-    if (isOpen.value) return // прервано открытием
-    cancelPendingHeightSync()
-    el.classList.remove('is-animating')
-    if (root) {
-      root.classList.remove('is-animating')
-    }
-    isAnimating.value = false // trigger v-show=false
-  }
-  el.addEventListener('transitionend', onEnd)
-}
-
-onMounted(() => {
-  const el = contentWrapEl.value
-  if (!el) return
-  el.style.willChange = 'max-height'
-  
-  if (props.noAnimation) {
-    void applyImmediateState(isOpen.value)
-  } else if (isOpen.value) {
-    setOpenStyles()
-  } else {
-    // Closed initially
-    setClosedStyles()
-  }
-  
-  const target = contentInnerEl.value
-  if (!props.noAnimation && 'ResizeObserver' in window && target) {
-    resizeObserver = new ResizeObserver(() => {
-      scheduleAnimatedMaxHeightSync()
-    })
-    resizeObserver.observe(target)
-  }
-})
-
-onBeforeUnmount(() => {
-  cancelPendingHeightSync()
-  if (resizeObserver) {
-    resizeObserver.disconnect()
-    resizeObserver = null
-  }
-})
-
-watch(isOpen, (open) => {
-  if (props.noAnimation) {
-    void applyImmediateState(open)
-    return
-  }
-  if (open) animateOpen()
-  else animateClose()
-})
-</script>
-
-<style lang="postcss" src="./SCollapsiblePanel.css" scoped></style>

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

@@ -1,125 +0,0 @@
-<template>
-  <teleport to="body">
-    <transition name="s-drawer-backdrop">
-      <div v-if="open" class="s-drawer-backdrop" :style="backdropStyle" aria-hidden="true" />
-    </transition>
-
-    <transition name="s-drawer-panel">
-      <div v-if="open" class="s-drawer-shell" :data-placement="validatedPlacement" :style="surfaceStyle">
-        <div class="s-drawer-positioner" :data-placement="validatedPlacement">
-          <SDialogSurface
-            v-bind="ownedAttrs.bindings()"
-            :presentation="dialogPresentation"
-            :title="title"
-            :accessible-name="resolvedAriaLabel"
-            :closable="closable"
-            :set-surface-element="setPanelElement"
-            @request-close="closeDrawer"
-          >
-            <template v-if="$slots.header" #header>
-              <slot name="header" />
-            </template>
-            <slot />
-            <template v-if="$slots.footer" #footer="{ close }">
-              <slot name="footer" :close="close" />
-            </template>
-          </SDialogSurface>
-        </div>
-      </div>
-    </transition>
-  </teleport>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useUiKitLocale } from '../../../composables/useUiKitLocale'
-import { useOwnedAttrs } from '../../../internal/ownedAttrs'
-import { useDialogOverlay } from '../../../composables/useDialogOverlay'
-import { validateBoolean, validateExactString } from '../../../internal/runtimeContract'
-import SDialogSurface from '../_internal/SDialogSurface.vue'
-import type {
-  DialogSurfaceDrawerPlacement,
-  DialogSurfaceDrawerSize,
-  DrawerDialogSurfacePresentation,
-} from '../_internal/dialogSurface'
-
-defineOptions({ inheritAttrs: false })
-
-export type DrawerSize = DialogSurfaceDrawerSize
-export type DrawerPlacement = DialogSurfaceDrawerPlacement
-
-export interface Props {
-  open: boolean
-  title?: string
-  closable?: boolean
-  size?: DrawerSize
-  placement?: DrawerPlacement
-  mobileFullScreen?: boolean
-  ariaLabel?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  title: undefined,
-  closable: true,
-  size: 'md',
-  placement: 'right',
-  mobileFullScreen: true,
-  ariaLabel: undefined,
-})
-const { t } = useUiKitLocale()
-
-const emit = defineEmits<{
-  'update:open': [value: boolean]
-}>()
-
-const ownedAttrs = useOwnedAttrs({ component: 'SDrawer', owner: 'drawer dialog surface' })
-const resolvedAriaLabel = computed(() => props.ariaLabel ?? t('dialog.drawer'))
-const validatedPlacement = computed<DrawerPlacement>(() => validateExactString(
-  'SDrawer',
-  'placement',
-  props.placement,
-  ['right', 'bottom'] as const,
-))
-const validatedSize = computed<DrawerSize>(() => validateExactString(
-  'SDrawer',
-  'size',
-  props.size,
-  ['sm', 'md', 'lg'] as const,
-))
-const validatedOpen = computed(() => validateBoolean('SDrawer', 'open', props.open))
-const validatedClosable = computed(() => validateBoolean('SDrawer', 'closable', props.closable))
-const validatedMobileFullScreen = computed(() => validateBoolean(
-  'SDrawer',
-  'mobileFullScreen',
-  props.mobileFullScreen,
-))
-const dialogPresentation = computed<DrawerDialogSurfacePresentation>(() => ({
-  kind: 'drawer',
-  size: validatedSize.value,
-  placement: validatedPlacement.value,
-  mobileFullScreen: validatedMobileFullScreen.value,
-}))
-
-function assertInitialDrawerContract(): void {
-  void validatedPlacement.value
-  void validatedSize.value
-  void validatedOpen.value
-  void validatedClosable.value
-  void validatedMobileFullScreen.value
-}
-
-// Validate before the overlay owner acquires global layer and focus resources.
-assertInitialDrawerContract()
-
-function closeDrawer() {
-  emit('update:open', false)
-}
-
-const { setPanelElement, backdropStyle, surfaceStyle } = useDialogOverlay({
-  open: validatedOpen,
-  closable: validatedClosable,
-  requestClose: closeDrawer,
-})
-</script>
-
-<style lang="postcss" src="./SDrawer.css" scoped></style>

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

@@ -1,46 +0,0 @@
-<template>
-  <div
-    v-bind="ownedAttrs.bindings()"
-    class="s-form-grid"
-    :data-columns="columns"
-    :data-density="density"
-    :data-responsive="responsive"
-  >
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { VNodeChild } from 'vue'
-import { useOwnedAttrs } from '../../../internal/ownedAttrs'
-
-defineOptions({ inheritAttrs: false })
-
-/**
- * Адаптивный owner сетки полей без consumer grid- и gap-переопределений.
- * Responsive form-grid owner without consumer grid and gap overrides.
- */
-export interface Props {
-  /** Максимальное число колонок на широком viewport. / Maximum column count on a wide viewport. */
-  columns?: 1 | 2 | 3 | 4
-  /** Плотность межколоночных и межстрочных интервалов. / Column and row spacing density. */
-  density?: 'comfortable' | 'compact'
-  /** Collapse складывает поля в одну колонку на узком viewport. / Collapse stacks fields on narrow viewports. */
-  responsive?: 'collapse' | 'fixed'
-}
-
-withDefaults(defineProps<Props>(), {
-  columns: 2,
-  density: 'comfortable',
-  responsive: 'collapse',
-})
-
-const ownedAttrs = useOwnedAttrs({ component: 'SFormGrid', owner: 'form grid root' })
-
-defineSlots<{
-  /** Поля или SFormGridItem. / Fields or SFormGridItem participants. */
-  default?: () => VNodeChild
-}>()
-</script>
-
-<style lang="postcss" src="./SFormGrid.css" scoped></style>

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

@@ -1,29 +0,0 @@
-<template>
-  <div v-bind="ownedAttrs.bindings()" class="s-form-grid-item" :data-span="span">
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { VNodeChild } from 'vue'
-import { useOwnedAttrs } from '../../../internal/ownedAttrs'
-
-defineOptions({ inheritAttrs: false })
-
-/** Типизированный участник SFormGrid с адаптивным span. / Typed SFormGrid participant with responsive span. */
-export interface Props {
-  /** Число занятых колонок или вся текущая строка. / Occupied column count or the full current row. */
-  span?: 1 | 2 | 3 | 4 | 'full'
-}
-
-withDefaults(defineProps<Props>(), { span: 1 })
-
-const ownedAttrs = useOwnedAttrs({ component: 'SFormGridItem', owner: 'form grid item root' })
-
-defineSlots<{
-  /** Поле или связанная композиция полей. / Field or related field composition. */
-  default?: () => VNodeChild
-}>()
-</script>
-
-<style lang="postcss" src="./SFormGridItem.css" scoped></style>