@bethinkpl/design-system 26.7.1 → 26.8.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 (39) hide show
  1. package/.eslintrc.cjs +1 -0
  2. package/dist/design-system.umd.cjs +17 -17
  3. package/dist/design-system.umd.cjs.map +1 -1
  4. package/dist/lib/js/components/DatePickers/DateBox/DateBox.vue.d.ts +418 -0
  5. package/dist/lib/js/components/DatePickers/DateBox/index.d.ts +3 -0
  6. package/dist/lib/js/components/DatePickers/DatePicker/DatePicker.vue.d.ts +5 -20
  7. package/dist/lib/js/components/DatePickers/DateRangePicker/DateRangePicker.vue.d.ts +5 -24
  8. package/dist/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.vue.d.ts +2 -2
  9. package/dist/lib/js/components/TextGroup/TextGroup.vue.d.ts +1 -1
  10. package/dist/lib/js/index.d.ts +1 -0
  11. package/docs/assets/{BasicRichListItem.stories-D5cFXBnH.js → BasicRichListItem.stories-CcHSG7m9.js} +1 -1
  12. package/docs/assets/{Color-ERTF36HU-Bdv_bt15.js → Color-ERTF36HU-Cl7k2CiW.js} +1 -1
  13. package/docs/assets/DateBox.stories-CCMM_bz7.js +30 -0
  14. package/docs/assets/DatePicker-CpgyDlQB.js +2 -0
  15. package/docs/assets/{DatePicker.stories-D4LubdID.js → DatePicker.stories-BHR8avdJ.js} +1 -1
  16. package/docs/assets/DateRangePicker-D8hHjWi0.js +1 -0
  17. package/docs/assets/{DateRangePicker.stories-CmHayQUD.js → DateRangePicker.stories-DeUSbyPk.js} +1 -1
  18. package/docs/assets/{DocsRenderer-CFRXHY34-7YPgF_58.js → DocsRenderer-CFRXHY34-D7ZfZi7e.js} +5 -5
  19. package/docs/assets/{RichListItem.stories-Dh3jAgkT.js → RichListItem.stories-3MgSvdLF.js} +1 -1
  20. package/docs/assets/{SelectionTile-A8HfI_-S.js → SelectionTile-CmtXisA8.js} +1 -1
  21. package/docs/assets/{SelectionTile.stories-CG4N75Mo.js → SelectionTile.stories-_3ZFRUYJ.js} +1 -1
  22. package/docs/assets/{iframe-PlXRfjR9.js → iframe-CyhtZ8S-.js} +4 -4
  23. package/docs/assets/{index-DGocbclh.js → index-BxvhpXoy.js} +1 -1
  24. package/docs/assets/{index-Dwdn4P5V.js → index-aHmFlg65.js} +1 -1
  25. package/docs/assets/{preview-19u1OjCM.js → preview-DYM3zEKi.js} +1 -1
  26. package/docs/assets/{preview-BqTxE9pa.js → preview-Gp_N-XaH.js} +2 -2
  27. package/docs/iframe.html +1 -1
  28. package/docs/index.json +1 -1
  29. package/docs/project.json +1 -1
  30. package/lib/js/components/DatePickers/DateBox/DateBox.stories.ts +99 -0
  31. package/lib/js/components/DatePickers/{DatePickerBox/DatePickerBox.vue → DateBox/DateBox.vue} +52 -37
  32. package/lib/js/components/DatePickers/DateBox/index.ts +3 -0
  33. package/lib/js/components/DatePickers/DatePicker/DatePicker.vue +3 -4
  34. package/lib/js/components/DatePickers/DateRangePicker/DateRangePicker.vue +4 -31
  35. package/lib/js/index.ts +1 -0
  36. package/package.json +1 -1
  37. package/docs/assets/DatePicker-DIJ8aqM6.js +0 -2
  38. package/docs/assets/DateRangePicker-1oxiA7Lf.js +0 -1
  39. package/lib/js/components/DatePickers/DatePickerBox/index.ts +0 -3
@@ -1,17 +1,15 @@
1
1
  <template>
2
2
  <div ref="dateRangePickerRef" class="ds-dateRangePicker">
3
- <date-picker-box
3
+ <date-box
4
4
  :is-interactive="isInteractive"
5
5
  :placeholder="placeholder"
6
6
  :start-date="startDate"
7
- :end-date="endDateIfDifferentThanStartDate"
7
+ :end-date="endDate"
8
8
  :start-icon="startIcon"
9
9
  :end-icon="endIcon"
10
10
  :are-icons-hidden-on-mobile="areIconsHiddenOnMobile"
11
11
  :state="state"
12
12
  :color="color"
13
- :start-date-eyebrow-text="eyebrowText"
14
- :end-date-eyebrow-text="endDateEyebrowText"
15
13
  :is-open="isOpen"
16
14
  @click="toggle"
17
15
  />
@@ -50,7 +48,7 @@
50
48
  </style>
51
49
 
52
50
  <script lang="ts">
53
- import DatePickerBox from '../DatePickerBox/DatePickerBox.vue';
51
+ import DateBox from '../DateBox';
54
52
  import { IconItem, ICONS } from '../../Icons/Icon';
55
53
  import { defineComponent, PropType, Ref, ref, toRaw, watch } from 'vue';
56
54
  import {
@@ -69,7 +67,7 @@ import { localWeekdayName } from '../../../../../tools/importers/helpers/dates';
69
67
  export default defineComponent({
70
68
  name: 'DateRangePicker',
71
69
  components: {
72
- DatePickerBox,
70
+ DateBox,
73
71
  },
74
72
  props: {
75
73
  isInteractive: {
@@ -197,31 +195,6 @@ export default defineComponent({
197
195
  DATE_PICKER_TRIGGER_TYPES: Object.freeze(DATE_PICKER_TRIGGER_TYPES),
198
196
  };
199
197
  },
200
- computed: {
201
- endDateEyebrowText() {
202
- if (!this.endDate || this.state === DATE_PICKER_STATES.LOADING) {
203
- return '';
204
- }
205
-
206
- return capitalizeFirstLetter(localWeekdayName(this.endDate));
207
- },
208
-
209
- endDateIfDifferentThanStartDate() {
210
- return this.startDate &&
211
- this.endDate &&
212
- this.startDate.getTime() !== this.endDate.getTime()
213
- ? this.endDate
214
- : null;
215
- },
216
-
217
- eyebrowText() {
218
- if (!this.startDate || this.state === DATE_PICKER_STATES.LOADING) {
219
- return '';
220
- }
221
-
222
- return capitalizeFirstLetter(localWeekdayName(this.startDate));
223
- },
224
- },
225
198
  async mounted() {
226
199
  if (this.isInteractive && this.state === DATE_PICKER_STATES.DEFAULT) {
227
200
  await this.createDatePicker(
package/lib/js/index.ts CHANGED
@@ -16,6 +16,7 @@ export { default as Card } from './components/Cards/Card/';
16
16
  export { default as DsCard } from './components/Cards/Card/';
17
17
  export { default as CardExpandable } from './components/Cards/CardExpandable/';
18
18
  export { default as DsCardExpandable } from './components/Cards/CardExpandable/';
19
+ export { default as DsDateBox } from './components/DatePickers/DateBox';
19
20
  export { default as DatePicker } from './components/DatePickers/DatePicker';
20
21
  export { default as DsDatePicker } from './components/DatePickers/DatePicker';
21
22
  export { default as DsDateRangePicker } from './components/DatePickers/DateRangePicker';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bethinkpl/design-system",
3
- "version": "26.7.1",
3
+ "version": "26.8.0",
4
4
  "description": "Bethink universe design-system",
5
5
  "repository": {
6
6
  "type": "git",
@@ -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 K,t as b,r as h,o as a,c as l,a as n,j as _,g as i,b as S,n as T,F as V,k as W,v as g,E as j,w as U,f as z}from"./vue.esm-bundler-DmkhfO_9.js";import{c as $,d as X,b as d}from"./Tile-DXlbtMBZ.js";import{a as Y,I,b as Z}from"./Icon-KlrZhBvI.js";import{_ as F}from"./_plugin-vue_export-helper-DlAUqK2U.js";import{_ as C}from"./iframe-PlXRfjR9.js";const u={NEUTRAL_WEAK:"neutralWeak",NEUTRAL:"neutral",WARNING:"warning",DANGER:"danger"},E={DEFAULT:"default",DISABLED:"disabled",LOADING:"loading"},c={TOP:"top",TOP_LEFT:"top-left",TOP_RIGHT:"top-right",BOTTOM:"bottom",BOTTOM_LEFT:"bottom-left",BOTTOM_RIGHT:"bottom-right"},N={BOX:"box",TILE:"tile"},M={[c.BOTTOM_LEFT]:"below left",[c.BOTTOM_RIGHT]:"below right",[c.BOTTOM]:"below",[c.TOP_LEFT]:"above left",[c.TOP_RIGHT]:"above right",[c.TOP]:"above"};function q(e){return e.toLocaleDateString(void 0,{dateStyle:void 0,timeStyle:void 0,weekday:"long"})}function J(e){return e.toLocaleDateString(void 0,{dateStyle:"medium",timeStyle:void 0})}function B(e){return e.toLocaleDateString(void 0,{month:"short",day:"2-digit"})}const G=K({name:"DatePickerBox",components:{DsIcon:Y},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(I).includes(b(e))},endIcon:{type:Object,default:null,validate:e=>e===null||Object.values(I).includes(b(e))},areIconsHiddenOnMobile:{type:Boolean,default:!1},state:{type:String||null,default:E.DEFAULT},color:{type:String,default:u.NEUTRAL_WEAK},startDateEyebrowText:{type:String,default:""},endDateEyebrowText:{type:String,default:""},isOpen:{type:Boolean,default:!1}},data(){return{ICONS:Object.freeze(I),ICON_SIZES:Object.freeze(Z),DATE_PICKER_STATES:Object.freeze(E),DATE_PICKER_COLORS:Object.freeze(u)}},computed:{startDateText(){return this.startDate?B(this.startDate):this.placeholder},endDateText(){return B(this.endDate)}}}),Q={class:"ds-datePickerBox__dateWrapper"},x={key:0,class:"ds-datePickerBox__eyebrow"},ee={class:"ds-datePickerBox__date"},te={class:"ds-datePickerBox__dateText"},ae={class:"ds-datePickerBox__dateWrapper"},ne={key:0,class:"ds-datePickerBox__eyebrow"},le={class:"ds-datePickerBox__date"},se={class:"ds-datePickerBox__dateText"},oe={key:1,class:"ds-datePickerBox__loader"};function ie(e,f,r,D,t,p){const s=h("ds-icon");return a(),l("div",{class:T(["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:T(["ds-datePickerBox__widthWrapper",{"-ds-has-icon":e.startIcon,"-ds-iconHiddenOnMobile":e.areIconsHiddenOnMobile}])},[n("div",Q,[e.startDateEyebrowText?(a(),l("span",x,_(e.startDateEyebrowText),1)):i("",!0),n("div",ee,[e.startIcon?(a(),S(s,{key:0,class:T(["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",te,_(e.startDateText),1)])])],2),e.startDate&&e.endDate?(a(),l(V,{key:0},[f[0]||(f[0]=n("span",{class:"ds-datePickerBox__separator"},"–",-1)),n("div",{class:T(["ds-datePickerBox__widthWrapper -ds-justify-to-end",{"-ds-has-icon":e.endIcon,"-ds-iconHiddenOnMobile":e.areIconsHiddenOnMobile}])},[n("div",ae,[e.endDateEyebrowText?(a(),l("span",ne,_(e.endDateEyebrowText),1)):i("",!0),n("div",le,[e.endIcon?(a(),S(s,{key:0,class:T(["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",se,_(e.endDateText),1)])])],2)],64)):i("",!0),e.state===e.DATE_PICKER_STATES.LOADING?(a(),l("div",oe,[W(s,{icon:e.ICONS.FAD_SPINNER_THIRD,size:e.ICON_SIZES.X_SMALL,spinning:""},null,8,["icon","size"])])):i("",!0)],2)}const re=F(G,[["render",ie],["__scopeId","data-v-12bbb912"]]);G.__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 de=e=>e.charAt(0).toUpperCase()+e.slice(1);let O=null,w;function ue({props:e,onChange:f,defaultDates:r,mode:D="single"}){let t=null;const p=g(!1),s=async(m,y,P)=>{var v,R,L,k;if(!t){if(!O)try{O=(await C(async()=>{const{default:o}=await import("./index-CBmJdl9t.js");return{default:o}},[],import.meta.url)).default,w=(await C(async()=>{const{Polish:o}=await import("./pl-Cy1N1vsP.js").then(A=>A.p);return{Polish:o}},__vite__mapDeps([0,1]),import.meta.url)).Polish}catch(o){console.error("Failed to load flatpickr",o);return}if(t=O(m,{mode:D,locale:w,disableMobile:!0,positionElement:y,ignoredFocusElements:[y],position:M[e.calendarPosition],defaultDate:r,disable:e.disableDates,minDate:e.minDate,maxDate:e.maxDate,onClose:[()=>{p.value=!1}],onOpen:[()=>{p.value=!0}],onChange:f}),P){const o=document.querySelector(P),A=()=>{t==null||t._positionCalendar()};o&&((R=(v=t==null?void 0:t.config)==null?void 0:v.onOpen)==null||R.push(()=>{o.addEventListener("scroll",A,{passive:!0})}),(k=(L=t==null?void 0:t.config)==null?void 0:L.onClose)==null||k.push(()=>{o.removeEventListener("scroll",A)}))}return t}};return j(()=>{t==null||t.destroy(),t=null}),U([()=>e.calendarPosition,()=>e.minDate,()=>e.maxDate,()=>e.disableDates,()=>r],()=>{t==null||t.set({position:M[e.calendarPosition],defaultDate:r,disable:e.disableDates,minDate:e.minDate,maxDate:e.maxDate})},{flush:"post"}),{datePicker:t,createDatePicker:s,isOpen:p,toggle:()=>{t==null||t.toggle()}}}const H=K({name:"DatePicker",components:{DsTile:$,DatePickerBox:re},props:{triggerType:{type:String,default:N.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:I.FA_CALENDAR_DAYS,validator(e){return e===null||Object.values(I).includes(b(e))}},isIconHiddenOnMobile:{type:Boolean,default:!1},errorMessage:{type:String,default:null},state:{type:String,default:E.DEFAULT},color:{type:String,default:u.NEUTRAL_WEAK},calendarPosition:{type:String,default:c.BOTTOM_LEFT},disableDates:{type:Array,default:()=>[]},minDate:{type:Date,default:null},maxDate:{type:Date,default:null},updatePositionBasedOnScrollableSelector:{type:String,default:""}},emits:{"update:date":e=>!0},setup(e,{emit:f}){const r=g(),D=g(),t=y=>{f("update:date",y[0])},{isOpen:p,toggle:s,createDatePicker:m}=ue({props:e,onChange:t,defaultDates:e.date,mode:"single"});return U([()=>e.isInteractive,()=>e.state],async()=>{e.isInteractive&&e.state===E.DEFAULT&&await m(r.value,D.value,e.updatePositionBasedOnScrollableSelector)}),{flatpickrInputRef:r,datePickerRef:D,isOpen:p,toggleDatePicker:s,createDatePicker:m,DATE_PICKER_CALENDAR_POSITIONS:Object.freeze(c),DATE_PICKER_COLORS:Object.freeze(u),DATE_PICKER_STATES:Object.freeze(E),DATE_PICKER_TRIGGER_TYPES:Object.freeze(N),TILE_ADDITIONAL_TEXT_MAX_WIDTHS:Object.freeze(X)}},computed:{borderColor(){return{[u.NEUTRAL]:this.isInteractive?d.PRIMARY:d.NEUTRAL_WEAK,[u.NEUTRAL_WEAK]:this.isInteractive?d.PRIMARY:d.NEUTRAL_WEAK,[u.DANGER]:this.isInteractive?d.DANGER:d.DANGER_WEAK,[u.WARNING]:this.isInteractive?d.WARNING:d.WARNING_WEAK}[this.color]},eyebrowText(){return this.date?de(q(this.date)):""},text(){return this.date?J(this.date):this.placeholder},tileIcon(){return this.additionalText||!this.icon?null:this.isOpen?I.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,this.updatePositionBasedOnScrollableSelector)},methods:{toggle(){this.isInteractive&&this.state===E.DEFAULT&&this.toggleDatePicker()}}}),ce={class:"ds-datePicker__labelWrapper"},fe={key:2,class:"ds-datePicker__errorMessage"},pe={key:3,class:"ds-datePicker__helpMessage"},Te={ref:"flatpickrInputRef",class:"ds-datePicker__hiddenInput"};function Ee(e,f,r,D,t,p){const s=h("ds-tile"),m=h("date-picker-box");return a(),l("div",{ref:"datePickerRef",class:T(["ds-datePicker",{"-ds-box":e.triggerType===e.DATE_PICKER_TRIGGER_TYPES.BOX}])},[e.triggerType===e.DATE_PICKER_TRIGGER_TYPES.TILE?(a(),l(V,{key:0},[n("div",ce,[e.label?(a(),l("span",{key:0,class:T(["ds-datePicker__label",{"-ds-isUppercase":e.isLabelUppercase,"-ds-disabled":e.state===e.DATE_PICKER_STATES.DISABLED}])},_(e.label),3)):i("",!0),e.$slots.default?z(e.$slots,"default",{key:1},void 0,!0):i("",!0)]),W(s,{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,"additional-text-max-width":e.TILE_ADDITIONAL_TEXT_MAX_WIDTHS.MEDIUM,"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","additional-text-max-width","onClick"])],64)):(a(),S(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(),l("span",fe,_(e.errorMessage),1)):e.showHelpMessage?(a(),l("span",pe,_(e.helpMessage),1)):i("",!0),n("input",Te,null,512)],2)}const Ae=F(H,[["render",Ee],["__scopeId","data-v-911ca177"]]);H.__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_DAYS"}},{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"}},{name:"updatePositionBasedOnScrollableSelector",type:{name:"string"},defaultValue:{func:!1,value:"''"}}],events:[{name:"update:date"}],slots:[{name:"default"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/DatePickers/DatePicker/DatePicker.vue"]};export{Ae as D,N as a,u as b,c,E as d,re as e,de as f,ue as i,q as l};
@@ -1 +0,0 @@
1
- import{e as A,c,d as t,b as f,i as g,a as T,f as D,l as p}from"./DatePicker-DIJ8aqM6.js";import{I as a}from"./Icon-KlrZhBvI.js";import{d as R,t as m,v as I,w as P,r as h,o as y,c as _,k as S,j as O,g as b,a as v}from"./vue.esm-bundler-DmkhfO_9.js";import{_ as k}from"./_plugin-vue_export-helper-DlAUqK2U.js";const E=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},updatePositionBasedOnScrollableSelector:{type:String,default:""}},emits:{"update:date":e=>!0},setup(e,{emit:i}){const n=I(),l=I(),o=r=>{r.length===2&&i("update:date",{startDate:r[0],endDate:r[1]})},{isOpen:d,toggle:s,createDatePicker:u}=g({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(l.value,n.value,e.updatePositionBasedOnScrollableSelector)},{flush:"post"}),{dateRangePickerRef:n,flatpickrInputRef:l,isOpen:d,toggleDatePicker:s,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(T)}},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,this.updatePositionBasedOnScrollableSelector)},methods:{toggle(){this.isInteractive&&this.state===t.DEFAULT&&this.toggleDatePicker()}}}),C={ref:"dateRangePickerRef",class:"ds-dateRangePicker"},N={key:0,class:"ds-dateRangePicker__errorMessage"},L={ref:"flatpickrInputRef",class:"ds-dateRangePicker__hiddenInput"};function V(e,i,n,l,o,d){const s=h("date-picker-box");return y(),_("div",C,[S(s,{"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?(y(),_("span",N,O(e.errorMessage),1)):b("",!0),v("input",L,null,512)],512)}const j=k(E,[["render",V],["__scopeId","data-v-937af447"]]);E.__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"}},{name:"updatePositionBasedOnScrollableSelector",type:{name:"string"},defaultValue:{func:!1,value:"''"}}],events:[{name:"update:date"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/DatePickers/DateRangePicker/DateRangePicker.vue"]};export{j as D};
@@ -1,3 +0,0 @@
1
- import DatePickerBox from './DatePickerBox.vue';
2
-
3
- export default DatePickerBox;