@naptics/vue-collection 0.1.0 → 0.1.1

package/components/NSelect.d.ts

@@ -14,6 +14,8 @@ export declare const nSelectProps: {
         readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
         readonly default: "max-w-xs";
     };
+    readonly tooltipWrapperAddClass: StringConstructor;
+    readonly tooltipContentAddClass: StringConstructor;
     /**
      * The id of the currently selected option of this input.
      */
@@ -47,6 +49,14 @@ export declare const nSelectProps: {
      * @see {@link nValInputProps.form}
      */
     readonly form: PropType<import("./ValidatedForm").ValidatedForm>;
+    /**
+     * @see {@link nValInputProps.inputClass}
+     */
+    readonly inputClass: StringConstructor;
+    /**
+     * @see {@link nValInputProps.addClass}
+     */
+    readonly addClass: StringConstructor;
 };
 export type SelectionOption = Identifiable & {
     label: string;
@@ -68,6 +78,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;
     /**
      * The id of the currently selected option of this input.
      */
@@ -101,6 +113,14 @@ declare const _default: import("vue").DefineComponent<{
      * @see {@link nValInputProps.form}
      */
     readonly form: PropType<import("./ValidatedForm").ValidatedForm>;
+    /**
+     * @see {@link nValInputProps.inputClass}
+     */
+    readonly inputClass: StringConstructor;
+    /**
+     * @see {@link nValInputProps.addClass}
+     */
+    readonly addClass: 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<{
     readonly tooltipText: StringConstructor;
     readonly tooltipContent: PropType<() => JSX.Element>;
@@ -114,6 +134,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;
     /**
      * The id of the currently selected option of this input.
      */
@@ -147,6 +169,14 @@ declare const _default: import("vue").DefineComponent<{
      * @see {@link nValInputProps.form}
      */
     readonly form: PropType<import("./ValidatedForm").ValidatedForm>;
+    /**
+     * @see {@link nValInputProps.inputClass}
+     */
+    readonly inputClass: StringConstructor;
+    /**
+     * @see {@link nValInputProps.addClass}
+     */
+    readonly addClass: StringConstructor;
 }>> & {}, {
     readonly tooltipHide: boolean;
     readonly tooltipShow: boolean;

package/components/NSelect.js

@@ -38,6 +38,14 @@ export const nSelectProps = {
    * @see {@link nValInputProps.form}
    */
   form: nValInputProps.form,
+  /**
+   * @see {@link nValInputProps.inputClass}
+   */
+  inputClass: nValInputProps.inputClass,
+  /**
+   * @see {@link nValInputProps.addClass}
+   */
+  addClass: nValInputProps.addClass,
   ...nToolTipPropsForImplementor
 };
 /**
@@ -69,7 +77,7 @@ export default createComponent('NSelect', nSelectProps, (props, context) => {
         "value": props.value,
         "onChange": event => slotProps.onUpdateValue(event.target.value),
         "onBlur": slotProps.onBlur,
-        "class": ['block w-full py-2 pl-4 pr-10 rounded-md border focus:outline-none focus:ring-1', props.disabled ? 'text-default-300 ' : 'text-default-900 ', slotProps.error ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : 'border-default-300 focus:border-primary-500 focus:ring-primary-500']
+        "class": ['block w-full py-2 pl-4 pr-10 rounded-md border focus:outline-none focus:ring-1', props.disabled ? 'text-default-300 ' : 'text-default-900 ', slotProps.error ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : 'border-default-300 focus:border-primary-500 focus:ring-primary-500', props.inputClass]
       }, [_createVNode("option", {
         "disabled": !props.optional,
         "selected": !props.value,

package/components/NTable.d.ts

@@ -86,6 +86,10 @@ export declare const nTableProps: {
         readonly type: PropType<TableRow[]>;
         readonly default: () => never[];
     };
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
 };
 /**
  * The `NTable` is a styled html table which accepts data and displays it appropriately.
@@ -135,6 +139,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<TableRow[]>;
         readonly default: () => never[];
     };
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: 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 headings of the table. These define which columns are shown in the table and in which order.
@@ -180,6 +188,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<TableRow[]>;
         readonly default: () => never[];
     };
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
 }>> & {}, {
     readonly details: TableDetail[];
     readonly items: TableRow[];

package/components/NTable.js

@@ -50,7 +50,11 @@ export const nTableProps = {
   items: {
     type: Array,
     default: () => []
-  }
+  },
+  /**
+   * Adds the classes to the top-level element.
+   */
+  addClass: String
 };
 /**
  * The `NTable` is a styled html table which accepts data and displays it appropriately.
@@ -86,7 +90,7 @@ export default createComponent('NTable', nTableProps, props => {
     immediate: true
   });
   return () => _createVNode("div", {
-    "class": "overflow-x-auto"
+    "class": `overflow-x-auto ${props.addClass}`
   }, [_createVNode("table", {
     "class": "min-w-full text-default-500 text-sm"
   }, [_createVNode("thead", {

package/components/NTableAction.d.ts

@@ -16,6 +16,10 @@ export declare const nTableActionProps: {
         readonly type: PropType<"button" | "submit" | "reset">;
         readonly default: "button";
     };
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
     /**
      * This is called when the action is clicked.
      * It is only called when the `route` prop is not set on the action.
@@ -42,6 +46,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<"button" | "submit" | "reset">;
         readonly default: "button";
     };
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
     /**
      * This is called when the action is clicked.
      * It is only called when the `route` prop is not set on the action.
@@ -63,6 +71,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<"button" | "submit" | "reset">;
         readonly default: "button";
     };
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
     /**
      * This is called when the action is clicked.
      * It is only called when the `route` prop is not set on the action.

package/components/NTableAction.js

@@ -18,6 +18,10 @@ export const nTableActionProps = {
    * The html attribute, which indicates the type of the button.
    */
   type: nButtonProps.type,
+  /**
+   * Adds the classes to the top-level element.
+   */
+  addClass: String,
   /**
    * This is called when the action is clicked.
    * It is only called when the `route` prop is not set on the action.
@@ -32,7 +36,7 @@ export default createComponent('NTableAction', nTableActionProps, (props, {
   slots
 }) => {
   const content = () => slots.default?.() || _createVNode(_Fragment, null, [props.text]);
-  const classes = 'text-left font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-default-900 rounded-sm ring-offset-2 text-default-900 hover:underline hover:text-default-700';
+  const classes = ['text-left font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-default-900 rounded-sm ring-offset-2 text-default-900 hover:underline hover:text-default-700', props.addClass];
   return () => {
     let _slot;
     return props.route ? _createVNode(RouterLink, {

package/components/NTextArea.d.ts

@@ -22,6 +22,8 @@ export declare const nTextAreaProps: {
         readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
         readonly default: "max-w-xs";
     };
+    readonly tooltipWrapperAddClass: StringConstructor;
+    readonly tooltipContentAddClass: StringConstructor;
     /**
      * The name of the text area. Is displayed as a label above the text area.
      */
@@ -63,6 +65,14 @@ export declare const nTextAreaProps: {
      * If set to `true` the text area's label is hidden.
      */
     readonly hideLabel: BooleanConstructor;
+    /**
+     * Adds the classes directly to the input (e.g. for shadow).
+     */
+    readonly inputClass: StringConstructor;
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
     /**
      * This is called when the text area reveices focus.
      */
@@ -103,6 +113,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;
     /**
      * The name of the text area. Is displayed as a label above the text area.
      */
@@ -144,6 +156,14 @@ declare const _default: import("vue").DefineComponent<{
      * If set to `true` the text area's label is hidden.
      */
     readonly hideLabel: BooleanConstructor;
+    /**
+     * Adds the classes directly to the input (e.g. for shadow).
+     */
+    readonly inputClass: StringConstructor;
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
     /**
      * This is called when the text area reveices focus.
      */
@@ -177,6 +197,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;
     /**
      * The name of the text area. Is displayed as a label above the text area.
      */
@@ -218,6 +240,14 @@ declare const _default: import("vue").DefineComponent<{
      * If set to `true` the text area's label is hidden.
      */
     readonly hideLabel: BooleanConstructor;
+    /**
+     * Adds the classes directly to the input (e.g. for shadow).
+     */
+    readonly inputClass: StringConstructor;
+    /**
+     * Adds the classes to the top-level element.
+     */
+    readonly addClass: StringConstructor;
     /**
      * This is called when the text area reveices focus.
      */

package/components/NTextArea.js

@@ -52,6 +52,14 @@ const nTextAreaBaseProps = {
    * If set to `true` the text area's label is hidden.
    */
   hideLabel: Boolean,
+  /**
+   * Adds the classes directly to the input (e.g. for shadow).
+   */
+  inputClass: String,
+  /**
+   * Adds the classes to the top-level element.
+   */
+  addClass: String,
   /**
    * This is called when the text area reveices focus.
    */
@@ -117,7 +125,7 @@ const NTextAreaBase = createComponent('NTextAreaBase', nTextAreaBaseProps, (prop
       "onFocus": () => props.onFocus?.(),
       "onBlur": () => props.onBlur?.(),
       "onInvalid": event => event.preventDefault(),
-      "class": ['block w-full rounded-md border focus:outline-none focus:ring-1 ', props.disabled ? 'text-default-500 placeholder-default-300 bg-default-50' : 'text-default-900 placeholder-default-400 ', props.error ? 'border-red-500 focus:border-red-500 focus:ring-red-500 pr-10' : 'border-default-300 focus:border-primary-500 focus:ring-primary-500', props.resizable ? 'resize-y' : 'resize-none']
+      "class": ['block w-full rounded-md border focus:outline-none focus:ring-1 ', props.disabled ? 'text-default-500 placeholder-default-300 bg-default-50' : 'text-default-900 placeholder-default-400 ', props.error ? 'border-red-500 focus:border-red-500 focus:ring-red-500 pr-10' : 'border-default-300 focus:border-primary-500 focus:ring-primary-500', props.resizable ? 'resize-y' : 'resize-none', props.inputClass]
     }, null), _withDirectives(_createVNode("div", {
       "class": "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none"
     }, [_createVNode(ExclamationCircleIcon, {

package/components/NTooltip.d.ts

@@ -38,6 +38,14 @@ export declare const nTooltipProps: {
         readonly type: PropType<TWMaxWidth>;
         readonly default: "max-w-xs";
     };
+    /**
+     * Adds the classes to the (invisible) wrapper element.
+     */
+    readonly wrapperAddClass: StringConstructor;
+    /**
+     * Adds the classes to the container of the tooltips content.
+     */
+    readonly contentAddClass: StringConstructor;
 };
 /**
  * These props are made to use on a component which implements the tooltip
@@ -79,6 +87,14 @@ export declare const nToolTipPropsForImplementor: {
         readonly type: PropType<TWMaxWidth>;
         readonly default: "max-w-xs";
     };
+    /**
+     * @see {@link nTooltipProps.wrapperAddClass}
+     */
+    tooltipWrapperAddClass: StringConstructor;
+    /**
+     * @see {@link nTooltipProps.contentAddClass}
+     */
+    tooltipContentAddClass: StringConstructor;
 };
 /**
  * Maps the {@link nToolTipPropsForImplementor} props to normal tooltip props
@@ -91,6 +107,8 @@ export declare function mapTooltipProps(props: ExtractedProps<typeof nToolTipPro
     show: boolean;
     placement: TooltipPlacement;
     maxWidth: TWMaxWidth;
+    wrapperAddClass: string | undefined;
+    contentAddClass: string | undefined;
 };
 /**
  * The `NTooltip` is a wrapper for any component which adds a tooltip to it.
@@ -139,6 +157,14 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<TWMaxWidth>;
         readonly default: "max-w-xs";
     };
+    /**
+     * Adds the classes to the (invisible) wrapper element.
+     */
+    readonly wrapperAddClass: StringConstructor;
+    /**
+     * Adds the classes to the container of the tooltips content.
+     */
+    readonly contentAddClass: 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.
@@ -175,6 +201,14 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<TWMaxWidth>;
         readonly default: "max-w-xs";
     };
+    /**
+     * Adds the classes to the (invisible) wrapper element.
+     */
+    readonly wrapperAddClass: StringConstructor;
+    /**
+     * Adds the classes to the container of the tooltips content.
+     */
+    readonly contentAddClass: StringConstructor;
 }>> & {}, {
     readonly show: boolean;
     readonly hide: boolean;

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 whitespace-normal 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

@@ -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>;
@@ -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>;
@@ -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.1.0",
+    "version": "0.1.1",
     "main": "./index.js",
     "repository": {
         "type": "git",