feat(ui/types): 提供jsx,tsx支持.完成以下组件button,checkbox,checkboxGroup,col,c…

…ounter,dialog,form,icon,image,i affects: @varlet/ui
varletjs · Apr 24, 2021 · 8818998 · 8818998
1 parent bffb0fb
commit 8818998
Show file tree

Hide file tree

Showing 25 changed files with 513 additions and 48 deletions.
diff --git a/packages/varlet-ui/src/tabs/props.ts b/packages/varlet-ui/src/tabs/props.ts
@@ -14,12 +14,12 @@ export const props = {
   layoutDirection: {
     type: String,
     default: 'horizontal',
-    validator: directionValidator
+    validator: directionValidator,
   },
   itemDirection: {
-	  type: String,
+    type: String,
     default: 'horizontal',
-    validator: directionValidator
+    validator: directionValidator,
   },
   fixedBottom: {
     type: Boolean,
@@ -55,7 +55,6 @@ export const props = {
   onClick: {
     type: Function as PropType<(active: string | number) => void>,
   },
-  // 激活标签切换事件
   onChange: {
     type: Function as PropType<(active: string | number) => void>,
   },

diff --git a/packages/varlet-ui/types/button.d.ts b/packages/varlet-ui/types/button.d.ts
@@ -1,3 +1,24 @@
 import { VarComponent } from './varComponent'
 
-export class Button extends VarComponent {}
+interface ButtonProps {
+  type?: 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger'
+  size?: 'normal' | 'mini' | 'small' | 'large'
+  loading?: boolean
+  round?: boolean
+  block?: boolean
+  text?: boolean
+  outline?: boolean
+  disabled?: boolean
+  ripple?: boolean
+  color?: string
+  textColor?: string
+  loadingRadius?: string | number
+  loadingType?: 'circle' | 'wave' | 'cube' | 'rect' | 'disappear'
+  loadingSize?: 'normal' | 'mini' | 'small' | 'large'
+  onClick?: (e: Event) => void
+  onTouchstart?: (e: Event) => void
+}
+
+export class Button extends VarComponent {
+  $props: ButtonProps
+}
diff --git a/packages/varlet-ui/types/checkbox.d.ts b/packages/varlet-ui/types/checkbox.d.ts
@@ -1,3 +1,32 @@
 import { VarComponent } from './varComponent'
 
-export class Checkbox extends VarComponent {}
+type ValidateTriggers = 'onChange'
+
+interface CheckboxProps {
+  modelValue?: any
+  checkedValue?: any
+  uncheckedValue?: any
+  checkedColor?: string
+  uncheckedColor?: string
+  disabled?: boolean
+  readonly?: boolean
+  iconSize?: string | number
+  ripple?: boolean
+  validateTrigger?: Array<ValidateTriggers>
+  rules?: Array<(value: any) => any>
+  onClick?: (e: Event) => void
+  onChange?: (value: any) => void
+  'onUpdate:modelValue'?: (value: any) => void
+}
+
+export class Checkbox extends VarComponent {
+  $props: CheckboxProps
+
+  validate(): Promise<boolean>
+
+  resetValidation(): void
+
+  reset(): void
+
+  toggle(value: any): void
+}
diff --git a/packages/varlet-ui/types/checkboxGroup.d.ts b/packages/varlet-ui/types/checkboxGroup.d.ts
@@ -1,3 +1,27 @@
 import { VarComponent } from './varComponent'
 
-export class CheckboxGroup extends VarComponent {}
+export type ValidateTriggers = 'onChange'
+
+interface CheckboxGroupProps {
+  modelValue?: any[]
+  max?: string | number
+  direction?: 'horizontal' | 'vertical'
+  validateTrigger?: Array<ValidateTriggers>
+  rules?: Array<(value: any) => any>
+  onChange?: (value: Array<any>) => void
+  'onUpdate:modelValue'?: (value: Array<any>) => void
+}
+
+export class CheckboxGroup extends VarComponent {
+  $props: CheckboxGroupProps
+
+  validate(): Promise<boolean>
+
+  resetValidation(): void
+
+  reset(): void
+
+  checkAll(): any
+
+  inverseAll(): any
+}
diff --git a/packages/varlet-ui/types/col.d.ts b/packages/varlet-ui/types/col.d.ts
@@ -1,3 +1,11 @@
-import { VarComponent } from './varComponent';
+import { VarComponent } from './varComponent'
 
-export class Col extends VarComponent {}
+interface ColProps {
+  span?: string | number
+  offset?: string | number
+  onClick?: (e: Event) => void
+}
+
+export class Col extends VarComponent {
+  $props: ColProps
+}
diff --git a/packages/varlet-ui/types/counter.d.ts b/packages/varlet-ui/types/counter.d.ts
@@ -1,3 +1,42 @@
 import { VarComponent } from './varComponent'
 
-export class Counter extends VarComponent {}
+export type ValidateTriggers = 'onIncrement' | 'onDecrement' | 'onInputChange' | 'onLazyChange'
+
+interface CounterProps {
+  modelValue?: string | number
+  min?: string | number
+  max?: string | number
+  step?: string | number
+  color?: string
+  inputWidth?: string | number
+  inputTextSize?: string | number
+  buttonSize?: string | number
+  decimalLength?: string | number
+  disabled?: boolean
+  readonly?: boolean
+  disableIncrement?: boolean
+  disableDecrement?: boolean
+  disableInput?: boolean
+  lazyChange?: boolean
+  incrementButton?: boolean
+  decrementButton?: boolean
+  press?: boolean
+  ripple?: boolean
+  validateTrigger?: Array<ValidateTriggers>
+  rules?: Array<(v: number) => any>
+  onBeforeChange?: (value: number, change: (value: string | number) => void) => void
+  onChange?: (value: number) => void
+  onIncrement?: (value: number) => void
+  onDecrement?: (value: number) => void
+  'onUpdate:modelValue'?: (value: number) => void
+}
+
+export class Counter extends VarComponent {
+  $props: CounterProps
+
+  validate(): Promise<boolean>
+
+  resetValidation(): void
+
+  reset(): void
+}
diff --git a/packages/varlet-ui/types/dialog.d.ts b/packages/varlet-ui/types/dialog.d.ts
@@ -1,16 +1,46 @@
 import { App, Component } from 'vue'
 import { VarComponent } from './varComponent'
 
+interface DialogProps {
+  show?: boolean
+  title?: string
+  message?: string
+  messageAlign?: 'left' | 'center' | 'right'
+  confirmButton?: boolean
+  cancelButton?: boolean
+  confirmButtonText?: string
+  cancelButtonText?: string
+  confirmButtonTextColor?: string
+  cancelButtonTextColor?: string
+  confirmButtonColor?: string
+  cancelButtonColor?: string
+  overlay?: boolean
+  overlayClass?: string
+  overlayStyle?: Record<string, any>
+  lockScroll?: boolean
+  closeOnClickOverlay?: boolean
+  teleport?: boolean
+  onOpen?: () => void
+  onOpened?: () => void
+  onBeforeClose?: (action: DialogActions, done: () => void) => void
+  onClose?: () => void
+  onClosed?: () => void
+  onConfirm?: () => void
+  onCancel?: () => void
+  onClickOverlay?: () => void
+  'onUpdate:show': (show: boolean) => void
+}
+
 export class DialogComponent extends VarComponent {
-  static Component: Component
+  $props: DialogProps
 }
 
 export type DialogActions = 'confirm' | 'cancel' | 'close'
 
 export interface DialogOptions {
   title?: string
   message?: string
-  messageAlign?: string
+  messageAlign?: 'left' | 'center' | 'right'
   confirmButton?: boolean
   cancelButton?: boolean
   confirmButtonText?: string
@@ -26,7 +56,7 @@ export interface DialogOptions {
   closeOnClickOverlay?: boolean
   onOpen?: () => void
   onOpened?: () => void
-  onBeforeClose?: (done: () => void) => void
+  onBeforeClose?: (action: DialogActions, done: () => void) => void
   onClose?: () => void
   onClosed?: () => void
   onConfirm?: () => void
@@ -36,9 +66,11 @@ export interface DialogOptions {
 
 export interface IDialog {
   (options: DialogOptions | string): Promise<DialogActions>
-  install(app: App): void
+  Component: typeof DialogComponent
+
   close(): void
-  Component: DialogComponent
+
+  install(app: App): void
 }
 
 export const Dialog: IDialog
diff --git a/packages/varlet-ui/types/form.d.ts b/packages/varlet-ui/types/form.d.ts
@@ -1,3 +1,16 @@
 import { VarComponent } from './varComponent'
 
-export class Form extends VarComponent {}
+interface FormProps {
+  disabled?: boolean
+  readonly?: boolean
+}
+
+export class Form extends VarComponent {
+  $props: FormProps
+
+  validate(): Promise<boolean>
+
+  resetValidation(): void
+
+  reset(): void
+}
diff --git a/packages/varlet-ui/types/icon.d.ts b/packages/varlet-ui/types/icon.d.ts
@@ -1,3 +1,14 @@
 import { VarComponent } from './varComponent'
 
-export class Icon extends VarComponent {}
+interface IconProps {
+  name?: string
+  size?: string | number
+  color?: string
+  namespace?: string
+  transition?: string | number
+  onClick?: () => (event: Event) => void
+}
+
+export class Icon extends VarComponent {
+  $props: IconProps
+}
diff --git a/packages/varlet-ui/types/image.d.ts b/packages/varlet-ui/types/image.d.ts
@@ -1,3 +1,20 @@
-import { VarComponent } from './varComponent';
+import { VarComponent } from './varComponent'
+
+interface ImageProps {
+  src?: string
+  fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
+  alt?: string
+  width?: string | number
+  height?: string | number
+  radius?: string | number
+  loading?: string
+  error?: string
+  lazy?: boolean
+  ripple?: boolean
+  block?: boolean
+  onClick?: (e: Event) => void
+  onLoad?: (e: Event) => void
+  onError?: (e: Event) => void
+}
 
 export class Image extends VarComponent {}
diff --git a/packages/varlet-ui/types/input.d.ts b/packages/varlet-ui/types/input.d.ts
@@ -1,3 +1,43 @@
 import { VarComponent } from './varComponent'
 
-export class Input extends VarComponent {}
+type ValidateTriggers = 'onFocus' | 'onBlur' | 'onChange' | 'onClick' | 'onClear' | 'onInput'
+
+interface InputProps {
+  modelValue?: string | number
+  type?: 'text' | 'password'
+  textarea?: boolean
+  rows?: string | number
+  placeholder?: string
+  hint?: boolean
+  textColor?: string
+  focusColor?: string
+  blurColor?: string
+  maxlength?: string | number
+  disabled?: boolean
+  readonly?: boolean
+  clearable?: boolean
+  resize?: boolean
+  validateTrigger?: ValidateTriggers[]
+  rules?: Array<(v: string | number) => any>
+  onFocus?: (e: Event) => void
+  onBlur?: (e: Event) => void
+  onClick?: (e: Event) => void
+  onClear?: (value: string | number) => void
+  onInput?: (value: string | number, e: Event) => void
+  onChange?: (value: string | number, e: Event) => void
+  'onUpdate:modelValue': (value: string | number) => void
+}
+
+export class Input extends VarComponent {
+  $props: InputProps
+
+  focus(): void
+
+  blur(): void
+
+  validate(): Promise<boolean>
+
+  resetValidation(): void
+
+  reset(): void
+}
diff --git a/packages/varlet-ui/types/menu.d.ts b/packages/varlet-ui/types/menu.d.ts
@@ -1,3 +1,19 @@
-import { VarComponent } from './varComponent';
+import { VarComponent } from './varComponent'
 
-export class Menu extends VarComponent {}
+interface MenuProps {
+  show?: boolean
+  alignment?: 'top' | 'bottom'
+  offsetX?: string | number
+  offsetY?: string | number
+  onOpen?: () => void
+  onOpened?: () => void
+  onClose?: () => void
+  onClosed?: () => void
+  'onUpdate:show': (show: boolean) => void
+}
+
+export class Menu extends VarComponent {
+  $props: MenuProps
+
+  resize(): void
+}
diff --git a/packages/varlet-ui/types/option.d.ts b/packages/varlet-ui/types/option.d.ts
@@ -1,3 +1,10 @@
 import { VarComponent } from './varComponent'
 
-export class Option extends VarComponent {}
+interface OptionProps {
+  label?: any
+  value?: any
+}
+
+export class Option extends VarComponent {
+  $props: OptionProps
+}