m8-framework-mcp 1.0.0

package/docs/m8mpdoc-develop/018-EPUI/347/273/204/344/273/266/053-inputnumber/346/225/260/345/255/227/350/276/223/345/205/245/346/241/206.md

@@ -0,0 +1,206 @@
+# Input Number 数字输入框
+
+仅允许输入标准的数字值，可定义范围
+
+## 基础用法
+
+要使用它，只需要在 `<e-input-number-m>` 元素中使用 v-model 绑定变量即可，变量的初始值即为默认值。
+
+```html
+<template>
+  <e-input-number-m v-model="num" :min="1" :max="10" @change="handleChange" />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const num = ref(1);
+const handleChange = (value) => {
+  console.log(value);
+};
+</script>
+```
+
+## 禁用状态
+
+`disabled` 属性接受一个 `Boolean` ，设置为 `true` 即可禁用整个组件。 如果你只需要控制数值在某一范围内，可以设置 `min` 属性和 `max` 属性， 默认最小值为 `0`。
+
+```html
+<template>
+  <e-input-number-m v-model="num" :disabled="true" />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const num = ref(1);
+</script>
+```
+
+## 步进
+
+允许定义递增递减的步进控制
+
+设置 `step` 属性可以控制步长。
+
+```html
+<template>
+  <e-input-number-m v-model="num" :step="2" />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const num = ref(5);
+</script>
+```
+
+## 严格步进
+
+`step-strictly` 属性接受一个 `Boolean` 。 如果这个属性被设置为 `true` ，则只能输入步进的倍数。
+
+```html
+<template>
+  <e-input-number-m v-model="num" :step="2" step-strictly />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const num = ref(2);
+</script>
+```
+
+## 精度
+
+设置 `precision` 属性可以控制数值精度，接收一个 `Number` 。
+
+```html
+<template>
+  <e-input-number-m v-model="num" :precision="2" :step="0.1" :max="10" />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const num = ref(1);
+</script>
+```
+
+## 不同的输入框尺寸
+
+使用 `size` 属性额外配置尺寸，可选的尺寸大小为： `large` 或 `small` .
+
+```html
+<template>
+  <e-input-number-m v-model="num1" size="large" />
+  <e-input-number-m v-model="num2" class="mx-4" />
+  <e-input-number-m v-model="num3" size="small" />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const num1 = ref(1);
+const num2 = ref(2);
+const num3 = ref(3);
+</script>
+```
+
+## 格式化展示
+
+设置 `formatter` 和 `parser` 属性可以定制数字的展示格式。`formatter` 用于格式化展示的值，`parser` 用于解析用户输入的值。
+
+```html
+<template>
+  <div class="demo-input-number">
+    <p>使用千分位分隔符展示：</p>
+    <e-input-number-m
+      v-model="value1"
+      :formatter="(value) => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
+      :parser="(value) => value.replace(/,/g, '')"
+      :min="0"
+    />
+    <p>添加前缀：</p>
+    <e-input-number-m
+      v-model="value2"
+      :formatter="(value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
+      :parser="(value) => value.replace(/\$\s?|(,*)/g, '')"
+      :min="0"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(10000);
+const value2 = ref(100);
+</script>
+```
+
+
+
+## API
+
+### Attributes
+
+| Name                  | Description                       | Type                                   | Default     |
+| :-------------------- | :-------------------------------- | :------------------------------------- | :---------- |
+| model-value / v-model | 选中项绑定值                      | `number`                               | —           |
+| min                   | 设置计数器允许的最小值            | `number`                               | `-Infinity` |
+| max                   | 设置计数器允许的最大值            | `number`                               | `Infinity`  |
+| step                  | 计数器步长                        | `number`                               | `1`         |
+| step-strictly         | 是否只能输入 step 的倍数          | `boolean`                              | `false`     |
+| precision             | 数值精度                          | `number`                               | —           |
+| size                  | 计数器尺寸                        | `enum` `'large'｜'default'｜'small'`   | `'default'` |
+| readonly              | 原生 `readonly` 属性，是否只读    | `boolean`                              | `false`     |
+| disabled              | 是否禁用状态                      | `boolean`                              | `false`     |
+| controls              | 是否使用控制按钮                  | `boolean`                              | `true`      |
+| name                  | 等价于原生 input name 属性        | `string`                               | —           |
+| label                 | 等价于原生 input label 属性       | `string`                               | —           |
+| placeholder           | 等价于原生 input placeholder 属性 | `string`                               | —           |
+| id                    | 等价于原生 input id 属性          | `string`                               | —           |
+| value-on-clear        | 当输入框被清空时显示的值          | `number/null/'min'｜'max'`             | —           |
+| formatter             | 指定输入值的格式                  | `Function` `(value: number) => string` | —           |
+| parser                | 指定从格式化值转换为数字的方式    | `Function` `(value: string) => string` | —           |
+| validate-event        | 是否触发表单验证                  | `boolean`                              | `true`      |
+
+### Events
+
+| Name   | Description                 | **Parameters**                                               |
+| :----- | :-------------------------- | :----------------------------------------------------------- |
+| change | 绑定值被改变时触发          | `(currentValue:number｜undefined,oldValue:number｜undefined)=>void` |
+| blur   | 在组件 Input 失去焦点时触发 | `(event:FocusEvent)=>void`                                   |
+| focus  | 在组件 Input 获得焦点时触发 | `(event:FocusEvent)=>void`                                   |
+
+### Exposes
+
+| Name  | Description           | **Parameters** |
+| :---- | :-------------------- | :------------- |
+| focus | 使 input 组件获得焦点 | `( )=>void`    |
+| blur  | 使 input 组件失去焦点 | `( )=>void`    |
+
+::: ifdef M84
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/epshowcase/examples/e-input-number-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/054-tag/346/240/207/347/255/276.md

@@ -0,0 +1,348 @@
+# Tag 标签
+
+用于标记和选择。
+
+## 基本用法
+
+使用 `type` 属性来定义标签的类型。此外，`color` 属性可用于设置标签的背景颜色。
+
+```html
+<template>
+  <e-tag-m>Tag 1</e-tag-m>
+  <e-tag-m class="ml-2" type="success">Tag 2</e-tag-m>
+  <e-tag-m class="ml-2" type="info">Tag 3</e-tag-m>
+  <e-tag-m class="ml-2" type="warning">Tag 4</e-tag-m>
+  <e-tag-m class="ml-2" type="danger">Tag 5</e-tag-m>
+</template>
+```
+
+## 可移除标签
+
+可以使用 `closable` 属性来定义一个可移除的标签。它接受一个布尔值。默认情况下，标签的移除具有淡入淡出的动画效果。如果您不想使用动画，可以将 `disable-transitions` 属性设置为 `true`。在标签被移除时触发 `close` 事件。
+
+```html
+<template>
+  <e-tag-m v-for="tag in tags" :key="tag.name" class="mx-1" closable :type="tag.type">
+    {{ tag.name }}
+  </e-tag-m>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const tags = ref([
+  { name: 'Tag 1', type: '' },
+  { name: 'Tag 2', type: 'success' },
+  { name: 'Tag 3', type: 'info' },
+  { name: 'Tag 4', type: 'warning' },
+  { name: 'Tag 5', type: 'danger' },
+]);
+</script>
+```
+
+## 动态编辑
+
+您可以使用 `close` 事件来动态添加和删除标签。
+
+```html
+<template>
+  <e-tag-m
+    v-for="tag in dynamicTags"
+    :key="tag"
+    class="mx-1"
+    closable
+    :disable-transitions="false"
+    @close="handleClose(tag)"
+  >
+    {{ tag }}
+  </e-tag-m>
+  <e-input-m
+    v-if="inputVisible"
+    ref="InputRef"
+    v-model="inputValue"
+    class="ml-1 w-20"
+    size="small"
+    @keyup.enter="handleInputConfirm"
+    @blur="handleInputConfirm"
+  />
+  <e-button-m v-else class="button-new-tag ml-1" size="small" @click="showInput"> + New Tag </e-button-m>
+</template>
+
+<script lang="ts" setup>
+import { nextTick, ref } from 'vue';
+const inputValue = ref('');
+const dynamicTags = ref(['Tag 1', 'Tag 2', 'Tag 3']);
+const inputVisible = ref(false);
+const InputRef = ref<InstanceType<typeof EpInput>>();
+
+const handleClose = (tag: string) => {
+  dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
+};
+
+const showInput = () => {
+  inputVisible.value = true;
+  nextTick(() => {
+    InputRef.value!.input!.focus();
+  });
+};
+
+const handleInputConfirm = () => {
+  if (inputValue.value) {
+    dynamicTags.value.push(inputValue.value);
+  }
+  inputVisible.value = false;
+  inputValue.value = '';
+};
+</script>
+```
+
+## 大小
+
+除了默认大小，标签组件还提供了三种额外的大小供您在不同场景中选择。
+
+使用 `size` 属性设置额外的大小，可选值为 `large`、`default` 或 `small`。
+
+```html
+<template>
+  <e-row-m>
+    <e-tag-m class="mx-1" size="large">Large</e-tag-m>
+    <e-tag-m class="mx-1">Default</e-tag-m>
+    <e-tag-m class="mx-1" size="small">Small</e-tag-m>
+  </e-row-m>
+
+  <e-row-m class="mt-4">
+    <e-tag-m class="mx-1" size="large" closable>Large</e-tag-m>
+    <e-tag-m class="mx-1" closable>Default</e-tag-m>
+    <e-tag-m class="mx-1" size="small" closable>Small</e-tag-m>
+  </e-row-m>
+</template>
+```
+
+## 主题
+
+标签提供了三种不同的主题：`dark`、`light` 和 `plain`
+
+使用 `effect` 来改变主题，默认为 `light`
+
+```html
+<template>
+  <div class="tag-group my-2 flex flex-wrap gap-1 items-center">
+    <span class="tag-group__title m-1 line-height-2">Dark</span>
+    <e-tag-m v-for="item in items" :key="item.label" :type="item.type" class="mx-1" effect="dark">
+      {{ item.label }}
+    </e-tag-m>
+    <e-tag-m v-for="item in items" :key="item.label" :type="item.type" class="mx-1" effect="dark" closable>
+      {{ item.label }}
+    </e-tag-m>
+  </div>
+  <div class="tag-group my-2 flex flex-wrap gap-1 items-center">
+    <span class="tag-group__title m-1">Light</span>
+    <e-tag-m v-for="item in items" :key="item.label" class="mx-1" :type="item.type" effect="light">
+      {{ item.label }}
+    </e-tag-m>
+    <e-tag-m v-for="item in items" :key="item.label" class="mx-1" :type="item.type" effect="light" closable>
+      {{ item.label }}
+    </e-tag-m>
+  </div>
+  <div class="tag-group my-2 flex flex-wrap gap-1 items-center">
+    <span class="tag-group__title m-1">Plain</span>
+    <e-tag-m v-for="item in items" :key="item.label" class="mx-1" :type="item.type" effect="plain">
+      {{ item.label }}
+    </e-tag-m>
+    <e-tag-m v-for="item in items" :key="item.label" class="mx-1" :type="item.type" effect="plain" closable>
+      {{ item.label }}
+    </e-tag-m>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import type { TagProps } from '@epoint-mfe/eui-components';
+
+type Item = { type: TagProps['type']; label: string };
+
+const items = ref<Array<Item>>([
+  { type: '', label: 'Tag 1' },
+  { type: 'success', label: 'Tag 2' },
+  { type: 'info', label: 'Tag 3' },
+  { type: 'danger', label: 'Tag 4' },
+  { type: 'warning', label: 'Tag 5' }
+]);
+</script>
+```
+
+## 圆角
+
+标签也可以像按钮一样具有圆角。
+
+```html
+<template>
+  <div class="flex flex-wrap gap-2 my-2">
+    <e-tag-m v-for="item in items" :key="item.label" :type="item.type" class="mx-1" effect="dark" round>
+      {{ item.label }}
+    </e-tag-m>
+  </div>
+  <div class="flex flex-wrap gap-2">
+    <e-tag-m v-for="item in items" :key="item.label" :type="item.type" class="mx-1" effect="light" round>
+      {{ item.label }}
+    </e-tag-m>
+  </div>
+  <div class="flex flex-wrap gap-2 my-2">
+    <e-tag-m v-for="item in items" :key="item.label" :type="item.type" class="mx-1" effect="plain" round>
+      {{ item.label }}
+    </e-tag-m>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import type { TagProps } from '@epoint-mfe/eui-components';
+
+type Item = { type: TagProps['type']; label: string };
+
+const items = ref<Array<Item>>([
+  { type: '', label: 'Tag 1' },
+  { type: 'success', label: 'Tag 2' },
+  { type: 'info', label: 'Tag 3' },
+  { type: 'danger', label: 'Tag 4' },
+  { type: 'warning', label: 'Tag 5' }
+]);
+</script>
+```
+
+## 图标标签
+
+标签可以添加图标，使其更加醒目。
+
+使用 `icon` 属性为标签添加图标。您可以在我们的 `Icon` 组件中找到所需图标。
+
+```html
+<template>
+  <div class="flex flex-wrap gap-2 my-2">
+    <e-tag-m :icon="User">User</e-tag-m>
+    <e-tag-m :icon="Star" type="success">Star</e-tag-m>
+    <e-tag-m :icon="Message" type="info">Message</e-tag-m>
+    <e-tag-m :icon="Warning" type="warning">Warning</e-tag-m>
+    <e-tag-m :icon="Delete" type="danger">Delete</e-tag-m>
+  </div>
+  <div class="flex flex-wrap gap-2 my-2">
+    <e-tag-m :icon="User" effect="dark">User</e-tag-m>
+    <e-tag-m :icon="Star" type="success" effect="dark">Star</e-tag-m>
+    <e-tag-m :icon="Message" type="info" effect="dark">Message</e-tag-m>
+    <e-tag-m :icon="Warning" type="warning" effect="dark">Warning</e-tag-m>
+    <e-tag-m :icon="Delete" type="danger" effect="dark">Delete</e-tag-m>
+  </div>
+  <div class="flex flex-wrap gap-2 my-2">
+    <e-tag-m :icon="User" round>User</e-tag>
+    <e-tag-m :icon="Star" type="success" round>Star</e-tag-m>
+    <e-tag-m :icon="Message" type="info" round>Message</e-tag-m>
+    <e-tag-m :icon="Warning" type="warning" round>Warning</e-tag-m>
+    <e-tag-m :icon="Delete" type="danger" round>Delete</e-tag-m>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Delete, Message, Star, User, Warning } from '@epoint-mfe/eui-icons';
+</script>
+```
+
+## 可选标签
+
+有时因业务需求，我们可能需要类似于复选框的标签，但是**按钮式复选框**无法满足我们的需求，这时就有了 `check-tag`
+
+基本的 check-tag 使用，API 非常简单。通过 `checked` 属性控制选中状态，通过 `disabled` 属性控制禁用状态。
+
+```html
+<template>
+  <div>
+    <e-check-tag-m checked style="margin-right: 8px">Checked</e-check-tag-m>
+    <e-check-tag-m :checked="checked" @change="onChange">Toggle me</e-check-tag-m>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const checked = ref(false);
+
+const onChange = (status: boolean) => {
+  checked.value = status;
+};
+</script>
+```
+
+## Tag API
+
+### Tag Attributes
+
+| 属性                | 描述                   | 类型                   | 默认值 |
+| :------------------ | :--------------------- | :--------------------- | :----- |
+| type                | 标签的类型             | `enum`-`'success' \| 'info' \| 'warning' \| 'danger' \| ''`                 | ''     |
+| closable            | 是否可以移除标签       | `boolean`              | false  |
+| disable-transitions | 是否禁用动画           | `boolean`              | false  |
+| hit                 | 标签是否具有突出的边框 | `boolean`              | false  |
+| color               | 标签的背景颜色         | `string`               | ''     |
+| size                | 标签的大小             | `enum`-`'large' \| 'default' \| 'small' \| ''`                 | ''     |
+| effect              | 标签的主题             | `enum`-`'dark' \| 'light'\| 'plain'`                 | light  |
+| round               | 标签是否是圆角的       | `boolean`              | false  |
+| icon                | 图标组件               | `string` / `Component` | —      |
+
+### Tag Events
+
+| 名称  | 描述           | 类型       |
+| :---- | :------------- | :--------- |
+| click | 点击标签时触发 | `Function`-`(evt: TouchEvents) => void` |
+| close | 移除标签时触发 | `Function`-`(evt: TouchEvents) => void` |
+
+### Tag Slots
+
+| 名称 | 描述           |
+| :--- | :------------- |
+| default | 自定义默认内容 |
+
+## CheckTag API
+
+### CheckTag Attributes
+
+| 名称                      | 描述     | 类型      | 默认值 |
+| :------------------------ | :------- | :-------- | :----- |
+| checked / v-model:checked | 是否选中 | `boolean` | false  |
+| disabled                  | 是否禁用 | `boolean` | false  |
+
+### CheckTag Events
+
+| 名称   | 描述                  | 类型       |
+| :----- | :-------------------- | :--------- |
+| change | 点击 Check Tag 时触发 | `Function`-`(value: boolean) => void` |
+
+### CheckTag Slots
+
+| 名称    | 描述           |
+| :------ | :------------- |
+| default | 自定义默认内容 |
+
+::: ifdef M84
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/epshowcase/examples/e-tag-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>