@naptics/vue-collection 0.0.2 → 0.0.4

package/components/NDialog.js

@@ -0,0 +1,160 @@
+import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
+import { deferred } from '../utils/deferred';
+import { createComponent, createProps, extractProps } from '../utils/component';
+import { CheckIcon, ExclamationTriangleIcon, LightBulbIcon, TrashIcon } from '@heroicons/vue/24/outline';
+import { computed, ref } from 'vue';
+import NIconCircle from './NIconCircle';
+import NModal from './NModal';
+import { DialogTitle } from '@headlessui/vue';
+import { trsl } from '../i18n';
+import { vModelForRef } from '../utils/vModel';
+export const nDialogProps = createProps({
+  /**
+   * The title of the dialog.
+   */
+  title: String,
+  /**
+   * The text of the dialog.
+   */
+  text: String,
+  /**
+   * The variant of the dialog.
+   * This determines the default icon and its color
+   * as well as the default text and color of the ok-button.
+   */
+  variant: {
+    type: String,
+    default: 'warning'
+  },
+  /**
+   * The icon of the alert. This overrides the `icon` of the `variant`.
+   */
+  icon: Function,
+  /**
+   * The color of the alert's icon. This overrides the `iconColor` of the `variant`.
+   */
+  iconColor: String,
+  /**
+   * The text of the ok-button. This overrides the `okText` of the `variant`.
+   */
+  okText: String,
+  /**
+   * The color of the ok-button. This overrides the `okColor` of the `variant`.
+   */
+  okColor: String,
+  /**
+   * 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 cancel-button is hidden.
+   */
+  hideCancel: Boolean
+});
+/**
+ * A `NDialog` is an element to interact directly with the user.
+ * It can be controlled via a ref to prompt the user and to receive their answer.
+ * @example
+ * const dialogRef = ref<NDialogExposed>()
+ * ...
+ * const onShowDialog = () => {
+ *   dialofRef.value?.show().then(result => {
+ *     if (result)   // dialog accepted
+ *     else          // dialog cancelled
+ *   })
+ * }
+ * ...
+ * <NDialog ref={dialogRef} />
+ */
+export default createComponent('NDialog', nDialogProps, (props, context) => {
+  const showDialog = ref(false);
+  let deferredPromise = null;
+  const show = () => {
+    if (deferredPromise != null) {
+      deferredPromise.reject('show() was called on the open dialog.');
+      deferredPromise = null;
+    }
+    showDialog.value = true;
+    deferredPromise = deferred();
+    return deferredPromise.promise;
+  };
+  context.expose({
+    show
+  });
+  const resolveWith = result => {
+    deferredPromise?.resolve(result);
+    deferredPromise = null;
+  };
+  const ok = () => resolveWith(true);
+  const cancel = () => resolveWith(false);
+  const defaults = computed(() => VARIANT_DEFAULTS[props.variant]);
+  return () => _createVNode(NModal, _mergeProps(vModelForRef(showDialog), extractProps(props, 'cancelColor', 'cancelText', 'hideCancel'), {
+    "onOk": ok,
+    "onCancel": cancel,
+    "okColor": props.okColor || defaults.value.okColor,
+    "okText": props.okText || defaults.value.okText,
+    "hideX": true,
+    "hideHeader": true
+  }), {
+    default: () => [_createVNode("div", {
+      "class": "flex space-x-4 py-2"
+    }, [_createVNode("div", {
+      "class": "flex-grow-0"
+    }, [_createVNode(NIconCircle, {
+      "icon": props.icon || defaults.value.icon,
+      "iconSize": 6,
+      "color": props.iconColor || defaults.value.iconColor
+    }, null)]), _createVNode("div", {
+      "class": "flex-grow"
+    }, [_createVNode(DialogTitle, {
+      "as": "h4",
+      "class": "font-medium text-lg text-default-700 mb-1"
+    }, {
+      default: () => [props.title]
+    }), context.slots.default?.() || _createVNode("p", {
+      "class": "text-sm text-default-500"
+    }, [props.text])])])]
+  });
+});
+const VARIANT_DEFAULTS = {
+  success: {
+    icon: CheckIcon,
+    iconColor: 'green',
+    okText: trsl('vue-collection.action.all-right'),
+    okColor: 'green'
+  },
+  info: {
+    icon: LightBulbIcon,
+    iconColor: 'blue',
+    okText: trsl('vue-collection.action.all-right'),
+    okColor: 'blue'
+  },
+  warning: {
+    icon: ExclamationTriangleIcon,
+    iconColor: 'yellow',
+    okText: trsl('vue-collection.action.proceed'),
+    okColor: 'yellow'
+  },
+  danger: {
+    icon: ExclamationTriangleIcon,
+    iconColor: 'red',
+    okText: trsl('vue-collection.action.proceed'),
+    okColor: 'red'
+  },
+  remove: {
+    icon: TrashIcon,
+    iconColor: 'red',
+    okText: trsl('vue-collection.action.remove'),
+    okColor: 'red'
+  }
+};

package/components/NDropdown.js

@@ -0,0 +1,108 @@
+import { isVNode as _isVNode, createVNode as _createVNode } from "vue";
+import { createComponent, createProps } from '../utils/component';
+import { computed, Transition } from 'vue';
+import { RouterLink } from 'vue-router';
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue';
+import { ChevronDownIcon } from '@heroicons/vue/24/solid';
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
+}
+export const nDropdownProps = createProps({
+  /**
+   * The title of the dropdown-button.
+   */
+  title: String,
+  /**
+   * The items of the dropdown.
+   * The second dimension of the array is used
+   * to create groups of items, which are visually seperated.
+   */
+  items: {
+    type: Array,
+    default: () => []
+  },
+  /**
+   * If set to `true` the panel is right-aligned to the button.
+   */
+  right: Boolean,
+  /**
+   * If set to `true` the dropdown-button is disabled and no interaction is possible.
+   */
+  disabled: Boolean,
+  /**
+   * A slot to replace the button of the dropdown.
+   */
+  button: Function
+});
+/**
+ * The `NDropdown` consists of a button and a panel with multiple actions.
+ * It is useful to group multiple actions together in one place.
+ */
+export default createComponent('NDropdown', nDropdownProps, (props, {
+  slots
+}) => {
+  const items = computed(() => {
+    if (props.items.length == 0) return [];
+    if (Array.isArray(props.items[0])) return props.items;else return [props.items];
+  });
+  const itemWithIcon = item => _createVNode("div", {
+    "class": "flex space-x-3 items-center"
+  }, [item.icon && _createVNode(item.icon, {
+    "class": ['h-5 w-5', item.disabled ? 'text-default-300' : 'text-default-400']
+  }, null), _createVNode("span", null, [item.label])]);
+  return () => _createVNode(Menu, {
+    "as": "div",
+    "class": "relative inline-block text-left"
+  }, {
+    default: () => [_createVNode("div", {
+      "class": "flex"
+    }, [props.button?.() || _createVNode(MenuButton, {
+      "disabled": props.disabled,
+      "class": ['shadow w-full flex justify-between items-center text-default-700 rounded-md border bg-white border-default-300 px-4 py-2 text-sm font-medium focus:outline-none focus:ring-offset-2 focus-visible:ring-2 focus-visible:ring-primary-500', props.disabled ? 'text-opacity-20 cursor-default' : 'hover:bg-default-100']
+    }, {
+      default: () => [_createVNode("span", null, [props.title]), _createVNode(ChevronDownIcon, {
+        "class": "-mr-1 ml-2 h-5 w-5 flex-shrink-0",
+        "aria-hidden": "true"
+      }, null)]
+    })]), _createVNode(Transition, {
+      "enterActiveClass": "transition ease-out duration-100",
+      "enterFromClass": "transform opacity-0 scale-95",
+      "enterToClass": "transform opacity-100 scale-100",
+      "leaveActiveClass": "transition ease-in duration-75",
+      "leaveFromClass": "transform opacity-100 scale-100",
+      "leaveToClass": "transform opacity-0 scale-95"
+    }, {
+      default: () => [_createVNode(MenuItems, {
+        "class": ['z-10 absolute w-56 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none', props.right ? 'origin-top-right right-0' : 'origin-top-left left-0']
+      }, {
+        default: () => [slots.default?.() || _createVNode("div", {
+          "class": "divide-y divide-default-200"
+        }, [items.value.map((group, index) => _createVNode("div", {
+          "key": `group-${index}`,
+          "class": "py-1"
+        }, [group.map((item, index) => _createVNode(MenuItem, {
+          "key": `item-${index}`,
+          "disabled": item.disabled
+        }, {
+          default: ({
+            active
+          }) => {
+            let _slot;
+            return item.disabled ? _createVNode("div", {
+              "class": "block px-4 py-2 text-sm text-default-300"
+            }, [itemWithIcon(item)]) : item.route ? _createVNode(RouterLink, {
+              "to": item.route,
+              "class": ['block px-4 py-2 text-sm', active ? 'bg-default-100 text-default-900' : 'text-default-700']
+            }, _isSlot(_slot = itemWithIcon(item)) ? _slot : {
+              default: () => [_slot]
+            }) : _createVNode("button", {
+              "type": "button",
+              "onClick": item.onClick,
+              "class": ['w-full text-left px-4 py-2 text-sm', active ? 'bg-default-100 text-default-900' : 'text-default-700']
+            }, [itemWithIcon(item)]);
+          }
+        }))]))])]
+      })]
+    })]
+  });
+});

package/components/NDropzone.js

@@ -0,0 +1,210 @@
+import { isVNode as _isVNode, createTextVNode as _createTextVNode, Fragment as _Fragment, createVNode as _createVNode } from "vue";
+import { trslc } from '../i18n';
+import { createComponent, createProps } from '../utils/component';
+import { maxLengthSplitCenter } from '../utils/stringMaxLength';
+import { notNullish } from '../utils/utils';
+import { XMarkIcon } from '@heroicons/vue/24/solid';
+import { computed, ref } from 'vue';
+import NBadge from './NBadge';
+import NIconButton from './NIconButton';
+import NLink from './NLink';
+import { vModelProps } from '../utils/vModel';
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
+}
+export const nDropzoneProps = createProps({
+  ...vModelProps(Array),
+  /**
+   * A description which files are allowed for this dropzone.
+   * This should include everything the user needs to know about
+   * the file type / the extensions and the maximum size of the file.
+   * @see {@link nDropzoneProps.accept}
+   * @see {@link nDropzoneProps.maxFileSize}
+   */
+  description: String,
+  /**
+   * The maximum amount of files which can be added to the dropzone.
+   */
+  maxFiles: {
+    type: Number,
+    default: 1
+  },
+  /**
+   * Specifies which file types are accepted. The same syntax as with inputs of type file is used.
+   * Make sure to explain the requirements to the user in the {@link nDropzoneProps.description}.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers
+   */
+  accept: String,
+  /**
+   * Specifies the maximum size of an individual file in bytes.
+   * Make sure to explain the max size to the user in the {@link nDropzoneProps.description}.
+   */
+  maxFileSize: {
+    type: Number,
+    default: 100 * 1024 * 1024
+  },
+  /**
+   * The maximum length of the file names.
+   * Files names longer than the specified amount of characters will be shortened.
+   * @see {@link maxLengthSplitCenter}
+   */
+  maxLengthFileNames: {
+    type: Number,
+    default: 35
+  },
+  /**
+   * A tailwind height class, which is applied to the dropzone area.
+   * It is recommended to use `min-h-*` classes,
+   * so the box is always large enough to display it's text.
+   */
+  height: {
+    type: String,
+    default: 'min-h-36'
+  }
+});
+/**
+ * The `NDropzone` is an area where files can be added by the user by drag & drop.
+ * Files can also be selected with a file chooser by clicking on the dropzone.
+ */
+export default createComponent('NDropzone', nDropzoneProps, props => {
+  const fileError = ref();
+  const filterAndUpdateFiles = files => {
+    // filter for mime type and max size
+    const fileTypeFilteredFiles = files.filter(file => !props.accept || testFileWithAcceptString(props.accept, file));
+    const filteredFiles = fileTypeFilteredFiles.filter(file => file.size <= props.maxFileSize);
+    // filter for already existing files
+    const currentFiles = props.value || [];
+    filteredFiles.forEach(file => {
+      if (currentFiles.filter(currFile => currFile.name == file.name).length == 0) currentFiles.push(file);
+    });
+    // slice down to max amount of files
+    const newFiles = currentFiles.slice(0, props.maxFiles);
+    // error handling
+    const fileTypeFilterDiff = files.length - fileTypeFilteredFiles.length;
+    const fileSizeFilterDiff = fileTypeFilteredFiles.length - filteredFiles.length;
+    if (newFiles.length < currentFiles.length) fileError.value = trslc('vue-collection.error.too-many-files', props.maxFiles, {
+      max: props.maxFiles
+    });else if (fileSizeFilterDiff > 0) {
+      fileError.value = trslc('vue-collection.error.file-size', fileSizeFilterDiff, {
+        n: fileSizeFilterDiff
+      });
+    } else if (fileTypeFilterDiff > 0) fileError.value = trslc('vue-collection.error.file-type', fileTypeFilterDiff, {
+      n: fileTypeFilterDiff
+    });else fileError.value = undefined;
+    // update new value
+    props.onUpdateValue?.(newFiles);
+  };
+  const files = computed(() => props.value?.map((file, index) => ({
+    index,
+    name: maxLengthSplitCenter(file.name, props.maxLengthFileNames)
+  })) || []);
+  const removeFile = index => {
+    const newFiles = [...(props.value || [])];
+    newFiles.splice(index, 1);
+    fileError.value = undefined;
+    props.onUpdateValue?.(newFiles);
+  };
+  const clearFiles = () => {
+    fileError.value = undefined;
+    props.onUpdateValue?.([]);
+  };
+  const isDragOver = ref(false);
+  const onDrop = event => {
+    event.preventDefault();
+    isDragOver.value = false;
+    const transfer = event.dataTransfer;
+    if (transfer == null) return;
+    if (transfer.items.length > 0) {
+      const items = [...transfer.items];
+      const files = items.map(item => item.kind === 'file' ? item.getAsFile() : null).filter(notNullish);
+      filterAndUpdateFiles(files);
+    } else {
+      filterAndUpdateFiles([...transfer.files]);
+    }
+  };
+  const onDragOver = event => {
+    event.preventDefault();
+    isDragOver.value = true;
+  };
+  const onDragLeave = () => {
+    isDragOver.value = false;
+  };
+  const onClick = () => {
+    fileInput.value?.click();
+  };
+  const fileInput = ref();
+  const onInputFilesChanged = () => {
+    const input = fileInput.value;
+    if (input != null) {
+      if (input.files != null) filterAndUpdateFiles([...input.files]);
+      input.value = '';
+    }
+  };
+  return () => {
+    let _slot;
+    return _createVNode("div", null, [_createVNode("button", {
+      "class": ['block w-full rounded-md border-dashed border-2 hover:border-primary-300 hover:bg-primary-50 focus-visible:border-primary-500 focus:outline-none ', 'flex flex-col items-center justify-center text-center text-sm select-none hover:text-primary-700 p-4', isDragOver.value ? 'border-primary-300 bg-primary-50 text-primary-700' : 'border-default-300 bg-default-50 text-default-500', props.height],
+      "onDrop": onDrop,
+      "onDragover": onDragOver,
+      "onDragleave": onDragLeave,
+      "onClick": onClick
+    }, [_createVNode("input", {
+      "type": "file",
+      "class": "hidden",
+      "ref": fileInput,
+      "multiple": props.maxFiles > 1,
+      "accept": props.accept,
+      "onChange": onInputFilesChanged,
+      "onClick": event => event.stopPropagation()
+    }, null), _createVNode("div", {
+      "class": "flex-grow mb-2"
+    }, null), _createVNode("span", {
+      "class": "font-medium"
+    }, [trslc('vue-collection.text.drag-n-drop-files', props.maxFiles, {
+      n: props.maxFiles
+    })]), _createVNode("span", null, [props.description]), _createVNode("div", {
+      "class": "flex-grow mt-2 flex items-end justify-center text-red-500 font-medium"
+    }, [_createVNode("span", null, [fileError.value])])]), _createVNode("div", {
+      "class": "mt-2 space-y-1"
+    }, [_createVNode("div", {
+      "class": "flex flex-wrap gap-2 "
+    }, [files.value.map(file => _createVNode(NBadge, {
+      "key": file.index,
+      "color": "default",
+      "allCaps": false,
+      "textSize": "text-xs"
+    }, {
+      default: () => [_createVNode("div", {
+        "class": "flex items-center space-x-2"
+      }, [_createVNode("span", null, [file.name]), _createVNode(NIconButton, {
+        "icon": XMarkIcon,
+        "shade": 900,
+        "size": 3,
+        "onClick": () => removeFile(file.index)
+      }, null)])]
+    })), _createVNode("div", {
+      "class": "flex-grow text-sm text-default-500 flex items-end justify-end text-right"
+    }, [_createVNode("span", null, [_createVNode("span", null, [trslc('vue-collection.text.files-selected', files.value.length, {
+      n: files.value.length
+    })]), files.value.length > 0 && _createVNode(_Fragment, null, [_createVNode("span", null, [_createTextVNode(" ")]), _createVNode(NLink, {
+      "color": "default",
+      "onClick": clearFiles
+    }, _isSlot(_slot = trslc('vue-collection.action.clear-files', files.value.length)) ? _slot : {
+      default: () => [_slot]
+    })])])])])])]);
+  };
+});
+// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers
+const MIME_FORMAT = /^(image|audio|application|video|text)\/\*$/;
+const EXTENSION_FORMAT = /^\.\w{2,20}$/;
+function testFileWithAcceptString(accept, file) {
+  const splitted = accept.split(',').map(pattern => pattern.trim());
+  for (const pattern of splitted) {
+    if (MIME_FORMAT.test(pattern)) {
+      if (RegExp(`^${pattern.substring(0, pattern.length - 2)}\\/.{2,}$`).test(file.type)) return true;
+    } else if (EXTENSION_FORMAT.test(pattern)) {
+      if (RegExp(`^.*${pattern}$`).test(file.name)) return true;
+    }
+  }
+  return false;
+}

package/components/NForm.js

@@ -0,0 +1,28 @@
+import { createVNode as _createVNode } from "vue";
+import { createComponent, createProps } from '../utils/component';
+export const nFormProps = createProps({
+  /**
+   * The {@link ValidatedForm} which will be used to validate the inputs.
+   * All inputs in this forms hierarchy should be added to the {@link ValidatedForm}.
+   */
+  form: Object,
+  /**
+   * This is called, when a button of type `submit` in the hierarchy of this view is clicked
+   * and when the validation of the `form` was successful.
+   */
+  onSubmit: Function
+});
+/**
+ * The `NForm` should be used to wrap multiple inputs.
+ * If it contains a button of type `submit` in it's hierarchy,
+ * it catches the submit event and passes it to the {@link ValidatedForm} in its `form` prop.
+ */
+export default createComponent('NForm', nFormProps, (props, context) => {
+  const onSubmit = event => {
+    event.preventDefault();
+    if (!props.form || props.form.validate().isValid) props.onSubmit?.();
+  };
+  return () => _createVNode("form", {
+    "onSubmit": onSubmit
+  }, [context.slots.default?.()]);
+});

package/components/NFormModal.js

@@ -0,0 +1,54 @@
+import { createVNode as _createVNode } from "vue";
+import { createComponent, createProps } from '../utils/component';
+import { reactive, toRefs } from 'vue';
+import NForm from './NForm';
+import NModal, { nModalProps } from './NModal';
+export const nFormModalProps = createProps({
+  ...nModalProps,
+  /**
+   * The maximum width of the modal. A regular tailwind class.
+   */
+  maxWidth: {
+    type: String,
+    default: 'max-w-lg'
+  },
+  /**
+   * If set to `true` the modal closes when clicking on the background.
+   * Default is `false` as the accidental reseting of the whole form is very annoying.
+   */
+  closeOnBackground: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * The {@link ValidatedForm} to validate the inputs.
+   * All inputs should be added to the form.
+   */
+  form: Object
+});
+/**
+ * The `NFormModal` is a {@link NModal} with an integrated form.
+ * When submitting a `NFormModal` the form is first validated and
+ * only if the validation is succesful the `onOk` event is called.
+ */
+export default createComponent('NFormModal', nFormModalProps, (props, {
+  slots
+}) => {
+  const childProps = reactive({
+    ...toRefs(props),
+    onOk: () => {
+      if (!props.form || props.form.validate().isValid) {
+        props.onOk?.();
+        if (props.closeOnOk) props.onUpdateValue?.(false);
+      }
+    },
+    closeOnOk: false
+  });
+  return () => _createVNode(NModal, childProps, {
+    default: () => [_createVNode(NForm, {
+      "form": props.form
+    }, {
+      default: () => [slots.default?.()]
+    })]
+  });
+});

package/components/NIconButton.js

@@ -0,0 +1,81 @@
+import { isVNode as _isVNode, createVNode as _createVNode } from "vue";
+import { createComponent, createProps } from '../utils/component';
+import { RouterLink } from 'vue-router';
+import { nButtonProps } from './NButton';
+import NTooltip, { mapTooltipProps, nToolTipPropsForImplementor } from './NTooltip';
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
+}
+export const nIconButtonProps = createProps({
+  /**
+   * The icon of the icon-button.
+   */
+  icon: {
+    type: Function,
+    required: true
+  },
+  /**
+   * The route of the icon-button. If this is set, the icon-button becomes a {@link RouterLink}.
+   */
+  route: [String, Object],
+  /**
+   * The color of the icon-button.
+   */
+  color: {
+    type: String,
+    default: 'default'
+  },
+  /**
+   * The shade of the icon-button.
+   */
+  shade: {
+    type: Number,
+    default: 500
+  },
+  /**
+   * The size of the icon in tailwind-units.
+   */
+  size: {
+    type: Number,
+    default: 5
+  },
+  /**
+   * The html attribute, which indicates the type of the button.
+   */
+  type: nButtonProps.type,
+  /**
+   * If set to `true` the icon-button is disabled and no interaction is possible.
+   */
+  disabled: Boolean,
+  /**
+   * This is called when the icon-button is clicked.
+   * It is only called when the `route` prop is not set on the icon-button.
+   */
+  onClick: Function,
+  ...nToolTipPropsForImplementor
+});
+/**
+ * The `NIconButton` is a regular button which does not have any text but an icon instead.
+ */
+export default createComponent('NIconButton', nIconButtonProps, props => {
+  const classes = () => ['block p-0.5 rounded-md focus:outline-none focus-visible:ring-2 -m-1', props.disabled ? `text-${props.color}-200 cursor-default` : `hover:bg-${props.color}-${props.shade} hover:bg-opacity-10 text-${props.color}-${props.shade} focus-visible:ring-${props.color}-${props.shade} cursor-pointer`];
+  const content = () => _createVNode(props.icon, {
+    "class": `w-${props.size} h-${props.size}`
+  }, null);
+  return () => {
+    let _slot;
+    return _createVNode(NTooltip, mapTooltipProps(props), {
+      default: () => [props.route ? _createVNode(RouterLink, {
+        "to": props.route,
+        "class": classes()
+      }, _isSlot(_slot = content()) ? _slot : {
+        default: () => [_slot]
+      }) : _createVNode("button", {
+        "type": props.type,
+        "disabled": props.disabled,
+        "class": classes(),
+        "onClick": props.onClick
+      }, [content()])]
+    });
+  };
+});