@porsche-design-system/components-vue 3.0.0-alpha.3 → 3.0.0-alpha.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 +83 -0
- package/lib/components/BannerWrapper.vue.d.ts +4 -2
- package/lib/components/ButtonTileWrapper.vue.d.ts +171 -0
- package/lib/components/ButtonTileWrapper.vue.js +40 -0
- package/lib/components/ButtonTileWrapper.vue2.js +4 -0
- package/lib/components/CarouselWrapper.vue.d.ts +16 -8
- package/lib/components/CarouselWrapper.vue.js +13 -12
- package/lib/components/DisplayWrapper.vue.d.ts +2 -2
- package/lib/components/FieldsetWrapper.vue.d.ts +95 -0
- package/lib/components/FieldsetWrapper.vue.js +32 -0
- package/lib/components/FieldsetWrapper.vue2.js +4 -0
- package/lib/components/FieldsetWrapperWrapper.vue.d.ts +2 -1
- package/lib/components/GridItemWrapper.vue.d.ts +4 -4
- package/lib/components/HeadingWrapper.vue.d.ts +2 -2
- package/lib/components/HeadlineWrapper.vue.d.ts +3 -3
- package/lib/components/IconWrapper.vue.d.ts +2 -2
- package/lib/components/LinkTileModelSignatureWrapper.vue.d.ts +106 -0
- package/lib/components/LinkTileModelSignatureWrapper.vue.js +33 -0
- package/lib/components/LinkTileModelSignatureWrapper.vue2.js +4 -0
- package/lib/components/LinkTileWrapper.vue.d.ts +3 -3
- package/lib/components/ModelSignatureWrapper.vue.d.ts +4 -4
- package/lib/components/PaginationWrapper.vue.d.ts +2 -2
- package/lib/components/PopoverWrapper.vue.d.ts +2 -2
- package/lib/components/ScrollerWrapper.vue.d.ts +11 -0
- package/lib/components/ScrollerWrapper.vue.js +11 -10
- package/lib/components/TableWrapper.vue.d.ts +23 -3
- package/lib/components/TableWrapper.vue.js +11 -10
- package/lib/components/TextWrapper.vue.d.ts +2 -2
- package/lib/components/index.d.ts +3 -0
- package/lib/types.d.ts +74 -43
- package/package.json +2 -2
- package/public-api.js +117 -111
- package/styles/_index.scss +1 -0
- package/styles/scss.scss +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -9,6 +9,78 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|
|
9
9
|
|
|
10
10
|
### [Unreleased]
|
|
11
11
|
|
|
12
|
+
### [3.0.0-alpha.4] - 2023-03-28
|
|
13
|
+
|
|
14
|
+
#### Changed
|
|
15
|
+
|
|
16
|
+
- `Table` matches new design language [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2364/)
|
|
17
|
+
|
|
18
|
+
#### Added
|
|
19
|
+
|
|
20
|
+
- Styles: [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2422)
|
|
21
|
+
- `gridWide`
|
|
22
|
+
- `gridWideColumnStart` and `pds-grid-wide-column-start`
|
|
23
|
+
- `gridWideColumnEnd` and `pds-grid-wide-column-end`
|
|
24
|
+
- `gridNarrowOffset`, `gridNarrowOffsetBase`, `gridNarrowOffsetS`, `gridNarrowOffsetXXL` and
|
|
25
|
+
`$pds-grid-narrow-offset-base`, `$pds-grid-narrow-offset-s`, `$pds-grid-narrow-offset-xxl`
|
|
26
|
+
- `gridBasicOffset`, `gridBasicOffsetBase`, `gridBasicOffsetS`, `gridBasicOffsetXXL` and
|
|
27
|
+
`$pds-grid-basic-offset-base`, `$pds-grid-basic-offset-s`, `$pds-grid-basic-offset-xxl`
|
|
28
|
+
- `gridExtendedOffset`, `gridExtendedOffsetBase`, `gridExtendedOffsetS`, `gridExtendedOffsetXXL` and
|
|
29
|
+
`$pds-grid-extended-offset-base`, `$pds-grid-extended-offset-s`, `$pds-grid-extended-offset-xxl`
|
|
30
|
+
- `gridWideOffset`, `gridWideOffsetBase`, `gridWideOffsetS`, `gridWideOffsetXXL` and `$pds-grid-wide-offset-base`,
|
|
31
|
+
`$pds-grid-wide-offset-s`, `$pds-grid-wide-offset-xxl`
|
|
32
|
+
- `gridFullOffset` and `$pds-grid-full-offset`
|
|
33
|
+
- `Button Tile` [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2381)
|
|
34
|
+
- `Fieldset` [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2404)
|
|
35
|
+
- `Link Tile Model Signature` [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2388)
|
|
36
|
+
- Prop `activeSlideIndex` to `Carousel` [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2421)
|
|
37
|
+
- Prop `slidesPerPage` supports value `auto` of `Carousel`
|
|
38
|
+
[PR](https://github.com/porsche-design-system/porsche-design-system/pull/2421)
|
|
39
|
+
- Prop `scrollbar` for `Scroller` [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2364/)
|
|
40
|
+
- Prop `theme` for `Table` [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2364/)
|
|
41
|
+
|
|
42
|
+
#### Fixed
|
|
43
|
+
|
|
44
|
+
- React: missing animation of `Carousel` in certain scenarios
|
|
45
|
+
|
|
46
|
+
#### Changed
|
|
47
|
+
|
|
48
|
+
- Styles: `gridStyles` and `pds-grid` are supporting an additional column range called `wide`
|
|
49
|
+
[PR](https://github.com/porsche-design-system/porsche-design-system/pull/2422)
|
|
50
|
+
- Styles: SCSS version needs to be imported by `@porsche-design-system/components-js/styles` instead of
|
|
51
|
+
`@porsche-design-system/components-js/styles/scss`
|
|
52
|
+
[PR](https://github.com/porsche-design-system/porsche-design-system/pull/2422)
|
|
53
|
+
|
|
54
|
+
#### Removed
|
|
55
|
+
|
|
56
|
+
- `Banner`: CSS variable `--p-banner-position-type`
|
|
57
|
+
[PR](https://github.com/porsche-design-system/porsche-design-system/pull/2422)
|
|
58
|
+
- `gridSafeZone`, `gridSafeZoneBase`, `gridSafeZoneXXL` and `pds-grid-safe-zone-base`, `pds-grid-safe-zone-xxl`
|
|
59
|
+
[PR](https://github.com/porsche-design-system/porsche-design-system/pull/2422)
|
|
60
|
+
- `gridWidth`, `gridWidthMin`, `gridWidthMax` and `pds-grid-width-min`, `pds-grid-width-max`
|
|
61
|
+
[PR](https://github.com/porsche-design-system/porsche-design-system/pull/2422)
|
|
62
|
+
|
|
63
|
+
#### 🤖 Property deprecations 🤖
|
|
64
|
+
|
|
65
|
+
##### Banner:
|
|
66
|
+
|
|
67
|
+
- Prop `width` has no effect anymore, instead the component is aligned with Porsche Grid "extended" by default.
|
|
68
|
+
[PR](https://github.com/porsche-design-system/porsche-design-system/pull/2422)
|
|
69
|
+
|
|
70
|
+
#### 🤡 Component deprecations 🤡
|
|
71
|
+
|
|
72
|
+
##### Fieldset Wrapper: [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2404)
|
|
73
|
+
|
|
74
|
+
```diff
|
|
75
|
+
- <p-fieldset-wrapper label="Some legend label">
|
|
76
|
+
+ <p-fieldset label="Some legend label">
|
|
77
|
+
<p-text-field-wrapper label="Some label">
|
|
78
|
+
<input type="text" name="some-name" />
|
|
79
|
+
</p-text-field-wrapper>
|
|
80
|
+
- </p-fieldset-wrapper>
|
|
81
|
+
+ </p-fieldset>
|
|
82
|
+
```
|
|
83
|
+
|
|
12
84
|
### [3.0.0-alpha.3] - 2023-03-17
|
|
13
85
|
|
|
14
86
|
#### 🤖 Property deprecations 🤖
|
|
@@ -464,6 +536,17 @@ possible. Nevertheless, there are a few breaking changes and some more deprecati
|
|
|
464
536
|
</p-link-pure>
|
|
465
537
|
```
|
|
466
538
|
|
|
539
|
+
##### Marque:
|
|
540
|
+
|
|
541
|
+
- Removed `variant` property.
|
|
542
|
+
|
|
543
|
+
```diff
|
|
544
|
+
- <p-marque variant="75-years"></p-marque>
|
|
545
|
+
+ <p-marque></p-marque>
|
|
546
|
+
// or even better, replace component by wordmark
|
|
547
|
+
+ <p-wordmark></p-wordmark>
|
|
548
|
+
```
|
|
549
|
+
|
|
467
550
|
##### Switch:
|
|
468
551
|
|
|
469
552
|
- Removed deprecated prop `tabbable`.
|
|
@@ -21,7 +21,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
21
21
|
*/
|
|
22
22
|
theme?: "light" | "dark" | undefined;
|
|
23
23
|
/**
|
|
24
|
-
*
|
|
24
|
+
* Has no effect anymore
|
|
25
|
+
* @deprecated since v3.0.0, will be removed with next major release
|
|
25
26
|
*/
|
|
26
27
|
width?: "extended" | "basic" | "fluid" | undefined;
|
|
27
28
|
}>, {
|
|
@@ -55,7 +56,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
55
56
|
*/
|
|
56
57
|
theme?: "light" | "dark" | undefined;
|
|
57
58
|
/**
|
|
58
|
-
*
|
|
59
|
+
* Has no effect anymore
|
|
60
|
+
* @deprecated since v3.0.0, will be removed with next major release
|
|
59
61
|
*/
|
|
60
62
|
width?: "extended" | "basic" | "fluid" | undefined;
|
|
61
63
|
}>, {
|
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
import type { ButtonTileAlign, SelectedAriaAttributes, BreakpointCustomizable, ButtonTileAspectRatio, ButtonTileIcon, ButtonTileSize, ButtonTileType, ButtonTileWeight } from '../types';
|
|
2
|
+
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
3
|
+
/**
|
|
4
|
+
* Alignment of button and description.
|
|
5
|
+
*/
|
|
6
|
+
align?: "top" | "bottom" | undefined;
|
|
7
|
+
/**
|
|
8
|
+
* Add ARIA attributes.
|
|
9
|
+
*/
|
|
10
|
+
aria?: SelectedAriaAttributes<"aria-label" | "aria-expanded" | "aria-pressed" | "aria-haspopup"> | undefined;
|
|
11
|
+
/**
|
|
12
|
+
* Aspect ratio of the button-tile.
|
|
13
|
+
*/
|
|
14
|
+
aspectRatio?: BreakpointCustomizable<"1:1" | "4:3" | "3:4" | "16:9" | "9:16"> | undefined;
|
|
15
|
+
/**
|
|
16
|
+
* Displays the button-tile as compact version with description and button icon only.
|
|
17
|
+
*/
|
|
18
|
+
compact?: BreakpointCustomizable<boolean> | undefined;
|
|
19
|
+
/**
|
|
20
|
+
* Description text.
|
|
21
|
+
*/
|
|
22
|
+
description: string;
|
|
23
|
+
/**
|
|
24
|
+
* Disables the button. No events will be triggered while disabled state is active.
|
|
25
|
+
*/
|
|
26
|
+
disabled?: boolean | undefined;
|
|
27
|
+
/**
|
|
28
|
+
* Show gradient.
|
|
29
|
+
*/
|
|
30
|
+
gradient?: boolean | undefined;
|
|
31
|
+
/**
|
|
32
|
+
* The icon shown. By choosing 'none', no icon is displayed.
|
|
33
|
+
*/
|
|
34
|
+
icon?: import("../types").LinkButtonIconName | undefined;
|
|
35
|
+
/**
|
|
36
|
+
* A URL path to a custom icon.
|
|
37
|
+
*/
|
|
38
|
+
iconSource?: string | undefined;
|
|
39
|
+
/**
|
|
40
|
+
* Label of the button.
|
|
41
|
+
*/
|
|
42
|
+
label: string;
|
|
43
|
+
/**
|
|
44
|
+
* Disables the button-tile and shows a loading indicator. No events will be triggered while loading state is active.
|
|
45
|
+
*/
|
|
46
|
+
loading?: boolean | undefined;
|
|
47
|
+
/**
|
|
48
|
+
* Font size of the description.
|
|
49
|
+
*/
|
|
50
|
+
size?: BreakpointCustomizable<"default" | "inherit"> | undefined;
|
|
51
|
+
/**
|
|
52
|
+
* Specifies the type of the button.
|
|
53
|
+
*/
|
|
54
|
+
type?: "reset" | "button" | "submit" | undefined;
|
|
55
|
+
/**
|
|
56
|
+
* Font weight of the description.
|
|
57
|
+
*/
|
|
58
|
+
weight?: BreakpointCustomizable<"regular" | "semi-bold"> | undefined;
|
|
59
|
+
}>, {
|
|
60
|
+
align: string;
|
|
61
|
+
aspectRatio: string;
|
|
62
|
+
compact: boolean;
|
|
63
|
+
disabled: boolean;
|
|
64
|
+
gradient: boolean;
|
|
65
|
+
icon: string;
|
|
66
|
+
loading: boolean;
|
|
67
|
+
size: string;
|
|
68
|
+
type: string;
|
|
69
|
+
weight: string;
|
|
70
|
+
}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
71
|
+
/**
|
|
72
|
+
* Alignment of button and description.
|
|
73
|
+
*/
|
|
74
|
+
align?: "top" | "bottom" | undefined;
|
|
75
|
+
/**
|
|
76
|
+
* Add ARIA attributes.
|
|
77
|
+
*/
|
|
78
|
+
aria?: SelectedAriaAttributes<"aria-label" | "aria-expanded" | "aria-pressed" | "aria-haspopup"> | undefined;
|
|
79
|
+
/**
|
|
80
|
+
* Aspect ratio of the button-tile.
|
|
81
|
+
*/
|
|
82
|
+
aspectRatio?: BreakpointCustomizable<"1:1" | "4:3" | "3:4" | "16:9" | "9:16"> | undefined;
|
|
83
|
+
/**
|
|
84
|
+
* Displays the button-tile as compact version with description and button icon only.
|
|
85
|
+
*/
|
|
86
|
+
compact?: BreakpointCustomizable<boolean> | undefined;
|
|
87
|
+
/**
|
|
88
|
+
* Description text.
|
|
89
|
+
*/
|
|
90
|
+
description: string;
|
|
91
|
+
/**
|
|
92
|
+
* Disables the button. No events will be triggered while disabled state is active.
|
|
93
|
+
*/
|
|
94
|
+
disabled?: boolean | undefined;
|
|
95
|
+
/**
|
|
96
|
+
* Show gradient.
|
|
97
|
+
*/
|
|
98
|
+
gradient?: boolean | undefined;
|
|
99
|
+
/**
|
|
100
|
+
* The icon shown. By choosing 'none', no icon is displayed.
|
|
101
|
+
*/
|
|
102
|
+
icon?: import("../types").LinkButtonIconName | undefined;
|
|
103
|
+
/**
|
|
104
|
+
* A URL path to a custom icon.
|
|
105
|
+
*/
|
|
106
|
+
iconSource?: string | undefined;
|
|
107
|
+
/**
|
|
108
|
+
* Label of the button.
|
|
109
|
+
*/
|
|
110
|
+
label: string;
|
|
111
|
+
/**
|
|
112
|
+
* Disables the button-tile and shows a loading indicator. No events will be triggered while loading state is active.
|
|
113
|
+
*/
|
|
114
|
+
loading?: boolean | undefined;
|
|
115
|
+
/**
|
|
116
|
+
* Font size of the description.
|
|
117
|
+
*/
|
|
118
|
+
size?: BreakpointCustomizable<"default" | "inherit"> | undefined;
|
|
119
|
+
/**
|
|
120
|
+
* Specifies the type of the button.
|
|
121
|
+
*/
|
|
122
|
+
type?: "reset" | "button" | "submit" | undefined;
|
|
123
|
+
/**
|
|
124
|
+
* Font weight of the description.
|
|
125
|
+
*/
|
|
126
|
+
weight?: BreakpointCustomizable<"regular" | "semi-bold"> | undefined;
|
|
127
|
+
}>, {
|
|
128
|
+
align: string;
|
|
129
|
+
aspectRatio: string;
|
|
130
|
+
compact: boolean;
|
|
131
|
+
disabled: boolean;
|
|
132
|
+
gradient: boolean;
|
|
133
|
+
icon: string;
|
|
134
|
+
loading: boolean;
|
|
135
|
+
size: string;
|
|
136
|
+
type: string;
|
|
137
|
+
weight: string;
|
|
138
|
+
}>>>, {
|
|
139
|
+
weight: BreakpointCustomizable<ButtonTileWeight>;
|
|
140
|
+
compact: BreakpointCustomizable<boolean>;
|
|
141
|
+
size: BreakpointCustomizable<ButtonTileSize>;
|
|
142
|
+
type: ButtonTileType;
|
|
143
|
+
disabled: boolean;
|
|
144
|
+
icon: ButtonTileIcon;
|
|
145
|
+
loading: boolean;
|
|
146
|
+
align: ButtonTileAlign;
|
|
147
|
+
aspectRatio: BreakpointCustomizable<ButtonTileAspectRatio>;
|
|
148
|
+
gradient: boolean;
|
|
149
|
+
}>, {
|
|
150
|
+
default: (_: {}) => any;
|
|
151
|
+
}>;
|
|
152
|
+
export default _default;
|
|
153
|
+
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
154
|
+
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
155
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
156
|
+
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
157
|
+
} : {
|
|
158
|
+
type: import('vue').PropType<T[K]>;
|
|
159
|
+
required: true;
|
|
160
|
+
};
|
|
161
|
+
};
|
|
162
|
+
type __VLS_WithDefaults<P, D> = {
|
|
163
|
+
[K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
|
|
164
|
+
default: D[K];
|
|
165
|
+
} : P[K];
|
|
166
|
+
};
|
|
167
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
168
|
+
new (): {
|
|
169
|
+
$slots: S;
|
|
170
|
+
};
|
|
171
|
+
};
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { defineComponent as u, ref as r, onMounted as d, onUpdated as f, openBlock as p, createBlock as s, resolveDynamicComponent as i, unref as c, withCtx as m, renderSlot as b } from "vue";
|
|
2
|
+
import { getPrefixedTagName as g, syncProperties as o } from "../../utils.js";
|
|
3
|
+
const C = /* @__PURE__ */ u({
|
|
4
|
+
__name: "ButtonTileWrapper",
|
|
5
|
+
props: {
|
|
6
|
+
align: { default: "bottom" },
|
|
7
|
+
aria: null,
|
|
8
|
+
aspectRatio: { default: "4:3" },
|
|
9
|
+
compact: { default: !1 },
|
|
10
|
+
description: null,
|
|
11
|
+
disabled: { type: Boolean, default: !1 },
|
|
12
|
+
gradient: { type: Boolean, default: !0 },
|
|
13
|
+
icon: { default: "none" },
|
|
14
|
+
iconSource: null,
|
|
15
|
+
label: null,
|
|
16
|
+
loading: { type: Boolean, default: !1 },
|
|
17
|
+
size: { default: "default" },
|
|
18
|
+
type: { default: "submit" },
|
|
19
|
+
weight: { default: "semi-bold" }
|
|
20
|
+
},
|
|
21
|
+
setup(n) {
|
|
22
|
+
const t = n, a = g("p-button-tile"), e = r();
|
|
23
|
+
return d(() => {
|
|
24
|
+
o(e.value, t);
|
|
25
|
+
}), f(() => {
|
|
26
|
+
o(e.value, t);
|
|
27
|
+
}), (l, y) => (p(), s(i(c(a)), {
|
|
28
|
+
ref_key: "pdsComponentRef",
|
|
29
|
+
ref: e
|
|
30
|
+
}, {
|
|
31
|
+
default: m(() => [
|
|
32
|
+
b(l.$slots, "default")
|
|
33
|
+
]),
|
|
34
|
+
_: 3
|
|
35
|
+
}, 512));
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
export {
|
|
39
|
+
C as default
|
|
40
|
+
};
|
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
import type { CarouselAlignHeader, BreakpointCustomizable, CarouselChangeEvent, Theme, CarouselWidth } from '../types';
|
|
2
2
|
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
3
|
+
/**
|
|
4
|
+
* Defines which slide to be active (zero-based numbering).
|
|
5
|
+
*/
|
|
6
|
+
activeSlideIndex?: number | undefined;
|
|
3
7
|
/**
|
|
4
8
|
* Alignment of heading and description
|
|
5
9
|
*/
|
|
@@ -29,9 +33,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
29
33
|
*/
|
|
30
34
|
rewind?: boolean | undefined;
|
|
31
35
|
/**
|
|
32
|
-
* Sets the amount of slides visible at the same time.
|
|
36
|
+
* Sets the amount of slides visible at the same time. Can be set to `auto` if you want to define different widths per slide via CSS.
|
|
33
37
|
*/
|
|
34
|
-
slidesPerPage?: BreakpointCustomizable<number> | undefined;
|
|
38
|
+
slidesPerPage?: "auto" | BreakpointCustomizable<number> | undefined;
|
|
35
39
|
/**
|
|
36
40
|
* Adapts the color when used on dark background.
|
|
37
41
|
*/
|
|
@@ -46,8 +50,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
46
50
|
*/
|
|
47
51
|
wrapContent?: boolean | undefined;
|
|
48
52
|
}>, {
|
|
53
|
+
activeSlideIndex: number;
|
|
49
54
|
alignHeader: string;
|
|
50
|
-
intl: () => {};
|
|
51
55
|
pagination: boolean;
|
|
52
56
|
rewind: boolean;
|
|
53
57
|
slidesPerPage: number;
|
|
@@ -58,6 +62,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
58
62
|
} & {
|
|
59
63
|
change: (value: CarouselChangeEvent) => void;
|
|
60
64
|
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
65
|
+
/**
|
|
66
|
+
* Defines which slide to be active (zero-based numbering).
|
|
67
|
+
*/
|
|
68
|
+
activeSlideIndex?: number | undefined;
|
|
61
69
|
/**
|
|
62
70
|
* Alignment of heading and description
|
|
63
71
|
*/
|
|
@@ -87,9 +95,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
87
95
|
*/
|
|
88
96
|
rewind?: boolean | undefined;
|
|
89
97
|
/**
|
|
90
|
-
* Sets the amount of slides visible at the same time.
|
|
98
|
+
* Sets the amount of slides visible at the same time. Can be set to `auto` if you want to define different widths per slide via CSS.
|
|
91
99
|
*/
|
|
92
|
-
slidesPerPage?: BreakpointCustomizable<number> | undefined;
|
|
100
|
+
slidesPerPage?: "auto" | BreakpointCustomizable<number> | undefined;
|
|
93
101
|
/**
|
|
94
102
|
* Adapts the color when used on dark background.
|
|
95
103
|
*/
|
|
@@ -104,8 +112,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
104
112
|
*/
|
|
105
113
|
wrapContent?: boolean | undefined;
|
|
106
114
|
}>, {
|
|
115
|
+
activeSlideIndex: number;
|
|
107
116
|
alignHeader: string;
|
|
108
|
-
intl: () => {};
|
|
109
117
|
pagination: boolean;
|
|
110
118
|
rewind: boolean;
|
|
111
119
|
slidesPerPage: number;
|
|
@@ -117,11 +125,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
117
125
|
}, {
|
|
118
126
|
theme: Theme;
|
|
119
127
|
width: CarouselWidth;
|
|
128
|
+
activeSlideIndex: number;
|
|
120
129
|
alignHeader: CarouselAlignHeader;
|
|
121
|
-
intl: Partial<Record<"prev" | "next" | "first" | "last" | "slideLabel" | "slide", string>>;
|
|
122
130
|
pagination: BreakpointCustomizable<boolean>;
|
|
123
131
|
rewind: boolean;
|
|
124
|
-
slidesPerPage: BreakpointCustomizable<number
|
|
132
|
+
slidesPerPage: BreakpointCustomizable<number> | "auto";
|
|
125
133
|
}>, {
|
|
126
134
|
default: (_: {}) => any;
|
|
127
135
|
}>;
|
|
@@ -1,13 +1,14 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { getPrefixedTagName as
|
|
3
|
-
const P = /* @__PURE__ */
|
|
1
|
+
import { defineComponent as u, ref as s, onMounted as i, onUpdated as p, openBlock as f, createBlock as c, resolveDynamicComponent as m, unref as g, withCtx as h, renderSlot as C } from "vue";
|
|
2
|
+
import { getPrefixedTagName as v, syncProperties as a, addEventListenerToElementRef as o } from "../../utils.js";
|
|
3
|
+
const P = /* @__PURE__ */ u({
|
|
4
4
|
__name: "CarouselWrapper",
|
|
5
5
|
props: {
|
|
6
|
+
activeSlideIndex: { default: 0 },
|
|
6
7
|
alignHeader: { default: "left" },
|
|
7
8
|
description: null,
|
|
8
9
|
disablePagination: null,
|
|
9
10
|
heading: null,
|
|
10
|
-
intl:
|
|
11
|
+
intl: null,
|
|
11
12
|
pagination: { default: !0 },
|
|
12
13
|
rewind: { type: Boolean, default: !0 },
|
|
13
14
|
slidesPerPage: { default: 1 },
|
|
@@ -16,18 +17,18 @@ const P = /* @__PURE__ */ d({
|
|
|
16
17
|
wrapContent: { type: Boolean }
|
|
17
18
|
},
|
|
18
19
|
emits: ["carouselChange", "change"],
|
|
19
|
-
setup(l, { emit:
|
|
20
|
-
const
|
|
21
|
-
return
|
|
22
|
-
a(e.value,
|
|
23
|
-
}),
|
|
24
|
-
a(e.value,
|
|
25
|
-
}), (
|
|
20
|
+
setup(l, { emit: n }) {
|
|
21
|
+
const t = l, r = v("p-carousel"), e = s();
|
|
22
|
+
return i(() => {
|
|
23
|
+
a(e.value, t), o(e.value, "carouselChange", n), o(e.value, "change", n);
|
|
24
|
+
}), p(() => {
|
|
25
|
+
a(e.value, t);
|
|
26
|
+
}), (d, _) => (f(), c(m(g(r)), {
|
|
26
27
|
ref_key: "pdsComponentRef",
|
|
27
28
|
ref: e
|
|
28
29
|
}, {
|
|
29
30
|
default: h(() => [
|
|
30
|
-
C(
|
|
31
|
+
C(d.$slots, "default")
|
|
31
32
|
]),
|
|
32
33
|
_: 3
|
|
33
34
|
}, 512));
|
|
@@ -7,7 +7,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
7
7
|
/**
|
|
8
8
|
* Basic text color variations depending on theme property.
|
|
9
9
|
*/
|
|
10
|
-
color?: "
|
|
10
|
+
color?: "inherit" | "primary" | undefined;
|
|
11
11
|
/**
|
|
12
12
|
* Adds an ellipsis to a single line of text if it overflows.
|
|
13
13
|
*/
|
|
@@ -38,7 +38,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
38
38
|
/**
|
|
39
39
|
* Basic text color variations depending on theme property.
|
|
40
40
|
*/
|
|
41
|
-
color?: "
|
|
41
|
+
color?: "inherit" | "primary" | undefined;
|
|
42
42
|
/**
|
|
43
43
|
* Adds an ellipsis to a single line of text if it overflows.
|
|
44
44
|
*/
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import type { FieldsetLabelSize, FieldsetState, Theme } from '../types';
|
|
2
|
+
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
3
|
+
/**
|
|
4
|
+
* The label text.
|
|
5
|
+
*/
|
|
6
|
+
label?: string | undefined;
|
|
7
|
+
/**
|
|
8
|
+
* The size of the label text.
|
|
9
|
+
*/
|
|
10
|
+
labelSize?: "small" | "medium" | undefined;
|
|
11
|
+
/**
|
|
12
|
+
* The message styled depending on validation state.
|
|
13
|
+
*/
|
|
14
|
+
message?: string | undefined;
|
|
15
|
+
/**
|
|
16
|
+
* Marks the Fieldset as required.
|
|
17
|
+
*/
|
|
18
|
+
required?: boolean | undefined;
|
|
19
|
+
/**
|
|
20
|
+
* The validation state.
|
|
21
|
+
*/
|
|
22
|
+
state?: "success" | "none" | "error" | undefined;
|
|
23
|
+
/**
|
|
24
|
+
* Adapts color depending on theme.
|
|
25
|
+
*/
|
|
26
|
+
theme?: "light" | "dark" | undefined;
|
|
27
|
+
}>, {
|
|
28
|
+
label: string;
|
|
29
|
+
labelSize: string;
|
|
30
|
+
message: string;
|
|
31
|
+
required: boolean;
|
|
32
|
+
state: string;
|
|
33
|
+
theme: string;
|
|
34
|
+
}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
35
|
+
/**
|
|
36
|
+
* The label text.
|
|
37
|
+
*/
|
|
38
|
+
label?: string | undefined;
|
|
39
|
+
/**
|
|
40
|
+
* The size of the label text.
|
|
41
|
+
*/
|
|
42
|
+
labelSize?: "small" | "medium" | undefined;
|
|
43
|
+
/**
|
|
44
|
+
* The message styled depending on validation state.
|
|
45
|
+
*/
|
|
46
|
+
message?: string | undefined;
|
|
47
|
+
/**
|
|
48
|
+
* Marks the Fieldset as required.
|
|
49
|
+
*/
|
|
50
|
+
required?: boolean | undefined;
|
|
51
|
+
/**
|
|
52
|
+
* The validation state.
|
|
53
|
+
*/
|
|
54
|
+
state?: "success" | "none" | "error" | undefined;
|
|
55
|
+
/**
|
|
56
|
+
* Adapts color depending on theme.
|
|
57
|
+
*/
|
|
58
|
+
theme?: "light" | "dark" | undefined;
|
|
59
|
+
}>, {
|
|
60
|
+
label: string;
|
|
61
|
+
labelSize: string;
|
|
62
|
+
message: string;
|
|
63
|
+
required: boolean;
|
|
64
|
+
state: string;
|
|
65
|
+
theme: string;
|
|
66
|
+
}>>>, {
|
|
67
|
+
label: string;
|
|
68
|
+
theme: Theme;
|
|
69
|
+
state: FieldsetState;
|
|
70
|
+
required: boolean;
|
|
71
|
+
message: string;
|
|
72
|
+
labelSize: FieldsetLabelSize;
|
|
73
|
+
}>, {
|
|
74
|
+
default: (_: {}) => any;
|
|
75
|
+
}>;
|
|
76
|
+
export default _default;
|
|
77
|
+
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
78
|
+
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
79
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
80
|
+
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
81
|
+
} : {
|
|
82
|
+
type: import('vue').PropType<T[K]>;
|
|
83
|
+
required: true;
|
|
84
|
+
};
|
|
85
|
+
};
|
|
86
|
+
type __VLS_WithDefaults<P, D> = {
|
|
87
|
+
[K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
|
|
88
|
+
default: D[K];
|
|
89
|
+
} : P[K];
|
|
90
|
+
};
|
|
91
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
92
|
+
new (): {
|
|
93
|
+
$slots: S;
|
|
94
|
+
};
|
|
95
|
+
};
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { defineComponent as l, ref as f, onMounted as p, onUpdated as s, openBlock as d, createBlock as u, resolveDynamicComponent as m, unref as i, withCtx as c, renderSlot as _ } from "vue";
|
|
2
|
+
import { getPrefixedTagName as C, syncProperties as o } from "../../utils.js";
|
|
3
|
+
const b = /* @__PURE__ */ l({
|
|
4
|
+
__name: "FieldsetWrapper",
|
|
5
|
+
props: {
|
|
6
|
+
label: { default: "" },
|
|
7
|
+
labelSize: { default: "medium" },
|
|
8
|
+
message: { default: "" },
|
|
9
|
+
required: { type: Boolean, default: !1 },
|
|
10
|
+
state: { default: "none" },
|
|
11
|
+
theme: { default: "light" }
|
|
12
|
+
},
|
|
13
|
+
setup(n) {
|
|
14
|
+
const t = n, a = C("p-fieldset"), e = f();
|
|
15
|
+
return p(() => {
|
|
16
|
+
o(e.value, t);
|
|
17
|
+
}), s(() => {
|
|
18
|
+
o(e.value, t);
|
|
19
|
+
}), (r, g) => (d(), u(m(i(a)), {
|
|
20
|
+
ref_key: "pdsComponentRef",
|
|
21
|
+
ref: e
|
|
22
|
+
}, {
|
|
23
|
+
default: c(() => [
|
|
24
|
+
_(r.$slots, "default")
|
|
25
|
+
]),
|
|
26
|
+
_: 3
|
|
27
|
+
}, 512));
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
export {
|
|
31
|
+
b as default
|
|
32
|
+
};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { FieldsetWrapperLabelSize, FieldsetWrapperState, Theme } from '../types';
|
|
2
|
+
/** @deprecated since v3.0.0, will be removed with next major release. Please use "p-fieldset" instead. */
|
|
2
3
|
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
3
4
|
/**
|
|
4
5
|
* The label text.
|
|
@@ -67,9 +68,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
67
68
|
label: string;
|
|
68
69
|
theme: Theme;
|
|
69
70
|
state: FieldsetWrapperState;
|
|
71
|
+
required: boolean;
|
|
70
72
|
message: string;
|
|
71
73
|
labelSize: FieldsetWrapperLabelSize;
|
|
72
|
-
required: boolean;
|
|
73
74
|
}>, {
|
|
74
75
|
default: (_: {}) => any;
|
|
75
76
|
}>;
|
|
@@ -4,11 +4,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
4
4
|
/**
|
|
5
5
|
* The offset of the column. Can be between 0 and 11. Also defines the offset of the column for specific breakpoints, like {base: 6, l: 3}. You always need to provide a base value when doing this.
|
|
6
6
|
*/
|
|
7
|
-
offset?: BreakpointCustomizable<0 | 3 | 4 | 6 |
|
|
7
|
+
offset?: BreakpointCustomizable<0 | 3 | 4 | 6 | 5 | 2 | 7 | 1 | 8 | 9 | 10 | 11> | undefined;
|
|
8
8
|
/**
|
|
9
9
|
* The size of the column. Can be between 1 and 12. Also defines the size of the column for specific breakpoints, like {base: 6, l: 3}. You always need to provide a base value when doing this.
|
|
10
10
|
*/
|
|
11
|
-
size?: BreakpointCustomizable<3 | 4 | 6 |
|
|
11
|
+
size?: BreakpointCustomizable<3 | 4 | 6 | 5 | 2 | 7 | 1 | 12 | 8 | 9 | 10 | 11> | undefined;
|
|
12
12
|
}>, {
|
|
13
13
|
offset: number;
|
|
14
14
|
size: number;
|
|
@@ -16,11 +16,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
16
16
|
/**
|
|
17
17
|
* The offset of the column. Can be between 0 and 11. Also defines the offset of the column for specific breakpoints, like {base: 6, l: 3}. You always need to provide a base value when doing this.
|
|
18
18
|
*/
|
|
19
|
-
offset?: BreakpointCustomizable<0 | 3 | 4 | 6 |
|
|
19
|
+
offset?: BreakpointCustomizable<0 | 3 | 4 | 6 | 5 | 2 | 7 | 1 | 8 | 9 | 10 | 11> | undefined;
|
|
20
20
|
/**
|
|
21
21
|
* The size of the column. Can be between 1 and 12. Also defines the size of the column for specific breakpoints, like {base: 6, l: 3}. You always need to provide a base value when doing this.
|
|
22
22
|
*/
|
|
23
|
-
size?: BreakpointCustomizable<3 | 4 | 6 |
|
|
23
|
+
size?: BreakpointCustomizable<3 | 4 | 6 | 5 | 2 | 7 | 1 | 12 | 8 | 9 | 10 | 11> | undefined;
|
|
24
24
|
}>, {
|
|
25
25
|
offset: number;
|
|
26
26
|
size: number;
|
|
@@ -7,7 +7,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
7
7
|
/**
|
|
8
8
|
* Basic text color variations depending on theme property.
|
|
9
9
|
*/
|
|
10
|
-
color?: "
|
|
10
|
+
color?: "inherit" | "primary" | undefined;
|
|
11
11
|
/**
|
|
12
12
|
* Adds an ellipsis to a single line of text if it overflows.
|
|
13
13
|
*/
|
|
@@ -38,7 +38,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
38
38
|
/**
|
|
39
39
|
* Basic text color variations depending on theme property.
|
|
40
40
|
*/
|
|
41
|
-
color?: "
|
|
41
|
+
color?: "inherit" | "primary" | undefined;
|
|
42
42
|
/**
|
|
43
43
|
* Adds an ellipsis to a single line of text if it overflows.
|
|
44
44
|
*/
|