windmill-components 1.60.3 → 1.70.0

package/components/apps/editor/settingsPanel/inputEditor/UploadInputEditor.svelte

@@ -0,0 +1,23 @@
+<script>import { FileInput } from "../../../../common";
+export let componentInput;
+</script>
+
+<FileInput
+	accept={componentInput?.fileUpload?.accept}
+	multiple={componentInput?.fileUpload?.multiple}
+	convertToBase64={componentInput?.fileUpload?.base64}
+	iconSize={24}
+	class="text-sm py-4"
+	on:change={({detail}) => {
+		if(componentInput) {
+			componentInput.value = componentInput?.fileUpload?.multiple
+				? detail
+				: detail?.[0]
+		}
+	}}
+>
+	<svelte:fragment slot="selected-title">
+		<!-- Removing the title when there is a selected file -->
+		<span></span>
+	</svelte:fragment>
+</FileInput>

package/components/apps/editor/settingsPanel/inputEditor/UploadInputEditor.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { UploadAppInput } from "../../../inputType";
+declare const __propDef: {
+    props: {
+        componentInput: UploadAppInput | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type UploadInputEditorProps = typeof __propDef.props;
+export type UploadInputEditorEvents = typeof __propDef.events;
+export type UploadInputEditorSlots = typeof __propDef.slots;
+export default class UploadInputEditor extends SvelteComponentTyped<UploadInputEditorProps, UploadInputEditorEvents, UploadInputEditorSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte

@@ -6,7 +6,7 @@ import InlineScriptList from './InlineScriptList.svelte';
 import WorkspaceScriptList from './WorkspaceScriptList.svelte';
 import WorkspaceFlowList from './WorkspaceFlowList.svelte';
 import { getContext } from 'svelte';
-import { loadSchema, schemaToInputsSpec } from '../../../utils';
+import { getAllScriptNames, loadSchema, schemaToInputsSpec } from '../../../utils';
 import { emptySchema } from '../../../../../utils';
 export let appInput;
 export let defaultUserInput = false;
@@ -72,26 +72,9 @@ function pickInlineScript(name) {
 function createScript() {
     let index = 0;
     let newScriptPath = `Inline Script ${index}`;
-    const names = $app.grid.reduce((acc, gridItem) => {
-        const { componentInput } = gridItem.data;
-        if (componentInput?.type === 'runnable' &&
-            componentInput?.runnable?.type === 'runnableByName') {
-            acc.push(componentInput.runnable.name);
-        }
-        if (componentInput?.type === 'tablecomponent') {
-            componentInput.actionButtons.forEach((actionButton) => {
-                if (actionButton.componentInput?.type === 'runnable') {
-                    if (actionButton.componentInput.runnable?.type === 'runnableByName') {
-                        acc.push(actionButton.componentInput.runnable.name);
-                    }
-                }
-            });
-        }
-        return acc;
-    }, []);
-    const unusedNames = $app.unusedInlineScripts.map((x) => x.name);
+    const names = getAllScriptNames($app);
     // Find a name that is not used by any other inline script
-    while (names.includes(newScriptPath) || unusedNames.includes(newScriptPath)) {
+    while (names.includes(newScriptPath)) {
         newScriptPath = `Inline Script ${++index}`;
     }
     appInput.runnable = {

package/components/apps/gridUtils.d.ts

@@ -4,10 +4,12 @@ declare const Breakpoints: {
     sm: number;
     lg: number;
 };
+declare const WIDE_GRID_COLUMNS: 12;
+declare const NARROW_GRID_COLUMNS: 3;
 declare const columnConfiguration: ColumnConfiguration;
 declare const gridColumns: number[];
 declare function disableDrag(component: GridItem): GridItem;
 declare function toggleFixed(component: GridItem): GridItem;
 declare function isFixed(component: GridItem): boolean;
 declare function enableDrag(component: GridItem): GridItem;
-export { gridColumns, columnConfiguration, disableDrag, enableDrag, Breakpoints, toggleFixed, isFixed };
+export { gridColumns, WIDE_GRID_COLUMNS, NARROW_GRID_COLUMNS, columnConfiguration, disableDrag, enableDrag, Breakpoints, toggleFixed, isFixed };

package/components/apps/gridUtils.js

@@ -2,9 +2,11 @@ const Breakpoints = {
     sm: 640,
     lg: 1024
 };
+const WIDE_GRID_COLUMNS = 12;
+const NARROW_GRID_COLUMNS = 3;
 const columnConfiguration = [
-    [Breakpoints.lg, 12],
-    [Breakpoints.sm, 3]
+    [Breakpoints.lg, WIDE_GRID_COLUMNS],
+    [Breakpoints.sm, NARROW_GRID_COLUMNS]
 ];
 const gridColumns = columnConfiguration.map((value) => value[1]);
 function disableDrag(component) {
@@ -37,4 +39,4 @@ function enableDrag(component) {
     });
     return component;
 }
-export { gridColumns, columnConfiguration, disableDrag, enableDrag, Breakpoints, toggleFixed, isFixed };
+export { gridColumns, WIDE_GRID_COLUMNS, NARROW_GRID_COLUMNS, columnConfiguration, disableDrag, enableDrag, Breakpoints, toggleFixed, isFixed };

package/components/apps/inputType.d.ts

@@ -1,6 +1,6 @@
 import type { staticValues } from './editor/componentsPanel/componentStaticValues';
 import type { InlineScript } from './types';
-export type InputType = 'text' | 'textarea' | 'template' | 'number' | 'boolean' | 'select' | 'date' | 'time' | 'datetime' | 'object' | 'array' | 'any';
+export type InputType = 'text' | 'textarea' | 'template' | 'number' | 'boolean' | 'select' | 'icon-select' | 'date' | 'time' | 'datetime' | 'object' | 'array' | 'any';
 export type InputConnection = {
     componentId: string;
     path: string;
@@ -13,6 +13,10 @@ export type UserInput<U> = {
     type: 'user';
     value: U | undefined;
 };
+export type UploadInput = {
+    type: 'upload';
+    value: string;
+};
 export type EvalInput = {
     type: 'eval';
     expr: string;
@@ -29,7 +33,7 @@ export type TemplateInput = {
     eval: string;
     type: 'template';
 };
-type RunnableByPath = {
+export type RunnableByPath = {
     path: string;
     schema: any;
     runType: 'script' | 'flow' | 'hubscript';
@@ -43,24 +47,44 @@ type RunnableByName = {
 export type Runnable = RunnableByPath | RunnableByName | undefined;
 export type ResultInput = {
     runnable: Runnable;
-    fields: Record<string, (StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput)>;
+    fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>;
     type: 'runnable';
     value?: any;
 };
-type AppInputSpec<T extends InputType, U, V extends InputType = never> = (StaticInput<U> | ConnectedInput | UserInput<U> | RowInput | EvalInput | ResultInput | TemplateInput) & InputConfiguration<T, U, V>;
+type AppInputSpec<T extends InputType, U, V extends InputType = never> = (StaticInput<U> | ConnectedInput | UserInput<U> | RowInput | EvalInput | UploadInput | ResultInput | TemplateInput) & InputConfiguration<T, U, V>;
 type InputConfiguration<T extends InputType, U, V extends InputType> = {
     fieldType: T;
     subFieldType?: V;
     format?: string | undefined;
+    fileUpload?: {
+        /** Use `*` to accept anything. */
+        accept: string;
+        /**
+         * Controls if user is allowed to select multiple files.
+         * @default false
+         */
+        multiple?: boolean;
+        /**
+         * Controls if the uploaded file(s) will be returned as `Base64` strings.
+         * @default false
+         */
+        base64?: boolean;
+    };
+};
+type StaticOptions = {
+    /**
+     * One of the keys of `staticValues` from `lib/components/apps/editor/componentsPanel/componentStaticValues`
+     */
+    optionValuesKey: keyof typeof staticValues;
 };
 export type AppInput = AppInputSpec<'text', string> | AppInputSpec<'textarea', string> | AppInputSpec<'template', string> | AppInputSpec<'number', number> | AppInputSpec<'boolean', boolean> | AppInputSpec<'date', string> | AppInputSpec<'time', string> | AppInputSpec<'datetime', string> | AppInputSpec<'any', any> | AppInputSpec<'object', Record<string | number, any>> | AppInputSpec<'object', string> | (AppInputSpec<'select', string> & {
     /**
      * One of the keys of `staticValues` from `lib/components/apps/editor/componentsPanel/componentStaticValues`
      */
     optionValuesKey: keyof typeof staticValues;
-}) | AppInputSpec<'array', string[], 'text'> | AppInputSpec<'array', string[], 'textarea'> | AppInputSpec<'array', number[], 'number'> | AppInputSpec<'array', boolean[], 'boolean'> | AppInputSpec<'array', string[], 'date'> | AppInputSpec<'array', string[], 'time'> | AppInputSpec<'array', string[], 'datetime'> | AppInputSpec<'array', object[], 'object'> | (AppInputSpec<'array', string[], 'select'> & {
+}) | (AppInputSpec<'select', string> & StaticOptions) | AppInputSpec<'icon-select', string> | AppInputSpec<'array', string[], 'text'> | AppInputSpec<'array', string[], 'textarea'> | AppInputSpec<'array', number[], 'number'> | AppInputSpec<'array', boolean[], 'boolean'> | AppInputSpec<'array', string[], 'date'> | AppInputSpec<'array', string[], 'time'> | AppInputSpec<'array', string[], 'datetime'> | AppInputSpec<'array', object[], 'object'> | (AppInputSpec<'array', string[], 'select'> & {
     optionValuesKey: keyof typeof staticValues;
-});
+}) | (AppInputSpec<'array', string[], 'select'> & StaticOptions);
 export type RowAppInput = Extract<AppInput, {
     type: 'row';
 }>;
@@ -79,5 +103,8 @@ export type ResultAppInput = Extract<AppInput, {
 export type EvalAppInput = Extract<AppInput, {
     type: 'eval';
 }>;
+export type UploadAppInput = Extract<AppInput, {
+    type: 'upload';
+}>;
 export type AppInputs = Record<string, AppInput>;
 export {};

package/components/apps/types.d.ts

@@ -1,65 +1,43 @@
 import type { Schema } from '../../common';
 import type { Preview } from '../../gen';
-import type { FilledItem } from 'svelte-grid';
+import type { FilledItem } from '@windmill-labs/svelte-grid';
 import type { Writable } from 'svelte/store';
-import type { AppInput, ConnectedAppInput, ConnectedInput, EvalAppInput, RowAppInput, StaticAppInput, UserAppInput } from './inputType';
+import type { AppComponent } from './editor/component/components';
+import type { AppInput, ConnectedAppInput, ConnectedInput, EvalAppInput, RowAppInput, StaticAppInput, UploadAppInput, UserAppInput } from './inputType';
 import type { World } from './rx';
-type BaseComponent<T extends string> = {
-    type: T;
-};
-export type TextComponent = BaseComponent<'textcomponent'>;
-export type TextInputComponent = BaseComponent<'textinputcomponent'>;
-export type PasswordInputComponent = BaseComponent<'passwordinputcomponent'>;
-export type DateInputComponent = BaseComponent<'dateinputcomponent'>;
-export type NumberInputComponent = BaseComponent<'numberinputcomponent'>;
-export type SliderComponent = BaseComponent<'slidercomponent'>;
-export type HtmlComponent = BaseComponent<'htmlcomponent'>;
-export type TimeseriesComponent = BaseComponent<'timeseriescomponent'>;
-export type ButtonComponent = BaseComponent<'buttoncomponent'> & {
-    recomputeIds: string[] | undefined;
-};
-export type FormComponent = BaseComponent<'formcomponent'> & {
-    recomputeIds: string[] | undefined;
-};
-export type RunFormComponent = BaseComponent<'runformcomponent'>;
-export type BarChartComponent = BaseComponent<'barchartcomponent'>;
-export type PieChartComponent = BaseComponent<'piechartcomponent'>;
-export type ScatterChartComponent = BaseComponent<'scatterchartcomponent'>;
-export type TableComponent = 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 GeneralAppInput {
+    onlyStatic?: boolean;
+    evaluatedValue?: boolean;
+    tooltip?: string;
+}
+export type ComponentCssProperty = {
+    class: string;
+    style: string;
+};
+export type ComponentCustomCSS<T extends string = string> = Record<T, ComponentCssProperty>;
 export interface BaseAppComponent extends Partial<Aligned> {
     id: ComponentID;
     componentInput: AppInput | undefined;
-    configuration: Record<string, (StaticAppInput | ConnectedAppInput | UserAppInput | RowAppInput | EvalAppInput) & {
-        onlyStatic?: boolean;
-        evaluatedValue?: boolean;
-        tooltip?: string;
-    }>;
+    configuration: Record<string, GeneralAppInput & (StaticAppInput | ConnectedAppInput | UserAppInput | RowAppInput | EvalAppInput | UploadAppInput)>;
     card: boolean | undefined;
+    customCss?: ComponentCustomCSS;
     /**
      * If `true` then the wrapper will allow items to flow outside of it's borders.
      *
      * *For example when the component has a popup like `Select`*
      */
     softWrap?: boolean;
+    numberOfSubgrids?: number;
 }
-export type AppComponent = BaseAppComponent & (RunFormComponent | DisplayComponent | TextInputComponent | PasswordInputComponent | DateInputComponent | NumberInputComponent | SliderComponent | BarChartComponent | TimeseriesComponent | HtmlComponent | TableComponent | TextComponent | TableComponent | ButtonComponent | PieChartComponent | ScatterChartComponent | ImageComponent | InputComponent | SelectComponent | CheckboxComponent | RadioComponent | FormComponent);
 export type ComponentSet = {
     title: string;
-    components: AppComponent[];
+    components: Readonly<AppComponent['type'][]>;
 };
 type SectionID = string;
 export type AppSection = {
@@ -83,6 +61,13 @@ export type App = {
         name: string;
         inlineScript: InlineScript;
     }>;
+    hiddenInlineScripts: Array<{
+        name: string;
+        inlineScript: InlineScript | undefined;
+        fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>;
+    }>;
+    css?: Record<'viewer' | 'grid' | AppComponent['type'], ComponentCustomCSS>;
+    subgrids?: Record<string, GridItem[]>;
 };
 export type ConnectingInput = {
     opened: boolean;
@@ -111,8 +96,19 @@ export type AppEditorContext = {
         component: string;
     }[]>;
     noBackend: boolean;
+    errorByComponent: Writable<Record<string, {
+        error: string;
+        componentId: string;
+    }>>;
+    openDebugRun: Writable<((componentID: string) => void) | undefined>;
+    focusedGrid: Writable<FocusedGrid | undefined>;
+};
+export type FocusedGrid = {
+    parentComponentId: string;
+    subGridIndex: number;
 };
 export type EditorMode = 'dnd' | 'preview';
 export type EditorBreakpoint = 'sm' | 'lg';
+export declare const IS_APP_PUBLIC_CONTEXT_KEY: "isAppPublicContext";
 type ComponentID = string;
 export {};

package/components/apps/types.js

@@ -1 +1 @@
-export {};
+export const IS_APP_PUBLIC_CONTEXT_KEY = 'isAppPublicContext';

package/components/apps/utils.d.ts

@@ -1,13 +1,11 @@
 import type { Schema } from '../../common';
 import type { AppInput, InputType, ResultAppInput, StaticAppInput } from './inputType';
 import type { Output } from './rx';
-import type { App, AppComponent } from './types';
+import type { App, GridItem } from './types';
+export declare function allItems(grid: GridItem[], subgrids: Record<string, GridItem[]> | undefined): GridItem[];
+export declare function allItemsWithParent(grid: GridItem[], subgrids: Record<string, GridItem[]> | undefined): [GridItem, string | undefined][];
 export declare function loadSchema(workspace: string, path: string, runType: 'script' | 'flow' | 'hubscript'): Promise<Schema>;
 export declare function schemaToInputsSpec(schema: Schema, defaultUserInput: boolean): Record<string, StaticAppInput>;
-export declare const displayData: Record<AppComponent['type'], {
-    name: string;
-    icon: any;
-}>;
 export declare function accessPropertyByPath<T>(object: T, path: string): T | undefined;
 export declare function fieldTypeToTsType(inputType: InputType): string;
 export declare function isScriptByNameDefined(appInput: AppInput | undefined): boolean;
@@ -18,3 +16,6 @@ export declare function toStatic(app: App, staticExporter: Record<string, () =>
     summary: string;
 };
 export declare function buildExtraLib(components: Record<string, Record<string, Output<any>>>, idToExclude: string, hasRows: boolean): string;
+export declare function getAllScriptNames(app: App): string[];
+export declare function toPascalCase(text: string): string;
+export declare function toKebabCase(text: string): string;

package/components/apps/utils.js

@@ -1,7 +1,60 @@
 import { FlowService, ScriptService } from '../../gen';
 import { inferArgs } from '../../infer';
 import { emptySchema } from '../../utils';
-import { BarChart4, Binary, CircleDot, FormInput, Inspect, List, Monitor, PieChart, Play, Table2, Image, TextCursorInput, Type, Lock, Calendar, ToggleLeft, GripHorizontal, Code2, SlidersHorizontal } from 'lucide-svelte';
+/*
+export function deleteComponent(
+    subgrid: string | undefined,
+    component: AppComponent,
+    app: App,
+    staticOutputs: Record<string, any>,
+    runnableComponents: Record<string, any>
+) {
+    if (parentItems) {
+        let index = parentItems.findIndex((item) => item.data?.id === component.id)
+        if (index != -1) {
+            parentItems.splice(index, 1)
+        }
+    }
+
+    delete staticOutputs[component.id]
+    delete runnableComponents[component.id]
+
+    if (
+        component.componentInput?.type === 'runnable' &&
+        component.componentInput?.runnable?.type === 'runnableByName'
+    ) {
+        const { name, inlineScript } = component.componentInput.runnable
+
+        if (inlineScript) {
+            if (!app.unusedInlineScripts) {
+                app.unusedInlineScripts = []
+            }
+
+            app.unusedInlineScripts.push({
+                name,
+                inlineScript
+            })
+        }
+    }
+}
+
+*/
+export function allItems(grid, subgrids) {
+    if (subgrids == undefined) {
+        return grid;
+    }
+    return [...grid, ...Object.values(subgrids).flat()];
+}
+export function allItemsWithParent(grid, subgrids) {
+    const items = grid.map((item) => [item, undefined]);
+    if (subgrids == undefined) {
+        return items;
+    }
+    return [
+        ...items,
+        ...Object.entries(subgrids).flatMap(([k, v]) => v.map((g) => [g, k]))
+    ];
+}
 export async function loadSchema(workspace, path, runType) {
     if (runType === 'script') {
         const script = await ScriptService.getScriptByPath({
@@ -21,7 +74,9 @@ export async function loadSchema(workspace, path, runType) {
         const script = await ScriptService.getHubScriptByPath({
             path
         });
-        if (script.schema == undefined || Object.keys(script.schema).length == 0 || typeof script.schema != 'object') {
+        if (script.schema == undefined ||
+            Object.keys(script.schema).length == 0 ||
+            typeof script.schema != 'object') {
             script.schema = emptySchema();
         }
         await inferArgs(script.language, script.content, script.schema);
@@ -43,92 +98,6 @@ export function schemaToInputsSpec(schema, defaultUserInput) {
         return accu;
     }, {});
 }
-export const displayData = {
-    displaycomponent: {
-        name: 'Result',
-        icon: Monitor
-    },
-    textcomponent: {
-        name: 'Text',
-        icon: Type
-    },
-    buttoncomponent: {
-        name: 'Button',
-        icon: Inspect
-    },
-    formcomponent: {
-        name: 'Form',
-        icon: FormInput
-    },
-    piechartcomponent: {
-        name: 'Pie Chart',
-        icon: PieChart
-    },
-    barchartcomponent: {
-        name: 'Bar/Line Chart',
-        icon: BarChart4
-    },
-    htmlcomponent: {
-        name: 'Html',
-        icon: Code2
-    },
-    timeseriescomponent: {
-        name: 'Timeseries',
-        icon: GripHorizontal
-    },
-    scatterchartcomponent: {
-        name: 'Scatter Chart',
-        icon: GripHorizontal
-    },
-    tablecomponent: {
-        name: 'Table',
-        icon: Table2
-    },
-    checkboxcomponent: {
-        name: 'Toggle',
-        icon: ToggleLeft
-    },
-    textinputcomponent: {
-        name: 'Text input',
-        icon: TextCursorInput
-    },
-    imagecomponent: {
-        name: 'Image',
-        icon: Image
-    },
-    inputcomponent: {
-        name: 'Input',
-        icon: FormInput
-    },
-    radiocomponent: {
-        name: 'Radio button',
-        icon: CircleDot
-    },
-    runformcomponent: {
-        name: 'Run form',
-        icon: Play
-    },
-    selectcomponent: {
-        name: 'Select',
-        icon: List
-    },
-    numberinputcomponent: {
-        name: 'Number',
-        icon: Binary
-    },
-    slidercomponent: {
-        name: 'Slider',
-        icon: SlidersHorizontal
-    },
-    passwordinputcomponent: {
-        name: 'Password',
-        icon: Lock
-    },
-    dateinputcomponent: {
-        name: 'Date input',
-        icon: Calendar
-    }
-};
 export function accessPropertyByPath(object, path) {
     // convert indexes to properties
     path = path.replace(/\[(\w+)\]/g, '.$1');
@@ -199,7 +168,7 @@ export function toStatic(app, staticExporter, summary) {
     return { app: newApp, summary };
 }
 export function buildExtraLib(components, idToExclude, hasRows) {
-    return Object.entries(components)
+    return (Object.entries(components)
         .filter(([k, v]) => k != idToExclude)
         .map(([k, v]) => [k, Object.fromEntries(Object.entries(v).map(([k, v]) => [k, v.peak()]))])
         .map(([k, v]) => `
@@ -207,5 +176,36 @@ export function buildExtraLib(components, idToExclude, hasRows) {
 declare const ${k} = ${JSON.stringify(v)};
 
 `)
-        .join('\n') + (hasRows ? 'declare const row: Record<string, any>;' : '');
+        .join('\n') + (hasRows ? 'declare const row: Record<string, any>;' : ''));
+}
+export function getAllScriptNames(app) {
+    const names = app.grid.reduce((acc, gridItem) => {
+        const { componentInput } = gridItem.data;
+        if (componentInput?.type === 'runnable' &&
+            componentInput?.runnable?.type === 'runnableByName') {
+            acc.push(componentInput.runnable.name);
+        }
+        if (componentInput?.type === 'tablecomponent') {
+            componentInput.actionButtons.forEach((actionButton) => {
+                if (actionButton.componentInput?.type === 'runnable') {
+                    if (actionButton.componentInput.runnable?.type === 'runnableByName') {
+                        acc.push(actionButton.componentInput.runnable.name);
+                    }
+                }
+            });
+        }
+        return acc;
+    }, []);
+    const unusedNames = app.unusedInlineScripts.map((x) => x.name);
+    const backgroundNames = app.hiddenInlineScripts?.map((x) => x.name) ?? [];
+    return [...names, ...unusedNames, ...backgroundNames];
+}
+function clearAndUpper(text) {
+    return text.replace(/-/, '').toUpperCase();
+}
+export function toPascalCase(text) {
+    return text.replace(/(^\w|-\w)/g, clearAndUpper);
+}
+export function toKebabCase(text) {
+    return text.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
 }

package/components/common/button/Button.svelte

@@ -1,9 +1,9 @@
 <script>import { createEventDispatcher } from 'svelte';
-import { classNames } from '../../../utils';
 import Icon from 'svelte-awesome';
 import { ButtonType } from './model';
 import { goto } from '$app/navigation';
 import { Loader2 } from 'lucide-svelte';
+import { twMerge } from 'tailwind-merge';
 export let size = 'md';
 export let spacingSize = size;
 export let color = 'blue';
@@ -21,9 +21,14 @@ export let nonCaptureEvent = false;
 export let buttonType = 'button';
 export let loading = false;
 export let title = undefined;
+export let style = '';
 const dispatch = createEventDispatcher();
 // Order of classes: border, border modifier, bg, bg modifier, text, text modifier, everything else
 const colorVariants = {
+    none: {
+        border: '',
+        contained: ''
+    },
     blue: {
         border: 'border-frost-500 hover:border-frost-700 focus:border-frost-700 bg-white hover:bg-frost-100 focus:bg-frost-100 text-frost-500 hover:text-frost-700 focus:text-frost-700 focus:ring-frost-300',
         contained: 'bg-frost-500 hover:bg-frost-700 focus:bg-frost-700 text-white focus:ring-frost-300'
@@ -51,12 +56,13 @@ const colorVariants = {
 };
 $: buttonProps = {
     id,
-    class: classNames(colorVariants?.[color]?.[variant], variant === 'border' ? 'border' : '', ButtonType.FontSizeClasses[size], ButtonType.SpacingClasses[spacingSize], 'focus:ring-2 font-semibold', 'duration-200 rounded-md', 'justify-center items-center text-center whitespace-nowrap inline-flex', btnClasses, disabled ? '!bg-gray-300 !text-gray-600 !cursor-not-allowed' : ''),
+    class: twMerge(colorVariants?.[color]?.[variant], variant === 'border' ? 'border' : '', ButtonType.FontSizeClasses[size], ButtonType.SpacingClasses[spacingSize][variant], 'focus:ring-2 font-semibold', 'rounded-md', 'justify-center items-center text-center whitespace-nowrap inline-flex', btnClasses, disabled ? '!bg-gray-300 !text-gray-600 !cursor-not-allowed' : ''),
     href,
     target,
     tabindex: disabled ? -1 : 0,
     type: buttonType,
-    title
+    title,
+    ...$$restProps
 };
 async function onClick(event) {
     if (!nonCaptureEvent) {
@@ -76,8 +82,8 @@ async function onClick(event) {
     }
 }
 $: isSmall = size === 'xs' || size === 'sm';
-$: startIconClass = classNames(iconOnly ? undefined : isSmall ? 'mr-1' : 'mr-2', startIcon?.classes);
-$: endIconClass = classNames(iconOnly ? undefined : isSmall ? 'ml-1' : 'ml-2', endIcon?.classes);
+$: startIconClass = twMerge(iconOnly ? undefined : isSmall ? 'mr-1' : 'mr-2', startIcon?.classes);
+$: endIconClass = twMerge(iconOnly ? undefined : isSmall ? 'ml-1' : 'ml-2', endIcon?.classes);
 </script>
 
 <svelte:element
@@ -90,6 +96,7 @@ $: endIconClass = classNames(iconOnly ? undefined : isSmall ? 'ml-1' : 'ml-2', e
 	{...buttonProps}
 	disabled={disabled || loading}
 	type="submit"
+	{style}
 >
 	{#if loading}
 		<Loader2 class="animate-spin mr-1" size={14} />

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

@@ -3,9 +3,10 @@ import Icon from 'svelte-awesome';
 import { ButtonType } from './model';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         size?: ButtonType.Size | undefined;
         spacingSize?: ButtonType.Size | undefined;
-        color?: "blue" | "gray" | "red" | "green" | "dark" | "light" | undefined;
+        color?: "none" | "blue" | "gray" | "red" | "green" | "dark" | "light" | undefined;
         variant?: ButtonType.Variant | undefined;
         btnClasses?: string | undefined;
         disabled?: boolean | undefined;
@@ -20,6 +21,7 @@ declare const __propDef: {
         buttonType?: "reset" | "submit" | "button" | undefined;
         loading?: boolean | undefined;
         title?: string | undefined;
+        style?: string | undefined;
     };
     events: {
         pointerdown: PointerEvent;

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

@@ -4,7 +4,7 @@ import { ButtonType } from '..';
 declare const __propDef: {
     props: {
         size?: ButtonType.Size | undefined;
-        color?: "blue" | "gray" | "red" | "green" | "dark" | "light" | undefined;
+        color?: "none" | "blue" | "gray" | "red" | "green" | "dark" | "light" | undefined;
         variant?: ButtonType.Variant | undefined;
         mainClasses?: string | undefined;
         toggleClasses?: string | undefined;

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

@@ -1,4 +1,4 @@
-export declare const BUTTON_COLORS: readonly ["blue", "red", "dark", "light", "green", "gray"];
+export declare const BUTTON_COLORS: readonly ["blue", "red", "dark", "light", "green", "gray", "none"];
 export declare namespace ButtonType {
     type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     type Color = typeof BUTTON_COLORS[number];
@@ -10,7 +10,7 @@ export declare namespace ButtonType {
         classes?: string;
     }
     const FontSizeClasses: Record<ButtonType.Size, string>;
-    const SpacingClasses: Record<ButtonType.Size, string>;
+    const SpacingClasses: Record<ButtonType.Size, Record<ButtonType.Variant, string>>;
     const IconScale: Record<ButtonType.Size, number>;
     const ItemContextKey: "popupItemProps";
     interface ItemProps {