@naptics/vue-collection 0.0.7 → 0.1.1

package/components/NIconButton.js

@@ -47,6 +47,10 @@ export const nIconButtonProps = {
    * If set to `true` the icon-button is disabled and no interaction is possible.
    */
   disabled: Boolean,
+  /**
+   * Adds the classes to the top-level element.
+   */
+  addClass: String,
   /**
    * This is called when the icon-button is clicked.
    * It is only called when the `route` prop is not set on the icon-button.
@@ -58,7 +62,7 @@ export const nIconButtonProps = {
  * The `NIconButton` is a regular button which does not have any text but an icon instead.
  */
 export default createComponent('NIconButton', nIconButtonProps, props => {
-  const classes = () => ['block p-0.5 rounded-md focus:outline-none focus-visible:ring-2 -m-1', props.disabled ? `text-${props.color}-200 cursor-default` : `hover:bg-${props.color}-${props.shade} hover:bg-opacity-10 text-${props.color}-${props.shade} focus-visible:ring-${props.color}-${props.shade} cursor-pointer`];
+  const classes = () => ['block p-0.5 rounded-md focus:outline-none focus-visible:ring-2 -m-1', props.disabled ? `text-${props.color}-200 cursor-default` : `hover:bg-${props.color}-${props.shade} hover:bg-opacity-10 text-${props.color}-${props.shade} focus-visible:ring-${props.color}-${props.shade} cursor-pointer`, props.addClass];
   const content = () => _createVNode(props.icon, {
     "class": `w-${props.size} h-${props.size}`
   }, null);

package/components/NIconCircle.d.ts

@@ -41,6 +41,10 @@ export declare const nIconCircleProps: {
         readonly type: NumberConstructor;
         readonly default: 100;
     };
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
 };
 /**
  * The `NIconCircle` is an icon with a colored circle around it.
@@ -86,6 +90,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: NumberConstructor;
         readonly default: 100;
     };
+    /**
+     * 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 icon of the icon-circle.
@@ -127,6 +135,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: NumberConstructor;
         readonly default: 100;
     };
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
 }>> & {}, {
     readonly color: string;
     readonly iconShade: number;

package/components/NIconCircle.js

@@ -40,7 +40,11 @@ export const nIconCircleProps = {
   bgShade: {
     type: Number,
     default: 100
-  }
+  },
+  /**
+   * Adds the classes to the top-level element.
+   */
+  addClass: String
 };
 const DEFAULT_CIRCLE_SIZE = 16;
 const SCALING_FACTOR = 0.55;
@@ -57,7 +61,7 @@ export default createComponent('NIconCircle', nIconCircleProps, props => {
   circleSize *= 4;
   iconSize *= 4;
   return () => _createVNode("div", {
-    "class": ['flex items-center justify-center rounded-full', `bg-${props.color}-${props.bgShade}`],
+    "class": ['flex items-center justify-center rounded-full', `bg-${props.color}-${props.bgShade}`, props.addClass],
     "style": `width: ${circleSize}px; height: ${circleSize}px`
   }, [_createVNode("div", {
     "class": `text-${props.color}-${props.iconShade}`,

package/components/NInput.d.ts

@@ -2,7 +2,7 @@ import { type PropType } from 'vue';
 import './NInput.css';
 export declare const nInputProps: {
     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 nInputProps: {
         readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
         readonly default: "max-w-xs";
     };
+    readonly tooltipWrapperAddClass: StringConstructor;
+    readonly tooltipContentAddClass: StringConstructor;
     /**
      * The name of the input. Is displayed as a label above the input.
      */
@@ -59,6 +61,14 @@ export declare const nInputProps: {
      * If set to `true` the input's label is hidden.
      */
     readonly hideLabel: BooleanConstructor;
+    /**
+     * Adds the classes directly to the input (e.g. for shadow).
+     */
+    readonly inputClass: StringConstructor;
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
     /**
      * This is called when the input reveices focus.
      */
@@ -81,7 +91,7 @@ export type NInputExposed = {
  */
 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: {
@@ -92,6 +102,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 name of the input. Is displayed as a label above the input.
      */
@@ -138,6 +150,14 @@ declare const _default: import("vue").DefineComponent<{
      * If set to `true` the input's label is hidden.
      */
     readonly hideLabel: BooleanConstructor;
+    /**
+     * Adds the classes directly to the input (e.g. for shadow).
+     */
+    readonly inputClass: StringConstructor;
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
     /**
      * This is called when the input reveices focus.
      */
@@ -150,7 +170,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly onUpdateValue: PropType<(newValue: string) => 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: {
@@ -161,6 +181,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 name of the input. Is displayed as a label above the input.
      */
@@ -207,6 +229,14 @@ declare const _default: import("vue").DefineComponent<{
      * If set to `true` the input's label is hidden.
      */
     readonly hideLabel: BooleanConstructor;
+    /**
+     * Adds the classes directly to the input (e.g. for shadow).
+     */
+    readonly inputClass: StringConstructor;
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
     /**
      * This is called when the input reveices focus.
      */

package/components/NInput.js

@@ -53,6 +53,14 @@ export const nInputProps = {
    * If set to `true` the input's label is hidden.
    */
   hideLabel: Boolean,
+  /**
+   * Adds the classes directly to the input (e.g. for shadow).
+   */
+  inputClass: String,
+  /**
+   * Adds the classes to the top-level element.
+   */
+  addClass: String,
   /**
    * This is called when the input reveices focus.
    */
@@ -72,7 +80,9 @@ export default createComponent('NInput', nInputProps, (props, context) => {
     focus: () => inputRef.value?.focus()
   };
   context.expose(exposed);
-  return () => _createVNode("div", null, [props.name && !props.hideLabel && _createVNode("label", {
+  return () => _createVNode("div", {
+    "class": props.addClass
+  }, [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({
@@ -94,7 +104,7 @@ export default createComponent('NInput', nInputProps, (props, context) => {
       "onFocus": () => props.onFocus?.(),
       "onBlur": () => props.onBlur?.(),
       "onInvalid": event => event.preventDefault(),
-      "class": ['block w-full rounded-md border focus:outline-none focus:ring-1 ', props.small ? 'text-xs py-0.5 px-2' : 'py-2 px-4', props.disabled ? 'text-default-500 placeholder-default-300 bg-default-50' : 'text-default-900 placeholder-default-400 ', props.error ? 'border-red-500 focus:border-red-500 focus:ring-red-500 pr-10' : 'border-default-300 focus:border-primary-500 focus:ring-primary-500']
+      "class": ['block w-full rounded-md border focus:outline-none focus:ring-1 ', props.small ? 'text-xs py-0.5 px-2' : 'py-2 px-4', props.disabled ? 'text-default-500 placeholder-default-300 bg-default-50' : 'text-default-900 placeholder-default-400 ', props.error ? 'border-red-500 focus:border-red-500 focus:ring-red-500 pr-10' : 'border-default-300 focus:border-primary-500 focus:ring-primary-500', props.inputClass]
     }, null), _withDirectives(_createVNode("div", {
       "class": "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none"
     }, [_createVNode(ExclamationCircleIcon, {

package/components/NInputPhone.d.ts

@@ -11,7 +11,7 @@ export declare const nInputPhoneProps: {
     readonly hideErrorMessage: BooleanConstructor;
     readonly disableBlurValidation: BooleanConstructor;
     readonly tooltipText: StringConstructor;
-    readonly tooltipContent: import("vue").PropType<() => void>;
+    readonly tooltipContent: import("vue").PropType<() => JSX.Element>;
     readonly tooltipHide: BooleanConstructor;
     readonly tooltipShow: BooleanConstructor;
     readonly tooltipPlacement: {
@@ -22,6 +22,8 @@ export declare const nInputPhoneProps: {
         readonly type: import("vue").PropType<import("../utils/tailwind").TWMaxWidth>;
         readonly default: "max-w-xs";
     };
+    readonly tooltipWrapperAddClass: StringConstructor;
+    readonly tooltipContentAddClass: StringConstructor;
     readonly name: StringConstructor;
     readonly placeholder: StringConstructor;
     readonly autocomplete: {
@@ -37,6 +39,8 @@ export declare const nInputPhoneProps: {
     readonly disabled: BooleanConstructor;
     readonly small: BooleanConstructor;
     readonly hideLabel: BooleanConstructor;
+    readonly inputClass: StringConstructor;
+    readonly addClass: StringConstructor;
     readonly onFocus: import("vue").PropType<() => void>;
     readonly onBlur: import("vue").PropType<() => void>;
     readonly value: import("vue").PropType<string>;
@@ -58,7 +62,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly hideErrorMessage: BooleanConstructor;
     readonly disableBlurValidation: BooleanConstructor;
     readonly tooltipText: StringConstructor;
-    readonly tooltipContent: import("vue").PropType<() => void>;
+    readonly tooltipContent: import("vue").PropType<() => JSX.Element>;
     readonly tooltipHide: BooleanConstructor;
     readonly tooltipShow: BooleanConstructor;
     readonly tooltipPlacement: {
@@ -69,6 +73,8 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: import("vue").PropType<import("../utils/tailwind").TWMaxWidth>;
         readonly default: "max-w-xs";
     };
+    readonly tooltipWrapperAddClass: StringConstructor;
+    readonly tooltipContentAddClass: StringConstructor;
     readonly name: StringConstructor;
     readonly placeholder: StringConstructor;
     readonly autocomplete: {
@@ -84,6 +90,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly disabled: BooleanConstructor;
     readonly small: BooleanConstructor;
     readonly hideLabel: BooleanConstructor;
+    readonly inputClass: StringConstructor;
+    readonly addClass: StringConstructor;
     readonly onFocus: import("vue").PropType<() => void>;
     readonly onBlur: import("vue").PropType<() => void>;
     readonly value: import("vue").PropType<string>;
@@ -101,7 +109,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly hideErrorMessage: BooleanConstructor;
     readonly disableBlurValidation: BooleanConstructor;
     readonly tooltipText: StringConstructor;
-    readonly tooltipContent: import("vue").PropType<() => void>;
+    readonly tooltipContent: import("vue").PropType<() => JSX.Element>;
     readonly tooltipHide: BooleanConstructor;
     readonly tooltipShow: BooleanConstructor;
     readonly tooltipPlacement: {
@@ -112,6 +120,8 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: import("vue").PropType<import("../utils/tailwind").TWMaxWidth>;
         readonly default: "max-w-xs";
     };
+    readonly tooltipWrapperAddClass: StringConstructor;
+    readonly tooltipContentAddClass: StringConstructor;
     readonly name: StringConstructor;
     readonly placeholder: StringConstructor;
     readonly autocomplete: {
@@ -127,6 +137,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly disabled: BooleanConstructor;
     readonly small: BooleanConstructor;
     readonly hideLabel: BooleanConstructor;
+    readonly inputClass: StringConstructor;
+    readonly addClass: StringConstructor;
     readonly onFocus: import("vue").PropType<() => void>;
     readonly onBlur: import("vue").PropType<() => void>;
     readonly value: import("vue").PropType<string>;

package/components/NInputSelect.d.ts

@@ -53,7 +53,7 @@ export declare const nInputSelectProps: {
      */
     readonly listItem: PropType<(props: import("./NSuggestionList").ItemSlotProps<import("./NSuggestionList").SuggestionItem>) => JSX.Element>;
     readonly tooltipText: StringConstructor;
-    readonly tooltipContent: PropType<() => void>;
+    readonly tooltipContent: PropType<() => JSX.Element>;
     readonly tooltipHide: BooleanConstructor;
     readonly tooltipShow: BooleanConstructor;
     readonly tooltipPlacement: {
@@ -64,6 +64,8 @@ export declare const nInputSelectProps: {
         readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
         readonly default: "max-w-xs";
     };
+    readonly tooltipWrapperAddClass: StringConstructor;
+    readonly tooltipContentAddClass: StringConstructor;
     readonly name: StringConstructor;
     readonly placeholder: StringConstructor;
     readonly autocomplete: {
@@ -79,6 +81,8 @@ export declare const nInputSelectProps: {
     readonly disabled: BooleanConstructor;
     readonly small: BooleanConstructor;
     readonly hideLabel: BooleanConstructor;
+    readonly inputClass: StringConstructor;
+    readonly addClass: StringConstructor;
     readonly onFocus: PropType<() => void>;
     readonly onBlur: PropType<() => void>;
 };
@@ -143,7 +147,7 @@ declare const _default: import("vue").DefineComponent<{
      */
     readonly listItem: PropType<(props: import("./NSuggestionList").ItemSlotProps<import("./NSuggestionList").SuggestionItem>) => JSX.Element>;
     readonly tooltipText: StringConstructor;
-    readonly tooltipContent: PropType<() => void>;
+    readonly tooltipContent: PropType<() => JSX.Element>;
     readonly tooltipHide: BooleanConstructor;
     readonly tooltipShow: BooleanConstructor;
     readonly tooltipPlacement: {
@@ -154,6 +158,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;
     readonly name: StringConstructor;
     readonly placeholder: StringConstructor;
     readonly autocomplete: {
@@ -169,6 +175,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly disabled: BooleanConstructor;
     readonly small: BooleanConstructor;
     readonly hideLabel: BooleanConstructor;
+    readonly inputClass: StringConstructor;
+    readonly addClass: StringConstructor;
     readonly onFocus: PropType<() => void>;
     readonly onBlur: 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<{
@@ -224,7 +232,7 @@ declare const _default: import("vue").DefineComponent<{
      */
     readonly listItem: PropType<(props: import("./NSuggestionList").ItemSlotProps<import("./NSuggestionList").SuggestionItem>) => JSX.Element>;
     readonly tooltipText: StringConstructor;
-    readonly tooltipContent: PropType<() => void>;
+    readonly tooltipContent: PropType<() => JSX.Element>;
     readonly tooltipHide: BooleanConstructor;
     readonly tooltipShow: BooleanConstructor;
     readonly tooltipPlacement: {
@@ -235,6 +243,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;
     readonly name: StringConstructor;
     readonly placeholder: StringConstructor;
     readonly autocomplete: {
@@ -250,6 +260,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly disabled: BooleanConstructor;
     readonly small: BooleanConstructor;
     readonly hideLabel: BooleanConstructor;
+    readonly inputClass: StringConstructor;
+    readonly addClass: StringConstructor;
     readonly onFocus: PropType<() => void>;
     readonly onBlur: PropType<() => void>;
 }>> & {}, {

package/components/NInputSuggestion.d.ts

@@ -35,7 +35,7 @@ export declare const nInputSuggestionProps: {
     readonly hideErrorMessage: BooleanConstructor;
     readonly disableBlurValidation: BooleanConstructor;
     readonly tooltipText: StringConstructor;
-    readonly tooltipContent: PropType<() => void>;
+    readonly tooltipContent: PropType<() => JSX.Element>;
     readonly tooltipHide: BooleanConstructor;
     readonly tooltipShow: BooleanConstructor;
     readonly tooltipPlacement: {
@@ -46,6 +46,8 @@ export declare const nInputSuggestionProps: {
         readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
         readonly default: "max-w-xs";
     };
+    readonly tooltipWrapperAddClass: StringConstructor;
+    readonly tooltipContentAddClass: StringConstructor;
     readonly name: StringConstructor;
     readonly placeholder: StringConstructor;
     readonly autocomplete: {
@@ -61,6 +63,8 @@ export declare const nInputSuggestionProps: {
     readonly disabled: BooleanConstructor;
     readonly small: BooleanConstructor;
     readonly hideLabel: BooleanConstructor;
+    readonly inputClass: StringConstructor;
+    readonly addClass: StringConstructor;
     readonly onFocus: PropType<() => void>;
     readonly onBlur: PropType<() => void>;
     readonly value: PropType<string>;
@@ -106,7 +110,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly hideErrorMessage: BooleanConstructor;
     readonly disableBlurValidation: BooleanConstructor;
     readonly tooltipText: StringConstructor;
-    readonly tooltipContent: PropType<() => void>;
+    readonly tooltipContent: PropType<() => JSX.Element>;
     readonly tooltipHide: BooleanConstructor;
     readonly tooltipShow: BooleanConstructor;
     readonly tooltipPlacement: {
@@ -117,6 +121,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;
     readonly name: StringConstructor;
     readonly placeholder: StringConstructor;
     readonly autocomplete: {
@@ -132,6 +138,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly disabled: BooleanConstructor;
     readonly small: BooleanConstructor;
     readonly hideLabel: BooleanConstructor;
+    readonly inputClass: StringConstructor;
+    readonly addClass: StringConstructor;
     readonly onFocus: PropType<() => void>;
     readonly onBlur: PropType<() => void>;
     readonly value: PropType<string>;
@@ -172,7 +180,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly hideErrorMessage: BooleanConstructor;
     readonly disableBlurValidation: BooleanConstructor;
     readonly tooltipText: StringConstructor;
-    readonly tooltipContent: PropType<() => void>;
+    readonly tooltipContent: PropType<() => JSX.Element>;
     readonly tooltipHide: BooleanConstructor;
     readonly tooltipShow: BooleanConstructor;
     readonly tooltipPlacement: {
@@ -183,6 +191,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;
     readonly name: StringConstructor;
     readonly placeholder: StringConstructor;
     readonly autocomplete: {
@@ -198,6 +208,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly disabled: BooleanConstructor;
     readonly small: BooleanConstructor;
     readonly hideLabel: BooleanConstructor;
+    readonly inputClass: StringConstructor;
+    readonly addClass: StringConstructor;
     readonly onFocus: PropType<() => void>;
     readonly onBlur: PropType<() => void>;
     readonly value: PropType<string>;

package/components/NLink.d.ts

@@ -29,6 +29,10 @@ export declare const nLinkProps: {
         readonly type: NumberConstructor;
         readonly default: 500;
     };
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
     /**
      * This is called when the link is clicked but only, if the `route` prop is not set.
      * If the `route` prop is not set, the link will act as a regular button.
@@ -66,6 +70,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: NumberConstructor;
         readonly default: 500;
     };
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
     /**
      * This is called when the link is clicked but only, if the `route` prop is not set.
      * If the `route` prop is not set, the link will act as a regular button.
@@ -99,6 +107,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: NumberConstructor;
         readonly default: 500;
     };
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
     /**
      * This is called when the link is clicked but only, if the `route` prop is not set.
      * If the `route` prop is not set, the link will act as a regular button.

package/components/NLink.js

@@ -30,6 +30,10 @@ export const nLinkProps = {
     type: Number,
     default: 500
   },
+  /**
+   * Adds the classes to the top-level element.
+   */
+  addClass: String,
   /**
    * This is called when the link is clicked but only, if the `route` prop is not set.
    * If the `route` prop is not set, the link will act as a regular button.
@@ -46,7 +50,7 @@ export default createComponent('NLink', nLinkProps, (props, {
     const shade = props.shade;
     if (shade <= 500) return shade + 100;else return shade - 200;
   });
-  const classes = computed(() => ['font-medium focus:outline-none focus-visible:ring-2 rounded-sm ring-offset-2 hover:underline text-left', `${props.textSize} text-${props.color}-${props.shade} hover:text-${props.color}-${hoverShade.value} focus-visible:ring-${props.color}-${props.shade}`]);
+  const classes = computed(() => ['font-medium focus:outline-none focus-visible:ring-2 rounded-sm ring-offset-2 hover:underline text-left', `${props.textSize} text-${props.color}-${props.shade} hover:text-${props.color}-${hoverShade.value} focus-visible:ring-${props.color}-${props.shade}`, props.addClass]);
   return () => props.route ? _createVNode(RouterLink, {
     "to": props.route,
     "class": classes.value

package/components/NList.d.ts

@@ -17,6 +17,10 @@ export declare const nListProps: {
         readonly type: PropType<ListItem[]>;
         readonly default: () => never[];
     };
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
 };
 /**
  * The `NList` displays key-value data in an appealing way.
@@ -29,6 +33,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<ListItem[]>;
         readonly default: () => never[];
     };
+    /**
+     * 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 items which are displayed in the list.
@@ -37,6 +45,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<ListItem[]>;
         readonly default: () => never[];
     };
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
 }>> & {}, {
     readonly items: ListItem[];
 }>;

package/components/NList.js

@@ -7,13 +7,19 @@ export const nListProps = {
   items: {
     type: Array,
     default: () => []
-  }
+  },
+  /**
+   * Adds the classes to the top-level element.
+   */
+  addClass: String
 };
 /**
  * The `NList` displays key-value data in an appealing way.
  */
 export default createComponent('NList', nListProps, props => {
-  return () => _createVNode("dl", null, [props.items.map((item, index) => _createVNode("div", {
+  return () => _createVNode("dl", {
+    "class": props.addClass
+  }, [props.items.map((item, index) => _createVNode("div", {
     "key": index,
     "class": ['py-5 px-4 sm:grid sm:grid-cols-3 sm:gap-4', index % 2 === 1 ? 'bg-white' : 'bg-default-50']
   }, [_createVNode("dt", {

package/components/NLoadingIndicator.d.ts

@@ -21,6 +21,10 @@ export declare const nLoadingIndicator: {
         readonly type: NumberConstructor;
         readonly default: 10;
     };
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
 };
 /**
  * The `NLoadingIndicator` is a styled loading indicator.
@@ -47,6 +51,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: NumberConstructor;
         readonly default: 10;
     };
+    /**
+     * 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 color of the loading-indicator.
@@ -69,6 +77,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: NumberConstructor;
         readonly default: 10;
     };
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
 }>> & {}, {
     readonly color: string;
     readonly shade: number;

package/components/NLoadingIndicator.js

@@ -23,7 +23,11 @@ export const nLoadingIndicator = {
   size: {
     type: Number,
     default: 10
-  }
+  },
+  /**
+   * Adds the classes to the top-level element.
+   */
+  addClass: String
 };
 /**
  * The `NLoadingIndicator` is a styled loading indicator.
@@ -35,7 +39,7 @@ export default createComponent('NLoadingIndicator', nLoadingIndicator, props =>
     'n-loading-indicator-gap': `${gap.value}px`
   }));
   return () => _createVNode("div", {
-    "class": "lds-ellipsis",
+    "class": `lds-ellipsis ${props.addClass}`,
     "style": `height:${props.size}px;width:${totalWidth.value}px`
   }, [_createVNode("div", {
     "class": `bg-${props.color}-${props.shade}`,

package/components/NPagination.d.ts

@@ -23,6 +23,10 @@ export declare const nPaginationProps: {
      * If set to `true`, the pagination is displayed smaller.
      */
     readonly small: BooleanConstructor;
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
     /**
      * This is called, when the visible pages, which are selectable in the pagination, have changed.
      * This is useful as only these pages can be navigated to on the next click.
@@ -56,6 +60,10 @@ declare const _default: import("vue").DefineComponent<{
      * If set to `true`, the pagination is displayed smaller.
      */
     readonly small: BooleanConstructor;
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
     /**
      * This is called, when the visible pages, which are selectable in the pagination, have changed.
      * This is useful as only these pages can be navigated to on the next click.
@@ -85,6 +93,10 @@ declare const _default: import("vue").DefineComponent<{
      * If set to `true`, the pagination is displayed smaller.
      */
     readonly small: BooleanConstructor;
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
     /**
      * This is called, when the visible pages, which are selectable in the pagination, have changed.
      * This is useful as only these pages can be navigated to on the next click.

package/components/NPagination.js

@@ -26,6 +26,10 @@ export const nPaginationProps = {
    * If set to `true`, the pagination is displayed smaller.
    */
   small: Boolean,
+  /**
+   * Adds the classes to the top-level element.
+   */
+  addClass: String,
   /**
    * This is called, when the visible pages, which are selectable in the pagination, have changed.
    * This is useful as only these pages can be navigated to on the next click.
@@ -73,7 +77,7 @@ export default createComponent('NPagination', nPaginationProps, props => {
   }));
   const classesForItem = item => ['pagination-item', item.selectable ? 'selectable ' : '', item.selected ? 'selected' : '', props.small ? '' : 'not-small'];
   return () => _createVNode("nav", {
-    "class": "inline-flex rounded-md shadow -space-x-px"
+    "class": ['inline-flex rounded-md shadow -space-x-px', props.addClass]
   }, [_createVNode("button", {
     "class": ['pagination-item selectable rounded-l-md', props.small ? '' : 'not-small'],
     "onClick": previous