dialog: extend api with disabled controls
This commit is contained in:
@@ -17,12 +17,23 @@
|
|||||||
loaded: () => void;
|
loaded: () => void;
|
||||||
/** if default controls are used, returns true if the submit button is in loading state */
|
/** if default controls are used, returns true if the submit button is in loading state */
|
||||||
isLoading: () => boolean;
|
isLoading: () => boolean;
|
||||||
|
/** if the default controls are used, disabled submission */
|
||||||
|
disable: () => void;
|
||||||
|
/** if the default controls are used, enables submission */
|
||||||
|
enable: () => void;
|
||||||
|
/** if the default controls are used, returns true if the dialog is disabled */
|
||||||
|
isDisabled: () => boolean;
|
||||||
/** if default controls are used, disables submission and exiting */
|
/** if default controls are used, disables submission and exiting */
|
||||||
freeze: () => void;
|
freeze: () => void;
|
||||||
/** if default controls are used, enables submission and exiting */
|
/** if default controls are used, enables submission and exiting */
|
||||||
unfreeze: () => void;
|
unfreeze: () => void;
|
||||||
/** if the default controls are used, returns true if the dialog is frozen */
|
/** if the default controls are used, returns true if the dialog is frozen */
|
||||||
isFrozen: () => boolean;
|
isFrozen: () => boolean;
|
||||||
|
/**
|
||||||
|
* if the default controls are used, returns true if the continue button is available.
|
||||||
|
* checks if the dialog is in loading, disabled, or frozen state.
|
||||||
|
*/
|
||||||
|
canContinue: () => boolean;
|
||||||
/**
|
/**
|
||||||
* title sets the dialog title. WARNING: Title is NOT bindable and
|
* title sets the dialog title. WARNING: Title is NOT bindable and
|
||||||
* changes made via this API will NOT propagate to consuming components.
|
* changes made via this API will NOT propagate to consuming components.
|
||||||
@@ -90,6 +101,7 @@
|
|||||||
let error = $state<ErrorMessage | null>(null);
|
let error = $state<ErrorMessage | null>(null);
|
||||||
let loading = $state(false);
|
let loading = $state(false);
|
||||||
let frozen = $state(false);
|
let frozen = $state(false);
|
||||||
|
let disabled = $state(false);
|
||||||
|
|
||||||
// disable window scroll when dialog is open
|
// disable window scroll when dialog is open
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
@@ -110,9 +122,13 @@
|
|||||||
loading: () => (loading = true),
|
loading: () => (loading = true),
|
||||||
loaded: () => (loading = false),
|
loaded: () => (loading = false),
|
||||||
isLoading: () => loading,
|
isLoading: () => loading,
|
||||||
|
disable: () => (disabled = true),
|
||||||
|
enable: () => (disabled = false),
|
||||||
|
isDisabled: () => disabled,
|
||||||
freeze: () => (frozen = true),
|
freeze: () => (frozen = true),
|
||||||
unfreeze: () => (frozen = false),
|
unfreeze: () => (frozen = false),
|
||||||
isFrozen: () => frozen,
|
isFrozen: () => frozen,
|
||||||
|
canContinue: () => !loading && !disabled && !frozen,
|
||||||
title: (newTitle) => (title = newTitle)
|
title: (newTitle) => (title = newTitle)
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
@@ -191,11 +207,11 @@
|
|||||||
onclick={() => {
|
onclick={() => {
|
||||||
if (controls?.ok?.action) {
|
if (controls?.ok?.action) {
|
||||||
controls.ok.action(dialogAPI);
|
controls.ok.action(dialogAPI);
|
||||||
} else if (!frozen && !loading) {
|
} else if (!frozen && !loading && !disabled) {
|
||||||
open = false;
|
open = false;
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
disabled={frozen}
|
disabled={frozen || loading || disabled}
|
||||||
{loading}
|
{loading}
|
||||||
>
|
>
|
||||||
{controls?.ok?.label || 'OK'}
|
{controls?.ok?.label || 'OK'}
|
||||||
|
|||||||
Reference in New Issue
Block a user