fix(pro:layout): fix sider border-right style (#659)

docs(pro:layout): add collapsed demo
IDuxFE · Dec 23, 2021 · bcdffdb · bcdffdb
1 parent e7550c6
commit bcdffdb
Show file tree

Hide file tree

Showing 8 changed files with 121 additions and 40 deletions.
diff --git 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<string, Directive> = {}
 
-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
@@ -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
@@ -0,0 +1,73 @@
+<template>
+  <IxProLayout v-model:activeKey="activeKey" v-model:collapsed="collapsed" :menus="dataSource">
+    <template #headerExtra>
+      <IxProLayoutSiderTrigger></IxProLayoutSiderTrigger>
+    </template>
+    <template #siderFooter>
+      <IxProLayoutSiderTrigger></IxProLayoutSiderTrigger>
+    </template>
+    <div class="content">
+      <IxButton @click="collapsed = !collapsed">Change Collapsed</IxButton>
+    </div>
+  </IxProLayout>
+</template>
+
+<script setup lang="ts">
+import type { ProLayoutMenuData } from '@idux/pro/layout'
+
+import { ref } from 'vue'
+
+const activeKey = ref()
+const collapsed = ref(false)
+const dataSource: ProLayoutMenuData[] = [
+  {
+    type: 'sub',
+    key: 'sub1',
+    icon: 'setting',
+    label: 'Sub Menu 1',
+    children: [
+      { type: 'item', key: 'item4', label: 'Item 4', icon: 'setting' },
+      { type: 'item', key: 'item5', label: 'Item 5', icon: 'setting' },
+      { type: 'divider', key: 'divider2' },
+      {
+        type: 'sub',
+        key: 'sub2',
+        icon: 'setting',
+        label: 'Menu Sub 2',
+        children: [
+          { type: 'item', key: 'item6', label: 'Item 6' },
+          { type: 'item', key: 'item7', label: 'Item 7' },
+        ],
+      },
+      {
+        type: 'sub',
+        key: 'sub3',
+        icon: 'setting',
+        label: 'Menu Sub 3',
+        children: [
+          { type: 'item', key: 'item8', label: 'Item 8' },
+          { type: 'item', key: 'item9', label: 'Item 9' },
+        ],
+      },
+    ],
+  },
+  {
+    type: 'sub',
+    key: 'sub4',
+    icon: 'github',
+    label: 'Menu Sub 4',
+    children: [
+      { type: 'item', key: 'item10', label: 'Item 10' },
+      { type: 'item', key: 'item11', label: 'Item 11' },
+    ],
+  },
+  { type: 'item', key: 'item2', icon: 'mail', label: 'Item 2' },
+]
+</script>
+
+<style lang="less" scoped>
+.content {
+  padding: 24px;
+  line-height: 24px;
+}
+</style>
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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';