@pgcorp/ui-kit 0.8.0 → 0.9.0

package/src/components/shared/controls/SInteractiveSurface.css

@@ -14,6 +14,28 @@
     color var(--s-motion-standard) ease;
 }
 
+.s-interactive-surface:has(.s-interactive-surface__actions > *) {
+  container-type: inline-size;
+}
+
+.s-interactive-surface__layout {
+  @apply grid min-h-0 min-w-0 w-full items-center;
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.s-interactive-surface:has(.s-interactive-surface__actions > *) .s-interactive-surface__layout {
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.s-interactive-surface__primary {
+  @apply relative flex min-h-0 min-w-0;
+}
+
+.s-interactive-surface__actions {
+  @apply flex min-w-0 shrink-0 items-center;
+  gap: var(--s-space-control-gap);
+}
+
 .s-interactive-surface[data-appearance='plain'] {
   @apply border-transparent bg-transparent dark:border-transparent dark:bg-transparent;
 }
@@ -46,7 +68,9 @@
   pointer-events: none;
 }
 
-.s-interactive-surface[data-fill='container'] { @apply h-full w-full; }
+.s-interactive-surface[data-fill='container'],
+.s-interactive-surface[data-fill='container'] .s-interactive-surface__layout,
+.s-interactive-surface[data-fill='container'] .s-interactive-surface__primary { @apply h-full w-full; }
 .s-interactive-surface[data-density='compact'] { @apply text-sm; }
 .s-interactive-surface[data-density='comfortable'] { @apply text-base; }
 .s-interactive-surface[data-padding='none'] { @apply p-0; }
@@ -60,9 +84,31 @@
 .s-interactive-surface[data-s-tone='danger'] { @apply border-danger-200 bg-danger-50 dark:border-danger-800 dark:bg-danger-950; }
 .s-interactive-surface[data-selected='true'] { @apply border-primary-400 bg-primary-50 dark:border-primary-600 dark:bg-primary-950; }
 .s-interactive-surface[data-pressed='true'] { @apply border-primary-500 bg-primary-100 dark:border-primary-500 dark:bg-primary-950/70; }
-.s-interactive-surface[data-disabled='true'] { @apply cursor-not-allowed opacity-60; }
-.s-interactive-surface[data-content-align='start'] { @apply justify-start text-left; }
-.s-interactive-surface[data-content-align='center'] { @apply justify-center text-center; }
+.s-interactive-surface[data-disabled='true'] { @apply cursor-not-allowed; }
+.s-interactive-surface[data-disabled='true']:not(:has(.s-interactive-surface__actions > *)),
+.s-interactive-surface[data-disabled='true']:has(.s-interactive-surface__actions > *) .s-interactive-surface__primary {
+  @apply opacity-60;
+}
+.s-interactive-surface[data-content-align='start'] .s-interactive-surface__content { @apply justify-start text-left; }
+.s-interactive-surface[data-content-align='center'] .s-interactive-surface__content { @apply justify-center text-center; }
+
+.s-interactive-surface[data-actions-layout='stacked']:has(.s-interactive-surface__actions > *) .s-interactive-surface__layout {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.s-interactive-surface[data-actions-layout='stacked'] .s-interactive-surface__actions {
+  @apply w-full;
+}
+
+@container (max-width: 32rem) {
+  .s-interactive-surface[data-actions-layout='responsive'] .s-interactive-surface__layout {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .s-interactive-surface[data-actions-layout='responsive'] .s-interactive-surface__actions {
+    @apply w-full;
+  }
+}
 
 .s-interactive-surface[data-mode='action']:not([data-disabled='true']),
 .s-interactive-surface[data-mode='link']:not([data-disabled='true']) {

package/src/components/shared/controls/SInteractiveSurface.vue

@@ -21,6 +21,7 @@ export type InteractiveSurfacePadding = 'none' | 'sm' | 'md'
 export type InteractiveSurfaceRadius = 'md' | 'lg' | 'xl'
 export type InteractiveSurfaceFill = 'content' | 'container'
 export type InteractiveSurfaceAppearance = 'card' | 'plain' | 'bare'
+export type InteractiveSurfaceActionsLayout = 'responsive' | 'inline' | 'stacked'
 
 /**
  * Единственный semantic-контракт поверхности: passive, action или ровно одна link-target.
@@ -60,6 +61,7 @@ export interface Props {
   radius?: InteractiveSurfaceRadius
   fill?: InteractiveSurfaceFill
   appearance?: InteractiveSurfaceAppearance
+  actionsLayout?: InteractiveSurfaceActionsLayout
   contentAlign?: 'start' | 'center'
   /** Полный binding явного STooltip trigger, направляемый на activation owner. / Complete explicit STooltip trigger binding routed to the activation owner. */
   tooltipTrigger?: STooltipTriggerBinding
@@ -73,6 +75,7 @@ const props = withDefaults(defineProps<Props>(), {
   radius: 'lg',
   fill: 'content',
   appearance: 'card',
+  actionsLayout: 'inline',
   contentAlign: 'start',
   tooltipTrigger: undefined,
 })
@@ -80,9 +83,11 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<{
   activate: [event: MouseEvent]
 }>()
-defineSlots<{
+const slots = defineSlots<{
   /** Пассивное flow-содержимое поверхности. / Passive flow content of the surface. */
   default?: () => VNodeChild
+  /** Sibling controls inside the same visual chrome and outside the primary activation owner. */
+  actions?: () => VNodeChild
 }>()
 
 const ownedAttrs = useOwnedAttrs({ component: 'SInteractiveSurface', owner: 'interactive surface owner' })
@@ -297,40 +302,49 @@ function activateAction(event: MouseEvent): void {
     :data-radius="radius"
     :data-fill="fill"
     :data-appearance="appearance"
+    :data-actions-layout="actionsLayout"
+    :data-has-actions="Boolean(slots.actions) || undefined"
     :data-selected="selected || undefined"
     :data-pressed="surfacePressed"
     :data-disabled="surfaceDisabled || undefined"
     :data-content-align="contentAlign"
   >
-    <button
-      v-if="surfaceMode === 'action'"
-      v-bind="activationBindings()"
-      class="s-interactive-surface__activation"
-      type="button"
-      :disabled="surfaceDisabled"
-      :aria-label="resolvedAccessibleLabel"
-      :aria-pressed="surfacePressed"
-      @click="activateAction"
-    >
-      <span class="s-interactive-surface__accessible-label">{{ resolvedAccessibleLabel }}</span>
-    </button>
-    <component
-      v-else-if="surfaceMode === 'link'"
-      :is="linkComponent"
-      v-bind="linkBindings()"
-      class="s-interactive-surface__activation"
-      :aria-label="resolvedAccessibleLabel"
-      :aria-current="selected ? 'page' : undefined"
-      :aria-disabled="surfaceDisabled || undefined"
-      :tabindex="surfaceDisabled ? -1 : undefined"
-      @click="activateLink"
-    >
-      <span class="s-interactive-surface__accessible-label">{{ resolvedAccessibleLabel }}</span>
-    </component>
-    <div class="s-interactive-surface__content" data-passive-content="">
-      <PassiveContentBoundary :contract="passiveContentContract">
-        <slot />
-      </PassiveContentBoundary>
+    <div class="s-interactive-surface__layout">
+      <div class="s-interactive-surface__primary">
+        <button
+          v-if="surfaceMode === 'action'"
+          v-bind="activationBindings()"
+          class="s-interactive-surface__activation"
+          type="button"
+          :disabled="surfaceDisabled"
+          :aria-label="resolvedAccessibleLabel"
+          :aria-pressed="surfacePressed"
+          @click="activateAction"
+        >
+          <span class="s-interactive-surface__accessible-label">{{ resolvedAccessibleLabel }}</span>
+        </button>
+        <component
+          v-else-if="surfaceMode === 'link'"
+          :is="linkComponent"
+          v-bind="linkBindings()"
+          class="s-interactive-surface__activation"
+          :aria-label="resolvedAccessibleLabel"
+          :aria-current="selected ? 'page' : undefined"
+          :aria-disabled="surfaceDisabled || undefined"
+          :tabindex="surfaceDisabled ? -1 : undefined"
+          @click="activateLink"
+        >
+          <span class="s-interactive-surface__accessible-label">{{ resolvedAccessibleLabel }}</span>
+        </component>
+        <div class="s-interactive-surface__content" data-passive-content="">
+          <PassiveContentBoundary :contract="passiveContentContract">
+            <slot />
+          </PassiveContentBoundary>
+        </div>
+      </div>
+      <div v-if="$slots.actions" class="s-interactive-surface__actions">
+        <slot name="actions" />
+      </div>
     </div>
   </div>
 </template>

package/src/components/shared/controls/STextarea.ts

@@ -0,0 +1,13 @@
+export type {
+  Props as STextareaProps,
+  STextareaAppearance,
+  STextareaAutocomplete,
+  STextareaSuggestionPopupRole,
+  STextareaSuggestions,
+  STextareaReplaceOptions,
+  STextareaResizeContract,
+  STextareaSelection,
+  STextareaSelectionDirection,
+  STextareaSize,
+  STextareaState,
+} from './STextarea.vue'