@king-design/intact 2.0.0-beta.1 → 2.0.0

package/components/cascader/index.md

@@ -9,26 +9,55 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| data | 组件要展示的数据 | `Array` | `undefined` |
-| value | 组件当前的值，可使用`v-model`双向绑定 | `*` | `""` |
-| changeOnSelect | 是否选中父级即改变`value`值  | `Boolean` | `false` |
-| trigger | 子菜单触发方式，默认点击触发 | `"click"` | `"hover"` | `"click"` |
-| format | 自定义结果显示，组件会将当前选择的所有数据项以数组的格式作为参数传入 | `Function` | `(values) => values.map(value => value.label).join(' / ')` |
-| keywords | 如果支持筛选，当前关键词 | `String` | `undefined` |
-| filterable | 是否可搜索，默认根据`label`进行搜索 | `Boolean` | `false` |
-| filter | 如果可搜索，你可以传入`filter`改变搜索逻辑，组件会将搜索关键词和数据项作为参数传入 | `Function` | `(keywords, props) => props.label.indexOf(keywords) > -1` |
-| loadData | 如果`data`中的`children`属性值为空数组`[]`，则可以使用该属性定义动态加载逻辑，组件会将当前选中的数据项作为参数传入 | `Function` | `(item) => {}` |
-| disabled | 是否禁用 | `Boolean` | `false` |
-| clearable | 是否可清空 | `Boolean` | `false` |
+| value | 当前选择的元素，可用`v-model`双向绑定 | `any` | `""` |
+| multiple | 是否支持多选 | `boolean` | `false` |
+| filterable | 是否支持筛选 | `boolean` | `false` |
+| loading | 数据加载状态 | `boolean` | `false` |
+| disabled | 是否禁用 | `boolean` | `false` |
+| name | 表单元素的`name` | `string` | `undefined` |
 | size | 尺寸 | `"large"` | `"default"` | `"small"` | `"mini"` | `"default"` |
-| fluid | 是否宽度100% | `Boolean` | `false` |
-| width | 指定宽度 | `Number` | `undefined` | 
-| placeholder | 占位文案 | `String` | `"请选择"` |
-| loading | 数据加载状态 | `Boolean` | `false` |
+| hideIcon | 是否隐藏后面的图标 | `boolean` | `false` |
+| clearable | 是否可清空 | `boolean` | `false` |
+| fluid | 是否宽度100% | `boolean` | `false` |
+| inline | 展示内联模式，该模式下，组件没有边框，宽度和高度如同内联元素一样由内容撑开 | `boolean` | `false` |
+| placeholder | 占位文案 | `string` | `"请选择"` |
+| container | 指定弹出菜单追加的位置，默认：`Dialog`类型的组件会追加到`Dialog`中，其他会追加到`body`中。你可以传入函数返回一个DOM用来作为插入的容器，或者传入字符串用来给`querySelector`进行查询 | `Container` | `undefined` |
+| width | 指定宽度，组件自动添加单位`px` | `number` | `string` | `undefined` | 
+| data | 组件要展示的数据 | `CascaderData<V>[]` | `undefined` |
+| trigger | 子菜单触发方式，默认点击触发 | `"click"` &#124; `"hover"` | `"click"` |
+| changeOnSelect | 是否选中父级即改变`value`值  | `boolean` | `false` |
+| format | 自定义结果显示，组件会将当前选择的所有数据项以数组的格式作为参数传入 | `Function` | `(values: string[]) => values.map(value => value.label).join(' / ')` |
+| loadData | 如果`data`中的`children`属性值为空数组`[]`，则可以使用该属性定义动态加载逻辑，组件会将当前选中的数据项作为参数传入 | `(data: CascaderData<V>) => any` | `undefined` |
+| filter | 如果可搜索，你可以传入`filter`改变搜索逻辑，组件会将搜索关键词和数据项作为参数传入 | `(keywords: string, data: CascaderData<V>) => boolean` | `(keywords: string, data: CascaderData<V>) => data.label.includes(keywords)` |
+
+```ts
+export type CascaderData<V> = {
+    value: V 
+    label: string
+    disabled?: boolean
+    loaded?: boolean
+    children?: CascaderData<V>[]
+}
+
+export type Container = string | ((parentDom: Element, anchor: Node | null) => Element)
+```
 
 # 扩展点
 
 | 名称 | 说明 | 参数 |
 | --- | --- | --- |
-| format | 扩展选择后展示的内容，等同于`format`属性，优先级比`format`属性高 | `values`: `Array` 当前所有已选值 |
+| value | 自定义选择结果的展示 | `([value: any, label: Children]) => Children` |
+| values | 自定义多选的选择结果的展示 | `([values: any[], labels: Children[]]) => Children` |
+| prefix | 自定义输入框前面展示的内容 | - |
+| suffix | 自定义输入框后面展示的内容 | - |
 
+```ts
+import {Children} from 'intact';
+```
+
+# 事件
+
+| 事件名 | 说明 | 参数 |
+| --- | --- | --- |
+| show | 菜单弹出时触发 | - |
+| hide | 菜单隐藏时触发 | - |

package/components/cascader/index.spec.ts

@@ -9,7 +9,7 @@ import {Cascader} from './';
 describe('Cascader', () => {
     afterEach(async () => {
         unmount();
-        await wait(400);
+        await wait(500);
     });
 
     it('basic test', async function() {

package/components/cascader/styles.ts

@@ -25,7 +25,7 @@ const defaults = {
     }
 };
 
-let cascader: any;
+let cascader: typeof defaults;
 setDefault(() => {
     cascader = deepDefaults(theme, {cascader: defaults}).cascader;
 });

package/components/checkbox/demos/basic.md

@@ -6,7 +6,7 @@ order: 0
 `Checkbox`的基本用法，及禁用状态。通过`v-model`进行数据双向绑定。由于`trueValue`的默认值为`true`，所以可以直接传入`value=true`
 来指定选中状态。
 
-> 选中状态的判定条件是`value === trueValue || value.indexOf(trueValue)`，对于值为对象的情况要注意。
+> 选中状态的判定条件是`value === trueValue || value.includes(trueValue)`，对于值为对象的情况要注意是否是同一引用。
 
 ```vdt
 import {Checkbox} from 'kpc';

package/components/checkbox/demos/indeterminate.md

@@ -8,12 +8,10 @@ order: 2
 ```vdt
 import {Checkbox} from 'kpc';
 
-const length = this.getLength();
-
 <div>
-    <Checkbox indeterminate={length > 0 && length < 3}
-        value={length === 3}
-        ev-$change:value={this._toggleSelectAll}
+    <Checkbox indeterminate={this.getLength() > 0 && this.getLength() < 3}
+        value={this.getLength() === 3}
+        ev-$change:value={this.toggleSelectAll}
     >全选</Checkbox>
     <hr />
     <Checkbox v-for={this.get('options')}
@@ -50,7 +48,7 @@ export default class extends Component<Props> {
     };
 
     @bind
-    _toggleSelectAll(checked?: boolean) {
+    toggleSelectAll(checked?: boolean) {
         if (checked) {
             this.set('languages', ['Javascript', 'C++', 'PHP']);
         } else {
@@ -63,17 +61,3 @@ export default class extends Component<Props> {
     }
 }
 ```
-
-```vue-script
-computed: {
-    length(): number {
-        return this.getLength();
-    }
-},
-```
-
-```angular-methods
-get length() {
-    return this.getLength();
-}
-```

package/components/checkbox/demos/value.md

@@ -8,7 +8,7 @@ order: 1
 
 > 当指定值为对象时，不要在模板中直接定义对象字面量（如：trueValue={{a: 1}}），
 > 因为在模板中创建的对象每次执行模板都会生成一份新数据，使全等判断(`===`)失效。
-> 此时应该在js中定义该对象，然后模板中引用它。
+> 此时应该在组件中定义该对象，然后模板中引用它。
 
 ```vdt
 import {Checkbox} from 'kpc';

package/components/checkbox/index.md

@@ -9,18 +9,18 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| disabled | 是否禁用 | `Boolean` | `false` |
-| name | `input`的`name`属性，用于指定Checkbox组 | `String` | `undefind` |
-| value | 复选框组的取值，用于`v-model`进行双向绑定 | `*` | `false` |
-| trueValue | 当前复选框选中的值 | `*` | `true` |
-| falseValue | 当前复选框取消选中的值 | `*` | `false` |
-| indeterminate | 是否半选中状态 | `Boolean` | `false` |
+| disabled | 是否禁用 | `boolean` | `false` |
+| value | 复选框组的取值，用于`v-model`进行双向绑定 | `any` | `false` |
+| trueValue | 当前复选框选中的值 | `any` | `true` |
+| falseValue | 当前复选框取消选中的值 | `any` | `false` |
+| indeterminate | 是否半选中状态 | `boolean` | `false` |
+| name | 原生`name`属性 | `string` | `undefined` |
+| required | 原生`required`属性 | `boolean` | `undefined` |
+| form | 原生`form`属性 | `string` | `undefined` |
+| autofocus | 原生`autofocus`属性 | `boolean` | `undefined` |
 
 # 事件
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
-| change | 当点击组件导致值变化时触发，与`$change:value`事件有所不同的是，该事件只会触发一次，而且一定是用户点击行为触发的 | `value` |
-| click | 原生`click`事件 | `Event` |
-| mouseenter | 原生`mouseenter`事件 | `Event` |
-| mouseleave | 原生`mouseleave`事件 | `Event` |
+| change | 当点击组件导致值变化时触发 | `(value: any, e: MouseEvent) => void` |

package/components/checkbox/index.vdt

@@ -1,5 +1,6 @@
 import {getRestProps} from '../utils';
 import makeStyles from './styles';
+import {Wave} from '../wave';
 
 const {
     className, disabled, falseValue, 
@@ -44,18 +45,20 @@ const events = [
     ev-keypress={this.onKeypress}
     {...events}
 >
-    <span class="k-checkbox-wrapper">
-        <input
-            type="checkbox" 
-            checked={isChecked}
-            value={trueValue}
-            v-model-true={trueValue}
-            v-model-false={falseValue}
-            disabled={disabled}
-            tabindex="-1"
-            ref={this.inputRef}
-            {...getRestProps(this, rest)}
-        />
-    </span>
+    <Wave disabled={disabled} inset="-2px">
+        <span class="k-checkbox-wrapper">
+            <input
+                type="checkbox" 
+                checked={isChecked}
+                value={trueValue}
+                v-model-true={trueValue}
+                v-model-false={falseValue}
+                disabled={disabled}
+                tabindex="-1"
+                ref={this.inputRef}
+                {...getRestProps(this, rest)}
+            />
+        </span>
+    </Wave>
     <span class="k-checkbox-text" v-if={children}>{children}</span>
 </label>

package/components/checkbox/styles.ts

@@ -1,5 +1,5 @@
 import {css, cx} from '@emotion/css';
-import {theme, ThemeValue, setDefault} from '../../styles/theme';
+import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, palette, getLeft}  from '../../styles/utils';
 import '../../styles/global';
 
@@ -7,7 +7,7 @@ const defaults = {
     width: '14px',
     get borderColor() { return theme.color.darkBorder },
     get borderRadius() { return theme.borderRadius },
-    get transition() { return theme.transition },
+    get transition() { return theme.transition.small },
     bgColor: '#fff',
     
     // text
@@ -43,7 +43,7 @@ const defaults = {
     }
 };
 
-let checkbox: any;
+let checkbox: typeof defaults;
 setDefault(() => {
     checkbox = deepDefaults(theme, {checkbox: defaults}).checkbox;
 });
@@ -55,10 +55,8 @@ export default function makeStyles() {
         cursor: pointer;
         vertical-align: middle;
         .k-checkbox-wrapper {
-            display: inline-block;
             width: ${checkbox.width};
             height: ${checkbox.width}; 
-            vertical-align: middle;
             border: 1px solid ${checkbox.borderColor}; 
             border-radius: ${checkbox.borderRadius};
             position: relative;
@@ -94,9 +92,7 @@ export default function makeStyles() {
             margin: 0;
         }
         .k-checkbox-text {
-            vertical-align: middle;
             margin-left: ${checkbox.text.gap};
-            display: inline-block;
             flex: 0 1 auto;
         }
 

package/components/code/demos/basic.md

@@ -5,11 +5,11 @@ order: 0
 
 > `Code`由于基于`Monaco Editor`这个庞大的库，所以没有放入索引文件`index.js`，你只能通过如下方式引入
 >
-> `import {Code} from 'kpc/components/code';`
+> `import {Code} from '@king-design/react/components/code';`
 >
-> 而不能直接通过`kpc`引入
+> 而不能直接引入
 >
-> `import {Code} from 'kpc';`
+> `import {Code} from '@king-design/react';`
 
 组件可以通过`v-model`双向绑定编辑的代码，通过`height`指定组件的高度（需要带单位），默认`100%`；通过
 `language`可以指定编程语言，默认为`javasript`

package/components/code/index.md

@@ -5,21 +5,19 @@ order: 99
 sidebar: doc
 ---
 
-> 由于Monaco-Editor太大，该组件不会打包进入单文件，所以你不能通过CDN引入组件的方式使用该组件，而必须通过webpack
-> 进行构建
+> 由于Monaco-Editor太大，该组件不会默认加入`index.js`
 
 # 属性
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| value | 组件的值，可通过`v-model`双向绑定 | `String` | `''` |
-| language | 指定编程语言 | `String` | `javasript` |
-| width | 指定宽度，需要带单位 | `String` | `100%` |
-| height | 指定高度，需要带单位 | `String` | `100%` |
+| value | 组件的值，可通过`v-model`双向绑定 | `string` | `""` |
+| language | 指定编程语言 | `string` | `javasript` |
 | theme | 指定主题 | `"vs"` | `"vs-dark"` | `"hc-black"` | `"vs"` |
-| readonly | 是否只读 | `Boolean` | `false` |
-| loading | 是否正在加载 | `Boolean` | `false` |
-| options | 其它可选的配置，会传给`monaco.editor.create()`方法，可选值参考[options](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditorconstructionoptions.html) | `Object` | `{}` |
+| readOnly | 是否只读 | `boolean` | `false` |
+| width | 指定宽度，需要带单位 | `string` | `100%` |
+| height | 指定高度，需要带单位 | `string` | `100%` |
+| options | 其它可选的配置，会传给`monaco.editor.create()`方法，可选值参考[options](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IStandaloneEditorConstructionOptions.html) | [`editor.IStandaloneEditorConstructionOptions`](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IStandaloneEditorConstructionOptions.html) | `{}` |
 
 > 例如：通过`options`可以隐藏右侧代码的缩影(minimap): `options = {minimap: {enabled: false}}`
 
@@ -27,4 +25,4 @@ sidebar: doc
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
-| ready | 组件加载并实例化完成触发 | `Code` |
+| ready | 组件加载并实例化完成触发 | (editor: [editor.IStandaloneCodeEditor](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IStandaloneCodeEditor.html), Editor: typeof [editor](https://microsoft.github.io/monaco-editor/api/modules/monaco.editor.html)) => void |

package/components/collapse/index.md

@@ -11,18 +11,18 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| value | 当前展开的`CollapseItem`取值 | `Array` | `undefined` |
-| accordion | 是否展示手风琴风格 | `Boolean` | `false` |
+| value | 当前展开的`CollapseItem`取值 | `string[]` | `undefined` |
+| accordion | 是否展示手风琴风格 | `boolean` | `false` |
 | arrow | 指定箭头位置 | `"right"` | `"left"` | `"right"` |
-| noBorder | 是否展示无边框的简洁样式 | `Boolean` | `false` |
+| noBorder | 是否展示无边框的简洁样式 | `boolean` | `false` |
 
 ## CollapseItem
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| value | 当前`CollapseItem`的取值，默认会使用`$` + 索引的组合 | `String` | `$${index}` |
-| title | 标题内容 | `String` | `vNode` | `undefined` |
-| disabled | 是否禁用 | `Boolean` | `false` |
+| value | 当前`CollapseItem`的取值，默认会使用`$` + 索引的组合 | `string` | `$${index}` |
+| title | 标题内容 | `string` | `VNode` | `undefined` |
+| disabled | 是否禁用 | `boolean` | `false` |
 
 # 扩展点
 
@@ -38,5 +38,5 @@ sidebar: doc
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
-| show | 展开时触发 | `CollapseItem`实例 |
-| hide | 收起时触发 | `CollapseItem`实例 |
+| show | 展开时触发 | `(collapseItem: CollapseItem) => void` |
+| hide | 收起时触发 | `(collapseItem: CollapseItem) => void` |

package/components/collapse/item.vdt

@@ -21,7 +21,7 @@ const classNameObj = {
 <div class={classNameObj} {...getRestProps(this)}>
     <div class={kls('title')} ev-click={this.toggle}>
         <b:title>{title}</b:title>
-        <Icon class={{[kls('arrow')]: true, 'ion-ios-arrow-right': true}}></Icon>
+        <Icon class={{[kls('arrow')]: true, 'ion-ios-arrow-right': true}} hoverable={!disabled}></Icon>
     </div>
     <Transition
         show={isActive}

package/components/collapse/styles.ts

@@ -6,6 +6,7 @@ import '../../styles/global';
 export const kls = (className: string) => `k-collapse-${className}`;
 
 const defaults = {
+    get transition() { return theme.transition.large },
     fontSize: '12px',
     titleMarginRight: '8px',
     borderPadding: '0 24px',
@@ -18,7 +19,7 @@ const defaults = {
     }
 };
 
-let collapse: any;
+let collapse: typeof defaults;
 setDefault(() => {
     collapse = deepDefaults(theme, {collapse: defaults}).collapse;
 });
@@ -56,13 +57,13 @@ export function makeItemStyles() {
             font-weight: bold;
             height: ${collapseItem.titleHeight};
             line-height: ${collapseItem.titleHeight};
-            transition: color ${theme.transition};
+            transition: color ${collapse.transition};
             
         }
         
         .${kls('arrow')} {
             float: right;
-            transition: transform ${theme.transition};
+            transition: transform ${collapse.transition};
             line-height: ${collapseItem.titleHeight};
             height: ${collapseItem.titleHeight};
             transform-origin: left center 0;

package/components/colorpicker/index.md

@@ -9,7 +9,7 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| value | 当前颜色值 | `String` | `undefined` |
-| presets | 预选颜色 | `Array<String>` | `['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF']` |
+| value | 当前颜色值 | `string` | `undefined` |
+| presets | 预选颜色 | `string[]` | `['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF']` |
 | size | 组件尺寸 | `"large"` &#124; `"default"` &#124; `"small"` &#124; `"mini"` | `"default"` |
-| disabled | 是否禁用 | `Boolean` | `false` |
+| disabled | 是否禁用 | `boolean` | `false` |

package/components/colorpicker/index.spec.ts

@@ -20,7 +20,7 @@ describe('Colorpicker', () => {
 
     afterEach(async function() {
         unmount();
-        await wait(400);
+        await wait(500);
     });
 
     it('should select color by saturation', async function() {

package/components/colorpicker/index.ts

@@ -1,12 +1,14 @@
 import {Component, TypeDefs} from 'intact';
 import template from './index.vdt';
 import {sizes, Sizes} from '../../styles/utils';
+import {Container} from '../portal';
 
 export interface ColorpickerProps {
     value: string
     presets?: string[]
     size?: Sizes
     disabled?: boolean
+    container?: Container
 }
 
 export interface ColorpickerEvents { }
@@ -19,6 +21,7 @@ const typeDefs: Required<TypeDefs<ColorpickerProps>> = {
     presets: Array,
     size: sizes,
     disabled: Boolean,
+    container: [Function, String],
 };
 
 const defaults = (): Partial<ColorpickerProps> => ({

package/components/colorpicker/index.vdt

@@ -4,7 +4,10 @@ import {makeStyles} from './styles';
 import {ColorpickerPanel} from './panel';
 import {Dropdown, DropdownMenu} from '../dropdown';
 
-const {className, transition, presets, value, size, disabled} = this.get();
+const {
+    className, transition, presets,
+    value, size, disabled, container
+} = this.get();
 
 const classNameObj = {
     'k-colorpicker': true,
@@ -19,6 +22,7 @@ const classNameObj = {
         position={{my: 'left top+8', at: 'left bottom', collision: 'flip'}}
         trigger="click"
         disabled={disabled}
+        container={container}
     >
         <div class="k-colorpicker-color">
             <div class="k-colorpicker-inner" style={{backgroundColor: value}}></div>

package/components/colorpicker/styles.ts

@@ -85,7 +85,7 @@ const defaults = {
     },
 };
 
-let colorpicker: any;
+let colorpicker: typeof defaults;
 setDefault(() => {
     colorpicker = deepDefaults(theme, {colorpicker: defaults}).colorpicker;
 });

package/components/context.ts

@@ -5,11 +5,15 @@ export interface ProviderProps<T> {
     value?: T 
 }
 
+export interface ConsumerProps<T> {
+    defaultValue?: T
+}
+
 type ProviderConstructor<T> = ComponentConstructor<Component<ProviderProps<T>>> 
-type ConsumerConstructor = ComponentConstructor<Component<{}>> 
+type ConsumerConstructor<T> = ComponentConstructor<Component<ConsumerProps<T>>> 
 
 let id = 0;
-export function createContext<T = any>(defaultValue?: T): {Provider: ProviderConstructor<T>, Consumer: ConsumerConstructor} {
+export function createContext<T = any>(defaultValue?: T): {Provider: ProviderConstructor<T>, Consumer: ConsumerConstructor<T>} {
     const injectionKey = `$Context-${id++}`;
 
     class Provider extends Component<ProviderProps<T>> {
@@ -27,10 +31,10 @@ export function createContext<T = any>(defaultValue?: T): {Provider: ProviderCon
         }
     }
 
-    class Consumer extends Component {
-        static template = consumertemplate;
+    class Consumer extends Component<ConsumerProps<T>> {
+        static template = consumerTemplate;
 
-        private ref =  inject(injectionKey) as RefObject<T | undefined>;
+        private ref = inject(injectionKey, null);
     }
 
     return {Provider, Consumer};
@@ -40,8 +44,11 @@ function providerTemplate(this: Component) {
     return this.$props.children;
 }
 
-function consumertemplate(this: Component & {ref: RefObject<any>}) {
-    return (this.$props.children as unknown as Function)(this.ref.value);
+function consumerTemplate(this: Component & {ref: RefObject<any>}) {
+    const ref = this.ref;
+    const props = this.$props as any;
+    const value = ref && ref.value || props && props.value;
+    return (this.$props.children as unknown as Function)(value);
 }
 
 // Maybe like legency context api of React

package/components/datepicker/demos/disabledDate.md

@@ -6,8 +6,6 @@ order: 3
 通过`disabledDate`属性，可以定义个方法，来指定哪些日期被禁止选择。组件会将一个日期字符串
 作为方法的参数，如果方法返回“真”则禁用掉该日期，否则不禁用。
 
-> `@since v1.1.0` 会传入当前日期对象`Dayjs`作为第2个参数
-
 ```vdt
 import {Datepicker} from 'kpc';
 

package/components/datepicker/demos/format.md

@@ -14,7 +14,7 @@ order: 3.1
 展示的日期，通过`valueFormat`格式化`value`值，并且它们的优先级比`format`高
 
 > 如果你想给组件传入初始`value`值，但是该字符串不是默认格式，则必须指定`format`或者`valueFormat`。同时该
-> 属性也可以作用于`maxDate` `minDate`属性
+> 属性也可以作用于`max` `min`属性
 
 ```vdt
 import {Datepicker} from 'kpc';

package/components/datepicker/demos/shortcuts.md

@@ -5,8 +5,8 @@ order: 0.1
 
 通过`shortcuts`属性可以指定快捷方式，数组的成员为对象，形如：`{label, value}`:
 
-1. `label` `String | vNode | Function` 指定要展示的文案，可以是返回文案的函数
-2. `value` `Function` 指定选中后的值（日期对象），如果是范围选择，返回数组
+1. `label` `string | VNode | (() => string | VNode)` 指定要展示的文案，可以是返回文案的函数
+2. `value` `() => Value | [Value, Value]` 指定选中后的值（日期对象），如果是范围选择，返回数组
 
 组件内置了一些快捷方式，可以直接使用，如本例所示
 

package/components/datepicker/helpers.ts

@@ -3,10 +3,10 @@ import {strPad, range} from '../utils';
 import {_$} from '../../i18n';
 import {StateValueItem} from './basepicker';
 
-export function getNowDate() {
+export function getNowDate(isEnd?: boolean) {
     // only date without time
     const now = new Date();
-    clearTime(now);
+    isEnd ? endTime(now) : clearTime(now);
 
     return dayjs(now);
 }
@@ -18,6 +18,13 @@ export function clearTime(date: Date) {
     date.setMilliseconds(0);
 }
 
+export function endTime(date: Date) {
+    date.setHours(23);
+    date.setMinutes(59);
+    date.setSeconds(59);
+    date.setMilliseconds(999);
+}
+
 export function isEqual(
     a: Dayjs | undefined | null,
     b: Dayjs | undefined | null,