@opentiny/vue-docs 1.0.2 → 1.0.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@opentiny/vue-docs",
   "type": "module",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "",
   "keywords": [],
   "author": "",

package/resources/mobile-first/app/action-sheet/webdoc/action-sheet.cn.md

@@ -0,0 +1,9 @@
+---
+title: ActionSheet 动作面板组件
+---
+
+# ActionSheet 动作面板组件
+
+<div>
+
+</div>

package/resources/mobile-first/app/action-sheet/webdoc/action-sheet.en.md

@@ -0,0 +1,9 @@
+---
+title: ActionSheet 动作面板组件
+---
+
+# ActionSheet 动作面板组件
+
+<div>
+
+</div>

package/resources/mobile-first/app/action-sheet/webdoc/action-sheet.js

@@ -0,0 +1,82 @@
+export default {
+  column: '2',
+  owner: '',
+  demos: [
+    {
+      demoId: 'basic-usage',
+      name: {
+        'zh-CN': '基本用法',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p><p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['basic-usage.vue']
+    },
+    {
+      demoId: 'action',
+      name: {
+        'zh-CN': '操作列表模式',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>设置 `type` 为 `action` 启用操作列表模式，设置 `title` 显示提示语。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['action.vue']
+    },
+    {
+      demoId: 'show',
+      name: {
+        'zh-CN': '显示隐藏',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN':
+          '<p>- show-header: 显示头部，默认值为 true；- show-search: 显示头部搜索功能，默认值为 true；- show-footer: 显示底部，默认值为 false；<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['show.vue']
+    },
+    {
+      demoId: 'mask',
+      name: {
+        'zh-CN': '遮罩层1',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>添加 `mask` 属性可以关闭遮罩层，默认值为 `true` 。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['mask.vue']
+    },
+    {
+      demoId: 'mask-event',
+      name: {
+        'zh-CN': '遮罩层2',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN':
+          '<p>默认弹窗打开后，可以单击遮罩层关闭弹窗，设置 `mask-closable` 为 `false` 后将禁用该功能，默认值为 `true` 。        <p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['mask-event.vue']
+    },
+    {
+      demoId: 'slot',
+      name: {
+        'zh-CN': '插槽',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN':
+          '<p>- header: 头部插槽，默认显示头部，设置 show-header="true" 时有效；- header-left: 头部左侧插槽，默认显示搜索功能；- header-right: 头部右侧插槽，默认显示关闭功能；- footer: 头部插槽，默认隐藏底部，设置 show-footer="true" 时有效；<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['slot.vue']
+    }
+  ],
+  apis: []
+}

package/resources/mobile-first/app/alert/webdoc/alert.js

@@ -111,6 +111,19 @@ export default {
         'en-US': '<p>bbutton click</p>'
       },
       codeFiles: ['show-icon.vue']
+    },
+    {
+      demoId: 'show-foldable',
+      name: {
+        'zh-CN': '带标题可折叠样式',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 `flex-basis` 属性可以设置内容插槽的宽度，flex-basis 类型为数组，最多能传入 4 个值，支持百分比，固定宽度及固有的尺寸关键词，默认为 auto，详情见 flex 的 flex-basis 属性。<br /> 通过设置`flex-grow`属性可以设置每一项在 flex 容器中分配剩余空间的相对比例，默认为 1。如果不想自动撑满主容器，可以设为 0，详情见 flex 的 flex-grow 属性。<br />flex-grow 举例：`:flex-grow="[0, 0]" :flex-grow="[2, 1]" :flex-grow="[2, 1,1,1]"` <br />flex-basis 举例：`:flex-basis="["200px", "100px","300px"]" :flex-basis="["75%", "25%"]" :flex-basis="["40%", "20%", "20%", "20%"]"`<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['show-foldable.vue']
     }
   ],
   apis: []

package/resources/mobile-first/app/badge/webdoc/badge.cn.md

@@ -0,0 +1,9 @@
+---
+title: Badge 标记
+---
+
+# Badge 标记
+
+<div>
+Badge 展示指定数据信息，如：我的待办数、新任务数等。
+</div>

package/resources/mobile-first/app/badge/webdoc/badge.en.md

@@ -0,0 +1,9 @@
+---
+title: Badge 标记
+---
+
+# Badge 标记
+
+<div>
+Badge 展示指定数据信息，如：我的待办数、新任务数等。
+</div>

package/resources/mobile-first/app/badge/webdoc/badge.js

@@ -0,0 +1,127 @@
+export default {
+  column: '2',
+  owner: '',
+  demos: [
+    {
+      demoId: 'base',
+      name: {
+        'zh-CN': '基本用法',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p><p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['base.vue']
+    },
+    {
+      demoId: 'type',
+      name: {
+        'zh-CN': '默认主題样式',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>`type` 设置显示主题，可选值：danger(默认)、primary、success、warning、info<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['type.vue']
+    },
+    {
+      demoId: 'type-left',
+      name: {
+        'zh-CN': '圆点向左排列样式',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>`show-left` 设置是否向左展示，仅对圆点生效<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['type-left.vue']
+    },
+    {
+      demoId: 'is-dot',
+      name: {
+        'zh-CN': '小圆点标记',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>通过`is-dot` 显示小圆点标记<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['is-dot.vue']
+    },
+    {
+      demoId: 'max',
+      name: {
+        'zh-CN': '计数最大值',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>`max` 超过最大值会显示 `{max}+` <p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['max.vue']
+    },
+    {
+      demoId: 'target',
+      name: {
+        'zh-CN': '跳转链接',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>`href`定义跳转链接<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['target.vue']
+    },
+    {
+      demoId: 'slot-default',
+      name: {
+        'zh-CN': '自定义标记目标',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>`default slot` 标记内容自定义<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['slot-default.vue']
+    },
+    {
+      demoId: 'slot-content',
+      name: {
+        'zh-CN': '自定义提示内容',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>`content slot` 自定义提示内容<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['slot-content.vue']
+    },
+    {
+      demoId: 'dynamic-hidden',
+      name: {
+        'zh-CN': '消息已读动态隐藏标记',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>`hidden` 隐藏标记<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['dynamic-hidden.vue']
+    },
+    {
+      demoId: 'props-content',
+      name: {
+        'zh-CN': '属性传值显示内容',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>通过绑定`data`属性传入自定义内容<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['props-content.vue']
+    }
+  ],
+  apis: []
+}

package/resources/mobile-first/app/button-group/webdoc/button-group.cn.md

@@ -0,0 +1,9 @@
+---
+title: Filter 过滤器
+---
+
+# Filter 过滤器
+
+<div>
+
+</div>

package/resources/mobile-first/app/button-group/webdoc/button-group.en.md

@@ -0,0 +1,9 @@
+---
+title: Filter 过滤器
+---
+
+# Filter 过滤器
+
+<div>
+
+</div>

package/resources/mobile-first/app/button-group/webdoc/button-group.js

@@ -0,0 +1,58 @@
+export default {
+  column: '2',
+  owner: '',
+  demos: [
+    {
+      demoId: 'basic-usage',
+      name: {
+        'zh-CN': '基本用法',
+        'en-US': 'basic usage'
+      },
+      desc: {
+        'zh-CN':
+          '<p>过滤类型 <code>type</code> 包括 <code>单选、多选、枚举单选 (radio | checkbox | enum-radio)<code>。</p>',
+        'en-US': '<p>button type</p>'
+      },
+      codeFiles: ['basic-usage.vue']
+    },
+    {
+      demoId: 'column-num',
+      name: {
+        'zh-CN': '面板每行标签数',
+        'en-US': 'button round'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>column-num</code> 属性设置面板每行标签数，默认值为 3。</p>',
+        'en-US': '<p>button round</p>'
+      },
+      codeFiles: ['column-num.vue']
+    },
+    {
+      demoId: 'filter-group',
+      name: {
+        'zh-CN': '过滤组',
+        'en-US': '过滤组'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>filter-group</code> 属性开启过滤组功能，<code>filter-value</code> 绑定过滤组的值。过滤组类型 <code>type</code> 包括 <code>单选、多选 (radio | checkbox)</code>。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['filter-group.vue']
+    },
+    {
+      demoId: 'enumeration',
+      name: {
+        'zh-CN': '枚举单选',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN':
+          '<p>设置过滤类型 <code>type: "enum-radio"</code> 时，当前数据为枚举单选，通过 <code>showAll: true</code> 显示 <code>全部</code> 选择项。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['enumeration.vue']
+    }
+  ],
+  apis: []
+}

package/resources/mobile-first/app/calendar-bar/webdoc/calendar-bar.js

@@ -89,7 +89,7 @@ export default {
           '<p>用户传入的日期为<code>  当前日期</code>，当前日期所在月份为<code>  当前月份</code>，当前月份周六周日为 周末，非周六周日为 工作日。 使用<code>  config.workday </code>配置一个方法，用于判断 工作日 是否作为真正的工作日； 使用<code>  config.holiday</code> 配置一个方法，用于判断 周末 是否作为真正的周末； 使用<code>  config.workdayColorClass 和 config.holidayColorClass</code> 配置工作日和周末的字体颜色类。<p>',
         'en-US': '<p>bbutton click</p>'
       },
-      codeFiles: ['marked.vue']
+      codeFiles: ['workday.vue']
     }
   ],
   apis: []

package/resources/mobile-first/app/card/webdoc/card.cn.md

@@ -0,0 +1,11 @@
+---
+title: Card 卡片
+---
+
+# Card 卡片
+
+<div>
+
+基础容器，可承载文字、列表、图片、段落等
+
+</div>

package/resources/mobile-first/app/card/webdoc/card.en.md

@@ -0,0 +1,11 @@
+---
+title: Card 卡片
+---
+
+# Card 卡片
+
+<div>
+
+基础容器，可承载文字、列表、图片、段落等
+
+</div>

package/resources/mobile-first/app/card/webdoc/card.js

@@ -0,0 +1,153 @@
+export default {
+  column: '2',
+  owner: '',
+  demos: [
+    {
+      demoId: 'basic-usage',
+      name: {
+        'zh-CN': '基本用法',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p><p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['basic-usage.vue']
+    },
+    {
+      demoId: 'card-type',
+      name: {
+        'zh-CN': '卡片类型',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>支持 `text image video logo` 4 种类型<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['card-type.vue']
+    },
+    {
+      demoId: 'card-size',
+      name: {
+        'zh-CN': '尺寸',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>支持`mini small medium large`4 个尺寸的卡片<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['card-size.vue']
+    },
+    {
+      demoId: 'card-disabled',
+      name: {
+        'zh-CN': '禁用',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>通过设置属性`disabled`禁用卡片<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['card-disabled.vue']
+    },
+    {
+      demoId: 'card-group',
+      name: {
+        'zh-CN': '卡片组',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>`card-group` 与 `card` 结合一起使用，提供响应式布局的能力<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['card-group.vue']
+    },
+    {
+      demoId: 'card-status',
+      name: {
+        'zh-CN': '卡片状态',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>支持 `success warning alerting danger` 4 种状态<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['card-status.vue']
+    },
+    {
+      demoId: 'check-type-radio',
+      name: {
+        'zh-CN': '单选',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过属性`check-type="radio"`设置卡片单选，需同时设置 label。 注意：目前仅支持在 text 类型开启单选<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['check-type-radio.vue']
+    },
+    {
+      demoId: 'check-type-checkbox',
+      name: {
+        'zh-CN': '多选',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过属性`check-type="checkbox"`设置卡片多选，需同时设置 label。注意：目前仅支持在 text 类型开启多选<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['check-type-checkbox.vue']
+    },
+    {
+      demoId: 'custom-class',
+      name: {
+        'zh-CN': '自定义 class',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>属性`card-class`可自定义卡片的 class，属性`height`可设置卡片内容区的高度。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['custom-class.vue']
+    },
+    {
+      demoId: 'operate-bar',
+      name: {
+        'zh-CN': '操作栏选项配置',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>通过`options`属性配置操作栏，支持按钮的禁用（`disabled: true`）与隐藏（`hidden: true`）<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['operate-bar.vue']
+    },
+    {
+      demoId: 'card-events',
+      name: {
+        'zh-CN': '事件',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>`change` 事件：卡片勾选和取消勾选时触发;`icon-click` 事件：操作栏按钮点击时触发<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['card-events.vue']
+    },
+    {
+      demoId: 'slot',
+      name: {
+        'zh-CN': '插槽',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>组件提供`default、title-left、title-right、footer`4 个插槽<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['slot.vue']
+    }
+  ],
+  apis: []
+}

package/resources/mobile-first/app/carousel/card-mode.vue

@@ -0,0 +1,28 @@
+<template>
+  <tiny-carousel height="150px" type="card">
+    <tiny-carousel-item class="carousel-item-demo" v-for="item in 4" :key="item">
+      <h3>{{ item }}</h3>
+    </tiny-carousel-item>
+  </tiny-carousel>
+</template>
+
+<script lang="jsx">
+import { Carousel, CarouselItem } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCarousel: Carousel,
+    TinyCarouselItem: CarouselItem
+  }
+}
+</script>
+
+<style scoped>
+.carousel-item-demo:nth-child(2n) {
+  background-color: #99a9bf;
+}
+
+.carousel-item-demo:nth-child(2n + 1) {
+  background-color: #d3dce6;
+}
+</style>

package/resources/mobile-first/app/carousel/carousel-events.vue

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <tiny-carousel height="150px" @change="handleChange">
+      <tiny-carousel-item :class="bgColor[item - 1]" v-for="item in 4" :key="item">
+        <h3>{{ item }}</h3>
+      </tiny-carousel-item>
+    </tiny-carousel>
+
+    <div class="carousel-tip">当前幻灯片索引：{{ curValue }}，上一张幻灯片索引：{{ preValue }}</div>
+  </div>
+</template>
+
+<script>
+import { Carousel, CarouselItem } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCarousel: Carousel,
+    TinyCarouselItem: CarouselItem
+  },
+  data() {
+    return {
+      curValue: 0,
+      preValue: 0,
+      bgColor: [
+        'bg-color-info-primary-subtle',
+        'bg-color-success-subtle',
+        'bg-color-icon-primary',
+        'bg-color-warning-subtle'
+      ]
+    }
+  },
+  methods: {
+    handleChange(value, oldValue) {
+      this.curValue = value
+      this.preValue = oldValue
+    }
+  }
+}
+</script>
+
+<style scoped>
+.carousel-tip {
+  margin: 16px 0 0;
+  text-align: center;
+}
+</style>

package/resources/mobile-first/app/carousel/webdoc/carousel.cn.md

@@ -0,0 +1,11 @@
+---
+title: Carousel 走马灯
+---
+
+# Carousel 走马灯
+
+<div>
+
+常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。
+
+</div>

package/resources/mobile-first/app/carousel/webdoc/carousel.en.md

@@ -0,0 +1,11 @@
+---
+title: Carousel 走马灯
+---
+
+# Carousel 走马灯
+
+<div>
+
+常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。
+
+</div>