@king-design/intact 3.1.4-beta.0 → 3.1.4-beta.1

package/components/button/demos/group.md

@@ -68,6 +68,12 @@ import {Button, ButtonGroup, Icon} from 'kpc';
         <Button value="guangzhou">广州</Button>
         <Button value="shenzhen">深圳</Button>
     </ButtonGroup>
+    <ButtonGroup seperate>
+        <Button value="beijing" type="primary" disabled>北京</Button>
+        <Button value="shanghai">上海</Button>
+        <Button value="guangzhou">广州</Button>
+        <Button value="shenzhen">深圳</Button>
+    </ButtonGroup>
 </div>
 ```
 

package/components/button/index.vdt

@@ -8,13 +8,13 @@ import {button as theme} from './styles';
 let {
     type, className, size, icon, circle, ref, key, tabindex,
     tagName, htmlType, fluid, children, loading, disabled,
-    name, ghost
+    name, ghost,
 } = this.get();
 
-const checked = this.isChecked();
-if (!this.config) debugger;
 const { cls, k } = this.config;
 
+const checked = this.isChecked();
+
 const isIcon = child => (
     child.tag === Icon ||
     child.className && child.className.indexOf('icon') > -1

package/components/button/styles.ts

@@ -459,7 +459,7 @@ export const makeButtonGroupStyles = cache(function makeButtonGroupStyles(k: str
         }
 
         // horizontal
-        &:not(.${k}-vertical) {
+        &:not(.${k}-vertical):not(.${k}-seperate) {
             > .${k}-btn {
                 &:not(:first-child) {
                     margin-left: -1px;
@@ -497,7 +497,7 @@ export const makeButtonGroupStyles = cache(function makeButtonGroupStyles(k: str
         }
             
         // vertical
-        &.${k}-vertical {
+        &.${k}-vertical:not(.${k}-seperate) {
             flex-direction: column;
             > .${k}-btn {
                 &:not(.${k}-btn-icon) {
@@ -535,9 +535,6 @@ export const makeButtonGroupStyles = cache(function makeButtonGroupStyles(k: str
         // seperate
         &.${k}-seperate {
             gap: 8px;
-            > .${k}-btn {
-                border-radius: ${button.borderRadius} !important;
-            }
         }
     `;
 });

package/components/card/demos/size.md

@@ -0,0 +1,34 @@
+---
+title: 尺寸
+order: 4
+---
+
+通过`size`属性可以指定组件的尺寸（主要改变padding）：`large`, `default`,`small`, `mini`。
+
+```vdt
+import {Card} from 'kpc';
+
+<div>
+    <Card title="用户信息" type="border" size="large">
+        <div>卡片内容</div>
+        <div>卡片内容</div>
+    </Card>
+    <Card title="用户信息" type="border">
+        <div>卡片内容</div>
+        <div>卡片内容</div>
+    </Card>
+    <Card title="用户信息" type="border" size="small">
+        <div>卡片内容</div>
+        <div>卡片内容</div>
+    </Card>
+    <Card title="用户信息" type="border" size="mini">
+        <div>卡片内容</div>
+        <div>卡片内容</div>
+    </Card>
+</div>
+```
+
+```styl
+.k-card
+    margin-bottom 16px
+```

package/components/card/index.md

@@ -13,6 +13,7 @@ sidebar: doc
 | --- | --- | --- | --- |
 | title | 卡片标题 | `string` | `VNode` | `undefined` | 
 | type | 卡片类型 | `"shadow"` | `"border"` | `"none"` | `"shadow"` |
+| size | 卡片尺寸 | `"default"` | `"small"` | `"mini"` | `"default"` |
 
 ## CardColumn
 

package/components/card/index.ts

@@ -2,10 +2,12 @@ import {Component, VNode, TypeDefs} from 'intact';
 import template from './index.vdt';
 export * from './column';
 import { useConfigContext } from '../config';
+import {Sizes} from '../types';
 
 export interface CardProps {
     title?: string | VNode
     type?: 'shadow' | 'border' | 'none',
+    size?: Sizes,
 }
 
 export interface CardEvents { }
@@ -19,10 +21,12 @@ export interface CardBlocks {
 const typeDefs: Required<TypeDefs<CardProps>> = {
     title: [String, VNode],
     type: ['shadow', 'border', 'none'],
+    size: String,
 };
 
 const defaults = (): Partial<CardProps> => ({
-    type: 'shadow'
+    type: 'shadow',
+    size: 'default',
 });
 
 export class Card extends Component<CardProps, CardEvents, CardBlocks> {

package/components/card/index.vdt

@@ -3,7 +3,7 @@ import {CardColumn} from './column';
 import {makeStyles} from './styles';
 
 const {
-    children, className, title, type
+    children, className, title, type, size,
 } = this.get();
 const { k } = this.config;
 
@@ -25,6 +25,7 @@ const classNameObj = {
     [`${k}-none`]: type === 'none',
     [`${k}-no-header`]: !hasHeader,
     [`${k}-card-grid`]: hasColumn,
+    [`${k}-${size}`]: size !== 'default',
     [className]: className,
     [makeStyles(k)]: true,
 };

package/components/card/styles.ts

@@ -6,12 +6,24 @@ import { cache } from '../utils';
 
 const defaults = {
     border: '1px solid #e5e5e5',
-    padding: '16px',
+    padding: '24px',
     get boxShadow() { return theme.boxShadow },
     get borderRadius() {return theme.largeBorderRadius},
     headerHeight: '48px',
     headerFontSize: '14px',
     bgColor: '#fff',
+    large: {
+        padding: '32px',
+        headerHeight: '48px',
+    },
+    small: {
+        padding: '16px',
+        headerHeight: '48px',
+    },
+    mini: {
+        padding: '8px',
+        headerHeight: '32px',
+    }
 };
 
 let card: typeof defaults;
@@ -20,22 +32,23 @@ setDefault(() => {
     makeStyles?.clearCache();
 });
 
+const sizes = ['large', 'small', 'mini'] as const;
+
 export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         border-radius: ${card.borderRadius};
         background: ${card.bgColor};
         .${k}-card-header {
             height: ${card.headerHeight};
-            line-height: ${card.headerHeight};
             padding: 0 ${card.padding};
+            display: flex;
+            align-items: center;
         }
         .${k}-card-title {
             font-size: ${card.headerFontSize};
-            display: inline-block;
+            flex: 1;
         }
         .${k}-card-extra {
-            float: right;
-            height: 100%;
             display: flex;
             align-items: center;
         }
@@ -90,5 +103,30 @@ export const makeStyles = cache(function makeStyles(k: string) {
                 justify-content: center;
             }
         }
+
+        // size
+        ${sizes.map(size => {
+            const { padding, headerHeight } = card[size];
+            return css`
+                &.${k}-${size} {
+                    .${k}-card-header {
+                        padding: 0 ${padding};
+                        height: ${headerHeight};
+                    }
+                    .${k}-card-body {
+                        padding: 0 ${padding} ${padding};
+                    }
+                    &.${k}-border,
+                    &.${k}-no-header {
+                        .${k}-card-body {
+                            padding-top: ${padding};
+                        }
+                    }
+                    .${k}-card-column {
+                        padding: ${padding};
+                    }
+                }
+            `
+        })} 
     `;
 });

package/components/carousel/useAutoplay.ts

@@ -4,7 +4,7 @@ import type {Carousel} from './';
 export function useAutoplay(next: () => void) {
     const instance = useInstance() as Carousel;
 
-    let timer: number;
+    let timer: number | null = null;
     let ms: number;
 
     instance.on('$receive:autoplay', v => {
@@ -28,7 +28,10 @@ export function useAutoplay(next: () => void) {
     }
 
     function stop() {
-        window.clearTimeout(timer);
+        if (timer) {
+            window.clearTimeout(timer);
+            timer = null;
+        }
     }
 
     onBeforeUnmount(stop);

package/components/dropdown/usePosition.ts

@@ -53,18 +53,17 @@ export function usePosition() {
         let pos = instance.get('position');
         switch (pos) {
             case 'left':
-                case 'left':
-                    pos = {my: 'right-10 center', at: 'left center'};
-                    break;
-                case 'bottom':
-                    pos = {my: 'center top+10', at: 'center bottom'};
-                    break;
-                case 'right':
-                    pos = {my: 'left+10 center', at: 'right center'};
-                    break;
-                case 'top':
-                    pos = {my: 'center bottom-10', at: 'center top'};
-                    break;
+                pos = {my: 'right-10 center', at: 'left center'};
+                break;
+            case 'bottom':
+                pos = {my: 'center top+10', at: 'center bottom'};
+                break;
+            case 'right':
+                pos = {my: 'left+10 center', at: 'right center'};
+                break;
+            case 'top':
+                pos = {my: 'center bottom-10', at: 'center top'};
+                break;
         }
         position(findDomFromVNode(instance.menuVNode!, true) as HTMLElement, {
             my: 'left top+8',

package/components/icon/styles.ts

@@ -37,6 +37,7 @@ export const makeStyles = cache(function makeStyles(k: string, color?: string) {
         font-size: ${icon.fontSize.default};
         line-height: 1;
         // display: inline-block;
+        font-weight: normal;
         ${sizes.map(size => {
             const fontSize = icon.fontSize[size];
             return css`

package/components/input/styles.ts

@@ -105,6 +105,7 @@ export const makeStyles = cache(function makeStyles(k: string) {
             background: transparent;
             padding: 0;
             width: 0; // must set width to 0, otherwise it has min width
+            max-width: 100%;
             &::placeholder {
                 color: ${input.placeholderColor};
             }

package/components/table/table.ts

@@ -12,7 +12,7 @@ import {useExpandable} from './useExpandable';
 import {useSelected} from './useSelected';
 import {useTree} from './useTree';
 import {TooltipProps, Tooltip} from '../tooltip/tooltip';
-import {useRestRowStatus} from './useRestRowStatus';
+import {useResetRowStatus} from './useResetRowStatus';
 import {exportTable} from './exportTable';
 import {useResizable} from './useResizable';
 import {useDraggable} from './useDraggable';
@@ -208,7 +208,7 @@ export class Table<
     private sortable = useSortable();
     private expandable = useExpandable();
     private selected = useSelected();
-    private resetRowStatus = useRestRowStatus(this.disableRow.getAllKeys);
+    private resetRowStatus = useResetRowStatus(this.disableRow.getAllKeys);
     private draggable = useDraggable(this.pagination.data);
     private stickyScrollbar = useStickyScrollbar(
         this.stickyHeader.elementRef,

package/components/table/useFixedColumns.ts

@@ -107,7 +107,7 @@ export function useFixedColumns(
 
     function updateScrollPositionOnResize() {
         const scrollDom = scrollRef.value!;     
-        if (scrollDom.scrollWidth - scrollDom.offsetWidth <= 0) {
+        if (!hasFixed.value || scrollDom.scrollWidth - scrollDom.offsetWidth <= 0) {
             scrollPosition.set(null);
         } else {
             setScrollPosition(scrollRef.value!.scrollLeft);

package/components/table/{useRestRowStatus.ts → useResetRowStatus.ts}

@@ -2,7 +2,7 @@ import {useInstance, onBeforeUnmount, onUpdated} from 'intact';
 import type {Table, TableRowKey} from './table';
 import {addOrRemove} from './useChecked';
 
-export function useRestRowStatus(
+export function useResetRowStatus(
     getAllKeys: () => TableRowKey[]
 ) {
     const instance = useInstance() as Table;

package/components/tabs/tab.ts

@@ -25,6 +25,7 @@ const typeDefs: Required<TypeDefs<TabProps>> = {
 
 export class Tab extends Component<TabProps, TabEvents> {
     static template = template;
+    static typeDefs = typeDefs;
 
     private tabs = inject<Tabs>(TABS)!;
     private config = useConfigContext();

package/components/wave/index.ts

@@ -37,7 +37,7 @@ export class Wave extends Component<WaveProps> {
 
     private instance: HTMLElement | null = null;
     private className!: string;
-    private timer: number = 0;
+    private timer: number | null = null;
     private config = useConfigContext();
 
     private initClassName() {
@@ -91,6 +91,9 @@ export class Wave extends Component<WaveProps> {
 
         node.classList.remove(this.className);
         node.removeEventListener('animationend', this.resetAnimation);
-        clearTimeout(this.timer);
+        if (this.timer) {
+            clearTimeout(this.timer);
+            this.timer = null;
+        }
     }
 }

package/es/components/button/index.vdt.js

@@ -31,11 +31,10 @@ export default function ($props, $blocks, $__proto__) {
       name = _this$get.name,
       ghost = _this$get.ghost;
 
-  var checked = this.isChecked();
-  if (!this.config) debugger;
   var _this$config = this.config,
       cls = _this$config.cls,
       k = _this$config.k;
+  var checked = this.isChecked();
 
   var isIcon = function isIcon(child) {
     return child.tag === Icon || child.className && child.className.indexOf('icon') > -1;

package/es/components/button/styles.js

@@ -264,13 +264,13 @@ export var makeButtonStyles = cache(function makeButtonStyles(k, iconSide) {
   }), ";.", k, "-icon-loading{margin-left:-1em;}}}"), ";"));
 });
 export var makeButtonGroupStyles = cache(function makeButtonGroupStyles(k) {
-  return /*#__PURE__*/css("display:inline-flex;align-items:center;flex-wrap:wrap;vertical-align:middle;.", k, "-btn{margin:0;vertical-align:middle;&:hover,&:focus,&.", k, "-active{z-index:1;position:relative;}}&.", k, "-fluid{width:100%;}&:not(.", k, "-vertical){>.", k, "-btn{", _mapInstanceProperty(types).call(types, function (type) {
+  return /*#__PURE__*/css("display:inline-flex;align-items:center;flex-wrap:wrap;vertical-align:middle;.", k, "-btn{margin:0;vertical-align:middle;&:hover,&:focus,&.", k, "-active{z-index:1;position:relative;}}&.", k, "-fluid{width:100%;}&:not(.", k, "-vertical):not(.", k, "-seperate){>.", k, "-btn{", _mapInstanceProperty(types).call(types, function (type) {
     if (type === 'active') return;
     var borderColor = button.group[type].borderColor;
     return /*#__PURE__*/css("&.", k, "-", type, ":not(:first-child){border-left-color:", borderColor, ";}&.", k, "-", type, ":not(:last-child){border-right-color:", borderColor, ";}");
-  }), ";&:not(:first-child){margin-left:-1px;&:not(:last-child){border-radius:0;}}&:not(:only-child):first-child{border-top-right-radius:0;border-bottom-right-radius:0;}&:not(:only-child):last-child{border-top-left-radius:0;border-bottom-left-radius:0;}}&.", k, "-fluid{display:flex;>.", k, "-btn{flex:1;}}}&.", k, "-vertical{flex-direction:column;>.", k, "-btn{", _mapInstanceProperty(types).call(types, function (type) {
+  }), ";&:not(:first-child){margin-left:-1px;&:not(:last-child){border-radius:0;}}&:not(:only-child):first-child{border-top-right-radius:0;border-bottom-right-radius:0;}&:not(:only-child):last-child{border-top-left-radius:0;border-bottom-left-radius:0;}}&.", k, "-fluid{display:flex;>.", k, "-btn{flex:1;}}}&.", k, "-vertical:not(.", k, "-seperate){flex-direction:column;>.", k, "-btn{", _mapInstanceProperty(types).call(types, function (type) {
     if (type === 'active') return;
     var borderColor = button.group[type].borderColor;
     return /*#__PURE__*/css("&.", k, "-", type, ":not(:first-child){border-top-color:", borderColor, ";}&.", k, "-", type, ":not(:last-child){border-bottom-color:", borderColor, ";}");
-  }), ";&:not(.", k, "-btn-icon){width:100%;}&:not(:first-child){margin-top:-1px;&:not(:last-child){border-radius:0;}}&:not(:only-child):first-child{border-bottom-left-radius:0;border-bottom-right-radius:0;}&:not(:only-child):last-child{border-top-left-radius:0;border-top-right-radius:0;}}}&.", k, "-seperate{gap:8px;>.", k, "-btn{border-radius:", button.borderRadius, "!important;}}");
+  }), ";&:not(.", k, "-btn-icon){width:100%;}&:not(:first-child){margin-top:-1px;&:not(:last-child){border-radius:0;}}&:not(:only-child):first-child{border-bottom-left-radius:0;border-bottom-right-radius:0;}&:not(:only-child):last-child{border-top-left-radius:0;border-top-right-radius:0;}}}&.", k, "-seperate{gap:8px;}");
 });

package/es/components/card/index.d.ts

@@ -1,8 +1,10 @@
 import { Component, VNode, TypeDefs } from 'intact';
 export * from './column';
+import { Sizes } from '../types';
 export interface CardProps {
     title?: string | VNode;
     type?: 'shadow' | 'border' | 'none';
+    size?: Sizes;
 }
 export interface CardEvents {
 }

package/es/components/card/index.js

@@ -6,12 +6,14 @@ export * from './column';
 import { useConfigContext } from '../config';
 var typeDefs = {
   title: [String, VNode],
-  type: ['shadow', 'border', 'none']
+  type: ['shadow', 'border', 'none'],
+  size: String
 };
 
 var defaults = function defaults() {
   return {
-    type: 'shadow'
+    type: 'shadow',
+    size: 'default'
   };
 };
 

package/es/components/card/index.vdt.js

@@ -16,7 +16,8 @@ export default function ($props, $blocks, $__proto__) {
       children = _this$get.children,
       className = _this$get.className,
       title = _this$get.title,
-      type = _this$get.type;
+      type = _this$get.type,
+      size = _this$get.size;
 
   var k = this.config.k;
   var hasHeader = $blocks.header || $blocks.title || title || $blocks.extra;
@@ -33,7 +34,7 @@ export default function ($props, $blocks, $__proto__) {
     }
   }
 
-  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-card"] = true, _classNameObj[k + "-shadow"] = type === 'shadow', _classNameObj[k + "-border"] = type === 'border', _classNameObj[k + "-none"] = type === 'none', _classNameObj[k + "-no-header"] = !hasHeader, _classNameObj[k + "-card-grid"] = hasColumn, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-card"] = true, _classNameObj[k + "-shadow"] = type === 'shadow', _classNameObj[k + "-border"] = type === 'border', _classNameObj[k + "-none"] = type === 'none', _classNameObj[k + "-no-header"] = !hasHeader, _classNameObj[k + "-card-grid"] = hasColumn, _classNameObj[k + "-" + size] = size !== 'default', _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)
   }, getRestProps(this)), [hasHeader ? _$ce(2, 'div', (_$blocks['header'] = function ($super) {

package/es/components/card/styles.js

@@ -1,3 +1,4 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
 import { css } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults } from '../../styles/utils';
@@ -5,7 +6,7 @@ import '../../styles/global';
 import { cache } from '../utils';
 var defaults = {
   border: '1px solid #e5e5e5',
-  padding: '16px',
+  padding: '24px',
 
   get boxShadow() {
     return theme.boxShadow;
@@ -17,7 +18,19 @@ var defaults = {
 
   headerHeight: '48px',
   headerFontSize: '14px',
-  bgColor: '#fff'
+  bgColor: '#fff',
+  large: {
+    padding: '32px',
+    headerHeight: '48px'
+  },
+  small: {
+    padding: '16px',
+    headerHeight: '48px'
+  },
+  mini: {
+    padding: '8px',
+    headerHeight: '32px'
+  }
 };
 var card;
 setDefault(function () {
@@ -26,6 +39,12 @@ setDefault(function () {
   }).card;
   makeStyles == null ? void 0 : makeStyles.clearCache();
 });
+var sizes = ['large', 'small', 'mini'];
 export var makeStyles = cache(function makeStyles(k) {
-  return /*#__PURE__*/css("border-radius:", card.borderRadius, ";background:", card.bgColor, ";.", k, "-card-header{height:", card.headerHeight, ";line-height:", card.headerHeight, ";padding:0 ", card.padding, ";}.", k, "-card-title{font-size:", card.headerFontSize, ";display:inline-block;}.", k, "-card-extra{float:right;height:100%;display:flex;align-items:center;}.", k, "-card-body{padding:0 ", card.padding, " ", card.padding, ";}&.", k, "-shadow{box-shadow:", card.boxShadow, ";}&.", k, "-none{box-shadow:none;}&.", k, "-border{border:", card.border, ";.", k, "-card-header{border-bottom:", card.border, ";}.", k, "-card-body{padding-top:", card.padding, ";}}&.", k, "-no-header{.", k, "-card-body{padding-top:", card.padding, ";}}&.", k, "-card-grid{.", k, "-card-body{display:flex;padding:0;}&.", k, "-border{.", k, "-card-column:not(:last-of-type){border-right:", card.border, ";}}}.", k, "-card-column{display:flex;align-items:center;padding:", card.padding, ";&.", k, "-fluid{flex:1;}&.", k, "-center{justify-content:center;}}");
+  return /*#__PURE__*/css("border-radius:", card.borderRadius, ";background:", card.bgColor, ";.", k, "-card-header{height:", card.headerHeight, ";padding:0 ", card.padding, ";display:flex;align-items:center;}.", k, "-card-title{font-size:", card.headerFontSize, ";flex:1;}.", k, "-card-extra{display:flex;align-items:center;}.", k, "-card-body{padding:0 ", card.padding, " ", card.padding, ";}&.", k, "-shadow{box-shadow:", card.boxShadow, ";}&.", k, "-none{box-shadow:none;}&.", k, "-border{border:", card.border, ";.", k, "-card-header{border-bottom:", card.border, ";}.", k, "-card-body{padding-top:", card.padding, ";}}&.", k, "-no-header{.", k, "-card-body{padding-top:", card.padding, ";}}&.", k, "-card-grid{.", k, "-card-body{display:flex;padding:0;}&.", k, "-border{.", k, "-card-column:not(:last-of-type){border-right:", card.border, ";}}}.", k, "-card-column{display:flex;align-items:center;padding:", card.padding, ";&.", k, "-fluid{flex:1;}&.", k, "-center{justify-content:center;}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+    var _card$size = card[size],
+        padding = _card$size.padding,
+        headerHeight = _card$size.headerHeight;
+    return /*#__PURE__*/css("&.", k, "-", size, "{.", k, "-card-header{padding:0 ", padding, ";height:", headerHeight, ";}.", k, "-card-body{padding:0 ", padding, " ", padding, ";}&.", k, "-border,&.", k, "-no-header{.", k, "-card-body{padding-top:", padding, ";}}.", k, "-card-column{padding:", padding, ";}}");
+  }), ";");
 });

package/es/components/carousel/useAutoplay.js

@@ -1,7 +1,7 @@
 import { useInstance, onBeforeUnmount } from 'intact';
 export function useAutoplay(next) {
   var instance = useInstance();
-  var timer;
+  var timer = null;
   var ms;
   instance.on('$receive:autoplay', function (v) {
     if (v === true) {
@@ -24,7 +24,10 @@ export function useAutoplay(next) {
   }
 
   function stop() {
-    window.clearTimeout(timer);
+    if (timer) {
+      window.clearTimeout(timer);
+      timer = null;
+    }
   }
 
   onBeforeUnmount(stop);

package/es/components/cascader/index.d.ts

@@ -0,0 +1,45 @@
+import { TypeDefs } from 'intact';
+import { BaseSelect, BaseSelectProps, BaseSelectEvents, BaseSelectBlocks } from '../select/base';
+export interface CascaderProps<V = any, Multipe extends boolean = boolean, Data extends BaseCascaderData = CascaderData<V>> extends BaseSelectProps<V[], Multipe> {
+    data?: Data[];
+    trigger?: 'click' | 'hover';
+    changeOnSelect?: boolean;
+    format?: (labels: string[]) => string;
+    loadData?: (data: Data) => any;
+    filter?: (keywords: string, data: Data) => boolean;
+    fields?: CascaderFields<Data>;
+}
+export declare type CascaderFields<Data> = {
+    value?: keyof Data;
+    label?: keyof Data;
+    children?: keyof Data;
+    disabled?: keyof Data;
+};
+export interface BaseCascaderData {
+    loaded?: boolean;
+    [key: string]: any;
+}
+export interface CascaderData<V> extends BaseCascaderData {
+    value: V;
+    label: string;
+    children?: CascaderData<V>[];
+    disabled?: boolean;
+}
+export interface CascaderEvents extends BaseSelectEvents {
+}
+export interface CascaderBlocks<V> extends BaseSelectBlocks<V> {
+}
+export declare class Cascader<V = any, Multipe extends boolean = false, Data extends BaseCascaderData = CascaderData<V>> extends BaseSelect<CascaderProps<V, Multipe, Data>, CascaderEvents, CascaderBlocks<V>> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<CascaderProps<any, boolean, CascaderData<any>>>>;
+    static defaults: () => Partial<CascaderProps<any, boolean, CascaderData<any>>>;
+    private fields;
+    private value;
+    private label;
+    private load;
+    private filterable;
+    private positionObj;
+    protected getPlaceholder(): string | number | boolean | import("misstime/dist/utils/types").VNode<any> | import("intact").Children[];
+    protected getLabel(): import("intact").Children;
+    protected hasValue(): any;
+}

package/es/components/datepicker/index.d.ts

@@ -0,0 +1,63 @@
+import { TypeDefs } from 'intact';
+import dayjs from './dayjs';
+import { State } from '../../hooks/useState';
+import { Shortcut } from './shortcuts';
+import { BasePicker, BasePickerProps, BasePickerEvents, BasePickerBlocks, Value } from './basepicker';
+export * as shortcuts from './shortcuts';
+export interface DatepickerProps<V extends Value = Value, M extends boolean = boolean, R extends boolean = boolean> extends BasePickerProps<V extends string ? V : V | string, M, R> {
+    type?: 'date' | 'datetime' | 'year' | 'month';
+    shortcuts?: Shortcut[];
+}
+export interface DatepickerEvents extends BasePickerEvents {
+}
+export interface DatepickerBlocks<V extends Value = Value, R extends boolean = boolean> extends BasePickerBlocks<V, R> {
+}
+export declare class Datepicker<V extends Value = Value, M extends boolean = false, R extends boolean = false> extends BasePicker<DatepickerProps<V, M, R>, DatepickerEvents, DatepickerBlocks<V, R>> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<DatepickerProps<Value, boolean, boolean>>>;
+    static defaults: () => Partial<DatepickerProps<Value, boolean, boolean>>;
+    formats: {
+        getValueFormat: () => string;
+        getShowFormat: () => string;
+        createDateByValueFormat: (value: Value) => dayjs.Dayjs;
+        createDateByShowFormat: (value: string) => dayjs.Dayjs;
+        getShowString: (value: dayjs.Dayjs) => string;
+        getValueString: (value: dayjs.Dayjs) => string;
+    };
+    disabled: {
+        isDisabled: (value: dayjs.Dayjs, type?: dayjs.OpUnitType) => boolean;
+        isDisabledTime: (value: dayjs.Dayjs, flag: import("./usePanel").PanelFlags) => boolean;
+        isDisabledConfirm: () => boolean;
+        maxDate: State<dayjs.Dayjs | null>;
+        minDate: State<dayjs.Dayjs | null>;
+    };
+    panel: {
+        startPanel: State<import("./usePanel").PanelTypes>;
+        endPanel: State<import("./usePanel").PanelTypes>;
+        changePanel: (type: import("./usePanel").PanelTypes, flag?: import("./usePanel").PanelFlags) => void;
+        getPanel: (flag: import("./usePanel").PanelFlags) => State<import("./usePanel").PanelTypes>;
+        reset: () => void;
+        startRef: import("intact").RefObject<import("./calendar").DatepickerCalendar>;
+        endRef: import("intact").RefObject<import("./calendar").DatepickerCalendar>;
+    };
+    focusDate: {
+        focusDate: State<dayjs.Dayjs | null>;
+        reset: () => void;
+    };
+    value: {
+        format: () => string | string[];
+        onConfirm: () => void;
+        onChangeTime: (date: dayjs.Dayjs, flag: import("./usePanel").PanelFlags) => void;
+        getTimeValue: (flag: import("./usePanel").PanelFlags) => dayjs.Dayjs | null | undefined;
+        convertToDayjs: (v: Value | [Value, Value] | Value[] | [Value, Value][] | null | undefined) => import("./basepicker").DayjsValue;
+        getDayjsValue: () => import("./basepicker").DayjsValue;
+        value: State<import("./basepicker").StateValue>;
+        setValue: (v: import("./basepicker").StateValueItem, fromInput: boolean) => void;
+        onChangeDate: (v: dayjs.Dayjs, flag: import("./usePanel").PanelFlags) => void;
+    };
+    init(): void;
+    protected getPlaceholder(): string | number | boolean | import("misstime/dist/utils/types").VNode<any> | import("intact").Children[];
+    protected getLabel(): string | string[];
+    protected clear(e: MouseEvent): void;
+    private setByShortcut;
+}