@pequity/squirrel 1.0.20 → 1.0.21-beta.1

package/dist/cjs/chunks/_plugin-vue_export-helper.js

@@ -0,0 +1,9 @@
+"use strict";
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+exports._export_sfc = _export_sfc;

package/dist/cjs/chunks/p-action-bar.js

@@ -0,0 +1,60 @@
+"use strict";
+const vue = require("vue");
+const pBtn = require("../p-btn.js");
+const pCloseBtn = require("../p-close-btn.js");
+const _hoisted_1 = {
+  class: "fixed bottom-6 left-1/2 flex h-12 -translate-x-1/2 select-none flex-row items-center rounded-lg bg-p-purple-60 px-2 text-sm font-medium text-white",
+  role: "alertdialog"
+};
+const _hoisted_2 = { class: "px-3" };
+const _hoisted_3 = /* @__PURE__ */ vue.createElementVNode("div", { class: "mx-4 h-9 w-0.5 rounded bg-p-purple-50" }, null, -1);
+const _hoisted_4 = { class: "flex" };
+const _hoisted_5 = { class: "flex items-center gap-2 px-1 py-0.5" };
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "p-action-bar",
+  props: {
+    label: {
+      type: String,
+      required: true
+    },
+    actions: {
+      type: Array,
+      required: true
+    }
+  },
+  emits: ["click:dismiss", "click:action"],
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createVNode(pCloseBtn, {
+          variant: "dark",
+          onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click:dismiss"))
+        }),
+        vue.createElementVNode("p", _hoisted_2, vue.toDisplayString(__props.label), 1),
+        _hoisted_3,
+        vue.createElementVNode("div", _hoisted_4, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.actions, (action) => {
+            return vue.openBlock(), vue.createBlock(pBtn, {
+              key: `action-${action.name}`,
+              size: "sm",
+              type: "secondary-ghost-dark",
+              onClick: ($event) => _ctx.$emit("click:action", action.name)
+            }, {
+              default: vue.withCtx(() => [
+                vue.createElementVNode("div", _hoisted_5, [
+                  action.icon ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(action.icon), {
+                    key: 0,
+                    class: "h-4 w-4"
+                  })) : vue.createCommentVNode("", true),
+                  vue.createElementVNode("div", null, vue.toDisplayString(action.label), 1)
+                ])
+              ]),
+              _: 2
+            }, 1032, ["onClick"]);
+          }), 128))
+        ])
+      ]);
+    };
+  }
+});
+exports._sfc_main = _sfc_main;

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

@@ -0,0 +1,28 @@
+"use strict";
+const vue = require("vue");
+const _hoisted_1 = { class: "border border-p-gray-30 bg-surface px-6 pt-6" };
+const titleClass = "text-xl font-medium leading-none text-p-purple-60";
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "PCard" },
+  __name: "p-card",
+  props: {
+    title: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.renderSlot(_ctx.$slots, "title", { titleClass }, () => [
+          __props.title ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            class: vue.normalizeClass(titleClass)
+          }, vue.toDisplayString(__props.title), 1)) : vue.createCommentVNode("", true)
+        ]),
+        vue.renderSlot(_ctx.$slots, "default")
+      ]);
+    };
+  }
+});
+exports._sfc_main = _sfc_main;

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

@@ -0,0 +1,24 @@
+"use strict";
+const vue = require("vue");
+const _hoisted_1 = ["checked"];
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "p-checkbox",
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("input", {
+        type: "checkbox",
+        class: "cursor-pointer accent-p-blue-50",
+        checked: __props.modelValue,
+        onChange: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event.target.checked))
+      }, null, 40, _hoisted_1);
+    };
+  }
+});
+exports._sfc_main = _sfc_main;

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

@@ -0,0 +1,414 @@
+"use strict";
+const vue = require("vue");
+const pDropdown = require("../p-dropdown.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 _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 = {
+  key: 0,
+  class: "truncate text-left text-p-gray-40"
+};
+const _hoisted_3 = { class: "truncate text-left" };
+const _hoisted_4 = {
+  key: 0,
+  class: "mt-3 px-3"
+};
+const _hoisted_5 = { class: "text-p-purple-60" };
+const _hoisted_6 = { class: "flex flex-row" };
+const _hoisted_7 = /* @__PURE__ */ vue.createElementVNode("span", { class: "px-1 leading-none" }, ".", -1);
+const _hoisted_8 = ["onClick"];
+const _hoisted_9 = ["title"];
+const _hoisted_10 = {
+  key: 0,
+  class: "ml-auto fill-p-purple-60 pl-2",
+  src: _imports_0
+};
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "PDropdownSelect",
+    inheritAttrs: false
+  },
+  __name: "p-dropdown-select",
+  props: {
+    modelValue: {
+      type: [String, Number, Boolean, Array, Object],
+      default: null
+    },
+    /**
+     * `p-dropdown-select v-model normally works with a string or an array of strings (for multiple mode).
+     * Setting this prop to `true` will switch the behavior to an object (or array of objects) for the v-model value.
+     * e.g `:value="{ value: 1, text: 'option text' }"`
+     */
+    valueIsObject: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Can be an array of objects or array of strings. When using objects, will look for a text - value pair.
+     * This can be changed using the item-text, item-value props.
+     */
+    items: {
+      type: Array,
+      default: () => []
+    },
+    label: {
+      type: String,
+      default: ""
+    },
+    errorMsg: {
+      type: String,
+      default: ""
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: "md",
+      validator(value) {
+        return Object.keys(pSelectList.SIZES).includes(value);
+      }
+    },
+    /**
+     * Set property of **items**’s text value
+     */
+    itemText: {
+      type: String,
+      default: "text"
+    },
+    /**
+     * Set property of **items**’s value - must be primitive.
+     */
+    itemValue: {
+      type: [String, Number],
+      default: "value"
+    },
+    /**
+     * itemSize sets the list item's height and it's REQUIRED if a custom item template is used
+     * https://github.com/Akryum/vue-virtual-scroller/tree/v1/packages/vue-virtual-scroller#props
+     */
+    itemSize: {
+      type: Number,
+      default: null
+    },
+    /**
+     * The number of items visible in the list
+     */
+    itemsVisible: {
+      type: Number,
+      default: 7
+    },
+    dropdownMenuAttrs: {
+      type: Object,
+      default: () => ({})
+    },
+    dropdownMenuClass: {
+      type: String,
+      default: "overflow-x-hidden"
+    },
+    dropdownMenuStyle: {
+      type: Object,
+      default: () => ({})
+    },
+    pDropdownProps: {
+      type: Object,
+      default: () => ({})
+    },
+    searchable: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Enables multiple selection
+     */
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Dropdown button text
+     */
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Placeholder for the search field
+     */
+    placeholderSearch: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Setting it to `true` will display the selected options at the top of the list
+     */
+    selectedTopShown: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["update:modelValue", "select"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const props = __props;
+    const nextFrame = () => new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+    const nextLoop = (ms) => new Promise((resolve) => setTimeout(resolve, ms || 0));
+    const P_DROPDOWN_DEFAULTS = {
+      triggerStyle: { display: "block" },
+      triggers: [],
+      distance: 2,
+      placement: "bottom-end",
+      noAutoFocus: true,
+      enableArrowNavigation: false
+    };
+    const width = vue.ref("auto");
+    const listItemStyle = vue.ref({ paddingTop: 0, paddingBottom: 0 });
+    const dropdownShow = vue.ref(false);
+    let observer = null;
+    const scrollerStyle = vue.ref({ maxHeight: "none" });
+    const formControl = vue.ref(null);
+    const inputSearch = vue.ref(null);
+    const actionsContainer = vue.ref(null);
+    const $attrs = vue.useAttrs();
+    const virtualizerRef = vue.ref(null);
+    const { labelClasses, selectClasses, errorMsgClasses } = useInputClasses.useInputClasses(props);
+    const {
+      LIST_ITEM_CLASS,
+      LIST_ITEM_ACTIVE_CLASS,
+      selectedItems,
+      computedItems,
+      computedItemSize,
+      computedInsideSelected,
+      internalItems,
+      internalValue,
+      search,
+      rowVirtualizer,
+      getValue,
+      getText,
+      isSelected,
+      setupNavigationSvc,
+      destroyNavigationSvc,
+      select,
+      onMousemove,
+      scrollToActiveItem,
+      putSelectedItemsOnTop,
+      selectAll,
+      clearAll
+    } = useSelectList.useSelectList(props, inputSearch, virtualizerRef, emit);
+    const menuAttrs = vue.computed(() => lodashEs.omit(props.dropdownMenuAttrs, ["class", "style"]));
+    const menuStyle = vue.computed(() => ({ ...props.dropdownMenuStyle, width: width.value }));
+    const attrs = vue.computed(() => {
+      const { class: classes, style: style2, ...rest } = $attrs;
+      return rest;
+    });
+    const style = vue.computed(() => $attrs.style);
+    vue.watch(
+      dropdownShow,
+      (nV) => {
+        nV && putSelectedItemsOnTop();
+      },
+      {
+        immediate: true
+      }
+    );
+    vue.onMounted(() => {
+      observer = new ResizeObserver((entries) => {
+        entries.forEach((entry) => {
+          const rect = entry.contentRect;
+          width.value = rect.width + "px" || "auto";
+        });
+      });
+      observer.observe(formControl.value);
+    });
+    vue.onUnmounted(() => {
+      formControl.value && observer && observer.unobserve(formControl.value);
+    });
+    const onShow = async () => {
+      var _a, _b;
+      const actionsContainerHeight = ((_a = actionsContainer.value) == null ? void 0 : _a.clientHeight) || 0;
+      scrollerStyle.value = { maxHeight: `${computedItemSize.value * props.itemsVisible - actionsContainerHeight}px` };
+      search.value = "";
+      setupNavigationSvc();
+      if (props.searchable) {
+        await nextLoop();
+        await nextFrame();
+        (_b = inputSearch.value) == null ? void 0 : _b.$el.querySelector("input").focus();
+      }
+      scrollToActiveItem();
+    };
+    const onHide = () => {
+      var _a;
+      dropdownShow.value = false;
+      destroyNavigationSvc();
+      ((_a = formControl.value) == null ? void 0 : _a.querySelector("button")).focus();
+    };
+    return (_ctx, _cache) => {
+      const _directive_close_popper = vue.resolveDirective("close-popper");
+      return vue.openBlock(), vue.createElementBlock("div", {
+        ref_key: "formControl",
+        ref: formControl,
+        class: vue.normalizeClass([{ hidden: vue.unref($attrs).hidden }, vue.unref($attrs).class]),
+        "data-has-error": !!__props.errorMsg,
+        style: vue.normalizeStyle(style.value),
+        "aria-label": "Dropdown select"
+      }, [
+        __props.label ? (vue.openBlock(), vue.createElementBlock("label", {
+          key: 0,
+          class: vue.normalizeClass(vue.unref(labelClasses))
+        }, vue.toDisplayString(__props.label), 3)) : vue.createCommentVNode("", true),
+        vue.createVNode(pDropdown, vue.mergeProps({ shown: dropdownShow.value }, { ...P_DROPDOWN_DEFAULTS, ...__props.pDropdownProps }, {
+          class: "relative flex w-full items-center justify-center",
+          onApplyShow: onShow,
+          onApplyHide: onHide
+        }), {
+          popper: vue.withCtx(() => [
+            vue.createElementVNode("div", vue.mergeProps(menuAttrs.value, {
+              class: __props.dropdownMenuClass,
+              style: menuStyle.value,
+              "p-select-list": "",
+              role: "listbox"
+            }), [
+              __props.multiple || __props.searchable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+                __props.multiple ? (vue.openBlock(), vue.createElementBlock("div", {
+                  key: 0,
+                  ref_key: "actionsContainer",
+                  ref: actionsContainer,
+                  class: "flex flex-row justify-between text-xs font-semibold text-primary"
+                }, [
+                  vue.createElementVNode("p", _hoisted_5, vue.toDisplayString(vue.unref(computedItems).length) + " items", 1),
+                  vue.createElementVNode("div", _hoisted_6, [
+                    vue.unref(computedItems).length === vue.unref(internalItems).length ? (vue.openBlock(), vue.createElementBlock("a", {
+                      key: 0,
+                      class: vue.normalizeClass([
+                        vue.unref(selectedItems).length !== vue.unref(internalItems).length ? "cursor-pointer" : "pointer-events-none opacity-50"
+                      ]),
+                      onClick: _cache[1] || (_cache[1] = //@ts-ignore
+                      (...args) => vue.unref(selectAll) && vue.unref(selectAll)(...args))
+                    }, " Select all ", 2)) : (vue.openBlock(), vue.createElementBlock("a", {
+                      key: 1,
+                      class: vue.normalizeClass([vue.unref(computedInsideSelected) ? "pointer-events-none opacity-50" : "cursor-pointer"]),
+                      onClick: _cache[2] || (_cache[2] = //@ts-ignore
+                      (...args) => vue.unref(selectAll) && vue.unref(selectAll)(...args))
+                    }, " Select all filtered ", 2)),
+                    _hoisted_7,
+                    vue.createElementVNode("a", {
+                      class: vue.normalizeClass([vue.unref(selectedItems).length ? "cursor-pointer" : "pointer-events-none opacity-50"]),
+                      onClick: _cache[3] || (_cache[3] = //@ts-ignore
+                      (...args) => vue.unref(clearAll) && vue.unref(clearAll)(...args))
+                    }, " Clear all ", 2)
+                  ])
+                ], 512)) : vue.createCommentVNode("", true),
+                __props.searchable ? (vue.openBlock(), vue.createElementBlock("div", {
+                  key: 1,
+                  class: vue.normalizeClass([{ "mt-3": __props.multiple }])
+                }, [
+                  vue.createVNode(pInputSearch, {
+                    ref_key: "inputSearch",
+                    ref: inputSearch,
+                    modelValue: vue.unref(search),
+                    "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => vue.isRef(search) ? search.value = $event : null),
+                    size: __props.size,
+                    placeholder: __props.placeholderSearch
+                  }, null, 8, ["modelValue", "size", "placeholder"])
+                ], 2)) : vue.createCommentVNode("", true)
+              ])) : vue.createCommentVNode("", true),
+              vue.createElementVNode("div", {
+                ref_key: "virtualizerRef",
+                ref: virtualizerRef,
+                style: vue.normalizeStyle(scrollerStyle.value),
+                class: vue.normalizeClass(["overflow-y-auto", { "mt-3": __props.multiple || __props.searchable }])
+              }, [
+                vue.createElementVNode("div", {
+                  class: "relative w-full",
+                  "p-select-list-options": "",
+                  style: vue.normalizeStyle({ height: `${vue.unref(rowVirtualizer).getTotalSize()}px` }),
+                  onMousemove: _cache[5] || (_cache[5] = //@ts-ignore
+                  (...args) => vue.unref(onMousemove) && vue.unref(onMousemove)(...args))
+                }, [
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(rowVirtualizer).getVirtualItems(), (row) => {
+                    return vue.openBlock(), vue.createElementBlock("div", {
+                      key: row.index,
+                      class: "absolute left-0 top-0 w-full",
+                      "p-select-list-option": "",
+                      role: "option",
+                      style: vue.normalizeStyle({ height: `${row.size}px`, transform: `translateY(${row.start}px)` })
+                    }, [
+                      vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+                        class: vue.normalizeClass([vue.unref(LIST_ITEM_CLASS), { [vue.unref(LIST_ITEM_ACTIVE_CLASS)]: vue.unref(isSelected)(vue.unref(getValue)(row.index)) }]),
+                        "p-select-list-option-item": "",
+                        style: vue.normalizeStyle(listItemStyle.value),
+                        onClick: ($event) => vue.unref(select)($event, vue.unref(getValue)(row.index))
+                      }, [
+                        vue.createElementVNode("div", {
+                          class: vue.normalizeClass(["flex items-center", { [vue.unref(pSelectList.SIZES)[__props.size]]: !__props.itemSize }])
+                        }, [
+                          vue.renderSlot(_ctx.$slots, "item", {
+                            item: vue.unref(computedItems)[row.index],
+                            isItemSelected: vue.unref(isSelected)(vue.unref(getValue)(row.index)),
+                            itemTextSplit: vue.unref(text.splitStringForHighlight)(vue.unref(string.toString)(vue.unref(getText)(row.index)), vue.unref(search))
+                          }, () => [
+                            vue.createElementVNode("div", {
+                              class: "truncate text-p-purple-60",
+                              title: vue.unref(string.toString)(vue.unref(getText)(row.index))
+                            }, [
+                              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(text.splitStringForHighlight)(vue.unref(string.toString)(vue.unref(getText)(row.index)), vue.unref(search)), (str, index) => {
+                                return vue.openBlock(), vue.createElementBlock("span", {
+                                  key: `${vue.unref(getValue)(row.index)}_${index}`,
+                                  class: vue.normalizeClass({ "bg-p-blue-20": index === 1 })
+                                }, vue.toDisplayString(str), 3);
+                              }), 128))
+                            ], 8, _hoisted_9)
+                          ]),
+                          vue.unref(isSelected)(vue.unref(getValue)(row.index)) ? (vue.openBlock(), vue.createElementBlock("img", _hoisted_10)) : vue.createCommentVNode("", true)
+                        ], 2)
+                      ], 14, _hoisted_8)), [
+                        [_directive_close_popper, !__props.multiple]
+                      ])
+                    ], 4);
+                  }), 128))
+                ], 36),
+                !vue.unref(computedItems).length ? vue.renderSlot(_ctx.$slots, "no-items", { key: 0 }, () => [
+                  vue.createElementVNode("div", {
+                    class: vue.normalizeClass(["flex items-center justify-center", vue.unref(pSelectList.SIZES)[__props.size]])
+                  }, "No items found", 2)
+                ]) : vue.createCommentVNode("", true)
+              ], 6)
+            ], 16)
+          ]),
+          default: vue.withCtx(() => [
+            vue.createElementVNode("button", vue.mergeProps(attrs.value, {
+              ref: "button",
+              type: "button",
+              class: ["w-full", vue.unref(selectClasses), dropdownShow.value ? "border-primary" : ""],
+              role: "button",
+              "aria-haspopup": "listbox",
+              onClick: _cache[0] || (_cache[0] = ($event) => dropdownShow.value = !dropdownShow.value)
+            }), [
+              !vue.unref(internalValue).length || !vue.unref(selectedItems).length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, vue.toDisplayString(__props.placeholder || " "), 1)) : vue.renderSlot(_ctx.$slots, "selected-item", {
+                key: 1,
+                item: __props.multiple ? vue.unref(selectedItems) : vue.unref(selectedItems)[0]
+              }, () => [
+                vue.createElementVNode("div", _hoisted_3, vue.toDisplayString(__props.multiple && vue.unref(selectedItems).length > 1 ? `${vue.unref(selectedItems).length} option${vue.unref(selectedItems).length > 1 ? "s" : ""} selected` : vue.unref(selectedItems)[0][__props.itemText]), 1)
+              ])
+            ], 16)
+          ]),
+          _: 3
+        }, 16, ["shown"]),
+        vue.withDirectives(vue.createElementVNode("div", {
+          class: vue.normalizeClass(vue.unref(errorMsgClasses))
+        }, vue.toDisplayString(__props.errorMsg), 3), [
+          [vue.vShow, __props.errorMsg]
+        ])
+      ], 14, _hoisted_1);
+    };
+  }
+});
+exports._imports_0 = _imports_0;
+exports._sfc_main = _sfc_main;

package/dist/cjs/chunks/p-input-percent.js

@@ -0,0 +1,53 @@
+"use strict";
+const vue = require("vue");
+const pInputNumber = require("../p-input-number.js");
+const lodashEs = require("lodash-es");
+const _hoisted_1 = /* @__PURE__ */ vue.createElementVNode("div", null, "%", -1);
+const _hoisted_2 = [
+  _hoisted_1
+];
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "PInputPercent"
+  },
+  __name: "p-input-percent",
+  props: {
+    modelValue: {
+      type: [Number, String],
+      default: null
+    },
+    size: {
+      type: String,
+      default: "md"
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const prefixClasses = {
+      sm: "text-sm h-8 left-2",
+      md: "text-base h-10 left-3",
+      lg: "text-lg h-12 left-5"
+    };
+    const props = __props;
+    const emit = __emit;
+    const convertedValue = vue.computed({
+      get: () => lodashEs.isNumber(props.modelValue) ? props.modelValue * 100 : props.modelValue,
+      set: (nV) => emit("update:modelValue", lodashEs.isNumber(nV) ? nV / 100 : nV)
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(pInputNumber, {
+        modelValue: convertedValue.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => convertedValue.value = $event),
+        size: __props.size
+      }, {
+        prefix: vue.withCtx(() => [
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass(["absolute flex items-center", prefixClasses[__props.size]])
+          }, _hoisted_2, 2)
+        ]),
+        _: 1
+      }, 8, ["modelValue", "size"]);
+    };
+  }
+});
+exports._sfc_main = _sfc_main;

package/dist/cjs/chunks/p-pagination-info.js

@@ -0,0 +1,66 @@
+"use strict";
+const vue = require("vue");
+const pSkeletonLoader = require("../p-skeleton-loader.js");
+const _hoisted_1 = {
+  key: 1,
+  class: "text-sm font-medium text-p-gray-40"
+};
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "PPaginationInfo" },
+  __name: "p-pagination-info",
+  props: {
+    /**
+     * The current page.
+     */
+    currentPage: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * The amount of data pagination iterates through.
+     */
+    count: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * The amount of data to be displayed at 1 page. Used to calculate the `from` and `to` limits.
+     */
+    pageSize: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * Whether the pagination is loading.
+     */
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const from = vue.computed(() => {
+      const maxNumOfPages = Math.ceil(props.count / props.pageSize);
+      const currentPage = props.currentPage > maxNumOfPages ? maxNumOfPages : props.currentPage;
+      return (currentPage - 1) * props.pageSize + 1;
+    });
+    const to = vue.computed(() => {
+      const to2 = props.currentPage * props.pageSize;
+      return to2 >= props.count ? props.count : to2;
+    });
+    return (_ctx, _cache) => {
+      return __props.loading ? (vue.openBlock(), vue.createBlock(pSkeletonLoader, {
+        key: 0,
+        class: "h-6 w-56"
+      })) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        __props.count ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+          vue.createTextVNode("Showing " + vue.toDisplayString(from.value) + " to " + vue.toDisplayString(to.value) + " of " + vue.toDisplayString(__props.count) + " results", 1)
+        ], 64)) : vue.renderSlot(_ctx.$slots, "no-results", { key: 1 }, () => [
+          vue.createTextVNode("No results found")
+        ])
+      ]));
+    };
+  }
+});
+exports._sfc_main = _sfc_main;