@porsche-design-system/components-vue 3.1.0-rc.0 → 3.1.0-rc.2

package/lib/components/TagDismissibleWrapper.vue.js

@@ -1,24 +1,24 @@
-import { defineComponent as s, ref as l, onMounted as p, onUpdated as f, openBlock as i, createBlock as m, resolveDynamicComponent as u, unref as c, withCtx as d, renderSlot as g } from "vue";
+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.js";
 const k = /* @__PURE__ */ s({
   __name: "TagDismissibleWrapper",
   props: {
-    aria: null,
+    aria: {},
     color: { default: "background-surface" },
-    label: null,
+    label: {},
     theme: { default: "light" }
   },
   setup(n) {
-    const o = n, r = _("p-tag-dismissible"), e = l();
-    return p(() => {
+    const o = n, r = _("p-tag-dismissible"), e = p();
+    return l(() => {
       t(e.value, o);
     }), f(() => {
       t(e.value, o);
-    }), (a, C) => (i(), m(u(c(r)), {
+    }), (a, C) => (i(), m(c(d(r)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
-      default: d(() => [
+      default: u(() => [
         g(a.$slots, "default")
       ]),
       _: 3

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

@@ -1,4 +1,3 @@
-/** __vue_virtual_code_placeholder */
 import type { TagColor, TagIcon, Theme } from '../types';
 type PTagProps = {
     /**
@@ -27,7 +26,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>>>, {
     theme: "light" | "dark";
     color: "background-base" | "background-surface" | "primary" | "notification-success" | "notification-warning" | "notification-error" | "neutral-contrast-high" | "notification-neutral" | "background-default" | "notification-info-soft" | "notification-warning-soft" | "notification-success-soft" | "notification-error-soft";
-}>, {
+}, {}>, {
     default?(_: {}): any;
 }>;
 export default _default;
@@ -48,12 +47,8 @@ type __VLS_WithDefaults<P, D> = {
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
-        $props: __VLS_PropsChildren<S>;
     };
 };
-type __VLS_PropsChildren<S> = {
-    [K in keyof (boolean extends (JSX.ElementChildrenAttribute extends never ? true : false) ? never : JSX.ElementChildrenAttribute)]?: S;
-};
 type __VLS_Prettify<T> = {
     [K in keyof T]: T[K];
 } & {};

package/lib/components/TagWrapper.vue.js

@@ -1,20 +1,20 @@
-import { defineComponent as p, ref as c, onMounted as l, onUpdated as f, openBlock as s, createBlock as u, resolveDynamicComponent as d, unref as m, withCtx as i, renderSlot as g } from "vue";
-import { getPrefixedTagName as _, syncProperties as n } from "../../utils.js";
+import { defineComponent as p, ref as c, onMounted as f, onUpdated as s, openBlock as u, createBlock as d, resolveDynamicComponent as l, unref as m, withCtx as i, renderSlot as g } from "vue";
+import { getPrefixedTagName as _, syncProperties as t } from "../../utils.js";
 const v = /* @__PURE__ */ p({
   __name: "TagWrapper",
   props: {
     color: { default: "background-surface" },
-    icon: null,
-    iconSource: null,
+    icon: {},
+    iconSource: {},
     theme: { default: "light" }
   },
-  setup(t) {
-    const o = t, r = _("p-tag"), e = c();
-    return l(() => {
-      n(e.value, o);
-    }), f(() => {
-      n(e.value, o);
-    }), (a, C) => (s(), u(d(m(r)), {
+  setup(n) {
+    const o = n, r = _("p-tag"), e = c();
+    return f(() => {
+      t(e.value, o);
+    }), s(() => {
+      t(e.value, o);
+    }), (a, C) => (u(), d(l(m(r)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {

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

@@ -1,4 +1,3 @@
-/** __vue_virtual_code_placeholder */
 import type { TextFieldWrapperActionIcon, BreakpointCustomizable, TextFieldWrapperState, Theme, TextFieldWrapperUnitPosition } from '../types';
 type PTextFieldWrapperProps = {
     /**
@@ -33,6 +32,10 @@ type PTextFieldWrapperProps = {
      * Show or hide max character count.
      */
     showCounter?: boolean;
+    /**
+     * __Experimental__: Show or hide password toggle for `input type="password"`.
+     */
+    showPasswordToggle?: boolean;
     /**
      * The validation state.
      */
@@ -57,6 +60,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     label: string;
     message: string;
     showCounter: boolean;
+    showPasswordToggle: boolean;
     state: string;
     theme: string;
     unit: string;
@@ -70,6 +74,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     label: string;
     message: string;
     showCounter: boolean;
+    showPasswordToggle: boolean;
     state: string;
     theme: string;
     unit: string;
@@ -85,9 +90,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     message: string;
     actionLoading: boolean;
     showCounter: boolean;
+    showPasswordToggle: boolean;
     unit: string;
     unitPosition: "prefix" | "suffix";
-}>, {
+}, {}>, {
     default?(_: {}): any;
 }>;
 export default _default;
@@ -108,12 +114,8 @@ type __VLS_WithDefaults<P, D> = {
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
-        $props: __VLS_PropsChildren<S>;
     };
 };
-type __VLS_PropsChildren<S> = {
-    [K in keyof (boolean extends (JSX.ElementChildrenAttribute extends never ? true : false) ? never : JSX.ElementChildrenAttribute)]?: S;
-};
 type __VLS_Prettify<T> = {
     [K in keyof T]: T[K];
 } & {};

package/lib/components/TextFieldWrapperWrapper.vue.js

@@ -1,9 +1,9 @@
-import { defineComponent as p, ref as f, onMounted as d, onUpdated as s, openBlock as u, createBlock as i, resolveDynamicComponent as c, unref as m, withCtx as C, renderSlot as h } from "vue";
-import { getPrefixedTagName as _, syncProperties as o, addEventListenerToElementRef as g } from "../../utils.js";
-const w = /* @__PURE__ */ p({
+import { defineComponent as p, ref as d, onMounted as f, onUpdated as s, openBlock as u, createBlock as i, resolveDynamicComponent as c, unref as m, withCtx as h, renderSlot as C } from "vue";
+import { getPrefixedTagName as g, syncProperties as o, addEventListenerToElementRef as w } from "../../utils.js";
+const B = /* @__PURE__ */ p({
   __name: "TextFieldWrapperWrapper",
   props: {
-    actionIcon: null,
+    actionIcon: {},
     actionLoading: { type: Boolean, default: !1 },
     description: { default: "" },
     hideLabel: { default: !1 },
@@ -11,29 +11,30 @@ const w = /* @__PURE__ */ p({
     message: { default: "" },
     showCharacterCount: { type: Boolean },
     showCounter: { type: Boolean, default: !0 },
+    showPasswordToggle: { type: Boolean, default: !0 },
     state: { default: "none" },
     theme: { default: "light" },
     unit: { default: "" },
     unitPosition: { default: "prefix" }
   },
   emits: ["action"],
-  setup(n, { emit: a }) {
-    const t = n, l = _("p-text-field-wrapper"), e = f();
-    return d(() => {
-      o(e.value, t), g(e.value, "action", a);
+  setup(a, { emit: n }) {
+    const t = a, r = g("p-text-field-wrapper"), e = d();
+    return f(() => {
+      o(e.value, t), w(e.value, "action", n);
     }), s(() => {
       o(e.value, t);
-    }), (r, x) => (u(), i(c(m(l)), {
+    }), (l, y) => (u(), i(c(m(r)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
-      default: C(() => [
-        h(r.$slots, "default")
+      default: h(() => [
+        C(l.$slots, "default")
       ]),
       _: 3
     }, 512));
   }
 });
 export {
-  w as default
+  B as default
 };

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

@@ -1,14 +1,9 @@
-/** __vue_virtual_code_placeholder */
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
     default?(_: {}): any;
 }>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
-        $props: __VLS_PropsChildren<S>;
     };
 };
-type __VLS_PropsChildren<S> = {
-    [K in keyof (boolean extends (JSX.ElementChildrenAttribute extends never ? true : false) ? never : JSX.ElementChildrenAttribute)]?: S;
-};

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

@@ -1,4 +1,3 @@
-/** __vue_virtual_code_placeholder */
 import type { TextListListType, TextListOrderType, Theme, TextListType } from '../types';
 type PTextListProps = {
     /**
@@ -27,7 +26,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>>>, {
     type: "unordered" | "numbered" | "alphabetically";
     theme: "light" | "dark";
-}>, {
+}, {}>, {
     default?(_: {}): any;
 }>;
 export default _default;
@@ -48,12 +47,8 @@ type __VLS_WithDefaults<P, D> = {
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
-        $props: __VLS_PropsChildren<S>;
     };
 };
-type __VLS_PropsChildren<S> = {
-    [K in keyof (boolean extends (JSX.ElementChildrenAttribute extends never ? true : false) ? never : JSX.ElementChildrenAttribute)]?: S;
-};
 type __VLS_Prettify<T> = {
     [K in keyof T]: T[K];
 } & {};

package/lib/components/TextListWrapper.vue.js

@@ -1,20 +1,20 @@
-import { defineComponent as l, ref as s, onMounted as a, onUpdated as d, openBlock as f, createBlock as u, resolveDynamicComponent as m, unref as c, withCtx as i, renderSlot as _ } from "vue";
+import { defineComponent as s, ref as a, onMounted as d, onUpdated as f, openBlock as l, createBlock as m, resolveDynamicComponent as u, unref as c, withCtx as i, renderSlot as _ } from "vue";
 import { getPrefixedTagName as y, syncProperties as o } from "../../utils.js";
-const g = /* @__PURE__ */ l({
+const g = /* @__PURE__ */ s({
   __name: "TextListWrapper",
   props: {
-    listType: null,
-    orderType: null,
+    listType: {},
+    orderType: {},
     theme: { default: "light" },
     type: { default: "unordered" }
   },
   setup(n) {
-    const t = n, r = y("p-text-list"), e = s();
-    return a(() => {
+    const t = n, r = y("p-text-list"), e = a();
+    return d(() => {
       o(e.value, t);
-    }), d(() => {
+    }), f(() => {
       o(e.value, t);
-    }), (p, C) => (f(), u(m(c(r)), {
+    }), (p, C) => (l(), m(u(c(r)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {

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

@@ -1,4 +1,3 @@
-/** __vue_virtual_code_placeholder */
 import type { TextAlign, TextColor, BreakpointCustomizable, TextSize, TextTag, Theme, TextWeight } from '../types';
 type PTextProps = {
     /**
@@ -54,7 +53,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     align: "center" | "left" | "right";
     color: "default" | "inherit" | "primary" | "contrast-low" | "contrast-medium" | "contrast-high" | "notification-success" | "notification-warning" | "notification-error" | "notification-info" | "brand" | "neutral-contrast-low" | "neutral-contrast-medium" | "neutral-contrast-high" | "notification-neutral";
     ellipsis: boolean;
-}>, {
+}, {}>, {
     default?(_: {}): any;
 }>;
 export default _default;
@@ -75,12 +74,8 @@ type __VLS_WithDefaults<P, D> = {
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
-        $props: __VLS_PropsChildren<S>;
     };
 };
-type __VLS_PropsChildren<S> = {
-    [K in keyof (boolean extends (JSX.ElementChildrenAttribute extends never ? true : false) ? never : JSX.ElementChildrenAttribute)]?: S;
-};
 type __VLS_Prettify<T> = {
     [K in keyof T]: T[K];
 } & {};

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

@@ -1,4 +1,3 @@
-/** __vue_virtual_code_placeholder */
 import type { BreakpointCustomizable, TextareaWrapperState, Theme } from '../types';
 type PTextareaWrapperProps = {
     /**
@@ -58,7 +57,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     hideLabel: BreakpointCustomizable<boolean>;
     message: string;
     showCounter: boolean;
-}>, {
+}, {}>, {
     default?(_: {}): any;
 }>;
 export default _default;
@@ -79,12 +78,8 @@ type __VLS_WithDefaults<P, D> = {
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
-        $props: __VLS_PropsChildren<S>;
     };
 };
-type __VLS_PropsChildren<S> = {
-    [K in keyof (boolean extends (JSX.ElementChildrenAttribute extends never ? true : false) ? never : JSX.ElementChildrenAttribute)]?: S;
-};
 type __VLS_Prettify<T> = {
     [K in keyof T]: T[K];
 } & {};

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

@@ -1,4 +1,3 @@
-/** __vue_virtual_code_placeholder */
 import type { Theme } from '../types';
 type PToastProps = {
     /**
@@ -12,7 +11,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     theme: string;
 }>>>, {
     theme: "light" | "dark";
-}>;
+}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

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

@@ -1,4 +1,3 @@
-/** __vue_virtual_code_placeholder */
 import type { SelectedAriaAttributes, WordmarkAriaAttribute, WordmarkSize, WordmarkTarget, Theme } from '../types';
 type PWordmarkProps = {
     /**
@@ -34,7 +33,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     size: "inherit" | "small";
     theme: "light" | "dark";
     target: string;
-}>;
+}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

package/lib/components/WordmarkWrapper.vue.js

@@ -1,21 +1,21 @@
-import { defineComponent as a, ref as p, onMounted as l, onUpdated as f, openBlock as m, createBlock as s, resolveDynamicComponent as u, unref as c } from "vue";
-import { getPrefixedTagName as d, syncProperties as n } from "../../utils.js";
+import { defineComponent as a, ref as p, onMounted as f, onUpdated as m, openBlock as s, createBlock as l, resolveDynamicComponent as c, unref as d } from "vue";
+import { getPrefixedTagName as u, syncProperties as r } from "../../utils.js";
 const C = /* @__PURE__ */ a({
   __name: "WordmarkWrapper",
   props: {
-    aria: null,
-    href: null,
+    aria: {},
+    href: {},
     size: { default: "small" },
     target: { default: "_self" },
     theme: { default: "light" }
   },
-  setup(r) {
-    const o = r, t = d("p-wordmark"), e = p();
-    return l(() => {
-      n(e.value, o);
-    }), f(() => {
-      n(e.value, o);
-    }), (i, _) => (m(), s(u(c(t)), {
+  setup(t) {
+    const o = t, n = u("p-wordmark"), e = p();
+    return f(() => {
+      r(e.value, o);
+    }), m(() => {
+      r(e.value, o);
+    }), (i, _) => (s(), l(c(d(n)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, null, 512));

package/lib/components/index.d.ts

@@ -14,6 +14,7 @@ export { default as PFieldset } from './FieldsetWrapper.vue';
 export { default as PFieldsetWrapper } from './FieldsetWrapperWrapper.vue';
 export { default as PFlex } from './FlexWrapper.vue';
 export { default as PFlexItem } from './FlexItemWrapper.vue';
+export { default as PFlyout } from './FlyoutWrapper.vue';
 export { default as PGrid } from './GridWrapper.vue';
 export { default as PGridItem } from './GridItemWrapper.vue';
 export { default as PHeading } from './HeadingWrapper.vue';

package/lib/types.d.ts

@@ -45,6 +45,7 @@ declare const ICON_NAMES: readonly [
     "co2-emission",
     "compare",
     "configurate",
+    "copy",
     "country-road",
     "cubic-capacity",
     "delete",
@@ -58,12 +59,15 @@ declare const ICON_NAMES: readonly [
     "exclamation",
     "external",
     "filter",
+    "fingerprint",
     "flash",
     "fuel-station",
     "garage",
     "gift",
     "globe",
     "grid",
+    "heart",
+    "heart-filled",
     "highway",
     "home",
     "horn",
@@ -143,6 +147,8 @@ declare const ICON_NAMES: readonly [
     "refresh",
     "replay",
     "reset",
+    "roof-closed",
+    "roof-open",
     "route",
     "rss",
     "save",
@@ -168,6 +174,7 @@ declare const ICON_NAMES: readonly [
     "switch",
     "tablet",
     "tachometer",
+    "tire",
     "truck",
     "upload",
     "user",
@@ -750,6 +757,15 @@ declare const FLEX_ITEM_FLEXS: readonly [
     "equal"
 ];
 export type FlexItemFlex = typeof FLEX_ITEM_FLEXS[number];
+declare const FLYOUT_POSITIONS: readonly [
+    "left",
+    "right"
+];
+export type FlyoutPosition = (typeof FLYOUT_POSITIONS)[number];
+declare const FLYOUT_ARIA_ATTRIBUTES: readonly [
+    "aria-label"
+];
+export type FlyoutAriaAttribute = (typeof FLYOUT_ARIA_ATTRIBUTES)[number];
 declare const GRID_DIRECTIONS: readonly [
     "row",
     "row-reverse",
@@ -1003,7 +1019,7 @@ declare const DROPDOWN_DIRECTIONS: readonly [
     "up",
     "auto"
 ];
-export type SelectWrapperDropdownDirection = typeof DROPDOWN_DIRECTIONS[number];
+export type SelectWrapperDropdownDirection = (typeof DROPDOWN_DIRECTIONS)[number];
 export type SelectWrapperState = FormState;
 declare const SPINNER_SIZES: readonly [
     "small",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-vue",
-  "version": "3.1.0-rc.0",
+  "version": "3.1.0-rc.2",
   "description": "Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.",
   "keywords": [
     "porsche",
@@ -17,7 +17,7 @@
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.porsche.com",
   "dependencies": {
-    "@porsche-design-system/components-js": "3.1.0-rc.0"
+    "@porsche-design-system/components-js": "3.1.0-rc.2"
   },
   "peerDependencies": {
     "vue": ">=3.0.0 <4.0.0"