@naptics/vue-collection 0.0.2 → 0.0.4

package/components/NIconCircle.js

@@ -0,0 +1,66 @@
+import { createVNode as _createVNode } from "vue";
+import { createComponent, createProps } from '../utils/component';
+export const nIconCircleProps = createProps({
+  /**
+   * The icon of the icon-circle.
+   */
+  icon: {
+    type: Function,
+    required: true
+  },
+  /**
+   * The color of the icon-circle.
+   */
+  color: {
+    type: String,
+    default: 'primary'
+  },
+  /**
+   * The size of the circle in "tailwind units" (4 px).
+   * Tailwind classes are used for the size, so any number can be passed.
+   * If the `iconSize` is not set, it will be adjusted automatically.
+   */
+  circleSize: Number,
+  /**
+   * The size of the icon in "tailwind units" (4 px).
+   * No tailwind classes are used for the size, so any number can be passed.
+   * If the `circleSize` is not set, it will be adjusted automatically.
+   */
+  iconSize: Number,
+  /**
+   * The shade of the icon.
+   */
+  iconShade: {
+    type: Number,
+    default: 600
+  },
+  /**
+   * The shade of the background.
+   */
+  bgShade: {
+    type: Number,
+    default: 100
+  }
+});
+const DEFAULT_CIRCLE_SIZE = 16;
+const SCALING_FACTOR = 0.55;
+/**
+ * The `NIconCircle` is an icon with a colored circle around it.
+ */
+export default createComponent('NIconCircle', nIconCircleProps, props => {
+  let circleSize = props.circleSize;
+  let iconSize = props.iconSize;
+  if (circleSize == null) {
+    if (iconSize == null) circleSize = DEFAULT_CIRCLE_SIZE;else circleSize = iconSize / SCALING_FACTOR;
+  }
+  if (iconSize == null) iconSize = circleSize * SCALING_FACTOR;
+  circleSize *= 4;
+  iconSize *= 4;
+  return () => _createVNode("div", {
+    "class": ['flex items-center justify-center rounded-full', `bg-${props.color}-${props.bgShade}`],
+    "style": `width: ${circleSize}px; height: ${circleSize}px`
+  }, [_createVNode("div", {
+    "class": `text-${props.color}-${props.iconShade}`,
+    "style": `width: ${iconSize}px; height: ${iconSize}px`
+  }, [_createVNode(props.icon, null, null)])]);
+});

package/components/NInput.js

@@ -0,0 +1,105 @@
+import { mergeProps as _mergeProps, withDirectives as _withDirectives, vShow as _vShow, createVNode as _createVNode } 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 './NInput.css';
+import { vModelProps } from '../utils/vModel';
+export const nInputProps = createProps({
+  ...vModelProps(String),
+  /**
+   * The name of the input. Is displayed as a label above the input.
+   */
+  name: String,
+  /**
+   * The placeholder of the input.
+   */
+  placeholder: String,
+  /**
+   * The html autocomplete attribute of the input.
+   */
+  autocomplete: {
+    type: String,
+    default: 'off'
+  },
+  /**
+   * The html type attribute of the input.
+   */
+  type: {
+    type: String,
+    default: 'text'
+  },
+  /**
+   * The maximum value of the input.
+   */
+  max: String,
+  /**
+   * The minimum value of the input.
+   */
+  min: String,
+  /**
+   * If set to `true` the input is displayed with a red border.
+   */
+  error: Boolean,
+  /**
+   * If set to `true` the input is disabled and no interaction is possible.
+   */
+  disabled: Boolean,
+  /**
+   * If set to `true` the input is displayed smaller.
+   */
+  small: Boolean,
+  /**
+   * If set to `true` the input's label is hidden.
+   */
+  hideLabel: Boolean,
+  /**
+   * This is called when the input reveices focus.
+   */
+  onFocus: Function,
+  /**
+   * This is called when the input looses focus.
+   */
+  onBlur: Function,
+  ...nToolTipPropsForImplementor
+});
+/**
+ * The base class of inputs. A styled input with a lot of configuration possibilities but no validation.
+ */
+export default createComponent('NInput', nInputProps, (props, context) => {
+  const inputRef = ref();
+  const exposed = {
+    focus: () => inputRef.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("input", {
+      "ref": inputRef,
+      "name": props.name,
+      "value": props.value,
+      "onInput": event => props.onUpdateValue?.(event.target.value),
+      "placeholder": props.placeholder,
+      "autocomplete": props.autocomplete,
+      "type": props.type,
+      "min": props.min,
+      "max": props.max,
+      "disabled": props.disabled,
+      "onFocus": () => props.onFocus?.(),
+      "onBlur": () => props.onBlur?.(),
+      "onInvalid": event => event.preventDefault(),
+      "class": ['block w-full rounded-md border focus:outline-none focus:ring-1 ', props.small ? 'text-xs py-0.5 px-2' : 'py-2 px-4', 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']
+    }, 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 && !props.small]])])]
+  })]);
+});

package/components/NInputPhone.d.ts

@@ -140,10 +140,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;
 }>;

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/NInputPhone.jsx

@@ -2,6 +2,7 @@ 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.
@@ -27,5 +28,5 @@ const NPhoneInput = createComponent('NInputPhone', nInputPhoneProps, async (prop
         return formatted || props.value;
     });
     const isValid = computed(() => parsePhoneNumber(props.value || '').valid);
-    return () => (<NValInput {...{ ...props, onUpdateValue }} value={value.value} rules={external(isValid.value, 'phone')} type="tel"/>);
+    return () => (<NValInput {...{ ...props, onUpdateValue }} value={value.value} rules={external(isValid.value, trsl('vue-collection.validation.rules.phone'))} type="tel"/>);
 });

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.d.ts

@@ -199,10 +199,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;
     maxItems: number;

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)]);
+});