types(BfForm): Adding BfForm types

src/App.vue

@@ -4,12 +4,10 @@ import { ElConfigProvider } from 'element-plus'
 import zhCn from 'element-plus/lib/locale/lang/zh-cn'
 // import en from 'element-plus/lib/locale/lang/en'
 import { BfFrom, BfFormExpose } from '@/components/Form'
-const formRef = ref<InstanceType<typeof BfFrom> & BfFormExpose>()
+const formRef = ref<ComponentRef<typeof BfFrom> & BfFormExpose>()
 
 onMounted(() => {
   const form = unref(formRef.value)
-  console.log(form?.count)
-  form?.sayHello()
   console.log(form?.$el)
 
   const schema: BfFormSchema = [

src/components/index.ts

@@ -1,6 +0,0 @@
-import type { App } from 'vue'
-import { BfFrom } from './Form'
-
-export function setupGlobCom(app: App<Element>) {
-  app.component('BfFrom', BfFrom)
-}

src/main.ts

@@ -7,10 +7,6 @@ const app = createApp(App)
 // 引入windi css
 import '@/plugins/windicss'
 
-// 引入全局组件
-import { setupGlobCom } from '@/components'
-setupGlobCom(app)
-
 // 引入多语言
 import { setupI18n } from '@/plugins/i18n'
 setupI18n(app)

src/types/components-type.d.ts

@@ -19,8 +19,6 @@ declare global {
     | 'Transfer'
     | 'Divider'
 
-  declare type FormComponentSize = 'large' | 'medium' | 'small' | 'mini'
-
   declare type ColProps = {
     span?: number
     xs?: number
@@ -74,6 +72,7 @@ declare global {
   declare type RadioProps = {
     border?: boolean
     name?: string
+    disabled?: boolean
     onChange?: ChangeEvent
   }
 
@@ -81,6 +80,7 @@ declare global {
     border?: boolean
     name?: string
     indeterminate?: boolean
+    disabled?: boolean
     checked?: boolean
     onChange?: ChangeEvent
   }
@@ -92,6 +92,7 @@ declare global {
     showWordLimit?: boolean
     placeholder?: string
     clearable?: boolean
+    disabled?: boolean
     showPassword?: boolean
     prefixIcon?: string | Component
     suffixIcon?: string | Component
@@ -122,6 +123,7 @@ declare global {
     placeholder?: string
     clearable?: boolean
     valueKey?: string
+    disabled?: boolean
     icon?: string | Component
     debounce?: number
     placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'
@@ -152,20 +154,20 @@ declare global {
     step?: number
     stepStrictly?: boolean
     precision?: number
-    size?: FormComponentSize
     controls?: boolean
     controlsPosition?: 'top' | 'right'
     name?: string
     label?: string
+    disabled?: boolean
     placeholder?: string
   }
 
   declare type SelectProps = {
     multiple?: boolean
     valueKey?: string
-    size?: FormComponentSize
     clearable?: boolean
     collapseTags?: boolean
+    disabled?: boolean
     multipleLimit?: number
     name?: string
     autocomplete?: string
@@ -206,7 +208,168 @@ declare global {
         }
   }
 
-  declare type CascaderProps = {}
+  declare type CascaderProps = {
+    props?: {
+      expandTrigger?: 'click' | 'hover'
+      multiple?: boolean
+      checkStrictly?: boolean
+      emitPath?: boolean
+      lazy?: boolean
+      lazyLoad?: (node: Recordable, resolve: Fn) => void
+      value?: string
+      label?: string
+      children?: string
+      disabled?: string
+      leaf?: string
+    }
+    placeholder?: string
+    disabled?: boolean
+    clearable?: boolean
+    showAllLevels?: boolean
+    collapseTags?: boolean
+    separator?: string
+    filterable?: boolean
+    filterMethod?: (node: Recordable, keyword: string | number) => boolean
+    debounce?: number
+    beforeFilter?: (value: string) => boolean | PromiseRejectedResult
+    popperClass?: string
+    popperAppendToBody?: boolean
+    onChange?: ChangeEvent
+    onExpandChange?: (parents: Recordable) => viod
+    onBlur?: BlurOrFocusEvent
+    onFocus?: BlurOrFocusEvent
+    onVisiblechange?: (val: boolean) => void
+    onRemoveTag?: (data: Recordable) => viod
+    slots?: {
+      default?: boolean
+      empty?: boolean
+    }
+  }
+
+  declare type SwitchProps = {
+    disabled?: boolean
+    loading?: boolean
+    width?: number
+    inlinePrompt?: boolean
+    activeIcon?: string | Component
+    inactiveIcon?: string | Component
+    activeText?: string
+    inactiveText?: string
+    activeValue?: boolean | string | number
+    inactiveValue?: boolean | string | number
+    activeColor?: string
+    inactiveColor?: string
+    borderColor?: string
+    string?: string
+    beforeChange?: () => boolean | PromiseRejectedResult
+    onChange?: ChangeEvent
+  }
+
+  declare type SliderProps = {
+    min?: number
+    max?: number
+    disabled?: boolean
+    step?: number
+    showInput?: boolean
+    showInputControls?: boolean
+    showStops?: boolean
+    showTooltip?: boolean
+    formatTooltip?: (value: number) => string
+    range?: boolean
+    vertical?: boolean
+    height?: string
+    label?: string
+    debounce?: number
+    tooltipClass?: string
+    marks?: Recordable
+    onChange?: ChangeEvent
+  }
+
+  declare type TimePickerProps = {
+    readonly?: boolean
+    disabled?: boolean
+    editable?: boolean
+    clearable?: boolean
+    placeholder?: string
+    startPlaceholder?: string
+    endPlaceholder?: string
+    isRange?: boolean
+    arrowControl?: boolean
+    align?: 'left' | 'center' | 'right'
+    popperClass?: string
+    rangeSeparator?: string
+    format?: string
+    defaultValue?: Date | string
+    name?: string
+    prefixIcon?: string | Component
+    clearIcon?: string | Component
+    disabledHours?: Fn
+    disabledMinutes?: Fn
+    disabledSeconds?: Fn
+    onChange?: ChangeEvent
+    onBlur?: BlurOrFocusEvent
+    onFocus?: BlurOrFocusEvent
+  }
+
+  declare type DatePickerProps = {
+    readonly?: boolean
+    disabled?: boolean
+    editable?: boolean
+    clearable?: boolean
+    placeholder?: string
+    startPlaceholder?: string
+    endPlaceholder?: string
+    type?:
+      | 'year'
+      | 'month'
+      | 'date'
+      | 'dates'
+      | 'datetime'
+      | 'week'
+      | 'datetimerange'
+      | 'daterange'
+      | 'monthrange'
+    format?: string
+    popperClass?: string
+    rangeSeparator?: string
+    defaultValue?: Date
+    defaultTime?: Date[]
+    valueFormat?: string
+    name?: string
+    unlinkPanels?: boolean
+    prefixIcon?: string | Component
+    clearIcon?: string | Component
+    disabledDate?: (date: Date) => boolean
+    shortcuts?: Recordable
+    onChange?: ChangeEvent
+    onBlur?: BlurOrFocusEvent
+    onFocus?: BlurOrFocusEvent
+    onCalendarChange?: (dates: [Date, Date]) => void
+    slots?: {
+      default?: boolean
+      rangeSeparator?: boolean
+    }
+  }
+
+  declare type RateProps = {
+    max?: number
+    disabled?: boolean
+    allowHalf?: boolean
+    lowThreshold?: number
+    highThreshold?: number
+    colors?: [string, string, string] | Recordable
+    voidColor?: string
+    disabledVoidColor?: string
+    icons?: [string, string, string] | Recordable
+    voidIcon?: string | Component
+    disabledVoidIcon?: string | Component
+    showText?: boolean
+    showScore?: boolean
+    textColor?: string
+    texts?: string[]
+    scoreTemplate?: string
+    onChange?: ChangeEvent
+  }
 
   declare type FormSchema = {
     field: string
@@ -220,6 +383,11 @@ declare global {
       | InputNumberProps
       | SelectProps
       | CascaderProps
+      | SwitchProps
+      | SliderProps
+      | TimePickerProps
+      | DatePickerProps
+      | RateProps
     // formItemProps?: ElFormItem
     component?: ComponentName
     value?: FormValueTypes

src/types/global.d.ts

@@ -11,3 +11,5 @@ declare type ElememtPlusSzie = 'medium' | 'small' | 'mini'
 declare type ElementPlusInfoType = 'success' | 'info' | 'warning' | 'danger'
 
 declare type Recordable<T = any> = Record<string, T>
+
+declare type ComponentRef<T> = InstanceType<T>

src/types/v-components.d.ts

@@ -1,7 +0,0 @@
-declare module 'vue' {
-  export interface GlobalComponents {
-    BfFrom: typeof import('../components/Form/src/BfForm.vue')['default']
-  }
-}
-
-export {}