Skip to content

Commit 3b12a73

Browse files
jacobmllr95Hiws
jacobmllr95
and
Hiws
authored
feat(b-form-file): improved drag and drop handling (closes #3673) (#5727)
* feat(b-form-file): improved drag and drop handling * Update form-file.js * Update form-file.js * Further implementation * Update form-file.spec.js * add global `stopEvent()` util * Improve tests * Update form-file.spec.js * Update form-file.js * Update form-file.js * Update form-file.js * Update form-file.js * Update common-props.json * Update form-file.js * Update package.json * Update form-file.js * Update README.md * Update form-file.js * Update index.d.ts * Update README.md * Keep current event prevent behavior * Update form-spinbutton.js Co-authored-by: Hiws <hiws@live.dk>
1 parent 7e18c61 commit 3b12a73

Some content is hidden

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

51 files changed

+1106
-552
lines changed

‎.eslintrc.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ module.exports = {
2222
ignoreRestSiblings: false
2323
}
2424
],
25+
'object-shorthand': ['error', 'properties'],
2526
'spaced-comment': 'off', // needed to ignore `/*#__PURE__*/` comments
2627
'vue/html-self-closing': [
2728
'error',

‎docs/common-props.json

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"id": {
3-
"description": "Used to set the 'id' attribute on the rendered content, and used as the base to generate any additional element IDs as needed"
3+
"description": "Used to set the `id` attribute on the rendered content, and used as the base to generate any additional element IDs as needed"
44
},
55
"variant": {
66
"description": "Applies one of the Bootstrap theme color variants to the component"
@@ -114,22 +114,22 @@
114114
"description": "Set the size of the component's appearance. 'sm', 'md' (default), or 'lg'"
115115
},
116116
"required": {
117-
"description": "Adds the 'required' attribute to the form control"
117+
"description": "Adds the `required` attribute to the form control"
118118
},
119119
"form": {
120-
"description": "ID of the form that the form control belongs to. Sets the 'form' attribute on the control"
120+
"description": "ID of the form that the form control belongs to. Sets the `form` attribute on the control"
121121
},
122122
"name": {
123-
"description": "Sets the value of the 'name' attribute on the form control"
123+
"description": "Sets the value of the `name` attribute on the form control"
124124
},
125125
"placeholder": {
126-
"description": "Sets the 'placeholder' attribute value on the form control"
126+
"description": "Sets the `placeholder` attribute value on the form control"
127127
},
128128
"disabled": {
129129
"description": "When set to 'true', disables the component's functionality and places it in a disabled state"
130130
},
131131
"readonly": {
132-
"description": "Sets the 'readonly' attribute on the form control"
132+
"description": "Sets the `readonly` attribute on the form control"
133133
},
134134
"plaintext": {
135135
"description": "Set the form control as readonly and renders the control to look like plain text (no borders)"
@@ -138,25 +138,25 @@
138138
"description": "Sets the 'autocomplete' attribute value on the form control"
139139
},
140140
"autofocus": {
141-
"description": "When set to 'true', attempts to auto-focus the control when it is mounted, or re-activated when in a keep-alive. Does not set the 'autofocus' attribute on the control"
141+
"description": "When set to `true`, attempts to auto-focus the control when it is mounted, or re-activated when in a keep-alive. Does not set the `autofocus` attribute on the control"
142142
},
143143
"state": {
144-
"description": "Controls the validation state appearance of the component. 'true' for valid, 'false' for invalid', or 'null' for no validation state"
144+
"description": "Controls the validation state appearance of the component. `true` for valid, `false` for invalid, or `null` for no validation state"
145145
},
146146
"options": {
147147
"description": "Array of items to render in the component"
148148
},
149149
"valueField": {
150-
"description": "Field name in the 'options' array that should be used for the value"
150+
"description": "Field name in the `options` array that should be used for the value"
151151
},
152152
"textField": {
153-
"description": "Field name in the 'options' array that should be used for the text label"
153+
"description": "Field name in the `options` array that should be used for the text label"
154154
},
155155
"htmlField": {
156-
"description": "Field name in the 'options' array that should be used for the html label instead of text field. Use with caution."
156+
"description": "Field name in the `options` array that should be used for the html label instead of text field. Use with caution"
157157
},
158158
"disabledField": {
159-
"description": "Field name in the 'options' array that should be used for the disabled state"
159+
"description": "Field name in the `options` array that should be used for the disabled state"
160160
},
161161
"plain": {
162162
"description": "Render the form control in plain mode, rather than custom styled mode"
@@ -165,52 +165,52 @@
165165
"description": "Renders the content of the component in-place in the DOM, rather than portalling it to be appended to the body element"
166166
},
167167
"src": {
168-
"description": "URL to set for the 'src' attribute"
168+
"description": "URL to set for the `src` attribute"
169169
},
170170
"alt": {
171-
"description": "Value to set for the 'alt' attribute"
171+
"description": "Value to set for the `alt` attribute"
172172
},
173173
"role": {
174-
"description": "Sets the ARIA attribute 'role' to a specific value"
174+
"description": "Sets the ARIA attribute `role` to a specific value"
175175
},
176176
"ariaRole": {
177-
"description": "Sets the ARIA attribute 'role' to a specific value"
177+
"description": "Sets the ARIA attribute `role` to a specific value"
178178
},
179179
"ariaLabel": {
180-
"description": "Sets the value of 'aria-label' attribute on the rendered element"
180+
"description": "Sets the value of `aria-label` attribute on the rendered element"
181181
},
182182
"ariaLabelledby": {
183-
"description": "The ID of the element that provides a label for this component. Used as the value for the 'aria-labelledby' attribute"
183+
"description": "The ID of the element that provides a label for this component. Used as the value for the `aria-labelledby` attribute"
184184
},
185185
"ariaDescribedby": {
186-
"description": "The ID of the element that provides additional context for this component. Used as the value for the 'aria-describedby' attribute"
186+
"description": "The ID of the element that provides additional context for this component. Used as the value for the `aria-describedby` attribute"
187187
},
188188
"ariaLive": {
189-
"description": "When the rendered element is an aria-live region (for screen reader users), set to either 'polite' or 'assertive'"
189+
"description": "When the rendered element is an `aria-live` region (for screen reader users), set to either 'polite' or 'assertive'"
190190
},
191191
"fade": {
192-
"description": "When set to 'true', enables the fade animation/transition on the component"
192+
"description": "When set to `true`, enables the fade animation/transition on the component"
193193
},
194194
"noFade": {
195-
"description": "When set to 'true', disables the fade animation/transition on the component"
195+
"description": "When set to `true`, disables the fade animation/transition on the component"
196196
},
197197
"active": {
198-
"description": "When set to 'true', places the component in the active state with active styling"
198+
"description": "When set to `true`, places the component in the active state with active styling"
199199
},
200200
"href": {
201201
"description": "<b-link> prop: Denotes the target URL of the link for standard a links"
202202
},
203203
"rel": {
204-
"description": "<b-link> prop: Sets the 'rel' attribute on the rendered link"
204+
"description": "<b-link> prop: Sets the `rel` attribute on the rendered link"
205205
},
206206
"target": {
207-
"description": "<b-link> prop: Sets the 'target' attribute on the rendered link"
207+
"description": "<b-link> prop: Sets the `target` attribute on the rendered link"
208208
},
209209
"to": {
210-
"description": "<router-link> prop: Denotes the target route of the link. When clicked, the value of the to prop will be passed to router.push() internally, so the value can be either a string or a Location descriptor object"
210+
"description": "<router-link> prop: Denotes the target route of the link. When clicked, the value of the to prop will be passed to `router.push()` internally, so the value can be either a string or a Location descriptor object"
211211
},
212212
"replace": {
213-
"description": "<router-link> prop: Setting the replace prop will call 'router.replace()' instead of 'router.push()' when clicked, so the navigation will not leave a history record"
213+
"description": "<router-link> prop: Setting the replace prop will call `router.replace()` instead of `router.push()` when clicked, so the navigation will not leave a history record"
214214
},
215215
"append": {
216216
"description": "<router-link> prop: Setting append prop always appends the relative path to the current path"
@@ -225,17 +225,17 @@
225225
"description": "<router-link> prop: Configure the active CSS class applied when the link is active with exact match. Typically you will want to set this to class name 'active'"
226226
},
227227
"routerTag": {
228-
"description": "<router-link> prop: Specify which tag to render, and it will still listen to click events for navigation. 'router-tag' translates to the tag prop on the final rendered router-link. Typically you should use the default value"
228+
"description": "<router-link> prop: Specify which tag to render, and it will still listen to click events for navigation. `router-tag` translates to the tag prop on the final rendered `<router-link>`. Typically you should use the default value"
229229
},
230230
"event": {
231231
"description": "<router-link> prop: Specify the event that triggers the link. In most cases you should leave this as the default"
232232
},
233233
"prefetch": {
234-
"description": "<nuxt-link> prop: To improve the responsiveness of your Nuxt.js applications, when the link will be displayed within the viewport, Nuxt.js will automatically prefetch the code splitted page. Setting 'prefetch' to 'true' or 'false' will overwrite the default value of 'router.prefetchLinks'",
234+
"description": "<nuxt-link> prop: To improve the responsiveness of your Nuxt.js applications, when the link will be displayed within the viewport, Nuxt.js will automatically prefetch the code splitted page. Setting `prefetch` to `true` or `false` will overwrite the default value of `router.prefetchLinks`",
235235
"version": "2.15.0"
236236
},
237237
"noPrefetch": {
238-
"description": "<nuxt-link> prop: To improve the responsiveness of your Nuxt.js applications, when the link will be displayed within the viewport, Nuxt.js will automatically prefetch the code splitted page. Setting 'no-prefetch' will disabled this feature for the specific link"
238+
"description": "<nuxt-link> prop: To improve the responsiveness of your Nuxt.js applications, when the link will be displayed within the viewport, Nuxt.js will automatically prefetch the code splitted page. Setting `no-prefetch` will disabled this feature for the specific link"
239239
},
240240
"routerComponentName": {
241241
"description": "<b-link> prop: BootstrapVue auto detects between `<router-link>` and `<nuxt-link>`. In cases where you want to use a 3rd party link component based on `<router-link>`, set this prop to the component name. e.g. set it to 'g-link' if you are using Gridsome (note only `<router-link>` specific props are passed to the component)",

‎docs/components/contributors.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -229,7 +229,7 @@ export default {
229229
const fallbackUrl = slug ? `https://opencollective.com/${slug}` : null
230230
// Return the normalized result
231231
return {
232-
slug: slug,
232+
slug,
233233
name: entry.fromAccount.name,
234234
// type: 'ORGANIZATION', 'INDIVIDUAL'
235235
type: entry.fromAccount.type,
@@ -245,10 +245,10 @@ export default {
245245
status: entry.status,
246246
// For recurring donations, this is the installment amount
247247
// For one time donations, this is the donation amount (most recent)
248-
amount: amount,
248+
amount,
249249
// For recurring donations, this is the total amount donated
250250
// For users that donate multiple times, this will be the total of all one time donations
251-
totalAmount: totalAmount,
251+
totalAmount,
252252
// For recurring donations, this is how often the donation is received
253253
frequency: entry.frequency,
254254
// We now have sponsor tiers, but some appear as

‎docs/pages/play.vue

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -524,37 +524,37 @@ export default {
524524
oWarn = window.console.warn
525525
oError = window.console.error
526526
oClear = window.console.clear
527-
} catch (e) {}
527+
} catch {}
528528
return {
529-
info: function() {
529+
info() {
530530
try {
531531
logger('info', ...arguments)
532532
oInfo.apply(oConsole, arguments)
533-
} catch (e) {}
533+
} catch {}
534534
},
535-
log: function() {
535+
log() {
536536
try {
537537
logger('info', ...arguments)
538538
oLog.apply(oConsole, arguments)
539-
} catch (e) {}
539+
} catch {}
540540
},
541-
warn: function() {
541+
warn() {
542542
try {
543543
logger('warning', ...arguments)
544544
oWarn.apply(oConsole, arguments)
545-
} catch (e) {}
545+
} catch {}
546546
},
547-
error: function() {
547+
error() {
548548
try {
549549
logger('danger', ...arguments)
550550
oError.apply(oConsole, arguments)
551-
} catch (e) {}
551+
} catch {}
552552
},
553-
clear: function() {
553+
clear() {
554554
try {
555555
clear()
556556
oClear.apply(oConsole)
557-
} catch (e) {}
557+
} catch {}
558558
}
559559
}
560560
}
@@ -651,10 +651,10 @@ export default {
651651
vm.$destroy()
652652
removeNode(vm.$el)
653653
vm.$el.innerHTML = ''
654-
} catch (err) {}
654+
} catch {}
655655
try {
656656
parent.$destroy()
657-
} catch (err) {}
657+
} catch {}
658658
}
659659
this.playVM = vm = null
660660
this.$refs.result.innerHTML = ''

‎package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,6 @@
151151
"nuxt": "^2.14.4",
152152
"postcss-cli": "^7.1.2",
153153
"prettier": "1.14.3",
154-
"regenerator-runtime": "^0.13.7",
155154
"require-context": "^1.1.0",
156155
"rollup": "^2.26.11",
157156
"rollup-plugin-babel": "^4.4.0",

‎scripts/create-icons.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,7 @@ const processFile = (file, data) =>
176176
// Remove leading/trailing whitespace
177177
.trim()
178178
// Add to the iconsData object
179-
data.icons[componentName] = { name: name, content: content }
179+
data.icons[componentName] = { name, content }
180180
data.componentNames.push(componentName)
181181
// Resolve
182182
resolve()

‎scripts/create-web-types.js

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
// Creates a web-types.json, tags.json and attributes.json files and places them in /dist
2-
require('regenerator-runtime/runtime')
32
const path = require('path')
43
const fs = require('fs')
54
const requireContext = require('require-context')
@@ -166,7 +165,7 @@ const processComponentMeta = (meta, groupRef, groupDescription, docUrl) => {
166165
name: propName,
167166
value: {
168167
kind: 'expression',
169-
type: type
168+
type
170169
},
171170
default: computePropDefault($prop),
172171
'doc-url': docUrl
@@ -212,7 +211,7 @@ const processComponentMeta = (meta, groupRef, groupDescription, docUrl) => {
212211
}
213212
if (Array.isArray(eventObj.args)) {
214213
event.arguments = eventObj.args.map((arg, index) => {
215-
arg = typeof arg === 'object' ? arg : { arg: arg }
214+
arg = typeof arg === 'object' ? arg : { arg }
216215
const name = arg.arg || (arg.type ? computePropType(arg) : undefined) || 'arg' + index
217216
const argument = {
218217
name: name.charAt(0).toLowerCase() + name.slice(1),
@@ -448,7 +447,7 @@ try {
448447
const type = (attrObj.value || { type: 'any' }).type
449448
veturAttributes[`${tag}/${kebabCase(attrObj.name)}`] = {
450449
description: attrObj.description || `One of: ${type.split('|').join(' or ')}`,
451-
type: type
450+
type
452451
}
453452
})
454453
})

‎src/components/button-toolbar/button-toolbar.js

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import Vue from '../../utils/vue'
22
import KeyCodes from '../../utils/key-codes'
33
import { attemptFocus, contains, isVisible, selectAll } from '../../utils/dom'
4+
import { stopEvent } from '../../utils/events'
45
import normalizeSlotMixin from '../../mixins/normalize-slot'
56

67
// --- Constants ---
@@ -13,13 +14,6 @@ const ITEM_SELECTOR = [
1314
'input[type="radio"]:not(.disabled)'
1415
].join(',')
1516

16-
// --- Utility methods ---
17-
18-
const stopEvent = evt => {
19-
evt.preventDefault()
20-
evt.stopPropagation()
21-
}
22-
2317
// --- Main component ---
2418

2519
// @vue/component

‎src/components/button/button-close.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import Vue from '../../utils/vue'
22
import { mergeData } from 'vue-functional-data-merge'
33
import { getComponentConfig } from '../../utils/config'
4+
import { stopEvent } from '../../utils/events'
45
import { isEvent } from '../../utils/inspect'
56
import { hasNormalizedSlot, normalizeSlot } from '../../utils/normalize-slot'
67

@@ -49,8 +50,7 @@ export const BButtonClose = /*#__PURE__*/ Vue.extend({
4950
// Ensure click on button HTML content is also disabled
5051
/* istanbul ignore if: bug in JSDOM still emits click on inner element */
5152
if (props.disabled && isEvent(evt)) {
52-
evt.stopPropagation()
53-
evt.preventDefault()
53+
stopEvent(evt)
5454
}
5555
}
5656
}

‎src/components/button/button.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import KeyCodes from '../../utils/key-codes'
44
import { concat } from '../../utils/array'
55
import { getComponentConfig } from '../../utils/config'
66
import { addClass, isTag, removeClass } from '../../utils/dom'
7+
import { stopEvent } from '../../utils/events'
78
import { isBoolean, isEvent, isFunction } from '../../utils/inspect'
89
import { omit } from '../../utils/object'
910
import { pluckProps } from '../../utils/props'
@@ -163,15 +164,14 @@ export const BButton = /*#__PURE__*/ Vue.extend({
163164
// Add SPACE handler for `href="#"` and ENTER handler for non-standard tags
164165
if (keyCode === KeyCodes.SPACE || (keyCode === KeyCodes.ENTER && nonStandardTag)) {
165166
const target = evt.currentTarget || evt.target
166-
evt.preventDefault()
167+
stopEvent(evt, { propagation: false })
167168
target.click()
168169
}
169170
},
170171
click(evt) {
171172
/* istanbul ignore if: blink/button disabled should handle this */
172173
if (props.disabled && isEvent(evt)) {
173-
evt.stopPropagation()
174-
evt.preventDefault()
174+
stopEvent(evt)
175175
} else if (toggle && listeners && listeners['update:pressed']) {
176176
// Send `.sync` updates to any "pressed" prop (if `.sync` listeners)
177177
// `concat()` will normalize the value to an array without

0 commit comments

Comments
 (0)