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

package/CHANGELOG.md

@@ -14,6 +14,23 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### [Unreleased]
 
+### [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))
+
+#### 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/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/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

@@ -696,6 +696,12 @@ declare const CAROUSEL_WIDTHS: readonly [
     "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.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.18.0"
+    "@porsche-design-system/components-js": "3.19.0-rc.0"
   },
   "peerDependencies": {
     "vue": ">=3.0.0 <4.0.0"