Merge pull request #265 from vladcazacu/feature-load-contents-when-ta…

…b-is-active

rendering the contents of a tab only if it's active

README.md

@@ -191,6 +191,7 @@ As of v1.4.0 it's possible to use a `Tab` class instead of an array to represent
 | name        | `string`            | `null`      | The name of the tab, used for the slug.  Defaults to the title if not set                                                                                              |
 | showIf      | `bool` or `Closure` | `null`      | If the result is truthy the tab will be shown.  `showIf` takes priority over `showUnless` and if neither are set, `true` is assumed.                                   |
 | showUnless  | `bool` or `Closure` | `null`      | If the result is falsy the tab will be shown.  `showIf` takes priority over `showUnless` and if neither are set, `true` is assumed.                                    |
+| preload  | `bool` or `Closure` | `null`      | If the result is truthy the tab will be rendered on the initial page load. This may affect initial page load performance, as any requests required by the tab's fields will also be executed.                                     |
 | bodyClass   | `string` or `array` | Empty array | A string or string array of classes to add to the tab's body.  This sets the `bodyClass` property, if you want to append you can use `addBodyClass` instead.           |
 
 ## Customization

resources/js/components/DetailTabs.vue

@@ -14,8 +14,8 @@
 
       <div class="tab-card"
            :class="[
-          panel.showTitle && !panel.showToolbar ? 'tabs-mt-3' : ''
-        ]"
+             panel.showTitle && !panel.showToolbar ? 'tabs-mt-3' : ''
+           ]"
       >
         <div id="tabs">
           <div class="block">
@@ -42,14 +42,14 @@
             :key="'related-tabs-fields' + index"
             :ref="getTabRefName(tab)"
             :class="[
-                        'tab',
-                        tab.slug,
-                        tab.classes
-                    ]"
+                'tab',
+                tab.slug,
+                tab.classes
+            ]"
             :label="tab.name"
             v-show="getIsTabCurrent(tab)"
         >
-          <div class="divide-y divide-gray-100 dark:divide-gray-700" :class="getBodyClass(tab)">
+          <div class="divide-y divide-gray-100 dark:divide-gray-700" :class="getBodyClass(tab)" v-if="tab.properties.preload || getIsTabCurrent(tab)">
             <KeepAlive v-for="(field, index) in tab.fields" :key="index">
               <component
                   :is="getComponentName(field)"

src/Tab.php

@@ -32,6 +32,13 @@ class Tab implements TabContract, JsonSerializable, Arrayable
     /** @var bool|Closure|null */
     protected $showUnless;
 
+    /**
+     * Whether to preload the contents of the tab on the initial page load
+     * 
+     * @var bool|Closure|null 
+     * */
+    protected $preload;
+
     /** @var string[] */
     protected $bodyClass = [];
 
@@ -63,6 +70,13 @@ public function name(string $name): self
         return $this;
     }
 
+    public function preload(bool $preload = true): self
+    {
+        $this->preload = $preload;
+
+        return $this;
+    }
+
     public function showIf($condition): self
     {
         if (is_bool($condition) || is_callable($condition)) {
@@ -114,6 +128,7 @@ public function toArray(): array
             'slug' => $this->getSlug(),
             'shouldShow' => $this->shouldShow(),
             'bodyClass' => $this->getBodyClass(),
+            'preload' => $this->getPreload(),
         ];
     }
 
@@ -133,6 +148,14 @@ public function getTitle(): string
         return (string) $this->resolve($this->title);
     }
 
+    /**
+     * @return Closure|bool
+     */
+    public function getPreload(): bool
+    {
+        return (bool) $this->resolve($this->preload);
+    }
+
     private function resolve($value)
     {
         if ($value instanceof Closure) {