From bcdffdba5a52f0b14e62261b8f26d5115945a4bb Mon Sep 17 00:00:00 2001 From: danranVm Date: Thu, 23 Dec 2021 20:08:54 +0800 Subject: [PATCH] fix(pro:layout): fix sider border-right style (#659) docs(pro:layout): add collapsed demo --- packages/pro/index.ts | 4 +- packages/pro/layout/demo/Collapsed.md | 14 ++++ packages/pro/layout/demo/Collapsed.vue | 73 +++++++++++++++++++ packages/pro/layout/style/sider.less | 2 +- packages/pro/layout/style/themes/default.less | 2 - .../layout/style/themes/default.variable.less | 2 + scripts/gen/generate.ts | 54 ++++++-------- scripts/gen/template.ts | 10 ++- 8 files changed, 121 insertions(+), 40 deletions(-) create mode 100644 packages/pro/layout/demo/Collapsed.md create mode 100644 packages/pro/layout/demo/Collapsed.vue diff --git a/packages/pro/index.ts b/packages/pro/index.ts index 6d6b19b9f..8e0c0af63 100644 --- a/packages/pro/index.ts +++ b/packages/pro/index.ts @@ -7,12 +7,12 @@ import type { App, Directive } from 'vue' -import { IxProLayout } from '@idux/pro/layout' +import { IxProLayout, IxProLayoutSiderTrigger } from '@idux/pro/layout' import { version } from '@idux/pro/version' const directives: Record = {} -const components = [IxProLayout] +const components = [IxProLayout, IxProLayoutSiderTrigger] const install = (app: App): void => { components.forEach(component => { diff --git a/packages/pro/layout/demo/Collapsed.md b/packages/pro/layout/demo/Collapsed.md new file mode 100644 index 000000000..93294c516 --- /dev/null +++ b/packages/pro/layout/demo/Collapsed.md @@ -0,0 +1,14 @@ +--- +title: + zh: 折叠状态 + en: Collapsed +order: 4 +--- + +## zh + +可以通过设置 `collapsed` 或者使用 `IxProLayoutSiderTrigger` 来控制侧边栏的折叠状态。 + +## en + +The collapse of the sider can be controlled by setting `collapsed` or using `IxProLayoutSiderTrigger`. diff --git a/packages/pro/layout/demo/Collapsed.vue b/packages/pro/layout/demo/Collapsed.vue new file mode 100644 index 000000000..3f8380631 --- /dev/null +++ b/packages/pro/layout/demo/Collapsed.vue @@ -0,0 +1,73 @@ + + + + + diff --git a/packages/pro/layout/style/sider.less b/packages/pro/layout/style/sider.less index 9bf49b874..ee880cb12 100644 --- a/packages/pro/layout/style/sider.less +++ b/packages/pro/layout/style/sider.less @@ -4,6 +4,7 @@ z-index: 1; height: 100%; width: @pro-layout-sider-width; + border-right: 1px solid #f0f0f0; &-fixed { position: sticky; @@ -21,7 +22,6 @@ &-content { flex: 1 1 0%; height: 100%; - border-right: 1px solid #f0f0f0; overflow: hidden; &:hover { diff --git a/packages/pro/layout/style/themes/default.less b/packages/pro/layout/style/themes/default.less index 769a0f4f1..c1c89d158 100644 --- a/packages/pro/layout/style/themes/default.less +++ b/packages/pro/layout/style/themes/default.less @@ -1,4 +1,2 @@ -@import '../../../style/themes/default.less'; -@import '../../../../components/layout/style/themes/default.less'; @import '../index.less'; @import './default.variable.less'; diff --git a/packages/pro/layout/style/themes/default.variable.less b/packages/pro/layout/style/themes/default.variable.less index b89b341ff..d178ec815 100644 --- a/packages/pro/layout/style/themes/default.variable.less +++ b/packages/pro/layout/style/themes/default.variable.less @@ -1,3 +1,5 @@ +@import '../../../style/themes/default.less'; +@import '../../../../components/layout/style/themes/default.variable.less'; //layout @pro-layout-height: 100%; diff --git a/scripts/gen/generate.ts b/scripts/gen/generate.ts index 825c15f3d..1dbfd3bf6 100644 --- a/scripts/gen/generate.ts +++ b/scripts/gen/generate.ts @@ -21,6 +21,7 @@ import { getTestTemplate, getThemesIndexTemplate, getThemesTemplate, + getThemesVariableTemplate, getTsxTemplate, getTypesTemplate, } from './template' @@ -149,20 +150,14 @@ class Generate { if (category === 'pro') { compName = `Pro${compName}` } - const docsZhTemplate = getDocsTemplate(category, compName, type) - const docsEnTemplate = getDocsTemplate(category, compName, type, true) - const designZhTemplate = getDesignTemplate() - const designEnTemplate = getDesignTemplate(true) - const demoTemplate = getDemoTemplate() - const demoVueTemplate = getDemoVueTemplate(compName) return Promise.all([ - writeFile(resolve(this.dirPath, 'docs', 'Index.zh.md'), docsZhTemplate), - writeFile(resolve(this.dirPath, 'docs', 'Index.en.md'), docsEnTemplate), - writeFile(resolve(this.dirPath, 'docs', 'Design.zh.md'), designZhTemplate), - writeFile(resolve(this.dirPath, 'docs', 'Design.en.md'), designEnTemplate), - writeFile(resolve(this.dirPath, 'demo', 'Basic.md'), demoTemplate), - writeFile(resolve(this.dirPath, 'demo', 'Basic.vue'), demoVueTemplate), + writeFile(resolve(this.dirPath, 'docs', 'Index.zh.md'), getDocsTemplate(category, compName, type)), + writeFile(resolve(this.dirPath, 'docs', 'Index.en.md'), getDocsTemplate(category, compName, type, true)), + writeFile(resolve(this.dirPath, 'docs', 'Design.zh.md'), getDesignTemplate()), + writeFile(resolve(this.dirPath, 'docs', 'Design.en.md'), getDesignTemplate(true)), + writeFile(resolve(this.dirPath, 'demo', 'Basic.md'), getDemoTemplate()), + writeFile(resolve(this.dirPath, 'demo', 'Basic.vue'), getDemoVueTemplate(compName)), ]) } @@ -177,26 +172,17 @@ class Generate { const compName = isPro ? `Pro${upperFirstName}` : upperFirstName const lowerFirstCompName = isPro ? lowerFirst(compName) : camelCaseName - const testTemplate = getTestTemplate(compName) - - const tsxTemplate = getTsxTemplate(compName, lowerFirstCompName) - const typesTemplate = getTypesTemplate(compName, lowerFirstCompName) - - const themesTemplate = getThemesTemplate(this.isPrivate) - const themesIndexTemplate = getThemesIndexTemplate(category) const lessTemplate = getLessTemplate(`${isPro ? 'pro-' : ''}${kebabCase(name)}`, this.isPrivate) - const indexTemplate = getIndexTemplate(compName) - const tasks = [ - writeFile(`${this.dirPath}/__tests__/${lowerFirstCompName}.spec.ts`, testTemplate), - writeFile(`${this.dirPath}/src/${compName}.tsx`, tsxTemplate), - writeFile(`${this.dirPath}/src/types.ts`, typesTemplate), - writeFile(`${this.dirPath}/style/themes/default.less`, themesTemplate), - writeFile(`${this.dirPath}/style/themes/default.variable.less`, ''), - writeFile(`${this.dirPath}/style/themes/default.ts`, themesIndexTemplate), + writeFile(`${this.dirPath}/__tests__/${lowerFirstCompName}.spec.ts`, getTestTemplate(compName)), + writeFile(`${this.dirPath}/src/${compName}.tsx`, getTsxTemplate(compName, lowerFirstCompName)), + writeFile(`${this.dirPath}/src/types.ts`, getTypesTemplate(compName, lowerFirstCompName)), + writeFile(`${this.dirPath}/style/themes/default.less`, getThemesTemplate()), + writeFile(`${this.dirPath}/style/themes/default.variable.less`, getThemesVariableTemplate(this.isPrivate)), + writeFile(`${this.dirPath}/style/themes/default.ts`, getThemesIndexTemplate(category)), writeFile(`${this.dirPath}/style/index.less`, lessTemplate), - writeFile(`${this.dirPath}/index.ts`, indexTemplate), + writeFile(`${this.dirPath}/index.ts`, getIndexTemplate(compName)), ] if (!this.isPrivate) { @@ -231,15 +217,19 @@ class Generate { } private async generateCdk(name: string) { - const cdkTemplate = getCdkUseTemplate(upperFirst(camelCase(name))) const indexTemplate = `export * from './src/use${upperFirst(camelCase(name))}'\ ` - const testTemplate = getCdkTestTemplate(upperFirst(camelCase(name)), camelCase(name)) return Promise.all([ - writeFile(resolve(this.dirPath, 'src', `use${upperFirst(camelCase(name))}.ts`), cdkTemplate), + writeFile( + resolve(this.dirPath, 'src', `use${upperFirst(camelCase(name))}.ts`), + getCdkUseTemplate(upperFirst(camelCase(name))), + ), writeFile(resolve(this.dirPath, 'index.ts'), indexTemplate), - writeFile(resolve(this.dirPath, '__tests__', `${camelCase(name)}.spec.ts`), testTemplate), + writeFile( + resolve(this.dirPath, '__tests__', `${camelCase(name)}.spec.ts`), + getCdkTestTemplate(upperFirst(camelCase(name)), camelCase(name)), + ), ]) } } diff --git a/scripts/gen/template.ts b/scripts/gen/template.ts index fb40e6153..58538b1ce 100644 --- a/scripts/gen/template.ts +++ b/scripts/gen/template.ts @@ -1,9 +1,13 @@ -export function getThemesTemplate(isPrivate: boolean): string { - return `@import '${isPrivate ? '../../../../' : '../../../'}style/themes/default.less'; -@import '../index.less'; +export function getThemesTemplate(): string { + return `@import '../index.less'; +@import './default.variable.less'; ` } +export function getThemesVariableTemplate(isPrivate: boolean): string { + return `@import '${isPrivate ? '../../../../' : '../../../'}style/themes/default.less';` +} + export function getLessTemplate(compName: string, isPrivate: boolean): string { return `@import '${isPrivate ? '../../../' : '../../'}style/mixins/reset.less';