@naptics/vue-collection 0.0.2 → 0.0.4

package/components/NTable.js

@@ -0,0 +1,126 @@
+import { Fragment as _Fragment, createVNode as _createVNode } from "vue";
+import { isWidthBreakpoint } from '../utils/breakpoints';
+import { createComponent, createProps } from '../utils/component';
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/vue/24/solid';
+import { computed, Fragment, ref, watch } from 'vue';
+import NIconButton from './NIconButton';
+import './NTable.css';
+const N_TABLE_ACTION_KEY = 'action';
+export const nTableProps = createProps({
+  /**
+   * The headings of the table. These define which columns are shown in the table and in which order.
+   */
+  headings: {
+    type: Array,
+    required: true
+  },
+  /**
+   * Details can be added additionally to headings.
+   * If details are set a little chevron icon is displayed at the end of each table row
+   * and if clicked on it the data is displayed in a key-value fashion.
+   * The values of the entries should be passed via the `items` prop
+   * in the same way as if the details were normal headings.
+   * Note that details can be added dynamically by adding the `breakpoint` property to the headings.
+   */
+  details: {
+    type: Array,
+    default: () => []
+  },
+  /**
+   * The items of the table. They consist of an array of table rows.
+   * Every tablerow is an object containing elements for the heading keys.
+   * The elements can either be a primitive value or a function which returns a {@link JSX.Element}.
+   * If the item should be treated as an action (e.g. icon-button to display at the end of the row)
+   * the dedicated key 'action' can be used.
+   * @see TableRow
+   * @example
+   * // These headings are defined
+   * const headings: TableHeading[] = [
+   *    { key: 'id', label: 'ID' },
+   *    { key: 'name', label: 'Name' },
+   *    { key: 'status', label: 'Status' }
+   * ]
+   *
+   * // Appropriate rows for these headings
+   * const items: TableRow[] = [
+   *      { id: 1, name: 'Hubert', status: () => <NBadge ... />, action: ... },   // Row 1
+   *      { id: 2, name: 'Franzi', status: () => <NBadge ... />, action: ... }    // Row 2
+   * ]
+   */
+  items: {
+    type: Array,
+    default: () => []
+  }
+});
+/**
+ * The `NTable` is a styled html table which accepts data and displays it appropriately.
+ */
+export default createComponent('NTable', nTableProps, props => {
+  const headings = computed(() => {
+    // remove all headings which are below the breakpoint
+    const headings = props.headings.filter(heading => !heading.breakpoint || isWidthBreakpoint(heading.breakpoint).value);
+    // The column for actions is shown if there are details
+    // or if any of the items contain an element with the action-key.
+    if (showDetails.value || props.items.filter(row => row.action != null).length != 0) {
+      headings.push({
+        key: N_TABLE_ACTION_KEY
+      });
+    }
+    return headings;
+  });
+  const details = computed(() => {
+    // take all headings which are below the breakpoint
+    const details = props.headings.filter(heading => heading.breakpoint && !isWidthBreakpoint(heading.breakpoint).value);
+    details.push(...props.details);
+    return details;
+  });
+  const showDetails = computed(() => details.value.length > 0);
+  const detailsOpen = ref([]);
+  const isDetailsOpen = index => detailsOpen.value[index] || false;
+  const toggleDetailsOpen = index => detailsOpen.value[index] = !detailsOpen.value[index];
+  // if the items change, reset all open details to closed
+  // and create correct amount of booleans for all items
+  watch(() => props.items, newItems => detailsOpen.value = Array({
+    length: newItems.length
+  }).map(() => false), {
+    immediate: true
+  });
+  return () => _createVNode("div", {
+    "class": "overflow-x-auto"
+  }, [_createVNode("table", {
+    "class": "min-w-full text-default-500 text-sm"
+  }, [_createVNode("thead", {
+    "class": "bg-default-50 "
+  }, [_createVNode("tr", null, [headings.value.map(heading => _createVNode("th", {
+    "key": heading.key,
+    "scope": "col",
+    "class": "p-4 table-heading"
+  }, [heading.label]))])]), props.items.length > 0 && props.items.map((item, itemIndex) => _createVNode(_Fragment, {
+    "key": itemIndex
+  }, [_createVNode("tbody", {
+    "class": ['border-default-200 border-t', itemIndex % 2 === 0 ? 'bg-white' : 'bg-default-50']
+  }, [_createVNode("tr", null, [headings.value.map(heading => _createVNode("td", {
+    "key": itemIndex + '-' + heading.key,
+    "class": "p-4"
+  }, [_createVNode("div", {
+    "class": ['flex', heading.emph ? 'font-medium text-default-900' : '', heading.cellClass, heading.key == N_TABLE_ACTION_KEY ? 'justify-end items-center space-x-3' : '']
+  }, [item[heading.key] && buildItem(item[heading.key]), heading.key == N_TABLE_ACTION_KEY && showDetails.value && _createVNode(NIconButton, {
+    "icon": isDetailsOpen(itemIndex) ? ChevronDownIcon : ChevronUpIcon,
+    "onClick": () => toggleDetailsOpen(itemIndex)
+  }, null)])]))])]), showDetails.value && isDetailsOpen(itemIndex) && _createVNode("tbody", {
+    "class": itemIndex % 2 === 0 ? 'bg-white' : 'bg-default-50'
+  }, [details.value.map((detail, detailIndex) => _createVNode("tr", {
+    "key": `detail-${detailIndex}`
+  }, [_createVNode("td", {
+    "class": ['table-heading px-4 py-1', details.value.length - 1 == detailIndex ? 'pb-4' : '']
+  }, [detail.label]), _createVNode("td", {
+    "class": ['px-4 py-1', details.value.length - 1 == detailIndex ? 'pb-4' : ''],
+    "colspan": headings.value.length - 1
+  }, [item[detail.key] && buildItem(item[detail.key])])]))])]))])]);
+});
+/**
+ * Builds a JSX-Element out of the item
+ */
+function buildItem(item) {
+  if (typeof item == 'string' || typeof item == 'number') return _createVNode(_Fragment, null, [item]);else return item();
+}

package/components/NTableAction.js

@@ -0,0 +1,49 @@
+import { isVNode as _isVNode, createVNode as _createVNode, Fragment as _Fragment } from "vue";
+import { createComponent, createProps } 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 = createProps({
+  /**
+   * 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.
+ */
+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';
+  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()]);
+  };
+});

package/components/NTextArea.d.ts

@@ -241,10 +241,10 @@ declare const _default: import("vue").DefineComponent<{
     tooltipMaxWidth: import("../utils/tailwind").TWMaxWidth;
     disabled: boolean;
     error: boolean;
-    rules: import("../utils/validation").ValidationRule | import("../utils/validation").ValidationRule[];
     autocomplete: string;
     hideLabel: boolean;
     optional: boolean;
+    rules: import("../utils/validation").ValidationRule | import("../utils/validation").ValidationRule[];
     hideErrorMessage: boolean;
     disableBlurValidation: boolean;
     resizable: boolean;

package/components/NTextArea.js

@@ -0,0 +1,128 @@
+import { withDirectives as _withDirectives, vShow as _vShow, createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import { createComponent, createProps } 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 = createProps({
+  ...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,
+  /**
+   * 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 = createProps({
+  ...nTextAreaBaseProps,
+  ...validationProps
+});
+export default 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);
+});
+/**
+ * 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-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']
+    }, 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/components/NTooltip.js

@@ -0,0 +1,178 @@
+import { withDirectives as _withDirectives, vShow as _vShow, Fragment as _Fragment, createVNode as _createVNode } from "vue";
+import { createComponent, createProps } 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 = createProps({
+  /**
+   * 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'
+  }
+});
+/**
+ * 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
+};
+/**
+ * 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
+  };
+}
+/**
+ * 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>
+ */
+export default createComponent('NTooltip', nTooltipProps, (props, {
+  slots
+}) => {
+  return () => _createVNode("div", {
+    "class": props.block ? 'block' : 'inline-block'
+  }, [props.content || props.text ? _createVNode(NTooltipBase, props, {
+    default: () => [slots.default?.()]
+  }) : slots.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(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 showTooltip = computed(() => props.show || !props.hide && isHovering.value);
+  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 font-normal text-default-700"
+    }, [props.content?.() || props.text]), _createVNode("div", {
+      "data-popper-arrow": true,
+      "class": "arrow"
+    }, null)]), [[_vShow, showTooltip.value]])]
+  })]);
+});

package/components/NValInput.d.ts

@@ -287,10 +287,10 @@ declare const _default: import("vue").DefineComponent<{
     tooltipMaxWidth: import("../utils/tailwind").TWMaxWidth;
     disabled: boolean;
     error: boolean;
-    rules: ValidationRule | ValidationRule[];
     autocomplete: string;
     hideLabel: boolean;
     optional: boolean;
+    rules: ValidationRule | ValidationRule[];
     hideErrorMessage: boolean;
     disableBlurValidation: boolean;
 }>;

package/components/NValInput.js

@@ -0,0 +1,104 @@
+import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import { createComponent, createProps } from '../utils/component';
+import { computed } from 'vue';
+import { ref, reactive, watch } from 'vue';
+import NInput, { nInputProps } from './NInput';
+import { validate, required } from '../utils/validation';
+export const validationProps = createProps({
+  /**
+   * 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 = createProps({
+  ...nInputProps,
+  ...validationProps,
+  /**
+   * A slot to replace the input.
+   */
+  input: Function
+});
+/**
+ * The `NValInput` is a `NInput` with custom validation.
+ */
+export default createComponent('NValInput', nValInputProps, (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 = 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());
+  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);
+  props.form?.addInput(expose);
+  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])]);
+});

package/components/ValidatedForm.js

@@ -3,23 +3,23 @@
  * @returns the instance of the new form.
  */
 export function createValidatedForm() {
-    return new ValidatedFormImpl();
+  return new ValidatedFormImpl();
 }
 class ValidatedFormImpl {
-    inputs = [];
-    addInput(input) {
-        this.inputs.push(input);
-    }
-    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());
-    }
-}
+  inputs = [];
+  addInput(input) {
+    this.inputs.push(input);
+  }
+  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/index.d.ts

@@ -1,3 +1,26 @@
+import type { Nullish } from '../utils/utils';
+/**
+ * @see {@link trsl}
+ */
+export type TranslationFunction = typeof trsl;
+/**
+ * @see {@link trslc}
+ */
+export type TranslationCountFunction = typeof trslc;
+/**
+ * A `TranslationProvider` has to implement the two functions `trsl` and `trslc`.
+ */
+export type TranslationProvider = {
+    trsl: TranslationFunction;
+    trslc: TranslationCountFunction;
+};
+/**
+ * Registeres a new translation provider for vue-collection.
+ * The translation provider should contain all vue-collection
+ * texts located under `i18n/<lang>/vue-collection.json`.
+ * @param newProvider
+ */
+export declare function registerTranslationProvider(newProvider: TranslationProvider): void;
 /**
  * Translates the specified key with the according message.
  * @param key the key to translate.
@@ -14,4 +37,4 @@ export declare function trsl(key: string, params?: Record<string, unknown>): str
  * @returns the translated message.
  * @see trsl
  */
-export declare function trslc(key: string, count: number | null | undefined, params?: Record<string, unknown>): string;
+export declare function trslc(key: string, count: Nullish<number>, params?: Record<string, unknown>): string;