@opentiny/vue-docs 3.16.2 → 3.17.1

package/demos/mobile-first/app/date-picker/datetime-range.vue

@@ -0,0 +1,21 @@
+<template>
+  <div style="width: 270px">
+    <p>{{ value }}</p>
+    <tiny-date-picker v-model="value" type="datetimerange"></tiny-date-picker>
+  </div>
+</template>
+
+<script>
+import { DatePicker } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyDatePicker: DatePicker
+  },
+  data() {
+    return {
+      value: ['2023-11-21T01:11:11.000Z', '2023-12-07T23:08:24.000Z']
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/date-picker/datetime.vue

@@ -0,0 +1,20 @@
+<template>
+  <div style="width: 270px">
+    <tiny-date-picker v-model="value" type="datetime"></tiny-date-picker>
+  </div>
+</template>
+
+<script>
+import { DatePicker } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyDatePicker: DatePicker
+  },
+  data() {
+    return {
+      value: ''
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/date-picker/disabled.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <tiny-button @click="disabled = !disabled">改为{{ disabled ? '启用' : '禁用' }}</tiny-button>
+    <br /><br />
+
+    <tiny-date-picker v-model="value" :disabled="disabled"></tiny-date-picker>
+    <br /><br />
+
+    <tiny-button @click="displayOnly = !displayOnly">改为{{ displayOnly ? '可操作' : '仅显示' }}模式</tiny-button>
+    <br /><br />
+
+    <tiny-date-picker v-model="value" :display-only="displayOnly"></tiny-date-picker>
+  </div>
+</template>
+
+<script>
+import { DatePicker, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyDatePicker: DatePicker,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      value: new Date(),
+      disabled: false,
+      displayOnly: false
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/date-picker/placeholder.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <p>日期组件</p>
+    <tiny-date-picker v-model="value1" type="date" placeholder="请选择日期 placeholder"></tiny-date-picker>
+
+    <br />
+    <p>日期范围选择组件</p>
+    <tiny-date-picker
+      v-model="value2"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期 start"
+      end-placeholder="结束日期 end"
+    ></tiny-date-picker>
+  </div>
+</template>
+
+<script>
+import { DatePicker } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyDatePicker: DatePicker
+  },
+  data() {
+    return {
+      value1: '',
+      value2: []
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/date-picker/step.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <p>日期值：{{ value }}</p>
+    <tiny-date-picker :step="step" v-model="value" type="datetimerange"></tiny-date-picker>
+  </div>
+</template>
+
+<script>
+import { DatePicker } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyDatePicker: DatePicker
+  },
+  data() {
+    return {
+      step: {
+        hour: 2,
+        minute: 5
+      },
+      value: []
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/date-picker/webdoc/date-picker.cn.md

@@ -0,0 +1,9 @@
+---
+title: DatePicker 日期选择器组件
+---
+
+# DatePicker 日期选择器组件
+
+<div>
+
+</div>

package/demos/mobile-first/app/date-picker/webdoc/date-picker.en.md

@@ -0,0 +1,9 @@
+---
+title: DatePicker 日期选择器组件
+---
+
+# DatePicker 日期选择器组件
+
+<div>
+
+</div>

package/demos/mobile-first/app/date-picker/webdoc/date-picker.js

@@ -0,0 +1,120 @@
+export default {
+  column: '2',
+  owner: '',
+  demos: [
+    {
+      demoId: 'basic-usage',
+      name: {
+        'zh-CN': '基本用法',
+        'en-US': 'basic usage'
+      },
+      desc: {
+        'zh-CN': '<p>设置 `type` 属性默认值为 `date`，以日期的形式进行选择。</p>',
+        'en-US': '<p>button type</p>'
+      },
+      codeFiles: ['basic-usage.vue']
+    },
+    {
+      demoId: 'datetime',
+      name: {
+        'zh-CN': '选择日期时间',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>设置 `type` 属性为 `datetime`，以日期时间的形式进行选择。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['datetime.vue']
+    },
+    {
+      demoId: 'date-range',
+      name: {
+        'zh-CN': '选择日期范围',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>设置 `type` 属性为 `daterange`，以日期范围的形式进行选择。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['date-range.vue']
+    },
+    {
+      demoId: 'datetime-range',
+      name: {
+        'zh-CN': '选择日期时间范围',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>设置 `type` 属性为 `datetimerange`，以日期时间范围的形式进行选择。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['datetime-range.vue']
+    },
+    {
+      demoId: 'year',
+      name: {
+        'zh-CN': '年份选择',
+        'en-US': 'Year and month selector'
+      },
+      desc: {
+        'zh-CN':
+          '<p>设置 `type` 属性为 `year`，进行年份单选；设置 `type` 属性为 `years`，进行年份多选；设置 `type` 属性为 `yearrange`，进行年份范围选择。<p>',
+        'en-US': '<p>Set the `type` attribute to `year-month` to select a year-month selector.</p>'
+      },
+      codeFiles: ['year.vue']
+    },
+    {
+      demoId: 'placeholder',
+      name: {
+        'zh-CN': '占位符',
+        'en-US': 'Year Month Range Selector'
+      },
+      desc: {
+        'zh-CN':
+          '<p>单选可通过 `placeholder` 设置占位符。范围选择时，`start-placeholder` 和 `end-placeholder` 属性可分别指定开始日期和结束日期输入框的占位符。`range-separator` 属性指定开始日期和结束日期输入框之间的分隔符。<p>',
+        'en-US':
+          '<p>Single choice: You can use `placeholder` to set a placeholder. When a range is selected, the `start-placeholder` and `end-placeholder` attributes specify placeholders for the start and end date input boxes, respectively. The `range-separator` property specifies the separator between the start date and end date input boxes.<p>'
+      },
+      codeFiles: ['placeholder.vue']
+    },
+    {
+      demoId: 'disabled',
+      name: {
+        'zh-CN': '禁用',
+        'en-US': 'Disabled'
+      },
+      desc: {
+        'zh-CN': '<p>配置 `disabled` 属性设置时间选择器禁用。<p>',
+        'en-US': '<p>Configure the `disabled` property to disable the time selector.<p>'
+      },
+      codeFiles: ['disabled.vue']
+    },
+    {
+      demoId: 'step',
+      name: {
+        'zh-CN': '步长',
+        'en-US': 'Year Month Range Selector Limit Range'
+      },
+      desc: {
+        'zh-CN': '<p>通过 `step` 设置时间选择的步长，默认值为 `{ hour: 1, minute: 1, second: 1 }`。<p>',
+        'en-US':
+          '<p>Use `step` to set the time selection step. The default value is `{hour: 1, minute: 1, second: 1}`.<p>'
+      },
+      codeFiles: ['step.vue']
+    },
+    {
+      demoId: 'about-clear',
+      name: {
+        'zh-CN': '清除输入',
+        'en-US': 'Clear input'
+      },
+      desc: {
+        'zh-CN':
+          '<p>选择日期后，鼠标悬停在输入框时，默认会显示清除图标，单击图标可以清除输入框内容。设置 `clearable` 属性为 `false` 后，则不显示清除图标，不可清除。<p>',
+        'en-US':
+          '<p>After you select a date, the clear icon is displayed by default when you hover the cursor over the text box. You can click the icon to clear the text box. After the `clearable` attribute is set to `false`, the clear icon is not displayed and cannot be cleared.<p>'
+      },
+      codeFiles: ['about-clear.vue']
+    }
+  ]
+}

package/demos/mobile-first/app/date-picker/year.vue

@@ -0,0 +1,63 @@
+<template>
+  <tiny-layout>
+    <tiny-row>
+      <tiny-col :span="6">
+        <div class="w-96">
+          <span>年份单选：</span>
+          <tiny-date-picker v-model="value1" type="year" placeholder="选择年份单选"></tiny-date-picker>
+          值：{{ value1 }}
+        </div>
+      </tiny-col>
+      <tiny-col :span="6">
+        <div class="w-96">
+          <span>年份多选：</span>
+          <tiny-date-picker v-model="value2" type="years" placeholder="选择年份多选"></tiny-date-picker>
+          值：{{ value2 }}
+        </div>
+      </tiny-col>
+    </tiny-row>
+    <br />
+    <tiny-row>
+      <tiny-col :span="6">
+        <div class="w-96">
+          <span>年份范围选择：</span>
+          <tiny-date-picker v-model="value3" type="yearrange" placeholder="选择年份范围"></tiny-date-picker>
+          值：{{ value3 }}
+        </div>
+      </tiny-col>
+      <tiny-col :span="6">
+        <div class="w-96">
+          年份禁用：
+          <tiny-date-picker v-model="value4" type="year" :picker-options="pickerOptions"></tiny-date-picker>
+          值：{{ value4 }}
+        </div>
+      </tiny-col>
+    </tiny-row>
+  </tiny-layout>
+</template>
+
+<script>
+import { Layout, Row, Col, DatePicker } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyLayout: Layout,
+    TinyRow: Row,
+    TinyCol: Col,
+    TinyDatePicker: DatePicker
+  },
+  data() {
+    return {
+      value1: '',
+      value2: ['2021-01-01T16:00:00.000Z', '2000-01-01T16:00:00.000Z'],
+      value3: '',
+      value4: '',
+      pickerOptions: {
+        disabledDate(time) {
+          return time.getTime() > Date.now()
+        }
+      }
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/grid/basic-usage.vue

@@ -43,6 +43,7 @@
             :image="row.logo"
             :flex-grow="[0, 0]"
             :flex-basis="['50%', '50%']"
+            operate-flex-basis="80px"
             :options="listOptions"
             class="mb-3"
           >
@@ -176,7 +177,12 @@ export default {
       },
       operationConfig: {
         buttons: [
-          { name: '操作1', icon: IconAreaChart(), click: this.clickHandler, disabled: true },
+          {
+            name: '操作',
+            icon: IconAreaChart(),
+            click: this.clickHandler,
+            disabled: true
+          },
           { name: '操作2', icon: IconBarChart(), click: this.clickHandler, disabled: (row) => row.id === '1' },
           { name: '操作3', icon: IconDotChart(), click: this.clickHandler, hidden: true },
           { name: '操作4', icon: IconLineChart(), click: this.clickHandler, hidden: (row) => row.id === '2' },

package/demos/mobile-first/app/input/resize.vue

@@ -1,18 +1,44 @@
 <template>
   <div class="demo-input">
-    <tiny-input type="textarea" v-model="input" placeholder="resize 为默认"></tiny-input>
-    <br />
-    <br />
-    <tiny-input type="textarea" v-model="input" resize="none" placeholder="resize 为 none"></tiny-input>
-    <br />
-    <br />
-    <tiny-input type="textarea" v-model="input" resize="both" placeholder="resize 为 both"></tiny-input>
-    <br />
-    <br />
-    <tiny-input type="textarea" v-model="input" resize="horizontal" placeholder="resize 为 horizontal"></tiny-input>
-    <br />
-    <br />
-    <tiny-input type="textarea" v-model="input" resize="vertical" placeholder="resize 为 vertical"></tiny-input>
+    <p>resize</p>
+    <tiny-input type="textarea" v-model="input" placeholder="default"></tiny-input>
+    <tiny-input type="textarea" v-model="input" resize="none" placeholder="resize = none"></tiny-input>
+    <tiny-input type="textarea" v-model="input" resize="both" placeholder="resize = both"></tiny-input>
+    <tiny-input type="textarea" v-model="input" resize="horizontal" placeholder="resize = horizontal"></tiny-input>
+    <tiny-input type="textarea" v-model="input" resize="vertical" placeholder="resize = vertical"></tiny-input>
+
+    <p>autosize</p>
+    <tiny-input
+      type="textarea"
+      v-model="textarea"
+      placeholder="autosize = { minRows: 2, maxRows: 3 }"
+      :autosize="{ minRows: 2, maxRows: 3 }"
+    ></tiny-input>
+    <tiny-input type="textarea" v-model="textarea" placeholder="autosize" autosize></tiny-input>
+
+    <p>hover-expand</p>
+    <tiny-input
+      type="textarea"
+      v-model="hoverText"
+      placeholder="hover-expand autosize = { minRows: 6, maxRows: 10 }"
+      :autosize="{ minRows: 6, maxRows: 10 }"
+      hover-expand
+    ></tiny-input>
+    <tiny-input
+      type="textarea"
+      v-model="hoverText"
+      placeholder="autosize  hover-expand"
+      autosize
+      hover-expand
+    ></tiny-input>
+    <tiny-input
+      type="textarea"
+      v-model="displayOnlyText"
+      placeholder="autosize  hover-expand display-only"
+      autosize
+      hover-expand
+      display-only
+    ></tiny-input>
   </div>
 </template>
 
@@ -25,14 +51,19 @@ export default {
   },
   data() {
     return {
-      input: ''
+      input: '',
+      textarea: '',
+      hoverText: '',
+      displayOnlyText: 'value 的内容'
     }
   }
 }
 </script>
 
-<style scoped>
-.demo-input .tiny-textarea {
-  width: 400px;
+<style lang="less" scoped>
+.demo-input div[data-tag='tiny-input'] {
+  width: 200px;
+  margin: 5px;
+  display: inline-block;
 }
 </style>

package/demos/mobile-first/app/input/webdoc/input.js

@@ -133,8 +133,14 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>可通过 `resize` 属性设置文本域的缩放。可选值：`none / both / horizontal / vertical`。注意：只在 `type="textarea"` 时有效。<p>',
-        'en-US': '<p>bbutton click</p>'
+          '<p>可通过 <code>resize</code> 属性设置文本域的缩放。可选值：<code>none / both / horizontal / vertical</code>。注意：只在 <code>type="textarea"</code> 时有效。</p>\n ' +
+          '<p>可通过 <code>autosize</code> 属性设置文本域自适应内容高度。可传入对象，如<code>{ minRows: 2, maxRows: 6 }</code>。</p> \n<p></p>' +
+          '<p>可通过 <code>hover-expand</code> 属性设置文本域鼠标悬浮展开/收起，只对 <code>type=textarea</code> 有效，最好搭配 <code>autosize</code> 一起使用<p>',
+
+        'en-US':
+          '<p>You can use the <code>resize</code> property to set the scaling of the text field. The value can be <code>none / both / horizontal / vertical</code>. Note: This parameter is valid only when <code>type="textarea"</code>.</p>' +
+          '<p>The <code>autosize</code> property allows you to set the text field to adapt to the content height. You can transfer an object, for example, <code>{minRows: 2, maxRows: 6}</code>.</p>' +
+          '<p>You can use the <code>hover-expand</code> attribute to set the text field to be expanded or collapsed by hovering the mouse. This parameter is valid only for <code>type=textarea</code>. It is recommended that you use it together with <code>autosize</code></p>'
       },
       codeFiles: ['resize.vue']
     },

package/demos/mobile-first/app/tabs/before-leave.vue

@@ -24,6 +24,9 @@ export default {
   },
   methods: {
     beforeLeave() {
+      // 以下写法均为禁用切换
+      // return Promise.resolve(false)
+      // return Promise.reject()
       return false
     }
   }

package/demos/mobile-first/app/time-line-new/auto-slot.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="flex justify-between">
+    <tiny-time-line :data="data">
+      <template #left="data">
+        <div class="ml-1.5 -mt-1.5">
+          <tiny-user-head type="image" round v-model="imgUrl" :size="32"></tiny-user-head>
+        </div>
+        <span class="ml-2 inline-block text-xs leading-5 mb-6">
+          {{ data.slotScope.title }}
+        </span>
+      </template>
+    </tiny-time-line>
+
+    <tiny-time-line :data="data1">
+      <template #left="data1">
+        <div class="ml-1.5 -mt-1.5">
+          <tiny-user-head type="image" round v-model="imgUrl" :size="32"></tiny-user-head>
+        </div>
+        <span class="ml-2 inline-block text-xs leading-5 mb-6">
+          {{ data1.slotScope.title }}
+        </span>
+      </template>
+    </tiny-time-line>
+  </div>
+</template>
+
+<script>
+import { TimeLineNew, UserHead } from '@opentiny/vue'
+import { IconLoading } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyTimeLine: TimeLineNew,
+    TinyUserHead: UserHead
+  },
+  data() {
+    return {
+      imgUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/1.jpg`,
+      data: [{ title: '节点标题1' }, { title: '节点标题2' }, { title: '节点标题3' }, { title: '节点标题4' }],
+      data1: [
+        { title: '节点标题1' },
+        { title: '节点标题2' },
+        { title: '节点标题3' },
+        { title: '节点标题4' },
+        { title: '节点标题5', autoColor: IconLoading() }
+      ]
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/time-line-new/basic-usage.vue

@@ -0,0 +1,23 @@
+<template>
+  <tiny-time-line :data="data"></tiny-time-line>
+</template>
+
+<script>
+import { TimeLineNew } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTimeLine: TimeLineNew
+  },
+  data() {
+    return {
+      data: [
+        { name: '节点标题', time: '2022-11-11 00:01:30' },
+        { name: '节点标题', time: '2022-11-12 14:20:15' },
+        { name: '节点标题', time: '2022-11-14 20:45:50' },
+        { name: '节点标题', time: '2022-11-14 20:45:50' }
+      ]
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/time-line-new/fold-time.vue

@@ -0,0 +1,29 @@
+<template>
+  <tiny-time-line :data="data" vertical></tiny-time-line>
+</template>
+
+<script>
+import { TimeLineNew } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTimeLine: TimeLineNew
+  },
+  data() {
+    return {
+      active: 1,
+      data: [
+        { name: '节点标题', time: '2019-11-11 00:01:30' },
+        { name: '节点标题', time: '2019-11-12 14:20:15' },
+        { name: '节点标题', time: '2019-11-14 20:45:50' },
+        { name: '节点标题', time: '2019-11-11 00:01:30' },
+        { name: '节点标题', time: '2019-11-12 14:20:15' },
+        { name: '节点标题', time: '2019-11-14 20:45:50' },
+        { name: '节点标题', time: '2019-11-11 00:01:30' },
+        { name: '节点标题', time: '2019-11-12 14:20:15' },
+        { name: '节点标题', time: '2019-11-14 20:45:50' }
+      ]
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/time-line-new/limited-nodes.vue

@@ -0,0 +1,29 @@
+<template>
+  <tiny-time-line :data="data" vertical :limited-nodes="5"></tiny-time-line>
+</template>
+
+<script>
+import { TimeLineNew } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTimeLine: TimeLineNew
+  },
+  data() {
+    return {
+      active: 1,
+      data: [
+        { name: '节点标题', time: '2019-11-11 00:01:30' },
+        { name: '节点标题', time: '2019-11-12 14:20:15' },
+        { name: '节点标题', time: '2019-11-14 20:45:50' },
+        { name: '节点标题', time: '2019-11-11 00:01:30' },
+        { name: '节点标题', time: '2019-11-12 14:20:15' },
+        { name: '节点标题', time: '2019-11-14 20:45:50' },
+        { name: '节点标题', time: '2019-11-11 00:01:30' },
+        { name: '节点标题', time: '2019-11-12 14:20:15' },
+        { name: '节点标题', time: '2019-11-14 20:45:50' }
+      ]
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/time-line-new/many-status.vue

@@ -0,0 +1,24 @@
+<template>
+  <tiny-time-line :data="data" :show-number="false"> </tiny-time-line>
+</template>
+
+<script>
+import { TimeLineNew } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTimeLine: TimeLineNew
+  },
+  data() {
+    return {
+      data: [
+        { name: '节点标题', time: '2022-11-11 00:01:30', autoColor: 'success' },
+        { name: '节点标题', time: '2022-11-12 14:20:15', autoColor: 'success' },
+        { name: '节点标题', time: '2022-11-14 20:45:50', autoColor: 'error' },
+        { name: '节点标题', time: '2022-11-11 00:01:30' },
+        { name: '节点标题', time: '2022-11-14 20:45:50', autoColor: 'info' }
+      ]
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/time-line-new/node-max.vue

@@ -0,0 +1,26 @@
+<template>
+  <tiny-time-line :data="data" vertical :node-max="5"></tiny-time-line>
+</template>
+
+<script>
+import { TimeLineNew } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTimeLine: TimeLineNew
+  },
+  data() {
+    return {
+      active: 1,
+      data: [
+        { name: '节点标题', time: '2019-11-11 00:01:30' },
+        { name: '节点标题', time: '2019-11-12 14:20:15' },
+        { name: '节点标题', time: '2019-11-14 20:45:50' },
+        { name: '节点标题', time: '2019-11-11 00:01:30' },
+        { name: '节点标题', time: '2019-11-12 14:20:15' },
+        { name: '节点标题', time: '2019-11-14 20:45:50' }
+      ]
+    }
+  }
+}
+</script>