feat: button

JasKang · Oct 13, 2023 · b21ad35 · b21ad35
1 parent 1c1d2af
commit b21ad35
Show file tree

Hide file tree

Showing 7 changed files with 9 additions and 150 deletions.
diff --git a/src/_utils/style.ts b/src/_utils/style.ts
diff --git a/src/_utils/tw.ts b/src/_utils/tw.ts
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -1,6 +1,6 @@
 import { useMemo } from 'react'
 
-import type { Color } from '../../_utils/colors'
+import type { Color } from '@/utils/colors'
 import { LoadingIcon } from '../Icon/LoadingIcon'
 import { style } from './style'
 
@@ -42,7 +42,7 @@ export function Button(props: ButtonProps) {
     <button className={css} style={vars} type="button" disabled={disabled}>
       {(icon || loading) && (
         <i className="h-[1em] w-[1em] scale-125 [&_+_span]:ml-1.5 [&_svg]:h-full [&_svg]:w-full">
-          {loading ? <LoadingIcon class="animate-spin" /> : icon}
+          {loading ? <LoadingIcon className="animate-spin" /> : icon}
         </i>
       )}
       {children && <span className="inline-flex items-center">{children}</span>}

diff --git a/src/components/Icon/LoadingIcon.tsx b/src/components/Icon/LoadingIcon.tsx
@@ -1,7 +1,7 @@
 
 
-export const LoadingIcon = ()=>{
-    return () => (
+export function LoadingIcon (){
+  return (
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
         <circle
           opacity="0.25"
@@ -10,12 +10,12 @@ export const LoadingIcon = ()=>{
           r="10"
           stroke="currentColor"
           stroke-width="4"
-        ></circle>
+        />
         <path
           opacity="0.75"
           fill="currentColor"
           d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-        ></path>
+        />
       </svg>
     )
 }
diff --git a/src/_utils/colors.ts → src/utils/colors.ts b/src/_utils/colors.ts → src/utils/colors.ts
diff --git a/src/utils/style.ts b/src/utils/style.ts
@@ -1,6 +1,6 @@
-import { type Flat, isFunction } from 'kotl'
+import { type Flat } from 'kotl'
 
-import { type ColorVar } from '@/theme/colors'
+import { type ColorVar } from './colors'
 
 export type StyleVars<N extends string, T extends string> = {
   [k in `--${N}-${T}`]: string
@@ -15,7 +15,7 @@ export function createStyleVar<N extends string, T extends CssVars>(name: N) {
     const result = Object.entries(cssVars).reduce(
       (acc, [key, value]) => {
         const colorVal = cvar(value)
-        // @ts-ignore
+        // @ts-expect-error
         acc[`--${name}-${key}`] = colorVal || value
         return acc
       },
@@ -25,23 +25,6 @@ export function createStyleVar<N extends string, T extends CssVars>(name: N) {
   }
 }
 
-export function useColorVars<N extends string, T extends { [key: string]: ColorVar }>(
-  name: N,
-  getter: MaybeRefOrGetter<T>
-) {
-  return computed(() =>
-    Object.entries(toValue(getter)).reduce(
-      (acc, [key, val]) => {
-        const colorVal = cvar(val)
-        // @ts-ignore
-        acc[`--${name}-${key}`] = colorVal || value
-        return acc
-      },
-      {} as Record<string, string>
-    )
-  )
-}
-
 export function createColorVars(name: string, getter: Record<string, ColorVar>) {
   return Object.entries(getter).reduce(
     (acc, [key, val]) => {

diff --git a/src/utils/tw.ts b/src/utils/tw.ts
@@ -38,7 +38,6 @@ export function tw<T extends VariantsObject>(
         clsValue[1].split(' ').forEach(c => {
           const index = cls.indexOf(c.trim())
           if (index !== -1) {
-            console.log('remove', c)
             cls.splice(index, 1)
           }
         })