Skip to content

Fix code examples for SyncCard component#282

Open
devmount wants to merge 2 commits into
mainfrom
bugs/267-fix-code-examples-for-sync-card
Open

Fix code examples for SyncCard component#282
devmount wants to merge 2 commits into
mainfrom
bugs/267-fix-code-examples-for-sync-card

Conversation

@devmount
Copy link
Copy Markdown
Collaborator

@devmount devmount commented May 13, 2026

What changed?

This change improves the demo code examples and enhances the stories for the SyncCard component. Stories are now grouped by slot or property. Component names and HTML attributes are now in dash-case. Reactivity for the default story is kept intact.

Additionally a style issue was fixed, where the list items did overflow their parent container.

Why?

More organized and consistent documentation.

Limitations and Notes

I removed the FilySync Story since it doesn't show properties or slots that weren't shown before. If you still want to keep it, let me know!

Applicable Issues

Closes #267

Screenshots

There weren't any notable changes in the story structure.

@devmount devmount self-assigned this May 13, 2026
Copy link
Copy Markdown
Member

@MelissaAutumn MelissaAutumn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, I have a code example suggestion though.

Also will the border-box break any existing usage on appointment? 🤔

parameters: {
docs: {
source: {
code: '<sync-card\n title="Title"\n v-model="[\n { key: 0, label: \'Option 1\', checked: false },\n { key: 1, label: \'Option 2\', checked: true },\n { key: 2, label: \'Option 3\', checked: false },\n ]"\n/>',
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can v-models be given a inline list? Maybe we should do:

Suggested change
code: '<sync-card\n title="Title"\n v-model="[\n { key: 0, label: \'Option 1\', checked: false },\n { key: 1, label: \'Option 2\', checked: true },\n { key: 2, label: \'Option 3\', checked: false },\n ]"\n/>',
code: 'const model = ref([\n { key: 0, label: \'Option 1\', checked: false },\n { key: 1, label: \'Option 2\', checked: true },\n { key: 2, label: \'Option 3\', checked: false },\n ]);\n<sync-card\n title="Title"\n v-model="model"\n/>',

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(Please check that the newlines make sense 😅

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Fix code examples for SyncCard component

2 participants