@porsche-design-system/components-vue 3.19.0 → 3.20.0-rc.1

package/CHANGELOG.md

@@ -14,6 +14,39 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### [Unreleased]
 
+### [3.20.0-rc.1] - 2024-10-24
+
+#### Added
+
+- React: better tree-shaking for `@porsche-design-system/components-react`
+  ([#3554](https://github.com/porsche-design-system/porsche-design-system/pull/3554))
+- `Icon`: `sidebar`
+  ([#3556](https://github.com/porsche-design-system/porsche-design-system/pull/3556))
+
+#### Changed
+
+- `Canvas`: Improve UI and UX behaviour in Safari
+  ([#3556](https://github.com/porsche-design-system/porsche-design-system/pull/3556))
+
+#### Fixed
+
+- `Flyout`: transition animation in Chrome Browser if `Flyout` has scrollable content
+  ([#3550](https://github.com/porsche-design-system/porsche-design-system/pull/3550))
+
+### [3.20.0-rc.0] - 2024-10-18
+
+#### Added
+
+- `Icon`: `attachment`, `dislike`, `dislike-filled`, `like`, `like-filled`, `new-chat`
+  ([#3515](https://github.com/porsche-design-system/porsche-design-system/pull/3515))
+
+#### Changed
+
+- `Canvas`: Improve UI and UX behaviour
+  ([#3515](https://github.com/porsche-design-system/porsche-design-system/pull/3515))
+- `Flyout`, `Modal`: Removed default styling for slotted anchors
+  ([#3515](https://github.com/porsche-design-system/porsche-design-system/pull/3515))
+
 ### [3.19.0] - 2024-10-14
 
 ### [3.19.0-rc.4] - 2024-10-14

package/cjs/lib/components/CanvasWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),t=require("../../utils.cjs"),u=e.defineComponent({__name:"CanvasWrapper",props:{sidebarEndIcon:{default:"configurate"},sidebarEndOpen:{type:Boolean,default:!1},sidebarStartIcon:{default:"menu-lines"},sidebarStartOpen:{type:Boolean,default:!1},theme:{}},setup(c){const p=t.usePrefix("p-canvas"),n=c,o=e.ref(),r=e.inject(t.themeInjectionKey),a=()=>t.syncProperties(o,{...n,theme:n.theme||r.value});return e.onMounted(a),e.onUpdated(a),e.watch(r,s=>{t.syncProperties(o,{theme:n.theme||s})}),(s,d)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(p)),{ref_key:"pdsComponentRef",ref:o},{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:"CanvasWrapper",props:{sidebarEndOpen:{type:Boolean,default:!1},sidebarStartOpen:{type:Boolean,default:!1},theme:{}},emits:["sidebarEndDismiss","sidebarStartUpdate"],setup(p,{emit:d}){const c=t.usePrefix("p-canvas"),s=p,n=e.ref(),r=d,a=e.inject(t.themeInjectionKey),i=()=>t.syncProperties(n,{...s,theme:s.theme||a.value});return e.onMounted(()=>{i(),t.addEventListenerToElementRef(n,"sidebarEndDismiss",r),t.addEventListenerToElementRef(n,"sidebarStartUpdate",r)}),e.onUpdated(i),e.watch(a,o=>{t.syncProperties(n,{theme:s.theme||o})}),(o,f)=>(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=m;

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

@@ -1,23 +1,12 @@
-import type { CanvasSidebarEndIcon, CanvasSidebarStartIcon, Theme } from '../types';
+import type { Theme } from '../types';
 type PCanvasProps = {
-    /**
-     * The icon to toggle the Sidebar on the end side
-     */
-    sidebarEndIcon?: CanvasSidebarEndIcon;
-    /**
-     * Open Sidebar on the end side
-     */
     sidebarEndOpen?: boolean;
     /**
-     * The icon to toggle the Sidebar on the start side
-     */
-    sidebarStartIcon?: CanvasSidebarStartIcon;
-    /**
-     * Open Sidebar on the start side
+     * Open the sidebar on the start side
      */
     sidebarStartOpen?: boolean;
     /**
-     * Adapts the color depending on the theme. Has no effect when "inherit" is set as color prop.
+     * Adapts the color depending on the theme.
      */
     theme?: Theme;
 };
@@ -25,19 +14,10 @@ declare function __VLS_template(): {
     default?(_: {}): any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<PCanvasProps>, {
-    sidebarEndIcon: string;
-    sidebarEndOpen: boolean;
-    sidebarStartIcon: string;
-    sidebarStartOpen: boolean;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<PCanvasProps>, {
-    sidebarEndIcon: string;
     sidebarEndOpen: boolean;
-    sidebarStartIcon: string;
     sidebarStartOpen: boolean;
-}>>>, {
-    sidebarEndIcon: CanvasSidebarEndIcon;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
     sidebarEndOpen: boolean;
-    sidebarStartIcon: CanvasSidebarStartIcon;
     sidebarStartOpen: boolean;
 }, {}>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;

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

@@ -1,29 +1,30 @@
-import { defineComponent as c, ref as f, inject as d, onMounted as m, onUpdated as l, watch as i, openBlock as u, createBlock as h, resolveDynamicComponent as y, unref as C, withCtx as _, renderSlot as b } from "vue";
-import { usePrefix as v, themeInjectionKey as B, syncProperties as r } from "../../utils.mjs";
-const I = /* @__PURE__ */ c({
+import { defineComponent as c, ref as f, inject as l, onMounted as u, onUpdated as h, watch as b, openBlock as y, createBlock as C, resolveDynamicComponent as _, unref as v, withCtx as E, renderSlot as B } from "vue";
+import { usePrefix as R, themeInjectionKey as S, addEventListenerToElementRef as r, syncProperties as p } from "../../utils.mjs";
+const D = /* @__PURE__ */ c({
   __name: "CanvasWrapper",
   props: {
-    sidebarEndIcon: { default: "configurate" },
     sidebarEndOpen: { type: Boolean, default: !1 },
-    sidebarStartIcon: { default: "menu-lines" },
     sidebarStartOpen: { type: Boolean, default: !1 },
     theme: {}
   },
-  setup(s) {
-    const p = v("p-canvas"), e = s, t = f(), o = d(B), a = () => r(t, { ...e, theme: e.theme || o.value });
-    return m(a), l(a), i(o, (n) => {
-      r(t, { theme: e.theme || n });
-    }), (n, k) => (u(), h(y(C(p)), {
+  emits: ["sidebarEndDismiss", "sidebarStartUpdate"],
+  setup(d, { emit: m }) {
+    const i = R("p-canvas"), t = d, e = f(), o = m, s = l(S), a = () => p(e, { ...t, theme: t.theme || s.value });
+    return u(() => {
+      a(), r(e, "sidebarEndDismiss", o), r(e, "sidebarStartUpdate", o);
+    }), h(a), b(s, (n) => {
+      p(e, { theme: t.theme || n });
+    }), (n, k) => (y(), C(_(v(i)), {
       ref_key: "pdsComponentRef",
-      ref: t
+      ref: e
     }, {
-      default: _(() => [
-        b(n.$slots, "default")
+      default: E(() => [
+        B(n.$slots, "default")
       ]),
       _: 3
     }, 512));
   }
 });
 export {
-  I as default
+  D as default
 };

package/esm/lib/types.d.ts

@@ -233,6 +233,7 @@ declare const ICON_NAMES: readonly [
     "arrow-left",
     "arrow-right",
     "arrow-up",
+    "attachment",
     "augmented-reality",
     "battery-empty",
     "battery-empty-co2",
@@ -269,6 +270,8 @@ declare const ICON_NAMES: readonly [
     "cubic-capacity",
     "delete",
     "disable",
+    "dislike",
+    "dislike-filled",
     "document",
     "download",
     "duration",
@@ -298,6 +301,8 @@ declare const ICON_NAMES: readonly [
     "leaf",
     "leather",
     "light",
+    "like",
+    "like-filled",
     "list",
     "locate",
     "lock",
@@ -346,6 +351,7 @@ declare const ICON_NAMES: readonly [
     "minus",
     "mobile",
     "moon",
+    "new-chat",
     "oil-can",
     "parking-brake",
     "parking-light",
@@ -380,6 +386,7 @@ declare const ICON_NAMES: readonly [
     "shopping-bag-filled",
     "shopping-cart",
     "shopping-cart-filled",
+    "sidebar",
     "sidelights",
     "snowflake",
     "sort",
@@ -685,8 +692,9 @@ export type ButtonTileSize = TileSize;
 export type ButtonTileBackground = TileBackground;
 export type ButtonTileWeight = TileWeight;
 export type ButtonTileAlign = TileAlign;
-export type CanvasSidebarStartIcon = IconName;
-export type CanvasSidebarEndIcon = IconName;
+export type CanvasSidebarStartUpdateEventDetail = {
+    open: boolean;
+};
 declare const CAROUSEL_WIDTHS: readonly [
     "basic",
     "extended"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-vue",
-  "version": "3.19.0",
+  "version": "3.20.0-rc.1",
   "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.19.0"
+    "@porsche-design-system/components-js": "3.20.0-rc.1"
   },
   "peerDependencies": {
     "ag-grid-enterprise": ">= 32.0.0 <33.0.0",