fixed showTitle and showToolbar

elbgoods · Apr 22, 2022 · dc82b58 · dc82b58
1 parent 6491294
commit dc82b58
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 72 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -8,7 +8,7 @@ indent_style = space
 trim_trailing_whitespace = true
 insert_final_newline = true
 
-[*.{yaml,yml}]
+[*.{yaml,yml,vue,js}]
 indent_size = 2
 
 [*.md]

diff --git a/dist/css/field.css b/dist/css/field.css
diff --git a/dist/js/field.js b/dist/js/field.js
diff --git a/resources/css/field.css b/resources/css/field.css
@@ -1,6 +1,10 @@
 @tailwind components;
 @tailwind utilities;
 
+.tab-group + div {
+    @apply tabs-bg-white;
+}
+
 .relationship-tabs-panel.card .flex-no-shrink.ml-auto.mb-6 {
     margin-bottom: 0;
 }
@@ -30,7 +34,3 @@
 .tab-group h1 + .flex + div {
     @apply tabs-shadow-none tabs-rounded-t-none tabs-rounded-b-lg;
 }
-
-.tab-group + div {
-    @apply tabs-bg-white;
-}
diff --git a/resources/js/components/DetailTabs.vue b/resources/js/components/DetailTabs.vue
@@ -1,8 +1,8 @@
 <template>
-  <div id="tabs" :class="darkModeClass">
+  <div :class="darkModeClass">
     <div class="tab-group">
       <slot>
-        <Heading :level="1" v-text="panel.name" v-if="showTitle"/>
+        <Heading :level="1" v-text="panel.name" v-if="panel.showTitle"/>
 
         <p
             v-if="panel.helpText"
@@ -12,7 +12,7 @@
         ></p>
       </slot>
 
-      <div>
+      <div id="tabs">
         <div class="block">
           <nav
               aria-label="Tabs"
@@ -94,10 +94,6 @@ export default {
       default: 'Panel',
     },
 
-    showTitle: {
-      type: Boolean,
-    },
-
     mode: {
       type: String,
       default: 'detail',

diff --git a/resources/js/components/FormTabs.vue b/resources/js/components/FormTabs.vue
@@ -2,82 +2,82 @@
   <div :class="darkModeClass">
     <div class="tab-group">
       <slot>
-        <Heading :level="1" v-text="panel.name" v-if="showTitle" />
+        <Heading v-if="panel.showTitle" :level="1" v-text="panel.name"/>
 
         <p
-            v-if="panel.helpText"
-            :class="panel.helpText ? 'mt-2' : 'mt-3'"
-            class="text-gray-500 text-sm fotabs-semibold italic"
-            v-html="panel.helpText"
+          v-if="panel.helpText"
+          :class="panel.helpText ? 'tabs-mt-2' : 'tabs-mt-3'"
+          class="tabs-text-gray-500 tabs-text-sm tabs-fotabs-semibold tabs-italic"
+          v-html="panel.helpText"
         ></p>
       </slot>
 
       <div id="tabs">
         <div class="block">
           <nav
-              aria-label="Tabs"
-              class="tab-menu"
+            aria-label="Tabs"
+            class="tab-menu"
           >
             <Button
-                v-for="(tab, key) in getSortedTabs(tabs)"
-                :key="key"
-                :dusk="tab.slug + '-tab'"
-                :class="getIsTabCurrent(tab) ? 'active text-primary-500' : 'tabs-text-gray-800 dark:tabs-text-gray-50'"
-                class="tab-item"
-                @click.prevent="handleTabClick(tab)"
+              v-for="(tab, key) in getSortedTabs(tabs)"
+              :key="key"
+              :class="getIsTabCurrent(tab) ? 'active text-primary-500' : 'tabs-text-gray-800 dark:tabs-text-gray-50'"
+              :dusk="tab.slug + '-tab'"
+              class="tab-item"
+              @click.prevent="handleTabClick(tab)"
             >
               <span class="capitalize">{{ tab.properties.title }}</span>
               <span
-                  v-if="getIsTabCurrent(tab)"
-                  aria-hidden="true"
-                  class="bg-primary-500 tabs-absolute tabs-inset-x-0 tabs-bottom-0 tabs-h-0.5"
+                v-if="getIsTabCurrent(tab)"
+                aria-hidden="true"
+                class="bg-primary-500 tabs-absolute tabs-inset-x-0 tabs-bottom-0 tabs-h-0.5"
               ></span>
               <span
-                  v-else
-                  aria-hidden="true"
-                  class="tabs-bg-transparent tabs-absolute tabs-inset-x-0 tabs-bottom-0 tabs-h-0.5"
+                v-else
+                aria-hidden="true"
+                class="tabs-bg-transparent tabs-absolute tabs-inset-x-0 tabs-bottom-0 tabs-h-0.5"
               ></span>
             </Button>
           </nav>
         </div>
       </div>
 
       <div
-          v-for="(tab, index) in getSortedTabs(tabs)"
-          v-show="getIsTabCurrent(tab)"
-          :key="'related-tabs-fields' + index"
-          :ref="getTabRefName(tab)"
-          :class="[
+        v-for="(tab, index) in getSortedTabs(tabs)"
+        v-show="getIsTabCurrent(tab)"
+        :key="'related-tabs-fields' + index"
+        :ref="getTabRefName(tab)"
+        :class="[
                       'tab fields-tab',
                       getIsTabCurrent(tab) ? 'block' : 'hidden',
                       tab.slug,
                   ]"
-          :label="tab.name"
+        :label="tab.name"
       >
         <div :class="getBodyClass(tab)">
           <KeepAlive>
             <component
-                :is="getComponentName(field)"
-                v-for="(field, index) in tab.fields"
-                :key="'tab-' + index"
-                ref="fields"
-                :class="{'remove-bottom-border': index === tab.fields.length - 1}"
-                :errors="validationErrors"
-                :resource-id="resourceId"
-                :resource-name="resourceName"
-                :related-resource-name="relatedResourceName"
-                :related-resource-id="relatedResourceId"
-                :field="field"
-                :via-resource="viaResource"
-                :via-resource-id="viaResourceId"
-                :via-relationship="viaRelationship"
-                :shown-via-new-relation-modal="shownViaNewRelationModal"
-                :form-unique-id="formUniqueId"
-                @field-changed="$emit('field-changed')"
-                @file-deleted="$emit('update-last-retrieved-at-timestamp')"
-                @file-upload-started="$emit('file-upload-started')"
-                @file-upload-finished="$emit('file-upload-finished')"
-                :show-help-text="field.helpText != null"
+              :is="getComponentName(field)"
+              v-for="(field, index) in tab.fields"
+              :key="'tab-' + index"
+              ref="fields"
+              :class="{'remove-bottom-border': index === tab.fields.length - 1}"
+              :errors="validationErrors"
+              :field="field"
+              :form-unique-id="formUniqueId"
+              :related-resource-id="relatedResourceId"
+              :related-resource-name="relatedResourceName"
+              :resource-id="resourceId"
+              :resource-name="resourceName"
+              :show-help-text="field.helpText != null"
+              :shown-via-new-relation-modal="shownViaNewRelationModal"
+              :via-relationship="viaRelationship"
+              :via-resource="viaResource"
+              :via-resource-id="viaResourceId"
+              @field-changed="$emit('field-changed')"
+              @file-deleted="$emit('update-last-retrieved-at-timestamp')"
+              @file-upload-started="$emit('file-upload-started')"
+              @file-upload-finished="$emit('file-upload-finished')"
             />
           </KeepAlive>
         </div>
@@ -108,10 +108,6 @@ export default {
       required: true,
     },
 
-    showTitle: {
-      type: Boolean,
-    },
-
     name: {
       default: 'Panel',
     },
@@ -197,7 +193,7 @@ export default {
 
     this.observer.observe(document.documentElement, {
       attributes: true,
-      attributeOldValue : true,
+      attributeOldValue: true,
       attributeFilter: ['class'],
     });
 
@@ -242,8 +238,8 @@ export default {
      */
     getComponentName(field) {
       return field.prefixComponent
-          ? 'form-' + field.component
-          : field.component
+        ? 'form-' + field.component
+        : field.component
     },
 
     /**

diff --git a/src/Tabs.php b/src/Tabs.php
@@ -11,6 +11,7 @@
 use Illuminate\Support\Collection;
 use Laravel\Nova\Contracts\ListableField;
 use Laravel\Nova\Panel;
+use Laravel\Nova\ResourceToolElement;
 use function is_array;
 use function is_callable;
 
@@ -196,10 +197,10 @@ public function defaultSearch(bool $value = true): self
     /**
      * Whether the show the title
      *
-     * @param  bool  $show
+     * @param bool $show
      * @return $this
      */
-    public function showTitle($show = true): self
+    public function showTitle(bool $show = true): self
     {
         $this->showTitle = $show;
 
@@ -215,7 +216,7 @@ public function jsonSerialize(): array
     {
         $result = array_merge(parent::jsonSerialize(), [
             'defaultSearch' => $this->defaultSearch,
-            'showTitle' => $this->showTitle
+            'showTitle' => $this->showTitle,
         ]);
 
         return $result;

diff --git a/src/Traits/HasTabs.php b/src/Traits/HasTabs.php
@@ -28,6 +28,7 @@ protected function panelsWithDefaultLabel(Collection $panels, FieldCollection $f
         $panels->transform(function($panel, $key) use($relationshipUnderTabs) {
 
             if ($panel->component === 'tabs') {
+
                 foreach ($relationshipUnderTabs as $rel) {
                     if ($panel->meta['fields'][0]->assignedPanel === $rel->meta['fields'][0]->assignedPanel) {
                         $panel->meta['fields'][] = $rel->meta['fields'][0];
@@ -38,13 +39,20 @@ protected function panelsWithDefaultLabel(Collection $panels, FieldCollection $f
             return $panel;
         });
 
+        $panels->where('component', 'tabs')->transform(function($panel, $key) use($relationshipUnderTabs) {
+            return $panel->withMeta([
+                'showToolbar' => $panel->meta['fields'][0]->assignedPanel->showToolbar,
+                'showTitle' => $panel->meta['fields'][0]->assignedPanel->showTitle,
+            ]);
+        });
+
         return $panels->values()
             ->when($panels->where('component', 'tabs')->isEmpty(), function ($panels) use ($label, $fields) {
                 return $panels->prepend(
-                    Tabs::make($label, $fields)->withMeta(['fields' => $fields])->withToolbar()
+                    Tabs::make($label, $fields)->withMeta(['fields' => $fields])
                 );
             })->tap(function ($panels) use ($label): void {
-                $panels->where('component', 'tabs')->first()->withToolbar();
+                $panels->where('component', 'tabs')->first();
             });
     }
 }