@ithinkdt/ui 4.0.0-38 → 4.0.0-400

package/{src → esm}/page.d.ts

@@ -98,9 +98,9 @@ declare module '@ithinkdt/page' {
         }
 
         user: {
-            uploadProps?: ShallowMaybeRef<Omit<UserDeptProps<boolean>, 'modelValue' | 'onUpdate:modelValue' | 'disabled'
+            userProps?: ShallowMaybeRef<Omit<UserDeptProps<boolean>, 'modelValue' | 'onUpdate:modelValue' | 'disabled'
             | 'users' | 'groups' | 'depts' | 'getUsersByGroup' | 'getUsersByDept'>> & PublicProps
-            uploadSlots?: {}
+            userSlots?: {}
         }
     }
 

package/esm/page.js

@@ -0,0 +1 @@
+export * from '../dist/page.js'

package/esm/use-style.js

@@ -0,0 +1 @@
+export { c, cB, cE, cM, default, useClsPrefix } from '../dist/use-style.js'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ithinkdt/ui",
-  "version": "4.0.0-38",
+  "version": "4.0.0-400",
   "type": "module",
   "license": "MIT",
   "description": "iThinkDT UI",
@@ -10,34 +10,35 @@
     "ui"
   ],
   "files": [
-    "src",
+    "dist",
+    "esm",
     "auto-imports.*",
     "locale.*",
-    "unocss.*"
+    "unocss*"
   ],
-  "main": "./src/index.js",
-  "module": "./src/index.js",
-  "types": "./src/index.d.ts",
+  "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": "./src/directives.d.ts",
-      "default": "./src/directives/index.js"
+      "types": "./esm/directives.d.ts",
+      "default": "./esm/directives.js"
     },
     "./components": {
-      "types": "./src/components.d.ts",
-      "default": "./src/components/index.js"
+      "types": "./esm/components.d.ts",
+      "default": "./esm/components.js"
     },
     "./use-style": {
-      "types": "./src/use-style.d.ts",
-      "default": "./src/use-style.js"
+      "types": "./esm/use-style.d.ts",
+      "default": "./esm/use-style.js"
     },
     "./page": {
-      "types": "./src/page.d.ts",
-      "default": "./src/page.jsx"
+      "types": "./esm/page.d.ts",
+      "default": "./esm/page.js"
     },
     "./package.json": {
       "default": "./package.json"
@@ -47,8 +48,8 @@
       "default": "./auto-imports.js"
     },
     "./unocss": {
-      "types": "./unocss.d.ts",
-      "default": "./unocss.js"
+      "types": "./unocss-preset.d.ts",
+      "default": "./unocss-preset.js"
     }
   },
   "publishConfig": {
@@ -61,9 +62,9 @@
     "date-fns": "^4.1.0",
     "vueuc": "^0.4.65",
     "sortablejs": "^1.15.6",
-    "@types/sortablejs": "^1.15.8",
+    "@types/sortablejs": "^1.15.9",
     "nanoid": "^5.1.6",
-    "@ithinkdt/common": "^4.0.0-34"
+    "@ithinkdt/common": "^4.0.0-400"
   },
   "peerDependencies": {
     "@ithinkdt/page": ">=4.0",
@@ -82,15 +83,17 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue-jsx": "^5.1.1",
-    "ithinkdt-ui": "^1.8.0",
+    "ithinkdt-ui": "^1.8.1",
     "typescript": "~5.9.3",
-    "unocss": ">=66.5.4",
-    "vite": "npm:rolldown-vite@^7.1.19",
-    "vue": "^3.5.22",
+    "unocss": ">=66.5.6",
+    "vite": "npm:rolldown-vite@^7.2.5",
+    "vue": "^3.5.24",
     "vue-router": "^4.6.3",
-    "@ithinkdt/page": "^4.0.0-34"
+    "@ithinkdt/page": "^4.0.0-400"
   },
   "scripts": {
-    "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',
+                '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

package/src/components/Checkboxes.jsx

@@ -1,130 +0,0 @@
-import { NCheckbox, NCheckboxGroup, NFlex } from 'ithinkdt-ui'
-import { computed, defineComponent, ref, watch } from 'vue'
-
-import { useI18n } from '../use-i18n.js'
-
-export const NCheckboxes = /* @__PURE__ */ defineComponent({
-    name: 'Checkboxes',
-    inheritAttrs: false,
-    props: {
-        options: {
-            type: Array,
-            default: () => [],
-        },
-        vertical: {
-            type: Boolean,
-            default: false,
-        },
-        default: {
-            type: [Boolean, String, Object],
-            default: false,
-        },
-        gap: {
-            type: [Number, String, Array],
-            default: undefined,
-        },
-        modelValue: {
-            type: Array,
-            default: undefined,
-        },
-        labelPadding: {
-            type: String,
-            default: undefined,
-        },
-        labelField: {
-            type: String,
-            default: 'label',
-        },
-        valueField: {
-            type: String,
-            default: 'value',
-        },
-        disabledField: {
-            type: String,
-            default: 'disabled',
-        },
-    },
-    emits: {
-        'update:modelValue': () => true,
-        'updateModelValue': () => true,
-    },
-
-    setup(props, { emit, attrs }) {
-        const { t } = useI18n()
-        const defaultLabel = computed(() => {
-            if (!props.default) return ''
-            if (props.default === true) return t('common.all')
-            if (typeof props.default === 'string') return props.default
-            return props.default?.[props.labelField] ?? t('common.all')
-        })
-        const checked = ref([])
-
-        watch(
-            () => props.modelValue,
-            v => (checked.value = v),
-            { immediate: true },
-        )
-
-        const emitValue = (v) => {
-            emit('update:modelValue', v)
-            emit('updateModelValue', v)
-        }
-        const onAll = () => {
-            emitValue(
-                checked.value?.length === props.options.length ? [] : props.options.map(it => it[props.valueField]),
-            )
-        }
-        const indeterminate = computed(() => props.options.length > checked.value?.length && checked.value?.length > 0)
-
-        const style = computed(() => {
-            return {
-                '--n-label-padding': props.labelPadding,
-            }
-        })
-        return () => {
-            const group = (
-                <NCheckboxGroup {...attrs} value={checked.value} onUpdateValue={emitValue}>
-                    <NFlex
-                        size={props.gap ?? (props.vertical ? undefined : 'small')}
-                        vertical={props.vertical}
-                        style={!props.default && props.vertical ? { padding: '6px 0 0' } : {}}
-                    >
-                        {props.options?.map(op => (
-                            <NCheckbox
-                                value={op[props.valueField]}
-                                disabled={op[props.disabledField]}
-                                style={style.value}
-                            >
-                                {op[props.labelField]}
-                            </NCheckbox>
-                        ))}
-                    </NFlex>
-                </NCheckboxGroup>
-            )
-
-            return props.default
-                ? (
-                        <NFlex
-                            size={props.gap ?? (props.vertical ? undefined : 'small')}
-                            vertical={props.vertical}
-                            style={props.vertical ? { padding: '6px 0 0' } : {}}
-                        >
-                            <span>
-                                <NCheckbox
-                                    indeterminate={indeterminate.value}
-                                    checked={checked.value?.length > 0}
-                                    onUpdateChecked={onAll}
-                                    style={style.value}
-                                >
-                                    {defaultLabel.value}
-                                </NCheckbox>
-                            </span>
-                            {group}
-                        </NFlex>
-                    )
-                : (
-                        group
-                    )
-        }
-    },
-})

package/src/components/DataActions.jsx

@@ -1,105 +0,0 @@
-import { NButton, NDropdown } from 'ithinkdt-ui'
-import { computed, defineComponent, ref } from 'vue'
-import { VOverflow, VResizeObserver } from 'vueuc'
-
-import { IMore } from './assets.jsx'
-
-export const DataActions = /* @__PURE__ */ defineComponent({
-    name: 'DataActions',
-    props: {
-        options: {
-            type: Array,
-            default: () => [],
-        },
-    },
-    setup(props) {
-        const ofRef = ref()
-        let isFirstResize = true
-        const onResize = () => {
-            if (isFirstResize) {
-                isFirstResize = false
-            } else {
-                ofRef.value?.sync({
-                    showAllItemsBeforeCalculate: true,
-                })
-            }
-        }
-        const counter = ref()
-        const getCounter = () => {
-            return counter.value
-        }
-        const ellipsisFromIndexRef = ref(-1)
-        const onUpdateCount = (count) => {
-            ellipsisFromIndexRef.value = props.options.length - count
-        }
-        const onUpdateOverflow = (overflow) => {
-            if (!overflow) {
-                ellipsisFromIndexRef.value = -1
-            }
-        }
-        const updateCounter = () => {}
-        const moreOptions = computed(() => {
-            if (ellipsisFromIndexRef.value === -1) return []
-            return props.options.slice(ellipsisFromIndexRef.value).map((act) => {
-                return {
-                    ...act,
-                    key: act.text,
-                }
-            })
-        })
-
-        const renderLabel = (act) => {
-            const color = act.color === 'danger'
-                ? 'error'
-                : ['default', 'tertiary', 'primary', 'info', 'success', 'warning', 'error'].includes(act.color)
-                        ? act.color
-                        : 'primary'
-            return (
-                <NButton type={color} text>
-                    {act.text}
-                </NButton>
-            )
-        }
-
-        const onSelect = (key, act) => {
-            act.onClick?.()
-        }
-
-        return () => {
-            return (
-                <VResizeObserver onResize={onResize}>
-                    <VOverflow
-                        ref={ofRef}
-                        getCounter={getCounter}
-                        onUpdateCount={onUpdateCount}
-                        onUpdateOverflow={onUpdateOverflow}
-                        updateCounter={updateCounter}
-                        style="margin-top: 2px"
-                    >
-                        { {
-                            default: () => props.options.map((act) => {
-                                const color = act.color === 'danger'
-                                    ? 'error'
-                                    : ['default', 'tertiary', 'primary', 'info', 'success', 'warning', 'error'].includes(act.color)
-                                            ? act.color
-                                            : 'primary'
-                                return (
-                                    <NButton quaternary type={color} size="small" onClick={act.onClick}>
-                                        {act.text}
-                                    </NButton>
-                                )
-                            }),
-                            counter: () => (
-                                <span ref={counter} style="position: absolute">
-                                    <NDropdown options={moreOptions.value} renderLabel={renderLabel} onSelect={onSelect}>
-                                        <NButton quaternary size="small"><IMore style="font-size: 14px; color: #888" /></NButton>
-                                    </NDropdown>
-                                </span>
-                            ),
-                        }}
-                    </VOverflow>
-                </VResizeObserver>
-            )
-        }
-    },
-})