tecitheme 0.11.2 → 0.11.4
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.
- package/dist/components/FeatureTable.svelte +242 -252
- package/dist/utils.js +4 -4
- package/package.json +1 -1
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
* columns: [
|
|
13
13
|
* {
|
|
14
14
|
* name: text
|
|
15
|
-
*
|
|
15
|
+
* description: text
|
|
16
16
|
* highlightOption: boolean
|
|
17
17
|
* }
|
|
18
18
|
* ],
|
|
@@ -38,14 +38,14 @@
|
|
|
38
38
|
* }
|
|
39
39
|
*/
|
|
40
40
|
let tables = {};
|
|
41
|
-
data.
|
|
41
|
+
data.groups.forEach(section => {
|
|
42
42
|
if (section.options)
|
|
43
43
|
{
|
|
44
44
|
tables[section.name] = {columns: [], categories: []}; //Initialize key for the section object
|
|
45
45
|
|
|
46
46
|
section.options.forEach(option => {
|
|
47
47
|
|
|
48
|
-
tables[section.name]["columns"].push({name: option.name,
|
|
48
|
+
tables[section.name]["columns"].push({name: option.name, description: option.description, highlightOption: option.highlightOption});
|
|
49
49
|
|
|
50
50
|
if (option.features) {
|
|
51
51
|
option.features.forEach(category => {
|
|
@@ -62,8 +62,8 @@
|
|
|
62
62
|
? catData["features"][feature.name]
|
|
63
63
|
: {name: feature.name, values: {}, order: index};
|
|
64
64
|
|
|
65
|
-
//
|
|
66
|
-
if (feature.helpText) featureData["helpText"] = feature.helpText;
|
|
65
|
+
//Only use the first helpText provided for a given feature name
|
|
66
|
+
if (feature.helpText && !featureData["helpText"]) featureData["helpText"] = feature.helpText;
|
|
67
67
|
|
|
68
68
|
//Key values by the column name
|
|
69
69
|
featureData.values[option.name] = {value: feature.value, mobileOrder: index};
|
|
@@ -86,8 +86,8 @@
|
|
|
86
86
|
let selectedTable = writable({});
|
|
87
87
|
|
|
88
88
|
//Initialize data stores
|
|
89
|
-
if (data.
|
|
90
|
-
selectedButton.update(val => data.
|
|
89
|
+
if (data.groups) {
|
|
90
|
+
selectedButton.update(val => data.groups[0]);
|
|
91
91
|
selectedTable.update(val => tables[$selectedButton.name]);
|
|
92
92
|
}
|
|
93
93
|
|
|
@@ -125,278 +125,268 @@
|
|
|
125
125
|
|
|
126
126
|
</script>
|
|
127
127
|
|
|
128
|
-
<div id={id} class="
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
</button>
|
|
156
|
-
{/each}
|
|
128
|
+
<div id={id} class="relative flex flex-col space-y-4">
|
|
129
|
+
|
|
130
|
+
<!-- Hero -->
|
|
131
|
+
<div class="flow-root bg-gradient-to-b {getColorStyles("gradient-dark", data.color)} py-16 sm:pt-32">
|
|
132
|
+
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
133
|
+
|
|
134
|
+
<!-- Title, Text, and Buttons -->
|
|
135
|
+
<div class="relative z-10">
|
|
136
|
+
<!-- Title -->
|
|
137
|
+
{#if data.heading}
|
|
138
|
+
<h1 class="mx-auto max-w-4xl text-center text-5xl font-bold tracking-tight text-white break-words hyphens-auto">{data.heading}</h1>
|
|
139
|
+
{/if}
|
|
140
|
+
<!-- Hero Text -->
|
|
141
|
+
{#if data.subheading}
|
|
142
|
+
<p class="mx-auto mt-4 max-w-2xl text-center text-lg leading-8 text-white">{@html data.subheading}</p>
|
|
143
|
+
{/if}
|
|
144
|
+
|
|
145
|
+
<!-- Buttons -->
|
|
146
|
+
<div class="mt-16 flex justify-center">
|
|
147
|
+
<fieldset class="flex flex-row bg-white/5 text-center text-xs font-semibold leading-5 text-white">
|
|
148
|
+
<legend class="sr-only">Payment frequency</legend>
|
|
149
|
+
|
|
150
|
+
{#each data.groups as btn}
|
|
151
|
+
<button class="{$selectedButton === btn ? getColorStyles("background", data.color) : "bg-transparent hover:bg-gray-500/40"} px-4 py-2 transition ease-in-out duration-300" on:click={selectedButton.update(val => btn)}>
|
|
152
|
+
{btn.name}
|
|
153
|
+
</button>
|
|
154
|
+
{/each}
|
|
157
155
|
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
{/if}
|
|
156
|
+
</fieldset>
|
|
157
|
+
</div>
|
|
158
|
+
</div>
|
|
162
159
|
|
|
163
|
-
|
|
164
|
-
|
|
160
|
+
<!-- Option Cards -->
|
|
161
|
+
<div class="relative mx-auto mt-10 flex flex-col space-y-8 lg:space-y-0 lg:space-x-4 lg:flex-row">
|
|
165
162
|
|
|
166
|
-
|
|
163
|
+
<div class="hidden lg:absolute lg:inset-x-px lg:bottom-0 lg:top-4 lg:block" aria-hidden="true"></div>
|
|
167
164
|
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
{/if}
|
|
188
|
-
</div>
|
|
189
|
-
</div>
|
|
190
|
-
|
|
191
|
-
<!-- Call to Action -->
|
|
192
|
-
{#if card.cta}
|
|
193
|
-
<a href={card.cta.href} class="py-2 lg:px-3 sm:px-12 text-center text-sm font-semibold leading-6 {getColorStyles("button", card.highlightOption ? "white" : data.product)}">{card.cta.text}</a>
|
|
165
|
+
{#if $selectedButton.options}
|
|
166
|
+
{#each $selectedButton.options as card}
|
|
167
|
+
|
|
168
|
+
<div class="relative ring-1 ring-white/30 lg:pb-14 {card.highlightOption ? getColorStyles("background", data.color) : "bg-white"} w-full shadow-lg">
|
|
169
|
+
<div class="p-8 lg:pt-12 xl:p-10 xl:pt-14">
|
|
170
|
+
|
|
171
|
+
<!-- Card Title -->
|
|
172
|
+
<h2 id={makeIdString(card.name)} class="text-sm font-semibold leading-6 {card.highlightOption ? "text-white" : "text-black"}">{card.name}</h2>
|
|
173
|
+
|
|
174
|
+
<!-- Price / Freqeuency -->
|
|
175
|
+
<div class="flex flex-col gap-6 sm:flex-row sm:items-end sm:justify-between lg:flex-col lg:items-stretch">
|
|
176
|
+
<div class="mt-2 flex items-center gap-x-4">
|
|
177
|
+
<!-- Price -->
|
|
178
|
+
<p class="text-4xl font-bold tracking-tight {card.highlightOption ? "text-white" : "text-black"}">{card.price}</p>
|
|
179
|
+
<div class="text-sm leading-5">
|
|
180
|
+
<p class="{card.highlightOption ? "text-white" : "text-black"}">{#if card.currency}{card.currency}{:else}USD{/if}</p>
|
|
181
|
+
|
|
182
|
+
{#if card.divisor}
|
|
183
|
+
<p class="{card.highlightOption ? "text-white" : "text-black"}">{card.divisor}</p>
|
|
194
184
|
{/if}
|
|
195
185
|
</div>
|
|
196
|
-
|
|
197
|
-
<!-- Highlighted Features -->
|
|
198
|
-
{#if card.highlightedFeatures}
|
|
199
|
-
<div class="mt-8 flow-root sm:mt-10">
|
|
200
|
-
<ul role="list" class="-my-2 divide-y border-t text-sm leading-6 lg:border-t-0 {card.highlightOption ? "text-white divide-white/50 border-white/50" : "text-black divide-black/50 border-black/50"}">
|
|
201
|
-
|
|
202
|
-
{#each card.highlightedFeatures as feature}
|
|
203
|
-
<li class="flex gap-x-3 py-2">
|
|
204
|
-
<svg class="h-6 w-5 flex-none {card.highlightOption ? "text-white" : "text-gray-500"}" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
|
205
|
-
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
|
|
206
|
-
</svg>
|
|
207
|
-
{feature}
|
|
208
|
-
</li>
|
|
209
|
-
{/each}
|
|
210
|
-
</ul>
|
|
211
|
-
</div>
|
|
212
|
-
{/if}
|
|
213
186
|
</div>
|
|
187
|
+
|
|
188
|
+
<!-- Call to Action -->
|
|
189
|
+
{#if card.cta}
|
|
190
|
+
<a href={card.cta.href} class="py-2 lg:px-3 sm:px-12 text-center text-sm font-semibold leading-6 {getColorStyles("button", card.highlightOption ? "white" : data.color)}">{card.cta.text}</a>
|
|
191
|
+
{/if}
|
|
214
192
|
</div>
|
|
193
|
+
|
|
194
|
+
<!-- Highlighted Features -->
|
|
195
|
+
{#if card.highlightedFeatures}
|
|
196
|
+
<div class="mt-8 flow-root sm:mt-10">
|
|
197
|
+
<ul role="list" class="-my-2 divide-y border-t text-sm leading-6 lg:border-t-0 {card.highlightOption ? "text-white divide-white/50 border-white/50" : "text-black divide-black/50 border-black/50"}">
|
|
198
|
+
|
|
199
|
+
{#each card.highlightedFeatures as feature}
|
|
200
|
+
<li class="flex gap-x-3 py-2">
|
|
201
|
+
<svg class="h-6 w-5 flex-none {card.highlightOption ? "text-white" : "text-gray-500"}" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
|
202
|
+
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
|
|
203
|
+
</svg>
|
|
204
|
+
{feature}
|
|
205
|
+
</li>
|
|
206
|
+
{/each}
|
|
207
|
+
</ul>
|
|
208
|
+
</div>
|
|
209
|
+
{/if}
|
|
210
|
+
</div>
|
|
211
|
+
</div>
|
|
215
212
|
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
</div>
|
|
219
|
-
</div>
|
|
213
|
+
{/each}
|
|
214
|
+
{/if}
|
|
220
215
|
</div>
|
|
216
|
+
</div>
|
|
217
|
+
</div>
|
|
218
|
+
|
|
219
|
+
<!-- Desktop Table Headings -->
|
|
220
|
+
<div class="hidden sticky top-16 bg-white sm:flex flex-row space-x-8 w-full items-end z-20 border-b shadow-lg">
|
|
221
|
+
<div class="w-full py-8"></div>
|
|
222
|
+
{#each $selectedTable.columns as column}
|
|
223
|
+
<div class="-mt-px border-b-2 w-full border-transparent py-8 {column.highlightOption ? getColorStyles("border", data.color) : ""}">
|
|
224
|
+
<h3 class="font-semibold leading-6 text-gray-900 {column.highlightOption ? getColorStyles("text", data.color) : ""}">{column.name}</h3>
|
|
225
|
+
{#if column.description}
|
|
226
|
+
<p class="mt-1 text-sm leading-6 text-gray-600">{column.description}</p>
|
|
227
|
+
{/if}
|
|
228
|
+
</div>
|
|
229
|
+
{/each}
|
|
230
|
+
</div>
|
|
231
|
+
|
|
232
|
+
<!-- Desktop Feature Comparison Tables -->
|
|
233
|
+
{#each Object.values($selectedTable.categories) as category, categoryIndex}
|
|
234
|
+
|
|
235
|
+
<!-- Category Name -->
|
|
236
|
+
<h4 class="hidden sm:block sticky top-40 z-20 bg-white font-semibold leading-6 text-gray-900 px-4 py-2">{category.name}</h4>
|
|
237
|
+
|
|
238
|
+
<!-- Table -->
|
|
239
|
+
<div class="hidden relative sm:flex flex-col w-full pt-8 shadow-lg">
|
|
240
|
+
{#each sortFeaturesByOrder(category.features) as feature, featureIndex}
|
|
241
|
+
<div class="w-full flex flex-row items-center justify-center {featureIndex !== Object.values(category.features).length - 1 ? "border-b" : ""} space-x-8">
|
|
242
|
+
<!-- Row Header -->
|
|
243
|
+
<div class="flex flex-row w-full py-3 pl-4 text-left text-sm font-normal leading-6 text-gray-900 items-center space-x-2">
|
|
244
|
+
<p>{@html feature.name}</p>
|
|
245
|
+
|
|
246
|
+
<!-- Info Icon and Text -->
|
|
247
|
+
{#if feature.helpText}
|
|
248
|
+
<span class="relative group">
|
|
249
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
|
|
250
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
|
|
251
|
+
</svg>
|
|
252
|
+
<div class="absolute hidden group-hover:block bg-white border shadow-lg p-2 w-48 z-10 text-center left-1/2 -translate-x-1/2">
|
|
253
|
+
<p>{@html feature.helpText}</p>
|
|
254
|
+
</div>
|
|
255
|
+
</span>
|
|
256
|
+
{/if}
|
|
257
|
+
</div>
|
|
221
258
|
|
|
222
|
-
|
|
223
|
-
<div class="hidden lg:flex flex-col mx-auto w-full items-center lg:py-20 lg:px-8">
|
|
224
|
-
{#each Object.values($selectedTable.categories) as category, categoryIndex}
|
|
225
|
-
|
|
226
|
-
<!-- Table heading -->
|
|
227
|
-
<div class="flex flex-row space-x-8 w-full items-end {categoryIndex === 0 ? "border-t" : ""}">
|
|
228
|
-
|
|
229
|
-
<!-- Category Name -->
|
|
230
|
-
<h4 class="text-sm font-semibold leading-6 text-gray-900 w-full pt-10">{category.name}</h4>
|
|
231
|
-
|
|
232
|
-
<!-- Headers, if the first category in the list -->
|
|
259
|
+
<!-- Row Values -->
|
|
233
260
|
{#each $selectedTable.columns as column}
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
261
|
+
<p class="w-full h-full px-4 py-3 text-center
|
|
262
|
+
{column.highlightOption ? "font-bold " + getColorStyles("text", data.color) : ""}
|
|
263
|
+
">
|
|
264
|
+
|
|
265
|
+
{#if feature.values[column.name] != undefined}
|
|
266
|
+
<!-- Check mark -->
|
|
267
|
+
{#if feature.values[column.name].value === true}
|
|
268
|
+
<svg class="mx-auto h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
|
269
|
+
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
|
|
270
|
+
</svg>
|
|
271
|
+
<span class="sr-only">Yes</span>
|
|
272
|
+
|
|
273
|
+
<!-- X Mark -->
|
|
274
|
+
{:else if feature.values[column.name].value === false}
|
|
275
|
+
<svg class="mx-auto h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
|
276
|
+
<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
|
|
277
|
+
</svg>
|
|
278
|
+
<span class="sr-only">No</span>
|
|
279
|
+
|
|
280
|
+
<!-- Text -->
|
|
281
|
+
{:else if feature.values[column.name].value}
|
|
282
|
+
{@html feature.values[column.name].value}
|
|
239
283
|
{/if}
|
|
240
284
|
{/if}
|
|
241
|
-
|
|
285
|
+
</p>
|
|
242
286
|
{/each}
|
|
243
287
|
</div>
|
|
244
|
-
|
|
245
|
-
<!-- Table -->
|
|
246
|
-
<div class="relative flex flex-col w-full pt-8 shadow-lg">
|
|
247
|
-
{#each sortFeaturesByOrder(category.features) as feature, featureIndex}
|
|
248
|
-
<div class="w-full flex flex-row items-center justify-center {featureIndex !== Object.values(category.features).length - 1 ? "border-b" : ""} space-x-8">
|
|
249
|
-
<!-- Row Header -->
|
|
250
|
-
<div class="flex flex-row w-full py-3 pl-4 text-left text-sm font-normal leading-6 text-gray-900 items-center space-x-2">
|
|
251
|
-
<p>{feature.name}</p>
|
|
252
|
-
|
|
253
|
-
<!-- Info Icon and Text -->
|
|
254
|
-
{#if feature.helpText}
|
|
255
|
-
<span class="relative group">
|
|
256
|
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
|
|
257
|
-
<path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
|
|
258
|
-
</svg>
|
|
259
|
-
<div class="absolute hidden group-hover:block bg-white border shadow-lg p-2 w-48 z-10 text-center left-1/2 -translate-x-1/2">
|
|
260
|
-
<p>{feature.helpText}</p>
|
|
261
|
-
</div>
|
|
262
|
-
</span>
|
|
263
|
-
{/if}
|
|
264
|
-
</div>
|
|
265
|
-
|
|
266
|
-
<!-- Row Values -->
|
|
267
|
-
{#each $selectedTable.columns as column}
|
|
268
|
-
<p class="w-full h-full px-4 py-3 text-center
|
|
269
|
-
{column.highlightOption ? "font-bold " + getColorStyles("text", data.product) : ""}
|
|
270
|
-
">
|
|
271
|
-
|
|
272
|
-
{#if feature.values[column.name] != undefined}
|
|
273
|
-
<!-- Check mark -->
|
|
274
|
-
{#if feature.values[column.name].value === true}
|
|
275
|
-
<svg class="mx-auto h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
|
276
|
-
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
|
|
277
|
-
</svg>
|
|
278
|
-
<span class="sr-only">Yes</span>
|
|
279
|
-
|
|
280
|
-
<!-- X Mark -->
|
|
281
|
-
{:else if feature.values[column.name].value === false}
|
|
282
|
-
<svg class="mx-auto h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
|
283
|
-
<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
|
|
284
|
-
</svg>
|
|
285
|
-
<span class="sr-only">No</span>
|
|
286
|
-
|
|
287
|
-
<!-- Text -->
|
|
288
|
-
{:else if feature.values[column.name].value}
|
|
289
|
-
{feature.values[column.name].value}
|
|
290
|
-
{/if}
|
|
291
|
-
{/if}
|
|
292
|
-
</p>
|
|
293
|
-
{/each}
|
|
294
|
-
</div>
|
|
295
|
-
{/each}
|
|
296
|
-
|
|
297
|
-
<!-- Dummy div for background rings around features -->
|
|
298
|
-
<div class="pointer-events-none absolute flex flex-row before:block w-full h-full space-x-8 top-0 pt-8" aria-hidden="true">
|
|
299
|
-
<div class="w-full"></div>
|
|
300
|
-
{#each $selectedTable.columns as column}
|
|
301
|
-
<div class="w-full ring-gray-900/10 {column.highlightOption ? getColorStyles("ring", data.product) + " ring-2" : "ring-1"}"></div>
|
|
302
|
-
{/each}
|
|
303
|
-
</div>
|
|
304
|
-
|
|
305
|
-
</div>
|
|
306
288
|
{/each}
|
|
307
|
-
</div>
|
|
308
|
-
|
|
309
|
-
<!-- Mobile Feature Comparison Tables -->
|
|
310
|
-
<div class="lg:hidden flex flex-col mx-auto w-full px-8 pt-14">
|
|
311
|
-
|
|
312
|
-
{#each $selectedTable.columns as column}
|
|
313
|
-
<!-- Mobile table headings -->
|
|
314
|
-
<div class="flex flex-row">
|
|
315
|
-
<div class="flex flex-col w-full border-t py-8 {column.highlightOption ? getColorStyles("border", data.product) : ""}">
|
|
316
|
-
<h3 class="text-sm font-semibold leading-6 text-gray-900 {column.highlightOption ? getColorStyles("text", data.product) : ""}">
|
|
317
|
-
{column.name}
|
|
318
|
-
</h3>
|
|
319
|
-
{#if column.flavorText}
|
|
320
|
-
<p>{column.flavorText}</p>
|
|
321
|
-
{/if}
|
|
322
|
-
</div>
|
|
323
|
-
<div class="border-t w-full" />
|
|
324
|
-
</div>
|
|
325
289
|
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
<!-- Tables -->
|
|
334
|
-
<div class="flex flex-col w-full shadow-lg">
|
|
335
|
-
|
|
336
|
-
{#each sortFeaturesByOrder(category.features, column.name) as feature, featureIndex }
|
|
337
|
-
<!-- Row -->
|
|
338
|
-
<div class="w-full flex flex-row items-center justify-center {featureIndex !== Object.values(category.features).filter(obj => obj.values[column.name] != undefined).length - 1 ? "border-b" : ""} space-x-8">
|
|
339
|
-
|
|
340
|
-
<!-- Row Header -->
|
|
341
|
-
<div class="flex flex-row w-full text-left text-sm font-normal leading-6 text-gray-900 items-center space-x-2 pl-4">
|
|
342
|
-
<p>{feature.name}</p>
|
|
343
|
-
|
|
344
|
-
<!-- Info Icon and Text -->
|
|
345
|
-
{#if feature.helpText}
|
|
346
|
-
<span class="relative group">
|
|
347
|
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
|
|
348
|
-
<path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
|
|
349
|
-
</svg>
|
|
350
|
-
<div class="absolute hidden group-hover:block bg-white border shadow-lg p-2 w-48 z-10 text-center left-1/2 -translate-x-1/2">
|
|
351
|
-
<p>{feature.helpText}</p>
|
|
352
|
-
</div>
|
|
353
|
-
</span>
|
|
354
|
-
{/if}
|
|
355
|
-
</div>
|
|
356
|
-
|
|
357
|
-
<!-- Row Values -->
|
|
358
|
-
<p class="w-full h-full px-4 py-3 text-center
|
|
359
|
-
{column.highlightOption ? "font-bold " + getColorStyles("text", data.product) : ""}
|
|
360
|
-
">
|
|
361
|
-
|
|
362
|
-
<!-- Check mark -->
|
|
363
|
-
{#if feature.values[column.name].value === true}
|
|
364
|
-
<svg class="mx-auto h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
|
365
|
-
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
|
|
366
|
-
</svg>
|
|
367
|
-
<span class="sr-only">Yes</span>
|
|
290
|
+
<!-- Dummy div for background rings around features -->
|
|
291
|
+
<div class="pointer-events-none absolute flex flex-row before:block w-full h-full space-x-8 top-0 pt-8" aria-hidden="true">
|
|
292
|
+
<div class="w-full"></div>
|
|
293
|
+
{#each $selectedTable.columns as column}
|
|
294
|
+
<div class="w-full ring-gray-900/10 ring-inset {column.highlightOption ? getColorStyles("ring", data.color) + " ring-2" : "ring-1"}"></div>
|
|
295
|
+
{/each}
|
|
296
|
+
</div>
|
|
368
297
|
|
|
369
|
-
|
|
370
|
-
{:else if feature.values[column.name].value === false}
|
|
371
|
-
<svg class="mx-auto h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
|
372
|
-
<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
|
|
373
|
-
</svg>
|
|
374
|
-
<span class="sr-only">No</span>
|
|
298
|
+
</div>
|
|
375
299
|
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
300
|
+
{/each}
|
|
301
|
+
|
|
302
|
+
<!-- Mobile Tables -->
|
|
303
|
+
{#each $selectedTable.columns as column}
|
|
304
|
+
<!-- Mobile table headings -->
|
|
305
|
+
<div class="sm:hidden sticky top-16 flex flex-row bg-white z-20 w-full">
|
|
306
|
+
<div class="flex flex-col w-full border-t py-8 {column.highlightOption ? getColorStyles("border", data.color) : ""}">
|
|
307
|
+
<h3 class="font-semibold leading-6 text-gray-900 {column.highlightOption ? getColorStyles("text", data.color) : ""}">
|
|
308
|
+
{column.name}
|
|
309
|
+
</h3>
|
|
310
|
+
{#if column.description}
|
|
311
|
+
<p>{column.description}</p>
|
|
312
|
+
{/if}
|
|
313
|
+
</div>
|
|
314
|
+
<div class="border-t w-full" />
|
|
315
|
+
</div>
|
|
381
316
|
|
|
382
|
-
|
|
383
|
-
|
|
317
|
+
<!-- Mobile tables -->
|
|
318
|
+
{#each Object.values($selectedTable.categories) as category}
|
|
384
319
|
|
|
320
|
+
{#if sortFeaturesByOrder(category.features, column.name).length > 0}
|
|
321
|
+
|
|
322
|
+
<!-- Category Headings -->
|
|
323
|
+
<h4 class="sticky top-40 sm:hidden block font-semibold leading-6 text-gray-900 w-full bg-white z-20 py-2">{category.name}</h4>
|
|
324
|
+
|
|
325
|
+
<div class="sm:hidden relative flex flex-col">
|
|
326
|
+
<!-- Tables -->
|
|
327
|
+
<div class="flex flex-col w-full shadow-lg">
|
|
328
|
+
|
|
329
|
+
{#each sortFeaturesByOrder(category.features, column.name) as feature, featureIndex }
|
|
330
|
+
<!-- Row -->
|
|
331
|
+
<div class="w-full flex flex-row items-center justify-center {featureIndex !== Object.values(category.features).filter(obj => obj.values[column.name] != undefined).length - 1 ? "border-b" : ""} space-x-8">
|
|
332
|
+
|
|
333
|
+
<!-- Row Header -->
|
|
334
|
+
<div class="flex flex-row w-full text-left text-sm font-normal leading-6 text-gray-900 items-center space-x-2 pl-4">
|
|
335
|
+
<p>{@html feature.name}</p>
|
|
336
|
+
|
|
337
|
+
<!-- Info Icon and Text -->
|
|
338
|
+
{#if feature.helpText}
|
|
339
|
+
<span class="relative group">
|
|
340
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
|
|
341
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
|
|
342
|
+
</svg>
|
|
343
|
+
<div class="absolute hidden group-hover:block bg-white border shadow-lg p-2 w-48 z-10 text-center left-1/2 -translate-x-1/2">
|
|
344
|
+
<p>{@html feature.helpText}</p>
|
|
345
|
+
</div>
|
|
346
|
+
</span>
|
|
347
|
+
{/if}
|
|
385
348
|
</div>
|
|
386
349
|
|
|
387
|
-
<!--
|
|
388
|
-
<
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
350
|
+
<!-- Row Values -->
|
|
351
|
+
<p class="w-full h-full px-4 py-3 text-center
|
|
352
|
+
{column.highlightOption ? "font-bold " + getColorStyles("text", data.color) : ""}
|
|
353
|
+
">
|
|
354
|
+
|
|
355
|
+
<!-- Check mark -->
|
|
356
|
+
{#if feature.values[column.name].value === true}
|
|
357
|
+
<svg class="mx-auto h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
|
358
|
+
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
|
|
359
|
+
</svg>
|
|
360
|
+
<span class="sr-only">Yes</span>
|
|
361
|
+
|
|
362
|
+
<!-- X Mark -->
|
|
363
|
+
{:else if feature.values[column.name].value === false}
|
|
364
|
+
<svg class="mx-auto h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
|
365
|
+
<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
|
|
366
|
+
</svg>
|
|
367
|
+
<span class="sr-only">No</span>
|
|
368
|
+
|
|
369
|
+
<!-- Text -->
|
|
370
|
+
{:else}
|
|
371
|
+
{@html feature.values[column.name].value}
|
|
372
|
+
{/if}
|
|
373
|
+
</p>
|
|
392
374
|
|
|
393
375
|
</div>
|
|
394
376
|
{/each}
|
|
377
|
+
|
|
395
378
|
</div>
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
379
|
+
|
|
380
|
+
<!-- Dummy div for background rings around features -->
|
|
381
|
+
<div class="pointer-events-none absolute flex flex-row before:block w-full h-full space-x-8 top-0" aria-hidden="true">
|
|
382
|
+
<div class="w-full"></div>
|
|
383
|
+
<div class="w-full ring-gray-900/10 ring-inset {column.highlightOption ? getColorStyles("ring", data.color) + " ring-2" : "ring-1"}"></div>
|
|
384
|
+
</div>
|
|
385
|
+
|
|
386
|
+
</div>
|
|
387
|
+
|
|
388
|
+
{/if}
|
|
389
|
+
{/each}
|
|
390
|
+
{/each}
|
|
401
391
|
|
|
402
392
|
</div>
|
package/dist/utils.js
CHANGED
|
@@ -165,16 +165,16 @@ export function getColorStyles(type, color){
|
|
|
165
165
|
case 'gradient-dark':
|
|
166
166
|
switch (color) {
|
|
167
167
|
case 'pyrosim':
|
|
168
|
-
classes = "from-pyrosim-dark to-
|
|
168
|
+
classes = "from-pyrosim-dark to-gray-800/30"
|
|
169
169
|
break;
|
|
170
170
|
case 'pathfinder':
|
|
171
|
-
classes = "from-pathfinder-dark to-
|
|
171
|
+
classes = "from-pathfinder-dark to-gray-800/30"
|
|
172
172
|
break;
|
|
173
173
|
case 'ventus':
|
|
174
|
-
classes = "from-ventus-dark to-
|
|
174
|
+
classes = "from-ventus-dark to-gray-800/30"
|
|
175
175
|
break;
|
|
176
176
|
case 'teci':
|
|
177
|
-
classes = "from-teci-blue-dark to-
|
|
177
|
+
classes = "from-teci-blue-dark to-gray-800/30"
|
|
178
178
|
break;
|
|
179
179
|
default:
|
|
180
180
|
classes = "bg-white"
|