Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit a056973

Browse filesBrowse 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
Copy full SHA for a056973

File tree

6 files changed

+36
-16
lines changed
Filter options

6 files changed

+36
-16
lines changed

‎src/components/index.d.ts

Copy file name to clipboardExpand all lines: src/components/index.d.ts
+6-3Lines 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

Copy file name to clipboardExpand all lines: src/components/progress/CProgress.vue
+20-2Lines 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

Copy file name to clipboardExpand all lines: src/components/progress/CProgressBar.vue
+6-8Lines 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.injectedProps[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

Copy file name to clipboardExpand all lines: src/components/progress/shared-props.js
-2Lines 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

Copy file name to clipboardExpand all lines: src/components/progress/tests/CProgress.spec.js
+3-1Lines 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

Copy file name to clipboardExpand all lines: src/components/progress/tests/__snapshots__/CProgress.spec.js.snap
+1Lines 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)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.