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

package/components/NDropdown.js

@@ -1,115 +0,0 @@
-import { createVNode as _createVNode, isVNode as _isVNode } from "vue";
-import { createComponentWithSlots } from '../utils/component';
-import { computed, Transition } from 'vue';
-import { RouterLink } from 'vue-router';
-import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue';
-import { ChevronDownIcon } from '@heroicons/vue/24/solid';
-function _isSlot(s) {
-  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
-}
-export const nDropdownProps = {
-  /**
-   * The title of the dropdown-button.
-   */
-  title: String,
-  /**
-   * The items of the dropdown.
-   * The second dimension of the array is used
-   * to create groups of items, which are visually seperated.
-   */
-  items: {
-    type: Array,
-    default: () => []
-  },
-  /**
-   * If set to `true` the panel is right-aligned to the button.
-   */
-  right: Boolean,
-  /**
-   * If set to `true` the dropdown-button is disabled and no interaction is possible.
-   */
-  disabled: Boolean,
-  /**
-   * Adds the classes to the Button of the dropdown.
-   */
-  buttonClass: String,
-  /**
-   * A slot to replace the button of the dropdown.
-   * The passed parameter is the HeadlessUI `MenuButton` which should be
-   * used to create the button for the Dropdown to work properly.
-   */
-  button: Function
-};
-/**
- * The `NDropdown` consists of a button and a panel with multiple actions.
- * It is useful to group multiple actions together in one place.
- */
-const Component = createComponentWithSlots('NDropdown', nDropdownProps, ['button'], (props, {
-  slots
-}) => {
-  const items = computed(() => {
-    if (props.items.length == 0) return [];
-    if (Array.isArray(props.items[0])) return props.items;else return [props.items];
-  });
-  const itemWithIcon = item => _createVNode("div", {
-    "class": "flex space-x-3 items-center"
-  }, [item.icon && _createVNode(item.icon, {
-    "class": ['h-5 w-5', item.disabled ? 'text-default-300' : 'text-default-400']
-  }, null), _createVNode("span", null, [item.label])]);
-  return () => _createVNode(Menu, {
-    "as": "div",
-    "class": `relative inline-block text-left`
-  }, {
-    default: () => [_createVNode("div", {
-      "class": "flex"
-    }, [props.button?.(MenuButton) || _createVNode(MenuButton, {
-      "disabled": props.disabled,
-      "class": ['shadow w-full flex justify-between items-center text-default-700 rounded-md border bg-white border-default-300 px-4 py-2 text-sm font-medium focus:outline-none focus:ring-offset-2 focus-visible:ring-2 focus-visible:ring-primary-500', props.disabled ? 'text-opacity-20 cursor-default' : 'hover:bg-default-100', props.buttonClass]
-    }, {
-      default: () => [_createVNode("span", null, [props.title]), _createVNode(ChevronDownIcon, {
-        "class": "-mr-1 ml-2 h-5 w-5 flex-shrink-0",
-        "aria-hidden": "true"
-      }, null)]
-    })]), _createVNode(Transition, {
-      "enterActiveClass": "transition ease-out duration-100",
-      "enterFromClass": "transform opacity-0 scale-95",
-      "enterToClass": "transform opacity-100 scale-100",
-      "leaveActiveClass": "transition ease-in duration-75",
-      "leaveFromClass": "transform opacity-100 scale-100",
-      "leaveToClass": "transform opacity-0 scale-95"
-    }, {
-      default: () => [_createVNode(MenuItems, {
-        "class": ['z-10 absolute w-56 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none', props.right ? 'origin-top-right right-0' : 'origin-top-left left-0']
-      }, {
-        default: () => [slots.default?.() || _createVNode("div", {
-          "class": "divide-y divide-default-200"
-        }, [items.value.map((group, index) => _createVNode("div", {
-          "key": `group-${index}`,
-          "class": "py-1"
-        }, [group.map((item, index) => _createVNode(MenuItem, {
-          "key": `item-${index}`,
-          "disabled": item.disabled
-        }, {
-          default: ({
-            active
-          }) => {
-            let _slot;
-            return item.disabled ? _createVNode("div", {
-              "class": "block px-4 py-2 text-sm text-default-300"
-            }, [itemWithIcon(item)]) : item.route ? _createVNode(RouterLink, {
-              "to": item.route,
-              "class": ['block px-4 py-2 text-sm', active ? 'bg-default-100 text-default-900' : 'text-default-700']
-            }, _isSlot(_slot = itemWithIcon(item)) ? _slot : {
-              default: () => [_slot]
-            }) : _createVNode("button", {
-              "type": "button",
-              "onClick": item.onClick,
-              "class": ['w-full text-left px-4 py-2 text-sm', active ? 'bg-default-100 text-default-900' : 'text-default-700']
-            }, [itemWithIcon(item)]);
-          }
-        }))]))])]
-      })]
-    })]
-  });
-});
-export { Component as NDropdown, Component as default };

package/components/NDropzone.d.ts

@@ -1,61 +0,0 @@
-export declare const nDropzoneProps: {
-    /**
-     * A description which files are allowed for this dropzone.
-     * This should include everything the user needs to know about
-     * the file type / the extensions and the maximum size of the file.
-     * @see {@link nDropzoneProps.accept}
-     * @see {@link nDropzoneProps.maxFileSize}
-     */
-    readonly description: StringConstructor;
-    /**
-     * The maximum amount of files which can be added to the dropzone.
-     */
-    readonly maxFiles: {
-        readonly type: NumberConstructor;
-        readonly default: 1;
-    };
-    /**
-     * Specifies which file types are accepted. The same syntax as with inputs of type file is used.
-     * Make sure to explain the requirements to the user in the {@link nDropzoneProps.description}.
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers
-     */
-    readonly accept: StringConstructor;
-    /**
-     * Specifies the maximum size of an individual file in bytes.
-     * Make sure to explain the max size to the user in the {@link nDropzoneProps.description}.
-     */
-    readonly maxFileSize: {
-        readonly type: NumberConstructor;
-        readonly default: number;
-    };
-    /**
-     * The maximum length of the file names.
-     * Files names longer than the specified amount of characters will be shortened.
-     * @see {@link maxLengthSplitCenter}
-     */
-    readonly maxLengthFileNames: {
-        readonly type: NumberConstructor;
-        readonly default: 35;
-    };
-    /**
-     * A tailwind height class, which is applied to the dropzone area.
-     * It is recommended to use `min-h-*` classes,
-     * so the box is always large enough to display it's text.
-     */
-    readonly height: {
-        readonly type: StringConstructor;
-        readonly default: "min-h-36";
-    };
-    /**
-     * If set to `true`, the dropzone is disabled and does not accept input anymore.
-     */
-    readonly disabled: BooleanConstructor;
-    readonly value: import("vue").PropType<File[]>;
-    readonly onUpdateValue: import("vue").PropType<(newValue: File[]) => void>;
-};
-/**
- * The `NDropzone` is an area where files can be added by the user by drag & drop.
- * Files can also be selected with a file chooser by clicking on the dropzone.
- */
-declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
-export { Component as NDropzone, Component as default };

package/components/NDropzone.js

@@ -1,218 +0,0 @@
-import { createVNode as _createVNode, Fragment as _Fragment, createTextVNode as _createTextVNode, isVNode as _isVNode } from "vue";
-import { trslc } from '../i18n';
-import { createComponent } from '../utils/component';
-import { maxLengthSplitCenter } from '../utils/stringMaxLength';
-import { notNullish } from '../utils/utils';
-import { XMarkIcon } from '@heroicons/vue/24/solid';
-import { computed, ref } from 'vue';
-import NBadge from './NBadge';
-import NIconButton from './NIconButton';
-import NLink from './NLink';
-import { vModelProps } from '../utils/vModel';
-function _isSlot(s) {
-  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
-}
-export const nDropzoneProps = {
-  ...vModelProps(Array),
-  /**
-   * A description which files are allowed for this dropzone.
-   * This should include everything the user needs to know about
-   * the file type / the extensions and the maximum size of the file.
-   * @see {@link nDropzoneProps.accept}
-   * @see {@link nDropzoneProps.maxFileSize}
-   */
-  description: String,
-  /**
-   * The maximum amount of files which can be added to the dropzone.
-   */
-  maxFiles: {
-    type: Number,
-    default: 1
-  },
-  /**
-   * Specifies which file types are accepted. The same syntax as with inputs of type file is used.
-   * Make sure to explain the requirements to the user in the {@link nDropzoneProps.description}.
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers
-   */
-  accept: String,
-  /**
-   * Specifies the maximum size of an individual file in bytes.
-   * Make sure to explain the max size to the user in the {@link nDropzoneProps.description}.
-   */
-  maxFileSize: {
-    type: Number,
-    default: 100 * 1024 * 1024
-  },
-  /**
-   * The maximum length of the file names.
-   * Files names longer than the specified amount of characters will be shortened.
-   * @see {@link maxLengthSplitCenter}
-   */
-  maxLengthFileNames: {
-    type: Number,
-    default: 35
-  },
-  /**
-   * A tailwind height class, which is applied to the dropzone area.
-   * It is recommended to use `min-h-*` classes,
-   * so the box is always large enough to display it's text.
-   */
-  height: {
-    type: String,
-    default: 'min-h-36'
-  },
-  /**
-   * If set to `true`, the dropzone is disabled and does not accept input anymore.
-   */
-  disabled: Boolean
-};
-/**
- * The `NDropzone` is an area where files can be added by the user by drag & drop.
- * Files can also be selected with a file chooser by clicking on the dropzone.
- */
-const Component = createComponent('NDropzone', nDropzoneProps, props => {
-  const fileError = ref();
-  const filterAndUpdateFiles = files => {
-    // filter for mime type and max size
-    const fileTypeFilteredFiles = files.filter(file => !props.accept || testFileWithAcceptString(props.accept, file));
-    const filteredFiles = fileTypeFilteredFiles.filter(file => file.size <= props.maxFileSize);
-    // filter for already existing files
-    const currentFiles = props.value || [];
-    filteredFiles.forEach(file => {
-      if (currentFiles.filter(currFile => currFile.name == file.name).length == 0) currentFiles.push(file);
-    });
-    // slice down to max amount of files
-    const newFiles = currentFiles.slice(0, props.maxFiles);
-    // error handling
-    const fileTypeFilterDiff = files.length - fileTypeFilteredFiles.length;
-    const fileSizeFilterDiff = fileTypeFilteredFiles.length - filteredFiles.length;
-    if (newFiles.length < currentFiles.length) fileError.value = trslc('vue-collection.error.too-many-files', props.maxFiles, {
-      max: props.maxFiles
-    });else if (fileSizeFilterDiff > 0) {
-      fileError.value = trslc('vue-collection.error.file-size', fileSizeFilterDiff, {
-        n: fileSizeFilterDiff
-      });
-    } else if (fileTypeFilterDiff > 0) fileError.value = trslc('vue-collection.error.file-type', fileTypeFilterDiff, {
-      n: fileTypeFilterDiff
-    });else fileError.value = undefined;
-    // update new value
-    props.onUpdateValue?.(newFiles);
-  };
-  const files = computed(() => props.value?.map((file, index) => ({
-    index,
-    name: maxLengthSplitCenter(file.name, props.maxLengthFileNames)
-  })) || []);
-  const removeFile = index => {
-    const newFiles = [...(props.value || [])];
-    newFiles.splice(index, 1);
-    fileError.value = undefined;
-    props.onUpdateValue?.(newFiles);
-  };
-  const clearFiles = () => {
-    fileError.value = undefined;
-    props.onUpdateValue?.([]);
-  };
-  const isDragOver = ref(false);
-  const onDrop = event => {
-    event.preventDefault();
-    isDragOver.value = false;
-    if (props.disabled) return;
-    const transfer = event.dataTransfer;
-    if (transfer == null) return;
-    if (transfer.items.length > 0) {
-      const items = [...transfer.items];
-      const files = items.map(item => item.kind === 'file' ? item.getAsFile() : null).filter(notNullish);
-      filterAndUpdateFiles(files);
-    } else {
-      filterAndUpdateFiles([...transfer.files]);
-    }
-  };
-  const onDragOver = event => {
-    event.preventDefault();
-    isDragOver.value = true;
-  };
-  const onDragLeave = () => {
-    isDragOver.value = false;
-  };
-  const onClick = () => {
-    fileInput.value?.click();
-  };
-  const fileInput = ref();
-  const onInputFilesChanged = () => {
-    const input = fileInput.value;
-    if (input != null) {
-      if (input.files != null) filterAndUpdateFiles([...input.files]);
-      input.value = '';
-    }
-  };
-  return () => {
-    let _slot;
-    return _createVNode("div", null, [_createVNode("button", {
-      "class": ['block w-full rounded-md border-dashed border-2  focus-visible:border-primary-500 focus:outline-none ', 'flex flex-col items-center justify-center text-center text-sm select-none p-4', !props.disabled ? 'hover:border-primary-300 hover:bg-primary-50 hover:text-primary-700' : '', props.disabled ? 'border-default-300 bg-default-50/50 text-default-500/30' : isDragOver.value ? 'border-primary-300 bg-primary-50 text-primary-700' : 'border-default-300 bg-default-50 text-default-500', props.height],
-      "onDrop": onDrop,
-      "onDragover": onDragOver,
-      "onDragleave": onDragLeave,
-      "onClick": onClick,
-      "type": "button",
-      "disabled": props.disabled
-    }, [_createVNode("input", {
-      "type": "file",
-      "class": "hidden",
-      "ref": fileInput,
-      "multiple": props.maxFiles > 1,
-      "accept": props.accept,
-      "onChange": onInputFilesChanged,
-      "onClick": event => event.stopPropagation()
-    }, null), _createVNode("div", {
-      "class": "flex-grow mb-2"
-    }, null), _createVNode("span", {
-      "class": "font-medium"
-    }, [trslc('vue-collection.text.drag-n-drop-files', props.maxFiles, {
-      n: props.maxFiles
-    })]), _createVNode("span", null, [props.description]), _createVNode("div", {
-      "class": "flex-grow mt-2 flex items-end justify-center text-red-500 font-medium"
-    }, [_createVNode("span", null, [fileError.value])])]), _createVNode("div", {
-      "class": "mt-2 space-y-1"
-    }, [_createVNode("div", {
-      "class": "flex flex-wrap gap-2 "
-    }, [files.value.map(file => _createVNode(NBadge, {
-      "key": file.index,
-      "color": "default",
-      "allCaps": false,
-      "textSize": "text-xs"
-    }, {
-      default: () => [_createVNode("div", {
-        "class": "flex items-center space-x-2"
-      }, [_createVNode("span", null, [file.name]), _createVNode(NIconButton, {
-        "icon": XMarkIcon,
-        "shade": 900,
-        "size": 3,
-        "onClick": () => removeFile(file.index)
-      }, null)])]
-    })), _createVNode("div", {
-      "class": "flex-grow text-sm text-default-500 flex items-end justify-end text-right"
-    }, [_createVNode("span", null, [_createVNode("span", null, [trslc('vue-collection.text.files-selected', files.value.length, {
-      n: files.value.length
-    })]), files.value.length > 0 && _createVNode(_Fragment, null, [_createVNode("span", null, [_createTextVNode(" ")]), _createVNode(NLink, {
-      "color": "default",
-      "onClick": clearFiles
-    }, _isSlot(_slot = trslc('vue-collection.action.clear-files', files.value.length)) ? _slot : {
-      default: () => [_slot]
-    })])])])])])]);
-  };
-});
-export { Component as NDropzone, Component as default };
-// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers
-const MIME_FORMAT = /^(image|audio|application|video|text)\/\*$/;
-const EXTENSION_FORMAT = /^\.\w{2,20}$/;
-function testFileWithAcceptString(accept, file) {
-  const splitted = accept.split(',').map(pattern => pattern.trim());
-  for (const pattern of splitted) {
-    if (MIME_FORMAT.test(pattern)) {
-      if (RegExp(`^${pattern.substring(0, pattern.length - 2)}\\/.{2,}$`).test(file.type)) return true;
-    } else if (EXTENSION_FORMAT.test(pattern)) {
-      if (RegExp(`^.*${pattern}$`).test(file.name)) return true;
-    }
-  }
-  return false;
-}

package/components/NForm.d.ts

@@ -1,21 +0,0 @@
-import type { PropType } from 'vue';
-import type { ValidatedForm } from './ValidatedForm';
-export declare const nFormProps: {
-    /**
-     * The {@link ValidatedForm} which will be used to validate the inputs.
-     * All inputs in this forms hierarchy should be added to the {@link ValidatedForm}.
-     */
-    readonly form: PropType<ValidatedForm>;
-    /**
-     * This is called, when a button of type `submit` in the hierarchy of this view is clicked
-     * and when the validation of the `form` was successful.
-     */
-    readonly onSubmit: PropType<() => void>;
-};
-/**
- * The `NForm` should be used to wrap multiple inputs.
- * If it contains a button of type `submit` in it's hierarchy,
- * it catches the submit event and passes it to the {@link ValidatedForm} in its `form` prop.
- */
-declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
-export { Component as NForm, Component as default };

package/components/NForm.js

@@ -1,29 +0,0 @@
-import { createVNode as _createVNode } from "vue";
-import { createComponent } from '../utils/component';
-export const nFormProps = {
-  /**
-   * The {@link ValidatedForm} which will be used to validate the inputs.
-   * All inputs in this forms hierarchy should be added to the {@link ValidatedForm}.
-   */
-  form: Object,
-  /**
-   * This is called, when a button of type `submit` in the hierarchy of this view is clicked
-   * and when the validation of the `form` was successful.
-   */
-  onSubmit: Function
-};
-/**
- * The `NForm` should be used to wrap multiple inputs.
- * If it contains a button of type `submit` in it's hierarchy,
- * it catches the submit event and passes it to the {@link ValidatedForm} in its `form` prop.
- */
-const Component = createComponent('NForm', nFormProps, (props, context) => {
-  const onSubmit = event => {
-    event.preventDefault();
-    if (!props.form || props.form.validate().isValid) props.onSubmit?.();
-  };
-  return () => _createVNode("form", {
-    "onSubmit": onSubmit
-  }, [context.slots.default?.()]);
-});
-export { Component as NForm, Component as default };

package/components/NFormModal.d.ts

@@ -1,75 +0,0 @@
-import type { TWMaxWidth } from '../utils/tailwind';
-import { type PropType } from 'vue';
-import type { ValidatedForm } from './ValidatedForm';
-export declare const nFormModalProps: {
-    /**
-     * The maximum width of the modal. A regular tailwind class.
-     */
-    readonly maxWidth: {
-        readonly type: PropType<TWMaxWidth>;
-        readonly default: "max-w-lg";
-    };
-    /**
-     * If set to `true` the modal closes when clicking on the background.
-     * Default is `false` as the accidental reseting of the whole form is very annoying.
-     */
-    readonly closeOnBackground: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
-    };
-    /**
-     * The {@link ValidatedForm} to validate the inputs.
-     * All inputs should be added to the form.
-     */
-    readonly form: PropType<ValidatedForm>;
-    readonly hideHeader: BooleanConstructor;
-    readonly hideFooter: BooleanConstructor;
-    readonly hideX: BooleanConstructor;
-    readonly verticalPosition: {
-        readonly type: PropType<"start" | "center" | "end">;
-        readonly default: "center";
-    };
-    readonly horizontalPosition: {
-        readonly type: PropType<"start" | "center" | "end">;
-        readonly default: "center";
-    };
-    readonly title: StringConstructor;
-    readonly okText: {
-        readonly type: StringConstructor;
-        readonly default: string;
-    };
-    readonly okColor: {
-        readonly type: StringConstructor;
-        readonly default: "primary";
-    };
-    readonly closeOnOk: {
-        readonly type: BooleanConstructor;
-        readonly default: true;
-    };
-    readonly hideOk: BooleanConstructor;
-    readonly okDisabled: BooleanConstructor;
-    readonly cancelText: {
-        readonly type: StringConstructor;
-        readonly default: string;
-    };
-    readonly cancelColor: {
-        readonly type: StringConstructor;
-        readonly default: "default";
-    };
-    readonly hideCancel: BooleanConstructor;
-    readonly onOk: PropType<() => void>;
-    readonly onCancel: PropType<() => void>;
-    readonly modal: PropType<(props: import("./NModal").ModalSlotProps) => JSX.Element>;
-    readonly content: PropType<(props: import("./NModal").ModalSlotProps) => JSX.Element>;
-    readonly header: PropType<() => JSX.Element>;
-    readonly footer: PropType<(props: import("./NModal").ModalSlotProps) => JSX.Element>;
-    readonly value: PropType<boolean>;
-    readonly onUpdateValue: PropType<(newValue: boolean) => void>;
-};
-/**
- * The `NFormModal` is a {@link NModal} with an integrated form.
- * When submitting a `NFormModal` the form is first validated and
- * only if the validation is succesful the `onOk` event is called.
- */
-declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
-export { Component as NFormModal, Component as default };

package/components/NFormModal.js

@@ -1,59 +0,0 @@
-import { createVNode as _createVNode } from "vue";
-import { createComponentWithSlots } from '../utils/component';
-import { computed } from 'vue';
-import NForm from './NForm';
-import NModal, { nModalProps } from './NModal';
-export const nFormModalProps = {
-  ...nModalProps,
-  /**
-   * The maximum width of the modal. A regular tailwind class.
-   */
-  maxWidth: {
-    type: String,
-    default: 'max-w-lg'
-  },
-  /**
-   * If set to `true` the modal closes when clicking on the background.
-   * Default is `false` as the accidental reseting of the whole form is very annoying.
-   */
-  closeOnBackground: {
-    type: Boolean,
-    default: false
-  },
-  /**
-   * The {@link ValidatedForm} to validate the inputs.
-   * All inputs should be added to the form.
-   */
-  form: Object
-};
-/**
- * The `NFormModal` is a {@link NModal} with an integrated form.
- * When submitting a `NFormModal` the form is first validated and
- * only if the validation is succesful the `onOk` event is called.
- */
-const Component = createComponentWithSlots('NFormModal', nFormModalProps, ['modal', 'header', 'footer'], (props, {
-  slots
-}) => {
-  const onOk = () => {
-    if (!props.form || props.form.validate().isValid) {
-      props.onOk?.();
-      if (props.closeOnOk) props.onUpdateValue?.(false);
-    }
-  };
-  const childProps = computed(() => ({
-    ...props,
-    onOk,
-    closeOnOk: false,
-    onKeydown: event => {
-      if (event.metaKey && event.key === 'Enter') onOk();
-    }
-  }));
-  return () => _createVNode(NModal, childProps.value, {
-    default: () => [_createVNode(NForm, {
-      "form": props.form
-    }, {
-      default: () => [slots.default?.()]
-    })]
-  });
-});
-export { Component as NFormModal, Component as default };

package/components/NIconButton.d.ts

@@ -1,79 +0,0 @@
-import type { HeroIcon } from '../utils/tailwind';
-import type { PropType } from 'vue';
-import { type RouteLocationRaw } from 'vue-router';
-export declare const nIconButtonProps: {
-    readonly tooltipText: StringConstructor;
-    readonly tooltipContent: PropType<() => JSX.Element>;
-    readonly tooltipHide: BooleanConstructor;
-    readonly tooltipShow: BooleanConstructor;
-    readonly tooltipPlacement: {
-        readonly type: PropType<import("./NTooltip").TooltipPlacement>;
-        readonly default: "auto";
-    };
-    readonly tooltipMaxWidth: {
-        readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
-        readonly default: "max-w-xs";
-    };
-    readonly tooltipWrapperClass: StringConstructor;
-    readonly tooltipContentClass: StringConstructor;
-    readonly tooltipArrowClass: StringConstructor;
-    /**
-     * The icon of the icon-button.
-     */
-    readonly icon: {
-        readonly type: PropType<HeroIcon>;
-        readonly required: true;
-    };
-    /**
-     * The route of the icon-button. If this is set, the icon-button becomes a {@link RouterLink}.
-     */
-    readonly route: PropType<RouteLocationRaw>;
-    /**
-     * The color of the icon-button.
-     */
-    readonly color: {
-        readonly type: StringConstructor;
-        readonly default: "default";
-    };
-    /**
-     * The shade of the icon-button.
-     */
-    readonly shade: {
-        readonly type: NumberConstructor;
-        readonly default: 500;
-    };
-    /**
-     * The size of the icon in tailwind-units.
-     */
-    readonly size: {
-        readonly type: NumberConstructor;
-        readonly default: 5;
-    };
-    /**
-     * The html attribute, which indicates the type of the button.
-     */
-    readonly type: {
-        readonly type: PropType<"submit" | "button" | "reset">;
-        readonly default: "button";
-    };
-    /**
-     * If set to `true` the icon-button is disabled and no interaction is possible.
-     */
-    readonly disabled: BooleanConstructor;
-    /**
-     * Adds the classes to the icon-button.
-     * Use this instead of `class` to style the button, because the button is wrapped inside
-     * a div for the tooltip and `class` would be applied to the wrapping div.
-     */
-    readonly buttonClass: StringConstructor;
-    /**
-     * This is called when the icon-button is clicked.
-     * It is only called when the `route` prop is not set on the icon-button.
-     */
-    readonly onClick: PropType<() => void>;
-};
-/**
- * The `NIconButton` is a regular button which does not have any text but an icon instead.
- */
-declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
-export { Component as NIconButton, Component as default };