@bethinkpl/design-system 26.5.0 → 26.6.0

package/docs/assets/DatePicker.stories-C4sN46Ws.js

@@ -0,0 +1,175 @@
+import{D as p,a as D,b as u,c as m,d as g}from"./DatePicker-Br-Dxnyn.js";import{I as b}from"./Icon-ChGia3n4.js";import{D as I}from"./Switch-BtYFtHgw.js";import"./vue.esm-bundler-CWlcb7ht.js";import"./Tile-DjRk5xHI.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./iframe-OBly2w25.js";import"../sb-preview/runtime.js";const{useArgs:M}=__STORYBOOK_MODULE_PREVIEW_API__,N={title:"Components/DatePickers/DatePicker",component:p},h=S=>{const[T,w]=M();return{components:{DatePicker:p,DsSwitch:I},setup(){return S},data(){return{ICONS:Object.freeze(b)}},methods:{updateDate(a){w({date:`${a.getFullYear()}-${a.getMonth()+1}-${a.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(a=>new Date(a))}},template:`
+            <date-picker
+                :trigger-type="triggerType"
+                :is-interactive="isInteractive"
+                :placeholder="placeholder"
+                :date="formattedDate"
+                :additional-text="additionalText"
+                :helpMessage="helpMessage"
+                :label="label"
+                :is-label-uppercase="isLabelUppercase"
+                :icon="icon ? ICONS[icon] : null"
+                :is-icon-hidden-on-mobile="isIconHiddenOnMobile"
+                :calendar-position="calendarPosition"
+                :error-message="errorMessage"
+                :state="state"
+                :color="color"
+                :disable-dates="formattedDisableDates"
+                :min-date="formattedMinDate"
+                :max-date="formattedMaxDate"
+                :update-position-based-on-scrollable-selector="updatePositionBasedOnScrollableSelector"
+                @update:date="updateDate"
+            >
+                <ds-switch  label-left="lewa" label-right="prawa" />
+            </date-picker>`}},t=h.bind({}),n=Date.now(),r=864e5,f={triggerType:D.TILE,isInteractive:!0,color:u.NEUTRAL_WEAK,label:"Date picker",isLabelUppercase:!1,placeholder:"Wybierz datę",date:"",disableDates:[new Date(n+r*2).toISOString().slice(0,10)],minDate:new Date(n).toISOString().slice(0,10),maxDate:new Date(n+r*30).toISOString().slice(0,10),icon:"FA_CALENDAR_DAYS",isIconHiddenOnMobile:!1,additionalText:"",helpMessage:null,errorMessage:null,calendarPosition:m.BOTTOM,state:g.DEFAULT},O={triggerType:{control:"select",options:Object.values(D)},date:{control:"text"},icon:{control:"select",options:[null,...Object.keys(b)]},calendarPosition:{control:"select",options:Object.values(m)},state:{control:"select",options:Object.values(g)},color:{control:"select",options:Object.values(u)},disableDates:{control:"object"}};t.argTypes=O;t.args=f;t.parameters={design:{type:"figma",url:"https://www.figma.com/design/03ABNCSDYWYDmOPJOBGM5l/INI-153-Planowanie-pracy-z-lekcjami?node-id=245-162031&t=g08nj70xhT9BZTpu-4"}};const e=h.bind({});e.decorators=[()=>({template:`
+            <div style="height: 500px; overflow-y: scroll;" class="scrollable-container">
+                <div style="height: 1500px; padding: 6px;">
+                    <story />
+                </div>
+            </div>`})];e.argTypes=O;e.args={...f,updatePositionBasedOnScrollableSelector:".scrollable-container"};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 s,i,o;t.parameters={...t.parameters,docs:{...(s=t.parameters)==null?void 0:s.docs,source:{originalSource:`args => {
+  const [_, updateArgs] = useArgs();
+  return {
+    components: {
+      DatePicker,
+      DsSwitch
+    },
+    setup() {
+      return args;
+    },
+    data() {
+      return {
+        ICONS: Object.freeze(ICONS)
+      };
+    },
+    methods: {
+      updateDate(date: Date) {
+        updateArgs({
+          date: \`\${date.getFullYear()}-\${date.getMonth() + 1}-\${date.getDate()}\`
+        });
+      }
+    },
+    computed: {
+      formattedDate() {
+        if (!this.date) {
+          return null;
+        }
+        return new Date(this.date);
+      },
+      formattedMinDate() {
+        if (!this.minDate) {
+          return null;
+        }
+        return new Date(this.minDate);
+      },
+      formattedMaxDate() {
+        if (!this.maxDate) {
+          return null;
+        }
+        return new Date(this.maxDate);
+      },
+      formattedDisableDates() {
+        if (!this.disableDates || !this.disableDates.length) {
+          return null;
+        }
+        return this.disableDates.map(date => new Date(date));
+      }
+    },
+    template: \`
+            <date-picker
+                :trigger-type="triggerType"
+                :is-interactive="isInteractive"
+                :placeholder="placeholder"
+                :date="formattedDate"
+                :additional-text="additionalText"
+                :helpMessage="helpMessage"
+                :label="label"
+                :is-label-uppercase="isLabelUppercase"
+                :icon="icon ? ICONS[icon] : null"
+                :is-icon-hidden-on-mobile="isIconHiddenOnMobile"
+                :calendar-position="calendarPosition"
+                :error-message="errorMessage"
+                :state="state"
+                :color="color"
+                :disable-dates="formattedDisableDates"
+                :min-date="formattedMinDate"
+                :max-date="formattedMaxDate"
+                :update-position-based-on-scrollable-selector="updatePositionBasedOnScrollableSelector"
+                @update:date="updateDate"
+            >
+                <ds-switch  label-left="lewa" label-right="prawa" />
+            </date-picker>\`
+  };
+}`,...(o=(i=t.parameters)==null?void 0:i.docs)==null?void 0:o.source}}};var l,d,c;e.parameters={...e.parameters,docs:{...(l=e.parameters)==null?void 0:l.docs,source:{originalSource:`args => {
+  const [_, updateArgs] = useArgs();
+  return {
+    components: {
+      DatePicker,
+      DsSwitch
+    },
+    setup() {
+      return args;
+    },
+    data() {
+      return {
+        ICONS: Object.freeze(ICONS)
+      };
+    },
+    methods: {
+      updateDate(date: Date) {
+        updateArgs({
+          date: \`\${date.getFullYear()}-\${date.getMonth() + 1}-\${date.getDate()}\`
+        });
+      }
+    },
+    computed: {
+      formattedDate() {
+        if (!this.date) {
+          return null;
+        }
+        return new Date(this.date);
+      },
+      formattedMinDate() {
+        if (!this.minDate) {
+          return null;
+        }
+        return new Date(this.minDate);
+      },
+      formattedMaxDate() {
+        if (!this.maxDate) {
+          return null;
+        }
+        return new Date(this.maxDate);
+      },
+      formattedDisableDates() {
+        if (!this.disableDates || !this.disableDates.length) {
+          return null;
+        }
+        return this.disableDates.map(date => new Date(date));
+      }
+    },
+    template: \`
+            <date-picker
+                :trigger-type="triggerType"
+                :is-interactive="isInteractive"
+                :placeholder="placeholder"
+                :date="formattedDate"
+                :additional-text="additionalText"
+                :helpMessage="helpMessage"
+                :label="label"
+                :is-label-uppercase="isLabelUppercase"
+                :icon="icon ? ICONS[icon] : null"
+                :is-icon-hidden-on-mobile="isIconHiddenOnMobile"
+                :calendar-position="calendarPosition"
+                :error-message="errorMessage"
+                :state="state"
+                :color="color"
+                :disable-dates="formattedDisableDates"
+                :min-date="formattedMinDate"
+                :max-date="formattedMaxDate"
+                :update-position-based-on-scrollable-selector="updatePositionBasedOnScrollableSelector"
+                @update:date="updateDate"
+            >
+                <ds-switch  label-left="lewa" label-right="prawa" />
+            </date-picker>\`
+  };
+}`,...(c=(d=e.parameters)==null?void 0:d.docs)==null?void 0:c.source}}};const k=["Interactive","ScrollableContainer"];export{t as Interactive,e as ScrollableContainer,k as __namedExportsOrder,N as default};

package/docs/assets/DateRangePicker-B2xmoGPO.js

@@ -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-Br-Dxnyn.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 y,c as _,k as S,j as O,g as b,a as k}from"./vue.esm-bundler-CWlcb7ht.js";import{_ as v}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),k("input",L,null,512)],512)}const j=v(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};

package/docs/assets/{DateRangePicker.stories-BcGHtCgE.js → DateRangePicker.stories-DGh5m4TF.js}

@@ -1,4 +1,4 @@
-import{D as i}from"./DateRangePicker-L4cDgxmU.js";import{I as r}from"./Icon-ChGia3n4.js";import{c as m,d as I,b as s}from"./DatePicker-DfNJw-NT.js";import"./vue.esm-bundler-CWlcb7ht.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./Tile-DWASCVea.js";import"./iframe-Di5TkTnR.js";import"../sb-preview/runtime.js";const{useArgs:u}=__STORYBOOK_MODULE_PREVIEW_API__,b={title:"Components/DatePickers/DateRangePicker",component:i,render:n=>{const[A,p]=u();return{components:{DateRangePicker:i},setup(){return n},data(){return{ICONS:Object.freeze(r)}},methods:{updateDate({startDate:e,endDate:t}){p({startDate:e?`${e.getFullYear()}-${e.getMonth()+1}-${e.getDate()}`:null,endDate:t?`${t.getFullYear()}-${t.getMonth()+1}-${t.getDate()}`:null})}},computed:{formattedStartDate(){return this.startDate?new Date(this.startDate):null},formattedEndDate(){return this.endDate?new Date(this.endDate):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?[]:this.disableDates.map(e=>new Date(e))}},template:`
+import{D as i}from"./DateRangePicker-B2xmoGPO.js";import{I as r}from"./Icon-ChGia3n4.js";import{c as m,d as I,b as s}from"./DatePicker-Br-Dxnyn.js";import"./vue.esm-bundler-CWlcb7ht.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./Tile-DjRk5xHI.js";import"./iframe-OBly2w25.js";import"../sb-preview/runtime.js";const{useArgs:u}=__STORYBOOK_MODULE_PREVIEW_API__,b={title:"Components/DatePickers/DateRangePicker",component:i,render:n=>{const[A,p]=u();return{components:{DateRangePicker:i},setup(){return n},data(){return{ICONS:Object.freeze(r)}},methods:{updateDate({startDate:e,endDate:t}){p({startDate:e?`${e.getFullYear()}-${e.getMonth()+1}-${e.getDate()}`:null,endDate:t?`${t.getFullYear()}-${t.getMonth()+1}-${t.getDate()}`:null})}},computed:{formattedStartDate(){return this.startDate?new Date(this.startDate):null},formattedEndDate(){return this.endDate?new Date(this.endDate):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?[]:this.disableDates.map(e=>new Date(e))}},template:`
                 <div style="display: flex">
                     <date-range-picker
                         :is-interactive="isInteractive"