@pequity/squirrel 5.4.7 → 5.4.9

package/README.md

@@ -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

@@ -1,107 +1,165 @@
 "use strict";
 const vue = require("vue");
 const pInput = require("../p-input.js");
-const dayjs = require("dayjs");
-const vCalendar = require("v-calendar");
-const lodashEs = require("lodash-es");
-const useInputClasses = require("../useInputClasses.js");
-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-dropdown-select.js

@@ -4,11 +4,11 @@ const pDropdown = require("../p-dropdown.js");
 const pIcon_vue_vue_type_script_setup_true_lang = require("./p-icon.js");
 const pInputSearch = require("../p-input-search.js");
 const pSelectList = require("../p-select-list.js");
-const lodashEs = require("lodash-es");
-const text = require("../text.js");
-const string = require("../string.js");
-const useInputClasses = require("../useInputClasses.js");
 const useSelectList = require("../useSelectList.js");
+const useInputClasses = require("../useInputClasses.js");
+const string = require("../string.js");
+const text = require("../text.js");
+const lodashEs = require("lodash-es");
 const _imports_0 = "data:image/svg+xml,%3csvg%20width='18'%20height='12'%20viewBox='0%200%2018%2012'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M16.1383%200.166992L6.30411%209.83366L1.69828%205.27533L0.526611%206.46033L5.71578%2011.597C5.87174%2011.7509%206.08205%2011.8372%206.3012%2011.8372C6.52034%2011.8372%206.73065%2011.7509%206.88661%2011.597L17.3033%201.35366L16.1383%200.166992Z'%20fill='%231A123B'%20/%3e%3c/svg%3e";
 const _hoisted_1 = ["data-has-error"];
 const _hoisted_2 = {

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

@@ -1,8 +1,7 @@
 "use strict";
 const vue = require("vue");
-const dayjs = require("dayjs");
-const vCalendar = require("v-calendar");
 const useInputClasses = require("../useInputClasses.js");
+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), [

package/dist/cjs/chunks/p-link.js

@@ -1,8 +1,8 @@
 "use strict";
 const vue = require("vue");
-const vueRouter = require("vue-router");
 const link = require("../link.js");
 const sanitization = require("../sanitization.js");
+const vueRouter = require("vue-router");
 const _hoisted_1 = ["href"];
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ...{

package/dist/cjs/chunks/p-select.js

@@ -1,7 +1,7 @@
 "use strict";
 const vue = require("vue");
-const inputClassesShared = require("../inputClassesShared.js");
 const useInputClasses = require("../useInputClasses.js");
+const inputClassesShared = require("../inputClassesShared.js");
 const _hoisted_1 = ["data-has-error"];
 const _hoisted_2 = ["value"];
 const _hoisted_3 = ["value"];