PropertyList

PropertyList — управляемый компонент без встроенного оформления для списков заливок, обводок и эффектов. Параметр propKey задаёт точный тип Fill, Stroke или Effect для слотов и действий. Изменение состояния редактора и история отмены остаются в useEditorPropertyList() или адаптере приложения.

Состав

• PropertyListRoot — управляемые элементы, их идентификация, смешанное состояние и смысловые события;
• PropertyListItem — точный тип элемента, а также data-hidden и data-dragging;
• PropertyListAdd — добавление типизированного элемента;
• PropertyListRemove — удаление элемента по индексу;
• PropertyListVisibility — изменение видимости по индексу и значение 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">Удалить</PropertyListRemove>
    </PropertyListItem>
  </PropertyListRoot>
</template>

Общая матрица интерактивных состояний показана в демонстрации PropertySection.

Адаптер редактора

Панели 4B Pen используют useEditorPropertyList(propKey), чтобы связать управляемые события с выделением, изменением нескольких объектов, группировкой истории отмены и изменением порядка. Пользователи SDK могут предоставить собственный адаптер состояния без контекста редактора 4B Pen.

Сгенерированный справочник API

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
update	[index: number, item: PropertyListItemFor<K>]
patch	[index: number, changes: Partial<PropertyListItemFor<K>>]
remove	[index: number]
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; }