thepaperpilot/Advent-Incremental
1
0
Fork 0
mirror of https://github.com/thepaperpilot/Advent-Incremental.git synced 2024-11-22 00:21:34 +00:00
Code Issues Releases Activity Actions

Add renderGrid function

Browse source
This commit is contained in:
thepaperpilot 2022-12-10 16:38:34 -06:00
parent 32eea67b53
commit ae8e1e47c5
2 changed files with 50 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/components/common/table.css
View file

@ -7,6 +7,11 @@
margin: 0 auto;
}
.table-grid {
display: flex;
flex-flow: column;
}
.table + .table {
margin-top: 10px;
}
@ -56,6 +61,10 @@
border-radius: var(--border-radius);
}
.row-grid {
display: flex;
}
.row-grid.mergeAdjacent > .feature:not(.dontMerge),
.row-grid.mergeAdjacent > .tooltip-container > .feature:not(.dontMerge) {
margin-left: 0;
@ -77,19 +86,19 @@
}
.table-grid > .row-grid.mergeAdjacent:last-child > .feature:not(.dontMerge):first-child {
border-radius: 0 0 0 var(--border-radius);
border-bottom-left-radius: var(--border-radius);
}
.table-grid > .row-grid.mergeAdjacent:first-child > .feature:not(.dontMerge):last-child {
border-radius: 0 var(--border-radius) 0 0;
border-top-right-radius: var(--border-radius);
}
.table-grid > .row-grid.mergeAdjacent:first-child > .feature:not(.dontMerge):first-child {
border-radius: var(--border-radius) 0 0 0;
border-top-left-radius: var(--border-radius);
}
.table-grid > .row-grid.mergeAdjacent:last-child > .feature:not(.dontMerge):last-child {
border-radius: 0 0 var(--border-radius) 0;
border-bottom-right-radius: var(--border-radius);
}

37
src/util/vue.tsx
View file

@ -1,7 +1,10 @@
import "components/common/table.css";
import Col from "components/layout/Column.vue";
import Row from "components/layout/Row.vue";
import themes from "data/themes";
import type { CoercableComponent, GenericComponent, JSXFunction } from "features/feature";
import { Component as ComponentKey, GatherProps, jsx, Visibility } from "features/feature";
import settings from "game/settings";
import type { ProcessedComputable } from "util/computed";
import { DoNotCache } from "util/computed";
import type { Component, ComputedRef, DefineComponent, PropType, Ref, ShallowRef } from "vue";
@ -61,6 +64,23 @@ export function renderCol(...objects: (VueFeature | CoercableComponent)[]): JSX.
return <Col>{objects.map(render)}</Col>;
}
export function renderGrid(...rows: (VueFeature | CoercableComponent)[][]): JSX.Element {
return (
<div class="table-grid">
{rows.map(row => (
<div
class={{
["row-grid"]: true,
["mergeAdjacent"]: themes[settings.theme].mergeAdjacent
}}
>
{row.map(render)}
</div>
))}
</div>
);
}
export function renderJSX(object: VueFeature | CoercableComponent): JSX.Element {
if (isCoercableComponent(object)) {
if (typeof object === "function") {
@ -85,6 +105,23 @@ export function renderColJSX(...objects: (VueFeature | CoercableComponent)[]): J
return <Col>{objects.map(renderJSX)}</Col>;
}
export function renderGridJSX(...rows: (VueFeature | CoercableComponent)[][]): JSX.Element {
return (
<div class="table-grid">
{rows.map(row => (
<div
class={{
["row-grid"]: true,
["mergeAdjacent"]: themes[settings.theme].mergeAdjacent
}}
>
{row.map(renderJSX)}
</div>
))}
</div>
);
}
export function joinJSX(objects: JSX.Element[], joiner: JSX.Element): JSX.Element {
return objects.reduce((acc, curr) => (
<>