Fluent

Setup

To use the Fluent components effectively, it's important to configure their styles and constraints. Setup should be performed at the start of your app instance, such as in main.ts/main.js. Here's how you can set it up:

1. Configure the Styling:

The FluentStyling class provides various properties to style Fluent components. For instance, you can set the accent color, font size, height, and other properties.

import { Fluent } from 'path-to-fluent';

new Fluent().modifyStyling((styling) => {
  styling.accentColor = "#FF6300";
  styling.fontSize = 15;
  //... add more styling modifications if needed
}).apply();

2. Configure Constraints:

The FluentConstraints class lets you define constraints, such as the maximum width for mobile views.

new Fluent().modifyConstraints((constraints) => {
  constraints.mobileMaxWidthPixels = 700;
  //... add more constraint modifications if needed
}).apply();

3. Applying the Configuration:

After you've made your modifications to the styling and constraints, you need to call the .apply() method to ensure that these settings take effect:

new Fluent().modifyStyling((styling) => {
  //... styling modifications
}).modifyConstraints((constraints) => {
  //... constraint modifications
}).apply();

4. Accessing the Active Configuration:

If you need to access the active configuration at any point in your application, you can use the static applied method:

let activeFluentConfig = Fluent.applied;

5. Removal:

If you wish to remove the applied styles and constraints, you can do so using the remove method:

let fluentConfig = new Fluent();
// ... modifications
fluentConfig.apply();

// Later in your code
fluentConfig.remove();

Remember to replace 'path-to-fluent' with the correct path to where the Fluent classes are located in your project. Also, customize the styling and constraints as per your requirements.

Following the above setup ensures that the Fluent components render with the desired styles and constraints across your application.

Components Documentation

1. FluentButton

This is a button component that allows custom styling and emits a click event.

Properties:

• type: Specifies the button's style.

  • Type: "solid" | "outline" | "text"
  • Default: "solid"

• isRounded: Determines if the button should have fully rounded corners.

  • Type: Boolean
  • Default: false

• isEnabled: Determines if the button is enabled or disabled.

  • Type: Boolean
  • Default: true

Usage:

<FluentButton appearance="solid" :isRounded="true" :isEnabled="false" />

2. FluentSegmentControl

This is a component that allows users to select between different segments.

Properties:

• modelValue: The value which represents the current selected segment's index.

  • Type: Number
  • Default: 0

• items: An array of segments that the control will display.

  • Type: FluentSegmentControlItem[]
  • Required: true

• isEnabled: Determines if the segment control is enabled or disabled.

  • Type: Boolean
  • Default: true

• isRounded: Determines if the segment control should have fully rounded corners.

  • Type: Boolean
  • Default: false

Usage:

<FluentSegmentControl v-model="selectedIndex" :items="segmentItems" :isEnabled="true" />

3. FluentSegmentControlItem

Represents an item in the FluentSegmentControl.

Constructor:

It has a private constructor which means you can't instantiate it directly. Instead, use the static methods provided.

• title(title: string, onSelection: SelectionHandler): Creates an item with a title.
• svg(svg: SegmentControlItemSvg, onSelection: SelectionHandler): Creates an item with an SVG.

Usage:

let segmentItemWithTitle = FluentSegmentControlItem.title("Item 1", selectionHandler);
let segmentItemWithSvg = FluentSegmentControlItem.svg(svgItem, selectionHandler);

4. FluentSegmentControlItemSvg

Represents the SVG for a FluentSegmentControlItem.

Constructor:

• path: Path to the SVG.
• version: SVG version number.
• options: Additional options for SVG:
  • isCachedLocally: Boolean (Optional)
  • updatesFill: Determines if the SVG fill color is updated. Default: true.
  • updatesStroke: Determines if the SVG stroke is updated. Default: true.
  • scale: Scale of the SVG. Default: 1.

Usage:

let svgItem = new FluentSegmentControlItemSvg("path/to/svg", 1, {
    isCachedLocally: true,
    updatesFill: true,
    updatesStroke: false,
    scale: 1.5
});

Field Components

FluentField

A versatile field component that can handle different types of inputs such as text, password, email, and others.

Properties:

• input: The value of the input field.

  • Type: String
  • Required: true

• type: Specifies the type of input.

  • Type: "text" | "password" | "email" | "number" | "date" | "search" | "tel" | "submit"
  • Default: "text"

• placeholder: The text that is displayed when the input field is empty.

  • Type: String
  • Default: ""

• clearOnFocus: Determines if the input should be cleared when it receives focus.

  • Type: Boolean
  • Default: false

Events:

• onPaste: Triggered when text is pasted into the input.
• blur: Triggered when the input loses focus.
• focus: Triggered when the input receives focus.

Usage:

<FluentField v-model:input="myInput" :type="'email'" :placeholder="'Enter your email'" @update:input="handleInput" />

FluentNumberField

A specialized field component for handling numeric inputs.

Properties:

• input: The value of the number field.

  • Type: Number
  • Required: true

• placeholder: The text that is displayed when the input field is empty.

  • Type: String
  • Default: ""

• unit: An optional unit to display alongside the number (e.g., "kg", "lbs").

  • Type: String
  • Optional

Usage:

<FluentNumberField v-model:input="myNumber" :placeholder="'Enter a number'" :unit="'kg'" @update:input="handleInput" />

FluentStyleBlock Class

Overview

FluentStyleBlock is a utility class designed to facilitate dynamic manipulation of CSS styles directly within the DOM. It allows developers to create, update, and remove CSS style blocks programmatically.

Class Properties

id (type: string)

This represents the unique identifier for the style block. An il-style- prefix is added by default to the ID provided during instantiation.

Constructor

The constructor accepts a single parameter, id, which specifies the ID for the style block (with a prefixed il-style- added).

const styleBlock = new FluentStyleBlock('custom-style-1');
// This will create a style block with the id 'il-style-custom-style-1'

Methods

addCss(css: string): void

Adds or updates the CSS content of the style block.

• css: The CSS content as a string.

styleBlock.addCss('.example { background-color: red; }');

addCssDefinitionFromArray(definition: string, properties: Array<string>)

Builds and adds a CSS rule based on the provided definition and properties. The properties are validated to ensure they end with a semicolon.

• definition: The CSS selector or rule definition.
• properties: An array of CSS properties.

styleBlock.addCssDefinitionFromArray('.example', ['background-color: red', 'color: white']);
// This will generate and add the CSS: .example { background-color: red; color: white; }

remove(): void

Removes the style block from the DOM.

styleBlock.remove();

Usage Example

const styleBlock = new FluentStyleBlock('custom-style-1');

// Add individual CSS
styleBlock.addCss('.example-class { color: blue; }');

// Add CSS from array definition
styleBlock.addCssDefinitionFromArray('.another-class', ['margin: 10px', 'padding: 20px;']);

// Remove the style block when no longer needed
styleBlock.remove();

Tips

1. Ensure that the IDs used for instantiation are unique to prevent unintended overwriting of styles.
2. Make use of the remove() method to clean up styles that are no longer needed, preventing potential style clashes and keeping the DOM clean.