@naptics/vue-collection 0.1.7 → 0.1.9

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.
@@ -88,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.

package/components/NInputSelect.js

@@ -1,5 +1,5 @@
 import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
-import { createComponent } from '../utils/component';
+import { createComponentWithSlots } from '../utils/component';
 import { Id } from '../utils/identifiable';
 import { option } from '../utils/validation';
 import { vModelForRef } from '../utils/vModel';
@@ -64,7 +64,7 @@ export const nInputSelectProps = {
  * The user is forced to use a value from the specified options of the input.
  * While they type, the list of options is shown to them and filtered based on their input.
  */
-export default createComponent('NInputSelect', nInputSelectProps, props => {
+export default createComponentWithSlots('NInputSelect', nInputSelectProps, ['listItem'], props => {
   const inputRef = ref();
   const inputValue = ref('');
   watch(() => props.value, newValue => {

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: {
     /**

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 = {
   /**
@@ -24,7 +24,10 @@ export default createComponent('NList', nListProps, props => {
     "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", {
+  }, [buildElement(item.title)]), _createVNode("dd", {
     "class": "mt-1 text-sm sm:mt-0 sm:col-span-2"
-  }, [item.text])]))]);
-});
+  }, [buildElement(item.text)])]))]);
+});
+function buildElement(element) {
+  if (typeof element === 'function') return element();else return _createVNode(_Fragment, null, [element]);
+}

package/components/NSearchbarList.d.ts

@@ -18,9 +18,7 @@ export declare const nSearchbarListProps: {
     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 default: () => never[];
     };
     readonly maxItems: {
         readonly type: NumberConstructor;
@@ -55,9 +53,7 @@ declare const _default: import("vue").DefineComponent<{
     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 default: () => never[];
     };
     readonly maxItems: {
         readonly type: NumberConstructor;
@@ -88,9 +84,7 @@ declare const _default: import("vue").DefineComponent<{
     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 default: () => never[];
     };
     readonly maxItems: {
         readonly type: NumberConstructor;

package/components/NSearchbarList.js

@@ -1,5 +1,5 @@
 import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
-import { createComponent } from '../utils/component';
+import { createComponentWithSlots } from '../utils/component';
 import { ref } from 'vue';
 import { vModelProps } from '../utils/vModel';
 import NSearchbar, { nSearchbarProps } from './NSearchbar';
@@ -23,7 +23,7 @@ export const nSearchbarListProps = {
 /**
  * The `NSearchbarList` is a {@link NSearchbar} with a {@link NSuggestionList}.
  */
-export default createComponent('NSearchbarList', nSearchbarListProps, props => {
+export default createComponentWithSlots('NSearchbarList', nSearchbarListProps, ['listItem'], props => {
   const searchbarRef = ref();
   return () => _createVNode(NSuggestionList, _mergeProps(props, {
     "inputValue": props.value || '',

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.7",
+    "version": "0.1.9",
     "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.