starred/windmill
1
0
Fork 0
mirror of https://github.com/windmill-labs/windmill.git synced 2026-08-21 16:02:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

add event handlers to more components

Browse Source
This commit is contained in:
Ruben Fiszel
2025-04-21 16:45:13 +02:00
parent 7994450764
commit 4e66d780c1
8 changed files with 127 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/apps/components/inputs/AppDateInput.svelte
+9 -1
View File
@@ -17,8 +17,9 @@
export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
export let customCss: ComponentCustomCSS<'dateinputcomponent'> | undefined = undefined
export let render: boolean
export let onChange: string[] | undefined = undefined
const { app, worldStore, selectedComponent, componentControl } =
const { app, worldStore, selectedComponent, componentControl, runnableComponents } =
getContext<AppViewerContext>('AppViewerContext')
let resolvedConfig = initConfig(
@@ -64,6 +65,13 @@
} else {
outputs?.result.set(undefined)
}
fireOnChange()
}
function fireOnChange() {
if (onChange) {
onChange.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb()))
}
}
function handleDefault(defaultValue: string | undefined) {
frontend/src/lib/components/apps/components/inputs/AppDateTimeInput.svelte
+9 -2
View File
@@ -25,8 +25,8 @@
export let verticalAlignment: VerticalAlignment | undefined = undefined
export let customCss: ComponentCustomCSS<'datetimeinputcomponent'> | undefined = undefined
export let render: boolean
const { app, worldStore, componentControl, selectedComponent } =
export let onChange: string[] | undefined = undefined
const { app, worldStore, componentControl, selectedComponent, runnableComponents } =
getContext<AppViewerContext>('AppViewerContext')
const iterContext = getContext<ListContext>('ListWrapperContext')
@@ -119,6 +119,13 @@
listInputs.set(id, undefined)
}
}
fireOnChange()
}
function fireOnChange() {
if (onChange) {
onChange.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb()))
}
}
function handleDefault(defaultValue: string | undefined) {
frontend/src/lib/components/apps/components/inputs/AppNumberInput.svelte
+9 -2
View File
@@ -21,8 +21,8 @@
export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
export let customCss: ComponentCustomCSS<'numberinputcomponent'> | undefined = undefined
export let render: boolean
const { app, worldStore, selectedComponent, componentControl } =
export let onChange: string[] | undefined = undefined
const { app, worldStore, selectedComponent, componentControl, runnableComponents } =
getContext<AppViewerContext>('AppViewerContext')
const iterContext = getContext<ListContext>('ListWrapperContext')
const listInputs: ListInputs | undefined = getContext<ListInputs>('ListInputs')
@@ -61,6 +61,13 @@
if (iterContext && listInputs) {
listInputs.set(id, value ?? undefined)
}
fireOnChange()
}
function fireOnChange() {
if (onChange) {
onChange.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb()))
}
}
function handleDefault(defaultValue: number | undefined) {
frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte
+16 -2
View File
@@ -28,9 +28,16 @@
| 'emailinputcomponent'
| 'textareainputcomponent' = 'textinputcomponent'
export let render: boolean
export let onChange: string[] | undefined = undefined
const { app, worldStore, selectedComponent, connectingInput, componentControl } =
getContext<AppViewerContext>('AppViewerContext')
const {
app,
worldStore,
selectedComponent,
connectingInput,
componentControl,
runnableComponents
} = getContext<AppViewerContext>('AppViewerContext')
let resolvedConfig = initConfig(
components['textinputcomponent'].initialData.configuration,
@@ -70,6 +77,13 @@
if (iterContext && listInputs) {
listInputs.set(id, val)
}
fireOnChange()
}
function fireOnChange() {
if (onChange) {
onChange.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb()))
}
}
function handleDefault(defaultValue: string | undefined) {
frontend/src/lib/components/apps/components/inputs/AppTimeInput.svelte
+9 -1
View File
@@ -15,8 +15,9 @@
export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
export let customCss: ComponentCustomCSS<'timeinputcomponent'> | undefined = undefined
export let render: boolean
export let onChange: string[] | undefined = undefined
const { app, worldStore, selectedComponent, componentControl } =
const { app, worldStore, selectedComponent, componentControl, runnableComponents } =
getContext<AppViewerContext>('AppViewerContext')
let resolvedConfig = initConfig(
@@ -78,6 +79,13 @@
// At the end, set the validity
outputs?.validity.set(isValid)
}
fireOnChange()
}
function fireOnChange() {
if (onChange) {
onChange.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb()))
}
}
function handleDefault(defaultValue: string | undefined) {
frontend/src/lib/components/apps/editor/component/ComponentInner.svelte
+8
View File
@@ -393,6 +393,7 @@
verticalAlignment={component.verticalAlignment}
configuration={component.configuration}
customCss={component.customCss}
onChange={component.onChange}
{render}
/>
{:else if component.type === 'quillcomponent'}
@@ -405,6 +406,7 @@
customCss={component.customCss}
inputType="textarea"
appCssKey="textareainputcomponent"
onChange={component.onChange}
{render}
/>
{:else if component.type === 'emailinputcomponent'}
@@ -415,6 +417,7 @@
appCssKey="emailinputcomponent"
id={component.id}
customCss={component.customCss}
onChange={component.onChange}
{render}
/>
{:else if component.type === 'passwordinputcomponent'}
@@ -425,6 +428,7 @@
appCssKey="passwordinputcomponent"
id={component.id}
customCss={component.customCss}
onChange={component.onChange}
{render}
/>
{:else if component.type === 'dateinputcomponent'}
@@ -434,6 +438,7 @@
inputType="date"
id={component.id}
customCss={component.customCss}
onChange={component.onChange}
{render}
/>
{:else if component.type === 'timeinputcomponent'}
@@ -442,6 +447,7 @@
configuration={component.configuration}
id={component.id}
customCss={component.customCss}
onChange={component.onChange}
{render}
/>
{:else if component.type === 'datetimeinputcomponent'}
@@ -451,6 +457,7 @@
inputType="date"
id={component.id}
customCss={component.customCss}
onChange={component.onChange}
{render}
/>
{:else if component.type === 'numberinputcomponent'}
@@ -459,6 +466,7 @@
configuration={component.configuration}
id={component.id}
customCss={component.customCss}
onChange={component.onChange}
{render}
/>
{:else if component.type === 'currencycomponent'}
frontend/src/lib/components/apps/editor/component/components.ts
+48 -16
View File
@@ -91,21 +91,51 @@ export type CustomComponentConfig = {
reactVersion?: string
}
}
export type TextComponent = BaseComponent<'textcomponent'>
export type TextInputComponent = BaseComponent<'textinputcomponent'>
export type QuillComponent = BaseComponent<'quillcomponent'>
export type CodeInputComponent = BaseComponent<'codeinputcomponent'>
export type TextareaInputComponent = BaseComponent<'textareainputcomponent'>
export type PasswordInputComponent = BaseComponent<'passwordinputcomponent'>
export type EmailInputComponent = BaseComponent<'emailinputcomponent'>
export type DateInputComponent = BaseComponent<'dateinputcomponent'>
export type TimeInputComponent = BaseComponent<'timeinputcomponent'>
export type DateTimeInputComponent = BaseComponent<'datetimeinputcomponent'>
export type NumberInputComponent = BaseComponent<'numberinputcomponent'>
export type CurrencyComponent = BaseComponent<'currencycomponent'>
export type SliderComponent = BaseComponent<'slidercomponent'>
export type DateSliderComponent = BaseComponent<'dateslidercomponent'>
export type RangeComponent = BaseComponent<'rangecomponent'>
export type TextComponent = BaseComponent<'textcomponent'> & {
onChange?: string[]
}
export type TextInputComponent = BaseComponent<'textinputcomponent'> & {
onChange?: string[]
}
export type QuillComponent = BaseComponent<'quillcomponent'> & {
onChange?: string[]
}
export type CodeInputComponent = BaseComponent<'codeinputcomponent'> & {
onChange?: string[]
}
export type TextareaInputComponent = BaseComponent<'textareainputcomponent'> & {
onChange?: string[]
}
export type PasswordInputComponent = BaseComponent<'passwordinputcomponent'> & {
onChange?: string[]
}
export type EmailInputComponent = BaseComponent<'emailinputcomponent'> & {
onChange?: string[]
}
export type DateInputComponent = BaseComponent<'dateinputcomponent'> & {
onChange?: string[]
}
export type TimeInputComponent = BaseComponent<'timeinputcomponent'> & {
onChange?: string[]
}
export type DateTimeInputComponent = BaseComponent<'datetimeinputcomponent'> & {
onChange?: string[]
}
export type NumberInputComponent = BaseComponent<'numberinputcomponent'> & {
onChange?: string[]
}
export type CurrencyComponent = BaseComponent<'currencycomponent'> & {
onChange?: string[]
}
export type SliderComponent = BaseComponent<'slidercomponent'> & {
onChange?: string[]
}
export type DateSliderComponent = BaseComponent<'dateslidercomponent'> & {
onChange?: string[]
}
export type RangeComponent = BaseComponent<'rangecomponent'> & {
onChange?: string[]
}
export type HtmlComponent = BaseComponent<'htmlcomponent'>
export type CustomComponent = BaseComponent<'customcomponent'> & {
customComponent: CustomComponentConfig
@@ -293,7 +323,9 @@ export type NavBarComponent = BaseComponent<'navbarcomponent'> & {
navbarItems: NavbarItem[]
}
export type DateSelectComponent = BaseComponent<'dateselectcomponent'>
export type DateSelectComponent = BaseComponent<'dateselectcomponent'> & {
onChange?: string[]
}
export type RecomputeAllComponent = BaseComponent<'recomputeallcomponent'>
frontend/src/lib/components/apps/editor/settingsPanel/EventHandlers.svelte
+19 -3
View File
@@ -23,7 +23,15 @@
'conditionalwrapper',
'fileinputcomponent',
's3fileinputcomponent',
'steppercomponent'
'steppercomponent',
'dateinputcomponent',
'datetimeinputcomponent',
'timeinputcomponent',
'numberinputcomponent',
'textinputcomponent',
'textareainputcomponent',
'passwordinputcomponent',
'emailinputcomponent'
]
</script>
@@ -49,7 +57,7 @@
bind:value={item.data.onCloseRecomputeIds}
/>
{/if}
{#if (`recomputeIds` in item.data && Array.isArray(item.data.recomputeIds)) || item.data.type === 'buttoncomponent' || item.data.type === 'formcomponent' || item.data.type === 'formbuttoncomponent' || item.data.type === 'checkboxcomponent'}
{#if (`recomputeIds` in item.data && Array.isArray(item.data.recomputeIds)) || item.data.type === 'buttoncomponent' || item.data.type === 'formbuttoncomponent'}
<EventHandlerItem
title="on success"
tooltip="Select components to recompute after this runnable has successfully run"
@@ -60,11 +68,19 @@
{#if item.data.type === 'checkboxcomponent'}
<EventHandlerItem
title="on toggle"
tooltip="Contrary to onSuccess, this will only trigger recompute when a human toggle the change, not if it set by a default value or by setValue"
tooltip="When a human toggle the checkbox"
items={Object.keys($runnableComponents).filter((id) => id !== ownId)}
bind:value={item.data.onToggle}
/>
{/if}
{#if item.data.type === 'dateinputcomponent' || item.data.type === 'datetimeinputcomponent' || item.data.type === 'timeinputcomponent' || item.data.type === 'numberinputcomponent' || item.data.type === 'textinputcomponent' || item.data.type === 'textareainputcomponent' || item.data.type === 'passwordinputcomponent' || item.data.type === 'emailinputcomponent'}
<EventHandlerItem
title="on change"
tooltip="When a human change the value of the input"
items={Object.keys($runnableComponents).filter((id) => id !== ownId)}
bind:value={item.data.onChange}
/>
{/if}
{#if item.data.type === 'resourceselectcomponent' || item.data.type === 'selectcomponent' || item.data.type == 'userresourcecomponent'}
<EventHandlerItem
title="on select"