diff --git a/app/router.scrollBehavior.js b/app/router.scrollBehavior.js index 7e4298a..05b09d2 100644 --- a/app/router.scrollBehavior.js +++ b/app/router.scrollBehavior.js @@ -4,7 +4,7 @@ export default function scrollBehavior (to) { return { selector: decodeURIComponent(to.hash), offset: { - y: 20 + y: 32 } } } diff --git a/assets/styles/post.styl b/assets/styles/post.styl index 09a9efa..efbfdec 100644 --- a/assets/styles/post.styl +++ b/assets/styles/post.styl @@ -1,4 +1,4 @@ -@import "~highlight.js/styles/atom-one-light.css" +@import "~highlight.js/styles/night-owl.css" margin-y($top, $bottom = $top) margin-top $top @@ -141,19 +141,20 @@ margin-y($top, $bottom = $top) th td min-width 90px - padding 7px 14px + padding 8px 14px border 1px solid #f1f1f1 border-style solid none text-align left + vertical-align top & > :first-child - margin-top 5px + margin-top 0 & > :last-child - margin-bottom 5px + margin-bottom 0 pre - padding 10px 15px + font-size 90% table margin-y(0.2em, 0.5em) @@ -177,14 +178,16 @@ margin-y($top, $bottom = $top) code code& - padding 2px 4px - background-color #0066ff16 font-size 90% - overflow visible hyphens none - border-radius 3px font-family Menlo, consolas, monospace + &:not(pre > code) + padding 2px 4px + background-color #0066ff16 + overflow visible + border-radius 3px + hr hr& height 1px @@ -249,17 +252,14 @@ margin-y($top, $bottom = $top) pre pre& - border 1px solid #eee border-radius 4px - padding 18px 24px - background-color #f9f9f9 white-space pre overflow auto + line-height 1.6 code border none - background-color transparent - padding 0 + padding 18px 24px var font-family "PT Serif", Georgia, serif @@ -318,3 +318,23 @@ margin-y($top, $bottom = $top) a margin-right 10px + + [data-target] + outline 2px solid transparent + outline-offset -1px + animation target-blink 3s ease 1 both + + .hljs-attr + color #c5e478 + +@keyframes target-blink + 0% + outline-color #8fbcff + + 5% + 15% + outline-color #0052cc + + 10% + 95% + outline-color #8fbcff diff --git a/components/OneDemo.vue b/components/OneDemo.vue index f0b5d32..465e89b 100644 --- a/components/OneDemo.vue +++ b/components/OneDemo.vue @@ -162,9 +162,8 @@ Icon.register({ & >>> pre margin-top 0 margin-bottom 0 - - .expanded & - border-radius 0 + border-top-right-radius 0 + border-top-left-radius 0 .desc .source >>> pre @@ -186,6 +185,9 @@ Icon.register({ transition background-color 0.3s outline none + .expanded & + border-radius 0 + .veui-button font-size 18px diff --git a/layouts/default.vue b/layouts/default.vue index f3150de..f106638 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -85,7 +85,7 @@ main .content .footer - max-width 1180px - $sidebar-width + max-width 1346px - $sidebar-width min-width 560px transition margin-left 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) diff --git a/nuxt.config.js b/nuxt.config.js index 96bc12b..2cdb2b6 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -44,6 +44,7 @@ module.exports = { plugins: [ { src: '~plugins/i18n.js' }, { src: '~plugins/l10n.js' }, + { src: '~plugins/target.js', ssr: false }, { src: '~plugins/hm.js', ssr: false } ], diff --git a/one/build/language.js b/one/build/language.js index dd70f26..54f88af 100644 --- a/one/build/language.js +++ b/one/build/language.js @@ -20,9 +20,9 @@ export function vue (hljs) { className: 'string', endsParent: true, variants: [ - {begin: /"/, end: /"/}, - {begin: /'/, end: /'/}, - {begin: /[^\s"'=<>`]+/} + { begin: /"/, end: /"/ }, + { begin: /'/, end: /'/ }, + { begin: /[^\s"'=<>`]+/ } ] } ] @@ -49,7 +49,7 @@ export function vue (hljs) { */ begin: '|$)', end: '>', - keywords: {name: 'style'}, + keywords: { name: 'style' }, contains: [TAG_INTERNALS], starts: { end: '', @@ -62,7 +62,7 @@ export function vue (hljs) { // See the comment in the -可将消息内容写在默认插槽中，也可以通过 `message` 属性进行指定。 +可将消息内容写在默认插槽中，也可以通过 [`message`](#props-message) 属性进行指定。 -Messages can either be specified in the default slot, or via the `message` prop. +Messages can either be specified in the default slot, or via the [`message`](#props-message) prop. diff --git a/one/docs/demo/badge/number.vue b/one/docs/demo/badge/number.vue index 72fc703..ed35045 100644 --- a/one/docs/demo/badge/number.vue +++ b/one/docs/demo/badge/number.vue @@ -53,9 +53,9 @@ export default { -可以使用 `max` 属性，指定可现实数字的最大值，超过则显示为“max+”。 +可以使用 [`max`](#props-max) 属性，指定可现实数字的最大值，超过则显示为“max+”。 -Use the `max` prop to specify the max value can be displayed. Displays “max+” when value is larger than `max`. +Use the [`max`](#props-max) prop to specify the max value can be displayed. Displays “max+” when value is larger than `max`. diff --git a/one/docs/demo/badge/text.vue b/one/docs/demo/badge/text.vue index 34b9f15..7cd60fb 100644 --- a/one/docs/demo/badge/text.vue +++ b/one/docs/demo/badge/text.vue @@ -50,9 +50,9 @@ export default { -可以使用 `type` 属性，指定徽标在不同功能状态下的样式。 +可以使用 [`type`](#props-type) 属性，指定徽标在不同功能状态下的样式。 -Use the `type` prop to apply different contextual styles. +Use the [`type`](#props-type) prop to apply different contextual styles. diff --git a/one/docs/demo/button-group/disabled.vue b/one/docs/demo/button-group/disabled.vue index 329a3a4..571aeb7 100644 --- a/one/docs/demo/button-group/disabled.vue +++ b/one/docs/demo/button-group/disabled.vue @@ -68,9 +68,9 @@ section { -`ButtonGroup` 的 `disabled` 属性仅在使用 `items` 指定内容时生效，如果使用内联的 `Button` 组件，则需要为每个按钮分别指定 `disabled` 属性。 +`ButtonGroup` 的 [`disabled`](#props-disabled) 属性仅在使用 `items` 指定内容时生效，如果使用内联的 `Button` 组件，则需要为每个按钮分别指定 [`disabled`](./button#props-disabled) 属性。 -When given a string `value` property on an item, clicking the corresponding button will emit an event with the same name on `ButtonGroup`. +The [`disabled`](#props-disabled) prop of `ButtonGroup` only takes effect when the content is specified using `items`, and if inline `Button` components are used, you need to specify the [`disabled`](./button#props-disabled) prop for each button. diff --git a/one/docs/demo/carousel/autoplay.vue b/one/docs/demo/carousel/autoplay.vue index 166e76a..57b8cff 100644 --- a/one/docs/demo/carousel/autoplay.vue +++ b/one/docs/demo/carousel/autoplay.vue @@ -46,9 +46,9 @@ export default { -还可以使用 `interval` 属性来指定自动播放的切换间隔时长，使用 `wrap` 属性来允许循环播放，以及使用 `pause-on-hover` 属性来时光标悬浮在指示器对应项时暂停自动播放。 +还可以使用 [`interval`](#props-interval) 属性来指定自动播放的切换间隔时长，使用 [`wrap`](#props-wrap) 属性来允许循环播放，以及使用 [`pause-on-hover`](#props-pause-on-hover) 属性来时光标悬浮在指示器对应项时暂停自动播放。 -You can also use the `autoplay` prop to enable autoplay, use the `wrap` prop to enable looping and use the `pause-on-hover` prop to pause playing when cursor hover step indicators. +You can also use the [`autoplay`](#props-autoplay) prop to enable autoplay, use the [`wrap`](#props-wrap) prop to enable looping and use the [`pause-on-hover`](#props-pause-on-hover) prop to pause playing when cursor hover step indicators. diff --git a/one/docs/demo/checkbox/size.vue b/one/docs/demo/checkbox/size.vue index 401de00..bf30140 100644 --- a/one/docs/demo/checkbox/size.vue +++ b/one/docs/demo/checkbox/size.vue @@ -57,9 +57,9 @@ export default { -可以使用 `indeterminate` 属性来设置半选状态。 +可以使用 [`indeterminate`](#props-indeterminate) 属性来设置半选状态。 -Use the `indeterminate` prop to put the checkbox in indeterminate state. +Use the [`indeterminate`](#props-indeterminate) prop to put the checkbox in indeterminate state. diff --git a/one/docs/demo/dialog/async.vue b/one/docs/demo/dialog/async.vue index ee14845..e8bd96c 100644 --- a/one/docs/demo/dialog/async.vue +++ b/one/docs/demo/dialog/async.vue @@ -112,9 +112,9 @@ article > .veui-button { -当你希望统一处理用户可能触发对话框关闭的操作，请使用 `before-close` 属性传入统一的处理函数，此时无论是点击“确定”/“取消”按钮、关闭按钮还是按下 esc 触发的关闭操作，都会统一进入 `before-close` 的处理流程。如果逻辑相对简单，比如取消时没有额外逻辑，可以直接操作 `open` 属性来关闭对话框。 +当你希望统一处理用户可能触发对话框关闭的操作，请使用 [`before-close`](#props-before-close) 属性传入统一的处理函数，此时无论是点击“确定”/“取消”按钮、关闭按钮还是按下 esc 触发的关闭操作，都会统一进入 `before-close` 的处理流程。如果逻辑相对简单，比如取消时没有额外逻辑，可以直接操作 [`open`](#props-open) 属性来关闭对话框。 -When you want a unified process to handle all user interactions that might trigger the dialog to be closed, you can leverage the `before-close` function prop. No matter the close behavior is about to be triggered by clicking “OK”/“Cancel” buttons, the close button or pressing esc, `before-close` will always take over the following process. If the logic is relatively simple, you can manipulate `open` prop directly to close the dialog. +When you want a unified process to handle all user interactions that might trigger the dialog to be closed, you can leverage the `before-close` function prop. No matter the close behavior is about to be triggered by clicking “OK”/“Cancel” buttons, the close button or pressing esc, `before-close` will always take over the following process. If the logic is relatively simple, you can manipulate [`open`](#props-open) prop directly to close the dialog. diff --git a/one/docs/demo/dialog/size.vue b/one/docs/demo/dialog/size.vue index 983f812..50ed8fe 100644 --- a/one/docs/demo/dialog/size.vue +++ b/one/docs/demo/dialog/size.vue @@ -66,9 +66,9 @@ export default { -`s`/`m` 用于指定内容的尺寸，会被继承到内部的组件上。而 `narrow`/`medium`/`wide`/`fullscreen`/`auto` 是对话框本身所占区域的大小，可以与 `s`/`m` 混合使用。 +`s` / `m` 用于指定内容的尺寸，会被继承到内部的组件上。而 `narrow` / `medium` / `wide` / `fullscreen` / `auto` 是对话框本身所占区域的大小，可以与 `s` / `m` 混合使用。 -`s`/`m` are used to specify size for internal content and will be inherited by components inside the dialog. While `narrow`/`medium`/`wide`/`fullscreen`/`auto` are used to specify the dimension of the dialog itself, thus can be used together with `s`/`m`. +`s` / `m` are used to specify size for internal content and will be inherited by components inside the dialog. While `narrow` / `medium` / `wide` / `fullscreen` / `auto` are used to specify the dimension of the dialog itself, thus can be used together with `s` / `m`. diff --git a/one/docs/demo/dropdown/inline.vue b/one/docs/demo/dropdown/inline.vue index e836fec..73830c7 100644 --- a/one/docs/demo/dropdown/inline.vue +++ b/one/docs/demo/dropdown/inline.vue @@ -65,5 +65,5 @@ export default { -将 `OptionGroup` 的 `position` 属性设置为 `popup` 后可以让子选项在新的浮动子菜单中展现。 +将 `OptionGroup` 的 [`position`](#props-position) 属性设置为 `popup` 后可以让子选项在新的浮动子菜单中展现。 diff --git a/one/docs/demo/grid/fixed.vue b/one/docs/demo/grid/fixed.vue index 29324b7..4f235aa 100644 --- a/one/docs/demo/grid/fixed.vue +++ b/one/docs/demo/grid/fixed.vue @@ -71,5 +71,5 @@ article { -可以在 `GridContainer` 上使用 `columns`/`margin`/`gutter` 调整布局参数。 +可以在 `GridContainer` 上使用 `columns` / `margin` / `gutter` 调整布局参数。 diff --git a/one/docs/demo/popover/position.vue b/one/docs/demo/popover/position.vue index a0ae5e9..be0f2af 100644 --- a/one/docs/demo/popover/position.vue +++ b/one/docs/demo/popover/position.vue @@ -147,5 +147,5 @@ section + section { -使用 `aim-center` 属性来设置浮层提示箭头始终对准目标元素中心，适合用于目标元素较小的场景。 +使用 [`aim-center`](#props-aim-center) 属性来设置浮层提示箭头始终对准目标元素中心，适合用于目标元素较小的场景。 diff --git a/one/docs/demo/select/inline.vue b/one/docs/demo/select/inline.vue index ffa4f4f..82abebe 100644 --- a/one/docs/demo/select/inline.vue +++ b/one/docs/demo/select/inline.vue @@ -94,7 +94,7 @@ export default { -可以使用 `clearable` 属性将 `Select` 组件设置为允许删除已选值的模式。将 `OptionGroup` 的 `position` 属性设置为 `popup` 后可以让子选项在新的浮动子菜单中展现。 +可以使用 [`clearable`](#props-clearable) 属性将 `Select` 组件设置为允许删除已选值的模式。将 `OptionGroup` 的 [`position`](./option-group#props-position) 属性设置为 `popup` 后可以让子选项在新的浮动子菜单中展现。 diff --git a/one/docs/demo/select/multiple.vue b/one/docs/demo/select/multiple.vue index 2456872..d6a3f16 100644 --- a/one/docs/demo/select/multiple.vue +++ b/one/docs/demo/select/multiple.vue @@ -71,9 +71,9 @@ section { -可使用 `max` 属性控制选中选项的最大数量。这种场景下也可以使用 `searchable` 属性控制是否允许搜索选项。 +可使用 [`max`](#props-max) 属性控制选中选项的最大数量。这种场景下也可以使用 [`searchable`](#props-searchable) 属性控制是否允许搜索选项。 -Use `max` to specify the max number of options that can be selected. The `searchable` prop can also be used here to make options searchable. +Use `max` to specify the max number of options that can be selected. The [`searchable`](#props-searchable) prop can also be used here to make options searchable. diff --git a/one/docs/demo/table/filter.vue b/one/docs/demo/table/filter.vue index 152cdec..fb17e1c 100644 --- a/one/docs/demo/table/filter.vue +++ b/one/docs/demo/table/filter.vue @@ -145,9 +145,9 @@ h4 { -可以使用 `crowded` 这个 `ui` 属性值来在需要展示很多列的布局下默认隐藏筛选按钮。 +可以使用 `crowded` 这个 [`ui`](#props-ui) 属性值来在需要展示很多列的布局下默认隐藏筛选按钮。 -You can use the `ui` prop value `crowded` to hide filter button by default when there are too many columns to be displayed. +You can use the [`ui`](#props-ui) prop value `crowded` to hide filter button by default when there are too many columns to be displayed. diff --git a/one/docs/demo/table/fixed.vue b/one/docs/demo/table/fixed.vue index 10724f4..3984cba 100644 --- a/one/docs/demo/table/fixed.vue +++ b/one/docs/demo/table/fixed.vue @@ -137,9 +137,9 @@ h4 { -在固定列模式下，必须为被固定的列指定 `width` 属性。 +在固定列模式下，必须为被固定的列指定 [`width`](./column#props-width) 属性。 -The `width` prop must be specified for fixed columns. +The [`width`](./column#props-width) prop must be specified for fixed columns. diff --git a/one/docs/demo/tooltip/position.vue b/one/docs/demo/tooltip/position.vue index c68feb7..1bcf792 100644 --- a/one/docs/demo/tooltip/position.vue +++ b/one/docs/demo/tooltip/position.vue @@ -147,5 +147,5 @@ section + section { -使用 `aim-center` 属性来设置浮层提示箭头始终对准目标元素中心，适合用于目标元素较小的场景。 +使用 [`aim-center`](#props-aim-center) 属性来设置浮层提示箭头始终对准目标元素中心，适合用于目标元素较小的场景。 diff --git a/one/docs/demo/transfer/custom-search.vue b/one/docs/demo/transfer/custom-search.vue index ac80421..241c07b 100644 --- a/one/docs/demo/transfer/custom-search.vue +++ b/one/docs/demo/transfer/custom-search.vue @@ -188,9 +188,9 @@ export default { -自定义 `filter` 以根据 `label`/`value`/`id` 筛选。 +自定义 `filter` 以根据 `label` / `value` / `id` 筛选。 -Customize `filter` to filter by any of `label`/`value`/`id`. +Customize `filter` to filter by any of `label` / `value` / `id`. diff --git a/one/docs/directives/v-drag.md b/one/docs/directives/v-drag.md index 2dd1dd6..deeba52 100644 --- a/one/docs/directives/v-drag.md +++ b/one/docs/directives/v-drag.md @@ -101,7 +101,7 @@ ### 修饰符 -对应 `Object` 绑定值中的 `type`/`axis`。例如： +对应 `Object` 绑定值中的 `type` / `axis`。例如： ```html diff --git a/one/docs/directives/v-longpress.md b/one/docs/directives/v-longpress.md index 1e7e4b2..df000d5 100644 --- a/one/docs/directives/v-longpress.md +++ b/one/docs/directives/v-longpress.md @@ -14,7 +14,7 @@ ### 绑定值 -类型：`function|Object`。 +类型：`function | Object`。 使用 `function` 类型则绑定值表示触发长按或后续重复触发的回调函数。例如： @@ -35,10 +35,10 @@ | 参数 | 类型 | 默认值 | 描述 | | -- | -- | -- | -- | -| `timeout` | `number` | `longpress.timeout` | 触发长按等待的毫秒数。可进行[全局配置](#全局配置)。 | +| `timeout` | `number` | `longpress.timeout` | 触发长按等待的毫秒数。可进行[全局配置](#configs-longpress-timeout)。 | | `handler` | `function` | `function() {}` | 触发长按及后续重复触发时的回调函数。 | | `repeat` | `boolean` | `false` | 保持长按时是否重复触发回调，类似按下键盘按键后连续自动输入的效果。 | -| `repeatInterval` | `number` | `longpress.repeatInterval` | 重复触发回调间隔的毫秒数。可进行[全局配置](#全局配置)。 | +| `repeatInterval` | `number` | `longpress.repeatInterval` | 重复触发回调间隔的毫秒数。可进行[全局配置](#configs-longpress-repeatInterval)。 | :::warning `Object` 类型提供的参数会覆盖通过指令参数、修饰符指定的参数。 diff --git a/one/docs/directives/v-nudge.md b/one/docs/directives/v-nudge.md index d9a15f5..2e9a159 100644 --- a/one/docs/directives/v-nudge.md +++ b/one/docs/directives/v-nudge.md @@ -24,7 +24,7 @@ ### 绑定值 -类型：`function|Object`。 +类型：`function | Object`。 使用 `function` 类型则绑定值表示按下方向键后触发的回调函数。例如： @@ -58,7 +58,7 @@ ### 修饰符 -对应 `Object` 类型绑定值中的 `axis`/`step`。例如： +对应 `Object` 类型绑定值中的 `axis` / `step`。例如： ```html
diff --git a/one/docs/directives/v-outside.md b/one/docs/directives/v-outside.md index 95df36e..0d1753e 100644 --- a/one/docs/directives/v-outside.md +++ b/one/docs/directives/v-outside.md @@ -26,7 +26,7 @@ ### 绑定值 -类型：`function|Object`。 +类型：`function | Object`。 通过 `function` 类型配置触发外部事件时的回调函数。例如： @@ -48,7 +48,7 @@ | 参数 | 类型 | 默认值 | 描述 | | -- | -- | -- | -- | -| `refs` | `Array` | `[]` | [^refs] | +| `refs` | `Array` | `[]` | [^refs] | | `handler` | `function(event: Event): void` | `function() {}` | 外部事件触发时的回调函数，会接收到相应的原生事件对象参数。回调函数的 `event` 参数会根据 `trigger` 参数变成相应的原生事件对象。 | | `trigger` | `string` | `'click'` | 外部事件名，可取的值有：`click`，`mousedown`，`mouseup`，`hover`，`focus`。 | | `delay` | `number` | `0` | 在 `trigger` 为 `hover` 的时候，鼠标移出目标元素 `delay` 毫秒之后，才触发回调函数。如果在 `delay` 毫秒之内，鼠标重新移回了目标元素集合内，就不会触发回调函数。 | @@ -72,7 +72,7 @@ ### 修饰符 -对应 `Object` 类型绑定值中的 `trigger`/`delay`/`excludeSelf`。例如： +对应 `Object` 类型绑定值中的 `trigger` / `delay` / `excludeSelf`。例如： ```html
diff --git a/one/docs/directives/v-resize.md b/one/docs/directives/v-resize.md index 71121ff..9af00ef 100644 --- a/one/docs/directives/v-resize.md +++ b/one/docs/directives/v-resize.md @@ -16,7 +16,7 @@ ### 绑定值 -类型：`function|Object`。 +类型：`function | Object`。 使用 `function` 类型则绑定值表示 resize 时触发的回调函数。例如： @@ -59,7 +59,7 @@ ### 修饰符 -对应 `Object` 类型绑定值中的 `mode`/`leading`/`wait`。`leading` 可以与 `debounce`/`throttle` 其中之一同时使用。例如： +对应 `Object` 类型绑定值中的 `mode` / `leading` / `wait`。`leading` 可以与 `debounce` / `throttle` 其中之一同时使用。例如： ```html
diff --git a/one/docs/directives/v-tooltip.md b/one/docs/directives/v-tooltip.md index bce044f..5aacc5e 100644 --- a/one/docs/directives/v-tooltip.md +++ b/one/docs/directives/v-tooltip.md @@ -20,7 +20,7 @@ VEUI 对通过 `v-tooltip` 定义的全局浮层提示进行了统一的体验 ### 绑定值 -类型：`string|Object`。 +类型：`string | Object`。 使用 `string` 类型表示提示的文本信息： @@ -40,8 +40,8 @@ VEUI 对通过 `v-tooltip` 定义的全局浮层提示进行了统一的体验 | 参数 | 类型 | 默认值 | 描述 | | -- | -- | -- | -- | -| `content` | `string|VNode|Array` | - | 提示信息字符串或通过渲染函数返回的虚拟节点（数组）。 | -| `position` | `string` | - | 浮层提示的展示位置。参考 [`Tooltip`](../components/tooltip) 组件的 [`position`](../components/tooltip#props) 属性。 | +| `content` | `string | VNode | Array` | - | 提示信息字符串或通过渲染函数返回的虚拟节点（数组）。 | +| `position` | `string` | - | 浮层提示的展示位置。参考 [`Tooltip`](../components/tooltip) 组件的 [`position`](../components/tooltip#props-position) 属性。 | | `disabled` | `boolean` | `false` | 是否禁用浮层提示。 | ### 修饰符 diff --git a/one/docs/en-US/components/alert-box.md b/one/docs/en-US/components/alert-box.md index 16b4911..181c30e 100644 --- a/one/docs/en-US/components/alert-box.md +++ b/one/docs/en-US/components/alert-box.md @@ -4,13 +4,13 @@ ### Types -`AlertBox` component has 3 contextual types, which are `success`, `info`, ` and `error`. Types are specified with the `type` prop. +`AlertBox` component has 3 contextual types, which are `success`, `info`, ` and `error`. Types are specified with the [`type`](#props-type) prop. [[ demo src="/demo/alert-box/type.vue" ]] ### With title -You can customize the title of alert box with the `title` prop. +You can customize the title of alert box with the [`title`](#props-title) prop. [[ demo src="/demo/alert-box/title.vue" ]] @@ -20,15 +20,15 @@ You can customize the title of alert box with the `title` prop. | Name | Type | Default | Description | | -- | -- | -- | -- | -| `open` | `boolean` | `false` | [^open] | -| `type` | `string=` | `'success'` | [^type] | -| `title` | `string=` | - | The title of the alert box. | -| `loading` | `boolean=` | `false` | Wehter the confirm box is in loading state. When loading, the OK button will enter loading state as well and become unclickable. | -| `disabled` | `boolean=` | `false` | Wehter the confirm box is disabled. When disabled, the OK button will be disabled as well and become unclickable. | -| `ok-label` | `string=` | - | The text content of the “OK” button. | -| `before-close` | `function(string): boolean=|Promise` | - | Executed when user interaction is about to trigger closing the alert box. See the [`before-close`](./dialog#props) prop of the [`Dialog`](./dialog) component. | -| `overlay-class` | `string|Array|Object=` | - | See the [`overlay-class`](./overlay#props) prop of the [`Overlay`](./overlay) component. | -| `overlay-style` | `string|Array|Object=` | - | See the [`overlay-style`](./overlay#props) prop of the [`Overlay`](./overlay) component. | +| ``open`` | `boolean` | `false` | [^open] | +| ``type`` | `string=` | `'success'` | [^type] | +| ``title`` | `string=` | - | The title of the alert box. | +| ``loading`` | `boolean=` | `false` | Wehter the confirm box is in loading state. When loading, the OK button will enter loading state as well and become unclickable. | +| ``disabled`` | `boolean=` | `false` | Wehter the confirm box is disabled. When disabled, the OK button will be disabled as well and become unclickable. | +| ``ok-label`` | `string=` | - | The text content of the “OK” button. | +| ``before-close`` | `function(string): boolean=|Promise` | - | Executed when user interaction is about to trigger closing the alert box. See the [`before-close`](./dialog#props-before-close) prop of the [`Dialog`](./dialog) component. | +| ``overlay-class`` | `string | Array | Object=` | - | See the [`overlay-class`](./overlay#props-overlay-class) prop of the [`Overlay`](./overlay) component. | +| ``overlay-style`` | `string | Array | Object=` | - | See the [`overlay-style`](./overlay#props-overlay-style) prop of the [`Overlay`](./overlay) component. | ^^^open :::badges @@ -54,21 +54,21 @@ The contextual type of the alert box. | Name | Description | | -- | -- | -| `default` | The content of the alert box. | -| `title` | The title of the alert box. Will ignore the `title` prop when specified. | -| `foot` | The foot area of the alert box. Displays an “OK” button by default. | +| ``default`` | The content of the alert box. | +| ``title`` | The title of the alert box. Will ignore the [`title`](#props-title) prop when specified. | +| ``foot`` | The foot area of the alert box. Displays an “OK” button by default. | ### Events | Name | Description | | -- | -- | -| `ok` | Triggered when the “OK” button is clicked. | -| `afterclose` | Triggered after the box overlay is closed. If leaving transition is provided by the theme, the event will be triggered after the transition completes. | +| ``ok`` | Triggered when the “OK” button is clicked. | +| ``afterclose`` | Triggered after the box overlay is closed. If leaving transition is provided by the theme, the event will be triggered after the transition completes. | ### Icons | Name | Description | | -- | -- | -| `info` | Information alert. | -| `success` | Success alert. | -| `error` | Error alert. | +| ``info`` | Information alert. | +| ``success`` | Success alert. | +| ``error`` | Error alert. | diff --git a/one/docs/en-US/components/alert.md b/one/docs/en-US/components/alert.md index c4594aa..325bfc5 100644 --- a/one/docs/en-US/components/alert.md +++ b/one/docs/en-US/components/alert.md @@ -4,13 +4,13 @@ ### Types -`Alert` component has 4 contextual types, which are `success`, `info`, `warning` and `error`. Types are specified with the `type` prop. +`Alert` component has 4 contextual types, which are `success`, `info`, `warning` and `error`. Types are specified with the [`type`](#props-type) prop. [[ demo src="/demo/alert/type.vue" ]] ### Multiple messages -The `message` prop can be an array to display multiple switchable messages. +The [`message`](#props-message) prop can be an array to display multiple switchable messages. [[ demo src="/demo/alert/multiple.vue" ]] @@ -20,12 +20,12 @@ The `message` prop can be an array to display multiple switchable messages. | Name | Type | Default | Description | | -- | -- | -- | -- | -| `type` | `string=` | `'success'` | [^type] | -| `title` | `string` | - | The alert title. | -| `message` | `string|Array` | - | The alert message. When specified as an array, multiple messages will be displayed with previous/next navigation. | -| `closable` | `boolean=` | `false` | Whether the alert is allowed to be closed by users. | -| `open` | `boolean=` | `true` | [^open] | -| `index` | `number=` | `0` | [^index] | +| ``type`` | `string=` | `'success'` | [^type] | +| ``title`` | `string` | - | The alert title. | +| ``message`` | `string | Array` | - | The alert message. When specified as an array, multiple messages will be displayed with previous/next navigation. | +| ``closable`` | `boolean=` | `false` | Whether the alert is allowed to be closed by users. | +| ``open`` | `boolean=` | `true` | [^open] | +| ``index`` | `number=` | `0` | [^index] | ^^^type The contextual type of the alert message. @@ -60,10 +60,10 @@ The index of current message displayed when having multiple messages. | Name | Description | | -- | -- | -| `default` | [^slot-default] | -| `title` | The content area of the alert title. | -| `extra` | The extra content after the alert message. | -| `content` | The content of the whole component, including message text, status icon, previous/next navigation and close button. | +| ``default`` | [^slot-default] | +| ``title`` | The content area of the alert title. | +| ``extra`` | The extra content after the alert message. | +| ``content`` | The content of the whole component, including message text, status icon, previous/next navigation and close button. | ^^^slot-default The content of the message. @@ -82,10 +82,10 @@ Default: message text. | Name | Description | | -- | -- | -| `success` | Success message. | -| `warning` | Warning message. | -| `info` | Information message. | -| `error` | Error message. | -| `prev` | Previous message. | -| `next` | Next message. | -| `close` | Close alert. | +| ``success`` | Success message. | +| ``warning`` | Warning message. | +| ``info`` | Information message. | +| ``error`` | Error message. | +| ``prev`` | Previous message. | +| ``next`` | Next message. | +| ``close`` | Close alert. | diff --git a/one/docs/en-US/components/breadcrumb-item.md b/one/docs/en-US/components/breadcrumb-item.md index 19aee9f..de0014f 100644 --- a/one/docs/en-US/components/breadcrumb-item.md +++ b/one/docs/en-US/components/breadcrumb-item.md @@ -14,9 +14,9 @@ See [the demos of `Breadcrumb`](./breadcrumb#demos). | Name | Type | Default | Description | | --- | --- | --- | --- | -| `to` | `string|Object` | - | The target location. See [`Link`](./link#Props)'s the `to` prop. | -| `type` | `string` | `'link'` | [^link] | -| `native` | `boolean` | `false` | When set to `true` and `to` is specified, native `` element will be used and `to` will be set as the `href` attribute to this `` element. | +| ``to`` | `string | Object` | - | The target location. See [`Link`](./link)'s the [`to`](./link#props-to) prop. | +| ``type`` | `string` | `'link'` | [^link] | +| ``native`` | `boolean` | `false` | When set to `true` and `to` is specified, native `` element will be used and `to` will be set as the `href` attribute to this `` element. | ^^^link The type of the item. @@ -33,16 +33,16 @@ The type of the item. | Name | Description | | -- | -- | -| `default` | The content of the breadcrumb item. | +| ``default`` | The content of the breadcrumb item. | ### Events | Name | Description | | -- | -- | -| `redirect` | Triggered when clicking the item with `type` value `link`. The callback parameter list is `(event: Event)`. `event` is a [native click event object](https://developer.mozilla.org/en-US/docs/Web/Events/click). | +| ``redirect`` | Triggered when clicking the item with `type` value `link`. The callback parameter list is `(event: Event)`. `event` is a [native click event object](https://developer.mozilla.org/en-US/docs/Web/Events/click). | ### Icons | Name | Description | | -- | -- | -| `separator` | The separator between adjacent breadcrumb items. | +| ``separator`` | The separator between adjacent breadcrumb items. | diff --git a/one/docs/en-US/components/breadcrumb.md b/one/docs/en-US/components/breadcrumb.md index 5b875eb..ac7a102 100644 --- a/one/docs/en-US/components/breadcrumb.md +++ b/one/docs/en-US/components/breadcrumb.md @@ -8,13 +8,13 @@ ### Stylistic variants -Available style variants for the `ui` prop: `strong`. +Available style variants for the [`ui`](#props-ui) prop: `strong`. [[ demo src="/demo/breadcrumb/style.vue" ]] ### Size variants -Available size variants for the `ui` prop: `s`/`m`. +Available size variants for the [`ui`](#props-ui) prop: `s` / `m`. [[ demo src="/demo/breadcrumb/size.vue" ]] @@ -26,7 +26,7 @@ Can be used with embedded `BreadcrumbItem`s. ### Using datasource -Can be used with the `routes` prop as well. +Can be used with the [`routes`](#props-routes) prop as well. [[ demo src="/demo/breadcrumb/datasource.vue" ]] @@ -38,7 +38,7 @@ Separators can be customized. ### Events mode -Handling `redirect` event instead of redirect with router. +Handling [`redirect`](#events-redirect) event instead of redirect with router. [[ demo src="/demo/breadcrumb/redirect.vue" ]] @@ -48,8 +48,8 @@ Handling `redirect` event instead of redirect with router. | Name | Type | Default | Description | | --- | --- | --- | --- | -| `ui` | `string=` | - | [^ui] | -| `routes` | `Array` | `[]` | [^routes] | +| ``ui`` | `string=` | - | [^ui] | +| ``routes`` | `Array` | `[]` | [^routes] | ^^^ui Style variants. @@ -63,7 +63,7 @@ Style variants. ^^^ ^^^routes -The datasource for breadcrumb items. The type of items is `{label: string, type: string, to: string|Object=, native: boolean=}`. Properties apart from `label` can be referred to the props of [`BreadcrumbItem`](./breadcrumb-item) component. +The datasource for breadcrumb items. The type of items is `{label: string, type: string, to: string | Object=, native: boolean=}`. Properties apart from `label` can be referred to the props of [`BreadcrumbItem`](./breadcrumb-item) component. :::warning The last item will always be displayed as plain text by default. @@ -74,9 +74,9 @@ The last item will always be displayed as plain text by default. | Name | Description | | -- | -- | -| `default` | The items of the breadcrumb. Can only have [`BreadcrumbItem`](./breadcrumb-item) components as direct children. The `routes` prop will be ignored when this slot is specified. | -| `item` | [^slot-item] | -| `separator` | [^slot-separator] | +| ``default`` | The items of the breadcrumb. Can only have [`BreadcrumbItem`](./breadcrumb-item) components as direct children. The [`routes`](#props-routes) prop will be ignored when this slot is specified. | +| ``item`` | [^slot-item] | +| ``separator`` | [^slot-separator] | ^^^slot-item The content of each breadcrumb item. Default to the `label` properties of each item within `routes`, or the default slot content of [`BreadcrumbItem`]('./breadcrumb-item) components. @@ -100,7 +100,7 @@ When using Vue.js version `2.5.17` and below, it's required to bind a `slot-scop | Name | Description | | -- | -- | -| `redirect` | [^redirect] | +| ``redirect`` | [^redirect] | ^^^redirect diff --git a/one/docs/en-US/components/button-group.md b/one/docs/en-US/components/button-group.md index 7919d16..4eca34b 100644 --- a/one/docs/en-US/components/button-group.md +++ b/one/docs/en-US/components/button-group.md @@ -4,25 +4,25 @@ ### Stylistic variants -Available style variants for the `ui` prop: `primary`/`strong`/`basic`. +Available style variants for the [`ui`](#props-ui) prop: `primary` / `strong` / `basic`. [[ demo src="/demo/button-group/style.vue" ]] ### Size variants -Available size variants for the `ui` prop: `xs`/`s`/`m`/`l`/`xl`. +Available size variants for the [`ui`](#props-ui) prop: `xs` / `s` / `m` / `l` / `xl`. [[ demo src="/demo/button-group/size.vue" ]] ### Use datasource via `items` -Use the `items` prop to provide content with a datasource. +Use the [`items`](#props-items) prop to provide content with a datasource. [[ demo src="/demo/button-group/items.vue" ]] ### Disabled state -Use the `disabled` prop to set the button group to disabled state. +Use the [`disabled`](#props-disabled) prop to set the button group to disabled state. [[ demo src="/demo/button-group/disabled.vue" ]] @@ -32,9 +32,9 @@ Use the `disabled` prop to set the button group to disabled state. | Name | Type | Default | Description | | -- | -- | -- | -- | -| `ui` | `string=` | - | [^ui] | -| `items` | `Array` | - | [^items] | -| `disabled` | `boolean=` | `false` | Whether the button is disabled. | +| ``ui`` | `string=` | - | [^ui] | +| ``items`` | `Array` | - | [^items] | +| ``disabled`` | `boolean=` | `false` | Whether the button is disabled. | ^^^ui Style variants. A space-separated list of enum values. @@ -68,13 +68,13 @@ The datasource array for buttons in the group. The type of each item is `{label, | Name | Description | | -- | -- | -| `default` | Button group's content. | -| `item` | [^slot-item] | +| ``default`` | Button group's content. | +| ``item`` | [^slot-item] | ^^^slot-item The content of each button. -Shows the text specified by the `label` prop by default. +Shows the text specified by the `label` property by default. +++Scope properties | Name | Type | Description | @@ -92,7 +92,7 @@ Additionally, custom properties apart from the listed ones will also be passes i | Name | Description | | -- | -- | -| `click` | [^click-event] | +| ``click`` | [^click-event] | | <value> | [^value-var-event] | ^^^click-event @@ -107,5 +107,5 @@ Triggered upon clicks. The callback parameter list is `(item, index)`. ^^^ ^^^value-var-event -If the corresponding item has a string `value` property, an event with the name of `value` value will be emitted each time the button is clicked. It shares the same parameters with the `click` event. +If the corresponding item has a string `value` property, an event with the name of `value` value will be emitted each time the button is clicked. It shares the same parameters with the [`click`](#events-click) event. ^^^ diff --git a/one/docs/en-US/components/button.md b/one/docs/en-US/components/button.md index 18a97fd..1a06c19 100644 --- a/one/docs/en-US/components/button.md +++ b/one/docs/en-US/components/button.md @@ -4,25 +4,25 @@ ### Stylistic variants -Available style variants for the `ui` prop: `primary`/`strong`/`translucent`/`text`/`icon`. +Available style variants for the [`ui`](#props-ui) prop: `primary` / `strong` / `translucent` / `text` / `icon`. [[ demo src="/demo/button/style.vue" ]] ### Size variants -Available size variants for the `ui` prop: `xs`/`s`/`m`/`l`/`xl`. +Available size variants for the [`ui`](#props-ui) prop: `xs` / `s` / `m` / `l` / `xl`. [[ demo src="/demo/button/size.vue" ]] ### Disabled state -Use the `disabled` prop to set a button to disabled state. +Use the [`disabled`](#props-disabled) prop to set a button to disabled state. [[ demo src="/demo/button/disabled.vue" ]] ### Loading state -Use the `loading` prop to set a button to loading state (which will not respond upon clicks). +Use the [`loading`](#props-loading) prop to set a button to loading state (which will not respond upon clicks). [[ demo src="/demo/button/loading.vue" ]] @@ -32,10 +32,10 @@ Use the `loading` prop to set a button to loading state (which will not respond | Name | Type | Default | Description | | -- | -- | -- | -- | -| `ui` | `string=` | - | [^ui] | -| `disabled` | `boolean=` | `false` | Whether the button is disabled. | -| `type` | `string=` | `'button'` | [^type] | -| `loading` | `boolean=` | `false` | Whether the button is in loading state. Loading buttons won't respond to user interactions. | +| ``ui`` | `string=` | - | [^ui] | +| ``disabled`` | `boolean=` | `false` | Whether the button is disabled. | +| ``type`` | `string=` | `'button'` | [^type] | +| ``loading`` | `boolean=` | `false` | Whether the button is in loading state. Loading buttons won't respond to user interactions. | ^^^ui Style variants. A space-separated list of enum values. @@ -46,11 +46,11 @@ Style variants. A space-separated list of enum values. | `normal` | Normal button. Default style. | | `primary` | Primary button. | | `basic` | Basic button. | -| `strong` | Strong button. Can be used alone or together with `text`/`icon`. | +| `strong` | Strong button. Can be used alone or together with `text` / `icon`. | | `translucent` | Translucent button, typically used on dark background. | | `text` | Text button. | | `icon` | Icon button. | -| `aux` | Auxilary button. Need to be used with `text`/`icon` styles. | +| `aux` | Auxilary button. Need to be used with `text` / `icon` styles. | | `square` | Square button. Can be used with other styles. | | `xs` | Extra small. | | `s` | Small. | @@ -80,7 +80,7 @@ Note that the default value is different from the native `