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

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

@@ -0,0 +1,154 @@
+import type { LinkTileAlign, SelectedAriaAttributes, BreakpointCustomizable, LinkTileAspectRatio, LinkTileSize, LinkTarget, LinkTileWeight } from '../types';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * Alignment of link and description.
+     */
+    align?: "top" | "bottom" | undefined;
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<"aria-label"> | undefined;
+    /**
+     * Aspect ratio of the link-tile.
+     */
+    aspectRatio?: BreakpointCustomizable<"1:1" | "4:3" | "3:4" | "16:9" | "9:16"> | undefined;
+    /**
+     * Displays the tile-link as compact version with description and link icon only.
+     */
+    compact?: BreakpointCustomizable<boolean> | undefined;
+    /**
+     * Description text.
+     */
+    description: string;
+    /**
+     * Special download attribute to open native browser download dialog if target url points to a downloadable file.
+     */
+    download?: string | undefined;
+    /**
+     * Show gradient.
+     */
+    gradient?: boolean | undefined;
+    /**
+     * href of the `<a>`.
+     */
+    href: string;
+    /**
+     * Label of the <a />.
+     */
+    label: string;
+    /**
+     * Specifies the relationship of the target object to the link object.
+     */
+    rel?: string | undefined;
+    /**
+     * Font size of the description.
+     */
+    size?: BreakpointCustomizable<"default" | "inherit"> | undefined;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: string | undefined;
+    /**
+     * Font weight of the description.
+     */
+    weight?: BreakpointCustomizable<"regular" | "semibold"> | undefined;
+}>, {
+    align: string;
+    aspectRatio: string;
+    compact: boolean;
+    gradient: boolean;
+    size: string;
+    target: 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<{
+    /**
+     * Alignment of link and description.
+     */
+    align?: "top" | "bottom" | undefined;
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<"aria-label"> | undefined;
+    /**
+     * Aspect ratio of the link-tile.
+     */
+    aspectRatio?: BreakpointCustomizable<"1:1" | "4:3" | "3:4" | "16:9" | "9:16"> | undefined;
+    /**
+     * Displays the tile-link as compact version with description and link icon only.
+     */
+    compact?: BreakpointCustomizable<boolean> | undefined;
+    /**
+     * Description text.
+     */
+    description: string;
+    /**
+     * Special download attribute to open native browser download dialog if target url points to a downloadable file.
+     */
+    download?: string | undefined;
+    /**
+     * Show gradient.
+     */
+    gradient?: boolean | undefined;
+    /**
+     * href of the `<a>`.
+     */
+    href: string;
+    /**
+     * Label of the <a />.
+     */
+    label: string;
+    /**
+     * Specifies the relationship of the target object to the link object.
+     */
+    rel?: string | undefined;
+    /**
+     * Font size of the description.
+     */
+    size?: BreakpointCustomizable<"default" | "inherit"> | undefined;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: string | undefined;
+    /**
+     * Font weight of the description.
+     */
+    weight?: BreakpointCustomizable<"regular" | "semibold"> | undefined;
+}>, {
+    align: string;
+    aspectRatio: string;
+    compact: boolean;
+    gradient: boolean;
+    size: string;
+    target: string;
+    weight: string;
+}>>>, {
+    weight: BreakpointCustomizable<LinkTileWeight>;
+    compact: BreakpointCustomizable<boolean>;
+    size: BreakpointCustomizable<LinkTileSize>;
+    align: LinkTileAlign;
+    target: LinkTarget;
+    aspectRatio: BreakpointCustomizable<LinkTileAspectRatio>;
+    gradient: 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/LinkTileWrapper.vue.js

@@ -0,0 +1,39 @@
+import { defineComponent as r, ref as f, onMounted as p, onUpdated as u, openBlock as d, createBlock as s, resolveDynamicComponent as i, unref as c, withCtx as m, renderSlot as _ } from "vue";
+import { getPrefixedTagName as g, syncProperties as l } from "../../utils.js";
+const h = /* @__PURE__ */ r({
+  __name: "LinkTileWrapper",
+  props: {
+    align: { default: "bottom" },
+    aria: null,
+    aspectRatio: { default: "4:3" },
+    compact: { default: !1 },
+    description: null,
+    download: null,
+    gradient: { type: Boolean, default: !0 },
+    href: null,
+    label: null,
+    rel: null,
+    size: { default: "default" },
+    target: { default: "_self" },
+    weight: { default: "semibold" }
+  },
+  setup(o) {
+    const t = o, n = g("p-link-tile"), e = f();
+    return p(() => {
+      l(e.value, t);
+    }), u(() => {
+      l(e.value, t);
+    }), (a, C) => (d(), s(i(c(n)), {
+      ref_key: "pdsComponentRef",
+      ref: e
+    }, {
+      default: m(() => [
+        _(a.$slots, "default")
+      ]),
+      _: 3
+    }, 512));
+  }
+});
+export {
+  h as default
+};

package/lib/components/LinkTileWrapper.vue2.js

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

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

@@ -0,0 +1,124 @@
+import type { SelectedAriaAttributes, BreakpointCustomizable, IconName, LinkTarget, ThemeExtendedElectric, LinkVariant } from '../types';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * 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.
+     */
+    icon?: IconName | 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" | "light-electric" | undefined;
+    /**
+     * The style variant of the link.
+     */
+    variant?: "primary" | "secondary" | "tertiary" | undefined;
+}>, {
+    hideLabel: boolean;
+    icon: string;
+    target: string;
+    theme: string;
+    variant: 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;
+    /**
+     * 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.
+     */
+    icon?: IconName | 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" | "light-electric" | undefined;
+    /**
+     * The style variant of the link.
+     */
+    variant?: "primary" | "secondary" | "tertiary" | undefined;
+}>, {
+    hideLabel: boolean;
+    icon: string;
+    target: string;
+    theme: string;
+    variant: string;
+}>>>, {
+    theme: ThemeExtendedElectric;
+    hideLabel: BreakpointCustomizable<boolean>;
+    icon: IconName;
+    variant: LinkVariant;
+    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/LinkWrapper.vue.js

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

package/lib/components/LinkWrapper.vue2.js

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

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

@@ -0,0 +1,71 @@
+import type { SelectedAriaAttributes, MarqueSize, LinkTarget } from '../types';
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<"aria-label"> | undefined;
+    /**
+     * When providing an url then the component will be rendered as `<a>`.
+     */
+    href?: string | undefined;
+    /**
+     * Adapts sizing of marque.
+     */
+    size?: "small" | "medium" | "responsive" | undefined;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: string | undefined;
+    /**
+     * Show/hide trademark sign.
+     */
+    trademark?: boolean | undefined;
+}>, {
+    size: string;
+    target: string;
+    trademark: 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<{
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<"aria-label"> | undefined;
+    /**
+     * When providing an url then the component will be rendered as `<a>`.
+     */
+    href?: string | undefined;
+    /**
+     * Adapts sizing of marque.
+     */
+    size?: "small" | "medium" | "responsive" | undefined;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: string | undefined;
+    /**
+     * Show/hide trademark sign.
+     */
+    trademark?: boolean | undefined;
+}>, {
+    size: string;
+    target: string;
+    trademark: boolean;
+}>>>, {
+    size: MarqueSize;
+    target: LinkTarget;
+    trademark: boolean;
+}>;
+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/MarqueWrapper.vue.js

@@ -0,0 +1,26 @@
+import { defineComponent as a, ref as p, onMounted as s, onUpdated as f, openBlock as l, createBlock as u, resolveDynamicComponent as m, unref as c } from "vue";
+import { getPrefixedTagName as d, syncProperties as n } from "../../utils.js";
+const k = /* @__PURE__ */ a({
+  __name: "MarqueWrapper",
+  props: {
+    aria: null,
+    href: null,
+    size: { default: "responsive" },
+    target: { default: "_self" },
+    trademark: { type: Boolean, default: !0 }
+  },
+  setup(r) {
+    const o = r, t = d("p-marque"), e = p();
+    return s(() => {
+      n(e.value, o);
+    }), f(() => {
+      n(e.value, o);
+    }), (i, _) => (l(), u(m(c(t)), {
+      ref_key: "pdsComponentRef",
+      ref: e
+    }, null, 512));
+  }
+});
+export {
+  k as default
+};

package/lib/components/MarqueWrapper.vue2.js

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

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

@@ -0,0 +1,93 @@
+import type { SelectedAriaAttributes, BreakpointCustomizable } from '../types';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<"aria-label"> | undefined;
+    /**
+     * If true, the modal will not be closable via backdrop click.
+     */
+    disableBackdropClick?: boolean | undefined;
+    /**
+     * If true, the modal will not have a close button.
+     */
+    disableCloseButton?: boolean | undefined;
+    /**
+     * If true the modal uses max viewport height and width. Should only be used for mobile.
+     */
+    fullscreen?: BreakpointCustomizable<boolean> | undefined;
+    /**
+     * The title of the modal
+     */
+    heading?: string | undefined;
+    /**
+     * If true, the modal is open.
+     */
+    open: boolean;
+}>, {
+    disableBackdropClick: boolean;
+    disableCloseButton: boolean;
+    fullscreen: boolean;
+    open: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (value?: void | undefined) => void;
+}, 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;
+    /**
+     * If true, the modal will not be closable via backdrop click.
+     */
+    disableBackdropClick?: boolean | undefined;
+    /**
+     * If true, the modal will not have a close button.
+     */
+    disableCloseButton?: boolean | undefined;
+    /**
+     * If true the modal uses max viewport height and width. Should only be used for mobile.
+     */
+    fullscreen?: BreakpointCustomizable<boolean> | undefined;
+    /**
+     * The title of the modal
+     */
+    heading?: string | undefined;
+    /**
+     * If true, the modal is open.
+     */
+    open: boolean;
+}>, {
+    disableBackdropClick: boolean;
+    disableCloseButton: boolean;
+    fullscreen: boolean;
+    open: boolean;
+}>>> & {
+    onClose?: ((value?: void | undefined) => any) | undefined;
+}, {
+    open: boolean;
+    disableBackdropClick: boolean;
+    disableCloseButton: boolean;
+    fullscreen: BreakpointCustomizable<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/ModalWrapper.vue.js

@@ -0,0 +1,33 @@
+import { defineComponent as s, ref as p, onMounted as f, onUpdated as d, openBlock as u, createBlock as c, resolveDynamicComponent as m, unref as i, withCtx as C, renderSlot as B } from "vue";
+import { getPrefixedTagName as _, syncProperties as t, addEventListenerToElementRef as y } from "../../utils.js";
+const b = /* @__PURE__ */ s({
+  __name: "ModalWrapper",
+  props: {
+    aria: null,
+    disableBackdropClick: { type: Boolean, default: !1 },
+    disableCloseButton: { type: Boolean, default: !1 },
+    fullscreen: { default: !1 },
+    heading: null,
+    open: { type: Boolean, default: !1 }
+  },
+  emits: ["close"],
+  setup(n, { emit: a }) {
+    const o = n, l = _("p-modal"), e = p();
+    return f(() => {
+      t(e.value, o), y(e.value, "close", a);
+    }), d(() => {
+      t(e.value, o);
+    }), (r, k) => (u(), c(m(i(l)), {
+      ref_key: "pdsComponentRef",
+      ref: e
+    }, {
+      default: C(() => [
+        B(r.$slots, "default")
+      ]),
+      _: 3
+    }, 512));
+  }
+});
+export {
+  b as default
+};

package/lib/components/ModalWrapper.vue2.js

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