@ithinkdt/ui 4.0.0-5 → 4.0.0-51

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]
-    },
-}

package/src/directives/tooltip.js

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

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

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

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

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

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

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

package/tsconfig.json

@@ -1,14 +0,0 @@
-{
-    "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/vitest.config.ts

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