@xy-planning-network/trees 0.4.0 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xy-planning-network/trees",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "",
   "license": "MIT",
   "repository": "github:xy-planning-network/trees",

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

@@ -0,0 +1,109 @@
+<script lang="ts">
+export type PopoverPosition =
+  | "top-left"
+  | "top-center"
+  | "top-right"
+  | "bottom-left"
+  | "bottom-center"
+  | "bottom-right"
+  | "left"
+  | "right"
+</script>
+<script lang="ts" setup>
+import {
+  Popover as HeadlessPopover,
+  PopoverButton as HeadlessPopoverButton,
+  PopoverPanel as HeadlessPopoverPanel,
+} from "@headlessui/vue"
+import { computed } from "vue"
+
+const props = withDefaults(
+  defineProps<{
+    position?: PopoverPosition
+  }>(),
+  {
+    position: "top-center",
+  }
+)
+
+const positionClasses = computed(() => {
+  // NOTE: by always pushing the screen width wrapper classes to the left we can avoid overflow scrolling
+
+  let wrapperClasses = ""
+  let contentClasses = ""
+
+  switch (props.position) {
+    case "top-left":
+      wrapperClasses =
+        "top-0 left-0 -translate-y-full -translate-x-full justify-end"
+      break
+    case "top-center":
+      wrapperClasses =
+        "top-0 -translate-y-full -translate-x-full left-1/2 justify-end"
+      contentClasses = "translate-x-1/2"
+      break
+    case "top-right":
+      wrapperClasses = "top-0 -translate-y-full right-0 justify-end"
+      contentClasses = "translate-x-full"
+      break
+    case "bottom-left":
+      wrapperClasses = "top-full left-0 -translate-x-full justify-end"
+      break
+    case "bottom-center":
+      wrapperClasses = "top-full -translate-x-full left-1/2 justify-end"
+      contentClasses = "translate-x-1/2"
+      break
+    case "bottom-right":
+      wrapperClasses = "top-full right-0 justify-end"
+      contentClasses = "translate-x-full"
+      break
+    case "left":
+      wrapperClasses =
+        "top-1/2 left-0 -translate-y-1/2 -translate-x-full justify-end"
+      break
+    case "right":
+      wrapperClasses = "top-1/2 -translate-y-1/2 right-0 justify-end"
+      contentClasses = "translate-x-full"
+      break
+  }
+
+  return {
+    wrapper: wrapperClasses,
+    content: contentClasses,
+  }
+})
+
+// TODO: maybe auto positioning - dynamic based on button location and closed overflow hidden container?
+</script>
+
+<template>
+  <div class="flex">
+    <HeadlessPopover v-slot="{ open, close }" class="relative leading-none">
+      <HeadlessPopoverButton>
+        <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-faster ease-in-quad"
+        enter-from-class="opacity-0"
+        enter-to-class="opacity-100"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0"
+      >
+        <!--NOTE: use prop "static" for dev work to keep the tooptip visible-->
+        <HeadlessPopoverPanel>
+          <!--positioning wrappers-->
+          <div
+            class="absolute z-10 transform w-screen flex"
+            :class="positionClasses.wrapper"
+          >
+            <div :class="positionClasses.content">
+              <slot :open="open" :close="close"></slot>
+            </div>
+          </div>
+        </HeadlessPopoverPanel>
+      </transition>
+    </HeadlessPopover>
+  </div>
+</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="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,31 @@
+<script lang="ts" setup>
+import Popover, { PopoverPosition } from "./Popover/Popover.vue"
+import { InformationCircleIcon } from "@heroicons/vue/outline"
+import PopoverContent from "./Popover/PopoverContent.vue"
+
+withDefaults(
+  defineProps<{
+    position: PopoverPosition
+  }>(),
+  {
+    position: "top-center",
+  }
+)
+</script>
+
+<template>
+  <Popover :position="position">
+    <template #button>
+      <div class="relative">
+        <!--creates a larger clickable surface area-->
+        <div
+          class="p-4 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+        ></div>
+        <InformationCircleIcon class="w-4 h-4" />
+      </div>
+    </template>
+    <PopoverContent class="text-xs leading-tight font-medium">
+      <slot></slot>
+    </PopoverContent>
+  </Popover>
+</template>

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";
@@ -26,7 +30,8 @@ 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, MultiCheckboxes, Radio, Select, TextArea, YesOrNoRadio, };
 /**
  * declare global component types for App.use(Trees)
  */
@@ -41,6 +46,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,6 +56,7 @@ export interface TreesComponents {
     Table: typeof Table;
     Tabs: typeof Tabs;
     Toggle: typeof Toggle;
+    Tooltip: typeof Tooltip;
     BaseInput: typeof BaseInput;
     Checkbox: typeof Checkbox;
     DateRangePicker: typeof DateRangePicker;

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

@@ -0,0 +1,15 @@
+export declare type PopoverPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | "left" | "right";
+declare const _default: import("vue").DefineComponent<{
+    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<{
+    position?: unknown;
+} & {
+    position: PopoverPosition;
+} & {}>, {
+    position: PopoverPosition;
+}>;
+export default _default;

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

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

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

@@ -0,0 +1,16 @@
+import { PopoverPosition } from "./Popover/Popover.vue";
+declare const _default: import("vue").DefineComponent<{
+    position: {
+        type: import("vue").PropType<PopoverPosition>;
+        required: true;
+    } & {
+        default: string;
+    };
+}, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    position?: unknown;
+} & {
+    position: PopoverPosition;
+} & {}>, {
+    position: PopoverPosition;
+}>;
+export default _default;