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

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

@@ -1,77 +1,66 @@
-import type { SelectedAriaAttributes, BreakpointCustomizable } from '../types';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    type: {
-        type: import("vue").PropType<"button" | "reset" | "submit">;
-        default: string;
-    };
-    theme: {
-        type: import("vue").PropType<"light" | "dark" | "auto">;
-        default: string;
-    };
-    aria: {
-        type: import("vue").PropType<SelectedAriaAttributes<"aria-label" | "aria-expanded" | "aria-pressed" | "aria-haspopup">>;
-    };
-    disabled: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    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>;
-    };
-    loading: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    variant: {
-        type: import("vue").PropType<"primary" | "secondary" | "tertiary">;
-        default: string;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    type: {
-        type: import("vue").PropType<"button" | "reset" | "submit">;
-        default: string;
-    };
-    theme: {
-        type: import("vue").PropType<"light" | "dark" | "auto">;
-        default: string;
-    };
-    aria: {
-        type: import("vue").PropType<SelectedAriaAttributes<"aria-label" | "aria-expanded" | "aria-pressed" | "aria-haspopup">>;
-    };
-    disabled: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    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>;
-    };
-    loading: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    variant: {
-        type: import("vue").PropType<"primary" | "secondary" | "tertiary">;
-        default: string;
-    };
-}>>, {
+import type { SelectedAriaAttributes, ButtonAriaAttribute, BreakpointCustomizable, ButtonIcon, Theme, ButtonType, ButtonVariant } from '../types';
+type PButtonProps = {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<ButtonAriaAttribute>;
+    /**
+     * Disables the button. No events will be triggered while disabled state is active.
+     */
+    disabled?: boolean;
+    /**
+     * Show or hide label. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * The icon shown. By choosing 'none', no icon is displayed.
+     */
+    icon?: ButtonIcon;
+    /**
+     * A URL path to a custom icon.
+     */
+    iconSource?: string;
+    /**
+     * Disables the button and shows a loading indicator. No events will be triggered while loading state is active.
+     */
+    loading?: boolean;
+    /**
+     * The name of the button, submitted as a pair with the button's value as part of the form data, when that button is used to submit the form.
+     */
+    name?: string;
+    /**
+     * Adapts the button color depending on the theme.
+     */
+    theme?: Theme;
+    /**
+     * Specifies the type of the button.
+     */
+    type?: ButtonType;
+    /**
+     * Defines the value associated with the button's name when it's submitted with the form data. This value is passed to the server in params when the form is submitted using this button.
+     */
+    value?: string;
+    /**
+     * The style variant of the button.
+     */
+    variant?: ButtonVariant;
+};
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PButtonProps>, {
+    disabled: boolean;
+    hideLabel: boolean;
+    icon: string;
+    loading: boolean;
+    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<PButtonProps>, {
+    disabled: boolean;
+    hideLabel: boolean;
+    icon: string;
+    loading: boolean;
+    type: string;
+    variant: string;
+}>>>, {
     type: "button" | "reset" | "submit";
-    theme: "light" | "dark" | "auto";
     disabled: boolean;
     hideLabel: BreakpointCustomizable<boolean>;
     icon: import("../types").LinkButtonIconName;
@@ -81,6 +70,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/ButtonWrapper.vue.mjs

@@ -1,6 +1,6 @@
-import { defineComponent as l, 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 y } from "vue";
-import { getPrefixedTagName as _, syncProperties as o } from "../../utils.mjs";
-const h = /* @__PURE__ */ l({
+import { defineComponent as f, ref as l, inject as m, onMounted as c, onUpdated as u, watch as d, openBlock as i, createBlock as h, resolveDynamicComponent as y, unref as _, withCtx as C, renderSlot as b } from "vue";
+import { usePrefix as B, themeInjectionKey as v, syncProperties as r } from "../../utils.mjs";
+const P = /* @__PURE__ */ f({
   __name: "ButtonWrapper",
   props: {
     aria: {},
@@ -9,27 +9,27 @@ const h = /* @__PURE__ */ l({
     icon: { default: "none" },
     iconSource: {},
     loading: { type: Boolean, default: !1 },
-    theme: { default: "light" },
+    name: {},
+    theme: {},
     type: { default: "submit" },
+    value: {},
     variant: { default: "primary" }
   },
-  setup(n) {
-    const t = n, a = _("p-button"), e = p();
-    return f(() => {
-      o(e.value, t);
-    }), d(() => {
-      o(e.value, t);
-    }), (r, C) => (s(), u(i(m(a)), {
+  setup(p) {
+    const s = B("p-button"), e = p, t = l(), n = m(v), a = () => r(t, { ...e, theme: e.theme || n.value });
+    return c(a), u(a), d(n, (o) => {
+      r(t, { theme: e.theme || o });
+    }), (o, k) => (i(), h(y(_(s)), {
       ref_key: "pdsComponentRef",
-      ref: e
+      ref: t
     }, {
-      default: c(() => [
-        y(r.$slots, "default")
+      default: C(() => [
+        b(o.$slots, "default")
       ]),
       _: 3
     }, 512));
   }
 });
 export {
-  h as default
+  P as default
 };

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

@@ -1,106 +1,80 @@
-import type { BreakpointCustomizable, CarouselInternationalization, CarouselUpdateEvent } from '../types';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    heading: {
-        type: import("vue").PropType<string>;
-    };
-    theme: {
-        type: import("vue").PropType<"light" | "dark" | "auto">;
-        default: string;
-    };
-    description: {
-        type: import("vue").PropType<string>;
-    };
-    width: {
-        type: import("vue").PropType<"extended" | "basic">;
-        default: string;
-    };
-    activeSlideIndex: {
-        type: import("vue").PropType<number>;
-        default: number;
-    };
-    alignHeader: {
-        type: import("vue").PropType<"center" | "start" | "left">;
-        default: string;
-    };
-    disablePagination: {
-        type: import("vue").PropType<BreakpointCustomizable<boolean>>;
-    };
-    intl: {
-        type: import("vue").PropType<CarouselInternationalization>;
-    };
-    pagination: {
-        type: import("vue").PropType<BreakpointCustomizable<boolean>>;
-        default: boolean;
-    };
-    rewind: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    skipLinkTarget: {
-        type: import("vue").PropType<string>;
-    };
-    slidesPerPage: {
-        type: import("vue").PropType<BreakpointCustomizable<number>>;
-        default: number;
-    };
-    wrapContent: {
-        type: import("vue").PropType<boolean>;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+import type { CarouselAlignHeader, BreakpointCustomizable, CarouselInternationalization, CarouselUpdateEvent, Theme, CarouselWidth } from '../types';
+type PCarouselProps = {
+    /**
+     * Defines which slide to be active (zero-based numbering).
+     */
+    activeSlideIndex?: number;
+    /**
+     * Alignment of heading and description
+     */
+    alignHeader?: CarouselAlignHeader;
+    /**
+     * Defines the description used in the carousel.
+     */
+    description?: string;
+    /**
+     * @deprecated since v3.0.0, will be removed with next major release, use `pagination` instead. If true, the carousel will not show pagination bullets at the bottom.
+     */
+    disablePagination?: BreakpointCustomizable<boolean>;
+    /**
+     * Defines the heading used in the carousel.
+     */
+    heading?: string;
+    /**
+     * Override the default wordings that are used for aria-labels on the next/prev buttons and pagination.
+     */
+    intl?: CarouselInternationalization;
+    /**
+     * If false, the carousel will not show pagination bullets at the bottom.
+     */
+    pagination?: BreakpointCustomizable<boolean>;
+    /**
+     * Whether the slides should rewind from last to first slide and vice versa.
+     */
+    rewind?: boolean;
+    /**
+     * Defines target of skip link (to skip carousel entries).
+     */
+    skipLinkTarget?: string;
+    /**
+     * Sets the amount of slides visible at the same time. Can be set to `auto` if you want to define different widths per slide via CSS.
+     */
+    slidesPerPage?: BreakpointCustomizable<number> | "auto";
+    /**
+     * Adapts the color when used on dark background.
+     */
+    theme?: Theme;
+    /**
+     * Defines the outer spacings between the carousel and the left and right screen sides.
+     */
+    width?: CarouselWidth;
+    /**
+     * Has no effect anymore
+     * @deprecated since v3.0.0, will be removed with next major release
+     */
+    wrapContent?: boolean;
+};
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PCarouselProps>, {
+    activeSlideIndex: number;
+    alignHeader: string;
+    pagination: boolean;
+    rewind: boolean;
+    slidesPerPage: number;
+    width: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     carouselChange: (value: CarouselUpdateEvent) => void;
     update: (value: CarouselUpdateEvent) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    heading: {
-        type: import("vue").PropType<string>;
-    };
-    theme: {
-        type: import("vue").PropType<"light" | "dark" | "auto">;
-        default: string;
-    };
-    description: {
-        type: import("vue").PropType<string>;
-    };
-    width: {
-        type: import("vue").PropType<"extended" | "basic">;
-        default: string;
-    };
-    activeSlideIndex: {
-        type: import("vue").PropType<number>;
-        default: number;
-    };
-    alignHeader: {
-        type: import("vue").PropType<"center" | "start" | "left">;
-        default: string;
-    };
-    disablePagination: {
-        type: import("vue").PropType<BreakpointCustomizable<boolean>>;
-    };
-    intl: {
-        type: import("vue").PropType<CarouselInternationalization>;
-    };
-    pagination: {
-        type: import("vue").PropType<BreakpointCustomizable<boolean>>;
-        default: boolean;
-    };
-    rewind: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    skipLinkTarget: {
-        type: import("vue").PropType<string>;
-    };
-    slidesPerPage: {
-        type: import("vue").PropType<BreakpointCustomizable<number>>;
-        default: number;
-    };
-    wrapContent: {
-        type: import("vue").PropType<boolean>;
-    };
-}>> & {
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PCarouselProps>, {
+    activeSlideIndex: number;
+    alignHeader: string;
+    pagination: boolean;
+    rewind: boolean;
+    slidesPerPage: number;
+    width: string;
+}>>> & {
     onUpdate?: ((value: CarouselUpdateEvent) => any) | undefined;
     onCarouselChange?: ((value: CarouselUpdateEvent) => any) | undefined;
 }, {
-    theme: "light" | "dark" | "auto";
     width: "extended" | "basic";
     activeSlideIndex: number;
     alignHeader: "center" | "start" | "left";
@@ -111,6 +85,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/CarouselWrapper.vue.mjs

@@ -1,6 +1,6 @@
-import { defineComponent as p, ref as s, onMounted as i, onUpdated as u, openBlock as f, createBlock as c, resolveDynamicComponent as m, unref as g, withCtx as C, renderSlot as h } from "vue";
-import { getPrefixedTagName as v, syncProperties as n, addEventListenerToElementRef as o } from "../../utils.mjs";
-const y = /* @__PURE__ */ p({
+import { defineComponent as c, ref as u, inject as m, onMounted as f, onUpdated as h, watch as C, openBlock as g, createBlock as y, resolveDynamicComponent as _, unref as w, withCtx as P, renderSlot as k } from "vue";
+import { usePrefix as v, themeInjectionKey as x, addEventListenerToElementRef as s, syncProperties as i } from "../../utils.mjs";
+const T = /* @__PURE__ */ c({
   __name: "CarouselWrapper",
   props: {
     activeSlideIndex: { default: 0 },
@@ -13,28 +13,28 @@ const y = /* @__PURE__ */ p({
     rewind: { type: Boolean, default: !0 },
     skipLinkTarget: {},
     slidesPerPage: { default: 1 },
-    theme: { default: "light" },
+    theme: {},
     width: { default: "basic" },
     wrapContent: { type: Boolean }
   },
   emits: ["carouselChange", "update"],
-  setup(r, { emit: t }) {
-    const a = r, l = v("p-carousel"), e = s();
-    return i(() => {
-      n(e.value, a), o(e.value, "carouselChange", t), o(e.value, "update", t);
-    }), u(() => {
-      n(e.value, a);
-    }), (d, _) => (f(), c(m(g(l)), {
+  setup(p, { emit: d }) {
+    const l = v("p-carousel"), t = p, e = u(), o = d, a = m(x), r = () => i(e, { ...t, theme: t.theme || a.value });
+    return f(() => {
+      r(), s(e, "carouselChange", o), s(e, "update", o);
+    }), h(r), C(a, (n) => {
+      i(e, { theme: t.theme || n });
+    }), (n, B) => (g(), y(_(w(l)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
-      default: C(() => [
-        h(d.$slots, "default")
+      default: P(() => [
+        k(n.$slots, "default")
       ]),
       _: 3
     }, 512));
   }
 });
 export {
-  y as default
+  T as default
 };

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

@@ -1,57 +1,44 @@
-import type { BreakpointCustomizable } from '../types';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    label: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
-    theme: {
-        type: import("vue").PropType<"light" | "dark" | "auto">;
-        default: string;
-    };
-    state: {
-        type: import("vue").PropType<"none" | "success" | "error">;
-        default: string;
-    };
-    hideLabel: {
-        type: import("vue").PropType<BreakpointCustomizable<boolean>>;
-        default: boolean;
-    };
-    loading: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    message: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    label: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
-    theme: {
-        type: import("vue").PropType<"light" | "dark" | "auto">;
-        default: string;
-    };
-    state: {
-        type: import("vue").PropType<"none" | "success" | "error">;
-        default: string;
-    };
-    hideLabel: {
-        type: import("vue").PropType<BreakpointCustomizable<boolean>>;
-        default: boolean;
-    };
-    loading: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    message: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
-}>>, {
+import type { BreakpointCustomizable, CheckboxWrapperState, Theme } from '../types';
+type PCheckboxWrapperProps = {
+    /**
+     * Show or hide label. For better accessibility it's recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * The label text.
+     */
+    label?: string;
+    /**
+     * __Experimental__: Disables the checkbox and shows a loading indicator.
+     */
+    loading?: boolean;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string;
+    /**
+     * The validation state.
+     */
+    state?: CheckboxWrapperState;
+    /**
+     * Adapts the color depending on the theme.
+     */
+    theme?: Theme;
+};
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PCheckboxWrapperProps>, {
+    hideLabel: boolean;
+    label: string;
+    loading: boolean;
+    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<PCheckboxWrapperProps>, {
+    hideLabel: boolean;
+    label: string;
+    loading: boolean;
+    message: string;
+    state: string;
+}>>>, {
     label: string;
-    theme: "light" | "dark" | "auto";
     state: "none" | "success" | "error";
     hideLabel: BreakpointCustomizable<boolean>;
     loading: boolean;
@@ -60,6 +47,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/CheckboxWrapperWrapper.vue.mjs

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