nuxt-ui-tools 1.0.0 → 1.1.0

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

@@ -1,13 +1,5 @@
-import type { ComputedRef } from 'vue';
 import type { UiToolsLocale, UiToolsMessages } from '#ui-tools/i18n';
-import type { TableInternals } from '../composables/use-table-internals.js';
-import type { DataListControlSize, DataListDensity, DataListUiConfig } from '../types/index.js';
-interface DataListTable {
-    schema: ComputedRef<{
-        tableKey: string;
-    }>;
-    __internals: TableInternals;
-}
+import type { DataListControlSize, DataListDensity, DataListTable, DataListUiConfig } from '../types/index.js';
 type __VLS_Props = {
     table: DataListTable;
     title?: string;
@@ -27,10 +19,7 @@ declare var __VLS_15: {}, __VLS_18: {}, __VLS_21: {
     layout: import("../types/index.js").TableLayout;
 }, __VLS_33: {
     layout: import("../types/index.js").TableLayout;
-}, __VLS_36: {
-    error: {};
-    retry: () => void;
-}, __VLS_39: {
+}, __VLS_36: any, __VLS_39: {
     loadedCount: number;
 }, __VLS_42: {
     error: {};

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

@@ -1,13 +1,5 @@
-import type { ComputedRef } from 'vue';
 import type { UiToolsLocale, UiToolsMessages } from '#ui-tools/i18n';
-import type { TableInternals } from '../composables/use-table-internals.js';
-import type { DataListControlSize, DataListDensity, DataListUiConfig } from '../types/index.js';
-interface DataListTable {
-    schema: ComputedRef<{
-        tableKey: string;
-    }>;
-    __internals: TableInternals;
-}
+import type { DataListControlSize, DataListDensity, DataListTable, DataListUiConfig } from '../types/index.js';
 type __VLS_Props = {
     table: DataListTable;
     title?: string;
@@ -27,10 +19,7 @@ declare var __VLS_15: {}, __VLS_18: {}, __VLS_21: {
     layout: import("../types/index.js").TableLayout;
 }, __VLS_33: {
     layout: import("../types/index.js").TableLayout;
-}, __VLS_36: {
-    error: {};
-    retry: () => void;
-}, __VLS_39: {
+}, __VLS_36: any, __VLS_39: {
     loadedCount: number;
 }, __VLS_42: {
     error: {};

package/dist/runtime/table/components/drawers/column-panel.vue

@@ -9,6 +9,7 @@ import { computed } from "vue";
 import { VueDraggable } from "vue-draggable-plus";
 import { useUiToolsLocale } from "#ui-tools/i18n";
 import { isNumber } from "../../../shared/utils/predicate";
+import { useDataListBreakpoint } from "../../composables/use-data-list-breakpoint";
 import { useDataListUi } from "../../composables/use-data-list-ui";
 import { useTableInternals } from "../../composables/use-table-internals";
 import {
@@ -24,6 +25,7 @@ const props = defineProps({
 });
 const internals = useTableInternals();
 const dataListUi = useDataListUi();
+const { isMobile } = useDataListBreakpoint();
 const { t } = useUiToolsLocale();
 const ui = computed(() => ({
   ...dataListUi.ui.value.columnPanel?.ui,
@@ -41,15 +43,16 @@ const triggerProps = computed(
     {
       color: "neutral",
       icon: "i-lucide-layers",
-      label: t("table.controls.view"),
+      label: isMobile.value ? void 0 : t("table.controls.view"),
       size: resolvedSize.value,
+      square: isMobile.value,
       variant: "outline"
     },
     controlProps.value.trigger
   )
 );
 const countProps = computed(
-  () => controlProps.value.count === false ? null : controlProps.value.count ? mergeDataListProps(
+  () => isMobile.value || controlProps.value.count === false ? null : controlProps.value.count ? mergeDataListProps(
     { color: "neutral", size: resolvedSize.value, variant: "subtle" },
     controlProps.value.count
   ) : null
@@ -159,6 +162,8 @@ function toggle() {
     >
       <UButton
         v-bind="triggerProps"
+        :aria-label="t('table.controls.view')"
+        :title="t('table.controls.view')"
         :ui="{ base: mergeDataListUiClass('nut-dl-colbtn', void 0, ui.trigger) }"
       >
         <template v-if="countProps" #trailing>

package/dist/runtime/table/components/filters/panel/filter-panel-chips.vue

@@ -63,11 +63,8 @@ const CHIP_ACTIVE = "nut-dl-chip--active border-primary/25 bg-primary/10 text-[v
         class="nut-dl-skeleton inline-block h-2.5 w-4 rounded"
         aria-hidden="true"
       />
-      <small
-        v-else-if="showCounts && entry.count != null"
-        class="nut-dl-chip__count text-[11px] text-dimmed tabular-nums"
-      >
-        {{ entry.count }}
+      <small v-else-if="showCounts" class="nut-dl-chip__count text-[11px] text-dimmed tabular-nums">
+        {{ entry.count ?? 0 }}
       </small>
     </button>
   </div>

package/dist/runtime/table/components/filters/panel/option-filter-panel-field.vue

@@ -141,7 +141,7 @@ function isPrimitiveValue(value) {
       :entries="chipEntries"
       :loading="state.optionSource.isLoading.value"
       :count-loading="state.optionSource.isCountLoading.value"
-      :show-counts="state.filterUi.value.row.showCounts"
+      :show-counts="state.optionSource.showCounts.value"
       :ui="ui"
       @toggle="state.toggleValue"
     />

package/dist/runtime/table/components/filters/shared/dynamic-filter-picker.d.vue.ts

@@ -9,7 +9,7 @@ type __VLS_Props = {
 declare function open(): void;
 declare function close(): void;
 declare function toggle(): void;
-declare var __VLS_10: {
+declare var __VLS_9: {
     open: typeof open;
     close: typeof close;
     toggle: typeof toggle;
@@ -22,7 +22,7 @@ declare var __VLS_10: {
     };
 };
 type __VLS_Slots = {} & {
-    trigger?: (props: typeof __VLS_10) => any;
+    trigger?: (props: typeof __VLS_9) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (key: string) => any;

package/dist/runtime/table/components/filters/shared/dynamic-filter-picker.vue

@@ -156,16 +156,17 @@ function toggle() {
 </script>
 
 <template>
-  <UPopover
-    :open="isOpen"
-    mode="click"
-    :content="{
+  <div class="contents">
+    <UPopover
+      :open="isOpen"
+      mode="click"
+      :content="{
   side: 'bottom',
   align: 'start',
   sideOffset: 8,
   onFocusOutside: handleFocusOutside
 }"
-    :ui="{
+      :ui="{
   content: resolveDataListPopoverContentClass(
     'fit',
     mergeDataListUiClass(
@@ -175,32 +176,32 @@ function toggle() {
     )
   )
 }"
-    @update:open="handleOpenChange"
-  >
-    <slot
-      v-if="$slots.trigger"
-      name="trigger"
-      :open="open"
-      :close="close"
-      :toggle="toggle"
-      :open-state="isOpen"
-      :stage="stage"
-      :definition="selectedDefinition"
-      :trigger-props="{
+      @update:open="handleOpenChange"
+    >
+      <slot
+        v-if="$slots.trigger"
+        name="trigger"
+        :open="open"
+        :close="close"
+        :toggle="toggle"
+        :open-state="isOpen"
+        :stage="stage"
+        :definition="selectedDefinition"
+        :trigger-props="{
   type: 'button',
   'aria-expanded': isOpen
 }"
-    />
-    <UButton
-      v-else
-      v-bind="triggerProps"
-      :icon="
+      />
+      <UButton
+        v-else
+        v-bind="triggerProps"
+        :icon="
   selectedDefinition ? dataListUi.ui.value.filterTags?.props?.icon === false ? void 0 : resolveFilterTriggerIcon(selectedDefinition) : 'i-lucide-plus'
 "
-      :label="
+        :label="
   selectedDefinition ? getLabel(selectedDefinition) : triggerProps.label ?? t('table.controls.addFilter')
 "
-      :ui="{
+        :ui="{
   base: mergeDataListUiClass(
     `nut-dl-tag nut-dl-tag--add shrink-0 ${selectedDefinition ? '' : 'border border-dashed border-[var(--ui-border-accented)] text-muted hover:text-default hover:border-[var(--ui-text-dimmed)]'}`,
     void 0,
@@ -208,118 +209,119 @@ function toggle() {
   ),
   leadingIcon: 'size-[13px]'
 }"
-    />
+      />
 
-    <template #content>
-      <FilterStageTransition
-        :stage-key="`${stage}:${selectedKey ?? ''}:${pendingOperator ?? ''}`"
-        :direction="stageDirection"
-        @settled="stageTransitioning = false"
-      >
-        <div
-          v-if="stage === 'picker'"
-          :class="mergeDataListUiClass(sizeClasses.editor, void 0, ui?.panel)"
+      <template #content>
+        <FilterStageTransition
+          :stage-key="`${stage}:${selectedKey ?? ''}:${pendingOperator ?? ''}`"
+          :direction="stageDirection"
+          @settled="stageTransitioning = false"
         >
           <div
-            v-if="pickerProps?.title !== false"
-            :class="
+            v-if="stage === 'picker'"
+            :class="mergeDataListUiClass(sizeClasses.editor, void 0, ui?.panel)"
+          >
+            <div
+              v-if="pickerProps?.title !== false"
+              :class="
   mergeDataListUiClass(
     'nut-dl-picker__title px-2.5 pt-2 pb-0.5 text-[11.5px] font-semibold text-muted',
     void 0,
     ui?.title
   )
 "
-          >
-            {{ t("table.controls.addFilter") }}
-          </div>
-          <FilterSearchablePanel
-            v-model:search-query="searchQuery"
-            :searchable="searchable"
-            :autofocus="searchable"
-            :search-placeholder="t('table.controls.searchFilters')"
-            :show-empty="!filteredDefinitions.length"
-            :empty-label="t('table.controls.noMatchingFilters')"
-            max-height-class="max-h-72"
-            :size="size"
-            :ui="ui"
-          >
-            <button
-              v-for="definition in filteredDefinitions"
-              :key="definition.key"
-              type="button"
-              :class="
+            >
+              {{ t("table.controls.addFilter") }}
+            </div>
+            <FilterSearchablePanel
+              v-model:search-query="searchQuery"
+              :searchable="searchable"
+              :autofocus="searchable"
+              :search-placeholder="t('table.controls.searchFilters')"
+              :show-empty="!filteredDefinitions.length"
+              :empty-label="t('table.controls.noMatchingFilters')"
+              max-height-class="max-h-72"
+              :size="size"
+              :ui="ui"
+            >
+              <button
+                v-for="definition in filteredDefinitions"
+                :key="definition.key"
+                type="button"
+                :class="
   mergeDataListUiClass(
     `flex min-w-0 items-center rounded-md text-left outline-none transition-colors hover:bg-elevated/70 focus-visible:ring-2 focus-visible:ring-primary/40 ${sizeClasses.option}`,
     void 0,
     ui?.option
   )
 "
-              @click="handleSelect(definition.key)"
-            >
-              <UIcon
-                :name="
+                @click="handleSelect(definition.key)"
+              >
+                <UIcon
+                  :name="
   pickerProps?.icon === 'kind' ? resolveFilterTriggerIcon(definition) : 'i-lucide-plus'
 "
-                :class="
+                  :class="
   mergeDataListUiClass(
     `${sizeClasses.optionIcon} shrink-0 text-muted`,
     void 0,
     ui?.optionIcon
   )
 "
-              />
-              <span
-                :class="
+                />
+                <span
+                  :class="
   mergeDataListUiClass(
     `min-w-0 flex-1 truncate text-default ${sizeClasses.optionLabel}`,
     void 0,
     ui?.optionLabel
   )
 "
-              >
-                {{ getLabel(definition) }}
-              </span>
-              <span
-                :class="
+                >
+                  {{ getLabel(definition) }}
+                </span>
+                <span
+                  :class="
   mergeDataListUiClass(
     'inline-flex shrink-0 items-center text-dimmed',
     void 0,
     ui?.optionTrailingIcon
   )
 "
-              >
-                <UIcon name="i-lucide-chevron-right" :class="geometry.icon" />
-              </span>
-            </button>
-          </FilterSearchablePanel>
-        </div>
+                >
+                  <UIcon name="i-lucide-chevron-right" :class="geometry.icon" />
+                </span>
+              </button>
+            </FilterSearchablePanel>
+          </div>
 
-        <div
-          v-else-if="stage === 'match-mode'"
-          :class="mergeDataListUiClass(sizeClasses.editor, void 0, ui?.panel)"
-        >
-          <FilterMatchModePanel
-            :items="operatorItems"
-            :selected="pendingOperator"
-            :size="size"
-            :ui="ui"
-            @select="openEditor"
-          />
-        </div>
+          <div
+            v-else-if="stage === 'match-mode'"
+            :class="mergeDataListUiClass(sizeClasses.editor, void 0, ui?.panel)"
+          >
+            <FilterMatchModePanel
+              :items="operatorItems"
+              :selected="pendingOperator"
+              :size="size"
+              :ui="ui"
+              @select="openEditor"
+            />
+          </div>
 
-        <component
-          :is="resolveFilterTagComponent(sessionDefinition)"
-          v-else-if="stage === 'editor' && sessionDefinition"
-          :definition="sessionDefinition"
-          dynamic
-          session
-          embedded
-          :initial-operator="pendingOperator"
-          @dismiss="handleSessionClosed"
-          @session-closed="handleSessionClosed"
-          @back="goBack"
-        />
-      </FilterStageTransition>
-    </template>
-  </UPopover>
+          <component
+            :is="resolveFilterTagComponent(sessionDefinition)"
+            v-else-if="stage === 'editor' && sessionDefinition"
+            :definition="sessionDefinition"
+            dynamic
+            session
+            embedded
+            :initial-operator="pendingOperator"
+            @dismiss="handleSessionClosed"
+            @session-closed="handleSessionClosed"
+            @back="goBack"
+          />
+        </FilterStageTransition>
+      </template>
+    </UPopover>
+  </div>
 </template>

package/dist/runtime/table/components/filters/shared/dynamic-filter-picker.vue.d.ts

@@ -9,7 +9,7 @@ type __VLS_Props = {
 declare function open(): void;
 declare function close(): void;
 declare function toggle(): void;
-declare var __VLS_10: {
+declare var __VLS_9: {
     open: typeof open;
     close: typeof close;
     toggle: typeof toggle;
@@ -22,7 +22,7 @@ declare var __VLS_10: {
     };
 };
 type __VLS_Slots = {} & {
-    trigger?: (props: typeof __VLS_10) => any;
+    trigger?: (props: typeof __VLS_9) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (key: string) => any;

package/dist/runtime/table/components/filters/shared/filter-match-mode-button.d.vue.ts

@@ -15,11 +15,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSelect?: ((value: TableFilterOperator) => any) | undefined;
 }>, {
-    variant: "default" | "compact";
     items: {
         label: string;
         value: TableFilterOperator;
     }[];
+    variant: "default" | "compact";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/table/components/filters/shared/filter-match-mode-button.vue.d.ts

@@ -15,11 +15,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSelect?: ((value: TableFilterOperator) => any) | undefined;
 }>, {
-    variant: "default" | "compact";
     items: {
         label: string;
         value: TableFilterOperator;
     }[];
+    variant: "default" | "compact";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/table/components/filters/shared/filter-option-multiple-list.vue

@@ -104,10 +104,10 @@ const geometry = computed(() => resolveDataListControlGeometry(size.value));
           :class="[sizeClasses.skeletonCount, 'shrink-0 rounded-full']"
         />
         <span
-          v-else-if="props.showCounts && entry.count != null"
+          v-else-if="props.showCounts"
           :class="mergeDataListUiClass('shrink-0 text-muted', void 0, ui?.optionCount)"
         >
-          {{ entry.count }}
+          {{ entry.count ?? 0 }}
         </span>
       </div>
     </template>

package/dist/runtime/table/components/filters/shared/filter-option-picker-content.vue

@@ -55,7 +55,7 @@ function handleSelect(options) {
         :items="props.state.treeRadioItems.value"
         :multiple="props.state.filterUi.value.selection.mode === 'multiple'"
         :count-loading="
-  props.state.filterUi.value.row.showCounts && props.state.optionSource.isCountLoading.value
+  props.state.optionSource.showCounts.value && props.state.optionSource.isCountLoading.value
 "
         :selected-icon="props.state.filterUi.value.row.selectedIcon"
         :size="props.size"
@@ -77,7 +77,7 @@ function handleSelect(options) {
         :sections="
   props.sections ?? [{ key: 'default', entries: props.state.displayEntries.value }]
 "
-        :show-counts="props.state.filterUi.value.row.showCounts"
+        :show-counts="props.state.optionSource.showCounts.value"
         :count-loading="props.state.optionSource.isCountLoading.value"
         :selected-icon="props.state.filterUi.value.row.selectedIcon"
         :truncate="props.state.filterUi.value.row.truncate"
@@ -99,7 +99,7 @@ function handleSelect(options) {
         v-model="flatRadioValue"
         :items="props.state.flatRadioItems.value"
         :count-loading="
-  props.state.filterUi.value.row.showCounts && props.state.optionSource.isCountLoading.value
+  props.state.optionSource.showCounts.value && props.state.optionSource.isCountLoading.value
 "
         :size="props.size"
         :ui="props.ui"

package/dist/runtime/table/components/filters/shared/filter-option-single-list.vue

@@ -67,7 +67,7 @@ const modelValue = defineModel({ type: null, ...{
 "
         />
 
-        <span class="min-w-0 flex-1" :class="item.truncate ? 'truncate' : ''">
+        <span class="min-w-0 flex-1 truncate">
           {{ item.label }}
         </span>
         <USkeleton

package/dist/runtime/table/components/filters/shared/filter-popover-shell.d.vue.ts

@@ -4,13 +4,13 @@ type __VLS_Props = {
     contentClass?: string;
     transitioning?: boolean;
 };
-declare var __VLS_1: {}, __VLS_12: {}, __VLS_15: {};
+declare var __VLS_1: {}, __VLS_11: {}, __VLS_14: {};
 type __VLS_Slots = {} & {
     content?: (props: typeof __VLS_1) => any;
 } & {
-    default?: (props: typeof __VLS_12) => any;
+    default?: (props: typeof __VLS_11) => any;
 } & {
-    content?: (props: typeof __VLS_15) => any;
+    content?: (props: typeof __VLS_14) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     updateOpen: (value: boolean) => any;

package/dist/runtime/table/components/filters/shared/filter-popover-shell.vue

@@ -20,24 +20,26 @@ function handleFocusOutside(event) {
 </script>
 
 <template>
-  <template v-if="embedded">
-    <slot name="content" />
-  </template>
-  <UPopover
-    v-else
-    :open="open"
-    :content="{
+  <div class="contents">
+    <template v-if="embedded">
+      <slot name="content" />
+    </template>
+    <UPopover
+      v-else
+      :open="open"
+      :content="{
   side: 'bottom',
   align: 'start',
   sideOffset: 8,
   onFocusOutside: handleFocusOutside
 }"
-    :ui="{ content: resolvedContentClass }"
-    @update:open="emit('updateOpen', $event)"
-  >
-    <slot />
-    <template #content>
-      <slot name="content" />
-    </template>
-  </UPopover>
+      :ui="{ content: resolvedContentClass }"
+      @update:open="emit('updateOpen', $event)"
+    >
+      <slot />
+      <template #content>
+        <slot name="content" />
+      </template>
+    </UPopover>
+  </div>
 </template>

package/dist/runtime/table/components/filters/shared/filter-popover-shell.vue.d.ts

@@ -4,13 +4,13 @@ type __VLS_Props = {
     contentClass?: string;
     transitioning?: boolean;
 };
-declare var __VLS_1: {}, __VLS_12: {}, __VLS_15: {};
+declare var __VLS_1: {}, __VLS_11: {}, __VLS_14: {};
 type __VLS_Slots = {} & {
     content?: (props: typeof __VLS_1) => any;
 } & {
-    default?: (props: typeof __VLS_12) => any;
+    default?: (props: typeof __VLS_11) => any;
 } & {
-    content?: (props: typeof __VLS_15) => any;
+    content?: (props: typeof __VLS_14) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     updateOpen: (value: boolean) => any;

package/dist/runtime/table/components/filters/shared/filter-searchable-panel.vue

@@ -51,7 +51,10 @@ const sizeClasses = computed(() => resolveFilterEditorSizeClasses(size));
         variant="none"
         :autofocus="autofocus"
         :size="size"
-        :ui="{ root: ui?.search, base: ui?.searchInput }"
+        :ui="{
+  root: ui?.search,
+  base: mergeDataListUiClass('h-8', void 0, ui?.searchInput)
+}"
       />
     </div>
 
@@ -78,7 +81,12 @@ const sizeClasses = computed(() => resolveFilterEditorSizeClasses(size));
 "
       >
         <slot name="empty">
-          {{ emptyLabel }}
+          <div class="grid justify-items-center gap-2">
+            <span class="flex size-8 items-center justify-center rounded-full bg-elevated">
+              <span class="i-lucide-search-x size-4" aria-hidden="true" />
+            </span>
+            <span>{{ emptyLabel }}</span>
+          </div>
         </slot>
       </div>
     </UScrollArea>

package/dist/runtime/table/components/filters/sheet/filter-sheet.vue

@@ -98,14 +98,15 @@ function clearAll() {
   >
     <UButton
       v-bind="triggerProps"
+      :aria-label="t('table.filters.panel.trigger')"
+      :title="t('table.filters.panel.trigger')"
+      :square="!activeCount"
       :ui="{
   base: mergeDataListUiClass('nut-dl-sheet-trigger shrink-0', void 0, ui?.sheetTrigger)
 }"
     >
-      <span class="flex items-center gap-2">
-        <span>{{ t("table.filters.panel.trigger") }}</span>
+      <span v-if="activeCount" class="flex items-center">
         <UBadge
-          v-if="activeCount"
           color="neutral"
           variant="solid"
           size="xs"

package/dist/runtime/table/components/filters/tags/filter-tags-bar.vue

@@ -38,7 +38,7 @@ function getFilterLabel(definition) {
     tag="div"
     :class="
   mergeDataListUiClass(
-    'nut-dl-tags relative flex min-w-0 flex-wrap items-center gap-2',
+    'nut-dl-tags contents',
     void 0,
     dataListUi.ui.value.filterTags?.ui?.root
   )