npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@ti-platform/aide-quasar

v3.0.13

Published

This package exposes new components based off Vue and Quasar.

Downloads

11

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

ducyeutrucducyeutruc

Keywords

Readme

@ti-platform/aide-quasar

This package exposes new components based off Vue and Quasar.

Please note that this package is now deprecated and will no longer be maintained. We are moving to use PrimeVue instead.

Contents

Components

MultiProgressIndicator

This component displays a progress indicator for each specified task during its execution, and will either display an error message if any errors occur, or a success message if the task is completed successfully.

Props

| Prop name | Description | Type | Default | | --------- | ----------------------------------------------------------------------------- | ------------------------------------ | ------- | | tasks | The list of ProgressIndicatorTask we are showing the progress indicators for. | Array<ProgressIndicatorTask> | |

Events

| Event name | Properties | Description | | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------- | | complete | success Array<string> - An array with the key of the tasks that completed without errors.failure Array<string> - An array with the key of the tasks that completed with errors. | Triggered when all tasks are completed. |

Slots

| Name | Description | Bindings | | ------------------------------------- | ------------------------------------------------------------------------------------ | ------------------------------------------------------ | | ${asTask(scope).key}--description | Slot to display the description for a specific task. | task Task - The task this is rendering for. | | description | Default slot for displaying the description for all the tasks. | task Task - The task this is rendering for. | | ${asTask(scope).key}--in-progress | Slot to display the progress indicator for a specific task. | task Task - The task this is rendering for. | | in-progress | Default slot for displaying the progress indicator for all the tasks. | task Task - The task this is rendering for. | | ${asTask(scope).key}--error-message | Slot to display the error message, assuming there was an error, for a specific task. | task Task - The task this is rendering for. | | error-message | Slot to display the error message, assuming there was an error, for all the tasks. | task Task - The task this is rendering for. | | ${asTask(scope).key}--success | Slot to display when the task completes successfully for a specific task. | task Task - The task this is rendering for. | | success | Slot to display when the task completes successfully for all the tasks. | task Task - The task this is rendering for. |

TimelineStepper

This component enables users to perform certain tasks and view the current progress and results in a timeline-style user interface.

Props

| Prop name | Description | Type | Default | | ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ---------------------------- | | initialSteps | The list of steps the initially and automatically execute. | Array<TimelineStepName> | | | steps | The list of all the TimelineStep. | Array<TimelineStep> | | | fullyCompletedHiddenTimeoutMs | If isHiddenWhenFullyCompleted is true, then this configures the number of milliseconds to wait after all the tasks are completed to hide this component. Defaults to 1000. | number | 1000 | | isHiddenWhenFullyCompleted | If true, this component will automatically hide itself after a configured delay. Defaults to false. | boolean | false | | isInitiallyHidden | If true, each steps default is to be initially hidden rather than visible. This value is used as the fallback value when the same property is not set in the step itself. | boolean | false | | colorSupplier | If given, function to use to get the color for a step. If not given, this component has its own internal mapping that it will use based on the current status of the step. | TimelineStepColorSupplier | getTimelineStepColorByStatus | | iconSupplier | If given, function to use to get the icon for a step. If not given, this component has its own internal mapping that it will use based on the current status of the step. | TimelineStepIconSupplier | getTimelineStepIconByStatus |

Events

| Event name | Properties | Description | | --------------- | ---------- | -------------------------------------------------------------------------------------------------------- | | fully-completed | | Triggered when all tasks are completed. Note that this is triggered after wait for the configured delay. |

Slots

| Name | Description | Bindings | | -------------------- | --------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | | ${step.name}--body | Slot for displaying the body for an individual step. | step TimelineStep - The timeline step this is for.status TimelineStepStatus - The current status of the step. | | body | Slot for displaying the body for all steps. | step TimelineStep - The timeline step this is for.status TimelineStepStatus - The current status of the step. | | fully-completed | Slot for displaying content after all steps has been fully completed. | |

WizardStepper

This is a wrapper component over the QStepper component with enhancements to make managing buttons and certain user interactions easier.

Props

| Prop name | Description | Type | Default | | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------- | -------------------- | | steps | The list of steps in the wizard. | Array<WizardStep> | | | backButtonClass | The CSS class name for the back button. | string | '' | | backButtonColor | The color to use for the back button. | string | 'primary' | | backButtonText | The text for the back button. | string | 'Back' | | beforeLeaveDialogClass | The CSS class name for the dialog that shows when the user tries to leave before completing all the steps. | string | 'bg-warning text-h6' | | beforeLeaveDialogButtonClass | The CSS class name for the button in the dialog that shows when the user tries to leave before completing all the steps. | string | '' | | beforeLeaveDialogButtonColor | The color for the button in the dialog that shows when the user tries to leave before completing all the steps. | string | 'primary' | | continueButtonClass | The CSS class name for the continue button. | string | '' | | continueButtonColor | The color for the continue button. | string | 'primary' | | continueButtonText | The text for the continue button. | string | 'Continue' | | doneButtonClass | The CSS class name for the done button. | string | '' | | doneButtonColor | The color for the done button. | string | 'positive' | | doneButtonIcon | The icon for the done button. | string | 'done_all' | | doneButtonText | The text for the done button. | string | 'Done' | | isBackButtonSupported | True to enable showing of the back button, false otherwise. | boolean | false | | isBackButtonVisibleWhenDone | Assuming that the back button is supported, should it be visible when all the steps are completed? | boolean | false |

Slots

| Name | Description | Bindings | | ------------------------------------------------ | ----------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ${stepper.current.value.name}--pre-navigation | Slot for rendering the content before the navigational buttons for a specific step. | back-button-handler Function - Executing function will navigate back to the previous step.continue-button-handler Function - Executing function will navigate to the next step.is-back-button-enabled boolean - True if the back button should be enabled.is-back-button-supported boolean - True if the back button is supported.is-continue-button-enabled boolean - True if continue button should be enabled.is-done boolean - True if we are on the last step and it is completed.is-processing boolean - True if the step is currently processing or doing work. | | pre-navigation | Slot for rendering the content before the navigational buttons. | back-button-handler Function - Executing function will navigate back to the previous step.continue-button-handler Function - Executing function will navigate to the next step.is-back-button-enabled boolean - True if the back button should be enabled.is-back-button-supported boolean - True if the back button is supported.is-continue-button-enabled boolean - True if continue button should be enabled.is-done boolean - True if we are on the last step and it is completed.is-processing boolean - True if the step is currently processing or doing work. | | ${stepper.current.value.name}--navigation | Slot for rendering the content of the navigational buttons for a specific step. | back-button-handler Function - Executing function will navigate back to the previous step.continue-button-handler Function - Executing function will navigate to the next step.is-back-button-enabled boolean - True if the back button should be enabled.is-back-button-supported boolean - True if the back button is supported.is-continue-button-enabled boolean - True if continue button should be enabled.is-done boolean - True if we are on the last step and it is completed.is-processing boolean - True if the step is currently processing or doing work. | | navigation | Slot for rendering the content of the navigational buttons. | back-button-handler Function - Executing function will navigate back to the previous step.continue-button-handler Function - Executing function will navigate to the next step.is-back-button-enabled boolean - True if the back button should be enabled.is-back-button-supported boolean - True if the back button is supported.is-continue-button-enabled boolean - True if continue button should be enabled.is-done boolean - True if we are on the last step and it is completed.is-processing boolean - True if the step is currently processing or doing work. | | ${stepper.current.value.name}--post-navigation | Slot for rendering the content after the navigational buttons for a specific step. | back-button-handler Function - Executing function will navigate back to the previous step.continue-button-handler Function - Executing function will navigate to the next step.is-back-button-enabled boolean - True if the back button should be enabled.is-back-button-supported boolean - True if the back button is supported.is-continue-button-enabled boolean - True if continue button should be enabled.is-done boolean - True if we are on the last step and it is completed.is-processing boolean - True if the step is currently processing or doing work. | | post-navigation | Slot for rendering the content after the navigational buttons. | back-button-handler Function - Executing function will navigate back to the previous step.continue-button-handler Function - Executing function will navigate to the next step.is-back-button-enabled boolean - True if the back button should be enabled.is-back-button-supported boolean - True if the back button is supported.is-continue-button-enabled boolean - True if continue button should be enabled.is-done boolean - True if we are on the last step and it is completed.is-processing boolean - True if the step is currently processing or doing work. |

API Docs

Enumerations

VisibilityState

For configuring the visibility of elements.

Enumeration Members

| Enumeration Member | Value | Description | | ------------------------ | ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | HIDDEN_HIDE_DIMENSIONS | 2 | The element should be hidden but the HTML for it should still be on the page but the element is collapsed. Usually, this is done with "display: none". | | HIDDEN_KEEP_DIMENSIONS | 1 | The element should be hidden but the HTML for it should still be on the page while keeping the space it occupies visible. Usually, this is done with "visibility: hidden" or "opacity: 0". | | NO_RENDER | 3 | The element should not be rendered at all. Usually this is done using the v-if directive. | | VISIBLE | 0 | The element should be visible. |

Interfaces

WizardStepState

The current state of a step. Note that for the non-readonly properties, you can also write to it to alter the current rendering of the component.

Properties

| Property | Modifier | Type | Description | | ------------------------- | ---------- | ---------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | | backButtonHandler | public | () => Promise<boolean> | - | | continueButtonHandler | public | () => Promise<boolean> | - | | isContinueButtonEnabled | public | boolean | True if the continue button should be enabled. | | isDone | public | boolean | True is the step has been marked as completed. | | isProcessing | public | boolean | True if the continue button should be showing the loading icon. | | latestViewedStepIndex | readonly | number | The index of the latest step that was viewed by the user. | | navigationVisibility | public | VisibilityState | The visibility state for the navigational area. | | nextStep | readonly | () => void | Call emulate as if the user clicked on the continue button. Note that this will bypass regardless of whether the continue button is enabled or not. | | previousStep | readonly | () => void | Call emulate as if the user clicked on the back button. Note that this will bypass regardless of whether the back button is enabled or not. | | stepIndex | readonly | number | The index number for the step. |

Type Aliases

ProgressIndicatorTask

ProgressIndicatorTask: {description: string;errorMessage: string;isInProgress: boolean;key: string; }

Information for a task to show in the MultiProgressIndicator component.

Type declaration

| Name | Type | Description | | --------------- | --------- | --------------------------------------------------------------------------------------------------------------------- | | description | string | A description for what progress we are waiting for. | | errorMessage? | string | When no longer in progress, error message to show. If value is null, it assumes that task was completed successfully. | | isInProgress | boolean | True to show a progress bar, indicating that it is in progress or false other. | | key | string | Unique identifier for the task. |

Defined in

components/multi-progress-indicator/api.ts:4

TimelineStep

TimelineStep: {body: string;isInitiallyHidden: boolean;name: TimelineStepName;subtitle: string;task: (step) => Promise<TimelineStepTaskResult>; }

Representing a step in the timeline.

Type declaration

| Name | Type | Description | | -------------------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | body? | string | The content for the body of the timeline step. Note that for more complex bodies, you can leave this undefined and use the slot instead. The slot name will be following the pattern [TimelineStep.name]--body. It will also be given the following props: - status: The current status of the step. | | isInitiallyHidden? | boolean | Flag to determine if the step is initially hidden on the timeline until it is started. Set to true to hide it initially or to false to keep it visible. | | name | TimelineStepName | Unique name for the step. | | subtitle | string | The subtitle for the step. | | task | (step) => Promise<TimelineStepTaskResult> | Task to run when the step starts. |

Defined in

components/timeline-stepper/api.ts:12

TimelineStepColorSupplier()

TimelineStepColorSupplier: (status) => string

Function to use to get the color for a step.

Parameters

| Parameter | Type | Description | | --------- | ---------------------------------------------------- | ------------------------------- | | status | TimelineStepStatus | The current status of the step. |

Returns

string

The color for the step.

Defined in

components/timeline-stepper/api.ts:89

TimelineStepIconSupplier()

TimelineStepIconSupplier: (status) => string | undefined

Function to use to get the icon for a step.

Parameters

| Parameter | Type | Description | | --------- | ---------------------------------------------------- | ------------------------------- | | status | TimelineStepStatus | The current status of the step. |

Returns

string | undefined

The icon for the step or undefined if it should not use any icon.

Defined in

components/timeline-stepper/api.ts:99

TimelineStepName

TimelineStepName: string

Unique name for a step.

Defined in

components/timeline-stepper/api.ts:6

TimelineStepStatus

TimelineStepStatus: {isCompletedStep: boolean;name: string; }

Represents the status of a step.

Type declaration

| Name | Type | Description | | ----------------- | --------- | ----------------------------------------------------------------------- | | isCompletedStep | boolean | True if the step is considered to be a completed step, false otherwise. | | name | string | The name of the status. |

Defined in

components/timeline-stepper/api.ts:69

TimelineStepTaskResult

TimelineStepTaskResult: {failed: boolean;nextSteps: TimelineStepName[];skipSteps: TimelineStepName[]; }

Represents the result of executing a step and what is expected to happen next.

Type declaration

| Name | Type | Description | | ----------- | --------------------------------------------------- | --------------------------------------- | | failed | boolean | True to mark the step as having failed. | | nextSteps | TimelineStepName[] | List of timelineSteps to execute next. | | skipSteps | TimelineStepName[] | List of timelineSteps to skip. |

Defined in

components/timeline-stepper/api.ts:49

WizardStep

WizardStep: {beforeLeaveConfirmationMessage: string;component: Component;isBeforeLeaveConfirmationEnabled: boolean;name: WizardStepName;title: string; }

Represents a step in the wizard.

Type declaration

| Name | Type | Description | | ---------------------------------- | -------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | beforeLeaveConfirmationMessage? | string | If given, this message will be shown to the user in the dialog when the user tries to navigate away. | | component | Component | The component that will be used to render the step. It will be given as is modelValue a WizardStepState. | | isBeforeLeaveConfirmationEnabled | boolean | If true, then if the user tries to navigate while the current step is this, a confirmation dialog will be shown to ask if the user really want that or not. If the step is done however, it will not be asked. | | name | WizardStepName | The unique name for the step. | | title | string | The title for the step. |

Defined in

components/wizard-stepper/api.ts:13

WizardStepName

WizardStepName: string

Unique name for a step.

Defined in

components/wizard-stepper/api.ts:7

Variables

TimelineStepStatuses

const TimelineStepStatuses: Record<"FAILED" | "IN_PROGRESS" | "NOT_STARTED" | "SKIPPED" | "SUCCEED", {isCompletedStep: true;name: 'FAILED'; } | {isCompletedStep: false;name: 'IN_PROGRESS'; } | {isCompletedStep: false;name: 'NOT_STARTED'; } | {isCompletedStep: true;name: 'SKIPPED'; } | {isCompletedStep: true;name: 'SUCCEED'; }>

Map of TimelineStepStatus's name to its definition.

Defined in

components/timeline-stepper/api.ts:104

Functions

createTimelineStepTaskResult()

createTimelineStepTaskResult(__namedParameters): TimelineStepTaskResult

Create the result for the execution of a task.

Parameters

| Parameter | Type | | ------------------- | ----------------------------------------------------------------------- | | __namedParameters | Partial<TimelineStepTaskResult> |

Returns

TimelineStepTaskResult

Defined in

components/timeline-stepper/api.ts:119

createWizardStep()

createWizardStep(name, title, component, opts): WizardStep

Create a step for the wizard.

Parameters

| Parameter | Type | | ----------- | ----------------------------------------------------------------------------------------------------------------------------------- | | name | string | | title | string | | component | Component | | opts | Partial<Pick<WizardStep, "beforeLeaveConfirmationMessage" | "isBeforeLeaveConfirmationEnabled">> |

Returns

WizardStep

Defined in

components/wizard-stepper/api.ts:104

cssStyleByVisibilityState()

cssStyleByVisibilityState(state): ComputedRef<string>

Get a computed style definition based on the provided visibility state. This is not intended for the NO_RENDER state as that should be handled via the v-if directive. It is best to use this in combination with the vIfByVisibilityState method.

Parameters

| Parameter | Type | Description | | --------- | ----------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | | state | Ref<VisibilityState, VisibilityState> | A reactive variable for the current visibility state to calculate the style. |

Returns

ComputedRef<string>

Defined in

visibility.ts:38

isSameTimelineStepStatus()

isSameTimelineStepStatus(status1, status2): boolean

Determine if the two TimelineStepStatus is the same.

Parameters

| Parameter | Type | Description | | --------- | ---------------------------------------------------- | --------------------------- | | status1 | TimelineStepStatus | The first status to check. | | status2 | TimelineStepStatus | The second status to check. |

Returns

boolean

Defined in

components/timeline-stepper/api.ts:139

vIfByVisibilityState()

vIfByVisibilityState(state): ComputedRef<boolean>

Determine whether an element or component should be visible for use with the v-if directive. This should really be used in combination with cssStyleByVisibilityState method which handles all the other use cases as this really just handles the NO_RENDER state.

Parameters

| Parameter | Type | Description | | --------- | ----------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | | state | Ref<VisibilityState, VisibilityState> | A reactive variable for the current visibility state to calculate value for the v-if directive. |

Returns

ComputedRef<boolean>

Defined in

visibility.ts:55