@xy-planning-network/trees 0.13.7-dev-5 → 0.13.8-dev-1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xy-planning-network/trees",
-  "version": "0.13.7-dev-5",
+  "version": "0.13.8-dev-1",
   "description": "",
   "license": "MIT",
   "repository": "github:xy-planning-network/trees",
@@ -59,7 +59,7 @@
   "dependencies": {
     "@floating-ui/vue": "^1.0.1",
     "@headlessui/vue": "^1.4.2",
-    "@heroicons/vue": "^1.0.5",
+    "@heroicons/vue": "^2.2.0",
     "@maskito/core": "^3.5.0",
     "@maskito/kit": "^3.5.0",
     "@maskito/vue": "^3.5.0",

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

@@ -4,11 +4,11 @@ import { computed, ref } from "vue"
 import {
   CheckCircleIcon,
   InformationCircleIcon,
-  ExclamationIcon,
+  ExclamationTriangleIcon,
   XCircleIcon,
 } from "@heroicons/vue/solid"
 
-import { XIcon } from "@heroicons/vue/outline"
+import { XMarkIcon } from "@heroicons/vue/outline"
 
 const props = withDefaults(
   defineProps<{
@@ -107,7 +107,7 @@ const icon = computed(() => {
       icon = CheckCircleIcon
       break
     case "warn":
-      icon = ExclamationIcon
+      icon = ExclamationTriangleIcon
       break
   }
 
@@ -185,7 +185,7 @@ const icon = computed(() => {
             @click="close"
           >
             <span class="sr-only">close</span>
-            <XIcon class="h-4 w-4" />
+            <XMarkIcon class="h-4 w-4" />
           </button>
         </div>
       </div>

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

@@ -11,8 +11,11 @@ import {
   TransitionChild,
   TransitionRoot,
 } from "@headlessui/vue"
-import { MenuAlt2Icon, XIcon } from "@heroicons/vue/outline"
-import { CogIcon } from "@heroicons/vue/solid"
+import {
+  Bars3BottomLeftIcon,
+  XMarkIcon,
+} from "@heroicons/vue/outline"
+import { Cog6ToothIcon } from "@heroicons/vue/solid"
 import type { NavItem } from "@/composables/nav"
 import { ref } from "vue"
 
@@ -82,7 +85,7 @@ const isActive = (url: string): boolean => {
                   @click="sidebarOpen = false"
                 >
                   <span class="sr-only">Close sidebar</span>
-                  <XIcon class="h-6 w-6 text-white" aria-hidden="true" />
+                  <XMarkIcon class="h-6 w-6 text-white" aria-hidden="true" />
                 </button>
               </div>
             </TransitionChild>
@@ -192,7 +195,7 @@ const isActive = (url: string): boolean => {
           @click="sidebarOpen = true"
         >
           <span class="sr-only">Open sidebar</span>
-          <MenuAlt2Icon class="h-6 w-6" aria-hidden="true" />
+          <Bars3BottomLeftIcon class="h-6 w-6" aria-hidden="true" />
         </button>
         <div class="flex-1 px-4 flex justify-between">
           <div class="flex-1 flex">
@@ -210,7 +213,7 @@ const isActive = (url: string): boolean => {
                   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" />
+                  <Cog6ToothIcon class="h-8 w-8" fill="currentColor" />
                 </MenuButton>
               </div>
               <transition

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

@@ -10,7 +10,11 @@ import {
   MenuItem,
   MenuItems,
 } from "@headlessui/vue"
-import { MenuIcon, UserCircleIcon, XIcon } from "@heroicons/vue/outline"
+import {
+  Bars3Icon,
+  UserCircleIcon,
+  XMarkIcon,
+} from "@heroicons/vue/outline"
 import type { NavItem } from "@/composables/nav"
 import User from "@/composables/user"
 
@@ -101,8 +105,12 @@ const isActive = (url: string): boolean => {
               class="bg-white inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
             >
               <span class="sr-only">Open main menu</span>
-              <MenuIcon v-if="!open" class="block h-6 w-6" aria-hidden="true" />
-              <XIcon v-else class="block h-6 w-6" aria-hidden="true" />
+              <Bars3Icon
+                v-if="!open"
+                class="block h-6 w-6"
+                aria-hidden="true"
+              />
+              <XMarkIcon v-else class="block h-6 w-6" aria-hidden="true" />
             </DisclosureButton>
           </div>
         </div>

package/src/lib-components/lists/DownloadCell.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { DownloadIcon } from "@heroicons/vue/solid"
+import { ArrowDownTrayIcon } from "@heroicons/vue/solid"
 defineProps<{
   propsData: Record<string, unknown>
   attribute: string
 }>()
 </script>
 <template>
-  <a :href="(propsData[attribute] as string)">
-    <DownloadIcon class="h-6 w-6 group-hover:text-gray-500 transition" />
+  <a :href="propsData[attribute] as string">
+    <ArrowDownTrayIcon class="h-6 w-6 group-hover:text-gray-500 transition" />
   </a>
 </template>

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

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue"
-import { ChevronDownIcon, DotsVerticalIcon } from "@heroicons/vue/solid"
+import {
+  ChevronDownIcon,
+  EllipsisVerticalIcon,
+} from "@heroicons/vue/solid"
 import { isActionItemButton, type ActionItems } from "@/composables/nav"
 import { computed, useTemplateRef } from "vue"
 import { useFloating, autoUpdate, autoPlacement } from "@floating-ui/vue"
@@ -71,7 +74,7 @@ const { floatingStyles } = useFloating(triggerRef, wrapperRef, {
     >
       <span :class="!label && 'sr-only'">{{ label || "Open options" }}</span>
       <component
-        :is="label ? ChevronDownIcon : DotsVerticalIcon"
+        :is="label ? ChevronDownIcon : EllipsisVerticalIcon"
         :class="[label && '-mr-1 ml-2', 'w-5 h-5']"
         aria-hidden="true"
       />

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

@@ -6,7 +6,7 @@ import {
   TransitionChild,
   TransitionRoot,
 } from "@headlessui/vue"
-import { XIcon } from "@heroicons/vue/outline"
+import { XMarkIcon } from "@heroicons/vue/outline"
 import { computed, useSlots, watch } from "vue"
 
 const props = withDefaults(
@@ -110,7 +110,7 @@ watch(open, (isOpen) => {
                   @click="open = false"
                 >
                   <span class="sr-only">Close</span>
-                  <XIcon class="h-6 w-6" aria-hidden="true" />
+                  <XMarkIcon class="h-6 w-6" aria-hidden="true" />
                 </button>
               </div>
 

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

@@ -6,7 +6,7 @@ import {
   TransitionChild,
   TransitionRoot,
 } from "@headlessui/vue"
-import { XIcon } from "@heroicons/vue/outline"
+import { XMarkIcon } from "@heroicons/vue/outline"
 import { computed, watch } from "vue"
 
 const props = withDefaults(
@@ -89,7 +89,7 @@ watch(open, (isOpen) => {
                         @click="open = false"
                       >
                         <span class="sr-only">Close panel</span>
-                        <XIcon class="h-6 w-6" aria-hidden="true" />
+                        <XMarkIcon class="h-6 w-6" aria-hidden="true" />
                       </button>
                     </div>
                   </div>

package/types/composables/nav.d.ts

@@ -13,6 +13,13 @@ export interface Pagination {
 }
 export type ActionItem = ActionItemButton | ActionItemLink;
 export type ActionItems = ActionItem[];
+/**
+ * ActionItemButton determines the configuration for a button action in a component.
+ * Visibility (`show`) and interactivity (`disabled`) can be toggled via static booleans.
+ *
+ * The use of (`never`) on properties that exist in ActionItemLink ensures the compiler
+ * can infer between the to interfaces when used in the type union ActionItem.
+ */
 export interface ActionItemButton {
     label: string;
     attrs?: never;
@@ -24,6 +31,13 @@ export interface ActionItemButton {
     onClick: (e: Event) => void;
 }
 export declare const isActionItemButton: (item: ActionItem) => item is ActionItemButton;
+/**
+ * ActionItemLink determines the configuration for a link action in a component.
+ * Visibility (`show`) and interactivity (`disabled`) can be toggled via static booleans.
+ *
+ * HTML Attributes can be defined on (`attrs`) for additional HTML anchor tag attributes
+ * that are not explicitly defined in the interface.
+ */
 export interface ActionItemLink {
     label: string;
     url: string;

package/types/composables/table.d.ts

@@ -42,6 +42,9 @@ export type TableActionItem<T = TableRowData> = TableActionButton<T> | TableActi
  * Visibility (`show`) and interactivity (`disabled`) can be toggled via static booleans
  * or dynamic methods based on the specific row's state and index.
  *
+ * The use of (`never`) on properties that exist in TableActionLink ensures the compiler
+ * can infer between the to interfaces when used in the type union TableActionItem.
+ *
  * @template T The shape of the underlying row data.
  */
 export interface TableActionButton<T = TableRowData> {

package/types/heroicons.d.ts

@@ -0,0 +1,8 @@
+// src/heroicons.d.ts
+declare module "@heroicons/vue/outline" {
+  export * from "@heroicons/vue/24/outline"
+}
+
+declare module "@heroicons/vue/solid" {
+  export * from "@heroicons/vue/24/solid"
+}