YaiInputUtils Demo

Headless Utils for YEH
Markup

<form method="post"
    data-submit="exampleFormSubmit"
    data-prevent-default>

    <input type="text"
        name="username"
        minlength="3"
        maxlength="50"
        autocomplete="username"
        data-input="validateInput"
        data-yai-util="clear"
        data-wrapper="input"
        data-label="Username"
        data-label-wrapper="fancy-label"
        required>

    <input type="password"
        name="password"
        minlength="3"
        maxlength="30"
        autocomplete="current-password"
        data-input="validateInput"
        data-yai-util="password-toggle clear"
        data-wrapper="input"
        data-label="Password"
        required>

    <hr />

    <input type="text"
        name="testtext"
        minlength="3"
        maxlength="10"
        data-input="validateInput"
        data-yai-util="clear"
        data-wrapper="input"
        data-label="Test"
        data-error-message="Input is invalid">

    <hr />

    <input type="number"
        name="someNumber"
        max="25"
        data-input="validateInput"
        data-yai-util="clear"
        data-wrapper="input">

    <hr />

    <textarea
        name="comment"
        minlength="3"
        maxlength="10"
        data-input="validateInput"
        data-yai-util="clear"
        data-wrapper="input"
        data-label="Test"
    ></textarea>

    <hr />

    <select
        name="subscription"
        data-input="validateInput"
        data-yai-util="clear"
        data-wrapper="input"
        data-label="Test"
    >
        <option value="">Select Subscription</option>
        <option value="mini">Mini</option>
        <option value="medium">Medium</option>
        <option value="tier">TIER</option>
    </select>

    <hr />

    <div class="app-form-group">
        <button type="button" data-click="openExampleModal">Info</button>
    </div>

    <hr />

    <div class="app-form-group submit-button-container">
        <button type="submit">Submit</button>
    </div>

</form>


<!--
    Single template with all utility wrappers
-->
<template id="yai-input-utils-template">
    <!-- Default wrapper (content injected into yai-util-body) -->
    <div class="app-form-group" data-wrapper="input">
        <div class="yai-util-body"></div>
    </div>

    <!-- Default label -->
    <label data-wrapper="label"></label>

    <!-- Optional fancy label wrapper -->
    <div class="fancy-label-wrapper" data-wrapper="fancy-label">
        <label></label>
        <span class="fancy-helper">help</span>
    </div>

    <!-- Default error message -->
    <span data-wrapper="error-message" role="alert"></span>

    <!-- Util: Toggle password -->
    <button type="button"
            data-auto-focus
            data-util="password-toggle"
            data-click="togglePassword"
            data-toggle-content="📛"
            class="yai-util-btn">👀</button>

    <!-- Util: clear input -->
    <button type="button"
            data-auto-focus
            data-util="clear"
            data-click="clearInput"
            class="yai-util-btn">✕</button>

    <!-- Util: copy to clipboard -->
    <button type="button"
            data-util="copy"
            data-click="copyToClipboard"
            data-success-content="✓"
            class="yai-util-btn">📋</button>

    <!-- Util: input char counter -->
    <span data-util="counter" class="yai-char-counter" data-role="counter">0</span>

    <!-- Util: required input element indicator; appended to label -->
    <span data-util="requiredIndicator" class="yai-required-indicator">*</span>
</template>