SKU Selector

A core e-commerce component for product detail pages. It provides Text / Image / Color display modes, inventory-linked selection based on a SKU matrix, selected-spec summary, and full CSS theming support.

Basic Usage

Automatically computes selectable states from selected values. Combinations with zero stock are automatically disabled.

Color

Cardinal Red

Galaxy Blue

Winter White

Size

SHot

M

L

Please select all specs

Stock: --

SKU Matrix & Inventory Sync

Image Preview Mode

Pass an image field in the spec value with mode: 'image' on the spec to render clickable image swatches.

Color

Red

Blue

White

Size

S

M

L

Image Preview Mode

Color Swatch Mode

Set mode: 'color' and pass a color field on each value to render color pickers for fashion/lifestyle products.

Color

Cardinal Red

Galaxy Blue

Winter White

Obsidian Black

Color Swatch Mode

Selected Summary

Enable show-selected-summary to display a summary of the currently selected specs above the selector, common in e-commerce detail pages.

Select specifications

Color

Red

Blue

Size

S

M

Selected Spec Summary

Usage in Nuxt

YhSkuSelector is fully SSR-compatible with Nuxt 3. No extra configuration needed when using the yh-ui/nuxt module.

Color

White

Black

Nuxt Integration

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['yh-ui/nuxt']
})

---

API

Props

Prop	Description	Type	Default
model-value / v-model	Currently selected spec value IDs	Array<string | number>	[]
specs	Spec group list	SkuSpec[]	[]
skus	SKU combination list	SkuItem[]	[]
check-stock	Auto-disable items with zero inventory	boolean	true
disabled	Globally disable the selector	boolean	false
allow-unselect	Allow clicking active item to deselect	boolean	true
size	Spec button size	'small' | 'default' | 'large'	'default'
image-size	Image size in px (image mode)	number	80
show-selected-summary	Display selected spec summary at top	boolean	false
summary-prefix	Prefix text for summary label	string	''
theme-overrides	CSS variable overrides	Record<string, string>	{}

Events

Event	Description	Callback
update:modelValue	v-model binding	(value: Array<string | number>) => void
change	Fires on every selection change; sku is null if not fully selected	(sku: SkuItem | null, selectedValues: Array<string | number>) => void
select	Fires on click of any value (including disabled)	(spec: SkuSpec, value: SkuSpecValue) => void

Slots

Slot	Description	Scope
label	Custom spec title	{ spec: SkuSpec }
value	Fully custom spec value cell	{ value: SkuSpecValue, spec: SkuSpec, active: boolean, disabled: boolean }
summary	Custom selected summary area	{ summary: string, sku: SkuItem | null }

Expose

This component does not expose public instance methods or properties.

SkuSpec Interface

interface SkuSpec {
  id: string | number
  name: string
  values: SkuSpecValue[]
  /** Display mode: 'text' (default) | 'image' | 'color' */
  mode?: 'text' | 'image' | 'color'
}

SkuSpecValue Interface

interface SkuSpecValue {
  id: string | number
  name: string
  image?: string // used when mode='image'
  color?: string // used when mode='color'
  disabled?: boolean
  tag?: string // badge label, e.g. "Hot", "New"
  [key: string]: unknown
}

SkuItem Interface

interface SkuItem {
  id: string | number
  specValueIds: Array<string | number>
  price: number
  stock: number
  marketPrice?: number
  image?: string
  skuNo?: string
  [key: string]: unknown // extensible custom fields
}

Theme Variables

Override the following CSS variables using theme-overrides:

Variable	Description	Default
--yh-sku-label-color	Spec title text color	var(--yh-text-color-secondary)
--yh-sku-label-size	Spec title font size	var(--yh-font-size-sm)
--yh-sku-label-weight	Spec title font weight	var(--yh-font-weight-medium)
--yh-sku-value-bg	Default spec cell background	var(--yh-fill-color-light)
--yh-sku-value-color	Default spec cell text color	var(--yh-text-color-primary)
--yh-sku-value-border	Default spec cell border color	var(--yh-border-color-light)
--yh-sku-value-hover-bg	Hovered spec cell background	var(--yh-fill-color-dark)
--yh-sku-value-active-bg	Active cell background	var(--yh-color-primary-light-9)
--yh-sku-value-active-color	Active cell text/border color	var(--yh-color-primary)
--yh-sku-value-active-border	Active cell border color	var(--yh-color-primary)
--yh-sku-value-disabled-bg	Disabled cell background	var(--yh-fill-color-extra-light)
--yh-sku-value-disabled-color	Disabled cell text color	var(--yh-text-color-disabled)
--yh-sku-value-radius	Spec cell border radius	var(--yh-radius-base)
--yh-sku-img-size	Image swatch size	80px
--yh-sku-color-swatch-size	Color swatch size	24px
--yh-sku-gap	Row spacing	var(--yh-spacing-md)

Type Exports

Name	Description
YhSkuSelectorProps	Component props type
YhSkuSelectorEmits	Component emits type
YhSkuSelectorSlots	Component slots type
YhSkuSpec	Spec group type
YhSkuSpecValue	Spec value type
YhSkuItem	SKU data type
YhSkuSelectorInstance	Component instance type