refactor(types): shorten ref, id JSDocs, use CarbonIcon type, export component props

This commit is contained in:
Eric Liu 2020-11-06 11:30:46 -08:00
commit 75d4b4cf03
219 changed files with 5168 additions and 5259 deletions

View file

@ -1,66 +1,68 @@
/// <reference types="svelte" />
export interface DatePickerProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Specify the date picker type
* @default "simple"
*/
datePickerType?: "simple" | "single" | "range";
/**
* Specify the date picker input value
* @default ""
*/
value?: string;
/**
* Specify the element to append the calendar to
*/
appendTo?: HTMLElement;
/**
* Specify the date format
* @default "m/d/Y"
*/
dateFormat?: string;
/**
* Specify the maximum date
* @default null
*/
maxDate?: null | string | Date;
/**
* Specify the minimum date
* @default null
*/
minDate?: null | string | Date;
/**
* Specify the locale
* @default "en"
*/
locale?: string;
/**
* Set to `true` to use the short variant
* @default false
*/
short?: boolean;
/**
* Set to `true` to enable the light variant
* @default false
*/
light?: boolean;
/**
* Set an id for the date picker element
* @default "ccs-" + Math.random().toString(36)
*/
id?: string;
}
export default class DatePicker {
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
/**
* Specify the date picker type
* @default "simple"
*/
datePickerType?: "simple" | "single" | "range";
/**
* Specify the date picker input value
* @default ""
*/
value?: string;
/**
* Specify the element to append the calendar to
*/
appendTo?: HTMLElement;
/**
* Specify the date format
* @default "m/d/Y"
*/
dateFormat?: string;
/**
* Specify the maximum date
* @default null
*/
maxDate?: null | string | Date;
/**
* Specify the minimum date
* @default null
*/
minDate?: null | string | Date;
/**
* Specify the locale
* @default "en"
*/
locale?: string;
/**
* Set to `true` to use the short variant
* @default false
*/
short?: boolean;
/**
* Set to `true` to enable the light variant
* @default false
*/
light?: boolean;
/**
* Set an id for the date picker element
*/
id?: string;
};
$$prop_def: DatePickerProps;
$$slot_def: {
default: {};
};

View file

@ -1,83 +1,85 @@
/// <reference types="svelte" />
export interface DatePickerInputProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Set the size of the input
*/
size?: "sm" | "xl";
/**
* Specify the input type
* @default "text"
*/
type?: string;
/**
* Specify the input placeholder text
* @default ""
*/
placeholder?: string;
/**
* Specify the Regular Expression for the input value
* @default "\\d{1,2}\\/\\d{1,2}\\/\\d{4}"
*/
pattern?: string;
/**
* Set to `true` to disable the input
* @default false
*/
disabled?: boolean;
/**
* Specify the ARIA label for the calendar icon
* @default ""
*/
iconDescription?: string;
/**
* Set an id for the input element
* @default "ccs-" + Math.random().toString(36)
*/
id?: string;
/**
* Specify the label text
* @default ""
*/
labelText?: string;
/**
* Set to `true` to visually hide the label text
* @default false
*/
hideLabel?: boolean;
/**
* Set to `true` to indicate an invalid state
* @default false
*/
invalid?: boolean;
/**
* Specify the invalid state text
* @default ""
*/
invalidText?: string;
/**
* Set a name for the input element
*/
name?: string;
/**
* Obtain a reference to the input HTML element
* @default null
*/
ref?: null | HTMLInputElement;
}
export default class DatePickerInput {
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
/**
* Set the size of the input
*/
size?: "sm" | "xl";
/**
* Specify the input type
* @default "text"
*/
type?: string;
/**
* Specify the input placeholder text
* @default ""
*/
placeholder?: string;
/**
* Specify the Regular Expression for the input value
* @default "\\d{1,2}\\/\\d{1,2}\\/\\d{4}"
*/
pattern?: string;
/**
* Set to `true` to disable the input
* @default false
*/
disabled?: boolean;
/**
* Specify the ARIA label for the calendar icon
* @default ""
*/
iconDescription?: string;
/**
* Set an id for the input element
*/
id?: string;
/**
* Specify the label text
* @default ""
*/
labelText?: string;
/**
* Set to `true` to visually hide the label text
* @default false
*/
hideLabel?: boolean;
/**
* Set to `true` to indicate an invalid state
* @default false
*/
invalid?: boolean;
/**
* Specify the invalid state text
* @default ""
*/
invalidText?: string;
/**
* Set a name for the input element
*/
name?: string;
/**
* Obtain a reference to the input HTML element
* @default null
*/
ref?: null | HTMLInputElement;
};
$$prop_def: DatePickerInputProps;
$$slot_def: {};
$on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void;

View file

@ -1,19 +1,21 @@
/// <reference types="svelte" />
export interface DatePickerSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Set to `true` to use the range variant
* @default false
*/
range?: boolean;
/**
* Set an id to be used by the label element
* @default "ccs-" + Math.random().toString(36)
*/
id?: string;
}
export default class DatePickerSkeleton {
$$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
/**
* Set to `true` to use the range variant
* @default false
*/
range?: boolean;
/**
* Set an id to be used by the label element
*/
id?: string;
};
$$prop_def: DatePickerSkeletonProps;
$$slot_def: {};
$on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;