@isoftdata/svelte-user-configuration 1.3.2 → 2.0.0

package/README.md

@@ -8,6 +8,13 @@ This Svelte component provides a user configuration interface, including user ac
 npm i @isoftdata/svelte-user-configuration
 ```
 
+## Breaking changes
+
+### 2.0.0
+- Require Svelte 5
+- Slots -> Snippets
+- Events -> Callbacks
+
 ## Props
 
 ### User Account Properties
@@ -42,7 +49,7 @@ npm i @isoftdata/svelte-user-configuration
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `permissions` | `Permissions` | ✅ | - | The list of permissions for the user. |
-| `permissionValueMap` | `PermissionValueMap` | ✅ | `new Map()` | A mapping of permissions to their values. |
+| `permissionValueMap` | `PermissionValueMap` | ✅ | `new SvelteMap()` | A mapping of permissions to their values. **Note this *must* be a `SvelteMap`** or reactivity will not work. |
 | `groupPermissionValueMap` | `GroupPermissionValueMap` | ❌ | `undefined` | A mapping of group-based permissions. |
 
 ### Other Properties
@@ -145,7 +152,7 @@ This component provides named slots for injecting additional content.
 		for (const id of permissionIds) {
 			permissionValueMap.set(id, value)
 		}
-		permissionValueMap = new Map(permissionValueMap)
+		permissionValueMap = new SvelteMap(permissionValueMap)
 	}}
 />
 ```

package/dist/DeactivateUserModal.svelte

@@ -1,21 +1,33 @@
-<script>import { getContext, tick } from "svelte";
-import { klona } from "klona";
-import { translate as defaultTranslate } from "@isoftdata/utility-string";
-import Modal from "@isoftdata/svelte-modal";
-import TextArea from "@isoftdata/svelte-textarea";
-let show = false;
-let userAccount;
-let lockNotes;
-let textarea;
-export let deactivateUser = void 0;
-export async function open(userAccountCtx) {
-  userAccount = klona(userAccountCtx);
-  lockNotes = userAccount.lockNotes;
-  show = true;
-  await tick();
-  textarea?.select();
-}
-const { t: translate } = getContext("i18next") || { t: defaultTranslate };
+<script lang="ts">
+	import type { UserAccount } from './'
+	import type { i18n } from 'i18next'
+
+	import { getContext, tick } from 'svelte'
+	import { klona } from 'klona'
+	import { translate as defaultTranslate } from '@isoftdata/utility-string'
+
+	import Modal from '@isoftdata/svelte-modal'
+	import TextArea from '@isoftdata/svelte-textarea'
+
+	let show: boolean = $state(false)
+	let userAccount: UserAccount | undefined = $state()
+	let lockNotes: UserAccount['lockNotes'] = $state(null)
+	let textarea: HTMLTextAreaElement | undefined = $state()
+
+	interface Props {
+		deactivateUser?: ((user: { id: UserAccount['id']; lockNotes: UserAccount['lockNotes'] }) => void | Promise<void>) | undefined;
+	}
+
+	let { deactivateUser = undefined }: Props = $props();
+	export async function open(userAccountCtx: UserAccount) {
+		userAccount = klona(userAccountCtx)
+		lockNotes = userAccount.lockNotes
+		show = true
+		await tick()
+		textarea?.select()
+	}
+
+	const { t: translate } = getContext<i18n>('i18next') || { t: defaultTranslate }
 </script>
 
 <Modal
@@ -25,12 +37,12 @@ const { t: translate } = getContext("i18next") || { t: defaultTranslate };
 	cancelButtonText={translate('common:close', 'Close')}
 	confirmButtonType="submit"
 	confirmButtonFormId="deactivateUserModalForm"
-	on:close={() => (show = false)}
+	close={() => (show = false)}
 	bind:show
 >
 	<form
 		id="deactivateUserModalForm"
-		on:submit={async e => {
+		onsubmit={async e => {
 			e.preventDefault()
 			userAccount ? await deactivateUser?.({ id: userAccount.id, lockNotes }) : undefined
 			show = false

package/dist/DeactivateUserModal.svelte.d.ts

@@ -1,24 +1,12 @@
-import { SvelteComponent } from "svelte";
 import type { UserAccount } from './';
-declare const __propDef: {
-    props: {
-        deactivateUser?: ((user: {
-            id: UserAccount["id"];
-            lockNotes: UserAccount["lockNotes"];
-        }) => void | Promise<void>) | undefined;
-        open?: (userAccountCtx: UserAccount) => Promise<void>;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type DeactivateUserModalProps = typeof __propDef.props;
-export type DeactivateUserModalEvents = typeof __propDef.events;
-export type DeactivateUserModalSlots = typeof __propDef.slots;
-export default class DeactivateUserModal extends SvelteComponent<DeactivateUserModalProps, DeactivateUserModalEvents, DeactivateUserModalSlots> {
-    get open(): (userAccountCtx: UserAccount) => Promise<void>;
+interface Props {
+    deactivateUser?: ((user: {
+        id: UserAccount['id'];
+        lockNotes: UserAccount['lockNotes'];
+    }) => void | Promise<void>) | undefined;
 }
-export {};
+declare const DeactivateUserModal: import("svelte").Component<Props, {
+    open: (userAccountCtx: UserAccount) => Promise<void>;
+}, "">;
+type DeactivateUserModal = ReturnType<typeof DeactivateUserModal>;
+export default DeactivateUserModal;

package/dist/PasswordRecoveryModal.svelte

@@ -1,33 +1,46 @@
-<script>import { getContext } from "svelte";
-import Modal from "@isoftdata/svelte-modal";
-import Input from "@isoftdata/svelte-input";
-import { translate as defaultTranslate } from "@isoftdata/utility-string";
-const { t: translate } = getContext("i18next") || { t: defaultTranslate };
-export let sendPasswordRecoveryToken = void 0;
-export let doSendPasswordRecoveryToken;
-let resetDate = void 0;
-let email = null;
-let show = false;
-export function open(passwordRecoveryEmail, lastResetDate) {
-  email = passwordRecoveryEmail;
-  resetDate = lastResetDate;
-  show = true;
-}
+<script lang="ts">
+	import type { i18n } from 'i18next'
+
+	import { getContext } from 'svelte'
+	import Modal from '@isoftdata/svelte-modal'
+	import Input from '@isoftdata/svelte-input'
+	import { translate as defaultTranslate } from '@isoftdata/utility-string'
+
+	const { t: translate } = getContext<i18n>('i18next') || { t: defaultTranslate }
+
+	interface Props {
+		sendPasswordRecoveryToken?: ((email: string | null) => void | Promise<void>) | undefined
+		doSendPasswordRecoveryToken: boolean
+	}
+
+	let { sendPasswordRecoveryToken = undefined, doSendPasswordRecoveryToken = $bindable() }: Props = $props()
+	let resetDate: Date | null | undefined = $state(undefined)
+	let email: string | null = $state(null)
+	let show: boolean = $state(false)
+
+	export function open(passwordRecoveryEmail: typeof email, lastResetDate: Date | null | undefined) {
+		email = passwordRecoveryEmail
+		resetDate = lastResetDate
+		show = true
+	}
 </script>
 
 <Modal
 	bind:show
 	title={translate('configuration.user.accountInfo.passwordRecovery.header', 'Password Recovery')}
-	confirmButtonText={translate('configuration.user.accountInfo.passwordManagementModal.requestResetToken', 'Request Reset Token')}
+	confirmButtonText={translate(
+		'configuration.user.accountInfo.passwordManagementModal.requestResetToken',
+		'Request Reset Token',
+	)}
 	confirmButtonIcon="check"
 	confirmButtonDisabled={!email}
-	on:close={() => (show = false)}
+	close={() => (show = false)}
 	confirmButtonType="submit"
 	confirmButtonFormId="passwordRecoveryForm"
 >
 	<form
 		id="passwordRecoveryForm"
-		on:submit={async event => {
+		onsubmit={async event => {
 			event.preventDefault()
 			try {
 				doSendPasswordRecoveryToken = true
@@ -38,22 +51,31 @@ export function open(passwordRecoveryEmail, lastResetDate) {
 			}
 		}}
 	>
-		<div class="form-row">
+		<div class="row">
 			<Input
-				label={translate('configuration.user.accountInfo.passwordManagementModal.lastPasswordSetDate', 'Last Password Set Date')}
+				label={translate(
+					'configuration.user.accountInfo.passwordManagementModal.lastPasswordSetDate',
+					'Last Password Set Date',
+				)}
 				value={resetDate?.toLocaleString() ?? ''}
 				labelParentClass="col-12 col-md-6 form-group mb-0"
 				readonly
 			/>
 			<Input
-				label={translate('configuration.user.accountInfo.passwordRecoveryModal.passwordRecoveryEmail', 'Password Recovery Email')}
+				label={translate(
+					'configuration.user.accountInfo.passwordRecoveryModal.passwordRecoveryEmail',
+					'Password Recovery Email',
+				)}
 				value={email ?? ''}
 				labelParentClass="col-12 col-md-6 form-group mb-0"
 				readonly
 			/>
 			{#if !email}
 				<div class="alert alert-danger mt-3 mb-0">
-					{translate('configuration.user.accountInfo.passwordRecovery.noRecoveryEmail', 'No recovery email has been set for this user.')}
+					{translate(
+						'configuration.user.accountInfo.passwordRecovery.noRecoveryEmail',
+						'No recovery email has been set for this user.',
+					)}
 				</div>
 			{/if}
 		</div>

package/dist/PasswordRecoveryModal.svelte.d.ts

@@ -1,21 +1,9 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        sendPasswordRecoveryToken?: ((email: string | null) => void | Promise<void>) | undefined;
-        doSendPasswordRecoveryToken: boolean;
-        open?: (passwordRecoveryEmail: string | null, lastResetDate: Date | undefined) => void;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type PasswordRecoveryModalProps = typeof __propDef.props;
-export type PasswordRecoveryModalEvents = typeof __propDef.events;
-export type PasswordRecoveryModalSlots = typeof __propDef.slots;
-export default class PasswordRecoveryModal extends SvelteComponent<PasswordRecoveryModalProps, PasswordRecoveryModalEvents, PasswordRecoveryModalSlots> {
-    get open(): (passwordRecoveryEmail: string | null, lastResetDate: Date | undefined) => void;
+interface Props {
+    sendPasswordRecoveryToken?: ((email: string | null) => void | Promise<void>) | undefined;
+    doSendPasswordRecoveryToken: boolean;
 }
-export {};
+declare const PasswordRecoveryModal: import("svelte").Component<Props, {
+    open: (passwordRecoveryEmail: string | null, lastResetDate: Date | null | undefined) => void;
+}, "doSendPasswordRecoveryToken">;
+type PasswordRecoveryModal = ReturnType<typeof PasswordRecoveryModal>;
+export default PasswordRecoveryModal;

package/dist/PasswordSetModal.svelte

@@ -1,54 +1,78 @@
-<script>import { klona } from "klona";
-import { tick, getContext } from "svelte";
-import Input from "@isoftdata/svelte-input";
-import Modal from "@isoftdata/svelte-modal";
-import PasswordFields from "@isoftdata/svelte-password-fields";
-import { translate as defaultTranslate } from "@isoftdata/utility-string";
-let show = false;
-let currentPassword = "";
-let newPassword = "";
-let confirmPassword = "";
-let passwordMismatch = false;
-let lastResetDate = void 0;
-let currentPasswordInput = void 0;
-let newPasswordInput = void 0;
-let passwordRecoveryEmail = void 0;
-let passwordIsValid = false;
-export let validationRules = void 0;
-export let changePasswordMode = false;
-export let confirmPasswordSet;
-export async function open(userAccount) {
-  currentPassword = "";
-  newPassword = "";
-  confirmPassword = "";
-  lastResetDate = klona(userAccount?.lastPasswordResetDate);
-  passwordRecoveryEmail = userAccount?.recoveryEmail;
-  show = true;
-  await tick();
-  if (changePasswordMode) {
-    currentPasswordInput?.focus();
-  } else {
-    newPasswordInput?.focus();
-  }
-}
-const { t: translate } = getContext("i18next") || { t: defaultTranslate };
-$: passwordMismatch = !(newPassword && confirmPassword && newPassword === confirmPassword);
-$: disablePasswordChange = changePasswordMode && !currentPassword || passwordMismatch || !newPassword || !confirmPassword || !passwordIsValid;
+<script lang="ts">
+	import type { i18n } from 'i18next'
+	import type { UserAccount, PasswordValidationRules } from './'
+
+	import { klona } from 'klona'
+	import { tick, getContext } from 'svelte'
+	import Input from '@isoftdata/svelte-input'
+	import Modal from '@isoftdata/svelte-modal'
+	import PasswordFields from '@isoftdata/svelte-password-fields'
+	import { translate as defaultTranslate } from '@isoftdata/utility-string'
+
+	let show: boolean = $state(false)
+	let currentPassword: string = $state('')
+	let newPassword: string = $state('')
+	let confirmPassword: string = $state('')
+	let lastResetDate: Date | null | undefined = $state(undefined)
+	let currentPasswordInput: HTMLInputElement | undefined = $state(undefined)
+	let newPasswordInput: HTMLInputElement | undefined = $state(undefined)
+	let passwordRecoveryEmail: string | null | undefined = $state(undefined)
+	let passwordIsValid: boolean = $state(false)
+
+	interface Props {
+		validationRules?: PasswordValidationRules | undefined
+		changePasswordMode?: boolean
+		confirmPasswordSet: (ctx: { currentPassword: string; newPassword: string }) => void | Promise<void>
+	}
+
+	let { validationRules = undefined, changePasswordMode = false, confirmPasswordSet }: Props = $props()
+	export async function open(userAccount?: UserAccount) {
+		currentPassword = ''
+		newPassword = ''
+		confirmPassword = ''
+		lastResetDate = klona(userAccount?.lastPasswordResetDate) // Don't mutate the given Date obj
+		passwordRecoveryEmail = userAccount?.recoveryEmail
+		show = true
+		await tick()
+
+		if (changePasswordMode) {
+			currentPasswordInput?.focus()
+		} else {
+			newPasswordInput?.focus()
+		}
+	}
+
+	const { t: translate } = getContext<i18n>('i18next') || { t: defaultTranslate }
+
+	// The passwordMismatch prop from the PasswordFields component only updates on:change,
+	// but we want the component consumer to be able to update their save button disabled state in real time
+	let passwordMismatch: boolean = $derived(!(newPassword && confirmPassword && newPassword === confirmPassword))
+	let disablePasswordChange: boolean = $derived(
+		(changePasswordMode && !currentPassword) ||
+			passwordMismatch ||
+			!newPassword ||
+			!confirmPassword ||
+			!passwordIsValid,
+	)
 </script>
 
 <Modal
 	bind:show
-	title={changePasswordMode ? translate('configuration.user.changePassword', 'Change Password') : translate('configuration.user.setPassword', 'Set Password')}
-	confirmButtonText={changePasswordMode ? translate('configuration.user.changePassword', 'Change Password') : translate('configuration.user.setPassword', 'Set Password')}
+	title={changePasswordMode
+		? translate('configuration.user.changePassword', 'Change Password')
+		: translate('configuration.user.setPassword', 'Set Password')}
+	confirmButtonText={changePasswordMode
+		? translate('configuration.user.changePassword', 'Change Password')
+		: translate('configuration.user.setPassword', 'Set Password')}
 	confirmButtonIcon="check"
 	confirmButtonDisabled={disablePasswordChange}
-	on:close={() => (show = false)}
+	close={() => (show = false)}
 	confirmButtonType="submit"
 	confirmButtonFormId="setPasswordForm"
 >
 	<form
 		id="setPasswordForm"
-		on:submit={async e => {
+		onsubmit={async e => {
 			e.preventDefault()
 			if (!disablePasswordChange) {
 				await confirmPasswordSet({ currentPassword, newPassword })
@@ -57,7 +81,10 @@ $: disablePasswordChange = changePasswordMode && !currentPassword || passwordMis
 		}}
 	>
 		<Input
-			label={translate('configuration.user.accountInfo.passwordManagementModal.lastPasswordSetDate', 'Last Password Set Date')}
+			label={translate(
+				'configuration.user.accountInfo.passwordManagementModal.lastPasswordSetDate',
+				'Last Password Set Date',
+			)}
 			tabindex={-1}
 			value={lastResetDate ? lastResetDate.toLocaleString() : ''}
 			labelParentClass="form-group mb-0"
@@ -83,11 +110,17 @@ $: disablePasswordChange = changePasswordMode && !currentPassword || passwordMis
 			columnClass="col-12"
 			{validationRules}
 			passwordLabel={translate('configuration.user.accountInfo.passwordManagementModal.newPassword', 'New Password')}
-			confirmPasswordLabel={translate('configuration.user.accountInfo.passwordManagementModal.confirmNewPassword', 'Confirm New Password')}
+			confirmPasswordLabel={translate(
+				'configuration.user.accountInfo.passwordManagementModal.confirmNewPassword',
+				'Confirm New Password',
+			)}
 		/>
 		{#if !passwordRecoveryEmail}
 			<div class="alert alert-danger mt-3 mb-0">
-				{translate('configuration.user.accountInfo.passwordRecovery.noRecoveryEmail', 'No recovery email has been set for this user.')}
+				{translate(
+					'configuration.user.accountInfo.passwordRecovery.noRecoveryEmail',
+					'No recovery email has been set for this user.',
+				)}
 			</div>
 		{/if}
 	</form>

package/dist/PasswordSetModal.svelte.d.ts

@@ -1,26 +1,14 @@
-import { SvelteComponent } from "svelte";
 import type { UserAccount, PasswordValidationRules } from './';
-declare const __propDef: {
-    props: {
-        validationRules?: PasswordValidationRules | undefined;
-        changePasswordMode?: boolean;
-        confirmPasswordSet: (ctx: {
-            currentPassword: string;
-            newPassword: string;
-        }) => void | Promise<void>;
-        open?: (userAccount?: UserAccount) => Promise<void>;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type PasswordSetModalProps = typeof __propDef.props;
-export type PasswordSetModalEvents = typeof __propDef.events;
-export type PasswordSetModalSlots = typeof __propDef.slots;
-export default class PasswordSetModal extends SvelteComponent<PasswordSetModalProps, PasswordSetModalEvents, PasswordSetModalSlots> {
-    get open(): (userAccount?: UserAccount) => Promise<void>;
+interface Props {
+    validationRules?: PasswordValidationRules | undefined;
+    changePasswordMode?: boolean;
+    confirmPasswordSet: (ctx: {
+        currentPassword: string;
+        newPassword: string;
+    }) => void | Promise<void>;
 }
-export {};
+declare const PasswordSetModal: import("svelte").Component<Props, {
+    open: (userAccount?: UserAccount) => Promise<void>;
+}, "">;
+type PasswordSetModal = ReturnType<typeof PasswordSetModal>;
+export default PasswordSetModal;