@archpublicwebsite/rangepicker 1.2.0 → 1.2.5

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 (17) hide show
  1. package/dist/Rangepicker.vue.d.ts +2 -2
  2. package/dist/Rangepicker.vue.d.ts.map +1 -1
  3. package/dist/RangepickerInput.vue.d.ts +4 -37
  4. package/dist/RangepickerInput.vue.d.ts.map +1 -1
  5. package/dist/RangepickerModes.stories.d.ts +5 -0
  6. package/dist/RangepickerModes.stories.d.ts.map +1 -1
  7. package/dist/RangepickerModes.stories.js +109 -41
  8. package/dist/index.d.ts +2 -2
  9. package/dist/index.d.ts.map +1 -1
  10. package/dist/rangepicker.js +153 -133
  11. package/dist/rangepicker.js.map +1 -1
  12. package/dist/rangepicker.umd.cjs +1 -1
  13. package/dist/rangepicker.umd.cjs.map +1 -1
  14. package/dist/style.css +1 -1
  15. package/dist/types.d.ts +102 -0
  16. package/dist/types.d.ts.map +1 -1
  17. package/package.json +5 -4
package/dist/rangepicker.js CHANGED
@@ -619,125 +619,131 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
619
619
  createVNode(Transition, {
620
620
  name: __props.variant === "mobile" ? "slide-up" : "fade"
621
621
  }, {
622
- default: withCtx(() => [
623
- localIsOpen.value || isFadingOut.value ? (openBlock(), createElementBlock("div", _hoisted_1$1, [
624
- createElementVNode("div", {
625
- class: "rangepicker-backdrop",
626
- onClick: close
627
- }),
628
- createElementVNode("div", {
629
- ref_key: "calendarRef",
630
- ref: calendarRef,
631
- class: normalizeClass(["rangepicker-container", [__props.variant === "mobile" ? "rangepicker-mobile" : ""]]),
632
- style: normalizeStyle({ ...calendarStyle.value, ...__props.colorStyles, borderRadius: props.borderRadius })
633
- }, [
634
- createElementVNode("div", _hoisted_2$1, [
635
- createElementVNode("div", _hoisted_3, [
636
- createElementVNode("div", null, [
637
- __props.label ? (openBlock(), createElementBlock("p", _hoisted_4, toDisplayString(__props.label), 1)) : createCommentVNode("", true),
638
- createElementVNode("p", _hoisted_5, toDisplayString(formattedDateRange.value || __props.placeholder || "Select dates"), 1)
622
+ default: withCtx(() => {
623
+ var _a;
624
+ return [
625
+ localIsOpen.value || isFadingOut.value ? (openBlock(), createElementBlock("div", _hoisted_1$1, [
626
+ createElementVNode("div", {
627
+ class: "rangepicker-backdrop",
628
+ onClick: close
629
+ }),
630
+ createElementVNode("div", {
631
+ ref_key: "calendarRef",
632
+ ref: calendarRef,
633
+ class: normalizeClass(["rangepicker-container", [__props.variant === "mobile" ? "rangepicker-mobile" : ""]]),
634
+ style: normalizeStyle({ ...calendarStyle.value, ...__props.colorStyles, borderRadius: props.borderRadius })
635
+ }, [
636
+ createElementVNode("div", _hoisted_2$1, [
637
+ createElementVNode("div", _hoisted_3, [
638
+ createElementVNode("div", null, [
639
+ __props.label ? (openBlock(), createElementBlock("p", _hoisted_4, toDisplayString(__props.label), 1)) : createCommentVNode("", true),
640
+ createElementVNode("p", _hoisted_5, toDisplayString(formattedDateRange.value || __props.placeholder || "Select dates"), 1)
641
+ ]),
642
+ nightCount.value > 0 ? (openBlock(), createElementBlock("p", _hoisted_6, toDisplayString(nightCount.value) + " " + toDisplayString(nightCount.value === 1 ? "night" : "nights"), 1)) : createCommentVNode("", true)
643
+ ])
644
+ ]),
645
+ createElementVNode("div", _hoisted_7, [
646
+ createElementVNode("div", _hoisted_8, [
647
+ (openBlock(true), createElementBlock(Fragment, null, renderList(calendarMonths.value, (monthData, index) => {
648
+ return openBlock(), createElementBlock("div", {
649
+ key: monthData.month.format("YYYY-MM"),
650
+ class: "rangepicker-month"
651
+ }, [
652
+ createElementVNode("div", _hoisted_9, [
653
+ __props.variant === "mobile" || index === 0 ? (openBlock(), createElementBlock("button", {
654
+ key: 0,
655
+ class: "rangepicker-nav-button",
656
+ disabled: !canNavigatePrevious.value,
657
+ "aria-label": "Previous month",
658
+ onClick: previousMonth
659
+ }, [..._cache[0] || (_cache[0] = [
660
+ createElementVNode("svg", {
661
+ xmlns: "http://www.w3.org/2000/svg",
662
+ class: "arch-h-5 arch-w-5",
663
+ viewBox: "0 0 20 20",
664
+ fill: "currentColor"
665
+ }, [
666
+ createElementVNode("path", {
667
+ "fill-rule": "evenodd",
668
+ d: "M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z",
669
+ "clip-rule": "evenodd"
670
+ })
671
+ ], -1)
672
+ ])], 8, _hoisted_10)) : (openBlock(), createElementBlock("div", _hoisted_11)),
673
+ createElementVNode("span", _hoisted_12, toDisplayString(monthData.month.format("MMMM YYYY")), 1),
674
+ __props.variant === "mobile" || index === calendarMonths.value.length - 1 ? (openBlock(), createElementBlock("button", {
675
+ key: 2,
676
+ class: "rangepicker-nav-button",
677
+ disabled: !canNavigateNext.value,
678
+ "aria-label": "Next month",
679
+ onClick: nextMonth
680
+ }, [..._cache[1] || (_cache[1] = [
681
+ createElementVNode("svg", {
682
+ xmlns: "http://www.w3.org/2000/svg",
683
+ class: "arch-h-5 arch-w-5",
684
+ viewBox: "0 0 20 20",
685
+ fill: "currentColor"
686
+ }, [
687
+ createElementVNode("path", {
688
+ "fill-rule": "evenodd",
689
+ d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z",
690
+ "clip-rule": "evenodd"
691
+ })
692
+ ], -1)
693
+ ])], 8, _hoisted_13)) : (openBlock(), createElementBlock("div", _hoisted_14))
694
+ ]),
695
+ createElementVNode("div", _hoisted_15, [
696
+ (openBlock(true), createElementBlock(Fragment, null, renderList(weekdays.value, (weekday) => {
697
+ return openBlock(), createElementBlock("div", {
698
+ key: weekday,
699
+ class: "rangepicker-weekday"
700
+ }, toDisplayString(weekday), 1);
701
+ }), 128))
702
+ ]),
703
+ createElementVNode("div", _hoisted_16, [
704
+ (openBlock(true), createElementBlock(Fragment, null, renderList(monthData.days, (day) => {
705
+ return openBlock(), createElementBlock("button", {
706
+ key: day.date.unix(),
707
+ class: normalizeClass(getDayClasses(day)),
708
+ disabled: day.isDisabled,
709
+ "aria-label": day.date.format("MMMM D, YYYY"),
710
+ onClick: (e) => selectDate(day, e),
711
+ onMouseenter: (e) => handleDayHover(day, e),
712
+ onMouseleave: handleDayLeave
713
+ }, [
714
+ createElementVNode("span", null, toDisplayString(day.date.date()), 1)
715
+ ], 42, _hoisted_17);
716
+ }), 128))
717
+ ])
718
+ ]);
719
+ }), 128))
639
720
  ]),
640
- nightCount.value > 0 ? (openBlock(), createElementBlock("p", _hoisted_6, toDisplayString(nightCount.value) + " " + toDisplayString(nightCount.value === 1 ? "night" : "nights"), 1)) : createCommentVNode("", true)
641
- ])
642
- ]),
643
- createElementVNode("div", _hoisted_7, [
644
- createElementVNode("div", _hoisted_8, [
645
- (openBlock(true), createElementBlock(Fragment, null, renderList(calendarMonths.value, (monthData, index) => {
646
- return openBlock(), createElementBlock("div", {
647
- key: monthData.month.format("YYYY-MM"),
648
- class: "rangepicker-month"
649
- }, [
650
- createElementVNode("div", _hoisted_9, [
651
- __props.variant === "mobile" || index === 0 ? (openBlock(), createElementBlock("button", {
652
- key: 0,
653
- class: "rangepicker-nav-button",
654
- disabled: !canNavigatePrevious.value,
655
- "aria-label": "Previous month",
656
- onClick: previousMonth
657
- }, [..._cache[0] || (_cache[0] = [
658
- createElementVNode("svg", {
659
- xmlns: "http://www.w3.org/2000/svg",
660
- class: "arch-h-5 arch-w-5",
661
- viewBox: "0 0 20 20",
662
- fill: "currentColor"
663
- }, [
664
- createElementVNode("path", {
665
- "fill-rule": "evenodd",
666
- d: "M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z",
667
- "clip-rule": "evenodd"
668
- })
669
- ], -1)
670
- ])], 8, _hoisted_10)) : (openBlock(), createElementBlock("div", _hoisted_11)),
671
- createElementVNode("span", _hoisted_12, toDisplayString(monthData.month.format("MMMM YYYY")), 1),
672
- __props.variant === "mobile" || index === calendarMonths.value.length - 1 ? (openBlock(), createElementBlock("button", {
673
- key: 2,
674
- class: "rangepicker-nav-button",
675
- disabled: !canNavigateNext.value,
676
- "aria-label": "Next month",
677
- onClick: nextMonth
678
- }, [..._cache[1] || (_cache[1] = [
679
- createElementVNode("svg", {
680
- xmlns: "http://www.w3.org/2000/svg",
681
- class: "arch-h-5 arch-w-5",
682
- viewBox: "0 0 20 20",
683
- fill: "currentColor"
684
- }, [
685
- createElementVNode("path", {
686
- "fill-rule": "evenodd",
687
- d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z",
688
- "clip-rule": "evenodd"
689
- })
690
- ], -1)
691
- ])], 8, _hoisted_13)) : (openBlock(), createElementBlock("div", _hoisted_14))
692
- ]),
693
- createElementVNode("div", _hoisted_15, [
694
- (openBlock(true), createElementBlock(Fragment, null, renderList(weekdays.value, (weekday) => {
695
- return openBlock(), createElementBlock("div", {
696
- key: weekday,
697
- class: "rangepicker-weekday"
698
- }, toDisplayString(weekday), 1);
699
- }), 128))
700
- ]),
701
- createElementVNode("div", _hoisted_16, [
702
- (openBlock(true), createElementBlock(Fragment, null, renderList(monthData.days, (day) => {
703
- return openBlock(), createElementBlock("button", {
704
- key: day.date.unix(),
705
- class: normalizeClass(getDayClasses(day)),
706
- disabled: day.isDisabled,
707
- "aria-label": day.date.format("MMMM D, YYYY"),
708
- onClick: (e) => selectDate(day, e),
709
- onMouseenter: (e) => handleDayHover(day, e),
710
- onMouseleave: handleDayLeave
711
- }, [
712
- createElementVNode("span", null, toDisplayString(day.date.date()), 1)
713
- ], 42, _hoisted_17);
714
- }), 128))
715
- ])
716
- ]);
717
- }), 128))
721
+ !__props.autoApply ? (openBlock(), createElementBlock("div", _hoisted_18, [
722
+ createElementVNode("button", {
723
+ class: "arch-px-4 arch-py-2 arch-text-sm arch-font-medium arch-text-gray-700 hover:arch-bg-gray-100 arch-rounded-lg arch-transition-colors",
724
+ onClick: cancel
725
+ }, " Cancel "),
726
+ createElementVNode("button", {
727
+ class: "arch-px-4 arch-py-2 arch-text-sm arch-font-medium arch-text-white arch-rounded-lg arch-transition-colors disabled:arch-opacity-50 disabled:arch-cursor-not-allowed",
728
+ style: normalizeStyle({
729
+ backgroundColor: ((_a = __props.colorStyles) == null ? void 0 : _a["--color-primary"]) ? `rgb(${__props.colorStyles["--color-primary"]})` : "rgb(37 99 235)"
730
+ }),
731
+ disabled: !localStartDate.value || !localEndDate.value,
732
+ onClick: apply
733
+ }, " Apply ", 12, _hoisted_19)
734
+ ])) : createCommentVNode("", true)
718
735
  ]),
719
- !__props.autoApply ? (openBlock(), createElementBlock("div", _hoisted_18, [
720
- createElementVNode("button", {
721
- class: "arch-px-4 arch-py-2 arch-text-sm arch-font-medium arch-text-gray-700 hover:arch-bg-gray-100 arch-rounded-lg arch-transition-colors",
722
- onClick: cancel
723
- }, " Cancel "),
724
- createElementVNode("button", {
725
- class: "arch-px-4 arch-py-2 arch-text-sm arch-font-medium arch-text-white arch-bg-blue-600 hover:arch-bg-blue-700 arch-rounded-lg arch-transition-colors disabled:arch-opacity-50 disabled:arch-cursor-not-allowed",
726
- disabled: !localStartDate.value || !localEndDate.value,
727
- onClick: apply
728
- }, " Apply ", 8, _hoisted_19)
729
- ])) : createCommentVNode("", true)
730
- ]),
731
- showTooltipComputed.value ? (openBlock(), createElementBlock("div", {
732
- key: 0,
733
- class: "rangepicker-tooltip",
734
- style: normalizeStyle(tooltipStyle.value)
735
- }, [
736
- createElementVNode("div", _hoisted_20, toDisplayString(tooltipText.value), 1)
737
- ], 4)) : createCommentVNode("", true)
738
- ], 6)
739
- ])) : createCommentVNode("", true)
740
- ]),
736
+ showTooltipComputed.value ? (openBlock(), createElementBlock("div", {
737
+ key: 0,
738
+ class: "rangepicker-tooltip",
739
+ style: normalizeStyle(tooltipStyle.value)
740
+ }, [
741
+ createElementVNode("div", _hoisted_20, toDisplayString(tooltipText.value), 1)
742
+ ], 4)) : createCommentVNode("", true)
743
+ ], 6)
744
+ ])) : createCommentVNode("", true)
745
+ ];
746
+ }),
741
747
  _: 1
742
748
  }, 8, ["name"])
743
749
  ]);
@@ -751,26 +757,41 @@ const _export_sfc = (sfc, props) => {
751
757
  }
752
758
  return target;
753
759
  };
754
- const Rangepicker = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-581930b0"]]);
760
+ const Rangepicker = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-e38d5229"]]);
755
761
  const _hoisted_1 = { class: "rangepicker-input-container" };
756
762
  const _hoisted_2 = ["id", "value", "placeholder", "readonly", "name"];
757
763
  const _sfc_main = /* @__PURE__ */ defineComponent({
758
764
  __name: "RangepickerInput",
759
765
  props: {
760
766
  id: {},
761
- close: { type: Boolean },
762
- modelValue: {},
763
767
  name: {},
764
768
  placeholder: { default: "Select dates" },
765
769
  readonly: { type: Boolean, default: true },
766
770
  class: {},
767
- options: {},
771
+ modelValue: {},
772
+ close: { type: Boolean },
768
773
  variant: { default: "desktop" },
769
774
  primaryColor: {},
770
775
  secondaryColor: {},
771
776
  fontFamily: {},
772
777
  borderRadius: {},
773
- showClearButton: { type: Boolean, default: true }
778
+ showClearButton: { type: Boolean, default: true },
779
+ autoApply: { type: Boolean },
780
+ allowRepick: { type: Boolean },
781
+ dropdowns: {},
782
+ startDate: {},
783
+ minDate: {},
784
+ maxDate: {},
785
+ format: {},
786
+ numberOfColumns: {},
787
+ numberOfMonths: {},
788
+ singleMode: { type: Boolean },
789
+ tooltipText: {},
790
+ tooltipNumber: {},
791
+ inlineMode: { type: Boolean },
792
+ minDays: {},
793
+ maxDays: {},
794
+ showTooltip: { type: Boolean }
774
795
  },
775
796
  emits: ["update:modelValue", "focusin"],
776
797
  setup(__props, { emit: __emit }) {
@@ -859,7 +880,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
859
880
  return styles;
860
881
  });
861
882
  return (_ctx, _cache) => {
862
- var _a, _b, _c, _d, _e, _f, _g, _h, _i;
863
883
  return openBlock(), createElementBlock("div", {
864
884
  ref_key: "wrapperRef",
865
885
  ref: wrapperRef,
@@ -910,15 +930,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
910
930
  "is-open": isOpen.value,
911
931
  "onUpdate:isOpen": _cache[1] || (_cache[1] = ($event) => isOpen.value = $event),
912
932
  "trigger-element": inputRef.value,
913
- "min-date": (_a = __props.options) == null ? void 0 : _a.minDate,
914
- "max-date": (_b = __props.options) == null ? void 0 : _b.maxDate,
915
- "min-days": (_c = __props.options) == null ? void 0 : _c.minDays,
916
- "max-days": (_d = __props.options) == null ? void 0 : _d.maxDays,
917
- "value-of-months": ((_e = __props.options) == null ? void 0 : _e.numberOfMonths) || 2,
918
- "value-of-columns": ((_f = __props.options) == null ? void 0 : _f.numberOfColumns) || 2,
919
- format: ((_g = __props.options) == null ? void 0 : _g.format) || "DD MMM YYYY",
920
- "auto-apply": ((_h = __props.options) == null ? void 0 : _h.autoApply) !== false,
921
- "show-tooltip": ((_i = __props.options) == null ? void 0 : _i.showTooltip) !== false,
933
+ "min-date": __props.minDate,
934
+ "max-date": __props.maxDate,
935
+ "min-days": __props.minDays,
936
+ "max-days": __props.maxDays,
937
+ "value-of-months": __props.numberOfMonths || 2,
938
+ "value-of-columns": __props.numberOfColumns || 2,
939
+ format: __props.format || "DD MMM YYYY",
940
+ "auto-apply": __props.autoApply !== false,
941
+ "show-tooltip": __props.showTooltip !== false,
922
942
  variant: __props.variant,
923
943
  close: props.close,
924
944
  "color-styles": colorStyles.value,
@@ -928,7 +948,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
928
948
  };
929
949
  }
930
950
  });
931
- const RangepickerInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d06ced61"]]);
951
+ const RangepickerInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-44888cf3"]]);
932
952
  function useRangepicker(triggerRef, options = {}) {
933
953
  const isOpen = ref(false);
934
954
  const dateRange = ref({ startDate: "", endDate: "" });