@archpublicwebsite/rangepicker 1.2.0 → 1.2.6

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 +159 -134
  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
@@ -437,7 +437,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
437
437
  const { width: windowWidth } = useWindowSize();
438
438
  const calendarStyle = ref({});
439
439
  function updatePosition() {
440
- if (props.variant === "mobile") return;
440
+ if (props.variant === "mobile") {
441
+ calendarStyle.value = {
442
+ "--border-radius-day": props.borderRadius
443
+ };
444
+ return;
445
+ }
441
446
  nextTick(() => {
442
447
  const position = calculatePosition(
443
448
  props.triggerElement,
@@ -619,125 +624,131 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
619
624
  createVNode(Transition, {
620
625
  name: __props.variant === "mobile" ? "slide-up" : "fade"
621
626
  }, {
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)
627
+ default: withCtx(() => {
628
+ var _a;
629
+ return [
630
+ localIsOpen.value || isFadingOut.value ? (openBlock(), createElementBlock("div", _hoisted_1$1, [
631
+ createElementVNode("div", {
632
+ class: "rangepicker-backdrop",
633
+ onClick: close
634
+ }),
635
+ createElementVNode("div", {
636
+ ref_key: "calendarRef",
637
+ ref: calendarRef,
638
+ class: normalizeClass(["rangepicker-container", [__props.variant === "mobile" ? "rangepicker-mobile" : ""]]),
639
+ style: normalizeStyle({ ...calendarStyle.value, ...__props.colorStyles, borderRadius: props.borderRadius })
640
+ }, [
641
+ createElementVNode("div", _hoisted_2$1, [
642
+ createElementVNode("div", _hoisted_3, [
643
+ createElementVNode("div", null, [
644
+ __props.label ? (openBlock(), createElementBlock("p", _hoisted_4, toDisplayString(__props.label), 1)) : createCommentVNode("", true),
645
+ createElementVNode("p", _hoisted_5, toDisplayString(formattedDateRange.value || __props.placeholder || "Select dates"), 1)
646
+ ]),
647
+ nightCount.value > 0 ? (openBlock(), createElementBlock("p", _hoisted_6, toDisplayString(nightCount.value) + " " + toDisplayString(nightCount.value === 1 ? "night" : "nights"), 1)) : createCommentVNode("", true)
648
+ ])
649
+ ]),
650
+ createElementVNode("div", _hoisted_7, [
651
+ createElementVNode("div", _hoisted_8, [
652
+ (openBlock(true), createElementBlock(Fragment, null, renderList(calendarMonths.value, (monthData, index) => {
653
+ return openBlock(), createElementBlock("div", {
654
+ key: monthData.month.format("YYYY-MM"),
655
+ class: "rangepicker-month"
656
+ }, [
657
+ createElementVNode("div", _hoisted_9, [
658
+ __props.variant === "mobile" || index === 0 ? (openBlock(), createElementBlock("button", {
659
+ key: 0,
660
+ class: "rangepicker-nav-button",
661
+ disabled: !canNavigatePrevious.value,
662
+ "aria-label": "Previous month",
663
+ onClick: previousMonth
664
+ }, [..._cache[0] || (_cache[0] = [
665
+ createElementVNode("svg", {
666
+ xmlns: "http://www.w3.org/2000/svg",
667
+ class: "arch-h-5 arch-w-5",
668
+ viewBox: "0 0 20 20",
669
+ fill: "currentColor"
670
+ }, [
671
+ createElementVNode("path", {
672
+ "fill-rule": "evenodd",
673
+ 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",
674
+ "clip-rule": "evenodd"
675
+ })
676
+ ], -1)
677
+ ])], 8, _hoisted_10)) : (openBlock(), createElementBlock("div", _hoisted_11)),
678
+ createElementVNode("span", _hoisted_12, toDisplayString(monthData.month.format("MMMM YYYY")), 1),
679
+ __props.variant === "mobile" || index === calendarMonths.value.length - 1 ? (openBlock(), createElementBlock("button", {
680
+ key: 2,
681
+ class: "rangepicker-nav-button",
682
+ disabled: !canNavigateNext.value,
683
+ "aria-label": "Next month",
684
+ onClick: nextMonth
685
+ }, [..._cache[1] || (_cache[1] = [
686
+ createElementVNode("svg", {
687
+ xmlns: "http://www.w3.org/2000/svg",
688
+ class: "arch-h-5 arch-w-5",
689
+ viewBox: "0 0 20 20",
690
+ fill: "currentColor"
691
+ }, [
692
+ createElementVNode("path", {
693
+ "fill-rule": "evenodd",
694
+ 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",
695
+ "clip-rule": "evenodd"
696
+ })
697
+ ], -1)
698
+ ])], 8, _hoisted_13)) : (openBlock(), createElementBlock("div", _hoisted_14))
699
+ ]),
700
+ createElementVNode("div", _hoisted_15, [
701
+ (openBlock(true), createElementBlock(Fragment, null, renderList(weekdays.value, (weekday) => {
702
+ return openBlock(), createElementBlock("div", {
703
+ key: weekday,
704
+ class: "rangepicker-weekday"
705
+ }, toDisplayString(weekday), 1);
706
+ }), 128))
707
+ ]),
708
+ createElementVNode("div", _hoisted_16, [
709
+ (openBlock(true), createElementBlock(Fragment, null, renderList(monthData.days, (day) => {
710
+ return openBlock(), createElementBlock("button", {
711
+ key: day.date.unix(),
712
+ class: normalizeClass(getDayClasses(day)),
713
+ disabled: day.isDisabled,
714
+ "aria-label": day.date.format("MMMM D, YYYY"),
715
+ onClick: (e) => selectDate(day, e),
716
+ onMouseenter: (e) => handleDayHover(day, e),
717
+ onMouseleave: handleDayLeave
718
+ }, [
719
+ createElementVNode("span", null, toDisplayString(day.date.date()), 1)
720
+ ], 42, _hoisted_17);
721
+ }), 128))
722
+ ])
723
+ ]);
724
+ }), 128))
639
725
  ]),
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))
726
+ !__props.autoApply ? (openBlock(), createElementBlock("div", _hoisted_18, [
727
+ createElementVNode("button", {
728
+ 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",
729
+ onClick: cancel
730
+ }, " Cancel "),
731
+ createElementVNode("button", {
732
+ 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",
733
+ style: normalizeStyle({
734
+ backgroundColor: ((_a = __props.colorStyles) == null ? void 0 : _a["--color-primary"]) ? `rgb(${__props.colorStyles["--color-primary"]})` : "rgb(37 99 235)"
735
+ }),
736
+ disabled: !localStartDate.value || !localEndDate.value,
737
+ onClick: apply
738
+ }, " Apply ", 12, _hoisted_19)
739
+ ])) : createCommentVNode("", true)
718
740
  ]),
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
- ]),
741
+ showTooltipComputed.value ? (openBlock(), createElementBlock("div", {
742
+ key: 0,
743
+ class: "rangepicker-tooltip",
744
+ style: normalizeStyle(tooltipStyle.value)
745
+ }, [
746
+ createElementVNode("div", _hoisted_20, toDisplayString(tooltipText.value), 1)
747
+ ], 4)) : createCommentVNode("", true)
748
+ ], 6)
749
+ ])) : createCommentVNode("", true)
750
+ ];
751
+ }),
741
752
  _: 1
742
753
  }, 8, ["name"])
743
754
  ]);
@@ -751,26 +762,41 @@ const _export_sfc = (sfc, props) => {
751
762
  }
752
763
  return target;
753
764
  };
754
- const Rangepicker = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-581930b0"]]);
765
+ const Rangepicker = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-4a1aa705"]]);
755
766
  const _hoisted_1 = { class: "rangepicker-input-container" };
756
767
  const _hoisted_2 = ["id", "value", "placeholder", "readonly", "name"];
757
768
  const _sfc_main = /* @__PURE__ */ defineComponent({
758
769
  __name: "RangepickerInput",
759
770
  props: {
760
771
  id: {},
761
- close: { type: Boolean },
762
- modelValue: {},
763
772
  name: {},
764
773
  placeholder: { default: "Select dates" },
765
774
  readonly: { type: Boolean, default: true },
766
775
  class: {},
767
- options: {},
776
+ modelValue: {},
777
+ close: { type: Boolean },
768
778
  variant: { default: "desktop" },
769
779
  primaryColor: {},
770
780
  secondaryColor: {},
771
781
  fontFamily: {},
772
782
  borderRadius: {},
773
- showClearButton: { type: Boolean, default: true }
783
+ showClearButton: { type: Boolean, default: true },
784
+ autoApply: { type: Boolean },
785
+ allowRepick: { type: Boolean },
786
+ dropdowns: {},
787
+ startDate: {},
788
+ minDate: {},
789
+ maxDate: {},
790
+ format: {},
791
+ numberOfColumns: {},
792
+ numberOfMonths: {},
793
+ singleMode: { type: Boolean },
794
+ tooltipText: {},
795
+ tooltipNumber: {},
796
+ inlineMode: { type: Boolean },
797
+ minDays: {},
798
+ maxDays: {},
799
+ showTooltip: { type: Boolean }
774
800
  },
775
801
  emits: ["update:modelValue", "focusin"],
776
802
  setup(__props, { emit: __emit }) {
@@ -859,7 +885,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
859
885
  return styles;
860
886
  });
861
887
  return (_ctx, _cache) => {
862
- var _a, _b, _c, _d, _e, _f, _g, _h, _i;
863
888
  return openBlock(), createElementBlock("div", {
864
889
  ref_key: "wrapperRef",
865
890
  ref: wrapperRef,
@@ -910,15 +935,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
910
935
  "is-open": isOpen.value,
911
936
  "onUpdate:isOpen": _cache[1] || (_cache[1] = ($event) => isOpen.value = $event),
912
937
  "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,
938
+ "min-date": __props.minDate,
939
+ "max-date": __props.maxDate,
940
+ "min-days": __props.minDays,
941
+ "max-days": __props.maxDays,
942
+ "value-of-months": __props.numberOfMonths || 2,
943
+ "value-of-columns": __props.numberOfColumns || 2,
944
+ format: __props.format || "DD MMM YYYY",
945
+ "auto-apply": __props.autoApply !== false,
946
+ "show-tooltip": __props.showTooltip !== false,
922
947
  variant: __props.variant,
923
948
  close: props.close,
924
949
  "color-styles": colorStyles.value,
@@ -928,7 +953,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
928
953
  };
929
954
  }
930
955
  });
931
- const RangepickerInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d06ced61"]]);
956
+ const RangepickerInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-44888cf3"]]);
932
957
  function useRangepicker(triggerRef, options = {}) {
933
958
  const isOpen = ref(false);
934
959
  const dateRange = ref({ startDate: "", endDate: "" });