Harness-Vue-Bootstrap

Appearance

Input ​

Basic Example ​

A basic <input> element using Bootstrap 5 for styling. This component binds the input to a Harness-Vue filter. The harness-vue-bootstrap-input component is flexible and can accept various HTML5 <input> types.

Usage ​

kebab-case ​

html
    <harness-vue-bootstrap-input :filter="{'key': 'exampleInput', ...}" />

PascalCase ​

html
    <harnessVueBootstrapInput :filter="{'key': 'exampleInput', ...}" />

Page Definition ​

js
import { components } from '@rtidatascience/harness-vue-bootstrap'
components['harnessVueBootstrapInput'] // array syntax
components.harnessVueBootstrapInput // object syntax
'harnessVueBootstrapInput' // string syntax if mixin is installed

Include Single Option ​

Include a single option with the filter, and its key will be set as the default value.

Single Option Example ​

js
...
options: [
    {
        key: 'Example Input Option'
    }
],
...,

Props ​

additionalDescribedByIds ​

An array of IDs included in the aria-describedby attribute of the form control. Used when developers have additional elements that describe the given input.

  • Type: Array
  • Required: No
  • Default: []

appendHTML ​

Specify text to be appended to the input using a bootstrap input group.

  • Type: String
  • Required: No
  • Default: ``

Example ​

@rti.org
html
<harness-vue-bootstrap-input 
    :appendHTML="@rti.org"
    />

appendComponent ​

Specify a component to be appended to the input using a bootstrap input group. The component must be a div with class input-group-append.

  • Type: String
  • Required: No
  • Default: ``
html
<harness-vue-bootstrap-input 
    :appendHTML="component"
    />

datalist ​

Use the datalist feature from Bootstrap to autocomplete based on the harness-vue options.

  • Type: Boolean
  • Required: No
  • Default: false

Example ​

Click this input to see autocomplete options.
html
<harness-vue-bootstrap-input :datalist="true"/>

helperText ​

This property allows a developer to specify helper text to be rendered as Bootstrap help text.

  • Type: String
  • Required: No
  • Default: ''

Example ​

Helper text with contextual information
html
<harness-vue-bootstrap-input 
    :helperText="'Helper text with contextual information'"
    />

helperTextClass ​

This property allows a developer to specify a class to be appended to their helperText.

  • Type: String
  • Required: No
  • Default: ''

Example ​

Helper text with contextual information, styled as text-success
html
<harness-vue-bootstrap-input 
    :helperText="'Helper text with contextual information, styled as text-success'"
    :helperTextClass="'text-success'"
    />

helperTextPosition ​

This property allows a developer to specify that the helper text is rendered below the label or below the input.

  • Type: String
  • Required: No
  • Default: 'input'
html
<harness-vue-bootstrap-input :helperText="'Helper text with contextual information below label'" :helperTextPosition="'label'"/>

Example ​

Helper text with contextual information below label

inputClearButton ​

Adds a clear button to the end of the input group.

  • Type: Boolean
  • Required: No
  • Default: False

Example ​

html
<harness-vue-bootstrap-input :inputClearButton="true" />

labelPosition ​

Controls the position of the label in respect to the input.

  • Type: String
  • Required: No
  • Options:
    • 'horizontal'
    • 'vertical'
    • 'none'
    • 'floating'
  • Default: 'horizontal'

Horizontal Example ​

html
<harness-vue-bootstrap-input :labelPosition="'horizontal'" />

Vertical Example ​

html
<harness-vue-bootstrap-input :labelPosition="'vertical'" />

Floating Example ​

Note: Floating labels take precendence over append/prepend behavior, which is incompatible with floating labels.

html
<harness-vue-bootstrap-input :labelPosition="'floating'" />

None Example ​

html
<harness-vue-bootstrap-input :labelPosition="'none'" />

labelColumnSize ​

When used with :labelPosition="'horizontal'", this controls the width of the label in respect to the input. Horizontal layouts use the Bootstrap Grid, which functions on subdivisions of 12. The number given to this property will be the subdivision of 12 used to control the label portion of the row - for example, a labelColumnSize="4" would use col-4 for the label and col-8 for the input.

  • Type: Number
  • Required: No
  • Default: 6

Example 4 ​

html
<harness-vue-bootstrap-input :labelPosition="'horizontal'" :labelColumnSize="8" />

placeholder ​

Allows HTML input placeholder text.

  • Type: String
  • Required: No
  • Default: ``

Example ​

html
<harness-vue-bootstrap-input 
    :inputClearButton="'Your Input Here'"
    />

prependHTML ​

Specify text to be prepended to the input using a bootstrap input group.

  • Type: String
  • Required: No
  • Default: text

Example ​

@
html
<harness-vue-bootstrap-input 
    :prependHTML="'@'"
    />

prependComponent ​

Specify a component to be prepended to the input using a bootstrap input group. The component must be a div with class input-group-prepend.

  • Type: String
  • Required: No
  • Default: ``
html
<harness-vue-bootstrap-input 
    :prependComponent="component"
    />

synchronous ​

This property controls whether or not the filter automatically triggers Harness-Vue's loadData lifecycle hook on change. A 'synchronous' filter is 'in sync' with Harness-Vue's lifecycle, and therefore does trigger loadData when it changes.

  • Type: Boolean
  • Required: No
  • Default: true

type ​

You may specify the type of input the harness-vue-bootstrap-input accepts with the type prop.

  • Type: String
  • Required: No
  • Default: text

Example ​

html
<harness-vue-bootstrap-input 
    :type="password"
    />
html
<harness-vue-bootstrap-input 
    :type="range"
    :min="1"
    :max="10"
    :step="2"
    />

min ​

For number inputs, this sets the minimum allowed value.

  • Type: Number
  • Required: No

max ​

For number inputs, this sets the maximum allowed value.

  • Type: Number
  • Required: No

step ​

For number inputs, this sets the step on click.

  • Type: Number
  • Required: No

Example ​

html
<harness-vue-bootstrap-input 
    :type="number"
    :type="'number'"
    :min="0.05"
    :max="0.24"
    :step="0.001"
    />