windmill-components 1.46.3 → 1.52.0

package/components/apps/types.d.ts

@@ -0,0 +1,120 @@
+import type { Schema } from '../../common';
+import type { Preview } from '../../gen';
+import type { FilledItem } from 'svelte-grid';
+import type { Writable } from 'svelte/store';
+import type { staticValues } from './editor/componentsPanel/componentStaticValues';
+import type { World } from './rx';
+export type UserInput<T, V> = {
+    type: 'user';
+    value: V | undefined;
+    defaultValue: V;
+    fieldType: T;
+};
+export type DynamicInput<T, V> = {
+    type: 'output';
+    id: FieldID | undefined;
+    name: string | undefined;
+    defaultValue: V;
+    fieldType: T;
+};
+export type InputType = 'text' | 'textarea' | 'number' | 'boolean' | 'select' | 'date' | 'time' | 'datetime' | 'object';
+export type StaticInput<T, V> = {
+    value: V | undefined;
+    type: 'static';
+    visible?: boolean;
+    defaultValue: V;
+    fieldType: T;
+};
+type AppInput<T extends InputType, V> = StaticInput<T, V> | DynamicInput<T, V> | UserInput<T, V>;
+export type AppInputTransform = AppInput<'text', string> | AppInput<'textarea', string> | AppInput<'number', number> | AppInput<'boolean', boolean> | (AppInput<'select', string> & {
+    /**
+     * One of the keys of `staticValues` from `lib/components/apps/editor/componentsPanel/componentStaticValues`
+     */
+    optionValuesKey: keyof typeof staticValues;
+}) | AppInput<'date', string> | AppInput<'time', string> | AppInput<'datetime', string> | AppInput<'object', Record<string | number, any>>;
+export type InputsSpec = Record<FieldID, AppInputTransform>;
+type Runnable = {
+    inlineScriptName?: string;
+    path?: string;
+    runType?: 'script' | 'flow';
+};
+type BaseComponent<T extends string> = {
+    type: T;
+};
+export type TextComponent = BaseComponent<'textcomponent'>;
+export type TextInputComponent = BaseComponent<'textinputcomponent'>;
+export type ButtonComponent = Runnable & BaseComponent<'buttoncomponent'>;
+export type RunFormComponent = Runnable & BaseComponent<'runformcomponent'>;
+export type BarChartComponent = BaseComponent<'barchartcomponent'>;
+export type PieChartComponent = Runnable & BaseComponent<'piechartcomponent'>;
+export type TableComponent = Runnable & BaseComponent<'tablecomponent'> & {
+    actionButtons: (BaseAppComponent & ButtonComponent)[];
+};
+export type DisplayComponent = BaseComponent<'displaycomponent'>;
+export type ImageComponent = BaseComponent<'imagecomponent'>;
+export type InputComponent = BaseComponent<'inputcomponent'>;
+export type SelectComponent = BaseComponent<'selectcomponent'>;
+export type CheckboxComponent = BaseComponent<'checkboxcomponent'>;
+export type RadioComponent = BaseComponent<'radiocomponent'>;
+export type HorizontalAlignment = 'left' | 'center' | 'right';
+export type VerticalAlignment = 'top' | 'center' | 'bottom';
+export type Aligned = {
+    horizontalAlignment: HorizontalAlignment;
+    verticalAlignment: VerticalAlignment;
+};
+export interface BaseAppComponent extends Partial<Aligned> {
+    id: ComponentID;
+    inputs: InputsSpec;
+    componentInputs: InputsSpec;
+    runnable?: boolean | undefined;
+    card?: boolean | undefined;
+}
+export type AppComponent = BaseAppComponent & (RunFormComponent | DisplayComponent | TextInputComponent | BarChartComponent | TableComponent | TextComponent | TableComponent | ButtonComponent | PieChartComponent | ImageComponent | InputComponent | SelectComponent | CheckboxComponent | RadioComponent);
+export type ComponentSet = {
+    title: string;
+    components: AppComponent[];
+};
+type SectionID = string;
+export type AppSection = {
+    components: AppComponent[];
+    id: SectionID;
+};
+export type GridItem = FilledItem<{
+    data: AppComponent;
+    id: string;
+}>;
+export type InlineScript = {
+    content: string;
+    language: Preview.language;
+    path: string;
+    schema: Schema;
+};
+export type App = {
+    grid: GridItem[];
+    inlineScripts: Record<string, InlineScript>;
+    title: string;
+};
+export type ConnectingInput<T, V> = {
+    opened: boolean;
+    input?: DynamicInput<T, V>;
+};
+export type AppEditorContext = {
+    worldStore: Writable<World | undefined>;
+    staticOutputs: Writable<Record<string, string[]>>;
+    app: Writable<App>;
+    selectedComponent: Writable<string | undefined>;
+    mode: Writable<EditorMode>;
+    connectingInput: Writable<ConnectingInput<any, any>>;
+    breakpoint: Writable<EditorBreakpoint>;
+};
+export type EditorMode = 'dnd' | 'preview';
+export type EditorBreakpoint = 'sm' | 'lg';
+type FieldID = string;
+type ComponentID = string;
+export type EditorConfig = {
+    staticInputDisabled: boolean;
+    outputInputDisabled: boolean;
+    userInputEnabled: boolean;
+    visibiltyEnabled: boolean;
+};
+export {};

package/components/apps/types.js

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

package/components/apps/utils.d.ts

@@ -0,0 +1,36 @@
+import type { InputsSpec, InputType } from './types';
+import type { Schema } from '../../common';
+export declare function loadSchema(workspace: string, path: string, runType: 'script' | 'flow'): Promise<Schema>;
+export declare function schemaToInputsSpec(schema: Schema): InputsSpec;
+export declare const displayData: {
+    displaycomponent: {
+        name: string;
+        icon: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    };
+    textcomponent: {
+        name: string;
+        icon: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    };
+    buttoncomponent: {
+        name: string;
+        icon: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    };
+    piechartcomponent: {
+        name: string;
+        icon: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    };
+    barchartcomponent: {
+        name: string;
+        icon: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    };
+    tablecomponent: {
+        name: string;
+        icon: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    };
+    checkboxcomponent: {
+        name: string;
+        icon: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    };
+};
+export declare function accessPropertyByPath<T>(object: T, path: string): T | undefined;
+export declare function fieldTypeToTsType(InputType: InputType): string;

package/components/apps/utils.js

@@ -0,0 +1,96 @@
+import { FlowService, ScriptService } from '../../gen';
+import { faBarChart, faDisplay, faFile, faMobileScreenButton, faPieChart } from '@fortawesome/free-solid-svg-icons';
+export async function loadSchema(workspace, path, runType) {
+    if (runType === 'script') {
+        const script = await ScriptService.getScriptByPath({
+            workspace,
+            path
+        });
+        return script.schema;
+    }
+    else {
+        const flow = await FlowService.getFlowByPath({
+            workspace,
+            path
+        });
+        return flow.schema;
+    }
+}
+export function schemaToInputsSpec(schema) {
+    return Object.keys(schema.properties).reduce((accu, key) => {
+        const property = schema.properties[key];
+        accu[key] = {
+            type: 'static',
+            defaultValue: property.default,
+            value: undefined,
+            visible: true,
+            fieldType: property.type
+        };
+        return accu;
+    }, {});
+}
+export const displayData = {
+    displaycomponent: {
+        name: 'Result',
+        icon: faDisplay
+    },
+    textcomponent: {
+        name: 'Text',
+        icon: faFile
+    },
+    buttoncomponent: {
+        name: 'Button',
+        icon: faMobileScreenButton
+    },
+    piechartcomponent: {
+        name: 'Pie chart',
+        icon: faPieChart
+    },
+    barchartcomponent: {
+        name: 'Bar chart',
+        icon: faBarChart
+    },
+    tablecomponent: {
+        name: 'Table',
+        icon: faBarChart
+    },
+    checkboxcomponent: {
+        name: 'Checkbox',
+        icon: faBarChart
+    }
+};
+export function accessPropertyByPath(object, path) {
+    // convert indexes to properties
+    path = path.replace(/\[(\w+)\]/g, '.$1');
+    // strip a leading dot
+    path = path.replace(/^\./, '');
+    let a = path.split('.');
+    for (let i = 0, depth = a.length; i < depth; ++i) {
+        let key = a[i];
+        if (object[key]) {
+            object = object[key];
+        }
+        else {
+            // Value not found
+            return;
+        }
+    }
+    return object;
+}
+export function fieldTypeToTsType(InputType) {
+    switch (InputType) {
+        case 'text':
+        case 'textarea':
+        case 'date':
+        case 'time':
+        case 'datetime':
+        case 'select':
+            return 'string';
+        case 'number':
+            return 'number';
+        case 'boolean':
+            return 'boolean';
+        case 'object':
+            return 'object';
+    }
+}

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

@@ -14,9 +14,9 @@ declare const __propDef: {
         right: {};
     };
 };
-export declare type ActionRowProps = typeof __propDef.props;
-export declare type ActionRowEvents = typeof __propDef.events;
-export declare type ActionRowSlots = typeof __propDef.slots;
+export type ActionRowProps = typeof __propDef.props;
+export type ActionRowEvents = typeof __propDef.events;
+export type ActionRowSlots = typeof __propDef.slots;
 export default class ActionRow extends SvelteComponentTyped<ActionRowProps, ActionRowEvents, ActionRowSlots> {
 }
 export {};

package/components/common/alert/Alert.svelte

@@ -3,6 +3,7 @@ import { faCheckCircle, faInfoCircle, faWarning } from '@fortawesome/free-solid-
 import Icon from 'svelte-awesome';
 export let type = 'info';
 export let title;
+export let size = 'sm';
 const icons = {
     info: faInfoCircle,
     warning: faWarning,
@@ -11,25 +12,25 @@ const icons = {
 };
 const classes = {
     info: {
-        bgClass: 'bg-blue-50',
+        bgClass: 'bg-blue-50 border-blue-200 border',
         iconClass: 'text-blue-500',
         titleClass: 'text-blue-800',
         descriptionClass: 'text-blue-700'
     },
     warning: {
-        bgClass: 'bg-yellow-50',
+        bgClass: 'bg-yellow-50 border-yellow-200 border',
         iconClass: 'text-yellow-500',
         titleClass: 'text-yellow-800',
         descriptionClass: 'text-yellow-700'
     },
     error: {
-        bgClass: 'bg-red-50',
+        bgClass: 'bg-red-50 border-red-200 border',
         iconClass: 'text-red-500',
         titleClass: 'text-red-800',
         descriptionClass: 'text-red-700'
     },
     success: {
-        bgClass: 'bg-green-50',
+        bgClass: 'bg-green-50 border-green-200 border',
         iconClass: 'text-green-500',
         titleClass: 'text-green-800',
         descriptionClass: 'text-green-700'
@@ -37,15 +38,36 @@ const classes = {
 };
 </script>
 
-<div class={classNames('rounded-md p-4', classes[type].bgClass, $$props.class)}>
+<div
+	class={classNames(
+		'rounded-md',
+		size === 'sm' ? 'p-4' : 'p-2 ',
+		classes[type].bgClass,
+		$$props.class
+	)}
+>
 	<div class="flex">
 		<div class="flex h-8 w-8 items-center justify-center rounded-full">
 			<Icon data={icons[type]} class={classes[type].iconClass} />
 		</div>
 
 		<div class="ml-2 w-full">
-			<span class={classNames('text-sm font-medium', classes[type].titleClass)}>{title}</span>
-			<div class={classNames('mt-2 text-sm', classes[type].descriptionClass)}>
+			<span
+				class={classNames(
+					size === 'sm' ? 'text-sm' : 'text-xs ',
+					'font-medium',
+					classes[type].titleClass
+				)}
+			>
+				{title}
+			</span>
+			<div
+				class={classNames(
+					size === 'sm' ? 'text-sm' : 'text-xs ',
+					'mt-2',
+					classes[type].descriptionClass
+				)}
+			>
 				<slot />
 			</div>
 		</div>

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

@@ -5,6 +5,7 @@ declare const __propDef: {
         [x: string]: any;
         type?: AlertType | undefined;
         title: string;
+        size?: "xs" | "sm" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -13,9 +14,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type AlertProps = typeof __propDef.props;
-export declare type AlertEvents = typeof __propDef.events;
-export declare type AlertSlots = typeof __propDef.slots;
+export type AlertProps = typeof __propDef.props;
+export type AlertEvents = typeof __propDef.events;
+export type AlertSlots = typeof __propDef.slots;
 export default class Alert extends SvelteComponentTyped<AlertProps, AlertEvents, AlertSlots> {
 }
 export {};

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

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

package/components/common/badge/Badge.svelte

@@ -6,9 +6,8 @@ export let color = 'gray';
 export let large = false;
 export let href = '';
 export let rounded = false;
-export let index = false;
 export let dismissable = false;
-export let baseClass = 'text-center -mb-0.5';
+export let baseClass = 'text-center';
 export let capitalize = false;
 export let icon = undefined;
 let defaulIconProps = {
@@ -40,15 +39,12 @@ const hovers = {
     indigo: 'hover:bg-indigo-200 dark:hover:bg-indigo-300'
 };
 $: badgeClass = classNames(baseClass, 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', index
-    ? 'absolute flex justify-center items-center font-bold overflow-hidden border-2 border-white dark:border-gray-900' +
-        (large ? 'w-7 h-7 -top-3.5 -right-3.5' : 'w-6 h-6 -top-3 -right-3')
-    : '', $$props.class);
+    (color.startsWith(ColorModifier) ? hovers[color.replace(ColorModifier, '')] : hovers[color]), rounded ? 'rounded-full px-2 py-1' : 'rounded px-2.5 py-0.5', $$props.class);
 $: iconProps = icon ? { ...defaulIconProps, ...icon } : { data: undefined };
 const handleHide = () => (hidden = !hidden);
 </script>
 
-<span class="inline-flex justify-center items-center whitespace-nowrap">
+<span on:click on:keydown class="inline-flex justify-center items-center whitespace-nowrap">
 	<svelte:element
 		this={href ? 'a' : 'span'}
 		{href}

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

@@ -7,22 +7,24 @@ declare const __propDef: {
         large?: boolean | undefined;
         href?: string | undefined;
         rounded?: boolean | undefined;
-        index?: boolean | undefined;
         dismissable?: boolean | undefined;
         baseClass?: string | undefined;
         capitalize?: boolean | undefined;
         icon?: BadgeIconProps | undefined;
     };
     events: {
+        click: MouseEvent;
+        keydown: KeyboardEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
         default: {};
     };
 };
-export declare type BadgeProps = typeof __propDef.props;
-export declare type BadgeEvents = typeof __propDef.events;
-export declare type BadgeSlots = typeof __propDef.slots;
+export type BadgeProps = typeof __propDef.props;
+export type BadgeEvents = typeof __propDef.events;
+export type BadgeSlots = typeof __propDef.slots;
 export default class Badge extends SvelteComponentTyped<BadgeProps, BadgeEvents, BadgeSlots> {
 }
 export {};

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

@@ -1,7 +1,7 @@
 import type { IconProps } from 'svelte-awesome/components/Icon.svelte';
-declare type BaseColor = 'blue' | 'gray' | 'red' | 'green' | 'yellow' | 'indigo';
+type BaseColor = 'blue' | 'gray' | 'red' | 'green' | 'yellow' | 'indigo';
 export declare const ColorModifier = "dark-";
-export declare type BadgeColor = BaseColor | `${typeof ColorModifier}${BaseColor}`;
+export type BadgeColor = BaseColor | `${typeof ColorModifier}${BaseColor}`;
 export interface BadgeIconProps extends IconProps {
     position?: 'left' | 'right';
 }

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

@@ -14,9 +14,9 @@ declare const __propDef: {
         separator: {};
     };
 };
-export declare type BreadcrumbProps = typeof __propDef.props;
-export declare type BreadcrumbEvents = typeof __propDef.events;
-export declare type BreadcrumbSlots = typeof __propDef.slots;
+export type BreadcrumbProps = typeof __propDef.props;
+export type BreadcrumbEvents = typeof __propDef.events;
+export type BreadcrumbSlots = typeof __propDef.slots;
 export default class Breadcrumb extends SvelteComponentTyped<BreadcrumbProps, BreadcrumbEvents, BreadcrumbSlots> {
 }
 export {};

package/components/common/button/Button.svelte

@@ -3,6 +3,7 @@ import { classNames } from '../../../utils';
 import Icon from 'svelte-awesome';
 import { ButtonType } from './model';
 import { goto } from '$app/navigation';
+import { faArrowsRotate, faSpinner } from '@fortawesome/free-solid-svg-icons';
 export let size = 'md';
 export let spacingSize = size;
 export let color = 'blue';
@@ -17,6 +18,8 @@ export let endIcon = undefined;
 export let element = undefined;
 export let id = '';
 export let nonCaptureEvent = false;
+export let buttonType = 'button';
+export let loading = false;
 const dispatch = createEventDispatcher();
 // Order of classes: border, border modifier, bg, bg modifier, text, text modifier, everything else
 const colorVariants = {
@@ -36,6 +39,10 @@ const colorVariants = {
         border: 'border-gray-800 hover:border-gray-900 focus:border-gray-900 bg-white hover:bg-gray-200 focus:bg-gray-200 text-gray-800 hover:text-gray-900 focus:text-gray-900 focus:ring-gray-300',
         contained: 'bg-gray-700 hover:bg-gray-900 focus:bg-gray-900 text-white focus:ring-gray-300'
     },
+    gray: {
+        border: 'border-gray-600 hover:border-gray-900 focus:border-gray-900 bg-white hover:bg-gray-200 focus:bg-gray-200 text-gray-800 hover:text-gray-900 focus:text-gray-900 focus:ring-gray-300',
+        contained: 'bg-gray-700/90 hover:bg-gray-900/90 focus:bg-gray-900/90 text-white focus:ring-gray-300'
+    },
     light: {
         border: 'border border-gray-300 bg-white hover:bg-gray-100 focus:bg-gray-100 text-gray-700 hover:text-gray-800 focus:text-gray-800 focus:ring-gray-300',
         contained: 'bg-white border-gray-300  hover:bg-gray-100 focus:bg-gray-100 text-gray-700 focus:ring-gray-300'
@@ -43,13 +50,13 @@ const colorVariants = {
 };
 $: buttonProps = {
     id,
-    class: classNames(colorVariants[color][variant], variant === 'border' ? 'border' : '', ButtonType.FontSizeClasses[size], ButtonType.SpacingClasses[spacingSize], 'focus:ring-4 font-semibold', 'rounded-md', 'justify-center items-center text-center whitespace-nowrap inline-flex', btnClasses, disabled ? 'bg-gray-300' : ''),
-    disabled,
+    class: classNames(colorVariants[color][variant], variant === 'border' ? 'border' : '', ButtonType.FontSizeClasses[size], ButtonType.SpacingClasses[spacingSize], 'focus:ring-2 font-semibold', 'rounded-md', 'justify-center items-center text-center whitespace-nowrap inline-flex', btnClasses, disabled ? 'bg-gray-300' : ''),
     href,
     target,
-    tabindex: disabled ? -1 : 0
+    tabindex: disabled ? -1 : 0,
+    type: buttonType
 };
-function onClick(event) {
+async function onClick(event) {
     if (!nonCaptureEvent) {
         event.preventDefault();
         dispatch('click', event);
@@ -58,7 +65,9 @@ function onClick(event) {
                 window.open(href, target);
             }
             else {
-                goto(href);
+                loading = true;
+                await goto(href);
+                loading = false;
             }
         }
     }
@@ -75,10 +84,19 @@ $: endIconClass = classNames(iconOnly ? undefined : isSmall ? 'ml-1' : 'ml-2', e
 	on:focus
 	on:blur
 	{...buttonProps}
+	disabled={disabled || loading}
+	type="submit"
 >
-	{#if startIcon}
+	{#if loading}
+		<Icon
+			data={faSpinner}
+			class={`animate-spin ${startIconClass}`}
+			scale={ButtonType.IconScale[size]}
+		/>
+	{:else if startIcon}
 		<Icon data={startIcon.icon} class={startIconClass} scale={ButtonType.IconScale[size]} />
 	{/if}
+
 	{#if !iconOnly}
 		<slot />
 	{/if}

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

@@ -5,7 +5,7 @@ declare const __propDef: {
     props: {
         size?: ButtonType.Size | undefined;
         spacingSize?: ButtonType.Size | undefined;
-        color?: ButtonType.Color | undefined;
+        color?: "blue" | "gray" | "red" | "green" | "dark" | "light" | undefined;
         variant?: ButtonType.Variant | undefined;
         btnClasses?: string | undefined;
         disabled?: boolean | undefined;
@@ -17,6 +17,8 @@ declare const __propDef: {
         element?: ButtonType.Element | undefined;
         id?: string | undefined;
         nonCaptureEvent?: boolean | undefined;
+        buttonType?: "reset" | "submit" | "button" | undefined;
+        loading?: boolean | undefined;
     };
     events: {
         focus: FocusEvent;
@@ -29,9 +31,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type ButtonProps = typeof __propDef.props;
-export declare type ButtonEvents = typeof __propDef.events;
-export declare type ButtonSlots = typeof __propDef.slots;
+export type ButtonProps = typeof __propDef.props;
+export type ButtonEvents = typeof __propDef.events;
+export type ButtonSlots = typeof __propDef.slots;
 export default class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {
 }
 export {};

package/components/common/button/ButtonPopup.svelte

@@ -12,6 +12,7 @@ export let href = undefined;
 export let target = '_self';
 export let startIcon = undefined;
 export let endIcon = undefined;
+export let spacingSize = size;
 let ref;
 setContext(ButtonType.ItemContextKey, { size, color });
 $: separator = color === 'red' || color === 'blue' ? 'border-gray-200' : 'border-gray-400';
@@ -19,7 +20,8 @@ $: commonProps = {
     size,
     color,
     variant,
-    disabled
+    disabled,
+    spacingSize
 };
 </script>
 

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

@@ -4,7 +4,7 @@ import { ButtonType } from '..';
 declare const __propDef: {
     props: {
         size?: ButtonType.Size | undefined;
-        color?: ButtonType.Color | undefined;
+        color?: "blue" | "gray" | "red" | "green" | "dark" | "light" | undefined;
         variant?: ButtonType.Variant | undefined;
         mainClasses?: string | undefined;
         toggleClasses?: string | undefined;
@@ -13,6 +13,7 @@ declare const __propDef: {
         target?: ButtonType.Target | undefined;
         startIcon?: ButtonType.Icon | undefined;
         endIcon?: ButtonType.Icon | undefined;
+        spacingSize?: ButtonType.Size | undefined;
     };
     events: {
         click: CustomEvent<any>;
@@ -25,9 +26,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type ButtonPopupProps = typeof __propDef.props;
-export declare type ButtonPopupEvents = typeof __propDef.events;
-export declare type ButtonPopupSlots = typeof __propDef.slots;
+export type ButtonPopupProps = typeof __propDef.props;
+export type ButtonPopupEvents = typeof __propDef.events;
+export type ButtonPopupSlots = typeof __propDef.slots;
 export default class ButtonPopup extends SvelteComponentTyped<ButtonPopupProps, ButtonPopupEvents, ButtonPopupSlots> {
 }
 export {};

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

@@ -19,9 +19,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type ButtonPopupItemProps = typeof __propDef.props;
-export declare type ButtonPopupItemEvents = typeof __propDef.events;
-export declare type ButtonPopupItemSlots = typeof __propDef.slots;
+export type ButtonPopupItemProps = typeof __propDef.props;
+export type ButtonPopupItemEvents = typeof __propDef.events;
+export type ButtonPopupItemSlots = typeof __propDef.slots;
 export default class ButtonPopupItem extends SvelteComponentTyped<ButtonPopupItemProps, ButtonPopupItemEvents, ButtonPopupItemSlots> {
 }
 export {};

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

@@ -1,6 +1,7 @@
+export declare const BUTTON_COLORS: readonly ["blue", "red", "dark", "light", "green", "gray"];
 export declare namespace ButtonType {
     type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    type Color = 'blue' | 'red' | 'dark' | 'light' | 'green';
+    type Color = typeof BUTTON_COLORS[number];
     type Variant = 'contained' | 'border';
     type Target = '_self' | '_blank';
     type Element = HTMLButtonElement | HTMLAnchorElement;

package/components/common/button/model.js

@@ -1,3 +1,4 @@
+export const BUTTON_COLORS = ['blue', 'red', 'dark', 'light', 'green', 'gray'];
 export var ButtonType;
 (function (ButtonType) {
     ButtonType.FontSizeClasses = {
@@ -10,7 +11,7 @@ export var ButtonType;
     ButtonType.SpacingClasses = {
         xs: 'px-3 py-1.5',
         sm: 'px-3 py-1.5',
-        md: 'px-4 py-2',
+        md: 'px-3 py-1.5',
         lg: 'px-4 py-2',
         xl: 'px-4 py-2'
     };

package/components/common/confirmationModal/ConfirmationModal.svelte.d.ts

@@ -15,9 +15,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type ConfirmationModalProps = typeof __propDef.props;
-export declare type ConfirmationModalEvents = typeof __propDef.events;
-export declare type ConfirmationModalSlots = typeof __propDef.slots;
+export type ConfirmationModalProps = typeof __propDef.props;
+export type ConfirmationModalEvents = typeof __propDef.events;
+export type ConfirmationModalSlots = typeof __propDef.slots;
 export default class ConfirmationModal extends SvelteComponentTyped<ConfirmationModalProps, ConfirmationModalEvents, ConfirmationModalSlots> {
 }
 export {};