Merge pull request #208 from marcfilipan/master

V2.0.6
eminiarts · May 13, 2022 · 71dba1f · 71dba1f
2 parents 84980cb + c3bb62a
commit 71dba1f
Show file tree

Hide file tree

Showing 10 changed files with 138 additions and 56 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Changelog
 
+## 2.0.6 - 2022-05-13
+- Added functionality to specify the colors used for the current tab using Tabs::make()->withCurrentColor('sky') (default is sky)
+- Added functionality to specify the colors used for tabs with errors using Tabs::make()->withErrorColor('red') (default is red)
+- Color options for both are all the 500 variants based on the default tailwind colors, reference: https://tailwindcss.com/docs/customizing-colors
+
 ## 2.0.5 - 2022-05-13
 - Fixed that errors on form submissions are now reflected on tabs
 

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
@@ -9,7 +9,7 @@
     margin-bottom: 0;
 }
 .tab-group .tab-menu {
-    @apply tabs-relative tabs-z-0 tabs-divide-x tabs-divide-gray-200 tabs-border-gray-200 dark:tabs-border-gray-700 dark:tabs-divide-gray-700 tabs-bg-white dark:tabs-bg-gray-800 tabs-rounded-t-lg tabs-border-b tabs-mx-auto tabs-overflow-x-auto;
+    @apply tabs-border-l-gray-200 tabs-border-r-gray-200 tabs-border-gray-200  tabs-relative tabs-z-0 tabs-divide-x dark:tabs-border-gray-700 dark:tabs-divide-gray-700 tabs-bg-white dark:tabs-bg-gray-800 tabs-rounded-t-lg tabs-border-b tabs-mx-auto tabs-overflow-x-auto;
     display: flex; /* Set flex display manually to circumvent tailwind circular dependency */
 }
 .tab-group .tab-item {
@@ -37,9 +37,6 @@ form .tab-group .tab.fields-tab {
 .tab-group h1 + .flex + div {
     @apply tabs-shadow-none tabs-rounded-t-none tabs-rounded-b-lg;
 }
-.tab-has-error {
-    @apply tabs-text-red-500 tabs-border-b-2 tabs-border-b-red-500 !important
-}
 .tab-has-error:after {
     content: ' *';
 }
diff --git a/resources/js/components/DetailTabs.vue b/resources/js/components/DetailTabs.vue
@@ -27,21 +27,11 @@
                   v-for="(tab, key) in getSortedTabs(tabs)"
                   :key="key"
                   :dusk="tab.slug + '-tab'"
-                  :class="getIsTabCurrent(tab) ? 'active text-primary-500 tabs-font-bold' : 'tabs-text-gray-600 hover:tabs-text-gray-800 dark:tabs-text-gray-400 hover:dark:tabs-text-gray-200'"
+                  :class="getIsTabCurrent(tab) ? 'active tabs-text-' + getCurrentColor() + '-500 tabs-font-bold tabs-border-b-2 tabs-border-b-' + getCurrentColor() + '-500' : 'tabs-text-gray-600 hover:tabs-text-gray-800 dark:tabs-text-gray-400 hover:dark:tabs-text-gray-200'"
                   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"
-                ></span>
-                <span
-                    v-else
-                    aria-hidden="true"
-                    class="tabs-bg-transparent tabs-absolute tabs-inset-x-0 tabs-bottom-0 tabs-h-0.5"
-                ></span>
               </a>
             </nav>
           </div>

diff --git a/resources/js/components/FormTabs.vue b/resources/js/components/FormTabs.vue
@@ -26,25 +26,13 @@
               <a
                 v-for="(tab, key) in getSortedTabs(tabs)"
                 :key="key"
-                :class="getIsTabCurrent(tab) ? 'active text-primary-500 tabs-border-2 border-primary-500' : 'tabs-text-gray-800 dark:tabs-text-gray-50'"
+                :class="getIsTabCurrent(tab) ? 'active tabs-text-' + getCurrentColor() + '-500 tabs-font-bold tabs-border-b-2 tabs-border-b-' + getCurrentColor() + '-500' : 'tabs-text-gray-600 hover:tabs-text-gray-800 dark:tabs-text-gray-400 hover:dark:tabs-text-gray-200'"
                 :dusk="tab.slug + '-tab'"
                 :ref="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"
-                ></span>
-                <span
-                  v-else
-                  aria-hidden="true"
-                  class="tabs-bg-transparent tabs-absolute tabs-inset-x-0 tabs-bottom-0 tabs-h-0.5"
-                ></span>
--->
               </a>
             </nav>
           </div>

diff --git a/resources/js/mixins/HasTabs.js b/resources/js/mixins/HasTabs.js
@@ -111,17 +111,22 @@ export default {
       Nova.store.tabsListenerRegistered = true;
     }
 
-    this.$watch('validationErrors', (newErrors) => {
-      if (newErrors.errors) {
-        Object.entries(newErrors.errors).forEach(error => {
-          if (error[0] && this.fields.find(x => x.attribute === error[0])) {
-            let field = this.getNestedObject(this.fields, 'attribute', error[0]);
-            let slug = this.getNestedObject(this.fields, 'attribute', error[0]).tabSlug + '-tab';
-            this.$refs[slug][0].classList.add('tab-has-error')
-          }
-        });
-      }
-    })
+    if (this.mode === 'form') {
+      this.$watch('validationErrors', (newErrors) => {
+        if (newErrors.errors) {
+          Object.entries(newErrors.errors).forEach(error => {
+            if (error[0] && this.fields.find(x => x.attribute === error[0])) {
+              let field = this.getNestedObject(this.fields, 'attribute', error[0]);
+              let slug = this.getNestedObject(this.fields, 'attribute', error[0]).tabSlug + '-tab';
+              let addClasses = ['tabs-text-' + this.getErrorColor() + '-500', 'tabs-border-b-2', 'tabs-border-b-' + this.getErrorColor() + '-500', 'tab-has-error']
+              let removeClasses = ['tabs-text-gray-600', 'hover:tabs-text-gray-800', 'dark:tabs-text-gray-400', 'hover:dark:tabs-text-gray-200']
+              this.$refs[slug][0].classList.add(...addClasses)
+              this.$refs[slug][0].classList.remove(...removeClasses)
+            }
+          });
+        }
+      })
+    }
   },
 
   methods: {
@@ -304,6 +309,24 @@ export default {
         return nestedValue;
       });
       return foundObj;
+    },
+
+    /**
+     * Get the color for the current tab
+     *
+     * @returns {*|string}
+     */
+    getCurrentColor() {
+      return this.panel.currentColor ?? 'sky';
+    },
+
+    /**
+     * Get the color for tabs with errors
+     *
+     * @returns {*|string}
+     */
+    getErrorColor() {
+      return this.panel.errorColor ?? 'red';
     }
 
   },