Skip to content

Commit

Permalink
📃 docs: 文档编写
Browse files Browse the repository at this point in the history
  • Loading branch information
zzxming committed May 4, 2024
2 parents cdb5bf2 + 56aeb33 commit 2bce266
Show file tree
Hide file tree
Showing 8 changed files with 41 additions and 144 deletions.
14 changes: 14 additions & 0 deletions docs/component/captcha.md
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,20 @@
| fail | 当验证失败时触发 | - |
| move | 当滑块移动时触发 | `(value: number)` |

## CaptchaSlider 暴露属性

| 名称 | 说明 | 类型 |
| --------- | ------------------ | ------------------- |
| trackRef | 滑块 `ref` | `HTMLDivElement ` |
| resetting | 是否处于重置状态中 | `boolean` |
| currentX | 当前移动百分比 | `number` |

## CaptchaSlider 暴露方法

| 名称 | 说明 | 类型 |
| ----- | -------- | ------------------------- |
| reset | 重置验证 | `(value: number) => void` |

## CaptchaSlider 插槽

| 名称 | 说明 | 参数 |
Expand Down
6 changes: 2 additions & 4 deletions docs/component/count-to.md
Original file line number Diff line number Diff line change
@@ -1,24 +1,22 @@
# CountTo

<!--
## 基础用法

:::demo count-to/base

::: -->
:::

## 手动控制开始与暂停

:::demo count-to/control

:::

<!--
## 设置计数保留小数点位数

:::demo count-to/decimal

::: -->
:::

当在使用 `animation` 动画时,整体的计数动画时长会改变,整体时长会由 `duration` 变为 `duration` + `animationDuration`,在使用 `stopCount` 时也会延迟 `animationDuration` 的时间才完全停止,所以如果将 `animationDuration` 设置为 0 ,则不会出现滚动动画

Expand Down
34 changes: 18 additions & 16 deletions docs/component/loading.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
<script >
document.body.classList.add('vp-raw')
<script>
if (!import.meta.env.SSR) {
document.body.classList.add('vp-raw')
}
</script>

# Drawer
Expand Down Expand Up @@ -32,14 +34,14 @@ console.log(loadingInstance1 === loadingInstance2); // true

## Loading Props

| 名称 | 类型 | 说明 | 默认值 |
| ---------- | ----------------------- | -------------------- | ------ |
| visible | `boolean` | 是否显示加载 | false |
| fullscreen | `boolean` | 是否全屏显示 | false |
| text | `string` | 在加载图标下面的文字 | - |
| background | `string` | 遮罩背景色 | - |
| lock | `boolean` | 锁定滚动条 | true |
| target | `string \| HTMLElement` | teleport 值 | - |
| 名称 | 类型 | 说明 | 默认值 |
| ---------- | --------- | -------------------- | ------- |
| visible | `boolean` | 是否显示加载 | `false` |
| fullscreen | `boolean` | 是否全屏显示 | `false` |
| text | `string` | 在加载图标下面的文字 | - |
| background | `string` | 遮罩背景色 | - |
| lock | `boolean` | 锁定滚动条 | `true` |
| target | `string ` | teleport 值 | - |

## v-loading 指令

Expand All @@ -50,12 +52,12 @@ console.log(loadingInstance1 === loadingInstance2); // true

## CdxLoading.service 函数

| 参数 | 类型 | 说明 | 默认值 |
| ---------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------ |
| text | `string` | 同组件的 `text` 属性 | - |
| background | `string` | 同组件的 `background` 属性 | - |
| fullscreen | `boolean` | 同组件的 `fullscreen` 属性 | false |
| target | `string \| HTMLElement` | 插入至的 DOM 节点。可传入一个 DOM 对象或字符串; 若传入字符串,则会将其作为参数传入 document.querySelector以获取到对应 DOM 节点 | - |
| 参数 | 类型 | 说明 | 默认值 |
| ---------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------- |
| text | `string` | 同组件的 `text` 属性 | - |
| background | `string` | 同组件的 `background` 属性 | - |
| fullscreen | `boolean` | 同组件的 `fullscreen` 属性 | `false` |
| target | `string \| HTMLElement` | 插入至的 DOM 节点。可传入一个 DOM 对象或字符串; 若传入字符串,则会将其作为参数传入 document.querySelector以获取到对应 DOM 节点 | - |

| 返回值 | 类型 | 说明 |
| -------- | ------------ | ---------------- |
Expand Down
5 changes: 2 additions & 3 deletions docs/component/usage.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

## 安装

```
```sh
npm install cdx-component
```

Expand All @@ -18,14 +18,13 @@ npm install cdx-component

安装插件:

```
```sh
npm i -D unplugin-vue-components
```

`vite.config.ts` 中拓展以下内容:

```ts
// vite.config.ts
import { defineConfig } from 'vite';
import Components from 'unplugin-vue-components/vite';
import { CdxComponentResolver } from 'cdx-component';
Expand Down
1 change: 0 additions & 1 deletion docs/demos/count-to/control.vue
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@
:end-value="endValue"
:duration="duration"
:animation="true"
:animationDuration="0"
></CdxCountTo>
</template>

Expand Down
119 changes: 1 addition & 118 deletions internal/build/gulpfile.ts
Original file line number Diff line number Diff line change
@@ -1,124 +1,7 @@
import { copyFile } from 'fs/promises';
import path from 'path';
import { task, series } from 'gulp';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
// import dts from 'vite-plugin-dts';
import * as glob from 'glob';
import commonjs from '@rollup/plugin-commonjs';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import dts from 'rollup-plugin-dts';
import esbuild from 'rollup-plugin-esbuild';
import type { OutputOptions, ModuleFormat } from 'rollup';
import { rollup } from 'rollup';
import {
PKG_NAME,
PKG_PREFIX,
projRoot,
cdxPackage,
buildOutput,
cdxRoot,
pkgRoot,
componentPackage,
rollupExternalFromPackage,
} from '@cdx-component/build-utils';
import { cdxPackage, buildOutput } from '@cdx-component/build-utils';

export const copyFiles = () => copyFile(cdxPackage, path.join(buildOutput, 'package.json'));
task('default', series(copyFiles));

// const beforeWriteFile = (target: string) => {
// return (filePath: string, content: string) => {
// if (['gulpfile', 'build'].some((exclude) => filePath.includes(exclude))) return false;
// // rollup 打包根为 cdx-component, 打包后文件需同步 d.ts 出现在根, 并处理相对路径
// if (filePath.includes(`/${target}/cdx-component/`)) {
// return {
// filePath: filePath.replace(`/${target}/cdx-component/`, `/${target}/`),
// content: content.replace(/\.\.\//g, './'),
// };
// }
// };
// };
// const dtsConfig = (target: string) => {
// return {
// entryRoot: pkgRoot,
// outDir: path.resolve(buildOutput, target),
// tsconfigPath: path.resolve(projRoot, 'tsconfig.json'),
// beforeWriteFile: beforeWriteFile(target),
// };
// };
// const rollupOutput = (target: ModuleFormat, format: string): OutputOptions => ({
// format: target,
// entryFileNames: '[name].js',
// preserveModules: true,
// dir: path.resolve(buildOutput, format),
// preserveModulesRoot: cdxRoot,
// exports: target === 'cjs' ? 'named' : undefined,
// paths: (id: string) => {
// if (id.startsWith(`${PKG_PREFIX}/theme`)) {
// return id.replace(PKG_PREFIX, PKG_NAME);
// }
// return id;
// },
// });
// // return await bundle.write({
// // target: 'modules',
// // outDir: path.resolve(buildOutput, 'es'),
// // sourcemap: true,
// // minify: false,

// // format: config.format,
// // dir: config.output.path,
// // exports: module === 'cjs' ? 'named' : undefined,
// // preserveModules: true,
// // preserveModulesRoot: epRoot,
// // sourcemap: true,
// // entryFileNames: `[name].${config.ext}`,

// // format: "umd",
// // name: "bundle",
// // exports: "named",
// // dir: path.resolve(outputDir, file),
// // });

// const buildModules = async () => {
// const input = glob
// .sync('**/*.{js,ts,vue}', {
// cwd: pkgRoot,
// ignore: ['**/*.config.*'],
// absolute: true,
// })
// .filter((path) => !['node_modules', 'gulpfile', 'dist'].some((exclude) => path.includes(exclude)));

// const bundle = await rollup({
// input,
// plugins: [
// vue(),
// vueJsx(),
// // nodeResolve({
// // extensions: ['.mjs', '.js', '.json', '.ts'],
// // }),
// commonjs(),
// esbuild({
// loaders: {
// '.vue': 'ts',
// },
// }),
// // dts(dtsConfig('es')),
// // dts(dtsConfig('lib')),
// ],
// external: rollupExternalFromPackage(componentPackage, (id: string) => {
// return /css$/.test(id);
// }),
// treeshake: false,
// preserveEntrySignatures: 'allow-extension',
// });

// return Promise.all(
// [rollupOutput('es', 'es'), rollupOutput('cjs', 'lib')].map((config) => {
// bundle.write({
// ...config,
// });
// }),
// );
// };
// task('buildModules', buildModules);
2 changes: 0 additions & 2 deletions packages/components/count-to/src/count-to.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@ import { countToProps, countToEmits } from './count-to';
import { useBem } from '@cdx-component/hooks';
import { raf, caf, getDecimalLength, toStringNumber, getIntegerLength } from '@cdx-component/utils';
// 负到正, 相同整数位,
defineOptions({ name: 'CdxCountTo' });
const props = defineProps(countToProps);
const emits = defineEmits(countToEmits);
Expand Down
4 changes: 4 additions & 0 deletions packages/components/loading/src/loading.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
import { buildProps } from '@cdx-component/utils';
import type { ExtractPropTypes } from 'vue';

let HTMLElement: any;
if (typeof window !== 'undefined') {
HTMLElement = window.HTMLElement;
}
export const loadingProps = buildProps({
text: {
type: String,
Expand Down

0 comments on commit 2bce266

Please sign in to comment.