#5 #11 Add a hack to use full-width while keeping original card order

Author: alies-dev

README.md

@@ -39,7 +39,8 @@ public function cards()
      - `->view('path.to.view', [])`: Specify blade view file and optionally pass an array of data to view.
  - Styling
     - `->center(false)`: Center card's content. `false` by default. 
-    - `->withoutCardStyles(true)`: Whether to use standard Nova Card styles for a card (background, padding, etc). `false` by default. 
+    - `->withoutCardStyles(true)`: Whether to use standard Nova Card styles for a card (background, padding, etc). `false` by default.
+    - `->forceFullWidth(true)`: Force the card to be full width. A fix for [nova cards order](https://github.com/laravel/nova-issues/issues/1895). 
 
 
 ## Why this package?

dist/js/card.js

@@ -1,3 +1,3 @@
 {
-    "/js/card.js": "/js/card.js?id=f3dee4c8ebf64203b09e"
+    "/js/card.js": "/js/card.js?id=b29fdbc6a04f01db20f0"
 }

dist/mix-manifest.json

@@ -26,7 +26,13 @@
 
                 return classes;
             },
-        }
+        },
+        mounted() {
+            if (this.card.forceFullWidth) {
+                this.$parent.$el.classList.remove('w-5/6');
+                this.$parent.$el.classList.add('w-full');
+            }
+        },
     }
 </script>
 

resources/js/components/Card.vue

@@ -27,6 +27,7 @@ public function __construct($component = null)
         $this->withMeta([
             'center' => false,
             'withoutCardStyles' => false,
+            'forceFullWidth' => false,
             'content' => '',
         ]);
     }
@@ -90,6 +91,22 @@ public function center(bool $centerContent = true)
         return $this->withMeta(['center' => $centerContent]);
     }
 
+    /**
+     * Force Nova to apply full width for a card.
+     * Nova has undocumented feature to auto-order cards based on width and put
+     * full-width cards at the bottom. If you want to display full-width cards
+     * not at the end, you should use with=1/3 or 2/3 and this method.
+     * @see https://github.com/laravel/nova-issues/issues/1895#issuecomment-543684472
+     *
+     * @param bool $forceFullWidth
+     *
+     * @return HtmlCard
+     */
+    public function forceFullWidth(bool $forceFullWidth = true)
+    {
+        return $this->withMeta(['forceFullWidth' => $forceFullWidth]);
+    }
+
     /**
      * Whether to use standard Nova Card styles for a card (background, padding, etc)
      *