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

package/components/NTooltip.js

@@ -1,241 +0,0 @@
-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]])]
-  })]);
-});

package/components/NValInput.d.ts

@@ -1,159 +0,0 @@
-import { type PropType } from 'vue';
-import { type NInputExposed } from './NInput';
-import { type ValidationRule, type ValidationResult } from '../utils/validation';
-import type { ValidatedForm } from './ValidatedForm';
-export declare const validationProps: {
-    /**
-     * If set to `true` this inputs validation will always succeed and all validation
-     * rules are ignored. Default is `false`.
-     */
-    readonly disableValidation: BooleanConstructor;
-    /**
-     * If set to `true` this input is always valid when its value is empty.
-     * If set to `false` the input receives the {@link required} rule. Default is `false`.
-     */
-    readonly optional: BooleanConstructor;
-    /**
-     * The rules which this input is checked with.
-     * The rules are checked sequentially and the error of the first failed rule is displayed.
-     * If `optional` is set to false, the rule {@link required} will be checked first.
-     */
-    readonly rules: {
-        readonly type: PropType<ValidationRule[] | ValidationRule>;
-        readonly default: () => never[];
-    };
-    /**
-     * The form, which this input will be added to.
-     * On initialization, this input will call {@link ValidatedForm.addInput} passing itself to the form.
-     */
-    readonly form: PropType<ValidatedForm>;
-    /**
-     * Overrides the internal error state. If set to true, it will always display an error.
-     */
-    readonly error: BooleanConstructor;
-    /**
-     * Overrides the internal error message. If set, this message is always displayed.
-     */
-    readonly errorMessage: StringConstructor;
-    /**
-     * If set to `true` the error message is not shown.
-     * However, the input is still marked red if it is in an error state.
-     */
-    readonly hideErrorMessage: BooleanConstructor;
-    /**
-     * Disables the validation on blur. Should only be used in special occasions.
-     */
-    readonly disableBlurValidation: BooleanConstructor;
-};
-export declare const nValInputProps: {
-    /**
-     * A slot to replace the input.
-     */
-    readonly input: PropType<(props: InputSlotProps) => JSX.Element>;
-    /**
-     * If set to `true` this inputs validation will always succeed and all validation
-     * rules are ignored. Default is `false`.
-     */
-    readonly disableValidation: BooleanConstructor;
-    /**
-     * If set to `true` this input is always valid when its value is empty.
-     * If set to `false` the input receives the {@link required} rule. Default is `false`.
-     */
-    readonly optional: BooleanConstructor;
-    /**
-     * The rules which this input is checked with.
-     * The rules are checked sequentially and the error of the first failed rule is displayed.
-     * If `optional` is set to false, the rule {@link required} will be checked first.
-     */
-    readonly rules: {
-        readonly type: PropType<ValidationRule[] | ValidationRule>;
-        readonly default: () => never[];
-    };
-    /**
-     * The form, which this input will be added to.
-     * On initialization, this input will call {@link ValidatedForm.addInput} passing itself to the form.
-     */
-    readonly form: PropType<ValidatedForm>;
-    /**
-     * Overrides the internal error state. If set to true, it will always display an error.
-     */
-    readonly error: BooleanConstructor;
-    /**
-     * Overrides the internal error message. If set, this message is always displayed.
-     */
-    readonly errorMessage: StringConstructor;
-    /**
-     * If set to `true` the error message is not shown.
-     * However, the input is still marked red if it is in an error state.
-     */
-    readonly hideErrorMessage: BooleanConstructor;
-    /**
-     * Disables the validation on blur. Should only be used in special occasions.
-     */
-    readonly disableBlurValidation: BooleanConstructor;
-    readonly tooltipText: StringConstructor;
-    readonly tooltipContent: PropType<() => JSX.Element /**
-     * If set to `true` this input is always valid when its value is empty.
-     * If set to `false` the input receives the {@link required} rule. Default is `false`.
-     */>;
-    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;
-    };
-    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>;
-};
-export type InputSlotProps = {
-    onBlur(): void;
-    onUpdateValue(newValue: string): void;
-    error: boolean;
-};
-/**
- * The exposed functions of NValInput
- */
-export type NValInputExposed = {
-    /**
-     * Validates the input and returns the validation result
-     */
-    validate: () => ValidationResult;
-    /**
-     * Resets the validation state of the input.
-     */
-    reset: () => void;
-} & NInputExposed;
-/**
- * The `NValInput` is a `NInput` with custom validation.
- */
-declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
-export { Component as NValInput, Component as default };

package/components/NValInput.js

@@ -1,113 +0,0 @@
-import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
-import { createComponentWithSlots } from '../utils/component';
-import { computed, onMounted, onUnmounted } from 'vue';
-import { ref, reactive, watch } from 'vue';
-import NInput, { nInputProps } from './NInput';
-import { validate, required, validResult } from '../utils/validation';
-export const validationProps = {
-  /**
-   * If set to `true` this inputs validation will always succeed and all validation
-   * rules are ignored. Default is `false`.
-   */
-  disableValidation: Boolean,
-  /**
-   * If set to `true` this input is always valid when its value is empty.
-   * If set to `false` the input receives the {@link required} rule. Default is `false`.
-   */
-  optional: Boolean,
-  /**
-   * The rules which this input is checked with.
-   * The rules are checked sequentially and the error of the first failed rule is displayed.
-   * If `optional` is set to false, the rule {@link required} will be checked first.
-   */
-  rules: {
-    type: [Function, Array],
-    default: () => []
-  },
-  /**
-   * The form, which this input will be added to.
-   * On initialization, this input will call {@link ValidatedForm.addInput} passing itself to the form.
-   */
-  form: Object,
-  /**
-   * Overrides the internal error state. If set to true, it will always display an error.
-   */
-  error: Boolean,
-  /**
-   * Overrides the internal error message. If set, this message is always displayed.
-   */
-  errorMessage: String,
-  /**
-   * If set to `true` the error message is not shown.
-   * However, the input is still marked red if it is in an error state.
-   */
-  hideErrorMessage: Boolean,
-  /**
-   * Disables the validation on blur. Should only be used in special occasions.
-   */
-  disableBlurValidation: Boolean
-};
-export const nValInputProps = {
-  ...nInputProps,
-  ...validationProps,
-  /**
-   * A slot to replace the input.
-   */
-  input: Function
-};
-/**
- * The `NValInput` is a `NInput` with custom validation.
- */
-const Component = createComponentWithSlots('NValInput', nValInputProps, ['input'], (props, context) => {
-  const rules = computed(() => {
-    const otherRules = Array.isArray(props.rules) ? props.rules : [props.rules];
-    return props.optional ? otherRules : [required, ...otherRules];
-  });
-  const validationResult = ref();
-  const validateRules = input => {
-    const result = props.disableValidation ? validResult() : validate(input, rules.value);
-    validationResult.value = result;
-    return result;
-  };
-  const showError = computed(() => props.error || validationResult.value != null && !validationResult.value.isValid);
-  const showErrorMessage = computed(() => !props.hideErrorMessage && showError.value);
-  const errorMessage = computed(() => props.errorMessage || validationResult.value?.errorMessage);
-  const validateIfError = (value = props.value) => {
-    if (showError.value) validateRules(value);
-  };
-  watch(() => props.value, () => validateIfError());
-  watch(() => rules.value, () => validateIfError());
-  watch(() => props.disableValidation, () => validateIfError());
-  const onBlur = () => {
-    if (!props.disableBlurValidation) validateRules(props.value);
-    props.onBlur?.();
-  };
-  const onUpdateValue = newValue => {
-    validateIfError(newValue);
-    props.onUpdateValue?.(newValue);
-  };
-  const inputSlotProps = reactive({
-    onBlur,
-    onUpdateValue,
-    error: showError
-  });
-  const inputRef = ref();
-  const expose = {
-    validate: () => validateRules(props.value),
-    reset: () => validationResult.value = undefined,
-    focus: () => inputRef.value?.focus()
-  };
-  context.expose(expose);
-  let assignedId = undefined;
-  onMounted(() => assignedId = props.form?.addInput(expose));
-  onUnmounted(() => assignedId && props.form?.removeInput(assignedId));
-  return () => _createVNode("div", null, [props.input?.(inputSlotProps) || _createVNode(NInput, _mergeProps({
-    "ref": inputRef
-  }, {
-    ...props,
-    ...inputSlotProps
-  }), null), showErrorMessage.value && _createVNode("p", {
-    "class": "text-red-500 text-xs mt-1"
-  }, [errorMessage.value])]);
-});
-export { Component as NValInput, Component as default };

package/components/ValidatedForm.d.ts

@@ -1,39 +0,0 @@
-import type { ValidationResult } from '../utils/validation';
-import type { NValInputExposed } from './NValInput';
-/**
- * A ValidatedForm groups different inputs together and provides functions, which operate on all inputs at the same time.
- * With a form multiple inputs can be validated together by calling the validate function.
- * @example
- * const form = createValidatedForm()
- * <NValInput ... form={form} />
- * <NValInput ... form={form} />
- * const onClick = () => form.validate()
- */
-export type ValidatedForm = {
-    /**
-     * Adds the input to the list of this form and returns the assigned `id`.
-     * If this form is passed to a `<NValInput />` via the props, will add itself to this form.
-     * @returns the newly assigned `id` of the added input.
-     * @example
-     * <NValInput ... form={form} />
-     */
-    addInput(input: NValInputExposed): string;
-    /**
-     * Removes the input with the given `id` from this form.
-     */
-    removeInput(id: string): void;
-    /**
-     * Validates all inputs of the form. If inputs are invalid they will show it visually.
-     * The first invalid validation result is returned.
-     */
-    validate(): ValidationResult;
-    /**
-     * Resets the validation state of all inputs.
-     */
-    reset(): void;
-};
-/**
- * Creates a new ValidatedForm.
- * @returns the instance of the new form.
- */
-export declare function createValidatedForm(): ValidatedForm;

package/components/ValidatedForm.js

@@ -1,35 +0,0 @@
-import { Id } from '../utils/identifiable';
-import { uniqueId } from '../utils/utils';
-/**
- * Creates a new ValidatedForm.
- * @returns the instance of the new form.
- */
-export function createValidatedForm() {
-  return new ValidatedFormImpl();
-}
-class ValidatedFormImpl {
-  inputs = [];
-  addInput(input) {
-    const id = `input-${uniqueId()}`;
-    this.inputs.push({
-      id,
-      ...input
-    });
-    return id;
-  }
-  removeInput(id) {
-    Id.remove(this.inputs, id);
-  }
-  validate() {
-    const results = this.inputs.map(input => input.validate());
-    // return first invalid result
-    for (const result of results) if (result && !result.isValid) return result;
-    // else return valid result
-    return {
-      isValid: true
-    };
-  }
-  reset() {
-    this.inputs.forEach(input => input.reset());
-  }
-}

package/i18n/de/vue-collection.json

@@ -1,58 +0,0 @@
-{
-    "title": {},
-    "subtitle": {},
-    "text": {
-        "loading-search-results": "Ergebnisse werden geladen...",
-        "no-search-results": "Keine Ergebnisse für «{input}».",
-        "drag-n-drop-files": "Datei auswählen oder per Drag & Drop hinzufügen. | Bis zu {n} Dateien auswählen oder per Drag & Drop hinzufügen.",
-        "files-selected": "Keine Datei ausgewählt. | Eine Datei ausgewählt. | {n} Dateien ausgewählt."
-    },
-    "property": {},
-    "term": {},
-    "action": {
-        "search": "Suchen",
-        "select": "Auswählen",
-        "remove": "Löschen",
-        "cancel": "Abbrechen",
-        "all-right": "Alles klar",
-        "proceed": "Fortfahren",
-        "save": "Speichern",
-        "clear-files": "Auswahl löschen."
-    },
-    "enum": {},
-    "error": {
-        "file-type": "Eine Datei wurde nicht hinzugefügt, da sie im falschen Format ist. | {n} Dateien wurden nicht hinzugefügt, da sie im falschen Format sind.",
-        "file-size": "Eine Datei wurde nicht hinzugefügt, da sie zu gross ist. | {n} Dateien wurden nicht hinzugefügt, da sie zu gross sind.",
-        "too-many-files": "Es kann nur eine Datei hinzugefügt werden. | Es können nicht mehr als {n} Dateien hinzugefügt werden."
-    },
-    "validation": {
-        "rules": {
-            "email": "Dieses Feld muss eine gültige Email-Adresse sein.",
-            "integer": "Dieses Feld muss eine Ganzzahl sein.",
-            "length": {
-                "min": "Der Text darf nicht weniger als {min} Zeichen enthalten.",
-                "max": "Der Text darf nicht mehr als {max} Zeichen enthalten.",
-                "min-max": "Der Text muss zwischen {min} und {max} Zeichen enthalten."
-            },
-            "matches": "Die Felder stimmen nicht überein.",
-            "number-range": {
-                "nan": "Dieses Feld muss eine Zahl sein.",
-                "min": "Die Zahl darf nicht kleiner als {min} sein.",
-                "max": "Die Zahl darf nicht grösser als {max} sein.",
-                "min-max": "Die Zahl muss im Bereich von {min} bis {max} liegen."
-            },
-            "option": "Dieses Feld muss eine Option aus der Liste sein.",
-            "password": {
-                "to-short": "Das Passwort muss aus mindestens 8 Zeichen bestehen.",
-                "no-lowercase": "Das Passwort muss einen Kleinbuchstaben enthalten.",
-                "no-uppercase": "Das Passwort muss einen Grossbuchstaben enthalten.",
-                "no-digits": "Das Passwort muss eine Ziffer enthalten.",
-                "no-special-chars": "Das Passwort muss ein Sonderzeichen enthalten.",
-                "unknown": "Dieses Feld erfüllt nicht die Anforderungen für ein Passwort."
-            },
-            "phone": "Dieses Feld muss eine gültige Telefonnummer sein.",
-            "required": "Dieses Feld ist ein Pflichtfeld.",
-            "regex": "Dieses Feld entspricht nicht dem geforderten Format."
-        }
-    }
-}