Merge pull request #6375 from pdanpdan/q-select-menu-props

feat(QSelect, QBtnDropdown): Pass menu anchor props (anchor, self, offset), allow select options to shrink width #5895
quasarframework · Feb 14, 2020 · 5f5a5d3 · 5f5a5d3
2 parents 7a4899b + d388fe7
commit 5f5a5d3
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 6 deletions.
diff --git a/ui/src/components/btn-dropdown/QBtnDropdown.js b/ui/src/components/btn-dropdown/QBtnDropdown.js
@@ -26,6 +26,7 @@ export default Vue.extend({
     cover: Boolean,
     persistent: Boolean,
     autoClose: Boolean,
+
     menuAnchor: {
       type: String,
       default: 'bottom right'
@@ -34,6 +35,7 @@ export default Vue.extend({
       type: String,
       default: 'top right'
     },
+    menuOffset: Array,
 
     disableMainBtn: Boolean,
     disableDropdown: Boolean
@@ -77,6 +79,7 @@ export default Vue.extend({
           autoClose: this.autoClose,
           anchor: this.menuAnchor,
           self: this.menuSelf,
+          offset: this.menuOffset,
           contentClass: this.contentClass,
           contentStyle: this.contentStyle,
           separateClosePopup: true

diff --git a/ui/src/components/btn-dropdown/QBtnDropdown.json b/ui/src/components/btn-dropdown/QBtnDropdown.json
@@ -81,6 +81,7 @@
         "center left", "center middle", "center right",
         "bottom left", "bottom center", "bottom right"
       ],
+      "default": "bottom right",
       "examples": [ "top left", "bottom right" ],
       "category": "position"
     },
@@ -93,8 +94,17 @@
         "center left", "center middle", "center right",
         "bottom left", "bottom center", "bottom right"
       ],
+      "default": "top right",
       "examples": [ "top left", "bottom right" ],
       "category": "position"
+    },
+
+    "menu-offset": {
+      "type": "Array",
+      "desc": "An array of two numbers to offset the menu horizontally and vertically in pixels",
+      "examples": [ "[8, 8]", "[5, 10]" ],
+      "category": "position",
+      "addedIn": "v1.9.2"
     }
   },
 

diff --git a/ui/src/components/select/QSelect.js b/ui/src/components/select/QSelect.js
@@ -61,9 +61,15 @@ export default Vue.extend({
       default: null
     },
     optionsSelectedClass: String,
-    optionsCover: Boolean,
     optionsSanitize: Boolean,
 
+    optionsCover: Boolean,
+
+    menuShrink: Boolean,
+    menuAnchor: String,
+    menuSelf: String,
+    menuOffset: Array,
+
     popupContentClass: String,
     popupContentStyle: [String, Array, Object],
 
@@ -1031,8 +1037,11 @@ export default Vue.extend({
         ref: 'menu',
         props: {
           value: this.menu,
-          fit: true,
+          fit: this.menuShrink !== true,
           cover: this.optionsCover === true && this.noOptions !== true && this.useInput !== true,
+          anchor: this.menuAnchor,
+          self: this.menuSelf,
+          offset: this.menuOffset,
           contentClass: this.menuContentClass,
           contentStyle: this.popupContentStyle,
           dark: this.isOptionsDark,

diff --git a/ui/src/components/select/QSelect.json b/ui/src/components/select/QSelect.json
@@ -119,16 +119,57 @@
       "category": "options"
     },
 
+    "options-sanitize": {
+      "extends": "sanitize",
+      "desc": "Force use of textContent instead of innerHTML to render options; Use it when the options might be unsafe (from user input); Does NOT apply when using 'option' slot!",
+      "category": "options"
+    },
+
     "options-cover": {
       "type": "Boolean",
       "desc": "Expanded menu will cover the component (will not work along with 'use-input' prop for obvious reasons)",
       "category": "options"
     },
 
-    "options-sanitize": {
-      "extends": "sanitize",
-      "desc": "Force use of textContent instead of innerHTML to render options; Use it when the options might be unsafe (from user input); Does NOT apply when using 'option' slot!",
-      "category": "options"
+    "menu-shrink": {
+      "type": "Boolean",
+      "desc": "Allow the options list to be narrower than the field (only in menu mode)",
+      "category": "options",
+      "addedIn": "v1.9.2"
+    },
+
+    "menu-anchor": {
+      "type": "String",
+      "desc": "Two values setting the starting position or anchor point of the options list relative to the field (only in menu mode)",
+      "values": [
+        "top left", "top middle", "top right",
+        "center left", "center middle", "center right",
+        "bottom left", "bottom center", "bottom right"
+      ],
+      "examples": [ "top left", "bottom right" ],
+      "category": "position",
+      "addedIn": "v1.9.2"
+    },
+
+    "menu-self": {
+      "type": "String",
+      "desc": "Two values setting the options list's own position relative to its target (only in menu mode)",
+      "values": [
+        "top left", "top middle", "top right",
+        "center left", "center middle", "center right",
+        "bottom left", "bottom center", "bottom right"
+      ],
+      "examples": [ "top left", "bottom right" ],
+      "category": "position",
+      "addedIn": "v1.9.2"
+    },
+
+    "menu-offset": {
+      "type": "Array",
+      "desc": "An array of two numbers to offset the options list horizontally and vertically in pixels (only in menu mode)",
+      "examples": [ "[8, 8]", "[5, 10]" ],
+      "category": "position",
+      "addedIn": "v1.9.2"
     },
 
     "popup-content-class": {