@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
379 lines (378 loc) • 11.7 kB
TypeScript
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;
};
}>>, {
disabled: boolean;
placement: NeonDropdownPlacement;
locale: string;
size: NeonSize;
color: NeonFunctionalColor;
modelValue: 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;