twcpt 0.0.2 → 0.0.4

package/dist/components/j-tw-date-picker/types.d.ts

@@ -0,0 +1,162 @@
+import { DefineComponent } from 'vue';
+/**
+ * @description JTWDatePicker 日期范围选择器组件
+ * 基于 Element Plus DatePicker 封装，采用 Quasar 风格的属性设计
+ */
+export interface JTWDatePickerProps {
+    /**
+     * 绑定值（日期范围数组）
+     * @default undefined
+     */
+    modelValue?: [Date, Date] | [string, string] | [number, number];
+    /**
+     * 日期格式
+     * @default 'YYYY-MM-DD'
+     */
+    format?: string;
+    /**
+     * 值的格式（传给 v-model 的格式）
+     * @default 'YYYY-MM-DD'
+     */
+    valueFormat?: string;
+    /**
+     * 占位符文本
+     * @default '选择日期范围'
+     */
+    placeholder?: string;
+    /**
+     * 开始日期占位符
+     * @default '开始日期'
+     */
+    startPlaceholder?: string;
+    /**
+     * 结束日期占位符
+     * @default '结束日期'
+     */
+    endPlaceholder?: string;
+    /**
+     * 是否禁用
+     * @default false
+     */
+    disable?: boolean;
+    /**
+     * 是否只读
+     * @default false
+     */
+    readonly?: boolean;
+    /**
+     * 是否可清空
+     * @default true
+     */
+    clearable?: boolean;
+    /**
+     * 禁用的日期（函数返回 true 表示禁用该日期）
+     */
+    disabledDate?: (date: Date) => boolean;
+    /**
+     * 可选的最小日期
+     */
+    minDate?: Date | string | number;
+    /**
+     * 可选的最大日期
+     */
+    maxDate?: Date | string | number;
+    /**
+     * 默认显示的日期
+     */
+    defaultValue?: Date | [Date, Date];
+    /**
+     * 范围分隔符
+     * @default '—'
+     */
+    rangeSeparator?: string;
+    /**
+     * 是否显示清除按钮
+     * @default true
+     */
+    showClearButton?: boolean;
+    /**
+     * 弹出面板的位置
+     * @default 'bottom-start'
+     */
+    placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
+    /**
+     * 自定义类名
+     */
+    customClass?: string;
+    /**
+     * 弹出面板的自定义类名
+     */
+    popperClass?: string;
+    /**
+     * 快捷选项
+     */
+    shortcuts?: Array<{
+        text: string;
+        value: [Date, Date] | (() => [Date, Date]);
+    }>;
+    /**
+     * 是否使用灰色背景
+     * @default false
+     */
+    bgGrey?: boolean;
+    /**
+     * 紧凑模式（用于 table 过滤，高度 32px；否则为 34px 用于 form）
+     * @default false
+     */
+    dense?: boolean;
+    /**
+     * 是否显示快捷选项
+     * @default false
+     */
+    showShortcuts?: boolean;
+}
+/** JTWDatePicker Emits 接口 */
+export interface JTWDatePickerEmits {
+    (e: 'update:modelValue', value: [Date, Date] | [string, string] | [number, number] | undefined): void;
+    (e: 'change', value: [Date, Date] | [string, string] | [number, number] | undefined): void;
+    (e: 'blur', event: FocusEvent): void;
+    (e: 'focus', event: FocusEvent): void;
+    (e: 'clear'): void;
+    (e: 'visible-change', visible: boolean): void;
+}
+/** JTWDatePicker Slots 接口 */
+export interface JTWDatePickerSlots {
+    /** 自定义日历图标 */
+    'prefix-icon'?: () => any;
+    /** 自定义范围分隔符 */
+    'range-separator'?: () => any;
+}
+/** JTWDatePicker 暴露的方法 */
+export interface JTWDatePickerExpose {
+    /** 根元素 */
+    $el: HTMLElement | undefined;
+    /** 聚焦输入框 */
+    focus: () => void;
+    /** 失焦输入框 */
+    blur: () => void;
+}
+/** Emits 配置对象格式 */
+export type JTWDatePickerEmitsOptions = {
+    'update:modelValue': (value: [Date, Date] | [string, string] | [number, number] | undefined) => true;
+    change: (value: [Date, Date] | [string, string] | [number, number] | undefined) => true;
+    blur: (event: FocusEvent) => true;
+    focus: (event: FocusEvent) => true;
+    clear: () => true;
+    'visible-change': (visible: boolean) => true;
+};
+/** JTWDatePicker 组件类型定义 */
+export type JTWDatePickerComponent = DefineComponent<JTWDatePickerProps, JTWDatePickerExpose, {}, {}, {}, {}, {}, JTWDatePickerEmitsOptions>;
+/** JTWDatePicker 实例类型 */
+export type JTWDatePickerInstance = InstanceType<JTWDatePickerComponent> & JTWDatePickerExpose;
+/** JTWDatePicker 模板 Props（用于全局类型声明） */
+export interface JTWDatePickerTemplateProps extends JTWDatePickerProps {
+    'onUpdate:modelValue'?: (value: [Date, Date] | [string, string] | [number, number] | undefined) => void;
+    onChange?: (value: [Date, Date] | [string, string] | [number, number] | undefined) => void;
+    onBlur?: (event: FocusEvent) => void;
+    onFocus?: (event: FocusEvent) => void;
+    onClear?: () => void;
+    'onVisible-change'?: (visible: boolean) => void;
+    class?: string | Record<string, boolean> | Array<string | Record<string, boolean>>;
+    style?: string | Record<string, string>;
+}