@naptics/vue-collection 0.0.5 → 0.0.7

package/components/NIconCircle.d.ts

@@ -1,45 +1,45 @@
-import type { HeroIcon } from '../utils/utils';
+import type { HeroIcon } from '../utils/tailwind';
 import type { PropType } from 'vue';
 export declare const nIconCircleProps: {
     /**
      * The icon of the icon-circle.
      */
-    icon: {
-        type: PropType<HeroIcon>;
-        required: true;
+    readonly icon: {
+        readonly type: PropType<HeroIcon>;
+        readonly required: true;
     };
     /**
      * The color of the icon-circle.
      */
-    color: {
-        type: StringConstructor;
-        default: string;
+    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.
      */
-    circleSize: NumberConstructor;
+    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.
      */
-    iconSize: NumberConstructor;
+    readonly iconSize: NumberConstructor;
     /**
      * The shade of the icon.
      */
-    iconShade: {
-        type: NumberConstructor;
-        default: number;
+    readonly iconShade: {
+        readonly type: NumberConstructor;
+        readonly default: 600;
     };
     /**
      * The shade of the background.
      */
-    bgShade: {
-        type: NumberConstructor;
-        default: number;
+    readonly bgShade: {
+        readonly type: NumberConstructor;
+        readonly default: 100;
     };
 };
 /**
@@ -49,87 +49,87 @@ declare const _default: import("vue").DefineComponent<{
     /**
      * The icon of the icon-circle.
      */
-    icon: {
-        type: PropType<HeroIcon>;
-        required: true;
+    readonly icon: {
+        readonly type: PropType<HeroIcon>;
+        readonly required: true;
     };
     /**
      * The color of the icon-circle.
      */
-    color: {
-        type: StringConstructor;
-        default: string;
+    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.
      */
-    circleSize: NumberConstructor;
+    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.
      */
-    iconSize: NumberConstructor;
+    readonly iconSize: NumberConstructor;
     /**
      * The shade of the icon.
      */
-    iconShade: {
-        type: NumberConstructor;
-        default: number;
+    readonly iconShade: {
+        readonly type: NumberConstructor;
+        readonly default: 600;
     };
     /**
      * The shade of the background.
      */
-    bgShade: {
-        type: NumberConstructor;
-        default: number;
+    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.
      */
-    icon: {
-        type: PropType<HeroIcon>;
-        required: true;
+    readonly icon: {
+        readonly type: PropType<HeroIcon>;
+        readonly required: true;
     };
     /**
      * The color of the icon-circle.
      */
-    color: {
-        type: StringConstructor;
-        default: string;
+    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.
      */
-    circleSize: NumberConstructor;
+    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.
      */
-    iconSize: NumberConstructor;
+    readonly iconSize: NumberConstructor;
     /**
      * The shade of the icon.
      */
-    iconShade: {
-        type: NumberConstructor;
-        default: number;
+    readonly iconShade: {
+        readonly type: NumberConstructor;
+        readonly default: 600;
     };
     /**
      * The shade of the background.
      */
-    bgShade: {
-        type: NumberConstructor;
-        default: number;
+    readonly bgShade: {
+        readonly type: NumberConstructor;
+        readonly default: 100;
     };
 }>> & {}, {
-    color: string;
-    iconShade: number;
-    bgShade: number;
+    readonly color: string;
+    readonly iconShade: number;
+    readonly bgShade: number;
 }>;
 export default _default;

package/components/NIconCircle.js

@@ -1,6 +1,6 @@
 import { createVNode as _createVNode } from "vue";
-import { createComponent, createProps } from '../utils/component';
-export const nIconCircleProps = createProps({
+import { createComponent } from '../utils/component';
+export const nIconCircleProps = {
   /**
    * The icon of the icon-circle.
    */
@@ -41,7 +41,7 @@ export const nIconCircleProps = createProps({
     type: Number,
     default: 100
   }
-});
+};
 const DEFAULT_CIRCLE_SIZE = 16;
 const SCALING_FACTOR = 0.55;
 /**

package/components/NInput.d.ts

@@ -1,74 +1,74 @@
 import { type PropType } from 'vue';
 import './NInput.css';
 export declare const nInputProps: {
-    tooltipText: StringConstructor;
-    tooltipContent: PropType<() => void>;
-    tooltipHide: BooleanConstructor;
-    tooltipShow: BooleanConstructor;
-    tooltipPlacement: {
-        type: PropType<import("./NTooltip").TooltipPlacement>;
-        default: string;
+    readonly tooltipText: StringConstructor;
+    readonly tooltipContent: PropType<() => void>;
+    readonly tooltipHide: BooleanConstructor;
+    readonly tooltipShow: BooleanConstructor;
+    readonly tooltipPlacement: {
+        readonly type: PropType<import("./NTooltip").TooltipPlacement>;
+        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 name of the input. Is displayed as a label above the input.
      */
-    name: StringConstructor;
+    readonly name: StringConstructor;
     /**
      * The placeholder of the input.
      */
-    placeholder: StringConstructor;
+    readonly placeholder: StringConstructor;
     /**
      * The html autocomplete attribute of the input.
      */
-    autocomplete: {
-        type: StringConstructor;
-        default: string;
+    readonly autocomplete: {
+        readonly type: StringConstructor;
+        readonly default: "off";
     };
     /**
      * The html type attribute of the input.
      */
-    type: {
-        type: StringConstructor;
-        default: string;
+    readonly type: {
+        readonly type: StringConstructor;
+        readonly default: "text";
     };
     /**
      * The maximum value of the input.
      */
-    max: StringConstructor;
+    readonly max: StringConstructor;
     /**
      * The minimum value of the input.
      */
-    min: StringConstructor;
+    readonly min: StringConstructor;
     /**
      * If set to `true` the input is displayed with a red border.
      */
-    error: BooleanConstructor;
+    readonly error: BooleanConstructor;
     /**
      * If set to `true` the input is disabled and no interaction is possible.
      */
-    disabled: BooleanConstructor;
+    readonly disabled: BooleanConstructor;
     /**
      * If set to `true` the input is displayed smaller.
      */
-    small: BooleanConstructor;
+    readonly small: BooleanConstructor;
     /**
      * If set to `true` the input's label is hidden.
      */
-    hideLabel: BooleanConstructor;
+    readonly hideLabel: BooleanConstructor;
     /**
      * This is called when the input reveices focus.
      */
-    onFocus: PropType<() => void>;
+    readonly onFocus: PropType<() => void>;
     /**
      * This is called when the input 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 NInputExposed = {
     /**
@@ -80,153 +80,153 @@ 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<{
-    tooltipText: StringConstructor;
-    tooltipContent: PropType<() => void>;
-    tooltipHide: BooleanConstructor;
-    tooltipShow: BooleanConstructor;
-    tooltipPlacement: {
-        type: PropType<import("./NTooltip").TooltipPlacement>;
-        default: string;
+    readonly tooltipText: StringConstructor;
+    readonly tooltipContent: PropType<() => void>;
+    readonly tooltipHide: BooleanConstructor;
+    readonly tooltipShow: BooleanConstructor;
+    readonly tooltipPlacement: {
+        readonly type: PropType<import("./NTooltip").TooltipPlacement>;
+        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 name of the input. Is displayed as a label above the input.
      */
-    name: StringConstructor;
+    readonly name: StringConstructor;
     /**
      * The placeholder of the input.
      */
-    placeholder: StringConstructor;
+    readonly placeholder: StringConstructor;
     /**
      * The html autocomplete attribute of the input.
      */
-    autocomplete: {
-        type: StringConstructor;
-        default: string;
+    readonly autocomplete: {
+        readonly type: StringConstructor;
+        readonly default: "off";
     };
     /**
      * The html type attribute of the input.
      */
-    type: {
-        type: StringConstructor;
-        default: string;
+    readonly type: {
+        readonly type: StringConstructor;
+        readonly default: "text";
     };
     /**
      * The maximum value of the input.
      */
-    max: StringConstructor;
+    readonly max: StringConstructor;
     /**
      * The minimum value of the input.
      */
-    min: StringConstructor;
+    readonly min: StringConstructor;
     /**
      * If set to `true` the input is displayed with a red border.
      */
-    error: BooleanConstructor;
+    readonly error: BooleanConstructor;
     /**
      * If set to `true` the input is disabled and no interaction is possible.
      */
-    disabled: BooleanConstructor;
+    readonly disabled: BooleanConstructor;
     /**
      * If set to `true` the input is displayed smaller.
      */
-    small: BooleanConstructor;
+    readonly small: BooleanConstructor;
     /**
      * If set to `true` the input's label is hidden.
      */
-    hideLabel: BooleanConstructor;
+    readonly hideLabel: BooleanConstructor;
     /**
      * This is called when the input reveices focus.
      */
-    onFocus: PropType<() => void>;
+    readonly onFocus: PropType<() => void>;
     /**
      * This is called when the input 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<{
-    tooltipText: StringConstructor;
-    tooltipContent: PropType<() => void>;
-    tooltipHide: BooleanConstructor;
-    tooltipShow: BooleanConstructor;
-    tooltipPlacement: {
-        type: PropType<import("./NTooltip").TooltipPlacement>;
-        default: string;
+    readonly tooltipText: StringConstructor;
+    readonly tooltipContent: PropType<() => void>;
+    readonly tooltipHide: BooleanConstructor;
+    readonly tooltipShow: BooleanConstructor;
+    readonly tooltipPlacement: {
+        readonly type: PropType<import("./NTooltip").TooltipPlacement>;
+        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 name of the input. Is displayed as a label above the input.
      */
-    name: StringConstructor;
+    readonly name: StringConstructor;
     /**
      * The placeholder of the input.
      */
-    placeholder: StringConstructor;
+    readonly placeholder: StringConstructor;
     /**
      * The html autocomplete attribute of the input.
      */
-    autocomplete: {
-        type: StringConstructor;
-        default: string;
+    readonly autocomplete: {
+        readonly type: StringConstructor;
+        readonly default: "off";
     };
     /**
      * The html type attribute of the input.
      */
-    type: {
-        type: StringConstructor;
-        default: string;
+    readonly type: {
+        readonly type: StringConstructor;
+        readonly default: "text";
     };
     /**
      * The maximum value of the input.
      */
-    max: StringConstructor;
+    readonly max: StringConstructor;
     /**
      * The minimum value of the input.
      */
-    min: StringConstructor;
+    readonly min: StringConstructor;
     /**
      * If set to `true` the input is displayed with a red border.
      */
-    error: BooleanConstructor;
+    readonly error: BooleanConstructor;
     /**
      * If set to `true` the input is disabled and no interaction is possible.
      */
-    disabled: BooleanConstructor;
+    readonly disabled: BooleanConstructor;
     /**
      * If set to `true` the input is displayed smaller.
      */
-    small: BooleanConstructor;
+    readonly small: BooleanConstructor;
     /**
      * If set to `true` the input's label is hidden.
      */
-    hideLabel: BooleanConstructor;
+    readonly hideLabel: BooleanConstructor;
     /**
      * This is called when the input reveices focus.
      */
-    onFocus: PropType<() => void>;
+    readonly onFocus: PropType<() => void>;
     /**
      * This is called when the input 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>;
 }>> & {}, {
-    small: boolean;
-    type: string;
-    tooltipHide: boolean;
-    tooltipShow: boolean;
-    tooltipPlacement: import("./NTooltip").TooltipPlacement;
-    tooltipMaxWidth: import("../utils/tailwind").TWMaxWidth;
-    disabled: boolean;
-    error: boolean;
-    autocomplete: string;
-    hideLabel: boolean;
+    readonly small: boolean;
+    readonly type: string;
+    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;
 }>;
 export default _default;

package/components/NInput.js

@@ -1,11 +1,11 @@
 import { mergeProps as _mergeProps, withDirectives as _withDirectives, vShow as _vShow, createVNode as _createVNode } 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 './NInput.css';
 import { vModelProps } from '../utils/vModel';
-export const nInputProps = createProps({
+export const nInputProps = {
   ...vModelProps(String),
   /**
    * The name of the input. Is displayed as a label above the input.
@@ -62,7 +62,7 @@ export const nInputProps = createProps({
    */
   onBlur: Function,
   ...nToolTipPropsForImplementor
-});
+};
 /**
  * The base class of inputs. A styled input with a lot of configuration possibilities but no validation.
  */