m8-framework-mcp 1.0.0 → 1.0.3

package/docs/m8mpdoc-develop/018-EPUI/347/273/204/344/273/266/082-datetimepicker/346/227/266/351/227/264/351/200/211/346/213/251.md

@@ -1,392 +0,0 @@
-# DateTime Picker 时间选择
-
-在一个选择器中选择时间。
-
-## 日期和时间
-
-您可以通过将 `type` 设置为 `datetime` 来选择时间。也可使用快捷选项。
-
-#### Default
-
-```html
-<template>
-  <div class="block">
-    <text class="cell-title">Default</text>
-    <e-date-picker-m
-      v-model="value1"
-      type="datetime"
-      placeholder="Select date and time"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { ref } from "vue";
-  const value1 = ref("");
-</script>
-```
-
-#### With shortcuts
-
-```html
-<template>
-  <div class="block">
-    <text class="cell-title">With shortcuts</text>
-    <e-date-picker-m
-      v-model="value2"
-      type="datetime"
-      placeholder="Select date and time"
-      :shortcuts="shortcuts"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { ref } from "vue";
-
-  const value2 = ref("");
-  const shortcuts = [
-    {
-      text: "今天",
-      value: new Date(),
-    },
-    {
-      text: "昨天",
-      value: () => {
-        const date = new Date();
-
-        date.setTime(date.getTime() - 3600 * 1000 * 24);
-
-        return date;
-      },
-    },
-    {
-      text: "一周前",
-      value: () => {
-        const date = new Date();
-
-        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
-
-        return date;
-      },
-    },
-  ];
-</script>
-```
-
-#### With default time
-
-```html
-<template>
-  <div class="block">
-    <text class="cell-title">With default time</text>
-    <e-date-picker-m
-      v-model="value3"
-      type="datetime"
-      placeholder="Select date and time"
-      :default-time="defaultTime1"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { ref } from "vue";
-  const value3 = ref("");
-
-  const defaultTime1 = new Date(2000, 1, 1, 12, 0, 0); // '12:00:00'
-</script>
-```
-
-## 日期时间格式
-
-使用 `format` 控制输入框中显示的文本格式。使用 `value-format` 控制绑定值的格式。
-
-默认情况下，该组件接受并发出 Date 对象。
-
-#### Emits Date object
-
-```html
-<template>
-  <div class="block">
-    <text class="cell-title">Emits Date object</text>
-    <div class="demonstration">Value: {{ value4 }}</div>
-    <e-date-picker-m
-      v-model="value4"
-      type="datetime"
-      placeholder="Pick a Date"
-      format="YYYY/MM/DD HH:mm:ss"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { ref } from "vue";
-  const value4 = ref("");
-</script>
-```
-
-#### Use value-format
-
-```html
-<template>
-  <div class="block">
-    <text class="cell-title">Use value-format</text>
-    <div class="demonstration">Value：{{ value5 }}</div>
-    <e-date-picker-m
-      v-model="value5"
-      type="datetime"
-      placeholder="Pick a Date"
-      format="YYYY/MM/DD hh:mm:ss"
-      value-format="YYYY-MM-DD h:m:s a"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { ref } from "vue";
-  const value5 = ref("");
-</script>
-```
-
-#### Timestamp
-
-```html
-<template>
-  <div class="block">
-    <text class="cell-title">Timestamp</text>
-    <div class="demonstration">Value：{{ value6 }}</div>
-    <e-date-picker-m
-      v-model="value6"
-      type="datetime"
-      placeholder="Pick a Date"
-      format="YYYY/MM/DD hh:mm:ss"
-      value-format="x"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { ref } from "vue";
-  const value6 = ref("");
-</script>
-```
-
-## 日期和时间范围
-
-通过将 `type` 设置为 `datetimerange`，您可以选择日期和时间范围。
-
-#### Default
-
-```html
-<template>
-  <div class="block">
-    <text class="cell-title">Default</text>
-    <e-radio-group-m v-model="size" label="尺寸控制">
-      <e-radio-button-m value="large" @click="size = 'large'"
-        >大尺寸</e-radio-button-m
-      >
-      <e-radio-button-m value="default" @click="size = 'default'"
-        >默认尺寸</e-radio-button-m
-      >
-      <e-radio-button-m value="small" @click="size = 'small'"
-        >小尺寸</e-radio-button-m
-      >
-    </e-radio-group-m>
-    <e-date-picker-m
-      v-model="value7"
-      :size="size"
-      type="datetimerange"
-      range-separator="～"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { ref } from "vue";
-  const value7 = ref("");
-  const size = ref<"default" | "large" | "small">("default");
-</script>
-```
-
-#### With shortcuts
-
-支持选择日期范围。
-
-```html
-<template>
-  <div class="block">
-    <text class="cell-title">With shortcuts</text>
-    <e-date-picker-m
-      v-model="value8"
-      type="datetimerange"
-      :shortcuts="shortcuts2"
-      range-separator="～"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { ref } from "vue";
-  const value8 = ref("");
-  const shortcuts2 = [
-    {
-      text: "Last week",
-      value: () => {
-        const end = new Date();
-        const start = new Date();
-
-        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-
-        return [start, end];
-      },
-    },
-    {
-      text: "Last month",
-      value: () => {
-        const end = new Date();
-        const start = new Date();
-
-        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
-
-        return [start, end];
-      },
-    },
-    {
-      text: "Last 3 months",
-      value: () => {
-        const end = new Date();
-        const start = new Date();
-
-        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
-
-        return [start, end];
-      },
-    },
-  ];
-</script>
-```
-
-## 开始日期和结束日期的默认时间值
-
-在日期面板上选择日期范围（类型为 datetimerange）时，将使用 `00:00:00` 作为开始日期和结束日期的默认时间值。您可以使用 `default-time` 属性进行控制。`default-time` 接受最多两个 `Date` 对象的数组。第一个项目控制开始日期的时间值，第二个项目控制结束日期的时间值。
-
-#### Start and end date time 12:00:00
-
-```html
-<template>
-  <div class="block">
-    <text class="cell-title">Start and end date time 12:00:00</text>
-    <e-date-picker-m
-      v-model="value9"
-      type="datetimerange"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { ref } from "vue";
-  const value9 = ref("");
-  const defaultTime1 = new Date(2000, 1, 1, 12, 0, 0); // '12:00:00'
-</script>
-```
-
-####
-
-```html
-<template>
-  <div class="block">
-    <text class="cell-title"
-      >Start date time 12:00:00, end date time 08:00:00</text
-    >
-    <e-date-picker-m
-      v-model="value10"
-      type="datetimerange"
-      :default-time="defaultTime2"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { ref } from "vue";
-  const value10 = ref("");
-  const defaultTime2: [Date, Date] = [
-    new Date(2000, 1, 1, 12, 0, 0),
-    new Date(2000, 2, 1, 8, 0, 0),
-  ]; // '12:00:00', '08:00:00'
-</script>
-```
-
-## API
-
-### Attributes
-
-| 属性名                | 描述                                                     | 类型                                                                                                                                                          | 默认值              |
-| ------------------------- | ---------------------------------------- | ------- | ------- |
-| model-value / v-model | 绑定值，如果它是一个数组，其长度应为 2                   | `Date` / `number` / `string` / `Array`                                                                                                                        | —                   |
-| readonly              | 日期选择器是否只读                                       | boolean                                                                                                                                                       | false               |
-| disabled              | 日期选择器是否禁用                                       | boolean                                                                                                                                                       | false               |
-| size                  | 输入的大小                                               | `'large' \| 'default' \| 'small'`                                                                                                                             | default             |
-| clearable             | 是否显示清除按钮                                         | boolean                                                                                                                                                       | true                |
-| placeholder           | 非范围模式下的占位符                                     | string                                                                                                                                                        | —                   |
-| type                  | 选择器的类型                                             | 枚举`'year' \| 'month' \|'week' \| 'date' \| 'datetime' \|  'datetimerange' \| 'daterange'`                                                                            | date                |
-| format                | 输入框中显示的值的格式                                   | `'YYYY-MM-DD HH:mm:ss' \|'YYYY/MM/DD HH:mm:ss' \|'YYYY-MM-DD' \| 'YYYY-MM' \|  'YYYY-MM-DD HH:mm' \| 'YYYY/MM/DD' \| 'YYYY/MM' \|'YYYY' \|'YYYY/MM/DD HH:mm'` | YYYY-MM-DD HH:mm:ss |
-| validate-event        | 是否触发表单验证                                         | boolean                                                                                                                                                       | true                |
- |popper-class | 日期选择器下拉菜单的自定义类名 | string | —   |
-| range-separator       | 范围分隔符                                               | string                                                                                                                                                        | ～                   |
-| default-value         | 可选，日历的默认日期                                     | `Date` / `[Date, Date]`                                                                                                                                       | —                   |
-| default-time          | 可选，选择日期范围时要使用的时间值                       | `Date` / `[Date, Date]`                                                                                                                                       | —                   |
-| value-format          | 可选，绑定值的格式。如果未指定，绑定值将是一个 Date 对象 | `YYYY` / `MM` / `DD` / `YYYY/MM/DD HH:mm`/`YYYY/MM/DD` / `YYYY-MM-DD` / `YYYY-MM-DD HH:mm`/ `YYYY-MM-DD HH:mm:ss`/ `YYYY-MM-DD HH:mm:ss a`/ `x`                                        | —                   |
-| id                    | 与本机输入中的 `id` 属性相同                             | string / `[string, string]`                                                                                                                                   | —                   |
-| name                  | 与本机输入中的 `name` 属性相同                           | string                                                                                                                                                        | —                   |
-| suffix-icon           | 自定义后缀图标组件                                       | `string \| Component`                                                                                                                                         | Calendar            |
-| clear-icon            | 自定义清除图标组件                                       | `string \| Component`                                                                                                                                         | CircleClose         |
-| shortcuts            | 设置快捷选项的对象数组	| object`Array<{ text: string, value: date / function () =>  date/array }` | —  |
-| disabled-date         | 用于确定日期是否禁用的函数，以日期作为参数，应返回布尔值   | Function`(data: Date) => boolean`                              | —                   |
-| cell-class-name       | 设置自定义类名                                           | Function`(date: Date) =>string`| —                   |
-
-### Events
-
-| Name            | Description                                               | Parameters                      |
-| --------------- | --------------------------------------------------------- | ------------------------------- |
-| change          | 当选定的值发生变化时触发                                  | 当前选定的值                    |
-| blur            | 当输入框失去焦点时触发                                    | (event: FocusEvent)             |
-| focus           | 当输入框获得焦点时触发                                    | (event: FocusEvent)             |
-| calendar-change | 当日历选择的日期发生更改时触发。仅适用于 `daterange` 类型 | 移除的标签值                    |
-| panel-change    | 当导航按钮被点击时触发                                    | —                               |
-| visible-change  | 当下拉菜单出现/消失时触发                                 | 当它出现时为 true，否则为 false |
-
-### Methods
-
-| Method | Description      | Parameters |
-| ------ | ---------------- | ---------- |
-| focus  | 让输入框获得焦点 | —          |
-
-### Slots
-
-| Name      | Description      | Subtags |
-| --------- | ---------------- | ------- |
-| `default`       | 自定义单元格内容               |          |
-
-::: ifdef M84
-<iframe
- src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/epshowcase/examples/e-datetime-picker-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/085-timepicker/346/227/266/351/227/264/351/200/211/346/213/251/345/231/250.md

@@ -1,163 +0,0 @@
-# TimePicker 时间选择器
-
-在一个选择器中选择时间。
-
-## 任意时间选择器
-
-可以选择任意时间。
-
-默认情况下，您可以通过手势上下滑动来选择时间。
-
-```html
-<template>
-  <div class="block">
-    <e-time-picker-m v-model="value1" placeholder="Arbitrary time" />
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { ref } from "vue";
-  const value1 = ref("");
-</script>
-```
-
-## 限制时间范围
-
-您还可以限制时间范围。
-
-通过指定 `disabledHours`、`disabledMinutes` 和 `disabledSeconds` 来限制时间范围。
-
-```html
-<template>
-  <div class="block">
-    <e-time-picker-m
-      v-model="value2"
-      :disabled-hours="disabledHours"
-      :disabled-minutes="disabledMinutes"
-      :disabled-seconds="disabledSeconds"
-      placeholder="Arbitrary time"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { ref } from "vue";
-  const value2 = ref(new Date(2016, 9, 10, 18, 30));
-
-  const makeRange = (start: number, end: number) => {
-    const result: number[] = [];
-    for (let i = start; i <= end; i++) {
-      result.push(i);
-    }
-    return result;
-  };
-  const disabledHours = () => {
-    return makeRange(0, 16).concat(makeRange(19, 23));
-  };
-  const disabledMinutes = (hour: number) => {
-    if (hour === 17) {
-      return makeRange(0, 29);
-    }
-    if (hour === 18) {
-      return makeRange(31, 59);
-    }
-  };
-  const disabledSeconds = (hour: number, minute: number) => {
-    if (hour === 18 &&
-     minute === 30) {
-      return makeRange(1, 59);
-    }
-  };
-</script>
-```
-
-## 任意时间范围
-
-可以选择任意时间范围。
-
-通过添加 `is-range` 属性来选择时间范围。
-
-```html
-<template>
-  <div class="block">
-    <e-time-picker-m v-model="value3" is-range range-separator="～" />
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { ref } from "vue";
-
-  const value3 = ref<any>([
-    new Date(2016, 9, 10, 8, 40),
-    new Date(2016, 9, 10, 9, 40),
-  ]);
-</script>
-```
-
-## API
-
-### Attributes
-
-| 属性名                | 描述                                   | 类型                                                                                      | 默认值      |
-| --------------------- | -------------------------------------- | ----------------------------------------------------------------------------------------- | ----------- |
-| model-value / v-model | 绑定值，如果它是一个数组，其长度应为 2 | `number` / `string` / `Date` / `[Date, Date]` / `[number, number]`/ `[string, string]   ` | —           |
-| readonly              | 时间选择器是否只读                     | boolean                                                                                   | false       |
-| disabled              | 时间选择器是否禁用                     | boolean                                                                                   | false       |
-| clearable             | 是否显示清除按钮                       | boolean                                                                                   | true        |
-| size                  | 输入的大小                             | `'large' \| 'default' \| 'small'`                                                         | default     |
-| placeholder           | 占位符                   | string                                                                                    | —           |
-| is-range	           | 是否选择时间范围	| boolean                        | false           |
-| format                | 输入框中显示的值的格式                 | `'HH:mm:ss' \|'HH:mm' \| 'hh:mm:ss a' \|  'hh:mm:ss A' \| 'hh:mm a' \| 'hh:mm A'`         | -           |
-| popper-class          | 时间选择器下拉菜单的自定义类名         | string                                                                                    | —           |
-| range-separator       | 范围分隔符                             | string                                                                                    | -           |
-| default-value         | 可选，日历的默认日期                   | `Date` / `[Date, Date]`                                                                   | —           |
-| id                    | 与本机输入中的 `id` 属性相同           | string / `[string, string]`                                                               | —           |
-| name                  | 与本机输入中的 `name` 属性相同         | string                                                                                    | —           |
-| suffix-icon           | 自定义后缀图标组件                     | `string \| Component`                                                                     | Calendar    |
-| clear-icon            | 自定义清除图标组件                     | `string \| Component`                                                                     | CircleClose |
-| disabled-hours        | 指定不能选择的小时数组                 | Function`(role: string, comparingDate?: Dayjs) => number[]`                               | —           |
-| disabled-minutes      | 指定不能选择的分钟数组                 | Function`(hour: number, role: string, comparingDate?: Dayjs) => number[]`                 | —           |
-| disabled-seconds      | 指定不能选择的秒数组                   | Function`(hour: number, minute: number, role: string, comparingDate?: Dayjs) => number[]` | —           |
-| tabindex              | 输入的 tabindex                        | `string \| number`                                                                        | 0           |
-
-### Events
-
-| Name           | Description               | Parameters                    |
-| -------------- | ------------------------- | ----------------------------- |
-| change         | 当选定的值发生变化时触发  | `(val: number \| string \| Date \| [number, number] \| [string, string] \| [Date, Date]) => void`            |
-| blur           | 当输入框失去焦点时触发    | (event: FocusEvent)           |
-| focus          | 当输入框获得焦点时触发    | (event: FocusEvent)           |
-| visible-change | 当下拉菜单出现/消失时触发 | (visibility: boolean) => void |
-
-### Methods
-
-| Method      | Description        | Parameters |
-| ----------- | ------------------ | ---------- |
-| focus       | 让输入框获得焦点   | (e: FocusEvent \| undefined) => void|
-| blur        | 使输入组件失去焦点 | (e: FocusEvent \| undefined) => void         |
-| handleOpen  | 打开时间选择器弹窗 |() => void          |
-| handleClose | 关闭时间选择器弹窗 | () => void|
-
-::: ifdef M84
-<iframe
- src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/epshowcase/examples/e-time-picker-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>