@teammodlr/ui-kit 2.0.24 → 2.0.27

package/src/composables/useCachedUid.ts

@@ -1,48 +1,48 @@
-// https://github.com/liip/chusho/blob/main/packages/chusho/lib/composables/useCachedUid.ts#L20-L41 - Legend :D
-import { onMounted, readonly, ref } from 'vue';
-import { getElement } from './element';
-import type { ComponentPublicInstance, Ref } from 'vue';
-
-const UID_CACHE_ATTR = 'data-modlr-ssr-uid';
-
-// @ts-nocheck
-type CacheElement = HTMLElement | SVGElement | ComponentPublicInstance | null;
-
-export function uid(prefix: string = ''): string {
-    const id = Date.now().toString(36) + Math.random().toString(36).substring(2);
-    return prefix ? `${prefix}-${id}` : id;
-}
-
-export interface IUseCacheUid {
-    id: Readonly<Ref<string>>;
-    cacheAttrs: {
-        ref: Ref<CacheElement>;
-        [UID_CACHE_ATTR]?: string;
-    };
-}
-
-export function useCachedUid(prefix?: string): IUseCacheUid {
-    let id = ref(uid(prefix));
-    const cacheElement = ref<CacheElement>(null);
-
-    onMounted(() => {
-        if(cacheElement.value) {
-            const element = getElement(cacheElement);
-            const serverId = element?.getAttribute(UID_CACHE_ATTR);
-
-            if(serverId) {
-                id.value = serverId;
-            }
-
-            element?.removeAttribute(UID_CACHE_ATTR);
-        }
-    });
-
-    return {
-        id: readonly(id),
-        cacheAttrs: {
-            ref: cacheElement,
-            [UID_CACHE_ATTR]: typeof window === undefined ? id.value : undefined
-        }
-    }
-}
+// https://github.com/liip/chusho/blob/main/packages/chusho/lib/composables/useCachedUid.ts#L20-L41 - Legend :D
+import { onMounted, readonly, ref } from 'vue';
+import { getElement } from './element';
+import type { ComponentPublicInstance, Ref } from 'vue';
+
+const UID_CACHE_ATTR = 'data-modlr-ssr-uid';
+
+// @ts-nocheck
+type CacheElement = HTMLElement | SVGElement | ComponentPublicInstance | null;
+
+export function uid(prefix: string = ''): string {
+    const id = Date.now().toString(36) + Math.random().toString(36).substring(2);
+    return prefix ? `${prefix}-${id}` : id;
+}
+
+export interface IUseCacheUid {
+    id: Readonly<Ref<string>>;
+    cacheAttrs: {
+        ref: Ref<CacheElement>;
+        [UID_CACHE_ATTR]?: string;
+    };
+}
+
+export function useCachedUid(prefix?: string): IUseCacheUid {
+    let id = ref(uid(prefix));
+    const cacheElement = ref<CacheElement>(null);
+
+    onMounted(() => {
+        if(cacheElement.value) {
+            const element = getElement(cacheElement);
+            const serverId = element?.getAttribute(UID_CACHE_ATTR);
+
+            if(serverId) {
+                id.value = serverId;
+            }
+
+            element?.removeAttribute(UID_CACHE_ATTR);
+        }
+    });
+
+    return {
+        id: readonly(id),
+        cacheAttrs: {
+            ref: cacheElement,
+            [UID_CACHE_ATTR]: typeof window === undefined ? id.value : undefined
+        }
+    }
+}

package/src/composables/useEventListener.ts

@@ -1,14 +1,14 @@
-import { watchEffect } from "vue";
-
-export function useEventListener<T extends EventTarget | HTMLElement, E extends EventListener>(element: T, type: string, listener: E, options: boolean) {
-    if(typeof window === undefined) {
-        return;
-    }
-
-    watchEffect((onInvalidate) => {
-        element = element ?? window;
-
-        element.addEventListener(type, listener, options);
-        onInvalidate(() => element.removeEventListener(type, listener, options));
-    })
-}
+import { watchEffect } from "vue";
+
+export function useEventListener<T extends EventTarget | HTMLElement, E extends EventListener>(element: T, type: string, listener: E, options: boolean) {
+    if(typeof window === undefined) {
+        return;
+    }
+
+    watchEffect((onInvalidate) => {
+        element = element ?? window;
+
+        element.addEventListener(type, listener, options);
+        onInvalidate(() => element.removeEventListener(type, listener, options));
+    })
+}

package/src/composables/useInput.ts

@@ -1,129 +1,129 @@
-// inspired by indielayer ui
-import type { PropType } from 'vue';
-import { ref, watch, inject, computed, onMounted, onUnmounted } from 'vue';
-import { useCachedUid } 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 } = useCachedUid('input');
-    const name = props.name ? props.name : id.value;
-    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: boolean = 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[] | 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 { useCachedUid } 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 } = useCachedUid('input');
+    const name = props.name ? props.name : id.value;
+    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: boolean = 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[] | undefined>,
+    name: String,
+    readonly: Boolean,
+    required: Boolean,
+    error: String,
+    rules: {
+        type: Array,
+        default: () => [],
+    }
+} as const);

package/src/composables/useInteractive.ts

@@ -1,20 +1,20 @@
-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,
+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/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,
+    }
+}