@turnipxenon/pineapple 3.0.0-alpha.1 → 3.0.0-alpha.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.
- package/dist/assets/icons/icon-check-dark-contrast.svg +1 -0
- package/dist/assets/icons/icon-check-light-contrast.svg +1 -0
- package/dist/assets/icons/icon-copy-dark-contrast.svg +1 -0
- package/dist/assets/icons/icon-copy-light-contrast.svg +1 -0
- package/dist/components/PineappleSlideToggle.svelte +12 -6
- package/dist/components/PineappleSlideToggle.svelte.d.ts +3 -2
- package/dist/components/blog_template/BlogTemplate.svelte +3 -1
- package/dist/components/blog_template/BlogTemplate.svelte.d.ts +1 -1
- package/dist/components/blog_template/BlogTemplateInner.svelte +1 -1
- package/dist/components/blog_template/BlogTemplateInner.svelte.d.ts +1 -1
- package/dist/components/dialog_manager/DialogManagerStore.d.ts +0 -15
- package/dist/components/dialog_manager/DialogManagerStore.js +0 -15
- package/dist/components/dialog_manager/DialogMangerInit.d.ts +15 -0
- package/dist/components/dialog_manager/DialogMangerInit.js +15 -0
- package/dist/components/dialog_manager/behavior_tree/line_processors/commands/JumpCommand.js +1 -1
- package/dist/components/dialog_overlay/DialogOverlay.svelte +1 -1
- package/dist/components/index.d.ts +1 -1
- package/dist/components/index.js +1 -1
- package/dist/components/layouts/SeaweedBaseLayout.svelte +0 -2
- package/dist/components/navigation_component/NavigationComponent.svelte +2 -1
- package/dist/components/navigation_component/NavigationControl.svelte +1 -1
- package/dist/components/pineapple/PineappleBaseLayout.svelte +2 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/styles/app.css +92 -1
- package/dist/styles/turnip-theme.css +65 -61
- package/dist/template/seaweed/CreateUrlForm.svelte +17 -11
- package/dist/template/seaweed/CreateUrlForm.svelte.d.ts +4 -1
- package/dist/template/seaweed/ToastSettings.d.ts +15 -0
- package/dist/template/seaweed/ToastSettings.js +1 -0
- package/dist/template/seaweed/entries/ThisWebpage.svelte +1 -1
- package/dist/template/seaweed/entries/WorkExperience.svelte +1 -1
- package/dist/template/seaweed/entry_order_config/EntryOrderConfig.svelte +34 -1
- package/dist/template/seaweed/entry_order_config/EntryOrderConfig.svelte.d.ts +0 -1
- package/dist/ui/components/SocialSection.svelte +4 -1
- package/dist/ui/components/accordion/PinyaAccordion.svelte +21 -0
- package/dist/ui/components/accordion/PinyaAccordion.svelte.d.ts +8 -0
- package/dist/ui/components/accordion/PinyaAccordionItem.svelte +29 -0
- package/dist/ui/components/accordion/PinyaAccordionItem.svelte.d.ts +9 -0
- package/dist/ui/components/accordion/index.d.ts +2 -0
- package/dist/ui/components/accordion/index.js +2 -0
- package/dist/ui/components/index.d.ts +1 -0
- package/dist/ui/components/index.js +1 -0
- package/dist/ui/elements/CodeBlock/CodeBlock.svelte +65 -0
- package/dist/ui/elements/CodeBlock/CodeBlock.svelte.d.ts +5 -0
- package/dist/ui/elements/CodeBlock/CodeBlockProps.d.ts +11 -0
- package/dist/ui/elements/CodeBlock/CodeBlockProps.js +1 -0
- package/dist/ui/elements/CodeBlock/index.d.ts +2 -0
- package/dist/ui/elements/CodeBlock/index.js +2 -0
- package/dist/{components/ElementVisbilityDetector.svelte → ui/elements/ElementVisibilityDetector.svelte} +6 -3
- package/dist/ui/elements/ElementVisibilityDetector.svelte.d.ts +8 -0
- package/dist/ui/elements/PineappleSwitch.svelte +29 -0
- package/dist/ui/elements/PineappleSwitch.svelte.d.ts +10 -0
- package/dist/ui/elements/Placeholder.svelte +17 -0
- package/dist/ui/elements/Placeholder.svelte.d.ts +7 -0
- package/dist/ui/elements/index.d.ts +11 -8
- package/dist/ui/elements/index.js +11 -8
- package/dist/ui/elements/pinya-button/component.svelte +2 -1
- package/dist/ui/elements/pinya-button/props.d.ts +1 -0
- package/dist/ui/elements/pinya-card/component.svelte +10 -8
- package/dist/ui/elements/pinya-card/component.svelte.d.ts +3 -3
- package/dist/ui/elements/pinya-card/props.d.ts +3 -0
- package/dist/ui/elements/pinya-combobox/PinyaCombobox.svelte +35 -0
- package/dist/ui/elements/pinya-combobox/PinyaCombobox.svelte.d.ts +18 -0
- package/dist/ui/elements/pinya-combobox/PinyaComboboxProps.d.ts +18 -0
- package/dist/ui/elements/pinya-combobox/PinyaComboboxProps.js +1 -0
- package/dist/ui/elements/text-chip/TextChip.svelte +15 -0
- package/dist/ui/elements/text-chip/TextChip.svelte.d.ts +4 -0
- package/dist/ui/elements/text-chip/TextChipProps.d.ts +4 -0
- package/dist/ui/elements/text-chip/TextChipProps.js +1 -0
- package/dist/ui/elements/text-chip/index.d.ts +2 -0
- package/dist/ui/elements/text-chip/index.js +2 -0
- package/dist/ui/modules/index.d.ts +2 -1
- package/dist/ui/modules/index.js +2 -1
- package/dist/ui/modules/modals/general-settings/LanguagePicker.svelte +10 -20
- package/dist/ui/modules/projects/Hepcat.svelte +71 -0
- package/dist/ui/modules/projects/Hepcat.svelte.d.ts +22 -0
- package/dist/ui/modules/projects/Pengi.svelte +60 -0
- package/dist/ui/modules/projects/Pengi.svelte.d.ts +22 -0
- package/dist/ui/modules/projects/Soulwork.svelte +55 -0
- package/dist/ui/modules/projects/Soulwork.svelte.d.ts +22 -0
- package/dist/ui/modules/projects/ThisWebpage.svelte +62 -0
- package/dist/ui/modules/projects/ThisWebpage.svelte.d.ts +22 -0
- package/dist/ui/modules/projects/index.d.ts +4 -0
- package/dist/ui/modules/projects/index.js +4 -0
- package/dist/ui/modules/seaweed/ChumBucket.svelte +38 -38
- package/dist/ui/templates/PinyaBase.svelte +9 -6
- package/dist/ui/templates/PinyaBase.svelte.d.ts +1 -1
- package/dist/ui/templates/index.d.ts +3 -2
- package/dist/ui/templates/index.js +3 -2
- package/dist/ui/templates/pinya-page-layout/component.svelte +17 -10
- package/dist/ui/templates/pinya-page-layout/component.svelte.d.ts +2 -1
- package/dist/ui/templates/seaweed-layout/EntryGroup.svelte +89 -0
- package/dist/ui/templates/seaweed-layout/EntryGroup.svelte.d.ts +4 -0
- package/dist/ui/templates/seaweed-layout/EntryOrderConfig2.svelte +45 -0
- package/dist/ui/templates/seaweed-layout/EntryOrderConfig2.svelte.d.ts +9 -0
- package/dist/ui/templates/seaweed-layout/ProjectComponentProps.d.ts +4 -0
- package/dist/ui/templates/seaweed-layout/ProjectComponentProps.js +1 -0
- package/dist/ui/templates/seaweed-layout/ProjectGroupConfig.svelte +316 -0
- package/dist/ui/templates/seaweed-layout/ProjectGroupConfig.svelte.d.ts +14 -0
- package/dist/ui/templates/seaweed-layout/SeaweedLayout.md +4 -0
- package/dist/ui/templates/seaweed-layout/SeaweedLayout.svelte +277 -0
- package/dist/ui/templates/seaweed-layout/SeaweedLayout.svelte.d.ts +4 -0
- package/dist/ui/templates/seaweed-layout/index.d.ts +4 -0
- package/dist/ui/templates/seaweed-layout/index.js +4 -0
- package/dist/ui/templates/seaweed-layout/props.d.ts +27 -0
- package/dist/ui/templates/seaweed-layout/props.js +1 -0
- package/dist/util/util.d.ts +1 -0
- package/dist/util/util.js +9 -0
- package/package.json +20 -15
- package/src/lib/styles/app.css +92 -1
- package/dist/components/ElementVisbilityDetector.svelte.d.ts +0 -7
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
import Card from "../../../components/Card.svelte";
|
|
4
4
|
import GithubIcon from "../../../assets/icons/github-mark.svg";
|
|
5
5
|
import ThisWebsiteFootage from "../../../assets/others/seaweed-showcase.mp4";
|
|
6
|
-
import { Chip } from "
|
|
6
|
+
import { Chip } from "../../../components/index";
|
|
7
7
|
|
|
8
8
|
// noinspection JSUnusedGlobalSymbols
|
|
9
9
|
interface Props {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import SocialSection from "../../../ui/components/SocialSection.svelte";
|
|
3
3
|
import Card from "../../../components/Card.svelte";
|
|
4
|
-
import ElementVisibilityDetector from "../../../
|
|
4
|
+
import ElementVisibilityDetector from "../../../ui/elements/ElementVisibilityDetector.svelte";
|
|
5
5
|
import type { EntryProps } from "./EntryProps";
|
|
6
6
|
|
|
7
7
|
interface Props {
|
|
@@ -8,7 +8,6 @@
|
|
|
8
8
|
import ComboBoxWithButton from "../../../components/combo_box/ComboBoxWithButton.svelte";
|
|
9
9
|
import CloseIcon from "../../../assets/icons/close.svg";
|
|
10
10
|
import UpwardIcon from "../../../assets/icons/arrow-upward.svg";
|
|
11
|
-
import "./entry-order-config.postcss";
|
|
12
11
|
|
|
13
12
|
interface Props {
|
|
14
13
|
seaweedTemplateData: SeaweedTemplateData;
|
|
@@ -260,5 +259,39 @@
|
|
|
260
259
|
tfoot > tr {
|
|
261
260
|
display: flex;
|
|
262
261
|
}
|
|
262
|
+
.btn-group > button {
|
|
263
|
+
padding: 0.3em 0.75em;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
.btn-group-header > h2 {
|
|
267
|
+
font-weight: bolder;
|
|
268
|
+
padding-top: 1lh;
|
|
269
|
+
padding-bottom: 1lh;
|
|
270
|
+
margin-bottom: 0;
|
|
271
|
+
padding-inline-start: 1em;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
.dark .btn-group-header > h2 {
|
|
275
|
+
color: rgb(var(--theme-font-color-dark));
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
.dark .entry-group {
|
|
279
|
+
background-color: rgb(var(--color-surface-800));
|
|
280
|
+
}
|
|
263
281
|
|
|
282
|
+
tbody tr:nth-child(odd) {
|
|
283
|
+
background-color: rgb(var(--color-surface-500));
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
.dark tbody tr:nth-child(odd) {
|
|
287
|
+
background-color: rgb(var(--color-surface-900));
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
tbody tr:nth-child(even) {
|
|
291
|
+
background-color: rgb(var(--color-surface-200));
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
.dark tbody tr:nth-child(even) {
|
|
295
|
+
background-color: rgb(var(--color-surface-800));
|
|
296
|
+
}
|
|
264
297
|
</style>
|
|
@@ -63,7 +63,9 @@
|
|
|
63
63
|
<PinyaButton
|
|
64
64
|
buttonVariant={ButtonVariant.SmallIcon}
|
|
65
65
|
title="https://turnipxenon.itch.io/"
|
|
66
|
-
onclick={() => window.open("https://turnipxenon.itch.io/")}
|
|
66
|
+
onclick={() => window.open("https://turnipxenon.itch.io/")}
|
|
67
|
+
classes="h-full"
|
|
68
|
+
>
|
|
67
69
|
<ImageIcon src={ItchLogoHotLink} alt="itch icon" />
|
|
68
70
|
{#if (!isSmallVersion)}
|
|
69
71
|
<span>TurnipXenon</span>
|
|
@@ -83,5 +85,6 @@
|
|
|
83
85
|
flex-wrap: wrap;
|
|
84
86
|
justify-content: var(--preferred-justify-content);
|
|
85
87
|
gap: 0.7rem;
|
|
88
|
+
align-items: stretch;
|
|
86
89
|
}
|
|
87
90
|
</style>
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Accordion } from "@skeletonlabs/skeleton-svelte";
|
|
3
|
+
import type { Snippet } from "svelte";
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
value = $bindable(),
|
|
7
|
+
children,
|
|
8
|
+
}: {
|
|
9
|
+
value: string[],
|
|
10
|
+
children: Snippet,
|
|
11
|
+
} = $props();
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<Accordion
|
|
15
|
+
classes="bg-primary-100 dark:bg-tertiary-900 dark:saturate-75"
|
|
16
|
+
{value}
|
|
17
|
+
onValueChange={(e) => (value = e.value)}
|
|
18
|
+
collapsible
|
|
19
|
+
>
|
|
20
|
+
{@render children()}
|
|
21
|
+
</Accordion>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { Snippet } from "svelte";
|
|
2
|
+
type $$ComponentProps = {
|
|
3
|
+
value: string[];
|
|
4
|
+
children: Snippet;
|
|
5
|
+
};
|
|
6
|
+
declare const PinyaAccordion: import("svelte").Component<$$ComponentProps, {}, "value">;
|
|
7
|
+
type PinyaAccordion = ReturnType<typeof PinyaAccordion>;
|
|
8
|
+
export default PinyaAccordion;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
// noinspection ES6UnusedImports
|
|
3
|
+
import { Accordion } from "@skeletonlabs/skeleton-svelte";
|
|
4
|
+
import type { Snippet } from "svelte";
|
|
5
|
+
|
|
6
|
+
let {
|
|
7
|
+
value,
|
|
8
|
+
control: controlSnippet,
|
|
9
|
+
panel: panelSnippet,
|
|
10
|
+
}: {
|
|
11
|
+
value: string,
|
|
12
|
+
control: Snippet;
|
|
13
|
+
panel: Snippet;
|
|
14
|
+
} = $props();
|
|
15
|
+
</script>
|
|
16
|
+
|
|
17
|
+
<Accordion.Item
|
|
18
|
+
{value}
|
|
19
|
+
controlHover="hover:bg-primary-500 dark:hover:bg-secondary-600"
|
|
20
|
+
>
|
|
21
|
+
<!-- Control -->
|
|
22
|
+
{#snippet control()}
|
|
23
|
+
{@render controlSnippet()}
|
|
24
|
+
{/snippet}
|
|
25
|
+
<!-- Panel -->
|
|
26
|
+
{#snippet panel()}
|
|
27
|
+
{@render panelSnippet()}
|
|
28
|
+
{/snippet}
|
|
29
|
+
</Accordion.Item>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { Snippet } from "svelte";
|
|
2
|
+
type $$ComponentProps = {
|
|
3
|
+
value: string;
|
|
4
|
+
control: Snippet;
|
|
5
|
+
panel: Snippet;
|
|
6
|
+
};
|
|
7
|
+
declare const PinyaAccordionItem: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
8
|
+
type PinyaAccordionItem = ReturnType<typeof PinyaAccordionItem>;
|
|
9
|
+
export default PinyaAccordionItem;
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
<!-- @component Code Block based on: https://shiki.style/ and https://www.skeleton.dev/docs/integrations/code-block/svelte/ -->
|
|
2
|
+
|
|
3
|
+
<script module>
|
|
4
|
+
import { addCopyButton } from "shiki-transformer-copy-button";
|
|
5
|
+
import { createHighlighterCoreSync } from "shiki/core";
|
|
6
|
+
import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
|
|
7
|
+
// Themes
|
|
8
|
+
// https://shiki.style/themes
|
|
9
|
+
import themeLight from "shiki/themes/catppuccin-latte.mjs";
|
|
10
|
+
import themeDark from "shiki/themes/catppuccin-frappe.mjs";
|
|
11
|
+
// Languages
|
|
12
|
+
// https://shiki.style/languages
|
|
13
|
+
import console from "shiki/langs/console.mjs";
|
|
14
|
+
import html from "shiki/langs/html.mjs";
|
|
15
|
+
import css from "shiki/langs/css.mjs";
|
|
16
|
+
import js from "shiki/langs/javascript.mjs";
|
|
17
|
+
import ts from "shiki/langs/typescript.mjs";
|
|
18
|
+
import markdown from "shiki/langs/markdown.mjs";
|
|
19
|
+
|
|
20
|
+
// https://shiki.style/guide/sync-usage
|
|
21
|
+
const shiki = createHighlighterCoreSync({
|
|
22
|
+
engine: createJavaScriptRegexEngine(),
|
|
23
|
+
// Implement your import theme.
|
|
24
|
+
themes: [themeLight, themeDark],
|
|
25
|
+
// Implement your imported and supported languages.
|
|
26
|
+
langs: [console, html, css, js, ts, markdown]
|
|
27
|
+
});
|
|
28
|
+
</script>
|
|
29
|
+
|
|
30
|
+
<script lang="ts">
|
|
31
|
+
import type { CodeBlockProps } from "./CodeBlockProps";
|
|
32
|
+
|
|
33
|
+
let {
|
|
34
|
+
code = "",
|
|
35
|
+
lang = "console",
|
|
36
|
+
// Base Style Props
|
|
37
|
+
base = " overflow-hidden",
|
|
38
|
+
rounded = "rounded-container",
|
|
39
|
+
shadow = "",
|
|
40
|
+
classes = "",
|
|
41
|
+
// Pre Style Props
|
|
42
|
+
preBase = "",
|
|
43
|
+
prePadding = "[&>pre]:p-4",
|
|
44
|
+
preClasses = ""
|
|
45
|
+
}: CodeBlockProps = $props();
|
|
46
|
+
|
|
47
|
+
// Shiki convert to HTML
|
|
48
|
+
const generatedHtml = $derived(shiki.codeToHtml(code, {
|
|
49
|
+
lang,
|
|
50
|
+
themes: {
|
|
51
|
+
light: "catppuccin-latte",
|
|
52
|
+
dark: "catppuccin-frappe"
|
|
53
|
+
},
|
|
54
|
+
transformers: [
|
|
55
|
+
addCopyButton({ toggle: 2000 })
|
|
56
|
+
]
|
|
57
|
+
}));
|
|
58
|
+
</script>
|
|
59
|
+
|
|
60
|
+
<div
|
|
61
|
+
class="{base} {rounded} {shadow} {classes} {preBase} {prePadding} {preClasses}"
|
|
62
|
+
>
|
|
63
|
+
<!-- Output Shiki's Generated HTML -->
|
|
64
|
+
{@html generatedHtml}
|
|
65
|
+
</div>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import type { CodeBlockProps } from "./CodeBlockProps";
|
|
2
|
+
/** Code Block based on: https://shiki.style/ and https://www.skeleton.dev/docs/integrations/code-block/svelte/ */
|
|
3
|
+
declare const CodeBlock: import("svelte").Component<CodeBlockProps, {}, "">;
|
|
4
|
+
type CodeBlock = ReturnType<typeof CodeBlock>;
|
|
5
|
+
export default CodeBlock;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export interface CodeBlockProps {
|
|
2
|
+
code?: string;
|
|
3
|
+
lang?: 'console' | 'html' | 'css' | 'js' | 'ts' | 'markdown';
|
|
4
|
+
base?: string;
|
|
5
|
+
rounded?: string;
|
|
6
|
+
shadow?: string;
|
|
7
|
+
classes?: string;
|
|
8
|
+
preBase?: string;
|
|
9
|
+
prePadding?: string;
|
|
10
|
+
preClasses?: string;
|
|
11
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
|
|
2
|
+
import { onMount, type Snippet } from "svelte";
|
|
3
3
|
|
|
4
4
|
interface Props {
|
|
5
5
|
isVisible?: boolean;
|
|
6
|
-
children?:
|
|
6
|
+
children?: Snippet;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
-
let {
|
|
9
|
+
let {
|
|
10
|
+
isVisible = $bindable(true),
|
|
11
|
+
children
|
|
12
|
+
}: Props = $props();
|
|
10
13
|
|
|
11
14
|
let stickyElem: HTMLElement = $state();
|
|
12
15
|
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { type Snippet } from "svelte";
|
|
2
|
+
interface Props {
|
|
3
|
+
isVisible?: boolean;
|
|
4
|
+
children?: Snippet;
|
|
5
|
+
}
|
|
6
|
+
declare const ElementVisibilityDetector: import("svelte").Component<Props, {}, "isVisible">;
|
|
7
|
+
type ElementVisibilityDetector = ReturnType<typeof ElementVisibilityDetector>;
|
|
8
|
+
export default ElementVisibilityDetector;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Switch } from "@skeletonlabs/skeleton-svelte";
|
|
3
|
+
import type { Snippet } from "svelte";
|
|
4
|
+
|
|
5
|
+
interface Props {
|
|
6
|
+
checked?: boolean;
|
|
7
|
+
name: string;
|
|
8
|
+
onChange?: (() => void);
|
|
9
|
+
children?: Snippet;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
let {
|
|
13
|
+
checked = $bindable(false),
|
|
14
|
+
name,
|
|
15
|
+
onChange = undefined,
|
|
16
|
+
children = undefined
|
|
17
|
+
}: Props = $props();
|
|
18
|
+
</script>
|
|
19
|
+
|
|
20
|
+
<Switch name={name}
|
|
21
|
+
controlActive="bg-secondary-400 dark:bg-secondary-500"
|
|
22
|
+
controlInactive="bg-surface-700 dark:bg-surface-800"
|
|
23
|
+
checked={checked}
|
|
24
|
+
onCheckedChange={(e) => {
|
|
25
|
+
checked = e.checked;
|
|
26
|
+
onChange?.();
|
|
27
|
+
}}>
|
|
28
|
+
{@render children?.()}
|
|
29
|
+
</Switch>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { Snippet } from "svelte";
|
|
2
|
+
interface Props {
|
|
3
|
+
checked?: boolean;
|
|
4
|
+
name: string;
|
|
5
|
+
onChange?: (() => void);
|
|
6
|
+
children?: Snippet;
|
|
7
|
+
}
|
|
8
|
+
declare const PineappleSwitch: import("svelte").Component<Props, {}, "checked">;
|
|
9
|
+
type PineappleSwitch = ReturnType<typeof PineappleSwitch>;
|
|
10
|
+
export default PineappleSwitch;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
let {
|
|
3
|
+
isCircle = false,
|
|
4
|
+
classes = '',
|
|
5
|
+
}: {
|
|
6
|
+
isCircle?: boolean;
|
|
7
|
+
classes?: string;
|
|
8
|
+
} = $props();
|
|
9
|
+
</script>
|
|
10
|
+
|
|
11
|
+
<div
|
|
12
|
+
class="
|
|
13
|
+
{isCircle ?'placeholder-circle' : 'placeholder'}
|
|
14
|
+
animate-pulse bg-surface-600 dark:bg-surface-800
|
|
15
|
+
{classes}
|
|
16
|
+
"
|
|
17
|
+
></div>
|
|
@@ -1,8 +1,11 @@
|
|
|
1
|
-
export { default as ImageIcon } from
|
|
2
|
-
export { default as TextLink } from
|
|
3
|
-
export
|
|
4
|
-
export * from
|
|
5
|
-
export * from
|
|
6
|
-
export * from
|
|
7
|
-
export * from
|
|
8
|
-
export * from
|
|
1
|
+
export { default as ImageIcon } from "./ImageIcon.svelte";
|
|
2
|
+
export { default as TextLink } from "./TextLink.svelte";
|
|
3
|
+
export { default as ElementVisibilityDetector } from "./ElementVisibilityDetector.svelte";
|
|
4
|
+
export * from "./ColorScheme";
|
|
5
|
+
export * from "./GeneralUIProps";
|
|
6
|
+
export * from "./OnBackground";
|
|
7
|
+
export * from "./pinya-card/index";
|
|
8
|
+
export * from "./WrapperProps";
|
|
9
|
+
export * from "./pinya-button/index";
|
|
10
|
+
export * from "./text-chip";
|
|
11
|
+
export * from "./CodeBlock";
|
|
@@ -1,8 +1,11 @@
|
|
|
1
|
-
export { default as ImageIcon } from
|
|
2
|
-
export { default as TextLink } from
|
|
3
|
-
export
|
|
4
|
-
export * from
|
|
5
|
-
export * from
|
|
6
|
-
export * from
|
|
7
|
-
export * from
|
|
8
|
-
export * from
|
|
1
|
+
export { default as ImageIcon } from "./ImageIcon.svelte";
|
|
2
|
+
export { default as TextLink } from "./TextLink.svelte";
|
|
3
|
+
export { default as ElementVisibilityDetector } from "./ElementVisibilityDetector.svelte";
|
|
4
|
+
export * from "./ColorScheme";
|
|
5
|
+
export * from "./GeneralUIProps";
|
|
6
|
+
export * from "./OnBackground";
|
|
7
|
+
export * from "./pinya-card/index";
|
|
8
|
+
export * from "./WrapperProps";
|
|
9
|
+
export * from "./pinya-button/index";
|
|
10
|
+
export * from "./text-chip";
|
|
11
|
+
export * from "./CodeBlock";
|
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
paddingClass = '',
|
|
9
9
|
buttonVariant = ButtonVariant.Default,
|
|
10
10
|
colorClass = '',
|
|
11
|
+
classes = '',
|
|
11
12
|
...props
|
|
12
13
|
}: PinyaButtonProps = $props();
|
|
13
14
|
|
|
@@ -41,7 +42,7 @@
|
|
|
41
42
|
<button
|
|
42
43
|
{...props}
|
|
43
44
|
class:small-icon-button={buttonVariant === ButtonVariant.SmallIcon}
|
|
44
|
-
class={`btn rounded-2xl text-xl font-bold ${tailwindClass} ${paddingClass}`}
|
|
45
|
+
class={`btn rounded-2xl text-xl font-bold ${tailwindClass} ${paddingClass} ${classes}`}
|
|
45
46
|
>
|
|
46
47
|
{@render children()}
|
|
47
48
|
</button>
|
|
@@ -1,19 +1,21 @@
|
|
|
1
1
|
<script lang="ts">/**
|
|
2
|
-
* When with texts, wrap the text content inside a div so flex wont apply
|
|
3
|
-
*/
|
|
4
|
-
|
|
2
|
+
* When with texts, wrap the text content inside a div so flex wont apply
|
|
3
|
+
*/
|
|
4
|
+
import type { PinyaCardProps } from "./props";
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
paddingClass =
|
|
8
|
-
flexClass =
|
|
9
|
-
widthClass =
|
|
6
|
+
let {
|
|
7
|
+
paddingClass = "pt-[1lh] pb-[1lh] pl-16 pr-16",
|
|
8
|
+
flexClass = "flex flex-col",
|
|
9
|
+
widthClass = "max-w-md",
|
|
10
|
+
borderClass = "border-[2px] border-primary-500 dark:border-0",
|
|
11
|
+
marginClass = "",
|
|
10
12
|
className,
|
|
11
13
|
children
|
|
12
14
|
}: PinyaCardProps = $props();
|
|
13
15
|
</script>
|
|
14
16
|
|
|
15
17
|
<div
|
|
16
|
-
class={`card bg-surface-200 dark:bg-surface-900
|
|
18
|
+
class={`card bg-surface-200 dark:bg-surface-900 w-full text-start rounded-xl ${paddingClass} ${flexClass} ${className} ${widthClass} ${borderClass} ${marginClass}`}
|
|
17
19
|
>
|
|
18
20
|
{@render children?.()}
|
|
19
21
|
</div>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* When with texts, wrap the text content inside a div so flex wont apply
|
|
3
|
-
*/
|
|
4
|
-
import type { PinyaCardProps } from
|
|
2
|
+
* When with texts, wrap the text content inside a div so flex wont apply
|
|
3
|
+
*/
|
|
4
|
+
import type { PinyaCardProps } from "./props";
|
|
5
5
|
declare const Component: import("svelte").Component<PinyaCardProps, {}, "">;
|
|
6
6
|
type Component = ReturnType<typeof Component>;
|
|
7
7
|
export default Component;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
<script lang="ts" generics="T extends string">
|
|
2
|
+
import { Combobox } from '@skeletonlabs/skeleton-svelte';
|
|
3
|
+
import { getLocale, localizeHref } from '../../../paraglide/runtime';
|
|
4
|
+
import type { PinyaComboboxProps, ValueChangeDetails } from "./PinyaComboboxProps";
|
|
5
|
+
|
|
6
|
+
let {
|
|
7
|
+
contentZIndex = 'auto',
|
|
8
|
+
value = $bindable(),
|
|
9
|
+
onValueChange = () => {},
|
|
10
|
+
onValueChangeBase = undefined,
|
|
11
|
+
...props
|
|
12
|
+
}: PinyaComboboxProps<T> = $props();
|
|
13
|
+
|
|
14
|
+
const onValueChangeBaseImpl = (e: ValueChangeDetails<T>) => {
|
|
15
|
+
value = e.value as T[];
|
|
16
|
+
onValueChange(e);
|
|
17
|
+
};
|
|
18
|
+
</script>
|
|
19
|
+
|
|
20
|
+
<Combobox
|
|
21
|
+
width="w-full"
|
|
22
|
+
labelText="text-md"
|
|
23
|
+
inputGroupBase="w-full flex items-center border-primary-500 border-2 rounded-xl"
|
|
24
|
+
inputGroupInput="grow bg-transparent border-0 dark:placeholder-surface-50 pl-4"
|
|
25
|
+
inputGroupButton="size-[3rem]"
|
|
26
|
+
inputGroupArrow="size-[2rem] m-auto"
|
|
27
|
+
contentBackground="bg-surface-100-900 border-primary-500 border-2"
|
|
28
|
+
zIndex={contentZIndex}
|
|
29
|
+
optionActive="bg-secondary-400-600"
|
|
30
|
+
optionHover="hover:brightness-75 dark:hover:brightness-125"
|
|
31
|
+
optionClasses='aria-selected:brightness-75 aria-selected:dark:brightness-125'
|
|
32
|
+
onValueChange={onValueChangeBase ?? onValueChangeBaseImpl}
|
|
33
|
+
{value}
|
|
34
|
+
{...props}
|
|
35
|
+
/>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type { PinyaComboboxProps } from "./PinyaComboboxProps";
|
|
2
|
+
declare class __sveltets_Render<T extends string> {
|
|
3
|
+
props(): PinyaComboboxProps<T>;
|
|
4
|
+
events(): {};
|
|
5
|
+
slots(): {};
|
|
6
|
+
bindings(): "value";
|
|
7
|
+
exports(): {};
|
|
8
|
+
}
|
|
9
|
+
interface $$IsomorphicComponent {
|
|
10
|
+
new <T extends string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
|
|
11
|
+
$$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
|
|
12
|
+
} & ReturnType<__sveltets_Render<T>['exports']>;
|
|
13
|
+
<T extends string>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
|
|
14
|
+
z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
|
|
15
|
+
}
|
|
16
|
+
declare const PinyaCombobox: $$IsomorphicComponent;
|
|
17
|
+
type PinyaCombobox<T extends string> = InstanceType<typeof PinyaCombobox<T>>;
|
|
18
|
+
export default PinyaCombobox;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export interface GenericComboboxItem<T extends string> {
|
|
2
|
+
label: string;
|
|
3
|
+
value: T;
|
|
4
|
+
}
|
|
5
|
+
export interface ValueChangeDetails<T extends string> {
|
|
6
|
+
value: string[];
|
|
7
|
+
items: T[];
|
|
8
|
+
}
|
|
9
|
+
export interface PinyaComboboxProps<T extends string> {
|
|
10
|
+
data: GenericComboboxItem<T>[];
|
|
11
|
+
defaultValue: T[];
|
|
12
|
+
value: T[];
|
|
13
|
+
label: string;
|
|
14
|
+
placeholder: string;
|
|
15
|
+
onValueChange?: (selectedList: ValueChangeDetails<T>) => void;
|
|
16
|
+
onValueChangeBase?: (selectedList: ValueChangeDetails<T>) => void;
|
|
17
|
+
contentZIndex?: string;
|
|
18
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { TextChipProps } from "./TextChipProps";
|
|
3
|
+
|
|
4
|
+
let { children, queryClass = "" }: TextChipProps = $props();
|
|
5
|
+
</script>
|
|
6
|
+
|
|
7
|
+
<span class={`chip text-chip font-bold pointer-events-none ${queryClass}`}>{@render children()}</span>
|
|
8
|
+
|
|
9
|
+
<style>
|
|
10
|
+
/*noinspection CssUnusedSymbol*/
|
|
11
|
+
:global(.highlight-chip.text-chip) {
|
|
12
|
+
background-color: var(--color-secondary-500) /* oklch(55.6% 0 0deg) = #737373 */;
|
|
13
|
+
color: var(--color-secondary-contrast-500) /* var(--color-secondary-contrast-light) */;
|
|
14
|
+
}
|
|
15
|
+
</style>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export * from "./seaweed
|
|
1
|
+
export * from "./seaweed";
|
|
2
|
+
export * from "./projects";
|
package/dist/ui/modules/index.js
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export * from "./seaweed
|
|
1
|
+
export * from "./seaweed";
|
|
2
|
+
export * from "./projects";
|