vue-quest-ui 0.0.35 → 0.0.36

package/README.md

@@ -94,6 +94,7 @@ All components can be customized based on your needs by passing props to them. R
 
 
 
+
 ## Components 
 * [QstIcon (v0.0.13)](#qsticon) 
 * [QstInput (v0.0.14)](#qstinput) 
@@ -146,7 +147,7 @@ A customizable input element that supports the following types: text, password,
 | type | string | false | text | The type of input. Can be set to any of the following types: text, password, email, number, phone, tel, textarea, datepicker, datetimepicker, timepicker, decimal, number-string, money. *(type="number" will be a number data type. to use number characters with a string data type (ex/ to start a number with 0) use type="number-string")* |
 | width | string | false | null | The width of the input. |
 | size | string | false | 14px | Pixel value to resize the component, styles are adjusted when the size is updated. |
-| color | string | false | #539F5F | The accent color, used for details within the component. |
+| color | string | false | var(--primary-color) | The accent color, used for details within the component. |
 | placeholder | string, number | false | — | Placeholder for the input. The placeholder text will be shown as a label, in order to show an animation when focusing the input. |
 | labelPosition | string | false | mid | The position of the label relative to the input when it has a value. |
 | icon | string | false | — | Any Iconify value, the icon will be shown on the right side of the input. Input types such as "phone", "email", and "password" will show an icon by default. |
@@ -219,7 +220,7 @@ A simple, customizable button that triggers actions when clicked. It supports va
 
 | Name | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| color | string | false | #539F5F | The background color of the button. |
+| color | string | false | var(--primary-color) | The background color of the button. |
 | fontColor | string | false | #fff | The color of the button text or icon. |
 | size | string | false | — | Pixel value to resize the component, styles are adjusted when the size is updated. |
 | icon | string | false | null | Iconify value for the icon. |
@@ -246,7 +247,7 @@ A dropdown component that displays an interactive menu, which can be triggered b
 | closeOnOutsideClick | boolean | false | true | Closes the dropdown menu when clicking outside of it. |
 | position | string | false | bottom | The position that the dropdown will open relative to the trigger. |
 | offset | object | false | {x:0,y:0} | Moves the dropdown from its default position. *(+X moves right, -X moves left, +Y moves down, -Y moves up)* |
-| centerDropdown | boolean | false | true | Centers the dropdown based on the trigger. Offset can be used to adjust it starting at the center position, the triangle will stay centered. |
+| centerDropdown | boolean | false | false | Centers the dropdown based on the trigger. Offset can be used to adjust it starting at the center position, the triangle will stay centered. |
 | maxHeight | string | false | null | Max height for the dropdown, if exceeded the dropdown will start scrolling. |
 | useTriangle | boolean | false | false | Shows a triangle relative to the position of the trigger. |
 | offsetTriangle | boolean | false | false | When the offset is set, the triangle will remain anchored to the trigger by default. If true, the triangle will move with the rest of the offset. |
@@ -264,7 +265,7 @@ A loader component that visually indicates ongoing processes or background tasks
 | Name | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | loaderSrc | string | false | null | The image/gif that will be used for the loader. |
-| color | string | false | #539F5F | The color when using the default loader icon. |
+| color | string | false | var(--primary-color) | The color when using the default loader icon. |
 | subtext | string | false | null | Optional text to show below the loader. |
 | size | string | false | 14px | Pixel value to resize the component, styles are adjusted when the size is updated. |
 | center | boolean | false | true | Aligns the loader to be centered relative to its parent container. |
@@ -289,7 +290,7 @@ A reusable modal component that provides a flexible, customizable overlay for di
 | width | string | false | 550px | The width of the modal, set in px. |
 | height | string | false | 650px | The height of the modal, set in px. |
 | size | string | false | 14px | Pixel value to resize the component, styles are adjusted when the size is updated. |
-| color | string | false | #539F5F | The accent color, used for details within the component. |
+| color | string | false | var(--primary-color) | The accent color, used for details within the component. |
 | useLoader | boolean | false | false | When true, shows a loader in the modal. |
 | hideTitle | boolean | false | false | Hides the modal title. |
 | hideFooter | boolean | false | false | Hides the modal footer row. |
@@ -316,7 +317,7 @@ A custom designed switch component that allows users to toggle between two state
 | modelValue | boolean | false | false | Used for v-model, will be set to whether the switch is active. |
 | label | string | false | — | Label displayed to the right of the switch, clicking on the label will toggle the switch. |
 | icon | string | false | — | Any Iconify value, the icon will be displayed to the right of the switch. |
-| color | string | false | #539F5F | The color of the switch when active. |
+| color | string | false | var(--primary-color) | The color of the switch when active. |
 | size | string | false | 12px | Pixel value to resize the component, styles are adjusted when the size is updated. |
 | useEditMode | boolean | false | true | Whether the input should be editable or not. |
 | showLabelOnEditMode | boolean | false | true | Shows the label when the input is in edit mode.' |
@@ -339,10 +340,10 @@ A scroll wrapper component that uses a slot to render content, with configurable
 | useDots | boolean | false | false | If the container has overflow, shows dots per the number of slides. |
 | useProgressBar | boolean | false | false | If the container has overflow, shows a progress bar that fills as the user scrolls towards the end of the container. |
 | width | string | false | — | Width of the entire scroll container. |
-| color | string | false | #539F5F | The accent color, used for details within the component. |
+| color | string | false | var(--primary-color) | The accent color, used for details within the component. |
 | size | string | false | 20px | Pixel value to resize the component, styles are adjusted when the size is updated. *(arrows, dots, icons)* |
 | hideScroll | boolean | false | true | The scrollbar will be hidden. |
-| slideWidth | string | false | 100% | The width of each slide, defaults to fill entire slide. |
+| slideWidth | string | false | — | The width of each slide, if not set use a min-width on scroll items. |
 
 
 
@@ -379,7 +380,7 @@ A component displayed as a small tag or flag, can be set as a link, tooltip, or
 | Name | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | size | string | false | 14px | Pixel value to resize the component, styles are adjusted when the size is updated. |
-| bgColor | string | false | #539F5F | The background color of the tag. |
+| bgColor | string | false | var(--primary-color) | The background color of the tag. |
 | color | string | false | #fff | The font color of the tag. |
 | useFade | boolean | false | false | Changes the style of the tag to use a faded color scheme. |
 | bold | boolean | false | false | Bolds the text of the tag. |
@@ -406,10 +407,10 @@ A wrapper component containing a trigger and a content slot, clicking the trigge
 |------|------|----------|---------|-------------|
 | useDiv | boolean | false | true | The trigger and content slot elements will have a div parent element. |
 | defaultOpen | boolean | false | false | The row will be intitially expanded by default. |
-| useIcon | boolean | false | false | Shows an arrow at the end of the trigger row. |
+| useIcon | boolean | false | false | Shows an icon at the end of the trigger row. |
 | rowIndex | number | false | null | Index of the expanded row, used for dynamically selecting a row. *(ex/ when used in a table)* |
 | useOpenBorder | boolean | false | false | Shows a border on the left of the row that expands with the container as it opens. |
-| color | string | false | #539F5F | The accent color, used for details within the component. |
+| color | string | false | var(--primary-color) | The accent color, used for details within the component. |
 | icon | string | false | ep:arrow-down-bold | Any iconify value, the icon will show at the end of the trigger row. |
 
 
@@ -450,7 +451,7 @@ A customizable checkbox component for selecting true/false values.
 | label | string | false | — | Label displayed to the right of the checkbox, clicking on the label will toggle the checkbox. |
 | useLeftLabel | boolean | false | false | The label will be displayed on the left side of the checkbox. |
 | size | string | false | 14px | Pixel value to resize the component, styles are adjusted when the size is updated. |
-| color | string | false | #539F5F | The accent color, used for details within the component. |
+| color | string | false | var(--primary-color) | The accent color, used for details within the component. |
 
 
 
@@ -472,7 +473,7 @@ A container component that manages a group of checkbox inputs for controlled sel
 | disabled | boolean | false | false | Disables all checkboxes. |
 | groupLabel | string | false | — | The label for the entire checkbox group. Displays above or next to the inputs if displayed in a row. |
 | size | string | false | 14px | Pixel value to resize the component, styles are adjusted when the size is updated. |
-| color | string | false | #539F5F | The accent color, used for details within the component. |
+| color | string | false | var(--primary-color) | The accent color, used for details within the component. |
 
 
 
@@ -490,7 +491,7 @@ A single radio button component for exclusive option selection.
 | radio | object | true | — | The details for the radio input. Id is optional, v-model will be set to the value property. *({id?: string, value: string, label: string})* |
 | disabled | boolean | false | false | Disables the radio input. |
 | size | string | false | 12px | Pixel value to resize the component, styles are adjusted when the size is updated. |
-| color | string | false | #539F5F | The accent color, used for details within the component. |
+| color | string | false | var(--primary-color) | The accent color, used for details within the component. |
 
 
 
@@ -511,7 +512,7 @@ A container component that manages a group of radio buttons for controlled selec
 | useRow | boolean | false | false | The inputs will be displayed in a row, instead of a column. |
 | groupLabel | string | false | — | The label for the entire radio group. Displays above or next to the inputs if displayed in a row. |
 | size | string | false | 12px | Pixel value to resize the component, styles are adjusted when the size is updated. |
-| color | string | false | #539F5F | The accent color, used for details within the component. |
+| color | string | false | var(--primary-color) | The accent color, used for details within the component. |
 
 
 
@@ -533,7 +534,7 @@ An autocomplete input component, with functionality for single/multiselect, sear
 | 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 (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. |
+| color | string | false | var(--primary-color) | 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. |
 | showLabelOnEditMode | boolean | false | true | Shows a label when in edit mode. |
@@ -580,7 +581,7 @@ A set of input fields designed for selecting an address. The first field feature
 | useEditMode | boolean | false | true | Whether the input should be editable or not. |
 | errors | object | false | {contact:'',address1:'',city:'',state:'',zip:'',country:''} | The errors for each of the address inputs. |
 | size | string | false | 14px | Pixel value to resize the component, styles are adjusted when the size is updated. |
-| color | string | false | #539F5F | The accent color, used for details within the component. |
+| color | string | false | var(--primary-color) | The accent color, used for details within the component. |
 | darkMode | boolean | false | false | Changes the styles to a dark theme. |
 
 
@@ -601,7 +602,7 @@ A select component, with functionality for single/multiselect, search, select al
 | 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.' |
+| color | string | false | var(--primary-color) | 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.' |