@aotearoan/neon 9.2.9 → 9.3.0

package/dist/src/components/navigation/link/NeonLink.d.ts

@@ -0,0 +1,81 @@
+import { NeonOutlineStyle } from '@/common/enums/NeonOutlineStyle';
+/**
+ * An HTML anchor component which handles VueRouter links (internal), href links (external) and clickable links (no href).
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The href of the link, this can be an internal (relative or absolute) or an external link.
+     */
+    href: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * set to true if you would like a completely unstyled link. This is useful for creating a complex component which may use NeonLink.
+     */
+    noStyle: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Style of the outline to use when the link has focus, use <em>text</em> for wrapping text content and
+     * <em>border</em> for tooltips wrapping "block" elements, e.g. buttons.
+     */
+    outlineStyle: {
+        type: () => NeonOutlineStyle;
+        default: NeonOutlineStyle;
+    };
+    /**
+     * Display an external link icon to the right of the link indicating clicking it will take the user to another site.
+     */
+    externalIndicator: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    routerUrl: import("vue").ComputedRef<string | undefined>;
+    sanitizedAttributes: import("vue").ComputedRef<{
+        [x: string]: unknown;
+    }>;
+    activeRoute: import("vue").ComputedRef<boolean | "">;
+    exactRoute: import("vue").ComputedRef<boolean | "">;
+    onClick: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * The href of the link, this can be an internal (relative or absolute) or an external link.
+     */
+    href: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * set to true if you would like a completely unstyled link. This is useful for creating a complex component which may use NeonLink.
+     */
+    noStyle: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Style of the outline to use when the link has focus, use <em>text</em> for wrapping text content and
+     * <em>border</em> for tooltips wrapping "block" elements, e.g. buttons.
+     */
+    outlineStyle: {
+        type: () => NeonOutlineStyle;
+        default: NeonOutlineStyle;
+    };
+    /**
+     * Display an external link icon to the right of the link indicating clicking it will take the user to another site.
+     */
+    externalIndicator: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+}, {
+    href: string;
+    noStyle: boolean;
+    outlineStyle: NeonOutlineStyle;
+    externalIndicator: boolean;
+}>;
+export default _default;

package/dist/src/components/navigation/link/NeonLink.vue.d.ts

@@ -0,0 +1,2 @@
+export * from './NeonLink.js';
+export { default } from './NeonLink.js';

package/dist/src/components/navigation/menu/NeonMenu.d.ts

@@ -0,0 +1,107 @@
+import type { NeonMenuModel } from '@/common/models/NeonMenuModel';
+import { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';
+import { NeonSize } from '@/common/enums/NeonSize';
+/**
+ * <p>
+ *   <strong>NeonMenu</strong> is a responsive aware menu that progressively collapses options into the mobile menu as
+ *   the screen size gets smaller. This is a more flexible option than moving directly to a hamburger menu at tablet and
+ *   below. It is a best effort approach to keep displaying the most important menu items for as long as possible,
+ *   giving the user a better experience.
+ * </p>
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The menu configuration. This can have two levels, i.e. a top level horizontal menu and, if required, a dropdown
+     * menu containing the second level. The highlighted 'active' menu is determined by the current Vue route.
+     */
+    menu: {
+        type: () => Array<NeonMenuModel>;
+        required: true;
+    };
+    /**
+     * The menu highlight color (excludes low-contrast and neutral).
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+    /**
+     * The menu size.
+     */
+    size: {
+        type: () => NeonSize;
+        default: NeonSize;
+    };
+    /**
+     * Whether to enable the priority menu which automatically calculates the available screen space and displays
+     * as many of the menu items as possible, moving the remaining items into the overflow menu.
+     */
+    priorityMenuEnabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    menuWrapper: import("vue").Ref<HTMLElement | null>;
+    menuItem: import("vue").Ref<HTMLElement[] | null>;
+    menuItems: import("vue").Ref<{
+        element: HTMLElement;
+        width: number;
+        key: string;
+    }[]>;
+    responsiveButton: import("vue").Ref<HTMLElement | null>;
+    responsiveMenuItems: import("vue").Ref<{
+        children?: {
+            key: string;
+            label: string;
+            href?: string | undefined;
+            icon?: string | undefined;
+            disabled?: boolean | undefined;
+        }[] | undefined;
+        key: string;
+        label: string;
+        href?: string | undefined;
+        icon?: string | undefined;
+        disabled?: boolean | undefined;
+    }[]>;
+    visible: import("vue").Ref<string[]>;
+    onClick: (key: string) => void;
+    routeMatches: (path: string) => boolean;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * The menu configuration. This can have two levels, i.e. a top level horizontal menu and, if required, a dropdown
+     * menu containing the second level. The highlighted 'active' menu is determined by the current Vue route.
+     */
+    menu: {
+        type: () => Array<NeonMenuModel>;
+        required: true;
+    };
+    /**
+     * The menu highlight color (excludes low-contrast and neutral).
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+    /**
+     * The menu size.
+     */
+    size: {
+        type: () => NeonSize;
+        default: NeonSize;
+    };
+    /**
+     * Whether to enable the priority menu which automatically calculates the available screen space and displays
+     * as many of the menu items as possible, moving the remaining items into the overflow menu.
+     */
+    priorityMenuEnabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+}, {
+    color: NeonFunctionalColor;
+    size: NeonSize;
+    priorityMenuEnabled: boolean;
+}>;
+export default _default;

package/dist/src/components/navigation/menu/NeonMenu.vue.d.ts

@@ -0,0 +1,2 @@
+export * from './NeonMenu.js';
+export { default } from './NeonMenu.js';

package/dist/src/components/navigation/menu/NeonPriorityMenuItem.d.ts

@@ -0,0 +1,5 @@
+export interface NeonPriorityMenuItem {
+    element: HTMLElement;
+    width: number;
+    key: string;
+}

package/dist/src/components/navigation/stepper/NeonStepper.d.ts

@@ -0,0 +1,74 @@
+import { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';
+/**
+ * A stepper component for assisting users in navigating through complex flows.
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * An ordered list of the step names, these values are used for display purposes.
+     */
+    steps: {
+        type: () => Array<string>;
+        required: true;
+    };
+    /**
+     * The index of the highest completed step (regardless of the current step the user has selected).
+     * This is used to display the completed steps to the user.
+     */
+    completedIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * The index of the step that is currently selected.
+     */
+    modelValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * The color of the Stepper component.
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+}, {
+    emit: (event: "update:modelValue", ...args: any[]) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * An ordered list of the step names, these values are used for display purposes.
+     */
+    steps: {
+        type: () => Array<string>;
+        required: true;
+    };
+    /**
+     * The index of the highest completed step (regardless of the current step the user has selected).
+     * This is used to display the completed steps to the user.
+     */
+    completedIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * The index of the step that is currently selected.
+     */
+    modelValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * The color of the Stepper component.
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    color: NeonFunctionalColor;
+    modelValue: number;
+    completedIndex: number;
+}>;
+export default _default;

package/dist/src/components/navigation/stepper/NeonStepper.vue.d.ts

@@ -0,0 +1,2 @@
+export * from './NeonStepper.js';
+export { default } from './NeonStepper.js';

package/dist/src/components/navigation/tree-menu/NeonTreeMenu.d.ts

@@ -0,0 +1,47 @@
+import type { NeonTreeMenuSectionModel } from '@/common/models/NeonTreeMenuSectionModel';
+/**
+ * Three level tree menu. This is useful for displaying a hierarchical navigation in NeonSideNav.The top level of the
+ * menu is expandable on click but will not navigate to a page. The second level is links to pages and the third level
+ * is the fragments on that page.
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The tree model defining the menu.
+     */
+    model: {
+        type: () => Array<NeonTreeMenuSectionModel>;
+        required: true;
+    };
+    /**
+     * Expand all nodes in the tree, this is useful for providing filtering (e.g. the Neon showcase side navigation menu).
+     */
+    expandAll: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    url: import("vue").Ref<string | null>;
+    click: ($event: KeyboardEvent) => void;
+    onClick: (key: string) => void;
+    fragment: (anchor: string) => string;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * The tree model defining the menu.
+     */
+    model: {
+        type: () => Array<NeonTreeMenuSectionModel>;
+        required: true;
+    };
+    /**
+     * Expand all nodes in the tree, this is useful for providing filtering (e.g. the Neon showcase side navigation menu).
+     */
+    expandAll: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+}, {
+    expandAll: boolean;
+}>;
+export default _default;

package/dist/src/components/navigation/tree-menu/NeonTreeMenu.vue.d.ts

@@ -0,0 +1,2 @@
+export * from './NeonTreeMenu.js';
+export { default } from './NeonTreeMenu.js';

package/dist/src/components/presentation/badge/NeonBadge.d.ts

@@ -0,0 +1,145 @@
+import { NeonSize } from '@/common/enums/NeonSize';
+import { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';
+/**
+ * A badge is a small square or circular component for representing user avatars. These can be in the form of an image, an icon or a two character string (e.g. the user's initials).
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The two character <em>initials</em> to display on the badge.
+     */
+    label: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * URL of the image to display on the badge.
+     */
+    image: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * An icon to display on the badge.
+     */
+    icon: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * If true, render the badge as a circle, instead of a square.
+     */
+    circular: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The size of the badge - Small, Medium or Large.
+     */
+    size: {
+        type: () => NeonSize;
+        default: NeonSize;
+    };
+    /**
+     * The color of the badge. This is one of the provided NeonFunctionalColors.
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+    /**
+     * Alternate color for creating gradient badges. NOTE: can also be the same color as 'color'.
+     */
+    alternateColor: {
+        type: () => NeonFunctionalColor;
+        default: null;
+    };
+    /**
+     * Display the badge in the disable style
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Badge image alt text.
+     */
+    imageAlt: {
+        type: StringConstructor;
+        default: string;
+    };
+}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * The two character <em>initials</em> to display on the badge.
+     */
+    label: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * URL of the image to display on the badge.
+     */
+    image: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * An icon to display on the badge.
+     */
+    icon: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * If true, render the badge as a circle, instead of a square.
+     */
+    circular: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The size of the badge - Small, Medium or Large.
+     */
+    size: {
+        type: () => NeonSize;
+        default: NeonSize;
+    };
+    /**
+     * The color of the badge. This is one of the provided NeonFunctionalColors.
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+    /**
+     * Alternate color for creating gradient badges. NOTE: can also be the same color as 'color'.
+     */
+    alternateColor: {
+        type: () => NeonFunctionalColor;
+        default: null;
+    };
+    /**
+     * Display the badge in the disable style
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Badge image alt text.
+     */
+    imageAlt: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    label: string;
+    image: string;
+    color: NeonFunctionalColor;
+    icon: string;
+    disabled: boolean;
+    circular: boolean;
+    size: NeonSize;
+    alternateColor: NeonFunctionalColor;
+    imageAlt: string;
+}>;
+export default _default;

package/dist/src/components/presentation/badge/NeonBadge.vue.d.ts

@@ -0,0 +1,2 @@
+export * from './NeonBadge.js';
+export { default } from './NeonBadge.js';