@aotearoan/neon 9.2.9 → 9.3.0

package/dist/src/components/user-input/date-picker/NeonDatePicker.d.ts

@@ -0,0 +1,378 @@
+import { NeonSize } from '@/common/enums/NeonSize';
+import { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';
+import { NeonDropdownPlacement } from '@/common/enums/NeonDropdownPlacement';
+/**
+ * <strong>NeonDatePicker</strong> is the equivalent of the native
+ * <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date" target="_blank">HTML Date Input</a>.
+ * It accepts an <a href="https://en.wikipedia.org/wiki/ISO_8601" target="_blank">ISO 8601</a> date string &
+ * allows the user to select a date. Dates are formatted with the provided locale, if none is provided the browser
+ * locale is used as a default. On touch devices the native date picker is presented to the user.
+ *
+ * The input date is displayed to the user WITHOUT any adjustment for their timezone, however 'Today' on the calendar is
+ * highlighted for the user's timezone.
+ *
+ * This component interaction was inspired by this <a href="https://icehaunter.github.io/vue3-datepicker" target="_blank">vue-datepicker</a>
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The selected date. A date string in the
+     * <a href="https://en.wikipedia.org/wiki/ISO_8601" target="_blank">ISO 8601</a> format.
+     */
+    modelValue: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * The locale used for display purposes. This defaults to the browser's locale if none is provided.
+     */
+    locale: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * Disable date picker
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The size of the date picker, one of NeonSize.Small | NeonSize.Medium | NeonSize.Large.
+     */
+    size: {
+        type: () => NeonSize;
+        default: NeonSize;
+    };
+    /**
+     * Color of the date picker
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+    /**
+     * Minimum allowed date value in the <a href="https://en.wikipedia.org/wiki/ISO_8601" target="_blank">ISO 8601</a> format.
+     */
+    min: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * Maximum allowed date value in the <a href="https://en.wikipedia.org/wiki/ISO_8601" target="_blank">ISO 8601</a> format.
+     */
+    max: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * The placement of the dropdown calendar popup.
+     */
+    placement: {
+        type: () => NeonDropdownPlacement;
+        default: NeonDropdownPlacement;
+    };
+    /**
+     * Disabled dates, a list of <a href="https://en.wikipedia.org/wiki/ISO_8601" target="_blank">ISO 8601</a> format
+     * dates for which to disable selection.
+     */
+    disabledDates: {
+        type: () => Array<string>;
+        default: () => never[];
+    };
+    /**
+     * This is the placeholder for the text input when no value is provided.
+     */
+    placeholder: {
+        type: StringConstructor;
+        required: false;
+    };
+    /**
+     * This is the label of the input field which opens the calendar. This is technically a button.
+     */
+    openCalendarLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * This is the label of the 'Done' button in the calendar popup.
+     */
+    doneLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * This is the label of the 'Clear' button in the calendar popup.
+     */
+    clearLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * This is the ARIA label of the 'Change month' button in the calendar popup.
+     */
+    changeMonthLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * This is the ARIA label of the 'Previous month' button in the calendar popup.
+     */
+    previousMonthLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * This is the ARIA label of the 'Next month' button in the calendar popup.
+     */
+    nextMonthLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * This is the ARIA label of the 'Change year' button in the calendar popup.
+     */
+    changeYearLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * This is the ARIA label of the 'Previous year' button in the calendar popup.
+     */
+    previousYearLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * This is the ARIA label of the 'Next year' button in the calendar popup.
+     */
+    nextYearLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * This is the ARIA label of the 'Previous decade' button in the calendar popup.
+     */
+    previousDecadeLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * This is the ARIA label of the 'Next decade' button in the calendar popup.
+     */
+    nextDecadeLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {
+    attrs: {
+        [x: string]: unknown;
+    };
+    calendar: import("vue").ComputedRef<import("../../../common/models/NeonCalendarConfig").NeonCalendarConfig>;
+    calendarOpen: import("vue").Ref<boolean>;
+    dropdown: import("vue").Ref<HTMLElement | null>;
+    formattedValue: import("vue").ComputedRef<string>;
+    isChangeDateDisabled: import("vue").ComputedRef<boolean | "">;
+    isChangeYearDisabled: import("vue").ComputedRef<boolean | "">;
+    isNextDisabled: import("vue").ComputedRef<boolean | "">;
+    isNextDecadeDisabled: import("vue").ComputedRef<boolean | "">;
+    isNextYearDisabled: import("vue").ComputedRef<boolean | "">;
+    isPreviousDisabled: import("vue").ComputedRef<boolean | "">;
+    isPreviousDecadeDisabled: import("vue").ComputedRef<boolean | "">;
+    isPreviousYearDisabled: import("vue").ComputedRef<boolean | "">;
+    monthSelectionOpen: import("vue").Ref<boolean>;
+    optional: boolean;
+    today: import("vue").ComputedRef<string>;
+    calendarRef: import("vue").Ref<HTMLElement | null>;
+    yearSelectionOpen: import("vue").Ref<boolean>;
+    changeMonth: () => void;
+    changeYear: () => void;
+    clear: () => void;
+    done: () => void;
+    emitDate: (newDate: string) => void;
+    isDisabled: (isoDate: string) => boolean | "";
+    isoDate: (day: number, month: number, year: number) => string;
+    isMonthDisabled: (year: number, month: number) => boolean | "" | null;
+    isYearDisabled: (year: number) => boolean | 0 | null;
+    openCalendar: () => void;
+    onNext: () => void;
+    onNextDecade: () => void;
+    onNextYear: () => void;
+    onPrevious: () => void;
+    onPreviousDecade: () => void;
+    onPreviousYear: () => void;
+    resetToCalendar: () => void;
+    selectMonth: (month: number) => void;
+    selectYear: (year: number) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * The selected date. A date string in the
+     * <a href="https://en.wikipedia.org/wiki/ISO_8601" target="_blank">ISO 8601</a> format.
+     */
+    modelValue: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * The locale used for display purposes. This defaults to the browser's locale if none is provided.
+     */
+    locale: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * Disable date picker
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The size of the date picker, one of NeonSize.Small | NeonSize.Medium | NeonSize.Large.
+     */
+    size: {
+        type: () => NeonSize;
+        default: NeonSize;
+    };
+    /**
+     * Color of the date picker
+     */
+    color: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+    /**
+     * Minimum allowed date value in the <a href="https://en.wikipedia.org/wiki/ISO_8601" target="_blank">ISO 8601</a> format.
+     */
+    min: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * Maximum allowed date value in the <a href="https://en.wikipedia.org/wiki/ISO_8601" target="_blank">ISO 8601</a> format.
+     */
+    max: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * The placement of the dropdown calendar popup.
+     */
+    placement: {
+        type: () => NeonDropdownPlacement;
+        default: NeonDropdownPlacement;
+    };
+    /**
+     * Disabled dates, a list of <a href="https://en.wikipedia.org/wiki/ISO_8601" target="_blank">ISO 8601</a> format
+     * dates for which to disable selection.
+     */
+    disabledDates: {
+        type: () => Array<string>;
+        default: () => never[];
+    };
+    /**
+     * This is the placeholder for the text input when no value is provided.
+     */
+    placeholder: {
+        type: StringConstructor;
+        required: false;
+    };
+    /**
+     * This is the label of the input field which opens the calendar. This is technically a button.
+     */
+    openCalendarLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * This is the label of the 'Done' button in the calendar popup.
+     */
+    doneLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * This is the label of the 'Clear' button in the calendar popup.
+     */
+    clearLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * This is the ARIA label of the 'Change month' button in the calendar popup.
+     */
+    changeMonthLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * This is the ARIA label of the 'Previous month' button in the calendar popup.
+     */
+    previousMonthLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * This is the ARIA label of the 'Next month' button in the calendar popup.
+     */
+    nextMonthLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * This is the ARIA label of the 'Change year' button in the calendar popup.
+     */
+    changeYearLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * This is the ARIA label of the 'Previous year' button in the calendar popup.
+     */
+    previousYearLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * This is the ARIA label of the 'Next year' button in the calendar popup.
+     */
+    nextYearLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * This is the ARIA label of the 'Previous decade' button in the calendar popup.
+     */
+    previousDecadeLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * This is the ARIA label of the 'Next decade' button in the calendar popup.
+     */
+    nextDecadeLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    color: NeonFunctionalColor;
+    disabled: boolean;
+    modelValue: string;
+    placement: NeonDropdownPlacement;
+    size: NeonSize;
+    locale: string;
+    min: string;
+    max: string;
+    disabledDates: string[];
+    openCalendarLabel: string;
+    doneLabel: string;
+    clearLabel: string;
+    changeMonthLabel: string;
+    previousMonthLabel: string;
+    nextMonthLabel: string;
+    changeYearLabel: string;
+    previousYearLabel: string;
+    nextYearLabel: string;
+    previousDecadeLabel: string;
+    nextDecadeLabel: string;
+}>;
+export default _default;

package/dist/src/components/user-input/date-picker/NeonDatePicker.vue.d.ts

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

package/dist/src/components/user-input/drop-zone/NeonDropZone.d.ts

@@ -0,0 +1,59 @@
+import { NeonState } from '@/common/enums/NeonState';
+/**
+ * Defines a file drop zone.
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The state of the drop zone, used to indicate loading. ACCEPTS <em>Ready</em> and <em>Loading</em> states ONLY.
+     */
+    state: {
+        type: () => NeonState;
+        default: () => NeonState;
+    };
+    /**
+     * The disabled state of the drop zone
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Display the drop zone as a circle instead of square
+     */
+    circular: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    active: import("vue").Ref<boolean>;
+    dropzone: import("vue").Ref<HTMLDivElement | null>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "files"[], "files", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * The state of the drop zone, used to indicate loading. ACCEPTS <em>Ready</em> and <em>Loading</em> states ONLY.
+     */
+    state: {
+        type: () => NeonState;
+        default: () => NeonState;
+    };
+    /**
+     * The disabled state of the drop zone
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Display the drop zone as a circle instead of square
+     */
+    circular: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onFiles?: ((...args: any[]) => any) | undefined;
+}, {
+    disabled: boolean;
+    circular: boolean;
+    state: NeonState;
+}>;
+export default _default;

package/dist/src/components/user-input/drop-zone/NeonDropZone.vue.d.ts

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

package/dist/src/components/user-input/field/NeonField.d.ts

@@ -0,0 +1,114 @@
+import { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';
+/**
+ * An HTML label implementation supporting optional labels. Use in the same way as an HTML label either wrapping the input
+ * or using the label alongside the input.
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The label text to render.
+     */
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * The equivalent of the <em>for</em> attribute on an HTML label.
+     */
+    labelFor: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * Display an "optional" indicator with the label.
+     */
+    optional: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Display label with disabled state.
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The default "optional" label text.
+     */
+    optionalLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Message to display below the input field.
+     */
+    message: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * The color of message displayed under input. Can be any functional color.
+     */
+    messageColor: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * The label text to render.
+     */
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * The equivalent of the <em>for</em> attribute on an HTML label.
+     */
+    labelFor: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * Display an "optional" indicator with the label.
+     */
+    optional: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Display label with disabled state.
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The default "optional" label text.
+     */
+    optionalLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Message to display below the input field.
+     */
+    message: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * The color of message displayed under input. Can be any functional color.
+     */
+    messageColor: {
+        type: () => NeonFunctionalColor;
+        default: NeonFunctionalColor;
+    };
+}>>, {
+    disabled: boolean;
+    message: string;
+    optional: boolean;
+    labelFor: string;
+    optionalLabel: string;
+    messageColor: NeonFunctionalColor;
+}>;
+export default _default;

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

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

package/dist/src/components/user-input/field-group/NeonFieldGroup.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Used to compose a group of inputs, buttons and input indicators into a single component.
+ */
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

package/dist/src/components/user-input/field-group/NeonFieldGroup.vue.d.ts

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