@naptics/vue-collection 0.2.3 → 0.2.4

package/components/NAlert.d.ts

@@ -25,7 +25,7 @@ export declare const nAlertProps: {
  * The `NAlert` is a fully styled alert with multiple variants.
  * It can be used as a normal blocking element or as part of an alert queue.
  */
-declare const _default: import("vue").DefineComponent<{
+declare const Component: import("vue").DefineComponent<{
     /**
      * The variant of the alert. This defines its color and icon.
      */
@@ -69,4 +69,4 @@ declare const _default: import("vue").DefineComponent<{
     readonly variant: AlertVariant;
     readonly hideX: boolean;
 }>;
-export default _default;
+export { Component as NAlert, Component as default };

package/components/NAlert.js

@@ -29,7 +29,7 @@ export const nAlertProps = {
  * The `NAlert` is a fully styled alert with multiple variants.
  * It can be used as a normal blocking element or as part of an alert queue.
  */
-export default createComponent('NAlert', nAlertProps, (props, {
+const Component = createComponent('NAlert', nAlertProps, (props, {
   slots
 }) => {
   const variant = computed(() => VARIANTS[props.variant]);
@@ -80,4 +80,5 @@ const VARIANTS = {
     }, null),
     color: 'blue'
   }
-};
+};
+export { Component as NAlert, Component as default };

package/components/NBadge.d.ts

@@ -65,7 +65,7 @@ export declare const nBadgeProps: {
 /**
  * The `NBadge` is a styled element to wrap a text.
  */
-declare const _default: import("vue").DefineComponent<{
+declare const Component: import("vue").DefineComponent<{
     readonly tooltipText: StringConstructor;
     readonly tooltipContent: PropType<() => JSX.Element>;
     readonly tooltipHide: BooleanConstructor;
@@ -198,4 +198,4 @@ declare const _default: import("vue").DefineComponent<{
     readonly textShade: number;
     readonly allCaps: boolean;
 }>;
-export default _default;
+export { Component as NBadge, Component as default };

package/components/NBadge.js

@@ -52,7 +52,7 @@ export const nBadgeProps = {
 /**
  * The `NBadge` is a styled element to wrap a text.
  */
-export default createComponent('NBadge', nBadgeProps, (props, {
+const Component = createComponent('NBadge', nBadgeProps, (props, {
   slots
 }) => {
   return () => _createVNode(NTooltip, mapTooltipProps(props), {
@@ -60,4 +60,5 @@ export default createComponent('NBadge', nBadgeProps, (props, {
       "class": ['px-2 py-1 rounded-md font-semibold shadow', `${props.textSize} bg-${props.color}-${props.shade} text-${props.color}-${props.textShade}`, props.allCaps ? 'uppercase' : '', props.badgeClass]
     }, [slots.default?.() || props.text])]
   });
-});
+});
+export { Component as NBadge, Component as default };

package/components/NBreadcrub.d.ts

@@ -65,7 +65,7 @@ export type BreadcrumbItem = {
 /**
  * The `NBreadcrumb` is a styled breadcrumb which can be used as a navigation in hierarchical views.
  */
-declare const _default: import("vue").DefineComponent<{
+declare const Component: import("vue").DefineComponent<{
     /**
      * The items of the breadcrumb.
      */
@@ -170,4 +170,4 @@ declare const _default: import("vue").DefineComponent<{
     readonly items: BreadcrumbItem[];
     readonly iconSize: number;
 }>;
-export default _default;
+export { Component as NBreadcrumb, Component as default };

package/components/NBreadcrub.js

@@ -55,7 +55,7 @@ export const nBreadcrumbProps = {
 /**
  * The `NBreadcrumb` is a styled breadcrumb which can be used as a navigation in hierarchical views.
  */
-export default createComponentWithSlots('NBreadcrumb', nBreadcrumbProps, ['seperator', 'item'], props => {
+const Component = createComponentWithSlots('NBreadcrumb', nBreadcrumbProps, ['seperator', 'item'], props => {
   return () => _createVNode("div", {
     "class": `flex flex-wrap items-center`
   }, [props.items.map((item, index) => _createVNode(_Fragment, null, [props.item?.(item, index) || _createVNode(NLink, {
@@ -67,4 +67,5 @@ export default createComponentWithSlots('NBreadcrumb', nBreadcrumbProps, ['seper
   }), index < props.items.length - 1 && (props.seperator?.(item, index) || _createVNode(props.icon, {
     "class": `mx-2 w-${props.iconSize} h-${props.iconSize} text-${props.color}-500 ${props.iconClass}`
   }, null))]))]);
-});
+});
+export { Component as NBreadcrumb, Component as default };

package/components/NButton.d.ts

@@ -56,7 +56,7 @@ export declare const nButtonProps: {
 /**
  * The `NButton` is a styled button.
  */
-declare const _default: import("vue").DefineComponent<{
+declare const Component: import("vue").DefineComponent<{
     readonly tooltipText: StringConstructor;
     readonly tooltipContent: PropType<() => JSX.Element>;
     readonly tooltipHide: BooleanConstructor;
@@ -173,4 +173,4 @@ declare const _default: import("vue").DefineComponent<{
     readonly disabled: boolean;
     readonly loading: boolean;
 }>;
-export default _default;
+export { Component as NButton, Component as default };

package/components/NButton.js

@@ -46,7 +46,7 @@ export const nButtonProps = {
 /**
  * The `NButton` is a styled button.
  */
-export default createComponent('NButton', nButtonProps, (props, {
+const Component = createComponent('NButton', nButtonProps, (props, {
   slots
 }) => {
   const isDisabled = computed(() => props.loading || props.disabled);
@@ -68,4 +68,5 @@ export default createComponent('NButton', nButtonProps, (props, {
       "shade": 600
     }, null)])])]
   });
-});
+});
+export { Component as NButton, Component as default };

package/components/NCheckbox.d.ts

@@ -16,7 +16,7 @@ export declare const nCheckboxProps: {
 /**
  * The `NCheckbox` is a styled checkbox.
  */
-declare const _default: import("vue").DefineComponent<{
+declare const Component: import("vue").DefineComponent<{
     /**
      * The color of the checkbox.
      */
@@ -48,4 +48,4 @@ declare const _default: import("vue").DefineComponent<{
     readonly color: string;
     readonly disabled: boolean;
 }>;
-export default _default;
+export { Component as NCheckbox, Component as default };

package/components/NCheckbox.js

@@ -19,7 +19,7 @@ export const nCheckboxProps = {
 /**
  * The `NCheckbox` is a styled checkbox.
  */
-export default createComponent('NCheckbox', nCheckboxProps, props => {
+const Component = createComponent('NCheckbox', nCheckboxProps, props => {
   const toggle = () => {
     props.onUpdateValue?.(!props.value);
     forceUpdate();
@@ -39,4 +39,5 @@ export default createComponent('NCheckbox', nCheckboxProps, props => {
     "key": updateKey.value,
     "class": [`h-5 w-5 border-default-300 rounded focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-${props.color}-500`, props.disabled ? `cursor-default bg-default-100 text-${props.color}-200` : `cursor-pointer text-${props.color}-400`]
   }, null);
-});
+});
+export { Component as NCheckbox, Component as default };

package/components/NCheckboxLabel.d.ts

@@ -22,7 +22,7 @@ export declare const nCheckboxLabelProps: {
 /**
  * The `NCheckboxLabel` is a checkbox with a title and a description.
  */
-declare const _default: import("vue").DefineComponent<{
+declare const Component: import("vue").DefineComponent<{
     /**
      * The title of the checkbox.
      */
@@ -67,4 +67,4 @@ declare const _default: import("vue").DefineComponent<{
     readonly disabled: boolean;
     readonly compact: boolean;
 }>;
-export default _default;
+export { Component as NCheckboxLabel, Component as default };

package/components/NCheckboxLabel.js

@@ -19,7 +19,7 @@ export const nCheckboxLabelProps = {
 /**
  * The `NCheckboxLabel` is a checkbox with a title and a description.
  */
-export default createComponent('NCheckboxLabel', nCheckboxLabelProps, props => {
+const Component = createComponent('NCheckboxLabel', nCheckboxLabelProps, props => {
   const toggleValue = () => {
     if (!props.disabled) props.onUpdateValue?.(!props.value);
   };
@@ -38,4 +38,5 @@ export default createComponent('NCheckboxLabel', nCheckboxLabelProps, props => {
     "onClick": toggleValue,
     "class": ['select-none', props.disabled ? '' : 'cursor-pointer']
   }, [props.description])])])]);
-});
+});
+export { Component as NCheckboxLabel, Component as default };

package/components/NCrudModal.d.ts

@@ -105,7 +105,7 @@ export declare const nCrudModalProps: {
  * It has an integrated remove-button with a user-dialog to remove the editing element.
  * When the dialog is accepted `onRemove` is called.
  */
-declare const _default: import("vue").DefineComponent<{
+declare const Component: import("vue").DefineComponent<{
     /**
      * The text of the remove-button.
      */
@@ -324,4 +324,4 @@ declare const _default: import("vue").DefineComponent<{
     readonly removeDialogVariant: DialogVariant;
     readonly closeOnRemove: boolean;
 }>;
-export default _default;
+export { Component as NCrudModal, Component as default };

package/components/NCrudModal.js

@@ -69,7 +69,7 @@ export const nCrudModalProps = {
  * It has an integrated remove-button with a user-dialog to remove the editing element.
  * When the dialog is accepted `onRemove` is called.
  */
-export default createComponentWithSlots('NCrudModal', nCrudModalProps, ['modal', 'footer', 'header'], (props, {
+const Component = createComponentWithSlots('NCrudModal', nCrudModalProps, ['modal', 'footer', 'header'], (props, {
   slots
 }) => {
   const removeDialog = ref();
@@ -116,4 +116,5 @@ export default createComponentWithSlots('NCrudModal', nCrudModalProps, ['modal',
       "okText": props.removeDialogOkText
     }, null)]
   });
-});
+});
+export { Component as NCrudModal, Component as default };

package/components/NDialog.d.ts

@@ -77,7 +77,7 @@ export type NDialogExposed = {
  * ...
  * <NDialog ref={dialogRef} />
  */
-declare const _default: import("vue").DefineComponent<{
+declare const Component: import("vue").DefineComponent<{
     /**
      * The title of the dialog.
      */
@@ -187,4 +187,4 @@ declare const _default: import("vue").DefineComponent<{
     cancelColor: string;
     hideCancel: boolean;
 }>;
-export default _default;
+export { Component as NDialog, Component as default };

package/components/NDialog.js

@@ -76,7 +76,7 @@ export const nDialogProps = {
  * ...
  * <NDialog ref={dialogRef} />
  */
-export default createComponent('NDialog', nDialogProps, (props, context) => {
+const Component = createComponent('NDialog', nDialogProps, (props, context) => {
   const showDialog = ref(false);
   let deferredPromise = null;
   const show = () => {
@@ -157,4 +157,5 @@ const VARIANT_DEFAULTS = {
     okText: trsl('vue-collection.action.remove'),
     okColor: 'red'
   }
-};
+};
+export { Component as NDialog, Component as default };

package/components/NDropdown.d.ts

@@ -63,7 +63,7 @@ export type DropdownItem = {
  * The `NDropdown` consists of a button and a panel with multiple actions.
  * It is useful to group multiple actions together in one place.
  */
-declare const _default: import("vue").DefineComponent<{
+declare const Component: import("vue").DefineComponent<{
     /**
      * The title of the dropdown-button.
      */
@@ -94,41 +94,7 @@ declare const _default: import("vue").DefineComponent<{
      * The passed parameter is the HeadlessUI `MenuButton` which should be
      * used to create the button for the Dropdown to work properly.
      */
-    readonly button: PropType<(button: import("vue").DefineComponent<{
-        disabled: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        as: {
-            type: (ObjectConstructor | StringConstructor)[];
-            default: string;
-        };
-        id: {
-            type: StringConstructor;
-            default: () => string;
-        };
-    }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-        disabled: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        as: {
-            type: (ObjectConstructor | StringConstructor)[];
-            default: string;
-        };
-        id: {
-            type: StringConstructor;
-            default: () => string;
-        };
-    }>>, {
-        as: string | Record<string, any>;
-        disabled: boolean;
-        id: string;
-    }>) => JSX.Element>;
+    readonly button: PropType<(button: typeof MenuButton) => JSX.Element>;
 }, 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 title of the dropdown-button.
@@ -160,44 +126,10 @@ declare const _default: import("vue").DefineComponent<{
      * The passed parameter is the HeadlessUI `MenuButton` which should be
      * used to create the button for the Dropdown to work properly.
      */
-    readonly button: PropType<(button: import("vue").DefineComponent<{
-        disabled: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        as: {
-            type: (ObjectConstructor | StringConstructor)[];
-            default: string;
-        };
-        id: {
-            type: StringConstructor;
-            default: () => string;
-        };
-    }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }>[] | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-        disabled: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        as: {
-            type: (ObjectConstructor | StringConstructor)[];
-            default: string;
-        };
-        id: {
-            type: StringConstructor;
-            default: () => string;
-        };
-    }>>, {
-        as: string | Record<string, any>;
-        disabled: boolean;
-        id: string;
-    }>) => JSX.Element>;
+    readonly button: PropType<(button: typeof MenuButton) => JSX.Element>;
 }>> & {}, {
     readonly right: boolean;
     readonly disabled: boolean;
     readonly items: DropdownItem[] | DropdownItem[][];
 }>;
-export default _default;
+export { Component as NDropdown, Component as default };

package/components/NDropdown.js

@@ -44,7 +44,7 @@ export const nDropdownProps = {
  * The `NDropdown` consists of a button and a panel with multiple actions.
  * It is useful to group multiple actions together in one place.
  */
-export default createComponentWithSlots('NDropdown', nDropdownProps, ['button'], (props, {
+const Component = createComponentWithSlots('NDropdown', nDropdownProps, ['button'], (props, {
   slots
 }) => {
   const items = computed(() => {
@@ -111,4 +111,5 @@ export default createComponentWithSlots('NDropdown', nDropdownProps, ['button'],
       })]
     })]
   });
-});
+});
+export { Component as NDropdown, Component as default };

package/components/NDropzone.d.ts

@@ -53,7 +53,7 @@ export declare const nDropzoneProps: {
  * The `NDropzone` is an area where files can be added by the user by drag & drop.
  * Files can also be selected with a file chooser by clicking on the dropzone.
  */
-declare const _default: import("vue").DefineComponent<{
+declare const Component: import("vue").DefineComponent<{
     /**
      * A description which files are allowed for this dropzone.
      * This should include everything the user needs to know about
@@ -159,4 +159,4 @@ declare const _default: import("vue").DefineComponent<{
     readonly maxLengthFileNames: number;
     readonly height: string;
 }>;
-export default _default;
+export { Component as NDropzone, Component as default };

package/components/NDropzone.js

@@ -66,7 +66,7 @@ export const nDropzoneProps = {
  * The `NDropzone` is an area where files can be added by the user by drag & drop.
  * Files can also be selected with a file chooser by clicking on the dropzone.
  */
-export default createComponent('NDropzone', nDropzoneProps, props => {
+const Component = createComponent('NDropzone', nDropzoneProps, props => {
   const fileError = ref();
   const filterAndUpdateFiles = files => {
     // filter for mime type and max size
@@ -194,6 +194,7 @@ export default createComponent('NDropzone', nDropzoneProps, props => {
     })])])])])])]);
   };
 });
+export { Component as NDropzone, Component as default };
 // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers
 const MIME_FORMAT = /^(image|audio|application|video|text)\/\*$/;
 const EXTENSION_FORMAT = /^\.\w{2,20}$/;

package/components/NForm.d.ts

@@ -17,7 +17,7 @@ export declare const nFormProps: {
  * If it contains a button of type `submit` in it's hierarchy,
  * it catches the submit event and passes it to the {@link ValidatedForm} in its `form` prop.
  */
-declare const _default: import("vue").DefineComponent<{
+declare const Component: import("vue").DefineComponent<{
     /**
      * The {@link ValidatedForm} which will be used to validate the inputs.
      * All inputs in this forms hierarchy should be added to the {@link ValidatedForm}.
@@ -40,4 +40,4 @@ declare const _default: import("vue").DefineComponent<{
      */
     readonly onSubmit: PropType<() => void>;
 }>> & {}, {}>;
-export default _default;
+export { Component as NForm, Component as default };

package/components/NForm.js

@@ -17,7 +17,7 @@ export const nFormProps = {
  * If it contains a button of type `submit` in it's hierarchy,
  * it catches the submit event and passes it to the {@link ValidatedForm} in its `form` prop.
  */
-export default createComponent('NForm', nFormProps, (props, context) => {
+const Component = createComponent('NForm', nFormProps, (props, context) => {
   const onSubmit = event => {
     event.preventDefault();
     if (!props.form || props.form.validate().isValid) props.onSubmit?.();
@@ -25,4 +25,5 @@ export default createComponent('NForm', nFormProps, (props, context) => {
   return () => _createVNode("form", {
     "onSubmit": onSubmit
   }, [context.slots.default?.()]);
-});
+});
+export { Component as NForm, Component as default };

package/components/NFormModal.d.ts

@@ -62,7 +62,7 @@ export declare const nFormModalProps: {
  * When submitting a `NFormModal` the form is first validated and
  * only if the validation is succesful the `onOk` event is called.
  */
-declare const _default: import("vue").DefineComponent<{
+declare const Component: import("vue").DefineComponent<{
     /**
      * The maximum width of the modal. A regular tailwind class.
      */
@@ -187,4 +187,4 @@ declare const _default: import("vue").DefineComponent<{
     readonly closeOnBackground: boolean;
     readonly hideCancel: boolean;
 }>;
-export default _default;
+export { Component as NFormModal, Component as default };

package/components/NFormModal.js

@@ -31,7 +31,7 @@ export const nFormModalProps = {
  * When submitting a `NFormModal` the form is first validated and
  * only if the validation is succesful the `onOk` event is called.
  */
-export default createComponentWithSlots('NFormModal', nFormModalProps, ['modal', 'header', 'footer'], (props, {
+const Component = createComponentWithSlots('NFormModal', nFormModalProps, ['modal', 'header', 'footer'], (props, {
   slots
 }) => {
   const onOk = () => {
@@ -55,4 +55,5 @@ export default createComponentWithSlots('NFormModal', nFormModalProps, ['modal',
       default: () => [slots.default?.()]
     })]
   });
-});
+});
+export { Component as NFormModal, Component as default };

package/components/NIconButton.d.ts

@@ -77,7 +77,7 @@ export declare const nIconButtonProps: {
 /**
  * The `NIconButton` is a regular button which does not have any text but an icon instead.
  */
-declare const _default: import("vue").DefineComponent<{
+declare const Component: import("vue").DefineComponent<{
     readonly tooltipText: StringConstructor;
     readonly tooltipContent: PropType<() => JSX.Element>;
     readonly tooltipHide: BooleanConstructor;
@@ -232,4 +232,4 @@ declare const _default: import("vue").DefineComponent<{
     readonly tooltipMaxWidth: import("../utils/tailwind").TWMaxWidth;
     readonly disabled: boolean;
 }>;
-export default _default;
+export { Component as NIconButton, Component as default };

package/components/NIconButton.js

@@ -63,7 +63,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 Component = 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.buttonClass];
   const content = () => _createVNode(props.icon, {
     "class": `w-${props.size} h-${props.size}`
@@ -84,4 +84,5 @@ export default createComponent('NIconButton', nIconButtonProps, props => {
       }, [content()])]
     });
   };
-});
+});
+export { Component as NIconButton, Component as default };

package/components/NIconCircle.d.ts

@@ -45,7 +45,7 @@ export declare const nIconCircleProps: {
 /**
  * The `NIconCircle` is an icon with a colored circle around it.
  */
-declare const _default: import("vue").DefineComponent<{
+declare const Component: import("vue").DefineComponent<{
     /**
      * The icon of the icon-circle.
      */
@@ -132,4 +132,4 @@ declare const _default: import("vue").DefineComponent<{
     readonly iconShade: number;
     readonly bgShade: number;
 }>;
-export default _default;
+export { Component as NIconCircle, Component as default };

package/components/NIconCircle.js

@@ -47,7 +47,7 @@ const SCALING_FACTOR = 0.55;
 /**
  * The `NIconCircle` is an icon with a colored circle around it.
  */
-export default createComponent('NIconCircle', nIconCircleProps, props => {
+const Component = createComponent('NIconCircle', nIconCircleProps, props => {
   let circleSize = props.circleSize;
   let iconSize = props.iconSize;
   if (circleSize == null) {
@@ -63,4 +63,5 @@ export default createComponent('NIconCircle', nIconCircleProps, props => {
     "class": `text-${props.color}-${props.iconShade}`,
     "style": `width: ${iconSize}px; height: ${iconSize}px`
   }, [_createVNode(props.icon, null, null)])]);
-});
+});
+export { Component as NIconCircle, Component as default };

package/components/NInput.d.ts

@@ -86,7 +86,7 @@ export type NInputExposed = {
 /**
  * The base class of inputs. A styled input with a lot of configuration possibilities but no validation.
  */
-declare const _default: import("vue").DefineComponent<{
+declare const Component: import("vue").DefineComponent<{
     readonly tooltipText: StringConstructor;
     readonly tooltipContent: PropType<() => JSX.Element>;
     readonly tooltipHide: BooleanConstructor;
@@ -250,4 +250,4 @@ declare const _default: import("vue").DefineComponent<{
     readonly autocomplete: string;
     readonly hideLabel: boolean;
 }>;
-export default _default;
+export { Component as NInput, Component as default };

package/components/NInput.js

@@ -70,7 +70,7 @@ export const nInputProps = {
 /**
  * The base class of inputs. A styled input with a lot of configuration possibilities but no validation.
  */
-export default createComponent('NInput', nInputProps, (props, context) => {
+const Component = createComponent('NInput', nInputProps, (props, context) => {
   const inputRef = ref();
   const exposed = {
     focus: () => inputRef.value?.focus()
@@ -106,4 +106,5 @@ export default createComponent('NInput', nInputProps, (props, context) => {
       "aria-hidden": "true"
     }, null)]), [[_vShow, props.error && !props.small]])])]
   })]);
-});
+});
+export { Component as NInput, Component as default };

package/components/NInputPhone.d.ts

@@ -49,7 +49,7 @@ export declare const nInputPhoneProps: {
 /**
  * The `NInputPhone` autoformats phone numbers and checks if they are valid.
  */
-declare const _default: import("vue").DefineComponent<{
+declare const Component: import("vue").DefineComponent<{
     readonly input: import("vue").PropType<(props: import("./NValInput").InputSlotProps) => JSX.Element>;
     readonly optional: BooleanConstructor;
     readonly rules: {
@@ -159,4 +159,4 @@ declare const _default: import("vue").DefineComponent<{
     readonly hideErrorMessage: boolean;
     readonly disableBlurValidation: boolean;
 }>;
-export default _default;
+export { Component as NInputPhone, Component as default };

package/components/NInputPhone.js

@@ -8,12 +8,13 @@ export const nInputPhoneProps = nValInputProps;
 /**
  * The `NInputPhone` autoformats phone numbers and checks if they are valid.
  */
-export default createComponent('NInputPhoneSuspended', nInputPhoneProps, props => {
+const Component = createComponent('NInputPhoneSuspended', nInputPhoneProps, props => {
   // Async components have to be wrapped in a suspense component.
   return () => _createVNode(Suspense, null, {
     default: () => [_createVNode(NPhoneInput, props, null)]
   });
 });
+export { Component as NInputPhone, Component as default };
 const NPhoneInput = createComponent('NInputPhone', nInputPhoneProps, async props => {
   // import dynamically for better codesplitting as the library is pretty large
   const {

package/components/NInputSelect.d.ts

@@ -95,7 +95,7 @@ export type InputSelectOption = Identifiable & {
  * 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.
  */
-declare const _default: import("vue").DefineComponent<{
+declare const Component: import("vue").DefineComponent<{
     /**
      * The id of the currently selected option of this input.
      */
@@ -281,4 +281,4 @@ declare const _default: import("vue").DefineComponent<{
     readonly maxItems: number;
     readonly hideList: boolean;
 }>;
-export default _default;
+export { Component as NInputSelect, Component as default };

package/components/NInputSelect.js

@@ -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 createComponentWithSlots('NInputSelect', nInputSelectProps, ['listItem'], props => {
+const Component = createComponentWithSlots('NInputSelect', nInputSelectProps, ['listItem'], props => {
   const inputRef = ref();
   const inputValue = ref('');
   watch(() => props.value, newValue => {
@@ -111,4 +111,5 @@ export default createComponentWithSlots('NInputSelect', nInputSelectProps, ['lis
       inputRef?.value?.validate();
     }
   }, null);
-});
+});
+export { Component as NInputSelect, Component as default };

package/components/NInputSuggestion.d.ts

@@ -70,7 +70,7 @@ export declare const nInputSuggestionProps: {
  * `NInputSuggestion` is an input, which shows a list of possible suggestions to the user
  *  which is filtered while typing. Contrary to {@link NInputSelect} the user is not required to choose any of the suggestions.
  */
-declare const _default: import("vue").DefineComponent<{
+declare const Component: import("vue").DefineComponent<{
     /**
      * If set to `true` the list is hidden even if there are still matching items in the list.
      */
@@ -221,4 +221,4 @@ declare const _default: import("vue").DefineComponent<{
     readonly hideList: boolean;
     readonly suggestions: string[];
 }>;
-export default _default;
+export { Component as NInputSuggestion, Component as default };

package/components/NInputSuggestion.js

@@ -27,7 +27,7 @@ export const nInputSuggestionProps = {
  * `NInputSuggestion` is an input, which shows a list of possible suggestions to the user
  *  which is filtered while typing. Contrary to {@link NInputSelect} the user is not required to choose any of the suggestions.
  */
-export default createComponent('NInputSuggestion', nInputSuggestionProps, props => {
+const Component = createComponent('NInputSuggestion', nInputSuggestionProps, props => {
   const suggestionItems = computed(() => props.suggestions.filter(suggestion => suggestion.includes(props.value || '')).map((value, index) => ({
     id: index.toString(),
     label: value
@@ -60,4 +60,5 @@ export default createComponent('NInputSuggestion', nInputSuggestionProps, props
       inputRef?.value?.validate();
     }
   }, null);
-});
+});
+export { Component as NInputSuggestion, Component as default };

package/components/NLink.d.ts

@@ -38,7 +38,7 @@ export declare const nLinkProps: {
 /**
  * The `NLink` is a styled text which can be used as a {@link RouterLink} or a regular button.
  */
-declare const _default: import("vue").DefineComponent<{
+declare const Component: import("vue").DefineComponent<{
     /**
      * The text of the link. Can also be set in the default slot.
      */
@@ -108,4 +108,4 @@ declare const _default: import("vue").DefineComponent<{
     readonly color: string;
     readonly shade: number;
 }>;
-export default _default;
+export { Component as NLink, Component as default };

package/components/NLink.js

@@ -39,7 +39,7 @@ export const nLinkProps = {
 /**
  * The `NLink` is a styled text which can be used as a {@link RouterLink} or a regular button.
  */
-export default createComponent('NLink', nLinkProps, (props, {
+const Component = createComponent('NLink', nLinkProps, (props, {
   slots
 }) => {
   const hoverShade = computed(() => {
@@ -56,4 +56,5 @@ export default createComponent('NLink', nLinkProps, (props, {
     "onClick": props.onClick,
     "class": classes.value
   }, [slots.default?.() || props.text]);
-});
+});
+export { Component as NLink, Component as default };

package/components/NList.d.ts

@@ -29,7 +29,7 @@ export declare const nListProps: {
 /**
  * The `NList` displays key-value data in an appealing way.
  */
-declare const _default: import("vue").DefineComponent<{
+declare const Component: import("vue").DefineComponent<{
     /**
      * The items which are displayed in the list.
      */
@@ -64,4 +64,4 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {}, {
     readonly items: ListItem[];
 }>;
-export default _default;
+export { Component as NList, Component as default };

package/components/NList.js

@@ -20,7 +20,7 @@ export const nListProps = {
 /**
  * The `NList` displays key-value data in an appealing way.
  */
-export default createComponent('NList', nListProps, props => {
+const Component = createComponent('NList', nListProps, props => {
   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']
@@ -30,6 +30,7 @@ export default createComponent('NList', nListProps, props => {
     "class": `mt-1 text-sm sm:mt-0 sm:col-span-2 ${props.textClass}`
   }, [buildElement(item.text)])]))]);
 });
+export { Component as NList, Component as default };
 function buildElement(element) {
   if (typeof element === 'function') return element();else return _createVNode(_Fragment, null, [element]);
 }

package/components/NLoadingIndicator.d.ts

@@ -25,7 +25,7 @@ export declare const nLoadingIndicator: {
 /**
  * The `NLoadingIndicator` is a styled loading indicator.
  */
-declare const _default: import("vue").DefineComponent<{
+declare const Component: import("vue").DefineComponent<{
     /**
      * The color of the loading-indicator.
      */
@@ -74,4 +74,4 @@ declare const _default: import("vue").DefineComponent<{
     readonly shade: number;
     readonly size: number;
 }>;
-export default _default;
+export { Component as NLoadingIndicator, Component as default };

package/components/NLoadingIndicator.js

@@ -28,7 +28,7 @@ export const nLoadingIndicator = {
 /**
  * The `NLoadingIndicator` is a styled loading indicator.
  */
-export default createComponent('NLoadingIndicator', nLoadingIndicator, props => {
+const Component = createComponent('NLoadingIndicator', nLoadingIndicator, props => {
   const gap = computed(() => props.size / 13 * 24);
   const totalWidth = computed(() => gap.value * 2 + props.size);
   useCssVars(() => ({
@@ -50,4 +50,5 @@ export default createComponent('NLoadingIndicator', nLoadingIndicator, props =>
     "class": `bg-${props.color}-${props.shade}`,
     "style": `height:${props.size}px;width:${props.size}px;left:${2 * gap.value}px`
   }, null)]);
-});
+});
+export { Component as NLoadingIndicator, Component as default };

package/components/NModal.d.ts

@@ -111,7 +111,7 @@ export type ModalSlotProps = {
  * The `NModal` is the base component for all modals and dialogs.
  * It provides the core mechanics to display a window in front of everything else.
  */
-declare const _default: import("vue").DefineComponent<{
+declare const Component: import("vue").DefineComponent<{
     /**
      * If set to `true` the header of the modal is hidden.
      */
@@ -330,4 +330,4 @@ declare const _default: import("vue").DefineComponent<{
     readonly closeOnBackground: boolean;
     readonly hideCancel: boolean;
 }>;
-export default _default;
+export { Component as NModal, Component as default };

package/components/NModal.js

@@ -112,7 +112,7 @@ export const nModalProps = {
  * The `NModal` is the base component for all modals and dialogs.
  * It provides the core mechanics to display a window in front of everything else.
  */
-export default createComponentWithSlots('NModal', nModalProps, ['modal', 'header', 'footer'], (props, {
+const Component = createComponentWithSlots('NModal', nModalProps, ['modal', 'header', 'footer'], (props, {
   slots
 }) => {
   const ok = () => {
@@ -207,4 +207,5 @@ export default createComponentWithSlots('NModal', nModalProps, ['modal', 'header
       })])]
     })]
   });
-});
+});
+export { Component as NModal, Component as default };

package/components/NPagination.d.ts

@@ -33,7 +33,7 @@ export declare const nPaginationProps: {
 /**
  * The `NPagination` is a styled pagination component.
  */
-declare const _default: import("vue").DefineComponent<{
+declare const Component: import("vue").DefineComponent<{
     /**
      * The page number which is currently selected.
      */
@@ -96,4 +96,4 @@ declare const _default: import("vue").DefineComponent<{
     readonly value: number;
     readonly total: number;
 }>;
-export default _default;
+export { Component as NPagination, Component as default };

package/components/NPagination.js

@@ -36,7 +36,7 @@ export const nPaginationProps = {
 /**
  * The `NPagination` is a styled pagination component.
  */
-export default createComponent('NPagination', nPaginationProps, props => {
+const Component = createComponent('NPagination', nPaginationProps, props => {
   const numbers = computed(() => {
     if (props.total <= 7) {
       return range(1, props.total);
@@ -95,6 +95,7 @@ export default createComponent('NPagination', nPaginationProps, props => {
     "aria-hidden": "true"
   }, null)])]);
 });
+export { Component as NPagination, Component as default };
 function range(from, to) {
   const array = [];
   for (let i = from; i <= to; i++) {

package/components/NSearchbar.d.ts

@@ -35,7 +35,7 @@ export type NSearchbarExposed = {
 /**
  * The `NSearchbar` is a styled input with a search icon.
  */
-declare const _default: import("vue").DefineComponent<{
+declare const Component: import("vue").DefineComponent<{
     /**
      * The placeholder of the search-bar.
      */
@@ -91,4 +91,4 @@ declare const _default: import("vue").DefineComponent<{
     readonly small: boolean;
     readonly placeholder: string;
 }>;
-export default _default;
+export { Component as NSearchbar, Component as default };

package/components/NSearchbar.js

@@ -33,7 +33,7 @@ export const nSearchbarProps = {
 /**
  * The `NSearchbar` is a styled input with a search icon.
  */
-export default createComponent('NSearchbar', nSearchbarProps, (props, context) => {
+const Component = createComponent('NSearchbar', nSearchbarProps, (props, context) => {
   const inputRef = ref();
   const exposed = {
     focus: () => {
@@ -60,4 +60,5 @@ export default createComponent('NSearchbar', nSearchbarProps, (props, context) =
     "onFocus": props.onFocus,
     "onBlur": props.onBlur
   }, null)]);
-});
+});
+export { Component as NSearchbar, Component as default };

package/components/NSearchbarList.d.ts

@@ -29,7 +29,7 @@ export declare const nSearchbarListProps: {
 /**
  * The `NSearchbarList` is a {@link NSearchbar} with a {@link NSuggestionList}.
  */
-declare const _default: import("vue").DefineComponent<{
+declare const Component: import("vue").DefineComponent<{
     /**
      * @see {@link nSearchbarProps.placeholder}
      */
@@ -90,4 +90,4 @@ declare const _default: import("vue").DefineComponent<{
     readonly maxItems: number;
     readonly hideList: boolean;
 }>;
-export default _default;
+export { Component as NSearchbarList, Component as default };

package/components/NSearchbarList.js

@@ -19,7 +19,7 @@ export const nSearchbarListProps = {
 /**
  * The `NSearchbarList` is a {@link NSearchbar} with a {@link NSuggestionList}.
  */
-export default createComponentWithSlots('NSearchbarList', nSearchbarListProps, ['listItem'], props => {
+const Component = createComponentWithSlots('NSearchbarList', nSearchbarListProps, ['listItem'], props => {
   const searchbarRef = ref();
   return () => _createVNode(NSuggestionList, _mergeProps(props, {
     "inputValue": props.value || '',
@@ -37,4 +37,5 @@ export default createComponentWithSlots('NSearchbarList', nSearchbarListProps, [
     }, null),
     "onRequestInputFocus": () => searchbarRef.value?.focus()
   }), null);
-});
+});
+export { Component as NSearchbarList, Component as default };

package/components/NSelect.d.ts

@@ -62,7 +62,7 @@ export type NSelectExposed = NValInputExposed;
 /**
  * The `NSelect` is a styled html select-input.
  */
-declare const _default: import("vue").DefineComponent<{
+declare const Component: import("vue").DefineComponent<{
     readonly tooltipText: StringConstructor;
     readonly tooltipContent: PropType<() => JSX.Element>;
     readonly tooltipHide: BooleanConstructor;
@@ -177,4 +177,4 @@ declare const _default: import("vue").DefineComponent<{
     readonly disabled: boolean;
     readonly optional: boolean;
 }>;
-export default _default;
+export { Component as NSelect, Component as default };

package/components/NSelect.js

@@ -47,7 +47,7 @@ export const nSelectProps = {
 /**
  * The `NSelect` is a styled html select-input.
  */
-export default createComponent('NSelect', nSelectProps, (props, context) => {
+const Component = createComponent('NSelect', nSelectProps, (props, context) => {
   const inputRef = ref();
   const exposed = {
     focus: () => inputRef.value?.focus(),
@@ -85,4 +85,5 @@ export default createComponent('NSelect', nSelectProps, (props, context) => {
       }, [option.label]))])]
     })])
   }), null);
-});
+});
+export { Component as NSelect, Component as default };

package/components/NSuggestionList.d.ts

@@ -149,7 +149,7 @@ export type SuggestionItem = Identifiable & {
 /**
  * The `NSuggestionList` can be added to an input and adds a list below it which is shown when the input is focused.
  */
-declare const _default: import("vue").DefineComponent<{
+declare const Component: import("vue").DefineComponent<{
     /**
      * The slot for the input, which will be enhanced with the suggestion list.
      */
@@ -201,7 +201,7 @@ declare const _default: import("vue").DefineComponent<{
     /**
      * The slot for every item of the list.
      */
-    readonly listItem: PropType<(props: ItemSlotProps<SuggestionItem>) => JSX.Element>;
+    readonly listItem: PropType<(props: ItemSlotProps) => JSX.Element>;
     /**
      * This function is called, when the input and the suggestion list are really blurred.
      * This means, it's not just the input temporarly beeing blurred because the user clicks on the item list,
@@ -260,7 +260,7 @@ declare const _default: import("vue").DefineComponent<{
     /**
      * The slot for every item of the list.
      */
-    readonly listItem: PropType<(props: ItemSlotProps<SuggestionItem>) => JSX.Element>;
+    readonly listItem: PropType<(props: ItemSlotProps) => JSX.Element>;
     /**
      * This function is called, when the input and the suggestion list are really blurred.
      * This means, it's not just the input temporarly beeing blurred because the user clicks on the item list,
@@ -273,4 +273,4 @@ declare const _default: import("vue").DefineComponent<{
     readonly maxItems: number;
     readonly hideList: boolean;
 }>;
-export default _default;
+export { Component as NSuggestionList, Component as default };

package/components/NSuggestionList.js

@@ -72,7 +72,7 @@ export const nSuggestionListProps = {
 /**
  * The `NSuggestionList` can be added to an input and adds a list below it which is shown when the input is focused.
  */
-export default createComponentWithSlots('NSuggestionList', nSuggestionListProps, ['input', 'listItem'], props => {
+const Component = createComponentWithSlots('NSuggestionList', nSuggestionListProps, ['input', 'listItem'], props => {
   const selectedIndex = ref(null);
   const displayItems = computed(() => props.items.slice(0, props.maxItems));
   const isInFocus = ref(false);
@@ -153,4 +153,5 @@ export default createComponentWithSlots('NSuggestionList', nSuggestionListProps,
   }, null), _createVNode("span", null, [_createTextVNode(" "), trsl('vue-collection.text.loading-search-results')])]) : _createVNode("div", null, [trsl('vue-collection.text.no-search-results', {
     input: props.inputValue
   })])])])])])]);
-});
+});
+export { Component as NSuggestionList, Component as default };

package/components/NTable.d.ts

@@ -85,7 +85,7 @@ export declare const nTableProps: {
 /**
  * The `NTable` is a styled html table which accepts data and displays it appropriately.
  */
-declare const _default: import("vue").DefineComponent<{
+declare const Component: import("vue").DefineComponent<{
     /**
      * The headings of the table. These define which columns are shown in the table and in which order.
      */
@@ -170,4 +170,4 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {}, {
     readonly items: TableRow[];
 }>;
-export default _default;
+export { Component as NTable, Component as default };

package/components/NTable.js

@@ -51,7 +51,7 @@ export const nTableProps = {
 /**
  * The `NTable` is a styled html table which accepts data and displays it appropriately.
  */
-export default createComponent('NTable', nTableProps, props => {
+const Component = createComponent('NTable', nTableProps, props => {
   const headings = computed(() => {
     // filter out details headings
     const headings = props.headings.filter(heading => !isHeadingDetail(heading));
@@ -109,6 +109,7 @@ export default createComponent('NTable', nTableProps, props => {
     "colspan": headings.value.length - 1
   }, [item[detail.key] && buildItem(item[detail.key])])]))])]))])]);
 });
+export { Component as NTable, Component as default };
 /**
  * Builds a JSX-Element out of the item
  */

package/components/NTableAction.d.ts

@@ -26,7 +26,7 @@ export declare const nTableActionProps: {
  * The `NTableAction` is a button or {@link RouterLink} which is styled to fit into a table.
  * It is basically styled as an emphasized text in the table.
  */
-declare const _default: import("vue").DefineComponent<{
+declare const Component: import("vue").DefineComponent<{
     /**
      * The route of the action. If set the component will be a {@link RouterLink}.
      */
@@ -71,4 +71,4 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {}, {
     readonly type: "button" | "submit" | "reset";
 }>;
-export default _default;
+export { Component as NTableAction, Component as default };

package/components/NTableAction.js

@@ -28,7 +28,7 @@ export const nTableActionProps = {
  * The `NTableAction` is a button or {@link RouterLink} which is styled to fit into a table.
  * It is basically styled as an emphasized text in the table.
  */
-export default createComponent('NTableAction', nTableActionProps, (props, {
+const Component = createComponent('NTableAction', nTableActionProps, (props, {
   slots
 }) => {
   const content = () => slots.default?.() || _createVNode(_Fragment, null, [props.text]);
@@ -46,4 +46,5 @@ export default createComponent('NTableAction', nTableActionProps, (props, {
       "onClick": props.onClick
     }, [content()]);
   };
-});
+});
+export { Component as NTableAction, Component as default };

package/components/NTextArea.d.ts

@@ -87,7 +87,7 @@ export type NTextAreaExposed = {
      */
     focus(): void;
 };
-declare const _default: import("vue").DefineComponent<{
+declare const Component: import("vue").DefineComponent<{
     readonly optional: BooleanConstructor;
     readonly rules: {
         readonly type: PropType<import("../utils/validation").ValidationRule | import("../utils/validation").ValidationRule[]>;
@@ -264,4 +264,4 @@ declare const _default: import("vue").DefineComponent<{
     readonly disableBlurValidation: boolean;
     readonly resizable: boolean;
 }>;
-export default _default;
+export { Component as NTextArea, Component as default };

package/components/NTextArea.js

@@ -70,7 +70,7 @@ export const nTextAreaProps = {
   ...nTextAreaBaseProps,
   ...validationProps
 };
-export default createComponent('NTextArea', nTextAreaProps, (props, context) => {
+const Component = createComponent('NTextArea', nTextAreaProps, (props, context) => {
   const textAreaRef = ref();
   const exposed = {
     focus: () => textAreaRef.value?.focus()
@@ -91,6 +91,7 @@ export default createComponent('NTextArea', nTextAreaProps, (props, context) =>
     }), null)
   }), null);
 });
+export { Component as NTextArea, Component as default };
 /**
  * The `NTextArea` wraps the html text area with all the features from {@link NInput} and {@link NValInput}.
  */

package/components/NTooltip.d.ts

@@ -131,7 +131,7 @@ export declare function mapTooltipProps(props: ExtractedProps<typeof nToolTipPro
  *      <NButton />
  * </NTooltip>
  */
-declare const _default: import("vue").DefineComponent<{
+declare const Component: import("vue").DefineComponent<{
     /**
      * The text content of the tooltip.
      */
@@ -236,5 +236,5 @@ declare const _default: import("vue").DefineComponent<{
     readonly placement: TooltipPlacement;
     readonly maxWidth: TWMaxWidth;
 }>;
-export default _default;
+export { Component as NTooltip, Component as default };
 export type TooltipPlacement = 'auto' | 'auto-start' | 'auto-end' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';

package/components/NTooltip.js

@@ -130,7 +130,7 @@ export function mapTooltipProps(props) {
  *      <NButton />
  * </NTooltip>
  */
-export default createComponent('NTooltip', nTooltipProps, (props, {
+const Component = createComponent('NTooltip', nTooltipProps, (props, {
   slots
 }) => {
   return () => _createVNode("div", {
@@ -139,6 +139,7 @@ export default createComponent('NTooltip', nTooltipProps, (props, {
     default: () => [slots.default?.()]
   }) : slots.default?.()]);
 });
+export { Component as NTooltip, Component as default };
 const NTooltipBase = createComponent('NTooltipBase', nTooltipProps, (props, {
   slots
 }) => {

package/components/NValInput.d.ts

@@ -138,7 +138,7 @@ export type NValInputExposed = {
 /**
  * The `NValInput` is a `NInput` with custom validation.
  */
-declare const _default: import("vue").DefineComponent<{
+declare const Component: import("vue").DefineComponent<{
     /**
      * A slot to replace the input.
      */
@@ -306,4 +306,4 @@ declare const _default: import("vue").DefineComponent<{
     readonly hideErrorMessage: boolean;
     readonly disableBlurValidation: boolean;
 }>;
-export default _default;
+export { Component as NValInput, Component as default };

package/components/NValInput.js

@@ -53,7 +53,7 @@ export const nValInputProps = {
 /**
  * The `NValInput` is a `NInput` with custom validation.
  */
-export default createComponentWithSlots('NValInput', nValInputProps, ['input'], (props, context) => {
+const Component = createComponentWithSlots('NValInput', nValInputProps, ['input'], (props, context) => {
   const rules = computed(() => {
     const otherRules = Array.isArray(props.rules) ? props.rules : [props.rules];
     return props.optional ? otherRules : [required, ...otherRules];
@@ -101,4 +101,5 @@ export default createComponentWithSlots('NValInput', nValInputProps, ['input'],
   }), null), showErrorMessage.value && _createVNode("p", {
     "class": "text-red-500 text-xs mt-1"
   }, [errorMessage.value])]);
-});
+});
+export { Component as NValInput, Component as default };

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.2.3",
+    "version": "0.2.4",
     "main": "./index.js",
     "repository": {
         "type": "git",