@finsweet/webflow-apps-utils 1.0.2 → 1.0.4

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

@@ -1,42 +0,0 @@
-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 Modal: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    showModal: boolean;
-    /**
-         * If true, the header bar will not be shown.
-         */ showHeader?: boolean;
-    padding?: string;
-}, {
-    header: {
-        class: string;
-    };
-    default: {};
-}>, {
-    click: MouseEvent;
-    keydown: KeyboardEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    header: {
-        class: string;
-    };
-    default: {};
-}, {}, string>;
-type Modal = InstanceType<typeof Modal>;
-export default Modal;

package/dist/ui/components/Navbar.svelte

@@ -1,132 +0,0 @@
-<script lang="ts">
-	import { type Component } from 'svelte';
-
-	import { routerStore } from '../../stores';
-
-	interface NavLink {
-		title: string;
-		link: string;
-		key: string;
-		icon: Component;
-		alignRight?: boolean;
-		disabled?: boolean;
-		showTitle?: boolean;
-	}
-
-	export let items: NavLink[] = [];
-
-	let leftMenus: NavLink[] = [];
-	let rightMenus: NavLink[] = [];
-
-	$: {
-		leftMenus = items.filter((item) => !item.alignRight);
-		rightMenus = items.filter((item) => item.alignRight);
-	}
-
-	/**
-	 * Returns true if the current path matches the link.
-	 */
-	const isPathMatching = (curr: string): boolean => {
-		const current = $routerStore?.url?.pathname;
-		const link = new URL(curr, $routerStore?.url?.origin).pathname;
-
-		return current === link;
-	};
-</script>
-
-<nav class="navbar">
-	{#each [leftMenus, rightMenus] as menus, index (index)}
-		<div class={index === 0 ? 'left' : 'right'} role="tablist">
-			{#each menus as item, index (index)}
-				{@const matches = isPathMatching(item?.link)}
-				<a
-					role="tab"
-					href={item.link}
-					title={item.title}
-					class:active={matches}
-					class:disabled={item.disabled}
-					on:click={() => {
-						routerStore.update((state) => {
-							return {
-								...state,
-								url: new URL(item.link, state?.url?.origin)
-							};
-						});
-					}}
-					aria-label="Opens {item.title} tab."
-				>
-					<svelte:component this={item.icon} />
-					{#if item.showTitle}
-						<span>{item.title}</span>
-					{/if}
-				</a>
-			{/each}
-		</div>
-	{/each}
-</nav>
-
-<style>
-	.navbar {
-		display: flex;
-		justify-content: space-between;
-		align-items: flex-start;
-		align-self: stretch;
-		background: var(--background1, #1e1e1e);
-		padding: 0px var(--spacing-8, 8px);
-		border-bottom: 1px solid var(--border1, rgba(255, 255, 255, 0.13));
-	}
-
-	.navbar .left {
-		display: flex;
-		width: max-content;
-		align-items: flex-start;
-	}
-
-	.left,
-	.right {
-		gap: 8px;
-	}
-
-	.navbar a {
-		display: flex;
-		padding: var(--spacing-12, 12px) 4px;
-		justify-content: center;
-		align-items: center;
-		gap: var(--space-space-1, 4px);
-		color: var(--text1, #f5f5f5);
-		text-decoration: none;
-		text-align: center;
-		font-family: Inter;
-		font-size: 11.5px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 16px;
-		letter-spacing: -0.115px;
-		margin-bottom: -1px;
-		border-bottom: 1px solid var(--background5); /* prevents annoying layout shift on hover*/
-	}
-
-	.navbar .right {
-		display: flex;
-		width: max-content;
-		align-items: flex-end;
-	}
-
-	.navbar a.active {
-		border-bottom: 1px solid var(--text1, #f5f5f5);
-	}
-
-	.navbar a.disabled {
-		opacity: 0.75;
-		cursor: not-allowed;
-	}
-
-	.navbar a :global(svg) {
-		width: 16px;
-		height: 16px;
-	}
-	.navbar a:hover:not(.active) {
-		/* background-color: var(--hoverColor); */
-		border-bottom: 1px solid var(--text1, #f5f5f5);
-	}
-</style>

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

@@ -1,29 +0,0 @@
-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 Navbar: $$__sveltets_2_IsomorphicComponent<{
-    items?: {
-        title: string;
-        link: string;
-        key: string;
-        icon: Component;
-        alignRight?: boolean;
-        disabled?: boolean;
-        showTitle?: boolean;
-    }[];
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Navbar = InstanceType<typeof Navbar>;
-export default Navbar;

package/dist/ui/components/NoSettingsNeeded.svelte

@@ -1,31 +0,0 @@
-<script lang="ts">
-	import PinIcon from '../icons/PinIcon.svelte';
-</script>
-
-<div class="no-settings-wrap">
-	<h2 class="heading">Script settings</h2>
-	<div class="no-settings-card">
-		<PinIcon />
-		<p>No script settings needed</p>
-	</div>
-</div>
-
-<style>
-	.heading {
-		margin-bottom: var(--padding-regular);
-	}
-
-	.no-settings-wrap {
-		padding: var(--padding-regular);
-	}
-
-	.no-settings-card {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		background: var(--background2);
-		border-radius: var(--border-radius);
-		padding: var(--padding-large);
-	}
-</style>

package/dist/ui/components/Notification.svelte

@@ -1,193 +0,0 @@
-<script lang="ts">
-	import type { Component } from 'svelte';
-
-	import { TimesIcon, WarningCircleOutlineIcon } from '../icons';
-	import { Text } from '.';
-
-	/**
-	 * The class name to apply to the notification.
-	 */
-	export let className = '';
-	/**
-	 * The message to display.
-	 */
-	export let message = '';
-	/**
-	 * The link to navigate to.
-	 */
-	export let link = '';
-	/**
-	 * The title of the notification.
-	 */
-	export let title = '';
-	/**
-	 * Title font weight
-	 */
-	export let titleFontWeight = 600;
-	/**
-	 * The title of the link.
-	 */
-	export let linkTitle = '';
-	/**
-	 * Whether to show the close icon.
-	 */
-	export let closeIcon = true;
-	/**
-	 * The icon to display.
-	 */
-	export let defaultIcon: Component = WarningCircleOutlineIcon;
-	/**
-	 * The icon to display for the link.
-	 */
-	export let linkIcon: Component | null = null;
-	/**
-	 * The type of notification. Defaults to 'warning'.
-	 * You can pass a color string to use a custom color.
-	 */
-	export let type: 'warning' | 'error' | string = 'warning';
-	/**
-	 * Whether to show the richtext message
-	 */
-	export let richtextMessage = false;
-	/**
-	 * Whether to show the richtext title
-	 */
-	export let richTextTitle = false;
-	/**
-	 * Whether to show the border left
-	 */
-	export let borderLeft = true;
-
-	let colors: {
-		icon: string;
-		border: string;
-	};
-
-	$: {
-		if (type === 'warning') {
-			colors = {
-				icon: '#FFD301',
-				border: 'var(--yellowBorder)'
-			};
-		}
-
-		if (type === 'error') {
-			colors = {
-				icon: '#FF8A8A',
-				border: 'var(--redBorder)'
-			};
-		}
-
-		if (type === 'success') {
-			colors = {
-				icon: '#63D489',
-				border: 'var(--greenIcon)'
-			};
-		}
-
-		if (type !== 'warning' && type !== 'error' && type !== 'success') {
-			// accept string as color code
-			colors = {
-				icon: type,
-				border: type
-			};
-		}
-	}
-</script>
-
-<div
-	class="wrapper {className}"
-	style={!borderLeft ? '' : `border-left: 2px solid ${colors.border};`}
->
-	<span style="color:{colors.icon};">
-		<svelte:component this={defaultIcon} />
-	</span>
-	<div class="content">
-		{#if title}
-			<Text
-				label={title}
-				fontSize="normal"
-				fontWeight={titleFontWeight.toString()}
-				raw={richTextTitle}
-			/>
-		{/if}
-		<div class="message">
-			{#if message}
-				<Text label={message} fontColor="var(--text2)" raw={richtextMessage} />
-			{/if}
-
-			{#if link && linkTitle}
-				<a href={link} class="link" target="_blank"
-					><span>{linkTitle}</span>
-					<svelte:component this={linkIcon} />
-				</a>
-			{/if}
-		</div>
-		<slot name="actions" />
-	</div>
-	<div
-		style={!closeIcon ? 'display:none;' : ''}
-		on:click
-		on:keydown={() => {}}
-		tabindex="0"
-		role="button"
-		aria-label="Close"
-		class="close-icon"
-	>
-		<TimesIcon />
-	</div>
-</div>
-
-<style>
-	.content {
-		display: flex;
-		padding-right: var(--spacing-24, 24px);
-		flex-direction: column;
-		align-items: flex-start;
-		gap: 4px;
-		flex: 1 0 0;
-	}
-	.close-icon {
-		cursor: pointer;
-	}
-	.link :global(svg) {
-		color: var(--blue-blue-text, #8ac2ff);
-	}
-	.link {
-		color: var(--blue-blue-text, #8ac2ff);
-		font-family: Inter;
-		font-size: 11px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 16px;
-		cursor: pointer;
-		text-decoration: none;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		width: max-content;
-	}
-	.wrapper {
-		display: flex;
-		padding: 8px;
-		align-items: flex-start;
-		gap: 8px;
-		align-self: stretch;
-		border-radius: 4px;
-		background: var(--background-background-3, #363636);
-	}
-	.message {
-		color: var(--text-text-2, #bdbdbd);
-		font-family: Inter;
-		font-size: 11px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 16px;
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: flex-start;
-		gap: 4px;
-		align-self: stretch;
-	}
-</style>

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

@@ -1,64 +0,0 @@
-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

@@ -1,91 +0,0 @@
-<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

@@ -1,22 +0,0 @@
-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

@@ -1,40 +0,0 @@
-<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

@@ -1,20 +0,0 @@
-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

@@ -1,18 +0,0 @@
-<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>