From d7d0ada558c19d0fc335118093f2d3aa794d5483 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=87=AF=E9=BE=99?= <502431556@qq.com> Date: Tue, 14 Dec 2021 17:42:43 +0800 Subject: [PATCH] wip(VForm): VForm coding --- .vscode/settings.json | 3 +- package.json | 1 + pnpm-lock.yaml | 15 +++--- src/App.vue | 30 ++++++----- src/components/Form/src/VForm.vue | 82 +++++++++++++++++++++++++++---- src/components/Form/src/helper.ts | 33 ++++++++++++- src/hooks/web/useI18n.ts | 50 +++++++++++++++++++ src/main.ts | 20 ++++---- src/plugins/i18n/index.ts | 4 +- src/types/componentType.d.ts | 18 +++---- src/utils/tsxHelper.ts | 16 ++++++ 11 files changed, 221 insertions(+), 51 deletions(-) create mode 100644 src/hooks/web/useI18n.ts create mode 100644 src/utils/tsxHelper.ts diff --git a/.vscode/settings.json b/.vscode/settings.json index 2dffb99..4fde8c5 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -14,5 +14,6 @@ "i18n-ally.enabledParsers": ["ts"], "i18n-ally.sourceLanguage": "en", "i18n-ally.displayLanguage": "zh-CN", - "i18n-ally.enabledFrameworks": ["vue", "react"] + "i18n-ally.enabledFrameworks": ["vue", "react"], + "god.tsconfig": "./tsconfig.json" } diff --git a/package.json b/package.json index 1c80b1b..5bf9393 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,7 @@ "@typescript-eslint/parser": "^5.6.0", "@vitejs/plugin-vue": "^1.9.3", "@vitejs/plugin-vue-jsx": "^1.3.0", + "async-validator": "^4.0.7", "autoprefixer": "^10.4.0", "commitizen": "^4.2.4", "eslint": "^8.4.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f3525fe..071e8af 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,6 +11,7 @@ specifiers: '@vitejs/plugin-vue': ^1.9.3 '@vitejs/plugin-vue-jsx': ^1.3.0 '@vueuse/core': ^7.1.2 + async-validator: ^4.0.7 autoprefixer: ^10.4.0 commitizen: ^4.2.4 element-plus: 1.2.0-beta.6 @@ -69,6 +70,7 @@ devDependencies: '@typescript-eslint/parser': registry.npmmirror.com/@typescript-eslint/parser/5.6.0_eslint@8.4.1+typescript@4.5.2 '@vitejs/plugin-vue': registry.npmmirror.com/@vitejs/plugin-vue/1.10.1_vite@2.6.14 '@vitejs/plugin-vue-jsx': registry.npmmirror.com/@vitejs/plugin-vue-jsx/1.3.0 + async-validator: registry.npmmirror.com/async-validator/4.0.7 autoprefixer: registry.npmmirror.com/autoprefixer/10.4.0_postcss@8.4.4 commitizen: registry.npmmirror.com/commitizen/4.2.4 eslint: registry.npmmirror.com/eslint/8.4.1 @@ -4320,7 +4322,7 @@ packages: { integrity: sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=, registry: https://registry.npm.taobao.org/, - tarball: https://registry.nlark.com/semver/download/semver-5.7.1.tgz?cache=0&sync_timestamp=1631500167672&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsemver%2Fdownload%2Fsemver-5.7.1.tgz + tarball: https://registry.nlark.com/semver/download/semver-5.7.1.tgz } name: semver version: 5.7.1 @@ -4332,7 +4334,7 @@ packages: { integrity: sha1-7gpkyK9ejO6mdoexM3YeG+y9HT0=, registry: https://registry.npm.taobao.org/, - tarball: https://registry.nlark.com/semver/download/semver-6.3.0.tgz?cache=0&sync_timestamp=1631500167672&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsemver%2Fdownload%2Fsemver-6.3.0.tgz + tarball: https://registry.nlark.com/semver/download/semver-6.3.0.tgz } name: semver version: 6.3.0 @@ -6959,7 +6961,7 @@ packages: { integrity: sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=, registry: https://registry.npm.taobao.org/, - tarball: https://registry.npmmirror.com/acorn/download/acorn-7.4.1.tgz + tarball: https://registry.npmmirror.com/acorn/download/acorn-7.4.1.tgz?cache=0&sync_timestamp=1637226362293&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Facorn%2Fdownload%2Facorn-7.4.1.tgz } name: acorn version: 7.4.1 @@ -6972,7 +6974,7 @@ packages: { integrity: sha512-U1riIR+lBSNi3IbxtaHOIKdH8sLFv3NYfNv8sg7ZsNhcfl4HF2++BfqqrNAxoCLQW1iiylOj76ecnaUxz+z9yw==, registry: https://registry.npm.taobao.org/, - tarball: https://registry.npmmirror.com/acorn/download/acorn-8.6.0.tgz + tarball: https://registry.npmmirror.com/acorn/download/acorn-8.6.0.tgz?cache=0&sync_timestamp=1637226362293&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Facorn%2Fdownload%2Facorn-8.6.0.tgz } name: acorn version: 8.6.0 @@ -7021,7 +7023,6 @@ packages: } name: async-validator version: 4.0.7 - dev: false registry.npmmirror.com/autoprefixer/10.4.0_postcss@8.4.4: resolution: @@ -7911,7 +7912,7 @@ packages: { integrity: sha1-MOvR73wv3/AcOk8VEESvJfqwUj4=, registry: https://registry.npm.taobao.org/, - tarball: https://registry.npmmirror.com/eslint-visitor-keys/download/eslint-visitor-keys-1.3.0.tgz + tarball: https://registry.npmmirror.com/eslint-visitor-keys/download/eslint-visitor-keys-1.3.0.tgz?cache=0&sync_timestamp=1636378498011&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Feslint-visitor-keys%2Fdownload%2Feslint-visitor-keys-1.3.0.tgz } name: eslint-visitor-keys version: 1.3.0 @@ -7923,7 +7924,7 @@ packages: { integrity: sha1-9lMoJZMFknOSyTjtROsKXJsr0wM=, registry: https://registry.npm.taobao.org/, - tarball: https://registry.npmmirror.com/eslint-visitor-keys/download/eslint-visitor-keys-2.1.0.tgz + tarball: https://registry.npmmirror.com/eslint-visitor-keys/download/eslint-visitor-keys-2.1.0.tgz?cache=0&sync_timestamp=1636378498011&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Feslint-visitor-keys%2Fdownload%2Feslint-visitor-keys-2.1.0.tgz } name: eslint-visitor-keys version: 2.1.0 diff --git a/src/App.vue b/src/App.vue index fd77942..1894909 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,5 +1,5 @@ diff --git a/src/components/Form/src/VForm.vue b/src/components/Form/src/VForm.vue index 4b75e14..2d7c05e 100644 --- a/src/components/Form/src/VForm.vue +++ b/src/components/Form/src/VForm.vue @@ -1,8 +1,10 @@ diff --git a/src/components/Form/src/helper.ts b/src/components/Form/src/helper.ts index bca7a1b..0fb1265 100644 --- a/src/components/Form/src/helper.ts +++ b/src/components/Form/src/helper.ts @@ -1,8 +1,39 @@ +// import { useI18n } from '@/hooks/web/useI18n' +// const { t } = useI18n() /** * * @param schema 对应组件数据 * @description 用于自动设置placeholder */ -export function setTextPlaceholder(schema: VFormSchema) { +export function setTextPlaceholder(schema: VFormSchema): { + placeholder?: string + startPlaceholder?: string + endPlaceholder?: string +} { console.log(schema) + // const textMap = ['Input', 'Autocomplete', 'InputNumber'] + // const selectMap = ['Select', 'TimePicker', 'DatePicker', 'TimeSelect', 'TimeSelect'] + // if (textMap.includes(schema?.component as string)) { + // return { + // placeholder: t('common.inputText') + // } + // } + // if (selectMap.includes(schema?.component as string)) { + // // 一些范围选择器 + // const twoTextMap = ['datetimerange', 'daterange', 'monthrange', 'datetimerange', 'daterange'] + // if ( + // twoTextMap.includes(schema?.componentProps?.type || schema?.componentProps?.isRange) as string + // ) { + // return { + // startPlaceholder: t('common.startTimeText'), + // endPlaceholder: t('common.endTimeText'), + // rangeSeparator: '-' + // } + // } else { + // return { + // placeholder: t('common.selectText') + // } + // } + // } + return {} } diff --git a/src/hooks/web/useI18n.ts b/src/hooks/web/useI18n.ts new file mode 100644 index 0000000..57ea655 --- /dev/null +++ b/src/hooks/web/useI18n.ts @@ -0,0 +1,50 @@ +// // import { i18n } from '@/plugins/i18n' + +// type I18nGlobalTranslation = { +// (key: string): string +// (key: string, locale: string): string +// (key: string, locale: string, list: unknown[]): string +// (key: string, locale: string, named: Record): string +// (key: string, list: unknown[]): string +// (key: string, named: Record): string +// } + +// type I18nTranslationRestParameters = [string, any] + +// function getKey(namespace: string | undefined, key: string) { +// if (!namespace) { +// return key +// } +// if (key.startsWith(namespace)) { +// return key +// } +// return `${namespace}.${key}` +// } + +// export function useI18n(namespace?: string): { +// t: I18nGlobalTranslation +// } { +// const normalFn = { +// t: (key: string) => { +// return getKey(namespace, key) +// } +// } + +// if (!i18n) { +// return normalFn +// } + +// const { t, ...methods } = i18n.global + +// const tFn: I18nGlobalTranslation = (key: string, ...arg: any[]) => { +// if (!key) return '' +// if (!key.includes('.') && !namespace) return key +// return t(getKey(namespace, key), ...(arg as I18nTranslationRestParameters)) +// } +// return { +// ...methods, +// t: tFn +// } +// } + +// export const t = (key: string) => key diff --git a/src/main.ts b/src/main.ts index 1ccc27d..8673b97 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,18 +1,16 @@ -import { createApp } from 'vue' - -import App from './App.vue' - -const app = createApp(App) - // 引入windi css import '@/plugins/windicss' - +import { createApp } from 'vue' +import App from './App.vue' +const app = createApp(App) // 引入多语言 import { setupI18n } from '@/plugins/i18n' -setupI18n(app) - // 引入状态管理 import { setupStore } from '@/store' -setupStore(app) +;(async () => { + await setupI18n(app) -app.mount('#app') + setupStore(app) + + app.mount('#app') +})() diff --git a/src/plugins/i18n/index.ts b/src/plugins/i18n/index.ts index 3439569..a239a63 100644 --- a/src/plugins/i18n/index.ts +++ b/src/plugins/i18n/index.ts @@ -1,13 +1,15 @@ import { createI18n } from 'vue-i18n' import type { App } from 'vue' +// export let i18n: ReturnType + const messages = Object.fromEntries( Object.entries(import.meta.globEager('../../locales/*.ts')).map(([key, value]) => { return [key.slice(14, -3), value.default] }) ) -export function setupI18n(app: App): void { +export function setupI18n(app: App): void { const i18n = createI18n({ legacy: false, locale: 'zh-CN', diff --git a/src/types/componentType.d.ts b/src/types/componentType.d.ts index 069a17e..1c2b856 100644 --- a/src/types/componentType.d.ts +++ b/src/types/componentType.d.ts @@ -1,4 +1,5 @@ import type { Component, RendererNode, VNode, CSSProperties } from 'vue' +import type { RuleItem } from 'async-validator' declare global { // BfForm types start @@ -33,18 +34,18 @@ declare global { 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 interface FormItemRule extends RuleItem { + trigger?: string } + declare type FormRulesMap = Partial< + Record + > + declare type FormItemProps = { labelWidth?: string | number required?: boolean - rules?: FormRules | FormRules[] + rules?: FormRulesMap error?: string showMessage?: boolean inlineMessage?: boolean @@ -471,7 +472,7 @@ declare global { } } - declare type FormSchema = { + declare type VFormSchema = { field: string label?: string colProps?: ColProps @@ -502,5 +503,4 @@ declare global { } // VForm types end - declare type VFormSchema = FormSchema[] } diff --git a/src/utils/tsxHelper.ts b/src/utils/tsxHelper.ts new file mode 100644 index 0000000..399f6ee --- /dev/null +++ b/src/utils/tsxHelper.ts @@ -0,0 +1,16 @@ +import { Slots } from 'vue' +import { isFunction } from '@/utils/is' + +export function getSlot(slots: Slots, slot = 'default', data?: Recordable) { + // Reflect.has 判断一个对象是否存在某个属性 + if (!slots || !Reflect.has(slots, slot)) { + return null + } + if (!isFunction(slots[slot])) { + console.error(`${slot} is not a function!`) + return null + } + const slotFn = slots[slot] + if (!slotFn) return null + return slotFn(data) +}