@finsweet/webflow-apps-utils 1.0.2 → 1.0.4

package/dist/ui/components/Copy.svelte

@@ -1,329 +0,0 @@
-<script lang="ts">
-	import ClipboardJS from 'clipboard';
-	import { onDestroy } from 'svelte';
-	import { writable } from 'svelte/store';
-	import { v4 as uuidv4 } from 'uuid';
-
-	import { trimExtraSpaces } from '../../utils/helpers';
-
-	import {
-		ArrowIcon,
-		CheckCircleOutlinedIcon,
-		CodeIcon,
-		CopyIcon,
-		EyeIcon,
-		WarningCircleOutlineIcon
-	} from '../icons';
-
-	export let heading;
-	export let upToDate = false;
-	export let hidden = false;
-	export let disabled = false;
-	export let raw = false;
-	export let scriptUpdated = false;
-	export let showHeader = true;
-	export let comment = '';
-	export let shortName = '';
-	export let leftSpacing = '0px';
-	export let title = 'Click to copy snippet';
-	export let showLink = false;
-	let snippetElement: HTMLElement;
-	let copied = writable<boolean>();
-	let notified = writable<boolean>(false);
-
-	export let content: string;
-	const id: string = uuidv4();
-	let isCooldown: boolean = false;
-
-	/**
-	 * Notify the user with a cooldown
-	 * @param type
-	 * @param message
-	 */
-	const notifyWithCooldown = (type: 'Success' | 'Error', message: string) => {
-		if (!isCooldown) {
-			webflow.notify({ type, message });
-			notified.set(true);
-			isCooldown = true;
-			setTimeout(() => {
-				isCooldown = false;
-			}, 1000);
-		}
-	};
-
-	let clipboard: ClipboardJS | null = null;
-
-	$: {
-		clipboard?.destroy();
-		if (snippetElement && !disabled) {
-			clipboard = new ClipboardJS(snippetElement, {
-				text: () => {
-					if (disabled) {
-						webflow?.notify({
-							type: 'Error',
-							message: 'Select a category before updating the script.'
-						});
-						return '';
-					}
-
-					if (raw) {
-						if (comment) return `<!-- ${comment} -->\n${content}`;
-
-						return content;
-					}
-
-					const target = snippetElement?.querySelector<HTMLElement>('#text-content');
-
-					if (target) {
-						return target.innerText;
-					}
-
-					webflow?.notify({
-						type: 'Error',
-						message: 'Failed to copy. Try again or contact Finsweet support.'
-					});
-					return '';
-				}
-			});
-
-			clipboard.on('success', (e: ClipboardJS.Event) => {
-				copied.set(true);
-				notifyWithCooldown('Success', 'Copied to clipboard!');
-				e.clearSelection();
-			});
-		}
-	}
-
-	$: if ($notified) {
-		setTimeout(() => notified.set(false), 2000);
-	}
-
-	onDestroy(() => {
-		clipboard?.destroy();
-	});
-</script>
-
-{#if !hidden}
-	<div class="scripts scan-result" style={hidden ? 'display:none;' : ''}>
-		{#if showHeader}
-			<div class="info">
-				<div class="header {upToDate ? 'completed' : 'pending'}">
-					{#if upToDate}
-						<CheckCircleOutlinedIcon />
-					{:else}
-						<WarningCircleOutlineIcon />
-					{/if}
-					<div class="text-wrapper">
-						{#if raw}
-							<div class="instruction text">{heading}</div>
-						{:else}
-							<div class="instruction script">{@html heading}</div>
-						{/if}
-						<slot name="content" />
-					</div>
-					<!-- <div class="state">
-            <span class="status {upToDate || $copied ? 'success' : 'pending'}"
-              >{$copied ? 'Copied' : upToDate ? '' : 'Pending'}</span
-            >
-          </div> -->
-				</div>
-			</div>
-		{/if}
-		<div
-			class="copy {disabled ? 'disabled' : ''} {scriptUpdated ? 'script-snippet' : ''}"
-			bind:this={snippetElement}
-			on:keydown={() => {}}
-			tabindex="0"
-			role="button"
-			aria-label="Copy snippet"
-			{title}
-			style="{upToDate ? 'display:none' : ''} margin-left:{leftSpacing};"
-		>
-			<div class="content {disabled ? 'disabled' : ''} {id}" data-target="snippet">
-				<span id="text-content">
-					{raw ? content : (trimExtraSpaces(content) ?? '')}
-				</span>
-			</div>
-			<span class="icon">
-				{#if disabled}
-					<EyeIcon />
-				{:else}
-					<CopyIcon size={16} />
-				{/if}
-			</span>
-		</div>
-
-		<slot name="customCodeLinks" />
-
-		{#if (showLink || !upToDate) && !$$slots?.customCodeLinks}
-			<div class="settings-link" style="margin-left:{leftSpacing};">
-				<a
-					href={`https://webflow.com/dashboard/sites/${shortName}/code`}
-					target="_blank"
-					class="new-tab-link"><CodeIcon />Open Custom code in a new tab <ArrowIcon /></a
-				>
-			</div>
-		{/if}
-	</div>
-{/if}
-
-<style>
-	.settings-link {
-		display: flex;
-		align-self: stretch;
-		justify-content: start;
-		width: 100%;
-	}
-	.text-wrapper {
-		display: flex;
-		flex-direction: column;
-		gap: 4px;
-	}
-	.new-tab-link {
-		display: flex;
-		padding: 4px;
-		justify-content: center;
-		align-items: center;
-		gap: 2px;
-		text-decoration: none;
-		color: var(--blueText);
-		text-align: center;
-		font-family: Inter;
-		font-size: 11.5px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 16px;
-		letter-spacing: -0.115px;
-	}
-	.header {
-		display: flex;
-		gap: 10px;
-		align-items: start;
-		height: max-content;
-	}
-	.header.completed :global(svg) {
-		color: var(--green-green-text, #63d489);
-	}
-	.header.pending :global(svg) {
-		color: var(--yellow-yellow-text, #ffc700);
-	}
-	.status.pending {
-		color: var(--yellow-yellow-text, #ffc700);
-	}
-	.status.success {
-		color: var(--green-green-text, #63d489);
-	}
-	.status {
-		text-align: right;
-	}
-	.status,
-	.info {
-		font-family: Inter;
-		font-size: 11px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 16px;
-	}
-	.info {
-		display: flex;
-		justify-content: space-between;
-		width: 100%;
-		min-width: 290px;
-		align-items: center;
-		gap: 4px;
-	}
-	.info .instruction {
-		flex-grow: 1;
-		align-items: center;
-		display: flex;
-		height: 100%;
-		color: #fff;
-		font-family: Inter;
-		font-size: 12px;
-		font-style: normal;
-		font-weight: 500;
-		line-height: 16px;
-	}
-	/* .info .state {
-    flex-grow: 0;
-    flex-shrink: 0;
-    width: 45px;
-  } */
-
-	.copy.script-snippet {
-		margin-left: 25px;
-	}
-	.copy .content span {
-		display: flex;
-	}
-
-	.copy .content {
-		color: var(--text-text-1, #d9d9d9);
-		font-family: Inter;
-		font-size: 11px;
-		font-style: normal;
-		font-weight: 500;
-		line-height: 16px;
-		display: flex;
-		align-items: start;
-		align-self: stretch;
-		overflow: auto;
-		width: 100%;
-		white-space: pre-wrap;
-		word-wrap: break-word;
-		max-width: 600px;
-		min-height: max-content;
-	}
-	.copy .content.disabled {
-		cursor: not-allowed;
-		color: var(--text2);
-		flex: 1 0 0;
-	}
-	.scripts {
-		display: flex;
-		padding: var(--spacing-16, 16px);
-		flex-direction: column;
-		align-items: flex-start;
-		gap: 12px;
-		align-self: stretch;
-	}
-
-	.copy {
-		border-radius: 4px;
-		background: var(
-			--actionSecondaryBackground,
-			linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.1) 100%),
-			rgba(255, 255, 255, 0.08)
-		);
-		box-shadow:
-			0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.12) inset,
-			0px 0.5px 1px 0px #000;
-		display: flex;
-		padding: 6px var(--Spacing-8, 8px);
-		align-items: flex-start;
-		gap: var(--Spacing-8, 8px);
-		align-self: stretch;
-		flex: 1 0 0;
-		color: var(--text2);
-		font-family: Inter;
-		font-size: 12px;
-		font-style: normal;
-		font-weight: 500;
-		line-height: 16px;
-		cursor: pointer;
-		justify-content: space-between;
-		flex-direction: row;
-	}
-	.copy span.icon {
-		height: 16px;
-	}
-	.copy.disabled {
-		background: none;
-		cursor: not-allowed;
-		color: var(--text2);
-		border-radius: var(--border-radius, 4px);
-		border: 1px solid var(--actionSecondaryBorder);
-		opacity: 0.75;
-		box-shadow: none;
-	}
-</style>

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

@@ -1,35 +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 Copy: $$__sveltets_2_IsomorphicComponent<{
-    heading: any;
-    upToDate?: boolean;
-    hidden?: boolean;
-    disabled?: boolean;
-    raw?: boolean;
-    scriptUpdated?: boolean;
-    showHeader?: boolean;
-    comment?: string;
-    shortName?: string;
-    leftSpacing?: string;
-    title?: string;
-    showLink?: boolean;
-    content: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    content: {};
-    customCodeLinks: {};
-}, {}, string>;
-type Copy = InstanceType<typeof Copy>;
-export default Copy;

package/dist/ui/components/CustomModal.svelte

@@ -1,192 +0,0 @@
-<script lang="ts">
-	import { createEventDispatcher, onMount, tick } from 'svelte';
-
-	const dispatch = createEventDispatcher<{
-		closemodal: boolean;
-	}>();
-
-	import { LoadingScreen } from '../components';
-	import { CloseIcon } from '../icons';
-
-	export let showModal: boolean;
-	export let disableClose: boolean = false;
-	export let showHeader: boolean = true;
-	export let padding: string = 'var(--padding-regular)';
-	export let width: string = '42em';
-	export let height: string = '100%';
-	export let preventOverlayClose: boolean = false;
-	export let closeIcon: boolean = true;
-	export let loading: boolean = false;
-	export let className: string = '';
-	let modalElement: HTMLElement;
-	let closeButton: HTMLButtonElement;
-
-	onMount(async () => {
-		await tick(); // Ensure DOM is updated
-		if (showModal) {
-			closeButton?.focus();
-		}
-	});
-
-	$: {
-		if (modalElement) {
-			if (showModal) {
-				document.body.style.overflow = 'hidden'; // Prevent scrolling
-			} else {
-				document.body.style.overflow = '';
-			}
-		}
-	}
-
-	/**
-	 * Close the modal
-	 */
-	const handleClose = () => {
-		if (disableClose) return;
-
-		showModal = false;
-		dispatch('closemodal', true);
-	};
-
-	/**
-	 * Handle keydown event
-	 * @param e
-	 */
-	const handleKeyDown = (e: KeyboardEvent) => {
-		if (e.key === 'Escape') {
-			if (!preventOverlayClose) {
-				handleClose();
-			}
-		}
-	};
-</script>
-
-{#if showModal}
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
-	<div
-		class="modal-overlay {preventOverlayClose ? 'prevent-overlay-close' : ''} {className}"
-		on:click={() => {
-			if (!preventOverlayClose) {
-				handleClose();
-			}
-		}}
-		on:keydown={handleKeyDown}
-		tabindex="-1"
-	>
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<!-- svelte-ignore a11y-no-static-element-interactions -->
-		<div
-			class="modal-content"
-			bind:this={modalElement}
-			on:click|stopPropagation
-			style="padding: {padding}; width: {width}; height: {height};"
-		>
-			{#if loading}
-				<LoadingScreen message="Please wait..." active spinnerSize={20} position="absolute" />
-			{/if}
-			{#if showHeader}
-				<div class="header-bar">
-					<slot name="header" />
-					{#if closeIcon}
-						<button
-							on:click={() => {
-								handleClose();
-								dispatch('closemodal', true);
-							}}
-							bind:this={closeButton}><CloseIcon /></button
-						>
-					{/if}
-				</div>
-			{/if}
-
-			{#if $$slots?.customModalContent}
-				{#if loading}
-					<LoadingScreen message="Please wait..." spinnerSize={20} position="absolute" />
-				{/if}
-				<slot name="customModalContent" />
-			{:else}
-				<slot />
-			{/if}
-		</div>
-	</div>
-{/if}
-
-<style>
-	.modal-overlay {
-		position: fixed;
-		top: 0;
-		left: 0;
-		width: 100vw;
-		height: 100vh;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		background: rgba(0, 0, 0, 0.4);
-		z-index: 99999999997;
-	}
-
-	.modal-content {
-		border-radius: var(--border-radius);
-		background: var(--background1);
-		color: var(--text1);
-		animation: zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-		position: relative;
-	}
-
-	@keyframes zoom {
-		from {
-			transform: scale(0.95);
-		}
-		to {
-			transform: scale(1);
-		}
-	}
-
-	@keyframes fade {
-		from {
-			opacity: 0;
-		}
-		to {
-			opacity: 1;
-		}
-	}
-	button {
-		border: none;
-		user-select: none;
-		width: 24px;
-		padding: 0px 4px;
-		font-family: inherit;
-		font-size: inherit;
-		position: relative;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		height: 24px;
-		border-radius: 4px;
-		color: rgb(171, 171, 171);
-		background: transparent;
-		box-sizing: border-box;
-		box-shadow: none;
-		align-self: center;
-		cursor: pointer;
-	}
-
-	button:hover {
-		filter: brightness(1.1);
-	}
-
-	.header-bar {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding-bottom: var(--padding-small);
-		border-bottom: 1px solid var(--border1);
-		gap: 4px;
-		width: 100%;
-		margin-bottom: var(--padding-regular);
-	}
-
-	.prevent-overlay-close {
-		cursor: progress;
-	}
-</style>

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

@@ -1,45 +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 CustomModal: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    showModal: boolean;
-    disableClose?: boolean;
-    showHeader?: boolean;
-    padding?: string;
-    width?: string;
-    height?: string;
-    preventOverlayClose?: boolean;
-    closeIcon?: boolean;
-    loading?: boolean;
-    className?: string;
-}, {
-    header: {};
-    customModalContent: {};
-    default: {};
-}>, {
-    click: MouseEvent;
-    closemodal: CustomEvent<boolean>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    header: {};
-    customModalContent: {};
-    default: {};
-}, {}, string>;
-type CustomModal = InstanceType<typeof CustomModal>;
-export default CustomModal;

package/dist/ui/components/DisableInEditMode.svelte

@@ -1,66 +0,0 @@
-<script lang="ts">
-	import { BRAND } from '../../utils';
-
-	import { Tooltip, WarningCircleOutlineIcon } from '..';
-	/**
-	 * Disable the component in edit mode
-	 */
-	export let disabled = false;
-	export let width = '249px';
-	export let disabledMessage = `This option is disabled in edit mode. If you want to change it, please generate a new ${BRAND.COMPONENT}.`;
-</script>
-
-<div class="wrap">
-	{#if disabled}
-		<Tooltip
-			tooltipIcon={WarningCircleOutlineIcon}
-			tooltipIconColor="var(--yellowText)"
-			message={disabledMessage}
-			{width}
-		>
-			{#snippet target()}
-				<div class="categories-disabled wrapper">
-					<slot />
-				</div>
-			{/snippet}
-		</Tooltip>
-	{:else}
-		<slot />
-	{/if}
-</div>
-
-<style>
-	.wrap :global(.dropdown-list) {
-		max-height: 300px !important;
-	}
-
-	.categories-disabled :global(.label-popup .labels span) {
-		opacity: 1;
-		pointer-events: none;
-	}
-	.wrap :global(.dropdown-wrapper) {
-		width: max-content;
-	}
-
-	.wrap > :global(.target:first-child) {
-		width: 100%;
-	}
-
-	.wrap {
-		display: flex;
-		align-items: center;
-		gap: 4px;
-		align-self: stretch;
-		justify-content: space-between;
-		width: 100%;
-	}
-
-	.wrap :global([slot='target']:has(.wrapper)) {
-		display: flex;
-		width: 100%;
-		align-items: center;
-		gap: 4px;
-		align-self: stretch;
-		justify-content: space-between;
-	}
-</style>

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

@@ -1,33 +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 DisableInEditMode: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    /**
-         * Disable the component in edit mode
-         */ disabled?: boolean;
-    width?: string;
-    disabledMessage?: string;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type DisableInEditMode = InstanceType<typeof DisableInEditMode>;
-export default DisableInEditMode;