@porsche-design-system/components-vue 3.14.0-rc.0 → 3.15.0-rc.0

package/CHANGELOG.md

@@ -14,6 +14,23 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### [Unreleased]
 
+### [3.15.0-rc.0] - 2024-04-05
+
+#### Changed
+
+- `Model Signature`: Enabling the use of hex colors, CSS gradients, CSS image and video masks. In addition, the size was
+  slightly adjusted. ([#3153](https://github.com/porsche-design-system/porsche-design-system/pull/3153))
+
+### Fixed
+
+- `Select`: Hydration error in Next.js when using slotted `img`
+  ([#3162](https://github.com/porsche-design-system/porsche-design-system/pull/3162))
+- `Text Field Wrapper`, `Textarea Wrapper`: Dynamic changes of `showCounter` and `maxLength` are reflected. The counter
+  element dynamically adjusts to changes in the input value accurately.
+  ([#3084](https://github.com/porsche-design-system/porsche-design-system/pull/3084))
+
+### [3.14.0] - 2024-03-25
+
 ### [3.14.0-rc.0] - 2024-03-25
 
 #### Added

package/cjs/lib/components/ModelSignatureWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),t=require("../../utils.cjs"),u=e.defineComponent({__name:"ModelSignatureWrapper",props:{color:{default:"primary"},model:{default:"911"},size:{default:"small"},theme:{}},setup(p){const m=t.usePrefix("p-model-signature"),n=p,o=e.ref(),r=e.inject(t.themeInjectionKey),s=()=>t.syncProperties(o,{...n,theme:n.theme||r.value});return e.onMounted(s),e.onUpdated(s),e.watch(r,c=>{t.syncProperties(o,{theme:n.theme||c})}),(c,a)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(m)),{ref_key:"pdsComponentRef",ref:o},null,512))}});module.exports=u;
+"use strict";const e=require("vue"),t=require("../../utils.cjs"),p=e.defineComponent({__name:"ModelSignatureWrapper",props:{color:{default:"primary"},fetchPriority:{default:"auto"},lazy:{type:Boolean,default:!1},model:{default:"911"},safeZone:{type:Boolean,default:!0},size:{default:"small"},theme:{}},setup(l){const c=t.usePrefix("p-model-signature"),o=l,n=e.ref(),s=e.inject(t.themeInjectionKey),a=()=>t.syncProperties(n,{...o,theme:o.theme||s.value});return e.onMounted(a),e.onUpdated(a),e.watch(s,r=>{t.syncProperties(n,{theme:o.theme||r})}),(r,u)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(c)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"default")]),_:3},512))}});module.exports=p;

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

@@ -1,15 +1,27 @@
-import type { ModelSignatureColor, ModelSignatureModel, ModelSignatureSize, Theme } from '../types';
+import type { ModelSignatureColor, ModelSignatureFetchPriority, ModelSignatureModel, ModelSignatureSize, Theme } from '../types';
 type PModelSignatureProps = {
     /**
      * Adapts the color of the component.
      */
     color?: ModelSignatureColor;
+    /**
+     * Defines the fetch priority of the model signature. In the end it is just a recommendation to the browser, but it defines the priority on its own.
+     */
+    fetchPriority?: ModelSignatureFetchPriority;
+    /**
+     * Defines whether the model signature is always loaded or only loaded when it is in the viewport (this feature may not work reliably).
+     */
+    lazy?: boolean;
     /**
      * Adapts the model of the component.
      */
     model?: ModelSignatureModel;
     /**
-     * Adapts the size of the component.
+     * When set to `true`, then all model signatures are visually aligned with each other. When set to `false` the model signature comes without any safe zone.
+     */
+    safeZone?: boolean;
+    /**
+     * Adapts the size of the component. When set to `inherit` a CSS `width` or `height` needs to be defined on the host but not both.
      */
     size?: ModelSignatureSize;
     /**
@@ -17,19 +29,30 @@ type PModelSignatureProps = {
      */
     theme?: Theme;
 };
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<PModelSignatureProps>, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<PModelSignatureProps>, {
     color: string;
+    fetchPriority: string;
+    lazy: boolean;
     model: string;
+    safeZone: boolean;
     size: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<PModelSignatureProps>, {
     color: string;
+    fetchPriority: string;
+    lazy: boolean;
     model: string;
+    safeZone: boolean;
     size: string;
 }>>>, {
     size: "inherit" | "small";
     color: "inherit" | "primary" | "contrast-low" | "contrast-medium" | "contrast-high";
+    lazy: boolean;
     model: "718" | "911" | "boxster" | "cayenne" | "cayman" | "macan" | "panamera" | "taycan" | "turbo-s" | "turbo";
-}, {}>;
+    fetchPriority: "auto" | "low" | "high";
+    safeZone: boolean;
+}, {}>, {
+    default?(_: {}): any;
+}>;
 export default _default;
 type __VLS_WithDefaults<P, D> = {
     [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
@@ -39,6 +62,11 @@ type __VLS_WithDefaults<P, D> = {
 type __VLS_Prettify<T> = {
     [K in keyof T]: T[K];
 } & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToOption<T> = {
     [K in keyof T]-?: {} extends Pick<T, K> ? {

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

@@ -1,21 +1,29 @@
-import { defineComponent as c, ref as a, inject as f, onMounted as l, onUpdated as u, watch as d, openBlock as i, createBlock as h, resolveDynamicComponent as _, unref as y } from "vue";
-import { usePrefix as C, themeInjectionKey as g, syncProperties as m } from "../../utils.mjs";
-const R = /* @__PURE__ */ c({
+import { defineComponent as p, ref as f, inject as m, onMounted as c, onUpdated as u, watch as d, openBlock as i, createBlock as h, resolveDynamicComponent as y, unref as _, withCtx as C, renderSlot as B } from "vue";
+import { usePrefix as P, themeInjectionKey as g, syncProperties as a } from "../../utils.mjs";
+const R = /* @__PURE__ */ p({
   __name: "ModelSignatureWrapper",
   props: {
     color: { default: "primary" },
+    fetchPriority: { default: "auto" },
+    lazy: { type: Boolean, default: !1 },
     model: { default: "911" },
+    safeZone: { type: Boolean, default: !0 },
     size: { default: "small" },
     theme: {}
   },
-  setup(p) {
-    const s = C("p-model-signature"), e = p, o = a(), t = f(g), n = () => m(o, { ...e, theme: e.theme || t.value });
-    return l(n), u(n), d(t, (r) => {
-      m(o, { theme: e.theme || r });
-    }), (r, k) => (i(), h(_(y(s)), {
+  setup(s) {
+    const l = P("p-model-signature"), e = s, t = f(), n = m(g), r = () => a(t, { ...e, theme: e.theme || n.value });
+    return c(r), u(r), d(n, (o) => {
+      a(t, { theme: e.theme || o });
+    }), (o, k) => (i(), h(y(_(l)), {
       ref_key: "pdsComponentRef",
-      ref: o
-    }, null, 512));
+      ref: t
+    }, {
+      default: C(() => [
+        B(o.$slots, "default")
+      ]),
+      _: 3
+    }, 512));
   }
 });
 export {

package/esm/lib/types.d.ts

@@ -1025,16 +1025,56 @@ declare const TILE_PRODUCT_ASPECT_RATIOS: readonly [
 ];
 export type LinkTileProductAspectRatio = Extract<TileAspectRatio, (typeof TILE_PRODUCT_ASPECT_RATIOS)[number]>;
 declare const MODEL_SIGNATURES_MANIFEST: {
-    "718": string;
-    "911": string;
-    boxster: string;
-    cayenne: string;
-    cayman: string;
-    macan: string;
-    panamera: string;
-    taycan: string;
-    "turbo-s": string;
-    turbo: string;
+    "718": {
+        src: string;
+        width: number;
+        height: number;
+    };
+    "911": {
+        src: string;
+        width: number;
+        height: number;
+    };
+    boxster: {
+        src: string;
+        width: number;
+        height: number;
+    };
+    cayenne: {
+        src: string;
+        width: number;
+        height: number;
+    };
+    cayman: {
+        src: string;
+        width: number;
+        height: number;
+    };
+    macan: {
+        src: string;
+        width: number;
+        height: number;
+    };
+    panamera: {
+        src: string;
+        width: number;
+        height: number;
+    };
+    taycan: {
+        src: string;
+        width: number;
+        height: number;
+    };
+    "turbo-s": {
+        src: string;
+        width: number;
+        height: number;
+    };
+    turbo: {
+        src: string;
+        width: number;
+        height: number;
+    };
 };
 declare const MARQUE_VARIANTS: readonly [
     "75-years",
@@ -1059,6 +1099,12 @@ declare const MODAL_ARIA_ATTRIBUTES: readonly [
 ];
 export type ModalAriaAttribute = (typeof MODAL_ARIA_ATTRIBUTES)[number];
 export type ModalBackdrop = Backdrop;
+declare const MODEL_SIGNATURE_FETCH_PRIORITY: readonly [
+    "low",
+    "high",
+    "auto"
+];
+export type ModelSignatureFetchPriority = (typeof MODEL_SIGNATURE_FETCH_PRIORITY)[number];
 declare const MODEL_SIGNATURE_SIZES: readonly [
     "small",
     "inherit"

package/package.json

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