m8-framework-mcp 1.0.0

package/docs/m8mpdoc-develop/018-EPUI/347/273/204/344/273/266/056-message/346/266/210/346/201/257/346/217/220/347/244/272.md

@@ -0,0 +1,287 @@
+# Message 消息提示
+
+常用于主动操作后的反馈提示。 与 Notification 的区别是后者更多用于系统级通知的被动提醒。
+
+## 基础用法
+
+从顶部出现，3 秒后自动消失。
+
+`Message` 在配置上与 `Notification` 非常类似，所以部分 `options` 在此不做详尽解释。 文末有 `options` 列表，可以结合 `Notification` 的文档理解它们。 。 `Message` 可以接收一个字符串或一个 `VNode` 作为参数，它会被显示为正文内容。
+
+```html
+<template>
+  <e-button-m :plain="true" @click="open">Show message</e-button-m>
+  <e-button-m :plain="true" @click="openVn">VNode</e-button-m>
+</template>
+
+<script lang="ts" setup>
+import { h } from 'vue';
+import { EpMessage } from '@epoint-mfe/eui-components';
+
+const open = () => {
+  EpMessage('this is a message.');
+};
+
+const openVn = () => {
+  EpMessage({
+    message: h('p', null, [h('span', null, 'Message can be '), h('i', { style: 'color: teal' }, 'VNode')]),
+  });
+};
+</script>
+```
+
+## 纯文字提示
+
+提示内容不在有左侧图标，只有内容
+
+ 如果你需要该功能，你可以把 `text` 设置为 `true`
+
+```html
+<template>
+    <e-button-m :plain="true" @click="openText">text message</e-button-m>
+</template>
+
+<script lang="ts" setup>
+import { EpMessage } from '@epoint-mfe/eui-components';
+const openText = () => {
+    EpMessage({
+        message: 'this is a message.',
+        text: true
+    });
+};
+</script>
+```
+
+## 不同状态
+
+用来显示「成功、警告、消息、错误」类的操作反馈。
+
+当需要自定义更多属性时， `Message` 也可以接收一个对象为参数。 比如，设置 `type` 字段可以定义不同的状态，默认为 `info`。 此时正文内容以 `message` 的值传入。 同时，我们也为 `Message` 的各种 `type` 注册了方法，可以在不传入 `type` 字段的情况下像 `open4` 那样直接调用。
+
+```html
+<template>
+  <e-button-m :plain="true" @click="open2">success</e-button-m>
+  <e-button-m :plain="true" @click="open3">warning</e-button-m>
+  <e-button-m :plain="true" @click="open1">message</e-button-m>
+  <e-button-m :plain="true" @click="open4">error</e-button-m>
+</template>
+
+<script lang="ts" setup>
+import { EpMessage } from '@epoint-mfe/eui-components';
+
+const open1 = () => {
+  EpMessage('this is a message.');
+};
+const open2 = () => {
+  EpMessage({
+    message: 'Congrats, this is a success message.',
+    type: 'success',
+  });
+};
+const open3 = () => {
+  EpMessage({
+    message: 'Warning, this is a warning message.',
+    type: 'warning',
+  });
+};
+const open4 = () => {
+  EpMessage.error('Oops, this is a error message.');
+};
+</script>
+```
+
+## 可关闭的消息提示
+
+可以添加关闭按钮。
+
+默认的 `Message` 是不可以被人工关闭的。 如果你需要手动关闭功能，你可以把 `showClose` 设置为 `true` 此外，和 `Notification` 一样，`Message` 拥有可控的 `duration`， 默认的关闭时间为 `3000` 毫秒，当把这个属性的值设置为 0 便表示该消息不会被自动关闭。
+
+```html
+<template>
+  <e-button-m :plain="true" @click="open1">message</e-button-m>
+  <e-button-m :plain="true" @click="open2">success</e-button-m>
+  <e-button-m :plain="true" @click="open3">warning</e-button-m>
+  <e-button-m :plain="true" @click="open4">error</e-button-m>
+</template>
+
+<script lang="ts" setup>
+import { EpMessage } from '@epoint-mfe/eui-components';
+
+const open1 = () => {
+  EpMessage({
+    showClose: true,
+    message: 'This is a message.',
+  });
+};
+const open2 = () => {
+  EpMessage({
+    showClose: true,
+    message: 'Congrats, this is a success message.',
+    type: 'success',
+  });
+};
+const open3 = () => {
+  EpMessage({
+    showClose: true,
+    message: 'Warning, this is a warning message.',
+    type: 'warning',
+  });
+};
+const open4 = () => {
+  EpMessage({
+    showClose: true,
+    message: 'Oops, this is a error message.',
+    type: 'error',
+  });
+};
+</script>
+```
+
+## 文字居中
+
+使用 `center` 属性让文字水平居中。
+
+```html
+<template>
+  <e-button-m plain @click="openCenter">Centered text</e-button-m>
+</template>
+
+<script lang="ts" setup>
+import { EpMessage } from '@epoint-mfe/eui-components';
+
+const openCenter = () => {
+  EpMessage({
+    showClose: true,
+    message: 'Centered text',
+    center: true,
+  });
+};
+</script>
+```
+
+## 使用 HTML 片段作为正文内容
+
+`message` 支持使用 HTML 字符串作为正文内容。
+
+将 `dangerouslyUseHTMLString` 属性设置为 `true` , `message` 就会被当作 HTML 片段处理。
+
+```html
+<template>
+  <e-button-m :plain="true" @click="openHTML">Use HTML String</e-button-m>
+</template>
+
+<script lang="ts" setup>
+import { EpMessage } from '@epoint-mfe/eui-components';
+
+const openHTML = () => {
+  EpMessage({
+    dangerouslyUseHTMLString: true,
+    message: '<strong>This is <i>HTML</i> string</strong>',
+  });
+};
+</script>
+```
+
+## 分组消息合并
+
+合并相同内容的消息。
+
+设置 `grouping` 为 `true` ，内容相同的 `message` 将被合并。
+
+```html
+<template>
+  <e-button-m :plain="true" @click="open">Show message</e-button-m>
+</template>
+
+<script lang="ts" setup>
+import { EpMessage } from '@epoint-mfe/eui-components';
+
+const open = () => {
+  EpMessage({
+    message: 'this is a message.',
+    grouping: true,
+    type: 'success',
+  });
+};
+</script>
+```
+
+## 单独引用
+
+```js
+import { EpMessage } from '@epoint-mfe/eui-components';
+```
+
+此时调用方法为 `EpMessage(options)`。 我们也为每个 `type` 定义了各自的方法，如 `EpMessage.success(options)`。 并且可以调用 `EpMessage.closeAll()` 手动关闭所有实例。
+
+## 应用程序上下文继承
+
+`Message` 可接受一条 `context` 作为消息构造器的第二个参数，允许你将当前应用的上下文注入到 `Message` 中，这将允许你继承应用程序的所有属性。
+
+你可以像这样使用它：
+
+**TIP**
+
+如果您全局注册了 `EpMessage` 组件，它将自动继承应用的上下文环境。
+
+```js
+import { getCurrentInstance } from 'vue';
+import { EpMessage } from '@epoint-mfe/eui-components';
+
+// 在你的 setup 方法中
+const { appContext } = getCurrentInstance()!;
+EMessage({}, appContext);
+```
+
+## API
+
+### Options
+
+| Name                     | Description                                                | Type                                          | Default   |
+| :----------------------- | :--------------------------------------------------------- | :-------------------------------------------- | :-------- |
+| message                  | 消息文本                                                   | `string` / `VNode` / `Function`-`() => VNode` | ''        |
+| type                     | 消息类型                                                   | `enum`-`'success' \| 'warning' \| 'info' \| 'error'`                              | `info` |
+| text                     | 是否是纯文字类型                                           | `boolean`                                     | false     |
+| icon                     | 自定义图标组件，覆盖 `type`                                | `string` / `Component`                        | —         |
+| dangerouslyUseHTMLString | 是否将 `message` 视为 HTML 字符串                          | `boolean`                                     | false     |
+| customClass              | 消息的自定义类名                                           | `string`                                      | ''        |
+| duration                 | 显示持续时间，毫秒。如果设置为 0，不会自动关闭             | `number`                                      | 3000      |
+| showClose                | 是否显示关闭按钮                                           | `boolean`                                     | false     |
+| center                   | 是否居中显示文本                                           | `boolean`                                     | false     |
+| onClose                  | 消息关闭时的回调函数，以消息实例为参数                     | `Function`-`() => void`                       | —         |
+| offset                   | 设置距离视口顶部的距离                                     | `number`                                      | 16        |
+| appendTo                 | 设置消息的根元素，默认为 `document.body`                   | `string` / `HTMLElement`                      | —         |
+| grouping                 | 合并具有相同内容的消息，不支持 VNode 消息                  | `boolean`                                     | false     |
+| repeatNum                | 重复次数，类似于徽标，与 `grouping` 结合使用时用作初始数字 | `number`                                      | 1         |
+
+### Methods
+
+`Message`  会返回当前 Message 的实例。 如果需要手动关闭实例，可以调用它的 `close` 方法来关闭。
+
+| Name  | Description        | Type                    |
+| :---- | :----------------- | :---------------------- |
+| close | 关闭当前的 Message | `Function`-`() => void` |
+
+::: ifdef M84
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/epshowcase/examples/e-message-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/057-segmented/345/210/206/346/256/265/346/216/247/345/210/266/345/231/250.md

@@ -0,0 +1,222 @@
+# Segmented 分段控制器
+
+用于展示多个选项并允许用户选择其中单个选项。
+
+## 基础用法
+
+设置 `v-model` 为选项值。
+
+```html
+<template>
+  <e-segmented-m v-model="value" :options="options" size="large" />
+  <e-segmented-m v-model="value" :options="options" size="default" style="margin-top: 10px" />
+  <e-segmented-m v-model="value" :options="options" size="small" style="margin-top: 10px" />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const value = ref('Mon');
+const options = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
+</script>
+```
+
+## 配置方向
+
+```html
+<template>
+	<div>
+      <e-segmented-m v-model="size" :options="sizeOptions" style="margin-bottom: 1rem" />
+      <e-segmented-m v-model="direction" :options="directionOptions" style="margin-bottom: 1rem" />
+      <e-segmented-m v-model="value2" :options="options2" :direction="direction" :size="size">
+        <template #default="scope">
+          <div :class="['flex', 'items-center', 'gap-2', 'flex-col', direction === 'horizontal' && 'p-2']">
+            <e-icon-m size="20" :name="scope.item.icon"></e-icon-m>
+            <div>{{ scope.item.label }}</div>
+          </div>
+        </template>
+      </e-segmented-m>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const value2 = ref('Apple');
+const direction = ref('horizontal');
+const size = ref('default');
+const directionOptions = [
+  { label: 'Horizontal', value: 'horizontal' },
+  { label: 'Vertical', value: 'vertical' }
+];
+const sizeOptions = ['large', 'default', 'small'];
+const options2 = [
+  { label: 'Apple', value: 'Apple', icon: 'Apple' },
+  { label: 'Cherry', value: 'Cherry', icon: 'Cherry' },
+  { label: 'Grape', value: 'Grape', icon: 'Grape' },
+  { label: 'Orange', value: 'Orange', icon: 'Orange' },
+  { label: 'Pear', value: 'Pear', icon: 'Pear', disabled: true }
+];
+</script>
+```
+
+## 禁用状态
+
+```html
+<template>
+  <e-segmented-m v-model="value3" :options="options3" disabled />
+  <e-segmented-m v-model="value3" :options="options3" style="margin-top: 10px" />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const value3 = ref('Mon');
+const options3 = [
+  { label: 'Mon', value: 'Mon', disabled: true },
+  { label: 'Tue', value: 'Tue' },
+  { label: 'Wed', value: 'Wed', disabled: true },
+  { label: 'Thu', value: 'Thu' },
+  { label: 'Fri', value: 'Fri', disabled: true },
+  { label: 'Sat', value: 'Sat' },
+  { label: 'Sun', value: 'Sun' }
+];
+</script>
+```
+
+## Block 分段选择器
+
+```html
+<template>
+  <e-segmented-m v-model="value4" :options="options4" block />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const value4 = ref('Mon');
+const options4 = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sunday long long long long long long long'];
+</script>
+```
+
+## 自定义内容
+
+```html
+<template>
+  <e-segmented-m v-model="value2" :options="options2">
+    <template #default="scope">
+      <div class="flex flex-col items-center gap-2 p-2">
+        <e-icon-m size="20" :name="scope.item.icon"></e-icon-m>
+        <div>{{ scope.item.label }}</div>
+      </div>
+    </template>
+  </e-segmented-m>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const value2 = ref('Apple');
+const options2 = [
+  { label: 'Apple', value: 'Apple', icon: 'Apple' },
+  { label: 'Cherry', value: 'Cherry', icon: 'Cherry' },
+  { label: 'Grape', value: 'Grape', icon: 'Grape' },
+  { label: 'Orange', value: 'Orange', icon: 'Orange' },
+  { label: 'Pear', value: 'Pear', icon: 'Pear', disabled: true }
+];
+</script>
+```
+
+## 自定义样式
+
+```html
+<template>
+  <div class="custom-style">
+    <e-segmented-m v-model="value5" :options="options5" block />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const value5 = ref('Delicacy');
+const options5 = ['Delicacy', 'Desserts&Drinks', 'Fresh foods', 'Supermarket'];
+</script>
+
+<style lang="scss" scoped>
+.custom-style {
+  height: 50px;
+  .ep-segmented {
+    --e-segmented-item-selected-color: var(--e-text-color-primary);
+    --e-segmented-item-selected-bg-color: #ffd100;
+    --e-border-radius-base: 16px;
+  }
+}
+</style>
+```
+
+---
+
+## API
+
+### Attributes
+
+| **Name**       | **Description**        | **Type**                                 | **Default**    |
+| -------------- | ---------------------- | ---------------------------------------- | -------------- |
+| v-model        | 绑定值                 | `string` / `number` / `boolean`          | —              |
+| options        | 选项列表               | `array` `Option[]`                       | `[]`           |
+| size           | 尺寸                   | `enum` `''｜'large'｜'default'｜'small'` | —              |
+| block          | 撑满父元素宽度         | `boolean`                                | —              |
+| disabled       | 是否禁用               | `boolean`                                | `false`        |
+| validate-event | 是否触发表单验证       | `boolean`                                | `true`         |
+| name           | 原生 `name` 属性       | `string`                                 | —              |
+| id             | 原生 `id` 属性         | `string`                                 | —              |
+| aria-label     | 原生 `aria-label` 属性 | `string`                                 | —              |
+| direction      | 展示的方向             | `enum` `'horizontal'｜'vertical'`        | `'horizontal'` |
+
+### Events
+
+| **Name** | **Description**                        | **Type**                        |
+| -------- | -------------------------------------- | ------------------------------- |
+| change   | 当所选值更改时触发，参数是当前选中的值 | `Function` `(val: any) => void` |
+
+### Slots
+
+| **Name** | **Description**    | **Type**                    |
+| -------- | ------------------ | --------------------------- |
+| default  | 自定义 Option 模板 | `object` `{ item: Option }` |
+
+
+
+## Type Declarations
+
+```typescript
+type Option =
+  | {
+      label: string;
+      value: string | number | boolean;
+      disabled?: boolean;
+      [key: string]: any;
+    }
+  | string
+  | number
+  | boolean;
+```
+
+::: ifdef M84
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/epshowcase/examples/e-segmented-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>