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

package/CHANGELOG.md

@@ -9,6 +9,22 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### [Unreleased]
 
+### [3.0.0-alpha.1] - 2023-02-16
+
+#### Added
+
+- Porsche Next font supports Vietnamese charset
+- Prop `color` of `Icon` supports `disabled`
+- React: `patchRemixRunProcessBrowserGlobalIdentifier` binary to support SSR components with Remix
+
+#### Changed
+
+- `Stepper Horizontal` matches new design language.
+- Styles: Optimize design tokens "spacing", "typography" and "theme" provided by styles sub-package
+  `@porsche-design-system/components-{js|angular|react|vue}/styles`
+- Styles: Use calc() instead of max() to calculate padding for `gridStyle` (JS) and `pds-grid` (SCSS)
+- Styles: `gridStyle` (JS) and `pds-grid` (SCSS) uses optimized grid gap
+
 ### [3.0.0-alpha.0] - 2023-02-08
 
 #### Note to the new `v3` major release of the Porsche Design System
@@ -394,7 +410,8 @@ to the new values since those ones will be removed with next major version.
 - `Spinner`, `Icon`, `Link Pure`, `Button Pure`, `Link`, `Link Social`, `Button`, `Checkbox Wrapper`,
   `Radio Button Wrapper`, `Popover`, `Modal`, `Select Wrapper`, `Tag`, `Tag Dismissible`, `Textarea Wrapper`,
   `Inline Notification`, `Banner`, `Toast`, `Grid`, `Flex`, `Pagination`, `Scroller`, `Accordion`, `Text`,
-  `Text Field Wrapper`, `Content Wrapper`, `Segmented Control`, `Tabs`, `Tabs Bar`, `Headline` and `Fieldset Wrapper` matches new design language.
+  `Text Field Wrapper`, `Content Wrapper`, `Segmented Control`, `Tabs`, `Tabs Bar`, `Headline` and `Fieldset Wrapper`
+  matches new design language.
 - `Icon` supports
   `primary | contrast-low | contrast-medium | contrast-high | notification-success | notification-warning | notification-error | notification-info | inherit`
   for `color` prop.

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

@@ -134,12 +134,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>>>, {
     weight: TextWeight;
     stretch: BreakpointCustomizable<boolean>;
+    disabled: boolean;
     size: BreakpointCustomizable<TextSize>;
     theme: Theme;
     type: ButtonType;
     active: boolean;
     alignLabel: BreakpointCustomizable<AlignLabel>;
-    disabled: boolean;
     hideLabel: BreakpointCustomizable<boolean>;
     icon: LinkButtonIconName;
     loading: boolean;

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

@@ -90,9 +90,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     type: string;
     variant: string;
 }>>>, {
+    disabled: boolean;
     theme: Theme;
     type: ButtonType;
-    disabled: boolean;
     hideLabel: BreakpointCustomizable<boolean>;
     icon: LinkButtonIconName;
     loading: boolean;

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

@@ -7,7 +7,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     /**
      * Basic color variations depending on theme property.
      */
-    color?: "default" | "primary" | "brand" | "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" | undefined;
+    color?: "default" | "primary" | "brand" | "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" | undefined;
     /**
      * Has no effect anymore
      * @deprecated since v3.0.0, will be removed with next major release
@@ -43,7 +43,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     /**
      * Basic color variations depending on theme property.
      */
-    color?: "default" | "primary" | "brand" | "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" | undefined;
+    color?: "default" | "primary" | "brand" | "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" | undefined;
     /**
      * Has no effect anymore
      * @deprecated since v3.0.0, will be removed with next major release

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

@@ -79,9 +79,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     onSwitchChange?: ((value: SwitchChangeEvent) => any) | undefined;
 }, {
     stretch: BreakpointCustomizable<boolean>;
+    disabled: boolean;
     theme: Theme;
     alignLabel: BreakpointCustomizable<AlignLabel>;
-    disabled: boolean;
     hideLabel: BreakpointCustomizable<boolean>;
     loading: boolean;
     checked: boolean;

package/lib/types.d.ts

@@ -757,7 +757,25 @@ 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",
+    "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"
+];
+export declare type IconColor = typeof ICON_COLORS[number];
 declare const INLINE_NOTIFICATION_STATES: readonly [
     "error",
     "warning",

package/package.json

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