@opentiny/vue-docs 1.0.2 → 1.0.3

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

@@ -0,0 +1,167 @@
+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: 'indicator-trigger',
+      name: {
+        'zh-CN': '指示器和触发方式',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN':
+          '<p>走马灯指示器默认显示在幻灯片内容上，配置 `indicator-position` 为 outside 后，将显示在外部。<br />配置 `trigger` 为 click ，可以修改指示器触发方式为单击，默认鼠标悬停到指示器时，走马灯幻灯片就会对应切换。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['indicator-trigger.vue']
+    },
+    {
+      demoId: 'manual-play',
+      name: {
+        'zh-CN': '手动轮播',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN':
+          '<p>调用 `setActiveItem()`、`next()`、`prev()` 方法可根据需要进行轮播。`initial-index` 属性可以指定初始激活的幻灯片索引。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['manual-play.vue']
+    },
+    {
+      demoId: 'close-loop',
+      name: {
+        'zh-CN': '关闭循环轮播',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN':
+          '<p>配置 `loop` 属性为 false 后，若走马灯幻灯片已切换到最后一项，则将不能再从第一项开始循环切换。即切换到最后一项时，右侧切换箭头不再显示，切换到第一项时，左侧切换箭头不再显示。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['close-loop.vue']
+    },
+    {
+      demoId: 'autoplay',
+      name: {
+        'zh-CN': '自动切换',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>配置 `autoplay` 属性为 true 后，走马灯的幻灯片内容将自动轮播切换。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['autoplay.vue']
+    },
+    {
+      demoId: 'play-interval',
+      name: {
+        'zh-CN': '轮播间隔时间',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>走马灯幻灯片轮播间隔时间默认为 3000 毫秒，通过 `interval` 属性可以自定义。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['play-interval.vue']
+    },
+    {
+      demoId: 'up-down-carousel',
+      name: {
+        'zh-CN': '纵向轮播',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>配置 `type` 属性为 vertical 即可实现纵向轮播。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['up-down-carousel.vue']
+    },
+    {
+      demoId: 'show-title',
+      name: {
+        'zh-CN': '显示标题',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>通过 `title` 配置显示标题，需要与 `show-title` 结合使用。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['show-title.vue']
+    },
+    {
+      demoId: 'carousel-arrow-always',
+      name: {
+        'zh-CN': '总是显示切换箭头',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p><p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['carousel-arrow-always.vue']
+    },
+    {
+      demoId: 'carousel-arrow-hover',
+      name: {
+        'zh-CN': 'hover 时显示切换箭头',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p><p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['carousel-arrow-hover.vue']
+    },
+    {
+      demoId: 'carousel-arrow-never',
+      name: {
+        'zh-CN': '隐藏切换箭头',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p><p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['carousel-arrow-never.vue']
+    },
+    {
+      demoId: 'aspect-ratio',
+      name: {
+        'zh-CN': '宽高比',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN':
+          '<p>`aspect-ratio` 属性可以设置轮播图的宽高比，如果设置了 height，会以 height 为主，默认值为 16:2，可以设置任意的整数宽高比例。 设置了`aspect-ratio`之后页面缩放时会按照设定的比例自动调整轮播器的高度。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['aspect-ratio.vue']
+    },
+    {
+      demoId: 'indicator-style',
+      name: {
+        'zh-CN': '指示器样式',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>`indicator-style` 属性可以设置轮播图指示器样式，支持 light 与 dark 两种类型，默认为 light。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['indicator-style.vue']
+    }
+  ],
+  apis: []
+}

package/resources/mobile-first/app/cascader-select/webdoc/cascader-select.cn.md

@@ -0,0 +1,9 @@
+---
+title: CascaderSelect 级联选择
+---
+
+# CascaderSelect 级联选择
+
+<div>
+
+</div>

package/resources/mobile-first/app/cascader-select/webdoc/cascader-select.en.md

@@ -0,0 +1,9 @@
+---
+title: CascaderSelect 级联选择
+---
+
+# CascaderSelect 级联选择
+
+<div>
+
+</div>

package/resources/mobile-first/app/cascader-select/webdoc/cascader-select.js

@@ -0,0 +1,94 @@
+export default {
+  column: '2',
+  owner: '',
+  demos: [
+    {
+      demoId: 'basic-usage',
+      name: {
+        'zh-CN': '基本用法',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>使用 `v-model` 绑定组件 `当前值`，使用 `options` 绑定组件 `选项列表`，这两个数组长度必须相同。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['basic-usage.vue']
+    },
+    {
+      demoId: 'cycle-roll',
+      name: {
+        'zh-CN': '循环滚动',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>设置属性 `cycle-roll` 为 `true` 打开选项循环滚动功能。默认值为 `false`。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['cycle-roll.vue']
+    },
+    {
+      demoId: 'disabled-array',
+      name: {
+        'zh-CN': '数组选项禁用',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN':
+          '<p>如果组件 `选项列表` 是数组值，可以使用属性 `disabled` 配置一个方法判断选项是否禁用。 此方法的第一个参数是可见选项的当前值，其它参数是组件当前聚焦值，返回 `true` 则禁用选项。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['disabled-array.vue']
+    },
+    {
+      demoId: 'disabled',
+      name: {
+        'zh-CN': '对象选项禁用',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN':
+          '<p>如果组件 `选项列表` 是对象值，使用 `optionMethod` 生成选项时即可指定是否禁用。<br>`optionMethod` 方法的第一个参数是可见选项的当前值，其它参数是组件当前聚焦值，设置返回值的 `disabled` 为 `true` 则禁用选项。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['disabled.vue']
+    },
+    {
+      demoId: 'object-option',
+      name: {
+        'zh-CN': '对象选项',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN':
+          '<p>组件的 `选项列表` 可以是对象值。此方式更方便生成动态选项值，但是选项值必须为数字值。<br>此对象需配置选项范围 `range`，和生成方法 `optionMethod`。选项范围也可以指定为生成方法 `rangeMethod`。<br>`rangeMethod` 的参数是组件当前聚焦值。<br>`optionMethod` 的第一个参数是可见选项的当前值，其它参数是组件当前聚焦值。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['object-option.vue']
+    },
+    {
+      demoId: 'text-color-class',
+      name: {
+        'zh-CN': '文字颜色',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p><p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['text-color-class.vue']
+    },
+    {
+      demoId: 'cities',
+      name: {
+        'zh-CN': '城市级联',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p><p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['cities.vue']
+    }
+  ],
+  apis: []
+}

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

@@ -0,0 +1,9 @@
+---
+title: Checkbox 复选框
+---
+
+# Checkbox 复选框
+
+<div>
+用于配置不同场景的选项，提供用户可在一组选项中进行多选。
+</div>

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

@@ -0,0 +1,9 @@
+---
+title: Checkbox 复选框
+---
+
+# Checkbox 复选框
+
+<div>
+用于配置不同场景的选项，提供用户可在一组选项中进行多选。
+</div>

package/resources/mobile-first/app/checkbox/webdoc/checkbox.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></p>',
+        'en-US': '<p>button type</p>'
+      },
+      codeFiles: ['basic-usage.vue']
+    },
+
+    {
+      demoId: 'checkbox-group',
+      name: {
+        'zh-CN': '复选框组',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 `checkbox-group` 元素把多个 `checkbox` 元素管理为一组，在 `checkbox-group` 中使用 `v-model` 绑定 Array 类型的变量即可实现双向绑定。 `checkbox` 的 `label` 属性是其对应的值，若该标签中无内容，则该属性也充当 checkbox 后的介绍。`label` 与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['checkbox-group.vue']
+    },
+    {
+      demoId: 'group-options',
+      name: {
+        'zh-CN': '配置式复选框组',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN':
+          '<p>提供 `options` 属性，支持通过配置对象数组数据的形式来渲染多选框组。使用该属性后，可以不用再在标签中以插槽的形式插入 `checkbox` 或 `checkbox-button` 元素。<br />`options` 对象数组中包括三个字段：`label`、`text`、`events`。<br />另外还提供 `type` 属性，配合 `options` 属性一起使用，默认值为 `checkbox`。还可以配置为 `button`，配置后复选框组将以按钮的形式展示。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['group-options.vue']
+    },
+    {
+      demoId: 'indeterminate',
+      name: {
+        'zh-CN': '全选与半选',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>在 `checkbox` 元素中配置 `indeterminate` 属性为 true 后，勾选框将展示为半选的样式。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['indeterminate.vue']
+    },
+    {
+      demoId: 'min-max',
+      name: {
+        'zh-CN': '可选数量限制',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>在 `checkbox-group` 上可通过 `min`、`max` 属性指定可勾选项目的最小、最大值。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['min-max.vue']
+    },
+    {
+      demoId: 'checked',
+      name: {
+        'zh-CN': '当前是否勾选',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>在 `checked` 当前是否勾选，通过 `disabled` 设置组件是否禁用。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['checked.vue']
+    },
+    {
+      demoId: 'vertical-checkbox',
+      name: {
+        'zh-CN': '垂直布局',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN':
+          '<p>在 `checkbox-group` 元素上设置 `vertical` 为 true，则其管理的 `checkbox-button` 或 `checkbox` 将展示为垂直布局。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['vertical-checkbox.vue']
+    },
+    {
+      demoId: 'content-overflow',
+      name: {
+        'zh-CN': '内容超出时的提示信息',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN':
+          '<p>若复选框后的介绍文字超出时，可以通过 Tooltip 组件增加提示信息，鼠标悬停时可提示所有内容。<br />在 `checkbox` 元素上配置 `border` 属性为 true，可显示边框。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['content-overflow.vue']
+    },
+    {
+      demoId: 'checkbox-slot',
+      name: {
+        'zh-CN': '插槽',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>Checkbox 的内容<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['checkbox-slot.vue']
+    }
+  ],
+  apis: []
+}

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

@@ -0,0 +1,9 @@
+---
+title: Collapse 折叠面板
+---
+
+# Collapse 折叠面板
+
+<div>
+内容区可指定动态页面或自定义 html 等，支持展开收起操作。
+</div>

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

@@ -0,0 +1,9 @@
+---
+title: Collapse 折叠面板
+---
+
+# Collapse 折叠面板
+
+<div>
+内容区可指定动态页面或自定义 html 等，支持展开收起操作。
+</div>

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

@@ -0,0 +1,154 @@
+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: 'accordion',
+      name: {
+        'zh-CN': '手风琴效果',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN':
+          '<p>配置 `accordion` 属性为 true 后，折叠面板将展示手风琴效果。配置 `v-model` 设置当前激活的面板(如果是手风琴模式，绑定值类型需要为 string ，否则为 array )；`change` 事件，在当前激活面板改变时触发，参数为当前的 value 值；配置 `name` 属性作为每个 collapse-item 的唯一标志符<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['accordion.vue']
+    },
+    {
+      demoId: 'dynamic-disable',
+      name: {
+        'zh-CN': '禁用状态',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>在 `collapse-item` 元素上配置 `disabled` 属性为 true 后，将禁用指定的折叠面板项。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['dynamic-disable.vue']
+    },
+    {
+      demoId: 'custom-collapse-title',
+      name: {
+        'zh-CN': '自定义面板标题',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN':
+          '<p>在 `collapse-item` 元素上配置 `title` 属性可以指定每个折叠面板项的标题。但同时也可以通过 `title` 插槽的方式自定义面板标题，比如在标题前增加图标。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['custom-collapse-title.vue']
+    },
+    {
+      demoId: 'custom-collapse-title-right',
+      name: {
+        'zh-CN': '自定义面板标题右侧内容',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN':
+          '<p>在 `collapse-item` 元素上配置 `title-right` 属性可以指定每个折叠面板项标题的右侧内容。但同时也可以通过 `title-right` 插槽的方式自定义面板标题右侧内容，比如在标题右侧增加图标。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['custom-collapse-title-right.vue']
+    },
+    {
+      demoId: 'collapse-events',
+      name: {
+        'zh-CN': '折叠面板事件',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>激活面板的值改变时将触发 `change` 事件。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['collapse-events.vue']
+    },
+    {
+      demoId: 'block-close',
+      name: {
+        'zh-CN': '阻止折叠面板关闭事件',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>:before-close 折叠面板关闭前事件,方法里面 return true/false，表示是否可以关闭<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['block-close.vue']
+    },
+    {
+      demoId: 'nested-grid',
+      name: {
+        'zh-CN': '嵌套表格',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>通过 `collapse-item` 元素的默认插槽嵌入表格。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['nested-grid.vue']
+    },
+    {
+      demoId: 'nested-form',
+      name: {
+        'zh-CN': '嵌套表单',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>通过 `collapse-item` 元素的默认插槽嵌入表单。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['nested-form.vue']
+    },
+    {
+      demoId: 'enumeration',
+      name: {
+        'zh-CN': '自定义 Title 展示',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>通过配置 Collapse 内置的 title 插槽实现自定义标题展示<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['enumeration.vue']
+    },
+    {
+      demoId: 'slot-title-right',
+      name: {
+        'zh-CN': '自定义 Title 右侧内容展示',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>通过配置 Collapse 内置的 title-right 插槽实现自定义标题右侧内容展示<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['slot-title-right.vue']
+    },
+    {
+      demoId: 'slot-icon',
+      name: {
+        'zh-CN': '自定义 icon 图标',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>通过配置 Collapse 内置的 icon 插槽实现图标<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['slot-icon.vue']
+    }
+  ],
+  apis: []
+}

package/resources/mobile-first/app/column-list-item/show-radio.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <tiny-column-list-item v-model="value" show-radio label="1" class="mb-3">
+      <template #column1>
+        <ul>
+          <li class="text-sm mb-1 sm:mb-1.5">智能手机智能手机</li>
+          <li class="mb-1 sm:mb-1.5 text-color-text-secondary"><span>品牌：</span><span>手机</span></li>
+          <li class="text-color-text-secondary"><span>编码：</span><span>HYFVFHJGG1354</span></li>
+        </ul>
+      </template>
+      <template #column2>
+        <ul class="text-color-text-secondary">
+          <li class="mb-1 sm:mb-1.5"><span>规格型号：</span><span>256G</span></li>
+          <li class="mb-1 sm:mb-1.5"><span>计量单位：</span><span>1</span></li>
+          <li><span>尺寸：</span><span>6.5英寸</span></li>
+        </ul>
+      </template>
+    </tiny-column-list-item>
+    <tiny-column-list-item v-model="value" show-radio label="2">
+      <template #column1>
+        <ul>
+          <li class="text-sm mb-1 sm:mb-1.5">智能手机智能手机</li>
+          <li class="mb-1 sm:mb-1.5 text-color-text-secondary"><span>品牌：</span><span>手机</span></li>
+          <li class="text-color-text-secondary"><span>编码：</span><span>HYFVFHJGG1354</span></li>
+        </ul>
+      </template>
+      <template #column2>
+        <ul class="text-color-text-secondary">
+          <li class="mb-1 sm:mb-1.5"><span>规格型号：</span><span>256G</span></li>
+          <li class="mb-1 sm:mb-1.5"><span>计量单位：</span><span>1</span></li>
+          <li><span>尺寸：</span><span>6.5英寸</span></li>
+        </ul>
+      </template>
+    </tiny-column-list-item>
+  </div>
+</template>
+
+<script>
+import { ColumnListItem } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyColumnListItem: ColumnListItem
+  },
+  data() {
+    return {
+      value: '1'
+    }
+  }
+}
+</script>

package/resources/mobile-first/app/column-list-item/webdoc/column-list-item.cn.md

@@ -0,0 +1,8 @@
+---
+title: ColumnListItem 分区列表项
+---
+
+# ColumnListItem 分区列表项
+
+<div>
+</div>

package/resources/mobile-first/app/column-list-item/webdoc/column-list-item.en.md

@@ -0,0 +1,8 @@
+---
+title: ColumnListItem 分区列表项
+---
+
+# ColumnListItem 分区列表项
+
+<div>
+</div>