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

package/package.json

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

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

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { UserMenuItem } from "@/composables/nav"
-import { AppIcon } from "@/lib-components"
+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"
 
@@ -56,8 +58,8 @@ const items = computed(() => {
           </template>
 
           <template #default>
-            <PopoverContent>
-              <ul v-if="item.action === 'nav'" class="flex flex-col text-sm/6">
+            <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"
@@ -72,13 +74,13 @@ const items = computed(() => {
                   </a>
                 </li>
               </ul>
-
-              <component
-                :is="item.component"
-                v-if="item.action === 'flyout'"
-                v-bind="item.props"
-              />
             </PopoverContent>
+
+            <component
+              :is="item.component"
+              v-if="item.action === 'flyout'"
+              v-bind="item.props"
+            />
           </template>
         </Popover>
       </div>

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

@@ -1,7 +1,44 @@
+<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 max-w-xs bg-white rounded-xy p-2 border border-gray-100 shadow-md"
+    :class="[
+      'w-full bg-white rounded-xy p-2 border border-gray-100 shadow-md',
+      maxWidth,
+    ]"
   >
     <slot></slot>
   </div>

package/types/composables/nav.d.ts

@@ -19,7 +19,6 @@ export interface UserMenuItemFlyout<T extends Component> extends UserMenuItemBas
 }
 export type UserMenuItem = UserMenuItemUrl | UserMenuItemNav | UserMenuItemFlyout<Component>;
 export interface NavItem {
-    badge?: boolean | string | number;
     icon?: Component | RenderFunction;
     name: string;
     description?: string;

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

@@ -1,4 +1,9 @@
-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>, {
+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>, {
     default?(_: {}): any;
 }>;
 export default _default;