@xleddyl/443-components-vue 0.10.2 → 0.11.0

package/dist/locale/de.mjs

@@ -92,6 +92,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 +249,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

@@ -92,6 +92,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 +249,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

@@ -92,6 +92,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 +249,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

@@ -90,6 +90,7 @@ export interface KMessages {
         no: string;
         label: string;
         rowCount: string;
+        moreValues: string;
         checked: string;
         unchecked: string;
         indeterminate: string;
@@ -246,6 +247,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

@@ -20,7 +20,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 +49,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

@@ -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);
 }

package/dist/styles/layout/stepper.css

@@ -0,0 +1,244 @@
+.k-stepper {
+   --k-stepper-indicator: 1.75rem;
+   --k-stepper-tone: var(--k-accent);
+   container-type: inline-size;
+   min-width: 0;
+}
+
+.k-stepper-sm {
+   --k-stepper-indicator: 1.5rem;
+}
+
+.k-stepper-list {
+   display: flex;
+   margin: 0;
+   padding: 0;
+   list-style: none;
+}
+
+.k-stepper-horizontal .k-stepper-list {
+   align-items: flex-start;
+}
+
+.k-stepper-vertical .k-stepper-list {
+   flex-direction: column;
+}
+
+.k-stepper-item {
+   position: relative;
+   display: flex;
+   min-width: 0;
+}
+
+.k-stepper-horizontal .k-stepper-item {
+   flex: 1 1 auto;
+   align-items: flex-start;
+}
+
+.k-stepper-horizontal .k-stepper-item:last-child {
+   flex: 0 1 auto;
+}
+
+.k-stepper-vertical .k-stepper-item {
+   flex-direction: column;
+}
+
+.k-stepper-step {
+   --k-icon-size: 0.875rem;
+   display: flex;
+   align-items: flex-start;
+   gap: 0.625rem;
+   min-width: 0;
+   padding: 0.25rem;
+   margin: -0.25rem;
+   border-radius: var(--k-radius-md);
+   color: var(--k-text-muted);
+   text-align: start;
+   transition:
+      background-color var(--k-duration) var(--k-ease),
+      color var(--k-duration) var(--k-ease);
+}
+
+.k-stepper-horizontal .k-stepper-step {
+   flex-shrink: 1;
+   max-width: calc(100% + 0.5rem);
+}
+
+button.k-stepper-step:hover {
+   background: var(--k-hover);
+   color: var(--k-text);
+}
+
+button.k-stepper-step:active {
+   background: var(--k-press);
+}
+
+.k-stepper-item.is-disabled > .k-stepper-step {
+   cursor: default;
+}
+
+.k-stepper-indicator {
+   display: grid;
+   flex-shrink: 0;
+   place-items: center;
+   width: var(--k-stepper-indicator);
+   height: var(--k-stepper-indicator);
+   border: 1px solid var(--k-line-strong);
+   border-radius: var(--k-radius-full);
+   background: var(--k-surface);
+   color: var(--k-text-muted);
+   font-size: 0.75rem;
+   font-weight: var(--k-font-weight-strong, 600);
+   font-variant-numeric: tabular-nums;
+   transition:
+      background-color var(--k-duration) var(--k-ease),
+      border-color var(--k-duration) var(--k-ease),
+      color var(--k-duration) var(--k-ease);
+}
+
+.k-stepper-item.is-current .k-stepper-indicator {
+   border-color: var(--k-stepper-tone);
+   background: var(--k-stepper-tone);
+   color: var(--k-accent-contrast);
+}
+
+.k-stepper-item.is-complete .k-stepper-indicator {
+   border-color: var(--k-accent-line);
+   background: var(--k-accent-soft);
+   color: var(--k-accent-text);
+}
+
+.k-stepper-item.is-current.is-complete .k-stepper-indicator {
+   border-color: var(--k-stepper-tone);
+   background: var(--k-stepper-tone);
+   color: var(--k-accent-contrast);
+}
+
+.k-stepper-item.is-error .k-stepper-indicator {
+   border-color: var(--k-danger);
+   background: color-mix(in oklab, var(--k-danger) 12%, var(--k-surface));
+   color: var(--k-danger-text);
+}
+
+.k-stepper-item.is-current.is-error .k-stepper-indicator {
+   background: var(--k-danger);
+   color: var(--k-text-inverted);
+}
+
+.k-stepper-text {
+   display: flex;
+   flex-direction: column;
+   gap: 0.125rem;
+   min-width: 0;
+   padding-top: calc((var(--k-stepper-indicator) - 1.25rem) / 2);
+}
+
+.k-stepper-label {
+   overflow: hidden;
+   font-size: 0.8125rem;
+   font-weight: var(--k-font-weight-medium, 500);
+   line-height: 1.25rem;
+   text-overflow: ellipsis;
+   white-space: nowrap;
+}
+
+.k-stepper-item.is-current .k-stepper-label,
+.k-stepper-item.is-complete .k-stepper-label {
+   color: var(--k-text);
+}
+
+.k-stepper-item.is-error .k-stepper-label {
+   color: var(--k-danger-text);
+}
+
+.k-stepper-description {
+   overflow: hidden;
+   font-size: 0.75rem;
+   line-height: 1.35;
+   color: var(--k-text-muted);
+   text-overflow: ellipsis;
+}
+
+.k-stepper-horizontal .k-stepper-description {
+   white-space: nowrap;
+}
+
+.k-stepper-connector {
+   flex: 1 1 auto;
+   background: var(--k-line-strong);
+   transition: background-color var(--k-duration-lg) var(--k-ease);
+}
+
+.k-stepper-item.is-complete > .k-stepper-connector {
+   background: var(--k-accent-line);
+}
+
+.k-stepper-horizontal .k-stepper-connector {
+   min-width: 1rem;
+   height: 1px;
+   margin: calc(var(--k-stepper-indicator) / 2) 0.75rem 0;
+}
+
+.k-stepper-vertical .k-stepper-connector {
+   width: 1px;
+   min-height: 1rem;
+   margin: 0.375rem 0 0.375rem calc(var(--k-stepper-indicator) / 2);
+}
+
+.k-stepper-vertical .k-stepper-item:not(:last-child) {
+   min-height: 3.5rem;
+}
+
+.k-stepper-summary {
+   display: none;
+   gap: 0.375rem;
+   align-items: baseline;
+   min-width: 0;
+   margin: 0.625rem 0 0;
+   font-size: 0.8125rem;
+}
+
+.k-stepper-summary-position {
+   flex-shrink: 0;
+   color: var(--k-text-muted);
+}
+
+.k-stepper-summary-label {
+   overflow: hidden;
+   font-weight: var(--k-font-weight-medium, 500);
+   color: var(--k-text);
+   text-overflow: ellipsis;
+   white-space: nowrap;
+}
+
+.k-stepper-horizontal.is-compact .k-stepper-text {
+   position: absolute;
+   width: 1px;
+   height: 1px;
+   padding: 0;
+   margin: -1px;
+   overflow: hidden;
+   clip-path: inset(50%);
+   white-space: nowrap;
+}
+
+.k-stepper-horizontal.is-compact .k-stepper-summary {
+   display: flex;
+}
+
+@container (max-width: 36rem) {
+   .k-stepper-horizontal.is-auto-compact .k-stepper-text {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+   }
+
+   .k-stepper-horizontal.is-auto-compact .k-stepper-summary {
+      display: flex;
+   }
+}

package/dist/styles/layout.css

@@ -6,6 +6,7 @@
 @import './layout/breadcrumbs.css';
 @import './layout/card.css';
 @import './layout/tabs.css';
+@import './layout/stepper.css';
 @import './layout/accordion.css';
 @import './layout/separator.css';
 @import './layout/stack.css';

package/dist/styles/overlays/toast.css

@@ -18,6 +18,11 @@
    color: var(--k-text-toned);
    background: transparent;
    border: 0;
+   transition:
+      top var(--k-duration-lg) var(--k-ease-out),
+      right var(--k-duration-lg) var(--k-ease-out),
+      bottom var(--k-duration-lg) var(--k-ease-out),
+      left var(--k-duration-lg) var(--k-ease-out);
 }
 
 .k-toaster[data-y='top'] {
@@ -37,34 +42,34 @@
 }
 
 .k-toaster-bottom-right {
-   right: 1rem;
-   bottom: 1rem;
+   right: calc(1rem + var(--k-toaster-avoid-right, 0px));
+   bottom: calc(1rem + var(--k-toaster-avoid-bottom, 0px));
 }
 
 .k-toaster-bottom-left {
-   bottom: 1rem;
-   left: 1rem;
+   bottom: calc(1rem + var(--k-toaster-avoid-bottom, 0px));
+   left: calc(1rem + var(--k-toaster-avoid-left, 0px));
 }
 
 .k-toaster-bottom-center {
-   bottom: 1rem;
-   left: 50%;
+   bottom: calc(1rem + var(--k-toaster-avoid-bottom, 0px));
+   left: calc(50% + (var(--k-toaster-avoid-left, 0px) - var(--k-toaster-avoid-right, 0px)) / 2);
    translate: -50% 0;
 }
 
 .k-toaster-top-right {
-   top: 1rem;
-   right: 1rem;
+   top: calc(1rem + var(--k-toaster-avoid-top, 0px));
+   right: calc(1rem + var(--k-toaster-avoid-right, 0px));
 }
 
 .k-toaster-top-left {
-   top: 1rem;
-   left: 1rem;
+   top: calc(1rem + var(--k-toaster-avoid-top, 0px));
+   left: calc(1rem + var(--k-toaster-avoid-left, 0px));
 }
 
 .k-toaster-top-center {
-   top: 1rem;
-   left: 50%;
+   top: calc(1rem + var(--k-toaster-avoid-top, 0px));
+   left: calc(50% + (var(--k-toaster-avoid-left, 0px) - var(--k-toaster-avoid-right, 0px)) / 2);
    translate: -50% 0;
 }
 

package/package.json

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