Skip to content

Commit

Permalink
docs: table style
Browse files Browse the repository at this point in the history
  • Loading branch information
@CyanSalt
CyanSalt committed Apr 1, 2024
1 parent 365f30f commit 2895db6
Show file tree
Hide file tree
Showing 7 changed files with 158 additions and 117 deletions.
59 changes: 35 additions & 24 deletions docs/.vitepress/components/REventsTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,28 +18,39 @@ const events = useList(eventsInjection)
</script>

<template>
<RTable :rows="events" class="events-table">
<RTableColumn v-slot="{ row }" name="name">
<component
:is="(row as EventData).slots.name"
v-if="(row as EventData).slots.name"
></component>
<slot v-else name="name" :value="(row as EventData).name">{{ (row as EventData).name }}</slot>
</RTableColumn>
<RTableColumn v-slot="{ row }" name="parameters">
<component
:is="(row as EventData).slots.parameters"
v-if="(row as EventData).slots.parameters"
></component>
<slot v-else name="parameters"></slot>
</RTableColumn>
<RTableColumn v-slot="{ row }" name="description">
<component
:is="(row as EventData).slots.default"
v-if="(row as EventData).slots.default"
></component>
<slot v-else name="description"></slot>
</RTableColumn>
<slot></slot>
</RTable>
<div class="r-events-table">
<RTable :rows="events">
<RTableColumn v-slot="{ row }" name="name">
<component
:is="(row as EventData).slots.name"
v-if="(row as EventData).slots.name"
></component>
<slot v-else name="name" :value="(row as EventData).name">{{ (row as EventData).name }}</slot>
</RTableColumn>
<RTableColumn v-slot="{ row }" name="parameters">
<component
:is="(row as EventData).slots.parameters"
v-if="(row as EventData).slots.parameters"
></component>
<slot v-else name="parameters"></slot>
</RTableColumn>
<RTableColumn v-slot="{ row }" name="description">
<component
:is="(row as EventData).slots.default"
v-if="(row as EventData).slots.default"
></component>
<slot v-else name="description"></slot>
</RTableColumn>
<slot></slot>
</RTable>
</div>
</template>

<style lang="scss">
.r-events-table {
overflow: auto;
.r-table {
min-width: 100%;
}
}
</style>
73 changes: 42 additions & 31 deletions docs/.vitepress/components/RPropsTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,35 +19,46 @@ const props = useList(propsInjection)
</script>

<template>
<RTable :rows="props" class="props-table">
<RTableColumn v-slot="{ row }" name="name">
<component
:is="(row as PropData).slots.name"
v-if="(row as PropData).slots.name"
></component>
<slot v-else name="name" :value="(row as PropData).name">{{ (row as PropData).name }}</slot>
</RTableColumn>
<RTableColumn v-slot="{ row }" name="type">
<component
:is="(row as PropData).slots.type"
v-if="(row as PropData).slots.type"
></component>
<slot v-else name="type"></slot>
</RTableColumn>
<RTableColumn v-slot="{ row }" name="default-value">
<component
:is="(row as PropData).slots['default-value']"
v-if="(row as PropData).slots['default-value']"
></component>
<slot v-else name="default-value"></slot>
</RTableColumn>
<RTableColumn v-slot="{ row }" name="description">
<component
:is="(row as PropData).slots.default"
v-if="(row as PropData).slots.default"
></component>
<slot v-else name="description"></slot>
</RTableColumn>
<slot></slot>
</RTable>
<div class="r-props-table">
<RTable :rows="props">
<RTableColumn v-slot="{ row }" name="name">
<component
:is="(row as PropData).slots.name"
v-if="(row as PropData).slots.name"
></component>
<slot v-else name="name" :value="(row as PropData).name">{{ (row as PropData).name }}</slot>
</RTableColumn>
<RTableColumn v-slot="{ row }" name="type">
<component
:is="(row as PropData).slots.type"
v-if="(row as PropData).slots.type"
></component>
<slot v-else name="type"></slot>
</RTableColumn>
<RTableColumn v-slot="{ row }" name="default-value">
<component
:is="(row as PropData).slots['default-value']"
v-if="(row as PropData).slots['default-value']"
></component>
<slot v-else name="default-value"></slot>
</RTableColumn>
<RTableColumn v-slot="{ row }" name="description">
<component
:is="(row as PropData).slots.default"
v-if="(row as PropData).slots.default"
></component>
<slot v-else name="description"></slot>
</RTableColumn>
<slot></slot>
</RTable>
</div>
</template>

<style lang="scss">
.r-props-table {
overflow: auto;
.r-table {
min-width: 100%;
}
}
</style>
59 changes: 35 additions & 24 deletions docs/.vitepress/components/RSlotsTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,28 +18,39 @@ const slots = useList(slotsInjection)
</script>

<template>
<RTable :rows="slots" class="slots-table">
<RTableColumn v-slot="{ row }" name="name">
<component
:is="(row as SlotData).slots.name"
v-if="(row as SlotData).slots.name"
></component>
<slot v-else name="name" :value="(row as SlotData).name">{{ (row as SlotData).name }}</slot>
</RTableColumn>
<RTableColumn v-slot="{ row }" name="parameters">
<component
:is="(row as SlotData).slots.parameters"
v-if="(row as SlotData).slots.parameters"
></component>
<slot v-else name="parameters"></slot>
</RTableColumn>
<RTableColumn v-slot="{ row }" name="description">
<component
:is="(row as SlotData).slots.default"
v-if="(row as SlotData).slots.default"
></component>
<slot v-else name="description"></slot>
</RTableColumn>
<slot></slot>
</RTable>
<div class="r-slots-table">
<RTable :rows="slots">
<RTableColumn v-slot="{ row }" name="name">
<component
:is="(row as SlotData).slots.name"
v-if="(row as SlotData).slots.name"
></component>
<slot v-else name="name" :value="(row as SlotData).name">{{ (row as SlotData).name }}</slot>
</RTableColumn>
<RTableColumn v-slot="{ row }" name="parameters">
<component
:is="(row as SlotData).slots.parameters"
v-if="(row as SlotData).slots.parameters"
></component>
<slot v-else name="parameters"></slot>
</RTableColumn>
<RTableColumn v-slot="{ row }" name="description">
<component
:is="(row as SlotData).slots.default"
v-if="(row as SlotData).slots.default"
></component>
<slot v-else name="description"></slot>
</RTableColumn>
<slot></slot>
</RTable>
</div>
</template>

<style lang="scss">
.r-slots-table {
overflow: auto;
.r-table {
min-width: 100%;
}
}
</style>
73 changes: 42 additions & 31 deletions docs/.vitepress/components/RStylesTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,35 +19,46 @@ const styles = useList(stylesInjection)
</script>

<template>
<RTable :rows="styles" class="styles-table">
<RTableColumn v-slot="{ row }" name="name">
<component
:is="(row as StyleData).slots.name"
v-if="(row as StyleData).slots.name"
></component>
<slot v-else name="name" :value="(row as StyleData).name">{{ (row as StyleData).name }}</slot>
</RTableColumn>
<RTableColumn v-slot="{ row }" name="values">
<component
:is="(row as StyleData).slots.values"
v-if="(row as StyleData).slots.values"
></component>
<slot v-else name="values"></slot>
</RTableColumn>
<RTableColumn v-slot="{ row }" name="default-value">
<component
:is="(row as StyleData).slots['default-value']"
v-if="(row as StyleData).slots['default-value']"
></component>
<slot v-else name="default-value"></slot>
</RTableColumn>
<RTableColumn v-slot="{ row }" name="description">
<component
:is="(row as StyleData).slots.default"
v-if="(row as StyleData).slots.default"
></component>
<slot v-else name="description"></slot>
</RTableColumn>
<slot></slot>
</RTable>
<div class="r-styles-table">
<RTable :rows="styles">
<RTableColumn v-slot="{ row }" name="name">
<component
:is="(row as StyleData).slots.name"
v-if="(row as StyleData).slots.name"
></component>
<slot v-else name="name" :value="(row as StyleData).name">{{ (row as StyleData).name }}</slot>
</RTableColumn>
<RTableColumn v-slot="{ row }" name="values">
<component
:is="(row as StyleData).slots.values"
v-if="(row as StyleData).slots.values"
></component>
<slot v-else name="values"></slot>
</RTableColumn>
<RTableColumn v-slot="{ row }" name="default-value">
<component
:is="(row as StyleData).slots['default-value']"
v-if="(row as StyleData).slots['default-value']"
></component>
<slot v-else name="default-value"></slot>
</RTableColumn>
<RTableColumn v-slot="{ row }" name="description">
<component
:is="(row as StyleData).slots.default"
v-if="(row as StyleData).slots.default"
></component>
<slot v-else name="description"></slot>
</RTableColumn>
<slot></slot>
</RTable>
</div>
</template>

<style lang="scss">
.r-styles-table {
overflow: auto;
.r-table {
min-width: 100%;
}
}
</style>
4 changes: 1 addition & 3 deletions docs/.vitepress/theme/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,7 @@
}

.vp-doc .r-table {
&[data-example] {
display: revert;
}
display: revert;
tr {
border-top: revert;
background-color: transparent;
Expand Down
2 changes: 1 addition & 1 deletion docs/components/graphics.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {

</RDetails>

<RTable :rows="['color']" data-example>
<RTable :rows="['color']">
<RTableColumn v-slot="{ row }" name="continent">
<template v-if="row === 'color'">
New Zealand
Expand Down
5 changes: 2 additions & 3 deletions docs/components/table.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ import { RTable, RTableColumn, RText } from 'roughness'

</RDetails>

<RTable :rows="['html', 'js', 'css']" data-example>
<RTable :rows="['html', 'js', 'css']">
<RTableColumn v-slot="{ row }" name="name">{{ row.toUpperCase() }}</RTableColumn>
<RTableColumn v-slot="{ row }" name="age">
<template v-if="row === 'html'">
Expand Down Expand Up @@ -92,7 +92,6 @@ import { RTable, RTableColumn } from 'roughness'
:rows="['unified', 'western', 'eastern']"
:header="false"
footer
data-example
>
<RTableColumn name="name">
<template #default="{ row }">
Expand Down Expand Up @@ -146,7 +145,7 @@ const data = [

</RDetails>

<RTable :rows="data" data-example>
<RTable :rows="data">
<RTableColumn name="z" />
<RTableColumn v-slot="{ row }" name="element">
<template v-if="row[RKey] === 1">
Expand Down

0 comments on commit 2895db6

Please sign in to comment.