@onsvisual/svelte-components 1.0.24 → 1.0.26

package/dist/inputs/Toolbar/ToolbarButton.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        click: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        custom: {};
+        default: {};
+    };
+};
+export type ToolbarButtonProps = typeof __propDef.props;
+export type ToolbarButtonEvents = typeof __propDef.events;
+export type ToolbarButtonSlots = typeof __propDef.slots;
+export default class ToolbarButton extends SvelteComponentTyped<ToolbarButtonProps, ToolbarButtonEvents, ToolbarButtonSlots> {
+}
+export {};

package/dist/inputs/Toolbar/ToolbarDivider.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { getContext } from "svelte";
+
+	let { classes = "" }: { classes?: string } = $props();
+
+	// Get the orientation store from context
+	const orientationStore = getContext("orientation");
+
+	// Subscribe to the store to get its value
+	const orientation = $derived(orientationStore);
+</script>
+
+<div class={`toolbar-divider ${$orientation} ${classes}`} aria-hidden="true"></div>
+
+<style>
+	.toolbar-divider {
+		background-color: #ccc;
+	}
+
+	.toolbar-divider.horizontal {
+		width: 1px;
+	}
+
+	.toolbar-divider.vertical {
+		width: 100%;
+		height: 1px;
+		margin: 0.5rem 0;
+	}
+</style>

package/dist/inputs/Toolbar/ToolbarDivider.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ToolbarDividerProps = typeof __propDef.props;
+export type ToolbarDividerEvents = typeof __propDef.events;
+export type ToolbarDividerSlots = typeof __propDef.slots;
+export default class ToolbarDivider extends SvelteComponentTyped<ToolbarDividerProps, ToolbarDividerEvents, ToolbarDividerSlots> {
+}
+export {};

package/dist/inputs/Toolbar/ToolbarsContainer.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import { setContext, onMount } from "svelte";
+	import { writable } from "svelte/store";
+
+	// Initialize a store for button IDs
+	const buttonIds = writable([]);
+	setContext("buttonIds", {
+		register: (id: string) => {
+			buttonIds.update((ids) => [...ids, id]);
+		},
+		unregister: (id: string) => {
+			buttonIds.update((ids) => ids.filter((btnId) => btnId !== id));
+		},
+		buttonIds
+	});
+
+	let showHelpState = $state(true);
+
+	$effect(() => {
+		const sessionValue = sessionStorage.getItem("showHelpModals");
+		const localValue = localStorage.getItem("showHelpModals");
+		showHelpState = sessionValue === "false" ? false : localValue === "false" ? false : true;
+	});
+
+	const showHelpModals = writable(showHelpState);
+	// Set context for showHelpModals
+	setContext("showHelpModals", showHelpModals);
+
+	// Reactively update the initial state
+	$effect(() => {
+		showHelpModals.set(showHelpState);
+	});
+
+	const activeModalStore = writable(null); // Tracks the ID of the active modal
+	setContext("activeModalId", activeModalStore);
+
+	onMount(() => {
+		window.addEventListener("beforeunload", () => {
+			sessionStorage.removeItem("showHelpModals");
+		});
+		let unsubscribe = buttonIds.subscribe((ids) => {
+			if (ids.length > 0) {
+				activeModalStore.set(ids[0]); // Set first button as active
+			}
+		});
+
+		return unsubscribe;
+	});
+
+	export function resetHelp() {
+		sessionStorage.setItem("showHelpModals", "true");
+		showHelpModals.set(true);
+	}
+</script>
+
+<div class="multi-toolbar-container">
+	<slot />
+</div>
+
+<style>
+	.multi-toolbar-container {
+		display: flex;
+		flex-direction: row;
+		gap: 1rem;
+		justify-content: space-between;
+		pointer-events: none;
+		flex-wrap: wrap;
+	}
+</style>

package/dist/inputs/Toolbar/ToolbarsContainer.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        resetHelp?: () => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ToolbarsContainerProps = typeof __propDef.props;
+export type ToolbarsContainerEvents = typeof __propDef.events;
+export type ToolbarsContainerSlots = typeof __propDef.slots;
+export default class ToolbarsContainer extends SvelteComponentTyped<ToolbarsContainerProps, ToolbarsContainerEvents, ToolbarsContainerSlots> {
+    get resetHelp(): () => void;
+}
+export {};

package/dist/inputs/Toolbar/docs/component.md

@@ -0,0 +1,99 @@
+A toolbar component. Use `ToolbarsContainer` even if using one toolbar as it contains a store for all the IDs and the activeID.
+
+There's a slot on ToolbarButton if you want to put in custom help text otherwise, there's the prop `helpText`.
+
+Each `ToolControl` will display content underneath the row of buttons. The `id` needs to match the `id` of the button.
+
+Use the prop `hasAriaControls` on a button to link the controls to the button.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { ToolbarsContainer,Toolbar,ToolbarButton, ToolbarDivider,ToolControls,ToolControl, HelpModal } from "@onsvisual/svelte-components";
+</script>
+
+  <ToolbarsContainer>
+
+    <Toolbar orientation="horizontal">
+      <ToolbarButton icon="polygon" label="Draw a polygon" helpText="Draw a polygon on the map" hasAriaControls>
+        <HelpModal>
+          <h3>Detailed Help</h3>
+          <p>More complex help text or even HTML content</p>
+          <ul>
+            <li>With lists</li>
+            <li>Or other elements</li>
+          </ul>
+        </HelpModal>
+      </ToolbarButton>
+      <ToolbarButton
+        icon="radius"
+        label="Draw a circle"
+        helpText="Draw a circle using this tool"
+      />
+      <ToolbarDivider />
+      <ToolbarButton
+        icon="zoomin"
+        label="Zoom in"
+      />
+      <ToolbarButton icon="zoomout" label="Zoom out" />
+    <ToolControls>
+      <ToolControl id="polygon">
+      <p>Text to display when polygon tool is selected, or even an input</p>
+      </ToolControl>
+    </Toolbar>
+
+
+    // Second toolbar
+    <Toolbar>
+      <ToolbarButton id="upload" icon="upload"/>
+      <ToolbarButton id="download" icon="download"/>
+    </Toolbar>
+  </ToolbarsContainer>
+```
+
+## Sticky buttons
+
+```html
+<ToolbarsContainer>
+	<Toolbar>
+		<ToolbarButton id="move" icon="move" label="Move and Pan" sticky />
+		<ToolbarButton id="polygon" icon="polygon" label="Draw a polygon" sticky />
+		<ToolbarButton id="circle" icon="radius" label="Draw a circle" sticky />
+	</Toolbar>
+</ToolbarsContainer>
+```
+
+## Transient buttons
+
+```html
+<ToolbarsContainer>
+	<Toolbar>
+		<ToolbarButton
+			id="zoomin"
+			icon="zoomin"
+			label="Zoom in"
+			transient="{true}"
+			selected="{false}"
+		/>
+		<ToolbarButton id="zoomout" icon="zoomout" label="zoom out" transient />
+	</Toolbar>
+</ToolbarsContainer>
+```
+
+## No help modal
+
+```html
+<ToolbarsContainer>
+	<Toolbar>
+		<ToolbarButton
+			id="zoomin"
+			icon="zoomin"
+			label="Zoom in"
+			transient="{true}"
+			selected="{false}"
+			disableHelp="{true}"
+		/>
+		<ToolbarButton id="zoomout" icon="zoomout" label="zoom out" disableHelp="{true}" transient />
+	</Toolbar>
+</ToolbarsContainer>
+```

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onsvisual/svelte-components",
-	"version": "1.0.24",
+	"version": "1.0.26",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "npm run build:package && npm run build:docs",