types: Adding BfFrom Component types

2021-12-11 20:50:05 +08:00 · 2021-12-11 20:50:05 +08:00 · 8e036f54b5
parent 641ed684fe
commit 8e036f54b5
9 changed files with 303 additions and 180 deletions
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -1,3 +1,3 @@
 {
-  "recommendations": ["johnsoncodehk.volar", "lokalise.i18n-ally"]
+  "recommendations": ["johnsoncodehk.volar", "lokalise.i18n-ally", "esbenp.prettier-vscode"]
 }
--- a/package.json
+++ b/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",
--- a/pnpm-lock.yaml
+++ b/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:
      {
--- a/src/App.vue
+++ b/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>
--- a/src/components/Form/index.ts
+++ b/src/components/Form/index.ts
@ -1,3 +1,8 @@
 import BfFrom from './src/BfForm.vue'

+export interface BfFormExpose {
+  count: number
+  sayHello: () => void
+}
+
 export { BfFrom }
--- a/src/components/Form/src/BfForm.vue
+++ b/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>
--- a/src/types/components-type.d.ts
+++ b/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[]
+}
--- a/src/types/global.d.ts
+++ b/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>
--- a/windi.config.ts
+++ b/windi.config.ts
@ -10,11 +10,10 @@ export default defineConfig({
  theme: {
    extend: {
      screens: {
-        sm: '640px',
-        md: '768px',
-        lg: '1024px',
-        xl: '1280px',
-        '2xl': '1536px'
+        sm: '768px',
+        md: '992px',
+        lg: '1200px',
+        xl: '1920px'
      }
    }
  }