diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts index 64f2dc5..fe65102 100644 --- a/docs/.vuepress/config.ts +++ b/docs/.vuepress/config.ts @@ -22,6 +22,11 @@ export default defineUserConfig({ title: 'vlib-starter', description: 'Vue3 组件库开发模板 & Vue3 组件库实践指南', }, + '/en/': { + lang: 'en-US', + title: 'vlib-starter', + description: 'Vue3 components template & Vue3 components starter', + }, }, bundler: viteBundler({ @@ -46,6 +51,14 @@ export default defineUserConfig({ selectLanguageText: '选择语言', selectLanguageAriaLabel: '选择语言', }, + '/en/': { + navbar: navbar.en, + sidebar: sidebar.en, + sidebarDepth: 1, + selectLanguageName: 'English', + selectLanguageText: 'Choose Language', + selectLanguageAriaLabel: 'Choose Language', + }, }, }), diff --git a/docs/.vuepress/configs/navbar/en.ts b/docs/.vuepress/configs/navbar/en.ts new file mode 100644 index 0000000..26cf93a --- /dev/null +++ b/docs/.vuepress/configs/navbar/en.ts @@ -0,0 +1,8 @@ +import type { NavbarConfig } from 'vuepress' + +export const en: NavbarConfig = [ + { + text: 'Components', + link: '/en/components/', + }, +] diff --git a/docs/.vuepress/configs/navbar/index.ts b/docs/.vuepress/configs/navbar/index.ts index 317d268..520a203 100644 --- a/docs/.vuepress/configs/navbar/index.ts +++ b/docs/.vuepress/configs/navbar/index.ts @@ -1 +1,2 @@ export * from './zh' +export * from './en' diff --git a/docs/.vuepress/configs/sidebar/en.ts b/docs/.vuepress/configs/sidebar/en.ts new file mode 100644 index 0000000..671f646 --- /dev/null +++ b/docs/.vuepress/configs/sidebar/en.ts @@ -0,0 +1,23 @@ +import type { SidebarConfig } from 'vuepress' + +export const en: SidebarConfig = { + '/en/components': [ + { + text: 'Base Components', + children: [ + { + text: 'Button', + link: '/en/components/button/', + }, + { + text: 'BackTop', + link: '/en/components/backtop/', + }, + { + text: 'BackTopTsx', + link: '/en/components/backtoptsx/', + }, + ], + }, + ], +} diff --git a/docs/.vuepress/configs/sidebar/index.ts b/docs/.vuepress/configs/sidebar/index.ts index 317d268..520a203 100644 --- a/docs/.vuepress/configs/sidebar/index.ts +++ b/docs/.vuepress/configs/sidebar/index.ts @@ -1 +1,2 @@ export * from './zh' +export * from './en' diff --git a/docs/README.md b/docs/README.md index 779849e..24a139e 100644 --- a/docs/README.md +++ b/docs/README.md @@ -7,9 +7,9 @@ actions: link: /components/ type: primary features: - - title: Simplicity First + - title: 简洁第一 details: Minimal setup with markdown-centered project structure helps you focus on writing. - - title: Vue-Powered + - title: 数据驱动视图 details: Enjoy the dev experience of Vue, use Vue components in markdown, and develop custom themes with Vue. - title: Performant details: VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded. diff --git a/docs/components/README.md b/docs/components/README.md index ea7bf3c..00560f1 100644 --- a/docs/components/README.md +++ b/docs/components/README.md @@ -1,3 +1,3 @@ # Introduction -Vue components. +Vue 组件. diff --git a/docs/en/README.md b/docs/en/README.md new file mode 100644 index 0000000..779849e --- /dev/null +++ b/docs/en/README.md @@ -0,0 +1,23 @@ +--- +home: true +title: Home +heroImage: /images/hero.png +actions: + - text: Get Started + link: /components/ + type: primary +features: + - title: Simplicity First + details: Minimal setup with markdown-centered project structure helps you focus on writing. + - title: Vue-Powered + details: Enjoy the dev experience of Vue, use Vue components in markdown, and develop custom themes with Vue. + - title: Performant + details: VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded. + - title: Themes + details: Providing a default theme out of the box. You can also choose a community theme or create your own one. + - title: Plugins + details: Flexible plugin API, allowing plugins to provide lots of plug-and-play features for your site. + - title: Bundlers + details: Default bundler is Vite, while Webpack is also supported. Choose the one you like! +footer: MIT Licensed | Copyright © 2018-present Evan You +--- diff --git a/docs/en/components/README.md b/docs/en/components/README.md new file mode 100644 index 0000000..ea7bf3c --- /dev/null +++ b/docs/en/components/README.md @@ -0,0 +1,3 @@ +# Introduction + +Vue components. diff --git a/packages/vlib-ui/src/back-top-tsx/docs/README.en-US.md b/packages/vlib-ui/src/back-top-tsx/docs/README.en-US.md new file mode 100644 index 0000000..d6663a0 --- /dev/null +++ b/packages/vlib-ui/src/back-top-tsx/docs/README.en-US.md @@ -0,0 +1,54 @@ +--- +permalink: /en/components/backtoptsx +--- + +# BackTopTsx + +Back top button. + +## Base usage + +Swipe to view the button in the bottom right corner of the container. + + + +## Component Configuration + +### BackTopTsx Props + +| prop | description | type | default | +| ----------------- | ------------------------------------------------------------------------ | --------------- | ------- | +| target | Objects that trigger scrolling | string | window | +| visibility-height | Only when the rolling height reaches this parameter value will it appear | number / string | 200 | +| right | Control its display position, distance from the right margin of the page | number / string | 40 | +| bottom | Control its display position, distance from the bottom of the page | number / string | 40 | + +### BackTopTsx Events + +| event | description | param | +| ----- | ------------------------------------ | ----------------------------- | +| click | Event triggered by clicking a button | `(event: MouseEvent) => void` | + +### BackTopTsx Slots + +| slot | description | +| ------- | ------------------------- | +| default | Customize default content | + +## type definition + +Component exports the following type definitions + +```ts +import type { BackTopTsxProps } from '@bfehub/vlib-ui' +``` + +## Style variables + +The component provides the following CSS variables that can be used to customize styles + +| name | default | +| ------------------------------- | ------- | +| --vlib-back-top-tsx-right | 40px | +| --vlib-back-top-tsx-bottom | 40px | +| --vlib-back-top-tsx-button-size | 40px | diff --git a/packages/vlib-ui/src/back-top-tsx/README.md b/packages/vlib-ui/src/back-top-tsx/docs/README.md similarity index 97% rename from packages/vlib-ui/src/back-top-tsx/README.md rename to packages/vlib-ui/src/back-top-tsx/docs/README.md index e262184..e439b16 100644 --- a/packages/vlib-ui/src/back-top-tsx/README.md +++ b/packages/vlib-ui/src/back-top-tsx/docs/README.md @@ -10,7 +10,7 @@ permalink: /components/backtoptsx 通过滑动来查看容器右下角的按钮。 - + ## 组件配置 diff --git a/packages/vlib-ui/src/back-top/docs/README.en-US.md b/packages/vlib-ui/src/back-top/docs/README.en-US.md new file mode 100644 index 0000000..6af8fa1 --- /dev/null +++ b/packages/vlib-ui/src/back-top/docs/README.en-US.md @@ -0,0 +1,54 @@ +--- +permalink: /en/components/backtop +--- + +# BackTopTsx + +Back top button. + +## Base usage + +Swipe to view the button in the bottom right corner of the container. + + + +## Component Configuration + +### BackTopTsx Props + +| prop | description | type | default | +| ----------------- | ------------------------------------------------------------------------ | --------------- | ------- | +| target | Objects that trigger scrolling | string | window | +| visibility-height | Only when the rolling height reaches this parameter value will it appear | number / string | 200 | +| right | Control its display position, distance from the right margin of the page | number / string | 40 | +| bottom | Control its display position, distance from the bottom of the page | number / string | 40 | + +### BackTopTsx Events + +| event | description | param | +| ----- | ------------------------------------ | ----------------------------- | +| click | Event triggered by clicking a button | `(event: MouseEvent) => void` | + +### BackTopTsx Slots + +| slot | description | +| ------- | ------------------------- | +| default | Customize default content | + +## type definition + +Component exports the following type definitions + +```ts +import type { BackTopProps } from '@bfehub/vlib-ui' +``` + +## Style variables + +The component provides the following CSS variables that can be used to customize styles + +| name | default | +| ------------------------------- | ------- | +| --vlib-back-top-tsx-right | 40px | +| --vlib-back-top-tsx-bottom | 40px | +| --vlib-back-top-tsx-button-size | 40px | diff --git a/packages/vlib-ui/src/back-top/README.md b/packages/vlib-ui/src/back-top/docs/README.md similarity index 97% rename from packages/vlib-ui/src/back-top/README.md rename to packages/vlib-ui/src/back-top/docs/README.md index 1c0c847..27f3e9f 100644 --- a/packages/vlib-ui/src/back-top/README.md +++ b/packages/vlib-ui/src/back-top/docs/README.md @@ -10,7 +10,7 @@ permalink: /components/backtop 通过滑动来查看容器右下角的按钮。 - + ## 组件配置 diff --git a/packages/vlib-ui/src/button/docs/README.en-US.md b/packages/vlib-ui/src/button/docs/README.en-US.md new file mode 100644 index 0000000..fc6320b --- /dev/null +++ b/packages/vlib-ui/src/button/docs/README.en-US.md @@ -0,0 +1,13 @@ +--- +permalink: /en/components/button +--- + +# Button + +Normal button. + +## Base usage + +Use `type`, `plain`, `round`, and `circle` to define the style of the button. + + diff --git a/packages/vlib-ui/src/button/README.md b/packages/vlib-ui/src/button/docs/README.md similarity index 79% rename from packages/vlib-ui/src/button/README.md rename to packages/vlib-ui/src/button/docs/README.md index 3f5eeef..ecc3bb5 100644 --- a/packages/vlib-ui/src/button/README.md +++ b/packages/vlib-ui/src/button/docs/README.md @@ -10,4 +10,4 @@ permalink: /components/button 使用 `type`、`plain`、`round` 和 `circle` 来定义按钮的样式。 - +