@naptics/vue-collection 0.1.0 → 0.1.2

package/components/NInput.d.ts

@@ -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.
      */
@@ -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.
      */
@@ -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

@@ -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>;
@@ -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>;
@@ -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

@@ -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>;
 };
@@ -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<{
@@ -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

@@ -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>;
@@ -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>;
@@ -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

package/components/NSearchbar.d.ts

@@ -12,9 +12,13 @@ export declare const nSearchbarProps: {
      */
     readonly small: BooleanConstructor;
     /**
-     * The classes are directly added to the input (e.g. for shadow).
+     * 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.
      */
@@ -48,9 +52,13 @@ declare const _default: import("vue").DefineComponent<{
      */
     readonly small: BooleanConstructor;
     /**
-     * The classes are directly added to the input (e.g. for shadow).
+     * 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.
      */
@@ -74,9 +82,13 @@ declare const _default: import("vue").DefineComponent<{
      */
     readonly small: BooleanConstructor;
     /**
-     * The classes are directly added to the input (e.g. for shadow).
+     * 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

@@ -18,9 +18,13 @@ export const nSearchbarProps = {
    */
   small: Boolean,
   /**
-   * The classes are directly added to the input (e.g. for shadow).
+   * 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.
    */
@@ -41,7 +45,9 @@ export default createComponent('NSearchbar', nSearchbarProps, (props, context) =
     }
   };
   context.expose(exposed);
-  return () => _createVNode("div", null, [_createVNode("label", {
+  return () => _createVNode("div", {
+    "class": props.addClass
+  }, [_createVNode("label", {
     "for": "search",
     "class": "sr-only"
   }, [props.placeholder]), _createVNode("div", {

package/components/NSearchbarList.d.ts

@@ -6,12 +6,22 @@ export declare const nSearchbarListProps: {
         readonly type: StringConstructor;
         readonly default: string;
     };
+    /**
+     * 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: {
         readonly type: import("vue").PropType<import("./NSuggestionList").SuggestionItem[]>;
         readonly default: () => never[];
-    };
+    }; /**
+     * Adds the classes directly to the input (e.g. for shadow).
+     */
     readonly maxItems: {
         readonly type: NumberConstructor;
         readonly default: () => number;
@@ -33,12 +43,22 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: StringConstructor;
         readonly default: string;
     };
+    /**
+     * 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: {
         readonly type: import("vue").PropType<import("./NSuggestionList").SuggestionItem[]>;
         readonly default: () => never[];
-    };
+    }; /**
+     * Adds the classes directly to the input (e.g. for shadow).
+     */
     readonly maxItems: {
         readonly type: NumberConstructor;
         readonly default: () => number;
@@ -56,12 +76,22 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: StringConstructor;
         readonly default: string;
     };
+    /**
+     * 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: {
         readonly type: import("vue").PropType<import("./NSuggestionList").SuggestionItem[]>;
         readonly default: () => never[];
-    };
+    }; /**
+     * Adds the classes directly to the input (e.g. for shadow).
+     */
     readonly maxItems: {
         readonly type: NumberConstructor;
         readonly default: () => number;

package/components/NSearchbarList.js

@@ -10,7 +10,15 @@ export const nSearchbarListProps = {
   /**
    * @see {@link nSearchbarProps.placeholder}
    */
-  placeholder: nSearchbarProps.placeholder
+  placeholder: nSearchbarProps.placeholder,
+  /**
+   * Adds the classes directly to the input (e.g. for shadow).
+   */
+  inputClass: String,
+  /**
+   * Adds the classes to the top-level element.
+   */
+  addClass: String
 };
 /**
  * The `NSearchbarList` is a {@link NSearchbar} with a {@link NSuggestionList}.
@@ -27,7 +35,8 @@ export default createComponent('NSearchbarList', nSearchbarListProps, props => {
       "value": props.value,
       "onUpdateValue": props.onUpdateValue,
       "placeholder": props.placeholder,
-      "inputClass": "shadow-lg",
+      "inputClass": `shadow-lg ${props.inputClass}`,
+      "addClass": props.addClass,
       "onFocus": onFocus,
       "onBlur": onBlur
     }, null),