@naptics/vue-collection 0.1.10 → 0.2.1

package/components/NDropzone.js

@@ -60,11 +60,7 @@ 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.
@@ -147,7 +143,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, props.addClass],
+      "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],
       "onDrop": onDrop,
       "onDragover": onDragOver,
       "onDragleave": onDragLeave,

package/components/NFormModal.js

@@ -34,15 +34,19 @@ export const nFormModalProps = {
 export default 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: () => {
-      if (!props.form || props.form.validate().isValid) {
-        props.onOk?.();
-        if (props.closeOnOk) props.onUpdateValue?.(false);
-      }
-    },
-    closeOnOk: false
+    onOk,
+    closeOnOk: false,
+    onKeydown: event => {
+      if (event.metaKey && event.key === 'Enter') onOk();
+    }
   }));
   return () => _createVNode(NModal, childProps.value, {
     default: () => [_createVNode(NForm, {

package/components/NIconButton.d.ts

@@ -16,8 +16,9 @@ export declare const nIconButtonProps: {
         readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
         readonly default: "max-w-xs";
     };
-    readonly tooltipWrapperAddClass: StringConstructor;
-    readonly tooltipContentAddClass: StringConstructor;
+    readonly tooltipWrapperClass: StringConstructor;
+    readonly tooltipContentClass: StringConstructor;
+    readonly tooltipArrowClass: StringConstructor;
     /**
      * The icon of the icon-button.
      */
@@ -62,9 +63,11 @@ export declare const nIconButtonProps: {
      */
     readonly disabled: BooleanConstructor;
     /**
-     * Adds the classes to the top-level element.
+     * 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 addClass: StringConstructor;
+    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.
@@ -89,8 +92,9 @@ 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 tooltipWrapperClass: StringConstructor;
+    readonly tooltipContentClass: StringConstructor;
+    readonly tooltipArrowClass: StringConstructor;
     /**
      * The icon of the icon-button.
      */
@@ -135,9 +139,11 @@ declare const _default: import("vue").DefineComponent<{
      */
     readonly disabled: BooleanConstructor;
     /**
-     * Adds the classes to the top-level element.
+     * 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 addClass: StringConstructor;
+    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.
@@ -158,8 +164,9 @@ 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 tooltipWrapperClass: StringConstructor;
+    readonly tooltipContentClass: StringConstructor;
+    readonly tooltipArrowClass: StringConstructor;
     /**
      * The icon of the icon-button.
      */
@@ -204,9 +211,11 @@ declare const _default: import("vue").DefineComponent<{
      */
     readonly disabled: BooleanConstructor;
     /**
-     * Adds the classes to the top-level element.
+     * 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 addClass: StringConstructor;
+    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.

package/components/NIconButton.js

@@ -48,9 +48,11 @@ export const nIconButtonProps = {
    */
   disabled: Boolean,
   /**
-   * Adds the classes to the top-level element.
+   * 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.
    */
-  addClass: String,
+  buttonClass: 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.
@@ -62,7 +64,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`, props.addClass];
+  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.buttonClass];
   const content = () => _createVNode(props.icon, {
     "class": `w-${props.size} h-${props.size}`
   }, null);

package/components/NIconCircle.d.ts

@@ -41,10 +41,6 @@ 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.
@@ -90,10 +86,6 @@ 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.
@@ -135,10 +127,6 @@ 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,11 +40,7 @@ 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;
@@ -61,7 +57,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}`, props.addClass],
+    "class": ['flex items-center justify-center rounded-full', `bg-${props.color}-${props.bgShade}`],
     "style": `width: ${circleSize}px; height: ${circleSize}px`
   }, [_createVNode("div", {
     "class": `text-${props.color}-${props.iconShade}`,

package/components/NInput.d.ts

@@ -13,8 +13,9 @@ export declare const nInputProps: {
         readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
         readonly default: "max-w-xs";
     };
-    readonly tooltipWrapperAddClass: StringConstructor;
-    readonly tooltipContentAddClass: StringConstructor;
+    readonly tooltipWrapperClass: StringConstructor;
+    readonly tooltipContentClass: StringConstructor;
+    readonly tooltipArrowClass: StringConstructor;
     /**
      * The name of the input. Is displayed as a label above the input.
      */
@@ -65,10 +66,6 @@ export declare const nInputProps: {
      * 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.
      */
@@ -102,8 +99,9 @@ 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 tooltipWrapperClass: StringConstructor;
+    readonly tooltipContentClass: StringConstructor;
+    readonly tooltipArrowClass: StringConstructor;
     /**
      * The name of the input. Is displayed as a label above the input.
      */
@@ -154,10 +152,6 @@ declare const _default: import("vue").DefineComponent<{
      * 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.
      */
@@ -181,8 +175,9 @@ 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 tooltipWrapperClass: StringConstructor;
+    readonly tooltipContentClass: StringConstructor;
+    readonly tooltipArrowClass: StringConstructor;
     /**
      * The name of the input. Is displayed as a label above the input.
      */
@@ -233,10 +228,6 @@ declare const _default: import("vue").DefineComponent<{
      * 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

@@ -57,10 +57,6 @@ export const nInputProps = {
    * 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.
    */
@@ -80,9 +76,7 @@ export default createComponent('NInput', nInputProps, (props, context) => {
     focus: () => inputRef.value?.focus()
   };
   context.expose(exposed);
-  return () => _createVNode("div", {
-    "class": props.addClass
-  }, [props.name && !props.hideLabel && _createVNode("label", {
+  return () => _createVNode("div", 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({

package/components/NInputPhone.d.ts

@@ -22,8 +22,9 @@ 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 tooltipWrapperClass: StringConstructor;
+    readonly tooltipContentClass: StringConstructor;
+    readonly tooltipArrowClass: StringConstructor;
     readonly name: StringConstructor;
     readonly placeholder: StringConstructor;
     readonly autocomplete: {
@@ -40,7 +41,6 @@ export declare const nInputPhoneProps: {
     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>;
@@ -73,8 +73,9 @@ 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 tooltipWrapperClass: StringConstructor;
+    readonly tooltipContentClass: StringConstructor;
+    readonly tooltipArrowClass: StringConstructor;
     readonly name: StringConstructor;
     readonly placeholder: StringConstructor;
     readonly autocomplete: {
@@ -91,7 +92,6 @@ declare const _default: import("vue").DefineComponent<{
     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>;
@@ -120,8 +120,9 @@ 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 tooltipWrapperClass: StringConstructor;
+    readonly tooltipContentClass: StringConstructor;
+    readonly tooltipArrowClass: StringConstructor;
     readonly name: StringConstructor;
     readonly placeholder: StringConstructor;
     readonly autocomplete: {
@@ -138,7 +139,6 @@ declare const _default: import("vue").DefineComponent<{
     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

@@ -65,8 +65,9 @@ export declare const nInputSelectProps: {
         readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
         readonly default: "max-w-xs";
     };
-    readonly tooltipWrapperAddClass: StringConstructor;
-    readonly tooltipContentAddClass: StringConstructor;
+    readonly tooltipWrapperClass: StringConstructor;
+    readonly tooltipContentClass: StringConstructor;
+    readonly tooltipArrowClass: StringConstructor;
     readonly name: StringConstructor;
     readonly placeholder: StringConstructor;
     readonly autocomplete: {
@@ -83,7 +84,6 @@ export declare const nInputSelectProps: {
     readonly small: BooleanConstructor;
     readonly hideLabel: BooleanConstructor;
     readonly inputClass: StringConstructor;
-    readonly addClass: StringConstructor;
     readonly onFocus: PropType<() => void>;
     readonly onBlur: PropType<() => void>;
 };
@@ -159,8 +159,9 @@ 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 tooltipWrapperClass: StringConstructor;
+    readonly tooltipContentClass: StringConstructor;
+    readonly tooltipArrowClass: StringConstructor;
     readonly name: StringConstructor;
     readonly placeholder: StringConstructor;
     readonly autocomplete: {
@@ -177,7 +178,6 @@ declare const _default: import("vue").DefineComponent<{
     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<{
@@ -244,8 +244,9 @@ 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 tooltipWrapperClass: StringConstructor;
+    readonly tooltipContentClass: StringConstructor;
+    readonly tooltipArrowClass: StringConstructor;
     readonly name: StringConstructor;
     readonly placeholder: StringConstructor;
     readonly autocomplete: {
@@ -262,7 +263,6 @@ declare const _default: import("vue").DefineComponent<{
     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

@@ -42,8 +42,9 @@ export declare const nInputSuggestionProps: {
         readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
         readonly default: "max-w-xs";
     };
-    readonly tooltipWrapperAddClass: StringConstructor;
-    readonly tooltipContentAddClass: StringConstructor;
+    readonly tooltipWrapperClass: StringConstructor;
+    readonly tooltipContentClass: StringConstructor;
+    readonly tooltipArrowClass: StringConstructor;
     readonly name: StringConstructor;
     readonly placeholder: StringConstructor;
     readonly autocomplete: {
@@ -60,7 +61,6 @@ export declare const nInputSuggestionProps: {
     readonly small: BooleanConstructor;
     readonly hideLabel: BooleanConstructor;
     readonly inputClass: StringConstructor;
-    readonly addClass: StringConstructor;
     readonly onFocus: PropType<() => void>;
     readonly onBlur: PropType<() => void>;
     readonly value: PropType<string>;
@@ -113,8 +113,9 @@ 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 tooltipWrapperClass: StringConstructor;
+    readonly tooltipContentClass: StringConstructor;
+    readonly tooltipArrowClass: StringConstructor;
     readonly name: StringConstructor;
     readonly placeholder: StringConstructor;
     readonly autocomplete: {
@@ -131,7 +132,6 @@ declare const _default: import("vue").DefineComponent<{
     readonly small: BooleanConstructor;
     readonly hideLabel: BooleanConstructor;
     readonly inputClass: StringConstructor;
-    readonly addClass: StringConstructor;
     readonly onFocus: PropType<() => void>;
     readonly onBlur: PropType<() => void>;
     readonly value: PropType<string>;
@@ -179,8 +179,9 @@ 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 tooltipWrapperClass: StringConstructor;
+    readonly tooltipContentClass: StringConstructor;
+    readonly tooltipArrowClass: StringConstructor;
     readonly name: StringConstructor;
     readonly placeholder: StringConstructor;
     readonly autocomplete: {
@@ -197,7 +198,6 @@ declare const _default: import("vue").DefineComponent<{
     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,10 +29,6 @@ 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.
@@ -70,10 +66,6 @@ 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.
@@ -107,10 +99,6 @@ 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,10 +30,6 @@ 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.
@@ -50,7 +46,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}`, props.addClass]);
+  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}`]);
   return () => props.route ? _createVNode(RouterLink, {
     "to": props.route,
     "class": classes.value

package/components/NList.d.ts

@@ -25,10 +25,6 @@ export declare const nListProps: {
      * Adds the classese to all text elements (on the right side).
      */
     readonly textClass: StringConstructor;
-    /**
-     * Adds the classes to the top-level element.
-     */
-    readonly addClass: StringConstructor;
 };
 /**
  * The `NList` displays key-value data in an appealing way.
@@ -49,10 +45,6 @@ declare const _default: import("vue").DefineComponent<{
      * Adds the classese to all text elements (on the right side).
      */
     readonly textClass: StringConstructor;
-    /**
-     * 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.
@@ -69,10 +61,6 @@ declare const _default: import("vue").DefineComponent<{
      * Adds the classese to all text elements (on the right side).
      */
     readonly textClass: StringConstructor;
-    /**
-     * Adds the classes to the top-level element.
-     */
-    readonly addClass: StringConstructor;
 }>> & {}, {
     readonly items: ListItem[];
 }>;

package/components/NList.js

@@ -15,19 +15,13 @@ export const nListProps = {
   /**
    * Adds the classese to all text elements (on the right side).
    */
-  textClass: String,
-  /**
-   * Adds the classes to the top-level element.
-   */
-  addClass: String
+  textClass: String
 };
 /**
  * The `NList` displays key-value data in an appealing way.
  */
 export default createComponent('NList', nListProps, props => {
-  return () => _createVNode("dl", {
-    "class": props.addClass
-  }, [props.items.map((item, index) => _createVNode("div", {
+  return () => _createVNode("dl", null, [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,10 +21,6 @@ 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.
@@ -51,10 +47,6 @@ 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.
@@ -77,10 +69,6 @@ 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,11 +23,7 @@ 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.
@@ -39,7 +35,7 @@ export default createComponent('NLoadingIndicator', nLoadingIndicator, props =>
     'n-loading-indicator-gap': `${gap.value}px`
   }));
   return () => _createVNode("div", {
-    "class": `lds-ellipsis ${props.addClass}`,
+    "class": "lds-ellipsis",
     "style": `height:${props.size}px;width:${totalWidth.value}px`
   }, [_createVNode("div", {
     "class": `bg-${props.color}-${props.shade}`,