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

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

@@ -1,112 +1,94 @@
-import type { BreakpointCustomizable, SelectedAriaAttributes } from '../types';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    weight: {
-        type: import("vue").PropType<"regular" | "semi-bold" | "bold" | "thin" | "semibold">;
-        default: string;
-    };
-    stretch: {
-        type: import("vue").PropType<BreakpointCustomizable<boolean>>;
-        default: boolean;
-    };
-    type: {
-        type: import("vue").PropType<"button" | "reset" | "submit">;
-        default: string;
-    };
-    size: {
-        type: import("vue").PropType<BreakpointCustomizable<"inherit" | "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large">>;
-        default: string;
-    };
-    theme: {
-        type: import("vue").PropType<"light" | "dark" | "auto">;
-        default: string;
-    };
-    active: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    alignLabel: {
-        type: import("vue").PropType<BreakpointCustomizable<"start" | "end" | "left" | "right">>;
-        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;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    weight: {
-        type: import("vue").PropType<"regular" | "semi-bold" | "bold" | "thin" | "semibold">;
-        default: string;
-    };
-    stretch: {
-        type: import("vue").PropType<BreakpointCustomizable<boolean>>;
-        default: boolean;
-    };
-    type: {
-        type: import("vue").PropType<"button" | "reset" | "submit">;
-        default: string;
-    };
-    size: {
-        type: import("vue").PropType<BreakpointCustomizable<"inherit" | "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large">>;
-        default: string;
-    };
-    theme: {
-        type: import("vue").PropType<"light" | "dark" | "auto">;
-        default: string;
-    };
-    active: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    alignLabel: {
-        type: import("vue").PropType<BreakpointCustomizable<"start" | "end" | "left" | "right">>;
-        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;
-    };
-}>>, {
+import type { BreakpointCustomizable, ButtonPureAlignLabel, SelectedAriaAttributes, ButtonPureAriaAttribute, ButtonPureIcon, ButtonPureSize, Theme, ButtonPureType, ButtonPureWeight } from '../types';
+type PButtonPureProps = {
+    /**
+     * Display button in active state.
+     */
+    active?: boolean;
+    /**
+     * Aligns the label.
+     */
+    alignLabel?: BreakpointCustomizable<ButtonPureAlignLabel>;
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<ButtonPureAriaAttribute>;
+    /**
+     * 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.
+     */
+    icon?: ButtonPureIcon;
+    /**
+     * 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;
+    /**
+     * Size of the button.
+     */
+    size?: BreakpointCustomizable<ButtonPureSize>;
+    /**
+     * Stretches the area between icon and label to max available space.
+     */
+    stretch?: BreakpointCustomizable<boolean>;
+    /**
+     * Adapts the button color depending on the theme.
+     */
+    theme?: Theme;
+    /**
+     * Specifies the type of the button.
+     */
+    type?: ButtonPureType;
+    /**
+     * 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 weight of the text (only has effect with visible label).
+     * @deprecated since v3.0.0, will be removed with next major release
+     */
+    weight?: ButtonPureWeight;
+};
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PButtonPureProps>, {
+    active: boolean;
+    alignLabel: string;
+    disabled: boolean;
+    hideLabel: boolean;
+    icon: string;
+    loading: boolean;
+    size: string;
+    stretch: boolean;
+    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<PButtonPureProps>, {
+    active: boolean;
+    alignLabel: string;
+    disabled: boolean;
+    hideLabel: boolean;
+    icon: string;
+    loading: boolean;
+    size: string;
+    stretch: boolean;
+    type: string;
+    weight: string;
+}>>>, {
     weight: "regular" | "semi-bold" | "bold" | "thin" | "semibold";
     stretch: BreakpointCustomizable<boolean>;
     type: "button" | "reset" | "submit";
     size: BreakpointCustomizable<"inherit" | "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large">;
-    theme: "light" | "dark" | "auto";
     active: boolean;
     alignLabel: BreakpointCustomizable<"start" | "end" | "left" | "right">;
     disabled: boolean;
@@ -117,6 +99,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/ButtonPureWrapper.vue.mjs

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

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

@@ -1,123 +1,91 @@
-import type { SelectedAriaAttributes, BreakpointCustomizable } from '../types';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    weight: {
-        type: import("vue").PropType<BreakpointCustomizable<"regular" | "semi-bold">>;
-        default: string;
-    };
-    label: {
-        type: import("vue").PropType<string>;
-        required: true;
-    };
-    type: {
-        type: import("vue").PropType<"button" | "reset" | "submit">;
-        default: string;
-    };
-    compact: {
-        type: import("vue").PropType<BreakpointCustomizable<boolean>>;
-        default: boolean;
-    };
-    size: {
-        type: import("vue").PropType<BreakpointCustomizable<"default" | "inherit">>;
-        default: string;
-    };
-    description: {
-        type: import("vue").PropType<string>;
-        required: true;
-    };
-    aria: {
-        type: import("vue").PropType<SelectedAriaAttributes<"aria-label" | "aria-expanded" | "aria-pressed" | "aria-haspopup">>;
-    };
-    disabled: {
-        type: import("vue").PropType<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;
-    };
-    align: {
-        type: import("vue").PropType<"top" | "bottom">;
-        default: string;
-    };
-    aspectRatio: {
-        type: import("vue").PropType<BreakpointCustomizable<"1:1" | "4:3" | "3:4" | "16:9" | "9:16">>;
-        default: string;
-    };
-    background: {
-        type: import("vue").PropType<"light" | "dark" | "auto">;
-        default: string;
-    };
-    gradient: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    weight: {
-        type: import("vue").PropType<BreakpointCustomizable<"regular" | "semi-bold">>;
-        default: string;
-    };
-    label: {
-        type: import("vue").PropType<string>;
-        required: true;
-    };
-    type: {
-        type: import("vue").PropType<"button" | "reset" | "submit">;
-        default: string;
-    };
-    compact: {
-        type: import("vue").PropType<BreakpointCustomizable<boolean>>;
-        default: boolean;
-    };
-    size: {
-        type: import("vue").PropType<BreakpointCustomizable<"default" | "inherit">>;
-        default: string;
-    };
-    description: {
-        type: import("vue").PropType<string>;
-        required: true;
-    };
-    aria: {
-        type: import("vue").PropType<SelectedAriaAttributes<"aria-label" | "aria-expanded" | "aria-pressed" | "aria-haspopup">>;
-    };
-    disabled: {
-        type: import("vue").PropType<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;
-    };
-    align: {
-        type: import("vue").PropType<"top" | "bottom">;
-        default: string;
-    };
-    aspectRatio: {
-        type: import("vue").PropType<BreakpointCustomizable<"1:1" | "4:3" | "3:4" | "16:9" | "9:16">>;
-        default: string;
-    };
-    background: {
-        type: import("vue").PropType<"light" | "dark" | "auto">;
-        default: string;
-    };
-    gradient: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-}>>, {
+import type { ButtonTileAlign, SelectedAriaAttributes, ButtonTileAriaAttribute, BreakpointCustomizable, ButtonTileAspectRatio, ButtonTileBackground, ButtonTileIcon, ButtonTileSize, ButtonTileType, ButtonTileWeight } from '../types';
+type PButtonTileProps = {
+    /**
+     * Alignment of button and description.
+     */
+    align?: ButtonTileAlign;
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<ButtonTileAriaAttribute>;
+    /**
+     * Aspect ratio of the button-tile.
+     */
+    aspectRatio?: BreakpointCustomizable<ButtonTileAspectRatio>;
+    /**
+     * Adapts the description and button theme when used on light background image.
+     */
+    background?: ButtonTileBackground;
+    /**
+     * Displays the button-tile as compact version with description and button icon only.
+     */
+    compact?: BreakpointCustomizable<boolean>;
+    /**
+     * Description text.
+     */
+    description: string;
+    /**
+     * Disables the button. No events will be triggered while disabled state is active.
+     */
+    disabled?: boolean;
+    /**
+     * Show gradient.
+     */
+    gradient?: boolean;
+    /**
+     * The icon shown. By choosing 'none', no icon is displayed.
+     */
+    icon?: ButtonTileIcon;
+    /**
+     * A URL path to a custom icon.
+     */
+    iconSource?: string;
+    /**
+     * Label of the button.
+     */
+    label: string;
+    /**
+     * Disables the button-tile and shows a loading indicator. No events will be triggered while loading state is active.
+     */
+    loading?: boolean;
+    /**
+     * Font size of the description.
+     */
+    size?: BreakpointCustomizable<ButtonTileSize>;
+    /**
+     * Specifies the type of the button.
+     */
+    type?: ButtonTileType;
+    /**
+     * Font weight of the description.
+     */
+    weight?: BreakpointCustomizable<ButtonTileWeight>;
+};
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PButtonTileProps>, {
+    align: string;
+    aspectRatio: string;
+    background: string;
+    compact: boolean;
+    disabled: boolean;
+    gradient: boolean;
+    icon: string;
+    loading: boolean;
+    size: 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<PButtonTileProps>, {
+    align: string;
+    aspectRatio: string;
+    background: string;
+    compact: boolean;
+    disabled: boolean;
+    gradient: boolean;
+    icon: string;
+    loading: boolean;
+    size: string;
+    type: string;
+    weight: string;
+}>>>, {
     weight: BreakpointCustomizable<"regular" | "semi-bold">;
     type: "button" | "reset" | "submit";
     compact: BreakpointCustomizable<boolean>;
@@ -133,6 +101,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/ButtonTileWrapper.vue.mjs

@@ -1,6 +1,6 @@
-import { defineComponent as d, ref as r, 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 g, syncProperties as o } from "../../utils.mjs";
-const C = /* @__PURE__ */ d({
+import { defineComponent as r, ref as d, onMounted as f, onUpdated as p, openBlock as s, createBlock as u, resolveDynamicComponent as i, unref as c, withCtx as m, renderSlot as b } from "vue";
+import { usePrefix as y, syncProperties as _ } from "../../utils.mjs";
+const k = /* @__PURE__ */ r({
   __name: "ButtonTileWrapper",
   props: {
     align: { default: "bottom" },
@@ -19,13 +19,9 @@ const C = /* @__PURE__ */ d({
     type: { default: "submit" },
     weight: { default: "semi-bold" }
   },
-  setup(a) {
-    const t = a, n = g("p-button-tile"), e = r();
-    return f(() => {
-      o(e.value, t);
-    }), p(() => {
-      o(e.value, t);
-    }), (l, y) => (u(), s(i(c(n)), {
+  setup(o) {
+    const n = y("p-button-tile"), a = o, e = d(), t = () => _(e, a);
+    return f(t), p(t), (l, g) => (s(), u(i(c(n)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
@@ -37,5 +33,5 @@ const C = /* @__PURE__ */ d({
   }
 });
 export {
-  C as default
+  k as default
 };