@pequity/squirrel 1.0.22 → 1.0.24

package/README.md

@@ -56,7 +56,7 @@ If you are using Jest for unit testing, you will need to add the following to yo
 ```js
 {
   moduleNameMapper: {
-    '^@pequity/squirrel$': '<rootDir>/node_modules/@pequity/squirrel/dist/squirrel.cjs.js'
+    '^@pequity/squirrel$': '<rootDir>/node_modules/@pequity/squirrel/dist/cjs',
   }
 }
 ```

package/dist/cjs/p-btn.js

@@ -2,196 +2,8 @@
 const pRingLoader_vue_vue_type_script_setup_true_lang = require("./chunks/p-ring-loader.js");
 const tailwind = require("./tailwind.js");
 const vue = require("vue");
+const vueRouter = require("vue-router");
 const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
-/*!
-  * vue-router v4.3.0
-  * (c) 2024 Eduardo San Martin Morote
-  * @license MIT
-  */
-const isBrowser = typeof document !== "undefined";
-const noop = () => {
-};
-const isArray = Array.isArray;
-function isSameRouteRecord(a, b) {
-  return (a.aliasOf || a) === (b.aliasOf || b);
-}
-function isSameRouteLocationParams(a, b) {
-  if (Object.keys(a).length !== Object.keys(b).length)
-    return false;
-  for (const key in a) {
-    if (!isSameRouteLocationParamsValue(a[key], b[key]))
-      return false;
-  }
-  return true;
-}
-function isSameRouteLocationParamsValue(a, b) {
-  return isArray(a) ? isEquivalentArray(a, b) : isArray(b) ? isEquivalentArray(b, a) : a === b;
-}
-function isEquivalentArray(a, b) {
-  return isArray(b) ? a.length === b.length && a.every((value, i) => value === b[i]) : a.length === 1 && a[0] === b;
-}
-var NavigationType;
-(function(NavigationType2) {
-  NavigationType2["pop"] = "pop";
-  NavigationType2["push"] = "push";
-})(NavigationType || (NavigationType = {}));
-var NavigationDirection;
-(function(NavigationDirection2) {
-  NavigationDirection2["back"] = "back";
-  NavigationDirection2["forward"] = "forward";
-  NavigationDirection2["unknown"] = "";
-})(NavigationDirection || (NavigationDirection = {}));
-Symbol(process.env.NODE_ENV !== "production" ? "navigation failure" : "");
-var NavigationFailureType;
-(function(NavigationFailureType2) {
-  NavigationFailureType2[NavigationFailureType2["aborted"] = 4] = "aborted";
-  NavigationFailureType2[NavigationFailureType2["cancelled"] = 8] = "cancelled";
-  NavigationFailureType2[NavigationFailureType2["duplicated"] = 16] = "duplicated";
-})(NavigationFailureType || (NavigationFailureType = {}));
-Symbol(process.env.NODE_ENV !== "production" ? "router view location matched" : "");
-Symbol(process.env.NODE_ENV !== "production" ? "router view depth" : "");
-const routerKey = Symbol(process.env.NODE_ENV !== "production" ? "router" : "");
-const routeLocationKey = Symbol(process.env.NODE_ENV !== "production" ? "route location" : "");
-Symbol(process.env.NODE_ENV !== "production" ? "router view location" : "");
-function useLink(props) {
-  const router = vue.inject(routerKey);
-  const currentRoute = vue.inject(routeLocationKey);
-  const route = vue.computed(() => router.resolve(vue.unref(props.to)));
-  const activeRecordIndex = vue.computed(() => {
-    const { matched } = route.value;
-    const { length } = matched;
-    const routeMatched = matched[length - 1];
-    const currentMatched = currentRoute.matched;
-    if (!routeMatched || !currentMatched.length)
-      return -1;
-    const index = currentMatched.findIndex(isSameRouteRecord.bind(null, routeMatched));
-    if (index > -1)
-      return index;
-    const parentRecordPath = getOriginalPath(matched[length - 2]);
-    return (
-      // we are dealing with nested routes
-      length > 1 && // if the parent and matched route have the same path, this link is
-      // referring to the empty child. Or we currently are on a different
-      // child of the same parent
-      getOriginalPath(routeMatched) === parentRecordPath && // avoid comparing the child with its parent
-      currentMatched[currentMatched.length - 1].path !== parentRecordPath ? currentMatched.findIndex(isSameRouteRecord.bind(null, matched[length - 2])) : index
-    );
-  });
-  const isActive = vue.computed(() => activeRecordIndex.value > -1 && includesParams(currentRoute.params, route.value.params));
-  const isExactActive = vue.computed(() => activeRecordIndex.value > -1 && activeRecordIndex.value === currentRoute.matched.length - 1 && isSameRouteLocationParams(currentRoute.params, route.value.params));
-  function navigate(e = {}) {
-    if (guardEvent(e)) {
-      return router[vue.unref(props.replace) ? "replace" : "push"](
-        vue.unref(props.to)
-        // avoid uncaught errors are they are logged anyway
-      ).catch(noop);
-    }
-    return Promise.resolve();
-  }
-  if ((process.env.NODE_ENV !== "production" || false) && isBrowser) {
-    const instance = vue.getCurrentInstance();
-    if (instance) {
-      const linkContextDevtools = {
-        route: route.value,
-        isActive: isActive.value,
-        isExactActive: isExactActive.value
-      };
-      instance.__vrl_devtools = instance.__vrl_devtools || [];
-      instance.__vrl_devtools.push(linkContextDevtools);
-      vue.watchEffect(() => {
-        linkContextDevtools.route = route.value;
-        linkContextDevtools.isActive = isActive.value;
-        linkContextDevtools.isExactActive = isExactActive.value;
-      }, { flush: "post" });
-    }
-  }
-  return {
-    route,
-    href: vue.computed(() => route.value.href),
-    isActive,
-    isExactActive,
-    navigate
-  };
-}
-const RouterLinkImpl = /* @__PURE__ */ vue.defineComponent({
-  name: "RouterLink",
-  compatConfig: { MODE: 3 },
-  props: {
-    to: {
-      type: [String, Object],
-      required: true
-    },
-    replace: Boolean,
-    activeClass: String,
-    // inactiveClass: String,
-    exactActiveClass: String,
-    custom: Boolean,
-    ariaCurrentValue: {
-      type: String,
-      default: "page"
-    }
-  },
-  useLink,
-  setup(props, { slots }) {
-    const link = vue.reactive(useLink(props));
-    const { options } = vue.inject(routerKey);
-    const elClass = vue.computed(() => ({
-      [getLinkClass(props.activeClass, options.linkActiveClass, "router-link-active")]: link.isActive,
-      // [getLinkClass(
-      //   props.inactiveClass,
-      //   options.linkInactiveClass,
-      //   'router-link-inactive'
-      // )]: !link.isExactActive,
-      [getLinkClass(props.exactActiveClass, options.linkExactActiveClass, "router-link-exact-active")]: link.isExactActive
-    }));
-    return () => {
-      const children = slots.default && slots.default(link);
-      return props.custom ? children : vue.h("a", {
-        "aria-current": link.isExactActive ? props.ariaCurrentValue : null,
-        href: link.href,
-        // this would override user added attrs but Vue will still add
-        // the listener, so we end up triggering both
-        onClick: link.navigate,
-        class: elClass.value
-      }, children);
-    };
-  }
-});
-const RouterLink = RouterLinkImpl;
-function guardEvent(e) {
-  if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)
-    return;
-  if (e.defaultPrevented)
-    return;
-  if (e.button !== void 0 && e.button !== 0)
-    return;
-  if (e.currentTarget && e.currentTarget.getAttribute) {
-    const target = e.currentTarget.getAttribute("target");
-    if (/\b_blank\b/i.test(target))
-      return;
-  }
-  if (e.preventDefault)
-    e.preventDefault();
-  return true;
-}
-function includesParams(outer, inner) {
-  for (const key in inner) {
-    const innerValue = inner[key];
-    const outerValue = outer[key];
-    if (typeof innerValue === "string") {
-      if (innerValue !== outerValue)
-        return false;
-    } else {
-      if (!isArray(outerValue) || outerValue.length !== innerValue.length || innerValue.some((value, i) => value !== outerValue[i]))
-        return false;
-    }
-  }
-  return true;
-}
-function getOriginalPath(record) {
-  return record ? record.aliasOf ? record.aliasOf.path : record.path : "";
-}
-const getLinkClass = (propClass, globalClass, defaultClass) => propClass != null ? propClass : globalClass != null ? globalClass : defaultClass;
 const BUTTON_TYPES = {
   PRIMARY: "primary",
   SECONDARY: "secondary",
@@ -244,7 +56,7 @@ const _sfc_main = vue.defineComponent({
   name: "PBtn",
   components: {
     PRingLoader: pRingLoader_vue_vue_type_script_setup_true_lang._sfc_main,
-    RouterLink
+    RouterLink: vueRouter.RouterLink
   },
   inheritAttrs: false,
   props: {

package/dist/cjs/p-drawer.js

@@ -3,7 +3,7 @@ const pAlert = require("./p-alert.js");
 const pCloseBtn = require("./p-close-btn.js");
 const vue = require("vue");
 const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
-const _sfc_main = vue.defineComponent({
+const __default__ = vue.defineComponent({
   name: "PDrawer",
   components: {
     PAlert: pAlert,
@@ -69,6 +69,13 @@ const _sfc_main = vue.defineComponent({
     enableClose: {
       type: Boolean,
       default: true
+    },
+    width: {
+      type: String,
+      default: "460px",
+      validator: (value) => {
+        return !!value.match(/^[0-9]+px$/);
+      }
     }
   },
   emits: ["update:modelValue", "before-open", "opening", "opened", "before-close", "closing", "closed"],
@@ -85,6 +92,9 @@ const _sfc_main = vue.defineComponent({
     },
     transitionOutClass() {
       return this.outClass || this.position === "right" ? "slideOutRight" : "slideOutLeft";
+    },
+    animationDuration() {
+      return (parseInt(this.width, 10) / 1200).toFixed(2) + "s";
     }
   },
   created() {
@@ -140,6 +150,17 @@ const _sfc_main = vue.defineComponent({
     }
   }
 });
+const __injectCSSVars__ = () => {
+  vue.useCssVars((_ctx) => ({
+    "4c0aead4": _ctx.width,
+    "59cfae08": _ctx.animationDuration
+  }));
+};
+const __setup__ = __default__.setup;
+__default__.setup = __setup__ ? (props, ctx) => {
+  __injectCSSVars__();
+  return __setup__(props, ctx);
+} : __injectCSSVars__;
 const _hoisted_1 = ["data-drawer-id", "aria-label", "aria-describedby", "aria-labelledby"];
 const _hoisted_2 = ["id"];
 const _hoisted_3 = {
@@ -213,7 +234,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 _ctx.title ? (vue.openBlock(), vue.createElementBlock("h3", {
                   key: 0,
                   id: `${_ctx.id}-title`,
-                  class: vue.normalizeClass(["flex-1 text-xl font-medium", { "text-right": _ctx.position === "left" }])
+                  class: vue.normalizeClass(["flex-1 text-xl font-medium leading-8", { "text-right": _ctx.position === "left" }])
                 }, vue.toDisplayString(_ctx.title), 11, _hoisted_2)) : vue.createCommentVNode("", true)
               ], true)
             ], 2)
@@ -249,5 +270,5 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     }, 8, ["enter-active-class", "leave-active-class", "onBeforeEnter", "onEnter", "onAfterEnter", "onBeforeLeave", "onLeave", "onAfterLeave"])
   ], 8, ["to"])) : vue.createCommentVNode("", true);
 }
-const pDrawer = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-a0b8be1e"]]);
+const pDrawer = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(__default__, [["render", _sfc_render], ["__scopeId", "data-v-f474eec2"]]);
 module.exports = pDrawer;

package/dist/es/p-btn.js

@@ -1,196 +1,8 @@
 import { _ as _sfc_main$1 } from "./chunks/p-ring-loader.js";
 import { getColorDeep } from "./tailwind.js";
-import { defineComponent, reactive, inject, computed, h, unref, getCurrentInstance, watchEffect, resolveComponent, openBlock, createElementBlock, mergeProps, renderSlot, createBlock, resolveDynamicComponent, withCtx, createElementVNode, normalizeClass, normalizeStyle, createCommentVNode } from "vue";
+import { defineComponent, resolveComponent, openBlock, createElementBlock, mergeProps, renderSlot, createBlock, resolveDynamicComponent, withCtx, createElementVNode, normalizeClass, normalizeStyle, createCommentVNode } from "vue";
+import { RouterLink } from "vue-router";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
-/*!
-  * vue-router v4.3.0
-  * (c) 2024 Eduardo San Martin Morote
-  * @license MIT
-  */
-const isBrowser = typeof document !== "undefined";
-const noop = () => {
-};
-const isArray = Array.isArray;
-function isSameRouteRecord(a, b) {
-  return (a.aliasOf || a) === (b.aliasOf || b);
-}
-function isSameRouteLocationParams(a, b) {
-  if (Object.keys(a).length !== Object.keys(b).length)
-    return false;
-  for (const key in a) {
-    if (!isSameRouteLocationParamsValue(a[key], b[key]))
-      return false;
-  }
-  return true;
-}
-function isSameRouteLocationParamsValue(a, b) {
-  return isArray(a) ? isEquivalentArray(a, b) : isArray(b) ? isEquivalentArray(b, a) : a === b;
-}
-function isEquivalentArray(a, b) {
-  return isArray(b) ? a.length === b.length && a.every((value, i) => value === b[i]) : a.length === 1 && a[0] === b;
-}
-var NavigationType;
-(function(NavigationType2) {
-  NavigationType2["pop"] = "pop";
-  NavigationType2["push"] = "push";
-})(NavigationType || (NavigationType = {}));
-var NavigationDirection;
-(function(NavigationDirection2) {
-  NavigationDirection2["back"] = "back";
-  NavigationDirection2["forward"] = "forward";
-  NavigationDirection2["unknown"] = "";
-})(NavigationDirection || (NavigationDirection = {}));
-Symbol(process.env.NODE_ENV !== "production" ? "navigation failure" : "");
-var NavigationFailureType;
-(function(NavigationFailureType2) {
-  NavigationFailureType2[NavigationFailureType2["aborted"] = 4] = "aborted";
-  NavigationFailureType2[NavigationFailureType2["cancelled"] = 8] = "cancelled";
-  NavigationFailureType2[NavigationFailureType2["duplicated"] = 16] = "duplicated";
-})(NavigationFailureType || (NavigationFailureType = {}));
-Symbol(process.env.NODE_ENV !== "production" ? "router view location matched" : "");
-Symbol(process.env.NODE_ENV !== "production" ? "router view depth" : "");
-const routerKey = Symbol(process.env.NODE_ENV !== "production" ? "router" : "");
-const routeLocationKey = Symbol(process.env.NODE_ENV !== "production" ? "route location" : "");
-Symbol(process.env.NODE_ENV !== "production" ? "router view location" : "");
-function useLink(props) {
-  const router = inject(routerKey);
-  const currentRoute = inject(routeLocationKey);
-  const route = computed(() => router.resolve(unref(props.to)));
-  const activeRecordIndex = computed(() => {
-    const { matched } = route.value;
-    const { length } = matched;
-    const routeMatched = matched[length - 1];
-    const currentMatched = currentRoute.matched;
-    if (!routeMatched || !currentMatched.length)
-      return -1;
-    const index = currentMatched.findIndex(isSameRouteRecord.bind(null, routeMatched));
-    if (index > -1)
-      return index;
-    const parentRecordPath = getOriginalPath(matched[length - 2]);
-    return (
-      // we are dealing with nested routes
-      length > 1 && // if the parent and matched route have the same path, this link is
-      // referring to the empty child. Or we currently are on a different
-      // child of the same parent
-      getOriginalPath(routeMatched) === parentRecordPath && // avoid comparing the child with its parent
-      currentMatched[currentMatched.length - 1].path !== parentRecordPath ? currentMatched.findIndex(isSameRouteRecord.bind(null, matched[length - 2])) : index
-    );
-  });
-  const isActive = computed(() => activeRecordIndex.value > -1 && includesParams(currentRoute.params, route.value.params));
-  const isExactActive = computed(() => activeRecordIndex.value > -1 && activeRecordIndex.value === currentRoute.matched.length - 1 && isSameRouteLocationParams(currentRoute.params, route.value.params));
-  function navigate(e = {}) {
-    if (guardEvent(e)) {
-      return router[unref(props.replace) ? "replace" : "push"](
-        unref(props.to)
-        // avoid uncaught errors are they are logged anyway
-      ).catch(noop);
-    }
-    return Promise.resolve();
-  }
-  if ((process.env.NODE_ENV !== "production" || false) && isBrowser) {
-    const instance = getCurrentInstance();
-    if (instance) {
-      const linkContextDevtools = {
-        route: route.value,
-        isActive: isActive.value,
-        isExactActive: isExactActive.value
-      };
-      instance.__vrl_devtools = instance.__vrl_devtools || [];
-      instance.__vrl_devtools.push(linkContextDevtools);
-      watchEffect(() => {
-        linkContextDevtools.route = route.value;
-        linkContextDevtools.isActive = isActive.value;
-        linkContextDevtools.isExactActive = isExactActive.value;
-      }, { flush: "post" });
-    }
-  }
-  return {
-    route,
-    href: computed(() => route.value.href),
-    isActive,
-    isExactActive,
-    navigate
-  };
-}
-const RouterLinkImpl = /* @__PURE__ */ defineComponent({
-  name: "RouterLink",
-  compatConfig: { MODE: 3 },
-  props: {
-    to: {
-      type: [String, Object],
-      required: true
-    },
-    replace: Boolean,
-    activeClass: String,
-    // inactiveClass: String,
-    exactActiveClass: String,
-    custom: Boolean,
-    ariaCurrentValue: {
-      type: String,
-      default: "page"
-    }
-  },
-  useLink,
-  setup(props, { slots }) {
-    const link = reactive(useLink(props));
-    const { options } = inject(routerKey);
-    const elClass = computed(() => ({
-      [getLinkClass(props.activeClass, options.linkActiveClass, "router-link-active")]: link.isActive,
-      // [getLinkClass(
-      //   props.inactiveClass,
-      //   options.linkInactiveClass,
-      //   'router-link-inactive'
-      // )]: !link.isExactActive,
-      [getLinkClass(props.exactActiveClass, options.linkExactActiveClass, "router-link-exact-active")]: link.isExactActive
-    }));
-    return () => {
-      const children = slots.default && slots.default(link);
-      return props.custom ? children : h("a", {
-        "aria-current": link.isExactActive ? props.ariaCurrentValue : null,
-        href: link.href,
-        // this would override user added attrs but Vue will still add
-        // the listener, so we end up triggering both
-        onClick: link.navigate,
-        class: elClass.value
-      }, children);
-    };
-  }
-});
-const RouterLink = RouterLinkImpl;
-function guardEvent(e) {
-  if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)
-    return;
-  if (e.defaultPrevented)
-    return;
-  if (e.button !== void 0 && e.button !== 0)
-    return;
-  if (e.currentTarget && e.currentTarget.getAttribute) {
-    const target = e.currentTarget.getAttribute("target");
-    if (/\b_blank\b/i.test(target))
-      return;
-  }
-  if (e.preventDefault)
-    e.preventDefault();
-  return true;
-}
-function includesParams(outer, inner) {
-  for (const key in inner) {
-    const innerValue = inner[key];
-    const outerValue = outer[key];
-    if (typeof innerValue === "string") {
-      if (innerValue !== outerValue)
-        return false;
-    } else {
-      if (!isArray(outerValue) || outerValue.length !== innerValue.length || innerValue.some((value, i) => value !== outerValue[i]))
-        return false;
-    }
-  }
-  return true;
-}
-function getOriginalPath(record) {
-  return record ? record.aliasOf ? record.aliasOf.path : record.path : "";
-}
-const getLinkClass = (propClass, globalClass, defaultClass) => propClass != null ? propClass : globalClass != null ? globalClass : defaultClass;
 const BUTTON_TYPES = {
   PRIMARY: "primary",
   SECONDARY: "secondary",

package/dist/es/p-drawer.js

@@ -1,8 +1,8 @@
 import PAlert from "./p-alert.js";
 import PCloseBtn from "./p-close-btn.js";
-import { defineComponent, resolveComponent, openBlock, createBlock, Teleport, createVNode, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, normalizeStyle, vShow, renderSlot, createCommentVNode, createElementBlock, toDisplayString } from "vue";
+import { defineComponent, useCssVars, resolveComponent, openBlock, createBlock, Teleport, createVNode, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, normalizeStyle, vShow, renderSlot, createCommentVNode, createElementBlock, toDisplayString } from "vue";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
-const _sfc_main = defineComponent({
+const __default__ = defineComponent({
   name: "PDrawer",
   components: {
     PAlert,
@@ -68,6 +68,13 @@ const _sfc_main = defineComponent({
     enableClose: {
       type: Boolean,
       default: true
+    },
+    width: {
+      type: String,
+      default: "460px",
+      validator: (value) => {
+        return !!value.match(/^[0-9]+px$/);
+      }
     }
   },
   emits: ["update:modelValue", "before-open", "opening", "opened", "before-close", "closing", "closed"],
@@ -84,6 +91,9 @@ const _sfc_main = defineComponent({
     },
     transitionOutClass() {
       return this.outClass || this.position === "right" ? "slideOutRight" : "slideOutLeft";
+    },
+    animationDuration() {
+      return (parseInt(this.width, 10) / 1200).toFixed(2) + "s";
     }
   },
   created() {
@@ -139,6 +149,17 @@ const _sfc_main = defineComponent({
     }
   }
 });
+const __injectCSSVars__ = () => {
+  useCssVars((_ctx) => ({
+    "4c0aead4": _ctx.width,
+    "59cfae08": _ctx.animationDuration
+  }));
+};
+const __setup__ = __default__.setup;
+__default__.setup = __setup__ ? (props, ctx) => {
+  __injectCSSVars__();
+  return __setup__(props, ctx);
+} : __injectCSSVars__;
 const _hoisted_1 = ["data-drawer-id", "aria-label", "aria-describedby", "aria-labelledby"];
 const _hoisted_2 = ["id"];
 const _hoisted_3 = {
@@ -212,7 +233,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 _ctx.title ? (openBlock(), createElementBlock("h3", {
                   key: 0,
                   id: `${_ctx.id}-title`,
-                  class: normalizeClass(["flex-1 text-xl font-medium", { "text-right": _ctx.position === "left" }])
+                  class: normalizeClass(["flex-1 text-xl font-medium leading-8", { "text-right": _ctx.position === "left" }])
                 }, toDisplayString(_ctx.title), 11, _hoisted_2)) : createCommentVNode("", true)
               ], true)
             ], 2)
@@ -248,7 +269,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(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-a0b8be1e"]]);
+const pDrawer = /* @__PURE__ */ _export_sfc(__default__, [["render", _sfc_render], ["__scopeId", "data-v-f474eec2"]]);
 export {
   pDrawer as default
 };

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

@@ -59,6 +59,11 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    width: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
 }, unknown, {
     id: string | null;
     show: boolean;
@@ -66,6 +71,7 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     transitionInClass(): "slideInRight" | "slideInLeft";
     transitionOutClass(): "slideOutRight" | "slideOutLeft";
+    animationDuration(): string;
 }, {
     close(): void;
     beforeOpen(): void;
@@ -135,6 +141,11 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    width: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     "onBefore-open"?: ((...args: any[]) => any) | undefined;
@@ -145,6 +156,7 @@ declare const _default: import("vue").DefineComponent<{
     onClosed?: ((...args: any[]) => any) | undefined;
 }, {
     zIndex: number;
+    width: string;
     title: string;
     disabled: boolean;
     position: string;

package/dist/style.css

@@ -9,7 +9,7 @@
 .bg-cross[data-v-cb511035] {
   background-image: url("data:image/svg+xml,%3csvg%20width='6'%20height='6'%20viewBox='0%200%206%206'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_2511_8629)'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M3%203.51667L5.42083%205.9375L5.9375%205.42083L3.51667%203L5.9375%200.57917L5.42083%200.0625L3%202.48333L0.57917%200.0625L0.0625%200.57917L2.48333%203L0.0625%205.42083L0.57917%205.9375L3%203.51667Z'%20fill='%231A123B'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_2511_8629'%3e%3crect%20width='6'%20height='6'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
 }
-.drawer[data-v-a0b8be1e] {
+.drawer[data-v-f474eec2] {
   position: fixed;
   bottom: 0px;
   top: 0px;
@@ -21,17 +21,18 @@
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   outline: 2px solid transparent;
   outline-offset: 2px;
-  width: 460px;
+  max-width: var(--4c0aead4);
+  width: 100%;
 }
-.drawer.drawer-left[data-v-a0b8be1e] {
+.drawer.drawer-left[data-v-f474eec2] {
   left: 0px;
 }
-.drawer.drawer-right[data-v-a0b8be1e] {
+.drawer.drawer-right[data-v-f474eec2] {
   right: 0px;
 }
 
 /* Slide from right animations */
-@keyframes slideInRight-a0b8be1e {
+@keyframes slideInRight-f474eec2 {
 0% {
     transform: translate3d(100%, 0, 0);
     visibility: visible;
@@ -40,12 +41,12 @@
     transform: translate3d(0, 0, 0);
 }
 }
-.slideInRight[data-v-a0b8be1e] {
-  animation-duration: 0.4s;
+.slideInRight[data-v-f474eec2] {
+  animation-duration: var(--59cfae08);
   animation-fill-mode: both;
-  animation-name: slideInRight-a0b8be1e;
+  animation-name: slideInRight-f474eec2;
 }
-@keyframes slideOutRight-a0b8be1e {
+@keyframes slideOutRight-f474eec2 {
 0% {
     transform: translate3d(0, 0, 0);
 }
@@ -54,14 +55,14 @@
     transform: translate3d(100%, 0, 0);
 }
 }
-.slideOutRight[data-v-a0b8be1e] {
-  animation-duration: 0.4s;
+.slideOutRight[data-v-f474eec2] {
+  animation-duration: var(--59cfae08);
   animation-fill-mode: both;
-  animation-name: slideOutRight-a0b8be1e;
+  animation-name: slideOutRight-f474eec2;
 }
 
 /* Slide from left animations */
-@keyframes slideInLeft-a0b8be1e {
+@keyframes slideInLeft-f474eec2 {
 0% {
     transform: translate3d(-100%, 0, 0);
     visibility: visible;
@@ -70,12 +71,12 @@
     transform: translate3d(0, 0, 0);
 }
 }
-.slideInLeft[data-v-a0b8be1e] {
-  animation-duration: 0.4s;
+.slideInLeft[data-v-f474eec2] {
+  animation-duration: var(--59cfae08);
   animation-fill-mode: both;
-  animation-name: slideInLeft-a0b8be1e;
+  animation-name: slideInLeft-f474eec2;
 }
-@keyframes slideOutLeft-a0b8be1e {
+@keyframes slideOutLeft-f474eec2 {
 0% {
     transform: translate3d(0, 0, 0);
 }
@@ -84,24 +85,25 @@
     transform: translate3d(-100%, 0, 0);
 }
 }
-.slideOutLeft[data-v-a0b8be1e] {
-  animation-duration: 0.4s;
+.slideOutLeft[data-v-f474eec2] {
+  animation-duration: var(--59cfae08);
   animation-fill-mode: both;
-  animation-name: slideOutLeft-a0b8be1e;
+  animation-name: slideOutLeft-f474eec2;
 }
 
 /* Backdrop */
-.fadeIn[data-v-a0b8be1e] {
-  animation-duration: 0.4s;
-  animation-name: fadeInFrames-a0b8be1e;
-  animation-fill-mode: both;
+.fadeIn[data-v-f474eec2] {
+  animation-name: fadeInFrames-f474eec2;
 }
-.fadeOut[data-v-a0b8be1e] {
-  animation-duration: 0.2s;
-  animation-name: fadeOutFrames-a0b8be1e;
+.fadeOut[data-v-f474eec2] {
+  animation-name: fadeOutFrames-f474eec2;
+}
+.fadeIn[data-v-f474eec2],
+.fadeOut[data-v-f474eec2] {
+  animation-duration: 0.25s;
   animation-fill-mode: both;
 }
-@keyframes fadeInFrames-a0b8be1e {
+@keyframes fadeInFrames-f474eec2 {
 from {
     opacity: 0;
     animation-timing-function: cubic-bezier(0, 0, 1, 1);
@@ -110,7 +112,7 @@ to {
     opacity: 1;
 }
 }
-@keyframes fadeOutFrames-a0b8be1e {
+@keyframes fadeOutFrames-f474eec2 {
 from {
     opacity: 1;
     animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "1.0.22",
+  "version": "1.0.24",
   "packageManager": "pnpm@8.9.2",
   "type": "module",
   "scripts": {
@@ -39,13 +39,14 @@
   "module": "./dist/es/index.js",
   "dependencies": {
     "@popperjs/core": "2.11.8",
-    "@tanstack/vue-virtual": "3.2.0",
+    "@tanstack/vue-virtual": "3.3.0",
     "dayjs": "1.11.10",
     "floating-vue": "5.2.2",
     "lodash-es": "4.17.21",
     "v-calendar": "3.1.2",
-    "vue": "3.4.21",
+    "vue": "3.4.23",
     "vue-currency-input": "3.1.0",
+    "vue-router": "4.3.0",
     "vue-toastification": "2.0.0-rc.5"
   },
   "peerDependencies": {
@@ -57,35 +58,36 @@
     "v-calendar": "^3.1.2",
     "vue": "^3.4.21",
     "vue-currency-input": "^3.1.0",
+    "vue-router": "^4.3.0",
     "vue-toastification": "^2.0.0-rc.5"
   },
   "devDependencies": {
     "@babel/core": "^7.24.4",
     "@babel/preset-env": "^7.24.4",
-    "@commitlint/cli": "^19.2.1",
-    "@commitlint/config-conventional": "^19.1.0",
+    "@commitlint/cli": "^19.2.2",
+    "@commitlint/config-conventional": "^19.2.2",
     "@pequity/eslint-config": "^0.0.12",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-a11y": "^8.0.6",
-    "@storybook/addon-actions": "^8.0.6",
-    "@storybook/addon-essentials": "^8.0.6",
-    "@storybook/addon-interactions": "^8.0.6",
-    "@storybook/addon-links": "^8.0.6",
-    "@storybook/blocks": "^8.0.6",
+    "@storybook/addon-a11y": "^8.0.8",
+    "@storybook/addon-actions": "^8.0.8",
+    "@storybook/addon-essentials": "^8.0.8",
+    "@storybook/addon-interactions": "^8.0.8",
+    "@storybook/addon-links": "^8.0.8",
+    "@storybook/blocks": "^8.0.8",
     "@storybook/jest": "^0.2.3",
-    "@storybook/manager-api": "^8.0.6",
+    "@storybook/manager-api": "^8.0.8",
     "@storybook/test-runner": "^0.17.0",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^8.0.6",
-    "@storybook/vue3": "^8.0.6",
-    "@storybook/vue3-vite": "^8.0.6",
+    "@storybook/theming": "^8.0.8",
+    "@storybook/vue3": "^8.0.8",
+    "@storybook/vue3-vite": "^8.0.8",
     "@types/jest": "^29.5.12",
     "@types/jsdom": "^21.1.6",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^20.12.6",
+    "@types/node": "^20.12.7",
     "@vitejs/plugin-vue": "^5.0.4",
-    "@vue/compiler-sfc": "3.4.21",
+    "@vue/compiler-sfc": "3.4.23",
     "@vue/test-utils": "^2.4.5",
     "@vue/vue3-jest": "^29.2.6",
     "autoprefixer": "^10.4.19",
@@ -100,18 +102,18 @@
     "make-coverage-badge": "^1.2.0",
     "postcss": "^8.4.38",
     "prettier": "^3.2.5",
-    "prettier-plugin-tailwindcss": "^0.5.13",
+    "prettier-plugin-tailwindcss": "^0.5.14",
     "resolve-tspaths": "^0.8.18",
     "rimraf": "^5.0.5",
-    "sass": "^1.74.1",
-    "semantic-release": "^23.0.7",
-    "storybook": "^8.0.6",
+    "sass": "^1.75.0",
+    "semantic-release": "^23.0.8",
+    "storybook": "^8.0.8",
     "svgo": "^3.2.0",
     "tailwindcss": "^3.4.3",
     "ts-jest": "^29.1.2",
-    "typescript": "5.4.4",
-    "vite": "^5.2.8",
+    "typescript": "5.4.5",
+    "vite": "^5.2.9",
     "vue-router": "^4.3.0",
-    "vue-tsc": "2.0.7"
+    "vue-tsc": "2.0.13"
   }
 }

package/squirrel/components/p-drawer/p-drawer.vue

@@ -44,7 +44,7 @@
               <h3
                 v-if="title"
                 :id="`${id}-title`"
-                class="flex-1 text-xl font-medium"
+                class="flex-1 text-xl font-medium leading-8"
                 :class="{ 'text-right': position === 'left' }"
               >
                 {{ title }}
@@ -151,6 +151,13 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
+    width: {
+      type: String,
+      default: '460px',
+      validator: (value: string) => {
+        return !!value.match(/^[0-9]+px$/);
+      },
+    },
   },
   emits: ['update:modelValue', 'before-open', 'opening', 'opened', 'before-close', 'closing', 'closed'],
   data() {
@@ -167,6 +174,9 @@ export default defineComponent({
     transitionOutClass() {
       return this.outClass || this.position === 'right' ? 'slideOutRight' : 'slideOutLeft';
     },
+    animationDuration() {
+      return (parseInt(this.width, 10) / 1200).toFixed(2) + 's';
+    },
   },
   created() {
     if (this.live) {
@@ -227,7 +237,8 @@ export default defineComponent({
 <style scoped lang="scss">
 .drawer {
   @apply fixed bottom-0 top-0 flex flex-col bg-surface shadow-lg outline-none;
-  width: 460px;
+  max-width: v-bind('width');
+  width: 100%;
 }
 .drawer.drawer-left {
   @apply left-0;
@@ -247,7 +258,7 @@ export default defineComponent({
   }
 }
 .slideInRight {
-  animation-duration: 0.4s;
+  animation-duration: v-bind('animationDuration');
   animation-fill-mode: both;
   animation-name: slideInRight;
 }
@@ -262,7 +273,7 @@ export default defineComponent({
   }
 }
 .slideOutRight {
-  animation-duration: 0.4s;
+  animation-duration: v-bind('animationDuration');
   animation-fill-mode: both;
   animation-name: slideOutRight;
 }
@@ -278,7 +289,7 @@ export default defineComponent({
   }
 }
 .slideInLeft {
-  animation-duration: 0.4s;
+  animation-duration: v-bind('animationDuration');
   animation-fill-mode: both;
   animation-name: slideInLeft;
 }
@@ -293,21 +304,23 @@ export default defineComponent({
   }
 }
 .slideOutLeft {
-  animation-duration: 0.4s;
+  animation-duration: v-bind('animationDuration');
   animation-fill-mode: both;
   animation-name: slideOutLeft;
 }
 
 /* Backdrop */
 .fadeIn {
-  animation-duration: 0.4s;
   animation-name: fadeInFrames;
-  animation-fill-mode: both;
 }
 
 .fadeOut {
-  animation-duration: 0.2s;
   animation-name: fadeOutFrames;
+}
+
+.fadeIn,
+.fadeOut {
+  animation-duration: 0.25s;
   animation-fill-mode: both;
 }