8000 feat(refactor): code improvements for easier Vue 3 migration · bootstrap-vue/bootstrap-vue@1593500 · GitHub
[go: up one dir, main page]
Skip to content

Commit 1593500

Browse files
jacobmllr95jacobmllr95
committed
feat(refactor): code improvements for easier Vue 3 migration
1 parent 41a4d9e commit 1593500

File tree

353 files changed

+8422
-9311
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

353 files changed

+8422
-9311
lines changed

‎src/_custom-controls.scss

Lines changed: 0 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -28,115 +28,3 @@
2828
}
2929
}
3030
}
31-
32-
// Shared BVFormBtnLab 6BAE elControl styling
33-
// Currently used by BFormTimepicker and BFormDatepicker
34-
// Does not apply to button-only styling
35-
.b-form-btn-label-control.form-control {
36-
// Remove background validation images and padding from
37-
// main wrapper as they will be present in the inner label element
38-
background-image: none;
39-
padding: 0;
40-
41-
@at-root {
42-
// Handle input-group padding overrides
43-
.input-group & {
44-
padding: 0;
45-
}
46-
}
47-
48-
@at-root {
49-
// Prevent the button/label from reversing order on in horizontal RTL mode
50-
[dir="rtl"] &,
51-
&[dir="rtl"] {
52-
flex-direction: row-reverse;
53-
54-
> label {
55-
text-align: right;
56-
}
57-
}
58-
}
59-
60-
> .btn {
61-
line-height: 1;
62-
font-size: inherit;
63-
box-shadow: none !important;
64-
border: 0;
65-
66-
&:disabled {
67-
pointer-events: none;
68-
}
69-
}
70-
71-
&.is-valid > .btn {
72-
color: $form-feedback-valid-color;
73-
}
74-
75-
&.is-invalid > .btn {
76-
color: $form-feedback-invalid-color;
77-
}
78-
79-
> .dropdown-menu {
80-
padding: 0.5rem;
81-
}
82-
83-
> label {
84-
outline: 0;
85-
padding-left: 0.25rem;
86-
margin: 0;
87-
border: 0;
88-
font-size: inherit;
89-
@if $enable-pointer-cursor-for-buttons {
90-
cursor: pointer;
91-
}
92-
// Set a minimum height, as we have height set to auto
93-
// (to allow the content to wrap if needed)
94-
// We subtract off the border, as we have border set to 0
95-
min-height: calc(#{$input-height} - #{$input-height-border});
96-
97-
&.form-control-sm {
98-
min-height: calc(#{$input-height-sm} - #{$input-height-border});
99-
}
100-
101-
&.form-control-lg {
102-
min-height: calc(#{$input-height-lg} - #{$input-height-border});
103-
}
104-
105-
@at-root {
106-
// Handle input group sizing
107-
.input-group.input-group-sm & {
108-
min-height: calc(#{$input-height-sm} - #{$input-height-border});
109-
padding-top: $input-padding-y-sm;
110-
padding-bottom: $input-padding-y-sm;
111-
}
112-
113-
.input-group.input-group-lg & {
114-
min-height: calc(#{$input-height-lg} - #{$input-height-border});
115-
padding-top: $input-padding-y-lg;
116-
padding-bottom: $input-padding-y-lg;
117-
}
118-
}
119-
}
120-
121-
// Disabled and read-only styling
122-
&[aria-disabled="true"],
123-
&[aria-readonly="true"] {
124-
background-color: $input-disabled-bg;
125-
opacity: 1;
126-
}
127-
128-
&[aria-disabled="true"] {
129-
pointer-events: none;
130-
131-
> label {
132-
cursor: default;
133-
}
134-
}
135-
}
136-
137-
// Button only mode menu padding overrides
138-
.b-form-btn-label-control.btn-group {
139-
> .dropdown-menu {
140-
padding: 0.5rem;
141-
}
142-
}

‎src/components/alert/alert.js

Lines changed: 89 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,36 @@
1-
import Vue from '../../vue'
1+
import { COMPONENT_UID_KEY, Vue } from '../../vue'
22
import { NAME_ALERT } from '../../constants/components'
3-
import { makePropsConfigurable } from '../../utils/config'
3+
import {
4+
PROP_TYPE_BOOLEAN,
5+
PROP_TYPE_BOOLEAN_NUMBER_STRING,
6+
PROP_TYPE_STRING
7+
} from '../../constants/props'
48
import { requestAF } from '../../utils/dom'
59
import { isBoolean, isNumeric } from '../../utils/inspect'
10+
import { makeModelMixin } from '../../utils/model'
611
import { toInteger } from '../../utils/number'
7-
import BVTransition from '../../utils/bv-transition'
8-
import normalizeSlotMixin from '../../mixins/normalize-slot'
12+
import { sortKeys } from '../../utils/object'
13+
import { makeProp, makePropsConfigurable } from '../../utils/props'
14+
import { normalizeSlotMixin } from '../../mixins/normalize-slot'
915
import { BButtonClose } from '../button/button-close'
16+
import { BVTransition } from '../transition/bv-transition'
17+
18+
// --- Constants ---
19+
20+
const EVENT_NAME_DISMISSED = 'dismissed'
21+
const EVENT_NAME_DISMISS_COUNT_DOWN = 'dismiss-count-down'
22+
23+
const {
24+
mixin: modelMixin,
25+
props: modelProps,
26+
prop: MODEL_PROP_NAME,
27+
event: MODEL_EVENT_NAME
28+
} = makeModelMixin('show', {
29+
type: PROP_TYPE_BOOLEAN_NUMBER_STRING,
30+
defaultValue: false
31+
})
32+
33+
// --- Helper methods ---
1034

1135
// Convert `show` value to a number
1236
const parseCountDown = show => {
@@ -29,61 +53,49 @@ const parseShow = show => {
2953
return !!show
3054
}
3155

56+
// --- Props ---
57+
58+
export const props = makePropsConfigurable(
59+
sortKeys({
60+
...modelProps,
61+
dismissLabel: makeProp(PROP_TYPE_STRING, 'Close'),
62+
dismissible: makeProp(PROP_TYPE_BOOLEAN, false),
63+
fade: makeProp(PROP_TYPE_BOOLEAN, false),
64+
variant: makeProp(PROP_TYPE_STRING, 'info')
65+
}),
66+
NAME_ALERT
67+
)
68+
69+
// --- Main component ---
70+
3271
// @vue/component
3372
export const BAlert = /*#__PURE__*/ Vue.extend({
3473
name: NAME_ALERT,
35-
mixins: [normalizeSlotMixin],
36-
model: {
37-
prop: 'show',
38-
event: 'input'
39-
},
40-
props: makePropsConfigurable(
41-
{
42-
variant: {
43-
type: String,
44-
default: 'info'
45-
},
46-
dismissible: {
47-
type: Boolean,
48-
default: false
49-
},
50-
dismissLabel: {
51-
type: String,
52-
default: 'Close'
53-
},
54-
show: {
55-
type: [Boolean, Number, String],
56-
default: false
57-
},
58-
fade: {
59-
type: Boolean,
60-
default: false
61-
}
62-
},
63-
NAME_ALERT
64-
),
74+
mixins: [modelMixin, normalizeSlotMixin],
75+
props,
6576
data() {
6677
return {
6778
countDown: 0,
6879
// If initially shown, we need to set these for SSR
69-
localShow: parseShow(this.show)
80+
localShow: parseShow(this[MODEL_PROP_NAME])
7081
}
7182
},
7283
watch: {
73-
show(newVal) {
74-
this.countDown = parseCountDown(newVal)
75-
this.localShow = parseShow(newVal)
84+
[MODEL_PROP_NAME](newValue) {
85+
this.countDown = parseCountDown(newValue)
86+
this.localShow = parseShow(newValue)
7687
},
77-
countDown(newVal) {
88+
countDown(newValue) {
7889
this.clearCountDownInterval()
79-
if (isNumeric(this.show)) {
90+
const show = this[MODEL_PROP_NAME]
91+
if (isNumeric(show)) {
8092
// Ignore if this.show transitions to a boolean value.
81-
this.$emit('dismiss-count-down', newVal)
82-
if (this.show !== newVal) {
93+
this.$emit(EVENT_NAME_DISMISS_COUNT_DOWN, newValue)
94+
if (show !== newValue) {
8395
// Update the v-model if needed
84-
this.$emit('input', newVal)
96+
this.$emit(MODEL_EVENT_NAME, newValue)
8597
}
86-
if (newVal > 0) {
98+
if (newValue > 0) {
8799
this.localShow = true
88100
this.$_countDownTimeout = setTimeout(() => {
89101
this.countDown--
@@ -98,27 +110,25 @@ export const BAlert = /*#__PURE__*/ Vue.extend({
98110
}
99111
}
100112
},
101-
localShow(newVal) {
102-
if (!newVal && (this.dismissible || isNumeric(this.show))) {
103-
// Only emit dismissed events for dismissible or auto dismissing alerts
104-
this.$emit('dismissed')
113+
localShow(newValue) {
114+
const show = this[MODEL_PROP_NAME]
115+
// Only emit dismissed events for dismissible or auto-dismissing alerts
116+
if (!newValue && (this.dismissible || isNumeric(show))) {
117+
this.$emit(EVENT_NAME_DISMISSED)
105118
}
106-
if (!isNumeric(this.show) && this.show !== newVal) {
107-
// Only emit booleans if we weren't passed a number via `this.show`
108-
this.$emit('input', newVal)
119+
// Only emit booleans if we weren't passed a number via v-model
120+
if (!isNumeric(show) && show !== newValue) {
121+
this.$emit(MODEL_EVENT_NAME, newValue)
109122
}
110123
}
111124
},
112125
created() {
113126
// Create private non-reactive props
114127
this.$_filterTimer = null
115128

116-
this.countDown = parseCountDown(this.show)
117-
this.localShow = parseShow(this.show)
118-
},
119-
mounted() {
120-
this.countDown = parseCountDown(this.show)
121-
this.localShow = parseShow(this.show)
129+
const show = this[MODEL_PROP_NAME]
130+
this.countDown = parseCountDown(show)
131+
this.localShow = parseShow(show)
122132
},
123133
beforeDestroy() {
124134
this.clearCountDownInterval()
@@ -135,32 +145,42 @@ export const BAlert = /*#__PURE__*/ Vue.extend({
135145
}
136146
},
137147
render(h) {
138-
let $alert // undefined
148+
let $alert = h()
139149
if (this.localShow) {
140-
let $dismissBtn = h()
141-
if (this.dismissible) {
150+
const { dismissible, variant } = this
151+
152+
let $dismissButton = h()
153+
if (dismissible) {
142154
// Add dismiss button
143-
$dismissBtn = h(
155+
$dismissButton = h(
144156
BButtonClose,
145-
{ attrs: { 'aria-label': this.dismissLabel }, on: { click: this.dismiss } },
157+
{
158+
attrs: { 'aria-label': this.dismissLabel },
159+
on: { click: this.dismiss }
160+
},
146161
[this.normalizeSlot('dismiss')]
147162
)
148163
}
164+
149165
$alert = h(
150166
'div',
151167
{
152-
key: this._uid,
153168
staticClass: 'alert',
154169
class: {
155-
'alert-dismissible': this.dismissible,
156-
[`alert-${this.variant}`]: this.variant
170+
'alert-dismissible': dismissible,
171+
[`alert-${variant}`]: !!variant
157172
},
158-
attrs: { role: 'alert', 'aria-live': 'polite', 'aria-atomic': true }
173+
attrs: {
174+
role: 'alert',
175+
'aria-live': 'polite',
176+
'aria-atomic': true
177+
},
178+
key: this[COMPONENT_UID_KEY]
159179
},
160-
[$dismissBtn, this.normalizeSlot()]
180+
[$dismissButton, this.normalizeSlot()]
161181
)
162-
$alert = [$alert]
163182
}
164-
return h(BVTransition, { props: { noFade: !this.fade } }, $alert)
183+
184+
return h(BVTransition, { props: { noFade: !this.fade } }, [$alert])
165185
}
166186
})

‎src/components/alert/alert.spec.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -196,8 +196,8 @@ describe('alert', () => {
196196
expect(wrapper.classes()).toContain('alert-dismissible')
197197
expect(wrapper.classes()).toContain('alert')
198198
expect(wrapper.find('button').exists()).toBe(true)
199-
expect(wrapper.emitted('dismissed')).not.toBeDefined()
200-
expect(wrapper.emitted('input')).not.toBeDefined()
199+
expect(wrapper.emitted('dismissed')).toBeUndefined()
200+
expect(wrapper.emitted('input')).toBeUndefined()
201201

202202
await wrapper.find('button').trigger('click')
203203

@@ -236,7 +236,7 @@ describe('alert', () => {
236236
await waitRAF()
237237

238238
// Dismissed won't be emitted unless dismissible=true or show is a number
239-
expect(wrapper.emitted('dismissed')).not.toBeDefined()
239+
expect(wrapper.emitted('dismissed')).toBeUndefined()
240240

241241
expect(wrapper.element.nodeType).toBe(Node.COMMENT_NODE)
242242

@@ -256,7 +256,7 @@ describe('alert', () => {
256256

257257
await waitNT(wrapper.vm)
258258

259-
expect(wrapper.emitted('dismissed')).not.toBeDefined()
259+
expect(wrapper.emitted('dismissed')).toBeUndefined()
260260
expect(wrapper.emitted('dismiss-count-down')).toBeDefined()
261261
expect(wrapper.emitted('dismiss-count-down').length).toBe(1)
262262
expect(wrapper.emitted('dismiss-count-down')[0][0]).toBe(3) // 3 - 0
@@ -301,7 +301,7 @@ describe('alert', () => {
301301

302302
await waitNT(wrapper.vm)
303303

304-
expect(wrapper.emitted('dismissed')).not.toBeDefined()
304+
expect(wrapper.emitted('dismissed')).toBeUndefined()
305305
expect(wrapper.emitted('dismiss-count-down')).toBeDefined()
306306
expect(wrapper.emitted('dismiss-count-down').length).toBe(1)
307307
expect(wrapper.emitted('dismiss-count-down')[0][0]).toBe(3) // 3 - 0
@@ -346,7 +346,7 @@ describe('alert', () => {
346346

347347
await waitNT(wrapper.vm)
348348

349-
expect(wrapper.emitted('dismissed')).not.toBeDefined()
349+
expect(wrapper.emitted('dismissed')).toBeUndefined()
350350
expect(wrapper.emitted('dismiss-count-down')).toBeDefined()
351351
expect(wrapper.emitted('dismiss-count-down').length).toBe(1)
352352
expect(wrapper.emitted('dismiss-count-down')[0][0]).toBe(2) // 2 - 0
@@ -409,7 +409,7 @@ describe('alert', () => {
409409

410410
await waitNT(wrapper.vm)
411411

412-
expect(wrapper.emitted('dismissed')).not.toBeDefined()
412+
expect(wrapper.emitted('dismissed')).toBeUndefined()
413413
expect(wrapper.emitted('dismiss-count-down')).toBeDefined()
414414
expect(wrapper.emitted('dismiss-count-down').length).toBe(1)
415415
expect(wrapper.emitted('dismiss-count-down')[0][0]).toBe(2) // 2 - 0

0 commit comments

Comments
 (0)
0