@ithinkdt/ui 4.0.0-10

package/src/page.d.ts

@@ -0,0 +1,153 @@
+import {
+    CheckboxProps, DatePickerProps, DatePickerSlots,
+    DrawerContentProps, DrawerProps,
+    InputNumberProps, InputNumberSlots, InputProps, InputSlots,
+    ModalOptions,
+    SelectGroupOption, SelectOption, SelectProps, SelectSlots,
+    UploadFileInfo,
+} from 'ithinkdt-ui'
+import { MaybeRef, VNode, VNodeProps } from 'vue'
+
+import { DictItem, DictTypeKey } from '@ithinkdt/common/dict'
+import { PageOptions } from '@ithinkdt/page'
+
+import { CheckboxesProps, RadiosProps, UserDeptProps, UserGroupOption } from './components'
+
+type DeepMaybeRef<T extends {}> = {
+    [Key in (keyof T)]: MaybeRef<T[Key]>
+}
+
+declare module '@ithinkdt/page' {
+    interface FormComponentPresets {
+        input: {
+            props?: DeepMaybeRef<Omit<InputProps, 'value' | 'onUpdate:value' | 'disabled'>> & VNodeProps
+            slots?: InputSlots
+        }
+        number: {
+            props?: DeepMaybeRef<Omit<InputNumberProps, 'value' | 'onUpdate:value' | 'disabled'>> & VNodeProps
+            slots?: InputNumberSlots
+        }
+        select: {
+            props?: DeepMaybeRef<Omit<SelectProps, 'options' | 'value' | 'onUpdate:value' | 'disabled'> & VNodeProps
+            & {
+                dictType?: DictTypeKey | undefined
+                options?: DictItem[] | (SelectOption | SelectGroupOption)[] | undefined
+            }>
+            slots?: SelectSlots
+        }
+
+        checkbox: {
+            props?: DeepMaybeRef<Omit<CheckboxProps, 'checked' | 'onUpdate:checked' | 'disabled'>> & VNodeProps
+            slots?: {
+                default?: (() => VNode[]) | undefined
+                checked?: (() => VNode[]) | undefined
+                unchecked?: (() => VNode[]) | undefined
+            }
+        }
+
+        checkboxes: {
+            props?: DeepMaybeRef<Omit<CheckboxesProps, 'disabled'> & VNodeProps
+            & {
+                dictType?: DictTypeKey | undefined
+                options?: DictItem[] | undefined
+            }>
+            slots?: { }
+        }
+
+        radios: {
+            props?: DeepMaybeRef<Omit<RadiosProps, 'disabled'> & VNodeProps
+            & {
+                dictType?: DictTypeKey | undefined
+                options?: DictItem[] | undefined
+            }>
+            slots?: { }
+        }
+
+        datepicker: {
+            props?: DeepMaybeRef<Omit<DatePickerProps, 'value' | 'onUpdate:value' | 'disabled'>> & VNodeProps
+            slots?: DatePickerSlots
+        }
+
+        file: {
+            props?: DeepMaybeRef<{
+                type?: 'file' | 'image' | undefined
+                multiple?: boolean | undefined
+                max?: number | undefined
+                accept?: string | undefined
+                maxSize?: number | undefined
+            } & VNodeProps>
+            slots?: {
+                default?: (() => VNode[]) | undefined
+            }
+        }
+
+        user: {
+            props?: DeepMaybeRef<Omit<UserDeptProps<boolean>, 'modelValue' | 'onUpdate:modelValue' | 'disabled'
+            | 'users' | 'groups' | 'depts' | 'getUsersByGroup' | 'getUsersByDept'>> & VNodeProps
+            slots?: {}
+        }
+    }
+
+    interface TableTypePresets {
+        number: {
+            /** 保留 n 位小数（保留 0） */
+            fixed?: number | undefined
+            /** 保留 n 位小数（不保留 0） */
+            round?: number | undefined
+            /** 保留 n 位数（不保留 0） */
+            precision?: number | undefined
+            /** 使用数字分隔符 */
+            separator?: boolean | undefined
+            /** 是否为百分数 */
+            percent?: boolean | undefined
+        }
+
+        date: {
+            formatter?: 'yyyy-MM-dd' | 'yyyy/MM/dd' | string & {} | undefined
+        }
+
+        datetime: {
+            formatter?: 'yyyy-MM-dd HH:mm' | 'yyyy-MM-dd HH:mm:ss' | string & {} | undefined
+        }
+
+        dict: {
+            dictType?: DictTypeKey | undefined
+            options?: DictItem[] | (SelectOption | SelectGroupOption)[] | undefined
+            multiple?: boolean | undefined
+            labelField?: string | undefined
+            valueField?: string | undefined
+            statusMap?: Record<string, 'primary' | 'success' | 'warning' | 'danger' | string & {} | undefined> | undefined
+        }
+        email: {}
+        url: {}
+        color: {}
+        file: { multiple?: boolean | undefined }
+        image: { multiple?: boolean | undefined }
+        user: { multiple?: boolean | undefined }
+        dept: { multiple?: boolean | undefined }
+    }
+
+    type ModalOptionsKey = 'type' | keyof import('@ithinkdt/page').ModalOptions
+    interface ModalDrawerOptions extends DeepMaybeRef<Omit<DrawerContentProps, ModalOptionsKey>>, DeepMaybeRef<Omit<DrawerProps, ModalOptionsKey>> { }
+
+    interface ModalDialogOptions extends DeepMaybeRef<Omit<ModalOptions, ModalOptionsKey>> {}
+}
+
+export declare function createPageFormHelper(options?: {
+    getUserGroups?: (() => Promise<UserGroupOption[]>) | undefined
+    getUsersByGroup?: ((code: string) => Promise<{ username: string, nickname: string }[]>) | undefined
+    getUsersByDept?: ((code: string) => Promise<{ username: string, nickname: string }[]>) | undefined
+    getUsersByUsername?: ((usernames: string[]) => Promise<{ username: string, nickname: string }[]>) | undefined
+    getDeptsByCode?: (codes: string[]) => Promise<{ code: string, name: string }[]>
+    uploadFile?: (file: File, options?: {
+        onProgress?: ((percent: number) => void) | undefined
+    }) => Promise<string>
+}): PageOptions['getFormItemRenderer']
+export declare function createPageTableHelper(options?: {
+    getUsersByUsername?: (usernames: string[]) => Promise<{ username: string, nickname: string }[]>
+    getDeptsByCode?: (codes: string[]) => Promise<{ code: string, name: string }[]>
+    getFileInfos?: (fileIds: string[]) => Promise<UploadFileInfo[]>
+    previewFileUrl?: (fileId: string) => string
+}): PageOptions['getCellRenderer']
+export declare function createFormHelper(options?: { }): PageOptions['getFormRenderer']
+export declare function createModalHelper(options?: { }): PageOptions['getModalRenderer']

package/src/use-style.d.ts

@@ -0,0 +1,10 @@
+import _useStyle from 'ithinkdt-ui/es/_mixins/use-style'
+import { Ref } from 'vue'
+
+export { c, cB, cE, cM } from 'ithinkdt-ui/es/_utils/cssr/index'
+
+export declare function useClsPrefix(): Ref<string>
+
+declare function useStyle(...params: Parameters<typeof _useStyle>): Ref<string>
+
+export default useStyle

package/unocss.d.ts

@@ -0,0 +1,5 @@
+import { PresetFactory, PresetUnoTheme } from 'unocss'
+
+declare const ithinkdt: PresetFactory<PresetUnoTheme, {}>
+
+export default ithinkdt

package/unocss.js

@@ -0,0 +1,95 @@
+const ithinkdt = () => {
+    return {
+        name: 'preset-ithinkdt',
+        theme: {
+            colors: {
+                ...Object.fromEntries(
+                    ['primary', 'success', 'warning', 'danger'].map(name => [
+                        name,
+                        {
+                            DEFAULT: `rgb(var(--color-${name}-rgb) / <alpha-value>)`,
+                            ...Object.fromEntries(
+                                ['hover', 'active'].map(level => [
+                                    level,
+                                    `rgb(var(--color-${name}-${level}-rgb) / <alpha-value>)`,
+                                ]),
+                            ),
+                        },
+                    ]),
+                ),
+                text: {
+                    DEFAULT: `rgb(var(--color-text-rgb))`,
+                },
+                base: {
+                    DEFAULT: `rgb(var(--color-base-rgb))`,
+                },
+            },
+            borderRadius: Object.fromEntries(
+                ['tiny', 'small', 'medium', 'large'].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', 'small', 'medium', 'large'].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-small', 'card-medium', 'card-large'] },
+            ],
+            {
+                'ell': 'truncate',
+                'ell-2': 'line-clamp-2',
+                'ell-3': 'line-clamp-3',
+                'flex-x-center': 'flex items-center',
+                'flex-y-center': 'flex justify-center',
+                'flex-center': 'flex justify-center items-center',
+                'page': 'flex flex-col p-5 gap-4',
+                'card': `card-medium`,
+            },
+        ],
+    }
+}
+
+export default ithinkdt