@websline/system-components 1.3.4 → 1.3.6

package/dist/components/atoms/icon/index.js

@@ -1,89 +1,45 @@
-import Academy from "./components/Academy.svelte";
-import Add from "./components/Add.svelte";
-import Ai from "./components/Ai.svelte";
-import ArrowDown from "./components/ArrowDown.svelte";
-import ArrowUp from "./components/ArrowUp.svelte";
-import Attach from "./components/Attach.svelte";
-import Block from "./components/Block.svelte";
-import Bold from "./components/Bold.svelte";
-import Calendar from "./components/Calendar.svelte";
-import Check from "./components/Check.svelte";
-import CheckboxStack from "./components/CheckboxStack.svelte";
-import ChevronDown from "./components/ChevronDown.svelte";
-import Close from "./components/Close.svelte";
-import CloseSmall from "./components/CloseSmall.svelte";
-import Controlling from "./components/Controlling.svelte";
-import Dashboard from "./components/Dashboard.svelte";
-import Database from "./components/Database.svelte";
-import Download from "./components/Download.svelte";
-import Dragger from "./components/Dragger.svelte";
-import FilePDF from "./components/FilePDF.svelte";
-import Globe from "./components/Globe.svelte";
-import History from "./components/History.svelte";
-import Info from "./components/Info.svelte";
-import Italic from "./components/Italic.svelte";
-import Layout from "./components/Layout.svelte";
-import Link from "./components/Link.svelte";
-import ListOrdered from "./components/ListOrdered.svelte";
-import ListUnordered from "./components/ListUnordered.svelte";
-import Menu from "./components/Menu.svelte";
-import Notifications from "./components/Notifications.svelte";
-import Out from "./components/Out.svelte";
-import Overflow from "./components/Overflow.svelte";
-import Page from "./components/Page.svelte";
-import Picture from "./components/Picture.svelte";
-import Redo from "./components/Redo.svelte";
-import Refresh from "./components/Refresh.svelte";
-import Search from "./components/Search.svelte";
-import Settings from "./components/Settings.svelte";
-import Trash from "./components/Trash.svelte";
-import Underline from "./components/Underline.svelte";
-import Undo from "./components/Undo.svelte";
-import Unlink from "./components/Unlink.svelte";
-import WebslineSupport from "./components/WebslineSupport.svelte";
+const moduleRegistry = import.meta.glob("./**/*.svelte", {
+	eager: true,
+	base: "./components",
+	import: "default",
+});
 
-export const registry = {
-	academy: Academy,
-	add: Add,
-	ai: Ai,
-	arrowDown: ArrowDown,
-	arrowUp: ArrowUp,
-	attach: Attach,
-	block: Block,
-	bold: Bold,
-	calendar: Calendar,
-	check: Check,
-	"checkbox-stack": CheckboxStack,
-	chevronDown: ChevronDown,
-	close: Close,
-	closeSmall: CloseSmall,
-	controlling: Controlling,
-	dashboard: Dashboard,
-	database: Database,
-	download: Download,
-	dragger: Dragger,
-	"file-pdf": FilePDF,
-	globe: Globe,
-	history: History,
-	info: Info,
-	italic: Italic,
-	layout: Layout,
-	link: Link,
-	listOrdered: ListOrdered,
-	listUnordered: ListUnordered,
-	menu: Menu,
-	notifications: Notifications,
-	out: Out,
-	overflow: Overflow,
-	page: Page,
-	picture: Picture,
-	redo: Redo,
-	refresh: Refresh,
-	search: Search,
-	settings: Settings,
-	trash: Trash,
-	underline: Underline,
-	undo: Undo,
-	unlink: Unlink,
-	webslineSupport: WebslineSupport,
+// paths within the components folder are imported as component names automatically
+// e.g. ./components/subDir/testIcon.svelte -> subDirTestIcon
+// Check the icon story in Storybook to easily extract the icon name
+const registry = Object.fromEntries(
+	Object.entries(moduleRegistry).map(([path, module]) => {
+		const name = path
+			// remove extension
+			.replace(/\.[^/.]+$/, "")
+			// squash any non-alphanumeric into single hyphen (handles underscores)
+			.replace(/[^a-zA-Z0-9]+/g, "-")
+			// replace "-" w/ uppercase of the following letter
+			.replace(/-([a-z])/g, (m, p1) => p1.toUpperCase())
+			// remove remaining "-"
+			.replaceAll("-", "")
+			// first letter lowercase
+			.replace(/^([A-Z])/, (m, p1) => p1.toLowerCase());
+		return [name, module];
+	}),
+);
+
+// e.g. for backwards compatibility
+const synonyms = {
+	"checkbox-stack": "checkboxStack",
+	"file-pdf": "filePDF",
+	unlink: "connectCrossed",
 };
+
+// attach synonyms to registry, with error handling for duplicates
+Object.entries(synonyms).map(([k, v]) => {
+	if (registry[k]) {
+		console.error(
+			`skipping synonym "${k}" because it already exists in the registry`,
+		);
+		return;
+	}
+	registry[k] = registry[v];
+});
+
+export { registry, synonyms };

package/dist/components/atoms/radio/Radio.svelte

@@ -23,7 +23,7 @@
 		id,
 		name,
 		required,
-		value = "",
+		value = "on",
 		...rest
 	} = $props();
 

package/dist/components/atoms/switch/Switch.svelte

@@ -23,7 +23,7 @@
 		id,
 		name,
 		required,
-		value = "",
+		value = "on",
 		...rest
 	} = $props();
 

package/dist/components/atoms/tag/Tag.svelte

@@ -0,0 +1,47 @@
+<script>
+	import { Icon } from "../../../index.js";
+	import { tagVariants } from "./tag.variants.js";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {import('svelte').Snippet} [children] Content inside the tag – can be text, HTML, or Svelte components
+	 * @property {string} [class=""] Additional CSS classes for the tag
+	 * @property {string} [icon=""] Name of the icon to display
+	 * @property {"start" | "end"} [iconPosition="start"] Position of the icon relative to the content
+	 * @property {boolean} [selected=false] Whether the tag is in a visually selected state
+	 * @property {"round" | "round-big"} [shape="round"] Shape of the tag
+	 * @property {"small" | "big"} [size="small"] Size of the tag
+	 * @property {"filled" | "outline"} [variant="filled"] Visual style of the tag
+	 */
+
+	/** @type {Props} */
+	let {
+		children,
+		class: className,
+		icon = "",
+		iconPosition = "start",
+		selected = false,
+		shape = "round",
+		size = "small",
+		variant = "filled",
+		...rest
+	} = $props();
+</script>
+
+<button
+	class={tagVariants({
+		class: className,
+		iconPosition,
+		selected,
+		shape,
+		size,
+		variant,
+	})}
+	{...rest}>
+	{#if icon}
+		<Icon name={icon} size={14} />
+	{/if}
+	<span>
+		{@render children?.()}
+	</span>
+</button>

package/dist/components/atoms/tag/Tag.svelte.d.ts

@@ -0,0 +1,73 @@
+export default Tag;
+type Tag = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Tag: import("svelte").Component<{
+    /**
+     * Content inside the tag – can be text, HTML, or Svelte components
+     */
+    children?: import("svelte").Snippet;
+    /**
+     * Additional CSS classes for the tag
+     */
+    class?: string;
+    /**
+     * Name of the icon to display
+     */
+    icon?: string;
+    /**
+     * Position of the icon relative to the content
+     */
+    iconPosition?: "start" | "end";
+    /**
+     * Whether the tag is in a visually selected state
+     */
+    selected?: boolean;
+    /**
+     * Shape of the tag
+     */
+    shape?: "round" | "round-big";
+    /**
+     * Size of the tag
+     */
+    size?: "small" | "big";
+    /**
+     * Visual style of the tag
+     */
+    variant?: "filled" | "outline";
+}, {}, "">;
+type Props = {
+    /**
+     * Content inside the tag – can be text, HTML, or Svelte components
+     */
+    children?: import("svelte").Snippet;
+    /**
+     * Additional CSS classes for the tag
+     */
+    class?: string;
+    /**
+     * Name of the icon to display
+     */
+    icon?: string;
+    /**
+     * Position of the icon relative to the content
+     */
+    iconPosition?: "start" | "end";
+    /**
+     * Whether the tag is in a visually selected state
+     */
+    selected?: boolean;
+    /**
+     * Shape of the tag
+     */
+    shape?: "round" | "round-big";
+    /**
+     * Size of the tag
+     */
+    size?: "small" | "big";
+    /**
+     * Visual style of the tag
+     */
+    variant?: "filled" | "outline";
+};

package/dist/components/atoms/tag/tag.variants.d.ts

@@ -0,0 +1,58 @@
+export const tagVariants: import("tailwind-variants").TVReturnType<{
+    iconPosition: {
+        end: string;
+    };
+    selected: {
+        true: string;
+    };
+    shape: {
+        round: string;
+        "round-big": string;
+    };
+    size: {
+        big: string;
+        small: string;
+    };
+    variant: {
+        filled: string;
+        outline: string;
+    };
+}, undefined, string[], {
+    iconPosition: {
+        end: string;
+    };
+    selected: {
+        true: string;
+    };
+    shape: {
+        round: string;
+        "round-big": string;
+    };
+    size: {
+        big: string;
+        small: string;
+    };
+    variant: {
+        filled: string;
+        outline: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    iconPosition: {
+        end: string;
+    };
+    selected: {
+        true: string;
+    };
+    shape: {
+        round: string;
+        "round-big": string;
+    };
+    size: {
+        big: string;
+        small: string;
+    };
+    variant: {
+        filled: string;
+        outline: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;

package/dist/components/atoms/tag/tag.variants.js

@@ -0,0 +1,32 @@
+import { tv } from "../../../utils/tailwind.js";
+
+const tagVariants = tv({
+	base: [
+		"relative inline-flex cursor-pointer items-center gap-1 align-middle ui-tag-badge select-none",
+		"ring-blue-500 ring-offset-1 ring-offset-transparent outline-0 focus-visible:ring-1 dark:ring-blue-400",
+		"text-neutral-900 hover:bg-neutral-200 dark:text-neutral-200 hover:dark:bg-neutral-700",
+		"border border-neutral-100 hover:border-neutral-200 dark:border-neutral-700 hover:dark:border-neutral-700",
+	],
+	variants: {
+		iconPosition: {
+			end: "flex-row-reverse",
+		},
+		selected: {
+			true: "border-neutral-900 bg-neutral-900 text-neutral-100 dark:border-blue-400 dark:bg-blue-400",
+		},
+		shape: {
+			round: "rounded-sm",
+			"round-big": "rounded-lg",
+		},
+		size: {
+			big: "min-h-8 px-3",
+			small: "min-h-6 px-2",
+		},
+		variant: {
+			filled: "bg-neutral-100 dark:bg-neutral-700",
+			outline: "bg-transparent",
+		},
+	},
+});
+
+export { tagVariants };

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

@@ -1,61 +1,53 @@
 <script>
-	import { onMount, onDestroy } from "svelte";
+	import { onMount, setContext } from "svelte";
 	import RichTextEditorToolbar from "./toolbar/RichTextEditorToolbar.svelte";
 	import { richTextEditorVariants } from "./richTextEditor.variants.js";
 
-	/**
-	 * TODO: Transform into runes. Currently not possible because re-rendering is not executed correctly. Best to check, for example, whether the Bold button is correctly marked when set.
-	 */
-
-	/**
-	 * @typedef {Object} Props
-	 * @property {classes} [classes] CSS class overrides for editor parts
-	 * @property {string} [content=""] The initial content of the editor
-	 * @property {string} [fieldName=""] The name of the field for form submissions
-	 * @property {boolean} [hideToolbar=false] Whether to hide the toolbar
-	 * @property {"small" | "medium" | "large"} [size="medium"] RichTextEditor size
-	 * @property {string} [placeholder=""] Placeholder text for the editor
-	 */
-
-	/** @type {Props} */
-	export let classes = {};
-	export let content = "";
-	export let fieldName = "";
-	export let hideToolbar = false;
-	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 {
+		classes = {},
+		content = "",
+		fieldName = "",
+		hideToolbar = false,
+		placeholder = "",
+		size = "medium",
+		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",
+			},
 		},
-	};
+		...rest
+	} = $props();
 
-	let element;
-	let editor;
-	let htmlInputValue;
+	let element = $state();
+	let htmlInputValue = $state();
+	let editor = $state.raw();
+
+	let styles = $derived(richTextEditorVariants({ hideToolbar, size }));
+
+	setContext("richt-text-editor", () => editor);
 
 	const initEditor = async () => {
 		const { Editor } = await import("@tiptap/core");
@@ -111,8 +103,7 @@
 				},
 			},
 			content,
-			onTransaction: () => {
-				editor = editor;
+			onUpdate: () => {
 				htmlInputValue = editor.getHTML();
 			},
 		});
@@ -122,12 +113,10 @@
 
 	onMount(() => {
 		initEditor();
-	});
 
-	onDestroy(() => {
-		if (editor) {
-			editor.destroy();
-		}
+		return () => {
+			editor?.destroy();
+		};
 	});
 
 	const cleanHTMLWhitespace = (html) => {
@@ -152,14 +141,12 @@
 
 		return dom.innerHTML.trim();
 	};
-
-	let styles = richTextEditorVariants({ hideToolbar, size });
 </script>
 
-<div class={styles.base({ class: classes.base })}>
+<div class={styles.base({ class: classes.base })} {...rest}>
 	{#if !hideToolbar}
 		<div class={styles.toolbar({ class: classes.toolbar })}>
-			<RichTextEditorToolbar {editor} {toolbarConfig} />
+			<RichTextEditorToolbar {toolbarConfig} />
 		</div>
 	{/if}
 	{#if fieldName}

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

@@ -1,143 +1,23 @@
 export default RichTextEditor;
-type RichTextEditor = SvelteComponent<{
-    content?: string;
-    size?: string;
-    placeholder?: 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;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string;
+type RichTextEditor = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
 };
-declare const RichTextEditor: $$__sveltets_2_IsomorphicComponent<{
+declare const RichTextEditor: import("svelte").Component<{
+    classes?: Record<string, any>;
     content?: string;
-    size?: string;
-    placeholder?: 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?: {
-        /**
-         * CSS class overrides for editor parts
-         */
-        classes?: any;
-        /**
-         * The initial content of the editor
-         */
-        content?: string;
-        /**
-         * The name of the field for form submissions
-         */
-        fieldName?: string;
-        /**
-         * Whether to hide the toolbar
-         */
-        hideToolbar?: boolean;
-        /**
-         * RichTextEditor size
-         */
-        size?: "small" | "medium" | "large";
-        /**
-         * Placeholder text for the editor
-         */
-        placeholder?: string;
-    };
     fieldName?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Props = {
-    /**
-     * CSS class overrides for editor parts
-     */
-    classes?: any;
-    /**
-     * The initial content of the editor
-     */
+    hideToolbar?: boolean;
+    placeholder?: string;
+    size?: string;
+    toolbarConfig?: Record<string, any>;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    classes?: Record<string, any>;
     content?: string;
-    /**
-     * The name of the field for form submissions
-     */
     fieldName?: string;
-    /**
-     * Whether to hide the toolbar
-     */
     hideToolbar?: boolean;
-    /**
-     * RichTextEditor size
-     */
-    size?: "small" | "medium" | "large";
-    /**
-     * Placeholder text for the editor
-     */
     placeholder?: string;
-};
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
+    size?: string;
+    toolbarConfig?: Record<string, any>;
+} & Record<string, any>;