@pgcorp/ui-kit 0.7.2 → 0.8.0

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

@@ -18,6 +18,10 @@
   @apply border-transparent bg-transparent dark:border-transparent dark:bg-transparent;
 }
 
+.s-interactive-surface[data-appearance='bare'] {
+  @apply overflow-visible border-0 bg-transparent dark:bg-transparent;
+}
+
 .s-interactive-surface__activation {
   @apply absolute inset-0 z-10 block h-full w-full cursor-pointer border-0 bg-transparent p-0;
   border-radius: inherit;

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

@@ -20,7 +20,7 @@ export type InteractiveSurfaceDensity = 'compact' | 'comfortable'
 export type InteractiveSurfacePadding = 'none' | 'sm' | 'md'
 export type InteractiveSurfaceRadius = 'md' | 'lg' | 'xl'
 export type InteractiveSurfaceFill = 'content' | 'container'
-export type InteractiveSurfaceAppearance = 'card' | 'plain'
+export type InteractiveSurfaceAppearance = 'card' | 'plain' | 'bare'
 
 /**
  * Единственный semantic-контракт поверхности: passive, action или ровно одна link-target.

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

@@ -338,7 +338,7 @@ provide(listboxContextKey, {
   },
 })
 
-function focusOption(target: ListboxOptionRegistration, options = enabledRegistrations()): void {
+function focusOption(target: ListboxOptionRegistration): void {
   for (const option of registrations) option.element.tabIndex = -1
   target.element.tabIndex = 0
   target.element.focus()
@@ -451,7 +451,7 @@ function handleKeydown(event: KeyboardEvent): void {
     const match = searchOrder.find((option) => option.label().toLocaleLowerCase().startsWith(query))
     if (match) {
       event.preventDefault()
-      focusOption(match, options)
+      focusOption(match)
     }
     return
   }
@@ -467,7 +467,7 @@ function handleKeydown(event: KeyboardEvent): void {
   const target = options[nextIndex]
   if (!target) return
   event.preventDefault()
-  focusOption(target, options)
+  focusOption(target)
 }
 
 function focusSelectedOrFirst(): void {
@@ -476,7 +476,7 @@ function focusSelectedOrFirst(): void {
   }
   const options = enabledRegistrations()
   const target = options.find((option) => option.selected()) ?? options[0]
-  if (target) focusOption(target, options)
+  if (target) focusOption(target)
 }
 
 onBeforeUnmount(() => { if (typeaheadTimer) clearTimeout(typeaheadTimer) })

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

@@ -13,7 +13,7 @@
     <template #default="field">
       <span class="s-switch-control">
         <input
-          ref="inputEl"
+          :ref="setInputElement"
           v-bind="ownedAttrs.bindings()"
           :id="field.controlId"
           type="checkbox"
@@ -75,10 +75,10 @@ const ownedAttrs = useOwnedAttrs({ component: 'SSwitch', owner: 'native switch i
 useInteractiveLeafRegistration({ owner: 'SSwitch' })
 const {
   checkedValue,
-  inputEl,
   inputId,
   onChange,
   onClick,
+  setInputElement,
 } = useBinaryInput({
   owner: 'SSwitch',
   inputName: 'switch',

package/src/components/shared/data-display/SChart.css

@@ -0,0 +1,149 @@
+@reference "../../../styles/reference.css";
+
+.s-chart {
+  @apply m-0 grid min-w-0 w-full text-surface-700 dark:text-surface-200;
+  gap: var(--s-space-content-gap);
+}
+
+.s-chart__viewport {
+  @apply relative min-w-0 w-full overflow-hidden rounded-md;
+  background: var(--s-chart-surface);
+}
+
+.s-chart[data-size='compact'] .s-chart__viewport { aspect-ratio: 15 / 4; }
+.s-chart[data-size='sm'] .s-chart__viewport { aspect-ratio: 8 / 3; }
+.s-chart[data-size='md'] .s-chart__viewport { aspect-ratio: 20 / 9; }
+.s-chart[data-size='lg'] .s-chart__viewport { aspect-ratio: 25 / 12; }
+
+.s-chart[data-empty='true'] .s-chart__viewport { aspect-ratio: auto; }
+.s-chart[data-size='compact'][data-empty='true'] .s-chart__viewport { min-height: 6rem; }
+.s-chart[data-size='sm'][data-empty='true'] .s-chart__viewport { min-height: 10rem; }
+.s-chart[data-size='md'][data-empty='true'] .s-chart__viewport { min-height: 14rem; }
+.s-chart[data-size='lg'][data-empty='true'] .s-chart__viewport { min-height: 18rem; }
+
+.s-chart__svg { @apply block h-full w-full overflow-visible; }
+
+.s-chart__grid line {
+  stroke: var(--s-chart-grid);
+  stroke-width: 1;
+  vector-effect: non-scaling-stroke;
+}
+
+.s-chart__axis line {
+  stroke: var(--s-chart-axis);
+  stroke-width: 1;
+  vector-effect: non-scaling-stroke;
+}
+
+.s-chart__axis text,
+.s-chart__data-label {
+  fill: var(--s-chart-label);
+  font-family: var(--font-sans);
+  font-size: 11px;
+}
+
+.s-chart[data-size='compact'] .s-chart__axis text,
+.s-chart[data-size='compact'] .s-chart__data-label { font-size: 9px; }
+
+.s-chart__axis .s-chart__axis-title {
+  fill: var(--s-chart-axis-title);
+  font-weight: 600;
+}
+
+.s-chart__line {
+  fill: none;
+  stroke: var(--s-chart-tone);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2.5;
+  vector-effect: non-scaling-stroke;
+}
+
+.s-chart[data-size='compact'] .s-chart__line { stroke-width: 2; }
+
+.s-chart__area {
+  fill: color-mix(in srgb, var(--s-chart-tone) 20%, transparent);
+  stroke: none;
+}
+
+.s-chart__marker {
+  fill: var(--s-chart-surface);
+  stroke: var(--s-chart-tone);
+  stroke-width: 2.5;
+  vector-effect: non-scaling-stroke;
+}
+
+.s-chart__bar,
+.s-chart__slice {
+  fill: var(--s-chart-tone);
+  stroke: var(--s-chart-surface);
+  stroke-width: 1;
+  vector-effect: non-scaling-stroke;
+  transition: opacity var(--s-motion-fast) ease;
+}
+
+.s-chart__bar:hover,
+.s-chart__slice:hover { opacity: 0.82; }
+
+.s-chart__radial-label {
+  fill: var(--s-chart-label-on-series);
+  font-family: var(--font-sans);
+  font-size: 11px;
+  font-weight: 700;
+  paint-order: stroke;
+  stroke: color-mix(in srgb, var(--color-surface-950) 28%, transparent);
+  stroke-width: 2px;
+  stroke-linejoin: round;
+}
+
+.s-chart__center {
+  fill: var(--s-chart-center-label);
+  font-family: var(--font-sans);
+  font-size: 20px;
+  font-weight: 700;
+}
+
+.s-chart__center-label {
+  fill: var(--s-chart-label);
+  font-size: 10px;
+  font-weight: 500;
+}
+
+.s-chart__legend {
+  @apply flex min-w-0 flex-wrap items-center text-xs text-surface-600 dark:text-surface-300;
+  gap: var(--s-space-content-gap);
+}
+
+.s-chart__legend[data-position='top'] { @apply justify-start; }
+.s-chart__legend[data-position='bottom'] { @apply justify-center; }
+.s-chart__legend-item { @apply inline-flex min-w-0 items-center gap-1.5; }
+
+.s-chart__legend-swatch {
+  @apply block h-2.5 w-2.5 shrink-0 rounded-full;
+  background: var(--s-chart-tone);
+}
+
+.s-chart__data-table { @apply w-full border-collapse overflow-hidden rounded-md text-left text-sm; }
+
+.s-chart__data-table th,
+.s-chart__data-table td { @apply border-b border-surface-200 px-3 py-2 dark:border-surface-700; }
+
+.s-chart__data-table thead th {
+  @apply bg-surface-100 font-semibold text-surface-700 dark:bg-surface-800 dark:text-surface-200;
+}
+
+.s-chart__data-table tbody th { @apply font-medium; }
+.s-chart__data-table tbody td { @apply tabular-nums; }
+.s-chart__data-table--assistive { @apply sr-only; }
+
+[data-s-chart-tone='series-1'] { --s-chart-tone: var(--s-chart-series-1); }
+[data-s-chart-tone='series-2'] { --s-chart-tone: var(--s-chart-series-2); }
+[data-s-chart-tone='series-3'] { --s-chart-tone: var(--s-chart-series-3); }
+[data-s-chart-tone='series-4'] { --s-chart-tone: var(--s-chart-series-4); }
+[data-s-chart-tone='series-5'] { --s-chart-tone: var(--s-chart-series-5); }
+[data-s-chart-tone='series-6'] { --s-chart-tone: var(--s-chart-series-6); }
+[data-s-chart-tone='series-7'] { --s-chart-tone: var(--s-chart-series-7); }
+[data-s-chart-tone='series-8'] { --s-chart-tone: var(--s-chart-series-8); }
+[data-s-chart-tone='success'] { --s-chart-tone: var(--color-success-500); }
+[data-s-chart-tone='warn'] { --s-chart-tone: var(--color-warn-500); }
+[data-s-chart-tone='danger'] { --s-chart-tone: var(--color-danger-500); }