@xleddyl/443-components-vue 0.9.2 → 0.9.3

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 })` 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.
+- Subpages: `#section-<id>` and `#actions-<id>` get `page`, `pages`, `openPage({ id, label })` and `back()`. With a page open, the header title becomes the path (`Members > Grace Hopper`, same size, only the last part in the text color, earlier parts are buttons that go back to them), the section description stays, and a Back button (`backLabel`, default `common.back`) shows on the right before `#actions-<id>`. `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

@@ -99,21 +99,44 @@
                <header class="k-settings-modal-header">
                   <div class="k-settings-modal-heading">
                      <h2 :id="`${baseId}-title`" class="k-settings-modal-title">
-                        {{ active.label }}
+                        <template v-if="currentPage">
+                           <template v-for="(crumb, index) in trail" :key="index">
+                              <button
+                                 type="button"
+                                 class="k-settings-modal-crumb"
+                                 @click="goTo(index)"
+                              >
+                                 {{ crumb }}
+                              </button>
+                              <Icon name="chevron-right" class="k-settings-modal-crumb-separator" />
+                           </template>
+                           <span class="k-settings-modal-crumb is-current">
+                              {{ currentPage.label }}
+                           </span>
+                        </template>
+                        <template v-else>{{ active.label }}</template>
                      </h2>
                      <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">
+                  <div
+                     v-if="currentPage || $slots[`actions-${active.id}`]"
+                     class="k-settings-modal-actions"
+                  >
+                     <Button
+                        v-if="currentPage"
+                        variant="ghost"
+                        tone="neutral"
+                        size="sm"
+                        icon="arrow-left"
+                        @click="back"
+                     >
+                        {{ backText }}
+                     </Button>
                      <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"
@@ -186,7 +209,6 @@ import Icon from "../core/Icon.vue";
 import Avatar from "../data/Avatar.vue";
 import Badge from "../data/Badge.vue";
 import Modal from "../overlays/Modal.vue";
-import Breadcrumbs from "../layout/Breadcrumbs.vue";
 import AppearanceSettings from "./AppearanceSettings.vue";
 import SettingsGroup from "./SettingsGroup.vue";
 const props = defineProps({
@@ -195,6 +217,7 @@ const props = defineProps({
   presets: { type: [Array, Boolean], required: false, default: () => THEME_PRESETS },
   title: { type: String, required: false },
   closeLabel: { type: String, required: false },
+  backLabel: { type: String, required: false },
   navLabel: { type: String, required: false },
   signOutLabel: { type: String, required: false },
   sessionLabel: { type: String, required: false },
@@ -219,6 +242,7 @@ const pages = defineModel("pages", { type: Array, ...{ default: () => [] } });
 const { t } = useLocale();
 const titleText = computed(() => props.title ?? t("settings.title"));
 const closeText = computed(() => props.closeLabel ?? t("settings.close"));
+const backText = computed(() => props.backLabel ?? t("common.back"));
 const navText = computed(() => props.navLabel ?? t("settings.sections"));
 const signOutText = computed(() => props.signOutLabel ?? t("settings.signOut"));
 const sessionLabelText = computed(() => props.sessionLabel ?? t("settings.session"));
@@ -276,12 +300,9 @@ function openPage(page) {
 function back() {
   goTo(pages.value.length - 1);
 }
-const breadcrumbItems = computed(() => [
-  { label: active.value?.label ?? "", onClick: () => goTo(0) },
-  ...pages.value.map((page, index) => ({
-    label: page.label,
-    onClick: index < pages.value.length - 1 ? () => goTo(index + 1) : void 0
-  }))
+const trail = computed(() => [
+  active.value?.label ?? "",
+  ...pages.value.slice(0, -1).map((page) => page.label)
 ]);
 function slotProps(item, close) {
   return { section: item, close, page: currentPage.value, pages: pages.value, openPage, back };

package/dist/components/templates/SettingsModal.vue.d.ts

@@ -16,6 +16,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     presets?: readonly ThemePreset[] | false;
     title?: string | undefined;
     closeLabel?: string;
+    backLabel?: string;
     navLabel?: string;
     signOutLabel?: string;
     sessionLabel?: string;
@@ -257,6 +258,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     presets?: readonly ThemePreset[] | false;
     title?: string | undefined;
     closeLabel?: string;
+    backLabel?: string;
     navLabel?: string;
     signOutLabel?: string;
     sessionLabel?: string;

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

@@ -161,11 +161,6 @@
    min-width: 0;
 }
 
-.k-settings-modal-breadcrumbs {
-   flex: none;
-   padding: 0 1.5rem 0.75rem;
-}
-
 .k-settings-modal-title {
    font-size: 0.9375rem;
    font-weight: var(--k-font-weight-strong, 600);
@@ -174,6 +169,44 @@
    color: var(--k-text);
 }
 
+.k-settings-modal-title:has(> .k-settings-modal-crumb) {
+   display: flex;
+   flex-wrap: wrap;
+   align-items: center;
+   gap: 0.25rem;
+}
+
+.k-settings-modal-crumb {
+   padding: 0;
+   font: inherit;
+   letter-spacing: inherit;
+   color: var(--k-text-muted);
+   background: none;
+   border: 0;
+   border-radius: var(--k-radius-xs);
+   cursor: pointer;
+   transition: color var(--k-duration) var(--k-ease);
+}
+
+.k-settings-modal-crumb:hover {
+   color: var(--k-text);
+}
+
+.k-settings-modal-crumb:focus-visible {
+   outline: 2px solid var(--k-ring);
+   outline-offset: 2px;
+}
+
+.k-settings-modal-crumb.is-current {
+   color: var(--k-text);
+   cursor: default;
+}
+
+.k-settings-modal-crumb-separator {
+   --k-icon-size: 0.875rem;
+   color: var(--k-text-dimmed);
+}
+
 .k-settings-modal-description {
    font-size: 0.8125rem;
    line-height: 1.4;
@@ -478,10 +511,6 @@
       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.2",
+  "version": "0.9.3",
   "description": "Compact, scoped dashboard components for Vue and Nuxt",
   "license": "MIT",
   "author": "Edoardo Alberti (https://github.com/xleddyl)",