npm - @opentiny/vue-docs - Versions diffs - 2.2.7 → 2.2.9 - Mend

@opentiny/vue-docs 2.2.7 → 2.2.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (494) hide show

package/demos/pc/app/carousel/basic-usage.vue CHANGED Viewed

@@ -19,10 +19,10 @@ export default {
 <style scoped>
 .carousel-item-demo:nth-child(2n) {
-  background-color: #99a9bf;
+  background-color: #fafafa;
 }
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #d3dce6;
+  background-color: #edf0f3;
 }
 </style>

package/demos/pc/app/carousel/card-mode-composition-api.vue CHANGED Viewed

@@ -12,10 +12,10 @@ import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@ope
 <style scoped>
 .carousel-item-demo:nth-child(2n) {
-  background-color: #99a9bf;
+  background-color: #fafafa;
 }
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #d3dce6;
+  background-color: #edf0f3;
 }
 </style>

package/demos/pc/app/carousel/card-mode.vue CHANGED Viewed

@@ -19,10 +19,10 @@ export default {
 <style scoped>
 .carousel-item-demo:nth-child(2n) {
-  background-color: #99a9bf;
+  background-color: #fafafa;
 }
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #d3dce6;
+  background-color: #edf0f3;
 }
 </style>

package/demos/pc/app/carousel/carousel-arrow-always-composition-api.vue CHANGED Viewed

@@ -12,10 +12,10 @@ import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@ope
 <style scoped>
 .carousel-item-demo:nth-child(2n) {
-  background-color: #99a9bf;
+  background-color: #fafafa;
 }
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #d3dce6;
+  background-color: #edf0f3;
 }
 </style>

package/demos/pc/app/carousel/carousel-arrow-always.vue CHANGED Viewed

@@ -19,10 +19,10 @@ export default {
 <style scoped>
 .carousel-item-demo:nth-child(2n) {
-  background-color: #99a9bf;
+  background-color: #fafafa;
 }
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #d3dce6;
+  background-color: #edf0f3;
 }
 </style>

package/demos/pc/app/carousel/carousel-arrow-hover-composition-api.vue CHANGED Viewed

@@ -12,10 +12,10 @@ import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@ope
 <style scoped>
 .carousel-item-demo:nth-child(2n) {
-  background-color: #99a9bf;
+  background-color: #fafafa;
 }
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #d3dce6;
+  background-color: #edf0f3;
 }
 </style>

package/demos/pc/app/carousel/carousel-arrow-hover.vue CHANGED Viewed

@@ -19,10 +19,10 @@ export default {
 <style scoped>
 .carousel-item-demo:nth-child(2n) {
-  background-color: #99a9bf;
+  background-color: #fafafa;
 }
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #d3dce6;
+  background-color: #edf0f3;
 }
 </style>

package/demos/pc/app/carousel/carousel-arrow-never-composition-api.vue CHANGED Viewed

@@ -12,10 +12,10 @@ import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@ope
 <style scoped>
 .carousel-item-demo:nth-child(2n) {
-  background-color: #99a9bf;
+  background-color: #fafafa;
 }
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #d3dce6;
+  background-color: #edf0f3;
 }
 </style>

package/demos/pc/app/carousel/carousel-arrow-never.vue CHANGED Viewed

@@ -19,10 +19,10 @@ export default {
 <style scoped>
 .carousel-item-demo:nth-child(2n) {
-  background-color: #99a9bf;
+  background-color: #fafafa;
 }
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #d3dce6;
+  background-color: #edf0f3;
 }
 </style>

package/demos/pc/app/carousel/carousel-events-composition-api.vue CHANGED Viewed

@@ -25,11 +25,11 @@ function handleChange(value, oldValue) {
 <style scoped>
 .carousel-item-demo:nth-child(2n) {
-  background-color: #99a9bf;
+  background-color: #fafafa;
 }
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #d3dce6;
+  background-color: #edf0f3;
 }
 .carousel-tip {
   margin: 16px 0 0;

package/demos/pc/app/carousel/carousel-events.vue CHANGED Viewed

@@ -35,11 +35,11 @@ export default {
 <style scoped>
 .carousel-item-demo:nth-child(2n) {
-  background-color: #99a9bf;
+  background-color: #fafafa;
 }
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #d3dce6;
+  background-color: #edf0f3;
 }
 .carousel-tip {
   margin: 16px 0 0;

package/demos/pc/app/carousel/close-loop-composition-api.vue CHANGED Viewed

@@ -12,10 +12,10 @@ import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@ope
 <style scoped>
 .carousel-item-demo:nth-child(2n) {
-  background-color: #99a9bf;
+  background-color: #fafafa;
 }
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #d3dce6;
+  background-color: #edf0f3;
 }
 </style>

package/demos/pc/app/carousel/close-loop.vue CHANGED Viewed

@@ -19,10 +19,10 @@ export default {
 <style scoped>
 .carousel-item-demo:nth-child(2n) {
-  background-color: #99a9bf;
+  background-color: #fafafa;
 }
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #d3dce6;
+  background-color: #edf0f3;
 }
 </style>

package/demos/pc/app/carousel/custom-height-composition-api.vue CHANGED Viewed

@@ -24,10 +24,10 @@ import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@ope
 }
 .carousel-item-demo:nth-child(2n) {
-  background-color: #99a9bf;
+  background-color: #fafafa;
 }
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #d3dce6;
+  background-color: #edf0f3;
 }
 </style>

package/demos/pc/app/carousel/custom-height.vue CHANGED Viewed

@@ -31,10 +31,10 @@ export default {
 }
 .carousel-item-demo:nth-child(2n) {
-  background-color: #99a9bf;
+  background-color: #fafafa;
 }
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #d3dce6;
+  background-color: #edf0f3;
 }
 </style>

package/demos/pc/app/carousel/indicator-trigger-composition-api.vue CHANGED Viewed

@@ -12,10 +12,10 @@ import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@ope
 <style scoped>
 .carousel-item-demo:nth-child(2n) {
-  background-color: #99a9bf;
+  background-color: #fafafa;
 }
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #d3dce6;
+  background-color: #edf0f3;
 }
 </style>

package/demos/pc/app/carousel/indicator-trigger.vue CHANGED Viewed

@@ -19,10 +19,10 @@ export default {
 <style scoped>
 .carousel-item-demo:nth-child(2n) {
-  background-color: #99a9bf;
+  background-color: #fafafa;
 }
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #d3dce6;
+  background-color: #edf0f3;
 }
 </style>

package/demos/pc/app/carousel/initial-index-composition-api.vue CHANGED Viewed

@@ -12,10 +12,10 @@ import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@ope
 <style scoped>
 .carousel-item-demo:nth-child(2n) {
-  background-color: #99a9bf;
+  background-color: #fafafa;
 }
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #d3dce6;
+  background-color: #edf0f3;
 }
 </style>

package/demos/pc/app/carousel/initial-index.vue CHANGED Viewed

@@ -19,10 +19,10 @@ export default {
 <style scoped>
 .carousel-item-demo:nth-child(2n) {
-  background-color: #99a9bf;
+  background-color: #fafafa;
 }
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #d3dce6;
+  background-color: #edf0f3;
 }
 </style>

package/demos/pc/app/carousel/manual-play-composition-api.vue CHANGED Viewed

@@ -5,12 +5,17 @@
         <h3>{{ item }}</h3>
       </tiny-carousel-item>
     </tiny-carousel>
-    <label for="num">切换到</label>
-    <tiny-numeric id="num" v-model="index" @change="indexChange" :min="1" :max="8"></tiny-numeric>
-    <tiny-button-group>
-      <tiny-button type="primary" @click="prev" :disabled="index === 1"> 上一张 </tiny-button>
-      <tiny-button type="primary" @click="next" :disabled="index === 8"> 下一张 </tiny-button>
-    </tiny-button-group>
+    <div class="manual-layoutset">
+      <div>
+        <tiny-numeric id="num" v-model="index" @change="indexChange" :min="1" :max="8"></tiny-numeric>
+      </div>
+      <div>
+        <tiny-button-group>
+          <tiny-button type="primary" @click="prev" :disabled="index === 1"> 上一张 </tiny-button>
+          <tiny-button type="primary" @click="next" :disabled="index === 8"> 下一张 </tiny-button>
+        </tiny-button-group>
+      </div>
+    </div>
   </div>
 </template>
@@ -46,10 +51,16 @@ function prev() {
 <style scoped>
 .carousel-item-demo:nth-child(2n) {
-  background-color: #99a9bf;
+  background-color: #fafafa;
 }
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #d3dce6;
+  background-color: #edf0f3;
+}
+.manual-layoutset {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 10px;
 }
 </style>

package/demos/pc/app/carousel/manual-play.vue CHANGED Viewed

@@ -5,12 +5,17 @@
         <h3>{{ item }}</h3>
       </tiny-carousel-item>
     </tiny-carousel>
-    <label for="num">切换到</label>
-    <tiny-numeric id="num" v-model="index" @change="indexChange" :min="1" :max="8"></tiny-numeric>
-    <tiny-button-group>
-      <tiny-button type="primary" @click="prev" :disabled="index === 1"> 上一张 </tiny-button>
-      <tiny-button type="primary" @click="next" :disabled="index === 8"> 下一张 </tiny-button>
-    </tiny-button-group>
+    <div class="manual-layoutset">
+      <div>
+        <tiny-numeric id="num" v-model="index" @change="indexChange" :min="1" :max="8"></tiny-numeric>
+      </div>
+      <div>
+        <tiny-button-group>
+          <tiny-button type="primary" @click="prev" :disabled="index === 1"> 上一张 </tiny-button>
+          <tiny-button type="primary" @click="next" :disabled="index === 8"> 下一张 </tiny-button>
+        </tiny-button-group>
+      </div>
+    </div>
   </div>
 </template>
@@ -50,10 +55,15 @@ export default {
 <style scoped>
 .carousel-item-demo:nth-child(2n) {
-  background-color: #99a9bf;
+  background-color: #fafafa;
 }
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #d3dce6;
+  background-color: #edf0f3;
+}
+.manual-layoutset {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 10px;
 }
 </style>

package/demos/pc/app/carousel/play-interval-composition-api.vue CHANGED Viewed

@@ -12,10 +12,10 @@ import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@ope
 <style scoped>
 .carousel-item-demo:nth-child(2n) {
-  background-color: #99a9bf;
+  background-color: #fafafa;
 }
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #d3dce6;
+  background-color: #edf0f3;
 }
 </style>

package/demos/pc/app/carousel/play-interval.vue CHANGED Viewed

@@ -19,10 +19,10 @@ export default {
 <style scoped>
 .carousel-item-demo:nth-child(2n) {
-  background-color: #99a9bf;
+  background-color: #fafafa;
 }
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #d3dce6;
+  background-color: #edf0f3;
 }
 </style>

package/demos/pc/app/carousel/show-title-composition-api.vue CHANGED Viewed

@@ -12,10 +12,10 @@ import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@ope
 <style scoped>
 .carousel-item-demo:nth-child(2n) {
-  background-color: #99a9bf;
+  background-color: #fafafa;
 }
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #d3dce6;
+  background-color: #edf0f3;
 }
 </style>

package/demos/pc/app/carousel/show-title.vue CHANGED Viewed

@@ -19,10 +19,10 @@ export default {
 <style scoped>
 .carousel-item-demo:nth-child(2n) {
-  background-color: #99a9bf;
+  background-color: #fafafa;
 }
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #d3dce6;
+  background-color: #edf0f3;
 }
 </style>

package/demos/pc/app/carousel/up-down-carousel-composition-api.vue CHANGED Viewed

@@ -12,10 +12,10 @@ import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@ope
 <style scoped>
 .carousel-item-demo:nth-child(2n) {
-  background-color: #99a9bf;
+  background-color: #fafafa;
 }
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #d3dce6;
+  background-color: #edf0f3;
 }
 </style>

package/demos/pc/app/carousel/up-down-carousel.vue CHANGED Viewed

@@ -19,10 +19,10 @@ export default {
 <style scoped>
 .carousel-item-demo:nth-child(2n) {
-  background-color: #99a9bf;
+  background-color: #fafafa;
 }
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #d3dce6;
+  background-color: #edf0f3;
 }
 </style>

package/demos/pc/app/chart/histogram/demo4-composition-api.vue CHANGED Viewed

@@ -5,9 +5,7 @@
 </template>
 <script setup lang="jsx">
-// 因为柱状图内使用了折线图，使用前需先引入对应模块
 import { ref } from 'vue'
-import 'echarts/lib/chart/line'
 import { ChartHistogram as TinyChartHistogram } from '@opentiny/vue'
 const chartData = ref({

package/demos/pc/app/chart/histogram/demo4.vue CHANGED Viewed

@@ -5,8 +5,6 @@
 </template>
 <script lang="jsx">
-// 因为柱状图内使用了折线图，使用前需先引入对应模块
-import 'echarts/lib/chart/line'
 import { ChartHistogram } from '@opentiny/vue'
 export default {

package/demos/pc/app/checkbox/checkbox-events-composition-api.vue CHANGED Viewed

@@ -9,12 +9,11 @@
 <script setup>
 import { ref } from 'vue'
-import { CheckboxButton as TinyCheckboxButton, CheckboxGroup as TinyCheckboxGroup } from '@opentiny/vue'
+import { CheckboxButton as TinyCheckboxButton, CheckboxGroup as TinyCheckboxGroup, Modal } from '@opentiny/vue'
 const checked = ref(['复选框1'])
-const logger = ref('')
 function valueChange(val) {
-  Modal.message(`change 事件触发了，选中值为：${val}`)
+  Modal.message({ message: `change 事件触发了，选中值为：${val}`, status: 'info' })
 }
 </script>

package/demos/pc/app/checkbox/checkbox-events.vue CHANGED Viewed

@@ -15,13 +15,12 @@ export default {
   },
   data() {
     return {
-      checked: ['复选框1'],
-      logger: ''
+      checked: ['复选框1']
     }
   },
   methods: {
     valueChange(val) {
-      Modal.message(`change 事件触发了，选中值为：${val}`)
+      Modal.message({ message: `change 事件触发了，选中值为：${val}`, status: 'info' })
     }
   }
 }

package/demos/pc/app/checkbox/group-options-composition-api.vue CHANGED Viewed

@@ -7,7 +7,7 @@ import { ref } from 'vue'
 import { CheckboxGroup as TinyCheckboxGroup, Modal } from '@opentiny/vue'
 function handleClick() {
-  Modal.message({ message: 'click' })
+  Modal.message({ message: 'click', status: 'info' })
 }
 const checkList = ref(['A'])
 const options = ref([

package/demos/pc/app/checkbox/group-options.vue CHANGED Viewed

@@ -20,7 +20,7 @@ export default {
   },
   methods: {
     handleClick() {
-      Modal.message({ message: 'click' })
+      Modal.message({ message: 'click', status: 'info' })
     }
   }
 }

package/demos/pc/app/checkbox/size-composition-api.vue CHANGED Viewed

@@ -9,7 +9,6 @@
 <script setup>
 import { ref } from 'vue'
 import { CheckboxButton as TinyCheckboxButton, CheckboxGroup as TinyCheckboxGroup } from '@opentiny/vue'
-import { number } from 'echarts'
 const cities = ref(['上海', '北京', '广州', '深圳'])
 const sizeList = ref(['medium', '', 'small', 'mini'])

package/demos/pc/app/checkbox/text-composition-api.vue CHANGED Viewed

@@ -13,8 +13,9 @@ const checked = ref('假文本')
 function getValue() {
   Modal.message({
-    message: '当前状态对应的值为:' + this.checked,
-    top: 200
+    message: '当前状态对应的值为:' + checked.value,
+    top: 200,
+    status: 'info'
   })
 }
 </script>

package/demos/pc/app/checkbox/text.vue CHANGED Viewed

@@ -22,7 +22,8 @@ export default {
     getValue() {
       Modal.message({
         message: '当前状态对应的值为:' + this.checked,
-        top: 200
+        top: 200,
+        status: 'info'
       })
     }
   }

package/demos/pc/app/checkbox/webdoc/checkbox.js CHANGED Viewed

@@ -37,7 +37,7 @@ export default {
       'name': { 'zh-CN': '配置式复选框组', 'en-US': 'Profile Checkbox Group' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>options</code> 配置显示多选框组。使用该属性后，可以不用再在标签中以插槽的形式插入 <code>checkbox</code> 或 <code>checkbox-button</code> 元素。 <code>options</code> 的类型为 <a href="#ICheckboxGroupOptions">ICheckboxGroupOptions[]</a> 。 <code>type</code> 属性配合 <code>options</code> 属性一起使用，将 <code>type</code> 配置为 <code>button</code> ，复选框组将以按钮的形式展示。</p>',
+          '<p>通过 <code>options</code> 配置显示多选框组。使用该属性后，可以不用再在标签中以插槽的形式插入 <code>checkbox</code> 或 <code>checkbox-button</code> 元素。 <code>type</code> 属性配合 <code>options</code> 属性一起使用，将 <code>type</code> 配置为 <code>button</code> ，复选框组将以按钮的形式展示。</p>',
         'en-US':
           '<p>Configure the display of multiple selection box groups through <code>options</code> . After using this attribute, you no longer need to insert <code>checkbox</code> or <code>checkbox button</code> elements in the label as slots. The type of <code>options</code> is <a="# ICheckboxGroupOptions">ICheckboxGroupOptions[]</a> .The <code>type</code> attribute is used in conjunction with the <code>options</code> attribute to configure the <code>type</code> as <code>button</code> , and the checkbox group will be displayed in the form of a button.</p>'
       },
@@ -343,7 +343,7 @@ export default {
             'zh-CN': '按钮形式的 checkbox 激活时的填充色和边框色',
             'en-US': 'Fill color and border color when the checkbox in button mode is activated'
           },
-          'demoId': 'checkbox-button'
+          'demoId': 'custom-color'
         },
         {
           'name': 'max',
@@ -517,7 +517,7 @@ export default {
             'zh-CN': '绑定值',
             'en-US': 'Bound Value'
           },
-          'demoId': 'checkbox'
+          'demoId': 'checkbox-button'
         },
         {
           'name': 'name',

package/demos/pc/app/collapse/title-composition-api.vue CHANGED Viewed

@@ -7,7 +7,7 @@
     <tiny-collapse-item name="2">
       <template #title>
         <div class="title">
-          <div>效率 Efficiency</div>
+          <div>反馈 Feedback</div>
           <tiny-icon-star-o class="tiny-icon-star-o"></tiny-icon-star-o>
         </div>
       </template>
@@ -57,7 +57,8 @@ const TinyIconSetting = iconSetting()
   margin-left: 12px;
 }
-.tiny-icon-star-o, .tiny-icon-setting {
+.tiny-icon-star-o,
+.tiny-icon-setting {
   font-size: 18px;
 }
 </style>

package/demos/pc/app/collapse/title.vue CHANGED Viewed

@@ -7,7 +7,7 @@
     <tiny-collapse-item name="2">
       <template #title>
         <div class="title">
-          <div>效率 Efficiency</div>
+          <div>反馈 Feedback</div>
           <tiny-icon-star-o class="tiny-icon-star-o"></tiny-icon-star-o>
         </div>
       </template>
@@ -65,7 +65,8 @@ export default {
   margin-left: 12px;
 }
-.tiny-icon-star-o, .tiny-icon-setting {
+.tiny-icon-star-o,
+.tiny-icon-setting {
   font-size: 18px;
 }
 </style>