windmill-components 1.60.3 → 1.70.0

package/components/apps/components/{textInputs → inputs}/AppTextInput.svelte

@@ -1,5 +1,6 @@
 <script>import { getContext } from 'svelte';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import InputDefaultValue from '../helpers/InputDefaultValue.svelte';
 import InputValue from '../helpers/InputValue.svelte';
 export let id;
 export let configuration;
@@ -9,16 +10,21 @@ export const staticOutputs = ['result'];
 const { worldStore } = getContext('AppEditorContext');
 let input;
 let placeholder = undefined;
+let defaultValue = undefined;
 $: outputs = $worldStore?.outputsById[id];
 function handleInput() {
     outputs?.result.set(input.value);
 }
+$: input && handleInput();
 </script>
 
 <InputValue {id} input={configuration.placeholder} bind:value={placeholder} />
+<InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
+<InputDefaultValue bind:input {defaultValue} />
 
 <AlignWrapper {verticalAlignment}>
 	<input
+		class="mx-0.5"
 		on:focus={(e) => {
 			e?.stopPropagation()
 			window.dispatchEvent(new Event('pointerup'))

package/components/apps/components/inputs/currency/AppCurrencyInput.svelte

@@ -0,0 +1,49 @@
+<script>import { getContext } from 'svelte';
+import AlignWrapper from '../../helpers/AlignWrapper.svelte';
+import InputValue from '../../helpers/InputValue.svelte';
+import CurrencyInput from './CurrencyInput.svelte';
+export let id;
+export let configuration;
+export let verticalAlignment = undefined;
+export const staticOutputs = ['result'];
+const { worldStore } = getContext('AppEditorContext');
+let defaultValue = undefined;
+let isNegativeAllowed = undefined;
+let currency = undefined;
+let locale = undefined;
+let value = undefined;
+$: outputs = $worldStore?.outputsById[id];
+function handleInput() {
+    outputs?.result.set(value ?? null);
+}
+function handleDefault() {
+    value = defaultValue;
+    handleInput();
+}
+$: value != undefined && handleInput();
+$: defaultValue != undefined && handleDefault();
+</script>
+
+<InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
+<InputValue {id} input={configuration.isNegativeAllowed} bind:value={isNegativeAllowed} />
+<InputValue {id} input={configuration.currency} bind:value={currency} />
+<InputValue {id} input={configuration.locale} bind:value={locale} />
+
+<AlignWrapper {verticalAlignment}>
+	{#key isNegativeAllowed}
+		{#key locale}
+			{#key currency}
+				<CurrencyInput
+					inputClasses={{ formatted: 'p-0', wrapper: 'w-full', formattedZero: 'text-black' }}
+					bind:value
+					{currency}
+					{locale}
+					on:focus={(e) => {
+						e?.stopPropagation()
+					}}
+					{isNegativeAllowed}
+				/>
+			{/key}
+		{/key}
+	{/key}
+</AlignWrapper>

package/components/apps/components/inputs/currency/AppCurrencyInput.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../../inputType';
+declare const __propDef: {
+    props: {
+        id: string;
+        configuration: Record<string, AppInput>;
+        verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+        staticOutputs?: string[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppCurrencyInputProps = typeof __propDef.props;
+export type AppCurrencyInputEvents = typeof __propDef.events;
+export type AppCurrencyInputSlots = typeof __propDef.slots;
+export default class AppCurrencyInput extends SvelteComponentTyped<AppCurrencyInputProps, AppCurrencyInputEvents, AppCurrencyInputSlots> {
+    get staticOutputs(): string[];
+}
+export {};

package/components/apps/components/inputs/currency/CurrencyInput.svelte

@@ -0,0 +1,181 @@
+<script>/* Forked from MIT LICENSE
+https://raw.githubusercontent.com/Canutin/svelte-currency-input/main/src/lib/CurrencyInput.svelte
+*/
+const DEFAULT_LOCALE = 'en-US';
+const DEFAULT_CURRENCY = 'USD';
+const DEFAULT_NAME = 'total';
+const DEFAULT_VALUE = 0;
+const DEFAULT_FRACTION_DIGITS = 2;
+const DEFAULT_CLASS_WRAPPER = 'currencyInput';
+const DEFAULT_CLASS_UNFORMATTED = 'currencyInput__unformatted';
+const DEFAULT_CLASS_FORMATTED = 'currencyInput__formatted';
+const DEFAULT_CLASS_FORMATTED_POSITIVE = 'currencyInput__formatted--positive';
+const DEFAULT_CLASS_FORMATTED_NEGATIVE = 'currencyInput__formatted--negative';
+const DEFAULT_CLASS_FORMATTED_ZERO = 'currencyInput__formatted--zero';
+export let value = DEFAULT_VALUE;
+export let locale = DEFAULT_LOCALE;
+export let currency = DEFAULT_CURRENCY;
+export let name = DEFAULT_NAME;
+export let required = false;
+export let disabled = false;
+export let placeholder = DEFAULT_VALUE;
+export let isNegativeAllowed = true;
+export let fractionDigits = DEFAULT_FRACTION_DIGITS;
+export let inputClasses = null;
+// Formats value as: e.g. $1,523.00 | -$1,523.00
+const formatCurrency = (value, maximumFractionDigits, minimumFractionDigits) => {
+    return new Intl.NumberFormat(locale, {
+        currency: currency,
+        style: 'currency',
+        maximumFractionDigits: maximumFractionDigits || 0,
+        minimumFractionDigits: minimumFractionDigits || 0
+    }).format(value);
+};
+// Checks if the key pressed is allowed
+const handleKeyDown = (event) => {
+    const isDeletion = event.key === 'Backspace' || event.key === 'Delete';
+    const isModifier = event.metaKey || event.altKey || event.ctrlKey;
+    const isArrowKey = event.key === 'ArrowLeft' || event.key === 'ArrowRight';
+    const isTab = event.key === 'Tab';
+    const isInvalidCharacter = !/^\d|,|\.|-$/g.test(event.key); // Keys that are not a digit, comma, period or minus sign
+    if (!isDeletion && !isModifier && !isArrowKey && isInvalidCharacter && !isTab)
+        event.preventDefault();
+};
+let inputTarget;
+const currencyDecimal = new Intl.NumberFormat(locale).format(1.1).charAt(1); // '.' or ','
+const isDecimalComma = currencyDecimal === ',';
+const currencySymbol = formatCurrency(0, 0)
+    .replace('0', '') // e.g. '$0' > '$'
+    .replace(/\u00A0/, ''); // e.g '0 €' > '€'
+// Updates `value` by stripping away the currency formatting
+const setUnformattedValue = (event) => {
+    if (event) {
+        // Don't format if the user is typing a `currencyDecimal` point
+        if (event.key === currencyDecimal)
+            return;
+        // Pressing `.` when the decimal point is `,` gets replaced with `,`
+        if (isDecimalComma && event.key === '.')
+            formattedValue = formattedValue.replace(/\.([^.]*)$/, currencyDecimal + '$1'); // Only replace the last occurence
+        // Pressing `,` when the decimal point is `.` gets replaced with `.`
+        if (!isDecimalComma && event.key === ',')
+            formattedValue = formattedValue.replace(/\,([^,]*)$/, currencyDecimal + '$1'); // Only replace the last occurence
+        // Don't format if `formattedValue` is ['$', '-$', "-"]
+        const ignoreSymbols = [currencySymbol, `-${currencySymbol}`, '-'];
+        const strippedUnformattedValue = formattedValue.replace(' ', '');
+        if (ignoreSymbols.includes(strippedUnformattedValue))
+            return;
+        // Set the starting caret positions
+        inputTarget = event.target;
+        // Reverse the value when minus is pressed
+        if (isNegativeAllowed && event.key === '-')
+            value = value * -1;
+    }
+    // Remove all characters that arent: numbers, commas, periods (or minus signs if `isNegativeAllowed`)
+    let unformattedValue = isNegativeAllowed
+        ? formattedValue.replace(/[^0-9,.-]/g, '')
+        : formattedValue.replace(/[^0-9,.]/g, '');
+    // Finally set the value
+    if (Number.isNaN(parseFloat(unformattedValue))) {
+        value = 0;
+    }
+    else {
+        // The order of the following operations is *critical*
+        unformattedValue = unformattedValue.replace(isDecimalComma ? /\./g : /\,/g, ''); // Remove all group symbols
+        if (isDecimalComma)
+            unformattedValue = unformattedValue.replace(',', '.'); // If the decimal point is a comma, replace it with a period
+        // If the zero-key has been pressed
+        // and if the current `value` is the same as the `value` before the key-press
+        // formatting may need to be done (Issue #30)
+        const previousValue = value;
+        value = parseFloat(unformattedValue);
+        if (event && previousValue === value) {
+            // Do the formatting if the number of digits after the decimal point exceeds `fractionDigits`
+            if (unformattedValue.includes('.') &&
+                unformattedValue.split('.')[1].length > fractionDigits) {
+                setFormattedValue();
+            }
+        }
+    }
+};
+const setFormattedValue = () => {
+    // Previous caret position
+    const startCaretPosition = inputTarget?.selectionStart || 0;
+    const previousFormattedValueLength = formattedValue.length;
+    // Apply formatting to input
+    formattedValue = formatCurrency(value, fractionDigits, 0);
+    // Update `value` after formatting
+    setUnformattedValue();
+    // New caret position
+    const endCaretPosition = startCaretPosition + formattedValue.length - previousFormattedValueLength;
+    // HACK:
+    // Delay setting the new caret position until the input has been formatted
+    setTimeout(() => {
+        inputTarget?.setSelectionRange(endCaretPosition, endCaretPosition);
+    }, 0.1);
+};
+let formattedValue = '';
+let formattedPlaceholder = placeholder !== null ? formatCurrency(placeholder, fractionDigits, fractionDigits) : '';
+$: isZero = value === 0;
+$: isNegative = value < 0;
+$: value, setFormattedValue();
+</script>
+
+<div class={inputClasses?.wrapper ?? DEFAULT_CLASS_WRAPPER}>
+	<input
+		class={inputClasses?.unformatted ?? DEFAULT_CLASS_UNFORMATTED}
+		type="hidden"
+		{name}
+		{disabled}
+		bind:value
+	/>
+	<input
+		class="
+			{inputClasses?.formatted ?? DEFAULT_CLASS_FORMATTED}
+			{isNegativeAllowed && !isZero && !isNegative
+			? inputClasses?.formattedPositive ?? DEFAULT_CLASS_FORMATTED_POSITIVE
+			: ''}
+			{isZero ? inputClasses?.formattedZero ?? DEFAULT_CLASS_FORMATTED_ZERO : ''}
+			{isNegativeAllowed && isNegative
+			? inputClasses?.formattedNegative ?? DEFAULT_CLASS_FORMATTED_NEGATIVE
+			: ''}
+		"
+		type="text"
+		inputmode="numeric"
+		name={`formatted-${name}`}
+		required={required && !isZero}
+		placeholder={formattedPlaceholder}
+		{disabled}
+		bind:value={formattedValue}
+		on:keydown={handleKeyDown}
+		on:keyup={setUnformattedValue}
+		on:blur={setFormattedValue}
+	/>
+</div>
+
+<style>
+	input.currencyInput__formatted {
+		border: 1px solid #e2e2e2;
+		padding: 10px;
+		box-sizing: border-box;
+	}
+
+	input.currencyInput__formatted--zero {
+		color: #333;
+	}
+
+	input.currencyInput__formatted--positive {
+		--tw-text-opacity: 1;
+		color: rgb(21 128 61 / var(--tw-text-opacity));
+}
+
+	input.currencyInput__formatted--negative {
+		--tw-text-opacity: 1;
+		color: rgb(239 68 68 / var(--tw-text-opacity));
+}
+
+	input.currencyInput__formatted:disabled {
+		color: #999;
+		background-color: #e2e2e2;
+		pointer-events: none;
+		cursor: default;
+	}</style>

package/components/apps/components/inputs/currency/CurrencyInput.svelte.d.ts

@@ -0,0 +1,32 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        value?: number | undefined;
+        locale?: string | undefined;
+        currency?: string | undefined;
+        name?: string | undefined;
+        required?: boolean | undefined;
+        disabled?: boolean | undefined;
+        placeholder?: number | null | undefined;
+        isNegativeAllowed?: boolean | undefined;
+        fractionDigits?: number | undefined;
+        inputClasses?: {
+            wrapper?: string | undefined;
+            unformatted?: string | undefined;
+            formatted?: string | undefined;
+            formattedPositive?: string | undefined;
+            formattedNegative?: string | undefined;
+            formattedZero?: string | undefined;
+        } | null | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CurrencyInputProps = typeof __propDef.props;
+export type CurrencyInputEvents = typeof __propDef.events;
+export type CurrencyInputSlots = typeof __propDef.slots;
+export default class CurrencyInput extends SvelteComponentTyped<CurrencyInputProps, CurrencyInputEvents, CurrencyInputSlots> {
+}
+export {};

package/components/apps/components/inputs/index.d.ts

@@ -0,0 +1,9 @@
+export { default as AppCheckbox } from './AppCheckbox.svelte';
+export { default as AppCurrencyInput } from './currency/AppCurrencyInput.svelte';
+export { default as AppDateInput } from './AppDateInput.svelte';
+export { default as AppFileInput } from './AppFileInput.svelte';
+export { default as AppNumberInput } from './AppNumberInput.svelte';
+export { default as AppRangeInput } from './AppRangeInput.svelte';
+export { default as AppSelect } from './AppSelect.svelte';
+export { default as AppSliderInputs } from './AppSliderInputs.svelte';
+export { default as AppTextInput } from './AppTextInput.svelte';

package/components/apps/components/inputs/index.js

@@ -0,0 +1,9 @@
+export { default as AppCheckbox } from './AppCheckbox.svelte';
+export { default as AppCurrencyInput } from './currency/AppCurrencyInput.svelte';
+export { default as AppDateInput } from './AppDateInput.svelte';
+export { default as AppFileInput } from './AppFileInput.svelte';
+export { default as AppNumberInput } from './AppNumberInput.svelte';
+export { default as AppRangeInput } from './AppRangeInput.svelte';
+export { default as AppSelect } from './AppSelect.svelte';
+export { default as AppSliderInputs } from './AppSliderInputs.svelte';
+export { default as AppTextInput } from './AppTextInput.svelte';

package/components/apps/components/layout/AppContainer.svelte

@@ -0,0 +1,32 @@
+<script>import { getContext } from 'svelte';
+import SubGridEditor from '../../editor/SubGridEditor.svelte';
+import InputValue from '../helpers/InputValue.svelte';
+export let id;
+export let configuration;
+export let componentContainerHeight;
+let noPadding = undefined;
+export const staticOutputs = [];
+const { app, focusedGrid, selectedComponent } = getContext('AppEditorContext');
+let gridContent = undefined;
+function onFocus() {
+    $focusedGrid = {
+        parentComponentId: id,
+        subGridIndex: 0
+    };
+}
+$: $selectedComponent === id && onFocus();
+</script>
+
+<InputValue {id} input={configuration.noPadding} bind:value={noPadding} />
+<InputValue {id} input={configuration.gridContent} bind:value={gridContent} />
+
+{#if $app.subgrids?.[`${id}-0`]}
+	<SubGridEditor
+		{noPadding}
+		bind:subGrid={$app.subgrids[`${id}-0`]}
+		containerHeight={componentContainerHeight}
+		on:focus={() => {
+			$selectedComponent = id
+		}}
+	/>
+{/if}

package/components/apps/components/layout/AppContainer.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+declare const __propDef: {
+    props: {
+        id: string;
+        configuration: Record<string, AppInput>;
+        componentContainerHeight: number;
+        staticOutputs?: string[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppContainerProps = typeof __propDef.props;
+export type AppContainerEvents = typeof __propDef.events;
+export type AppContainerSlots = typeof __propDef.slots;
+export default class AppContainer extends SvelteComponentTyped<AppContainerProps, AppContainerEvents, AppContainerSlots> {
+    get staticOutputs(): string[];
+}
+export {};

package/components/apps/components/layout/AppDivider.svelte

@@ -0,0 +1,20 @@
+<script>import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import InputValue from '../helpers/InputValue.svelte';
+export let id;
+export let configuration;
+export let horizontalAlignment = undefined;
+export let verticalAlignment = undefined;
+export let position;
+let size = 2;
+let color = '#00000060';
+</script>
+
+<InputValue {id} input={configuration.size} bind:value={size} />
+<InputValue {id} input={configuration.color} bind:value={color} />
+
+<AlignWrapper {horizontalAlignment} {verticalAlignment} class="h-full">
+	<div
+		class="rounded-full {position === 'horizontal' ? 'w-full' : 'h-full'}"
+		style="{position === 'horizontal' ? 'height' : 'width'}: {size}px; background-color: {color}"
+	/>
+</AlignWrapper>

package/components/apps/components/layout/AppDivider.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+import type { HorizontalAlignment, VerticalAlignment } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        configuration: Record<string, AppInput>;
+        horizontalAlignment?: HorizontalAlignment | undefined;
+        verticalAlignment?: VerticalAlignment | undefined;
+        position: 'horizontal' | 'vertical';
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppDividerProps = typeof __propDef.props;
+export type AppDividerEvents = typeof __propDef.events;
+export type AppDividerSlots = typeof __propDef.slots;
+export default class AppDivider extends SvelteComponentTyped<AppDividerProps, AppDividerEvents, AppDividerSlots> {
+}
+export {};

package/components/apps/components/layout/AppTabs.svelte

@@ -0,0 +1,58 @@
+<script>import { Tab, Tabs } from '../../../common';
+import { getContext } from 'svelte';
+import SubGridEditor from '../../editor/SubGridEditor.svelte';
+import InputValue from '../helpers/InputValue.svelte';
+export let id;
+export let configuration;
+export let componentContainerHeight;
+export let tabs;
+export const staticOutputs = ['selectedTabIndex'];
+const { app, worldStore, focusedGrid, selectedComponent } = getContext('AppEditorContext');
+let selected = '';
+let noPadding = undefined;
+$: selectedIndex = tabs?.indexOf(selected) ?? -1;
+$: if ((tabs && selected === '') || !tabs.includes(selected)) {
+    selected = tabs[0];
+}
+$: outputs = $worldStore?.outputsById[id];
+function handleTabSelection() {
+    outputs?.selectedTabIndex.set(selectedIndex);
+}
+$: selectedIndex >= 0 && handleTabSelection();
+let tabHeight = 0;
+function onFocus() {
+    $focusedGrid = {
+        parentComponentId: id,
+        subGridIndex: selectedIndex ?? 0
+    };
+}
+$: $selectedComponent === id && selectedIndex >= 0 && onFocus();
+</script>
+
+<InputValue {id} input={configuration.tabs} bind:value={tabs} />
+<InputValue {id} input={configuration.noPadding} bind:value={noPadding} />
+
+<div>
+	<div bind:clientHeight={tabHeight} on:pointerdown|stopPropagation>
+		<Tabs bind:selected>
+			{#each tabs ?? [] as res}
+				<Tab value={res}>
+					<span class="font-semibold">{res}</span>
+				</Tab>
+			{/each}
+		</Tabs>
+	</div>
+	{#if $app.subgrids}
+		{#each tabs ?? [] as res, i}
+			<SubGridEditor
+				visible={i === selectedIndex}
+				bind:subGrid={$app.subgrids[`${id}-${i}`]}
+				{noPadding}
+				containerHeight={componentContainerHeight - tabHeight}
+				on:focus={() => {
+					$selectedComponent = id
+				}}
+			/>
+		{/each}
+	{/if}
+</div>

package/components/apps/components/layout/AppTabs.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+declare const __propDef: {
+    props: {
+        id: string;
+        configuration: Record<string, AppInput>;
+        componentContainerHeight: number;
+        tabs: string[];
+        staticOutputs?: string[] | undefined;
+    };
+    events: {
+        pointerdown: PointerEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppTabsProps = typeof __propDef.props;
+export type AppTabsEvents = typeof __propDef.events;
+export type AppTabsSlots = typeof __propDef.slots;
+export default class AppTabs extends SvelteComponentTyped<AppTabsProps, AppTabsEvents, AppTabsSlots> {
+    get staticOutputs(): string[];
+}
+export {};

package/components/apps/components/layout/index.d.ts

@@ -0,0 +1,3 @@
+export { default as AppContainer } from './AppContainer.svelte';
+export { default as AppDivider } from './AppDivider.svelte';
+export { default as AppTabs } from './AppTabs.svelte';

package/components/apps/components/layout/index.js

@@ -0,0 +1,3 @@
+export { default as AppContainer } from './AppContainer.svelte';
+export { default as AppDivider } from './AppDivider.svelte';
+export { default as AppTabs } from './AppTabs.svelte';

package/components/apps/editor/AppComponentInput.svelte

@@ -0,0 +1,33 @@
+<script>import { components } from './component';
+import InputsSpecsEditor from './settingsPanel/InputsSpecsEditor.svelte';
+export let component;
+export let resourceOnly = false;
+</script>
+
+{#if component?.componentInput?.type === 'runnable' && Object.keys(component?.componentInput?.fields ?? {}).length > 0}
+	<div class="mb-8 border p-2">
+		<div class="flex justify-between mb-4">
+			<span class="text-sm font-bold">{component.id}</span>
+			<span class="text-sm font-bold">{components[component.type].name}</span>
+		</div>
+
+		{#if resourceOnly && Object.keys(component.componentInput.fields).filter((fieldKey) => {
+				if (component?.componentInput?.type === 'runnable') {
+					const fields = component.componentInput?.fields
+					const field = fields[fieldKey]
+					return field.fieldType === 'object' && field.format?.startsWith('resource-')
+				}
+				return false
+			}).length === 0}
+			<span class="text-sm text-gray-600">No resource input</span>
+		{:else}
+			<InputsSpecsEditor
+				id={component.id}
+				shouldCapitalize={false}
+				bind:inputSpecs={component.componentInput.fields}
+				userInputEnabled={component.type !== 'buttoncomponent'}
+				{resourceOnly}
+			/>
+		{/if}
+	</div>
+{/if}

package/components/apps/editor/AppComponentInput.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import { type AppComponent } from './component';
+declare const __propDef: {
+    props: {
+        component: AppComponent;
+        resourceOnly?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppComponentInputProps = typeof __propDef.props;
+export type AppComponentInputEvents = typeof __propDef.events;
+export type AppComponentInputSlots = typeof __propDef.slots;
+export default class AppComponentInput extends SvelteComponentTyped<AppComponentInputProps, AppComponentInputEvents, AppComponentInputSlots> {
+}
+export {};

package/components/apps/editor/AppComponentInputs.svelte

@@ -0,0 +1,13 @@
+<script>import InputsSpecsEditor from './settingsPanel/InputsSpecsEditor.svelte';
+export let fields;
+export let component;
+export let resourceOnly = false;
+$: fields = resourceOnly ? fields : fields;
+</script>
+
+<InputsSpecsEditor
+	id={component.id}
+	shouldCapitalize={false}
+	bind:inputSpecs={fields}
+	userInputEnabled={component.type !== 'buttoncomponent'}
+/>

package/components/apps/editor/AppComponentInputs.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ConnectedAppInput, RowAppInput, StaticAppInput, UserAppInput } from '../inputType';
+import type { AppComponent } from './component';
+declare const __propDef: {
+    props: {
+        fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>;
+        component: AppComponent;
+        resourceOnly?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppComponentInputsProps = typeof __propDef.props;
+export type AppComponentInputsEvents = typeof __propDef.events;
+export type AppComponentInputsSlots = typeof __propDef.slots;
+export default class AppComponentInputs extends SvelteComponentTyped<AppComponentInputsProps, AppComponentInputsEvents, AppComponentInputsSlots> {
+}
+export {};