first commit

composables/useBounce.ts

@@ -0,0 +1,10 @@
+export const useBounce = (): Function => {
+    let bounce: NodeJS.Timeout;
+
+    return function (callback: Function, timeout: number = 400) {
+        clearTimeout(bounce);
+        bounce = setTimeout(() => {
+            callback();
+        }, timeout);
+    };
+};

composables/useMergeClasses.ts

@@ -0,0 +1,3 @@
+import { twMerge } from 'tailwind-merge';
+
+export const useMergeClasses = (componentClasses: string | string[]): string => twMerge(...componentClasses);

composables/useRipple.ts

@@ -0,0 +1,20 @@
+export const useRipple = (e: Event, isRipple: boolean): void => {
+    if (isRipple) {
+        const initElelemnt = e.currentTarget as HTMLElement;
+        initElelemnt.style.position = 'relative';
+        const rippleElement = document.createElement('span');
+        rippleElement.style.backgroundColor = 'rgba(255, 255, 255, 0.3)';
+        rippleElement.style.width = '100%';
+        rippleElement.style.height = '100%';
+        rippleElement.style.position = 'absolute';
+        rippleElement.style.left = '0';
+        rippleElement.style.top = '0';
+        rippleElement.style.transform = 'scaleX(0)';
+
+        initElelemnt.appendChild(rippleElement);
+
+        rippleElement.animate([{ transform: 'scaleX(1)', opacity: 0 }], { duration: 500 }).addEventListener('finish', () => {
+            initElelemnt.removeChild(rippleElement);
+        });
+    }
+};

composables/useTailwindConf.ts

@@ -0,0 +1,28 @@
+import resolveConfig from 'tailwindcss/resolveConfig';
+import tailwindConfig from '../tailwind.config';
+import type { DefaultTheme } from 'tailwindcss/types/generated/default-theme';
+import type { DefaultColors } from 'tailwindcss/types/generated/colors';
+import type { Config, ResolvableTo, ThemeConfig } from 'tailwindcss/types/config';
+export const useTailwindConf = (): ResolvedConfig<Config> => resolveConfig(tailwindConfig);
+
+export type ResolvedConfig<T extends Config> = Omit<T, 'theme'> & {
+    theme: MergeThemes<UnwrapResolvables<Omit<T['theme'], 'extend'>>, T['theme'] extends { extend: infer TExtend } ? UnwrapResolvables<TExtend> : {}>;
+};
+
+type MergeThemes<Overrides extends object, Extensions extends object> = {
+    [K in keyof ThemeConfigResolved | keyof Overrides]: (K extends keyof Overrides
+        ? Overrides[K]
+        : K extends keyof DefaultThemeFull
+          ? DefaultThemeFull[K]
+          : K extends keyof ThemeConfigResolved
+            ? ThemeConfigResolved[K]
+            : never) &
+        (K extends keyof Extensions ? Extensions[K] : {});
+};
+
+type UnwrapResolvables<T> = {
+    [K in keyof T]: T[K] extends ResolvableTo<infer R> ? R : T[K];
+};
+
+type ThemeConfigResolved = UnwrapResolvables<ThemeConfig>;
+type DefaultThemeFull = DefaultTheme & { colors: DefaultColors };