@fewangsit/wangsvue-fats 1.0.0-alpha.31 → 1.0.0-alpha.33

package/components/calendar/Calendar.vue.d.ts

@@ -0,0 +1,570 @@
+import { TransitionProps } from 'vue';
+import { CustomValidation } from '../form/Form.vue.d';
+import { ClassComponent } from '../ts-helpers';
+
+export interface CalendarLocaleConfig {
+    defaultPlaceholder: string;
+
+    /**
+     * Error message displayed when no selection has been made.
+     *
+     * This message can include placeholders:
+     * - `{label}`: Replaced with the value of `props.label`.
+     * - `{formattedLabel}`: Replaced with the value of `props.label` formatted with an appropriate article (a/an).
+     *
+     * @example
+     * // If `props.label` is 'Date', the error message will be:
+     * '{label} must be picked' - 'Date must be picked'
+     *
+     * @example
+     * // If `props.label` is 'Audit Date', the error message will be:
+     * 'You must pick {formattedLabel}' - 'You must pick an Audit date'
+     */
+    emptyInvalidText?: string;
+
+    /**
+     * The cancel button when props.showTime or showButton
+     *
+     * @default 'Cancel'
+     */
+    cancelFooterButtonLabel?: string;
+
+    /**
+     * The apply button when props.showTime or showButton
+     *
+     * @default 'Apply'
+     */
+    applyFooterButtonLabel?: string;
+}
+
+export type CalendarPresetOptionMethodType = (
+    options: Partial<CalendarPresetMethodOptions>,
+) => CalendarPresetAttributes;
+
+/**
+ * Defines the possible transition types for Calendar.
+ */
+export type CalendarPresetTransitionType =
+    | {
+          transition?: TransitionProps;
+      }
+    | ((options: CalendarPresetMethodOptions) => TransitionProps)
+    | undefined;
+
+/**
+ * Options passed to methods for pass-through properties.
+ */
+export interface CalendarPresetMethodOptions {
+    instance: any;
+    props: CalendarProps;
+    state: CalendarState;
+    context: Partial<CalendarContext>;
+    attrs: any;
+    parent: any;
+    global: object | undefined;
+}
+
+/**
+ * Attributes for Calendar pass-through customization.
+ */
+export interface CalendarPresetAttributes {
+    class?: any;
+    style?: any;
+    [key: string]: any;
+}
+
+/**
+ * Defines the structure for Calendar pass-through class options.
+ * Used in preset.
+ */
+export interface CalendarPresetOptions {
+    root?: CalendarPresetOptionMethodType;
+    input?: CalendarPresetOptionMethodType;
+    inputicon?: CalendarPresetAttributes;
+    dropdownbutton?: {
+        root?: CalendarPresetAttributes;
+    };
+    panel?: CalendarPresetOptionMethodType;
+    datepickerMask?: CalendarPresetAttributes;
+    header?: CalendarPresetOptionMethodType;
+    previousbutton?: CalendarPresetOptionMethodType;
+    title?: CalendarPresetOptionMethodType;
+    monthTitle?: CalendarPresetAttributes;
+    yearTitle?: CalendarPresetOptionMethodType;
+    nextbutton?: CalendarPresetOptionMethodType;
+    table?: CalendarPresetAttributes;
+    tableheadercell?: CalendarPresetAttributes;
+    tablebodyrow?: CalendarPresetAttributes;
+    weekheader?: CalendarPresetAttributes;
+    weeknumber?: CalendarPresetAttributes;
+    weekday?: CalendarPresetAttributes;
+    day?: CalendarPresetAttributes;
+    weeklabelcontainer?: CalendarPresetOptionMethodType;
+    daylabel?: CalendarPresetOptionMethodType;
+    monthpicker?: CalendarPresetAttributes;
+    month?: CalendarPresetOptionMethodType;
+    yearpicker?: CalendarPresetAttributes;
+    year?: CalendarPresetOptionMethodType;
+    timepicker?: CalendarPresetAttributes;
+    separatorcontainer?: CalendarPresetAttributes;
+    separator?: CalendarPresetAttributes;
+    hourpicker?: CalendarPresetAttributes;
+    timepickerlabel?: CalendarPresetAttributes;
+    minutepicker?: CalendarPresetAttributes;
+    secondPicker?: CalendarPresetAttributes;
+    incrementbutton?: CalendarPresetAttributes;
+    incrementicon?: CalendarPresetAttributes;
+    decrementbutton?: CalendarPresetAttributes;
+    decrementicon?: CalendarPresetAttributes;
+    container?: CalendarPresetAttributes;
+    groupcontainer?: CalendarPresetAttributes;
+    group?: CalendarPresetAttributes;
+    buttonbar?: CalendarPresetAttributes;
+    todaybutton?: {
+        root?: CalendarPresetAttributes;
+    };
+    clearbutton?: {
+        root?: CalendarPresetAttributes;
+    };
+    transition?: {
+        enterFromClass?: string;
+        enterActiveClass?: string;
+        leaveActiveClass?: string;
+        leaveToClass?: string;
+    };
+}
+
+/**
+ * Represents the current state of the Calendar component.
+ */
+export interface CalendarState {
+    currentView: CalendarProps['view'];
+}
+
+/**
+ * Defines current month options.
+ */
+export interface CalendarMonthOptions {
+    /**
+     * Month index.
+     */
+    value: number;
+
+    /**
+     * Selectable state of the month.
+     */
+    selectable: boolean;
+}
+
+/**
+ * Defines current year options.
+ */
+export interface CalendarYearOptions {
+    /**
+     * Year value.
+     */
+    value: number;
+
+    /**
+     * Selectable state of the year.
+     */
+    selectable: boolean;
+}
+
+export interface CalendarDate {
+    /**
+     * Current date.
+     */
+    day: number;
+
+    /**
+     * Current month state.
+     */
+    month: number;
+
+    /**
+     * Current year state.
+     */
+    year: number;
+
+    /**
+     * Current today state of the calendar's day.
+     */
+    today: boolean;
+
+    /**
+     * Selectable state of the day.
+     */
+    selectable: boolean;
+
+    /**
+     * Wether the day is on other month than currently shown
+     */
+    otherMonth: boolean;
+}
+
+/**
+ * Provides contextual information for the Calendar component.
+ */
+export interface CalendarContext {
+    /**
+     * Current date.
+     */
+    date: CalendarDate;
+
+    /**
+     * Current today state of the calendar's day.
+     * @defaultValue false
+     */
+    today: boolean;
+
+    /**
+     * Current other month state of the calendar's day.
+     */
+    otherMonth: boolean;
+
+    /**
+     * Current selected state of the calendar's day or month or year.
+     * @defaultValue false
+     */
+    selected: boolean;
+
+    /**
+     * Current date is the first selected on range selection
+     */
+    firstSelected: boolean;
+
+    /**
+     * Current date is the last selected on range selection
+     */
+    lastSelected: boolean;
+
+    /**
+     * Current disabled state of the calendar's day or month or year.
+     * @defaultValue false
+     */
+    disabled: boolean;
+
+    /**
+     * Current month state.
+     */
+    month: CalendarMonthOptions;
+
+    /**
+     * Current month index state.
+     */
+    monthIndex: number;
+
+    /**
+     * Current year state.
+     */
+    year: CalendarYearOptions;
+}
+
+/**
+ * Calendar component props
+ */
+export interface CalendarProps {
+    /**
+     * Bound value of the component.
+     * Supports single or multiple date selection.
+     *
+     * Used with `v-model`.
+     * It should not be used with useValidator. v-model should only be used when the Calendar not used in form
+     * @defaultValue null
+     */
+    modelValue?: Date | Date[] | null;
+
+    /**
+     * Initial date value for pre-filling forms.
+     * Typically used for editing existing records.
+     *
+     * Accepts epoch timestamps in milliseconds.
+     *
+     * It will only watch for changes once.
+     */
+    dateValue?: number | number[];
+
+    /**
+     * Epoch time in milliseconds representing the selected date(s).
+     *
+     * Can be used with `v-model:epochTimeMillis` for two way binding.
+     */
+    epochTimeMillis?: number | number[];
+
+    /**
+     * Defines the format in which the field value is handled.
+     * - `'date'` returns a `Date` object.
+     * - `'millis'` returns an epoch timestamp in milliseconds.
+     *
+     * @default millis
+     */
+    valueFormat?: 'date' | 'millis';
+
+    /**
+     * Display label on top of Date Input.
+     */
+    label?: string;
+
+    /**
+     * The input placeholder
+     * @default - The value on locale config {@link CalendarLocaleConfig.defaultPlaceholder}
+     */
+    placeholder?: string;
+    disabled?: boolean;
+
+    /**
+     * Make the calendar states readonly.
+     * If true, calendar will not allow user interaction with it. But user can view currently selected date and time.
+     *
+     * @default false
+     */
+    readonly?: boolean;
+
+    /**
+     * Identifier of the underlying input element.
+     */
+    inputId?: string | undefined;
+
+    /**
+     * Identifier of the wrapper element.
+     */
+    id?: string | undefined;
+
+    /**
+     * Whether single date or date range model value.
+     *
+     * @default 'single'
+     * @deprecated use selectionMode
+     */
+    mode?: 'range' | 'single';
+
+    /**
+     * Whether single date or date range model value.
+     *
+     * @default 'single'
+     */
+    selectionMode?: 'range' | 'single';
+
+    /**
+     * Whether to hide the overlay on date selection when showTime is enabled.
+     * @defaultValue false
+     */
+    hideOnDateTimeSelect?: boolean | undefined;
+
+    /**
+     * Whether to hide the overlay on date selection is completed when selectionMode is range.
+     * @defaultValue true - when showButtons and showTime false
+     * @defaultValue false - when showButtons and showTime true
+     */
+    hideOnRangeSelection?: boolean | undefined;
+
+    /**
+     * Type of view to display.
+     * @defaultValue date
+     */
+    view?: 'date' | 'month' | 'year' | undefined;
+
+    /**
+     * Wheter show year picker or not
+     *
+     * @default true
+     */
+    showYear?: boolean;
+
+    /**
+     * Show button Apply and cancel on footer.
+     *
+     * If shown, the modelValue will be updated on button Apply clicked.
+     *
+     * @default false;
+     */
+    showButtons?: boolean;
+
+    /**
+     * Enable Validator using vee-validate. Combine with Form component that handle form validation.
+     */
+    useValidator?: boolean;
+
+    /**
+     * When used as field in From Validation using Form component,
+     * specify the unique field name, match with your needs for API request.
+     */
+    fieldName?: string;
+
+    /**
+     * Show information to user about the field.
+     */
+    fieldInfo?: string;
+
+    /**
+     * Whether this field should be filled or not.
+     */
+    mandatory?: boolean;
+
+    /**
+     * Show the text (opsional)
+     *
+     * @default true if mandatory true
+     */
+    showOptionalText?: boolean;
+
+    /**
+     * Sets the invalid state.
+     */
+    invalid?: boolean;
+
+    /**
+     * Set the custom validator message.
+     * By default each field has preserved with its validator message, you don't need to worrying about the message.
+     */
+    validatorMessage?: string | CustomValidation<'empty'>;
+
+    /**
+     * Set custom validation message for certain condition
+     *
+     * @deprecated - use validatorMessage {@link validatorMessage}
+     */
+    customValidation?: CustomValidation;
+
+    /**
+     * Format of the date. Defaults to PrimeVue Locale configuration.
+     */
+    dateFormat?: string | undefined;
+
+    /**
+     * Specifies hour format.
+     * @defaultValue 24
+     */
+    hourFormat?: '12' | '24' | undefined;
+
+    /**
+     * Defines the calendar to use hour picker.
+     */
+    showTime?: boolean;
+
+    /**
+     * Separator of time selector.
+     * @defaultValue :
+     */
+    timeSeparator?: string | undefined;
+
+    /**
+     * Hours to change per step.
+     * @defaultValue 1
+     */
+    stepHour?: number | undefined;
+
+    /**
+     * Minutes to change per step.
+     * @defaultValue 1
+     */
+    stepMinute?: number | undefined;
+
+    /**
+     * Formats the hour picker to 12 hour format.
+     * @default true
+     *
+     * @deprecated use {@link hourFormat}
+     */
+    useTimeFormat?: boolean;
+
+    /**
+     * The minimum selectable date.
+     */
+    minDate?: Date | undefined;
+
+    /**
+     * The maximum selectable date.
+     */
+    maxDate?: Date | undefined;
+
+    /**
+     * The maximum selectable year.
+     *
+     * The full year: 2020
+     * @todo Support number, currently only support 'current'
+     */
+    maxYear?: 'current' | number | undefined;
+
+    /**
+     * The maximum selectable months.
+     *
+     * Number 0-11
+     *
+     * @todo Support number, currently only support 'current'
+     */
+    maxMonth?: 'current' | number | undefined;
+    /**
+     * When using range selection mode, selecting only the "start date" (without an "end date") will, by default, return a range ending 24 hours later.
+     * Enabling this prop will instead return the exact dates selected, without adding an extra day.
+     *
+     * @example Selecting dates from the 1st to the 5th will return an array of epoch timestamps for each day: [1st, 2nd, 3rd, 4th, 5th].
+     * @default false
+     * @requires selectionMode = 'range'
+     */
+    exactSelection?: boolean;
+}
+
+/**
+ * Custom Calendar month change event.
+ * @see {@link CalendarEmits.monthChange}
+ */
+export interface CalendarMonthChangeEvent {
+    /**
+     * New month.
+     */
+    month: number;
+
+    /**
+     * New year.
+     */
+    year: number;
+}
+
+/**
+ * Custom Calendar year change event.
+ * @see {@link CalendarEmits.yearChange}
+ */
+export interface CalendarYearChangeEvent {
+    /**
+     * New month.
+     */
+    month: number;
+
+    /**
+     * New year.
+     */
+    year: number;
+}
+
+/**
+ * Calendar component emits
+ */
+export type CalendarEmits = {
+    'update:modelValue': [
+        date: Date | Array<Date> | Array<Date | null> | undefined | null,
+    ];
+    'update:epochTimeMillis': [millis?: number | number[]];
+    'monthChange': [event: CalendarMonthChangeEvent];
+    'yearChange': [event: CalendarYearChangeEvent];
+    'dateSelect': [date: Date | Date[]];
+};
+
+/**
+ * **WangsVue - Calendar**
+ *
+ * _Handle input date with form validation._
+ *
+ * --- ---
+ * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group form
+ */
+declare class Calendar extends ClassComponent<
+    CalendarProps,
+    unknown,
+    CalendarEmits
+> {}
+
+export default Calendar;

package/components/card/Card.vue.d.ts

@@ -0,0 +1,139 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ *
+ * Card is a flexible container component.
+ *
+ * @module card
+ *
+ */
+import { VNode } from 'vue';
+import { ComponentHooks } from '../basecomponent';
+import { PassThroughOptions } from '../passthrough';
+import {
+    ClassComponent,
+    GlobalComponentConstructor,
+    PassThrough,
+} from '../ts-helpers';
+
+export declare type CardPassThroughOptionType =
+    | CardPassThroughAttributes
+    | null
+    | undefined;
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link CardProps.pt}
+ */
+export interface CardPassThroughOptions {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: CardPassThroughOptionType;
+    /**
+     * Used to pass attributes to the header's DOM element.
+     */
+    header?: CardPassThroughOptionType;
+    /**
+     * Used to pass attributes to the body's DOM element.
+     */
+    body?: CardPassThroughOptionType;
+    /**
+     * Used to pass attributes to the caption's DOM element.
+     */
+    caption?: CardPassThroughOptionType;
+    /**
+     * Used to pass attributes to the title's DOM element.
+     */
+    title?: CardPassThroughOptionType;
+    /**
+     * Used to pass attributes to the subtitle's DOM element.
+     */
+    subtitle?: CardPassThroughOptionType;
+    /**
+     * Used to pass attributes to the content's DOM element.
+     */
+    content?: CardPassThroughOptionType;
+    /**
+     * Used to pass attributes to the footer's DOM element.
+     */
+    footer?: CardPassThroughOptionType;
+    /**
+     * Used to manage all lifecycle hooks.
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface CardPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines valid properties in Card component.
+ */
+export interface CardProps {
+    /**
+     * Used to pass attributes to DOM elements inside the component.
+     * @type {CardPassThroughOptions}
+     */
+    pt?: PassThrough<CardPassThroughOptions>;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * Defines valid slots in Card component.
+ */
+export interface CardSlots {
+    /**
+     * Custom header template.
+     */
+    header(): VNode[];
+    /**
+     * Custom title template.
+     */
+    title(): VNode[];
+    /**
+     * Custom subtitle template.
+     */
+    subtitle(): VNode[];
+    /**
+     * Custom content template.
+     */
+    content(): VNode[];
+    /**
+     * Custom footer template.
+     */
+    footer(): VNode[];
+}
+
+/**
+ * **WangsVue - Card**
+ *
+ * _Card is a flexible container component._
+ *
+ * --- ---
+ * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group Component
+ */
+declare class Card extends ClassComponent<CardProps, CardSlots, unknown> {}
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        Card: GlobalComponentConstructor<Card>;
+    }
+}
+
+export default Card;