vxe-pc-ui 0.0.2 → 0.2.0

package/styles/theme/base.scss

@@ -5,6 +5,7 @@ $vxe-ui-status-success-color: #67c23a;
 $vxe-ui-status-info-color: #909399;
 $vxe-ui-status-warning-color: #e6a23c;
 $vxe-ui-status-danger-color: #f56c6c;
+$vxe-ui-status-error-color: #f56c6c;
 
 :root {
   /*font*/
@@ -19,40 +20,55 @@ $vxe-ui-status-danger-color: #f56c6c;
   /*font color*/
   --vxe-ui-font-color: #{$vxe-ui-font-color}; // 全局默认字体颜色
   --vxe-ui-font-primary-color: #{$vxe-ui-font-primary-color}; // 主要字体颜色
+  --vxe-ui-font-primary-lighten-color: #{lighten($vxe-ui-font-primary-color, 10%)};
+  --vxe-ui-font-primary-darken-color: #{darken($vxe-ui-font-primary-color, 10%)};
+  --vxe-ui-font-primary-disabled-color: #{lighten($vxe-ui-font-primary-color, 20%)};
   --vxe-ui-font-secondary-color: #909399; // 次要字体颜色
   --vxe-ui-font-placeholder-color: #a8abb2; // 占位符字体颜色
+  --vxe-ui-font-lighten-color: #{lighten($vxe-ui-font-color, 10%)};
+  --vxe-ui-font-darken-color: #{darken($vxe-ui-font-color, 10%)};
+  --vxe-ui-font-disabled-color: #BFBFBF;
 
   /*base border*/
   --vxe-ui-border-radius: 4px;
 
+  /*input/radio/checkbox*/
+  --vxe-ui-input-border-color: #dcdfe6;
+  --vxe-ui-input-disabled-color: #8D9095;
+  --vxe-ui-input-disabled-background-color: #585656;
+  --vxe-ui-input-placeholder-color: #8D9095;
+
+  /*popup*/
+  --vxe-ui-base-popup-border-color: #424242;
+
   /*base status*/
   --vxe-ui-status-success-color: #{$vxe-ui-status-success-color};
   --vxe-ui-status-info-color: #{$vxe-ui-status-info-color};
   --vxe-ui-status-warning-color: #{$vxe-ui-status-warning-color};
   --vxe-ui-status-danger-color: #{$vxe-ui-status-danger-color};
+  --vxe-ui-status-error-color: #{$vxe-ui-status-error-color};
 
-  --vxe-ui-status-font-lighten-color: #{lighten($vxe-ui-font-color, 10%)};
-  --vxe-ui-status-primary-lighten-color: #{lighten($vxe-ui-font-primary-color, 10%)};
   --vxe-ui-status-success-lighten-color: #{lighten($vxe-ui-status-success-color, 10%)};
   --vxe-ui-status-info-lighten-color: #{lighten($vxe-ui-status-info-color, 10%)};
   --vxe-ui-status-warning-lighten-color: #{lighten($vxe-ui-status-warning-color, 10%)};
   --vxe-ui-status-danger-lighten-color: #{lighten($vxe-ui-status-danger-color, 10%)};
+  --vxe-ui-status-error-lighten-color: #{lighten($vxe-ui-status-error-color, 10%)};
   
-  --vxe-ui-status-font-darken-color: #{darken($vxe-ui-font-color, 10%)};
-  --vxe-ui-status-primary-darken-color: #{darken($vxe-ui-font-primary-color, 10%)};
   --vxe-ui-status-success-darken-color: #{darken($vxe-ui-status-success-color, 10%)};
   --vxe-ui-status-info-darken-color: #{darken($vxe-ui-status-info-color, 10%)};
   --vxe-ui-status-warning-darken-color: #{darken($vxe-ui-status-warning-color, 10%)};
   --vxe-ui-status-danger-darken-color: #{darken($vxe-ui-status-danger-color, 10%)};
+  --vxe-ui-status-error-lighten-color: #{lighten($vxe-ui-status-error-color, 10%)};
   
-  --vxe-ui-status-font-disabled-color: #BFBFBF;
-  --vxe-ui-status-primary-disabled-color: #{lighten($vxe-ui-font-primary-color, 20%)};
   --vxe-ui-status-success-disabled-color: #{lighten($vxe-ui-status-success-color, 20%)};
   --vxe-ui-status-info-disabled-color: #{lighten($vxe-ui-status-info-color, 20%)};
   --vxe-ui-status-warning-disabled-color: #{lighten($vxe-ui-status-warning-color, 20%)};
   --vxe-ui-status-danger-disabled-color: #{lighten($vxe-ui-status-danger-color, 20%)};
+  --vxe-ui-status-error-lighten-color: #{lighten($vxe-ui-status-error-color, 10%)};
 
   /*layout*/
+  --vxe-ui-layout-padding-default: 8px;
+  --vxe-ui-layout-padding-half: calc(var(--vxe-ui-layout-padding-default) / 2);
   --vxe-ui-layout-aside-default-width: 300px;
   --vxe-ui-layout-aside-collapse-width: 60px;
 
@@ -71,6 +87,48 @@ $vxe-ui-status-danger-color: #f56c6c;
   --vxe-ui-button-round-border-radius-small: 15px;
   --vxe-ui-button-round-border-radius-mini: 14px;
 
+  /*input*/
+  --vxe-ui-input-background-color: #fff;
+  --vxe-ui-input-panel-background-color: var(--vxe-ui-input-background-color);
+  --vxe-ui-input-number-disabled-color: #e4e7ed;
+  --vxe-ui-input-date-festival-color: #999999;
+  --vxe-ui-input-date-festival-important-color: var(--vxe-ui-font-primary-color);
+  --vxe-ui-input-date-notice-background-color: #FF0000;
+  --vxe-ui-input-date-picker-hover-background-color: #f2f6fc;
+  --vxe-ui-input-date-picker-selected-color: #fff;
+  --vxe-ui-input-date-time-confirm-button-color: #fff;
+  --vxe-ui-input-date-picker-festival-selected-color: var(--vxe-ui-input-date-picker-selected-color);
+  --vxe-ui-input-date-picker-notice-selected-background-color: var(--vxe-ui-input-date-picker-selected-color);
+  --vxe-ui-input-date-extra-color: #67c23a;
+  --vxe-ui-input-date-extra-important-color: #fd2222;
+  --vxe-ui-input-date-title-height-default: 30px;
+  --vxe-ui-input-date-title-height-medium: 29px;
+  --vxe-ui-input-date-title-height-small: 28px;
+  --vxe-ui-input-date-title-height-mini: 26px;
+  --vxe-ui-input-date-time-week-row-height-default: 38px;
+  --vxe-ui-input-date-time-week-row-height-medium: 36px;
+  --vxe-ui-input-date-time-week-row-height-small: 34px;
+  --vxe-ui-input-date-time-week-row-height-mini: 32px;
+  --vxe-ui-input-date-month-year-row-height-default: 48px;
+  --vxe-ui-input-date-month-year-row-height-medium: 46px;
+  --vxe-ui-input-date-month-year-row-height-small: 44px;
+  --vxe-ui-input-date-month-year-row-height-mini: 42px;
+  --vxe-ui-input-date-quarter-row-height-default: 60px;
+  --vxe-ui-input-date-quarter-row-height-medium: 58px;
+  --vxe-ui-input-date-quarter-row-height-small: 56px;
+  --vxe-ui-input-date-quarter-row-height-mini: 54px;
+  --vxe-ui-input-height-default: var(--vxe-ui-button-height-default);
+  --vxe-ui-input-height-medium: var(--vxe-ui-button-height-medium);
+  --vxe-ui-input-height-small: var(--vxe-ui-button-height-small);
+  --vxe-ui-input-height-mini: var(--vxe-ui-button-height-mini);
+  --vxe-ui-input-count-color: #999;
+  --vxe-ui-input-count-background-color: #fff;
+  --vxe-ui-input-count-error-color: var(--vxe-ui-status-error-color);
+
+  /*textarea*/
+  --vxe-ui-textarea-line-height: 1.5715;
+  --vxe-ui-textarea-background-color: #fff;
+
   // anchor
   --vxe-ui-anchor-link-color: var(--vxe-ui-font-secondary-color);
   --vxe-ui-anchor-link-active-color: var(--vxe-ui-font-primary-color);
@@ -78,4 +136,83 @@ $vxe-ui-status-danger-color: #f56c6c;
   // breadcrumb
   --vxe-ui-breadcrumb-color: var(--vxe-ui-font-secondary-color);
   --vxe-ui-breadcrumb-current-item-color: var(--vxe-ui-font-color);
+
+  /*loading*/
+  --vxe-ui-loading-color: var(--vxe-ui-font-primary-color);
+  --vxe-ui-loading-background-color: rgba(255, 255, 255, 0.5);
+  --vxe-ui-loading-z-index: 999;
+
+  /*tooltip*/
+  --vxe-ui-tooltip-dark-color: #fff;
+  --vxe-ui-tooltip-dark-background-color: #303133;
+  --vxe-ui-tooltip-light-background-color: #fff;
+
+  /*form*/
+  --vxe-ui-form-item-min-height-default: 36px;
+  --vxe-ui-form-item-min-height-medium: 34px;
+  --vxe-ui-form-item-min-height-small: 32px;
+  --vxe-ui-form-item-min-height-mini: 30px;
+  --vxe-ui-form-background-color: #fff;
+  --vxe-ui-form-validate-error-color: var(--vxe-ui-status-error-color);
+  --vxe-ui-form-validate-error-background-color: inherit;
+
+  // design-form
+  --vxe-ui-design-form-widget-item-background-color: #fff;
+  --vxe-ui-design-form-widget-item-hover-background-color: #{lighten($vxe-ui-font-primary-color, 10%)};
+
+  /*modal*/
+  --vxe-ui-modal-header-background-color: #F8F8F8;
+  --vxe-ui-modal-body-background-color: #fff;
+  --vxe-ui-modal-border-color: #ebeef5;
+
+  /*checkbox*/
+  --vxe-ui-checkbox-font-size-default: 15px;
+  --vxe-ui-checkbox-font-size-medium: 14px;
+  --vxe-ui-checkbox-font-size-small: 13px;
+  --vxe-ui-checkbox-font-size-mini: 12px;
+  --vxe-ui-checkbox-checked-width: 0.32em;
+  --vxe-ui-checkbox-checked-height: 0.64em;
+  --vxe-ui-checkbox-indeterminate-width: 0.6em;
+  --vxe-ui-checkbox-indeterminate-height: 2px;
+  --vxe-ui-checkbox-border-width: 2px; 
+  --vxe-ui-checkbox-border-radius: 2px;
+  --vxe-ui-checkbox-icon-background-color: #fff;
+  --vxe-ui-checkbox-checked-icon-border-color: #fff;
+  --vxe-ui-checkbox-indeterminate-icon-background-color: #fff;
+
+  /*radio*/
+  --vxe-ui-radio-font-size-default: 15px;
+  --vxe-ui-radio-font-size-medium: 14px;
+  --vxe-ui-radio-font-size-small: 13px;
+  --vxe-ui-radio-font-size-mini: 12px;
+  --vxe-ui-radio-border-width: 0.32em;
+  --vxe-ui-radio-icon-background-color: #fff;
+  --vxe-ui-radio-checked-icon-background-color: #fff;
+  --vxe-ui-radio-indeterminate-icon-background-color: #fff;
+  --vxe-ui-radio-button-default-background-color: #fff;
+
+  /*select*/
+  --vxe-ui-select-option-height-default: 30px;
+  --vxe-ui-select-option-height-medium: 28px;
+  --vxe-ui-select-option-height-small: 26px;
+  --vxe-ui-select-option-height-mini: 24px;
+  --vxe-ui-select-option-hover-background-color: #f5f7fa;
+  --vxe-ui-select-panel-background-color: #fff;
+  --vxe-ui-select-empty-color: #C0C4CC;
+  --vxe-optgroup-title-color: #909399;
+
+  /*switch*/
+  --vxe-ui-switch-font-color: #fff;
+  --vxe-ui-switch-icon-background-color: #fff;
+  --vxe-ui-switch-open-background-color: var(--vxe-ui-font-primary-color);
+  --vxe-ui-switch-close-background-color: rgba(0,0,0,0.35);
+  --vxe-ui-switch-disabled-background-color: rgba(0,0,0,0.15) ;
+
+  /*pulldown*/
+  --vxe-ui-pulldown-panel-background-color: #fff;
+
+  /*pager*/
+  --vxe-ui-pager-background-color: #fff;
+  --vxe-ui-pager-perfect-background-color: #fff;
+  --vxe-ui-pager-perfect-button-background-color: #f4f4f5;
 }

package/types/all.d.ts

@@ -1,20 +1,28 @@
 import { App } from 'vue'
 import { VxeUIExport, VxeGlobalConfig } from './ui'
-import VxeIcon from './component/icon'
-import VxeLayoutContainer from './component/layout-container'
-import VxeLayoutHeader from './component/layout-header'
-import VxeLayoutAside from './component/layout-aside'
-import VxeLayoutBody from './component/layout-body'
-import VxeLayoutFooter from './component/layout-footer'
-import VxeRow from './component/row'
-import VxeCol from './component/col'
-import VxeBreadcrumb from './component/breadcrumb'
-import VxeBreadcrumbItem from './component/breadcrumb-item'
-import VxeButton from './component/button'
-import VxeButtonGroup from './component/button-group'
-import VxeAnchor from './component/anchor'
-import VxeAnchorLink from './component/anchor-link'
-import VxeDesign from './component/design'
+
+import VxeIcon from './components/icon'
+import VxeLayoutContainer from './components/layout-container'
+import VxeLayoutHeader from './components/layout-header'
+import VxeLayoutAside from './components/layout-aside'
+import VxeLayoutBody from './components/layout-body'
+import VxeLayoutFooter from './components/layout-footer'
+import VxeRow from './components/row'
+import VxeCol from './components/col'
+import VxeBreadcrumb from './components/breadcrumb'
+import VxeBreadcrumbItem from './components/breadcrumb-item'
+import VxeButton from './components/button'
+import VxeButtonGroup from './components/button-group'
+import VxeAnchor from './components/anchor'
+import VxeAnchorLink from './components/anchor-link'
+import VxeLoading from './components/loading'
+import VxeTooltip from './components/tooltip'
+import VxeForm from './components/form'
+import VxeFormItem from './components/form-item'
+import VxeFormGather from './components/form-gather'
+import VxeFormDesign from './components/form-design'
+import VxeListDesign from './components/list-design'
+import VxeModal from './components/modal'
 
 export function install (app: App, options?: VxeGlobalConfig): void
 
@@ -34,9 +42,14 @@ declare module '@vue/runtime-core' {
     VxeButtonGroup: typeof VxeButtonGroup
     VxeAnchor: typeof VxeAnchor
     VxeAnchorLink: typeof VxeAnchorLink
-    VxeButton: typeof Button
-    VxeButtonGroup: typeof ButtonGroup
-    VxeDesign: typeof VxeDesign
+    VxeLoading: typeof VxeLoading
+    VxeTooltip: typeof VxeTooltip
+    VxeForm: typeof VxeForm
+    VxeFormItem: typeof VxeFormItem
+    VxeFormGather: typeof VxeFormGather
+    VxeFormDesign: typeof VxeFormDesign
+    VxeListDesign: typeof VxeListDesign
+    VxeModal: typeof VxeModal
   }
 }
 
@@ -50,18 +63,40 @@ export * from './tool'
 export * from './ui'
 
 // Components
-export * from './component/icon'
-export * from './component/layout-container'
-export * from './component/layout-header'
-export * from './component/layout-aside'
-export * from './component/layout-body'
-export * from './component/layout-footer'
-export * from './component/row'
-export * from './component/col'
-export * from './component/breadcrumb'
-export * from './component/breadcrumb-item'
-export * from './component/button'
-export * from './component/button-group'
-export * from './component/anchor'
-export * from './component/anchor-link'
-export * from './component/design'
+export * from './components/anchor'
+export * from './components/anchor-link'
+export * from './components/breadcrumb'
+export * from './components/breadcrumb-item'
+export * from './components/button'
+export * from './components/button-group'
+export * from './components/checkbox'
+export * from './components/checkbox-group'
+export * from './components/col'
+export * from './components/form'
+export * from './components/form-design'
+export * from './components/form-gather'
+export * from './components/form-item'
+export * from './components/icon'
+export * from './components/input'
+export * from './components/layout-aside'
+export * from './components/layout-body'
+export * from './components/layout-container'
+export * from './components/layout-footer'
+export * from './components/layout-header'
+export * from './components/list-design'
+export * from './components/loading'
+export * from './components/modal'
+export * from './components/optgroup'
+export * from './components/option'
+export * from './components/pager'
+export * from './components/pulldown'
+export * from './components/radio'
+export * from './components/radio-button'
+export * from './components/radio-group'
+export * from './components/row'
+export * from './components/select'
+export * from './components/switch'
+export * from './components/tab-pane'
+export * from './components/tabs'
+export * from './components/textarea'
+export * from './components/tooltip'

package/types/{component → components}/anchor-link.d.ts

@@ -1,9 +1,11 @@
-import { RenderFunction, SetupContext, Ref } from 'vue'
+import { RenderFunction, SetupContext, Ref, ComponentPublicInstance } from 'vue'
 import { defineVxeComponent, VxeComponentBase, VxeComponentEvent } from '../tool'
 
 /* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
 
-declare const VxeAnchorLink: defineVxeComponent<VxeAnchorLinkProps, VxeAnchorLinkEventProps>
+export declare const VxeAnchorLink: defineVxeComponent<VxeAnchorLinkProps, VxeAnchorLinkEventProps>
+
+export type VxeAnchorLinkInstance = ComponentPublicInstance<VxeAnchorLinkProps, VxeAnchorLinkConstructor>
 
 export interface VxeAnchorLinkConstructor extends VxeComponentBase, VxeAnchorLinkMethods {
   props: VxeAnchorLinkProps
@@ -68,7 +70,20 @@ export interface VxeAnchorLinkListeners { }
 
 export namespace VxeAnchorLinkEvents { }
 
+export namespace VxeAnchorLinkSlotTypes {
+  export interface DefaultSlotParams {}
+  export interface SubSlotParams {}
+}
 export interface VxeAnchorLinkSlots {
+  /**
+   * 自定义显示内容模板
+   */
+  default: (params: VxeAnchorLinkSlotTypes.DefaultSlotParams) => any
+  /**
+   * 自定义子项模板
+   */
+  sub: (params: VxeAnchorLinkSlotTypes.SubSlotParams) => any
 }
 
+export const AnchorLink: typeof VxeAnchorLink
 export default VxeAnchorLink

package/types/{component → components}/anchor.d.ts

@@ -1,10 +1,12 @@
-import { RenderFunction, SetupContext, Ref } from 'vue'
+import { RenderFunction, SetupContext, Ref, ComponentPublicInstance } from 'vue'
 import { defineVxeComponent, VxeComponentBase, VxeComponentEvent, ValueOf } from '../tool'
 import { VxeAnchorLinkProps, VxeAnchorLinkPropTypes, VxeAnchorLinkDefines } from './anchor-link'
 
 /* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
 
-declare const VxeAnchor: defineVxeComponent<VxeAnchorProps, VxeAnchorEventProps>
+export declare const VxeAnchor: defineVxeComponent<VxeAnchorProps, VxeAnchorEventProps>
+
+export type VxeAnchorInstance = ComponentPublicInstance<VxeAnchorProps, VxeAnchorConstructor>
 
 export interface VxeAnchorConstructor extends VxeComponentBase, VxeAnchorMethods {
   props: VxeAnchorProps
@@ -73,7 +75,13 @@ export interface VxeAnchorListeners { }
 
 export namespace VxeAnchorEvents { }
 
+export namespace VxeAnchorSlotTypes {
+  export interface DefaultSlotParams {}
+}
+
 export interface VxeAnchorSlots {
+  default: (params: VxeAnchorSlotTypes.DefaultSlotParams) => any
 }
 
+export const Anchor: typeof VxeAnchor
 export default VxeAnchor

package/types/{component → components}/breadcrumb-item.d.ts

@@ -3,7 +3,9 @@ import { defineVxeComponent, VxeComponentBase, VxeComponentEvent } from '../tool
 
 /* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
 
-declare const VxeBreadcrumbItem: defineVxeComponent<VxeBreadcrumbItemProps, VxeBreadcrumbItemEventProps>
+export declare const VxeBreadcrumbItem: defineVxeComponent<VxeBreadcrumbItemProps, VxeBreadcrumbItemEventProps>
+
+export type VxeBreadcrumbItemInstance = ComponentPublicInstance<VxeBreadcrumbItemProps, VxeBreadcrumbItemConstructor>
 
 export interface VxeBreadcrumbItemConstructor extends VxeComponentBase, VxeBreadcrumbItemMethods {
   props: VxeBreadcrumbItemProps
@@ -52,7 +54,16 @@ export interface VxeBreadcrumbItemListeners { }
 
 export namespace VxeBreadcrumbItemEvents { }
 
+export namespace VxeBreadcrumbItemSlotTypes {
+  export interface DefaultSlotParams {}
+}
+
 export interface VxeBreadcrumbItemSlots {
+  /**
+   * 自定义显示内容模板
+   */
+  default: (params: VxeBreadcrumbItemSlotTypes.DefaultSlotParams) => any
 }
 
+export const BreadcrumbItem: typeof VxeBreadcrumbItem
 export default VxeBreadcrumbItem

package/types/{component → components}/breadcrumb.d.ts

@@ -1,9 +1,11 @@
-import { RenderFunction, SetupContext, Ref } from 'vue'
+import { RenderFunction, SetupContext, Ref, ComponentPublicInstance } from 'vue'
 import { defineVxeComponent, VxeComponentBase, VxeComponentEvent } from '../tool'
 
 /* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
 
-declare const VxeBreadcrumb: defineVxeComponent<VxeBreadcrumbProps, VxeBreadcrumbEventProps>
+export declare const VxeBreadcrumb: defineVxeComponent<VxeBreadcrumbProps, VxeBreadcrumbEventProps>
+
+export type VxeBreadcrumbInstance = ComponentPublicInstance<VxeBreadcrumbProps, VxeBreadcrumbConstructor>
 
 export interface VxeBreadcrumbConstructor extends VxeComponentBase, VxeBreadcrumbMethods {
   props: VxeBreadcrumbProps
@@ -55,7 +57,13 @@ export interface VxeBreadcrumbListeners { }
 
 export namespace VxeBreadcrumbEvents { }
 
+export namespace VxeBreadcrumbSlotTypes {
+  export interface DefaultSlotParams {}
+}
+
 export interface VxeBreadcrumbSlots {
+  default: (params: VxeBreadcrumbSlotTypes.DefaultSlotParams) => any
 }
 
+export const Breadcrumb: typeof VxeBreadcrumb
 export default VxeBreadcrumb

package/types/{component → components}/button-group.d.ts

@@ -1,10 +1,12 @@
-import { RenderFunction, SetupContext, Ref } from 'vue'
-import { defineVxeComponent, VxeComponentBase, VxeComponentSize, VxeComponentEvent } from '../tool'
+import { RenderFunction, SetupContext, Ref, ComponentPublicInstance } from 'vue'
+import { defineVxeComponent, VxeComponentBase, VxeComponentSize, VxeComponentEvent, ValueOf } from '../tool'
 import { VxeButtonProps, VxeButtonPropTypes } from './button'
 
 /* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
 
-declare const VxeButtonGroup: defineVxeComponent<VxeButtonGroupProps, VxeButtonGroupEventProps>
+export declare const VxeButtonGroup: defineVxeComponent<VxeButtonGroupProps, VxeButtonGroupEventProps>
+
+export type VxeButtonGroupInstance = ComponentPublicInstance<VxeButtonGroupProps, VxeButtonGroupConstructor>
 
 export interface VxeButtonGroupConstructor extends VxeComponentBase, VxeButtonGroupMethods {
   props: VxeButtonGroupProps
@@ -80,7 +82,13 @@ export interface VxeButtonGroupListeners { }
 
 export namespace VxeButtonGroupEvents { }
 
+export namespace VxeButtonGroupSlotTypes {
+  export interface DefaultSlotParams {}
+}
+
 export interface VxeButtonGroupSlots {
+  default: (params: VxeButtonGroupSlotTypes.DefaultSlotParams) => any
 }
 
+export const ButtonGroup: typeof VxeButtonGroup
 export default VxeButtonGroup

package/types/{component → components}/button.d.ts

@@ -1,9 +1,11 @@
 import { RenderFunction, SetupContext, Ref } from 'vue'
-import { defineVxeComponent, VxeComponentBase, VxeComponentEvent, VxeComponentSize, ValueOf } from '../tool'
+import { defineVxeComponent, VxeComponentBase, VxeComponentEvent, VxeComponentSize, VxeComponentStyle, ValueOf } from '../tool'
 
 /* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
 
-declare const VxeButton: defineVxeComponent<VxeButtonProps, VxeButtonEventProps>
+export declare const VxeButton: defineVxeComponent<VxeButtonProps, VxeButtonEventProps>
+
+export type VxeButtonInstance = ComponentPublicInstance<VxeButtonProps, VxeButtonConstructor>
 
 export interface VxeButtonConstructor extends VxeComponentBase, VxeButtonMethods {
   props: VxeButtonProps
@@ -108,7 +110,7 @@ export interface ButtonReactData {
   showPanel: boolean
   animatVisible: boolean
   panelIndex: number
-  panelStyle: VNodeStyle
+  panelStyle: VxeComponentStyle
   panelPlacement: any
 }
 
@@ -151,7 +153,16 @@ export interface VxeButtonListeners { }
 
 export namespace VxeButtonEvents { }
 
+export namespace VxeButtonSlotTypes {
+  export interface DefaultSlotParams {}
+}
+
 export interface VxeButtonSlots {
+  /**
+   * 自定义显示内容模板
+   */
+  default: (params: VxeButtonSlotTypes.DefaultSlotParams) => any
 }
 
+export const Button: typeof VxeButton
 export default VxeButton

package/types/components/checkbox-group.d.ts

@@ -0,0 +1,112 @@
+import { RenderFunction, SetupContext, Ref, ComponentPublicInstance } from 'vue'
+import { defineVxeComponent, VxeComponentBase, VxeComponentEvent, VxeComponentSize, ValueOf } from '../tool'
+
+/* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
+
+export declare const VxeCheckboxGroup: defineVxeComponent<VxeCheckboxGroupProps, VxeCheckboxGroupEventProps>
+
+export type VxeCheckboxGroupInstance = ComponentPublicInstance<VxeCheckboxGroupProps, VxeCheckboxGroupConstructor>
+
+export interface VxeCheckboxGroupConstructor extends VxeComponentBase, VxeCheckboxGroupMethods {
+  props: VxeCheckboxGroupProps
+  context: SetupContext<VxeCheckboxGroupEmits>
+  reactData: CheckboxGroupReactData
+  getRefMaps(): CheckboxGroupPrivateRef
+  getComputeMaps(): CheckboxGroupPrivateComputed
+  renderVN: RenderFunction
+}
+
+export interface CheckboxGroupPrivateRef {
+  refElem: Ref<HTMLDivElement | undefined>
+}
+export interface VxeCheckboxGroupPrivateRef extends CheckboxGroupPrivateRef { }
+
+export namespace VxeCheckboxGroupPropTypes {
+  export type Size = VxeComponentSize
+  export type ModelValue = any[]
+  export type Options = {
+    value?: VxeCheckboxPropTypes.Label
+    label?: VxeCheckboxPropTypes.Content
+
+    [key: string]: any
+  }[]
+  export type OptionProps = VxeGlobalRendererHandles.RenderOptionProps
+  export type Max = string | number
+  export type Disabled = boolean
+}
+
+export type VxeCheckboxGroupProps = {
+  size?: VxeCheckboxGroupPropTypes.Size
+  options?: VxeCheckboxGroupPropTypes.Options
+  optionProps?: VxeCheckboxGroupPropTypes.OptionProps
+  /**
+   * 绑定值
+   */
+  modelValue?: VxeCheckboxGroupPropTypes.ModelValue
+  max?: VxeCheckboxGroupPropTypes.Max
+  /**
+   * 是否禁用
+   */
+  disabled?: VxeCheckboxGroupPropTypes.Disabled
+}
+
+export interface CheckboxGroupPrivateComputed {
+  computeIsMaximize: ComputedRef<boolean>
+}
+export interface VxeCheckboxGroupPrivateComputed extends CheckboxGroupPrivateComputed { }
+
+export interface CheckboxGroupReactData {
+}
+
+export interface CheckboxGroupMethods {
+  dispatchEvent(type: ValueOf<VxeCheckboxGroupEmits>, params: any, evnt: Event): void
+}
+export interface VxeCheckboxGroupMethods extends CheckboxGroupMethods { }
+
+export interface CheckboxGroupPrivateMethods {
+  handleChecked(params: {
+    checked: boolean
+    value: VxeCheckboxPropTypes.ModelValue
+    label: VxeCheckboxPropTypes.Label
+  }, evnt: Event): void
+}
+export interface VxeCheckboxGroupPrivateMethods extends CheckboxGroupPrivateMethods { }
+
+export type VxeCheckboxGroupEmits = [
+  'update:modelValue',
+  'change'
+]
+
+export namespace VxeCheckboxGroupDefines {
+  export interface CheckboxGroupEventParams extends VxeComponentEvent {
+    $checkboxGroup: VxeCheckboxGroupConstructor
+  }
+
+  export type ChangeParams = {
+    checklist: any[]
+  }
+  export interface ChangeEventParams extends CheckboxGroupEventParams, ChangeParams { }
+}
+
+export type VxeCheckboxGroupEventProps = {
+  onChange?: VxeCheckboxGroupEvents.Change
+}
+
+export interface VxeCheckboxGroupListeners {
+  change?: VxeCheckboxGroupEvents.Change
+}
+
+export namespace VxeCheckboxGroupEvents { }
+
+export namespace VxeCheckboxGroupSlotTypes {
+  export interface DefaultSlotParams {
+    [key: string]: any
+  }
+}
+
+export interface VxeCheckboxGroupSlots {
+  default: (params: VxeCheckboxGroupSlotTypes.DefaultSlotParams) => any
+}
+
+export const CheckboxGroup: typeof VxeCheckboxGroup
+export default VxeCheckboxGroup