m8-framework-mcp 1.0.0

package/docs/m8mpdoc-develop/018-EPUI/347/273/204/344/273/266/086-calendar/346/227/245/345/216/206.md

@@ -0,0 +1,141 @@
+# Calendar 日历
+
+显示日期。
+
+## 基本
+
+设置 `value` 来指定当前显示的月份。如果未指定 `value`，将显示当前月份。`value` 支持双向绑定。
+
+```html
+<template>
+  <div class="block">
+    <e-calendar-m v-model="value" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from "vue";
+  const value = ref(new Date());
+</script>
+```
+
+## 自定义内容
+
+通过设置 `scoped-slot` 命名为 `date-cell` 来自定义在日历单元格中显示的内容。在 `scoped-slot` 中，您可以获取日期（当前单元格的日期）、数据（包括类型、是否被选中、日期属性）。更多详情，请参阅下面的 API 文档。
+
+```html
+<template>
+  <div class="block">
+    <e-calendar-m>
+      <template #date-cell="{ data }">
+        <p :class="data.isSelected ? 'is-selected' : ''">
+          {{ data.day.split('-').slice(2)[0] }} {{ data.isSelected ? '✔️' : ''
+          }}
+        </p>
+      </template>
+    </e-calendar-m>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .is-selected {
+    color: #1989fa;
+  }
+</style>
+```
+
+## 范围
+
+设置 `range` 属性来指定日历的显示范围。起始时间必须为星期一，结束时间必须为星期日，时间跨度不得超过两个月。
+
+```html
+<template>
+  <div class="block">
+    <e-calendar-m
+      :range="[new Date(2019, 2, 4), new Date(2019, 2, 24)]"
+    ></e-calendar-m>
+  </div>
+</template>
+```
+
+## 自定义标题
+
+```html
+<template>
+  <div class="block">
+    <e-calendar-m ref="calendar">
+      <template #header="{ date }">
+        <span>Custom header content</span>
+        <span>{{ date }}</span>
+        <e-button-group-m>
+          <e-button-m size="small" @click="selectDate('prev-year')"
+            >Previous Year</e-button-m
+          >
+          <e-button-m size="small" @click="selectDate('prev-month')"
+            >Previous Month</e-button-m
+          >
+          <e-button-m size="small" @click="selectDate('today')"
+            >Today</e-button-m
+          >
+          <e-button-m size="small" @click="selectDate('next-month')"
+            >Next Month</e-button-m
+          >
+          <e-button-m size="small" @click="selectDate('next-year')"
+            >Next Year</e-button-m
+          >
+        </e-button-group-m>
+      </template>
+    </e-calendar-m>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from "vue";
+
+  const calendar = ref();
+  const selectDate = (val: string) => {
+    calendar.value.selectDate(val);
+  };
+</script>
+```
+
+## API
+
+### Attributes
+
+| 属性名                | 描述                                                                                                                   | 类型                 | 默认值 |
+| --------------------- | ---------------------------------------------------------------------------------------------------------------------- | -------------------- | ------ |
+| model-value / v-model | 绑定值                                                                                                                 | Date                 | —      |
+| isLunarShow           | 是否展示农历                                                                                                           | Boolean              | false  |
+| range                 | 时间范围，包括起始时间和结束时间。起始时间必须为每周的开始日期，结束时间必须为每周的结束日期，时间跨度不得超过两个月。 | array `[Date, Date]` |        |
+
+### Slots
+
+| Name      | Description                                                                                                                                                                      | Subtags                                                                                                                     |
+| --------- | ------------------------------------------------------------------------------ | -------------------------------------------------------------------------- |
+| date-cell | `type` 表示日期属于哪个月份，可选值为 `prev-month`、`current-month`、`next-month`；`isSelected`表示日期是否被选中；day 是以`YYYY-MM-DD` 格式表示的日期；`date` 是单元格代表的日期 | object: `{ data: { type: 'prev-month' \| 'current-month' \| 'next-month', isSelected: boolean, day: string, date: Date } }` |
+| header    | 日历标题的内容                                                                                                                                                                   | object: { date: string }                                                                                                    |
+
+::: ifdef M84
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/epshowcase/examples/e-calendar-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/087-divider/345/210/206/345/211/262/347/272/277.md

@@ -0,0 +1,77 @@
+# Divider 分割线
+
+区隔内容的分割线。
+
+### 基础用法
+
+对不同段落的文本进行分割。
+
+
+```html
+<div>
+    <span> 今天早晨，我坐在窗前，世界像一个路人一样停下来片刻，向我点头然后离去。 </span>
+    <e-divider-m />
+    <span> 那里，小小的念头就像树叶的沙沙声；它们在我的心灵中轻声细语，传递着喜悦。 </span>
+  </div>
+```
+
+## 设置文案
+
+可以在分割线上自定义文本内容。
+
+```html
+<div>
+    <span>你所看到的不是你自己，而是你的影子。</span>
+    <e-divider-m content-position="left">拉宾德拉纳特·泰戈尔</e-divider-m>
+    <span>我的愿望是傻瓜，它们在你的歌声中呼喊，我的大师。让我只是倾听。</span>
+    <e-divider-m>
+      <e-icon><star-filled /></e-icon>
+    </e-divider-m>
+    <span>我不能选择最好的。最好的选择了我。</span>
+    <e-divider-m content-position="right">拉宾德拉纳特·泰戈尔</e-divider-m>
+  </div>
+```
+
+#### 虚线
+
+您可以设置分隔符的样式。
+
+```html
+<div>
+    <span>大海，你使用的是什么语言？</span>
+    <e-divider-m border-style="dashed" />
+    <span>永恒问题的语言。</span>
+  </div>
+  <e-divider-m border-style="dotted" />
+  <span>天空，你的答案是什么语言？</span>
+  <e-divider-m border-style="double" />
+  <span>永恒沉默的语言。</span>
+```
+
+#### 垂直分隔线
+
+```html
+<div>
+    <span>雨</span>
+    <e-divider-m direction="vertical" />
+    <span>首页</span>
+    <e-divider-m direction="vertical" border-style="dashed" />
+    <span>草</span>
+  </div>
+```
+
+## API
+
+### Attributes
+
+| 属性名       | 描述                                      | 类型            | 默认值     |
+| ------------ | ----------------------------------------- | --------------- | ---------- |
+| direction	         | 设置分割线方向	| `'horizontal'`、 `'vertical' `     | horizontal          |
+| border-style	          | 设置分隔符样式| `'none' \|'hidden' \|'dotted' \|'dashed' \| 'solid' \| 'double' \|'groove' \|'ridge' \|'inset' \|'outset' \|`| solid   |
+| content-position	        | 自定义分隔线内容的位置	                      | `'left' \| 'right'\| 'center'`| center|
+
+### Slots
+
+| 属性名  | 描述           |
+| ------- | -------------- |
+| default | 设置分割线文案的内容 |

package/docs/m8mpdoc-develop/018-EPUI/347/273/204/344/273/266/090-upload-service/346/226/207/344/273/266/344/270/212/344/274/240.md

@@ -0,0 +1,61 @@
+# UploadService 文件上传
+
+`UploadService` 控件是基于 @epoint-mfe/eui-components 中的 [FileUpload](?file=018-EPUI组件/067-file-upload文件上传 "file-upload文件上传") 控件封装的，简化了上传地址的配置以及添加了初始化自动加载附件列表的功能。
+
+- `action`属性值像ajax请求一样可直接配相对路径即可
+- 初始化时会自动加载附件列表
+
+```html
+<template>
+  <e-upload-service-m v-model:file-list="fileList" action="/uploadaction/getFileUploadModel" />
+
+  <script lang="ts" setup>
+    import { ref } from 'vue';
+
+    const fileList = ref([]);
+  </script>
+</template>
+```
+## API
+
+与 [FileUpload](?file=018-EPUI组件/067-file-upload文件上传 "file-upload文件上传") 一致，额外提供以下属性。
+
+### Attributes
+
+| Name                              | Description                                                                                           | Type                                                                                    | Default |
+|-----------------------------------|-------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------|---------|
+| `edit-url`                          | 365在线服务根地址                                                                                       | `string`                                                                                | —       |
+| `enable-edit`                 | 是否允许编辑                                                                                      | `boolean`                                                                               | `false`  |
+| `before-edit`                   | 编辑前的钩子函数，接受待编辑的文件作为参数。如果返回 `false` 或返回一个被拒绝的 `Promise`，则会中止编辑。 | `(file: UploadFile) => Awaitable<boolean>`                                              | —       |
+
+
+## 区别
+
+组件库内有 `Upload` 控件和 `FileUpload` 控件，框架中又有提供的 `UploadService` 控件，他们区别是：
+- `Upload` 是实现上传功能的基础控件，只提供了上传功能。
+- `FileUpload` 是基于 `Upload` 控件封装的，添加的分片上传的能力，支持以action属性配置所有附件操作的接口地址，并提供文件列表关联的能力。
+- `UploadService` 是在 `FileUpload` 的基础上封装的，简化了上传地址的配置以及添加了初始化自动加载附件列表的功能。
+
+::: ifdef M84
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/epshowcase/examples/ep-file-upload-service-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/091-image-upload-service/345/233/276/347/211/207/344/270/212/344/274/240.md

@@ -0,0 +1,49 @@
+# ImageUploadService 图片上传
+
+`ImageUploadService` 控件是基于 @epoint-mfe/eui-components 中的 [ImageUpload](?file=018-EPUI组件/070-image-upload图片上传 "image-upload图片上传") 控件封装的，简化了上传地址的配置以及添加了初始化自动加载图片列表的功能。
+
+
+```html
+<template>
+  <e-image-upload-service-m v-model:image-list="imageList" action="/uploadaction/getImageUploadModel" />
+
+  <script lang="ts" setup>
+    import { ref } from 'vue';
+
+    const imageList = ref([]);
+  </script>
+</template>
+```
+## API
+
+与 [ImageUpload](?file=018-EPUI组件/070-image-upload图片上传 "image-upload图片上传") 一致。
+
+## 区别
+
+与组件库中的 `ImageUpload` 控件相比，`ImageUploadService` 控件主要有以下区别：
+- `action` 属性值像 `ajax` 请求一样可直接配相对路径即可
+- 初始化时会自动加载图片列表
+
+::: ifdef M84
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/epshowcase/examples/ep-image-upload-service-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/092-space/351/227/264/350/267/235.md

@@ -0,0 +1,305 @@
+# Space 间距
+
+虽然我们有 `Divider`，但有时我们需要多个 `Divider` 来分隔元素，因此我们将每个元素堆叠在 `Divider` 上，但这样做不仅使我们的代码变得混乱，而且使其难以维护。`Space（间隔）` 是这种组件，为我们提供了生产力和优雅。
+
+## 基本用法
+
+基本用例是使用此组件在每个组件之间提供统一的间隔
+
+使用 `Space` 提供空间
+
+```html
+<template>
+	<e-space-m wrap>
+		<e-card-m v-for="i in 4" :key="i" class="box-card" style="width: 70px">
+			<div v-for="o in 3" :key="o" class="text item">{{ 'item ' + o }}</div>
+		</e-card-m>
+	</e-space-m>
+</template>
+```
+
+## 竖直布局
+
+使用 `direction` 属性来控制布局，我们使用 `flex-direction` 来实现这一点。
+
+我们还提供了竖直布局。
+
+```html
+<template>
+	<e-space-m direction="vertical">
+		<e-card-m v-for="i in 2" :key="i" class="box-card" style="width: 70px">
+			<div v-for="o in 3" :key="o" class="text item">{{ 'item ' + o }}</div>
+		</e-card-m>
+	</e-space-m>
+</template>
+```
+
+## 控制间隔大小
+
+通过 `size` API 控制间隔大小。
+
+您可以使用内置大小 `small、default、large` 来设置大小，这些大小对应于 `8px、12px、16px`。默认大小是 `small`，即 `8px`
+
+您还可以使用自定义大小来覆盖它。请参考下一部分。
+
+```html
+<template>
+	<e-space-m direction="vertical" alignment="start" :size="20">
+		<e-radio-group-m v-model="size">
+			<e-radio-m value="large">large</e-radio-m>
+			<e-radio-m value="default">default</e-radio-m>
+			<e-radio-m value="small">small</e-radio-m>
+		</e-radio-group-m>
+
+		<e-space-m wrap :size="size">
+			<e-card-m v-for="i in 3" :key="i" class="box-card" style="width: 70px">
+				<div v-for="o in 3" :key="o" class="text item">{{ 'item ' + o }}</div>
+			</e-card-m>
+		</e-space-m>
+	</e-space-m>
+</template>
+
+<script lang="ts" setup>
+	import { ref } from "vue";
+	const size = ref("default");
+</script>
+```
+
+间隔大小`size`设置为数组时，分别代表右侧和底部的间隔，如 `[10, 20]`
+
+```html
+<template>
+	<e-space-m wrap :size="[10, 20]">
+		<e-card-m v-for="i in 4" :key="i" class="box-card" style="width: 70px">Text item</e-card-m>
+	</e-space-m>
+</template>
+```
+
+## 自定义大小
+
+有时内置大小无法满足业务需求，我们可以使用自定义大小（数值类型）来控制项目之间的间隔。
+
+```html
+<template>
+	<e-slider-m v-model="size2" style="margin: 10px 0 20px;" />
+	<e-space-m wrap :size="size2">
+		<e-card-m v-for="i in 2" :key="i" class="box-card" style="width: 70px">
+			<div v-for="o in 3" :key="o" class="text item">{{ 'item ' + o }}</div>
+		</e-card-m>
+	</e-space-m>
+</template>
+
+<script lang="ts" setup>
+	import { ref } from "vue";
+	const size2 = ref(20);
+</script>
+```
+
+## 自动换行
+
+在水平模式下，使用 `wrap`（布尔类型）来控制自动换行行为。
+
+使用 `wrap` 控制换行
+
+```html
+<template>
+	<e-space-m wrap>
+		<div v-for="i in 20" :key="i" class="box-card" style="width: 70px">Text item</div>
+	</e-space-m>
+</template>
+```
+
+## Spacer
+
+有时我们希望不仅仅是空白空间，所以我们有 (spacer) 来帮助我们。
+
+## 字面类型 spacer
+
+```html
+<template>
+	<e-space-m wrap :size="10" spacer="|">
+		<e-card-m v-for="i in 2" :key="i" class="box-card" style="width: 70px">Text item</e-card-m>
+	</e-space-m>
+</template>
+```
+
+## Spacer 也可以是 VNode
+
+```html
+<template>
+	<e-space-m wrap :size="10" :spacer="spacer">
+		<e-card-m v-for="i in 2" :key="i" class="box-card" style="width: 70px">Text item</e-card-m>
+	</e-space-m>
+</template>
+
+<script lang="ts" setup>
+	import { h } from "vue";
+	const spacer = h(
+		"span",
+		{
+			style: {
+				color: "#d9d9d9",
+				padding: "0 12px",
+			},
+		},
+		"|"
+	);
+</script>
+```
+
+## 对齐
+
+设置此属性可以调整子节点的对齐方式，可在 `align-items` 找到理想的值。
+
+使用 `alignment`
+
+```html
+<template>
+	<div class="alignment-container">
+		<e-space-m>
+			Sting
+			<e-card-m>
+				<template #header> header </template>
+				body
+			</e-card-m>
+			<e-button-m type="success">Success</e-button-m>
+		</e-space-m>
+	</div>
+
+	<div class="alignment-container">
+		<e-space-m alignment="flex-start">
+			Sting
+			<e-card-m>
+				<template #header> header </template>
+				body
+			</e-card-m>
+			<e-button-m type="success">Success</e-button-m>
+		</e-space-m>
+	</div>
+
+	<div class="alignment-container">
+		<e-space-m alignment="flex-end">
+			Sting
+			<e-card-m>
+				<template #header> header </template>
+				body
+			</e-card-m>
+			<e-button-m type="success">Success</e-button-m>
+		</e-space-m>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+	.alignment-container {
+		width: 260px;
+		margin-bottom: 20px;
+		padding: 8px;
+		border: 1px solid var(--ep-border-color);
+	}
+</style>
+```
+
+## 填充容器
+
+通过 `fill` (布尔类型) 参数，您可以控制子节点是否自动填充容器。
+
+在下面的示例中，当设置为 `fill` 时，子节点的宽度将自动适应容器的宽度。
+
+使用 `fill` 自动填充子节点的容器
+
+```html
+<template>
+	<div style="margin-bottom: 15px">fill: <e-switch-m v-model="fill" /></div>
+	<e-space-m :fill="fill" wrap style="width: 100%;">
+		<e-card-m v-for="i in 2" :key="i" class="box-card">
+			<template #header> header </template>
+			body
+		</e-card-m>
+	</e-space-m>
+</template>
+
+<script lang="ts" setup>
+	import { ref } from "vue";
+
+	const fill = ref(true);
+</script>
+```
+
+您还可以使用 `fillRatio` 参数来自定义填充比例。默认值为 100，表示根据父容器宽度以 100% 填充。
+
+需要注意的是，水平布局和竖直布局的表达略有不同，具体效果可以在以下示例中查看。
+
+使用 `fillRatio` 自定义填充比例
+
+```html
+<template>
+	<div style="margin: 15px 0">fillRatio:<e-slider-m v-model="fillRatio" /></div>
+	<div style="margin-bottom: 15px">
+		direction:
+		<e-radio-group-m v-model="direction">
+			<e-radio-m value="horizontal">horizontal</e-radio-m>
+			<e-radio-m value="vertical">vertical</e-radio-m>
+		</e-radio-group-m>
+	</div>
+	<e-space-m fill :fill-ratio="fillRatio" :direction="direction" wrap style="width: 100%;">
+		<e-card-m v-for="i in 5" :key="i" class="box-card">
+			<template #header> header </template>
+			body
+		</e-card-m>
+	</e-space-m>
+</template>
+
+<script lang="ts" setup>
+	import { ref } from "vue";
+
+	const fillRatio = ref(30);
+	const direction = ref("horizontal");
+</script>
+```
+
+## API
+
+### Space Attributes
+
+| 属性名     | 描述                      | 类型                                       | 默认值   |
+| ---------- | ------------------------- | ------------------------------------------ | -------- |
+| alignment  | 对齐的方式                | `center` `normal` `stretch` ...            | `center` |
+| class      | 类名                      | `string` `object` `array`                  | ——       |
+| direction  | 排列的方向                | `vertical` `horizontal`                    | ——       |
+| prefixCls  | 给 space-items 的类名前缀 | `string`                                   | ——       |
+| style      | 额外样式                  | `string` `object`                          | ——       |
+| spacer     | 间隔符                    | `string` `number` `VNode`                  | ——       |
+| size       | 间隔大小                  | `default` `small` `large` `number` `array` | `small`  |
+| wrap       | 设置是否自动折行          | `boolean`                                  | `false`  |
+| fill       | 子元素是否填充父容器      | `boolean`                                  | `false`  |
+| fill-ratio | 填充父容器的比例          | `number`                                   | `100`    |
+
+### Space Slots
+
+| 属性名  | 描述               |
+| ------- | ------------------ |
+| default | 需要添加间隔的元素 |
+
+::: ifdef M84
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/epshowcase/examples/e-space-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>