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

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

@@ -0,0 +1,131 @@
+import type { BreakpointCustomizable, NumberOfPageLinks, PageChangeEvent, Theme } from '../types';
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * Index of the currently active page.
+     */
+    activePage: number;
+    /**
+     * Aria label what the pagination is used for.
+     */
+    allyLabel?: string | undefined;
+    /**
+     * Aria label for next page icon.
+     */
+    allyLabelNext?: string | undefined;
+    /**
+     * Aria label for page navigation.
+     */
+    allyLabelPage?: string | undefined;
+    /**
+     * Aria label for previous page icon.
+     */
+    allyLabelPrev?: string | undefined;
+    /**
+     * The total count of items which should be shown per page.
+     */
+    itemsPerPage?: number | undefined;
+    /**
+     * The maximum number of page links rendered
+     */
+    maxNumberOfPageLinks?: BreakpointCustomizable<5 | 7> | undefined;
+    /**
+     * Adapts the color when used on dark background.
+     */
+    theme?: "light" | "dark" | undefined;
+    /**
+     * The total count of items.
+     */
+    totalItemsCount: number;
+}>, {
+    activePage: number;
+    allyLabel: string;
+    allyLabelNext: string;
+    allyLabelPage: string;
+    allyLabelPrev: string;
+    itemsPerPage: number;
+    maxNumberOfPageLinks: () => {
+        base: number;
+        xs: number;
+    };
+    theme: string;
+    totalItemsCount: number;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    pageChange: (value: PageChangeEvent) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * Index of the currently active page.
+     */
+    activePage: number;
+    /**
+     * Aria label what the pagination is used for.
+     */
+    allyLabel?: string | undefined;
+    /**
+     * Aria label for next page icon.
+     */
+    allyLabelNext?: string | undefined;
+    /**
+     * Aria label for page navigation.
+     */
+    allyLabelPage?: string | undefined;
+    /**
+     * Aria label for previous page icon.
+     */
+    allyLabelPrev?: string | undefined;
+    /**
+     * The total count of items which should be shown per page.
+     */
+    itemsPerPage?: number | undefined;
+    /**
+     * The maximum number of page links rendered
+     */
+    maxNumberOfPageLinks?: BreakpointCustomizable<5 | 7> | undefined;
+    /**
+     * Adapts the color when used on dark background.
+     */
+    theme?: "light" | "dark" | undefined;
+    /**
+     * The total count of items.
+     */
+    totalItemsCount: number;
+}>, {
+    activePage: number;
+    allyLabel: string;
+    allyLabelNext: string;
+    allyLabelPage: string;
+    allyLabelPrev: string;
+    itemsPerPage: number;
+    maxNumberOfPageLinks: () => {
+        base: number;
+        xs: number;
+    };
+    theme: string;
+    totalItemsCount: number;
+}>>> & {
+    onPageChange?: ((value: PageChangeEvent) => any) | undefined;
+}, {
+    theme: Theme;
+    activePage: number;
+    allyLabel: string;
+    allyLabelNext: string;
+    allyLabelPage: string;
+    allyLabelPrev: string;
+    itemsPerPage: number;
+    maxNumberOfPageLinks: BreakpointCustomizable<NumberOfPageLinks>;
+    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 ? P[K] & {
+        default: D[K];
+    } : P[K];
+};

package/lib/components/PaginationWrapper.vue.js

@@ -0,0 +1,31 @@
+import { defineComponent as r, ref as p, onMounted as f, onUpdated as s, openBlock as u, createBlock as i, resolveDynamicComponent as m, unref as d } from "vue";
+import { getPrefixedTagName as g, syncProperties as t, addEventListenerToElementRef as c } from "../../utils.js";
+const x = /* @__PURE__ */ r({
+  __name: "PaginationWrapper",
+  props: {
+    activePage: { default: 1 },
+    allyLabel: { default: "Pagination" },
+    allyLabelNext: { default: "Next page" },
+    allyLabelPage: { default: "Page" },
+    allyLabelPrev: { default: "Previous page" },
+    itemsPerPage: { default: 1 },
+    maxNumberOfPageLinks: { default: () => ({ base: 5, xs: 7 }) },
+    theme: { default: "light" },
+    totalItemsCount: { default: 1 }
+  },
+  emits: ["pageChange"],
+  setup(n, { emit: o }) {
+    const a = n, l = g("p-pagination"), e = p();
+    return f(() => {
+      t(e.value, a), c(e.value, "pageChange", o);
+    }), s(() => {
+      t(e.value, a);
+    }), (P, v) => (u(), i(m(d(l)), {
+      ref_key: "pdsComponentRef",
+      ref: e
+    }, null, 512));
+  }
+});
+export {
+  x as default
+};

package/lib/components/PaginationWrapper.vue2.js

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

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

@@ -0,0 +1,56 @@
+import type { SelectedAriaAttributes, PopoverDirection } from '../types';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<"aria-label"> | undefined;
+    /**
+     * Descriptive text to show additional information when popover is open
+     */
+    description?: string | undefined;
+    /**
+     * Preferred direction in which popover should open, given there is enough space in viewport. Otherwise, it will be opened in the direction with most available space.
+     */
+    direction?: "top" | "left" | "right" | "bottom" | undefined;
+}>, {
+    direction: 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"> | undefined;
+    /**
+     * Descriptive text to show additional information when popover is open
+     */
+    description?: string | undefined;
+    /**
+     * Preferred direction in which popover should open, given there is enough space in viewport. Otherwise, it will be opened in the direction with most available space.
+     */
+    direction?: "top" | "left" | "right" | "bottom" | undefined;
+}>, {
+    direction: string;
+}>>>, {
+    direction: PopoverDirection;
+}>, {
+    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/PopoverWrapper.vue.js

@@ -0,0 +1,29 @@
+import { defineComponent as a, ref as s, onMounted as f, onUpdated as l, openBlock as c, createBlock as d, resolveDynamicComponent as m, unref as i, withCtx as u, renderSlot as _ } from "vue";
+import { getPrefixedTagName as C, syncProperties as t } from "../../utils.js";
+const x = /* @__PURE__ */ a({
+  __name: "PopoverWrapper",
+  props: {
+    aria: null,
+    description: null,
+    direction: { default: "bottom" }
+  },
+  setup(n) {
+    const o = n, r = C("p-popover"), e = s();
+    return f(() => {
+      t(e.value, o);
+    }), l(() => {
+      t(e.value, o);
+    }), (p, v) => (c(), d(m(i(r)), {
+      ref_key: "pdsComponentRef",
+      ref: e
+    }, {
+      default: u(() => [
+        _(p.$slots, "default")
+      ]),
+      _: 3
+    }, 512));
+  }
+});
+export {
+  x as default
+};

package/lib/components/PopoverWrapper.vue2.js

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

package/lib/components/RadioButtonWrapperWrapper.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/RadioButtonWrapperWrapper.vue.js

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

package/lib/components/RadioButtonWrapperWrapper.vue2.js

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

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

@@ -0,0 +1,70 @@
+import type { GradientColorTheme, ScrollIndicatorPosition, ScrollToPosition, ThemeExtendedElectric } from '../types';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * Adapts the background gradient color of prev and next button.
+     */
+    gradientColorScheme?: "default" | "surface" | undefined;
+    /**
+     * Sets the vertical position of scroll indicator icon
+     */
+    scrollIndicatorPosition?: "top" | "center" | undefined;
+    /**
+     * Scrolls the scroll area to the left either smooth or immediately
+     */
+    scrollToPosition?: ScrollToPosition | undefined;
+    /**
+     * Adapts the color when used on dark background.
+     */
+    theme?: "light" | "dark" | "light-electric" | undefined;
+}>, {
+    gradientColorScheme: string;
+    scrollIndicatorPosition: 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<{
+    /**
+     * Adapts the background gradient color of prev and next button.
+     */
+    gradientColorScheme?: "default" | "surface" | undefined;
+    /**
+     * Sets the vertical position of scroll indicator icon
+     */
+    scrollIndicatorPosition?: "top" | "center" | undefined;
+    /**
+     * Scrolls the scroll area to the left either smooth or immediately
+     */
+    scrollToPosition?: ScrollToPosition | undefined;
+    /**
+     * Adapts the color when used on dark background.
+     */
+    theme?: "light" | "dark" | "light-electric" | undefined;
+}>, {
+    gradientColorScheme: string;
+    scrollIndicatorPosition: string;
+    theme: string;
+}>>>, {
+    theme: ThemeExtendedElectric;
+    gradientColorScheme: GradientColorTheme;
+    scrollIndicatorPosition: ScrollIndicatorPosition;
+}>, {
+    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/ScrollerWrapper.vue.js

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

package/lib/components/ScrollerWrapper.vue2.js

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

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

@@ -0,0 +1,72 @@
+import type { IconName } from '../types';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * Disables the button. No events will be triggered while disabled state is active.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * The icon shown.
+     */
+    icon?: IconName | undefined;
+    /**
+     * A URL path to a custom icon.
+     */
+    iconSource?: string | undefined;
+    /**
+     * The label text.
+     */
+    label?: string | undefined;
+    /**
+     * The value of this item which is emitted by the parent element if it becomes selected. This property is **required**.
+     */
+    value: string | number;
+}>, {
+    disabled: boolean;
+}>, {}, 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<{
+    /**
+     * Disables the button. No events will be triggered while disabled state is active.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * The icon shown.
+     */
+    icon?: IconName | undefined;
+    /**
+     * A URL path to a custom icon.
+     */
+    iconSource?: string | undefined;
+    /**
+     * The label text.
+     */
+    label?: string | undefined;
+    /**
+     * The value of this item which is emitted by the parent element if it becomes selected. This property is **required**.
+     */
+    value: string | number;
+}>, {
+    disabled: boolean;
+}>>>, {
+    disabled: boolean;
+}>, {
+    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/SegmentedControlItemWrapper.vue.js

@@ -0,0 +1,31 @@
+import { defineComponent as a, ref as p, onMounted as s, onUpdated as m, openBlock as u, createBlock as c, resolveDynamicComponent as d, unref as f, withCtx as i, renderSlot as C } from "vue";
+import { getPrefixedTagName as _, syncProperties as n } from "../../utils.js";
+const b = /* @__PURE__ */ a({
+  __name: "SegmentedControlItemWrapper",
+  props: {
+    disabled: { type: Boolean, default: !1 },
+    icon: null,
+    iconSource: null,
+    label: null,
+    value: null
+  },
+  setup(t) {
+    const o = t, l = _("p-segmented-control-item"), e = p();
+    return s(() => {
+      n(e.value, o);
+    }), m(() => {
+      n(e.value, o);
+    }), (r, g) => (u(), c(d(f(l)), {
+      ref_key: "pdsComponentRef",
+      ref: e
+    }, {
+      default: i(() => [
+        C(r.$slots, "default")
+      ]),
+      _: 3
+    }, 512));
+  }
+});
+export {
+  b as default
+};

package/lib/components/SegmentedControlItemWrapper.vue2.js

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

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

@@ -0,0 +1,63 @@
+import type { SegmentedControlBackgroundColor, SegmentedControlChangeEvent, Theme } from '../types';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * Background color variations
+     */
+    backgroundColor?: "background-surface" | "background-default" | undefined;
+    /**
+     * Adapts the segmented-control color depending on the theme.
+     */
+    theme?: "light" | "dark" | undefined;
+    /**
+     * Sets the initial value of the segmented-control.
+     */
+    value?: string | number | undefined;
+}>, {
+    backgroundColor: string;
+    theme: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    segmentedControlChange: (value: SegmentedControlChangeEvent) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * Background color variations
+     */
+    backgroundColor?: "background-surface" | "background-default" | undefined;
+    /**
+     * Adapts the segmented-control color depending on the theme.
+     */
+    theme?: "light" | "dark" | undefined;
+    /**
+     * Sets the initial value of the segmented-control.
+     */
+    value?: string | number | undefined;
+}>, {
+    backgroundColor: string;
+    theme: string;
+}>>> & {
+    onSegmentedControlChange?: ((value: SegmentedControlChangeEvent) => any) | undefined;
+}, {
+    theme: Theme;
+    backgroundColor: SegmentedControlBackgroundColor;
+}>, {
+    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;
+    };
+};