🎩 You're Invited:Meet the Socket team at Black Hat in Las Vegas, August 3-6.RSVP →
Sign In

@isoftdata/svelte-modal

Package Overview
Dependencies
Maintainers
12
Versions
43
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@isoftdata/svelte-modal - npm Package Compare versions

Comparing version
2.5.1
 to
2.6.0
+44
-22
dist/Modal.svelte

@@ -19,11 +19,13 @@ <script

<script lang="ts">
import type { ClassValue } from 'svelte/elements'
import type { Attachment } from 'svelte/attachments'
import type { HTMLFormAttributes } from 'svelte/elements'
import type { i18n } from 'i18next'
import type { ComponentProps, Snippet } from 'svelte'
import type { ButtonColors } from '@isoftdata/utility-bootstrap'
import { fade, fly } from 'svelte/transition'
import Button from '@isoftdata/svelte-button'
import type { ButtonColors } from '@isoftdata/utility-bootstrap'
import { translate as defaultTranslate } from '@isoftdata/utility-string'
import type { ClassValue } from 'svelte/elements'
import type { Attachment } from 'svelte/attachments'
import type { HTMLFormAttributes } from 'svelte/elements'
import Dropdown from '@isoftdata/svelte-dropdown'

@@ -121,2 +123,4 @@ let previouslyFocusedElement: HTMLElement | null = null

children?: Snippet
/** Dropdown items to place under the confirm button. If passed, confirm Button will be a \<Dropdown split\> component instead*/
confirmDropdownItems?: Snippet
}

@@ -170,2 +174,3 @@

footer,
confirmDropdownItems,
// Deprecated props - Remove in v3?

@@ -202,2 +207,25 @@ confirmButtonFormId = '',

const confirmButtonProps = $derived({
id: `confirm-modal-${uniqueId}`,
icon: confirmButtonIcon,
type: form ? 'submit' : confirmButtonType,
form: computedFormId,
color: confirmButtonColor,
size: confirmButtonSize,
outline: confirmButtonOutline,
title: confirmButtonTitle,
disabled: confirmButtonDisabled || savingInProgress,
isLoading: confirmButtonIsLoading || savingInProgress,
onclick: (e: MouseEvent | SubmitEvent) => {
// Don't call confirm if using a form, the form submit will do that.
if (!form) {
internalConfirm?.(e)
}
},
})
const computedConfirmButtonText = $derived(
savingInProgress ? translate('common:saving', 'Saving') + '...' : confirmButtonText,
)
function backdropMouseDown(event: MouseEvent) {

@@ -428,24 +456,18 @@ if (event.target instanceof HTMLDivElement && event.target.id === `modal-${uniqueId}`) {

{#if confirmShown}
{#if confirmShown && !confirmDropdownItems}
<Button
id="confirm-modal-{uniqueId}"
icon={confirmButtonIcon}
type={form ? 'submit' : confirmButtonType}
form={computedFormId}
color={confirmButtonColor}
size={confirmButtonSize}
outline={confirmButtonOutline}
title={confirmButtonTitle}
disabled={confirmButtonDisabled || savingInProgress}
isLoading={confirmButtonIsLoading || savingInProgress}
{...confirmButtonProps}
bind:button={confirmButton}
onclick={e => {
// Don't call confirm if using a form, the form submit will do that.
if (!form) {
internalConfirm?.(e)
}
}}
>
{savingInProgress ? translate('common:saving', 'Saving') + '...' : confirmButtonText}
{computedConfirmButtonText}
</Button>
{:else if confirmShown}
<Dropdown
{...confirmButtonProps}
split
dropdownItems={confirmDropdownItems}
bind:mainButton={confirmButton}
>
{computedConfirmButtonText}
</Dropdown>
{/if}

@@ -452,0 +474,0 @@ </div>

+5
-3
dist/Modal.svelte.d.ts

@@ -0,6 +1,6 @@

import type { ClassValue } from 'svelte/elements';
import type { HTMLFormAttributes } from 'svelte/elements';
import type { ComponentProps, Snippet } from 'svelte';
import type { ButtonColors } from '@isoftdata/utility-bootstrap';
import Button from '@isoftdata/svelte-button';
import type { ButtonColors } from '@isoftdata/utility-bootstrap';
import type { ClassValue } from 'svelte/elements';
import type { HTMLFormAttributes } from 'svelte/elements';
type Fullscreen = boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';

@@ -77,2 +77,4 @@ type Icon = ComponentProps<typeof Button>['icon'];

children?: Snippet;
/** Dropdown items to place under the confirm button. If passed, confirm Button will be a \<Dropdown split\> component instead*/
confirmDropdownItems?: Snippet;
}

@@ -79,0 +81,0 @@ declare const Modal: import("svelte").Component<Props, {

+3
-2
package.json
{
"name": "@isoftdata/svelte-modal",
"version": "2.5.1",
"version": "2.6.0",
"exports": {

@@ -50,2 +50,3 @@ ".": {

"@isoftdata/svelte-button": "^2.1.1",
"@isoftdata/svelte-dropdown": "^2.3.1",
"@isoftdata/utility-bootstrap": "^2.2.1",

@@ -56,3 +57,3 @@ "@isoftdata/utility-string": "^2.1.0",

"engines": {
"pnpm": "10.x"
"pnpm": "11.x"
},

@@ -59,0 +60,0 @@ "scripts": {

+40
-39
README.md

@@ -36,41 +36,42 @@ # Svelte Modal

| Name | Type | Description | Default Value |
| ---------------------- | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
| backdropClickCancels | `boolean` | Determines whether clicking on the backdrop should close the modal. | `true` |
| bodyClass | `ClassValue` | Additional CSS classes to apply to the modal body element. | `''` |
| cancelButtonColor | `ButtonColors` | The Bootstrap class to apply to the cancel button. | `"secondary"` |
| cancelButtonIcon | [`IconName \| IconProps`](https://github.com/ISoft-Data-Systems/svelte-component-icon/blob/main/src/lib/Icon.svelte#L22-L43) | The FontAwesome icon to display on the cancel button, _without_ the preceeding `fa-`. | `"times"` |
| cancelButtonOutline | `boolean` | Whether the button should be outlined, instead of solid. | `false` |
| cancelButtonText | `string` | The text to display on the cancel button. | `"Close"` |
| cancelShown | `boolean` | Determines whether the cancel button is shown in the modal (This is the Cancel button at the bottom)footer. | `true` |
| cancelButton | `HTMLButtonElement` | A reference to the cancel `HTMLButtonElement`. | `undefined` (bindable) |
| closeId | `string` | The ID of the close button. | `"close-modal"` |
| closeShown | `boolean` | Determines whether the close button is shown in the modal (This is the X in the top right corner) header. | `true` |
| confirmButtonColor | `ButtonColors` | The Bootstrap color class to apply to the confirm button. | `"success"` |
| confirmButtonDisabled | `boolean` | Determines whether the confirm button is disabled. | `false` |
| confirmButtonIcon | [`IconName \| IconProps`](https://github.com/ISoft-Data-Systems/svelte-component-icon/blob/main/src/lib/Icon.svelte#L22-L43) | The FontAwesome icon to display on the confirm button, _without_ the preceeding `fa-`. | `"check"` |
| confirmButtonIsLoading | `boolean` | Whether to disable and show a spinner on the "Confirm" button. | `false` |
| confirmButtonOutline | `boolean` | Whether the button should be outlined, instead of solid. | `false` |
| confirmButtonText | `string` | The text to display on the confirm button. | `"Confirm"` |
| confirmButtonTitle | `string` | The title of the confirm button | `""` |
| confirmShown | `boolean` | Determines whether the confirm button is shown in the modal footer. | `true` |
| confirmButton | `HTMLButtonElement` | A reference to the confirm `HTMLButtonElement`. | `undefined` (bindable) |
| dialogClass | `ClassValue` | Additional CSS classes to apply to the modal dialog element. | `''` |
| footerClass | `ClassValue` | Custom CSS class to apply to the modal footer element. | `"align-items-end"` |
| footerShown | `boolean` | Determines whether the modal footer is shown. | `true` |
| footerStyle | `string` | Any additional CSS styles to add to the modal footer. | `""` |
| form | `boolean` | Whether to wrap the modal body content in a `<form>` element. See the [Making the confirm button submit the form](#making-the-confirm-button-submit-the-form) section below. | `false` |
| formProps | `Omit<HTMLFormAttributes, 'onsubmit'>` | Additional attributes to add to the `<form>` element when the `form` prop is set to `true`. For `onsubmit`, use the `confirm` callback instead. | `{}` |
| fullscreen | `boolean \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl'` | Breakpoint to apply [fullscreen](https://getbootstrap.com/docs/5.3/components/modal/#fullscreen-modal) from that size and down. Boolean `true` for all sizes. This option is only available with Bootstrap 5. | `false` |
| headerShown | `boolean` | Determines whether the modal header is shown. | `true` |
| id | `string` | The ID of the `modal-body` element. | `"itModal"` |
| savingInProgress | `boolean` | Whether to disable the confirm/cancel buttons and show "Saving..." on the confirm button. | `false` |
| setFocusInModal | `boolean` | Determines whether to set focus to the modal when it is opened, and restore focus to the previously focused element when it is closed. Learn more in [Handling Element Focus](#handling-element-focus). | `true` |
| show | `boolean` | Determines whether the modal is currently visible or hidden. You probably want to `bind:` to this. | `false` (bindable) |
| showModalContent | `boolean` | Determines whether to show the modal content (header, body, and footer) or hide it (can be used for a loading state). | `true` |
| size | `"sm" \| "" \| "lg" \| "xl" \| "xxl"` | Determines the maximum width of the modal. | `""` |
| subtitle | `string` | An optional subtitle to display below the main title. | `''` |
| title | `string` | The main title of the modal. | `"Confirm"` |
| transitionMode | `string` | The transition mode for the modal and its content (possible values: `"present"`, `"cardMovePrevious"`, `"cardMoveNext"`). | `"present"` |
| zIndex | `number` | The z-index of the modal element. | `20000` |
| Name | Type | Description | Default Value |
| ---- | ---- | ---------- | ---- |
| backdropClickCancels | `boolean` | Determines whether clicking on the backdrop should close the modal. | `true` |
| bodyClass | `ClassValue` | Additional CSS classes to apply to the modal body element. | `''` |
| cancelButtonColor | `ButtonColors` | The Bootstrap class to apply to the cancel button. | `"secondary"` |
| cancelButtonIcon | [`IconName \| IconProps`](https://github.com/ISoft-Data-Systems/svelte-component-icon/blob/main/src/lib/Icon.svelte#L22-L43) | The FontAwesome icon to display on the cancel button, _without_ the preceeding `fa-`. | `"times"` |
| cancelButtonOutline | `boolean` | Whether the button should be outlined, instead of solid. | `false` |
| cancelButtonText | `string` | The text to display on the cancel button. | `"Close"` |
| cancelShown | `boolean` | Determines whether the cancel button is shown in the modal (This is the Cancel button at the bottom)footer. | `true` |
| cancelButton | `HTMLButtonElement` | A reference to the cancel `HTMLButtonElement`. | `undefined` (bindable) |
| closeId | `string` | The ID of the close button. | `"close-modal"` |
| closeShown | `boolean` | Determines whether the close button is shown in the modal (This is the X in the top right corner) header. | `true` |
| confirmButtonColor | `ButtonColors` | The Bootstrap color class to apply to the confirm button. | `"success"` |
| confirmButtonDisabled | `boolean` | Determines whether the confirm button is disabled. | `false` |
| confirmButtonIcon | [`IconName \| IconProps`](https://github.com/ISoft-Data-Systems/svelte-component-icon/blob/main/src/lib/Icon.svelte#L22-L43) | The FontAwesome icon to display on the confirm button, _without_ the preceeding `fa-`. | `"check"` |
| confirmButtonIsLoading | `boolean` | Whether to disable and show a spinner on the "Confirm" button. | `false` |
| confirmButtonOutline | `boolean` | Whether the button should be outlined, instead of solid. | `false` |
| confirmButtonText | `string` | The text to display on the confirm button. | `"Confirm"` |
| confirmButtonTitle | `string` | The title of the confirm button | `""` |
| confirmDropdownItems | `Snippet` | A snippet that, if passed, turns the confirm Button into a Dropdown. The contents of this snippet will be applied to the `dropdownItems` slot of that dropdown | `undefined` |
| confirmShown | `boolean` | Determines whether the confirm button is shown in the modal footer. | `true` |
| confirmButton | `HTMLButtonElement` | A reference to the confirm `HTMLButtonElement`. | `undefined` (bindable) |
| dialogClass | `ClassValue` | Additional CSS classes to apply to the modal dialog element. | `''` |
| footerClass | `ClassValue` | Custom CSS class to apply to the modal footer element. | `"align-items-end"` |
| footerShown | `boolean` | Determines whether the modal footer is shown. | `true` |
| footerStyle | `string` | Any additional CSS styles to add to the modal footer. | `""` |
| form | `boolean` | Whether to wrap the modal body content in a `<form>` element. See the [Making the confirm button submit the form](#making-the-confirm-button-submit-the-form) section below. | `false` |
| formProps | `Omit<HTMLFormAttributes, 'onsubmit'>` | Additional attributes to add to the `<form>` element when the `form` prop is set to `true`. For `onsubmit`, use the `confirm` callback instead. | `{}` |
| fullscreen | `boolean \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl'` | Breakpoint to apply [fullscreen](https://getbootstrap.com/docs/5.3/components/modal/#fullscreen-modal) from that size and down. Boolean `true` for all sizes. This option is only available with Bootstrap 5. | `false` |
| headerShown | `boolean` | Determines whether the modal header is shown. | `true` |
| id | `string` | The ID of the `modal-body` element. | `"itModal"` |
| savingInProgress | `boolean` | Whether to disable the confirm/cancel buttons and show "Saving..." on the confirm button. | `false` |
| setFocusInModal | `boolean` | Determines whether to set focus to the modal when it is opened, and restore focus to the previously focused element when it is closed. Learn more in [Handling Element Focus](#handling-element-focus). | `true` |
| show | `boolean` | Determines whether the modal is currently visible or hidden. You probably want to `bind:` to this. | `false` (bindable) |
| showModalContent | `boolean` | Determines whether to show the modal content (header, body, and footer) or hide it (can be used for a loading state). | `true` |
| size | `"sm" \| "" \| "lg" \| "xl" \| "xxl"` | Determines the maximum width of the modal. | `""` |
| subtitle | `string` | An optional subtitle to display below the main title. | `''` |
| title | `string` | The main title of the modal. | `"Confirm"` |
| transitionMode | `string` | The transition mode for the modal and its content (possible values: `"present"`, `"cardMovePrevious"`, `"cardMoveNext"`). | `"present"` |
| zIndex | `number` | The z-index of the modal element. | `20000` |

@@ -77,0 +78,0 @@ ## Snippets