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

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

@@ -0,0 +1,135 @@
+import type { SelectedAriaAttributes, BreakpointCustomizable, IconName, ThemeExtendedElectric, ButtonType, ButtonVariant } from '../types';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * 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?: IconName | 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;
+    /**
+     * 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" | undefined;
+    /**
+     * Specifies the type of the button.
+     */
+    type?: "reset" | "button" | "submit" | undefined;
+    /**
+     * The style variant of the button.
+     */
+    variant?: "primary" | "secondary" | "tertiary" | undefined;
+}>, {
+    disabled: boolean;
+    hideLabel: boolean;
+    icon: string;
+    loading: boolean;
+    tabbable: boolean;
+    theme: string;
+    type: 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" | "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?: IconName | 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;
+    /**
+     * 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" | undefined;
+    /**
+     * Specifies the type of the button.
+     */
+    type?: "reset" | "button" | "submit" | undefined;
+    /**
+     * The style variant of the button.
+     */
+    variant?: "primary" | "secondary" | "tertiary" | undefined;
+}>, {
+    disabled: boolean;
+    hideLabel: boolean;
+    icon: string;
+    loading: boolean;
+    tabbable: boolean;
+    theme: string;
+    type: string;
+    variant: string;
+}>>>, {
+    theme: ThemeExtendedElectric;
+    type: ButtonType;
+    disabled: boolean;
+    hideLabel: BreakpointCustomizable<boolean>;
+    icon: IconName;
+    loading: boolean;
+    tabbable: boolean;
+    variant: ButtonVariant;
+}>, {
+    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/ButtonWrapper.vue.js

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

package/lib/components/ButtonWrapper.vue2.js

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

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

@@ -0,0 +1,112 @@
+import type { BreakpointCustomizable, CarouselChangeEvent, Theme } from '../types';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * Defines the description used in the carousel.
+     */
+    description?: string | undefined;
+    /**
+     * If true, the carousel will not show pagination bullets at the bottom.
+     */
+    disablePagination?: BreakpointCustomizable<boolean> | undefined;
+    /**
+     * Defines the heading used in the carousel.
+     */
+    heading?: string | undefined;
+    /**
+     * Override the default wordings that are used for aria-labels on the next/prev buttons and pagination.
+     */
+    intl?: Partial<Record<"prev" | "next" | "first" | "last" | "slideLabel" | "slide", string>> | undefined;
+    /**
+     * Whether the slides should rewind from last to first slide and vice versa.
+     */
+    rewind?: boolean | undefined;
+    /**
+     * Sets the amount of slides visible at the same time.
+     */
+    slidesPerPage?: BreakpointCustomizable<number> | undefined;
+    /**
+     * Adapts the color when used on dark background.
+     */
+    theme?: "light" | "dark" | undefined;
+    /**
+     * Whether the content should receive a padding to the sides to be aligned on the grid when used full width and not within content-wrapper.
+     */
+    wrapContent?: boolean | undefined;
+}>, {
+    disablePagination: boolean;
+    intl: () => {};
+    rewind: boolean;
+    slidesPerPage: number;
+    theme: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    carouselChange: (value: CarouselChangeEvent) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * Defines the description used in the carousel.
+     */
+    description?: string | undefined;
+    /**
+     * If true, the carousel will not show pagination bullets at the bottom.
+     */
+    disablePagination?: BreakpointCustomizable<boolean> | undefined;
+    /**
+     * Defines the heading used in the carousel.
+     */
+    heading?: string | undefined;
+    /**
+     * Override the default wordings that are used for aria-labels on the next/prev buttons and pagination.
+     */
+    intl?: Partial<Record<"prev" | "next" | "first" | "last" | "slideLabel" | "slide", string>> | undefined;
+    /**
+     * Whether the slides should rewind from last to first slide and vice versa.
+     */
+    rewind?: boolean | undefined;
+    /**
+     * Sets the amount of slides visible at the same time.
+     */
+    slidesPerPage?: BreakpointCustomizable<number> | undefined;
+    /**
+     * Adapts the color when used on dark background.
+     */
+    theme?: "light" | "dark" | undefined;
+    /**
+     * Whether the content should receive a padding to the sides to be aligned on the grid when used full width and not within content-wrapper.
+     */
+    wrapContent?: boolean | undefined;
+}>, {
+    disablePagination: boolean;
+    intl: () => {};
+    rewind: boolean;
+    slidesPerPage: number;
+    theme: string;
+}>>> & {
+    onCarouselChange?: ((value: CarouselChangeEvent) => any) | undefined;
+}, {
+    theme: Theme;
+    disablePagination: BreakpointCustomizable<boolean>;
+    intl: Partial<Record<"prev" | "next" | "first" | "last" | "slideLabel" | "slide", string>>;
+    rewind: boolean;
+    slidesPerPage: BreakpointCustomizable<number>;
+}>, {
+    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/CarouselWrapper.vue.js

@@ -0,0 +1,35 @@
+import { defineComponent as s, ref as p, onMounted as d, onUpdated as u, openBlock as f, createBlock as i, resolveDynamicComponent as c, unref as m, withCtx as C, renderSlot as g } from "vue";
+import { getPrefixedTagName as h, syncProperties as n, addEventListenerToElementRef as _ } from "../../utils.js";
+const w = /* @__PURE__ */ s({
+  __name: "CarouselWrapper",
+  props: {
+    description: null,
+    disablePagination: { default: !1 },
+    heading: null,
+    intl: { default: () => ({}) },
+    rewind: { type: Boolean, default: !0 },
+    slidesPerPage: { default: 1 },
+    theme: { default: "light" },
+    wrapContent: { type: Boolean }
+  },
+  emits: ["carouselChange"],
+  setup(o, { emit: a }) {
+    const t = o, r = h("p-carousel"), e = p();
+    return d(() => {
+      n(e.value, t), _(e.value, "carouselChange", a);
+    }), u(() => {
+      n(e.value, t);
+    }), (l, v) => (f(), i(c(m(r)), {
+      ref_key: "pdsComponentRef",
+      ref: e
+    }, {
+      default: C(() => [
+        g(l.$slots, "default")
+      ]),
+      _: 3
+    }, 512));
+  }
+});
+export {
+  w as default
+};

package/lib/components/CarouselWrapper.vue2.js

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

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

@@ -0,0 +1,73 @@
+import type { BreakpointCustomizable, FormState } from '../types';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * Show or hide label. For better accessibility it's recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean> | undefined;
+    /**
+     * The label text.
+     */
+    label?: string | undefined;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string | undefined;
+    /**
+     * The validation state.
+     */
+    state?: "success" | "none" | "error" | undefined;
+}>, {
+    hideLabel: boolean;
+    label: string;
+    message: string;
+    state: 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. For better accessibility it's recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean> | undefined;
+    /**
+     * The label text.
+     */
+    label?: string | undefined;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string | undefined;
+    /**
+     * The validation state.
+     */
+    state?: "success" | "none" | "error" | undefined;
+}>, {
+    hideLabel: boolean;
+    label: string;
+    message: string;
+    state: string;
+}>>>, {
+    label: string;
+    state: FormState;
+    hideLabel: BreakpointCustomizable<boolean>;
+    message: 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/lib/components/CheckboxWrapperWrapper.vue.js

@@ -0,0 +1,30 @@
+import { defineComponent as p, ref as s, onMounted as f, onUpdated as l, openBlock as d, createBlock as c, resolveDynamicComponent as m, unref as u, withCtx as i, renderSlot as C } from "vue";
+import { getPrefixedTagName as _, syncProperties as t } from "../../utils.js";
+const x = /* @__PURE__ */ p({
+  __name: "CheckboxWrapperWrapper",
+  props: {
+    hideLabel: { default: !1 },
+    label: { default: "" },
+    message: { default: "" },
+    state: { default: "none" }
+  },
+  setup(n) {
+    const o = n, r = _("p-checkbox-wrapper"), e = s();
+    return f(() => {
+      t(e.value, o);
+    }), l(() => {
+      t(e.value, o);
+    }), (a, b) => (d(), c(m(u(r)), {
+      ref_key: "pdsComponentRef",
+      ref: e
+    }, {
+      default: i(() => [
+        C(a.$slots, "default")
+      ]),
+      _: 3
+    }, 512));
+  }
+});
+export {
+  x as default
+};

package/lib/components/CheckboxWrapperWrapper.vue2.js

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

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

@@ -0,0 +1,62 @@
+import type { ContentWrapperBackgroundColor, Theme, ContentWrapperWidth } from '../types';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * Defines the background color.
+     */
+    backgroundColor?: "default" | "transparent" | undefined;
+    /**
+     * Adapts the color when used on dark background.
+     */
+    theme?: "light" | "dark" | undefined;
+    /**
+     * Defines the outer spacings between the content area and the left and right screen sides, as well as centering its content and setting a max-width.
+     */
+    width?: "basic" | "extended" | "fluid" | undefined;
+}>, {
+    backgroundColor: string;
+    theme: string;
+    width: 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 background color.
+     */
+    backgroundColor?: "default" | "transparent" | undefined;
+    /**
+     * Adapts the color when used on dark background.
+     */
+    theme?: "light" | "dark" | undefined;
+    /**
+     * Defines the outer spacings between the content area and the left and right screen sides, as well as centering its content and setting a max-width.
+     */
+    width?: "basic" | "extended" | "fluid" | undefined;
+}>, {
+    backgroundColor: string;
+    theme: string;
+    width: string;
+}>>>, {
+    theme: Theme;
+    width: ContentWrapperWidth;
+    backgroundColor: ContentWrapperBackgroundColor;
+}>, {
+    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/ContentWrapperWrapper.vue.js

@@ -0,0 +1,29 @@
+import { defineComponent as a, ref as s, onMounted as f, onUpdated as d, openBlock as c, createBlock as l, resolveDynamicComponent as m, unref as u, withCtx as i, renderSlot as C } from "vue";
+import { getPrefixedTagName as _, syncProperties as o } from "../../utils.js";
+const w = /* @__PURE__ */ a({
+  __name: "ContentWrapperWrapper",
+  props: {
+    backgroundColor: { default: "transparent" },
+    theme: { default: "light" },
+    width: { default: "basic" }
+  },
+  setup(n) {
+    const t = n, r = _("p-content-wrapper"), e = s();
+    return f(() => {
+      o(e.value, t);
+    }), d(() => {
+      o(e.value, t);
+    }), (p, g) => (c(), l(m(u(r)), {
+      ref_key: "pdsComponentRef",
+      ref: e
+    }, {
+      default: i(() => [
+        C(p.$slots, "default")
+      ]),
+      _: 3
+    }, 512));
+  }
+});
+export {
+  w as default
+};

package/lib/components/ContentWrapperWrapper.vue2.js

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

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

@@ -0,0 +1,55 @@
+import type { DividerColor, DividerOrientation, Theme } from '../types';
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * Defines color depending on theme.
+     */
+    color?: "neutral-contrast-high" | "neutral-contrast-medium" | "neutral-contrast-low" | undefined;
+    /**
+     * Defines orientation.
+     */
+    orientation?: DividerOrientation | undefined;
+    /**
+     * Adapts color depending on theme.
+     */
+    theme?: "light" | "dark" | undefined;
+}>, {
+    color: string;
+    orientation: 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<{
+    /**
+     * Defines color depending on theme.
+     */
+    color?: "neutral-contrast-high" | "neutral-contrast-medium" | "neutral-contrast-low" | undefined;
+    /**
+     * Defines orientation.
+     */
+    orientation?: DividerOrientation | undefined;
+    /**
+     * Adapts color depending on theme.
+     */
+    theme?: "light" | "dark" | undefined;
+}>, {
+    color: string;
+    orientation: string;
+    theme: string;
+}>>>, {
+    theme: Theme;
+    color: DividerColor;
+    orientation: DividerOrientation;
+}>;
+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/DividerWrapper.vue.js

@@ -0,0 +1,24 @@
+import { defineComponent as a, ref as p, onMounted as l, onUpdated as c, openBlock as f, createBlock as i, resolveDynamicComponent as s, unref as d } from "vue";
+import { getPrefixedTagName as m, syncProperties as t } from "../../utils.js";
+const g = /* @__PURE__ */ a({
+  __name: "DividerWrapper",
+  props: {
+    color: { default: "neutral-contrast-low" },
+    orientation: { default: "horizontal" },
+    theme: { default: "light" }
+  },
+  setup(n) {
+    const o = n, r = m("p-divider"), e = p();
+    return l(() => {
+      t(e.value, o);
+    }), c(() => {
+      t(e.value, o);
+    }), (u, _) => (f(), i(s(d(r)), {
+      ref_key: "pdsComponentRef",
+      ref: e
+    }, null, 512));
+  }
+});
+export {
+  g as default
+};

package/lib/components/DividerWrapper.vue2.js

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