@porsche-design-system/components-vue 3.15.0-rc.1 → 3.15.0-rc.2

package/CHANGELOG.md

@@ -14,12 +14,36 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### [Unreleased]
 
+### [3.15.0-rc.2] - 2024-04-22
+
+#### Added
+
+- `Accordion`: Add experimental property `sticky` for a fixed heading
+  ([#3181](https://github.com/porsche-design-system/porsche-design-system/pull/3181))
+- `Inline Notification`, `Banner`: heading hierarchy can now be customized with `headingTag` prop
+  ([#3168](https://github.com/porsche-design-system/porsche-design-system/pull/3168))
+
+#### Changed
+
+- `Accordion`: `tag` property is deprecated. Use `headingTag` property instead to specify heading hierarchy level.
+  ([#3168](https://github.com/porsche-design-system/porsche-design-system/pull/3168))
+
+```diff
+- <p-accordion tag="h3"></p-accordion>
++ <p-accordion heading-tag="h3"></p-accordion>
+```
+
+#### Fixed
+
+- `Pin Code`: Input is entered twice in iOS
+  ([#3192](https://github.com/porsche-design-system/porsche-design-system/pull/3192))
+
 ### [3.15.0-rc.1] - 2024-04-17
 
-#### Added 
+#### Added
 
-- Partials: `getMetaTagsAndIconLinks`, `getComponentChunkLinks`, `getIconLinks` and `getFontLinks` support new format option `js`
-  ([#3179](https://github.com/porsche-design-system/porsche-design-system/pull/3179))
+- Partials: `getMetaTagsAndIconLinks`, `getComponentChunkLinks`, `getIconLinks` and `getFontLinks` support new format
+  option `js` ([#3179](https://github.com/porsche-design-system/porsche-design-system/pull/3179))
 
 ### [3.15.0-rc.0] - 2024-04-05
 

package/cjs/lib/components/AccordionWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),t=require("../../utils.cjs"),m=e.defineComponent({__name:"AccordionWrapper",props:{compact:{type:Boolean},heading:{},open:{type:Boolean},size:{default:"small"},tag:{default:"h2"},theme:{}},emits:["accordionChange","update"],setup(p,{emit:i}){const d=t.usePrefix("p-accordion"),o=p,n=e.ref(),s=i,c=e.inject(t.themeInjectionKey),a=()=>t.syncProperties(n,{...o,theme:o.theme||c.value});return e.onMounted(()=>{a(),t.addEventListenerToElementRef(n,"accordionChange",s),t.addEventListenerToElementRef(n,"update",s)}),e.onUpdated(a),e.watch(c,r=>{t.syncProperties(n,{theme:o.theme||r})}),(r,u)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(d)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"default")]),_:3},512))}});module.exports=m;
+"use strict";const e=require("vue"),t=require("../../utils.cjs"),m=e.defineComponent({__name:"AccordionWrapper",props:{compact:{type:Boolean},heading:{},headingTag:{default:"h2"},open:{type:Boolean},size:{default:"small"},sticky:{type:Boolean},tag:{},theme:{}},emits:["accordionChange","update"],setup(p,{emit:i}){const d=t.usePrefix("p-accordion"),o=p,n=e.ref(),c=i,r=e.inject(t.themeInjectionKey),a=()=>t.syncProperties(n,{...o,theme:o.theme||r.value});return e.onMounted(()=>{a(),t.addEventListenerToElementRef(n,"accordionChange",c),t.addEventListenerToElementRef(n,"update",c)}),e.onUpdated(a),e.watch(r,s=>{t.syncProperties(n,{theme:o.theme||s})}),(s,l)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(d)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default")]),_:3},512))}});module.exports=m;

package/cjs/lib/components/BannerWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),t=require("../../utils.cjs"),m=e.defineComponent({__name:"BannerWrapper",props:{description:{default:""},dismissButton:{type:Boolean,default:!0},heading:{default:""},open:{type:Boolean,default:!1},persistent:{type:Boolean},state:{default:"info"},theme:{},width:{}},emits:["dismiss"],setup(p,{emit:a}){const c=t.usePrefix("p-banner"),o=p,n=e.ref(),d=a,r=e.inject(t.themeInjectionKey),i=()=>t.syncProperties(n,{...o,theme:o.theme||r.value});return e.onMounted(()=>{i(),t.addEventListenerToElementRef(n,"dismiss",d)}),e.onUpdated(i),e.watch(r,s=>{t.syncProperties(n,{theme:o.theme||s})}),(s,u)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(c)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default")]),_:3},512))}});module.exports=m;
+"use strict";const e=require("vue"),t=require("../../utils.cjs"),m=e.defineComponent({__name:"BannerWrapper",props:{description:{default:""},dismissButton:{type:Boolean,default:!0},heading:{default:""},headingTag:{default:"h5"},open:{type:Boolean,default:!1},persistent:{type:Boolean},state:{default:"info"},theme:{},width:{}},emits:["dismiss"],setup(a,{emit:p}){const c=t.usePrefix("p-banner"),o=a,n=e.ref(),d=p,r=e.inject(t.themeInjectionKey),i=()=>t.syncProperties(n,{...o,theme:o.theme||r.value});return e.onMounted(()=>{i(),t.addEventListenerToElementRef(n,"dismiss",d)}),e.onUpdated(i),e.watch(r,s=>{t.syncProperties(n,{theme:o.theme||s})}),(s,u)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(c)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default")]),_:3},512))}});module.exports=m;

package/cjs/lib/components/InlineNotificationWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),t=require("../../utils.cjs"),f=e.defineComponent({__name:"InlineNotificationWrapper",props:{actionIcon:{default:"arrow-right"},actionLabel:{},actionLoading:{type:Boolean,default:!1},description:{default:""},dismissButton:{type:Boolean,default:!0},heading:{default:""},persistent:{type:Boolean},state:{default:"info"},theme:{}},emits:["action","dismiss"],setup(c,{emit:p}){const d=t.usePrefix("p-inline-notification"),o=c,n=e.ref(),i=p,a=e.inject(t.themeInjectionKey),r=()=>t.syncProperties(n,{...o,theme:o.theme||a.value});return e.onMounted(()=>{r(),t.addEventListenerToElementRef(n,"action",i),t.addEventListenerToElementRef(n,"dismiss",i)}),e.onUpdated(r),e.watch(a,s=>{t.syncProperties(n,{theme:o.theme||s})}),(s,l)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(d)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default")]),_:3},512))}});module.exports=f;
+"use strict";const e=require("vue"),t=require("../../utils.cjs"),f=e.defineComponent({__name:"InlineNotificationWrapper",props:{actionIcon:{default:"arrow-right"},actionLabel:{},actionLoading:{type:Boolean,default:!1},description:{default:""},dismissButton:{type:Boolean,default:!0},heading:{default:""},headingTag:{default:"h5"},persistent:{type:Boolean},state:{default:"info"},theme:{}},emits:["action","dismiss"],setup(c,{emit:d}){const p=t.usePrefix("p-inline-notification"),o=c,n=e.ref(),s=d,a=e.inject(t.themeInjectionKey),r=()=>t.syncProperties(n,{...o,theme:o.theme||a.value});return e.onMounted(()=>{r(),t.addEventListenerToElementRef(n,"action",s),t.addEventListenerToElementRef(n,"dismiss",s)}),e.onUpdated(r),e.watch(a,i=>{t.syncProperties(n,{theme:o.theme||i})}),(i,l)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(p)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(i.$slots,"default")]),_:3},512))}});module.exports=f;

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

@@ -1,33 +1,35 @@
-import { defineComponent as i, ref as f, inject as l, onMounted as h, onUpdated as u, watch as C, openBlock as y, createBlock as _, resolveDynamicComponent as g, unref as B, withCtx as R, renderSlot as k } from "vue";
-import { usePrefix as v, themeInjectionKey as w, addEventListenerToElementRef as c, syncProperties as p } from "../../utils.mjs";
-const E = /* @__PURE__ */ i({
+import { defineComponent as i, ref as f, inject as l, onMounted as h, onUpdated as u, watch as y, openBlock as C, createBlock as g, resolveDynamicComponent as _, unref as B, withCtx as k, renderSlot as R } from "vue";
+import { usePrefix as v, themeInjectionKey as w, addEventListenerToElementRef as r, syncProperties as p } from "../../utils.mjs";
+const j = /* @__PURE__ */ i({
   __name: "AccordionWrapper",
   props: {
     compact: { type: Boolean },
     heading: {},
+    headingTag: { default: "h2" },
     open: { type: Boolean },
     size: { default: "small" },
-    tag: { default: "h2" },
+    sticky: { type: Boolean },
+    tag: {},
     theme: {}
   },
   emits: ["accordionChange", "update"],
   setup(s, { emit: m }) {
-    const d = v("p-accordion"), t = s, e = f(), n = m, a = l(w), r = () => p(e, { ...t, theme: t.theme || a.value });
+    const d = v("p-accordion"), t = s, e = f(), n = m, a = l(w), c = () => p(e, { ...t, theme: t.theme || a.value });
     return h(() => {
-      r(), c(e, "accordionChange", n), c(e, "update", n);
-    }), u(r), C(a, (o) => {
+      c(), r(e, "accordionChange", n), r(e, "update", n);
+    }), u(c), y(a, (o) => {
       p(e, { theme: t.theme || o });
-    }), (o, x) => (y(), _(g(B(d)), {
+    }), (o, x) => (C(), g(_(B(d)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
-      default: R(() => [
-        k(o.$slots, "default")
+      default: k(() => [
+        R(o.$slots, "default")
       ]),
       _: 3
     }, 512));
   }
 });
 export {
-  E as default
+  j as default
 };

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

@@ -1,11 +1,12 @@
-import { defineComponent as d, ref as f, inject as c, onMounted as l, onUpdated as u, watch as h, openBlock as y, createBlock as B, resolveDynamicComponent as _, unref as C, withCtx as w, renderSlot as R } from "vue";
-import { usePrefix as k, themeInjectionKey as v, addEventListenerToElementRef as x, syncProperties as r } from "../../utils.mjs";
-const j = /* @__PURE__ */ d({
+import { defineComponent as d, ref as f, inject as c, onMounted as l, onUpdated as u, watch as h, openBlock as y, createBlock as B, resolveDynamicComponent as _, unref as C, withCtx as g, renderSlot as w } from "vue";
+import { usePrefix as R, themeInjectionKey as k, addEventListenerToElementRef as v, syncProperties as a } from "../../utils.mjs";
+const b = /* @__PURE__ */ d({
   __name: "BannerWrapper",
   props: {
     description: { default: "" },
     dismissButton: { type: Boolean, default: !0 },
     heading: { default: "" },
+    headingTag: { default: "h5" },
     open: { type: Boolean, default: !1 },
     persistent: { type: Boolean },
     state: { default: "info" },
@@ -13,23 +14,23 @@ const j = /* @__PURE__ */ d({
     width: {}
   },
   emits: ["dismiss"],
-  setup(a, { emit: p }) {
-    const i = k("p-banner"), t = a, e = f(), m = p, o = c(v), s = () => r(e, { ...t, theme: t.theme || o.value });
+  setup(r, { emit: p }) {
+    const i = R("p-banner"), t = r, e = f(), m = p, o = c(k), s = () => a(e, { ...t, theme: t.theme || o.value });
     return l(() => {
-      s(), x(e, "dismiss", m);
+      s(), v(e, "dismiss", m);
     }), u(s), h(o, (n) => {
-      r(e, { theme: t.theme || n });
-    }), (n, P) => (y(), B(_(C(i)), {
+      a(e, { theme: t.theme || n });
+    }), (n, x) => (y(), B(_(C(i)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
-      default: w(() => [
-        R(n.$slots, "default")
+      default: g(() => [
+        w(n.$slots, "default")
       ]),
       _: 3
     }, 512));
   }
 });
 export {
-  j as default
+  b as default
 };

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

@@ -1,6 +1,6 @@
-import { defineComponent as m, ref as d, inject as l, onMounted as u, onUpdated as h, watch as y, openBlock as _, createBlock as B, resolveDynamicComponent as C, unref as g, withCtx as w, renderSlot as R } from "vue";
-import { usePrefix as k, themeInjectionKey as v, addEventListenerToElementRef as a, syncProperties as r } from "../../utils.mjs";
-const P = /* @__PURE__ */ m({
+import { defineComponent as d, ref as m, inject as l, onMounted as u, onUpdated as h, watch as y, openBlock as _, createBlock as g, resolveDynamicComponent as B, unref as C, withCtx as w, renderSlot as R } from "vue";
+import { usePrefix as k, themeInjectionKey as v, addEventListenerToElementRef as s, syncProperties as r } from "../../utils.mjs";
+const P = /* @__PURE__ */ d({
   __name: "InlineNotificationWrapper",
   props: {
     actionIcon: { default: "arrow-right" },
@@ -9,18 +9,19 @@ const P = /* @__PURE__ */ m({
     description: { default: "" },
     dismissButton: { type: Boolean, default: !0 },
     heading: { default: "" },
+    headingTag: { default: "h5" },
     persistent: { type: Boolean },
     state: { default: "info" },
     theme: {}
   },
   emits: ["action", "dismiss"],
-  setup(c, { emit: p }) {
-    const f = k("p-inline-notification"), t = c, e = d(), o = p, i = l(v), s = () => r(e, { ...t, theme: t.theme || i.value });
+  setup(c, { emit: f }) {
+    const p = k("p-inline-notification"), t = c, e = m(), o = f, i = l(v), a = () => r(e, { ...t, theme: t.theme || i.value });
     return u(() => {
-      s(), a(e, "action", o), a(e, "dismiss", o);
-    }), h(s), y(i, (n) => {
+      a(), s(e, "action", o), s(e, "dismiss", o);
+    }), h(a), y(i, (n) => {
       r(e, { theme: t.theme || n });
-    }), (n, x) => (_(), B(C(g(f)), {
+    }), (n, x) => (_(), g(B(C(p)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {

package/package.json

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