nuxt-ui-tools 0.1.0 → 0.1.2

package/dist/runtime/table/components/data-list/DataListContent.d.vue.ts

@@ -6,31 +6,38 @@ type __VLS_Props = {
     ui?: DataListContentUi;
 };
 declare function refresh(): void;
+declare function clearQuery(): void;
 declare var __VLS_1: {}, __VLS_4: "loading" | "initial-loading", __VLS_5: {
     layout: "table" | "grid";
 }, __VLS_7: {
     error: {};
     retry: typeof refresh;
-}, __VLS_9: {
+}, __VLS_22: {
     layout: "table" | "grid";
     refresh: typeof refresh;
-}, __VLS_11: {
+    hasActiveQuery: boolean;
+    clearQuery: typeof clearQuery;
+}, __VLS_24: {
     layout: "table" | "grid";
     rows: object[];
     loading: boolean;
     empty: boolean;
     error: unknown;
-}, __VLS_19: {
+}, __VLS_32: {
     rows: object[];
-}, __VLS_28: {}, __VLS_30: {
+}, __VLS_41: {}, __VLS_43: {
     layout: string;
     refresh: typeof refresh;
-}, __VLS_32: {
+    hasActiveQuery: boolean;
+    clearQuery: typeof clearQuery;
+}, __VLS_45: {
     rows: object[];
-}, __VLS_41: {}, __VLS_43: {
+}, __VLS_54: {}, __VLS_56: {
     layout: string;
     refresh: typeof refresh;
-}, __VLS_45: {}, __VLS_47: {};
+    hasActiveQuery: boolean;
+    clearQuery: typeof clearQuery;
+}, __VLS_58: {}, __VLS_60: {};
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_4>]?: (props: typeof __VLS_5) => any;
 } & {
@@ -38,25 +45,25 @@ type __VLS_Slots = {} & {
 } & {
     error?: (props: typeof __VLS_7) => any;
 } & {
-    empty?: (props: typeof __VLS_9) => any;
+    empty?: (props: typeof __VLS_22) => any;
 } & {
-    content?: (props: typeof __VLS_11) => any;
+    content?: (props: typeof __VLS_24) => any;
 } & {
-    table?: (props: typeof __VLS_19) => any;
+    table?: (props: typeof __VLS_32) => any;
 } & {
-    'empty-table'?: (props: typeof __VLS_28) => any;
+    'empty-table'?: (props: typeof __VLS_41) => any;
 } & {
-    empty?: (props: typeof __VLS_30) => any;
+    empty?: (props: typeof __VLS_43) => any;
 } & {
-    grid?: (props: typeof __VLS_32) => any;
+    grid?: (props: typeof __VLS_45) => any;
 } & {
-    'empty-grid'?: (props: typeof __VLS_41) => any;
+    'empty-grid'?: (props: typeof __VLS_54) => any;
 } & {
-    empty?: (props: typeof __VLS_43) => any;
+    empty?: (props: typeof __VLS_56) => any;
 } & {
-    refreshing?: (props: typeof __VLS_45) => any;
+    refreshing?: (props: typeof __VLS_58) => any;
 } & {
-    after?: (props: typeof __VLS_47) => any;
+    after?: (props: typeof __VLS_60) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     transition: boolean;

package/dist/runtime/table/components/data-list/DataListContent.vue

@@ -1,4 +1,6 @@
 <script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import UIcon from "@nuxt/ui/components/Icon.vue";
 import { computed, nextTick, ref, watch } from "vue";
 import { useUiToolsLocale } from "#ui-tools/i18n";
 import { useDataListUi } from "../../composables/use-data-list-ui";
@@ -24,6 +26,9 @@ const loading = computed(
 );
 const error = computed(() => rows.value.length ? null : internals.queryContent.error.value);
 const empty = computed(() => !loading.value && !error.value && rows.value.length === 0);
+const hasActiveQuery = computed(
+  () => internals.filters.hasActiveSearch.value || internals.filters.hasActiveUiFilters.value
+);
 const refreshing = computed(
   () => rows.value.length > 0 && (internals.queryContent.status.value.isRefreshing || internals.queryContent.status.value.isRevalidating)
 );
@@ -42,6 +47,10 @@ const shellClass = computed(
 function refresh() {
   void internals.queryContent.refreshData()();
 }
+function clearQuery() {
+  internals.filters.searchQuery.value = "";
+  internals.filters.clearAllFilters();
+}
 watch(
   () => internals.controls.tableLayout.value,
   () => {
@@ -87,31 +96,61 @@ watch(
   )
 "
       >
-        <div :class="mergeDataListUiClass('grid max-w-sm gap-3', rootUi?.errorBody, ui?.errorBody)">
-          <div
+        <div
+          :class="
+  mergeDataListUiClass(
+    'flex max-w-md items-start gap-3 text-left',
+    rootUi?.errorBody,
+    ui?.errorBody
+  )
+"
+        >
+          <span
             :class="
+  mergeDataListUiClass(
+    'grid size-9 shrink-0 place-items-center rounded-md bg-error/10 text-error',
+    rootUi?.errorIcon,
+    ui?.errorIcon
+  )
+"
+          >
+            <UIcon name="i-lucide-cloud-alert" class="size-4" />
+          </span>
+          <div :class="mergeDataListUiClass('min-w-0 flex-1', rootUi?.errorCopy, ui?.errorCopy)">
+            <div
+              :class="
   mergeDataListUiClass(
     'font-medium text-highlighted',
     rootUi?.errorTitle,
     ui?.errorTitle
   )
 "
-          >
-            {{ t("table.states.gridError.title") }}
-          </div>
-          <button
-            type="button"
-            :class="
+            >
+              {{ t("table.states.gridError.title") }}
+            </div>
+            <p
+              :class="
   mergeDataListUiClass(
-    'mx-auto rounded-md border border-default px-3 py-1.5 text-sm text-default hover:bg-elevated',
-    rootUi?.retry,
-    ui?.retry
+    'mt-0.5 text-sm leading-5 text-muted',
+    rootUi?.errorDescription,
+    ui?.errorDescription
   )
 "
-            @click="refresh"
-          >
-            {{ t("table.states.gridError.action") }}
-          </button>
+            >
+              {{ t("table.states.gridError.description") }}
+            </p>
+            <UButton
+              color="neutral"
+              variant="soft"
+              size="sm"
+              icon="i-lucide-refresh-cw"
+              class="mt-3"
+              :ui="{ base: mergeDataListUiClass(rootUi?.retry, ui?.retry) }"
+              @click="refresh"
+            >
+              {{ t("table.states.gridError.action") }}
+            </UButton>
+          </div>
         </div>
       </div>
     </slot>
@@ -120,6 +159,8 @@ watch(
       name="empty"
       :layout="internals.controls.tableLayout.value"
       :refresh="refresh"
+      :has-active-query="hasActiveQuery"
+      :clear-query="clearQuery"
     />
     <slot
       v-else
@@ -140,7 +181,13 @@ watch(
           <DataListTable>
             <template #empty>
               <slot name="empty-table">
-                <slot name="empty" :layout="'table'" :refresh="refresh" />
+                <slot
+                  name="empty"
+                  :layout="'table'"
+                  :refresh="refresh"
+                  :has-active-query="hasActiveQuery"
+                  :clear-query="clearQuery"
+                />
               </slot>
             </template>
           </DataListTable>
@@ -149,7 +196,13 @@ watch(
           <DataListGrid>
             <template #empty>
               <slot name="empty-grid">
-                <slot name="empty" :layout="'grid'" :refresh="refresh" />
+                <slot
+                  name="empty"
+                  :layout="'grid'"
+                  :refresh="refresh"
+                  :has-active-query="hasActiveQuery"
+                  :clear-query="clearQuery"
+                />
               </slot>
             </template>
           </DataListGrid>

package/dist/runtime/table/components/data-list/DataListContent.vue.d.ts

@@ -6,31 +6,38 @@ type __VLS_Props = {
     ui?: DataListContentUi;
 };
 declare function refresh(): void;
+declare function clearQuery(): void;
 declare var __VLS_1: {}, __VLS_4: "loading" | "initial-loading", __VLS_5: {
     layout: "table" | "grid";
 }, __VLS_7: {
     error: {};
     retry: typeof refresh;
-}, __VLS_9: {
+}, __VLS_22: {
     layout: "table" | "grid";
     refresh: typeof refresh;
-}, __VLS_11: {
+    hasActiveQuery: boolean;
+    clearQuery: typeof clearQuery;
+}, __VLS_24: {
     layout: "table" | "grid";
     rows: object[];
     loading: boolean;
     empty: boolean;
     error: unknown;
-}, __VLS_19: {
+}, __VLS_32: {
     rows: object[];
-}, __VLS_28: {}, __VLS_30: {
+}, __VLS_41: {}, __VLS_43: {
     layout: string;
     refresh: typeof refresh;
-}, __VLS_32: {
+    hasActiveQuery: boolean;
+    clearQuery: typeof clearQuery;
+}, __VLS_45: {
     rows: object[];
-}, __VLS_41: {}, __VLS_43: {
+}, __VLS_54: {}, __VLS_56: {
     layout: string;
     refresh: typeof refresh;
-}, __VLS_45: {}, __VLS_47: {};
+    hasActiveQuery: boolean;
+    clearQuery: typeof clearQuery;
+}, __VLS_58: {}, __VLS_60: {};
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_4>]?: (props: typeof __VLS_5) => any;
 } & {
@@ -38,25 +45,25 @@ type __VLS_Slots = {} & {
 } & {
     error?: (props: typeof __VLS_7) => any;
 } & {
-    empty?: (props: typeof __VLS_9) => any;
+    empty?: (props: typeof __VLS_22) => any;
 } & {
-    content?: (props: typeof __VLS_11) => any;
+    content?: (props: typeof __VLS_24) => any;
 } & {
-    table?: (props: typeof __VLS_19) => any;
+    table?: (props: typeof __VLS_32) => any;
 } & {
-    'empty-table'?: (props: typeof __VLS_28) => any;
+    'empty-table'?: (props: typeof __VLS_41) => any;
 } & {
-    empty?: (props: typeof __VLS_30) => any;
+    empty?: (props: typeof __VLS_43) => any;
 } & {
-    grid?: (props: typeof __VLS_32) => any;
+    grid?: (props: typeof __VLS_45) => any;
 } & {
-    'empty-grid'?: (props: typeof __VLS_41) => any;
+    'empty-grid'?: (props: typeof __VLS_54) => any;
 } & {
-    empty?: (props: typeof __VLS_43) => any;
+    empty?: (props: typeof __VLS_56) => any;
 } & {
-    refreshing?: (props: typeof __VLS_45) => any;
+    refreshing?: (props: typeof __VLS_58) => any;
 } & {
-    after?: (props: typeof __VLS_47) => any;
+    after?: (props: typeof __VLS_60) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     transition: boolean;

package/dist/runtime/table/components/data-list/DataListDefault.d.vue.ts

@@ -15,6 +15,8 @@ declare var __VLS_1: {}, __VLS_13: {}, __VLS_42: {
 }, __VLS_51: {
     layout: string;
     refresh: () => void;
+    hasActiveQuery: boolean;
+    clearQuery: () => void;
 }, __VLS_54: {}, __VLS_57: {}, __VLS_60: {}, __VLS_70: {
     loadedCount: number;
 }, __VLS_73: {

package/dist/runtime/table/components/data-list/DataListDefault.vue.d.ts

@@ -15,6 +15,8 @@ declare var __VLS_1: {}, __VLS_13: {}, __VLS_42: {
 }, __VLS_51: {
     layout: string;
     refresh: () => void;
+    hasActiveQuery: boolean;
+    clearQuery: () => void;
 }, __VLS_54: {}, __VLS_57: {}, __VLS_60: {}, __VLS_70: {
     loadedCount: number;
 }, __VLS_73: {

package/dist/runtime/table/components/data-list/DataListFilterTags.d.vue.ts

@@ -14,6 +14,8 @@ declare var __VLS_1: {
     close: () => void;
     toggle: () => void;
     openState: boolean;
+    stage: "editor" | "match-mode" | "picker";
+    definition: import("../../types/index.js").TableUiFilterDefinition | undefined;
     triggerProps: {
         type: string;
         'aria-expanded': boolean;

package/dist/runtime/table/components/data-list/DataListFilterTags.vue.d.ts

@@ -14,6 +14,8 @@ declare var __VLS_1: {
     close: () => void;
     toggle: () => void;
     openState: boolean;
+    stage: "editor" | "match-mode" | "picker";
+    definition: import("../../types/index.js").TableUiFilterDefinition | undefined;
     triggerProps: {
         type: string;
         'aria-expanded': boolean;

package/dist/runtime/table/components/data-list/DataListInfiniteLoader.d.vue.ts

@@ -17,7 +17,7 @@ declare var __VLS_1: {
 }, __VLS_14: {
     loadMore: () => Promise<import("@tanstack/vue-query").InfiniteQueryObserverRefetchErrorResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverSuccessResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverLoadingErrorResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverPendingResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverPlaceholderResult<unknown, unknown> | undefined>;
     state: {
-        mode: "none" | "offset" | "cursor";
+        mode: "offset" | "cursor" | "none";
         pageIndex: number;
         pageSize: number;
         pageCount: number;

package/dist/runtime/table/components/data-list/DataListInfiniteLoader.vue.d.ts

@@ -17,7 +17,7 @@ declare var __VLS_1: {
 }, __VLS_14: {
     loadMore: () => Promise<import("@tanstack/vue-query").InfiniteQueryObserverRefetchErrorResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverSuccessResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverLoadingErrorResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverPendingResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverPlaceholderResult<unknown, unknown> | undefined>;
     state: {
-        mode: "none" | "offset" | "cursor";
+        mode: "offset" | "cursor" | "none";
         pageIndex: number;
         pageSize: number;
         pageCount: number;

package/dist/runtime/table/components/data-list/DataListLayoutSwitch.vue

@@ -1,6 +1,7 @@
 <script setup>
 import UButton from "@nuxt/ui/components/Button.vue";
 import UFieldGroup from "@nuxt/ui/components/FieldGroup.vue";
+import UTooltip from "@nuxt/ui/components/Tooltip.vue";
 import { computed } from "vue";
 import { useUiToolsLocale } from "#ui-tools/i18n";
 import { useDataListUi } from "../../composables/use-data-list-ui";
@@ -37,24 +38,29 @@ function setLayout(layout) {
       :size="resolvedSize"
       :class="resolvedUi.root"
     >
-      <UButton
+      <UTooltip
         v-for="layout in order"
         :key="layout"
-        color="neutral"
-        :variant="internals.controls.tableLayout.value === layout ? 'subtle' : 'outline'"
-        :size="resolvedSize"
-        :icon="layout === 'table' ? 'i-lucide-table-properties' : 'i-lucide-layout-grid'"
-        :label="labels ? layout === 'table' ? 'Table' : 'Grid' : void 0"
-        :aria-label="layout === 'table' ? t('table.header.tableView') : t('table.header.gridView')"
-        :title="layout === 'table' ? t('table.header.tableView') : t('table.header.gridView')"
-        :ui="{
+        :text="layout === 'table' ? t('table.header.tableView') : t('table.header.gridView')"
+      >
+        <UButton
+          color="neutral"
+          :variant="internals.controls.tableLayout.value === layout ? 'subtle' : 'outline'"
+          :size="resolvedSize"
+          :icon="layout === 'table' ? 'i-lucide-table-properties' : 'i-lucide-layout-grid'"
+          :label="labels ? layout === 'table' ? 'Table' : 'Grid' : void 0"
+          :aria-label="
+  layout === 'table' ? t('table.header.tableView') : t('table.header.gridView')
+"
+          :ui="{
   base: resolvedUi.trigger,
   label: resolvedUi.triggerLabel,
   leadingIcon: resolvedUi.triggerLeadingIcon,
   trailingIcon: resolvedUi.triggerTrailingIcon
 }"
-        @click="setLayout(layout)"
-      />
+          @click="setLayout(layout)"
+        />
+      </UTooltip>
     </UFieldGroup>
   </slot>
 </template>

package/dist/runtime/table/components/data-list/DataListPagination.d.vue.ts

@@ -5,7 +5,7 @@ type __VLS_Props = {
 };
 declare var __VLS_1: {
     state: {
-        mode: "none" | "offset" | "cursor";
+        mode: "offset" | "cursor" | "none";
         pageIndex: number;
         pageSize: number;
         pageCount: number;

package/dist/runtime/table/components/data-list/DataListPagination.vue.d.ts

@@ -5,7 +5,7 @@ type __VLS_Props = {
 };
 declare var __VLS_1: {
     state: {
-        mode: "none" | "offset" | "cursor";
+        mode: "offset" | "cursor" | "none";
         pageIndex: number;
         pageSize: number;
         pageCount: number;

package/dist/runtime/table/components/data-list/DataListRoot.vue

@@ -4,6 +4,7 @@ import { computed, onBeforeUnmount, onMounted } from "vue";
 import { provideUiToolsLocale, useUiToolsLocaleRef } from "#ui-tools/i18n";
 import { provideDataListUi } from "../../composables/use-data-list-ui";
 import { provideTableInternals } from "../../composables/use-table-internals";
+import { mergeDataListUiConfig } from "../../utils";
 const props = defineProps({
   table: { type: Object, required: true },
   locale: { type: Object, required: false },
@@ -15,7 +16,7 @@ provideTableInternals(props.table.__internals);
 provideUiToolsLocale(useUiToolsLocaleRef(computed(() => props.locale)));
 provideDataListUi(
   computed(
-    () => mergeDataListUi(resolveAppDataListUi(appConfig), props.ui, props.density)
+    () => mergeDataListUiConfig(resolveAppDataListUi(appConfig), props.ui, props.density)
   )
 );
 onMounted(() => props.table.__internals.startup.scheduleStart());
@@ -29,51 +30,6 @@ function resolveAppDataListUi(config) {
 function isDataListUiConfig(value) {
   return Boolean(value) && typeof value === "object";
 }
-function mergeDataListUi(appUi, componentUi, density) {
-  return {
-    ...appUi,
-    ...componentUi,
-    density: density ?? componentUi?.density ?? appUi?.density,
-    control: { ...appUi?.control, ...componentUi?.control },
-    default: mergeUiConfig(appUi?.default, componentUi?.default),
-    search: mergeSearchConfig(appUi?.search, componentUi?.search),
-    filterTags: mergePartConfig(appUi?.filterTags, componentUi?.filterTags),
-    addFilter: mergePartConfig(appUi?.addFilter, componentUi?.addFilter),
-    filterPanel: mergePartConfig(appUi?.filterPanel, componentUi?.filterPanel),
-    clearFilters: mergePartConfig(appUi?.clearFilters, componentUi?.clearFilters),
-    resultCount: mergeUiConfig(appUi?.resultCount, componentUi?.resultCount),
-    columnPanel: mergePartConfig(appUi?.columnPanel, componentUi?.columnPanel),
-    sortMenu: mergePartConfig(appUi?.sortMenu, componentUi?.sortMenu),
-    layoutSwitch: mergePartConfig(appUi?.layoutSwitch, componentUi?.layoutSwitch),
-    refresh: mergePartConfig(appUi?.refresh, componentUi?.refresh),
-    content: mergeUiConfig(appUi?.content, componentUi?.content),
-    table: mergeUiConfig(appUi?.table, componentUi?.table),
-    grid: mergeUiConfig(appUi?.grid, componentUi?.grid),
-    pagination: mergePartConfig(appUi?.pagination, componentUi?.pagination),
-    infiniteLoader: mergePartConfig(appUi?.infiniteLoader, componentUi?.infiniteLoader)
-  };
-}
-function mergeUiConfig(appDefaults, componentConfig) {
-  return {
-    ...appDefaults,
-    ...componentConfig,
-    ui: { ...appDefaults?.ui, ...componentConfig?.ui }
-  };
-}
-function mergePartConfig(appDefaults, componentConfig) {
-  return {
-    ...appDefaults,
-    ...componentConfig,
-    ui: { ...appDefaults?.ui, ...componentConfig?.ui }
-  };
-}
-function mergeSearchConfig(appDefaults, componentConfig) {
-  return {
-    ...appDefaults,
-    ...componentConfig,
-    ui: { ...appDefaults?.ui, ...componentConfig?.ui }
-  };
-}
 </script>
 
 <template>

package/dist/runtime/table/components/data-list/DataListSortMenu.d.vue.ts

@@ -8,7 +8,7 @@ declare var __VLS_8: {
     label: string | null;
     sorting: {
         key: string | undefined;
-        dir: "desc" | "asc" | undefined;
+        dir: "asc" | "desc" | undefined;
         active: boolean;
     };
     setSorting: (sorting: {

package/dist/runtime/table/components/data-list/DataListSortMenu.vue

@@ -33,6 +33,10 @@ const sortLabels = computed(() => {
   return labels;
 });
 const activeKey = computed(() => internals.tableColumns.sortingState.value.key);
+const activeDirection = computed(() => internals.tableColumns.sortingState.value.dir);
+const directionIcon = computed(
+  () => activeDirection.value === "asc" ? "i-lucide-arrow-up-narrow-wide" : "i-lucide-arrow-down-wide-narrow"
+);
 const sortKeys = computed(() => [
   .../* @__PURE__ */ new Set([
     ...internals.tableColumns.sortKeys.value,
@@ -68,6 +72,7 @@ function humanize(value) {
 
 <template>
   <UDropdownMenu
+    :size="resolvedSize"
     :items="items"
     :content="{ align: 'end', sideOffset: 8 }"
     :ui="{
@@ -91,6 +96,7 @@ function humanize(value) {
         variant="outline"
         :size="resolvedSize"
         :label="`${label ?? t('table.controls.sort')}${activeLabel ? `: ${activeLabel}` : ''}`"
+        :icon="directionIcon"
         trailing-icon="i-lucide-chevron-down"
         :ui="{
   base: resolvedUi.trigger,

package/dist/runtime/table/components/data-list/DataListSortMenu.vue.d.ts

@@ -8,7 +8,7 @@ declare var __VLS_8: {
     label: string | null;
     sorting: {
         key: string | undefined;
-        dir: "desc" | "asc" | undefined;
+        dir: "asc" | "desc" | undefined;
         active: boolean;
     };
     setSorting: (sorting: {

package/dist/runtime/table/components/filters/shared/DynamicFilterPicker.d.vue.ts

@@ -1,6 +1,7 @@
 import type { DataListAddFilterUi, DataListControlSize, TableUiFilterDefinition } from '../../../types/index.js';
 type __VLS_Props = {
     definitions: TableUiFilterDefinition[];
+    sessionDefinition?: TableUiFilterDefinition;
     getLabel: (definition: TableUiFilterDefinition) => string;
     size?: DataListControlSize;
     ui?: DataListAddFilterUi;
@@ -13,6 +14,8 @@ declare var __VLS_10: {
     close: typeof close;
     toggle: typeof toggle;
     openState: boolean;
+    stage: "editor" | "match-mode" | "picker";
+    definition: TableUiFilterDefinition | undefined;
     triggerProps: {
         type: string;
         'aria-expanded': boolean;
@@ -23,8 +26,10 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (key: string) => any;
+    release: (key: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSelect?: ((key: string) => any) | undefined;
+    onRelease?: ((key: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;