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

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

@@ -1,65 +1,69 @@
-import type { TabsBarUpdateEvent, BreakpointCustomizable } from '../types';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    weight: {
-        type: import("vue").PropType<"regular" | "semi-bold" | "semibold">;
-        default: string;
-    };
-    size: {
-        type: import("vue").PropType<BreakpointCustomizable<"small" | "medium">>;
-        default: string;
-    };
-    theme: {
-        type: import("vue").PropType<"light" | "dark" | "auto">;
-        default: string;
-    };
-    gradientColor: {
-        type: import("vue").PropType<"background-base" | "background-surface">;
-        default: string;
-    };
-    gradientColorScheme: {
-        type: import("vue").PropType<"default" | "surface">;
-    };
-    activeTabIndex: {
-        type: import("vue").PropType<number>;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+import type { TabsBarGradientColor, TabsBarGradientColorScheme, TabsBarUpdateEvent, BreakpointCustomizable, TabsBarSize, Theme, TabsBarWeight } from '../types';
+type PTabsBarProps = {
+    /**
+     * Defines which tab to be visualized as selected (zero-based numbering), undefined if none should be selected.
+     */
+    activeTabIndex?: number | undefined;
+    /**
+     * Adapts the background gradient color of prev and next button.
+     */
+    gradientColor?: TabsBarGradientColor;
+    /**
+     * @deprecated since v3.0.0, will be removed with next major release, use `gradientColor` instead. Adapts the background gradient color of prev and next button.
+     */
+    gradientColorScheme?: TabsBarGradientColorScheme;
+    /**
+     * The text size.
+     */
+    size?: BreakpointCustomizable<TabsBarSize>;
+    /**
+     * Adapts the color when used on dark background.
+     */
+    theme?: Theme;
+    /**
+     * The text weight.
+     */
+    weight?: TabsBarWeight;
+};
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PTabsBarProps>, {
+    gradientColor: string;
+    size: string;
+    weight: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     tabChange: (value: TabsBarUpdateEvent) => void;
     update: (value: TabsBarUpdateEvent) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    weight: {
-        type: import("vue").PropType<"regular" | "semi-bold" | "semibold">;
-        default: string;
-    };
-    size: {
-        type: import("vue").PropType<BreakpointCustomizable<"small" | "medium">>;
-        default: string;
-    };
-    theme: {
-        type: import("vue").PropType<"light" | "dark" | "auto">;
-        default: string;
-    };
-    gradientColor: {
-        type: import("vue").PropType<"background-base" | "background-surface">;
-        default: string;
-    };
-    gradientColorScheme: {
-        type: import("vue").PropType<"default" | "surface">;
-    };
-    activeTabIndex: {
-        type: import("vue").PropType<number>;
-    };
-}>> & {
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PTabsBarProps>, {
+    gradientColor: string;
+    size: string;
+    weight: string;
+}>>> & {
     onUpdate?: ((value: TabsBarUpdateEvent) => any) | undefined;
     onTabChange?: ((value: TabsBarUpdateEvent) => any) | undefined;
 }, {
     weight: "regular" | "semi-bold" | "semibold";
     size: BreakpointCustomizable<"small" | "medium">;
-    theme: "light" | "dark" | "auto";
     gradientColor: "background-base" | "background-surface";
 }, {}>, {
     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/TabsBarWrapper.vue.mjs

@@ -1,33 +1,33 @@
-import { defineComponent as p, ref as s, onMounted as u, onUpdated as f, openBlock as m, createBlock as c, resolveDynamicComponent as i, unref as g, withCtx as C, renderSlot as b } from "vue";
-import { getPrefixedTagName as h, syncProperties as o, addEventListenerToElementRef as n } from "../../utils.mjs";
-const k = /* @__PURE__ */ p({
+import { defineComponent as f, ref as i, inject as l, onMounted as u, onUpdated as h, watch as C, openBlock as b, createBlock as g, resolveDynamicComponent as _, unref as y, withCtx as k, renderSlot as v } from "vue";
+import { usePrefix as w, themeInjectionKey as x, addEventListenerToElementRef as s, syncProperties as m } from "../../utils.mjs";
+const P = /* @__PURE__ */ f({
   __name: "TabsBarWrapper",
   props: {
     activeTabIndex: {},
     gradientColor: { default: "background-base" },
     gradientColorScheme: {},
     size: { default: "small" },
-    theme: { default: "light" },
+    theme: {},
     weight: { default: "regular" }
   },
   emits: ["tabChange", "update"],
-  setup(r, { emit: t }) {
-    const a = r, d = h("p-tabs-bar"), e = s();
+  setup(p, { emit: c }) {
+    const d = w("p-tabs-bar"), t = p, e = i(), o = c, a = l(x), r = () => m(e, { ...t, theme: t.theme || a.value });
     return u(() => {
-      o(e.value, a), n(e.value, "tabChange", t), n(e.value, "update", t);
-    }), f(() => {
-      o(e.value, a);
-    }), (l, v) => (m(), c(i(g(d)), {
+      r(), s(e, "tabChange", o), s(e, "update", o);
+    }), h(r), C(a, (n) => {
+      m(e, { theme: t.theme || n });
+    }), (n, R) => (b(), g(_(y(d)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
-      default: C(() => [
-        b(l.$slots, "default")
+      default: k(() => [
+        v(n.$slots, "default")
       ]),
       _: 3
     }, 512));
   }
 });
 export {
-  k as default
+  P as default
 };

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

@@ -1,17 +1,22 @@
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    label: {
-        type: import("vue").PropType<string>;
-        required: true;
-    };
-}, {}, 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>;
-        required: true;
-    };
-}>>, {}, {}>, {
+type PTabsItemProps = {
+    /**
+     * Defines the label used in tabs.
+     */
+    label: string;
+};
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<PTabsItemProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<PTabsItemProps>>>, {}, {}>, {
     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_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

package/esm/lib/components/TabsItemWrapper.vue.mjs

@@ -1,21 +1,17 @@
-import { defineComponent as a, ref as s, onMounted as m, onUpdated as f, openBlock as c, createBlock as l, resolveDynamicComponent as d, unref as u, withCtx as i, renderSlot as _ } from "vue";
-import { getPrefixedTagName as C, syncProperties as t } from "../../utils.mjs";
-const v = /* @__PURE__ */ a({
+import { defineComponent as s, ref as a, onMounted as c, onUpdated as f, openBlock as m, createBlock as d, resolveDynamicComponent as l, unref as i, withCtx as u, renderSlot as _ } from "vue";
+import { usePrefix as C, syncProperties as b } from "../../utils.mjs";
+const P = /* @__PURE__ */ s({
   __name: "TabsItemWrapper",
   props: {
     label: {}
   },
-  setup(n) {
-    const o = n, r = C("p-tabs-item"), e = s();
-    return m(() => {
-      t(e.value, o);
-    }), f(() => {
-      t(e.value, o);
-    }), (p, b) => (c(), l(d(u(r)), {
+  setup(t) {
+    const n = C("p-tabs-item"), r = t, e = a(), o = () => b(e, r);
+    return c(o), f(o), (p, y) => (m(), d(l(i(n)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
-      default: i(() => [
+      default: u(() => [
         _(p.$slots, "default")
       ]),
       _: 3
@@ -23,5 +19,5 @@ const v = /* @__PURE__ */ a({
   }
 });
 export {
-  v as default
+  P as default
 };

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

@@ -1,68 +1,72 @@
-import type { BreakpointCustomizable } from '../types';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    weight: {
-        type: import("vue").PropType<"regular" | "semi-bold" | "semibold">;
-        default: string;
-    };
-    size: {
-        type: import("vue").PropType<BreakpointCustomizable<"small" | "medium">>;
-        default: string;
-    };
-    theme: {
-        type: import("vue").PropType<"light" | "dark" | "auto">;
-        default: string;
-    };
-    gradientColor: {
-        type: import("vue").PropType<"background-base" | "background-surface">;
-        default: string;
-    };
-    gradientColorScheme: {
-        type: import("vue").PropType<"default" | "surface">;
-    };
-    activeTabIndex: {
-        type: import("vue").PropType<number>;
-        default: number;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+import type { TabsGradientColor, TabsGradientColorScheme, BreakpointCustomizable, TabsSize, Theme, TabsWeight } from '../types';
+type PTabsProps = {
+    /**
+     * Defines which tab to be visualized as selected (zero-based numbering).
+     */
+    activeTabIndex?: number;
+    /**
+     * Adapts the background gradient color of prev and next button.
+     */
+    gradientColor?: TabsGradientColor;
+    /**
+     * @deprecated since v3.0.0, will be removed with next major release, use `gradientColor` instead. Adapts the background gradient color of prev and next button.
+     */
+    gradientColorScheme?: TabsGradientColorScheme;
+    /**
+     * The text size.
+     */
+    size?: BreakpointCustomizable<TabsSize>;
+    /**
+     * Adapts the color when used on dark background.
+     */
+    theme?: Theme;
+    /**
+     * The text weight.
+     */
+    weight?: TabsWeight;
+};
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PTabsProps>, {
+    activeTabIndex: number;
+    gradientColor: string;
+    size: string;
+    weight: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     tabChange: (value: import("../types").TabsBarUpdateEvent) => void;
     update: (value: import("../types").TabsBarUpdateEvent) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    weight: {
-        type: import("vue").PropType<"regular" | "semi-bold" | "semibold">;
-        default: string;
-    };
-    size: {
-        type: import("vue").PropType<BreakpointCustomizable<"small" | "medium">>;
-        default: string;
-    };
-    theme: {
-        type: import("vue").PropType<"light" | "dark" | "auto">;
-        default: string;
-    };
-    gradientColor: {
-        type: import("vue").PropType<"background-base" | "background-surface">;
-        default: string;
-    };
-    gradientColorScheme: {
-        type: import("vue").PropType<"default" | "surface">;
-    };
-    activeTabIndex: {
-        type: import("vue").PropType<number>;
-        default: number;
-    };
-}>> & {
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PTabsProps>, {
+    activeTabIndex: number;
+    gradientColor: string;
+    size: string;
+    weight: string;
+}>>> & {
     onUpdate?: ((value: import("../types").TabsBarUpdateEvent) => any) | undefined;
     onTabChange?: ((value: import("../types").TabsBarUpdateEvent) => any) | undefined;
 }, {
     weight: "regular" | "semi-bold" | "semibold";
     size: BreakpointCustomizable<"small" | "medium">;
-    theme: "light" | "dark" | "auto";
     gradientColor: "background-base" | "background-surface";
     activeTabIndex: 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 ? __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/TabsWrapper.vue.mjs

@@ -1,33 +1,33 @@
-import { defineComponent as p, ref as s, onMounted as u, onUpdated as f, openBlock as m, createBlock as c, resolveDynamicComponent as i, unref as g, withCtx as C, renderSlot as b } from "vue";
-import { getPrefixedTagName as h, syncProperties as o, addEventListenerToElementRef as n } from "../../utils.mjs";
-const k = /* @__PURE__ */ p({
+import { defineComponent as f, ref as i, inject as l, onMounted as u, onUpdated as h, watch as C, openBlock as b, createBlock as g, resolveDynamicComponent as _, unref as y, withCtx as k, renderSlot as v } from "vue";
+import { usePrefix as w, themeInjectionKey as x, addEventListenerToElementRef as s, syncProperties as m } from "../../utils.mjs";
+const j = /* @__PURE__ */ f({
   __name: "TabsWrapper",
   props: {
     activeTabIndex: { default: 0 },
     gradientColor: { default: "background-base" },
     gradientColorScheme: {},
     size: { default: "small" },
-    theme: { default: "light" },
+    theme: {},
     weight: { default: "regular" }
   },
   emits: ["tabChange", "update"],
-  setup(r, { emit: t }) {
-    const a = r, d = h("p-tabs"), e = s();
+  setup(p, { emit: c }) {
+    const d = w("p-tabs"), t = p, e = i(), o = c, a = l(x), r = () => m(e, { ...t, theme: t.theme || a.value });
     return u(() => {
-      o(e.value, a), n(e.value, "tabChange", t), n(e.value, "update", t);
-    }), f(() => {
-      o(e.value, a);
-    }), (l, v) => (m(), c(i(g(d)), {
+      r(), s(e, "tabChange", o), s(e, "update", o);
+    }), h(r), C(a, (n) => {
+      m(e, { theme: t.theme || n });
+    }), (n, R) => (b(), g(_(y(d)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
-      default: C(() => [
-        b(l.$slots, "default")
+      default: k(() => [
+        v(n.$slots, "default")
       ]),
       _: 3
     }, 512));
   }
 });
 export {
-  k as default
+  j as default
 };

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

@@ -1,41 +1,49 @@
-import type { SelectedAriaAttributes } from '../types';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    label: {
-        type: import("vue").PropType<string>;
-    };
-    theme: {
-        type: import("vue").PropType<"light" | "dark" | "auto">;
-        default: string;
-    };
-    aria: {
-        type: import("vue").PropType<SelectedAriaAttributes<"aria-label">>;
-    };
-    color: {
-        type: import("vue").PropType<"background-base" | "background-surface" | "background-default">;
-        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>;
-    };
-    theme: {
-        type: import("vue").PropType<"light" | "dark" | "auto">;
-        default: string;
-    };
-    aria: {
-        type: import("vue").PropType<SelectedAriaAttributes<"aria-label">>;
-    };
-    color: {
-        type: import("vue").PropType<"background-base" | "background-surface" | "background-default">;
-        default: string;
-    };
-}>>, {
-    theme: "light" | "dark" | "auto";
+import type { SelectedAriaAttributes, TagDismissibleAriaAttribute, TagDismissibleColor, Theme } from '../types';
+type PTagDismissibleProps = {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<TagDismissibleAriaAttribute>;
+    /**
+     * Background color variations
+     */
+    color?: TagDismissibleColor;
+    /**
+     * The label text.
+     */
+    label?: string;
+    /**
+     * Adapts the color when used on dark background.
+     */
+    theme?: Theme;
+};
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PTagDismissibleProps>, {
+    color: 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<PTagDismissibleProps>, {
+    color: string;
+}>>>, {
     color: "background-base" | "background-surface" | "background-default";
 }, {}>, {
     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/TagDismissibleWrapper.vue.mjs

@@ -1,30 +1,28 @@
-import { defineComponent as s, ref as p, onMounted as l, onUpdated as f, openBlock as i, createBlock as m, resolveDynamicComponent as c, unref as d, withCtx as u, renderSlot as g } from "vue";
-import { getPrefixedTagName as _, syncProperties as t } from "../../utils.mjs";
-const k = /* @__PURE__ */ s({
+import { defineComponent as c, ref as m, inject as f, onMounted as i, onUpdated as l, watch as d, openBlock as u, createBlock as h, resolveDynamicComponent as _, unref as C, withCtx as b, renderSlot as y } from "vue";
+import { usePrefix as g, themeInjectionKey as k, syncProperties as s } from "../../utils.mjs";
+const R = /* @__PURE__ */ c({
   __name: "TagDismissibleWrapper",
   props: {
     aria: {},
     color: { default: "background-surface" },
     label: {},
-    theme: { default: "light" }
+    theme: {}
   },
-  setup(n) {
-    const o = n, r = _("p-tag-dismissible"), e = p();
-    return l(() => {
-      t(e.value, o);
-    }), f(() => {
-      t(e.value, o);
-    }), (a, C) => (i(), m(c(d(r)), {
+  setup(a) {
+    const p = g("p-tag-dismissible"), e = a, t = m(), n = f(k), r = () => s(t, { ...e, theme: e.theme || n.value });
+    return i(r), l(r), d(n, (o) => {
+      s(t, { theme: e.theme || o });
+    }), (o, w) => (u(), h(_(C(p)), {
       ref_key: "pdsComponentRef",
-      ref: e
+      ref: t
     }, {
-      default: u(() => [
-        g(a.$slots, "default")
+      default: b(() => [
+        y(o.$slots, "default")
       ]),
       _: 3
     }, 512));
   }
 });
 export {
-  k as default
+  R as default
 };