feat: autoMinSize => autoSize, autoMaxSize => autoBoundaryMaxSize, cl…

…oses #834 BREAKING CHANGE - `autoMinSize` is deprecated, use `autoSize="min"` instead - `autoMaxSize` is deprecated, use `autoBoundaryMaxSize` instead
Akryum · Mar 11, 2022 · b198353 · b198353
1 parent f2199da
commit b198353
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 20 deletions.
diff --git a/packages/docs/src/.vuepress/components/theme-editor/ConfigEditor.vue b/packages/docs/src/.vuepress/components/theme-editor/ConfigEditor.vue
@@ -515,14 +515,14 @@ export default {
         </div>
 
         <div class="flex space-x-3 hover:bg-gray-50 p-2">
-          <span>Auto min size:</span>
+          <span>Auto size:</span>
           <label
-            v-for="value of [undefined, true, false]"
+            v-for="value of [undefined, true, false, 'min', 'max']"
             :key="value"
             class="flex items-center space-x-1"
           >
             <input
-              v-model="theme.config.autoMinSize"
+              v-model="theme.config.autoSize"
               type="radio"
               :value="value"
             >
@@ -531,14 +531,14 @@ export default {
         </div>
 
         <div class="flex space-x-3 hover:bg-gray-50 p-2">
-          <span>Auto max size:</span>
+          <span>Auto boundary max size:</span>
           <label
             v-for="value of [undefined, true, false]"
             :key="value"
             class="flex items-center space-x-1"
           >
             <input
-              v-model="theme.config.autoMaxSize"
+              v-model="theme.config.autoBoundaryMaxSize"
               type="radio"
               :value="value"
             >

diff --git a/packages/docs/src/.vuepress/components/theme-editor/state.js b/packages/docs/src/.vuepress/components/theme-editor/state.js
@@ -114,8 +114,8 @@ const emptyTheme = [
   'arrowOverflow',
   'overflowPadding',
   'preventOverflow',
-  'autoMinSize',
-  'autoMaxSize',
+  'autoSize',
+  'autoBoundaryMaxSize',
   'flip',
   'shift',
   'shiftCrossAxis',
@@ -141,6 +141,14 @@ export function loadTheme (themeName) {
       theme.styles.dark = { ...theme.styles['inner-dark'] }
     }
 
+    // Migrate deprecated settings
+    if (theme.config.autoMinSize != null) {
+      theme.config.autoSize = theme.config.autoMinSize ? 'min' : false
+    }
+    if (theme.config.autoMaxSize != null) {
+      theme.config.autoBoundaryMaxSize = theme.config.autoMaxSize
+    }
+
     state.theme = theme
     storeValue(LAST_THEME_KEY, themeName)
   } else {

diff --git a/packages/docs/src/api/README.md b/packages/docs/src/api/README.md
@@ -393,24 +393,31 @@ Example:
 
 [Live example](../guide/css.md#zoom-show-only-example)
 
-### `autoMinSize`
+### `autoSize`
 
-Boolean: set a minimum size to the popper `inner` container depending on the size of the reference.
+`Boolean | 'min' | 'max'`: set the size of the popper `inner` container depending on the size of the reference.
 
-If the final placement is `top-*` or `bottom-*`, the `minWidth` will be the reference width.
+- If the final placement is `top-*` or `bottom-*`, the reference width will be taken into account.
+- If the final placement is `left-*` or `right-*`, the reference height wll be taken into account.
 
-If the final placement is `left-*` or `right-*`, the `minHeight` will be the reference height.
+Possible values:
+
+- `true`: the popper container will be set to the same size as the reference element.
+- `'min'`: the popper container will be set to the minimum size of the reference element.
+- `'max'`: the popper container will be set to the maximum size of the reference element.
 
 ```vue
-<VDropdown auto-min-size />
+<VDropdown auto-size />
+<VDropdown auto-size="min" />
+<VDropdown auto-size="max" />
 ```
 
-### `autoMaxSize`
+### `autoBoundaryMaxSize`
 
 Boolean: let floating vue resize the popper inner container to the available size (using `max-width` and `max-height`). It's very useful for a dropdown that should automatically shrink its size when it reaches the boundary.
 
 ```vue
-<VDropdown auto-max-size />
+<VDropdown auto-boundary-max-size />
 ```
 
 ### `preventOverflow`

diff --git a/packages/floating-vue/src/components/Popper.ts b/packages/floating-vue/src/components/Popper.ts
@@ -178,16 +178,32 @@ export default () => ({
       default: defaultPropFactory('computeTransformOrigin'),
     },
 
+    /**
+     * @deprecated
+     */
     autoMinSize: {
       type: Boolean,
       default: defaultPropFactory('autoMinSize'),
     },
 
+    autoSize: {
+      type: [Boolean, String],
+      default: defaultPropFactory('autoSize'),
+    },
+
+    /**
+     * @deprecated
+     */
     autoMaxSize: {
       type: Boolean,
       default: defaultPropFactory('autoMaxSize'),
     },
 
+    autoBoundaryMaxSize: {
+      type: Boolean,
+      default: defaultPropFactory('autoBoundaryMaxSize'),
+    },
+
     preventOverflow: {
       type: Boolean,
       default: defaultPropFactory('preventOverflow'),
@@ -326,6 +342,12 @@ export default () => ({
   created () {
     this.$_isDisposed = true
     this.randomId = `popper_${[Math.random(), Date.now()].map(n => n.toString(36).substring(2, 10)).join('_')}`
+    if (this.autoMinSize) {
+      console.warn('[floating-vue] `autoMinSize` option is deprecated. Use `autoSize="min"` instead.')
+    }
+    if (this.autoMaxSize) {
+      console.warn('[floating-vue] `autoMaxSize` option is deprecated. Use `autoBoundaryMaxSize` instead.')
+    }
   },
 
   mounted () {
@@ -489,11 +511,12 @@ export default () => ({
       }
 
       // Auto min size for the popper inner
-      if (this.autoMinSize) {
+      if (this.autoMinSize || this.autoSize) {
+        const autoSize = this.autoSize ? this.autoSize : this.autoMinSize ? 'min' : null
         options.middleware.push({
-          name: 'autoMinSize',
+          name: 'autoSize',
           fn: ({ rects, placement, middlewareData }) => {
-            if (middlewareData.autoMinSize?.skip) {
+            if (middlewareData.autoSize?.skip) {
               return {}
             }
             let width: number
@@ -504,8 +527,8 @@ export default () => ({
               height = rects.reference.height
             }
             // Apply and re-compute
-            this.$_innerNode.style.minWidth = width != null ? `${width}px` : null
-            this.$_innerNode.style.minHeight = height != null ? `${height}px` : null
+            this.$_innerNode.style[autoSize === 'min' ? 'minWidth' : autoSize === 'max' ? 'maxWidth' : 'width'] = width != null ? `${width}px` : null
+            this.$_innerNode.style[autoSize === 'min' ? 'minHeight' : autoSize === 'max' ? 'maxHeight' : 'height'] = height != null ? `${height}px` : null
             return {
               data: {
                 skip: true,
@@ -519,7 +542,7 @@ export default () => ({
       }
 
       // Auto max size for the popper inner
-      if (this.autoMaxSize) {
+      if (this.autoMaxSize || this.autoBoundaryMaxSize) {
         // Reset size to bestFit strategy can apply
         this.$_innerNode.style.maxWidth = null
         this.$_innerNode.style.maxHeight = null