@websline/system-components 0.0.2 → 0.0.4

package/dist/components/molecules/richTextEditor/RichTextEditor.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { onMount, onDestroy } from "svelte";
-	import RichTextEditorToolbar from "./RichTextEditorToolbar.svelte";
+	import RichTextEditorToolbar from "./toolbar/RichTextEditorToolbar.svelte";
 	import { richTextEditorVariants } from "./richTextEditor.variants.js";
 
 	/**
@@ -18,13 +18,40 @@
 	 */
 
 	/** @type {Props} */
-
 	export let classes = {};
 	export let content = "";
 	export let fieldName = "";
 	export let hideToolbar = false;
-	export let placeholder = "Beginne mit dem Schreiben..."; // Placeholder text for the editor
+	export let placeholder = "Beginne mit dem Schreiben...";
 	export let size = "medium";
+	export let toolbarConfig = {
+		bold: {
+			enabled: true,
+		},
+		history: {
+			enabled: true,
+		},
+		italic: {
+			enabled: true,
+		},
+		link: {
+			enabled: true,
+		},
+		list: {
+			enabled: true,
+		},
+		listOrdered: {
+			enabled: true,
+		},
+		underline: {
+			enabled: true,
+		},
+		color: {
+			enabled: true,
+			colors: ["#121110", "#0000ff"],
+			defaultColor: "#121110",
+		},
+	};
 
 	let element;
 	let editor;
@@ -33,36 +60,35 @@
 	const initEditor = async () => {
 		const { Editor } = await import("@tiptap/core");
 		const StarterKit = (await import("@tiptap/starter-kit")).default;
-		const Link = (await import("@tiptap/extension-link")).default;
 		const TextAlign = (await import("@tiptap/extension-text-align")).default;
 		const Color = (await import("@tiptap/extension-color")).default;
-		const TextStyle = (await import("@tiptap/extension-text-style")).default;
+		const { TextStyle } = await import("@tiptap/extension-text-style");
 		const Highlight = (await import("@tiptap/extension-highlight")).default;
-		const Underline = (await import("@tiptap/extension-underline")).default;
 		const Placeholder = (await import("@tiptap/extension-placeholder")).default;
 		const DOMPurify = (await import("dompurify")).default;
 
 		editor = new Editor({
 			element: element,
 			extensions: [
-				StarterKit,
-				TextStyle,
+				StarterKit.configure({
+					link: {
+						openOnClick: false,
+						HTMLAttributes: {
+							rel: "noopener noreferrer",
+						},
+					},
+				}),
 				Color,
 				Highlight.configure({
 					multicolor: true,
 				}),
-				Link.configure({
-					openOnClick: false,
+				Placeholder.configure({
+					placeholder,
 				}),
 				TextAlign.configure({
 					types: ["paragraph", "heading"],
 				}),
-				Underline,
-				Placeholder.configure({
-					placeholder,
-					showOnlyWhenEditable: true,
-					showOnlyCurrent: true,
-				}),
+				TextStyle,
 			],
 			editorProps: {
 				handlePaste(view, event) {
@@ -127,18 +153,21 @@
 		return dom.innerHTML.trim();
 	};
 
-	let { base, field, toolbar } = richTextEditorVariants();
+	let styles = richTextEditorVariants({ hideToolbar, size });
 </script>
 
-<div class={base({ class: classes.base })}>
+<div class={styles.base({ class: classes.base })}>
 	{#if !hideToolbar}
-		<div class={toolbar({ class: classes.toolbar })}>
-			<RichTextEditorToolbar {editor} />
+		<div class={styles.toolbar({ class: classes.toolbar })}>
+			<RichTextEditorToolbar {editor} {toolbarConfig} />
 		</div>
 	{/if}
 	{#if fieldName}
 		<input type="hidden" name={fieldName} bind:value={htmlInputValue} />
 	{/if}
-	<div class={field({ class: classes.field, hideToolbar, size })} bind:this={element}>
+	<div
+		class={styles.field({ class: classes.field })}
+		bind:this={element}
+		style={`color: ${toolbarConfig.color?.defaultColor || "#121110"};`}>
 	</div>
 </div>

package/dist/components/molecules/richTextEditor/RichTextEditor.svelte.d.ts

@@ -3,6 +3,34 @@ type RichTextEditor = SvelteComponent<{
     size?: string;
     placeholder?: string;
     content?: string;
+    toolbarConfig?: {
+        bold: {
+            enabled: boolean;
+        };
+        history: {
+            enabled: boolean;
+        };
+        italic: {
+            enabled: boolean;
+        };
+        link: {
+            enabled: boolean;
+        };
+        list: {
+            enabled: boolean;
+        };
+        listOrdered: {
+            enabled: boolean;
+        };
+        underline: {
+            enabled: boolean;
+        };
+        color: {
+            enabled: boolean;
+            colors: string[];
+            defaultColor: string;
+        };
+    };
     hideToolbar?: boolean;
     classes?: Props;
     fieldName?: string;
@@ -15,6 +43,34 @@ declare const RichTextEditor: $$__sveltets_2_IsomorphicComponent<{
     size?: string;
     placeholder?: string;
     content?: string;
+    toolbarConfig?: {
+        bold: {
+            enabled: boolean;
+        };
+        history: {
+            enabled: boolean;
+        };
+        italic: {
+            enabled: boolean;
+        };
+        link: {
+            enabled: boolean;
+        };
+        list: {
+            enabled: boolean;
+        };
+        listOrdered: {
+            enabled: boolean;
+        };
+        underline: {
+            enabled: boolean;
+        };
+        color: {
+            enabled: boolean;
+            colors: string[];
+            defaultColor: string;
+        };
+    };
     hideToolbar?: boolean;
     classes?: {
         /**

package/dist/components/molecules/richTextEditor/richTextEditor.variants.js

@@ -3,9 +3,31 @@ import { tv } from "tailwind-variants";
 const richTextEditorVariants = tv({
 	slots: {
 		base: "body-default text-neutral-800 dark:text-white",
-		toolbar: "px-5 py-4 border-neutral-500 border border-b-0 rounded-t-sm",
-		field:
-			"[&>div]:transition-[border] [&>div]:duration-300 [&>div]:border [&>div]:border-neutral-500 [&>div]:rounded-b-sm [&>div]:hover:border-neutral-800 [&>div]:outline-none [&>div]:p-5 [&>div]:h-full [&>.ProseMirror-focused]:!border-blue-500 [&>div]:dark:hover:border-neutral-200 [&>.ProseMirror-focused]:dark:!border-blue-400 [&>div>p.is-empty]:before:content-[attr(data-placeholder)] [&>div>p.is-empty]:before:float-left [&>div>p.is-empty]:before:h-0 [&>div>p.is-empty]:before:text-neutral-500",
+		toolbar:
+			"flex gap-0.5 px-5 py-2 border-neutral-300 dark:border-neutral-700 border border-b-0 rounded-t-sm pointer",
+		field: `
+			[&>div]:transition-[border]
+			[&>div]:duration-300
+			[&>div]:border
+			[&>div]:border-neutral-300
+			[&>div]:overflow-auto
+			dark:[&>div]:border-neutral-700
+			[&>div]:rounded-b-sm
+			[&>div]:outline-none
+			[&>div]:p-5
+			[&>div]:h-full
+			[&>div>p.is-editor-empty:first-child::before]:content-[attr(data-placeholder)]
+			[&>div>p.is-editor-empty:first-child::before]:float-left
+			[&>div>p.is-editor-empty:first-child::before]:h-0
+			[&>div>p.is-editor-empty:first-child::before]:text-neutral-500
+			[&>div>p.is-editor-empty:first-child::before]:pointer-events-none
+			[&>div_a]:underline
+			[&>div_a]:text-blue-500
+			[&>div_ol]:list-decimal
+			[&>div_ol]:pl-4
+			[&>div_ul]:list-disc
+			[&>div_ul]:pl-4
+		`,
 	},
 	variants: {
 		hideToolbar: {

package/dist/components/molecules/richTextEditor/toolbar/RichTextEditorToolbar.svelte

@@ -0,0 +1,49 @@
+<script>
+	import ToolbarBold from "./ToolbarBold.svelte";
+	import ToolbarItalic from "./ToolbarItalic.svelte";
+	import ToolbarUnderline from "./ToolbarUnderline.svelte";
+	import ToolbarLink from "./ToolbarLink.svelte";
+	import ToolbarListOrdered from "./ToolbarListOrdered.svelte";
+	import ToolbarList from "./ToolbarList.svelte";
+	import ToolbarUndo from "./ToolbarUndo.svelte";
+	import ToolbarRedo from "./ToolbarRedo.svelte";
+	import ToolbarColor from "./ToolbarColor.svelte";
+
+	let { editor, toolbarConfig } = $props();
+</script>
+
+{#if toolbarConfig && toolbarConfig.bold && toolbarConfig.bold.enabled}
+	<ToolbarBold {editor} />
+{/if}
+
+{#if toolbarConfig && toolbarConfig.italic && toolbarConfig.italic.enabled}
+	<ToolbarItalic {editor} />
+{/if}
+
+{#if toolbarConfig && toolbarConfig.underline && toolbarConfig.underline.enabled}
+	<ToolbarUnderline {editor} />
+{/if}
+
+{#if toolbarConfig && toolbarConfig.link && toolbarConfig.link.enabled}
+	<ToolbarLink {editor} onOpenLink={toolbarConfig.link.onOpenLink} />
+{/if}
+
+{#if toolbarConfig && toolbarConfig.color && toolbarConfig.color.enabled && toolbarConfig.color.colors.length > 0}
+	<ToolbarColor
+		colors={toolbarConfig.color.colors}
+		defaultColor={toolbarConfig.color.defaultColor}
+		{editor} />
+{/if}
+
+{#if toolbarConfig && toolbarConfig.list && toolbarConfig.list.enabled}
+	<ToolbarList {editor} />
+{/if}
+
+{#if toolbarConfig && toolbarConfig.listOrdered && toolbarConfig.listOrdered.enabled}
+	<ToolbarListOrdered {editor} />
+{/if}
+
+{#if toolbarConfig && toolbarConfig.history && toolbarConfig.history.enabled}
+	<ToolbarUndo {editor} />
+	<ToolbarRedo {editor} />
+{/if}

package/dist/components/molecules/richTextEditor/{RichTextEditorToolbar.svelte.d.ts → toolbar/RichTextEditorToolbar.svelte.d.ts}

@@ -5,7 +5,9 @@ type RichTextEditorToolbar = {
 };
 declare const RichTextEditorToolbar: import("svelte").Component<{
     editor: any;
+    toolbarConfig: any;
 }, {}, "">;
 type $$ComponentProps = {
     editor: any;
+    toolbarConfig: any;
 };

package/dist/components/molecules/richTextEditor/toolbar/ToolbarBold.svelte

@@ -0,0 +1,13 @@
+<script>
+	import { IconButton } from "../../../../index.js";
+
+	let { editor } = $props();
+</script>
+
+{#if editor}
+	<IconButton
+		icon="bold"
+		onclick={() => editor.chain().focus().toggleBold().run()}
+		shape="square"
+		variant={editor.isActive("bold") ? "filled" : "transparent"} />
+{/if}

package/dist/components/molecules/richTextEditor/toolbar/ToolbarBold.svelte.d.ts

@@ -0,0 +1,11 @@
+export default ToolbarBold;
+type ToolbarBold = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const ToolbarBold: import("svelte").Component<{
+    editor: any;
+}, {}, "">;
+type $$ComponentProps = {
+    editor: any;
+};

package/dist/components/molecules/richTextEditor/toolbar/ToolbarColor.svelte

@@ -0,0 +1,27 @@
+<script>
+	import { ColorSwatch } from "../../../../index.js";
+
+	let { colors = [], defaultColor = "#121110", editor } = $props();
+
+	let isOpen = $state(false);
+	let selectedColor = $state(defaultColor);
+
+	const handleColorSelect = (color) => {
+		selectedColor = color;
+		isOpen = false;
+
+		editor.chain().focus().setColor(selectedColor).run();
+	};
+
+	$effect(() => {
+		if (!editor) return;
+		const attrs = editor.getAttributes("textStyle");
+		selectedColor = attrs.color || defaultColor;
+	});
+</script>
+
+<ColorSwatch.Root bind:isOpen bind:selectedColor>
+	{#each colors as color (color)}
+		<ColorSwatch.Color clickable {color} onclick={() => handleColorSelect(color)} />
+	{/each}
+</ColorSwatch.Root>

package/dist/components/molecules/richTextEditor/toolbar/ToolbarColor.svelte.d.ts

@@ -0,0 +1,15 @@
+export default ToolbarColor;
+type ToolbarColor = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const ToolbarColor: import("svelte").Component<{
+    colors?: any[];
+    defaultColor?: string;
+    editor: any;
+}, {}, "">;
+type $$ComponentProps = {
+    colors?: any[];
+    defaultColor?: string;
+    editor: any;
+};

package/dist/components/molecules/richTextEditor/toolbar/ToolbarItalic.svelte

@@ -0,0 +1,13 @@
+<script>
+	import { IconButton } from "../../../../index.js";
+
+	let { editor } = $props();
+</script>
+
+{#if editor}
+	<IconButton
+		icon="italic"
+		onclick={() => editor.chain().focus().toggleItalic().run()}
+		shape="square"
+		variant={editor.isActive("italic") ? "filled" : "transparent"} />
+{/if}

package/dist/components/molecules/richTextEditor/toolbar/ToolbarItalic.svelte.d.ts

@@ -0,0 +1,11 @@
+export default ToolbarItalic;
+type ToolbarItalic = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const ToolbarItalic: import("svelte").Component<{
+    editor: any;
+}, {}, "">;
+type $$ComponentProps = {
+    editor: any;
+};

package/dist/components/molecules/richTextEditor/toolbar/ToolbarLink.svelte

@@ -0,0 +1,34 @@
+<script>
+	import { IconButton } from "../../../../index.js";
+
+	let { editor, onOpenLink } = $props();
+
+	const setLink = () => {
+		const focus = () => editor.chain().focus();
+
+		const previousUrl = editor.getAttributes("link").href;
+		const url = prompt("Link eingeben:", previousUrl || "https://");
+
+		if (url === null) return;
+		url === "" ? focus().unsetLink().run() : focus().setLink({ href: url }).run();
+	};
+
+	const handleOpenLinkModal = () => {
+		if (onOpenLink) {
+			onOpenLink({ setLink, editor });
+			return;
+		}
+
+		alert(
+			"[Editor] No link modal configured. Please provide an `onOpenLink` callback",
+		);
+	};
+</script>
+
+{#if editor}
+	<IconButton
+		icon="link"
+		onclick={handleOpenLinkModal}
+		shape="square"
+		variant={editor.isActive("link") ? "filled" : "transparent"} />
+{/if}

package/dist/components/molecules/richTextEditor/toolbar/ToolbarLink.svelte.d.ts

@@ -0,0 +1,13 @@
+export default ToolbarLink;
+type ToolbarLink = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const ToolbarLink: import("svelte").Component<{
+    editor: any;
+    onOpenLink: any;
+}, {}, "">;
+type $$ComponentProps = {
+    editor: any;
+    onOpenLink: any;
+};

package/dist/components/molecules/richTextEditor/toolbar/ToolbarList.svelte

@@ -0,0 +1,13 @@
+<script>
+	import { IconButton } from "../../../../index.js";
+
+	let { editor } = $props();
+</script>
+
+{#if editor}
+	<IconButton
+		icon="listUnordered"
+		onclick={() => editor.chain().focus().toggleBulletList().run()}
+		shape="square"
+		variant={editor.isActive("bulletList") ? "filled" : "transparent"} />
+{/if}

package/dist/components/molecules/richTextEditor/toolbar/ToolbarList.svelte.d.ts

@@ -0,0 +1,11 @@
+export default ToolbarList;
+type ToolbarList = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const ToolbarList: import("svelte").Component<{
+    editor: any;
+}, {}, "">;
+type $$ComponentProps = {
+    editor: any;
+};

package/dist/components/molecules/richTextEditor/toolbar/ToolbarListOrdered.svelte

@@ -0,0 +1,13 @@
+<script>
+	import { IconButton } from "../../../../index.js";
+
+	let { editor } = $props();
+</script>
+
+{#if editor}
+	<IconButton
+		icon="listOrdered"
+		onclick={() => editor.chain().focus().toggleOrderedList().run()}
+		shape="square"
+		variant={editor.isActive("orderedList") ? "filled" : "transparent"} />
+{/if}

package/dist/components/molecules/richTextEditor/toolbar/ToolbarListOrdered.svelte.d.ts

@@ -0,0 +1,11 @@
+export default ToolbarListOrdered;
+type ToolbarListOrdered = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const ToolbarListOrdered: import("svelte").Component<{
+    editor: any;
+}, {}, "">;
+type $$ComponentProps = {
+    editor: any;
+};

package/dist/components/molecules/richTextEditor/toolbar/ToolbarRedo.svelte

@@ -0,0 +1,13 @@
+<script>
+	import { IconButton } from "../../../../index.js";
+
+	let { editor } = $props();
+</script>
+
+{#if editor}
+	<IconButton
+		icon="redo"
+		onclick={() => editor.chain().focus().redo().run()}
+		shape="square"
+		variant="transparent" />
+{/if}

package/dist/components/molecules/richTextEditor/toolbar/ToolbarRedo.svelte.d.ts

@@ -0,0 +1,11 @@
+export default ToolbarRedo;
+type ToolbarRedo = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const ToolbarRedo: import("svelte").Component<{
+    editor: any;
+}, {}, "">;
+type $$ComponentProps = {
+    editor: any;
+};

package/dist/components/molecules/richTextEditor/toolbar/ToolbarUnderline.svelte

@@ -0,0 +1,13 @@
+<script>
+	import { IconButton } from "../../../../index.js";
+
+	let { editor } = $props();
+</script>
+
+{#if editor}
+	<IconButton
+		icon="underline"
+		onclick={() => editor.chain().focus().toggleUnderline().run()}
+		shape="square"
+		variant={editor.isActive("underline") ? "filled" : "transparent"} />
+{/if}

package/dist/components/molecules/richTextEditor/toolbar/ToolbarUnderline.svelte.d.ts

@@ -0,0 +1,11 @@
+export default ToolbarUnderline;
+type ToolbarUnderline = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const ToolbarUnderline: import("svelte").Component<{
+    editor: any;
+}, {}, "">;
+type $$ComponentProps = {
+    editor: any;
+};

package/dist/components/molecules/richTextEditor/toolbar/ToolbarUndo.svelte

@@ -0,0 +1,13 @@
+<script>
+	import { IconButton } from "../../../../index.js";
+
+	let { editor } = $props();
+</script>
+
+{#if editor}
+	<IconButton
+		icon="undo"
+		onclick={() => editor.chain().focus().undo().run()}
+		shape="square"
+		variant="transparent" />
+{/if}

package/dist/components/molecules/richTextEditor/toolbar/ToolbarUndo.svelte.d.ts

@@ -0,0 +1,11 @@
+export default ToolbarUndo;
+type ToolbarUndo = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const ToolbarUndo: import("svelte").Component<{
+    editor: any;
+}, {}, "">;
+type $$ComponentProps = {
+    editor: any;
+};

package/dist/components/molecules/selectorCard/SelectorCard.svelte

@@ -0,0 +1,78 @@
+<script>
+	import { selectorCardVariants } from "./selectorCard.variants.js";
+	import { Switch, Radio, Label } from "../../../index.js";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [checked=false] Wether this card is checked or not, bound to the component
+	 * @property {string} [class=""] Additional CSS classes to apply to the component
+	 * @property {boolean} [disabled=false] Whether the card is disabled
+	 * @property {boolean} [error=false] Whether the form field has an error
+	 * @property {string} [errorText=""] The error text for the form field
+	 * @property {string} [helperText=""] The helper text for the card
+	 * @property {string} [id=""] The ID of the card element
+	 * @property {string} [label=""] Label to display in the card
+	 * @property {string} [name] The name of the card, used for form submission
+	 * @property {boolean} [required=false] Whether the card is required
+	 * @property {"radio" | "switch"} [type="radio"] The type of card
+	 * @property {string} [value=""] The value of the card
+	 */
+
+	/** @type {Props} */
+	let {
+		checked = $bindable(),
+		class: className = "",
+		disabled = false,
+		error = false,
+		errorText = "",
+		helperText = "",
+		id = "",
+		label = "",
+		name,
+		required = false,
+		type = "radio",
+		value = "",
+		...rest
+	} = $props();
+
+	let inputProps = $derived({ disabled, id, name, required, value });
+	let styles = $derived(selectorCardVariants({ checked, disabled, error, type }));
+
+	let localHelperText = $derived.by(() => {
+		if (error && errorText) {
+			return errorText;
+		}
+
+		return helperText;
+	});
+
+	let handleClick = () => {
+		if (disabled) return;
+		if (type === "radio" && checked) return;
+
+		checked = !checked;
+	};
+</script>
+
+<div
+	aria-disabled={disabled}
+	class={styles.base({
+		class: className,
+	})}
+	onclick={handleClick}
+	{...rest}>
+	{#if type === "radio"}
+		<Radio bind:checked class={styles.input()} {...inputProps} />
+	{/if}
+	<div class={styles.content()}>
+		{#if label}
+			<Label class={styles.label()} {error} for={id} {required}>{label}</Label>
+		{/if}
+		{#if localHelperText}
+			<p class={styles.helperText()}>{localHelperText}</p>
+		{/if}
+	</div>
+	{#if type === "switch"}
+		<Switch bind:checked class={styles.input()} {...inputProps} />
+	{/if}
+</div>