feat(color): provide param of boolean type

Author: leedom92

packages/tailwindcss-color-preset/README.md

@@ -14,22 +14,32 @@ pnpm add -D tailwindcss @leedomjs/tailwindcss-color-preset
 
 ### Config `tailwind.config.js`
 
+> [!NOTE]
+> **You could provide different param:**
+> 
+> 1.Object that contains some fields `element`, `naive`, `vant`.
+> 
+> If your project depends on `element-ui`, `element-plus`, `naive-ui`, `vant-ui`, the color will be enable automatically. Setting to false will disable the color, otherwise will enabled.
+>
+> 2.Boolean
+>
+> If true, all options are enabled, otherwise disabled.
+>
+> 3.Empty
+>
+> Auto-detected based on deps
+
 ```js
 const color = require('@leedomjs/tailwindcss-color-preset')
 
-/**
- * There is an object param that contains some fields `element`, `naive`, `vant`.
- * 
- * These params default to dependencies that your project uses.
- * If your project depends on `element-ui`, `element-plus`, `naive-ui`, `vant-ui`, 
- * the color will be enable automatically.
- * Setting to false will disable the color, otherwise will enabled.
- * 
- */
-
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   presets: [
+    /**
+     * color()
+     * color(true)
+     * color(false)
+     */
     color({
       element: true,
       naive: true,

packages/tailwindcss-color-preset/src/colors/types.ts

@@ -12,3 +12,5 @@ export interface ColorOption {
   naive?: boolean
   vant?: boolean
 }
+
+export type Option = ColorOption | boolean

packages/tailwindcss-color-preset/src/index.ts

@@ -6,30 +6,32 @@ import {
   VanBackground,
   VanColors,
 } from './colors'
-import type { ColorOption } from './colors/types'
+import type { Option } from './colors/types'
 
 const ELEMENT: boolean = isPackageExists('element-ui') || isPackageExists('element-plus')
 const NAIVE: boolean = isPackageExists('naive-ui')
 const VANT: boolean = isPackageExists('vant')
 
-export default (opt: ColorOption = {
-  element: ELEMENT,
-  naive: NAIVE,
-  vant: VANT,
-}): Config => ({
-  content: [],
-  theme: {
-    extend: {
-      colors: {
-        ...(opt.element ?? ELEMENT ? ElColors : {}),
-        ...(opt.naive ?? NAIVE ? NaiveColors : {}),
-        ...(opt.vant ?? VANT ? VanColors : {}),
-      },
-      backgroundImage: {
-        ...(opt.vant ?? VANT ? VanBackground : {}),
+export default (opt?: Option): Config => {
+  const colors = typeof opt === 'boolean' ? (opt ? { ...ElColors, ...NaiveColors, ...VanColors } : {}) : {
+    ...(opt?.element ?? ELEMENT ? ElColors : {}),
+    ...(opt?.naive ?? NAIVE ? NaiveColors : {}),
+    ...(opt?.vant ?? VANT ? VanColors : {}),
+  }
+
+  const backgroundImage = typeof opt === 'boolean' ? (opt ? { ...VanBackground } : {}) : {
+    ...(opt?.vant ?? VANT ? VanBackground : {}),
+  }
+
+  return {
+    content: [],
+    theme: {
+      extend: {
+        colors,
+        backgroundImage,
       },
     },
-  },
-})
+  }
+}
 
 export type * from './colors/types'