@naptics/vue-collection 0.0.6 → 0.1.0

package/components/NFormModal.d.ts

@@ -5,57 +5,57 @@ export declare const nFormModalProps: {
     /**
      * The maximum width of the modal. A regular tailwind class.
      */
-    maxWidth: {
-        type: PropType<TWMaxWidth>;
-        default: string;
+    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.
      */
-    closeOnBackground: {
-        type: BooleanConstructor;
-        default: boolean;
+    readonly closeOnBackground: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
     };
     /**
      * The {@link ValidatedForm} to validate the inputs.
      * All inputs should be added to the form.
      */
-    form: PropType<ValidatedForm>;
-    hideHeader: BooleanConstructor;
-    hideFooter: BooleanConstructor;
-    hideX: BooleanConstructor;
-    title: StringConstructor;
-    okText: {
-        type: StringConstructor;
-        default: string;
-    };
-    okColor: {
-        type: StringConstructor;
-        default: string;
-    };
-    closeOnOk: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    hideOk: BooleanConstructor;
-    okDisabled: BooleanConstructor;
-    cancelText: {
-        type: StringConstructor;
-        default: string;
-    };
-    cancelColor: {
-        type: StringConstructor;
-        default: string;
-    };
-    hideCancel: BooleanConstructor;
-    onOk: PropType<() => void>;
-    onCancel: PropType<() => void>;
-    modal: PropType<(props: import("./NModal").ModalSlotProps) => JSX.Element>;
-    header: PropType<() => JSX.Element>;
-    footer: PropType<(props: import("./NModal").ModalSlotProps) => JSX.Element>;
-    value: PropType<boolean>;
-    onUpdateValue: PropType<(newValue: boolean) => void>;
+    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 header: PropType<() => JSX.Element>;
+    readonly footer: PropType<(props: import("./NModal").ModalSlotProps) => JSX.Element>;
+    readonly value: PropType<boolean>;
+    readonly onUpdateValue: PropType<(newValue: boolean) => void>;
 };
 /**
  * The `NFormModal` is a {@link NModal} with an integrated form.
@@ -66,125 +66,125 @@ declare const _default: import("vue").DefineComponent<{
     /**
      * The maximum width of the modal. A regular tailwind class.
      */
-    maxWidth: {
-        type: PropType<TWMaxWidth>;
-        default: string;
+    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.
      */
-    closeOnBackground: {
-        type: BooleanConstructor;
-        default: boolean;
+    readonly closeOnBackground: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
     };
     /**
      * The {@link ValidatedForm} to validate the inputs.
      * All inputs should be added to the form.
      */
-    form: PropType<ValidatedForm>;
-    hideHeader: BooleanConstructor;
-    hideFooter: BooleanConstructor;
-    hideX: BooleanConstructor;
-    title: StringConstructor;
-    okText: {
-        type: StringConstructor;
-        default: string;
-    };
-    okColor: {
-        type: StringConstructor;
-        default: string;
-    };
-    closeOnOk: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    hideOk: BooleanConstructor;
-    okDisabled: BooleanConstructor;
-    cancelText: {
-        type: StringConstructor;
-        default: string;
-    };
-    cancelColor: {
-        type: StringConstructor;
-        default: string;
-    };
-    hideCancel: BooleanConstructor;
-    onOk: PropType<() => void>;
-    onCancel: PropType<() => void>;
-    modal: PropType<(props: import("./NModal").ModalSlotProps) => JSX.Element>;
-    header: PropType<() => JSX.Element>;
-    footer: PropType<(props: import("./NModal").ModalSlotProps) => JSX.Element>;
-    value: PropType<boolean>;
-    onUpdateValue: PropType<(newValue: boolean) => void>;
+    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 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.
      */
-    maxWidth: {
-        type: PropType<TWMaxWidth>;
-        default: string;
+    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.
      */
-    closeOnBackground: {
-        type: BooleanConstructor;
-        default: boolean;
+    readonly closeOnBackground: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
     };
     /**
      * The {@link ValidatedForm} to validate the inputs.
      * All inputs should be added to the form.
      */
-    form: PropType<ValidatedForm>;
-    hideHeader: BooleanConstructor;
-    hideFooter: BooleanConstructor;
-    hideX: BooleanConstructor;
-    title: StringConstructor;
-    okText: {
-        type: StringConstructor;
-        default: string;
-    };
-    okColor: {
-        type: StringConstructor;
-        default: string;
-    };
-    closeOnOk: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    hideOk: BooleanConstructor;
-    okDisabled: BooleanConstructor;
-    cancelText: {
-        type: StringConstructor;
-        default: string;
-    };
-    cancelColor: {
-        type: StringConstructor;
-        default: string;
-    };
-    hideCancel: BooleanConstructor;
-    onOk: PropType<() => void>;
-    onCancel: PropType<() => void>;
-    modal: PropType<(props: import("./NModal").ModalSlotProps) => JSX.Element>;
-    header: PropType<() => JSX.Element>;
-    footer: PropType<(props: import("./NModal").ModalSlotProps) => JSX.Element>;
-    value: PropType<boolean>;
-    onUpdateValue: PropType<(newValue: boolean) => void>;
+    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 header: PropType<() => JSX.Element>;
+    readonly footer: PropType<(props: import("./NModal").ModalSlotProps) => JSX.Element>;
+    readonly value: PropType<boolean>;
+    readonly onUpdateValue: PropType<(newValue: boolean) => void>;
 }>> & {}, {
-    maxWidth: TWMaxWidth;
-    hideX: boolean;
-    hideHeader: boolean;
-    hideFooter: boolean;
-    okText: string;
-    okColor: string;
-    closeOnOk: boolean;
-    hideOk: boolean;
-    okDisabled: boolean;
-    cancelText: string;
-    cancelColor: string;
-    closeOnBackground: boolean;
-    hideCancel: boolean;
+    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;
 }>;
 export default _default;

package/components/NFormModal.js

@@ -1,9 +1,9 @@
 import { createVNode as _createVNode } from "vue";
-import { createComponent, createProps } from '../utils/component';
+import { createComponent } from '../utils/component';
 import { reactive, toRefs } from 'vue';
 import NForm from './NForm';
 import NModal, { nModalProps } from './NModal';
-export const nFormModalProps = createProps({
+export const nFormModalProps = {
   ...nModalProps,
   /**
    * The maximum width of the modal. A regular tailwind class.
@@ -25,7 +25,7 @@ export const nFormModalProps = createProps({
    * All inputs should be added to the form.
    */
   form: Object
-});
+};
 /**
  * The `NFormModal` is a {@link NModal} with an integrated form.
  * When submitting a `NFormModal` the form is first validated and

package/components/NIconButton.d.ts

@@ -1,202 +1,208 @@
-import type { HeroIcon } from '../utils/utils';
+import type { HeroIcon } from '../utils/tailwind';
 import type { PropType } from 'vue';
 import { type RouteLocationRaw } from 'vue-router';
 export declare const nIconButtonProps: {
-    tooltipText: StringConstructor;
-    tooltipContent: PropType<() => void>;
-    tooltipHide: BooleanConstructor;
-    tooltipShow: BooleanConstructor;
-    tooltipPlacement: {
-        type: PropType<import("./NTooltip").TooltipPlacement>;
-        default: string;
+    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";
     };
-    tooltipMaxWidth: {
-        type: PropType<import("../utils/tailwind").TWMaxWidth>;
-        default: string;
+    readonly tooltipMaxWidth: {
+        readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
+        readonly default: "max-w-xs";
     };
     /**
      * The icon of the icon-button.
      */
-    icon: {
-        type: PropType<HeroIcon>;
-        required: true;
+    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}.
      */
-    route: PropType<RouteLocationRaw>;
+    readonly route: PropType<RouteLocationRaw>;
     /**
      * The color of the icon-button.
      */
-    color: {
-        type: StringConstructor;
-        default: string;
+    readonly color: {
+        readonly type: StringConstructor;
+        readonly default: "default";
     };
     /**
      * The shade of the icon-button.
      */
-    shade: {
-        type: NumberConstructor;
-        default: number;
+    readonly shade: {
+        readonly type: NumberConstructor;
+        readonly default: 500;
     };
     /**
      * The size of the icon in tailwind-units.
      */
-    size: {
-        type: NumberConstructor;
-        default: number;
+    readonly size: {
+        readonly type: NumberConstructor;
+        readonly default: 5;
     };
     /**
      * 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";
     };
     /**
      * If set to `true` the icon-button is disabled and no interaction is possible.
      */
-    disabled: BooleanConstructor;
+    readonly disabled: BooleanConstructor;
     /**
      * This is called when the icon-button is clicked.
      * It is only called when the `route` prop is not set on the icon-button.
      */
-    onClick: PropType<() => void>;
+    readonly onClick: PropType<() => void>;
 };
 /**
  * The `NIconButton` is a regular button which does not have any text but an icon instead.
  */
 declare const _default: import("vue").DefineComponent<{
-    tooltipText: StringConstructor;
-    tooltipContent: PropType<() => void>;
-    tooltipHide: BooleanConstructor;
-    tooltipShow: BooleanConstructor;
-    tooltipPlacement: {
-        type: PropType<import("./NTooltip").TooltipPlacement>;
-        default: string;
+    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";
     };
-    tooltipMaxWidth: {
-        type: PropType<import("../utils/tailwind").TWMaxWidth>;
-        default: string;
+    readonly tooltipMaxWidth: {
+        readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
+        readonly default: "max-w-xs";
     };
     /**
      * The icon of the icon-button.
      */
-    icon: {
-        type: PropType<HeroIcon>;
-        required: true;
+    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}.
      */
-    route: PropType<RouteLocationRaw>;
+    readonly route: PropType<RouteLocationRaw>;
     /**
      * The color of the icon-button.
      */
-    color: {
-        type: StringConstructor;
-        default: string;
+    readonly color: {
+        readonly type: StringConstructor;
+        readonly default: "default";
     };
     /**
      * The shade of the icon-button.
      */
-    shade: {
-        type: NumberConstructor;
-        default: number;
+    readonly shade: {
+        readonly type: NumberConstructor;
+        readonly default: 500;
     };
     /**
      * The size of the icon in tailwind-units.
      */
-    size: {
-        type: NumberConstructor;
-        default: number;
+    readonly size: {
+        readonly type: NumberConstructor;
+        readonly default: 5;
     };
     /**
      * 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";
     };
     /**
      * If set to `true` the icon-button is disabled and no interaction is possible.
      */
-    disabled: BooleanConstructor;
+    readonly disabled: BooleanConstructor;
     /**
      * This is called when the icon-button is clicked.
      * It is only called when the `route` prop is not set on the icon-button.
      */
-    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<{
-    tooltipText: StringConstructor;
-    tooltipContent: PropType<() => void>;
-    tooltipHide: BooleanConstructor;
-    tooltipShow: BooleanConstructor;
-    tooltipPlacement: {
-        type: PropType<import("./NTooltip").TooltipPlacement>;
-        default: string;
+    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";
     };
-    tooltipMaxWidth: {
-        type: PropType<import("../utils/tailwind").TWMaxWidth>;
-        default: string;
+    readonly tooltipMaxWidth: {
+        readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
+        readonly default: "max-w-xs";
     };
     /**
      * The icon of the icon-button.
      */
-    icon: {
-        type: PropType<HeroIcon>;
-        required: true;
+    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}.
      */
-    route: PropType<RouteLocationRaw>;
+    readonly route: PropType<RouteLocationRaw>;
     /**
      * The color of the icon-button.
      */
-    color: {
-        type: StringConstructor;
-        default: string;
+    readonly color: {
+        readonly type: StringConstructor;
+        readonly default: "default";
     };
     /**
      * The shade of the icon-button.
      */
-    shade: {
-        type: NumberConstructor;
-        default: number;
+    readonly shade: {
+        readonly type: NumberConstructor;
+        readonly default: 500;
     };
     /**
      * The size of the icon in tailwind-units.
      */
-    size: {
-        type: NumberConstructor;
-        default: number;
+    readonly size: {
+        readonly type: NumberConstructor;
+        readonly default: 5;
     };
     /**
      * 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";
     };
     /**
      * If set to `true` the icon-button is disabled and no interaction is possible.
      */
-    disabled: BooleanConstructor;
+    readonly disabled: BooleanConstructor;
     /**
      * This is called when the icon-button is clicked.
      * It is only called when the `route` prop is not set on the icon-button.
      */
-    onClick: PropType<() => void>;
+    readonly onClick: PropType<() => void>;
 }>> & {}, {
-    color: string;
-    type: "button" | "submit" | "reset";
-    shade: number;
-    size: number;
-    tooltipHide: boolean;
-    tooltipShow: boolean;
-    tooltipPlacement: import("./NTooltip").TooltipPlacement;
-    tooltipMaxWidth: import("../utils/tailwind").TWMaxWidth;
-    disabled: boolean;
+    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;
 }>;
 export default _default;

package/components/NIconButton.js

@@ -1,12 +1,12 @@
 import { isVNode as _isVNode, createVNode as _createVNode } from "vue";
-import { createComponent, createProps } from '../utils/component';
+import { createComponent } from '../utils/component';
 import { RouterLink } from 'vue-router';
 import { nButtonProps } from './NButton';
 import NTooltip, { mapTooltipProps, nToolTipPropsForImplementor } from './NTooltip';
 function _isSlot(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
 }
-export const nIconButtonProps = createProps({
+export const nIconButtonProps = {
   /**
    * The icon of the icon-button.
    */
@@ -53,7 +53,7 @@ export const nIconButtonProps = createProps({
    */
   onClick: Function,
   ...nToolTipPropsForImplementor
-});
+};
 /**
  * The `NIconButton` is a regular button which does not have any text but an icon instead.
  */