@naptics/vue-collection 0.0.6 → 0.1.0

package/components/NDropdown.d.ts

@@ -1,32 +1,32 @@
 import { type PropType } from 'vue';
 import { type RouteLocationRaw } from 'vue-router';
-import type { HeroIcon } from '../utils/utils';
+import type { HeroIcon } from '../utils/tailwind';
 export declare const nDropdownProps: {
     /**
      * The title of the dropdown-button.
      */
-    title: StringConstructor;
+    readonly title: StringConstructor;
     /**
      * The items of the dropdown.
      * The second dimension of the array is used
      * to create groups of items, which are visually seperated.
      */
-    items: {
-        type: PropType<DropdownItem[] | DropdownItem[][]>;
-        default: () => never[];
+    readonly items: {
+        readonly type: PropType<DropdownItem[] | DropdownItem[][]>;
+        readonly default: () => never[];
     };
     /**
      * If set to `true` the panel is right-aligned to the button.
      */
-    right: BooleanConstructor;
+    readonly right: BooleanConstructor;
     /**
      * If set to `true` the dropdown-button is disabled and no interaction is possible.
      */
-    disabled: BooleanConstructor;
+    readonly disabled: BooleanConstructor;
     /**
      * A slot to replace the button of the dropdown.
      */
-    button: PropType<() => JSX.Element>;
+    readonly button: PropType<() => JSX.Element>;
 };
 export type DropdownItem = {
     /**
@@ -60,57 +60,57 @@ declare const _default: import("vue").DefineComponent<{
     /**
      * The title of the dropdown-button.
      */
-    title: StringConstructor;
+    readonly title: StringConstructor;
     /**
      * The items of the dropdown.
      * The second dimension of the array is used
      * to create groups of items, which are visually seperated.
      */
-    items: {
-        type: PropType<DropdownItem[] | DropdownItem[][]>;
-        default: () => never[];
+    readonly items: {
+        readonly type: PropType<DropdownItem[] | DropdownItem[][]>;
+        readonly default: () => never[];
     };
     /**
      * If set to `true` the panel is right-aligned to the button.
      */
-    right: BooleanConstructor;
+    readonly right: BooleanConstructor;
     /**
      * If set to `true` the dropdown-button is disabled and no interaction is possible.
      */
-    disabled: BooleanConstructor;
+    readonly disabled: BooleanConstructor;
     /**
      * A slot to replace the button of the dropdown.
      */
-    button: PropType<() => JSX.Element>;
+    readonly button: PropType<() => 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.
      */
-    title: StringConstructor;
+    readonly title: StringConstructor;
     /**
      * The items of the dropdown.
      * The second dimension of the array is used
      * to create groups of items, which are visually seperated.
      */
-    items: {
-        type: PropType<DropdownItem[] | DropdownItem[][]>;
-        default: () => never[];
+    readonly items: {
+        readonly type: PropType<DropdownItem[] | DropdownItem[][]>;
+        readonly default: () => never[];
     };
     /**
      * If set to `true` the panel is right-aligned to the button.
      */
-    right: BooleanConstructor;
+    readonly right: BooleanConstructor;
     /**
      * If set to `true` the dropdown-button is disabled and no interaction is possible.
      */
-    disabled: BooleanConstructor;
+    readonly disabled: BooleanConstructor;
     /**
      * A slot to replace the button of the dropdown.
      */
-    button: PropType<() => JSX.Element>;
+    readonly button: PropType<() => JSX.Element>;
 }>> & {}, {
-    right: boolean;
-    disabled: boolean;
-    items: DropdownItem[] | DropdownItem[][];
+    readonly right: boolean;
+    readonly disabled: boolean;
+    readonly items: DropdownItem[] | DropdownItem[][];
 }>;
 export default _default;

package/components/NDropdown.js

@@ -1,5 +1,5 @@
 import { isVNode as _isVNode, createVNode as _createVNode } from "vue";
-import { createComponent, createProps } from '../utils/component';
+import { createComponent } from '../utils/component';
 import { computed, Transition } from 'vue';
 import { RouterLink } from 'vue-router';
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue';
@@ -7,7 +7,7 @@ import { ChevronDownIcon } from '@heroicons/vue/24/solid';
 function _isSlot(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
 }
-export const nDropdownProps = createProps({
+export const nDropdownProps = {
   /**
    * The title of the dropdown-button.
    */
@@ -33,7 +33,7 @@ export const nDropdownProps = createProps({
    * A slot to replace the button of the dropdown.
    */
   button: Function
-});
+};
 /**
  * The `NDropdown` consists of a button and a panel with multiple actions.
  * It is useful to group multiple actions together in one place.

package/components/NDropzone.d.ts

@@ -6,48 +6,48 @@ export declare const nDropzoneProps: {
      * @see {@link nDropzoneProps.accept}
      * @see {@link nDropzoneProps.maxFileSize}
      */
-    description: StringConstructor;
+    readonly description: StringConstructor;
     /**
      * The maximum amount of files which can be added to the dropzone.
      */
-    maxFiles: {
-        type: NumberConstructor;
-        default: number;
+    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
      */
-    accept: StringConstructor;
+    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}.
      */
-    maxFileSize: {
-        type: NumberConstructor;
-        default: number;
+    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}
      */
-    maxLengthFileNames: {
-        type: NumberConstructor;
-        default: number;
+    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.
      */
-    height: {
-        type: StringConstructor;
-        default: string;
+    readonly height: {
+        readonly type: StringConstructor;
+        readonly default: "min-h-36";
     };
-    value: import("vue").PropType<File[]>;
-    onUpdateValue: import("vue").PropType<(newValue: File[]) => void>;
+    readonly value: import("vue").PropType<File[]>;
+    readonly onUpdateValue: import("vue").PropType<(newValue: File[]) => void>;
 };
 /**
  * The `NDropzone` is an area where files can be added by the user by drag & drop.
@@ -61,48 +61,48 @@ declare const _default: import("vue").DefineComponent<{
      * @see {@link nDropzoneProps.accept}
      * @see {@link nDropzoneProps.maxFileSize}
      */
-    description: StringConstructor;
+    readonly description: StringConstructor;
     /**
      * The maximum amount of files which can be added to the dropzone.
      */
-    maxFiles: {
-        type: NumberConstructor;
-        default: number;
+    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
      */
-    accept: StringConstructor;
+    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}.
      */
-    maxFileSize: {
-        type: NumberConstructor;
-        default: number;
+    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}
      */
-    maxLengthFileNames: {
-        type: NumberConstructor;
-        default: number;
+    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.
      */
-    height: {
-        type: StringConstructor;
-        default: string;
+    readonly height: {
+        readonly type: StringConstructor;
+        readonly default: "min-h-36";
     };
-    value: import("vue").PropType<File[]>;
-    onUpdateValue: import("vue").PropType<(newValue: File[]) => void>;
+    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.
@@ -111,52 +111,52 @@ declare const _default: import("vue").DefineComponent<{
      * @see {@link nDropzoneProps.accept}
      * @see {@link nDropzoneProps.maxFileSize}
      */
-    description: StringConstructor;
+    readonly description: StringConstructor;
     /**
      * The maximum amount of files which can be added to the dropzone.
      */
-    maxFiles: {
-        type: NumberConstructor;
-        default: number;
+    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
      */
-    accept: StringConstructor;
+    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}.
      */
-    maxFileSize: {
-        type: NumberConstructor;
-        default: number;
+    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}
      */
-    maxLengthFileNames: {
-        type: NumberConstructor;
-        default: number;
+    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.
      */
-    height: {
-        type: StringConstructor;
-        default: string;
+    readonly height: {
+        readonly type: StringConstructor;
+        readonly default: "min-h-36";
     };
-    value: import("vue").PropType<File[]>;
-    onUpdateValue: import("vue").PropType<(newValue: File[]) => void>;
+    readonly value: import("vue").PropType<File[]>;
+    readonly onUpdateValue: import("vue").PropType<(newValue: File[]) => void>;
 }>> & {}, {
-    maxFiles: number;
-    maxFileSize: number;
-    maxLengthFileNames: number;
-    height: string;
+    readonly maxFiles: number;
+    readonly maxFileSize: number;
+    readonly maxLengthFileNames: number;
+    readonly height: string;
 }>;
 export default _default;

package/components/NDropzone.js

@@ -1,6 +1,6 @@
 import { isVNode as _isVNode, createTextVNode as _createTextVNode, Fragment as _Fragment, createVNode as _createVNode } from "vue";
 import { trslc } from '../i18n';
-import { createComponent, createProps } from '../utils/component';
+import { createComponent } from '../utils/component';
 import { maxLengthSplitCenter } from '../utils/stringMaxLength';
 import { notNullish } from '../utils/utils';
 import { XMarkIcon } from '@heroicons/vue/24/solid';
@@ -12,7 +12,7 @@ import { vModelProps } from '../utils/vModel';
 function _isSlot(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
 }
-export const nDropzoneProps = createProps({
+export const nDropzoneProps = {
   ...vModelProps(Array),
   /**
    * A description which files are allowed for this dropzone.
@@ -61,7 +61,7 @@ export const nDropzoneProps = createProps({
     type: String,
     default: 'min-h-36'
   }
-});
+};
 /**
  * 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.

package/components/NForm.d.ts

@@ -5,12 +5,12 @@ export declare const nFormProps: {
      * The {@link ValidatedForm} which will be used to validate the inputs.
      * All inputs in this forms hierarchy should be added to the {@link ValidatedForm}.
      */
-    form: PropType<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.
      */
-    onSubmit: PropType<() => void>;
+    readonly onSubmit: PropType<() => void>;
 };
 /**
  * The `NForm` should be used to wrap multiple inputs.
@@ -22,22 +22,22 @@ declare const _default: 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}.
      */
-    form: PropType<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.
      */
-    onSubmit: PropType<() => void>;
+    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}.
      */
-    form: PropType<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.
      */
-    onSubmit: PropType<() => void>;
+    readonly onSubmit: PropType<() => void>;
 }>> & {}, {}>;
 export default _default;

package/components/NForm.js

@@ -1,6 +1,6 @@
 import { createVNode as _createVNode } from "vue";
-import { createComponent, createProps } from '../utils/component';
-export const nFormProps = createProps({
+import { createComponent } from '../utils/component';
+export const nFormProps = {
   /**
    * The {@link ValidatedForm} which will be used to validate the inputs.
    * All inputs in this forms hierarchy should be added to the {@link ValidatedForm}.
@@ -11,7 +11,7 @@ export const nFormProps = createProps({
    * and when the validation of the `form` was successful.
    */
   onSubmit: Function
-});
+};
 /**
  * The `NForm` should be used to wrap multiple inputs.
  * If it contains a button of type `submit` in it's hierarchy,