m8-framework-mcp 1.0.0 → 1.0.3

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

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

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

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

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

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