vue-quest-ui 0.0.84 → 0.0.86

package/README.md

@@ -167,6 +167,9 @@ All components can be customized based on your needs by passing props to them. R
 
 
 
+
+
+
 
 
 
@@ -200,20 +203,20 @@ All components can be customized based on your needs by passing props to them. R
 * [VisualTable (v0.0.58)](#visualtable) 
 * [QstBox (v0.0.59)](#qstbox) 
 * [QstToast (v0.0.59)](#qsttoast) 
-* [QstToastContent (v0.0.59)](#qsttoastcontent) 
 * [QstUserSnippet (v0.0.67)](#qstusersnippet) 
 * [QstCreditCardForm (v0.0.76)](#qstcreditcardform) 
 * [QstDigitInput (v0.0.76)](#qstdigitinput) 
 * [QstImgGallery (v0.0.76)](#qstimggallery) 
 * [QstTimeline (v0.0.78)](#qsttimeline) 
 * [QstStatusPipeline (v0.0.79)](#qststatuspipeline) 
+* [QstImageUploader (v0.0.86)](#qstimageuploader) 
 
 ## Props 
 
 ### `QstIcon`
 
 
-A versatile, customizable icon that displays Iconify icons.
+A customizable icon component that displays Iconify icons with a built-in library of shortcut icons (qst-*), optional circular styling, and color support.
 
 | Name | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
@@ -362,7 +365,7 @@ A dropdown component that displays an interactive menu, which can be triggered b
 ### `QstLoader`
 
 
-A loader component that visually indicates ongoing processes or background tasks, providing a customizable spinning or animated indicator to enhance user experience during wait times.
+A loader component with support for inline, absolute, and full-page positioning modes, optional backdrop overlay, custom loading images, and subtext.
 
 | Name | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
@@ -404,6 +407,9 @@ A reusable modal component that provides a flexible, customizable overlay for di
 | hideCloseBtn | boolean | false | false | — |
 | 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. |
+| closeOnOutsideClick | boolean | false | true | Closes the modal on outside click and emits the 'on-cancel' event. (if cancelOnModalClose is also true) |
+| cancelOnModalClose | boolean | false | true | Emits the 'on-cancel' event when the modal closes by either clicking the 'X' icon or clicking outside the modal. (event is always emited when showCancel is true and user clicks Cancel button) |
+| hideOverlay | boolean | false | false | Removes the overlay behind the modal. |
 
 
 
@@ -437,7 +443,7 @@ A custom designed switch component that allows users to toggle between two state
 ### `QstScrollContainer`
 
 
-A scroll wrapper component that uses a slot to render content, with configurable options to display navigation arrows, pagination dots, or a progress bar.
+A horizontal scroll wrapper component with configurable navigation arrows, pagination dots, progress bar, and autoplay functionality for carousel-like content.
 
 | Name | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
@@ -461,18 +467,20 @@ A scroll wrapper component that uses a slot to render content, with configurable
 ### `QstImg`
 
 
-A component for displaying images, with options to toggle images on hover or open in a zoomable modal.
+A component for displaying images with support for lazy loading, hover image toggling, zoomable modal view, and optional overlay and delete functionality.
 
 | Name | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | src | string | true | — | The source of image that will be displayed. |
 | alt | string | false | null | Alt text for the image. |
-| width | number | false | 100 | The width of the image set in px. |
-| height | number | false | null | The height of the image set in px. |
+| width | string | false | 100px | The width of the image. |
+| height | string | false | — | The height of the image. |
 | lazyLoad | boolean | false | false | Utilizes Intersection Observer to lazy load images, only when the image is in the viewport. |
 | hoverImage | string | false | null | The source of the image that will be showed when hovering over the image src. |
 | circle | boolean | false | false | Shows the image in a circle. |
 | useZoom | boolean | false | false | When the user clicks the image, a modal will open with a zoomed image. |
+| showOverlay | boolean | false | false | Shows an overlay when hovering over the image. |
+| useDeleteBtn | boolean | false | false | Shows a delete button when hovering over the image, emits the 'on-delete' event. |
 
 
 
@@ -483,7 +491,7 @@ A component for displaying images, with options to toggle images on hover or ope
 ### `QstTag`
 
 
-A component displayed as a small tag or flag, can be set as a link, tooltip, or text to display.
+A customizable label component for displaying tags, badges, or status indicators with support for links, icons, tooltips, and dismissible close buttons.
 
 | Name | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
@@ -636,7 +644,7 @@ A container component that manages a group of radio buttons for controlled selec
 ### `QstAutocomplete`
 
 
-An autocomplete input component, with functionality for single/multiselect, search filtering, open search, and custom options.
+An autocomplete input component with single/multiselect support, search filtering, custom option rendering, and optional API endpoint fetching.
 
 | Name | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
@@ -707,7 +715,7 @@ 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.
+A select input component with single/multiselect support, search filtering, custom option rendering, and select all support.
 
 | Name | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
@@ -802,7 +810,7 @@ A reusable table component that displays structured data with built-in support f
 ### `QstViewSelector`
 
 
-A selector component that presents a horizontal list of options, highlighting the active selection and allowing users to easily toggle between choices in a visually intuitive manner.
+A selector component with three display modes (view toggle, tabs, and container) for switching between options, with optional local storage persistence for user selections.
 
 | Name | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
@@ -910,7 +918,7 @@ A simple UI component designed to highlight important information on a page. Wit
 ### `QstToast`
 
 
-A lightweight notification component used to deliver feedback, alerts, or updates to users in a non-intrusive manner. Toast messages appear on the screen based on customizable position and duration settings, providing a seamless user experience.
+A notification component for displaying success, error, warning, and info alerts with customizable positioning and duration. Includes a promise-based loading toast that automatically resolves to success or error.
 
 | Name | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
@@ -926,22 +934,6 @@ A lightweight notification component used to deliver feedback, alerts, or update
 
 
     
-### `QstToastContent`
-
-
-The child component to QstToast, displays the toast notification. *(This is only the inner component - does not have position, timeout, toggling functionality)*
-
-| Name | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| toast | object | true | — | The details of the toast notification to be displayed. |
-| size | string | false | 14px | Pixel value to resize the component, styles are adjusted when the size is updated. |
-
-
-
-
-
-
-    
 ### `QstUserSnippet`
 
 
@@ -969,7 +961,7 @@ A clickable UI element designed to display a compact summary of user information
 ### `QstCreditCardForm`
 
 
-This component renders a secure and accessible credit card input form for capturing payment information. It includes fields for Card Number, Expiration Date, and CVV, with built-in formatting, validation, and error handling.
+A credit card input form for capturing payment information, with fields for card number, expiration date, and CVV, including automatic formatting and validation.
 
 | Name | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
@@ -985,7 +977,7 @@ This component renders a secure and accessible credit card input form for captur
 ### `QstDigitInput`
 
 
-This component generates a specified number of input fields for entering passcodes and one time passcodes (OTPs), featuring smooth auto-focus and navigation. It supports mobile OTP autofill, ensuring seamless automatic filling on iOS and Android devices.
+A multi-digit input component for entering passcodes and OTPs, featuring auto-focus navigation between fields and mobile OTP autofill support.
 
 | Name | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
@@ -1026,7 +1018,7 @@ A media gallery designed to display a collection of images and/or videos in an i
 ### `QstTimeline`
 
 
-The timeline component presents a chronological list of events or actions, each displaying a specific date. It supports both expanded and collapsed layouts, and offers customizable markers, icons, or images for each entry. It also includes the ability to expand changes between previous and new values, making it especially useful for tracking updates or data changes over time.
+A timeline component for displaying a chronological list of events with expandable entries showing changes between previous and new values. Supports expanded and collapsed layouts with customizable markers.
 
 | Name | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
@@ -1057,7 +1049,7 @@ The timeline component presents a chronological list of events or actions, each
 ### `QstStatusPipeline`
 
 
-This component is a versatile UI element designed to visually represent progress or stages in a process, supporting both horizontal and vertical orientations to fit various layouts. Each stage in the pipeline can display a label and an associated date, allowing users to track progress over time. A distinctive marker highlights the current date. This component is ideal for workflows, project timelines, or delivery tracking interfaces.
+A progress indicator component for visualizing stages in a workflow or timeline, supporting horizontal and vertical orientations with date-based positioning and a today marker.
 
 | Name | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
@@ -1079,4 +1071,24 @@ This component is a versatile UI element designed to visually represent progress
 
 
 
+    
+### `QstImageUploader`
+
+
+An image upload component with drag and drop functionality, supporting single or multiple file uploads with thumbnail previews and delete capabilities.
+
+| Name | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| modelValue | array | true | — | — |
+| label | string | false | — | — |
+| uploadLabel | string | false | Browse or Drag and Drop files to upload | — |
+| error | string | false | — | — |
+| useMultiUpload | boolean | false | true | — |
+| hideDragAnimation | boolean | false | false | — |
+
+
+
+
+
+