@pequity/squirrel 1.0.19 → 1.0.20-beta.1

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

@@ -0,0 +1,366 @@
+import { defineComponent as Se, ref as d, useAttrs as xe, computed as k, watch as be, onMounted as we, onUnmounted as Ce, resolveDirective as ke, openBlock as n, createElementBlock as i, normalizeClass as r, unref as e, normalizeStyle as S, toDisplayString as y, createCommentVNode as v, createVNode as R, mergeProps as T, withCtx as q, createElementVNode as a, isRef as Ae, Fragment as U, renderList as Z, withDirectives as W, renderSlot as V, vShow as Ie } from "vue";
+import ze from "../p-dropdown.js";
+import Me from "../p-input-search.js";
+import { SIZES as L } from "../p-select-list.js";
+import { omit as Te } from "lodash-es";
+import { splitStringForHighlight as Y } from "../text.js";
+import { toString as $ } from "../string.js";
+import { useInputClasses as Ve } from "../useInputClasses.js";
+import { useSelectList as Le } from "../useSelectList.js";
+const $e = "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", Ne = ["data-has-error"], Be = {
+  key: 0,
+  class: "truncate text-left text-p-gray-40"
+}, De = { class: "truncate text-left" }, Oe = {
+  key: 0,
+  class: "mt-3 px-3"
+}, Pe = { class: "text-p-purple-60" }, je = { class: "flex flex-row" }, Ee = /* @__PURE__ */ a("span", { class: "px-1 leading-none" }, ".", -1), Fe = ["onClick"], He = ["title"], Re = {
+  key: 0,
+  class: "ml-auto fill-p-purple-60 pl-2",
+  src: $e
+}, Xe = /* @__PURE__ */ Se({
+  name: "PDropdownSelect",
+  inheritAttrs: !1,
+  __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: !1
+    },
+    /**
+     * 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: !1
+    },
+    size: {
+      type: String,
+      default: "md",
+      validator(t) {
+        return Object.keys(L).includes(t);
+      }
+    },
+    /**
+     * 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: !1
+    },
+    /**
+     * Enables multiple selection
+     */
+    multiple: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * 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: !1
+    }
+  },
+  emits: ["update:modelValue", "select"],
+  setup(t, { emit: G }) {
+    const J = G, m = t, K = () => new Promise((o) => requestAnimationFrame(() => requestAnimationFrame(o))), Q = (o) => new Promise((s) => setTimeout(s, o || 0)), X = {
+      triggerStyle: { display: "block" },
+      triggers: [],
+      distance: 2,
+      placement: "bottom-end",
+      noAutoFocus: !0,
+      enableArrowNavigation: !1
+    }, N = d("auto"), _ = d({ paddingTop: 0, paddingBottom: 0 }), p = d(!1);
+    let x = null;
+    const B = d({ maxHeight: "none" }), h = d(null), A = d(null), D = d(null), b = xe(), O = d(null), { labelClasses: ee, selectClasses: te, errorMsgClasses: le } = Ve(m), {
+      LIST_ITEM_CLASS: se,
+      LIST_ITEM_ACTIVE_CLASS: oe,
+      selectedItems: u,
+      computedItems: w,
+      computedItemSize: ne,
+      computedInsideSelected: ie,
+      internalItems: P,
+      internalValue: ae,
+      search: f,
+      rowVirtualizer: j,
+      getValue: g,
+      getText: I,
+      isSelected: z,
+      setupNavigationSvc: re,
+      destroyNavigationSvc: ue,
+      select: ce,
+      onMousemove: E,
+      scrollToActiveItem: de,
+      putSelectedItemsOnTop: me,
+      selectAll: C,
+      clearAll: F
+    } = Le(m, A, O, J), pe = k(() => Te(m.dropdownMenuAttrs, ["class", "style"])), fe = k(() => ({ ...m.dropdownMenuStyle, width: N.value })), ye = k(() => {
+      const { class: o, style: s, ...c } = b;
+      return c;
+    }), ve = k(() => b.style);
+    be(
+      p,
+      (o) => {
+        o && me();
+      },
+      {
+        immediate: !0
+      }
+    ), we(() => {
+      x = new ResizeObserver((o) => {
+        o.forEach((s) => {
+          const c = s.contentRect;
+          N.value = c.width + "px" || "auto";
+        });
+      }), x.observe(h.value);
+    }), Ce(() => {
+      h.value && x && x.unobserve(h.value);
+    });
+    const he = async () => {
+      var s, c;
+      const o = ((s = D.value) == null ? void 0 : s.clientHeight) || 0;
+      B.value = { maxHeight: `${ne.value * m.itemsVisible - o}px` }, f.value = "", re(), m.searchable && (await Q(), await K(), (c = A.value) == null || c.$el.querySelector("input").focus()), de();
+    }, ge = () => {
+      var o;
+      p.value = !1, ue(), ((o = h.value) == null ? void 0 : o.querySelector("button")).focus();
+    };
+    return (o, s) => {
+      const c = ke("close-popper");
+      return n(), i("div", {
+        ref_key: "formControl",
+        ref: h,
+        class: r([{ hidden: e(b).hidden }, e(b).class]),
+        "data-has-error": !!t.errorMsg,
+        style: S(ve.value),
+        "aria-label": "Dropdown select"
+      }, [
+        t.label ? (n(), i("label", {
+          key: 0,
+          class: r(e(ee))
+        }, y(t.label), 3)) : v("", !0),
+        R(ze, T({ shown: p.value }, { ...X, ...t.pDropdownProps }, {
+          class: "relative flex w-full items-center justify-center",
+          onApplyShow: he,
+          onApplyHide: ge
+        }), {
+          popper: q(() => [
+            a("div", T(pe.value, {
+              class: t.dropdownMenuClass,
+              style: fe.value,
+              "p-select-list": "",
+              role: "listbox"
+            }), [
+              t.multiple || t.searchable ? (n(), i("div", Oe, [
+                t.multiple ? (n(), i("div", {
+                  key: 0,
+                  ref_key: "actionsContainer",
+                  ref: D,
+                  class: "flex flex-row justify-between text-xs font-semibold text-primary"
+                }, [
+                  a("p", Pe, y(e(w).length) + " items", 1),
+                  a("div", je, [
+                    e(w).length === e(P).length ? (n(), i("a", {
+                      key: 0,
+                      class: r([
+                        e(u).length !== e(P).length ? "cursor-pointer" : "pointer-events-none opacity-50"
+                      ]),
+                      onClick: s[1] || (s[1] = //@ts-ignore
+                      (...l) => e(C) && e(C)(...l))
+                    }, " Select all ", 2)) : (n(), i("a", {
+                      key: 1,
+                      class: r([e(ie) ? "pointer-events-none opacity-50" : "cursor-pointer"]),
+                      onClick: s[2] || (s[2] = //@ts-ignore
+                      (...l) => e(C) && e(C)(...l))
+                    }, " Select all filtered ", 2)),
+                    Ee,
+                    a("a", {
+                      class: r([e(u).length ? "cursor-pointer" : "pointer-events-none opacity-50"]),
+                      onClick: s[3] || (s[3] = //@ts-ignore
+                      (...l) => e(F) && e(F)(...l))
+                    }, " Clear all ", 2)
+                  ])
+                ], 512)) : v("", !0),
+                t.searchable ? (n(), i("div", {
+                  key: 1,
+                  class: r([{ "mt-3": t.multiple }])
+                }, [
+                  R(Me, {
+                    ref_key: "inputSearch",
+                    ref: A,
+                    modelValue: e(f),
+                    "onUpdate:modelValue": s[4] || (s[4] = (l) => Ae(f) ? f.value = l : null),
+                    size: t.size,
+                    placeholder: t.placeholderSearch
+                  }, null, 8, ["modelValue", "size", "placeholder"])
+                ], 2)) : v("", !0)
+              ])) : v("", !0),
+              a("div", {
+                ref_key: "virtualizerRef",
+                ref: O,
+                style: S(B.value),
+                class: r(["overflow-y-auto", { "mt-3": t.multiple || t.searchable }])
+              }, [
+                a("div", {
+                  class: "relative w-full",
+                  "p-select-list-options": "",
+                  style: S({ height: `${e(j).getTotalSize()}px` }),
+                  onMousemove: s[5] || (s[5] = //@ts-ignore
+                  (...l) => e(E) && e(E)(...l))
+                }, [
+                  (n(!0), i(U, null, Z(e(j).getVirtualItems(), (l) => (n(), i("div", {
+                    key: l.index,
+                    class: "absolute left-0 top-0 w-full",
+                    "p-select-list-option": "",
+                    role: "option",
+                    style: S({ height: `${l.size}px`, transform: `translateY(${l.start}px)` })
+                  }, [
+                    W((n(), i("div", {
+                      class: r([e(se), { [e(oe)]: e(z)(e(g)(l.index)) }]),
+                      "p-select-list-option-item": "",
+                      style: S(_.value),
+                      onClick: (M) => e(ce)(M, e(g)(l.index))
+                    }, [
+                      a("div", {
+                        class: r(["flex items-center", { [e(L)[t.size]]: !t.itemSize }])
+                      }, [
+                        V(o.$slots, "item", {
+                          item: e(w)[l.index],
+                          isItemSelected: e(z)(e(g)(l.index)),
+                          itemTextSplit: e(Y)(e($)(e(I)(l.index)), e(f))
+                        }, () => [
+                          a("div", {
+                            class: "truncate text-p-purple-60",
+                            title: e($)(e(I)(l.index))
+                          }, [
+                            (n(!0), i(U, null, Z(e(Y)(e($)(e(I)(l.index)), e(f)), (M, H) => (n(), i("span", {
+                              key: `${e(g)(l.index)}_${H}`,
+                              class: r({ "bg-p-blue-20": H === 1 })
+                            }, y(M), 3))), 128))
+                          ], 8, He)
+                        ]),
+                        e(z)(e(g)(l.index)) ? (n(), i("img", Re)) : v("", !0)
+                      ], 2)
+                    ], 14, Fe)), [
+                      [c, !t.multiple]
+                    ])
+                  ], 4))), 128))
+                ], 36),
+                e(w).length ? v("", !0) : V(o.$slots, "no-items", { key: 0 }, () => [
+                  a("div", {
+                    class: r(["flex items-center justify-center", e(L)[t.size]])
+                  }, "No items found", 2)
+                ])
+              ], 6)
+            ], 16)
+          ]),
+          default: q(() => [
+            a("button", T(ye.value, {
+              ref: "button",
+              type: "button",
+              class: ["w-full", e(te), p.value ? "border-primary" : ""],
+              role: "button",
+              "aria-haspopup": "listbox",
+              onClick: s[0] || (s[0] = (l) => p.value = !p.value)
+            }), [
+              !e(ae).length || !e(u).length ? (n(), i("div", Be, y(t.placeholder || " "), 1)) : V(o.$slots, "selected-item", {
+                key: 1,
+                item: t.multiple ? e(u) : e(u)[0]
+              }, () => [
+                a("div", De, y(t.multiple && e(u).length > 1 ? `${e(u).length} option${e(u).length > 1 ? "s" : ""} selected` : e(u)[0][t.itemText]), 1)
+              ])
+            ], 16)
+          ]),
+          _: 3
+        }, 16, ["shown"]),
+        W(a("div", {
+          class: r(e(le))
+        }, y(t.errorMsg), 3), [
+          [Ie, t.errorMsg]
+        ])
+      ], 14, Ne);
+    };
+  }
+});
+export {
+  $e as _,
+  Xe as a
+};

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

@@ -0,0 +1,45 @@
+import { defineComponent as d, computed as p, openBlock as c, createBlock as f, withCtx as x, createElementVNode as u, normalizeClass as V } from "vue";
+import z from "../p-input-number.js";
+import { isNumber as s } from "lodash-es";
+const _ = /* @__PURE__ */ u("div", null, "%", -1), b = [
+  _
+], C = /* @__PURE__ */ d({
+  name: "PInputPercent",
+  __name: "p-input-percent",
+  props: {
+    modelValue: {
+      type: [Number, String],
+      default: null
+    },
+    size: {
+      type: String,
+      default: "md"
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(t, { emit: a }) {
+    const n = {
+      sm: "text-sm h-8 left-2",
+      md: "text-base h-10 left-3",
+      lg: "text-lg h-12 left-5"
+    }, l = t, i = a, o = p({
+      get: () => s(l.modelValue) ? l.modelValue * 100 : l.modelValue,
+      set: (e) => i("update:modelValue", s(e) ? e / 100 : e)
+    });
+    return (e, m) => (c(), f(z, {
+      modelValue: o.value,
+      "onUpdate:modelValue": m[0] || (m[0] = (r) => o.value = r),
+      size: t.size
+    }, {
+      prefix: x(() => [
+        u("div", {
+          class: V(["absolute flex items-center", n[t.size]])
+        }, b, 2)
+      ]),
+      _: 1
+    }, 8, ["modelValue", "size"]));
+  }
+});
+export {
+  C as _
+};

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

@@ -0,0 +1,61 @@
+import { defineComponent as m, computed as r, openBlock as n, createBlock as g, createElementBlock as c, Fragment as p, createTextVNode as u, toDisplayString as a, renderSlot as f } from "vue";
+import d from "../p-skeleton-loader.js";
+const y = {
+  key: 1,
+  class: "text-sm font-medium text-p-gray-40"
+}, S = /* @__PURE__ */ m({
+  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: !1
+    }
+  },
+  setup(o) {
+    const e = o, s = r(() => {
+      const t = Math.ceil(e.count / e.pageSize);
+      return ((e.currentPage > t ? t : e.currentPage) - 1) * e.pageSize + 1;
+    }), l = r(() => {
+      const t = e.currentPage * e.pageSize;
+      return t >= e.count ? e.count : t;
+    });
+    return (t, i) => o.loading ? (n(), g(d, {
+      key: 0,
+      class: "h-6 w-56"
+    })) : (n(), c("div", y, [
+      o.count ? (n(), c(p, { key: 0 }, [
+        u("Showing " + a(s.value) + " to " + a(l.value) + " of " + a(o.count) + " results", 1)
+      ], 64)) : f(t.$slots, "no-results", { key: 1 }, () => [
+        u("No results found")
+      ])
+    ]));
+  }
+});
+export {
+  S as _
+};

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

@@ -0,0 +1,93 @@
+import { defineComponent as y, computed as C, openBlock as o, createElementBlock as l, Fragment as p, createBlock as L, createCommentVNode as v, createElementVNode as a, normalizeClass as r, renderList as S, toDisplayString as f } from "vue";
+import V from "../p-skeleton-loader.js";
+import { createPagingRange as w } from "../pagination.js";
+const k = "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", A = "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", B = {
+  key: 1,
+  class: "flex text-p-gray-40"
+}, T = /* @__PURE__ */ a("img", { src: k }, null, -1), E = [
+  T
+], I = ["onClick"], O = { class: "flex" }, P = ["aria-label"], R = /* @__PURE__ */ a("img", { src: A }, null, -1), $ = [
+  R
+], m = "...", c = "w-6 h-6 flex justify-center items-center mx-1 font-semibold text-sm leading-none", z = "text-p-purple-60 bg-p-gray-30 rounded-lg", M = "cursor-pointer", h = "cursor-pointer", _ = "opacity-50", F = /* @__PURE__ */ y({
+  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: !1
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: x }) {
+    const N = x, n = e, u = C(() => n.count && Math.ceil(n.count / n.pageSize)), g = C(() => w(Number(n.modelValue), u.value, n.pageOffset, m)), d = (s) => {
+      s >= 1 && s <= u.value && N("update:modelValue", s);
+    };
+    return (s, i) => (o(), l(p, null, [
+      e.loading ? (o(), L(V, {
+        key: 0,
+        class: "h-6 w-56"
+      })) : v("", !0),
+      !e.loading && g.value.length > 1 ? (o(), l("div", B, [
+        a("div", {
+          class: r([c, Number(e.modelValue) <= 1 ? _ : h]),
+          "aria-label": "go to the previous page",
+          onClick: i[0] || (i[0] = (t) => d(Number(e.modelValue) - 1))
+        }, E, 2),
+        (o(!0), l(p, null, S(g.value, (t, b) => (o(), l("div", {
+          key: b,
+          onClick: (D) => d(Number(t))
+        }, [
+          a("div", O, [
+            t !== m ? (o(), l("div", {
+              key: 0,
+              class: r([c, t === e.modelValue ? z : M]),
+              "aria-label": `go to page ${t}`
+            }, f(t), 11, P)) : (o(), l("div", {
+              key: 1,
+              class: r(c)
+            }, f(m)))
+          ])
+        ], 8, I))), 128)),
+        a("div", {
+          class: r([c, e.modelValue === u.value ? _ : h]),
+          "aria-label": "go to the next page",
+          onClick: i[1] || (i[1] = (t) => d(Number(e.modelValue) + 1))
+        }, $, 2)
+      ])) : v("", !0)
+    ], 64));
+  }
+});
+export {
+  F as _
+};

package/dist/es/chunks/p-ring-loader.js

@@ -0,0 +1,59 @@
+import { defineComponent as S, computed as i, openBlock as g, createElementBlock as x, normalizeStyle as n, createElementVNode as o, normalizeClass as l } from "vue";
+import { getColor as $ } from "../tailwind.js";
+const s = "block animate-spin absolute box-border rounded-full w-4/5 h-4/5 m-[10%]", _ = /* @__PURE__ */ S({
+  name: "PRingLoader",
+  __name: "p-ring-loader",
+  props: {
+    size: {
+      type: Number,
+      default: 80
+    },
+    color: {
+      type: String,
+      default: $("primary")
+    },
+    duration: {
+      type: String,
+      default: "1.2s",
+      validator(t) {
+        return /^\d*\.?\d+(s|ms)$/.test(t);
+      }
+    }
+  },
+  setup(t) {
+    const a = (c, u, h) => {
+      var d, p;
+      const m = {}, f = (d = u.match(/^\d*\.?\d+/)) == null ? void 0 : d[0], D = ((p = u.match(/s|(ms)$/)) == null ? void 0 : p[0]) || "s", z = Math.round(Number(f) * 1e3 * h) / 1e3;
+      return m[c] = z + D, m;
+    }, e = t, r = i(() => ({
+      borderWidth: `${e.size * 0.1}px`,
+      borderColor: `${e.color} transparent transparent transparent`,
+      animationDuration: e.duration,
+      animationTimingFunction: "cubic-bezier(0.5, 0, 0.5, 1)"
+    })), y = i(() => a("animationDelay", e.duration, -0.375)), v = i(() => a("animationDelay", e.duration, -0.25)), b = i(() => a("animationDelay", e.duration, -0.125));
+    return (c, u) => (g(), x("div", {
+      class: "relative inline-block",
+      style: n({ width: `${t.size}px`, height: `${t.size}px` })
+    }, [
+      o("div", {
+        class: l(s),
+        style: n([r.value, y.value])
+      }, null, 4),
+      o("div", {
+        class: l(s),
+        style: n([r.value, v.value])
+      }, null, 4),
+      o("div", {
+        class: l(s),
+        style: n([r.value, b.value])
+      }, null, 4),
+      o("div", {
+        class: l(s),
+        style: n([r.value])
+      }, null, 4)
+    ], 4));
+  }
+});
+export {
+  _
+};