m8-framework-mcp 1.0.0

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

@@ -0,0 +1,192 @@
+# 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

@@ -0,0 +1,417 @@
+# 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>