@porsche-design-system/components-vue 3.12.0 → 3.13.0-rc.0

package/CHANGELOG.md

@@ -14,14 +14,27 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### [Unreleased]
 
+### [3.13.0-rc.0] - 2024-02-19
+
+#### Added
+
+- `Link Tile Product`: Prop `price-original` to be able to visualize sale and original price
+  ([#3040](https://github.com/porsche-design-system/porsche-design-system/pull/3040))
+
+#### Changed
+
+- Validation of `getInitialStyles()` partial is temporarily disabled
+  ([#3049](https://github.com/porsche-design-system/porsche-design-system/pull/3049))
+
 ### [3.12.0] - 2024-02-12
 
 ### [3.12.0-rc.1] - 2024-02-08
 
 #### Fixed
 
-- `Checkbox Wrapper`, `Radio Button Wrapper`: Safari visually reflects input status (checked/unchecked) when 
-  used in another Shadow DOM or changed programmatically ([#3028](https://github.com/porsche-design-system/porsche-design-system/pull/3028))
+- `Checkbox Wrapper`, `Radio Button Wrapper`: Safari visually reflects input status (checked/unchecked) when used in
+  another Shadow DOM or changed programmatically
+  ([#3028](https://github.com/porsche-design-system/porsche-design-system/pull/3028))
 
 ### [3.12.0-rc.0] - 2024-02-05
 
@@ -33,8 +46,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 #### Changed
 
 - `Icon`: Visual appearance of `information-filled`, `information`, `success-filled`, `success`, `bookmark`, `compare`,
-  `configurate`, `heart-filled`, `heart`, `menu-lines`, `success`, `search`, `locate`, `star`, `shopping-bag-filled`, 
-  `shopping-bag`, `user-filled` and `user` ([#3025](https://github.com/porsche-design-system/porsche-design-system/pull/3025))
+  `configurate`, `heart-filled`, `heart`, `menu-lines`, `success`, `search`, `locate`, `star`, `shopping-bag-filled`,
+  `shopping-bag`, `user-filled` and `user`
+  ([#3025](https://github.com/porsche-design-system/porsche-design-system/pull/3025))
 - All components (expect some form elements) have improved focus styling based on `:focus-visible`
   ([#3011](https://github.com/porsche-design-system/porsche-design-system/pull/3011))
 - Several components are using CSS property `inset|inset-inline|inset-block` instead of `top|bottom|left|right` for

package/cjs/lib/components/LinkTileProductWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),t=require("../../utils.cjs"),u=e.defineComponent({__name:"LinkTileProductWrapper",props:{aspectRatio:{default:"3:4"},description:{},heading:{},href:{},likeButton:{type:Boolean,default:!0},liked:{type:Boolean,default:!1},price:{},rel:{},target:{default:"_self"},theme:{}},emits:["like"],setup(c,{emit:p}){const l=t.usePrefix("p-link-tile-product"),o=c,n=e.ref(),a=p,s=e.inject(t.themeInjectionKey),i=()=>t.syncProperties(n,{...o,theme:o.theme||s.value});return e.onMounted(()=>{i(),t.addEventListenerToElementRef(n,"like",a)}),e.onUpdated(i),e.watch(s,r=>{t.syncProperties(n,{theme:o.theme||r})}),(r,d)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(l)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"default")]),_:3},512))}});module.exports=u;
+"use strict";const e=require("vue"),t=require("../../utils.cjs"),u=e.defineComponent({__name:"LinkTileProductWrapper",props:{aspectRatio:{default:"3:4"},description:{},heading:{},href:{},likeButton:{type:Boolean,default:!0},liked:{type:Boolean,default:!1},price:{},priceOriginal:{},rel:{},target:{default:"_self"},theme:{}},emits:["like"],setup(c,{emit:p}){const l=t.usePrefix("p-link-tile-product"),o=c,n=e.ref(),a=p,s=e.inject(t.themeInjectionKey),i=()=>t.syncProperties(n,{...o,theme:o.theme||s.value});return e.onMounted(()=>{i(),t.addEventListenerToElementRef(n,"like",a)}),e.onUpdated(i),e.watch(s,r=>{t.syncProperties(n,{theme:o.theme||r})}),(r,d)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(l)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"default")]),_:3},512))}});module.exports=u;

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

@@ -5,11 +5,11 @@ type PLinkTileProductProps = {
      */
     aspectRatio?: BreakpointCustomizable<LinkTileProductAspectRatio>;
     /**
-     * Additional product description
+     * Additional product description.
      */
     description?: string;
     /**
-     * Product heading
+     * Product heading.
      */
     heading: string;
     /**
@@ -25,9 +25,13 @@ type PLinkTileProductProps = {
      */
     liked?: boolean;
     /**
-     * Product price
+     * Product retail price (with or without discount).
      */
     price: string;
+    /**
+     * Shows original price (recommended retail price) with line-through. Needs prop "price" to be defined, otherwise this prop has no effect.
+     */
+    priceOriginal?: string;
     /**
      * Specifies the relationship of the target object to the link object.
      */

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

@@ -1,5 +1,5 @@
 import { defineComponent as c, ref as f, inject as m, onMounted as d, onUpdated as u, watch as h, openBlock as k, createBlock as _, resolveDynamicComponent as y, unref as C, withCtx as B, renderSlot as R } from "vue";
-import { usePrefix as P, themeInjectionKey as g, addEventListenerToElementRef as v, syncProperties as p } from "../../utils.mjs";
+import { usePrefix as g, themeInjectionKey as P, addEventListenerToElementRef as v, syncProperties as i } from "../../utils.mjs";
 const j = /* @__PURE__ */ c({
   __name: "LinkTileProductWrapper",
   props: {
@@ -10,17 +10,18 @@ const j = /* @__PURE__ */ c({
     likeButton: { type: Boolean, default: !0 },
     liked: { type: Boolean, default: !1 },
     price: {},
+    priceOriginal: {},
     rel: {},
     target: { default: "_self" },
     theme: {}
   },
   emits: ["like"],
-  setup(s, { emit: i }) {
-    const a = P("p-link-tile-product"), t = s, e = f(), l = i, n = m(g), r = () => p(e, { ...t, theme: t.theme || n.value });
+  setup(p, { emit: s }) {
+    const a = g("p-link-tile-product"), t = p, e = f(), l = s, n = m(P), r = () => i(e, { ...t, theme: t.theme || n.value });
     return d(() => {
       r(), v(e, "like", l);
     }), u(r), h(n, (o) => {
-      p(e, { theme: t.theme || o });
+      i(e, { theme: t.theme || o });
     }), (o, w) => (k(), _(y(C(a)), {
       ref_key: "pdsComponentRef",
       ref: e

package/package.json

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