m8-framework-mcp 1.0.0 → 1.0.1

package/docs/m8mpdoc-develop/018-EPUI/347/273/204/344/273/266/034-switch/345/274/200/345/205/263.md

@@ -1,305 +0,0 @@
-# Switch
-
-开关用于在两种相反状态之间切换。
-
-## 基本用法
-
-将 `v-model` 绑定到一个 `Boolean` 类型的变量上。
-
-```html
-<template>
-  <e-switch-m v-model="value1" />
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value1 = ref(true);
-</script>
-```
-
-## 尺寸
-
-```html
-<template>
-  <e-switch-m v-model="value" size="large" active-text="Open" inactive-text="Close" />
-  <br />
-  <e-switch-m v-model="value" active-text="Open" inactive-text="Close" />
-  <br />
-  <e-switch-m v-model="value" size="small" active-text="Open" inactive-text="Close" />
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(true);
-</script>
-```
-
-## 文字描述
-
-您可以添加 `active-text` 和 `inactive-text` 属性以显示文本。使用 `inline-prompt` 属性来控制文本是否显示在圆点内。
-
-您可以添加 `active-text` 和 `inactive-text` 属性以显示文本。
-
-```html
-<template>
-  <e-switch-m v-model="value1" class="mb-2" active-text="Pay by month" inactive-text="Pay by year" />
-  <br />
-  <e-switch-m
-    v-model="value2"
-    class="mb-2"
-    style="--e-switch-on-color: #13ce66; --e-switch-off-color: #ff4949"
-    active-text="Pay by month"
-    inactive-text="Pay by year"
-  />
-  <br />
-  <e-switch-m v-model="value3" inline-prompt active-text="是" inactive-text="否" />
-  <e-switch-m
-    v-model="value4"
-    class="ml-2"
-    inline-prompt
-    style="--e-switch-on-color: #13ce66; --e-switch-off-color: #ff4949"
-    active-text="Y"
-    inactive-text="N"
-  />
-  <e-switch-m v-model="value6" class="ml-2" width="60" inline-prompt active-text="超出省略" inactive-text="超出省略" />
-  <e-switch-m
-    v-model="value5"
-    class="ml-2"
-    inline-prompt
-    style="--e-switch-on-color: #13ce66; --e-switch-off-color: #ff4949"
-    active-text="完整展示多个内容"
-    inactive-text="多个内容"
-  />
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value1 = ref(true);
-const value2 = ref(true);
-const value3 = ref(true);
-const value4 = ref(true);
-const value5 = ref(true);
-const value6 = ref(true);
-</script>
-```
-
-## 显示自定义图标和自定义颜色
-
-
-您可以添加 `active-icon` 和 `inactive-icon` 属性以显示图标。使用 `inline-prompt` 属性来控制图标是否显示在开关内。--e-switch-on-color 和 --e-switch-off-color CSS 变量决定了两种状态下的背景颜色。
-
-```html
-<template>
-  <e-switch-m v-model="value1" :active-icon="Check" :inactive-icon="Close" />
-  <br />
-  <e-switch-m
-    v-model="value2"
-    class="mt-2"
-    style="margin-left: 24px"
-    inline-prompt
-    :active-icon="Check"
-    :inactive-icon="Close"
-  />
-  <br />
-  <e-switch-m v-model="value3" class="ml-2" style="--e-switch-on-color: #13ce66; --e-switch-off-color: #ff4949" />
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { Check, Close } from '@epoint-mfe/eui-icons';
-const value1 = ref(true);
-const value2 = ref(true);
-const value3 = ref(true);
-</script>
-```
-
-## 拓展用法（移动端新增功能）
-
-您可以使用 `show-inner-icon` 属性来控制是否显示在开关圆点处图标。开关开启默认显示图标`Select`、关闭默认显示图标`CloseBold`,您可以添加 `active-inner-icon` 和 `inactive-inner-icon` 属性调整图标。
-
-```html
-<template>
-  <e-switch-m v-model="value1" show-inner-icon active-text="Open" inactive-text="Close" />
-  <br />
-  <e-switch-m v-model="value2" show-inner-icon :active-inner-icon="Edit" :inactive-inner-icon="Menu"/>
-</template>
-
-<script setup>
-import {Edit, Menu } from '@epoint-mfe/eui-icons';
-
-const value1 = ref(true);
-const value2 = ref(true);
-</script>
-```
-
-## 扩展值类型
-
-您可以设置 `active-value` 和 `inactive-value` 属性。它们都接收一个 `Boolean、String` 或 `Number` 类型的值。
-
-```html
-<template>
-  <e-switch-m
-  v-model="value"
-  style="--e-switch-on-color: #13ce66; --e-switch-off-color: #ff4949"
-  active-value="100"
-  inactive-value="0"
-  />
-  <div>Switch value:{{ value7 }}</div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref('100');
-</script>
-```
-
-## 禁用
-
-添加 `disabled` 属性会禁用开关。
-
-```html
-<template>
-  <e-switch-m v-model="value1" disabled />
-  <e-switch-m v-model="value2" class="ml-2" />
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value1 = ref(true);
-const value2 = ref(true);
-</script>
-```
-
-## 加载中
-
-将 `loading` 属性设置为 `true` 表示开关处于加载状态。
-
-```html
-<template>
-  <e-switch-m v-model="value1" loading />
-  <e-switch-m v-model="value2" loading class="ml-2" />
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value1 = ref(true);
-const value2 = ref(false);
-</script>
-```
-
-## 防止切换
-
-设置 `before-change` 属性，如果返回 `false` 或返回的 `Promise` 被拒绝，将会阻止切换。
-
-```html
-<template>
-  <e-switch-m v-model="value1" :loading="loading1" :before-change="beforeChange1" />
-  <e-switch-m v-model="value2" class="ml-2" :loading="loading2" :before-change="beforeChange2" />
-</template>
-<script setup>
-import { ref } from 'vue';
-
-const value1 = ref(false);
-const value2 = ref(false);
-const loading1 = ref(false);
-const loading2 = ref(false);
-
-const beforeChange1 = () => {
-  loading1.value = true;
-
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      loading1.value = false;
-      ejs.ui.toast('Switch success');
-
-      return resolve(true);
-    }, 1000);
-  });
-};
-
-const beforeChange2 = () => {
-  loading2.value = true;
-
-  return new Promise((_, reject) => {
-    setTimeout(() => {
-      loading2.value = false;
-      ejs.ui.toast('Switch failed');
-
-      return reject(new Error('Error'));
-    }, 1000);
-  });
-};
-</script>
-```
-
-## Switch API
-
-### Switch Attributes
-
-| 属性名                | 描述                                                 | 类型                            | 默认值 |
-| :-------------------- | :----------------------------------------------------------- | :------------------------------ | :------ |
-| model-value / v-model | 绑定的值，它应与 `active-value` 或 `inactive-value` 中的一个等效，默认为 `boolean` 类型 | `boolean` / `string` / `number` | —       |
-| disabled              | 是否禁用开关                                                 | `boolean`                       | false   |
-| loading               | 开关是否处于加载状态                                         | `boolean`                       | false   |
-| size                  | 开关的大小                                                   | `枚举` `'large'\| 'default'\| 'small'`                          | default |
-| width                 | 开关的宽度                                                   | `number` / `string`             | —       |
-| inline-prompt         | 图标或文本是否显示在点内，仅文本的第一个字符将被呈现         | `boolean`                       | false   |
-| active-icon           | 处于 `on` 状态时显示的图标的组件，会覆盖 `active-text`       | `string` / `Component`          | —       |
-| inactive-icon         | 处于 `off` 状态时显示的图标的组件，会覆盖 `inactive-text`    | `string` / `Component`          | —       |
-| active-text           | 处于 `on` 状态时显示的文本                                   | `string`                        | —       |
-| inactive-text         | 处于 `off` 状态时显示的文本                                  | `string`                        | —       |
-| active-value          | 处于 `on` 状态时的开关值                                     | `boolean` / `string` / `number` | true    |
-| inactive-value        | 处于 `off` 状态时的开关值                                    | `boolean` / `string` / `number` | false   |
-| active-color          | 处于 `on` 状态时的背景颜色（已弃用，请改用 CSS 变量 `--e-switch-on-color`） | `string`                        | —       |
-| inactive-color        | 处于 `off` 状态时的背景颜色（已弃用，请改用 CSS 变量 `--e-switch-off-color`） | `string`                        | —       |
-| border-color          | 开关的边框颜色（已弃用，请改用 CSS 变量 `--e-switch-border-color`） | `string`                        | —       |
-| name                  | 开关的输入名称                                               | `string`                        | —       |
-| validate-event        | 是否触发表单验证                                             | `boolean`                       | true    |
-| before-change         | 在开关状态更改之前的钩子函数。如果返回 `false` 或返回的 `Promise` 被拒绝，将会停止切换 | `Function` `() => Promise<boolean> \| boolean`                      | —       |
-| id                    | input 的 id                                                  | `string`                        | —       |
-| tabindex              | input 的 tabindex                                            | `string` / `number`             | —       |
-| show-inner-icon       | 控制是否显示在开关圆点处图标（移动端新增属性）                             | `boolean`                       | false      |
-| active-inner-icon     | 处于 `on` 状态时显示的圆点处图标（移动端新增属性）                              | `string` / `Component`             | Select       |
-| inactive-inner-icon     | 处于 `off` 状态时显示的圆点处图标（移动端新增属性）                           | `string` / `Component`             | CloseBold       |
-
-### Switch Events
-
-| 事件名   | 描述                     | 参数 |
-| :----- | :------------------------------ | :--------- |
-| change | switch 状态发生变化时的回调函数 | `Function` `(val: boolean \| string \| number) => void` |
-
-### Switch Methods
-
-| 方法名   | 描述                     | 参数 |
-| :----- | :------------------------------ | :--------- |
-| focus | 手动 focus 到 switch 组件 | `Function` `() => void` |
-
-::: ifdef M84
-<iframe
- src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/epshowcase/examples/e-switch-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/035-breadcrumb/351/235/242/345/214/205/345/261/221.md

@@ -1,90 +0,0 @@
-# Breadcrumb 面包屑
-
-显示当前页面的路径，快速返回之前的任意页面。
-
-## 基础用法
-
-在 `ep-breadcrumb` 中使用 `ep-breadcrumb-item` 标签表示从首页开始的每一级。 该组件接受一个 String 类型的参数 separator来作为分隔符。 默认值为 '/'。
-
-```html
-<template>
-	<e-breadcrumb-m separator="/">
-        <e-breadcrumb-item-m :to="{ path: '/' }">组织架构</e-breadcrumb-item-m>
-        <e-breadcrumb-item-m><a href="/">新点软件</a></e-breadcrumb-item-m>
-        <e-breadcrumb-item-m :to="{ path: '/' }">产品和解决方案体系</e-breadcrumb-item-m>
-        <e-breadcrumb-item-m>中央研究院</e-breadcrumb-item-m>
-	</e-breadcrumb-m>
-<template>
-```
-
-## 图标分隔符
-
-通过设置 `separator-icon` 可使用相应的 iconfont 作为分隔符，注意这将使 `separator` 失效。
-
-```html
-<template>
-	<e-breadcrumb-m :separator-icon="ArrowRight">
-        <e-breadcrumb-item-m :to="{ path: '/' }">组织架构</e-breadcrumb-item-m>
-        <e-breadcrumb-item-m :to="{ path: '/' }">新点软件</e-breadcrumb-item-m>
-        <e-breadcrumb-item-m :to="{ path: '/' }">产品和解决方案体系</e-breadcrumb-item-m>
-        <e-breadcrumb-item-m>中央研究院</e-breadcrumb-item-m>
-	</e-breadcrumb-m>
-<template>
-<script lang="ts" setup>
-import { ArrowRight } from '@epoint-mfe/eui-icons';
-</script>
-```
-
-## API
-
-### Breadcrumb Attributes
-
-| Name           | Description              | Type                   | Default |
-| :------------- | :----------------------- | :--------------------- | :------ |
-| separator      | 分隔符                   | `string`               | /       |
-| separator-icon | 图标分隔符的组件或组件名 | `string` / `Component` | -       |
-
-### Breadcrumb Slots
-
-| Name    | Description    | Subtags         |
-| :------ | :------------- | :-------------- |
-| default | 自定义默认内容 | Breadcrumb Item |
-
-## BreadcrumbItem API
-
-### BreadcrumbItem Attributes
-
-| Name    | Description                                                  | Type                | Default |
-| :------ | :----------------------------------------------------------- | :------------------ | :------ |
-| to      | 路由跳转目标，同 `vue-router` 的 `to` 属性                   | `string` / `object` | ''      |
-| replace | 如果设置该属性为 `true`, 导航将不会留下历史记录， 作用同 `location.replace` | `boolean`           | false   |
-
-### BreadcrumbItem Slots
-
-| Name    | Description    |
-| :------ | :------------- |
-| default | 自定义默认内容 |
-
-::: ifdef M84
-<iframe
- src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/epshowcase/examples/e-breadcrumb-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/036-empty/347/251/272/347/212/266/346/200/201.md

@@ -1,80 +0,0 @@
-# Empty 空状态
-
-空状态时的占位提示。
-
-## 基础用法
-
-```html
-<e-empty-m description="暂无数据" />
-```
-
-## 自定义图片
-
-通过设置 `image` 属性传入图片 URL。
-
-```html
-<e-empty-m
-  description="自定义图片显示"
-  image="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
-/>
-```
-
-## 图片尺寸
-
-通过使用 `image-size` 属性来控制图片大小。
-
-```html
-<e-empty-m description="设置图片大小" :image-size="120" />
-```
-
-## 底部内容
-
-使用默认插槽可在底部插入内容。
-
-```html
-<e-empty-m>
-  <e-button-m type="primary" size="small">添加数据</e-button-m>
-</e-empty-m>
-```
-
-## API
-
-### Attributes
-
-| Name        | Description                  | Type   | Default |
-| ----------- | ---------------------------- | ------ | ------- |
-| image       | empty 组件的图像地址         | string | ''      |
-| image-size  | empty 组件的图像尺寸（宽度） | number | —       |
-| description | empty 组件的描述信息         | string | ''      |
-
-### Slots
-
-| Name        | Description        |
-| ----------- | ------------------ |
-| default     | 作为底部内容的内容 |
-| image       | 作为图像的内容     |
-| description | 作为描述的内容     |
-
-::: ifdef M84
-<iframe
- src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/epshowcase/examples/e-empty-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/037-colorpalette/350/260/203/350/211/262/346/235/277.md

@@ -1,201 +0,0 @@
-# ColorPalette 调色板
-
-ColorPalette 是一个支持多种颜色格式的调色板。
-
-## 基本使用
-
-ColorPalette 需要一个字符串类型的变量绑定到 v-model。
-
-```html
-<template>
-   <div class="demo-color-palette">
-        <div class="demo-color-block">
-            <span class="demonstration">有默认值</span>
-            <e-color-palette-m v-model="color1" />
-        </div>
-        <div class="demo-color-block">
-            <span class="demonstration">无默认值</span>
-            <e-color-palette-m v-model="color2" />
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-const color1 = ref('#409EFF');
-const color2 = ref();
-</script>
-<style lang="scss" scoped>
-.demo-color {
-    &-palette {
-        display: flex;
-        flex-direction: column;
-    }
-    &-block {
-        width: 100%;
-        flex: 1;
-        margin: 10px;
-        display: flex;
-        flex-direction: column;
-        .demonstration {
-            width: 100%;
-            display: block;
-            margin-bottom: 10px;
-            font-size: 12px;
-        }
-    }
-}
-</style>
-```
-
-## 透明度
-
-ColorPalette 支持选择透明通道。要激活透明通道选择，只需添加 `show-alpha` 属性。
-
-```html
-<template>
-    <e-color-palette-m v-model="color3" :show-alpha="true" />
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-const color3 = ref('rgba(236, 29, 15, 0.8)');
-</script>
-```
-
-## 预设自定义颜色
-
-ColorPalette 支持预定义的颜色选项。
-
-```html
-<template>
-    <div>
-        <e-radio-group-m class="custom-radio-group" v-model="paletteType" @change="paletteTypeChange">
-            <e-radio-m value="1" size="small">默认</e-radio-m>
-            <e-radio-m value="2" size="small">自定义-一行</e-radio-m>
-            <e-radio-m value="3" size="small">自定义-多行</e-radio-m>
-        </e-radio-group-m>
-        <e-color-palette-m v-model="color4" :predefine="predefineColors" show-alpha enable-predefine />
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-const color4 = ref('#009688');
-const paletteType = ref('1');
-const predefineColors = ref<string[] | string[][] | undefined>(undefined);
-const paletteTypeChange = (val: string) => {
-  switch (val) {
-    case '1':
-      predefineColors.value = undefined;
-      break;
-    case '2':
-      predefineColors.value = ['#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585'];
-      break;
-    case '3':
-      predefineColors.value = [
-        ['#B71C1C', '#C62828', '#D32F2F', '#E53935', '#F44336', '#EF5350', '#E57373', '#EF9A9A'],
-        ['#F57F17', '#F9A825', '#FBC02D'],
-        ['#004D40', '#00695C', '#00796B', '#00897B', '#009688', '#26A69A'],
-      ];
-      break;
-    default:
-      break;
-  }
-};
-</script>
-<style lang="scss" scoped>
-// 自定义按钮组
-.custom-radio-group{
-    padding-left: 10px;
-    .ep-radio,.ep-radio.radio-size-small{
-        height: 24px;
-        font-size: 12px;
-    }
-}
-</style>
-```
-
-## 历史记录
-
-ColorPalette 支持历史记录的颜色选项。
-
-```html
-<template>
-    <div>
-        <e-color-palette-m ref="colorPaletteRef" v-model="color5" show-alpha enable-predefine enable-history />
-        <e-button-m type="primary" size="small" plain style="margin-top: 30px" @click="getValue">
-            获取当前颜色
-        </e-button-m>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-const color5 = ref('rgba(255, 69, 0, 0.68)');
-const colorPaletteRef = ref();
-const getValue = () => {
-  let color = colorPaletteRef.value?.color.value;
-  // 这里以弹窗和控制台输出为例
-  ejs.ui.toast(color);
-  console.log('当前颜色=>', color);
-};
-</script>
-```
-
-
-
-## API
-
-### Attributes
-
-| **Name**              | **Description**    | **Type**                                                     | **Default** |
-| --------------------- | ------------------ | ------------------------------------------------------------ | ----------- |
-| model-value / v-model | 绑定值，当前颜色   | `string`                                                     | —           |
-| show-alpha            | 是否显示透明滑块   | `boolean`                                                    | false       |
-| color-format          | v-model 的颜色格式 | `'hsl'、'hsv'、'hex'、'rgb'、'hex'（当 show-alpha 为 false 时）、'rgb'（当 show-alpha 为 true 时）` | —           |
-| predefine             | 预设颜色数组       | `string[]丨string[][]`                                       | —           |
-| enable-predefine      | 是否启用预设色     | `boolean`                                                    | false       |
-| enable-history        | 是否启用历史记录   | `boolean`                                                    | false       |
-| validate-event        | 是否触发表单验证   | `boolean`                                                    | true        |
-| id                    | ColorPalette 的 id | `string`                                                     | —           |
-
-### Events
-
-| Name          | **Description**        | **Type**                  |
-| ------------- | ---------------------- | ------------------------- |
-| active-change | 当前活动颜色改变时触发 | `(value: string) => void` |
-
-### Exposes
-
-| 方法名            | 说明                  | 类型         |
-| ----------------- | --------------------- | ------------ |
-| color             | 当前颜色对象          | `Color`      |
-| show              | 手动显示 ColorPalette | `() => void` |
-| hide              | 手动隐藏 ColorPalette | `() => void` |
-| updateSliderPanel | 手动更新滑块面板      | `() => void` |
-| resetColor        | 重置颜色为初始值      | `() => void` |
-
-::: ifdef M84
-<iframe
- src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/epshowcase/examples/e-color-palette-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>