tecitheme 0.11.9 → 0.11.10
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.
|
@@ -1,73 +1,113 @@
|
|
|
1
1
|
<script>
|
|
2
2
|
import { slide } from "svelte/transition";
|
|
3
|
-
import { cubicIn, cubicOut } from "svelte/easing";
|
|
3
|
+
import { cubicIn, cubicOut, cubicInOut } from "svelte/easing";
|
|
4
|
+
import { makeIdString } from "../utils";
|
|
5
|
+
import { onMount } from "svelte";
|
|
6
|
+
import { page } from "$app/stores";
|
|
4
7
|
|
|
5
8
|
export let data = {};
|
|
6
|
-
export let prompts=[];
|
|
7
|
-
export let title="";
|
|
8
|
-
|
|
9
|
-
let promptsArray;
|
|
10
|
-
let accordionTitle;
|
|
11
|
-
let openPrompts=[];
|
|
12
9
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
} else if (prompts) {
|
|
16
|
-
promptsArray = prompts;
|
|
17
|
-
} else {
|
|
18
|
-
promptsArray = [];
|
|
19
|
-
}
|
|
10
|
+
let {prompts, title} = data;
|
|
11
|
+
let id = makeIdString(title);
|
|
20
12
|
|
|
21
|
-
|
|
22
|
-
accordionTitle = title;
|
|
23
|
-
} else if (data.title) {
|
|
24
|
-
accordionTitle = data.title;
|
|
25
|
-
} else {
|
|
26
|
-
accordionTitle = "";
|
|
27
|
-
}
|
|
13
|
+
let openPrompts=[];
|
|
28
14
|
|
|
29
15
|
function addPrompt(id) {
|
|
30
16
|
openPrompts = [...openPrompts, id];
|
|
17
|
+
|
|
31
18
|
}
|
|
32
19
|
|
|
33
20
|
function removePrompt(id) {
|
|
34
21
|
openPrompts = openPrompts.filter((x) => x !== id);
|
|
35
22
|
}
|
|
36
23
|
|
|
24
|
+
onMount(() => {
|
|
25
|
+
if ($page.url.hash) {
|
|
26
|
+
let hashedPrompt = $page.url.hash.slice(1,);
|
|
27
|
+
let initialPrompt = prompts.filter(prompt => {
|
|
28
|
+
return makeIdString(prompt.title) == hashedPrompt;
|
|
29
|
+
})[0]
|
|
30
|
+
let initialPromptIndex = prompts.indexOf(initialPrompt);
|
|
31
|
+
|
|
32
|
+
if (initialPromptIndex != null) {
|
|
33
|
+
openPrompts = [...openPrompts, `prompt-${initialPromptIndex}`]
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
|
|
37
38
|
</script>
|
|
38
39
|
|
|
39
|
-
<section class="mx-auto mb-8 w-full
|
|
40
|
-
|
|
41
|
-
<
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
40
|
+
<section class="mx-auto mb-8 w-full divide-y divide-gray-900/10 px-6 lg:px-8">
|
|
41
|
+
<!-- Header -->
|
|
42
|
+
<div class="flex flex-row w-full items-center space-x-4">
|
|
43
|
+
<!-- Title -->
|
|
44
|
+
{#if title}
|
|
45
|
+
<h2 id={id} class="scroll-mt-16 text-2xl font-bold leading-10 tracking-tight text-gray-900 w-full"><a href={`#${id}`}>{@html title}</a></h2>
|
|
46
|
+
{:else}
|
|
47
|
+
<div class="flex-grow" />
|
|
48
|
+
{/if}
|
|
49
|
+
|
|
50
|
+
<!-- Expand All -->
|
|
51
|
+
<button class="px-2" on:click={() => {
|
|
52
|
+
openPrompts = prompts.map((prompt, index) => `prompt-${index}`);
|
|
53
|
+
}}>
|
|
54
|
+
<span class="sr-only">Expand All</span>
|
|
55
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
|
56
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
|
57
|
+
</svg>
|
|
58
|
+
</button>
|
|
59
|
+
|
|
60
|
+
<!-- Collapse All -->
|
|
61
|
+
<button class="px-2" on:click={() => {
|
|
62
|
+
openPrompts = [];
|
|
63
|
+
}}>
|
|
64
|
+
<span class="sr-only">Collapse All</span>
|
|
65
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
|
66
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
|
|
67
|
+
</svg>
|
|
68
|
+
</button>
|
|
69
|
+
|
|
70
|
+
</div>
|
|
71
|
+
|
|
72
|
+
<!-- Prompts -->
|
|
73
|
+
<dl class="space-y-6 divide-y divide-gray-900/10 mt-10">
|
|
74
|
+
{#each prompts as prompt, i}
|
|
45
75
|
<div id="prompt-{i}" class="pt-6">
|
|
46
|
-
|
|
76
|
+
<!-- Prompt -->
|
|
77
|
+
<dt class="scroll-mt-16" id={makeIdString(prompt.title)}>
|
|
47
78
|
<button type="button"
|
|
48
79
|
on:click={() => openPrompts.includes(`prompt-${i}`) ? removePrompt(`prompt-${i}`) : addPrompt(`prompt-${i}`)}
|
|
49
80
|
class="flex w-full items-start justify-between text-left text-gray-900"
|
|
50
81
|
aria-controls="prompt-content-{i}"
|
|
51
82
|
aria-expanded={openPrompts.includes(`prompt-${i}`)}>
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
83
|
+
|
|
84
|
+
<a href={`#${makeIdString(prompt.title)}`} class="flex w-full items-start justify-between text-left text-gray-900">
|
|
85
|
+
<span class="text-base font-semibold leading-7">{prompt.title}</span>
|
|
86
|
+
<span class="ml-6 flex h-7 items-center">
|
|
87
|
+
{#if (openPrompts.includes(`prompt-${i}`))}
|
|
88
|
+
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
|
89
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M18 12H6" />
|
|
90
|
+
</svg>
|
|
91
|
+
{:else}
|
|
92
|
+
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
|
93
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
|
|
94
|
+
</svg>
|
|
95
|
+
{/if}
|
|
96
|
+
</span>
|
|
97
|
+
</a>
|
|
98
|
+
|
|
64
99
|
</button>
|
|
65
100
|
</dt>
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
101
|
+
|
|
102
|
+
<!-- Content -->
|
|
103
|
+
{#if openPrompts.includes(`prompt-${i}`)}
|
|
104
|
+
<dd id="prompt-content-{i}" class="mt-2 pr-12" transition:slide={{ delay: 100, duration: 300, easing: cubicInOut, axis: 'y' }}>
|
|
105
|
+
<p class="text-base leading-7"
|
|
106
|
+
>
|
|
107
|
+
{@html prompt.content}
|
|
108
|
+
</p>
|
|
109
|
+
</dd>
|
|
110
|
+
{/if}
|
|
71
111
|
</div>
|
|
72
112
|
{/each}
|
|
73
113
|
</dl>
|
|
@@ -3,8 +3,6 @@
|
|
|
3
3
|
/** @typedef {typeof __propDef.slots} AccordionSlots */
|
|
4
4
|
export default class Accordion extends SvelteComponent<{
|
|
5
5
|
data?: {};
|
|
6
|
-
title?: string;
|
|
7
|
-
prompts?: any[];
|
|
8
6
|
}, {
|
|
9
7
|
[evt: string]: CustomEvent<any>;
|
|
10
8
|
}, {}> {
|
|
@@ -16,8 +14,6 @@ import { SvelteComponent } from "svelte";
|
|
|
16
14
|
declare const __propDef: {
|
|
17
15
|
props: {
|
|
18
16
|
data?: {};
|
|
19
|
-
title?: string;
|
|
20
|
-
prompts?: any[];
|
|
21
17
|
};
|
|
22
18
|
events: {
|
|
23
19
|
[evt: string]: CustomEvent<any>;
|