@aotearoan/neon 9.2.9 → 9.3.0

package/dist/src/components/user-input/search/NeonSearch.d.ts

@@ -0,0 +1,139 @@
+import { NeonSize } from '@/common/enums/NeonSize';
+import { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';
+import type { NeonSearchOption } from '@/common/models/NeonSearchOption';
+import { NeonDropdownPlacement } from '@/common/enums/NeonDropdownPlacement';
+/**
+ * <p>
+ *   The <strong>NeonSearch</strong> component is equivalent to an HTML &lt;input type="search"&gt; element. It is
+ *   useful as an alternative to <em>NeonSelect</em> to provide filtered results when the universe of results is very
+ *   large and/or the results need to be requested from a server side API.
+ * </p>
+ * <p><strong>NeonSearch</strong> provides input chips in the case the search allows multiple selection.</p>
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * Either a string indicating the key of the selected option ('' if there is no selection) or an array of selected
+     * NeonSearchOption in the case when multiple = true (necessary to display them as chips).
+     */
+    modelValue: {
+        type: (StringConstructor | (() => Array<NeonSearchOption>))[];
+        required: true;
+    };
+    /**
+     * Placeholder to display in search input when there is no search string entered.
+     */
+    placeholder: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * The list of search results.
+     */
+    options: {
+        type: () => Array<NeonSearchOption>;
+        required: true;
+    };
+    /**
+     * Allow multi-select.
+     */
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Disable the search
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The size of the dropdown - Small, Medium or Large.
+     */
+    size: {
+        type: () => NeonSize;
+        default: NeonSize;
+    };
+    /**
+     * The color of the search.
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+}, {
+    dropdown: import("vue").Ref<HTMLElement | null>;
+    open: import("vue").Ref<boolean>;
+    highlightedKey: import("vue").Ref<string | null>;
+    filter: import("vue").Ref<string>;
+    sanitizedAttributes: import("vue").ComputedRef<{
+        [x: string]: unknown;
+    }>;
+    computedOptions: import("vue").ComputedRef<NeonSearchOption[]>;
+    onPlacement: (placement: NeonDropdownPlacement) => void;
+    onFilterChange: (_filter: string) => void;
+    clickOption: (option: NeonSearchOption) => void;
+    changeHighlighted: (key: string) => void;
+    showOptions: () => boolean;
+    removeSelected: (removed: NeonSearchOption) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "filter-changed")[], "update:modelValue" | "filter-changed", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * Either a string indicating the key of the selected option ('' if there is no selection) or an array of selected
+     * NeonSearchOption in the case when multiple = true (necessary to display them as chips).
+     */
+    modelValue: {
+        type: (StringConstructor | (() => Array<NeonSearchOption>))[];
+        required: true;
+    };
+    /**
+     * Placeholder to display in search input when there is no search string entered.
+     */
+    placeholder: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * The list of search results.
+     */
+    options: {
+        type: () => Array<NeonSearchOption>;
+        required: true;
+    };
+    /**
+     * Allow multi-select.
+     */
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Disable the search
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The size of the dropdown - Small, Medium or Large.
+     */
+    size: {
+        type: () => NeonSize;
+        default: NeonSize;
+    };
+    /**
+     * The color of the search.
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onFilter-changed"?: ((...args: any[]) => any) | undefined;
+}, {
+    color: NeonFunctionalColor;
+    disabled: boolean;
+    size: NeonSize;
+    multiple: boolean;
+}>;
+export default _default;

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

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

package/dist/src/components/user-input/select/NeonSelect.d.ts

@@ -0,0 +1,207 @@
+import { NeonSize } from '@/common/enums/NeonSize';
+import type { NeonSelectGroup } from '@/common/models/NeonSelectGroup';
+import type { NeonSelectOption } from '@/common/models/NeonSelectOption';
+import { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';
+import { NeonDropdownPlacement } from '@/common/enums/NeonDropdownPlacement';
+/**
+ * <p>The <strong>NeonSelect</strong> is the equivalent of an HTML &lt;select&gt; form control. On touch devices
+ * NeonSelect will use the native select for input. <strong>NeonSelect</strong> supports grouping and multiselect.</p>
+ * <p><strong>Note:</strong> As well as the options described below, pass through attributes supported by
+ * <a href="/presentation/dropdown">NeonDropdown</a> to change the style of the dropdown button.</p>
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * Id for the dropdown button
+     */
+    id: {
+        type: StringConstructor;
+    };
+    /**
+     * Placeholder to display as button label when there is no option selected.
+     */
+    placeholder: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * Display the placeholder as the first option in the select, this is useful as an alternative to a label.
+     */
+    placeholderAsOption: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Optional placeholder icon.
+     */
+    placeholderIcon: {
+        type: StringConstructor;
+        required: false;
+    };
+    /**
+     * A list of options to render in the select.
+     */
+    options: {
+        type: () => Array<NeonSelectOption>;
+        required: false;
+    };
+    /**
+     * A list of grouped options to render in the select.
+     */
+    groupedOptions: {
+        type: () => Array<NeonSelectGroup>;
+        required: false;
+    };
+    /**
+     * Either a single string, indicating the key of the selected option or an array of selected keys in the case
+     * multiple = true.
+     */
+    modelValue: {
+        type: (StringConstructor | (() => Array<string>))[];
+        required: true;
+    };
+    /**
+     * Allow multi-select.
+     */
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Placeholder when multiple values are selected.
+     */
+    multiselectPlaceholder: {
+        type: StringConstructor;
+        required: false;
+    };
+    /**
+     * Disable the select
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The size of the dropdown - Small, Medium or Large.
+     */
+    size: {
+        type: () => NeonSize;
+        default: NeonSize;
+    };
+    /**
+     * The color of the select.
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+}, {
+    dropdown: import("vue").Ref<HTMLElement | null>;
+    open: import("vue").Ref<boolean>;
+    highlightedKey: import("vue").Ref<string | null>;
+    highlightedIndex: import("vue").Ref<number>;
+    flattenedOptions: import("vue").ComputedRef<NeonSelectOption[]>;
+    computedLabel: import("vue").ComputedRef<string>;
+    sanitizedAttributes: import("vue").ComputedRef<{
+        [x: string]: unknown;
+    }>;
+    computedOptions: import("vue").ComputedRef<NeonSelectGroup[]>;
+    computedIcon: import("vue").ComputedRef<string | undefined>;
+    clickOption: (option: NeonSelectOption) => void;
+    nativeSelectChange: (event: Event) => void;
+    changeHighlighted: (key: string) => void;
+    onPlacement: (placement: NeonDropdownPlacement) => 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<{
+    /**
+     * Id for the dropdown button
+     */
+    id: {
+        type: StringConstructor;
+    };
+    /**
+     * Placeholder to display as button label when there is no option selected.
+     */
+    placeholder: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * Display the placeholder as the first option in the select, this is useful as an alternative to a label.
+     */
+    placeholderAsOption: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Optional placeholder icon.
+     */
+    placeholderIcon: {
+        type: StringConstructor;
+        required: false;
+    };
+    /**
+     * A list of options to render in the select.
+     */
+    options: {
+        type: () => Array<NeonSelectOption>;
+        required: false;
+    };
+    /**
+     * A list of grouped options to render in the select.
+     */
+    groupedOptions: {
+        type: () => Array<NeonSelectGroup>;
+        required: false;
+    };
+    /**
+     * Either a single string, indicating the key of the selected option or an array of selected keys in the case
+     * multiple = true.
+     */
+    modelValue: {
+        type: (StringConstructor | (() => Array<string>))[];
+        required: true;
+    };
+    /**
+     * Allow multi-select.
+     */
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Placeholder when multiple values are selected.
+     */
+    multiselectPlaceholder: {
+        type: StringConstructor;
+        required: false;
+    };
+    /**
+     * Disable the select
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The size of the dropdown - Small, Medium or Large.
+     */
+    size: {
+        type: () => NeonSize;
+        default: NeonSize;
+    };
+    /**
+     * The color of the select.
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    color: NeonFunctionalColor;
+    disabled: boolean;
+    size: NeonSize;
+    multiple: boolean;
+    placeholderAsOption: boolean;
+}>;
+export default _default;

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

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

package/dist/src/components/user-input/selectable-card/NeonSelectableCard.d.ts

@@ -0,0 +1,79 @@
+import { NeonSize } from '@/common/enums/NeonSize';
+import { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';
+import { NeonResponsive } from '@/common/enums/NeonResponsive';
+/**
+ * <p>
+ * <strong>NeonSelectableCard</strong> is a horizontal card that is selectable by clicking on it. It can be used in
+ * lists to easily allow users to select multiple items, providing richer content & a larger footprint for clicking on.
+ * </p>
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The selected state of the card
+     */
+    modelValue: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    /**
+     * The size of the card.
+     */
+    size: {
+        type: () => NeonSize;
+        default: NeonSize;
+    };
+    /**
+     * The selection color. This will be used for the checkbox as well as borders & the background color
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+    /**
+     * The disabled state of the card.
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    active: import("vue").Ref<boolean>;
+    clicked: () => void;
+    NeonResponsive: typeof NeonResponsive;
+}, 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 selected state of the card
+     */
+    modelValue: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    /**
+     * The size of the card.
+     */
+    size: {
+        type: () => NeonSize;
+        default: NeonSize;
+    };
+    /**
+     * The selection color. This will be used for the checkbox as well as borders & the background color
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+    /**
+     * The disabled state of the card.
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    color: NeonFunctionalColor;
+    disabled: boolean;
+    size: NeonSize;
+}>;
+export default _default;

package/dist/src/components/user-input/selectable-card/NeonSelectableCard.vue.d.ts

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