@porsche-design-system/components-vue 3.8.0 → 3.9.0-rc.0

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

@@ -1,71 +1,53 @@
-import type { SelectedAriaAttributes, BreakpointCustomizable } from '../types';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    heading: {
-        type: import("vue").PropType<string>;
-    };
-    open: {
-        type: import("vue").PropType<boolean>;
-        required: true;
-        default: boolean;
-    };
-    theme: {
-        type: import("vue").PropType<"light" | "dark" | "auto">;
-        default: string;
-    };
-    dismissButton: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    aria: {
-        type: import("vue").PropType<SelectedAriaAttributes<"aria-label">>;
-    };
-    disableBackdropClick: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    disableCloseButton: {
-        type: import("vue").PropType<boolean>;
-    };
-    fullscreen: {
-        type: import("vue").PropType<BreakpointCustomizable<boolean>>;
-        default: boolean;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+import type { SelectedAriaAttributes, ModalAriaAttribute, BreakpointCustomizable, Theme } from '../types';
+type PModalProps = {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<ModalAriaAttribute>;
+    /**
+     * If true, the modal will not be closable via backdrop click.
+     */
+    disableBackdropClick?: boolean;
+    /**
+     * If true, the modal will not have a dismiss button.
+     * @deprecated since v3.0.0, will be removed with next major release, use `dismissButton` instead.
+     */
+    disableCloseButton?: boolean;
+    /**
+     * If false, the modal will not have a dismiss button.
+     */
+    dismissButton?: boolean;
+    /**
+     * If true the modal uses max viewport height and width. Should only be used for mobile.
+     */
+    fullscreen?: BreakpointCustomizable<boolean>;
+    /**
+     * The title of the modal
+     */
+    heading?: string;
+    /**
+     * If true, the modal is open.
+     */
+    open: boolean;
+    /**
+     * Adapts the modal color depending on the theme.
+     */
+    theme?: Theme;
+};
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PModalProps>, {
+    disableBackdropClick: boolean;
+    dismissButton: boolean;
+    fullscreen: boolean;
+    open: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     [x: string]: (...args: unknown[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    heading: {
-        type: import("vue").PropType<string>;
-    };
-    open: {
-        type: import("vue").PropType<boolean>;
-        required: true;
-        default: boolean;
-    };
-    theme: {
-        type: import("vue").PropType<"light" | "dark" | "auto">;
-        default: string;
-    };
-    dismissButton: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    aria: {
-        type: import("vue").PropType<SelectedAriaAttributes<"aria-label">>;
-    };
-    disableBackdropClick: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    disableCloseButton: {
-        type: import("vue").PropType<boolean>;
-    };
-    fullscreen: {
-        type: import("vue").PropType<BreakpointCustomizable<boolean>>;
-        default: boolean;
-    };
-}>>, {
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PModalProps>, {
+    disableBackdropClick: boolean;
+    dismissButton: boolean;
+    fullscreen: boolean;
+    open: boolean;
+}>>>, {
     open: boolean;
-    theme: "light" | "dark" | "auto";
     dismissButton: boolean;
     disableBackdropClick: boolean;
     fullscreen: BreakpointCustomizable<boolean>;
@@ -73,6 +55,23 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     default?(_: {}): any;
 }>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

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

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

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

@@ -1,41 +1,50 @@
-declare const _default: import("vue").DefineComponent<{
-    size: {
-        type: import("vue").PropType<"inherit" | "small">;
-        default: string;
-    };
-    theme: {
-        type: import("vue").PropType<"light" | "dark" | "auto">;
-        default: string;
-    };
-    color: {
-        type: import("vue").PropType<"inherit" | "primary" | "contrast-low" | "contrast-medium" | "contrast-high">;
-        default: string;
-    };
-    model: {
-        type: import("vue").PropType<"718" | "911" | "boxster" | "cayenne" | "cayman" | "macan" | "panamera" | "taycan" | "turbo-s" | "turbo">;
-        default: string;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    size: {
-        type: import("vue").PropType<"inherit" | "small">;
-        default: string;
-    };
-    theme: {
-        type: import("vue").PropType<"light" | "dark" | "auto">;
-        default: string;
-    };
-    color: {
-        type: import("vue").PropType<"inherit" | "primary" | "contrast-low" | "contrast-medium" | "contrast-high">;
-        default: string;
-    };
-    model: {
-        type: import("vue").PropType<"718" | "911" | "boxster" | "cayenne" | "cayman" | "macan" | "panamera" | "taycan" | "turbo-s" | "turbo">;
-        default: string;
-    };
-}>>, {
+import type { ModelSignatureColor, ModelSignatureModel, ModelSignatureSize, Theme } from '../types';
+type PModelSignatureProps = {
+    /**
+     * Adapts the color of the component.
+     */
+    color?: ModelSignatureColor;
+    /**
+     * Adapts the model of the component.
+     */
+    model?: ModelSignatureModel;
+    /**
+     * Adapts the size of the component.
+     */
+    size?: ModelSignatureSize;
+    /**
+     * Adapts color depending on theme.
+     */
+    theme?: Theme;
+};
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PModelSignatureProps>, {
+    color: string;
+    model: string;
+    size: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PModelSignatureProps>, {
+    color: string;
+    model: string;
+    size: string;
+}>>>, {
     size: "inherit" | "small";
-    theme: "light" | "dark" | "auto";
     color: "inherit" | "primary" | "contrast-low" | "contrast-medium" | "contrast-high";
     model: "718" | "911" | "boxster" | "cayenne" | "cayman" | "macan" | "panamera" | "taycan" | "turbo-s" | "turbo";
 }, {}>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

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

@@ -1,25 +1,23 @@
-import { defineComponent as a, ref as p, onMounted as l, onUpdated as m, openBlock as s, createBlock as f, resolveDynamicComponent as d, unref as u } from "vue";
-import { getPrefixedTagName as c, syncProperties as t } from "../../utils.mjs";
-const y = /* @__PURE__ */ a({
+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({
   __name: "ModelSignatureWrapper",
   props: {
     color: { default: "primary" },
     model: { default: "911" },
     size: { default: "small" },
-    theme: { default: "light" }
+    theme: {}
   },
-  setup(n) {
-    const o = n, r = c("p-model-signature"), e = p();
-    return l(() => {
-      t(e.value, o);
-    }), m(() => {
-      t(e.value, o);
-    }), (i, _) => (s(), f(d(u(r)), {
+  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)), {
       ref_key: "pdsComponentRef",
-      ref: e
+      ref: o
     }, null, 512));
   }
 });
 export {
-  y as default
+  R as default
 };

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

@@ -1,27 +1,40 @@
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    disabled: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    value: {
-        type: import("vue").PropType<string>;
-        required: true;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    disabled: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    value: {
-        type: import("vue").PropType<string>;
-        required: true;
-    };
-}>>, {
+type PMultiSelectOptionProps = {
+    /**
+     * Disables the option.
+     */
+    disabled?: boolean;
+    /**
+     * The option value.
+     */
+    value: string;
+};
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PMultiSelectOptionProps>, {
+    disabled: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PMultiSelectOptionProps>, {
+    disabled: boolean;
+}>>>, {
     disabled: boolean;
 }, {}>, {
     default?(_: {}): any;
 }>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -1,22 +1,18 @@
-import { defineComponent as a, ref as l, onMounted as s, onUpdated as f, openBlock as c, createBlock as d, resolveDynamicComponent as m, unref as u, withCtx as i, renderSlot as _ } from "vue";
-import { getPrefixedTagName as C, syncProperties as t } from "../../utils.mjs";
-const k = /* @__PURE__ */ a({
+import { defineComponent as s, ref as a, onMounted as l, onUpdated as c, openBlock as f, createBlock as d, resolveDynamicComponent as i, unref as m, withCtx as u, renderSlot as _ } from "vue";
+import { usePrefix as C, syncProperties as y } from "../../utils.mjs";
+const P = /* @__PURE__ */ s({
   __name: "MultiSelectOptionWrapper",
   props: {
     disabled: { type: Boolean, default: !1 },
     value: {}
   },
-  setup(n) {
-    const o = n, p = C("p-multi-select-option"), e = l();
-    return s(() => {
-      t(e.value, o);
-    }), f(() => {
-      t(e.value, o);
-    }), (r, v) => (c(), d(m(u(p)), {
+  setup(t) {
+    const n = C("p-multi-select-option"), p = t, e = a(), o = () => y(e, p);
+    return l(o), c(o), (r, k) => (f(), d(i(m(n)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
-      default: i(() => [
+      default: u(() => [
         _(r.$slots, "default")
       ]),
       _: 3
@@ -24,5 +20,5 @@ const k = /* @__PURE__ */ a({
   }
 });
 export {
-  k as default
+  P as default
 };

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

@@ -1,113 +1,105 @@
-import type { BreakpointCustomizable, MultiSelectUpdateEvent } from '../types';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    label: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
-    theme: {
-        type: import("vue").PropType<"light" | "dark" | "auto">;
-        default: string;
-    };
-    description: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
-    state: {
-        type: import("vue").PropType<"none" | "success" | "error">;
-        default: string;
-    };
-    required: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    disabled: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    hideLabel: {
-        type: import("vue").PropType<BreakpointCustomizable<boolean>>;
-        default: boolean;
-    };
-    message: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
-    name: {
-        type: import("vue").PropType<string>;
-        required: true;
-    };
-    value: {
-        type: import("vue").PropType<string[]>;
-        default: () => never[];
-    };
-    dropdownDirection: {
-        type: import("vue").PropType<"auto" | "down" | "up">;
-        default: string;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+import type { MultiSelectDropdownDirection, BreakpointCustomizable, MultiSelectUpdateEvent, MultiSelectState, Theme } from '../types';
+type PMultiSelectProps = {
+    /**
+     * The description text.
+     */
+    description?: string;
+    /**
+     * Disables the multi-select
+     */
+    disabled?: boolean;
+    /**
+     * Changes the direction to which the dropdown list appears.
+     */
+    dropdownDirection?: MultiSelectDropdownDirection;
+    /**
+     * Show or hide label. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * The label text.
+     */
+    label?: string;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string;
+    /**
+     * The name of the control.
+     */
+    name: string;
+    /**
+     * A Boolean attribute indicating that an option with a non-empty string value must be selected.
+     */
+    required?: boolean;
+    /**
+     * The validation state.
+     */
+    state?: MultiSelectState;
+    /**
+     * Adapts the select color depending on the theme.
+     */
+    theme?: Theme;
+    /**
+     * The selected values.
+     */
+    value?: string[];
+};
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PMultiSelectProps>, {
+    description: string;
+    disabled: boolean;
+    dropdownDirection: string;
+    hideLabel: boolean;
+    label: string;
+    message: string;
+    required: boolean;
+    state: string;
+    value: () => never[];
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     update: (value: MultiSelectUpdateEvent) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    label: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
-    theme: {
-        type: import("vue").PropType<"light" | "dark" | "auto">;
-        default: string;
-    };
-    description: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
-    state: {
-        type: import("vue").PropType<"none" | "success" | "error">;
-        default: string;
-    };
-    required: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    disabled: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    hideLabel: {
-        type: import("vue").PropType<BreakpointCustomizable<boolean>>;
-        default: boolean;
-    };
-    message: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
-    name: {
-        type: import("vue").PropType<string>;
-        required: true;
-    };
-    value: {
-        type: import("vue").PropType<string[]>;
-        default: () => never[];
-    };
-    dropdownDirection: {
-        type: import("vue").PropType<"auto" | "down" | "up">;
-        default: string;
-    };
-}>> & {
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PMultiSelectProps>, {
+    description: string;
+    disabled: boolean;
+    dropdownDirection: string;
+    hideLabel: boolean;
+    label: string;
+    message: string;
+    required: boolean;
+    state: string;
+    value: () => never[];
+}>>> & {
     onUpdate?: ((value: MultiSelectUpdateEvent) => any) | undefined;
 }, {
     label: string;
-    theme: "light" | "dark" | "auto";
     description: string;
     state: "none" | "success" | "error";
     required: boolean;
     disabled: boolean;
     hideLabel: BreakpointCustomizable<boolean>;
-    message: string;
     value: string[];
+    message: string;
     dropdownDirection: "auto" | "down" | "up";
 }, {}>, {
     default?(_: {}): any;
 }>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;