@ithinkdt/ui 4.0.0-19 → 4.0.0-200

package/src/design/Notification.jsx

@@ -1,311 +0,0 @@
-import { format } from 'date-fns'
-import { NBadge, NButton, NDrawer, NDrawerContent, NEmpty, NIcon, NList, NListItem, NPagination, NThing } from 'ithinkdt-ui'
-import { defineComponent, reactive, ref, withDirectives } from 'vue'
-
-import { useAtomicBroadcast } from '@ithinkdt/common/composables'
-
-import { vSpin } from '../directives/spin.js'
-import { vTooltip } from '../directives/tooltip.jsx'
-import { useI18n } from '../use-i18n.js'
-
-export const AppNotification = /* @__PURE__ */ defineComponent({
-    name: 'AppNotification',
-    inheritAttrs: false,
-    props: {
-        getUnreadCount: Function,
-        getPage: Function,
-        markRead: Function,
-        markDelete: Function,
-        interval: { type: Number, default: 30_000 },
-    },
-    setup(props, { slots, attrs }) {
-        const { t } = useI18n()
-
-        const show = ref(false)
-        const currentTab = ref('unread')
-        const data = reactive({
-            page: 1,
-            size: 10,
-            loading: false,
-            records: [],
-            total: 0,
-            unread: 0,
-        })
-
-        const { sync, post } = useAtomicBroadcast({
-            channel: '__ithinkdt_mc_shared_channel',
-            onMsg: (msg) => {
-                data.unread = msg
-            },
-            getMsg: () => {
-                if (show.value) {
-                    data.loading = true
-                    Promise.resolve(props.getPage?.(currentTab.value, data.page, data.size) ?? [])
-                        .then(({ records, total }) => {
-                            data.records = records
-                            if (currentTab.value === 'unread') {
-                                data.unread = total
-                                post(total)
-                            } else {
-                                data.total = total
-                            }
-                        })
-                        .finally(() => {
-                            data.loading = false
-                        })
-                }
-                return props.getUnreadCount?.() ?? 0
-            },
-            timeout: () => props.interval,
-            immediate: true,
-        })
-
-        return () => {
-            const trigger = withDirectives(
-                <NButton
-                    {...attrs}
-                    quaternary
-                    style="--n-padding: 0 12px"
-                    onClick={() => {
-                        show.value = true
-                        currentTab.value = data.unread > 0 ? 'unread' : 'all'
-                        setTimeout(sync, 300)
-                    }}
-                >
-                    {slots.icon
-                        ? (
-                                slots.icon()
-                            )
-                        : (
-                                <NBadge show={data.unread > 0} dot offset={[-2, 5]} processing>
-                                    <NIcon size="18">
-                                        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
-                                            <g
-                                                fill="none"
-                                                stroke="currentColor"
-                                                stroke-linecap="round"
-                                                stroke-linejoin="round"
-                                                stroke-width="1.5"
-                                                color="currentColor"
-                                            >
-                                                <path d="M2.53 14.77c-.213 1.394.738 2.361 1.902 2.843c4.463 1.85 10.673 1.85 15.136 0c1.164-.482 2.115-1.45 1.902-2.843c-.13-.857-.777-1.57-1.256-2.267c-.627-.924-.689-1.931-.69-3.003C19.525 5.358 16.157 2 12 2S4.475 5.358 4.475 9.5c0 1.072-.062 2.08-.69 3.003c-.478.697-1.124 1.41-1.255 2.267" />
-                                                <path d="M8 19c.458 1.725 2.076 3 4 3c1.925 0 3.541-1.275 4-3" />
-                                            </g>
-                                        </svg>
-                                    </NIcon>
-                                </NBadge>
-                            )}
-                </NButton>,
-                [[vTooltip, t('common.notification.tip', { count: data.unread }), undefined, { bottom: true }]],
-            )
-
-            const header = () => (
-                <div style="display: flex; align-items: baseline; gap: 20px">
-                    <div style="padding-right: 12px">{t('common.notification.title') }</div>
-                    <NButton
-                        text
-                        type={currentTab.value === 'all' ? 'primary' : 'default'}
-                        onClick={() => {
-                            currentTab.value = 'all'
-                            sync()
-                        }}
-                    >
-                        {t('common.notification.all') }
-                    </NButton>
-                    <NButton
-                        text
-                        type={currentTab.value === 'unread' ? 'primary' : 'default'}
-                        onClick={() => {
-                            currentTab.value = 'unread'
-                            sync()
-                        }}
-                    >
-                        {t('common.notification.unread', { count: data.unread > 99 ? '99+' : data.unread.toString() }) }
-                    </NButton>
-                </div>
-            )
-
-            const renderItem = msg => (
-                <NListItem
-                    key={msg.key}
-                    onClick={() => {
-                        if (msg.status === 'unread') {
-                            props.markRead?.([msg.key]).then(() => {
-                                msg.status = 'read'
-                            })
-                            data.unread--
-                        }
-                        if (msg.link) {
-                            window.open(msg.link, '_target')
-                        }
-                    }}
-                >
-                    <NThing
-                        bordered={false}
-                        closable
-                        contentIndented
-                        size="small"
-                        onMouseenter={() => (msg.hover = true)}
-                        onMouseleave={() => (msg.hover = false)}
-                        style="padding: 0 4px"
-                    >
-                        {{
-                            'avatar': () => (
-                                <NIcon size={22} color={msg.status === 'unread' ? 'var(--color-primary)' : undefined}>
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        width="1em"
-                                        height="1em"
-                                        viewBox="0 0 24 24"
-                                    >
-                                        <path
-                                            fill="currentColor"
-                                            d="M12.3 7.29c.2-.18.44-.29.7-.29c.27 0 .5.11.71.29c.19.21.29.45.29.71c0 .27-.1.5-.29.71c-.21.19-.44.29-.71.29c-.26 0-.5-.1-.7-.29c-.19-.21-.3-.44-.3-.71c0-.26.11-.5.3-.71m-2.5 4.68s2.17-1.72 2.96-1.79c.74-.06.59.79.52 1.23l-.01.06c-.14.53-.31 1.17-.48 1.78c-.38 1.39-.75 2.75-.66 3c.1.34.72-.09 1.17-.39c.06-.04.11-.08.16-.11c0 0 .08-.08.16.03c.02.03.04.06.06.08c.09.14.14.19.02.27l-.04.02c-.22.15-1.16.81-1.54 1.05c-.41.27-1.98 1.17-1.74-.58c.21-1.23.49-2.29.71-3.12c.41-1.5.59-2.18-.33-1.59c-.37.22-.59.36-.72.45c-.11.08-.12.08-.19-.05l-.03-.06l-.05-.08c-.07-.1-.07-.11.03-.2M22 12c0 5.5-4.5 10-10 10S2 17.5 2 12S6.5 2 12 2s10 4.5 10 10m-2 0c0-4.42-3.58-8-8-8s-8 3.58-8 8s3.58 8 8 8s8-3.58 8-8"
-                                        />
-                                    </svg>
-                                </NIcon>
-                            ),
-                            'header': () => msg.title,
-                            'header-extra': () =>
-                                msg.hover
-                                    ? (
-                                            <div
-                                                style="display: flex; justify-content: end; gap: 12px"
-                                                onClick={(e) => {
-                                                    e.preventDefault()
-                                                    e.stopPropagation()
-                                                }}
-                                            >
-                                                {msg.status === 'unread'
-                                                    ? (
-                                                            <NButton
-                                                                text
-                                                                type="primary"
-                                                                onClick={() => {
-                                                                    props.markRead?.([msg.key]).then(() => {
-                                                                        msg.status = 'read'
-                                                                        data.unread--
-                                                                    })
-                                                                }}
-                                                            >
-                                                                {t('common.notification.markRead') }
-                                                            </NButton>
-                                                        )
-                                                    : undefined}
-
-                                                <NButton
-                                                    text
-                                                    type="error"
-                                                    onClick={() => {
-                                                        if (data.records === 1) {
-                                                            data.records = []
-                                                            sync()
-                                                        } else {
-                                                            data.records.splice(
-                                                                data.records.findIndex(it => it.key == msg.key),
-                                                                1,
-                                                            )
-                                                        }
-                                                        props.markDelete?.([msg.key])
-                                                    }}
-                                                >
-                                                    {t('common.notification.markDelete') }
-                                                </NButton>
-                                            </div>
-                                        )
-                                    : undefined,
-                            'default': msg.content,
-                            'footer': () => (
-                                <span style="color: gray">
-                                    {msg.hover ? format(msg.date, t('common.notification.time')) : t('common.timeago', { time: msg.date }) }
-                                </span>
-                            ),
-                        }}
-                    </NThing>
-                </NListItem>
-            )
-
-            const content = () =>
-                withDirectives(
-                    data.records.length > 0
-                        ? (
-                                <NList clickable hoverable style="min-height: 50vh">
-                                    {data.records.map(msg => renderItem(msg))}
-                                </NList>
-                            )
-                        : (
-                                <NEmpty style="margin-top: 30vh" />
-                            ),
-                    [[vSpin, data.loading]],
-                )
-
-            const footer = () => (
-                <div style="display: flex; justify-content: space-between; width: 100%">
-                    {currentTab.value === 'unread'
-                        ? (
-                                <NButton
-                                    text
-                                    type="primary"
-                                    disabled={data.records.length === 0}
-                                    onClick={() => {
-                                        const keys = data.records.filter(it => it.status === 'unread').map(it => it.key)
-                                        props.markRead(keys).then(() => {
-                                            while (data.unread - keys.length <= data.size * (data.page - 1)) {
-                                                data.page--
-                                            }
-                                            sync()
-                                        })
-                                    }}
-                                >
-                                    {{
-                                        icon: () => (
-                                            <NIcon size="20">
-                                                <svg
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                    width="1em"
-                                                    height="1em"
-                                                    viewBox="0 0 24 24"
-                                                >
-                                                    <path
-                                                        fill="currentColor"
-                                                        d="M.41 13.41L6 19l1.41-1.42L1.83 12m20.41-6.42L11.66 16.17L7.5 12l-1.43 1.41L11.66 19l12-12M18 7l-1.41-1.42l-6.35 6.35l1.42 1.41z"
-                                                    />
-                                                </svg>
-                                            </NIcon>
-                                        ),
-                                        default: () => t('common.notification.markPageRead'),
-                                    }}
-                                </NButton>
-                            )
-                        : (
-                                <span />
-                            )}
-                    <NPagination
-                        simple
-                        pageSize={data.size}
-                        page={data.page}
-                        itemCount={currentTab.value === 'unread' ? data.unread : data.total}
-                        onUpdatePage={(page) => {
-                            data.page = page
-                            sync()
-                        }}
-                    />
-                </div>
-            )
-            return (
-                <>
-                    {trigger}
-                    <NDrawer v-model:show={show.value} showMask={false} width={400}>
-                        <NDrawerContent title={t('common.notification.title')} closable nativeScrollbar={false} bodyContentStyle={{ padding: '0' }}>
-                            {{
-                                header,
-                                default: content,
-                                footer,
-                            }}
-                        </NDrawerContent>
-                    </NDrawer>
-                </>
-            )
-        }
-    },
-})

package/src/design/common.jsx

@@ -1,21 +0,0 @@
-import { inject } from 'vue'
-
-export const clsPrefix = 'app'
-
-export const COLLAPSED_INJECTION_KEY = 'APP_SIDER_COLLAPSED'
-
-export const IBookmark = () => (
-    <svg
-        xmlns="http://www.w3.org/2000/svg"
-        xmlns:xlink="http://www.w3.org/1999/xlink"
-        role="img"
-        width="1em"
-        height="1em"
-        viewBox="0 0 24 24"
-    >
-        <path fill="currentColor" d="m17 18l-5-2.18L7 18V5h10m0-2H7a2 2 0 0 0-2 2v16l7-3l7 3V5a2 2 0 0 0-2-2Z" />
-    </svg>
-)
-
-export const CTX_INJECTION_KEY = '__APP_CTX__'
-export const getCtx = () => inject(CTX_INJECTION_KEY)

package/src/design/index.js

@@ -1,10 +0,0 @@
-export { AppContent, AppFooter, AppHeader, AppLayout, AppSider } from './Layout.jsx'
-export { AppLogo } from './Logo.jsx'
-export { AppMenu } from './Menu.jsx'
-export { AppBreadcrumb } from './Breadcrumb.jsx'
-export { AppAccount } from './Account.jsx'
-export { AppFullscreen } from './Fullscreen.jsx'
-export { AppAppearance } from './Appearance.jsx'
-export { AppLanguage } from './Language.jsx'
-export { AppNotification } from './Notification.jsx'
-export { AppMultiTabs } from './MultiTabs.jsx'

package/src/directives/index.js

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

package/src/directives/spin.js

@@ -1,181 +0,0 @@
-import { Fragment, defineComponent, h, nextTick, ref, toRef, watch } from 'vue'
-
-import { useElementIntersectionRect } from '@ithinkdt/common/composables'
-import { string2dom } from '@ithinkdt/common/dom'
-import { debounce } from '@ithinkdt/common/fn'
-
-import useStyle, { c, cB, cE, cM } from '../use-style.js'
-
-let clsPrefix
-let isDark
-
-const style = /* @__PURE__ */ c([
-    c(({ props }) => `:where(${props.bPrefix}spin-host)`, {
-        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(var(--host-bg, 255 255 255) / 0)',
-            transition: 'background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-        },
-        [
-            cE('tip, icon', {
-                willChange: 'opacity',
-                opacity: '0',
-                transition: 'opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-            }),
-            cE('tip:empty', { display: 'none' }),
-            cM(
-                'spining',
-                {
-                    backgroundColor: 'rgb(var(--host-bg, 255 255 255) / 0.5)',
-                },
-                [cE('tip, icon', { opacity: '1' })],
-            ),
-        ],
-    ),
-])
-
-export const SpinDirectiveProvider = /* @__PURE__ */ defineComponent({
-    name: 'SpinDirectiveProvider',
-    props: {
-        dark: Boolean,
-    },
-    setup(props) {
-        clsPrefix = useStyle('-spin-directive', style)
-        isDark = toRef(props, 'dark')
-        return () => h(Fragment)
-    },
-})
-
-const Spin = /* @__PURE__ */ Symbol('spin-dir')
-
-const updateLoading = (el, { value, modifiers }) => {
-    el[Spin].loading.value = !!value
-    if (!el[Spin].loading.value) return
-    const dark = modifiers.dark || (!modifiers.light && isDark.value)
-    el[Spin].spinEl.style.setProperty(
-        '--host-bg',
-        dark ? '0 0 0' : '255 255 255',
-    )
-}
-
-export const vSpin = {
-    beforeMount(el) {
-        el.classList.add(`${clsPrefix.value}-spin-host`)
-
-        if (el[Spin]) return
-
-        const loading = ref(false)
-
-        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="18" 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>
-        `.trim(),
-        )
-
-        let rect
-        const { stop: stopEl, update } = useElementIntersectionRect(el, (_rect) => {
-            rect = _rect
-            Object.assign(spinEl.style, {
-                left: 0,
-                top: 0,
-                width: rect.width + 'px',
-                height: rect.height + 'px',
-            })
-        }, { interval: 1000 / 30 })
-
-        let timer
-        const stopSpin = watch(
-            loading,
-            debounce(() => {
-                if (loading.value) {
-                    if (timer === undefined) {
-                        clearTimeout(timer)
-                        timer = undefined
-                    }
-                    update()
-                    el.append(spinEl)
-                    requestAnimationFrame(() => {
-                        if (loading.value) spinEl.classList.add(`${clsPrefix.value}-spin-directive--spining`)
-                    })
-                } else {
-                    spinEl.classList.remove(`${clsPrefix.value}-spin-directive--spining`)
-                    const listener = () => {
-                        spinEl.remove()
-                        if (timer) clearTimeout(timer)
-                        timer = null
-                        spinEl.removeEventListener('transitioncancel', listener)
-                        spinEl.removeEventListener('transitionend', listener)
-                    }
-                    spinEl.addEventListener('transitioncancel', listener)
-                    spinEl.addEventListener('transitionend', listener)
-                    let timer = setTimeout(listener, 300)
-                }
-            }, 30),
-        )
-
-        el[Spin] = {
-            loading,
-            spinEl,
-            updateTip: () => {
-                const tipEl = spinEl.querySelector(`.${clsPrefix.value}-spin-directive__tip`)
-                tipEl.textContent = el.dataset.spinTip
-            },
-            stop: () => {
-                stopEl()
-                stopSpin()
-            },
-        }
-    },
-
-    mounted(el, binding) {
-        updateLoading(el, binding)
-        el[Spin].updateTip()
-        if (el[Spin].observer) return
-        // 创建 MutationObserver 对象
-        nextTick().then(() => {
-            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, attributeFilter: ['data-spin-tip'] })
-        })
-    },
-
-    updated: updateLoading,
-
-    beforeUnmount(el) {
-        el[Spin].loading.value = false
-        el[Spin].stop()
-        el[Spin].observer?.disconnect()
-        delete el[Spin]
-    },
-}

package/src/directives/tooltip.jsx

@@ -1,121 +0,0 @@
-import { promiseTimeout, useEventListener } from '@vueuse/core'
-import { NTooltip } from 'ithinkdt-ui'
-import { defineComponent, reactive, shallowRef } from 'vue'
-
-const Tooltip = /* @__PURE__ */ Symbol('tooltip-dir')
-const current = /* @__PURE__ */ shallowRef()
-
-let _update
-export const TooltipDirectiveProvider = /* @__PURE__ */ defineComponent({
-    name: 'TooltipDirectiveProvider',
-    props: {
-        delay: { type: Number, default: 180 },
-    },
-    setup(props) {
-        const tip = shallowRef()
-        const data = reactive({ show: false, tip: undefined, placement: 'top', x: 0, y: 0 })
-
-        _update = async () => {
-            if (!current.value) return
-            if (props.delay > 0) await promiseTimeout(props.delay)
-            const el = current.value
-            const tooltip = el?.[Tooltip]
-            if (!tooltip) return
-            const _tip = tooltip.tip
-            tip.value
-                = typeof _tip === 'function' ? _tip : () => _tip || el.attributes.getNamedItem('title') || el.textContent
-
-            const { auto } = tooltip.binding.modifiers
-            if (
-                !auto
-                || el.firstChild.offsetWidth > el.clientWidth
-                || el.firstChild.offsetHeight > el.clientHeight
-            ) {
-                data.show = true
-
-                const rect = el.getBoundingClientRect()
-                data.placement
-                    = Object.keys(tooltip.binding.modifiers).find(m =>
-                        ['top', 'right', 'left', 'bottom'].find(k => m.startsWith(k)),
-                    ) ?? 'top'
-                switch (data.placement.split('-')[0]) {
-                    case 'top': {
-                        data.x = rect.left + rect.width / 2
-                        data.y = rect.top
-                        break
-                    }
-
-                    case 'right': {
-                        data.x = rect.left + rect.width
-                        data.y = rect.top + rect.height / 2
-                        break
-                    }
-
-                    case 'left': {
-                        data.x = rect.left
-                        data.y = rect.top + rect.height / 2
-                        break
-                    }
-
-                    case 'bottom': {
-                        data.x = rect.left + rect.width / 2
-                        data.y = rect.bottom
-                        break
-                    }
-                }
-            } else if (data.show) {
-                data.show = false
-            }
-        }
-
-        useEventListener(
-            'mouseover',
-            (ev) => {
-                const el = ev.target
-                if (!current.value || current.value?.contains(el)) return
-                data.show = false
-                current.value = undefined
-            },
-            { capture: true },
-        )
-
-        return () => (
-            <NTooltip
-                trigger="manual"
-                show={!!current.value && data.show}
-                x={data.x}
-                y={data.y}
-                placement={data.placement}
-                keepAliveOnHover
-            >
-                {tip.value?.()}
-            </NTooltip>
-        )
-    },
-})
-
-const _listener = (ev) => {
-    current.value = ev.target
-    _update?.()
-}
-export const vTooltip = {
-    mounted(el, binding) {
-        el[Tooltip] = {
-            binding,
-            tip: binding.value,
-        }
-        el.addEventListener('mouseenter', _listener)
-    },
-    updated(el, binding) {
-        el[Tooltip].binding = binding
-        el[Tooltip].tip = binding.value
-        _update()
-    },
-    beforeUnmount(el) {
-        if (el[Tooltip]) el.removeEventListener('mouseenter', _listener)
-        if (current.value === el) {
-            current.value = undefined
-        }
-        delete el[Tooltip]
-    },
-}

package/src/index.js

@@ -1,18 +0,0 @@
-import { defineComponent, provide, toRef } from 'vue'
-
-import { UI_I18N_INJECTION } from './use-i18n.js'
-
-export { SpinDirectiveProvider, TooltipDirectiveProvider, vSpin, vTooltip } from './directives/index.js'
-export * from './design/index.js'
-
-export const UIProvider = /* @__PURE__ */ defineComponent({
-    name: 'UIProvider',
-    props: {
-        i18n: Function,
-    },
-    setup(props, { slots }) {
-        provide(UI_I18N_INJECTION, toRef(props, 'i18n'))
-
-        return () => slots.default()
-    },
-})