@xy-planning-network/trees 0.11.1-dev-3 → 0.11.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xy-planning-network/trees",
-  "version": "0.11.1-dev-3",
+  "version": "0.11.2",
   "description": "",
   "license": "MIT",
   "repository": "github:xy-planning-network/trees",
@@ -38,7 +38,7 @@
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/typography": "^0.5.7",
     "@types/node": "^18.15.11",
-    "@vitejs/plugin-vue": "^5.1.4",
+    "@vitejs/plugin-vue": "^5.2.3",
     "@vue/eslint-config-prettier": "~8.0.0",
     "@vue/eslint-config-typescript": "~13.0.0",
     "autoprefixer": "^10.4.14",
@@ -52,8 +52,8 @@
     "tsc-alias": "^1.8.5",
     "typescript": "~5.4.5",
     "unplugin-vue-components": "^0.27.4",
-    "unplugin-vue-markdown": "^0.25.2",
-    "vite": "^5.4.10",
+    "unplugin-vue-markdown": "^0.26.3",
+    "vite": "^6.2.2",
     "vue-tsc": "^2.1.10"
   },
   "dependencies": {

package/src/lib-components/layout/SidebarLayout.vue

@@ -5,20 +5,23 @@ import {
   Dialog,
   DialogOverlay,
   Menu,
+  MenuButton,
+  MenuItem,
+  MenuItems,
   TransitionChild,
   TransitionRoot,
 } from "@headlessui/vue"
 import { MenuAlt2Icon, XIcon } from "@heroicons/vue/outline"
-import type { NavItem, UserMenuItem } from "@/composables/nav"
+import { CogIcon } from "@heroicons/vue/solid"
+import type { NavItem } from "@/composables/nav"
 import { ref } from "vue"
-import UserMenu from "@/lib-components/layout/UserMenu.vue"
 
 const props = withDefaults(
   defineProps<{
     activeUrl?: string
     iconUrl: string
     navigation: NavItem[]
-    userNavigation: UserMenuItem[]
+    userNavigation: NavItem[]
   }>(),
   {
     activeUrl: "",
@@ -202,7 +205,41 @@ const isActive = (url: string): boolean => {
           <div class="ml-4 flex items-center lg:ml-6">
             <!-- Profile dropdown -->
             <Menu as="div" class="ml-3 relative">
-              <UserMenu :menu="userNavigation" />
+              <div>
+                <MenuButton
+                  class="max-w-xs flex items-center text-sm text-white rounded-full hover:bg-blue-900 hover:text-gray-50 focus:outline-none focus:ring focus:text-white"
+                >
+                  <span class="sr-only">Open user menu</span>
+                  <CogIcon class="h-8 w-8" fill="currentColor" />
+                </MenuButton>
+              </div>
+              <transition
+                enter-active-class="transition ease-out duration-100"
+                enter-from-class="transform opacity-0 scale-95"
+                enter-to-class="transform opacity-100 scale-100"
+                leave-active-class="transition ease-in duration-75"
+                leave-from-class="transform opacity-100 scale-100"
+                leave-to-class="transform opacity-0 scale-95"
+              >
+                <MenuItems
+                  class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
+                >
+                  <MenuItem
+                    v-for="item in userNavigation"
+                    :key="item.name"
+                    v-slot="{ active }"
+                  >
+                    <a
+                      :href="item.url"
+                      :class="[
+                        active ? 'bg-gray-100' : '',
+                        'block px-4 py-2 text-sm text-gray-700 font-semibold',
+                      ]"
+                      >{{ item.name }}</a
+                    >
+                  </MenuItem>
+                </MenuItems>
+              </transition>
             </Menu>
           </div>
         </div>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, defineModel } from "vue"
+import { computed } from "vue"
 
 const props = withDefaults(
   defineProps<{

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

@@ -1,44 +1,7 @@
-<script setup lang="ts">
-import { computed } from "vue"
-
-const props = withDefaults(
-  defineProps<{ size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" }>(),
-  { size: "xs" }
-)
-const maxWidth = computed(() => {
-  let maxWidth = "max-w-xs"
-  switch (props.size) {
-    case "xs":
-      maxWidth = "max-w-xs"
-      break
-    case "sm":
-      maxWidth = "max-w-sm"
-      break
-    case "md":
-      maxWidth = "max-w-md"
-      break
-    case "lg":
-      maxWidth = "max-w-lg"
-      break
-    case "xl":
-      maxWidth = "max-w-xl"
-      break
-    case "2xl":
-      maxWidth = "max-w-2xl"
-      break
-  }
-
-  return maxWidth
-})
-</script>
-
 <template>
   <!--styling wrapper - top level element will merge attrs for class overrides -->
   <div
-    :class="[
-      'w-full bg-white rounded-xy p-2 border border-gray-100 shadow-md',
-      maxWidth,
-    ]"
+    class="w-full max-w-xs bg-white rounded-xy p-2 border border-gray-100 shadow-md"
   >
     <slot></slot>
   </div>

package/types/composables/nav.d.ts

@@ -1,27 +1,7 @@
-import { type Component, type FunctionalComponent, type MaybeRef, type Ref, type RenderFunction } from "vue";
-interface UserMenuItemBase {
-    indicator?: boolean | string | number;
-    icon: Component | RenderFunction;
-    name: string;
-}
-export interface UserMenuItemUrl extends UserMenuItemBase {
-    action: "url";
-    url: string;
-}
-export interface UserMenuItemNav extends UserMenuItemBase {
-    action: "nav";
-    navigation: NavItem[];
-}
-export interface UserMenuItemFlyout<T extends Component> extends UserMenuItemBase {
-    action: "flyout";
-    component: T;
-    props: Record<string, any>;
-}
-export type UserMenuItem = UserMenuItemUrl | UserMenuItemNav | UserMenuItemFlyout<Component>;
+import { Component, FunctionalComponent, MaybeRef, Ref, RenderFunction } from "vue";
 export interface NavItem {
     icon?: Component | RenderFunction;
     name: string;
-    description?: string;
     openInTab?: boolean;
     url: string;
 }
@@ -179,4 +159,3 @@ export type URLParams<T> = {
  * @return Ref<T>
  */
 export declare const useUrlSearchParams: <T>(initial: URLParams<T>) => [URLParams<T>] extends [Ref<any, any>] ? import("@vue/shared").IfAny<Ref<any, any> & URLParams<T>, Ref<Ref<any, any> & URLParams<T>, Ref<any, any> & URLParams<T>>, Ref<any, any> & URLParams<T>> : Ref<import("vue").UnwrapRef<URLParams<T>>, URLParams<T> | import("vue").UnwrapRef<URLParams<T>>>;
-export {};

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

@@ -5,7 +5,6 @@ import { default as DateFilter } from "./layout/DateFilter.vue";
 import { default as DetailList } from "./lists/DetailList.vue";
 import { default as DownloadCell } from "./lists/DownloadCell.vue";
 import { default as Flash } from "./overlays/Flash.vue";
-import { default as AppIcon } from "./indicators/AppIcon.vue";
 import { default as InlineAlert } from "./indicators/InlineAlert.vue";
 import { default as Modal } from "./overlays/Modal.vue";
 import { default as SidebarLayout } from "./layout/SidebarLayout.vue";
@@ -39,7 +38,7 @@ import { default as RadioCards } from "./forms/RadioCards.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, AppIcon, InlineAlert, Modal, SidebarLayout, Slideover, StackedLayout, Popover, PopoverContent, PopoverPosition, // Type export
+export { ActionsDropdown, Cards, ContentModal, DateFilter, DetailList, DownloadCell, Flash, InlineAlert, Modal, SidebarLayout, Slideover, StackedLayout, Popover, PopoverContent, PopoverPosition, // Type export
 Paginator, Spinner, DataTable, Steps, DynamicTable, Tabs, Toggle, Tooltip, BaseInput, Checkbox, DateRangePicker, DateTime, InputError, InputHelp, InputLabel, FieldsetLegend, MultiCheckboxes, Radio, RadioCards, Select, TextArea, YesOrNoRadio, XYSpinner, ProgressCircles, ProgressCirclesLabeled, };
 /**
  * declare global component types for App.use(Trees)
@@ -52,7 +51,6 @@ export interface TreesComponents {
     DetailList: typeof DetailList;
     DownloadCell: typeof DownloadCell;
     Flash: typeof Flash;
-    AppIcon: typeof AppIcon;
     Modal: typeof Modal;
     SidebarLayout: typeof SidebarLayout;
     Slideover: typeof Slideover;

package/types/lib-components/layout/SidebarLayout.vue.d.ts

@@ -1,9 +1,9 @@
-import type { NavItem, UserMenuItem } from "../../composables/nav";
+import type { NavItem } from "../../composables/nav";
 type __VLS_Props = {
     activeUrl?: string;
     iconUrl: string;
     navigation: NavItem[];
-    userNavigation: UserMenuItem[];
+    userNavigation: NavItem[];
 };
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     activeUrl: string;

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

@@ -1,9 +1,4 @@
-type __VLS_Props = {
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
-};
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    size: "xs" | "sm" | "lg" | "xl" | "md" | "2xl";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
 }>;
 export default _default;

package/src/lib-components/indicators/AppIcon.vue

@@ -1,97 +0,0 @@
-<script setup lang="ts">
-/**
- * IconCircle
- * A utility component for wrapping a Heroicon in a circle.
- *
- * Usage:
- * import CircleIcon from "@/components/shared/CircleIcon.vue"
- * import { SpeakerphoneIcon } from "@heroicons/vue/outline"
- * <template>
- *   <CircleIcon
- *     :icon="SpeakerphoneIcon"
- *     icon-color="text-white"
- *     bg-color="bg-xy-green"
- *   />
- * </template>
- */
-
-import { computed } from "vue"
-import type { Component, FunctionalComponent, RenderFunction } from "vue"
-
-// TODO: themed icons?
-
-const props = withDefaults(
-  defineProps<{
-    bgColor?: `bg-${string}`
-    iconColor?: `text-${string}`
-    icon: FunctionalComponent | Component | RenderFunction
-    indicator?: string | number | boolean
-    size?: "xs" | "sm" | "base" | "lg" | "xl"
-    type?: "circle" | "square" // TODO: squircle?
-  }>(),
-  {
-    bgColor: "bg-transparent",
-    iconColor: "text-xy-black",
-    indicator: false,
-    size: "base",
-    type: "square",
-  }
-)
-
-const size = computed(() => {
-  const sizes = {
-    xs: { bg: "w-6 h-6", icon: "w-4 h-4" },
-    sm: { bg: "w-7 h-7", icon: "w-5 h-5" },
-    base: { bg: "w-10 h-10", icon: "w-6 h-6" },
-    lg: { bg: "w-12 h-12", icon: "w-6 h-6" },
-    xl: { bg: "w-14 h-14", icon: "w-6 h-6" },
-  }
-
-  return sizes[props.size]
-})
-
-const indicatorStr = computed(() => {
-  if (!props.indicator) {
-    return ""
-  }
-
-  return ["string", "number"].includes(typeof props.indicator)
-    ? props.indicator.toString()
-    : ""
-})
-</script>
-
-<template>
-  <div
-    aria-hidden="true"
-    :class="[
-      'aspect-square leading-none relative',
-      type === 'circle' ? 'rounded-full' : 'rounded-md',
-      bgColor,
-      size.bg,
-    ]"
-  >
-    <div class="flex flex-col h-full w-full items-center justify-center">
-      <div
-        :class="[size.icon]"
-        class="flex flex-col items-center justify-center"
-      >
-        <component :is="icon" :class="iconColor" />
-        <div v-if="$slots['default']" class="sr-only">
-          <slot />
-        </div>
-      </div>
-    </div>
-
-    <!--TODO(spk): position edge cases based on content length-->
-    <div
-      v-if="props.indicator"
-      :class="[
-        'absolute top-0 right-0 block bg-xy-green text-xy-black text-xs/3 font-bold translate-x-1/4 -translate-y-1/4',
-        indicatorStr ? 'p-1 rounded-xy' : 'h-3 w-3 rounded-full',
-      ]"
-    >
-      {{ indicatorStr }}
-    </div>
-  </div>
-</template>

package/src/lib-components/layout/UserMenu.vue

@@ -1,89 +0,0 @@
-<script setup lang="ts">
-import { UserMenuItem } from "@/composables/nav"
-import AppIcon from "@/lib-components/indicators/AppIcon.vue"
-import Popover from "@/lib-components/overlays/Popover/Popover.vue"
-import PopoverContent from "@/lib-components/overlays/Popover/PopoverContent.vue"
-import TooltipWrapper from "@/lib-components/overlays/TooltipWrapper.vue"
-import { computed } from "vue"
-
-const props = withDefaults(defineProps<{ menu?: UserMenuItem[] }>(), {
-  menu: () => [],
-})
-
-const items = computed(() => {
-  return props.menu.map((item) => {
-    const isPopover = item.action != "url"
-
-    return {
-      ...item,
-      isPopover: isPopover,
-    }
-  })
-})
-</script>
-
-<template>
-  <!--TODO: focus rings? -->
-  <div v-if="items.length > 0" class="flex items-center justify-center gap-3.5">
-    <template v-for="(item, key) in items" :key="key">
-      <div v-if="item.action === 'url'">
-        <TooltipWrapper position="bottom-end" :tooltip="item.name">
-          <a :href="item.url" target="" class="block">
-            <AppIcon
-              bg-color="bg-transparent hover:bg-black/20"
-              icon-color="text-neutral-200"
-              :icon="item.icon"
-              :indicator="item.indicator"
-              size="base"
-              type="square"
-              >{{ item.name }}</AppIcon
-            >
-          </a>
-        </TooltipWrapper>
-      </div>
-
-      <div v-else-if="item.isPopover" class="leading-none">
-        <Popover position="bottom-end">
-          <template #button>
-            <TooltipWrapper position="bottom-end" :tooltip="item.name">
-              <AppIcon
-                bg-color="bg-transparent hover:bg-black/20"
-                icon-color="text-neutral-200"
-                :icon="item.icon"
-                :indicator="item.indicator"
-                size="base"
-                >{{ item.name }}</AppIcon
-              >
-            </TooltipWrapper>
-          </template>
-
-          <template #default>
-            <PopoverContent v-if="item.action === 'nav'">
-              <ul class="flex flex-col text-sm/6">
-                <li v-for="(nav, navKey) in item.navigation" :key="navKey">
-                  <a
-                    :href="nav.url"
-                    class="block relative rounded-lg p-4 hover:bg-gray-50"
-                  >
-                    <div class="font-semibold text-gray-900">
-                      {{ nav.name }}
-                    </div>
-                    <div v-if="nav.description" class="mt-0.5 text-gray-600">
-                      {{ nav.description }}
-                    </div>
-                  </a>
-                </li>
-              </ul>
-            </PopoverContent>
-
-            <component
-              :is="item.component"
-              v-if="item.action === 'flyout'"
-              v-bind="item.props"
-            />
-          </template>
-        </Popover>
-      </div>
-    </template>
-  </div>
-</template>

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

@@ -1,73 +0,0 @@
-<script lang="ts" setup>
-import { computed, useTemplateRef } from "vue"
-import {
-  autoPlacement,
-  autoUpdate,
-  offset,
-  shift,
-  useFloating,
-  type Placement,
-} from "@floating-ui/vue"
-
-// props
-const props = withDefaults(
-  defineProps<{
-    as?: string
-    position?: Placement | "auto"
-    tooltip: string
-  }>(),
-  {
-    as: "div",
-    position: "auto",
-  }
-)
-
-// NOTE(spk): explicitly typing as useTemplateRef is unable to infer the template type.
-// https://vuejs.org/guide/typescript/composition-api.html#typing-template-refs
-const triggerRef = useTemplateRef<HTMLElement>("trigger")
-const wrapperRef = useTemplateRef<HTMLElement>("wrapper")
-const middleware = computed(() => {
-  const middleware = [offset(5), shift()]
-  if (props.position === "auto") {
-    middleware.push(autoPlacement())
-  }
-
-  return middleware
-})
-
-/**
- * floating-ui's placement property does not support a direct "auto"
- * mode. Passing undefined is expected when auto position is used.
- */
-const placement = computed(() => {
-  if (props.position === "auto") {
-    return undefined
-  }
-
-  return props.position
-})
-
-const { floatingStyles } = useFloating(triggerRef, wrapperRef, {
-  middleware: middleware,
-  placement: placement,
-  strategy: "fixed",
-  whileElementsMounted: autoUpdate,
-})
-</script>
-
-<template>
-  <component :is="as" ref="trigger" class="group">
-    <slot></slot>
-    <div
-      ref="wrapper"
-      class="hidden group-hover:block z-[5]"
-      :style="floatingStyles"
-    >
-      <div
-        class="max-w-xs bg-xy-black rounded-md px-3 py-1 drop-shadow text-sm text-white leading-snug font-semibold"
-      >
-        {{ tooltip }}
-      </div>
-    </div>
-  </component>
-</template>

package/types/lib-components/indicators/AppIcon.vue.d.ts

@@ -1,24 +0,0 @@
-import type { Component, FunctionalComponent, RenderFunction } from "vue";
-type __VLS_Props = {
-    bgColor?: `bg-${string}`;
-    iconColor?: `text-${string}`;
-    icon: FunctionalComponent | Component | RenderFunction;
-    indicator?: string | number | boolean;
-    size?: "xs" | "sm" | "base" | "lg" | "xl";
-    type?: "circle" | "square";
-};
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    type: "circle" | "square";
-    size: "base" | "xs" | "sm" | "lg" | "xl";
-    bgColor: `bg-${string}`;
-    iconColor: `text-${string}`;
-    indicator: string | number | boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>, {
-    default?(_: {}): any;
-}>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/types/lib-components/layout/UserMenu.vue.d.ts

@@ -1,8 +0,0 @@
-import { UserMenuItem } from "../../composables/nav";
-type __VLS_Props = {
-    menu?: UserMenuItem[];
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    menu: UserMenuItem[];
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

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

@@ -1,18 +0,0 @@
-import { type Placement } from "@floating-ui/vue";
-type __VLS_Props = {
-    as?: string;
-    position?: Placement | "auto";
-    tooltip: string;
-};
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    as: string;
-    position: Placement | "auto";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    default?(_: {}): any;
-}>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};