@porsche-design-system/components-vue 3.0.0-alpha.0 → 3.0.0-alpha.2

package/lib/types.d.ts

@@ -262,20 +262,20 @@ declare const TEXT_ALIGNS: readonly [
 export declare type TextAlign = typeof TEXT_ALIGNS[number];
 declare const TEXT_COLORS: readonly [
     "primary",
-    "brand",
-    "default",
     "contrast-low",
-    "neutral-contrast-low",
     "contrast-medium",
-    "neutral-contrast-medium",
     "contrast-high",
-    "neutral-contrast-high",
     "notification-success",
     "notification-warning",
     "notification-error",
     "notification-info",
-    "notification-neutral",
-    "inherit"
+    "inherit",
+    "brand",
+    "default",
+    "neutral-contrast-low",
+    "neutral-contrast-medium",
+    "neutral-contrast-high",
+    "notification-neutral"
 ];
 export declare type TextColor = typeof TEXT_COLORS[number];
 declare const TEXT_SIZES: readonly [
@@ -288,11 +288,11 @@ declare const TEXT_SIZES: readonly [
 ];
 export declare type TextSize = typeof TEXT_SIZES[number];
 declare const TEXT_WEIGHTS: readonly [
-    "thin",
     "regular",
-    "semibold",
     "semi-bold",
-    "bold"
+    "bold",
+    "thin",
+    "semibold"
 ];
 export declare type TextWeight = typeof TEXT_WEIGHTS[number];
 declare const LINK_TARGETS: readonly [
@@ -503,15 +503,15 @@ export declare type AccordionChangeEvent = {
 };
 export declare type AccordionTag = HeadingTag;
 declare const BANNER_STATES: readonly [
-    "error",
-    "warning",
     "info",
+    "warning",
+    "error",
     "neutral"
 ];
 export declare type BannerState = typeof BANNER_STATES[number];
 declare const BANNER_WIDTHS: readonly [
-    "basic",
     "extended",
+    "basic",
     "fluid"
 ];
 export declare type BannerWidth = typeof BANNER_WIDTHS[number];
@@ -520,6 +520,16 @@ declare const BUTTON_GROUP_DIRECTIONS: readonly [
     "column"
 ];
 export declare type ButtonGroupDirection = typeof BUTTON_GROUP_DIRECTIONS[number];
+declare const CAROUSEL_WIDTHS: readonly [
+    "basic",
+    "extended"
+];
+export declare type CarouselWidth = typeof CAROUSEL_WIDTHS[number];
+declare const CAROUSEL_ALIGN_HEADERS: readonly [
+    "left",
+    "center"
+];
+export declare type CarouselAlignHeader = typeof CAROUSEL_ALIGN_HEADERS[number];
 export declare type CarouselInternationalization = Partial<Record<"prev" | "next" | "first" | "last" | "slideLabel" | "slide", string>>;
 export declare type CarouselChangeEvent = {
     activeIndex: number;
@@ -560,6 +570,9 @@ declare const DISPLAY_COLORS: readonly [
 export declare type DisplayColor = typeof DISPLAY_COLORS[number];
 export declare type DisplayAlign = TextAlign;
 declare const DIVIDER_COLORS: readonly [
+    "contrast-low",
+    "contrast-medium",
+    "contrast-high",
     "neutral-contrast-high",
     "neutral-contrast-medium",
     "neutral-contrast-low"
@@ -757,13 +770,31 @@ declare const ICON_ARIA_ATTRIBUTES: readonly [
 ];
 export declare type IconAriaAttribute = typeof ICON_ARIA_ATTRIBUTES[number];
 export declare type IconSize = TextSize;
-export declare type IconColor = TextColor;
+declare const ICON_COLORS: readonly [
+    "primary",
+    "contrast-low",
+    "contrast-medium",
+    "contrast-high",
+    "notification-success",
+    "notification-warning",
+    "notification-error",
+    "notification-info",
+    "inherit",
+    "brand",
+    "default",
+    "neutral-contrast-low",
+    "neutral-contrast-medium",
+    "neutral-contrast-high",
+    "notification-neutral",
+    "disabled"
+];
+export declare type IconColor = typeof ICON_COLORS[number];
 declare const INLINE_NOTIFICATION_STATES: readonly [
-    "error",
-    "warning",
+    "success",
     "info",
-    "neutral",
-    "success"
+    "warning",
+    "error",
+    "neutral"
 ];
 export declare type InlineNotificationState = typeof INLINE_NOTIFICATION_STATES[number];
 declare const LINK_ARIA_ATTRIBUTES: readonly [
@@ -808,6 +839,32 @@ declare const MODAL_ARIA_ATTRIBUTES: readonly [
     "aria-label"
 ];
 export declare type ModalAriaAttribute = typeof MODAL_ARIA_ATTRIBUTES[number];
+declare const MODEL_SIGNATURES_MANIFEST: {
+    "718": string;
+    "911": string;
+    boxster: string;
+    cayenne: string;
+    cayman: string;
+    macan: string;
+    panamera: string;
+    taycan: string;
+    "turbo-s": string;
+    turbo: string;
+};
+declare const MODEL_SIGNATURE_SIZES: readonly [
+    "small",
+    "inherit"
+];
+export declare type ModelSignatureSize = typeof MODEL_SIGNATURE_SIZES[number];
+export declare type ModelSignatureModel = keyof typeof MODEL_SIGNATURES_MANIFEST;
+declare const MODEL_SIGNATURE_COLORS: readonly [
+    "primary",
+    "contrast-low",
+    "contrast-medium",
+    "contrast-high",
+    "inherit"
+];
+export declare type ModelSignatureColor = typeof MODEL_SIGNATURE_COLORS[number];
 declare const PAGINATION_NUMBER_OF_PAGE_LINKS: readonly [
     5,
     7
@@ -887,29 +944,29 @@ export declare type TabChangeEvent = {
     activeTabIndex: number;
 };
 export declare type TabGradientColorTheme = GradientColorTheme;
+declare const TAG_DISMISSIBLE_COLORS: readonly [
+    "background-surface",
+    "background-base",
+    "background-default"
+];
+export declare type TagDismissibleColor = typeof TAG_DISMISSIBLE_COLORS[number];
+declare const TAG_DISMISSIBLE_ARIA_ATTRIBUTES: readonly [
+    "aria-label"
+];
+export declare type TagDismissibleAriaAttribute = typeof TAG_DISMISSIBLE_ARIA_ATTRIBUTES[number];
 declare const TAG_COLORS: readonly [
     "background-surface",
-    "background-default",
     "background-base",
-    "neutral-contrast-high",
+    "background-default",
     "primary",
-    "notification-neutral",
     "notification-info",
     "notification-warning",
     "notification-success",
-    "notification-error"
+    "notification-error",
+    "neutral-contrast-high",
+    "notification-neutral"
 ];
 export declare type TagColor = typeof TAG_COLORS[number];
-declare const TAG_DISMISSIBLE_COLORS: readonly [
-    "background-surface",
-    "background-default",
-    "background-base"
-];
-export declare type TagDismissibleColor = typeof TAG_DISMISSIBLE_COLORS[number];
-declare const TAG_DISMISSIBLE_ARIA_ATTRIBUTES: readonly [
-    "aria-label"
-];
-export declare type TagDismissibleAriaAttribute = typeof TAG_DISMISSIBLE_ARIA_ATTRIBUTES[number];
 declare const TEXT_TAGS: readonly [
     "p",
     "span",

package/package.json

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

package/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/plugin.js

@@ -0,0 +1,28 @@
+import { inject as n, ref as c } from "vue";
+import { componentsReady as i, load as m } from "@porsche-design-system/components-js";
+import { prefixInjectionKey as a } from "./utils.js";
+const t = Symbol();
+function u() {
+  const e = n(t);
+  if (!e)
+    throw new Error(
+      "[Porsche Design System Vue] No plugin was provided. Make sure to create one via `createPorscheDesignSystem()`."
+    );
+  return e;
+}
+function g(e = { prefix: "" }) {
+  const r = c(!1), s = {
+    options: e,
+    isPorscheDesignSystemLoaded: r,
+    componentsReady: i,
+    async install(o) {
+      r.value || (m({ prefix: e.prefix }), await i(), r.value = !0), o.provide(a, e.prefix), o.provide(t, s);
+    }
+  };
+  return s;
+}
+export {
+  g as createPorscheDesignSystem,
+  t as porscheDesignSystemSymbol,
+  u as usePorscheDesignSystemPlugin
+};

package/public-api.d.ts

@@ -3,3 +3,4 @@ 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/public-api.js

@@ -1,21 +1,21 @@
-import { componentsReady as r } from "@porsche-design-system/components-js";
+import { componentsReady as t } from "@porsche-design-system/components-js";
 import { default as o } from "./lib/components/AccordionWrapper.vue.js";
 import { default as l } from "./lib/components/BannerWrapper.vue.js";
-import { default as d } from "./lib/components/ButtonWrapper.vue.js";
+import { default as s } from "./lib/components/ButtonWrapper.vue.js";
 import { default as m } from "./lib/components/ButtonGroupWrapper.vue.js";
 import { default as x } from "./lib/components/ButtonPureWrapper.vue.js";
 import { default as i } from "./lib/components/CarouselWrapper.vue.js";
 import { default as T } from "./lib/components/CheckboxWrapperWrapper.vue.js";
-import { default as c } from "./lib/components/ContentWrapperWrapper.vue.js";
+import { default as S } from "./lib/components/ContentWrapperWrapper.vue.js";
 import { default as g } from "./lib/components/DisplayWrapper.vue.js";
 import { default as B } from "./lib/components/DividerWrapper.vue.js";
 import { default as H } from "./lib/components/FieldsetWrapperWrapper.vue.js";
-import { default as L } from "./lib/components/FlexWrapper.vue.js";
-import { default as y } from "./lib/components/FlexItemWrapper.vue.js";
-import { default as F } from "./lib/components/GridWrapper.vue.js";
-import { default as h } from "./lib/components/GridItemWrapper.vue.js";
-import { default as w } from "./lib/components/HeadingWrapper.vue.js";
-import { default as M } from "./lib/components/HeadlineWrapper.vue.js";
+import { default as y } from "./lib/components/FlexWrapper.vue.js";
+import { default as L } from "./lib/components/FlexItemWrapper.vue.js";
+import { default as k } from "./lib/components/GridWrapper.vue.js";
+import { default as M } from "./lib/components/GridItemWrapper.vue.js";
+import { default as v } from "./lib/components/HeadingWrapper.vue.js";
+import { default as G } from "./lib/components/HeadlineWrapper.vue.js";
 import { default as q } from "./lib/components/IconWrapper.vue.js";
 import { default as N } from "./lib/components/InlineNotificationWrapper.vue.js";
 import { default as E } from "./lib/components/LinkWrapper.vue.js";
@@ -24,55 +24,57 @@ import { default as Q } from "./lib/components/LinkSocialWrapper.vue.js";
 import { default as V } from "./lib/components/LinkTileWrapper.vue.js";
 import { default as Y } from "./lib/components/MarqueWrapper.vue.js";
 import { default as _ } from "./lib/components/ModalWrapper.vue.js";
-import { default as ee } from "./lib/components/PaginationWrapper.vue.js";
-import { default as re } from "./lib/components/PopoverWrapper.vue.js";
-import { default as oe } from "./lib/components/RadioButtonWrapperWrapper.vue.js";
-import { default as le } from "./lib/components/ScrollerWrapper.vue.js";
-import { default as de } from "./lib/components/SegmentedControlWrapper.vue.js";
-import { default as me } from "./lib/components/SegmentedControlItemWrapper.vue.js";
-import { default as xe } from "./lib/components/SelectWrapperWrapper.vue.js";
-import { default as ie } from "./lib/components/SpinnerWrapper.vue.js";
-import { default as Te } from "./lib/components/StepperHorizontalWrapper.vue.js";
-import { default as ce } from "./lib/components/StepperHorizontalItemWrapper.vue.js";
-import { default as ge } from "./lib/components/SwitchWrapper.vue.js";
-import { default as Be } from "./lib/components/TableWrapper.vue.js";
-import { default as He } from "./lib/components/TableBodyWrapper.vue.js";
+import { default as ee } from "./lib/components/ModelSignatureWrapper.vue.js";
+import { default as te } from "./lib/components/PaginationWrapper.vue.js";
+import { default as oe } from "./lib/components/PopoverWrapper.vue.js";
+import { default as le } from "./lib/components/RadioButtonWrapperWrapper.vue.js";
+import { default as se } from "./lib/components/ScrollerWrapper.vue.js";
+import { default as me } from "./lib/components/SegmentedControlWrapper.vue.js";
+import { default as xe } from "./lib/components/SegmentedControlItemWrapper.vue.js";
+import { default as ie } from "./lib/components/SelectWrapperWrapper.vue.js";
+import { default as Te } from "./lib/components/SpinnerWrapper.vue.js";
+import { default as Se } from "./lib/components/StepperHorizontalWrapper.vue.js";
+import { default as ge } from "./lib/components/StepperHorizontalItemWrapper.vue.js";
+import { default as Be } from "./lib/components/SwitchWrapper.vue.js";
+import { default as He } from "./lib/components/TableWrapper.vue.js";
+import { default as ye } from "./lib/components/TableBodyWrapper.vue.js";
 import { default as Le } from "./lib/components/TableCellWrapper.vue.js";
-import { default as ye } from "./lib/components/TableHeadWrapper.vue.js";
-import { default as Fe } from "./lib/components/TableHeadCellWrapper.vue.js";
-import { default as he } from "./lib/components/TableHeadRowWrapper.vue.js";
-import { default as we } from "./lib/components/TableRowWrapper.vue.js";
-import { default as Me } from "./lib/components/TabsWrapper.vue.js";
-import { default as qe } from "./lib/components/TabsBarWrapper.vue.js";
-import { default as Ne } from "./lib/components/TabsItemWrapper.vue.js";
-import { default as Ee } from "./lib/components/TagWrapper.vue.js";
-import { default as Ke } from "./lib/components/TagDismissibleWrapper.vue.js";
-import { default as Qe } from "./lib/components/TextWrapper.vue.js";
-import { default as Ve } from "./lib/components/TextFieldWrapperWrapper.vue.js";
-import { default as Ye } from "./lib/components/TextListWrapper.vue.js";
-import { default as _e } from "./lib/components/TextListItemWrapper.vue.js";
-import { default as ea } from "./lib/components/TextareaWrapperWrapper.vue.js";
-import { default as ra } from "./lib/components/ToastWrapper.vue.js";
-import { useToastManager as oa } from "./utils.js";
-import { default as la } from "./PorscheDesignSystemProvider.vue.js";
+import { default as ke } from "./lib/components/TableHeadWrapper.vue.js";
+import { default as Me } from "./lib/components/TableHeadCellWrapper.vue.js";
+import { default as ve } from "./lib/components/TableHeadRowWrapper.vue.js";
+import { default as Ge } from "./lib/components/TableRowWrapper.vue.js";
+import { default as qe } from "./lib/components/TabsWrapper.vue.js";
+import { default as Ne } from "./lib/components/TabsBarWrapper.vue.js";
+import { default as Ee } from "./lib/components/TabsItemWrapper.vue.js";
+import { default as Ke } from "./lib/components/TagWrapper.vue.js";
+import { default as Qe } from "./lib/components/TagDismissibleWrapper.vue.js";
+import { default as Ve } from "./lib/components/TextWrapper.vue.js";
+import { default as Ye } from "./lib/components/TextFieldWrapperWrapper.vue.js";
+import { default as _e } from "./lib/components/TextListWrapper.vue.js";
+import { default as er } from "./lib/components/TextListItemWrapper.vue.js";
+import { default as tr } from "./lib/components/TextareaWrapperWrapper.vue.js";
+import { default as or } from "./lib/components/ToastWrapper.vue.js";
+import { useToastManager as lr } from "./utils.js";
+import { default as sr } from "./PorscheDesignSystemProvider.vue.js";
+import { createPorscheDesignSystem as mr, usePorscheDesignSystemPlugin as ur } from "./plugin.js";
 export {
   o as PAccordion,
   l as PBanner,
-  d as PButton,
+  s as PButton,
   m as PButtonGroup,
   x as PButtonPure,
   i as PCarousel,
   T as PCheckboxWrapper,
-  c as PContentWrapper,
+  S as PContentWrapper,
   g as PDisplay,
   B as PDivider,
   H as PFieldsetWrapper,
-  L as PFlex,
-  y as PFlexItem,
-  F as PGrid,
-  h as PGridItem,
-  w as PHeading,
-  M as PHeadline,
+  y as PFlex,
+  L as PFlexItem,
+  k as PGrid,
+  M as PGridItem,
+  v as PHeading,
+  G as PHeadline,
   q as PIcon,
   N as PInlineNotification,
   E as PLink,
@@ -81,36 +83,39 @@ export {
   V as PLinkTile,
   Y as PMarque,
   _ as PModal,
-  ee as PPagination,
-  re as PPopover,
-  oe as PRadioButtonWrapper,
-  le as PScroller,
-  de as PSegmentedControl,
-  me as PSegmentedControlItem,
-  xe as PSelectWrapper,
-  ie as PSpinner,
-  Te as PStepperHorizontal,
-  ce as PStepperHorizontalItem,
-  ge as PSwitch,
-  Be as PTable,
-  He as PTableBody,
+  ee as PModelSignature,
+  te as PPagination,
+  oe as PPopover,
+  le as PRadioButtonWrapper,
+  se as PScroller,
+  me as PSegmentedControl,
+  xe as PSegmentedControlItem,
+  ie as PSelectWrapper,
+  Te as PSpinner,
+  Se as PStepperHorizontal,
+  ge as PStepperHorizontalItem,
+  Be as PSwitch,
+  He as PTable,
+  ye as PTableBody,
   Le as PTableCell,
-  ye as PTableHead,
-  Fe as PTableHeadCell,
-  he as PTableHeadRow,
-  we as PTableRow,
-  Me as PTabs,
-  qe as PTabsBar,
-  Ne as PTabsItem,
-  Ee as PTag,
-  Ke as PTagDismissible,
-  Qe as PText,
-  Ve as PTextFieldWrapper,
-  Ye as PTextList,
-  _e as PTextListItem,
-  ea as PTextareaWrapper,
-  ra as PToast,
-  la as PorscheDesignSystemProvider,
-  r as componentsReady,
-  oa as useToastManager
+  ke as PTableHead,
+  Me as PTableHeadCell,
+  ve as PTableHeadRow,
+  Ge as PTableRow,
+  qe as PTabs,
+  Ne as PTabsBar,
+  Ee as PTabsItem,
+  Ke as PTag,
+  Qe as PTagDismissible,
+  Ve as PText,
+  Ye as PTextFieldWrapper,
+  _e as PTextList,
+  er as PTextListItem,
+  tr as PTextareaWrapper,
+  or as PToast,
+  sr as PorscheDesignSystemProvider,
+  t as componentsReady,
+  mr as createPorscheDesignSystem,
+  ur as usePorscheDesignSystemPlugin,
+  lr as useToastManager
 };