Danila Poyarkov 1b7934b98e feat(vue): add property panel primitives

- Add headless PropertySection and accessible SegmentedControl anatomy

- Make PropertyList controlled and exactly typed with an undo-aware editor adapter

- Consolidate SDK metadata loaders and link untranslated docs to canonical pages

2026-07-13 12:36:03 +03:00

2.6 KiB

Raw Blame History

title	description
Property Panels	Build property panels with control composables and headless list primitives.

Property Panels

Property panels in @open-pencil/vue are intentionally composable-first.

If a panel mostly needs selection-derived values and update actions, prefer composables. If a panel needs reusable array/list structure, use a headless primitive like PropertyListRoot.

Common control composables

For standard property sections, start with:

usePosition()
useLayout()
useAppearance()
useTypography()
useExport()

For list-style panels, use:

useFillControls()
useStrokeControls()
useEffectsControls()

Example: position panel

<script setup lang="ts">
import { usePosition } from '@open-pencil/vue'

const { x, y, width, height, updateProp, commitProp } = usePosition()
</script>

<template>
  <div class="grid grid-cols-2 gap-2">
    <input :value="x" @input="updateProp('x', Number(($event.target as HTMLInputElement).value))" />
    <input :value="y" @input="updateProp('y', Number(($event.target as HTMLInputElement).value))" />
    <input :value="width" @input="updateProp('width', Number(($event.target as HTMLInputElement).value))" />
    <input :value="height" @input="updateProp('height', Number(($event.target as HTMLInputElement).value))" />
  </div>
</template>

Example: fills panel

<script setup lang="ts">
import {
  PropertyListRoot,
  useEditorPropertyList,
  useFillControls
} from '@open-pencil/vue'

const fillControls = useFillControls()
const fills = useEditorPropertyList('fills')
</script>

<template>
  <PropertyListRoot
    prop-key="fills"
    :items="fills.items.value"
    :mixed="fills.isMixed.value"
    @add="fills.actions.add"
    @remove="fills.actions.remove"
    v-slot="{ items, actions }"
  >
    <div v-for="(fill, index) in items" :key="index">
      {{ fill.type }}
      <button @click="actions.remove(index)">Remove</button>
    </div>

    <button @click="actions.add(fillControls.defaultFill)">Add fill</button>
  </PropertyListRoot>
</template>

Rule of thumb

use composables for direct control logic
use structural primitives when repeated list/tree/slot coordination is the hard part

2.6 KiB Raw Blame History