From af1410c9a6e4e1376d46b14ce7f7eec89696ed23 Mon Sep 17 00:00:00 2001 From: Kagol Date: Tue, 12 Apr 2022 11:17:42 +0800 Subject: [PATCH] =?UTF-8?q?refactor(devui-cli):=20=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E5=88=9B=E5=BB=BA=E7=BB=84=E4=BB=B6=E6=A8=A1=E6=9D=BF=E7=9A=84?= =?UTF-8?q?=E8=84=9A=E6=9C=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui-vue/devui-cli/commands/create.js | 2 +- .../devui-cli/templates/component.js | 148 +++++++++++------- .../docs/components/cascader/index.md | 9 -- 3 files changed, 94 insertions(+), 65 deletions(-) diff --git a/packages/devui-vue/devui-cli/commands/create.js b/packages/devui-vue/devui-cli/commands/create.js index f09b99a784..c0085efebd 100644 --- a/packages/devui-vue/devui-cli/commands/create.js +++ b/packages/devui-vue/devui-cli/commands/create.js @@ -92,7 +92,7 @@ async function createComponent(params = {}) { const writeFiles = [ fs.writeFile(resolve(componentDir, INDEX_FILE_NAME), indexTemplate), - fs.writeFile(resolve(testsDir, `${testName}.ts`), testsTemplate) + fs.writeFile(resolve(testsDir, `${testName}.tsx`), testsTemplate) ]; if (!fs.existsSync(docsDir)) { diff --git a/packages/devui-vue/devui-cli/templates/component.js b/packages/devui-vue/devui-cli/templates/component.js index 9ae6812305..e1000c9c63 100644 --- a/packages/devui-vue/devui-cli/templates/component.js +++ b/packages/devui-vue/devui-cli/templates/component.js @@ -4,37 +4,45 @@ const { bigCamelCase } = require('../shared/utils'); // 创建组件模板 exports.createComponentTemplate = ({ styleName, componentName, typesName }) => `\ -import { defineComponent } from 'vue' +import { defineComponent, toRefs } from 'vue'; +import type { SetupContext } from 'vue'; import { ${camelCase(componentName)}Props, ${bigCamelCase( componentName -)}Props } from './${typesName}' -import './${styleName}.scss' +)}Props } from './${typesName}'; +import './${styleName}.scss'; export default defineComponent({ name: '${bigCamelCase(DEVUI_NAMESPACE)}${bigCamelCase(componentName)}', props: ${camelCase(componentName)}Props, emits: [], - setup(props: ${bigCamelCase(componentName)}Props, ctx) { + setup(props: ${bigCamelCase(componentName)}Props, ctx: SetupContext) { + // 直接解构 props 会导致响应式失效，需要使用 toRefs 进行包裹 + // const { data } = toRefs(props); + // console.log(data.value); + return () => { - return (
) - } + return ( +
+ ); + }; } -}) +}); `; // 创建类型声明模板 exports.createTypesTemplate = ({ componentName }) => `\ -import type { PropType, ExtractPropTypes } from 'vue' +import type { PropType, ExtractPropTypes } from 'vue'; export const ${camelCase(componentName)}Props = { - /* test: { - type: Object as PropType<{ xxx: xxx }> - } */ -} as const + // data: { + // type: type, + // default: defaultValue + // }, +} as const; export type ${bigCamelCase(componentName)}Props = ExtractPropTypes +)}Props>; `; // 创建指令模板 @@ -48,21 +56,24 @@ export default { updated() { }, beforeUnmount() { }, unmounted() { } -} +}; `; -// 创建server模板 +// 创建 service 模板 exports.createServiceTemplate = ({ componentName, typesName, serviceName }) => `\ -import { ${bigCamelCase(componentName)}Props } from './${typesName}' +import { ${bigCamelCase(componentName)}Props } from './${typesName}'; const ${bigCamelCase(serviceName)} = { // open(props: ${bigCamelCase(componentName)}Props) { } -} +}; -export default ${bigCamelCase(serviceName)} +export default ${bigCamelCase(serviceName)}; `; // 创建scss模板 exports.createStyleTemplate = ({ componentName }) => `\ +// 引入主题变量 +// @import '../../styles-var/devui-var.scss'; + .${CSS_CLASS_PREFIX}-${componentName} { // } @@ -79,11 +90,11 @@ exports.createIndexTemplate = ({ directiveName, serviceName }) => { - const importComponentStr = `\nimport ${bigCamelCase(componentName)} from './src/${componentName}'`; - const importDirectiveStr = `\nimport ${bigCamelCase(directiveName)} from './src/${directiveName}'`; - const importServiceStr = `\nimport ${bigCamelCase(serviceName)} from './src/${serviceName}'`; + const importComponentStr = `\nimport ${bigCamelCase(componentName)} from './src/${componentName}';`; + const importDirectiveStr = `\nimport ${bigCamelCase(directiveName)} from './src/${directiveName}';`; + const importServiceStr = `\nimport ${bigCamelCase(serviceName)} from './src/${serviceName}';`; - const installComponentStr = ` app.use(${bigCamelCase(componentName)} as any)`; + const installComponentStr = `app.component(${bigCamelCase(componentName)}.name, ${bigCamelCase(componentName)});`; const installDirectiveStr = `\n app.directive('${bigCamelCase(componentName)}', ${bigCamelCase( directiveName )})`; @@ -104,15 +115,11 @@ exports.createIndexTemplate = ({ getPartStr(hasService, installServiceStr); return `\ -import type { App } from 'vue'\ +import type { App } from 'vue';\ ${importStr} -${ - hasComponent - ? `\n${bigCamelCase(componentName)}.install = function(app: App): void { - app.component(${bigCamelCase(componentName)}.name, ${bigCamelCase(componentName)}) -}\n` - : '' -} + +export * from './src/${componentName}-types.ts'; + export { ${[ hasComponent ? bigCamelCase(componentName) : null, hasDirective ? bigCamelCase(directiveName) : null, @@ -124,7 +131,7 @@ export { ${[ export default { title: '${bigCamelCase(componentName)} ${title}', category: '${category}', - status: undefined, // TODO: 组件若开发完成则填入"100%"，并删除该注释 + status: '0%', // TODO 组件完成状态，开发完组件新特性请及时更新该状态值；若组件开发完成则填入'100%'，并删除该注释 install(app: App): void { ${installStr} } @@ -141,17 +148,28 @@ exports.createTestsTemplate = ({ hasDirective, hasService }) => `\ -import { mount } from '@vue/test-utils'; +import { ComponentPublicInstance } from 'vue'; +import { DOMWrapper, mount, VueWrapper } from '@vue/test-utils'; import { ${[ hasComponent ? bigCamelCase(componentName) : null, hasDirective ? bigCamelCase(directiveName) : null, hasService ? bigCamelCase(serviceName) : null ] .filter((p) => p !== null) - .join(', ')} } from '../index'; + .join(', ')} } from '..'; + +describe('${componentName}', () => { + let wrapper: VueWrapper; -describe('${componentName} test', () => { it('${componentName} init render', async () => { + wrapper = mount({ + setup() { + return () => { + return <${bigCamelCase(componentName)} />; + }; + }, + }); + // todo }) }) @@ -163,55 +181,75 @@ exports.createDocumentTemplate = ({ componentName, title }) => `\ // todo 组件描述 -### 何时使用 - -// todo 使用时机描述 +#### 何时使用 +// todo 使用场景描述 ### 基本用法 -// todo 用法描述 -:::demo // todo 展开代码的内部描述 + +:::demo // todo 基本用法描述 \`\`\`vue - \`\`\` ::: -### d-${componentName} - -d-${componentName} 参数 +### ${bigCamelCase(componentName)} 参数 -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 全局配置项 | -| ---- | ---- | ---- | ---- | --------- | --------- | -| | | | | | | -| | | | | | | -| | | | | | | +| 参数名 | 类型 | 默认值 | 说明 | 跳转 Demo | +| :---- | :---- | :---- | :---- | :--------- | +| | \`string\` | | | [基本用法](#基本用法) | +| | [IXxx](#ixxx) | | | | +| | | | | | -d-${componentName} 事件 +### ${bigCamelCase(componentName)} 事件 -| 事件 | 类型 | 说明 | 跳转 Demo | -| ---- | ---- | ---- | --------- | +| 事件名 | 回调参数 | 说明 | 跳转 Demo | +| :---- | :---- | :---- | :--------- | | | | | | | | | | | | | | | | +### ${bigCamelCase(componentName)} 插槽 + +| 插槽名 | 说明 | 跳转 Demo | +| :---- | :---- | :--------- | +| default | | | +| | | | +| | | | + +### 类型 + +#### IXxx + +\`\`\`ts +interface IXxx { + xxx: string; +} +\`\`\` + `; diff --git a/packages/devui-vue/docs/components/cascader/index.md b/packages/devui-vue/docs/components/cascader/index.md index 56a98f3f2b..dc7815aa07 100644 --- a/packages/devui-vue/docs/components/cascader/index.md +++ b/packages/devui-vue/docs/components/cascader/index.md @@ -368,15 +368,6 @@ export default defineComponent({ ::: - - ### API | 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 全局配置项 |