PropertyList

PropertyList is a controlled, headless list primitive for fills, strokes, and effects. The propKey discriminator gives slots and actions exact Fill, Stroke, or Effect types. Editor mutation and undo behavior stay in useEditorPropertyList() or an application adapter.

Anatomy

• PropertyListRoot — controlled items, identity, mixed state, and semantic events
• PropertyListItem — exact item type plus data-hidden and data-dragging
• PropertyListAdd — adds a typed item
• PropertyListRemove — removes an indexed item
• PropertyListVisibility — toggles indexed visibility and exposes aria-pressed

<script setup lang="ts">
import { ref } from 'vue'
import type { Fill } from '@open-pencil/scene-graph'
import {
  PropertyListItem,
  PropertyListRemove,
  PropertyListRoot
} from '@open-pencil/vue'

const fills = ref<Fill[]>([])
</script>

<template>
  <PropertyListRoot
    prop-key="fills"
    :items="fills"
    @remove="fills.splice($event, 1)"
    v-slot="{ items }"
  >
    <PropertyListItem
      v-for="(_, index) in items"
      :key="index"
      prop-key="fills"
      :index="index"
      v-slot="{ item }"
    >
      <span>{{ item?.type }}</span>
      <PropertyListRemove prop-key="fills" :index="index">Remove</PropertyListRemove>
    </PropertyListItem>
  </PropertyListRoot>
</template>

See the PropertySection demo for the shared interactive state matrix.

Editor adapter

OpenPencil panels use useEditorPropertyList(propKey) to connect controlled events to selection, multi-node updates, undo batching, and reordering. Third-party SDK consumers can provide their own state adapter without an OpenPencil editor context.

Generated API reference

PropertyListRoot

Generated from packages/vue/src/primitives/PropertyList/PropertyListRoot.vue

Props

Prop	Default	Type
propKey* Discriminator that provides exact Fill, Stroke, or Effect types to slots and actions.	—	K
items* Controlled list items.	—	PropertyListItemFor<K>[]
mixed Marks values across the current selection as inconsistent.	false	boolean | undefined
disabled Prevents item actions.	—	boolean | undefined
getKey Stable identity for keyed rows. Defaults to the item index.	—	((item: PropertyListItemFor<K>, index: number) => PropertyListIdentity) | undefined
label Optional accessible label exposed to consumers.	—	string | undefined

Events

Event	Payload	Description
add	[item: PropertyListItemFor<K>]
remove	[index: number]
update	[index: number, item: PropertyListItemFor<K>]
patch	[index: number, changes: Partial<PropertyListItemFor<K>>]
toggleVisibility	[index: number]
reorder	[fromIndex: number, toIndex: number]

Slots

Slot	Props	Description
default	PropertyListRootSlotProps<K>

PropertyListItem

Generated from packages/vue/src/primitives/PropertyList/PropertyListItem.vue

Props

Prop	Default	Type
propKey*	—	K
index*	—	number
dragging	false	boolean | undefined
disabled	—	boolean | undefined
as	"div"	string | Component | undefined
asChild	false	boolean | undefined

Events

Event	Payload	Description
remove	[index: number]
update	[index: number, item: PropertyListItemFor<K>]
patch	[index: number, changes: Partial<PropertyListItemFor<K>>]
toggleVisibility	[index: number]

Slots

Slot	Props	Description
default	PropertyListItemSlotProps<K>

PropertyListAdd

Generated from packages/vue/src/primitives/PropertyList/PropertyListAdd.vue

Props

Prop	Default	Type
propKey* Must match the nearest PropertyListRoot and preserves generic inference.	—	K
as Element or component rendered by this part.	"button"	string | Component | undefined
asChild Merge behavior into the single child element.	false	boolean | undefined
disabled Prevent activation.	—	boolean | undefined
item*	—	PropertyListItemFor<K>

Events

Event	Payload	Description
add	[item: PropertyListItemFor<K>]

Slots

Slot	Props	Description
default	{}

PropertyListRemove

Generated from packages/vue/src/primitives/PropertyList/PropertyListRemove.vue

Props

Prop	Default	Type
propKey* Must match the nearest PropertyListRoot and preserves generic inference.	—	K
as Element or component rendered by this part.	"button"	string | Component | undefined
asChild Merge behavior into the single child element.	false	boolean | undefined
disabled Prevent activation.	—	boolean | undefined
index*	—	number

Events

Event	Payload	Description
remove	[index: number]

Slots

Slot	Props	Description
default	{}

PropertyListVisibility

Generated from packages/vue/src/primitives/PropertyList/PropertyListVisibility.vue

Props

Prop	Default	Type
propKey* Must match the nearest PropertyListRoot and preserves generic inference.	—	K
as Element or component rendered by this part.	"button"	string | Component | undefined
asChild Merge behavior into the single child element.	false	boolean | undefined
disabled Prevent activation.	—	boolean | undefined
index*	—	number

Events

Event	Payload	Description
toggle	[index: number]

Slots

Slot	Props	Description
default	{ visible: boolean; }