@porsche-design-system/components-vue 3.29.0-rc.3 → 3.29.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 +25 -0
- package/cjs/lib/components/FieldsetWrapper.vue.cjs +1 -1
- package/cjs/lib/components/FlagWrapper.vue.cjs +1 -0
- package/cjs/lib/components/FlagWrapper.vue2.cjs +1 -0
- package/cjs/lib/components/InputDateWrapper.vue.cjs +1 -0
- package/cjs/lib/components/InputDateWrapper.vue2.cjs +1 -0
- package/cjs/lib/components/InputTelWrapper.vue.cjs +1 -0
- package/cjs/lib/components/InputTelWrapper.vue2.cjs +1 -0
- package/cjs/lib/components/InputTimeWrapper.vue.cjs +1 -0
- package/cjs/lib/components/InputTimeWrapper.vue2.cjs +1 -0
- package/cjs/lib/components/InputUrlWrapper.vue.cjs +1 -0
- package/cjs/lib/components/InputUrlWrapper.vue2.cjs +1 -0
- package/cjs/lib/components/MultiSelectWrapper.vue.cjs +1 -1
- package/cjs/lib/components/ScrollerWrapper.vue.cjs +1 -1
- package/cjs/lib/components/TabsBarWrapper.vue.cjs +1 -1
- package/cjs/lib/components/TabsWrapper.vue.cjs +1 -1
- package/cjs/public-api.cjs +1 -1
- package/esm/lib/components/FieldsetWrapper.vue.d.ts +5 -1
- package/esm/lib/components/FieldsetWrapper.vue.mjs +5 -4
- package/esm/lib/components/FlagWrapper.vue.d.ts +20 -0
- package/esm/lib/components/FlagWrapper.vue.mjs +20 -0
- package/esm/lib/components/FlagWrapper.vue2.mjs +4 -0
- package/esm/lib/components/InputDateWrapper.vue.d.ts +108 -0
- package/esm/lib/components/InputDateWrapper.vue.mjs +45 -0
- package/esm/lib/components/InputDateWrapper.vue2.mjs +4 -0
- package/esm/lib/components/InputEmailWrapper.vue.d.ts +2 -2
- package/esm/lib/components/InputNumberWrapper.vue.d.ts +2 -2
- package/esm/lib/components/InputPasswordWrapper.vue.d.ts +2 -2
- package/esm/lib/components/InputSearchWrapper.vue.d.ts +1 -1
- package/esm/lib/components/InputTelWrapper.vue.d.ts +117 -0
- package/esm/lib/components/InputTelWrapper.vue.mjs +47 -0
- package/esm/lib/components/InputTelWrapper.vue2.mjs +4 -0
- package/esm/lib/components/InputTextWrapper.vue.d.ts +1 -1
- package/esm/lib/components/InputTimeWrapper.vue.d.ts +108 -0
- package/esm/lib/components/InputTimeWrapper.vue.mjs +45 -0
- package/esm/lib/components/InputTimeWrapper.vue2.mjs +4 -0
- package/esm/lib/components/InputUrlWrapper.vue.d.ts +117 -0
- package/esm/lib/components/InputUrlWrapper.vue.mjs +47 -0
- package/esm/lib/components/InputUrlWrapper.vue2.mjs +4 -0
- package/esm/lib/components/MultiSelectWrapper.vue.d.ts +5 -0
- package/esm/lib/components/MultiSelectWrapper.vue.mjs +7 -6
- package/esm/lib/components/ScrollerWrapper.vue.d.ts +2 -3
- package/esm/lib/components/ScrollerWrapper.vue.mjs +10 -10
- package/esm/lib/components/TabsBarWrapper.vue.d.ts +2 -3
- package/esm/lib/components/TabsBarWrapper.vue.mjs +10 -10
- package/esm/lib/components/TabsWrapper.vue.d.ts +1 -2
- package/esm/lib/components/TabsWrapper.vue.mjs +7 -7
- package/esm/lib/components/TextareaWrapper.vue.d.ts +1 -1
- package/esm/lib/components/index.d.ts +5 -0
- package/esm/lib/types.d.ts +149 -14
- package/esm/public-api.mjs +150 -140
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -14,6 +14,30 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
|
|
|
14
14
|
|
|
15
15
|
## [Unreleased]
|
|
16
16
|
|
|
17
|
+
## [3.29.0-rc.4] - 2025-08-15
|
|
18
|
+
|
|
19
|
+
### Added
|
|
20
|
+
|
|
21
|
+
- `Flag`: ([#3964](https://github.com/porsche-design-system/porsche-design-system/pull/3964))
|
|
22
|
+
- `Input Url`: ([#3949](https://github.com/porsche-design-system/porsche-design-system/pull/3949))
|
|
23
|
+
- `Multi Select`: `compact` prop to enable a smaller, space-saving version for compact layouts
|
|
24
|
+
([#3953](https://github.com/porsche-design-system/porsche-design-system/pull/3953))
|
|
25
|
+
- `Fieldset`: ARIA role `radiogroup` is now supported via `aria` prop. Internal ARIA attributes for `aria-invalid` and
|
|
26
|
+
`aria-required`. ([#3957](https://github.com/porsche-design-system/porsche-design-system/pull/3957))
|
|
27
|
+
- `Input Date`, `Input Time`: ([#3954](https://github.com/porsche-design-system/porsche-design-system/pull/3954))
|
|
28
|
+
|
|
29
|
+
### Changed
|
|
30
|
+
|
|
31
|
+
- `Multi Select`, `Select`: `background` is now transparent to be aligned with other form fields
|
|
32
|
+
([#3953](https://github.com/porsche-design-system/porsche-design-system/pull/3953))
|
|
33
|
+
- `Multi Select`, `Select`: improved a11y and highlight of options
|
|
34
|
+
([#3953](https://github.com/porsche-design-system/porsche-design-system/pull/3953))
|
|
35
|
+
- `Multi Select`: aligned filter and keyboard behavior with `Select`
|
|
36
|
+
([#3943](https://github.com/porsche-design-system/porsche-design-system/pull/3943))
|
|
37
|
+
- `Scroller`: Deprecation of prop `gradientColor` because gradient is now managed internally and adapts to all themes
|
|
38
|
+
and background colors automatically.
|
|
39
|
+
([#3962](https://github.com/porsche-design-system/porsche-design-system/pull/3962))
|
|
40
|
+
|
|
17
41
|
## [3.29.0-rc.3] - 2025-07-29
|
|
18
42
|
|
|
19
43
|
### Fixed
|
|
@@ -38,6 +62,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
|
|
|
38
62
|
- `Input Text`: `counter` prop functions independently of `max-length`, allowing character count display even when no
|
|
39
63
|
limit is set ([#3901](https://github.com/porsche-design-system/porsche-design-system/pull/3901))
|
|
40
64
|
- `Input Email`: ([#3927](https://github.com/porsche-design-system/porsche-design-system/pull/3927))
|
|
65
|
+
- `Input Tel`: ([#3928](https://github.com/porsche-design-system/porsche-design-system/pull/3928))
|
|
41
66
|
|
|
42
67
|
### Changed
|
|
43
68
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";const e=require("vue"),t=require("../../utils.cjs"),p=e.defineComponent({__name:"FieldsetWrapper",props:{label:{default:""},labelSize:{default:"medium"},message:{default:""},required:{type:Boolean,default:!1},state:{default:"none"},theme:{}},setup(c){const l=t.usePrefix("p-fieldset"),n=c,o=e.ref(),r=e.inject(t.themeInjectionKey),a=()=>t.syncProperties(o,{...n,theme:n.theme||r.value});return e.onMounted(a),e.onUpdated(a),e.watch(r,s=>{t.syncProperties(o,{theme:n.theme||s})}),(s,u)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(l)),{ref_key:"pdsComponentRef",ref:o},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default")]),_:3},512))}});module.exports=p;
|
|
1
|
+
"use strict";const e=require("vue"),t=require("../../utils.cjs"),p=e.defineComponent({__name:"FieldsetWrapper",props:{aria:{},label:{default:""},labelSize:{default:"medium"},message:{default:""},required:{type:Boolean,default:!1},state:{default:"none"},theme:{}},setup(c){const l=t.usePrefix("p-fieldset"),n=c,o=e.ref(),r=e.inject(t.themeInjectionKey),a=()=>t.syncProperties(o,{...n,theme:n.theme||r.value});return e.onMounted(a),e.onUpdated(a),e.watch(r,s=>{t.syncProperties(o,{theme:n.theme||s})}),(s,u)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(l)),{ref_key:"pdsComponentRef",ref:o},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default")]),_:3},512))}});module.exports=p;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";const e=require("vue"),t=require("../../utils.cjs"),c=e.defineComponent({__name:"FlagWrapper",props:{aria:{},name:{default:"de"},size:{default:"small"}},setup(r){const s=t.usePrefix("p-flag"),p=r,n=e.ref(),o=()=>t.syncProperties(n,p);return e.onMounted(o),e.onUpdated(o),(a,u)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(s)),{ref_key:"pdsComponentRef",ref:n},null,512))}});module.exports=c;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";const e=require("./FlagWrapper.vue.cjs");module.exports=e;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";const e=require("vue"),t=require("../../utils.cjs"),p=e.defineComponent({__name:"InputDateWrapper",props:{autoComplete:{},compact:{type:Boolean,default:!1},description:{default:""},disabled:{type:Boolean,default:!1},form:{},hideLabel:{default:!1},label:{default:""},loading:{type:Boolean,default:!1},max:{},message:{default:""},min:{},name:{},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},state:{default:"none"},step:{default:1},theme:{},value:{default:""}},emits:["blur","change","input"],setup(d,{emit:u}){const f=t.usePrefix("p-input-date"),o=d,n=e.ref(),a=u,s=e.inject(t.themeInjectionKey),r=()=>t.syncProperties(n,{...o,theme:o.theme||s.value});return e.onMounted(()=>{r(),t.addEventListenerToElementRef(n,"blur",a),t.addEventListenerToElementRef(n,"change",a),t.addEventListenerToElementRef(n,"input",a)}),e.onUpdated(r),e.watch(s,l=>{t.syncProperties(n,{theme:o.theme||l})}),(l,i)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(f)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(l.$slots,"default")]),_:3},512))}});module.exports=p;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";const e=require("./InputDateWrapper.vue.cjs");module.exports=e;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";const e=require("vue"),t=require("../../utils.cjs"),u=e.defineComponent({__name:"InputTelWrapper",props:{autoComplete:{},compact:{type:Boolean,default:!1},description:{default:""},disabled:{type:Boolean,default:!1},form:{},hideLabel:{default:!1},indicator:{type:Boolean,default:!1},label:{default:""},loading:{type:Boolean,default:!1},maxLength:{},message:{default:""},minLength:{},name:{},pattern:{},placeholder:{default:""},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},state:{default:"none"},theme:{},value:{default:""}},emits:["blur","change","input"],setup(d,{emit:f}){const p=t.usePrefix("p-input-tel"),o=d,n=e.ref(),a=f,s=e.inject(t.themeInjectionKey),r=()=>t.syncProperties(n,{...o,theme:o.theme||s.value});return e.onMounted(()=>{r(),t.addEventListenerToElementRef(n,"blur",a),t.addEventListenerToElementRef(n,"change",a),t.addEventListenerToElementRef(n,"input",a)}),e.onUpdated(r),e.watch(s,l=>{t.syncProperties(n,{theme:o.theme||l})}),(l,i)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(p)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(l.$slots,"default")]),_:3},512))}});module.exports=u;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";const e=require("./InputTelWrapper.vue.cjs");module.exports=e;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";const e=require("vue"),t=require("../../utils.cjs"),p=e.defineComponent({__name:"InputTimeWrapper",props:{autoComplete:{},compact:{type:Boolean,default:!1},description:{default:""},disabled:{type:Boolean,default:!1},form:{},hideLabel:{default:!1},label:{default:""},loading:{type:Boolean,default:!1},max:{},message:{default:""},min:{},name:{},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},state:{default:"none"},step:{default:60},theme:{},value:{default:""}},emits:["blur","change","input"],setup(u,{emit:d}){const f=t.usePrefix("p-input-time"),o=u,n=e.ref(),a=d,s=e.inject(t.themeInjectionKey),r=()=>t.syncProperties(n,{...o,theme:o.theme||s.value});return e.onMounted(()=>{r(),t.addEventListenerToElementRef(n,"blur",a),t.addEventListenerToElementRef(n,"change",a),t.addEventListenerToElementRef(n,"input",a)}),e.onUpdated(r),e.watch(s,l=>{t.syncProperties(n,{theme:o.theme||l})}),(l,i)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(f)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(l.$slots,"default")]),_:3},512))}});module.exports=p;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";const e=require("./InputTimeWrapper.vue.cjs");module.exports=e;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";const e=require("vue"),t=require("../../utils.cjs"),p=e.defineComponent({__name:"InputUrlWrapper",props:{autoComplete:{},compact:{type:Boolean,default:!1},description:{default:""},disabled:{type:Boolean,default:!1},form:{},hideLabel:{default:!1},indicator:{type:Boolean,default:!1},label:{default:""},loading:{type:Boolean,default:!1},maxLength:{},message:{default:""},minLength:{},name:{},pattern:{},placeholder:{default:""},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},state:{default:"none"},theme:{},value:{default:""}},emits:["blur","change","input"],setup(d,{emit:u}){const f=t.usePrefix("p-input-url"),o=d,n=e.ref(),a=u,s=e.inject(t.themeInjectionKey),r=()=>t.syncProperties(n,{...o,theme:o.theme||s.value});return e.onMounted(()=>{r(),t.addEventListenerToElementRef(n,"blur",a),t.addEventListenerToElementRef(n,"change",a),t.addEventListenerToElementRef(n,"input",a)}),e.onUpdated(r),e.watch(s,l=>{t.syncProperties(n,{theme:o.theme||l})}),(l,i)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(f)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(l.$slots,"default")]),_:3},512))}});module.exports=p;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";const e=require("./InputUrlWrapper.vue.cjs");module.exports=e;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";const e=require("vue"),t=require("../../utils.cjs"),p=e.defineComponent({__name:"MultiSelectWrapper",props:{description:{default:""},disabled:{type:Boolean,default:!1},dropdownDirection:{default:"auto"},form:{},hideLabel:{default:!1},label:{default:""},message:{default:""},name:{},required:{type:Boolean,default:!1},state:{default:"none"},theme:{},value:{default:()=>[]}},emits:["update"],setup(
|
|
1
|
+
"use strict";const e=require("vue"),t=require("../../utils.cjs"),p=e.defineComponent({__name:"MultiSelectWrapper",props:{compact:{type:Boolean,default:!1},description:{default:""},disabled:{type:Boolean,default:!1},dropdownDirection:{default:"auto"},form:{},hideLabel:{default:!1},label:{default:""},message:{default:""},name:{},required:{type:Boolean,default:!1},state:{default:"none"},theme:{},value:{default:()=>[]}},emits:["update"],setup(r,{emit:u}){const d=t.usePrefix("p-multi-select"),n=r,o=e.ref(),c=u,s=e.inject(t.themeInjectionKey),l=()=>t.syncProperties(o,{...n,theme:n.theme||s.value});return e.onMounted(()=>{l(),t.addEventListenerToElementRef(o,"update",c)}),e.onUpdated(l),e.watch(s,a=>{t.syncProperties(o,{theme:n.theme||a})}),(a,f)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(d)),{ref_key:"pdsComponentRef",ref:o},{default:e.withCtx(()=>[e.renderSlot(a.$slots,"default")]),_:3},512))}});module.exports=p;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";const e=require("vue"),o=require("../../utils.cjs"),i=e.defineComponent({__name:"ScrollerWrapper",props:{alignScrollIndicator:{default:"center"},aria:{},gradientColor:{
|
|
1
|
+
"use strict";const e=require("vue"),o=require("../../utils.cjs"),i=e.defineComponent({__name:"ScrollerWrapper",props:{alignScrollIndicator:{default:"center"},aria:{},gradientColor:{},gradientColorScheme:{},scrollIndicatorPosition:{},scrollToPosition:{},scrollbar:{type:Boolean,default:!1},theme:{}},setup(l){const a=o.usePrefix("p-scroller"),t=l,n=e.ref(),s=e.inject(o.themeInjectionKey),c=()=>o.syncProperties(n,{...t,theme:t.theme||s.value});return e.onMounted(c),e.onUpdated(c),e.watch(s,r=>{o.syncProperties(n,{theme:t.theme||r})}),(r,p)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(a)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"default")]),_:3},512))}});module.exports=i;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";const e=require("vue"),t=require("../../utils.cjs"),
|
|
1
|
+
"use strict";const e=require("vue"),t=require("../../utils.cjs"),d=e.defineComponent({__name:"TabsBarWrapper",props:{activeTabIndex:{},gradientColor:{},gradientColorScheme:{},size:{default:"small"},theme:{},weight:{default:"regular"}},emits:["tabChange","update"],setup(i,{emit:p}){const m=t.usePrefix("p-tabs-bar"),o=i,n=e.ref(),s=p,a=e.inject(t.themeInjectionKey),c=()=>t.syncProperties(n,{...o,theme:o.theme||a.value});return e.onMounted(()=>{c(),t.addEventListenerToElementRef(n,"tabChange",s),t.addEventListenerToElementRef(n,"update",s)}),e.onUpdated(c),e.watch(a,r=>{t.syncProperties(n,{theme:o.theme||r})}),(r,u)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(m)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"default")]),_:3},512))}});module.exports=d;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";const e=require("vue"),t=require("../../utils.cjs"),
|
|
1
|
+
"use strict";const e=require("vue"),t=require("../../utils.cjs"),d=e.defineComponent({__name:"TabsWrapper",props:{activeTabIndex:{default:0},gradientColor:{},gradientColorScheme:{},size:{default:"small"},theme:{},weight:{default:"regular"}},emits:["tabChange","update"],setup(i,{emit:p}){const m=t.usePrefix("p-tabs"),o=i,n=e.ref(),s=p,a=e.inject(t.themeInjectionKey),c=()=>t.syncProperties(n,{...o,theme:o.theme||a.value});return e.onMounted(()=>{c(),t.addEventListenerToElementRef(n,"tabChange",s),t.addEventListenerToElementRef(n,"update",s)}),e.onUpdated(c),e.watch(a,r=>{t.syncProperties(n,{theme:o.theme||r})}),(r,u)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(m)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"default")]),_:3},512))}});module.exports=d;
|
package/cjs/public-api.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("@porsche-design-system/components-js"),t=require("./lib/components/AccordionWrapper.vue.cjs"),p=require("./lib/components/BannerWrapper.vue.cjs"),u=require("./lib/components/ButtonWrapper.vue.cjs"),s=require("./lib/components/ButtonGroupWrapper.vue.cjs"),n=require("./lib/components/ButtonPureWrapper.vue.cjs"),i=require("./lib/components/ButtonTileWrapper.vue.cjs"),a=require("./lib/components/CanvasWrapper.vue.cjs"),c=require("./lib/components/CarouselWrapper.vue.cjs"),o=require("./lib/components/CheckboxWrapper.vue.cjs"),l=require("./lib/components/CheckboxWrapperWrapper.vue.cjs"),v=require("./lib/components/ContentWrapperWrapper.vue.cjs"),g=require("./lib/components/CrestWrapper.vue.cjs"),P=require("./lib/components/DisplayWrapper.vue.cjs"),y=require("./lib/components/DividerWrapper.vue.cjs"),W=require("./lib/components/DrilldownWrapper.vue.cjs"),q=require("./lib/components/DrilldownItemWrapper.vue.cjs"),d=require("./lib/components/DrilldownLinkWrapper.vue.cjs"),T=require("./lib/components/FieldsetWrapper.vue.cjs"),S=require("./lib/components/FieldsetWrapperWrapper.vue.cjs"),m=require("./lib/components/FlexWrapper.vue.cjs"),b=require("./lib/components/FlexItemWrapper.vue.cjs"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("@porsche-design-system/components-js"),t=require("./lib/components/AccordionWrapper.vue.cjs"),p=require("./lib/components/BannerWrapper.vue.cjs"),u=require("./lib/components/ButtonWrapper.vue.cjs"),s=require("./lib/components/ButtonGroupWrapper.vue.cjs"),n=require("./lib/components/ButtonPureWrapper.vue.cjs"),i=require("./lib/components/ButtonTileWrapper.vue.cjs"),a=require("./lib/components/CanvasWrapper.vue.cjs"),c=require("./lib/components/CarouselWrapper.vue.cjs"),o=require("./lib/components/CheckboxWrapper.vue.cjs"),l=require("./lib/components/CheckboxWrapperWrapper.vue.cjs"),v=require("./lib/components/ContentWrapperWrapper.vue.cjs"),g=require("./lib/components/CrestWrapper.vue.cjs"),P=require("./lib/components/DisplayWrapper.vue.cjs"),y=require("./lib/components/DividerWrapper.vue.cjs"),W=require("./lib/components/DrilldownWrapper.vue.cjs"),q=require("./lib/components/DrilldownItemWrapper.vue.cjs"),d=require("./lib/components/DrilldownLinkWrapper.vue.cjs"),T=require("./lib/components/FieldsetWrapper.vue.cjs"),S=require("./lib/components/FieldsetWrapperWrapper.vue.cjs"),m=require("./lib/components/FlagWrapper.vue.cjs"),I=require("./lib/components/FlexWrapper.vue.cjs"),b=require("./lib/components/FlexItemWrapper.vue.cjs"),x=require("./lib/components/FlyoutWrapper.vue.cjs"),C=require("./lib/components/GridWrapper.vue.cjs"),k=require("./lib/components/GridItemWrapper.vue.cjs"),D=require("./lib/components/HeadingWrapper.vue.cjs"),h=require("./lib/components/HeadlineWrapper.vue.cjs"),L=require("./lib/components/IconWrapper.vue.cjs"),B=require("./lib/components/InlineNotificationWrapper.vue.cjs"),M=require("./lib/components/InputDateWrapper.vue.cjs"),w=require("./lib/components/InputEmailWrapper.vue.cjs"),F=require("./lib/components/InputNumberWrapper.vue.cjs"),H=require("./lib/components/InputPasswordWrapper.vue.cjs"),O=require("./lib/components/InputSearchWrapper.vue.cjs"),R=require("./lib/components/InputTelWrapper.vue.cjs"),G=require("./lib/components/InputTextWrapper.vue.cjs"),f=require("./lib/components/InputTimeWrapper.vue.cjs"),j=require("./lib/components/InputUrlWrapper.vue.cjs"),z=require("./lib/components/LinkWrapper.vue.cjs"),N=require("./lib/components/LinkPureWrapper.vue.cjs"),A=require("./lib/components/LinkSocialWrapper.vue.cjs"),E=require("./lib/components/LinkTileWrapper.vue.cjs"),K=require("./lib/components/LinkTileModelSignatureWrapper.vue.cjs"),U=require("./lib/components/LinkTileProductWrapper.vue.cjs"),J=require("./lib/components/MarqueWrapper.vue.cjs"),Q=require("./lib/components/ModalWrapper.vue.cjs"),V=require("./lib/components/ModelSignatureWrapper.vue.cjs"),X=require("./lib/components/MultiSelectWrapper.vue.cjs"),Y=require("./lib/components/MultiSelectOptionWrapper.vue.cjs"),Z=require("./lib/components/OptgroupWrapper.vue.cjs"),$=require("./lib/components/PaginationWrapper.vue.cjs"),ee=require("./lib/components/PinCodeWrapper.vue.cjs"),re=require("./lib/components/PopoverWrapper.vue.cjs"),_e=require("./lib/components/RadioButtonWrapperWrapper.vue.cjs"),te=require("./lib/components/ScrollerWrapper.vue.cjs"),pe=require("./lib/components/SegmentedControlWrapper.vue.cjs"),ue=require("./lib/components/SegmentedControlItemWrapper.vue.cjs"),se=require("./lib/components/SelectWrapper.vue.cjs"),ne=require("./lib/components/SelectOptionWrapper.vue.cjs"),ie=require("./lib/components/SelectWrapperWrapper.vue.cjs"),ae=require("./lib/components/SheetWrapper.vue.cjs"),ce=require("./lib/components/SpinnerWrapper.vue.cjs"),oe=require("./lib/components/StepperHorizontalWrapper.vue.cjs"),le=require("./lib/components/StepperHorizontalItemWrapper.vue.cjs"),ve=require("./lib/components/SwitchWrapper.vue.cjs"),ge=require("./lib/components/TableWrapper.vue.cjs"),Pe=require("./lib/components/TableBodyWrapper.vue.cjs"),ye=require("./lib/components/TableCellWrapper.vue.cjs"),We=require("./lib/components/TableHeadWrapper.vue.cjs"),qe=require("./lib/components/TableHeadCellWrapper.vue.cjs"),de=require("./lib/components/TableHeadRowWrapper.vue.cjs"),Te=require("./lib/components/TableRowWrapper.vue.cjs"),Se=require("./lib/components/TabsWrapper.vue.cjs"),me=require("./lib/components/TabsBarWrapper.vue.cjs"),Ie=require("./lib/components/TabsItemWrapper.vue.cjs"),be=require("./lib/components/TagWrapper.vue.cjs"),xe=require("./lib/components/TagDismissibleWrapper.vue.cjs"),Ce=require("./lib/components/TextWrapper.vue.cjs"),ke=require("./lib/components/TextFieldWrapperWrapper.vue.cjs"),De=require("./lib/components/TextListWrapper.vue.cjs"),he=require("./lib/components/TextListItemWrapper.vue.cjs"),Le=require("./lib/components/TextareaWrapper.vue.cjs"),Be=require("./lib/components/TextareaWrapperWrapper.vue.cjs"),Me=require("./lib/components/ToastWrapper.vue.cjs"),we=require("./lib/components/WordmarkWrapper.vue.cjs"),e=require("./utils.cjs"),Fe=require("./PorscheDesignSystemProvider.vue.cjs"),r=require("./plugin.cjs");Object.defineProperty(exports,"componentsReady",{enumerable:!0,get:()=>_.componentsReady});exports.PAccordion=t;exports.PBanner=p;exports.PButton=u;exports.PButtonGroup=s;exports.PButtonPure=n;exports.PButtonTile=i;exports.PCanvas=a;exports.PCarousel=c;exports.PCheckbox=o;exports.PCheckboxWrapper=l;exports.PContentWrapper=v;exports.PCrest=g;exports.PDisplay=P;exports.PDivider=y;exports.PDrilldown=W;exports.PDrilldownItem=q;exports.PDrilldownLink=d;exports.PFieldset=T;exports.PFieldsetWrapper=S;exports.PFlag=m;exports.PFlex=I;exports.PFlexItem=b;exports.PFlyout=x;exports.PGrid=C;exports.PGridItem=k;exports.PHeading=D;exports.PHeadline=h;exports.PIcon=L;exports.PInlineNotification=B;exports.PInputDate=M;exports.PInputEmail=w;exports.PInputNumber=F;exports.PInputPassword=H;exports.PInputSearch=O;exports.PInputTel=R;exports.PInputText=G;exports.PInputTime=f;exports.PInputUrl=j;exports.PLink=z;exports.PLinkPure=N;exports.PLinkSocial=A;exports.PLinkTile=E;exports.PLinkTileModelSignature=K;exports.PLinkTileProduct=U;exports.PMarque=J;exports.PModal=Q;exports.PModelSignature=V;exports.PMultiSelect=X;exports.PMultiSelectOption=Y;exports.POptgroup=Z;exports.PPagination=$;exports.PPinCode=ee;exports.PPopover=re;exports.PRadioButtonWrapper=_e;exports.PScroller=te;exports.PSegmentedControl=pe;exports.PSegmentedControlItem=ue;exports.PSelect=se;exports.PSelectOption=ne;exports.PSelectWrapper=ie;exports.PSheet=ae;exports.PSpinner=ce;exports.PStepperHorizontal=oe;exports.PStepperHorizontalItem=le;exports.PSwitch=ve;exports.PTable=ge;exports.PTableBody=Pe;exports.PTableCell=ye;exports.PTableHead=We;exports.PTableHeadCell=qe;exports.PTableHeadRow=de;exports.PTableRow=Te;exports.PTabs=Se;exports.PTabsBar=me;exports.PTabsItem=Ie;exports.PTag=be;exports.PTagDismissible=xe;exports.PText=Ce;exports.PTextFieldWrapper=ke;exports.PTextList=De;exports.PTextListItem=he;exports.PTextarea=Le;exports.PTextareaWrapper=Be;exports.PToast=Me;exports.PWordmark=we;exports.themeInjectionKey=e.themeInjectionKey;exports.useToastManager=e.useToastManager;exports.PorscheDesignSystemProvider=Fe;exports.createPorscheDesignSystem=r.createPorscheDesignSystem;exports.usePorscheDesignSystemPlugin=r.usePorscheDesignSystemPlugin;
|
|
@@ -1,5 +1,9 @@
|
|
|
1
|
-
import type { FieldsetLabelSize, FieldsetState, Theme } from '../types';
|
|
1
|
+
import type { SelectedAriaRole, FieldsetLabelSize, FieldsetState, Theme } from '../types';
|
|
2
2
|
type PFieldsetProps = {
|
|
3
|
+
/**
|
|
4
|
+
* Add ARIA attributes.
|
|
5
|
+
*/
|
|
6
|
+
aria?: SelectedAriaRole<"radiogroup">;
|
|
3
7
|
/**
|
|
4
8
|
* The label text.
|
|
5
9
|
*/
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { defineComponent as f, ref as l, inject as m, onMounted as d, onUpdated as c, watch as u, openBlock as i, createBlock as h, resolveDynamicComponent as _, unref as y, withCtx as C, renderSlot as b } from "vue";
|
|
2
|
-
import { usePrefix as k, themeInjectionKey as w, syncProperties as
|
|
2
|
+
import { usePrefix as k, themeInjectionKey as w, syncProperties as a } from "../../utils.mjs";
|
|
3
3
|
const R = /* @__PURE__ */ f({
|
|
4
4
|
__name: "FieldsetWrapper",
|
|
5
5
|
props: {
|
|
6
|
+
aria: {},
|
|
6
7
|
label: { default: "" },
|
|
7
8
|
labelSize: { default: "medium" },
|
|
8
9
|
message: { default: "" },
|
|
@@ -10,10 +11,10 @@ const R = /* @__PURE__ */ f({
|
|
|
10
11
|
state: { default: "none" },
|
|
11
12
|
theme: {}
|
|
12
13
|
},
|
|
13
|
-
setup(
|
|
14
|
-
const p = k("p-fieldset"), e =
|
|
14
|
+
setup(s) {
|
|
15
|
+
const p = k("p-fieldset"), e = s, t = l(), n = m(w), r = () => a(t, { ...e, theme: e.theme || n.value });
|
|
15
16
|
return d(r), c(r), u(n, (o) => {
|
|
16
|
-
|
|
17
|
+
a(t, { theme: e.theme || o });
|
|
17
18
|
}), (o, x) => (i(), h(_(y(p)), {
|
|
18
19
|
ref_key: "pdsComponentRef",
|
|
19
20
|
ref: t
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import type { SelectedAriaAttributes, FlagAriaAttribute, FlagName, FlagSize } from '../types';
|
|
2
|
+
type PFlagProps = {
|
|
3
|
+
/**
|
|
4
|
+
* A map of ARIA attributes to enhance the flag's accessibility. For example, use `{ 'aria-label': 'German flag' }` to provide a descriptive label for screen readers.
|
|
5
|
+
*/
|
|
6
|
+
aria?: SelectedAriaAttributes<FlagAriaAttribute>;
|
|
7
|
+
/**
|
|
8
|
+
* Specifies the country flag to display. Use the two-letter ISO 3166-1 alpha-2 country code. For example, use `us` for the United States, `de` for Germany, `gb` for Great Britain.
|
|
9
|
+
*/
|
|
10
|
+
name?: FlagName;
|
|
11
|
+
/**
|
|
12
|
+
* The size of the flag. Pre-defined sizes are aligned with the Porsche Next typescale. Available values are `small`, `medium`, `large`, etc.
|
|
13
|
+
*/
|
|
14
|
+
size?: FlagSize;
|
|
15
|
+
};
|
|
16
|
+
declare const _default: import("vue").DefineComponent<PFlagProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PFlagProps> & Readonly<{}>, {
|
|
17
|
+
size: FlagSize;
|
|
18
|
+
name: FlagName;
|
|
19
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
20
|
+
export default _default;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { defineComponent as p, ref as s, onMounted as a, onUpdated as c, openBlock as f, createBlock as m, resolveDynamicComponent as l, unref as d } from "vue";
|
|
2
|
+
import { usePrefix as u, syncProperties as i } from "../../utils.mjs";
|
|
3
|
+
const k = /* @__PURE__ */ p({
|
|
4
|
+
__name: "FlagWrapper",
|
|
5
|
+
props: {
|
|
6
|
+
aria: {},
|
|
7
|
+
name: { default: "de" },
|
|
8
|
+
size: { default: "small" }
|
|
9
|
+
},
|
|
10
|
+
setup(n) {
|
|
11
|
+
const r = u("p-flag"), t = n, e = s(), o = () => i(e, t);
|
|
12
|
+
return a(o), c(o), (_, C) => (f(), m(l(d(r)), {
|
|
13
|
+
ref_key: "pdsComponentRef",
|
|
14
|
+
ref: e
|
|
15
|
+
}, null, 512));
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
export {
|
|
19
|
+
k as default
|
|
20
|
+
};
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
import type { BreakpointCustomizable, InputDateState, Theme } from '../types';
|
|
2
|
+
type PInputDateProps = {
|
|
3
|
+
/**
|
|
4
|
+
* Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., auto-complete='bday' for a birthday).
|
|
5
|
+
*/
|
|
6
|
+
autoComplete?: string;
|
|
7
|
+
/**
|
|
8
|
+
* A boolean value that, if present, renders the input field as a compact version.
|
|
9
|
+
*/
|
|
10
|
+
compact?: boolean;
|
|
11
|
+
/**
|
|
12
|
+
* Supplementary text providing more context or explanation for the input.
|
|
13
|
+
*/
|
|
14
|
+
description?: string;
|
|
15
|
+
/**
|
|
16
|
+
* A boolean value that, if present, makes the input field unusable and unclickable. The value will not be submitted with the form.
|
|
17
|
+
*/
|
|
18
|
+
disabled?: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* Specifies the id of the <form> element that the input belongs to (useful if the input is not a direct descendant of the form).
|
|
21
|
+
*/
|
|
22
|
+
form?: string;
|
|
23
|
+
/**
|
|
24
|
+
* Controls the visibility of the label.
|
|
25
|
+
*/
|
|
26
|
+
hideLabel?: BreakpointCustomizable<boolean>;
|
|
27
|
+
/**
|
|
28
|
+
* Text content for a user-facing label.
|
|
29
|
+
*/
|
|
30
|
+
label?: string;
|
|
31
|
+
/**
|
|
32
|
+
* @experimental Shows a loading indicator.
|
|
33
|
+
*/
|
|
34
|
+
loading?: boolean;
|
|
35
|
+
/**
|
|
36
|
+
* Specifies the latest date that can be selected. The value must be a date string in YYYY-MM-DD format (e.g., max='2024-12-31').
|
|
37
|
+
*/
|
|
38
|
+
max?: string;
|
|
39
|
+
/**
|
|
40
|
+
* Dynamic feedback text for validation or status.
|
|
41
|
+
*/
|
|
42
|
+
message?: string;
|
|
43
|
+
/**
|
|
44
|
+
* Specifies the earliest date that can be selected. The value must be a date string in YYYY-MM-DD format (e.g., min='2023-01-01').
|
|
45
|
+
*/
|
|
46
|
+
min?: string;
|
|
47
|
+
/**
|
|
48
|
+
* The name of the input field, used when submitting the form data.
|
|
49
|
+
*/
|
|
50
|
+
name: string;
|
|
51
|
+
/**
|
|
52
|
+
* A boolean value that, if present, makes the input field uneditable by the user, but its value will still be submitted with the form.
|
|
53
|
+
*/
|
|
54
|
+
readOnly?: boolean;
|
|
55
|
+
/**
|
|
56
|
+
* A boolean value that, if present, indicates that the input field must be filled out before the form can be submitted.
|
|
57
|
+
*/
|
|
58
|
+
required?: boolean;
|
|
59
|
+
/**
|
|
60
|
+
* Indicates the validation or overall status of the input component.
|
|
61
|
+
*/
|
|
62
|
+
state?: InputDateState;
|
|
63
|
+
/**
|
|
64
|
+
* Defines the granularity of the date input. This value is given in days. The default is 1 (one day).
|
|
65
|
+
*/
|
|
66
|
+
step?: number;
|
|
67
|
+
/**
|
|
68
|
+
* Controls the visual appearance of the component.
|
|
69
|
+
*/
|
|
70
|
+
theme?: Theme;
|
|
71
|
+
/**
|
|
72
|
+
* The default date value for the input, in YYYY-MM-DD format (e.g., value='2025-07-02').
|
|
73
|
+
*/
|
|
74
|
+
value?: string;
|
|
75
|
+
};
|
|
76
|
+
declare var __VLS_8: {};
|
|
77
|
+
type __VLS_Slots = {} & {
|
|
78
|
+
default?: (props: typeof __VLS_8) => any;
|
|
79
|
+
};
|
|
80
|
+
declare const __VLS_component: import("vue").DefineComponent<PInputDateProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
|
|
81
|
+
blur: (value: Event) => any;
|
|
82
|
+
change: (value: Event) => any;
|
|
83
|
+
input: (value: InputEvent) => any;
|
|
84
|
+
}, string, import("vue").PublicProps, Readonly<PInputDateProps> & Readonly<{
|
|
85
|
+
onBlur?: ((value: Event) => any) | undefined;
|
|
86
|
+
onChange?: ((value: Event) => any) | undefined;
|
|
87
|
+
onInput?: ((value: InputEvent) => any) | undefined;
|
|
88
|
+
}>, {
|
|
89
|
+
step: number;
|
|
90
|
+
label: string;
|
|
91
|
+
compact: boolean;
|
|
92
|
+
description: string;
|
|
93
|
+
state: InputDateState;
|
|
94
|
+
required: boolean;
|
|
95
|
+
disabled: boolean;
|
|
96
|
+
hideLabel: BreakpointCustomizable<boolean>;
|
|
97
|
+
loading: boolean;
|
|
98
|
+
value: string;
|
|
99
|
+
message: string;
|
|
100
|
+
readOnly: boolean;
|
|
101
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
102
|
+
declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
|
|
103
|
+
export default _default;
|
|
104
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
105
|
+
new (): {
|
|
106
|
+
$slots: S;
|
|
107
|
+
};
|
|
108
|
+
};
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { defineComponent as u, ref as m, inject as c, onMounted as i, onUpdated as h, watch as y, openBlock as B, createBlock as C, resolveDynamicComponent as _, unref as b, withCtx as g, renderSlot as v } from "vue";
|
|
2
|
+
import { usePrefix as x, themeInjectionKey as R, addEventListenerToElementRef as o, syncProperties as f } from "../../utils.mjs";
|
|
3
|
+
const j = /* @__PURE__ */ u({
|
|
4
|
+
__name: "InputDateWrapper",
|
|
5
|
+
props: {
|
|
6
|
+
autoComplete: {},
|
|
7
|
+
compact: { type: Boolean, default: !1 },
|
|
8
|
+
description: { default: "" },
|
|
9
|
+
disabled: { type: Boolean, default: !1 },
|
|
10
|
+
form: {},
|
|
11
|
+
hideLabel: { default: !1 },
|
|
12
|
+
label: { default: "" },
|
|
13
|
+
loading: { type: Boolean, default: !1 },
|
|
14
|
+
max: {},
|
|
15
|
+
message: { default: "" },
|
|
16
|
+
min: {},
|
|
17
|
+
name: {},
|
|
18
|
+
readOnly: { type: Boolean, default: !1 },
|
|
19
|
+
required: { type: Boolean, default: !1 },
|
|
20
|
+
state: { default: "none" },
|
|
21
|
+
step: { default: 1 },
|
|
22
|
+
theme: {},
|
|
23
|
+
value: { default: "" }
|
|
24
|
+
},
|
|
25
|
+
emits: ["blur", "change", "input"],
|
|
26
|
+
setup(p, { emit: r }) {
|
|
27
|
+
const d = x("p-input-date"), t = p, e = m(), n = r, l = c(R), s = () => f(e, { ...t, theme: t.theme || l.value });
|
|
28
|
+
return i(() => {
|
|
29
|
+
s(), o(e, "blur", n), o(e, "change", n), o(e, "input", n);
|
|
30
|
+
}), h(s), y(l, (a) => {
|
|
31
|
+
f(e, { theme: t.theme || a });
|
|
32
|
+
}), (a, k) => (B(), C(_(b(d)), {
|
|
33
|
+
ref_key: "pdsComponentRef",
|
|
34
|
+
ref: e
|
|
35
|
+
}, {
|
|
36
|
+
default: g(() => [
|
|
37
|
+
v(a.$slots, "default")
|
|
38
|
+
]),
|
|
39
|
+
_: 3
|
|
40
|
+
}, 512));
|
|
41
|
+
}
|
|
42
|
+
});
|
|
43
|
+
export {
|
|
44
|
+
j as default
|
|
45
|
+
};
|
|
@@ -25,7 +25,7 @@ type PInputEmailProps = {
|
|
|
25
25
|
*/
|
|
26
26
|
hideLabel?: BreakpointCustomizable<boolean>;
|
|
27
27
|
/**
|
|
28
|
-
* Controls the visibility of
|
|
28
|
+
* Controls the visibility of the email icon.
|
|
29
29
|
*/
|
|
30
30
|
indicator?: boolean;
|
|
31
31
|
/**
|
|
@@ -108,10 +108,10 @@ declare const __VLS_component: import("vue").DefineComponent<PInputEmailProps, v
|
|
|
108
108
|
loading: boolean;
|
|
109
109
|
value: string;
|
|
110
110
|
message: string;
|
|
111
|
+
readOnly: boolean;
|
|
111
112
|
indicator: boolean;
|
|
112
113
|
multiple: boolean;
|
|
113
114
|
placeholder: string;
|
|
114
|
-
readOnly: boolean;
|
|
115
115
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
116
116
|
declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
|
|
117
117
|
export default _default;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { BreakpointCustomizable, InputNumberState, Theme } from '../types';
|
|
2
2
|
type PInputNumberProps = {
|
|
3
3
|
/**
|
|
4
|
-
* Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='
|
|
4
|
+
* Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='postal-code').
|
|
5
5
|
*/
|
|
6
6
|
autoComplete?: string;
|
|
7
7
|
/**
|
|
@@ -105,8 +105,8 @@ declare const __VLS_component: import("vue").DefineComponent<PInputNumberProps,
|
|
|
105
105
|
loading: boolean;
|
|
106
106
|
value: string;
|
|
107
107
|
message: string;
|
|
108
|
-
placeholder: string;
|
|
109
108
|
readOnly: boolean;
|
|
109
|
+
placeholder: string;
|
|
110
110
|
controls: boolean;
|
|
111
111
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
112
112
|
declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { BreakpointCustomizable, InputPasswordState, Theme } from '../types';
|
|
2
2
|
type PInputPasswordProps = {
|
|
3
3
|
/**
|
|
4
|
-
* Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='current-password').
|
|
4
|
+
* Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='current-password', autocomplete='new-password').
|
|
5
5
|
*/
|
|
6
6
|
autoComplete?: string;
|
|
7
7
|
/**
|
|
@@ -101,8 +101,8 @@ declare const __VLS_component: import("vue").DefineComponent<PInputPasswordProps
|
|
|
101
101
|
loading: boolean;
|
|
102
102
|
value: string;
|
|
103
103
|
message: string;
|
|
104
|
-
placeholder: string;
|
|
105
104
|
readOnly: boolean;
|
|
105
|
+
placeholder: string;
|
|
106
106
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
107
107
|
declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
|
|
108
108
|
export default _default;
|
|
@@ -96,9 +96,9 @@ declare const __VLS_component: import("vue").DefineComponent<PInputSearchProps,
|
|
|
96
96
|
loading: boolean;
|
|
97
97
|
value: string;
|
|
98
98
|
message: string;
|
|
99
|
+
readOnly: boolean;
|
|
99
100
|
indicator: boolean;
|
|
100
101
|
placeholder: string;
|
|
101
|
-
readOnly: boolean;
|
|
102
102
|
clear: boolean;
|
|
103
103
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
104
104
|
declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
import type { BreakpointCustomizable, InputTelState, Theme } from '../types';
|
|
2
|
+
type PInputTelProps = {
|
|
3
|
+
/**
|
|
4
|
+
* Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='tel').
|
|
5
|
+
*/
|
|
6
|
+
autoComplete?: string;
|
|
7
|
+
/**
|
|
8
|
+
* A boolean value that, if present, renders the input field as a compact version.
|
|
9
|
+
*/
|
|
10
|
+
compact?: boolean;
|
|
11
|
+
/**
|
|
12
|
+
* Supplementary text providing more context or explanation for the input.
|
|
13
|
+
*/
|
|
14
|
+
description?: string;
|
|
15
|
+
/**
|
|
16
|
+
* A boolean value that, if present, makes the input field unusable and unclickable. The value will not be submitted with the form.
|
|
17
|
+
*/
|
|
18
|
+
disabled?: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* Specifies the id of the <form> element that the input belongs to (useful if the input is not a direct descendant of the form).
|
|
21
|
+
*/
|
|
22
|
+
form?: string;
|
|
23
|
+
/**
|
|
24
|
+
* Controls the visibility of the label.
|
|
25
|
+
*/
|
|
26
|
+
hideLabel?: BreakpointCustomizable<boolean>;
|
|
27
|
+
/**
|
|
28
|
+
* Controls the visibility of the phone icon.
|
|
29
|
+
*/
|
|
30
|
+
indicator?: boolean;
|
|
31
|
+
/**
|
|
32
|
+
* Text content for a user-facing label.
|
|
33
|
+
*/
|
|
34
|
+
label?: string;
|
|
35
|
+
/**
|
|
36
|
+
* @experimental Shows a loading indicator.
|
|
37
|
+
*/
|
|
38
|
+
loading?: boolean;
|
|
39
|
+
/**
|
|
40
|
+
* A non-negative integer specifying the maximum number of characters the user can enter into the input.
|
|
41
|
+
*/
|
|
42
|
+
maxLength?: number;
|
|
43
|
+
/**
|
|
44
|
+
* Dynamic feedback text for validation or status.
|
|
45
|
+
*/
|
|
46
|
+
message?: string;
|
|
47
|
+
/**
|
|
48
|
+
* A non-negative integer specifying the minimum number of characters required for the input's value to be considered valid.
|
|
49
|
+
*/
|
|
50
|
+
minLength?: number;
|
|
51
|
+
/**
|
|
52
|
+
* The name of the input field, used when submitting the form data.
|
|
53
|
+
*/
|
|
54
|
+
name: string;
|
|
55
|
+
/**
|
|
56
|
+
* Specifies a regular expression that the input's value must match for the value to pass constraint validation. This allows for more specific tel validation rules than the browser's default. If provided, it overrides the browser's default tel validation.
|
|
57
|
+
*/
|
|
58
|
+
pattern?: string;
|
|
59
|
+
/**
|
|
60
|
+
* A string that provides a brief hint to the user about what kind of information is expected in the field (e.g., placeholder='(123) 456-7890')
|
|
61
|
+
*/
|
|
62
|
+
placeholder?: string;
|
|
63
|
+
/**
|
|
64
|
+
* A boolean value that, if present, makes the input field uneditable by the user, but its value will still be submitted with the form.
|
|
65
|
+
*/
|
|
66
|
+
readOnly?: boolean;
|
|
67
|
+
/**
|
|
68
|
+
* A boolean value that, if present, indicates that the input field must be filled out before the form can be submitted.
|
|
69
|
+
*/
|
|
70
|
+
required?: boolean;
|
|
71
|
+
/**
|
|
72
|
+
* Indicates the validation or overall status of the input component.
|
|
73
|
+
*/
|
|
74
|
+
state?: InputTelState;
|
|
75
|
+
/**
|
|
76
|
+
* Controls the visual appearance of the component.
|
|
77
|
+
*/
|
|
78
|
+
theme?: Theme;
|
|
79
|
+
/**
|
|
80
|
+
* The tel input value.
|
|
81
|
+
*/
|
|
82
|
+
value?: string;
|
|
83
|
+
};
|
|
84
|
+
declare var __VLS_8: {};
|
|
85
|
+
type __VLS_Slots = {} & {
|
|
86
|
+
default?: (props: typeof __VLS_8) => any;
|
|
87
|
+
};
|
|
88
|
+
declare const __VLS_component: import("vue").DefineComponent<PInputTelProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
|
|
89
|
+
blur: (value: Event) => any;
|
|
90
|
+
change: (value: Event) => any;
|
|
91
|
+
input: (value: InputEvent) => any;
|
|
92
|
+
}, string, import("vue").PublicProps, Readonly<PInputTelProps> & Readonly<{
|
|
93
|
+
onBlur?: ((value: Event) => any) | undefined;
|
|
94
|
+
onChange?: ((value: Event) => any) | undefined;
|
|
95
|
+
onInput?: ((value: InputEvent) => any) | undefined;
|
|
96
|
+
}>, {
|
|
97
|
+
label: string;
|
|
98
|
+
compact: boolean;
|
|
99
|
+
description: string;
|
|
100
|
+
state: InputTelState;
|
|
101
|
+
required: boolean;
|
|
102
|
+
disabled: boolean;
|
|
103
|
+
hideLabel: BreakpointCustomizable<boolean>;
|
|
104
|
+
loading: boolean;
|
|
105
|
+
value: string;
|
|
106
|
+
message: string;
|
|
107
|
+
readOnly: boolean;
|
|
108
|
+
indicator: boolean;
|
|
109
|
+
placeholder: string;
|
|
110
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
111
|
+
declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
|
|
112
|
+
export default _default;
|
|
113
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
114
|
+
new (): {
|
|
115
|
+
$slots: S;
|
|
116
|
+
};
|
|
117
|
+
};
|