m8-framework-mcp 1.0.0 → 1.0.3

package/docs/m8mpdoc-develop/018-EPUI/347/273/204/344/273/266/032-pagination/345/210/206/351/241/265.md

@@ -1,192 +0,0 @@
-# Pagination 分页
-
-分页组件，用于分页展示大量数据。
-
-## 基础用法
-
-通过 `total` 属性设置总数据条数，通过 `current-page` 属性设置当前页数，通过 `page-size` 属性设置每页条数。
-
-```html
-<e-pagination-m
-  v-model:current="current"
-  v-model:page-size="pageSize"
-  :total="50"
-></e-pagination-m>
-```
-
-```ts
-import { ref } from "vue";
-const current = ref(1);
-const pageSize = ref(10);
-```
-
-## 改变每页数量
-
-`show-size-changer`设置为 `true` 时可以改变每页数量。
-
-当 `total` 大于 `50` 时默认为 `true`
-
-```html
-<e-pagination-m :total="50" show-size-changer></e-pagination-m>
-```
-
-## 自定义下拉选项
-
-通过传入`page-size-options`属性可以自定义每页数量的下拉选项。
-
-通过传入`build-option-text`方法对每页数量展示文本进行自定义。
-
-```html
-<e-pagination-m
-  v-model:page-size="pageSizeRef"
-  :total="50"
-  :page-size-options="pageSizeOptions"
-  :build-option-text="buildOptionText"
-  show-size-changer
-  @show-size-change="onShowSizeChange"
-></e-pagination-m>
-```
-
-```js
-import { ref, h } from 'vue';
-
-const pageSizeRef = ref(10);
-const pageSizeOptions = ref<string[]>(['10', '20', '30', '40', '50']);
-const buildOptionText = (option) => {
-    if (option.value !== '50') {
-        return `${option.value}条/页`;
-    }
-    return '全部';
-};
-const onShowSizeChange = (current: number, pageSize: number) => {
-    pageSizeRef.value = pageSize;
-};
-```
-
-## 快速跳转
-
-`showQuickJumper`设置为 `true` 时可以选择页码进行快速跳转。
-
-```html
-<e-pagination-m :total="50" showQuickJumper></e-pagination-m>
-```
-
-## 迷你
-
-设置`size`属性为 `small` 时变为迷你尺寸。
-
-```html
-<e-pagination-m size="small" :total="50" />
-<e-pagination-m size="small" :total="50" show-size-changer show-quick-jumper />
-<e-pagination-m
-  size="small"
-  :total="50"
-  :show-total="(total) => `Total ${total} items`"
-/>
-```
-
-## 简洁模式
-
-设置`simple`属性为 `true` 时开启简洁模式。
-
-移动端在开启快速跳转和选择每页数量时，会自动开启简洁模式。
-
-```html
-<e-pagination-m :total="50" simple></e-pagination-m>
-```
-
-## 显示总数
-
-通过`showTotal`属性可以设置显示数据总量和当前数据顺序。
-
-该属性是一个方法，返回一个字符串。
-
-```html
-<e-pagination-m
-  v-model:current="current"
-  v-model:page-size="pageSize"
-  :total="85"
-  :show-total="(total, range) => `${range[0]}-${range[1]} of ${total} items`"
-/>
-```
-
-```ts
-const current = ref(1);
-const pageSize = ref(10);
-```
-
-## 修改上一步和下一步
-
-通过`itemRender`插槽对分页组件的上一步、下一步进行自定义。
-
-注意：移动端不提供 `originalElement`， 默认为 `undefined`
-
-```html
-<e-pagination-m :total="50">
-  <template #itemRender="{ type, originalElement }">
-    <span v-if="type === 'prev'">Previous</span>
-    <span v-else-if="type === 'next'">Next</span>
-    <component :is="originalElement" v-else />
-  </template>
-</e-pagination-m>
-```
-
-## API
-
-### Attributes
-
-| 属性名            | 描述                                                                            | 类型                                                                                         | 默认值                    |
-| ----------------- | ------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | ------------------------- |
-| current(v-model)  | 当前页数                                                                        | number                                                                                       | 1                         |
-| defaultPageSize   | 默认的每页条数                                                                  | number                                                                                       | 10                        |
-| disabled          | 禁用分页                                                                        | boolean                                                                                      | false                     |
-| hideOnSinglePage  | 只有一页时是否隐藏分页器                                                        | boolean                                                                                      | false                     |
-| itemRender        | 用于自定义页码的结构                                                            | ({page: number, type: 'page' / 'prev'/ 'next', originalElement: undefined}) => vNode/ v-slot | -                         |
-| pageSize(v-model) | 每页条数                                                                        | number                                                                                       | -                         |
-| pageSizeOptions   | 指定每页可以显示多少条                                                          | string[] \| number[]                                                                         | ['10', '20', '50', '100'] |
-| responsive        | 当 size 未指定时，根据屏幕宽度自动调整尺寸，PC 端属性不适用移动端，移动端不支持 | boolean                                                                                      | false                     |
-| showLessItems     | 是否显示较少页面内容，为`true`时仅展示 3 个页码，为`false`时展示 5 个           | boolean                                                                                      | false                     |
-| showQuickJumper   | 是否可以快速跳转至某页                                                          | boolean                                                                                      | false                     |
-| showSizeChanger   | 是否展示 pageSize 切换器, 当 total 大于 50 时默认为 true                        | boolean                                                                                      | false                     |
-| showTotal         | 显示数据总量和当前数据顺序                                                      | (total: number, range: [number, nuber]) => string                                            | -                         |
-| simple            | 简单分页模式                                                                    | boolean                                                                                      | -                         |
-| total             | 数据总数                                                                        | number                                                                                       | 0                         |
-| buildOptionText   | 自定义每页数量下拉选项文本                                                      | (option: { value: number }) => string                                                        | -                         |
-| size              | 尺寸                                                                            | `default`/`small`                                                                            | `default`                 |
-
-#### Events
-
-| 事件名         |                           说明                           | 回调参数                       |
-| :------------- | :------------------------------------------------------: | :----------------------------- |
-| change         | 页码或 pageSize 改变的回调，参数是改变后的页码及每页条数 | page: number, pageSize: number |
-| showSizeChange |                   pageSize 变化的回调                    | page: number, pageSize: number |
-
-### Slots
-
-| 属性名     | 描述                                | SlotProps                                                              |
-| ---------- | ----------------------------------- | ---------------------------------------------------------------------- |
-| itemRender | 可自定义分页组件的 prev、next、page | page: number, type: 'page'/ 'prev'/ 'next', originalElement: undefined |
-
-::: ifdef M84
-<iframe
- src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/epshowcase/examples/e-pagination-m"
- frameborder=0
- allowfullscreen class="ui-showcase-iframe">
-</iframe>
-::: endif
-
-<style>
- .ui-showcase-iframe {
-    position: fixed;
-    right: 3.5vw;
-    top: 17%;
-    width: 375px;
-    height: 75vh;
-    box-shadow: 0 0 12px 6px #eee;
-    border-radius: 15px;
- }
- .main .markdown-body {
-    padding: 45px;
-    width: calc(97vw - 661px);
-}
- </style>

package/docs/m8mpdoc-develop/018-EPUI/347/273/204/344/273/266/033-configprovider/345/205/250/345/261/200/351/205/215/347/275/256.md

@@ -1,417 +0,0 @@
-# ConfigProvider 全局配置
-
-全局配置组件，为组件提供统一的全局配置。可以配置国际化语言、组件尺寸、表格样式、zIndex 层级等。
-
-## 国际化配置
-
-通过设置 `lang` 属性来实现国际化配置。
-
-```vue
-<template>
-    <div>
-        <e-button-m @click="toggle">Switch Language</e-button-m>
-        <e-config-provider-m :lang="language">
-            <e-table-m :data="[]" />
-            <e-pagination-m :total="100" />
-        </e-config-provider-m>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { computed, ref } from 'vue';
-import en from '@epoint-mfe/eui-components/src/hooks/use-locale/lang/en';
-import { getAvailableLanguages, registerLocale } from '@epoint-mfe/eui-components';
-
-const language = ref('zh-cn');
-
-// 注册其他语言包
-const autoLoad = () => {
-    const languages = getAvailableLanguages();
-
-    // 如语言包未注册，则引入并注册
-    if (!languages.includes('en')) {
-        registerLocale('en', en);
-    }
-};
-
-const toggle = () => {
-    const target = language.value === 'zh-cn' ? 'en' : 'zh-cn';
-
-    if (target === 'en') {
-        // 注册其他语言包，en语言包已内置可直接切换，此处仅作代码示例
-        autoLoad();
-    }
-
-    language.value = target;
-};
-</script>
-```
-
-## 对按钮进行配置
-
-设置是否自动在两个中文字符之间插入空格
-
-```vue
-<template>
-    <div>
-        <div>
-            <e-checkbox-m v-model="config.autoInsertSpace">autoInsertSpace</e-checkbox-m>
-        </div>
-        <e-config-provider-m :button="config">
-            <e-button-m>中文</e-button-m>
-        </e-config-provider-m>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { reactive } from 'vue';
-
-const config = reactive({
-    autoInsertSpace: true
-});
-</script>
-```
-
-## 对消息进行配置
-
-设置可同时显示的消息最大数量
-
-```vue
-<template>
-    <e-config-provider-m :message="configMessage">
-        <e-button-m @click="open">OPEN</e-button-m>
-    </e-config-provider-m>
-</template>
-
-<script lang="ts" setup>
-import { reactive } from 'vue';
-import { EMessageM } from '@epoint-mfe/eui-components';
-
-const configMessage = reactive({
-    max: 3
-});
-const open = () => {
-    EMessageM({
-        message: 'This is a normal message'
-    });
-};
-</script>
-```
-
-## 对 select 进行配置
-
-设置是否显示清空按钮
-
-```vue
-<template>
-    <div>
-        <div>
-            <e-checkbox-m v-model="selectConfig.clearable">showclearable</e-checkbox-m>
-        </div>
-        <e-config-provider-m :select="selectConfig">
-            <e-select-m v-model="value1" multiple placeholder="请选择">
-                <e-option-m v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-            </e-select-m>
-        </e-config-provider-m>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { reactive, ref } from 'vue';
-
-const value1 = ref([]);
-const options = [
-    {
-        value: 'Option1',
-        label: 'Option1'
-    },
-    {
-        value: 'Option2',
-        label: 'Option2'
-    },
-    {
-        value: 'Option3',
-        label: 'Option3'
-    },
-    {
-        value: 'Option4',
-        label: 'Option4'
-    },
-    {
-        value: 'Option5',
-        label: 'Option5'
-    }
-];
-const selectConfig = reactive({
-    clearable: true
-});
-</script>
-```
-
-## 对 datePicker 进行配置
-
-设置格式和每周开始的日期
-
-```vue
-<template>
-    <div>
-        <div>
-            firstDayOfWeek：
-            <e-input-number-m v-model="configDatePicker.firstDayOfWeek" :min="1" :max="7" />
-        </div>
-        <div>
-            format：
-            <e-select-m v-model="configDatePicker.format" :options="optionsDatePicker" />
-        </div>
-        <e-config-provider-m :date-picker="configDatePicker">
-            <e-date-picker-m v-model="valueDatePicker" type="date" />
-        </e-config-provider-m>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, reactive } from 'vue';
-
-const optionsDatePicker = [
-    { label: 'YYYY-MM-DD', value: 'YYYY-MM-DD' },
-    { label: 'YYYY/MM/DD', value: 'YYYY/MM/DD' },
-    { label: 'YYYY年MM月DD日', value: 'YYYY年MM月DD日' }
-];
-const valueDatePicker = ref('');
-const configDatePicker = reactive({
-    firstDayOfWeek: 1,
-    format: 'YYYY-MM-DD'
-});
-</script>
-```
-
-## 对表单进行配置
-
-设置标签对齐方式以及标签的后缀
-
-```vue
-<template>
-    <e-config-provider-m :form="formConfig">
-        <e-form-m label-width="100px" :model="formConfig" :rules="rules">
-            <e-form-item-m label="标签后缀">
-                <e-input-m v-model="formConfig.labelSuffix" />
-            </e-form-item-m>
-            <e-form-item-m label="标签对齐方式">
-                <e-select-m v-model="formConfig.labelPosition" placeholder="请选择对齐方式">
-                    <e-option-m v-for="item in optionsForm" :key="item.value" :label="item.label" :value="item.value" />
-                </e-select-m>
-            </e-form-item-m>
-            <e-form-item-m label="必填星号位置设置" prop="requireAsteriskPosition">
-                <e-select-m v-model="formConfig.requireAsteriskPosition" placeholder="请选择星号位置">
-                    <e-option-m
-                        v-for="item in optionsForm2"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value"
-                    />
-                </e-select-m>
-            </e-form-item-m>
-        </e-form-m>
-    </e-config-provider-m>
-</template>
-
-<script lang="ts" setup>
-import { reactive } from 'vue';
-
-const formConfig = reactive({
-    labelSuffix: ':',
-    labelPosition: 'top',
-    requireAsteriskPosition: 'left'
-});
-const optionsForm = [
-    {
-        value: 'left',
-        label: '左侧'
-    },
-    {
-        value: 'right',
-        label: '右侧'
-    },
-    {
-        value: 'top',
-        label: '顶部'
-    }
-];
-const optionsForm2 = [
-    {
-        value: 'left',
-        label: '左侧'
-    },
-    {
-        value: 'right',
-        label: '右侧'
-    }
-];
-const rules = reactive<FormRules>({
-    requireAsteriskPosition: [
-        {
-            required: true,
-            trigger: 'change'
-        }
-    ]
-});
-</script>
-```
-
-## 对文件上传进行配置
-
-设置文件上传全局属性
-
-```vue
-<template>
-    <e-config-provider-m :file-upload="configFileUpload">
-        <e-file-upload-m action="https://fe.epoint.com.cn/mock/752/eui-vue/uploadFile" />
-    </e-config-provider-m>
-</template>
-
-<script lang="ts" setup>
-import { reactive } from 'vue';
-
-const configFileUpload = reactive({
-    chunkSize: 1024,
-    typeLimit: 'doc,docx,xls,xlsx,png,jpg,jpeg'
-});
-</script>
-```
-
-## API
-
-### Attributes
-
-| 属性名                | 描述                                                           | 类型                                                                                                                          | 默认值   |
-| --------------------- | -------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | -------- |
-| lang                  | 语言包的 key 值，内置可选：`zh-cn`, `en`, `zh-tw`              | string                                                                                                                        | zh-cn    |
-| locale                | 翻译文本对象, 不推荐使用，请使用 lang 属性替代                 | object - `Language`                                                                                                           | zh-CN    |
-| size                  | 全局组件大小                                                   | enum - `small`, `default`, `large`                                                                                            | default  |
-| zIndex                | 全局初始化 zIndex 的值                                         | number                                                                                                                        | -        |
-| button                | 按钮相关配置, 详见下表                                         | object-`{ autoInsertSpace?: boolean }`                                                                                        | 详见下表 |
-| message               | 消息相关配置, 详见下表                                         | object-`{ max?: number }`                                                                                                     | 详见下表 |
-| select                | select 相关配置, 详见下表                                      | object-`{ clearable?: boolean }`                                                                                              | 详见下表 |
-| date-picker           | date-picker 相关配置, 详见下表                                 | object-`{ firstDayOfWeek?: number, format?: string }`                                                                         | 详见下表 |
-| form                  | 表单相关配置, 详见下表                                         | object-`{ labelSuffix?: string, labelPosition?: string, requireAsteriskPosition?: string }`               | 详见下表 |
-| upload                | 上传组件相关配置, 详见下表                                     | object-`{ accept?: string }`                                                                                                  | 详见下表 |
-| table                 | 表格组件相关配置, 详见下表                                     | object-`{ pageSize?: number, borderStyle?: string, stripe?: boolean }`                                                        | 详见下表 |
-| fileUpload            | 文件上传组件相关配置, 详见下表                                 | object-`{needChunkMd5?: boolean,needChunkLocal?: boolean,fileNameLengthLimit?: number,typeLimit?: string,chunkSize?: number}` | 详见下表 |
-| experimental-features | 将要添加的实验阶段的功能，所有功能都是默认设置为 false         | object                                                                                                                        | —        |
-| enableGlobalContext   | 是否设置为全局配置（影响通过 createVNode + render 创建的组件） | boolean                                                                                                                       | false    |
-| verifyCode            | 验证码相关配置, 详见下表                                       | object-`{httpRequest?: VerifyRequestHandler}`                                                                                 | 详见下表 |
-
-### Language 国际化配置
-
-Language 类型是一个对象，用于配置组件库中各个组件的文本国际化。它包含了各个组件的文本配置项，结构如下：
-
-```typescript
-interface Language {
-  name: string; // 语言名称，如 'zh-cn', 'en'
-  e: {
-    // 组件相关的国际化配置
-    table: {
-      // 表格组件的国际化配置
-      emptyText: string; // 数据为空时显示的文本
-      loadingText: string; // 加载中显示的文本
-      selectAll: string; // 全选文本
-      selectInvert: string; // 反选文本
-      ...
-    };
-    // 其他组件的国际化配置...
-  };
-}
-```
-
-### Button Attribute​
-
-| Attribute       | Description                    | Type    | Default |
-| --------------- | ------------------------------ | ------- | ------- |
-| autoInsertSpace | 自动在两个中文字符之间插入空格 | boolean | false   |
-
-### Message Attribute​
-
-| Attribute | Description              | Type   | Default |
-| --------- | ------------------------ | ------ | ------- |
-| max       | 可同时显示的消息最大数量 | number | —       |
-
-### VerifyCode Attribute​
-
-| Attribute   | Description              | Type                                                                                         | Default |
-| ----------- | ------------------------ | -------------------------------------------------------------------------------------------- | ------- |
-| httpRequest | 自定义的初始化和验证请求 | VerifyRequestHandler-`(options: VerifyRequestOptions) => XMLHttpRequest \| Promise<unknown>` | —       |
-
-### Select Attribute​
-
-| Attribute | Description      | Type    | Default |
-| --------- | ---------------- | ------- | ------- |
-| clearable | 是否显示清空按钮 | boolean | —       |
-
-### DatePicker Attribute​
-
-| Attribute      | Description      | Type   | Default |
-| -------------- | ---------------- | ------ | ------- |
-| firstDayOfWeek | 每周第一天的日期 | number | 0       |
-| format         | 日期显示格式     | string | —       |
-
-### Form Attribute​
-
-| Attribute               | Description    | Type                                | Default |
-| ----------------------- | -------------- | ----------------------------------- | ------- |
-| labelSuffix             | 标签后缀       | string                              | —       |
-| labelPosition           | 标签对齐方式   | string-`'left' \| 'right' \| 'top'` | —       |
-| requireAsteriskPosition | 必填星号位置   | string-`'left' \| 'right'`          | —       |
-
-### Upload Attribute​
-
-| Attribute | Description    | Type   | Default |
-| --------- | -------------- | ------ | ------- |
-| accept    | 接受的文件类型 | string | —       |
-
-### Table Attribute​
-
-| Attribute   | Description    | Type                                              | Default |
-| ----------- | -------------- | ------------------------------------------------- | ------- |
-| pageSize    | 每页条数       | number                                            | —       |
-| borderStyle | 边框           | boolean\string-`'full' \| 'horizontal' \| 'none'` | —       |
-| stripe      | 是否显示斑马纹 | boolean                                           | —       |
-
-### FileUpload Attribute​
-
-| Attribute           | Description                      | Type    | Default |
-| ------------------- | -------------------------------- | ------- | ------- |
-| needChunkMd5        | 分片是否计算 MD5                 | boolean | —       |
-| needChunkLocal      | 服务端是否将分片存储到本地磁盘上 | boolean | —       |
-| fileNameLengthLimit | 可上传的最大文件名称长度         | number  | —       |
-| typeLimit           | 可上传文件后缀                   | string  | —       |
-| chunkSize           | 分片大小，单位为 KB              | number  | —       |
-
-### Slots
-
-| 属性名  | 描述                                 | SlotProps            |
-| ------- | ------------------------------------ | -------------------- |
-| default | 默认插槽，用于包裹需要全局配置的组件 | config: 当前配置对象 |
-
-::: ifdef M84
-<iframe
- src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/epshowcase/examples/e-config-provider-m"
- frameborder=0
- allowfullscreen class="ui-showcase-iframe">
-</iframe>
-::: endif
-
-<style>
- .ui-showcase-iframe {
-    position: fixed;
-    right: 3.5vw;
-    top: 17%;
-    width: 375px;
-    height: 75vh;
-    box-shadow: 0 0 12px 6px #eee;
-    border-radius: 15px;
- }
- .main .markdown-body {
-    padding: 45px;
-    width: calc(97vw - 661px);
-}
- </style>