sprintify-ui 0.12.26 → 0.12.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -87,5 +87,32 @@ export default function ({ addVariant, addComponents, e, theme }) {
|
|
|
87
87
|
'border-style': borderStyle,
|
|
88
88
|
'border-color': borderColor,
|
|
89
89
|
},
|
|
90
|
+
// Outer borders removal (ex: table inside a BaseCard)
|
|
91
|
+
...outerBorderRemoval('.tabulation.tabulation-border-t-0', ['top']),
|
|
92
|
+
...outerBorderRemoval('.tabulation.tabulation-border-b-0', ['bottom']),
|
|
93
|
+
...outerBorderRemoval('.tabulation.tabulation-border-l-0', ['left']),
|
|
94
|
+
...outerBorderRemoval('.tabulation.tabulation-border-r-0', ['right']),
|
|
95
|
+
...outerBorderRemoval('.tabulation.tabulation-border-0', ['top', 'bottom', 'left', 'right']),
|
|
90
96
|
});
|
|
91
97
|
}
|
|
98
|
+
|
|
99
|
+
// Rows can be inside thead/tbody/tfoot or directly inside the table
|
|
100
|
+
const outerCells = {
|
|
101
|
+
top: ['> :first-child > tr:first-child > *', '> tr:first-child > *'],
|
|
102
|
+
bottom: ['> :last-child > tr:last-child > *', '> tr:last-child > *'],
|
|
103
|
+
left: ['> * > tr > :first-child', '> tr > :first-child'],
|
|
104
|
+
right: ['> * > tr > :last-child', '> tr > :last-child'],
|
|
105
|
+
};
|
|
106
|
+
|
|
107
|
+
function outerBorderRemoval(table, sides) {
|
|
108
|
+
const components = {};
|
|
109
|
+
|
|
110
|
+
sides.forEach((side) => {
|
|
111
|
+
const selectors = [table, ...outerCells[side].map((cell) => `${table} ${cell}`)];
|
|
112
|
+
components[selectors.join(', ')] = {
|
|
113
|
+
[`border-${side}-width`]: '0',
|
|
114
|
+
};
|
|
115
|
+
});
|
|
116
|
+
|
|
117
|
+
return components;
|
|
118
|
+
}
|
package/package.json
CHANGED
|
@@ -61,3 +61,60 @@ const Template = (args) => ({
|
|
|
61
61
|
|
|
62
62
|
export const Demo = Template.bind({});
|
|
63
63
|
Demo.args = {};
|
|
64
|
+
|
|
65
|
+
const tabulationRows = `
|
|
66
|
+
<thead>
|
|
67
|
+
<tr><th class="text-left">Name</th><th class="text-left">Age</th></tr>
|
|
68
|
+
</thead>
|
|
69
|
+
<tbody>
|
|
70
|
+
<tr><td>John Doe</td><td>35</td></tr>
|
|
71
|
+
<tr><td>Jane Doe</td><td>32</td></tr>
|
|
72
|
+
</tbody>
|
|
73
|
+
`;
|
|
74
|
+
|
|
75
|
+
const TabulationTemplate = (args) => ({
|
|
76
|
+
components: { BaseCard, BaseCardRow },
|
|
77
|
+
setup() {
|
|
78
|
+
return { args };
|
|
79
|
+
},
|
|
80
|
+
template: `
|
|
81
|
+
<div class="bg-slate-100 p-5 space-y-5">
|
|
82
|
+
<div>
|
|
83
|
+
<p class="mb-2 text-sm font-medium">Standalone</p>
|
|
84
|
+
<table class="tabulation w-full">${tabulationRows}</table>
|
|
85
|
+
</div>
|
|
86
|
+
|
|
87
|
+
<div>
|
|
88
|
+
<p class="mb-2 text-sm font-medium">In a BaseCard (double bottom border)</p>
|
|
89
|
+
<BaseCard>
|
|
90
|
+
<table class="tabulation w-full">${tabulationRows}</table>
|
|
91
|
+
</BaseCard>
|
|
92
|
+
</div>
|
|
93
|
+
|
|
94
|
+
<div>
|
|
95
|
+
<p class="mb-2 text-sm font-medium">In a BaseCard with tabulation-border-b-0</p>
|
|
96
|
+
<BaseCard>
|
|
97
|
+
<table class="tabulation tabulation-border-b-0 w-full">${tabulationRows}</table>
|
|
98
|
+
</BaseCard>
|
|
99
|
+
</div>
|
|
100
|
+
|
|
101
|
+
<div>
|
|
102
|
+
<p class="mb-2 text-sm font-medium">In a BaseCard with a footer (keep the bottom border)</p>
|
|
103
|
+
<BaseCard>
|
|
104
|
+
<table class="tabulation w-full">${tabulationRows}</table>
|
|
105
|
+
<BaseCardRow size="sm">Footer</BaseCardRow>
|
|
106
|
+
</BaseCard>
|
|
107
|
+
</div>
|
|
108
|
+
|
|
109
|
+
<div>
|
|
110
|
+
<p class="mb-2 text-sm font-medium">Grid in a BaseCard with tabulation-border-0</p>
|
|
111
|
+
<BaseCard clipped>
|
|
112
|
+
<table class="tabulation tabulation-grid tabulation-border-0 w-full">${tabulationRows}</table>
|
|
113
|
+
</BaseCard>
|
|
114
|
+
</div>
|
|
115
|
+
</div>
|
|
116
|
+
`,
|
|
117
|
+
});
|
|
118
|
+
|
|
119
|
+
export const WithTabulation = TabulationTemplate.bind({});
|
|
120
|
+
WithTabulation.args = {};
|