nuxt-ui-tools 0.1.2 → 1.0.0

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

@@ -0,0 +1,330 @@
+<script setup>
+import UBadge from "@nuxt/ui/components/Badge.vue";
+import UButton from "@nuxt/ui/components/Button.vue";
+import USlideover from "@nuxt/ui/components/Slideover.vue";
+import { computed, onMounted, watch } 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 { mergeDataListProps, mergeDataListUiClass } from "../../../utils";
+import FilterPanelFields from "./filter-panel-fields.vue";
+const props = defineProps({
+  size: { type: String, required: false },
+  description: { type: String, required: false },
+  ui: { type: Object, required: false },
+  props: { type: Object, required: false },
+  mode: { type: String, required: false, default: "drawer" },
+  commitMode: { type: String, required: false, default: "submit" }
+});
+const internals = useTableInternals();
+const dataListUi = useDataListUi();
+const { locale, t } = useUiToolsLocale();
+const config = computed(() => dataListUi.ui.value.filterPanel);
+const resolvedUi = computed(() => ({ ...config.value?.ui, ...props.ui }));
+const resolvedSize = computed(
+  () => props.size ?? config.value?.size ?? dataListUi.controlSize.value
+);
+const controlProps = computed(
+  () => mergeDataListProps(config.value?.props, props.props)
+);
+const triggerProps = computed(
+  () => mergeDataListProps(
+    { color: "neutral", icon: "i-lucide-funnel", size: resolvedSize.value, variant: "outline" },
+    controlProps.value.trigger
+  )
+);
+const triggerBind = computed(() => {
+  const { label: _label, ...rest } = triggerProps.value;
+  return rest;
+});
+const triggerLabel = computed(() => triggerProps.value.label ?? t("table.filters.panel.trigger"));
+const countProps = computed(
+  () => controlProps.value.count === false ? null : mergeDataListProps(
+    { color: "neutral", size: "xs", variant: "solid" },
+    controlProps.value.count
+  )
+);
+const closeProps = computed(
+  () => mergeDataListProps(
+    { color: "neutral", icon: "i-lucide-x", size: "sm", square: true, variant: "ghost" },
+    controlProps.value.close
+  )
+);
+const clearProps = computed(
+  () => mergeDataListProps(
+    { color: "neutral", size: resolvedSize.value, variant: "ghost" },
+    controlProps.value.clear
+  )
+);
+const applyProps = computed(
+  () => mergeDataListProps(
+    { color: "primary", size: resolvedSize.value, variant: "solid" },
+    controlProps.value.apply
+  )
+);
+const presentation = internals.filterPresentation;
+const open = computed(() => presentation.panelOpen.value);
+const activeCount = computed(() => presentation.activePanelCount.value);
+const matchingCount = computed(
+  () => internals.pagination.rowCount.value ?? internals.pagination.loadedCount.value
+);
+const live = computed(() => props.commitMode === "live");
+const hasDraft = computed(
+  () => presentation.panelDefinitions.value.some(
+    (definition) => !isNullish(presentation.getPanelDraftFilterState({ key: definition.key }))
+  )
+);
+defineSlots();
+function formatCount(value) {
+  return new Intl.NumberFormat(locale.value.code).format(value).replaceAll("\u202F", "\xA0");
+}
+function toggle() {
+  if (open.value) {
+    presentation.closePanel();
+  } else {
+    presentation.openPanel();
+  }
+}
+function primary() {
+  if (live.value) {
+    presentation.closePanel();
+  } else {
+    presentation.applyPanelDraft();
+  }
+}
+watch(
+  () => props.commitMode,
+  (mode) => presentation.setPanelCommitMode(mode),
+  { immediate: true }
+);
+onMounted(() => {
+  if (props.mode === "panel") {
+    presentation.openPanel();
+  }
+});
+</script>
+
+<template>
+  <section
+    v-if="props.mode === 'panel'"
+    :class="
+  mergeDataListUiClass(
+    'nut-dl-fpanel nut-dl-fpanel--inline grid gap-6',
+    void 0,
+    resolvedUi.wrapper
+  )
+"
+  >
+    <FilterPanelFields :size="resolvedSize" :ui="resolvedUi" />
+
+    <div
+      :class="
+  mergeDataListUiClass(
+    'nut-dl-fpanel__foot flex items-center gap-2.5 border-t border-default pt-4 text-[12.5px] text-muted',
+    void 0,
+    resolvedUi.footerActions
+  )
+"
+    >
+      <span
+        :class="
+  mergeDataListUiClass(
+    'nut-dl-fpanel__matching min-w-0 truncate tabular-nums',
+    void 0,
+    resolvedUi.matching
+  )
+"
+      >
+        {{ t("table.filters.panel.matching", { count: formatCount(matchingCount) }) }}
+      </span>
+      <span class="flex-1" />
+      <UButton
+        v-bind="clearProps"
+        :label="t('table.filters.panel.reset')"
+        :disabled="!hasDraft"
+        :ui="{ base: mergeDataListUiClass('nut-dl-fpanel__reset', void 0, resolvedUi.clear) }"
+        @click="presentation.clearPanelDraft()"
+      />
+      <UButton
+        v-if="!live"
+        v-bind="applyProps"
+        :label="t('table.filters.panel.apply')"
+        :ui="{ base: mergeDataListUiClass('nut-dl-fpanel__apply', void 0, resolvedUi.apply) }"
+        @click="presentation.applyPanelDraft()"
+      />
+    </div>
+  </section>
+
+  <USlideover
+    v-else
+    :open="open"
+    side="right"
+    :overlay="true"
+    :title="t('table.filters.panel.trigger')"
+    :description="description"
+    :close="false"
+    :ui="{
+  overlay: mergeDataListUiClass('nut-dl-fpanel__overlay', void 0, resolvedUi.overlay),
+  content: mergeDataListUiClass(
+    'nut-dl-fpanel w-screen max-w-[480px] rounded-none divide-y-0 bg-default shadow-[-24px_0_60px_-30px_rgb(31_29_26/0.45)]',
+    void 0,
+    resolvedUi.content
+  ),
+  header: mergeDataListUiClass(
+    'nut-dl-fpanel__head flex items-start gap-3 px-6 pt-6 pb-4',
+    void 0,
+    resolvedUi.header
+  ),
+  wrapper: mergeDataListUiClass('min-w-0 flex-1', void 0, resolvedUi.wrapper),
+  body: mergeDataListUiClass(
+    'nut-dl-fpanel__body flex-1 overflow-y-auto px-6 py-5',
+    void 0,
+    resolvedUi.body
+  ),
+  footer: mergeDataListUiClass(
+    'nut-dl-fpanel__foot flex items-center gap-2.5 border-t border-default px-6 py-4 text-[12.5px] text-muted',
+    void 0,
+    resolvedUi.footer
+  ),
+  title: mergeDataListUiClass(
+    'nut-dl-fpanel__title text-[20px] font-medium tracking-[-0.01em] text-highlighted',
+    void 0,
+    resolvedUi.title
+  ),
+  description: mergeDataListUiClass(
+    'nut-dl-fpanel__description mt-1 text-[12.5px] text-muted',
+    void 0,
+    resolvedUi.description
+  )
+}"
+    @update:open="$event ? presentation.openPanel() : presentation.closePanel()"
+  >
+    <slot
+      name="trigger"
+      :open="presentation.openPanel"
+      :close="presentation.closePanel"
+      :toggle="toggle"
+      :open-state="open"
+      :active-count="activeCount"
+      :trigger-props="{ type: 'button', 'aria-expanded': open }"
+    >
+      <UButton
+        v-bind="triggerBind"
+        :aria-expanded="open"
+        :ui="{
+  base: mergeDataListUiClass(
+    'nut-dl-fpanel-trigger shrink-0',
+    void 0,
+    resolvedUi.trigger
+  )
+}"
+      >
+        <span
+          :class="
+  mergeDataListUiClass('flex items-center gap-2', void 0, resolvedUi.triggerContent)
+"
+        >
+          <span>{{ triggerLabel }}</span>
+          <UBadge
+            v-if="countProps && activeCount > 0"
+            v-bind="countProps"
+            :label="formatCount(activeCount)"
+            :class="
+  mergeDataListUiClass(
+    'nut-dl-fpanel-trigger__count tabular-nums',
+    void 0,
+    resolvedUi.count
+  )
+"
+          />
+        </span>
+      </UButton>
+    </slot>
+
+    <template #header>
+      <div class="min-w-0 flex-1">
+        <div class="flex items-baseline gap-2.5">
+          <h2
+            :class="
+  mergeDataListUiClass(
+    'nut-dl-fpanel__title text-[20px] font-medium tracking-[-0.01em] text-highlighted',
+    void 0,
+    resolvedUi.title
+  )
+"
+          >
+            {{ t("table.filters.panel.trigger") }}
+          </h2>
+          <span
+            :class="
+  mergeDataListUiClass(
+    'nut-dl-fpanel__results text-[10.5px] font-semibold tracking-[0.08em] text-dimmed uppercase tabular-nums',
+    void 0,
+    resolvedUi.results
+  )
+"
+          >
+            {{ t("table.filters.panel.results", { count: formatCount(matchingCount) }) }}
+          </span>
+        </div>
+        <p
+          v-if="description"
+          :class="
+  mergeDataListUiClass(
+    'nut-dl-fpanel__description mt-1 text-[12.5px] text-muted',
+    void 0,
+    resolvedUi.description
+  )
+"
+        >
+          {{ description }}
+        </p>
+      </div>
+      <UButton
+        v-bind="closeProps"
+        :aria-label="t('table.controls.close')"
+        :ui="{
+  base: mergeDataListUiClass(
+    'nut-dl-fpanel__close -mt-1 -mr-2 text-muted hover:text-default',
+    void 0,
+    resolvedUi.close
+  )
+}"
+        @click="presentation.closePanel()"
+      />
+    </template>
+
+    <template #body>
+      <FilterPanelFields :size="resolvedSize" :ui="resolvedUi" />
+    </template>
+
+    <template #footer>
+      <span
+        :class="
+  mergeDataListUiClass(
+    'nut-dl-fpanel__matching min-w-0 truncate tabular-nums',
+    void 0,
+    resolvedUi.matching
+  )
+"
+      >
+        {{ t("table.filters.panel.matching", { count: formatCount(matchingCount) }) }}
+      </span>
+      <span class="flex-1" />
+      <UButton
+        v-bind="clearProps"
+        :label="t('table.filters.panel.reset')"
+        :disabled="!hasDraft"
+        :ui="{ base: mergeDataListUiClass('nut-dl-fpanel__reset', void 0, resolvedUi.clear) }"
+        @click="presentation.clearPanelDraft()"
+      />
+      <UButton
+        v-bind="applyProps"
+        :label="live ? t('table.filters.panel.done') : t('table.filters.panel.apply')"
+        :ui="{ base: mergeDataListUiClass('nut-dl-fpanel__apply', void 0, resolvedUi.apply) }"
+        @click="primary"
+      />
+    </template>
+  </USlideover>
+</template>

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

@@ -0,0 +1,35 @@
+import type { VNodeChild } from 'vue';
+import type { DataListControlSize, DataListFilterPanelCommitMode, DataListFilterPanelMode, DataListFilterPanelProps, DataListFilterPanelUi } from '../../../types/index.js';
+type __VLS_Props = {
+    size?: DataListControlSize;
+    description?: string;
+    ui?: DataListFilterPanelUi;
+    props?: DataListFilterPanelProps;
+    mode?: DataListFilterPanelMode;
+    commitMode?: DataListFilterPanelCommitMode;
+};
+type __VLS_Slots = {
+    trigger?: (props: {
+        open: () => void;
+        close: () => void;
+        toggle: () => void;
+        openState: boolean;
+        activeCount: number;
+        triggerProps: {
+            type: 'button';
+            'aria-expanded': boolean;
+        };
+    }) => VNodeChild;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    mode: DataListFilterPanelMode;
+    commitMode: DataListFilterPanelCommitMode;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/table/components/filters/panel/{NumberFilterPanelField.d.vue.ts → number-filter-panel-field.d.vue.ts}

@@ -1,6 +1,8 @@
-import type { TableNumberFilterDefinition } from '../../../types/index.js';
+import type { DataListControlSize, DataListFilterPanelUi, TableNumberFilterDefinition } from '../../../types/index.js';
 type __VLS_Props = {
     definition: TableNumberFilterDefinition;
+    size: DataListControlSize;
+    ui?: DataListFilterPanelUi;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/table/components/filters/panel/{NumberFilterPanelField.vue → number-filter-panel-field.vue}

@@ -1,14 +1,18 @@
 <script setup>
 import UInputNumber from "@nuxt/ui/components/InputNumber.vue";
 import { computed, ref } from "vue";
+import { isDate, isNumber, isObject, isNullish } from "../../../../shared/utils/predicate";
 import { useTableInternals } from "../../../composables/use-table-internals";
-import { resolveNumberFilterUi } from "../../../utils";
-import FilterMatchModeButton from "../shared/FilterMatchModeButton.vue";
-import FilterPanelFieldShell from "./FilterPanelFieldShell.vue";
+import { resolveDataListControlGeometry, resolveNumberFilterUi } from "../../../utils";
+import FilterMatchModeButton from "../shared/filter-match-mode-button.vue";
+import FilterPanelFieldShell from "./filter-panel-field-shell.vue";
 const props = defineProps({
-  definition: { type: Object, required: true }
+  definition: { type: Object, required: true },
+  size: { type: String, required: true },
+  ui: { type: Object, required: false }
 });
 const internals = useTableInternals();
+const geometry = computed(() => resolveDataListControlGeometry(props.size));
 const pendingOperator = ref(resolveInitialOperator());
 const operatorItems = computed(
   () => internals.filters.getFilterOperatorOptions({
@@ -17,20 +21,22 @@ const operatorItems = computed(
 );
 const filterUi = computed(() => resolveNumberFilterUi(props.definition, pendingOperator.value));
 const isActive = computed(
-  () => internals.filterPresentation.getPanelDraftFilterState({ key: props.definition.key }) != null
+  () => !isNullish(
+    internals.filterPresentation.getPanelDraftFilterState({ key: props.definition.key })
+  )
 );
 const scalarValue = computed({
   get() {
     const value = internals.filterPresentation.getPanelDraftFilterState({
       key: props.definition.key
     })?.value;
-    return typeof value === "number" ? value : void 0;
+    return isNumber(value) ? value : void 0;
   },
   set(value) {
     internals.filterPresentation.setPanelScalarFilterValue({
       key: props.definition.key,
-      value,
-      operator: pendingOperator.value
+      operator: pendingOperator.value,
+      value
     });
   }
 });
@@ -39,21 +45,24 @@ const rangeValue = computed({
     const value = internals.filterPresentation.getPanelDraftFilterState({
       key: props.definition.key
     })?.value;
-    if (!value || typeof value !== "object" || Array.isArray(value) || value instanceof Date)
+    if (!isObject(value) || isDate(value)) {
       return { from: void 0, to: void 0 };
+    }
     return {
-      from: typeof value.from === "number" ? value.from : void 0,
-      to: typeof value.to === "number" ? value.to : void 0
+      from: "from" in value && isNumber(value.from) ? value.from : void 0,
+      to: "to" in value && isNumber(value.to) ? value.to : void 0
     };
   },
   set(value) {
     internals.filterPresentation.setPanelScalarFilterValue({
       key: props.definition.key,
-      value: value.from == null && value.to == null ? void 0 : {
-        ...value.from == null ? {} : { from: value.from },
-        ...value.to == null ? {} : { to: value.to }
-      },
-      operator: pendingOperator.value
+      operator: pendingOperator.value,
+      value: isNullish(value.from) && isNullish(value.to) ? void 0 : Object.fromEntries(
+        [
+          isNullish(value.from) ? void 0 : ["from", value.from],
+          isNullish(value.to) ? void 0 : ["to", value.to]
+        ].filter((entry) => entry !== void 0)
+      )
     });
   }
 });
@@ -65,8 +74,9 @@ function resolveInitialOperator() {
 }
 function handleOperatorChange(operator) {
   pendingOperator.value = operator === "isNot" || operator === "gt" || operator === "gte" || operator === "lt" || operator === "lte" || operator === "between" ? operator : "is";
-  if (filterUi.value.clearOnOperatorChange)
+  if (filterUi.value.clearOnOperatorChange) {
     internals.filterPresentation.clearPanelFilter({ key: props.definition.key });
+  }
 }
 function updateRangeFrom(value) {
   rangeValue.value = {
@@ -89,19 +99,23 @@ function resolveIncrementConfig(hideStepper) {
   <FilterPanelFieldShell
     :label="internals.filters.getFilterLabelText({ label: definition.label })"
     :active="isActive"
+    :size="size"
+    :ui="ui"
   >
     <template #actions>
       <FilterMatchModeButton
-        v-if="operatorItems.length > 1"
+        v-if="operatorItems.length"
         :label="operatorItems.find((item) => item.value === pendingOperator)?.label ?? 'is'"
         :items="operatorItems"
+        :selected="pendingOperator"
+        :size="size"
         variant="compact"
         @select="handleOperatorChange"
       />
     </template>
 
-    <div v-if="pendingOperator === 'between'" class="grid gap-3">
-      <div class="grid grid-cols-2 gap-2">
+    <div v-if="pendingOperator === 'between'" :class="['grid', geometry.toolbarGap]">
+      <div :class="['grid grid-cols-2', geometry.toolbarGap]">
         <UInputNumber
           :model-value="rangeValue.from"
           :placeholder="filterUi.range.inputs.fromPlaceholder"
@@ -112,6 +126,7 @@ function resolveIncrementConfig(hideStepper) {
           :disable-wheel-change="filterUi.range.inputs.disableWheelChange"
           :increment="resolveIncrementConfig(filterUi.range.inputs.hideStepper)"
           :decrement="resolveIncrementConfig(filterUi.range.inputs.hideStepper)"
+          :size="size"
           class="w-full"
           @update:model-value="updateRangeFrom"
         />
@@ -126,6 +141,7 @@ function resolveIncrementConfig(hideStepper) {
           :disable-wheel-change="filterUi.range.inputs.disableWheelChange"
           :increment="resolveIncrementConfig(filterUi.range.inputs.hideStepper)"
           :decrement="resolveIncrementConfig(filterUi.range.inputs.hideStepper)"
+          :size="size"
           class="w-full"
           @update:model-value="updateRangeTo"
         />
@@ -143,6 +159,7 @@ function resolveIncrementConfig(hideStepper) {
         :disable-wheel-change="filterUi.scalar.input.disableWheelChange"
         :increment="resolveIncrementConfig(filterUi.scalar.input.hideStepper)"
         :decrement="resolveIncrementConfig(filterUi.scalar.input.hideStepper)"
+        :size="size"
         class="w-full"
         @update:model-value="scalarValue = $event"
       />

package/dist/runtime/table/components/filters/panel/{NumberFilterPanelField.vue.d.ts → number-filter-panel-field.vue.d.ts}

@@ -1,6 +1,8 @@
-import type { TableNumberFilterDefinition } from '../../../types/index.js';
+import type { DataListControlSize, DataListFilterPanelUi, TableNumberFilterDefinition } from '../../../types/index.js';
 type __VLS_Props = {
     definition: TableNumberFilterDefinition;
+    size: DataListControlSize;
+    ui?: DataListFilterPanelUi;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/table/components/filters/panel/{OptionFilterPanelField.d.vue.ts → option-filter-panel-field.d.vue.ts}

@@ -1,6 +1,8 @@
-import type { TableOptionFilterDefinition } from '../../../types/index.js';
+import type { DataListControlSize, DataListFilterPanelUi, TableOptionFilterDefinition } from '../../../types/index.js';
 type __VLS_Props = {
     definition: TableOptionFilterDefinition;
+    size: DataListControlSize;
+    ui?: DataListFilterPanelUi;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;