@finsweet/webflow-apps-utils 1.0.1

package/dist/ui/components/SpinnerUpDown.svelte

@@ -0,0 +1,194 @@
+<script lang="ts">
+	import { parseNumericAttribute } from '../../utils';
+
+	export let value: number = 0;
+	export let displayedValue = ''; // Will hold the display value as a string
+	export let min = 0;
+	export let max = 9999;
+	export let step = 1;
+	export let id = '';
+	export let placeholder = '0';
+	export let width = '100%';
+	export let disabled = false;
+
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher<{
+		spinnerChange: number;
+		blur: number;
+	}>();
+
+	// This will update the displayedValue when 'value' is externally modified
+	$: displayedValue = value !== undefined ? value.toString() : '';
+
+	/**
+	 * Increment the value by the step amount
+	 */
+	const increment = () => {
+		if (value < max) {
+			value = Math.min(max, value + step);
+
+			dispatch('spinnerChange', value);
+		}
+	};
+	/**
+	 * Decrement the value by the step amount
+	 */
+	const decrement = () => {
+		if (value > min) {
+			value = Math.max(min, value - step);
+			dispatch('spinnerChange', value);
+		}
+	};
+
+	/**
+	 * Manually update the value when the input is changed
+	 * @param event
+	 */
+	const manualUpdate = (event: Event) => {
+		const inputElem = event.target as HTMLInputElement;
+		let newValue = inputElem.value;
+
+		if (newValue !== '0') {
+			newValue = newValue.replace(/^0+/, ''); // Remove leading zeros
+		}
+
+		// If newValue is empty, don't update the value
+		if (newValue === '') {
+			displayedValue = '';
+			inputElem.value = '';
+
+			dispatch('spinnerChange', value);
+
+			return;
+		}
+
+		const numValue = parseNumericAttribute(newValue, 0);
+		// Check for NaN and ensure the value is within the min and max bounds
+		if (!isNaN(numValue)) {
+			value = Math.max(min, Math.min(max, numValue));
+			// If value exceeds max, update the displayed value to match max
+			if (numValue > max) {
+				displayedValue = max.toString();
+				inputElem.value = max.toString();
+			}
+		} else {
+			// If parsed value is NaN, reset to min
+			value = min;
+		}
+
+		dispatch('spinnerChange', value);
+	};
+
+	const blurEvent = (e: Event) => {
+		dispatch('blur', value);
+	};
+</script>
+
+<div class="spinner-container" class:disabled style="width: {width};">
+	<input
+		{disabled}
+		{id}
+		type="number"
+		{min}
+		{max}
+		{step}
+		bind:value={displayedValue}
+		on:input={manualUpdate}
+		on:blur={blurEvent}
+		{placeholder}
+	/>
+	<div class="buttons-container">
+		<button on:blur={blurEvent} {disabled} class:disabled on:click={increment} class="increment-btn"
+			>&#8963;</button
+		>
+		<button on:blur={blurEvent} {disabled} class:disabled on:click={decrement} class="decrement-btn"
+			>&#8963;</button
+		>
+	</div>
+</div>
+
+<style>
+	input::placeholder {
+		color: var(--text2) !important;
+		opacity: 1; /* Firefox */
+	}
+
+	input::-ms-input-placeholder {
+		/* Edge 12 -18 */
+		color: var(--text2) !important;
+	}
+	.spinner-container {
+		display: flex;
+		height: 1.5rem;
+		overflow: hidden;
+		border-radius: var(--border-radius);
+		border: 1px solid var(--border1, #212121);
+		background: var(--background1, #2b2b2b);
+		/* input-inner-shadow */
+		box-shadow:
+			0px 1px 1px -1px rgba(0, 0, 0, 0.13) inset,
+			0px 3px 3px -3px rgba(0, 0, 0, 0.17) inset,
+			0px 4px 4px -4px rgba(0, 0, 0, 0.17) inset,
+			0px 8px 8px -8px rgba(0, 0, 0, 0.17) inset,
+			0px 12px 12px -12px rgba(0, 0, 0, 0.13) inset,
+			0px 16px 16px -16px rgba(0, 0, 0, 0.13) inset;
+	}
+
+	.spinner-container:focus-within {
+		/* Styles for the buttons container when input is focused */
+		border: 1px solid var(--blueBorder);
+	}
+
+	.disabled {
+		opacity: 0.75;
+		pointer-events: none;
+		cursor: not-allowed;
+	}
+
+	.buttons-container {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		gap: 1px;
+		background-color: var(--border1);
+	}
+
+	.increment-btn {
+		border-radius: 0 1px 0 0;
+	}
+
+	.decrement-btn {
+		transform: rotate(180deg);
+		border-radius: 1px 0 0 0;
+	}
+
+	input[type='number'] {
+		width: 100%;
+		height: 100%;
+		color: var(--actionPrimaryText);
+		text-align: left;
+		border: 0;
+		padding-left: var(--padding-small);
+	}
+
+	input[type='number']:focus {
+		outline: none;
+	}
+
+	button {
+		border: none;
+		width: 1rem;
+		background-color: var(--actionSecondaryBackground);
+		color: var(--text2);
+		font-size: 0.8em;
+		line-height: 1;
+		height: 48%;
+		display: grid;
+		place-items: center;
+		padding: 2px 0;
+	}
+
+	button:hover {
+		background-color: var(--hoverColor);
+	}
+</style>

package/dist/ui/components/SpinnerUpDown.svelte.d.ts

@@ -0,0 +1,31 @@
+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;
+}
+declare const SpinnerUpDown: $$__sveltets_2_IsomorphicComponent<{
+    value?: number;
+    displayedValue?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    id?: string;
+    placeholder?: string;
+    width?: string;
+    disabled?: boolean;
+}, {
+    spinnerChange: CustomEvent<number>;
+    blur: CustomEvent<number>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SpinnerUpDown = InstanceType<typeof SpinnerUpDown>;
+export default SpinnerUpDown;

package/dist/ui/components/Tabs.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import type { Component } from 'svelte';
+
+	export let items: {
+		value: number;
+		label: string;
+		component: Component;
+	}[] = [];
+	export let activeTabValue = 1;
+
+	/**
+	 * Handles the click event for the tab.
+	 * @param tabValue
+	 */
+	const handleClick = (tabValue: number) => () => {
+		activeTabValue = tabValue;
+	};
+</script>
+
+<ul>
+	{#each items as item (item.value)}
+		<li class={activeTabValue === item.value ? 'active' : ''}>
+			<button on:click={handleClick(item.value)}>{item.label}</button>
+		</li>
+	{/each}
+</ul>
+{#each items as item (item.value)}
+	{#if activeTabValue === item.value}
+		<div class="box">
+			<svelte:component this={item.component} />
+		</div>
+	{/if}
+{/each}
+
+<style>
+	.box {
+		padding-top: 12px;
+		border-radius: 0 0 0.5rem 0.5rem;
+		border-top: 0;
+	}
+	ul {
+		display: flex;
+		flex-wrap: wrap;
+		padding-left: 0;
+		margin-bottom: 0;
+		list-style: none;
+		border-bottom: 1px solid #dee2e6;
+	}
+	li {
+		margin-bottom: -1px;
+	}
+
+	button {
+		border: 1px solid transparent;
+		border-top-left-radius: 0.25rem;
+		border-top-right-radius: 0.25rem;
+		display: block;
+		padding: 0.5rem 1rem;
+		cursor: pointer;
+	}
+
+	button:hover {
+		border-color: #e9ecef #e9ecef #dee2e6;
+	}
+
+	li.active > button {
+		color: #495057;
+		background-color: #fff;
+		border-color: #dee2e6 #dee2e6 #fff;
+	}
+</style>

package/dist/ui/components/Tabs.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { Component } from 'svelte';
+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;
+}
+declare const Tabs: $$__sveltets_2_IsomorphicComponent<{
+    items?: {
+        value: number;
+        label: string;
+        component: Component;
+    }[];
+    activeTabValue?: number;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Tabs = InstanceType<typeof Tabs>;
+export default Tabs;

package/dist/ui/components/ToggleItem.svelte

@@ -0,0 +1,29 @@
+<script>
+	import { BoxAddIcon, CheckCircleIcon } from '../icons';
+	export let title = 'Toggle Item Title';
+	export let isActive = false;
+</script>
+
+<div class="toggle-item_title-row">
+	<BoxAddIcon />
+	{title}
+	{#if isActive}
+		<CheckCircleIcon />
+	{/if}
+</div>
+
+<style>
+	.toggle-item_title-row {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: start;
+		background-color: var(--background3);
+		border-bottom: 1px solid var(--background5);
+		color: var(--text1);
+		padding: 6px 10px;
+		gap: 8px;
+		font-size: var(--font-size-small);
+		font-weight: 400;
+	}
+</style>

package/dist/ui/components/ToggleItem.svelte.d.ts

@@ -0,0 +1,28 @@
+export default ToggleItem;
+type ToggleItem = SvelteComponent<{
+    title?: string | undefined;
+    isActive?: boolean | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const ToggleItem: $$__sveltets_2_IsomorphicComponent<{
+    title?: string | undefined;
+    isActive?: boolean | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, 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;
+}

package/dist/ui/components/ToggleList.svelte

@@ -0,0 +1,57 @@
+<script>
+	import { TriangleDownIconToggle } from '../icons';
+
+	let display = true;
+	/**
+	 * Toggles the display of the list.
+	 */
+	const handleClick = () => {
+		display = !display;
+	};
+	export let title = 'Toggle List Title';
+</script>
+
+<div class="toggle-list_wrapper">
+	<button class="toggle-list_title-row" on:click={handleClick}>
+		<TriangleDownIconToggle rotate={!display} />
+		{title}
+	</button>
+
+	{#if display}
+		<slot />
+	{/if}
+</div>
+
+<style>
+	button {
+		appearance: none;
+		background: none;
+		border: none;
+		margin: 0;
+		padding: 0;
+		font: inherit;
+		color: inherit;
+		cursor: pointer;
+		outline: none;
+		text-align: inherit;
+		/* other styles as needed */
+	}
+	.toggle-list_wrapper {
+		border-top: 1px solid var(--background5);
+		border-right: 1px solid var(--background5);
+		border-left: 1px solid var(--background5);
+	}
+	.toggle-list_title-row {
+		width: 100%;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: start;
+		background-color: var(--background4);
+		border-bottom: 1px solid var(--background5);
+		color: var(--text1);
+		padding: 6px 10px;
+		gap: 8px;
+		font-size: var(--font-size-large);
+	}
+</style>

package/dist/ui/components/ToggleList.svelte.d.ts

@@ -0,0 +1,39 @@
+export default ToggleList;
+type ToggleList = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    title?: string | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const ToggleList: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    title?: string | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+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;
+}

package/dist/ui/components/breakpoints/BreakpointItem.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+
+	import { Text } from '..';
+	import Switch from '../switch/Switch.svelte';
+	import type { SwitchChangeEvent } from '../switch/types';
+	import { breakpointOptions } from './breakpointOptions';
+
+	export let breakpoint: keyof typeof breakpointOptions;
+	export let enabled = false;
+	export let disabled = false;
+
+	const dispatch = createEventDispatcher<{
+		change: { breakpoint: keyof typeof breakpointOptions; enabled: boolean };
+	}>();
+
+	const { label, description, icon } = breakpointOptions[breakpoint];
+
+	const handleSwitchChange = (event: SwitchChangeEvent) => {
+		enabled = event.checked;
+		dispatch('change', { breakpoint, enabled: event.checked });
+	};
+</script>
+
+<div class="breakpoint-item">
+	<div class="breakpoint-row">
+		<div class="device-info">
+			<Text {label} tooltip={{ message: description }} {icon} class="bp-icon-wrapper" />
+		</div>
+
+		<Switch {disabled} bind:checked={enabled} onchange={handleSwitchChange} />
+	</div>
+
+	<div class="content" style="display: {enabled ? 'flex' : 'none'}">
+		<slot />
+	</div>
+</div>
+
+<style>
+	.breakpoint-item {
+		position: relative;
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: var(--Spacing-8, 8px);
+		align-self: stretch;
+	}
+	.content {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: var(--Spacing-12, 12px);
+		align-self: stretch;
+		border-radius: 4px;
+		border: 1px solid var(--border1);
+		padding: var(--Spacing-12, 12px);
+	}
+
+	.breakpoint-row {
+		display: flex;
+		flex-direction: row;
+		align-items: flex-start;
+		gap: var(--Spacing-8, 8px);
+		align-self: stretch;
+		width: 100%;
+		justify-content: space-between;
+	}
+
+	.device-info {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		color: #fff;
+		position: relative;
+	}
+	.breakpoint-row :global(.device-info > .labels:first-of-type .text) {
+		gap: 4px;
+	}
+	.device-info :global(.bp-icon-wrapper > .text > svg) {
+		width: 16px;
+		height: 16px;
+	}
+</style>

package/dist/ui/components/breakpoints/BreakpointItem.svelte.d.ts

@@ -0,0 +1,37 @@
+import { breakpointOptions } from './breakpointOptions';
+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;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const BreakpointItem: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    breakpoint: keyof typeof breakpointOptions;
+    enabled?: boolean;
+    disabled?: boolean;
+}, {
+    default: {};
+}>, {
+    change: CustomEvent<{
+        breakpoint: keyof typeof breakpointOptions;
+        enabled: boolean;
+    }>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type BreakpointItem = InstanceType<typeof BreakpointItem>;
+export default BreakpointItem;

package/dist/ui/components/breakpoints/breakpointOptions.d.ts

@@ -0,0 +1,12 @@
+import type { Component } from 'svelte';
+import type { ALLOWED_BREAKPOINTS } from '../../../types';
+type BreakpointOption = {
+    label: string;
+    description: string;
+    icon: Component;
+};
+export type BreakpointOptions = {
+    [K in ALLOWED_BREAKPOINTS]: BreakpointOption;
+};
+export declare const breakpointOptions: BreakpointOptions;
+export {};

package/dist/ui/components/breakpoints/breakpointOptions.js

@@ -0,0 +1,38 @@
+import { DesktopWithStar, MobileLandscape, MobilePortrait, TabletPreview, XL, XXL, XXXL } from '../../icons';
+export const breakpointOptions = {
+    '320': {
+        label: 'Mobile Portrait',
+        description: 'Settings added here will apply at 320px and down, unless they’re edited at a smaller breakpoint',
+        icon: MobilePortrait
+    },
+    '480': {
+        label: 'Mobile Landscape',
+        description: 'Settings added here will apply at 480px and down, unless they’re edited at a smaller breakpoint',
+        icon: MobileLandscape
+    },
+    '768': {
+        label: 'Tablet',
+        description: 'Settings added here will apply at 768px and down, unless they’re edited at a smaller breakpoint',
+        icon: TabletPreview
+    },
+    '991': {
+        label: 'Desktop',
+        description: 'Desktop settings apply at all breakpoints, unless they’re edited on another breakpoint',
+        icon: DesktopWithStar
+    },
+    '1280': {
+        label: 'Desktop Small',
+        description: 'Settings added here will apply at 1280px and down, unless they’re edited at a smaller breakpoint',
+        icon: XL
+    },
+    '1440': {
+        label: 'Desktop Medium',
+        description: 'Settings added here will apply at 1280px and down, unless they’re edited at a smaller breakpoint',
+        icon: XXL
+    },
+    '1920': {
+        label: 'Desktop Large',
+        description: 'Settings added here will apply at 1280px and down, unless they’re edited at a smaller breakpoint',
+        icon: XXXL
+    }
+};

package/dist/ui/components/breakpoints/index.d.ts

@@ -0,0 +1,3 @@
+import BreakpointItem from './BreakpointItem.svelte';
+export { BreakpointItem };
+export * from './breakpointOptions';

package/dist/ui/components/breakpoints/index.js

@@ -0,0 +1,3 @@
+import BreakpointItem from './BreakpointItem.svelte';
+export { BreakpointItem };
+export * from './breakpointOptions';