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

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

@@ -1,6 +1,6 @@
-import { defineComponent as r, ref as f, onMounted as u, onUpdated as p, openBlock as s, createBlock as i, resolveDynamicComponent as m, unref as c, withCtx as _, renderSlot as v } from "vue";
-import { getPrefixedTagName as C, syncProperties as a, addEventListenerToElementRef as g } from "../../utils.mjs";
-const B = /* @__PURE__ */ r({
+import { defineComponent as p, ref as m, inject as u, onMounted as c, onUpdated as i, watch as h, openBlock as y, createBlock as _, resolveDynamicComponent as C, unref as b, withCtx as v, renderSlot as w } from "vue";
+import { usePrefix as B, themeInjectionKey as R, addEventListenerToElementRef as k, syncProperties as l } from "../../utils.mjs";
+const j = /* @__PURE__ */ p({
   __name: "MultiSelectWrapper",
   props: {
     description: { default: "" },
@@ -12,27 +12,27 @@ const B = /* @__PURE__ */ r({
     name: {},
     required: { type: Boolean, default: !1 },
     state: { default: "none" },
-    theme: { default: "light" },
+    theme: {},
     value: { default: () => [] }
   },
   emits: ["update"],
-  setup(o, { emit: n }) {
-    const t = o, l = C("p-multi-select"), e = f();
-    return u(() => {
-      a(e.value, t), g(e.value, "update", n);
-    }), p(() => {
-      a(e.value, t);
-    }), (d, h) => (s(), i(m(c(l)), {
+  setup(s, { emit: r }) {
+    const d = B("p-multi-select"), t = s, e = m(), f = r, n = u(R), a = () => l(e, { ...t, theme: t.theme || n.value });
+    return c(() => {
+      a(), k(e, "update", f);
+    }), i(a), h(n, (o) => {
+      l(e, { theme: t.theme || o });
+    }), (o, x) => (y(), _(C(b(d)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
-      default: _(() => [
-        v(d.$slots, "default")
+      default: v(() => [
+        w(o.$slots, "default")
       ]),
       _: 3
     }, 512));
   }
 });
 export {
-  B as default
+  j as default
 };

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

@@ -1,114 +1,87 @@
-import type { PaginationInternationalization, BreakpointCustomizable, PaginationUpdateEvent } from '../types';
-declare const _default: import("vue").DefineComponent<{
-    theme: {
-        type: import("vue").PropType<"light" | "dark" | "auto">;
-        default: string;
-    };
-    intl: {
-        type: import("vue").PropType<PaginationInternationalization>;
-        default: () => {
-            root: string;
-            prev: string;
-            next: string;
-            page: string;
-        };
-    };
-    activePage: {
-        type: import("vue").PropType<number>;
-        required: true;
-        default: number;
-    };
-    allyLabel: {
-        type: import("vue").PropType<string>;
-    };
-    allyLabelNext: {
-        type: import("vue").PropType<string>;
-    };
-    allyLabelPage: {
-        type: import("vue").PropType<string>;
-    };
-    allyLabelPrev: {
-        type: import("vue").PropType<string>;
-    };
-    itemsPerPage: {
-        type: import("vue").PropType<number>;
-        default: number;
-    };
-    maxNumberOfPageLinks: {
-        type: import("vue").PropType<BreakpointCustomizable<7 | 5>>;
-        default: () => {
-            base: number;
-            xs: number;
-        };
-    };
-    showLastPage: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
+import type { PaginationInternationalization, BreakpointCustomizable, PaginationMaxNumberOfPageLinks, PaginationUpdateEvent, Theme } from '../types';
+type PPaginationProps = {
+    /**
+     * Index of the currently active page.
+     */
+    activePage: number;
+    /**
+     * @deprecated since v3.0.0, will be removed with next major release, use `intl.root` instead. Aria label what the pagination is used for.
+     */
+    allyLabel?: string;
+    /**
+     * @deprecated since v3.0.0, will be removed with next major release, use `intl.next` instead. Aria label for next page icon.
+     */
+    allyLabelNext?: string;
+    /**
+     * @deprecated since v3.0.0, will be removed with next major release, use `intl.page` instead. Aria label for page navigation.
+     */
+    allyLabelPage?: string;
+    /**
+     * @deprecated since v3.0.0, will be removed with next major release, use `intl.prev` instead. Aria label for previous page icon.
+     */
+    allyLabelPrev?: string;
+    /**
+     * Override the default wordings that are used for aria-labels on the next/prev and page buttons.
+     */
+    intl?: PaginationInternationalization;
+    /**
+     * The total count of items which should be shown per page.
+     */
+    itemsPerPage?: number;
+    /**
+     * The maximum number of page links rendered.
+     */
+    maxNumberOfPageLinks?: BreakpointCustomizable<PaginationMaxNumberOfPageLinks>;
+    /**
+     * Show or hide the button to jump to the last page.
+     */
+    showLastPage?: boolean;
+    /**
+     * Adapts the color when used on dark background.
+     */
+    theme?: Theme;
+    /**
+     * The total count of items.
+     */
+    totalItemsCount: number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PPaginationProps>, {
+    activePage: number;
+    intl: () => {
+        root: string;
+        prev: string;
+        next: string;
+        page: string;
     };
-    totalItemsCount: {
-        type: import("vue").PropType<number>;
-        required: true;
-        default: number;
+    itemsPerPage: number;
+    maxNumberOfPageLinks: () => {
+        base: number;
+        xs: number;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    showLastPage: boolean;
+    totalItemsCount: number;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     pageChange: (value: PaginationUpdateEvent) => void;
     update: (value: PaginationUpdateEvent) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    theme: {
-        type: import("vue").PropType<"light" | "dark" | "auto">;
-        default: string;
-    };
-    intl: {
-        type: import("vue").PropType<PaginationInternationalization>;
-        default: () => {
-            root: string;
-            prev: string;
-            next: string;
-            page: string;
-        };
-    };
-    activePage: {
-        type: import("vue").PropType<number>;
-        required: true;
-        default: number;
-    };
-    allyLabel: {
-        type: import("vue").PropType<string>;
-    };
-    allyLabelNext: {
-        type: import("vue").PropType<string>;
-    };
-    allyLabelPage: {
-        type: import("vue").PropType<string>;
-    };
-    allyLabelPrev: {
-        type: import("vue").PropType<string>;
-    };
-    itemsPerPage: {
-        type: import("vue").PropType<number>;
-        default: number;
-    };
-    maxNumberOfPageLinks: {
-        type: import("vue").PropType<BreakpointCustomizable<7 | 5>>;
-        default: () => {
-            base: number;
-            xs: number;
-        };
-    };
-    showLastPage: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PPaginationProps>, {
+    activePage: number;
+    intl: () => {
+        root: string;
+        prev: string;
+        next: string;
+        page: string;
     };
-    totalItemsCount: {
-        type: import("vue").PropType<number>;
-        required: true;
-        default: number;
+    itemsPerPage: number;
+    maxNumberOfPageLinks: () => {
+        base: number;
+        xs: number;
     };
-}>> & {
+    showLastPage: boolean;
+    totalItemsCount: number;
+}>>> & {
     onUpdate?: ((value: PaginationUpdateEvent) => any) | undefined;
     onPageChange?: ((value: PaginationUpdateEvent) => any) | undefined;
 }, {
-    theme: "light" | "dark" | "auto";
     intl: PaginationInternationalization;
     activePage: number;
     itemsPerPage: number;
@@ -117,3 +90,20 @@ declare const _default: import("vue").DefineComponent<{
     totalItemsCount: number;
 }, {}>;
 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];
+} & {};

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

@@ -1,6 +1,6 @@
-import { defineComponent as r, ref as s, onMounted as u, onUpdated as f, openBlock as g, createBlock as i, resolveDynamicComponent as d, unref as m } from "vue";
-import { getPrefixedTagName as c, syncProperties as n, addEventListenerToElementRef as o } from "../../utils.mjs";
-const C = /* @__PURE__ */ r({
+import { defineComponent as c, ref as f, inject as u, onMounted as d, onUpdated as g, watch as P, openBlock as h, createBlock as y, resolveDynamicComponent as x, unref as C } from "vue";
+import { usePrefix as b, themeInjectionKey as v, addEventListenerToElementRef as r, syncProperties as s } from "../../utils.mjs";
+const R = /* @__PURE__ */ c({
   __name: "PaginationWrapper",
   props: {
     activePage: { default: 1 },
@@ -12,22 +12,22 @@ const C = /* @__PURE__ */ r({
     itemsPerPage: { default: 1 },
     maxNumberOfPageLinks: { default: () => ({ base: 5, xs: 7 }) },
     showLastPage: { type: Boolean, default: !0 },
-    theme: { default: "light" },
+    theme: {},
     totalItemsCount: { default: 1 }
   },
   emits: ["pageChange", "update"],
-  setup(l, { emit: a }) {
-    const t = l, p = c("p-pagination"), e = s();
-    return u(() => {
-      n(e.value, t), o(e.value, "pageChange", a), o(e.value, "update", a);
-    }), f(() => {
-      n(e.value, t);
-    }), (P, v) => (g(), i(d(m(p)), {
+  setup(l, { emit: m }) {
+    const i = b("p-pagination"), t = l, e = f(), a = m, n = u(v), o = () => s(e, { ...t, theme: t.theme || n.value });
+    return d(() => {
+      o(), r(e, "pageChange", a), r(e, "update", a);
+    }), g(o), P(n, (p) => {
+      s(e, { theme: t.theme || p });
+    }), (p, L) => (h(), y(x(C(i)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, null, 512));
   }
 });
 export {
-  C as default
+  R as default
 };

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

@@ -1,129 +1,119 @@
-import type { BreakpointCustomizable, PinCodeUpdateEvent } from '../types';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    label: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
-    length: {
-        type: import("vue").PropType<4 | 6>;
-        default: number;
-    };
-    type: {
-        type: import("vue").PropType<"number" | "password">;
-        default: string;
-    };
-    theme: {
-        type: import("vue").PropType<"light" | "dark" | "auto">;
-        default: string;
-    };
-    description: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
-    state: {
-        type: import("vue").PropType<"none" | "success" | "error">;
-        default: string;
-    };
-    required: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    disabled: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    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;
-    };
-    name: {
-        type: import("vue").PropType<string>;
-    };
-    value: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+import type { BreakpointCustomizable, PinCodeLength, PinCodeUpdateEvent, PinCodeState, Theme, PinCodeType } from '../types';
+type PPinCodeProps = {
+    /**
+     * The description text.
+     */
+    description?: string;
+    /**
+     * Disables the Pin Code. No events will be triggered while disabled state is active.
+     */
+    disabled?: boolean;
+    /**
+     * Show or hide label and description text. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * The label text.
+     */
+    label?: string;
+    /**
+     * Number of characters of the Pin Code.
+     */
+    length?: PinCodeLength;
+    /**
+     * Disables the Pin Code and shows a loading indicator. No events will be triggered while loading state is active.
+     */
+    loading?: boolean;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string;
+    /**
+     * Name of the control.
+     */
+    name?: string;
+    /**
+     * Marks the Pin Code as required.
+     */
+    required?: boolean;
+    /**
+     * The validation state.
+     */
+    state?: PinCodeState;
+    /**
+     * Adapts the color depending on the theme.
+     */
+    theme?: Theme;
+    /**
+     * Pin Code type.
+     */
+    type?: PinCodeType;
+    /**
+     * Sets the initial value of the Pin Code.
+     */
+    value?: string;
+};
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PPinCodeProps>, {
+    description: string;
+    disabled: boolean;
+    hideLabel: boolean;
+    label: string;
+    length: number;
+    loading: boolean;
+    message: string;
+    required: boolean;
+    state: string;
+    type: string;
+    value: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     update: (value: PinCodeUpdateEvent) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    label: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
-    length: {
-        type: import("vue").PropType<4 | 6>;
-        default: number;
-    };
-    type: {
-        type: import("vue").PropType<"number" | "password">;
-        default: string;
-    };
-    theme: {
-        type: import("vue").PropType<"light" | "dark" | "auto">;
-        default: string;
-    };
-    description: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
-    state: {
-        type: import("vue").PropType<"none" | "success" | "error">;
-        default: string;
-    };
-    required: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    disabled: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    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;
-    };
-    name: {
-        type: import("vue").PropType<string>;
-    };
-    value: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
-}>> & {
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PPinCodeProps>, {
+    description: string;
+    disabled: boolean;
+    hideLabel: boolean;
+    label: string;
+    length: number;
+    loading: boolean;
+    message: string;
+    required: boolean;
+    state: string;
+    type: string;
+    value: string;
+}>>> & {
     onUpdate?: ((value: PinCodeUpdateEvent) => any) | undefined;
 }, {
     label: string;
-    length: 4 | 6;
+    length: 3 | 4 | 2 | 5 | 1 | 6;
     type: "number" | "password";
-    theme: "light" | "dark" | "auto";
     description: string;
     state: "none" | "success" | "error";
     required: boolean;
     disabled: boolean;
     hideLabel: BreakpointCustomizable<boolean>;
     loading: boolean;
-    message: string;
     value: string;
+    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 ? __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/PinCodeWrapper.vue.mjs

@@ -1,6 +1,6 @@
-import { defineComponent as f, ref as p, onMounted as r, onUpdated as u, openBlock as s, createBlock as i, resolveDynamicComponent as m, unref as c, withCtx as g, renderSlot as y } from "vue";
-import { getPrefixedTagName as C, syncProperties as a, addEventListenerToElementRef as _ } from "../../utils.mjs";
-const B = /* @__PURE__ */ f({
+import { defineComponent as r, ref as m, inject as u, onMounted as i, onUpdated as c, watch as h, openBlock as y, createBlock as C, resolveDynamicComponent as _, unref as b, withCtx as B, renderSlot as g } from "vue";
+import { usePrefix as v, themeInjectionKey as P, addEventListenerToElementRef as R, syncProperties as l } from "../../utils.mjs";
+const j = /* @__PURE__ */ r({
   __name: "PinCodeWrapper",
   props: {
     description: { default: "" },
@@ -13,28 +13,28 @@ const B = /* @__PURE__ */ f({
     name: {},
     required: { type: Boolean, default: !1 },
     state: { default: "none" },
-    theme: { default: "light" },
+    theme: {},
     type: { default: "number" },
     value: { default: "" }
   },
   emits: ["update"],
-  setup(o, { emit: n }) {
-    const t = o, l = C("p-pin-code"), e = p();
-    return r(() => {
-      a(e.value, t), _(e.value, "update", n);
-    }), u(() => {
-      a(e.value, t);
-    }), (d, h) => (s(), i(m(c(l)), {
+  setup(d, { emit: s }) {
+    const f = v("p-pin-code"), t = d, e = m(), p = s, o = u(P), a = () => l(e, { ...t, theme: t.theme || o.value });
+    return i(() => {
+      a(), R(e, "update", p);
+    }), c(a), h(o, (n) => {
+      l(e, { theme: t.theme || n });
+    }), (n, k) => (y(), C(_(b(f)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
-      default: g(() => [
-        y(d.$slots, "default")
+      default: B(() => [
+        g(n.$slots, "default")
       ]),
       _: 3
     }, 512));
   }
 });
 export {
-  B as default
+  j as default
 };