mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-03-13 13:59:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(breadcrumb-item): add clickable prop

Browse Source
This commit is contained in:
07akioni 2022-06-05 16:40:20 +08:00
parent d723f56ec9
commit c96fc43829
18 changed files with 187 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintrc.js
View File

@ -13,6 +13,7 @@ module.exports = {
files: ['*.vue', '*.js'],
extends: ['plugin:vue/essential', '@vue/standard'],
rules: {
'vue/multiline-html-element-content-newline': 0,
'vue/multi-word-component-names': 0,
'vue/max-attributes-per-line': [
2,

1
CHANGELOG.en-US.md
View File

@ -19,6 +19,7 @@
- `n-tag` adds background color in dark theme when `:bordered="false"`, closes [#1699](https://github.com/TuSimple/naive-ui/issues/1699).
- `n-time-picker` adds `time-zone` prop, closes [#293](https://github.com/TuSimple/naive-ui/issues/293).
- `n-time` adds `time-zone` prop.
- `n-breadcrumb-item` adds `clickable` prop.
## 2.29.1

1
CHANGELOG.zh-CN.md
View File

@ -19,6 +19,7 @@
- `n-tag` 在暗色背景下 `:bordered="false"` 时增加背景颜色，关闭 [#1699](https://github.com/TuSimple/naive-ui/issues/1699)
- `n-time-picker` 新增 `time-zone` 属性，关闭 [#293](https://github.com/TuSimple/naive-ui/issues/293)
- `n-time` 新增 `time-zone` 属性
- `n-breadcrumb-item` 新增 `clickable` 属性
## 2.29.1

20
src/breadcrumb/demos/enUS/basic.demo.vue
View File

@ -4,15 +4,11 @@
<template>
<n-breadcrumb>
<n-breadcrumb-item href="#">
<n-icon><md-cash /></n-icon> Home
</n-breadcrumb-item>
<n-breadcrumb-item href="#">
<n-icon><md-cash /></n-icon> Account
</n-breadcrumb-item>
<n-breadcrumb-item href="#">
<n-icon><md-cash /></n-icon> Category
</n-breadcrumb-item>
<n-breadcrumb-item><n-icon :component="MdCash" /> Home</n-breadcrumb-item>
<n-breadcrumb-item>
<n-icon :component="MdCash" /> Account</n-breadcrumb-item>
<n-breadcrumb-item>
<n-icon :component="MdCash" /> Category</n-breadcrumb-item>
</n-breadcrumb>
</template>
@ -21,8 +17,10 @@ import { defineComponent } from 'vue'
import { MdCash } from '@vicons/ionicons4'
export default defineComponent({
components: {
MdCash
setup () {
return {
MdCash
}
}
})
</script>

20
src/breadcrumb/demos/enUS/custom.demo.vue
View File

@ -8,12 +8,16 @@ It is possible to pass a custom template when you want to customize the item lin
<n-breadcrumb>
<n-breadcrumb-item>
<n-dropdown :options="options1">
I'm ok
<div class="trigger">
I'm ok
</div>
</n-dropdown>
</n-breadcrumb-item>
<n-breadcrumb-item>
<n-dropdown :options="options2">
I'm ok
<div class="trigger">
I'm ok
</div>
</n-dropdown>
</n-breadcrumb-item>
</n-breadcrumb>
@ -49,3 +53,15 @@ export default defineComponent({
}
})
</script>
<style>
.trigger::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: inherit;
}
</style>

9
src/breadcrumb/demos/enUS/index.demo-entry.md
View File

@ -21,10 +21,11 @@ separator-per-item.vue
### BreadcrumbItem Props
| Name | Type | Default | Description |
| --------- | -------- | ----------- | ------------------------- |
| separator | `string` | `undefined` | BreadcrumbItem separator. |
| href | `string` | `undefined` | BreadcrumbItem link. |
| Name | Type | Default | Description | Version |
| --- | --- | --- | --- | --- |
| clickable | `boolean` | `true` | Whether it's clickable. | NEXT_VERSION |
| separator | `string` | `undefined` | BreadcrumbItem separator. | |
| href | `string` | `undefined` | BreadcrumbItem link. | |
### Breadcrumb Slots

12
src/breadcrumb/demos/enUS/separator-per-item.demo.vue
View File

@ -7,17 +7,13 @@ Use separator prop or separator slot to custom separator of an item. When both a
<template>
<n-breadcrumb>
<n-breadcrumb-item separator=">">
<n-icon><md-cash /></n-icon> Home
</n-breadcrumb-item>
<n-icon><md-cash /></n-icon> Home</n-breadcrumb-item>
<n-breadcrumb-item>
<n-icon><md-cash /></n-icon> Account
<template #separator>
<n-icon><md-cash /></n-icon> Account<template #separator>
~
</template>
</n-breadcrumb-item>
</template></n-breadcrumb-item>
<n-breadcrumb-item>
<n-icon><md-cash /></n-icon> Category
</n-breadcrumb-item>
<n-icon><md-cash /></n-icon> Category</n-breadcrumb-item>
</n-breadcrumb>
</template>

9
src/breadcrumb/demos/enUS/separator.demo.vue
View File

@ -7,14 +7,11 @@ Use separator prop to custom separator.
<template>
<n-breadcrumb separator=">">
<n-breadcrumb-item>
<n-icon><md-cash /></n-icon> Home
</n-breadcrumb-item>
<n-icon><md-cash /></n-icon> Home</n-breadcrumb-item>
<n-breadcrumb-item>
<n-icon><md-cash /></n-icon> Account
</n-breadcrumb-item>
<n-icon><md-cash /></n-icon> Account</n-breadcrumb-item>
<n-breadcrumb-item>
<n-icon><md-cash /></n-icon> Category
</n-breadcrumb-item>
<n-icon><md-cash /></n-icon> Category</n-breadcrumb-item>
</n-breadcrumb>
</template>
<script lang="ts">

21
src/breadcrumb/demos/zhCN/basic.demo.vue
View File

@ -4,15 +4,12 @@
<template>
<n-breadcrumb>
<n-breadcrumb-item href="#">
<n-icon><md-cash /></n-icon> 北京总行
</n-breadcrumb-item>
<n-breadcrumb-item href="#">
<n-icon><md-cash /></n-icon> 天津分行
</n-breadcrumb-item>
<n-breadcrumb-item href="#">
<n-icon><md-cash /></n-icon> 平山道支行
</n-breadcrumb-item>
<n-breadcrumb-item>
<n-icon :component="MdCash" /> 北京总行</n-breadcrumb-item>
<n-breadcrumb-item>
<n-icon :component="MdCash" /> 天津分行</n-breadcrumb-item>
<n-breadcrumb-item>
<n-icon :component="MdCash" /> 平山道支行</n-breadcrumb-item>
</n-breadcrumb>
</template>
@ -21,8 +18,10 @@ import { defineComponent } from 'vue'
import { MdCash } from '@vicons/ionicons4'
export default defineComponent({
components: {
MdCash
setup () {
return {
MdCash
}
}
})
</script>

16
src/breadcrumb/demos/zhCN/custom.demo.vue
View File

@ -8,12 +8,16 @@
<n-breadcrumb>
<n-breadcrumb-item>
<n-dropdown :options="options1">
I'm ok
<div class="trigger">
I'm ok
</div>
</n-dropdown>
</n-breadcrumb-item>
<n-breadcrumb-item>
<n-dropdown :options="options2">
I'm ok
<div class="trigger">
I'm ok
</div>
</n-dropdown>
</n-breadcrumb-item>
</n-breadcrumb>
@ -49,3 +53,11 @@ export default defineComponent({
}
})
</script>
<style>
.trigger {
padding: 4px;
margin: -4px;
border-radius: inherit;
}
</style>

8
src/breadcrumb/demos/zhCN/index.demo-entry.md
View File

@ -21,9 +21,11 @@ separator-per-item.vue
### BreadcrumbItem Props
| 名称 | 类型 | 默认值 | 说明 |
| --------- | -------- | ------ | ---------------------- |
| separator | `string` | `'/'` | 面包屑子项之间的分隔符 |
| 名称 | 类型 | 默认值 | 说明 | 版本 |
| --------- | --------- | ----------- | ---------------------- | ------------ |
| clickable | `boolean` | `true` | 是否可点击 | NEXT_VERSION |
| href | `string` | `undefined` | 链接地址 | |
| separator | `string` | `'/'` | 面包屑子项之间的分隔符 | |
### Breadcrumb Slots

9
src/breadcrumb/demos/zhCN/separator-per-item.demo.vue
View File

@ -7,17 +7,14 @@
<template>
<n-breadcrumb>
<n-breadcrumb-item separator=">">
<n-icon><md-cash /></n-icon> 北京总行
</n-breadcrumb-item>
<n-icon><md-cash /></n-icon> 北京总行</n-breadcrumb-item>
<n-breadcrumb-item>
<n-icon><md-cash /></n-icon> 天津分行
<template #separator>
<n-icon><md-cash /></n-icon> 天津分行<template #separator>
~
</template>
</n-breadcrumb-item>
<n-breadcrumb-item>
<n-icon><md-cash /></n-icon> 平山道支行
</n-breadcrumb-item>
<n-icon><md-cash /></n-icon> 平山道支行</n-breadcrumb-item>
</n-breadcrumb>
</template>

9
src/breadcrumb/demos/zhCN/separator.demo.vue
View File

@ -7,14 +7,11 @@
<template>
<n-breadcrumb separator=">">
<n-breadcrumb-item>
<n-icon><md-cash /></n-icon> 北京总行
</n-breadcrumb-item>
<n-icon><md-cash /></n-icon> 北京总行</n-breadcrumb-item>
<n-breadcrumb-item>
<n-icon><md-cash /></n-icon> 天津分行
</n-breadcrumb-item>
<n-icon><md-cash /></n-icon> 天津分行</n-breadcrumb-item>
<n-breadcrumb-item>
<n-icon><md-cash /></n-icon> 平山道支行
</n-breadcrumb-item>
<n-icon><md-cash /></n-icon> 平山道支行</n-breadcrumb-item>
</n-breadcrumb>
</template>

12
src/breadcrumb/src/Breadcrumb.tsx
View File

@ -59,7 +59,11 @@ export default defineComponent({
itemTextColorPressed,
itemTextColorActive,
fontSize,
fontWeightActive
fontWeightActive,
itemBorderRadius,
itemColorHover,
itemColorPressed,
itemLineHeight
}
} = themeRef.value
return {
@ -70,7 +74,11 @@ export default defineComponent({
'--n-item-text-color-pressed': itemTextColorPressed,
'--n-item-text-color-active': itemTextColorActive,
'--n-separator-color': separatorColor,
'--n-font-weight-active': fontWeightActive
'--n-item-color-hover': itemColorHover,
'--n-item-color-pressed': itemColorPressed,
'--n-item-border-radius': itemBorderRadius,
'--n-font-weight-active': fontWeightActive,
'--n-item-line-height': itemLineHeight
}
})
const themeClassHandle = inlineThemeDisabled

35
src/breadcrumb/src/BreadcrumbItem.tsx
View File

@ -1,11 +1,23 @@
import { h, defineComponent, inject, ExtractPropTypes, computed } from 'vue'
import { warn } from '../../_utils'
import {
h,
defineComponent,
inject,
ExtractPropTypes,
computed,
PropType
} from 'vue'
import { resolveSlot, warn } from '../../_utils'
import { useBrowserLocation } from '../../_utils/composable/use-browser-location'
import { breadcrumbInjectionKey } from './Breadcrumb'
const breadcrumbItemProps = {
separator: String,
href: String
href: String,
clickable: {
type: Boolean,
default: true
},
onClick: Function as PropType<(e: MouseEvent) => void>
} as const
export type BreadcrumbItemProps = Partial<
@ -36,15 +48,20 @@ export default defineComponent({
return () => {
const { value: mergedClsPrefix } = mergedClsPrefixRef
return (
<li class={`${mergedClsPrefix}-breadcrumb-item`}>
<li
class={[
`${mergedClsPrefix}-breadcrumb-item`,
props.clickable && `${mergedClsPrefix}-breadcrumb-item--clickable`
]}
>
{h(
htmlTagRef.value,
{
class: `${mergedClsPrefix}-breadcrumb-item__link`,
'aria-current': ariaCurrentRef.value,
href: props.href
href: props.href,
onClick: props.onClick
},
slots
)}
@ -52,9 +69,9 @@ export default defineComponent({
class={`${mergedClsPrefix}-breadcrumb-item__separator`}
aria-hidden="true"
>
{slots.separator
? slots.separator()
: props.separator ?? separatorRef.value}
{resolveSlot(slots.separator, () => [
props.separator ?? separatorRef.value
])}
</span>
</li>
)

100
src/breadcrumb/src/styles/index.cssr.ts
View File

@ -1,4 +1,4 @@
import { c, cB, cE } from '../../../_utils/cssr'
import { c, cB, cE, cM } from '../../../_utils/cssr'
// vars:
// --n-font-size
@ -9,8 +9,14 @@ import { c, cB, cE } from '../../../_utils/cssr'
// --n-item-text-color-active
// --n-separator-color
// --n-font-weight-active
// --n-item-border-radius
// --n-item-color-hover
// --n-item-color-active
// --n-item-line-height
export default cB('breadcrumb', `
white-space: nowrap;
cursor: default;
line-height: var(--n-item-line-height);
`, [
c('ul', `
list-style: none;
@ -21,55 +27,75 @@ export default cB('breadcrumb', `
color: inherit;
text-decoration: inherit;
`),
cB('breadcrumb-item', {
fontSize: 'var(--n-font-size)',
transition: 'color .3s var(--n-bezier)',
display: 'inline-block'
}, [
cB('breadcrumb-item', `
font-size: var(--n-font-size);
transition: color .3s var(--n-bezier);
display: inline-flex;
align-items: center;
`, [
cB('icon', `
font-size: 18px;
vertical-align: -.2em;
transition: color .3s var(--n-bezier);
color: var(--n-item-text-color);
`),
cE('link', {
cursor: 'pointer',
transition: 'color .3s var(--n-bezier)',
color: 'var(--n-item-text-color)'
}),
cE('separator', {
margin: '0 8px',
color: 'var(--n-separator-color)',
transition: 'color .3s var(--n-bezier)'
}),
c('&:hover', [
cB('icon', {
color: 'var(--n-item-text-color-hover)'
}),
cE('link', {
color: 'var(--n-item-text-color-hover)'
})
c('&:not(:last-child)', [
cM('clickable', [
cE('link', `
cursor: pointer;
`, [
c('&:hover', `
background-color: var(--n-item-color-hover);
`),
c('&:active', `
background-color: var(--n-item-color-pressed);
`)
])
])
]),
c('&:active', [
cB('icon', {
color: 'var(--n-item-text-color-pressed)'
}),
cE('link', {
color: 'var(--n-item-text-color-pressed)'
})
cE('link', `
padding: 4px;
border-radius: var(--n-item-border-radius);
transition:
background-color .3s var(--n-bezier),
color .3s var(--n-bezier);
color: var(--n-item-text-color);
position: relative;
`, [
c('&:hover', `
color: var(--n-item-text-color-hover);
`, [
cB('icon', `
color: var(--n-item-text-color-hover);
`)
]),
c('&:active', `
color: var(--n-item-text-color-pressed);
`, [
cB('icon', `
color: var(--n-item-text-color-pressed);
`)
])
]),
cE('separator', `
margin: 0 8px;
color: var(--n-separator-color);
transition: color .3s var(--n-bezier);
user-select: none;
`),
c('&:last-child', [
cE('link', `
font-weight: var(--n-font-weight-active);
cursor: unset;
color: var(--n-item-text-color-active);
`),
cB('icon', {
color: 'var(--n-item-text-color-active)'
}),
cE('separator', {
display: 'none'
})
`, [
cB('icon', `
color: var(--n-item-text-color-active);
`)
]),
cE('separator', `
display: none;
`)
])
])
])

15
src/breadcrumb/styles/light.ts
View File

@ -7,17 +7,22 @@ export const self = (vars: ThemeCommonVars) => {
const {
fontSize,
textColor3,
primaryColorHover,
primaryColorPressed,
textColor2
textColor2,
borderRadius,
buttonColor2Hover,
buttonColor2Pressed
} = vars
return {
...commonVariables,
fontSize: fontSize,
itemLineHeight: '1.25',
itemTextColor: textColor3,
itemTextColorHover: primaryColorHover,
itemTextColorPressed: primaryColorPressed,
itemTextColorHover: textColor2,
itemTextColorPressed: textColor2,
itemTextColorActive: textColor2,
itemBorderRadius: borderRadius,
itemColorHover: buttonColor2Hover,
itemColorPressed: buttonColor2Pressed,
separatorColor: textColor3
}
}

2
src/time/demos/zhCN/format.demo.vue
View File

@ -1,7 +1,7 @@
<markdown>
# 格式化
格式化时间， 详尽文档请查看 <n-a href="https://date-fns.org/v2.6.0/docs/format" target="_blank">date-fns format</n-a>.
格式化时间， 详尽文档请查看 <n-a href="https://date-fns.org/v2.6.0/docs/format" target="_blank">date-fns format</n-a>。
</markdown>
<template>