@pgcorp/ui-kit 0.4.0 → 0.6.0

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

@@ -14,7 +14,7 @@
   >
     <legend :id="labelId" class="s-field-group__legend">
       <slot name="label">{{ validatedLabel }}</slot>
-      <span v-if="required" class="s-field-group__required" aria-hidden="true">*</span>
+      <span v-if="required" :class="['s-field-group__required', FIELD_REQUIRED_CLASS]" aria-hidden="true">*</span>
     </legend>
 
     <div class="s-field-group__controls">
@@ -29,10 +29,10 @@
       />
     </div>
 
-    <p v-if="helpText || $slots.help" :id="helpId" class="s-field-group__help">
+    <p v-if="helpText || $slots.help" :id="helpId" :class="['s-field-group__help', FIELD_HELP_CLASS]">
       <slot name="help">{{ helpText }}</slot>
     </p>
-    <p v-if="invalid && (errorMessage || $slots.error)" :id="errorId" class="s-field-group__error">
+    <p v-if="invalid && (errorMessage || $slots.error)" :id="errorId" :class="['s-field-group__error', FIELD_ERROR_CLASS]">
       <slot name="error">{{ errorMessage }}</slot>
     </p>
   </fieldset>
@@ -40,6 +40,12 @@
 
 <script setup lang="ts">
 import { computed, useId, useSlots } from 'vue'
+import {
+  FIELD_ERROR_CLASS,
+  FIELD_HELP_CLASS,
+  FIELD_REQUIRED_CLASS,
+  useFieldSupportingText,
+} from '../../../internal/fieldPresentation'
 import { mergeIdReferences, useOwnedAttrs } from '../../../internal/ownedAttrs'
 import {
   validateBoundedInteger,
@@ -92,13 +98,10 @@ const groupId = computed(() => validateDomId(
 ))
 const labelId = computed(() => `${groupId.value}-legend`)
 const validatedLabel = computed(() => validateNonEmptyString('SFieldGroup', 'label', props.label))
-const helpId = computed(() => `${groupId.value}-help`)
-const errorId = computed(() => `${groupId.value}-error`)
-const describedBy = computed(() => {
-  const ids: string[] = []
-  if (props.helpText || slots.help) ids.push(helpId.value)
-  if (props.invalid && (props.errorMessage || slots.error)) ids.push(errorId.value)
-  return ids.length > 0 ? ids.join(' ') : undefined
+const { describedBy, errorId, helpId } = useFieldSupportingText({
+  baseId: groupId,
+  hasHelp: () => Boolean(props.helpText || slots.help),
+  hasError: () => Boolean(props.invalid && (props.errorMessage || slots.error)),
 })
 const validatedLayout = computed<SFieldGroupLayout>(() => validateExactString(
   'SFieldGroup',

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

@@ -9,4 +9,3 @@
 .s-field-label[data-size='md'] { @apply text-sm; }
 .s-field-label[data-align='end'] { @apply text-right; }
 .s-field-label[data-disabled='true'] { @apply text-surface-400 dark:text-surface-500; }
-.s-field-label__required { @apply ml-0.5 text-danger-600 dark:text-danger-400; }

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

@@ -8,12 +8,13 @@
     :data-disabled="disabled || undefined"
   >
     <slot />
-    <span v-if="required" class="s-field-label__required" aria-hidden="true">*</span>
+    <span v-if="required" :class="['s-field-label__required', FIELD_REQUIRED_CLASS]" aria-hidden="true">*</span>
   </label>
 </template>
 
 <script setup lang="ts">
 import type { VNodeChild } from 'vue'
+import { FIELD_REQUIRED_CLASS } from '../../../internal/fieldPresentation'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
 
 defineOptions({ inheritAttrs: false })

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

@@ -17,27 +17,21 @@
         :data-option-wrap="optionWrap"
         :data-invalid="group.invalid || undefined"
         :data-readonly="group.readonly || undefined"
-        role="radiogroup"
-        :aria-labelledby="group.labelId"
-        :aria-describedby="group.describedBy"
-        :aria-invalid="group.invalid || undefined"
-        :aria-required="group.required || undefined"
-        :aria-readonly="group.readonly || undefined"
+        v-bind="radioGroup.groupBindings({
+          labelledBy: group.labelId,
+          describedBy: group.describedBy,
+          required: group.required,
+          invalid: group.invalid,
+        })"
       >
         <button
           v-for="option in options"
-          :key="optionToken(option)"
-          :ref="(element) => roving.register(option.value, resolveNativeElement(element))"
+          :key="radioGroup.optionToken(option.value)"
+          :ref="radioGroup.optionRef(option.value)"
           class="s-segmented-control__item"
           :data-size="size"
-          type="button"
-          :aria-checked="option.value === modelValue"
-          :disabled="group.disabled || option.disabled"
-          role="radio"
-          :tabindex="option.value === focusableValue ? 0 : -1"
           :title="option.title"
-          @click="selectOption(option)"
-          @keydown="roving.handleKeydown($event, option.value)"
+          v-bind="radioGroup.optionBindings(option)"
         >{{ option.label }}</button>
       </div>
     </template>
@@ -74,10 +68,9 @@ export interface Props<T extends PublicSelectionKey = string> {
 
 <script setup lang="ts" generic="T extends SelectionKey = string">
 import { computed } from 'vue'
-import type { ComponentPublicInstance } from 'vue'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
 import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
-import { selectionKeyToken, useSelectionRoving } from '../_internal/useSelectionRoving'
+import { useRadioGroup } from '../_internal/useRadioGroup'
 import type { SelectionKey } from '../_internal/useSelectionRoving'
 import SFieldGroup from './SFieldGroup.vue'
 
@@ -100,35 +93,14 @@ const emit = defineEmits<{
 }>()
 const ownedAttrs = useOwnedAttrs({ component: 'SSegmentedControl', owner: 'field group root' })
 useInteractiveLeafRegistration({ owner: 'SSegmentedControl' })
-
-function selectOption(option: SegmentedControlOption<T>): void {
-  if (props.disabled || props.readonly || option.disabled) {
-    return
-  }
-  emit('update:modelValue', option.value)
-}
-
-const rovingOptions = computed(() => props.options.map((option) => ({
-  value: option.value,
-  disabled: props.disabled || option.disabled,
-})))
-const roving = useSelectionRoving({
-  options: rovingOptions,
+const radioGroup = useRadioGroup({
+  options: computed(() => props.options),
   selectedValue: computed(() => props.modelValue),
-  select: (value) => {
-    if (!props.disabled && !props.readonly) emit('update:modelValue', value)
-  },
+  disabled: computed(() => props.disabled),
+  readonly: computed(() => props.readonly),
+  update: (value) => emit('update:modelValue', value),
   component: 'SSegmentedControl',
 })
-const focusableValue = roving.focusableValue
-const optionToken = (option: SegmentedControlOption<T>): string => selectionKeyToken(
-  'SSegmentedControl',
-  option.value,
-  'option.value',
-)
-const resolveNativeElement = (element: Element | ComponentPublicInstance | null): HTMLElement | null => (
-  element instanceof HTMLElement ? element : null
-)
 </script>
 
 <style lang="postcss" src="./SSegmentedControl.css" scoped></style>

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

@@ -13,6 +13,7 @@
     <template #default="field">
       <span class="s-switch-control">
         <input
+          ref="inputEl"
           v-bind="ownedAttrs.bindings()"
           :id="field.controlId"
           type="checkbox"
@@ -37,10 +38,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed, useId } from 'vue'
 import { mergeIdReferences, useOwnedAttrs } from '../../../internal/ownedAttrs'
 import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
-import { resolveOptionalDomId } from '../../../internal/runtimeContract'
+import { useBinaryInput } from '../../../internal/useBinaryInput'
 import SField from './SField.vue'
 
 defineOptions({ inheritAttrs: false })
@@ -73,37 +73,19 @@ const emit = defineEmits<{
 }>()
 const ownedAttrs = useOwnedAttrs({ component: 'SSwitch', owner: 'native switch input' })
 useInteractiveLeafRegistration({ owner: 'SSwitch' })
-
-const generatedInputId = useId()
-const inputId = computed(() => resolveOptionalDomId(
-  'SSwitch',
-  'id',
-  props.id,
-  `s-switch-${generatedInputId}`,
-))
-const checkedValue = computed(() => {
-  if (typeof props.modelValue !== 'boolean') {
-    throw new TypeError('SSwitch: modelValue must be boolean')
-  }
-  return props.modelValue
+const {
+  checkedValue,
+  inputEl,
+  inputId,
+  onChange,
+  onClick,
+} = useBinaryInput({
+  owner: 'SSwitch',
+  inputName: 'switch',
+  props,
+  emitUpdate: (value) => emit('update:modelValue', value),
+  emitClick: (event) => emit('click', event),
 })
-
-function onChange(event: Event): void {
-  if (props.readonly) return
-  const target = event.currentTarget
-  if (!(target instanceof HTMLInputElement)) {
-    throw new TypeError('SSwitch: change event owner must be the native switch input')
-  }
-  emit('update:modelValue', target.checked)
-}
-
-function onClick(event: MouseEvent): void {
-  if (props.readonly) {
-    event.preventDefault()
-    return
-  }
-  emit('click', event)
-}
 </script>
 
 <style lang="postcss" src="./SSwitch.css" scoped></style>

package/src/components/shared/data-display/SBadge.vue

@@ -1,42 +1,56 @@
 <template>
   <span
-    v-bind="ownedAttrs.bindings()"
+    v-bind="{ ...ownedAttrs.bindings(), ...surfaceBindings }"
     class="s-badge"
-    :class="{ 's-badge--dot': dot }"
-    :data-severity="severity"
-    :data-size="size"
-    :data-max-width="maxWidth"
-    :data-truncate="truncate || undefined"
-    :data-icon-motion="iconMotion"
   >
     <template v-if="!dot">
-      <span v-if="leadingIcon" class="s-badge__icon" aria-hidden="true">
-        <component :is="leadingIcon" class="s-badge__icon-graphic" />
+      <span v-if="leadingIcon" :class="PILL_ICON_CLASS" aria-hidden="true">
+        <component
+          :is="leadingIcon"
+          :class="[
+            PILL_ICON_GRAPHIC_CLASS,
+            { [PILL_ICON_SPIN_CLASS]: iconMotion === 'spin' },
+          ]"
+        />
+      </span>
+      <span :class="[PILL_LABEL_CLASS, { [PILL_LABEL_TRUNCATE_CLASS]: truncate }]">
+        <slot />
       </span>
-      <span class="s-badge__label"><slot /></span>
     </template>
   </span>
 </template>
 
 <script setup lang="ts">
-import type { Component } from 'vue';
+import { computed, type Component } from 'vue';
 import { useOwnedAttrs } from '../../../internal/ownedAttrs';
+import {
+  PILL_ICON_CLASS,
+  PILL_ICON_GRAPHIC_CLASS,
+  PILL_ICON_SPIN_CLASS,
+  PILL_LABEL_CLASS,
+  PILL_LABEL_TRUNCATE_CLASS,
+  resolvePillSurfaceBindings,
+  type PillSurfaceIconMotion,
+  type PillSurfaceMaxWidth,
+  type PillSurfaceSeverity,
+  type PillSurfaceSize,
+} from '../../../internal/pillSurface';
 
 defineOptions({ inheritAttrs: false });
 
-export type BadgeSeverity = 'primary' | 'secondary' | 'success' | 'info' | 'warn' | 'danger' | 'contrast';
+export type BadgeSeverity = PillSurfaceSeverity;
 
 export interface Props {
   severity?: BadgeSeverity;
   dot?: boolean;
-  size?: 'xs' | 'sm' | 'md';
+  size?: PillSurfaceSize;
   leadingIcon?: Component;
-  iconMotion?: 'static' | 'spin';
+  iconMotion?: PillSurfaceIconMotion;
   truncate?: boolean;
-  maxWidth?: 'none' | 'sm' | 'md';
+  maxWidth?: PillSurfaceMaxWidth;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   severity: 'secondary',
   dot: false,
   size: 'md',
@@ -47,6 +61,15 @@ withDefaults(defineProps<Props>(), {
 });
 
 const ownedAttrs = useOwnedAttrs({ component: 'SBadge', owner: 'badge root' });
+const surfaceBindings = computed(() => resolvePillSurfaceBindings('SBadge', {
+  kind: 'badge',
+  severity: props.severity,
+  size: props.size,
+  dot: props.dot,
+  closable: false,
+  disabled: false,
+  truncate: props.truncate,
+  maxWidth: props.maxWidth,
+  iconMotion: props.iconMotion,
+}));
 </script>
-
-<style lang="postcss" src="./SBadge.css" scoped></style>

package/src/components/shared/data-display/SChip.vue

@@ -1,16 +1,12 @@
 <template>
   <span
-    v-bind="ownedAttrs.bindings()"
+    v-bind="{ ...ownedAttrs.bindings(), ...surfaceBindings }"
     class="s-chip"
-    :data-severity="validatedSeverity"
-    :data-size="validatedSize"
-    :data-closable="closable || undefined"
-    :data-disabled="disabled || undefined"
   >
-    <span v-if="leadingIcon" class="s-chip__icon" aria-hidden="true">
-      <component :is="leadingIcon" class="s-chip__icon-graphic" />
+    <span v-if="leadingIcon" :class="PILL_ICON_CLASS" aria-hidden="true">
+      <component :is="leadingIcon" :class="PILL_ICON_GRAPHIC_CLASS" />
     </span>
-    <span class="s-chip__label">{{ validatedLabel }}</span>
+    <span :class="[PILL_LABEL_CLASS, PILL_LABEL_TRUNCATE_CLASS]">{{ validatedLabel }}</span>
     <SButton
       v-if="closable"
       label=""
@@ -34,6 +30,13 @@
 import { computed, type Component } from 'vue'
 import { X } from '../../icons/sputnigUiIcons'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import {
+  PILL_ICON_CLASS,
+  PILL_ICON_GRAPHIC_CLASS,
+  PILL_LABEL_CLASS,
+  PILL_LABEL_TRUNCATE_CLASS,
+  resolvePillSurfaceBindings,
+} from '../../../internal/pillSurface'
 import {
   validateBoolean,
   validateExactString,
@@ -80,6 +83,17 @@ const validatedSeverity = computed(() => validateExactString(
 const validatedSize = computed(() => validateExactString(
   'SChip', 'size', props.size, ['sm', 'md'] as const,
 ))
+const surfaceBindings = computed(() => resolvePillSurfaceBindings('SChip', {
+  kind: 'chip',
+  severity: validatedSeverity.value,
+  size: validatedSize.value,
+  dot: false,
+  closable: props.closable,
+  disabled: props.disabled,
+  truncate: true,
+  maxWidth: 'none',
+  iconMotion: 'static',
+}))
 const resolvedCloseLabel = computed(() => {
   validateBoolean('SChip', 'closable', props.closable)
   validateBoolean('SChip', 'disabled', props.disabled)
@@ -88,5 +102,3 @@ const resolvedCloseLabel = computed(() => {
     : validateNonEmptyString('SChip', 'closeLabel', props.closeLabel)
 })
 </script>
-
-<style lang="postcss" src="./SChip.css" scoped></style>

package/src/components/shared/data-display/SSectionHeader.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import SHeaderSurface from '../_internal/SHeaderSurface.vue'
 
 defineOptions({ inheritAttrs: false })
 
@@ -32,27 +33,22 @@ const ownedAttrs = useOwnedAttrs({ component: 'SSectionHeader', owner: 'section
 </script>
 
 <template>
-  <header
+  <SHeaderSurface
     v-bind="ownedAttrs.bindings()"
-    class="s-section-header"
-    :data-size="size"
-    :data-variant="variant"
-    :data-divider="divider || undefined"
-    :data-padding="padding"
-    :data-spacing-after="spacingAfter"
-    :data-trailing-layout="trailingLayout"
+    kind="section"
+    :title="title"
+    :eyebrow="eyebrow"
+    :description="description"
+    :meta="meta"
+    :heading-level="headingLevel"
+    :size="size"
+    :variant="variant"
+    :divider="divider"
+    :padding="padding"
+    :spacing-after="spacingAfter"
+    :trailing-layout="trailingLayout"
   >
-    <div class="s-section-header__copy">
-      <div v-if="eyebrow" class="s-section-header__eyebrow">{{ eyebrow }}</div>
-      <component :is="`h${headingLevel}`" class="s-section-header__title">{{ title }}</component>
-      <p v-if="description" class="s-section-header__description">{{ description }}</p>
-      <p v-if="meta" class="s-section-header__meta">{{ meta }}</p>
-    </div>
-    <div v-if="$slots.badges || $slots.actions" class="s-section-header__trailing">
-      <div v-if="$slots.badges" class="s-section-header__badges"><slot name="badges" /></div>
-      <div v-if="$slots.actions" class="s-section-header__actions"><slot name="actions" /></div>
-    </div>
-  </header>
+    <template v-if="$slots.badges" #badges><slot name="badges" /></template>
+    <template v-if="$slots.actions" #actions><slot name="actions" /></template>
+  </SHeaderSurface>
 </template>
-
-<style lang="postcss" src="./SSectionHeader.css" scoped></style>