@turnipxenon/pineapple 2.4.61 → 2.4.63
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/.idea/workspace.xml +25 -25
- package/.svelte-kit/__package__/components/chip/Chip.svelte +75 -4
- package/.svelte-kit/__package__/components/chip/Chip.svelte.d.ts +7 -15
- package/.svelte-kit/__package__/index.d.ts +1 -0
- package/.svelte-kit/__package__/index.js +1 -0
- package/.svelte-kit/__package__/template/seaweed/SeaweedTemplate.svelte +9 -8
- package/.svelte-kit/generated/server/internal.js +1 -1
- package/dist/components/chip/Chip.svelte +75 -4
- package/dist/components/chip/Chip.svelte.d.ts +7 -15
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/template/seaweed/SeaweedTemplate.svelte +9 -8
- package/package.json +1 -1
- package/src/lib/components/chip/Chip.svelte +41 -5
- package/src/lib/index.ts +1 -0
- package/src/lib/template/seaweed/SeaweedTemplate.svelte +10 -9
package/.idea/workspace.xml
CHANGED
|
@@ -4,10 +4,10 @@
|
|
|
4
4
|
<option name="autoReloadType" value="SELECTIVE" />
|
|
5
5
|
</component>
|
|
6
6
|
<component name="ChangeListManager">
|
|
7
|
-
<list default="true" id="accb6ba2-c343-4f84-ad30-6e2d71eceee5" name="CreateUrlForm" comment="
|
|
8
|
-
<change beforePath="$PROJECT_DIR$/src/lib/
|
|
9
|
-
<change beforePath="$PROJECT_DIR$/src/lib/
|
|
10
|
-
<change beforePath="$PROJECT_DIR$/src/lib/template/seaweed/
|
|
7
|
+
<list default="true" id="accb6ba2-c343-4f84-ad30-6e2d71eceee5" name="CreateUrlForm" comment="Extract tailwind css utility class to local-chip">
|
|
8
|
+
<change beforePath="$PROJECT_DIR$/src/lib/components/chip/Chip.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/lib/components/chip/Chip.svelte" afterDir="false" />
|
|
9
|
+
<change beforePath="$PROJECT_DIR$/src/lib/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/lib/index.ts" afterDir="false" />
|
|
10
|
+
<change beforePath="$PROJECT_DIR$/src/lib/template/seaweed/SeaweedTemplate.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/lib/template/seaweed/SeaweedTemplate.svelte" afterDir="false" />
|
|
11
11
|
</list>
|
|
12
12
|
<option name="SHOW_DIALOG" value="false" />
|
|
13
13
|
<option name="HIGHLIGHT_CONFLICTS" value="true" />
|
|
@@ -342,23 +342,7 @@
|
|
|
342
342
|
<workItem from="1712570296984" duration="1559000" />
|
|
343
343
|
<workItem from="1712571884570" duration="7000" />
|
|
344
344
|
<workItem from="1712636226857" duration="11130000" />
|
|
345
|
-
<workItem from="1712648417963" duration="
|
|
346
|
-
</task>
|
|
347
|
-
<task id="LOCAL-00128" summary="Add fun query param">
|
|
348
|
-
<option name="closed" value="true" />
|
|
349
|
-
<created>1712262935024</created>
|
|
350
|
-
<option name="number" value="00128" />
|
|
351
|
-
<option name="presentableId" value="LOCAL-00128" />
|
|
352
|
-
<option name="project" value="LOCAL" />
|
|
353
|
-
<updated>1712262935024</updated>
|
|
354
|
-
</task>
|
|
355
|
-
<task id="LOCAL-00129" summary="Write vercel to azure migration">
|
|
356
|
-
<option name="closed" value="true" />
|
|
357
|
-
<created>1712298583241</created>
|
|
358
|
-
<option name="number" value="00129" />
|
|
359
|
-
<option name="presentableId" value="LOCAL-00129" />
|
|
360
|
-
<option name="project" value="LOCAL" />
|
|
361
|
-
<updated>1712298583242</updated>
|
|
345
|
+
<workItem from="1712648417963" duration="4959000" />
|
|
362
346
|
</task>
|
|
363
347
|
<task id="LOCAL-00130" summary="Remove vercel module">
|
|
364
348
|
<option name="closed" value="true" />
|
|
@@ -736,7 +720,23 @@
|
|
|
736
720
|
<option name="project" value="LOCAL" />
|
|
737
721
|
<updated>1712649353552</updated>
|
|
738
722
|
</task>
|
|
739
|
-
<
|
|
723
|
+
<task id="LOCAL-00177" summary="Fix pkg import for Chip">
|
|
724
|
+
<option name="closed" value="true" />
|
|
725
|
+
<created>1712649815862</created>
|
|
726
|
+
<option name="number" value="00177" />
|
|
727
|
+
<option name="presentableId" value="LOCAL-00177" />
|
|
728
|
+
<option name="project" value="LOCAL" />
|
|
729
|
+
<updated>1712649815862</updated>
|
|
730
|
+
</task>
|
|
731
|
+
<task id="LOCAL-00178" summary="Extract tailwind css utility class to local-chip">
|
|
732
|
+
<option name="closed" value="true" />
|
|
733
|
+
<created>1712650184366</created>
|
|
734
|
+
<option name="number" value="00178" />
|
|
735
|
+
<option name="presentableId" value="LOCAL-00178" />
|
|
736
|
+
<option name="project" value="LOCAL" />
|
|
737
|
+
<updated>1712650184366</updated>
|
|
738
|
+
</task>
|
|
739
|
+
<option name="localTasksCounter" value="179" />
|
|
740
740
|
<servers />
|
|
741
741
|
</component>
|
|
742
742
|
<component name="TypeScriptGeneratedFilesManager">
|
|
@@ -794,8 +794,6 @@
|
|
|
794
794
|
</option>
|
|
795
795
|
</component>
|
|
796
796
|
<component name="VcsManagerConfiguration">
|
|
797
|
-
<MESSAGE value="Extract all dependencies for updateUrl" />
|
|
798
|
-
<MESSAGE value="Extract EntryOrderConfig" />
|
|
799
797
|
<MESSAGE value="Add group swapping" />
|
|
800
798
|
<MESSAGE value="Add serverSideQueryParams in SeaweedTemplate" />
|
|
801
799
|
<MESSAGE value="Add serverSideQueryParams and extraComponent in SeaweedTemplate" />
|
|
@@ -819,6 +817,8 @@
|
|
|
819
817
|
<MESSAGE value="Attempt to fix Chip styling" />
|
|
820
818
|
<MESSAGE value="Export chip" />
|
|
821
819
|
<MESSAGE value="Add border-radius for advanced settings cards" />
|
|
822
|
-
<
|
|
820
|
+
<MESSAGE value="Fix pkg import for Chip" />
|
|
821
|
+
<MESSAGE value="Extract tailwind css utility class to local-chip" />
|
|
822
|
+
<option name="LAST_COMMIT_MESSAGE" value="Extract tailwind css utility class to local-chip" />
|
|
823
823
|
</component>
|
|
824
824
|
</project>
|
|
@@ -1,13 +1,84 @@
|
|
|
1
|
-
<
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
<script>import { modeCurrent as isLightMode } from "@skeletonlabs/skeleton";
|
|
2
|
+
export let onClick = void 0;
|
|
3
|
+
export let checked = false;
|
|
4
|
+
$:
|
|
5
|
+
textColorClass = $isLightMode ? "local-light" : "local-dark";
|
|
6
|
+
let buttonClass = "variant-filled-tertiary";
|
|
7
|
+
const toggleChipColor = (isLightMode2, checked2) => {
|
|
8
|
+
if (isLightMode2) {
|
|
9
|
+
buttonClass = checked2 ? "variant-filled-tertiary" : "variant-filled-primary";
|
|
10
|
+
} else {
|
|
11
|
+
buttonClass = checked2 ? "variant-filled-tertiary" : "variant-soft-tertiary";
|
|
12
|
+
}
|
|
13
|
+
};
|
|
14
|
+
$:
|
|
15
|
+
toggleChipColor($isLightMode, checked);
|
|
16
|
+
</script>
|
|
17
|
+
|
|
18
|
+
<!-- aria wanrning is okay to ignore since it dynamically shifts between button or span -->
|
|
19
|
+
{#if onClick}
|
|
20
|
+
<button class={`chip ${buttonClass} ${textColorClass}`}
|
|
21
|
+
on:click={onClick}>
|
|
22
|
+
<slot />
|
|
23
|
+
</button>
|
|
24
|
+
{:else }
|
|
25
|
+
<span class={`local-chip variant-filled-tertiary ${textColorClass}`}>
|
|
26
|
+
<slot />
|
|
27
|
+
</span>
|
|
28
|
+
{/if}
|
|
4
29
|
|
|
5
30
|
<style>
|
|
6
|
-
.chip {
|
|
31
|
+
.local-chip {
|
|
32
|
+
cursor: pointer;
|
|
33
|
+
white-space: nowrap;
|
|
34
|
+
padding-left: 0.75rem;
|
|
35
|
+
padding-right: 0.75rem;
|
|
36
|
+
padding-top: 0.375rem;
|
|
37
|
+
padding-bottom: 0.375rem;
|
|
38
|
+
text-align: center;
|
|
39
|
+
font-size: 0.75rem;
|
|
40
|
+
line-height: 1rem;
|
|
41
|
+
border-radius: 0.25rem;
|
|
42
|
+
display: inline-flex;
|
|
43
|
+
align-items: center;
|
|
44
|
+
justify-content: center;
|
|
45
|
+
transition-property: all;
|
|
46
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
47
|
+
transition-duration: 150ms;
|
|
48
|
+
}
|
|
49
|
+
.local-chip > :not([hidden]) ~ :not([hidden]) {
|
|
50
|
+
--tw-space-x-reverse: 0;
|
|
51
|
+
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
|
|
52
|
+
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
|
|
53
|
+
}
|
|
54
|
+
a.local-chip:hover,
|
|
55
|
+
button.local-chip:hover {
|
|
56
|
+
--tw-brightness: brightness(1.15);
|
|
57
|
+
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
58
|
+
}
|
|
59
|
+
.local-chip:disabled {
|
|
60
|
+
cursor: not-allowed;
|
|
61
|
+
opacity: 0.5;
|
|
62
|
+
}
|
|
63
|
+
.local-chip:disabled:active {
|
|
64
|
+
--tw-scale-x: 1;
|
|
65
|
+
--tw-scale-y: 1;
|
|
66
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
67
|
+
}
|
|
68
|
+
.local-chip {
|
|
7
69
|
border-radius: 1em;
|
|
8
70
|
margin: 0.25em;
|
|
9
71
|
font-weight: bold;
|
|
10
72
|
pointer-events: none;
|
|
11
73
|
background-color: rgb(var(--color-tertiary-500) / var(--tw-bg-opacity));
|
|
12
74
|
}
|
|
75
|
+
|
|
76
|
+
.local-light {
|
|
77
|
+
color: rgb(var(--theme-font-color-base));
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.local-dark {
|
|
81
|
+
color: whitesmoke;
|
|
82
|
+
/*color: rgb(var(--theme-font-color-dark));*/
|
|
83
|
+
}
|
|
13
84
|
</style>
|
|
@@ -1,21 +1,8 @@
|
|
|
1
|
-
/** @typedef {typeof __propDef.props} ChipProps */
|
|
2
|
-
/** @typedef {typeof __propDef.events} ChipEvents */
|
|
3
|
-
/** @typedef {typeof __propDef.slots} ChipSlots */
|
|
4
|
-
export default class Chip extends SvelteComponent<{
|
|
5
|
-
[x: string]: never;
|
|
6
|
-
}, {
|
|
7
|
-
[evt: string]: CustomEvent<any>;
|
|
8
|
-
}, {
|
|
9
|
-
default: {};
|
|
10
|
-
}> {
|
|
11
|
-
}
|
|
12
|
-
export type ChipProps = typeof __propDef.props;
|
|
13
|
-
export type ChipEvents = typeof __propDef.events;
|
|
14
|
-
export type ChipSlots = typeof __propDef.slots;
|
|
15
1
|
import { SvelteComponent } from "svelte";
|
|
16
2
|
declare const __propDef: {
|
|
17
3
|
props: {
|
|
18
|
-
|
|
4
|
+
onClick?: undefined | (() => void);
|
|
5
|
+
checked?: boolean | undefined;
|
|
19
6
|
};
|
|
20
7
|
events: {
|
|
21
8
|
[evt: string]: CustomEvent<any>;
|
|
@@ -24,4 +11,9 @@ declare const __propDef: {
|
|
|
24
11
|
default: {};
|
|
25
12
|
};
|
|
26
13
|
};
|
|
14
|
+
export type ChipProps = typeof __propDef.props;
|
|
15
|
+
export type ChipEvents = typeof __propDef.events;
|
|
16
|
+
export type ChipSlots = typeof __propDef.slots;
|
|
17
|
+
export default class Chip extends SvelteComponent<ChipProps, ChipEvents, ChipSlots> {
|
|
18
|
+
}
|
|
27
19
|
export {};
|
|
@@ -3,6 +3,7 @@ export { default as SeaweedTemplate } from "./template/seaweed/SeaweedTemplate.s
|
|
|
3
3
|
export { default as LazyAsset } from "./components/LazyAsset.svelte";
|
|
4
4
|
export { default as Card } from "./components/Card.svelte";
|
|
5
5
|
export { default as Chip } from "./components/chip/Chip.svelte";
|
|
6
|
+
export { default as PineappleSlideToggle } from "./components/PineappleSlideToggle.svelte";
|
|
6
7
|
export { default as SocialSection } from "./components/SocialSection.svelte";
|
|
7
8
|
export * from "./components/overrideable_meta/index";
|
|
8
9
|
export * from "./components/navigation_component/index";
|
|
@@ -4,6 +4,7 @@ export { default as SeaweedTemplate } from "./template/seaweed/SeaweedTemplate.s
|
|
|
4
4
|
export { default as LazyAsset } from "./components/LazyAsset.svelte";
|
|
5
5
|
export { default as Card } from "./components/Card.svelte";
|
|
6
6
|
export { default as Chip } from "./components/chip/Chip.svelte";
|
|
7
|
+
export { default as PineappleSlideToggle } from "./components/PineappleSlideToggle.svelte";
|
|
7
8
|
export { default as SocialSection } from "./components/SocialSection.svelte";
|
|
8
9
|
export * from "./components/overrideable_meta/index";
|
|
9
10
|
export * from "./components/navigation_component/index";
|
|
@@ -4,7 +4,7 @@ import { runChaos } from "./RunChaos";
|
|
|
4
4
|
import SocialSection from "../../components/SocialSection.svelte";
|
|
5
5
|
import "./seaweed.postcss";
|
|
6
6
|
import SeaweedBaseLayout from "../../components/layouts/SeaweedBaseLayout.svelte";
|
|
7
|
-
import { Accordion, AccordionItem, CodeBlock
|
|
7
|
+
import { Accordion, AccordionItem, CodeBlock } from "@skeletonlabs/skeleton";
|
|
8
8
|
import { page } from "$app/stores";
|
|
9
9
|
import Card from "../../components/Card.svelte";
|
|
10
10
|
import ElementVisbilityDetector from "../../components/ElementVisbilityDetector.svelte";
|
|
@@ -17,6 +17,7 @@ import {
|
|
|
17
17
|
import { parseQueryTerms } from "./ParseQueryTerms";
|
|
18
18
|
import UrlShortenerForm from "./CreateUrlForm.svelte";
|
|
19
19
|
import PineappleSlideToggle from "../../components/PineappleSlideToggle.svelte";
|
|
20
|
+
import { Chip } from "../../index";
|
|
20
21
|
export let letChaos = true;
|
|
21
22
|
export let name = "Turnip";
|
|
22
23
|
export let email = "turnipxenon@gmail.com";
|
|
@@ -345,14 +346,14 @@ $:
|
|
|
345
346
|
<div class="query-term-grid">
|
|
346
347
|
{#each seaweedTemplateData.queryTermMap.entries() as [term, shouldBold]}
|
|
347
348
|
<!--{@const shouldBold = false}-->
|
|
348
|
-
<
|
|
349
|
-
|
|
350
|
-
on:click={() => {toggleTerm(term)}}
|
|
351
|
-
>
|
|
349
|
+
<Chip onClick={() => {toggleTerm(term)}}
|
|
350
|
+
checked={shouldBold}>
|
|
352
351
|
<!-- todo: change shouldBold -->
|
|
353
|
-
{
|
|
354
|
-
|
|
355
|
-
|
|
352
|
+
<span style={`font-weight: ${shouldBold ? "bold" : "normal"}`}>
|
|
353
|
+
{#if (shouldBold)}✓{/if}
|
|
354
|
+
{term}
|
|
355
|
+
</span>
|
|
356
|
+
</Chip>
|
|
356
357
|
{/each}
|
|
357
358
|
</div>
|
|
358
359
|
|
|
@@ -21,7 +21,7 @@ export const options = {
|
|
|
21
21
|
app: ({ head, body, assets, nonce, env }) => "<!DOCTYPE html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<link rel=\"icon\" href=\"" + assets + "/favicon.png\" />\n\t\t<meta name=\"viewport\" content=\"width=device-width\" />\n\t\t" + head + "\n\t</head>\n\n\t<body data-sveltekit-preload-data=\"hover\" data-theme=\"crimson\">\n\t\t<div style=\"display: contents\" class=\"h-full overflow-hidden\">" + body + "</div>\n\t</body>\n</html>\n",
|
|
22
22
|
error: ({ status, message }) => "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<title>" + message + "</title>\n\n\t\t<style>\n\t\t\tbody {\n\t\t\t\t--bg: white;\n\t\t\t\t--fg: #222;\n\t\t\t\t--divider: #ccc;\n\t\t\t\tbackground: var(--bg);\n\t\t\t\tcolor: var(--fg);\n\t\t\t\tfont-family:\n\t\t\t\t\tsystem-ui,\n\t\t\t\t\t-apple-system,\n\t\t\t\t\tBlinkMacSystemFont,\n\t\t\t\t\t'Segoe UI',\n\t\t\t\t\tRoboto,\n\t\t\t\t\tOxygen,\n\t\t\t\t\tUbuntu,\n\t\t\t\t\tCantarell,\n\t\t\t\t\t'Open Sans',\n\t\t\t\t\t'Helvetica Neue',\n\t\t\t\t\tsans-serif;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\theight: 100vh;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t.error {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tmax-width: 32rem;\n\t\t\t\tmargin: 0 1rem;\n\t\t\t}\n\n\t\t\t.status {\n\t\t\t\tfont-weight: 200;\n\t\t\t\tfont-size: 3rem;\n\t\t\t\tline-height: 1;\n\t\t\t\tposition: relative;\n\t\t\t\ttop: -0.05rem;\n\t\t\t}\n\n\t\t\t.message {\n\t\t\t\tborder-left: 1px solid var(--divider);\n\t\t\t\tpadding: 0 0 0 1rem;\n\t\t\t\tmargin: 0 0 0 1rem;\n\t\t\t\tmin-height: 2.5rem;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t}\n\n\t\t\t.message h1 {\n\t\t\t\tfont-weight: 400;\n\t\t\t\tfont-size: 1em;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t@media (prefers-color-scheme: dark) {\n\t\t\t\tbody {\n\t\t\t\t\t--bg: #222;\n\t\t\t\t\t--fg: #ddd;\n\t\t\t\t\t--divider: #666;\n\t\t\t\t}\n\t\t\t}\n\t\t</style>\n\t</head>\n\t<body>\n\t\t<div class=\"error\">\n\t\t\t<span class=\"status\">" + status + "</span>\n\t\t\t<div class=\"message\">\n\t\t\t\t<h1>" + message + "</h1>\n\t\t\t</div>\n\t\t</div>\n\t</body>\n</html>\n"
|
|
23
23
|
},
|
|
24
|
-
version_hash: "
|
|
24
|
+
version_hash: "1rrfos4"
|
|
25
25
|
};
|
|
26
26
|
|
|
27
27
|
export async function get_hooks() {
|
|
@@ -1,13 +1,84 @@
|
|
|
1
|
-
<
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
<script>import { modeCurrent as isLightMode } from "@skeletonlabs/skeleton";
|
|
2
|
+
export let onClick = void 0;
|
|
3
|
+
export let checked = false;
|
|
4
|
+
$:
|
|
5
|
+
textColorClass = $isLightMode ? "local-light" : "local-dark";
|
|
6
|
+
let buttonClass = "variant-filled-tertiary";
|
|
7
|
+
const toggleChipColor = (isLightMode2, checked2) => {
|
|
8
|
+
if (isLightMode2) {
|
|
9
|
+
buttonClass = checked2 ? "variant-filled-tertiary" : "variant-filled-primary";
|
|
10
|
+
} else {
|
|
11
|
+
buttonClass = checked2 ? "variant-filled-tertiary" : "variant-soft-tertiary";
|
|
12
|
+
}
|
|
13
|
+
};
|
|
14
|
+
$:
|
|
15
|
+
toggleChipColor($isLightMode, checked);
|
|
16
|
+
</script>
|
|
17
|
+
|
|
18
|
+
<!-- aria wanrning is okay to ignore since it dynamically shifts between button or span -->
|
|
19
|
+
{#if onClick}
|
|
20
|
+
<button class={`chip ${buttonClass} ${textColorClass}`}
|
|
21
|
+
on:click={onClick}>
|
|
22
|
+
<slot />
|
|
23
|
+
</button>
|
|
24
|
+
{:else }
|
|
25
|
+
<span class={`local-chip variant-filled-tertiary ${textColorClass}`}>
|
|
26
|
+
<slot />
|
|
27
|
+
</span>
|
|
28
|
+
{/if}
|
|
4
29
|
|
|
5
30
|
<style>
|
|
6
|
-
.chip {
|
|
31
|
+
.local-chip {
|
|
32
|
+
cursor: pointer;
|
|
33
|
+
white-space: nowrap;
|
|
34
|
+
padding-left: 0.75rem;
|
|
35
|
+
padding-right: 0.75rem;
|
|
36
|
+
padding-top: 0.375rem;
|
|
37
|
+
padding-bottom: 0.375rem;
|
|
38
|
+
text-align: center;
|
|
39
|
+
font-size: 0.75rem;
|
|
40
|
+
line-height: 1rem;
|
|
41
|
+
border-radius: 0.25rem;
|
|
42
|
+
display: inline-flex;
|
|
43
|
+
align-items: center;
|
|
44
|
+
justify-content: center;
|
|
45
|
+
transition-property: all;
|
|
46
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
47
|
+
transition-duration: 150ms;
|
|
48
|
+
}
|
|
49
|
+
.local-chip > :not([hidden]) ~ :not([hidden]) {
|
|
50
|
+
--tw-space-x-reverse: 0;
|
|
51
|
+
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
|
|
52
|
+
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
|
|
53
|
+
}
|
|
54
|
+
a.local-chip:hover,
|
|
55
|
+
button.local-chip:hover {
|
|
56
|
+
--tw-brightness: brightness(1.15);
|
|
57
|
+
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
58
|
+
}
|
|
59
|
+
.local-chip:disabled {
|
|
60
|
+
cursor: not-allowed;
|
|
61
|
+
opacity: 0.5;
|
|
62
|
+
}
|
|
63
|
+
.local-chip:disabled:active {
|
|
64
|
+
--tw-scale-x: 1;
|
|
65
|
+
--tw-scale-y: 1;
|
|
66
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
67
|
+
}
|
|
68
|
+
.local-chip {
|
|
7
69
|
border-radius: 1em;
|
|
8
70
|
margin: 0.25em;
|
|
9
71
|
font-weight: bold;
|
|
10
72
|
pointer-events: none;
|
|
11
73
|
background-color: rgb(var(--color-tertiary-500) / var(--tw-bg-opacity));
|
|
12
74
|
}
|
|
75
|
+
|
|
76
|
+
.local-light {
|
|
77
|
+
color: rgb(var(--theme-font-color-base));
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.local-dark {
|
|
81
|
+
color: whitesmoke;
|
|
82
|
+
/*color: rgb(var(--theme-font-color-dark));*/
|
|
83
|
+
}
|
|
13
84
|
</style>
|
|
@@ -1,21 +1,8 @@
|
|
|
1
|
-
/** @typedef {typeof __propDef.props} ChipProps */
|
|
2
|
-
/** @typedef {typeof __propDef.events} ChipEvents */
|
|
3
|
-
/** @typedef {typeof __propDef.slots} ChipSlots */
|
|
4
|
-
export default class Chip extends SvelteComponent<{
|
|
5
|
-
[x: string]: never;
|
|
6
|
-
}, {
|
|
7
|
-
[evt: string]: CustomEvent<any>;
|
|
8
|
-
}, {
|
|
9
|
-
default: {};
|
|
10
|
-
}> {
|
|
11
|
-
}
|
|
12
|
-
export type ChipProps = typeof __propDef.props;
|
|
13
|
-
export type ChipEvents = typeof __propDef.events;
|
|
14
|
-
export type ChipSlots = typeof __propDef.slots;
|
|
15
1
|
import { SvelteComponent } from "svelte";
|
|
16
2
|
declare const __propDef: {
|
|
17
3
|
props: {
|
|
18
|
-
|
|
4
|
+
onClick?: undefined | (() => void);
|
|
5
|
+
checked?: boolean | undefined;
|
|
19
6
|
};
|
|
20
7
|
events: {
|
|
21
8
|
[evt: string]: CustomEvent<any>;
|
|
@@ -24,4 +11,9 @@ declare const __propDef: {
|
|
|
24
11
|
default: {};
|
|
25
12
|
};
|
|
26
13
|
};
|
|
14
|
+
export type ChipProps = typeof __propDef.props;
|
|
15
|
+
export type ChipEvents = typeof __propDef.events;
|
|
16
|
+
export type ChipSlots = typeof __propDef.slots;
|
|
17
|
+
export default class Chip extends SvelteComponent<ChipProps, ChipEvents, ChipSlots> {
|
|
18
|
+
}
|
|
27
19
|
export {};
|
package/dist/index.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ export { default as SeaweedTemplate } from "./template/seaweed/SeaweedTemplate.s
|
|
|
3
3
|
export { default as LazyAsset } from "./components/LazyAsset.svelte";
|
|
4
4
|
export { default as Card } from "./components/Card.svelte";
|
|
5
5
|
export { default as Chip } from "./components/chip/Chip.svelte";
|
|
6
|
+
export { default as PineappleSlideToggle } from "./components/PineappleSlideToggle.svelte";
|
|
6
7
|
export { default as SocialSection } from "./components/SocialSection.svelte";
|
|
7
8
|
export * from "./components/overrideable_meta/index";
|
|
8
9
|
export * from "./components/navigation_component/index";
|
package/dist/index.js
CHANGED
|
@@ -4,6 +4,7 @@ export { default as SeaweedTemplate } from "./template/seaweed/SeaweedTemplate.s
|
|
|
4
4
|
export { default as LazyAsset } from "./components/LazyAsset.svelte";
|
|
5
5
|
export { default as Card } from "./components/Card.svelte";
|
|
6
6
|
export { default as Chip } from "./components/chip/Chip.svelte";
|
|
7
|
+
export { default as PineappleSlideToggle } from "./components/PineappleSlideToggle.svelte";
|
|
7
8
|
export { default as SocialSection } from "./components/SocialSection.svelte";
|
|
8
9
|
export * from "./components/overrideable_meta/index";
|
|
9
10
|
export * from "./components/navigation_component/index";
|
|
@@ -4,7 +4,7 @@ import { runChaos } from "./RunChaos";
|
|
|
4
4
|
import SocialSection from "../../components/SocialSection.svelte";
|
|
5
5
|
import "./seaweed.postcss";
|
|
6
6
|
import SeaweedBaseLayout from "../../components/layouts/SeaweedBaseLayout.svelte";
|
|
7
|
-
import { Accordion, AccordionItem, CodeBlock
|
|
7
|
+
import { Accordion, AccordionItem, CodeBlock } from "@skeletonlabs/skeleton";
|
|
8
8
|
import { page } from "$app/stores";
|
|
9
9
|
import Card from "../../components/Card.svelte";
|
|
10
10
|
import ElementVisbilityDetector from "../../components/ElementVisbilityDetector.svelte";
|
|
@@ -17,6 +17,7 @@ import {
|
|
|
17
17
|
import { parseQueryTerms } from "./ParseQueryTerms";
|
|
18
18
|
import UrlShortenerForm from "./CreateUrlForm.svelte";
|
|
19
19
|
import PineappleSlideToggle from "../../components/PineappleSlideToggle.svelte";
|
|
20
|
+
import { Chip } from "../../index";
|
|
20
21
|
export let letChaos = true;
|
|
21
22
|
export let name = "Turnip";
|
|
22
23
|
export let email = "turnipxenon@gmail.com";
|
|
@@ -345,14 +346,14 @@ $:
|
|
|
345
346
|
<div class="query-term-grid">
|
|
346
347
|
{#each seaweedTemplateData.queryTermMap.entries() as [term, shouldBold]}
|
|
347
348
|
<!--{@const shouldBold = false}-->
|
|
348
|
-
<
|
|
349
|
-
|
|
350
|
-
on:click={() => {toggleTerm(term)}}
|
|
351
|
-
>
|
|
349
|
+
<Chip onClick={() => {toggleTerm(term)}}
|
|
350
|
+
checked={shouldBold}>
|
|
352
351
|
<!-- todo: change shouldBold -->
|
|
353
|
-
{
|
|
354
|
-
|
|
355
|
-
|
|
352
|
+
<span style={`font-weight: ${shouldBold ? "bold" : "normal"}`}>
|
|
353
|
+
{#if (shouldBold)}✓{/if}
|
|
354
|
+
{term}
|
|
355
|
+
</span>
|
|
356
|
+
</Chip>
|
|
356
357
|
{/each}
|
|
357
358
|
</div>
|
|
358
359
|
|
package/package.json
CHANGED
|
@@ -1,13 +1,49 @@
|
|
|
1
|
-
<
|
|
2
|
-
|
|
3
|
-
</span>
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { modeCurrent as isLightMode } from "@skeletonlabs/skeleton";
|
|
4
3
|
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
export let onClick: undefined | (() => void) = undefined;
|
|
5
|
+
export let checked = false;
|
|
6
|
+
|
|
7
|
+
$: textColorClass = $isLightMode ? "local-light" : "local-dark";
|
|
8
|
+
let buttonClass = "variant-filled-tertiary";
|
|
9
|
+
const toggleChipColor = (isLightMode: boolean, checked: boolean) => {
|
|
10
|
+
if (isLightMode) {
|
|
11
|
+
buttonClass = checked ? "variant-filled-tertiary" : "variant-filled-primary";
|
|
12
|
+
} else {
|
|
13
|
+
buttonClass = checked ? "variant-filled-tertiary" : "variant-soft-tertiary";
|
|
14
|
+
}
|
|
15
|
+
};
|
|
16
|
+
$: toggleChipColor($isLightMode, checked);
|
|
17
|
+
</script>
|
|
18
|
+
|
|
19
|
+
<!-- aria wanrning is okay to ignore since it dynamically shifts between button or span -->
|
|
20
|
+
{#if onClick}
|
|
21
|
+
<button class={`chip ${buttonClass} ${textColorClass}`}
|
|
22
|
+
on:click={onClick}>
|
|
23
|
+
<slot />
|
|
24
|
+
</button>
|
|
25
|
+
{:else }
|
|
26
|
+
<span class={`local-chip variant-filled-tertiary ${textColorClass}`}>
|
|
27
|
+
<slot />
|
|
28
|
+
</span>
|
|
29
|
+
{/if}
|
|
30
|
+
|
|
31
|
+
<style lang="postcss">
|
|
32
|
+
.local-chip {
|
|
33
|
+
@apply chip;
|
|
7
34
|
border-radius: 1em;
|
|
8
35
|
margin: 0.25em;
|
|
9
36
|
font-weight: bold;
|
|
10
37
|
pointer-events: none;
|
|
11
38
|
background-color: rgb(var(--color-tertiary-500) / var(--tw-bg-opacity));
|
|
12
39
|
}
|
|
40
|
+
|
|
41
|
+
.local-light {
|
|
42
|
+
color: rgb(var(--theme-font-color-base));
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.local-dark {
|
|
46
|
+
color: whitesmoke;
|
|
47
|
+
/*color: rgb(var(--theme-font-color-dark));*/
|
|
48
|
+
}
|
|
13
49
|
</style>
|
package/src/lib/index.ts
CHANGED
|
@@ -5,6 +5,7 @@ export { default as SeaweedTemplate } from "$pkg/template/seaweed/SeaweedTemplat
|
|
|
5
5
|
export { default as LazyAsset } from "./components/LazyAsset.svelte";
|
|
6
6
|
export { default as Card } from "./components/Card.svelte";
|
|
7
7
|
export { default as Chip } from "./components/chip/Chip.svelte";
|
|
8
|
+
export { default as PineappleSlideToggle } from "./components/PineappleSlideToggle.svelte";
|
|
8
9
|
export { default as SocialSection } from "./components/SocialSection.svelte";
|
|
9
10
|
|
|
10
11
|
export * from "$pkg/components/overrideable_meta/index";
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import { afterUpdate,
|
|
2
|
+
import { afterUpdate, onMount } from "svelte";
|
|
3
3
|
import EntryOrderConfig from "$pkg/template/seaweed/entry_order_config/EntryOrderConfig.svelte";
|
|
4
4
|
import { runChaos } from "$pkg/template/seaweed/RunChaos";
|
|
5
5
|
import SocialSection from "$pkg/components/SocialSection.svelte";
|
|
6
6
|
import "./seaweed.postcss";
|
|
7
7
|
import SeaweedBaseLayout from "$pkg/components/layouts/SeaweedBaseLayout.svelte";
|
|
8
|
-
import { Accordion, AccordionItem, CodeBlock
|
|
8
|
+
import { Accordion, AccordionItem, CodeBlock } from "@skeletonlabs/skeleton";
|
|
9
9
|
import { page } from "$app/stores";
|
|
10
10
|
import Card from "$pkg/components/Card.svelte";
|
|
11
11
|
import ElementVisbilityDetector from "$pkg/components/ElementVisbilityDetector.svelte";
|
|
@@ -21,6 +21,7 @@
|
|
|
21
21
|
import { parseQueryTerms } from "$pkg/template/seaweed/ParseQueryTerms";
|
|
22
22
|
import UrlShortenerForm from "$pkg/template/seaweed/CreateUrlForm.svelte";
|
|
23
23
|
import PineappleSlideToggle from "$pkg/components/PineappleSlideToggle.svelte";
|
|
24
|
+
import { Chip } from "$pkg/index";
|
|
24
25
|
|
|
25
26
|
export let letChaos = true;
|
|
26
27
|
export let name = "Turnip";
|
|
@@ -406,14 +407,14 @@
|
|
|
406
407
|
<div class="query-term-grid">
|
|
407
408
|
{#each seaweedTemplateData.queryTermMap.entries() as [term, shouldBold]}
|
|
408
409
|
<!--{@const shouldBold = false}-->
|
|
409
|
-
<
|
|
410
|
-
|
|
411
|
-
on:click={() => {toggleTerm(term)}}
|
|
412
|
-
>
|
|
410
|
+
<Chip onClick={() => {toggleTerm(term)}}
|
|
411
|
+
checked={shouldBold}>
|
|
413
412
|
<!-- todo: change shouldBold -->
|
|
414
|
-
{
|
|
415
|
-
|
|
416
|
-
|
|
413
|
+
<span style={`font-weight: ${shouldBold ? "bold" : "normal"}`}>
|
|
414
|
+
{#if (shouldBold)}✓{/if}
|
|
415
|
+
{term}
|
|
416
|
+
</span>
|
|
417
|
+
</Chip>
|
|
417
418
|
{/each}
|
|
418
419
|
</div>
|
|
419
420
|
|