@xleddyl/443-components-vue 0.9.1 → 0.9.2

package/README.md

@@ -509,7 +509,7 @@ A large dialog (60rem) with a section nav on the left and the content on the rig
 - Built-in sections, used when no `#section-<id>` slot fills them: `account` (profile card, your `#account-fields`, a sign out button) and `appearance` (`AppearanceSettings`: theme cards light, dark, system and preset cards; `presets` limits or hides them).
 - `@sign-out` adds a Sign out item at the bottom of the nav and in the account section.
 - Labels: `title` (accessible name of the dialog, default `Settings`), `closeLabel`, `navLabel`, `signOutLabel`, `accountLabel`, `accountText`, `appearanceLabel`, `appearanceText`, `sessionLabel`, `sessionText`, `themeLabel`, `themeText`, `presetLabel`, `presetText`.
-- Subpages: `#section-<id>` and `#actions-<id>` get `page`, `pages`, `openPage({ id, label, description? })` and `back()`. With a page open, the header shows a breadcrumb from the section to the page, and the title and description of the page; a click on a breadcrumb goes back to it. `v-model:pages` binds the stack (it also works unbound). Changing section clears it. Render the detail when `page` is set, the list otherwise.
+- Subpages: `#section-<id>` and `#actions-<id>` get `page`, `pages`, `openPage({ id, label })` and `back()`. With a page open, a breadcrumb from the section to the page shows below the header (the header keeps the section title and description); a click on a breadcrumb goes back to it. `v-model:pages` binds the stack (it also works unbound). Changing section clears it. Render the detail when `page` is set, the list otherwise.
 - `hide-session` hides the Session group (sign out) in the account section; the Sign out item in the nav stays. `beforeClose` works as on Modal.
 - Accessibility: native modal `<dialog>` (focus trap, Escape, focus returns to the trigger), the nav is a labelled `nav` of buttons with `aria-current` and `aria-controls`, the content is a `section` labelled by its heading.
 

package/dist/components/templates/SettingsModal.vue

@@ -98,22 +98,22 @@
             >
                <header class="k-settings-modal-header">
                   <div class="k-settings-modal-heading">
-                     <Breadcrumbs
-                        v-if="currentPage"
-                        class="k-settings-modal-breadcrumbs"
-                        :items="breadcrumbItems"
-                     />
                      <h2 :id="`${baseId}-title`" class="k-settings-modal-title">
-                        {{ currentPage?.label ?? active.label }}
+                        {{ active.label }}
                      </h2>
-                     <p v-if="headingDescription" class="k-settings-modal-description">
-                        {{ headingDescription }}
+                     <p v-if="active.description" class="k-settings-modal-description">
+                        {{ active.description }}
                      </p>
                   </div>
                   <div v-if="$slots[`actions-${active.id}`]" class="k-settings-modal-actions">
                      <slot :name="`actions-${active.id}`" v-bind="slotProps(active, close)" />
                   </div>
                </header>
+               <Breadcrumbs
+                  v-if="currentPage"
+                  class="k-settings-modal-breadcrumbs"
+                  :items="breadcrumbItems"
+               />
                <div
                   ref="contentBody"
                   class="k-settings-modal-body"
@@ -267,9 +267,6 @@ const activeId = computed(() => {
 });
 const active = computed(() => sectionList.value.find((item) => item.id === activeId.value));
 const currentPage = computed(() => pages.value.at(-1));
-const headingDescription = computed(
-  () => currentPage.value ? currentPage.value.description : active.value?.description
-);
 function goTo(depth) {
   pages.value = pages.value.slice(0, depth);
 }

package/dist/components/templates/types.d.ts

@@ -33,7 +33,6 @@ export interface SettingsModalSection {
 export interface SettingsModalPage {
     id: string;
     label: string;
-    description?: string;
 }
 export interface SettingsSectionSlotProps {
     section: SettingsModalSection;

package/dist/styles/templates/settings-modal.css

@@ -162,7 +162,8 @@
 }
 
 .k-settings-modal-breadcrumbs {
-   margin-bottom: 0.25rem;
+   flex: none;
+   padding: 0 1.5rem 0.75rem;
 }
 
 .k-settings-modal-title {
@@ -477,6 +478,10 @@
       padding: 1rem 1rem 0.75rem;
    }
 
+   .k-settings-modal-breadcrumbs {
+      padding-inline: 1rem;
+   }
+
    .k-settings-modal-body {
       padding: 1rem;
    }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xleddyl/443-components-vue",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "description": "Compact, scoped dashboard components for Vue and Nuxt",
   "license": "MIT",
   "author": "Edoardo Alberti (https://github.com/xleddyl)",