types: Adding BfFrom Component types

.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-  "recommendations": ["johnsoncodehk.volar", "lokalise.i18n-ally"]
+  "recommendations": ["johnsoncodehk.volar", "lokalise.i18n-ally", "esbenp.prettier-vscode"]
 }

package.json

@@ -27,6 +27,7 @@
   "dependencies": {
     "@vueuse/core": "^7.1.2",
     "element-plus": "1.2.0-beta.6",
+    "lodash-es": "^4.17.21",
     "pinia": "^2.0.6",
     "vue": "^3.2.24",
     "vue-i18n": "9.1.9",

pnpm-lock.yaml

@@ -22,6 +22,7 @@ specifiers:
   husky: ^7.0.4
   less: ^4.1.2
   lint-staged: ^12.1.2
+  lodash-es: ^4.17.21
   pinia: ^2.0.6
   postcss: ^8.4.4
   postcss-html: ^1.3.0
@@ -35,13 +36,10 @@ specifiers:
   stylelint-config-standard: ^24.0.0
   stylelint-order: ^5.0.0
   typescript: 4.5.2
-  unplugin-auto-import: ^0.5.1
   unplugin-icons: ^0.12.23
-  unplugin-vue-components: ^0.17.6
   vite: 2.6.14
   vite-plugin-eslint: ^1.3.0
   vite-plugin-style-import: ^1.4.0
-  vite-plugin-vue-setup-extend: ^0.1.0
   vite-plugin-windicss: ^1.5.4
   vue: ^3.2.24
   vue-i18n: 9.1.9
@@ -54,6 +52,7 @@ specifiers:
 dependencies:
   '@vueuse/core': registry.npmmirror.com/@vueuse/core/7.1.2_vue@3.2.24
   element-plus: registry.npmmirror.com/element-plus/1.2.0-beta.6_vue@3.2.24
+  lodash-es: registry.nlark.com/lodash-es/4.17.21
   pinia: registry.npmmirror.com/pinia/2.0.6_typescript@4.5.2+vue@3.2.24
   vue: registry.npmmirror.com/vue/3.2.24
   vue-i18n: registry.npmmirror.com/vue-i18n/9.1.9_vue@3.2.24
@@ -92,13 +91,10 @@ devDependencies:
   stylelint-config-standard: registry.npmmirror.com/stylelint-config-standard/24.0.0_stylelint@14.1.0
   stylelint-order: registry.npmmirror.com/stylelint-order/5.0.0_stylelint@14.1.0
   typescript: registry.npmmirror.com/typescript/4.5.2
-  unplugin-auto-import: registry.npmmirror.com/unplugin-auto-import/0.5.1_@vueuse+core@7.1.2+vite@2.6.14
   unplugin-icons: registry.npmmirror.com/unplugin-icons/0.12.23_vite@2.6.14
-  unplugin-vue-components: registry.npmmirror.com/unplugin-vue-components/0.17.6_vite@2.6.14+vue@3.2.24
   vite: registry.npmmirror.com/vite/2.6.14_less@4.1.2
   vite-plugin-eslint: registry.nlark.com/vite-plugin-eslint/1.3.0_vite@2.6.14
   vite-plugin-style-import: registry.npmmirror.com/vite-plugin-style-import/1.4.0_vite@2.6.14
-  vite-plugin-vue-setup-extend: registry.npmmirror.com/vite-plugin-vue-setup-extend/0.1.0_vite@2.6.14
   vite-plugin-windicss: registry.npmmirror.com/vite-plugin-windicss/1.5.4_vite@2.6.14
   vue-tsc: registry.npmmirror.com/vue-tsc/0.3.0_typescript@4.5.2
   windicss: registry.npmmirror.com/windicss/3.2.1
@@ -464,21 +460,6 @@ packages:
     engines: { node: '>=12' }
     dev: true
 
-  registry.nlark.com/anymatch/3.1.2:
-    resolution:
-      {
-        integrity: sha1-wFV8CWrzLxBhmPT04qODU343hxY=,
-        registry: https://registry.npm.taobao.org/,
-        tarball: https://registry.nlark.com/anymatch/download/anymatch-3.1.2.tgz
-      }
-    name: anymatch
-    version: 3.1.2
-    engines: { node: '>= 8' }
-    dependencies:
-      normalize-path: registry.nlark.com/normalize-path/3.0.0
-      picomatch: registry.nlark.com/picomatch/2.3.0
-    dev: true
-
   registry.nlark.com/arg/4.1.3:
     resolution:
       {
@@ -643,18 +624,6 @@ packages:
     version: 2.0.0
     dev: true
 
-  registry.nlark.com/binary-extensions/2.2.0:
-    resolution:
-      {
-        integrity: sha1-dfUC7q+f/eQvyYgpZFvk6na9ni0=,
-        registry: https://registry.npm.taobao.org/,
-        tarball: https://registry.nlark.com/binary-extensions/download/binary-extensions-2.2.0.tgz
-      }
-    name: binary-extensions
-    version: 2.2.0
-    engines: { node: '>=8' }
-    dev: true
-
   registry.nlark.com/boolbase/1.0.0:
     resolution:
       {
@@ -2477,20 +2446,6 @@ packages:
     version: 0.2.1
     dev: true
 
-  registry.nlark.com/is-binary-path/2.1.0:
-    resolution:
-      {
-        integrity: sha1-6h9/O4DwZCNug0cPhsCcJU+0Wwk=,
-        registry: https://registry.npm.taobao.org/,
-        tarball: https://registry.nlark.com/is-binary-path/download/is-binary-path-2.1.0.tgz
-      }
-    name: is-binary-path
-    version: 2.1.0
-    engines: { node: '>=8' }
-    dependencies:
-      binary-extensions: registry.nlark.com/binary-extensions/2.2.0
-    dev: true
-
   registry.nlark.com/is-expression/4.0.0:
     resolution:
       {
@@ -2985,6 +2940,17 @@ packages:
       p-locate: registry.nlark.com/p-locate/5.0.0
     dev: true
 
+  registry.nlark.com/lodash-es/4.17.21:
+    resolution:
+      {
+        integrity: sha1-Q+YmxG5lkbd1C+srUBFzkMYJ4+4=,
+        registry: https://registry.npm.taobao.org/,
+        tarball: https://registry.nlark.com/lodash-es/download/lodash-es-4.17.21.tgz
+      }
+    name: lodash-es
+    version: 4.17.21
+    dev: false
+
   registry.nlark.com/lodash.get/4.4.2:
     resolution:
       {
@@ -4106,20 +4072,6 @@ packages:
       util-deprecate: registry.nlark.com/util-deprecate/1.0.2
     dev: true
 
-  registry.nlark.com/readdirp/3.6.0:
-    resolution:
-      {
-        integrity: sha1-dKNwvYVxFuJFspzJc0DNQxoCpsc=,
-        registry: https://registry.npm.taobao.org/,
-        tarball: https://registry.nlark.com/readdirp/download/readdirp-3.6.0.tgz
-      }
-    name: readdirp
-    version: 3.6.0
-    engines: { node: '>=8.10.0' }
-    dependencies:
-      picomatch: registry.nlark.com/picomatch/2.3.0
-    dev: true
-
   registry.nlark.com/redent/3.0.0:
     resolution:
       {
@@ -6804,6 +6756,7 @@ packages:
       magic-string: registry.nlark.com/magic-string/0.25.7
       postcss: registry.npmmirror.com/postcss/8.4.4
       source-map: registry.nlark.com/source-map/0.6.1
+    dev: false
 
   registry.npmmirror.com/@vue/compiler-ssr/3.2.24:
     resolution:
@@ -6817,6 +6770,7 @@ packages:
     dependencies:
       '@vue/compiler-dom': registry.npmmirror.com/@vue/compiler-dom/3.2.24
       '@vue/shared': registry.npmmirror.com/@vue/shared/3.2.24
+    dev: false
 
   registry.npmmirror.com/@vue/devtools-api/6.0.0-beta.20.1:
     resolution:
@@ -6856,6 +6810,7 @@ packages:
       '@vue/shared': registry.npmmirror.com/@vue/shared/3.2.24
       estree-walker: registry.nlark.com/estree-walker/2.0.2
       magic-string: registry.nlark.com/magic-string/0.25.7
+    dev: false
 
   registry.npmmirror.com/@vue/runtime-core/3.2.24:
     resolution:
@@ -7004,7 +6959,7 @@ packages:
       {
         integrity: sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=,
         registry: https://registry.npm.taobao.org/,
-        tarball: https://registry.npmmirror.com/acorn/download/acorn-7.4.1.tgz?cache=0&sync_timestamp=1637225763269&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Facorn%2Fdownload%2Facorn-7.4.1.tgz
+        tarball: https://registry.npmmirror.com/acorn/download/acorn-7.4.1.tgz
       }
     name: acorn
     version: 7.4.1
@@ -7245,28 +7200,6 @@ packages:
     version: 0.7.0
     dev: true
 
-  registry.npmmirror.com/chokidar/3.5.2:
-    resolution:
-      {
-        integrity: sha1-26OXb8rbAW9m/TZQIdkWANAcHnU=,
-        registry: https://registry.npm.taobao.org/,
-        tarball: https://registry.npmmirror.com/chokidar/download/chokidar-3.5.2.tgz?cache=0&sync_timestamp=1636462751299&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fchokidar%2Fdownload%2Fchokidar-3.5.2.tgz
-      }
-    name: chokidar
-    version: 3.5.2
-    engines: { node: '>= 8.10.0' }
-    dependencies:
-      anymatch: registry.nlark.com/anymatch/3.1.2
-      braces: registry.nlark.com/braces/3.0.2
-      glob-parent: registry.npmmirror.com/glob-parent/5.1.2
-      is-binary-path: registry.nlark.com/is-binary-path/2.1.0
-      is-glob: registry.npmmirror.com/is-glob/4.0.3
-      normalize-path: registry.nlark.com/normalize-path/3.0.0
-      readdirp: registry.nlark.com/readdirp/3.6.0
-    optionalDependencies:
-      fsevents: registry.npmmirror.com/fsevents/2.3.2
-    dev: true
-
   registry.npmmirror.com/cli-truncate/2.1.0:
     resolution:
       {
@@ -9802,36 +9735,6 @@ packages:
     hasBin: true
     dev: true
 
-  registry.npmmirror.com/unplugin-auto-import/0.5.1_@vueuse+core@7.1.2+vite@2.6.14:
-    resolution:
-      {
-        integrity: sha512-Q3CvNbCB7nLbu+JdrF6jYs0Nx7kHmV2KzDcZHzTrdri3EhU1lUOgto+ce+Jw01Ds7RxBi9lwWwF3QoFwFPul1A==,
-        registry: https://registry.npm.taobao.org/,
-        tarball: https://registry.npmmirror.com/unplugin-auto-import/download/unplugin-auto-import-0.5.1.tgz
-      }
-    id: registry.npmmirror.com/unplugin-auto-import/0.5.1
-    name: unplugin-auto-import
-    version: 0.5.1
-    engines: { node: '>=14' }
-    peerDependencies:
-      '@vueuse/core': '*'
-    peerDependenciesMeta:
-      '@vueuse/core':
-        optional: true
-    dependencies:
-      '@antfu/utils': registry.nlark.com/@antfu/utils/0.3.0
-      '@rollup/pluginutils': registry.nlark.com/@rollup/pluginutils/4.1.1
-      '@vueuse/core': registry.npmmirror.com/@vueuse/core/7.1.2_vue@3.2.24
-      local-pkg: registry.npmmirror.com/local-pkg/0.4.0
-      magic-string: registry.nlark.com/magic-string/0.25.7
-      resolve: registry.nlark.com/resolve/1.20.0
-      unplugin: registry.npmmirror.com/unplugin/0.2.21_vite@2.6.14
-    transitivePeerDependencies:
-      - rollup
-      - vite
-      - webpack
-    dev: true
-
   registry.npmmirror.com/unplugin-icons/0.12.23_vite@2.6.14:
     resolution:
       {
@@ -9871,45 +9774,6 @@ packages:
       - webpack
     dev: true
 
-  registry.npmmirror.com/unplugin-vue-components/0.17.6_vite@2.6.14+vue@3.2.24:
-    resolution:
-      {
-        integrity: sha512-Z2XvwKeY7/++MucRKzJihDsbdL8rFb71VfmuhtMtLE8zurjFu57XKFx0RNFUD5zD4g0HEyR9GGTwXu2YI0rang==,
-        registry: https://registry.npm.taobao.org/,
-        tarball: https://registry.npmmirror.com/unplugin-vue-components/download/unplugin-vue-components-0.17.6.tgz
-      }
-    id: registry.npmmirror.com/unplugin-vue-components/0.17.6
-    name: unplugin-vue-components
-    version: 0.17.6
-    engines: { node: '>=14' }
-    peerDependencies:
-      '@babel/parser': ^7.15.8
-      '@babel/traverse': ^7.15.4
-      vue: 2 || 3
-    peerDependenciesMeta:
-      '@babel/parser':
-        optional: true
-      '@babel/traverse':
-        optional: true
-    dependencies:
-      '@antfu/utils': registry.nlark.com/@antfu/utils/0.3.0
-      '@rollup/pluginutils': registry.nlark.com/@rollup/pluginutils/4.1.1
-      chokidar: registry.npmmirror.com/chokidar/3.5.2
-      debug: registry.npmmirror.com/debug/4.3.3
-      fast-glob: registry.nlark.com/fast-glob/3.2.7
-      local-pkg: registry.npmmirror.com/local-pkg/0.4.0
-      magic-string: registry.nlark.com/magic-string/0.25.7
-      minimatch: registry.nlark.com/minimatch/3.0.4
-      resolve: registry.nlark.com/resolve/1.20.0
-      unplugin: registry.npmmirror.com/unplugin/0.2.21_vite@2.6.14
-      vue: registry.npmmirror.com/vue/3.2.24
-    transitivePeerDependencies:
-      - rollup
-      - supports-color
-      - vite
-      - webpack
-    dev: true
-
   registry.npmmirror.com/unplugin/0.2.21_vite@2.6.14:
     resolution:
       {
@@ -9960,24 +9824,6 @@ packages:
       - supports-color
     dev: true
 
-  registry.npmmirror.com/vite-plugin-vue-setup-extend/0.1.0_vite@2.6.14:
-    resolution:
-      {
-        integrity: sha1-nwjvu8Ku0QP1SbNpbe5dRi2yPzg=,
-        registry: https://registry.npm.taobao.org/,
-        tarball: https://registry.npmmirror.com/vite-plugin-vue-setup-extend/download/vite-plugin-vue-setup-extend-0.1.0.tgz
-      }
-    id: registry.npmmirror.com/vite-plugin-vue-setup-extend/0.1.0
-    name: vite-plugin-vue-setup-extend
-    version: 0.1.0
-    peerDependencies:
-      vite: '>=2.0.0'
-    dependencies:
-      '@vue/compiler-sfc': registry.npmmirror.com/@vue/compiler-sfc/3.2.24
-      magic-string: registry.nlark.com/magic-string/0.25.7
-      vite: registry.npmmirror.com/vite/2.6.14_less@4.1.2
-    dev: true
-
   registry.npmmirror.com/vite-plugin-windicss/1.5.4_vite@2.6.14:
     resolution:
       {

src/App.vue

@@ -1,11 +1,31 @@
 <script setup lang="ts">
+import { ref, onMounted, unref } from 'vue'
 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>()
+
+onMounted(() => {
+  const form = unref(formRef.value)
+  console.log(form?.count)
+  form?.sayHello()
+  console.log(form?.$el)
+
+  const schema: BfFormSchema = [
+    {
+      field: '1',
+      colProps: {}
+    }
+  ]
+  console.log(schema)
+})
 </script>
 
 <template>
   <ElConfigProvider :locale="zhCn">
-    <RouterView class="app" />
+    <BfFrom ref="formRef" />
+    <Component :is="BfFrom" />
+    <!-- <RouterView class="app" /> -->
   </ElConfigProvider>
 </template>

src/components/Form/index.ts

@@ -1,3 +1,8 @@
 import BfFrom from './src/BfForm.vue'
 
+export interface BfFormExpose {
+  count: number
+  sayHello: () => void
+}
+
 export { BfFrom }

src/components/Form/src/BfForm.vue

@@ -1,6 +1,12 @@
-<script lang="ts" setup>
+<script lang="tsx" setup>
+// import { ref } from 'vue'
+// import { ElCol, ElRow } from 'element-plus'
 // import { propTypes } from '@/utils/propTypes'
-// import { array } from 'vue-types'
+import { array } from 'vue-types'
+
+defineProps({
+  schema: array<BfFormSchema>()
+})
 </script>
 
 <template>

src/types/components-type.d.ts

@@ -0,0 +1,233 @@
+import type { Component } from 'vue'
+
+declare global {
+  // BfForm types start
+  declare type ComponentName =
+    | 'Radio'
+    | 'Checkbox'
+    | 'Input'
+    | 'Autocomplete'
+    | 'InputNumber'
+    | 'Select'
+    | 'Cascader'
+    | 'Switch'
+    | 'Slider'
+    | 'TimePicker'
+    | 'DatePicker'
+    | 'Rate'
+    | 'ColorPicker'
+    | 'Transfer'
+    | 'Divider'
+
+  declare type FormComponentSize = 'large' | 'medium' | 'small' | 'mini'
+
+  declare type ColProps = {
+    span?: number
+    xs?: number
+    sm?: number
+    md?: number
+    lg?: number
+    xl?: number
+    tag?: string
+  }
+
+  declare type FormValueTypes = string | number | string[] | number[] | boolean | undefined
+
+  declare type FormRules = {
+    required?: boolean
+    message?: string
+    type?: string
+    trigger?: 'blur' | 'change' | ['change', 'blur']
+    validator?: (rule: any, value: FormValueTypes, callback: Fn) => void | boolean
+  }
+
+  declare type FormItem = {
+    prop?: string
+    label?: string
+    labelWidth?: string | number
+    required?: boolean
+    rules?: FormRules | FormRules[]
+    error?: string
+    showMessage?: boolean
+    inlineMessage?: boolean
+    size?: ElememtPlusSzie
+  }
+
+  declare type FormOptions = {
+    label?: string
+    value?: FormValueTypes
+    disabled?: boolean
+    key?: string | number
+    children?: FormOptions[]
+    [key: string]: any
+  }
+
+  declare type FormOptionsAlias = {
+    labelField?: string
+    valueField?: string
+  }
+
+  declare type BlurOrFocusEvent = (e: Event) => viod
+
+  declare type ChangeEvent = (data: { value: FormValueTypes; model: Recordable }) => viod
+
+  declare type RadioProps = {
+    border?: boolean
+    name?: string
+    onChange?: ChangeEvent
+  }
+
+  declare type CheckboxProps = {
+    border?: boolean
+    name?: string
+    indeterminate?: boolean
+    checked?: boolean
+    onChange?: ChangeEvent
+  }
+
+  declare type InputProps = {
+    type?: 'text' | 'textarea'
+    maxlength?: string | number
+    minlength?: string | number
+    showWordLimit?: boolean
+    placeholder?: string
+    clearable?: boolean
+    showPassword?: boolean
+    prefixIcon?: string | Component
+    suffixIcon?: string | Component
+    rows?: number = 5
+    autosize?:
+      | boolean
+      | {
+          minRows?: number
+          maxRows?: number
+        }
+    autocomplete?: string
+    name?: string
+    readonly?: boolean
+    onBlur?: BlurOrFocusEvent
+    onFocus?: BlurOrFocusEvent
+    onChange?: ChangeEvent
+    onInput?: ChangeEvent
+    onClear?: Fn
+    slots?: {
+      prefix?: boolean
+      suffix?: boolean
+      prepend?: boolean
+      append?: boolean
+    }
+  }
+
+  declare type AutocompleteProps = {
+    placeholder?: string
+    clearable?: boolean
+    valueKey?: string
+    icon?: string | Component
+    debounce?: number
+    placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'
+    fetchSuggestions?: (query: string, callback: Fn) => void
+    popperClass?: string
+    triggerOnFocus?: boolean
+    name?: string
+    selectWhenUnmatched?: boolean
+    label?: boolean
+    prefixIcon?: string
+    suffixIcon?: string
+    hideLoading?: boolean
+    popperAppendToBody?: boolean
+    highlightFirstItem?: boolean
+    onSelect?: ChangeEvent
+    change?: ChangeEvent
+    slots?: {
+      prefix?: boolean
+      suffix?: boolean
+      prepend?: boolean
+      append?: boolean
+    }
+  }
+
+  declare type InputNumberProps = {
+    min?: number
+    max?: number
+    step?: number
+    stepStrictly?: boolean
+    precision?: number
+    size?: FormComponentSize
+    controls?: boolean
+    controlsPosition?: 'top' | 'right'
+    name?: string
+    label?: string
+    placeholder?: string
+  }
+
+  declare type SelectProps = {
+    multiple?: boolean
+    valueKey?: string
+    size?: FormComponentSize
+    clearable?: boolean
+    collapseTags?: boolean
+    multipleLimit?: number
+    name?: string
+    autocomplete?: string
+    placeholder?: string
+    filterable?: boolean
+    allowCreate?: boolean
+    filterMethod?: Fn
+    remote?: boolean
+    remoteMethod?: Fn
+    loading?: boolean
+    loadingText?: string
+    noMatchText?: string
+    noDataText?: string
+    popperClass?: string
+    reserveKeyword?: boolean
+    defaultFirstOption?: boolean
+    popperAppendToBody?: boolean
+    automaticDropdown?: boolean
+    clearIcon?: string | Component
+    fitInputWidth?: boolean
+    suffixIcon?: string | Component
+    tagType?: ElementPlusInfoType
+    onChange?: ChangeEvent
+    onVisibleChange?: (val: boolean) => void
+    onRemoveTag?: (val: string | number) => void
+    onClear?: Fn
+    onBlur?: BlurOrFocusEvent
+    onFocus?: BlurOrFocusEvent
+    slots?: {
+      prefix?: boolean
+      empty?: boolean
+    }
+    optionGroup?:
+      | boolean
+      | {
+          label?: string
+          disabled?: boolean
+        }
+  }
+
+  declare type CascaderProps = {}
+
+  declare type FormSchema = {
+    field: string
+    label?: string
+    colProps?: ColProps
+    componentProps?:
+      | RadioProps
+      | CheckboxProps
+      | InputProps
+      | AutocompleteProps
+      | InputNumberProps
+      | SelectProps
+      | CascaderProps
+    // formItemProps?: ElFormItem
+    component?: ComponentName
+    value?: FormValueTypes
+    options?: FormOptions[]
+    optionsField?: FormOptionsAlias
+    hidden?: boolean
+  }
+
+  // BfForm types end
+  declare type BfFormSchema = FormSchema[]
+}

src/types/global.d.ts

@@ -0,0 +1,13 @@
+declare interface Fn<T = any> {
+  (...arg: T[]): T
+}
+
+declare type Nullable<T> = T | null
+
+declare type ElRef<T extends HTMLElement = HTMLDivElement> = Nullable<T>
+
+declare type ElememtPlusSzie = 'medium' | 'small' | 'mini'
+
+declare type ElementPlusInfoType = 'success' | 'info' | 'warning' | 'danger'
+
+declare type Recordable<T = any> = Record<string, T>

windi.config.ts

@@ -10,11 +10,10 @@ export default defineConfig({
   theme: {
     extend: {
       screens: {
-        sm: '640px',
+        sm: '768px',
-        md: '768px',
+        md: '992px',
-        lg: '1024px',
+        lg: '1200px',
-        xl: '1280px',
+        xl: '1920px'
-        '2xl': '1536px'
       }
     }
   }