@teammodlr/ui-kit 2.1.49 → 2.1.51

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/examples/cards/cards.stories.ts

@@ -1,9 +1,9 @@
-import Sidebar from './sidebar.vue';
-import { createStory } from '../../__storybook__';
-
-export default {
-    component: Sidebar,
-    title: 'Examples/Cards/Sidebar'
-};
-
-export const Basic = createStory(Sidebar);
+import Sidebar from './sidebar.vue';
+import { createStory } from '../../__storybook__';
+
+export default {
+    component: Sidebar,
+    title: 'Examples/Cards/Sidebar'
+};
+
+export const Basic = createStory(Sidebar);

package/src/examples/modal/modal.stories.ts

@@ -1,9 +1,9 @@
-import Modal from './modal.vue';
-import { createStory } from '../../__storybook__';
-
-export default {
-    component: Modal,
-    title: 'Examples/Modals'
-};
-
-export const Basic = createStory(Modal);
+import Modal from './modal.vue';
+import { createStory } from '../../__storybook__';
+
+export default {
+    component: Modal,
+    title: 'Examples/Modals'
+};
+
+export const Basic = createStory(Modal);

package/src/types/props.ts

@@ -1,21 +1,21 @@
-export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-export type Color =
-    | 'white'
-    | 'black'
-    | 'blue'
-    | 'green'
-    | 'red'
-    | 'yellow'
-    | 'gray';
-
-export type Variant =
-    | 'default'
-    | 'tertiary'
-    | 'primary'
-    | 'dark'
-    | 'success'
-    | 'warning'
-    | 'error';
-
-export type MaybeArray<T> = T | T[];
+export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export type Color =
+    | 'white'
+    | 'black'
+    | 'blue'
+    | 'green'
+    | 'red'
+    | 'yellow'
+    | 'gray';
+
+export type Variant =
+    | 'default'
+    | 'tertiary'
+    | 'primary'
+    | 'dark'
+    | 'success'
+    | 'warning'
+    | 'error';
+
+export type MaybeArray<T> = T | T[];

package/src/utils/call.ts

@@ -1,34 +1,34 @@
-type AnyFunction = (...args: any[]) => any
-
-function call(funcs: MaybeArray<() => void>): void
-function call<A1>(funcs: MaybeArray<(a1: A1) => void>, a1: A1): void
-function call<A1, A2>(
-    funcs: MaybeArray<(a1: A1, a2: A2) => void>,
-    a1: A1,
-    a2: A2
-): void
-function call<A1, A2, A3>(
-    funcs: MaybeArray<(a1: A1, a2: A2, a3: A3) => void>,
-    a1: A1,
-    a2: A2,
-    a3: A3
-): void
-function call<A1, A2, A3, A4>(
-    funcs: MaybeArray<(a1: A1, a2: A2, a3: A3, a4: A4) => void>,
-    a1: A1,
-    a2: A2,
-    a3: A3,
-    a4: A4
-): void
-function call<A extends any[]>(
-    funcs: AnyFunction[] | AnyFunction,
-    ...args: A
-): void {
-    if (Array.isArray(funcs)) {
-        funcs.forEach((func) => (call as any)(func, ...args))
-    } else return funcs(...args)
-}
-
-export { call }
-
-export type MaybeArray<T> = T | T[]
+type AnyFunction = (...args: any[]) => any
+
+function call(funcs: MaybeArray<() => void>): void
+function call<A1>(funcs: MaybeArray<(a1: A1) => void>, a1: A1): void
+function call<A1, A2>(
+    funcs: MaybeArray<(a1: A1, a2: A2) => void>,
+    a1: A1,
+    a2: A2
+): void
+function call<A1, A2, A3>(
+    funcs: MaybeArray<(a1: A1, a2: A2, a3: A3) => void>,
+    a1: A1,
+    a2: A2,
+    a3: A3
+): void
+function call<A1, A2, A3, A4>(
+    funcs: MaybeArray<(a1: A1, a2: A2, a3: A3, a4: A4) => void>,
+    a1: A1,
+    a2: A2,
+    a3: A3,
+    a4: A4
+): void
+function call<A extends any[]>(
+    funcs: AnyFunction[] | AnyFunction,
+    ...args: A
+): void {
+    if (Array.isArray(funcs)) {
+        funcs.forEach((func) => (call as any)(func, ...args))
+    } else return funcs(...args)
+}
+
+export { call }
+
+export type MaybeArray<T> = T | T[]

package/src/utils/injection.ts

@@ -1,45 +1,45 @@
-import { type InjectionKey, inject, provide } from 'vue';
-
-export function createInjectionKey<T>(key: string): InjectionKey<T> {
-    return key as any;
-}
-
-export function createContext<ContextValue>(
-    providerComponentName: string | string[],
-    contextName?: string,
-) {
-    const symbolDescription
-        = typeof providerComponentName === 'string' && !contextName
-            ? `${providerComponentName}Context`
-            : contextName
-
-    const injectionKey: InjectionKey<ContextValue | null> = Symbol(symbolDescription)
-    const injectContext = <
-        T extends ContextValue | null | undefined = ContextValue,
-    >(
-        fallback?: T,
-    ): T extends null ? ContextValue | null : ContextValue => {
-        const context = inject(injectionKey, fallback)
-        if (context)
-            return context
-
-        if (context === null)
-            return context as any
-
-        throw new Error(
-            `Injection \`${injectionKey.toString()}\` not found. Component must be used within ${Array.isArray(providerComponentName)
-                ? `one of the following components: ${providerComponentName.join(
-                    ', ',
-                )}`
-                : `\`${providerComponentName}\``
-            }`,
-        )
-    }
-
-    const provideContext = (contextValue: ContextValue) => {
-        provide(injectionKey, contextValue)
-        return contextValue
-    }
-
-    return [injectContext, provideContext] as const
-}
+import { type InjectionKey, inject, provide } from 'vue';
+
+export function createInjectionKey<T>(key: string): InjectionKey<T> {
+    return key as any;
+}
+
+export function createContext<ContextValue>(
+    providerComponentName: string | string[],
+    contextName?: string,
+) {
+    const symbolDescription
+        = typeof providerComponentName === 'string' && !contextName
+            ? `${providerComponentName}Context`
+            : contextName
+
+    const injectionKey: InjectionKey<ContextValue | null> = Symbol(symbolDescription)
+    const injectContext = <
+        T extends ContextValue | null | undefined = ContextValue,
+    >(
+        fallback?: T,
+    ): T extends null ? ContextValue | null : ContextValue => {
+        const context = inject(injectionKey, fallback)
+        if (context)
+            return context
+
+        if (context === null)
+            return context as any
+
+        throw new Error(
+            `Injection \`${injectionKey.toString()}\` not found. Component must be used within ${Array.isArray(providerComponentName)
+                ? `one of the following components: ${providerComponentName.join(
+                    ', ',
+                )}`
+                : `\`${providerComponentName}\``
+            }`,
+        )
+    }
+
+    const provideContext = (contextValue: ContextValue) => {
+        provide(injectionKey, contextValue)
+        return contextValue
+    }
+
+    return [injectContext, provideContext] as const
+}

package/src/components/tab/Tab.css

@@ -1,113 +0,0 @@
-.m-tab-group {
-    --tabs-gap: 14px;
-    --tabs-background: transparent;
-    --tabs-border-radius: 0;
-    --tabs-padding: 0;
-    --tabs-border: 1px solid var(--gray-200);
-
-    --tab-background: var(transparent);
-    --tab-color: var(--gray-600);
-    --tab-font-size: 15px;
-    --tab-padding: 12px 8px;
-    --tab-border-radius: 0px;
-    --tab-font-weight: 500;
-    --tab-box-shadow: none;
-}
-
-.m-tab-group__tabs {
-    background: var(--tabs-background);
-    border-radius: var(--tabs-border-radius);
-    position: relative;
-    border-bottom: var(--tabs-border);
-    display: flex;
-    min-width: 100%;
-    width: fit-content;
-    list-style: none;
-    padding: var(--tabs-padding);
-    margin: 0;
-    gap: var(--tabs-gap);
-}
-
-.m-tab-group__tabs .m-tab {
-
-}
-
-.m-tab-group__tabs .m-tab .m-tabs__button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: var(--tab-font-size);
-    font-weight: var(--tab-font-weight);
-    color: var(--tab-color);
-    background-color: var(--tab-background);
-    padding: var(--tab-padding);
-    border-radius: var(--tab-border-radius);
-    box-shadow: var(--tab-box-shadow);
-    cursor: pointer;
-    transition: all 0.2s ease-in-out; 
-    border: none;  
-}
-
-.m-tab-group__tabs .m-tab:not(.m-tab--disabled) .m-tabs__button:hover {
-    --tab-background: var(transparent);
-    --tab-color: var(--blue);
-}
-
-.m-tab-group__tabs .m-tab.m-tab--active .m-tabs__button {
-    --tab-background: var(--white);
-    --tab-color: var(--blue);
-    --tab-box-shadow: inset 0px -2px 0px var(--blue);
-}
-
-.m-tab-group__tabs .m-tab.m-tab--disabled .m-tabs__button {
-    --tab-color: var(--gray-400);
-    cursor: not-allowed;
-}
-
-.m-tab-group.m-tab-group--xs {
-    --tabs-background: transparent;
-    --tabs-border-radius: 0;
-    --tabs-padding: 0;
-    --tabs-gap: 8px;
-
-    --tab-font-size: 12px;
-    --tab-padding: 10px 6px;
-}
-
-.m-tab-group.m-tab-group--sm {
-    --tabs-background: transparent;
-    --tabs-border-radius: 0;
-    --tabs-padding: 0;
-    --tabs-gap: 10px;
-    
-    --tab-font-size: 13px;
-    --tab-padding: 13px 6px;
-}
-
-.m-tab-group.m-tab-group--lg {
-    --tabs-background: transparent;
-    --tabs-border-radius: 0;
-    --tabs-padding: 0;
-
-    --tab-font-size: 16px;
-    --tab-padding: 20px 12px;
-}
-
-.m-tab-group.m-tab-group--xl {
-    --tabs-background: transparent;
-    --tabs-border-radius: 0;
-    --tabs-padding: 0;
-
-    --tab-font-size: 18px;
-    --tab-padding: 24px 16px;
-}
-
-.m-tab-group.m-tab-group--vertical {
-    flex-direction: column;
-}
-
-.m-tab-group.m-tab-group--vertical .m-tab-group__tabs {
-    flex-direction: column;
-    gap: 0;
-    width: 200px;
-}