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

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

@@ -1,121 +1,91 @@
-import type { BreakpointCustomizable, SelectedAriaAttributes } from '../types';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    download: {
-        type: import("vue").PropType<string>;
-    };
-    weight: {
-        type: import("vue").PropType<"regular" | "semi-bold" | "bold" | "thin" | "semibold">;
-        default: string;
-    };
-    stretch: {
-        type: import("vue").PropType<BreakpointCustomizable<boolean>>;
-        default: boolean;
-    };
-    size: {
-        type: import("vue").PropType<BreakpointCustomizable<"inherit" | "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large">>;
-        default: string;
-    };
-    theme: {
-        type: import("vue").PropType<"light" | "dark" | "auto">;
-        default: string;
-    };
-    active: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    alignLabel: {
-        type: import("vue").PropType<BreakpointCustomizable<"start" | "end" | "left" | "right">>;
-        default: string;
-    };
-    aria: {
-        type: import("vue").PropType<SelectedAriaAttributes<"aria-label" | "aria-current">>;
-    };
-    hideLabel: {
-        type: import("vue").PropType<BreakpointCustomizable<boolean>>;
-        default: boolean;
-    };
-    icon: {
-        type: import("vue").PropType<import("../types").LinkButtonIconName>;
-        default: string;
-    };
-    iconSource: {
-        type: import("vue").PropType<string>;
-    };
-    href: {
-        type: import("vue").PropType<string>;
-    };
-    target: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
-    rel: {
-        type: import("vue").PropType<string>;
-    };
-    underline: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    download: {
-        type: import("vue").PropType<string>;
-    };
-    weight: {
-        type: import("vue").PropType<"regular" | "semi-bold" | "bold" | "thin" | "semibold">;
-        default: string;
-    };
-    stretch: {
-        type: import("vue").PropType<BreakpointCustomizable<boolean>>;
-        default: boolean;
-    };
-    size: {
-        type: import("vue").PropType<BreakpointCustomizable<"inherit" | "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large">>;
-        default: string;
-    };
-    theme: {
-        type: import("vue").PropType<"light" | "dark" | "auto">;
-        default: string;
-    };
-    active: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    alignLabel: {
-        type: import("vue").PropType<BreakpointCustomizable<"start" | "end" | "left" | "right">>;
-        default: string;
-    };
-    aria: {
-        type: import("vue").PropType<SelectedAriaAttributes<"aria-label" | "aria-current">>;
-    };
-    hideLabel: {
-        type: import("vue").PropType<BreakpointCustomizable<boolean>>;
-        default: boolean;
-    };
-    icon: {
-        type: import("vue").PropType<import("../types").LinkButtonIconName>;
-        default: string;
-    };
-    iconSource: {
-        type: import("vue").PropType<string>;
-    };
-    href: {
-        type: import("vue").PropType<string>;
-    };
-    target: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
-    rel: {
-        type: import("vue").PropType<string>;
-    };
-    underline: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-}>>, {
+import type { BreakpointCustomizable, LinkPureAlignLabel, SelectedAriaAttributes, LinkPureAriaAttribute, LinkPureIcon, LinkPureSize, LinkPureTarget, Theme, LinkPureWeight } from '../types';
+type PLinkPureProps = {
+    /**
+     * Display link in active state.
+     */
+    active?: boolean;
+    /**
+     * Aligns the label.
+     */
+    alignLabel?: BreakpointCustomizable<LinkPureAlignLabel>;
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<LinkPureAriaAttribute>;
+    /**
+     * Special download attribute to open native browser download dialog if target url points to a downloadable file.
+     */
+    download?: string;
+    /**
+     * Show or hide label. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * When providing an url then the component will be rendered as `<a>`.
+     */
+    href?: string;
+    /**
+     * The icon shown. By choosing 'none', no icon is displayed
+     */
+    icon?: LinkPureIcon;
+    /**
+     * A URL path to a custom icon.
+     */
+    iconSource?: string;
+    /**
+     * Specifies the relationship of the target object to the link object.
+     */
+    rel?: string;
+    /**
+     * Size of the link.
+     */
+    size?: BreakpointCustomizable<LinkPureSize>;
+    /**
+     * Stretches the area between icon and label to max available space.
+     */
+    stretch?: BreakpointCustomizable<boolean>;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: LinkPureTarget;
+    /**
+     * Adapts the button color depending on the theme.
+     */
+    theme?: Theme;
+    /**
+     * Shows an underline under the label.
+     */
+    underline?: boolean;
+    /**
+     * The weight of the text (only has effect with visible label).
+     * @deprecated since v3.0.0, will be removed with next major release
+     */
+    weight?: LinkPureWeight;
+};
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PLinkPureProps>, {
+    active: boolean;
+    alignLabel: string;
+    hideLabel: boolean;
+    icon: string;
+    size: string;
+    stretch: boolean;
+    target: string;
+    underline: boolean;
+    weight: 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<PLinkPureProps>, {
+    active: boolean;
+    alignLabel: string;
+    hideLabel: boolean;
+    icon: string;
+    size: string;
+    stretch: boolean;
+    target: string;
+    underline: boolean;
+    weight: string;
+}>>>, {
     weight: "regular" | "semi-bold" | "bold" | "thin" | "semibold";
     stretch: BreakpointCustomizable<boolean>;
     size: BreakpointCustomizable<"inherit" | "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large">;
-    theme: "light" | "dark" | "auto";
     active: boolean;
     alignLabel: BreakpointCustomizable<"start" | "end" | "left" | "right">;
     hideLabel: BreakpointCustomizable<boolean>;
@@ -126,6 +96,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/LinkPureWrapper.vue.mjs

@@ -1,6 +1,6 @@
-import { defineComponent as r, ref as f, onMounted as d, onUpdated as u, openBlock as p, createBlock as s, resolveDynamicComponent as i, unref as c, withCtx as m, renderSlot as g } from "vue";
-import { getPrefixedTagName as h, syncProperties as a } from "../../utils.mjs";
-const w = /* @__PURE__ */ r({
+import { defineComponent as s, ref as p, inject as d, onMounted as u, onUpdated as c, watch as i, openBlock as m, createBlock as h, resolveDynamicComponent as _, unref as y, withCtx as g, renderSlot as w } from "vue";
+import { usePrefix as C, themeInjectionKey as k, syncProperties as r } from "../../utils.mjs";
+const v = /* @__PURE__ */ s({
   __name: "LinkPureWrapper",
   props: {
     active: { type: Boolean, default: !1 },
@@ -15,27 +15,25 @@ const w = /* @__PURE__ */ r({
     size: { default: "small" },
     stretch: { default: !1 },
     target: { default: "_self" },
-    theme: { default: "light" },
+    theme: {},
     underline: { type: Boolean, default: !1 },
     weight: { default: "regular" }
   },
-  setup(o) {
-    const t = o, l = h("p-link-pure"), e = f();
-    return d(() => {
-      a(e.value, t);
-    }), u(() => {
-      a(e.value, t);
-    }), (n, _) => (p(), s(i(c(l)), {
+  setup(l) {
+    const f = C("p-link-pure"), e = l, t = p(), n = d(k), a = () => r(t, { ...e, theme: e.theme || n.value });
+    return u(a), c(a), i(n, (o) => {
+      r(t, { theme: e.theme || o });
+    }), (o, B) => (m(), h(_(y(f)), {
       ref_key: "pdsComponentRef",
-      ref: e
+      ref: t
     }, {
-      default: m(() => [
-        g(n.$slots, "default")
+      default: g(() => [
+        w(o.$slots, "default")
       ]),
       _: 3
     }, 512));
   }
 });
 export {
-  w as default
+  v as default
 };

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

@@ -1,63 +1,65 @@
-import type { BreakpointCustomizable, LinkSocialIcon } from '../types';
+import type { BreakpointCustomizable, LinkSocialIcon, LinkSocialTarget, Theme } from '../types';
+type PLinkSocialProps = {
+    /**
+     * Show or hide label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * When providing an url then the component will be rendered as `<a>`.
+     */
+    href?: string;
+    /**
+     * The icon shown.
+     */
+    icon?: LinkSocialIcon;
+    /**
+     * A URL path to a custom icon.
+     */
+    iconSource?: string;
+    /**
+     * Specifies the relationship of the target object to the link object.
+     */
+    rel?: string;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: LinkSocialTarget;
+    /**
+     * Adapts the link color when used on dark background.
+     */
+    theme?: Theme;
+};
 /** @deprecated since v3.0.0, will be removed with next major release. Use `p-link` with corresponding social icon instead. */
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    theme: {
-        type: import("vue").PropType<"light" | "dark" | "auto">;
-        default: string;
-    };
-    hideLabel: {
-        type: import("vue").PropType<BreakpointCustomizable<boolean>>;
-        default: boolean;
-    };
-    icon: {
-        type: import("vue").PropType<LinkSocialIcon>;
-    };
-    iconSource: {
-        type: import("vue").PropType<string>;
-    };
-    href: {
-        type: import("vue").PropType<string>;
-    };
-    target: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
-    rel: {
-        type: import("vue").PropType<string>;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    theme: {
-        type: import("vue").PropType<"light" | "dark" | "auto">;
-        default: string;
-    };
-    hideLabel: {
-        type: import("vue").PropType<BreakpointCustomizable<boolean>>;
-        default: boolean;
-    };
-    icon: {
-        type: import("vue").PropType<LinkSocialIcon>;
-    };
-    iconSource: {
-        type: import("vue").PropType<string>;
-    };
-    href: {
-        type: import("vue").PropType<string>;
-    };
-    target: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
-    rel: {
-        type: import("vue").PropType<string>;
-    };
-}>>, {
-    theme: "light" | "dark" | "auto";
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PLinkSocialProps>, {
+    hideLabel: boolean;
+    target: 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<PLinkSocialProps>, {
+    hideLabel: boolean;
+    target: string;
+}>>>, {
     hideLabel: BreakpointCustomizable<boolean>;
     target: string;
 }, {}>, {
     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/LinkSocialWrapper.vue.mjs

@@ -1,6 +1,6 @@
-import { defineComponent as l, ref as p, onMounted as f, onUpdated as s, openBlock as c, createBlock as i, resolveDynamicComponent as d, unref as m, withCtx as u, renderSlot as _ } from "vue";
-import { getPrefixedTagName as h, syncProperties as t } from "../../utils.mjs";
-const v = /* @__PURE__ */ l({
+import { defineComponent as a, ref as f, inject as m, onMounted as l, onUpdated as i, watch as d, openBlock as u, createBlock as h, resolveDynamicComponent as _, unref as C, withCtx as k, renderSlot as y } from "vue";
+import { usePrefix as w, themeInjectionKey as x, syncProperties as s } from "../../utils.mjs";
+const b = /* @__PURE__ */ a({
   __name: "LinkSocialWrapper",
   props: {
     hideLabel: { default: !1 },
@@ -9,25 +9,23 @@ const v = /* @__PURE__ */ l({
     iconSource: {},
     rel: {},
     target: { default: "_self" },
-    theme: { default: "light" }
+    theme: {}
   },
-  setup(n) {
-    const o = n, r = h("p-link-social"), e = p();
-    return f(() => {
-      t(e.value, o);
-    }), s(() => {
-      t(e.value, o);
-    }), (a, C) => (c(), i(d(m(r)), {
+  setup(c) {
+    const p = w("p-link-social"), e = c, t = f(), n = m(x), r = () => s(t, { ...e, theme: e.theme || n.value });
+    return l(r), i(r), d(n, (o) => {
+      s(t, { theme: e.theme || o });
+    }), (o, P) => (u(), h(_(C(p)), {
       ref_key: "pdsComponentRef",
-      ref: e
+      ref: t
     }, {
-      default: u(() => [
-        _(a.$slots, "default")
+      default: k(() => [
+        y(o.$slots, "default")
       ]),
       _: 3
     }, 512));
   }
 });
 export {
-  v as default
+  b as default
 };

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

@@ -1,67 +1,53 @@
-import type { BreakpointCustomizable } from '../types';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    heading: {
-        type: import("vue").PropType<string>;
-        required: true;
-    };
-    weight: {
-        type: import("vue").PropType<BreakpointCustomizable<"regular" | "semi-bold">>;
-        default: string;
-    };
-    description: {
-        type: import("vue").PropType<string>;
-    };
-    aspectRatio: {
-        type: import("vue").PropType<BreakpointCustomizable<"1:1" | "4:3" | "3:4" | "16:9" | "9:16">>;
-        default: string;
-    };
-    headingTag: {
-        type: import("vue").PropType<"h2" | "h3" | "h4" | "h5" | "h6">;
-        default: string;
-    };
-    linkDirection: {
-        type: import("vue").PropType<BreakpointCustomizable<"row" | "column">>;
-        default: () => {
-            base: string;
-            xs: 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<{
-    heading: {
-        type: import("vue").PropType<string>;
-        required: true;
-    };
-    weight: {
-        type: import("vue").PropType<BreakpointCustomizable<"regular" | "semi-bold">>;
-        default: string;
-    };
-    description: {
-        type: import("vue").PropType<string>;
-    };
-    aspectRatio: {
-        type: import("vue").PropType<BreakpointCustomizable<"1:1" | "4:3" | "3:4" | "16:9" | "9:16">>;
-        default: string;
-    };
-    headingTag: {
-        type: import("vue").PropType<"h2" | "h3" | "h4" | "h5" | "h6">;
-        default: string;
-    };
-    linkDirection: {
-        type: import("vue").PropType<BreakpointCustomizable<"row" | "column">>;
-        default: () => {
-            base: string;
-            xs: string;
-        };
+import type { BreakpointCustomizable, LinkTileModelSignatureAspectRatio, LinkTileModelSignatureHeadingTag, LinkTileModelSignatureLinkDirection, LinkTileModelSignatureModel, LinkTileModelSignatureWeight } from '../types';
+type PLinkTileModelSignatureProps = {
+    /**
+     * Aspect ratio of the link-tile-model-signature.
+     */
+    aspectRatio?: BreakpointCustomizable<LinkTileModelSignatureAspectRatio>;
+    /**
+     * Description text.
+     */
+    description?: string;
+    /**
+     * Heading text.
+     */
+    heading: string;
+    /**
+     * Sets a custom headline tag which wraps the heading to enhance semantics.
+     */
+    headingTag?: LinkTileModelSignatureHeadingTag;
+    /**
+     * Defines the direction of the main and cross axis of the links. The default is '{base: ‘column’, xs: ‘row’}' showing buttons vertically stacked on mobile viewports and side-by-side in a horizontal row from breakpoint 'xs'.
+     */
+    linkDirection?: BreakpointCustomizable<LinkTileModelSignatureLinkDirection>;
+    /**
+     * Adapts the model of the component.
+     */
+    model?: LinkTileModelSignatureModel;
+    /**
+     * Adapts the font weight of the heading.
+     */
+    weight?: BreakpointCustomizable<LinkTileModelSignatureWeight>;
+};
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PLinkTileModelSignatureProps>, {
+    aspectRatio: string;
+    headingTag: string;
+    linkDirection: () => {
+        base: string;
+        xs: string;
     };
-    model: {
-        type: import("vue").PropType<"718" | "911" | "boxster" | "cayenne" | "cayman" | "macan" | "panamera" | "taycan" | "turbo-s" | "turbo">;
-        default: string;
+    model: string;
+    weight: 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<PLinkTileModelSignatureProps>, {
+    aspectRatio: string;
+    headingTag: string;
+    linkDirection: () => {
+        base: string;
+        xs: string;
     };
-}>>, {
+    model: string;
+    weight: string;
+}>>>, {
     weight: BreakpointCustomizable<"regular" | "semi-bold">;
     aspectRatio: BreakpointCustomizable<"1:1" | "4:3" | "3:4" | "16:9" | "9:16">;
     headingTag: "h2" | "h3" | "h4" | "h5" | "h6";
@@ -71,6 +57,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/LinkTileModelSignatureWrapper.vue.mjs

@@ -1,6 +1,6 @@
-import { defineComponent as i, ref as l, onMounted as d, onUpdated as p, openBlock as s, createBlock as f, resolveDynamicComponent as u, unref as m, withCtx as c, renderSlot as g } from "vue";
-import { getPrefixedTagName as _, syncProperties as t } from "../../utils.mjs";
-const w = /* @__PURE__ */ i({
+import { defineComponent as a, ref as i, onMounted as p, onUpdated as d, openBlock as l, createBlock as f, resolveDynamicComponent as c, unref as u, withCtx as m, renderSlot as g } from "vue";
+import { usePrefix as _, syncProperties as h } from "../../utils.mjs";
+const x = /* @__PURE__ */ a({
   __name: "LinkTileModelSignatureWrapper",
   props: {
     aspectRatio: { default: "3:4" },
@@ -11,23 +11,19 @@ const w = /* @__PURE__ */ i({
     model: { default: "911" },
     weight: { default: "semi-bold" }
   },
-  setup(n) {
-    const o = n, a = _("p-link-tile-model-signature"), e = l();
-    return d(() => {
-      t(e.value, o);
-    }), p(() => {
-      t(e.value, o);
-    }), (r, h) => (s(), f(u(m(a)), {
+  setup(t) {
+    const n = _("p-link-tile-model-signature"), r = t, e = i(), o = () => h(e, r);
+    return p(o), d(o), (s, k) => (l(), f(c(u(n)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
-      default: c(() => [
-        g(r.$slots, "default")
+      default: m(() => [
+        g(s.$slots, "default")
       ]),
       _: 3
     }, 512));
   }
 });
 export {
-  w as default
+  x as default
 };