@ithinkdt/ui 4.0.0-100 → 4.0.0-101

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ithinkdt/ui",
-  "version": "4.0.0-100",
+  "version": "4.0.0-101",
   "type": "module",
   "license": "MIT",
   "description": "iThinkDT UI",
@@ -14,7 +14,7 @@
     "esm",
     "auto-imports.*",
     "locale.*",
-    "unocss.*"
+    "unocss*"
   ],
   "main": "./esm/index.js",
   "module": "./esm/index.js",

package/unocss-preset.d.ts

@@ -0,0 +1,5 @@
+import { Preset, PresetWind4Theme } from 'unocss'
+
+declare const ithinkdt: (options?: { namespace?: string | undefined }) => Preset<PresetWind4Theme>[]
+
+export default ithinkdt

package/unocss-preset.js

@@ -0,0 +1,163 @@
+import { presetWind4, transformerDirectives, transformerVariantGroup } from 'unocss'
+
+const ithinkdt = (options = {}) => {
+    const { namespace: ns } = options
+
+    let wind4, postprocess
+    if (ns) {
+        wind4 = () => {
+            const plugin = presetWind4({
+                variablePrefix: `${ns}-`,
+                preflights: {
+                    reset: false,
+                    property: {
+                        selector: `.${ns} :where(*, ::before, ::after)`,
+                    },
+                },
+            })
+
+            return {
+                ...plugin,
+                preflights: plugin.preflights?.map((preflight) => {
+                    if (preflight.layer === 'theme') {
+                        return {
+                            ...preflight,
+                            async getCSS(ctx) {
+                                let result = await preflight.getCSS?.(ctx)
+                                if (result) {
+                                    result = result.replace(':root, :host', `.${ns}`)
+                                }
+                                return result
+                            },
+                        }
+                    } else if (preflight.layer === 'properties') {
+                        return {
+                            ...preflight,
+                            async getCSS(ctx) {
+                                let result = await preflight.getCSS?.(ctx)
+                                if (result) {
+                                    result = result
+                                        .replaceAll('--un-', `--${ns}-`)
+                                }
+                                return result
+                            },
+                        }
+                    }
+                    return preflight
+                }),
+            }
+        }
+        postprocess = [
+            (p) => {
+                if (p.selector.includes('--un-')) {
+                    p.selector = p.selector.replaceAll('--un-', `--${ns}-`)
+                } else if (p.selector.endsWith(String.raw`.\-`)) {
+                    if (p.selector.startsWith('.dark ')) {
+                        p.selector = `.dark & ${p.selector.slice(6)}`
+                    }
+                } else {
+                    p.selector = p.selector.startsWith('.dark ') ? `.dark .${ns} ${p.selector.slice(6)}` : `.${ns} ${p.selector}`
+                }
+            },
+        ]
+    } else { wind4 = presetWind4 }
+
+    const alphas = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
+    const ithinkdt = {
+        name: 'preset-ithinkdt',
+        options,
+        theme: {
+            colors: {
+                ...Object.fromEntries(
+                    ['primary', 'success', 'warning', 'danger'].map(name => [
+                        name,
+                        {
+                            DEFAULT: `var(--color-${name})`,
+                            ...Object.fromEntries(alphas.map(alpha => [`${alpha}`, `color-mix(in oklab, var(--color-${name}) ${alpha / 10}%, #fff ${(1000 - alpha) / 10}%)`])),
+                            ...Object.fromEntries(
+                                ['hover', 'active'].flatMap(level => [
+                                    [level, `var(--color-${name}-${level})`],
+                                    ...alphas.map(alpha => [`${level}-${alpha}`, `color-mix(in oklab, var(--color-${name}-${level}) ${alpha / 10}%, #fff ${(1000 - alpha) / 10}%)`]),
+                                ]),
+                            ),
+                        },
+                    ]),
+                ),
+                text: {
+                    DEFAULT: `var(--color-text)`,
+                    ...Object.fromEntries(alphas.map(alpha => [`${alpha}`, `color-mix(in oklab, var(--color-text) ${alpha / 10}%, #fff ${(1000 - alpha) / 10}%)`])),
+                },
+                base: { DEFAULT: `var(--color-base)` },
+            },
+            radius: Object.fromEntries(
+                ['xs', 'sm', 'md', 'lg'].map(size => [size, `var(--rounded-${size})`]),
+            ),
+        },
+        variants: [
+            // stuck:
+            (matcher) => {
+                const array = ['top', 'right', 'bottom', 'left']
+                const index = array.findIndex(it => matcher.startsWith(`stuck-${it}:`))
+                if (index === -1)
+                    return matcher
+                return {
+                    matcher: matcher.slice(7 + array[index].length),
+                    handle: (input, next) => next({
+                        ...input,
+                        parent: `${input.parent ? `${input.parent} $$ ` : ''} @container scroll-state(stuck: ${array[index]})`,
+                    }),
+                }
+            },
+        ],
+        rules: [
+            ['scroll-state', { 'container-type': 'scroll-state' }],
+            [
+                /^bg-img-(.*)$/,
+                ([_, r]) => {
+                    return {
+                        'background-image': r[0] === '[' && r.at(-1) === ']' ? r.slice(1, -1) : r,
+                    }
+                },
+            ],
+            [
+                /^mask-(.*)$/,
+                ([_, r]) => {
+                    const mask = `var(--un-icon) no-repeat`
+                    return {
+                        '--un-icon': r[0] === '[' && r.at(-1) === ']' ? r.slice(1, -1) : r,
+                        mask,
+                        'mask-size': '100% 100%',
+                    }
+                },
+            ],
+        ],
+        shortcuts: [
+            [
+                /^card-(.*)$/,
+                ([_, size]) => {
+                    const i = ['none', 'sm', 'md', 'lg'].indexOf(size)
+                    if (i === -1) return
+                    const p = [0, 2, 4, 5][i]
+                    return `rounded-${size} px-${p + 1} py-${p} bg-white dark:bg-dark ease-in-out transition-shadow 
+                       hover:shadow-[0_1px_2px_0_rgba(0_0_0_/_0.03),0_1px_6px_-1px_rgba(0_0_0_/_0.02),0_2px_4px_0_rgba(0_0_0_/_0.02)]`
+                },
+                { autocomplete: ['card-none', 'card-sm', 'card-md', 'card-lg'] },
+            ],
+            {
+                'ell': 'truncate',
+                'ell-2': 'line-clamp-2',
+                'ell-3': 'line-clamp-3',
+                'flex-center': 'flex justify-center items-center',
+                'card': `card-md`,
+            },
+        ],
+        transformers: [transformerDirectives(), transformerVariantGroup()],
+        postprocess: postprocess,
+    }
+    return [
+        wind4(),
+        ithinkdt,
+    ]
+}
+
+export default ithinkdt