@isoftdata/svelte-user-configuration 1.3.3 → 2.0.1

package/dist/PermissionList.svelte

@@ -1,196 +1,289 @@
-<script>import { getContext } from "svelte";
-import camelCase from "just-camel-case";
-import Icon from "@isoftdata/svelte-icon";
-import Button from "@isoftdata/svelte-button";
-import Select from "@isoftdata/svelte-select";
-import { getEventValue } from "@isoftdata/browser-event";
-import { Table, Td } from "@isoftdata/svelte-table";
-import { translate as defaultTranslate } from "@isoftdata/utility-string";
-const { t: translate } = getContext("i18next") || { t: defaultTranslate };
-export let permissions;
-export let siteLabel = "Site";
-export let permissionValueChange = void 0;
-export let icon = "user-lock";
-export let cardHeaderTitle = translate("common:permissions", "Permissions");
-export let permissionValueMap = /* @__PURE__ */ new Map();
-export let groupPermissionValueMap = void 0;
-let computedPermissions = [];
-let selectedPermissionIds = /* @__PURE__ */ new Set();
-let selectedPermissionValue = null;
-const permissionColumns = getColumns(groupPermissionValueMap);
-const permissionValueList = {
-  NONE: { label: translate("common:permissionLevel.none", "None"), value: "NONE", color: "danger" },
-  SITE: { label: translate(`common:permissionLevel.${siteLabel.toLowerCase()}`, siteLabel), value: "SITE", color: "primary" },
-  GLOBAL: { label: translate("common:permissionLevel.global", "Global"), value: "GLOBAL", color: "success" }
-};
-function getColumns(groupPermissionValueMap2) {
-  let columns = [
-    { property: "value", name: groupPermissionValueMap2 ? translate("common:user", "User") : translate("common:permission", "Permission"), width: "1rem" },
-    { property: "category", name: translate("common:category", "Category") },
-    { property: "displayName", name: translate("common:name", "Name") }
-  ];
-  if (groupPermissionValueMap2) {
-    columns.splice(
-      1,
-      0,
-      { property: "groupValue", name: translate("common:group", "Group"), align: "center", width: "1rem", minWidth: "25%" },
-      { property: "computedValue", name: translate("common:access", "Access"), align: "center", width: "1rem", minWidth: "25%" }
-    );
-  }
-  return columns;
-}
-function selectPermissions(permissionId) {
-  selectedPermissionIds.has(permissionId) ? selectedPermissionIds.delete(permissionId) : selectedPermissionIds.add(permissionId);
-  selectedPermissionIds = selectedPermissionIds;
-}
-function selectAndDeselectAllPermissions() {
-  if (selectedPermissionIds.size === computedPermissions.length) {
-    selectedPermissionIds.clear();
-    selectedPermissionValue = null;
-  } else {
-    selectedPermissionIds = new Set(permissions.map((permission) => permission.id));
-  }
-  selectedPermissionIds = selectedPermissionIds;
-}
-const getButtonColor = (optionValue, permissionValue) => optionValue === permissionValue ? permissionValueList[optionValue].color : "outline-secondary";
-const isValidPermissionValue = (value) => Object.keys(permissionValueList).includes(value);
-async function updatePermissionValues(event, permissionIds) {
-  const newValue = getEventValue(event);
-  if (isValidPermissionValue(newValue)) {
-    const permissionIdsArray = Array.from(permissionIds);
-    for (const id of permissionIdsArray) {
-      permissionValueMap.set(id, newValue);
-    }
-    permissionValueMap = permissionValueMap;
-    await permissionValueChange?.({
-      value: newValue,
-      permissionIds: permissionIdsArray
-    });
-  }
-}
-function getComputedPermissions(permissions2, permissionValueMap2, groupPermissionValueMap2) {
-  return permissions2.map((permission) => {
-    const value = permissionValueMap2.get(permission.id) ?? "NONE";
-    const groupValue = groupPermissionValueMap2?.get(permission.id);
-    return {
-      ...permission,
-      displayName: translate(`permissions:${camelCase(permission.codeName)}.displayName`, permission.displayName),
-      category: translate(`permissions:categories.${camelCase(permission.category)}`, permission.category),
-      value,
-      groupValue,
-      computedValue: value === "NONE" && groupValue || value === "SITE" && groupValue === "GLOBAL" ? groupValue : value
-    };
-  });
-}
-$: computedPermissions = getComputedPermissions(permissions, permissionValueMap, groupPermissionValueMap);
-</script>
-
-<div
-	class="card"
-	{...$$restProps}
->
-	<div class="card-header">
-		<h5 class="mb-0">
-			<Icon
-				{icon}
-				class="mr-1"
-			/>
-			{cardHeaderTitle}
-		</h5>
-	</div>
-	<div class="card-body">
-		<Table
-			class="mb-0"
-			parentClass="mh-60vh overflow-y-auto"
-			filterPlaceholder={translate('common:filterPermissions', 'Filter Permissions')}
-			filterColumnClass="col-6 col-lg-4 align-self-end"
-			rows={computedPermissions}
-			columns={permissionColumns}
-			responsive
-			filterEnabled
-			let:row={permission}
-		>
-			<tr
-				on:click={() => selectPermissions(permission.id)}
-				class:table-primary={selectedPermissionIds.has(permission.id)}
-				class="cursor-pointer"
-			>
-				<Td property="value">
-					<div
-						class="btn-group btn-group-toggle"
-						data-toggle="buttons"
-					>
-						{#each Object.values(permissionValueList) as permissionValue}
-							<label class="btn btn-sm btn-{getButtonColor(permissionValue.value, permission.value)} cursor-pointer">
-								<input
-									type="radio"
-									autocomplete="off"
-									name={permission.value}
-									value={permissionValue.value}
-									on:change={e => updatePermissionValues(e, new Set([permission.id]))}
-								/>
-								{permissionValue.label}
-							</label>
-						{/each}
-					</div>
-				</Td>
-				{#if groupPermissionValueMap}
-					<Td
-						property="groupValue"
-						class="px-4"
-					>
-						<span class="badge badge-pill badge-{permissionValueList[permission.groupValue ?? 'NONE'].color}">{permissionValueList[permission.groupValue ?? 'NONE'].label}</span>
-					</Td>
-					<Td
-						property="computedValue"
-						class="px-4"
-					>
-						<span class="badge badge-pill badge-{permissionValueList[permission.computedValue ?? 'NONE'].color}">{permissionValueList[permission.computedValue ?? 'NONE'].label}</span>
-					</Td>
-				{/if}
-				<Td property="category">{permission.category}</Td>
-				<Td property="displayName">{permission.displayName}</Td>
-			</tr>
-		</Table>
-		<slot></slot>
-	</div>
-	<div class="card-footer">
-		<div class="d-flex justify-content-between align-items-end">
-			<Select
-				label="{translate('common:setSelectedTo', 'Set Selected To')}:"
-				bind:value={selectedPermissionValue}
-				showEmptyOption={selectedPermissionValue === null}
-				emptyValue={null}
-				emptyText={translate('common:selectValue', 'Select a Value')}
-				labelParentClass="form-inline mr-2"
-				labelClass="mr-2 p-0"
-				disabled={selectedPermissionIds.size === 0}
-				on:change={e => {
-					updatePermissionValues(e, selectedPermissionIds)
-					selectedPermissionIds = new Set() //clear the Set and trigger reactivity
-					selectedPermissionValue = null
-				}}
-			>
-				{#each Object.values(permissionValueList) as permission}
-					<option value={permission.value}>{permission.label}</option>
-				{/each}
-			</Select>
-			<Button
-				class="mb-1"
-				outline
-				size="sm"
-				iconClass="check-double"
-				on:click={selectAndDeselectAllPermissions}
-			>
-				<span class:d-none={selectedPermissionIds.size !== computedPermissions.length}>{translate('common:deselectAll', 'Deselect All')}</span>
-				<span class:d-none={selectedPermissionIds.size === computedPermissions.length}>{translate('common:selectAll', 'Select All')}</span>
-			</Button>
-		</div>
-	</div>
-</div>
-
-<style>
-	.cursor-pointer {
-		cursor: pointer;
-	}
-</style>
+<script lang="ts">
+	import type { i18n } from 'i18next'
+	import type { Merge } from 'type-fest'
+	import type { IconName, SiteLabel, HTMLDivAttributes } from './'
+	import type { Snippet } from 'svelte'
+
+	import { getContext } from 'svelte'
+	import camelCase from 'just-camel-case'
+	import Icon from '@isoftdata/svelte-icon'
+	import Button from '@isoftdata/svelte-button'
+	import Select from '@isoftdata/svelte-select'
+	import { getEventValue } from '@isoftdata/browser-event'
+	import { Table, Td, type Column } from '@isoftdata/svelte-table'
+	import { translate as defaultTranslate } from '@isoftdata/utility-string'
+	import { SvelteSet, SvelteMap } from 'svelte/reactivity'
+
+	const { t: translate } = getContext<i18n>('i18next') || { t: defaultTranslate }
+
+	type Permission = {
+		id: number
+		displayName: string
+		category: string
+		codeName: string
+	}
+	type ComputedPermission = Merge<
+		Permission,
+		{ value: PermissionValue; groupValue?: PermissionValue | undefined; computedValue?: PermissionValue }
+	>
+	type ComputedPermissionColumns = Array<Column<ComputedPermission>>
+	type PermissionValue = keyof typeof permissionValueList
+	type PermissionValueMap = Map<number, PermissionValue>
+
+	interface Props extends HTMLDivAttributes {
+		permissions: Array<Permission>
+		siteLabel?: SiteLabel
+		permissionValueChange?:
+			| ((change: { value: PermissionValue; permissionIds: Array<number> }) => void | Promise<void>)
+			| undefined
+		icon?: IconName
+		cardHeaderTitle?: string
+		permissionValueMap: PermissionValueMap
+		groupPermissionValueMap?: PermissionValueMap | undefined
+		children?: Snippet
+	}
+
+	let {
+		permissions,
+		siteLabel = 'Site',
+		permissionValueChange = undefined,
+		icon = 'user-lock',
+		cardHeaderTitle = translate('common:permissions', 'Permissions'),
+		permissionValueMap = $bindable(new SvelteMap()),
+		groupPermissionValueMap = undefined,
+		children,
+		...rest
+	}: Props = $props()
+
+	let selectedPermissionIds: SvelteSet<number> = $state(new SvelteSet())
+	let selectedPermissionValue: string | null = $state(null)
+
+	const permissionColumns: ComputedPermissionColumns = getColumns(groupPermissionValueMap)
+	const permissionValueList = {
+		NONE: { label: translate('common:permissionLevel.none', 'None'), value: 'NONE', color: 'danger' },
+		SITE: {
+			label: translate(`common:permissionLevel.${siteLabel.toLowerCase()}`, siteLabel),
+			value: 'SITE',
+			color: 'primary',
+		},
+		GLOBAL: { label: translate('common:permissionLevel.global', 'Global'), value: 'GLOBAL', color: 'success' },
+	}
+
+	function getColumns(groupPermissionValueMap: PermissionValueMap | undefined): ComputedPermissionColumns {
+		let columns: ComputedPermissionColumns = [
+			{
+				property: 'value',
+				name: groupPermissionValueMap ? translate('common:user', 'User') : translate('common:permission', 'Permission'),
+				width: '1rem',
+			},
+			{ property: 'category', name: translate('common:category', 'Category') },
+			{ property: 'displayName', name: translate('common:name', 'Name') },
+		]
+
+		if (groupPermissionValueMap) {
+			columns.splice(
+				1,
+				0,
+				{
+					property: 'groupValue',
+					name: translate('common:group', 'Group'),
+					align: 'center',
+					width: '1rem',
+					minWidth: '25%',
+				},
+				{
+					property: 'computedValue',
+					name: translate('common:access', 'Access'),
+					align: 'center',
+					width: '1rem',
+					minWidth: '25%',
+				},
+			)
+		}
+
+		return columns
+	}
+
+	function selectPermissions(permissionId: number) {
+		selectedPermissionIds.has(permissionId)
+			? selectedPermissionIds.delete(permissionId)
+			: selectedPermissionIds.add(permissionId)
+	}
+
+	function selectAndDeselectAllPermissions() {
+		if (selectedPermissionIds.size === computedPermissions.length) {
+			selectedPermissionIds.clear()
+			selectedPermissionValue = null
+		} else {
+			selectedPermissionIds = new SvelteSet(permissions.map(permission => permission.id))
+		}
+	}
+
+	const getButtonColor = (optionValue: string, permissionValue: PermissionValue) =>
+		optionValue === permissionValue ? permissionValueList[optionValue].color : 'outline-secondary'
+
+	const isValidPermissionValue = (value: string): value is PermissionValue =>
+		Object.keys(permissionValueList).includes(value)
+
+	async function updatePermissionValues(event: Event, permissionIds: SvelteSet<number>) {
+		const newValue = getEventValue(event)
+		if (isValidPermissionValue(newValue)) {
+			const permissionIdsArray = Array.from(permissionIds)
+			for (const id of permissionIdsArray) {
+				permissionValueMap.set(id, newValue)
+			}
+			permissionValueMap = permissionValueMap
+			await permissionValueChange?.({
+				value: newValue,
+				permissionIds: permissionIdsArray,
+			})
+		}
+	}
+
+	function getComputedPermissions(
+		permissions: Array<Permission>,
+		permissionValueMap: PermissionValueMap,
+		groupPermissionValueMap: PermissionValueMap | undefined,
+	): Array<ComputedPermission> {
+		return permissions.map(permission => {
+			const value = permissionValueMap.get(permission.id) ?? 'NONE'
+			const groupValue = groupPermissionValueMap?.get(permission.id)
+
+			return {
+				...permission,
+				displayName: translate(`permissions:${camelCase(permission.codeName)}.displayName`, permission.displayName),
+				category: translate(`permissions:categories.${camelCase(permission.category)}`, permission.category),
+				value,
+				groupValue,
+				computedValue:
+					(value === 'NONE' && groupValue) || (value === 'SITE' && groupValue === 'GLOBAL') ? groupValue : value,
+			}
+		})
+	}
+
+	let computedPermissions = $derived.by(() =>
+		getComputedPermissions(permissions, permissionValueMap, groupPermissionValueMap),
+	)
+
+	$inspect(computedPermissions)
+</script>
+
+<div
+	class="card"
+	{...rest}
+>
+	<div class="card-header">
+		<h5 class="mb-0">
+			<Icon
+				{icon}
+				class="mr-1 me-1"
+			/>
+			{cardHeaderTitle}
+		</h5>
+	</div>
+	<div class="card-body">
+		<Table
+			class="mb-0"
+			parentClass="mh-60vh overflow-y-auto"
+			filterPlaceholder={translate('common:filterPermissions', 'Filter Permissions')}
+			filterColumnClass="col-6 col-lg-4 align-self-end"
+			rows={computedPermissions}
+			columns={permissionColumns}
+			responsive
+			filterEnabled
+		>
+			{#snippet children({ row: permission })}
+				<tr
+					onclick={() => selectPermissions(permission.id)}
+					class:table-primary={selectedPermissionIds.has(permission.id)}
+					class="cursor-pointer"
+				>
+					<Td property="value">
+						<div
+							class="btn-group btn-group-toggle"
+							data-toggle="buttons"
+						>
+							{#each Object.values(permissionValueList) as permissionValue}
+								<label class="btn btn-sm btn-{getButtonColor(permissionValue.value, permission.value)} cursor-pointer">
+									<input
+										class="btn-check"
+										type="radio"
+										autocomplete="off"
+										name={permission.value}
+										value={permissionValue.value}
+										onchange={e => updatePermissionValues(e, new SvelteSet([permission.id]))}
+									/>
+									{permissionValue.label}
+								</label>
+							{/each}
+						</div>
+					</Td>
+					{#if groupPermissionValueMap}
+						<Td
+							property="groupValue"
+							class="px-4"
+						>
+							<span class="badge badge-pill bg-{permissionValueList[permission.groupValue ?? 'NONE'].color}"
+								>{permissionValueList[permission.groupValue ?? 'NONE'].label}</span
+							>
+						</Td>
+						<Td
+							property="computedValue"
+							class="px-4"
+						>
+							<span class="badge badge-pill bg-{permissionValueList[permission.computedValue ?? 'NONE'].color}"
+								>{permissionValueList[permission.computedValue ?? 'NONE'].label}</span
+							>
+						</Td>
+					{/if}
+					<Td property="category">{permission.category}</Td>
+					<Td property="displayName">{permission.displayName}</Td>
+				</tr>
+			{/snippet}
+		</Table>
+		{@render children?.()}
+	</div>
+	<div class="card-footer">
+		<div class="d-flex justify-content-between align-items-end">
+			<Select
+				label="{translate('common:setSelectedTo', 'Set Selected To')}:"
+				bind:value={selectedPermissionValue}
+				showEmptyOption={selectedPermissionValue === null}
+				emptyValue={null}
+				emptyText={translate('common:selectValue', 'Select a Value')}
+				labelParentClass="form-inline mr-2 me-2"
+				labelClass="mr-2 me-2 p-0"
+				disabled={selectedPermissionIds.size === 0}
+				onchange={e => {
+					updatePermissionValues(e, selectedPermissionIds)
+					selectedPermissionIds.clear()
+					selectedPermissionValue = null
+				}}
+			>
+				{#each Object.values(permissionValueList) as permission}
+					<option value={permission.value}>{permission.label}</option>
+				{/each}
+			</Select>
+			<Button
+				class="mb-1"
+				outline
+				size="sm"
+				iconClass="check-double"
+				onclick={selectAndDeselectAllPermissions}
+			>
+				<span class:d-none={selectedPermissionIds.size !== computedPermissions.length}
+					>{translate('common:deselectAll', 'Deselect All')}</span
+				>
+				<span class:d-none={selectedPermissionIds.size === computedPermissions.length}
+					>{translate('common:selectAll', 'Select All')}</span
+				>
+			</Button>
+		</div>
+	</div>
+</div>
+
+<style>
+	.cursor-pointer {
+		cursor: pointer;
+	}
+</style>

package/dist/PermissionList.svelte.d.ts

@@ -1,35 +1,22 @@
-import { SvelteComponent } from "svelte";
 import type { IconName, SiteLabel, HTMLDivAttributes } from './';
-declare const __propDef: {
-    props: HTMLDivAttributes & {
-        permissions: Array<{
-            id: number;
-            displayName: string;
-            category: string;
-            codeName: string;
-        }>;
-        siteLabel?: SiteLabel;
-        permissionValueChange?: ((change: {
-            value: "NONE" | "SITE" | "GLOBAL";
-            permissionIds: Array<number>;
-        }) => void | Promise<void>) | undefined;
-        icon?: IconName;
-        cardHeaderTitle?: string;
-        permissionValueMap: Map<number, "NONE" | "SITE" | "GLOBAL">;
-        groupPermissionValueMap?: Map<number, "NONE" | "SITE" | "GLOBAL"> | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type PermissionListProps = typeof __propDef.props;
-export type PermissionListEvents = typeof __propDef.events;
-export type PermissionListSlots = typeof __propDef.slots;
-export default class PermissionList extends SvelteComponent<PermissionListProps, PermissionListEvents, PermissionListSlots> {
-}
-export {};
+import type { Snippet } from 'svelte';
+declare const PermissionList: import("svelte").Component<HTMLDivAttributes & {
+    permissions: Array<{
+        id: number;
+        displayName: string;
+        category: string;
+        codeName: string;
+    }>;
+    siteLabel?: SiteLabel;
+    permissionValueChange?: ((change: {
+        value: "NONE" | "SITE" | "GLOBAL";
+        permissionIds: Array<number>;
+    }) => void | Promise<void>) | undefined;
+    icon?: IconName;
+    cardHeaderTitle?: string;
+    permissionValueMap: Map<number, "NONE" | "SITE" | "GLOBAL">;
+    groupPermissionValueMap?: Map<number, "NONE" | "SITE" | "GLOBAL"> | undefined;
+    children?: Snippet;
+}, {}, "permissionValueMap">;
+type PermissionList = ReturnType<typeof PermissionList>;
+export default PermissionList;