Harness-Vue-Bootstrap

Appearance

Select ​

Basic Example ​

A basic <select> element using Bootstrap 5 for styling. This component binds the select element to a harness filter, and the <option> elements to the options for that filter. For more on Harness-Vue filter options, see the Harness-Vue page definition documentation.

All filter values and option values are treated as strings (unless the prop multiple is true, see examples below).

Usage ​

kebab-case ​

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

PascalCase ​

html
    <harnessVueBootstrapSelect :filter="{'key': 'exampleSelect', ...filter}" />

Page Definition ​

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

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 ​

Dollars
html
<harness-vue-bootstrap-select 
    :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-select 
    :appendHTML="component"
    />

labelPosition ​

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

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

Horizontal Example ​

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

Vertical Example ​

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

Floating Example ​

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

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

None Example ​


html
<harness-vue-bootstrap-select :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-select :labelPosition="'horizontal'" :labelColumnSize="4"/>

Example 8 ​

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

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

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-select :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-select :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-select :helperText="'Helper text with contextual information below label'" :helperTextPosition="'label'"/>

Example ​

Helper text with contextual information below label

multiple ​

If harness-vue-bootstrap-select is given the multiple prop, it will be treated as a multi-select filter. Please note that it is required that this prop is set in your harness page definition - this is what informs harness to treat the contents of this filter as an Array instead of a String.

  • Type: Booolean
  • Required: No
  • Default: false

Example ​

html
<harness-vue-bootstrap-select :multiple="true" />

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-select 
    :prependHTML="'@'"
    />

prependComponent ​

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

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

Additional Features ​

Overriding title attribute ​

The title attribute of the select options can be overridden by providing a description attribute in the filter's options. When the description attribute is present, the select component will use its value as the title attribute for the options. This causes the tooltip that appears when hovering an option in the select menu to display the value of the description attribute. If no description attribute is provided, the default behavior sets the title attribute to the provided option label.

Example Filter Definition ​

html
exampleSelectLabel: {
    key: "exampleSelectLabel",
    label: "Example Select with Label",
    component: "HarnessVueBootstrapSelect",
    props: {
        filterType: "internal",
    },
    options: [
        {
            key: "exampleOption",
            label: "Example Option",
            description: "This is a sample description replacing the title attribute",
            default: true,
        },
        {
            key: "exampleOption2",
            label: "Example Option 2",
        },
        {
            key: "exampleOption3",
            label: "Example Option 3",
            description: "This is a sample description for Example Option 3"
        },
    ],
}

Example ​