@pequity/squirrel 1.0.20 → 1.0.21

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

@@ -0,0 +1,415 @@
+import { defineComponent, ref, useAttrs, computed, watch, onMounted, onUnmounted, resolveDirective, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, toDisplayString, createCommentVNode, createVNode, mergeProps, withCtx, createElementVNode, isRef, Fragment, renderList, withDirectives, renderSlot, vShow } from "vue";
+import PDropdown from "../p-dropdown.js";
+import PInputSearch from "../p-input-search.js";
+import { SIZES } from "../p-select-list.js";
+import { omit } from "lodash-es";
+import { splitStringForHighlight } from "../text.js";
+import { toString } from "../string.js";
+import { useInputClasses } from "../useInputClasses.js";
+import { useSelectList } from "../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__ */ 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__ */ 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(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 = ref("auto");
+    const listItemStyle = ref({ paddingTop: 0, paddingBottom: 0 });
+    const dropdownShow = ref(false);
+    let observer = null;
+    const scrollerStyle = ref({ maxHeight: "none" });
+    const formControl = ref(null);
+    const inputSearch = ref(null);
+    const actionsContainer = ref(null);
+    const $attrs = useAttrs();
+    const virtualizerRef = ref(null);
+    const { labelClasses, selectClasses, errorMsgClasses } = 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(props, inputSearch, virtualizerRef, emit);
+    const menuAttrs = computed(() => omit(props.dropdownMenuAttrs, ["class", "style"]));
+    const menuStyle = computed(() => ({ ...props.dropdownMenuStyle, width: width.value }));
+    const attrs = computed(() => {
+      const { class: classes, style: style2, ...rest } = $attrs;
+      return rest;
+    });
+    const style = computed(() => $attrs.style);
+    watch(
+      dropdownShow,
+      (nV) => {
+        nV && putSelectedItemsOnTop();
+      },
+      {
+        immediate: true
+      }
+    );
+    onMounted(() => {
+      observer = new ResizeObserver((entries) => {
+        entries.forEach((entry) => {
+          const rect = entry.contentRect;
+          width.value = rect.width + "px" || "auto";
+        });
+      });
+      observer.observe(formControl.value);
+    });
+    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 = resolveDirective("close-popper");
+      return openBlock(), createElementBlock("div", {
+        ref_key: "formControl",
+        ref: formControl,
+        class: normalizeClass([{ hidden: unref($attrs).hidden }, unref($attrs).class]),
+        "data-has-error": !!__props.errorMsg,
+        style: normalizeStyle(style.value),
+        "aria-label": "Dropdown select"
+      }, [
+        __props.label ? (openBlock(), createElementBlock("label", {
+          key: 0,
+          class: normalizeClass(unref(labelClasses))
+        }, toDisplayString(__props.label), 3)) : createCommentVNode("", true),
+        createVNode(PDropdown, mergeProps({ shown: dropdownShow.value }, { ...P_DROPDOWN_DEFAULTS, ...__props.pDropdownProps }, {
+          class: "relative flex w-full items-center justify-center",
+          onApplyShow: onShow,
+          onApplyHide: onHide
+        }), {
+          popper: withCtx(() => [
+            createElementVNode("div", mergeProps(menuAttrs.value, {
+              class: __props.dropdownMenuClass,
+              style: menuStyle.value,
+              "p-select-list": "",
+              role: "listbox"
+            }), [
+              __props.multiple || __props.searchable ? (openBlock(), createElementBlock("div", _hoisted_4, [
+                __props.multiple ? (openBlock(), createElementBlock("div", {
+                  key: 0,
+                  ref_key: "actionsContainer",
+                  ref: actionsContainer,
+                  class: "flex flex-row justify-between text-xs font-semibold text-primary"
+                }, [
+                  createElementVNode("p", _hoisted_5, toDisplayString(unref(computedItems).length) + " items", 1),
+                  createElementVNode("div", _hoisted_6, [
+                    unref(computedItems).length === unref(internalItems).length ? (openBlock(), createElementBlock("a", {
+                      key: 0,
+                      class: normalizeClass([
+                        unref(selectedItems).length !== unref(internalItems).length ? "cursor-pointer" : "pointer-events-none opacity-50"
+                      ]),
+                      onClick: _cache[1] || (_cache[1] = //@ts-ignore
+                      (...args) => unref(selectAll) && unref(selectAll)(...args))
+                    }, " Select all ", 2)) : (openBlock(), createElementBlock("a", {
+                      key: 1,
+                      class: normalizeClass([unref(computedInsideSelected) ? "pointer-events-none opacity-50" : "cursor-pointer"]),
+                      onClick: _cache[2] || (_cache[2] = //@ts-ignore
+                      (...args) => unref(selectAll) && unref(selectAll)(...args))
+                    }, " Select all filtered ", 2)),
+                    _hoisted_7,
+                    createElementVNode("a", {
+                      class: normalizeClass([unref(selectedItems).length ? "cursor-pointer" : "pointer-events-none opacity-50"]),
+                      onClick: _cache[3] || (_cache[3] = //@ts-ignore
+                      (...args) => unref(clearAll) && unref(clearAll)(...args))
+                    }, " Clear all ", 2)
+                  ])
+                ], 512)) : createCommentVNode("", true),
+                __props.searchable ? (openBlock(), createElementBlock("div", {
+                  key: 1,
+                  class: normalizeClass([{ "mt-3": __props.multiple }])
+                }, [
+                  createVNode(PInputSearch, {
+                    ref_key: "inputSearch",
+                    ref: inputSearch,
+                    modelValue: unref(search),
+                    "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => isRef(search) ? search.value = $event : null),
+                    size: __props.size,
+                    placeholder: __props.placeholderSearch
+                  }, null, 8, ["modelValue", "size", "placeholder"])
+                ], 2)) : createCommentVNode("", true)
+              ])) : createCommentVNode("", true),
+              createElementVNode("div", {
+                ref_key: "virtualizerRef",
+                ref: virtualizerRef,
+                style: normalizeStyle(scrollerStyle.value),
+                class: normalizeClass(["overflow-y-auto", { "mt-3": __props.multiple || __props.searchable }])
+              }, [
+                createElementVNode("div", {
+                  class: "relative w-full",
+                  "p-select-list-options": "",
+                  style: normalizeStyle({ height: `${unref(rowVirtualizer).getTotalSize()}px` }),
+                  onMousemove: _cache[5] || (_cache[5] = //@ts-ignore
+                  (...args) => unref(onMousemove) && unref(onMousemove)(...args))
+                }, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(unref(rowVirtualizer).getVirtualItems(), (row) => {
+                    return openBlock(), createElementBlock("div", {
+                      key: row.index,
+                      class: "absolute left-0 top-0 w-full",
+                      "p-select-list-option": "",
+                      role: "option",
+                      style: normalizeStyle({ height: `${row.size}px`, transform: `translateY(${row.start}px)` })
+                    }, [
+                      withDirectives((openBlock(), createElementBlock("div", {
+                        class: normalizeClass([unref(LIST_ITEM_CLASS), { [unref(LIST_ITEM_ACTIVE_CLASS)]: unref(isSelected)(unref(getValue)(row.index)) }]),
+                        "p-select-list-option-item": "",
+                        style: normalizeStyle(listItemStyle.value),
+                        onClick: ($event) => unref(select)($event, unref(getValue)(row.index))
+                      }, [
+                        createElementVNode("div", {
+                          class: normalizeClass(["flex items-center", { [unref(SIZES)[__props.size]]: !__props.itemSize }])
+                        }, [
+                          renderSlot(_ctx.$slots, "item", {
+                            item: unref(computedItems)[row.index],
+                            isItemSelected: unref(isSelected)(unref(getValue)(row.index)),
+                            itemTextSplit: unref(splitStringForHighlight)(unref(toString)(unref(getText)(row.index)), unref(search))
+                          }, () => [
+                            createElementVNode("div", {
+                              class: "truncate text-p-purple-60",
+                              title: unref(toString)(unref(getText)(row.index))
+                            }, [
+                              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(splitStringForHighlight)(unref(toString)(unref(getText)(row.index)), unref(search)), (str, index) => {
+                                return openBlock(), createElementBlock("span", {
+                                  key: `${unref(getValue)(row.index)}_${index}`,
+                                  class: normalizeClass({ "bg-p-blue-20": index === 1 })
+                                }, toDisplayString(str), 3);
+                              }), 128))
+                            ], 8, _hoisted_9)
+                          ]),
+                          unref(isSelected)(unref(getValue)(row.index)) ? (openBlock(), createElementBlock("img", _hoisted_10)) : createCommentVNode("", true)
+                        ], 2)
+                      ], 14, _hoisted_8)), [
+                        [_directive_close_popper, !__props.multiple]
+                      ])
+                    ], 4);
+                  }), 128))
+                ], 36),
+                !unref(computedItems).length ? renderSlot(_ctx.$slots, "no-items", { key: 0 }, () => [
+                  createElementVNode("div", {
+                    class: normalizeClass(["flex items-center justify-center", unref(SIZES)[__props.size]])
+                  }, "No items found", 2)
+                ]) : createCommentVNode("", true)
+              ], 6)
+            ], 16)
+          ]),
+          default: withCtx(() => [
+            createElementVNode("button", mergeProps(attrs.value, {
+              ref: "button",
+              type: "button",
+              class: ["w-full", unref(selectClasses), dropdownShow.value ? "border-primary" : ""],
+              role: "button",
+              "aria-haspopup": "listbox",
+              onClick: _cache[0] || (_cache[0] = ($event) => dropdownShow.value = !dropdownShow.value)
+            }), [
+              !unref(internalValue).length || !unref(selectedItems).length ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(__props.placeholder || " "), 1)) : renderSlot(_ctx.$slots, "selected-item", {
+                key: 1,
+                item: __props.multiple ? unref(selectedItems) : unref(selectedItems)[0]
+              }, () => [
+                createElementVNode("div", _hoisted_3, toDisplayString(__props.multiple && unref(selectedItems).length > 1 ? `${unref(selectedItems).length} option${unref(selectedItems).length > 1 ? "s" : ""} selected` : unref(selectedItems)[0][__props.itemText]), 1)
+              ])
+            ], 16)
+          ]),
+          _: 3
+        }, 16, ["shown"]),
+        withDirectives(createElementVNode("div", {
+          class: normalizeClass(unref(errorMsgClasses))
+        }, toDisplayString(__props.errorMsg), 3), [
+          [vShow, __props.errorMsg]
+        ])
+      ], 14, _hoisted_1);
+    };
+  }
+});
+export {
+  _imports_0 as _,
+  _sfc_main as a
+};

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

@@ -0,0 +1,54 @@
+import { defineComponent, computed, openBlock, createBlock, withCtx, createElementVNode, normalizeClass } from "vue";
+import PInputNumber from "../p-input-number.js";
+import { isNumber } from "lodash-es";
+const _hoisted_1 = /* @__PURE__ */ createElementVNode("div", null, "%", -1);
+const _hoisted_2 = [
+  _hoisted_1
+];
+const _sfc_main = /* @__PURE__ */ 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 = computed({
+      get: () => isNumber(props.modelValue) ? props.modelValue * 100 : props.modelValue,
+      set: (nV) => emit("update:modelValue", isNumber(nV) ? nV / 100 : nV)
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(PInputNumber, {
+        modelValue: convertedValue.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => convertedValue.value = $event),
+        size: __props.size
+      }, {
+        prefix: withCtx(() => [
+          createElementVNode("div", {
+            class: normalizeClass(["absolute flex items-center", prefixClasses[__props.size]])
+          }, _hoisted_2, 2)
+        ]),
+        _: 1
+      }, 8, ["modelValue", "size"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

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

@@ -0,0 +1,67 @@
+import { defineComponent, computed, openBlock, createBlock, createElementBlock, Fragment, createTextVNode, toDisplayString, renderSlot } from "vue";
+import PSkeletonLoader from "../p-skeleton-loader.js";
+const _hoisted_1 = {
+  key: 1,
+  class: "text-sm font-medium text-p-gray-40"
+};
+const _sfc_main = /* @__PURE__ */ 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 = 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 = computed(() => {
+      const to2 = props.currentPage * props.pageSize;
+      return to2 >= props.count ? props.count : to2;
+    });
+    return (_ctx, _cache) => {
+      return __props.loading ? (openBlock(), createBlock(PSkeletonLoader, {
+        key: 0,
+        class: "h-6 w-56"
+      })) : (openBlock(), createElementBlock("div", _hoisted_1, [
+        __props.count ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          createTextVNode("Showing " + toDisplayString(from.value) + " to " + toDisplayString(to.value) + " of " + toDisplayString(__props.count) + " results", 1)
+        ], 64)) : renderSlot(_ctx.$slots, "no-results", { key: 1 }, () => [
+          createTextVNode("No results found")
+        ])
+      ]));
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/es/chunks/p-pagination.js

@@ -0,0 +1,123 @@
+import { defineComponent, computed, openBlock, createElementBlock, Fragment, createBlock, createCommentVNode, createElementVNode, normalizeClass, renderList, toDisplayString } from "vue";
+import PSkeletonLoader from "../p-skeleton-loader.js";
+import { createPagingRange } from "../pagination.js";
+const _imports_0 = "data:image/svg+xml,%3csvg%20width='8'%20height='12'%20viewBox='0%200%208%2012'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M0.25%205.99968C0.25%205.64968%200.4%205.34968%200.65%205.14968L6.25%200.249681C6.65%20-0.100319%207.2%20-0.0503187%207.55%200.349681C7.85%200.749681%207.85%201.29968%207.45%201.59968L2.55%205.89968C2.5%205.94968%202.5%205.99968%202.55%206.04968L7.45%2010.3497C7.85%2010.6997%207.9%2011.2497%207.55%2011.6497C7.2%2012.0497%206.65%2012.0997%206.25%2011.7497C6.25%2011.7497%206.25%2011.7497%206.2%2011.6997L0.65%206.84968C0.4%206.64968%200.25%206.29968%200.25%205.99968Z'%20fill='%23918da1'%20/%3e%3c/svg%3e";
+const _imports_1 = "data:image/svg+xml,%3csvg%20width='8'%20height='14'%20viewBox='0%200%208%2014'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M7.75695%206.98136C7.75695%207.33136%207.60695%207.63136%207.35695%207.83136L1.75695%2012.7814C1.35695%2013.1314%200.756947%2013.0814%200.456947%2012.6814C0.156947%2012.2814%200.156947%2011.7314%200.556947%2011.3814L5.45695%207.08136C5.50695%207.03136%205.50695%206.98136%205.45695%206.88136L0.556947%202.58136C0.156947%202.23136%200.156947%201.63136%200.506947%201.28136C0.856947%200.931361%201.40695%200.881361%201.80695%201.18136L7.40695%206.08136C7.60695%206.33136%207.75695%206.63136%207.75695%206.98136Z'%20fill='%23918da1'%20/%3e%3c/svg%3e";
+const _hoisted_1 = {
+  key: 1,
+  class: "flex text-p-gray-40"
+};
+const _hoisted_2 = /* @__PURE__ */ createElementVNode("img", { src: _imports_0 }, null, -1);
+const _hoisted_3 = [
+  _hoisted_2
+];
+const _hoisted_4 = ["onClick"];
+const _hoisted_5 = { class: "flex" };
+const _hoisted_6 = ["aria-label"];
+const _hoisted_7 = /* @__PURE__ */ createElementVNode("img", { src: _imports_1 }, null, -1);
+const _hoisted_8 = [
+  _hoisted_7
+];
+const DOTS = "...";
+const BTN_CLASS = "w-6 h-6 flex justify-center items-center mx-1 font-semibold text-sm leading-none";
+const BTN_ACTIVE_CLASS = "text-p-purple-60 bg-p-gray-30 rounded-lg";
+const BTN_INACTIVE_CLASS = "cursor-pointer";
+const ARROW_ACTIVE_CLASS = "cursor-pointer";
+const ARROW_INACTIVE_CLASS = "opacity-50";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "PPagination" },
+  __name: "p-pagination",
+  props: {
+    /**
+     * The current page.
+     */
+    modelValue: {
+      type: Number,
+      default: null
+    },
+    /**
+     * The amount of data pagination should iterate through.
+     */
+    count: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * The amount of data to be displayed at 1 page. Used to calculate the length of pagination.
+     */
+    pageSize: {
+      type: Number,
+      default: 10
+    },
+    /**
+     * The amount of pages to be displayed before and after the current page.
+     */
+    pageOffset: {
+      type: Number,
+      default: 2
+    },
+    /**
+     * Whether the pagination is loading.
+     */
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const props = __props;
+    const pageCount = computed(() => {
+      return props.count && Math.ceil(props.count / props.pageSize);
+    });
+    const pages = computed(() => {
+      return createPagingRange(Number(props.modelValue), pageCount.value, props.pageOffset, DOTS);
+    });
+    const setPage = (page) => {
+      if (page >= 1 && page <= pageCount.value) {
+        emit("update:modelValue", page);
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        __props.loading ? (openBlock(), createBlock(PSkeletonLoader, {
+          key: 0,
+          class: "h-6 w-56"
+        })) : createCommentVNode("", true),
+        !__props.loading && pages.value.length > 1 ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          createElementVNode("div", {
+            class: normalizeClass([BTN_CLASS, Number(__props.modelValue) <= 1 ? ARROW_INACTIVE_CLASS : ARROW_ACTIVE_CLASS]),
+            "aria-label": "go to the previous page",
+            onClick: _cache[0] || (_cache[0] = ($event) => setPage(Number(__props.modelValue) - 1))
+          }, _hoisted_3, 2),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(pages.value, (page, index) => {
+            return openBlock(), createElementBlock("div", {
+              key: index,
+              onClick: ($event) => setPage(Number(page))
+            }, [
+              createElementVNode("div", _hoisted_5, [
+                page !== DOTS ? (openBlock(), createElementBlock("div", {
+                  key: 0,
+                  class: normalizeClass([BTN_CLASS, page === __props.modelValue ? BTN_ACTIVE_CLASS : BTN_INACTIVE_CLASS]),
+                  "aria-label": `go to page ${page}`
+                }, toDisplayString(page), 11, _hoisted_6)) : (openBlock(), createElementBlock("div", {
+                  key: 1,
+                  class: normalizeClass(BTN_CLASS)
+                }, toDisplayString(DOTS)))
+              ])
+            ], 8, _hoisted_4);
+          }), 128)),
+          createElementVNode("div", {
+            class: normalizeClass([BTN_CLASS, __props.modelValue === pageCount.value ? ARROW_INACTIVE_CLASS : ARROW_ACTIVE_CLASS]),
+            "aria-label": "go to the next page",
+            onClick: _cache[1] || (_cache[1] = ($event) => setPage(Number(__props.modelValue) + 1))
+          }, _hoisted_8, 2)
+        ])) : createCommentVNode("", true)
+      ], 64);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};