@porsche-design-system/components-vue 3.4.0 → 3.5.0

package/CHANGELOG.md

@@ -14,6 +14,22 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### [Unreleased]
 
+### [3.5.0] - 2023-07-25
+
+### [3.5.0-rc.0] - 2023-07-21
+
+#### Added
+
+- `background` property to `Button Tile` and `Link Tile` component to adapt the description and link/button theme when
+  used on light background image ([#2669](https://github.com/porsche-design-system/porsche-design-system/pull/2669))
+- Breakpoint customizable property `columns` to `Segmented Control` to set the amount of columns
+  ([#2652](https://github.com/porsche-design-system/porsche-design-system/pull/2652))
+
+### Fixed
+
+- Alignment of `Icon` inside `Accordion` header
+  ([#2673](https://github.com/porsche-design-system/porsche-design-system/pull/2673))
+
 ### [3.4.0] - 2023-07-14
 
 ### [3.4.0-rc.0] - 2023-07-13

package/lib/components/ButtonTileWrapper.vue.d.ts

@@ -50,6 +50,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<BreakpointCustomizable<"1:1" | "4:3" | "3:4" | "16:9" | "9:16">>;
         default: string;
     };
+    background: {
+        type: import("vue").PropType<"light" | "dark">;
+        default: string;
+    };
     gradient: {
         type: import("vue").PropType<boolean>;
         default: boolean;
@@ -105,6 +109,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<BreakpointCustomizable<"1:1" | "4:3" | "3:4" | "16:9" | "9:16">>;
         default: string;
     };
+    background: {
+        type: import("vue").PropType<"light" | "dark">;
+        default: string;
+    };
     gradient: {
         type: import("vue").PropType<boolean>;
         default: boolean;
@@ -119,6 +127,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     loading: boolean;
     align: "top" | "bottom";
     aspectRatio: BreakpointCustomizable<"1:1" | "4:3" | "3:4" | "16:9" | "9:16">;
+    background: "light" | "dark";
     gradient: boolean;
 }, {}>, {
     default?(_: {}): any;

package/lib/components/ButtonTileWrapper.vue.js

@@ -1,11 +1,12 @@
-import { defineComponent as r, ref as d, onMounted as f, onUpdated as p, openBlock as u, createBlock as s, resolveDynamicComponent as i, unref as c, withCtx as m, renderSlot as b } from "vue";
+import { defineComponent as d, ref as r, onMounted as f, onUpdated as p, openBlock as u, createBlock as s, resolveDynamicComponent as i, unref as c, withCtx as m, renderSlot as b } from "vue";
 import { getPrefixedTagName as g, syncProperties as o } from "../../utils.js";
-const C = /* @__PURE__ */ r({
+const C = /* @__PURE__ */ d({
   __name: "ButtonTileWrapper",
   props: {
     align: { default: "bottom" },
     aria: {},
     aspectRatio: { default: "4:3" },
+    background: { default: "dark" },
     compact: { default: !1 },
     description: {},
     disabled: { type: Boolean, default: !1 },
@@ -19,7 +20,7 @@ const C = /* @__PURE__ */ r({
     weight: { default: "semi-bold" }
   },
   setup(a) {
-    const t = a, n = g("p-button-tile"), e = d();
+    const t = a, n = g("p-button-tile"), e = r();
     return f(() => {
       o(e.value, t);
     }), p(() => {

package/lib/components/GridItemWrapper.vue.d.ts

@@ -2,25 +2,25 @@ import type { BreakpointCustomizable } from '../types';
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     size: {
-        type: import("vue").PropType<BreakpointCustomizable<3 | 4 | 7 | 5 | 2 | 1 | 6 | 12 | 8 | 9 | 10 | 11>>;
+        type: import("vue").PropType<BreakpointCustomizable<3 | 4 | 7 | 2 | 5 | 1 | 6 | 12 | 8 | 9 | 10 | 11>>;
         default: number;
     };
     offset: {
-        type: import("vue").PropType<BreakpointCustomizable<0 | 3 | 4 | 7 | 5 | 2 | 1 | 6 | 8 | 9 | 10 | 11>>;
+        type: import("vue").PropType<BreakpointCustomizable<0 | 3 | 4 | 7 | 2 | 5 | 1 | 6 | 8 | 9 | 10 | 11>>;
         default: number;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     size: {
-        type: import("vue").PropType<BreakpointCustomizable<3 | 4 | 7 | 5 | 2 | 1 | 6 | 12 | 8 | 9 | 10 | 11>>;
+        type: import("vue").PropType<BreakpointCustomizable<3 | 4 | 7 | 2 | 5 | 1 | 6 | 12 | 8 | 9 | 10 | 11>>;
         default: number;
     };
     offset: {
-        type: import("vue").PropType<BreakpointCustomizable<0 | 3 | 4 | 7 | 5 | 2 | 1 | 6 | 8 | 9 | 10 | 11>>;
+        type: import("vue").PropType<BreakpointCustomizable<0 | 3 | 4 | 7 | 2 | 5 | 1 | 6 | 8 | 9 | 10 | 11>>;
         default: number;
     };
 }>>, {
-    size: BreakpointCustomizable<3 | 4 | 7 | 5 | 2 | 1 | 6 | 12 | 8 | 9 | 10 | 11>;
-    offset: BreakpointCustomizable<0 | 3 | 4 | 7 | 5 | 2 | 1 | 6 | 8 | 9 | 10 | 11>;
+    size: BreakpointCustomizable<3 | 4 | 7 | 2 | 5 | 1 | 6 | 12 | 8 | 9 | 10 | 11>;
+    offset: BreakpointCustomizable<0 | 3 | 4 | 7 | 2 | 5 | 1 | 6 | 8 | 9 | 10 | 11>;
 }, {}>, {
     default?(_: {}): any;
 }>;

package/lib/components/LinkTileWrapper.vue.d.ts

@@ -34,6 +34,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<BreakpointCustomizable<"1:1" | "4:3" | "3:4" | "16:9" | "9:16">>;
         default: string;
     };
+    background: {
+        type: import("vue").PropType<"light" | "dark">;
+        default: string;
+    };
     gradient: {
         type: import("vue").PropType<boolean>;
         default: boolean;
@@ -84,6 +88,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<BreakpointCustomizable<"1:1" | "4:3" | "3:4" | "16:9" | "9:16">>;
         default: string;
     };
+    background: {
+        type: import("vue").PropType<"light" | "dark">;
+        default: string;
+    };
     gradient: {
         type: import("vue").PropType<boolean>;
         default: boolean;
@@ -105,6 +113,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     size: BreakpointCustomizable<"default" | "inherit">;
     align: "top" | "bottom";
     aspectRatio: BreakpointCustomizable<"1:1" | "4:3" | "3:4" | "16:9" | "9:16">;
+    background: "light" | "dark";
     gradient: boolean;
     target: string;
 }, {}>, {

package/lib/components/LinkTileWrapper.vue.js

@@ -1,11 +1,12 @@
-import { defineComponent as l, ref as f, onMounted as p, onUpdated as d, openBlock as s, createBlock as i, resolveDynamicComponent as u, unref as c, withCtx as m, renderSlot as _ } from "vue";
-import { getPrefixedTagName as g, syncProperties as o } from "../../utils.js";
+import { defineComponent as l, ref as d, onMounted as f, onUpdated as p, openBlock as s, createBlock as i, resolveDynamicComponent as u, unref as c, withCtx as m, renderSlot as g } from "vue";
+import { getPrefixedTagName as _, syncProperties as o } from "../../utils.js";
 const h = /* @__PURE__ */ l({
   __name: "LinkTileWrapper",
   props: {
     align: { default: "bottom" },
     aria: {},
     aspectRatio: { default: "4:3" },
+    background: { default: "dark" },
     compact: { default: !1 },
     description: {},
     download: {},
@@ -18,17 +19,17 @@ const h = /* @__PURE__ */ l({
     weight: { default: "semi-bold" }
   },
   setup(a) {
-    const t = a, n = g("p-link-tile"), e = f();
-    return p(() => {
+    const t = a, n = _("p-link-tile"), e = d();
+    return f(() => {
       o(e.value, t);
-    }), d(() => {
+    }), p(() => {
       o(e.value, t);
-    }), (r, C) => (s(), i(u(c(n)), {
+    }), (r, k) => (s(), i(u(c(n)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
       default: m(() => [
-        _(r.$slots, "default")
+        g(r.$slots, "default")
       ]),
       _: 3
     }, 512));

package/lib/components/SegmentedControlWrapper.vue.d.ts

@@ -1,4 +1,4 @@
-import type { SegmentedControlUpdateEvent } from '../types';
+import type { BreakpointCustomizable, SegmentedControlUpdateEvent } from '../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     theme: {
         type: import("vue").PropType<"light" | "dark">;
@@ -10,6 +10,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     value: {
         type: import("vue").PropType<string | number>;
     };
+    columns: {
+        type: import("vue").PropType<BreakpointCustomizable<string | number>>;
+        default: string;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     segmentedControlChange: (value: SegmentedControlUpdateEvent) => void;
     update: (value: SegmentedControlUpdateEvent) => void;
@@ -24,11 +28,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     value: {
         type: import("vue").PropType<string | number>;
     };
+    columns: {
+        type: import("vue").PropType<BreakpointCustomizable<string | number>>;
+        default: string;
+    };
 }>> & {
     onUpdate?: ((value: SegmentedControlUpdateEvent) => any) | undefined;
     onSegmentedControlChange?: ((value: SegmentedControlUpdateEvent) => any) | undefined;
 }, {
     theme: "light" | "dark";
+    columns: BreakpointCustomizable<string | number>;
 }, {}>, {
     default?(_: {}): any;
 }>;

package/lib/components/SegmentedControlWrapper.vue.js

@@ -1,25 +1,26 @@
-import { defineComponent as l, ref as s, onMounted as m, onUpdated as u, openBlock as f, createBlock as c, resolveDynamicComponent as C, unref as g, withCtx as i, renderSlot as v } from "vue";
+import { defineComponent as d, ref as s, onMounted as m, onUpdated as u, openBlock as f, createBlock as c, resolveDynamicComponent as C, unref as g, withCtx as i, renderSlot as v } from "vue";
 import { getPrefixedTagName as _, syncProperties as n, addEventListenerToElementRef as r } from "../../utils.js";
-const y = /* @__PURE__ */ l({
+const y = /* @__PURE__ */ d({
   __name: "SegmentedControlWrapper",
   props: {
     backgroundColor: {},
+    columns: { default: "auto" },
     theme: { default: "light" },
     value: {}
   },
   emits: ["segmentedControlChange", "update"],
   setup(a, { emit: o }) {
-    const t = a, p = _("p-segmented-control"), e = s();
+    const t = a, l = _("p-segmented-control"), e = s();
     return m(() => {
       n(e.value, t), r(e.value, "segmentedControlChange", o), r(e.value, "update", o);
     }), u(() => {
       n(e.value, t);
-    }), (d, h) => (f(), c(C(g(p)), {
+    }), (p, h) => (f(), c(C(g(l)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
       default: i(() => [
-        v(d.$slots, "default")
+        v(p.$slots, "default")
       ]),
       _: 3
     }, 512));

package/lib/types.d.ts

@@ -441,6 +441,11 @@ export type BreakpointValues<T> = {
     base: T;
 };
 export type BreakpointCustomizable<T> = T | BreakpointValues<T> | string;
+declare const THEMES: readonly [
+    "light",
+    "dark"
+];
+export type Theme = typeof THEMES[number];
 declare const TILE_ASPECT_RATIOS: readonly [
     "1:1",
     "4:3",
@@ -459,6 +464,7 @@ declare const TILE_WEIGHTS: readonly [
     "semi-bold"
 ];
 export type TileWeight = (typeof TILE_WEIGHTS)[number];
+export type TileBackground = (typeof THEMES)[number];
 declare const TILE_ALIGNS: readonly [
     "top",
     "bottom"
@@ -490,11 +496,6 @@ declare const SCROLL_INDICATOR_POSITIONS: readonly [
 /** @deprecated */
 export type ScrollerScrollIndicatorPosition = (typeof SCROLL_INDICATOR_POSITIONS)[number];
 export type ScrollerAlignScrollIndicator = ScrollerScrollIndicatorPosition;
-declare const THEMES: readonly [
-    "light",
-    "dark"
-];
-export type Theme = typeof THEMES[number];
 declare const ALIGN_LABELS: readonly [
     "left",
     "right"
@@ -615,6 +616,7 @@ export type ButtonTileIcon = LinkButtonIconName;
 export type ButtonTileType = ButtonType;
 export type ButtonTileAspectRatio = TileAspectRatio;
 export type ButtonTileSize = TileSize;
+export type ButtonTileBackground = TileBackground;
 export type ButtonTileWeight = TileWeight;
 export type ButtonTileAlign = TileAlign;
 declare const CAROUSEL_WIDTHS: readonly [
@@ -931,6 +933,7 @@ export type LinkTileTarget = LinkTarget;
 export type LinkTileAriaAttribute = LinkAriaAttribute;
 export type LinkTileAspectRatio = TileAspectRatio;
 export type LinkTileSize = TileSize;
+export type LinkTileBackground = TileBackground;
 export type LinkTileAlign = TileAlign;
 declare const LINK_TILE_WEIGHTS: readonly [
     "regular",
@@ -1038,6 +1041,8 @@ export type SegmentedControlBackgroundColor = (typeof SEGMENTED_CONTROL_BACKGROU
 export type SegmentedControlUpdateEvent = {
     value: string | number;
 };
+declare const SEGMENTED_CONTROL_COLUMNS: (string | number)[];
+export type SegmentedControlColumns = (typeof SEGMENTED_CONTROL_COLUMNS)[number];
 export type SegmentedControlItemIcon = LinkButtonIconName;
 declare const DROPDOWN_DIRECTIONS: readonly [
     "down",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-vue",
-  "version": "3.4.0",
+  "version": "3.5.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.4.0"
+    "@porsche-design-system/components-js": "3.5.0"
   },
   "peerDependencies": {
     "vue": ">=3.0.0 <4.0.0"