@porsche-design-system/components-vue 3.6.1 → 3.7.0-rc.0

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.
Files changed (18) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/cjs/lib/components/MultiSelectOptionWrapper.vue.cjs +1 -0
  3. package/cjs/lib/components/MultiSelectOptionWrapper.vue2.cjs +1 -0
  4. package/cjs/lib/components/MultiSelectWrapper.vue.cjs +1 -0
  5. package/cjs/lib/components/MultiSelectWrapper.vue2.cjs +1 -0
  6. package/cjs/public-api.cjs +1 -1
  7. package/esm/lib/components/FlexItemWrapper.vue.d.ts +6 -6
  8. package/esm/lib/components/MultiSelectOptionWrapper.vue.d.ts +29 -0
  9. package/esm/lib/components/MultiSelectOptionWrapper.vue.mjs +28 -0
  10. package/esm/lib/components/MultiSelectOptionWrapper.vue2.mjs +4 -0
  11. package/esm/lib/components/MultiSelectWrapper.vue.d.ts +115 -0
  12. package/esm/lib/components/MultiSelectWrapper.vue.mjs +38 -0
  13. package/esm/lib/components/MultiSelectWrapper.vue2.mjs +4 -0
  14. package/esm/lib/components/SelectWrapperWrapper.vue.d.ts +3 -3
  15. package/esm/lib/components/index.d.ts +2 -0
  16. package/esm/lib/types.d.ts +12 -0
  17. package/esm/public-api.mjs +91 -87
  18. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -14,6 +14,17 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
14
14
 
15
15
  ### [Unreleased]
16
16
 
17
+ ### [3.7.0-rc.0] - 2023-09-05
18
+
19
+ #### Added
20
+
21
+ - `Multi Select` ([#2658](https://github.com/porsche-design-system/porsche-design-system/pull/2658))
22
+
23
+ #### Changed
24
+
25
+ - Partials: `Cdn` and `Format` types are exposed
26
+ ([#2760](https://github.com/porsche-design-system/porsche-design-system/pull/2760))
27
+
17
28
  ### [3.6.1] - 2023-08-29
18
29
 
19
30
  ### [3.6.1-rc.0] - 2023-08-29
package/cjs/lib/components/MultiSelectOptionWrapper.vue.cjs ADDED
@@ -0,0 +1 @@
1
+ "use strict";const e=require("vue"),o=require("../../utils.cjs"),a=e.defineComponent({__name:"MultiSelectOptionWrapper",props:{disabled:{type:Boolean,default:!1},value:{}},setup(r){const n=r,s=o.getPrefixedTagName("p-multi-select-option"),t=e.ref();return e.onMounted(()=>{o.syncProperties(t.value,n)}),e.onUpdated(()=>{o.syncProperties(t.value,n)}),(p,l)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(s)),{ref_key:"pdsComponentRef",ref:t},{default:e.withCtx(()=>[e.renderSlot(p.$slots,"default")]),_:3},512))}});module.exports=a;
package/cjs/lib/components/MultiSelectOptionWrapper.vue2.cjs ADDED
@@ -0,0 +1 @@
1
+ "use strict";const e=require("./MultiSelectOptionWrapper.vue.cjs");module.exports=e;
package/cjs/lib/components/MultiSelectWrapper.vue.cjs ADDED
@@ -0,0 +1 @@
1
+ "use strict";const e=require("vue"),a=require("../../utils.cjs"),u=e.defineComponent({__name:"MultiSelectWrapper",props:{description:{default:""},disabled:{type:Boolean,default:!1},dropdownDirection:{default:"auto"},hideLabel:{default:!1},label:{default:""},message:{default:""},name:{},required:{type:Boolean,default:!1},state:{default:"none"},theme:{default:"light"},value:{default:()=>[]}},emits:["update"],setup(o,{emit:l}){const n=o,s=a.getPrefixedTagName("p-multi-select"),t=e.ref();return e.onMounted(()=>{a.syncProperties(t.value,n),a.addEventListenerToElementRef(t.value,"update",l)}),e.onUpdated(()=>{a.syncProperties(t.value,n)}),(r,d)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(s)),{ref_key:"pdsComponentRef",ref:t},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"default")]),_:3},512))}});module.exports=u;
package/cjs/lib/components/MultiSelectWrapper.vue2.cjs ADDED
@@ -0,0 +1 @@
1
+ "use strict";const e=require("./MultiSelectWrapper.vue.cjs");module.exports=e;
package/cjs/public-api.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("@porsche-design-system/components-js"),_=require("./lib/components/AccordionWrapper.vue.cjs"),t=require("./lib/components/BannerWrapper.vue.cjs"),p=require("./lib/components/ButtonWrapper.vue.cjs"),u=require("./lib/components/ButtonGroupWrapper.vue.cjs"),s=require("./lib/components/ButtonPureWrapper.vue.cjs"),a=require("./lib/components/ButtonTileWrapper.vue.cjs"),i=require("./lib/components/CarouselWrapper.vue.cjs"),n=require("./lib/components/CheckboxWrapperWrapper.vue.cjs"),o=require("./lib/components/ContentWrapperWrapper.vue.cjs"),c=require("./lib/components/CrestWrapper.vue.cjs"),l=require("./lib/components/DisplayWrapper.vue.cjs"),v=require("./lib/components/DividerWrapper.vue.cjs"),g=require("./lib/components/FieldsetWrapper.vue.cjs"),P=require("./lib/components/FieldsetWrapperWrapper.vue.cjs"),y=require("./lib/components/FlexWrapper.vue.cjs"),W=require("./lib/components/FlexItemWrapper.vue.cjs"),q=require("./lib/components/FlyoutWrapper.vue.cjs"),d=require("./lib/components/GridWrapper.vue.cjs"),T=require("./lib/components/GridItemWrapper.vue.cjs"),m=require("./lib/components/HeadingWrapper.vue.cjs"),S=require("./lib/components/HeadlineWrapper.vue.cjs"),b=require("./lib/components/IconWrapper.vue.cjs"),x=require("./lib/components/InlineNotificationWrapper.vue.cjs"),B=require("./lib/components/LinkWrapper.vue.cjs"),C=require("./lib/components/LinkPureWrapper.vue.cjs"),I=require("./lib/components/LinkSocialWrapper.vue.cjs"),k=require("./lib/components/LinkTileWrapper.vue.cjs"),H=require("./lib/components/LinkTileModelSignatureWrapper.vue.cjs"),L=require("./lib/components/MarqueWrapper.vue.cjs"),D=require("./lib/components/ModalWrapper.vue.cjs"),F=require("./lib/components/ModelSignatureWrapper.vue.cjs"),M=require("./lib/components/PaginationWrapper.vue.cjs"),h=require("./lib/components/PopoverWrapper.vue.cjs"),R=require("./lib/components/RadioButtonWrapperWrapper.vue.cjs"),w=require("./lib/components/ScrollerWrapper.vue.cjs"),G=require("./lib/components/SegmentedControlWrapper.vue.cjs"),f=require("./lib/components/SegmentedControlItemWrapper.vue.cjs"),z=require("./lib/components/SelectWrapperWrapper.vue.cjs"),j=require("./lib/components/SpinnerWrapper.vue.cjs"),A=require("./lib/components/StepperHorizontalWrapper.vue.cjs"),N=require("./lib/components/StepperHorizontalItemWrapper.vue.cjs"),O=require("./lib/components/SwitchWrapper.vue.cjs"),J=require("./lib/components/TableWrapper.vue.cjs"),E=require("./lib/components/TableBodyWrapper.vue.cjs"),K=require("./lib/components/TableCellWrapper.vue.cjs"),Q=require("./lib/components/TableHeadWrapper.vue.cjs"),U=require("./lib/components/TableHeadCellWrapper.vue.cjs"),V=require("./lib/components/TableHeadRowWrapper.vue.cjs"),X=require("./lib/components/TableRowWrapper.vue.cjs"),Y=require("./lib/components/TabsWrapper.vue.cjs"),Z=require("./lib/components/TabsBarWrapper.vue.cjs"),$=require("./lib/components/TabsItemWrapper.vue.cjs"),ee=require("./lib/components/TagWrapper.vue.cjs"),re=require("./lib/components/TagDismissibleWrapper.vue.cjs"),_e=require("./lib/components/TextWrapper.vue.cjs"),te=require("./lib/components/TextFieldWrapperWrapper.vue.cjs"),pe=require("./lib/components/TextListWrapper.vue.cjs"),ue=require("./lib/components/TextListItemWrapper.vue.cjs"),se=require("./lib/components/TextareaWrapperWrapper.vue.cjs"),ae=require("./lib/components/ToastWrapper.vue.cjs"),ie=require("./lib/components/WordmarkWrapper.vue.cjs"),ne=require("./utils.cjs"),oe=require("./PorscheDesignSystemProvider.vue.cjs"),e=require("./plugin.cjs");Object.defineProperty(exports,"componentsReady",{enumerable:!0,get:()=>r.componentsReady});exports.PAccordion=_;exports.PBanner=t;exports.PButton=p;exports.PButtonGroup=u;exports.PButtonPure=s;exports.PButtonTile=a;exports.PCarousel=i;exports.PCheckboxWrapper=n;exports.PContentWrapper=o;exports.PCrest=c;exports.PDisplay=l;exports.PDivider=v;exports.PFieldset=g;exports.PFieldsetWrapper=P;exports.PFlex=y;exports.PFlexItem=W;exports.PFlyout=q;exports.PGrid=d;exports.PGridItem=T;exports.PHeading=m;exports.PHeadline=S;exports.PIcon=b;exports.PInlineNotification=x;exports.PLink=B;exports.PLinkPure=C;exports.PLinkSocial=I;exports.PLinkTile=k;exports.PLinkTileModelSignature=H;exports.PMarque=L;exports.PModal=D;exports.PModelSignature=F;exports.PPagination=M;exports.PPopover=h;exports.PRadioButtonWrapper=R;exports.PScroller=w;exports.PSegmentedControl=G;exports.PSegmentedControlItem=f;exports.PSelectWrapper=z;exports.PSpinner=j;exports.PStepperHorizontal=A;exports.PStepperHorizontalItem=N;exports.PSwitch=O;exports.PTable=J;exports.PTableBody=E;exports.PTableCell=K;exports.PTableHead=Q;exports.PTableHeadCell=U;exports.PTableHeadRow=V;exports.PTableRow=X;exports.PTabs=Y;exports.PTabsBar=Z;exports.PTabsItem=$;exports.PTag=ee;exports.PTagDismissible=re;exports.PText=_e;exports.PTextFieldWrapper=te;exports.PTextList=pe;exports.PTextListItem=ue;exports.PTextareaWrapper=se;exports.PToast=ae;exports.PWordmark=ie;exports.useToastManager=ne.useToastManager;exports.PorscheDesignSystemProvider=oe;exports.createPorscheDesignSystem=e.createPorscheDesignSystem;exports.usePorscheDesignSystemPlugin=e.usePorscheDesignSystemPlugin;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("@porsche-design-system/components-js"),_=require("./lib/components/AccordionWrapper.vue.cjs"),t=require("./lib/components/BannerWrapper.vue.cjs"),p=require("./lib/components/ButtonWrapper.vue.cjs"),u=require("./lib/components/ButtonGroupWrapper.vue.cjs"),s=require("./lib/components/ButtonPureWrapper.vue.cjs"),i=require("./lib/components/ButtonTileWrapper.vue.cjs"),a=require("./lib/components/CarouselWrapper.vue.cjs"),n=require("./lib/components/CheckboxWrapperWrapper.vue.cjs"),c=require("./lib/components/ContentWrapperWrapper.vue.cjs"),o=require("./lib/components/CrestWrapper.vue.cjs"),l=require("./lib/components/DisplayWrapper.vue.cjs"),v=require("./lib/components/DividerWrapper.vue.cjs"),g=require("./lib/components/FieldsetWrapper.vue.cjs"),P=require("./lib/components/FieldsetWrapperWrapper.vue.cjs"),y=require("./lib/components/FlexWrapper.vue.cjs"),W=require("./lib/components/FlexItemWrapper.vue.cjs"),q=require("./lib/components/FlyoutWrapper.vue.cjs"),d=require("./lib/components/GridWrapper.vue.cjs"),T=require("./lib/components/GridItemWrapper.vue.cjs"),S=require("./lib/components/HeadingWrapper.vue.cjs"),m=require("./lib/components/HeadlineWrapper.vue.cjs"),b=require("./lib/components/IconWrapper.vue.cjs"),x=require("./lib/components/InlineNotificationWrapper.vue.cjs"),B=require("./lib/components/LinkWrapper.vue.cjs"),C=require("./lib/components/LinkPureWrapper.vue.cjs"),I=require("./lib/components/LinkSocialWrapper.vue.cjs"),M=require("./lib/components/LinkTileWrapper.vue.cjs"),k=require("./lib/components/LinkTileModelSignatureWrapper.vue.cjs"),H=require("./lib/components/MarqueWrapper.vue.cjs"),L=require("./lib/components/ModalWrapper.vue.cjs"),D=require("./lib/components/ModelSignatureWrapper.vue.cjs"),F=require("./lib/components/MultiSelectWrapper.vue.cjs"),h=require("./lib/components/MultiSelectOptionWrapper.vue.cjs"),R=require("./lib/components/PaginationWrapper.vue.cjs"),w=require("./lib/components/PopoverWrapper.vue.cjs"),G=require("./lib/components/RadioButtonWrapperWrapper.vue.cjs"),f=require("./lib/components/ScrollerWrapper.vue.cjs"),z=require("./lib/components/SegmentedControlWrapper.vue.cjs"),O=require("./lib/components/SegmentedControlItemWrapper.vue.cjs"),j=require("./lib/components/SelectWrapperWrapper.vue.cjs"),A=require("./lib/components/SpinnerWrapper.vue.cjs"),N=require("./lib/components/StepperHorizontalWrapper.vue.cjs"),J=require("./lib/components/StepperHorizontalItemWrapper.vue.cjs"),E=require("./lib/components/SwitchWrapper.vue.cjs"),K=require("./lib/components/TableWrapper.vue.cjs"),Q=require("./lib/components/TableBodyWrapper.vue.cjs"),U=require("./lib/components/TableCellWrapper.vue.cjs"),V=require("./lib/components/TableHeadWrapper.vue.cjs"),X=require("./lib/components/TableHeadCellWrapper.vue.cjs"),Y=require("./lib/components/TableHeadRowWrapper.vue.cjs"),Z=require("./lib/components/TableRowWrapper.vue.cjs"),$=require("./lib/components/TabsWrapper.vue.cjs"),ee=require("./lib/components/TabsBarWrapper.vue.cjs"),re=require("./lib/components/TabsItemWrapper.vue.cjs"),_e=require("./lib/components/TagWrapper.vue.cjs"),te=require("./lib/components/TagDismissibleWrapper.vue.cjs"),pe=require("./lib/components/TextWrapper.vue.cjs"),ue=require("./lib/components/TextFieldWrapperWrapper.vue.cjs"),se=require("./lib/components/TextListWrapper.vue.cjs"),ie=require("./lib/components/TextListItemWrapper.vue.cjs"),ae=require("./lib/components/TextareaWrapperWrapper.vue.cjs"),ne=require("./lib/components/ToastWrapper.vue.cjs"),ce=require("./lib/components/WordmarkWrapper.vue.cjs"),oe=require("./utils.cjs"),le=require("./PorscheDesignSystemProvider.vue.cjs"),e=require("./plugin.cjs");Object.defineProperty(exports,"componentsReady",{enumerable:!0,get:()=>r.componentsReady});exports.PAccordion=_;exports.PBanner=t;exports.PButton=p;exports.PButtonGroup=u;exports.PButtonPure=s;exports.PButtonTile=i;exports.PCarousel=a;exports.PCheckboxWrapper=n;exports.PContentWrapper=c;exports.PCrest=o;exports.PDisplay=l;exports.PDivider=v;exports.PFieldset=g;exports.PFieldsetWrapper=P;exports.PFlex=y;exports.PFlexItem=W;exports.PFlyout=q;exports.PGrid=d;exports.PGridItem=T;exports.PHeading=S;exports.PHeadline=m;exports.PIcon=b;exports.PInlineNotification=x;exports.PLink=B;exports.PLinkPure=C;exports.PLinkSocial=I;exports.PLinkTile=M;exports.PLinkTileModelSignature=k;exports.PMarque=H;exports.PModal=L;exports.PModelSignature=D;exports.PMultiSelect=F;exports.PMultiSelectOption=h;exports.PPagination=R;exports.PPopover=w;exports.PRadioButtonWrapper=G;exports.PScroller=f;exports.PSegmentedControl=z;exports.PSegmentedControlItem=O;exports.PSelectWrapper=j;exports.PSpinner=A;exports.PStepperHorizontal=N;exports.PStepperHorizontalItem=J;exports.PSwitch=E;exports.PTable=K;exports.PTableBody=Q;exports.PTableCell=U;exports.PTableHead=V;exports.PTableHeadCell=X;exports.PTableHeadRow=Y;exports.PTableRow=Z;exports.PTabs=$;exports.PTabsBar=ee;exports.PTabsItem=re;exports.PTag=_e;exports.PTagDismissible=te;exports.PText=pe;exports.PTextFieldWrapper=ue;exports.PTextList=se;exports.PTextListItem=ie;exports.PTextareaWrapper=ae;exports.PToast=ne;exports.PWordmark=ce;exports.useToastManager=oe.useToastManager;exports.PorscheDesignSystemProvider=le;exports.createPorscheDesignSystem=e.createPorscheDesignSystem;exports.usePorscheDesignSystemPlugin=e.usePorscheDesignSystemPlugin;
package/esm/lib/components/FlexItemWrapper.vue.d.ts CHANGED
@@ -2,11 +2,11 @@ import type { BreakpointCustomizable } from '../types';
2
2
  /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
3
3
  declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
4
4
  width: {
5
- type: import("vue").PropType<BreakpointCustomizable<"full" | "auto" | "one-quarter" | "one-third" | "half" | "two-thirds" | "three-quarters">>;
5
+ type: import("vue").PropType<BreakpointCustomizable<"auto" | "full" | "one-quarter" | "one-third" | "half" | "two-thirds" | "three-quarters">>;
6
6
  default: string;
7
7
  };
8
8
  alignSelf: {
9
- type: import("vue").PropType<BreakpointCustomizable<"center" | "flex-start" | "flex-end" | "stretch" | "baseline" | "auto">>;
9
+ type: import("vue").PropType<BreakpointCustomizable<"center" | "auto" | "flex-start" | "flex-end" | "stretch" | "baseline">>;
10
10
  default: string;
11
11
  };
12
12
  flex: {
@@ -27,11 +27,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
27
27
  };
28
28
  }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
29
29
  width: {
30
- type: import("vue").PropType<BreakpointCustomizable<"full" | "auto" | "one-quarter" | "one-third" | "half" | "two-thirds" | "three-quarters">>;
30
+ type: import("vue").PropType<BreakpointCustomizable<"auto" | "full" | "one-quarter" | "one-third" | "half" | "two-thirds" | "three-quarters">>;
31
31
  default: string;
32
32
  };
33
33
  alignSelf: {
34
- type: import("vue").PropType<BreakpointCustomizable<"center" | "flex-start" | "flex-end" | "stretch" | "baseline" | "auto">>;
34
+ type: import("vue").PropType<BreakpointCustomizable<"center" | "auto" | "flex-start" | "flex-end" | "stretch" | "baseline">>;
35
35
  default: string;
36
36
  };
37
37
  flex: {
@@ -51,8 +51,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
51
51
  default: number;
52
52
  };
53
53
  }>>, {
54
- width: BreakpointCustomizable<"full" | "auto" | "one-quarter" | "one-third" | "half" | "two-thirds" | "three-quarters">;
55
- alignSelf: BreakpointCustomizable<"center" | "flex-start" | "flex-end" | "stretch" | "baseline" | "auto">;
54
+ width: BreakpointCustomizable<"auto" | "full" | "one-quarter" | "one-third" | "half" | "two-thirds" | "three-quarters">;
55
+ alignSelf: BreakpointCustomizable<"center" | "auto" | "flex-start" | "flex-end" | "stretch" | "baseline">;
56
56
  flex: BreakpointCustomizable<"none" | "auto" | "initial" | "equal">;
57
57
  grow: BreakpointCustomizable<0 | 1>;
58
58
  offset: BreakpointCustomizable<"none" | "one-quarter" | "one-third" | "half" | "two-thirds" | "three-quarters">;
package/esm/lib/components/MultiSelectOptionWrapper.vue.d.ts ADDED
@@ -0,0 +1,29 @@
1
+ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
2
+ disabled: {
3
+ type: import("vue").PropType<boolean>;
4
+ default: boolean;
5
+ };
6
+ value: {
7
+ type: import("vue").PropType<string>;
8
+ required: true;
9
+ };
10
+ }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
11
+ disabled: {
12
+ type: import("vue").PropType<boolean>;
13
+ default: boolean;
14
+ };
15
+ value: {
16
+ type: import("vue").PropType<string>;
17
+ required: true;
18
+ };
19
+ }>>, {
20
+ disabled: boolean;
21
+ }, {}>, {
22
+ default?(_: {}): any;
23
+ }>;
24
+ export default _default;
25
+ type __VLS_WithTemplateSlots<T, S> = T & {
26
+ new (): {
27
+ $slots: S;
28
+ };
29
+ };
package/esm/lib/components/MultiSelectOptionWrapper.vue.mjs ADDED
@@ -0,0 +1,28 @@
1
+ import { defineComponent as a, ref as l, onMounted as s, onUpdated as f, openBlock as c, createBlock as d, resolveDynamicComponent as m, unref as u, withCtx as i, renderSlot as _ } from "vue";
2
+ import { getPrefixedTagName as C, syncProperties as t } from "../../utils.mjs";
3
+ const k = /* @__PURE__ */ a({
4
+ __name: "MultiSelectOptionWrapper",
5
+ props: {
6
+ disabled: { type: Boolean, default: !1 },
7
+ value: {}
8
+ },
9
+ setup(n) {
10
+ const o = n, p = C("p-multi-select-option"), e = l();
11
+ return s(() => {
12
+ t(e.value, o);
13
+ }), f(() => {
14
+ t(e.value, o);
15
+ }), (r, v) => (c(), d(m(u(p)), {
16
+ ref_key: "pdsComponentRef",
17
+ ref: e
18
+ }, {
19
+ default: i(() => [
20
+ _(r.$slots, "default")
21
+ ]),
22
+ _: 3
23
+ }, 512));
24
+ }
25
+ });
26
+ export {
27
+ k as default
28
+ };
package/esm/lib/components/MultiSelectOptionWrapper.vue2.mjs ADDED
@@ -0,0 +1,4 @@
1
+ import f from "./MultiSelectOptionWrapper.vue.mjs";
2
+ export {
3
+ f as default
4
+ };
package/esm/lib/components/MultiSelectWrapper.vue.d.ts ADDED
@@ -0,0 +1,115 @@
1
+ import type { BreakpointCustomizable, MultiSelectUpdateEvent } from '../types';
2
+ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
3
+ label: {
4
+ type: import("vue").PropType<string>;
5
+ default: string;
6
+ };
7
+ theme: {
8
+ type: import("vue").PropType<"light" | "dark">;
9
+ default: string;
10
+ };
11
+ description: {
12
+ type: import("vue").PropType<string>;
13
+ default: string;
14
+ };
15
+ state: {
16
+ type: import("vue").PropType<"none" | "success" | "error">;
17
+ default: string;
18
+ };
19
+ required: {
20
+ type: import("vue").PropType<boolean>;
21
+ default: boolean;
22
+ };
23
+ disabled: {
24
+ type: import("vue").PropType<boolean>;
25
+ default: boolean;
26
+ };
27
+ hideLabel: {
28
+ type: import("vue").PropType<BreakpointCustomizable<boolean>>;
29
+ default: boolean;
30
+ };
31
+ message: {
32
+ type: import("vue").PropType<string>;
33
+ default: string;
34
+ };
35
+ name: {
36
+ type: import("vue").PropType<string>;
37
+ required: true;
38
+ };
39
+ value: {
40
+ type: import("vue").PropType<string[]>;
41
+ default: () => never[];
42
+ };
43
+ dropdownDirection: {
44
+ type: import("vue").PropType<"down" | "up" | "auto">;
45
+ default: string;
46
+ };
47
+ }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
48
+ update: (value: MultiSelectUpdateEvent) => void;
49
+ }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
50
+ label: {
51
+ type: import("vue").PropType<string>;
52
+ default: string;
53
+ };
54
+ theme: {
55
+ type: import("vue").PropType<"light" | "dark">;
56
+ default: string;
57
+ };
58
+ description: {
59
+ type: import("vue").PropType<string>;
60
+ default: string;
61
+ };
62
+ state: {
63
+ type: import("vue").PropType<"none" | "success" | "error">;
64
+ default: string;
65
+ };
66
+ required: {
67
+ type: import("vue").PropType<boolean>;
68
+ default: boolean;
69
+ };
70
+ disabled: {
71
+ type: import("vue").PropType<boolean>;
72
+ default: boolean;
73
+ };
74
+ hideLabel: {
75
+ type: import("vue").PropType<BreakpointCustomizable<boolean>>;
76
+ default: boolean;
77
+ };
78
+ message: {
79
+ type: import("vue").PropType<string>;
80
+ default: string;
81
+ };
82
+ name: {
83
+ type: import("vue").PropType<string>;
84
+ required: true;
85
+ };
86
+ value: {
87
+ type: import("vue").PropType<string[]>;
88
+ default: () => never[];
89
+ };
90
+ dropdownDirection: {
91
+ type: import("vue").PropType<"down" | "up" | "auto">;
92
+ default: string;
93
+ };
94
+ }>> & {
95
+ onUpdate?: ((value: MultiSelectUpdateEvent) => any) | undefined;
96
+ }, {
97
+ label: string;
98
+ theme: "light" | "dark";
99
+ description: string;
100
+ state: "none" | "success" | "error";
101
+ required: boolean;
102
+ disabled: boolean;
103
+ hideLabel: BreakpointCustomizable<boolean>;
104
+ message: string;
105
+ value: string[];
106
+ dropdownDirection: "down" | "up" | "auto";
107
+ }, {}>, {
108
+ default?(_: {}): any;
109
+ }>;
110
+ export default _default;
111
+ type __VLS_WithTemplateSlots<T, S> = T & {
112
+ new (): {
113
+ $slots: S;
114
+ };
115
+ };
package/esm/lib/components/MultiSelectWrapper.vue.mjs ADDED
@@ -0,0 +1,38 @@
1
+ import { defineComponent as r, ref as f, onMounted as u, onUpdated as p, openBlock as s, createBlock as i, resolveDynamicComponent as m, unref as c, withCtx as _, renderSlot as v } from "vue";
2
+ import { getPrefixedTagName as C, syncProperties as a, addEventListenerToElementRef as g } from "../../utils.mjs";
3
+ const B = /* @__PURE__ */ r({
4
+ __name: "MultiSelectWrapper",
5
+ props: {
6
+ description: { default: "" },
7
+ disabled: { type: Boolean, default: !1 },
8
+ dropdownDirection: { default: "auto" },
9
+ hideLabel: { default: !1 },
10
+ label: { default: "" },
11
+ message: { default: "" },
12
+ name: {},
13
+ required: { type: Boolean, default: !1 },
14
+ state: { default: "none" },
15
+ theme: { default: "light" },
16
+ value: { default: () => [] }
17
+ },
18
+ emits: ["update"],
19
+ setup(o, { emit: n }) {
20
+ const t = o, l = C("p-multi-select"), e = f();
21
+ return u(() => {
22
+ a(e.value, t), g(e.value, "update", n);
23
+ }), p(() => {
24
+ a(e.value, t);
25
+ }), (d, h) => (s(), i(m(c(l)), {
26
+ ref_key: "pdsComponentRef",
27
+ ref: e
28
+ }, {
29
+ default: _(() => [
30
+ v(d.$slots, "default")
31
+ ]),
32
+ _: 3
33
+ }, 512));
34
+ }
35
+ });
36
+ export {
37
+ B as default
38
+ };
package/esm/lib/components/MultiSelectWrapper.vue2.mjs ADDED
@@ -0,0 +1,4 @@
1
+ import f from "./MultiSelectWrapper.vue.mjs";
2
+ export {
3
+ f as default
4
+ };
package/esm/lib/components/SelectWrapperWrapper.vue.d.ts CHANGED
@@ -29,7 +29,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
29
29
  default: string;
30
30
  };
31
31
  dropdownDirection: {
32
- type: import("vue").PropType<"auto" | "down" | "up">;
32
+ type: import("vue").PropType<"down" | "up" | "auto">;
33
33
  default: string;
34
34
  };
35
35
  native: {
@@ -66,7 +66,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
66
66
  default: string;
67
67
  };
68
68
  dropdownDirection: {
69
- type: import("vue").PropType<"auto" | "down" | "up">;
69
+ type: import("vue").PropType<"down" | "up" | "auto">;
70
70
  default: string;
71
71
  };
72
72
  native: {
@@ -81,7 +81,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
81
81
  state: "none" | "success" | "error";
82
82
  hideLabel: BreakpointCustomizable<boolean>;
83
83
  message: string;
84
- dropdownDirection: "auto" | "down" | "up";
84
+ dropdownDirection: "down" | "up" | "auto";
85
85
  native: boolean;
86
86
  }, {}>, {
87
87
  default?(_: {}): any;
package/esm/lib/components/index.d.ts CHANGED
@@ -29,6 +29,8 @@ export { default as PLinkTileModelSignature } from './LinkTileModelSignatureWrap
29
29
  export { default as PMarque } from './MarqueWrapper.vue';
30
30
  export { default as PModal } from './ModalWrapper.vue';
31
31
  export { default as PModelSignature } from './ModelSignatureWrapper.vue';
32
+ export { default as PMultiSelect } from './MultiSelectWrapper.vue';
33
+ export { default as PMultiSelectOption } from './MultiSelectOptionWrapper.vue';
32
34
  export { default as PPagination } from './PaginationWrapper.vue';
33
35
  export { default as PPopover } from './PopoverWrapper.vue';
34
36
  export { default as PRadioButtonWrapper } from './RadioButtonWrapperWrapper.vue';
package/esm/lib/types.d.ts CHANGED
@@ -501,6 +501,12 @@ declare const SCROLL_INDICATOR_POSITIONS: readonly [
501
501
  /** @deprecated */
502
502
  export type ScrollerScrollIndicatorPosition = (typeof SCROLL_INDICATOR_POSITIONS)[number];
503
503
  export type ScrollerAlignScrollIndicator = ScrollerScrollIndicatorPosition;
504
+ declare const SELECT_DROPDOWN_DIRECTIONS: readonly [
505
+ "down",
506
+ "up",
507
+ "auto"
508
+ ];
509
+ export type SelectDropdownDirection = (typeof SELECT_DROPDOWN_DIRECTIONS)[number];
504
510
  declare const ALIGN_LABELS: readonly [
505
511
  "left",
506
512
  "right"
@@ -1006,6 +1012,12 @@ declare const MODEL_SIGNATURE_COLORS: readonly [
1006
1012
  "inherit"
1007
1013
  ];
1008
1014
  export type ModelSignatureColor = (typeof MODEL_SIGNATURE_COLORS)[number];
1015
+ export type MultiSelectState = FormState;
1016
+ export type MultiSelectDropdownDirection = SelectDropdownDirection;
1017
+ export type MultiSelectUpdateEvent = {
1018
+ value: string[];
1019
+ name: string;
1020
+ };
1009
1021
  declare const PAGINATION_NUMBER_OF_PAGE_LINKS: readonly [
1010
1022
  5,
1011
1023
  7
package/esm/public-api.mjs CHANGED
@@ -1,8 +1,8 @@
1
- import { componentsReady as t } from "@porsche-design-system/components-js";
1
+ import { componentsReady as r } from "@porsche-design-system/components-js";
2
2
  import { default as a } from "./lib/components/AccordionWrapper.vue.mjs";
3
3
  import { default as l } from "./lib/components/BannerWrapper.vue.mjs";
4
- import { default as p } from "./lib/components/ButtonWrapper.vue.mjs";
5
- import { default as m } from "./lib/components/ButtonGroupWrapper.vue.mjs";
4
+ import { default as s } from "./lib/components/ButtonWrapper.vue.mjs";
5
+ import { default as u } from "./lib/components/ButtonGroupWrapper.vue.mjs";
6
6
  import { default as x } from "./lib/components/ButtonPureWrapper.vue.mjs";
7
7
  import { default as i } from "./lib/components/ButtonTileWrapper.vue.mjs";
8
8
  import { default as T } from "./lib/components/CarouselWrapper.vue.mjs";
@@ -12,62 +12,64 @@ import { default as C } from "./lib/components/CrestWrapper.vue.mjs";
12
12
  import { default as W } from "./lib/components/DisplayWrapper.vue.mjs";
13
13
  import { default as y } from "./lib/components/DividerWrapper.vue.mjs";
14
14
  import { default as L } from "./lib/components/FieldsetWrapper.vue.mjs";
15
- import { default as F } from "./lib/components/FieldsetWrapperWrapper.vue.mjs";
16
- import { default as M } from "./lib/components/FlexWrapper.vue.mjs";
15
+ import { default as D } from "./lib/components/FieldsetWrapperWrapper.vue.mjs";
16
+ import { default as h } from "./lib/components/FlexWrapper.vue.mjs";
17
17
  import { default as v } from "./lib/components/FlexItemWrapper.vue.mjs";
18
18
  import { default as G } from "./lib/components/FlyoutWrapper.vue.mjs";
19
19
  import { default as q } from "./lib/components/GridWrapper.vue.mjs";
20
20
  import { default as N } from "./lib/components/GridItemWrapper.vue.mjs";
21
- import { default as E } from "./lib/components/HeadingWrapper.vue.mjs";
22
- import { default as K } from "./lib/components/HeadlineWrapper.vue.mjs";
21
+ import { default as j } from "./lib/components/HeadingWrapper.vue.mjs";
22
+ import { default as J } from "./lib/components/HeadlineWrapper.vue.mjs";
23
23
  import { default as Q } from "./lib/components/IconWrapper.vue.mjs";
24
24
  import { default as V } from "./lib/components/InlineNotificationWrapper.vue.mjs";
25
25
  import { default as Y } from "./lib/components/LinkWrapper.vue.mjs";
26
26
  import { default as _ } from "./lib/components/LinkPureWrapper.vue.mjs";
27
27
  import { default as ee } from "./lib/components/LinkSocialWrapper.vue.mjs";
28
- import { default as te } from "./lib/components/LinkTileWrapper.vue.mjs";
28
+ import { default as re } from "./lib/components/LinkTileWrapper.vue.mjs";
29
29
  import { default as ae } from "./lib/components/LinkTileModelSignatureWrapper.vue.mjs";
30
30
  import { default as le } from "./lib/components/MarqueWrapper.vue.mjs";
31
- import { default as pe } from "./lib/components/ModalWrapper.vue.mjs";
32
- import { default as me } from "./lib/components/ModelSignatureWrapper.vue.mjs";
33
- import { default as xe } from "./lib/components/PaginationWrapper.vue.mjs";
34
- import { default as ie } from "./lib/components/PopoverWrapper.vue.mjs";
35
- import { default as Te } from "./lib/components/RadioButtonWrapperWrapper.vue.mjs";
36
- import { default as Se } from "./lib/components/ScrollerWrapper.vue.mjs";
37
- import { default as be } from "./lib/components/SegmentedControlWrapper.vue.mjs";
38
- import { default as Ce } from "./lib/components/SegmentedControlItemWrapper.vue.mjs";
39
- import { default as We } from "./lib/components/SelectWrapperWrapper.vue.mjs";
40
- import { default as ye } from "./lib/components/SpinnerWrapper.vue.mjs";
41
- import { default as Le } from "./lib/components/StepperHorizontalWrapper.vue.mjs";
42
- import { default as Fe } from "./lib/components/StepperHorizontalItemWrapper.vue.mjs";
43
- import { default as Me } from "./lib/components/SwitchWrapper.vue.mjs";
44
- import { default as ve } from "./lib/components/TableWrapper.vue.mjs";
45
- import { default as Ge } from "./lib/components/TableBodyWrapper.vue.mjs";
46
- import { default as qe } from "./lib/components/TableCellWrapper.vue.mjs";
47
- import { default as Ne } from "./lib/components/TableHeadWrapper.vue.mjs";
48
- import { default as Ee } from "./lib/components/TableHeadCellWrapper.vue.mjs";
49
- import { default as Ke } from "./lib/components/TableHeadRowWrapper.vue.mjs";
50
- import { default as Qe } from "./lib/components/TableRowWrapper.vue.mjs";
51
- import { default as Ve } from "./lib/components/TabsWrapper.vue.mjs";
52
- import { default as Ye } from "./lib/components/TabsBarWrapper.vue.mjs";
53
- import { default as _e } from "./lib/components/TabsItemWrapper.vue.mjs";
54
- import { default as er } from "./lib/components/TagWrapper.vue.mjs";
55
- import { default as tr } from "./lib/components/TagDismissibleWrapper.vue.mjs";
56
- import { default as ar } from "./lib/components/TextWrapper.vue.mjs";
57
- import { default as lr } from "./lib/components/TextFieldWrapperWrapper.vue.mjs";
58
- import { default as pr } from "./lib/components/TextListWrapper.vue.mjs";
59
- import { default as mr } from "./lib/components/TextListItemWrapper.vue.mjs";
60
- import { default as xr } from "./lib/components/TextareaWrapperWrapper.vue.mjs";
61
- import { default as ir } from "./lib/components/ToastWrapper.vue.mjs";
62
- import { default as Tr } from "./lib/components/WordmarkWrapper.vue.mjs";
63
- import { useToastManager as Sr } from "./utils.mjs";
64
- import { default as br } from "./PorscheDesignSystemProvider.vue.mjs";
65
- import { createPorscheDesignSystem as Cr, usePorscheDesignSystemPlugin as Ir } from "./plugin.mjs";
31
+ import { default as se } from "./lib/components/ModalWrapper.vue.mjs";
32
+ import { default as ue } from "./lib/components/ModelSignatureWrapper.vue.mjs";
33
+ import { default as xe } from "./lib/components/MultiSelectWrapper.vue.mjs";
34
+ import { default as ie } from "./lib/components/MultiSelectOptionWrapper.vue.mjs";
35
+ import { default as Te } from "./lib/components/PaginationWrapper.vue.mjs";
36
+ import { default as Se } from "./lib/components/PopoverWrapper.vue.mjs";
37
+ import { default as be } from "./lib/components/RadioButtonWrapperWrapper.vue.mjs";
38
+ import { default as Ce } from "./lib/components/ScrollerWrapper.vue.mjs";
39
+ import { default as We } from "./lib/components/SegmentedControlWrapper.vue.mjs";
40
+ import { default as ye } from "./lib/components/SegmentedControlItemWrapper.vue.mjs";
41
+ import { default as Le } from "./lib/components/SelectWrapperWrapper.vue.mjs";
42
+ import { default as De } from "./lib/components/SpinnerWrapper.vue.mjs";
43
+ import { default as he } from "./lib/components/StepperHorizontalWrapper.vue.mjs";
44
+ import { default as ve } from "./lib/components/StepperHorizontalItemWrapper.vue.mjs";
45
+ import { default as Ge } from "./lib/components/SwitchWrapper.vue.mjs";
46
+ import { default as qe } from "./lib/components/TableWrapper.vue.mjs";
47
+ import { default as Ne } from "./lib/components/TableBodyWrapper.vue.mjs";
48
+ import { default as je } from "./lib/components/TableCellWrapper.vue.mjs";
49
+ import { default as Je } from "./lib/components/TableHeadWrapper.vue.mjs";
50
+ import { default as Qe } from "./lib/components/TableHeadCellWrapper.vue.mjs";
51
+ import { default as Ve } from "./lib/components/TableHeadRowWrapper.vue.mjs";
52
+ import { default as Ye } from "./lib/components/TableRowWrapper.vue.mjs";
53
+ import { default as _e } from "./lib/components/TabsWrapper.vue.mjs";
54
+ import { default as et } from "./lib/components/TabsBarWrapper.vue.mjs";
55
+ import { default as rt } from "./lib/components/TabsItemWrapper.vue.mjs";
56
+ import { default as at } from "./lib/components/TagWrapper.vue.mjs";
57
+ import { default as lt } from "./lib/components/TagDismissibleWrapper.vue.mjs";
58
+ import { default as st } from "./lib/components/TextWrapper.vue.mjs";
59
+ import { default as ut } from "./lib/components/TextFieldWrapperWrapper.vue.mjs";
60
+ import { default as xt } from "./lib/components/TextListWrapper.vue.mjs";
61
+ import { default as it } from "./lib/components/TextListItemWrapper.vue.mjs";
62
+ import { default as Tt } from "./lib/components/TextareaWrapperWrapper.vue.mjs";
63
+ import { default as St } from "./lib/components/ToastWrapper.vue.mjs";
64
+ import { default as bt } from "./lib/components/WordmarkWrapper.vue.mjs";
65
+ import { useToastManager as Ct } from "./utils.mjs";
66
+ import { default as Wt } from "./PorscheDesignSystemProvider.vue.mjs";
67
+ import { createPorscheDesignSystem as yt, usePorscheDesignSystemPlugin as Ht } from "./plugin.mjs";
66
68
  export {
67
69
  a as PAccordion,
68
70
  l as PBanner,
69
- p as PButton,
70
- m as PButtonGroup,
71
+ s as PButton,
72
+ u as PButtonGroup,
71
73
  x as PButtonPure,
72
74
  i as PButtonTile,
73
75
  T as PCarousel,
@@ -77,57 +79,59 @@ export {
77
79
  W as PDisplay,
78
80
  y as PDivider,
79
81
  L as PFieldset,
80
- F as PFieldsetWrapper,
81
- M as PFlex,
82
+ D as PFieldsetWrapper,
83
+ h as PFlex,
82
84
  v as PFlexItem,
83
85
  G as PFlyout,
84
86
  q as PGrid,
85
87
  N as PGridItem,
86
- E as PHeading,
87
- K as PHeadline,
88
+ j as PHeading,
89
+ J as PHeadline,
88
90
  Q as PIcon,
89
91
  V as PInlineNotification,
90
92
  Y as PLink,
91
93
  _ as PLinkPure,
92
94
  ee as PLinkSocial,
93
- te as PLinkTile,
95
+ re as PLinkTile,
94
96
  ae as PLinkTileModelSignature,
95
97
  le as PMarque,
96
- pe as PModal,
97
- me as PModelSignature,
98
- xe as PPagination,
99
- ie as PPopover,
100
- Te as PRadioButtonWrapper,
101
- Se as PScroller,
102
- be as PSegmentedControl,
103
- Ce as PSegmentedControlItem,
104
- We as PSelectWrapper,
105
- ye as PSpinner,
106
- Le as PStepperHorizontal,
107
- Fe as PStepperHorizontalItem,
108
- Me as PSwitch,
109
- ve as PTable,
110
- Ge as PTableBody,
111
- qe as PTableCell,
112
- Ne as PTableHead,
113
- Ee as PTableHeadCell,
114
- Ke as PTableHeadRow,
115
- Qe as PTableRow,
116
- Ve as PTabs,
117
- Ye as PTabsBar,
118
- _e as PTabsItem,
119
- er as PTag,
120
- tr as PTagDismissible,
121
- ar as PText,
122
- lr as PTextFieldWrapper,
123
- pr as PTextList,
124
- mr as PTextListItem,
125
- xr as PTextareaWrapper,
126
- ir as PToast,
127
- Tr as PWordmark,
128
- br as PorscheDesignSystemProvider,
129
- t as componentsReady,
130
- Cr as createPorscheDesignSystem,
131
- Ir as usePorscheDesignSystemPlugin,
132
- Sr as useToastManager
98
+ se as PModal,
99
+ ue as PModelSignature,
100
+ xe as PMultiSelect,
101
+ ie as PMultiSelectOption,
102
+ Te as PPagination,
103
+ Se as PPopover,
104
+ be as PRadioButtonWrapper,
105
+ Ce as PScroller,
106
+ We as PSegmentedControl,
107
+ ye as PSegmentedControlItem,
108
+ Le as PSelectWrapper,
109
+ De as PSpinner,
110
+ he as PStepperHorizontal,
111
+ ve as PStepperHorizontalItem,
112
+ Ge as PSwitch,
113
+ qe as PTable,
114
+ Ne as PTableBody,
115
+ je as PTableCell,
116
+ Je as PTableHead,
117
+ Qe as PTableHeadCell,
118
+ Ve as PTableHeadRow,
119
+ Ye as PTableRow,
120
+ _e as PTabs,
121
+ et as PTabsBar,
122
+ rt as PTabsItem,
123
+ at as PTag,
124
+ lt as PTagDismissible,
125
+ st as PText,
126
+ ut as PTextFieldWrapper,
127
+ xt as PTextList,
128
+ it as PTextListItem,
129
+ Tt as PTextareaWrapper,
130
+ St as PToast,
131
+ bt as PWordmark,
132
+ Wt as PorscheDesignSystemProvider,
133
+ r as componentsReady,
134
+ yt as createPorscheDesignSystem,
135
+ Ht as usePorscheDesignSystemPlugin,
136
+ Ct as useToastManager
133
137
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@porsche-design-system/components-vue",
3
- "version": "3.6.1",
3
+ "version": "3.7.0-rc.0",
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.6.1"
20
+ "@porsche-design-system/components-js": "3.7.0-rc.0"
21
21
  },
22
22
  "peerDependencies": {
23
23
  "vue": ">=3.0.0 <4.0.0"