m8-framework-mcp 1.0.0

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

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

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