@teammodlr/ui-kit 2.3.12 → 2.3.14

package/src/composables/useInput.ts

@@ -1,151 +1,151 @@
-// inspired by indielayer ui
-import type { PropType } from 'vue';
-import { ref, watch, inject, computed, onMounted, onUnmounted } from 'vue';
-import { useId } from './useCachedUid';
-import { FORM_STATE } from '../components/form/symbol';
-
-export interface FormInput {
-    focus: () => void;
-    validate: (value: any) => void;
-    setError: (value: string) => void;
-}
-
-export const useInput = (
-    props: any,
-    {
-        focus,
-        emit,
-        withListeners = true
-    }: {
-        focus: () => void;
-        emit: any;
-        withListeners?: boolean;
-    }
-) => {
-    const isFirstValidation = ref(true);
-    const formError = ref(props.error);
-
-    const id = useId(null, 'input');
-    const name = props.name ? props.name : id;
-    const _name = ref(name);
-
-    watch(
-        () => props.error,
-        value => (formError.value = value)
-    );
-    watch(
-        () => props.name,
-        value => (name.value = value)
-    );
-
-    const form = inject(FORM_STATE, null);
-
-    const reset = () => {
-        formError.value = '';
-        isFirstValidation.value = true;
-        emit('update:modelValue', '');
-    };
-
-    const setError = (value: string) => {
-        formError.value = value;
-    };
-
-    const validate = (value: any): boolean => {
-        value = value || props.modelValue;
-
-        isFirstValidation.value = false;
-
-        for (let i = 0; i < props.rules.length; i++) {
-            const item = props.rules[i];
-
-            let valid = true;
-
-            if (typeof item === 'function') {
-                valid = item(value);
-            } else if (Array.isArray(item) && item.length === 2) {
-                const { 0: rule, 1: options } = item;
-                valid = rule(value, options);
-            } else {
-                const rule = item.fn;
-                const { options } = item;
-
-                valid = rule(value, options);
-            }
-
-            if (valid !== true) {
-                formError.value = valid;
-                return false;
-            }
-        }
-
-        formError.value = '';
-        return true;
-    };
-
-    const inputListeners = withListeners
-        ? computed(() => {
-              return {
-                  blur: (event: Event) => emit('blur', event),
-                  focus: (event: Event) => emit('focus', event),
-                  input: (event: Event) => {
-                      emit(
-                          'update:modelValue',
-                          (event.target as HTMLInputElement).value
-                      );
-                  },
-                  change: (event: Event) => emit('change', event)
-              };
-          })
-        : {};
-
-    onMounted(() => {
-        form?.add(
-            _name.value,
-            focus,
-            // @ts-ignore
-            validate,
-            // @ts-ignore
-            setError
-        );
-    });
-
-    onUnmounted(() => {
-        form?.remove(_name.value);
-    });
-
-    return {
-        id,
-        isFirstValidation,
-        formError,
-        insideForm: form?.insideForm ?? false,
-        inputListeners,
-        reset,
-        validate,
-        setError,
-        //@ts-ignore
-        formDisabled: form?.disabled.value || false,
-        //@ts-ignore
-        formLoading: form?.loading.value || false
-    };
-};
-
-useInput.emits = (withListeners = true): string[] => {
-    return withListeners
-        ? ['update:modelValue', 'blur', 'focus', 'input', 'change']
-        : ['update:modelValue'];
-};
-
-useInput.props = () =>
-    ({
-        modelValue: [String, Number, Boolean, Object, Array] as PropType<
-            string | number | boolean | object | any[] | any[] | undefined
-        >,
-        name: String,
-        readonly: Boolean,
-        required: Boolean,
-        error: String,
-        rules: {
-            type: Array,
-            default: () => []
-        }
-    }) as const;
+// inspired by indielayer ui
+import type { PropType } from 'vue';
+import { ref, watch, inject, computed, onMounted, onUnmounted } from 'vue';
+import { useId } from './useCachedUid';
+import { FORM_STATE } from '../components/form/symbol';
+
+export interface FormInput {
+    focus: () => void;
+    validate: (value: any) => void;
+    setError: (value: string) => void;
+}
+
+export const useInput = (
+    props: any,
+    {
+        focus,
+        emit,
+        withListeners = true
+    }: {
+        focus: () => void;
+        emit: any;
+        withListeners?: boolean;
+    }
+) => {
+    const isFirstValidation = ref(true);
+    const formError = ref(props.error);
+
+    const id = useId(null, 'input');
+    const name = props.name ? props.name : id;
+    const _name = ref(name);
+
+    watch(
+        () => props.error,
+        value => (formError.value = value)
+    );
+    watch(
+        () => props.name,
+        value => (name.value = value)
+    );
+
+    const form = inject(FORM_STATE, null);
+
+    const reset = () => {
+        formError.value = '';
+        isFirstValidation.value = true;
+        emit('update:modelValue', '');
+    };
+
+    const setError = (value: string) => {
+        formError.value = value;
+    };
+
+    const validate = (value: any): boolean => {
+        value = value || props.modelValue;
+
+        isFirstValidation.value = false;
+
+        for (let i = 0; i < props.rules.length; i++) {
+            const item = props.rules[i];
+
+            let valid = true;
+
+            if (typeof item === 'function') {
+                valid = item(value);
+            } else if (Array.isArray(item) && item.length === 2) {
+                const { 0: rule, 1: options } = item;
+                valid = rule(value, options);
+            } else {
+                const rule = item.fn;
+                const { options } = item;
+
+                valid = rule(value, options);
+            }
+
+            if (valid !== true) {
+                formError.value = valid;
+                return false;
+            }
+        }
+
+        formError.value = '';
+        return true;
+    };
+
+    const inputListeners = withListeners
+        ? computed(() => {
+              return {
+                  blur: (event: Event) => emit('blur', event),
+                  focus: (event: Event) => emit('focus', event),
+                  input: (event: Event) => {
+                      emit(
+                          'update:modelValue',
+                          (event.target as HTMLInputElement).value
+                      );
+                  },
+                  change: (event: Event) => emit('change', event)
+              };
+          })
+        : {};
+
+    onMounted(() => {
+        form?.add(
+            _name.value,
+            focus,
+            // @ts-ignore
+            validate,
+            // @ts-ignore
+            setError
+        );
+    });
+
+    onUnmounted(() => {
+        form?.remove(_name.value);
+    });
+
+    return {
+        id,
+        isFirstValidation,
+        formError,
+        insideForm: form?.insideForm ?? false,
+        inputListeners,
+        reset,
+        validate,
+        setError,
+        //@ts-ignore
+        formDisabled: form?.disabled.value || false,
+        //@ts-ignore
+        formLoading: form?.loading.value || false
+    };
+};
+
+useInput.emits = (withListeners = true): string[] => {
+    return withListeners
+        ? ['update:modelValue', 'blur', 'focus', 'input', 'change']
+        : ['update:modelValue'];
+};
+
+useInput.props = () =>
+    ({
+        modelValue: [String, Number, Boolean, Object, Array] as PropType<
+            string | number | boolean | object | any[] | any[] | undefined
+        >,
+        name: String,
+        readonly: Boolean,
+        required: Boolean,
+        error: String,
+        rules: {
+            type: Array,
+            default: () => []
+        }
+    }) as const;

package/src/composables/useInteractive.ts

@@ -1,19 +1,19 @@
-import type { Ref } from 'vue';
-
-export interface InteractiveProps {
-    disabled?: boolean;
-    loading?: boolean;
-}
-
-export const useInteractive = (el: Ref<HTMLElement | null>) => {
-    return {
-        focus: () => el.value?.focus?.(),
-        blur: () => el.value?.blur?.()
-    };
-};
-
-useInteractive.props = () =>
-    ({
-        disabled: Boolean,
-        loading: Boolean
-    }) as const;
+import type { Ref } from 'vue';
+
+export interface InteractiveProps {
+    disabled?: boolean;
+    loading?: boolean;
+}
+
+export const useInteractive = (el: Ref<HTMLElement | null>) => {
+    return {
+        focus: () => el.value?.focus?.(),
+        blur: () => el.value?.blur?.()
+    };
+};
+
+useInteractive.props = () =>
+    ({
+        disabled: Boolean,
+        loading: Boolean
+    }) as const;

package/src/composables/useIsServer.ts

@@ -1,7 +1,7 @@
-import { ref } from 'vue';
-
-export function useIsServer() {
-    const isServer = ref(typeof window === 'undefined');
-
-    return isServer;
-}
+import { ref } from 'vue';
+
+export function useIsServer() {
+    const isServer = ref(typeof window === 'undefined');
+
+    return isServer;
+}

package/src/composables/useMergedState.ts

@@ -1,18 +1,18 @@
-import { type Ref, watch, type ComputedRef, computed } from 'vue';
-
-export default function useMergedState<T>(
-    controlledStateRef: Ref<T | undefined>,
-    uncontrolledStateRef: Ref<T>
-): ComputedRef<T> {
-    watch(controlledStateRef, value => {
-        if (value !== undefined) {
-            uncontrolledStateRef.value = value;
-        }
-    });
-    return computed(() => {
-        if (controlledStateRef.value === undefined) {
-            return uncontrolledStateRef.value;
-        }
-        return controlledStateRef.value;
-    });
-}
+import { type Ref, watch, type ComputedRef, computed } from 'vue';
+
+export default function useMergedState<T>(
+    controlledStateRef: Ref<T | undefined>,
+    uncontrolledStateRef: Ref<T>
+): ComputedRef<T> {
+    watch(controlledStateRef, value => {
+        if (value !== undefined) {
+            uncontrolledStateRef.value = value;
+        }
+    });
+    return computed(() => {
+        if (controlledStateRef.value === undefined) {
+            return uncontrolledStateRef.value;
+        }
+        return controlledStateRef.value;
+    });
+}

package/src/composables/useMount.ts

@@ -1,43 +1,43 @@
-import { createVNode, render } from 'vue';
-import type { App, Component } from 'vue';
-
-export function mount(
-    component: Component,
-    {
-        props,
-        children,
-        element,
-        app
-    }: {
-        props?: Record<string, unknown>;
-        children?: unknown;
-        app?: App;
-        element?: HTMLElement;
-    } = {}
-) {
-    let el = element;
-
-    const vNode = createVNode(component, props, children);
-
-    if (app && app._context) {
-        vNode.appContext = app._context;
-    }
-
-    if (el) {
-        render(vNode, el);
-    } else if (typeof document !== 'undefined') {
-        render(vNode, (el = document.createElement('div')));
-    }
-
-    const destroy = () => {
-        if (el) {
-            render(null, el);
-        }
-    };
-
-    return {
-        el,
-        vNode,
-        destroy
-    };
-}
+import { createVNode, render } from 'vue';
+import type { App, Component } from 'vue';
+
+export function mount(
+    component: Component,
+    {
+        props,
+        children,
+        element,
+        app
+    }: {
+        props?: Record<string, unknown>;
+        children?: unknown;
+        app?: App;
+        element?: HTMLElement;
+    } = {}
+) {
+    let el = element;
+
+    const vNode = createVNode(component, props, children);
+
+    if (app && app._context) {
+        vNode.appContext = app._context;
+    }
+
+    if (el) {
+        render(vNode, el);
+    } else if (typeof document !== 'undefined') {
+        render(vNode, (el = document.createElement('div')));
+    }
+
+    const destroy = () => {
+        if (el) {
+            render(null, el);
+        }
+    };
+
+    return {
+        el,
+        vNode,
+        destroy
+    };
+}