nuxt-ui-tools 1.16.1 → 1.16.3

package/dist/module.json

@@ -5,7 +5,7 @@
   "configKey": "nuxtUiTools",
   "docs": "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
   "name": "nuxt-ui-tools",
-  "version": "1.16.1",
+  "version": "1.16.3",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/runtime/form/fields/custom-component/component.vue

@@ -11,11 +11,12 @@ const { params } = useFieldControl(
   () => props.path
 );
 const rendered = computed(() => props.field.render?.(params.value));
+const Rendered = () => rendered.value;
 </script>
 
 <template>
   <FormFieldShell :field="field" :path="path">
     <component :is="field.component" v-if="field.component" />
-    <component :is="() => rendered" v-else-if="rendered" />
+    <Rendered v-else-if="rendered" />
   </FormFieldShell>
 </template>

package/dist/runtime/table/components/data-list/data-list-selection-actions.vue

@@ -1,7 +1,8 @@
 <script setup>
 import UButton from "@nuxt/ui/components/Button.vue";
 import UDropdownMenu from "@nuxt/ui/components/DropdownMenu.vue";
-import { computed } from "vue";
+import { useResizeObserver } from "@vueuse/core";
+import { computed, nextTick, ref, useTemplateRef, watch } from "vue";
 import { useUiToolsLocale } from "#ui-tools/i18n";
 import { isString, isNullish } from "../../../shared/utils/predicate";
 import { useDataListBreakpoint } from "../../composables/use-data-list-breakpoint";
@@ -59,8 +60,13 @@ const scopeEnabled = computed(
 );
 const bulkScope = computed(() => internals.selection.bulkScope.value);
 const maxVisible = computed(() => props.maxVisible ?? (isMobile.value ? 1 : 3));
-const visibleActions = computed(() => actions.value.slice(0, maxVisible.value));
-const overflowActions = computed(() => actions.value.slice(maxVisible.value));
+const fitted = ref(Number.POSITIVE_INFINITY);
+const visibleCount = computed(() => Math.min(maxVisible.value, fitted.value));
+const visibleActions = computed(() => actions.value.slice(0, visibleCount.value));
+const overflowActions = computed(() => actions.value.slice(visibleCount.value));
+const rootElement = useTemplateRef("rootElement");
+const actionsElement = useTemplateRef("actionsElement");
+let fitting = 0;
 const overflowItems = computed(
   () => overflowActions.value.map((action) => ({
     disabled: action.state.disabled,
@@ -77,12 +83,36 @@ function formatCount(value) {
 function clearSelection() {
   internals.selection.clearSelection();
 }
+function overflowing() {
+  const strip = actionsElement.value;
+  return Boolean(strip && strip.scrollWidth > strip.clientWidth + 1);
+}
+async function fit() {
+  const run = ++fitting;
+  fitted.value = Number.POSITIVE_INFINITY;
+  await nextTick();
+  while (run === fitting && visibleCount.value > 0 && overflowing()) {
+    fitted.value = visibleCount.value - 1;
+    await nextTick();
+  }
+}
+watch(
+  () => [
+    selectedCount.value > 0,
+    maxVisible.value,
+    actions.value.map((action) => resolveTableActionLabel(action.definition.label)).join("\n")
+  ],
+  () => void fit(),
+  { flush: "post" }
+);
+useResizeObserver(rootElement, () => void fit());
 </script>
 
 <template>
   <Transition name="nut-dl-selbar">
     <div
       v-if="selectedCount > 0 && actions.length"
+      ref="rootElement"
       :class="
   mergeDataListUiClass(
     `nut-dl-selbar pointer-events-none z-40 flex justify-center px-4 ${position === 'fixed' ? 'fixed inset-x-0 bottom-4' : 'absolute inset-x-0 bottom-[22px]'}`,
@@ -163,6 +193,7 @@ function clearSelection() {
             </span>
 
             <div
+              ref="actionsElement"
               :class="
   mergeDataListUiClass(
     `nut-dl-selbar__actions flex min-w-0 items-center gap-0.5 ${scopeEnabled ? 'ml-1 pl-2' : ''}`,

package/dist/runtime/table/components/table/table-column-header.vue

@@ -76,5 +76,5 @@ function startResize(event) {
 </template>
 
 <style>
-.nut-dl-colmenu{min-width:13.5rem}.nut-dl-colmenu .nut-dl-colmenu__title{color:var(--ui-text-dimmed);font-size:11px;font-weight:600;letter-spacing:.06em;padding:.35rem .5rem .25rem;text-transform:uppercase}.nut-dl-colmenu .nut-dl-colmenu__item--active{color:var(--ui-text-highlighted);font-weight:600}.nut-dl-colmenu .nut-dl-colmenu__item--active:after{background:var(--ui-primary);border-radius:999px;content:"";flex:none;height:7px;margin-left:auto;width:7px}
+.nut-dl-colmenu{min-width:13.5rem}.nut-dl-colmenu .nut-dl-colmenu__title{font-size:11px;font-weight:600;letter-spacing:.06em;padding:.35rem .5rem .25rem;text-transform:uppercase}.nut-dl-colmenu .nut-dl-colmenu__item--active{font-weight:600}.nut-dl-colmenu .nut-dl-colmenu__item--active:after{background:var(--ui-primary);border-radius:999px;content:"";flex:none;height:7px;margin-left:auto;width:7px}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-tools",
-  "version": "1.16.1",
+  "version": "1.16.3",
   "description": "Nuxt module and runtime toolkit for UI-heavy Nuxt applications",
   "homepage": "https://github.com/ChronicStone/nuxt-ui-tools#readme",
   "bugs": "https://github.com/ChronicStone/nuxt-ui-tools/issues",