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

package/CHANGELOG.md

@@ -1,14 +1,42 @@
 # Changelog
 
-## Porsche Design System - Components
+## Porsche Design System
 
-All notable changes to this project will be documented in this file.
+
+All notable changes to this project will be documented in this file and published as following npm packages:
+
+* `@porsche-design-system/components-js`
+* `@porsche-design-system/components-angular`
+* `@porsche-design-system/components-react`
+* `@porsche-design-system/components-vue`
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to
 [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ### [Unreleased]
 
+### [3.1.0] - 2023-06-09
+
+### [3.1.0-rc.2] - 2023-06-09
+
+#### Changed
+
+- `Crest` replaced final assets and meta icons
+  ([#2595](https://github.com/porsche-design-system/porsche-design-system/pull/2595))
+
+#### Added
+
+- `Flyout` ([#2547](https://github.com/porsche-design-system/porsche-design-system/pull/2547))
+
+#### Fixed
+
+- Wrong validation during SSR hydration of `Link Tile` and `Select Wrapper`
+  ([#2588](https://github.com/porsche-design-system/porsche-design-system/pull/2588))
+- `Modal` scrollable modal does not jump to top on changes within dialog
+  ([#2574](https://github.com/porsche-design-system/porsche-design-system/pull/2574))
+- Unnecessary lifecycles are prevented when prop values do not change for complex values
+  ([#2574](https://github.com/porsche-design-system/porsche-design-system/pull/2574))
+
 ### [3.1.0-rc.1] - 2023-06-02
 
 #### Added

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

@@ -0,0 +1,61 @@
+import type { SelectedAriaAttributes, FlyoutAriaAttribute, FlyoutPosition, Theme } from '../types';
+type PFlyoutProps = {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<FlyoutAriaAttribute>;
+    /**
+     * If true, the flyout is open.
+     */
+    open: boolean;
+    /**
+     * The position of the flyout
+     */
+    position?: FlyoutPosition;
+    /**
+     * Adapts the flyout color depending on the theme.
+     */
+    theme?: Theme;
+};
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PFlyoutProps>, {
+    open: boolean;
+    position: string;
+    theme: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    dismiss: (value?: void | undefined) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PFlyoutProps>, {
+    open: boolean;
+    position: string;
+    theme: string;
+}>>> & {
+    onDismiss?: ((value?: void | undefined) => any) | undefined;
+}, {
+    open: boolean;
+    theme: "light" | "dark";
+    position: "left" | "right";
+}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/lib/components/FlyoutWrapper.vue.js

@@ -0,0 +1,31 @@
+import { defineComponent as p, ref as f, onMounted as l, onUpdated as i, openBlock as d, createBlock as m, resolveDynamicComponent as u, unref as c, withCtx as _, renderSlot as y } from "vue";
+import { getPrefixedTagName as C, syncProperties as o, addEventListenerToElementRef as g } from "../../utils.js";
+const x = /* @__PURE__ */ p({
+  __name: "FlyoutWrapper",
+  props: {
+    aria: {},
+    open: { type: Boolean, default: !1 },
+    position: { default: "right" },
+    theme: { default: "light" }
+  },
+  emits: ["dismiss"],
+  setup(n, { emit: r }) {
+    const t = n, s = C("p-flyout"), e = f();
+    return l(() => {
+      o(e.value, t), g(e.value, "dismiss", r);
+    }), i(() => {
+      o(e.value, t);
+    }), (a, h) => (d(), m(u(c(s)), {
+      ref_key: "pdsComponentRef",
+      ref: e
+    }, {
+      default: _(() => [
+        y(a.$slots, "default")
+      ]),
+      _: 3
+    }, 512));
+  }
+});
+export {
+  x as default
+};

package/lib/components/FlyoutWrapper.vue2.js

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

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

@@ -757,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",

package/package.json

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

package/public-api.js

@@ -10,58 +10,59 @@ import { default as S } from "./lib/components/CheckboxWrapperWrapper.vue.js";
 import { default as b } from "./lib/components/ContentWrapperWrapper.vue.js";
 import { default as C } from "./lib/components/CrestWrapper.vue.js";
 import { default as W } from "./lib/components/DisplayWrapper.vue.js";
-import { default as H } from "./lib/components/DividerWrapper.vue.js";
-import { default as y } from "./lib/components/FieldsetWrapper.vue.js";
-import { default as h } from "./lib/components/FieldsetWrapperWrapper.vue.js";
+import { default as y } from "./lib/components/DividerWrapper.vue.js";
+import { default as L } from "./lib/components/FieldsetWrapper.vue.js";
+import { default as F } from "./lib/components/FieldsetWrapperWrapper.vue.js";
 import { default as M } from "./lib/components/FlexWrapper.vue.js";
 import { default as v } from "./lib/components/FlexItemWrapper.vue.js";
-import { default as G } from "./lib/components/GridWrapper.vue.js";
-import { default as q } from "./lib/components/GridItemWrapper.vue.js";
-import { default as N } from "./lib/components/HeadingWrapper.vue.js";
-import { default as E } from "./lib/components/HeadlineWrapper.vue.js";
-import { default as K } from "./lib/components/IconWrapper.vue.js";
-import { default as Q } from "./lib/components/InlineNotificationWrapper.vue.js";
-import { default as V } from "./lib/components/LinkWrapper.vue.js";
-import { default as Y } from "./lib/components/LinkPureWrapper.vue.js";
-import { default as _ } from "./lib/components/LinkSocialWrapper.vue.js";
-import { default as ee } from "./lib/components/LinkTileWrapper.vue.js";
-import { default as te } from "./lib/components/LinkTileModelSignatureWrapper.vue.js";
-import { default as ae } from "./lib/components/MarqueWrapper.vue.js";
-import { default as le } from "./lib/components/ModalWrapper.vue.js";
-import { default as pe } from "./lib/components/ModelSignatureWrapper.vue.js";
-import { default as me } from "./lib/components/PaginationWrapper.vue.js";
-import { default as xe } from "./lib/components/PopoverWrapper.vue.js";
-import { default as ie } from "./lib/components/RadioButtonWrapperWrapper.vue.js";
-import { default as Te } from "./lib/components/ScrollerWrapper.vue.js";
-import { default as Se } from "./lib/components/SegmentedControlWrapper.vue.js";
-import { default as be } from "./lib/components/SegmentedControlItemWrapper.vue.js";
-import { default as Ce } from "./lib/components/SelectWrapperWrapper.vue.js";
-import { default as We } from "./lib/components/SpinnerWrapper.vue.js";
-import { default as He } from "./lib/components/StepperHorizontalWrapper.vue.js";
-import { default as ye } from "./lib/components/StepperHorizontalItemWrapper.vue.js";
-import { default as he } from "./lib/components/SwitchWrapper.vue.js";
-import { default as Me } from "./lib/components/TableWrapper.vue.js";
-import { default as ve } from "./lib/components/TableBodyWrapper.vue.js";
-import { default as Ge } from "./lib/components/TableCellWrapper.vue.js";
-import { default as qe } from "./lib/components/TableHeadWrapper.vue.js";
-import { default as Ne } from "./lib/components/TableHeadCellWrapper.vue.js";
-import { default as Ee } from "./lib/components/TableHeadRowWrapper.vue.js";
-import { default as Ke } from "./lib/components/TableRowWrapper.vue.js";
-import { default as Qe } from "./lib/components/TabsWrapper.vue.js";
-import { default as Ve } from "./lib/components/TabsBarWrapper.vue.js";
-import { default as Ye } from "./lib/components/TabsItemWrapper.vue.js";
-import { default as _e } from "./lib/components/TagWrapper.vue.js";
-import { default as er } from "./lib/components/TagDismissibleWrapper.vue.js";
-import { default as tr } from "./lib/components/TextWrapper.vue.js";
-import { default as ar } from "./lib/components/TextFieldWrapperWrapper.vue.js";
-import { default as lr } from "./lib/components/TextListWrapper.vue.js";
-import { default as pr } from "./lib/components/TextListItemWrapper.vue.js";
-import { default as mr } from "./lib/components/TextareaWrapperWrapper.vue.js";
-import { default as xr } from "./lib/components/ToastWrapper.vue.js";
-import { default as ir } from "./lib/components/WordmarkWrapper.vue.js";
-import { useToastManager as Tr } from "./utils.js";
-import { default as Sr } from "./PorscheDesignSystemProvider.vue.js";
-import { createPorscheDesignSystem as br, usePorscheDesignSystemPlugin as Br } from "./plugin.js";
+import { default as G } from "./lib/components/FlyoutWrapper.vue.js";
+import { default as q } from "./lib/components/GridWrapper.vue.js";
+import { default as N } from "./lib/components/GridItemWrapper.vue.js";
+import { default as E } from "./lib/components/HeadingWrapper.vue.js";
+import { default as K } from "./lib/components/HeadlineWrapper.vue.js";
+import { default as Q } from "./lib/components/IconWrapper.vue.js";
+import { default as V } from "./lib/components/InlineNotificationWrapper.vue.js";
+import { default as Y } from "./lib/components/LinkWrapper.vue.js";
+import { default as _ } from "./lib/components/LinkPureWrapper.vue.js";
+import { default as ee } from "./lib/components/LinkSocialWrapper.vue.js";
+import { default as te } from "./lib/components/LinkTileWrapper.vue.js";
+import { default as ae } from "./lib/components/LinkTileModelSignatureWrapper.vue.js";
+import { default as le } from "./lib/components/MarqueWrapper.vue.js";
+import { default as pe } from "./lib/components/ModalWrapper.vue.js";
+import { default as me } from "./lib/components/ModelSignatureWrapper.vue.js";
+import { default as xe } from "./lib/components/PaginationWrapper.vue.js";
+import { default as ie } from "./lib/components/PopoverWrapper.vue.js";
+import { default as Te } from "./lib/components/RadioButtonWrapperWrapper.vue.js";
+import { default as Se } from "./lib/components/ScrollerWrapper.vue.js";
+import { default as be } from "./lib/components/SegmentedControlWrapper.vue.js";
+import { default as Ce } from "./lib/components/SegmentedControlItemWrapper.vue.js";
+import { default as We } from "./lib/components/SelectWrapperWrapper.vue.js";
+import { default as ye } from "./lib/components/SpinnerWrapper.vue.js";
+import { default as Le } from "./lib/components/StepperHorizontalWrapper.vue.js";
+import { default as Fe } from "./lib/components/StepperHorizontalItemWrapper.vue.js";
+import { default as Me } from "./lib/components/SwitchWrapper.vue.js";
+import { default as ve } from "./lib/components/TableWrapper.vue.js";
+import { default as Ge } from "./lib/components/TableBodyWrapper.vue.js";
+import { default as qe } from "./lib/components/TableCellWrapper.vue.js";
+import { default as Ne } from "./lib/components/TableHeadWrapper.vue.js";
+import { default as Ee } from "./lib/components/TableHeadCellWrapper.vue.js";
+import { default as Ke } from "./lib/components/TableHeadRowWrapper.vue.js";
+import { default as Qe } from "./lib/components/TableRowWrapper.vue.js";
+import { default as Ve } from "./lib/components/TabsWrapper.vue.js";
+import { default as Ye } from "./lib/components/TabsBarWrapper.vue.js";
+import { default as _e } from "./lib/components/TabsItemWrapper.vue.js";
+import { default as er } from "./lib/components/TagWrapper.vue.js";
+import { default as tr } from "./lib/components/TagDismissibleWrapper.vue.js";
+import { default as ar } from "./lib/components/TextWrapper.vue.js";
+import { default as lr } from "./lib/components/TextFieldWrapperWrapper.vue.js";
+import { default as pr } from "./lib/components/TextListWrapper.vue.js";
+import { default as mr } from "./lib/components/TextListItemWrapper.vue.js";
+import { default as xr } from "./lib/components/TextareaWrapperWrapper.vue.js";
+import { default as ir } from "./lib/components/ToastWrapper.vue.js";
+import { default as Tr } from "./lib/components/WordmarkWrapper.vue.js";
+import { useToastManager as Sr } from "./utils.js";
+import { default as br } from "./PorscheDesignSystemProvider.vue.js";
+import { createPorscheDesignSystem as Cr, usePorscheDesignSystemPlugin as Ir } from "./plugin.js";
 export {
   a as PAccordion,
   l as PBanner,
@@ -74,58 +75,59 @@ export {
   b as PContentWrapper,
   C as PCrest,
   W as PDisplay,
-  H as PDivider,
-  y as PFieldset,
-  h as PFieldsetWrapper,
+  y as PDivider,
+  L as PFieldset,
+  F as PFieldsetWrapper,
   M as PFlex,
   v as PFlexItem,
-  G as PGrid,
-  q as PGridItem,
-  N as PHeading,
-  E as PHeadline,
-  K as PIcon,
-  Q as PInlineNotification,
-  V as PLink,
-  Y as PLinkPure,
-  _ as PLinkSocial,
-  ee as PLinkTile,
-  te as PLinkTileModelSignature,
-  ae as PMarque,
-  le as PModal,
-  pe as PModelSignature,
-  me as PPagination,
-  xe as PPopover,
-  ie as PRadioButtonWrapper,
-  Te as PScroller,
-  Se as PSegmentedControl,
-  be as PSegmentedControlItem,
-  Ce as PSelectWrapper,
-  We as PSpinner,
-  He as PStepperHorizontal,
-  ye as PStepperHorizontalItem,
-  he as PSwitch,
-  Me as PTable,
-  ve as PTableBody,
-  Ge as PTableCell,
-  qe as PTableHead,
-  Ne as PTableHeadCell,
-  Ee as PTableHeadRow,
-  Ke as PTableRow,
-  Qe as PTabs,
-  Ve as PTabsBar,
-  Ye as PTabsItem,
-  _e as PTag,
-  er as PTagDismissible,
-  tr as PText,
-  ar as PTextFieldWrapper,
-  lr as PTextList,
-  pr as PTextListItem,
-  mr as PTextareaWrapper,
-  xr as PToast,
-  ir as PWordmark,
-  Sr as PorscheDesignSystemProvider,
+  G as PFlyout,
+  q as PGrid,
+  N as PGridItem,
+  E as PHeading,
+  K as PHeadline,
+  Q as PIcon,
+  V as PInlineNotification,
+  Y as PLink,
+  _ as PLinkPure,
+  ee as PLinkSocial,
+  te as PLinkTile,
+  ae as PLinkTileModelSignature,
+  le as PMarque,
+  pe as PModal,
+  me as PModelSignature,
+  xe as PPagination,
+  ie as PPopover,
+  Te as PRadioButtonWrapper,
+  Se as PScroller,
+  be as PSegmentedControl,
+  Ce as PSegmentedControlItem,
+  We as PSelectWrapper,
+  ye as PSpinner,
+  Le as PStepperHorizontal,
+  Fe as PStepperHorizontalItem,
+  Me as PSwitch,
+  ve as PTable,
+  Ge as PTableBody,
+  qe as PTableCell,
+  Ne as PTableHead,
+  Ee as PTableHeadCell,
+  Ke as PTableHeadRow,
+  Qe as PTableRow,
+  Ve as PTabs,
+  Ye as PTabsBar,
+  _e as PTabsItem,
+  er as PTag,
+  tr as PTagDismissible,
+  ar as PText,
+  lr as PTextFieldWrapper,
+  pr as PTextList,
+  mr as PTextListItem,
+  xr as PTextareaWrapper,
+  ir as PToast,
+  Tr as PWordmark,
+  br as PorscheDesignSystemProvider,
   t as componentsReady,
-  br as createPorscheDesignSystem,
-  Br as usePorscheDesignSystemPlugin,
-  Tr as useToastManager
+  Cr as createPorscheDesignSystem,
+  Ir as usePorscheDesignSystemPlugin,
+  Sr as useToastManager
 };