nuxt-ui-tools 0.1.3 → 1.0.0

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

@@ -0,0 +1,239 @@
+<script setup>
+import UBadge from "@nuxt/ui/components/Badge.vue";
+import UButton from "@nuxt/ui/components/Button.vue";
+import UDrawer from "@nuxt/ui/components/Drawer.vue";
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { computed, ref } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { isNullish } from "../../../../shared/utils/predicate";
+import { useDataListUi } from "../../../composables/use-data-list-ui";
+import { useTableInternals } from "../../../composables/use-table-internals";
+import {
+  getFilterLabelText,
+  mergeDataListProps,
+  mergeDataListUiClass,
+  resolveFilterTriggerIcon
+} from "../../../utils";
+import FilterStageTransition from "../shared/filter-stage-transition.vue";
+import { resolveFilterTagComponent } from "../tags/registry";
+const props = defineProps({
+  showClear: { type: Boolean, required: false, default: true }
+});
+const internals = useTableInternals();
+const dataListUi = useDataListUi();
+const { t } = useUiToolsLocale();
+const open = ref(false);
+const selectedKey = ref(null);
+const direction = ref("forward");
+const size = computed(() => dataListUi.ui.value.filterTags?.size ?? dataListUi.controlSize.value);
+const ui = computed(() => dataListUi.ui.value.filterTags?.ui);
+const controlProps = computed(() => dataListUi.ui.value.filterTags?.props);
+const triggerProps = computed(
+  () => mergeDataListProps(
+    { color: "neutral", icon: "i-lucide-funnel", size: size.value, variant: "outline" },
+    controlProps.value?.sheetTrigger
+  )
+);
+const definitions = computed(
+  () => internals.filters.definitions.value
+);
+const selectedDefinition = computed(
+  () => definitions.value.find((definition) => definition.key === selectedKey.value)
+);
+const activeCount = computed(
+  () => definitions.value.filter(
+    (definition) => !isNullish(internals.filters.getActiveFilterState({ key: definition.key }))
+  ).length
+);
+function label(definition) {
+  return getFilterLabelText({ label: definition.label });
+}
+function preview(definition) {
+  const options = definition.kind === "option" && Array.isArray(definition.source?.options) ? definition.source.options : [];
+  return internals.filters.getFilterPreview({
+    entries: options.filter((option) => option.value !== void 0).map((option) => ({
+      color: option.color,
+      icon: option.icon,
+      label: getFilterLabelText({ label: option.label }),
+      value: option.value
+    })),
+    key: definition.key
+  });
+}
+function select(definition) {
+  direction.value = "forward";
+  selectedKey.value = definition.key;
+}
+function back() {
+  direction.value = "backward";
+  selectedKey.value = null;
+}
+function close() {
+  open.value = false;
+  selectedKey.value = null;
+}
+function clearAll() {
+  internals.filters.clearAllFilters();
+  internals.filters.searchQuery.value = "";
+}
+</script>
+
+<template>
+  <UDrawer
+    v-model:open="open"
+    direction="bottom"
+    :handle="true"
+    :title="t('table.filters.panel.trigger')"
+    :ui="{
+  header: 'sr-only',
+  content: mergeDataListUiClass(
+    'nut-dl-sheet max-h-[85vh] rounded-t-[16px]',
+    void 0,
+    ui?.sheetContent
+  ),
+  container: 'gap-0 p-0',
+  body: 'flex min-h-0 flex-col p-0 pb-2'
+}"
+    @update:open="(value) => !value && (selectedKey = null)"
+  >
+    <UButton
+      v-bind="triggerProps"
+      :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>
+        <UBadge
+          v-if="activeCount"
+          color="neutral"
+          variant="solid"
+          size="xs"
+          :label="String(activeCount)"
+          class="tabular-nums"
+        />
+      </span>
+    </UButton>
+
+    <template #body>
+      <FilterStageTransition :stage-key="selectedKey ?? '__list'" :direction="direction">
+        <div v-if="!selectedDefinition" class="nut-dl-sheet__list flex min-h-[50vh] flex-col">
+          <div class="nut-dl-sheet__title px-5 pt-3 pb-1.5 text-[13px] font-semibold text-muted">
+            {{ t("table.filters.panel.trigger") }}
+          </div>
+          <div class="min-h-0 flex-1 overflow-y-auto px-[10px] pb-2">
+            <button
+              v-for="definition in definitions"
+              :key="definition.key"
+              type="button"
+              class="nut-dl-sheet__row flex h-[46px] w-full items-center gap-[10px] rounded-lg px-[10px] text-left text-[15px] text-highlighted active:bg-elevated"
+              @click="select(definition)"
+            >
+              <UIcon
+                :name="resolveFilterTriggerIcon(definition)"
+                class="size-3.5 shrink-0 text-muted"
+              />
+              <span class="min-w-0 flex-1 truncate">{{ label(definition) }}</span>
+              <span
+                class="nut-dl-sheet__value flex min-w-0 items-center gap-2 text-[12px] font-semibold"
+              >
+                <template v-for="(entry, index) in preview(definition).entries" :key="entry.label">
+                  <span v-if="index && !entry.color" class="text-dimmed">·</span>
+                  <span class="flex items-center gap-1.5">
+                    <span
+                      v-if="entry.color"
+                      class="size-[7px] rounded-full"
+                      :style="{ background: entry.color }"
+                    />
+                    <span class="max-w-28 truncate">{{ entry.label }}</span>
+                  </span>
+                </template>
+                <span
+                  v-if="!preview(definition).entries.length && preview(definition).summary"
+                  class="max-w-40 truncate"
+                >
+                  {{ preview(definition).summary }}
+                </span>
+              </span>
+              <UIcon name="i-lucide-chevron-right" class="size-3.5 shrink-0 text-dimmed" />
+            </button>
+          </div>
+          <div
+            class="nut-dl-sheet__footer flex items-center justify-between border-t border-default px-5 pt-3 pb-1 text-[13px]"
+          >
+            <button
+              v-if="showClear"
+              type="button"
+              class="text-muted disabled:opacity-40"
+              :disabled="
+  !internals.filters.hasActiveUiFilters.value && !internals.filters.searchQuery.value
+"
+              @click="clearAll"
+            >
+              {{ t("table.filters.panel.clearAll") }}
+            </button>
+            <span v-else />
+            <button type="button" class="font-medium text-highlighted" @click="close">
+              {{ t("table.filters.sheet.done") }}
+            </button>
+          </div>
+        </div>
+
+        <div v-else class="nut-dl-sheet__detail flex min-h-[50vh] flex-col">
+          <div class="flex items-center gap-2 px-[10px] pt-2 pb-2">
+            <UButton
+              color="neutral"
+              variant="ghost"
+              size="sm"
+              icon="i-lucide-arrow-left"
+              square
+              :aria-label="t('table.filters.sheet.back')"
+              @click="back"
+            />
+            <span class="min-w-0 flex-1 truncate text-[14.5px] font-semibold text-highlighted">{{
+              label(selectedDefinition)
+            }}</span>
+            <button
+              type="button"
+              class="px-2 text-[13px] font-semibold text-primary disabled:opacity-40"
+              :disabled="!preview(selectedDefinition).active"
+              @click="internals.filters.clearFilter({ key: selectedDefinition.key })"
+            >
+              {{ t("table.filters.editor.clear") }}
+            </button>
+          </div>
+          <div class="nut-dl-sheet__editor min-h-0 flex-1 overflow-y-auto px-[10px] pb-2">
+            <component
+              :is="resolveFilterTagComponent(selectedDefinition)"
+              :key="selectedDefinition.key"
+              :definition="selectedDefinition"
+              :dynamic="
+  internals.filterPresentation.activeDynamicDefinitions.value.some(
+    (item) => item.key === selectedDefinition.key
+  ) || internals.filterPresentation.dormantDynamicDefinitions.value.some(
+    (item) => item.key === selectedDefinition.key
+  )
+"
+              embedded
+              session
+              :header="false"
+              @session-closed="back"
+              @dismiss="back"
+            />
+          </div>
+          <div
+            class="nut-dl-sheet__footer flex items-center justify-end border-t border-default px-5 pt-3 pb-1 text-[13px]"
+          >
+            <button type="button" class="font-medium text-highlighted" @click="close">
+              {{ t("table.filters.sheet.done") }}
+            </button>
+          </div>
+        </div>
+      </FilterStageTransition>
+    </template>
+  </UDrawer>
+</template>
+
+<style>
+.nut-dl-sheet__value{color:var(--nut-dl-accent-ink,var(--ui-primary))}
+</style>

package/dist/runtime/{spreadsheet/components/shared/SpreadsheetValuePreview.vue.d.ts → table/components/filters/sheet/filter-sheet.vue.d.ts}

@@ -1,9 +1,8 @@
 type __VLS_Props = {
-    value: unknown;
-    compact?: boolean;
+    showClear?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    compact: boolean;
+    showClear: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/table/components/filters/tags/{BooleanFilterTag.d.vue.ts → boolean-filter-tag.d.vue.ts}

@@ -6,7 +6,14 @@ type __VLS_Props = {
     embedded?: boolean;
 };
 declare var __VLS_10: {
-    preview: import("../../../utils/index.js").FilterPreviewResult;
+    preview: {
+        active: boolean;
+        dirty: boolean;
+        count: number;
+        tags: string[];
+        entries: import("../../../utils/filters/preview/types.js").FilterPreviewEntry[];
+        summary: string;
+    };
     active: boolean;
     open: boolean;
     triggerProps: {

package/dist/runtime/table/components/filters/tags/{BooleanFilterTag.vue → boolean-filter-tag.vue}

@@ -4,17 +4,20 @@ import UIcon from "@nuxt/ui/components/Icon.vue";
 import URadioGroup from "@nuxt/ui/components/RadioGroup.vue";
 import USkeleton from "@nuxt/ui/components/Skeleton.vue";
 import { computed, ref } from "vue";
+import { isBoolean, isNullish } from "../../../../shared/utils/predicate";
 import { useDataListUi } from "../../../composables/use-data-list-ui";
 import { useFilterTagSession } from "../../../composables/use-filter-tag-session";
 import { useTableFilterOptions } from "../../../composables/use-table-filter-options";
 import { useTableInternals } from "../../../composables/use-table-internals";
 import {
   mergeDataListUiClass,
+  resolveDataListControlGeometry,
   resolveBooleanFilterUi,
+  resolveFilterEditorSizeClasses,
   resolveFilterTriggerIcon
 } from "../../../utils";
-import FilterPopoverShell from "../shared/FilterPopoverShell.vue";
-import TableFilterTrigger from "../shared/FilterTriggerTag.vue";
+import FilterPopoverShell from "../shared/filter-popover-shell.vue";
+import TableFilterTrigger from "../shared/filter-trigger-tag.vue";
 const props = defineProps({
   definition: { type: Object, required: true },
   dynamic: { type: Boolean, required: false },
@@ -26,23 +29,25 @@ const internals = useTableInternals();
 const dataListUi = useDataListUi();
 const dataListFilterUi = computed(() => dataListUi.ui.value.filterTags?.ui);
 const size = computed(() => dataListUi.ui.value.filterTags?.size ?? dataListUi.controlSize.value);
+const sizeClasses = computed(() => resolveFilterEditorSizeClasses(size.value));
+const geometry = computed(() => resolveDataListControlGeometry(size.value));
 const searchQuery = ref("");
 const isSessionOpen = ref(false);
 const isContentReady = ref(false);
 const localValue = ref(null);
 const optionSource = useTableFilterOptions({
-  definition: props.definition,
   active: computed(() => isSessionOpen.value),
-  ready: isContentReady,
-  searchQuery,
+  definition: props.definition,
   filters: internals.filters,
   queryContent: internals.queryContent,
-  schema: internals.schema
+  ready: isContentReady,
+  schema: internals.schema,
+  searchQuery
 });
 const preview = computed(
   () => internals.filters.getFilterPreview({
-    key: props.definition.key,
-    entries: optionSource.sourceEntries.value
+    entries: optionSource.sourceEntries.value,
+    key: props.definition.key
   })
 );
 const operator = computed(() => {
@@ -53,42 +58,49 @@ const operator = computed(() => {
 });
 const filterUi = computed(() => resolveBooleanFilterUi(props.definition, operator.value));
 const entries = computed(
-  () => optionSource.filteredEntries.value.filter((entry) => typeof entry.value === "boolean").map((entry) => ({
+  () => optionSource.filteredEntries.value.filter((entry) => isBoolean(entry.value)).map((entry) => ({
     ...entry,
-    label: entry.value === true ? filterUi.value.labels.true : filterUi.value.labels.false,
     icon: entry.value === true ? filterUi.value.icons.true : filterUi.value.icons.false,
+    label: entry.value === true ? filterUi.value.labels.true : filterUi.value.labels.false,
     selected: localValue.value === entry.value
   }))
 );
 const radioItems = computed(
   () => entries.value.map((entry) => ({
-    label: entry.label,
-    value: String(entry.value),
+    color: entry.color,
     count: entry.count,
-    icon: entry.icon
+    icon: entry.icon,
+    label: entry.label,
+    value: String(entry.value)
   }))
 );
 const radioValue = computed({
-  get: () => localValue.value == null ? void 0 : String(localValue.value),
+  get: () => isNullish(localValue.value) ? void 0 : String(localValue.value),
   set: (value) => {
-    if (value === "true") localValue.value = true;
-    else if (value === "false") localValue.value = false;
-    else return;
-    if (filterUi.value.commitMode === "auto") applyFilter();
+    if (value === "true") {
+      localValue.value = true;
+    } else if (value === "false") {
+      localValue.value = false;
+    } else {
+      return;
+    }
+    if (filterUi.value.commitMode === "auto") {
+      applyFilter();
+    }
   }
 });
 const session = useFilterTagSession({
-  isOpen: isSessionOpen,
-  session: props.session,
   dynamic: props.dynamic,
   embedded: props.embedded,
-  hasCommittedState: () => internals.filters.getActiveFilterState({ key: props.definition.key }) != null,
-  onOpen: initLocalState,
+  hasCommittedState: () => !isNullish(internals.filters.getActiveFilterState({ key: props.definition.key })),
+  isOpen: isSessionOpen,
   onClose: () => {
     isContentReady.value = false;
   },
+  onDismiss: () => emit("dismiss"),
+  onOpen: initLocalState,
   onSessionClosed: () => emit("sessionClosed"),
-  onDismiss: () => emit("dismiss")
+  session: props.session
 });
 function initLocalState() {
   const committedRule = internals.filters.getFilterState({
@@ -107,7 +119,7 @@ function handleContentMounted() {
   isContentReady.value = true;
 }
 function applyFilter() {
-  if (localValue.value == null) {
+  if (isNullish(localValue.value)) {
     internals.filters.clearFilter({ key: props.definition.key });
   } else {
     internals.filters.setScalarFilterValue({
@@ -128,7 +140,11 @@ function clearFilter() {
     :open="session.isOpen.value"
     :embedded="embedded"
     :content-class="
-  mergeDataListUiClass('w-fit overflow-hidden p-0', void 0, dataListFilterUi?.popoverContent)
+  mergeDataListUiClass(
+    `${sizeClasses.editor} overflow-hidden p-0`,
+    void 0,
+    dataListFilterUi?.popoverContent
+  )
 "
     @update-open="session.handleOpenChange"
   >
@@ -150,7 +166,9 @@ function clearFilter() {
         operator-label="is"
         :operator-items="[]"
         :preview-tags="preview.tags"
+        :preview-entries="preview.entries"
         :preview-summary="preview.summary"
+        :dynamic="dynamic"
         :active="preview.active"
         @activate="handleActivate"
         @clear="clearFilter"
@@ -161,14 +179,16 @@ function clearFilter() {
       <div
         :class="
   mergeDataListUiClass(
-    'w-fit max-w-[calc(100vw-1rem)] bg-default',
+    `${sizeClasses.editor} w-full min-w-0 max-w-full bg-default`,
     void 0,
     dataListFilterUi?.editor
   )
 "
         @vue:mounted="handleContentMounted"
       >
-        <div :class="mergeDataListUiClass('p-2', void 0, dataListFilterUi?.list)">
+        <div
+          :class="mergeDataListUiClass(sizeClasses.scrollArea, void 0, dataListFilterUi?.list)"
+        >
           <URadioGroup
             v-model="radioValue"
             :items="radioItems"
@@ -179,28 +199,28 @@ function clearFilter() {
   root: 'w-full',
   fieldset: 'grid gap-0.5',
   item: mergeDataListUiClass(
-    'flex items-center rounded-md transition-colors hover:bg-elevated data-[state=checked]:bg-elevated',
+    `flex items-center rounded-md transition-colors hover:bg-elevated data-[state=checked]:bg-elevated ${sizeClasses.option}`,
     void 0,
     dataListFilterUi?.option
   ),
-  container: 'self-center pl-3',
+  container: 'self-center',
   base: 'cursor-pointer',
-  wrapper: 'min-w-0 flex-1 py-2 pr-3',
+  wrapper: 'min-w-0 flex-1',
   label: mergeDataListUiClass(
-    'w-full cursor-pointer text-sm text-default',
+    `w-full cursor-pointer text-default ${sizeClasses.optionLabel}`,
     void 0,
     dataListFilterUi?.optionLabel
   )
 }"
           >
             <template #label="{ item }">
-              <div class="flex min-w-0 items-center gap-3">
+              <div :class="['flex min-w-0 items-center', geometry.toolbarGap]">
                 <UIcon
                   v-if="typeof item.icon === 'string'"
                   :name="item.icon"
                   :class="
   mergeDataListUiClass(
-    'size-4 shrink-0 text-muted',
+    `${sizeClasses.optionIcon} shrink-0 text-muted`,
     void 0,
     dataListFilterUi?.optionIcon
   )
@@ -210,15 +230,12 @@ function clearFilter() {
                 <span class="min-w-0 flex-1 truncate">
                   {{ item.label }}
                 </span>
-                <USkeleton
-                  v-if="optionSource.isCountLoading.value"
-                  class="ml-3 h-3.5 w-6 shrink-0"
-                />
+                <USkeleton v-if="optionSource.isCountLoading.value" class="h-3.5 w-6 shrink-0" />
                 <span
                   v-else-if="item.count != null"
                   :class="
   mergeDataListUiClass(
-    'ml-3 shrink-0 text-muted',
+    'shrink-0 text-muted',
     void 0,
     dataListFilterUi?.optionCount
   )
@@ -235,7 +252,7 @@ function clearFilter() {
           v-if="filterUi.commitMode === 'manual'"
           :class="
   mergeDataListUiClass(
-    'flex items-center justify-between border-t border-default p-2',
+    `flex items-center justify-between border-t border-default ${sizeClasses.footer}`,
     void 0,
     dataListFilterUi?.footer
   )

package/dist/runtime/table/components/filters/tags/{BooleanFilterTag.vue.d.ts → boolean-filter-tag.vue.d.ts}

@@ -6,7 +6,14 @@ type __VLS_Props = {
     embedded?: boolean;
 };
 declare var __VLS_10: {
-    preview: import("../../../utils/index.js").FilterPreviewResult;
+    preview: {
+        active: boolean;
+        dirty: boolean;
+        count: number;
+        tags: string[];
+        entries: import("../../../utils/filters/preview/types.js").FilterPreviewEntry[];
+        summary: string;
+    };
     active: boolean;
     open: boolean;
     triggerProps: {

package/dist/runtime/table/components/filters/tags/{DateFilterTag.d.vue.ts → date-filter-tag.d.vue.ts}

@@ -8,7 +8,14 @@ type __VLS_Props = {
     initialOperator?: TableFilterOperator;
 };
 declare var __VLS_10: {
-    preview: import("../../../utils/index.js").FilterPreviewResult;
+    preview: {
+        active: boolean;
+        dirty: boolean;
+        count: number;
+        tags: string[];
+        entries: import("../../../utils/filters/preview/types.js").FilterPreviewEntry[];
+        summary: string;
+    };
     active: boolean;
     open: boolean;
     triggerProps: {