@ithinkdt/ui 4.0.0-6 → 4.0.0-600

package/package.json

@@ -1,19 +1,44 @@
 {
   "name": "@ithinkdt/ui",
-  "version": "4.0.0-6",
+  "version": "4.0.0-600",
   "type": "module",
   "license": "MIT",
   "description": "iThinkDT UI",
   "keywords": [
+    "ithinkdt",
     "vue",
-    "ithinkdt"
+    "ui"
   ],
-  "module": "./src/index.js",
-  "types": "./src/index.d.ts",
+  "files": [
+    "dist",
+    "esm",
+    "auto-imports.*",
+    "locale.*",
+    "unocss*"
+  ],
+  "main": "./esm/index.js",
+  "module": "./esm/index.js",
+  "types": "./esm/index.d.ts",
   "exports": {
     ".": {
-      "types": "./src/index.d.ts",
-      "default": "./src/index.js"
+      "types": "./esm/index.d.ts",
+      "default": "./esm/index.js"
+    },
+    "./directives": {
+      "types": "./esm/directives.d.ts",
+      "default": "./esm/directives.js"
+    },
+    "./components": {
+      "types": "./esm/components.d.ts",
+      "default": "./esm/components.js"
+    },
+    "./use-style": {
+      "types": "./esm/use-style.d.ts",
+      "default": "./esm/use-style.js"
+    },
+    "./page": {
+      "types": "./esm/page.d.ts",
+      "default": "./esm/page.js"
     },
     "./package.json": {
       "default": "./package.json"
@@ -23,12 +48,8 @@
       "default": "./auto-imports.js"
     },
     "./unocss": {
-      "types": "./unocss.d.ts",
-      "default": "./unocss.js"
-    },
-    "./design": {
-      "types": "./design/index.d.ts",
-      "default": "./design/index.js"
+      "types": "./unocss-preset.d.ts",
+      "default": "./unocss-preset.js"
     }
   },
   "publishConfig": {
@@ -37,25 +58,42 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@unocss/preset-uno": ">=0.62.3",
-    "@vueuse/core": "^11.0.3",
-    "@ithinkdt/common": "^4.0.0-6"
+    "@vueuse/core": "^14.1.0",
+    "date-fns": "^4.1.0",
+    "vueuc": "^0.4.65",
+    "sortablejs": "^1.15.6",
+    "@types/sortablejs": "^1.15.9",
+    "nanoid": "^5.1.6",
+    "@ithinkdt/common": "^4.0.0-600"
   },
   "peerDependencies": {
-    "@ithinkdt/core": ">=4.0",
-    "vue": ">=3.4",
-    "vue-router": ">=4.4",
-    "ithinkdt-ui": ">=1.4"
+    "@ithinkdt/page": ">=4.0",
+    "vue": ">=3.5",
+    "vue-router": ">=4.5",
+    "ithinkdt-ui": ">=1.5",
+    "unocss": ">=66"
+  },
+  "peerDependenciesMeta": {
+    "@ithinkdt/page": {
+      "optional": true
+    },
+    "unocss": {
+      "optional": true
+    }
   },
   "devDependencies": {
-    "ithinkdt-ui": "^1.4.5",
-    "typescript": "~5.5.4",
-    "vue": "^3.5.0",
-    "vue-router": "^4.4.3",
-    "@ithinkdt/core": "^4.0.0-6"
+    "@vitejs/plugin-vue-jsx": "^5.1.2",
+    "ithinkdt-ui": "^1.8.1",
+    "typescript": "~5.9.3",
+    "unocss": ">=66.5.10",
+    "vite": "npm:rolldown-vite@7.2.7",
+    "vue": "^3.5.25",
+    "vue-router": "^4.6.3",
+    "@ithinkdt/page": "^4.0.0-600"
   },
   "scripts": {
-    "format": "prettier --write \"./{src,tests}/**/*.{js,vue,ts,jsx,tsx}\"",
-    "release": "pnpm publish --no-git-checks"
+    "dev": "vite build --watch",
+    "build": "vite build",
+    "release": "pnpm run build && pnpm publish --no-git-checks"
   }
 }

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 whitespace-normal',
+                'ell-3': 'line-clamp-3 whitespace-normal',
+                'flex-center': 'flex justify-center items-center',
+                'card': `card-md`,
+            },
+        ],
+        transformers: [transformerDirectives(), transformerVariantGroup()],
+        postprocess: postprocess,
+    }
+    return [
+        wind4(),
+        ithinkdt,
+    ]
+}
+
+export default ithinkdt

package/src/design/index.d.ts

@@ -1,53 +0,0 @@
-declare const AppLayout: (
-    props: import('@ithinkdt/common').PublicProps & {
-        /**
-         * 布局模式
-         * - sider-header_content_footer 左右布局，侧栏占据整个高度
-         * - header_sider-content_footer 上下布局，头部占据所有宽度
-         */
-        layout?: 'sider-header_content_footer' | 'header_sider-content_footer'
-    },
-    context: {
-        slots: {
-            default?: () => import('vue').VNode
-        }
-    },
-) => import('vue').VNode
-
-declare const AppHeader: (
-    props: import('@ithinkdt/common').PublicProps & {},
-    context: {
-        slots: {
-            default?: () => import('vue').VNode
-        }
-    },
-) => import('vue').VNode
-
-declare const AppContent: (
-    props: import('@ithinkdt/common').PublicProps & {},
-    context: {
-        slots: {
-            default?: () => import('vue').VNode
-        }
-    },
-) => import('vue').VNode
-
-declare const AppSider: (
-    props: import('@ithinkdt/common').PublicProps & {},
-    context: {
-        slots: {
-            default?: () => import('vue').VNode
-        }
-    },
-) => import('vue').VNode
-
-declare const AppFooter: (
-    props: import('@ithinkdt/common').PublicProps & {},
-    context: {
-        slots: {
-            default?: () => import('vue').VNode
-        }
-    },
-) => import('vue').VNode
-
-export { AppLayout, AppHeader, AppContent, AppSider, AppFooter }

package/src/design/index.js

@@ -1 +0,0 @@
-export { AppLayout, AppHeader, AppContent, AppSider, AppFooter } from './layout.js'

package/src/design/layout.js

@@ -1,113 +0,0 @@
-import { defineComponent, h } from 'vue'
-import { c, cB, cM } from 'ithinkdt-ui'
-
-import useStyle from '../use-style.js'
-
-const clsPrefix = 'app'
-export const AppLayout = /* @__PURE__ */ defineComponent({
-    name: 'AppLayout',
-    props: {
-        layout: {
-            type: String,
-            default: 'sider-header_content_footer',
-        },
-    },
-    setup(props, { slots }) {
-        useStyle('-layout', style, ref(clsPrefix), false)
-
-        return () => {
-            const { layout } = props
-
-            return h(
-                'div',
-                {
-                    class: {
-                        [`${clsPrefix}-layout`]: true,
-                        [`${clsPrefix}-layout--full-header`]: layout === 'header_sider-content_footer',
-                    },
-                },
-                slots.default?.(),
-            )
-        }
-    },
-})
-
-export const AppHeader = /* @__PURE__ */ defineComponent({
-    name: 'AppHeader',
-    props: {},
-    setup(props, { slots }) {
-        return () => h('div', { class: `${clsPrefix}-header` }, slots.default?.())
-    },
-})
-export const AppSider = /* @__PURE__ */ defineComponent({
-    name: 'AppSider',
-    props: {},
-    setup(props, { slots }) {
-        return () => h('div', { class: `${clsPrefix}-sider` }, slots.default?.())
-    },
-})
-export const AppContent = /* @__PURE__ */ defineComponent({
-    name: 'AppContent',
-    props: {},
-    setup(props, { slots }) {
-        return () => h('div', { class: `${clsPrefix}-content` }, slots.default?.())
-    },
-})
-export const AppFooter = /* @__PURE__ */ defineComponent({
-    name: 'AppFooter',
-    props: {},
-    setup(props, { slots }) {
-        return () => h('div', { class: `${clsPrefix}-footer` }, slots.default?.())
-    },
-})
-
-const style = /* @__PURE__ */ c([
-    cB(
-        'layout',
-        {
-            display: 'grid',
-            gridTemplateAreas: `
-                'sider header'
-                'sider content'
-                'sider footer'
-            `,
-            gridTemplateRows: 'auto 1fr auto',
-            gridTemplateColumns: 'auto 1fr',
-        },
-        [
-            cM('full-header', {
-                gridTemplateAreas: `
-                    'header header'
-                    'sider  content'
-                    'sider  footer'
-                `,
-            }),
-        ],
-    ),
-    cB('header', {
-        gridArea: 'header',
-        height: '52px',
-        boxShadow: '0 1px 4px rgb(0 21 41 / 0.08)',
-    }),
-    cB(
-        'sider',
-        {
-            gridArea: 'sider',
-            width: '210px',
-            boxShadow:
-                '1px 2px 2px -2px rgb(0 0 0 / 0.04), 3px 6px 6px 0 rgb(0 0 0 / 0.03)',
-        },
-        [
-            cM('collapsed', {
-                width: '48px',
-            }),
-        ],
-    ),
-    cB('content', {
-        gridArea: 'content',
-    }),
-    cB('footer', {
-        gridArea: 'footer',
-        lineHeight: '24px',
-    }),
-])

package/src/directives/index.d.ts

@@ -1,37 +0,0 @@
-import { VNode, Directive } from 'vue'
-
-declare const SpinDirectiveProvider: () => VNode
-
-type SpinDirectiveProps = void | undefined | string | boolean
-
-type SpinDirective = Directive<
-    HTMLElement & {
-        readonly dataset: DOMStringMap & {
-            spinTip?: string
-        }
-    },
-    SpinDirectiveProps
->
-
-/**
- * directive 加载效果
- *
- * 将在容器最后 append 元素，如果容器的 position 是 static，将修改为 relative。如出现样式问题请注意排查
- */
-declare const vSpin: SpinDirective
-
-declare const TooltipDirectiveProvider: () => VNode
-
-type TooltipDirectiveOptions = void | undefined | string
-
-type TooltipDirective = Directive<HTMLElement, TooltipDirectiveOptions>
-/**
- * directive 弹出提示
- *
- * 支持的修饰符
- * - auto 当内容溢出来容器时自动展示，否则隐藏
- * - left-end、left、left-start、top-start、top、top-end、right-start、right、right-end、bottom-end、bottom、bottom-start 弹出内容的位置
- */
-declare const vTooltip: TooltipDirective
-
-export { SpinDirectiveProvider, SpinDirective, vSpin, TooltipDirectiveProvider, TooltipDirective, vTooltip }

package/src/directives/index.js

@@ -1,2 +0,0 @@
-export { vTooltip, TooltipDirectiveProvider } from './tooltip.js'
-export { vSpin, SpinDirectiveProvider } from './spin.js'

package/src/directives/spin.js

@@ -1,175 +0,0 @@
-import { defineComponent, ref, nextTick, h, Fragment } from 'vue'
-import { watchDebounced } from '@vueuse/core'
-import { useElementIntersectionRect } from '@ithinkdt/common/composables'
-import { string2dom } from '@ithinkdt/common/dom'
-
-import { c, cB, cE, cM } from 'ithinkdt-ui'
-
-import useStyle from '../use-style.js'
-
-let clsPrefix
-
-const style = /* @__PURE__ */ c([
-    cB('spin-host', [
-        cM('relative', {
-            position: 'relative',
-        }),
-    ]),
-    cB(
-        'spin-directive',
-        {
-            zIndex: '999999',
-            position: 'absolute',
-            color: 'var(--color-primary)',
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            alignItems: 'center',
-            gap: '4px',
-            willChange: 'background-color',
-            backgroundColor: `rgb(255 255 255 / 0)`,
-            transition: 'background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-        },
-        [
-            cE('tip', [c('&:empty', { display: 'none' })]),
-            cE('icon', {
-                willChange: 'opacity',
-                opacity: '0',
-                transition: 'opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-            }),
-            cM(
-                'spining',
-                {
-                    backgroundColor: `rgb(255 255 255 / 0.5)`,
-                },
-                [cE('icon', { opacity: '1' })],
-            ),
-        ],
-    ),
-])
-
-export const SpinDirectiveProvider = /* @__PURE__ */defineComponent({
-    name: 'SpinDirectiveProvider',
-    setup() {
-        clsPrefix = useStyle('-spin-directive', style)
-        return () => h(Fragment)
-    },
-})
-
-const Spin = /* @__PURE__ */ Symbol('spin-dir')
-
-const init = (el, value) => {
-    if (el[Spin]) return
-
-    const loading = ref(!!value)
-
-    const spinEl = string2dom(`<div class="${clsPrefix.value}-spin-directive">
-    <svg class="${clsPrefix.value}-spin-directive__icon" width="32" height="32" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
-        <g>
-            <animateTransform attributeName="transform" type="rotate" values="0 100 100;270 100 100" begin="0s" dur="1.6s" fill="freeze" repeatCount="indefinite"></animateTransform>
-            <circle fill="none" stroke="currentColor" stroke-width="16" stroke-linecap="round" cx="100" cy="100" r="92" stroke-dasharray="567" stroke-dashoffset="1848">
-                <animateTransform attributeName="transform" type="rotate" values="0 100 100;135 100 100;450 100 100" begin="0s" dur="1.6s" fill="freeze" repeatCount="indefinite"></animateTransform>
-                <animate attributeName="stroke-dashoffset" values="567;142;567" begin="0s" dur="1.6s" fill="freeze" repeatCount="indefinite"></animate>
-            </circle>
-        </g>
-    </svg>
-    <div class="${clsPrefix.value}-spin-directive__tip"></div>
-</div>`)
-
-    let rect
-    const { stop: stopEl } = useElementIntersectionRect(el, (_rect) => {
-        rect = _rect
-        Object.assign(spinEl.style, {
-            left: 0,
-            top: 0,
-            width: rect.width + 'px',
-            height: rect.height + 'px',
-        })
-    })
-
-    let timer
-    const stopSpin = watchDebounced(
-        loading,
-        (loading) => {
-            if (loading) {
-                if (timer === undefined) {
-                    clearTimeout(timer)
-                    timer = undefined
-                }
-                el.append(spinEl)
-                requestAnimationFrame(() => {
-                    spinEl.classList.add(`${clsPrefix.value}-spin-directive--spining`)
-                })
-            } else {
-                spinEl.classList.remove(`${clsPrefix.value}-spin-directive--spining`)
-                timer = setTimeout(() => {
-                    spinEl.remove()
-                }, 300)
-            }
-        },
-        { immediate: true, debounce: 30 },
-    )
-
-    el[Spin] = {
-        loading,
-        spinEl,
-        updateTip: () => {
-            const tipEl = spinEl.querySelector(`.${clsPrefix.value}-spin-directive__tip`)
-            tipEl.textContent = el.dataset.spinTip
-        },
-        stop: () => {
-            stopEl()
-            stopSpin()
-        },
-    }
-}
-
-const obs = async (el) => {
-    if (el[Spin].observer) return
-    // 创建 MutationObserver 对象
-    await nextTick()
-    const observer = (el[Spin].observer = new MutationObserver((mutationsList) => {
-        for (const mutation of mutationsList) {
-            if (mutation.type === 'attributes' && mutation.attributeName === 'data-spin-tip') {
-                el[Spin].updateTip()
-                return
-            }
-        }
-    }))
-
-    // 开始观察目标元素
-    observer.observe(el, { attributes: true })
-}
-
-const checkStyle = (el) => {
-    const style = window.getComputedStyle(el)
-    if (style.getPropertyValue('position') === 'static') {
-        el.classList.add(`${clsPrefix.value}-spin-host--relative`)
-    } else {
-        el.classList.remove(`${clsPrefix.value}-spin-host--relative`)
-    }
-}
-
-export const vSpin = {
-    beforeMount(el, { value }) {
-        init(el, value)
-        el.classList.add(`${clsPrefix.value}-spin-host`)
-    },
-
-    mounted(el) {
-        el[Spin].updateTip()
-        checkStyle(el)
-        obs(el)
-    },
-
-    updated(el, { value }) {
-        el[Spin].loading.value = !!value
-    },
-
-    beforeUnmount(el) {
-        el[Spin].loading.value = false
-        el[Spin].stop()
-        el[Spin].observer?.disconnect()
-        delete el[Spin]
-    },
-}