mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-30 12:52:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: <meta name="naive-ui-style" /> can be used to controll the component style's position

Browse Source
This commit is contained in:
07akioni 2021-12-29 02:41:40 +08:00
parent 3842125671
commit 9ae3368020
13 changed files with 64 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.en-US.md
View File

@ -4,6 +4,7 @@
### Feats ### Feats
- `<meta name="naive-ui-style" />` can be used to controll the component style's position.
- `n-empty` add `show-icon` prop. - `n-empty` add `show-icon` prop.
- `n-modal` add a11y support, closes [#1877](https://github.com/TuSimple/naive-ui/issues/1877). - `n-modal` add a11y support, closes [#1877](https://github.com/TuSimple/naive-ui/issues/1877).
- Add `n-avatar-group` component. - Add `n-avatar-group` component.

1
CHANGELOG.zh-CN.md
View File

@ -4,6 +4,7 @@
### Feats ### Feats
- 可以通过 `<meta name="naive-ui-style" />` 控制组件样式的位置
- `n-empty` 新增 `show-icon` 属性 - `n-empty` 新增 `show-icon` 属性
- `n-modal` 增加可访问性支持，关闭 [#1877](https://github.com/TuSimple/naive-ui/issues/1877) - `n-modal` 增加可访问性支持，关闭 [#1877](https://github.com/TuSimple/naive-ui/issues/1877)
- 新增 `n-avatar-group` - 新增 `n-avatar-group`

16
demo/pages/docs/style-position/enUS/index.md Normal file
View File

@ -0,0 +1,16 @@
# Style Element Position
Sometimes you want to control where the style element should be inserted.
For example. If you have a tailwind reset style, you don't want it to be inserted after naive-ui's style. Since it may overrides button's style, etc.
You can create a `<meta name="naive-ui-style" />` element inside `head` element, then naive-ui's style will be inserted right before it.
```html
<head>
<xxx />
<!-- naive-ui's style will be inserted here -->
<meta name="naive-ui-style" />
<xxx />
</head>
```

16
demo/pages/docs/style-position/zhCN/index.md Normal file
View File

@ -0,0 +1,16 @@
# 样式元素位置
有时你可能希望控制样式元素插入的位置。
例如，如果你使用了 tailwind 的 reset 样式，你不希望它被插入 naive-ui 样式的后面，因为这可能会覆盖按钮等组件的样式。
你可以在 `head` 元素中加入一个 `<meta name="naive-ui-style" />` 元素，naive-ui 会把所有的样式刚好插入这个元素的前面。
```html
<head>
<xxx />
<!-- naive-ui 的样式会出现在这里 -->
<meta name="naive-ui-style" />
<xxx />
</head>
```

8
demo/routes/routes.js
View File

@ -63,6 +63,10 @@ export const enDocRoutes = [
{ {
path: 'import-on-demand', path: 'import-on-demand',
component: () => import('../pages/docs/import-on-demand/enUS/index.md') component: () => import('../pages/docs/import-on-demand/enUS/index.md')
},
{
path: 'style-position',
component: () => import('../pages/docs/style-position/enUS/index.md')
} }
] ]
@ -131,6 +135,10 @@ export const zhDocRoutes = [
{ {
path: 'import-on-demand', path: 'import-on-demand',
component: () => import('../pages/docs/import-on-demand/zhCN/index.md') component: () => import('../pages/docs/import-on-demand/zhCN/index.md')
},
{
path: 'style-position',
component: () => import('../pages/docs/style-position/zhCN/index.md')
} }
] ]

5
demo/store/menu-options.js
View File

@ -139,6 +139,11 @@ export function createDocumentationMenuOptions ({ lang, theme, mode }) {
zh: '创建适配主题的组件', zh: '创建适配主题的组件',
path: '/theme' path: '/theme'
}, },
{
en: 'Style Element Position',
zh: '样式元素位置',
path: '/style-position'
},
{ {
en: 'Third-Party Libraries', en: 'Third-Party Libraries',
zh: '社区精选资源', zh: '社区精选资源',

1
index.html
View File

@ -7,6 +7,7 @@
content="width=device-width, initial-scale=1, maximum-scale=1" content="width=device-width, initial-scale=1, maximum-scale=1"
/> />
<title>Naive UI</title> <title>Naive UI</title>
<meta name="naive-ui-style" />
<link <link
rel="icon" rel="icon"
type="image/svg+xml" type="image/svg+xml"

6
package.json
View File

@ -120,12 +120,12 @@
"vue": "^3.0.0" "vue": "^3.0.0"
}, },
"dependencies": { "dependencies": {
"@css-render/plugin-bem": "^0.15.6", "@css-render/plugin-bem": "^0.15.7",
"@css-render/vue3-ssr": "^0.15.6", "@css-render/vue3-ssr": "^0.15.7",
"@types/lodash": "^4.14.170", "@types/lodash": "^4.14.170",
"@types/lodash-es": "^4.17.4", "@types/lodash-es": "^4.17.4",
"async-validator": "^4.0.1", "async-validator": "^4.0.1",
"css-render": "^0.15.6", "css-render": "^0.15.7",
"date-fns": "^2.27.0", "date-fns": "^2.27.0",
"date-fns-tz": "^1.1.6", "date-fns-tz": "^1.1.6",
"evtd": "^0.2.3", "evtd": "^0.2.3",

1
src/_mixins/common.ts Normal file
View File

@ -0,0 +1 @@
export const cssrAnchorMetaName = 'naive-ui-style'

2
src/_mixins/use-rtl.ts
View File

@ -5,6 +5,7 @@ import {
RtlEnabledState, RtlEnabledState,
RtlItem RtlItem
} from '../config-provider/src/internal-interface' } from '../config-provider/src/internal-interface'
import { cssrAnchorMetaName } from './common'
export default function useRtl ( export default function useRtl (
mountId: string, mountId: string,
@ -37,6 +38,7 @@ export default function useRtl (
componentRtlState.style.mount({ componentRtlState.style.mount({
id, id,
head: true, head: true,
anchorMetaName: cssrAnchorMetaName,
props: { props: {
bPrefix: clsPrefix ? `.${clsPrefix}-` : undefined bPrefix: clsPrefix ? `.${clsPrefix}-` : undefined
}, },

3
src/_mixins/use-style.ts
View File

@ -3,6 +3,7 @@ import { Ref, onBeforeMount } from 'vue'
import { useSsrAdapter } from '@css-render/vue3-ssr' import { useSsrAdapter } from '@css-render/vue3-ssr'
import globalStyle from '../_styles/global/index.cssr' import globalStyle from '../_styles/global/index.cssr'
import { throwError } from '../_utils' import { throwError } from '../_utils'
import { cssrAnchorMetaName } from './common'
export default function useStyle ( export default function useStyle (
mountId: string, mountId: string,
@ -19,6 +20,7 @@ export default function useStyle (
style.mount({ style.mount({
id: clsPrefix === undefined ? mountId : clsPrefix + mountId, id: clsPrefix === undefined ? mountId : clsPrefix + mountId,
head: true, head: true,
anchorMetaName: cssrAnchorMetaName,
props: { props: {
bPrefix: clsPrefix ? `.${clsPrefix}-` : undefined bPrefix: clsPrefix ? `.${clsPrefix}-` : undefined
}, },
@ -27,6 +29,7 @@ export default function useStyle (
globalStyle.mount({ globalStyle.mount({
id: 'naive-ui/global', id: 'naive-ui/global',
head: true, head: true,
anchorMetaName: cssrAnchorMetaName,
ssr: ssrAdapter ssr: ssrAdapter
}) })
} }

3
src/_mixins/use-theme.ts
View File

@ -14,6 +14,7 @@ import { CNode } from 'css-render'
import type { GlobalTheme } from '../config-provider' import type { GlobalTheme } from '../config-provider'
import { configProviderInjectionKey } from '../config-provider/src/ConfigProvider' import { configProviderInjectionKey } from '../config-provider/src/ConfigProvider'
import type { ThemeCommonVars } from '../_styles/common' import type { ThemeCommonVars } from '../_styles/common'
import { cssrAnchorMetaName } from './common'
export interface Theme<N, T = {}, R = any> { export interface Theme<N, T = {}, R = any> {
name: N name: N
@ -101,11 +102,13 @@ function useTheme<N, T, R> (
props: { props: {
bPrefix: clsPrefix ? `.${clsPrefix}-` : undefined bPrefix: clsPrefix ? `.${clsPrefix}-` : undefined
}, },
anchorMetaName: cssrAnchorMetaName,
ssr: ssrAdapter ssr: ssrAdapter
}) })
globalStyle.mount({ globalStyle.mount({
id: 'naive-ui/global', id: 'naive-ui/global',
head: true, head: true,
anchorMetaName: cssrAnchorMetaName,
ssr: ssrAdapter ssr: ssrAdapter
}) })
} }

6
src/data-table/src/TableParts/Body.tsx
View File

@ -16,6 +16,8 @@ import {
import { pxfy, repeat } from 'seemly' import { pxfy, repeat } from 'seemly'
import { VirtualList, VirtualListInst, VResizeObserver } from 'vueuc' import { VirtualList, VirtualListInst, VResizeObserver } from 'vueuc'
import { CNode } from 'css-render' import { CNode } from 'css-render'
import { useMemo } from 'vooks'
import { cssrAnchorMetaName } from '../../../_mixins/common'
import { c } from '../../../_utils/cssr' import { c } from '../../../_utils/cssr'
import { NScrollbar, ScrollbarInst } from '../../../_internal' import { NScrollbar, ScrollbarInst } from '../../../_internal'
import { formatLength } from '../../../_utils' import { formatLength } from '../../../_utils'
@ -34,7 +36,6 @@ import ExpandTrigger from './ExpandTrigger'
import RenderSafeCheckbox from './BodyCheckbox' import RenderSafeCheckbox from './BodyCheckbox'
import TableHeader from './Header' import TableHeader from './Header'
import type { ColItem } from '../use-group-header' import type { ColItem } from '../use-group-header'
import { useMemo } from 'vooks'
interface NormalRowRenderInfo { interface NormalRowRenderInfo {
striped: boolean striped: boolean
@ -356,7 +357,8 @@ export default defineComponent({
style.mount({ style.mount({
id: `n-${componentId}`, id: `n-${componentId}`,
force: true, force: true,
props: cProps props: cProps,
anchorMetaName: cssrAnchorMetaName
}) })
fixedStyleMounted = true fixedStyleMounted = true
}) })