@porsche-design-system/components-vue 3.27.0-rc.5 → 3.27.0

package/CHANGELOG.md

@@ -14,6 +14,40 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### [Unreleased]
 
+### [3.27.0] - 2025-02-28
+
+### [3.27.0-rc.6] - 2025-02-28
+
+#### Changed
+
+- `Carousel`: Center layout of Carousel on mobile view
+  ([#3765](https://github.com/porsche-design-system/porsche-design-system/pull/3765))
+- `Carousel`: `auto` value of `slides-per-page` prop is breakpoint customizable
+  ([#3767](https://github.com/porsche-design-system/porsche-design-system/pull/3767))
+
+#### Added
+
+- `Table`: `compact` prop to enable a smaller, space-saving version for compact layouts
+  ([#3758](https://github.com/porsche-design-system/porsche-design-system/pull/3758))
+- `Table`: `layout` prop to render table with `table-layout: fixed` css for manual control of column widths
+  ([#3758](https://github.com/porsche-design-system/porsche-design-system/pull/3758))
+- `Carousel`: `align-controls` prop to align the controls slot to the left or center (overwrites auto-alignment)
+  ([#3766](https://github.com/porsche-design-system/porsche-design-system/pull/3766))
+
+#### Changed
+
+- `Select`, `Multi Select`, `Select Wrapper`:
+  - gets rendered on `#top-layer` which enables it to be shown correctly even when used e.g. within a scroll container
+    or overflow context ([#3754](https://github.com/porsche-design-system/porsche-design-system/pull/3754))
+  - gets positioned by [CSS Anchor Positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning)
+    or [Floating UI](https://floating-ui.com) as fallback for browsers not supporting it yet
+    ([#3754](https://github.com/porsche-design-system/porsche-design-system/pull/3754))
+  - modernized visual appearance, dynamic max-height based on viewport and fade in animation of option list
+    ([#3754](https://github.com/porsche-design-system/porsche-design-system/pull/3754))
+- `Select`, `Select Wrapper`:
+  - focus outline becomes default focus style when no filter is used
+    ([#3754](https://github.com/porsche-design-system/porsche-design-system/pull/3754))
+
 ### [3.27.0-rc.5] - 2025-02-20
 
 #### Fixed

package/cjs/lib/components/CarouselWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),t=require("../../utils.cjs"),p=e.defineComponent({__name:"CarouselWrapper",props:{activeSlideIndex:{default:0},alignHeader:{default:"start"},aria:{},description:{},disablePagination:{},focusOnCenterSlide:{type:Boolean,default:!1},gradientColor:{default:"none"},heading:{},headingSize:{default:"x-large"},intl:{},pagination:{default:!0},rewind:{type:Boolean,default:!0},skipLinkTarget:{},slidesPerPage:{default:1},theme:{},trimSpace:{type:Boolean,default:!0},width:{default:"basic"},wrapContent:{type:Boolean}},emits:["carouselChange","update"],setup(l,{emit:d}){const u=t.usePrefix("p-carousel"),a=l,n=e.ref(),r=d,s=e.inject(t.themeInjectionKey),i=()=>t.syncProperties(n,{...a,theme:a.theme||s.value});return e.onMounted(()=>{i(),t.addEventListenerToElementRef(n,"carouselChange",r),t.addEventListenerToElementRef(n,"update",r)}),e.onUpdated(i),e.watch(s,o=>{t.syncProperties(n,{theme:a.theme||o})}),(o,c)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(u)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"default")]),_:3},512))}});module.exports=p;
+"use strict";const e=require("vue"),t=require("../../utils.cjs"),p=e.defineComponent({__name:"CarouselWrapper",props:{activeSlideIndex:{default:0},alignControls:{default:"auto"},alignHeader:{default:"start"},aria:{},description:{},disablePagination:{},focusOnCenterSlide:{type:Boolean,default:!1},gradientColor:{default:"none"},heading:{},headingSize:{default:"x-large"},intl:{},pagination:{default:!0},rewind:{type:Boolean,default:!0},skipLinkTarget:{},slidesPerPage:{default:1},theme:{},trimSpace:{type:Boolean,default:!0},width:{default:"basic"},wrapContent:{type:Boolean}},emits:["carouselChange","update"],setup(l,{emit:d}){const u=t.usePrefix("p-carousel"),a=l,n=e.ref(),r=d,s=e.inject(t.themeInjectionKey),i=()=>t.syncProperties(n,{...a,theme:a.theme||s.value});return e.onMounted(()=>{i(),t.addEventListenerToElementRef(n,"carouselChange",r),t.addEventListenerToElementRef(n,"update",r)}),e.onUpdated(i),e.watch(s,o=>{t.syncProperties(n,{theme:a.theme||o})}),(o,c)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(u)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"default")]),_:3},512))}});module.exports=p;

package/cjs/lib/components/TableWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),t=require("../../utils.cjs"),u=e.defineComponent({__name:"TableWrapper",props:{caption:{},theme:{}},emits:["sortingChange","update"],setup(a,{emit:i}){const m=t.usePrefix("p-table"),o=a,n=e.ref(),r=i,c=e.inject(t.themeInjectionKey),p=()=>t.syncProperties(n,{...o,theme:o.theme||c.value});return e.onMounted(()=>{p(),t.addEventListenerToElementRef(n,"sortingChange",r),t.addEventListenerToElementRef(n,"update",r)}),e.onUpdated(p),e.watch(c,s=>{t.syncProperties(n,{theme:o.theme||s})}),(s,d)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(m)),{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:"TableWrapper",props:{caption:{},compact:{type:Boolean,default:!1},layout:{default:"auto"},theme:{}},emits:["sortingChange","update"],setup(p,{emit:i}){const m=t.usePrefix("p-table"),o=p,n=e.ref(),r=i,a=e.inject(t.themeInjectionKey),c=()=>t.syncProperties(n,{...o,theme:o.theme||a.value});return e.onMounted(()=>{c(),t.addEventListenerToElementRef(n,"sortingChange",r),t.addEventListenerToElementRef(n,"update",r)}),e.onUpdated(c),e.watch(a,s=>{t.syncProperties(n,{theme:o.theme||s})}),(s,l)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(m)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default")]),_:3},512))}});module.exports=u;

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

@@ -1,9 +1,13 @@
-import type { CarouselAlignHeader, SelectedAriaAttributes, CarouselAriaAttribute, BreakpointCustomizable, CarouselGradientColor, CarouselHeadingSize, CarouselInternationalization, Theme, CarouselWidth } from '../types';
+import type { CarouselAlignControls, CarouselAlignHeader, SelectedAriaAttributes, CarouselAriaAttribute, BreakpointCustomizable, CarouselGradientColor, CarouselHeadingSize, CarouselInternationalization, CarouselSlidesPerPage, Theme, CarouselWidth } from '../types';
 type PCarouselProps = {
     /**
      * Defines which slide to be active (zero-based numbering).
      */
     activeSlideIndex?: number;
+    /**
+     * Alignment of slotted controls
+     */
+    alignControls?: CarouselAlignControls;
     /**
      * Alignment of heading and description
      */
@@ -55,7 +59,7 @@ type PCarouselProps = {
     /**
      * Sets the amount of slides visible at the same time. Can be set to `auto` if you want to define different widths per slide via CSS.
      */
-    slidesPerPage?: BreakpointCustomizable<number> | "auto";
+    slidesPerPage?: BreakpointCustomizable<CarouselSlidesPerPage>;
     /**
      * Adapts the color when used on dark background.
      */
@@ -86,13 +90,14 @@ declare const __VLS_component: import("vue").DefineComponent<PCarouselProps, {},
 }>, {
     width: CarouselWidth;
     activeSlideIndex: number;
+    alignControls: CarouselAlignControls;
     alignHeader: CarouselAlignHeader;
     focusOnCenterSlide: boolean;
     gradientColor: CarouselGradientColor;
     headingSize: CarouselHeadingSize;
     pagination: BreakpointCustomizable<boolean>;
     rewind: boolean;
-    slidesPerPage: BreakpointCustomizable<number> | "auto";
+    slidesPerPage: BreakpointCustomizable<CarouselSlidesPerPage>;
     trimSpace: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;

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

@@ -1,9 +1,10 @@
 import { defineComponent as u, ref as f, inject as c, onMounted as m, onUpdated as h, watch as g, openBlock as C, createBlock as y, resolveDynamicComponent as _, unref as w, withCtx as B, renderSlot as P } from "vue";
-import { usePrefix as k, themeInjectionKey as x, addEventListenerToElementRef as i, syncProperties as l } from "../../utils.mjs";
+import { usePrefix as k, themeInjectionKey as x, addEventListenerToElementRef as l, syncProperties as i } from "../../utils.mjs";
 const b = /* @__PURE__ */ u({
   __name: "CarouselWrapper",
   props: {
     activeSlideIndex: { default: 0 },
+    alignControls: { default: "auto" },
     alignHeader: { default: "start" },
     aria: {},
     description: {},
@@ -24,11 +25,11 @@ const b = /* @__PURE__ */ u({
   },
   emits: ["carouselChange", "update"],
   setup(s, { emit: d }) {
-    const p = k("p-carousel"), t = s, e = f(), a = d, o = c(x), r = () => l(e, { ...t, theme: t.theme || o.value });
+    const p = k("p-carousel"), t = s, e = f(), a = d, o = c(x), r = () => i(e, { ...t, theme: t.theme || o.value });
     return m(() => {
-      r(), i(e, "carouselChange", a), i(e, "update", a);
+      r(), l(e, "carouselChange", a), l(e, "update", a);
     }), h(r), g(o, (n) => {
-      l(e, { theme: t.theme || n });
+      i(e, { theme: t.theme || n });
     }), (n, S) => (C(), y(_(w(p)), {
       ref_key: "pdsComponentRef",
       ref: e

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

@@ -1,9 +1,17 @@
-import type { Theme } from '../types';
+import type { TableLayout, Theme } from '../types';
 type PTableProps = {
     /**
      * A caption describing the contents of the table for accessibility only. This won't be visible in the browser. Use an element with an attribute of `slot="caption"` for a visible caption.
      */
     caption?: string;
+    /**
+     * Displays as compact version.
+     */
+    compact?: boolean;
+    /**
+     * Controls the layout behavior of the table.
+     */
+    layout?: TableLayout;
     /**
      * Adapts the color when used on dark background.
      */
@@ -18,7 +26,10 @@ declare const __VLS_component: import("vue").DefineComponent<PTableProps, {}, {}
 }, string, import("vue").PublicProps, Readonly<PTableProps> & Readonly<{
     onUpdate?: ((value: import("../types").TableHeadCellSort) => any) | undefined;
     onSortingChange?: ((value: import("../types").TableHeadCellSort) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    compact: boolean;
+    layout: TableLayout;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

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

package/esm/lib/types.d.ts

@@ -767,6 +767,8 @@ declare const CAROUSEL_WIDTHS: readonly [
     "extended"
 ];
 export type CarouselWidth = (typeof CAROUSEL_WIDTHS)[number];
+declare const CAROUSEL_SLIDES_PER_PAGE: (string | number)[];
+export type CarouselSlidesPerPage = (typeof CAROUSEL_SLIDES_PER_PAGE)[number];
 declare const CAROUSEL_GRADIENT_COLORS: readonly [
     "background-base",
     "background-surface",
@@ -791,6 +793,12 @@ export type CarouselUpdateEvent = {
     previousIndex: number;
 };
 export type CarouselUpdateEventDetail = CarouselUpdateEvent;
+declare const CAROUSEL_ALIGN_CONTROLS: readonly [
+    "start",
+    "center",
+    "auto"
+];
+export type CarouselAlignControls = (typeof CAROUSEL_ALIGN_CONTROLS)[number];
 export type CheckboxState = FormState;
 export type CheckboxUpdateEventDetail = {
     name: string;
@@ -1357,6 +1365,11 @@ export type SwitchUpdateEvent = {
 };
 export type SwitchUpdateEventDetail = SwitchUpdateEvent;
 export type Direction = "asc" | "desc";
+declare const TABLE_LAYOUTS: readonly [
+    "auto",
+    "fixed"
+];
+export type TableLayout = (typeof TABLE_LAYOUTS)[number];
 export type TableHeadCellSort = {
     id: string;
     active?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-vue",
-  "version": "3.27.0-rc.5",
+  "version": "3.27.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.27.0-rc.5"
+    "@porsche-design-system/components-js": "3.27.0"
   },
   "peerDependencies": {
     "ag-grid-enterprise": ">= 33.0.0 <34.0.0",