@iliasnolsson/fluent-dialog

@iliasnolsson/fluent-dialog is a package that provides Vue components for creating fluent styled popups and dialogs, allowing a seamless and modern interaction experience.

Features:

1. FluentDialog - A component that displays a dialog box.
2. FluentInputDialog - A component that displays a dialog box with input functionality.
3. FluentDialogStyling - A utility class for modifying the default dialog styles.

Installation:

npm install @iliasnolsson/fluent-dialog

Usage:

FluentDialog

Props:

• isOpen: A boolean indicating whether the dialog is open or not. (required)
• title: The title of the dialog. (required)
• message: The message content of the dialog. Can also be null. (required)
• dismissText: Text for the dismiss action.
• confirmationText: Text for the confirmation action. Specifying no confirmation will result in a single button dialog.
• confirmationEnabled: A boolean indicating whether the confirmation button is enabled or not. Defaults to true.

Events:

• confirmed: Triggered when confirmed action is taken.
• update:isOpen: Event for updating the isOpen prop.

Example:

<FluentDialog 
    :isOpen="true" 
    title="Confirmation" 
    message="Are you sure you want to proceed?" 
    dismissText="Cancel"
    confirmationText="Confirm"
/>

FluentInputDialog

Props:

• isOpen: A boolean indicating whether the dialog is open or not. (required)
• input: The initial input string. (required)
• title: The title of the dialog. (required)
• message: The message content of the dialog. Can also be null. (required)
• dismissText: Text for the dismiss action.
• confirmationText: Text for the confirmation action. Defaults to "Done".

Events:

• confirmed: Triggered when confirmed action is taken.
• update:isOpen: Event for updating the isOpen prop.
• update:input: Event for updating the input prop.

Example:

<FluentInputDialog 
    :isOpen="true" 
    input="Type here"
    title="Input needed" 
    message="Please provide your input." 
/>

FluentDialogStyling

For custom styling of your dialogs, you can use the FluentDialogStyling class. This utility class helps modify the default styles applied to the FluentDialog components.

Methods:

• modify: To modify styles.
• apply: To apply the modified styles.
• remove: To remove the applied styles.

Example:

const dialogStyling = new FluentDialogStyling();
dialogStyling.modify(styling => {
    styling.borderRadius = 15;
    styling.backgroundColor = "rgba(240,240,240,0.95)";
}).apply();

Setup:

Setting up Fluent styling is essential for the correct appearance of the components.

Make sure to do the setup at the start of your app. You can get more details on this setup by referring to the @iliasnolsson/fluent package.

new Fluent().modifyStyling((styling) => {
    // Modify general Fluent styles here
}).apply();

new FluentDialogStyling().modify((styling) => {
    // Modify FluentDialog specific styles here
}).apply();

Dependencies:

Ensure you have @iliasnolsson/fluent installed for the fluent styling setup.

License:

MIT