m8-framework-mcp 1.0.0 → 1.0.1

package/docs/m8mpdoc-develop/018-EPUI/347/273/204/344/273/266/005-collapse/346/212/230/345/217/240/351/235/242/346/235/277.md

@@ -1,257 +0,0 @@
-# Collapse
-
-通过折叠面板收纳内容区域
-
-## 基础用法
-
-可同时展开多个面板，面板之间不影响
-
-```html
-<template>
-    <div class="demo-collapse">
-        <e-collapse-m v-model="activeNames" @change="handleChange">
-            <e-collapse-item-m title="一致性" name="1">
-                <div>与现实生活保持一致：符合真实生活的过程和逻辑，并遵守用户习惯的语言和习惯；</div>
-                <div>在界面内保持一致性：所有元素都应该保持一致，如：设计风格、图标和文本、元素位置等。</div>
-            </e-collapse-item-m>
-            <e-collapse-item-m title="反馈" name="2">
-                <div>操作反馈：通过样式更新和交互效果使用户清晰感知其操作；</div>
-                <div>视觉反馈：通过更新或重新排列页面元素来反映当前状态。</div>
-            </e-collapse-item-m>
-            <e-collapse-item-m title="效率" name="3">
-                <div>简化流程：保持操作流程简单和直观；</div>
-                <div>明确和清晰：明确表达您的意图，以便用户能够迅速理解并做出决策；</div>
-                <div>易于识别：界面应该直截了当，帮助用户辨识，并让他们免于记忆和回忆。</div>
-            </e-collapse-item-m>
-            <e-collapse-item-m title="可控性" name="4">
-                <div>决策制定：提供关于操作的建议是可以接受的，但不要代替用户做决策；</div>
-                <div>可控的后果：用户应该获得自由操作的权利，包括取消、中止或终止当前操作。</div>
-            </e-collapse-item-m>
-        </e-collapse-m>
-    </div>
-</template>
-
-<script lang="ts" setup>
-    import { ref } from 'vue';
-
-    const activeNames = ref(['1']);
-    const handleChange = (val: string[]) => {
-        console.log(val);
-    };
-</script>
-```
-
-## 显示序号
-
-通过 `show-index` 属性来设置是否显示序号，在不使用插槽自定义序号的情况下默认将`formatedIndex`作为显示值。
-
-```html
-<template>
-    <div class="demo-collapse">
-        <e-checkbox-m v-model="showIndex" style="padding: 0 10px;">显示序号</e-checkbox-m>
-        <e-collapse-m v-model="activeNames" :show-index="showIndex" class="collapse">
-            <e-collapse-item-m title="一致性" name="1">
-                <template #index="{ index, formatedIndex }">
-                    <span class="index" style="color: red">起始值： {{ index }} ；默认是 {{ formatedIndex }}</span>
-                </template>
-                <div>与现实生活保持一致：与现实生活的过程和逻辑一致，并符合用户习惯的语言和习惯；</div>
-                <div>在界面内保持一致性：所有元素都应保持一致，如设计风格、图标和文本、元素位置等。</div>
-            </e-collapse-item-m>
-            <e-collapse-item-m title="反馈" name="2">
-                <div>操作反馈：通过样式更新和交互效果使用户清晰地感知其操作；</div>
-                <div>视觉反馈：通过更新或重新排列页面元素来反映当前状态。</div>
-            </e-collapse-item-m>
-        </e-collapse-m>
-    </div>
-</template>
-<script lang="ts" setup>
-    import { ref } from 'vue';
-    const showIndex = ref(true);
-    const activeNames = ref(['1']);
-</script>
-```
-
-## 开启面板间距
-
-通过 gap 属性来设置是否在面板项目之间添加间距。
-
-```html
-<e-collapse-m v-model="activeNames" gap>
-    <e-collapse-item-m title="一致性" name="1">
-        <div>与现实生活保持一致：符合真实生活的过程和逻辑，并遵守用户习惯的语言和习惯；</div>
-        <div>在界面内保持一致性：所有元素都应该保持一致，如：设计风格、图标和文本、元素位置等。</div>
-    </e-collapse-item-m>
-</e-collapse-m>
-```
-
-## 隐藏标题前色块
-
-通过`header-prefix`属性来设置标题前色块，默认显示色块，值为 `none`时不显示色块。
-
-```html
-<e-collapse-m v-model="activeNames" header-prefix="none">
-    <e-collapse-item-m title="一致性" name="1">
-        <div>与现实生活保持一致：符合真实生活的过程和逻辑，并遵守用户习惯的语言和习惯；</div>
-        <div>在界面内保持一致性：所有元素都应该保持一致，如：设计风格、图标和文本、元素位置等。</div>
-    </e-collapse-item-m>
-</e-collapse-m>
-```
-
-## 设置箭头样式
-
-通过`arrow-type`属性来设置标题后展开收起箭头是否带有文字，也可使用插槽自定义样式。
-
-```html
-<e-collapse-m v-model="activeNames" arrow-type="icon">
-    <e-collapse-item-m title="一致性" name="1">
-        <div>与现实生活保持一致：符合真实生活的过程和逻辑，并遵守用户习惯的语言和习惯；</div>
-        <div>在界面内保持一致性：所有元素都应该保持一致，如：设计风格、图标和文本、元素位置等。</div>
-    </e-collapse-item-m>
-</e-collapse-m>
-```
-
-## 手风琴效果
-
-每次只能展开一个面板
-
-```html
-<template>
-    <div class="demo-collapse">
-        <e-collapse-m v-model="activeName" accordion>
-            <e-collapse-item-m title="一致性" name="1">
-                <div>与现实生活保持一致：与现实生活的过程和逻辑一致，并符合用户习惯的语言和习惯；</div>
-                <div>在界面内保持一致性：所有元素都应保持一致，如设计风格、图标和文本、元素位置等。</div>
-            </e-collapse-item-m>
-            <e-collapse-item-m title="反馈" name="2">
-                <div>操作反馈：通过样式更新和交互效果使用户清晰地感知其操作；</div>
-                <div>视觉反馈：通过更新或重新排列页面元素来反映当前状态。</div>
-            </e-collapse-item-m>
-            <e-collapse-item-m title="效率" name="3">
-                <div>简化流程：保持操作流程简单和直观；</div>
-                <div>明确清晰：明确表达您的意图，以便用户能够快速理解并做出决策；</div>
-                <div>易于识别：界面应该直接，有助于用户识别，避免他们记忆和回想。</div>
-            </e-collapse-item-m>
-            <e-collapse-item-m title="可控性" name="4">
-                <div>决策制定：提供操作建议是可以接受的，但不要为用户做决策；</div>
-                <div>可控的后果：用户应该被授予自由操作的权利，包括取消、中止或终止当前操作。</div>
-            </e-collapse-item-m>
-        </e-collapse-m>
-    </div>
-</template>
-
-<script lang="ts" setup>
-    import { ref } from 'vue';
-
-    const activeName = ref('1');
-</script>
-```
-
-## 自定义面板标题
-
-除了可以通过 `title` 属性以外，还可以通过具名 `slot` 来实现自定义面板的标题内容，以实现增加图标等效果。
-
-```html
-<template>
-    <div class="demo-collapse">
-        <e-collapse-m accordion>
-            <e-collapse-item-m name="1">
-                <template #title>
-                    一致性
-                    <e-icon-m class="header-icon">
-                        <info-filled />
-                    </e-icon-m>
-                </template>
-                <div>与现实生活保持一致：符合真实生活的过程和逻辑，并遵守用户习惯的语言和习惯；</div>
-                <div>在界面内保持一致性：所有元素都应该保持一致，如：设计风格、图标和文本、元素位置等。</div>
-            </e-collapse-item-m>
-            <e-collapse-item-m title="反馈" name="2">
-                <template #index>
-                    <span class="index" style="color: red;">2</span>
-                </template>
-                <div>操作反馈：通过样式更新和交互效果使用户能够清晰地感知他们的操作；</div>
-                <div>视觉反馈：通过更新或重新排列页面元素来反映当前状态。</div>
-            </e-collapse-item-m>
-            <e-collapse-item-m title="效率" name="3">
-                <div>简化流程：保持操作流程简单和直观；</div>
-                <div>明确和清晰：明确表达您的意图，以便用户能够迅速理解并做出决策；</div>
-                <div>易于识别：界面应该直截了当，帮助用户辨识，避免他们记忆和回忆。</div>
-            </e-collapse-item-m>
-            <e-collapse-item-m title="可控性" name="4">
-                <div>决策制定：提供关于操作的建议是可以接受的，但不要代替用户做决策；</div>
-                <div>可控的后果：用户应该被赋予自由操作的权利，包括取消、中止或终止当前操作。</div>
-            </e-collapse-item-m>
-        </e-collapse-m>
-    </div>
-</template>
-
-<script setup lang="ts">
-    import { InfoFilled } from '@epoint-mfe/eui-components/eui-icons';
-</script>
-```
-
-## API
-
-### Collapse Attributes
-
-| 属性名                | 描述                                                                          | 类型                                       | 默认值  |
-| --------------------- | ----------------------------------------------------------------------------- | ------------------------------------------ | ------- |
-| model-value / v-model | model 当前激活的面板(如果是手风琴模式，绑定值类型需要为 string，否则为 array) | string (手风琴模式) / array (非手风琴模式) | —       |
-| accordion             | 是否手风琴模式                                                                | `boolean`                                  | false   |
-| show-index            | 是否显示序号                                                                  | `boolean`                                  | false   |
-| gap                   | 是否在面板之间添加间距                                                        | `boolean`                                  | false   |
-| header-prefix         | 标题前色块                                                                    | `string` `可选值'none','block'`            | `block` |
-| arrow-type            | 折叠箭头类型                                                                  | `string` `可选值'icon','text'`             | `text`  |
-
-### Collapse Events
-
-| 属性名 | 描述                                                                                   | 参数                                                      |
-| ------ | -------------------------------------------------------------------------------------- | --------------------------------------------------------- |
-| change | 当前激活面板改变时触发(如果是手风琴模式，参数 activeNames 类型为 string，否则为 array) | (activeNames: array (非手风琴模式) / string (手风琴模式)) |
-
-### Collapse Slots
-
-| 属性名  | 描述           | 子标签        |
-| ------- | -------------- | ------------- |
-| default | 自定义默认内容 | Collapse Item |
-
-### Collapse Item Attributes
-
-| 属性名   | 描述       | 类型               | 默认值 |
-| -------- | ---------- | ------------------ | ------ |
-| name     | 唯一标志符 | `string / boolean` | —      |
-| title    | 面板标题   | `string`           | —      |
-| disabled | 是否禁用   | `boolean`          | —      |
-
-### Collapse Item Slot
-
-| 属性名      | 描述                                                               |
-| ----------- | ------------------------------------------------------------------ |
-| default     | Collapse Item 的内容                                               |
-| title       | Collapse Item title 的内容，v-slot:title="{isActive}"              |
-| index       | Collapse Item index 的内容 v-slot:index="{index, formatedIndex}"   |
-| arrow       | Collapse Item arrow 箭头自定义内容 v-slot:arrow="{isActive}"       |
-| description | Collapse Item 标题行底部的额外内容 v-slot:description="{isActive}" |
-
-::: ifdef M84
-<iframe
- src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/epshowcase/examples/e-collapse-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/006-slider/346/273/221/345/235/227.md

@@ -1,420 +0,0 @@
-# Slider 滑块
-
-将滑块在固定范围内拖动。
-
-## 基本用法
-
-拖动滑块时会显示当前值。
-
-通过设置绑定值来自定义滑块的初始值。
-
-```html
-<template>
-  <div class="slider-demo-block">
-    <span class="demonstration">Default value</span>
-    <e-slider-m v-model="value1" />
-  </div>
-  <div class="slider-demo-block">
-    <span class="demonstration">Customized initial value</span>
-    <e-slider-m v-model="value2" />
-  </div>
-  <div class="slider-demo-block">
-    <span class="demonstration">Hide Tooltip</span>
-    <e-slider-m v-model="value3" :show-tooltip="false" />
-  </div>
-  <div class="slider-demo-block">
-    <span class="demonstration">Format Tooltip</span>
-    <e-slider-m v-model="value4" :format-tooltip="formatTooltip" />
-  </div>
-  <div class="slider-demo-block">
-    <span class="demonstration">Disabled</span>
-    <e-slider-m v-model="value5" disabled />
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { ref } from "vue";
-
-  const value1 = ref(0);
-  const value2 = ref(0);
-  const value3 = ref(0);
-  const value4 = ref(0);
-  const value5 = ref(0);
-
-  const formatTooltip = (val: number) => {
-    return val / 100;
-  };
-</script>
-<style scoped>
-  .slider-demo-block {
-    display: flex;
-    align-items: center;
-  }
-  .slider-demo-block .ep-slider {
-    margin-top: 0;
-    margin-left: 12px;
-  }
-  .slider-demo-block .demonstration {
-    font-size: 14px;
-    color: var(--ep-text-color-secondary);
-    line-height: 44px;
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    margin-bottom: 0;
-  }
-  .slider-demo-block .demonstration + .ep-slider {
-    flex: 0 0 70%;
-  }
-</style>
-```
-
-## 离散值
-
-选项可以是离散的。
-
-使用 `step` 属性设置步进大小。通过设置 `show-stops` 属性，您可以显示断点。
-
-```html
-<template>
-  <div class="slider-demo-block">
-    <span class="demonstration">Breakpoints not displayed</span>
-    <e-slider-m v-model="value1" :step="10" />
-  </div>
-  <div class="slider-demo-block">
-    <span class="demonstration">Breakpoints displayed</span>
-    <e-slider-m v-model="value2" :step="10" show-stops />
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { ref } from "vue";
-
-  const value1 = ref(0);
-  const value2 = ref(0);
-</script>
-<style scoped>
-  .slider-demo-block {
-    display: flex;
-    align-items: center;
-  }
-  .slider-demo-block .ep-slider {
-    margin-top: 0;
-    margin-left: 12px;
-  }
-  .slider-demo-block .demonstration {
-    font-size: 14px;
-    color: var(--ep-text-color-secondary);
-    line-height: 44px;
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    margin-bottom: 0;
-  }
-  .slider-demo-block .demonstration + .ep-slider {
-    flex: 0 0 70%;
-  }
-</style>
-```
-
-## 带输入框的滑块
-
-通过输入框设置值。
-
-设置 `show-input` 属性以在右侧显示输入框。
-
-```html
-<template>
-  <div class="slider-demo-block">
-    <e-slider-m v-model="value" show-input />
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { ref } from "vue";
-
-  const value = ref(0);
-</script>
-<style scoped>
-  .slider-demo-block {
-    display: flex;
-    align-items: center;
-  }
-  .slider-demo-block .ep-slider {
-    margin-top: 0;
-    margin-left: 12px;
-  }
-</style>
-```
-
-## 尺寸
-
-```html
-<template>
-  <e-slider-m v-model="value" size="large" show-input />
-  <e-slider-m v-model="value" show-input />
-  <e-slider-m v-model="value" size="small" show-input />
-</template>
-
-<script lang="ts" setup>
-  import { ref } from "vue";
-
-  const value = ref(0);
-</script>
-
-<style scoped>
-  .ep-slider {
-    margin-top: 20px;
-  }
-
-  .ep-slider:first-child {
-    margin-top: 0;
-  }
-</style>
-<style scoped>
-  .slider-demo-block {
-    display: flex;
-    align-items: center;
-  }
-  .slider-demo-block .ep-slider {
-    margin-top: 0;
-    margin-left: 12px;
-  }
-</style>
-```
-
-## 放置位置
-
-您可以自定义工具提示的放置位置。
-
-```html
-<template>
-  <div class="slider-demo-block">
-    <e-slider-m v-model="value1" />
-  </div>
-  <div class="slider-demo-block">
-    <e-slider-m v-model="value4" placement="left" />
-  </div>
-  <div class="slider-demo-block">
-    <e-slider-m v-model="value3" placement="right" />
-  </div>
-  <div class="slider-demo-block">
-    <e-slider-m v-model="value2" placement="bottom" />
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { ref } from "vue";
-
-  const value1 = ref(0);
-  const value2 = ref(0);
-  const value3 = ref(0);
-  const value4 = ref(0);
-</script>
-<style scoped>
-  .slider-demo-block {
-    display: flex;
-    align-items: center;
-  }
-  .slider-demo-block .ep-slider {
-    margin-top: 0;
-    margin-left: 12px;
-  }
-</style>
-```
-
-## 范围选择
-
-支持选择一定范围的值。
-
-设置 `range` 属性激活范围模式，其中绑定值是由两个边界值组成的数组。
-
-```html
-<template>
-  <div class="slider-demo-block">
-    <e-slider-m v-model="value" range show-stops :max="10" />
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { ref } from "vue";
-
-  const value = ref([4, 8]);
-</script>
-<style scoped>
-  .slider-demo-block {
-    display: flex;
-    align-items: center;
-  }
-  .slider-demo-block .ep-slider {
-    margin-top: 0;
-    margin-left: 12px;
-  }
-</style>
-```
-
-## 垂直模式
-
-将 `vertical` 属性设置为 `true` 启用垂直模式。在垂直模式下，需要设置 `height` 属性。
-```html
-<template>
-  <div class="slider-demo-block">
-    <e-slider-m v-model="value" vertical height="200px" />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-const value = ref(0);
-</script>
-<style scoped>
-.slider-demo-block {
-  display: flex;
-  align-items: center;
-}
-.slider-demo-block .ep-slider {
-  margin-top: 0;
-  margin-left: 12px;
-}
-</style>
-
-
-```
-
-## 显示刻度
-
-设置 `marks` 属性可以在滑块上显示刻度。
-
-```html
-<template>
-  <div class="slider-demo-block">
-    <e-slider-m v-model="value" range :marks="marks" />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { reactive, ref } from 'vue';
-import type { CSSProperties } from 'vue';
-
-interface Mark {
-  style: CSSProperties;
-  label: string;
-}
-
-type Marks = Record<number, Mark | string>;
-
-const value = ref([30, 60]);
-const marks = reactive<Marks>({
-  0: '0°C',
-  8: '8°C',
-  37: '37°C',
-  50: {
-    style: {
-      color: '#1989FA',
-    },
-    label: '50%',
-  },
-});
-</script>
-<style scoped>
-.slider-demo-block {
-  display: flex;
-  align-items: center;
-}
-.slider-demo-block .ep-slider {
-  margin-top: 0;
-  margin-left: 12px;
-}
-</style>
-
-
-```
-
-## API
-
-### Attributes
-
-| **Name**          | **Description**                                                              | **Type**                                                                                                                                                                | **Default** |
-| --------------------- | --------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
-| model-value / v-model | 绑定的值                                                                                | `number`                                                                                                                                                                   | `0`    |
-| min                   | 最小值                                                                                  | `number`                                                                                                                                                                   | `0`     |
-| max                   | 最大值                                                                                  | `number`                                                                                                                                                                   | `100`   |
-| disabled              | 是否禁用滑块                                                                            | `boolean`                                                                                                                                                                 | `false` |
-| step                  | 步进大小                                                                                | `number`                                                                                                                                                                   | `1`     |
-| show-input            | 是否显示输入框，仅在 `range` 为 `false` 时有效                                          | `boolean`                                                                                                                                                                 | `false` |
-| show-input-controls   | 是否显示控制按钮，仅当 `show-input` 为 `true` 时有效                                    | `boolean`                                                                                                                                                                 | `true`  |
-| size                  | 滑块包装器的尺寸，不适用于垂直模式                                                      | `string(enum)`---`'large' \| 'default' \| 'small'`                                                                                                                                 | `'default'` |
-| input-size            | 输入框的尺寸，当设置 `size` 时，默认值是 `size`                                         | `string(enum)` --- `'large' \| 'default' \| 'small'`                                                                                                                                    | `'default'` |
-| show-stops            | 是否显示断点                                                                            | `boolean`                                                                                                                                                                 | `false` |
-| show-tooltip          | 是否显示工具提示值                                                                      | `boolean`                                                                                                                                                                  | `true`  |
-| format-tooltip        | 工具提示值的格式化方法                                                                  | `function(value)`                                                                                                                                                           | —       |
-| range                 | 是否选择一个范围                                                                        | `boolean`                                                                                                                                                                  | `false` |
-| vertical              | 垂直模式                                                                                | `boolean`                                                                                                                                                                  | `false` |
-| height                | 滑块的高度，在垂直模式下需要设置                                                        | `string`                                                                                                                                                                   | —       |
-| label                 | 屏幕阅读器的标签                                                                        | `string`                                                                                                                                                                   | —       |
-| range-start-label     | 当 `range` 为 `true` 时，起始范围的屏幕阅读器标签                                       | `string`                                                                                                                                                                   | —       |
-| range-end-label       | 当 `range` 为 `true` 时，结束范围的屏幕阅读器标签                                       | `string`                                                                                                                                                                   | —       |
-| format-value-text     | 用于显示屏幕阅读器 `aria-valuenow` 属性的格式化方法                                     | `function(value)`                                                                                                                                                           | —       |
-| debounce              | 输入时的防抖延迟，以毫秒为单位，仅当 `show-input` 为 `true` 时有效                      | `number`                                                                                                                                                                   | `300`   |
-| tooltip-class         | 工具提示的自定义类名                                                                    | `string`                                                                                                                                                                   | —       |
-| placement             | 工具提示的位置                                                                          | `string(enum)`---`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | `'top'` |
-| marks                 | 标记，键的类型必须为 `number`，并必须在封闭区间 `[min, max]` 中，每个标记可以自定义样式 | `number` --- `Record<number, Mark \| string>`                                                                                                                                   | —       |
-| validate-event        | 是否触发表单验证                                                                        | `boolean`                                                                                                                                                                 | `true`  |
-
-### Marks Example
-
-```ts
-interface Mark {
-    style: CSSProperties;
-    label: string;
-}
-
-type Marks = Record<number, Mark | string>;
-const marks = reactive<Marks>({
-    0: '0°C',
-    8: '8°C',
-    37: '37°C',
-    50: {
-        style: {
-            color: '#1989FA'
-        },
-        label: '50%'
-    }
-});
-```
-
-
-
-### Events
-
-| **Name** | **Description**                                       | **Parameters** |
-| ------ | ---------------------------------------------------------------- | ---------- |
-| change | 当值发生改变时触发（如果正在拖动滑块，此事件仅在释放时触发） | 改变后的值 |
-| input  | 当数据发生更改时触发（在滑动过程中会实时发出）                   | 改变后的值 |
-
-::: ifdef M84
-<iframe
- src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/epshowcase/examples/e-slider-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>