@bethinkpl/design-system 26.5.0 → 26.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/dist/design-system.umd.cjs +17 -17
  2. package/dist/design-system.umd.cjs.map +1 -1
  3. package/dist/lib/js/components/DatePickers/DatePicker/DatePicker.composables.d.ts +1 -1
  4. package/dist/lib/js/components/DatePickers/DatePicker/DatePicker.vue.d.ts +23 -1
  5. package/dist/lib/js/components/DatePickers/DateRangePicker/DateRangePicker.vue.d.ts +4 -1
  6. package/dist/lib/js/components/Drawer/DrawerTile/DrawerTile.vue.d.ts +26 -0
  7. package/dist/lib/js/components/SelectList/SelectListItemTile/SelectListItemTile.vue.d.ts +26 -0
  8. package/dist/lib/js/components/Tile/Tile.consts.d.ts +5 -0
  9. package/dist/lib/js/components/Tile/Tile.shared.d.ts +6 -1
  10. package/dist/lib/js/components/Tile/Tile.vue.d.ts +15 -0
  11. package/docs/assets/{BasicRichListItem.stories-DtiXHviM.js → BasicRichListItem.stories-CW9os382.js} +1 -1
  12. package/docs/assets/{Color-ERTF36HU-BZlibAx3.js → Color-ERTF36HU-CqJ5SSs8.js} +1 -1
  13. package/docs/assets/DatePicker-Br-Dxnyn.js +2 -0
  14. package/docs/assets/DatePicker.stories-C4sN46Ws.js +175 -0
  15. package/docs/assets/DateRangePicker-B2xmoGPO.js +1 -0
  16. package/docs/assets/{DateRangePicker.stories-BcGHtCgE.js → DateRangePicker.stories-DGh5m4TF.js} +1 -1
  17. package/docs/assets/{DocsRenderer-CFRXHY34-Bw028q-m.js → DocsRenderer-CFRXHY34-CemqquOQ.js} +5 -5
  18. package/docs/assets/{DrawerTile-DRd90aW_.js → DrawerTile-OeT5gefI.js} +1 -1
  19. package/docs/assets/{DrawerTile.stories-B8jCAcpg.js → DrawerTile.stories-nBKWobdB.js} +1 -1
  20. package/docs/assets/{RichListItem.stories-WK5gz3vk.js → RichListItem.stories-B_DlwcQo.js} +1 -1
  21. package/docs/assets/{SelectListItemTile-CziQ20sD.js → SelectListItemTile-ohFw-wM4.js} +1 -1
  22. package/docs/assets/{SelectListItemTile.stories-jXlPEopR.js → SelectListItemTile.stories-BRCqpIYj.js} +1 -1
  23. package/docs/assets/{SelectionTile-C0MW2ZUn.js → SelectionTile-CjfV3f7H.js} +1 -1
  24. package/docs/assets/{SelectionTile.stories-mIPf1nUR.js → SelectionTile.stories-PT6dhdE2.js} +1 -1
  25. package/docs/assets/Tile-DjRk5xHI.js +1 -0
  26. package/docs/assets/{Tile.sb.shared-BZ0VDle3.js → Tile.sb.shared-Dt0Nhl_4.js} +1 -1
  27. package/docs/assets/{Tile.stories-LYYOeyyn.js → Tile.stories-lM4we8lW.js} +1 -1
  28. package/docs/assets/{iframe-Di5TkTnR.js → iframe-OBly2w25.js} +5 -5
  29. package/docs/assets/{index-SuPsQGgx.js → index-BX4u4pqi.js} +1 -1
  30. package/docs/assets/{index-Dyq6sUoy.js → index-DRNPKjaN.js} +1 -1
  31. package/docs/assets/{preview-BCrXVRij.js → preview-BA4xsxRI.js} +2 -2
  32. package/docs/assets/{preview-BRlPhK-p.js → preview-ByrBU2E6.js} +1 -1
  33. package/docs/iframe.html +1 -1
  34. package/docs/index.json +1 -1
  35. package/docs/project.json +1 -1
  36. package/lib/js/components/DatePickers/DatePicker/DatePicker.composables.ts +22 -1
  37. package/lib/js/components/DatePickers/DatePicker/DatePicker.stories.ts +26 -1
  38. package/lib/js/components/DatePickers/DatePicker/DatePicker.vue +19 -4
  39. package/lib/js/components/DatePickers/DateRangePicker/DateRangePicker.vue +15 -2
  40. package/lib/js/components/Tile/Tile.consts.ts +7 -0
  41. package/lib/js/components/Tile/Tile.shared.ts +16 -1
  42. package/lib/js/components/Tile/Tile.vue +21 -3
  43. package/package.json +1 -1
  44. package/.yarnrc.yml +0 -1
  45. package/docs/assets/DatePicker-DfNJw-NT.js +0 -2
  46. package/docs/assets/DatePicker.stories-CIo6kOIM.js +0 -95
  47. package/docs/assets/DateRangePicker-L4cDgxmU.js +0 -1
  48. package/docs/assets/Tile-DWASCVea.js +0 -1
@@ -1,2 +0,0 @@
1
- const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./pl-Cy1N1vsP.js","./_commonjsHelpers-Chg3vePA.js"])))=>i.map(i=>d[i]);
2
- import{d as C,t as b,r as O,o as a,c as s,a as n,j as T,g as i,b as P,n as p,F as L,k as N,q as h,C as F,w as M,f as U}from"./vue.esm-bundler-CWlcb7ht.js";import{c as W,b as r}from"./Tile-DWASCVea.js";import{a as G,I as D,b as j}from"./Icon-ChGia3n4.js";import{_ as B}from"./_plugin-vue_export-helper-DlAUqK2U.js";import{_ as g}from"./iframe-Di5TkTnR.js";const d={NEUTRAL_WEAK:"neutralWeak",NEUTRAL:"neutral",WARNING:"warning",DANGER:"danger"},E={DEFAULT:"default",DISABLED:"disabled",LOADING:"loading"},u={TOP:"top",TOP_LEFT:"top-left",TOP_RIGHT:"top-right",BOTTOM:"bottom",BOTTOM_LEFT:"bottom-left",BOTTOM_RIGHT:"bottom-right"},R={BOX:"box",TILE:"tile"},S={[u.BOTTOM_LEFT]:"below left",[u.BOTTOM_RIGHT]:"below right",[u.BOTTOM]:"below",[u.TOP_LEFT]:"above left",[u.TOP_RIGHT]:"above right",[u.TOP]:"above"};function H(e){return e.toLocaleDateString(void 0,{dateStyle:void 0,timeStyle:void 0,weekday:"long"})}function z(e){return e.toLocaleDateString(void 0,{dateStyle:"medium",timeStyle:void 0})}function v(e){return e.toLocaleDateString(void 0,{month:"short",day:"2-digit"})}const w=C({name:"DatePickerBox",components:{DsIcon:G},props:{isInteractive:{type:Boolean,default:!0},placeholder:{type:String,default:"Ustaw"},startDate:{type:Date,default:null},endDate:{type:Date,default:null},startIcon:{type:Object,default:null,validate:e=>e===null||Object.values(D).includes(b(e))},endIcon:{type:Object,default:null,validate:e=>e===null||Object.values(D).includes(b(e))},areIconsHiddenOnMobile:{type:Boolean,default:!1},state:{type:String||null,default:E.DEFAULT},color:{type:String,default:d.NEUTRAL_WEAK},startDateEyebrowText:{type:String,default:""},endDateEyebrowText:{type:String,default:""},isOpen:{type:Boolean,default:!1}},data(){return{ICONS:Object.freeze(D),ICON_SIZES:Object.freeze(j),DATE_PICKER_STATES:Object.freeze(E),DATE_PICKER_COLORS:Object.freeze(d)}},computed:{startDateText(){return this.startDate?v(this.startDate):this.placeholder},endDateText(){return v(this.endDate)}}}),$={class:"ds-datePickerBox__dateWrapper"},Y={key:0,class:"ds-datePickerBox__eyebrow"},X={class:"ds-datePickerBox__date"},Z={class:"ds-datePickerBox__dateText"},q={class:"ds-datePickerBox__dateWrapper"},J={key:0,class:"ds-datePickerBox__eyebrow"},Q={class:"ds-datePickerBox__date"},x={class:"ds-datePickerBox__dateText"},ee={key:1,class:"ds-datePickerBox__loader"};function te(e,c,o,_,t,f){const l=O("ds-icon");return a(),s("div",{class:p(["ds-datePickerBox",{"-ds-disabled":e.state===e.DATE_PICKER_STATES.DISABLED,"-ds-loading":e.state===e.DATE_PICKER_STATES.LOADING,"-ds-interactive":e.isInteractive,"-ds-warning":e.color===e.DATE_PICKER_COLORS.WARNING,"-ds-neutralWeak":e.DATE_PICKER_COLORS.NEUTRAL_WEAK===e.color,"-ds-neutral":e.DATE_PICKER_COLORS.NEUTRAL===e.color,"-ds-danger":e.color===e.DATE_PICKER_COLORS.DANGER,"-ds-isOpen":e.isOpen}])},[n("div",{class:p(["ds-datePickerBox__widthWrapper",{"-ds-has-icon":e.startIcon,"-ds-iconHiddenOnMobile":e.areIconsHiddenOnMobile}])},[n("div",$,[e.startDateEyebrowText?(a(),s("span",Y,T(e.startDateEyebrowText),1)):i("",!0),n("div",X,[e.startIcon?(a(),P(l,{key:0,class:p(["ds-datePickerBox__icon",{"-ds-hiddenOnMobile":e.areIconsHiddenOnMobile}]),icon:e.startIcon,size:e.ICON_SIZES.XX_SMALL},null,8,["class","icon","size"])):i("",!0),n("span",Z,T(e.startDateText),1)])])],2),e.startDate&&e.endDate?(a(),s(L,{key:0},[c[0]||(c[0]=n("span",{class:"ds-datePickerBox__separator"},"–",-1)),n("div",{class:p(["ds-datePickerBox__widthWrapper -ds-justify-to-end",{"-ds-has-icon":e.endIcon,"-ds-iconHiddenOnMobile":e.areIconsHiddenOnMobile}])},[n("div",q,[e.endDateEyebrowText?(a(),s("span",J,T(e.endDateEyebrowText),1)):i("",!0),n("div",Q,[e.endIcon?(a(),P(l,{key:0,class:p(["ds-datePickerBox__icon",{"-ds-hiddenOnMobile":e.areIconsHiddenOnMobile}]),icon:e.endIcon,size:e.ICON_SIZES.XX_SMALL},null,8,["class","icon","size"])):i("",!0),n("span",x,T(e.endDateText),1)])])],2)],64)):i("",!0),e.state===e.DATE_PICKER_STATES.LOADING?(a(),s("div",ee,[N(l,{icon:e.ICONS.FAD_SPINNER_THIRD,size:e.ICON_SIZES.X_SMALL,spinning:""},null,8,["icon","size"])])):i("",!0)],2)}const ae=B(w,[["render",te],["__scopeId","data-v-12bbb912"]]);w.__docgenInfo={displayName:"DatePickerBox",exportName:"default",description:"",tags:{},props:[{name:"isInteractive",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"placeholder",type:{name:"string"},defaultValue:{func:!1,value:"'Ustaw'"}},{name:"startDate",type:{name:"date"},defaultValue:{func:!1,value:"null"}},{name:"endDate",type:{name:"date"},defaultValue:{func:!1,value:"null"}},{name:"startIcon",type:{name:"object"},defaultValue:{func:!1,value:"null"}},{name:"endIcon",type:{name:"object"},defaultValue:{func:!1,value:"null"}},{name:"areIconsHiddenOnMobile",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"state",type:{name:"(String as PropType<DatePickerStates>) || null"},defaultValue:{func:!1,value:"DATE_PICKER_STATES.DEFAULT"}},{name:"color",type:{name:"DatePickerColors"},defaultValue:{func:!1,value:"DATE_PICKER_COLORS.NEUTRAL_WEAK"}},{name:"startDateEyebrowText",type:{name:"string"},defaultValue:{func:!1,value:"''"}},{name:"endDateEyebrowText",type:{name:"string"},defaultValue:{func:!1,value:"''"}},{name:"isOpen",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/DatePickers/DatePickerBox/DatePickerBox.vue"]};const ne=e=>e.charAt(0).toUpperCase()+e.slice(1);let A=null,k;function se({props:e,onChange:c,defaultDates:o,mode:_="single"}){let t=null;const f=h(!1),l=async(m,y)=>{if(!t){if(!A)try{A=(await g(async()=>{const{default:I}=await import("./index-CBmJdl9t.js");return{default:I}},[],import.meta.url)).default,k=(await g(async()=>{const{Polish:I}=await import("./pl-Cy1N1vsP.js").then(V=>V.p);return{Polish:I}},__vite__mapDeps([0,1]),import.meta.url)).Polish}catch(I){console.error("Failed to load flatpickr",I);return}return t=A(m,{mode:_,locale:k,disableMobile:!0,positionElement:y,ignoredFocusElements:[y],position:S[e.calendarPosition],defaultDate:o,disable:e.disableDates,minDate:e.minDate,maxDate:e.maxDate,onClose:[()=>{f.value=!1}],onOpen:[()=>{f.value=!0}],onChange:c}),t}};return F(()=>{t==null||t.destroy(),t=null}),M([()=>e.calendarPosition,()=>e.minDate,()=>e.maxDate,()=>e.disableDates,()=>o],()=>{t==null||t.set({position:S[e.calendarPosition],defaultDate:o,disable:e.disableDates,minDate:e.minDate,maxDate:e.maxDate})},{flush:"post"}),{datePicker:t,createDatePicker:l,isOpen:f,toggle:()=>{t==null||t.toggle()}}}const K=C({name:"DatePicker",components:{DsTile:W,DatePickerBox:ae},props:{triggerType:{type:String,default:R.TILE},isInteractive:{type:Boolean,default:!0},placeholder:{type:String,default:"Wybierz datę"},date:{type:Date,default:null},additionalText:{type:String,default:""},helpMessage:{type:String,default:null},label:{type:String,default:""},isLabelUppercase:{type:Boolean,default:!1},icon:{type:[Object,null],default:D.FA_CALENDAR_DAY,validator(e){return e===null||Object.values(D).includes(b(e))}},isIconHiddenOnMobile:{type:Boolean,default:!1},errorMessage:{type:String,default:null},state:{type:String,default:E.DEFAULT},color:{type:String,default:d.NEUTRAL_WEAK},calendarPosition:{type:String,default:u.BOTTOM_LEFT},disableDates:{type:Array,default:()=>[]},minDate:{type:Date,default:null},maxDate:{type:Date,default:null}},emits:{"update:date":e=>!0},setup(e,{emit:c}){const o=h(),_=h(),t=y=>{c("update:date",y[0])},{isOpen:f,toggle:l,createDatePicker:m}=se({props:e,onChange:t,defaultDates:e.date,mode:"single"});return M([()=>e.isInteractive,()=>e.state],async()=>{e.isInteractive&&e.state===E.DEFAULT&&await m(o.value,_.value)}),{flatpickrInputRef:o,datePickerRef:_,isOpen:f,toggleDatePicker:l,createDatePicker:m,DATE_PICKER_CALENDAR_POSITIONS:Object.freeze(u),DATE_PICKER_COLORS:Object.freeze(d),DATE_PICKER_STATES:Object.freeze(E),DATE_PICKER_TRIGGER_TYPES:Object.freeze(R)}},computed:{borderColor(){return{[d.NEUTRAL]:this.isInteractive?r.PRIMARY:r.NEUTRAL_WEAK,[d.NEUTRAL_WEAK]:this.isInteractive?r.PRIMARY:r.NEUTRAL_WEAK,[d.DANGER]:this.isInteractive?r.DANGER:r.DANGER_WEAK,[d.WARNING]:this.isInteractive?r.WARNING:r.WARNING_WEAK}[this.color]},eyebrowText(){return this.date?ne(H(this.date)):""},text(){return this.date?z(this.date):this.placeholder},tileIcon(){return this.additionalText||!this.icon?null:this.isOpen?D.FA_CHEVRON_UP:this.icon},showErrorMessage(){return this.errorMessage!==null},showHelpMessage(){return this.helpMessage!==null}},async mounted(){this.isInteractive&&this.state===E.DEFAULT&&await this.createDatePicker(this.flatpickrInputRef,this.datePickerRef)},methods:{toggle(){this.isInteractive&&this.state===E.DEFAULT&&this.toggleDatePicker()}}}),le={class:"ds-datePicker__labelWrapper"},ie={key:2,class:"ds-datePicker__errorMessage"},oe={key:3,class:"ds-datePicker__helpMessage"},re={ref:"flatpickrInputRef",class:"ds-datePicker__hiddenInput"};function de(e,c,o,_,t,f){const l=O("ds-tile"),m=O("date-picker-box");return a(),s("div",{ref:"datePickerRef",class:p(["ds-datePicker",{"-ds-box":e.triggerType===e.DATE_PICKER_TRIGGER_TYPES.BOX}])},[e.triggerType===e.DATE_PICKER_TRIGGER_TYPES.TILE?(a(),s(L,{key:0},[n("div",le,[e.label?(a(),s("span",{key:0,class:p(["ds-datePicker__label",{"-ds-isUppercase":e.isLabelUppercase,"-ds-disabled":e.state===e.DATE_PICKER_STATES.DISABLED}])},T(e.label),3)):i("",!0),e.$slots.default?U(e.$slots,"default",{key:1},void 0,!0):i("",!0)]),N(l,{class:"ds-datePicker__tile",text:e.text,interactive:e.isInteractive,"additional-text":e.additionalText,color:e.color,"border-color":e.borderColor,state:e.state,"icon-right":e.tileIcon,"is-icon-right-hidden-on-mobile":e.isIconHiddenOnMobile,"eyebrow-text":e.eyebrowText,"has-border":"",onClick:e.toggle},null,8,["text","interactive","additional-text","color","border-color","state","icon-right","is-icon-right-hidden-on-mobile","eyebrow-text","onClick"])],64)):(a(),P(m,{key:1,"is-interactive":e.isInteractive,placeholder:e.placeholder,"start-date":e.date,"start-icon":e.icon,"are-icons-hidden-on-mobile":e.isIconHiddenOnMobile,state:e.state,color:e.color,"start-date-eyebrow-text":e.eyebrowText,"is-open":e.isOpen,onClick:e.toggle},null,8,["is-interactive","placeholder","start-date","start-icon","are-icons-hidden-on-mobile","state","color","start-date-eyebrow-text","is-open","onClick"])),e.showErrorMessage?(a(),s("span",ie,T(e.errorMessage),1)):e.showHelpMessage?(a(),s("span",oe,T(e.helpMessage),1)):i("",!0),n("input",re,null,512)],2)}const Te=B(K,[["render",de],["__scopeId","data-v-024c47a1"]]);K.__docgenInfo={displayName:"DatePicker",exportName:"default",description:"",tags:{},props:[{name:"triggerType",type:{name:"DatePickerTriggerTypes"},defaultValue:{func:!1,value:"DATE_PICKER_TRIGGER_TYPES.TILE"}},{name:"isInteractive",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"placeholder",type:{name:"string"},defaultValue:{func:!1,value:"'Wybierz datę'"}},{name:"date",type:{name:"date"},defaultValue:{func:!1,value:"null"}},{name:"additionalText",type:{name:"string"},defaultValue:{func:!1,value:"''"}},{name:"helpMessage",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"label",type:{name:"string"},defaultValue:{func:!1,value:"''"}},{name:"isLabelUppercase",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"icon",type:{name:"IconItem | null"},defaultValue:{func:!1,value:"ICONS.FA_CALENDAR_DAY"}},{name:"isIconHiddenOnMobile",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"errorMessage",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"state",type:{name:"DatePickerStates"},defaultValue:{func:!1,value:"DATE_PICKER_STATES.DEFAULT"}},{name:"color",type:{name:"DatePickerColors"},defaultValue:{func:!1,value:"DATE_PICKER_COLORS.NEUTRAL_WEAK"}},{name:"calendarPosition",type:{name:"DatePickerCalendarPositions"},defaultValue:{func:!1,value:"DATE_PICKER_CALENDAR_POSITIONS.BOTTOM_LEFT"}},{name:"disableDates",type:{name:"Array<Date>"},defaultValue:{func:!0,value:"() => []"}},{name:"minDate",type:{name:"date"},defaultValue:{func:!1,value:"null"}},{name:"maxDate",type:{name:"date"},defaultValue:{func:!1,value:"null"}}],events:[{name:"update:date"}],slots:[{name:"default"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/DatePickers/DatePicker/DatePicker.vue"]};export{Te as D,R as a,d as b,u as c,E as d,ae as e,ne as f,se as i,H as l};
@@ -1,95 +0,0 @@
1
- import{D as o,a as l,b as d,c,d as p}from"./DatePicker-DfNJw-NT.js";import{I as D}from"./Icon-ChGia3n4.js";import{D as g}from"./Switch-BtYFtHgw.js";import"./vue.esm-bundler-CWlcb7ht.js";import"./Tile-DWASCVea.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./iframe-Di5TkTnR.js";import"../sb-preview/runtime.js";const{useArgs:b}=__STORYBOOK_MODULE_PREVIEW_API__,P={title:"Components/DatePickers/DatePicker",component:o},h=m=>{const[I,u]=b();return{components:{DatePicker:o,DsSwitch:g},setup(){return m},data(){return{ICONS:Object.freeze(D)}},methods:{updateDate(t){u({date:`${t.getFullYear()}-${t.getMonth()+1}-${t.getDate()}`})}},computed:{formattedDate(){return this.date?new Date(this.date):null},formattedMinDate(){return this.minDate?new Date(this.minDate):null},formattedMaxDate(){return this.maxDate?new Date(this.maxDate):null},formattedDisableDates(){return!this.disableDates||!this.disableDates.length?null:this.disableDates.map(t=>new Date(t))}},template:`
2
- <date-picker
3
- :trigger-type="triggerType"
4
- :is-interactive="isInteractive"
5
- :placeholder="placeholder"
6
- :date="formattedDate"
7
- :additional-text="additionalText"
8
- :helpMessage="helpMessage"
9
- :label="label"
10
- :is-label-uppercase="isLabelUppercase"
11
- :icon="icon ? ICONS[icon] : null"
12
- :is-icon-hidden-on-mobile="isIconHiddenOnMobile"
13
- :calendar-position="calendarPosition"
14
- :error-message="errorMessage"
15
- :state="state"
16
- :color="color"
17
- :disable-dates="formattedDisableDates"
18
- :min-date="formattedMinDate"
19
- :max-date="formattedMaxDate"
20
- @update:date="updateDate"
21
- >
22
- <ds-switch label-left="lewa" label-right="prawa" />
23
- </date-picker>`}},e=h.bind({}),a=Date.now(),n=864e5,f={triggerType:l.TILE,isInteractive:!0,color:d.NEUTRAL_WEAK,label:"Date picker",isLabelUppercase:!1,placeholder:"Wybierz datę",date:"",disableDates:[new Date(a+n*2).toISOString().slice(0,10)],minDate:new Date(a).toISOString().slice(0,10),maxDate:new Date(a+n*30).toISOString().slice(0,10),icon:"FA_CALENDAR_DAY",isIconHiddenOnMobile:!1,additionalText:"",helpMessage:null,errorMessage:null,calendarPosition:c.BOTTOM,state:p.DEFAULT},O={triggerType:{control:"select",options:Object.values(l)},date:{control:"text"},icon:{control:"select",options:[null,...Object.keys(D)]},calendarPosition:{control:"select",options:Object.values(c)},state:{control:"select",options:Object.values(p)},color:{control:"select",options:Object.values(d)},disableDates:{control:"object"}};e.argTypes=O;e.args=f;e.parameters={design:{type:"figma",url:"https://www.figma.com/design/03ABNCSDYWYDmOPJOBGM5l/INI-153-Planowanie-pracy-z-lekcjami?node-id=245-162031&t=g08nj70xhT9BZTpu-4"}};var r,s,i;e.parameters={...e.parameters,docs:{...(r=e.parameters)==null?void 0:r.docs,source:{originalSource:`args => {
24
- const [_, updateArgs] = useArgs();
25
- return {
26
- components: {
27
- DatePicker,
28
- DsSwitch
29
- },
30
- setup() {
31
- return args;
32
- },
33
- data() {
34
- return {
35
- ICONS: Object.freeze(ICONS)
36
- };
37
- },
38
- methods: {
39
- updateDate(date: Date) {
40
- updateArgs({
41
- date: \`\${date.getFullYear()}-\${date.getMonth() + 1}-\${date.getDate()}\`
42
- });
43
- }
44
- },
45
- computed: {
46
- formattedDate() {
47
- if (!this.date) {
48
- return null;
49
- }
50
- return new Date(this.date);
51
- },
52
- formattedMinDate() {
53
- if (!this.minDate) {
54
- return null;
55
- }
56
- return new Date(this.minDate);
57
- },
58
- formattedMaxDate() {
59
- if (!this.maxDate) {
60
- return null;
61
- }
62
- return new Date(this.maxDate);
63
- },
64
- formattedDisableDates() {
65
- if (!this.disableDates || !this.disableDates.length) {
66
- return null;
67
- }
68
- return this.disableDates.map(date => new Date(date));
69
- }
70
- },
71
- template: \`
72
- <date-picker
73
- :trigger-type="triggerType"
74
- :is-interactive="isInteractive"
75
- :placeholder="placeholder"
76
- :date="formattedDate"
77
- :additional-text="additionalText"
78
- :helpMessage="helpMessage"
79
- :label="label"
80
- :is-label-uppercase="isLabelUppercase"
81
- :icon="icon ? ICONS[icon] : null"
82
- :is-icon-hidden-on-mobile="isIconHiddenOnMobile"
83
- :calendar-position="calendarPosition"
84
- :error-message="errorMessage"
85
- :state="state"
86
- :color="color"
87
- :disable-dates="formattedDisableDates"
88
- :min-date="formattedMinDate"
89
- :max-date="formattedMaxDate"
90
- @update:date="updateDate"
91
- >
92
- <ds-switch label-left="lewa" label-right="prawa" />
93
- </date-picker>\`
94
- };
95
- }`,...(i=(s=e.parameters)==null?void 0:s.docs)==null?void 0:i.source}}};const C=["Interactive"];export{e as Interactive,C as __namedExportsOrder,P as default};
@@ -1 +0,0 @@
1
- import{e as A,c,d as t,b as f,i as T,a as g,f as D,l as p}from"./DatePicker-DfNJw-NT.js";import{I as a}from"./Icon-ChGia3n4.js";import{d as R,t as m,q as I,w as P,r as h,o as _,c as E,k,j as O,g as v,a as C}from"./vue.esm-bundler-CWlcb7ht.js";import{_ as b}from"./_plugin-vue_export-helper-DlAUqK2U.js";const y=R({name:"DateRangePicker",components:{DatePickerBox:A},props:{isInteractive:{type:Boolean,default:!1},placeholder:{type:String,default:"Wybierz datę"},startDate:{type:Date,default:null},endDate:{type:Date,default:null},startIcon:{type:[Object,null],default:a.FA_CALENDAR_DAY,validator(e){return e===null||(Object==null?void 0:Object.values(a).includes(m(e)))}},endIcon:{type:[Object,null],default:a.FA_CALENDAR_DAY,validator(e){return e===null||(Object==null?void 0:Object.values(a).includes(m(e)))}},areIconsHiddenOnMobile:{type:Boolean,default:!1},calendarPosition:{type:String,default:c.BOTTOM_LEFT},errorMessage:{type:String,default:""},state:{type:String||null,default:t.DEFAULT},color:{type:String,default:f.NEUTRAL_WEAK},disableDates:{type:Array,default:()=>[]},minDate:{type:Date,default:null},maxDate:{type:Date,default:null}},emits:{"update:date":e=>!0},setup(e,{emit:i}){const n=I(),s=I(),o=r=>{r.length===2&&i("update:date",{startDate:r[0],endDate:r[1]})},{isOpen:d,toggle:l,createDatePicker:u}=T({props:e,onChange:o,defaultDates:[e.startDate,e.endDate],mode:"range"});return P([()=>e.isInteractive,()=>e.state],async()=>{e.isInteractive&&e.state===t.DEFAULT&&await u(s.value,n.value)},{flush:"post"}),{dateRangePickerRef:n,flatpickrInputRef:s,isOpen:d,toggleDatePicker:l,createDatePicker:u,DATE_PICKER_CALENDAR_POSITIONS:Object.freeze(c),DATE_PICKER_COLORS:Object.freeze(f),DATE_PICKER_STATES:Object.freeze(t),DATE_PICKER_TRIGGER_TYPES:Object.freeze(g)}},computed:{endDateEyebrowText(){return!this.endDate||this.state===t.LOADING?"":D(p(this.endDate))},endDateIfDifferentThanStartDate(){return this.startDate&&this.endDate&&this.startDate.getTime()!==this.endDate.getTime()?this.endDate:null},eyebrowText(){return!this.startDate||this.state===t.LOADING?"":D(p(this.startDate))}},async mounted(){this.isInteractive&&this.state===t.DEFAULT&&await this.createDatePicker(this.flatpickrInputRef,this.dateRangePickerRef)},methods:{toggle(){this.isInteractive&&this.state===t.DEFAULT&&this.toggleDatePicker()}}}),S={ref:"dateRangePickerRef",class:"ds-dateRangePicker"},N={key:0,class:"ds-dateRangePicker__errorMessage"},L={ref:"flatpickrInputRef",class:"ds-dateRangePicker__hiddenInput"};function V(e,i,n,s,o,d){const l=h("date-picker-box");return _(),E("div",S,[k(l,{"is-interactive":e.isInteractive,placeholder:e.placeholder,"start-date":e.startDate,"end-date":e.endDateIfDifferentThanStartDate,"start-icon":e.startIcon,"end-icon":e.endIcon,"are-icons-hidden-on-mobile":e.areIconsHiddenOnMobile,state:e.state,color:e.color,"start-date-eyebrow-text":e.eyebrowText,"end-date-eyebrow-text":e.endDateEyebrowText,"is-open":e.isOpen,onClick:e.toggle},null,8,["is-interactive","placeholder","start-date","end-date","start-icon","end-icon","are-icons-hidden-on-mobile","state","color","start-date-eyebrow-text","end-date-eyebrow-text","is-open","onClick"]),e.errorMessage?(_(),E("span",N,O(e.errorMessage),1)):v("",!0),C("input",L,null,512)],512)}const M=b(y,[["render",V],["__scopeId","data-v-6749c480"]]);y.__docgenInfo={displayName:"DateRangePicker",exportName:"default",description:"",tags:{},props:[{name:"isInteractive",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"placeholder",type:{name:"string"},defaultValue:{func:!1,value:"'Wybierz datę'"}},{name:"startDate",type:{name:"date"},defaultValue:{func:!1,value:"null"}},{name:"endDate",type:{name:"date"},defaultValue:{func:!1,value:"null"}},{name:"startIcon",type:{name:"IconItem | null"},defaultValue:{func:!1,value:"ICONS.FA_CALENDAR_DAY"}},{name:"endIcon",type:{name:"IconItem | null"},defaultValue:{func:!1,value:"ICONS.FA_CALENDAR_DAY"}},{name:"areIconsHiddenOnMobile",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"calendarPosition",type:{name:"DatePickerCalendarPositions"},defaultValue:{func:!1,value:"DATE_PICKER_CALENDAR_POSITIONS.BOTTOM_LEFT"}},{name:"errorMessage",type:{name:"string"},defaultValue:{func:!1,value:"''"}},{name:"state",type:{name:"(String as PropType<DatePickerStates>) || null"},defaultValue:{func:!1,value:"DATE_PICKER_STATES.DEFAULT"}},{name:"color",type:{name:"DatePickerColors"},defaultValue:{func:!1,value:"DATE_PICKER_COLORS.NEUTRAL_WEAK"}},{name:"disableDates",type:{name:"Array<Date>"},defaultValue:{func:!0,value:"() => []"}},{name:"minDate",type:{name:"date"},defaultValue:{func:!1,value:"null"}},{name:"maxDate",type:{name:"date"},defaultValue:{func:!1,value:"null"}}],events:[{name:"update:date"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/DatePickers/DateRangePicker/DateRangePicker.vue"]};export{M as D};
@@ -1 +0,0 @@
1
- import{I as c,a as I,b as S}from"./Icon-ChGia3n4.js";import{t as u,d as A,r as f,o as s,c as o,b as l,g as r,a as p,n as i,j as d}from"./vue.esm-bundler-CWlcb7ht.js";import{_ as N}from"./_plugin-vue_export-helper-DlAUqK2U.js";const t={NEUTRAL:"neutral",NEUTRAL_WEAK:"neutralWeak",PRIMARY:"primary",SUCCESS:"success",FAIL:"fail",DANGER:"danger",WARNING:"warning",INFO:"info"},n={DEFAULT:"default",DISABLED:"disabled",LOADING:"loading"},h={NEUTRAL:"neutral",NEUTRAL_WEAK:"neutralWeak",PRIMARY:"primary",PRIMARY_WEAK:"primaryWeak",SUCCESS:"success",SUCCESS_WEAK:"successWeak",FAIL:"fail",FAIL_WEAK:"failWeak",DANGER:"danger",DANGER_WEAK:"dangerWeak",WARNING:"warning",WARNING_WEAK:"warningWeak",INFO:"info",INFO_WEAK:"infoWeak"},T={interactive:{type:Boolean,default:!1},iconLeft:{type:Object,default:null,validator(e){return Object.values(c).includes(u(e))}},iconRight:{type:Object,default:null,validator(e){return Object.values(c).includes(u(e))}},isIconRightHiddenOnMobile:{type:Boolean,default:!1},text:{type:String,required:!0},eyebrowText:{type:String,default:null},additionalText:{type:String,default:null},color:{type:String,default:t.NEUTRAL,validator(e){return Object.values(t).includes(e)}},isEyebrowTextUppercase:{type:Boolean,default:!1},state:{type:String,default:n.DEFAULT,validator(e){return Object.values(n).includes(e)}},eyebrowEllipsis:{type:Boolean,default:!0},textEllipsis:{type:Boolean,default:!0},borderColor:{type:String,default:null}},E=A({name:"Tile",components:{DsIcon:I},props:T,data(){return{ICONS:Object.freeze(c),ICON_SIZES:Object.freeze(S),TILE_STATES:Object.freeze(n)}},computed:{tileColor(){return{[t.NEUTRAL]:"-ds-neutral",[t.NEUTRAL_WEAK]:"-ds-neutralWeak",[t.PRIMARY]:"-ds-primary",[t.SUCCESS]:"-ds-success",[t.FAIL]:"-ds-fail",[t.DANGER]:"-ds-danger",[t.WARNING]:"-ds-warning",[t.INFO]:"-ds-info"}[this.color]},tileState(){return{[n.DEFAULT]:null,[n.DISABLED]:"-ds-disabled",[n.LOADING]:"-ds-loading"}[this.state]}}}),R={class:"ds-tile__center"},L=["textContent"],_=["textContent"],y={key:3,class:"ds-tile__additionalText"};function O(e,C,b,g,m,W){const a=f("ds-icon");return s(),o("div",{class:i([[e.tileColor,e.tileState,{"-ds-interactive":e.interactive,[`-ds-border-${e.borderColor}`]:e.borderColor!==null}],"ds-tile"])},[e.iconLeft?(s(),l(a,{key:0,icon:e.iconLeft,size:e.ICON_SIZES.SMALL,class:"ds-tile__iconLeft"},null,8,["icon","size"])):r("",!0),p("div",R,[e.eyebrowText?(s(),o("span",{key:0,class:i(["ds-tile__eyebrowText",{"-ds-uppercase":e.isEyebrowTextUppercase,"-ds-ellipsis":e.eyebrowEllipsis}]),textContent:d(e.eyebrowText)},null,10,L)):r("",!0),p("span",{class:i(["ds-tile__text",{"-ds-ellipsis":e.textEllipsis}]),textContent:d(e.text)},null,10,_)]),e.state===e.TILE_STATES.LOADING?(s(),l(a,{key:1,class:"ds-tile__iconRight",icon:e.ICONS.FAD_SPINNER_THIRD,size:e.ICON_SIZES.SMALL,spinning:""},null,8,["icon","size"])):e.iconRight?(s(),l(a,{key:2,class:i(["ds-tile__iconRight",{"-ds-hiddenOnMobile":e.isIconRightHiddenOnMobile}]),icon:e.iconRight,size:e.ICON_SIZES.SMALL},null,8,["class","icon","size"])):e.additionalText?(s(),o("div",y,d(e.additionalText),1)):r("",!0)],2)}const U=N(E,[["render",O],["__scopeId","data-v-a63f84ea"]]);E.__docgenInfo={displayName:"Tile",exportName:"default",description:"",tags:{},sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/Tile/Tile.vue"]};export{t as T,n as a,h as b,U as c,T as p};