mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-30 12:52:43 +08:00
refactor: remove all icon style deps
This commit is contained in:
07akioni
parent
d9d9115eb1
commit
ca47e1fe71
@ -33,13 +33,10 @@ export default cB('avatar', `
|
||||
top: 50%;
|
||||
`),
|
||||
cB('icon', {
|
||||
color: '#FFF',
|
||||
verticalAlign: 'bottom'
|
||||
verticalAlign: 'bottom',
|
||||
fontSize: 'var(--size)'
|
||||
}),
|
||||
cE('text', {
|
||||
lineHeight: 1.25
|
||||
}),
|
||||
cB('icon', {
|
||||
fontSize: 'var(--size)'
|
||||
})
|
||||
])
|
||||
|
||||
@ -28,9 +28,9 @@
|
||||
<script>
|
||||
import { ref, defineComponent } from 'vue'
|
||||
import { VResizeObserver } from 'vueuc'
|
||||
import { formatLength } from '../../_utils/css'
|
||||
import TableHeader from './TableParts/Header.vue'
|
||||
import TableBody from './TableParts/Body.vue'
|
||||
import { formatLength } from '../../_utils/css'
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
|
||||
@ -23,9 +23,9 @@
|
||||
}"
|
||||
@click.stop
|
||||
>
|
||||
<n-icon>
|
||||
<n-base-icon>
|
||||
<filter-icon />
|
||||
</n-icon>
|
||||
</n-base-icon>
|
||||
</div>
|
||||
</template>
|
||||
<n-data-table-filter-menu
|
||||
@ -44,7 +44,7 @@
|
||||
<script>
|
||||
import { defineComponent } from 'vue'
|
||||
import { FilterIcon } from '../../../_base/icons'
|
||||
import { NIcon } from '../../../icon'
|
||||
import { NBaseIcon } from '../../../_base'
|
||||
import { NPopover } from '../../../popover'
|
||||
import RenderFilter from './RenderFilter'
|
||||
import NDataTableFilterMenu from './FilterMenu.vue'
|
||||
@ -57,7 +57,7 @@ function createActiveFilters (allFilters, columnKey, mergedFilterValue) {
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
NIcon,
|
||||
NBaseIcon,
|
||||
RenderFilter,
|
||||
NDataTableFilterMenu,
|
||||
NPopover,
|
||||
|
||||
@ -274,26 +274,22 @@ export default c([
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: background-color .3s var(--bezier);
|
||||
transition:
|
||||
background-color .3s var(--bezier),
|
||||
color .3s var(--bezier);
|
||||
font-size: var(--filter-size);
|
||||
color: var(--th-icon-color);
|
||||
`, [
|
||||
c('&:hover', {
|
||||
backgroundColor: 'var(--th-button-color-hover)'
|
||||
}),
|
||||
cB('icon', {
|
||||
fontSize: 'var(--filter-size)',
|
||||
color: 'var(--th-icon-color)',
|
||||
transition: 'color .3s var(--bezier)'
|
||||
}),
|
||||
cM('show', {
|
||||
backgroundColor: 'var(--th-button-color-hover)'
|
||||
}),
|
||||
cM('active', {
|
||||
backgroundColor: 'var(--th-button-color-hover)'
|
||||
}, [
|
||||
cB('icon', {
|
||||
color: 'var(--th-icon-color-active)'
|
||||
})
|
||||
])
|
||||
cM('active', `
|
||||
background-color: var(--th-button-color-hover);
|
||||
color: var(--th-icon-color-active);
|
||||
`)
|
||||
])
|
||||
])
|
||||
])
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { composite } from 'seemly'
|
||||
import commonVariables from './_common'
|
||||
import { iconDark } from '../../icon/styles'
|
||||
import { buttonDark } from '../../button/styles'
|
||||
import { checkboxDark } from '../../checkbox/styles'
|
||||
import { radioDark } from '../../radio/styles'
|
||||
@ -15,7 +14,6 @@ export default {
|
||||
name: 'DataTable',
|
||||
common: commonDark,
|
||||
peers: {
|
||||
Icon: iconDark,
|
||||
Button: buttonDark,
|
||||
Checkbox: checkboxDark,
|
||||
Radio: radioDark,
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { composite } from 'seemly'
|
||||
import commonVariables from './_common'
|
||||
import { iconLight } from '../../icon/styles'
|
||||
import { buttonLight } from '../../button/styles'
|
||||
import { checkboxLight } from '../../checkbox/styles'
|
||||
import { radioLight } from '../../radio/styles'
|
||||
@ -15,7 +14,6 @@ export default {
|
||||
name: 'DataTable',
|
||||
common: commonLight,
|
||||
peers: {
|
||||
Icon: iconLight,
|
||||
Button: buttonLight,
|
||||
Checkbox: checkboxLight,
|
||||
Radio: radioLight,
|
||||
|
||||
@ -10,10 +10,7 @@
|
||||
@click="handleCreateClick"
|
||||
>
|
||||
<template #icon>
|
||||
<n-base-icon
|
||||
:unstable-theme="mergedTheme.peers.Icon"
|
||||
:unstable-theme-overrides="mergedTheme.overrides.Icon"
|
||||
>
|
||||
<n-base-icon>
|
||||
<add-icon />
|
||||
</n-base-icon>
|
||||
</template>
|
||||
@ -51,10 +48,7 @@
|
||||
@click="remove(index)"
|
||||
>
|
||||
<template #icon>
|
||||
<n-base-icon
|
||||
:unstable-theme="mergedTheme.peers.Icon"
|
||||
:unstable-theme-overrides="mergedTheme.overrides.Icon"
|
||||
>
|
||||
<n-base-icon>
|
||||
<remove-icon />
|
||||
</n-base-icon>
|
||||
</template>
|
||||
@ -67,10 +61,7 @@
|
||||
@click="createItem(index)"
|
||||
>
|
||||
<template #icon>
|
||||
<n-base-icon
|
||||
:unstable-theme="mergedTheme.peers.Icon"
|
||||
:unstable-theme-overrides="mergedTheme.overrides.Icon"
|
||||
>
|
||||
<n-base-icon>
|
||||
<add-icon />
|
||||
</n-base-icon>
|
||||
</template>
|
||||
|
||||
@ -221,7 +221,6 @@ export default c([
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: var(--icon-size);
|
||||
`, [
|
||||
cB('base-clear', {
|
||||
fontSize: 'var(--icon-size)'
|
||||
|
||||
@ -1,20 +1,16 @@
|
||||
<template>
|
||||
<div
|
||||
class="n-popconfirm-content"
|
||||
:class="{
|
||||
'n-popconfirm-content--show-icon': showIcon
|
||||
}"
|
||||
:style="cssVars"
|
||||
>
|
||||
<div class="n-popconfirm-content__body">
|
||||
<slot v-if="showIcon" name="icon">
|
||||
<n-base-icon>
|
||||
<warning-icon />
|
||||
</n-base-icon>
|
||||
</slot>
|
||||
<div :style="cssVars">
|
||||
<div class="n-popconfirm__body">
|
||||
<div v-if="showIcon" class="n-popconfirm__icon">
|
||||
<slot name="icon">
|
||||
<n-base-icon>
|
||||
<warning-icon />
|
||||
</n-base-icon>
|
||||
</slot>
|
||||
</div>
|
||||
<slot />
|
||||
</div>
|
||||
<div class="n-popconfirm-content__action">
|
||||
<div class="n-popconfirm__action">
|
||||
<slot name="action">
|
||||
<n-button size="small" @click="handleNegativeClick">
|
||||
{{ localizedNegativeText }}
|
||||
|
||||
@ -1,32 +1,26 @@
|
||||
import { c, cB, cE, cM } from '../../../_utils/cssr'
|
||||
import { c, cB, cE } from '../../../_utils/cssr'
|
||||
|
||||
// vars:
|
||||
// --font-size
|
||||
// --icon-size
|
||||
// --bezier
|
||||
// --icon-color
|
||||
export default cB('popconfirm-content', {
|
||||
padding: '4px 0'
|
||||
}, [
|
||||
export default cB('popconfirm', [
|
||||
cE('body', `
|
||||
font-size: var(--font-size);
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
position: relative;
|
||||
`, [
|
||||
cB('base-icon', `
|
||||
position: absolute;
|
||||
cE('icon', `
|
||||
display: flex;
|
||||
font-size: var(--icon-size);
|
||||
left: 0;
|
||||
top: -2px;
|
||||
transition: color .3s var(--bezier);
|
||||
color: var(--icon-color);
|
||||
transition: color .3s var(--bezier);
|
||||
margin: 0 8px 0 0;
|
||||
`)
|
||||
]),
|
||||
cM('show-icon', [
|
||||
cE('body', {
|
||||
paddingLeft: '26px'
|
||||
})
|
||||
]),
|
||||
cE('action', `
|
||||
margin-top: 14px;
|
||||
display: flex;
|
||||
|
||||
@ -52,21 +52,20 @@ export default cB('tree', {
|
||||
display: flex;
|
||||
color: var(--arrow-color);
|
||||
transition: color .3s var(--bezier);
|
||||
font-size: 14px;
|
||||
`, [
|
||||
cB('icon', {
|
||||
fontSize: '14px'
|
||||
}, [
|
||||
cB('icon', [
|
||||
iconSwitchTransition()
|
||||
]),
|
||||
cB('base-loading', `
|
||||
color: var(--loading-color);
|
||||
position: absolute;
|
||||
left: 1px;
|
||||
top: 1px;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
`, [
|
||||
iconSwitchTransition({ left: '1px', top: '1px' })
|
||||
iconSwitchTransition()
|
||||
])
|
||||
]),
|
||||
cM('hide', {
|
||||
@ -160,26 +159,3 @@ export default cB('tree', {
|
||||
})
|
||||
])
|
||||
])
|
||||
|
||||
// export default c([
|
||||
// ({ props }) => {
|
||||
// const {
|
||||
// $global: {
|
||||
// cubicBezierEaseInOut
|
||||
// },
|
||||
// $local: {
|
||||
// nodeColorHover,
|
||||
// nodeColorPressed,
|
||||
// nodeColorActive,
|
||||
// arrowColor,
|
||||
// nodeTextColor,
|
||||
// nodeTextColorDisabled,
|
||||
// borderRadiusSmall,
|
||||
// fontSize
|
||||
// }
|
||||
// } = props
|
||||
// return [
|
||||
|
||||
// ]
|
||||
// }
|
||||
// ])
|
||||
|
||||
Loading…
Reference in New Issue
Block a user