@cyberpunk-vue/components 1.13.6 → 1.13.8

package/dist/date-picker/src/date-picker.d.ts

@@ -1,91 +1,50 @@
 import { ExtractPropTypes, PropType } from 'vue';
-import { Placement } from '@floating-ui/dom';
-import { Size } from '@cyberpunk-vue/hooks';
-export type PickerType = 'date' | 'dates' | 'week' | 'month' | 'year' | 'daterange' | 'monthrange' | 'yearrange' | 'time' | 'timerange' | 'datetime' | 'datetimerange';
-export type PickerSize = Size;
-export type PickerShape = 'clip' | 'no-clip' | 'round';
-export type PickerVariant = 'outline' | 'filled' | 'ghost';
-export type PickerValueItem = string | number | Date;
-export type PickerModelValue = PickerValueItem | PickerValueItem[] | null | undefined;
-export type PickerRangeRole = 'start' | 'end';
-export interface PickerShortcut {
-    /** 快捷项显示文本 */
-    text: string;
-    /** 快捷项值，可以是静态值或返回值的函数 */
-    value: PickerModelValue | (() => PickerModelValue);
-}
-export interface PickerCell {
-    /** 单元格对应日期 */
+export type DatePickerValue = string | number | Date | null | undefined;
+export type DatePickerViewMode = 'day' | 'month' | 'year';
+export interface DatePickerDayCell {
+    /** 单元格日期 */
     date: Date;
-    /** 单元格显示文本 */
+    /** 展示数字 */
     label: string;
-    /** 是否为当前视图范围外的日期 */
-    outside: boolean;
+    /** 是否属于当前月份 */
+    currentMonth: boolean;
     /** 是否为今天 */
     today: boolean;
-    /** 是否被选中 */
+    /** 是否选中 */
     selected: boolean;
-    /** 是否处于范围内 */
-    inRange: boolean;
-    /** 是否为范围起点 */
-    rangeStart: boolean;
-    /** 是否为范围终点 */
-    rangeEnd: boolean;
     /** 是否禁用 */
     disabled: boolean;
 }
-export type DisabledTimeResolver = (role?: PickerRangeRole) => number[];
 /**
  * CpDatePicker 组件 Props 定义
  *
- * @description 赛博朋克风格日期选择器，支持日期、多日期、周、月、年以及日期范围选择。
+ * @description 赛博朋克风格日期面板。参考 Vuetify DatePicker 的 header / controls / month grid 分层，年份选择置于左侧，月份置于右侧，更符合中文日期选择习惯。
  *
  * @example
  * ```vue
- * <CpDatePicker v-model="date" value-format="YYYY-MM-DD" />
- * <CpDatePicker v-model="range" type="daterange" value-format="YYYY-MM-DD" />
+ * <CpDatePicker v-model="date" value-format="YYYY-MM-DD" show-adjacent-months />
  * ```
  *
  * @slots
- * - `prefix` - 触发器前缀内容
- * - `suffix` - 触发器后缀内容
- * - `cell` - 自定义日期单元格内容
- * - `footer` - 自定义面板底部操作区
+ * - `day` - 自定义日期单元格内容
+ * - `header` - 自定义顶部标题区
+ * - `actions` - 自定义底部操作区
  *
  * @exposes
- * - `open` - 打开选择器浮层
- * - `close` - 关闭选择器浮层
- * - `toggle` - 切换选择器浮层
- * - `focus` - 聚焦触发器
- * - `blur` - 失焦触发器
+ * - `goToday` - 跳转并选中今天
+ * - `setViewDate` - 设置当前展示年月
  * @category 表单组件
- * @displayName CpDatePicker 日期选择器
+ * @displayName CpDatePicker 日期面板
  */
-export declare const pickerProps: {
+export declare const datePickerProps: {
     /**
      * 绑定值 (v-model)
      * @default null
      */
     readonly modelValue: {
-        readonly type: PropType<PickerModelValue>;
+        readonly type: PropType<DatePickerValue>;
         readonly default: null;
     };
-    /**
-     * 选择器类型
-     * @default 'date'
-     */
-    readonly type: {
-        readonly type: PropType<PickerType>;
-        readonly default: "date";
-    };
-    /**
-     * 显示格式，例如 `YYYY-MM-DD HH:mm:ss`
-     * @default 按 type 自动推导
-     */
-    readonly format: {
-        readonly type: StringConstructor;
-        readonly default: "";
-    };
     /**
      * 输出值格式。为空时输出 Date；传入 `timestamp` 时输出时间戳。
      * @default ''
@@ -95,370 +54,59 @@ export declare const pickerProps: {
         readonly default: "";
     };
     /**
-     * 占位文本
-     * @default ''
-     */
-    readonly placeholder: {
-        readonly type: StringConstructor;
-        readonly default: "";
-    };
-    /**
-     * 范围起始占位文本
-     * @default '开始'
-     */
-    readonly startPlaceholder: {
-        readonly type: StringConstructor;
-        readonly default: "开始";
-    };
-    /**
-     * 范围结束占位文本
-     * @default '结束'
-     */
-    readonly endPlaceholder: {
-        readonly type: StringConstructor;
-        readonly default: "结束";
-    };
-    /**
-     * 范围分隔符
-     * @default ' - '
+     * 标题文本
+     * @default '选择日期'
      */
-    readonly rangeSeparator: {
+    readonly title: {
         readonly type: StringConstructor;
-        readonly default: " - ";
+        readonly default: "选择日期";
     };
     /**
-     * 是否禁用
-     * @default false
-     */
-    readonly disabled: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
-    };
-    /**
-     * 是否只读
-     * @default false
-     */
-    readonly readonly: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
-    };
-    /**
-     * 是否允许直接输入
-     * @default false
-     */
-    readonly editable: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
-    };
-    /**
-     * 是否可清空
+     * 是否显示相邻月份日期
      * @default true
      */
-    readonly clearable: {
+    readonly showAdjacentMonths: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
     /**
-     * 是否显示确认按钮。未设置时范围、时间和日期时间类型默认需要确认。
-     * @default undefined
-     */
-    readonly confirm: {
-        readonly type: PropType<boolean | undefined>;
-        readonly default: undefined;
-    };
-    /**
-     * 组件尺寸
-     * @default 'md'
+     * 初始视图模式
+     * @default 'day'
      */
-    readonly size: {
-        readonly type: PropType<PickerSize>;
-        readonly default: "md";
-    };
-    /**
-     * 形状模式
-     * @default 'clip'
-     */
-    readonly shape: {
-        readonly type: PropType<PickerShape>;
-        readonly default: "clip";
-    };
-    /**
-     * 视觉变体
-     * @default 'outline'
-     */
-    readonly variant: {
-        readonly type: PropType<PickerVariant>;
-        readonly default: "outline";
-    };
-    /**
-     * 自定义主题色
-     * @default ''
-     */
-    readonly color: {
-        readonly type: StringConstructor;
-        readonly default: "";
-    };
-    /**
-     * 未激活边框颜色
-     * @default ''
-     */
-    readonly inactiveColor: {
-        readonly type: StringConstructor;
-        readonly default: "";
-    };
-    /**
-     * Placeholder 颜色
-     * @default ''
-     */
-    readonly placeholderColor: {
-        readonly type: StringConstructor;
-        readonly default: "";
-    };
-    /**
-     * 触发器宽度
-     * @default ''
-     */
-    readonly width: {
-        readonly type: PropType<string | number>;
-        readonly default: "";
-    };
-    /**
-     * 弹出位置
-     * @default 'bottom-start'
-     */
-    readonly placement: {
-        readonly type: PropType<Placement>;
-        readonly default: "bottom-start";
-    };
-    /**
-     * Teleport 目标
-     * @default 'body'
-     */
-    readonly teleportTo: {
-        readonly type: PropType<string | HTMLElement>;
-        readonly default: "body";
-    };
-    /**
-     * 禁用日期判断函数
-     */
-    readonly disabledDate: {
-        readonly type: PropType<(date: Date) => boolean>;
-        readonly default: undefined;
-    };
-    /**
-     * 禁用小时列表
-     */
-    readonly disabledHours: {
-        readonly type: PropType<DisabledTimeResolver>;
-        readonly default: undefined;
-    };
-    /**
-     * 禁用分钟列表
-     */
-    readonly disabledMinutes: {
-        readonly type: PropType<DisabledTimeResolver>;
-        readonly default: undefined;
-    };
-    /**
-     * 禁用秒列表
-     */
-    readonly disabledSeconds: {
-        readonly type: PropType<DisabledTimeResolver>;
-        readonly default: undefined;
-    };
-    /**
-     * 小时步长
-     * @default 1
-     */
-    readonly hourStep: {
-        readonly type: NumberConstructor;
-        readonly default: 1;
-    };
-    /**
-     * 分钟步长
-     * @default 1
-     */
-    readonly minuteStep: {
-        readonly type: NumberConstructor;
-        readonly default: 1;
-    };
-    /**
-     * 秒步长
-     * @default 1
-     */
-    readonly secondStep: {
-        readonly type: NumberConstructor;
-        readonly default: 1;
-    };
-    /**
-     * 是否显示秒
-     * @default true
-     */
-    readonly showSeconds: {
-        readonly type: BooleanConstructor;
-        readonly default: true;
-    };
-    /**
-     * 快捷选项
-     * @default []
-     */
-    readonly shortcuts: {
-        readonly type: PropType<PickerShortcut[]>;
-        readonly default: () => never[];
+    readonly viewMode: {
+        readonly type: PropType<DatePickerViewMode>;
+        readonly default: "day";
     };
     /**
      * 默认展示日期
+     * @default undefined
      */
     readonly defaultValue: {
-        readonly type: PropType<PickerValueItem>;
+        readonly type: PropType<Exclude<DatePickerValue, null | undefined>>;
         readonly default: undefined;
     };
     /**
-     * 默认时间，支持 `HH:mm:ss` 或范围数组
+     * 最小可选日期
      * @default undefined
      */
-    readonly defaultTime: {
-        readonly type: PropType<string | [string, string]>;
+    readonly min: {
+        readonly type: PropType<Exclude<DatePickerValue, null | undefined>>;
         readonly default: undefined;
     };
     /**
-     * 范围面板是否解除联动
-     * @default false
-     */
-    readonly unlinkPanels: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
-    };
-};
-export type PickerProps = ExtractPropTypes<typeof pickerProps>;
-export declare const datePickerProps: {
-    /**
-     * 绑定值 (v-model)
-     * @default null
-     */
-    readonly modelValue: {
-        readonly type: PropType<PickerModelValue>;
-        readonly default: null;
-    };
-    /**
-     * 选择器类型
-     * @default 'date'
-     */
-    readonly type: {
-        readonly type: PropType<PickerType>;
-        readonly default: "date";
-    };
-    /**
-     * 显示格式，例如 `YYYY-MM-DD HH:mm:ss`
-     * @default 按 type 自动推导
-     */
-    readonly format: {
-        readonly type: StringConstructor;
-        readonly default: "";
-    };
-    /**
-     * 输出值格式。为空时输出 Date；传入 `timestamp` 时输出时间戳。
-     * @default ''
-     */
-    readonly valueFormat: {
-        readonly type: StringConstructor;
-        readonly default: "";
-    };
-    /**
-     * 占位文本
-     * @default ''
-     */
-    readonly placeholder: {
-        readonly type: StringConstructor;
-        readonly default: "";
-    };
-    /**
-     * 范围起始占位文本
-     * @default '开始'
-     */
-    readonly startPlaceholder: {
-        readonly type: StringConstructor;
-        readonly default: "开始";
-    };
-    /**
-     * 范围结束占位文本
-     * @default '结束'
-     */
-    readonly endPlaceholder: {
-        readonly type: StringConstructor;
-        readonly default: "结束";
-    };
-    /**
-     * 范围分隔符
-     * @default ' - '
-     */
-    readonly rangeSeparator: {
-        readonly type: StringConstructor;
-        readonly default: " - ";
-    };
-    /**
-     * 是否禁用
-     * @default false
-     */
-    readonly disabled: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
-    };
-    /**
-     * 是否只读
-     * @default false
-     */
-    readonly readonly: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
-    };
-    /**
-     * 是否允许直接输入
-     * @default false
-     */
-    readonly editable: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
-    };
-    /**
-     * 是否可清空
-     * @default true
-     */
-    readonly clearable: {
-        readonly type: BooleanConstructor;
-        readonly default: true;
-    };
-    /**
-     * 是否显示确认按钮。未设置时范围、时间和日期时间类型默认需要确认。
+     * 最大可选日期
      * @default undefined
      */
-    readonly confirm: {
-        readonly type: PropType<boolean | undefined>;
+    readonly max: {
+        readonly type: PropType<Exclude<DatePickerValue, null | undefined>>;
         readonly default: undefined;
     };
     /**
-     * 组件尺寸
-     * @default 'md'
-     */
-    readonly size: {
-        readonly type: PropType<PickerSize>;
-        readonly default: "md";
-    };
-    /**
-     * 形状模式
-     * @default 'clip'
-     */
-    readonly shape: {
-        readonly type: PropType<PickerShape>;
-        readonly default: "clip";
-    };
-    /**
-     * 视觉变体
-     * @default 'outline'
+     * 禁用日期判断函数
      */
-    readonly variant: {
-        readonly type: PropType<PickerVariant>;
-        readonly default: "outline";
+    readonly disabledDate: {
+        readonly type: PropType<(date: Date) => boolean>;
+        readonly default: undefined;
     };
     /**
      * 自定义主题色
@@ -469,189 +117,38 @@ export declare const datePickerProps: {
         readonly default: "";
     };
     /**
-     * 未激活边框颜色
-     * @default ''
-     */
-    readonly inactiveColor: {
-        readonly type: StringConstructor;
-        readonly default: "";
-    };
-    /**
-     * Placeholder 颜色
-     * @default ''
-     */
-    readonly placeholderColor: {
-        readonly type: StringConstructor;
-        readonly default: "";
-    };
-    /**
-     * 触发器宽度
-     * @default ''
-     */
-    readonly width: {
-        readonly type: PropType<string | number>;
-        readonly default: "";
-    };
-    /**
-     * 弹出位置
-     * @default 'bottom-start'
-     */
-    readonly placement: {
-        readonly type: PropType<Placement>;
-        readonly default: "bottom-start";
-    };
-    /**
-     * Teleport 目标
-     * @default 'body'
-     */
-    readonly teleportTo: {
-        readonly type: PropType<string | HTMLElement>;
-        readonly default: "body";
-    };
-    /**
-     * 禁用日期判断函数
-     */
-    readonly disabledDate: {
-        readonly type: PropType<(date: Date) => boolean>;
-        readonly default: undefined;
-    };
-    /**
-     * 禁用小时列表
-     */
-    readonly disabledHours: {
-        readonly type: PropType<DisabledTimeResolver>;
-        readonly default: undefined;
-    };
-    /**
-     * 禁用分钟列表
-     */
-    readonly disabledMinutes: {
-        readonly type: PropType<DisabledTimeResolver>;
-        readonly default: undefined;
-    };
-    /**
-     * 禁用秒列表
-     */
-    readonly disabledSeconds: {
-        readonly type: PropType<DisabledTimeResolver>;
-        readonly default: undefined;
-    };
-    /**
-     * 小时步长
-     * @default 1
-     */
-    readonly hourStep: {
-        readonly type: NumberConstructor;
-        readonly default: 1;
-    };
-    /**
-     * 分钟步长
-     * @default 1
-     */
-    readonly minuteStep: {
-        readonly type: NumberConstructor;
-        readonly default: 1;
-    };
-    /**
-     * 秒步长
-     * @default 1
-     */
-    readonly secondStep: {
-        readonly type: NumberConstructor;
-        readonly default: 1;
-    };
-    /**
-     * 是否显示秒
-     * @default true
-     */
-    readonly showSeconds: {
-        readonly type: BooleanConstructor;
-        readonly default: true;
-    };
-    /**
-     * 快捷选项
-     * @default []
-     */
-    readonly shortcuts: {
-        readonly type: PropType<PickerShortcut[]>;
-        readonly default: () => never[];
-    };
-    /**
-     * 默认展示日期
-     */
-    readonly defaultValue: {
-        readonly type: PropType<PickerValueItem>;
-        readonly default: undefined;
-    };
-    /**
-     * 默认时间，支持 `HH:mm:ss` 或范围数组
-     * @default undefined
-     */
-    readonly defaultTime: {
-        readonly type: PropType<string | [string, string]>;
-        readonly default: undefined;
-    };
-    /**
-     * 范围面板是否解除联动
+     * 是否禁用整个面板
      * @default false
      */
-    readonly unlinkPanels: {
+    readonly disabled: {
         readonly type: BooleanConstructor;
         readonly default: false;
     };
 };
-export type DatePickerProps = PickerProps;
-export declare const pickerEmits: {
-    /**
-     * v-model 更新事件
-     */
-    'update:modelValue': (_value: PickerModelValue) => boolean;
-    /**
-     * 值变化事件
-     */
-    change: (_value: PickerModelValue) => boolean;
-    /**
-     * 清空事件
-     */
-    clear: () => boolean;
-    /**
-     * 聚焦事件
-     */
-    focus: (event?: FocusEvent) => boolean;
-    /**
-     * 失焦事件
-     */
-    blur: (event?: FocusEvent) => boolean;
-    /**
-     * 浮层显示状态变化
-     */
-    visibleChange: (visible: boolean) => boolean;
-};
-export type PickerEmits = typeof pickerEmits;
+export type DatePickerProps = ExtractPropTypes<typeof datePickerProps>;
+/**
+ * CpDatePicker 组件事件定义
+ */
 export declare const datePickerEmits: {
     /**
      * v-model 更新事件
      */
-    'update:modelValue': (_value: PickerModelValue) => boolean;
+    'update:modelValue': (_value: DatePickerValue) => boolean;
     /**
      * 值变化事件
      */
-    change: (_value: PickerModelValue) => boolean;
-    /**
-     * 清空事件
-     */
-    clear: () => boolean;
+    change: (_value: DatePickerValue) => boolean;
     /**
-     * 聚焦事件
+     * 展示月份变化事件
      */
-    focus: (event?: FocusEvent) => boolean;
+    'update:month': (month: number) => boolean;
     /**
-     * 失焦事件
+     * 展示年份变化事件
      */
-    blur: (event?: FocusEvent) => boolean;
+    'update:year': (year: number) => boolean;
     /**
-     * 浮层显示状态变化
+     * 视图模式变化事件
      */
-    visibleChange: (visible: boolean) => boolean;
+    'update:viewMode': (mode: DatePickerViewMode) => boolean;
 };
-export type DatePickerEmits = PickerEmits;
+export type DatePickerEmits = typeof datePickerEmits;