@otwb/ui 2.0.0

package/esm/directives.d.ts

@@ -0,0 +1,42 @@
+import { Directive, VNode, VNodeChild } from 'vue'
+
+export declare const SpinDirectiveProvider: (props: { dark?: boolean }) => VNode
+
+/**
+ * directive 加载效果
+ *
+ * 支持 dom dataset 参数 'data-spin-tip'
+ *
+ * 将在容器最后 append 元素，如果容器的 position 是 static，将修改为 relative。如出现样式问题请注意排查
+ *
+ * 支持的修饰符
+ * - 'light' | 'dark' | 'auto' 暗色｜亮色｜自动模式
+ */
+export declare const vSpin: Directive<HTMLElement, void | undefined | string | boolean | number, 'light' | 'dark'>
+
+export declare const TooltipDirectiveProvider: (props: { delay?: number }) => VNode
+
+/**
+ * directive 弹出提示
+ *
+ * 支持的修饰符
+ * - 'auto' 当内容溢出来容器时自动展示，否则隐藏
+ * - 'left-end'、'left'、'left-start'、'top-start'、'top'、'top-end'、'right-start'、'right'、'right-end'、'bottom-end'、'bottom'、'bottom-start' 弹出内容的位置
+ */
+export declare const vTooltip: Directive<
+    HTMLElement,
+    VNodeChild,
+    | 'auto'
+    | 'left-end'
+    | 'left'
+    | 'left-start'
+    | 'top-start'
+    | 'top'
+    | 'top-end'
+    | 'right-start'
+    | 'right'
+    | 'right-end'
+    | 'bottom-end'
+    | 'bottom'
+    | 'bottom-start'
+>

package/esm/directives.js

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

package/esm/index.d.ts

@@ -0,0 +1,19 @@
+import { VNode } from 'vue'
+
+import { I18nComposable, ParseMessage } from '@otwb/common/i18n'
+
+import { UILocale } from '../locale.js'
+
+import '../shims.js'
+
+export * from './directives.js'
+export * from './design.js'
+
+export { UILocale }
+
+/** Props for {@link UIProvider} */
+export interface UIProviderProps {
+    i18n?: I18nComposable<ParseMessage<UILocale, 'common'>>
+}
+
+export declare const UIProvider: (props: UIProviderProps) => VNode

package/esm/index.js

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

package/esm/page.d.ts

@@ -0,0 +1,170 @@
+import {
+    CheckboxProps,
+    DatePickerProps, DatePickerSlots,
+    DrawerContentProps, DrawerProps,
+    InputNumberProps, InputNumberSlots, InputProps, InputSlots,
+    ModalOptions,
+    SelectGroupOption, SelectOption, SelectProps, SelectSlots,
+    UploadFileInfo, UploadProps,
+} from 'ithinkdt-ui'
+import { MaybeRef, VNode } from 'vue'
+
+import { PublicProps } from '@otwb/common'
+import { DictItem, DictTypeKey } from '@otwb/common/dict'
+import { PageOptions } from '@otwb/page'
+
+import { CheckboxesProps, RadiosProps, UserDeptProps, UserGroupOption } from './components'
+
+type ShallowMaybeRef<T extends {}> = {
+    [Key in (keyof T)]: MaybeRef<T[Key]>
+}
+
+declare module '@otwb/page' {
+    interface FormComponentPresets {
+        input: {
+            inputProps?: ShallowMaybeRef<Omit<InputProps, 'value' | 'onUpdate:value' | 'disabled'>> & PublicProps
+            inputSlots?: InputSlots
+        }
+        number: {
+            numberProps?: ShallowMaybeRef<Omit<InputNumberProps, 'value' | 'onUpdate:value' | 'disabled'>> & PublicProps
+            numberSlots?: InputNumberSlots
+        }
+        select: {
+            selectProps?: ShallowMaybeRef<Omit<SelectProps, 'options' | 'value' | 'onUpdate:value' | 'disabled'> & PublicProps
+            & {
+                dictType?: DictTypeKey | undefined
+                options?: DictItem[] | (SelectOption | SelectGroupOption)[] | undefined
+            }>
+            selectSlots?: SelectSlots
+        }
+
+        checkbox: {
+            checkboxProps?: ShallowMaybeRef<Omit<CheckboxProps, 'checked' | 'onUpdate:checked' | 'disabled'>> & PublicProps
+            checkboxSlots?: {
+                default?: (() => VNode[]) | undefined
+                checked?: (() => VNode[]) | undefined
+                unchecked?: (() => VNode[]) | undefined
+            }
+        }
+
+        checkboxes: {
+            checkboxesProps?: ShallowMaybeRef<Omit<CheckboxesProps, 'disabled'> & PublicProps
+            & {
+                dictType?: DictTypeKey | undefined
+                options?: DictItem[] | undefined
+            }>
+            checkboxesSlots?: { }
+        }
+
+        radios: {
+            radiosProps?: ShallowMaybeRef<Omit<RadiosProps, 'disabled'> & PublicProps
+            & {
+                dictType?: DictTypeKey | undefined
+                options?: DictItem[] | undefined
+            }>
+            radiosSlots?: { }
+        }
+
+        datepicker: {
+            datepickerProps?: ShallowMaybeRef<Omit<DatePickerProps, 'value' | 'onUpdate:value' | 'disabled'>> & PublicProps
+            datepickerSlots?: DatePickerSlots
+        }
+
+        file: {
+            fileProps?: ShallowMaybeRef<{
+                type?: 'file' | 'image' | undefined
+                multiple?: boolean | undefined
+                max?: number | undefined
+                accept?: string | undefined
+                maxSize?: number | undefined
+                onBeforeUpload?: UploadProps['onBeforeUpload']
+            } & PublicProps>
+            fileSlots?: {
+                default?: (() => VNode[]) | undefined
+            }
+        }
+        upload: {
+            uploadProps?: ShallowMaybeRef<{
+                type?: 'file' | 'image' | undefined
+                multiple?: boolean | undefined
+                max?: number | undefined
+                accept?: string | undefined
+                maxSize?: number | undefined
+                onBeforeUpload?: UploadProps['onBeforeUpload']
+            } & PublicProps>
+            uploadSlots?: {
+                default?: (() => VNode[]) | undefined
+            }
+        }
+
+        user: {
+            userProps?: ShallowMaybeRef<Omit<UserDeptProps<boolean>, 'modelValue' | 'onUpdate:modelValue' | 'disabled'
+            | 'users' | 'groups' | 'depts' | 'getUsersByGroup' | 'getUsersByDept'>> & PublicProps
+            userSlots?: {}
+        }
+    }
+
+    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('@otwb/page').ModalOptions
+    interface ModalDrawerOptions extends ShallowMaybeRef<Omit<DrawerContentProps, ModalOptionsKey>>, ShallowMaybeRef<Omit<DrawerProps, ModalOptionsKey>> { }
+
+    interface ModalDialogOptions extends ShallowMaybeRef<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>
+    getFileInfos?: (files: string[]) => Promise<UploadFileInfo[]>
+}): 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/esm/page.js

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

package/esm/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/esm/use-style.js

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

package/locale.d.ts

@@ -0,0 +1,78 @@
+export interface UILocale {
+    all: string
+    back: string
+    layout: {
+        sider: {
+            collapse: string
+            expand: string
+        }
+        screen: {
+            full: string
+            exitfull: string
+        }
+        mode: {
+            auto: string
+            light: string
+            dark: string
+        }
+        tabs: {
+            exitFullTab: string
+            fullTab: string
+            reloadTab: string
+            openTabBlank: string
+            closeAllTabs: string
+            closeLeftTabs: string
+            closeRightTabs: string
+            closeOtherTabs: string
+        }
+    }
+    account: {
+        logout: string
+        changePwd: string
+        changeTenant: string
+    }
+    notification: {
+        tip: (params: { count?: number | null }) => string
+        title: string
+        all: string
+        unread: (params: { count: string }) => string
+        markPageRead: string
+        markRead: string
+        markDelete: string
+        time: string
+    }
+    timeago: (params: { time: string | number | Date }) => string
+    page: {
+        selection: {
+            countText: (params: { count: number }) => string
+            back: string
+            view: string
+            clear: string
+        }
+        pagination: {
+            prefix: (params: { total: number }) => string
+            suffix: string
+        }
+        custom: {
+            tooltip: string
+            reset: string
+        }
+        form: {
+            submitText: string
+            resetText: string
+            cancelText: string
+            selectFileText: string
+            validate: {
+                fileErrorMessage: string
+            }
+        }
+        filter: {
+            submitText: string
+            expand: string
+            collapse: string
+        }
+    }
+}
+
+declare const locale: UILocale
+export default locale

package/package.json

@@ -0,0 +1,99 @@
+{
+  "name": "@otwb/ui",
+  "version": "2.0.0",
+  "type": "module",
+  "license": "MIT",
+  "description": "otwb UI",
+  "keywords": [
+    "otwb",
+    "vue",
+    "ui"
+  ],
+  "files": [
+    "dist",
+    "esm",
+    "auto-imports.*",
+    "locale.*",
+    "unocss*"
+  ],
+  "main": "./esm/index.js",
+  "module": "./esm/index.js",
+  "types": "./esm/index.d.ts",
+  "exports": {
+    ".": {
+      "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"
+    },
+    "./auto-imports": {
+      "types": "./auto-imports.d.ts",
+      "default": "./auto-imports.js"
+    },
+    "./unocss": {
+      "types": "./unocss-preset.d.ts",
+      "default": "./unocss-preset.js"
+    }
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "sideEffects": false,
+  "dependencies": {
+    "@vueuse/core": "^14.0.0",
+    "date-fns": "^4.1.0",
+    "vueuc": "^0.4.65",
+    "sortablejs": "^1.15.6",
+    "@types/sortablejs": "^1.15.9",
+    "nanoid": "^5.1.6",
+    "@otwb/common": "^2.0.0"
+  },
+  "peerDependencies": {
+    "@otwb/page": ">=4.0",
+    "vue": ">=3.5",
+    "vue-router": ">=4.5",
+    "ithinkdt-ui": ">=1.5",
+    "unocss": ">=66"
+  },
+  "peerDependenciesMeta": {
+    "@otwb/page": {
+      "optional": true
+    },
+    "unocss": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue-jsx": "^5.1.1",
+    "ithinkdt-ui": "^1.8.0",
+    "typescript": "~5.9.3",
+    "unocss": ">=66.5.4",
+    "vite": "npm:rolldown-vite@^7.1.20",
+    "vue": "^3.5.22",
+    "vue-router": "^4.6.3",
+    "@otwb/page": "^5.0.0-10"
+  },
+  "scripts": {
+    "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 { PresetFactory, PresetUnoTheme } from 'unocss'
+
+declare const ithinkdt: PresetFactory<PresetUnoTheme, {}>
+
+export default ithinkdt

package/unocss-preset.js

@@ -0,0 +1,94 @@
+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',
+                'card': `card-medium`,
+            },
+        ],
+    }
+}
+
+export default ithinkdt