windmill-components 1.448.50 → 1.472.1

package/package/components/common/FileProgressBar.svelte.d.ts

@@ -1,20 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        color?: string | undefined;
-        progress?: number | undefined;
-        ended?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type FileProgressBarProps = typeof __propDef.props;
-export type FileProgressBarEvents = typeof __propDef.events;
-export type FileProgressBarSlots = typeof __propDef.slots;
-export default class FileProgressBar extends SvelteComponent<FileProgressBarProps, FileProgressBarEvents, FileProgressBarSlots> {
-}
-export {};

package/package/components/common/actionRow/ActionRow.svelte

@@ -1,34 +0,0 @@
-<script>export let applyPageWidth = false;
-export let stickToTop = false;
-$: wide = applyPageWidth ? 'max-w-7xl mx-auto px-4 sm:px-6 md:px-8' : '';
-let scrollY = 0;
-</script>
-
-<svelte:window bind:scrollY />
-
-<div
-	class={'bg-surface py-3 ' +
-		(stickToTop
-			? 'lg:sticky lg:top-0 z-[500] border-b border-gray-200 border-opacity-0 duration-300 ' +
-			  (scrollY >= 30 ? 'border-opacity-100 ' : '')
-			: '') +
-		($$props.class || '')}
->
-	<div class={'w-full flex flex-wrap justify-between items-center gap-4 ' + wide}>
-		<div class="flex flex-wrap items-center gap-2">
-			{#if $$slots.left}
-				<slot name="left" />
-			{/if}
-		</div>
-		<div class="flex flex-wrap items-center gap-2">
-			{#if $$slots.middle}
-				<slot name="middle" />
-			{/if}
-		</div>
-		<div class="flex flex-wrap items-center gap-2 lg:gap-4">
-			{#if $$slots.right}
-				<slot name="right" />
-			{/if}
-		</div>
-	</div>
-</div>

package/package/components/common/actionRow/ActionRow.svelte.d.ts

@@ -1,22 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        applyPageWidth?: boolean | undefined;
-        stickToTop?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        left: {};
-        middle: {};
-        right: {};
-    };
-};
-export type ActionRowProps = typeof __propDef.props;
-export type ActionRowEvents = typeof __propDef.events;
-export type ActionRowSlots = typeof __propDef.slots;
-export default class ActionRow extends SvelteComponent<ActionRowProps, ActionRowEvents, ActionRowSlots> {
-}
-export {};

package/package/components/common/alert/Alert.svelte

@@ -1,135 +0,0 @@
-<script>import Tooltip from '../../Tooltip.svelte';
-import { AlertCircle, AlertTriangle, CheckCircle2, Info, ChevronDown, ChevronUp } from 'lucide-svelte';
-import { slide } from 'svelte/transition';
-import { twMerge } from 'tailwind-merge';
-export let type = 'info';
-export let title;
-export let notRounded = false;
-export let tooltip = '';
-export let documentationLink = undefined;
-export let size = 'sm';
-export let collapsible = false;
-export let bgClass = undefined;
-export let bgStyle = undefined;
-export let iconClass = undefined;
-export let iconStyle = undefined;
-export let titleClass = undefined;
-export let titleStyle = undefined;
-export let descriptionClass = undefined;
-export let descriptionStyle = undefined;
-export let isCollapsed = true;
-const icons = {
-    info: Info,
-    warning: AlertCircle,
-    error: AlertTriangle,
-    success: CheckCircle2
-};
-const classes = {
-    info: {
-        bgClass: 'bg-blue-50 border-blue-200 border dark:bg-blue-900/40 dark:border-blue-700/40',
-        iconClass: 'text-blue-500 dark:text-blue-300',
-        titleClass: 'text-blue-800 dark:text-blue-100',
-        descriptionClass: 'text-blue-700 dark:text-blue-100'
-    },
-    warning: {
-        bgClass: 'bg-yellow-50 border-yellow-200 border dark:bg-yellow-900/40 dark:border-yellow-700/40',
-        iconClass: 'text-yellow-500 dark:text-yellow-300/90',
-        titleClass: 'text-yellow-800 dark:text-yellow-100/90',
-        descriptionClass: 'text-yellow-700 dark:text-yellow-100/90'
-    },
-    error: {
-        bgClass: 'bg-red-50 border-red-200 border dark:bg-red-900/40 dark:border-red-700/40',
-        iconClass: 'text-red-500 dark:text-red-300/90',
-        titleClass: 'text-red-800 dark:text-red-100/90',
-        descriptionClass: 'text-red-700 dark:text-red-100/90'
-    },
-    success: {
-        bgClass: 'bg-green-50 border-green-200 border dark:bg-green-900/40 dark:border-green-700/40',
-        iconClass: 'text-green-500 dark:text-green-300/90',
-        titleClass: 'text-green-800 dark:text-green-100/90',
-        descriptionClass: 'text-green-700 dark:text-green-100/90'
-    }
-};
-function toggleCollapse() {
-    if (collapsible) {
-        isCollapsed = !isCollapsed;
-    }
-}
-</script>
-
-<div
-	class={twMerge(
-		notRounded ? '' : 'rounded-md',
-		size === 'sm' ? 'p-4' : 'p-2',
-		classes[type].bgClass,
-		bgClass,
-		$$props.class
-	)}
-	style={bgStyle}
->
-	<div class="flex">
-		<div class="flex h-8 w-8 items-center justify-center rounded-full">
-			<svelte:component
-				this={icons[type]}
-				class={twMerge(classes[type].iconClass, iconClass)}
-				style={iconStyle}
-				size={16}
-			/>
-		</div>
-		<div class={twMerge('ml-1 w-full')}>
-			<div class={twMerge('w-full flex flex-row items-center justify-between h-8')}>
-				<span
-					class={twMerge(
-						size === 'sm' ? 'text-sm' : 'text-xs',
-						'font-medium',
-						classes[type].titleClass,
-						titleClass
-					)}
-					style={titleStyle}
-				>
-					{title}
-					{#if tooltip != '' || documentationLink}
-						<Tooltip {documentationLink} scale={0.9}>{tooltip}</Tooltip>
-					{/if}
-				</span>
-				{#if collapsible}
-					<button class="cursor-pointer" on:click={toggleCollapse}>
-						{#if isCollapsed}
-							<ChevronDown size={16} />
-						{:else}
-							<ChevronUp size={16} />
-						{/if}
-					</button>
-				{/if}
-			</div>
-
-			{#if $$slots.default && !isCollapsed}
-				<div transition:slide|local={{ duration: 200 }} class="mt-2">
-					<div
-						class={twMerge(
-							size === 'sm' ? 'text-sm' : 'text-xs',
-							classes[type].descriptionClass,
-							descriptionClass
-						)}
-						style={descriptionStyle}
-					>
-						<slot />
-					</div>
-				</div>
-			{:else if $$slots.default && !collapsible}
-				<div class="mb-2">
-					<div
-						class={twMerge(
-							size === 'sm' ? 'text-sm' : 'text-xs',
-							classes[type].descriptionClass,
-							descriptionClass
-						)}
-						style={descriptionStyle}
-					>
-						<slot />
-					</div>
-				</div>
-			{/if}
-		</div>
-	</div>
-</div>

package/package/components/common/alert/Alert.svelte.d.ts

@@ -1,35 +0,0 @@
-import { SvelteComponent } from "svelte";
-import type { AlertType } from './model';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        type?: AlertType | undefined;
-        title: string;
-        notRounded?: boolean | undefined;
-        tooltip?: string | undefined;
-        documentationLink?: string | undefined;
-        size?: "xs" | "sm" | undefined;
-        collapsible?: boolean | undefined;
-        bgClass?: string | undefined;
-        bgStyle?: string | undefined;
-        iconClass?: string | undefined;
-        iconStyle?: string | undefined;
-        titleClass?: string | undefined;
-        titleStyle?: string | undefined;
-        descriptionClass?: string | undefined;
-        descriptionStyle?: string | undefined;
-        isCollapsed?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type AlertProps = typeof __propDef.props;
-export type AlertEvents = typeof __propDef.events;
-export type AlertSlots = typeof __propDef.slots;
-export default class Alert extends SvelteComponent<AlertProps, AlertEvents, AlertSlots> {
-}
-export {};

package/package/components/common/alert/ConnectionIndicator.svelte

@@ -1,30 +0,0 @@
-<script context="module">export {};
-</script>
-
-<script>import Popover from '../../Popover.svelte';
-import { Circle } from 'lucide-svelte';
-export let connectionInfo = undefined;
-</script>
-
-{#if connectionInfo}
-	<div class="center-center">
-		{#if connectionInfo.connected}
-			<Popover notClickable>
-				<span class="h-4 w-4 center-center">
-					<Circle class="text-green-600 relative inline-flex fill-current" size={12} />
-				</span>
-
-				<div slot="text"> {connectionInfo.message ?? ''} </div>
-			</Popover>
-		{:else}
-			<Popover notClickable>
-				<span class="h-4 w-4 center-center">
-					<Circle class="text-red-600 animate-ping absolute inline-flex fill-current" size={12} />
-					<Circle class="text-red-600 relative inline-flex fill-current" size={12} />
-				</span>
-
-				<div slot="text"> {connectionInfo.message ?? ''} </div>
-			</Popover>
-		{/if}
-	</div>
-{/if}

package/package/components/common/alert/ConnectionIndicator.svelte.d.ts

@@ -1,20 +0,0 @@
-import { SvelteComponent } from "svelte";
-export type ConnectionInfo = {
-    connected: boolean;
-    message?: string;
-};
-declare const __propDef: {
-    props: {
-        connectionInfo?: ConnectionInfo | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ConnectionIndicatorProps = typeof __propDef.props;
-export type ConnectionIndicatorEvents = typeof __propDef.events;
-export type ConnectionIndicatorSlots = typeof __propDef.slots;
-export default class ConnectionIndicator extends SvelteComponent<ConnectionIndicatorProps, ConnectionIndicatorEvents, ConnectionIndicatorSlots> {
-}
-export {};

package/package/components/common/alert/Notification.svelte

@@ -1,15 +0,0 @@
-<script>export let notificationCount = 0;
-export let notificationLimit = undefined;
-</script>
-
-{#if notificationCount > 0}
-	<div
-		class="bg-red-500 text-white text-[0.6rem] rounded-md w-5 h-5 flex items-center justify-center"
-	>
-		{#if notificationLimit && notificationCount > notificationLimit}
-			{`${notificationLimit}+`}
-		{:else}
-			{notificationCount}
-		{/if}
-	</div>
-{/if}

package/package/components/common/alert/Notification.svelte.d.ts

@@ -1,17 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        notificationCount?: number | undefined;
-        notificationLimit?: number | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type NotificationProps = typeof __propDef.props;
-export type NotificationEvents = typeof __propDef.events;
-export type NotificationSlots = typeof __propDef.slots;
-export default class Notification extends SvelteComponent<NotificationProps, NotificationEvents, NotificationSlots> {
-}
-export {};

package/package/components/common/alert/model.d.ts

@@ -1 +0,0 @@
-export type AlertType = 'success' | 'error' | 'warning' | 'info';

package/package/components/common/alert/model.js

@@ -1 +0,0 @@
-export {};

package/package/components/common/badge/Badge.svelte

@@ -1,72 +0,0 @@
-<script>import { classNames } from '../../../utils';
-import { ColorModifier } from './model';
-import { X } from 'lucide-svelte';
-export let color = 'gray';
-export let large = false;
-export let small = false;
-export let href = '';
-export let rounded = false;
-export let dismissable = false;
-export let wrapperClass = '';
-export let baseClass = 'text-center';
-export let capitalize = false;
-export let icon = undefined;
-let hidden = false;
-const colors = {
-    gray: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
-    blue: 'bg-blue-100 text-blue-800 dark:bg-blue-200 dark:text-blue-800',
-    red: 'bg-red-100 text-red-800 dark:bg-red-200 dark:text-red-900',
-    green: 'bg-green-100 text-green-800 dark:bg-green-200 dark:text-green-900',
-    yellow: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-100 dark:text-yellow-900',
-    orange: 'bg-orange-100 text-orange-800 dark:bg-orange-100 dark:text-orange-900',
-    indigo: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900',
-    ['dark-gray']: 'bg-gray-500 text-gray-100',
-    ['dark-blue']: 'bg-blue-500 text-blue-100',
-    ['dark-red']: 'bg-red-500 text-white',
-    ['dark-green']: 'bg-green-500 text-green-100',
-    ['dark-yellow']: 'bg-yellow-300 text-yellow-800',
-    ['dark-indigo']: 'bg-indigo-500 text-indigo-100',
-    ['dark-orange']: 'bg-orange-500 text-orange-100'
-};
-const hovers = {
-    gray: 'hover:bg-gray-200 dark:hover:bg-gray-300',
-    blue: 'hover:bg-blue-200 dark:hover:bg-blue-300',
-    red: 'hover:bg-red-200 dark:hover:bg-red-300',
-    green: 'hover:bg-green-200 dark:hover:bg-green-300',
-    yellow: 'hover:bg-yellow-200 dark:hover:bg-yellow-300',
-    indigo: 'hover:bg-indigo-200 dark:hover:bg-indigo-300',
-    orange: 'hover:bg-orange-200 dark:hover:bg-orange-300'
-};
-$: badgeClass = classNames(baseClass, small ? 'text-xs' : large ? 'text-sm font-medium' : 'text-xs font-semibold', colors[color], href &&
-    (color.startsWith(ColorModifier) ? hovers[color.replace(ColorModifier, '')] : hovers[color]), rounded ? 'rounded-full px-2 py-1' : 'rounded px-2.5 py-0.5', 'flex flex-row gap-1 items-center', $$props.class);
-const handleHide = () => (hidden = !hidden);
-</script>
-
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<span
-	on:click
-	on:keydown
-	class="inline-flex justify-center items-center whitespace-nowrap {wrapperClass}"
->
-	<svelte:element
-		this={href ? 'a' : 'span'}
-		{href}
-		{...$$restProps}
-		class={badgeClass}
-		class:hidden
-		class:capitalize
-	>
-		{#if icon?.icon && icon.position === 'left'}
-			<svelte:component this={icon.icon} size={14} />
-		{/if}
-		<slot />
-		{#if icon?.icon && icon.position === 'right'}
-			<svelte:component this={icon.icon} size={14} />
-		{/if}
-		{#if dismissable}
-			<button on:click={handleHide}>
-				<X size={10} />
-			</button>
-		{/if}
-	</svelte:element>
-</span>

package/package/components/common/badge/Badge.svelte.d.ts

@@ -1,32 +0,0 @@
-import { SvelteComponent } from "svelte";
-import { type BadgeColor, type BadgeIconProps } from './model';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        color?: BadgeColor | undefined;
-        large?: boolean | undefined;
-        small?: boolean | undefined;
-        href?: string | undefined;
-        rounded?: boolean | undefined;
-        dismissable?: boolean | undefined;
-        wrapperClass?: string | undefined;
-        baseClass?: string | undefined;
-        capitalize?: boolean | undefined;
-        icon?: BadgeIconProps | undefined;
-    };
-    events: {
-        click: MouseEvent;
-        keydown: KeyboardEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type BadgeProps = typeof __propDef.props;
-export type BadgeEvents = typeof __propDef.events;
-export type BadgeSlots = typeof __propDef.slots;
-export default class Badge extends SvelteComponent<BadgeProps, BadgeEvents, BadgeSlots> {
-}
-export {};

package/package/components/common/badge/model.d.ts

@@ -1,8 +0,0 @@
-type BaseColor = 'blue' | 'gray' | 'red' | 'green' | 'yellow' | 'indigo' | 'orange';
-export declare const ColorModifier = "dark-";
-export type BadgeColor = BaseColor | `${typeof ColorModifier}${BaseColor}`;
-export interface BadgeIconProps {
-    position?: 'left' | 'right';
-    icon: any;
-}
-export {};

package/package/components/common/badge/model.js

@@ -1 +0,0 @@
-export const ColorModifier = 'dark-';

package/package/components/common/breadcrumb/Breadcrumb.svelte

@@ -1,24 +0,0 @@
-<script>import { createEventDispatcher } from 'svelte';
-import Button from '../button/Button.svelte';
-export let items;
-export let selectedIndex;
-export let disabled = false;
-const dispatch = createEventDispatcher();
-</script>
-
-<div class="flex items-center justify-center">
-	{#each items as item, index}
-		{#if index > 0}
-			<slot name="separator" />
-		{/if}
-		<Button
-			size="sm"
-			color="light"
-			btnClasses={selectedIndex - 1 === index ? 'text-gray-800 !font-bold' : '!text-tertiary'}
-			on:click={() => dispatch('select', { index })}
-			disabled={selectedIndex - 1 === index ? disabled : false}
-		>
-			{item}
-		</Button>
-	{/each}
-</div>

package/package/components/common/breadcrumb/Breadcrumb.svelte.d.ts

@@ -1,22 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        items: string[];
-        selectedIndex: number;
-        disabled?: boolean | undefined;
-    };
-    events: {
-        select: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        separator: {};
-    };
-};
-export type BreadcrumbProps = typeof __propDef.props;
-export type BreadcrumbEvents = typeof __propDef.events;
-export type BreadcrumbSlots = typeof __propDef.slots;
-export default class Breadcrumb extends SvelteComponent<BreadcrumbProps, BreadcrumbEvents, BreadcrumbSlots> {
-}
-export {};

package/package/components/common/button/AnimatedButton.svelte

@@ -1,85 +0,0 @@
-<script>import { twMerge } from 'tailwind-merge';
-import DarkModeObserver from '../../DarkModeObserver.svelte';
-export let marginWidth = '2px';
-export let animationDuration = '2s';
-export let baseRadius = '4px';
-export let animate = true;
-export let wrapperClasses = '';
-export let ringColor = 'transparent';
-export let darkMode = false;
-const gradientColors = {
-    light: ['#d6e5ff', '#0073ff', '#5aa2fa', '#0272fa', '#d6e5ff'],
-    dark: ['#0469db', '#15498a', '#031ea3', '#0073ff', '#0469db']
-};
-let clientWidth = 0;
-let clientHeight = 0;
-$: circleRadius = Math.ceil(Math.sqrt(clientWidth * clientWidth + clientHeight * clientHeight) / 2);
-$: gradientString = `from 0deg, ${gradientColors[darkMode ? 'dark' : 'light'].join(', ')}`;
-</script>
-
-<DarkModeObserver bind:darkMode />
-
-<div
-	class={twMerge('gradient-button', wrapperClasses)}
-	style="--margin-width: {marginWidth}; --animation-duration: {animationDuration}; --base-radius: {baseRadius}; --circle-radius: {circleRadius}; --ring-color: {ringColor}; --gradient: {gradientString}"
-	class:animate
-	bind:clientWidth
-	bind:clientHeight
->
-	<slot />
-</div>
-
-<style>
-	.gradient-button {
-		position: relative;
-		font-size: inherit;
-		border: none;
-		border-radius: calc(var(--base-radius) + var(--margin-width, 2px));
-		color: currentColor;
-		background: inherit;
-		z-index: 1;
-		overflow: hidden;
-		padding: var(--margin-width, 1px);
-	}
-
-	/* Circular gradient */
-	.gradient-button::before {
-		content: '';
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-		width: calc(var(--circle-radius, 300px) * 2px);
-		height: calc(var(--circle-radius, 300px) * 2px);
-		background: var(--ring-color, transparent);
-		border-radius: 50%;
-		z-index: -1;
-		animation: none;
-	}
-
-	.gradient-button.animate::before {
-		background: conic-gradient(var(--gradient));
-		animation: rotate var(--animation-duration, 2s) linear infinite;
-	}
-
-	/* inner background */
-	.gradient-button::after {
-		content: '';
-		position: absolute;
-		top: var(--margin-width, 2px);
-		right: var(--margin-width, 2px);
-		bottom: var(--margin-width, 2px);
-		left: var(--margin-width, 2px);
-		background: inherit;
-		border-radius: var(--base-radius);
-		z-index: -1;
-	}
-
-	@keyframes rotate {
-		from {
-			transform: translate(-50%, -50%) rotate(0deg);
-		}
-		to {
-			transform: translate(-50%, -50%) rotate(360deg);
-		}
-	}</style>

package/package/components/common/button/AnimatedButton.svelte.d.ts

@@ -1,24 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        marginWidth?: string | undefined;
-        animationDuration?: string | undefined;
-        baseRadius?: string | undefined;
-        animate?: boolean | undefined;
-        wrapperClasses?: string | undefined;
-        ringColor?: string | undefined;
-        darkMode?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type AnimatedButtonProps = typeof __propDef.props;
-export type AnimatedButtonEvents = typeof __propDef.events;
-export type AnimatedButtonSlots = typeof __propDef.slots;
-export default class AnimatedButton extends SvelteComponent<AnimatedButtonProps, AnimatedButtonEvents, AnimatedButtonSlots> {
-}
-export {};