niuma-ui 2.0.2 → 2.0.4

package/dist/components/date-picker/src/RsDatePicker.css

@@ -1,8 +1,21 @@
 
-.rs-date-picker[data-v-816760df] {
+.rs-date-picker[data-v-e481c787] {
+  position: relative;
   width: 100%;
 }
-.rs-date-picker__trigger[data-v-816760df] {
+.rs-date-picker-wrap--clearable .rs-date-picker__trigger[data-v-e481c787] {
+  padding-inline-end: calc(var(--rs-space-md) + 2.25rem);
+}
+.rs-date-picker-wrap--clearable .rs-date-picker--ssm .rs-date-picker__trigger[data-v-e481c787] {
+  padding-inline-end: calc(var(--rs-space-xs) + 2rem);
+}
+.rs-date-picker-wrap--clearable .rs-date-picker--sm .rs-date-picker__trigger[data-v-e481c787] {
+  padding-inline-end: calc(var(--rs-space-sm) + 2rem);
+}
+.rs-date-picker-wrap--clearable .rs-date-picker--lg .rs-date-picker__trigger[data-v-e481c787] {
+  padding-inline-end: calc(var(--rs-space-lg) + 2.25rem);
+}
+.rs-date-picker__trigger[data-v-e481c787] {
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
@@ -13,7 +26,7 @@
   min-height: var(--rs-control-height-md);
   padding: 0 var(--rs-space-md);
   border: 1px solid var(--rs-input-border, var(--rs-border));
-  border-radius: var(--rs-radius-sm);
+  border-radius: var(--rs-date-picker-radius, var(--rs-radius-sm));
   background: var(--rs-input-bg);
   color: var(--rs-text);
   font: inherit;
@@ -28,28 +41,28 @@
     box-shadow var(--rs-transition-fast),
     background var(--rs-transition-fast);
 }
-.rs-date-picker--ssm .rs-date-picker__trigger[data-v-816760df] {
+.rs-date-picker--ssm .rs-date-picker__trigger[data-v-e481c787] {
   height: var(--rs-control-height-ssm);
   min-height: var(--rs-control-height-ssm);
   padding: 0 var(--rs-space-xs);
   font-size: var(--rs-font-size-xs);
 }
-.rs-date-picker--sm .rs-date-picker__trigger[data-v-816760df] {
+.rs-date-picker--sm .rs-date-picker__trigger[data-v-e481c787] {
   height: var(--rs-control-height-sm);
   min-height: var(--rs-control-height-sm);
   padding: 0 var(--rs-space-sm);
   font-size: var(--rs-font-size-xs);
 }
-.rs-date-picker--lg .rs-date-picker__trigger[data-v-816760df] {
+.rs-date-picker--lg .rs-date-picker__trigger[data-v-e481c787] {
   height: var(--rs-control-height-lg);
   min-height: var(--rs-control-height-lg);
   padding: 0 var(--rs-space-lg);
   font-size: var(--rs-font-size-base);
 }
-.rs-date-picker__trigger[data-v-816760df]:hover:not(:disabled) {
+.rs-date-picker__trigger[data-v-e481c787]:hover:not(:disabled) {
   border-color: var(--rs-input-border-hover, var(--rs-border));
 }
-.rs-date-picker__trigger[data-v-816760df]:focus-visible {
+.rs-date-picker__trigger[data-v-e481c787]:focus-visible {
   outline: none;
   border-color: var(--rs-focus-border, var(--rs-primary));
   background: var(--rs-input-bg);
@@ -57,42 +70,49 @@
     var(--rs-input-shadow, none),
     0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
 }
-.rs-date-picker__trigger[data-v-816760df]:disabled {
-  opacity: 0.38;
+.rs-date-picker__trigger[data-v-e481c787]:disabled {
+  opacity: var(--rs-date-picker-disabled-opacity, 0.38);
   cursor: not-allowed;
 }
-.rs-date-picker__trigger--placeholder .rs-date-picker__value[data-v-816760df] {
+.rs-date-picker__trigger--placeholder .rs-date-picker__value[data-v-e481c787] {
   color: var(--rs-placeholder);
 }
-.rs-date-picker__trigger--invalid[data-v-816760df] {
-  border-color: var(--rs-danger, var(--rs-color-danger, #dc2626));
+.rs-date-picker__trigger--invalid[data-v-e481c787] {
+  border-color: var(--rs-danger, var(--rs-color-danger));
 }
-.rs-date-picker__trigger--invalid[data-v-816760df]:focus-visible {
-  border-color: var(--rs-danger, var(--rs-color-danger, #dc2626));
+.rs-date-picker__trigger--invalid[data-v-e481c787]:focus-visible {
+  border-color: var(--rs-danger, var(--rs-color-danger));
   box-shadow:
     var(--rs-input-shadow, none),
     0 0 0 var(--rs-focus-ring-width, 2px)
-      color-mix(in srgb, var(--rs-danger, #dc2626) 14%, transparent);
+      color-mix(in srgb, var(--rs-danger) 14%, transparent);
+}
+.rs-date-picker__clear[data-v-e481c787] {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-end: var(--rs-space-xs);
+  z-index: 1;
+  transform: translateY(-50%);
 }
-.rs-date-picker-field__error[data-v-816760df] {
+.rs-date-picker-field__error[data-v-e481c787] {
   margin: var(--rs-space-xs) 0 0;
-  color: var(--rs-danger, var(--rs-color-danger, #dc2626));
+  color: var(--rs-danger, var(--rs-color-danger));
   font-size: var(--rs-font-size-xs);
   line-height: var(--rs-line-height-tight);
 }
-.rs-date-picker__leading[data-v-816760df] {
+.rs-date-picker__leading[data-v-e481c787] {
   display: inline-flex;
   min-width: 0;
   flex: 1;
   align-items: center;
   gap: var(--rs-space-sm);
 }
-.rs-date-picker__icon[data-v-816760df],
-.rs-date-picker__chevron[data-v-816760df] {
+.rs-date-picker__icon[data-v-e481c787],
+.rs-date-picker__chevron[data-v-e481c787] {
   flex-shrink: 0;
   color: var(--rs-muted);
 }
-.rs-date-picker__value[data-v-816760df] {
+.rs-date-picker__value[data-v-e481c787] {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;

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

@@ -1,8 +1,23 @@
-import { type RsComponentSize } from '../../../theme/types';
+import { type RsComponentSize, type RsRadius } from '../../../theme/types';
 import { type RsFormRuleTrigger } from '../../form/src/form-rules';
-import { type RsDatePickerModelValue, type RsDatePickerShortcut, type RsDatePickerValueFormat } from './date-picker-utils';
-export type { RsDatePickerModelValue, RsDatePickerShortcut, RsDatePickerValueFormat, RsDateRangeValue, } from './date-picker-utils';
+import { type RsDatePickerDisabledDate, type RsDatePickerGetPopupContainer, type RsDatePickerModelValue, type RsDatePickerShortcut, type RsDatePickerValueFormat, type RsWeekStartsOn } from './date-picker-utils';
+export type { RsDatePickerDisabledDate, RsDatePickerGetPopupContainer, RsDatePickerModelValue, RsDatePickerShortcut, RsDatePickerValueFormat, RsDateRangeValue, RsWeekStartsOn, } from './date-picker-utils';
 export type RsDatePickerLabelPosition = 'top' | 'left';
+export interface RsDatePickerExpose {
+    setValue: (value: unknown) => void;
+    clearValidation: () => void;
+    setError: (message: string) => void;
+    validate: (trigger?: RsFormRuleTrigger) => Promise<{
+        valid: boolean;
+        message?: string;
+        name?: string;
+    }>;
+    focus: () => void;
+    blur: () => void;
+}
+export type RsDatePickerInstance = RsDatePickerExpose & {
+    $el: HTMLElement;
+};
 type __VLS_Props = {
     /** 表单字段名，用于 RsForm rules 匹配与校验注册 */
     name?: string;
@@ -20,51 +35,60 @@ type __VLS_Props = {
      */
     withSeconds?: boolean;
     /**
-     * 绑定值格式（展示仍为墙钟）。
+     * 绑定值格式（展示仍为墙钟，除非另传 format）。
      * string：YYYY-MM-DD[/ HH:mm:ss]；timestamp：毫秒；iso：本地偏移 RFC3339；
      * 亦可传入 dayjs 模板（对齐 Element Plus value-format）。
      */
     valueFormat?: RsDatePickerValueFormat;
+    /** 触发器展示模板（dayjs）。与 valueFormat 分离，默认墙钟。 */
+    format?: string;
     labelPosition?: RsDatePickerLabelPosition;
     /** 底部快捷选项（有值时替代「今天/现在」链接） */
     shortcuts?: RsDatePickerShortcut[];
     size?: RsComponentSize;
+    radius?: RsRadius;
     id?: string;
     invalid?: boolean;
     showValidateMessage?: boolean;
+    clearable?: boolean;
+    readonly?: boolean;
+    ariaLabel?: string;
+    /** 一周起始。未传跟 locale（en-US 周日，zh-CN 周一） */
+    weekStartsOn?: RsWeekStartsOn;
+    disabledDates?: string[];
+    disabledDate?: RsDatePickerDisabledDate;
+    getPopupContainer?: RsDatePickerGetPopupContainer;
 };
-declare function clearValidation(): void;
-declare function setFieldValue(value: unknown): void;
-declare function runValidate(trigger?: RsFormRuleTrigger): Promise<{
-    valid: true;
-    name: string | undefined;
-    message?: undefined;
-} | {
-    valid: boolean;
-    message: string | undefined;
-    name: string | undefined;
-}>;
 type __VLS_ModelProps = {
     modelValue?: RsDatePickerModelValue;
     'open'?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
-    setValue: typeof setFieldValue;
-    clearValidation: typeof clearValidation;
-    validate: typeof runValidate;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, RsDatePickerExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (value: RsDatePickerModelValue) => any;
+    blur: () => any;
+    focus: () => any;
+    clear: () => any;
     "update:modelValue": (value: RsDatePickerModelValue) => any;
     "update:open": (value: boolean) => any;
+    openChange: (open: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onChange?: ((value: RsDatePickerModelValue) => any) | undefined;
+    onBlur?: (() => any) | undefined;
+    onFocus?: (() => any) | undefined;
+    onClear?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: RsDatePickerModelValue) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onOpenChange?: ((open: boolean) => any) | undefined;
 }>, {
     required: boolean;
     disabled: boolean;
     range: boolean;
+    readonly: boolean;
+    clearable: boolean;
     showValidateMessage: boolean;
     labelPosition: RsDatePickerLabelPosition;
+    disabledDates: string[];
     withTime: boolean;
     valueFormat: RsDatePickerValueFormat;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;