dialog: extend api with disabled controls

This commit is contained in:
Elijah Duffy
2025-08-11 17:12:31 -07:00
parent 1f4c13d838
commit cd2ce96a33

View File

@@ -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'}