@naptics/vue-collection 0.0.3 → 0.0.4

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.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.js

@@ -6,7 +6,7 @@ let provider = undefined;
  * @param newProvider
  */
 export function registerTranslationProvider(newProvider) {
-    provider = newProvider;
+  provider = newProvider;
 }
 /**
  * Translates the specified key with the according message.
@@ -15,9 +15,7 @@ export function registerTranslationProvider(newProvider) {
  * @returns the translated message.
  */
 export function trsl(key, params) {
-    if (!provider)
-        console.warn('Vue Collection: No translation provider has been registered!');
-    return provider?.trsl(key, params) ?? key;
+  return provider?.trsl(key, params) ?? key;
 }
 /**
  * Translates the specified key using pluralization.
@@ -29,7 +27,5 @@ export function trsl(key, params) {
  * @see trsl
  */
 export function trslc(key, count, params) {
-    if (!provider)
-        console.warn('Vue Collection: No translation provider has been registered!');
-    return provider?.trslc(key, count, params) ?? key;
-}
+  return provider?.trslc(key, count, params) ?? key;
+}

package/index.js

@@ -64,4 +64,4 @@ export { NValInput };
 import { createValidatedForm } from './components/ValidatedForm';
 export { createValidatedForm };
 import { createComponent, createView, createProps } from './utils/component';
-export { createComponent, createView, createProps };
+export { createComponent, createView, createProps };

package/package.json

@@ -1,7 +1,11 @@
 {
     "name": "@naptics/vue-collection",
-    "version": "0.0.3",
+    "version": "0.0.4",
     "main": "./index.js",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/naptics/vue-collection"
+    },
     "scripts": {
         "dev": "vite",
         "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
@@ -12,7 +16,7 @@
         "build-demo": "run-p type-check-demo build-only-demo",
         "build-lib": "run-p type-check-lib build-only-lib",
         "build-only-demo": "vite build",
-        "build-only-lib": "rm -rf ./lib && tsc --project tsconfig.lib.json && mv ./lib/src/lib/* ./lib && rm -rf ./lib/src && rm ./lib/tsconfig.lib.tsbuildinfo && cp ./src/lib/components/*.css ./lib/components"
+        "build-only-lib": "bash ./scripts/build-lib.sh"
     },
     "dependencies": {
         "@headlessui/vue": "^1.7.10",
@@ -24,6 +28,8 @@
         "vue": "^3.2.36"
     },
     "devDependencies": {
+        "@babel/cli": "^7.21.0",
+        "@babel/core": "^7.21.3",
         "@intlify/unplugin-vue-i18n": "^0.8.2",
         "@rushstack/eslint-patch": "^1.2.0",
         "@tailwindcss/forms": "^0.5.3",
@@ -31,6 +37,7 @@
         "@types/node": "^18.14.0",
         "@vitejs/plugin-vue": "^4.0.0",
         "@vitejs/plugin-vue-jsx": "^3.0.0",
+        "@vue/babel-plugin-jsx": "^1.1.1",
         "@vue/eslint-config-prettier": "^7.1.0",
         "@vue/eslint-config-typescript": "^11.0.2",
         "@vue/test-utils": "^2.3.0",

package/utils/breakpoints.js

@@ -1,10 +1,10 @@
 import { computed, ref } from 'vue';
 export const breakpoints = {
-    sm: 640,
-    md: 768,
-    lg: 1024,
-    xl: 1280,
-    '2xl': 1536,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  '2xl': 1536
 };
 export const bodyWidth = ref(document.body.clientWidth);
 /**
@@ -12,26 +12,26 @@ export const bodyWidth = ref(document.body.clientWidth);
  * It sets a `window.onresize` listener.
  */
 export function addDocumentResizeEventListener() {
-    window.onresize = () => {
-        bodyWidth.value = document.body.clientWidth;
-    };
+  window.onresize = () => {
+    bodyWidth.value = document.body.clientWidth;
+  };
 }
 export function isWidthBreakpoint(breakpoint) {
-    switch (breakpoint) {
-        case 'sm':
-            return isWidthSm;
-        case 'md':
-            return isWidthMd;
-        case 'lg':
-            return isWidthLg;
-        case 'xl':
-            return isWidthXl;
-        case '2xl':
-            return isWidth2xl;
-    }
+  switch (breakpoint) {
+    case 'sm':
+      return isWidthSm;
+    case 'md':
+      return isWidthMd;
+    case 'lg':
+      return isWidthLg;
+    case 'xl':
+      return isWidthXl;
+    case '2xl':
+      return isWidth2xl;
+  }
 }
 export const isWidth2xl = computed(() => bodyWidth.value > breakpoints['2xl']);
 export const isWidthXl = computed(() => bodyWidth.value > breakpoints.xl);
 export const isWidthLg = computed(() => bodyWidth.value > breakpoints.lg);
 export const isWidthMd = computed(() => bodyWidth.value > breakpoints.md);
-export const isWidthSm = computed(() => bodyWidth.value > breakpoints.sm);
+export const isWidthSm = computed(() => bodyWidth.value > breakpoints.sm);

package/utils/component.js

@@ -1,4 +1,4 @@
-import { defineComponent, reactive, toRef, } from 'vue';
+import { defineComponent, reactive, toRef } from 'vue';
 /**
  * Components should be created using this helper function.
  * It only takes three arguments, the name and the props of the component and the setup function.
@@ -10,7 +10,12 @@ import { defineComponent, reactive, toRef, } from 'vue';
  * @returns the created vue-component.
  */
 export function createComponent(name, props, setup) {
-    return defineComponent({ name, props, emits: [], setup });
+  return defineComponent({
+    name,
+    props,
+    emits: [],
+    setup
+  });
 }
 /**
  * Views should be created using this helper function. Views are special components, which don't have props.
@@ -21,7 +26,11 @@ export function createComponent(name, props, setup) {
  * @returns the created vue-component.
  */
 export function createView(name, setup) {
-    return defineComponent({ name, emits: [], setup: (props, context) => setup(context) });
+  return defineComponent({
+    name,
+    emits: [],
+    setup: (props, context) => setup(context)
+  });
 }
 /**
  * If props are specified outside of the {@link createComponent}
@@ -31,7 +40,7 @@ export function createView(name, setup) {
  * @returns the created props, with correct typing.
  */
 export function createProps(props) {
-    return props;
+  return props;
 }
 /**
  * Extracts props from another prop object and returns a reactive object with the specified props.
@@ -44,8 +53,7 @@ export function createProps(props) {
  * console.log(childProps) // { title: 'hi' }
  */
 export function extractProps(props, ...keys) {
-    const partial = {};
-    for (const key of keys)
-        partial[key] = toRef(props, key);
-    return reactive(partial);
-}
+  const partial = {};
+  for (const key of keys) partial[key] = toRef(props, key);
+  return reactive(partial);
+}

package/utils/deferred.js

@@ -3,15 +3,15 @@
  * @returns promise, resolve and reject
  */
 export function deferred() {
-    let resolve;
-    let reject;
-    const promise = new Promise((_resolve, _reject) => {
-        resolve = _resolve;
-        reject = _reject;
-    });
-    return {
-        promise,
-        resolve,
-        reject,
-    };
-}
+  let resolve;
+  let reject;
+  const promise = new Promise((_resolve, _reject) => {
+    resolve = _resolve;
+    reject = _reject;
+  });
+  return {
+    promise,
+    resolve,
+    reject
+  };
+}

package/utils/identifiable.js

@@ -6,11 +6,8 @@ import { markReadonly } from './utils';
  * @returns The first item with the specified `id` or `undefined` if none exists.
  */
 function find(array, id) {
-    const filtered = array.filter(item => item.id === id);
-    if (filtered.length > 0)
-        return filtered[0];
-    else
-        return undefined;
+  const filtered = array.filter(item => item.id === id);
+  if (filtered.length > 0) return filtered[0];else return undefined;
 }
 /**
  * Checks if the given array contains an item with the `id`.
@@ -19,11 +16,11 @@ function find(array, id) {
  * @returns `true` if there is at least one item in the array with the given `id`.
  */
 function contains(array, id) {
-    return find(array, id) !== undefined;
+  return find(array, id) !== undefined;
 }
 function insertSingle(baseArray, insertItem) {
-    const index = baseArray.findIndex(item => item.id === insertItem.id);
-    index === -1 ? baseArray.push(insertItem) : baseArray.splice(index, 1, insertItem);
+  const index = baseArray.findIndex(item => item.id === insertItem.id);
+  index === -1 ? baseArray.push(insertItem) : baseArray.splice(index, 1, insertItem);
 }
 /**
  * Inserts the items into the given array, replacing items with the same `id`.
@@ -34,8 +31,8 @@ function insertSingle(baseArray, insertItem) {
  * @returns The reference to the same array, which was passed.
  */
 function insert(array, ...insertItems) {
-    insertItems.forEach(item => insertSingle(array, item));
-    return array;
+  insertItems.forEach(item => insertSingle(array, item));
+  return array;
 }
 /**
  * Removes all items with the specified `ids` from the given array.
@@ -44,17 +41,14 @@ function insert(array, ...insertItems) {
  * @returns The reference to the same array, which was passed.
  */
 function remove(array, ...ids) {
-    ids.forEach(id => {
-        let noMatches = false;
-        while (!noMatches) {
-            const index = array.findIndex(item => item.id === id);
-            if (index != -1)
-                array.splice(index, 1);
-            else
-                noMatches = true;
-        }
-    });
-    return array;
+  ids.forEach(id => {
+    let noMatches = false;
+    while (!noMatches) {
+      const index = array.findIndex(item => item.id === id);
+      if (index != -1) array.splice(index, 1);else noMatches = true;
+    }
+  });
+  return array;
 }
 /**
  * Compares the two arrays and checks if they both have
@@ -64,15 +58,19 @@ function remove(array, ...ids) {
  * @returns `true` if the arrays contain item with the same `ids` in the same order.
  */
 function areSameArrays(first, second) {
-    if (first.length != second.length)
-        return false;
-    for (let i = 0; i < first.length; i++) {
-        if (first[i]?.id !== second[i]?.id)
-            return false;
-    }
-    return true;
+  if (first.length != second.length) return false;
+  for (let i = 0; i < first.length; i++) {
+    if (first[i]?.id !== second[i]?.id) return false;
+  }
+  return true;
 }
 /**
  * This object contains utility functions to deal with {@link Identifiable} objects.
  */
-export const Id = markReadonly({ find, contains, insert, remove, areSameArrays });
+export const Id = markReadonly({
+  find,
+  contains,
+  insert,
+  remove,
+  areSameArrays
+});

package/utils/stringMaxLength.js

@@ -5,10 +5,7 @@
  * @see maxLengthSplitCenter
  */
 export function maxLength(input, maxLength) {
-    if (input && input.length > maxLength)
-        return `${input.substring(0, maxLength - 3).trim()}...`;
-    else
-        return input || '';
+  if (input && input.length > maxLength) return `${input.substring(0, maxLength - 3).trim()}...`;else return input || '';
 }
 /**
  * Returns a shortened string with '...' in the center of the string if it is longer than the given `maxLength`.
@@ -17,12 +14,10 @@ export function maxLength(input, maxLength) {
  * @see maxLength
  */
 export function maxLengthSplitCenter(input, maxLength) {
-    if (input && input.length > maxLength) {
-        const chars = maxLength - 3;
-        const charsAtStart = Math.ceil(chars / 2);
-        const charsAtEnd = Math.floor(chars / 2);
-        return `${input.substring(0, charsAtStart).trim()}...${input.substring(input.length - charsAtEnd).trim()}`;
-    }
-    else
-        return input || '';
-}
+  if (input && input.length > maxLength) {
+    const chars = maxLength - 3;
+    const charsAtStart = Math.ceil(chars / 2);
+    const charsAtEnd = Math.floor(chars / 2);
+    return `${input.substring(0, charsAtStart).trim()}...${input.substring(input.length - charsAtEnd).trim()}`;
+  } else return input || '';
+}

package/utils/tailwind.js

@@ -1 +1 @@
-export {};
+export {};