@naptics/vue-collection 0.3.2 → 1.0.0-beta.1

package/components/NSelect.js

@@ -1,101 +0,0 @@
-import { Fragment as _Fragment, createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
-import { trsl } from '../i18n';
-import { createComponent } from '../utils/component';
-import { ref } from 'vue';
-import NTooltip, { mapTooltipProps, nToolTipPropsForImplementor } from './NTooltip';
-import NValInput, { nValInputProps } from './NValInput';
-export const nSelectProps = {
-  /**
-   * The id of the currently selected option of this input.
-   */
-  value: String,
-  /**
-   * This is called with the newly selected id when the selection has changed.
-   * If no id is selected, the empty string is passed, in order to
-   * match the API of all other inputs who never pass `undefined`.
-   */
-  onUpdateValue: Function,
-  /**
-   * The different options which can be selected.
-   */
-  options: {
-    type: Array,
-    default: () => []
-  },
-  /**
-   * The value which is shown in the empty state.
-   * The "nothing-option" will be called like this.
-   */
-  placeholder: {
-    type: String,
-    default: () => trsl('vue-collection.action.select')
-  },
-  /**
-   * @see {@link nValInputProps.name}
-   */
-  name: nValInputProps.name,
-  /**
-   * @see {@link nValInputProps.optional}
-   */
-  optional: nValInputProps.optional,
-  /**
-   * @see {@link nValInputProps.disabled}
-   */
-  disabled: nValInputProps.disabled,
-  /**
-   * @see {@link nValInputProps.form}
-   */
-  form: nValInputProps.form,
-  /**
-   * @see {@link nValInputProps.hideLabel}
-   */
-  hideLabel: nValInputProps.hideLabel,
-  /**
-   * @see {@link nValInputProps.inputClass}
-   */
-  inputClass: nValInputProps.inputClass,
-  ...nToolTipPropsForImplementor
-};
-/**
- * The `NSelect` is a styled html select-input.
- */
-const Component = createComponent('NSelect', nSelectProps, (props, context) => {
-  const inputRef = ref();
-  const exposed = {
-    focus: () => inputRef.value?.focus(),
-    validate: () => {
-      if (inputRef.value == null) throw new Error('Can not validate NSelect as its input was undefined');
-      return inputRef.value.validate();
-    },
-    reset: () => inputRef.value?.reset()
-  };
-  context.expose(exposed);
-  return () => _createVNode(NValInput, _mergeProps({
-    "ref": inputRef
-  }, props, {
-    "input": slotProps => _createVNode(_Fragment, null, [props.name && !props.hideLabel && _createVNode("label", {
-      "for": props.name,
-      "class": ['block text-sm font-medium mb-1', props.disabled ? 'text-default-300' : 'text-default-700']
-    }, [props.name]), _createVNode(NTooltip, _mergeProps({
-      "block": true
-    }, mapTooltipProps(props)), {
-      default: () => [_createVNode("select", {
-        "name": props.name,
-        "disabled": props.disabled,
-        "value": props.value,
-        "onChange": event => slotProps.onUpdateValue(event.target.value),
-        "onBlur": slotProps.onBlur,
-        "class": ['block w-full py-2 pl-4 pr-10 rounded-md border focus:outline-none focus:ring-1', props.disabled ? 'text-default-300 ' : 'text-default-900 ', slotProps.error ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : 'border-default-300 focus:border-primary-500 focus:ring-primary-500', props.inputClass]
-      }, [_createVNode("option", {
-        "disabled": !props.optional,
-        "selected": !props.value,
-        "value": ""
-      }, [props.placeholder]), props.options.map(option => _createVNode("option", {
-        "key": option.id,
-        "value": option.id,
-        "selected": props.value == option.id
-      }, [option.label]))])]
-    })])
-  }), null);
-});
-export { Component as NSelect, Component as default };

package/components/NSuggestionList.d.ts

@@ -1,153 +0,0 @@
-import type { Identifiable } from '../utils/identifiable';
-import { type PropType } from 'vue';
-import type { AnyObject } from '../utils/utils';
-export declare const nSuggestionListPropsForConfig: {
-    /**
-     * The items which are available to show in the list. The first `maxItems` will be displayed.
-     */
-    readonly items: {
-        readonly type: PropType<Array<SuggestionItem>>;
-        readonly default: () => never[];
-    };
-    /**
-     * The maximum items which are displayed in the list.
-     */
-    readonly maxItems: {
-        readonly type: NumberConstructor;
-        readonly default: () => number;
-    };
-    /**
-     * If set to `true` the list is hidden.
-     */
-    readonly hideList: BooleanConstructor;
-    /**
-     * If set to `true` the list shows a loading indicator when the `items` array is empty.
-     */
-    readonly loading: BooleanConstructor;
-    /**
-     * This is called with the id of the selected item.
-     */
-    readonly onSelect: PropType<(id: string) => void>;
-    /**
-     * The slot for every item of the list.
-     */
-    readonly listItem: PropType<(props: ItemSlotProps) => JSX.Element>;
-    /**
-     * This function is called, when the input and the suggestion list are really blurred.
-     * This means, it's not just the input temporarly beeing blurred because the user clicks on the item list,
-     * but the focus has completely disappeared from the input and the list.
-     */
-    readonly onRealBlur: PropType<() => void>;
-};
-export declare const nSuggestionListPropsForInput: {
-    /**
-     * The slot for the input, which will be enhanced with the suggestion list.
-     */
-    readonly input: {
-        readonly type: PropType<(props: InputSlotProps) => JSX.Element>;
-        readonly required: true;
-    };
-    /**
-     * When this function is called, the parent is required to call focus() on the input element.
-     * It won't work properly if the parent does not request focus on the input.
-     */
-    readonly onRequestInputFocus: {
-        readonly type: PropType<() => void>;
-        readonly required: true;
-    };
-    /**
-     * The current value of the input. This is just needed to display the «No results found for {value}» message.
-     */
-    readonly inputValue: {
-        readonly type: StringConstructor;
-        readonly required: true;
-    };
-};
-export declare const nSuggestionListProps: {
-    /**
-     * The slot for the input, which will be enhanced with the suggestion list.
-     */
-    readonly input: {
-        readonly type: PropType<(props: InputSlotProps) => JSX.Element>;
-        readonly required: true;
-    };
-    /**
-     * When this function is called, the parent is required to call focus() on the input element.
-     * It won't work properly if the parent does not request focus on the input.
-     */
-    readonly onRequestInputFocus: {
-        readonly type: PropType<() => void>;
-        readonly required: true;
-    };
-    /**
-     * The current value of the input. This is just needed to display the «No results found for {value}» message.
-     */
-    readonly inputValue: {
-        readonly type: StringConstructor;
-        readonly required: true;
-    };
-    /**
-     * The items which are available to show in the list. The first `maxItems` will be displayed.
-     */
-    readonly items: {
-        readonly type: PropType<Array<SuggestionItem>>;
-        readonly default: () => never[];
-    };
-    /**
-     * The maximum items which are displayed in the list.
-     */
-    readonly maxItems: {
-        readonly type: NumberConstructor;
-        readonly default: () => number;
-    };
-    /**
-     * If set to `true` the list is hidden.
-     */
-    readonly hideList: BooleanConstructor;
-    /**
-     * If set to `true` the list shows a loading indicator when the `items` array is empty.
-     */
-    readonly loading: BooleanConstructor;
-    /**
-     * This is called with the id of the selected item.
-     */
-    readonly onSelect: PropType<(id: string) => void>;
-    /**
-     * The slot for every item of the list.
-     */
-    readonly listItem: PropType<(props: ItemSlotProps) => JSX.Element>;
-    /**
-     * This function is called, when the input and the suggestion list are really blurred.
-     * This means, it's not just the input temporarly beeing blurred because the user clicks on the item list,
-     * but the focus has completely disappeared from the input and the list.
-     */
-    readonly onRealBlur: PropType<() => void>;
-};
-export type InputSlotProps = {
-    /**
-     * Should be called when the input receives focus.
-     */
-    onFocus(): void;
-    /**
-     * Should be called when the input is blurred.
-     */
-    onBlur(): void;
-};
-export type ItemSlotProps<T extends Identifiable = SuggestionItem> = {
-    /**
-     * The current item of the list
-     */
-    item: T;
-    /**
-     * Is true, when the current item is highlighted ("hovered" with the keys)
-     */
-    highlighted: boolean;
-};
-export type SuggestionItem = Identifiable & {
-    label?: string;
-} & AnyObject;
-/**
- * The `NSuggestionList` can be added to an input and adds a list below it which is shown when the input is focused.
- */
-declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
-export { Component as NSuggestionList, Component as default };

package/components/NSuggestionList.js

@@ -1,160 +0,0 @@
-import { createVNode as _createVNode, createTextVNode as _createTextVNode } from "vue";
-import { trsl } from '../i18n';
-import { createComponentWithSlots } from '../utils/component';
-import { computed, ref } from 'vue';
-import NLoadingIndicator from './NLoadingIndicator';
-export const nSuggestionListPropsForConfig = {
-  /**
-   * The items which are available to show in the list. The first `maxItems` will be displayed.
-   */
-  items: {
-    type: Array,
-    default: () => []
-  },
-  /**
-   * The maximum items which are displayed in the list.
-   */
-  maxItems: {
-    type: Number,
-    default: () => 8
-  },
-  /**
-   * If set to `true` the list is hidden.
-   */
-  hideList: Boolean,
-  /**
-   * If set to `true` the list shows a loading indicator when the `items` array is empty.
-   */
-  loading: Boolean,
-  /**
-   * This is called with the id of the selected item.
-   */
-  onSelect: Function,
-  /**
-   * The slot for every item of the list.
-   */
-  listItem: Function,
-  /**
-   * This function is called, when the input and the suggestion list are really blurred.
-   * This means, it's not just the input temporarly beeing blurred because the user clicks on the item list,
-   * but the focus has completely disappeared from the input and the list.
-   */
-  onRealBlur: Function
-};
-export const nSuggestionListPropsForInput = {
-  /**
-   * The slot for the input, which will be enhanced with the suggestion list.
-   */
-  input: {
-    type: Function,
-    required: true
-  },
-  /**
-   * When this function is called, the parent is required to call focus() on the input element.
-   * It won't work properly if the parent does not request focus on the input.
-   */
-  onRequestInputFocus: {
-    type: Function,
-    required: true
-  },
-  /**
-   * The current value of the input. This is just needed to display the «No results found for {value}» message.
-   */
-  inputValue: {
-    type: String,
-    required: true
-  }
-};
-export const nSuggestionListProps = {
-  ...nSuggestionListPropsForConfig,
-  ...nSuggestionListPropsForInput
-};
-/**
- * The `NSuggestionList` can be added to an input and adds a list below it which is shown when the input is focused.
- */
-const Component = createComponentWithSlots('NSuggestionList', nSuggestionListProps, ['input', 'listItem'], props => {
-  const selectedIndex = ref(null);
-  const displayItems = computed(() => props.items.slice(0, props.maxItems));
-  const isInFocus = ref(false);
-  const showList = computed(() => isInFocus.value && !props.hideList);
-  let listButtonClicked = false;
-  const onFocus = () => isInFocus.value = true;
-  const onListMouseDown = () => listButtonClicked = true;
-  const onListMouseLeave = () => props.onRequestInputFocus();
-  const onBlur = () => {
-    if (!listButtonClicked) {
-      isInFocus.value = false;
-      props.onRealBlur?.();
-    }
-    listButtonClicked = false;
-  };
-  const onSelect = id => {
-    props.onSelect?.(id);
-    props.onRequestInputFocus();
-  };
-  const keydown = event => {
-    if (event.key == 'ArrowDown') {
-      event.preventDefault();
-      nextItem();
-    } else if (event.key == 'ArrowUp') {
-      event.preventDefault();
-      previoiusItem();
-    } else if (event.key == 'Enter') {
-      event.preventDefault();
-      const index = selectedIndex.value;
-      if (index != null && index < displayItems.value.length) {
-        const item = displayItems.value[index];
-        if (item) {
-          onSelect(item.id);
-        }
-      }
-    }
-  };
-  const nextItem = () => {
-    adjustIndexToSize();
-    const currentIndex = selectedIndex.value;
-    let nextIndex = currentIndex == null ? 0 : currentIndex + 1;
-    if (nextIndex >= displayItems.value.length) nextIndex = null;
-    selectedIndex.value = nextIndex;
-  };
-  const previoiusItem = () => {
-    adjustIndexToSize();
-    const currentIndex = selectedIndex.value;
-    let previousIndex = currentIndex == null ? displayItems.value.length - 1 : currentIndex - 1;
-    if (previousIndex < 0) previousIndex = null;
-    selectedIndex.value = previousIndex;
-  };
-  const adjustIndexToSize = () => {
-    if (selectedIndex.value != null && selectedIndex.value >= displayItems.value.length) {
-      selectedIndex.value = null;
-    }
-  };
-  return () => _createVNode("div", {
-    "onKeydown": keydown
-  }, [props.input({
-    onFocus,
-    onBlur
-  }), _createVNode("div", {
-    "class": "relative"
-  }, [showList.value && _createVNode("div", {
-    "class": "bg-white rounded-md shadow-lg p-2 absolute top-2 left-0 min-w-full z-10"
-  }, [_createVNode("ul", null, [displayItems.value.map((item, index) => _createVNode("li", {
-    "key": item.id,
-    "class": ['focus:outline-none hover:bg-default-50 rounded-md select-none p-2 cursor-pointer', selectedIndex.value === index ? 'bg-default-50' : ''],
-    "onMousedown": onListMouseDown,
-    "onMouseleave": onListMouseLeave,
-    "onClick": () => onSelect(item.id)
-  }, [props.listItem?.({
-    item,
-    highlighted: selectedIndex.value === index
-  }) || item.label])), displayItems.value.length == 0 && _createVNode("div", {
-    "class": "p-2 text-sm font-medium text-default-700"
-  }, [props.loading ? _createVNode("div", {
-    "class": "flex items-center space-x-2"
-  }, [_createVNode(NLoadingIndicator, {
-    "size": 6
-  }, null), _createVNode("span", null, [_createTextVNode(" "), trsl('vue-collection.text.loading-search-results')])]) : _createVNode("div", null, [trsl('vue-collection.text.no-search-results', {
-    input: props.inputValue
-  })])])])])])]);
-});
-export { Component as NSuggestionList, Component as default };

package/components/NTable.css

@@ -1,3 +0,0 @@
-.table-heading {
-    @apply text-left text-xs font-medium text-default-500 uppercase tracking-wider;
-}

package/components/NTable.d.ts

@@ -1,97 +0,0 @@
-import { type TWBreakpoint } from '../utils/breakpoints';
-import { type PropType } from 'vue';
-import './NTable.css';
-export type TableItem = string | number | (() => JSX.Element);
-export type TableHeading = {
-    /**
-     * The key of the table heading. This should match the key of the items.
-     */
-    key: string;
-    /**
-     * The label of the table heading. If not set, no label is displayed.
-     */
-    label?: TableItem;
-    /**
-     * If set to `true` the whole column of this heading will be emphasized.
-     */
-    emph?: boolean;
-    /**
-     * This classes will be directly set to all cells in the column of this heading.
-     */
-    cellClass?: string;
-    /**
-     * This classes will be directly set on all cells of this heading, when they show up in the details.
-     */
-    detailsClass?: string;
-    /**
-     * If set the heading will become a details entry when the screen is smaller than the specified breakpoint.
-     */
-    breakpoint?: TWBreakpoint;
-    /**
-     * If set to `true`, this heading will always show up inside the details. If this is set the `breakpoint`
-     * property has no effect, because the items always show up as details ignoring the breakpoint.
-     */
-    isDetail?: boolean;
-};
-export type TableRow = Record<string, TableItem> & {
-    /**
-     * The TableItem is used as the last element of the table and
-     * merged together in one cell with the button to toggle the details.
-     */
-    action?: TableItem;
-    /**
-     * This classes will be applied to the whole table row.
-     */
-    rowClass?: string;
-    /**
-     * This classes will be applied to the whole details section of the row.
-     */
-    detailsClass?: string;
-};
-export declare const nTableProps: {
-    /**
-     * The headings of the table. These define which columns are shown in the table and in which order.
-     */
-    readonly headings: {
-        readonly type: PropType<TableHeading[]>;
-        readonly required: true;
-    };
-    /**
-     * Adds the classes to all headings at the top of the table.
-     */
-    readonly headingsClass: StringConstructor;
-    /**
-     * Adds the classes to all headings in the details of the table.
-     */
-    readonly headingDetailsClass: StringConstructor;
-    /**
-     * The items of the table. They consist of an array of table rows.
-     * Every tablerow is an object containing elements for the heading keys.
-     * The elements can either be a primitive value or a function which returns a {@link JSX.Element}.
-     * If the item should be treated as an action (e.g. icon-button to display at the end of the row)
-     * the dedicated key 'action' can be used.
-     * @see TableRow
-     * @example
-     * // These headings are defined
-     * const headings: TableHeading[] = [
-     *    { key: 'id', label: 'ID' },
-     *    { key: 'name', label: 'Name' },
-     *    { key: 'status', label: 'Status' }
-     * ]
-     *
-     * // Appropriate rows for these headings
-     * const items: TableRow[] = [
-     *      { id: 1, name: 'Hubert', status: () => <NBadge ... />, action: ... },   // Row 1
-     *      { id: 2, name: 'Franzi', status: () => <NBadge ... />, action: ... }    // Row 2
-     * ]
-     */
-    readonly items: {
-        readonly type: PropType<TableRow[]>;
-        readonly default: () => never[];
-    };
-};
-/**
- * The `NTable` is a styled html table which accepts data and displays it appropriately.
- */
-declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
-export { Component as NTable, Component as default };

package/components/NTable.js

@@ -1,128 +0,0 @@
-import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
-import { isWidthBreakpoint } from '../utils/breakpoints';
-import { createComponent } from '../utils/component';
-import { ChevronLeftIcon } from '@heroicons/vue/24/solid';
-import { computed, Fragment, ref, watch } from 'vue';
-import NIconButton from './NIconButton';
-import './NTable.css';
-const N_TABLE_ACTION_KEY = 'action';
-export const nTableProps = {
-  /**
-   * The headings of the table. These define which columns are shown in the table and in which order.
-   */
-  headings: {
-    type: Array,
-    required: true
-  },
-  /**
-   * Adds the classes to all headings at the top of the table.
-   */
-  headingsClass: String,
-  /**
-   * Adds the classes to all headings in the details of the table.
-   */
-  headingDetailsClass: String,
-  /**
-   * The items of the table. They consist of an array of table rows.
-   * Every tablerow is an object containing elements for the heading keys.
-   * The elements can either be a primitive value or a function which returns a {@link JSX.Element}.
-   * If the item should be treated as an action (e.g. icon-button to display at the end of the row)
-   * the dedicated key 'action' can be used.
-   * @see TableRow
-   * @example
-   * // These headings are defined
-   * const headings: TableHeading[] = [
-   *    { key: 'id', label: 'ID' },
-   *    { key: 'name', label: 'Name' },
-   *    { key: 'status', label: 'Status' }
-   * ]
-   *
-   * // Appropriate rows for these headings
-   * const items: TableRow[] = [
-   *      { id: 1, name: 'Hubert', status: () => <NBadge ... />, action: ... },   // Row 1
-   *      { id: 2, name: 'Franzi', status: () => <NBadge ... />, action: ... }    // Row 2
-   * ]
-   */
-  items: {
-    type: Array,
-    default: () => []
-  }
-};
-/**
- * The `NTable` is a styled html table which accepts data and displays it appropriately.
- */
-const Component = createComponent('NTable', nTableProps, props => {
-  const headings = computed(() => {
-    // filter out details headings
-    const headings = props.headings.filter(heading => !isHeadingDetail(heading));
-    // The column for actions is shown if there are details
-    // or if any of the items contain an element with the action-key.
-    if (showDetails.value || props.items.filter(row => row.action != null).length != 0) {
-      headings.push({
-        key: N_TABLE_ACTION_KEY
-      });
-    }
-    return headings;
-  });
-  const details = computed(() => props.headings.filter(isHeadingDetail));
-  const showDetails = computed(() => details.value.length > 0);
-  const detailsOpen = ref([]);
-  const isDetailsOpen = index => detailsOpen.value[index] || false;
-  const toggleDetailsOpen = index => detailsOpen.value[index] = !detailsOpen.value[index];
-  // if the items change, reset all open details to closed
-  // and create correct amount of booleans for all items
-  watch(() => props.items, newItems => detailsOpen.value = Array({
-    length: newItems.length
-  }).map(() => false), {
-    immediate: true
-  });
-  return () => _createVNode("div", {
-    "class": "overflow-x-auto"
-  }, [_createVNode("table", {
-    "class": "min-w-full text-default-500 text-sm"
-  }, [_createVNode("thead", {
-    "class": "bg-default-50 "
-  }, [_createVNode("tr", null, [headings.value.map(heading => _createVNode("th", {
-    "key": heading.key,
-    "scope": "col",
-    "class": `p-4 table-heading ${props.headingsClass}`
-  }, [buildItem(heading.label)]))])]), props.items.length > 0 && props.items.map((item, itemIndex) => _createVNode(_Fragment, {
-    "key": itemIndex
-  }, [_createVNode("tbody", {
-    "class": ['border-default-200 border-t', itemIndex % 2 === 0 ? 'bg-white' : 'bg-default-50', item.rowClass]
-  }, [_createVNode("tr", null, [headings.value.map(heading => _createVNode("td", {
-    "key": itemIndex + '-' + heading.key,
-    "class": "p-4"
-  }, [_createVNode("div", {
-    "class": ['flex', heading.emph ? 'font-medium text-default-900' : '', heading.cellClass, heading.key == N_TABLE_ACTION_KEY ? 'justify-end items-center space-x-3' : '']
-  }, [item[heading.key] && buildItem(item[heading.key]), heading.key == N_TABLE_ACTION_KEY && showDetails.value && _createVNode("div", {
-    "class": "inline-flex transition-transform duration-200",
-    "style": {
-      transform: isDetailsOpen(itemIndex) ? 'rotate(-90deg)' : 'rotate(0deg)',
-      transformOrigin: 'center center'
-    }
-  }, [_createVNode(NIconButton, {
-    "icon": ChevronLeftIcon,
-    "onClick": () => toggleDetailsOpen(itemIndex)
-  }, null)])])]))])]), showDetails.value && isDetailsOpen(itemIndex) && _createVNode("tbody", {
-    "class": [itemIndex % 2 === 0 ? 'bg-white' : 'bg-default-50', item.detailsClass]
-  }, [details.value.map((detail, detailIndex) => _createVNode("tr", {
-    "key": `detail-${detailIndex}`
-  }, [_createVNode("td", {
-    "class": ['table-heading px-4 py-1', props.headingDetailsClass, details.value.length - 1 == detailIndex ? 'pb-4' : '']
-  }, [buildItem(detail.label)]), _createVNode("td", {
-    "class": ['px-4 py-1', details.value[detailIndex]?.detailsClass, details.value.length - 1 == detailIndex ? 'pb-4' : ''],
-    "colspan": headings.value.length - 1
-  }, [item[detail.key] && buildItem(item[detail.key])])]))])]))])]);
-});
-export { Component as NTable, Component as default };
-/**
- * Builds a JSX-Element out of the item
- */
-function buildItem(item) {
-  if (item === undefined) return undefined;else if (typeof item == 'string' || typeof item == 'number') return _createVNode(_Fragment, null, [item]);else return item();
-}
-function isHeadingDetail(heading) {
-  // take all headings which are details or below the breakpoint
-  return heading.isDetail || heading.breakpoint !== undefined && !isWidthBreakpoint(heading.breakpoint).value;
-}

package/components/NTableAction.d.ts

@@ -1,30 +0,0 @@
-import type { PropType } from 'vue';
-import { type RouteLocationRaw } from 'vue-router';
-export declare const nTableActionProps: {
-    /**
-     * The route of the action. If set the component will be a {@link RouterLink}.
-     */
-    readonly route: PropType<RouteLocationRaw>;
-    /**
-     * The text of the action.
-     */
-    readonly text: StringConstructor;
-    /**
-     * The html attribute, which indicates the type of the button.
-     */
-    readonly type: {
-        readonly type: PropType<"submit" | "button" | "reset">;
-        readonly default: "button";
-    };
-    /**
-     * This is called when the action is clicked.
-     * It is only called when the `route` prop is not set on the action.
-     */
-    readonly onClick: PropType<() => void>;
-};
-/**
- * The `NTableAction` is a button or {@link RouterLink} which is styled to fit into a table.
- * It is basically styled as an emphasized text in the table.
- */
-declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
-export { Component as NTableAction, Component as default };