adc-calendar/dist/index.d.mts

Calendar ที่มีทั้ง EN | TH และสามารถ เป็นจาก ค.ศ. เป็น พ.ศ. และ custom calendar ได้ตามต้องการ

type Fn = (...arg: any) => void;
type Lang = 'th' | 'en' | 'thai' | 'english';
type StateElement = {
    tag: string;
    props?: Record<string, any> | null;
    children?: string | StateElement[];
    methods?: {
        click?: (...arg: any) => void;
        change?: Fn;
        input?: Fn;
    };
    el?: HTMLElement;
};
type Style = {
    ['font-family']?: string;
    text?: string;
    ['text-week']?: string;
    current?: string;
    picker?: string;
    ['text-picker']?: string;
    dateRadius?: string;
    disabled?: string;
    background?: string;
    border?: string;
    borderRadius?: string;
    shadow?: string;
    width?: string;
};
type Box$1 = StateElement & {
    children: StateElement[];
};

declare abstract class main {
    protected id: string;
    /**
     * check สถานะของปฏิทินว่าเป็น created หรือไม่
     */
    created: boolean;
    /**
     * ประเภทของปฏิทิน
     */
    private calendarType;
    private eventListeners;
    private countYear;
    protected lang: Lang;
    protected year: 'en' | 'th';
    protected min: Date;
    protected max: Date;
    /**
     * ค่าที่ใช้ในการแสดง UI
     */
    protected ui_value: Date;
    protected category: 'DAY' | 'BETWEEN';
    protected style: Style;
    protected nextMonth?: (arg: Date) => void;
    constructor(id: string, category: 'DAY' | 'BETWEEN');
    abstract createDays(): Box$1;
    abstract onDatePicker(date: Date): void;
    /**
     * ตรวจสอบว่าวันที่ที่เลือกมีค่าตรงกับ picker หรือไม่
     */
    abstract validateCheckPicker(date: Date): boolean;
    abstract getDateValue(): Date;
    render(): void;
    /**
     * update การ render ส่วนของเมนู
     * @param container [data-box="container"]
     */
    private updateContentMenu;
    /**
     * update การ render ส่วนของปฏิทิน
     * @param container [data-box="container"]
     */
    private updateContentCalendar;
    private getConfigValue;
    protected validateRootEl(): {
        root: null;
        rootContainer: null;
    } | {
        root: HTMLElement;
        rootContainer: Element | null;
    };
    protected isClient(): boolean;
    protected createDate(date: Date, placeholder: 'current' | 'date' | 'before' | 'after', isDisabled?: boolean, className?: string): StateElement;
    protected onChangeMonth(type: 'LEFT' | 'RIGHT'): void;
    /**
     * stop คือการทำลาย container ปฏิธินทั้งหมด
     */
    stop(): void;
    /**
     * ใช้สำหรับการนำค่า style ที่กำหนดไว้ใน this.style ไปใช้กับ root element
     * จะถูกเรียกทุกครั้งที่มีการ render เพื่อให้มั่นใจว่า style เป็นปัจจุบันเสมอ
     */
    protected applyStyles(): void;
    /**
     * แยกส่วนของการกำหนด style และการเพิ่ม CSS ออกจากกัน
     * - การกำหนด style จะทำทุกครั้งที่ render
     * - การเพิ่ม CSS จะทำเพียงครั้งเดียวตอนสร้าง calendar
     */
    protected initStyleAndCss(): void;
    /**
     * ตรวจสอบว่าวันที่ที่เลือกอยู่ในช่วงวันที่ระหว่างหรือไม่
     * @param date
     * @param min
     * @param max
     */
    protected onCheckDisabled(date: Date, min: Date, max: Date): boolean;
    protected checkSameDate(a: Date, b: Date): boolean;
    /**
     * get ค่าวันแรกและวันสุดท้ายของเดือน
     * @param date วันที่ใดๆในเดือนนั้น
     */
    protected onBeforeAfterDay(date: Date): [number, number];
    /**
     * แปลงวันที่เป็น string
     * หาวันที่โดยเฉพาะเดือนกุมภาพันธ์
     * @param date วันที่
     */
    protected getYear(date: Date): {
        english: string;
        en: string;
        th: string;
        thai: string;
        month_value: string;
        days: number;
        year: number;
    }[];
    protected getMonth(date: Date): {
        english: string;
        en: string;
        th: string;
        thai: string;
        month_value: string;
        days: number;
        year: number;
    };
    /**
     * จัดการเมื่อมีการคลิกที่ปุ่มเปลี่ยนเดือนหรือปีในขณะที่ this.calendarType คือ 'CALENDAR'
     * @param container [data-box="container"]
     */
    private onClickMonthOrYear;
    /**
     * update render เนื้อหาของปฏิทินเมื่อมีการเปลี่ยนปี
     * @param typeClick ประเภทการคลิก (arrow,menu year)
     * @param year ปีที่ต้องการอัพเดท
     */
    private renderUpdateYearMenu;
    /**
     * สร้าง container และ elements ที่จำเป็นสำหรับการแสดงปฏิทิน
     * จะถูกเรียกใช้ครั้งแรกเมื่อปฏิทินถูกสร้างขึ้นเพียงครั้งเดียว
     * @param root [calendar="root"]
     */
    private createInitialContainer;
    private makeInputEvent;
    private announceChange;
    /**
     * สร้าง elements สำหรับ header ของปฏิทิน หรือ เมนู
     * @param container [data-box="container"] || [data-box="menu-container"]
     */
    private makeHeader;
    /**
     * สร้าง elements สำหรับแสดงวันในสัปดาห์
     */
    private makeWeek;
    /**
     * สร้าง elements สำหรับแสดงวันที่
     */
    private makeDay;
    /**
     * สร้าง box elements สำหรับเมนูเลือกเดือนและปี
     * @param container [data-box="container"]
     */
    private makeMenuContainer;
    /**
     * สร้าง menu elements content สำหรับเลือกปี
     */
    private createYearButton;
    /**
     * สร้าง menu elements content สำหรับเลือกเดือน
     */
    private createMonthButton;
    /**
     * สร้าง elements สำหรับปุ่มเปลี่ยนเดือนหรือปี
     * @param direction ทิศทางของปุ่ม
     */
    private createArrowButton;
    destroyEvent(): void;
    protected addEventListenerWithCleanup(element: Element, type: string, handler: EventListener): void;
    /**
     * ตั้งค่า ARIA attributes สำหรับการเข้าถึง
     */
    protected setupAccessibility(): void;
    /**
     * สร้าง element สำหรับการอ่านข้อความผ่าน screen reader
     */
    private setupScreenReaderAnnouncements;
    /***
     * ตั้งค่า focus ให้กับ input hidden
     */
    private initInputHidden;
    private setupEventListeners;
}

type CalendarState = {
    lang?: Lang;
    nextDate?: (arg: any) => void;
    nextMonth?: (arg: any) => void;
    year?: 'en' | 'th';
    value: Date;
    min?: Date;
    max?: Date;
    style?: Style;
};
declare class swCalendar extends main {
    private value;
    protected nextDate?: (arg: Date) => void;
    constructor(id: string, config: CalendarState);
    /**
     * กำหนดค่าเริ่มต้นให้กับ state ทั้งหมดของ Calendar
     * @private
     * @param config - ค่า configuration ที่รับมาจาก constructor
     */
    private initializeState;
    /**
     * ตรวจสอบความถูกต้องของ config
     * @private
     */
    private validateConfig;
    /**
     * ล้างการเลือกวันที่
     * @public
     */
    clear(): void;
    /**
     * อัพเดทค่า config ของปฏิทิน
     * @public
     * @param config - ค่า config ใหม่
     * @throws {DateValidationError} เมื่อค่า config ไม่ถูกต้อง
     */
    update(config: Partial<CalendarState>): void;
    /**
     * ดึงค่าสถานะปัจจุบันของปฏิทิน
     * @public
     * @returns สถานะปัจจุบันของปฏิทิน
     */
    getState(): CalendarState;
    createDays(): Box$1;
    validateCheckPicker(date: Date): boolean;
    getDateValue(): Date;
    onDatePicker(date: Date): void;
    private setDateOfMinMax;
    private onSetValue;
}

type Box = StateElement & {
    children: StateElement[];
};
type CalendarBetweenState = {
    lang?: Lang;
    nextDate?: (arg: any) => void;
    nextMonth?: (arg: any) => void;
    year?: 'en' | 'th';
    values: Date[];
    min?: Date;
    max?: Date;
    style?: Style;
};
declare class swCalendarBetween extends main {
    private nextDate?;
    private values;
    private betweens;
    constructor(id: string, config: CalendarBetweenState);
    /**
     * กำหนดค่าเริ่มต้นให้กับ state ทั้งหมดของ Calendar
     * @private
     * @param config - ค่า configuration ที่รับมาจาก constructor
     */
    private initializeState;
    update(config: Partial<Pick<CalendarBetweenState, 'max' | 'min' | 'values' | 'style'>>): void;
    getState(): {
        id: string;
        value: Date[];
        ui_value: Date;
        el: HTMLElement | null;
    };
    createDays(): Box;
    private getValues;
    private getDatesInRange;
    private dateToString;
    private onSortDate;
    validateCheckPicker(date: Date): boolean;
    getDateValue(): Date;
    onDatePicker(date: Date): void;
    private setDateOfMinMax;
    private onSetValue;
    /**
     * ตรวจสอบความถูกต้องของ config
     * @private
     */
    private validateConfig;
}

export { type CalendarBetweenState, type CalendarState, swCalendar, swCalendarBetween };