diff --git a/script/create/constant.ts b/script/create/constant.ts index 4e68719..468a624 100644 --- a/script/create/constant.ts +++ b/script/create/constant.ts @@ -1,7 +1,8 @@ import { resolve } from 'pathe' export const PROJECT_DIR = process.cwd() export const resolver = (dir: string) => resolve(PROJECT_DIR, dir) -export const createStoryComponent = (category: string, component: string) => `\ + +export const createStoryComponent = (category: CategoryType, component: ComponentType) => `\ @@ -17,21 +18,21 @@ import type { ${component}Props } from 'element-plus' - -## Basic usage -${component} usage - - ` + +export const createStoryMd = (component: ComponentType) => `\ +## ${component} Attributes +` + export const componentCollection = { Basic: { components: [ 'Button', 'Border', 'Color', - 'LayoutContainer', + 'Container', 'Icon', 'Layout', 'Link', diff --git a/script/create/utils.ts b/script/create/utils.ts index d7797f2..88d0755 100644 --- a/script/create/utils.ts +++ b/script/create/utils.ts @@ -2,8 +2,8 @@ import { existsSync, mkdirSync, readdirSync, writeFileSync } from 'fs' import { lowerFirst, upperFirst } from '../utils' import type { CategoryType, ComponentType } from './constant' +import { categoryList, componentCollection, createStoryComponent, createStoryMd, resolver } from './constant' import { getCategory } from './questions/category' -import { categoryList, componentCollection, createStoryComponent, resolver } from './constant' export const getComponentChoices = async () => { const category: CategoryType = await getCategory() @@ -35,12 +35,15 @@ export const generateStoryDoc = (component: ComponentType) => { return console.log(`${component} not a legal component of EP, please check and re-enter!`) // 确定生成路径 - const fileName = `${lowerFirst(component)}.story.vue` - const storyDocDir = resolver(`src/components/${category}/`) - const storyDocFile = resolver(`src/components/${category}/${fileName}`) + const fileVueName = `${lowerFirst(component)}.story.vue` + const fileMdName = `${lowerFirst(component)}.story.md` + const storyDocDir = resolver(`src/components/${category}/${component}`) + const storyDocFileVue = resolver(`src/components/${category}/${component}/${fileVueName}`) + const storyDocFileMd = resolver(`src/components/${category}/${component}/${fileMdName}`) // 读取模板 const template = createStoryComponent(category, component) + const md = createStoryMd(component) // 生成文件 try { // 目录不存在则新建 @@ -48,14 +51,22 @@ export const generateStoryDoc = (component: ComponentType) => { mkdirSync(storyDocDir) // 组件文档存在则退出 - if (existsSync(storyDocFile)) { - console.log(`${fileName} Already existed!`) + if (existsSync(storyDocFileVue)) { + console.log(`${storyDocFileVue} Already existed!`) return } - writeFileSync(storyDocFile, template, { encoding: 'utf-8' }) + writeFileSync(storyDocFileVue, template, { encoding: 'utf-8' }) - console.log(`${fileName} Creation success!`) - console.log(`path: ${storyDocFile}`) + if (existsSync(storyDocFileMd)) { + console.log(`${storyDocFileMd} Already existed!`) + return + } + writeFileSync(storyDocFileMd, md, { encoding: 'utf-8' }) + + console.log(`${storyDocFileVue} Creation success!`) + console.log(`${storyDocFileMd} Creation success!`) + console.log(`path: ${storyDocFileVue}`) + console.log(`path: ${storyDocFileMd}`) } catch (e) { console.error(e.toString()) diff --git a/src/components/Basic/Button/button.story.md b/src/components/Basic/Button/button.story.md index 702deb3..ce35efb 100644 --- a/src/components/Basic/Button/button.story.md +++ b/src/components/Basic/Button/button.story.md @@ -7,7 +7,7 @@ | plain | determine whether it's a plain button | boolean | — | false | | text | determine whether it's a text button | boolean | — | false | | bg | determine whether the text button background color is always on | boolean | — | false | -| link | determine whether it's a link button | boolean | — | false | +| link | determine whether it's a link button | boolean | — | false | | round | determine whether it's a round button | boolean | — | false | | circle | determine whether it's a circle button | boolean | — | false | | loading | determine whether it's loading | boolean | — | false | diff --git a/src/components/Basic/Container/container.story.md b/src/components/Basic/Container/container.story.md new file mode 100644 index 0000000..5e0764a --- /dev/null +++ b/src/components/Basic/Container/container.story.md @@ -0,0 +1,53 @@ +## Container Attributes + +| Name | Description | Type | Accepted Values | Default | +| --------- | ----------------------------------- | ------ | --------------------- | -------------------------------------------------------------------------- | +| direction | layout direction for child elements | string | horizontal / vertical | vertical when nested with `el-header` or `el-footer`; horizontal otherwise | + +## Container Slots + +| Name | Description | Subtags | +| ---- | ------------------------- | ------------------------------------------ | +| — | customize default content | Container / Header / Aside / Main / Footer | + +## Header Attributes + +| Name | Description | Type | Accepted Values | Default | +| ------ | -------------------- | ------ | --------------- | ------- | +| height | height of the header | string | — | 60px | + +## Header Slots + +| Name | Description | +| ---- | ------------------------- | +| — | customize default content | + +## Aside Attributes + +| Name | Description | Type | Accepted Values | Default | +| ----- | ------------------------- | ------ | --------------- | ------- | +| width | width of the side section | string | — | 300px | + +## Aside Slots + +| Name | Description | +| ---- | ------------------------- | +| — | customize default content | + +## Main Slots + +| Name | Description | +| ---- | ------------------------- | +| — | customize default content | + +## Footer Attributes + +| Name | Description | Type | Accepted Values | Default | +| ------ | -------------------- | ------ | --------------- | ------- | +| height | height of the footer | string | — | 60px | + +## Footer Slots + +| Name | Description | +| ---- | ------------------------- | +| — | customize default content | diff --git a/src/components/Basic/Container/container.story.vue b/src/components/Basic/Container/container.story.vue new file mode 100644 index 0000000..aa4192f --- /dev/null +++ b/src/components/Basic/Container/container.story.vue @@ -0,0 +1,60 @@ + + + + +