@destyler/composition - npm Package Compare versions

Comparing version 0.0.1-beta.6 to 0.0.1-beta.7

dist/index.d.ts

@@ -1,18 +0,243 @@
-import { Ref, ComputedRef, WritableComputedRef } from 'vue';
+import * as vue from 'vue';
+import { Ref, WatchOptions, ComputedRef, WritableComputedRef, UnwrapRef, ComponentPublicInstance } from 'vue';
+import * as _destyler_shared from '@destyler/shared';
+import { MaybeRefOrGetter, Type, ArrowKeyOptions, Direction, MaybeElementRef, AnyFn, Stoppable } from '@destyler/shared';
 
-declare function isMounted(): Readonly<Ref<boolean>>;
+declare function useForwardRef(): (ref: any) => void;
 
-declare function useMergedState<T>(controlledStateRef: Ref<T | undefined>, uncontrolledStateRef: Ref<T>): ComputedRef<T>;
+type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
+declare function useImageLoadingStatus(src: Ref<string>): Ref<ImageLoadingStatus>;
 
-type MemoGetter<T> = () => T;
-type MemoSetter<T> = (v: T) => void;
-interface WritableMemoOptions<T> {
-    get: MemoGetter<T>;
-    set: MemoSetter<T>;
+interface UseClonedOptions<T = any> extends WatchOptions {
+    /**
+     * Custom clone function.
+     *
+     * By default, it use `JSON.parse(JSON.stringify(value))` to clone.
+     */
+    clone?: (source: T) => T;
+    /**
+     * Manually sync the ref
+     *
+     * @default false
+     */
+    manual?: boolean;
 }
-declare function useMemo<T>(getter: MemoGetter<T>): ComputedRef<T>;
-declare function useMemo<T>(options: WritableMemoOptions<T>): WritableComputedRef<T>;
+interface UseClonedReturn<T> {
+    /**
+     * Cloned ref
+     */
+    cloned: ComputedRef<T>;
+    /**
+     * Sync cloned data with source manually
+     */
+    sync: () => void;
+}
+type CloneFn<F, T = F> = (x: F) => T;
+declare function cloneFnJSON<T>(source: T): T;
+declare function useCloned<T>(source: MaybeRefOrGetter<T>, options?: UseClonedOptions): {
+    cloned: vue.Ref<vue.UnwrapRef<T>>;
+    sync: () => void;
+};
 
-declare function useFalseUntilTruthy(arg: Ref<any>): Readonly<Ref<boolean>>;
+interface UseVModelOptions<T, Passive extends boolean = false> {
+    /**
+     * When passive is set to `true`, it will use `watch` to sync with props and ref.
+     * Instead of relying on the `v-model` or `.sync` to work.
+     *
+     * @default false
+     */
+    passive?: Passive;
+    /**
+     * When eventName is set, it's value will be used to overwrite the emit event name.
+     *
+     * @default undefined
+     */
+    eventName?: string;
+    /**
+     * Attempting to check for changes of properties in a deeply nested object or array.
+     * Apply only when `passive` option is set to `true`
+     *
+     * @default false
+     */
+    deep?: boolean;
+    /**
+     * Defining default value for return ref when no value is passed.
+     *
+     * @default undefined
+     */
+    defaultValue?: T;
+    /**
+     * Clone the props.
+     * Accepts a custom clone function.
+     * When setting to `true`, it will use `JSON.parse(JSON.stringify(value))` to clone.
+     *
+     * @default false
+     */
+    clone?: boolean | CloneFn<T>;
+    /**
+     * The hook before triggering the emit event can be used for form validation.
+     * if false is returned, the emit event will not be triggered.
+     *
+     * @default undefined
+     */
+    shouldEmit?: (v: T) => boolean;
+}
+declare function useVModel<P extends object, K extends keyof P, Name extends string>(props: P, key?: K, emit?: (name: Name, ...args: any[]) => void, options?: UseVModelOptions<P[K], false>): WritableComputedRef<P[K]>;
+declare function useVModel<P extends object, K extends keyof P, Name extends string>(props: P, key?: K, emit?: (name: Name, ...args: any[]) => void, options?: UseVModelOptions<P[K], true>): Ref<UnwrapRef<P[K]>>;
 
-export { useFalseUntilTruthy, isMounted as useIsMounted, useMemo, useMergedState };
+/**
+ * The `useId` function generates a unique identifier based on a global count, with an optional
+ * deterministic ID.
+ * @param {string} [deterministicId] - The `deterministicId` parameter is an optional string that can
+ * be passed to the `useId` function. If a `deterministicId` is provided, it will be returned as the
+ * id. If no `deterministicId` is provided, a new id will be generated
+ * @returns either the provided deterministicId if it exists, or a string in the format "destyler-"
+ * followed by the value of the count variable from the global state.
+ */
+declare function useId(deterministicId?: string): string;
+
+interface Machine<S> {
+    [k: string]: {
+        [k: string]: S;
+    };
+}
+type MachineState<T> = keyof T;
+type MachineEvent<T> = keyof UnionToIntersection<T[keyof T]>;
+/**
+ * @see https://fettblog.eu/typescript-union-to-intersection/
+ */
+type UnionToIntersection<T> = (T extends any ? (x: T) => any : never) extends (x: infer R) => any ? R : never;
+declare function useStateMachine<M>(initialState: MachineState<M>, machine: M & Machine<MachineState<M>>): {
+    state: vue.Ref<vue.UnwrapRef<keyof M>>;
+    dispatch: (event: MachineEvent<M>) => void;
+};
+
+declare function usePresence(present: Ref<boolean>, node: Ref<HTMLElement | undefined>): {
+    isPresent: vue.ComputedRef<boolean>;
+};
+
+declare function useCustomElement(): {
+    customElement: vue.Ref<ComponentPublicInstance | undefined>;
+    currentElement: vue.ComputedRef<HTMLElement>;
+};
+
+interface Props {
+    modelValue?: string | string[];
+    type: Type;
+    defaultValue?: string | string[];
+}
+declare function useSingleOrMultipleValue<P extends Props, Name extends string>(props: P | any, emits: (name: Name, ...args: any[]) => void): {
+    modelValue: Ref<string | string[] | undefined>;
+    changeModelValue: (value: string) => void;
+};
+
+interface ArrowNavigationOptions {
+    /**
+     * @default "both"
+     */
+    arrowKeyOptions?: ArrowKeyOptions;
+    /**
+     * @default "data-destyler-vue-collection-item"
+     */
+    attributeName?: string;
+    /**
+     * @default []
+     */
+    itemsArray?: HTMLElement[];
+    /**
+     * @default true
+     */
+    loop?: boolean;
+    /**
+     * @default "ltr"
+     */
+    dir?: Direction;
+    /**
+     * @default true
+     */
+    preventScroll?: boolean;
+    /**
+     * @default false
+     */
+    focus?: boolean;
+}
+declare function useArrowNavigation(e: KeyboardEvent, currentElement: HTMLElement, parentElement: HTMLElement | undefined, options?: ArrowNavigationOptions): HTMLElement | null;
+
+/**
+ * Mounted state in ref.
+ */
+declare function useMounted(): vue.Ref<boolean>;
+
+declare function useSize(element: MaybeElementRef): {
+    width: vue.ComputedRef<number>;
+    height: vue.ComputedRef<number>;
+};
+
+/**
+ * Injects a pair of focus guards at the edges of the whole DOM tree
+ * to ensure `focusin` & `focusout` events can be caught consistently.
+ */
+declare function useFocusGuards(): void;
+
+/**
+ * The `useForwardProps` function in TypeScript takes in a set of props and returns a computed value
+ * that combines default props with assigned props from the current instance.
+ * @param {T} props - The `props` parameter is an object that represents the props passed to a
+ * component.
+ * @returns The function `useForwardProps` returns a computed value that combines the default props,
+ * preserved props, and assigned props.
+ */
+declare function useForwardProps<T extends Record<string, any>>(props: T): _destyler_shared.ComputedRefWithControl<T>;
+
+declare function useEmitAsProps<Name extends string>(emit: (name: Name, ...args: any[]) => void): Record<string, any>;
+
+declare function useForwardPropsEmits<T extends Record<string, any>, Name extends string>(props: T, emit?: (name: Name, ...args: any[]) => void): vue.ComputedRef<T & Record<string, any>>;
+
+/**
+ * The `useHideOthers` function is a TypeScript function that takes a target element reference and
+ * hides all other elements in ARIA when the target element is present, and restores the visibility of the
+ * hidden elements when the target element is removed.
+ * @param {MaybeElementRef} target - The `target` parameter is a reference to the element that you want
+ * to hide other elements when it is clicked or focused.
+ */
+declare function useHideOthers(target: MaybeElementRef): void;
+
+interface UseControllableStateParams<T> {
+    prop: ComputedRef<T | undefined>;
+    onChange?: (value: T) => void;
+    defaultProp?: ComputedRef<T | undefined>;
+    initialValue?: T;
+}
+declare function useControllable<T>({ prop, onChange, defaultProp, initialValue, }: UseControllableStateParams<T>): {
+    state: ComputedRef<T>;
+    updateValue: (nextValue: T | undefined) => void;
+};
+
+interface UseTimeoutFnOptions {
+    /**
+     * Start the timer immediate after calling this function
+     *
+     * @default true
+     */
+    immediate?: boolean;
+}
+/**
+ * Wrapper for `setTimeout` with controls.
+ *
+ * @param cb
+ * @param interval
+ * @param options
+ */
+declare function useTimeoutFn<CallbackFn extends AnyFn>(cb: CallbackFn, interval: MaybeRefOrGetter<number>, options?: UseTimeoutFnOptions): Stoppable<Parameters<CallbackFn> | []>;
+
+declare function useFormControl(el: MaybeElementRef): vue.ComputedRef<boolean>;
+
+declare function useDirection(dir?: Ref<Direction | undefined>): vue.ComputedRef<Direction>;
+
+type ContextValue = Ref<HTMLElement[]>;
+declare function useCollection(key?: string, name?: string): {
+    createCollection: (sourceRef?: Ref<HTMLElement | undefined>) => Ref<HTMLElement[]>;
+    injectCollection: () => ContextValue;
+};
+
+export { type CloneFn, type ImageLoadingStatus, type UseClonedOptions, type UseClonedReturn, type UseTimeoutFnOptions, type UseVModelOptions, cloneFnJSON, useArrowNavigation, useCloned, useCollection, useControllable, useCustomElement, useDirection, useEmitAsProps, useFocusGuards, useFormControl, useForwardProps, useForwardPropsEmits, useForwardRef, useHideOthers, useId, useImageLoadingStatus, useMounted, usePresence, useSingleOrMultipleValue, useSize, useStateMachine, useTimeoutFn, useVModel };

package.json

 {
   "name": "@destyler/composition",
-  "version": "0.0.1-beta.6",
+  "version": "0.0.1-beta.7",
   "description": "",
@@ -25,2 +25,6 @@ "author": "Elone Hoo <[e-mail]>",
   },
+  "dependencies": {
+    "aria-hidden": "^1.2.3",
+    "@destyler/shared": "0.0.1-beta.7"
+  },
   "scripts": {
@@ -27,0 +31,0 @@ "clear": "rimraf ./dist",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

67283

increased by1116.47%

Lines of code

1533

increased by1166.94%

Worsened metrics

Dependency count

3

increased by200%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@destyler/shared@0.0.1-beta.7

• + Addedaria-hidden@^1.2.3

• + Added@destyler/shared@0.0.1-beta.7(transitive)

• + Addedaria-hidden@1.2.4(transitive)

• + Addedtslib@2.8.1(transitive)