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

package/CHANGELOG.md

@@ -14,12 +14,20 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### [Unreleased]
 
+### [3.19.0-rc.1] - 2024-09-06
+
+#### Changed
+
+- `Canvas`: Improve UX ([#3494](https://github.com/porsche-design-system/porsche-design-system/pull/3494))
+
 ### [3.19.0-rc.0] - 2024-09-03
 
 #### Added
 
 - `componentsReady()`: Introduce optional `readyState` parameter
   ([#3460](https://github.com/porsche-design-system/porsche-design-system/pull/3460))
+- `Carousel`: introduce `focusOnCenterSlide` & `gradientColor` props
+  ([#3488](https://github.com/porsche-design-system/porsche-design-system/pull/3488))
 
 #### Changed
 

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

@@ -1 +1 @@
-"use strict";const e=require("vue"),s=require("../../utils.cjs"),m=e.defineComponent({__name:"CanvasWrapper",props:{sidebarEndOpen:{type:Boolean,default:!1},sidebarEndWidth:{default:"medium"},sidebarStartOpen:{type:Boolean,default:!1},sidebarStartWidth:{default:"medium"}},emits:["dismissSidebarEnd","dismissSidebarStart"],setup(o,{emit:d}){const a=s.usePrefix("p-canvas"),i=o,t=e.ref(),n=d,r=()=>s.syncProperties(t,i);return e.onMounted(()=>{r(),s.addEventListenerToElementRef(t,"dismissSidebarEnd",n),s.addEventListenerToElementRef(t,"dismissSidebarStart",n)}),e.onUpdated(r),(p,c)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(a)),{ref_key:"pdsComponentRef",ref:t},{default:e.withCtx(()=>[e.renderSlot(p.$slots,"default")]),_:3},512))}});module.exports=m;
+"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;

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

@@ -1,32 +1,44 @@
-import type { CanvasSidebarEndWidth, CanvasSidebarStartWidth } from '../types';
+import type { CanvasSidebarEndIcon, CanvasSidebarStartIcon, 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;
     /**
-     * Defines the width of the sidebar on the end side
+     * The icon to toggle the Sidebar on the start side
      */
-    sidebarEndWidth?: CanvasSidebarEndWidth;
+    sidebarStartIcon?: CanvasSidebarStartIcon;
     /**
      * Open Sidebar on the start side
      */
     sidebarStartOpen?: boolean;
     /**
-     * Defines the width of the sidebar on the start side
+     * Adapts the color depending on the theme. Has no effect when "inherit" is set as color prop.
      */
-    sidebarStartWidth?: CanvasSidebarStartWidth;
+    theme?: Theme;
 };
 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;
-    sidebarEndWidth: string;
+    sidebarStartIcon: string;
     sidebarStartOpen: boolean;
-    sidebarStartWidth: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
+}>>>, {
+    sidebarEndIcon: CanvasSidebarEndIcon;
     sidebarEndOpen: boolean;
-    sidebarEndWidth: CanvasSidebarEndWidth;
+    sidebarStartIcon: CanvasSidebarStartIcon;
     sidebarStartOpen: boolean;
-    sidebarStartWidth: CanvasSidebarStartWidth;
 }, {}>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;

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

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

package/esm/lib/types.d.ts

@@ -684,13 +684,8 @@ export type ButtonTileSize = TileSize;
 export type ButtonTileBackground = TileBackground;
 export type ButtonTileWeight = TileWeight;
 export type ButtonTileAlign = TileAlign;
-declare const CANVAS_SIDEBAR_WIDTHS: readonly [
-    "medium",
-    "large"
-];
-export type CanvasSidebarWidth = (typeof CANVAS_SIDEBAR_WIDTHS)[number];
-export type CanvasSidebarStartWidth = CanvasSidebarWidth;
-export type CanvasSidebarEndWidth = CanvasSidebarWidth;
+export type CanvasSidebarStartIcon = IconName;
+export type CanvasSidebarEndIcon = IconName;
 declare const CAROUSEL_WIDTHS: readonly [
     "basic",
     "extended"

package/package.json

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