@ithinkdt/ui 4.0.0-5

package/README.md

@@ -0,0 +1 @@
+# @ithinkdt/ui

package/auto-imports.d.ts

@@ -0,0 +1,10 @@
+export declare const UI: {
+    from: string
+    imports: (string | { name: string; type: boolean })[]
+}[]
+export default UI
+
+export declare const UIDirectives: {
+    type: 'component' | 'directive'
+    resolve: (name: string) => string | undefined
+}[]

package/auto-imports.js

@@ -0,0 +1,19 @@
+export const UI = [
+    {
+        from: '@ithinkdt/ui',
+        imports: ['vSpin', 'vTooltip'],
+    },
+]
+
+export default UI
+
+export const UIDirectives = [
+    {
+        type: 'directive',
+        resolve(name) {
+            return ['Spin', 'Tooltip'].includes(name)
+                ? { name: `v${name}`, from: '@ithinkdt/ui' }
+                : undefined
+        },
+    },
+]

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@ithinkdt/ui",
+  "version": "4.0.0-5",
+  "type": "module",
+  "license": "MIT",
+  "description": "iThinkDT UI",
+  "keywords": [
+    "vue",
+    "ithinkdt"
+  ],
+  "module": "./src/index.js",
+  "types": "./src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.d.ts",
+      "default": "./src/index.js"
+    },
+    "./package.json": {
+      "default": "./package.json"
+    },
+    "./auto-imports": {
+      "types": "./auto-imports.d.ts",
+      "default": "./auto-imports.js"
+    },
+    "./unocss": {
+      "types": "./unocss.d.ts",
+      "default": "./unocss.js"
+    },
+    "./design": {
+      "types": "./design/index.d.ts",
+      "default": "./design/index.js"
+    }
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "sideEffects": false,
+  "dependencies": {
+    "@unocss/preset-uno": ">=0.62.3",
+    "@vueuse/core": "^11.0.3",
+    "@ithinkdt/common": "^4.0.0-5"
+  },
+  "peerDependencies": {
+    "@ithinkdt/core": ">=4.0",
+    "vue": ">=3.4",
+    "vue-router": ">=4.4",
+    "ithinkdt-ui": ">=1.4"
+  },
+  "devDependencies": {
+    "ithinkdt-ui": "^1.4.5",
+    "typescript": "~5.5.4",
+    "vue": "^3.4.38",
+    "vue-router": "^4.4.3",
+    "@ithinkdt/core": "^4.0.0-5"
+  },
+  "scripts": {
+    "format": "prettier --write \"./{src,tests}/**/*.{js,vue,ts,jsx,tsx}\"",
+    "release": "pnpm publish --no-git-checks"
+  }
+}

package/src/design/index.d.ts

@@ -0,0 +1,53 @@
+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

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

package/src/design/layout.js

@@ -0,0 +1,113 @@
+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

@@ -0,0 +1,37 @@
+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

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

package/src/directives/spin.js

@@ -0,0 +1,175 @@
+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]
+    },
+}

package/src/directives/tooltip.js

@@ -0,0 +1,125 @@
+import { defineComponent, h, shallowRef, ref, reactive, isVNode } from 'vue'
+import { useEventListener } from '@vueuse/core'
+import { NTooltip } from 'ithinkdt-ui'
+import { debounce } from '@ithinkdt/common/fn'
+
+const Tooltip = /* @__PURE__ */ Symbol('tooltip-dir')
+const current = /* @__PURE__ */ shallowRef()
+
+export const TooltipDirectiveProvider = /* @__PURE__ */ defineComponent({
+    name: 'TooltipDirectiveProvider',
+    setup() {
+        const show = ref(false)
+        const tip = shallowRef()
+        const pos = reactive({ x: 0, y: 0 })
+        const placement = ref('top')
+
+        const update = () => {
+            if (!current.value) return
+            const el = current.value
+            const tooltip = el[Tooltip]
+            const _tip = tooltip.tip
+            tip.value =
+                typeof _tip === 'function'
+                    ? _tip
+                    : isVNode(_tip)
+                      ? () => _tip
+                      : () =>
+                            h('span', {
+                                innerHTML: _tip || el.attributes.getNamedItem('title') || el.innerHTML,
+                            })
+
+            if (
+                !tooltip.binding.modifiers.auto ||
+                el.offsetWidth > el.parentElement.clientWidth ||
+                el.offsetHeight > el.parentElement.clientHeight
+            ) {
+                show.value = true
+
+                const rect = el.getBoundingClientRect()
+                placement.value =
+                    Object.keys(tooltip.binding.modifiers).find((m) =>
+                        ['top', 'right', 'left', 'bottom'].find((k) => m.startsWith(k)),
+                    ) ?? 'top'
+                switch (placement.value.split('-')[0]) {
+                    case 'top': {
+                        pos.x = rect.left + rect.width / 2
+                        pos.y = rect.top
+                        break
+                    }
+
+                    case 'right': {
+                        pos.x = rect.left + rect.width
+                        pos.y = rect.top + rect.height / 2
+                        break
+                    }
+
+                    case 'left': {
+                        pos.x = rect.left
+                        pos.y = rect.top + rect.height / 2
+                        break
+                    }
+
+                    case 'bottom': {
+                        pos.x = rect.left + rect.width / 2
+                        pos.y = rect.bottom
+                        break
+                    }
+                }
+            } else if (show.value) {
+                show.value = false
+            }
+        }
+
+        const update180 = debounce(update, 180)
+
+        useEventListener(
+            'mouseover',
+            (ev) => {
+                const el = ev.target
+                const tooltip = el[Tooltip]
+                if (!tooltip) {
+                    if (!current.value?.contains(el)) {
+                        show.value = false
+                        current.value = undefined
+                    }
+                    return
+                }
+                current.value = el
+                update180()
+            },
+            { passive: true, capture: true },
+        )
+
+        return () => {
+            return h(
+                NTooltip,
+                {
+                    trigger: 'manual',
+                    show: !!current.value && show.value,
+                    x: pos.x,
+                    y: pos.y,
+                    placement: placement.value,
+                },
+                tip.value,
+            )
+        }
+    },
+})
+
+const update = (el, binding) => {
+    el[Tooltip] = {
+        binding,
+        tip: binding.value,
+    }
+}
+
+export const vTooltip = {
+    mounted: update,
+    update,
+    beforeUnmount(el) {
+        if (current.value === el) {
+            current.value = undefined
+        }
+    },
+}

package/src/index.d.ts

@@ -0,0 +1,5 @@
+export * from './directives/index.js'
+
+export declare const GlobalCssVar: (props: { namespace?: string | undefined }) => import('vue').VNode
+
+export * from './design/index.js'

package/src/index.js

@@ -0,0 +1,37 @@
+import { computed, defineComponent, Fragment, h } from 'vue'
+import { useStyleTag } from '@vueuse/core'
+import { useApp } from '@ithinkdt/core'
+import { hyphenate } from '@ithinkdt/common/string'
+import { toRGB } from '@ithinkdt/common/color'
+
+export { SpinDirectiveProvider, TooltipDirectiveProvider, vSpin, vTooltip } from './directives/index.js'
+
+export * from './design/index.js'
+
+export const GlobalCssVar = /* @__PURE__ */ defineComponent({
+    name: 'GlobalCssVar',
+    props: {
+        namespace: { type: String, default: undefined },
+    },
+    setup(props) {
+        const app = useApp()
+
+        useStyleTag(
+            computed(
+                () =>
+                    `${props.namespace ? `.${props.namespace}` : ':root'} { ${Object.entries(app.vars)
+                        .flatMap(([name, value]) => {
+                            name = hyphenate(name)
+                            return [`--${name}-rgb: ${toRGB(value).join(' ')};`, `--${name}: rgb(var(--${name}-rgb));`]
+                        })
+                        .join(' ')} }`,
+            ),
+            {
+                id: `${props.namespace ?? 'global'}-vars`,
+                immediate: true,
+            },
+        )
+
+        return () => h(Fragment)
+    },
+})

package/src/use-style.js

@@ -0,0 +1,8 @@
+import _useStyle from 'ithinkdt-ui/es/_mixins/use-style'
+import { useMergedClsPrefix } from 'ithinkdt-ui/es/_mixins/use-config'
+
+export default function useStyle(mountId, style, clsPrefix, styleIsolate) {
+    clsPrefix ??= useMergedClsPrefix()
+    _useStyle(mountId, style, clsPrefix, styleIsolate)
+    return clsPrefix
+}

package/src/utils.js

@@ -0,0 +1,19 @@
+import { h, withDirectives } from 'vue'
+import { NButton, NIcon } from 'ithinkdt-ui'
+import { vTooltip } from '../directives'
+
+export const renderBtn = (Icon, props, tooltip) =>
+    withDirectives(
+        h(
+            NButton,
+            {
+                text: true,
+                ...props,
+            },
+            () =>
+                h(NIcon, {
+                    component: Icon,
+                }),
+        ),
+        [[vTooltip, tooltip]],
+    )

package/tests/index.spec.ts

@@ -0,0 +1,9 @@
+import { describe, test } from 'vitest'
+
+// import core, { useApp, useAuth } from '../src/index'
+
+describe('plugin', () => {
+    test('some test', ({ expect }) => {
+        expect(1).toBe(1)
+    })
+})

package/tests/tsconfig.json

@@ -0,0 +1,9 @@
+{
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+        "baseUrl": ".",
+        "lib": ["ESNext"],
+        "module": "NodeNext",
+        "moduleResolution": "NodeNext"
+    }
+}

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+    "exclude": ["node_modules", "dist"],
+    "compilerOptions": {
+        "baseUrl": ".",
+        "noImplicitOverride": true,
+        "target": "ESNext",
+        "module": "NodeNext",
+        "moduleResolution": "NodeNext",
+        "resolveJsonModule": true,
+        "lib": ["ESNext", "DOM", "DOM.Iterable"],
+        "esModuleInterop": true,
+        "strictNullChecks": true
+    }
+}

package/unocss.d.ts

@@ -0,0 +1,3 @@
+declare const unocssTheme: import('@unocss/preset-uno').Theme
+
+export default unocssTheme

package/unocss.js

@@ -0,0 +1,16 @@
+export default {
+    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>)`,
+                    ]),
+                ),
+            },
+        ]),
+    ),
+}

package/vitest.config.ts

@@ -0,0 +1,7 @@
+import { defineProject } from 'vitest/config'
+
+export default defineProject({
+    test: {
+        include: ['./tests/*.spec.ts'],
+    },
+})