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

refactor(upload): new theme

Browse Source
This commit is contained in:
07akioni 2021-01-08 18:09:56 +08:00
parent 67182ccd2b
commit bd525f96fd
11 changed files with 240 additions and 260 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/styles.js
View File

@ -83,4 +83,4 @@ export { tooltipDark, tooltipLight } from './tooltip/styles'
// export { transferDark, transferLight } from './transfer/styles'
// export { treeDark, treeLight } from './tree/styles'
// export { typographyDark, typographyLight } from './typography/styles'
export { uploadDark, uploadLight } from './upload/styles'
// export { uploadDark, uploadLight } from './upload/styles'

4
src/styles.new.js
View File

@ -63,6 +63,7 @@ import { timelineDark } from './timeline/styles'
import { transferDark } from './transfer/styles'
import { typographyDark } from './typography/styles'
import { treeDark } from './tree/styles'
import { uploadDark } from './upload/styles'
export const darkTheme = {
common: commonDark,
@ -129,5 +130,6 @@ export const darkTheme = {
Timeline: timelineDark,
Transfer: transferDark,
Tree: treeDark,
Typography: typographyDark
Typography: typographyDark,
Upload: uploadDark
}

56
src/upload/src/Upload.vue
View File

@ -2,11 +2,11 @@
<div
class="n-upload"
:class="{
[`n-${mergedTheme}-theme`]: mergedTheme,
'n-upload--dragger-inside': draggerInside,
'n-upload--drag-over': dragOver,
'n-upload--disabled': disabled
}"
:style="cssVars"
>
<input
ref="input"
@ -40,12 +40,14 @@
</template>
<script>
import { defineComponent, computed } from 'vue'
import { createId } from 'seemly'
import { configurable, themeable, withCssr } from '../../_mixins'
import { useTheme } from '../../_mixins'
import { warn } from '../../_utils'
import NUploadFile from './UploadFile.vue'
import { NFadeInExpandTransition } from '../../_base'
import styles from './styles'
import { uploadLight } from '../styles'
import NUploadFile from './UploadFile.vue'
import style from './styles/index.cssr.js'
/**
* fils status ['pending', 'uploading', 'finished', 'removed', 'error']
@ -151,13 +153,12 @@ function submit (
componentInstance.change(fileAfterChange)
}
export default {
export default defineComponent({
name: 'Upload',
components: {
NUploadFile,
NFadeInExpandTransition
},
mixins: [configurable, themeable, withCssr(styles)],
provide () {
return {
NUpload: this
@ -250,6 +251,47 @@ export default {
default: false
}
},
setup (props) {
const themeRef = useTheme('Upload', 'Upload', style, uploadLight, props)
return {
cssVars: computed(() => {
const {
common: { cubicBezierEaseInOut },
self: {
draggerColor,
draggerBorder,
draggerBorderHover,
itemColorHover,
itemColorHoverError,
itemTextColorError,
itemTextColorSuccess,
itemTextColor,
itemIconColor,
itemDisabledOpacity,
lineHeight,
borderRadius,
fontSize
}
} = themeRef.value
return {
'--bezier': cubicBezierEaseInOut,
'--border-radius': borderRadius,
'--dragger-border': draggerBorder,
'--dragger-border-hover': draggerBorderHover,
'--dragger-color': draggerColor,
'--font-size': fontSize,
'--item-color-hover': itemColorHover,
'--item-color-hover-error': itemColorHoverError,
'--item-disabled-opacity': itemDisabledOpacity,
'--item-icon-color': itemIconColor,
'--item-text-color': itemTextColor,
'--item-text-color-error': itemTextColorError,
'--item-text-color-success': itemTextColorSuccess,
'--line-height': lineHeight
}
})
}
},
data () {
return {
internalFileList: [],
@ -382,5 +424,5 @@ export default {
}
}
}
}
})
</script>

6
src/upload/src/UploadDragger.vue
View File

@ -5,7 +5,9 @@
</template>
<script>
export default {
import { defineComponent } from 'vue'
export default defineComponent({
name: 'UploadDragger',
inject: {
NUpload: {
@ -18,5 +20,5 @@ export default {
beforeUnmount () {
this.NUpload && (this.NUpload.draggerInside = false)
}
}
})
</script>

9
src/upload/src/UploadFile.vue
View File

@ -54,8 +54,7 @@
</template>
<script>
import { NButton } from '../../button'
import NUploadProgress from './UploadProgress.vue'
import { defineComponent } from 'vue'
import {
CancelIcon,
DeleteIcon,
@ -63,10 +62,12 @@ import {
DownloadIcon
} from '../../_base/icons'
import { NIcon } from '../../icon'
import { NButton } from '../../button'
import { NIconSwitchTransition } from '../../_base'
import { warn } from '../../_utils'
import NUploadProgress from './UploadProgress.vue'
export default {
export default defineComponent({
name: 'UploadFile',
components: {
NButton,
@ -172,5 +173,5 @@ export default {
this.handleRemove(Object.assign({}, file))
}
}
}
})
</script>

5
src/upload/src/UploadProgress.vue
View File

@ -12,10 +12,11 @@
</template>
<script>
import { defineComponent } from 'vue'
import { NFadeInExpandTransition } from '../../_base'
import { NProgress } from '../../progress'
export default {
export default defineComponent({
name: 'UploadProgress',
components: {
NProgress,
@ -57,5 +58,5 @@ export default {
created () {
this.postponedShow = this.show
}
}
})
</script>

155
src/upload/src/styles/index.cssr.js Normal file
View File

@ -0,0 +1,155 @@
import { c, cM, cB, cE } from '../../../_utils/cssr'
import fadeInHeightExpand from '../../../_styles/transitions/fade-in-height-expand'
import createIconSwitchTransition from '../../../_styles/transitions/icon-switch'
export default cB('upload', [
cE('file-input', `
display: block;
width: 0;
height: 0;
opacity: 0;
`),
cE('activator', `
display: inline-block;
`),
cM('dragger-inside', [
cE('activator', `
display: block;
`)
]),
cB('upload-dragger', `
cursor: pointer;
box-sizing: border-box;
width: 100%;
text-align: center;
border-radius: var(--border-radius);
padding: 24px;
transition:
border-color .3s var(--bezier),
background-color .3s var(--bezier);
background-color: var(--dragger-color);
border: var(--dragger-border);
`, [
c('&:hover', `
border: var(--dragger-border-hover);
`)
]),
cB('upload-file-list', `
margin-top: 8px;
line-height: var(--line-height);
`, [
cB('upload-file', `
display: block;
box-sizing: border-box;
cursor: default;
padding: 0px 12px 0 6px;
transition: background-color .3s var(--bezier);
border-radius: var(--border-radius);
`, [
fadeInHeightExpand(),
cB('progress', `
box-sizing: border-box;
padding-bottom: 6px;
margin-bottom: 6px;
`, [
fadeInHeightExpand({
foldPadding: true
})
]),
c('&:hover', `
background-color: var(--item-color-hover);
`, [
cB('upload-file-info', [
cE('action', `
opacity: 1;
`)
])
]),
cM('error-status', [
c('&:hover', `
background-color: var(--item-color-hover-error);
`),
cB('upload-file-info', [
cE('name', `
color: var(--item-text-color-error);
`)
])
]),
cM('with-url', `
cursor: pointer;
`, [
cB('upload-file-info', [
cE('name', `
text-decoration: underline;
color: var(--item-text-color-success);
text-decoration-color: var(--item-text-color-success);
`)
])
]),
cB('upload-file-info', `
position: relative;
padding-top: 6px;
padding-bottom: 6px;
`, [
cE('action', `
padding-top: inherit;
padding-bottom: inherit;
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 80px;
display: flex;
align-items: center;
transition: opacity .2s var(--bezier);
flex-direction: row-reverse;
opacity: 0;
`, [
cB('button', [
cB('icon', [
c('svg', [
createIconSwitchTransition()
])
])
])
]),
cE('name', `
text-overflow: ellipsis;
overflow: hidden;
text-decoration: underline;
text-decoration-color: transparent;
font-size: var(--font-size);
transition:
color .3s var(--bezier),
text-decoration-color .3s var(--bezier);
color: var(--item-text-color);
`, [
cB('icon', `
font-size: 18px;
margin-right: 2px;
vertical-align: middle;
color: var(--item-icon-color);
`)
])
])
])
]),
cM('disabled', `
opacity: var(--item-disabled-opacity);
`, [
cE('activator', `
cursor: not-allowed;
`),
cB('upload-file-list', `
cursor: not-allowed;
`),
cB('upload-dragger', `
cursor: not-allowed;
`)
]),
cM('drag-over', [
cB('upload-dragger', `
border: var(--dragger-border-hover);
`)
])
])

9
src/upload/src/styles/index.js
View File

@ -1,9 +0,0 @@
import themedBaseStyle from './themed-base.cssr.js'
export default [
{
key: 'mergedTheme',
watch: ['mergedTheme'],
CNode: themedBaseStyle
}
]

220
src/upload/src/styles/themed-base.cssr.js
View File

@ -1,220 +0,0 @@
import { c, cM, cTB, cB, cE } from '../../../_utils/cssr'
import fadeInHeightExpand from '../../../_styles/transitions/fade-in-height-expand'
import createIconSwitchTransition from '../../../_styles/transitions/icon-switch'
export default c([
({ props }) => {
const {
$global: {
cubicBezierEaseInOut
},
$local: {
draggerColor,
draggerBorder,
draggerBorderHover,
itemColorHover,
itemColorHoverError,
itemTextColorError,
itemTextColorSuccess,
itemTextColor,
itemIconColor,
itemDisabledOpacity,
lineHeight,
borderRadius,
fontSize
}
} = props
const iconSwitchTransition = createIconSwitchTransition()
return cTB('upload', [
cE('file-input', {
raw: `
display: block;
width: 0;
height: 0;
opacity: 0;
`
}),
cE('activator', {
raw: `
display: inline-block;
`
}),
cM('dragger-inside', [
cE('activator', {
raw: `
display: block;
`
})
]),
cB('upload-dragger', {
raw: `
cursor: pointer;
box-sizing: border-box;
width: 100%;
text-align: center;
border-radius: ${borderRadius};
padding: 24px;
transition:
border-color .3s ${cubicBezierEaseInOut},
background-color .3s ${cubicBezierEaseInOut};
background-color: ${draggerColor};
border: ${draggerBorder};
`
}, [
c('&:hover', {
border: draggerBorderHover
})
]),
cB('upload-file-list', {
raw: `
margin-top: 8px;
line-height: ${lineHeight};
`
}, [
cB('upload-file', {
raw: `
display: block;
box-sizing: border-box;
cursor: default;
padding: 0px 12px 0 6px;
transition: background-color .3s ${cubicBezierEaseInOut};
border-radius: ${borderRadius};
`
}, [
fadeInHeightExpand(),
cB('progress', {
raw: `
box-sizing: border-box;
padding-bottom: 6px;
margin-bottom: 6px;
`
}, [
fadeInHeightExpand({
foldPadding: true
})
]),
c('&:hover', {
raw: `
background-color: ${itemColorHover};
`
}, [
cB('upload-file-info', [
cE('action', {
raw: `
opacity: 1;
`
})
])
]),
cM('error-status', [
c('&:hover', {
raw: `
background-color: ${itemColorHoverError};
`
}),
cB('upload-file-info', [
cE('name', {
raw: `color: ${itemTextColorError}`
})
])
]),
cM('with-url', {
raw: `
cursor: pointer;
`
}, [
cB('upload-file-info', [
cE('name', {
raw: `
text-decoration: underline;
color: ${itemTextColorSuccess};
text-decoration-color: ${itemTextColorSuccess};
`
})
])
]),
cB('upload-file-info', {
raw: `
position: relative;
padding-top: 6px;
padding-bottom: 6px;
`
}, [
cE('action', {
raw: `
padding-top: inherit;
padding-bottom: inherit;
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 80px;
display: flex;
align-items: center;
transition: opacity .2s ${cubicBezierEaseInOut};
flex-direction: row-reverse;
opacity: 0;
`
}, [
cB('button', [
cB('icon', [
c('svg', [
iconSwitchTransition
])
])
])
]),
cE('name', {
raw: `
text-overflow: ellipsis;
overflow: hidden;
text-decoration: underline;
text-decoration-color: transparent;
font-size: ${fontSize};
transition:
color .3s ${cubicBezierEaseInOut},
text-decoration-color .3s ${cubicBezierEaseInOut};
color: ${itemTextColor};
`
}, [
cB('icon', {
raw: `
font-size: 18px;
margin-right: 2px;
vertical-align: middle;
color: ${itemIconColor};
`
})
])
])
])
]),
cM('disabled', {
raw: `
opacity: ${itemDisabledOpacity}
`
}, [
cE('activator', {
raw: `
cursor: not-allowed;
`
}),
cB('upload-file-list', {
raw: `
cursor: not-allowed;
`
}),
cB('upload-dragger', {
raw: `
cursor: not-allowed;
`
})
]),
cM('drag-over', [
cB('upload-dragger', {
border: draggerBorderHover
})
])
])
}
])

17
src/upload/styles/dark.js
View File

@ -1,15 +1,18 @@
import create from '../../_styles/utils/create-component-base'
import { changeColor } from 'seemly'
import { baseDark } from '../../_styles/base'
import { buttonDark } from '../../button/styles'
import { iconDark } from '../../icon/styles'
import { progressDark } from '../../progress/styles'
import { commonDark } from '../../_styles/new-common'
export default create({
export default {
name: 'Upload',
theme: 'dark',
peer: [baseDark, buttonDark, iconDark, progressDark],
getLocalVars (vars) {
common: commonDark,
peers: {
Button: buttonDark,
Icon: iconDark,
Progress: progressDark
},
self (vars) {
const {
iconColorOverlay,
primaryColor,
@ -42,4 +45,4 @@ export default create({
itemDisabledOpacity: opacityDisabled
}
}
})
}

17
src/upload/styles/light.js
View File

@ -1,15 +1,18 @@
import create from '../../_styles/utils/create-component-base'
import { changeColor } from 'seemly'
import { baseLight } from '../../_styles/base'
import { buttonLight } from '../../button/styles'
import { iconLight } from '../../icon/styles'
import { progressLight } from '../../progress/styles'
import { commonLight } from '../../_styles/new-common'
export default create({
export default {
name: 'Upload',
theme: 'light',
peer: [baseLight, buttonLight, iconLight, progressLight],
getLocalVars (vars) {
common: commonLight,
peers: {
Button: buttonLight,
Icon: iconLight,
Progress: progressLight
},
self (vars) {
const {
iconColorOverlay,
primaryColor,
@ -42,4 +45,4 @@ export default create({
itemDisabledOpacity: opacityDisabled
}
}
})
}