@porsche-design-system/components-vue 3.25.1 → 3.26.0

package/CHANGELOG.md

@@ -14,6 +14,28 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### [Unreleased]
 
+### [3.26.0] - 2025-02-07
+
+### [3.26.0-rc.0] - 2025-02-06
+
+#### Added
+
+- `Switch`: `compact` prop to enable a smaller, space-saving version for compact layouts
+  ([#3728](https://github.com/porsche-design-system/porsche-design-system/pull/3728))
+- `Select`: `compact` prop to enable a smaller, space-saving version for compact layouts
+  ([#3731](https://github.com/porsche-design-system/porsche-design-system/pull/3731))
+- `Canvas`: named slot `sidebar-end-header`
+  ([#3736](https://github.com/porsche-design-system/porsche-design-system/pull/3736))
+- `Icon`: `4-wheel-drive`, `aggregation`, `arrow-compact-down`, `arrow-compact-left`, `arrow-compact-right`,
+  `arrow-compact-up`, `arrows`, `battery-half`, `battery-one-quarter`, `battery-three-quarters`, `brain`, `cabriolet`,
+  `charging-network`, `cloud`, `color-picker`, `compass`, `coupe`, `cut`, `door`, `drag`, `ear`, `error`,
+  `exclamation-filled`, `fast-backward`, `fast-forward`, `file-csv`, `file-excel`, `flag`, `genuine-parts`,
+  `geo-localization`, `grip`, `group`, `hand`, `highway-filled`, `history`, `laptop`, `limousine`, `linked`,
+  `logo-apple-carplay`, `logo-apple-music`, `logo-kununu`, `logo-snapchat`, `microphone`, `news`, `north-arrow`,
+  `online-search`, `paste`, `pivot`, `price-tag`, `qr-off`, `question-filled`, `radar`, `radio`, `return`, `road`,
+  `seat`, `service-technician`, `skip-backward`, `skip-forward`, `stop`, `suv`, `theme`, `turismo`, `trigger-finger`,
+  `unlinked` and `weather` ([#3737](https://github.com/porsche-design-system/porsche-design-system/pull/3737))
+
 ### [3.25.1] - 2025-01-23
 
 ### [3.25.1-rc.0] - 2025-01-23

package/cjs/lib/components/SelectWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),t=require("../../utils.cjs"),u=e.defineComponent({__name:"SelectWrapper",props:{description:{default:""},disabled:{type:Boolean,default:!1},dropdownDirection:{default:"auto"},form:{},hideLabel:{default:!1},label:{default:""},message:{default:""},name:{},required:{type:Boolean,default:!1},state:{default:"none"},theme:{},value:{}},emits:["update"],setup(l,{emit:d}){const c=t.usePrefix("p-select"),o=l,n=e.ref(),p=d,a=e.inject(t.themeInjectionKey),r=()=>t.syncProperties(n,{...o,theme:o.theme||a.value});return e.onMounted(()=>{r(),t.addEventListenerToElementRef(n,"update",p)}),e.onUpdated(r),e.watch(a,s=>{t.syncProperties(n,{theme:o.theme||s})}),(s,f)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(c)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default")]),_:3},512))}});module.exports=u;
+"use strict";const e=require("vue"),t=require("../../utils.cjs"),u=e.defineComponent({__name:"SelectWrapper",props:{compact:{type:Boolean,default:!1},description:{default:""},disabled:{type:Boolean,default:!1},dropdownDirection:{default:"auto"},form:{},hideLabel:{default:!1},label:{default:""},message:{default:""},name:{},required:{type:Boolean,default:!1},state:{default:"none"},theme:{},value:{}},emits:["update"],setup(l,{emit:c}){const d=t.usePrefix("p-select"),n=l,o=e.ref(),p=c,a=e.inject(t.themeInjectionKey),r=()=>t.syncProperties(o,{...n,theme:n.theme||a.value});return e.onMounted(()=>{r(),t.addEventListenerToElementRef(o,"update",p)}),e.onUpdated(r),e.watch(a,s=>{t.syncProperties(o,{theme:n.theme||s})}),(s,f)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(d)),{ref_key:"pdsComponentRef",ref:o},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default")]),_:3},512))}});module.exports=u;

package/cjs/lib/components/SwitchWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),t=require("../../utils.cjs"),p=e.defineComponent({__name:"SwitchWrapper",props:{alignLabel:{default:"end"},checked:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},hideLabel:{default:!1},loading:{type:Boolean,default:!1},stretch:{default:!1},theme:{}},emits:["switchChange","update"],setup(l,{emit:d}){const i=t.usePrefix("p-switch"),o=l,n=e.ref(),a=d,r=e.inject(t.themeInjectionKey),c=()=>t.syncProperties(n,{...o,theme:o.theme||r.value});return e.onMounted(()=>{c(),t.addEventListenerToElementRef(n,"switchChange",a),t.addEventListenerToElementRef(n,"update",a)}),e.onUpdated(c),e.watch(r,s=>{t.syncProperties(n,{theme:o.theme||s})}),(s,f)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(i)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default")]),_:3},512))}});module.exports=p;
+"use strict";const e=require("vue"),t=require("../../utils.cjs"),f=e.defineComponent({__name:"SwitchWrapper",props:{alignLabel:{default:"end"},checked:{type:Boolean,default:!1},compact:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},hideLabel:{default:!1},loading:{type:Boolean,default:!1},stretch:{default:!1},theme:{}},emits:["switchChange","update"],setup(r,{emit:d}){const p=t.usePrefix("p-switch"),o=r,n=e.ref(),a=d,l=e.inject(t.themeInjectionKey),c=()=>t.syncProperties(n,{...o,theme:o.theme||l.value});return e.onMounted(()=>{c(),t.addEventListenerToElementRef(n,"switchChange",a),t.addEventListenerToElementRef(n,"update",a)}),e.onUpdated(c),e.watch(l,s=>{t.syncProperties(n,{theme:o.theme||s})}),(s,i)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(p)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default")]),_:3},512))}});module.exports=f;

package/esm/PorscheDesignSystemProvider.vue.d.ts

@@ -8,8 +8,8 @@ declare function __VLS_template(): {
     default?(_: {}): any;
 };
 declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    prefix: string;
     theme: Theme;
+    prefix: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;

package/esm/lib/components/SelectWrapper.vue.d.ts

@@ -1,5 +1,9 @@
 import type { SelectDropdownDirection, BreakpointCustomizable, SelectUpdateEventDetail, SelectState, Theme } from '../types';
 type PSelectProps = {
+    /**
+     * Displays as compact version.
+     */
+    compact?: boolean;
     /**
      * The description text.
      */
@@ -60,6 +64,7 @@ declare const __VLS_component: import("vue").DefineComponent<PSelectProps, {}, {
     label: string;
     description: string;
     disabled: boolean;
+    compact: boolean;
     state: SelectState;
     required: boolean;
     hideLabel: BreakpointCustomizable<boolean>;

package/esm/lib/components/SelectWrapper.vue.mjs

@@ -1,8 +1,9 @@
-import { defineComponent as p, ref as m, inject as c, onMounted as u, onUpdated as i, watch as h, openBlock as y, createBlock as _, resolveDynamicComponent as C, unref as b, withCtx as v, renderSlot as w } from "vue";
-import { usePrefix as B, themeInjectionKey as R, addEventListenerToElementRef as k, syncProperties as s } from "../../utils.mjs";
+import { defineComponent as p, ref as m, inject as c, onMounted as u, onUpdated as i, watch as h, openBlock as y, createBlock as _, resolveDynamicComponent as C, unref as B, withCtx as b, renderSlot as v } from "vue";
+import { usePrefix as w, themeInjectionKey as R, addEventListenerToElementRef as k, syncProperties as s } from "../../utils.mjs";
 const j = /* @__PURE__ */ p({
   __name: "SelectWrapper",
   props: {
+    compact: { type: Boolean, default: !1 },
     description: { default: "" },
     disabled: { type: Boolean, default: !1 },
     dropdownDirection: { default: "auto" },
@@ -17,18 +18,18 @@ const j = /* @__PURE__ */ p({
     value: {}
   },
   emits: ["update"],
-  setup(r, { emit: l }) {
-    const d = B("p-select"), t = r, e = m(), f = l, n = c(R), a = () => s(e, { ...t, theme: t.theme || n.value });
+  setup(l, { emit: r }) {
+    const d = w("p-select"), t = l, e = m(), f = r, n = c(R), a = () => s(e, { ...t, theme: t.theme || n.value });
     return u(() => {
       a(), k(e, "update", f);
     }), i(a), h(n, (o) => {
       s(e, { theme: t.theme || o });
-    }), (o, x) => (y(), _(C(b(d)), {
+    }), (o, x) => (y(), _(C(B(d)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
-      default: v(() => [
-        w(o.$slots, "default")
+      default: b(() => [
+        v(o.$slots, "default")
       ]),
       _: 3
     }, 512));

package/esm/lib/components/SwitchWrapper.vue.d.ts

@@ -8,6 +8,10 @@ type PSwitchProps = {
      * Visualize the switch with on/off status.
      */
     checked?: boolean;
+    /**
+     * Displays as compact version.
+     */
+    compact?: boolean;
     /**
      * Disables the switch. No events will be triggered while disabled state is active.
      */
@@ -41,6 +45,7 @@ declare const __VLS_component: import("vue").DefineComponent<PSwitchProps, {}, {
 }>, {
     stretch: BreakpointCustomizable<boolean>;
     disabled: boolean;
+    compact: boolean;
     hideLabel: BreakpointCustomizable<boolean>;
     loading: boolean;
     alignLabel: BreakpointCustomizable<SwitchAlignLabel>;

package/esm/lib/components/SwitchWrapper.vue.mjs

@@ -1,10 +1,11 @@
-import { defineComponent as d, ref as m, inject as i, onMounted as h, onUpdated as u, watch as y, openBlock as C, createBlock as w, resolveDynamicComponent as _, unref as g, withCtx as B, renderSlot as b } from "vue";
+import { defineComponent as r, ref as m, inject as i, onMounted as h, onUpdated as u, watch as y, openBlock as C, createBlock as w, resolveDynamicComponent as _, unref as B, withCtx as g, renderSlot as b } from "vue";
 import { usePrefix as k, themeInjectionKey as R, addEventListenerToElementRef as l, syncProperties as f } from "../../utils.mjs";
-const P = /* @__PURE__ */ d({
+const P = /* @__PURE__ */ r({
   __name: "SwitchWrapper",
   props: {
     alignLabel: { default: "end" },
     checked: { type: Boolean, default: !1 },
+    compact: { type: Boolean, default: !1 },
     disabled: { type: Boolean, default: !1 },
     hideLabel: { default: !1 },
     loading: { type: Boolean, default: !1 },
@@ -12,18 +13,18 @@ const P = /* @__PURE__ */ d({
     theme: {}
   },
   emits: ["switchChange", "update"],
-  setup(p, { emit: r }) {
-    const c = k("p-switch"), t = p, e = m(), o = r, a = i(R), s = () => f(e, { ...t, theme: t.theme || a.value });
+  setup(p, { emit: c }) {
+    const d = k("p-switch"), t = p, e = m(), n = c, a = i(R), s = () => f(e, { ...t, theme: t.theme || a.value });
     return h(() => {
-      s(), l(e, "switchChange", o), l(e, "update", o);
-    }), u(s), y(a, (n) => {
-      f(e, { theme: t.theme || n });
-    }), (n, v) => (C(), w(_(g(c)), {
+      s(), l(e, "switchChange", n), l(e, "update", n);
+    }), u(s), y(a, (o) => {
+      f(e, { theme: t.theme || o });
+    }), (o, v) => (C(), w(_(B(d)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
-      default: B(() => [
-        b(n.$slots, "default")
+      default: g(() => [
+        b(o.$slots, "default")
       ]),
       _: 3
     }, 512));

package/esm/lib/types.d.ts

@@ -215,10 +215,16 @@ export type AriaAttributes = {
 export type AriaRole = "alert" | "alertdialog" | "application" | "article" | "banner" | "button" | "cell" | "checkbox" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "dialog" | "directory" | "document" | "feed" | "figure" | "form" | "grid" | "gridcell" | "group" | "heading" | "img" | "link" | "list" | "listbox" | "listitem" | "log" | "main" | "marquee" | "math" | "menu" | "menubar" | "menuitem" | "menuitemcheckbox" | "menuitemradio" | "navigation" | "none" | "note" | "option" | "presentation" | "progressbar" | "radio" | "radiogroup" | "region" | "row" | "rowgroup" | "rowheader" | "scrollbar" | "search" | "searchbox" | "separator" | "slider" | "spinbutton" | "status" | "switch" | "tab" | "table" | "tablist" | "tabpanel" | "term" | "textbox" | "timer" | "toolbar" | "tooltip" | "tree" | "treegrid" | "treeitem";
 declare const ICON_NAMES: readonly [
     "360",
+    "4-wheel-drive",
     "accessibility",
     "active-cabin-ventilation",
     "add",
     "adjust",
+    "aggregation",
+    "arrow-compact-down",
+    "arrow-compact-left",
+    "arrow-compact-right",
+    "arrow-compact-up",
     "arrow-double-down",
     "arrow-double-left",
     "arrow-double-right",
@@ -233,16 +239,22 @@ declare const ICON_NAMES: readonly [
     "arrow-left",
     "arrow-right",
     "arrow-up",
+    "arrows",
     "attachment",
     "augmented-reality",
     "battery-empty",
     "battery-empty-co2",
     "battery-empty-fuel",
     "battery-full",
+    "battery-half",
+    "battery-one-quarter",
+    "battery-three-quarters",
     "bell",
     "bookmark",
     "bookmark-filled",
+    "brain",
     "broadcast",
+    "cabriolet",
     "calculator",
     "calendar",
     "camera",
@@ -250,6 +262,7 @@ declare const ICON_NAMES: readonly [
     "car-battery",
     "card",
     "charging-active",
+    "charging-network",
     "charging-state",
     "charging-station",
     "chart",
@@ -261,36 +274,58 @@ declare const ICON_NAMES: readonly [
     "clock",
     "close",
     "closed-caption",
+    "cloud",
     "co2-class",
     "co2-emission",
+    "color-picker",
     "compare",
+    "compass",
     "configurate",
     "copy",
     "country-road",
+    "coupe",
     "cubic-capacity",
+    "cut",
     "delete",
     "disable",
     "dislike",
     "dislike-filled",
     "document",
+    "door",
     "download",
+    "drag",
     "duration",
+    "ear",
     "edit",
     "email",
+    "error",
     "error-filled",
     "exclamation",
+    "exclamation-filled",
     "external",
+    "fast-backward",
+    "fast-forward",
+    "file-csv",
+    "file-excel",
     "filter",
     "fingerprint",
+    "flag",
     "flash",
     "fuel-station",
     "garage",
+    "genuine-parts",
+    "geo-localization",
     "gift",
     "globe",
     "grid",
+    "grip",
+    "group",
+    "hand",
     "heart",
     "heart-filled",
     "highway",
+    "highway-filled",
+    "history",
     "home",
     "horn",
     "image",
@@ -298,15 +333,20 @@ declare const ICON_NAMES: readonly [
     "information",
     "information-filled",
     "key",
+    "laptop",
     "leaf",
     "leather",
     "light",
     "like",
     "like-filled",
+    "limousine",
+    "linked",
     "list",
     "locate",
     "lock",
     "lock-open",
+    "logo-apple-carplay",
+    "logo-apple-music",
     "logo-apple-podcast",
     "logo-baidu",
     "logo-delicious",
@@ -319,6 +359,7 @@ declare const ICON_NAMES: readonly [
     "logo-instagram",
     "logo-kaixin",
     "logo-kakaotalk",
+    "logo-kununu",
     "logo-linkedin",
     "logo-naver",
     "logo-pinterest",
@@ -326,6 +367,7 @@ declare const ICON_NAMES: readonly [
     "logo-qq-share",
     "logo-reddit",
     "logo-skyrock",
+    "logo-snapchat",
     "logo-sohu",
     "logo-spotify",
     "logo-tecent",
@@ -348,31 +390,44 @@ declare const ICON_NAMES: readonly [
     "menu-dots-horizontal",
     "menu-dots-vertical",
     "menu-lines",
+    "microphone",
     "minus",
     "mobile",
     "moon",
     "new-chat",
+    "news",
+    "north-arrow",
     "oil-can",
+    "online-search",
     "parking-brake",
     "parking-light",
+    "paste",
     "pause",
     "phone",
     "pin",
     "pin-filled",
+    "pivot",
     "play",
     "plug",
     "plus",
     "preheating",
+    "price-tag",
     "printer",
     "purchase",
     "push-pin",
     "push-pin-off",
     "qr",
+    "qr-off",
     "question",
+    "question-filled",
     "racing-flag",
+    "radar",
+    "radio",
     "refresh",
     "replay",
     "reset",
+    "return",
+    "road",
     "roof-closed",
     "roof-open",
     "route",
@@ -380,7 +435,9 @@ declare const ICON_NAMES: readonly [
     "save",
     "screen",
     "search",
+    "seat",
     "send",
+    "service-technician",
     "share",
     "shopping-bag",
     "shopping-bag-filled",
@@ -388,22 +445,30 @@ declare const ICON_NAMES: readonly [
     "shopping-cart-filled",
     "sidebar",
     "sidelights",
+    "skip-backward",
+    "skip-forward",
     "snowflake",
     "sort",
     "stack",
     "star",
     "star-filled",
     "steering-wheel",
+    "stop",
     "stopwatch",
     "subtract",
     "success",
     "success-filled",
     "sun",
+    "suv",
     "switch",
     "tablet",
     "tachometer",
+    "theme",
     "tire",
+    "trigger-finger",
     "truck",
+    "turismo",
+    "unlinked",
     "upload",
     "user",
     "user-filled",
@@ -416,6 +481,7 @@ declare const ICON_NAMES: readonly [
     "volume-up",
     "warning",
     "warning-filled",
+    "weather",
     "weight",
     "wifi",
     "work",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-vue",
-  "version": "3.25.1",
+  "version": "3.26.0",
   "description": "Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.",
   "keywords": [
     "porsche",
@@ -17,7 +17,7 @@
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.porsche.com",
   "dependencies": {
-    "@porsche-design-system/components-js": "3.25.1"
+    "@porsche-design-system/components-js": "3.26.0"
   },
   "peerDependencies": {
     "ag-grid-enterprise": ">= 32.0.0 <33.0.0",