@opentiny/vue-docs 2.2.11 → 2.2.14

package/demos/apis/button.js

@@ -0,0 +1,245 @@
+export default {
+  mode: ['pc', 'mobile', 'mobile-first'],
+  apis: [
+    {
+      name: 'button',
+      type: 'component',
+      props: [
+        {
+          name: 'autofocus',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否默认聚焦',
+            'en-US': 'Whether to focus by default'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'autofocus',
+          mfDemo: ''
+        },
+        {
+          name: 'banner',
+          type: 'Boolean',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '设置通栏按钮',
+            'en-US': ''
+          },
+          mode: ['mobile-first'],
+          mfDemo: ''
+        },
+        {
+          name: 'circle',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否圆形按钮',
+            'en-US': 'Round button'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'basic-usage',
+          mfDemo: ''
+        },
+        {
+          name: 'custom-class',
+          type: 'String',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '设置 custom-class 属性定制按钮样式',
+            'en-US': 'Set the custom-class attribute to customize the button style'
+          },
+          mode: ['mobile-first'],
+          mfDemo: 'button-class'
+        },
+        {
+          name: 'disabled',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否被禁用按钮',
+            'en-US': 'Sets whether the button is disabled'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'dynamic-disabled',
+          mobileDemo: 'disabled',
+          mfDemo: ''
+        },
+        {
+          name: 'ghost',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否幽灵按钮',
+            'en-US': 'Is ghost button'
+          },
+          mode: ['pc'],
+          pcDemo: 'ghost'
+        },
+        {
+          name: 'href',
+          type: 'String',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '通过设置 href 属性可跳转到指定页面',
+            'en-US': 'Set the href attribute to jump to a specified page'
+          },
+          mode: ['mobile-first'],
+          mfDemo: 'link'
+        },
+        {
+          name: 'icon',
+          type: 'Component',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '按钮左侧展示的图标，接收为Icon组件',
+            'en-US': 'The icon displayed by the button is received as an Icon component'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'icon',
+          mobileDemo: 'icon',
+          mfDemo: ''
+        },
+        {
+          name: 'loading',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否加载中状态',
+            'en-US': 'Loading status'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'loading',
+          mobileDemo: 'loading',
+          mfDemo: ''
+        },
+        {
+          name: 'native-type',
+          type: "'button' | 'submit' | 'reset'",
+          defaultValue: "'button'",
+          desc: {
+            'zh-CN': '对应按钮原生 type 属性',
+            'en-US': 'Set the button native type attribute'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: '',
+          mfDemo: ''
+        },
+        {
+          name: 'plain',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否朴素按钮',
+            'en-US': 'Simple button'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'basic-usage',
+          mfDemo: ''
+        },
+        {
+          name: 'reset-time',
+          type: 'number',
+          defaultValue: '1000',
+          desc: {
+            'zh-CN': '设置按钮禁用时间，防止重复提交，单位毫秒',
+            'en-US': 'Set the button disable time, in milliseconds, to prevent repeated submission'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'reset-time',
+          mobileDemo: 'reset-time',
+          mfDemo: ''
+        },
+        {
+          name: 'round',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否圆角按钮',
+            'en-US': 'Whether to round the corner button'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'basic-usage',
+          mfDemo: ''
+        },
+        {
+          name: 'size',
+          type: "'large' | 'medium' | 'small' | 'mini'",
+          defaultValue: '',
+          desc: {
+            'zh-CN': '定义按钮尺寸',
+            'en-US': 'Define the button size'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'size',
+          mobileDemo: 'size',
+          mfDemo: ''
+        },
+        {
+          name: 'text',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '按钮显示的文本',
+            'en-US': 'Set the text displayed by the button'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'text',
+          mobileDemo: 'base',
+          mfDemo: ''
+        },
+        {
+          name: 'type',
+          typeAnchorName: 'IButtonType',
+          type: 'IButtonType',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '展示按钮不同的状态，设置为text则展示为文本按钮',
+            'en-US': 'Display different states of buttons, set to text to display as text buttons'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'basic-usage',
+          mobileDemo: 'base',
+          mfDemo: ''
+        }
+      ],
+      events: [
+        {
+          name: 'click',
+          type: '(event: PointEvent) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '当按钮被点击时触发的回调函数',
+            'en-US': 'Sets the callback function triggered when a button is clicked'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'click',
+          mobileDemo: 'event',
+          mfDemo: ''
+        }
+      ],
+      methods: [],
+      slots: [
+        {
+          name: 'default',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '默认插槽，自定义按钮展示内容',
+            'en-US': 'Default slot'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'image',
+          mobileDemo: '',
+          mfDemo: ''
+        }
+      ]
+    }
+  ],
+  types: [
+    {
+      name: 'IButtonType',
+      type: 'interface',
+      code: `type IButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'`
+    }
+  ]
+}

package/demos/apis/calendar-bar.js

@@ -0,0 +1,59 @@
+export default {
+  mode: ['mobile-first'],
+  apis: [
+    {
+      name: 'calendarBar',
+      type: 'component',
+      props: [
+        {
+          name: 'cascaderPosition',
+          type: 'Object',
+          defaultValue: '{}',
+          desc: {
+            'zh-CN': '改变年月选择的位置',
+            'en-US': 'Change the location of the year and month selection'
+          },
+          mode: ['mobile-first'],
+          mfDemo: 'cascader-position'
+        },
+        {
+          name: 'config',
+          type: 'Object',
+          defaultValue: '{}',
+          desc: {
+            'zh-CN': '传入用户日期配置信息',
+            'en-US': 'Transfer the user date configuration information.'
+          },
+          mode: ['mobile-first'],
+          mfDemo: 'marked'
+        },
+        {
+          name: 'v-model',
+          type: 'String',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '数据绑定',
+            'en-US': 'Data Binding'
+          },
+          mode: ['mobile-first'],
+          mfDemo: 'marked'
+        }
+      ],
+      events: [],
+      methods: [
+        {
+          name: 'expand',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '日历栏展开或收起时触发的事件',
+            'en-US': 'Event triggered when the calendar bar expands or collapses'
+          },
+          mode: ['mobile-first'],
+          mfDemo: 'expand'
+        }
+      ],
+      slots: []
+    }
+  ]
+}

package/demos/apis/calendar-view.js

@@ -0,0 +1,293 @@
+export default {
+  mode: ['pc', 'mobile-first'],
+  apis: [
+    {
+      name: 'calendar-view',
+      type: 'component',
+      props: [
+        {
+          name: 'day-times',
+          type: 'Array',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '配置时间线模式下所展示的时间范围，默认为[8,18]，可配范围[0,23]。',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'calendar-timeline-range',
+          mfDemo: 'calendar-timeline-range'
+        },
+        {
+          name: 'disabled',
+          type: '() => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '日期禁用',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'calendar-disabled-day',
+          mfDemo: 'calendar-disabled-day'
+        },
+        {
+          name: 'events',
+          type: 'Array',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '日程事件',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'calendar-event',
+          mfDemo: 'calendar-event'
+        },
+        {
+          name: 'height',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '日历高度',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: '',
+          mfDemo: ''
+        },
+        {
+          name: 'mark-color',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '点标记的颜色',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'calendar-day-mark',
+          mfDemo: 'calendar-day-mark'
+        },
+        {
+          name: 'mode',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '显示模式，可选值有 timeline-时间线模式、schedule-日程模式、month-月模式，默认为月模式。',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'calendar-mode',
+          mfDemo: 'calendar-mode'
+        },
+        {
+          name: 'modes',
+          type: 'Array',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '模式组，显示模式任意组合',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'calendar-mode',
+          mfDemo: 'calendar-mode'
+        },
+        {
+          name: 'month',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '日历当前显示月份',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'basic-usage',
+          mfDemo: 'basic-usage'
+        },
+        {
+          name: 'multi-select',
+          type: 'boolean',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '日期多选',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'multi-select',
+          mfDemo: 'multi-select'
+        },
+        {
+          name: 'set-day-bg-color',
+          type: '() => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '设置日期背景色',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'custom-day-bg-color',
+          mfDemo: 'custom-day-bg-color'
+        },
+        {
+          name: 'show-mark',
+          type: '() => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '显示点标记',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'calendar-day-mark',
+          mfDemo: 'calendar-day-mark'
+        },
+        {
+          name: 'show-new-schedule',
+          type: '() => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '显示新增日程按钮',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'basic-usage',
+          mfDemo: 'basic-usage'
+        },
+        {
+          name: 'v-model',
+          type: 'String',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '绑定值，默认为空',
+            'en-US': ''
+          },
+          mode: ['mobile-first'],
+          mfDemo: ''
+        },
+        {
+          name: 'year',
+          type: 'number',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '日历当前显示年份',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'basic-usage',
+          mfDemo: 'basic-usage'
+        }
+      ],
+      events: [
+        {
+          name: 'month-change',
+          desc: {
+            'zh-CN': '月改变事件',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'calendar-event',
+          mfDemo: 'calendar-event'
+        },
+        {
+          name: 'new-schedule',
+          desc: {
+            'zh-CN': '新增日程按钮点击事件',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'calendar-schedule-slot',
+          mfDemo: 'calendar-schedule-slot'
+        },
+        {
+          name: 'next-week-click',
+          desc: {
+            'zh-CN': '下一周按钮点击事件',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'calendar-event',
+          mfDemo: 'calendar-event'
+        },
+        {
+          name: 'prev-week-click',
+          desc: {
+            'zh-CN': '上一周按钮点击事件',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'calendar-event',
+          mfDemo: 'calendar-event'
+        },
+        {
+          name: 'selected-date-change',
+          desc: {
+            'zh-CN': '选中日期改变事件',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'multi-select',
+          mfDemo: 'multi-select'
+        },
+        {
+          name: 'week-change',
+          desc: {
+            'zh-CN': '周改变事件',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'calendar-event',
+          mfDemo: 'calendar-event'
+        },
+        {
+          name: 'year-change',
+          desc: {
+            'zh-CN': '年改变事件',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'calendar-event',
+          mfDemo: 'calendar-event'
+        }
+      ],
+      methods: [],
+      slots: [
+        {
+          name: 'header',
+          desc: {
+            'zh-CN': '头部插槽',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'calendar-schedule-slot',
+          mfDemo: 'calendar-schedule-slot'
+        },
+        {
+          name: 'timeline',
+          desc: {
+            'zh-CN': '时间线插槽，有timeline1-timeline7 7个插槽',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'calendar-schedule-slot',
+          mfDemo: 'calendar-schedule-slot'
+        },
+        {
+          name: 'tool',
+          desc: {
+            'zh-CN': '工具栏插槽',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'calendar-schedule-slot',
+          mfDemo: 'calendar-schedule-slot'
+        },
+        {
+          name: 'weekday',
+          desc: {
+            'zh-CN': '日程插槽，有weekday1-weekday7 7个插槽',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'calendar-schedule-slot',
+          mfDemo: 'calendar-schedule-slot'
+        }
+      ]
+    }
+  ]
+}

package/demos/apis/calendar.js

@@ -0,0 +1,104 @@
+export default {
+  mode: ['pc'],
+  apis: [
+    {
+      name: 'calendar',
+      type: 'component',
+      props: [
+        {
+          name: 'events',
+          typeAnchorName: 'eventLists',
+          type: 'eventLists[]',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '事件列表',
+            'en-US': 'Event List'
+          },
+          mode: ['pc'],
+          pcDemo: 'dynamic-add-schedule'
+        },
+        {
+          name: 'mode',
+          type: "'month' | 'year'",
+          defaultValue: "'month'",
+          desc: {
+            'zh-CN': '日历显示模式',
+            'en-US': 'Display mode. The value can be month or year. The default value is month.'
+          },
+          mode: ['pc'],
+          pcDemo: 'calendar-mode'
+        },
+        {
+          name: 'month',
+          type: 'number',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '指定月份，默认当前月份',
+            'en-US': 'Specified month. The default value is the current month.'
+          },
+          mode: ['pc'],
+          pcDemo: 'custom-day-cell'
+        },
+        {
+          name: 'show-selected',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否显示选中的日期',
+            'en-US': 'Display the selected date.'
+          },
+          mode: ['pc'],
+          pcDemo: 'show-selected-date'
+        },
+        {
+          name: 'year',
+          type: 'number',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '指定年份，默认当前年份',
+            'en-US': 'Specified year. The default year is this year.'
+          },
+          mode: ['pc'],
+          pcDemo: 'custom-day-cell'
+        }
+      ],
+      events: [],
+      methods: [],
+      slots: [
+        {
+          name: 'day',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '日期单元格插槽',
+            'en-US': 'Date Cell Slot'
+          },
+          mode: ['pc'],
+          pcDemo: 'custom-day-cell'
+        },
+        {
+          name: 'tool',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '日历工具栏插槽',
+            'en-US': 'Calendar Toolbar Slot'
+          },
+          mode: ['pc'],
+          pcDemo: 'custom-calendar-toolbar'
+        }
+      ]
+    }
+  ],
+  types: [
+    {
+      name: 'eventLists',
+      type: 'interface',
+      code: `
+      interface eventLists [{
+        time: 1534297845236, // 指定需要展示事件的日期
+        title: '消息', // 指定事件标题
+        content: '这是一条消息', // 指定事件的具体内容
+        type: 'info' // 事件主题类型，包括 warning、error、info、success。
+      }]`
+    }
+  ]
+}