@naptics/vue-collection 0.0.3 → 0.0.5

package/components/NInputPhone.js

@@ -0,0 +1,46 @@
+import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
+import { createComponent, createProps } from '../utils/component';
+import { external } from '../utils/validation';
+import { computed, Suspense } from 'vue';
+import NValInput, { nValInputProps } from './NValInput';
+import { trsl } from '../i18n';
+export const nInputPhoneProps = createProps(nValInputProps);
+/**
+ * The `NInputPhone` autoformats phone numbers and checks if they are valid.
+ */
+export default createComponent('NInputPhoneSuspended', nInputPhoneProps, props => {
+  // Async components have to be wrapped in a suspense component.
+  return () => _createVNode(Suspense, null, {
+    default: () => [_createVNode(NPhoneInput, props, null)]
+  });
+});
+const NPhoneInput = createComponent('NInputPhone', nInputPhoneProps, async props => {
+  // import dynamically for better codesplitting as the library is pretty large
+  const {
+    parsePhoneNumber
+  } = await import('awesome-phonenumber');
+  const DEFAULT_COUNTRY_CODE = 'CH';
+  const formattedToPlain = number => parsePhoneNumber(number, {
+    regionCode: DEFAULT_COUNTRY_CODE
+  }).number?.e164;
+  const plainToFormatted = number => parsePhoneNumber(number, {
+    regionCode: DEFAULT_COUNTRY_CODE
+  }).number?.international;
+  const onUpdateValue = newValue => {
+    const plain = formattedToPlain(newValue);
+    props.onUpdateValue?.(plain || newValue);
+  };
+  const value = computed(() => {
+    const formatted = plainToFormatted(props.value || '');
+    return formatted || props.value;
+  });
+  const isValid = computed(() => parsePhoneNumber(props.value || '').valid);
+  return () => _createVNode(NValInput, _mergeProps({
+    ...props,
+    onUpdateValue
+  }, {
+    "value": value.value,
+    "rules": external(isValid.value, trsl('vue-collection.validation.rules.phone')),
+    "type": "tel"
+  }), null);
+});

package/components/NInputSelect.js

@@ -0,0 +1,114 @@
+import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import { createComponent, createProps } from '../utils/component';
+import { Id } from '../utils/identifiable';
+import { option } from '../utils/validation';
+import { vModelForRef } from '../utils/vModel';
+import { watchRef } from '../utils/vue';
+import { computed, ref, watch } from 'vue';
+import { nInputProps } from './NInput';
+import NSuggestionList, { nSuggestionListProps } from './NSuggestionList';
+import NValInput, { nValInputProps } from './NValInput';
+export const nInputSelectProps = createProps({
+  ...nInputProps,
+  /**
+   * The id of the currently selected option of this input.
+   */
+  value: String,
+  /**
+   * This is called with the newly selected id when the selection has changed.
+   * This happens, when an item from the suggestion list is selected or the
+   * input matches a selection option exactly.
+   * If no id is selected, the empty string is passed, in order to
+   * match the API of all other inputs who never pass `undefined`.
+   */
+  onUpdateValue: Function,
+  /**
+   * The options which are allowed and suggested for this input.
+   * The options are filtered based on the user input.
+   */
+  options: {
+    type: Array,
+    default: () => []
+  },
+  /**
+   * @see {@link nValInputProps.optional}
+   */
+  optional: nValInputProps.optional,
+  /**
+   * @see {@link nValInputProps.form}
+   */
+  form: nValInputProps.form,
+  /**
+   * @see {@link nValInputProps.error}
+   */
+  error: nValInputProps.error,
+  /**
+   * @see {@link nValInputProps.errorMessage}
+   */
+  errorMessage: nValInputProps.errorMessage,
+  /**
+   * If set to `true` the list is hidden even if there are still matching items in the list.
+   */
+  hideList: nSuggestionListProps.hideList,
+  /**
+   * @see {@link nSuggestionListProps.maxItems}
+   */
+  maxItems: nSuggestionListProps.maxItems,
+  /**
+   * @see {@link nSuggestionListProps.listItem}
+   */
+  listItem: nSuggestionListProps.listItem
+});
+/**
+ * The `NInputSelect` is very similar to the {@link NSelect}, but instead of a select input it is a regular input.
+ * The user is forced to use a value from the specified options of the input.
+ * While they type, the list of options is shown to them and filtered based on their input.
+ */
+export default createComponent('NInputSelect', nInputSelectProps, props => {
+  const inputRef = ref();
+  const inputValue = ref('');
+  watch(() => props.value, newValue => {
+    if (newValue) {
+      const chosenOption = Id.find(props.options, newValue);
+      if (chosenOption) inputValue.value = chosenOption.label;
+    }
+  }, {
+    immediate: true
+  });
+  const filteredOptions = computed(() => props.options.filter(option => option.label.includes(inputValue.value || '')));
+  const matchedOption = computed(() => {
+    const matches = props.options.filter(option => option.label === inputValue.value);
+    return matches.length > 0 ? matches[0] : null;
+  });
+  watchRef(matchedOption, newOption => props.onUpdateValue?.(newOption?.id || ''));
+  return () => _createVNode(NSuggestionList, {
+    "items": filteredOptions.value,
+    "onSelect": props.onUpdateValue,
+    "inputValue": inputValue.value,
+    "hideList": props.hideList || matchedOption.value != null || filteredOptions.value.length == 0,
+    "maxItems": props.maxItems,
+    "listItem": props.listItem,
+    "input": ({
+      onFocus,
+      onBlur
+    }) => _createVNode(NValInput, _mergeProps({
+      "ref": inputRef
+    }, {
+      ...props,
+      ...vModelForRef(inputValue)
+    }, {
+      "rules": option(props.options.map(opt => opt.label)),
+      "onFocus": () => {
+        onFocus();
+        props.onFocus?.();
+      },
+      "onBlur": onBlur,
+      "disableBlurValidation": true
+    }), null),
+    "onRequestInputFocus": () => inputRef.value?.focus(),
+    "onRealBlur": () => {
+      props.onBlur?.();
+      inputRef?.value?.validate();
+    }
+  }, null);
+});

package/components/NInputSuggestion.js

@@ -0,0 +1,63 @@
+import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import { createComponent, createProps } from '../utils/component';
+import { Id } from '../utils/identifiable';
+import { computed, ref } from 'vue';
+import NSuggestionList, { nSuggestionListProps } from './NSuggestionList';
+import NValInput, { nValInputProps } from './NValInput';
+export const nInputSuggestionProps = createProps({
+  ...nValInputProps,
+  /**
+   * If set to `true` the list is hidden even if there are still matching items in the list.
+   */
+  hideList: nSuggestionListProps.hideList,
+  /**
+   * @see {@link nSuggestionListProps.maxItems}
+   */
+  maxItems: nSuggestionListProps.maxItems,
+  /**
+   * The suggestions which are shown to the user for this input.
+   * The suggestions are filtered based on the user input.
+   */
+  suggestions: {
+    type: Array,
+    default: () => []
+  }
+});
+/**
+ * `NInputSuggestion` is an input, which shows a list of possible suggestions to the user
+ *  which is filtered while typing. Contrary to {@link NInputSelect} the user is not required to choose any of the suggestions.
+ */
+export default createComponent('NInputSuggestion', nInputSuggestionProps, props => {
+  const suggestionItems = computed(() => props.suggestions.filter(suggestion => suggestion.includes(props.value || '')).map((value, index) => ({
+    id: index.toString(),
+    label: value
+  })));
+  const select = id => props.onUpdateValue?.(Id.find(suggestionItems.value, id)?.label || '');
+  const hideList = computed(() => props.hideList || suggestionItems.value.length == 0 || suggestionItems.value.filter(suggestion => suggestion.label !== props.value).length == 0);
+  const inputRef = ref();
+  return () => _createVNode(NSuggestionList, {
+    "items": suggestionItems.value,
+    "onSelect": id => select(id),
+    "inputValue": props.value || '',
+    "hideList": hideList.value,
+    "maxItems": props.maxItems,
+    "input": ({
+      onFocus,
+      onBlur
+    }) => _createVNode(NValInput, _mergeProps({
+      "ref": inputRef
+    }, props, {
+      "onFocus": () => {
+        onFocus();
+        props.onFocus?.();
+      },
+      "onBlur": onBlur,
+      "disableBlurValidation": true
+    }), null),
+    "onRequestInputFocus": () => inputRef.value?.focus(),
+    "onRealBlur": () => {
+      props.onBlur?.();
+      inputRef?.value?.validate();
+    }
+  }, null);
+});

package/components/NLink.js

@@ -0,0 +1,59 @@
+import { createVNode as _createVNode } from "vue";
+import { createComponent, createProps } from '../utils/component';
+import { computed } from 'vue';
+import { RouterLink } from 'vue-router';
+export const nLinkProps = createProps({
+  /**
+   * The text of the link. Can also be set in the default slot.
+   */
+  text: String,
+  /**
+   * The route of the link. If this is set,
+   * the link becomes a {@link RouterLink} and does not emit the `onClick` event.
+   */
+  route: [Object, String],
+  /**
+   * The color of the link.
+   */
+  color: {
+    type: String,
+    default: 'primary'
+  },
+  /**
+   * The text size, a standard tailwind text-size class.
+   */
+  textSize: String,
+  /**
+   * The shade of the link.
+   */
+  shade: {
+    type: Number,
+    default: 500
+  },
+  /**
+   * This is called when the link is clicked but only, if the `route` prop is not set.
+   * If the `route` prop is not set, the link will act as a regular button.
+   */
+  onClick: Function
+});
+/**
+ * The `NLink` is a styled text which can be used as a {@link RouterLink} or a regular button.
+ */
+export default createComponent('NLink', nLinkProps, (props, {
+  slots
+}) => {
+  const hoverShade = computed(() => {
+    const shade = props.shade;
+    if (shade <= 500) return shade + 100;else return shade - 200;
+  });
+  const classes = computed(() => ['font-medium focus:outline-none focus-visible:ring-2 rounded-sm ring-offset-2 hover:underline text-left', `${props.textSize} text-${props.color}-${props.shade} hover:text-${props.color}-${hoverShade.value} focus-visible:ring-${props.color}-${props.shade}`]);
+  return () => props.route ? _createVNode(RouterLink, {
+    "to": props.route,
+    "class": classes.value
+  }, {
+    default: () => [slots.default?.() || props.text]
+  }) : _createVNode("button", {
+    "onClick": props.onClick,
+    "class": classes.value
+  }, [slots.default?.() || props.text]);
+});

package/components/NList.js

@@ -0,0 +1,24 @@
+import { createVNode as _createVNode } from "vue";
+import { createComponent, createProps } from '../utils/component';
+export const nListProps = createProps({
+  /**
+   * The items which are displayed in the list.
+   */
+  items: {
+    type: Array,
+    default: () => []
+  }
+});
+/**
+ * The `NList` displays key-value data in an appealing way.
+ */
+export default createComponent('NList', nListProps, props => {
+  return () => _createVNode("dl", null, [props.items.map((item, index) => _createVNode("div", {
+    "key": index,
+    "class": ['py-5 px-4 sm:grid sm:grid-cols-3 sm:gap-4', index % 2 === 1 ? 'bg-white' : 'bg-default-50']
+  }, [_createVNode("dt", {
+    "class": "text-sm font-medium text-default-500"
+  }, [item.title]), _createVNode("dd", {
+    "class": "mt-1 text-sm sm:mt-0 sm:col-span-2"
+  }, [item.text])]))]);
+});

package/components/NLoadingIndicator.js

@@ -0,0 +1,53 @@
+import { createVNode as _createVNode } from "vue";
+import { createComponent, createProps } from '../utils/component';
+import { computed, useCssVars } from 'vue';
+import './NLoadingIndicator.css';
+export const nLoadingIndicator = createProps({
+  /**
+   * The color of the loading-indicator.
+   */
+  color: {
+    type: String,
+    default: 'primary'
+  },
+  /**
+   * The shade of the loading-indicator.
+   */
+  shade: {
+    type: Number,
+    default: 400
+  },
+  /**
+   * The height of the loading-indicator in px.
+   */
+  size: {
+    type: Number,
+    default: 10
+  }
+});
+/**
+ * The `NLoadingIndicator` is a styled loading indicator.
+ */
+export default createComponent('NLoadingIndicator', nLoadingIndicator, props => {
+  const gap = computed(() => props.size / 13 * 24);
+  const totalWidth = computed(() => gap.value * 2 + props.size);
+  useCssVars(() => ({
+    'n-loading-indicator-gap': `${gap.value}px`
+  }));
+  return () => _createVNode("div", {
+    "class": "lds-ellipsis",
+    "style": `height:${props.size}px;width:${totalWidth.value}px`
+  }, [_createVNode("div", {
+    "class": `bg-${props.color}-${props.shade}`,
+    "style": `height:${props.size}px;width:${props.size}px;left:0px`
+  }, null), _createVNode("div", {
+    "class": `bg-${props.color}-${props.shade}`,
+    "style": `height:${props.size}px;width:${props.size}px;left:0px`
+  }, null), _createVNode("div", {
+    "class": `bg-${props.color}-${props.shade}`,
+    "style": `height:${props.size}px;width:${props.size}px;left:${gap.value}px`
+  }, null), _createVNode("div", {
+    "class": `bg-${props.color}-${props.shade}`,
+    "style": `height:${props.size}px;width:${props.size}px;left:${2 * gap.value}px`
+  }, null)]);
+});

package/components/NModal.js

@@ -0,0 +1,210 @@
+import { createTextVNode as _createTextVNode, createVNode as _createVNode } from "vue";
+import { createComponent, createProps } from '../utils/component';
+import { Dialog, DialogOverlay, DialogTitle, TransitionRoot, TransitionChild } from '@headlessui/vue';
+import NButton from './NButton';
+import NIconButton from './NIconButton';
+import { XMarkIcon } from '@heroicons/vue/24/solid';
+import { trsl } from '../i18n';
+import { vModelProps } from '../utils/vModel';
+export const nModalProps = createProps({
+  ...vModelProps(Boolean),
+  /**
+   * If set to `true` the header of the modal is hidden.
+   */
+  hideHeader: Boolean,
+  /**
+   * If set to `true` the footer of the modal is hidden.
+   */
+  hideFooter: Boolean,
+  /**
+   * If set to `true` the X-button in the top right is hidden.
+   */
+  hideX: Boolean,
+  /**
+   * The maximum width of the modal. A regular tailwind class.
+   */
+  maxWidth: {
+    type: String,
+    default: 'max-w-md'
+  },
+  /**
+   * The title of the modal which is displayed in the header.
+   */
+  title: String,
+  /**
+   * The text of the ok-button.
+   */
+  okText: {
+    type: String,
+    default: trsl('vue-collection.action.save')
+  },
+  /**
+   * The color of the ok-button.
+   */
+  okColor: {
+    type: String,
+    default: 'primary'
+  },
+  /**
+   * If set to `true` the modal is closed when `onOk` is called.
+   */
+  closeOnOk: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * If set to `true` the ok-button is hidden.
+   */
+  hideOk: Boolean,
+  /**
+   * If set to `true` the ok-button is disabled.
+   */
+  okDisabled: Boolean,
+  /**
+   * The text of the cancel-button.
+   */
+  cancelText: {
+    type: String,
+    default: trsl('vue-collection.action.cancel')
+  },
+  /**
+   * The color of the cancel-button.
+   */
+  cancelColor: {
+    type: String,
+    default: 'default'
+  },
+  /**
+   * If set to `true`, the modal is closed when clicking on the background.
+   * This will call `onCancel`. Default is `true`.
+   */
+  closeOnBackground: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * If set to `true` the cancel-button is hidden.
+   */
+  hideCancel: Boolean,
+  /**
+   * This is called when the ok-button was clicked.
+   */
+  onOk: Function,
+  /**
+   * This is called when the cancel-button or X-button was clicked or
+   * if the modal was closed by clicking on the background.
+   */
+  onCancel: Function,
+  /**
+   * A slot to replace the whole modal content including all buttons, header and footer.
+   */
+  modal: Function,
+  /**
+   * A slot to replace the whole header section (excluding the x).
+   */
+  header: Function,
+  /**
+   * A slot to replace the whole footer section.
+   */
+  footer: Function
+});
+/**
+ * The `NModal` is the base component for all modals and dialogs.
+ * It provides the core mechanics to display a window in front of everything else.
+ */
+export default createComponent('NModal', nModalProps, (props, {
+  slots
+}) => {
+  const ok = () => {
+    props.onOk?.();
+    if (props.closeOnOk) props.onUpdateValue?.(false);
+  };
+  const cancel = () => {
+    props.onCancel?.();
+    props.onUpdateValue?.(false);
+  };
+  return () => _createVNode(TransitionRoot, {
+    "as": "template",
+    "show": props.value
+  }, {
+    default: () => [_createVNode(Dialog, {
+      "as": "div",
+      "static": true,
+      "class": "fixed z-40 inset-0 overflow-y-auto",
+      "onClose": cancel,
+      "open": props.value
+    }, {
+      default: () => [_createVNode("div", {
+        "class": "flex items-center justify-center min-h-screen"
+      }, [_createVNode(TransitionChild, {
+        "as": "template",
+        "enter": "ease-out duration-300",
+        "enter-from": "opacity-0",
+        "enter-to": "opacity-100",
+        "leave": "ease-in duration-200",
+        "leave-from": "opacity-100",
+        "leave-to": "opacity-0"
+      }, {
+        default: () => [props.closeOnBackground ? _createVNode(DialogOverlay, {
+          "class": "fixed inset-0 bg-default-700 bg-opacity-75"
+        }, null) : _createVNode("div", {
+          "class": "fixed inset-0 bg-default-700 bg-opacity-75"
+        }, null)]
+      }), _createVNode("span", {
+        "class": "hidden align-middle h-screen",
+        "aria-hidden": "true"
+      }, [_createTextVNode("\u200B")]), _createVNode(TransitionChild, {
+        "as": "template",
+        "enter": "ease-out duration-300",
+        "enter-from": "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
+        "enter-to": "opacity-100 translate-y-0 sm:scale-100",
+        "leave": "ease-in duration-200",
+        "leave-from": "opacity-100 translate-y-0 sm:scale-100",
+        "leave-to": "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+      }, {
+        default: () => [_createVNode("div", {
+          "class": ['transform m-4 w-full align-middle', props.maxWidth]
+        }, [props.modal?.({
+          ok,
+          cancel
+        }) || _createVNode("div", {
+          "class": ['shadow-xl rounded-lg bg-white divide-y divide-default-100', props.maxWidth]
+        }, [!props.hideX && _createVNode("div", {
+          "class": "sm:block absolute top-0 right-0 mt-3 mr-3"
+        }, [_createVNode(NIconButton, {
+          "icon": XMarkIcon,
+          "color": "default",
+          "size": 5,
+          "onClick": cancel
+        }, null)]), !props.hideHeader && _createVNode("div", {
+          "class": "px-4 sm:px-6 pt-4 pb-2 bg-default-50 rounded-t-lg"
+        }, [props.header?.() || _createVNode(DialogTitle, {
+          "as": "h4",
+          "class": "text-lg font-semibold"
+        }, {
+          default: () => [props.title]
+        })]), _createVNode("div", {
+          "class": "px-4 sm:px-6 py-4 rounded-lg"
+        }, [slots.default?.()]), !props.hideFooter && _createVNode("div", {
+          "class": "px-4 sm:px-6 pb-4 pt-2 bg-default-50 rounded-b-lg"
+        }, [props.footer?.({
+          ok,
+          cancel
+        }) || _createVNode("div", {
+          "class": "flex justify-end space-x-2"
+        }, [!props.hideCancel && _createVNode(NButton, {
+          "color": props.cancelColor,
+          "onClick": cancel
+        }, {
+          default: () => [props.cancelText]
+        }), !props.hideOk && _createVNode(NButton, {
+          "color": props.okColor,
+          "onClick": ok,
+          "disabled": props.okDisabled
+        }, {
+          default: () => [props.okText]
+        })])])])])]
+      })])]
+    })]
+  });
+});

package/components/NPagination.js

@@ -0,0 +1,108 @@
+import { createVNode as _createVNode, createTextVNode as _createTextVNode } from "vue";
+import { createComponent, createProps } from '../utils/component';
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/24/solid';
+import { computed, watch } from 'vue';
+import './NPagination.css';
+export const nPaginationProps = createProps({
+  /**
+   * The page number which is currently selected.
+   */
+  value: {
+    type: Number,
+    default: () => 1
+  },
+  /**
+   * This is called, when a new page number has been selected.
+   */
+  onUpdateValue: Function,
+  /**
+   * The total pages which exists. This is needed to correctly display the selectable pages.
+   */
+  total: {
+    type: Number,
+    default: () => 1
+  },
+  /**
+   * If set to `true`, the pagination is displayed smaller.
+   */
+  small: Boolean,
+  /**
+   * This is called, when the visible pages, which are selectable in the pagination, have changed.
+   * This is useful as only these pages can be navigated to on the next click.
+   * This information can be useful for prefetching.
+   */
+  onVisiblePagesChanged: Function
+});
+/**
+ * The `NPagination` is a styled pagination component.
+ */
+export default createComponent('NPagination', nPaginationProps, props => {
+  const numbers = computed(() => {
+    if (props.total <= 7) {
+      return range(1, props.total);
+    } else if (props.value <= 4) {
+      return [...range(1, 5), -1, props.total];
+    } else if (props.value >= props.total - 3) {
+      return [1, -1, ...range(props.total - 4, props.total)];
+    } else {
+      return [1, -1, ...range(props.value - 1, props.value + 1), -1, props.total];
+    }
+  });
+  watch(() => numbers.value, () => {
+    const visiblePages = numbers.value.filter(value => value != -1);
+    props.onVisiblePagesChanged?.(visiblePages);
+  }, {
+    immediate: true
+  });
+  const clickedNumber = value => {
+    if (value <= props.total && value >= 1) props.onUpdateValue?.(value);
+  };
+  const next = () => clickedNumber(props.value + 1);
+  const previous = () => clickedNumber(props.value - 1);
+  const items = computed(() => numbers.value.map(number => {
+    if (number == -1) return {
+      label: '...',
+      selectable: false,
+      selected: false
+    };else return {
+      label: `${number}`,
+      selectable: true,
+      selected: number == props.value,
+      click: () => clickedNumber(number)
+    };
+  }));
+  const classesForItem = item => ['pagination-item', item.selectable ? 'selectable ' : '', item.selected ? 'selected' : '', props.small ? '' : 'not-small'];
+  return () => _createVNode("nav", {
+    "class": "inline-flex rounded-md shadow -space-x-px"
+  }, [_createVNode("button", {
+    "class": ['pagination-item selectable rounded-l-md', props.small ? '' : 'not-small'],
+    "onClick": previous
+  }, [_createVNode("span", {
+    "class": "sr-only"
+  }, [_createTextVNode("Previous")]), _createVNode(ChevronLeftIcon, {
+    "class": "h-5 w-5",
+    "aria-hidden": "true"
+  }, null)]), items.value.map((item, index) => item.selectable ? _createVNode("button", {
+    "key": index,
+    "class": classesForItem(item),
+    "onClick": item.click
+  }, [item.label]) : _createVNode("div", {
+    "key": index,
+    "class": classesForItem(item)
+  }, [item.label])), _createVNode("button", {
+    "class": ['pagination-item selectable rounded-r-md', props.small ? '' : 'not-small'],
+    "onClick": next
+  }, [_createVNode("span", {
+    "class": "sr-only"
+  }, [_createTextVNode("Next")]), _createVNode(ChevronRightIcon, {
+    "class": "h-5 w-5",
+    "aria-hidden": "true"
+  }, null)])]);
+});
+function range(from, to) {
+  const array = [];
+  for (let i = from; i <= to; i++) {
+    array.push(i);
+  }
+  return array;
+}