@naptics/vue-collection 0.2.14 → 0.3.0

package/components/NDropzone.d.ts

@@ -57,119 +57,5 @@ 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 Component: import("vue").DefineComponent<{
-    /**
-     * A description which files are allowed for this dropzone.
-     * This should include everything the user needs to know about
-     * the file type / the extensions and the maximum size of the file.
-     * @see {@link nDropzoneProps.accept}
-     * @see {@link nDropzoneProps.maxFileSize}
-     */
-    readonly description: StringConstructor;
-    /**
-     * The maximum amount of files which can be added to the dropzone.
-     */
-    readonly maxFiles: {
-        readonly type: NumberConstructor;
-        readonly default: 1;
-    };
-    /**
-     * Specifies which file types are accepted. The same syntax as with inputs of type file is used.
-     * Make sure to explain the requirements to the user in the {@link nDropzoneProps.description}.
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers
-     */
-    readonly accept: StringConstructor;
-    /**
-     * Specifies the maximum size of an individual file in bytes.
-     * Make sure to explain the max size to the user in the {@link nDropzoneProps.description}.
-     */
-    readonly maxFileSize: {
-        readonly type: NumberConstructor;
-        readonly default: number;
-    };
-    /**
-     * The maximum length of the file names.
-     * Files names longer than the specified amount of characters will be shortened.
-     * @see {@link maxLengthSplitCenter}
-     */
-    readonly maxLengthFileNames: {
-        readonly type: NumberConstructor;
-        readonly default: 35;
-    };
-    /**
-     * A tailwind height class, which is applied to the dropzone area.
-     * It is recommended to use `min-h-*` classes,
-     * so the box is always large enough to display it's text.
-     */
-    readonly height: {
-        readonly type: StringConstructor;
-        readonly default: "min-h-36";
-    };
-    /**
-     * If set to `true`, the dropzone is disabled and does not accept input anymore.
-     */
-    readonly disabled: BooleanConstructor;
-    readonly value: import("vue").PropType<File[]>;
-    readonly onUpdateValue: import("vue").PropType<(newValue: File[]) => 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<{
-    /**
-     * A description which files are allowed for this dropzone.
-     * This should include everything the user needs to know about
-     * the file type / the extensions and the maximum size of the file.
-     * @see {@link nDropzoneProps.accept}
-     * @see {@link nDropzoneProps.maxFileSize}
-     */
-    readonly description: StringConstructor;
-    /**
-     * The maximum amount of files which can be added to the dropzone.
-     */
-    readonly maxFiles: {
-        readonly type: NumberConstructor;
-        readonly default: 1;
-    };
-    /**
-     * Specifies which file types are accepted. The same syntax as with inputs of type file is used.
-     * Make sure to explain the requirements to the user in the {@link nDropzoneProps.description}.
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers
-     */
-    readonly accept: StringConstructor;
-    /**
-     * Specifies the maximum size of an individual file in bytes.
-     * Make sure to explain the max size to the user in the {@link nDropzoneProps.description}.
-     */
-    readonly maxFileSize: {
-        readonly type: NumberConstructor;
-        readonly default: number;
-    };
-    /**
-     * The maximum length of the file names.
-     * Files names longer than the specified amount of characters will be shortened.
-     * @see {@link maxLengthSplitCenter}
-     */
-    readonly maxLengthFileNames: {
-        readonly type: NumberConstructor;
-        readonly default: 35;
-    };
-    /**
-     * A tailwind height class, which is applied to the dropzone area.
-     * It is recommended to use `min-h-*` classes,
-     * so the box is always large enough to display it's text.
-     */
-    readonly height: {
-        readonly type: StringConstructor;
-        readonly default: "min-h-36";
-    };
-    /**
-     * If set to `true`, the dropzone is disabled and does not accept input anymore.
-     */
-    readonly disabled: BooleanConstructor;
-    readonly value: import("vue").PropType<File[]>;
-    readonly onUpdateValue: import("vue").PropType<(newValue: File[]) => void>;
-}>> & {}, {
-    readonly disabled: boolean;
-    readonly maxFiles: number;
-    readonly maxFileSize: number;
-    readonly maxLengthFileNames: number;
-    readonly height: string;
-}>;
+declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
 export { Component as NDropzone, Component as default };

package/components/NDropzone.js

@@ -1,4 +1,4 @@
-import { isVNode as _isVNode, createTextVNode as _createTextVNode, Fragment as _Fragment, createVNode as _createVNode } from "vue";
+import { createVNode as _createVNode, Fragment as _Fragment, createTextVNode as _createTextVNode, isVNode as _isVNode } from "vue";
 import { trslc } from '../i18n';
 import { createComponent } from '../utils/component';
 import { maxLengthSplitCenter } from '../utils/stringMaxLength';

package/components/NForm.d.ts

@@ -17,27 +17,5 @@ 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 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}.
-     */
-    readonly form: PropType<ValidatedForm>;
-    /**
-     * This is called, when a button of type `submit` in the hierarchy of this view is clicked
-     * and when the validation of the `form` was successful.
-     */
-    readonly onSubmit: 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<{
-    /**
-     * The {@link ValidatedForm} which will be used to validate the inputs.
-     * All inputs in this forms hierarchy should be added to the {@link ValidatedForm}.
-     */
-    readonly form: PropType<ValidatedForm>;
-    /**
-     * This is called, when a button of type `submit` in the hierarchy of this view is clicked
-     * and when the validation of the `form` was successful.
-     */
-    readonly onSubmit: PropType<() => void>;
-}>> & {}, {}>;
+declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
 export { Component as NForm, Component as default };

package/components/NFormModal.d.ts

@@ -25,6 +25,14 @@ export declare const nFormModalProps: {
     readonly hideHeader: BooleanConstructor;
     readonly hideFooter: BooleanConstructor;
     readonly hideX: BooleanConstructor;
+    readonly verticalPosition: {
+        readonly type: PropType<"start" | "center" | "end">;
+        readonly default: "center";
+    };
+    readonly horizontalPosition: {
+        readonly type: PropType<"start" | "center" | "end">;
+        readonly default: "center";
+    };
     readonly title: StringConstructor;
     readonly okText: {
         readonly type: StringConstructor;
@@ -63,131 +71,5 @@ 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 Component: import("vue").DefineComponent<{
-    /**
-     * The maximum width of the modal. A regular tailwind class.
-     */
-    readonly maxWidth: {
-        readonly type: PropType<TWMaxWidth>;
-        readonly default: "max-w-lg";
-    };
-    /**
-     * If set to `true` the modal closes when clicking on the background.
-     * Default is `false` as the accidental reseting of the whole form is very annoying.
-     */
-    readonly closeOnBackground: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
-    };
-    /**
-     * The {@link ValidatedForm} to validate the inputs.
-     * All inputs should be added to the form.
-     */
-    readonly form: PropType<ValidatedForm>;
-    readonly hideHeader: BooleanConstructor;
-    readonly hideFooter: BooleanConstructor;
-    readonly hideX: BooleanConstructor;
-    readonly title: StringConstructor;
-    readonly okText: {
-        readonly type: StringConstructor;
-        readonly default: string;
-    };
-    readonly okColor: {
-        readonly type: StringConstructor;
-        readonly default: "primary";
-    };
-    readonly closeOnOk: {
-        readonly type: BooleanConstructor;
-        readonly default: true;
-    };
-    readonly hideOk: BooleanConstructor;
-    readonly okDisabled: BooleanConstructor;
-    readonly cancelText: {
-        readonly type: StringConstructor;
-        readonly default: string;
-    };
-    readonly cancelColor: {
-        readonly type: StringConstructor;
-        readonly default: "default";
-    };
-    readonly hideCancel: BooleanConstructor;
-    readonly onOk: PropType<() => void>;
-    readonly onCancel: PropType<() => void>;
-    readonly modal: PropType<(props: import("./NModal").ModalSlotProps) => JSX.Element>;
-    readonly content: PropType<(props: import("./NModal").ModalSlotProps) => JSX.Element>;
-    readonly header: PropType<() => JSX.Element>;
-    readonly footer: PropType<(props: import("./NModal").ModalSlotProps) => JSX.Element>;
-    readonly value: PropType<boolean>;
-    readonly onUpdateValue: PropType<(newValue: boolean) => 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<{
-    /**
-     * The maximum width of the modal. A regular tailwind class.
-     */
-    readonly maxWidth: {
-        readonly type: PropType<TWMaxWidth>;
-        readonly default: "max-w-lg";
-    };
-    /**
-     * If set to `true` the modal closes when clicking on the background.
-     * Default is `false` as the accidental reseting of the whole form is very annoying.
-     */
-    readonly closeOnBackground: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
-    };
-    /**
-     * The {@link ValidatedForm} to validate the inputs.
-     * All inputs should be added to the form.
-     */
-    readonly form: PropType<ValidatedForm>;
-    readonly hideHeader: BooleanConstructor;
-    readonly hideFooter: BooleanConstructor;
-    readonly hideX: BooleanConstructor;
-    readonly title: StringConstructor;
-    readonly okText: {
-        readonly type: StringConstructor;
-        readonly default: string;
-    };
-    readonly okColor: {
-        readonly type: StringConstructor;
-        readonly default: "primary";
-    };
-    readonly closeOnOk: {
-        readonly type: BooleanConstructor;
-        readonly default: true;
-    };
-    readonly hideOk: BooleanConstructor;
-    readonly okDisabled: BooleanConstructor;
-    readonly cancelText: {
-        readonly type: StringConstructor;
-        readonly default: string;
-    };
-    readonly cancelColor: {
-        readonly type: StringConstructor;
-        readonly default: "default";
-    };
-    readonly hideCancel: BooleanConstructor;
-    readonly onOk: PropType<() => void>;
-    readonly onCancel: PropType<() => void>;
-    readonly modal: PropType<(props: import("./NModal").ModalSlotProps) => JSX.Element>;
-    readonly content: PropType<(props: import("./NModal").ModalSlotProps) => JSX.Element>;
-    readonly header: PropType<() => JSX.Element>;
-    readonly footer: PropType<(props: import("./NModal").ModalSlotProps) => JSX.Element>;
-    readonly value: PropType<boolean>;
-    readonly onUpdateValue: PropType<(newValue: boolean) => void>;
-}>> & {}, {
-    readonly maxWidth: TWMaxWidth;
-    readonly hideX: boolean;
-    readonly hideHeader: boolean;
-    readonly hideFooter: boolean;
-    readonly okText: string;
-    readonly okColor: string;
-    readonly closeOnOk: boolean;
-    readonly hideOk: boolean;
-    readonly okDisabled: boolean;
-    readonly cancelText: string;
-    readonly cancelColor: string;
-    readonly closeOnBackground: boolean;
-    readonly hideCancel: boolean;
-}>;
+declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
 export { Component as NFormModal, Component as default };

package/components/NIconButton.d.ts

@@ -7,9 +7,7 @@ export declare const nIconButtonProps: {
     readonly tooltipHide: BooleanConstructor;
     readonly tooltipShow: BooleanConstructor;
     readonly tooltipPlacement: {
-        readonly type: PropType<import("./NTooltip").TooltipPlacement>; /**
-         * If set to `true` the icon-button is disabled and no interaction is possible.
-         */
+        readonly type: PropType<import("./NTooltip").TooltipPlacement>;
         readonly default: "auto";
     };
     readonly tooltipMaxWidth: {
@@ -55,7 +53,7 @@ export declare const nIconButtonProps: {
      * The html attribute, which indicates the type of the button.
      */
     readonly type: {
-        readonly type: PropType<"button" | "submit" | "reset">;
+        readonly type: PropType<"submit" | "button" | "reset">;
         readonly default: "button";
     };
     /**
@@ -77,159 +75,5 @@ export declare const nIconButtonProps: {
 /**
  * The `NIconButton` is a regular button which does not have any text but an icon instead.
  */
-declare const Component: import("vue").DefineComponent<{
-    readonly tooltipText: StringConstructor;
-    readonly tooltipContent: PropType<() => JSX.Element>;
-    readonly tooltipHide: BooleanConstructor;
-    readonly tooltipShow: BooleanConstructor;
-    readonly tooltipPlacement: {
-        readonly type: PropType<import("./NTooltip").TooltipPlacement>; /**
-         * If set to `true` the icon-button is disabled and no interaction is possible.
-         */
-        readonly default: "auto";
-    };
-    readonly tooltipMaxWidth: {
-        readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
-        readonly default: "max-w-xs";
-    };
-    readonly tooltipWrapperClass: StringConstructor;
-    readonly tooltipContentClass: StringConstructor;
-    readonly tooltipArrowClass: StringConstructor;
-    /**
-     * The icon of the icon-button.
-     */
-    readonly icon: {
-        readonly type: PropType<HeroIcon>;
-        readonly required: true;
-    };
-    /**
-     * The route of the icon-button. If this is set, the icon-button becomes a {@link RouterLink}.
-     */
-    readonly route: PropType<RouteLocationRaw>;
-    /**
-     * The color of the icon-button.
-     */
-    readonly color: {
-        readonly type: StringConstructor;
-        readonly default: "default";
-    };
-    /**
-     * The shade of the icon-button.
-     */
-    readonly shade: {
-        readonly type: NumberConstructor;
-        readonly default: 500;
-    };
-    /**
-     * The size of the icon in tailwind-units.
-     */
-    readonly size: {
-        readonly type: NumberConstructor;
-        readonly default: 5;
-    };
-    /**
-     * The html attribute, which indicates the type of the button.
-     */
-    readonly type: {
-        readonly type: PropType<"button" | "submit" | "reset">;
-        readonly default: "button";
-    };
-    /**
-     * If set to `true` the icon-button is disabled and no interaction is possible.
-     */
-    readonly disabled: BooleanConstructor;
-    /**
-     * Adds the classes to the icon-button.
-     * Use this instead of `class` to style the button, because the button is wrapped inside
-     * a div for the tooltip and `class` would be applied to the wrapping div.
-     */
-    readonly buttonClass: StringConstructor;
-    /**
-     * This is called when the icon-button is clicked.
-     * It is only called when the `route` prop is not set on the icon-button.
-     */
-    readonly onClick: 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<{
-    readonly tooltipText: StringConstructor;
-    readonly tooltipContent: PropType<() => JSX.Element>;
-    readonly tooltipHide: BooleanConstructor;
-    readonly tooltipShow: BooleanConstructor;
-    readonly tooltipPlacement: {
-        readonly type: PropType<import("./NTooltip").TooltipPlacement>; /**
-         * If set to `true` the icon-button is disabled and no interaction is possible.
-         */
-        readonly default: "auto";
-    };
-    readonly tooltipMaxWidth: {
-        readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
-        readonly default: "max-w-xs";
-    };
-    readonly tooltipWrapperClass: StringConstructor;
-    readonly tooltipContentClass: StringConstructor;
-    readonly tooltipArrowClass: StringConstructor;
-    /**
-     * The icon of the icon-button.
-     */
-    readonly icon: {
-        readonly type: PropType<HeroIcon>;
-        readonly required: true;
-    };
-    /**
-     * The route of the icon-button. If this is set, the icon-button becomes a {@link RouterLink}.
-     */
-    readonly route: PropType<RouteLocationRaw>;
-    /**
-     * The color of the icon-button.
-     */
-    readonly color: {
-        readonly type: StringConstructor;
-        readonly default: "default";
-    };
-    /**
-     * The shade of the icon-button.
-     */
-    readonly shade: {
-        readonly type: NumberConstructor;
-        readonly default: 500;
-    };
-    /**
-     * The size of the icon in tailwind-units.
-     */
-    readonly size: {
-        readonly type: NumberConstructor;
-        readonly default: 5;
-    };
-    /**
-     * The html attribute, which indicates the type of the button.
-     */
-    readonly type: {
-        readonly type: PropType<"button" | "submit" | "reset">;
-        readonly default: "button";
-    };
-    /**
-     * If set to `true` the icon-button is disabled and no interaction is possible.
-     */
-    readonly disabled: BooleanConstructor;
-    /**
-     * Adds the classes to the icon-button.
-     * Use this instead of `class` to style the button, because the button is wrapped inside
-     * a div for the tooltip and `class` would be applied to the wrapping div.
-     */
-    readonly buttonClass: StringConstructor;
-    /**
-     * This is called when the icon-button is clicked.
-     * It is only called when the `route` prop is not set on the icon-button.
-     */
-    readonly onClick: PropType<() => void>;
-}>> & {}, {
-    readonly color: string;
-    readonly shade: number;
-    readonly size: number;
-    readonly type: "button" | "submit" | "reset";
-    readonly tooltipHide: boolean;
-    readonly tooltipShow: boolean;
-    readonly tooltipPlacement: import("./NTooltip").TooltipPlacement;
-    readonly tooltipMaxWidth: import("../utils/tailwind").TWMaxWidth;
-    readonly disabled: boolean;
-}>;
+declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
 export { Component as NIconButton, Component as default };

package/components/NIconButton.js

@@ -1,4 +1,4 @@
-import { isVNode as _isVNode, createVNode as _createVNode } from "vue";
+import { createVNode as _createVNode, isVNode as _isVNode } from "vue";
 import { createComponent } from '../utils/component';
 import { RouterLink } from 'vue-router';
 import { nButtonProps } from './NButton';

package/components/NIconCircle.d.ts

@@ -45,91 +45,5 @@ export declare const nIconCircleProps: {
 /**
  * The `NIconCircle` is an icon with a colored circle around it.
  */
-declare const Component: import("vue").DefineComponent<{
-    /**
-     * The icon of the icon-circle.
-     */
-    readonly icon: {
-        readonly type: PropType<HeroIcon>;
-        readonly required: true;
-    };
-    /**
-     * The color of the icon-circle.
-     */
-    readonly color: {
-        readonly type: StringConstructor;
-        readonly default: "primary";
-    };
-    /**
-     * The size of the circle in "tailwind units" (4 px).
-     * Tailwind classes are used for the size, so any number can be passed.
-     * If the `iconSize` is not set, it will be adjusted automatically.
-     */
-    readonly circleSize: NumberConstructor;
-    /**
-     * The size of the icon in "tailwind units" (4 px).
-     * No tailwind classes are used for the size, so any number can be passed.
-     * If the `circleSize` is not set, it will be adjusted automatically.
-     */
-    readonly iconSize: NumberConstructor;
-    /**
-     * The shade of the icon.
-     */
-    readonly iconShade: {
-        readonly type: NumberConstructor;
-        readonly default: 600;
-    };
-    /**
-     * The shade of the background.
-     */
-    readonly bgShade: {
-        readonly type: NumberConstructor;
-        readonly default: 100;
-    };
-}, 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 icon of the icon-circle.
-     */
-    readonly icon: {
-        readonly type: PropType<HeroIcon>;
-        readonly required: true;
-    };
-    /**
-     * The color of the icon-circle.
-     */
-    readonly color: {
-        readonly type: StringConstructor;
-        readonly default: "primary";
-    };
-    /**
-     * The size of the circle in "tailwind units" (4 px).
-     * Tailwind classes are used for the size, so any number can be passed.
-     * If the `iconSize` is not set, it will be adjusted automatically.
-     */
-    readonly circleSize: NumberConstructor;
-    /**
-     * The size of the icon in "tailwind units" (4 px).
-     * No tailwind classes are used for the size, so any number can be passed.
-     * If the `circleSize` is not set, it will be adjusted automatically.
-     */
-    readonly iconSize: NumberConstructor;
-    /**
-     * The shade of the icon.
-     */
-    readonly iconShade: {
-        readonly type: NumberConstructor;
-        readonly default: 600;
-    };
-    /**
-     * The shade of the background.
-     */
-    readonly bgShade: {
-        readonly type: NumberConstructor;
-        readonly default: 100;
-    };
-}>> & {}, {
-    readonly color: string;
-    readonly iconShade: number;
-    readonly bgShade: number;
-}>;
+declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
 export { Component as NIconCircle, Component as default };