vue-quest-ui 0.0.30 → 0.0.32

package/README.md

@@ -82,13 +82,17 @@ All components can be customized based on your needs by passing props to them. R
 
 
 
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
 
 ## Components 
 * [QstIcon (v0.0.13)](#qsticon) 
@@ -110,6 +114,7 @@ All components can be customized based on your needs by passing props to them. R
 * [QstRadioGroup (v0.0.28)](#qstradiogroup) 
 * [QstAutocomplete (v0.0.29)](#qstautocomplete) 
 * [QstAddressAutocomplete (v0.0.30)](#qstaddressautocomplete) 
+* [QstSelect (v0.0.31)](#qstselect) 
 
 ## Props 
 
@@ -294,6 +299,7 @@ A reusable modal component that provides a flexible, customizable overlay for di
 | cancelBtnText | string | false | Cancel | The text to be shown on the cancel button. |
 | closeOnSubmit | boolean | false | false | The modal will be closed when the submit button is clicked. |
 | hideScroll | boolean | false | true | If the modal has overflow, the scrollbar will be hidden. |
+| darkMode | boolean | false | false | Changes the styles to a dark theme. |
 
 
 
@@ -520,13 +526,13 @@ An autocomplete input component, with functionality for single/multiselect, sear
 | Name | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | multiSelect | boolean | false | false | Whether only a single or multiple options can be selected. |
-| src | array | false | — | The source of the autocomplete options to be displayed. Types can be string[], number[], AutocompleteProp[] ({id?: number | string | boolean, text: string, result?: any, subtext?: string, leftImage?: string, searchData?: {label: string, value: string | number}[], disabled?: boolean, disabledReason?: string}). When using AutocompleteProp[], the text field is required. |
+| src | array | false | — | The source of the autocomplete options to be displayed. Types can be string[], number[], AutocompleteProp[] (AutocompleteProp: {id?: (number, string, boolean), text: string, result?: any, subtext?: string, leftImage?: string, searchData?: {label: string, value: (string, number)}[], disabled?: boolean, disabledReason?: string}). *When using AutocompleteProp[], the text field is required.* |
 | autocompleteEndpoint | string | false | — | Endpoint URL for the autocomplete. If the src prop is not set, the autocomplete will use the endpoint to fetch the data. |
-| modelValue | object, array|string|number | false | null | Used for v-model, will be set to the active autocomplete value. *(For multiSelect, v-model must be set to an array)* |
+| modelValue | object, array|string|number | false | null | Used for v-model, will be set to the active autocomplete value. *(For multiselect, v-model must be set to an array)* |
 | result | object, array|string|number | false | null | Used for v-model:result, value will be the *result* property of AutocompleteProp. |
 | query | string, number | false | null | Used for v-model:query, value will be the searched text in the input. |
 | size | string | false | 14px | Pixel value to resize the component, styles are adjusted when the size is updated. |
-| dynamicSizes | object | false | null | Any screen size defined will target that screen size and below ({xl: '10px'} will change to 10px on max-width: 1549px). Any larger size than what is defined will use the normal size prop. |
+| dynamicSizes | object | false | null | Any screen size defined will target that screen size and below (ex/ {xl: '10px'} will change to 10px on max-width: 1549px). Screen sizes larger than what is defined will use the normal props.size. Use dynamicSizes when the dropdown is being teleported to update the dropdown's size as well. |
 | color | string | false | #539F5F | The accent color, used for details within the component. |
 | width | string | false | 100% | The width of the autocomplete. |
 | useEditMode | boolean | false | true | Whether the input should be editable or not. |
@@ -537,23 +543,23 @@ An autocomplete input component, with functionality for single/multiselect, sear
 | disabledTooltipPosition | string | false | right | Tooltip position for showing an option's disabled reason. Applies to both top level input and/or the dropdown option's disabled tooltips. |
 | numExpandedOptions | number | false | 3 | Number of options to show before showing '+X options selected' tooltip. |
 | hideSelectedOptions | boolean | false | false | Hides the currently selected options from dropdown. (multiselect only) |
-| minChars | number | false | 0 | Number of characters required in the input for the dropdown to show the filtered search results.' |
+| minChars | number | false | 0 | Number of characters required in the input for the dropdown to show the filtered search results. (single select only) |
 | error | string | false | null | Sets the error message.' |
 | clearAfterSelecting | boolean | false | false | After selecting a dropdown option, the value will be cleared from the top input. |
-| isLoading | boolean | false | null | Set to loading value when loading options from an endpoint. *(Overrides loader in QstAutocompleteMenu)* |
+| isLoadingOptions | boolean | false | null | Set to loading value when loading options from an endpoint. *(Overrides loader in dropdown)* |
 | dropdownHeight | string | false | 350px | The height for the autocomplete menu dropdown. |
-| closeMultiSelectAfterSelecting | boolean | false | false | After selecting an option, closes the autocomplete menu dropdown. *(multiSelect only)* |
+| closeMultiSelectAfterSelecting | boolean | false | false | After selecting an option, closes the autocomplete menu dropdown. *(multiselect only)* |
 | zoomedOut | boolean | false | false | Zooms out autocomplete dropdown to 80% for laptop devices. |
 | showErrorBelow | boolean | false | false | Shows the error message at the bottom of the input. |
 | allowOpenInput | boolean | false | false | Allows the user to search for any value, regardless of the dropdown options. Emits the value using 'autocomplete-search-query'. |
 | boldMatchingSearchValues | boolean | false | true | The matching portion of each option will be bolded based on the search value. |
-| showExtendedResults | boolean | false | false | Shows a link at the bottom of QstAutocompleteMenu to view all results in a modal. |
+| showExtendedResults | boolean | false | false | Shows a link at the bottom of the dropdown to view all results in a modal. |
 | useMagnifyIcon | boolean | false | false | Adds a magnifying glass icon to the right of the autocomplete, clicking will submit the search value. |
 | useErrorIcon | boolean | false | false | An error icon will be displayed on the right of the autocomplete, hovering over will show a tooltip with the error message. |
 | useClearIcon | boolean | false | true | Adds X icon to the right of the autocomplete, clicking it clears the v-model value. Overrides any other previously set icons. |
-| icon | string | false | — | Any Iconify value, will be displayed on the right of autocomplete. |
+| icon | string | false | — | Any Iconify value, will be displayed on the right of the autocomplete. |
 | tooltip | string, object | false | null | Shows a tooltip dropdown when hovering over the input. Set to a string or object, based on if tooltip props are needed. *(ex/ offset, width, position, etc)* Tooltip is displayed inside the autocomplete, width and offset will default to match input dimensions. |
-| darkMode | boolean | false | false | — |
+| darkMode | boolean | false | false | Changes the styles to a dark theme. |
 
 
 
@@ -582,4 +588,45 @@ A set of input fields designed for selecting an address. The first field feature
 
 
 
+    
+### `QstSelect`
+
+A select component, with functionality for single/multiselect, search, select all logic, and custom options.
+
+| Name | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| multiSelect | boolean | false | false | Whether only a single or multiple options can be selected. |
+| options | array | false | [] | The dropdown options to be displayed. Types can be string[], number[], AutocompleteProp[]. (AutocompleteProp: {id?: (number, string, boolean), text: string, result?: any, subtext?: string, leftImage?: string, searchData?: {label: string, value: (string, number)}[], disabled?: boolean, disabledReason?: string}). *When using AutocompleteProp[], the text field is required.* |
+| modelValue | object, array|string|number | false | null | Used for v-model, will be set to the active select value. *(For multiselect, v-model must be set to an array)* |
+| result | object, array|string|number | false | null | Used for v-model:result, value will be the *result* property of AutocompleteProp. |
+| size | string | false | 14px | Pixel value to resize the component, styles are adjusted when the size is updated.' |
+| dynamicSizes | object | false | null | Any screen size defined will target that screen size and below (ex/ {xl: '10px'} will change to 10px on max-width: 1549px). Screen sizes larger than what is defined will use the normal props.size. Use dynamicSizes when the dropdown is being teleported to update dropdown's size as well. |
+| color | string | false | #539F5F | The accent color, used for details within the component.' |
+| width | string | false | — | The width of the select and dropdown. If unset, the sizing will adjust to the size prop for single select or 100% for multiselect. |
+| fullWidth | boolean | false | false | Sets the select to be full-width and take up 100% of its parent container. |
+| useEditMode | boolean | false | true | Whether the input should be editable or not.' |
+| showLabelOnEditMode | boolean | false | true | Shows a label when in edit mode.' |
+| placeholder | string, number | false | Select | Placeholder for select input. |
+| disabled | boolean | false | false | Disables the select, will show grayed out and unusable. |
+| disabledReason | string | false | — | When the input is disabled, hovering over the input will show a tooltip with the disabled reason. *(This is only for the top select input. To set on an individual dropdown option, set disabledReason property on the option. (AutocompleteProp))* |
+| disabledTooltipPosition | string | false | right | Tooltip position for showing an option's disabled reason. Applies to both top level input and/or the dropdown option's disabled tooltips. |
+| numExpandedOptions | number | false | 3 | Number of options to show before showing '+X options selected' tooltip. |
+| error | string | false | null | Sets the error message.' |
+| useErrorIcon | boolean | false | false | An error icon will be displayed on the right of the select, hovering over will show a tooltip with the error message. |
+| showErrorBelow | boolean | false | false | Shows error message at the bottom of the input. |
+| sortAlphabetically | boolean | false | true | Whether or not to alphabetically sort the list of options in the dropdown. |
+| isLoadingOptions | boolean | false | null | Set to loading value when loading options from an endpoint. *(Overrides loader in dropdown)* |
+| defaultVal | string | false | — | A default value that will be added to the dropdown options as the first selected value. Selecting the default value will replace any active values. |
+| dropdownHeight | string | false | 350px | The height for the dropdown.' |
+| closeMultiSelectAfterSelecting | boolean | false | false | After selecting an option, closes the dropdown. *(multiselect only)* |
+| icon | string | false | — | Any Iconify value, will be displayed to the right of the dropdown arrow.' |
+| tooltip | string, object | false | null | Shows a tooltip dropdown when hovering over the input. Set to a string or object, based on if tooltip props are needed. *(ex/ offset, width, position, etc)* Tooltip is displayed inside the select, width and offset will default to match input dimensions. |
+| useSelectAll | boolean | false | false | Adds an option in the dropdown to select all options (multiselect only) |
+| darkMode | boolean | false | false | Changes the styles to a dark theme. |
+
+
+
+
+
+