nuxt-ui-tools 0.1.3 → 1.0.0

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

@@ -0,0 +1,431 @@
+<script setup>
+import UBadge from "@nuxt/ui/components/Badge.vue";
+import UButton from "@nuxt/ui/components/Button.vue";
+import UCheckbox from "@nuxt/ui/components/Checkbox.vue";
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import UInput from "@nuxt/ui/components/Input.vue";
+import UPopover from "@nuxt/ui/components/Popover.vue";
+import { computed } from "vue";
+import { VueDraggable } from "vue-draggable-plus";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { isNumber } from "../../../shared/utils/predicate";
+import { useDataListUi } from "../../composables/use-data-list-ui";
+import { useTableInternals } from "../../composables/use-table-internals";
+import {
+  mergeDataListProps,
+  mergeDataListUiClass,
+  resolveDataListControlGeometry,
+  resolveDataListPopoverContentClass
+} from "../../utils";
+const props = defineProps({
+  size: { type: String, required: false },
+  ui: { type: Object, required: false },
+  props: { type: Object, required: false }
+});
+const internals = useTableInternals();
+const dataListUi = useDataListUi();
+const { t } = useUiToolsLocale();
+const ui = computed(() => ({
+  ...dataListUi.ui.value.columnPanel?.ui,
+  ...props.ui
+}));
+const resolvedSize = computed(
+  () => props.size ?? dataListUi.ui.value.columnPanel?.size ?? dataListUi.controlSize.value
+);
+const geometry = computed(() => resolveDataListControlGeometry(resolvedSize.value));
+const controlProps = computed(
+  () => mergeDataListProps(dataListUi.ui.value.columnPanel?.props, props.props)
+);
+const triggerProps = computed(
+  () => mergeDataListProps(
+    {
+      color: "neutral",
+      icon: "i-lucide-layers",
+      label: t("table.controls.view"),
+      size: resolvedSize.value,
+      variant: "outline"
+    },
+    controlProps.value.trigger
+  )
+);
+const countProps = computed(
+  () => controlProps.value.count === false ? null : controlProps.value.count ? mergeDataListProps(
+    { color: "neutral", size: resolvedSize.value, variant: "subtle" },
+    controlProps.value.count
+  ) : null
+);
+const searchable = computed(() => {
+  const search = controlProps.value.search ?? 30;
+  return isNumber(search) ? configurableColumns.value.length > search : search;
+});
+const checkboxProps = computed(
+  () => mergeDataListProps(
+    { color: "primary", size: "sm" },
+    controlProps.value.checkbox
+  )
+);
+const resetProps = computed(
+  () => mergeDataListProps(
+    { color: "neutral", size: "xs", variant: "link" },
+    controlProps.value.reset
+  )
+);
+function isVisible(columnId) {
+  return internals.tableColumns.tableState.value.columnVisibility?.[columnId] !== false;
+}
+function isRequired(column) {
+  return column.required === true || column.canHide === false;
+}
+const visibleCount = computed(
+  () => configurableColumns.value.filter(
+    (column) => internals.tableColumns.tableState.value.columnVisibility?.[column.id] !== false
+  ).length
+);
+defineSlots();
+const configurableColumns = computed(
+  () => internals.tableColumns.orderedColumns.value.filter((column) => column.configurable !== false)
+);
+const pinnedLeft = computed(() => {
+  const leftIds = internals.tableColumns.tableState.value.columnPinning?.left ?? [];
+  return configurableColumns.value.filter((col) => leftIds.includes(col.id));
+});
+const pinnedRight = computed(() => {
+  const rightIds = internals.tableColumns.tableState.value.columnPinning?.right ?? [];
+  return configurableColumns.value.filter((col) => rightIds.includes(col.id));
+});
+const unpinnedColumns = computed(() => {
+  const leftIds = internals.tableColumns.tableState.value.columnPinning?.left ?? [];
+  const rightIds = internals.tableColumns.tableState.value.columnPinning?.right ?? [];
+  return configurableColumns.value.filter(
+    (col) => !leftIds.includes(col.id) && !rightIds.includes(col.id)
+  );
+});
+const filteredColumns = computed(() => {
+  const search = internals.controls.columnsPanelSearch.value.trim().toLowerCase();
+  if (!search) {
+    return configurableColumns.value;
+  }
+  return configurableColumns.value.filter((column) => column.label.toLowerCase().includes(search));
+});
+const draggableColumns = computed({
+  get: () => unpinnedColumns.value,
+  set: (columns) => internals.tableColumns.setOrder({
+    columnIds: [
+      ...pinnedLeft.value.map((col) => col.id),
+      ...columns.map((col) => col.id),
+      ...pinnedRight.value.map((col) => col.id)
+    ]
+  })
+});
+function toggleColumn(columnId) {
+  const isVisible2 = internals.tableColumns.tableState.value.columnVisibility?.[columnId] !== false;
+  internals.tableColumns.setVisibility({ columnId, visible: !isVisible2 });
+}
+function open() {
+  internals.controls.columnsPanelOpen.value = true;
+}
+function close() {
+  internals.controls.columnsPanelOpen.value = false;
+}
+function toggle() {
+  internals.controls.columnsPanelOpen.value = !internals.controls.columnsPanelOpen.value;
+}
+</script>
+
+<template>
+  <UPopover
+    :open="internals.controls.columnsPanelOpen.value"
+    @update:open="internals.controls.columnsPanelOpen.value = $event"
+    mode="click"
+    :content="{ side: 'bottom', align: 'end', sideOffset: 8 }"
+    :ui="{
+  content: mergeDataListUiClass(
+    resolveDataListPopoverContentClass('independent', 'p-0 shadow-none'),
+    void 0,
+    ui.popoverContent
+  )
+}"
+  >
+    <slot
+      name="trigger"
+      :open="open"
+      :close="close"
+      :toggle="toggle"
+      :open-state="internals.controls.columnsPanelOpen.value"
+      :trigger-props="{
+  type: 'button',
+  'aria-expanded': internals.controls.columnsPanelOpen.value
+}"
+    >
+      <UButton
+        v-bind="triggerProps"
+        :ui="{ base: mergeDataListUiClass('nut-dl-colbtn', void 0, ui.trigger) }"
+      >
+        <template v-if="countProps" #trailing>
+          <UBadge
+            v-bind="countProps"
+            :label="String(visibleCount)"
+            :class="mergeDataListUiClass('nut-dl-colbtn__count tabular-nums', void 0, ui.count)"
+          />
+        </template>
+      </UButton>
+    </slot>
+
+    <template #content>
+      <div
+        :class="
+  mergeDataListUiClass(
+    'nut-dl-colpanel w-full min-w-0 max-w-full bg-default',
+    void 0,
+    ui.panel
+  )
+"
+      >
+        <div
+          :class="
+  mergeDataListUiClass(
+    'nut-dl-colpanel__title flex items-center gap-1 px-4 pt-3 pb-1 text-[11px] font-semibold tracking-[0.06em] text-dimmed uppercase',
+    void 0,
+    ui.title
+  )
+"
+        >
+          <span>{{ t("table.controls.view") }}</span>
+          <span class="font-medium">
+            ·
+            {{
+              t("table.controls.columnsCount", {
+  visible: visibleCount,
+  total: configurableColumns.length
+})
+            }}
+          </span>
+        </div>
+
+        <div
+          v-if="searchable"
+          :class="mergeDataListUiClass(`px-2 pb-1`, void 0, ui.searchHeader)"
+        >
+          <UInput
+            :model-value="internals.controls.columnsPanelSearch.value"
+            @update:model-value="internals.controls.columnsPanelSearch.value = String($event ?? '')"
+            size="sm"
+            icon="i-lucide-search"
+            :placeholder="t('table.controls.searchColumns')"
+            color="neutral"
+            variant="soft"
+            :ui="{ root: mergeDataListUiClass('w-full', void 0, ui.search) }"
+          />
+        </div>
+
+        <div
+          :class="
+  mergeDataListUiClass(
+    'nut-dl-colpanel__list grid max-h-80 gap-px overflow-y-auto px-2 py-1',
+    void 0,
+    ui.list
+  )
+"
+        >
+          <template v-if="!internals.controls.columnsPanelSearch.value">
+            <div
+              v-for="column in pinnedLeft"
+              :key="column.id"
+              :class="
+  mergeDataListUiClass(
+    'nut-dl-colpanel__row group/col flex h-8 items-center gap-2.5 rounded-md px-2 hover:bg-elevated',
+    void 0,
+    ui.row
+  )
+"
+            >
+              <UCheckbox
+                v-bind="checkboxProps"
+                :model-value="isVisible(column.id)"
+                :disabled="isRequired(column)"
+                :aria-label="column.label"
+                @update:model-value="toggleColumn(column.id)"
+              />
+              <button
+                type="button"
+                class="flex min-w-0 flex-1 items-center gap-2 text-left text-[13px]"
+                :class="isRequired(column) ? 'text-dimmed' : 'text-highlighted'"
+                :disabled="isRequired(column)"
+                @click="toggleColumn(column.id)"
+              >
+                <span :class="mergeDataListUiClass('truncate', void 0, ui.label)">{{
+                  column.label
+                }}</span>
+              </button>
+              <UIcon
+                name="i-lucide-pin"
+                :class="mergeDataListUiClass('size-3.5 shrink-0 text-dimmed', void 0, ui.icon)"
+              />
+            </div>
+
+            <VueDraggable
+              v-if="draggableColumns.length"
+              v-model="draggableColumns"
+              item-key="id"
+              handle=".column-drag-handle"
+              :animation="180"
+              easing="cubic-bezier(0.22, 1, 0.36, 1)"
+              ghost-class="column-panel-row-ghost"
+              chosen-class="column-panel-row-chosen"
+              drag-class="column-panel-row-dragging"
+              :class="mergeDataListUiClass('grid gap-px', void 0, ui.section)"
+            >
+              <div
+                v-for="column in draggableColumns"
+                :key="column.id"
+                :class="
+  mergeDataListUiClass(
+    'nut-dl-colpanel__row group/col flex h-8 items-center gap-2.5 rounded-md px-2 hover:bg-elevated',
+    void 0,
+    ui.row
+  )
+"
+              >
+                <UCheckbox
+                  v-bind="checkboxProps"
+                  :model-value="isVisible(column.id)"
+                  :disabled="isRequired(column)"
+                  :aria-label="column.label"
+                  @update:model-value="toggleColumn(column.id)"
+                />
+                <button
+                  type="button"
+                  class="flex min-w-0 flex-1 items-center gap-2 text-left text-[13px] text-highlighted"
+                  @click="toggleColumn(column.id)"
+                >
+                  <span :class="mergeDataListUiClass('truncate', void 0, ui.label)">{{
+                    column.label
+                  }}</span>
+                </button>
+                <button
+                  type="button"
+                  :class="
+  mergeDataListUiClass(
+    'column-drag-handle flex size-6 cursor-grab items-center justify-center rounded-md text-dimmed opacity-0 transition-opacity group-hover/col:opacity-100 focus-visible:opacity-100 active:cursor-grabbing',
+    void 0,
+    ui.handle
+  )
+"
+                  :aria-label="column.label"
+                >
+                  <UIcon name="i-lucide-grip-vertical" class="size-3.5" />
+                </button>
+              </div>
+            </VueDraggable>
+
+            <div
+              v-for="column in pinnedRight"
+              :key="column.id"
+              :class="
+  mergeDataListUiClass(
+    'nut-dl-colpanel__row group/col flex h-8 items-center gap-2.5 rounded-md px-2 hover:bg-elevated',
+    void 0,
+    ui.row
+  )
+"
+            >
+              <UCheckbox
+                v-bind="checkboxProps"
+                :model-value="isVisible(column.id)"
+                :disabled="isRequired(column)"
+                :aria-label="column.label"
+                @update:model-value="toggleColumn(column.id)"
+              />
+              <button
+                type="button"
+                class="flex min-w-0 flex-1 items-center gap-2 text-left text-[13px]"
+                :class="isRequired(column) ? 'text-dimmed' : 'text-highlighted'"
+                :disabled="isRequired(column)"
+                @click="toggleColumn(column.id)"
+              >
+                <span :class="mergeDataListUiClass('truncate', void 0, ui.label)">{{
+                  column.label
+                }}</span>
+              </button>
+              <UIcon
+                name="i-lucide-pin"
+                :class="mergeDataListUiClass('size-3.5 shrink-0 text-dimmed', void 0, ui.icon)"
+              />
+            </div>
+          </template>
+
+          <template v-else>
+            <div
+              v-for="column in filteredColumns"
+              :key="column.id"
+              :class="
+  mergeDataListUiClass(
+    'nut-dl-colpanel__row flex h-8 items-center gap-2.5 rounded-md px-2 hover:bg-elevated',
+    void 0,
+    ui.row
+  )
+"
+            >
+              <UCheckbox
+                v-bind="checkboxProps"
+                :model-value="isVisible(column.id)"
+                :disabled="isRequired(column)"
+                :aria-label="column.label"
+                @update:model-value="toggleColumn(column.id)"
+              />
+              <button
+                type="button"
+                class="flex min-w-0 flex-1 items-center gap-2 text-left text-[13px]"
+                :class="isRequired(column) ? 'text-dimmed' : 'text-highlighted'"
+                :disabled="isRequired(column)"
+                @click="toggleColumn(column.id)"
+              >
+                <span :class="mergeDataListUiClass('truncate', void 0, ui.label)">{{
+                  column.label
+                }}</span>
+              </button>
+            </div>
+            <div
+              v-if="!filteredColumns.length"
+              :class="
+  mergeDataListUiClass('px-2 py-3 text-[12.5px] text-muted', void 0, ui.empty)
+"
+            >
+              {{ t("table.controls.noMatchingFilters") }}
+            </div>
+          </template>
+        </div>
+
+        <div
+          :class="
+  mergeDataListUiClass(
+    'nut-dl-colpanel__footer flex items-center justify-between border-t border-default px-3 py-1.5 text-[12.5px]',
+    void 0,
+    ui.footer
+  )
+"
+        >
+          <UButton
+            v-bind="resetProps"
+            :label="t('table.controls.resetColumns')"
+            :ui="{
+  base: mergeDataListUiClass('px-0 text-muted hover:text-default', void 0, ui.reset)
+}"
+            @click="internals.tableColumns.reset()"
+          />
+          <button
+            type="button"
+            :class="mergeDataListUiClass('text-muted hover:text-default', void 0, ui.close)"
+            @click="close"
+          >
+            {{ t("table.controls.close") }}
+          </button>
+        </div>
+      </div>
+    </template>
+  </UPopover>
+</template>
+
+<style scoped>
+:deep(.column-panel-row-ghost){opacity:.35}:deep(.column-panel-row-dragging){background-color:var(--ui-bg);box-shadow:0 12px 28px rgba(31,29,26,.14)}
+</style>

package/dist/runtime/table/components/drawers/{ColumnPanel.vue.d.ts → column-panel.vue.d.ts}

@@ -1,7 +1,9 @@
-import type { DataListColumnPanelUi, DataListControlSize } from '../../types/index.js';
+import type { VNodeChild } from 'vue';
+import type { DataListColumnPanelProps, DataListColumnPanelUi, DataListControlSize } from '../../types/index.js';
 type __VLS_Props = {
     size?: DataListControlSize;
     ui?: DataListColumnPanelUi;
+    props?: DataListColumnPanelProps;
 };
 type __VLS_Slots = {
     trigger?: (props: {
@@ -13,7 +15,7 @@ type __VLS_Slots = {
             type: 'button';
             'aria-expanded': boolean;
         };
-    }) => unknown;
+    }) => VNodeChild;
 };
 declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -1,6 +1,8 @@
-import type { TableBooleanFilterDefinition } from '../../../types/index.js';
+import type { DataListControlSize, DataListFilterPanelUi, TableBooleanFilterDefinition } from '../../../types/index.js';
 type __VLS_Props = {
     definition: TableBooleanFilterDefinition;
+    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/boolean-filter-panel-field.vue

@@ -0,0 +1,69 @@
+<script setup>
+import { computed, ref } from "vue";
+import { isBoolean } from "../../../../shared/utils/predicate";
+import { useTableFilterOptions } from "../../../composables/use-table-filter-options";
+import { useTableInternals } from "../../../composables/use-table-internals";
+import { resolveBooleanFilterUi } from "../../../utils";
+import FilterPanelChips from "./filter-panel-chips.vue";
+import FilterPanelFieldShell from "./filter-panel-field-shell.vue";
+const props = defineProps({
+  definition: { type: Object, required: true },
+  size: { type: String, required: true },
+  ui: { type: Object, required: false }
+});
+const internals = useTableInternals();
+const searchQuery = ref("");
+const optionSource = useTableFilterOptions({
+  active: internals.filterPresentation.panelOpen,
+  definition: props.definition,
+  filters: internals.filters,
+  queryContent: internals.queryContent,
+  schema: internals.schema,
+  searchQuery
+});
+const filterUi = computed(() => resolveBooleanFilterUi(props.definition, "is"));
+const current = computed(() => {
+  const value = internals.filterPresentation.getPanelDraftFilterState({
+    key: props.definition.key
+  })?.value;
+  return value === true || value === false ? value : void 0;
+});
+const isActive = computed(() => current.value !== void 0);
+const entries = computed(
+  () => optionSource.filteredEntries.value.filter((entry) => isBoolean(entry.value)).map((entry) => ({
+    count: entry.count,
+    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: current.value === entry.value,
+    value: entry.value
+  }))
+);
+function toggle(value) {
+  if (current.value === value) {
+    internals.filterPresentation.clearPanelFilter({ key: props.definition.key });
+    return;
+  }
+  internals.filterPresentation.setPanelScalarFilterValue({
+    key: props.definition.key,
+    value: value === true
+  });
+}
+</script>
+
+<template>
+  <FilterPanelFieldShell
+    :label="internals.filters.getFilterLabelText({ label: definition.label })"
+    :active="isActive"
+    :size="size"
+    :ui="ui"
+  >
+    <FilterPanelChips
+      :entries="entries"
+      :loading="optionSource.isLoading.value"
+      :count-loading="optionSource.isCountLoading.value"
+      show-counts
+      :ui="ui"
+      @toggle="toggle"
+    />
+  </FilterPanelFieldShell>
+</template>

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

@@ -1,6 +1,8 @@
-import type { TableBooleanFilterDefinition } from '../../../types/index.js';
+import type { DataListControlSize, DataListFilterPanelUi, TableBooleanFilterDefinition } from '../../../types/index.js';
 type __VLS_Props = {
     definition: TableBooleanFilterDefinition;
+    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/{DateFilterPanelField.d.vue.ts → date-filter-panel-field.d.vue.ts}

@@ -1,6 +1,8 @@
-import type { TableDateFilterDefinition } from '../../../types/index.js';
+import type { DataListControlSize, DataListFilterPanelUi, TableDateFilterDefinition } from '../../../types/index.js';
 type __VLS_Props = {
     definition: TableDateFilterDefinition;
+    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;