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

package/lib/types.d.ts

@@ -209,6 +209,29 @@ export declare type BreakpointValues<T> = {
     base: T;
 };
 export declare type BreakpointCustomizable<T> = T | BreakpointValues<T>;
+declare const TILE_ASPECT_RATIOS: readonly [
+    "1:1",
+    "4:3",
+    "3:4",
+    "16:9",
+    "9:16"
+];
+export declare type TileAspectRatio = (typeof TILE_ASPECT_RATIOS)[number];
+declare const TILE_SIZES: readonly [
+    "default",
+    "inherit"
+];
+export declare type TileSize = (typeof TILE_SIZES)[number];
+declare const TILE_WEIGHTS: readonly [
+    "regular",
+    "semi-bold"
+];
+export declare type TileWeight = (typeof TILE_WEIGHTS)[number];
+declare const TILE_ALIGNS: readonly [
+    "top",
+    "bottom"
+];
+export declare type TileAlign = (typeof TILE_ALIGNS)[number];
 declare const GRADIENT_COLOR_SCHEMES: readonly [
     "default",
     "surface"
@@ -523,29 +546,38 @@ declare const BANNER_WIDTHS: readonly [
     "basic",
     "fluid"
 ];
+/** @deprecated */
 export declare type BannerWidth = typeof BANNER_WIDTHS[number];
 export declare type ButtonIcon = LinkButtonIconName;
-declare const BUTTON_GROUP_DIRECTIONS: readonly [
+declare const GROUP_DIRECTIONS: readonly [
     "row",
     "column"
 ];
-export declare type ButtonGroupDirection = typeof BUTTON_GROUP_DIRECTIONS[number];
+export declare type GroupDirection = (typeof GROUP_DIRECTIONS)[number];
+export declare type ButtonGroupDirection = GroupDirection;
 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;
+export declare type ButtonTileAriaAttribute = ButtonAriaAttribute;
+export declare type ButtonTileIcon = LinkButtonIconName;
+export declare type ButtonTileType = ButtonType;
+export declare type ButtonTileAspectRatio = TileAspectRatio;
+export declare type ButtonTileSize = TileSize;
+export declare type ButtonTileWeight = TileWeight;
+export declare type ButtonTileAlign = TileAlign;
 declare const CAROUSEL_WIDTHS: readonly [
     "basic",
     "extended"
 ];
-export declare type CarouselWidth = typeof CAROUSEL_WIDTHS[number];
+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 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;
@@ -602,12 +634,14 @@ declare const DIVIDER_DIRECTIONS: readonly [
 ];
 export declare type DividerDirection = typeof DIVIDER_DIRECTIONS[number];
 export declare type DividerOrientation = DividerDirection;
-declare const FIELDSET_WRAPPER_LABEL_SIZES: readonly [
+declare const FIELDSET_LABEL_SIZES: readonly [
     "small",
     "medium"
 ];
-export declare type FieldsetWrapperLabelSize = typeof FIELDSET_WRAPPER_LABEL_SIZES[number];
-export declare type FieldsetWrapperState = FormState;
+export declare type FieldsetLabelSize = typeof FIELDSET_LABEL_SIZES[number];
+export declare type FieldsetState = FormState;
+export declare type FieldsetWrapperLabelSize = FieldsetLabelSize;
+export declare type FieldsetWrapperState = FieldsetState;
 export declare type FlexInline = boolean;
 declare const FLEX_WRAPS: readonly [
     "nowrap",
@@ -830,47 +864,17 @@ 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;
+export declare type LinkTileTarget = LinkTarget;
+export declare type LinkTileAriaAttribute = LinkAriaAttribute;
+export declare type LinkTileAspectRatio = TileAspectRatio;
+export declare type LinkTileSize = TileSize;
+export declare type LinkTileAlign = TileAlign;
 declare const LINK_TILE_WEIGHTS: readonly [
     "regular",
     "semi-bold",
     "semibold"
 ];
-export declare type LinkTileWeight = typeof LINK_TILE_WEIGHTS[number];
-declare const LINK_TILE_SIZES: readonly [
-    "default",
-    "inherit"
-];
-export declare type LinkTileSize = typeof LINK_TILE_SIZES[number];
-declare const LINK_TILE_ALIGNS: readonly [
-    "top",
-    "bottom"
-];
-export declare type LinkTileAlign = typeof LINK_TILE_ALIGNS[number];
-declare const LINK_TILE_ASPECT_RATIOS: readonly [
-    "1:1",
-    "4:3",
-    "3:4",
-    "16:9",
-    "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"
-];
-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 LinkTileWeight = (typeof LINK_TILE_WEIGHTS)[number];
 declare const MODEL_SIGNATURES_MANIFEST: {
     "718": string;
     "911": string;
@@ -897,6 +901,33 @@ declare const MODEL_SIGNATURE_COLORS: readonly [
     "inherit"
 ];
 export declare type ModelSignatureColor = typeof MODEL_SIGNATURE_COLORS[number];
+export declare type LinkTileModelSignatureModel = ModelSignatureModel;
+declare const LINK_TILE_MODEL_SIGNATURE_HEADING_TAGS: readonly [
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6"
+];
+export declare type LinkTileModelSignatureHeadingTag = (typeof LINK_TILE_MODEL_SIGNATURE_HEADING_TAGS)[number];
+export declare type LinkTileModelSignatureWeight = TileWeight;
+export declare type LinkTileModelSignatureAspectRatio = TileAspectRatio;
+export declare type LinkTileModelSignatureLinkDirection = GroupDirection;
+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"
+];
+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];
 declare const PAGINATION_NUMBER_OF_PAGE_LINKS: readonly [
     5,
     7

package/package.json

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

package/public-api.js

@@ -1,121 +1,127 @@
-import { componentsReady as t } from "@porsche-design-system/components-js";
-import { default as o } from "./lib/components/AccordionWrapper.vue.js";
+import { componentsReady as r } from "@porsche-design-system/components-js";
+import { default as a } from "./lib/components/AccordionWrapper.vue.js";
 import { default as l } from "./lib/components/BannerWrapper.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 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 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";
-import { default as K } from "./lib/components/LinkPureWrapper.vue.js";
-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/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 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";
+import { default as i } from "./lib/components/ButtonTileWrapper.vue.js";
+import { default as T } from "./lib/components/CarouselWrapper.vue.js";
+import { default as S } from "./lib/components/CheckboxWrapperWrapper.vue.js";
+import { default as b } from "./lib/components/ContentWrapperWrapper.vue.js";
+import { default as I } from "./lib/components/DisplayWrapper.vue.js";
+import { default as H } from "./lib/components/DividerWrapper.vue.js";
+import { default as W } from "./lib/components/FieldsetWrapper.vue.js";
+import { default as y } from "./lib/components/FieldsetWrapperWrapper.vue.js";
+import { default as h } from "./lib/components/FlexWrapper.vue.js";
+import { default as M } from "./lib/components/FlexItemWrapper.vue.js";
+import { default as v } from "./lib/components/GridWrapper.vue.js";
+import { default as G } from "./lib/components/GridItemWrapper.vue.js";
+import { default as q } from "./lib/components/HeadingWrapper.vue.js";
+import { default as N } from "./lib/components/HeadlineWrapper.vue.js";
+import { default as E } from "./lib/components/IconWrapper.vue.js";
+import { default as K } from "./lib/components/InlineNotificationWrapper.vue.js";
+import { default as Q } from "./lib/components/LinkWrapper.vue.js";
+import { default as V } from "./lib/components/LinkPureWrapper.vue.js";
+import { default as Y } from "./lib/components/LinkSocialWrapper.vue.js";
+import { default as _ } from "./lib/components/LinkTileWrapper.vue.js";
+import { default as ee } from "./lib/components/LinkTileModelSignatureWrapper.vue.js";
+import { default as re } from "./lib/components/MarqueWrapper.vue.js";
+import { default as ae } from "./lib/components/ModalWrapper.vue.js";
+import { default as le } from "./lib/components/ModelSignatureWrapper.vue.js";
+import { default as se } from "./lib/components/PaginationWrapper.vue.js";
+import { default as me } from "./lib/components/PopoverWrapper.vue.js";
+import { default as xe } from "./lib/components/RadioButtonWrapperWrapper.vue.js";
+import { default as ie } from "./lib/components/ScrollerWrapper.vue.js";
+import { default as Te } from "./lib/components/SegmentedControlWrapper.vue.js";
+import { default as Se } from "./lib/components/SegmentedControlItemWrapper.vue.js";
+import { default as be } from "./lib/components/SelectWrapperWrapper.vue.js";
+import { default as Ie } from "./lib/components/SpinnerWrapper.vue.js";
+import { default as He } from "./lib/components/StepperHorizontalWrapper.vue.js";
+import { default as We } from "./lib/components/StepperHorizontalItemWrapper.vue.js";
+import { default as ye } from "./lib/components/SwitchWrapper.vue.js";
+import { default as he } from "./lib/components/TableWrapper.vue.js";
+import { default as Me } from "./lib/components/TableBodyWrapper.vue.js";
+import { default as ve } from "./lib/components/TableCellWrapper.vue.js";
+import { default as Ge } from "./lib/components/TableHeadWrapper.vue.js";
+import { default as qe } from "./lib/components/TableHeadCellWrapper.vue.js";
+import { default as Ne } from "./lib/components/TableHeadRowWrapper.vue.js";
+import { default as Ee } from "./lib/components/TableRowWrapper.vue.js";
+import { default as Ke } from "./lib/components/TabsWrapper.vue.js";
+import { default as Qe } from "./lib/components/TabsBarWrapper.vue.js";
+import { default as Ve } from "./lib/components/TabsItemWrapper.vue.js";
+import { default as Ye } from "./lib/components/TagWrapper.vue.js";
+import { default as _e } from "./lib/components/TagDismissibleWrapper.vue.js";
+import { default as et } from "./lib/components/TextWrapper.vue.js";
+import { default as rt } from "./lib/components/TextFieldWrapperWrapper.vue.js";
+import { default as at } from "./lib/components/TextListWrapper.vue.js";
+import { default as lt } from "./lib/components/TextListItemWrapper.vue.js";
+import { default as st } from "./lib/components/TextareaWrapperWrapper.vue.js";
+import { default as mt } from "./lib/components/ToastWrapper.vue.js";
+import { useToastManager as xt } from "./utils.js";
+import { default as it } from "./PorscheDesignSystemProvider.vue.js";
+import { createPorscheDesignSystem as Tt, usePorscheDesignSystemPlugin as ct } from "./plugin.js";
 export {
-  o as PAccordion,
+  a as PAccordion,
   l as PBanner,
   s as PButton,
   m as PButtonGroup,
   x as PButtonPure,
-  i as PCarousel,
-  T as PCheckboxWrapper,
-  S as PContentWrapper,
-  g as PDisplay,
-  B as PDivider,
-  H as PFieldsetWrapper,
-  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,
-  K as PLinkPure,
-  Q as PLinkSocial,
-  V as PLinkTile,
-  Y as PMarque,
-  _ as PModal,
-  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,
-  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
+  i as PButtonTile,
+  T as PCarousel,
+  S as PCheckboxWrapper,
+  b as PContentWrapper,
+  I as PDisplay,
+  H as PDivider,
+  W as PFieldset,
+  y as PFieldsetWrapper,
+  h as PFlex,
+  M as PFlexItem,
+  v as PGrid,
+  G as PGridItem,
+  q as PHeading,
+  N as PHeadline,
+  E as PIcon,
+  K as PInlineNotification,
+  Q as PLink,
+  V as PLinkPure,
+  Y as PLinkSocial,
+  _ as PLinkTile,
+  ee as PLinkTileModelSignature,
+  re as PMarque,
+  ae as PModal,
+  le as PModelSignature,
+  se as PPagination,
+  me as PPopover,
+  xe as PRadioButtonWrapper,
+  ie as PScroller,
+  Te as PSegmentedControl,
+  Se as PSegmentedControlItem,
+  be as PSelectWrapper,
+  Ie as PSpinner,
+  He as PStepperHorizontal,
+  We as PStepperHorizontalItem,
+  ye as PSwitch,
+  he as PTable,
+  Me as PTableBody,
+  ve as PTableCell,
+  Ge as PTableHead,
+  qe as PTableHeadCell,
+  Ne as PTableHeadRow,
+  Ee as PTableRow,
+  Ke as PTabs,
+  Qe as PTabsBar,
+  Ve as PTabsItem,
+  Ye as PTag,
+  _e as PTagDismissible,
+  et as PText,
+  rt as PTextFieldWrapper,
+  at as PTextList,
+  lt as PTextListItem,
+  st as PTextareaWrapper,
+  mt as PToast,
+  it as PorscheDesignSystemProvider,
+  r as componentsReady,
+  Tt as createPorscheDesignSystem,
+  ct as usePorscheDesignSystemPlugin,
+  xt as useToastManager
 };

package/styles/_index.scss

@@ -0,0 +1 @@
+@import '@porsche-design-system/components-js/styles';

package/styles/scss.scss

@@ -1 +0,0 @@
-@import '~@porsche-design-system/components-js/styles/scss';