@naptics/vue-collection 1.0.0-beta.1 → 1.0.0-beta.2

package/lib/components/NValInput.d.ts

@@ -0,0 +1,156 @@
+import { type PropType } from 'vue';
+import { type NInputExposed } from './NInput';
+import { type ValidationRule, type ValidationResult } from '../utils/validation';
+import type { ValidatedForm } from './ValidatedForm';
+export declare const validationProps: {
+    /**
+     * If set to `true` this inputs validation will always succeed and all validation
+     * rules are ignored. Default is `false`.
+     */
+    readonly disableValidation: BooleanConstructor;
+    /**
+     * 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`.
+     */
+    readonly optional: BooleanConstructor;
+    /**
+     * 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.
+     */
+    readonly rules: {
+        readonly type: PropType<ValidationRule[] | ValidationRule>;
+        readonly default: () => never[];
+    };
+    /**
+     * The form, which this input will be added to.
+     * On initialization, this input will call {@link ValidatedForm.addInput} passing itself to the form.
+     */
+    readonly form: PropType<ValidatedForm>;
+    /**
+     * Overrides the internal error state. If set to true, it will always display an error.
+     */
+    readonly error: BooleanConstructor;
+    /**
+     * Overrides the internal error message. If set, this message is always displayed.
+     */
+    readonly errorMessage: StringConstructor;
+    /**
+     * If set to `true` the error message is not shown.
+     * However, the input is still marked red if it is in an error state.
+     */
+    readonly hideErrorMessage: BooleanConstructor;
+    /**
+     * Disables the validation on blur. Should only be used in special occasions.
+     */
+    readonly disableBlurValidation: BooleanConstructor;
+};
+export declare const nValInputProps: {
+    /**
+     * A slot to replace the input.
+     */
+    readonly input: PropType<(props: InputSlotProps) => JSX.Element>;
+    /**
+     * If set to `true` this inputs validation will always succeed and all validation
+     * rules are ignored. Default is `false`.
+     */
+    readonly disableValidation: BooleanConstructor;
+    /**
+     * 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`.
+     */
+    readonly optional: BooleanConstructor;
+    /**
+     * 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.
+     */
+    readonly rules: {
+        readonly type: PropType<ValidationRule[] | ValidationRule>;
+        readonly default: () => never[];
+    };
+    /**
+     * The form, which this input will be added to.
+     * On initialization, this input will call {@link ValidatedForm.addInput} passing itself to the form.
+     */
+    readonly form: PropType<ValidatedForm>;
+    /**
+     * Overrides the internal error state. If set to true, it will always display an error.
+     */
+    readonly error: BooleanConstructor;
+    /**
+     * Overrides the internal error message. If set, this message is always displayed.
+     */
+    readonly errorMessage: StringConstructor;
+    /**
+     * If set to `true` the error message is not shown.
+     * However, the input is still marked red if it is in an error state.
+     */
+    readonly hideErrorMessage: BooleanConstructor;
+    /**
+     * Disables the validation on blur. Should only be used in special occasions.
+     */
+    readonly disableBlurValidation: BooleanConstructor;
+    readonly tooltipText: StringConstructor;
+    readonly tooltipContent: PropType<() => JSX.Element>;
+    readonly tooltipHide: BooleanConstructor;
+    readonly tooltipShow: BooleanConstructor;
+    readonly tooltipPlacement: {
+        readonly type: PropType<import("./NTooltip").TooltipPlacement>;
+        readonly default: "auto";
+    };
+    readonly tooltipMaxWidth: {
+        readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
+        readonly default: "max-w-xs";
+    };
+    readonly tooltipWrapperClass: StringConstructor;
+    readonly tooltipContentClass: StringConstructor;
+    readonly tooltipArrowClass: StringConstructor;
+    readonly tooltipDelay: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    readonly name: StringConstructor;
+    readonly placeholder: StringConstructor;
+    readonly autocomplete: {
+        readonly type: StringConstructor;
+        readonly default: "off";
+    };
+    readonly type: {
+        readonly type: StringConstructor;
+        readonly default: "text";
+    };
+    readonly max: StringConstructor;
+    readonly min: StringConstructor;
+    readonly disabled: BooleanConstructor;
+    readonly small: BooleanConstructor;
+    readonly hideLabel: BooleanConstructor;
+    readonly inputClass: StringConstructor;
+    readonly onFocus: PropType<() => void>;
+    readonly onBlur: PropType<() => void>;
+    readonly value: PropType<string>;
+    readonly onUpdateValue: PropType<(newValue: string) => void>;
+};
+export type InputSlotProps = {
+    onBlur(): void;
+    onUpdateValue(newValue: string): void;
+    error: boolean;
+};
+/**
+ * The exposed functions of NValInput
+ */
+export type NValInputExposed = {
+    /**
+     * Validates the input and returns the validation result
+     */
+    validate: () => ValidationResult;
+    /**
+     * Resets the validation state of the input.
+     */
+    reset: () => void;
+} & NInputExposed;
+/**
+ * The `NValInput` is a `NInput` with custom validation.
+ */
+declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
+export { Component as NValInput, Component as default };

package/lib/components/NValInput.js

@@ -0,0 +1,113 @@
+import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
+import { createComponentWithSlots } from '../utils/component';
+import { computed, onMounted, onUnmounted } from 'vue';
+import { ref, reactive, watch } from 'vue';
+import NInput, { nInputProps } from './NInput';
+import { validate, required, validResult } from '../utils/validation';
+export const validationProps = {
+  /**
+   * If set to `true` this inputs validation will always succeed and all validation
+   * rules are ignored. Default is `false`.
+   */
+  disableValidation: Boolean,
+  /**
+   * 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 = {
+  ...nInputProps,
+  ...validationProps,
+  /**
+   * A slot to replace the input.
+   */
+  input: Function
+};
+/**
+ * The `NValInput` is a `NInput` with custom validation.
+ */
+const Component = createComponentWithSlots('NValInput', nValInputProps, ['input'], (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 = props.disableValidation ? validResult() : 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());
+  watch(() => props.disableValidation, () => 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);
+  let assignedId = undefined;
+  onMounted(() => assignedId = props.form?.addInput(expose));
+  onUnmounted(() => assignedId && props.form?.removeInput(assignedId));
+  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])]);
+});
+export { Component as NValInput, Component as default };

package/lib/components/ValidatedForm.d.ts

@@ -0,0 +1,39 @@
+import type { ValidationResult } from '../utils/validation';
+import type { NValInputExposed } from './NValInput';
+/**
+ * A ValidatedForm groups different inputs together and provides functions, which operate on all inputs at the same time.
+ * With a form multiple inputs can be validated together by calling the validate function.
+ * @example
+ * const form = createValidatedForm()
+ * <NValInput ... form={form} />
+ * <NValInput ... form={form} />
+ * const onClick = () => form.validate()
+ */
+export type ValidatedForm = {
+    /**
+     * Adds the input to the list of this form and returns the assigned `id`.
+     * If this form is passed to a `<NValInput />` via the props, will add itself to this form.
+     * @returns the newly assigned `id` of the added input.
+     * @example
+     * <NValInput ... form={form} />
+     */
+    addInput(input: NValInputExposed): string;
+    /**
+     * Removes the input with the given `id` from this form.
+     */
+    removeInput(id: string): void;
+    /**
+     * Validates all inputs of the form. If inputs are invalid they will show it visually.
+     * The first invalid validation result is returned.
+     */
+    validate(): ValidationResult;
+    /**
+     * Resets the validation state of all inputs.
+     */
+    reset(): void;
+};
+/**
+ * Creates a new ValidatedForm.
+ * @returns the instance of the new form.
+ */
+export declare function createValidatedForm(): ValidatedForm;

package/lib/components/ValidatedForm.js

@@ -0,0 +1,35 @@
+import { Id } from '../utils/identifiable';
+import { uniqueId } from '../utils/utils';
+/**
+ * Creates a new ValidatedForm.
+ * @returns the instance of the new form.
+ */
+export function createValidatedForm() {
+  return new ValidatedFormImpl();
+}
+class ValidatedFormImpl {
+  inputs = [];
+  addInput(input) {
+    const id = `input-${uniqueId()}`;
+    this.inputs.push({
+      id,
+      ...input
+    });
+    return id;
+  }
+  removeInput(id) {
+    Id.remove(this.inputs, id);
+  }
+  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/{src/lib/i18n/index.ts → lib/i18n/index.d.ts}

@@ -1,45 +1,33 @@
-import type { Nullish } from '../utils/utils'
-
+import type { Nullish } from '../utils/utils';
 /**
  * @see {@link trsl}
  */
-export type TranslationFunction = typeof trsl
-
+export type TranslationFunction = typeof trsl;
 /**
  * @see {@link trslc}
  */
-export type TranslationCountFunction = typeof trslc
-
+export type TranslationCountFunction = typeof trslc;
 /**
  * A `TranslationProvider` has to implement the two functions `trsl` and `trslc`.
  */
 export type TranslationProvider = {
-    trsl: TranslationFunction
-    trslc: TranslationCountFunction
-}
-
-let provider: TranslationProvider | undefined = undefined
-
+    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 function registerTranslationProvider(newProvider: TranslationProvider): void {
-    provider = newProvider
-}
-
+export declare function registerTranslationProvider(newProvider: TranslationProvider): void;
 /**
  * Translates the specified key with the according message.
  * @param key the key to translate.
  * @param params formatting parameters for the message.
  * @returns the translated message.
  */
-export function trsl(key: string, params?: Record<string, unknown>): string {
-    return provider?.trsl(key, params) ?? key
-}
-
+export declare function trsl(key: string, params?: Record<string, unknown>): string;
 /**
  * Translates the specified key using pluralization.
  * The provided `count`is automatically passed as the parameter `n` to the translation library.
@@ -49,6 +37,4 @@ export function trsl(key: string, params?: Record<string, unknown>): string {
  * @returns the translated message.
  * @see trsl
  */
-export function trslc(key: string, count: Nullish<number>, params?: Record<string, unknown>): string {
-    return provider?.trslc(key, count, params) ?? key
-}
+export declare function trslc(key: string, count: Nullish<number>, params?: Record<string, unknown>): string;

package/lib/i18n/index.js

@@ -0,0 +1,31 @@
+let provider = undefined;
+/**
+ * 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 function registerTranslationProvider(newProvider) {
+  provider = newProvider;
+}
+/**
+ * Translates the specified key with the according message.
+ * @param key the key to translate.
+ * @param params formatting parameters for the message.
+ * @returns the translated message.
+ */
+export function trsl(key, params) {
+  return provider?.trsl(key, params) ?? key;
+}
+/**
+ * Translates the specified key using pluralization.
+ * The provided `count`is automatically passed as the parameter `n` to the translation library.
+ * @param key the key to translate.
+ * @param count the count used for the pluralization.
+ * @param params formatting parameters for the message.
+ * @returns the translated message.
+ * @see trsl
+ */
+export function trslc(key, count, params) {
+  return provider?.trslc(key, count, params) ?? key;
+}

package/lib/index.d.ts

@@ -0,0 +1,2 @@
+import { createComponent, createView } from './utils/component';
+export { createComponent, createView };

package/lib/index.js

@@ -0,0 +1,2 @@
+import { createComponent, createView } from './utils/component';
+export { createComponent, createView };

package/lib/utils/breakpoints.d.ts

@@ -0,0 +1,18 @@
+import { type ComputedRef } from 'vue';
+export type TWBreakpoint = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export declare const breakpoints: Readonly<Record<TWBreakpoint, number>>;
+export declare const bodyWidth: import("vue").Ref<number, number>;
+/**
+ * This function has to be called once in the app two ensure that the breakpoint utilities actually update.
+ * It sets a `window.onresize` listener.
+ */
+export declare function addDocumentResizeEventListener(): void;
+/**
+ * Returns a ref whose value is `true` as long as the `document.body.clientWitdh` is above the specified breakpoint.
+ */
+export declare function isWidthBreakpoint(breakpoint: TWBreakpoint): ComputedRef<boolean>;
+export declare const isWidth2xl: ComputedRef<boolean>;
+export declare const isWidthXl: ComputedRef<boolean>;
+export declare const isWidthLg: ComputedRef<boolean>;
+export declare const isWidthMd: ComputedRef<boolean>;
+export declare const isWidthSm: ComputedRef<boolean>;

package/lib/utils/breakpoints.js

@@ -0,0 +1,40 @@
+import { computed, ref } from 'vue';
+export const breakpoints = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  '2xl': 1536
+};
+export const bodyWidth = ref(document.body.clientWidth);
+/**
+ * This function has to be called once in the app two ensure that the breakpoint utilities actually update.
+ * It sets a `window.onresize` listener.
+ */
+export function addDocumentResizeEventListener() {
+  window.onresize = () => {
+    bodyWidth.value = document.body.clientWidth;
+  };
+}
+/**
+ * Returns a ref whose value is `true` as long as the `document.body.clientWitdh` is above the specified breakpoint.
+ */
+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;
+  }
+}
+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);

package/lib/utils/component.d.ts

@@ -0,0 +1,57 @@
+import type { LooseRequired } from '@vue/shared';
+import { type ComponentObjectPropsOptions, type ExtractPropTypes, type RenderFunction, type SetupContext, type ToRefs, type UnwrapNestedRefs } from 'vue';
+import type { AnyObject } from './utils';
+type Data = Record<string, unknown>;
+export type Props<T extends Data = Data> = ComponentObjectPropsOptions<T>;
+/**
+ * `ExtractedProps` maps a prop object to the props, which are received in the `setup` function of a components.
+ */
+export type ExtractedProps<T extends Props> = Readonly<LooseRequired<Readonly<ExtractPropTypes<T>>>>;
+/**
+ * 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.
+ * All other arguments which the {@link defineComponent} method of vue may provide,
+ * should not be used for a better consistency across all components.
+ * @param name the name of the component, should be more than one word.
+ * @param props the props of the component.
+ * @param setup the setup function, which will be called when the component is mounted.
+ * @returns the created vue-component.
+ */
+export declare function createComponent<T extends Props>(name: string, props: T, setup: (props: ExtractedProps<T>, context: SetupContext<never[]>) => RenderFunction | Promise<RenderFunction>): import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
+/**
+ * When using this function, the created component will make available all props
+ * specifiedin `slotPropKeys` as slot. In this way, they can be used by either setting
+ * the prop directly or by using a slot with the same name. This is useful for older
+ * components (in `.vue` files), because they are dependent on slots.
+ * @see {@link createComponent}
+ */
+export declare function createComponentWithSlots<T extends Props>(name: string, props: T, slotPropKeys: SlotPropsKeys<ExtractedProps<T>>, setup: (props: ExtractedProps<T>, context: SetupContext<never[]>) => RenderFunction | Promise<RenderFunction>): import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
+/**
+ * Views should be created using this helper function. Views are special components, which don't have props.
+ * They are often the parent objects in a view hierarchy and contain many components.
+ * This function is syntactic sugar to create views and just calls {@link createComponent}.
+ * @param name the name of the component, should be more than one word.
+ * @param setup the setup function, which will be called when the component is mounted.
+ * @returns the created vue-component.
+ */
+export declare function createView(name: string, setup: (context: SetupContext<never[]>) => RenderFunction | Promise<RenderFunction>): import("vue").DefineComponent<{}, RenderFunction, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, never[], never, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/**
+ * Extracts props from another prop object and returns a reactive object with the specified props.
+ * @param props the props to extract from
+ * @param keys the keys to extract from the props
+ * @returns the new object with the specified props
+ * @example
+ * const parentProps = { title: 'hi', text: 'ho' }
+ * const childProps = extractProps(parentProps, 'title')
+ * console.log(childProps) // { title: 'hi' }
+ */
+export declare function extractProps<T extends Record<string, unknown>>(props: T, ...keys: (keyof T)[]): UnwrapNestedRefs<Partial<ToRefs<T>>>;
+type SlotFunction<Args extends any[] = any[]> = (...args: Args) => JSX.Element;
+/**
+ * Filters object T to only have properties of type K.
+ */
+type FilterObject<T, K> = {
+    [P in keyof T as T[P] extends K ? P : never]: T[P];
+};
+type SlotPropsKeys<T extends AnyObject> = (keyof FilterObject<T, SlotFunction | undefined>)[];
+export {};

package/lib/utils/component.js

@@ -0,0 +1,79 @@
+import { defineComponent, reactive, toRef, toRefs, ref, Fragment as _Fragment, createVNode as _createVNode } 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.
+ * All other arguments which the {@link defineComponent} method of vue may provide,
+ * should not be used for a better consistency across all components.
+ * @param name the name of the component, should be more than one word.
+ * @param props the props of the component.
+ * @param setup the setup function, which will be called when the component is mounted.
+ * @returns the created vue-component.
+ */
+export function createComponent(name, props, setup) {
+  // Vue 3.5's defineComponent has strict type requirements that don't align with our simplified API.
+  // The type assertion is necessary because the generic setup function signature doesn't match
+  // Vue's complex overloaded defineComponent types, even though the runtime behavior is correct.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return defineComponent({
+    name,
+    props,
+    emits: [],
+    setup
+  });
+}
+/**
+ * When using this function, the created component will make available all props
+ * specifiedin `slotPropKeys` as slot. In this way, they can be used by either setting
+ * the prop directly or by using a slot with the same name. This is useful for older
+ * components (in `.vue` files), because they are dependent on slots.
+ * @see {@link createComponent}
+ */
+export function createComponentWithSlots(name, props, slotPropKeys, setup) {
+  const newSetup = (props, context) => {
+    const slottedProps = createSlotProps(props, context.slots, ...slotPropKeys);
+    return setup(slottedProps, context);
+  };
+  return createComponent(name, props, newSetup);
+}
+/**
+ * Views should be created using this helper function. Views are special components, which don't have props.
+ * They are often the parent objects in a view hierarchy and contain many components.
+ * This function is syntactic sugar to create views and just calls {@link createComponent}.
+ * @param name the name of the component, should be more than one word.
+ * @param setup the setup function, which will be called when the component is mounted.
+ * @returns the created vue-component.
+ */
+export function createView(name, setup) {
+  return defineComponent({
+    name,
+    emits: [],
+    setup: (props, context) => setup(context)
+  });
+}
+/**
+ * Extracts props from another prop object and returns a reactive object with the specified props.
+ * @param props the props to extract from
+ * @param keys the keys to extract from the props
+ * @returns the new object with the specified props
+ * @example
+ * const parentProps = { title: 'hi', text: 'ho' }
+ * const childProps = extractProps(parentProps, 'title')
+ * 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);
+}
+function createSlotProps(props, slots, ...keys) {
+  // create refs, don't touch all props which are not slots
+  const newProps = toRefs(props);
+  keys.forEach(key => {
+    // if a slot is set once, it is basically always set. The changing content is not a problem as it is inside the function.
+    const slot = slots[key];
+    // if the slot is set, overwrite the props
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    if (slot) newProps[key] = (...args) => _createVNode(_Fragment, null, [slot?.(...args)]);
+  });
+  return ref(newProps).value;
+}

package/lib/utils/deferred.d.ts

@@ -0,0 +1,13 @@
+type PromiseResolve<T> = (value: T | PromiseLike<T>) => void;
+type PromiseReject = (reason?: unknown) => void;
+export type DeferredPromise<T> = {
+    promise: Promise<T>;
+    resolve: PromiseResolve<T>;
+    reject: PromiseReject;
+};
+/**
+ * Utlitity to return a deferred promise, which can be resolved from outside.
+ * @returns promise, resolve and reject
+ */
+export declare function deferred<T>(): DeferredPromise<T>;
+export {};

package/lib/utils/deferred.js

@@ -0,0 +1,17 @@
+/**
+ * Utlitity to return a deferred promise, which can be resolved from outside.
+ * @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
+  };
+}