@xy-planning-network/trees 0.13.5 → 0.13.7-dev-1

package/package.json

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

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

@@ -5,8 +5,7 @@ import type {
   TableColumns,
   TableRowsData,
 } from "@/composables/table"
-import { ActionsDropdown } from "@/lib-components"
-import TableActionButtons from "./TableActionButtons.vue"
+import { ActionsButtonGroup, ActionsDropdown } from "@/lib-components"
 import { toRef } from "vue"
 
 const props = withDefaults(
@@ -77,15 +76,14 @@ const { columns, hasActions, isEmptyCellValue, rows } = useTable(
                 <!--Table Actions Cell-->
                 <td
                   v-if="hasActions"
-                  class="px-6 py-2 text-sm text-gray-700 whitespace-nowrap leading-5"
+                  class="px-6 py-2 text-sm text-gray-700 whitespace-nowrap leading-5 w-0"
                 >
                   <ActionsDropdown
                     v-if="tableActions.type === 'dropdown'"
                     :actions="row.actions"
                   />
-                  <template v-else>
-                    <TableActionButtons :actions="row.actions" />
-                  </template>
+
+                  <ActionsButtonGroup v-else :actions="row.actions" />
                 </td>
               </tr>
 

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

@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import { computed, ref, toRef, watch } from "vue"
-import { ActionsDropdown, TablePaginator } from "@/lib-components"
+import {
+  ActionsButtonGroup,
+  ActionsDropdown,
+  TablePaginator,
+} from "@/lib-components"
 import DateRangePicker from "../forms/DateRangePicker.vue"
 import BaseAPI from "../../api/base"
 import type {
@@ -15,7 +19,6 @@ import { useAppFlasher } from "@/composables/useFlashes"
 import { TrailsRespPaged } from "@/api/client"
 import { DateRange, DateRangeProps } from "@/composables/date"
 import { useTable } from "@/composables/useTable"
-import TableActionButtons from "./TableActionButtons.vue"
 
 const props = withDefaults(
   defineProps<{
@@ -168,11 +171,12 @@ const bulkActions = computed(() => {
       return {
         ...action,
         disabled: selected.value.length === 0 || action.disabled,
-        onClick: () =>
+        onClick: (e?: Event) =>
           action.onClick.apply(undefined, [
             selected.value,
             selectedData.value,
             publicMethods,
+            e,
           ]),
       }
     })
@@ -264,6 +268,7 @@ loadAndRender()
 <template>
   <div>
     <div
+      v-if="tableOptions.search || tableOptions.dateSearch"
       class="flex flex-col mb-4 space-y-4 lg:space-y-0 lg:flex-row lg:justify-between"
     >
       <div v-if="tableOptions.search" class="w-full max-w-lg lg:max-w-xs">
@@ -423,7 +428,7 @@ loadAndRender()
                   <span class="font-medium">{{ selectable.length }}</span>
                 </div>
 
-                <TableActionButtons :actions="bulkActions" />
+                <ActionsButtonGroup :actions="bulkActions" />
               </div>
             </td>
           </tr>
@@ -470,15 +475,14 @@ loadAndRender()
             <!--Table Actions Cell-->
             <td
               v-if="hasActions"
-              class="px-6 py-2 text-sm text-gray-700 whitespace-nowrap leading-5"
+              class="px-6 py-2 text-sm text-gray-700 whitespace-nowrap leading-5 w-0"
             >
               <ActionsDropdown
                 v-if="tableActions.type === 'dropdown'"
                 :actions="row.actions"
               />
-              <template v-else>
-                <TableActionButtons :actions="row.actions" />
-              </template>
+
+              <ActionsButtonGroup v-else :actions="row.actions" />
             </td>
           </tr>
 

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

@@ -0,0 +1,96 @@
+<script lang="ts" setup>
+import { ActionItems, isActionItemButton } from "@/composables/nav"
+import { computed } from "vue"
+
+const props = withDefaults(
+  defineProps<{
+    actions?: ActionItems
+  }>(),
+  {
+    actions: () => [],
+  }
+)
+
+const actionItems = computed(() => {
+  return props.actions
+    .filter((a) => a.show !== false)
+    .map((a) => {
+      return {
+        ...a,
+        disabled: a.disabled ?? false,
+        kind: isActionItemButton(a) ? "button" : "link",
+        show: true,
+        onClick: a.onClick ? a.onClick : () => {},
+      }
+    })
+})
+
+const hasActions = computed(() => actionItems.value.length > 0)
+</script>
+
+<template>
+  <div v-if="hasActions" class="flex items-center space-x-2">
+    <span class="isolate inline-flex rounded-md shadow-sm">
+      <template v-for="(action, actionIdx) in actionItems" :key="actionIdx">
+        <button
+          v-if="action.kind === 'button'"
+          type="button"
+          class="group relative inline-flex items-center bg-white px-3 py-2 text-sm font-semibold text-gray-700 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10 disabled:text-gray-400 disabled:cursor-not-allowed"
+          :class="{
+            'rounded-l-md': actionIdx === 0,
+            '-ml-px': actionIdx > 0,
+            'rounded-r-md': actionIdx === actionItems.length - 1,
+          }"
+          :disabled="action.disabled"
+          @click.stop="action.onClick"
+        >
+          <span class="relative inline-flex items-center gap-x-1.5">
+            <component
+              :is="action.icon"
+              v-if="action.icon"
+              class="-ml-0.5 h-4 w-4 group-disabled:text-gray-300"
+              :class="action.label ? 'text-gray-400' : 'text-gray-600'"
+              aria-hidden="true"
+            />
+            {{ action.label }}
+          </span>
+        </button>
+
+        <a
+          v-else
+          :href="action.disabled ? undefined : action.url"
+          class="group relative inline-flex items-center bg-white px-3 py-2 text-sm font-semibold ring-1 ring-inset ring-gray-300 focus:z-10"
+          :class="[
+            {
+              'rounded-l-md': actionIdx === 0,
+              '-ml-px': actionIdx > 0,
+              'rounded-r-md': actionIdx === actionItems.length - 1,
+            },
+            action.disabled
+              ? 'text-gray-400 cursor-not-allowed pointer-events-none'
+              : 'text-gray-700 hover:bg-gray-50',
+          ]"
+          :target="action.openInTab ? '_blank' : undefined"
+          v-bind="action.attrs"
+          @click.stop="
+            action.disabled ? $event.preventDefault() : action.onClick($event)
+          "
+        >
+          <span class="relative inline-flex items-center gap-x-1.5">
+            <component
+              :is="action.icon"
+              v-if="action.icon"
+              class="-ml-0.5 h-4 w-4"
+              :class="[
+                action.label ? 'text-gray-400' : 'text-gray-600',
+                action.disabled ? 'text-gray-300' : '',
+              ]"
+              aria-hidden="true"
+            />
+            {{ action.label }}
+          </span>
+        </a>
+      </template>
+    </span>
+  </div>
+</template>

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

@@ -1,44 +1,80 @@
 <script setup lang="ts">
 import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue"
-import { DotsVerticalIcon } from "@heroicons/vue/solid"
-import type { ActionItem } from "@/composables/nav"
-import { useActionItems } from "@/composables/useActionItems"
-import { toRef, useTemplateRef } from "vue"
-import { useFloating, autoUpdate } from "@floating-ui/vue"
-import type { Placement } from "@floating-ui/vue"
+import { ChevronDownIcon, DotsVerticalIcon } from "@heroicons/vue/solid"
+import { isActionItemButton, type ActionItems } from "@/composables/nav"
+import { computed, useTemplateRef } from "vue"
+import { useFloating, autoUpdate, autoPlacement } from "@floating-ui/vue"
 
 const props = withDefaults(
   defineProps<{
-    actions?: ActionItem[]
-    placement?: Placement
+    actions?: ActionItems
+    hideOnEmpty?: boolean
+    label?: string
   }>(),
   {
     actions: () => [],
-    placement: "bottom-end",
+    hideOnEmpty: false,
+    label: "",
   }
 )
 
-const { actions, hasActions } = useActionItems(toRef(props, "actions"))
+const actionItems = computed(() => {
+  return props.actions
+    .filter((a) => a.show !== false)
+    .map((a) => {
+      return {
+        ...a,
+        disabled: a.disabled ?? false,
+        kind: isActionItemButton(a) ? "button" : "link",
+        show: true,
+        onClick: a.onClick ? a.onClick : () => {},
+      }
+    })
+})
+
+const hasActions = computed(() => actionItems.value.length > 0)
+
+const show = computed(() => {
+  if (props.hideOnEmpty) {
+    return hasActions.value
+  }
+
+  return true
+})
 
 // 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<InstanceType<typeof MenuButton>>("trigger")
 const wrapperRef = useTemplateRef<HTMLElement | null>("wrapper")
 const { floatingStyles } = useFloating(triggerRef, wrapperRef, {
-  placement: props.placement,
+  middleware: [
+    autoPlacement({
+      allowedPlacements: ["bottom-end", "bottom-start"],
+    }),
+  ],
   strategy: "fixed",
   whileElementsMounted: autoUpdate,
 })
 </script>
+
 <template>
-  <Menu as="div" class="relative flex justify-end items-center">
+  <Menu v-if="show" as="div" class="relative flex items-center">
     <MenuButton
       ref="trigger"
-      class="w-8 h-8 inline-flex items-center justify-center text-gray-700 rounded-full hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+      :class="[
+        label
+          ? 'rounded-md px-4 py-2 border border-gray-200 shadow-sm text-gray-800'
+          : 'w-8 h-8 rounded-full border border-transparent text-gray-700',
+        'inline-flex items-center justify-center text-sm font-medium hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors',
+      ]"
       :disabled="!hasActions"
     >
-      <span class="sr-only">Open options</span>
-      <DotsVerticalIcon class="w-5 h-5" aria-hidden="true" />
+      <span :class="!label && 'sr-only'">{{ label || "Open options" }}</span>
+      <component
+        :is="label ? ChevronDownIcon : DotsVerticalIcon"
+        :class="[label && '-mr-1 ml-2', 'w-5 h-5']"
+        aria-hidden="true"
+      />
     </MenuButton>
     <transition
       enter-active-class="transition ease-out duration-100"
@@ -53,16 +89,28 @@ const { floatingStyles } = useFloating(triggerRef, wrapperRef, {
           class="w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-200 focus:outline-none"
         >
           <div class="py-1">
-            <template v-for="(action, idx) in actions" :key="idx">
-              <MenuItem v-slot="{ active }: { active: boolean }" as="div">
+            <template v-for="(action, idx) in actionItems" :key="idx">
+              <MenuItem
+                v-slot="{
+                  active,
+                  disabled,
+                }: {
+                  active: boolean
+                  disabled: boolean
+                }"
+                :disabled="action.disabled"
+                as="div"
+              >
                 <button
-                  type="submit"
-                  :disabled="action.disabled"
+                  v-if="action.kind === 'button'"
+                  type="button"
+                  :disabled="disabled"
                   :class="[
                     active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
-                    'block w-full text-left px-4 py-2 text-sm font-semibold disabled:cursor-not-allowed',
+                    disabled ? 'opacity-50 cursor-not-allowed' : '',
+                    'block w-full text-left px-4 py-2 text-sm font-semibold',
                   ]"
-                  @click="action.onClick"
+                  @click="($event) => action.onClick($event)"
                 >
                   <span class="relative inline-flex items-center gap-x-1.5">
                     <component
@@ -74,6 +122,33 @@ const { floatingStyles } = useFloating(triggerRef, wrapperRef, {
                     {{ action.label }}
                   </span>
                 </button>
+
+                <a
+                  v-else
+                  :class="[
+                    active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                    disabled
+                      ? 'opacity-50 cursor-not-allowed pointer-events-none'
+                      : '',
+                    'block w-full text-left px-4 py-2 text-sm font-semibold',
+                  ]"
+                  :href="disabled ? undefined : action.url"
+                  :target="action.openInTab ? '_blank' : undefined"
+                  v-bind="action.attrs"
+                  @click="
+                    disabled ? $event.preventDefault() : action.onClick($event)
+                  "
+                >
+                  <span class="relative inline-flex items-center gap-x-1.5">
+                    <component
+                      :is="action.icon"
+                      v-if="action.icon"
+                      class="-ml-0.5 h-4 w-4 text-gray-400"
+                      aria-hidden="true"
+                    />
+                    {{ action.label }}
+                  </span>
+                </a>
               </MenuItem>
             </template>
           </div>

package/types/composables/nav.d.ts

@@ -11,13 +11,30 @@ export interface Pagination {
     totalItems: number;
     totalPages: number;
 }
-export interface ActionItem {
-    disabled?: boolean | ((...args: any[]) => boolean);
-    onClick: (...args: any[]) => void;
+export type ActionItem = ActionItemButton | ActionItemLink;
+export type ActionItems = ActionItem[];
+export interface ActionItemButton {
+    label: string;
+    attrs?: never;
+    disabled?: boolean;
     icon?: FunctionalComponent | RenderFunction;
+    openInTab?: never;
+    show?: boolean;
+    url?: never;
+    onClick: (e: Event) => void;
+}
+export declare const isActionItemButton: (item: ActionItem) => item is ActionItemButton;
+export interface ActionItemLink {
     label: string;
-    show?: boolean | ((...args: any[]) => boolean);
+    url: string;
+    attrs?: Record<string, string | number | boolean>;
+    disabled?: boolean;
+    icon?: FunctionalComponent | RenderFunction;
+    openInTab?: boolean;
+    show?: boolean;
+    onClick?: (e: Event) => void;
 }
+export declare const isActionItemLink: (item: ActionItem) => item is ActionItemLink;
 export interface UseTabHistoryOpts {
     /**
      * The initial value of activeTab.

package/types/composables/table.d.ts

@@ -1,5 +1,4 @@
-import { VNodeChild, type ComputedRef } from "vue";
-import { ActionItem } from "../composables/nav";
+import { FunctionalComponent, RenderFunction, VNodeChild, type ComputedRef } from "vue";
 import { DateRangeProps } from "./date";
 export interface DynamicTableOptions {
     dateSearch?: boolean | DateRangeProps;
@@ -37,51 +36,79 @@ export interface DynamicTableAPI<T = TableRowData> {
      */
     selectedData: ComputedRef<T[]>;
 }
-export interface TableActionItem<T = TableRowData> extends ActionItem {
-    /**
-     * The disabled property determines the value of the disabled attribute on the button
-     * attached to the action.  Allowing the action to stay visible to the user, but keeping the action
-     * disabled from use.
-     *
-     * disabled accepts a boolean value or a function with the table row data as
-     * the first argument and the row index as the second.
-     */
+export type TableActionItem<T = TableRowData> = TableActionButton<T> | TableActionLink<T>;
+/**
+ * TableActionButton determines the configuration for a action button within a table row.
+ * Visibility (`show`) and interactivity (`disabled`) can be toggled via static booleans
+ * or dynamic methods based on the specific row's state and index.
+ *
+ * @template T The shape of the underlying row data.
+ */
+export interface TableActionButton<T = TableRowData> {
+    label: string;
+    attrs?: never;
     disabled?: boolean | ((rowData: T, rowIndex: number) => boolean);
+    icon?: FunctionalComponent | RenderFunction;
+    openInTab?: never;
+    show?: boolean | ((rowData: T, rowIndex: number) => boolean);
+    url?: never;
     /**
      * onClick is the callback function triggered by the button rendered in the table actions.
      * @param rowData T
      * @param rowIndex number
      * @param tableAPI DynamicTableAPI
+     * @param e Event | undefined
      * @returns void
      */
-    onClick: (rowData: T, rowIndex: number, tableAPI: DynamicTableAPI) => void;
-    /**
-     * The show property determines whether the action is visible.
-     *
-     * show accepts a boolean value or a function with the table row data as
-     * the first argument and the row index as the second.
-     */
-    show?: boolean | ((rowData: T, rowIndex: number) => boolean);
+    onClick: (rowData: T, rowIndex: number, tableAPI: DynamicTableAPI, e?: Event) => void;
 }
-export interface TableBulkActionItem<T = TableRowData> extends ActionItem {
+/**
+ * TableActionLink determines the configuration for a link button within a table row.
+ * Visibility (`show`) and interactivity (`disabled`) can be toggled via static booleans
+ * or dynamic methods based on the specific row's state and index.
+ * HTML Attributes can be defined on (`attrs`) for additional HTML anchor tag attributes
+ * that are not explicitly defined in the interface.
+ *
+ * @template T The shape of the underlying row data.
+ */
+export interface TableActionLink<T = TableRowData> {
+    label: string;
+    url: string;
+    attrs?: Record<string, string | number | boolean>;
+    disabled?: boolean | ((rowData: T, rowIndex: number) => boolean);
+    icon?: FunctionalComponent | RenderFunction;
+    openInTab?: boolean;
+    show?: boolean | ((rowData: T, rowIndex: number) => boolean);
     /**
-     * Whether or not the bulk action item is enabled.  Disabled actions are
-     * visible in the UI, but do not trigger click events.
+     * onClick is the callback function triggered by the button rendered in the table actions.
+     * @param rowData T
+     * @param rowIndex number
+     * @param tableAPI DynamicTableAPI
+     * @param e Event | undefined
+     * @returns void
      */
+    onClick: (rowData: T, rowIndex: number, tableAPI: DynamicTableAPI, e?: Event) => void;
+}
+/**
+ * TableBulkActionItem determines the configuration for a bulk action button on a table.
+ * Visibility (`show`) and interactivity (`disabled`) can be toggled via static booleans.
+ *
+ * @template T The shape of the underlying row data.
+ */
+export interface TableBulkActionItem<T = TableRowData> {
+    label: string;
     disabled?: boolean;
+    icon?: FunctionalComponent | RenderFunction;
+    show?: boolean;
     /**
      * The callback method triggered by the action item buttons click event.
      * @param selected the array of selected rows by the primary key `id`
      * @param selectedData the array of selected rows as the underlying data type T
      * @param tableAPI DynamicTableAPI
+     * @param e Event | undefined
      * @returns void
      */
-    onClick: (selected: number[], selectedData: T[], tableAPI: DynamicTableAPI) => void;
-    /**
-     * Whether or not to visible show the action item in the UI.  When all action items
-     * on a table a hidden with show: false, bulk selections are disabled for the table.
-     */
-    show?: boolean;
+    onClick: (selected: number[], selectedData: T[], tableAPI: DynamicTableAPI, e?: Event) => void;
 }
 export interface TableActions<T = TableRowData> {
     /**

package/types/composables/useTable.d.ts

@@ -12,13 +12,25 @@ export declare const useTable: (rowData: TableRowsData | Ref<TableRowsData>, col
     hasActions: import("vue").ComputedRef<boolean>;
     isEmptyCellValue: (v: unknown) => boolean;
     rows: import("vue").ComputedRef<{
-        actions: {
+        actions: ({
             disabled: boolean | undefined;
-            onClick: () => void;
+            onClick: (e?: Event) => void;
             show: boolean | undefined;
+            label: string;
+            attrs?: undefined;
             icon?: import("vue").RenderFunction | import("vue").FunctionalComponent<{}, {}, any, {}> | undefined;
+            openInTab?: undefined;
+            url?: undefined;
+        } | {
+            disabled: boolean | undefined;
+            onClick: (e?: Event) => void;
+            show: boolean | undefined;
             label: string;
-        }[];
+            url: string;
+            attrs?: Record<string, string | number | boolean> | undefined;
+            icon?: import("vue").RenderFunction | import("vue").FunctionalComponent<{}, {}, any, {}> | undefined;
+            openInTab?: boolean | undefined;
+        })[];
         rowData: import("./table").TableRowData;
         cells: {
             isComponent: boolean;

package/types/entry.d.ts

@@ -2,6 +2,7 @@ import { Plugin } from "vue";
 import BaseAPI, { isHttpCancel, isHttpError, setBaseAPIDefaults } from "./api/base";
 import type { HttpPromise, HttpError, QueryParams, ReqOptions, ReqPayload, TrailsPromise, TrailsPromisePaged, TrailsResp, TrailsRespPaged } from "./api/client";
 import { emailPattern, looseToNumber, numericInputTypes, phonePattern, urlPattern, textInputTypes, useInputField } from "./composables/forms";
+import { isActionItemButton, isActionItemLink, useTabHistory, useUrlSearchParams } from "./composables/nav";
 import { debounce as debounceFn, debounceLeading } from "./helpers/Debounce";
 import { throttle as throttleFn } from "./helpers/Throttle";
 declare const install: Exclude<Plugin["install"], undefined>;
@@ -12,4 +13,6 @@ export { BaseAPI, isHttpCancel, isHttpError, setBaseAPIDefaults };
 export type { HttpPromise, HttpError, QueryParams, ReqOptions, ReqPayload, TrailsPromise, TrailsPromisePaged, TrailsResp, TrailsRespPaged, };
 export type * from "./composables/forms";
 export { emailPattern, looseToNumber, phonePattern, urlPattern, numericInputTypes, textInputTypes, useInputField, };
+export type * from "./composables/nav";
+export { isActionItemButton, isActionItemLink, useTabHistory, useUrlSearchParams, };
 export { debounceFn, debounceLeading, throttleFn };

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

@@ -8,6 +8,7 @@ declare const _default: <T extends InputOption>(__VLS_props: {
     placeholder?: string | undefined;
     columns?: 2 | 3 | undefined;
 } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, __VLS_ctx?: {
+    attrs: any;
     slots: {
         sublabel?(_: {
             active: boolean;
@@ -16,7 +17,6 @@ declare const _default: <T extends InputOption>(__VLS_props: {
             option: T;
         }): any;
     };
-    attrs: any;
     emit: (evt: "update:modelValue", value: string | number | null | undefined) => void;
 } | undefined, __VLS_expose?: ((exposed: import('vue').ShallowUnwrapRef<{}>) => void) | undefined, __VLS_setup?: Promise<{
     props: {

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

@@ -1,3 +1,4 @@
+import { default as ActionsButtonGroup } from "./navigation/ActionsButtonGroup.vue";
 import { default as ActionsDropdown } from "./navigation/ActionsDropdown.vue";
 import { default as Cards } from "./lists/Cards.vue";
 import { default as ContentModal } from "./overlays/ContentModal.vue";
@@ -40,12 +41,13 @@ 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, InlineAlert, Modal, SidebarLayout, Slideover, StackedLayout, Popover, PopoverContent, PopoverPosition, // Type export
+export { ActionsButtonGroup, ActionsDropdown, Cards, ContentModal, DateFilter, DetailList, DownloadCell, Flash, InlineAlert, Modal, SidebarLayout, Slideover, StackedLayout, Popover, PopoverContent, PopoverPosition, // Type export
 Paginator, Spinner, DataTable, Steps, DynamicTable, Tabs, TablePaginator, Toggle, Tooltip, BaseInput, Checkbox, DateRangePicker, DateTime, InputError, InputHelp, InputLabel, FieldsetLegend, MultiCheckboxes, NumberInput, Radio, RadioCards, Select, TextArea, YesOrNoRadio, XYSpinner, ProgressCircles, ProgressCirclesLabeled, };
 /**
  * declare global component types for App.use(Trees)
  */
 export interface TreesComponents {
+    ActionsButtonGroup: typeof ActionsButtonGroup;
     ActionsDropdown: typeof ActionsDropdown;
     Cards: typeof Cards;
     ContentModal: typeof ContentModal;

package/types/lib-components/navigation/ActionsButtonGroup.vue.d.ts

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

package/types/lib-components/navigation/ActionsDropdown.vue.d.ts

@@ -1,11 +1,12 @@
-import type { ActionItem } from "../../composables/nav";
-import type { Placement } from "@floating-ui/vue";
+import { type ActionItems } from "../../composables/nav";
 type __VLS_Props = {
-    actions?: ActionItem[];
-    placement?: Placement;
+    actions?: ActionItems;
+    hideOnEmpty?: boolean;
+    label?: string;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    actions: ActionItem[];
-    placement: Placement;
+    label: string;
+    actions: ActionItems;
+    hideOnEmpty: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -18,8 +18,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     onSubmit?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {
-    disabled: boolean;
     title: string;
+    disabled: boolean;
     destructive: boolean;
     wide: boolean;
     submitText: string;