Comparing version 1.0.0-beta.18 to 1.0.0-beta.19
@@ -26,2 +26,17 @@ { | ||
}, | ||
"square": { | ||
"type": "Boolean", | ||
"desc": "Removes border-radius so borders are squared", | ||
"category": "style" | ||
}, | ||
"flat": { | ||
"type": "Boolean", | ||
"desc": "Applies a 'flat' design (no borders)", | ||
"category": "style" | ||
}, | ||
"dense": { | ||
"type": "Boolean", | ||
"desc": "Dense mode; toolbar buttons are shown on one-line only", | ||
"category": "style" | ||
}, | ||
"disable": { | ||
@@ -231,7 +246,2 @@ "type": "Boolean", | ||
}, | ||
"toolbar-flat": { | ||
"type": "Boolean", | ||
"desc": "Toolbar buttons are rendered \"flat\"", | ||
"category": "toolbar|style" | ||
}, | ||
"toolbar-outline": { | ||
@@ -238,0 +248,0 @@ "type": "Boolean", |
@@ -132,4 +132,11 @@ { | ||
"standout": { | ||
"type": "Boolean", | ||
"desc": "Use 'standout' design for the field", | ||
"type": [ | ||
"Boolean", | ||
"String" | ||
], | ||
"desc": "Use 'standout' design for the field; Specifies classes to be applied when focused (overriding default ones)", | ||
"examples": [ | ||
"standout", | ||
"standout=\"bg-primary text-white\"" | ||
], | ||
"category": "style" | ||
@@ -142,2 +149,7 @@ }, | ||
}, | ||
"hide-bottom-space": { | ||
"type": "Boolean", | ||
"desc": "Does not reserves space for hint/error/counter anymore when these are not used; as a result, it also disables the animation for those", | ||
"category": "style" | ||
}, | ||
"counter": { | ||
@@ -178,2 +190,7 @@ "type": "Boolean", | ||
}, | ||
"autofocus": { | ||
"type": "Boolean", | ||
"desc": "Focus field on initial component render", | ||
"category": "behavior" | ||
}, | ||
"maxlength": { | ||
@@ -180,0 +197,0 @@ "type": [ |
@@ -156,4 +156,11 @@ { | ||
"standout": { | ||
"type": "Boolean", | ||
"desc": "Use 'standout' design for the field", | ||
"type": [ | ||
"Boolean", | ||
"String" | ||
], | ||
"desc": "Use 'standout' design for the field; Specifies classes to be applied when focused (overriding default ones)", | ||
"examples": [ | ||
"standout", | ||
"standout=\"bg-primary text-white\"" | ||
], | ||
"category": "style" | ||
@@ -166,2 +173,7 @@ }, | ||
}, | ||
"hide-bottom-space": { | ||
"type": "Boolean", | ||
"desc": "Does not reserves space for hint/error/counter anymore when these are not used; as a result, it also disables the animation for those", | ||
"category": "style" | ||
}, | ||
"counter": { | ||
@@ -202,2 +214,7 @@ "type": "Boolean", | ||
}, | ||
"autofocus": { | ||
"type": "Boolean", | ||
"desc": "Focus field on initial component render", | ||
"category": "behavior" | ||
}, | ||
"value": { | ||
@@ -265,7 +282,2 @@ "type": [ | ||
}, | ||
"autofocus": { | ||
"type": "Boolean", | ||
"desc": "Focus field on initial component render", | ||
"category": "behavior" | ||
}, | ||
"input-class": { | ||
@@ -272,0 +284,0 @@ "type": [ |
@@ -132,4 +132,11 @@ { | ||
"standout": { | ||
"type": "Boolean", | ||
"desc": "Use 'standout' design for the field", | ||
"type": [ | ||
"Boolean", | ||
"String" | ||
], | ||
"desc": "Use 'standout' design for the field; Specifies classes to be applied when focused (overriding default ones)", | ||
"examples": [ | ||
"standout", | ||
"standout=\"bg-primary text-white\"" | ||
], | ||
"category": "style" | ||
@@ -142,2 +149,7 @@ }, | ||
}, | ||
"hide-bottom-space": { | ||
"type": "Boolean", | ||
"desc": "Does not reserves space for hint/error/counter anymore when these are not used; as a result, it also disables the animation for those", | ||
"category": "style" | ||
}, | ||
"counter": { | ||
@@ -178,2 +190,7 @@ "type": "Boolean", | ||
}, | ||
"autofocus": { | ||
"type": "Boolean", | ||
"desc": "Focus field on initial component render", | ||
"category": "behavior" | ||
}, | ||
"value": { | ||
@@ -387,7 +404,2 @@ "type": [ | ||
}, | ||
"autofocus": { | ||
"type": "Boolean", | ||
"desc": "Focus component on initial render", | ||
"category": "behavior" | ||
}, | ||
"transition-show": { | ||
@@ -394,0 +406,0 @@ "type": "String", |
@@ -1093,2 +1093,25 @@ { | ||
}, | ||
"selection": { | ||
"desc": "Emitted when user selects/unselects row(s)", | ||
"params": { | ||
"details": { | ||
"type": "Object", | ||
"desc": "Selection details", | ||
"definition": { | ||
"rows": { | ||
"type": "Array", | ||
"desc": "Array of row objects that were selected/unselected" | ||
}, | ||
"keys": { | ||
"type": "Array", | ||
"desc": "Array of the keys of rows that were selected/unselected" | ||
}, | ||
"added": { | ||
"type": "Boolean", | ||
"desc": "Were the rows added to selection (true) or removed from selection (false)" | ||
} | ||
} | ||
} | ||
} | ||
}, | ||
"update:pagination": { | ||
@@ -1095,0 +1118,0 @@ "desc": "Used by Vue on 'pagination.sync' prop for updating its value", |
@@ -110,2 +110,7 @@ { | ||
}, | ||
"hide-upload-btn": { | ||
"type": "Boolean", | ||
"desc": "Don't show the upload button", | ||
"category": "behavior" | ||
}, | ||
"disable": { | ||
@@ -309,2 +314,8 @@ "type": "Boolean", | ||
}, | ||
"start": { | ||
"desc": "Started working" | ||
}, | ||
"finish": { | ||
"desc": "Finished working (regardless of success or fail)" | ||
}, | ||
"uploaded": { | ||
@@ -311,0 +322,0 @@ "desc": "Emitted when file or batch of files is uploaded", |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
/*! | ||
* Quasar Framework v1.0.0-beta.18 | ||
* Quasar Framework v1.0.0-beta.19 | ||
* (c) 2016-present Razvan Stoenescu | ||
@@ -4,0 +4,0 @@ * Released under the MIT License. |
@@ -560,2 +560,5 @@ import Vue, { VueConstructor } from 'vue' | ||
readonly? : boolean | ||
square? : boolean | ||
flat? : boolean | ||
dense? : boolean | ||
disable? : boolean | ||
@@ -582,3 +585,2 @@ minHeight? : string | ||
toolbarBg? : string | ||
toolbarFlat? : boolean | ||
toolbarOutline? : boolean | ||
@@ -683,4 +685,5 @@ toolbarPush? : boolean | ||
borderless? : boolean | ||
standout? : boolean | ||
standout? : boolean | string | ||
bottomSlots? : boolean | ||
hideBottomSpace? : boolean | ||
counter? : boolean | ||
@@ -693,2 +696,3 @@ rounded? : boolean | ||
readonly? : boolean | ||
autofocus? : boolean | ||
maxlength? : string | number | ||
@@ -790,4 +794,5 @@ resetValidation(): void | ||
borderless? : boolean | ||
standout? : boolean | ||
standout? : boolean | string | ||
bottomSlots? : boolean | ||
hideBottomSpace? : boolean | ||
counter? : boolean | ||
@@ -800,2 +805,3 @@ rounded? : boolean | ||
readonly? : boolean | ||
autofocus? : boolean | ||
value : string | number | ||
@@ -806,3 +812,2 @@ type? : string | ||
autogrow? : boolean | ||
autofocus? : boolean | ||
inputClass? : any[] | string | any | ||
@@ -1141,4 +1146,5 @@ inputStyle? : any[] | string | any | ||
borderless? : boolean | ||
standout? : boolean | ||
standout? : boolean | string | ||
bottomSlots? : boolean | ||
hideBottomSpace? : boolean | ||
counter? : boolean | ||
@@ -1151,2 +1157,3 @@ rounded? : boolean | ||
readonly? : boolean | ||
autofocus? : boolean | ||
value : number | string | any[] | ||
@@ -1177,3 +1184,2 @@ multiple? : boolean | ||
inputDebounce? : number | string | ||
autofocus? : boolean | ||
transitionShow? : string | ||
@@ -1642,2 +1648,3 @@ transitionHide? : string | ||
autoUpload? : boolean | ||
hideUploadBtn? : boolean | ||
disable? : boolean | ||
@@ -1644,0 +1651,0 @@ readonly? : boolean |
@@ -403,6 +403,5 @@ { | ||
"toolbar-color", | ||
"toolbar-bg", | ||
"toolbar-text-color", | ||
"toolbar-toggle-color", | ||
"toolbar-bg", | ||
"toolbar-flat", | ||
"toolbar-outline", | ||
@@ -412,3 +411,6 @@ "toolbar-push", | ||
"content-style", | ||
"content-class" | ||
"content-class", | ||
"square", | ||
"flat", | ||
"dense" | ||
], | ||
@@ -469,2 +471,3 @@ "description": "" | ||
"bottom-slots", | ||
"hide-bottom-space", | ||
"rounded", | ||
@@ -478,2 +481,3 @@ "dense", | ||
"readonly", | ||
"autofocus", | ||
"maxlength", | ||
@@ -560,2 +564,3 @@ "max-values" | ||
"bottom-slots", | ||
"hide-bottom-space", | ||
"rounded", | ||
@@ -569,2 +574,3 @@ "dense", | ||
"readonly", | ||
"autofocus", | ||
"maxlength", | ||
@@ -578,3 +584,2 @@ "max-values", | ||
"autogrow", | ||
"autofocus", | ||
"input-class", | ||
@@ -985,2 +990,3 @@ "input-style" | ||
"bottom-slots", | ||
"hide-bottom-space", | ||
"rounded", | ||
@@ -994,2 +1000,3 @@ "dense", | ||
"readonly", | ||
"autofocus", | ||
"maxlength", | ||
@@ -1021,4 +1028,3 @@ "max-values", | ||
"transition-show", | ||
"transition-hide", | ||
"autofocus" | ||
"transition-hide" | ||
], | ||
@@ -1520,2 +1526,3 @@ "description": "" | ||
"auto-upload", | ||
"hide-upload-btn", | ||
"disable", | ||
@@ -1522,0 +1529,0 @@ "readonly", |
{ | ||
"name": "quasar", | ||
"version": "1.0.0-beta.18", | ||
"version": "1.0.0-beta.19", | ||
"description": "High performance, Material Design 2, full front end stack with Vue.js -- build SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase", | ||
@@ -5,0 +5,0 @@ "module": "src/index.esm.js", |
@@ -18,3 +18,3 @@ import Vue from 'vue' | ||
classes () { | ||
return `q-card__actions--${this.vertical ? 'vert column justify-start' : 'horiz row ' + this.alignClass}` | ||
return `q-card__actions--${this.vertical === true ? 'vert column justify-start' : 'horiz row ' + this.alignClass}` | ||
} | ||
@@ -21,0 +21,0 @@ }, |
@@ -150,2 +150,3 @@ import Vue from 'vue' | ||
props: this.cancelProps, | ||
attrs: { autofocus: !this.prompt && !this.ok }, | ||
on: { click: this.onCancel } | ||
@@ -157,2 +158,3 @@ })) | ||
props: this.okProps, | ||
attrs: { autofocus: !this.prompt }, | ||
on: { click: this.onOk } | ||
@@ -159,0 +161,0 @@ })) |
@@ -137,15 +137,33 @@ import Vue from 'vue' | ||
methods: { | ||
shake () { | ||
const node = this.__portal.$refs.inner | ||
focus () { | ||
let node = this.__portal.$refs !== void 0 ? this.__portal.$refs.inner : void 0 | ||
if (node.contains(document.activeElement) === false) { | ||
node.focus() | ||
if (node === void 0 || node.contains(document.activeElement) === true) { | ||
return | ||
} | ||
node.classList.remove('q-animate--scale') | ||
node.classList.add('q-animate--scale') | ||
clearTimeout(this.shakeTimeout) | ||
this.shakeTimeout = setTimeout(() => { | ||
if (this.$q.platform.is.ios) { | ||
// workaround the iOS hover/touch issue | ||
this.avoidAutoClose = true | ||
node.click() | ||
this.avoidAutoClose = false | ||
} | ||
node = node.querySelector('[autofocus]') || node | ||
node.focus() | ||
}, | ||
shake () { | ||
this.focus() | ||
const node = this.__portal.$refs !== void 0 ? this.__portal.$refs.inner : void 0 | ||
if (node !== void 0) { | ||
node.classList.remove('q-animate--scale') | ||
}, 170) | ||
node.classList.add('q-animate--scale') | ||
clearTimeout(this.shakeTimeout) | ||
this.shakeTimeout = setTimeout(() => { | ||
node.classList.remove('q-animate--scale') | ||
}, 170) | ||
} | ||
}, | ||
@@ -160,19 +178,2 @@ | ||
if (this.noFocus !== true) { | ||
document.activeElement.blur() | ||
this.$nextTick(() => { | ||
const node = this.__portal.$refs.inner | ||
if (this.$q.platform.is.ios === true) { | ||
// workaround the iOS hover/touch issue | ||
this.avoidAutoClose = true | ||
node.click() | ||
this.avoidAutoClose = false | ||
} | ||
node.focus() | ||
}) | ||
} | ||
this.__updateState(true, this.maximized) | ||
@@ -192,2 +193,12 @@ | ||
this.__showPortal() | ||
if (this.noFocus !== true) { | ||
document.activeElement.blur() | ||
this.$nextTick(() => { | ||
this.focus() | ||
}) | ||
} | ||
if (this.$q.platform.is.desktop === true && this.useBackdrop === true) { | ||
@@ -197,4 +208,2 @@ document.body.addEventListener('focusin', this.__onFocusChange) | ||
this.__showPortal() | ||
this.timer = setTimeout(() => { | ||
@@ -222,3 +231,3 @@ this.$emit('show', evt) | ||
if (this.$q.platform.is.desktop === true && this.useBackdrop === true) { | ||
if (this.$q.platform.is.desktop === true && this.seamless !== true) { | ||
document.body.removeEventListener('focusin', this.__onFocusChange) | ||
@@ -225,0 +234,0 @@ } |
import QBtn from '../btn/QBtn.js' | ||
import QBtnDropdown from '../btn/QBtnDropdown.js' | ||
import QBtnGroup from '../btn/QBtnGroup.js' | ||
import QInput from '../input/QInput.js' | ||
@@ -23,2 +22,8 @@ import QIcon from '../icon/QIcon.js' | ||
function __getGroup (h, children) { | ||
return h('div', { | ||
staticClass: 'q-editor__toolbar-group' | ||
}, children) | ||
} | ||
function getBtn (h, vm, btn, clickHandler, active = false) { | ||
@@ -41,6 +46,8 @@ const | ||
: null | ||
child.push(h(QTooltip, { props: { delay: 1000 } }, [ | ||
h('div', { domProps: { innerHTML: btn.tip } }), | ||
Key | ||
])) | ||
child.push( | ||
h(QTooltip, { props: { delay: 1000 } }, [ | ||
h('div', { domProps: { innerHTML: btn.tip } }), | ||
Key | ||
]) | ||
) | ||
} | ||
@@ -53,3 +60,3 @@ | ||
color: toggled ? btn.toggleColor || vm.toolbarToggleColor : btn.color || vm.toolbarColor, | ||
textColor: toggled && (vm.toolbarFlat || vm.toolbarOutline) ? null : btn.textColor || vm.toolbarTextColor, | ||
textColor: toggled && !vm.toolbarPush ? null : btn.textColor || vm.toolbarTextColor, | ||
label: btn.label, | ||
@@ -89,13 +96,3 @@ disable: btn.disable ? (typeof btn.disable === 'function' ? btn.disable(vm) : true) : false, | ||
Items = [ | ||
h( | ||
QBtnGroup, | ||
{ | ||
props: vm.buttonProps, | ||
staticClass: 'relative-position q-editor-toolbar-padding', | ||
style: { borderRadius: '0' }, | ||
size: 'sm', | ||
dense: true | ||
}, | ||
Items | ||
) | ||
__getGroup(h, Items) | ||
] | ||
@@ -172,3 +169,3 @@ } | ||
color: highlight ? vm.toolbarToggleColor : vm.toolbarColor, | ||
textColor: highlight && (vm.toolbarFlat || vm.toolbarOutline) ? null : vm.toolbarTextColor, | ||
textColor: highlight && !vm.toolbarPush ? null : vm.toolbarTextColor, | ||
label: btn.fixedLabel ? btn.label : label, | ||
@@ -186,5 +183,4 @@ icon: btn.fixedIcon ? btn.icon : icon, | ||
if (vm.caret) { | ||
return vm.buttons.map(group => h( | ||
QBtnGroup, | ||
{ props: vm.buttonProps, staticClass: 'items-center relative-position' }, | ||
return vm.buttons.map(group => __getGroup( | ||
h, | ||
group.map(btn => { | ||
@@ -266,2 +262,3 @@ if (btn.type === 'slot') { | ||
case 27: // ESCAPE key | ||
prevent(event) | ||
vm.caret.restore() | ||
@@ -275,11 +272,6 @@ !vm.editLinkUrl && document.execCommand('unlink') | ||
}), | ||
h(QBtnGroup, { | ||
key: 'qedt_btm_grp', | ||
props: vm.buttonProps | ||
}, [ | ||
vm.__getGroup(h, [ | ||
h(QBtn, { | ||
key: 'qedt_btm_rem', | ||
attrs: { | ||
tabindex: -1 | ||
}, | ||
attrs: { tabindex: -1 }, | ||
props: { | ||
@@ -286,0 +278,0 @@ ...vm.buttonProps, |
@@ -32,2 +32,3 @@ import Vue from 'vue' | ||
fonts: Object, | ||
toolbar: { | ||
@@ -45,2 +46,3 @@ type: Array, | ||
toolbarColor: String, | ||
toolbarBg: String, | ||
toolbarTextColor: String, | ||
@@ -51,12 +53,12 @@ toolbarToggleColor: { | ||
}, | ||
toolbarBg: { | ||
type: String, | ||
default: 'grey-3' | ||
}, | ||
toolbarFlat: Boolean, | ||
toolbarOutline: Boolean, | ||
toolbarPush: Boolean, | ||
toolbarRounded: Boolean, | ||
contentStyle: Object, | ||
contentClass: [Object, Array, String] | ||
contentClass: [Object, Array, String], | ||
square: Boolean, | ||
flat: Boolean, | ||
dense: Boolean | ||
}, | ||
@@ -80,5 +82,9 @@ | ||
buttonProps () { | ||
const flat = this.toolbarOutline !== true && | ||
this.toolbarPush !== true | ||
return { | ||
flat, | ||
noWrap: true, | ||
outline: this.toolbarOutline, | ||
flat: this.toolbarFlat, | ||
push: this.toolbarPush, | ||
@@ -184,3 +190,3 @@ rounded: this.toolbarRounded, | ||
? obj | ||
: extend(true, { type: 'toggle' }, obj) | ||
: Object.assign({ type: 'toggle' }, obj) | ||
} | ||
@@ -322,9 +328,5 @@ else { | ||
mounted () { | ||
this.$nextTick(() => { | ||
if (this.$refs.content) { | ||
this.caret = new Caret(this.$refs.content, this) | ||
this.$refs.content.innerHTML = this.value | ||
} | ||
this.$nextTick(this.refreshToolbar) | ||
}) | ||
this.caret = new Caret(this.$refs.content, this) | ||
this.$refs.content.innerHTML = this.value | ||
this.refreshToolbar() | ||
}, | ||
@@ -334,20 +336,26 @@ | ||
let toolbars | ||
if (this.hasToolbar) { | ||
const toolbarConfig = { | ||
staticClass: `q-editor-toolbar row no-wrap scroll-x`, | ||
'class': [ | ||
{ 'q-editor-toolbar-separator': !this.toolbarOutline && !this.toolbarPush }, | ||
this.toolbarBackgroundClass | ||
] | ||
} | ||
toolbars = [] | ||
toolbars.push(h('div', extend({ key: 'qedt_top' }, toolbarConfig), [ | ||
h('div', { staticClass: 'row no-wrap q-editor-toolbar-padding fit items-center' }, getToolbar(h, this)) | ||
])) | ||
if (this.editLinkUrl !== null) { | ||
toolbars.push(h('div', extend({ key: 'qedt_btm' }, toolbarConfig), [ | ||
h('div', { staticClass: 'row no-wrap q-editor-toolbar-padding fit items-center' }, getLinkEditor(h, this)) | ||
])) | ||
} | ||
toolbars = h('div', toolbars) | ||
const bars = [] | ||
bars.push( | ||
h('div', { | ||
key: 'qedt_top', | ||
staticClass: 'q-editor__toolbar row no-wrap scroll-x', | ||
class: this.toolbarBackgroundClass | ||
}, getToolbar(h, this)) | ||
) | ||
this.editLinkUrl !== null && bars.push( | ||
h('div', { | ||
key: 'qedt_btm', | ||
staticClass: 'q-editor__toolbar row no-wrap items-center scroll-x', | ||
class: this.toolbarBackgroundClass | ||
}, getLinkEditor(h, this)) | ||
) | ||
toolbars = h('div', { | ||
key: 'toolbar_ctainer', | ||
staticClass: 'q-editor__toolbars-container' | ||
}, bars) | ||
} | ||
@@ -364,4 +372,6 @@ | ||
disabled: this.disable, | ||
fullscreen: this.inFullscreen, | ||
column: this.inFullscreen | ||
'fullscreen column': this.inFullscreen, | ||
'q-editor--square no-border-radius': this.square, | ||
'q-editor--flat': this.flat, | ||
'q-editor--dense': this.dense | ||
} | ||
@@ -371,2 +381,3 @@ }, | ||
toolbars, | ||
h( | ||
@@ -376,3 +387,3 @@ 'div', | ||
ref: 'content', | ||
staticClass: `q-editor-content`, | ||
staticClass: `q-editor__content`, | ||
style: this.innerStyle, | ||
@@ -379,0 +390,0 @@ class: this.innerClass, |
@@ -18,2 +18,16 @@ { | ||
"square": { | ||
"extends": "square" | ||
}, | ||
"flat": { | ||
"extends": "flat", | ||
"desc": "Applies a 'flat' design (no borders)" | ||
}, | ||
"dense": { | ||
"extends": "dense", | ||
"desc": "Dense mode; toolbar buttons are shown on one-line only" | ||
}, | ||
"disable": { | ||
@@ -166,8 +180,2 @@ "extends": "disable" | ||
"toolbar-flat": { | ||
"type": "Boolean", | ||
"desc": "Toolbar buttons are rendered \"flat\"", | ||
"category": "toolbar|style" | ||
}, | ||
"toolbar-outline": { | ||
@@ -174,0 +182,0 @@ "type": "Boolean", |
@@ -94,4 +94,8 @@ { | ||
"standout": { | ||
"type": "Boolean", | ||
"desc": "Use 'standout' design for the field", | ||
"type": [ "Boolean", "String" ], | ||
"desc": "Use 'standout' design for the field; Specifies classes to be applied when focused (overriding default ones)", | ||
"examples": [ | ||
"standout", | ||
"standout=\"bg-primary text-white\"" | ||
], | ||
"category": "style" | ||
@@ -106,2 +110,8 @@ }, | ||
"hide-bottom-space": { | ||
"type": "Boolean", | ||
"desc": "Does not reserves space for hint/error/counter anymore when these are not used; as a result, it also disables the animation for those", | ||
"category": "style" | ||
}, | ||
"counter": { | ||
@@ -139,2 +149,8 @@ "type": "Boolean", | ||
"extends": "readonly" | ||
}, | ||
"autofocus": { | ||
"type": "Boolean", | ||
"desc": "Focus field on initial component render", | ||
"category": "behavior" | ||
} | ||
@@ -141,0 +157,0 @@ }, |
@@ -32,3 +32,3 @@ import Vue from 'vue' | ||
borderless: Boolean, | ||
standout: Boolean, | ||
standout: [Boolean, String], | ||
@@ -40,2 +40,4 @@ square: Boolean, | ||
bottomSlots: Boolean, | ||
hideBottomSpace: Boolean, | ||
rounded: Boolean, | ||
@@ -53,2 +55,4 @@ dense: Boolean, | ||
autofocus: Boolean, | ||
maxlength: [Number, String], | ||
@@ -96,4 +100,8 @@ maxValues: [Number, String] // do not add to JSON, internally needed by QSelect | ||
this.focused === true || | ||
this.hasValue === true || | ||
( | ||
this.inputValue !== void 0 && this.hideSelected === true | ||
? this.inputValue.length > 0 | ||
: this.hasValue === true | ||
) || | ||
( | ||
this.displayValue !== void 0 && | ||
@@ -127,3 +135,3 @@ this.displayValue !== null && | ||
'q-field--with-bottom': this.hasBottom, | ||
'q-field--with-bottom': this.hideBottomSpace !== true && this.hasBottom, | ||
'q-field--error': this.hasError, | ||
@@ -140,3 +148,3 @@ | ||
if (this.borderless === true) { return 'borderless' } | ||
if (this.standout === true) { return 'standout' } | ||
if (this.standout) { return 'standout' } | ||
return 'standard' | ||
@@ -151,2 +159,5 @@ }, | ||
} | ||
else if (typeof this.standout === 'string' && this.standout.length > 0 && this.focused === true) { | ||
return this.standout | ||
} | ||
else if (this.color !== void 0) { | ||
@@ -258,2 +269,6 @@ cls.push('text-' + this.color) | ||
} | ||
// internal usage only: | ||
else if (this.$scopedSlots.rawControl !== void 0) { | ||
node.push(this.$scopedSlots.rawControl()) | ||
} | ||
else if (this.$scopedSlots.control !== void 0) { | ||
@@ -264,5 +279,6 @@ node.push( | ||
staticClass: 'q-field__native row', | ||
attrs: this.$attrs.tabindex !== void 0 ? { | ||
tabindex: this.$attrs.tabindex | ||
} : void 0 | ||
attrs: { | ||
...this.$attrs, | ||
autofocus: this.autofocus | ||
} | ||
}, this.$scopedSlots.control()) | ||
@@ -292,3 +308,3 @@ ) | ||
__getBottom (h) { | ||
if (this.hasBottom !== true) { return } | ||
if (this.hideBottomSpace !== true && this.hasBottom !== true) { return } | ||
@@ -318,13 +334,24 @@ let msg, key | ||
const hasCounter = this.counter === true || this.$scopedSlots.counter !== void 0 | ||
if (this.hideBottomSpace === true && hasCounter === false && !msg) { | ||
return | ||
} | ||
const main = h('div', { | ||
staticClass: 'q-field__messages col', | ||
key | ||
}, msg) | ||
return h('div', { | ||
staticClass: 'q-field__bottom absolute-bottom row items-start relative-position' | ||
staticClass: 'q-field__bottom row items-start q-field__bottom--' + | ||
(this.hideBottomSpace !== true ? 'animated' : 'stale') | ||
}, [ | ||
h('transition', { props: { name: 'q-transition--field-message' } }, [ | ||
h('div', { | ||
staticClass: 'q-field__messages col', | ||
key | ||
}, msg) | ||
]), | ||
this.hideBottomSpace === true | ||
? main | ||
: h('transition', { props: { name: 'q-transition--field-message' } }, [ | ||
main | ||
]), | ||
this.counter === true || this.$scopedSlots.counter !== void 0 ? h('div', { | ||
hasCounter === true ? h('div', { | ||
staticClass: 'q-field__counter' | ||
@@ -380,7 +407,3 @@ }, this.$scopedSlots.counter !== void 0 ? this.$scopedSlots.counter() : [ this.computedCounter ]) : null | ||
staticClass: 'q-field row no-wrap items-start', | ||
class: this.classes, | ||
attrs: { | ||
...this.$attrs, | ||
tabindex: void 0 | ||
} | ||
class: this.classes | ||
}, [ | ||
@@ -421,3 +444,7 @@ this.$scopedSlots.before !== void 0 ? h('div', { | ||
} | ||
}, | ||
mounted () { | ||
this.autofocus === true && setTimeout(this.focus) | ||
} | ||
}) |
@@ -37,6 +37,12 @@ import Vue from 'vue' | ||
if (typeof valid.then === 'function') { | ||
promises.push(valid) | ||
promises.push( | ||
valid.then( | ||
v => ({ valid: v, comp }), | ||
error => ({ valid: false, comp, error }) | ||
) | ||
) | ||
} | ||
else if (valid !== true) { | ||
emit(false) | ||
typeof comp.focus === 'function' && comp.focus() | ||
return Promise.resolve(false) | ||
@@ -57,11 +63,7 @@ } | ||
if (index === this.validateIndex) { | ||
emit(res[0]) | ||
return res[0] | ||
const { valid, comp } = res[0] | ||
emit(valid) | ||
valid !== true && typeof comp.focus === 'function' && comp.focus() | ||
return valid | ||
} | ||
}, | ||
() => { | ||
if (index === this.validateIndex) { | ||
emit(false) | ||
return false | ||
} | ||
} | ||
@@ -92,9 +94,12 @@ ) | ||
this.resetValidation() | ||
this.autofocus === true && this.focus() | ||
this.$emit('reset') | ||
this.$nextTick(() => { // allow userland to reset values before | ||
this.resetValidation() | ||
this.autofocus === true && this.focus() | ||
}) | ||
}, | ||
focus () { | ||
const target = this.$el.querySelector('[tabindex]') | ||
const target = this.$el.querySelector('[autofocus]') || this.$el.querySelector('[tabindex]') | ||
target !== null && target.focus() | ||
@@ -101,0 +106,0 @@ } |
@@ -38,3 +38,3 @@ import Vue from 'vue' | ||
image: null, | ||
isLoading: true, | ||
isLoading: !!this.src, | ||
hasError: false, | ||
@@ -73,3 +73,2 @@ naturalRatio: void 0 | ||
__onLoad () { | ||
this.isLoading = false | ||
this.__updateSrc() | ||
@@ -81,4 +80,4 @@ this.__updateWatcher(this.srcset) | ||
__onError (err) { | ||
this.isLoading = false | ||
this.hasError = true | ||
this.currentSrc = '' | ||
this.$emit('error', err) | ||
@@ -88,3 +87,3 @@ }, | ||
__updateSrc () { | ||
if (this.image && this.isLoading === false) { | ||
if (this.image !== void 0 && this.isLoading === false) { | ||
const src = this.image.currentSrc || this.image.src | ||
@@ -111,19 +110,39 @@ if (this.currentSrc !== src) { | ||
clearTimeout(this.timer) | ||
this.isLoading = true | ||
this.hasError = false | ||
if (!this.src) { | ||
this.isLoading = false | ||
this.image = void 0 | ||
this.currentSrc = '' | ||
return | ||
} | ||
this.isLoading = true | ||
const img = new Image() | ||
this.image = img | ||
img.onerror = this.__onError | ||
img.onerror = err => { | ||
// if we are still rendering same image | ||
if (this.image === img) { | ||
this.isLoading = false | ||
this.__onError(err) | ||
} | ||
} | ||
img.onload = () => { | ||
if (this.image.decode) { | ||
this.image | ||
.decode() | ||
.catch(this.__onError) | ||
.then(this.__onLoad) | ||
// if we are still rendering same image | ||
if (this.image === img) { | ||
this.isLoading = false | ||
if (this.image.decode) { | ||
this.image | ||
.decode() | ||
.catch(this.__onError) | ||
.then(this.__onLoad) | ||
} | ||
else { | ||
this.__onLoad() | ||
} | ||
} | ||
else { | ||
this.__onLoad() | ||
} | ||
} | ||
@@ -167,16 +186,17 @@ | ||
if (this.basic) { | ||
return content | ||
} | ||
return h('transition', { | ||
props: { name: 'q-transition--' + this.transition } | ||
}, [ content ]) | ||
return this.basic === true | ||
? content | ||
: h('transition', { | ||
props: { name: 'q-transition--' + this.transition } | ||
}, [ content ]) | ||
}, | ||
__getContent (h) { | ||
if (this.basic) { | ||
const slotVm = slot(this, this.hasError === true ? 'error' : 'default') | ||
if (this.basic === true) { | ||
return h('div', { | ||
key: 'content', | ||
staticClass: 'q-img__content absolute-full' | ||
}, slot(this, 'default')) | ||
}, slotVm) | ||
} | ||
@@ -199,3 +219,3 @@ | ||
staticClass: 'q-img__content absolute-full' | ||
}, slot(this, this.hasError === true ? 'error' : 'default')) | ||
}, slotVm) | ||
@@ -231,3 +251,3 @@ return h('transition', { | ||
} | ||
this.src && this.__load() | ||
this.isLoading === true && this.__load() | ||
}, | ||
@@ -234,0 +254,0 @@ |
@@ -26,3 +26,2 @@ import Vue from 'vue' | ||
autogrow: Boolean, // makes a textarea | ||
autofocus: Boolean, | ||
@@ -146,2 +145,3 @@ inputClass: [Array, String, Object], | ||
tabindex: 0, | ||
autofocus: this.autofocus, | ||
rows: this.type === 'textarea' ? 6 : void 0, | ||
@@ -186,3 +186,2 @@ ...this.$attrs, | ||
this.autogrow === true && this.__adjustHeight() | ||
this.autofocus === true && this.$nextTick(this.focus) | ||
}, | ||
@@ -189,0 +188,0 @@ |
@@ -51,8 +51,2 @@ { | ||
"autofocus": { | ||
"type": "Boolean", | ||
"desc": "Focus field on initial component render", | ||
"category": "behavior" | ||
}, | ||
"input-class": { | ||
@@ -59,0 +53,0 @@ "type": [ "Array", "String", "Object" ], |
@@ -112,2 +112,11 @@ import Vue from 'vue' | ||
methods: { | ||
focus () { | ||
let node = this.__portal.$refs !== void 0 ? this.__portal.$refs.inner : void 0 | ||
if (node !== void 0 && node.contains(document.activeElement) !== true) { | ||
node = node.querySelector('[autofocus]') || node | ||
node.focus() | ||
} | ||
}, | ||
__show (evt) { | ||
@@ -120,10 +129,2 @@ clearTimeout(this.timer) | ||
if (this.noFocus !== true) { | ||
document.activeElement.blur() | ||
this.$nextTick(() => { | ||
this.__portal.$refs.inner.focus() | ||
}) | ||
} | ||
this.scrollTarget = getScrollTarget(this.anchorEl) | ||
@@ -160,2 +161,10 @@ this.scrollTarget.addEventListener('scroll', this.updatePosition, listenOpts.passive) | ||
if (this.noFocus !== true) { | ||
document.activeElement.blur() | ||
this.$nextTick(() => { | ||
this.focus() | ||
}) | ||
} | ||
this.timer = setTimeout(() => { | ||
@@ -248,4 +257,4 @@ this.$emit('show', evt) | ||
attrs: { | ||
...this.$attrs, | ||
tabindex: 0 | ||
tabindex: -1, | ||
...this.$attrs | ||
}, | ||
@@ -252,0 +261,0 @@ on, |
@@ -130,3 +130,4 @@ import Vue from 'vue' | ||
cover: true, | ||
persistent: this.persistent | ||
persistent: this.persistent, | ||
noFocus: true | ||
}, | ||
@@ -133,0 +134,0 @@ on: { |
@@ -83,5 +83,3 @@ import Vue from 'vue' | ||
default: 'fade' | ||
}, | ||
autofocus: Boolean | ||
} | ||
}, | ||
@@ -100,15 +98,2 @@ | ||
watch: { | ||
selectedString: { | ||
handler (val) { | ||
const value = this.multiple !== true && this.hideSelected === true | ||
? val | ||
: '' | ||
if (this.inputValue !== value) { | ||
this.inputValue = value | ||
} | ||
}, | ||
immediate: true | ||
}, | ||
menu (show) { | ||
@@ -159,3 +144,3 @@ this.__updateMenu(show) | ||
this.optionsSanitize === true || | ||
this.innerValue.some(opt => opt.sanitize === true) | ||
this.innerValue.some(opt => opt !== null && opt.sanitize === true) | ||
) | ||
@@ -173,3 +158,3 @@ ) | ||
selected: true, | ||
removeAtIndex: this.removeAtIndex, | ||
removeAtIndex: this.__removeAtIndexAndFocus, | ||
toggleOption: this.toggleOption, | ||
@@ -252,2 +237,7 @@ tabindex | ||
__removeAtIndexAndFocus (index) { | ||
this.removeAtIndex(index) | ||
this.focus() | ||
}, | ||
add (opt, unique) { | ||
@@ -285,4 +275,7 @@ const val = this.emitValue === true | ||
toggleOption (opt) { | ||
if (this.editable !== true || opt === void 0 || this.__isDisabled(opt) === true) { return } | ||
if (this.editable !== true || opt === void 0 || this.__isDisabled(opt) === true) { | ||
return | ||
} | ||
this.multiple !== true && this.updateInputValue('', true) | ||
this.focus() | ||
@@ -298,9 +291,2 @@ | ||
} | ||
else { | ||
const val = this.__getOptionLabel(opt) | ||
if (val !== this.inputValue) { | ||
this.inputValue = val | ||
} | ||
} | ||
return | ||
@@ -391,8 +377,9 @@ } | ||
const val = this.__getOptionValue(opt) | ||
return this.innerValue.find(v => isDeepEqual(this.__getOptionValue(v), val)) !== void 0 | ||
return this.innerValue | ||
.find(v => isDeepEqual(this.__getOptionValue(v), val)) !== void 0 | ||
}, | ||
__onTargetKeydown (e) { | ||
// escape | ||
if (e.keyCode === 27) { | ||
// escape, tab | ||
if (e.keyCode === 27 || e.keyCode === 9) { | ||
this.__closeMenu() | ||
@@ -402,3 +389,10 @@ return | ||
if (this.innerLoading !== true && this.menu === false && e.keyCode === 40) { // down | ||
if (e.target !== this.$refs.target) { return } | ||
// down | ||
if ( | ||
e.keyCode === 40 && | ||
this.innerLoading !== true && | ||
this.menu === false | ||
) { | ||
stopAndPrevent(e) | ||
@@ -416,3 +410,9 @@ | ||
if (this.multiple === true && this.inputValue.length === 0 && e.keyCode === 8) { // delete | ||
// delete | ||
if ( | ||
e.keyCode === 8 && | ||
this.multiple === true && | ||
this.inputValue.length === 0 && | ||
Array.isArray(this.value) | ||
) { | ||
this.removeAtIndex(this.value.length - 1) | ||
@@ -422,2 +422,39 @@ return | ||
// up, down | ||
if (e.keyCode === 38 || e.keyCode === 40) { | ||
stopAndPrevent(e) | ||
if (this.menu === true) { | ||
let index = this.optionIndex | ||
do { | ||
index = normalizeToInterval( | ||
index + (e.keyCode === 38 ? -1 : 1), | ||
-1, | ||
Math.min(this.optionsToShow, this.options.length) - 1 | ||
) | ||
if (index === -1) { | ||
this.optionIndex = -1 | ||
return | ||
} | ||
} | ||
while (index !== this.optionIndex && this.__isDisabled(this.options[index]) === true) | ||
const dir = index > this.optionIndex ? 1 : -1 | ||
this.optionIndex = index | ||
this.$nextTick(() => { | ||
const el = this.__getMenuContentEl().querySelector('.q-manual-focusable--focused') | ||
if (el !== null && el.scrollIntoView !== void 0) { | ||
if (el.scrollIntoViewIfNeeded !== void 0) { | ||
el.scrollIntoViewIfNeeded(false) | ||
} | ||
else { | ||
el.scrollIntoView(dir === -1) | ||
} | ||
} | ||
}) | ||
} | ||
} | ||
// enter | ||
@@ -430,12 +467,2 @@ if (e.target !== this.$refs.target || e.keyCode !== 13) { return } | ||
this.toggleOption(this.options[this.optionIndex]) | ||
if (this.multiple === true && this.inputValue.length > 0) { | ||
if (this.$listeners.filter !== void 0) { | ||
this.filter('') | ||
this.optionIndex = -1 | ||
} | ||
else { | ||
this.inputValue = '' | ||
} | ||
} | ||
return | ||
@@ -464,3 +491,3 @@ } | ||
this.inputValue = '' | ||
this.updateInputValue('') | ||
} | ||
@@ -478,9 +505,7 @@ | ||
if (this.menu === true) { | ||
this.__closeMenu() | ||
this.dialog !== true && this.__closeMenu() | ||
} | ||
else if (this.innerLoading !== true) { | ||
if (this.$listeners.filter !== void 0) { | ||
this.filter(this.inputValue) | ||
} | ||
else { | ||
this.updateInputValue('') | ||
if (this.$listeners.filter === void 0) { | ||
this.menu = true | ||
@@ -491,47 +516,2 @@ } | ||
__onGlobalKeydown (e) { | ||
// escape | ||
if (e.keyCode === 27) { | ||
this.__closeMenu() | ||
return | ||
} | ||
// up, down | ||
if (e.keyCode === 38 || e.keyCode === 40) { | ||
stopAndPrevent(e) | ||
if (this.menu === true) { | ||
let index = this.optionIndex | ||
do { | ||
index = normalizeToInterval( | ||
index + (e.keyCode === 38 ? -1 : 1), | ||
-1, | ||
Math.min(this.optionsToShow, this.options.length) - 1 | ||
) | ||
if (index === -1) { | ||
this.optionIndex = -1 | ||
return | ||
} | ||
} | ||
while (index !== this.optionIndex && this.__isDisabled(this.options[index]) === true) | ||
const dir = index > this.optionIndex ? 1 : -1 | ||
this.optionIndex = index | ||
this.$nextTick(() => { | ||
const el = this.__getMenuContentEl().querySelector('.q-manual-focusable--focused') | ||
if (el !== null && el.scrollIntoView !== void 0) { | ||
if (el.scrollIntoViewIfNeeded !== void 0) { | ||
el.scrollIntoViewIfNeeded(false) | ||
} | ||
else { | ||
el.scrollIntoView(dir === -1) | ||
} | ||
} | ||
}) | ||
} | ||
} | ||
}, | ||
__getMenuContentEl () { | ||
@@ -631,2 +611,3 @@ return this.hasDialog === true | ||
tabindex: 0, | ||
autofocus: this.autofocus, | ||
...this.$attrs | ||
@@ -686,2 +667,3 @@ }, | ||
tabindex: 0, | ||
autofocus: this.autofocus, | ||
...this.$attrs, | ||
@@ -701,6 +683,2 @@ disabled: this.editable !== true | ||
if (this.optionIndex !== -1) { | ||
this.optionIndex = -1 | ||
} | ||
if (this.$listeners.filter !== void 0) { | ||
@@ -713,4 +691,14 @@ this.inputTimer = setTimeout(() => { | ||
updateInputValue (val, noFiltering) { | ||
if (this.inputValue !== val) { | ||
this.inputValue = val | ||
} | ||
noFiltering !== true && this.filter(val) | ||
}, | ||
filter (val) { | ||
this.inputValue = val | ||
if (this.$listeners.filter === void 0 || this.focused !== true) { | ||
return | ||
} | ||
@@ -804,3 +792,3 @@ if (this.innerLoading === true) { | ||
__onControlFocusin (e) { | ||
if (this.editable !== true) { | ||
if (this.editable !== true || this.focused === true) { | ||
return | ||
@@ -830,10 +818,3 @@ } | ||
const val = this.multiple !== true && this.hideSelected === true | ||
? this.selectedString | ||
: '' | ||
if (this.inputValue !== val) { | ||
this.inputValue = val | ||
} | ||
this.updateInputValue('', true) | ||
this.__closeMenu() | ||
@@ -881,11 +862,3 @@ }, 100) | ||
'&scroll': this.__hydrateOptions, | ||
'before-show': e => { | ||
this.$nextTick(() => { | ||
this.__onControlFocusin(e) | ||
}) | ||
}, | ||
hide: e => { | ||
this.__closeMenu() | ||
this.__onControlFocusout(e) | ||
} | ||
hide: this.__closeMenu | ||
} | ||
@@ -898,3 +871,3 @@ }, child) | ||
h(QField, { | ||
staticClass: 'col-auto', | ||
staticClass: `col-auto ${this.fieldClass}`, | ||
props: { | ||
@@ -914,3 +887,3 @@ ...this.$props, | ||
...this.$scopedSlots, | ||
control: () => this.__getControl(h, true), | ||
rawControl: () => this.__getControl(h, true), | ||
before: void 0, | ||
@@ -957,2 +930,3 @@ after: void 0 | ||
this.$emit('blur', e) | ||
this.updateInputValue('', true) | ||
}, | ||
@@ -996,7 +970,2 @@ show: () => { | ||
} | ||
if (this.$q.platform.is.desktop === true) { | ||
const action = (show === true ? 'add' : 'remove') + 'EventListener' | ||
document.body[action]('keydown', this.__onGlobalKeydown) | ||
} | ||
}, | ||
@@ -1021,10 +990,5 @@ | ||
mounted () { | ||
this.autofocus === true && this.$nextTick(this.focus) | ||
}, | ||
beforeDestroy () { | ||
clearTimeout(this.inputTimer) | ||
document.body.removeEventListener('keydown', this.__onGlobalKeydown) | ||
} | ||
}) |
@@ -188,8 +188,2 @@ { | ||
"autofocus": { | ||
"type": "Boolean", | ||
"desc": "Focus component on initial render", | ||
"category": "behavior" | ||
}, | ||
"transition-show": { | ||
@@ -196,0 +190,0 @@ "extends": "transition", |
@@ -111,3 +111,3 @@ import Vue from 'vue' | ||
} | ||
data.attrs = { tabindex: 0 } | ||
data.attrs = { tabindex: this.isDisable === true ? -1 : this.$attrs.tabindex || 0 } | ||
} | ||
@@ -114,0 +114,0 @@ |
@@ -1020,2 +1020,28 @@ { | ||
"selection": { | ||
"desc": "Emitted when user selects/unselects row(s)", | ||
"params": { | ||
"details": { | ||
"type": "Object", | ||
"desc": "Selection details", | ||
"definition": { | ||
"rows": { | ||
"type": "Array", | ||
"desc": "Array of row objects that were selected/unselected", | ||
"__exemption": [ "examples" ] | ||
}, | ||
"keys": { | ||
"type": "Array", | ||
"desc": "Array of the keys of rows that were selected/unselected", | ||
"__exemption": [ "examples" ] | ||
}, | ||
"added": { | ||
"type": "Boolean", | ||
"desc": "Were the rows added to selection (true) or removed from selection (false)" | ||
} | ||
} | ||
} | ||
} | ||
}, | ||
"update:pagination": { | ||
@@ -1022,0 +1048,0 @@ "desc": "Used by Vue on 'pagination.sync' prop for updating its value", |
@@ -61,10 +61,14 @@ export default { | ||
__updateSelection (keys, rows, adding) { | ||
__updateSelection (keys, rows, added) { | ||
this.$emit('selection', { rows, added, keys }) | ||
if (this.singleSelection === true) { | ||
this.$emit('update:selected', adding ? rows : []) | ||
this.$emit('update:selected', added ? rows : []) | ||
} | ||
else { | ||
this.$emit('update:selected', adding | ||
this.$emit('update:selected', added | ||
? this.selected.concat(rows) | ||
: this.selected.filter(row => keys.includes(row[this.rowKey]) === false) | ||
: this.selected.filter( | ||
row => keys.includes(row[this.rowKey]) === false | ||
) | ||
) | ||
@@ -71,0 +75,0 @@ } |
@@ -36,3 +36,3 @@ import Vue from 'vue' | ||
tabindex: String, | ||
tabindex: [String, Number], | ||
disable: Boolean | ||
@@ -65,2 +65,4 @@ }, | ||
activate (e, keyboard) { | ||
keyboard !== true && this.$refs.blurTarget !== void 0 && this.$refs.blurTarget.focus() | ||
if (this.disable !== true) { | ||
@@ -70,4 +72,2 @@ this.$listeners.click !== void 0 && this.$emit('click', e) | ||
} | ||
keyboard !== true && this.$refs.blurTarget !== void 0 && this.$refs.blurTarget.focus() | ||
}, | ||
@@ -74,0 +74,0 @@ |
@@ -94,2 +94,8 @@ { | ||
"hide-upload-btn": { | ||
"type": "Boolean", | ||
"desc": "Don't show the upload button", | ||
"category": "behavior" | ||
}, | ||
"disable": { | ||
@@ -255,2 +261,10 @@ "extends": "disable" | ||
"start": { | ||
"desc": "Started working" | ||
}, | ||
"finish": { | ||
"desc": "Finished working (regardless of success or fail)" | ||
}, | ||
"uploaded": { | ||
@@ -257,0 +271,0 @@ "desc": "Emitted when file or batch of files is uploaded", |
@@ -29,2 +29,3 @@ import QBtn from '../btn/QBtn.js' | ||
autoUpload: Boolean, | ||
hideUploadBtn: Boolean, | ||
@@ -48,5 +49,24 @@ disable: Boolean, | ||
watch: { | ||
isUploading (newVal, oldVal) { | ||
if (oldVal === false && newVal === true) { | ||
this.$emit('start') | ||
} | ||
else if (oldVal === true && newVal === false) { | ||
this.$emit('finish') | ||
} | ||
} | ||
}, | ||
computed: { | ||
/* | ||
* When extending: | ||
* Required : isUploading | ||
* Optional: isBusy | ||
*/ | ||
canUpload () { | ||
return this.editable === true && this.queuedFiles.length > 0 | ||
return this.editable === true && | ||
this.isUploading !== true && | ||
this.queuedFiles.length > 0 | ||
}, | ||
@@ -338,5 +358,5 @@ | ||
this.__getBtn(h, this.editable, 'add', this.pickFiles), | ||
this.__getBtn(h, this.editable && this.queuedFiles.length > 0, 'upload', this.upload), | ||
this.__getBtn(h, this.editable && this.isUploading, 'clear', this.abort) | ||
this.__getBtn(h, this.editable && this.isUploading !== true && (this.multiple || this.queuedFiles.length === 0), 'add', this.pickFiles), | ||
this.__getBtn(h, this.editable && this.hideUploadBtn === false && this.queuedFiles.length > 0, 'upload', this.upload), | ||
this.__getBtn(h, this.editable && this.isUploading === true, 'clear', this.abort) | ||
]) | ||
@@ -411,3 +431,3 @@ }, | ||
this.isDestroyed = true | ||
this.isUploading && this.abort() | ||
this.isUploading === true && this.abort() | ||
}, | ||
@@ -425,3 +445,3 @@ | ||
}, | ||
on: this.editable === true && this.isIdle === true | ||
on: this.editable === true && this.isUploading !== true | ||
? { dragover: this.__onDragOver } | ||
@@ -428,0 +448,0 @@ : null |
@@ -31,3 +31,4 @@ function getFn (prop) { | ||
xhrs: [], | ||
isBusy: false | ||
promises: [], | ||
workingThreads: 0 | ||
} | ||
@@ -51,8 +52,8 @@ }, | ||
isIdle () { | ||
return this.xhrs.length === 0 | ||
isUploading () { | ||
return this.workingThreads > 0 | ||
}, | ||
isUploading () { | ||
return this.xhrs.length > 0 | ||
isBusy () { | ||
return this.promises.length > 0 | ||
} | ||
@@ -63,9 +64,10 @@ }, | ||
abort () { | ||
if (!this.disable && this.isUploading) { | ||
this.xhrs.forEach(x => { x.abort() }) | ||
} | ||
this.xhrs.forEach(x => { x.abort() }) | ||
this.promises.forEach(p => { p.abort() }) | ||
}, | ||
upload () { | ||
if (this.disable || !this.queuedFiles.length) { return } | ||
if (this.canUpload === false) { | ||
return | ||
} | ||
@@ -76,7 +78,7 @@ const queue = this.queuedFiles.slice(0) | ||
if (this.xhrProps.batch(queue)) { | ||
this.__runFactory('__uploadBatch', queue) | ||
this.__runFactory(queue) | ||
} | ||
else { | ||
queue.forEach(file => { | ||
this.__runFactory('__uploadSingleFile', file) | ||
this.__runFactory([ file ]) | ||
}) | ||
@@ -86,5 +88,7 @@ } | ||
__runFactory (method, payload) { | ||
__runFactory (payload) { | ||
this.workingThreads++ | ||
if (typeof this.factory !== 'function') { | ||
this[method](payload, {}) | ||
this.__uploadFiles(payload, {}) | ||
return | ||
@@ -97,14 +101,15 @@ } | ||
this.$emit('factory-fail') | ||
this.workingThreads-- | ||
} | ||
else if (typeof res.catch === 'function' && typeof res.then === 'function') { | ||
this.isBusy = true | ||
this.promises.push(res) | ||
res.then(factory => { | ||
if (this.isDestroyed !== true) { | ||
this.isBusy = false | ||
this[method](payload, factory) | ||
this.promises = this.promises.filter(p => p !== res) | ||
this.__uploadFiles(payload, factory) | ||
} | ||
}).catch(err => { | ||
if (this.isDestroyed !== true) { | ||
this.isBusy = false | ||
this.promises = this.promises.filter(p => p !== res) | ||
@@ -119,2 +124,3 @@ const files = Array.isArray(payload) | ||
this.$emit('factory-failed', err, files) | ||
this.workingThreads-- | ||
} | ||
@@ -124,7 +130,7 @@ }) | ||
else { | ||
this[method](payload, res || {}) | ||
this.__uploadFiles(payload, res || {}) | ||
} | ||
}, | ||
__uploadBatch (files, factory) { | ||
__uploadFiles (files, factory) { | ||
const | ||
@@ -144,2 +150,3 @@ form = new FormData(), | ||
console.error('q-uploader: invalid or no URL specified') | ||
this.workingThreads-- | ||
return | ||
@@ -208,2 +215,3 @@ } | ||
this.workingThreads-- | ||
this.xhrs = this.xhrs.filter(x => x !== xhr) | ||
@@ -247,88 +255,2 @@ } | ||
} | ||
}, | ||
__uploadSingleFile (file, factory) { | ||
const | ||
form = new FormData(), | ||
files = [ file ], | ||
xhr = new XMLHttpRequest() | ||
const getProp = (name, arg) => { | ||
return factory[name] !== void 0 | ||
? getFn(factory[name])(arg) | ||
: this.xhrProps[name](arg) | ||
} | ||
const url = getProp('url', file) | ||
if (url === void 0) { | ||
console.error('q-uploader: no URL prop specified') | ||
return | ||
} | ||
const fields = ( | ||
getProp('formFields', files) || | ||
/* TODO remove in v1 final */ getProp('fields', files) | ||
) | ||
fields !== void 0 && fields.forEach(field => { | ||
form.append(field.name, field.value) | ||
}) | ||
xhr.upload.addEventListener('progress', e => { | ||
if (file.__status !== 'failed') { | ||
const loaded = Math.min(file.size, e.loaded) | ||
this.uploadedSize += loaded - file.__uploaded | ||
this.__updateFile(file, 'uploading', loaded) | ||
} | ||
}, false) | ||
xhr.onreadystatechange = () => { | ||
if (xhr.readyState < 4) { | ||
return | ||
} | ||
if (xhr.status && xhr.status < 400) { | ||
this.uploadedFiles.push(file) | ||
this.__updateFile(file, 'uploaded') | ||
this.__emit('uploaded', { files, xhr }) | ||
this.uploadedSize += file.size - file.__uploaded | ||
} | ||
else { | ||
this.queuedFiles.push(file) | ||
this.__updateFile(file, 'failed') | ||
this.__emit('failed', { files, xhr }) | ||
this.uploadedSize -= file.__uploaded | ||
} | ||
this.xhrs = this.xhrs.filter(x => x !== xhr) | ||
} | ||
this.__updateFile(file, 'uploading', 0) | ||
xhr.open( | ||
getProp('method', files), | ||
url | ||
) | ||
if (getProp('withCredentials', files) === true) { | ||
xhr.withCredentials = true | ||
} | ||
const headers = getProp('headers', files) | ||
headers !== void 0 && headers.forEach(head => { | ||
xhr.setRequestHeader(head.name, head.value) | ||
}) | ||
this.xhrs.push(xhr) | ||
file.xhr = xhr | ||
file.__abort = xhr.abort | ||
this.__emit('uploading', { files, xhr }) | ||
if (getProp('sendRaw', file) === true) { | ||
xhr.send(file) | ||
} | ||
else { | ||
form.append(getProp('fieldName', file), file) | ||
xhr.send(form) | ||
} | ||
} | ||
@@ -335,0 +257,0 @@ }, |
import { css } from '../utils/dom.js' | ||
import { position, stop } from '../utils/event.js' | ||
import Platform from '../plugins/Platform.js' | ||
@@ -84,3 +85,4 @@ function showRipple (evt, el, ctx, forceCenter) { | ||
click (evt) { | ||
if (ctx.enabled === true) { | ||
// on ENTER in form IE emits a PointerEvent with negative client cordinates | ||
if (ctx.enabled === true && (Platform.is.ie !== true || evt.clientX >= 0)) { | ||
showRipple(evt, el, ctx, evt.qKeyEvent === true) | ||
@@ -87,0 +89,0 @@ } |
@@ -56,2 +56,4 @@ import Vue from 'vue' | ||
inheritAttrs: false, | ||
render: h => this.__render(h), | ||
@@ -58,0 +60,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
5470105
121353