@aotearoan/neon 9.2.9 → 9.3.0

package/dist/src/components/user-input/file/NeonFile.d.ts

@@ -0,0 +1,190 @@
+import { NeonSize } from '@/common/enums/NeonSize';
+import { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';
+import { NeonState } from '@/common/enums/NeonState';
+/**
+ * A file upload component. This is a wrapper around an HTML file input. It can display multiple files as well as
+ * providing a convenient UI for removing/clearing files from the list.
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The disabled state of the component
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Files are uploaded directly once added, there is no waiting to click a confirmation button
+     */
+    directUpload: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Support multiple files.
+     */
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * HTML file input accept property for filtering the files the user is allowed to select. This is a mime type,
+     * e.g. 'application/pdf'.
+     */
+    accept: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * Provide an id to attach to the internal HTML input[file] (also adds an aria-controls link between the button and
+     * the hidden input).
+     */
+    id: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * The file component size
+     */
+    size: {
+        type: () => NeonSize;
+        default: NeonSize;
+    };
+    /**
+     * The state of the input, used to indicate loading, success and error states
+     */
+    state: {
+        type: () => NeonState;
+        default: NeonState;
+    };
+    /**
+     * The file component color
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+    /**
+     * The label of the file component button
+     */
+    label: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * The icon of the file component button
+     */
+    icon: {
+        type: StringConstructor;
+        default: null;
+    };
+}, {
+    fileInput: import("vue").Ref<HTMLInputElement | null>;
+    files: import("vue").Ref<{
+        readonly lastModified: number;
+        readonly name: string;
+        readonly webkitRelativePath: string;
+        readonly size: number;
+        readonly type: string;
+        arrayBuffer: () => Promise<ArrayBuffer>;
+        slice: (start?: number | undefined, end?: number | undefined, contentType?: string | undefined) => Blob;
+        stream: () => ReadableStream<Uint8Array>;
+        text: () => Promise<string>;
+    }[]>;
+    fileList: import("vue").ComputedRef<{
+        key: string;
+        label: string;
+    }[]>;
+    fileInputModel: import("vue").Ref<string>;
+    remove: (filename: string) => void;
+    clearAll: () => void;
+    openFileDialog: () => void;
+    onInput: (event: Event) => 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<{
+    /**
+     * The disabled state of the component
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Files are uploaded directly once added, there is no waiting to click a confirmation button
+     */
+    directUpload: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Support multiple files.
+     */
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * HTML file input accept property for filtering the files the user is allowed to select. This is a mime type,
+     * e.g. 'application/pdf'.
+     */
+    accept: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * Provide an id to attach to the internal HTML input[file] (also adds an aria-controls link between the button and
+     * the hidden input).
+     */
+    id: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * The file component size
+     */
+    size: {
+        type: () => NeonSize;
+        default: NeonSize;
+    };
+    /**
+     * The state of the input, used to indicate loading, success and error states
+     */
+    state: {
+        type: () => NeonState;
+        default: NeonState;
+    };
+    /**
+     * The file component color
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+    /**
+     * The label of the file component button
+     */
+    label: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * The icon of the file component button
+     */
+    icon: {
+        type: StringConstructor;
+        default: null;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    label: string;
+    color: NeonFunctionalColor;
+    icon: string;
+    disabled: boolean;
+    id: string;
+    size: NeonSize;
+    state: NeonState;
+    directUpload: boolean;
+    multiple: boolean;
+    accept: string;
+}>;
+export default _default;

package/dist/src/components/user-input/file/NeonFile.vue.d.ts

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

package/dist/src/components/user-input/filter-list/NeonFilterList.d.ts

@@ -0,0 +1,145 @@
+import { NeonSize } from '@/common/enums/NeonSize';
+import { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';
+import type { NeonFilterListItem } from '@/common/models/NeonFilterListItem';
+/**
+ * <p><strong>NeonFilterList</strong> is an alternative component to a select where the values are displayed in a
+ * visible list to the user. This component is particularly useful for presenting filters to the user and also provides
+ * the option of displaying the item counts with each list item.</p>
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The list if items to display
+     */
+    items: {
+        type: () => Array<NeonFilterListItem>;
+        required: true;
+    };
+    /**
+     * Either a single string, indicating the key of the selected item or an array of selected keys in the case
+     * multiple = true.
+     */
+    modelValue: {
+        type: (StringConstructor | (() => Array<string>))[];
+        required: true;
+    };
+    /**
+     * Allow multi-select of items.
+     */
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The size of the list items - Small, Medium or Large.
+     */
+    size: {
+        type: () => NeonSize;
+        default: NeonSize;
+    };
+    /**
+     * The color of the selected list items..
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+    /**
+     * The number of visible items. If there are more items they will be placed behind an expansion
+     * button which toggles displaying displayCount items and all items.
+     */
+    displayCount: {
+        type: NumberConstructor;
+        default: null;
+    };
+    /**
+     * Label for the Show more toggle if <em>displayCount</em> is set. The default is 'Show {count} more' where {count} is substituted with the display count
+     */
+    showMoreLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Label for the expanded Show more toggle if <em>displayCount</em> is set. The default is 'Show less'.
+     */
+    showLessLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {
+    showAll: import("vue").Ref<boolean>;
+    selected: import("vue").ComputedRef<Record<string, boolean>>;
+    visibleItems: import("vue").ComputedRef<NeonFilterListItem[]>;
+    toggleShowAllLabel: import("vue").ComputedRef<string>;
+    displayShowAllToggle: import("vue").ComputedRef<boolean | 0>;
+    toggleItem: (key: string, $event?: Event) => void;
+    toggleShowAll: () => 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<{
+    /**
+     * The list if items to display
+     */
+    items: {
+        type: () => Array<NeonFilterListItem>;
+        required: true;
+    };
+    /**
+     * Either a single string, indicating the key of the selected item or an array of selected keys in the case
+     * multiple = true.
+     */
+    modelValue: {
+        type: (StringConstructor | (() => Array<string>))[];
+        required: true;
+    };
+    /**
+     * Allow multi-select of items.
+     */
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The size of the list items - Small, Medium or Large.
+     */
+    size: {
+        type: () => NeonSize;
+        default: NeonSize;
+    };
+    /**
+     * The color of the selected list items..
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+    /**
+     * The number of visible items. If there are more items they will be placed behind an expansion
+     * button which toggles displaying displayCount items and all items.
+     */
+    displayCount: {
+        type: NumberConstructor;
+        default: null;
+    };
+    /**
+     * Label for the Show more toggle if <em>displayCount</em> is set. The default is 'Show {count} more' where {count} is substituted with the display count
+     */
+    showMoreLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Label for the expanded Show more toggle if <em>displayCount</em> is set. The default is 'Show less'.
+     */
+    showLessLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    color: NeonFunctionalColor;
+    size: NeonSize;
+    multiple: boolean;
+    displayCount: number;
+    showMoreLabel: string;
+    showLessLabel: string;
+}>;
+export default _default;

package/dist/src/components/user-input/filter-list/NeonFilterList.vue.d.ts

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

package/dist/src/components/user-input/input/NeonInput.d.ts

@@ -0,0 +1,296 @@
+import { NeonInputType } from '@/common/enums/NeonInputType';
+import { NeonState } from '@/common/enums/NeonState';
+import { NeonSize } from '@/common/enums/NeonSize';
+import { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';
+/**
+ * Equivalent of, and wrapper around, an HTML input. Also supports <strong>textarea</strong>.
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The id the input
+     */
+    id: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * The value of the input
+     */
+    modelValue: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * The type of input this is. NOTE: Neon provides custom components as alternatives in the following cases:
+     * * file (use <a href="/user-input/file">NeonFile</a>)
+     * * password (use <a href="/user-input/password">NeonPassword</a>)
+     */
+    type: {
+        type: () => NeonInputType;
+        default: NeonInputType;
+    };
+    /**
+     * Placeholder text to display in the input
+     */
+    placeholder: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * Size of the input
+     */
+    size: {
+        type: () => NeonSize;
+        default: NeonSize;
+    };
+    /**
+     * Color of the input
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+    /**
+     * The state of the input
+     */
+    state: {
+        type: () => NeonState;
+        default: NeonState;
+    };
+    /**
+     * The number of rows to display in the case of a textarea
+     */
+    rows: {
+        type: NumberConstructor;
+        default: null;
+    };
+    /**
+     * The name of a clickable icon to display inside the input. This is used for clearing contents or e.g. in the case of
+     * NeonPassword toggle showing/hiding the password. Defaults to <em>times</em> (for clearing the input's contents).
+     */
+    icon: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * Make the input field icon read-only, i.e. it will not emit events or be treated as a focusable button.
+     */
+    iconReadonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Hide the icon button, e.g. the X button to clear the input's contents.
+     */
+    hideIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Tabindex to assign to the input.
+     */
+    tabindex: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * The disabled state of the input
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * When the state is success or error, display the field with the state color indicator, e.g. border or background
+     * color.
+     */
+    stateHighlight: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * When the state is success or error, display the state icon.
+     */
+    stateIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The character limit for a textarea.
+     */
+    maxlength: {
+        type: NumberConstructor;
+        default: null;
+    };
+    /**
+     * Debounce time in ms, set to 0 to disable.
+     */
+    debounce: {
+        type: NumberConstructor;
+        default: number;
+    };
+}, {
+    neonInput: import("vue").Ref<HTMLElement | null>;
+    focused: import("vue").Ref<boolean>;
+    sanitizedAttributes: import("vue").ComputedRef<{
+        [x: string]: unknown;
+    }>;
+    iconVisible: import("vue").ComputedRef<string | boolean | undefined>;
+    iconName: import("vue").ComputedRef<string | undefined>;
+    iconColor: import("vue").ComputedRef<NeonFunctionalColor>;
+    computedPlaceholder: import("vue").ComputedRef<string>;
+    focus: () => void;
+    click: () => void;
+    onFocus: () => void;
+    onBlur: () => void;
+    iconClicked: ($event: Event) => void;
+    changeValue: (event: InputEvent) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "focus" | "blur" | "icon-click")[], "update:modelValue" | "focus" | "blur" | "icon-click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * The id the input
+     */
+    id: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * The value of the input
+     */
+    modelValue: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * The type of input this is. NOTE: Neon provides custom components as alternatives in the following cases:
+     * * file (use <a href="/user-input/file">NeonFile</a>)
+     * * password (use <a href="/user-input/password">NeonPassword</a>)
+     */
+    type: {
+        type: () => NeonInputType;
+        default: NeonInputType;
+    };
+    /**
+     * Placeholder text to display in the input
+     */
+    placeholder: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * Size of the input
+     */
+    size: {
+        type: () => NeonSize;
+        default: NeonSize;
+    };
+    /**
+     * Color of the input
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+    /**
+     * The state of the input
+     */
+    state: {
+        type: () => NeonState;
+        default: NeonState;
+    };
+    /**
+     * The number of rows to display in the case of a textarea
+     */
+    rows: {
+        type: NumberConstructor;
+        default: null;
+    };
+    /**
+     * The name of a clickable icon to display inside the input. This is used for clearing contents or e.g. in the case of
+     * NeonPassword toggle showing/hiding the password. Defaults to <em>times</em> (for clearing the input's contents).
+     */
+    icon: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * Make the input field icon read-only, i.e. it will not emit events or be treated as a focusable button.
+     */
+    iconReadonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Hide the icon button, e.g. the X button to clear the input's contents.
+     */
+    hideIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Tabindex to assign to the input.
+     */
+    tabindex: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * The disabled state of the input
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * When the state is success or error, display the field with the state color indicator, e.g. border or background
+     * color.
+     */
+    stateHighlight: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * When the state is success or error, display the state icon.
+     */
+    stateIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The character limit for a textarea.
+     */
+    maxlength: {
+        type: NumberConstructor;
+        default: null;
+    };
+    /**
+     * Debounce time in ms, set to 0 to disable.
+     */
+    debounce: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onFocus?: ((...args: any[]) => any) | undefined;
+    onBlur?: ((...args: any[]) => any) | undefined;
+    "onIcon-click"?: ((...args: any[]) => any) | undefined;
+}, {
+    color: NeonFunctionalColor;
+    icon: string;
+    disabled: boolean;
+    type: NeonInputType;
+    modelValue: string;
+    id: string;
+    size: NeonSize;
+    state: NeonState;
+    placeholder: string;
+    rows: number;
+    iconReadonly: boolean;
+    hideIcon: boolean;
+    tabindex: number;
+    stateHighlight: boolean;
+    stateIcon: boolean;
+    maxlength: number;
+    debounce: number;
+}>;
+export default _default;

package/dist/src/components/user-input/input/NeonInput.vue.d.ts

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

package/dist/src/components/user-input/input-indicator/NeonInputIndicator.d.ts

@@ -0,0 +1,55 @@
+import { NeonSize } from '@/common/enums/NeonSize';
+/**
+ * Use input indicators to provide additional information for input fields. This can be useful to add the field units or
+ * a connected label or icon.
+ * <br />
+ * NOTE: An input indicator is an HTML <em>label</em> so attributes like, e.g. <em>for</em> are accepted.
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The label to display
+     */
+    label: {
+        type: StringConstructor;
+        required: false;
+    };
+    /**
+     * The icon to display
+     */
+    icon: {
+        type: StringConstructor;
+        required: false;
+    };
+    /**
+     * The size of the input indicator
+     */
+    size: {
+        type: () => NeonSize;
+        default: NeonSize;
+    };
+}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * The label to display
+     */
+    label: {
+        type: StringConstructor;
+        required: false;
+    };
+    /**
+     * The icon to display
+     */
+    icon: {
+        type: StringConstructor;
+        required: false;
+    };
+    /**
+     * The size of the input indicator
+     */
+    size: {
+        type: () => NeonSize;
+        default: NeonSize;
+    };
+}>>, {
+    size: NeonSize;
+}>;
+export default _default;

package/dist/src/components/user-input/input-indicator/NeonInputIndicator.vue.d.ts

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