feat: use css

docs/.vitepress/theme/CodePreview.vue

@@ -25,7 +25,7 @@ defineExpose({ dark, showCode })
       :class="{
         dark: dark,
       }"
-      class="relative mt-4 overflow-hidden rounded-xl border dark:border-slate-500/50"
+      class="not-prose relative mt-4 overflow-hidden rounded-xl border dark:border-slate-500/50"
     >
       <div class="bg-slate-50 transition-colors dark:bg-slate-800">
         <div class="flex justify-end gap-2 border-b bg-slate-100 p-2 dark:border-slate-500/50 dark:bg-slate-700/50">

src/components/Button/style.ts

@@ -51,7 +51,7 @@ const createBtnCls = classed('t-button', {
       true: '!px-0 w-[--t-btn-h]',
     },
     variant: {
-      default: `shadow-sm border`,
+      default: `shadow-sm border py-1`,
       filled: `shadow-sm border`,
       light: `shadow-sm border`,
       link: `border decoration-2 underline-offset-2`,
@@ -121,12 +121,12 @@ const getBtnCssVars = (variant: ButtonVariants['variant'], color: ColorKey, prim
 export function useStyle(variant: MaybeRefOrGetter<ButtonProps>) {
   const { colors, getColorKey } = useTheme()
   const variantRef = computed(() => {
-    const orginVariant = { ...toValue(variant) }
+    const originVariant = { ...toValue(variant) }
     const _variant: ButtonVariants = {
-      ...orginVariant,
-      color: orginVariant.color || 'gray',
-      ring: orginVariant.variant === 'link' ? false : orginVariant.ring,
-      variant: orginVariant.variant || (orginVariant.color ? 'filled' : 'default'),
+      ...originVariant,
+      color: originVariant.color || 'gray',
+      ring: originVariant.variant === 'link' ? false : originVariant.ring,
+      variant: originVariant.variant || (originVariant.color ? 'filled' : 'default'),
     }
     return _variant
   })

src/components/ConfigProvider/index.ts

@@ -1,17 +1,19 @@
 import {
+  computed,
+  defineComponent,
   type ExtractPropTypes,
   type ExtractPublicPropTypes,
   type PropType,
-  type SlotsType,
-  type VNode,
-  computed,
-  defineComponent,
   provide,
   reactive,
   ref,
   renderSlot,
+  type SlotsType,
+  type VNode,
 } from 'vue'
+
 import { type Theme } from '@/theme'
+
 import { type Config, configProviderKey, useConfig } from './useConfig'
 
 export { useConfig }

src/components/List/index.tsx → src/components/List/ItemList.tsx

@@ -14,29 +14,28 @@ import { type OptionItem, type OptionValue, toMultipleVal } from '@/utils/option
 
 const props = {
   value: [String, Number, Array] as PropType<OptionValue | Array<OptionValue>>,
-  options: {
+  items: {
     type: Array as PropType<OptionItem[]>,
     default: () => [],
   },
   // 多选
   multiple: Boolean,
 }
 
-export type ListProps = ExtractPropTypes<typeof props>
+export type ItemListProps = ExtractPropTypes<typeof props>
 
-export type ListPublicProps = ExtractPublicPropTypes<typeof props>
+export type ItemListPublicProps = ExtractPublicPropTypes<typeof props>
 
-export type ListCssVars = {
-  '--t-list-accent-color': string
-  '--t-list-ring-color': string
+export type ItemListCssVars = {
+  '--t-itemList-accent-color': string
 }
 
-export const List = defineComponent({
-  name: 'TList',
+export const ItemList = defineComponent({
+  name: 'TItemList',
   props,
   emits: {
-    'update:value': (val: Required<ListProps>['value']) => true,
-    change: (val: Required<ListProps>['value']) => true,
+    'update:value': (val: Required<ItemListProps>['value']) => true,
+    change: (val: Required<ItemListProps>['value']) => true,
   },
   slots: Object as SlotsType<{
     item: (props: { item: OptionItem; selected: boolean }) => VNode[]
@@ -53,9 +52,8 @@ export const List = defineComponent({
       props.multiple ? [] : undefined
     )
 
-    const cssVars = computed<ListCssVars>(() => ({
-      '--t-list-accent-color': colors.value.primary[500],
-      '--t-list-ring-color': colors.value.primary[500],
+    const cssVars = computed<ItemListCssVars>(() => ({
+      '--t-itemList-accent-color': colors.value.primary[500],
     }))
 
     const itemClickHandler = (item: OptionItem) => {
@@ -84,8 +82,8 @@ export const List = defineComponent({
         class="w-full overflow-auto rounded-md bg-white py-1 text-sm shadow-md ring-1 ring-black ring-opacity-5 focus:outline-none "
         tabindex="-1"
       >
-        {props.options.length > 0 ? (
-          props.options.map(item =>
+        {props.items.length > 0 ? (
+          props.items.map(item =>
             slots.item ? (
               slots.item({ item, selected: isSelected(item) })
             ) : (
@@ -95,8 +93,8 @@ export const List = defineComponent({
                   item.disabled
                     ? 'font-normal text-gray-400'
                     : isSelected(item)
-                    ? 'cursor-pointer font-semibold hover:text-white hover:bg-[--t-list-accent-color]'
-                    : 'cursor-pointer font-normal text-gray-700 hover:text-white hover:bg-[--t-list-accent-color]',
+                    ? 'cursor-pointer font-semibold hover:text-white hover:bg-[--t-itemList-accent-color]'
+                    : 'cursor-pointer font-normal text-gray-700 hover:text-white hover:bg-[--t-itemList-accent-color]',
                 ]}
                 onClick={() => itemClickHandler(item)}
               >

src/components/Select/index.tsx

@@ -17,7 +17,7 @@ import { useTheme } from '@/theme'
 import { type OptionItem, type OptionValue, toMultipleVal } from '@/utils/option'
 
 import { SelectorIcon } from '../Icon'
-import { List } from '../List'
+import { ItemList } from '../List/ItemList'
 import { Popper } from '../Popper'
 
 const props = {
@@ -87,7 +87,12 @@ export const Select = defineComponent({
             </button>
           ),
           content: () => (
-            <List value={val.value} onUpdate:value={setVal} onChange={changeHandler} options={props.options}></List>
+            <ItemList
+              value={val.value}
+              onUpdate:value={setVal}
+              onChange={changeHandler}
+              items={props.options}
+            ></ItemList>
           ),
         }}
       </Popper>

src/theme/index.ts

@@ -1,8 +1,10 @@
 import { computed, inject, ref } from 'vue'
 
 import { useConfig } from '@/components/ConfigProvider'
-import { type AliasColorMap, COLORS, type Color, type ColorAlias, type ColorKey, type ColorMap } from './colors'
-export { type SizeType, type SpaceType, getSpace } from './space'
+
+import { type AliasColorMap, type Color, type ColorAlias, type ColorKey, type ColorMap, COLORS } from './colors'
+
+export { getSpace, type SizeType, type SpaceType } from './space'
 export type { Color, ColorKey, ColorMap }
 
 export { COLORS }

src/types.ts

@@ -0,0 +1,3 @@
+export type Fn = (...args: any[]) => any
+
+export type Flat<T> = T extends Fn ? T : T extends object ? { [K in keyof T]: T[K] } : T

src/utils/style.ts

@@ -0,0 +1,20 @@
+import { computed, type MaybeRefOrGetter, toValue } from 'vue'
+
+import type { Flat } from '@/types'
+
+type CssVars<N extends string, T extends Record<string, string> = {}> = {
+  [K in keyof T as `--${N}-${string & K}`]: T[K]
+}
+
+export function createCssVar<N extends string, T extends Record<string, string>>(name: N, cssVars: T) {
+  const result = Object.entries(cssVars).reduce((acc, [key, value]) => {
+    // @ts-ignore
+    acc[`--${name}-${key}`] = value
+    return acc
+  }, {} as Flat<CssVars<N, T>>)
+  return result
+}
+
+export function useCssVar<N extends string, T extends Record<string, string>>(name: N, getter: MaybeRefOrGetter<T>) {
+  return computed(() => createCssVar(name, toValue(getter)))
+}

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "extends": "@jaskang/config/tsconfig.web.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue","docs/.vitepress/config.ts", "docs/.vitepress/theme/**/*"],
+  "include": ["env.d.ts", "src/**/*", "docs/.vitepress/config.ts", "docs/.vitepress/theme/**/*"],
   "compilerOptions": { 
     "outDir": "dist_types",
     "composite": true,