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

package/esm/plugin.d.ts

@@ -0,0 +1,14 @@
+import type { App, InjectionKey } from 'vue';
+export type PorscheDesignSystemPluginOptions = {
+    prefix?: string;
+    extends?: Record<string, unknown>;
+};
+export type PorscheDesignSystemPlugin = {
+    [key: string]: any;
+    install: (app: App, options?: PorscheDesignSystemPluginOptions) => void;
+};
+export declare const porscheDesignSystemSymbol: InjectionKey<PorscheDesignSystemPlugin>;
+export declare function usePorscheDesignSystemPlugin(): PorscheDesignSystemPlugin;
+export declare function createPorscheDesignSystem(options?: {
+    prefix: string;
+}): PorscheDesignSystemPlugin;

package/esm/public-api.d.ts

@@ -0,0 +1,6 @@
+export { componentsReady } from '@porsche-design-system/components-js';
+export * from './lib/components';
+export * from './lib/types';
+export { useToastManager } from './utils';
+export { default as PorscheDesignSystemProvider } from './PorscheDesignSystemProvider.vue';
+export { createPorscheDesignSystem, usePorscheDesignSystemPlugin } from './plugin';

package/esm/public-api.mjs

@@ -5,72 +5,73 @@ import { default as s } from "./lib/components/ButtonWrapper.vue.mjs";
 import { default as u } from "./lib/components/ButtonGroupWrapper.vue.mjs";
 import { default as x } from "./lib/components/ButtonPureWrapper.vue.mjs";
 import { default as i } from "./lib/components/ButtonTileWrapper.vue.mjs";
-import { default as T } from "./lib/components/CarouselWrapper.vue.mjs";
-import { default as S } from "./lib/components/CheckboxWrapperWrapper.vue.mjs";
-import { default as b } from "./lib/components/ContentWrapperWrapper.vue.mjs";
-import { default as C } from "./lib/components/CrestWrapper.vue.mjs";
-import { default as k } from "./lib/components/DisplayWrapper.vue.mjs";
-import { default as F } from "./lib/components/DividerWrapper.vue.mjs";
-import { default as W } from "./lib/components/FieldsetWrapper.vue.mjs";
-import { default as M } from "./lib/components/FieldsetWrapperWrapper.vue.mjs";
-import { default as h } from "./lib/components/FlexWrapper.vue.mjs";
-import { default as R } from "./lib/components/FlexItemWrapper.vue.mjs";
-import { default as G } from "./lib/components/FlyoutWrapper.vue.mjs";
-import { default as z } from "./lib/components/FlyoutNavigationWrapper.vue.mjs";
-import { default as q } from "./lib/components/FlyoutNavigationItemWrapper.vue.mjs";
-import { default as j } from "./lib/components/GridWrapper.vue.mjs";
-import { default as J } from "./lib/components/GridItemWrapper.vue.mjs";
-import { default as Q } from "./lib/components/HeadingWrapper.vue.mjs";
-import { default as V } from "./lib/components/HeadlineWrapper.vue.mjs";
-import { default as Y } from "./lib/components/IconWrapper.vue.mjs";
-import { default as _ } from "./lib/components/InlineNotificationWrapper.vue.mjs";
-import { default as ee } from "./lib/components/LinkWrapper.vue.mjs";
-import { default as oe } from "./lib/components/LinkPureWrapper.vue.mjs";
-import { default as ae } from "./lib/components/LinkSocialWrapper.vue.mjs";
-import { default as le } from "./lib/components/LinkTileWrapper.vue.mjs";
-import { default as se } from "./lib/components/LinkTileModelSignatureWrapper.vue.mjs";
-import { default as ue } from "./lib/components/LinkTileProductWrapper.vue.mjs";
-import { default as xe } from "./lib/components/MarqueWrapper.vue.mjs";
-import { default as ie } from "./lib/components/ModalWrapper.vue.mjs";
-import { default as Te } from "./lib/components/ModelSignatureWrapper.vue.mjs";
-import { default as Se } from "./lib/components/MultiSelectWrapper.vue.mjs";
-import { default as be } from "./lib/components/MultiSelectOptionWrapper.vue.mjs";
-import { default as Ce } from "./lib/components/PaginationWrapper.vue.mjs";
-import { default as ke } from "./lib/components/PinCodeWrapper.vue.mjs";
-import { default as Fe } from "./lib/components/PopoverWrapper.vue.mjs";
-import { default as We } from "./lib/components/RadioButtonWrapperWrapper.vue.mjs";
-import { default as Me } from "./lib/components/ScrollerWrapper.vue.mjs";
-import { default as he } from "./lib/components/SegmentedControlWrapper.vue.mjs";
-import { default as Re } from "./lib/components/SegmentedControlItemWrapper.vue.mjs";
-import { default as Ge } from "./lib/components/SelectWrapper.vue.mjs";
-import { default as ze } from "./lib/components/SelectOptionWrapper.vue.mjs";
-import { default as qe } from "./lib/components/SelectWrapperWrapper.vue.mjs";
-import { default as je } from "./lib/components/SpinnerWrapper.vue.mjs";
-import { default as Je } from "./lib/components/StepperHorizontalWrapper.vue.mjs";
-import { default as Qe } from "./lib/components/StepperHorizontalItemWrapper.vue.mjs";
-import { default as Ve } from "./lib/components/SwitchWrapper.vue.mjs";
-import { default as Ye } from "./lib/components/TableWrapper.vue.mjs";
-import { default as _e } from "./lib/components/TableBodyWrapper.vue.mjs";
-import { default as et } from "./lib/components/TableCellWrapper.vue.mjs";
-import { default as ot } from "./lib/components/TableHeadWrapper.vue.mjs";
-import { default as at } from "./lib/components/TableHeadCellWrapper.vue.mjs";
-import { default as lt } from "./lib/components/TableHeadRowWrapper.vue.mjs";
-import { default as st } from "./lib/components/TableRowWrapper.vue.mjs";
-import { default as ut } from "./lib/components/TabsWrapper.vue.mjs";
-import { default as xt } from "./lib/components/TabsBarWrapper.vue.mjs";
-import { default as it } from "./lib/components/TabsItemWrapper.vue.mjs";
-import { default as Tt } from "./lib/components/TagWrapper.vue.mjs";
-import { default as St } from "./lib/components/TagDismissibleWrapper.vue.mjs";
-import { default as bt } from "./lib/components/TextWrapper.vue.mjs";
-import { default as Ct } from "./lib/components/TextFieldWrapperWrapper.vue.mjs";
-import { default as kt } from "./lib/components/TextListWrapper.vue.mjs";
-import { default as Ft } from "./lib/components/TextListItemWrapper.vue.mjs";
-import { default as Wt } from "./lib/components/TextareaWrapperWrapper.vue.mjs";
-import { default as Mt } from "./lib/components/ToastWrapper.vue.mjs";
-import { default as ht } from "./lib/components/WordmarkWrapper.vue.mjs";
-import { useToastManager as Rt } from "./utils.mjs";
-import { default as Gt } from "./PorscheDesignSystemProvider.vue.mjs";
-import { createPorscheDesignSystem as zt, usePorscheDesignSystemPlugin as Ot } from "./plugin.mjs";
+import { default as T } from "./lib/components/CanvasWrapper.vue.mjs";
+import { default as S } from "./lib/components/CarouselWrapper.vue.mjs";
+import { default as b } from "./lib/components/CheckboxWrapperWrapper.vue.mjs";
+import { default as y } from "./lib/components/ContentWrapperWrapper.vue.mjs";
+import { default as M } from "./lib/components/CrestWrapper.vue.mjs";
+import { default as B } from "./lib/components/DisplayWrapper.vue.mjs";
+import { default as L } from "./lib/components/DividerWrapper.vue.mjs";
+import { default as H } from "./lib/components/FieldsetWrapper.vue.mjs";
+import { default as D } from "./lib/components/FieldsetWrapperWrapper.vue.mjs";
+import { default as R } from "./lib/components/FlexWrapper.vue.mjs";
+import { default as G } from "./lib/components/FlexItemWrapper.vue.mjs";
+import { default as O } from "./lib/components/FlyoutWrapper.vue.mjs";
+import { default as A } from "./lib/components/FlyoutMultilevelWrapper.vue.mjs";
+import { default as j } from "./lib/components/FlyoutMultilevelItemWrapper.vue.mjs";
+import { default as J } from "./lib/components/GridWrapper.vue.mjs";
+import { default as Q } from "./lib/components/GridItemWrapper.vue.mjs";
+import { default as V } from "./lib/components/HeadingWrapper.vue.mjs";
+import { default as Y } from "./lib/components/HeadlineWrapper.vue.mjs";
+import { default as _ } from "./lib/components/IconWrapper.vue.mjs";
+import { default as ee } from "./lib/components/InlineNotificationWrapper.vue.mjs";
+import { default as oe } from "./lib/components/LinkWrapper.vue.mjs";
+import { default as ae } from "./lib/components/LinkPureWrapper.vue.mjs";
+import { default as le } from "./lib/components/LinkSocialWrapper.vue.mjs";
+import { default as se } from "./lib/components/LinkTileWrapper.vue.mjs";
+import { default as ue } from "./lib/components/LinkTileModelSignatureWrapper.vue.mjs";
+import { default as xe } from "./lib/components/LinkTileProductWrapper.vue.mjs";
+import { default as ie } from "./lib/components/MarqueWrapper.vue.mjs";
+import { default as Te } from "./lib/components/ModalWrapper.vue.mjs";
+import { default as Se } from "./lib/components/ModelSignatureWrapper.vue.mjs";
+import { default as be } from "./lib/components/MultiSelectWrapper.vue.mjs";
+import { default as ye } from "./lib/components/MultiSelectOptionWrapper.vue.mjs";
+import { default as Me } from "./lib/components/PaginationWrapper.vue.mjs";
+import { default as Be } from "./lib/components/PinCodeWrapper.vue.mjs";
+import { default as Le } from "./lib/components/PopoverWrapper.vue.mjs";
+import { default as He } from "./lib/components/RadioButtonWrapperWrapper.vue.mjs";
+import { default as De } from "./lib/components/ScrollerWrapper.vue.mjs";
+import { default as Re } from "./lib/components/SegmentedControlWrapper.vue.mjs";
+import { default as Ge } from "./lib/components/SegmentedControlItemWrapper.vue.mjs";
+import { default as Oe } from "./lib/components/SelectWrapper.vue.mjs";
+import { default as Ae } from "./lib/components/SelectOptionWrapper.vue.mjs";
+import { default as je } from "./lib/components/SelectWrapperWrapper.vue.mjs";
+import { default as Je } from "./lib/components/SpinnerWrapper.vue.mjs";
+import { default as Qe } from "./lib/components/StepperHorizontalWrapper.vue.mjs";
+import { default as Ve } from "./lib/components/StepperHorizontalItemWrapper.vue.mjs";
+import { default as Ye } from "./lib/components/SwitchWrapper.vue.mjs";
+import { default as _e } from "./lib/components/TableWrapper.vue.mjs";
+import { default as et } from "./lib/components/TableBodyWrapper.vue.mjs";
+import { default as ot } from "./lib/components/TableCellWrapper.vue.mjs";
+import { default as at } from "./lib/components/TableHeadWrapper.vue.mjs";
+import { default as lt } from "./lib/components/TableHeadCellWrapper.vue.mjs";
+import { default as st } from "./lib/components/TableHeadRowWrapper.vue.mjs";
+import { default as ut } from "./lib/components/TableRowWrapper.vue.mjs";
+import { default as xt } from "./lib/components/TabsWrapper.vue.mjs";
+import { default as it } from "./lib/components/TabsBarWrapper.vue.mjs";
+import { default as Tt } from "./lib/components/TabsItemWrapper.vue.mjs";
+import { default as St } from "./lib/components/TagWrapper.vue.mjs";
+import { default as bt } from "./lib/components/TagDismissibleWrapper.vue.mjs";
+import { default as yt } from "./lib/components/TextWrapper.vue.mjs";
+import { default as Mt } from "./lib/components/TextFieldWrapperWrapper.vue.mjs";
+import { default as Bt } from "./lib/components/TextListWrapper.vue.mjs";
+import { default as Lt } from "./lib/components/TextListItemWrapper.vue.mjs";
+import { default as Ht } from "./lib/components/TextareaWrapperWrapper.vue.mjs";
+import { default as Dt } from "./lib/components/ToastWrapper.vue.mjs";
+import { default as Rt } from "./lib/components/WordmarkWrapper.vue.mjs";
+import { useToastManager as Gt } from "./utils.mjs";
+import { default as Ot } from "./PorscheDesignSystemProvider.vue.mjs";
+import { createPorscheDesignSystem as At, usePorscheDesignSystemPlugin as Nt } from "./plugin.mjs";
 export {
   a as PAccordion,
   l as PBanner,
@@ -78,72 +79,73 @@ export {
   u as PButtonGroup,
   x as PButtonPure,
   i as PButtonTile,
-  T as PCarousel,
-  S as PCheckboxWrapper,
-  b as PContentWrapper,
-  C as PCrest,
-  k as PDisplay,
-  F as PDivider,
-  W as PFieldset,
-  M as PFieldsetWrapper,
-  h as PFlex,
-  R as PFlexItem,
-  G as PFlyout,
-  z as PFlyoutNavigation,
-  q as PFlyoutNavigationItem,
-  j as PGrid,
-  J as PGridItem,
-  Q as PHeading,
-  V as PHeadline,
-  Y as PIcon,
-  _ as PInlineNotification,
-  ee as PLink,
-  oe as PLinkPure,
-  ae as PLinkSocial,
-  le as PLinkTile,
-  se as PLinkTileModelSignature,
-  ue as PLinkTileProduct,
-  xe as PMarque,
-  ie as PModal,
-  Te as PModelSignature,
-  Se as PMultiSelect,
-  be as PMultiSelectOption,
-  Ce as PPagination,
-  ke as PPinCode,
-  Fe as PPopover,
-  We as PRadioButtonWrapper,
-  Me as PScroller,
-  he as PSegmentedControl,
-  Re as PSegmentedControlItem,
-  Ge as PSelect,
-  ze as PSelectOption,
-  qe as PSelectWrapper,
-  je as PSpinner,
-  Je as PStepperHorizontal,
-  Qe as PStepperHorizontalItem,
-  Ve as PSwitch,
-  Ye as PTable,
-  _e as PTableBody,
-  et as PTableCell,
-  ot as PTableHead,
-  at as PTableHeadCell,
-  lt as PTableHeadRow,
-  st as PTableRow,
-  ut as PTabs,
-  xt as PTabsBar,
-  it as PTabsItem,
-  Tt as PTag,
-  St as PTagDismissible,
-  bt as PText,
-  Ct as PTextFieldWrapper,
-  kt as PTextList,
-  Ft as PTextListItem,
-  Wt as PTextareaWrapper,
-  Mt as PToast,
-  ht as PWordmark,
-  Gt as PorscheDesignSystemProvider,
+  T as PCanvas,
+  S as PCarousel,
+  b as PCheckboxWrapper,
+  y as PContentWrapper,
+  M as PCrest,
+  B as PDisplay,
+  L as PDivider,
+  H as PFieldset,
+  D as PFieldsetWrapper,
+  R as PFlex,
+  G as PFlexItem,
+  O as PFlyout,
+  A as PFlyoutMultilevel,
+  j as PFlyoutMultilevelItem,
+  J as PGrid,
+  Q as PGridItem,
+  V as PHeading,
+  Y as PHeadline,
+  _ as PIcon,
+  ee as PInlineNotification,
+  oe as PLink,
+  ae as PLinkPure,
+  le as PLinkSocial,
+  se as PLinkTile,
+  ue as PLinkTileModelSignature,
+  xe as PLinkTileProduct,
+  ie as PMarque,
+  Te as PModal,
+  Se as PModelSignature,
+  be as PMultiSelect,
+  ye as PMultiSelectOption,
+  Me as PPagination,
+  Be as PPinCode,
+  Le as PPopover,
+  He as PRadioButtonWrapper,
+  De as PScroller,
+  Re as PSegmentedControl,
+  Ge as PSegmentedControlItem,
+  Oe as PSelect,
+  Ae as PSelectOption,
+  je as PSelectWrapper,
+  Je as PSpinner,
+  Qe as PStepperHorizontal,
+  Ve as PStepperHorizontalItem,
+  Ye as PSwitch,
+  _e as PTable,
+  et as PTableBody,
+  ot as PTableCell,
+  at as PTableHead,
+  lt as PTableHeadCell,
+  st as PTableHeadRow,
+  ut as PTableRow,
+  xt as PTabs,
+  it as PTabsBar,
+  Tt as PTabsItem,
+  St as PTag,
+  bt as PTagDismissible,
+  yt as PText,
+  Mt as PTextFieldWrapper,
+  Bt as PTextList,
+  Lt as PTextListItem,
+  Ht as PTextareaWrapper,
+  Dt as PToast,
+  Rt as PWordmark,
+  Ot as PorscheDesignSystemProvider,
   o as componentsReady,
-  zt as createPorscheDesignSystem,
-  Ot as usePorscheDesignSystemPlugin,
-  Rt as useToastManager
+  At as createPorscheDesignSystem,
+  Nt as usePorscheDesignSystemPlugin,
+  Gt as useToastManager
 };

package/esm/utils.d.ts

@@ -0,0 +1,10 @@
+import type { InjectionKey, Ref } from 'vue';
+import type { ToastMessage } from './lib/types';
+export declare const prefixInjectionKey: InjectionKey<string>;
+export declare const themeInjectionKey: InjectionKey<Ref<"light" | "dark" | "auto">>;
+export declare const usePrefix: (tagName: string) => string;
+export declare const syncProperties: <T extends HTMLElement>(elementRef: Ref<T | undefined>, props: Partial<T>) => void;
+export declare const addEventListenerToElementRef: <T extends HTMLElement, E extends string>(elementRef: Ref<T | undefined>, eventName: E, emit: (eventName: E, detail: any) => void) => void;
+export declare const useToastManager: () => {
+    addMessage: (message: ToastMessage) => void;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-vue",
-  "version": "3.16.0-rc.0",
+  "version": "3.16.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.16.0-rc.0"
+    "@porsche-design-system/components-js": "3.16.0-rc.2"
   },
   "peerDependencies": {
     "vue": ">=3.0.0 <4.0.0"

package/cjs/lib/components/FlyoutNavigationItemWrapper.vue.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("vue"),o=require("../../utils.cjs"),c=e.defineComponent({__name:"FlyoutNavigationItemWrapper",props:{identifier:{},label:{}},setup(r){const s=o.usePrefix("p-flyout-navigation-item"),p=r,t=e.ref(),n=()=>o.syncProperties(t,p);return e.onMounted(n),e.onUpdated(n),(i,a)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(s)),{ref_key:"pdsComponentRef",ref:t},{default:e.withCtx(()=>[e.renderSlot(i.$slots,"default")]),_:3},512))}});module.exports=c;

package/cjs/lib/components/FlyoutNavigationItemWrapper.vue2.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("./FlyoutNavigationItemWrapper.vue.cjs");module.exports=e;

package/cjs/lib/components/FlyoutNavigationWrapper.vue.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("vue"),t=require("../../utils.cjs"),d=e.defineComponent({__name:"FlyoutNavigationWrapper",props:{activeIdentifier:{},aria:{},open:{type:Boolean,default:!1},theme:{}},emits:["dismiss","update"],setup(p,{emit:c}){const m=t.usePrefix("p-flyout-navigation"),o=p,n=e.ref(),r=c,i=e.inject(t.themeInjectionKey),a=()=>t.syncProperties(n,{...o,theme:o.theme||i.value});return e.onMounted(()=>{a(),t.addEventListenerToElementRef(n,"dismiss",r),t.addEventListenerToElementRef(n,"update",r)}),e.onUpdated(a),e.watch(i,s=>{t.syncProperties(n,{theme:o.theme||s})}),(s,u)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(m)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default")]),_:3},512))}});module.exports=d;

package/cjs/lib/components/FlyoutNavigationWrapper.vue2.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("./FlyoutNavigationWrapper.vue.cjs");module.exports=e;

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

@@ -1,24 +0,0 @@
-import { defineComponent as s, ref as a, onMounted as f, onUpdated as i, openBlock as c, createBlock as m, resolveDynamicComponent as l, unref as d, withCtx as u, renderSlot as _ } from "vue";
-import { usePrefix as y, syncProperties as C } from "../../utils.mjs";
-const x = /* @__PURE__ */ s({
-  __name: "FlyoutNavigationItemWrapper",
-  props: {
-    identifier: {},
-    label: {}
-  },
-  setup(t) {
-    const n = y("p-flyout-navigation-item"), r = t, e = a(), o = () => C(e, r);
-    return f(o), i(o), (p, g) => (c(), m(l(d(n)), {
-      ref_key: "pdsComponentRef",
-      ref: e
-    }, {
-      default: u(() => [
-        _(p.$slots, "default")
-      ]),
-      _: 3
-    }, 512));
-  }
-});
-export {
-  x as default
-};

package/esm/lib/components/FlyoutNavigationItemWrapper.vue2.mjs

@@ -1,4 +0,0 @@
-import f from "./FlyoutNavigationItemWrapper.vue.mjs";
-export {
-  f as default
-};

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

@@ -1,31 +0,0 @@
-import { defineComponent as f, ref as d, inject as l, onMounted as u, onUpdated as h, watch as y, openBlock as _, createBlock as v, resolveDynamicComponent as C, unref as R, withCtx as g, renderSlot as k } from "vue";
-import { usePrefix as w, themeInjectionKey as x, addEventListenerToElementRef as a, syncProperties as i } from "../../utils.mjs";
-const E = /* @__PURE__ */ f({
-  __name: "FlyoutNavigationWrapper",
-  props: {
-    activeIdentifier: {},
-    aria: {},
-    open: { type: Boolean, default: !1 },
-    theme: {}
-  },
-  emits: ["dismiss", "update"],
-  setup(p, { emit: m }) {
-    const c = w("p-flyout-navigation"), t = p, e = d(), n = m, s = l(x), r = () => i(e, { ...t, theme: t.theme || s.value });
-    return u(() => {
-      r(), a(e, "dismiss", n), a(e, "update", n);
-    }), h(r), y(s, (o) => {
-      i(e, { theme: t.theme || o });
-    }), (o, B) => (_(), v(C(R(c)), {
-      ref_key: "pdsComponentRef",
-      ref: e
-    }, {
-      default: g(() => [
-        k(o.$slots, "default")
-      ]),
-      _: 3
-    }, 512));
-  }
-});
-export {
-  E as default
-};

package/esm/lib/components/FlyoutNavigationWrapper.vue2.mjs

@@ -1,4 +0,0 @@
-import f from "./FlyoutNavigationWrapper.vue.mjs";
-export {
-  f as default
-};