8000 feat: CProgress: add size prop · devas-37/coreui-vue@a056973 · GitHub
[go: up one dir, main page]
Skip to content

Commit a056973

Browse files
woothuwoothu
committed
feat: CProgress: add size prop
- deprecated height prop - display warning message when it is used, - correct shared props, - update test and typings - cleanup
1 parent ede894f commit a056973

File tree

6 files changed

+36
-16
lines changed

6 files changed

+36
-16
lines changed

‎src/components/index.d.ts

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -446,8 +446,7 @@ export declare class CPagination extends Vue {
446446
responsive?: boolean
447447
}
448448

449-
export declare class CProgress extends Vue {
450-
height?: string
449+
export declare class CProgressBar extends Vue {
451450
color?: string
452451
striped?: boolean
453452
animated?: boolean
@@ -458,7 +457,11 @@ export declare class CProgress extends Vue {
458457
value?: number
459458
}
460459

461-
export declare class CProgressBar extends CProgress {}
460+
export declare class CProgress extends CProgressBar {
461+
height?: string
462+
size?: string
463+
}
464+
462465

463466
type ContentFlat = [NodeFlat]
464467
declare interface NodeFlat {

‎src/components/progress/CProgress.vue

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
<template>
2-
<div class="progress" :style="{ height }">
2+
<div
3+
:class="['progress', size && `progress-${size}`]"
4+
:style="{ height }"
5+
>
36
<slot>
47
<CProgressBar :value="value"/>
58
</slot>
@@ -8,12 +11,27 @@
811

912
<script>
1013
import CProgressBar from './CProgressBar'
11-
import props from './progress-props'
14+
import shared from './shared-props'
15+
16+
const props = {
17+
...shared,
18+
height: String,
19+
size: {
20+
type: String,
21+
validator: val => ['', 'xs', 'sm'].includes(val)
22+
},
23+
}
1224
1325
export default {
1426
name:'CProgress',
1527
components: { CProgressBar },
1628
props,
29+
mounted () {
30+
/* istanbul ignore next */
31+
if (this.height && process && process.env && process.env.NODE_ENV === 'development') {
32+
console.error("CProgress component: 'height' prop is deprecated and will be removed in the next version. Use 'size' prop instead or pass custom height in 'style' attribute.")
33+
}
34+
},
1735
provide () {
1836
const progress = {}
1937
Object.defineProperty(progress, 'props', {

‎src/components/progress/CProgressBar.vue

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,28 +12,26 @@
1212
</template>
1313

1414
<script>
15-
import props from './progress-props'
15+
import props from './shared-props'
16+
1617
export default {
1718
name: 'CProgressBar',
1819
props,
1920
inject: {
2021
progress: {
21-
default: undefined
22+
default: { props: {} }
2223
}
2324
},
2425
computed: {
2526
directlyDeclaredProps () {
2627
return Object.keys(this.$options.propsData)
2728
},
28-
injectedProps () {
29-
return this.progress && this.progress.props ? this.progress.props : {}
30-
},
3129
props () {
3230
return Object.keys(props).reduce((computedProps, key) => {
3331
const propIsDirectlyDeclared = this.directlyDeclaredProps.includes(key)
34-
const parentPropExists = this.injectedProps[key] !== undefined
35-
const propIsInherited = parentPropExists && !propIsDirectlyDeclared
36-
computedProps[key] = propIsInherited ? this.injectedP 6D40 rops[key] : this[key]
32+
const parentPropExists = this.progress.props[key] !== undefined
33+
const isInherited = parentPropExists && !propIsDirectlyDeclared
34+
computedProps[key] = isInherited ? this.progress.props[key] : this[key]
3735
return computedProps
3836
}, {})
3937
},

‎src/components/progress/progress-props.js renamed to ‎src/components/progress/shared-props.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
export default {
2-
height: String,
3-
// These props can be inherited via the child CProgressBar(s)
42
color: String,
53
striped: Boolean,
64
animated: Boolean,

‎src/components/progress/tests/CProgress.spec.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,9 @@ const defaultWrapper = mount(Component)
66
const customWrapper = mount(Component, {
77
propsData: {
88
color: 'black',
9-
value: 20
9+
value: 20,
10+
size: 'sm',
11+
height: '2rem'
1012
},
1113
attrs: {
1214
class: 'test'

‎src/components/progress/tests/__snapshots__/CProgress.spec.js.snap

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ exports[`CProgress renders correctly 1`] = `
2020
exports[`CProgress renders correctly 2`] = `
2121
<div
2222
class="test"
23+
style="height: 2rem;"
2324
>
2425
<div
2526
aria-valuemax="100"

0 commit comments

Comments
 (0)
0