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(base-loading): support icon switch transition

Browse Source
This commit is contained in:
07akioni 2020-12-23 23:57:53 +08:00
parent 48b8ab6f2c
commit 95c7f9a164
4 changed files with 139 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/_base/loading/src/Loading.vue
View File

@ -6,30 +6,41 @@
stroke
}"
>
<svg
class="n-base-loading-circular"
:viewBox="`0 0 ${radius * 2} ${radius * 2}`"
>
<circle
:style="{
strokeWidth
}"
class="n-base-loading-circular-path"
:cx="radius"
:cy="radius"
fill="none"
:r="radius - strokeWidth / 2"
/>
</svg>
<n-icon-switch-transition>
<svg
v-if="show"
key="loading"
class="n-base-loading-circular n-base-loading__icon"
:viewBox="`0 0 ${radius * 2} ${radius * 2}`"
>
<circle
:style="{
strokeWidth
}"
class="n-base-loading-circular-path"
:cx="radius"
:cy="radius"
fill="none"
:r="radius - strokeWidth / 2"
/>
</svg>
<div v-else key="placeholder" class="n-base-loading__placeholder">
<slot />
</div>
</n-icon-switch-transition>
</div>
</template>
<script>
import { NIconSwitchTransition } from '../../../_base'
import { withCssr } from '../../../_mixins'
import styles from './styles/'
export default {
name: 'BaseLoading',
components: {
NIconSwitchTransition
},
mixins: [withCssr(styles)],
props: {
radius: {
@ -38,7 +49,7 @@ export default {
},
theme: {
type: String,
default: ''
default: undefined
},
strokeWidth: {
type: Number,
@ -46,7 +57,11 @@ export default {
},
stroke: {
type: String,
default: null
default: undefined
},
show: {
type: Boolean,
default: true
}
}
}

37
src/_base/loading/src/styles/themed-base.cssr.js
View File

@ -1,25 +1,46 @@
import { cTB, c, cB } from '../../../../_utils/cssr'
import { cTB, c, cB, cE } from '../../../../_utils/cssr'
import iconSwitchTransition from '../../../../_styles/transitions/icon-switch'
const dashOffset = 500
export default c([
({ props }) => {
const {
cubicBezierEaseInOut
} = props.$global
const {
color
} = props.$local
$global: {
cubicBezierEaseInOut
},
$local: {
color
}
} = props
return [
cTB('base-loading', {
raw: `
line-height: 1;
stroke: ${color};
position: relative;
line-height: 0;
width: 1em;
height: 1em;
transition: stroke .3s ${cubicBezierEaseInOut};
`
}, [
cE('placeholder', {
position: 'absolute',
left: '50%',
top: '50%',
transform: 'translateX(-50%) translateY(-50%)'
}, [
iconSwitchTransition({
left: '50%',
top: '50%',
originalTransform: 'translateX(-50%) translateY(-50%)'
})
]),
cE('icon', [
iconSwitchTransition()
]),
cB('base-loading-circular', {
raw: `
stroke: ${color};
height: 100%;
width: 100%;
animation: n-base-loading-rotate 1.5s linear infinite;

62
src/_base/selection/src/Selection.vue
View File

@ -37,17 +37,13 @@
>
{{ option.label }}
</n-tag>
<n-base-clear-button
v-if="showArrow"
class="n-base-selection__mark"
<suffix
:theme="theme"
:show="mergedClearable && selected"
:loading="loading"
:show-arrow="showArrow"
:show-clear="mergedClearable && selected"
@clear="handleClear"
>
<n-icon depth="4">
<chevron-down-icon />
</n-icon>
</n-base-clear-button>
/>
</div>
<div class="n-base-selection__placeholder">
{{ placeholder }}
@ -91,17 +87,13 @@
class="n-base-selection-input-tag__mirror"
>{{ pattern ? pattern : '&nbsp;' }}</span>
</div>
<n-base-clear-button
v-if="showArrow"
class="n-base-selection__mark"
<suffix
:theme="theme"
:show="mergedClearable && selected"
:loading="loading"
:show-arrow="showArrow"
:show-clear="mergedClearable && selected"
@clear="handleClear"
>
<n-icon depth="4">
<chevron-down-icon />
</n-icon>
</n-base-clear-button>
/>
</div>
<div class="n-base-selection__placeholder">
{{ placeholder }}
@ -138,17 +130,13 @@
>
{{ filterablePlaceholder }}
</div>
<n-base-clear-button
v-if="showArrow"
class="n-base-selection__mark"
<suffix
:theme="theme"
:show="mergedClearable && selected"
:loading="loading"
:show-arrow="showArrow"
:show-clear="mergedClearable && selected"
@clear="handleClear"
>
<n-icon depth="4">
<chevron-down-icon />
</n-icon>
</n-base-clear-button>
/>
</div>
</template>
<template v-else-if="!multiple && !filterable">
@ -168,17 +156,13 @@
>
{{ placeholder }}
</div>
<n-base-clear-button
v-if="showArrow"
class="n-base-selection__mark"
<suffix
:theme="theme"
:show="mergedClearable && selected"
:loading="loading"
:show-arrow="showArrow"
:show-clear="mergedClearable && selected"
@clear="handleClear"
>
<n-icon depth="4">
<chevron-down-icon />
</n-icon>
</n-base-clear-button>
/>
</div>
</template>
<div class="n-base-selection__border" />
@ -188,8 +172,7 @@
</template>
<script>
import NBaseClearButton from '../../clear-button'
import { ChevronDownIcon } from '../../icons'
import Suffix from './Suffix.vue'
import { NTag } from '../../../tag/index.js'
import { withCssr } from '../../../_mixins'
import styles from './styles/index.js'
@ -197,8 +180,7 @@ import styles from './styles/index.js'
export default {
name: 'BaseSelection',
components: {
ChevronDownIcon,
NBaseClearButton,
Suffix,
NTag
},
mixins: [withCssr(styles)],

56
src/_base/selection/src/Suffix.vue Normal file
View File

@ -0,0 +1,56 @@
<template>
<n-base-loading
:theme="theme"
class="n-base-selection__mark"
:stroke-width="20"
:show="loading"
>
<n-base-clear-button
v-if="showArrow"
:theme="theme"
:show="showClear"
@clear="onClear"
>
<n-icon depth="4">
<chevron-down-icon />
</n-icon>
</n-base-clear-button>
</n-base-loading>
</template>
<script>
import NBaseClearButton from '../../clear-button'
import NBaseLoading from '../../loading'
import { ChevronDownIcon } from '../../icons'
export default {
name: 'BaseSelectionSuffix',
components: {
ChevronDownIcon,
NBaseLoading,
NBaseClearButton
},
props: {
theme: {
type: String,
default: undefined
},
showArrow: {
type: Boolean,
default: undefined
},
showClear: {
type: Boolean,
default: undefined
},
loading: {
type: Boolean,
default: false
},
onClear: {
type: Function,
default: undefined
}
}
}
</script>