@porsche-design-system/components-vue 3.0.0-alpha.1 → 3.0.0-alpha.3

package/lib/components/TextareaWrapperWrapper.vue.js

@@ -1,22 +1,23 @@
-import { defineComponent as p, ref as l, onMounted as f, onUpdated as s, openBlock as d, createBlock as u, resolveDynamicComponent as m, unref as c, withCtx as i, renderSlot as C } from "vue";
-import { getPrefixedTagName as h, syncProperties as a } from "../../utils.js";
-const w = /* @__PURE__ */ p({
+import { defineComponent as p, ref as l, onMounted as s, onUpdated as f, openBlock as d, createBlock as u, resolveDynamicComponent as m, unref as c, withCtx as i, renderSlot as C } from "vue";
+import { getPrefixedTagName as h, syncProperties as o } from "../../utils.js";
+const x = /* @__PURE__ */ p({
   __name: "TextareaWrapperWrapper",
   props: {
     description: { default: "" },
     hideLabel: { default: !1 },
     label: { default: "" },
     message: { default: "" },
-    showCharacterCount: { type: Boolean, default: !0 },
+    showCharacterCount: { type: Boolean },
+    showCounter: { type: Boolean, default: !0 },
     state: { default: "none" },
     theme: { default: "light" }
   },
-  setup(o) {
-    const t = o, r = h("p-textarea-wrapper"), e = l();
-    return f(() => {
-      a(e.value, t);
-    }), s(() => {
-      a(e.value, t);
+  setup(a) {
+    const t = a, r = h("p-textarea-wrapper"), e = l();
+    return s(() => {
+      o(e.value, t);
+    }), f(() => {
+      o(e.value, t);
     }), (n, _) => (d(), u(m(c(r)), {
       ref_key: "pdsComponentRef",
       ref: e
@@ -29,5 +30,5 @@ const w = /* @__PURE__ */ p({
   }
 });
 export {
-  w as default
+  x as default
 };

package/lib/components/index.d.ts

@@ -23,6 +23,7 @@ export { default as PLinkSocial } from './LinkSocialWrapper.vue';
 export { default as PLinkTile } from './LinkTileWrapper.vue';
 export { default as PMarque } from './MarqueWrapper.vue';
 export { default as PModal } from './ModalWrapper.vue';
+export { default as PModelSignature } from './ModelSignatureWrapper.vue';
 export { default as PPagination } from './PaginationWrapper.vue';
 export { default as PPopover } from './PopoverWrapper.vue';
 export { default as PRadioButtonWrapper } from './RadioButtonWrapperWrapper.vue';

package/lib/types.d.ts

@@ -209,12 +209,18 @@ export declare type BreakpointValues<T> = {
     base: T;
 };
 export declare type BreakpointCustomizable<T> = T | BreakpointValues<T>;
-declare const GRADIENT_COLOR_THEMES: readonly [
+declare const GRADIENT_COLOR_SCHEMES: readonly [
     "default",
     "surface"
 ];
-export declare type GradientColorTheme = typeof GRADIENT_COLOR_THEMES[number];
-export declare type ScrollToPosition = {
+/** @deprecated */
+export declare type ScrollerGradientColorScheme = typeof GRADIENT_COLOR_SCHEMES[number];
+declare const GRADIENT_COLORS: readonly [
+    "background-base",
+    "background-surface"
+];
+export declare type ScrollerGradientColor = typeof GRADIENT_COLORS[number];
+export declare type ScrollerScrollToPosition = {
     scrollPosition: number;
     isSmooth?: boolean;
 } | string;
@@ -222,7 +228,9 @@ declare const SCROLL_INDICATOR_POSITIONS: readonly [
     "top",
     "center"
 ];
-export declare type ScrollIndicatorPosition = typeof SCROLL_INDICATOR_POSITIONS[number];
+/** @deprecated */
+export declare type ScrollerScrollIndicatorPosition = typeof SCROLL_INDICATOR_POSITIONS[number];
+export declare type ScrollerAlignScrollIndicator = ScrollerScrollIndicatorPosition;
 declare const THEMES: readonly [
     "light",
     "dark"
@@ -262,23 +270,24 @@ 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 [
+    "xx-small",
     "x-small",
     "small",
     "medium",
@@ -288,11 +297,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,28 +512,46 @@ 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];
+export declare type ButtonIcon = LinkButtonIconName;
 declare const BUTTON_GROUP_DIRECTIONS: readonly [
     "row",
     "column"
 ];
 export declare type ButtonGroupDirection = typeof BUTTON_GROUP_DIRECTIONS[number];
+export declare type ButtonPureType = ButtonType;
+export declare type ButtonPureIcon = LinkButtonIconName;
+export declare type ButtonPureAriaAttribute = ButtonAriaAttribute;
+export declare type ButtonPureAlignLabel = AlignLabel;
+export declare type ButtonPureWeight = TextWeight;
+export declare type ButtonPureSize = TextSize;
+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;
     previousIndex: number;
 };
+export declare type CheckboxWrapperState = FormState;
 declare const CONTENT_WRAPPER_BACKGROUND_COLORS: readonly [
     "transparent",
     "default"
@@ -548,6 +575,7 @@ declare const DISPLAY_TAGS: readonly [
 ];
 export declare type DisplayTag = typeof DISPLAY_TAGS[number];
 declare const DISPLAY_SIZES: readonly [
+    "small",
     "medium",
     "large",
     "inherit"
@@ -560,21 +588,26 @@ 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"
 ];
 export declare type DividerColor = typeof DIVIDER_COLORS[number];
-declare const DIVIDER_ORIENTATIONS: readonly [
+declare const DIVIDER_DIRECTIONS: readonly [
     "vertical",
     "horizontal"
 ];
-export declare type DividerOrientation = typeof DIVIDER_ORIENTATIONS[number];
+export declare type DividerDirection = typeof DIVIDER_DIRECTIONS[number];
+export declare type DividerOrientation = DividerDirection;
 declare const FIELDSET_WRAPPER_LABEL_SIZES: readonly [
     "small",
     "medium"
 ];
 export declare type FieldsetWrapperLabelSize = typeof FIELDSET_WRAPPER_LABEL_SIZES[number];
+export declare type FieldsetWrapperState = FormState;
 export declare type FlexInline = boolean;
 declare const FLEX_WRAPS: readonly [
     "nowrap",
@@ -715,7 +748,6 @@ declare const HEADING_SIZES: readonly [
     "large",
     "x-large",
     "xx-large",
-    "xxx-large",
     "inherit"
 ];
 export declare type HeadingSize = typeof HEADING_SIZES[number];
@@ -759,38 +791,48 @@ export declare type IconAriaAttribute = typeof ICON_ARIA_ATTRIBUTES[number];
 export declare type IconSize = TextSize;
 declare const ICON_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",
-    "disabled"
+    "brand",
+    "default",
+    "neutral-contrast-low",
+    "neutral-contrast-medium",
+    "neutral-contrast-high",
+    "notification-neutral",
+    "state-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];
+export declare type InlineNotificationActionIcon = IconName;
 declare const LINK_ARIA_ATTRIBUTES: readonly [
     "aria-label"
 ];
 export declare type LinkAriaAttribute = typeof LINK_ARIA_ATTRIBUTES[number];
-export declare type SocialIconName = Extract<IconName, "logo-facebook" | "logo-google" | "logo-instagram" | "logo-linkedin" | "logo-pinterest" | "logo-twitter" | "logo-wechat" | "logo-whatsapp" | "logo-xing" | "logo-youtube" | "logo-baidu" | "logo-delicious" | "logo-digg" | "logo-foursquare" | "logo-gmail" | "logo-hatena" | "logo-kaixin" | "logo-kakaotalk" | "logo-naver" | "logo-qq-share" | "logo-qq" | "logo-reddit" | "logo-skyrock" | "logo-sohu" | "logo-tecent" | "logo-telegram" | "logo-tiktok" | "logo-tumblr" | "logo-viber" | "logo-vk" | "logo-weibo" | "logo-yahoo" | "logo-youku">;
+export declare type LinkIcon = LinkButtonIconName;
+export declare type LinkPureIcon = LinkButtonIconName;
+export declare type LinkPureAriaAttribute = LinkAriaAttribute;
+export declare type LinkPureAlignLabel = AlignLabel;
+export declare type LinkPureWeight = TextWeight;
+export declare type LinkPureSize = TextSize;
+export declare type LinkPureTarget = LinkTarget;
+export declare type LinkSocialIcon = Extract<IconName, "logo-facebook" | "logo-google" | "logo-instagram" | "logo-linkedin" | "logo-pinterest" | "logo-twitter" | "logo-wechat" | "logo-whatsapp" | "logo-xing" | "logo-youtube" | "logo-baidu" | "logo-delicious" | "logo-digg" | "logo-foursquare" | "logo-gmail" | "logo-hatena" | "logo-kaixin" | "logo-kakaotalk" | "logo-naver" | "logo-qq-share" | "logo-qq" | "logo-reddit" | "logo-skyrock" | "logo-sohu" | "logo-tecent" | "logo-telegram" | "logo-tiktok" | "logo-tumblr" | "logo-viber" | "logo-vk" | "logo-weibo" | "logo-yahoo" | "logo-youku">;
+export declare type LinkSocialTarget = LinkTarget;
 declare const LINK_TILE_WEIGHTS: readonly [
     "regular",
+    "semi-bold",
     "semibold"
 ];
 export declare type LinkTileWeight = typeof LINK_TILE_WEIGHTS[number];
@@ -812,12 +854,15 @@ declare const LINK_TILE_ASPECT_RATIOS: readonly [
     "9:16"
 ];
 export declare type LinkTileAspectRatio = typeof LINK_TILE_ASPECT_RATIOS[number];
+export declare type LinkTileTarget = LinkTarget;
+export declare type LinkTileAriaAttribute = LinkAriaAttribute;
 declare const MARQUE_SIZES: readonly [
     "responsive",
     "small",
     "medium"
 ];
 export declare type MarqueSize = typeof MARQUE_SIZES[number];
+export declare type MarqueTarget = LinkTarget;
 declare const MARQUE_ARIA_ATTRIBUTES: readonly [
     "aria-label"
 ];
@@ -825,16 +870,43 @@ export declare type MarqueAriaAttribute = typeof MARQUE_ARIA_ATTRIBUTES[number];
 declare const MODAL_ARIA_ATTRIBUTES: readonly [
     "aria-label"
 ];
-export declare type ModalAriaAttribute = typeof MODAL_ARIA_ATTRIBUTES[number];
+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
 ];
-export declare type NumberOfPageLinks = typeof PAGINATION_NUMBER_OF_PAGE_LINKS[number];
-export declare type PageChangeEvent = {
+export declare type PaginationMaxNumberOfPageLinks = typeof PAGINATION_NUMBER_OF_PAGE_LINKS[number];
+export declare type PaginationChangeEvent = {
     page: number;
     previousPage: number;
 };
+export declare type PaginationInternationalization = Partial<Record<"root" | "prev" | "next" | "page", string>>;
 declare const POPOVER_DIRECTIONS: readonly [
     "top",
     "right",
@@ -842,6 +914,11 @@ declare const POPOVER_DIRECTIONS: readonly [
     "left"
 ];
 export declare type PopoverDirection = typeof POPOVER_DIRECTIONS[number];
+declare const POPOVER_ARIA_ATTRIBUTES: readonly [
+    "aria-label"
+];
+export declare type PopoverAriaAttribute = typeof POPOVER_ARIA_ATTRIBUTES[number];
+export declare type RadioButtonWrapperState = FormState;
 declare const SEGMENTED_CONTROL_BACKGROUND_COLORS: readonly [
     "background-surface",
     "background-default"
@@ -850,12 +927,14 @@ export declare type SegmentedControlBackgroundColor = typeof SEGMENTED_CONTROL_B
 export declare type SegmentedControlChangeEvent = {
     value: string | number;
 };
+export declare type SegmentedControlItemIcon = LinkButtonIconName;
 declare const DROPDOWN_DIRECTIONS: readonly [
     "down",
     "up",
     "auto"
 ];
-export declare type DropdownDirection = typeof DROPDOWN_DIRECTIONS[number];
+export declare type SelectWrapperDropdownDirection = typeof DROPDOWN_DIRECTIONS[number];
+export declare type SelectWrapperState = FormState;
 declare const SPINNER_SIZES: readonly [
     "small",
     "medium",
@@ -872,7 +951,7 @@ declare const STEPPER_HORIZONTAL_SIZES: readonly [
     "medium"
 ];
 export declare type StepperHorizontalSize = typeof STEPPER_HORIZONTAL_SIZES[number];
-export declare type StepChangeEvent = {
+export declare type StepperHorizontalChangeEvent = {
     activeStepIndex: number;
 };
 declare const STEPPER_ITEM_STATES: readonly [
@@ -880,7 +959,8 @@ declare const STEPPER_ITEM_STATES: readonly [
     "complete",
     "warning"
 ];
-export declare type StepperState = typeof STEPPER_ITEM_STATES[number];
+export declare type StepperHorizontalItemState = typeof STEPPER_ITEM_STATES[number];
+export declare type SwitchAlignLabel = AlignLabel;
 export declare type SwitchChangeEvent = {
     checked: boolean;
 };
@@ -890,44 +970,57 @@ export declare type TableHeadCellSort = {
     active?: boolean;
     direction?: Direction;
 };
-export declare type SortingChangeEvent = TableHeadCellSort;
-declare const TAB_SIZES: readonly [
+export declare type TableChangeEvent = TableHeadCellSort;
+declare const TABS_BAR_SIZES: readonly [
     "small",
     "medium"
 ];
-export declare type TabSize = typeof TAB_SIZES[number];
-declare const TAB_WEIGHTS: readonly [
+export declare type TabsBarSize = typeof TABS_BAR_SIZES[number];
+declare const TABS_BAR_WEIGHTS: readonly [
     "regular",
+    "semi-bold",
     "semibold"
 ];
-export declare type TabWeight = typeof TAB_WEIGHTS[number];
-export declare type TabChangeEvent = {
+export declare type TabsBarWeight = typeof TABS_BAR_WEIGHTS[number];
+export declare type TabsBarChangeEvent = {
     activeTabIndex: number;
 };
-export declare type TabGradientColorTheme = GradientColorTheme;
+/** @deprecated */
+export declare type TabsBarGradientColorScheme = ScrollerGradientColorScheme;
+export declare type TabsBarGradientColor = ScrollerGradientColor;
+export declare type TabsSize = TabsBarSize;
+export declare type TabsWeight = TabsBarWeight;
+/** @deprecated */
+export declare type TabsGradientColorScheme = TabsBarGradientColorScheme;
+export declare type TabsGradientColor = TabsBarGradientColor;
+export declare type TabsChangeEvent = TabsBarChangeEvent;
+declare const TAG_DISMISSIBLE_COLORS: readonly [
+    "background-base",
+    "background-surface",
+    "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];
+export declare type TagIcon = IconName;
 declare const TAG_COLORS: readonly [
+    "background-base",
     "background-surface",
     "background-default",
-    "background-base",
-    "neutral-contrast-high",
     "primary",
+    "notification-info-soft",
+    "notification-warning-soft",
+    "notification-success-soft",
+    "notification-error-soft",
+    "neutral-contrast-high",
     "notification-neutral",
-    "notification-info",
     "notification-warning",
     "notification-success",
     "notification-error"
 ];
 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",
@@ -945,16 +1038,27 @@ declare const UNIT_POSITIONS: readonly [
     "suffix"
 ];
 export declare type TextFieldWrapperUnitPosition = typeof UNIT_POSITIONS[number];
+export declare type TextFieldWrapperActionIcon = Extract<IconName, "locate">;
+export declare type TextFieldWrapperState = FormState;
 declare const LIST_TYPES: readonly [
     "unordered",
     "ordered"
 ];
-export declare type ListType = typeof LIST_TYPES[number];
+/** @deprecated */
+export declare type TextListListType = typeof LIST_TYPES[number];
 declare const ORDER_TYPES: readonly [
     "numbered",
     "alphabetically"
 ];
-export declare type OrderType = typeof ORDER_TYPES[number];
+/** @deprecated */
+export declare type TextListOrderType = typeof ORDER_TYPES[number];
+declare const TEXT_LIST_TYPES: readonly [
+    "unordered",
+    "numbered",
+    "alphabetically"
+];
+export declare type TextListType = typeof TEXT_LIST_TYPES[number];
+export declare type TextareaWrapperState = FormState;
 declare const TOAST_STATES: readonly [
     "info",
     "success",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-vue",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-alpha.3",
   "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.1"
+    "@porsche-design-system/components-js": "3.0.0-alpha.3"
   },
   "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';