@naptics/vue-collection 0.1.10 → 0.2.1

package/components/NTooltip.d.ts

@@ -41,11 +41,16 @@ export declare const nTooltipProps: {
     /**
      * Adds the classes to the (invisible) wrapper element.
      */
-    readonly wrapperAddClass: StringConstructor;
+    readonly wrapperClass: StringConstructor;
     /**
      * Adds the classes to the container of the tooltips content.
      */
-    readonly contentAddClass: StringConstructor;
+    readonly contentClass: StringConstructor;
+    /**
+     * Adds the classes to the tooltip arrow. Make sure to use `before:` classes
+     * to target the arrow (which is the before element).
+     */
+    readonly arrowClass: StringConstructor;
 };
 /**
  * These props are made to use on a component which implements the tooltip
@@ -88,13 +93,17 @@ export declare const nToolTipPropsForImplementor: {
         readonly default: "max-w-xs";
     };
     /**
-     * @see {@link nTooltipProps.wrapperAddClass}
+     * @see {@link nTooltipProps.wrapperClass}
+     */
+    tooltipWrapperClass: StringConstructor;
+    /**
+     * @see {@link nTooltipProps.contentClass}
      */
-    tooltipWrapperAddClass: StringConstructor;
+    tooltipContentClass: StringConstructor;
     /**
-     * @see {@link nTooltipProps.contentAddClass}
+     * @see {@link nTooltipProps.arrowClass}
      */
-    tooltipContentAddClass: StringConstructor;
+    tooltipArrowClass: StringConstructor;
 };
 /**
  * Maps the {@link nToolTipPropsForImplementor} props to normal tooltip props
@@ -107,8 +116,9 @@ export declare function mapTooltipProps(props: ExtractedProps<typeof nToolTipPro
     show: boolean;
     placement: TooltipPlacement;
     maxWidth: TWMaxWidth;
-    wrapperAddClass: string | undefined;
-    contentAddClass: string | undefined;
+    wrapperClass: string | undefined;
+    contentClass: string | undefined;
+    arrowClass: string | undefined;
 };
 /**
  * The `NTooltip` is a wrapper for any component which adds a tooltip to it.
@@ -160,11 +170,16 @@ declare const _default: import("vue").DefineComponent<{
     /**
      * Adds the classes to the (invisible) wrapper element.
      */
-    readonly wrapperAddClass: StringConstructor;
+    readonly wrapperClass: StringConstructor;
     /**
      * Adds the classes to the container of the tooltips content.
      */
-    readonly contentAddClass: StringConstructor;
+    readonly contentClass: StringConstructor;
+    /**
+     * Adds the classes to the tooltip arrow. Make sure to use `before:` classes
+     * to target the arrow (which is the before element).
+     */
+    readonly arrowClass: 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 text content of the tooltip.
@@ -204,11 +219,16 @@ declare const _default: import("vue").DefineComponent<{
     /**
      * Adds the classes to the (invisible) wrapper element.
      */
-    readonly wrapperAddClass: StringConstructor;
+    readonly wrapperClass: StringConstructor;
     /**
      * Adds the classes to the container of the tooltips content.
      */
-    readonly contentAddClass: StringConstructor;
+    readonly contentClass: StringConstructor;
+    /**
+     * Adds the classes to the tooltip arrow. Make sure to use `before:` classes
+     * to target the arrow (which is the before element).
+     */
+    readonly arrowClass: StringConstructor;
 }>> & {}, {
     readonly show: boolean;
     readonly hide: boolean;

package/components/NTooltip.js

@@ -44,11 +44,16 @@ export const nTooltipProps = {
   /**
    * Adds the classes to the (invisible) wrapper element.
    */
-  wrapperAddClass: String,
+  wrapperClass: String,
   /**
    * Adds the classes to the container of the tooltips content.
    */
-  contentAddClass: String
+  contentClass: String,
+  /**
+   * Adds the classes to the tooltip arrow. Make sure to use `before:` classes
+   * to target the arrow (which is the before element).
+   */
+  arrowClass: String
 };
 /**
  * These props are made to use on a component which implements the tooltip
@@ -85,13 +90,17 @@ export const nToolTipPropsForImplementor = {
    */
   tooltipMaxWidth: nTooltipProps.maxWidth,
   /**
-   * @see {@link nTooltipProps.wrapperAddClass}
+   * @see {@link nTooltipProps.wrapperClass}
+   */
+  tooltipWrapperClass: nTooltipProps.wrapperClass,
+  /**
+   * @see {@link nTooltipProps.contentClass}
    */
-  tooltipWrapperAddClass: nTooltipProps.wrapperAddClass,
+  tooltipContentClass: nTooltipProps.contentClass,
   /**
-   * @see {@link nTooltipProps.contentAddClass}
+   * @see {@link nTooltipProps.arrowClass}
    */
-  tooltipContentAddClass: nTooltipProps.contentAddClass
+  tooltipArrowClass: nTooltipProps.arrowClass
 };
 /**
  * Maps the {@link nToolTipPropsForImplementor} props to normal tooltip props
@@ -105,8 +114,9 @@ export function mapTooltipProps(props) {
     show: props.tooltipShow,
     placement: props.tooltipPlacement,
     maxWidth: props.tooltipMaxWidth,
-    wrapperAddClass: props.tooltipWrapperAddClass,
-    contentAddClass: props.tooltipContentAddClass
+    wrapperClass: props.tooltipWrapperClass,
+    contentClass: props.tooltipContentClass,
+    arrowClass: props.tooltipArrowClass
   };
 }
 /**
@@ -124,7 +134,7 @@ export default createComponent('NTooltip', nTooltipProps, (props, {
   slots
 }) => {
   return () => _createVNode("div", {
-    "class": [props.block ? 'block' : 'inline-block', props.wrapperAddClass]
+    "class": [props.block ? 'block' : 'inline-block', props.wrapperClass]
   }, [props.content || props.text ? _createVNode(NTooltipBase, props, {
     default: () => [slots.default?.()]
   }) : slots.default?.()]);
@@ -187,10 +197,10 @@ 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 whitespace-normal font-normal text-default-700 ${props.contentAddClass}`
+      "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.contentClass}`
     }, [props.content?.() || props.text]), _createVNode("div", {
       "data-popper-arrow": true,
-      "class": "arrow"
+      "class": `arrow ${props.arrowClass}`
     }, null)]), [[_vShow, showTooltip.value]])]
   })]);
 });

package/components/NValInput.d.ts

@@ -93,8 +93,9 @@ export declare const nValInputProps: {
         readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
         readonly default: "max-w-xs";
     };
-    readonly tooltipWrapperAddClass: StringConstructor;
-    readonly tooltipContentAddClass: StringConstructor;
+    readonly tooltipWrapperClass: StringConstructor;
+    readonly tooltipContentClass: StringConstructor;
+    readonly tooltipArrowClass: StringConstructor;
     readonly name: StringConstructor;
     readonly placeholder: StringConstructor;
     readonly autocomplete: {
@@ -111,7 +112,6 @@ export declare const nValInputProps: {
     readonly small: BooleanConstructor;
     readonly hideLabel: BooleanConstructor;
     readonly inputClass: StringConstructor;
-    readonly addClass: StringConstructor;
     readonly onFocus: PropType<() => void>;
     readonly onBlur: PropType<() => void>;
     readonly value: PropType<string>;
@@ -191,8 +191,9 @@ 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 tooltipWrapperClass: StringConstructor;
+    readonly tooltipContentClass: StringConstructor;
+    readonly tooltipArrowClass: StringConstructor;
     readonly name: StringConstructor;
     readonly placeholder: StringConstructor;
     readonly autocomplete: {
@@ -209,7 +210,6 @@ declare const _default: import("vue").DefineComponent<{
     readonly small: BooleanConstructor;
     readonly hideLabel: BooleanConstructor;
     readonly inputClass: StringConstructor;
-    readonly addClass: StringConstructor;
     readonly onFocus: PropType<() => void>;
     readonly onBlur: PropType<() => void>;
     readonly value: PropType<string>;
@@ -267,8 +267,9 @@ 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 tooltipWrapperClass: StringConstructor;
+    readonly tooltipContentClass: StringConstructor;
+    readonly tooltipArrowClass: StringConstructor;
     readonly name: StringConstructor;
     readonly placeholder: StringConstructor;
     readonly autocomplete: {
@@ -285,7 +286,6 @@ declare const _default: import("vue").DefineComponent<{
     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,17 +93,12 @@ export default createComponentWithSlots('NValInput', nValInputProps, ['input'],
   };
   context.expose(expose);
   props.form?.addInput(expose);
-  const childProps = computed(() => ({
+  return () => _createVNode("div", null, [props.input?.(inputSlotProps) || _createVNode(NInput, _mergeProps({
+    "ref": inputRef
+  }, {
     ...props,
-    // We should not pass this property to the child, as the class is applied on this element.
-    addClass: undefined,
     ...inputSlotProps
-  }));
-  return () => _createVNode("div", {
-    "class": props.addClass
-  }, [props.input?.(inputSlotProps) || _createVNode(NInput, _mergeProps({
-    "ref": inputRef
-  }, childProps.value), null), showErrorMessage.value && _createVNode("p", {
+  }), 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.1.10",
+    "version": "0.2.1",
     "main": "./index.js",
     "repository": {
         "type": "git",

package/utils/utils.d.ts

@@ -21,6 +21,13 @@ export declare function isNullish(value: Nullish<unknown>): value is null | unde
  * @see notNullish
  */
 export declare function notNullishRef<T>(ref: Ref<T>): ref is Ref<NonNullable<T>>;
+/**
+ * Determines if the value of a ref is null or undefined.
+ * @param ref the ref to check
+ * @returns `true` if the value of the ref is `null` or `undefined`.
+ * @see isNullish
+ */
+export declare function isNullishRef(ref: Ref<Nullish<unknown>>): ref is Ref<null | undefined>;
 export type AnyObject = Record<string | number | symbol, unknown>;
 export type EmptyObject = Record<string | number | symbol, never>;
 export declare function isAnyObject(object: unknown): object is AnyObject;

package/utils/utils.js

@@ -26,6 +26,15 @@ export function isNullish(value) {
 export function notNullishRef(ref) {
   return notNullish(ref.value);
 }
+/**
+ * Determines if the value of a ref is null or undefined.
+ * @param ref the ref to check
+ * @returns `true` if the value of the ref is `null` or `undefined`.
+ * @see isNullish
+ */
+export function isNullishRef(ref) {
+  return isNullish(ref.value);
+}
 export function isAnyObject(object) {
   return typeof object === 'object' && !Array.isArray(object);
 }