@porsche-design-system/components-vue 3.10.0-rc.3 → 3.10.0-rc.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +66 -0
- package/cjs/lib/components/CarouselWrapper.vue.cjs +1 -1
- package/esm/lib/components/AccordionWrapper.vue.d.ts +5 -5
- package/esm/lib/components/ButtonPureWrapper.vue.d.ts +1 -1
- package/esm/lib/components/CarouselWrapper.vue.d.ts +16 -5
- package/esm/lib/components/CarouselWrapper.vue.mjs +13 -11
- package/esm/lib/components/CheckboxWrapperWrapper.vue.d.ts +1 -1
- package/esm/lib/components/FlyoutNavigationItemWrapper.vue.d.ts +6 -0
- package/esm/lib/components/IconWrapper.vue.d.ts +1 -1
- package/esm/lib/components/LinkPureWrapper.vue.d.ts +1 -1
- package/esm/lib/components/LinkTileProductWrapper.vue.d.ts +3 -3
- package/esm/lib/components/MultiSelectWrapper.vue.d.ts +3 -3
- package/esm/lib/components/PaginationWrapper.vue.d.ts +5 -5
- package/esm/lib/components/PinCodeWrapper.vue.d.ts +3 -3
- package/esm/lib/components/RadioButtonWrapperWrapper.vue.d.ts +1 -1
- package/esm/lib/components/SegmentedControlWrapper.vue.d.ts +5 -5
- package/esm/lib/components/StepperHorizontalWrapper.vue.d.ts +5 -5
- package/esm/lib/components/SwitchWrapper.vue.d.ts +5 -5
- package/esm/lib/components/TabsBarWrapper.vue.d.ts +5 -5
- package/esm/lib/components/TextFieldWrapperWrapper.vue.d.ts +1 -1
- package/esm/lib/components/TextWrapper.vue.d.ts +1 -1
- package/esm/lib/types.d.ts +88 -55
- package/jsdom-polyfill/index.d.ts +1 -0
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -14,6 +14,72 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|
|
14
14
|
|
|
15
15
|
### [Unreleased]
|
|
16
16
|
|
|
17
|
+
### [3.10.0-rc.4] - 2024-01-15
|
|
18
|
+
|
|
19
|
+
#### Added
|
|
20
|
+
|
|
21
|
+
- `Icon`: Auto-flipping icons (certain ones only) in RTL (right-to-left) mode
|
|
22
|
+
([#2957](https://github.com/porsche-design-system/porsche-design-system/pull/2957))
|
|
23
|
+
- `Carousel`: Prop `heading-size`, named slot `header`
|
|
24
|
+
([#2915](https://github.com/porsche-design-system/porsche-design-system/pull/2915))
|
|
25
|
+
- `Accordion`: support for custom click area for `compact` variant
|
|
26
|
+
([#2920](https://github.com/porsche-design-system/porsche-design-system/pull/2920))
|
|
27
|
+
- `@font-face` supports Middle East languages
|
|
28
|
+
([#2946](https://github.com/porsche-design-system/porsche-design-system/pull/2946))
|
|
29
|
+
- Partials: `getFontLinks` supports preloading `arabic`, `pashto` and `urdu` subsets
|
|
30
|
+
([#2946](https://github.com/porsche-design-system/porsche-design-system/pull/2946))
|
|
31
|
+
|
|
32
|
+
#### Changed
|
|
33
|
+
|
|
34
|
+
- `Flyout Navigation`: Improved validation and `activeIdentifier` isn't automatically updated anymore
|
|
35
|
+
([#2935](https://github.com/porsche-design-system/porsche-design-system/pull/2935))
|
|
36
|
+
- `Carousel`: Position and width of heading and description
|
|
37
|
+
([#2915](https://github.com/porsche-design-system/porsche-design-system/pull/2915))
|
|
38
|
+
- `Model Signature` asset for `model="macan"`
|
|
39
|
+
- Aligned naming of all `CustomEvent<T>` types and deprecated old ones since they are in fact typing the `detail: T`
|
|
40
|
+
property of the event
|
|
41
|
+
|
|
42
|
+
```diff
|
|
43
|
+
- AccordionUpdateEvent
|
|
44
|
+
+ AccordionUpdateEventDetail
|
|
45
|
+
- CarouselUpdateEvent
|
|
46
|
+
+ CarouselUpdateEventDetail
|
|
47
|
+
- FlyoutNavigationUpdateEvent
|
|
48
|
+
+ FlyoutNavigationUpdateEventDetail
|
|
49
|
+
- LinkTileProductLikeEvent
|
|
50
|
+
+ LinkTileProductLikeEventDetail
|
|
51
|
+
- MultiSelectUpdateEvent
|
|
52
|
+
+ MultiSelectUpdateEventDetail
|
|
53
|
+
- PaginationUpdateEvent
|
|
54
|
+
+ PaginationUpdateEventDetail
|
|
55
|
+
- PinCodeUpdateEvent
|
|
56
|
+
+ PinCodeUpdateEventDetail
|
|
57
|
+
- SegmentedControlUpdateEvent
|
|
58
|
+
+ SegmentedControlUpdateEventDetail
|
|
59
|
+
- StepperHorizontalUpdateEvent
|
|
60
|
+
+ StepperHorizontalUpdateEventDetail
|
|
61
|
+
- SwitchUpdateEvent
|
|
62
|
+
+ SwitchUpdateEventDetail
|
|
63
|
+
- TableUpdateEvent
|
|
64
|
+
+ TableUpdateEventDetail
|
|
65
|
+
- TabsUpdateEvent
|
|
66
|
+
+ TabsUpdateEventDetail
|
|
67
|
+
- TabsBarUpdateEvent
|
|
68
|
+
+ TabsBarUpdateEventDetail
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
#### Fixed
|
|
72
|
+
|
|
73
|
+
- `Pin Code`: Focus correct input when clicking on label
|
|
74
|
+
([#2985](https://github.com/porsche-design-system/porsche-design-system/pull/2985))
|
|
75
|
+
- `Flyout Navigation`: Focus dismiss button after opening
|
|
76
|
+
([#2935](https://github.com/porsche-design-system/porsche-design-system/pull/2935))
|
|
77
|
+
- `Accordion`: Alignment of slotted heading with custom padding
|
|
78
|
+
([#2920](https://github.com/porsche-design-system/porsche-design-system/pull/2920))
|
|
79
|
+
- `Modal`: Scrollbar is hidden ([#2907](https://github.com/porsche-design-system/porsche-design-system/pull/2907))
|
|
80
|
+
- `Toast`: `max-width` when used in scale mode
|
|
81
|
+
([#2960](https://github.com/porsche-design-system/porsche-design-system/pull/2960))
|
|
82
|
+
|
|
17
83
|
### [3.10.0-rc.3] - 2023-12-12
|
|
18
84
|
|
|
19
85
|
### [3.10.0-rc.2] - 2023-12-12
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";const e=require("vue"),t=require("../../utils.cjs"),
|
|
1
|
+
"use strict";const e=require("vue"),t=require("../../utils.cjs"),p=e.defineComponent({__name:"CarouselWrapper",props:{activeSlideIndex:{default:0},alignHeader:{default:"start"},aria:{},description:{},disablePagination:{},heading:{},headingSize:{default:"x-large"},intl:{},pagination:{default:!0},rewind:{type:Boolean,default:!0},skipLinkTarget:{},slidesPerPage:{default:1},theme:{},width:{default:"basic"},wrapContent:{type:Boolean}},emits:["carouselChange","update"],setup(d,{emit:l}){const c=t.usePrefix("p-carousel"),a=d,n=e.ref(),r=l,s=e.inject(t.themeInjectionKey),i=()=>t.syncProperties(n,{...a,theme:a.theme||s.value});return e.onMounted(()=>{i(),t.addEventListenerToElementRef(n,"carouselChange",r),t.addEventListenerToElementRef(n,"update",r)}),e.onUpdated(i),e.watch(s,o=>{t.syncProperties(n,{theme:a.theme||o})}),(o,u)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(c)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"default")]),_:3},512))}});module.exports=p;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { BreakpointCustomizable, AccordionSize, AccordionTag, Theme } from '../types';
|
|
2
2
|
type PAccordionProps = {
|
|
3
3
|
/**
|
|
4
4
|
* Displays the Accordion as compact version with thinner border and smaller paddings.
|
|
@@ -29,14 +29,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
29
29
|
size: string;
|
|
30
30
|
tag: string;
|
|
31
31
|
}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
32
|
-
accordionChange: (value: AccordionUpdateEvent) => void;
|
|
33
|
-
update: (value: AccordionUpdateEvent) => void;
|
|
32
|
+
accordionChange: (value: import("../types").AccordionUpdateEvent) => void;
|
|
33
|
+
update: (value: import("../types").AccordionUpdateEvent) => void;
|
|
34
34
|
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PAccordionProps>, {
|
|
35
35
|
size: string;
|
|
36
36
|
tag: string;
|
|
37
37
|
}>>> & {
|
|
38
|
-
onAccordionChange?: ((value: AccordionUpdateEvent) => any) | undefined;
|
|
39
|
-
onUpdate?: ((value: AccordionUpdateEvent) => any) | undefined;
|
|
38
|
+
onAccordionChange?: ((value: import("../types").AccordionUpdateEvent) => any) | undefined;
|
|
39
|
+
onUpdate?: ((value: import("../types").AccordionUpdateEvent) => any) | undefined;
|
|
40
40
|
}, {
|
|
41
41
|
size: BreakpointCustomizable<"small" | "medium">;
|
|
42
42
|
tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
|
|
@@ -88,7 +88,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
88
88
|
weight: "regular" | "semi-bold" | "bold" | "thin" | "semibold";
|
|
89
89
|
stretch: BreakpointCustomizable<boolean>;
|
|
90
90
|
type: "button" | "reset" | "submit";
|
|
91
|
-
size: BreakpointCustomizable<"inherit" | "
|
|
91
|
+
size: BreakpointCustomizable<"inherit" | "small" | "medium" | "large" | "x-large" | "xx-small" | "x-small">;
|
|
92
92
|
active: boolean;
|
|
93
93
|
alignLabel: BreakpointCustomizable<"start" | "end" | "left" | "right">;
|
|
94
94
|
disabled: boolean;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { CarouselAlignHeader, BreakpointCustomizable,
|
|
1
|
+
import type { CarouselAlignHeader, SelectedAriaAttributes, CarouselAriaAttribute, BreakpointCustomizable, CarouselHeadingSize, CarouselInternationalization, Theme, CarouselWidth } from '../types';
|
|
2
2
|
type PCarouselProps = {
|
|
3
3
|
/**
|
|
4
4
|
* Defines which slide to be active (zero-based numbering).
|
|
@@ -8,6 +8,10 @@ type PCarouselProps = {
|
|
|
8
8
|
* Alignment of heading and description
|
|
9
9
|
*/
|
|
10
10
|
alignHeader?: CarouselAlignHeader;
|
|
11
|
+
/**
|
|
12
|
+
* Add ARIA attributes.
|
|
13
|
+
*/
|
|
14
|
+
aria?: SelectedAriaAttributes<CarouselAriaAttribute>;
|
|
11
15
|
/**
|
|
12
16
|
* Defines the description used in the carousel.
|
|
13
17
|
*/
|
|
@@ -20,6 +24,10 @@ type PCarouselProps = {
|
|
|
20
24
|
* Defines the heading used in the carousel.
|
|
21
25
|
*/
|
|
22
26
|
heading?: string;
|
|
27
|
+
/**
|
|
28
|
+
* Defines the heading size used in the carousel.
|
|
29
|
+
*/
|
|
30
|
+
headingSize?: CarouselHeadingSize;
|
|
23
31
|
/**
|
|
24
32
|
* Override the default wordings that are used for aria-labels on the next/prev buttons and pagination.
|
|
25
33
|
*/
|
|
@@ -57,27 +65,30 @@ type PCarouselProps = {
|
|
|
57
65
|
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PCarouselProps>, {
|
|
58
66
|
activeSlideIndex: number;
|
|
59
67
|
alignHeader: string;
|
|
68
|
+
headingSize: string;
|
|
60
69
|
pagination: boolean;
|
|
61
70
|
rewind: boolean;
|
|
62
71
|
slidesPerPage: number;
|
|
63
72
|
width: string;
|
|
64
73
|
}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
65
|
-
carouselChange: (value: CarouselUpdateEvent) => void;
|
|
66
|
-
update: (value: CarouselUpdateEvent) => void;
|
|
74
|
+
carouselChange: (value: import("../types").CarouselUpdateEvent) => void;
|
|
75
|
+
update: (value: import("../types").CarouselUpdateEvent) => void;
|
|
67
76
|
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PCarouselProps>, {
|
|
68
77
|
activeSlideIndex: number;
|
|
69
78
|
alignHeader: string;
|
|
79
|
+
headingSize: string;
|
|
70
80
|
pagination: boolean;
|
|
71
81
|
rewind: boolean;
|
|
72
82
|
slidesPerPage: number;
|
|
73
83
|
width: string;
|
|
74
84
|
}>>> & {
|
|
75
|
-
onUpdate?: ((value: CarouselUpdateEvent) => any) | undefined;
|
|
76
|
-
onCarouselChange?: ((value: CarouselUpdateEvent) => any) | undefined;
|
|
85
|
+
onUpdate?: ((value: import("../types").CarouselUpdateEvent) => any) | undefined;
|
|
86
|
+
onCarouselChange?: ((value: import("../types").CarouselUpdateEvent) => any) | undefined;
|
|
77
87
|
}, {
|
|
78
88
|
width: "extended" | "basic";
|
|
79
89
|
activeSlideIndex: number;
|
|
80
90
|
alignHeader: "center" | "start" | "left";
|
|
91
|
+
headingSize: CarouselHeadingSize;
|
|
81
92
|
pagination: BreakpointCustomizable<boolean>;
|
|
82
93
|
rewind: boolean;
|
|
83
94
|
slidesPerPage: BreakpointCustomizable<number>;
|
|
@@ -1,13 +1,15 @@
|
|
|
1
|
-
import { defineComponent as c, ref as u, inject as
|
|
2
|
-
import { usePrefix as
|
|
3
|
-
const
|
|
1
|
+
import { defineComponent as c, ref as u, inject as f, onMounted as m, onUpdated as h, watch as g, openBlock as C, createBlock as y, resolveDynamicComponent as _, unref as w, withCtx as P, renderSlot as k } from "vue";
|
|
2
|
+
import { usePrefix as x, themeInjectionKey as v, addEventListenerToElementRef as i, syncProperties as s } from "../../utils.mjs";
|
|
3
|
+
const S = /* @__PURE__ */ c({
|
|
4
4
|
__name: "CarouselWrapper",
|
|
5
5
|
props: {
|
|
6
6
|
activeSlideIndex: { default: 0 },
|
|
7
7
|
alignHeader: { default: "start" },
|
|
8
|
+
aria: {},
|
|
8
9
|
description: {},
|
|
9
10
|
disablePagination: {},
|
|
10
11
|
heading: {},
|
|
12
|
+
headingSize: { default: "x-large" },
|
|
11
13
|
intl: {},
|
|
12
14
|
pagination: { default: !0 },
|
|
13
15
|
rewind: { type: Boolean, default: !0 },
|
|
@@ -18,13 +20,13 @@ const T = /* @__PURE__ */ c({
|
|
|
18
20
|
wrapContent: { type: Boolean }
|
|
19
21
|
},
|
|
20
22
|
emits: ["carouselChange", "update"],
|
|
21
|
-
setup(
|
|
22
|
-
const l =
|
|
23
|
-
return
|
|
24
|
-
r(),
|
|
25
|
-
}), h(r),
|
|
26
|
-
|
|
27
|
-
}), (n, B) => (
|
|
23
|
+
setup(d, { emit: p }) {
|
|
24
|
+
const l = x("p-carousel"), t = d, e = u(), a = p, o = f(v), r = () => s(e, { ...t, theme: t.theme || o.value });
|
|
25
|
+
return m(() => {
|
|
26
|
+
r(), i(e, "carouselChange", a), i(e, "update", a);
|
|
27
|
+
}), h(r), g(o, (n) => {
|
|
28
|
+
s(e, { theme: t.theme || n });
|
|
29
|
+
}), (n, B) => (C(), y(_(w(l)), {
|
|
28
30
|
ref_key: "pdsComponentRef",
|
|
29
31
|
ref: e
|
|
30
32
|
}, {
|
|
@@ -36,5 +38,5 @@ const T = /* @__PURE__ */ c({
|
|
|
36
38
|
}
|
|
37
39
|
});
|
|
38
40
|
export {
|
|
39
|
-
|
|
41
|
+
S as default
|
|
40
42
|
};
|
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
type PFlyoutNavigationItemProps = {
|
|
2
|
+
/**
|
|
3
|
+
* Unique identifier which controls if this item should be shown when the active-identifier on the flyout-navigation is set to this value.
|
|
4
|
+
*/
|
|
2
5
|
identifier: string;
|
|
6
|
+
/**
|
|
7
|
+
* Label of the item.
|
|
8
|
+
*/
|
|
3
9
|
label?: string;
|
|
4
10
|
};
|
|
5
11
|
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<PFlyoutNavigationItemProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<PFlyoutNavigationItemProps>>>, {}, {}>, {
|
|
@@ -39,7 +39,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
39
39
|
name: string;
|
|
40
40
|
size: string;
|
|
41
41
|
}>>>, {
|
|
42
|
-
size: "inherit" | "
|
|
42
|
+
size: "inherit" | "small" | "medium" | "large" | "x-large" | "xx-small" | "x-small";
|
|
43
43
|
name: "list" | "copy" | "grid" | "document" | "search" | "switch" | "360" | "accessibility" | "active-cabin-ventilation" | "add" | "adjust" | "arrow-double-down" | "arrow-double-left" | "arrow-double-right" | "arrow-double-up" | "arrow-down" | "arrow-first" | "arrow-head-down" | "arrow-head-left" | "arrow-head-right" | "arrow-head-up" | "arrow-last" | "arrow-left" | "arrow-right" | "arrow-up" | "augmented-reality" | "battery-empty" | "battery-full" | "bell" | "bookmark" | "broadcast" | "calculator" | "calendar" | "camera" | "car" | "car-battery" | "card" | "charging-active" | "charging-state" | "charging-station" | "chart" | "chat" | "check" | "city" | "climate" | "climate-control" | "clock" | "close" | "closed-caption" | "co2-emission" | "compare" | "configurate" | "country-road" | "cubic-capacity" | "delete" | "disable" | "download" | "duration" | "edit" | "email" | "error-filled" | "exclamation" | "external" | "filter" | "fingerprint" | "flash" | "fuel-station" | "garage" | "gift" | "globe" | "heart" | "heart-filled" | "highway" | "home" | "horn" | "image" | "increase" | "information" | "information-filled" | "key" | "leaf" | "leather" | "light" | "locate" | "lock" | "lock-open" | "logo-apple-podcast" | "logo-baidu" | "logo-delicious" | "logo-digg" | "logo-facebook" | "logo-foursquare" | "logo-gmail" | "logo-google" | "logo-hatena" | "logo-instagram" | "logo-kaixin" | "logo-kakaotalk" | "logo-linkedin" | "logo-naver" | "logo-pinterest" | "logo-qq" | "logo-qq-share" | "logo-reddit" | "logo-skyrock" | "logo-sohu" | "logo-spotify" | "logo-tecent" | "logo-telegram" | "logo-tiktok" | "logo-tumblr" | "logo-twitter" | "logo-viber" | "logo-vk" | "logo-wechat" | "logo-weibo" | "logo-whatsapp" | "logo-xing" | "logo-yahoo" | "logo-youku" | "logo-youtube" | "logout" | "map" | "menu-dots-horizontal" | "menu-dots-vertical" | "menu-lines" | "minus" | "mobile" | "moon" | "oil-can" | "parking-brake" | "parking-light" | "pause" | "phone" | "pin" | "pin-filled" | "play" | "plug" | "plus" | "preheating" | "printer" | "purchase" | "push-pin" | "push-pin-off" | "qr" | "question" | "racing-flag" | "refresh" | "replay" | "reset" | "roof-closed" | "roof-open" | "route" | "rss" | "save" | "screen" | "send" | "share" | "shopping-bag" | "shopping-bag-filled" | "shopping-cart" | "shopping-cart-filled" | "sidelights" | "snowflake" | "sort" | "stack" | "star" | "steering-wheel" | "stopwatch" | "subtract" | "success" | "success-filled" | "sun" | "tablet" | "tachometer" | "tire" | "truck" | "upload" | "user" | "user-filled" | "user-group" | "user-manual" | "video" | "view" | "view-off" | "volume-off" | "volume-up" | "warning" | "warning-filled" | "weight" | "wifi" | "work" | "wrench" | "wrenches" | "zoom-in" | "zoom-out";
|
|
44
44
|
color: "default" | "inherit" | "primary" | "contrast-low" | "contrast-medium" | "contrast-high" | "notification-success" | "notification-warning" | "notification-error" | "notification-info" | "brand" | "neutral-contrast-low" | "neutral-contrast-medium" | "neutral-contrast-high" | "notification-neutral" | "state-disabled";
|
|
45
45
|
}, {}>;
|
|
@@ -85,7 +85,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
85
85
|
}>>>, {
|
|
86
86
|
weight: "regular" | "semi-bold" | "bold" | "thin" | "semibold";
|
|
87
87
|
stretch: BreakpointCustomizable<boolean>;
|
|
88
|
-
size: BreakpointCustomizable<"inherit" | "
|
|
88
|
+
size: BreakpointCustomizable<"inherit" | "small" | "medium" | "large" | "x-large" | "xx-small" | "x-small">;
|
|
89
89
|
active: boolean;
|
|
90
90
|
alignLabel: BreakpointCustomizable<"start" | "end" | "left" | "right">;
|
|
91
91
|
hideLabel: BreakpointCustomizable<boolean>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { BreakpointCustomizable, LinkTileProductAspectRatio,
|
|
1
|
+
import type { BreakpointCustomizable, LinkTileProductAspectRatio, LinkTileProductTarget, Theme } from '../types';
|
|
2
2
|
type PLinkTileProductProps = {
|
|
3
3
|
/**
|
|
4
4
|
* Aspect ratio of the link-tile-product.
|
|
@@ -47,14 +47,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
47
47
|
liked: boolean;
|
|
48
48
|
target: string;
|
|
49
49
|
}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
50
|
-
like: (value: LinkTileProductLikeEvent) => void;
|
|
50
|
+
like: (value: import("../types").LinkTileProductLikeEvent) => void;
|
|
51
51
|
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PLinkTileProductProps>, {
|
|
52
52
|
aspectRatio: string;
|
|
53
53
|
likeButton: boolean;
|
|
54
54
|
liked: boolean;
|
|
55
55
|
target: string;
|
|
56
56
|
}>>> & {
|
|
57
|
-
onLike?: ((value: LinkTileProductLikeEvent) => any) | undefined;
|
|
57
|
+
onLike?: ((value: import("../types").LinkTileProductLikeEvent) => any) | undefined;
|
|
58
58
|
}, {
|
|
59
59
|
aspectRatio: BreakpointCustomizable<LinkTileProductAspectRatio>;
|
|
60
60
|
target: string;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { MultiSelectDropdownDirection, BreakpointCustomizable,
|
|
1
|
+
import type { MultiSelectDropdownDirection, BreakpointCustomizable, MultiSelectState, Theme } from '../types';
|
|
2
2
|
type PMultiSelectProps = {
|
|
3
3
|
/**
|
|
4
4
|
* The description text.
|
|
@@ -56,7 +56,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
56
56
|
state: string;
|
|
57
57
|
value: () => never[];
|
|
58
58
|
}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
59
|
-
update: (value: MultiSelectUpdateEvent) => void;
|
|
59
|
+
update: (value: import("../types").MultiSelectUpdateEvent) => void;
|
|
60
60
|
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PMultiSelectProps>, {
|
|
61
61
|
description: string;
|
|
62
62
|
disabled: boolean;
|
|
@@ -68,7 +68,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
68
68
|
state: string;
|
|
69
69
|
value: () => never[];
|
|
70
70
|
}>>> & {
|
|
71
|
-
onUpdate?: ((value: MultiSelectUpdateEvent) => any) | undefined;
|
|
71
|
+
onUpdate?: ((value: import("../types").MultiSelectUpdateEvent) => any) | undefined;
|
|
72
72
|
}, {
|
|
73
73
|
label: string;
|
|
74
74
|
description: string;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { PaginationInternationalization, BreakpointCustomizable, PaginationMaxNumberOfPageLinks,
|
|
1
|
+
import type { PaginationInternationalization, BreakpointCustomizable, PaginationMaxNumberOfPageLinks, Theme } from '../types';
|
|
2
2
|
type PPaginationProps = {
|
|
3
3
|
/**
|
|
4
4
|
* Index of the currently active page.
|
|
@@ -58,8 +58,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
58
58
|
showLastPage: boolean;
|
|
59
59
|
totalItemsCount: number;
|
|
60
60
|
}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
61
|
-
pageChange: (value: PaginationUpdateEvent) => void;
|
|
62
|
-
update: (value: PaginationUpdateEvent) => void;
|
|
61
|
+
pageChange: (value: import("../types").PaginationUpdateEvent) => void;
|
|
62
|
+
update: (value: import("../types").PaginationUpdateEvent) => void;
|
|
63
63
|
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PPaginationProps>, {
|
|
64
64
|
activePage: number;
|
|
65
65
|
intl: () => {
|
|
@@ -72,8 +72,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
72
72
|
showLastPage: boolean;
|
|
73
73
|
totalItemsCount: number;
|
|
74
74
|
}>>> & {
|
|
75
|
-
onUpdate?: ((value: PaginationUpdateEvent) => any) | undefined;
|
|
76
|
-
onPageChange?: ((value: PaginationUpdateEvent) => any) | undefined;
|
|
75
|
+
onUpdate?: ((value: import("../types").PaginationUpdateEvent) => any) | undefined;
|
|
76
|
+
onPageChange?: ((value: import("../types").PaginationUpdateEvent) => any) | undefined;
|
|
77
77
|
}, {
|
|
78
78
|
intl: PaginationInternationalization;
|
|
79
79
|
activePage: number;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { BreakpointCustomizable, PinCodeLength,
|
|
1
|
+
import type { BreakpointCustomizable, PinCodeLength, PinCodeState, Theme, PinCodeType } from '../types';
|
|
2
2
|
type PPinCodeProps = {
|
|
3
3
|
/**
|
|
4
4
|
* The description text.
|
|
@@ -66,7 +66,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
66
66
|
type: string;
|
|
67
67
|
value: string;
|
|
68
68
|
}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
69
|
-
update: (value: PinCodeUpdateEvent) => void;
|
|
69
|
+
update: (value: import("../types").PinCodeUpdateEvent) => void;
|
|
70
70
|
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PPinCodeProps>, {
|
|
71
71
|
description: string;
|
|
72
72
|
disabled: boolean;
|
|
@@ -80,7 +80,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
80
80
|
type: string;
|
|
81
81
|
value: string;
|
|
82
82
|
}>>> & {
|
|
83
|
-
onUpdate?: ((value: PinCodeUpdateEvent) => any) | undefined;
|
|
83
|
+
onUpdate?: ((value: import("../types").PinCodeUpdateEvent) => any) | undefined;
|
|
84
84
|
}, {
|
|
85
85
|
label: string;
|
|
86
86
|
length: 3 | 4 | 2 | 5 | 1 | 6;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { SegmentedControlBackgroundColor, BreakpointCustomizable, SegmentedControlColumns,
|
|
1
|
+
import type { SegmentedControlBackgroundColor, BreakpointCustomizable, SegmentedControlColumns, Theme } from '../types';
|
|
2
2
|
type PSegmentedControlProps = {
|
|
3
3
|
/**
|
|
4
4
|
* @deprecated since v3.0.0, will be removed with next major release. Background color variations
|
|
@@ -20,13 +20,13 @@ type PSegmentedControlProps = {
|
|
|
20
20
|
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PSegmentedControlProps>, {
|
|
21
21
|
columns: string;
|
|
22
22
|
}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
23
|
-
segmentedControlChange: (value: SegmentedControlUpdateEvent) => void;
|
|
24
|
-
update: (value: SegmentedControlUpdateEvent) => void;
|
|
23
|
+
segmentedControlChange: (value: import("../types").SegmentedControlUpdateEvent) => void;
|
|
24
|
+
update: (value: import("../types").SegmentedControlUpdateEvent) => void;
|
|
25
25
|
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PSegmentedControlProps>, {
|
|
26
26
|
columns: string;
|
|
27
27
|
}>>> & {
|
|
28
|
-
onUpdate?: ((value: SegmentedControlUpdateEvent) => any) | undefined;
|
|
29
|
-
onSegmentedControlChange?: ((value: SegmentedControlUpdateEvent) => any) | undefined;
|
|
28
|
+
onUpdate?: ((value: import("../types").SegmentedControlUpdateEvent) => any) | undefined;
|
|
29
|
+
onSegmentedControlChange?: ((value: import("../types").SegmentedControlUpdateEvent) => any) | undefined;
|
|
30
30
|
}, {
|
|
31
31
|
columns: BreakpointCustomizable<string | number>;
|
|
32
32
|
}, {}>, {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { BreakpointCustomizable, StepperHorizontalSize, Theme } from '../types';
|
|
2
2
|
type PStepperHorizontalProps = {
|
|
3
3
|
size?: BreakpointCustomizable<StepperHorizontalSize>;
|
|
4
4
|
/**
|
|
@@ -9,13 +9,13 @@ type PStepperHorizontalProps = {
|
|
|
9
9
|
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PStepperHorizontalProps>, {
|
|
10
10
|
size: string;
|
|
11
11
|
}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
12
|
-
stepChange: (value: StepperHorizontalUpdateEvent) => void;
|
|
13
|
-
update: (value: StepperHorizontalUpdateEvent) => void;
|
|
12
|
+
stepChange: (value: import("../types").StepperHorizontalUpdateEvent) => void;
|
|
13
|
+
update: (value: import("../types").StepperHorizontalUpdateEvent) => void;
|
|
14
14
|
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PStepperHorizontalProps>, {
|
|
15
15
|
size: string;
|
|
16
16
|
}>>> & {
|
|
17
|
-
onUpdate?: ((value: StepperHorizontalUpdateEvent) => any) | undefined;
|
|
18
|
-
onStepChange?: ((value: StepperHorizontalUpdateEvent) => any) | undefined;
|
|
17
|
+
onUpdate?: ((value: import("../types").StepperHorizontalUpdateEvent) => any) | undefined;
|
|
18
|
+
onStepChange?: ((value: import("../types").StepperHorizontalUpdateEvent) => any) | undefined;
|
|
19
19
|
}, {
|
|
20
20
|
size: BreakpointCustomizable<"small" | "medium">;
|
|
21
21
|
}, {}>, {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { BreakpointCustomizable, SwitchAlignLabel,
|
|
1
|
+
import type { BreakpointCustomizable, SwitchAlignLabel, Theme } from '../types';
|
|
2
2
|
type PSwitchProps = {
|
|
3
3
|
/**
|
|
4
4
|
* Aligns the label.
|
|
@@ -37,8 +37,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
37
37
|
loading: boolean;
|
|
38
38
|
stretch: boolean;
|
|
39
39
|
}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
40
|
-
switchChange: (value: SwitchUpdateEvent) => void;
|
|
41
|
-
update: (value: SwitchUpdateEvent) => void;
|
|
40
|
+
switchChange: (value: import("../types").SwitchUpdateEvent) => void;
|
|
41
|
+
update: (value: import("../types").SwitchUpdateEvent) => void;
|
|
42
42
|
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PSwitchProps>, {
|
|
43
43
|
alignLabel: string;
|
|
44
44
|
checked: boolean;
|
|
@@ -47,8 +47,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
47
47
|
loading: boolean;
|
|
48
48
|
stretch: boolean;
|
|
49
49
|
}>>> & {
|
|
50
|
-
onUpdate?: ((value: SwitchUpdateEvent) => any) | undefined;
|
|
51
|
-
onSwitchChange?: ((value: SwitchUpdateEvent) => any) | undefined;
|
|
50
|
+
onUpdate?: ((value: import("../types").SwitchUpdateEvent) => any) | undefined;
|
|
51
|
+
onSwitchChange?: ((value: import("../types").SwitchUpdateEvent) => any) | undefined;
|
|
52
52
|
}, {
|
|
53
53
|
stretch: BreakpointCustomizable<boolean>;
|
|
54
54
|
alignLabel: BreakpointCustomizable<"start" | "end" | "left" | "right">;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { TabsBarGradientColor, TabsBarGradientColorScheme,
|
|
1
|
+
import type { TabsBarGradientColor, TabsBarGradientColorScheme, BreakpointCustomizable, TabsBarSize, Theme, TabsBarWeight } from '../types';
|
|
2
2
|
type PTabsBarProps = {
|
|
3
3
|
/**
|
|
4
4
|
* Defines which tab to be visualized as selected (zero-based numbering), undefined if none should be selected.
|
|
@@ -30,15 +30,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
30
30
|
size: string;
|
|
31
31
|
weight: string;
|
|
32
32
|
}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
33
|
-
tabChange: (value: TabsBarUpdateEvent) => void;
|
|
34
|
-
update: (value: TabsBarUpdateEvent) => void;
|
|
33
|
+
tabChange: (value: import("../types").TabsBarUpdateEvent) => void;
|
|
34
|
+
update: (value: import("../types").TabsBarUpdateEvent) => void;
|
|
35
35
|
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PTabsBarProps>, {
|
|
36
36
|
gradientColor: string;
|
|
37
37
|
size: string;
|
|
38
38
|
weight: string;
|
|
39
39
|
}>>> & {
|
|
40
|
-
onUpdate?: ((value: TabsBarUpdateEvent) => any) | undefined;
|
|
41
|
-
onTabChange?: ((value: TabsBarUpdateEvent) => any) | undefined;
|
|
40
|
+
onUpdate?: ((value: import("../types").TabsBarUpdateEvent) => any) | undefined;
|
|
41
|
+
onTabChange?: ((value: import("../types").TabsBarUpdateEvent) => any) | undefined;
|
|
42
42
|
}, {
|
|
43
43
|
weight: "regular" | "semi-bold" | "semibold";
|
|
44
44
|
size: BreakpointCustomizable<"small" | "medium">;
|
|
@@ -33,7 +33,7 @@ type PTextFieldWrapperProps = {
|
|
|
33
33
|
*/
|
|
34
34
|
showCounter?: boolean;
|
|
35
35
|
/**
|
|
36
|
-
*
|
|
36
|
+
* @experimental Show or hide password toggle for `input type="password"`.
|
|
37
37
|
*/
|
|
38
38
|
showPasswordToggle?: boolean;
|
|
39
39
|
/**
|
|
@@ -45,7 +45,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
45
45
|
weight: string;
|
|
46
46
|
}>>>, {
|
|
47
47
|
weight: "regular" | "semi-bold" | "bold" | "thin" | "semibold";
|
|
48
|
-
size: BreakpointCustomizable<"inherit" | "
|
|
48
|
+
size: BreakpointCustomizable<"inherit" | "small" | "medium" | "large" | "x-large" | "xx-small" | "x-small">;
|
|
49
49
|
tag: "time" | "p" | "span" | "div" | "address" | "blockquote" | "figcaption" | "cite" | "legend";
|
|
50
50
|
align: "center" | "start" | "end" | "left" | "right";
|
|
51
51
|
color: "default" | "inherit" | "primary" | "contrast-low" | "contrast-medium" | "contrast-high" | "notification-success" | "notification-warning" | "notification-error" | "notification-info" | "brand" | "neutral-contrast-low" | "neutral-contrast-medium" | "neutral-contrast-high" | "notification-neutral";
|
package/esm/lib/types.d.ts
CHANGED
|
@@ -446,6 +446,13 @@ export type BreakpointValues<T> = {
|
|
|
446
446
|
base: T;
|
|
447
447
|
};
|
|
448
448
|
export type BreakpointCustomizable<T> = T | BreakpointValues<T> | string;
|
|
449
|
+
declare const LINK_TARGETS: readonly [
|
|
450
|
+
"_self",
|
|
451
|
+
"_blank",
|
|
452
|
+
"_parent",
|
|
453
|
+
"_top"
|
|
454
|
+
];
|
|
455
|
+
export type LinkTarget = (typeof LINK_TARGETS)[number] | string;
|
|
449
456
|
declare const THEMES: readonly [
|
|
450
457
|
"light",
|
|
451
458
|
"dark",
|
|
@@ -508,6 +515,25 @@ declare const SELECT_DROPDOWN_DIRECTIONS: readonly [
|
|
|
508
515
|
"auto"
|
|
509
516
|
];
|
|
510
517
|
export type SelectDropdownDirection = (typeof SELECT_DROPDOWN_DIRECTIONS)[number];
|
|
518
|
+
declare const HEADING_SIZES: readonly [
|
|
519
|
+
"small",
|
|
520
|
+
"medium",
|
|
521
|
+
"large",
|
|
522
|
+
"x-large",
|
|
523
|
+
"xx-large",
|
|
524
|
+
"inherit"
|
|
525
|
+
];
|
|
526
|
+
export type HeadingSize = (typeof HEADING_SIZES)[number];
|
|
527
|
+
declare const TEXT_SIZES: readonly [
|
|
528
|
+
"xx-small",
|
|
529
|
+
"x-small",
|
|
530
|
+
"small",
|
|
531
|
+
"medium",
|
|
532
|
+
"large",
|
|
533
|
+
"x-large",
|
|
534
|
+
"inherit"
|
|
535
|
+
];
|
|
536
|
+
export type TextSize = (typeof TEXT_SIZES)[number];
|
|
511
537
|
declare const TYPOGRAPHY_ALIGNS: readonly [
|
|
512
538
|
"start",
|
|
513
539
|
"center",
|
|
@@ -516,6 +542,32 @@ declare const TYPOGRAPHY_ALIGNS: readonly [
|
|
|
516
542
|
"right"
|
|
517
543
|
];
|
|
518
544
|
export type TypographyAlign = (typeof TYPOGRAPHY_ALIGNS)[number];
|
|
545
|
+
declare const TYPOGRAPHY_TEXT_COLORS: readonly [
|
|
546
|
+
"primary",
|
|
547
|
+
"contrast-low",
|
|
548
|
+
"contrast-medium",
|
|
549
|
+
"contrast-high",
|
|
550
|
+
"notification-success",
|
|
551
|
+
"notification-warning",
|
|
552
|
+
"notification-error",
|
|
553
|
+
"notification-info",
|
|
554
|
+
"inherit",
|
|
555
|
+
"brand",
|
|
556
|
+
"default",
|
|
557
|
+
"neutral-contrast-low",
|
|
558
|
+
"neutral-contrast-medium",
|
|
559
|
+
"neutral-contrast-high",
|
|
560
|
+
"notification-neutral"
|
|
561
|
+
];
|
|
562
|
+
export type TypographyTextColor = (typeof TYPOGRAPHY_TEXT_COLORS)[number];
|
|
563
|
+
declare const TYPOGRAPHY_TEXT_WEIGHTS: readonly [
|
|
564
|
+
"regular",
|
|
565
|
+
"semi-bold",
|
|
566
|
+
"bold",
|
|
567
|
+
"thin",
|
|
568
|
+
"semibold"
|
|
569
|
+
];
|
|
570
|
+
export type TypographyTextWeight = (typeof TYPOGRAPHY_TEXT_WEIGHTS)[number];
|
|
519
571
|
declare const ALIGN_LABELS: readonly [
|
|
520
572
|
"start",
|
|
521
573
|
"end",
|
|
@@ -544,49 +596,6 @@ declare const LINK_BUTTON_VARIANTS: readonly [
|
|
|
544
596
|
"tertiary"
|
|
545
597
|
];
|
|
546
598
|
export type LinkButtonVariant = typeof LINK_BUTTON_VARIANTS[number];
|
|
547
|
-
declare const TEXT_COLORS: readonly [
|
|
548
|
-
"primary",
|
|
549
|
-
"contrast-low",
|
|
550
|
-
"contrast-medium",
|
|
551
|
-
"contrast-high",
|
|
552
|
-
"notification-success",
|
|
553
|
-
"notification-warning",
|
|
554
|
-
"notification-error",
|
|
555
|
-
"notification-info",
|
|
556
|
-
"inherit",
|
|
557
|
-
"brand",
|
|
558
|
-
"default",
|
|
559
|
-
"neutral-contrast-low",
|
|
560
|
-
"neutral-contrast-medium",
|
|
561
|
-
"neutral-contrast-high",
|
|
562
|
-
"notification-neutral"
|
|
563
|
-
];
|
|
564
|
-
export type TextColor = (typeof TEXT_COLORS)[number];
|
|
565
|
-
declare const TEXT_SIZES: readonly [
|
|
566
|
-
"xx-small",
|
|
567
|
-
"x-small",
|
|
568
|
-
"small",
|
|
569
|
-
"medium",
|
|
570
|
-
"large",
|
|
571
|
-
"x-large",
|
|
572
|
-
"inherit"
|
|
573
|
-
];
|
|
574
|
-
export type TextSize = (typeof TEXT_SIZES)[number];
|
|
575
|
-
declare const TEXT_WEIGHTS: readonly [
|
|
576
|
-
"regular",
|
|
577
|
-
"semi-bold",
|
|
578
|
-
"bold",
|
|
579
|
-
"thin",
|
|
580
|
-
"semibold"
|
|
581
|
-
];
|
|
582
|
-
export type TextWeight = (typeof TEXT_WEIGHTS)[number];
|
|
583
|
-
declare const LINK_TARGETS: readonly [
|
|
584
|
-
"_self",
|
|
585
|
-
"_blank",
|
|
586
|
-
"_parent",
|
|
587
|
-
"_top"
|
|
588
|
-
];
|
|
589
|
-
export type LinkTarget = (typeof LINK_TARGETS)[number] | string;
|
|
590
599
|
export type LinkButtonIconName = IconName | "none";
|
|
591
600
|
export type ButtonVariant = LinkButtonVariant;
|
|
592
601
|
export type LinkVariant = LinkButtonVariant;
|
|
@@ -607,9 +616,11 @@ declare const ACCORDION_SIZES: readonly [
|
|
|
607
616
|
"medium"
|
|
608
617
|
];
|
|
609
618
|
export type AccordionSize = (typeof ACCORDION_SIZES)[number];
|
|
619
|
+
/** @deprecated */
|
|
610
620
|
export type AccordionUpdateEvent = {
|
|
611
621
|
open: boolean;
|
|
612
622
|
};
|
|
623
|
+
export type AccordionUpdateEventDetail = AccordionUpdateEvent;
|
|
613
624
|
export type AccordionTag = HeadingTag;
|
|
614
625
|
declare const BANNER_STATES: readonly [
|
|
615
626
|
"info",
|
|
@@ -636,7 +647,7 @@ export type ButtonPureType = ButtonType;
|
|
|
636
647
|
export type ButtonPureIcon = LinkButtonIconName;
|
|
637
648
|
export type ButtonPureAriaAttribute = ButtonAriaAttribute;
|
|
638
649
|
export type ButtonPureAlignLabel = AlignLabel;
|
|
639
|
-
export type ButtonPureWeight =
|
|
650
|
+
export type ButtonPureWeight = TypographyTextWeight;
|
|
640
651
|
export type ButtonPureSize = TextSize;
|
|
641
652
|
export type ButtonTileAriaAttribute = ButtonAriaAttribute;
|
|
642
653
|
export type ButtonTileIcon = LinkButtonIconName;
|
|
@@ -657,11 +668,18 @@ declare const CAROUSEL_ALIGN_HEADERS: readonly [
|
|
|
657
668
|
"left"
|
|
658
669
|
];
|
|
659
670
|
export type CarouselAlignHeader = (typeof CAROUSEL_ALIGN_HEADERS)[number];
|
|
671
|
+
export type CarouselHeadingSize = Extract<HeadingSize, "x-large" | "xx-large">;
|
|
672
|
+
declare const CAROUSEL_ARIA_ATTRIBUTES: readonly [
|
|
673
|
+
"aria-label"
|
|
674
|
+
];
|
|
675
|
+
export type CarouselAriaAttribute = (typeof CAROUSEL_ARIA_ATTRIBUTES)[number];
|
|
660
676
|
export type CarouselInternationalization = Partial<Record<"prev" | "next" | "first" | "last" | "slideLabel" | "slide", string>> | string;
|
|
677
|
+
/** @deprecated */
|
|
661
678
|
export type CarouselUpdateEvent = {
|
|
662
679
|
activeIndex: number;
|
|
663
680
|
previousIndex: number;
|
|
664
681
|
};
|
|
682
|
+
export type CarouselUpdateEventDetail = CarouselUpdateEvent;
|
|
665
683
|
export type CheckboxWrapperState = FormState;
|
|
666
684
|
declare const CONTENT_WRAPPER_BACKGROUND_COLORS: readonly [
|
|
667
685
|
"transparent",
|
|
@@ -827,7 +845,9 @@ export type FlyoutNavigationAriaAttribute = (typeof FLYOUT_NAVIGATION_ARIA_ATTRI
|
|
|
827
845
|
export type FlyoutNavigationUpdate = {
|
|
828
846
|
activeIdentifier: string;
|
|
829
847
|
};
|
|
848
|
+
/** @deprecated */
|
|
830
849
|
export type FlyoutNavigationUpdateEvent = FlyoutNavigationUpdate;
|
|
850
|
+
export type FlyoutNavigationUpdateEventDetail = FlyoutNavigationUpdateEvent;
|
|
831
851
|
declare const GRID_DIRECTIONS: readonly [
|
|
832
852
|
"row",
|
|
833
853
|
"row-reverse",
|
|
@@ -876,15 +896,6 @@ declare const GRID_ITEM_OFFSETS: readonly [
|
|
|
876
896
|
11
|
|
877
897
|
];
|
|
878
898
|
export type GridItemOffset = typeof GRID_ITEM_OFFSETS[number];
|
|
879
|
-
declare const HEADING_SIZES: readonly [
|
|
880
|
-
"small",
|
|
881
|
-
"medium",
|
|
882
|
-
"large",
|
|
883
|
-
"x-large",
|
|
884
|
-
"xx-large",
|
|
885
|
-
"inherit"
|
|
886
|
-
];
|
|
887
|
-
export type HeadingSize = (typeof HEADING_SIZES)[number];
|
|
888
899
|
declare const HEADING_COLORS: readonly [
|
|
889
900
|
"primary",
|
|
890
901
|
"inherit"
|
|
@@ -955,7 +966,7 @@ export type LinkIcon = LinkButtonIconName;
|
|
|
955
966
|
export type LinkPureIcon = LinkButtonIconName;
|
|
956
967
|
export type LinkPureAriaAttribute = LinkAriaAttribute;
|
|
957
968
|
export type LinkPureAlignLabel = AlignLabel;
|
|
958
|
-
export type LinkPureWeight =
|
|
969
|
+
export type LinkPureWeight = TypographyTextWeight;
|
|
959
970
|
export type LinkPureSize = TextSize;
|
|
960
971
|
export type LinkPureTarget = LinkTarget;
|
|
961
972
|
export 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">;
|
|
@@ -997,9 +1008,11 @@ export type LinkTileModelSignatureWeight = TileWeight;
|
|
|
997
1008
|
export type LinkTileModelSignatureAspectRatio = TileAspectRatio;
|
|
998
1009
|
export type LinkTileModelSignatureLinkDirection = GroupDirection;
|
|
999
1010
|
export type LinkTileProductTarget = LinkTarget;
|
|
1011
|
+
/** @deprecated */
|
|
1000
1012
|
export type LinkTileProductLikeEvent = {
|
|
1001
1013
|
liked: boolean;
|
|
1002
1014
|
};
|
|
1015
|
+
export type LinkTileProductLikeEventDetail = LinkTileProductLikeEvent;
|
|
1003
1016
|
declare const TILE_PRODUCT_ASPECT_RATIOS: readonly [
|
|
1004
1017
|
"3:4",
|
|
1005
1018
|
"9:16"
|
|
@@ -1050,20 +1063,24 @@ declare const MODEL_SIGNATURE_COLORS: readonly [
|
|
|
1050
1063
|
export type ModelSignatureColor = (typeof MODEL_SIGNATURE_COLORS)[number];
|
|
1051
1064
|
export type MultiSelectState = FormState;
|
|
1052
1065
|
export type MultiSelectDropdownDirection = SelectDropdownDirection;
|
|
1066
|
+
/** @deprecated */
|
|
1053
1067
|
export type MultiSelectUpdateEvent = {
|
|
1054
|
-
value: string[];
|
|
1055
1068
|
name: string;
|
|
1069
|
+
value: string[];
|
|
1056
1070
|
};
|
|
1071
|
+
export type MultiSelectUpdateEventDetail = MultiSelectUpdateEvent;
|
|
1057
1072
|
declare const PAGINATION_NUMBER_OF_PAGE_LINKS: readonly [
|
|
1058
1073
|
5,
|
|
1059
1074
|
7
|
|
1060
1075
|
];
|
|
1061
1076
|
/** @deprecated */
|
|
1062
1077
|
export type PaginationMaxNumberOfPageLinks = (typeof PAGINATION_NUMBER_OF_PAGE_LINKS)[number];
|
|
1078
|
+
/** @deprecated */
|
|
1063
1079
|
export type PaginationUpdateEvent = {
|
|
1064
1080
|
page: number;
|
|
1065
1081
|
previousPage: number;
|
|
1066
1082
|
};
|
|
1083
|
+
export type PaginationUpdateEventDetail = PaginationUpdateEvent;
|
|
1067
1084
|
export type PaginationInternationalization = Partial<Record<"root" | "prev" | "next" | "page", string>> | string;
|
|
1068
1085
|
declare const PIN_CODE_TYPES: readonly [
|
|
1069
1086
|
"number",
|
|
@@ -1079,10 +1096,12 @@ declare const PIN_CODE_LENGTHS: readonly [
|
|
|
1079
1096
|
6
|
|
1080
1097
|
];
|
|
1081
1098
|
export type PinCodeLength = (typeof PIN_CODE_LENGTHS)[number];
|
|
1099
|
+
/** @deprecated */
|
|
1082
1100
|
export type PinCodeUpdateEvent = {
|
|
1083
1101
|
value: string;
|
|
1084
1102
|
isComplete: boolean;
|
|
1085
1103
|
};
|
|
1104
|
+
export type PinCodeUpdateEventDetail = PinCodeUpdateEvent;
|
|
1086
1105
|
export type PinCodeState = FormState;
|
|
1087
1106
|
declare const POPOVER_DIRECTIONS: readonly [
|
|
1088
1107
|
"top",
|
|
@@ -1101,9 +1120,11 @@ declare const SEGMENTED_CONTROL_BACKGROUND_COLORS: readonly [
|
|
|
1101
1120
|
"background-default"
|
|
1102
1121
|
];
|
|
1103
1122
|
export type SegmentedControlBackgroundColor = (typeof SEGMENTED_CONTROL_BACKGROUND_COLORS)[number];
|
|
1123
|
+
/** @deprecated */
|
|
1104
1124
|
export type SegmentedControlUpdateEvent = {
|
|
1105
1125
|
value: string | number;
|
|
1106
1126
|
};
|
|
1127
|
+
export type SegmentedControlUpdateEventDetail = SegmentedControlUpdateEvent;
|
|
1107
1128
|
declare const SEGMENTED_CONTROL_COLUMNS: (string | number)[];
|
|
1108
1129
|
export type SegmentedControlColumns = (typeof SEGMENTED_CONTROL_COLUMNS)[number];
|
|
1109
1130
|
export type SegmentedControlItemIcon = LinkButtonIconName;
|
|
@@ -1130,9 +1151,11 @@ declare const STEPPER_HORIZONTAL_SIZES: readonly [
|
|
|
1130
1151
|
"medium"
|
|
1131
1152
|
];
|
|
1132
1153
|
export type StepperHorizontalSize = (typeof STEPPER_HORIZONTAL_SIZES)[number];
|
|
1154
|
+
/** @deprecated */
|
|
1133
1155
|
export type StepperHorizontalUpdateEvent = {
|
|
1134
1156
|
activeStepIndex: number;
|
|
1135
1157
|
};
|
|
1158
|
+
export type StepperHorizontalUpdateEventDetail = StepperHorizontalUpdateEvent;
|
|
1136
1159
|
declare const STEPPER_ITEM_STATES: readonly [
|
|
1137
1160
|
"current",
|
|
1138
1161
|
"complete",
|
|
@@ -1140,16 +1163,20 @@ declare const STEPPER_ITEM_STATES: readonly [
|
|
|
1140
1163
|
];
|
|
1141
1164
|
export type StepperHorizontalItemState = (typeof STEPPER_ITEM_STATES)[number];
|
|
1142
1165
|
export type SwitchAlignLabel = AlignLabel;
|
|
1166
|
+
/** @deprecated */
|
|
1143
1167
|
export type SwitchUpdateEvent = {
|
|
1144
1168
|
checked: boolean;
|
|
1145
1169
|
};
|
|
1170
|
+
export type SwitchUpdateEventDetail = SwitchUpdateEvent;
|
|
1146
1171
|
export type Direction = "asc" | "desc";
|
|
1147
1172
|
export type TableHeadCellSort = {
|
|
1148
1173
|
id: string;
|
|
1149
1174
|
active?: boolean;
|
|
1150
1175
|
direction?: Direction;
|
|
1151
1176
|
};
|
|
1177
|
+
/** @deprecated */
|
|
1152
1178
|
export type TableUpdateEvent = TableHeadCellSort;
|
|
1179
|
+
export type TableUpdateEventDetail = TableUpdateEvent;
|
|
1153
1180
|
declare const TABS_BAR_SIZES: readonly [
|
|
1154
1181
|
"small",
|
|
1155
1182
|
"medium"
|
|
@@ -1161,9 +1188,11 @@ declare const TABS_BAR_WEIGHTS: readonly [
|
|
|
1161
1188
|
"semibold"
|
|
1162
1189
|
];
|
|
1163
1190
|
export type TabsBarWeight = (typeof TABS_BAR_WEIGHTS)[number];
|
|
1191
|
+
/** @deprecated */
|
|
1164
1192
|
export type TabsBarUpdateEvent = {
|
|
1165
1193
|
activeTabIndex: number;
|
|
1166
1194
|
};
|
|
1195
|
+
export type TabsBarUpdateEventDetail = TabsBarUpdateEvent;
|
|
1167
1196
|
/** @deprecated */
|
|
1168
1197
|
export type TabsBarGradientColorScheme = ScrollerGradientColorScheme;
|
|
1169
1198
|
export type TabsBarGradientColor = ScrollerGradientColor;
|
|
@@ -1172,7 +1201,9 @@ export type TabsWeight = TabsBarWeight;
|
|
|
1172
1201
|
/** @deprecated */
|
|
1173
1202
|
export type TabsGradientColorScheme = TabsBarGradientColorScheme;
|
|
1174
1203
|
export type TabsGradientColor = TabsBarGradientColor;
|
|
1204
|
+
/** @deprecated */
|
|
1175
1205
|
export type TabsUpdateEvent = TabsBarUpdateEvent;
|
|
1206
|
+
export type TabsUpdateEventDetail = TabsUpdateEvent;
|
|
1176
1207
|
declare const TAG_DISMISSIBLE_COLORS: readonly [
|
|
1177
1208
|
"background-base",
|
|
1178
1209
|
"background-surface",
|
|
@@ -1213,6 +1244,8 @@ declare const TEXT_TAGS: readonly [
|
|
|
1213
1244
|
];
|
|
1214
1245
|
export type TextTag = (typeof TEXT_TAGS)[number];
|
|
1215
1246
|
export type TextAlign = TypographyAlign;
|
|
1247
|
+
export type TextColor = TypographyTextColor;
|
|
1248
|
+
export type TextWeight = TypographyTextWeight;
|
|
1216
1249
|
declare const UNIT_POSITIONS: readonly [
|
|
1217
1250
|
"prefix",
|
|
1218
1251
|
"suffix"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@porsche-design-system/components-vue",
|
|
3
|
-
"version": "3.10.0-rc.
|
|
3
|
+
"version": "3.10.0-rc.4",
|
|
4
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.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"porsche",
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"license": "SEE LICENSE IN LICENSE",
|
|
18
18
|
"homepage": "https://designsystem.porsche.com",
|
|
19
19
|
"dependencies": {
|
|
20
|
-
"@porsche-design-system/components-js": "3.10.0-rc.
|
|
20
|
+
"@porsche-design-system/components-js": "3.10.0-rc.4"
|
|
21
21
|
},
|
|
22
22
|
"peerDependencies": {
|
|
23
23
|
"vue": ">=3.0.0 <4.0.0"
|