@porsche-design-system/components-vue 2.19.0-rc.0

package/lib/components/HeadlineWrapper.vue.js

@@ -0,0 +1,32 @@
+import { defineComponent as r, ref as p, onMounted as f, onUpdated as d, openBlock as s, createBlock as u, resolveDynamicComponent as i, unref as m, withCtx as c, renderSlot as _ } from "vue";
+import { getPrefixedTagName as g, syncProperties as o } from "../../utils.js";
+const y = /* @__PURE__ */ r({
+  __name: "HeadlineWrapper",
+  props: {
+    align: { default: "left" },
+    color: { default: "default" },
+    ellipsis: { type: Boolean, default: !1 },
+    tag: null,
+    theme: { default: "light" },
+    variant: { default: "headline-1" }
+  },
+  setup(n) {
+    const t = n, a = g("p-headline"), e = p();
+    return f(() => {
+      o(e.value, t);
+    }), d(() => {
+      o(e.value, t);
+    }), (l, h) => (s(), u(i(m(a)), {
+      ref_key: "pdsComponentRef",
+      ref: e
+    }, {
+      default: c(() => [
+        _(l.$slots, "default")
+      ]),
+      _: 3
+    }, 512));
+  }
+});
+export {
+  y as default
+};

package/lib/components/HeadlineWrapper.vue2.js

@@ -0,0 +1,5 @@
+import "./HeadlineWrapper.vue.js";
+import { default as t } from "./HeadlineWrapper.vue.js";
+export {
+  t as default
+};

package/lib/components/IconWrapper.vue.d.ts

@@ -0,0 +1,93 @@
+import type { SelectedAriaAttributes, TextColor, IconName, IconSize, ThemeExtendedElectricDark } from '../types';
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<"aria-label"> | undefined;
+    /**
+     * Basic color variations depending on theme property.
+     */
+    color?: "default" | "inherit" | "brand" | "neutral-contrast-high" | "neutral-contrast-medium" | "neutral-contrast-low" | "notification-success" | "notification-warning" | "notification-error" | "notification-neutral" | undefined;
+    /**
+     * If enabled, icon will be loaded lazily when it's visible in the viewport.
+     */
+    lazy?: boolean | undefined;
+    /**
+     * Specifies which icon to use.
+     */
+    name?: IconName | undefined;
+    /**
+     * The size of the icon.
+     */
+    size?: "small" | "medium" | "large" | "inherit" | undefined;
+    /**
+     * Specifies a whole icon path which can be used for custom icons.
+     */
+    source?: string | undefined;
+    /**
+     * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
+     */
+    theme?: "light" | "dark" | "light-electric" | "dark-electric" | undefined;
+}>, {
+    color: string;
+    lazy: boolean;
+    name: string;
+    size: string;
+    theme: 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<{
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<"aria-label"> | undefined;
+    /**
+     * Basic color variations depending on theme property.
+     */
+    color?: "default" | "inherit" | "brand" | "neutral-contrast-high" | "neutral-contrast-medium" | "neutral-contrast-low" | "notification-success" | "notification-warning" | "notification-error" | "notification-neutral" | undefined;
+    /**
+     * If enabled, icon will be loaded lazily when it's visible in the viewport.
+     */
+    lazy?: boolean | undefined;
+    /**
+     * Specifies which icon to use.
+     */
+    name?: IconName | undefined;
+    /**
+     * The size of the icon.
+     */
+    size?: "small" | "medium" | "large" | "inherit" | undefined;
+    /**
+     * Specifies a whole icon path which can be used for custom icons.
+     */
+    source?: string | undefined;
+    /**
+     * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
+     */
+    theme?: "light" | "dark" | "light-electric" | "dark-electric" | undefined;
+}>, {
+    color: string;
+    lazy: boolean;
+    name: string;
+    size: string;
+    theme: string;
+}>>>, {
+    size: IconSize;
+    theme: ThemeExtendedElectricDark;
+    color: TextColor;
+    lazy: boolean;
+    name: IconName;
+}>;
+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 ? P[K] & {
+        default: D[K];
+    } : P[K];
+};

package/lib/components/IconWrapper.vue.js

@@ -0,0 +1,28 @@
+import { defineComponent as r, ref as l, onMounted as p, onUpdated as f, openBlock as s, createBlock as u, resolveDynamicComponent as c, unref as m } from "vue";
+import { getPrefixedTagName as d, syncProperties as n } from "../../utils.js";
+const y = /* @__PURE__ */ r({
+  __name: "IconWrapper",
+  props: {
+    aria: null,
+    color: { default: "default" },
+    lazy: { type: Boolean, default: !1 },
+    name: { default: "arrow-head-right" },
+    size: { default: "small" },
+    source: null,
+    theme: { default: "light" }
+  },
+  setup(t) {
+    const o = t, a = d("p-icon"), e = l();
+    return p(() => {
+      n(e.value, o);
+    }), f(() => {
+      n(e.value, o);
+    }), (i, _) => (s(), u(c(m(a)), {
+      ref_key: "pdsComponentRef",
+      ref: e
+    }, null, 512));
+  }
+});
+export {
+  y as default
+};

package/lib/components/IconWrapper.vue2.js

@@ -0,0 +1,5 @@
+import "./IconWrapper.vue.js";
+import { default as t } from "./IconWrapper.vue.js";
+export {
+  t as default
+};

package/lib/components/InlineNotificationWrapper.vue.d.ts

@@ -0,0 +1,121 @@
+import type { IconName, InlineNotificationState, Theme } from '../types';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * Action icon of the inline-notification.
+     */
+    actionIcon?: IconName | undefined;
+    /**
+     * Action label of the inline-notification.
+     */
+    actionLabel?: string | undefined;
+    /**
+     * Disables the action button and shows a loading indicator. No events will be triggered while loading state is active.
+     */
+    actionLoading?: boolean | undefined;
+    /**
+     * Description of the inline-notification.
+     */
+    description?: string | undefined;
+    /**
+     * Heading of the inline-notification.
+     */
+    heading?: string | undefined;
+    /**
+     * Defines if the inline-notification can be closed/removed by the user.
+     */
+    persistent?: boolean | undefined;
+    /**
+     * State of the inline-notification.
+     */
+    state?: "success" | "warning" | "error" | "neutral" | undefined;
+    /**
+     * Adapts the inline-notification color depending on the theme.
+     */
+    theme?: "light" | "dark" | undefined;
+}>, {
+    actionIcon: string;
+    actionLoading: boolean;
+    description: string;
+    heading: string;
+    persistent: boolean;
+    state: string;
+    theme: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    action: (value?: void | undefined) => void;
+} & {
+    dismiss: (value?: void | undefined) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * Action icon of the inline-notification.
+     */
+    actionIcon?: IconName | undefined;
+    /**
+     * Action label of the inline-notification.
+     */
+    actionLabel?: string | undefined;
+    /**
+     * Disables the action button and shows a loading indicator. No events will be triggered while loading state is active.
+     */
+    actionLoading?: boolean | undefined;
+    /**
+     * Description of the inline-notification.
+     */
+    description?: string | undefined;
+    /**
+     * Heading of the inline-notification.
+     */
+    heading?: string | undefined;
+    /**
+     * Defines if the inline-notification can be closed/removed by the user.
+     */
+    persistent?: boolean | undefined;
+    /**
+     * State of the inline-notification.
+     */
+    state?: "success" | "warning" | "error" | "neutral" | undefined;
+    /**
+     * Adapts the inline-notification color depending on the theme.
+     */
+    theme?: "light" | "dark" | undefined;
+}>, {
+    actionIcon: string;
+    actionLoading: boolean;
+    description: string;
+    heading: string;
+    persistent: boolean;
+    state: string;
+    theme: string;
+}>>> & {
+    onDismiss?: ((value?: void | undefined) => any) | undefined;
+    onAction?: ((value?: void | undefined) => any) | undefined;
+}, {
+    heading: string;
+    theme: Theme;
+    persistent: boolean;
+    state: InlineNotificationState;
+    description: string;
+    actionIcon: IconName;
+    actionLoading: 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 ? P[K] & {
+        default: D[K];
+    } : P[K];
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/InlineNotificationWrapper.vue.js

@@ -0,0 +1,35 @@
+import { defineComponent as s, ref as d, onMounted as f, onUpdated as p, openBlock as c, createBlock as u, resolveDynamicComponent as m, unref as g, withCtx as h, renderSlot as _ } from "vue";
+import { getPrefixedTagName as v, syncProperties as o, addEventListenerToElementRef as a } from "../../utils.js";
+const k = /* @__PURE__ */ s({
+  __name: "InlineNotificationWrapper",
+  props: {
+    actionIcon: { default: "arrow-head-right" },
+    actionLabel: null,
+    actionLoading: { type: Boolean, default: !1 },
+    description: { default: "" },
+    heading: { default: "" },
+    persistent: { type: Boolean, default: !1 },
+    state: { default: "neutral" },
+    theme: { default: "light" }
+  },
+  emits: ["action", "dismiss"],
+  setup(i, { emit: t }) {
+    const n = i, l = v("p-inline-notification"), e = d();
+    return f(() => {
+      o(e.value, n), a(e.value, "action", t), a(e.value, "dismiss", t);
+    }), p(() => {
+      o(e.value, n);
+    }), (r, C) => (c(), u(m(g(l)), {
+      ref_key: "pdsComponentRef",
+      ref: e
+    }, {
+      default: h(() => [
+        _(r.$slots, "default")
+      ]),
+      _: 3
+    }, 512));
+  }
+});
+export {
+  k as default
+};

package/lib/components/InlineNotificationWrapper.vue2.js

@@ -0,0 +1,5 @@
+import "./InlineNotificationWrapper.vue.js";
+import { default as t } from "./InlineNotificationWrapper.vue.js";
+export {
+  t as default
+};

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

@@ -0,0 +1,168 @@
+import type { AlignLabel, SelectedAriaAttributes, BreakpointCustomizable, LinkButtonPureIconName, TextSize, LinkTarget, ThemeExtendedElectricDark, TextWeight } from '../types';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * Display link in active state.
+     */
+    active?: boolean | undefined;
+    /**
+     * Aligns the label.
+     */
+    alignLabel?: AlignLabel | undefined;
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<"aria-label"> | undefined;
+    /**
+     * Special download attribute to open native browser download dialog if target url points to a downloadable file.
+     */
+    download?: string | undefined;
+    /**
+     * Show or hide label. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean> | undefined;
+    /**
+     * When providing an url then the component will be rendered as `<a>`.
+     */
+    href?: string | undefined;
+    /**
+     * The icon shown. By choosing 'none', no icon is displayed
+     */
+    icon?: LinkButtonPureIconName | undefined;
+    /**
+     * A URL path to a custom icon.
+     */
+    iconSource?: string | undefined;
+    /**
+     * Specifies the relationship of the target object to the link object.
+     */
+    rel?: string | undefined;
+    /**
+     * Size of the link.
+     */
+    size?: BreakpointCustomizable<"x-small" | "small" | "medium" | "large" | "x-large" | "inherit"> | undefined;
+    /**
+     * Stretches the area between icon and label to max available space.
+     */
+    stretch?: BreakpointCustomizable<boolean> | undefined;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: string | undefined;
+    /**
+     * Adapts the button color depending on the theme.
+     */
+    theme?: "light" | "dark" | "light-electric" | "dark-electric" | undefined;
+    /**
+     * The weight of the text (only has effect with visible label).
+     */
+    weight?: "thin" | "regular" | "semibold" | "bold" | undefined;
+}>, {
+    active: boolean;
+    alignLabel: string;
+    hideLabel: boolean;
+    icon: string;
+    size: string;
+    stretch: boolean;
+    target: string;
+    theme: 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<{
+    /**
+     * Display link in active state.
+     */
+    active?: boolean | undefined;
+    /**
+     * Aligns the label.
+     */
+    alignLabel?: AlignLabel | undefined;
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<"aria-label"> | undefined;
+    /**
+     * Special download attribute to open native browser download dialog if target url points to a downloadable file.
+     */
+    download?: string | undefined;
+    /**
+     * Show or hide label. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean> | undefined;
+    /**
+     * When providing an url then the component will be rendered as `<a>`.
+     */
+    href?: string | undefined;
+    /**
+     * The icon shown. By choosing 'none', no icon is displayed
+     */
+    icon?: LinkButtonPureIconName | undefined;
+    /**
+     * A URL path to a custom icon.
+     */
+    iconSource?: string | undefined;
+    /**
+     * Specifies the relationship of the target object to the link object.
+     */
+    rel?: string | undefined;
+    /**
+     * Size of the link.
+     */
+    size?: BreakpointCustomizable<"x-small" | "small" | "medium" | "large" | "x-large" | "inherit"> | undefined;
+    /**
+     * Stretches the area between icon and label to max available space.
+     */
+    stretch?: BreakpointCustomizable<boolean> | undefined;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: string | undefined;
+    /**
+     * Adapts the button color depending on the theme.
+     */
+    theme?: "light" | "dark" | "light-electric" | "dark-electric" | undefined;
+    /**
+     * The weight of the text (only has effect with visible label).
+     */
+    weight?: "thin" | "regular" | "semibold" | "bold" | undefined;
+}>, {
+    active: boolean;
+    alignLabel: string;
+    hideLabel: boolean;
+    icon: string;
+    size: string;
+    stretch: boolean;
+    target: string;
+    theme: string;
+    weight: string;
+}>>>, {
+    weight: TextWeight;
+    stretch: BreakpointCustomizable<boolean>;
+    size: BreakpointCustomizable<TextSize>;
+    theme: ThemeExtendedElectricDark;
+    active: boolean;
+    alignLabel: AlignLabel;
+    hideLabel: BreakpointCustomizable<boolean>;
+    icon: LinkButtonPureIconName;
+    target: LinkTarget;
+}>, {
+    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 ? P[K] & {
+        default: D[K];
+    } : P[K];
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/LinkPureWrapper.vue.js

@@ -0,0 +1,40 @@
+import { defineComponent as r, ref as f, onMounted as u, onUpdated as d, openBlock as p, createBlock as s, resolveDynamicComponent as i, unref as c, withCtx as m, renderSlot as h } from "vue";
+import { getPrefixedTagName as g, syncProperties as l } from "../../utils.js";
+const w = /* @__PURE__ */ r({
+  __name: "LinkPureWrapper",
+  props: {
+    active: { type: Boolean, default: !1 },
+    alignLabel: { default: "right" },
+    aria: null,
+    download: null,
+    hideLabel: { default: !1 },
+    href: null,
+    icon: { default: "arrow-head-right" },
+    iconSource: null,
+    rel: null,
+    size: { default: "small" },
+    stretch: { default: !1 },
+    target: { default: "_self" },
+    theme: { default: "light" },
+    weight: { default: "regular" }
+  },
+  setup(a) {
+    const t = a, n = g("p-link-pure"), e = f();
+    return u(() => {
+      l(e.value, t);
+    }), d(() => {
+      l(e.value, t);
+    }), (o, _) => (p(), s(i(c(n)), {
+      ref_key: "pdsComponentRef",
+      ref: e
+    }, {
+      default: m(() => [
+        h(o.$slots, "default")
+      ]),
+      _: 3
+    }, 512));
+  }
+});
+export {
+  w as default
+};

package/lib/components/LinkPureWrapper.vue2.js

@@ -0,0 +1,5 @@
+import "./LinkPureWrapper.vue.js";
+import { default as t } from "./LinkPureWrapper.vue.js";
+export {
+  t as default
+};

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

@@ -0,0 +1,94 @@
+import type { BreakpointCustomizable, SocialIconName, LinkTarget, Theme } from '../types';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * Show or hide label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean> | undefined;
+    /**
+     * When providing an url then the component will be rendered as `<a>`.
+     */
+    href?: string | undefined;
+    /**
+     * The icon shown.
+     */
+    icon?: SocialIconName | undefined;
+    /**
+     * A URL path to a custom icon.
+     */
+    iconSource?: string | undefined;
+    /**
+     * Specifies the relationship of the target object to the link object.
+     */
+    rel?: string | undefined;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: string | undefined;
+    /**
+     * Adapts the link color when used on dark background.
+     */
+    theme?: "light" | "dark" | undefined;
+}>, {
+    hideLabel: boolean;
+    target: string;
+    theme: 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<{
+    /**
+     * Show or hide label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean> | undefined;
+    /**
+     * When providing an url then the component will be rendered as `<a>`.
+     */
+    href?: string | undefined;
+    /**
+     * The icon shown.
+     */
+    icon?: SocialIconName | undefined;
+    /**
+     * A URL path to a custom icon.
+     */
+    iconSource?: string | undefined;
+    /**
+     * Specifies the relationship of the target object to the link object.
+     */
+    rel?: string | undefined;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: string | undefined;
+    /**
+     * Adapts the link color when used on dark background.
+     */
+    theme?: "light" | "dark" | undefined;
+}>, {
+    hideLabel: boolean;
+    target: string;
+    theme: string;
+}>>>, {
+    theme: Theme;
+    hideLabel: BreakpointCustomizable<boolean>;
+    target: LinkTarget;
+}>, {
+    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 ? P[K] & {
+        default: D[K];
+    } : P[K];
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/LinkSocialWrapper.vue.js

@@ -0,0 +1,33 @@
+import { defineComponent as a, ref as p, onMounted as f, onUpdated as s, openBlock as u, createBlock as c, resolveDynamicComponent as i, unref as d, withCtx as m, renderSlot as _ } from "vue";
+import { getPrefixedTagName as h, syncProperties as n } from "../../utils.js";
+const v = /* @__PURE__ */ a({
+  __name: "LinkSocialWrapper",
+  props: {
+    hideLabel: { default: !1 },
+    href: null,
+    icon: null,
+    iconSource: null,
+    rel: null,
+    target: { default: "_self" },
+    theme: { default: "light" }
+  },
+  setup(t) {
+    const o = t, l = h("p-link-social"), e = p();
+    return f(() => {
+      n(e.value, o);
+    }), s(() => {
+      n(e.value, o);
+    }), (r, C) => (u(), c(i(d(l)), {
+      ref_key: "pdsComponentRef",
+      ref: e
+    }, {
+      default: m(() => [
+        _(r.$slots, "default")
+      ]),
+      _: 3
+    }, 512));
+  }
+});
+export {
+  v as default
+};

package/lib/components/LinkSocialWrapper.vue2.js

@@ -0,0 +1,5 @@
+import "./LinkSocialWrapper.vue.js";
+import { default as t } from "./LinkSocialWrapper.vue.js";
+export {
+  t as default
+};