@xy-planning-network/trees 0.4.0 → 0.4.3

package/src/lib-components/navigation/Paginator.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Pagination } from "@/composables/nav"
-import { computed, ref } from "vue"
+import { computed } from "vue"
 
 const props = defineProps<{
   modelValue: Pagination
@@ -10,23 +10,19 @@ const emit = defineEmits<{
   (e: "update:modelValue", pagination: Pagination): void
 }>()
 
-const pagination = ref<Pagination>(props.modelValue)
-
-const updateModelValue = () => {
-  emit("update:modelValue", pagination.value)
-}
-
 const changePage = (page: number): void => {
-  pagination.value.page = page
-  updateModelValue()
+  emit("update:modelValue", {
+    ...props.modelValue,
+    page: page,
+  })
 }
 
 const pageShortcuts = computed((): number[] => {
   const shortcuts: number[] = []
 
   // If total pages is less than or equal to 4, just return 1, 2, 3, 4
-  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
@@ -34,10 +30,10 @@ const pageShortcuts = computed((): number[] => {
 
   // If there are more than 3 pages left, show these
   // e.g. [4, 5, 6, 7] when there are 8 total pages and the current page is 4
-  const pagesLeft: number = pagination.value.totalPages - pagination.value.page
+  const pagesLeft: number = 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
   }
@@ -45,7 +41,7 @@ const pageShortcuts = computed((): number[] => {
   // If there are less than 3 pages left, count backwards from the last page
   // e.g. [5, 6, 7, 8] when on page 5, 6, 7, and 8 and there are 8 total pages
   for (let i = 0; i < 4; i++) {
-    shortcuts.unshift(pagination.value.totalPages - i)
+    shortcuts.unshift(props.modelValue.totalPages - i)
   }
   return shortcuts
 })
@@ -56,9 +52,9 @@ const pageShortcuts = computed((): number[] => {
       <a
         href="#"
         class="-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"
-        @click.prevent="changePage(pagination.page - 1)"
+        @click.prevent="changePage(modelValue.page - 1)"
         :class="
-          pagination.page == 1
+          modelValue.page == 1
             ? 'text-gray-500 cursor-not-allowed pointer-events-none'
             : 'text-gray-700 hover:text-gray-900 hover:border-gray-300'
         "
@@ -82,7 +78,7 @@ const pageShortcuts = computed((): number[] => {
         :key="i"
         v-text="i"
         :class="
-          pagination.page === i
+          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'
         "
@@ -94,9 +90,9 @@ const pageShortcuts = computed((): number[] => {
       <a
         href="#"
         class="-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"
-        @click.prevent="changePage(pagination.page + 1)"
+        @click.prevent="changePage(modelValue.page + 1)"
         :class="
-          pagination.page >= pagination.totalPages
+          modelValue.page >= modelValue.totalPages
             ? 'text-gray-500 cursor-not-allowed pointer-events-none'
             : 'text-gray-700 hover:text-gray-900 hover:border-gray-300'
         "

package/src/lib-components/overlays/Popover/Popover.vue

@@ -0,0 +1,229 @@
+<script lang="ts">
+export type PopoverPosition =
+  | "top-left"
+  | "top-center"
+  | "top-right"
+  | "bottom-left"
+  | "bottom-center"
+  | "bottom-right"
+  | "left"
+  | "right"
+  | "auto"
+  | "none"
+</script>
+<script lang="ts" setup>
+import { throttle } from "@/helpers/Throttle"
+import {
+  Popover as HeadlessPopover,
+  PopoverButton as HeadlessPopoverButton,
+  PopoverPanel as HeadlessPopoverPanel,
+} from "@headlessui/vue"
+import { computed, onMounted, onUnmounted, ref } from "vue"
+
+const props = withDefaults(
+  defineProps<{
+    as?: string
+    position?: PopoverPosition
+  }>(),
+  {
+    as: "div",
+    position: "auto",
+  }
+)
+
+const getViewportDimensions = () => {
+  return {
+    vw: document.documentElement.clientWidth,
+    vh: document.documentElement.clientHeight,
+  }
+}
+
+const trigger = ref<typeof HeadlessPopoverButton>()
+const wrapper = ref<typeof HeadlessPopoverPanel>()
+const viewport = ref<{ vw: number; vh: number }>(getViewportDimensions())
+
+const classes = computed(() => {
+  const classes = {
+    wrapper: "",
+    content: "",
+  }
+
+  if (props.position === "none") {
+    return classes
+  }
+
+  // defaults classes when positioning
+  classes.wrapper = "h-0 flex w-screen"
+  classes.content = "absolute"
+
+  // merge static positioning classes
+  if (props.position !== "auto") {
+    classes.wrapper += ` ${staticPosition.value.wrapper}`
+    classes.content += ` ${staticPosition.value.content}`
+  }
+
+  return classes
+})
+
+const staticPosition = computed(() => {
+  let wrapperClasses = ""
+  let contentClasses = ""
+
+  switch (props.position) {
+    case "top-left":
+      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 = "bottom-full translate-x-1/2"
+      break
+    case "top-right":
+      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 right-0 justify-end"
+      contentClasses = "top-full"
+      break
+    case "bottom-center":
+      wrapperClasses = "top-full -translate-x-full left-1/2 justify-end"
+      contentClasses = "top-full translate-x-1/2"
+      break
+    case "bottom-right":
+      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 -translate-y-1/2"
+      break
+  }
+
+  return {
+    wrapper: wrapperClasses,
+    content: contentClasses,
+  }
+})
+
+const autoPosition = computed(() => {
+  if (!wrapper?.value?.el || !trigger?.value?.el) {
+    return {}
+  }
+
+  const { vw, vh } = viewport.value
+
+  // avoid bumping up against the edge of the browser when possible
+  const offset = 10
+
+  // base the anchor rectangle off of the entire trigger dom element to move around it
+  const anchorRect: DOMRect = trigger.value.el.getBoundingClientRect()
+  // the content rectangle is best calculated by our first child (content) element inside the wrapper
+  const contentRect: DOMRect =
+    wrapper.value.el.firstChild.getBoundingClientRect()
+  const distToBottom = vh - anchorRect.bottom
+  // NOTE: edge case - there may be more space below in the viewport
+  // but less document space for display
+  // the inverse could also be true - but will be very rare
+  // occurring with unreasonably large popover content
+  const positionAbove = anchorRect.top > distToBottom
+  const distToRight = vw - anchorRect.left
+  const flowLeft = anchorRect.left > distToRight
+
+  // translate the content container on the x axis to the correct position
+  // considering the flow the content should take
+  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)`, // pin to left of window
+      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)
+  })
+}
+</script>
+
+<template>
+  <HeadlessPopover v-slot="{ open, close }" class="relative flex" :as="as">
+    <HeadlessPopoverButton ref="trigger">
+      <slot name="button" :open="open" :close="close"></slot>
+    </HeadlessPopoverButton>
+
+    <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"
+    >
+      <HeadlessPopoverPanel
+        ref="wrapper"
+        class="absolute z-10"
+        :class="classes.wrapper"
+        :style="position === 'auto' ? autoPosition.wrapper : {}"
+      >
+        <div
+          :class="classes.content"
+          :style="position === 'auto' ? autoPosition.content : {}"
+        >
+          <slot :open="open" :close="close"></slot>
+        </div>
+      </HeadlessPopoverPanel>
+    </transition>
+  </HeadlessPopover>
+</template>

package/src/lib-components/overlays/Popover/PopoverContent.vue

@@ -0,0 +1,8 @@
+<template>
+  <!--styling wrapper - top level element will merge attrs for class overrides -->
+  <div
+    class="w-full max-w-xs bg-white rounded-md p-2 border border-gray-100 shadow-md"
+  >
+    <slot></slot>
+  </div>
+</template>

package/src/lib-components/overlays/Tooltip.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import Popover, { PopoverPosition } from "./Popover/Popover.vue"
+import { InformationCircleIcon } from "@heroicons/vue/outline"
+
+withDefaults(
+  defineProps<{
+    as?: string
+    position?: PopoverPosition
+  }>(),
+  {
+    as: "span",
+    position: "auto",
+  }
+)
+</script>
+
+<template>
+  <Popover :position="position" :as="as">
+    <template #button>
+      <div class="leading-none w-4 h-4">
+        <InformationCircleIcon />
+        <!--creates a larger clickable surface area 40 x 40-->
+        <div
+          class="p-5 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+        ></div>
+      </div>
+    </template>
+    <div
+      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"
+    >
+      <slot></slot>
+    </div>
+  </Popover>
+</template>

package/types/helpers/Debounce.d.ts

@@ -0,0 +1 @@
+export declare function debounce(func: () => void, timeout?: number): () => void;

package/types/helpers/Slots.d.ts

@@ -0,0 +1,2 @@
+import { Slot } from "vue";
+export declare function hasSlotContent(slot: Slot | undefined, slotProps?: {}): boolean;

package/types/helpers/Throttle.d.ts

@@ -0,0 +1 @@
+export declare function throttle(func: () => void, timeout?: number): (...args: any[]) => void;

package/types/lib-components/forms/Checkbox.vue.d.ts

@@ -4,19 +4,27 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: string;
     };
+    help: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
     modelValue: {
         type: import("vue").PropType<boolean>;
         required: true;
     };
 }, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     label?: unknown;
+    help?: unknown;
     modelValue?: unknown;
 } & {
     modelValue: boolean;
     label: string;
+    help: string;
 } & {}> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     label: string;
+    help: string;
 }>;
 export default _default;

package/types/lib-components/forms/FieldsetLegend.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, () => void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{} & {} & {}>, {}>;
+export default _default;

package/types/lib-components/forms/InputLabel.vue.d.ts

@@ -1,4 +1,9 @@
 declare const _default: import("vue").DefineComponent<{
+    disabled: {
+        type: import("vue").PropType<boolean>;
+    } & {
+        default: boolean;
+    };
     label: {
         type: import("vue").PropType<string>;
     } & {
@@ -10,12 +15,15 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    disabled?: unknown;
     label?: unknown;
     tag?: unknown;
 } & {
+    disabled: boolean;
     label: string;
     tag: string;
 } & {}>, {
+    disabled: boolean;
     label: string;
     tag: string;
 }>;

package/types/lib-components/forms/MultiCheckboxes.vue.d.ts

@@ -1,34 +1,59 @@
+declare type CheckboxValue = string | number;
+declare type ModelValue = CheckboxValue[];
 declare const _default: import("vue").DefineComponent<{
     options: {
         type: import("vue").PropType<{
+            disabled?: boolean | undefined;
+            help?: string | undefined;
             label: string;
-            value: string;
+            value: CheckboxValue;
         }[]>;
         required: true;
     };
+    help: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
     legend: {
         type: import("vue").PropType<string>;
     } & {
         default: string;
     };
     modelValue: {
-        type: import("vue").PropType<string[]>;
+        type: import("vue").PropType<ModelValue>;
         required: true;
     };
-}, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    columns: {
+        type: import("vue").PropType<2 | 4 | 3>;
+    } & {
+        default: undefined;
+    };
+}, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (modelValue: ModelValue) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     options?: unknown;
+    help?: unknown;
     legend?: unknown;
     modelValue?: unknown;
+    columns?: unknown;
 } & {
-    modelValue: string[];
+    modelValue: ModelValue;
+    help: string;
     options: {
+        disabled?: boolean | undefined;
+        help?: string | undefined;
         label: string;
-        value: string;
+        value: CheckboxValue;
     }[];
     legend: string;
-} & {}> & {
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+} & {
+    columns?: 2 | 4 | 3 | undefined;
+}> & {
+    "onUpdate:modelValue"?: ((modelValue: ModelValue) => any) | undefined;
 }, {
+    help: string;
     legend: string;
+    columns: 2 | 4 | 3;
 }>;
 export default _default;

package/types/lib-components/forms/Radio.vue.d.ts

@@ -1,44 +1,57 @@
 declare const _default: import("vue").DefineComponent<{
     options: {
         type: import("vue").PropType<{
+            disabled?: boolean | undefined;
+            help?: string | undefined;
             label: string;
-            value: string;
+            value: string | number;
         }[]>;
         required: true;
     };
-    legend: {
+    help: {
         type: import("vue").PropType<string>;
     } & {
         default: string;
     };
-    modelValue: {
+    legend: {
         type: import("vue").PropType<string>;
     } & {
         default: string;
     };
-    vertical: {
-        type: import("vue").PropType<boolean>;
+    modelValue: {
+        type: import("vue").PropType<string | number>;
     } & {
-        default: boolean;
+        default: undefined;
+    };
+    columns: {
+        type: import("vue").PropType<2 | 4 | 3>;
+    } & {
+        default: undefined;
     };
 }, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     options?: unknown;
+    help?: unknown;
     legend?: unknown;
     modelValue?: unknown;
-    vertical?: unknown;
+    columns?: unknown;
 } & {
-    modelValue: string;
+    help: string;
     options: {
+        disabled?: boolean | undefined;
+        help?: string | undefined;
         label: string;
-        value: string;
+        value: string | number;
     }[];
     legend: string;
-    vertical: boolean;
-} & {}> & {
+} & {
+    modelValue?: string | number | undefined;
+    columns?: 2 | 4 | 3 | undefined;
+}> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    modelValue: string;
+    modelValue: string | number;
+    help: string;
     legend: string;
-    vertical: boolean;
+    columns: 2 | 4 | 3;
 }>;
 export default _default;

package/types/lib-components/forms/YesOrNoRadio.vue.d.ts

@@ -4,6 +4,11 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: undefined;
     };
+    help: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
     legend: {
         type: import("vue").PropType<string>;
     } & {
@@ -16,9 +21,11 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     modelValue?: unknown;
+    help?: unknown;
     legend?: unknown;
     name?: unknown;
 } & {
+    help: string;
     legend: string;
     name: string;
 } & {
@@ -27,6 +34,7 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: boolean;
+    help: string;
     legend: string;
     name: string;
 }>;

package/types/lib-components/index.d.ts

@@ -7,7 +7,11 @@ import { default as DownloadCell } from "./lists/DownloadCell.vue";
 import { default as Flash } from "./overlays/Flash.vue";
 import { default as Modal } from "./overlays/Modal.vue";
 import { default as SidebarLayout } from "./layout/SidebarLayout.vue";
+import { default as Popover } from "./overlays/Popover/Popover.vue";
+import { default as PopoverPosition } from "./overlays/Popover/Popover.vue";
+import { default as PopoverContent } from "./overlays/Popover/PopoverContent.vue";
 import { default as Slideover } from "./overlays/Slideover.vue";
+import { default as Tooltip } from "./overlays/Tooltip.vue";
 import { default as StackedLayout } from "./layout/StackedLayout.vue";
 import { default as Paginator } from "./navigation/Paginator.vue";
 import { default as Spinner } from "./overlays/Spinner.vue";
@@ -21,12 +25,14 @@ import { default as Checkbox } from "./forms/Checkbox.vue";
 import { default as DateRangePicker } from "./forms/DateRangePicker.vue";
 import { default as InputHelp } from "./forms/InputHelp.vue";
 import { default as InputLabel } from "./forms/InputLabel.vue";
+import { default as FieldsetLegend } from "./forms/FieldsetLegend.vue";
 import { default as MultiCheckboxes } from "./forms/MultiCheckboxes.vue";
 import { default as Radio } from "./forms/Radio.vue";
 import { default as Select } from "./forms/Select.vue";
 import { default as TextArea } from "./forms/TextArea.vue";
 import { default as YesOrNoRadio } from "./forms/YesOrNoRadio.vue";
-export { ActionsDropdown, Cards, ContentModal, DateFilter, DetailList, DownloadCell, Flash, Modal, SidebarLayout, Slideover, StackedLayout, Paginator, Spinner, StaticTable, Steps, Table, Tabs, Toggle, BaseInput, Checkbox, DateRangePicker, InputHelp, InputLabel, MultiCheckboxes, Radio, Select, TextArea, YesOrNoRadio, };
+export { ActionsDropdown, Cards, ContentModal, DateFilter, DetailList, DownloadCell, Flash, Modal, SidebarLayout, Slideover, StackedLayout, Popover, PopoverContent, PopoverPosition, // Type export
+Paginator, Spinner, StaticTable, Steps, Table, Tabs, Toggle, Tooltip, BaseInput, Checkbox, DateRangePicker, InputHelp, InputLabel, FieldsetLegend, MultiCheckboxes, Radio, Select, TextArea, YesOrNoRadio, };
 /**
  * declare global component types for App.use(Trees)
  */
@@ -41,6 +47,8 @@ export interface TreesComponents {
     Modal: typeof Modal;
     SidebarLayout: typeof SidebarLayout;
     Slideover: typeof Slideover;
+    Popover: typeof Popover;
+    PopoverContent: typeof PopoverContent;
     StackedLayout: typeof StackedLayout;
     Paginator: typeof Paginator;
     Spinner: typeof Spinner;
@@ -49,11 +57,13 @@ export interface TreesComponents {
     Table: typeof Table;
     Tabs: typeof Tabs;
     Toggle: typeof Toggle;
+    Tooltip: typeof Tooltip;
     BaseInput: typeof BaseInput;
     Checkbox: typeof Checkbox;
     DateRangePicker: typeof DateRangePicker;
     InputHelp: typeof InputHelp;
     InputLabel: typeof InputLabel;
+    FieldsetLegend: typeof FieldsetLegend;
     MultiCheckboxes: typeof MultiCheckboxes;
     Radio: typeof Radio;
     Select: typeof Select;

package/types/lib-components/overlays/Popover/Popover.vue.d.ts

@@ -0,0 +1,23 @@
+export declare type PopoverPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | "left" | "right" | "auto" | "none";
+declare const _default: import("vue").DefineComponent<{
+    as: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
+    position: {
+        type: import("vue").PropType<PopoverPosition>;
+    } & {
+        default: string;
+    };
+}, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    as?: unknown;
+    position?: unknown;
+} & {
+    as: string;
+    position: PopoverPosition;
+} & {}>, {
+    as: string;
+    position: PopoverPosition;
+}>;
+export default _default;