@porsche-design-system/components-vue 3.15.1 → 3.16.0-rc.0

package/CHANGELOG.md

@@ -14,6 +14,47 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### [Unreleased]
 
+### [3.16.0-rc.0] - 2024-06-05
+
+#### Added
+
+- `Flyout`:
+  - CSS variable `--p-flyout-sticky-top` (experimental)
+    ([#3191](https://github.com/porsche-design-system/porsche-design-system/pull/3191))
+  - Prop `disableBackdropClick` ([#3191](https://github.com/porsche-design-system/porsche-design-system/pull/3191))
+- `Modal`:
+  - CSS variable `--p-modal-width` (experimental)
+    ([#3191](https://github.com/porsche-design-system/porsche-design-system/pull/3191))
+  - Named slot `header` ([#3191](https://github.com/porsche-design-system/porsche-design-system/pull/3191))
+
+#### Changed
+
+- `Modal`, `Flyout`:
+  - Sticky dismiss button ([#3191](https://github.com/porsche-design-system/porsche-design-system/pull/3191))
+  - Aligned layout, spacing and UX behaviour
+    ([#3191](https://github.com/porsche-design-system/porsche-design-system/pull/3191))
+  - Renders fully on `#top-layer`, stacking behaviour has changed and follows W3C standards now, see
+    https://developer.mozilla.org/en-US/docs/Glossary/Top_layer and
+    https://developer.chrome.com/blog/what-is-the-top-layer
+    ([#3191](https://github.com/porsche-design-system/porsche-design-system/pull/3191))
+- `Modal`: `heading` prop and `slot="heading"` are deprecated. Use `slot="header"` instead.
+
+#### Fixed
+
+- Types: Fixed incorrectly allowed type `string` in types `BreakpointCustomizable`, `SelectedAriaAttributes`,
+  `CarouselInternationalization`, `PaginationInternationalization` and `ScrollToPosition`
+- `Modal`, `Flyout`: Dynamically react to adding/removing named slots
+  ([#3191](https://github.com/porsche-design-system/porsche-design-system/pull/3191))
+- `Modal`: Uses native `<dialog />` element to resolve focus issues, focus trap
+  ([#3191](https://github.com/porsche-design-system/porsche-design-system/pull/3191))
+
+### [3.15.2] - 2024-05-29
+
+#### Fixed
+
+- `aria`: Refactor `parseJSONAttribute` to support Safari < 16.4  
+  ([#3314](https://github.com/porsche-design-system/porsche-design-system/pull/3314))
+
 ### [3.15.1] - 2024-05-23
 
 #### Fixed

package/cjs/lib/components/FlyoutWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),t=require("../../utils.cjs"),u=e.defineComponent({__name:"FlyoutWrapper",props:{aria:{},open:{type:Boolean,default:!1},position:{default:"end"},theme:{}},emits:["dismiss"],setup(p,{emit:c}){const m=t.usePrefix("p-flyout"),o=p,n=e.ref(),a=c,r=e.inject(t.themeInjectionKey),i=()=>t.syncProperties(n,{...o,theme:o.theme||r.value});return e.onMounted(()=>{i(),t.addEventListenerToElementRef(n,"dismiss",a)}),e.onUpdated(i),e.watch(r,s=>{t.syncProperties(n,{theme:o.theme||s})}),(s,f)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(m)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default")]),_:3},512))}});module.exports=u;
+"use strict";const e=require("vue"),t=require("../../utils.cjs"),m=e.defineComponent({__name:"FlyoutWrapper",props:{aria:{},disableBackdropClick:{type:Boolean,default:!1},open:{type:Boolean,default:!1},position:{default:"end"},theme:{}},emits:["dismiss"],setup(p,{emit:c}){const a=t.usePrefix("p-flyout"),n=p,o=e.ref(),l=c,r=e.inject(t.themeInjectionKey),i=()=>t.syncProperties(o,{...n,theme:n.theme||r.value});return e.onMounted(()=>{i(),t.addEventListenerToElementRef(o,"dismiss",l)}),e.onUpdated(i),e.watch(r,s=>{t.syncProperties(o,{theme:n.theme||s})}),(s,d)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(a)),{ref_key:"pdsComponentRef",ref:o},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default")]),_:3},512))}});module.exports=m;

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

@@ -1,31 +1,32 @@
-import { defineComponent as f, ref as c, inject as d, onMounted as l, onUpdated as u, watch as h, openBlock as y, createBlock as _, resolveDynamicComponent as C, unref as R, withCtx as k, renderSlot as v } from "vue";
-import { usePrefix as w, themeInjectionKey as x, addEventListenerToElementRef as B, syncProperties as r } from "../../utils.mjs";
-const T = /* @__PURE__ */ f({
+import { defineComponent as f, ref as c, inject as l, onMounted as d, onUpdated as u, watch as h, openBlock as y, createBlock as C, resolveDynamicComponent as _, unref as k, withCtx as B, renderSlot as R } from "vue";
+import { usePrefix as v, themeInjectionKey as w, addEventListenerToElementRef as x, syncProperties as r } from "../../utils.mjs";
+const E = /* @__PURE__ */ f({
   __name: "FlyoutWrapper",
   props: {
     aria: {},
+    disableBackdropClick: { type: Boolean, default: !1 },
     open: { type: Boolean, default: !1 },
     position: { default: "end" },
     theme: {}
   },
   emits: ["dismiss"],
-  setup(m, { emit: p }) {
-    const a = w("p-flyout"), t = m, e = c(), i = p, n = d(x), s = () => r(e, { ...t, theme: t.theme || n.value });
-    return l(() => {
-      s(), B(e, "dismiss", i);
+  setup(p, { emit: a }) {
+    const m = v("p-flyout"), t = p, e = c(), i = a, n = l(w), s = () => r(e, { ...t, theme: t.theme || n.value });
+    return d(() => {
+      s(), x(e, "dismiss", i);
     }), u(s), h(n, (o) => {
       r(e, { theme: t.theme || o });
-    }), (o, P) => (y(), _(C(R(a)), {
+    }), (o, P) => (y(), C(_(k(m)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
-      default: k(() => [
-        v(o.$slots, "default")
+      default: B(() => [
+        R(o.$slots, "default")
       ]),
       _: 3
     }, 512));
   }
 });
 export {
-  T as default
+  E as default
 };

package/package.json

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