adminforth 4.2.0 → 4.3.1

package/commands/createApp/templates/.agents/skills/adminforth-custom-vue/SKILL.md.hbs

@@ -51,6 +51,10 @@ not wait for a follow-up prompt about styling or dark mode.
 8. **Never build Tailwind class names dynamically.** `custom/` is copied into the SPA sources and scanned
    statically by Tailwind, so `` `text-${color}-600` `` produces no CSS. Write full class strings and pick
    between them.
+9. **Layouts follow their container, not the screen.** The sidebar and the agent panel take part of the
+   screen, so a page or panel which splits into columns is a Tailwind size container: `@container` on its
+   root and `@md:`, `@4xl:` variants on the grid instead of `md:`, `lg:`. Give the grid `grid-cols-1` as its
+   base, otherwise a wide chart or table stretches the single column past the page.
 
 ## Dark Theme Self-Check
 
@@ -121,9 +125,11 @@ custom/
 
 ```vue
 <template>
-  <section class="grid gap-4 md:grid-cols-2">
-    <OrdersTotals :record="record" />
-    <OrdersFilters :meta="meta" />
+  <section class="@container">
+    <div class="grid grid-cols-1 gap-4 @2xl:grid-cols-2">
+      <OrdersTotals :record="record" />
+      <OrdersFilters :meta="meta" />
+    </div>
   </section>
 </template>
 

package/dist/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;
   }>(), {

package/dist/spa/src/components/Sidebar.vue

@@ -93,15 +93,20 @@
               <IconChevronDown :class="{'rotate-180':  opened.includes(i) }" class="w-3 h-3 text-lightSidebarIcons dark:text-darkSidebarIcons transition-transform duration-200" aria-hidden="true" />
             </button>
 
-            <transition name="slow-drop">
-              <ul v-show="opened.includes(i)" :id="`dropdown-example${i}`" role="none" class="af-sidebar-dropdown mt-0.5 ml-[1.25rem] pl-2 border-l border-lightSidebarDevider dark:border-darkSidebarDevider space-y-0.5 overflow-hidden">              
-                <template v-for="(child, j) in item.children" :key="`menu-${i}-${j}`">
-                  <li class="af-sidebar-menu-link">
-                      <MenuLink :item="child" isChild="true" @click="$emit('hideSidebar')"/>
-                  </li>
-                </template>
-              </ul>
-            </transition>
+            <div class="grid transition-[grid-template-rows,opacity] duration-200 ease-in-out"
+              :class="opened.includes(i) ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
+              :inert="!opened.includes(i)"
+            >
+              <div class="min-h-0 overflow-hidden">
+                <ul :id="`dropdown-example${i}`" role="none" class="af-sidebar-dropdown mt-0.5 ml-[1.25rem] pl-2 border-l border-lightSidebarDevider dark:border-darkSidebarDevider space-y-0.5">
+                  <template v-for="(child, j) in item.children" :key="`menu-${i}-${j}`">
+                    <li class="af-sidebar-menu-link">
+                        <MenuLink :item="child" isChild="true" @click="$emit('hideSidebar')"/>
+                    </li>
+                  </template>
+                </ul>
+              </div>
+            </div>
       </li>
       <li v-else class="af-sidebar-menu-link">
         <MenuLink :item="item" @click="$emit('hideSidebar')"/>
@@ -295,25 +300,6 @@
     background-color: rgba(75, 85, 99, 0.4);
   }
 
-  /* Custom animation for dropdown */
-  .slow-drop-enter-active,
-  .slow-drop-leave-active {
-    overflow: hidden;
-    transition: opacity 0.2s ease, transform 0.2s ease;
-  }
-
-  .slow-drop-enter-from,
-  .slow-drop-leave-to {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-
-  .slow-drop-enter-to,
-  .slow-drop-leave-from {
-    opacity: 1;
-    transform: translateY(0);
-  }
-
   /* For browsers that support overlay scrollbars natively */
   @supports (overflow: overlay) {
     .sidebar-scroll {

package/dist/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>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "4.2.0",
+  "version": "4.3.1",
   "description": "OpenSource Agent-Native forth-generation admin panel",
   "keywords": [
     "adminforth",