feat: VerticalTabs puts its tabs in a framed column instead of a divider line, so the active tab no longer runs into it AdminForth/2005

Author: ivictbor

adminforth/design/system.html

@@ -312,6 +312,7 @@
 .vtab.is-on { background: var(--surface-3); color: var(--text); font-weight: 500; }
 .vtab.is-on .i { color: var(--text); }
 .vtab .trail { margin-left: auto; }
+.vtabs { display: flex; flex-direction: column; gap: 2px; align-self: flex-start; padding: 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
 
 /* tooltip, toast, dialog */
 .tip { display: inline-flex; align-items: center; gap: 8px; max-width: 240px; padding: 6px 9px; border-radius: 6px; background: var(--ink); color: var(--on-ink); font-size: 12px; line-height: 16px; font-weight: 500; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .3); }
@@ -2352,17 +2353,17 @@ <h3 class="t-h3">Storage adapter</h3>
   </section>
 
   <section class="sec">
-    <div class="sec-head"><span class="sec-name">&lt;VerticalTabs&gt;</span><span class="t-sm t-muted">gray pill marks the active tab, same as the sidebar</span></div>
+    <div class="sec-head"><span class="sec-name">&lt;VerticalTabs&gt;</span><span class="t-sm t-muted">tabs sit in a framed column, gray pill marks the active tab, same as the sidebar</span></div>
     <div class="grid3">
       <div class="tile">
         <div class="tile-stage top">
-          <div style="display: flex; gap: 16px">
-            <div role="tablist" aria-orientation="vertical" style="width: 140px; display: flex; flex-direction: column; gap: 2px">
+          <div style="display: flex; gap: 24px">
+            <div class="vtabs" role="tablist" aria-orientation="vertical" style="width: 140px">
               <button class="vtab is-on" type="button" role="tab">General</button>
               <button class="vtab" type="button" role="tab">Engine</button>
               <button class="vtab" type="button" role="tab">Features</button>
             </div>
-            <div style="flex: 1; display: flex; flex-direction: column; gap: 6px; padding-left: 16px; border-left: 1px solid var(--border)">
+            <div style="flex: 1; display: flex; flex-direction: column; gap: 6px">
               <span class="label">Trim</span><label class="input input-sm"><input type="text" value="Base" aria-label="Trim"></label>
             </div>
           </div>
@@ -2371,7 +2372,7 @@ <h3 class="t-h3">Storage adapter</h3>
       </div>
       <div class="tile">
         <div class="tile-stage top">
-          <div role="tablist" aria-orientation="vertical" style="width: 200px; display: flex; flex-direction: column; gap: 2px">
+          <div class="vtabs" role="tablist" aria-orientation="vertical" style="width: 200px">
             <button class="vtab" type="button" role="tab"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>Profile</button>
             <button class="vtab is-on" type="button" role="tab"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>Security</button>
             <button class="vtab" type="button" role="tab"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"></path><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"></path></svg>Notifications</button>

adminforth/spa/src/afcl/VerticalTabs.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="md:flex">
-    <div :class="mergeClasses('md:me-4 mb-4 md:mb-0 mr-6 md:mr-0 md:min-w-[11rem]', tabsClass)">
+  <div class="afcl-vertical-tabs md:flex">
+    <div :class="mergeClasses('afcl-vertical-tabs-list mb-4 md:mb-0 md:me-6 md:self-start md:min-w-[11rem] p-1 rounded-lg border border-lightCardBorder bg-lightCardBackground dark:border-darkCardBorder dark:bg-darkCardBackground', tabsClass)">
       <slot name="tabs-header"></slot>
       <ul class="space-y-0.5 text-sm">
         <li v-for="tab in tabs" :key="`${tab}-tab-controll`">
@@ -19,7 +19,7 @@
         </li>
       </ul>
     </div>
-    <div :class="mergeClasses('w-full md:ps-6 md:border-s md:border-lightFormBorder dark:md:border-darkFormBorder text-sm text-lightVerticalTabsSlotText dark:text-darkVerticalTabsSlotText', contentClass)">
+    <div :class="mergeClasses('afcl-vertical-tabs-content w-full text-sm text-lightVerticalTabsSlotText dark:text-darkVerticalTabsSlotText', contentClass)">
       <slot :name="activeTab"></slot>
     </div>
   </div>
@@ -35,7 +35,7 @@ import { mergeClasses } from './classMerge';
   const props = withDefaults(defineProps<{
     activeTab?: string;
     hideTabesWhenSingle?: boolean;
-    // override the default classes of the tab list column and of the content, e.g. paddings or the divider
+    // override the default classes of the tab list column and of the content, e.g. margins or the frame of the column
     tabsClass?: ClassNameValue;
     contentClass?: ClassNameValue;
   }>(), {

adminforth/spa/src/views/SettingsView.vue

@@ -10,8 +10,8 @@
       ref="VerticalTabsRef"
       v-model:active-tab="activeTab"
       class="flex flex-col @4xl:flex-row @4xl:min-h-[40rem] overflow-hidden rounded-xl border border-lightCardBorder bg-lightCardBackground dark:border-darkCardBorder dark:bg-darkCardBackground"
-      tabsClass="m-0 md:m-0 @4xl:w-64 shrink-0 px-3 py-4 @4xl:py-5 border-b @4xl:border-b-0 @4xl:border-e border-lightCardBorder dark:border-darkCardBorder bg-lightVerticalTabsBackground dark:bg-darkVerticalTabsBackground"
-      contentClass="min-w-0 overflow-x-auto p-6 md:border-s-0"
+      tabsClass="m-0 md:m-0 md:self-stretch @4xl:w-64 shrink-0 px-3 py-4 @4xl:py-5 rounded-none border-0 border-b @4xl:border-b-0 @4xl:border-e border-lightCardBorder dark:border-darkCardBorder bg-lightVerticalTabsBackground dark:bg-darkVerticalTabsBackground"
+      contentClass="min-w-0 overflow-x-auto p-6"
       @update:active-tab="setURL({slug: $event, pageLabel: ''})"
     >
       <template #tabs-header>

documentation/docs/tutorial/03-Customization/15-afcl.md

@@ -487,7 +487,7 @@ import { IconCircleUser, IconLayoutGrid } from '@iconify-prerendered/vue-lucide'
 
 ### In a card
 
-`tabsClass` and `contentClass` add classes to the column of tabs and to the content, they override the default ones (the margins of the column, the padding and the divider of the content). The `tabs-header` slot goes above the tabs. This is how the settings page puts its tabs on a tinted pane of a card:
+`tabsClass` and `contentClass` add classes to the column of tabs and to the content, they override the default ones (the margins and the frame of the column). The `tabs-header` slot goes above the tabs. This is how the settings page puts its tabs on a tinted pane of a card:
 
 <AfclPreview id="vertical-tabs-card">
 
@@ -499,8 +499,8 @@ import { IconLink, IconMonitorSmartphone } from '@iconify-prerendered/vue-lucide
 ```html
 <VerticalTabs
   class="overflow-hidden rounded-xl border border-lightCardBorder bg-lightCardBackground dark:border-darkCardBorder dark:bg-darkCardBackground"
-  tabsClass="m-0 md:m-0 md:w-64 px-3 py-4 border-b md:border-b-0 md:border-e border-lightCardBorder dark:border-darkCardBorder bg-lightVerticalTabsBackground dark:bg-darkVerticalTabsBackground"
-  contentClass="p-5 md:ps-6 md:border-s-0"
+  tabsClass="m-0 md:m-0 md:self-stretch md:w-64 shrink-0 px-3 py-4 rounded-none border-0 border-b md:border-b-0 md:border-e border-lightCardBorder dark:border-darkCardBorder bg-lightVerticalTabsBackground dark:bg-darkVerticalTabsBackground"
+  contentClass="p-5 md:ps-6"
 >
   <template #tabs-header>
     <p class="px-2.5 pb-3 font-semibold text-lightCardTitle dark:text-darkCardTitle">Settings</p>