@porsche-design-system/components-vue 3.18.0 → 3.19.0-rc.1

package/CHANGELOG.md

@@ -14,6 +14,31 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### [Unreleased]
 
+### [3.19.0-rc.1] - 2024-09-06
+
+#### Changed
+
+- `Canvas`: Improve UX ([#3494](https://github.com/porsche-design-system/porsche-design-system/pull/3494))
+
+### [3.19.0-rc.0] - 2024-09-03
+
+#### Added
+
+- `componentsReady()`: Introduce optional `readyState` parameter
+  ([#3460](https://github.com/porsche-design-system/porsche-design-system/pull/3460))
+- `Carousel`: introduce `focusOnCenterSlide` & `gradientColor` props
+  ([#3488](https://github.com/porsche-design-system/porsche-design-system/pull/3488))
+
+#### Changed
+
+- `Text Field Wrapper`: width calculation of counter and unit element are now CSS based in relation to the number of
+  characters ([#3472](https://github.com/porsche-design-system/porsche-design-system/pull/3472))
+
+#### Fixed
+
+- `jsdom-polyfill`: errors from included polyfill packages
+  ([3481](https://github.com/porsche-design-system/porsche-design-system/pull/3481))
+
 ### [3.18.0] - 2024-08-21
 
 ### [3.18.0-rc.0] - 2024-08-21

package/cjs/lib/components/CanvasWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),s=require("../../utils.cjs"),m=e.defineComponent({__name:"CanvasWrapper",props:{sidebarEndOpen:{type:Boolean,default:!1},sidebarEndWidth:{default:"medium"},sidebarStartOpen:{type:Boolean,default:!1},sidebarStartWidth:{default:"medium"}},emits:["dismissSidebarEnd","dismissSidebarStart"],setup(o,{emit:d}){const a=s.usePrefix("p-canvas"),i=o,t=e.ref(),n=d,r=()=>s.syncProperties(t,i);return e.onMounted(()=>{r(),s.addEventListenerToElementRef(t,"dismissSidebarEnd",n),s.addEventListenerToElementRef(t,"dismissSidebarStart",n)}),e.onUpdated(r),(p,c)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(a)),{ref_key:"pdsComponentRef",ref:t},{default:e.withCtx(()=>[e.renderSlot(p.$slots,"default")]),_:3},512))}});module.exports=m;
+"use strict";const e=require("vue"),t=require("../../utils.cjs"),u=e.defineComponent({__name:"CanvasWrapper",props:{sidebarEndIcon:{default:"configurate"},sidebarEndOpen:{type:Boolean,default:!1},sidebarStartIcon:{default:"menu-lines"},sidebarStartOpen:{type:Boolean,default:!1},theme:{}},setup(c){const p=t.usePrefix("p-canvas"),n=c,o=e.ref(),r=e.inject(t.themeInjectionKey),a=()=>t.syncProperties(o,{...n,theme:n.theme||r.value});return e.onMounted(a),e.onUpdated(a),e.watch(r,s=>{t.syncProperties(o,{theme:n.theme||s})}),(s,d)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(p)),{ref_key:"pdsComponentRef",ref:o},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default")]),_:3},512))}});module.exports=u;

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:{},heading:{},headingSize:{default:"x-large"},intl:{},pagination:{default:!0},rewind:{type:Boolean,default:!0},skipLinkTarget:{},slidesPerPage:{default:1},theme:{},width:{default:"basic"},wrapContent:{type:Boolean}},emits:["carouselChange","update"],setup(d,{emit:l}){const c=t.usePrefix("p-carousel"),a=d,n=e.ref(),r=l,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,u)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(c)),{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"),c=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:{},width:{default:"basic"},wrapContent:{type:Boolean}},emits:["carouselChange","update"],setup(d,{emit:l}){const u=t.usePrefix("p-carousel"),o=d,n=e.ref(),r=l,s=e.inject(t.themeInjectionKey),i=()=>t.syncProperties(n,{...o,theme:o.theme||s.value});return e.onMounted(()=>{i(),t.addEventListenerToElementRef(n,"carouselChange",r),t.addEventListenerToElementRef(n,"update",r)}),e.onUpdated(i),e.watch(s,a=>{t.syncProperties(n,{theme:o.theme||a})}),(a,p)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(u)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(a.$slots,"default")]),_:3},512))}});module.exports=c;

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

@@ -1,32 +1,44 @@
-import type { CanvasSidebarEndWidth, CanvasSidebarStartWidth } from '../types';
+import type { CanvasSidebarEndIcon, CanvasSidebarStartIcon, Theme } from '../types';
 type PCanvasProps = {
+    /**
+     * The icon to toggle the Sidebar on the end side
+     */
+    sidebarEndIcon?: CanvasSidebarEndIcon;
+    /**
+     * Open Sidebar on the end side
+     */
     sidebarEndOpen?: boolean;
     /**
-     * Defines the width of the sidebar on the end side
+     * The icon to toggle the Sidebar on the start side
      */
-    sidebarEndWidth?: CanvasSidebarEndWidth;
+    sidebarStartIcon?: CanvasSidebarStartIcon;
     /**
      * Open Sidebar on the start side
      */
     sidebarStartOpen?: boolean;
     /**
-     * Defines the width of the sidebar on the start side
+     * Adapts the color depending on the theme. Has no effect when "inherit" is set as color prop.
      */
-    sidebarStartWidth?: CanvasSidebarStartWidth;
+    theme?: Theme;
 };
 declare function __VLS_template(): {
     default?(_: {}): any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<PCanvasProps>, {
+    sidebarEndIcon: string;
+    sidebarEndOpen: boolean;
+    sidebarStartIcon: string;
+    sidebarStartOpen: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<PCanvasProps>, {
+    sidebarEndIcon: string;
     sidebarEndOpen: boolean;
-    sidebarEndWidth: string;
+    sidebarStartIcon: string;
     sidebarStartOpen: boolean;
-    sidebarStartWidth: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
+}>>>, {
+    sidebarEndIcon: CanvasSidebarEndIcon;
     sidebarEndOpen: boolean;
-    sidebarEndWidth: CanvasSidebarEndWidth;
+    sidebarStartIcon: CanvasSidebarStartIcon;
     sidebarStartOpen: boolean;
-    sidebarStartWidth: CanvasSidebarStartWidth;
 }, {}>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;

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

@@ -1,29 +1,29 @@
-import { defineComponent as p, ref as m, onMounted as f, onUpdated as l, openBlock as c, createBlock as u, resolveDynamicComponent as b, unref as S, withCtx as C, renderSlot as _ } from "vue";
-import { usePrefix as y, addEventListenerToElementRef as s, syncProperties as E } from "../../utils.mjs";
-const k = /* @__PURE__ */ p({
+import { defineComponent as c, ref as f, inject as d, onMounted as m, onUpdated as l, watch as i, openBlock as u, createBlock as h, resolveDynamicComponent as y, unref as C, withCtx as _, renderSlot as b } from "vue";
+import { usePrefix as v, themeInjectionKey as B, syncProperties as r } from "../../utils.mjs";
+const I = /* @__PURE__ */ c({
   __name: "CanvasWrapper",
   props: {
+    sidebarEndIcon: { default: "configurate" },
     sidebarEndOpen: { type: Boolean, default: !1 },
-    sidebarEndWidth: { default: "medium" },
+    sidebarStartIcon: { default: "menu-lines" },
     sidebarStartOpen: { type: Boolean, default: !1 },
-    sidebarStartWidth: { default: "medium" }
+    theme: {}
   },
-  emits: ["dismissSidebarEnd", "dismissSidebarStart"],
-  setup(o, { emit: r }) {
-    const a = y("p-canvas"), d = o, e = m(), t = r, n = () => E(e, d);
-    return f(() => {
-      n(), s(e, "dismissSidebarEnd", t), s(e, "dismissSidebarStart", t);
-    }), l(n), (i, h) => (c(), u(b(S(a)), {
+  setup(s) {
+    const p = v("p-canvas"), e = s, t = f(), o = d(B), a = () => r(t, { ...e, theme: e.theme || o.value });
+    return m(a), l(a), i(o, (n) => {
+      r(t, { theme: e.theme || n });
+    }), (n, k) => (u(), h(y(C(p)), {
       ref_key: "pdsComponentRef",
-      ref: e
+      ref: t
     }, {
-      default: C(() => [
-        _(i.$slots, "default")
+      default: _(() => [
+        b(n.$slots, "default")
       ]),
       _: 3
     }, 512));
   }
 });
 export {
-  k as default
+  I as default
 };

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

@@ -1,4 +1,4 @@
-import type { CarouselAlignHeader, SelectedAriaAttributes, CarouselAriaAttribute, BreakpointCustomizable, CarouselHeadingSize, CarouselInternationalization, Theme, CarouselWidth } from '../types';
+import type { CarouselAlignHeader, SelectedAriaAttributes, CarouselAriaAttribute, BreakpointCustomizable, CarouselGradientColor, CarouselHeadingSize, CarouselInternationalization, Theme, CarouselWidth } from '../types';
 type PCarouselProps = {
     /**
      * Defines which slide to be active (zero-based numbering).
@@ -20,6 +20,14 @@ type PCarouselProps = {
      * @deprecated since v3.0.0, will be removed with next major release, use `pagination` instead. If true, the carousel will not show pagination bullets at the bottom.
      */
     disablePagination?: BreakpointCustomizable<boolean>;
+    /**
+     * Indicates whether focus should be set on the center slide. If true, the carousel loops by individual slide; otherwise, it loops by page.
+     */
+    focusOnCenterSlide?: boolean;
+    /**
+     * Adapts the background gradient for the left and right edge.
+     */
+    gradientColor?: CarouselGradientColor;
     /**
      * Defines the heading used in the carousel.
      */
@@ -68,6 +76,8 @@ declare function __VLS_template(): {
 declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<PCarouselProps>, {
     activeSlideIndex: number;
     alignHeader: string;
+    focusOnCenterSlide: boolean;
+    gradientColor: string;
     headingSize: string;
     pagination: boolean;
     rewind: boolean;
@@ -79,6 +89,8 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<PCarouselProps>, {
     activeSlideIndex: number;
     alignHeader: string;
+    focusOnCenterSlide: boolean;
+    gradientColor: string;
     headingSize: string;
     pagination: boolean;
     rewind: boolean;
@@ -91,6 +103,8 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<
     width: CarouselWidth;
     activeSlideIndex: number;
     alignHeader: CarouselAlignHeader;
+    focusOnCenterSlide: boolean;
+    gradientColor: CarouselGradientColor;
     headingSize: CarouselHeadingSize;
     pagination: BreakpointCustomizable<boolean>;
     rewind: boolean;

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

@@ -1,6 +1,6 @@
-import { defineComponent as c, ref as u, inject as f, onMounted as m, onUpdated as h, watch as g, openBlock as C, createBlock as y, resolveDynamicComponent as _, unref as w, withCtx as P, renderSlot as k } from "vue";
-import { usePrefix as x, themeInjectionKey as v, addEventListenerToElementRef as i, syncProperties as s } from "../../utils.mjs";
-const S = /* @__PURE__ */ c({
+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 P, renderSlot as k } from "vue";
+import { usePrefix as x, themeInjectionKey as B, addEventListenerToElementRef as i, syncProperties as s } from "../../utils.mjs";
+const b = /* @__PURE__ */ u({
   __name: "CarouselWrapper",
   props: {
     activeSlideIndex: { default: 0 },
@@ -8,6 +8,8 @@ const S = /* @__PURE__ */ c({
     aria: {},
     description: {},
     disablePagination: {},
+    focusOnCenterSlide: { type: Boolean, default: !1 },
+    gradientColor: { default: "none" },
     heading: {},
     headingSize: { default: "x-large" },
     intl: {},
@@ -20,13 +22,13 @@ const S = /* @__PURE__ */ c({
     wrapContent: { type: Boolean }
   },
   emits: ["carouselChange", "update"],
-  setup(d, { emit: p }) {
-    const l = x("p-carousel"), t = d, e = u(), a = p, o = f(v), r = () => s(e, { ...t, theme: t.theme || o.value });
+  setup(d, { emit: l }) {
+    const p = x("p-carousel"), t = d, e = f(), a = l, o = c(B), r = () => s(e, { ...t, theme: t.theme || o.value });
     return m(() => {
       r(), i(e, "carouselChange", a), i(e, "update", a);
     }), h(r), g(o, (n) => {
       s(e, { theme: t.theme || n });
-    }), (n, B) => (C(), y(_(w(l)), {
+    }), (n, v) => (C(), y(_(w(p)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
@@ -38,5 +40,5 @@ const S = /* @__PURE__ */ c({
   }
 });
 export {
-  S as default
+  b as default
 };

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

@@ -46,8 +46,8 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<
     scrollbar: boolean;
 }>>>, {
     scrollbar: boolean;
-    alignScrollIndicator: ScrollerAlignScrollIndicator;
     gradientColor: ScrollerGradientColor;
+    alignScrollIndicator: ScrollerAlignScrollIndicator;
 }, {}>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;

package/esm/lib/types.d.ts

@@ -684,18 +684,19 @@ export type ButtonTileSize = TileSize;
 export type ButtonTileBackground = TileBackground;
 export type ButtonTileWeight = TileWeight;
 export type ButtonTileAlign = TileAlign;
-declare const CANVAS_SIDEBAR_WIDTHS: readonly [
-    "medium",
-    "large"
-];
-export type CanvasSidebarWidth = (typeof CANVAS_SIDEBAR_WIDTHS)[number];
-export type CanvasSidebarStartWidth = CanvasSidebarWidth;
-export type CanvasSidebarEndWidth = CanvasSidebarWidth;
+export type CanvasSidebarStartIcon = IconName;
+export type CanvasSidebarEndIcon = IconName;
 declare const CAROUSEL_WIDTHS: readonly [
     "basic",
     "extended"
 ];
 export type CarouselWidth = (typeof CAROUSEL_WIDTHS)[number];
+declare const CAROUSEL_GRADIENT_COLORS: readonly [
+    "background-base",
+    "background-surface",
+    "none"
+];
+export type CarouselGradientColor = (typeof CAROUSEL_GRADIENT_COLORS)[number];
 declare const CAROUSEL_ALIGN_HEADERS: readonly [
     "start",
     "center",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-vue",
-  "version": "3.18.0",
+  "version": "3.19.0-rc.1",
   "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.18.0"
+    "@porsche-design-system/components-js": "3.19.0-rc.1"
   },
   "peerDependencies": {
     "vue": ">=3.0.0 <4.0.0"