nuxt-ui-tools 0.1.2 → 1.0.0

package/dist/runtime/spreadsheet/utils/validation/core.js

@@ -1,71 +1,82 @@
 import { useUiToolsLocale } from "#ui-tools/i18n";
-function isSpreadsheetRecord(value) {
-  return value !== null && typeof value === "object";
+import { isBoolean, isFunction } from "#ui-tools/shared/utils/predicate";
+import { isNullish } from "../../../shared/utils/predicate.js";
+import { isSpreadsheetRecord } from "../object.js";
+function isSpreadsheetMessageResolver(value) {
+  return isFunction(value);
+}
+function isSpreadsheetRuleFactory(value) {
+  return isFunction(value);
+}
+function resolveSpreadsheetMessage(value, context) {
+  if (isSpreadsheetMessageResolver(value)) {
+    return value(context);
+  }
+  return String(value);
 }
 function isSpreadsheetRuleOverride(value) {
   return isSpreadsheetRecord(value) && "message" in value;
 }
 function resolveSpreadsheetRuleFactoryInput(input) {
   const lastItem = input.at(-1);
-  if (!isSpreadsheetRuleOverride(lastItem))
+  if (!isSpreadsheetRuleOverride(lastItem)) {
     return {
-      params: input,
-      overrides: void 0
+      overrides: void 0,
+      params: input
     };
+  }
   return {
-    params: input.slice(0, -1),
-    overrides: lastItem
+    overrides: lastItem,
+    params: input.slice(0, -1)
   };
 }
 function createSpreadsheetRuleInstance(options) {
   return {
     $rule: true,
     flags: options.flags,
-    name: options.name,
     level: "error",
+    name: options.name,
     validate(value) {
       const messageResolver = options.message;
       const rawResult = options.validator(value, ...options.params);
-      if (typeof rawResult === "boolean") {
-        if (rawResult)
+      if (isBoolean(rawResult)) {
+        if (rawResult) {
           return {
-            $valid: true,
             $message: null,
-            $meta: Object.fromEntries([])
+            $meta: Object.fromEntries([]),
+            $valid: true
           };
+        }
         return {
-          $valid: false,
-          $message: typeof messageResolver === "function" ? String(
-            messageResolver({
-              $valid: false,
-              value,
-              params: options.params
-            })
-          ) : messageResolver,
-          $meta: Object.fromEntries([])
+          $message: resolveSpreadsheetMessage(messageResolver, {
+            $valid: false,
+            params: options.params,
+            value
+          }),
+          $meta: Object.fromEntries([]),
+          $valid: false
         };
       }
       const metaEntries = Object.entries(rawResult).filter(([key]) => key !== "$valid");
       const result = {
-        $valid: rawResult.$valid,
         $message: null,
-        $meta: Object.fromEntries(metaEntries)
+        $meta: Object.fromEntries(metaEntries),
+        $valid: rawResult.$valid
       };
-      if (result.$valid)
+      if (result.$valid) {
         return {
-          $valid: true,
           $message: null,
-          $meta: result.$meta
+          $meta: result.$meta,
+          $valid: true
         };
+      }
       return {
         ...result,
-        $message: typeof messageResolver === "function" ? String(
-          messageResolver({
-            value,
-            params: options.params,
-            ...rawResult
-          })
-        ) : messageResolver
+        $message: resolveSpreadsheetMessage(messageResolver, {
+          params: options.params,
+          value,
+          ...rawResult
+        })
       };
     }
   };
@@ -75,100 +86,104 @@ function createRule(options) {
     const { params, overrides } = resolveSpreadsheetRuleFactoryInput(input);
     return createSpreadsheetRuleInstance({
       flags: options.flags,
+      message: overrides?.message ?? options.message,
       name: options.name,
-      validator: options.validator,
       params,
-      message: overrides?.message ?? options.message
+      validator: options.validator
     });
   };
 }
 function validate(options) {
   const createInlineRule = createRule({
+    message: options.message,
     name: options.name,
-    validator: options.validator,
-    message: options.message
+    validator: options.validator
   });
   return createInlineRule();
 }
 function createNumericValueGuard(value) {
   return !Number.isNaN(value) && Number.isFinite(value);
 }
-const createSpreadsheetRuleBuilder = () => {
+function createSpreadsheetRuleBuilder() {
   const { t } = useUiToolsLocale();
   return {
-    validate,
-    required: createRule({
-      name: "required",
-      flags: { required: true },
-      validator: (value) => value != null && value !== "",
-      message: () => t("spreadsheet.validation.required")
+    between: createRule({
+      message: ({ value, params: [min, max] }) => t("spreadsheet.validation.between", { max, min, value }),
+      name: "between",
+      validator: (value, min, max) => ({
+        $valid: createNumericValueGuard(value) && value >= min && value <= max,
+        max,
+        min
+      })
+    }),
+    max: createRule({
+      message: ({ value, params: [max] }) => t("spreadsheet.validation.max", { max, value }),
+      name: "max",
+      validator: (value, max) => ({
+        $valid: createNumericValueGuard(value) && value <= max,
+        max
+      })
     }),
     maxLength: createRule({
+      message: ({ value, params: [max] }) => t("spreadsheet.validation.maxLength", { length: value.length, max }),
       name: "maxLength",
       validator: (value, max) => ({
         $valid: value.length <= max,
         max
-      }),
-      message: ({ value, params: [max] }) => t("spreadsheet.validation.maxLength", { max, length: value.length })
+      })
+    }),
+    min: createRule({
+      message: ({ value, params: [min] }) => t("spreadsheet.validation.min", { min, value }),
+      name: "min",
+      validator: (value, min) => ({
+        $valid: createNumericValueGuard(value) && value >= min,
+        min
+      })
     }),
     minLength: createRule({
+      message: ({ value, params: [min] }) => t("spreadsheet.validation.minLength", { length: value.length, min }),
       name: "minLength",
       validator: (value, min) => ({
         $valid: value.length >= min,
         min
-      }),
-      message: ({ value, params: [min] }) => t("spreadsheet.validation.minLength", { min, length: value.length })
+      })
     }),
     number: createRule({
+      message: () => t("spreadsheet.validation.number"),
       name: "number",
-      validator: (value) => createNumericValueGuard(value),
-      message: () => t("spreadsheet.validation.number")
-    }),
-    min: createRule({
-      name: "min",
-      validator: (value, min) => ({
-        $valid: createNumericValueGuard(value) && value >= min,
-        min
-      }),
-      message: ({ value, params: [min] }) => t("spreadsheet.validation.min", { value, min })
-    }),
-    max: createRule({
-      name: "max",
-      validator: (value, max) => ({
-        $valid: createNumericValueGuard(value) && value <= max,
-        max
-      }),
-      message: ({ value, params: [max] }) => t("spreadsheet.validation.max", { value, max })
-    }),
-    between: createRule({
-      name: "between",
-      validator: (value, min, max) => ({
-        $valid: createNumericValueGuard(value) && value >= min && value <= max,
-        min,
-        max
-      }),
-      message: ({ value, params: [min, max] }) => t("spreadsheet.validation.between", { value, min, max })
+      validator: (value) => createNumericValueGuard(value)
     }),
     oneOf(values, overrides) {
       const ruleFactory = createRule({
+        message: ({ value, params: [allowedValues] }) => t("spreadsheet.validation.oneOf", {
+          value: String(value),
+          values: allowedValues.map(String).join(", ")
+        }),
         name: "oneOf",
         validator: (value, allowedValues) => ({
           $valid: allowedValues.includes(value),
           values: allowedValues
-        }),
-        message: ({ value, params: [allowedValues] }) => t("spreadsheet.validation.oneOf", {
-          value: String(value),
-          values: allowedValues.map(String).join(", ")
         })
       });
       return ruleFactory(values, overrides);
-    }
+    },
+    required: createRule({
+      flags: { required: true },
+      message: () => t("spreadsheet.validation.required"),
+      name: "required",
+      validator: (value) => !isNullish(value) && value !== ""
+    }),
+    validate
   };
-};
+}
 export const createSheetRule = createRule;
 export function resolveSpreadsheetRules(rules) {
-  if (!rules) return [];
-  if (typeof rules === "function") return rules(createSpreadsheetRuleBuilder());
+  if (!rules) {
+    return [];
+  }
+  if (isSpreadsheetRuleFactory(rules)) {
+    return rules(createSpreadsheetRuleBuilder());
+  }
   return rules;
 }
 export function resolveSpreadsheetRelationRules(params) {
@@ -176,16 +191,20 @@ export function resolveSpreadsheetRelationRules(params) {
 }
 export function executeSpreadsheetRules(params) {
   const rules = resolveSpreadsheetRules(params.rules);
-  if (!rules.length) return [];
+  if (!rules.length) {
+    return [];
+  }
   return rules.flatMap((rule, index) => {
     const result = rule.validate(params.value);
-    if (result.$valid) return [];
+    if (result.$valid) {
+      return [];
+    }
     return [
       {
-        ruleKey: rule.name,
-        level: rule.level,
         code: rule.name ?? `rule.${index}`,
-        message: result.$message ?? ""
+        level: rule.level,
+        message: result.$message ?? "",
+        ruleKey: rule.name
       }
     ];
   });

package/dist/runtime/table/builders/index.d.ts

@@ -1,7 +1,7 @@
 import type { GenericObject, TableColumnBuilder, TableColumnCollection, TableFilterBuilder, TableSortKey, TableUiFilterCollection, TableUiFilterDefinition } from '../types/index.js';
+export { type TableSortKey } from '../types/index.js';
 export declare function createTableColumnBuilder<TRow extends GenericObject, TContext extends GenericObject, TPageContext extends GenericObject, TSortKey extends string = TableSortKey<TRow>>(): TableColumnBuilder<TRow, TContext, TPageContext, TSortKey>;
 export declare function createTableFilterBuilder<TRow extends GenericObject, TContext extends GenericObject = GenericObject>(): TableFilterBuilder<TRow, TContext>;
 export declare function resolveCollection<TBuilder, TResult>(collection: TResult | ((builder: TBuilder) => TResult) | undefined, builder: TBuilder): TResult | undefined;
 export declare function resolveColumns<TRow extends GenericObject, TContext extends GenericObject, TPageContext extends GenericObject, TSortKey extends string = TableSortKey<TRow>, TColumns extends TableColumnCollection<TRow, TContext, TPageContext, string, TSortKey> | undefined = TableColumnCollection<TRow, TContext, TPageContext, string, TSortKey> | undefined>(columns: TColumns): TColumns extends (...args: never[]) => infer TResult ? TResult : TColumns;
 export declare function resolveUiFilters<TRow extends GenericObject, TContext extends GenericObject, TKey extends string>(filters: TableUiFilterCollection<TRow, TContext, TKey> | undefined): TableUiFilterDefinition<TRow, TContext, TKey>[] | undefined;
-export type { TableSortKey };

package/dist/runtime/table/builders/index.js

@@ -1,24 +1,25 @@
+import { isFunction } from "../../shared/utils/predicate.js";
 export function createTableColumnBuilder() {
   return {
-    field(field, options = {}) {
+    composite(key, options) {
       return {
-        kind: "field",
-        key: field,
-        field,
+        key,
+        kind: "composite",
         ...options
       };
     },
-    composite(key, options) {
+    display(key, options) {
       return {
-        kind: "composite",
         key,
+        kind: "display",
         ...options
       };
     },
-    display(key, options) {
+    field(field, options = {}) {
       return {
-        kind: "display",
-        key,
+        field,
+        key: field,
+        kind: "field",
         ...options
       };
     }
@@ -26,38 +27,38 @@ export function createTableColumnBuilder() {
 }
 export function createTableFilterBuilder() {
   return {
-    text(key, options) {
+    boolean(key, options) {
       return {
-        kind: "text",
         key,
+        kind: "boolean",
         ...options
       };
     },
-    option(key, options) {
+    date(key, options) {
       return {
-        kind: "option",
         key,
+        kind: "date",
         ...options
       };
     },
-    boolean(key, options) {
+    number(key, options) {
       return {
-        kind: "boolean",
         key,
+        kind: "number",
         ...options
       };
     },
-    number(key, options) {
+    option(key, options) {
       return {
-        kind: "number",
         key,
+        kind: "option",
         ...options
       };
     },
-    date(key, options) {
+    text(key, options) {
       return {
-        kind: "date",
         key,
+        kind: "text",
         ...options
       };
     }
@@ -67,11 +68,14 @@ export function resolveCollection(collection, builder) {
   if (!collection) {
     return void 0;
   }
-  if (typeof collection === "function") {
+  if (isCollectionResolver(collection)) {
     return collection(builder);
   }
   return collection;
 }
+function isCollectionResolver(value) {
+  return isFunction(value);
+}
 export function resolveColumns(columns) {
   return resolveCollection(
     columns,

package/dist/runtime/table/components/actions/{RowActions.d.vue.ts → row-actions.d.vue.ts}

@@ -9,12 +9,17 @@ type __VLS_Props = {
     size?: DataListControlSize;
     ui?: DropdownMenuProps['ui'];
 };
-declare var __VLS_9: {
+declare var __VLS_8: {
+    items: import("@nuxt/ui/runtime/components/DropdownMenu.d.vue.js").DropdownMenuItem[];
+    open: boolean;
+}, __VLS_24: {
     items: import("@nuxt/ui/runtime/components/DropdownMenu.d.vue.js").DropdownMenuItem[];
     open: boolean;
 };
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_9) => any;
+    default?: (props: typeof __VLS_8) => any;
+} & {
+    default?: (props: typeof __VLS_24) => any;
 };
 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/actions/row-actions.vue

@@ -0,0 +1,111 @@
+<script setup>
+import UDrawer from "@nuxt/ui/components/Drawer.vue";
+import UDropdownMenu from "@nuxt/ui/components/DropdownMenu.vue";
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { computed, ref, useAttrs } from "vue";
+import { useDataListBreakpoint } from "../../composables/use-data-list-breakpoint";
+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 { isMobile } = useDataListBreakpoint();
+const sheetOpen = ref(false);
+const sheetItems = computed(() => {
+  const groups = Array.isArray(items.value[0]) ? items.value : [items.value];
+  return groups.flatMap(
+    (group, index) => group.map((item, itemIndex) => ({ ...item, dividerBefore: index > 0 && itemIndex === 0 }))
+  );
+});
+function runSheetItem(item) {
+  sheetOpen.value = false;
+  item.onSelect?.(new Event("select"));
+}
+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>
+  <UDrawer
+    v-if="scope && visibleActions.length && items.length && isMobile"
+    v-model:open="sheetOpen"
+    direction="bottom"
+    title="Actions"
+    :ui="{
+  header: 'sr-only',
+  content: 'nut-dl-sheet rounded-t-[16px]',
+  container: 'gap-0 p-0',
+  body: 'p-0 pb-4'
+}"
+  >
+    <slot :items="items" :open="sheetOpen" />
+    <template #body>
+      <div class="px-[10px] pt-2">
+        <template v-for="(item, index) in sheetItems" :key="index">
+          <div v-if="item.dividerBefore" class="my-1 border-t border-default" />
+          <button
+            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 disabled:opacity-40"
+            :class="item.color === 'error' ? 'text-error' : ''"
+            :disabled="Boolean(item.disabled)"
+            @click="runSheetItem(item)"
+          >
+            <UIcon
+              v-if="item.icon"
+              :name="item.icon"
+              class="size-4 shrink-0 text-muted"
+              :class="item.color === 'error' ? 'text-error' : ''"
+            />
+            <span class="min-w-0 flex-1 truncate">{{ item.label }}</span>
+          </button>
+        </template>
+      </div>
+    </template>
+  </UDrawer>
+  <UDropdownMenu
+    v-else-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/actions/{RowActions.vue.d.ts → row-actions.vue.d.ts}

@@ -9,12 +9,17 @@ type __VLS_Props = {
     size?: DataListControlSize;
     ui?: DropdownMenuProps['ui'];
 };
-declare var __VLS_9: {
+declare var __VLS_8: {
+    items: import("@nuxt/ui/runtime/components/DropdownMenu.d.vue.js").DropdownMenuItem[];
+    open: boolean;
+}, __VLS_24: {
     items: import("@nuxt/ui/runtime/components/DropdownMenu.d.vue.js").DropdownMenuItem[];
     open: boolean;
 };
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_9) => any;
+    default?: (props: typeof __VLS_8) => any;
+} & {
+    default?: (props: typeof __VLS_24) => any;
 };
 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/actions/{TableRowScopeProvider.d.vue.ts → table-row-scope-provider.d.vue.ts}

@@ -1,4 +1,4 @@
-import { type TableInjectedRowActionScope } from '../../composables/use-table-row-actions.js';
+import type { TableInjectedRowActionScope } from '../../composables/use-table-row-actions.js';
 type __VLS_Props = {
     scope: TableInjectedRowActionScope;
 };

package/dist/runtime/table/components/actions/{TableRowScopeProvider.vue → table-row-scope-provider.vue}

@@ -1,8 +1,6 @@
 <script setup>
 import { computed } from "vue";
-import {
-  provideTableRowActionScope
-} from "../../composables/use-table-row-actions";
+import { provideTableRowActionScope } from "../../composables/use-table-row-actions";
 const props = defineProps({
   scope: { type: Object, required: true }
 });

package/dist/runtime/table/components/actions/{TableRowScopeProvider.vue.d.ts → table-row-scope-provider.vue.d.ts}

@@ -1,4 +1,4 @@
-import { type TableInjectedRowActionScope } from '../../composables/use-table-row-actions.js';
+import type { TableInjectedRowActionScope } from '../../composables/use-table-row-actions.js';
 type __VLS_Props = {
     scope: TableInjectedRowActionScope;
 };

package/dist/runtime/table/components/{filters/panel/FilterPanel.d.vue.ts → data-list/data-list-actions-dropdown.d.vue.ts}

@@ -1,21 +1,22 @@
-import type { DataListControlSize, DataListFilterPanelUi } from '../../../types/index.js';
+import type { VNodeChild } from 'vue';
+import type { DataListControlSize } from '../../types/index.js';
 type __VLS_Props = {
     size?: DataListControlSize;
-    ui?: DataListFilterPanelUi;
+    label?: string;
+    icon?: string;
 };
 type __VLS_Slots = {
     trigger?: (props: {
-        open: () => void;
-        close: () => void;
-        toggle: () => void;
-        openState: boolean;
         triggerProps: {
             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_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    label: string;
+    icon: string;
+}, {}, {}, {}, 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;

package/dist/runtime/table/components/data-list/data-list-actions-dropdown.vue

@@ -0,0 +1,57 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import UDropdownMenu from "@nuxt/ui/components/DropdownMenu.vue";
+import { computed } from "vue";
+import { useDataListUi } from "../../composables/use-data-list-ui";
+import { useTableInternals } from "../../composables/use-table-internals";
+import { resolveTableActionLabel } from "../../utils/actions";
+const props = defineProps({
+  size: { type: String, required: false },
+  label: { type: String, required: false, default: "Actions" },
+  icon: { type: String, required: false, default: "i-lucide-zap" }
+});
+const internals = useTableInternals();
+const dataListUi = useDataListUi();
+const size = computed(() => props.size ?? dataListUi.controlSize.value);
+const actions = computed(() => internals.actions.toolbarActions.value);
+const items = computed(() => [
+  actions.value.map((action) => {
+    const item = {
+      ...action.definition,
+      disabled: action.state.disabled,
+      label: resolveTableActionLabel(action.definition.label),
+      loading: action.state.loading || action.running,
+      onSelect: () => void action.execute()
+    };
+    delete item.condition;
+    delete item.action;
+    delete item.requiresSelection;
+    return item;
+  })
+]);
+defineSlots();
+</script>
+
+<template>
+  <UDropdownMenu
+    v-if="actions.length"
+    :items="items"
+    :size="size"
+    :content="{ align: 'end', side: 'bottom', sideOffset: 8 }"
+    :ui="{ content: 'w-fit min-w-48 p-1' }"
+  >
+    <template #default="{ open }">
+      <slot name="trigger" :trigger-props="{ type: 'button', 'aria-expanded': open }">
+        <UButton
+          color="neutral"
+          variant="outline"
+          :size="size"
+          :icon="props.icon"
+          :label="props.label"
+          trailing-icon="i-lucide-chevron-down"
+          :aria-expanded="open"
+        />
+      </slot>
+    </template>
+  </UDropdownMenu>
+</template>