@porsche-design-system/components-vue 3.17.0-rc.0 → 3.17.0-rc.2

package/CHANGELOG.md

@@ -14,6 +14,29 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### [Unreleased]
 
+### [3.17.0-rc.2] - 2024-08-01
+
+#### Fixed
+
+- `Optgoup`: hydration error in Next.js SSR context
+  ([#3432](https://github.com/porsche-design-system/porsche-design-system/pull/3432))
+- `Select`: ensure slotted image width
+  ([#3432](https://github.com/porsche-design-system/porsche-design-system/pull/3432))
+
+### [3.17.0-rc.1] - 2024-07-31
+
+#### Added
+
+- `Button`, `Link`:
+  - Prop `variant` extended by value `ghost`
+    ([#3423](https://github.com/porsche-design-system/porsche-design-system/pull/3423))
+  - Prop `compact` ([#3423](https://github.com/porsche-design-system/porsche-design-system/pull/3423))
+
+#### Fixed
+
+- `Tabs Bar`: fixed tabindex issue when `Tabs Bar` is rendered with the `Scroller` component
+  ([#3421](https://github.com/porsche-design-system/porsche-design-system/pull/3421))
+
 ### [3.17.0-rc.0] - 2024-07-29
 
 #### Added
@@ -75,12 +98,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 - `Link Pure`: Broken with `alignLabel="start"`, hidden label & nested anchor
   ([#3379](https://github.com/porsche-design-system/porsche-design-system/pull/3379))
-- `PTextFieldWrapper`, `PTextareaWrapper`: Conditionally rendered component throws
+- `Textfield Wrapper`, `Textarea Wrapper`: Conditionally rendered component throws
   `TypeError: Cannot read properties of undefined (reading 'type')`
   ([#3383](https://github.com/porsche-design-system/porsche-design-system/pull/3383))
-- `LinkTile`: Broken word-break & hyphens Safari
+- `Link Tile`: Broken word-break & hyphens Safari
   ([#3397](https://github.com/porsche-design-system/porsche-design-system/pull/3397))
-- `Select-Wrapper`: `optgroup` styling and behavior
+- `Select Wrapper`: `optgroup` styling and behavior
   ([#3410](https://github.com/porsche-design-system/porsche-design-system/pull/3410))
 
 ### [3.16.0] - 2024-07-02

package/cjs/lib/components/ButtonWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),t=require("../../utils.cjs"),u=e.defineComponent({__name:"ButtonWrapper",props:{aria:{},disabled:{type:Boolean,default:!1},hideLabel:{default:!1},icon:{default:"none"},iconSource:{},loading:{type:Boolean,default:!1},name:{},theme:{},type:{default:"submit"},value:{},variant:{default:"primary"}},setup(c){const p=t.usePrefix("p-button"),n=c,o=e.ref(),r=e.inject(t.themeInjectionKey),s=()=>t.syncProperties(o,{...n,theme:n.theme||r.value});return e.onMounted(s),e.onUpdated(s),e.watch(r,a=>{t.syncProperties(o,{theme:n.theme||a})}),(a,l)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(p)),{ref_key:"pdsComponentRef",ref:o},{default:e.withCtx(()=>[e.renderSlot(a.$slots,"default")]),_:3},512))}});module.exports=u;
+"use strict";const e=require("vue"),t=require("../../utils.cjs"),p=e.defineComponent({__name:"ButtonWrapper",props:{aria:{},compact:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},hideLabel:{default:!1},icon:{default:"none"},iconSource:{},loading:{type:Boolean,default:!1},name:{},theme:{},type:{default:"submit"},value:{},variant:{default:"primary"}},setup(c){const l=t.usePrefix("p-button"),n=c,o=e.ref(),s=e.inject(t.themeInjectionKey),r=()=>t.syncProperties(o,{...n,theme:n.theme||s.value});return e.onMounted(r),e.onUpdated(r),e.watch(s,a=>{t.syncProperties(o,{theme:n.theme||a})}),(a,u)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(l)),{ref_key:"pdsComponentRef",ref:o},{default:e.withCtx(()=>[e.renderSlot(a.$slots,"default")]),_:3},512))}});module.exports=p;

package/cjs/lib/components/LinkSocialWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),t=require("../../utils.cjs"),a=e.defineComponent({__name:"LinkSocialWrapper",props:{hideLabel:{default:!1},href:{},icon:{},iconSource:{},rel:{},target:{default:"_self"},theme:{}},setup(p){const i=t.usePrefix("p-link-social"),n=p,o=e.ref(),s=e.inject(t.themeInjectionKey),c=()=>t.syncProperties(o,{...n,theme:n.theme||s.value});return e.onMounted(c),e.onUpdated(c),e.watch(s,r=>{t.syncProperties(o,{theme:n.theme||r})}),(r,l)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(i)),{ref_key:"pdsComponentRef",ref:o},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"default")]),_:3},512))}});module.exports=a;
+"use strict";const e=require("vue"),t=require("../../utils.cjs"),l=e.defineComponent({__name:"LinkSocialWrapper",props:{compact:{type:Boolean,default:!1},hideLabel:{default:!1},href:{},icon:{},iconSource:{},rel:{},target:{default:"_self"},theme:{}},setup(a){const p=t.usePrefix("p-link-social"),o=a,n=e.ref(),s=e.inject(t.themeInjectionKey),c=()=>t.syncProperties(n,{...o,theme:o.theme||s.value});return e.onMounted(c),e.onUpdated(c),e.watch(s,r=>{t.syncProperties(n,{theme:o.theme||r})}),(r,i)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(p)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"default")]),_:3},512))}});module.exports=l;

package/cjs/lib/components/LinkWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),t=require("../../utils.cjs"),i=e.defineComponent({__name:"LinkWrapper",props:{aria:{},download:{},hideLabel:{default:!1},href:{},icon:{default:"none"},iconSource:{},rel:{},target:{default:"_self"},theme:{},variant:{default:"primary"}},setup(c){const p=t.usePrefix("p-link"),n=c,o=e.ref(),s=e.inject(t.themeInjectionKey),a=()=>t.syncProperties(o,{...n,theme:n.theme||s.value});return e.onMounted(a),e.onUpdated(a),e.watch(s,r=>{t.syncProperties(o,{theme:n.theme||r})}),(r,f)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(p)),{ref_key:"pdsComponentRef",ref:o},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"default")]),_:3},512))}});module.exports=i;
+"use strict";const e=require("vue"),t=require("../../utils.cjs"),l=e.defineComponent({__name:"LinkWrapper",props:{aria:{},compact:{type:Boolean,default:!1},download:{},hideLabel:{default:!1},href:{},icon:{default:"none"},iconSource:{},rel:{},target:{default:"_self"},theme:{},variant:{default:"primary"}},setup(c){const p=t.usePrefix("p-link"),n=c,o=e.ref(),s=e.inject(t.themeInjectionKey),a=()=>t.syncProperties(o,{...n,theme:n.theme||s.value});return e.onMounted(a),e.onUpdated(a),e.watch(s,r=>{t.syncProperties(o,{theme:n.theme||r})}),(r,f)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(p)),{ref_key:"pdsComponentRef",ref:o},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"default")]),_:3},512))}});module.exports=l;

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

@@ -4,6 +4,10 @@ type PButtonProps = {
      * Add ARIA attributes.
      */
     aria?: SelectedAriaAttributes<ButtonAriaAttribute>;
+    /**
+     * Displays as compact version.
+     */
+    compact?: boolean;
     /**
      * Disables the button. No events will be triggered while disabled state is active.
      */
@@ -49,6 +53,7 @@ declare function __VLS_template(): {
     default?(_: {}): any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<PButtonProps>, {
+    compact: boolean;
     disabled: boolean;
     hideLabel: boolean;
     icon: string;
@@ -56,6 +61,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<
     type: string;
     variant: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<PButtonProps>, {
+    compact: boolean;
     disabled: boolean;
     hideLabel: boolean;
     icon: string;
@@ -64,6 +70,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<
     variant: string;
 }>>>, {
     type: ButtonType;
+    compact: boolean;
     disabled: boolean;
     hideLabel: BreakpointCustomizable<boolean>;
     icon: ButtonIcon;

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

@@ -1,9 +1,10 @@
-import { defineComponent as f, ref as l, inject as m, onMounted as c, onUpdated as u, watch as d, openBlock as i, createBlock as h, resolveDynamicComponent as y, unref as _, withCtx as C, renderSlot as b } from "vue";
-import { usePrefix as B, themeInjectionKey as v, syncProperties as r } from "../../utils.mjs";
-const P = /* @__PURE__ */ f({
+import { defineComponent as s, ref as f, inject as c, onMounted as m, onUpdated as u, watch as d, openBlock as i, createBlock as h, resolveDynamicComponent as y, unref as _, withCtx as B, renderSlot as C } from "vue";
+import { usePrefix as b, themeInjectionKey as v, syncProperties as r } from "../../utils.mjs";
+const P = /* @__PURE__ */ s({
   __name: "ButtonWrapper",
   props: {
     aria: {},
+    compact: { type: Boolean, default: !1 },
     disabled: { type: Boolean, default: !1 },
     hideLabel: { default: !1 },
     icon: { default: "none" },
@@ -16,15 +17,15 @@ const P = /* @__PURE__ */ f({
     variant: { default: "primary" }
   },
   setup(p) {
-    const s = B("p-button"), e = p, t = l(), n = m(v), a = () => r(t, { ...e, theme: e.theme || n.value });
-    return c(a), u(a), d(n, (o) => {
+    const l = b("p-button"), e = p, t = f(), n = c(v), a = () => r(t, { ...e, theme: e.theme || n.value });
+    return m(a), u(a), d(n, (o) => {
       r(t, { theme: e.theme || o });
-    }), (o, k) => (i(), h(y(_(s)), {
+    }), (o, k) => (i(), h(y(_(l)), {
       ref_key: "pdsComponentRef",
       ref: t
     }, {
-      default: C(() => [
-        b(o.$slots, "default")
+      default: B(() => [
+        C(o.$slots, "default")
       ]),
       _: 3
     }, 512));

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

@@ -1,5 +1,9 @@
 import type { BreakpointCustomizable, LinkSocialIcon, LinkSocialTarget, Theme } from '../types';
 type PLinkSocialProps = {
+    /**
+     * Displays as compact version.
+     */
+    compact?: boolean;
     /**
      * Show or hide label.
      */
@@ -33,12 +37,15 @@ declare function __VLS_template(): {
     default?(_: {}): any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<PLinkSocialProps>, {
+    compact: boolean;
     hideLabel: boolean;
     target: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<PLinkSocialProps>, {
+    compact: boolean;
     hideLabel: boolean;
     target: string;
 }>>>, {
+    compact: boolean;
     hideLabel: BreakpointCustomizable<boolean>;
     target: LinkSocialTarget;
 }, {}>;

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

@@ -1,8 +1,9 @@
-import { defineComponent as a, ref as f, inject as m, onMounted as l, onUpdated as i, watch as d, openBlock as u, createBlock as h, resolveDynamicComponent as _, unref as C, withCtx as k, renderSlot as y } from "vue";
-import { usePrefix as w, themeInjectionKey as x, syncProperties as s } from "../../utils.mjs";
-const b = /* @__PURE__ */ a({
+import { defineComponent as p, ref as f, inject as l, onMounted as m, onUpdated as i, watch as d, openBlock as u, createBlock as h, resolveDynamicComponent as _, unref as y, withCtx as C, renderSlot as k } from "vue";
+import { usePrefix as w, themeInjectionKey as x, syncProperties as a } from "../../utils.mjs";
+const S = /* @__PURE__ */ p({
   __name: "LinkSocialWrapper",
   props: {
+    compact: { type: Boolean, default: !1 },
     hideLabel: { default: !1 },
     href: {},
     icon: {},
@@ -12,20 +13,20 @@ const b = /* @__PURE__ */ a({
     theme: {}
   },
   setup(c) {
-    const p = w("p-link-social"), e = c, t = f(), n = m(x), r = () => s(t, { ...e, theme: e.theme || n.value });
-    return l(r), i(r), d(n, (o) => {
-      s(t, { theme: e.theme || o });
-    }), (o, P) => (u(), h(_(C(p)), {
+    const s = w("p-link-social"), e = c, t = f(), n = l(x), r = () => a(t, { ...e, theme: e.theme || n.value });
+    return m(r), i(r), d(n, (o) => {
+      a(t, { theme: e.theme || o });
+    }), (o, B) => (u(), h(_(y(s)), {
       ref_key: "pdsComponentRef",
       ref: t
     }, {
-      default: k(() => [
-        y(o.$slots, "default")
+      default: C(() => [
+        k(o.$slots, "default")
       ]),
       _: 3
     }, 512));
   }
 });
 export {
-  b as default
+  S as default
 };

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

@@ -4,6 +4,10 @@ type PLinkProps = {
      * Add ARIA attributes.
      */
     aria?: SelectedAriaAttributes<LinkAriaAttribute>;
+    /**
+     * Displays as compact version.
+     */
+    compact?: boolean;
     /**
      * Special download attribute to open native browser download dialog if target url points to a downloadable file.
      */
@@ -45,16 +49,19 @@ declare function __VLS_template(): {
     default?(_: {}): any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<PLinkProps>, {
+    compact: boolean;
     hideLabel: boolean;
     icon: string;
     target: string;
     variant: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<PLinkProps>, {
+    compact: boolean;
     hideLabel: boolean;
     icon: string;
     target: string;
     variant: string;
 }>>>, {
+    compact: boolean;
     hideLabel: BreakpointCustomizable<boolean>;
     icon: LinkIcon;
     variant: LinkVariant;

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

@@ -1,9 +1,10 @@
-import { defineComponent as f, ref as c, inject as m, onMounted as l, onUpdated as i, watch as d, openBlock as u, createBlock as h, resolveDynamicComponent as _, unref as y, withCtx as C, renderSlot as k } from "vue";
+import { defineComponent as s, ref as c, inject as l, onMounted as m, onUpdated as d, watch as i, openBlock as u, createBlock as h, resolveDynamicComponent as _, unref as y, withCtx as C, renderSlot as k } from "vue";
 import { usePrefix as w, themeInjectionKey as v, syncProperties as a } from "../../utils.mjs";
-const b = /* @__PURE__ */ f({
+const R = /* @__PURE__ */ s({
   __name: "LinkWrapper",
   props: {
     aria: {},
+    compact: { type: Boolean, default: !1 },
     download: {},
     hideLabel: { default: !1 },
     href: {},
@@ -15,20 +16,20 @@ const b = /* @__PURE__ */ f({
     variant: { default: "primary" }
   },
   setup(p) {
-    const s = w("p-link"), e = p, t = c(), o = m(v), r = () => a(t, { ...e, theme: e.theme || o.value });
-    return l(r), i(r), d(o, (n) => {
-      a(t, { theme: e.theme || n });
-    }), (n, x) => (u(), h(_(y(s)), {
+    const f = w("p-link"), e = p, t = c(), n = l(v), r = () => a(t, { ...e, theme: e.theme || n.value });
+    return m(r), d(r), i(n, (o) => {
+      a(t, { theme: e.theme || o });
+    }), (o, x) => (u(), h(_(y(f)), {
       ref_key: "pdsComponentRef",
       ref: t
     }, {
       default: C(() => [
-        k(n.$slots, "default")
+        k(o.$slots, "default")
       ]),
       _: 3
     }, 512));
   }
 });
 export {
-  b as default
+  R as default
 };

package/esm/lib/types.d.ts

@@ -606,9 +606,10 @@ export type ButtonType = typeof BUTTON_TYPES[number];
 declare const LINK_BUTTON_VARIANTS: readonly [
     "primary",
     "secondary",
+    "ghost",
     "tertiary"
 ];
-export type LinkButtonVariant = typeof LINK_BUTTON_VARIANTS[number];
+export type LinkButtonVariant = (typeof LINK_BUTTON_VARIANTS)[number];
 export type LinkButtonIconName = IconName | "none";
 export type ButtonVariant = LinkButtonVariant;
 export type LinkVariant = LinkButtonVariant;

package/package.json

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