@naptics/vue-collection 0.1.10 → 0.2.1

package/components/NPagination.d.ts

@@ -23,10 +23,6 @@ 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.
@@ -60,10 +56,6 @@ 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.
@@ -93,10 +85,6 @@ 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,10 +26,6 @@ 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.
@@ -77,7 +73,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', props.addClass]
+    "class": "inline-flex rounded-md shadow -space-x-px"
   }, [_createVNode("button", {
     "class": ['pagination-item selectable rounded-l-md', props.small ? '' : 'not-small'],
     "onClick": previous

package/components/NSearchbar.d.ts

@@ -15,10 +15,6 @@ export declare const nSearchbarProps: {
      * 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 search-bar receives focus.
      */
@@ -55,10 +51,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 search-bar receives focus.
      */
@@ -85,10 +77,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 search-bar receives focus.
      */

package/components/NSearchbar.js

@@ -21,10 +21,6 @@ export const nSearchbarProps = {
    * 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 search-bar receives focus.
    */
@@ -45,9 +41,7 @@ export default createComponent('NSearchbar', nSearchbarProps, (props, context) =
     }
   };
   context.expose(exposed);
-  return () => _createVNode("div", {
-    "class": props.addClass
-  }, [_createVNode("label", {
+  return () => _createVNode("div", null, [_createVNode("label", {
     "for": "search",
     "class": "sr-only"
   }, [props.placeholder]), _createVNode("div", {

package/components/NSearchbarList.d.ts

@@ -10,10 +10,6 @@ export declare const nSearchbarListProps: {
      * 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;
     readonly value: import("vue").PropType<string>;
     readonly onUpdateValue: import("vue").PropType<(newValue: string) => void>;
     readonly items: {
@@ -45,10 +41,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;
     readonly value: import("vue").PropType<string>;
     readonly onUpdateValue: import("vue").PropType<(newValue: string) => void>;
     readonly items: {
@@ -76,10 +68,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;
     readonly value: import("vue").PropType<string>;
     readonly onUpdateValue: import("vue").PropType<(newValue: string) => void>;
     readonly items: {

package/components/NSearchbarList.js

@@ -14,11 +14,7 @@ export const nSearchbarListProps = {
   /**
    * Adds the classes directly to the input (e.g. for shadow).
    */
-  inputClass: String,
-  /**
-   * Adds the classes to the top-level element.
-   */
-  addClass: String
+  inputClass: String
 };
 /**
  * The `NSearchbarList` is a {@link NSearchbar} with a {@link NSuggestionList}.
@@ -36,7 +32,6 @@ export default createComponentWithSlots('NSearchbarList', nSearchbarListProps, [
       "onUpdateValue": props.onUpdateValue,
       "placeholder": props.placeholder,
       "inputClass": `shadow-lg ${props.inputClass}`,
-      "addClass": props.addClass,
       "onFocus": onFocus,
       "onBlur": onBlur
     }, null),

package/components/NSelect.d.ts

@@ -14,8 +14,9 @@ export declare const nSelectProps: {
         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 id of the currently selected option of this input.
      */
@@ -53,10 +54,6 @@ export declare const nSelectProps: {
      * @see {@link nValInputProps.inputClass}
      */
     readonly inputClass: StringConstructor;
-    /**
-     * @see {@link nValInputProps.addClass}
-     */
-    readonly addClass: StringConstructor;
 };
 export type SelectionOption = Identifiable & {
     label: string;
@@ -78,8 +75,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 id of the currently selected option of this input.
      */
@@ -117,10 +115,6 @@ declare const _default: import("vue").DefineComponent<{
      * @see {@link nValInputProps.inputClass}
      */
     readonly inputClass: StringConstructor;
-    /**
-     * @see {@link nValInputProps.addClass}
-     */
-    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<() => JSX.Element>;
@@ -134,8 +128,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 id of the currently selected option of this input.
      */
@@ -173,10 +168,6 @@ declare const _default: import("vue").DefineComponent<{
      * @see {@link nValInputProps.inputClass}
      */
     readonly inputClass: StringConstructor;
-    /**
-     * @see {@link nValInputProps.addClass}
-     */
-    readonly addClass: StringConstructor;
 }>> & {}, {
     readonly tooltipHide: boolean;
     readonly tooltipShow: boolean;

package/components/NSelect.js

@@ -42,10 +42,6 @@ export const nSelectProps = {
    * @see {@link nValInputProps.inputClass}
    */
   inputClass: nValInputProps.inputClass,
-  /**
-   * @see {@link nValInputProps.addClass}
-   */
-  addClass: nValInputProps.addClass,
   ...nToolTipPropsForImplementor
 };
 /**

package/components/NTable.d.ts

@@ -1,6 +1,7 @@
 import { type TWBreakpoint } from '../utils/breakpoints';
 import { type PropType } from 'vue';
 import './NTable.css';
+export type TableItem = string | number | (() => JSX.Element);
 export type TableHeading = {
     /**
      * The key of the table heading. This should match the key of the items.
@@ -9,7 +10,7 @@ export type TableHeading = {
     /**
      * The label of the table heading. If not set, no label is displayed.
      */
-    label?: string;
+    label?: TableItem;
     /**
      * If set to `true` the whole column of this heading will be emphasized.
      */
@@ -19,19 +20,18 @@ export type TableHeading = {
      */
     cellClass?: string;
     /**
-     * If set the heading will become a details entry when the screen is smaller than the specified breakpoint.
+     * This classes will be directly set on all cells of this heading, when they show up in the details.
      */
-    breakpoint?: TWBreakpoint;
-};
-export type TableDetail = {
+    detailsClass?: string;
     /**
-     * The key of the table details. This should match the key of the items.
+     * If set the heading will become a details entry when the screen is smaller than the specified breakpoint.
      */
-    key: string;
+    breakpoint?: TWBreakpoint;
     /**
-     * The label of the table detail. If not set, no label is displayed.
+     * If set to `true`, this heading will always show up inside the details. If this is set the `breakpoint`
+     * property has no effect, because the items always show up as details ignoring the breakpoint.
      */
-    label?: string;
+    isDetail?: boolean;
 };
 export type TableRow = Record<string, TableItem> & {
     /**
@@ -40,7 +40,6 @@ export type TableRow = Record<string, TableItem> & {
      */
     action?: TableItem;
 };
-export type TableItem = string | number | (() => JSX.Element);
 export declare const nTableProps: {
     /**
      * The headings of the table. These define which columns are shown in the table and in which order.
@@ -50,17 +49,13 @@ export declare const nTableProps: {
         readonly required: true;
     };
     /**
-     * Details can be added additionally to headings.
-     * If details are set a little chevron icon is displayed at the end of each table row
-     * and if clicked on it the data is displayed in a key-value fashion.
-     * The values of the entries should be passed via the `items` prop
-     * in the same way as if the details were normal headings.
-     * Note that details can be added dynamically by adding the `breakpoint` property to the headings.
+     * Adds the classes to all headings at the top of the table.
      */
-    readonly details: {
-        readonly type: PropType<TableDetail[]>;
-        readonly default: () => never[];
-    };
+    readonly headingsClass: StringConstructor;
+    /**
+     * Adds the classes to all headings in the details of the table.
+     */
+    readonly headingDetailsClass: StringConstructor;
     /**
      * The items of the table. They consist of an array of table rows.
      * Every tablerow is an object containing elements for the heading keys.
@@ -86,10 +81,6 @@ export declare const nTableProps: {
         readonly type: PropType<TableRow[]>;
         readonly default: () => never[];
     };
-    /**
-     * Adds the classes to the top-level element.
-     */
-    readonly addClass: StringConstructor;
 };
 /**
  * The `NTable` is a styled html table which accepts data and displays it appropriately.
@@ -103,17 +94,13 @@ declare const _default: import("vue").DefineComponent<{
         readonly required: true;
     };
     /**
-     * Details can be added additionally to headings.
-     * If details are set a little chevron icon is displayed at the end of each table row
-     * and if clicked on it the data is displayed in a key-value fashion.
-     * The values of the entries should be passed via the `items` prop
-     * in the same way as if the details were normal headings.
-     * Note that details can be added dynamically by adding the `breakpoint` property to the headings.
+     * Adds the classes to all headings at the top of the table.
      */
-    readonly details: {
-        readonly type: PropType<TableDetail[]>;
-        readonly default: () => never[];
-    };
+    readonly headingsClass: StringConstructor;
+    /**
+     * Adds the classes to all headings in the details of the table.
+     */
+    readonly headingDetailsClass: StringConstructor;
     /**
      * The items of the table. They consist of an array of table rows.
      * Every tablerow is an object containing elements for the heading keys.
@@ -139,10 +126,6 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<TableRow[]>;
         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 headings of the table. These define which columns are shown in the table and in which order.
@@ -152,17 +135,13 @@ declare const _default: import("vue").DefineComponent<{
         readonly required: true;
     };
     /**
-     * Details can be added additionally to headings.
-     * If details are set a little chevron icon is displayed at the end of each table row
-     * and if clicked on it the data is displayed in a key-value fashion.
-     * The values of the entries should be passed via the `items` prop
-     * in the same way as if the details were normal headings.
-     * Note that details can be added dynamically by adding the `breakpoint` property to the headings.
+     * Adds the classes to all headings at the top of the table.
      */
-    readonly details: {
-        readonly type: PropType<TableDetail[]>;
-        readonly default: () => never[];
-    };
+    readonly headingsClass: StringConstructor;
+    /**
+     * Adds the classes to all headings in the details of the table.
+     */
+    readonly headingDetailsClass: StringConstructor;
     /**
      * The items of the table. They consist of an array of table rows.
      * Every tablerow is an object containing elements for the heading keys.
@@ -188,12 +167,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<TableRow[]>;
         readonly default: () => never[];
     };
-    /**
-     * Adds the classes to the top-level element.
-     */
-    readonly addClass: StringConstructor;
 }>> & {}, {
-    readonly details: TableDetail[];
     readonly items: TableRow[];
 }>;
 export default _default;

package/components/NTable.js

@@ -15,17 +15,13 @@ export const nTableProps = {
     required: true
   },
   /**
-   * Details can be added additionally to headings.
-   * If details are set a little chevron icon is displayed at the end of each table row
-   * and if clicked on it the data is displayed in a key-value fashion.
-   * The values of the entries should be passed via the `items` prop
-   * in the same way as if the details were normal headings.
-   * Note that details can be added dynamically by adding the `breakpoint` property to the headings.
+   * Adds the classes to all headings at the top of the table.
    */
-  details: {
-    type: Array,
-    default: () => []
-  },
+  headingsClass: String,
+  /**
+   * Adds the classes to all headings in the details of the table.
+   */
+  headingDetailsClass: String,
   /**
    * The items of the table. They consist of an array of table rows.
    * Every tablerow is an object containing elements for the heading keys.
@@ -50,19 +46,15 @@ export const nTableProps = {
   items: {
     type: Array,
     default: () => []
-  },
-  /**
-   * Adds the classes to the top-level element.
-   */
-  addClass: String
+  }
 };
 /**
  * The `NTable` is a styled html table which accepts data and displays it appropriately.
  */
 export default createComponent('NTable', nTableProps, props => {
   const headings = computed(() => {
-    // remove all headings which are below the breakpoint
-    const headings = props.headings.filter(heading => !heading.breakpoint || isWidthBreakpoint(heading.breakpoint).value);
+    // filter out details headings
+    const headings = props.headings.filter(heading => !isHeadingDetail(heading));
     // The column for actions is shown if there are details
     // or if any of the items contain an element with the action-key.
     if (showDetails.value || props.items.filter(row => row.action != null).length != 0) {
@@ -72,12 +64,7 @@ export default createComponent('NTable', nTableProps, props => {
     }
     return headings;
   });
-  const details = computed(() => {
-    // take all headings which are below the breakpoint
-    const details = props.headings.filter(heading => heading.breakpoint && !isWidthBreakpoint(heading.breakpoint).value);
-    details.push(...props.details);
-    return details;
-  });
+  const details = computed(() => props.headings.filter(isHeadingDetail));
   const showDetails = computed(() => details.value.length > 0);
   const detailsOpen = ref([]);
   const isDetailsOpen = index => detailsOpen.value[index] || false;
@@ -90,7 +77,7 @@ export default createComponent('NTable', nTableProps, props => {
     immediate: true
   });
   return () => _createVNode("div", {
-    "class": `overflow-x-auto ${props.addClass}`
+    "class": "overflow-x-auto"
   }, [_createVNode("table", {
     "class": "min-w-full text-default-500 text-sm"
   }, [_createVNode("thead", {
@@ -98,8 +85,8 @@ export default createComponent('NTable', nTableProps, props => {
   }, [_createVNode("tr", null, [headings.value.map(heading => _createVNode("th", {
     "key": heading.key,
     "scope": "col",
-    "class": "p-4 table-heading"
-  }, [heading.label]))])]), props.items.length > 0 && props.items.map((item, itemIndex) => _createVNode(_Fragment, {
+    "class": `p-4 table-heading ${props.headingsClass}`
+  }, [buildItem(heading.label)]))])]), props.items.length > 0 && props.items.map((item, itemIndex) => _createVNode(_Fragment, {
     "key": itemIndex
   }, [_createVNode("tbody", {
     "class": ['border-default-200 border-t', itemIndex % 2 === 0 ? 'bg-white' : 'bg-default-50']
@@ -116,9 +103,9 @@ export default createComponent('NTable', nTableProps, props => {
   }, [details.value.map((detail, detailIndex) => _createVNode("tr", {
     "key": `detail-${detailIndex}`
   }, [_createVNode("td", {
-    "class": ['table-heading px-4 py-1', details.value.length - 1 == detailIndex ? 'pb-4' : '']
-  }, [detail.label]), _createVNode("td", {
-    "class": ['px-4 py-1', details.value.length - 1 == detailIndex ? 'pb-4' : ''],
+    "class": ['table-heading px-4 py-1', props.headingDetailsClass, details.value.length - 1 == detailIndex ? 'pb-4' : '']
+  }, [buildItem(detail.label)]), _createVNode("td", {
+    "class": ['px-4 py-1', details.value[detailIndex].detailsClass, details.value.length - 1 == detailIndex ? 'pb-4' : ''],
     "colspan": headings.value.length - 1
   }, [item[detail.key] && buildItem(item[detail.key])])]))])]))])]);
 });
@@ -126,5 +113,9 @@ export default createComponent('NTable', nTableProps, props => {
  * Builds a JSX-Element out of the item
  */
 function buildItem(item) {
-  if (typeof item == 'string' || typeof item == 'number') return _createVNode(_Fragment, null, [item]);else return item();
+  if (item === undefined) return undefined;else if (typeof item == 'string' || typeof item == 'number') return _createVNode(_Fragment, null, [item]);else return item();
+}
+function isHeadingDetail(heading) {
+  // take all headings which are details or below the breakpoint
+  return heading.isDetail || heading.breakpoint !== undefined && !isWidthBreakpoint(heading.breakpoint).value;
 }

package/components/NTableAction.d.ts

@@ -16,10 +16,6 @@ export declare const nTableActionProps: {
         readonly type: PropType<"button" | "submit" | "reset">;
         readonly default: "button";
     };
-    /**
-     * Adds the classes to the top-level element.
-     */
-    readonly addClass: StringConstructor;
     /**
      * This is called when the action is clicked.
      * It is only called when the `route` prop is not set on the action.
@@ -46,10 +42,6 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<"button" | "submit" | "reset">;
         readonly default: "button";
     };
-    /**
-     * Adds the classes to the top-level element.
-     */
-    readonly addClass: StringConstructor;
     /**
      * This is called when the action is clicked.
      * It is only called when the `route` prop is not set on the action.
@@ -71,10 +63,6 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<"button" | "submit" | "reset">;
         readonly default: "button";
     };
-    /**
-     * Adds the classes to the top-level element.
-     */
-    readonly addClass: StringConstructor;
     /**
      * This is called when the action is clicked.
      * It is only called when the `route` prop is not set on the action.

package/components/NTableAction.js

@@ -18,10 +18,6 @@ export const nTableActionProps = {
    * The html attribute, which indicates the type of the button.
    */
   type: nButtonProps.type,
-  /**
-   * Adds the classes to the top-level element.
-   */
-  addClass: String,
   /**
    * This is called when the action is clicked.
    * It is only called when the `route` prop is not set on the action.
@@ -36,7 +32,7 @@ export default createComponent('NTableAction', nTableActionProps, (props, {
   slots
 }) => {
   const content = () => slots.default?.() || _createVNode(_Fragment, null, [props.text]);
-  const classes = ['text-left font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-default-900 rounded-sm ring-offset-2 text-default-900 hover:underline hover:text-default-700', props.addClass];
+  const classes = ['text-left font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-default-900 rounded-sm ring-offset-2 text-default-900 hover:underline hover:text-default-700'];
   return () => {
     let _slot;
     return props.route ? _createVNode(RouterLink, {

package/components/NTextArea.d.ts

@@ -22,8 +22,9 @@ export declare const nTextAreaProps: {
         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 text area. Is displayed as a label above the text area.
      */
@@ -69,10 +70,6 @@ export declare const nTextAreaProps: {
      * 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 text area reveices focus.
      */
@@ -113,8 +110,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 text area. Is displayed as a label above the text area.
      */
@@ -160,10 +158,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 text area reveices focus.
      */
@@ -197,8 +191,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 text area. Is displayed as a label above the text area.
      */
@@ -244,10 +239,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 text area reveices focus.
      */

package/components/NTextArea.js

@@ -56,10 +56,6 @@ const nTextAreaBaseProps = {
    * 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 text area reveices focus.
    */