Skip to content
This repository was archived by the owner on Sep 20, 2024. It is now read-only.

Commit e4cd0ff

Browse files
codebender828codebender828
committed
fix(islider): use api
1 parent f8273e3 commit e4cd0ff

File tree

9 files changed

+81
-94
lines changed

9 files changed

+81
-94
lines changed

‎packages/chakra-ui-core/src/CCircularProgress/CCircularProgress.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const CCircularProgressLabel = {
3535
}
3636
},
3737
render (h) {
38-
return h(this.as || 'div', {
38+
return h(this.as, {
3939
class: [this.className],
4040
style: {
4141
fontVariantNumeric: 'tabular-nums'

‎packages/chakra-ui-core/src/CInputAddon/CInputAddon.js

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,10 @@
77
* @see Source https://github.com/chakra-ui/chakra-ui-vue/blob/master/packages/chakra-ui-core/src/CInputAddon/CInputAddon.js
88
*/
99

10-
import styleProps from '../config/props'
1110
import useInputStyle from '../CInput/utils/input.styles'
1211
import { forwardProps, createStyledAttrsMixin } from '../utils'
1312

1413
const addonProps = {
15-
...styleProps,
1614
placement: {
1715
type: String,
1816
default: 'left'
@@ -65,7 +63,7 @@ const CInputAddon = {
6563
}
6664
},
6765
render (h) {
68-
return h(this.as || 'div', {
66+
return h(this.as, {
6967
class: [this.className],
7068
attrs: this.computedAttrs,
7169
on: this.computedListeners

‎packages/chakra-ui-core/src/CModal/CModal.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -566,7 +566,7 @@ const CModalBody = {
566566
},
567567
render (h) {
568568
const { bodyId } = this.context
569-
return h(this.as || 'div', {
569+
return h(this.as, {
570570
class: [this.className],
571571
attrs: {
572572
id: bodyId,

‎packages/chakra-ui-core/src/CPopover/CPopover.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -576,7 +576,7 @@ const CPopoverBody = {
576576
}
577577
},
578578
render (h) {
579-
return h(this.as || 'div', {
579+
return h(this.as, {
580580
class: [this.className],
581581
attrs: {
582582
...this.computedAttrs,

‎packages/chakra-ui-core/src/CPopover/CPopover.stories.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ storiesOf('UI | Popover', module)
117117
.add('Customizing the Popover', () => ({
118118
components: { CButton, CPopover, CPopoverTrigger, CPopoverContent, CPopoverHeader, CPopoverBody, CPopoverArrow, CPopoverCloseButton, CPopoverFooter, CBox },
119119
template: `
120-
<CPopover>
120+
<CPopover :closeOnBlur="false">
121121
<CPopoverTrigger>
122122
<CBox
123123
tabIndex="0"

‎packages/chakra-ui-core/src/CPopper/CPopper.js

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
import merge from 'lodash-es/merge'
99
import { createPopper } from '@popperjs/core'
10-
import { createChainedFunction, forwardProps, isVueComponent, canUseDOM, useId, HTMLElement } from '../utils'
10+
import { createChainedFunction, isVueComponent, canUseDOM, useId, HTMLElement } from '../utils'
1111
import ClickOutside from '../directives/clickoutside.directive'
1212

1313
import CBox from '../CBox'
@@ -57,7 +57,10 @@ const CPopper = {
5757
ClickOutside
5858
},
5959
props: {
60-
as: String,
60+
as: {
61+
type: [String, Object],
62+
default: 'div'
63+
},
6164
isOpen: Boolean,
6265
placement: {
6366
type: String,
@@ -297,7 +300,7 @@ const CPopper = {
297300
style: {
298301
display: this.isOpen ? 'unset' : 'none'
299302
},
300-
props: { as: this.as || 'div' },
303+
props: { as: this.as },
301304
directives: [{
302305
name: 'click-outside',
303306
value: this.wrapClose
@@ -318,15 +321,17 @@ const CPopper = {
318321

319322
const CPopperArrow = {
320323
name: 'CPopperArrow',
321-
render (h) {
324+
functional: true,
325+
render (h, { data, ...rest }) {
322326
return h(CBox, {
327+
...rest,
323328
attrs: {
329+
...data.attrs,
324330
'x-arrow': true,
325331
'data-popper-arrow': true,
326332
role: 'presentation',
327333
'data-chakra-component': 'CPopperArrow'
328-
},
329-
props: forwardProps(this.$props)
334+
}
330335
})
331336
}
332337
}

‎packages/chakra-ui-core/src/CProgress/CProgress.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ const CProgressIndicator = {
113113
}
114114
},
115115
render (h) {
116-
return h(this.as || 'div', {
116+
return h(this.as, {
117117
class: [this.className],
118118
attrs: {
119119
...this.computedAttrs,

‎packages/chakra-ui-core/src/CSlider/CSlider.js

Lines changed: 60 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,8 @@
88
* @see Source https://github.com/chakra-ui/chakra-ui-vue/blob/master/packages/chakra-ui-core/src/CSlider/CSlider.js
99
*/
1010

11-
import { baseProps } from '../config'
12-
import { isDef, valueToPercent, useId, getElById, forwardProps } from '../utils'
11+
import { isDef, valueToPercent, useId, getElById, createStyledAttrsMixin } from '../utils'
1312
import { percentToValue } from '../utils/transform'
14-
import styleProps from '../config/props'
15-
16-
import CBox from '../CBox'
17-
import CPseudoBox from '../CPseudoBox'
1813
import useSliderStyle from './utils/slider.styles'
1914
import { clampValue, roundValueToStep } from './utils/slider.utils'
2015

@@ -27,14 +22,12 @@ import { clampValue, roundValueToStep } from './utils/slider.utils'
2722
* @see Docs https://vue.chakra-ui.com/slider
2823
*/
2924
const CSlider = {
30-
name: 'CSlider',
31-
inject: ['$chakraTheme', '$chakraColorMode'],
25+
mixins: [createStyledAttrsMixin('CSlider')],
3226
model: {
3327
prop: 'value',
3428
event: 'change'
3529
},
3630
props: {
37-
...baseProps,
3831
value: Number,
3932
defaultValue: Number,
4033
isDisabled: Boolean,
@@ -119,6 +112,12 @@ const CSlider = {
119112
})
120113
return rootStyle
121114
},
115+
componentStyles () {
116+
return {
117+
...this.sliderStyles,
118+
py: 3
119+
}
120+
},
122121
valueText () {
123122
return this.getAriaValueText
124123
? this.getAriaValueText(this.actualValue)
@@ -280,21 +279,18 @@ const CSlider = {
280279
render (h) {
281280
const children = this.$slots.default || []
282281

283-
return h(CBox, {
284-
props: {
285-
...this.$props,
286-
...this.sliderStyles,
287-
py: 3
288-
},
282+
return h(this.as, {
283+
class: [this.className],
289284
attrs: {
290285
role: 'presentation',
291286
'aria-disabled': this.isDisabled,
292-
'data-chakra-component': 'CSlider'
287+
...this.computedAttrs
293288
},
294289
style: {
295290
touchAction: 'none'
296291
},
297-
nativeOn: {
292+
on: {
293+
...this.computedListeners,
298294
mousedown: this.handleMouseDown,
299295
touchstart: this.handleMouseDown,
300296
mouseleave: this.handleMouseUp,
@@ -327,20 +323,13 @@ const CSlider = {
327323
* @see Docs https://vue.chakra-ui.com/slider
328324
*/
329325
const CSliderTrack = {
330-
name: 'CSliderTrack',
331-
inject: ['$SliderContext', '$chakraTheme', '$chakraColorMode'],
332-
props: baseProps,
326+
mixins: [createStyledAttrsMixin('CSliderTrack')],
327+
inject: ['$SliderContext'],
333328
computed: {
334329
context () {
335330
return this.$SliderContext()
336331
},
337-
theme () {
338-
return this.$chakraTheme()
339-
},
340-
colorMode () {
341-
return this.$chakraColorMode()
342-
},
343-
trackStyles () {
332+
componentStyles () {
344333
const { trackStyle } = useSliderStyle({
345334
...this.context,
346335
theme: this.theme,
@@ -351,17 +340,16 @@ const CSliderTrack = {
351340
},
352341
render (h) {
353342
const { isDisabled, trackId } = this.context
354-
return h(CBox, {
355-
props: {
356-
...this.trackStyles,
357-
...forwardProps(this.$props)
358-
},
343+
return h(this.as, {
344+
class: [this.className],
359345
attrs: {
346+
...this.computedAttrs,
360347
id: trackId,
361348
'data-slider-track': '',
362349
'aria-disabled': isDisabled,
363350
'data-chakra-component': 'CSliderTrack'
364-
}
351+
},
352+
on: this.computedListeners
365353
}, this.$slots.default)
366354
}
367355
}
@@ -375,20 +363,13 @@ const CSliderTrack = {
375363
* @see Docs https://vue.chakra-ui.com/slider
376364
*/
377365
const CSliderFilledTrack = {
378-
name: 'CSliderFilledTrack',
379-
inject: ['$SliderContext', '$chakraTheme', '$chakraColorMode'],
380-
props: styleProps,
366+
mixins: [createStyledAttrsMixin('CSliderFilledTrack', true)],
367+
inject: ['$SliderContext'],
381368
computed: {
382369
context () {
383370
return this.$SliderContext()
384371
},
385-
theme () {
386-
return this.$chakraTheme()
387-
},
388-
colorMode () {
389-
return this.$chakraColorMode()
390-
},
391-
filledTrackStyles () {
372+
componentStyles () {
392373
const { filledTrackStyle } = useSliderStyle({
393374
...this.context,
394375
theme: this.theme,
@@ -399,16 +380,15 @@ const CSliderFilledTrack = {
399380
},
400381
render (h) {
401382
const { isDisabled } = this.context
402-
return h(CPseudoBox, {
403-
props: {
404-
...this.filledTrackStyles,
405-
...forwardProps(this.$props)
406-
},
383+
return h(this.as, {
384+
class: [this.className],
407385
attrs: {
386+
...this.computedAttrs,
408387
'aria-disabled': isDisabled,
409388
'data-slider-filled-track': '',
410389
'data-chakra-component': 'CSliderFilledTrack'
411-
}
390+
},
391+
on: this.computedListeners
412392
}, this.$slots.default)
413393
}
414394
}
@@ -422,18 +402,36 @@ const CSliderFilledTrack = {
422402
* @see Docs https://vue.chakra-ui.com/slider
423403
*/
424404
const CSliderThumb = {
425-
name: 'CSliderThumb',
426-
inject: ['$SliderContext', '$chakraTheme', '$chakraColorMode'],
427-
props: baseProps,
405+
mixins: [createStyledAttrsMixin('CSliderThumb', true)],
406+
inject: ['$SliderContext'],
428407
computed: {
429408
context () {
430409
return this.$SliderContext()
431410
},
432-
theme () {
433-
return this.$chakraTheme()
434-
},
435-
colorMode () {
436-
return this.$chakraColorMode()
411+
componentStyles () {
412+
const {
413+
orientation,
414+
trackPercent,
415+
size,
416+
color
417+
} = this.context
418+
419+
const { thumbStyle } = useSliderStyle({
420+
trackPercent,
421+
orientation,
422+
color,
423+
size,
424+
theme: this.theme,
425+
colorMode: this.colorMode
426+
})
427+
428+
return {
429+
d: 'flex',
430+
alignItems: 'center',
431+
outline: 'none',
432+
justifyContent: 'center',
433+
...thumbStyle
434+
}
437435
}
438436
},
439437
render (h) {
@@ -446,32 +444,14 @@ const CSliderThumb = {
446444
max,
447445
valueText,
448446
orientation,
449-
trackPercent,
450-
size,
451-
color,
452447
value,
453448
ariaLabelledBy
454449
} = this.context
455450

456-
const { thumbStyle } = useSliderStyle({
457-
trackPercent,
458-
orientation,
459-
color,
460-
size,
461-
theme: this.theme,
462-
colorMode: this.colorMode
463-
})
464-
465-
return h(CPseudoBox, {
466-
props: {
467-
d: 'flex',
468-
alignItems: 'center',
469-
outline: 'none',
470-
justifyContent: 'center',
471-
...thumbStyle,
472-
...forwardProps(this.$props)
473-
},
451+
return h(this.as, {
452+
class: [this.className],
474453
attrs: {
454+
...this.computedAttrs,
475455
id: thumbId,
476456
role: 'slider',
477457
tabIndex: isDisabled ? undefined : 0,
@@ -484,7 +464,8 @@ const CSliderThumb = {
484464
'aria-labelledby': ariaLabelledBy,
485465
'data-chakra-component': 'CSliderThumb'
486466
},
487-
nativeOn: {
467+
on: {
468+
...this.computedListeners,
488469
keydown: onKeyDown,
489470
focus: onFocus
490471
}

‎packages/chakra-ui-core/src/utils/components.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,10 @@ export const createStyledAttrsMixin = (name, isPseudo) => ({
4747
}
4848
},
4949
props: {
50-
as: [String, Object],
50+
as: {
51+
type: [String, Object],
52+
default: 'div'
53+
},
5154
to: String
5255
},
5356
computed: {

0 commit comments

Comments
 (0)