nuxt-ui-tools 0.1.2 → 1.0.0

package/dist/runtime/form/composables/use-form-submit.js

@@ -1,71 +0,0 @@
-import { computed, ref, toValue } from "vue";
-import { isRecord } from "../utils/path.js";
-export function useFormSubmit(params) {
-  const isSubmitting = computed(() => params.formRef.value?.actionPending.value === "submit");
-  async function submit() {
-    const form = params.formRef.value;
-    if (!form) return false;
-    const result = await form.submitHandler(params.onSubmit);
-    return result.success;
-  }
-  return {
-    schema: computed(() => toValue(params.schema)),
-    submit,
-    isSubmitting
-  };
-}
-export function useFormSubmitController(params) {
-  const actionPending = ref(null);
-  async function submitHandler(externalSubmitHandler) {
-    const isValid = await params.validate();
-    if (!isValid) {
-      await params.focusFirstInvalid?.();
-      return { success: false };
-    }
-    try {
-      actionPending.value = "submit";
-      const beforeSubmit = getBeforeSubmit(params.getSchema());
-      const beforeResult = await beforeSubmit?.({
-        formData: params.getOutput(),
-        api: params.getApi()
-      });
-      if (isCancelled(beforeResult)) return { success: false };
-      const schemaSubmit = getSchemaSubmit(params.getSchema());
-      await schemaSubmit?.({
-        value: params.getOutput(),
-        api: params.getApi(),
-        ctx: params.getContext()
-      });
-      const result = await externalSubmitHandler?.({
-        formData: params.getOutput(),
-        api: params.getApi()
-      });
-      return normalizeSubmitResult(result);
-    } finally {
-      actionPending.value = null;
-    }
-  }
-  return {
-    actionPending: computed(() => actionPending.value),
-    submitHandler
-  };
-}
-function normalizeSubmitResult(result) {
-  if (result === false) return { success: false };
-  if (isRecord(result) && result.success === false) return { success: false };
-  if (isRecord(result) && result.success === true) return { success: true, data: result.data };
-  return { success: true };
-}
-function isCancelled(result) {
-  return result === false || isRecord(result) && result.success === false;
-}
-function getBeforeSubmit(schema) {
-  if (!isRecord(schema)) return void 0;
-  const handler = Object.getOwnPropertyDescriptor(schema, "onBeforeSubmit")?.value;
-  return typeof handler === "function" ? handler : void 0;
-}
-function getSchemaSubmit(schema) {
-  if (!isRecord(schema)) return void 0;
-  const submit = Object.getOwnPropertyDescriptor(schema, "submit")?.value;
-  return typeof submit === "function" ? submit : void 0;
-}

package/dist/runtime/table/components/actions/RowActions.vue

@@ -1,56 +0,0 @@
-<script setup>
-import UDropdownMenu from "@nuxt/ui/components/DropdownMenu.vue";
-import { computed, useAttrs } from "vue";
-import { useTableInternals } from "../../composables/use-table-internals";
-import { useTableRowActionScope } from "../../composables/use-table-row-actions";
-import { createRowActionDropdownItems, resolveVisibleTableRowActions } from "../../utils";
-defineOptions({
-  inheritAttrs: false
-});
-const props = defineProps({
-  content: { type: Object, required: false },
-  modal: { type: Boolean, required: false },
-  portal: { type: [Boolean, String], required: false, skipCheck: true },
-  arrow: { type: [Boolean, Object], required: false },
-  disabled: { type: Boolean, required: false },
-  size: { type: String, required: false },
-  ui: { type: Object, required: false }
-});
-const attrs = useAttrs();
-const internals = useTableInternals();
-const scope = useTableRowActionScope();
-const portal = computed(() => props.portal ?? true);
-const visibleActions = computed(() => {
-  if (!scope?.value) return [];
-  return resolveVisibleTableRowActions({
-    schema: internals.schema.value,
-    scope: scope.value
-  });
-});
-const items = computed(() => {
-  if (!scope?.value) return [];
-  return createRowActionDropdownItems({
-    actions: visibleActions.value,
-    scope: scope.value
-  });
-});
-</script>
-
-<template>
-  <UDropdownMenu
-    v-if="scope && visibleActions.length && items.length"
-    :items="items"
-    :content="props.content"
-    :modal="props.modal"
-    :portal="portal"
-    :arrow="props.arrow"
-    :disabled="props.disabled"
-    :size="props.size"
-    :ui="props.ui"
-    v-bind="attrs"
-  >
-    <template #default="slotProps">
-      <slot v-bind="slotProps" :items="items" />
-    </template>
-  </UDropdownMenu>
-</template>

package/dist/runtime/table/components/data-list/DataListColumnPanel.vue

@@ -1,17 +0,0 @@
-<script setup>
-import { useTableInternals } from "../../composables/use-table-internals";
-import ColumnPanel from "../drawers/ColumnPanel.vue";
-defineProps({
-  size: { type: String, required: false },
-  ui: { type: Object, required: false }
-});
-const internals = useTableInternals();
-</script>
-
-<template>
-  <ColumnPanel v-if="internals.controls.tableLayout.value === 'table'" :size="size" :ui="ui">
-    <template v-if="$slots.trigger" #trigger="scope">
-      <slot name="trigger" v-bind="scope" />
-    </template>
-  </ColumnPanel>
-</template>

package/dist/runtime/table/components/data-list/DataListFilterPanel.vue

@@ -1,17 +0,0 @@
-<script setup>
-import { useTableInternals } from "../../composables/use-table-internals";
-import FilterPanel from "../filters/panel/FilterPanel.vue";
-defineProps({
-  size: { type: String, required: false },
-  ui: { type: Object, required: false }
-});
-const internals = useTableInternals();
-</script>
-
-<template>
-  <FilterPanel v-if="internals.filterPresentation.hasPanelFilters.value" :size="size" :ui="ui">
-    <template v-if="$slots.trigger" #trigger="scope">
-      <slot name="trigger" v-bind="scope" />
-    </template>
-  </FilterPanel>
-</template>

package/dist/runtime/table/components/data-list/DataListSortMenu.vue

@@ -1,110 +0,0 @@
-<script setup>
-import UButton from "@nuxt/ui/components/Button.vue";
-import UDropdownMenu from "@nuxt/ui/components/DropdownMenu.vue";
-import { computed } from "vue";
-import { useUiToolsLocale } from "#ui-tools/i18n";
-import { useDataListUi } from "../../composables/use-data-list-ui";
-import { useTableInternals } from "../../composables/use-table-internals";
-const props = defineProps({
-  label: { type: String, required: false },
-  size: { type: String, required: false },
-  ui: { type: Object, required: false }
-});
-const internals = useTableInternals();
-const dataListUi = useDataListUi();
-const { t } = useUiToolsLocale();
-const triggerProps = {
-  type: "button",
-  "aria-haspopup": "menu"
-};
-const resolvedSize = computed(
-  () => props.size ?? dataListUi.ui.value.sortMenu?.size ?? dataListUi.controlSize.value
-);
-const resolvedUi = computed(() => ({
-  ...dataListUi.ui.value.sortMenu?.ui,
-  ...props.ui
-}));
-const sortLabels = computed(() => {
-  const labels = /* @__PURE__ */ new Map();
-  for (const option of internals.schema.value.grid?.sortOptions ?? [])
-    labels.set(option.key, typeof option.label === "string" ? option.label : String(option.label()));
-  for (const column of internals.tableColumns.runtimeColumns.value)
-    if (column.sortableKey) labels.set(column.sortableKey, column.label);
-  return labels;
-});
-const activeKey = computed(() => internals.tableColumns.sortingState.value.key);
-const activeDirection = computed(() => internals.tableColumns.sortingState.value.dir);
-const directionIcon = computed(
-  () => activeDirection.value === "asc" ? "i-lucide-arrow-up-narrow-wide" : "i-lucide-arrow-down-wide-narrow"
-);
-const sortKeys = computed(() => [
-  .../* @__PURE__ */ new Set([
-    ...internals.tableColumns.sortKeys.value,
-    ...(internals.schema.value.grid?.sortOptions ?? []).map((option) => option.key)
-  ])
-]);
-const activeLabel = computed(
-  () => activeKey.value ? sortLabels.value.get(activeKey.value) ?? humanize(activeKey.value) : null
-);
-const items = computed(() => [
-  sortKeys.value.map((key) => ({
-    label: sortLabels.value.get(key) ?? humanize(key),
-    icon: activeKey.value === key ? "i-lucide-check" : void 0,
-    onSelect: () => internals.tableColumns.setSortKey(key)
-  })),
-  [
-    {
-      label: t("table.columnsMenu.sortAsc"),
-      icon: "i-lucide-arrow-up-narrow-wide",
-      onSelect: () => internals.tableColumns.setSortDirection("asc")
-    },
-    {
-      label: t("table.columnsMenu.sortDesc"),
-      icon: "i-lucide-arrow-down-wide-narrow",
-      onSelect: () => internals.tableColumns.setSortDirection("desc")
-    }
-  ]
-]);
-function humanize(value) {
-  return value.split(".").at(-1)?.replace(/[_-]+/g, " ").replace(/\b\w/g, (char) => char.toUpperCase()) ?? value;
-}
-</script>
-
-<template>
-  <UDropdownMenu
-    :size="resolvedSize"
-    :items="items"
-    :content="{ align: 'end', sideOffset: 8 }"
-    :ui="{
-  content: resolvedUi.content,
-  group: resolvedUi.group,
-  item: resolvedUi.item,
-  itemLeadingIcon: resolvedUi.itemLeadingIcon,
-  itemLabel: resolvedUi.itemLabel,
-  itemTrailingIcon: resolvedUi.itemTrailingIcon
-}"
-  >
-    <slot
-      name="trigger"
-      :label="activeLabel"
-      :sorting="internals.tableColumns.sortingState.value"
-      :set-sorting="internals.tableColumns.setSorting"
-      :trigger-props="triggerProps"
-    >
-      <UButton
-        color="neutral"
-        variant="outline"
-        :size="resolvedSize"
-        :label="`${label ?? t('table.controls.sort')}${activeLabel ? `: ${activeLabel}` : ''}`"
-        :icon="directionIcon"
-        trailing-icon="i-lucide-chevron-down"
-        :ui="{
-  base: resolvedUi.trigger,
-  label: resolvedUi.triggerLabel,
-  leadingIcon: resolvedUi.triggerLeadingIcon,
-  trailingIcon: resolvedUi.triggerTrailingIcon
-}"
-      />
-    </slot>
-  </UDropdownMenu>
-</template>

package/dist/runtime/table/components/drawers/ColumnPanel.vue

@@ -1,379 +0,0 @@
-<script setup>
-import UButton from "@nuxt/ui/components/Button.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 { useDataListUi } from "../../composables/use-data-list-ui";
-import { useTableInternals } from "../../composables/use-table-internals";
-import { mergeDataListUiClass } from "../../utils";
-const props = defineProps({
-  size: { type: String, required: false },
-  ui: { type: Object, required: false }
-});
-const internals = useTableInternals();
-const dataListUi = useDataListUi();
-const { t } = useUiToolsLocale();
-const ui = computed(() => ({
-  ...dataListUi.ui.value.columnPanel?.ui,
-  ...props.ui
-}));
-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 isVisible = internals.tableColumns.tableState.value.columnVisibility?.[columnId] !== false;
-  internals.tableColumns.setVisibility({ columnId, visible: !isVisible });
-}
-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(
-    'w-fit overflow-hidden 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
-        color="neutral"
-        variant="outline"
-        :size="props.size ?? dataListUi.ui.value.columnPanel?.size ?? dataListUi.controlSize.value"
-        icon="i-lucide-sliders-horizontal"
-        :label="t('table.controls.view')"
-        :ui="{ base: ui.trigger }"
-      />
-    </slot>
-
-    <template #content>
-      <div
-        :class="
-  mergeDataListUiClass('w-fit max-w-[calc(100vw-1rem)] bg-default', void 0, ui.panel)
-"
-      >
-        <div
-          :class="mergeDataListUiClass('border-b border-default p-2', 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="ghost"
-            :ui="{ root: mergeDataListUiClass('w-full', void 0, ui.search) }"
-          />
-        </div>
-
-        <div
-          :class="
-  mergeDataListUiClass('grid max-h-80 gap-1 overflow-y-auto p-2', void 0, ui.list)
-"
-        >
-          <div
-            v-if="!internals.controls.columnsPanelSearch.value"
-            :class="mergeDataListUiClass('grid gap-0.5', void 0, ui.section)"
-          >
-            <div
-              v-for="column in pinnedLeft"
-              :key="column.id"
-              :class="
-  mergeDataListUiClass(
-    'flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-elevated/70',
-    void 0,
-    ui.row
-  )
-"
-            >
-              <div
-                :class="
-  mergeDataListUiClass(
-    'flex size-6 items-center justify-center rounded-md text-muted',
-    void 0,
-    ui.icon
-  )
-"
-              >
-                <UIcon name="i-lucide-pin" class="size-4" />
-              </div>
-              <button
-                type="button"
-                class="flex min-w-0 flex-1 items-center gap-3 text-left"
-                @click="toggleColumn(column.id)"
-              >
-                <UIcon v-if="column.icon" :name="column.icon" class="size-4 text-muted" />
-                <span :class="mergeDataListUiClass('truncate text-default', void 0, ui.label)">{{
-                  column.label
-                }}</span>
-              </button>
-              <UIcon
-                :name="
-  internals.tableColumns.tableState.value.columnVisibility?.[column.id] === false ? 'i-lucide-eye-off' : 'i-lucide-check'
-"
-                class="size-4 shrink-0"
-                :class="
-  mergeDataListUiClass(
-    internals.tableColumns.tableState.value.columnVisibility?.[column.id] === false ? 'text-muted' : 'text-default',
-    void 0,
-    ui.stateIcon
-  )
-"
-              />
-            </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-0.5', void 0, ui.section)"
-            >
-              <div
-                v-for="column in draggableColumns"
-                :key="column.id"
-                :class="
-  mergeDataListUiClass(
-    'flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-elevated/70',
-    void 0,
-    ui.row
-  )
-"
-              >
-                <button
-                  type="button"
-                  :class="
-  mergeDataListUiClass(
-    'column-drag-handle flex size-6 cursor-grab items-center justify-center rounded-md text-muted hover:bg-elevated active:cursor-grabbing',
-    void 0,
-    ui.handle
-  )
-"
-                >
-                  <UIcon name="i-lucide-grip" class="size-4" />
-                </button>
-
-                <button
-                  type="button"
-                  class="flex min-w-0 flex-1 items-center gap-3 text-left"
-                  @click="toggleColumn(column.id)"
-                >
-                  <UIcon v-if="column.icon" :name="column.icon" class="size-4 text-muted" />
-                  <span
-                    :class="mergeDataListUiClass('truncate text-default', void 0, ui.label)"
-                    >{{ column.label }}</span
-                  >
-                </button>
-
-                <UIcon
-                  :name="
-  internals.tableColumns.tableState.value.columnVisibility?.[column.id] === false ? 'i-lucide-eye-off' : 'i-lucide-check'
-"
-                  class="size-4 shrink-0"
-                  :class="
-  mergeDataListUiClass(
-    internals.tableColumns.tableState.value.columnVisibility?.[column.id] === false ? 'text-muted' : 'text-default',
-    void 0,
-    ui.stateIcon
-  )
-"
-                />
-              </div>
-            </VueDraggable>
-
-            <div
-              v-for="column in pinnedRight"
-              :key="column.id"
-              :class="
-  mergeDataListUiClass(
-    'flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-elevated/70',
-    void 0,
-    ui.row
-  )
-"
-            >
-              <div
-                :class="
-  mergeDataListUiClass(
-    'flex size-6 items-center justify-center rounded-md text-muted',
-    void 0,
-    ui.icon
-  )
-"
-              >
-                <UIcon name="i-lucide-pin" class="size-4" />
-              </div>
-              <button
-                type="button"
-                class="flex min-w-0 flex-1 items-center gap-3 text-left"
-                @click="toggleColumn(column.id)"
-              >
-                <UIcon v-if="column.icon" :name="column.icon" class="size-4 text-muted" />
-                <span :class="mergeDataListUiClass('truncate text-default', void 0, ui.label)">{{
-                  column.label
-                }}</span>
-              </button>
-              <UIcon
-                :name="
-  internals.tableColumns.tableState.value.columnVisibility?.[column.id] === false ? 'i-lucide-eye-off' : 'i-lucide-check'
-"
-                class="size-4 shrink-0"
-                :class="
-  mergeDataListUiClass(
-    internals.tableColumns.tableState.value.columnVisibility?.[column.id] === false ? 'text-muted' : 'text-default',
-    void 0,
-    ui.stateIcon
-  )
-"
-              />
-            </div>
-          </div>
-
-          <div v-else :class="mergeDataListUiClass('grid gap-0.5', void 0, ui.section)">
-            <button
-              v-for="column in filteredColumns"
-              :key="column.id"
-              type="button"
-              :class="
-  mergeDataListUiClass(
-    'flex items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors hover:bg-elevated/70',
-    void 0,
-    ui.row
-  )
-"
-              @click="toggleColumn(column.id)"
-            >
-              <div
-                :class="
-  mergeDataListUiClass(
-    'flex size-6 items-center justify-center rounded-md text-muted',
-    void 0,
-    ui.icon
-  )
-"
-              >
-                <UIcon
-                  :name="
-  internals.tableColumns.getPinnedState({ columnId: column.id }) ? 'i-lucide-pin' : column.icon ?? 'i-lucide-columns-3'
-"
-                  class="size-4"
-                />
-              </div>
-              <span
-                :class="
-  mergeDataListUiClass('min-w-0 flex-1 truncate text-default', void 0, ui.label)
-"
-                >{{ column.label }}</span
-              >
-              <UIcon
-                :name="
-  internals.tableColumns.tableState.value.columnVisibility?.[column.id] === false ? 'i-lucide-eye-off' : 'i-lucide-check'
-"
-                class="size-4 shrink-0"
-                :class="
-  mergeDataListUiClass(
-    internals.tableColumns.tableState.value.columnVisibility?.[column.id] === false ? 'text-muted' : 'text-default',
-    void 0,
-    ui.stateIcon
-  )
-"
-              />
-            </button>
-          </div>
-        </div>
-
-        <div
-          :class="
-  mergeDataListUiClass(
-    'flex items-center justify-between gap-3 border-t border-default px-3 py-2',
-    void 0,
-    ui.footer
-  )
-"
-        >
-          <div :class="mergeDataListUiClass('text-sm text-muted', void 0, ui.footerSummary)">
-            {{ t("table.controls.configurableColumns", { count: configurableColumns.length }) }}
-          </div>
-
-          <UButton
-            color="neutral"
-            variant="ghost"
-            size="sm"
-            icon="i-lucide-rotate-ccw"
-            :label="t('table.controls.resetColumns')"
-            :ui="{ base: ui.reset }"
-            @click="internals.tableColumns.reset()"
-          />
-        </div>
-      </div>
-    </template>
-  </UPopover>
-</template>
-
-<style scoped>
-:deep(.column-panel-row-ghost){background-color:rgb(var(--ui-bg-elevated)/.55);opacity:.35}:deep(.column-panel-row-chosen){background-color:rgb(var(--ui-bg-elevated)/.8)}:deep(.column-panel-row-dragging){background-color:rgb(var(--ui-bg-default));box-shadow:0 12px 28px rgba(15,23,42,.14),0 2px 6px rgba(15,23,42,.08);opacity:1}
-</style>