@naptics/vue-collection 0.1.8 → 0.1.10

package/components/NInputSelect.d.ts

@@ -1,5 +1,6 @@
 import { type Identifiable } from '../utils/identifiable';
 import { type PropType } from 'vue';
+import type { AnyObject } from '../utils/utils';
 export declare const nInputSelectProps: {
     /**
      * The id of the currently selected option of this input.
@@ -62,22 +63,14 @@ export declare const nInputSelectProps: {
     };
     readonly tooltipMaxWidth: {
         readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
-        readonly default: "max-w-xs"; /**
-         * @see {@link nValInputProps.optional}
-         */
+        readonly default: "max-w-xs";
     };
     readonly tooltipWrapperAddClass: StringConstructor;
     readonly tooltipContentAddClass: StringConstructor;
     readonly name: StringConstructor;
     readonly placeholder: StringConstructor;
     readonly autocomplete: {
-        readonly type: StringConstructor; /**
-         * This is called with the newly selected id when the selection has changed.
-         * This happens, when an item from the suggestion list is selected or the
-         * input matches a selection option exactly.
-         * If no id is selected, the empty string is passed, in order to
-         * match the API of all other inputs who never pass `undefined`.
-         */
+        readonly type: StringConstructor;
         readonly default: "off";
     };
     readonly type: {
@@ -96,7 +89,7 @@ export declare const nInputSelectProps: {
 };
 export type InputSelectOption = Identifiable & {
     label: string;
-} & Record<string, unknown>;
+} & AnyObject;
 /**
  * The `NInputSelect` is very similar to the {@link NSelect}, but instead of a select input it is a regular input.
  * The user is forced to use a value from the specified options of the input.
@@ -164,22 +157,14 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly tooltipMaxWidth: {
         readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
-        readonly default: "max-w-xs"; /**
-         * @see {@link nValInputProps.optional}
-         */
+        readonly default: "max-w-xs";
     };
     readonly tooltipWrapperAddClass: StringConstructor;
     readonly tooltipContentAddClass: StringConstructor;
     readonly name: StringConstructor;
     readonly placeholder: StringConstructor;
     readonly autocomplete: {
-        readonly type: StringConstructor; /**
-         * This is called with the newly selected id when the selection has changed.
-         * This happens, when an item from the suggestion list is selected or the
-         * input matches a selection option exactly.
-         * If no id is selected, the empty string is passed, in order to
-         * match the API of all other inputs who never pass `undefined`.
-         */
+        readonly type: StringConstructor;
         readonly default: "off";
     };
     readonly type: {
@@ -257,22 +242,14 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly tooltipMaxWidth: {
         readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
-        readonly default: "max-w-xs"; /**
-         * @see {@link nValInputProps.optional}
-         */
+        readonly default: "max-w-xs";
     };
     readonly tooltipWrapperAddClass: StringConstructor;
     readonly tooltipContentAddClass: StringConstructor;
     readonly name: StringConstructor;
     readonly placeholder: StringConstructor;
     readonly autocomplete: {
-        readonly type: StringConstructor; /**
-         * This is called with the newly selected id when the selection has changed.
-         * This happens, when an item from the suggestion list is selected or the
-         * input matches a selection option exactly.
-         * If no id is selected, the empty string is passed, in order to
-         * match the API of all other inputs who never pass `undefined`.
-         */
+        readonly type: StringConstructor;
         readonly default: "off";
     };
     readonly type: {

package/components/NList.d.ts

@@ -1,13 +1,13 @@
 import type { PropType } from 'vue';
 export type ListItem = {
     /**
-     * The title of the item.
+     * The title of the item. Accepts either string or a function returning a JSX element.
      */
-    title: string;
+    title: string | (() => JSX.Element);
     /**
-     * The text of the item.
+     * The text of the item. Accepts either string or a function returning a JSX element.
      */
-    text?: string;
+    text?: string | (() => JSX.Element);
 };
 export declare const nListProps: {
     /**
@@ -17,6 +17,14 @@ export declare const nListProps: {
         readonly type: PropType<ListItem[]>;
         readonly default: () => never[];
     };
+    /**
+     * Adds the classes to all title elements (on the left side).
+     */
+    readonly titleClass: StringConstructor;
+    /**
+     * Adds the classese to all text elements (on the right side).
+     */
+    readonly textClass: StringConstructor;
     /**
      * Adds the classes to the top-level element.
      */
@@ -33,6 +41,14 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<ListItem[]>;
         readonly default: () => never[];
     };
+    /**
+     * Adds the classes to all title elements (on the left side).
+     */
+    readonly titleClass: StringConstructor;
+    /**
+     * Adds the classese to all text elements (on the right side).
+     */
+    readonly textClass: StringConstructor;
     /**
      * Adds the classes to the top-level element.
      */
@@ -45,6 +61,14 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<ListItem[]>;
         readonly default: () => never[];
     };
+    /**
+     * Adds the classes to all title elements (on the left side).
+     */
+    readonly titleClass: StringConstructor;
+    /**
+     * Adds the classese to all text elements (on the right side).
+     */
+    readonly textClass: StringConstructor;
     /**
      * Adds the classes to the top-level element.
      */

package/components/NList.js

@@ -1,4 +1,4 @@
-import { createVNode as _createVNode } from "vue";
+import { Fragment as _Fragment, createVNode as _createVNode } from "vue";
 import { createComponent } from '../utils/component';
 export const nListProps = {
   /**
@@ -8,6 +8,14 @@ export const nListProps = {
     type: Array,
     default: () => []
   },
+  /**
+   * Adds the classes to all title elements (on the left side).
+   */
+  titleClass: String,
+  /**
+   * Adds the classese to all text elements (on the right side).
+   */
+  textClass: String,
   /**
    * Adds the classes to the top-level element.
    */
@@ -23,8 +31,11 @@ export default createComponent('NList', nListProps, props => {
     "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", {
-    "class": "text-sm font-medium text-default-500"
-  }, [item.title]), _createVNode("dd", {
-    "class": "mt-1 text-sm sm:mt-0 sm:col-span-2"
-  }, [item.text])]))]);
-});
+    "class": `text-sm font-medium text-default-500 ${props.titleClass}`
+  }, [buildElement(item.title)]), _createVNode("dd", {
+    "class": `mt-1 text-sm sm:mt-0 sm:col-span-2 ${props.textClass}`
+  }, [buildElement(item.text)])]))]);
+});
+function buildElement(element) {
+  if (typeof element === 'function') return element();else return _createVNode(_Fragment, null, [element]);
+}

package/components/NSearchbarList.d.ts

@@ -19,9 +19,7 @@ export declare const nSearchbarListProps: {
     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,9 +54,7 @@ declare const _default: import("vue").DefineComponent<{
     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;
@@ -89,9 +85,7 @@ declare const _default: import("vue").DefineComponent<{
     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/NSuggestionList.d.ts

@@ -1,5 +1,6 @@
 import type { Identifiable } from '../utils/identifiable';
 import { type PropType } from 'vue';
+import type { AnyObject } from '../utils/utils';
 export declare const nSuggestionListPropsForConfig: {
     /**
      * The items which are available to show in the list. The first `maxItems` will be displayed.
@@ -144,7 +145,7 @@ export type ItemSlotProps<T extends Identifiable = SuggestionItem> = {
 };
 export type SuggestionItem = Identifiable & {
     label?: string;
-} & Record<string, unknown>;
+} & AnyObject;
 /**
  * The `NSuggestionList` can be added to an input and adds a list below it which is shown when the input is focused.
  */

package/package.json

@@ -2,7 +2,7 @@
     "name": "@naptics/vue-collection",
     "author": "Timo Siegenthaler",
     "description": "Vue Collection is a collection of styled and fully functional Vue components which can easily be integrated into our projects.",
-    "version": "0.1.8",
+    "version": "0.1.10",
     "main": "./index.js",
     "repository": {
         "type": "git",

package/utils/utils.d.ts

@@ -22,7 +22,7 @@ export declare function isNullish(value: Nullish<unknown>): value is null | unde
  */
 export declare function notNullishRef<T>(ref: Ref<T>): ref is Ref<NonNullable<T>>;
 export type AnyObject = Record<string | number | symbol, unknown>;
-export type EmptyObject = Record<string, never>;
+export type EmptyObject = Record<string | number | symbol, never>;
 export declare function isAnyObject(object: unknown): object is AnyObject;
 /**
  * Marks all properties of an object (including sub-objects) as readonly.