@xy-planning-network/trees 0.4.1 → 0.4.2

package/dist/trees.es.js

@@ -17,7 +17,7 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { cloneVNode, h, inject, provide, watchEffect, defineComponent, ref, onUnmounted, Teleport, reactive, onUpdated, computed, onMounted, nextTick, watch, openBlock, createBlock, createVNode, unref, withCtx, Transition, createElementVNode, createElementBlock, Fragment, renderList, normalizeClass, toDisplayString, createCommentVNode, renderSlot, resolveDynamicComponent, normalizeProps, mergeProps, createTextVNode, useAttrs, withModifiers, TransitionGroup, withDirectives, vShow, getCurrentInstance, vModelText, resolveComponent, vModelCheckbox } from "vue";
+import { cloneVNode, h, inject, provide, watchEffect, defineComponent, ref, onUnmounted, Teleport, reactive, onUpdated, computed, onMounted, nextTick, watch, openBlock, createBlock, createVNode, unref, withCtx, Transition, createElementVNode, createElementBlock, Fragment, renderList, normalizeClass, toDisplayString, createCommentVNode, renderSlot, resolveDynamicComponent, normalizeProps, mergeProps, createTextVNode, useAttrs, withModifiers, TransitionGroup, withDirectives, vShow, normalizeStyle, getCurrentInstance, vModelText, resolveComponent, vModelCheckbox } from "vue";
 var axios$2 = { exports: {} };
 var bind$2 = function bind(fn, thisArg) {
   return function wrap() {
@@ -4170,9 +4170,9 @@ function render$5(_ctx, _cache) {
     })
   ]);
 }
-const _hoisted_1$r = /* @__PURE__ */ createElementVNode("span", { class: "sr-only" }, "Open options", -1);
+const _hoisted_1$q = /* @__PURE__ */ createElementVNode("span", { class: "sr-only" }, "Open options", -1);
 const _hoisted_2$k = { class: "py-1" };
-const _hoisted_3$g = ["textContent", "onClick"];
+const _hoisted_3$h = ["textContent", "onClick"];
 const _sfc_main$u = /* @__PURE__ */ defineComponent({
   props: {
     currentUser: null,
@@ -4214,7 +4214,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
             disabled: !hasActionItems.value
           }, {
             default: withCtx(() => [
-              _hoisted_1$r,
+              _hoisted_1$q,
               createVNode(unref(render$6), {
                 class: "w-5 h-5",
                 "aria-hidden": "true"
@@ -4249,7 +4249,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
                               ]),
                               textContent: toDisplayString(item.label),
                               onClick: ($event) => emitEvent(item.event)
-                            }, null, 10, _hoisted_3$g)
+                            }, null, 10, _hoisted_3$h)
                           ]),
                           _: 2
                         }, 1024)) : createCommentVNode("", true)
@@ -4268,9 +4268,9 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$q = { class: "px-4 py-5 sm:p-6 text-center" };
+const _hoisted_1$p = { class: "px-4 py-5 sm:p-6 text-center" };
 const _hoisted_2$j = ["textContent"];
-const _hoisted_3$f = ["textContent"];
+const _hoisted_3$g = ["textContent"];
 const _sfc_main$t = /* @__PURE__ */ defineComponent({
   props: {
     cards: null
@@ -4285,7 +4285,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
             class: "bg-white overflow-hidden shadow rounded-lg",
             key: idx
           }, [
-            createElementVNode("div", _hoisted_1$q, [
+            createElementVNode("div", _hoisted_1$p, [
               createElementVNode("dl", null, [
                 createElementVNode("dd", {
                   class: "mt-1 text-3xl leading-9 font-semibold text-xy-blue",
@@ -4294,7 +4294,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
                 createElementVNode("dt", {
                   class: "text-sm leading-5 font-medium text-gray-700 truncate",
                   textContent: toDisplayString(card.secondary)
-                }, null, 8, _hoisted_3$f)
+                }, null, 8, _hoisted_3$g)
               ])
             ])
           ]);
@@ -4303,12 +4303,12 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$p = { class: "flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0" };
+const _hoisted_1$o = { class: "flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0" };
 const _hoisted_2$i = /* @__PURE__ */ createElementVNode("span", {
   class: "hidden sm:inline-block sm:align-middle sm:h-screen",
   "aria-hidden": "true"
 }, "\u200B", -1);
-const _hoisted_3$e = { class: "inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6" };
+const _hoisted_3$f = { class: "inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6" };
 const _hoisted_4$b = { class: "mt-3 text-center sm:mt-5" };
 const _hoisted_5$9 = { class: "mt-2" };
 const _hoisted_6$9 = { class: "mt-5 sm:mt-6" };
@@ -4336,7 +4336,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
             open: __props.modelValue
           }, {
             default: withCtx(() => [
-              createElementVNode("div", _hoisted_1$p, [
+              createElementVNode("div", _hoisted_1$o, [
                 createVNode(unref(TransitionChild), {
                   as: "template",
                   enter: "ease-out duration-300",
@@ -4362,7 +4362,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
                   "leave-to": "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                 }, {
                   default: withCtx(() => [
-                    createElementVNode("div", _hoisted_3$e, [
+                    createElementVNode("div", _hoisted_3$f, [
                       createElementVNode("div", null, [
                         renderSlot(_ctx.$slots, "icon"),
                         createElementVNode("div", _hoisted_4$b, [
@@ -6525,7 +6525,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$o = ["aria-labelledby", "aria-describedby", "id", "placeholder", "type", "value"];
+const _hoisted_1$n = ["aria-labelledby", "aria-describedby", "id", "placeholder", "type", "value"];
 const _sfc_main$p = /* @__PURE__ */ defineComponent({
   props: {
     type: null,
@@ -6583,7 +6583,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
           type: __props.type,
           value: __props.modelValue,
           onInput: _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event.target.value))
-        }, _ctx.$attrs), null, 16, _hoisted_1$o),
+        }, _ctx.$attrs), null, 16, _hoisted_1$n),
         createVNode(_sfc_main$q, {
           id: `${unref(uuid)}-help`,
           text: __props.help
@@ -6639,14 +6639,14 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$n = ["aria-labelledby", "aria-describedby", "id", "value"];
+const _hoisted_1$m = ["aria-labelledby", "aria-describedby", "id", "value"];
 const _hoisted_2$h = {
   key: 0,
   value: "",
   disabled: "",
   selected: ""
 };
-const _hoisted_3$d = ["value", "textContent"];
+const _hoisted_3$e = ["value", "textContent"];
 const _sfc_main$n = /* @__PURE__ */ defineComponent({
   props: {
     design: { default: "standard" },
@@ -6691,9 +6691,9 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
               value: option.value,
               textContent: toDisplayString(option.label),
               key: option.value
-            }, null, 8, _hoisted_3$d);
+            }, null, 8, _hoisted_3$e);
           }), 128))
-        ], 16, _hoisted_1$n),
+        ], 16, _hoisted_1$m),
         createVNode(_sfc_main$q, {
           id: `${unref(uuid)}-help`,
           text: __props.help
@@ -6702,9 +6702,9 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$m = { class: "md:flex md:items-center md:justify-between bg-white mx-auto py-4 border-t border-gray-100" };
+const _hoisted_1$l = { class: "md:flex md:items-center md:justify-between bg-white mx-auto py-4 border-t border-gray-100" };
 const _hoisted_2$g = { class: "flex-1 min-w-0" };
-const _hoisted_3$c = { class: "text-lg leading-6 font-semibold text-gray-900" };
+const _hoisted_3$d = { class: "text-lg leading-6 font-semibold text-gray-900" };
 const _hoisted_4$a = { class: "mt-4 flex md:mt-0 md:ml-4" };
 const _sfc_main$m = /* @__PURE__ */ defineComponent({
   props: {
@@ -6728,9 +6728,9 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
       emits("date-range-changed", dateRange2);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$m, [
+      return openBlock(), createElementBlock("div", _hoisted_1$l, [
         createElementVNode("div", _hoisted_2$g, [
-          createElementVNode("h1", _hoisted_3$c, toDisplayString(__props.title), 1)
+          createElementVNode("h1", _hoisted_3$d, toDisplayString(__props.title), 1)
         ]),
         createElementVNode("div", _hoisted_4$a, [
           createVNode(_sfc_main$n, {
@@ -6754,9 +6754,9 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$l = { class: "px-4 flex items-center justify-between sm:px-0" };
+const _hoisted_1$k = { class: "px-4 flex items-center justify-between sm:px-0" };
 const _hoisted_2$f = { class: "w-0 flex-1 flex" };
-const _hoisted_3$b = /* @__PURE__ */ createElementVNode("svg", {
+const _hoisted_3$c = /* @__PURE__ */ createElementVNode("svg", {
   class: "mr-3 h-5 w-5",
   fill: "currentColor",
   viewBox: "0 0 20 20"
@@ -6769,7 +6769,7 @@ const _hoisted_3$b = /* @__PURE__ */ createElementVNode("svg", {
 ], -1);
 const _hoisted_4$9 = /* @__PURE__ */ createTextVNode(" Previous ");
 const _hoisted_5$8 = [
-  _hoisted_3$b,
+  _hoisted_3$c,
   _hoisted_4$9
 ];
 const _hoisted_6$8 = { class: "hidden md:flex" };
@@ -6798,44 +6798,41 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
   emits: ["update:modelValue"],
   setup(__props, { emit }) {
     const props = __props;
-    const pagination = ref(props.modelValue);
-    const updateModelValue2 = () => {
-      emit("update:modelValue", pagination.value);
-    };
     const changePage = (page) => {
-      pagination.value.page = page;
-      updateModelValue2();
+      emit("update:modelValue", __spreadProps(__spreadValues({}, props.modelValue), {
+        page
+      }));
     };
     const pageShortcuts = computed(() => {
       const shortcuts = [];
-      if (pagination.value.totalPages <= 4) {
-        for (let i = 0; i < pagination.value.totalPages; i++) {
+      if (props.modelValue.totalPages <= 4) {
+        for (let i = 0; i < props.modelValue.totalPages; i++) {
           shortcuts.push(i + 1);
         }
         return shortcuts;
       }
-      const pagesLeft = pagination.value.totalPages - pagination.value.page;
+      const pagesLeft = props.modelValue.totalPages - props.modelValue.page;
       if (pagesLeft >= 3) {
         for (let i = 0; i < 4; i++) {
-          shortcuts.push(pagination.value.page + i);
+          shortcuts.push(props.modelValue.page + i);
         }
         return shortcuts;
       }
       for (let i = 0; i < 4; i++) {
-        shortcuts.unshift(pagination.value.totalPages - i);
+        shortcuts.unshift(props.modelValue.totalPages - i);
       }
       return shortcuts;
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$l, [
+      return openBlock(), createElementBlock("div", _hoisted_1$k, [
         createElementVNode("div", _hoisted_2$f, [
           createElementVNode("a", {
             href: "#",
             class: normalizeClass([
               "-mt-px border-t-2 border-transparent pt-4 pr-1 inline-flex items-center text-sm leading-5 font-medium focus:outline-none focus:text-gray-700 focus:border-gray-400",
-              pagination.value.page == 1 ? "text-gray-500 cursor-not-allowed pointer-events-none" : "text-gray-700 hover:text-gray-900 hover:border-gray-300"
+              __props.modelValue.page == 1 ? "text-gray-500 cursor-not-allowed pointer-events-none" : "text-gray-700 hover:text-gray-900 hover:border-gray-300"
             ]),
-            onClick: _cache[0] || (_cache[0] = withModifiers(($event) => changePage(pagination.value.page - 1), ["prevent"]))
+            onClick: _cache[0] || (_cache[0] = withModifiers(($event) => changePage(__props.modelValue.page - 1), ["prevent"]))
           }, _hoisted_5$8, 2)
         ]),
         createElementVNode("div", _hoisted_6$8, [
@@ -6844,7 +6841,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
               href: "#",
               class: normalizeClass([
                 "-mt-px border-t-2 pt-4 px-4 inline-flex items-center text-sm leading-5 font-medium",
-                pagination.value.page === i ? "border-blue-500 text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-700" : "border-transparent text-gray-700 hover:text-gray-900 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-400"
+                __props.modelValue.page === i ? "border-blue-500 text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-700" : "border-transparent text-gray-700 hover:text-gray-900 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-400"
               ]),
               key: i,
               textContent: toDisplayString(i),
@@ -6857,16 +6854,16 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             href: "#",
             class: normalizeClass([
               "-mt-px border-t-2 border-transparent pt-4 pl-1 inline-flex items-center text-sm leading-5 font-medium focus:outline-none focus:text-gray-700 focus:border-gray-400",
-              pagination.value.page >= pagination.value.totalPages ? "text-gray-500 cursor-not-allowed pointer-events-none" : "text-gray-700 hover:text-gray-900 hover:border-gray-300"
+              __props.modelValue.page >= __props.modelValue.totalPages ? "text-gray-500 cursor-not-allowed pointer-events-none" : "text-gray-700 hover:text-gray-900 hover:border-gray-300"
             ]),
-            onClick: _cache[1] || (_cache[1] = withModifiers(($event) => changePage(pagination.value.page + 1), ["prevent"]))
+            onClick: _cache[1] || (_cache[1] = withModifiers(($event) => changePage(__props.modelValue.page + 1), ["prevent"]))
           }, _hoisted_11$5, 2)
         ])
       ]);
     };
   }
 });
-const _hoisted_1$k = {
+const _hoisted_1$j = {
   key: 0,
   class: "shadow overflow-hidden sm:rounded-md border"
 };
@@ -6932,7 +6929,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
           onSortDirChanged: _cache[0] || (_cache[0] = ($event) => sortDir.value = $event),
           onDateRangeChanged: _cache[1] || (_cache[1] = ($event) => dateRange.value = $event)
         }, null, 8, ["date-range", "sort-dir", "title"]),
-        hasContent.value ? (openBlock(), createElementBlock("div", _hoisted_1$k, [
+        hasContent.value ? (openBlock(), createElementBlock("div", _hoisted_1$j, [
           createElementVNode("ul", null, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(items.value, (item, idx) => {
               return openBlock(), createElementBlock("li", {
@@ -6956,7 +6953,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$j = ["href"];
+const _hoisted_1$i = ["href"];
 const _sfc_main$j = /* @__PURE__ */ defineComponent({
   props: {
     propsData: null,
@@ -6968,13 +6965,13 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
         href: __props.propsData[__props.attribute]
       }, [
         createVNode(unref(render$5), { class: "h-6 w-6 group-hover:text-gray-500 transition" })
-      ], 8, _hoisted_1$j);
+      ], 8, _hoisted_1$i);
     };
   }
 });
-const _hoisted_1$i = { class: "fixed inset-0 flex flex-col items-end justify-end px-4 py-6 pointer-events-none sm:p-6 z-40" };
+const _hoisted_1$h = { class: "fixed inset-0 flex flex-col items-end justify-end px-4 py-6 pointer-events-none sm:p-6 z-40" };
 const _hoisted_2$e = { class: "rounded-lg ring-1 ring-black ring-opacity-5 overflow-hidden" };
-const _hoisted_3$a = { class: "p-4" };
+const _hoisted_3$b = { class: "p-4" };
 const _hoisted_4$8 = { class: "flex items-center" };
 const _hoisted_5$7 = { class: "w-0 flex-1 flex justify-between" };
 const _hoisted_6$7 = ["innerHTML"];
@@ -7049,7 +7046,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$i, [
+      return openBlock(), createElementBlock("div", _hoisted_1$h, [
         createVNode(TransitionGroup, {
           tag: "div",
           class: "max-w-sm w-full",
@@ -7067,7 +7064,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                 class: normalizeClass(["bg-white shadow-lg rounded-lg pointer-events-auto border-t-4 transform", [{ "mt-2": idx > 0 }, getFlashClass(flash)]])
               }, [
                 createElementVNode("div", _hoisted_2$e, [
-                  createElementVNode("div", _hoisted_3$a, [
+                  createElementVNode("div", _hoisted_3$b, [
                     createElementVNode("div", _hoisted_4$8, [
                       createElementVNode("div", _hoisted_5$7, [
                         createElementVNode("p", {
@@ -7173,12 +7170,12 @@ function render(_ctx, _cache) {
     })
   ]);
 }
-const _hoisted_1$h = { class: "flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0" };
+const _hoisted_1$g = { class: "flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0" };
 const _hoisted_2$d = /* @__PURE__ */ createElementVNode("span", {
   class: "hidden sm:inline-block sm:align-middle sm:h-screen",
   "aria-hidden": "true"
 }, "\u200B", -1);
-const _hoisted_3$9 = { class: "inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl w-full" };
+const _hoisted_3$a = { class: "inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl w-full" };
 const _hoisted_4$7 = { class: "block absolute top-0 right-0 pt-4 pr-4" };
 const _hoisted_5$6 = /* @__PURE__ */ createElementVNode("span", { class: "sr-only" }, "Close", -1);
 const _hoisted_6$6 = { class: "bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4" };
@@ -7219,7 +7216,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             open: __props.modelValue
           }, {
             default: withCtx(() => [
-              createElementVNode("div", _hoisted_1$h, [
+              createElementVNode("div", _hoisted_1$g, [
                 createVNode(unref(TransitionChild), {
                   as: "template",
                   enter: "ease-out duration-300",
@@ -7245,7 +7242,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                   "leave-to": "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                 }, {
                   default: withCtx(() => [
-                    createElementVNode("div", _hoisted_3$9, [
+                    createElementVNode("div", _hoisted_3$a, [
                       createElementVNode("div", _hoisted_4$7, [
                         createElementVNode("button", {
                           type: "button",
@@ -7301,7 +7298,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$g = {
+const _hoisted_1$f = {
   key: 0,
   class: "fixed top-0 left-0 flex items-center justify-center w-full h-full cursor-not-allowed z-50 bg-gray-50 bg-opacity-50"
 };
@@ -7425,7 +7422,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       });
     });
     return (_ctx, _cache) => {
-      return loading.value ? (openBlock(), createElementBlock("div", _hoisted_1$g, [
+      return loading.value ? (openBlock(), createElementBlock("div", _hoisted_1$f, [
         createElementVNode("div", null, [
           _hoisted_2$c,
           withDirectives(createElementVNode("div", null, [
@@ -7455,9 +7452,9 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$f = { class: "h-screen flex overflow-hidden bg-gray-100" };
+const _hoisted_1$e = { class: "h-screen flex overflow-hidden bg-gray-100" };
 const _hoisted_2$b = { class: "relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-white" };
-const _hoisted_3$8 = { class: "absolute top-0 right-0 -mr-12 pt-2" };
+const _hoisted_3$9 = { class: "absolute top-0 right-0 -mr-12 pt-2" };
 const _hoisted_4$6 = /* @__PURE__ */ createElementVNode("span", { class: "sr-only" }, "Close sidebar", -1);
 const _hoisted_5$5 = { class: "flex-shrink-0 flex justify-center px-4" };
 const _hoisted_6$5 = ["src"];
@@ -7502,7 +7499,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createElementVNode("div", _hoisted_1$f, [
+        createElementVNode("div", _hoisted_1$e, [
           createVNode(unref(TransitionRoot), {
             as: "template",
             show: sidebarOpen.value
@@ -7551,7 +7548,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                           "leave-to": "opacity-0"
                         }, {
                           default: withCtx(() => [
-                            createElementVNode("div", _hoisted_3$8, [
+                            createElementVNode("div", _hoisted_3$9, [
                               createElementVNode("button", {
                                 class: "ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white",
                                 onClick: _cache[0] || (_cache[0] = ($event) => sidebarOpen.value = false)
@@ -7733,45 +7730,83 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$e = { class: "flex" };
+function throttle(func, timeout = 100) {
+  let inThrottle;
+  return (...args) => {
+    if (!inThrottle) {
+      func.apply(args);
+      inThrottle = true;
+      setTimeout(() => inThrottle = false, timeout);
+    }
+  };
+}
 const _sfc_main$e = /* @__PURE__ */ defineComponent({
   props: {
-    position: { default: "top-center" }
+    as: { default: "div" },
+    position: { default: "auto" }
   },
   setup(__props) {
     const props = __props;
-    const positionClasses = computed(() => {
+    const getViewportDimensions = () => {
+      return {
+        vw: document.documentElement.clientWidth,
+        vh: document.documentElement.clientHeight
+      };
+    };
+    const trigger = ref();
+    const wrapper = ref();
+    const viewport = ref(getViewportDimensions());
+    const classes = computed(() => {
+      const classes2 = {
+        wrapper: "",
+        content: ""
+      };
+      if (props.position === "none") {
+        return classes2;
+      }
+      classes2.wrapper = "h-0 flex w-screen";
+      classes2.content = "absolute";
+      if (props.position !== "auto") {
+        classes2.wrapper += ` ${staticPosition.value.wrapper}`;
+        classes2.content += ` ${staticPosition.value.content}`;
+      }
+      return classes2;
+    });
+    const staticPosition = computed(() => {
       let wrapperClasses = "";
       let contentClasses = "";
       switch (props.position) {
         case "top-left":
-          wrapperClasses = "top-0 left-0 -translate-y-full -translate-x-full justify-end";
+          wrapperClasses = "top-0 right-0 -translate-y-full justify-end";
+          contentClasses = "bottom-full";
           break;
         case "top-center":
           wrapperClasses = "top-0 -translate-y-full -translate-x-full left-1/2 justify-end";
-          contentClasses = "translate-x-1/2";
+          contentClasses = "bottom-full translate-x-1/2";
           break;
         case "top-right":
-          wrapperClasses = "top-0 -translate-y-full right-0 justify-end";
-          contentClasses = "translate-x-full";
+          wrapperClasses = "top-0 -translate-y-full left-0 -translate-x-full justify-end";
+          contentClasses = "bottom-full translate-x-full";
           break;
         case "bottom-left":
-          wrapperClasses = "top-full left-0 -translate-x-full justify-end";
+          wrapperClasses = "top-full right-0 justify-end";
+          contentClasses = "top-full";
           break;
         case "bottom-center":
           wrapperClasses = "top-full -translate-x-full left-1/2 justify-end";
-          contentClasses = "translate-x-1/2";
+          contentClasses = "top-full translate-x-1/2";
           break;
         case "bottom-right":
-          wrapperClasses = "top-full right-0 justify-end";
-          contentClasses = "translate-x-full";
+          wrapperClasses = "top-full left-0 -translate-x-full justify-end";
+          contentClasses = "top-full translate-x-full";
           break;
         case "left":
           wrapperClasses = "top-1/2 left-0 -translate-y-1/2 -translate-x-full justify-end";
+          contentClasses = "-translate-y-1/2";
           break;
         case "right":
           wrapperClasses = "top-1/2 -translate-y-1/2 right-0 justify-end";
-          contentClasses = "translate-x-full";
+          contentClasses = "translate-x-full -translate-y-1/2";
           break;
       }
       return {
@@ -7779,52 +7814,118 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
         content: contentClasses
       };
     });
+    const autoPosition = computed(() => {
+      var _a, _b;
+      if (!((_a = wrapper == null ? void 0 : wrapper.value) == null ? void 0 : _a.el) || !((_b = trigger == null ? void 0 : trigger.value) == null ? void 0 : _b.el)) {
+        return {};
+      }
+      const { vw, vh } = viewport.value;
+      const offset = 10;
+      const anchorRect = trigger.value.el.getBoundingClientRect();
+      const contentRect = wrapper.value.el.firstChild.getBoundingClientRect();
+      const distToBottom = vh - anchorRect.bottom;
+      const positionAbove = anchorRect.top > distToBottom;
+      const distToRight = vw - anchorRect.left;
+      const flowLeft = anchorRect.left > distToRight;
+      let xPos = 0;
+      if (flowLeft) {
+        if (contentRect.width > anchorRect.right) {
+          xPos = anchorRect.right - contentRect.width + (contentRect.width - anchorRect.right);
+        } else {
+          xPos = anchorRect.right - contentRect.width;
+        }
+        if (vw > contentRect.width + offset) {
+          xPos = xPos + offset;
+        }
+      } else {
+        if (contentRect.width > distToRight) {
+          xPos = anchorRect.left - (contentRect.width - distToRight);
+        } else {
+          xPos = anchorRect.left;
+        }
+        if (vw > contentRect.width + offset) {
+          xPos = xPos - offset;
+        }
+      }
+      return {
+        wrapper: {
+          top: positionAbove ? "auto" : `100%`,
+          bottom: positionAbove ? "100%" : `auto`,
+          transform: `translate(${anchorRect.left * -1}px, 0)`,
+          width: `${vw}px`
+        },
+        content: {
+          top: positionAbove ? "auto" : `100%`,
+          bottom: positionAbove ? "100%" : `auto`,
+          transform: `translate(${xPos}px, 0)`
+        }
+      };
+    });
+    if (props.position === "auto") {
+      const throttledSetPositions = throttle(() => {
+        viewport.value = getViewportDimensions();
+      });
+      onMounted(() => {
+        window.addEventListener("resize", throttledSetPositions);
+        window.addEventListener("scroll", throttledSetPositions);
+      });
+      onUnmounted(() => {
+        window.removeEventListener("resize", throttledSetPositions);
+        window.removeEventListener("scroll", throttledSetPositions);
+      });
+    }
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$e, [
-        createVNode(unref(Popover), { class: "relative leading-none" }, {
-          default: withCtx(({ open, close: close2 }) => [
-            createVNode(unref(PopoverButton), null, {
-              default: withCtx(() => [
-                renderSlot(_ctx.$slots, "button", {
-                  open,
-                  close: close2
-                })
-              ]),
-              _: 2
-            }, 1024),
-            createVNode(Transition, {
-              "enter-active-class": "transition-opacity transition-faster ease-out-quad",
-              "leave-active-class": "transition-opacity transition-faster ease-in-quad",
-              "enter-from-class": "opacity-0",
-              "enter-to-class": "opacity-100",
-              "leave-from-class": "opacity-100",
-              "leave-to-class": "opacity-0"
-            }, {
-              default: withCtx(() => [
-                createVNode(unref(PopoverPanel), null, {
-                  default: withCtx(() => [
-                    createElementVNode("div", {
-                      class: normalizeClass(["absolute z-10 transform w-screen flex", unref(positionClasses).wrapper])
-                    }, [
-                      createElementVNode("div", {
-                        class: normalizeClass(unref(positionClasses).content)
-                      }, [
-                        renderSlot(_ctx.$slots, "default", {
-                          open,
-                          close: close2
-                        })
-                      ], 2)
-                    ], 2)
-                  ]),
-                  _: 2
-                }, 1024)
-              ]),
-              _: 2
-            }, 1024)
-          ]),
-          _: 3
-        })
-      ]);
+      return openBlock(), createBlock(unref(Popover), {
+        class: "relative",
+        as: __props.as
+      }, {
+        default: withCtx(({ open, close: close2 }) => [
+          createVNode(unref(PopoverButton), {
+            ref_key: "trigger",
+            ref: trigger
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "button", {
+                open,
+                close: close2
+              })
+            ]),
+            _: 2
+          }, 1536),
+          createVNode(Transition, {
+            "enter-active-class": "transition-opacity transition-faster ease-out-quad",
+            "leave-active-class": "transition-opacity transition-fastest ease-in-quad",
+            "enter-from-class": "opacity-0",
+            "enter-to-class": "opacity-100",
+            "leave-from-class": "opacity-100",
+            "leave-to-class": "opacity-0"
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(PopoverPanel), {
+                ref_key: "wrapper",
+                ref: wrapper,
+                class: normalizeClass(["absolute z-10", unref(classes).wrapper]),
+                style: normalizeStyle(__props.position === "auto" ? unref(autoPosition).wrapper : {})
+              }, {
+                default: withCtx(() => [
+                  createElementVNode("div", {
+                    class: normalizeClass(unref(classes).content),
+                    style: normalizeStyle(__props.position === "auto" ? unref(autoPosition).content : {})
+                  }, [
+                    renderSlot(_ctx.$slots, "default", {
+                      open,
+                      close: close2
+                    })
+                  ], 6)
+                ]),
+                _: 2
+              }, 1032, ["class", "style"])
+            ]),
+            _: 2
+          }, 1024)
+        ]),
+        _: 3
+      }, 8, ["as"]);
     };
   }
 });
@@ -7836,7 +7937,7 @@ var _export_sfc = (sfc, props) => {
   return target;
 };
 const _sfc_main$d = {};
-const _hoisted_1$d = { class: "max-w-xs bg-white rounded-md p-2 border border-gray-100 shadow-md" };
+const _hoisted_1$d = { class: "w-full max-w-xs bg-white rounded-md p-2 border border-gray-100 shadow-md" };
 function _sfc_render(_ctx, _cache) {
   return openBlock(), createElementBlock("div", _hoisted_1$d, [
     renderSlot(_ctx.$slots, "default")
@@ -7845,7 +7946,7 @@ function _sfc_render(_ctx, _cache) {
 var PopoverContent = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render]]);
 const _hoisted_1$c = { class: "absolute inset-0 overflow-hidden" };
 const _hoisted_2$a = { class: "fixed inset-y-0 right-0 pl-10 max-w-full flex" };
-const _hoisted_3$7 = { class: "w-screen max-w-md" };
+const _hoisted_3$8 = { class: "w-screen max-w-md" };
 const _hoisted_4$5 = { class: "h-full flex flex-col bg-white shadow-xl overflow-y-scroll" };
 const _hoisted_5$4 = { class: "py-6 px-4 bg-blue-700 sm:px-6" };
 const _hoisted_6$4 = { class: "flex items-center justify-between" };
@@ -7896,7 +7997,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
                     "leave-to": "translate-x-full"
                   }, {
                     default: withCtx(() => [
-                      createElementVNode("div", _hoisted_3$7, [
+                      createElementVNode("div", _hoisted_3$8, [
                         createElementVNode("div", _hoisted_4$5, [
                           createElementVNode("div", _hoisted_5$4, [
                             createElementVNode("div", _hoisted_6$4, [
@@ -7945,31 +8046,33 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$b = { class: "relative" };
-const _hoisted_2$9 = /* @__PURE__ */ createElementVNode("div", { class: "p-4 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" }, null, -1);
+const _hoisted_1$b = { class: "leading-none w-4 h-4" };
+const _hoisted_2$9 = /* @__PURE__ */ createElementVNode("div", { class: "p-5 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" }, null, -1);
+const _hoisted_3$7 = { class: "w-full max-w-xs bg-white rounded-md px-3 py-2 border border-gray-100 drop-shadow-md text-xs text-gray-900 leading-snug font-medium" };
 const _sfc_main$b = /* @__PURE__ */ defineComponent({
   props: {
-    position: { default: "top-center" }
+    as: { default: "span" },
+    position: { default: "auto" }
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$e, { position: __props.position }, {
+      return openBlock(), createBlock(_sfc_main$e, {
+        position: __props.position,
+        as: __props.as
+      }, {
         button: withCtx(() => [
           createElementVNode("div", _hoisted_1$b, [
-            _hoisted_2$9,
-            createVNode(unref(render$4), { class: "w-4 h-4" })
+            createVNode(unref(render$4)),
+            _hoisted_2$9
           ])
         ]),
         default: withCtx(() => [
-          createVNode(PopoverContent, { class: "text-xs leading-tight font-medium" }, {
-            default: withCtx(() => [
-              renderSlot(_ctx.$slots, "default")
-            ]),
-            _: 3
-          })
+          createElementVNode("div", _hoisted_3$7, [
+            renderSlot(_ctx.$slots, "default")
+          ])
         ]),
         _: 3
-      }, 8, ["position"]);
+      }, 8, ["position", "as"]);
     };
   }
 });