Skip to content

chore: code refactoring to separate constants from utils and better code sharing #5772

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
Sep 16, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions .bundlewatch.config.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,23 +34,23 @@
},
{
"path": "./dist/bootstrap-vue.js",
"maxSize": "235 kB"
"maxSize": "240 kB"
},
{
"path": "./dist/bootstrap-vue.min.js",
"maxSize": "105 kB"
},
{
"path": "./dist/bootstrap-vue.common.js",
"maxSize": "320 kB"
"maxSize": "325 kB"
},
{
"path": "./dist/bootstrap-vue.common.min.js",
"maxSize": "200 kB"
},
{
"path": "./dist/bootstrap-vue.esm.js",
"maxSize": "320 kB"
"maxSize": "325 kB"
},
{
"path": "./dist/bootstrap-vue.esm.min.js",
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/play.vue
Original file line number Diff line number Diff line change
Expand Up @@ -356,7 +356,7 @@ const STORAGE_KEYS = {
// Maximum age of localStorage before we revert back to defaults
const STORAGE_MAX_RETENTION = 7 * 24 * 60 * 60 * 1000 // 7 days

// --- Helper functions ---
// --- Helper methods ---

// Remove a node from its parent's children
const removeNode = node => node && node.parentNode && node.parentNode.removeChild(node)
Expand Down
18 changes: 8 additions & 10 deletions docs/plugins/play.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,11 @@ const RX_NAME_DEFINITION = /<!-- .*\.vue -->/
const RX_TEMPLATE = /<template>([\s\S]*)<\/template>/
const RX_SCRIPT = /<script>([\s\S]*)<\/script>/

const CLASS_NAMES = {
editable: 'editable',
live: 'live',
error: 'error'
}
const CLASS_NAMES_EDITABLE = 'editable'
const CLASS_NAMES_LIVE = 'live'
const CLASS_NAMES_ERROR = 'error'

// --- Helper functions ---
// --- Helper methods ---

// Default "transpiler" function
let compiler = code => code
Expand Down Expand Up @@ -117,7 +115,7 @@ const processExamples = (el, binding, vnode) => {
hljs.highlightBlock(pre)

// Add editable class
pre.classList.add(CLASS_NAMES.editable)
pre.classList.add(CLASS_NAMES_EDITABLE)

// Store "previous" content on pre element
pre.$_v_play_content = pre.textContent.trim()
Expand All @@ -131,7 +129,7 @@ const processExamples = (el, binding, vnode) => {
// Enable live edit on double click
pre.ondblclick = async () => {
// Add live class
pre.classList.add(CLASS_NAMES.live)
pre.classList.add(CLASS_NAMES_LIVE)
// Make editable
pre.contentEditable = true

Expand All @@ -158,9 +156,9 @@ const processExamples = (el, binding, vnode) => {

// Toggle error class
if (vm === null) {
pre.classList.add(CLASS_NAMES.error)
pre.classList.add(CLASS_NAMES_ERROR)
} else {
pre.classList.remove(CLASS_NAMES.error)
pre.classList.remove(CLASS_NAMES_ERROR)
}
}, 500)
}
Expand Down
22 changes: 9 additions & 13 deletions src/components/alert/alert.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
import { NAME_ALERT } from '../../constants/components'
import Vue from '../../utils/vue'
import { getComponentConfig } from '../../utils/config'
import { requestAF } from '../../utils/dom'
import { isBoolean } from '../../utils/inspect'
import { isBoolean, isNumeric } from '../../utils/inspect'
import { toInteger } from '../../utils/number'
import BVTransition from '../../utils/bv-transition'
import normalizeSlotMixin from '../../mixins/normalize-slot'
import { BButtonClose } from '../button/button-close'

const NAME = 'BAlert'

// Convert `show` value to a number
const parseCountDown = show => {
if (show === '' || isBoolean(show)) {
Expand All @@ -30,12 +29,9 @@ const parseShow = show => {
return !!show
}

// Is a value number like (i.e. a number or a number as string)
const isNumericLike = value => !isNaN(toInteger(value))

// @vue/component
export const BAlert = /*#__PURE__*/ Vue.extend({
name: NAME,
name: NAME_ALERT,
mixins: [normalizeSlotMixin],
model: {
prop: 'show',
Expand All @@ -44,15 +40,15 @@ export const BAlert = /*#__PURE__*/ Vue.extend({
props: {
variant: {
type: String,
default: () => getComponentConfig(NAME, 'variant')
default: () => getComponentConfig(NAME_ALERT, 'variant')
},
dismissible: {
type: Boolean,
default: false
},
dismissLabel: {
type: String,
default: () => getComponentConfig(NAME, 'dismissLabel')
default: () => getComponentConfig(NAME_ALERT, 'dismissLabel')
},
show: {
type: [Boolean, Number, String],
Expand All @@ -78,7 +74,7 @@ export const BAlert = /*#__PURE__*/ Vue.extend({
},
countDown(newVal) {
this.clearCountDownInterval()
if (isNumericLike(this.show)) {
if (isNumeric(this.show)) {
// Ignore if this.show transitions to a boolean value.
this.$emit('dismiss-count-down', newVal)
if (this.show !== newVal) {
Expand All @@ -101,11 +97,11 @@ export const BAlert = /*#__PURE__*/ Vue.extend({
}
},
localShow(newVal) {
if (!newVal && (this.dismissible || isNumericLike(this.show))) {
if (!newVal && (this.dismissible || isNumeric(this.show))) {
// Only emit dismissed events for dismissible or auto dismissing alerts
this.$emit('dismissed')
}
if (!isNumericLike(this.show) && this.show !== newVal) {
if (!isNumeric(this.show) && this.show !== newVal) {
// Only emit booleans if we weren't passed a number via `this.show`
this.$emit('input', newVal)
}
Expand Down Expand Up @@ -158,7 +154,7 @@ export const BAlert = /*#__PURE__*/ Vue.extend({
},
attrs: { role: 'alert', 'aria-live': 'polite', 'aria-atomic': true }
},
[$dismissBtn, this.normalizeSlot('default')]
[$dismissBtn, this.normalizeSlot()]
)
$alert = [$alert]
}
Expand Down
12 changes: 5 additions & 7 deletions src/components/aspect/aspect.js
Original file line number Diff line number Diff line change
@@ -1,18 +1,16 @@
import { NAME_ASPECT } from '../../constants/components'
import { RX_ASPECT, RX_ASPECT_SEPARATOR } from '../../constants/regex'
import Vue from '../../utils/vue'
import { mathAbs } from '../../utils/math'
import { toFloat } from '../../utils/number'
import normalizeSlotMixin from '../../mixins/normalize-slot'

// --- Constants ---
const NAME = 'BAspect'
const CLASS_NAME = 'b-aspect'

const RX_ASPECT = /^\d+(\.\d*)?[/:]\d+(\.\d*)?$/
const RX_SEPARATOR = /[/:]/

// --- Main Component ---
export const BAspect = /*#__PURE__*/ Vue.extend({
name: NAME,
name: NAME_ASPECT,
mixins: [normalizeSlotMixin],
props: {
aspect: {
Expand All @@ -33,7 +31,7 @@ export const BAspect = /*#__PURE__*/ Vue.extend({
if (RX_ASPECT.test(aspect)) {
// Width and/or Height can be a decimal value below `1`, so
// we only fallback to `1` if the value is `0` or `NaN`
const [width, height] = aspect.split(RX_SEPARATOR).map(v => toFloat(v) || 1)
const [width, height] = aspect.split(RX_ASPECT_SEPARATOR).map(v => toFloat(v) || 1)
ratio = width / height
} else {
ratio = toFloat(aspect) || 1
Expand All @@ -52,7 +50,7 @@ export const BAspect = /*#__PURE__*/ Vue.extend({
staticClass: `${CLASS_NAME}-content flex-grow-1 w-100 mw-100`,
style: { marginLeft: '-100%' }
},
[this.normalizeSlot('default')]
[this.normalizeSlot()]
)
return h(this.tag, { staticClass: `${CLASS_NAME} d-flex` }, [$sizer, $content])
}
Expand Down
8 changes: 3 additions & 5 deletions src/components/avatar/avatar-group.js
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
import { NAME_AVATAR_GROUP } from '../../constants/components'
import Vue from '../../utils/vue'
import normalizeSlotMixin from '../../mixins/normalize-slot'
import { mathMax, mathMin } from '../../utils/math'
import { toFloat } from '../../utils/number'
import { computeSize } from './avatar'

// --- Constants ---
const NAME = 'BAvatarGroup'

// --- Main component ---
// @vue/component
export const BAvatarGroup = /*#__PURE__*/ Vue.extend({
name: NAME,
name: NAME_AVATAR_GROUP,
mixins: [normalizeSlotMixin],
provide() {
return { bvAvatarGroup: this }
Expand Down Expand Up @@ -60,7 +58,7 @@ export const BAvatarGroup = /*#__PURE__*/ Vue.extend({
},
render(h) {
const $inner = h('div', { staticClass: 'b-avatar-group-inner', style: this.paddingStyle }, [
this.normalizeSlot('default')
this.normalizeSlot()
])

return h(this.tag, { staticClass: 'b-avatar-group', attrs: { role: 'group' } }, [$inner])
Expand Down
15 changes: 7 additions & 8 deletions src/components/avatar/avatar.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { NAME_AVATAR } from '../../constants/components'
import { RX_NUMBER } from '../../constants/regex'
import Vue from '../../utils/vue'
import { getComponentConfig } from '../../utils/config'
import { isNumber, isString } from '../../utils/inspect'
Expand All @@ -12,13 +14,10 @@ import { BIconPersonFill } from '../../icons/icons'
import normalizeSlotMixin from '../../mixins/normalize-slot'

// --- Constants ---
const NAME = 'BAvatar'
const CLASS_NAME = 'b-avatar'

const SIZES = ['sm', null, 'lg']

const RX_NUMBER = /^[0-9]*\.?[0-9]+$/

const FONT_SIZE_SCALE = 0.4
const BADGE_FONT_SIZE_SCALE = FONT_SIZE_SCALE * 0.7

Expand All @@ -44,7 +43,7 @@ const props = {
},
variant: {
type: String,
default: () => getComponentConfig(NAME, 'variant')
default: () => getComponentConfig(NAME_AVATAR, 'variant')
},
size: {
type: [Number, String],
Expand Down Expand Up @@ -72,7 +71,7 @@ const props = {
},
badgeVariant: {
type: String,
default: () => getComponentConfig(NAME, 'badgeVariant')
default: () => getComponentConfig(NAME_AVATAR, 'badgeVariant')
},
badgeTop: {
type: Boolean,
Expand Down Expand Up @@ -104,7 +103,7 @@ export const computeSize = value => {
// --- Main component ---
// @vue/component
export const BAvatar = /*#__PURE__*/ Vue.extend({
name: NAME,
name: NAME_AVATAR,
mixins: [normalizeSlotMixin],
inject: {
bvAvatarGroup: { default: null }
Expand Down Expand Up @@ -193,9 +192,9 @@ export const BAvatar = /*#__PURE__*/ Vue.extend({
const ariaLabel = this.ariaLabel || null

let $content = null
if (this.hasNormalizedSlot('default')) {
if (this.hasNormalizedSlot()) {
// Default slot overrides props
$content = h('span', { staticClass: 'b-avatar-custom' }, [this.normalizeSlot('default')])
$content = h('span', { staticClass: 'b-avatar-custom' }, [this.normalizeSlot()])
} else if (src) {
$content = h('img', {
style: variant ? {} : { width: '100%', height: '100%' },
Expand Down
12 changes: 4 additions & 8 deletions src/components/badge/badge.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,11 @@
import { mergeData } from 'vue-functional-data-merge'
import Vue from '../../utils/vue'
import { NAME_BADGE } from '../../constants/components'
import Vue, { mergeData } from '../../utils/vue'
import { getComponentConfig } from '../../utils/config'
import { omit } from '../../utils/object'
import { pluckProps } from '../../utils/props'
import { isLink } from '../../utils/router'
import { BLink, props as BLinkProps } from '../link/link'

// --- Constants ---

const NAME = 'BBadge'

// --- Props ---

const linkProps = omit(BLinkProps, ['event', 'routerTag'])
Expand All @@ -23,7 +19,7 @@ export const props = {
},
variant: {
type: String,
default: () => getComponentConfig(NAME, 'variant')
default: () => getComponentConfig(NAME_BADGE, 'variant')
},
pill: {
type: Boolean,
Expand All @@ -35,7 +31,7 @@ export const props = {
// --- Main component ---
// @vue/component
export const BBadge = /*#__PURE__*/ Vue.extend({
name: NAME,
name: NAME_BADGE,
functional: true,
props,
render(h, { props, data, children }) {
Expand Down
6 changes: 3 additions & 3 deletions src/components/breadcrumb/breadcrumb-item.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import Vue from '../../utils/vue'
import { mergeData } from 'vue-functional-data-merge'
import { NAME_BREADCRUMB_ITEM } from '../../constants/components'
import Vue, { mergeData } from '../../utils/vue'
import { BBreadcrumbLink, props } from './breadcrumb-link'

// @vue/component
export const BBreadcrumbItem = /*#__PURE__*/ Vue.extend({
name: 'BBreadcrumbItem',
name: NAME_BREADCRUMB_ITEM,
functional: true,
props,
render(h, { props, data, children }) {
Expand Down
6 changes: 3 additions & 3 deletions src/components/breadcrumb/breadcrumb-link.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { mergeData } from 'vue-functional-data-merge'
import Vue from '../../utils/vue'
import { NAME_BREADCRUMB_LINK } from '../../constants/components'
import Vue, { mergeData } from '../../utils/vue'
import { htmlOrText } from '../../utils/html'
import { omit } from '../../utils/object'
import { pluckProps } from '../../utils/props'
Expand All @@ -26,7 +26,7 @@ export const props = {
// --- Main component ---
// @vue/component
export const BBreadcrumbLink = /*#__PURE__*/ Vue.extend({
name: 'BBreadcrumbLink',
name: NAME_BREADCRUMB_LINK,
functional: true,
props,
render(h, { props: suppliedProps, data, children }) {
Expand Down
6 changes: 3 additions & 3 deletions src/components/breadcrumb/breadcrumb.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import Vue from '../../utils/vue'
import { mergeData } from 'vue-functional-data-merge'
import { NAME_BREADCRUMB } from '../../constants/components'
import Vue, { mergeData } from '../../utils/vue'
import { isArray, isObject } from '../../utils/inspect'
import { toString } from '../../utils/string'
import { BBreadcrumbItem } from './breadcrumb-item'
Expand All @@ -13,7 +13,7 @@ export const props = {

// @vue/component
export const BBreadcrumb = /*#__PURE__*/ Vue.extend({
name: 'BBreadcrumb',
name: NAME_BREADCRUMB,
functional: true,
props,
render(h, { props, data, children }) {
Expand Down
Loading