types(VForm): Adding VForm types

.vscode/extensions.json

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

src/App.vue

@@ -3,14 +3,14 @@ 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'
+import { VFrom, VFormExpose } from '@/components/Form'
-const formRef = ref<ComponentRef<typeof BfFrom> & BfFormExpose>()
+const formRef = ref<ComponentRef<typeof VFrom> & VFormExpose>()
 
 onMounted(() => {
   const form = unref(formRef.value)
   console.log(form?.$el)
 
-  const schema: BfFormSchema = [
+  const schema: VFormSchema = [
     {
       field: '1',
       colProps: {}
@@ -22,8 +22,8 @@ onMounted(() => {
 
 <template>
   <ElConfigProvider :locale="zhCn">
-    <BfFrom ref="formRef" />
+    <VFrom ref="formRef" />
-    <Component :is="BfFrom" />
+    <Component :is="VFrom" />
     <!-- <RouterView class="app" /> -->
   </ElConfigProvider>
 </template>

src/components/Form/index.ts

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

src/components/Form/src/BfForm.vue

@@ -1,16 +0,0 @@
-<script lang="tsx" setup>
-// import { ref } from 'vue'
-// import { ElCol, ElRow } from 'element-plus'
-// import { propTypes } from '@/utils/propTypes'
-import { array } from 'vue-types'
-
-defineProps({
-  schema: array<BfFormSchema>()
-})
-</script>
-
-<template>
-  <div>hahah</div>
-</template>
-
-<style lang="less" scoped></style>

src/components/Form/src/VForm.vue

@@ -0,0 +1,43 @@
+<script lang="tsx">
+import { PropType, defineComponent, onMounted, ref, unref } from 'vue'
+import { ElForm } from 'element-plus'
+// import { COMPONENT_MAP } from './componentMap'
+import { propTypes } from '@/utils/propTypes'
+
+export default defineComponent({
+  name: 'VForm',
+  props: {
+    // 生成Form的布局结构数组
+    schema: {
+      type: Array as PropType<VFormSchema[]>,
+      require: true,
+      default: () => []
+    },
+    // 是否需要栅格布局
+    isCol: propTypes.bool.def(true),
+    // 表单数据对象
+    model: {
+      type: Object as PropType<Recordable>,
+      default: () => ({})
+    },
+    // 是否自动设置placeholder
+    autoSetPlaceholder: propTypes.bool.def(true),
+    // 是否自定义内容
+    isCustom: propTypes.bool.def(false)
+  },
+  setup() {
+    const formRef = ref<ComponentRef<typeof ElForm>>()
+    onMounted(() => {
+      console.log(unref(formRef)?.clearValidate)
+    })
+
+    // function renderWrap() {}
+
+    // function renderFormItem() {}
+
+    return () => <ElForm ref={formRef}></ElForm>
+  }
+})
+</script>
+
+<style lang="less" scoped></style>

src/components/Form/src/componentMap.ts

@@ -0,0 +1,42 @@
+import type { Component } from 'vue'
+import {
+  ElCascader,
+  ElCheckboxGroup,
+  ElColorPicker,
+  ElDatePicker,
+  ElInput,
+  ElInputNumber,
+  ElRadioGroup,
+  ElRate,
+  ElSelect,
+  ElSelectV2,
+  ElSlider,
+  ElSwitch,
+  ElTimePicker,
+  ElTimeSelect,
+  ElTransfer,
+  ElAutocomplete,
+  ElDivider
+} from 'element-plus'
+
+const COMPONENT_MAP: Recordable<Component, ComponentName> = {
+  Radio: ElRadioGroup,
+  Checkbox: ElCheckboxGroup,
+  Input: ElInput,
+  Autocomplete: ElAutocomplete,
+  InputNumber: ElInputNumber,
+  Select: ElSelect,
+  Cascader: ElCascader,
+  Switch: ElSwitch,
+  Slider: ElSlider,
+  TimePicker: ElTimePicker,
+  DatePicker: ElDatePicker,
+  Rate: ElRate,
+  ColorPicker: ElColorPicker,
+  Transfer: ElTransfer,
+  Divider: ElDivider,
+  TimeSelect: ElTimeSelect,
+  SelectV2: ElSelectV2
+}
+
+export { COMPONENT_MAP }

src/components/Form/src/helper.ts

@@ -0,0 +1,8 @@
+/**
+ *
+ * @param schema 对应组件数据
+ * @description 用于自动设置placeholder
+ */
+export function setTextPlaceholder(schema: VFormSchema) {
+  console.log(schema)
+}

src/locales/en.ts

@@ -1,8 +1,8 @@
 export default {
-  test: {
+  common: {
-    about: 'About'
+    inputText: 'Please input',
-  },
+    selectText: 'Please select',
-  test2: {
+    startTimeText: 'Start time',
-    go: 'Go'
+    endTimeText: 'End time'
   }
 }

src/locales/zh-CN.ts

@@ -1,8 +1,8 @@
 export default {
-  test: {
+  common: {
-    about: '关于'
+    inputText: '请输入',
-  },
+    selectText: '请选择',
-  test2: {
+    startTimeText: '开始时间',
-    go: '去'
+    endTimeText: '结束时间'
   }
 }

src/styles/variable.less

@@ -1,2 +1,2 @@
 // 命名空间
-@namespace: vbf;
+@namespace: v;

src/types/componentType.d.ts

@@ -472,24 +472,9 @@ declare global {
   }
 
   declare type FormSchema = {
-    /**
-     * @field form model key
-     */
     field: string
-
-    /**
-     * @label form-item label
-     */
     label?: string
-
-    /**
-     * @colProps ElCol props
-     */
     colProps?: ColProps
-
-    /**
-     * @componentProps El Components props
-     */
     componentProps?:
       | RadioProps
       | CheckboxProps
@@ -508,38 +493,14 @@ declare global {
       | DividerProps
       | TimeSelectProps
       | SelectV2Props
-
-    /**
-     * @formItemProps form-item props
-     */
     formItemProps?: FormItemProps
-
-    /**
-     * @component Component
-     */
     component?: ComponentName
-
-    /**
-     * @value form model value
-     */
     value?: FormValueTypes
-
-    /**
-     * @options Component options
-     */
     options?: FormOptions[]
-
-    /**
-     * @optionsField option alias
-     */
     optionsField?: FormOptionsAlias
-
-    /**
-     * @hidden form-item hidden
-     */
     hidden?: boolean
   }
 
-  // BfForm types end
+  // VForm types end
-  declare type BfFormSchema = FormSchema[]
+  declare type VFormSchema = FormSchema[]
 }

src/types/global.d.ts

@@ -10,6 +10,6 @@ declare type ElememtPlusSzie = 'medium' | 'small' | 'mini'
 
 declare type ElementPlusInfoType = 'success' | 'info' | 'warning' | 'danger'
 
-declare type Recordable<T = any> = Record<string, T>
+declare type Recordable<T = any, K = string> = Record<K extends null | undefined ? string : K, T>
 
 declare type ComponentRef<T> = InstanceType<T>

src/utils/is.ts

@@ -0,0 +1,101 @@
+// copy to vben-admin
+
+const toString = Object.prototype.toString
+
+export function is(val: unknown, type: string) {
+  return toString.call(val) === `[object ${type}]`
+}
+
+export function isDef<T = unknown>(val?: T): val is T {
+  return typeof val !== 'undefined'
+}
+
+export function isUnDef<T = unknown>(val?: T): val is T {
+  return !isDef(val)
+}
+
+export function isObject(val: any): val is Record<any, any> {
+  return val !== null && is(val, 'Object')
+}
+
+export function isEmpty<T = unknown>(val: T): val is T {
+  if (isArray(val) || isString(val)) {
+    return val.length === 0
+  }
+
+  if (val instanceof Map || val instanceof Set) {
+    return val.size === 0
+  }
+
+  if (isObject(val)) {
+    return Object.keys(val).length === 0
+  }
+
+  return false
+}
+
+export function isDate(val: unknown): val is Date {
+  return is(val, 'Date')
+}
+
+export function isNull(val: unknown): val is null {
+  return val === null
+}
+
+export function isNullAndUnDef(val: unknown): val is null | undefined {
+  return isUnDef(val) && isNull(val)
+}
+
+export function isNullOrUnDef(val: unknown): val is null | undefined {
+  return isUnDef(val) || isNull(val)
+}
+
+export function isNumber(val: unknown): val is number {
+  return is(val, 'Number')
+}
+
+export function isPromise<T = any>(val: unknown): val is Promise<T> {
+  return is(val, 'Promise') && isObject(val) && isFunction(val.then) && isFunction(val.catch)
+}
+
+export function isString(val: unknown): val is string {
+  return is(val, 'String')
+}
+
+export function isFunction(val: unknown): val is Function {
+  return typeof val === 'function'
+}
+
+export function isBoolean(val: unknown): val is boolean {
+  return is(val, 'Boolean')
+}
+
+export function isRegExp(val: unknown): val is RegExp {
+  return is(val, 'RegExp')
+}
+
+export function isArray(val: any): val is Array<any> {
+  return val && Array.isArray(val)
+}
+
+export function isWindow(val: any): val is Window {
+  return typeof window !== 'undefined' && is(val, 'Window')
+}
+
+export function isElement(val: unknown): val is Element {
+  return isObject(val) && !!val.tagName
+}
+
+export function isMap(val: unknown): val is Map<any, any> {
+  return is(val, 'Map')
+}
+
+export const isServer = typeof window === 'undefined'
+
+export const isClient = !isServer
+
+export function isUrl(path: string): boolean {
+  const reg =
+    /(((^https?:(?:\/\/)?)(?:[-:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&%@.\w_]*)#?(?:[\w]*))?)$/
+  return reg.test(path)
+}

src/utils/propTypes.ts

@@ -15,8 +15,6 @@ const propTypes = createTypes({
   integer: undefined
 }) as PropTypes
 
-console.log(propTypes.array)
-
 // 需要自定义扩展的类型
 // see: https://dwightjack.github.io/vue-types/advanced/extending-vue-types.html#the-extend-method
 propTypes.extend([