@naptics/vue-collection 1.0.0-beta.1 → 1.0.0-beta.3

package/lib/components/NTableAction.js

@@ -0,0 +1,50 @@
+import { Fragment as _Fragment, createVNode as _createVNode, isVNode as _isVNode } from "vue";
+import { createComponent } from '../utils/component';
+import { RouterLink } from 'vue-router';
+import { nButtonProps } from './NButton';
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
+}
+export const nTableActionProps = {
+  /**
+   * The route of the action. If set the component will be a {@link RouterLink}.
+   */
+  route: [String, Object],
+  /**
+   * The text of the action.
+   */
+  text: String,
+  /**
+   * The html attribute, which indicates the type of the button.
+   */
+  type: nButtonProps.type,
+  /**
+   * This is called when the action is clicked.
+   * It is only called when the `route` prop is not set on the action.
+   */
+  onClick: Function
+};
+/**
+ * The `NTableAction` is a button or {@link RouterLink} which is styled to fit into a table.
+ * It is basically styled as an emphasized text in the table.
+ */
+const Component = createComponent('NTableAction', nTableActionProps, (props, {
+  slots
+}) => {
+  const content = () => slots.default?.() || _createVNode(_Fragment, null, [props.text]);
+  const classes = ['text-left font-medium focus:outline-hidden focus-visible:ring-2 focus-visible:ring-default-900 rounded-xs ring-offset-2 text-default-900 hover:underline hover:text-default-700 cursor-pointer'];
+  return () => {
+    let _slot;
+    return props.route ? _createVNode(RouterLink, {
+      "to": props.route,
+      "class": classes
+    }, _isSlot(_slot = content()) ? _slot : {
+      default: () => [_slot]
+    }) : _createVNode("button", {
+      "type": props.type,
+      "class": classes,
+      "onClick": props.onClick
+    }, [content()]);
+  };
+});
+export { Component as NTableAction, Component as default };

package/lib/components/NTextArea.d.ts

@@ -0,0 +1,96 @@
+import { type PropType } from 'vue';
+export declare const nTextAreaProps: {
+    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 tooltipDelay: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    /**
+     * The name of the text area. Is displayed as a label above the text area.
+     */
+    readonly name: StringConstructor;
+    /**
+     * The placeholder of the text area.
+     */
+    readonly placeholder: StringConstructor;
+    /**
+     * The html autocomplete attribute of the text area.
+     */
+    readonly autocomplete: {
+        readonly type: StringConstructor;
+        readonly default: "off";
+    };
+    /**
+     * If set to `true`, the text area is resizable in y-direction.
+     */
+    readonly resizable: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    /**
+     * The initial height of the text area in terms of
+     * how many text rows fit inside the text area.
+     * The height can be change if {@link nTextAreaProps.resizable} is `true`
+     */
+    readonly rows: NumberConstructor;
+    /**
+     * The maximum length of the input string. Entering longer strings are simply
+     * prevented, but no error message is shown to the user.
+     */
+    readonly maxLength: NumberConstructor;
+    /**
+     * If set to `true` the text area is disabled and no interaction is possible.
+     */
+    readonly disabled: BooleanConstructor;
+    /**
+     * 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;
+    /**
+     * This is called when the text area reveices focus.
+     */
+    readonly onFocus: PropType<() => void>;
+    /**
+     * This is called when the text area looses focus.
+     */
+    readonly onBlur: PropType<() => void>;
+    readonly value: PropType<string>;
+    readonly onUpdateValue: PropType<(newValue: string) => void>;
+};
+export type NTextAreaExposed = {
+    /**
+     * Request focus on the text area.
+     */
+    focus(): void;
+};
+declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
+export { Component as NTextArea, Component as default };

package/lib/components/NTextArea.js

@@ -0,0 +1,133 @@
+import { mergeProps as _mergeProps, createVNode as _createVNode, vShow as _vShow, withDirectives as _withDirectives } from "vue";
+import { createComponent } from '../utils/component';
+import { ref } from 'vue';
+import { ExclamationCircleIcon } from '@heroicons/vue/24/solid';
+import NTooltip, { mapTooltipProps, nToolTipPropsForImplementor } from './NTooltip';
+import { vModelProps } from '../utils/vModel';
+import NValInput, { validationProps } from './NValInput';
+const nTextAreaBaseProps = {
+  ...vModelProps(String),
+  /**
+   * The name of the text area. Is displayed as a label above the text area.
+   */
+  name: String,
+  /**
+   * The placeholder of the text area.
+   */
+  placeholder: String,
+  /**
+   * The html autocomplete attribute of the text area.
+   */
+  autocomplete: {
+    type: String,
+    default: 'off'
+  },
+  /**
+   * If set to `true`, the text area is resizable in y-direction.
+   */
+  resizable: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * The initial height of the text area in terms of
+   * how many text rows fit inside the text area.
+   * The height can be change if {@link nTextAreaProps.resizable} is `true`
+   */
+  rows: Number,
+  /**
+   * The maximum length of the input string. Entering longer strings are simply
+   * prevented, but no error message is shown to the user.
+   */
+  maxLength: Number,
+  /**
+   * If set to `true` the text area is displayed with a red border.
+   */
+  error: Boolean,
+  /**
+   * If set to `true` the text area is disabled and no interaction is possible.
+   */
+  disabled: Boolean,
+  /**
+   * 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,
+  /**
+   * This is called when the text area reveices focus.
+   */
+  onFocus: Function,
+  /**
+   * This is called when the text area looses focus.
+   */
+  onBlur: Function,
+  ...nToolTipPropsForImplementor
+};
+export const nTextAreaProps = {
+  ...nTextAreaBaseProps,
+  ...validationProps
+};
+const Component = createComponent('NTextArea', nTextAreaProps, (props, context) => {
+  const textAreaRef = ref();
+  const exposed = {
+    focus: () => textAreaRef.value?.focus()
+  };
+  context.expose(exposed);
+  return () => _createVNode(NValInput, _mergeProps(props, {
+    "input": ({
+      error,
+      onBlur,
+      onUpdateValue
+    }) => _createVNode(NTextAreaBase, _mergeProps({
+      "ref": textAreaRef
+    }, {
+      ...props,
+      error,
+      onBlur,
+      onUpdateValue
+    }), null)
+  }), null);
+});
+export { Component as NTextArea, Component as default };
+/**
+ * The `NTextArea` wraps the html text area with all the features from {@link NInput} and {@link NValInput}.
+ */
+const NTextAreaBase = createComponent('NTextAreaBase', nTextAreaBaseProps, (props, context) => {
+  const textAreaRef = ref();
+  const exposed = {
+    focus: () => textAreaRef.value?.focus()
+  };
+  context.expose(exposed);
+  return () => _createVNode("div", null, [props.name && !props.hideLabel && _createVNode("label", {
+    "for": props.name,
+    "class": ['block text-sm font-medium mb-1', props.disabled ? 'text-default-300' : 'text-default-700']
+  }, [props.name]), _createVNode(NTooltip, _mergeProps({
+    "block": true
+  }, mapTooltipProps(props)), {
+    default: () => [_createVNode("div", {
+      "class": "relative"
+    }, [_createVNode("textarea", {
+      "ref": textAreaRef,
+      "name": props.name,
+      "value": props.value,
+      "onInput": event => props.onUpdateValue?.(event.target.value),
+      "placeholder": props.placeholder,
+      "autocomplete": props.autocomplete,
+      "disabled": props.disabled,
+      "rows": props.rows,
+      "maxlength": props.maxLength,
+      "onFocus": () => props.onFocus?.(),
+      "onBlur": () => props.onBlur?.(),
+      "onInvalid": event => event.preventDefault(),
+      "class": ['block w-full rounded-md border focus:outline-hidden 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, {
+      "class": "h-5 w-5 text-red-700",
+      "aria-hidden": "true"
+    }, null)]), [[_vShow, props.error]])])]
+  })]);
+});

package/{src/lib → lib}/components/NTooltip.css

@@ -1,4 +1,4 @@
-@reference "../../demo/App.css";
+@reference "tailwindcss";
 
 .arrow,
 .arrow::before {

package/lib/components/NTooltip.d.ts

@@ -0,0 +1,152 @@
+import { type ExtractedProps } from '../utils/component';
+import type { TWMaxWidth } from '../utils/tailwind';
+import { type PropType } from 'vue';
+import './NTooltip.css';
+export declare const nTooltipProps: {
+    /**
+     * The text content of the tooltip.
+     */
+    readonly text: StringConstructor;
+    /**
+     * A slot to replace the content of the tooltip. This will override the `text` prop.
+     */
+    readonly content: PropType<() => JSX.Element>;
+    /**
+     * If set to `true` the tooltip is shown constantly.
+     */
+    readonly show: BooleanConstructor;
+    /**
+     * If set to `true` the tooltip is hidden constantly.
+     */
+    readonly hide: BooleanConstructor;
+    /**
+     * If set to `true` the `block` class is applied to the tooltip.
+     * This should be set if the content in the default slot is also block.
+     */
+    readonly block: BooleanConstructor;
+    /**
+     * The placement of the tooltip.
+     */
+    readonly placement: {
+        readonly type: PropType<TooltipPlacement>;
+        readonly default: "auto";
+    };
+    /**
+     * The maximum width of the tooltip.
+     */
+    readonly maxWidth: {
+        readonly type: PropType<TWMaxWidth>;
+        readonly default: "max-w-xs";
+    };
+    /**
+     * Adds the classes to the (invisible) wrapper element.
+     */
+    readonly wrapperClass: StringConstructor;
+    /**
+     * Adds the classes to the container of the tooltips content.
+     */
+    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;
+    /**
+     * The delay in milliseconds before the tooltip is shown.
+     * @default 0
+     */
+    readonly delay: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+};
+/**
+ * These props are made to use on a component which implements the tooltip
+ * and wants it to be controllable via the own props.
+ * e.g. `text` is now called `tooltipText`.
+ * They can be mapped to the normal tooltip props with {@link mapTooltipProps}
+ */
+export declare const nToolTipPropsForImplementor: {
+    /**
+     * Adds a tooltip to the component with the specified text.
+     * @see {@link nTooltipProps.text}
+     */
+    tooltipText: StringConstructor;
+    /**
+     * A slot for the tooltip of this component.
+     * If the slot is set, the tooltip with the specified content is added to the component.
+     * @see {@link nTooltipProps.content}
+     */
+    tooltipContent: PropType<() => JSX.Element>;
+    /**
+     * @see {@link nTooltipProps.hide}
+     */
+    tooltipHide: BooleanConstructor;
+    /**
+     * @see {@link nTooltipProps.show}
+     */
+    tooltipShow: BooleanConstructor;
+    /**
+     * @see {@link nTooltipProps.placement}
+     */
+    tooltipPlacement: {
+        readonly type: PropType<TooltipPlacement>;
+        readonly default: "auto";
+    };
+    /**
+     * @see {@link nTooltipProps.maxWidth}
+     */
+    tooltipMaxWidth: {
+        readonly type: PropType<TWMaxWidth>;
+        readonly default: "max-w-xs";
+    };
+    /**
+     * @see {@link nTooltipProps.wrapperClass}
+     */
+    tooltipWrapperClass: StringConstructor;
+    /**
+     * @see {@link nTooltipProps.contentClass}
+     */
+    tooltipContentClass: StringConstructor;
+    /**
+     * @see {@link nTooltipProps.arrowClass}
+     */
+    tooltipArrowClass: StringConstructor;
+    /**
+     * @see {@link nTooltipProps.delay}
+     */
+    tooltipDelay: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+};
+/**
+ * Maps the {@link nToolTipPropsForImplementor} props to normal tooltip props
+ * @returns an object containing the normal tooltip props.
+ */
+export declare function mapTooltipProps(props: ExtractedProps<typeof nToolTipPropsForImplementor>): {
+    text: string | undefined;
+    content: (() => JSX.Element) | undefined;
+    hide: boolean;
+    show: boolean;
+    placement: TooltipPlacement;
+    maxWidth: TWMaxWidth;
+    wrapperClass: string | undefined;
+    contentClass: string | undefined;
+    arrowClass: string | undefined;
+    delay: number;
+};
+/**
+ * The `NTooltip` is a wrapper for any component which adds a tooltip to it.
+ * Any component can just be passed in the default slot and a tooltip will be added to it.
+ * Note that this component disappears when neither the `text` nor the `content`
+ * prop is passed as the tooltip would then be empty.
+ * If this is the case, the default slot will just be rendered inside a div.
+ * @example
+ * <NTooltip text="Hello">
+ *      <NButton />
+ * </NTooltip>
+ */
+declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
+export { Component as NTooltip, Component as default };
+export type TooltipPlacement = 'auto' | 'auto-start' | 'auto-end' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';

package/lib/components/NTooltip.js

@@ -0,0 +1,241 @@
+import { createVNode as _createVNode, Fragment as _Fragment, vShow as _vShow, withDirectives as _withDirectives } from "vue";
+import { createComponent } from '../utils/component';
+import { uniqueId } from '../utils/utils';
+import { computed, onMounted, ref, watch, onUnmounted, Transition } from 'vue';
+import { createPopper } from '@popperjs/core';
+import { watchRef } from '../utils/vue';
+import './NTooltip.css';
+export const nTooltipProps = {
+  /**
+   * The text content of the tooltip.
+   */
+  text: String,
+  /**
+   * A slot to replace the content of the tooltip. This will override the `text` prop.
+   */
+  content: Function,
+  /**
+   * If set to `true` the tooltip is shown constantly.
+   */
+  show: Boolean,
+  /**
+   * If set to `true` the tooltip is hidden constantly.
+   */
+  hide: Boolean,
+  /**
+   * If set to `true` the `block` class is applied to the tooltip.
+   * This should be set if the content in the default slot is also block.
+   */
+  block: Boolean,
+  /**
+   * The placement of the tooltip.
+   */
+  placement: {
+    type: String,
+    default: 'auto'
+  },
+  /**
+   * The maximum width of the tooltip.
+   */
+  maxWidth: {
+    type: String,
+    default: 'max-w-xs'
+  },
+  /**
+   * Adds the classes to the (invisible) wrapper element.
+   */
+  wrapperClass: String,
+  /**
+   * Adds the classes to the container of the tooltips content.
+   */
+  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,
+  /**
+   * The delay in milliseconds before the tooltip is shown.
+   * @default 0
+   */
+  delay: {
+    type: Number,
+    default: 0
+  }
+};
+/**
+ * These props are made to use on a component which implements the tooltip
+ * and wants it to be controllable via the own props.
+ * e.g. `text` is now called `tooltipText`.
+ * They can be mapped to the normal tooltip props with {@link mapTooltipProps}
+ */
+export const nToolTipPropsForImplementor = {
+  /**
+   * Adds a tooltip to the component with the specified text.
+   * @see {@link nTooltipProps.text}
+   */
+  tooltipText: nTooltipProps.text,
+  /**
+   * A slot for the tooltip of this component.
+   * If the slot is set, the tooltip with the specified content is added to the component.
+   * @see {@link nTooltipProps.content}
+   */
+  tooltipContent: nTooltipProps.content,
+  /**
+   * @see {@link nTooltipProps.hide}
+   */
+  tooltipHide: nTooltipProps.hide,
+  /**
+   * @see {@link nTooltipProps.show}
+   */
+  tooltipShow: nTooltipProps.show,
+  /**
+   * @see {@link nTooltipProps.placement}
+   */
+  tooltipPlacement: nTooltipProps.placement,
+  /**
+   * @see {@link nTooltipProps.maxWidth}
+   */
+  tooltipMaxWidth: nTooltipProps.maxWidth,
+  /**
+   * @see {@link nTooltipProps.wrapperClass}
+   */
+  tooltipWrapperClass: nTooltipProps.wrapperClass,
+  /**
+   * @see {@link nTooltipProps.contentClass}
+   */
+  tooltipContentClass: nTooltipProps.contentClass,
+  /**
+   * @see {@link nTooltipProps.arrowClass}
+   */
+  tooltipArrowClass: nTooltipProps.arrowClass,
+  /**
+   * @see {@link nTooltipProps.delay}
+   */
+  tooltipDelay: nTooltipProps.delay
+};
+/**
+ * Maps the {@link nToolTipPropsForImplementor} props to normal tooltip props
+ * @returns an object containing the normal tooltip props.
+ */
+export function mapTooltipProps(props) {
+  return {
+    text: props.tooltipText,
+    content: props.tooltipContent,
+    hide: props.tooltipHide,
+    show: props.tooltipShow,
+    placement: props.tooltipPlacement,
+    maxWidth: props.tooltipMaxWidth,
+    wrapperClass: props.tooltipWrapperClass,
+    contentClass: props.tooltipContentClass,
+    arrowClass: props.tooltipArrowClass,
+    delay: props.tooltipDelay
+  };
+}
+/**
+ * The `NTooltip` is a wrapper for any component which adds a tooltip to it.
+ * Any component can just be passed in the default slot and a tooltip will be added to it.
+ * Note that this component disappears when neither the `text` nor the `content`
+ * prop is passed as the tooltip would then be empty.
+ * If this is the case, the default slot will just be rendered inside a div.
+ * @example
+ * <NTooltip text="Hello">
+ *      <NButton />
+ * </NTooltip>
+ */
+const Component = createComponent('NTooltip', nTooltipProps, (props, {
+  slots
+}) => {
+  return () => _createVNode("div", {
+    "class": [props.block ? 'block' : 'inline-block', props.wrapperClass]
+  }, [props.content || props.text ? _createVNode(NTooltipBase, props, {
+    default: () => [slots.default?.()]
+  }) : slots.default?.()]);
+});
+export { Component as NTooltip, Component as default };
+const NTooltipBase = createComponent('NTooltipBase', nTooltipProps, (props, {
+  slots
+}) => {
+  let popperInstance = null;
+  const contentId = `content-${uniqueId()}`;
+  const tooltipId = `tooltip-${uniqueId()}`;
+  function createTooltip() {
+    const content = document.getElementById(contentId);
+    const tooltip = document.getElementById(tooltipId);
+    if (content && tooltip) {
+      popperInstance = createPopper(content, tooltip, {
+        placement: props.placement,
+        modifiers: [{
+          name: 'offset',
+          options: {
+            offset: [0, 8]
+          }
+        }]
+      });
+    } else {
+      console.error('Could not create tooltip. HTML elements for content or tooltip were not found.');
+    }
+  }
+  function destroyTooltip() {
+    popperInstance?.destroy();
+    popperInstance = null;
+  }
+  onMounted(createTooltip);
+  onUnmounted(() => {
+    if (hoverTimeout) {
+      clearTimeout(hoverTimeout);
+    }
+    destroyTooltip();
+  });
+  watch(() => props.placement, newPlacement => popperInstance?.setOptions({
+    placement: newPlacement
+  }));
+  const isHoveringContent = ref(false);
+  const isHoveringTooltip = ref(false);
+  const isHovering = computed(() => isHoveringContent.value || isHoveringTooltip.value);
+  const delayedIsHovering = ref(false);
+  let hoverTimeout = null;
+  const showTooltip = computed(() => props.show || !props.hide && (props.delay > 0 ? delayedIsHovering.value : isHovering.value));
+  watch(isHovering, hovering => {
+    if (hoverTimeout) {
+      clearTimeout(hoverTimeout);
+      hoverTimeout = null;
+    }
+    if (hovering && props.delay > 0) {
+      hoverTimeout = setTimeout(() => {
+        delayedIsHovering.value = true;
+        hoverTimeout = null;
+      }, props.delay);
+    } else {
+      delayedIsHovering.value = hovering;
+    }
+  });
+  watchRef(showTooltip, () => popperInstance?.update());
+  return () => _createVNode(_Fragment, null, [_createVNode("div", {
+    "class": "p-[10px] m-[-10px]",
+    "onMouseleave": () => setTimeout(() => isHoveringContent.value = false, 10)
+  }, [_createVNode("div", {
+    "id": contentId,
+    "onMouseenter": () => isHoveringContent.value = true
+  }, [slots.default?.()])]), _createVNode(Transition, {
+    "enterActiveClass": "transition-opacity ease-out duration-100",
+    "enterFromClass": "opacity-0",
+    "enterToClass": "opacity-100",
+    "leaveActiveClass": "transition-opacity ease-in duration-75",
+    "leaveFromClass": "opacity-100",
+    "leaveToClass": "opacity-0"
+  }, {
+    default: () => [_withDirectives(_createVNode("div", {
+      "id": tooltipId,
+      "role": "tooltip",
+      "onMouseenter": () => isHoveringTooltip.value = true,
+      "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.contentClass}`
+    }, [props.content?.() || props.text]), _createVNode("div", {
+      "data-popper-arrow": true,
+      "class": `arrow ${props.arrowClass}`
+    }, null)]), [[_vShow, showTooltip.value]])]
+  })]);
+});