@pequity/squirrel 10.0.3 → 11.0.0

package/dist/es/p-date-picker.js

@@ -1,4 +1,148 @@
-import { _ as _sfc_main } from "./chunks/p-date-picker.js";
+import { defineComponent, mergeModels, useModel, useAttrs, computed, createBlock, openBlock, unref, mergeProps, withCtx, createVNode, withKeys } from "vue";
+import { _ as _sfc_main$1 } from "./chunks/p-input.js";
+import { getDateFnsLocale } from "./dateLocale.js";
+import { VueDatePicker } from "@vuepic/vue-datepicker";
+import { useI18n } from "vue-i18n";
+import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "PDatePicker",
+    inheritAttrs: false
+  },
+  __name: "p-date-picker",
+  props: /* @__PURE__ */ mergeModels({
+    multiCalendars: { type: [Boolean, Number, String, Object] },
+    modelType: { default: "yyyy-MM-dd" },
+    dark: { type: Boolean },
+    transitions: { type: [Boolean, Object] },
+    ariaLabels: {},
+    hideNavigation: {},
+    timezone: {},
+    vertical: { type: Boolean },
+    hideMonthYearSelect: { type: Boolean },
+    disableYearSelect: { type: Boolean },
+    yearRange: {},
+    autoApply: { type: Boolean, default: true },
+    disabledDates: {},
+    startDate: {},
+    hideOffsetDates: { type: Boolean, default: true },
+    noToday: { type: Boolean },
+    allowedDates: {},
+    markers: {},
+    presetDates: {},
+    flow: {},
+    preventMinMaxNavigation: { type: Boolean },
+    reverseYears: { type: Boolean },
+    weekPicker: { type: Boolean },
+    filters: {},
+    arrowNavigation: { type: Boolean },
+    highlight: {},
+    teleport: { type: [String, Boolean] },
+    centered: { type: Boolean },
+    locale: {},
+    weekStart: { default: 0 },
+    weekNumbers: { type: [Boolean, Object] },
+    dayNames: {},
+    monthPicker: { type: Boolean },
+    yearPicker: { type: Boolean },
+    modelAuto: { type: Boolean },
+    formats: { default: () => ({ input: "dd-MMM-yyyy" }) },
+    multiDates: { type: [Boolean, Object] },
+    minDate: {},
+    maxDate: {},
+    minTime: {},
+    maxTime: {},
+    inputAttrs: {},
+    timeConfig: { default: () => ({ enableTimePicker: false }) },
+    placeholder: { default: "" },
+    timePicker: { type: Boolean },
+    range: { type: [Boolean, Object] },
+    menuId: {},
+    disabled: { type: Boolean },
+    readonly: { type: Boolean },
+    inline: { type: [Boolean, Object] },
+    textInput: { type: [Boolean, Object], default: true },
+    sixWeeks: { type: [Boolean, String] },
+    actionRow: {},
+    focusStartDate: { type: Boolean },
+    disabledTimes: {},
+    calendar: {},
+    config: {},
+    quarterPicker: { type: Boolean },
+    yearFirst: { type: Boolean },
+    loading: { type: Boolean },
+    ui: {},
+    floating: {},
+    name: { default: "" },
+    label: { default: "" },
+    errorMsg: { default: "" },
+    required: { type: Boolean, default: false }
+  }, {
+    "modelValue": {},
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const model = useModel(__props, "modelValue");
+    const { locale } = useI18n();
+    const attrs = useAttrs();
+    const datePickerProps = computed(() => {
+      const { name, label, errorMsg, required, ...vueDatePickerProps } = props;
+      const { class: classes, style, ...attrsWithoutClassAndStyle } = attrs;
+      return {
+        ...vueDatePickerProps,
+        ...attrsWithoutClassAndStyle,
+        locale: getDateFnsLocale(locale.value)
+      };
+    });
+    const inputPropsAndAttrs = 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 : typeof props.formats?.input === "string" ? props.formats.input : "dd-MMM-yyyy";
+      res.name = props.name;
+      res.readonly = props.readonly;
+      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 openBlock(), createBlock(unref(VueDatePicker), mergeProps({
+        modelValue: model.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+        class: [
+          { hidden: _ctx.$attrs.hidden },
+          _ctx.$attrs.class,
+          { "has-label": !!__props.label },
+          { "has-error": !!__props.errorMsg },
+          `size-${_ctx.$attrs.size || "md"}`
+        ]
+      }, datePickerProps.value), {
+        "dp-input": withCtx(({ value, onInput, onEnter, onTab, onFocus, onBlur, onClear }) => [
+          createVNode(_sfc_main$1, mergeProps({ "model-value": value }, inputPropsAndAttrs.value, {
+            onInput: ($event) => handleInput($event, onInput, onClear),
+            onKeydown: [
+              withKeys(($event) => onEnter($event), ["enter"]),
+              withKeys(($event) => onTab($event), ["tab"])
+            ],
+            onFocus,
+            onBlur
+          }), null, 16, ["model-value", "onInput", "onKeydown", "onFocus", "onBlur"])
+        ]),
+        _: 1
+      }, 16, ["modelValue", "class"]);
+    };
+  }
+});
+const pDatePicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5f4efd82"]]);
 export {
-  _sfc_main as default
+  pDatePicker as default
 };

package/dist/es/p-drawer.js

@@ -112,7 +112,7 @@ const __default__ = defineComponent({
      */
     closeLabel: {
       type: String,
-      default: "Close"
+      default: ""
     },
     /**
      * Whether to show the backdrop behind the drawer.
@@ -236,7 +236,7 @@ const __default__ = defineComponent({
 });
 const __injectCSSVars__ = () => {
   useCssVars((_ctx) => ({
-    "v0ae27020": _ctx.width
+    "v485968ad": _ctx.width
   }));
 };
 const __setup__ = __default__.setup;
@@ -308,7 +308,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             }, [
               _ctx.enableClose ? (openBlock(), createBlock(_component_PCloseBtn, {
                 key: 0,
-                "aria-label": _ctx.closeLabel,
+                "aria-label": _ctx.closeLabel || _ctx.$t("squirrel.close"),
                 class: "flex-0",
                 disabled: _ctx.disabled,
                 onClick: _ctx.close
@@ -353,7 +353,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     }, 8, ["enter-active-class", "leave-active-class", "onBeforeEnter", "onEnter", "onAfterEnter", "onBeforeLeave", "onLeave", "onAfterLeave"])
   ], 8, ["to"])) : createCommentVNode("", true);
 }
-const pDrawer = /* @__PURE__ */ _export_sfc(__default__, [["render", _sfc_render], ["__scopeId", "data-v-b08a9ced"]]);
+const pDrawer = /* @__PURE__ */ _export_sfc(__default__, [["render", _sfc_render], ["__scopeId", "data-v-e3739b6f"]]);
 export {
   pDrawer as default
 };

package/dist/es/p-input-search.js

@@ -3,6 +3,7 @@ import { S as SIZES } from "./chunks/p-btn.types.js";
 import { _ as _sfc_main$2 } from "./chunks/p-icon.js";
 import { _ as _sfc_main$1 } from "./chunks/p-input.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
+const _hoisted_1 = ["aria-label"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "PInputSearch",
@@ -103,7 +104,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }, null, 2)), [
             [
               _directive_tooltip,
-              { content: "Press enter to search", delay: { show: 100, hide: 0 } },
+              { content: _ctx.$t("squirrel.input_search_press_enter_to_search"), delay: { show: 100, hide: 0 } },
               void 0,
               { bottom: true }
             ]
@@ -111,7 +112,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           query.value ? (openBlock(), createElementBlock("button", {
             key: 1,
             role: "button",
-            "aria-label": "Clear search input",
+            "aria-label": _ctx.$t("squirrel.input_search_clear_search_input"),
             class: normalizeClass(["absolute cursor-pointer", clearIconClasses[__props.size]]),
             onClick: clearSearch
           }, [
@@ -119,14 +120,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               icon: "cancel-circle",
               class: "text-p-gray-40 hover:text-p-gray-50"
             })
-          ], 2)) : createCommentVNode("", true)
+          ], 10, _hoisted_1)) : createCommentVNode("", true)
         ]),
         _: 1
       }, 16, ["modelValue", "size"]);
     };
   }
 });
-const PInputSearch = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ce44730a"]]);
+const PInputSearch = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ed3f0628"]]);
 export {
   PInputSearch as default
 };

package/dist/es/p-modal.js

@@ -189,7 +189,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   emits: ["before-open", "opening", "opened", "before-close", "closing", "closed", "update:modelValue", "click:overlay"],
   setup(__props, { emit: __emit }) {
     useCssVars((_ctx) => ({
-      "a8364442": __props.maxWidth
+      "v19879df9": __props.maxWidth
     }));
     let animatingZIndex = 0;
     const emit = __emit;
@@ -404,7 +404,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         createVNode(PCloseBtn, {
                           disabled: __props.disabled,
                           class: normalizeClass({ invisible: !__props.enableClose }),
-                          "aria-label": __props.closeLabel,
+                          "aria-label": __props.closeLabel || _ctx.$t("squirrel.close"),
                           onClick: withModifiers(close, ["prevent"])
                         }, null, 8, ["disabled", "class", "aria-label"])
                       ])
@@ -446,7 +446,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const pModal = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5c370dbc"]]);
+const pModal = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f666f5ac"]]);
 export {
   pModal as default
 };

package/dist/es/p-select-pill.js

@@ -135,7 +135,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     createElementVNode("div", _hoisted_2, null, 512),
     (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (o) => {
       return openBlock(), createElementBlock("button", {
-        key: o[_ctx.itemValue],
+        key: String(o[_ctx.itemValue]),
         disabled: o.disabled,
         class: normalizeClass(["z-10 duration-700", [
           _ctx.SIZES[_ctx.size],

package/dist/squirrel/components/p-date-picker/p-date-picker.vue.d.ts

@@ -1,5 +1,10 @@
-import { type VueDatePickerProps } from '@vuepic/vue-datepicker';
-type Props = {
+import { type RootProps } from '@vuepic/vue-datepicker';
+type Props = Omit<RootProps, 'modelValue'> & {
+    /**
+     * The name of the date picker field.
+     * Passed to the underlying PInput component.
+     */
+    name?: string;
     /**
      * Text label for the date picker field.
      * Passed to the underlying PInput component.
@@ -15,42 +20,33 @@ type Props = {
      * Passed to the underlying PInput component and adds visual indicator.
      */
     required?: boolean;
-} & VueDatePickerProps;
+};
 type __VLS_Props = Props;
 type __VLS_ModelProps = {
     /**
      * The selected date value (v-model).
-     * Supports two-way binding for form inputs.
+     * Supports all VueDatePicker model types: Date, Date[], string, TimeModel, etc.
      */
-    modelValue?: Date | string | null;
+    modelValue?: RootProps['modelValue'];
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | Date | null) => any;
+    "update:modelValue": (value: import("@vuepic/vue-datepicker").ModelValue) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | Date | null) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: import("@vuepic/vue-datepicker").ModelValue) => any) | undefined;
 }>, {
-    inline: boolean | {
-        input?: boolean;
-    };
+    name: string;
+    placeholder: string;
     label: string;
     required: boolean;
     errorMsg: string;
-    enableTimePicker: boolean;
-    weekStart: "0" | "1" | "2" | "3" | "4" | "5" | "6" | 0 | 1 | 2 | 3 | 4 | 5 | 6;
-    format: string | ((date: Date) => string) | ((dates: Date[]) => string);
+    modelType: string;
     autoApply: boolean;
-    textInput: boolean | {
-        enterSubmit?: boolean;
-        tabSubmit?: boolean;
-        openMenu?: "open" | "toggle" | boolean;
-        rangeSeparator?: string;
-        selectOnFocus?: boolean;
-        format?: string | string[] | ((value: string) => Date | null);
-        escClose?: boolean;
-    };
     hideOffsetDates: boolean;
-    modelType: "timestamp" | "iso" | "format" | string;
+    weekStart: string | number;
+    formats: Partial<import("@vuepic/vue-datepicker").FormatsConfig> | null;
+    timeConfig: Partial<import("@vuepic/vue-datepicker").TimeConfig>;
+    textInput: boolean | Partial<import("@vuepic/vue-datepicker").TextInputConfig>;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/squirrel/components/p-drawer/p-drawer.vue.d.ts

@@ -145,7 +145,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     beforeClose(): void;
     closing(): void;
     closed(): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "closed" | "before-open" | "opening" | "opened" | "before-close" | "closing")[], "update:modelValue" | "closed" | "before-open" | "opening" | "opened" | "before-close" | "closing", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "before-open" | "opening" | "opened" | "before-close" | "closing" | "closed")[], "update:modelValue" | "before-open" | "opening" | "opened" | "before-close" | "closing" | "closed", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      * Target element to append the drawer to.
      * Usually 'body' for proper z-index stacking.
@@ -291,8 +291,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     disabled: boolean;
     modelValue: boolean;
     errorMsg: string;
-    position: string;
     appendTo: string;
+    position: string;
     zIndex: number;
     drawerStyle: Record<string, any>;
     drawerClass: string;

package/dist/squirrel/components/p-inline-date-picker/p-inline-date-picker.vue.d.ts

@@ -1,4 +1,4 @@
-import { type VueDatePickerProps } from '@vuepic/vue-datepicker';
+import { type RootProps } from '@vuepic/vue-datepicker';
 type __VLS_Slots = {
     /**
      * Custom label content - overrides the label prop.
@@ -10,7 +10,7 @@ type __VLS_Slots = {
         labelClasses: string;
     }) => unknown;
 };
-type Props = {
+type Props = Omit<RootProps, 'modelValue'> & {
     /**
      * Text label for the date picker field.
      * If not provided, you can use the label slot instead.
@@ -26,32 +26,31 @@ type Props = {
      * Adds required attribute and visual indicator.
      */
     required?: boolean;
-} & VueDatePickerProps;
+};
 type __VLS_Props = Props;
 type __VLS_ModelProps = {
     /**
      * The selected date value (v-model).
-     * Supports two-way binding for form inputs.
+     * Supports all VueDatePicker model types: Date, Date[], string, TimeModel, etc.
      */
-    modelValue?: Date | string | null;
+    modelValue?: RootProps['modelValue'];
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | Date | null) => any;
+    "update:modelValue": (value: import("@vuepic/vue-datepicker").ModelValue) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | Date | null) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: import("@vuepic/vue-datepicker").ModelValue) => any) | undefined;
 }>, {
-    inline: boolean | {
-        input?: boolean;
-    };
+    placeholder: string;
     label: string;
     required: boolean;
     errorMsg: string;
-    enableTimePicker: boolean;
-    weekStart: "0" | "1" | "2" | "3" | "4" | "5" | "6" | 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    modelType: string;
     autoApply: boolean;
     hideOffsetDates: boolean;
-    modelType: "timestamp" | "iso" | "format" | string;
+    weekStart: string | number;
+    timeConfig: Partial<import("@vuepic/vue-datepicker").TimeConfig>;
+    textInput: boolean | Partial<import("@vuepic/vue-datepicker").TextInputConfig>;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/squirrel/components/p-modal/p-modal.vue.d.ts

@@ -188,12 +188,12 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => any;
-    closed: () => any;
     "before-open": () => any;
     opening: () => any;
     opened: () => any;
     "before-close": () => any;
     closing: () => any;
+    closed: () => any;
     "click:overlay": (event: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /**
@@ -358,12 +358,12 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    onClosed?: (() => any) | undefined;
     "onBefore-open"?: (() => any) | undefined;
     onOpening?: (() => any) | undefined;
     onOpened?: (() => any) | undefined;
     "onBefore-close"?: (() => any) | undefined;
     onClosing?: (() => any) | undefined;
+    onClosed?: (() => any) | undefined;
     "onClick:overlay"?: ((event: MouseEvent) => any) | undefined;
 }>, {
     name: string;

package/dist/squirrel/components/p-steps/p-steps.vue.d.ts

@@ -21,8 +21,8 @@ declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {},
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     "onClick:step"?: ((step: StepItem, index: number) => any) | undefined;
 }>, {
-    activeStep: StepItem["value"];
     steps: readonly StepItem[];
+    activeStep: StepItem["value"];
     clickable: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/squirrel/index.d.ts

@@ -1,6 +1,7 @@
 import './assets/squirrel.css';
 export * from './components';
 export * from './composables';
+export * from './plugin';
 export * from './tailwind/config';
 export * from './utils';
 export * from 'tailwind-variants';

package/dist/squirrel/plugin/index.d.ts

@@ -0,0 +1,11 @@
+import { type Plugin } from 'vue';
+/**
+ * Squirrel Vue Plugin for i18n integration.
+ *
+ * This plugin merges Squirrel's translations with the consumer's existing i18n instance.
+ * This ensures there's only one i18n instance and no component/directive conflicts.
+ *
+ * @param app - Vue application instance
+ * @param i18n - The consumer's i18n instance with mergeLocaleMessage support
+ */
+export declare const SquirrelPlugin: Plugin;

package/dist/squirrel/utils/dateLocale.d.ts

@@ -0,0 +1,2 @@
+import type { Locale } from 'date-fns';
+export declare const getDateFnsLocale: (localeCode: string) => Locale;