@onsvisual/svelte-components 1.0.46 → 1.0.48

package/dist/inputs/Button/Button.svelte

@@ -1,152 +1,152 @@
-<script>
-	import { createEventDispatcher } from "svelte";
-	import Icon from "../../decorators/Icon/Icon.svelte";
-	import { contrastColor, darkenColor } from "../../js/utils";
-
-	const dispatch = createEventDispatcher();
-
-	/**
-	 * Type of button
-	 * @type {"button"|"submit"|"reset"}
-	 */
-	export let type = "button";
-	/**
-	 * Style variant of button
-	 * @type {"primary"|"secondary"|"ghost"}
-	 */
-	export let variant = "primary";
-	/**
-	 * Href of button (renders button as a link)
-	 * @type {string|null}
-	 */
-	export let href = null;
-	/**
-	 * File name if link is used for a file download (only if href is also specified)
-	 * @type {string|null}
-	 */
-	export let download = null;
-	/**
-	 * Don't scroll when link is followed (only if href is also specified)
-	 * @type {boolean}
-	 */
-	export let noScroll = false;
-	/**
-	 * Make button smaller
-	 * @type {boolean}
-	 */
-	export let small = false;
-	/**
-	 * Icon on button, eg. "arrow", "search"
-	 * @type {"arrow"|"carret"|"chevron"|"cog"|"cross"|"download"|"expand"|"external"|"pin"|"print"|"search"|"shrink"|"signout"|"tick"|null}
-	 */
-	export let icon = null;
-	/**
-	 * Position of icon
-	 * @type {"before"|"after"}
-	 */
-	export let iconPosition = "before";
-	/**
-	 * Rotation of icon in degrees (clockwise)
-	 * @type {number}
-	 */
-	export let iconRotation = 0;
-	/**
-	 * Show button as disabled
-	 * @type {boolean}
-	 */
-	export let disabled = false;
-	/**
-	 * Visually hide the button text (for icon-only buttons)
-	 * @type {boolean}
-	 */
-	export let hideLabel = false;
-	/**
-	 * Aria label for button
-	 * @type {string|null}
-	 */
-	export let arialabel = null;
-	/**
-	 * Set a colour for the button
-	 * @type {string|null}
-	 */
-	export let color = null;
-	/**
-	 * Optional: Set an additional CSS class for the component
-	 * @type {string|null}
-	 */
-	export let cls = null;
-</script>
-
-{#if href}
-	<a
-		href={!disabled ? href : null}
-		role="button"
-		{download}
-		class="ons-btn ons-btn--link ons-js-submit-btn {cls}"
-		class:ons-btn--small={small}
-		class:ons-btn--secondary={variant === "secondary"}
-		class:ons-btn--ghost={variant === "ghost"}
-		class:ons-btn--disabled={disabled}
-		on:click={(e) => dispatch("click", e)}
-		aria-label={arialabel}
-		data-sveltekit-noscroll={noScroll}
-	>
-		<span
-			class="ons-btn__inner"
-			style:background={color}
-			style:color={color ? contrastColor(color) : null}
-			style:box-shadow={color ? `0 0.1875rem 0 ${darkenColor(color)}` : null}
-		>
-			{#if iconPosition === "before"}
-				<slot name="icon">
-					{#if icon}
-						<Icon type={icon} marginRight={!hideLabel} rotation={iconRotation} />
-					{/if}
-				</slot>
-			{/if}
-			<span class="ons-btn__text" class:ons-u-vh={hideLabel}><slot /></span>
-			{#if iconPosition === "after"}
-				<slot name="icon">
-					{#if icon}
-						<Icon type={icon} marginLeft={!hideLabel} rotation={iconRotation} />
-					{/if}
-				</slot>
-			{/if}
-		</span>
-	</a>
-{:else}
-	<button
-		{type}
-		class="ons-btn {cls}"
-		class:ons-btn--small={small}
-		class:ons-btn--secondary={variant === "secondary"}
-		class:ons-btn--ghost={variant === "ghost"}
-		class:ons-btn--disabled={disabled}
-		{disabled}
-		on:click={(e) => dispatch("click", e)}
-		aria-label={arialabel}
-	>
-		<span
-			class="ons-btn__inner"
-			style:background={color}
-			style:color={color ? contrastColor(color) : null}
-			style:box-shadow={color ? `0 0.1875rem 0 ${darkenColor(color)}` : null}
-		>
-			{#if iconPosition === "before"}
-				<slot name="icon">
-					{#if icon}
-						<Icon type={icon} marginRight={!hideLabel} rotation={iconRotation} />
-					{/if}
-				</slot>
-			{/if}
-			<span class="ons-btn__text" class:ons-u-vh={hideLabel}><slot /></span>
-			{#if iconPosition === "after"}
-				<slot name="icon">
-					{#if icon}
-						<Icon type={icon} marginLeft={!hideLabel} rotation={iconRotation} />
-					{/if}
-				</slot>
-			{/if}
-		</span>
-	</button>
-{/if}
+<script>
+	import { createEventDispatcher } from "svelte";
+	import Icon from "../../decorators/Icon/Icon.svelte";
+	import { contrastColor, darkenColor } from "../../js/utils";
+
+	const dispatch = createEventDispatcher();
+
+	/**
+	 * Type of button
+	 * @type {"button"|"submit"|"reset"}
+	 */
+	export let type = "button";
+	/**
+	 * Style variant of button
+	 * @type {"primary"|"secondary"|"ghost"}
+	 */
+	export let variant = "primary";
+	/**
+	 * Href of button (renders button as a link)
+	 * @type {string|null}
+	 */
+	export let href = null;
+	/**
+	 * File name if link is used for a file download (only if href is also specified)
+	 * @type {string|null}
+	 */
+	export let download = null;
+	/**
+	 * Don't scroll when link is followed (only if href is also specified)
+	 * @type {boolean}
+	 */
+	export let noScroll = false;
+	/**
+	 * Make button smaller
+	 * @type {boolean}
+	 */
+	export let small = false;
+	/**
+	 * Icon on button, eg. "arrow", "search"
+	 * @type {"arrow"|"carret"|"chevron"|"cog"|"cross"|"download"|"expand"|"external"|"pin"|"print"|"search"|"shrink"|"signout"|"tick"|null}
+	 */
+	export let icon = null;
+	/**
+	 * Position of icon
+	 * @type {"before"|"after"}
+	 */
+	export let iconPosition = "before";
+	/**
+	 * Rotation of icon in degrees (clockwise)
+	 * @type {number}
+	 */
+	export let iconRotation = 0;
+	/**
+	 * Show button as disabled
+	 * @type {boolean}
+	 */
+	export let disabled = false;
+	/**
+	 * Visually hide the button text (for icon-only buttons)
+	 * @type {boolean}
+	 */
+	export let hideLabel = false;
+	/**
+	 * Aria label for button
+	 * @type {string|null}
+	 */
+	export let arialabel = null;
+	/**
+	 * Set a colour for the button
+	 * @type {string|null}
+	 */
+	export let color = null;
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string|null}
+	 */
+	export let cls = null;
+</script>
+
+{#if href}
+	<a
+		href={!disabled ? href : null}
+		role="button"
+		{download}
+		class="ons-btn ons-btn--link ons-js-submit-btn {cls}"
+		class:ons-btn--small={small}
+		class:ons-btn--secondary={variant === "secondary"}
+		class:ons-btn--ghost={variant === "ghost"}
+		class:ons-btn--disabled={disabled}
+		on:click={(e) => dispatch("click", e)}
+		aria-label={arialabel}
+		data-sveltekit-noscroll={noScroll}
+	>
+		<span
+			class="ons-btn__inner"
+			style:background={color}
+			style:color={color ? contrastColor(color) : null}
+			style:box-shadow={color ? `0 0.1875rem 0 ${darkenColor(color)}` : null}
+		>
+			{#if iconPosition === "before"}
+				<slot name="icon">
+					{#if icon}
+						<Icon type={icon} marginRight={!hideLabel} rotation={iconRotation} />
+					{/if}
+				</slot>
+			{/if}
+			<span class="ons-btn__text" class:ons-u-vh={hideLabel}><slot /></span>
+			{#if iconPosition === "after"}
+				<slot name="icon">
+					{#if icon}
+						<Icon type={icon} marginLeft={!hideLabel} rotation={iconRotation} />
+					{/if}
+				</slot>
+			{/if}
+		</span>
+	</a>
+{:else}
+	<button
+		{type}
+		class="ons-btn {cls}"
+		class:ons-btn--small={small}
+		class:ons-btn--secondary={variant === "secondary"}
+		class:ons-btn--ghost={variant === "ghost"}
+		class:ons-btn--disabled={disabled}
+		{disabled}
+		on:click={(e) => dispatch("click", e)}
+		aria-label={arialabel}
+	>
+		<span
+			class="ons-btn__inner"
+			style:background={color}
+			style:color={color ? contrastColor(color) : null}
+			style:box-shadow={color ? `0 0.1875rem 0 ${darkenColor(color)}` : null}
+		>
+			{#if iconPosition === "before"}
+				<slot name="icon">
+					{#if icon}
+						<Icon type={icon} marginRight={!hideLabel} rotation={iconRotation} />
+					{/if}
+				</slot>
+			{/if}
+			<span class="ons-btn__text" class:ons-u-vh={hideLabel}><slot /></span>
+			{#if iconPosition === "after"}
+				<slot name="icon">
+					{#if icon}
+						<Icon type={icon} marginLeft={!hideLabel} rotation={iconRotation} />
+					{/if}
+				</slot>
+			{/if}
+		</span>
+	</button>
+{/if}

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

@@ -1,17 +1,17 @@
-A button/link component that can be styled in various ways. It will render as an `<a>` link if it has an `href` property defined.
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { Button } from "@onsvisual/svelte-components";
-
-  // Define your own function on click
-  const handleClick = (e) => console.log(e);
-</script>
-
-<!-- Standard button with on:click function -->
-<Button on:click="{handleClick}">Button text</Button>
-
-<!-- Button-styled link with href -->
-<Button href="#">Link text</Button>
-```
+A button/link component that can be styled in various ways. It will render as an `<a>` link if it has an `href` property defined.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Button } from "@onsvisual/svelte-components";
+
+  // Define your own function on click
+  const handleClick = (e) => console.log(e);
+</script>
+
+<!-- Standard button with on:click function -->
+<Button on:click="{handleClick}">Button text</Button>
+
+<!-- Button-styled link with href -->
+<Button href="#">Link text</Button>
+```

package/dist/inputs/ButtonGroup/ButtonGroup.stories.svelte

@@ -1,40 +1,40 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import componentDocs from "./docs/component.md?raw";
-	import ButtonGroup from "./ButtonGroup.svelte";
-	import ButtonGroupItem from "./ButtonGroupItem.svelte";
-	import { withComponentDocs } from "../../js/withParams.js";
-
-	const { Story } = defineMeta({
-		title: "Inputs/ButtonGroup",
-		component: ButtonGroup,
-		tags: ["autodocs"],
-		argTypes: {
-			legend: { control: "text" },
-			visuallyHideLegend: { control: "boolean" }
-		},
-		parameters: withComponentDocs(componentDocs)
-	});
-</script>
-
-{#snippet template(args)}
-	<ButtonGroup {...args}>
-		<ButtonGroupItem value="1" label="Option 1" />
-		<ButtonGroupItem value="2" label="Option 2" />
-		<ButtonGroupItem value="3" label="Option 3" />
-	</ButtonGroup>
-{/snippet}
-
-<Story name="Default" args={{ name: "primary", legend: "Choose an option" }} {template} />
-
-<Story
-	name="With initial value"
-	args={{ name: "primary", legend: "Choose an option", value: "2" }}
-	{template}
-/>
-
-<Story
-	name="Visually hide legend"
-	args={{ name: "primary", legend: "Choose an option", visuallyHideLegend: true }}
-	{template}
-/>
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import componentDocs from "./docs/component.md?raw";
+	import ButtonGroup from "./ButtonGroup.svelte";
+	import ButtonGroupItem from "./ButtonGroupItem.svelte";
+	import { withComponentDocs } from "../../js/withParams.js";
+
+	const { Story } = defineMeta({
+		title: "Inputs/ButtonGroup",
+		component: ButtonGroup,
+		tags: ["autodocs"],
+		argTypes: {
+			legend: { control: "text" },
+			visuallyHideLegend: { control: "boolean" }
+		},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<ButtonGroup {...args}>
+		<ButtonGroupItem value="1" label="Option 1" />
+		<ButtonGroupItem value="2" label="Option 2" />
+		<ButtonGroupItem value="3" label="Option 3" />
+	</ButtonGroup>
+{/snippet}
+
+<Story name="Default" args={{ name: "primary", legend: "Choose an option" }} {template} />
+
+<Story
+	name="With initial value"
+	args={{ name: "primary", legend: "Choose an option", value: "2" }}
+	{template}
+/>
+
+<Story
+	name="Visually hide legend"
+	args={{ name: "primary", legend: "Choose an option", visuallyHideLegend: true }}
+	{template}
+/>

package/dist/inputs/ButtonGroup/ButtonGroup.svelte

@@ -1,57 +1,57 @@
-<script>
-	import { setContext } from "svelte";
-	import { writable } from "svelte/store";
-
-	let { name = "", legend = "", value, visuallyHideLegend = false } = $props();
-
-	// create the store
-	const selectedValue = writable(value);
-
-	//  When store changes and update prop
-	$effect(() => {
-		selectedValue.set(value);
-	});
-
-	const currentValue = $derived(selectedValue);
-
-	$effect(() => {
-		if ($currentValue !== value) {
-			value = $currentValue;
-		}
-	});
-
-	// Create a context to share with child Button components
-	setContext("buttonGroup", {
-		groupName: name,
-		selectedValue
-	});
-</script>
-
-<fieldset class="button-group">
-	{#if legend}
-		<legend class:ons-u-vh={visuallyHideLegend}>{legend}</legend>
-	{/if}
-	<div class="buttons">
-		<slot />
-	</div>
-</fieldset>
-
-<style>
-	.button-group {
-		display: inline-block;
-	}
-
-	legend {
-		font-weight: bold;
-		margin-bottom: 0.5rem;
-	}
-
-	.buttons {
-		display: flex;
-		gap: 8px;
-		background: #f5f5f6;
-		padding: 4px;
-		border-radius: 8px;
-		justify-content: space-between;
-	}
-</style>
+<script>
+	import { setContext } from "svelte";
+	import { writable } from "svelte/store";
+
+	let { name = "", legend = "", value = $bindable(), visuallyHideLegend = false } = $props();
+
+	// create the store
+	const selectedValue = writable(value);
+
+	//  When store changes and update prop
+	$effect(() => {
+		selectedValue.set(value);
+	});
+
+	const currentValue = $derived(selectedValue);
+
+	$effect(() => {
+		if ($currentValue !== value) {
+			value = $currentValue;
+		}
+	});
+
+	// Create a context to share with child Button components
+	setContext("buttonGroup", {
+		groupName: name,
+		selectedValue
+	});
+</script>
+
+<fieldset class="button-group">
+	{#if legend}
+		<legend class:ons-u-vh={visuallyHideLegend}>{legend}</legend>
+	{/if}
+	<div class="buttons">
+		<slot />
+	</div>
+</fieldset>
+
+<style>
+	.button-group {
+		display: inline-block;
+	}
+
+	legend {
+		font-weight: bold;
+		margin-bottom: 0.5rem;
+	}
+
+	.buttons {
+		display: flex;
+		gap: 8px;
+		background: #f5f5f6;
+		padding: 4px;
+		border-radius: 8px;
+		justify-content: space-between;
+	}
+</style>