npm - @pequity/squirrel - Versions diffs - 5.4.8 → 5.4.9 - Mend

@pequity/squirrel 5.4.8 → 5.4.9

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 (19) hide show

package/README.md CHANGED Viewed

@@ -10,7 +10,7 @@ The library is built using [Vue 3](https://vuejs.org/) and [Tailwind CSS](https:
 Install the package and its dependencies using `pnpm`:
 ```bash
-pnpm i vue vue-router @pequity/squirrel @popperjs/core @tanstack/vue-virtual dayjs floating-vue lodash-es v-calendar vue-currency-input vue-toastification@2.0.0-rc.5
+pnpm i vue vue-router @pequity/squirrel @tanstack/vue-virtual @vuepic/vue-datepicker dayjs floating-vue lodash-es vue-currency-input vue-toastification@2.0.0-rc.5
 ```
 Install Tailwind CSS:

package/dist/cjs/chunks/p-date-picker.js CHANGED Viewed

@@ -1,107 +1,165 @@
 "use strict";
 const vue = require("vue");
 const pInput = require("../p-input.js");
-const useInputClasses = require("../useInputClasses.js");
-const dayjs = require("dayjs");
-const lodashEs = require("lodash-es");
-const vCalendar = require("v-calendar");
-const _hoisted_1 = ["data-has-error"];
+const VueDatePicker = require("@vuepic/vue-datepicker");
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ...{
     name: "PDatePicker",
     inheritAttrs: false
   },
   __name: "p-date-picker",
-  props: {
-    modelValue: { default: "" },
+  props: /* @__PURE__ */ vue.mergeModels({
     label: { default: "" },
     errorMsg: { default: "" },
     required: { type: Boolean, default: false },
-    minDate: { default: null },
-    maxDate: { default: null },
-    timezone: { default: "" }
-  },
+    uid: {},
+    name: {},
+    is24: { type: Boolean },
+    enableTimePicker: { type: Boolean, default: false },
+    range: { type: [Boolean, Object] },
+    multiCalendars: { type: [Boolean, Number, String, Object] },
+    modelValue: {},
+    locale: {},
+    position: {},
+    dark: { type: Boolean },
+    placeholder: {},
+    weekNumbers: {},
+    hoursIncrement: {},
+    hoursGridIncrement: {},
+    secondsGridIncrement: {},
+    minutesGridIncrement: {},
+    minutesIncrement: {},
+    secondsIncrement: {},
+    minDate: {},
+    maxDate: {},
+    minTime: {},
+    maxTime: {},
+    weekStart: { default: 0 },
+    disabled: { type: Boolean },
+    readonly: { type: Boolean },
+    format: { type: [String, Function], default: "dd-MMM-yyyy" },
+    previewFormat: {},
+    hideInputIcon: { type: Boolean },
+    state: { type: Boolean },
+    clearable: { type: Boolean },
+    autoApply: { type: Boolean, default: true },
+    filters: {},
+    disableMonthYearSelect: { type: Boolean },
+    yearRange: {},
+    disabledDates: {},
+    inline: { type: [Boolean, Object], default: false },
+    selectText: {},
+    cancelText: {},
+    weekNumName: {},
+    autoPosition: { type: [Boolean, String] },
+    monthPicker: { type: Boolean },
+    timePicker: { type: Boolean },
+    textInput: { type: [Boolean, Object], default: true },
+    monthNameFormat: {},
+    startDate: {},
+    startTime: {},
+    hideOffsetDates: { type: Boolean, default: true },
+    noToday: { type: Boolean },
+    noHoursOverlay: { type: Boolean },
+    noMinutesOverlay: { type: Boolean },
+    noSecondsOverlay: { type: Boolean },
+    altPosition: {},
+    disabledWeekDays: {},
+    allowedDates: {},
+    nowButtonLabel: {},
+    monthChangeOnScroll: { type: [Boolean, String] },
+    markers: {},
+    transitions: { type: [Boolean, Object] },
+    enableSeconds: { type: Boolean },
+    escClose: { type: Boolean },
+    spaceConfirm: { type: Boolean },
+    monthChangeOnArrows: { type: Boolean },
+    formatLocale: {},
+    autocomplete: {},
+    multiDates: { type: [Boolean, Object] },
+    presetDates: {},
+    flow: {},
+    partialFlow: { type: Boolean },
+    preventMinMaxNavigation: { type: Boolean },
+    utc: { type: [Boolean, String] },
+    reverseYears: { type: Boolean },
+    weekPicker: { type: Boolean },
+    vertical: { type: Boolean },
+    ariaLabels: {},
+    arrowNavigation: { type: Boolean },
+    yearPicker: { type: Boolean },
+    dayNames: {},
+    modelType: { default: "yyyy-MM-dd" },
+    modelAuto: { type: Boolean },
+    highlight: {},
+    offset: {},
+    teleportCenter: { type: Boolean },
+    teleport: { type: [Boolean, String] },
+    ignoreTimeValidation: { type: Boolean },
+    dayClass: {},
+    hideNavigation: {},
+    sixWeeks: { type: [Boolean, String] },
+    timezone: {},
+    disableYearSelect: { type: Boolean },
+    focusStartDate: { type: Boolean },
+    disabledTimes: {},
+    timePickerInline: { type: Boolean },
+    calendar: {},
+    config: {},
+    quarterPicker: { type: Boolean },
+    yearFirst: { type: Boolean },
+    loading: { type: Boolean },
+    onInternalModelChange: {},
+    enableMinutes: { type: Boolean },
+    ui: {}
+  }, {
+    "modelValue": { default: "" },
+    "modelModifiers": {}
+  }),
   emits: ["update:modelValue"],
-  setup(__props, { emit: __emit }) {
-    const selectAttribute = { highlight: { class: "bg-primary", contentClass: "text-white" } };
-    const DEFAULT_MASKS = {
-      // The mask for the input
-      input: "DD-MMM-YYYY",
-      // The mask for the model value
-      data: "YYYY-MM-DD"
-    };
+  setup(__props) {
     const props = __props;
-    const emit = __emit;
-    const { labelClasses, errorMsgClasses } = useInputClasses.useInputClasses(props);
+    const model = vue.useModel(__props, "modelValue");
     const attrs = vue.useAttrs();
-    const innerValue = vue.ref(null);
-    const stopWatch = vue.ref(false);
-    const masks = vue.computed(() => {
-      return Object.assign(DEFAULT_MASKS, attrs.masks);
-    });
-    const displayPlaceholder = vue.computed(() => {
-      return lodashEs.isString(attrs.placeholder) ? attrs.placeholder : masks.value.input;
+    const datePickerProps = vue.computed(() => {
+      const { modelValue: _, ...propsWithoutModelValue } = props;
+      return propsWithoutModelValue;
     });
-    const attrsWithoutClassAndStyle = vue.computed(() => {
-      const { class: classes, style: style2, ...rest } = attrs;
-      return rest;
-    });
-    const style = vue.computed(() => {
-      return attrs.style;
-    });
-    vue.watch(
-      () => props.modelValue,
-      (nV) => {
-        if (!stopWatch.value) {
-          innerValue.value = nV ? dayjs(nV, masks.value.data).toDate() : null;
-        }
-      },
-      { immediate: true }
-    );
-    vue.watch(innerValue, (nV) => {
-      const toEmit = lodashEs.isDate(nV) && nV.toString() !== "Invalid Date" ? dayjs(nV).format(masks.value.data) : null;
-      stopWatch.value = true;
-      emit("update:modelValue", toEmit);
-      vue.nextTick(() => {
-        stopWatch.value = false;
-      });
+    const inputPropsAndAttrs = vue.computed(() => {
+      const { class: classes, style, ...res } = attrs;
+      res.label = props.label;
+      res.errorMsg = props.errorMsg;
+      res.required = props.required;
+      res.disabled = props.disabled;
+      res.placeholder = props.placeholder ? props.placeholder : props.format;
+      return res;
     });
+    const handleInput = (e, onInputFn, onClearFn) => {
+      if (e.target instanceof HTMLInputElement && e.target.value === "") {
+        onClearFn(e);
+        return;
+      }
+      return onInputFn(e);
+    };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", {
-        class: vue.normalizeClass([{ hidden: _ctx.$attrs.hidden }, _ctx.$attrs.class]),
-        "data-has-error": !!_ctx.errorMsg,
-        style: vue.normalizeStyle(style.value)
-      }, [
-        vue.renderSlot(_ctx.$slots, "label", {
-          label: _ctx.label,
-          labelClasses: vue.unref(labelClasses)
-        }, () => [
-          _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", {
-            key: 0,
-            class: vue.normalizeClass(vue.unref(labelClasses))
-          }, vue.toDisplayString(_ctx.label), 3)) : vue.createCommentVNode("", true)
+      return vue.openBlock(), vue.createBlock(vue.unref(VueDatePicker), vue.mergeProps({
+        modelValue: model.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+        class: [{ hidden: _ctx.$attrs.hidden }, _ctx.$attrs.class]
+      }, datePickerProps.value), {
+        "dp-input": vue.withCtx(({ value, onInput, onEnter, onTab, onFocus, onBlur, onClear }) => [
+          vue.createVNode(pInput, vue.mergeProps({ "model-value": value }, inputPropsAndAttrs.value, {
+            onInput: ($event) => handleInput($event, onInput, onClear),
+            onKeydown: [
+              vue.withKeys(($event) => onEnter($event), ["enter"]),
+              vue.withKeys(($event) => onTab($event), ["tab"])
+            ],
+            onFocus,
+            onBlur
+          }), null, 16, ["model-value", "onInput", "onKeydown", "onFocus", "onBlur"])
         ]),
-        vue.createVNode(vue.unref(vCalendar.DatePicker), {
-          modelValue: innerValue.value,
-          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => innerValue.value = $event),
-          "select-attribute": selectAttribute,
-          popover: { visibility: "click", placement: "auto" },
-          "min-date": _ctx.minDate || null,
-          "max-date": _ctx.maxDate || null,
-          masks: masks.value,
-          timezone: _ctx.timezone
-        }, {
-          default: vue.withCtx(({ inputValue, inputEvents }) => [
-            vue.createVNode(pInput, vue.mergeProps({ value: inputValue }, attrsWithoutClassAndStyle.value, { placeholder: displayPlaceholder.value }, vue.toHandlers(inputEvents)), null, 16, ["value", "placeholder"])
-          ]),
-          _: 1
-        }, 8, ["modelValue", "min-date", "max-date", "masks", "timezone"]),
-        vue.withDirectives(vue.createElementVNode("div", {
-          class: vue.normalizeClass(vue.unref(errorMsgClasses))
-        }, vue.toDisplayString(_ctx.errorMsg), 3), [
-          [vue.vShow, _ctx.errorMsg]
-        ])
-      ], 14, _hoisted_1);
+        _: 1
+      }, 16, ["modelValue", "class"]);
     };
   }
 });

package/dist/cjs/chunks/p-inline-date-picker.js CHANGED Viewed

@@ -1,8 +1,7 @@
 "use strict";
 const vue = require("vue");
 const useInputClasses = require("../useInputClasses.js");
-const dayjs = require("dayjs");
-const vCalendar = require("v-calendar");
+const VueDatePicker = require("@vuepic/vue-datepicker");
 const _hoisted_1 = ["data-has-error"];
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ...{
@@ -10,69 +9,128 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     inheritAttrs: false
   },
   __name: "p-inline-date-picker",
-  props: {
-    modelValue: { default: "" },
+  props: /* @__PURE__ */ vue.mergeModels({
     label: { default: "" },
     errorMsg: { default: "" },
     required: { type: Boolean, default: false },
-    minDate: { default: null },
-    maxDate: { default: null },
-    timezone: { default: "" }
-  },
+    uid: {},
+    name: {},
+    is24: { type: Boolean },
+    enableTimePicker: { type: Boolean, default: false },
+    range: { type: [Boolean, Object] },
+    multiCalendars: { type: [Boolean, Number, String, Object] },
+    modelValue: {},
+    locale: {},
+    position: {},
+    dark: { type: Boolean },
+    placeholder: {},
+    weekNumbers: {},
+    hoursIncrement: {},
+    hoursGridIncrement: {},
+    secondsGridIncrement: {},
+    minutesGridIncrement: {},
+    minutesIncrement: {},
+    secondsIncrement: {},
+    minDate: {},
+    maxDate: {},
+    minTime: {},
+    maxTime: {},
+    weekStart: { default: 0 },
+    disabled: { type: Boolean },
+    readonly: { type: Boolean },
+    format: {},
+    previewFormat: {},
+    hideInputIcon: { type: Boolean },
+    state: { type: Boolean },
+    clearable: { type: Boolean },
+    autoApply: { type: Boolean, default: true },
+    filters: {},
+    disableMonthYearSelect: { type: Boolean },
+    yearRange: {},
+    disabledDates: {},
+    inline: { type: [Boolean, Object], default: true },
+    selectText: {},
+    cancelText: {},
+    weekNumName: {},
+    autoPosition: { type: [Boolean, String] },
+    monthPicker: { type: Boolean },
+    timePicker: { type: Boolean },
+    textInput: { type: [Boolean, Object] },
+    monthNameFormat: {},
+    startDate: {},
+    startTime: {},
+    hideOffsetDates: { type: Boolean, default: true },
+    noToday: { type: Boolean },
+    noHoursOverlay: { type: Boolean },
+    noMinutesOverlay: { type: Boolean },
+    noSecondsOverlay: { type: Boolean },
+    altPosition: {},
+    disabledWeekDays: {},
+    allowedDates: {},
+    nowButtonLabel: {},
+    monthChangeOnScroll: { type: [Boolean, String] },
+    markers: {},
+    transitions: { type: [Boolean, Object] },
+    enableSeconds: { type: Boolean },
+    escClose: { type: Boolean },
+    spaceConfirm: { type: Boolean },
+    monthChangeOnArrows: { type: Boolean },
+    formatLocale: {},
+    autocomplete: {},
+    multiDates: { type: [Boolean, Object] },
+    presetDates: {},
+    flow: {},
+    partialFlow: { type: Boolean },
+    preventMinMaxNavigation: { type: Boolean },
+    utc: { type: [Boolean, String] },
+    reverseYears: { type: Boolean },
+    weekPicker: { type: Boolean },
+    vertical: { type: Boolean },
+    ariaLabels: {},
+    arrowNavigation: { type: Boolean },
+    yearPicker: { type: Boolean },
+    dayNames: {},
+    modelType: { default: "yyyy-MM-dd" },
+    modelAuto: { type: Boolean },
+    highlight: {},
+    offset: {},
+    teleportCenter: { type: Boolean },
+    teleport: { type: [Boolean, String] },
+    ignoreTimeValidation: { type: Boolean },
+    dayClass: {},
+    hideNavigation: {},
+    sixWeeks: { type: [Boolean, String] },
+    timezone: {},
+    disableYearSelect: { type: Boolean },
+    focusStartDate: { type: Boolean },
+    disabledTimes: {},
+    timePickerInline: { type: Boolean },
+    calendar: {},
+    config: {},
+    quarterPicker: { type: Boolean },
+    yearFirst: { type: Boolean },
+    loading: { type: Boolean },
+    onInternalModelChange: {},
+    enableMinutes: { type: Boolean },
+    ui: {}
+  }, {
+    "modelValue": { default: "" },
+    "modelModifiers": {}
+  }),
   emits: ["update:modelValue"],
-  setup(__props, { emit: __emit }) {
-    const selectAttribute = {
-      highlight: { class: "bg-primary", contentClass: "text-white" }
-    };
-    const DEFAULT_MASKS = {
-      // The mask for the input
-      input: "DD-MMM-YYYY",
-      // The mask for the model value
-      data: "YYYY-MM-DD"
-    };
+  setup(__props) {
     const props = __props;
-    const emit = __emit;
-    const { labelClasses, errorMsgClasses } = useInputClasses.useInputClasses(props);
+    const model = vue.useModel(__props, "modelValue");
     const attrs = vue.useAttrs();
-    const innerValue = vue.ref(null);
-    const datepickerRef = vue.ref(null);
-    const masks = vue.computed(() => {
-      return Object.assign(DEFAULT_MASKS, attrs.masks);
-    });
-    const listeners = vue.computed(() => {
-      return Object.keys(attrs).reduce((acc, curr) => {
-        if (curr.startsWith("on")) {
-          return { ...acc, [curr]: attrs[curr] };
-        } else {
-          return acc;
-        }
-      }, {});
+    const { labelClasses, errorMsgClasses } = useInputClasses.useInputClasses(props);
+    const datePickerProps = vue.computed(() => {
+      const { modelValue: _, ...propsWithoutModelValue } = props;
+      const { class: classes, style: style2, ...attrsWithoutClassAndStyle } = attrs;
+      return { ...propsWithoutModelValue, ...attrsWithoutClassAndStyle };
     });
     const style = vue.computed(() => {
       return attrs.style;
     });
-    const styleDatepicker = vue.computed(() => {
-      return props.errorMsg ? { border: "1px solid #f0453c" } : {};
-    });
-    const dayclick = (e) => {
-      emit("update:modelValue", e.id);
-    };
-    vue.watch(
-      () => props.modelValue,
-      async (nV) => {
-        const date = dayjs(nV, masks.value.data).toDate();
-        if (nV && date.toString() === "Invalid Date") {
-          emit("update:modelValue", null);
-          return;
-        }
-        innerValue.value = nV ? dayjs(nV, masks.value.data).toDate() : null;
-        const datepicker = datepickerRef.value;
-        if (datepicker && typeof datepicker.move === "function" && innerValue.value) {
-          await datepicker.move(innerValue.value);
-        }
-      },
-      { immediate: true }
-    );
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", {
         class: vue.normalizeClass([{ hidden: _ctx.$attrs.hidden }, _ctx.$attrs.class]),
@@ -88,18 +146,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             class: vue.normalizeClass(vue.unref(labelClasses))
           }, vue.toDisplayString(_ctx.label), 3)) : vue.createCommentVNode("", true)
         ]),
-        vue.createVNode(vue.unref(vCalendar.DatePicker), vue.mergeProps({
-          ref_key: "datepickerRef",
-          ref: datepickerRef,
-          class: { "pointer-events-none opacity-70": _ctx.$attrs.disabled },
-          "model-value": innerValue.value,
-          "select-attribute": selectAttribute,
-          "min-date": _ctx.minDate || null,
-          "max-date": _ctx.maxDate || null,
-          masks: masks.value,
-          style: styleDatepicker.value,
-          timezone: _ctx.timezone
-        }, listeners.value, { onDayclick: dayclick }), null, 16, ["class", "model-value", "min-date", "max-date", "masks", "style", "timezone"]),
+        vue.createVNode(vue.unref(VueDatePicker), vue.mergeProps({
+          modelValue: model.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event)
+        }, datePickerProps.value), null, 16, ["modelValue"]),
         vue.withDirectives(vue.createElementVNode("div", {
           class: vue.normalizeClass(vue.unref(errorMsgClasses))
         }, vue.toDisplayString(_ctx.errorMsg), 3), [