@naptics/vue-collection 0.0.7 → 0.1.1

package/README.md

@@ -26,15 +26,17 @@ This section shows how to create a new Vue project with the recommended tech-sta
 These are the steps to add Vue Collection to an existing project. You may have to go through the steps of `Project Setup` and check if you have the neccesary (peer-)dependencies installed.
 
 1. Go to [npmjs.com](https://npmjs.com), sign in with naptics and create a new read-only classic access token.
-2. Save your access token under `~/.npmrc` with the following content, replacing `YOUR_TOKEN` with the access token.
+2. Add a `.npmrc` file in your repository and add the following contents.
 
 ```
-//registry.npmjs.org/:_authToken=YOUR_TOKEN
+//registry.npmjs.org/:_authToken=${NPM_TOKEN}
 ```
 
-3. Install Vue Collection with `npm i @naptics/vue-collection`.
-4. Add tailwind config -> See below
-5. Register i18n provider -> See below
+3. Add the created token to your environment with the key `NPM_TOKEN` (e.g., by modifing `~/.zshrc`).
+4. If the project also uses pipelines to build, make sure to create a second read-only token and add it to the build environment secrets.
+5. Install Vue Collection with `npm i @naptics/vue-collection`.
+6. Add tailwind config -> See below
+7. Register i18n provider -> See below
 
 ## Create new components
 

package/components/NAlert.d.ts

@@ -16,6 +16,10 @@ export declare const nAlertProps: {
      * If set to `true` the X-button of the alert is hidden.
      */
     readonly hideX: BooleanConstructor;
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
     /**
      * This is called, when the X-button is clicked.
      */
@@ -41,6 +45,10 @@ declare const _default: import("vue").DefineComponent<{
      * If set to `true` the X-button of the alert is hidden.
      */
     readonly hideX: BooleanConstructor;
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
     /**
      * This is called, when the X-button is clicked.
      */
@@ -61,6 +69,10 @@ declare const _default: import("vue").DefineComponent<{
      * If set to `true` the X-button of the alert is hidden.
      */
     readonly hideX: BooleanConstructor;
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
     /**
      * This is called, when the X-button is clicked.
      */

package/components/NAlert.js

@@ -20,6 +20,10 @@ export const nAlertProps = {
    * If set to `true` the X-button of the alert is hidden.
    */
   hideX: Boolean,
+  /**
+   * Adds the classes to the top-level element.
+   */
+  addClass: String,
   /**
    * This is called, when the X-button is clicked.
    */
@@ -32,7 +36,7 @@ export const nAlertProps = {
 export default createComponent('NAlert', nAlertProps, props => {
   const variant = computed(() => VARIANTS[props.variant]);
   return () => _createVNode("div", {
-    "class": `rounded-md p-3 shadow-lg bg-${variant.value.color}-50`
+    "class": `rounded-md p-3 shadow-lg bg-${variant.value.color}-50 ${props.addClass}`
   }, [_createVNode("div", {
     "class": "flex items-center"
   }, [_createVNode("div", {

package/components/NBadge.d.ts

@@ -2,7 +2,7 @@ import type { TWTextSize } from '../utils/tailwind';
 import type { PropType } from 'vue';
 export declare const nBadgeProps: {
     readonly tooltipText: StringConstructor;
-    readonly tooltipContent: PropType<() => void>;
+    readonly tooltipContent: PropType<() => JSX.Element>;
     readonly tooltipHide: BooleanConstructor;
     readonly tooltipShow: BooleanConstructor;
     readonly tooltipPlacement: {
@@ -13,6 +13,8 @@ export declare const nBadgeProps: {
         readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
         readonly default: "max-w-xs";
     };
+    readonly tooltipWrapperAddClass: StringConstructor;
+    readonly tooltipContentAddClass: StringConstructor;
     /**
      * The text of the badge. Can alternatively be passed in the default slot.
      */
@@ -52,13 +54,17 @@ export declare const nBadgeProps: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
 };
 /**
  * The `NBadge` is a styled element to wrap a text.
  */
 declare const _default: import("vue").DefineComponent<{
     readonly tooltipText: StringConstructor;
-    readonly tooltipContent: PropType<() => void>;
+    readonly tooltipContent: PropType<() => JSX.Element>;
     readonly tooltipHide: BooleanConstructor;
     readonly tooltipShow: BooleanConstructor;
     readonly tooltipPlacement: {
@@ -69,6 +75,8 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
         readonly default: "max-w-xs";
     };
+    readonly tooltipWrapperAddClass: StringConstructor;
+    readonly tooltipContentAddClass: StringConstructor;
     /**
      * The text of the badge. Can alternatively be passed in the default slot.
      */
@@ -108,9 +116,13 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
 }, import("vue").RenderFunction, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, never[], never, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly tooltipText: StringConstructor;
-    readonly tooltipContent: PropType<() => void>;
+    readonly tooltipContent: PropType<() => JSX.Element>;
     readonly tooltipHide: BooleanConstructor;
     readonly tooltipShow: BooleanConstructor;
     readonly tooltipPlacement: {
@@ -121,6 +133,8 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
         readonly default: "max-w-xs";
     };
+    readonly tooltipWrapperAddClass: StringConstructor;
+    readonly tooltipContentAddClass: StringConstructor;
     /**
      * The text of the badge. Can alternatively be passed in the default slot.
      */
@@ -160,6 +174,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
 }>> & {}, {
     readonly color: string;
     readonly shade: number;

package/components/NBadge.js

@@ -41,6 +41,10 @@ export const nBadgeProps = {
     type: Boolean,
     default: true
   },
+  /**
+   * Adds the classes to the top-level element.
+   */
+  addClass: String,
   ...nToolTipPropsForImplementor
 };
 /**
@@ -51,7 +55,7 @@ export default createComponent('NBadge', nBadgeProps, (props, {
 }) => {
   return () => _createVNode(NTooltip, mapTooltipProps(props), {
     default: () => [_createVNode("div", {
-      "class": ['px-2 py-1 rounded-md font-semibold shadow', `${props.textSize} bg-${props.color}-${props.shade} text-${props.color}-${props.textShade}`, props.allCaps ? 'uppercase' : '']
+      "class": ['px-2 py-1 rounded-md font-semibold shadow', `${props.textSize} bg-${props.color}-${props.shade} text-${props.color}-${props.textShade}`, props.allCaps ? 'uppercase' : '', props.addClass]
     }, [slots.default?.() || props.text])]
   });
 });

package/components/NBreadcrub.d.ts

@@ -38,6 +38,10 @@ export declare const nBreadcrumbProps: {
         readonly type: NumberConstructor;
         readonly default: 5;
     };
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
     /**
      * A slot the replace the breadcrumb labels.
      */
@@ -97,6 +101,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: NumberConstructor;
         readonly default: 5;
     };
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
     /**
      * A slot the replace the breadcrumb labels.
      */
@@ -142,6 +150,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: NumberConstructor;
         readonly default: 5;
     };
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
     /**
      * A slot the replace the breadcrumb labels.
      */

package/components/NBreadcrub.js

@@ -38,6 +38,10 @@ export const nBreadcrumbProps = {
     type: Number,
     default: 5
   },
+  /**
+   * Adds the classes to the top-level element.
+   */
+  addClass: String,
   /**
    * A slot the replace the breadcrumb labels.
    */
@@ -53,7 +57,7 @@ export const nBreadcrumbProps = {
  */
 export default createComponent('NBreadcrumb', nBreadcrumbProps, props => {
   return () => _createVNode("div", {
-    "class": "flex flex-wrap items-center"
+    "class": `flex flex-wrap items-center ${props.addClass}`
   }, [props.items.map((item, index) => _createVNode(_Fragment, null, [props.item?.(item, index) || _createVNode(NLink, {
     "textSize": props.textSize,
     "route": item.route,

package/components/NButton.d.ts

@@ -1,7 +1,7 @@
 import { type PropType } from 'vue';
 export declare const nButtonProps: {
     readonly tooltipText: StringConstructor;
-    readonly tooltipContent: PropType<() => void>;
+    readonly tooltipContent: PropType<() => JSX.Element>;
     readonly tooltipHide: BooleanConstructor;
     readonly tooltipShow: BooleanConstructor;
     readonly tooltipPlacement: {
@@ -12,6 +12,8 @@ export declare const nButtonProps: {
         readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
         readonly default: "max-w-xs";
     };
+    readonly tooltipWrapperAddClass: StringConstructor;
+    readonly tooltipContentAddClass: StringConstructor;
     /**
      * The color of the button.
      */
@@ -39,6 +41,10 @@ export declare const nButtonProps: {
      * If set to `true` the button will appear smaller.
      */
     readonly small: BooleanConstructor;
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
     /**
      * This is called, when the button is clicked.
      */
@@ -49,7 +55,7 @@ export declare const nButtonProps: {
  */
 declare const _default: import("vue").DefineComponent<{
     readonly tooltipText: StringConstructor;
-    readonly tooltipContent: PropType<() => void>;
+    readonly tooltipContent: PropType<() => JSX.Element>;
     readonly tooltipHide: BooleanConstructor;
     readonly tooltipShow: BooleanConstructor;
     readonly tooltipPlacement: {
@@ -60,6 +66,8 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
         readonly default: "max-w-xs";
     };
+    readonly tooltipWrapperAddClass: StringConstructor;
+    readonly tooltipContentAddClass: StringConstructor;
     /**
      * The color of the button.
      */
@@ -87,13 +95,17 @@ declare const _default: import("vue").DefineComponent<{
      * If set to `true` the button will appear smaller.
      */
     readonly small: BooleanConstructor;
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
     /**
      * This is called, when the button is clicked.
      */
     readonly onClick: PropType<() => void>;
 }, import("vue").RenderFunction, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, never[], never, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly tooltipText: StringConstructor;
-    readonly tooltipContent: PropType<() => void>;
+    readonly tooltipContent: PropType<() => JSX.Element>;
     readonly tooltipHide: BooleanConstructor;
     readonly tooltipShow: BooleanConstructor;
     readonly tooltipPlacement: {
@@ -104,6 +116,8 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
         readonly default: "max-w-xs";
     };
+    readonly tooltipWrapperAddClass: StringConstructor;
+    readonly tooltipContentAddClass: StringConstructor;
     /**
      * The color of the button.
      */
@@ -131,6 +145,10 @@ declare const _default: import("vue").DefineComponent<{
      * If set to `true` the button will appear smaller.
      */
     readonly small: BooleanConstructor;
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
     /**
      * This is called, when the button is clicked.
      */

package/components/NButton.js

@@ -31,6 +31,10 @@ export const nButtonProps = {
    * If set to `true` the button will appear smaller.
    */
   small: Boolean,
+  /**
+   * Adds the classes to the top-level element.
+   */
+  addClass: String,
   /**
    * This is called, when the button is clicked.
    */
@@ -48,7 +52,7 @@ export default createComponent('NButton', nButtonProps, (props, {
     default: () => [_createVNode("button", {
       "disabled": isDisabled.value,
       "type": props.type,
-      "class": [`block w-full font-medium rounded-md focus:outline-none focus-visible:ring-2 shadow text-${props.color}-900 relative`, isDisabled.value ? `bg-${props.color}-100 text-opacity-20 cursor-default` : `bg-${props.color}-200 hover:bg-${props.color}-300 focus-visible:ring-${props.color}-500`, props.small ? 'py-1 px-2 text-xs' : 'py-2 px-4 text-sm'],
+      "class": [`block w-full font-medium rounded-md focus:outline-none focus-visible:ring-2 shadow text-${props.color}-900 relative`, isDisabled.value ? `bg-${props.color}-100 text-opacity-20 cursor-default` : `bg-${props.color}-200 hover:bg-${props.color}-300 focus-visible:ring-${props.color}-500`, props.small ? 'py-1 px-2 text-xs' : 'py-2 px-4 text-sm', props.addClass],
       "onClick": props.onClick
     }, [_createVNode("span", {
       "class": {

package/components/NCheckbox.d.ts

@@ -10,6 +10,10 @@ export declare const nCheckboxProps: {
      * If set to `true` the checkbox is disabled and no interaction is possible.
      */
     readonly disabled: BooleanConstructor;
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
     readonly value: import("vue").PropType<boolean>;
     readonly onUpdateValue: import("vue").PropType<(newValue: boolean) => void>;
 };
@@ -28,6 +32,10 @@ declare const _default: import("vue").DefineComponent<{
      * If set to `true` the checkbox is disabled and no interaction is possible.
      */
     readonly disabled: BooleanConstructor;
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
     readonly value: import("vue").PropType<boolean>;
     readonly onUpdateValue: import("vue").PropType<(newValue: boolean) => void>;
 }, import("vue").RenderFunction, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, never[], never, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -42,6 +50,10 @@ declare const _default: import("vue").DefineComponent<{
      * If set to `true` the checkbox is disabled and no interaction is possible.
      */
     readonly disabled: BooleanConstructor;
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
     readonly value: import("vue").PropType<boolean>;
     readonly onUpdateValue: import("vue").PropType<(newValue: boolean) => void>;
 }>> & {}, {

package/components/NCheckbox.js

@@ -14,7 +14,11 @@ export const nCheckboxProps = {
   /**
    * If set to `true` the checkbox is disabled and no interaction is possible.
    */
-  disabled: Boolean
+  disabled: Boolean,
+  /**
+   * Adds the classes to the top-level element.
+   */
+  addClass: String
 };
 /**
  * The `NCheckbox` is a styled checkbox.
@@ -37,6 +41,6 @@ export default createComponent('NCheckbox', nCheckboxProps, props => {
     "disabled": props.disabled,
     "onClick": toggle,
     "key": updateKey.value,
-    "class": [`h-5 w-5 border-default-300 rounded focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-${props.color}-500`, props.disabled ? `cursor-default bg-default-100 text-${props.color}-200` : `cursor-pointer text-${props.color}-400`]
+    "class": [`h-5 w-5 border-default-300 rounded focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-${props.color}-500`, props.disabled ? `cursor-default bg-default-100 text-${props.color}-200` : `cursor-pointer text-${props.color}-400`, props.addClass]
   }, null);
 });

package/components/NCheckboxLabel.d.ts

@@ -16,6 +16,7 @@ export declare const nCheckboxLabelProps: {
         readonly default: "primary";
     };
     readonly disabled: BooleanConstructor;
+    readonly addClass: StringConstructor;
     readonly value: import("vue").PropType<boolean>;
     readonly onUpdateValue: import("vue").PropType<(newValue: boolean) => void>;
 };
@@ -40,6 +41,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "primary";
     };
     readonly disabled: BooleanConstructor;
+    readonly addClass: StringConstructor;
     readonly value: import("vue").PropType<boolean>;
     readonly onUpdateValue: import("vue").PropType<(newValue: boolean) => void>;
 }, import("vue").RenderFunction, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, never[], never, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -60,6 +62,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "primary";
     };
     readonly disabled: BooleanConstructor;
+    readonly addClass: StringConstructor;
     readonly value: import("vue").PropType<boolean>;
     readonly onUpdateValue: import("vue").PropType<(newValue: boolean) => void>;
 }>> & {}, {

package/components/NCheckboxLabel.js

@@ -1,4 +1,5 @@
 import { createVNode as _createVNode } from "vue";
+import { computed } from 'vue';
 import { createComponent } from '../utils/component';
 import NCheckbox, { nCheckboxProps } from './NCheckbox';
 export const nCheckboxLabelProps = {
@@ -23,9 +24,14 @@ export default createComponent('NCheckboxLabel', nCheckboxLabelProps, props => {
   const toggleValue = () => {
     if (!props.disabled) props.onUpdateValue?.(!props.value);
   };
+  // addClass is not passed as it is used on the top-level element.
+  const childProps = computed(() => ({
+    ...props,
+    addClass: undefined
+  }));
   return () => _createVNode("div", {
-    "class": "flex items-center"
-  }, [_createVNode(NCheckbox, props, null), _createVNode("div", {
+    "class": `flex items-center ${props.addClass}`
+  }, [_createVNode(NCheckbox, childProps.value, null), _createVNode("div", {
     "class": `${props.compact ? 'ml-2' : 'ml-3'} text-sm`
   }, [_createVNode("label", {
     "onClick": toggleValue,

package/components/NDropdown.d.ts

@@ -27,6 +27,10 @@ export declare const nDropdownProps: {
      * A slot to replace the button of the dropdown.
      */
     readonly button: PropType<() => JSX.Element>;
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
 };
 export type DropdownItem = {
     /**
@@ -82,6 +86,10 @@ declare const _default: import("vue").DefineComponent<{
      * A slot to replace the button of the dropdown.
      */
     readonly button: PropType<() => JSX.Element>;
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
 }, import("vue").RenderFunction, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, never[], never, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      * The title of the dropdown-button.
@@ -108,6 +116,10 @@ declare const _default: import("vue").DefineComponent<{
      * A slot to replace the button of the dropdown.
      */
     readonly button: PropType<() => JSX.Element>;
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
 }>> & {}, {
     readonly right: boolean;
     readonly disabled: boolean;

package/components/NDropdown.js

@@ -32,7 +32,11 @@ export const nDropdownProps = {
   /**
    * A slot to replace the button of the dropdown.
    */
-  button: Function
+  button: Function,
+  /**
+   * Adds the classes to the top-level element.
+   */
+  addClass: String
 };
 /**
  * The `NDropdown` consists of a button and a panel with multiple actions.
@@ -52,7 +56,7 @@ export default createComponent('NDropdown', nDropdownProps, (props, {
   }, null), _createVNode("span", null, [item.label])]);
   return () => _createVNode(Menu, {
     "as": "div",
-    "class": "relative inline-block text-left"
+    "class": `relative inline-block text-left ${props.addClass}`
   }, {
     default: () => [_createVNode("div", {
       "class": "flex"

package/components/NDropzone.d.ts

@@ -46,6 +46,10 @@ export declare const nDropzoneProps: {
         readonly type: StringConstructor;
         readonly default: "min-h-36";
     };
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
     readonly value: import("vue").PropType<File[]>;
     readonly onUpdateValue: import("vue").PropType<(newValue: File[]) => void>;
 };
@@ -101,6 +105,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: StringConstructor;
         readonly default: "min-h-36";
     };
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
     readonly value: import("vue").PropType<File[]>;
     readonly onUpdateValue: import("vue").PropType<(newValue: File[]) => void>;
 }, import("vue").RenderFunction, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, never[], never, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -151,6 +159,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: StringConstructor;
         readonly default: "min-h-36";
     };
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
     readonly value: import("vue").PropType<File[]>;
     readonly onUpdateValue: import("vue").PropType<(newValue: File[]) => void>;
 }>> & {}, {

package/components/NDropzone.js

@@ -60,7 +60,11 @@ export const nDropzoneProps = {
   height: {
     type: String,
     default: 'min-h-36'
-  }
+  },
+  /**
+   * Adds the classes to the top-level element.
+   */
+  addClass: String
 };
 /**
  * The `NDropzone` is an area where files can be added by the user by drag & drop.
@@ -143,7 +147,7 @@ export default createComponent('NDropzone', nDropzoneProps, props => {
   return () => {
     let _slot;
     return _createVNode("div", null, [_createVNode("button", {
-      "class": ['block w-full rounded-md border-dashed border-2 hover:border-primary-300 hover:bg-primary-50 focus-visible:border-primary-500 focus:outline-none ', 'flex flex-col items-center justify-center text-center text-sm select-none hover:text-primary-700 p-4', isDragOver.value ? 'border-primary-300 bg-primary-50 text-primary-700' : 'border-default-300 bg-default-50 text-default-500', props.height],
+      "class": ['block w-full rounded-md border-dashed border-2 hover:border-primary-300 hover:bg-primary-50 focus-visible:border-primary-500 focus:outline-none ', 'flex flex-col items-center justify-center text-center text-sm select-none hover:text-primary-700 p-4', isDragOver.value ? 'border-primary-300 bg-primary-50 text-primary-700' : 'border-default-300 bg-default-50 text-default-500', props.height, props.addClass],
       "onDrop": onDrop,
       "onDragover": onDragOver,
       "onDragleave": onDragLeave,

package/components/NIconButton.d.ts

@@ -3,17 +3,21 @@ import type { PropType } from 'vue';
 import { type RouteLocationRaw } from 'vue-router';
 export declare const nIconButtonProps: {
     readonly tooltipText: StringConstructor;
-    readonly tooltipContent: PropType<() => void>;
+    readonly tooltipContent: PropType<() => JSX.Element>;
     readonly tooltipHide: BooleanConstructor;
     readonly tooltipShow: BooleanConstructor;
     readonly tooltipPlacement: {
-        readonly type: PropType<import("./NTooltip").TooltipPlacement>;
+        readonly type: PropType<import("./NTooltip").TooltipPlacement>; /**
+         * If set to `true` the icon-button is disabled and no interaction is possible.
+         */
         readonly default: "auto";
     };
     readonly tooltipMaxWidth: {
         readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
         readonly default: "max-w-xs";
     };
+    readonly tooltipWrapperAddClass: StringConstructor;
+    readonly tooltipContentAddClass: StringConstructor;
     /**
      * The icon of the icon-button.
      */
@@ -57,6 +61,10 @@ export declare const nIconButtonProps: {
      * If set to `true` the icon-button is disabled and no interaction is possible.
      */
     readonly disabled: BooleanConstructor;
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: 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.
@@ -68,17 +76,21 @@ export declare const nIconButtonProps: {
  */
 declare const _default: import("vue").DefineComponent<{
     readonly tooltipText: StringConstructor;
-    readonly tooltipContent: PropType<() => void>;
+    readonly tooltipContent: PropType<() => JSX.Element>;
     readonly tooltipHide: BooleanConstructor;
     readonly tooltipShow: BooleanConstructor;
     readonly tooltipPlacement: {
-        readonly type: PropType<import("./NTooltip").TooltipPlacement>;
+        readonly type: PropType<import("./NTooltip").TooltipPlacement>; /**
+         * If set to `true` the icon-button is disabled and no interaction is possible.
+         */
         readonly default: "auto";
     };
     readonly tooltipMaxWidth: {
         readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
         readonly default: "max-w-xs";
     };
+    readonly tooltipWrapperAddClass: StringConstructor;
+    readonly tooltipContentAddClass: StringConstructor;
     /**
      * The icon of the icon-button.
      */
@@ -122,6 +134,10 @@ declare const _default: import("vue").DefineComponent<{
      * If set to `true` the icon-button is disabled and no interaction is possible.
      */
     readonly disabled: BooleanConstructor;
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: 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.
@@ -129,17 +145,21 @@ declare const _default: import("vue").DefineComponent<{
     readonly onClick: PropType<() => void>;
 }, import("vue").RenderFunction, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, never[], never, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly tooltipText: StringConstructor;
-    readonly tooltipContent: PropType<() => void>;
+    readonly tooltipContent: PropType<() => JSX.Element>;
     readonly tooltipHide: BooleanConstructor;
     readonly tooltipShow: BooleanConstructor;
     readonly tooltipPlacement: {
-        readonly type: PropType<import("./NTooltip").TooltipPlacement>;
+        readonly type: PropType<import("./NTooltip").TooltipPlacement>; /**
+         * If set to `true` the icon-button is disabled and no interaction is possible.
+         */
         readonly default: "auto";
     };
     readonly tooltipMaxWidth: {
         readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
         readonly default: "max-w-xs";
     };
+    readonly tooltipWrapperAddClass: StringConstructor;
+    readonly tooltipContentAddClass: StringConstructor;
     /**
      * The icon of the icon-button.
      */
@@ -183,6 +203,10 @@ declare const _default: import("vue").DefineComponent<{
      * If set to `true` the icon-button is disabled and no interaction is possible.
      */
     readonly disabled: BooleanConstructor;
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: 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.