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

package/PorscheDesignSystemProvider.vue.d.ts

@@ -0,0 +1,33 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    prefix?: string | undefined;
+}>, {
+    prefix: 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<{
+    prefix?: string | undefined;
+}>, {
+    prefix: string;
+}>>>, {
+    prefix: 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 ? P[K] & {
+        default: D[K];
+    } : P[K];
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/PorscheDesignSystemProvider.vue.js

@@ -0,0 +1,16 @@
+import { defineComponent as t, provide as p, renderSlot as i } from "vue";
+import { load as f } from "@porsche-design-system/components-js";
+import { prefixInjectionKey as n } from "./utils.js";
+const c = /* @__PURE__ */ t({
+  __name: "PorscheDesignSystemProvider",
+  props: {
+    prefix: { default: "" }
+  },
+  setup(r) {
+    const e = r;
+    return f({ prefix: e.prefix }), p(n, e.prefix), (o, s) => i(o.$slots, "default");
+  }
+});
+export {
+  c as default
+};

package/PorscheDesignSystemProvider.vue2.js

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

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

@@ -0,0 +1,90 @@
+import type { AccordionChangeEvent, BreakpointCustomizable, AccordionSize, HeadlineTag, ThemeExtendedElectric } from '../types';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * Displays the Accordion as compact version with thinner border and smaller paddings.
+     */
+    compact?: boolean | undefined;
+    /**
+     * Defines the heading used in accordion.
+     */
+    heading?: string | undefined;
+    /**
+     * Defines if accordion is open.
+     */
+    open?: boolean | undefined;
+    /**
+     * The text size.
+     */
+    size?: BreakpointCustomizable<"small" | "medium"> | undefined;
+    /**
+     * Sets a headline tag, so it fits correctly within the outline of the page.
+     */
+    tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+    /**
+     * Adapts the color when used on dark background.
+     */
+    theme?: "light" | "dark" | "light-electric" | undefined;
+}>, {
+    size: string;
+    tag: string;
+    theme: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    accordionChange: (value: AccordionChangeEvent) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * Displays the Accordion as compact version with thinner border and smaller paddings.
+     */
+    compact?: boolean | undefined;
+    /**
+     * Defines the heading used in accordion.
+     */
+    heading?: string | undefined;
+    /**
+     * Defines if accordion is open.
+     */
+    open?: boolean | undefined;
+    /**
+     * The text size.
+     */
+    size?: BreakpointCustomizable<"small" | "medium"> | undefined;
+    /**
+     * Sets a headline tag, so it fits correctly within the outline of the page.
+     */
+    tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+    /**
+     * Adapts the color when used on dark background.
+     */
+    theme?: "light" | "dark" | "light-electric" | undefined;
+}>, {
+    size: string;
+    tag: string;
+    theme: string;
+}>>> & {
+    onAccordionChange?: ((value: AccordionChangeEvent) => any) | undefined;
+}, {
+    size: BreakpointCustomizable<AccordionSize>;
+    tag: HeadlineTag;
+    theme: ThemeExtendedElectric;
+}>, {
+    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/AccordionWrapper.vue.js

@@ -0,0 +1,33 @@
+import { defineComponent as c, ref as l, onMounted as d, onUpdated as s, openBlock as f, createBlock as m, resolveDynamicComponent as i, unref as u, withCtx as g, renderSlot as h } from "vue";
+import { getPrefixedTagName as C, syncProperties as n, addEventListenerToElementRef as _ } from "../../utils.js";
+const k = /* @__PURE__ */ c({
+  __name: "AccordionWrapper",
+  props: {
+    compact: { type: Boolean },
+    heading: null,
+    open: { type: Boolean },
+    size: { default: "small" },
+    tag: { default: "h2" },
+    theme: { default: "light" }
+  },
+  emits: ["accordionChange"],
+  setup(t, { emit: a }) {
+    const o = t, r = C("p-accordion"), e = l();
+    return d(() => {
+      n(e.value, o), _(e.value, "accordionChange", a);
+    }), s(() => {
+      n(e.value, o);
+    }), (p, v) => (f(), m(i(u(r)), {
+      ref_key: "pdsComponentRef",
+      ref: e
+    }, {
+      default: g(() => [
+        h(p.$slots, "default")
+      ]),
+      _: 3
+    }, 512));
+  }
+});
+export {
+  k as default
+};

package/lib/components/AccordionWrapper.vue2.js

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

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

@@ -0,0 +1,71 @@
+import type { BannerState, Theme, BannerWidth } from '../types';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    persistent?: boolean | undefined;
+    /**
+     * State of the banner.
+     */
+    state?: "warning" | "error" | "neutral" | undefined;
+    /**
+     * Adapts the banner color depending on the theme.
+     */
+    theme?: "light" | "dark" | undefined;
+    /**
+     * Defines the width of the banner corresponding to the `content-wrapper` dimensions
+     */
+    width?: "basic" | "extended" | "fluid" | undefined;
+}>, {
+    persistent: boolean;
+    state: string;
+    theme: string;
+    width: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    dismiss: (value?: void | undefined) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    persistent?: boolean | undefined;
+    /**
+     * State of the banner.
+     */
+    state?: "warning" | "error" | "neutral" | undefined;
+    /**
+     * Adapts the banner color depending on the theme.
+     */
+    theme?: "light" | "dark" | undefined;
+    /**
+     * Defines the width of the banner corresponding to the `content-wrapper` dimensions
+     */
+    width?: "basic" | "extended" | "fluid" | undefined;
+}>, {
+    persistent: boolean;
+    state: string;
+    theme: string;
+    width: string;
+}>>> & {
+    onDismiss?: ((value?: void | undefined) => any) | undefined;
+}, {
+    theme: Theme;
+    persistent: boolean;
+    state: BannerState;
+    width: BannerWidth;
+}>, {
+    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/BannerWrapper.vue.js

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

package/lib/components/BannerWrapper.vue2.js

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

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

@@ -0,0 +1,46 @@
+import type { ButtonGroupDirection } from '../types';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * Defines the direction of the main and cross axis. 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’. You always need to provide a base value when using breakpoints.
+     */
+    direction?: ButtonGroupDirection | undefined;
+}>, {
+    direction: () => {
+        base: string;
+        xs: 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<{
+    /**
+     * Defines the direction of the main and cross axis. 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’. You always need to provide a base value when using breakpoints.
+     */
+    direction?: ButtonGroupDirection | undefined;
+}>, {
+    direction: () => {
+        base: string;
+        xs: string;
+    };
+}>>>, {
+    direction: ButtonGroupDirection;
+}>, {
+    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/ButtonGroupWrapper.vue.js

@@ -0,0 +1,27 @@
+import { defineComponent as a, ref as s, onMounted as u, onUpdated as f, openBlock as c, createBlock as m, resolveDynamicComponent as d, unref as l, withCtx as i, renderSlot as _ } from "vue";
+import { getPrefixedTagName as C, syncProperties as t } from "../../utils.js";
+const k = /* @__PURE__ */ a({
+  __name: "ButtonGroupWrapper",
+  props: {
+    direction: { default: () => ({ base: "column", xs: "row" }) }
+  },
+  setup(n) {
+    const o = n, r = C("p-button-group"), e = s();
+    return u(() => {
+      t(e.value, o);
+    }), f(() => {
+      t(e.value, o);
+    }), (p, g) => (c(), m(d(l(r)), {
+      ref_key: "pdsComponentRef",
+      ref: e
+    }, {
+      default: i(() => [
+        _(p.$slots, "default")
+      ]),
+      _: 3
+    }, 512));
+  }
+});
+export {
+  k as default
+};

package/lib/components/ButtonGroupWrapper.vue2.js

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

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

@@ -0,0 +1,179 @@
+import type { AlignLabel, SelectedAriaAttributes, BreakpointCustomizable, LinkButtonPureIconName, TextSize, ThemeExtendedElectricDark, ButtonType, TextWeight } from '../types';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * Display button in active state.
+     */
+    active?: boolean | undefined;
+    /**
+     * Aligns the label.
+     */
+    alignLabel?: AlignLabel | undefined;
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<"aria-label" | "aria-expanded" | "aria-pressed" | "aria-haspopup"> | undefined;
+    /**
+     * Disables the button. No events will be triggered while disabled state is active.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Show or hide label. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean> | undefined;
+    /**
+     * The icon shown.
+     */
+    icon?: LinkButtonPureIconName | undefined;
+    /**
+     * A URL path to a custom icon.
+     */
+    iconSource?: string | undefined;
+    /**
+     * Disables the button and shows a loading indicator. No events will be triggered while loading state is active.
+     */
+    loading?: boolean | undefined;
+    /**
+     * Size of the button.
+     */
+    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;
+    /**
+     * To remove the element from tab order.
+     * @deprecated since v2.8.0, use `tabindex="-1"` instead
+     */
+    tabbable?: boolean | undefined;
+    /**
+     * Adapts the button color depending on the theme.
+     */
+    theme?: "light" | "dark" | "light-electric" | "dark-electric" | undefined;
+    /**
+     * Specifies the type of the button.
+     */
+    type?: "reset" | "button" | "submit" | undefined;
+    /**
+     * The weight of the text (only has effect with visible label).
+     */
+    weight?: "thin" | "regular" | "semibold" | "bold" | undefined;
+}>, {
+    active: boolean;
+    alignLabel: string;
+    disabled: boolean;
+    hideLabel: boolean;
+    icon: string;
+    loading: boolean;
+    size: string;
+    stretch: boolean;
+    tabbable: boolean;
+    theme: string;
+    type: 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 button in active state.
+     */
+    active?: boolean | undefined;
+    /**
+     * Aligns the label.
+     */
+    alignLabel?: AlignLabel | undefined;
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<"aria-label" | "aria-expanded" | "aria-pressed" | "aria-haspopup"> | undefined;
+    /**
+     * Disables the button. No events will be triggered while disabled state is active.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Show or hide label. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean> | undefined;
+    /**
+     * The icon shown.
+     */
+    icon?: LinkButtonPureIconName | undefined;
+    /**
+     * A URL path to a custom icon.
+     */
+    iconSource?: string | undefined;
+    /**
+     * Disables the button and shows a loading indicator. No events will be triggered while loading state is active.
+     */
+    loading?: boolean | undefined;
+    /**
+     * Size of the button.
+     */
+    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;
+    /**
+     * To remove the element from tab order.
+     * @deprecated since v2.8.0, use `tabindex="-1"` instead
+     */
+    tabbable?: boolean | undefined;
+    /**
+     * Adapts the button color depending on the theme.
+     */
+    theme?: "light" | "dark" | "light-electric" | "dark-electric" | undefined;
+    /**
+     * Specifies the type of the button.
+     */
+    type?: "reset" | "button" | "submit" | undefined;
+    /**
+     * The weight of the text (only has effect with visible label).
+     */
+    weight?: "thin" | "regular" | "semibold" | "bold" | undefined;
+}>, {
+    active: boolean;
+    alignLabel: string;
+    disabled: boolean;
+    hideLabel: boolean;
+    icon: string;
+    loading: boolean;
+    size: string;
+    stretch: boolean;
+    tabbable: boolean;
+    theme: string;
+    type: string;
+    weight: string;
+}>>>, {
+    weight: TextWeight;
+    stretch: BreakpointCustomizable<boolean>;
+    size: BreakpointCustomizable<TextSize>;
+    theme: ThemeExtendedElectricDark;
+    type: ButtonType;
+    active: boolean;
+    alignLabel: AlignLabel;
+    disabled: boolean;
+    hideLabel: BreakpointCustomizable<boolean>;
+    icon: LinkButtonPureIconName;
+    loading: boolean;
+    tabbable: 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/ButtonPureWrapper.vue.js

@@ -0,0 +1,40 @@
+import { defineComponent as r, ref as u, onMounted as f, onUpdated as d, 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.js";
+const _ = /* @__PURE__ */ r({
+  __name: "ButtonPureWrapper",
+  props: {
+    active: { type: Boolean, default: !1 },
+    alignLabel: { default: "right" },
+    aria: null,
+    disabled: { type: Boolean, default: !1 },
+    hideLabel: { default: !1 },
+    icon: { default: "arrow-head-right" },
+    iconSource: null,
+    loading: { type: Boolean, default: !1 },
+    size: { default: "small" },
+    stretch: { default: !1 },
+    tabbable: { type: Boolean, default: !0 },
+    theme: { default: "light" },
+    type: { default: "submit" },
+    weight: { default: "regular" }
+  },
+  setup(o) {
+    const t = o, l = h("p-button-pure"), e = u();
+    return f(() => {
+      a(e.value, t);
+    }), d(() => {
+      a(e.value, t);
+    }), (n, b) => (p(), s(i(c(l)), {
+      ref_key: "pdsComponentRef",
+      ref: e
+    }, {
+      default: m(() => [
+        g(n.$slots, "default")
+      ]),
+      _: 3
+    }, 512));
+  }
+});
+export {
+  _ as default
+};

package/lib/components/ButtonPureWrapper.vue2.js

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