@naptics/vue-collection 0.0.6 → 0.0.7

package/README.md

@@ -60,7 +60,7 @@ const smallSizes = '1|2|3|4|5|6|7|8|9|10|11|12|14|16|18|20'
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-    content: ['./src/**/*.{tsx,ts}', './node_modules/@naptics/vue-collection/**/*.{jsx,js}'],
+    content: ['./src/**/*.{tsx,ts}', './node_modules/@naptics/vue-collection/**/*.js'],
     safelist: [
         {
             pattern: new RegExp(`^(bg|text)-(${usedColors})-(${allShades})$`),

package/components/NAlert.d.ts

@@ -4,22 +4,22 @@ export declare const nAlertProps: {
     /**
      * The variant of the alert. This defines its color and icon.
      */
-    variant: {
-        type: PropType<AlertVariant>;
-        default: string;
+    readonly variant: {
+        readonly type: PropType<AlertVariant>;
+        readonly default: "success";
     };
     /**
      * The text of the alert.
      */
-    text: StringConstructor;
+    readonly text: StringConstructor;
     /**
      * If set to `true` the X-button of the alert is hidden.
      */
-    hideX: BooleanConstructor;
+    readonly hideX: BooleanConstructor;
     /**
      * This is called, when the X-button is clicked.
      */
-    onDismiss: PropType<() => void>;
+    readonly onDismiss: PropType<() => void>;
 };
 /**
  * The `NAlert` is a fully styled alert with multiple variants.
@@ -29,44 +29,44 @@ declare const _default: import("vue").DefineComponent<{
     /**
      * The variant of the alert. This defines its color and icon.
      */
-    variant: {
-        type: PropType<AlertVariant>;
-        default: string;
+    readonly variant: {
+        readonly type: PropType<AlertVariant>;
+        readonly default: "success";
     };
     /**
      * The text of the alert.
      */
-    text: StringConstructor;
+    readonly text: StringConstructor;
     /**
      * If set to `true` the X-button of the alert is hidden.
      */
-    hideX: BooleanConstructor;
+    readonly hideX: BooleanConstructor;
     /**
      * This is called, when the X-button is clicked.
      */
-    onDismiss: PropType<() => void>;
+    readonly onDismiss: 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 variant of the alert. This defines its color and icon.
      */
-    variant: {
-        type: PropType<AlertVariant>;
-        default: string;
+    readonly variant: {
+        readonly type: PropType<AlertVariant>;
+        readonly default: "success";
     };
     /**
      * The text of the alert.
      */
-    text: StringConstructor;
+    readonly text: StringConstructor;
     /**
      * If set to `true` the X-button of the alert is hidden.
      */
-    hideX: BooleanConstructor;
+    readonly hideX: BooleanConstructor;
     /**
      * This is called, when the X-button is clicked.
      */
-    onDismiss: PropType<() => void>;
+    readonly onDismiss: PropType<() => void>;
 }>> & {}, {
-    variant: AlertVariant;
-    hideX: boolean;
+    readonly variant: AlertVariant;
+    readonly hideX: boolean;
 }>;
 export default _default;

package/components/NAlert.js

@@ -1,10 +1,10 @@
 import { createVNode as _createVNode } from "vue";
-import { createComponent, createProps } from '../utils/component';
+import { createComponent } from '../utils/component';
 import { CheckCircleIcon, ExclamationCircleIcon, InformationCircleIcon, XMarkIcon } from '@heroicons/vue/24/solid';
 import { computed } from 'vue';
 import NIconButton from './NIconButton';
 import NLoadingIndicator from './NLoadingIndicator';
-export const nAlertProps = createProps({
+export const nAlertProps = {
   /**
    * The variant of the alert. This defines its color and icon.
    */
@@ -24,7 +24,7 @@ export const nAlertProps = createProps({
    * This is called, when the X-button is clicked.
    */
   onDismiss: Function
-});
+};
 /**
  * The `NAlert` is a fully styled alert with multiple variants.
  * It can be used as a normal blocking element or as part of an alert queue.

package/components/NBadge.d.ts

@@ -1,174 +1,174 @@
 import type { TWTextSize } from '../utils/tailwind';
 import type { PropType } from 'vue';
 export declare const nBadgeProps: {
-    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 text of the badge. Can alternatively be passed in the default slot.
      */
-    text: StringConstructor;
+    readonly text: StringConstructor;
     /**
      * The text size, a standard tailwind text-size class.
      */
-    textSize: {
-        type: PropType<TWTextSize>;
-        default: string;
+    readonly textSize: {
+        readonly type: PropType<TWTextSize>;
+        readonly default: "text-sm";
     };
     /**
      * The color of the badge.
      */
-    color: {
-        type: StringConstructor;
-        default: string;
+    readonly color: {
+        readonly type: StringConstructor;
+        readonly default: "primary";
     };
     /**
      * The background shade of the badge.
      */
-    shade: {
-        type: NumberConstructor;
-        default: number;
+    readonly shade: {
+        readonly type: NumberConstructor;
+        readonly default: 200;
     };
     /**
      * The text shade of the badge.
      */
-    textShade: {
-        type: NumberConstructor;
-        default: number;
+    readonly textShade: {
+        readonly type: NumberConstructor;
+        readonly default: 900;
     };
     /**
      * If set to `true` the badges text is all-caps. Default is `true`.
      */
-    allCaps: {
-        type: BooleanConstructor;
-        default: boolean;
+    readonly allCaps: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
     };
 };
 /**
  * The `NBadge` is a styled element to wrap a text.
  */
 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 text of the badge. Can alternatively be passed in the default slot.
      */
-    text: StringConstructor;
+    readonly text: StringConstructor;
     /**
      * The text size, a standard tailwind text-size class.
      */
-    textSize: {
-        type: PropType<TWTextSize>;
-        default: string;
+    readonly textSize: {
+        readonly type: PropType<TWTextSize>;
+        readonly default: "text-sm";
     };
     /**
      * The color of the badge.
      */
-    color: {
-        type: StringConstructor;
-        default: string;
+    readonly color: {
+        readonly type: StringConstructor;
+        readonly default: "primary";
     };
     /**
      * The background shade of the badge.
      */
-    shade: {
-        type: NumberConstructor;
-        default: number;
+    readonly shade: {
+        readonly type: NumberConstructor;
+        readonly default: 200;
     };
     /**
      * The text shade of the badge.
      */
-    textShade: {
-        type: NumberConstructor;
-        default: number;
+    readonly textShade: {
+        readonly type: NumberConstructor;
+        readonly default: 900;
     };
     /**
      * If set to `true` the badges text is all-caps. Default is `true`.
      */
-    allCaps: {
-        type: BooleanConstructor;
-        default: boolean;
+    readonly allCaps: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
     };
 }, 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 text of the badge. Can alternatively be passed in the default slot.
      */
-    text: StringConstructor;
+    readonly text: StringConstructor;
     /**
      * The text size, a standard tailwind text-size class.
      */
-    textSize: {
-        type: PropType<TWTextSize>;
-        default: string;
+    readonly textSize: {
+        readonly type: PropType<TWTextSize>;
+        readonly default: "text-sm";
     };
     /**
      * The color of the badge.
      */
-    color: {
-        type: StringConstructor;
-        default: string;
+    readonly color: {
+        readonly type: StringConstructor;
+        readonly default: "primary";
     };
     /**
      * The background shade of the badge.
      */
-    shade: {
-        type: NumberConstructor;
-        default: number;
+    readonly shade: {
+        readonly type: NumberConstructor;
+        readonly default: 200;
     };
     /**
      * The text shade of the badge.
      */
-    textShade: {
-        type: NumberConstructor;
-        default: number;
+    readonly textShade: {
+        readonly type: NumberConstructor;
+        readonly default: 900;
     };
     /**
      * If set to `true` the badges text is all-caps. Default is `true`.
      */
-    allCaps: {
-        type: BooleanConstructor;
-        default: boolean;
+    readonly allCaps: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
     };
 }>> & {}, {
-    color: string;
-    shade: number;
-    tooltipHide: boolean;
-    tooltipShow: boolean;
-    tooltipPlacement: import("./NTooltip").TooltipPlacement;
-    tooltipMaxWidth: import("../utils/tailwind").TWMaxWidth;
-    textSize: TWTextSize;
-    textShade: number;
-    allCaps: boolean;
+    readonly color: string;
+    readonly shade: number;
+    readonly tooltipHide: boolean;
+    readonly tooltipShow: boolean;
+    readonly tooltipPlacement: import("./NTooltip").TooltipPlacement;
+    readonly tooltipMaxWidth: import("../utils/tailwind").TWMaxWidth;
+    readonly textSize: TWTextSize;
+    readonly textShade: number;
+    readonly allCaps: boolean;
 }>;
 export default _default;

package/components/NBadge.js

@@ -1,7 +1,7 @@
 import { createVNode as _createVNode } from "vue";
-import { createComponent, createProps } from '../utils/component';
+import { createComponent } from '../utils/component';
 import NTooltip, { mapTooltipProps, nToolTipPropsForImplementor } from './NTooltip';
-export const nBadgeProps = createProps({
+export const nBadgeProps = {
   /**
    * The text of the badge. Can alternatively be passed in the default slot.
    */
@@ -42,7 +42,7 @@ export const nBadgeProps = createProps({
     default: true
   },
   ...nToolTipPropsForImplementor
-});
+};
 /**
  * The `NBadge` is a styled element to wrap a text.
  */

package/components/NBreadcrub.d.ts

@@ -1,4 +1,4 @@
-import type { HeroIcon } from '../utils/utils';
+import type { HeroIcon } from '../utils/tailwind';
 import type { TWTextSize } from '../utils/tailwind';
 import type { PropType } from 'vue';
 import type { RouteLocationRaw } from 'vue-router';
@@ -6,47 +6,47 @@ export declare const nBreadcrumbProps: {
     /**
      * The items of the breadcrumb.
      */
-    items: {
-        type: PropType<BreadcrumbItem[]>;
-        default: () => never[];
+    readonly items: {
+        readonly type: PropType<BreadcrumbItem[]>;
+        readonly default: () => never[];
     };
     /**
      * The color of the breadcrumbs text and icons.
      */
-    color: {
-        type: StringConstructor;
-        default: string;
+    readonly color: {
+        readonly type: StringConstructor;
+        readonly default: "primary";
     };
     /**
      * The text-size of the breadcrumb labels.
      */
-    textSize: {
-        type: PropType<TWTextSize>;
-        default: string;
+    readonly textSize: {
+        readonly type: PropType<TWTextSize>;
+        readonly default: "text-base";
     };
     /**
      * The icon which is used as a seperator between two breadcrumb items.
      */
-    icon: {
-        type: PropType<HeroIcon>;
-        default: import("vue").FunctionalComponent<import("vue").HTMLAttributes & import("vue").VNodeProps, {}>;
+    readonly icon: {
+        readonly type: PropType<HeroIcon>;
+        readonly default: import("vue").FunctionalComponent<import("vue").HTMLAttributes & import("vue").VNodeProps, {}>;
     };
     /**
      * The size of the icon in tailwind units.
      */
-    iconSize: {
-        type: NumberConstructor;
-        default: number;
+    readonly iconSize: {
+        readonly type: NumberConstructor;
+        readonly default: 5;
     };
     /**
      * A slot the replace the breadcrumb labels.
      */
-    item: PropType<(item: BreadcrumbItem, index: number) => JSX.Element>;
+    readonly item: PropType<(item: BreadcrumbItem, index: number) => JSX.Element>;
     /**
      * A slot to replace the separators between the breadcrumb labels.
      * The passsed item is the item before the seperator.
      */
-    seperator: PropType<(item: BreadcrumbItem, index: number) => JSX.Element>;
+    readonly seperator: PropType<(item: BreadcrumbItem, index: number) => JSX.Element>;
 };
 export type BreadcrumbItem = {
     /**
@@ -65,97 +65,97 @@ declare const _default: import("vue").DefineComponent<{
     /**
      * The items of the breadcrumb.
      */
-    items: {
-        type: PropType<BreadcrumbItem[]>;
-        default: () => never[];
+    readonly items: {
+        readonly type: PropType<BreadcrumbItem[]>;
+        readonly default: () => never[];
     };
     /**
      * The color of the breadcrumbs text and icons.
      */
-    color: {
-        type: StringConstructor;
-        default: string;
+    readonly color: {
+        readonly type: StringConstructor;
+        readonly default: "primary";
     };
     /**
      * The text-size of the breadcrumb labels.
      */
-    textSize: {
-        type: PropType<TWTextSize>;
-        default: string;
+    readonly textSize: {
+        readonly type: PropType<TWTextSize>;
+        readonly default: "text-base";
     };
     /**
      * The icon which is used as a seperator between two breadcrumb items.
      */
-    icon: {
-        type: PropType<HeroIcon>;
-        default: import("vue").FunctionalComponent<import("vue").HTMLAttributes & import("vue").VNodeProps, {}>;
+    readonly icon: {
+        readonly type: PropType<HeroIcon>;
+        readonly default: import("vue").FunctionalComponent<import("vue").HTMLAttributes & import("vue").VNodeProps, {}>;
     };
     /**
      * The size of the icon in tailwind units.
      */
-    iconSize: {
-        type: NumberConstructor;
-        default: number;
+    readonly iconSize: {
+        readonly type: NumberConstructor;
+        readonly default: 5;
     };
     /**
      * A slot the replace the breadcrumb labels.
      */
-    item: PropType<(item: BreadcrumbItem, index: number) => JSX.Element>;
+    readonly item: PropType<(item: BreadcrumbItem, index: number) => JSX.Element>;
     /**
      * A slot to replace the separators between the breadcrumb labels.
      * The passsed item is the item before the seperator.
      */
-    seperator: PropType<(item: BreadcrumbItem, index: number) => JSX.Element>;
+    readonly seperator: PropType<(item: BreadcrumbItem, index: number) => 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 items of the breadcrumb.
      */
-    items: {
-        type: PropType<BreadcrumbItem[]>;
-        default: () => never[];
+    readonly items: {
+        readonly type: PropType<BreadcrumbItem[]>;
+        readonly default: () => never[];
     };
     /**
      * The color of the breadcrumbs text and icons.
      */
-    color: {
-        type: StringConstructor;
-        default: string;
+    readonly color: {
+        readonly type: StringConstructor;
+        readonly default: "primary";
     };
     /**
      * The text-size of the breadcrumb labels.
      */
-    textSize: {
-        type: PropType<TWTextSize>;
-        default: string;
+    readonly textSize: {
+        readonly type: PropType<TWTextSize>;
+        readonly default: "text-base";
     };
     /**
      * The icon which is used as a seperator between two breadcrumb items.
      */
-    icon: {
-        type: PropType<HeroIcon>;
-        default: import("vue").FunctionalComponent<import("vue").HTMLAttributes & import("vue").VNodeProps, {}>;
+    readonly icon: {
+        readonly type: PropType<HeroIcon>;
+        readonly default: import("vue").FunctionalComponent<import("vue").HTMLAttributes & import("vue").VNodeProps, {}>;
     };
     /**
      * The size of the icon in tailwind units.
      */
-    iconSize: {
-        type: NumberConstructor;
-        default: number;
+    readonly iconSize: {
+        readonly type: NumberConstructor;
+        readonly default: 5;
     };
     /**
      * A slot the replace the breadcrumb labels.
      */
-    item: PropType<(item: BreadcrumbItem, index: number) => JSX.Element>;
+    readonly item: PropType<(item: BreadcrumbItem, index: number) => JSX.Element>;
     /**
      * A slot to replace the separators between the breadcrumb labels.
      * The passsed item is the item before the seperator.
      */
-    seperator: PropType<(item: BreadcrumbItem, index: number) => JSX.Element>;
+    readonly seperator: PropType<(item: BreadcrumbItem, index: number) => JSX.Element>;
 }>> & {}, {
-    color: string;
-    icon: HeroIcon;
-    textSize: TWTextSize;
-    items: BreadcrumbItem[];
-    iconSize: number;
+    readonly color: string;
+    readonly icon: HeroIcon;
+    readonly textSize: TWTextSize;
+    readonly items: BreadcrumbItem[];
+    readonly iconSize: number;
 }>;
 export default _default;

package/components/NBreadcrub.js

@@ -1,8 +1,8 @@
 import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
-import { createComponent, createProps } from '../utils/component';
+import { createComponent } from '../utils/component';
 import { ChevronRightIcon } from '@heroicons/vue/24/solid';
 import NLink from './NLink';
-export const nBreadcrumbProps = createProps({
+export const nBreadcrumbProps = {
   /**
    * The items of the breadcrumb.
    */
@@ -47,7 +47,7 @@ export const nBreadcrumbProps = createProps({
    * The passsed item is the item before the seperator.
    */
   seperator: Function
-});
+};
 /**
  * The `NBreadcrumb` is a styled breadcrumb which can be used as a navigation in hierarchical views.
  */