@naptics/vue-collection 0.2.15 → 0.3.1

package/components/NInputSuggestion.d.ts

@@ -23,7 +23,7 @@ export declare const nInputSuggestionProps: {
     readonly disableValidation: BooleanConstructor;
     readonly optional: BooleanConstructor;
     readonly rules: {
-        readonly type: PropType<import("../utils/validation").ValidationRule | import("../utils/validation").ValidationRule[]>;
+        readonly type: PropType<import("../utils/validation").ValidationRule[] | import("../utils/validation").ValidationRule>;
         readonly default: () => never[];
     };
     readonly form: PropType<import("./ValidatedForm").ValidatedForm>;
@@ -71,158 +71,5 @@ export declare const nInputSuggestionProps: {
  * `NInputSuggestion` is an input, which shows a list of possible suggestions to the user
  *  which is filtered while typing. Contrary to {@link NInputSelect} the user is not required to choose any of the suggestions.
  */
-declare const Component: import("vue").DefineComponent<{
-    /**
-     * If set to `true` the list is hidden even if there are still matching items in the list.
-     */
-    readonly hideList: BooleanConstructor;
-    /**
-     * @see {@link nSuggestionListProps.maxItems}
-     */
-    readonly maxItems: {
-        readonly type: NumberConstructor;
-        readonly default: () => number;
-    };
-    /**
-     * The suggestions which are shown to the user for this input.
-     * The suggestions are filtered based on the user input.
-     */
-    readonly suggestions: {
-        readonly type: PropType<string[]>;
-        readonly default: () => never[];
-    };
-    readonly input: PropType<(props: import("./NValInput").InputSlotProps) => JSX.Element>;
-    readonly disableValidation: BooleanConstructor;
-    readonly optional: BooleanConstructor;
-    readonly rules: {
-        readonly type: PropType<import("../utils/validation").ValidationRule | import("../utils/validation").ValidationRule[]>;
-        readonly default: () => never[];
-    };
-    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";
-    };
-    readonly tooltipMaxWidth: {
-        readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
-        readonly default: "max-w-xs";
-    };
-    readonly tooltipWrapperClass: StringConstructor;
-    readonly tooltipContentClass: StringConstructor;
-    readonly tooltipArrowClass: StringConstructor;
-    readonly name: StringConstructor;
-    readonly placeholder: StringConstructor;
-    readonly autocomplete: {
-        readonly type: StringConstructor;
-        readonly default: "off";
-    };
-    readonly type: {
-        readonly type: StringConstructor;
-        readonly default: "text";
-    };
-    readonly max: StringConstructor;
-    readonly min: StringConstructor;
-    readonly disabled: BooleanConstructor;
-    readonly small: BooleanConstructor;
-    readonly hideLabel: BooleanConstructor;
-    readonly inputClass: StringConstructor;
-    readonly onFocus: PropType<() => 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<{
-    /**
-     * If set to `true` the list is hidden even if there are still matching items in the list.
-     */
-    readonly hideList: BooleanConstructor;
-    /**
-     * @see {@link nSuggestionListProps.maxItems}
-     */
-    readonly maxItems: {
-        readonly type: NumberConstructor;
-        readonly default: () => number;
-    };
-    /**
-     * The suggestions which are shown to the user for this input.
-     * The suggestions are filtered based on the user input.
-     */
-    readonly suggestions: {
-        readonly type: PropType<string[]>;
-        readonly default: () => never[];
-    };
-    readonly input: PropType<(props: import("./NValInput").InputSlotProps) => JSX.Element>;
-    readonly disableValidation: BooleanConstructor;
-    readonly optional: BooleanConstructor;
-    readonly rules: {
-        readonly type: PropType<import("../utils/validation").ValidationRule | import("../utils/validation").ValidationRule[]>;
-        readonly default: () => never[];
-    };
-    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";
-    };
-    readonly tooltipMaxWidth: {
-        readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
-        readonly default: "max-w-xs";
-    };
-    readonly tooltipWrapperClass: StringConstructor;
-    readonly tooltipContentClass: StringConstructor;
-    readonly tooltipArrowClass: StringConstructor;
-    readonly name: StringConstructor;
-    readonly placeholder: StringConstructor;
-    readonly autocomplete: {
-        readonly type: StringConstructor;
-        readonly default: "off";
-    };
-    readonly type: {
-        readonly type: StringConstructor;
-        readonly default: "text";
-    };
-    readonly max: StringConstructor;
-    readonly min: StringConstructor;
-    readonly disabled: BooleanConstructor;
-    readonly small: BooleanConstructor;
-    readonly hideLabel: BooleanConstructor;
-    readonly inputClass: StringConstructor;
-    readonly onFocus: PropType<() => void>;
-    readonly onBlur: PropType<() => void>;
-    readonly value: PropType<string>;
-    readonly onUpdateValue: PropType<(newValue: string) => void>;
-}>> & {}, {
-    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;
-    readonly disableValidation: boolean;
-    readonly optional: boolean;
-    readonly rules: import("../utils/validation").ValidationRule | import("../utils/validation").ValidationRule[];
-    readonly hideErrorMessage: boolean;
-    readonly disableBlurValidation: boolean;
-    readonly maxItems: number;
-    readonly hideList: boolean;
-    readonly suggestions: string[];
-}>;
+declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
 export { Component as NInputSuggestion, Component as default };

package/components/NInputSuggestion.js

@@ -1,4 +1,4 @@
-import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
 import { createComponent } from '../utils/component';
 import { Id } from '../utils/identifiable';
 import { computed, ref } from 'vue';

package/components/NLink.d.ts

@@ -29,6 +29,11 @@ export declare const nLinkProps: {
         readonly type: NumberConstructor;
         readonly default: 500;
     };
+    /**
+     * If set to `true` the link is disabled and no interaction is possible.
+     * Note: If the `route` prop is set, the link will still be clickable, because it becomes a {@link RouterLink}.
+     */
+    readonly disabled: BooleanConstructor;
     /**
      * This is called when the link is clicked but only, if the `route` prop is not set.
      * If the `route` prop is not set, the link will act as a regular button.
@@ -38,74 +43,5 @@ export declare const nLinkProps: {
 /**
  * The `NLink` is a styled text which can be used as a {@link RouterLink} or a regular button.
  */
-declare const Component: import("vue").DefineComponent<{
-    /**
-     * The text of the link. Can also be set in the default slot.
-     */
-    readonly text: StringConstructor;
-    /**
-     * The route of the link. If this is set,
-     * the link becomes a {@link RouterLink} and does not emit the `onClick` event.
-     */
-    readonly route: PropType<RouteLocationRaw>;
-    /**
-     * The color of the link.
-     */
-    readonly color: {
-        readonly type: StringConstructor;
-        readonly default: "primary";
-    };
-    /**
-     * The text size, a standard tailwind text-size class.
-     */
-    readonly textSize: PropType<TWTextSize>;
-    /**
-     * The shade of the link.
-     */
-    readonly shade: {
-        readonly type: NumberConstructor;
-        readonly default: 500;
-    };
-    /**
-     * This is called when the link is clicked but only, if the `route` prop is not set.
-     * If the `route` prop is not set, the link will act as a regular button.
-     */
-    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 text of the link. Can also be set in the default slot.
-     */
-    readonly text: StringConstructor;
-    /**
-     * The route of the link. If this is set,
-     * the link becomes a {@link RouterLink} and does not emit the `onClick` event.
-     */
-    readonly route: PropType<RouteLocationRaw>;
-    /**
-     * The color of the link.
-     */
-    readonly color: {
-        readonly type: StringConstructor;
-        readonly default: "primary";
-    };
-    /**
-     * The text size, a standard tailwind text-size class.
-     */
-    readonly textSize: PropType<TWTextSize>;
-    /**
-     * The shade of the link.
-     */
-    readonly shade: {
-        readonly type: NumberConstructor;
-        readonly default: 500;
-    };
-    /**
-     * This is called when the link is clicked but only, if the `route` prop is not set.
-     * If the `route` prop is not set, the link will act as a regular button.
-     */
-    readonly onClick: PropType<() => void>;
-}>> & {}, {
-    readonly color: string;
-    readonly shade: number;
-}>;
+declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
 export { Component as NLink, Component as default };

package/components/NLink.js

@@ -30,6 +30,11 @@ export const nLinkProps = {
     type: Number,
     default: 500
   },
+  /**
+   * If set to `true` the link is disabled and no interaction is possible.
+   * Note: If the `route` prop is set, the link will still be clickable, because it becomes a {@link RouterLink}.
+   */
+  disabled: Boolean,
   /**
    * This is called when the link is clicked but only, if the `route` prop is not set.
    * If the `route` prop is not set, the link will act as a regular button.
@@ -47,6 +52,7 @@ const Component = createComponent('NLink', nLinkProps, (props, {
     if (shade <= 500) return shade + 100;else return shade - 200;
   });
   const classes = computed(() => ['font-medium focus:outline-none focus-visible:ring-2 rounded-sm ring-offset-2 hover:underline text-left', `${props.textSize} text-${props.color}-${props.shade} hover:text-${props.color}-${hoverShade.value} focus-visible:ring-${props.color}-${props.shade}`]);
+  const disabledClasses = computed(() => ['font-medium text-left cursor-not-allowed', `${props.textSize} text-${props.color}-200`]);
   return () => props.route ? _createVNode(RouterLink, {
     "to": props.route,
     "class": classes.value
@@ -54,7 +60,8 @@ const Component = createComponent('NLink', nLinkProps, (props, {
     default: () => [slots.default?.() || props.text]
   }) : _createVNode("button", {
     "onClick": props.onClick,
-    "class": classes.value
+    "class": props.disabled ? disabledClasses.value : classes.value,
+    "disabled": props.disabled
   }, [slots.default?.() || props.text]);
 });
 export { Component as NLink, Component as default };

package/components/NList.d.ts

@@ -33,47 +33,5 @@ export declare const nListProps: {
 /**
  * The `NList` displays key-value data in an appealing way.
  */
-declare const Component: import("vue").DefineComponent<{
-    /**
-     * The items which are displayed in the list.
-     */
-    readonly items: {
-        readonly type: PropType<ListItem[]>;
-        readonly default: () => never[];
-    };
-    /**
-     * Adds the classes to all title elements (on the left side).
-     */
-    readonly titleClass: StringConstructor;
-    /**
-     * Adds the classes to all text elements (on the right side).
-     */
-    readonly textClass: StringConstructor;
-    /**
-     * Adds the classes to each row.
-     */
-    readonly rowClass: StringConstructor;
-}, 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 which are displayed in the list.
-     */
-    readonly items: {
-        readonly type: PropType<ListItem[]>;
-        readonly default: () => never[];
-    };
-    /**
-     * Adds the classes to all title elements (on the left side).
-     */
-    readonly titleClass: StringConstructor;
-    /**
-     * Adds the classes to all text elements (on the right side).
-     */
-    readonly textClass: StringConstructor;
-    /**
-     * Adds the classes to each row.
-     */
-    readonly rowClass: StringConstructor;
-}>> & {}, {
-    readonly items: ListItem[];
-}>;
+declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
 export { Component as NList, Component as default };

package/components/NList.js

@@ -1,4 +1,4 @@
-import { Fragment as _Fragment, createVNode as _createVNode } from "vue";
+import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
 import { createComponent } from '../utils/component';
 export const nListProps = {
   /**

package/components/NLoadingIndicator.d.ts

@@ -25,53 +25,5 @@ export declare const nLoadingIndicator: {
 /**
  * The `NLoadingIndicator` is a styled loading indicator.
  */
-declare const Component: import("vue").DefineComponent<{
-    /**
-     * The color of the loading-indicator.
-     */
-    readonly color: {
-        readonly type: StringConstructor;
-        readonly default: "primary";
-    };
-    /**
-     * The shade of the loading-indicator.
-     */
-    readonly shade: {
-        readonly type: NumberConstructor;
-        readonly default: 400;
-    };
-    /**
-     * The height of the loading-indicator in px.
-     */
-    readonly size: {
-        readonly type: NumberConstructor;
-        readonly default: 10;
-    };
-}, 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 color of the loading-indicator.
-     */
-    readonly color: {
-        readonly type: StringConstructor;
-        readonly default: "primary";
-    };
-    /**
-     * The shade of the loading-indicator.
-     */
-    readonly shade: {
-        readonly type: NumberConstructor;
-        readonly default: 400;
-    };
-    /**
-     * The height of the loading-indicator in px.
-     */
-    readonly size: {
-        readonly type: NumberConstructor;
-        readonly default: 10;
-    };
-}>> & {}, {
-    readonly color: string;
-    readonly shade: number;
-    readonly size: number;
-}>;
+declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
 export { Component as NLoadingIndicator, Component as default };