m8-framework-mcp 1.0.0 → 1.0.3

package/docs/m8mpdoc-develop/018-EPUI/347/273/204/344/273/266/001-button/346/214/211/351/222/256.md

@@ -1,497 +0,0 @@
-# Button
-
-#### 按钮类型
-
-使用 `type` 属性控制按钮样式，可选值： `plain`, `round`, `circle` ，默认为 `round`。
-
-按钮支持 `default`、`success`、`primary`、`info`、`warning`、`danger` 六种类型，默认为 `default`。
-
-```html
-<template>
-  <e-row-m class="column-gap-4">
-    <e-button-m>Default</e-button-m>
-    <e-button-m type="primary">Primary</e-button-m>
-    <e-button-m type="success">Success</e-button-m>
-    <e-button-m type="info">Info</e-button-m>
-    <e-button-m type="warning">Warning</e-button-m>
-    <e-button-m type="danger">Danger</e-button-m>
-  </e-row-m>
-
-  <e-row-m class="column-gap-4">
-    <e-button-m :round="false">Default</e-button-m>
-    <e-button-m type="primary" :round="false">Primary</e-button-m>
-    <e-button-m type="success" :round="false">Success</e-button-m>
-    <e-button-m type="info" :round="false">Info</e-button-m>
-    <e-button-m type="warning" :round="false">Warning</e-button-m>
-    <e-button-m type="danger" :round="false">Danger</e-button-m>
-  </e-row-m>
-
-  <e-row-m class="column-gap-4">
-    <e-button-m plain>Plain</e-button-m>
-    <e-button-m type="primary" plain>Primary</e-button-m>
-    <e-button-m type="success" plain>Success</e-button-m>
-    <e-button-m type="info" plain>Info</e-button-m>
-    <e-button-m type="warning" plain>Warning</e-button-m>
-    <e-button-m type="danger" plain>Danger</e-button-m>
-  </e-row-m>
-
-  <e-row-m class="column-gap-4">
-    <e-button-m :icon="Search" circle />
-    <e-button-m type="primary" :icon="Edit" circle />
-    <e-button-m type="success" :icon="Check" circle />
-    <e-button-m type="info" :icon="Message" circle />
-    <e-button-m type="warning" :icon="Star" circle />
-    <e-button-m type="danger" :icon="Delete" circle />
-  </e-row-m>
-</template>
-
-<script lang="ts" setup>
-  import {
-    Check,
-    Delete,
-    Edit,
-    Message,
-    Search,
-    Star,
-  } from "@epoint-mfe/eui-icons";
-</script>
-<style lang="scss" scoped>
-  .column-gap-4{
-    display:flex;
-    flex-wrap: wrap;
-    column-gap: 10px;
-  }
-</style>
-```
-
-### 禁用状态
-
-你可以使用 `disabled` 属性来定义按钮是否被禁用。
-
-使用 `disabled` 属性来控制按钮是否为禁用状态。 该属性接受一个 `Boolean` 类型的值。
-
-```html
-<template>
-  <e-row-m class="column-gap-4">
-    <e-button-m disabled>Default</e-button-m>
-    <e-button-m type="primary" disabled>Primary</e-button-m>
-    <e-button-m type="success" disabled>Success</e-button-m>
-    <e-button-m type="info" disabled>Info</e-button-m>
-    <e-button-m type="warning" disabled>Warning</e-button-m>
-    <e-button-m type="danger" disabled>Danger</e-button-m>
-  </e-row-m>
-
-  <e-row-m class="column-gap-4">
-    <e-button-m plain disabled>Plain</e-button-m>
-    <e-button-m type="primary" plain disabled>Primary</e-button-m>
-    <e-button-m type="success" plain disabled>Success</e-button-m>
-    <e-button-m type="info" plain disabled>Info</e-button-m>
-    <e-button-m type="warning" plain disabled>Warning</e-button-m>
-    <e-button-m type="danger" plain disabled>Danger</e-button-m>
-  </e-row-m>
-</template>
-<style lang="scss" scoped>
-  .column-gap-4{
-    display:flex;
-    flex-wrap: wrap;
-    column-gap: 10px;
-  }
-</style>
-```
-
-## 链接按钮
-
-```html
-<template>
-  <p>Basic link button</p>
-  <div class="column-gap-4">
-    <e-button-m
-      v-for="button in buttons"
-      :key="button.text"
-      :type="button.type"
-      link
-    >{{ button.text }}</e-button-m>
-  </div>
-
-  <p>Disabled link button</p>
-  <div class="column-gap-4">
-    <e-button-m
-      v-for="button in buttons"
-      :key="button.text"
-      :type="button.type"
-      link
-      disabled
-    >{{ button.text }}</e-button-m>
-  </div>
-</template>
-
-<script setup lang="ts">
-  const buttons = [
-    { type: "", text: "plain" },
-    { type: "primary", text: "primary" },
-    { type: "success", text: "success" },
-    { type: "info", text: "info" },
-    { type: "warning", text: "warning" },
-    { type: "danger", text: "danger" },
-  ] as const;
-</script>
-<style lang="scss" scoped>
-  .column-gap-4{
-    display:flex;
-    flex-wrap: wrap;
-    column-gap: 10px;
-  }
-</style>
-```
-
-## 文字按钮
-
-没有边框和背景色的按钮。
-
-```html
-<template>
-<p>Basic text button</p>
-  <div class="column-gap-4">
-    <e-button-m
-      v-for="button in buttons"
-      :key="button.text"
-      :type="button.type"
-      text
-    >{{ button.text }}</e-button-m>
-  </div>
-
-  <p>Background color always on</p>
-  <div class="column-gap-4">
-    <e-button-m
-      v-for="button in buttons"
-      :key="button.text"
-      :type="button.type"
-      text
-      bg
-    >{{ button.text }}</e-button-m>
-  </div>
-
-  <p>Disabled text button</p>
-  <div class="column-gap-4">
-    <e-button-m
-      v-for="button in buttons"
-      :key="button.text"
-      :type="button.type"
-      text
-      disabled
-    >{{ button.text }}</e-button-m>
-  </div>
-</template>
-
-<script setup lang="ts">
-  const buttons = [
-    { type: "", text: "plain" },
-    { type: "primary", text: "primary" },
-    { type: "success", text: "success" },
-    { type: "info", text: "info" },
-    { type: "warning", text: "warning" },
-    { type: "danger", text: "danger" },
-  ] as const;
-</script>
-<style lang="scss" scoped>
-  .column-gap-4{
-    display:flex;
-    flex-wrap: wrap;
-    column-gap: 10px;
-  }
-</style>
-```
-
-### 图标按钮
-
-使用图标为按钮添加更多的含义。 你也可以单独使用图标不添加文字来节省显示区域占用。
-
-使用 `icon` 属性来为按钮添加图标。 您可以在我们的 `Icon` 组件中找到所需图标。 通过向右方添加`<i>`标签来添加图标， 你也可以使用自定义图标。
-
-```html
-<template>
-  <div class="column-gap-4">
-    <e-button-m type="primary" :icon="Edit" />
-    <e-button-m type="primary" :icon="Share" />
-    <e-button-m type="primary" :icon="Delete" />
-    <e-button-m type="primary" :icon="Search">Search</e-button-m>
-    <e-button-m type="primary">
-      Upload<e-icon-m class="ep-icon--right"><Upload /></e-icon-m>
-    </e-button-m>
-  </div>
-</template>
-<script setup lang="ts">
-  import {
-    Delete,
-    Edit,
-    Search,
-    Share,
-    Upload,
-  } from "@epoint-mfe/eui-icons";
-</script>
-<style lang="scss" scoped>
-  .column-gap-4{
-    display:flex;
-    flex-wrap: wrap;
-    column-gap: 10px;
-  }
-  .ep-icon--right {
-    display: flex;
-    align-items: center;
-    font-size: 1.2em;
-    margin-left: var(--e-space-s);
-}
-</style>
-```
-
-### 按钮组
-
-以按钮组的方式出现，常用于多项类似操作。
-
-使用 `<e-button-group-m>` 对多个按钮分组。
-
-```html
-<template>
-<e-button-group-m>
-  <e-button-m type="primary" :icon="ArrowLeft">Previous Page</e-button-m>
-  <e-button-m type="primary">
-  Next Page<e-icon-m class="ep-icon--right"><ArrowRight /></e-icon-m>
-  </e-button-m>
-</e-button-group-m>
-
-<e-button-group-m class="ml-4">
-  <e-button-m type="primary" :icon="Edit" />
-  <e-button-m type="primary" :icon="Share" />
-  <e-button-m type="primary" :icon="Delete" />
-</e-button-group-m>
-</template>
-<script setup lang="ts">
-  import {
-    ArrowLeft,
-    ArrowRight,
-    Delete,
-    Edit,
-    Share,
-  } from "@epoint-mfe/eui-icons";
-</script>
-<style lang="scss" scoped>
-  .ep-icon--right {
-    display: flex;
-    align-items: center;
-    font-size: 1.2em;
-    margin-left: var(--e-space-s);
-}
-</style>
-```
-
-### 加载状态按钮
-
-点击按钮来加载数据，并向用户反馈加载状态。
-
-通过设置 `loading` 属性为 `true` 来显示加载中状态。
-
-您可以使用 `loading` 插槽或 `loadingIcon` 属性自定义您的 `loading` 图标
-
-PS: `loading` 插槽优先级高于 `loadingIcon` 属性
-
-```html
-<template>
-  <e-button-m type="primary" loading>Loading</e-button-m>
-  <e-button-m type="primary" :loading-icon="Football" loading>Loading</e-button-m>
-  <e-button-m type="primary" loading>
-      <template #loading>
-          <e-icon-m :name="Football"></e-icon-m>
-      </template>
-      Loading
-  </e-button-m>
-</template>
-
-<script lang="ts" setup>
-  import { Football } from "@epoint-mfe/eui-icons";
-</script>
-
-<style scoped>
-  .ep-button .custom-loading .circular {
-    margin-right: 6px;
-    width: 18px;
-    height: 18px;
-    animation: loading-rotate 2s linear infinite;
-  }
-  .ep-button .custom-loading .circular .path {
-    animation: loading-dash 1.5s easep-in-out infinite;
-    strokep-dasharray: 90, 150;
-    strokep-dashoffset: 0;
-    strokep-width: 2;
-    stroke: var(--ep-button-text-color);
-    strokep-linecap: round;
-  }
-</style>
-```
-
-### 块级按钮
-
-使用 `block` 属性可以让按钮占据父容器的全部宽度。
-
-使用 `block` 属性来让按钮占据父容器的全部宽度。
-
-```html
-<template>
-  <div class="demo-block">
-    <e-button-m block>块级按钮</e-button-m>
-    <e-button-m type="primary" block>主要按钮</e-button-m>
-    <e-button-m type="success" block>成功按钮</e-button-m>
-    <e-button-m type="warning" block>警告按钮</e-button-m>
-    <e-button-m type="danger" block>危险按钮</e-button-m>
-    <e-button-m type="info" block>信息按钮</e-button-m>
-  </div>
-</template>
-```
-
-### 调整尺寸
-
-除了默认的大小，按钮组件还提供了几种额外的尺寸可供选择，以便适配不同的场景。
-
-使用 `size` 属性额外配置尺寸，可使用 `large` 和 `small` 两种值。
-
-```html
-<template>
-  <e-row-m class="column-gap-4">
-    <e-button-m size="large" round>Large</e-button-m>
-    <e-button-m round>Default</e-button-m>
-    <e-button-m size="small" round>Small</e-button-m>
-    <e-button-m size="large" :icon="Search" round>Search</e-button-m>
-    <e-button-m :icon="Search" round>Search</e-button-m>
-    <e-button-m size="small" :icon="Search" round>Search</e-button-m>
-  </e-row-m>
-  <e-row-m class="column-gap-4">
-    <e-button-m :icon="Search" size="large" circle />
-    <e-button-m :icon="Search" circle />
-    <e-button-m :icon="Search" size="small" circle />
-  </e-row-m>
-</template>
-
-<script setup lang="ts">
-  import { Search } from "@epoint-mfe/eui-icons";
-</script>
-<style lang="scss" scoped>
-  .column-gap-4{
-    display:flex;
-    flex-wrap: wrap;
-    column-gap: 10px;
-  }
-</style>
-```
-
-### 自定义颜色
-
-您可以自定义按钮的颜色。
-
-```html
-<template>
-  <div class="column-gap-4">
-    <e-button-m color="#626aef" :dark="isDark">Default</e-button-m>
-    <e-button-m color="#626aef" :dark="isDark" plain>Plain</e-button-m>
-
-    <e-button-m color="#626aef" :dark="isDark" disabled>Disabled</e-button-m>
-    <e-button-m color="#626aef" :dark="isDark" disabled plain>Disabled Plain</e-button-m>
-  </div>
-</template>
-```
-
-```js
-<script lang="ts" setup>
-  const isDark = ref(false);
-</script>
-<style lang="scss" scoped>
-  .column-gap-4{
-    display:flex;
-    flex-wrap: wrap;
-    column-gap: 10px;
-  }
-</style>
-```
-
-## Button API
-
-### Button Attributes
-
-tips 移动端不支持PC端的自定义标签 tag。
-
-| 属性名            | 说明                                                   | 类型                 | 默认值                                                 |
-| ----------------- | ------------------------------------------------------ | -------------------- | ------------------------------------------------------ |
-| size              | 尺寸                                                   | `string` (`'large'\| 'default'\| 'small'`)               | default                        |
-| type              | 类型                                                   | `string` (`'default'\|'primary'\| 'success'\| 'warning'\| 'danger'\| 'info'`)            | default |
-| plain             | 是否为朴素按钮                                         | `boolean`            | false                                                  |
-| text              | 是否为文字按钮                                         | `boolean`            | false                                                  |
-| bg                | 是否显示文字按钮背景颜色                               | `boolean`            | false                                                  |
-| link              | 是否为链接按钮                                         | `boolean`            | false                                                  |
-| round             | 是否为圆角按钮                                         | `boolean`            | true                                                   |
-| circle            | 是否为圆形按钮                                         | `boolean`            | false                                                  |
-| block             | 是否为块级按钮                                         | `boolean`            | false                                                  |
-| loading           | 是否为加载中状态                                       | `boolean`            | false                                                  |
-| loading-icon      | 自定义加载中状态图标组件                               | `string / Component` | Loading                                                |
-| disabled          | 按钮是否为禁用状态                                     | `boolean`            | false                                                  |
-| icon              | 图标组件                                               | `string / Component` | —                                                      |
-| iconColor         | 图标组件颜色                                           | `string`             | `#fff`                                                 |
-| autofocus         | 原生 autofocus 属性                                    | `boolean`            | false                                                  |
-| nativep-type      | 原生 type 属性                                         | `string` (`'button'\| 'submit'\| 'reset'`)             | button                  |
-| auto-insert-space | 自动在两个中文字符之间插入空格                         | `boolean`            | —                                                      |
-| color             | 自定义按钮颜色                                         | `string`             | —                                                      |
-| dark              | dark 模式, 意味着自动设置 `color` 为 `dark` 模式的颜色 | `boolean`            | false                                                  |
-
-### Button Slots
-
-| 插槽名  | 说明             |
-| ------- | ---------------- |
-| default | 自定义默认内容   |
-| loading | 自定义加载中组件 |
-| icon    | 自定义图标组件   |
-
-### Button Exposes
-
-| 属性名         | 说明                       | 类型                                                                                        |
-| -------------- | -------------------------- | ------------------------------------------------------------------------------------------- |
-| ref            | 按钮 html 元素             | `Ref<HTMLButtonElement>`                                                                    |
-| size           | 按钮尺寸                   | `ComputedRef<'' \| 'small' \| 'default' \| 'large'>`                                        |
-| type           | 按钮类型                   | `ComputedRef<'' \| 'default' \| 'primary' \| 'success' \| 'warning' \| 'info' \| 'danger'>` |
-| disabled       | 是否禁用                   | `ComputedRef<boolean>`                                                                      |
-| shouldAddSpace | 是否在两个字符之间插入空格 | `ComputedRef<boolean>`                                                                      |
-
-## ButtonGroup API
-
-### ButtonGroup Attributes
-
-| 属性名 | 说明                         | 类型     | 默认值                                                 |
-| ------ | ---------------------------- | -------- | ------------------------------------------------------ |
-| size   | 用于控制该按钮组内按钮的大小 | `string` (`'large'\| 'default'\| 'small'`)|           -           |
-| type   | 用于控制该按钮组内按钮的类型 | `string` (`'primary'\| 'success'\| 'warning'\| 'danger'\| 'info'`)| - |
-
-### ButtonGroup Slots
-
-| 插槽名  | 说明             | 子标签 |
-| ------- | ---------------- | ------ |
-| default | 自定义按钮组内容 | Button |
-
-::: ifdef M84
-<iframe
- src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/epshowcase/examples/e-button-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/002-buttonedit/346/214/211/351/222/256/347/274/226/350/276/221.md

@@ -1,146 +0,0 @@
-# ButtonEdit
-
-ButtonEdit 控件是专门给在 VUE 页面中弹出 F9 开发的选择页面这个场景开发的。
-
--   通过 popupUrl 参数指定弹出的页面地址。
-
--   通过 vModel 绑定控件值，vModel:text 绑定控件的文本。
-
--   弹出的 F9 页面无须改造，正常使用 epoint.closeDialog 方法关闭页面进行传值即可。
-
--   Vue 的页面中通过监听 close 事件获取 F9 页面返回的值，事件参数 e.params 即为 F9 页面 epoint.closeDialog 的回传值，按实际需求格式化成控件需要的格式。
-
-#### 常规使用
-
-```html
-<template>
-    <div class="van-content">
-        <text class="cell-title">基本用法</text>
-        <div class="flex justify-spacep-between mb-4 flex-wrap gap-4 buttonedit-box">
-            <div class="cell-title">
-                <p>text: {{ text }}</p>
-                <p>value: {{ value }}</p>
-            </div>
-            <e-button-edit-m v-model="value" v-model:text="text" placeholder="请输入" :clearable="true" :disabled="false"
-                :readonly="false" size="default" :allowInput="true" :popupUrl="popupUrl" title="F9页面标题"
-                :popupWidth="'95%'" :popupHeight="500" :before="beforehandler" @click="clickHandler"
-                @close="onButtonEditClose"></e-button-edit-m>
-        </div>
-    </div>
-</template>
-<script lang="ts" setup>
-import { ref } from 'vue';
-const value = ref('89706');
-const text = ref('承办人');
-// const popupUrl = ref('http://192.168.219.170/docs/vue/latest/frame/?_dialogId_=dialog-A581ED18-ADE2-45FA-B4C2-8A8C7870F361');
-const popupUrl = ref('http://localhost:8080/#/modules/epshowcase/demo');
-
-const beforehandler = () => {
-    console.log('🚀~~~ :::beforehandler');
-    return true;
-}
-const clickHandler = () => {
-    console.log('🚀~~~ :::clickHandler');
-};
-
-const onButtonEditClose = (e) => {
-    console.log('🚀~~~ :::closeHandler', e);
-    const pArr = e.params.split(';');
-    // 将返回的数据格式化成 ButtonEdit 控件需要的格式
-    // 为保证params和组件中引用同一个对象，只支持e.params方式修改params；并且修改只能是在同步函数中修改，不支持异步修改
-    e.params = {
-        text: pArr[0],
-        value: pArr[1]
-    };
-};
-</script>
-<style lang="scss" scoped>
-.van-content {
-    background-color: #fff;
-    height: 100vh;
-}
-@import '../css/common.scss';
-</style>
-```
-
-#### 被打开页面 demo
-
-```html
-<template>
-    <view style="display: flex;flex-direction: column;justify-content: center;padding: 30px;height: 100vh;">
-        <em-button block plain type="primary" @click="testPostMessage">测试window.parent.postMessage</em-button>
-    </view>
-</template>
-
-<script setup lang="ts">
-const testPostMessage = () => {
-    ejs.ui.toast('点击按钮');
-    window.parent.postMessage(
-        {
-            type: 'closeDialog', // 固定值，告诉父页面次消息是用来关闭 dialog
-            id: '', // dialog 的 id，从 url 上获取
-            params: 'test message;123465748', // 要传递给 closeCallback 回调方法的参数
-        },
-        '*'
-    );
-}
-</script>
-```
-
-## ButtonEdit API
-
-### 属性
-
-| 属性名       | 说明                                                      | 类型                          | 默认值  |
-| ------------ | --------------------------------------------------------- | ----------------------------- | ------- |
-| v-model      | 绑定值                                                    | `string`                      | —       |
-| v-model:text | 绑定文本                                                  | `string`                      | —       |
-| placeholder  | 输入框占位文本                                            | `string`                      | —       |
-| before       | 弹窗打开前可执行的方法，支持异步，返回`false`可以中断逻辑 | `() => Promise<boolean>`      | -       |
-| clearable    | 是否显示清除按钮                                          | `boolean`                     | `false` |
-| disabled     | 是否禁用                                                  | `boolean`                     | `false` |
-| readonly     | 是否只读                                                  | `boolean`                     | `false` |
-| size         | 输入框尺寸                                                | `'large'、'default'、'small'` | —       |
-| allowInput   | 是否允许输入(允许输入时仅按钮触发弹窗，否则整个控件触发)  | `boolean`                     | `false` |
-| popupUrl     | 弹窗页面地址                                              | `string`                      | —       |
-| title        | 弹窗标题                                                  | `string`                      | —       |
-| popupWidth   | 弹窗宽度                                                  | `number/string`               | `'95%'` |
-| popupHeight  | 弹窗高度                                                  | `number`                      | `500`   |
-
-### 事件
-
-| 名称  | 描述                     | 类型                                                                  |
-| ----- | ------------------------ | --------------------------------------------------------------------- |
-| click | 按钮点击弹出弹窗前触发   | `() => void`                                                          |
-| close | 关闭弹窗更新控件值前触发 | `(event: { cancel: boolean, params: Record<string, string>}) => void` |
-
-### 方法
-
-| 名称     | 描述         | 类型           |
-| -------- | ------------ | -------------- |
-| getValue | 获取控件值   | `() => string` |
-| getText  | 获取控件文本 | `() => string` |
-
-::: ifdef M84
-<iframe
- src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/epshowcase/examples/ep-buttonedit-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>