@xleddyl/443-components-vue 0.10.2 → 0.12.0

package/dist/internal/overlays/avoid.mjs

@@ -0,0 +1,134 @@
+import { onScopeDispose, ref, watch } from "vue";
+import { isClient } from "../core/env.mjs";
+import { waitForAnimations } from "../floating/support.mjs";
+const NONE = { left: 0, right: 0, top: 0, bottom: 0 };
+const GAP = 8;
+function sameInsets(a, b) {
+  return a.left === b.left && a.right === b.right && a.top === b.top && a.bottom === b.bottom;
+}
+function rootPixels() {
+  return parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+}
+function drawerSide(dialog) {
+  if (!dialog.classList.contains("k-drawer")) return null;
+  if (dialog.classList.contains("k-drawer-left")) return "left";
+  if (dialog.classList.contains("k-drawer-bottom")) return "bottom";
+  return "right";
+}
+function overlapsX(rect, span) {
+  return rect.left < span.right && span.left < rect.right;
+}
+function horizontalOf(position) {
+  if (position.endsWith("left")) return "left";
+  if (position.endsWith("right")) return "right";
+  return "center";
+}
+export function useToasterAvoidance(options) {
+  const insets = ref(NONE);
+  let observer;
+  let frame = 0;
+  let current = null;
+  function sideInsets(dialog, panel, toaster) {
+    const side = drawerSide(dialog);
+    if (side !== "left" && side !== "right") return null;
+    const horizontal = horizontalOf(options.position());
+    if (horizontal !== "center" && horizontal !== side) return NONE;
+    const style = getComputedStyle(dialog);
+    const padding = parseFloat(side === "left" ? style.paddingLeft : style.paddingRight) || 0;
+    const occupied = panel.offsetWidth + padding;
+    const margin = rootPixels();
+    const free = dialog.clientWidth - occupied - 2 * margin;
+    if (free < toasterWidth(toaster, dialog.clientWidth)) return null;
+    return { ...NONE, [side]: occupied };
+  }
+  function toasterWidth(toaster, viewport) {
+    const width = toaster.offsetWidth || parseFloat(getComputedStyle(toaster).width) || 0;
+    return Math.min(width, viewport - 2 * rootPixels());
+  }
+  function toasterSpan(toaster) {
+    const viewport = document.documentElement.clientWidth;
+    const margin = rootPixels();
+    const width = toasterWidth(toaster, viewport);
+    const horizontal = horizontalOf(options.position());
+    if (horizontal === "left") return { left: margin, right: margin + width };
+    if (horizontal === "right")
+      return { left: viewport - margin - width, right: viewport - margin };
+    return { left: (viewport - width) / 2, right: (viewport + width) / 2 };
+  }
+  function verticalInsets(panel, toaster) {
+    const bounds = toasterSpan(toaster);
+    const viewport = document.documentElement.clientHeight;
+    const margin = rootPixels();
+    const next = { ...NONE };
+    if (options.position().startsWith("top")) {
+      const header = panel.querySelector(":scope > header");
+      const rect = header?.getBoundingClientRect();
+      if (rect && rect.height && overlapsX(rect, bounds) && rect.bottom < viewport / 2)
+        next.top = Math.max(0, Math.ceil(rect.bottom + GAP - margin));
+    } else {
+      const footer = panel.querySelector(":scope > footer");
+      const rect = footer?.getBoundingClientRect();
+      if (rect && rect.height && overlapsX(rect, bounds) && rect.top > viewport / 2)
+        next.bottom = Math.max(0, Math.ceil(viewport - rect.top + GAP - margin));
+    }
+    return next;
+  }
+  function compute() {
+    frame = 0;
+    const dialog = current;
+    const toaster = options.toaster.value;
+    const panel = dialog?.querySelector(':scope > [class$="-panel"]');
+    if (!dialog || !toaster || !panel) {
+      if (!dialog && !sameInsets(insets.value, NONE)) insets.value = NONE;
+      return;
+    }
+    const next = sideInsets(dialog, panel, toaster) ?? verticalInsets(panel, toaster);
+    if (!sameInsets(next, insets.value)) insets.value = next;
+  }
+  function schedule() {
+    if (!frame) frame = requestAnimationFrame(compute);
+  }
+  function observe(dialog) {
+    observer ??= new ResizeObserver(schedule);
+    const panel = dialog.querySelector(':scope > [class$="-panel"]');
+    for (const element of [
+      dialog,
+      panel,
+      panel?.querySelector(":scope > header"),
+      panel?.querySelector(":scope > footer")
+    ])
+      if (element) observer.observe(element);
+  }
+  function disconnect() {
+    observer?.disconnect();
+    if (frame) cancelAnimationFrame(frame);
+    frame = 0;
+  }
+  watch(
+    [options.outlet, options.toaster],
+    ([dialog, toaster]) => {
+      if (!isClient()) return;
+      disconnect();
+      current = dialog;
+      if (!dialog) {
+        insets.value = NONE;
+        return;
+      }
+      observe(dialog);
+      if (toaster) observer?.observe(toaster);
+      schedule();
+      waitForAnimations(dialog).then(() => {
+        if (current === dialog) schedule();
+      });
+    },
+    { immediate: true, flush: "post" }
+  );
+  if (isClient()) {
+    window.addEventListener("resize", schedule);
+    onScopeDispose(() => {
+      window.removeEventListener("resize", schedule);
+      disconnect();
+    });
+  }
+  return { insets, refresh: schedule };
+}

package/dist/locale/de.mjs

@@ -82,6 +82,10 @@ export const de = {
       columns: "Spalten",
       resetColumns: "Spalten zur\xFCcksetzen",
       exportCsv: "CSV exportieren",
+      filters: "Filter",
+      filtersActive: "Filter | Filter, {count} aktiv | Filter, {count} aktiv",
+      resetFilters: "Filter zur\xFCcksetzen",
+      showResults: "Ergebnisse anzeigen",
       rowsPerPage: "Zeilen pro Seite",
       previousPage: "Vorherige Seite",
       nextPage: "N\xE4chste Seite",
@@ -92,6 +96,7 @@ export const de = {
       no: "Nein",
       label: "Datentabelle",
       rowCount: "Keine Zeilen | {count} Zeile | {count} Zeilen",
+      moreValues: "{count} weitere",
       checked: "ausgew\xE4hlt",
       unchecked: "nicht ausgew\xE4hlt",
       indeterminate: "teilweise ausgew\xE4hlt",
@@ -248,6 +253,25 @@ export const de = {
     tabs: {
       dot: "Erfordert Aufmerksamkeit"
     },
+    sortable: {
+      moved: "{label} an Position {position} von {count} verschoben"
+    },
+    tagList: {
+      label: "Elemente",
+      empty: "Keine Elemente",
+      sortHint: "Mit den Pfeiltasten zwischen Elementen wechseln, mit Alt und einer Pfeiltaste ein Element verschieben",
+      removeHint: "Entf dr\xFCcken zum Entfernen",
+      moveEarlier: "{label} nach vorne verschieben",
+      moveLater: "{label} nach hinten verschieben",
+      removed: "{label} entfernt",
+      added: "{label} hinzugef\xFCgt"
+    },
+    stepper: {
+      label: "Fortschritt",
+      position: "Schritt {step} von {count}",
+      complete: "abgeschlossen",
+      error: "enth\xE4lt Fehler"
+    },
     listPage: {
       toolbar: "Ergebnisse filtern",
       emptyTitle: "Noch nichts vorhanden",

package/dist/locale/en.mjs

@@ -82,6 +82,10 @@ export const en = {
       columns: "Columns",
       resetColumns: "Reset columns",
       exportCsv: "Export CSV",
+      filters: "Filters",
+      filtersActive: "Filters | Filters, {count} active | Filters, {count} active",
+      resetFilters: "Reset filters",
+      showResults: "Show results",
       rowsPerPage: "Rows per page",
       previousPage: "Previous page",
       nextPage: "Next page",
@@ -92,6 +96,7 @@ export const en = {
       no: "No",
       label: "Data grid",
       rowCount: "No rows | {count} row | {count} rows",
+      moreValues: "{count} more",
       checked: "checked",
       unchecked: "not checked",
       indeterminate: "partially checked",
@@ -248,6 +253,25 @@ export const en = {
     tabs: {
       dot: "Needs attention"
     },
+    sortable: {
+      moved: "{label} moved to position {position} of {count}"
+    },
+    tagList: {
+      label: "Items",
+      empty: "No items",
+      sortHint: "Use the arrow keys to move between items, Alt with an arrow key to move an item",
+      removeHint: "Press Delete to remove",
+      moveEarlier: "Move {label} earlier",
+      moveLater: "Move {label} later",
+      removed: "{label} removed",
+      added: "{label} added"
+    },
+    stepper: {
+      label: "Progress",
+      position: "Step {step} of {count}",
+      complete: "completed",
+      error: "has errors"
+    },
     listPage: {
       toolbar: "Filter results",
       emptyTitle: "Nothing here yet",

package/dist/locale/it.mjs

@@ -82,6 +82,10 @@ export const it = {
       columns: "Colonne",
       resetColumns: "Ripristina colonne",
       exportCsv: "Esporta CSV",
+      filters: "Filtri",
+      filtersActive: "Filtri | Filtri, {count} attivo | Filtri, {count} attivi",
+      resetFilters: "Azzera filtri",
+      showResults: "Mostra risultati",
       rowsPerPage: "Righe per pagina",
       previousPage: "Pagina precedente",
       nextPage: "Pagina successiva",
@@ -92,6 +96,7 @@ export const it = {
       no: "No",
       label: "Griglia dati",
       rowCount: "Nessuna riga | {count} riga | {count} righe",
+      moreValues: "altri {count}",
       checked: "selezionato",
       unchecked: "non selezionato",
       indeterminate: "parzialmente selezionato",
@@ -248,6 +253,25 @@ export const it = {
     tabs: {
       dot: "Richiede attenzione"
     },
+    sortable: {
+      moved: "{label} spostato in posizione {position} di {count}"
+    },
+    tagList: {
+      label: "Elementi",
+      empty: "Nessun elemento",
+      sortHint: "Usa le frecce per spostarti tra gli elementi, Alt con una freccia per spostare un elemento",
+      removeHint: "Premi Canc per rimuovere",
+      moveEarlier: "Sposta {label} prima",
+      moveLater: "Sposta {label} dopo",
+      removed: "{label} rimosso",
+      added: "{label} aggiunto"
+    },
+    stepper: {
+      label: "Avanzamento",
+      position: "Passo {step} di {count}",
+      complete: "completato",
+      error: "contiene errori"
+    },
     listPage: {
       toolbar: "Filtra i risultati",
       emptyTitle: "Ancora niente qui",

package/dist/locale/types.d.ts

@@ -80,6 +80,10 @@ export interface KMessages {
         columns: string;
         resetColumns: string;
         exportCsv: string;
+        filters: string;
+        filtersActive: string;
+        resetFilters: string;
+        showResults: string;
         rowsPerPage: string;
         previousPage: string;
         nextPage: string;
@@ -90,6 +94,7 @@ export interface KMessages {
         no: string;
         label: string;
         rowCount: string;
+        moreValues: string;
         checked: string;
         unchecked: string;
         indeterminate: string;
@@ -246,6 +251,25 @@ export interface KMessages {
     tabs: {
         dot: string;
     };
+    sortable: {
+        moved: string;
+    };
+    tagList: {
+        label: string;
+        empty: string;
+        sortHint: string;
+        removeHint: string;
+        moveEarlier: string;
+        moveLater: string;
+        removed: string;
+        added: string;
+    };
+    stepper: {
+        label: string;
+        position: string;
+        complete: string;
+        error: string;
+    };
     listPage: {
         toolbar: string;
         emptyTitle: string;

package/dist/nuxt/module.mjs

@@ -9,6 +9,7 @@ import {
   addPlugin,
   addPluginTemplate,
   addTemplate,
+  addTypeTemplate,
   createResolver,
   defineNuxtModule,
   directoryToURL,
@@ -124,6 +125,19 @@ export default defineNuxtModule({
       addImports({ name: "useDashboard", from: resolver.resolve("./runtime/dashboard") });
     const layouts = resolveLayouts(options.layouts);
     if (layouts.length) {
+      addTypeTemplate({
+        filename: "types/k-page-meta.d.ts",
+        getContents: () => [
+          `import type { ShellContent } from '@xleddyl/443-components-vue'`,
+          `declare module '#app' {`,
+          `   interface PageMeta {`,
+          `      content?: ShellContent`,
+          `      fill?: boolean`,
+          `   }`,
+          `}`,
+          `export {}`
+        ].join("\n")
+      });
       nuxt.hook("app:templates", (app) => {
         for (const layout of layouts) {
           if (layout.name in app.layouts) continue;

package/dist/nuxt/runtime/layouts/dashboard.vue

@@ -13,6 +13,7 @@
          :account-action="account?.action ?? 'settings'"
          :settings-sections="settings.sections"
          :settings-presets="settings.presets"
+         :settings-route="settings.route"
          :on-sign-out="signOutTarget ? signOut : void 0"
          :breadcrumbs="breadcrumbs"
          :search="dashboard.search"
@@ -20,7 +21,7 @@
          :collapsible="dashboard.collapsible"
          :storage-key="dashboard.storageKey"
          :fluid="dashboard.fluid"
-         :fill="route.meta.fill === true || Boolean(dashboard.fill)"
+         :content="content"
       >
          <slot />
       </DashboardLayout>
@@ -49,6 +50,13 @@ const dashboard = computed(() => config.value.dashboard ?? {});
 const account = computed(() => state.value.account ?? config.value.account);
 const settings = computed(() => config.value.settings ?? {});
 const signOutTarget = computed(() => settings.value.signOutTo);
+const CONTENT_MODES = ["page", "fill", "centered", "bleed"];
+function contentOf(value) {
+  return CONTENT_MODES.includes(value) ? value : void 0;
+}
+const content = computed(
+  () => contentOf(route.meta.content) ?? (route.meta.fill === true ? "bleed" : void 0) ?? contentOf(dashboard.value.content) ?? (dashboard.value.fill ? "bleed" : "page")
+);
 function signOut() {
   if (signOutTarget.value) return navigateTo(signOutTarget.value);
 }

package/dist/styles/data/tag-list.css

@@ -0,0 +1,93 @@
+.k-tag-list {
+   min-width: 0;
+   border-radius: var(--k-radius-md);
+   transition:
+      background-color var(--k-duration) var(--k-ease),
+      box-shadow var(--k-duration) var(--k-ease);
+}
+
+.k-tag-list.is-drop-target {
+   background: var(--k-accent-soft);
+   box-shadow: 0 0 0 1px var(--k-accent-line);
+}
+
+.k-tag-list-items {
+   display: flex;
+   flex-wrap: wrap;
+   align-items: center;
+   gap: 0.375rem;
+   min-width: 0;
+   margin: 0;
+   padding: 0;
+   list-style: none;
+}
+
+.k-tag-list-item {
+   position: relative;
+   display: inline-flex;
+   align-items: center;
+   gap: 0.125rem;
+   max-width: 100%;
+   min-width: 0;
+   border-radius: var(--k-radius-sm);
+}
+
+.k-tag-list.is-sortable .k-tag-list-item {
+   cursor: grab;
+   touch-action: none;
+   user-select: none;
+   -webkit-user-select: none;
+}
+
+.k-tag-list.is-sortable .k-tag-list-item.is-locked {
+   cursor: default;
+}
+
+.k-tag-list.is-dragging .k-tag-list-item {
+   cursor: grabbing;
+}
+
+.k-tag-list-item.is-moving {
+   z-index: 1;
+}
+
+.k-tag-list-item.is-moving > .k-tag {
+   box-shadow: var(--k-shadow-raised);
+   scale: 1.03;
+}
+
+.k-tag-list.is-sortable .k-tag-list-item:not(.is-moving) > .k-tag {
+   transition:
+      box-shadow var(--k-duration) var(--k-ease),
+      scale var(--k-duration) var(--k-ease);
+}
+
+.k-tag-list-item[data-drop='before']::after,
+.k-tag-list-end[data-drop='before']::after {
+   content: '';
+   position: absolute;
+   inset-block: 0.125rem;
+   inset-inline-start: -0.25rem;
+   width: 2px;
+   border-radius: var(--k-radius-full);
+   background: var(--k-ring);
+}
+
+.k-tag-list-end {
+   position: relative;
+   align-self: stretch;
+   width: 0;
+   min-height: 1.625rem;
+   margin-inline-start: 0.25rem;
+}
+
+.k-tag-list-move {
+   display: inline-flex;
+}
+
+.k-tag-list-empty {
+   margin: 0;
+   padding: 0.25rem 0;
+   font-size: 0.8125rem;
+   color: var(--k-text-muted);
+}

package/dist/styles/data.css

@@ -2,6 +2,7 @@
 @import './data/pagination.css';
 @import './data/badge.css';
 @import './data/tag.css';
+@import './data/tag-list.css';
 @import './data/avatar.css';
 @import './data/description-list.css';
 @import './data/stat.css';

package/dist/styles/forced-colors.css

@@ -139,6 +139,7 @@
       .k-navlink.is-active,
       .k-settings-modal-tab[aria-current='true'],
       .k-tab[aria-selected='true'],
+      .k-stepper-item.is-current .k-stepper-indicator,
       .k-theme-switch-option.is-active,
       .k-color-input-preset[aria-checked='true'],
       .k-tree-row[aria-selected='true'],
@@ -221,4 +222,13 @@
       forced-color-adjust: none;
       background: CanvasText;
    }
+
+   .k-tag-list.is-drop-target {
+      outline: 2px dashed Highlight;
+   }
+
+   :is(.k-tag-list-item, .k-tag-list-end)[data-drop='before']::after {
+      forced-color-adjust: none;
+      background: Highlight;
+   }
 }

package/dist/styles/layout/app-shell.css

@@ -1,5 +1,5 @@
 .k-shell {
-   --k-shell-sidebar: var(--k-sidebar-width, 15rem);
+   --k-shell-sidebar: var(--k-sidebar-width, 16.5rem);
    --k-shell-rail: var(--k-sidebar-rail-width, 3.5rem);
    --k-shell-topbar: var(--k-topbar-height, 3rem);
    --k-shell-gap: var(--k-shell-inset, 0.5rem);
@@ -106,7 +106,7 @@ html.k-root body {
    width: 100%;
    max-width: var(--k-shell-content, 72rem);
    margin-inline: auto;
-   padding: var(--k-shell-padding, 2.25rem 2.5rem 2.5rem);
+   padding: var(--k-shell-padding, 1.5rem 1.75rem 1.75rem);
    animation: k-enter 320ms var(--k-ease-out) backwards;
 }
 
@@ -126,6 +126,29 @@ html.k-root body {
    padding: 0;
 }
 
+.k-shell:is([data-content='fill'], [data-content='centered']) .k-shell-body {
+   overflow: hidden;
+}
+
+.k-shell:is([data-content='fill'], [data-content='centered']) .k-shell-main {
+   min-height: 0;
+}
+
+.k-shell-content:is(.k-shell-content-fill, .k-shell-content-centered) {
+   min-height: 0;
+   overflow-y: auto;
+   overscroll-behavior: contain;
+}
+
+.k-shell-content.k-shell-content-fill {
+   max-width: none;
+}
+
+.k-shell-content:is(.k-shell-content-fill, .k-shell-content-centered) > .k-page {
+   flex: 1;
+   min-height: 0;
+}
+
 .k-shell[data-variant='sidebar'] .k-shell-sidebar {
    border-right: 1px solid var(--k-line);
 }
@@ -199,10 +222,6 @@ html.k-root body {
       padding-inline: 0;
    }
 
-   .k-shell.is-collapsed .k-sidebar-collapse > .k-icon {
-      transform: rotate(180deg);
-   }
-
    @media (hover: hover) {
       .k-shell.is-collapsed .k-sidebar-header:has(> .k-sidebar-brand:not(:empty)) {
          position: relative;

package/dist/styles/layout/sidebar.css

@@ -22,8 +22,17 @@
    padding: 0.25rem 0.375rem;
 }
 
-.k-sidebar-collapse > .k-icon {
-   transition: transform var(--k-duration-lg) var(--k-ease-out);
+.k-sidebar-header.is-brand-center {
+   position: relative;
+   justify-content: center;
+   padding-inline: 2rem;
+}
+
+.k-sidebar-header.is-brand-center > .k-sidebar-collapse {
+   position: absolute;
+   top: 50%;
+   right: 0;
+   translate: 0 -50%;
 }
 
 .k-sidebar-nav {