m8-framework-mcp 1.0.0 → 1.0.1

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

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

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