@xleddyl/443-components-vue 0.9.0 → 0.9.1

package/README.md

@@ -509,6 +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.
 - `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,15 +98,20 @@
             >
                <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">
-                        {{ active.label }}
+                        {{ currentPage?.label ?? active.label }}
                      </h2>
-                     <p v-if="active.description" class="k-settings-modal-description">
-                        {{ active.description }}
+                     <p v-if="headingDescription" class="k-settings-modal-description">
+                        {{ headingDescription }}
                      </p>
                   </div>
                   <div v-if="$slots[`actions-${active.id}`]" class="k-settings-modal-actions">
-                     <slot :name="`actions-${active.id}`" :section="active" :close="close" />
+                     <slot :name="`actions-${active.id}`" v-bind="slotProps(active, close)" />
                   </div>
                </header>
                <div
@@ -117,7 +122,7 @@
   'is-overflow-bottom': contentEdges.overflowBottom.value
 }"
                >
-                  <slot :name="`section-${active.id}`" :section="active" :close="close">
+                  <slot :name="`section-${active.id}`" v-bind="slotProps(active, close)">
                      <template v-if="active.id === 'account' && account">
                         <div class="k-settings-modal-account">
                            <Avatar
@@ -171,7 +176,7 @@
 </template>
 
 <script setup>
-import { computed, useId, useTemplateRef } from "vue";
+import { computed, useId, useTemplateRef, watch } from "vue";
 import { THEME_PRESETS } from "../../composables/usePreset";
 import { useLocale } from "../../composables/useLocale";
 import { useLinkResolver } from "../../internal/core/link";
@@ -181,6 +186,7 @@ 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({
@@ -209,6 +215,7 @@ defineSlots();
 const emit = defineEmits(["open", "close", "afterLeave"]);
 const open = defineModel("open", { type: Boolean, ...{ default: false } });
 const section = defineModel("section", { type: String });
+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"));
@@ -259,6 +266,34 @@ const activeId = computed(() => {
   return selectable.value[0]?.id;
 });
 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);
+}
+function openPage(page) {
+  pages.value = [...pages.value, 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
+  }))
+]);
+function slotProps(item, close) {
+  return { section: item, close, page: currentPage.value, pages: pages.value, openPage, back };
+}
+watch(activeId, () => goTo(0));
+watch(
+  () => pages.value.length,
+  () => contentBody.value?.scrollTo({ top: 0 })
+);
 function select(id) {
   section.value = id;
 }

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

@@ -1,6 +1,6 @@
 import type { ThemePreset } from '../../composables/usePreset';
 import type { DialogBeforeClose } from '../overlays/types';
-import type { SettingsModalAccount, SettingsModalSection, SettingsSectionSlotProps } from './types';
+import type { SettingsModalAccount, SettingsModalPage, SettingsModalSection, SettingsSectionSlotProps } from './types';
 type __VLS_Slots = {
     'account-fields'?: (props: {
         account: SettingsModalAccount;
@@ -33,6 +33,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     beforeClose?: DialogBeforeClose;
     open?: boolean | undefined;
     section?: string;
+    pages?: SettingsModalPage[];
     key?: PropertyKey | undefined;
     loading?: boolean;
     prefix?: "k-modal" | "k-drawer" | undefined;
@@ -249,6 +250,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     "update:open": (value: boolean) => any;
     afterLeave: () => any;
     "update:section": (value: string | undefined) => any;
+    "update:pages": (value: SettingsModalPage[]) => any;
 }, string, import("vue").PublicProps, Readonly<{
     sections?: SettingsModalSection[];
     account?: SettingsModalAccount;
@@ -272,6 +274,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     beforeClose?: DialogBeforeClose;
     open?: boolean | undefined;
     section?: string;
+    pages?: SettingsModalPage[];
     key?: PropertyKey | undefined;
     loading?: boolean;
     prefix?: "k-modal" | "k-drawer" | undefined;
@@ -488,6 +491,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
     onAfterLeave?: (() => any) | undefined;
     "onUpdate:section"?: ((value: string | undefined) => any) | undefined;
+    "onUpdate:pages"?: ((value: SettingsModalPage[]) => any) | undefined;
 }>, {
     sections: SettingsModalSection[];
     presets: false | readonly ThemePreset[];

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

@@ -30,9 +30,18 @@ export interface SettingsModalSection {
     badge?: string | number;
     disabled?: boolean;
 }
+export interface SettingsModalPage {
+    id: string;
+    label: string;
+    description?: string;
+}
 export interface SettingsSectionSlotProps {
     section: SettingsModalSection;
     close: () => void;
+    page: SettingsModalPage | undefined;
+    pages: SettingsModalPage[];
+    openPage: (page: SettingsModalPage) => void;
+    back: () => void;
 }
 export interface SettingsModalAccount {
     name: string;

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

@@ -161,6 +161,10 @@
    min-width: 0;
 }
 
+.k-settings-modal-breadcrumbs {
+   margin-bottom: 0.25rem;
+}
+
 .k-settings-modal-title {
    font-size: 0.9375rem;
    font-weight: var(--k-font-weight-strong, 600);

package/package.json

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