@naptics/vue-collection 0.0.6 → 0.1.0

package/components/NTable.d.ts

@@ -45,9 +45,9 @@ export declare const nTableProps: {
     /**
      * The headings of the table. These define which columns are shown in the table and in which order.
      */
-    headings: {
-        type: PropType<TableHeading[]>;
-        required: true;
+    readonly headings: {
+        readonly type: PropType<TableHeading[]>;
+        readonly required: true;
     };
     /**
      * Details can be added additionally to headings.
@@ -57,9 +57,9 @@ export declare const nTableProps: {
      * in the same way as if the details were normal headings.
      * Note that details can be added dynamically by adding the `breakpoint` property to the headings.
      */
-    details: {
-        type: PropType<TableDetail[]>;
-        default: () => never[];
+    readonly details: {
+        readonly type: PropType<TableDetail[]>;
+        readonly default: () => never[];
     };
     /**
      * The items of the table. They consist of an array of table rows.
@@ -82,9 +82,9 @@ export declare const nTableProps: {
      *      { id: 2, name: 'Franzi', status: () => <NBadge ... />, action: ... }    // Row 2
      * ]
      */
-    items: {
-        type: PropType<TableRow[]>;
-        default: () => never[];
+    readonly items: {
+        readonly type: PropType<TableRow[]>;
+        readonly default: () => never[];
     };
 };
 /**
@@ -94,9 +94,9 @@ declare const _default: import("vue").DefineComponent<{
     /**
      * The headings of the table. These define which columns are shown in the table and in which order.
      */
-    headings: {
-        type: PropType<TableHeading[]>;
-        required: true;
+    readonly headings: {
+        readonly type: PropType<TableHeading[]>;
+        readonly required: true;
     };
     /**
      * Details can be added additionally to headings.
@@ -106,9 +106,9 @@ declare const _default: import("vue").DefineComponent<{
      * in the same way as if the details were normal headings.
      * Note that details can be added dynamically by adding the `breakpoint` property to the headings.
      */
-    details: {
-        type: PropType<TableDetail[]>;
-        default: () => never[];
+    readonly details: {
+        readonly type: PropType<TableDetail[]>;
+        readonly default: () => never[];
     };
     /**
      * The items of the table. They consist of an array of table rows.
@@ -131,17 +131,17 @@ declare const _default: import("vue").DefineComponent<{
      *      { id: 2, name: 'Franzi', status: () => <NBadge ... />, action: ... }    // Row 2
      * ]
      */
-    items: {
-        type: PropType<TableRow[]>;
-        default: () => never[];
+    readonly items: {
+        readonly type: PropType<TableRow[]>;
+        readonly default: () => never[];
     };
 }, 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 headings of the table. These define which columns are shown in the table and in which order.
      */
-    headings: {
-        type: PropType<TableHeading[]>;
-        required: true;
+    readonly headings: {
+        readonly type: PropType<TableHeading[]>;
+        readonly required: true;
     };
     /**
      * Details can be added additionally to headings.
@@ -151,9 +151,9 @@ declare const _default: import("vue").DefineComponent<{
      * in the same way as if the details were normal headings.
      * Note that details can be added dynamically by adding the `breakpoint` property to the headings.
      */
-    details: {
-        type: PropType<TableDetail[]>;
-        default: () => never[];
+    readonly details: {
+        readonly type: PropType<TableDetail[]>;
+        readonly default: () => never[];
     };
     /**
      * The items of the table. They consist of an array of table rows.
@@ -176,12 +176,12 @@ declare const _default: import("vue").DefineComponent<{
      *      { id: 2, name: 'Franzi', status: () => <NBadge ... />, action: ... }    // Row 2
      * ]
      */
-    items: {
-        type: PropType<TableRow[]>;
-        default: () => never[];
+    readonly items: {
+        readonly type: PropType<TableRow[]>;
+        readonly default: () => never[];
     };
 }>> & {}, {
-    details: TableDetail[];
-    items: TableRow[];
+    readonly details: TableDetail[];
+    readonly items: TableRow[];
 }>;
 export default _default;

package/components/NTable.js

@@ -1,12 +1,12 @@
 import { Fragment as _Fragment, createVNode as _createVNode } from "vue";
 import { isWidthBreakpoint } from '../utils/breakpoints';
-import { createComponent, createProps } from '../utils/component';
+import { createComponent } from '../utils/component';
 import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/vue/24/solid';
 import { computed, Fragment, ref, watch } from 'vue';
 import NIconButton from './NIconButton';
 import './NTable.css';
 const N_TABLE_ACTION_KEY = 'action';
-export const nTableProps = createProps({
+export const nTableProps = {
   /**
    * The headings of the table. These define which columns are shown in the table and in which order.
    */
@@ -51,7 +51,7 @@ export const nTableProps = createProps({
     type: Array,
     default: () => []
   }
-});
+};
 /**
  * The `NTable` is a styled html table which accepts data and displays it appropriately.
  */

package/components/NTableAction.d.ts

@@ -4,23 +4,23 @@ export declare const nTableActionProps: {
     /**
      * The route of the action. If set the component will be a {@link RouterLink}.
      */
-    route: PropType<RouteLocationRaw>;
+    readonly route: PropType<RouteLocationRaw>;
     /**
      * The text of the action.
      */
-    text: StringConstructor;
+    readonly text: StringConstructor;
     /**
      * The html attribute, which indicates the type of the button.
      */
-    type: {
-        type: PropType<"button" | "submit" | "reset">;
-        default: string;
+    readonly type: {
+        readonly type: PropType<"button" | "submit" | "reset">;
+        readonly default: "button";
     };
     /**
      * This is called when the action is clicked.
      * It is only called when the `route` prop is not set on the action.
      */
-    onClick: PropType<() => void>;
+    readonly onClick: PropType<() => void>;
 };
 /**
  * The `NTableAction` is a button or {@link RouterLink} which is styled to fit into a table.
@@ -30,45 +30,45 @@ declare const _default: import("vue").DefineComponent<{
     /**
      * The route of the action. If set the component will be a {@link RouterLink}.
      */
-    route: PropType<RouteLocationRaw>;
+    readonly route: PropType<RouteLocationRaw>;
     /**
      * The text of the action.
      */
-    text: StringConstructor;
+    readonly text: StringConstructor;
     /**
      * The html attribute, which indicates the type of the button.
      */
-    type: {
-        type: PropType<"button" | "submit" | "reset">;
-        default: string;
+    readonly type: {
+        readonly type: PropType<"button" | "submit" | "reset">;
+        readonly default: "button";
     };
     /**
      * This is called when the action is clicked.
      * It is only called when the `route` prop is not set on the action.
      */
-    onClick: PropType<() => void>;
+    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<{
     /**
      * The route of the action. If set the component will be a {@link RouterLink}.
      */
-    route: PropType<RouteLocationRaw>;
+    readonly route: PropType<RouteLocationRaw>;
     /**
      * The text of the action.
      */
-    text: StringConstructor;
+    readonly text: StringConstructor;
     /**
      * The html attribute, which indicates the type of the button.
      */
-    type: {
-        type: PropType<"button" | "submit" | "reset">;
-        default: string;
+    readonly type: {
+        readonly type: PropType<"button" | "submit" | "reset">;
+        readonly default: "button";
     };
     /**
      * This is called when the action is clicked.
      * It is only called when the `route` prop is not set on the action.
      */
-    onClick: PropType<() => void>;
+    readonly onClick: PropType<() => void>;
 }>> & {}, {
-    type: "button" | "submit" | "reset";
+    readonly type: "button" | "submit" | "reset";
 }>;
 export default _default;

package/components/NTableAction.js

@@ -1,11 +1,11 @@
 import { isVNode as _isVNode, createVNode as _createVNode, Fragment as _Fragment } from "vue";
-import { createComponent, createProps } from '../utils/component';
+import { createComponent } from '../utils/component';
 import { RouterLink } from 'vue-router';
 import { nButtonProps } from './NButton';
 function _isSlot(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
 }
-export const nTableActionProps = createProps({
+export const nTableActionProps = {
   /**
    * The route of the action. If set the component will be a {@link RouterLink}.
    */
@@ -23,7 +23,7 @@ export const nTableActionProps = createProps({
    * It is only called when the `route` prop is not set on the action.
    */
   onClick: Function
-});
+};
 /**
  * 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.

package/components/NTextArea.d.ts

@@ -1,80 +1,78 @@
 import { type PropType } from 'vue';
 export declare const nTextAreaProps: {
-    optional: BooleanConstructor;
-    rules: {
-        type: PropType<import("../utils/validation").ValidationRule | import("../utils/validation").ValidationRule[]>;
-        default: () => never[];
+    readonly optional: BooleanConstructor;
+    readonly rules: {
+        readonly type: PropType<import("../utils/validation").ValidationRule | import("../utils/validation").ValidationRule[]>;
+        readonly default: () => never[];
     };
-    form: PropType<import("./ValidatedForm").ValidatedForm>;
-    error: BooleanConstructor;
-    errorMessage: StringConstructor;
-    hideErrorMessage: BooleanConstructor;
-    disableBlurValidation: BooleanConstructor;
-    tooltipText: StringConstructor;
-    tooltipContent: PropType<() => void>;
-    tooltipHide: BooleanConstructor;
-    tooltipShow: BooleanConstructor;
-    tooltipPlacement: {
-        type: PropType<import("./NTooltip").TooltipPlacement>;
-        default: string;
+    readonly form: PropType<import("./ValidatedForm").ValidatedForm>;
+    readonly error: BooleanConstructor;
+    readonly errorMessage: StringConstructor;
+    readonly hideErrorMessage: BooleanConstructor;
+    readonly disableBlurValidation: BooleanConstructor;
+    readonly tooltipText: StringConstructor;
+    readonly tooltipContent: PropType<() => JSX.Element>;
+    readonly tooltipHide: BooleanConstructor;
+    readonly tooltipShow: BooleanConstructor;
+    readonly tooltipPlacement: {
+        readonly type: PropType<import("./NTooltip").TooltipPlacement>;
+        readonly default: "auto";
     };
-    tooltipMaxWidth: {
-        type: PropType<import("../utils/tailwind").TWMaxWidth>; /**
-         * If set to `true` the text area is displayed with a red border.
-         */
-        default: string;
+    readonly tooltipMaxWidth: {
+        readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
+        readonly default: "max-w-xs";
     };
     /**
      * The name of the text area. Is displayed as a label above the text area.
      */
-    name: StringConstructor;
+    readonly name: StringConstructor;
     /**
      * The placeholder of the text area.
      */
-    placeholder: StringConstructor;
+    readonly placeholder: StringConstructor;
     /**
      * The html autocomplete attribute of the text area.
      */
-    autocomplete: {
-        type: StringConstructor;
-        default: string;
+    readonly autocomplete: {
+        readonly type: StringConstructor;
+        readonly default: "off";
     };
     /**
      * If set to `true`, the text area is resizable in y-direction.
      */
-    resizable: {
-        type: BooleanConstructor;
-        default: boolean;
+    readonly resizable: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
     };
     /**
      * The initial height of the text area in terms of
      * how many text rows fit inside the text area.
      * The height can be change if {@link nTextAreaProps.resizable} is `true`
      */
-    rows: NumberConstructor;
+    readonly rows: NumberConstructor;
     /**
      * The maximum length of the input string. Entering longer strings are simply
      * prevented, but no error message is shown to the user.
      */
-    maxLength: NumberConstructor;
+    readonly maxLength: NumberConstructor;
     /**
      * If set to `true` the text area is disabled and no interaction is possible.
      */
-    disabled: BooleanConstructor;
+    readonly disabled: BooleanConstructor;
     /**
      * If set to `true` the text area's label is hidden.
      */
-    hideLabel: BooleanConstructor;
+    readonly hideLabel: BooleanConstructor;
     /**
      * This is called when the text area reveices focus.
      */
-    onFocus: PropType<() => void>;
+    readonly onFocus: PropType<() => void>;
     /**
      * This is called when the text area looses focus.
      */
-    onBlur: PropType<() => void>;
-    value: PropType<string>;
-    onUpdateValue: PropType<(newValue: string) => void>;
+    readonly onBlur: PropType<() => void>;
+    readonly value: PropType<string>;
+    readonly onUpdateValue: PropType<(newValue: string) => void>;
 };
 export type NTextAreaExposed = {
     /**
@@ -83,170 +81,166 @@ export type NTextAreaExposed = {
     focus(): void;
 };
 declare const _default: import("vue").DefineComponent<{
-    optional: BooleanConstructor;
-    rules: {
-        type: PropType<import("../utils/validation").ValidationRule | import("../utils/validation").ValidationRule[]>;
-        default: () => never[];
+    readonly optional: BooleanConstructor;
+    readonly rules: {
+        readonly type: PropType<import("../utils/validation").ValidationRule | import("../utils/validation").ValidationRule[]>;
+        readonly default: () => never[];
     };
-    form: PropType<import("./ValidatedForm").ValidatedForm>;
-    error: BooleanConstructor;
-    errorMessage: StringConstructor;
-    hideErrorMessage: BooleanConstructor;
-    disableBlurValidation: BooleanConstructor;
-    tooltipText: StringConstructor;
-    tooltipContent: PropType<() => void>;
-    tooltipHide: BooleanConstructor;
-    tooltipShow: BooleanConstructor;
-    tooltipPlacement: {
-        type: PropType<import("./NTooltip").TooltipPlacement>;
-        default: string;
+    readonly form: PropType<import("./ValidatedForm").ValidatedForm>;
+    readonly error: BooleanConstructor;
+    readonly errorMessage: StringConstructor;
+    readonly hideErrorMessage: BooleanConstructor;
+    readonly disableBlurValidation: BooleanConstructor;
+    readonly tooltipText: StringConstructor;
+    readonly tooltipContent: PropType<() => JSX.Element>;
+    readonly tooltipHide: BooleanConstructor;
+    readonly tooltipShow: BooleanConstructor;
+    readonly tooltipPlacement: {
+        readonly type: PropType<import("./NTooltip").TooltipPlacement>;
+        readonly default: "auto";
     };
-    tooltipMaxWidth: {
-        type: PropType<import("../utils/tailwind").TWMaxWidth>; /**
-         * If set to `true` the text area is displayed with a red border.
-         */
-        default: string;
+    readonly tooltipMaxWidth: {
+        readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
+        readonly default: "max-w-xs";
     };
     /**
      * The name of the text area. Is displayed as a label above the text area.
      */
-    name: StringConstructor;
+    readonly name: StringConstructor;
     /**
      * The placeholder of the text area.
      */
-    placeholder: StringConstructor;
+    readonly placeholder: StringConstructor;
     /**
      * The html autocomplete attribute of the text area.
      */
-    autocomplete: {
-        type: StringConstructor;
-        default: string;
+    readonly autocomplete: {
+        readonly type: StringConstructor;
+        readonly default: "off";
     };
     /**
      * If set to `true`, the text area is resizable in y-direction.
      */
-    resizable: {
-        type: BooleanConstructor;
-        default: boolean;
+    readonly resizable: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
     };
     /**
      * The initial height of the text area in terms of
      * how many text rows fit inside the text area.
      * The height can be change if {@link nTextAreaProps.resizable} is `true`
      */
-    rows: NumberConstructor;
+    readonly rows: NumberConstructor;
     /**
      * The maximum length of the input string. Entering longer strings are simply
      * prevented, but no error message is shown to the user.
      */
-    maxLength: NumberConstructor;
+    readonly maxLength: NumberConstructor;
     /**
      * If set to `true` the text area is disabled and no interaction is possible.
      */
-    disabled: BooleanConstructor;
+    readonly disabled: BooleanConstructor;
     /**
      * If set to `true` the text area's label is hidden.
      */
-    hideLabel: BooleanConstructor;
+    readonly hideLabel: BooleanConstructor;
     /**
      * This is called when the text area reveices focus.
      */
-    onFocus: PropType<() => void>;
+    readonly onFocus: PropType<() => void>;
     /**
      * This is called when the text area looses focus.
      */
-    onBlur: PropType<() => void>;
-    value: PropType<string>;
-    onUpdateValue: PropType<(newValue: string) => void>;
+    readonly onBlur: PropType<() => void>;
+    readonly value: PropType<string>;
+    readonly onUpdateValue: PropType<(newValue: string) => 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<{
-    optional: BooleanConstructor;
-    rules: {
-        type: PropType<import("../utils/validation").ValidationRule | import("../utils/validation").ValidationRule[]>;
-        default: () => never[];
+    readonly optional: BooleanConstructor;
+    readonly rules: {
+        readonly type: PropType<import("../utils/validation").ValidationRule | import("../utils/validation").ValidationRule[]>;
+        readonly default: () => never[];
     };
-    form: PropType<import("./ValidatedForm").ValidatedForm>;
-    error: BooleanConstructor;
-    errorMessage: StringConstructor;
-    hideErrorMessage: BooleanConstructor;
-    disableBlurValidation: BooleanConstructor;
-    tooltipText: StringConstructor;
-    tooltipContent: PropType<() => void>;
-    tooltipHide: BooleanConstructor;
-    tooltipShow: BooleanConstructor;
-    tooltipPlacement: {
-        type: PropType<import("./NTooltip").TooltipPlacement>;
-        default: string;
+    readonly form: PropType<import("./ValidatedForm").ValidatedForm>;
+    readonly error: BooleanConstructor;
+    readonly errorMessage: StringConstructor;
+    readonly hideErrorMessage: BooleanConstructor;
+    readonly disableBlurValidation: BooleanConstructor;
+    readonly tooltipText: StringConstructor;
+    readonly tooltipContent: PropType<() => JSX.Element>;
+    readonly tooltipHide: BooleanConstructor;
+    readonly tooltipShow: BooleanConstructor;
+    readonly tooltipPlacement: {
+        readonly type: PropType<import("./NTooltip").TooltipPlacement>;
+        readonly default: "auto";
     };
-    tooltipMaxWidth: {
-        type: PropType<import("../utils/tailwind").TWMaxWidth>; /**
-         * If set to `true` the text area is displayed with a red border.
-         */
-        default: string;
+    readonly tooltipMaxWidth: {
+        readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
+        readonly default: "max-w-xs";
     };
     /**
      * The name of the text area. Is displayed as a label above the text area.
      */
-    name: StringConstructor;
+    readonly name: StringConstructor;
     /**
      * The placeholder of the text area.
      */
-    placeholder: StringConstructor;
+    readonly placeholder: StringConstructor;
     /**
      * The html autocomplete attribute of the text area.
      */
-    autocomplete: {
-        type: StringConstructor;
-        default: string;
+    readonly autocomplete: {
+        readonly type: StringConstructor;
+        readonly default: "off";
     };
     /**
      * If set to `true`, the text area is resizable in y-direction.
      */
-    resizable: {
-        type: BooleanConstructor;
-        default: boolean;
+    readonly resizable: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
     };
     /**
      * The initial height of the text area in terms of
      * how many text rows fit inside the text area.
      * The height can be change if {@link nTextAreaProps.resizable} is `true`
      */
-    rows: NumberConstructor;
+    readonly rows: NumberConstructor;
     /**
      * The maximum length of the input string. Entering longer strings are simply
      * prevented, but no error message is shown to the user.
      */
-    maxLength: NumberConstructor;
+    readonly maxLength: NumberConstructor;
     /**
      * If set to `true` the text area is disabled and no interaction is possible.
      */
-    disabled: BooleanConstructor;
+    readonly disabled: BooleanConstructor;
     /**
      * If set to `true` the text area's label is hidden.
      */
-    hideLabel: BooleanConstructor;
+    readonly hideLabel: BooleanConstructor;
     /**
      * This is called when the text area reveices focus.
      */
-    onFocus: PropType<() => void>;
+    readonly onFocus: PropType<() => void>;
     /**
      * This is called when the text area looses focus.
      */
-    onBlur: PropType<() => void>;
-    value: PropType<string>;
-    onUpdateValue: PropType<(newValue: string) => void>;
+    readonly onBlur: PropType<() => void>;
+    readonly value: PropType<string>;
+    readonly onUpdateValue: PropType<(newValue: string) => void>;
 }>> & {}, {
-    tooltipHide: boolean;
-    tooltipShow: boolean;
-    tooltipPlacement: import("./NTooltip").TooltipPlacement;
-    tooltipMaxWidth: import("../utils/tailwind").TWMaxWidth;
-    disabled: boolean;
-    error: boolean;
-    autocomplete: string;
-    hideLabel: boolean;
-    optional: boolean;
-    rules: import("../utils/validation").ValidationRule | import("../utils/validation").ValidationRule[];
-    hideErrorMessage: boolean;
-    disableBlurValidation: boolean;
-    resizable: boolean;
+    readonly tooltipHide: boolean;
+    readonly tooltipShow: boolean;
+    readonly tooltipPlacement: import("./NTooltip").TooltipPlacement;
+    readonly tooltipMaxWidth: import("../utils/tailwind").TWMaxWidth;
+    readonly disabled: boolean;
+    readonly error: boolean;
+    readonly autocomplete: string;
+    readonly hideLabel: boolean;
+    readonly optional: boolean;
+    readonly rules: import("../utils/validation").ValidationRule | import("../utils/validation").ValidationRule[];
+    readonly hideErrorMessage: boolean;
+    readonly disableBlurValidation: boolean;
+    readonly resizable: boolean;
 }>;
 export default _default;

package/components/NTextArea.js

@@ -1,11 +1,11 @@
 import { withDirectives as _withDirectives, vShow as _vShow, createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
-import { createComponent, createProps } from '../utils/component';
+import { createComponent } from '../utils/component';
 import { ref } from 'vue';
 import { ExclamationCircleIcon } from '@heroicons/vue/24/solid';
 import NTooltip, { mapTooltipProps, nToolTipPropsForImplementor } from './NTooltip';
 import { vModelProps } from '../utils/vModel';
 import NValInput, { validationProps } from './NValInput';
-const nTextAreaBaseProps = createProps({
+const nTextAreaBaseProps = {
   ...vModelProps(String),
   /**
    * The name of the text area. Is displayed as a label above the text area.
@@ -61,11 +61,11 @@ const nTextAreaBaseProps = createProps({
    */
   onBlur: Function,
   ...nToolTipPropsForImplementor
-});
-export const nTextAreaProps = createProps({
+};
+export const nTextAreaProps = {
   ...nTextAreaBaseProps,
   ...validationProps
-});
+};
 export default createComponent('NTextArea', nTextAreaProps, (props, context) => {
   const textAreaRef = ref();
   const exposed = {