@naptics/vue-collection 0.0.7 → 0.1.1

package/components/NTooltip.js

@@ -40,7 +40,15 @@ export const nTooltipProps = {
   maxWidth: {
     type: String,
     default: 'max-w-xs'
-  }
+  },
+  /**
+   * Adds the classes to the (invisible) wrapper element.
+   */
+  wrapperAddClass: String,
+  /**
+   * Adds the classes to the container of the tooltips content.
+   */
+  contentAddClass: String
 };
 /**
  * These props are made to use on a component which implements the tooltip
@@ -75,7 +83,15 @@ export const nToolTipPropsForImplementor = {
   /**
    * @see {@link nTooltipProps.maxWidth}
    */
-  tooltipMaxWidth: nTooltipProps.maxWidth
+  tooltipMaxWidth: nTooltipProps.maxWidth,
+  /**
+   * @see {@link nTooltipProps.wrapperAddClass}
+   */
+  tooltipWrapperAddClass: nTooltipProps.wrapperAddClass,
+  /**
+   * @see {@link nTooltipProps.contentAddClass}
+   */
+  tooltipContentAddClass: nTooltipProps.contentAddClass
 };
 /**
  * Maps the {@link nToolTipPropsForImplementor} props to normal tooltip props
@@ -88,7 +104,9 @@ export function mapTooltipProps(props) {
     hide: props.tooltipHide,
     show: props.tooltipShow,
     placement: props.tooltipPlacement,
-    maxWidth: props.tooltipMaxWidth
+    maxWidth: props.tooltipMaxWidth,
+    wrapperAddClass: props.tooltipWrapperAddClass,
+    contentAddClass: props.tooltipContentAddClass
   };
 }
 /**
@@ -106,7 +124,7 @@ export default createComponent('NTooltip', nTooltipProps, (props, {
   slots
 }) => {
   return () => _createVNode("div", {
-    "class": props.block ? 'block' : 'inline-block'
+    "class": [props.block ? 'block' : 'inline-block', props.wrapperAddClass]
   }, [props.content || props.text ? _createVNode(NTooltipBase, props, {
     default: () => [slots.default?.()]
   }) : slots.default?.()]);
@@ -169,7 +187,7 @@ const NTooltipBase = createComponent('NTooltipBase', nTooltipProps, (props, {
       "onMouseleave": () => isHoveringTooltip.value = false,
       "class": [isHovering.value ? 'z-20' : 'z-10', props.maxWidth, 'tooltip']
     }, [_createVNode("div", {
-      "class": "bg-white rounded-md py-2 px-4 shadow-lg border-default-200 border text-sm font-normal text-default-700"
+      "class": `bg-white rounded-md py-2 px-4 shadow-lg border-default-200 border text-sm whitespace-normal font-normal text-default-700 ${props.contentAddClass}`
     }, [props.content?.() || props.text]), _createVNode("div", {
       "data-popper-arrow": true,
       "class": "arrow"

package/components/NValInput.d.ts

@@ -82,7 +82,7 @@ export declare const nValInputProps: {
      */
     readonly disableBlurValidation: BooleanConstructor;
     readonly tooltipText: StringConstructor;
-    readonly tooltipContent: PropType<() => void>;
+    readonly tooltipContent: PropType<() => JSX.Element>;
     readonly tooltipHide: BooleanConstructor;
     readonly tooltipShow: BooleanConstructor;
     readonly tooltipPlacement: {
@@ -93,6 +93,8 @@ export declare const nValInputProps: {
         readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
         readonly default: "max-w-xs";
     };
+    readonly tooltipWrapperAddClass: StringConstructor;
+    readonly tooltipContentAddClass: StringConstructor;
     readonly name: StringConstructor;
     readonly placeholder: StringConstructor;
     readonly autocomplete: {
@@ -108,6 +110,8 @@ export declare const nValInputProps: {
     readonly disabled: BooleanConstructor;
     readonly small: BooleanConstructor;
     readonly hideLabel: BooleanConstructor;
+    readonly inputClass: StringConstructor;
+    readonly addClass: StringConstructor;
     readonly onFocus: PropType<() => void>;
     readonly onBlur: PropType<() => void>;
     readonly value: PropType<string>;
@@ -176,7 +180,7 @@ declare const _default: import("vue").DefineComponent<{
      */
     readonly disableBlurValidation: BooleanConstructor;
     readonly tooltipText: StringConstructor;
-    readonly tooltipContent: PropType<() => void>;
+    readonly tooltipContent: PropType<() => JSX.Element>;
     readonly tooltipHide: BooleanConstructor;
     readonly tooltipShow: BooleanConstructor;
     readonly tooltipPlacement: {
@@ -187,6 +191,8 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
         readonly default: "max-w-xs";
     };
+    readonly tooltipWrapperAddClass: StringConstructor;
+    readonly tooltipContentAddClass: StringConstructor;
     readonly name: StringConstructor;
     readonly placeholder: StringConstructor;
     readonly autocomplete: {
@@ -202,6 +208,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly disabled: BooleanConstructor;
     readonly small: BooleanConstructor;
     readonly hideLabel: BooleanConstructor;
+    readonly inputClass: StringConstructor;
+    readonly addClass: StringConstructor;
     readonly onFocus: PropType<() => void>;
     readonly onBlur: PropType<() => void>;
     readonly value: PropType<string>;
@@ -248,7 +256,7 @@ declare const _default: import("vue").DefineComponent<{
      */
     readonly disableBlurValidation: BooleanConstructor;
     readonly tooltipText: StringConstructor;
-    readonly tooltipContent: PropType<() => void>;
+    readonly tooltipContent: PropType<() => JSX.Element>;
     readonly tooltipHide: BooleanConstructor;
     readonly tooltipShow: BooleanConstructor;
     readonly tooltipPlacement: {
@@ -259,6 +267,8 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
         readonly default: "max-w-xs";
     };
+    readonly tooltipWrapperAddClass: StringConstructor;
+    readonly tooltipContentAddClass: StringConstructor;
     readonly name: StringConstructor;
     readonly placeholder: StringConstructor;
     readonly autocomplete: {
@@ -274,6 +284,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly disabled: BooleanConstructor;
     readonly small: BooleanConstructor;
     readonly hideLabel: BooleanConstructor;
+    readonly inputClass: StringConstructor;
+    readonly addClass: StringConstructor;
     readonly onFocus: PropType<() => void>;
     readonly onBlur: PropType<() => void>;
     readonly value: PropType<string>;

package/components/NValInput.js

@@ -93,12 +93,17 @@ export default createComponent('NValInput', nValInputProps, (props, context) =>
   };
   context.expose(expose);
   props.form?.addInput(expose);
-  return () => _createVNode("div", null, [props.input?.(inputSlotProps) || _createVNode(NInput, _mergeProps({
-    "ref": inputRef
-  }, {
+  const childProps = computed(() => ({
     ...props,
+    // We should not pass this property to the child, as the class is applied on this element.
+    addClass: undefined,
     ...inputSlotProps
-  }), null), showErrorMessage.value && _createVNode("p", {
+  }));
+  return () => _createVNode("div", {
+    "class": props.addClass
+  }, [props.input?.(inputSlotProps) || _createVNode(NInput, _mergeProps({
+    "ref": inputRef
+  }, childProps.value), null), showErrorMessage.value && _createVNode("p", {
     "class": "text-red-500 text-xs mt-1"
   }, [errorMessage.value])]);
 });

package/package.json

@@ -2,7 +2,7 @@
     "name": "@naptics/vue-collection",
     "author": "Timo Siegenthaler",
     "description": "Vue Collection is a collection of styled and fully functional Vue components which can easily be integrated into our projects.",
-    "version": "0.0.7",
+    "version": "0.1.1",
     "main": "./index.js",
     "repository": {
         "type": "git",