arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 20:19:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs: improve slots component display

Browse Source
This commit is contained in:
Benjamin Canac
2022-03-14 16:51:40 +01:00
parent fb3ff2e5fa
commit dca0ff4a60
1 changed files with 16 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
docs/pages/components/[component].vue
View File

@@ -8,17 +8,18 @@
<template v-if="Array.isArray(slot)">
<div :key="key">
<component
:is="slot.component ? `U${slot.component}` : slot.tag"
:is="slot.component ? `U${slot.component.name}` : slot.tag"
v-for="(slot, index) of slot"
:key="index"
:class="slot.class"
v-bind="slot.props || defaultProps[slot.component]"
v-bind="slot.component?.props || defaultProps[slot.component]"
v-html="slot.html"
/>
</div>
</template>
<template v-else>
<component :is="slot.component ? `U${slot.component}` : slot.tag" :key="key" :class="slot.class" v-bind="slot.props || defaultProps[slot.component]" v-html="slot.html" />
<component :is="`U${slot.component.name}`" v-if="slot.component" :key="`${key}-component`" v-bind="slot.component?.props || defaultProps[slot.component]" />
<component :is="slot.tag" v-else :key="`${key}-tag`" :class="slot.class" v-html="slot.html" />
</template>
</template>
</component>
@@ -202,10 +203,12 @@ const defaultProps = {
label: 'Input group',
slots: {
default: {
component: 'Input',
props: {
name: 'input',
placeholder: 'Works with every form element'
component: {
name: 'Input',
props: {
name: 'input',
placeholder: 'Works with every form element'
}
}
}
}
@@ -258,10 +261,12 @@ const defaultProps = {
html: 'Modal content'
},
footer: {
component: 'Button',
props: {
label: 'Close',
onClick: () => { modal.value = false }
component: {
name: 'Button',
props: {
label: 'Close',
onClick: () => { modal.value = false }
}
}
}
}