@bethinkpl/design-system 26.14.10 → 26.15.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.
- package/dist/design-system.umd.cjs +12 -12
- package/dist/design-system.umd.cjs.map +1 -1
- package/docs/assets/{BasicRichListItem.stories-6qskAByC.js → BasicRichListItem.stories-Du92pfHC.js} +1 -1
- package/docs/assets/{Color-ERTF36HU-knumLUL8.js → Color-ERTF36HU-Cq4yGxVI.js} +1 -1
- package/docs/assets/{DateBox.stories-BvGIrNgL.js → DateBox.stories-ITuNN3NV.js} +1 -1
- package/docs/assets/{DatePicker-BCT6boRT.js → DatePicker-MzMuc8fk.js} +1 -1
- package/docs/assets/{DatePicker.stories-k0wYjOME.js → DatePicker.stories-DZ4fuxm9.js} +1 -1
- package/docs/assets/{DateRangePicker-CnUEzq-Z.js → DateRangePicker-D1PXeiHM.js} +1 -1
- package/docs/assets/{DateRangePicker.stories-BWsIHtfr.js → DateRangePicker.stories-D-RLAJHJ.js} +1 -1
- package/docs/assets/{DocsRenderer-CFRXHY34-CsJlhGZ8.js → DocsRenderer-CFRXHY34-ciQO70gR.js} +5 -5
- package/docs/assets/{Modal-BcXHhF5p.js → Modal-BNfy5y5G.js} +1 -1
- package/docs/assets/Modal.stories-DfgQe09K.js +53 -0
- package/docs/assets/ModalDialog-C3_bDqrz.js +1 -0
- package/docs/assets/ModalDialog.stories-rQ8IipQ0.js +43 -0
- package/docs/assets/{RichListItem.stories-Ds8COMWc.js → RichListItem.stories-B7axni5v.js} +1 -1
- package/docs/assets/{SelectionTile-BUXi_pjW.js → SelectionTile-jvSsuAJD.js} +1 -1
- package/docs/assets/{SelectionTile.stories-BGkoASzB.js → SelectionTile.stories-BtKHjKvZ.js} +1 -1
- package/docs/assets/{iframe-DeX83N-_.js → iframe-bbt6wJ1S.js} +3 -3
- package/docs/assets/{index-BSZogKLd.js → index-BK1XWU9Y.js} +1 -1
- package/docs/assets/{index-Bt72ABkX.js → index-Cmt-_kET.js} +1 -1
- package/docs/assets/{preview-vDX9kXAW.js → preview-Cl6G_t91.js} +1 -1
- package/docs/assets/{preview-CxZpfmpr.js → preview-pqm_1-Xy.js} +2 -2
- package/docs/iframe.html +1 -1
- package/docs/project.json +1 -1
- package/lib/js/components/Modals/Modal/Modal.spec.ts +21 -0
- package/lib/js/components/Modals/Modal/Modal.stories.ts +5 -0
- package/lib/js/components/Modals/Modal/Modal.vue +27 -20
- package/lib/js/components/Modals/ModalDialog/ModalDialog.spec.ts +24 -0
- package/lib/js/components/Modals/ModalDialog/ModalDialog.stories.ts +4 -0
- package/lib/js/components/Modals/ModalDialog/ModalDialog.vue +3 -0
- package/package.json +1 -1
- package/docs/assets/Modal.stories-CuBB-dA5.js +0 -53
- package/docs/assets/ModalDialog-BTKtgJej.js +0 -1
- package/docs/assets/ModalDialog.stories-HhLl8KlV.js +0 -43
|
@@ -1 +1 @@
|
|
|
1
|
-
import{a as y,F as
|
|
1
|
+
import{a as y,F as g,b as C}from"./FeatureIcon-JKiMnOvS.js";import{b as A,I as d}from"./Icon-DLflpryl.js";import{a as u,D as L,c as i,I as k,d as N,B as U}from"./Button-DTM9D6tQ.js";import{I as M}from"./IconButton-jIBOZaL6.js";import{d as D,t as f,b as c,a as n,n as m,f as b,j as F,x as B,c as r,g as a,r as S,k as s,e as p,p as R,T as j,o as t,l as O}from"./vue.esm-bundler-DD4BrEtS.js";import{_ as V}from"./_plugin-vue_export-helper-DlAUqK2U.js";const I={SMALL:"small",MEDIUM:"medium"},E={SMALL:"small",MEDIUM:"medium"},h=D({name:"Modal",components:{FeatureIcon:g,WnlButton:L,WnlIconButton:M},props:{size:{type:String,default:I.MEDIUM,validator:e=>Object.values(I).includes(e)},danger:{type:Boolean,default:!1},headerTitleSize:{type:String,default:E.MEDIUM,validator:e=>Object.values(E).includes(e)},headerTitle:{type:String,default:null},headerSubtitle:{type:String,default:null},headerFeatureIcon:{type:Object,default:null,validator(e){return Object.values(d).includes(f(e))}},headerFeatureIconColor:{type:String,default:y.NEUTRAL,validator(e){return Object.values(y).includes(e)}},contentCentered:{type:Boolean,default:!1},headerImage:{type:String,default:null},footerPrimaryButtonText:{type:String,default:null},footerPrimaryButtonIcon:{type:Object,default:null,validator(e){return Object.values(d).includes(f(e))}},footerPrimaryButtonState:{type:String,default:u.DEFAULT,validator(e){return Object.values(u).includes(e)}},footerSecondaryButtonText:{type:String,default:null},footerSecondaryButtonIcon:{type:Object,default:null,validator(e){return Object.values(d).includes(f(e))}},footerSecondaryButtonState:{type:String,default:u.DEFAULT,validator(e){return Object.values(u).includes(e)}},footerTertiaryButtonText:{type:String,default:null},footerTertiaryButtonIcon:{type:Object,default:null,validator(e){return Object.values(d).includes(f(e))}},footerTertiaryButtonState:{type:String,default:u.DEFAULT,validator(e){return Object.values(u).includes(e)}},footerCheckboxText:{type:String,default:null}},emits:["tertiary-button-click","checkbox-change","close-modal","secondary-button-click","primary-button-click"],data(){return{BUTTON_COLORS:Object.freeze(i),BUTTON_ELEVATIONS:Object.freeze(U),BUTTON_TYPES:Object.freeze(N),ICONS:Object.freeze(d),ICON_BUTTON_COLORS:Object.freeze(k),ICON_SIZES:Object.freeze(A),MODAL_SIZES:Object.freeze(I),MODAL_HEADER_TITLE_SIZES:Object.freeze(E),FEATURE_ICON_SIZES:Object.freeze(C)}},computed:{calcHeaderFeatureIconColor(){return this.danger?y.DANGER:this.headerFeatureIconColor},calcFooterPrimaryButtonColor(){return this.danger?i.NEUTRAL:i.PRIMARY},calcFooterSecondaryButtonColor(){return this.danger?i.DANGER:i.NEUTRAL},calcSingleColumn(){return!((this.footerTertiaryButtonText||this.footerCheckboxText)&&(this.footerSecondaryButtonText||this.footerPrimaryButtonText))},displayFooter(){return this.footerTertiaryButtonText||this.footerCheckboxText||this.footerSecondaryButtonText||this.footerPrimaryButtonText}}}),P={class:"ds-modal__rightActions"},z={class:"ds-modal__scrollableWrapper"},$=["src"],Z={key:0,class:"ds-modal__header"},w={key:1,class:"ds-modal__headerSubtitle"},H={key:1,class:"ds-modal__slotContent"},Y={key:0,class:"ds-modal__footerCtaSecondary"},W={key:0,class:"ds-modal__checkbox"},X={for:"ds-modal__checkboxInput",class:"ds-modal__checkboxLabel"},G={key:1,class:"ds-modal__footerCtaPrimary"};function K(e,o,q,J,Q,x){const _=S("wnl-icon-button"),v=S("feature-icon"),T=S("wnl-button");return t(),c(j,{to:"body"},[n("div",R({class:"ds-modal"},e.$attrs,{onClick:o[5]||(o[5]=B(l=>e.$emit("close-modal"),["self"]))}),[n("div",{class:m(["ds-modal__wrapper",{"-ds-small":e.size===e.MODAL_SIZES.SMALL}])},[n("div",P,[b(e.$slots,"rightActions",{},void 0,!0),F(_,{touchable:"",icon:e.ICONS.FA_XMARK,size:e.ICON_SIZES.SMALL,elevation:e.BUTTON_ELEVATIONS.X_SMALL,color:e.ICON_BUTTON_COLORS.NEUTRAL_WEAK,onClick:o[0]||(o[0]=B(l=>e.$emit("close-modal"),["stop"]))},null,8,["icon","size","elevation","color"])]),n("div",z,[e.headerImage?(t(),r("img",{key:0,class:"ds-modal__image",src:e.headerImage,alt:""},null,8,$)):a("",!0),n("div",{class:m(["ds-modal__content",{"-ds-centered":e.contentCentered}])},[e.headerTitle?(t(),r("div",Z,[e.headerFeatureIcon?(t(),c(v,{key:0,class:"ds-modal__headerFeatureIcon",color:e.calcHeaderFeatureIconColor,icon:e.headerFeatureIcon,size:e.FEATURE_ICON_SIZES.X_LARGE,"double-background":""},null,8,["color","icon","size"])):a("",!0),n("h4",{class:m(["ds-modal__headerTitle",{"-ds-small":e.headerTitleSize===e.MODAL_HEADER_TITLE_SIZES.SMALL}])},s(e.headerTitle),3),e.headerSubtitle?(t(),r("h5",w,s(e.headerSubtitle),1)):a("",!0)])):a("",!0),e.$slots.default?(t(),r("div",H,[b(e.$slots,"default",{},void 0,!0)])):a("",!0),e.displayFooter?(t(),r("div",{key:2,class:m(["ds-modal__footer",{"-ds-singleColumn":e.calcSingleColumn}])},[e.footerTertiaryButtonText||e.footerCheckboxText?(t(),r("div",Y,[e.footerCheckboxText?(t(),r("div",W,[n("input",{id:"ds-modal__checkboxInput",type:"checkbox",checked:!1,onChange:o[1]||(o[1]=l=>e.$emit("checkbox-change",l.target.checked))},null,32),n("label",X,s(e.footerCheckboxText),1)])):a("",!0),e.footerTertiaryButtonText?(t(),c(T,{key:1,type:e.BUTTON_TYPES.TEXT,color:e.BUTTON_COLORS.NEUTRAL,"icon-left":e.footerTertiaryButtonIcon,state:e.footerTertiaryButtonState,class:"ds-modal__tertiaryButton",onClick:o[2]||(o[2]=l=>e.$emit("tertiary-button-click"))},{default:p(()=>[O(s(e.footerTertiaryButtonText),1)]),_:1},8,["type","color","icon-left","state"])):a("",!0)])):a("",!0),e.footerSecondaryButtonText||e.footerPrimaryButtonText?(t(),r("div",G,[e.footerSecondaryButtonText?(t(),c(T,{key:0,type:e.BUTTON_TYPES.OUTLINED,color:e.calcFooterSecondaryButtonColor,"icon-right":e.footerSecondaryButtonIcon,state:e.footerSecondaryButtonState,onClick:o[3]||(o[3]=l=>e.$emit("secondary-button-click"))},{default:p(()=>[O(s(e.footerSecondaryButtonText),1)]),_:1},8,["type","color","icon-right","state"])):a("",!0),e.footerPrimaryButtonText?(t(),c(T,{key:1,color:e.calcFooterPrimaryButtonColor,"icon-right":e.footerPrimaryButtonIcon,state:e.footerPrimaryButtonState,onClick:o[4]||(o[4]=l=>e.$emit("primary-button-click"))},{default:p(()=>[O(s(e.footerPrimaryButtonText),1)]),_:1},8,["color","icon-right","state"])):a("",!0)])):a("",!0)],2)):a("",!0)],2)])],2)],16)])}const le=V(h,[["render",K],["__scopeId","data-v-d4d930ed"]]);h.__docgenInfo={displayName:"Modal",exportName:"default",description:"",tags:{},props:[{name:"size",type:{name:"string"},defaultValue:{func:!1,value:"MODAL_SIZES.MEDIUM"}},{name:"danger",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"headerTitleSize",type:{name:"string"},defaultValue:{func:!1,value:"MODAL_HEADER_TITLE_SIZES.MEDIUM"}},{name:"headerTitle",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"headerSubtitle",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"headerFeatureIcon",type:{name:"object"},defaultValue:{func:!1,value:"null"}},{name:"headerFeatureIconColor",type:{name:"string"},defaultValue:{func:!1,value:"FEATURE_ICON_COLOR.NEUTRAL"}},{name:"contentCentered",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"headerImage",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"footerPrimaryButtonText",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"footerPrimaryButtonIcon",type:{name:"object"},defaultValue:{func:!1,value:"null"}},{name:"footerPrimaryButtonState",type:{name:"string"},defaultValue:{func:!1,value:"BUTTON_STATES.DEFAULT"}},{name:"footerSecondaryButtonText",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"footerSecondaryButtonIcon",type:{name:"object"},defaultValue:{func:!1,value:"null"}},{name:"footerSecondaryButtonState",type:{name:"string"},defaultValue:{func:!1,value:"BUTTON_STATES.DEFAULT"}},{name:"footerTertiaryButtonText",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"footerTertiaryButtonIcon",type:{name:"object"},defaultValue:{func:!1,value:"null"}},{name:"footerTertiaryButtonState",type:{name:"string"},defaultValue:{func:!1,value:"BUTTON_STATES.DEFAULT"}},{name:"footerCheckboxText",type:{name:"string"},defaultValue:{func:!1,value:"null"}}],events:[{name:"close-modal"},{name:"checkbox-change"},{name:"tertiary-button-click"},{name:"secondary-button-click"},{name:"primary-button-click"}],slots:[{name:"rightActions"},{name:"default"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/Modals/Modal/Modal.vue"]};export{le as D,E as M,I as a};
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import{D as x,M as i,a as u}from"./Modal-BNfy5y5G.js";import{I as n}from"./Icon-DLflpryl.js";import{a as c}from"./FeatureIcon-JKiMnOvS.js";import{a as t}from"./Button-DTM9D6tQ.js";import"./IconButton-jIBOZaL6.js";import"./vue.esm-bundler-DD4BrEtS.js";import"./device-9fgosCm4.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const D={title:"Components/Modals/Modal",component:x},l=b=>({components:{Modal:x},setup(){return b},template:'<modal :headerFeatureIcon="ICONS[headerFeatureIcon]" :size="size" :danger="danger" :headerTitleSize="headerTitleSize" :headerTitle="headerTitle" :headerSubtitle="headerSubtitle" :contentCentered="contentCentered" :headerFeatureIconColor="headerFeatureIconColor" :footerPrimaryButtonText="footerPrimaryButtonText" :footerPrimaryButtonIcon="ICONS[footerPrimaryButtonIcon]" :footerPrimaryButtonState="footerPrimaryButtonState" :footerSecondaryButtonText="footerSecondaryButtonText" :footerSecondaryButtonIcon="ICONS[footerSecondaryButtonIcon]" :footerSecondaryButtonState="footerSecondaryButtonState" :footerTertiaryButtonText="footerTertiaryButtonText" :footerTertiaryButtonIcon="ICONS[footerTertiaryButtonIcon]" :footerTertiaryButtonState="footerTertiaryButtonState" :footerCheckboxText="footerCheckboxText" :headerImage="headerImage"><div v-html="defaultSlot" /><template v-if="rightActionsSlot" #rightActions><div style="display: inline-flex;" v-html="rightActionsSlot" /></template></modal>',data(){return{ICONS:Object.freeze(n)}}}),e=l.bind({}),A={defaultSlot:'<p style="margin-top: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p><p style="margin-top: 0; margin-bottom: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p>',rightActionsSlot:"Right actions",size:u.MEDIUM,danger:!1,contentCentered:!1,headerImage:"",headerTitleSize:i.MEDIUM,headerTitle:"Modal Title Accusantium occaecati atque similique gg provident nobis.",headerSubtitle:"Modal Subtitle Aut vitae neque consequatur. Consequuntur natus sint ad.",headerFeatureIcon:"FA_CIRCLE_QUESTION",headerFeatureIconColor:c.NEUTRAL,footerPrimaryButtonText:"Primary M",footerPrimaryButtonIcon:null,footerPrimaryButtonState:t.DEFAULT,footerSecondaryButtonText:"Secondary M",footerSecondaryButtonIcon:null,footerSecondaryButtonState:t.DEFAULT,footerTertiaryButtonText:"Tertiary M",footerTertiaryButtonIcon:null,footerTertiaryButtonState:t.DEFAULT,footerCheckboxText:""},s={size:{control:"select",options:Object.values(u)},danger:{control:"boolean"},headerTitleSize:{control:"select",options:Object.values(i)},headerTitle:{control:"text"},headerImage:{control:"text"},headerSubtitle:{control:"text"},headerFeatureIcon:{control:"select",options:[null,...Object.keys(n)]},headerFeatureIconColor:{control:"select",options:Object.values(c)},contentCentered:{control:"boolean"},footerPrimaryButtonText:{control:"text"},footerPrimaryButtonIcon:{control:"select",options:[null,...Object.keys(n)]},footerPrimaryButtonState:{control:"select",options:Object.values(t)},footerSecondaryButtonText:{control:"text"},footerSecondaryButtonIcon:{control:"select",options:[null,...Object.keys(n)]},footerSecondaryButtonState:{control:"select",options:Object.values(t)},footerTertiaryButtonText:{control:"text"},footerTertiaryButtonIcon:{control:"select",options:[null,...Object.keys(n)]},footerTertiaryButtonState:{control:"select",options:Object.values(t)},footerCheckboxText:{control:"text"},onCloseModal:{action:"close-modal"},onCheckboxChange:{action:"checkbox-change"},onPrimaryButtonClick:{action:"primary-button-click"},onSecondaryButtonClick:{action:"secondary-button-click"},onTertiaryButtonClick:{action:"tertiary-button-click"}};e.argTypes=s;e.args=A;e.parameters={design:{type:"figma",url:"https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=5658%3A96416&t=lgUXCZhvWDuBr3qw-0"}};const O={defaultSlot:'<p style="margin-top: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p><p style="margin-top: 0; margin-bottom: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p>',rightActionsSlot:"Right actions",size:u.MEDIUM,danger:!0,contentCentered:!1,headerImage:"",headerTitleSize:i.MEDIUM,headerTitle:"Modal Title Accusantium occaecati atque similique gg provident nobis.",headerSubtitle:"Modal Subtitle Aut vitae neque consequatur. Consequuntur natus sint ad.",headerFeatureIcon:"FA_CIRCLE_EXCLAMATION",headerFeatureIconColor:c.NEUTRAL,footerPrimaryButtonText:"Primary M",footerPrimaryButtonIcon:null,footerPrimaryButtonState:t.DEFAULT,footerSecondaryButtonText:"Secondary M",footerSecondaryButtonIcon:null,footerSecondaryButtonState:t.DEFAULT,footerTertiaryButtonText:"",footerTertiaryButtonIcon:null,footerTertiaryButtonState:t.DEFAULT,footerCheckboxText:""},o=l.bind({});o.argTypes=s;o.args=O;const E={defaultSlot:'<p style="margin-top: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p><p style="margin-top: 0; margin-bottom: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p>',rightActionsSlot:"Right actions",size:u.MEDIUM,danger:!1,contentCentered:!1,headerImage:"https://wiecejnizlek.pl/wp-content/uploads/2022/10/WNL-Strona-cover-dla-filmu-2-1.jpg",headerTitleSize:i.MEDIUM,headerTitle:"Modal Title Accusantium occaecati atque similique gg provident nobis.",headerSubtitle:"Modal Subtitle Aut vitae neque consequatur. Consequuntur natus sint ad.",headerFeatureIcon:null,headerFeatureIconColor:null,footerPrimaryButtonText:"Primary M",footerPrimaryButtonIcon:null,footerPrimaryButtonState:t.DEFAULT,footerSecondaryButtonText:"Secondary M",footerSecondaryButtonIcon:null,footerSecondaryButtonState:t.DEFAULT,footerTertiaryButtonText:"",footerTertiaryButtonIcon:null,footerTertiaryButtonState:t.DEFAULT,footerCheckboxText:""},r=l.bind({});r.argTypes=s;r.args=E;const q={defaultSlot:'<p style="margin-top: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p><p style="margin-top: 0; margin-bottom: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p>',rightActionsSlot:"Right actions",size:u.SMALL,danger:!1,contentCentered:!0,headerImage:"",headerTitleSize:i.SMALL,headerTitle:"Modal Title Accusantium occaecati atque similique gg provident nobis.",headerSubtitle:"Modal Subtitle Aut vitae neque consequatur. Consequuntur natus sint ad.",headerFeatureIcon:"FA_CIRCLE_EXCLAMATION",headerFeatureIconColor:c.NEUTRAL,footerPrimaryButtonText:"Primary M",footerPrimaryButtonIcon:null,footerPrimaryButtonState:t.DEFAULT,footerSecondaryButtonText:"Secondary M",footerSecondaryButtonIcon:null,footerSecondaryButtonState:t.DEFAULT,footerTertiaryButtonText:"",footerTertiaryButtonIcon:null,footerTertiaryButtonState:t.DEFAULT,footerCheckboxText:""},a=l.bind({});a.argTypes=s;a.args=q;var d,m,S;e.parameters={...e.parameters,docs:{...(d=e.parameters)==null?void 0:d.docs,source:{originalSource:`args => ({
|
|
2
|
+
components: {
|
|
3
|
+
Modal
|
|
4
|
+
},
|
|
5
|
+
setup() {
|
|
6
|
+
return args;
|
|
7
|
+
},
|
|
8
|
+
template: '<modal :headerFeatureIcon="ICONS[headerFeatureIcon]" :size="size" :danger="danger" ' + ':headerTitleSize="headerTitleSize" :headerTitle="headerTitle" :headerSubtitle="headerSubtitle" :contentCentered="contentCentered" :headerFeatureIconColor="headerFeatureIconColor" ' + ':footerPrimaryButtonText="footerPrimaryButtonText" :footerPrimaryButtonIcon="ICONS[footerPrimaryButtonIcon]" :footerPrimaryButtonState="footerPrimaryButtonState" ' + ':footerSecondaryButtonText="footerSecondaryButtonText" :footerSecondaryButtonIcon="ICONS[footerSecondaryButtonIcon]" :footerSecondaryButtonState="footerSecondaryButtonState" ' + ':footerTertiaryButtonText="footerTertiaryButtonText" :footerTertiaryButtonIcon="ICONS[footerTertiaryButtonIcon]" :footerTertiaryButtonState="footerTertiaryButtonState" ' + ':footerCheckboxText="footerCheckboxText" :headerImage="headerImage">' + '<div v-html="defaultSlot" />' + '<template v-if="rightActionsSlot" #rightActions><div style="display: inline-flex;" v-html="rightActionsSlot" /></template>' + '</modal>',
|
|
9
|
+
data() {
|
|
10
|
+
return {
|
|
11
|
+
ICONS: Object.freeze(ICONS)
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
})`,...(S=(m=e.parameters)==null?void 0:m.docs)==null?void 0:S.source}}};var f,y,T;o.parameters={...o.parameters,docs:{...(f=o.parameters)==null?void 0:f.docs,source:{originalSource:`args => ({
|
|
15
|
+
components: {
|
|
16
|
+
Modal
|
|
17
|
+
},
|
|
18
|
+
setup() {
|
|
19
|
+
return args;
|
|
20
|
+
},
|
|
21
|
+
template: '<modal :headerFeatureIcon="ICONS[headerFeatureIcon]" :size="size" :danger="danger" ' + ':headerTitleSize="headerTitleSize" :headerTitle="headerTitle" :headerSubtitle="headerSubtitle" :contentCentered="contentCentered" :headerFeatureIconColor="headerFeatureIconColor" ' + ':footerPrimaryButtonText="footerPrimaryButtonText" :footerPrimaryButtonIcon="ICONS[footerPrimaryButtonIcon]" :footerPrimaryButtonState="footerPrimaryButtonState" ' + ':footerSecondaryButtonText="footerSecondaryButtonText" :footerSecondaryButtonIcon="ICONS[footerSecondaryButtonIcon]" :footerSecondaryButtonState="footerSecondaryButtonState" ' + ':footerTertiaryButtonText="footerTertiaryButtonText" :footerTertiaryButtonIcon="ICONS[footerTertiaryButtonIcon]" :footerTertiaryButtonState="footerTertiaryButtonState" ' + ':footerCheckboxText="footerCheckboxText" :headerImage="headerImage">' + '<div v-html="defaultSlot" />' + '<template v-if="rightActionsSlot" #rightActions><div style="display: inline-flex;" v-html="rightActionsSlot" /></template>' + '</modal>',
|
|
22
|
+
data() {
|
|
23
|
+
return {
|
|
24
|
+
ICONS: Object.freeze(ICONS)
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
})`,...(T=(y=o.parameters)==null?void 0:y.docs)==null?void 0:T.source}}};var h,I,p;r.parameters={...r.parameters,docs:{...(h=r.parameters)==null?void 0:h.docs,source:{originalSource:`args => ({
|
|
28
|
+
components: {
|
|
29
|
+
Modal
|
|
30
|
+
},
|
|
31
|
+
setup() {
|
|
32
|
+
return args;
|
|
33
|
+
},
|
|
34
|
+
template: '<modal :headerFeatureIcon="ICONS[headerFeatureIcon]" :size="size" :danger="danger" ' + ':headerTitleSize="headerTitleSize" :headerTitle="headerTitle" :headerSubtitle="headerSubtitle" :contentCentered="contentCentered" :headerFeatureIconColor="headerFeatureIconColor" ' + ':footerPrimaryButtonText="footerPrimaryButtonText" :footerPrimaryButtonIcon="ICONS[footerPrimaryButtonIcon]" :footerPrimaryButtonState="footerPrimaryButtonState" ' + ':footerSecondaryButtonText="footerSecondaryButtonText" :footerSecondaryButtonIcon="ICONS[footerSecondaryButtonIcon]" :footerSecondaryButtonState="footerSecondaryButtonState" ' + ':footerTertiaryButtonText="footerTertiaryButtonText" :footerTertiaryButtonIcon="ICONS[footerTertiaryButtonIcon]" :footerTertiaryButtonState="footerTertiaryButtonState" ' + ':footerCheckboxText="footerCheckboxText" :headerImage="headerImage">' + '<div v-html="defaultSlot" />' + '<template v-if="rightActionsSlot" #rightActions><div style="display: inline-flex;" v-html="rightActionsSlot" /></template>' + '</modal>',
|
|
35
|
+
data() {
|
|
36
|
+
return {
|
|
37
|
+
ICONS: Object.freeze(ICONS)
|
|
38
|
+
};
|
|
39
|
+
}
|
|
40
|
+
})`,...(p=(I=r.parameters)==null?void 0:I.docs)==null?void 0:p.source}}};var B,g,C;a.parameters={...a.parameters,docs:{...(B=a.parameters)==null?void 0:B.docs,source:{originalSource:`args => ({
|
|
41
|
+
components: {
|
|
42
|
+
Modal
|
|
43
|
+
},
|
|
44
|
+
setup() {
|
|
45
|
+
return args;
|
|
46
|
+
},
|
|
47
|
+
template: '<modal :headerFeatureIcon="ICONS[headerFeatureIcon]" :size="size" :danger="danger" ' + ':headerTitleSize="headerTitleSize" :headerTitle="headerTitle" :headerSubtitle="headerSubtitle" :contentCentered="contentCentered" :headerFeatureIconColor="headerFeatureIconColor" ' + ':footerPrimaryButtonText="footerPrimaryButtonText" :footerPrimaryButtonIcon="ICONS[footerPrimaryButtonIcon]" :footerPrimaryButtonState="footerPrimaryButtonState" ' + ':footerSecondaryButtonText="footerSecondaryButtonText" :footerSecondaryButtonIcon="ICONS[footerSecondaryButtonIcon]" :footerSecondaryButtonState="footerSecondaryButtonState" ' + ':footerTertiaryButtonText="footerTertiaryButtonText" :footerTertiaryButtonIcon="ICONS[footerTertiaryButtonIcon]" :footerTertiaryButtonState="footerTertiaryButtonState" ' + ':footerCheckboxText="footerCheckboxText" :headerImage="headerImage">' + '<div v-html="defaultSlot" />' + '<template v-if="rightActionsSlot" #rightActions><div style="display: inline-flex;" v-html="rightActionsSlot" /></template>' + '</modal>',
|
|
48
|
+
data() {
|
|
49
|
+
return {
|
|
50
|
+
ICONS: Object.freeze(ICONS)
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
})`,...(C=(g=a.parameters)==null?void 0:g.docs)==null?void 0:C.source}}};const U=["Interactive","Danger","WithImage","SizeSAndCentered"];export{o as Danger,e as Interactive,a as SizeSAndCentered,r as WithImage,U as __namedExportsOrder,D as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{D as f,M as m,a as c}from"./Modal-BNfy5y5G.js";import{I as o}from"./Icon-DLflpryl.js";import{a as l}from"./FeatureIcon-JKiMnOvS.js";import{d as y,t as r,b as p,e as u,r as S,o as b,f as d}from"./vue.esm-bundler-DD4BrEtS.js";import{a}from"./Button-DTM9D6tQ.js";import{_ as g}from"./_plugin-vue_export-helper-DlAUqK2U.js";const i=y({name:"ModalDialog",components:{DsModal:f},props:{danger:{type:Boolean,default:!1},headerTitle:{type:String,required:!0},headerSubtitle:{type:String,default:null},headerFeatureIcon:{type:Object,default:null,validator(e){return Object.values(o).includes(r(e))}},headerFeatureIconColor:{type:String,default:l.NEUTRAL,validator(e){return Object.values(l).includes(e)}},headerImage:{type:String,default:null},footerPrimaryButtonText:{type:String,default:null},footerPrimaryButtonIcon:{type:Object,default:null,validator(e){return Object.values(o).includes(r(e))}},footerPrimaryButtonState:{type:String,default:a.DEFAULT,validator(e){return Object.values(a).includes(e)}},footerSecondaryButtonText:{type:String,default:null},footerSecondaryButtonIcon:{type:Object,default:null,validator(e){return Object.values(o).includes(r(e))}},footerSecondaryButtonState:{type:String,default:a.DEFAULT,validator(e){return Object.values(a).includes(e)}}},emits:["close-modal","primary-button-click","secondary-button-click"],data(){return{MODAL_SIZES:Object.freeze(c),MODAL_HEADER_TITLE_SIZES:Object.freeze(m)}}});function T(e,t,v,I,E,h){const s=S("ds-modal");return b(),p(s,{class:"ds-modalDialog",size:e.MODAL_SIZES.SMALL,danger:e.danger,"content-centered":!0,"header-image":e.headerImage,"header-title-size":e.MODAL_HEADER_TITLE_SIZES.SMALL,"header-feature-icon":e.headerFeatureIcon,"header-feature-icon-color":e.headerFeatureIconColor,"header-title":e.headerTitle,"header-subtitle":e.headerSubtitle,"footer-primary-button-text":e.footerPrimaryButtonText,"footer-primary-button-icon":e.footerPrimaryButtonIcon,"footer-primary-button-state":e.footerPrimaryButtonState,"footer-secondary-button-text":e.footerSecondaryButtonText,"footer-secondary-button-icon":e.footerSecondaryButtonIcon,"footer-secondary-button-state":e.footerSecondaryButtonState,onCloseModal:t[0]||(t[0]=n=>e.$emit("close-modal")),onPrimaryButtonClick:t[1]||(t[1]=n=>e.$emit("primary-button-click")),onSecondaryButtonClick:t[2]||(t[2]=n=>e.$emit("secondary-button-click"))},{rightActions:u(()=>[d(e.$slots,"rightActions")]),default:u(()=>[d(e.$slots,"default")]),_:3},8,["size","danger","header-image","header-title-size","header-feature-icon","header-feature-icon-color","header-title","header-subtitle","footer-primary-button-text","footer-primary-button-icon","footer-primary-button-state","footer-secondary-button-text","footer-secondary-button-icon","footer-secondary-button-state"])}const j=g(i,[["render",T]]);i.__docgenInfo={displayName:"ModalDialog",exportName:"default",description:"",tags:{},props:[{name:"danger",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"headerTitle",type:{name:"string"},required:!0},{name:"headerSubtitle",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"headerFeatureIcon",type:{name:"object"},defaultValue:{func:!1,value:"null"}},{name:"headerFeatureIconColor",type:{name:"string"},defaultValue:{func:!1,value:"FEATURE_ICON_COLOR.NEUTRAL"}},{name:"headerImage",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"footerPrimaryButtonText",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"footerPrimaryButtonIcon",type:{name:"object"},defaultValue:{func:!1,value:"null"}},{name:"footerPrimaryButtonState",type:{name:"string"},defaultValue:{func:!1,value:"BUTTON_STATES.DEFAULT"}},{name:"footerSecondaryButtonText",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"footerSecondaryButtonIcon",type:{name:"object"},defaultValue:{func:!1,value:"null"}},{name:"footerSecondaryButtonState",type:{name:"string"},defaultValue:{func:!1,value:"BUTTON_STATES.DEFAULT"}}],events:[{name:"close-modal"},{name:"primary-button-click"},{name:"secondary-button-click"}],slots:[{name:"default"},{name:"rightActions"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/Modals/ModalDialog/ModalDialog.vue"]};export{j as M};
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import{M as g}from"./ModalDialog-C3_bDqrz.js";import{I as a}from"./Icon-DLflpryl.js";import{a as n}from"./FeatureIcon-JKiMnOvS.js";import{a as t}from"./Button-DTM9D6tQ.js";import"./Modal-BNfy5y5G.js";import"./IconButton-jIBOZaL6.js";import"./vue.esm-bundler-DD4BrEtS.js";import"./device-9fgosCm4.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const q={title:"Components/Modals/ModalDialog",component:g},i=h=>({components:{ModalDialog:g},setup(){return h},template:'<modal-dialog :headerFeatureIcon="ICONS[headerFeatureIcon]" :danger="danger" :headerTitle="headerTitle" :headerSubtitle="headerSubtitle" :headerFeatureIconColor="headerFeatureIconColor" :footerPrimaryButtonText="footerPrimaryButtonText" :footerPrimaryButtonIcon="footerPrimaryButtonIcon" :footerPrimaryButtonState="footerPrimaryButtonState" :headerImage="headerImage" :footerSecondaryButtonText="footerSecondaryButtonText" :footerSecondaryButtonIcon="footerSecondaryButtonIcon" :footerSecondaryButtonState="footerSecondaryButtonState"><div v-html="defaultSlot" /><template v-if="rightActionsSlot" #rightActions><div style="display: inline-flex;" v-html="rightActionsSlot" /></template></modal-dialog>',data(){return{ICONS:Object.freeze(a),BUTTON_STATES:Object.freeze(t)}}}),e=i.bind({}),T={defaultSlot:'<p style="margin-top: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p><p style="margin-top: 0; margin-bottom: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p>',rightActionsSlot:"Right actions",danger:!1,headerImage:"",headerTitle:"Modal Title Accusantium occaecati atque similique gg provident nobis.",headerSubtitle:"Modal Subtitle Aut vitae neque consequatur. Consequuntur natus sint ad.",headerFeatureIcon:"FA_CIRCLE_QUESTION",headerFeatureIconColor:n.NEUTRAL,footerPrimaryButtonText:"Primary M",footerPrimaryButtonIcon:null,footerPrimaryButtonState:t.DEFAULT,footerSecondaryButtonText:"Secondary M",footerSecondaryButtonIcon:null,footerSecondaryButtonState:t.DEFAULT},u={danger:{control:"boolean"},headerImage:{control:"text",table:{type:{summary:"string"},defaultValue:{summary:"Hello"}}},headerTitle:{control:"text"},headerSubtitle:{control:"text"},headerFeatureIcon:{control:"select",options:[null,...Object.keys(a)]},headerFeatureIconColor:{control:"select",options:Object.values(n)},footerPrimaryButtonText:{control:"text"},footerPrimaryButtonIcon:{control:"select",options:[null,...Object.keys(a)]},footerPrimaryButtonState:{control:"select",options:Object.values(t)},footerSecondaryButtonText:{control:"text"},footerSecondaryButtonIcon:{control:"select",options:[null,...Object.keys(a)]},footerSecondaryButtonState:{control:"select",options:Object.values(t)}};e.argTypes=u;e.args=T;e.parameters={design:{type:"figma",url:"https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=5658%3A96416&t=lgUXCZhvWDuBr3qw-0"}};const I={defaultSlot:'<p style="margin-top: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p><p style="margin-top: 0; margin-bottom: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p>',rightActionsSlot:"Right actions",danger:!0,headerImage:"",headerTitle:"Modal Title Accusantium occaecati atque similique gg provident nobis.",headerSubtitle:"Modal Subtitle Aut vitae neque consequatur. Consequuntur natus sint ad.",headerFeatureIcon:"FA_CIRCLE_EXCLAMATION",headerFeatureIconColor:n.NEUTRAL,footerPrimaryButtonText:"Primary M",footerPrimaryButtonIcon:null,footerPrimaryButtonState:t.DEFAULT,footerSecondaryButtonText:"Secondary M",footerSecondaryButtonIcon:null,footerSecondaryButtonState:t.DEFAULT},o=i.bind({});o.argTypes=u;o.args=I;const B={defaultSlot:"",rightActionsSlot:"",danger:!1,headerImage:"https://wiecejnizlek.pl/wp-content/themes/uncode-child/assets/patterns/pattern-black.png",headerTitle:"Modal Title Accusantium occaecati atque similique gg provident nobis.",headerSubtitle:"Modal Subtitle Aut vitae neque consequatur. Consequuntur natus sint ad.",headerFeatureIcon:"FA_CIRCLE_EXCLAMATION",headerFeatureIconColor:n.NEUTRAL,footerPrimaryButtonText:"Primary M",footerPrimaryButtonIcon:null,footerPrimaryButtonState:t.DEFAULT,footerSecondaryButtonText:"Secondary M",footerSecondaryButtonIcon:null,footerSecondaryButtonState:t.DEFAULT},r=i.bind({});r.argTypes=u;r.args=B;var l,c,s;e.parameters={...e.parameters,docs:{...(l=e.parameters)==null?void 0:l.docs,source:{originalSource:`args => ({
|
|
2
|
+
components: {
|
|
3
|
+
ModalDialog
|
|
4
|
+
},
|
|
5
|
+
setup() {
|
|
6
|
+
return args;
|
|
7
|
+
},
|
|
8
|
+
template: '<modal-dialog :headerFeatureIcon="ICONS[headerFeatureIcon]" :danger="danger" ' + ':headerTitle="headerTitle" :headerSubtitle="headerSubtitle" :headerFeatureIconColor="headerFeatureIconColor" ' + ':footerPrimaryButtonText="footerPrimaryButtonText" :footerPrimaryButtonIcon="footerPrimaryButtonIcon" :footerPrimaryButtonState="footerPrimaryButtonState" ' + ':headerImage="headerImage" ' + ':footerSecondaryButtonText="footerSecondaryButtonText" :footerSecondaryButtonIcon="footerSecondaryButtonIcon" :footerSecondaryButtonState="footerSecondaryButtonState">' + '<div v-html="defaultSlot" />' + '<template v-if="rightActionsSlot" #rightActions><div style="display: inline-flex;" v-html="rightActionsSlot" /></template>' + '</modal-dialog>',
|
|
9
|
+
data() {
|
|
10
|
+
return {
|
|
11
|
+
ICONS: Object.freeze(ICONS),
|
|
12
|
+
BUTTON_STATES: Object.freeze(BUTTON_STATES)
|
|
13
|
+
};
|
|
14
|
+
}
|
|
15
|
+
})`,...(s=(c=e.parameters)==null?void 0:c.docs)==null?void 0:s.source}}};var d,m,S;o.parameters={...o.parameters,docs:{...(d=o.parameters)==null?void 0:d.docs,source:{originalSource:`args => ({
|
|
16
|
+
components: {
|
|
17
|
+
ModalDialog
|
|
18
|
+
},
|
|
19
|
+
setup() {
|
|
20
|
+
return args;
|
|
21
|
+
},
|
|
22
|
+
template: '<modal-dialog :headerFeatureIcon="ICONS[headerFeatureIcon]" :danger="danger" ' + ':headerTitle="headerTitle" :headerSubtitle="headerSubtitle" :headerFeatureIconColor="headerFeatureIconColor" ' + ':footerPrimaryButtonText="footerPrimaryButtonText" :footerPrimaryButtonIcon="footerPrimaryButtonIcon" :footerPrimaryButtonState="footerPrimaryButtonState" ' + ':headerImage="headerImage" ' + ':footerSecondaryButtonText="footerSecondaryButtonText" :footerSecondaryButtonIcon="footerSecondaryButtonIcon" :footerSecondaryButtonState="footerSecondaryButtonState">' + '<div v-html="defaultSlot" />' + '<template v-if="rightActionsSlot" #rightActions><div style="display: inline-flex;" v-html="rightActionsSlot" /></template>' + '</modal-dialog>',
|
|
23
|
+
data() {
|
|
24
|
+
return {
|
|
25
|
+
ICONS: Object.freeze(ICONS),
|
|
26
|
+
BUTTON_STATES: Object.freeze(BUTTON_STATES)
|
|
27
|
+
};
|
|
28
|
+
}
|
|
29
|
+
})`,...(S=(m=o.parameters)==null?void 0:m.docs)==null?void 0:S.source}}};var f,y,p;r.parameters={...r.parameters,docs:{...(f=r.parameters)==null?void 0:f.docs,source:{originalSource:`args => ({
|
|
30
|
+
components: {
|
|
31
|
+
ModalDialog
|
|
32
|
+
},
|
|
33
|
+
setup() {
|
|
34
|
+
return args;
|
|
35
|
+
},
|
|
36
|
+
template: '<modal-dialog :headerFeatureIcon="ICONS[headerFeatureIcon]" :danger="danger" ' + ':headerTitle="headerTitle" :headerSubtitle="headerSubtitle" :headerFeatureIconColor="headerFeatureIconColor" ' + ':footerPrimaryButtonText="footerPrimaryButtonText" :footerPrimaryButtonIcon="footerPrimaryButtonIcon" :footerPrimaryButtonState="footerPrimaryButtonState" ' + ':headerImage="headerImage" ' + ':footerSecondaryButtonText="footerSecondaryButtonText" :footerSecondaryButtonIcon="footerSecondaryButtonIcon" :footerSecondaryButtonState="footerSecondaryButtonState">' + '<div v-html="defaultSlot" />' + '<template v-if="rightActionsSlot" #rightActions><div style="display: inline-flex;" v-html="rightActionsSlot" /></template>' + '</modal-dialog>',
|
|
37
|
+
data() {
|
|
38
|
+
return {
|
|
39
|
+
ICONS: Object.freeze(ICONS),
|
|
40
|
+
BUTTON_STATES: Object.freeze(BUTTON_STATES)
|
|
41
|
+
};
|
|
42
|
+
}
|
|
43
|
+
})`,...(p=(y=r.parameters)==null?void 0:y.docs)==null?void 0:p.source}}};const N=["Interactive","Danger","WithImage"];export{o as Danger,e as Interactive,r as WithImage,N as __namedExportsOrder,q as default};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{h as n,R as _,a as l,b as f,c,d as m,e as d,f as p}from"./GroupRichListItem-BvLfDPjh.js";import{I as s,c as g}from"./Icon-DLflpryl.js";import"./Avatar-BfMssJty.js";import"./Badge-D6TIWhxN.js";import"./BadgeScore-Cb9gd56c.js";import"./Banner-Bc-GaNQo.js";import"./Button-DTM9D6tQ.js";import"./ToggleButton-B2K48hG5.js";import"./Card-KSW_Q55y.js";import"./CardExpandable-DZ5qdj_Y.js";import"./DatePicker-
|
|
1
|
+
import{h as n,R as _,a as l,b as f,c,d as m,e as d,f as p}from"./GroupRichListItem-BvLfDPjh.js";import{I as s,c as g}from"./Icon-DLflpryl.js";import"./Avatar-BfMssJty.js";import"./Badge-D6TIWhxN.js";import"./BadgeScore-Cb9gd56c.js";import"./Banner-Bc-GaNQo.js";import"./Button-DTM9D6tQ.js";import"./ToggleButton-B2K48hG5.js";import"./Card-KSW_Q55y.js";import"./CardExpandable-DZ5qdj_Y.js";import"./DatePicker-MzMuc8fk.js";import"./DateRangePicker-D1PXeiHM.js";import"./Divider-9o-i_zKL.js";import"./FeatureIcon-JKiMnOvS.js";import"./IconButton-jIBOZaL6.js";import"./string-BUK4JyUO.js";import"./Modal-BNfy5y5G.js";import"./ModalDialog-C3_bDqrz.js";import"./NumberInCircle-DnPE2szs.js";import"./TabItem-DHcL0LcY.js";import"./Tile-C-0-l9Zd.js";import"./Toast-CiehGYa_.js";import"./AccessStatus-BdbWaHQP.js";import"./BlockadeStatus-BAO7ZSMR.js";import"./SurveyToggle-DBYCLMcd.js";import"./SurveyQuestionScale-DECnKlLN.js";import"./SurveyQuestionOpenEnded-Cc4cKSQ6.js";import"./SectionHeader-CoK_3gzJ.js";import"./PageHeader-DkHlb7_P.js";import"./SectionTitle-DLcFKzRH.js";import"./Drawer-ClrSDwUZ.js";import"./DrawerContent-D6Bl5GA-.js";import"./DrawerDivider-DMhjaSPk.js";import"./DrawerHeader-Wv_4-y80.js";import"./DrawerListItem-CIEm2YIc.js";import"./DrawerListItemGroup-B5XadRVV.js";import"./DrawerTile-DMIeqQC0.js";import"./DrawerSection-Di_ofHSH.js";import"./OutlineItem-k4o2gAd_.js";import"./OutlineDivider-UaRb6wKt.js";import"./OutlineSectionHeader-LGOAi424.js";import"./Chip-C-ttDDPa.js";import"./CounterToggle-DleD8vtl.js";import"./SelectList-B323Y2el.js";import"./SelectListItem-BfrNC0lN.js";import"./SelectListItemDivider-lDLIwtP8.js";import"./SelectListItemToggle-DVeIonzN.js";import"./SelectListItemTile-VUKxo3Ph.js";import"./SelectListSectionTitle-BFbrwNgw.js";import"./SelectionTile-jvSsuAJD.js";import"./LoadingBar-Dc_eLNsl.js";import"./PopOver-BtWRUcqR.js";import"./Dropdown-CYFZ3OvV.js";import"./ProgressBar-bPl8V4zL.js";import"./ProgressDonutChart-B42JFhmC.js";import"./IconText-D16p7ozy.js";import"./Pagination-TTyuIJ3s.js";import"./OverlayHeader-CM0t7lPr.js";import"./Well-Cuj5KPHL.js";import"./ThreeColumnLayout-DXA1815_.js";import"./BasicRichListItem-D0Wk0hG3.js";import"./Switch-CJmb9Pod.js";import"./TextGroup-AUUBIFJZ.js";import"./Tooltip-DZi9yXjr.js";import{I as y}from"./Image-Dbv2u4ta.js";import"./Skeleton-DhyJ4ZKG.js";import{w as x}from"./decorator-B_8W69Nd.js";import"./vue.esm-bundler-DD4BrEtS.js";import"./Checkbox-yVtwyPI-.js";import"./SelectionControl-JHBohZVS.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./iframe-bbt6wJ1S.js";import"../sb-preview/runtime.js";import"./device-9fgosCm4.js";import"./user-_JB5aHqq.js";import"./vue-popper-DoPHnofs.js";import"./_commonjsHelpers-CDR5Xrri.js";import"./v4-CwV2VaSl.js";const{useArgs:S}=__STORYBOOK_MODULE_PREVIEW_API__,Xe={title:"Components/RichList/RichListItem",component:n,decorators:[e=>({components:{story:e},template:"<div style='display: flex;padding: 16px;'><story /></div>"}),x]},O=(e,a={})=>(e.argTypes={type:{options:Object.values(p),control:"select"},size:{options:Object.values(d),control:"select"},layout:{options:Object.values(m),control:{type:"select"}},state:{options:Object.values(c),control:"select"},iconColor:{options:Object.values(g),control:"select"},borderColor:{options:[null,...Object.values(f)],control:"select"},icon:{options:[null,...Object.keys(s)],control:"select"},iconColorHex:{control:"text"},borderColorHex:{control:"text"},content:{control:"text"},metadata:{control:"text"},actions:{control:"text"},draggableIconClassName:{control:"text"},backgroundColor:{options:[null,...Object.values(l)],control:"select"},elevation:{options:[null,...Object.values(_)],control:"select"}},e.args={size:d.MEDIUM,type:p.DEFAULT,layout:m.HORIZONTAL,backgroundColor:l.NEUTRAL,elevation:null,isDimmed:!1,isDraggable:!0,hasDraggableHandler:!0,icon:null,iconColor:g.NEUTRAL_WEAK,iconColorHex:"",hasActionsSlotDivider:!0,isSelectable:!0,isSelected:!0,borderColor:null,borderColorHex:"",state:c.DEFAULT,isInteractive:!0,draggableIconClassName:"draggableIconClassName-1",content:"Content Slot",metadata:"Metadata Slot",actions:"ACS",...a},e.parameters={actions:{handles:["icon-click","click","update:is-selected"]},layout:"fullscreen",design:{type:"figma",url:"https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?type=design&node-id=8507-129603&mode=design&t=dC5vBzU9RlP1j7G2-4"}},e),D=e=>{const[a,i]=S();return{components:{RichListItem:n},setup(){return e},data(){return{ICONS:Object.freeze(s)}},methods:{updateIsSelected(r){i({isSelected:r})}},template:`
|
|
2
2
|
<rich-list-item
|
|
3
3
|
:size="size"
|
|
4
4
|
:type="type"
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./Checkbox-yVtwyPI-.js","./vue.esm-bundler-DD4BrEtS.js","./SelectionControl-JHBohZVS.js","./Icon-DLflpryl.js","./_plugin-vue_export-helper-DlAUqK2U.js","./RadioButton-CocBbkKQ.js"])))=>i.map(i=>d[i]);
|
|
2
|
-
import{_ as d}from"./iframe-
|
|
2
|
+
import{_ as d}from"./iframe-bbt6wJ1S.js";import{d as L,y as u,t as O,c as r,a as i,b as c,g as p,z as m,k as T,n as _,r as f,o as n}from"./vue.esm-bundler-DD4BrEtS.js";import{a as C,b as N,I as E}from"./Icon-DLflpryl.js";import{b as A,S as o,a as g}from"./SelectionControl-JHBohZVS.js";import{_ as D}from"./_plugin-vue_export-helper-DlAUqK2U.js";const a={RADIO_BUTTON:"radioButton",CHECKBOX:"checkbox"},t={DEFAULT:"default",DISABLED:"disabled",LOADING:"loading"},y={[t.DEFAULT]:o.DEFAULT,[t.LOADING]:o.LOADING,[t.DISABLED]:o.DISABLED},I=L({name:"SelectionTile",components:{SelectionControl:A,Icon:C,Checkbox:u(()=>d(()=>import("./Checkbox-yVtwyPI-.js").then(e=>e.b),__vite__mapDeps([0,1,2,3,4]),import.meta.url)),RadioButton:u(()=>d(()=>import("./RadioButton-CocBbkKQ.js").then(e=>e.c),__vite__mapDeps([5,1,2,3,4]),import.meta.url))},props:{type:{type:String,default:a.RADIO_BUTTON,validator(e){return Object.values(a).includes(e)}},title:{type:String,required:!0},supportingText:{type:String,default:null},icon:{type:Object,default:null,validator(e){return Object.values(E).includes(O(e))}},isSelected:{type:Boolean,default:!1},state:{type:String,default:t.DEFAULT,validator(e){return Object.values(t).includes(e)}}},emits:["update:is-selected","icon-click"],data(){return{ICONS:Object.freeze(E),ICON_SIZES:Object.freeze(N),SELECTION_CONTROL_SIZE:Object.freeze(g),SELECTION_TILE_STATE:Object.freeze(t),SELECTION_TILE_TYPE:Object.freeze(a),SELECTION_CONTROL_STATE_MAP:y,inputIsFocused:!1}},computed:{isLoading(){return this.state===t.LOADING}},methods:{updateIsSelected(e){this.isLoading||this.state===t.DISABLED||this.$emit("update:is-selected",e)},onIconClick(e){this.isLoading||(e.stopPropagation(),this.$emit("icon-click"))},onInputFocus(){this.inputIsFocused=!0},onInputBlur(){this.inputIsFocused=!1}}}),b={class:"ds-selectionTile__wrapper"},v={class:"ds-selectionTile__textWrapper"},B={class:"ds-selectionTile__title"},k={key:0,class:"ds-selectionTile__supportingText"};function h(e,s,R,F,j,z){const S=f("icon");return n(),r("div",{class:_(["ds-selectionTile",[{"-ds-selected":e.isSelected,"-ds-default":e.state===e.SELECTION_TILE_STATE.DEFAULT,"-ds-disabled":e.state===e.SELECTION_TILE_STATE.DISABLED,"-ds-loading":e.isLoading,"-ds-focused":e.inputIsFocused&&!e.isLoading}]]),onClick:s[1]||(s[1]=l=>e.updateIsSelected(!e.isSelected))},[i("div",b,[(n(),c(m(e.type===e.SELECTION_TILE_TYPE.RADIO_BUTTON?"radio-button":"checkbox"),{size:e.SELECTION_CONTROL_SIZE.X_SMALL,"is-selected":e.isSelected,state:e.SELECTION_CONTROL_STATE_MAP[e.state],"onUpdate:isSelected":s[0]||(s[0]=l=>e.updateIsSelected(l)),"onInput:focus":e.onInputFocus,"onInput:blur":e.onInputBlur},null,40,["size","is-selected","state","onInput:focus","onInput:blur"])),i("div",v,[i("div",B,T(e.title),1),e.supportingText?(n(),r("div",k,T(e.supportingText),1)):p("",!0)])]),e.icon||e.isLoading?(n(),c(S,{key:0,class:"ds-selectionTile__icon",icon:e.isLoading?e.ICONS.FAD_SPINNER_THIRD:e.icon,size:e.ICON_SIZES.X_SMALL,spinning:e.isLoading,onClick:e.onIconClick},null,8,["icon","size","spinning","onClick"])):p("",!0)],2)}const G=D(I,[["render",h],["__scopeId","data-v-e2d48501"]]);I.__docgenInfo={displayName:"SelectionTile",exportName:"default",description:"",tags:{},props:[{name:"type",type:{name:"SelectionTileType"},defaultValue:{func:!1,value:"SELECTION_TILE_TYPE.RADIO_BUTTON"}},{name:"title",type:{name:"string"},required:!0},{name:"supportingText",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"icon",type:{name:"object"},defaultValue:{func:!1,value:"null"}},{name:"isSelected",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"state",type:{name:"SelectionTileState"},defaultValue:{func:!1,value:"SELECTION_TILE_STATE.DEFAULT"}}],events:[{name:"update:is-selected",type:{names:["undefined"]}},{name:"icon-click"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/SelectionTile/SelectionTile.vue"]};export{G as S,t as a,a as b};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{S as i,a as c,b as l}from"./SelectionTile-
|
|
1
|
+
import{S as i,a as c,b as l}from"./SelectionTile-jvSsuAJD.js";import{I as r}from"./Icon-DLflpryl.js";import{w as d}from"./decorator-B_8W69Nd.js";import"./iframe-bbt6wJ1S.js";import"../sb-preview/runtime.js";import"./vue.esm-bundler-DD4BrEtS.js";import"./SelectionControl-JHBohZVS.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./v4-CwV2VaSl.js";const{useArgs:m}=__STORYBOOK_MODULE_PREVIEW_API__,k={title:"Components/SelectionTile",component:i,decorators:[t=>({components:{story:t},template:"<div style='display: flex; max-width: 300px;'><story /></div>"}),d]},S=t=>{const[u,p]=m();return{components:{SelectionTile:i},setup(){return t},methods:{onIsSelectedUpdated(a){p({isSelected:a})},onIconClick(){alert("Klik w ikonę")}},data(){return{ICONS:Object.freeze(r)}},template:`
|
|
2
2
|
<SelectionTile
|
|
3
3
|
:title="title"
|
|
4
4
|
:supporting-text="supportingText"
|