Skip to content

Commit 7df8570

Browse files
committed
feat: add CSpinner component
1 parent 637fc71 commit 7df8570

File tree

3 files changed

+47
-0
lines changed

3 files changed

+47
-0
lines changed

src/components/Spinner/CSpinner.js

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { mergeData } from 'vue-functional-data-merge'
2+
export default {
3+
name: 'CSpinner',
4+
functional: true,
5+
props: {
6+
grow: Boolean,
7+
variant: String,
8+
small: Boolean,
9+
tag: {
10+
type: String,
11+
default: 'span'
12+
},
13+
labelText: {
14+
type: String,
15+
default: 'Loading...'
16+
},
17+
noLabel: Boolean
18+
},
19+
render(h, { props, data, slots }) {
20+
let label = h(false)
21+
if (!props.noLabel)
22+
label = h('span', { staticClass: 'sr-only' }, props.labelText)
23+
const type = props.grow ? 'grow' : 'border'
24+
return h(
25+
props.tag,
26+
mergeData(data, {
27+
attrs: {
28+
role: 'status',
29+
'aria-hidden': label ? null : 'true'
30+
},
31+
class: [`spinner-${type}`,
32+
{
33+
[`spinner-${type}-sm`]: props.small,
34+
[`text-${props.variant}`]: Boolean(props.variant)
35+
}
36+
]
37+
}),
38+
[label]
39+
)
40+
}
41+
}

src/components/Spinner/index.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import CSpinner from './CSpinner'
2+
3+
export {
4+
CSpinner
5+
}

src/components/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,4 @@ export * from './Table'
2222
export * from './Form'
2323
export * from './Collapse'
2424
export * from './Modal'
25+
export * from './Spinner'

0 commit comments

Comments
 (0)