templating

Description:

  • Functions that are primarily used for templating (vue, static sites, etc)

Source:

Functions that are primarily used for templating (vue, static sites, etc)

Methods

(static) normalizeClassString(classes) → {String}

Description:

  • Creates a class string from various sources (arrays, objects, strings). A convenience wrapper for normalizeClasses that returns a string.

Source:
Example
// normalizeClassString(['button', isPrimary && 'is-primary', 'large'])
  // -> "button is-primary large" or "button large"
  
  // normalizeClassString({ button: true, 'is-active': isActive })
  // -> "button is-active" or "button"
Parameters:
Name Type Description
classes Object | Array | String

The classes to process.
Returns:

A space-separated class string.

Type
String

(static) normalizeClasses(inputClasses) → {Set}

Description:

  • Helper function to process various Vue like class binding types

    • Used for modifiers
    • Handles same structure as Vue class bindings
Source:
Parameters:
Name Type Description
inputClasses Object | Array | String
Returns:

Set of unique classnames

Type
Set

(static) optional(value, fallbackopt) → {*}

Description:

  • Returns a value if it is truthy, otherwise returns a fallback. A simpler version of when() for template literals where you only need to output a value as-is.

Source:
Example
// Optional class name
  const className = `item ${optional(activeClass)}`;
  
  // Providing a default for an optional name
  const displayName = `Welcome, ${optional(user.name, "Guest")}!`;
Parameters:
Name Type Attributes Default Description
value *

The value to check.
fallback * <optional>
 ""

The value to return if value is falsy. Defaults to an empty string.
Returns:

The value if it's truthy, otherwise the fallback.

Type
*

(static) when(cond, callback, fallbackopt) → {*}

Description:

  • Conditionally executes a callback, ideal for logic within template literals. If the condition is truthy, the callback is executed and its result is returned. Otherwise, the fallback value is returned.

Source:
Example
const user = { name: "Joe" };
  const guest = null;
   
  // Example with a truthy condition:
  const welcomeUser = `<div>${when(user, u => `Welcome, ${u.name}`)}...`;
  // welcomeUser is "<div>Welcome, Joe..."
 
  // Example with a falsy condition and a custom fallback:
  const welcomeGuest = `<div>${when(guest, g => `Welcome, ${g.name}`, "Welcome, Guest!")}</div>`;
  // welcomeGuest is "<div>Welcome, Guest!</div>"
Parameters:
Name Type Attributes Default Description
cond *

The condition to evaluate.
callback function

Function to execute if cond is truthy. It receives cond as its argument.
fallback * <optional>
 ""

Value to return if cond is falsy. Defaults to an empty string.
Returns:

The result of callback(cond) if cond is truthy, otherwise the fallback value.

Type
*