@finsweet/webflow-apps-utils 1.0.1

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

@@ -0,0 +1,64 @@
+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 Notification: $$__sveltets_2_IsomorphicComponent<{
+    /**
+         * The class name to apply to the notification.
+         */ className?: string;
+    /**
+         * The message to display.
+         */ message?: string;
+    /**
+         * The link to navigate to.
+         */ link?: string;
+    /**
+         * The title of the notification.
+         */ title?: string;
+    /**
+         * Title font weight
+         */ titleFontWeight?: number;
+    /**
+         * The title of the link.
+         */ linkTitle?: string;
+    /**
+         * Whether to show the close icon.
+         */ closeIcon?: boolean;
+    /**
+         * The icon to display.
+         */ defaultIcon?: Component;
+    /**
+         * The icon to display for the link.
+         */ linkIcon?: Component | null;
+    /**
+         * The type of notification. Defaults to 'warning'.
+         * You can pass a color string to use a custom color.
+         */ type?: "warning" | "error" | string;
+    /**
+         * Whether to show the richtext message
+         */ richtextMessage?: boolean;
+    /**
+         * Whether to show the richtext title
+         */ richTextTitle?: boolean;
+    /**
+         * Whether to show the border left
+         */ borderLeft?: boolean;
+}, {
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    actions: {};
+}, {}, string>;
+type Notification = InstanceType<typeof Notification>;
+export default Notification;

package/dist/ui/components/PlusMinusButton.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+
+	import { PlusIcon, SubtractIcon } from '../icons';
+
+	export let delta: -1 | 1;
+
+	type CustomEventDetail = {
+		click: typeof delta;
+	};
+
+	// Create the event dispatcher with typed events
+	const dispatch = createEventDispatcher<CustomEventDetail>();
+
+	/**
+	 * Handle the click event and dispatch the custom click event
+	 */
+	const handleClick = () => {
+		dispatch('click', delta);
+	};
+</script>
+
+<button class={delta === -1 ? 'input_left-button' : 'input_right-button'} on:click={handleClick}>
+	<div class="width-12">
+		{#if delta === -1}
+			<SubtractIcon />
+		{:else}
+			<PlusIcon />
+		{/if}
+	</div>
+</button>
+
+<style>
+	.input_left-button {
+		width: 100%;
+		border-color: var(--border2);
+		outline: 0px;
+		cursor: default;
+		user-select: none;
+		padding: var(--padding-tiny);
+		box-sizing: border-box;
+		font-family: inherit;
+		font-size: inherit;
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 24px;
+		border-radius: var(--border-radius) 0px 0px var(--border-radius);
+		color: var(--text1);
+		background: var(--actionSecondaryBackground);
+		border-width: 1px 0px 1px 1px;
+		border-style: solid;
+		align-self: center;
+	}
+
+	.input_right-button {
+		width: 100%;
+		border-color: var(--border2);
+		outline: 0px;
+		cursor: default;
+		user-select: none;
+		padding: var(--padding-tiny);
+		box-sizing: border-box;
+		font-family: inherit;
+		font-size: inherit;
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 24px;
+		border-radius: 0px var(--border-radius) var(--border-radius) 0px;
+		color: var(--text1);
+		background: var(--actionSecondaryBackground);
+		border-width: 1px 1px 1px 0px;
+		border-style: solid;
+		align-self: center;
+	}
+
+	.input_left-button:hover {
+		background: var(--actionSecondaryBackgroundHover);
+	}
+	.input_right-button:hover {
+		background: var(--actionSecondaryBackgroundHover);
+	}
+
+	.width-12 {
+		width: var(--font-size-large);
+		height: var(--font-size-large);
+	}
+</style>

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

@@ -0,0 +1,22 @@
+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 PlusMinusButton: $$__sveltets_2_IsomorphicComponent<{
+    delta: -1 | 1;
+}, {
+    click: CustomEvent<1 | -1>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type PlusMinusButton = InstanceType<typeof PlusMinusButton>;
+export default PlusMinusButton;

package/dist/ui/components/PreviewBar.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { EyeIcon } from '../icons';
+
+	export let text = 'Preview';
+</script>
+
+<div class="preview-header">
+	<EyeIcon />
+	{text}
+</div>
+
+<style>
+	.preview-header {
+		display: flex;
+		align-self: stretch;
+		justify-content: start;
+		align-items: center;
+		background: var(--background1, #1e1e1e);
+		padding: 0px var(--spacing-12, 12px);
+		gap: 8px;
+		height: 40px;
+		min-height: 40px;
+		/* Make it stick to the top */
+		position: sticky;
+		right: 0;
+		left: 0;
+		z-index: 9999999;
+		top: 0;
+	}
+	.preview-header::after {
+		content: '';
+		display: block;
+		width: 100%;
+		height: 1px;
+		background-color: var(--border1, rgba(255, 255, 255, 0.13));
+		position: absolute;
+		bottom: 1px;
+		left: 0;
+	}
+</style>

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

@@ -0,0 +1,20 @@
+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 PreviewBar: $$__sveltets_2_IsomorphicComponent<{
+    text?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type PreviewBar = InstanceType<typeof PreviewBar>;
+export default PreviewBar;

package/dist/ui/components/ScrollableContent.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import 'simplebar/dist/simplebar.min.css';
+	import 'simplebar';
+	export let className = '';
+</script>
+
+<div class={`scrollable-content ${className}`} data-simplebar>
+	<slot></slot>
+	<div class="scrollable-placeholder"></div>
+</div>
+
+<style>
+	.scrollable-placeholder {
+		height: 1px;
+		background-color: transparent;
+		width: 100%;
+	}
+</style>

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

@@ -0,0 +1,31 @@
+import 'simplebar/dist/simplebar.min.css';
+import 'simplebar';
+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 ScrollableContent: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    className?: string;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type ScrollableContent = InstanceType<typeof ScrollableContent>;
+export default ScrollableContent;

package/dist/ui/components/Section.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+	/**
+	 * Whether to hide the section
+	 */
+	export let hide = false;
+
+	/**
+	 * Whether to show borders
+	 */
+	export let borders: Array<'top' | 'bottom' | 'left' | 'right'> = [];
+	/**
+	 * Whether to show a active state
+	 */
+	export let active = false;
+	/**
+	 * Whether to show a clickable state
+	 */
+	export let clickable = false;
+
+	/**
+	 * Custom class name
+	 */
+	export let className = '';
+	/**
+	 * Whether to show a disabled state
+	 */
+	export let disabled = false;
+</script>
+
+{#if !hide}
+	<div
+		class="section-wrap {active ? 'active' : ''} {clickable ? 'clickable' : ''} {className}"
+		on:click
+		on:mouseover
+		on:mouseleave
+		class:disabled
+		role="button"
+		tabindex="-1"
+		on:focus={() => {}}
+		on:keydown={() => {}}
+		class:border-top={borders.includes('top')}
+		class:border-bottom={borders.includes('bottom')}
+		class:border-left={borders.includes('left')}
+		class:border-right={borders.includes('right')}
+	>
+		<slot></slot>
+	</div>
+{/if}
+
+<style>
+	.section-wrap {
+		display: flex;
+		padding: var(--Spacing-12, 12px);
+		flex-direction: column;
+		align-items: flex-start;
+		gap: var(--Spacing-8, 8px);
+		align-self: stretch;
+		position: relative;
+		border: 1px solid transparent;
+	}
+
+	.section-wrap :global(.dropdown-wrapper) {
+		align-self: stretch;
+		justify-content: space-between;
+		width: 100%;
+	}
+
+	.section-wrap.border-top {
+		border-top: 1px solid var(--border1);
+	}
+	.section-wrap.border-left {
+		border-left: 1px solid var(--border1);
+	}
+	.section-wrap.border-right {
+		border-right: 1px solid var(--border1);
+	}
+	.section-wrap.border-bottom {
+		border-bottom: 1px solid var(--border1);
+	}
+
+	.clickable:hover {
+		background: var(--defaultLightHover);
+	}
+	.section-wrap.active {
+		border-bottom: 1px solid var(--background2);
+		background: var(--defaultLightActive);
+	}
+
+	.clickable {
+		cursor: pointer;
+	}
+
+	.section-wrap.disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+</style>

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

@@ -0,0 +1,50 @@
+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 Section: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    /**
+         * Whether to hide the section
+         */ hide?: boolean;
+    /**
+         * Whether to show borders
+         */ borders?: Array<"top" | "bottom" | "left" | "right">;
+    /**
+         * Whether to show a active state
+         */ active?: boolean;
+    /**
+         * Whether to show a clickable state
+         */ clickable?: boolean;
+    /**
+         * Custom class name
+         */ className?: string;
+    /**
+         * Whether to show a disabled state
+         */ disabled?: boolean;
+}, {
+    default: {};
+}>, {
+    click: MouseEvent;
+    mouseover: MouseEvent;
+    mouseleave: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Section = InstanceType<typeof Section>;
+export default Section;

package/dist/ui/components/SelectBodyOrDivBlock.svelte

@@ -0,0 +1,26 @@
+<script>
+	import { BodyIcon, DivBlock, SelectIcon } from '../icons';
+</script>
+
+<div class="select-msg-wrap">
+	<div class="info"><SelectIcon /></div>
+	<span>Select </span>
+	<BodyIcon />
+	<span>Body or</span>
+	<DivBlock />
+	<span>Div Block</span>
+</div>
+
+<style>
+	.info :global(svg) {
+		color: var(--yellowIcon, #f3c831);
+		width: var(--Spacing-16, 16px);
+		height: var(--Spacing-16, 16px);
+	}
+	.select-msg-wrap {
+		display: flex;
+		align-items: center;
+		gap: 3px;
+		font-size: 11.5px;
+	}
+</style>

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

@@ -0,0 +1,26 @@
+export default SelectBodyOrDivBlock;
+type SelectBodyOrDivBlock = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const SelectBodyOrDivBlock: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/ui/components/Spacer.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	export let height = '100%';
+	export let width = '100%';
+	export let backgroundColor = '';
+</script>
+
+<div
+	style={`min-height: ${height}; min-width: ${width}; background-color: ${backgroundColor};`}
+></div>

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

@@ -0,0 +1,22 @@
+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 Spacer: $$__sveltets_2_IsomorphicComponent<{
+    height?: string;
+    width?: string;
+    backgroundColor?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Spacer = InstanceType<typeof Spacer>;
+export default Spacer;

package/dist/ui/components/SpinnerPlusMinus.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	//TODO
+	// - add min/max values
+
+	import { createEventDispatcher } from 'svelte';
+
+	import PlusMinusButton from './PlusMinusButton.svelte';
+
+	export let label = 'label';
+	export let counter = 0;
+
+	const dispatch = createEventDispatcher<{
+		counterChange: number;
+	}>();
+</script>
+
+<div class="flex-vertical align-center">
+	<div class="input_grid">
+		<PlusMinusButton
+			on:click={(e) => {
+				counter = counter + e.detail; //e.detail is -1
+				dispatch('counterChange', counter);
+			}}
+			delta={-1}
+		/>
+		<input
+			type="number"
+			min="0"
+			class="input_field"
+			bind:value={counter}
+			on:input={() => {
+				dispatch('counterChange', counter);
+			}}
+		/>
+		<PlusMinusButton
+			on:click={(e) => {
+				counter = counter + e.detail; //e.detail is +1
+				dispatch('counterChange', counter);
+			}}
+			delta={1}
+		/>
+	</div>
+	<div class="tiny-label">{label}</div>
+</div>
+
+<style>
+	.input_grid {
+		position: relative;
+		flex-basis: 100%;
+		display: grid;
+		grid-auto-flow: column;
+		grid-auto-columns: 1fr;
+		column-gap: 1px;
+		background: var(--border2);
+		border-radius: 4px;
+		box-shadow: var(--border2) 0px 0px 0px 1px inset;
+	}
+
+	.input_field {
+		-webkit-box-align: center;
+		align-items: center;
+		color: var(--text1);
+		font-size: var(--font-size-small);
+		max-width: 1.5rem;
+		background-color: var(--background5);
+		border-top: 1px solid var(--border2);
+		border-bottom: 1px solid var(--border2);
+		display: flex;
+		-webkit-box-pack: center;
+		justify-content: center;
+		height: 24px;
+		opacity: 1;
+		text-align: center;
+	}
+</style>

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

@@ -0,0 +1,23 @@
+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 SpinnerPlusMinus: $$__sveltets_2_IsomorphicComponent<{
+    label?: string;
+    counter?: number;
+}, {
+    counterChange: CustomEvent<number>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SpinnerPlusMinus = InstanceType<typeof SpinnerPlusMinus>;
+export default SpinnerPlusMinus;