@ithinkdt/ui 4.0.0-37 → 4.0.0-40

package/src/design/MultiTabs.jsx

@@ -1,501 +0,0 @@
-import { promiseTimeout, useElementHover, useElementSize, useEventListener, watchDebounced } from '@vueuse/core'
-import { NButton, NDropdown, NIcon, useThemeVars } from 'ithinkdt-ui'
-import { computed, defineComponent, reactive, ref, toRef, watch } from 'vue'
-import { useRouter } from 'vue-router'
-
-import { getOpaqueColor } from '@ithinkdt/common/color'
-
-import { useI18n } from '../use-i18n.js'
-
-import { getCtx } from './common.jsx'
-
-function useCtxMenu(tabs, current, changeFullTab) {
-    const { t } = useI18n()
-
-    const ctx = reactive({ visible: false, x: 0, y: 0 })
-    const onCtx = async (e, tab) => {
-        e.preventDefault()
-        e.stopPropagation()
-
-        if (ctx.visible && ctx.tab === tab) return
-
-        ctx.tab = tab
-        if (ctx.visible) {
-            ctx.visible = false
-            await promiseTimeout(130)
-        }
-        ctx.visible = true
-        ctx.x = e.clientX
-        ctx.y = e.clientY
-    }
-
-    const onClickoutside = async () => {
-        requestIdleCallback(
-            () => {
-                ctx.visible = false
-            },
-            { timeout: 30 },
-        )
-    }
-
-    const router = useRouter()
-    const options = computed(() => [
-        {
-            key: 'reload',
-            label: t('common.layout.tabs.reloadTab'),
-            disabled: ctx.tab && ctx.tab.key !== current.value,
-            icon: () => (
-                <NIcon size={20}>
-                    <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.65 6.35A7.958 7.958 0 0 0 12 4a8 8 0 0 0-8 8a8 8 0 0 0 8 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18a6 6 0 0 1-6-6a6 6 0 0 1 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35Z"
-                        >
-                        </path>
-                    </svg>
-                </NIcon>
-            ),
-        },
-        {
-            key: 'fullTab',
-            label: t('common.layout.tabs.fullTab'),
-            icon: () => (
-                <NIcon size={16}>
-                    <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="1em"
-                        height="1em"
-                        viewBox="0 0 24 24"
-                    >
-                        <path
-                            fill="currentColor"
-                            fill-rule="evenodd"
-                            d="M18.29 2.89c-1.028-.138-2.383-.14-4.29-.14a.75.75 0 0 1 0-1.5h.056c1.838 0 3.294 0 4.433.153c1.172.158 2.121.49 2.87 1.238c.748.749 1.08 1.698 1.238 2.87c.153 1.14.153 2.595.153 4.433V10a.75.75 0 0 1-1.5 0c0-1.907-.002-3.261-.14-4.29c-.135-1.005-.389-1.585-.812-2.008s-1.003-.677-2.009-.812M2 13.25a.75.75 0 0 1 .75.75c0 1.907.002 3.262.14 4.29c.135 1.005.389 1.585.812 2.008s1.003.677 2.009.812c1.028.138 2.382.14 4.289.14a.75.75 0 0 1 0 1.5h-.056c-1.838 0-3.294 0-4.433-.153c-1.172-.158-2.121-.49-2.87-1.238c-.748-.749-1.08-1.698-1.238-2.87c-.153-1.14-.153-2.595-.153-4.433V14a.75.75 0 0 1 .75-.75"
-                            clip-rule="evenodd"
-                        />
-                        <path
-                            fill="currentColor"
-                            d="M9.944 1.25H10a.75.75 0 0 1 0 1.5c-1.907 0-3.261.002-4.29.14c-1.005.135-1.585.389-2.008.812S3.025 4.705 2.89 5.71c-.138 1.029-.14 2.383-.14 4.29a.75.75 0 0 1-1.5 0v-.056c0-1.838 0-3.294.153-4.433c.158-1.172.49-2.121 1.238-2.87c.749-.748 1.698-1.08 2.87-1.238c1.14-.153 2.595-.153 4.433-.153M22 13.25a.75.75 0 0 1 .75.75v.056c0 1.838 0 3.294-.153 4.433c-.158 1.172-.49 2.121-1.238 2.87c-.749.748-1.698 1.08-2.87 1.238c-1.14.153-2.595.153-4.433.153H14a.75.75 0 0 1 0-1.5c1.907 0 3.262-.002 4.29-.14c1.005-.135 1.585-.389 2.008-.812s.677-1.003.812-2.009c.138-1.027.14-2.382.14-4.289a.75.75 0 0 1 .75-.75"
-                            opacity=".5"
-                        />
-                    </svg>
-                </NIcon>
-            ),
-        },
-        {
-            key: 'open',
-            label: t('common.layout.tabs.openTabBlank'),
-            disabled: ctx.tab?.key !== current.value,
-            icon: () => (
-                <NIcon size={20}>
-                    <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 15 15"
-                    >
-                        <path
-                            fill="currentColor"
-                            clip-rule="evenodd"
-                            fill-rule="evenodd"
-                            d="M12 13a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v3.5a.5.5 0 0 0 1 0V3h9v9H8.5a.5.5 0 0 0 0 1H12ZM9 6.5v3a.5.5 0 0 1-1 0V7.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 7H5.5a.5.5 0 0 1 0-1h3a.498.498 0 0 1 .5.497"
-                        />
-                    </svg>
-                </NIcon>
-            ),
-        },
-        {
-            key: 'closeAll',
-            label: t('common.layout.tabs.closeAllTabs'),
-            icon: () => (
-                <NIcon size={20}>
-                    <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="M6.4 19L5 17.6l5.6-5.6L5 6.4L6.4 5l5.6 5.6L17.6 5L19 6.4L13.4 12l5.6 5.6l-1.4 1.4l-5.6-5.6L6.4 19Z"
-                        />
-                    </svg>
-                </NIcon>
-            ),
-        },
-        {
-            key: 'closeLeft',
-            label: t('common.layout.tabs.closeLeftTabs'),
-            disabled: !ctx.tab,
-            icon: () => (
-                <NIcon size={20}>
-                    <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="M11 16v-3h10v-2H11V8l-4 4l4 4m-8 4h2V4H3v16Z"></path>
-                    </svg>
-                </NIcon>
-            ),
-        },
-        {
-            key: 'closeRight',
-            label: t('common.layout.tabs.closeRightTabs'),
-            disabled: !ctx.tab,
-            icon: () => (
-                <NIcon size={20}>
-                    <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="M13 8v3H3v2h10v3l4-4l-4-4m6 12h2V4h-2v16Z"></path>
-                    </svg>
-                </NIcon>
-            ),
-        },
-        {
-            key: 'closeOther',
-            label: t('common.layout.tabs.closeOtherTabs'),
-            disabled: !ctx.tab,
-            icon: () => (
-                <NIcon size={20}>
-                    {' '}
-                    <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 1024 1024"
-                    >
-                        <path
-                            fill="currentColor"
-                            d="M180 176h-60c-4.4 0-8 3.6-8 8v656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V184c0-4.4-3.6-8-8-8zm724 0h-60c-4.4 0-8 3.6-8 8v656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V184c0-4.4-3.6-8-8-8zM785.3 504.3L657.7 403.6a7.23 7.23 0 0 0-11.7 5.7V476H378v-62.8c0-6-7-9.4-11.7-5.7L238.7 508.3a7.14 7.14 0 0 0 0 11.3l127.5 100.8c4.7 3.7 11.7.4 11.7-5.7V548h268v62.8c0 6 7 9.4 11.7 5.7l127.5-100.8c3.8-2.9 3.8-8.5.2-11.4z"
-                        >
-                        </path>
-                    </svg>
-                </NIcon>
-            ),
-        },
-    ])
-
-    const onSelect = async (key) => {
-        ctx.visible = false
-        const alltabs = [...tabs.value]
-        if (key === 'closeAll') {
-            await router.push('/')
-            for (const tab of alltabs) {
-                if (tab.key !== current.value) {
-                    tab.close(false)
-                }
-            }
-            return
-        }
-        if (key === 'fullTab') {
-            changeFullTab()
-            return
-        }
-        if (!ctx.tab) {
-            const tab = alltabs.find(tab => tab.key === current.value)
-            switch (key) {
-                case 'open': {
-                    window.open(tab.href, '_blank')
-                    break
-                }
-                case 'reload': {
-                    if (!tab.reloading) {
-                        tab.reloading = true
-                        await promiseTimeout(220)
-                        tab.reloading = false
-                    }
-                    break
-                }
-            }
-            return
-        }
-
-        switch (key) {
-            case 'open': {
-                window.open(ctx.tab.href, '_blank')
-                break
-            }
-            case 'reload': {
-                if (!ctx.tab.reloading) {
-                    ctx.tab.reloading = true
-                    await promiseTimeout(220)
-                    ctx.tab.reloading = false
-                }
-                break
-            }
-            case 'close': {
-                ctx.tab?.close()
-                break
-            }
-            case 'closeOther': {
-                if (current.value !== ctx.tab.key) {
-                    await router.push(ctx.tab.fullPath)
-                }
-                for (const tab of alltabs) {
-                    if (tab.key !== ctx.tab.key) {
-                        tab.close(false)
-                    }
-                }
-                break
-            }
-            case 'closeLeft': {
-                if (current.value !== ctx.tab.key) {
-                    await router.push(ctx.tab.fullPath)
-                }
-                for (const tab of tabs.value.slice(0, alltabs.indexOf(ctx.tab))) {
-                    tab.close(false)
-                }
-                break
-            }
-            case 'closeRight': {
-                if (current.value !== ctx.tab.key) {
-                    await router.push(ctx.tab.fullPath)
-                }
-                for (const tab of tabs.value.slice(alltabs.indexOf(ctx.tab) + 1)) {
-                    tab.close(false)
-                }
-                break
-            }
-        }
-    }
-
-    return {
-        ctx,
-        onCtx,
-        onClickoutside,
-        options,
-        onSelect,
-    }
-}
-
-function useContentScroll(el, content, current) {
-    function scroll2Tab(index) {
-        if (index === -1 || !content.value?.children.length) return
-        const target = content.value.children[index]
-        el.value.scrollTo({
-            behavior: 'smooth',
-            left: Math.max(
-                0,
-                content.value.offsetLeft + target.offsetLeft - el.value.clientWidth / 2 + target.clientWidth / 2 + 10,
-            ),
-        })
-    }
-
-    watchDebounced(
-        useElementHover(el),
-        (hoverd) => {
-            if (!hoverd) scroll2Tab(current.value)
-        },
-        { debounce: 333 },
-    )
-    watch(current, scroll2Tab, { flush: 'post' })
-
-    useEventListener(
-        el,
-        'wheel',
-        (e) => {
-            if (e.deltaMode !== WheelEvent.DOM_DELTA_PIXEL) {
-                return
-            }
-            e.preventDefault()
-            el.value.scrollBy({
-                left: e.deltaY,
-            })
-        },
-        { passive: false },
-    )
-    return { el, content }
-}
-
-const IBg = props => (
-    <svg {...props}>
-        <defs>
-            <symbol id="geometry-left" viewBox="0 0 214 36"><path d="M17 0h197v36H0v-2c4.5 0 9-3.5 9-8V8c0-4.5 3.5-8 8-8z"></path></symbol>
-            <symbol id="geometry-right" viewBox="0 0 214 36"><use xlink:href="#geometry-left"></use></symbol>
-            <clipPath><rect width="100%" height="100%" x="0"></rect></clipPath>
-        </defs>
-        <svg width="50%" height="100%"><use xlink:href="#geometry-left" width="214" height="36" fill="currentColor"></use></svg>
-        <g transform="scale(-1, 1)">
-            <svg width="50%" height="100%" x="-100%" y="0"><use xlink:href="#geometry-right" width="214" height="36" fill="currentColor"></use></svg>
-        </g>
-    </svg>
-)
-
-const AppTab = /* @__PURE__ */ defineComponent({
-    name: 'AppTab',
-    props: {
-        path: String,
-        isCurrent: Boolean,
-        isLast: Boolean,
-        closable: Boolean,
-        dark: Boolean,
-    },
-    emits: ['close'],
-    setup(props, { emit, slots }) {
-        const container = ref()
-        const isHoverd = useElementHover(container)
-
-        const wrapper = ref()
-        const content = ref()
-        const { width: contentWidth } = useElementSize(content)
-        watch(contentWidth, async () => {
-            await promiseTimeout(1)
-            wrapper.value.style.width = content.value.scrollWidth + 'px'
-        })
-
-        const vars = useThemeVars()
-
-        const contentStyle = computed(() => ({ fontSize: '14px', color: props.isCurrent ? vars.value.primaryColor : vars.value.textColor3, maxWidth: '355px', overflow: 'hidden' }))
-        const bgStyle = computed(() => ({
-            width: 'calc(100% + 27px)', height: '100%', position: 'absolute', top: '0', left: '-14px', zIndex: props.isCurrent ? -1 : -2,
-            color: props.isCurrent
-                ? getOpaqueColor(vars.value.primaryColor, props.dark ? 0.3 : 0.12, props.dark ? '#000' : '#fff')
-                : isHoverd.value ? vars.value.borderColor : 'transparent',
-        }))
-
-        return () => (
-            <div ref={container} style="position: relative; padding: 2px 10px 5px; cursor: pointer">
-                <div ref={wrapper} style="transition: width 300ms; overflow: hidden">
-                    <div ref={content} style="display: flex; align-items: center; gap: 4px; width: fit-content">
-                        <span style={contentStyle.value}>{slots.default?.()}</span>
-                        {
-                            props.closable !== false && (props.isCurrent || isHoverd.value)
-                                ? (
-                                        <span style="line-height: 0; display: inline-block; text-align: right; padding-top: 2px">
-                                            <NButton
-                                                text
-                                                onClick={(evt) => {
-                                                    evt.stopPropagation()
-                                                    emit('close')
-                                                }}
-                                            >
-                                                <NIcon size={18}>
-                                                    <svg
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                        width="1em"
-                                                        height="1em"
-                                                        viewBox="0 0 24 24"
-                                                    >
-                                                        <path
-                                                            fill="currentColor"
-                                                            d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"
-                                                        />
-                                                    </svg>
-                                                </NIcon>
-                                            </NButton>
-                                        </span>
-                                    )
-                                : undefined
-                        }
-                    </div>
-                </div>
-
-                <span style="height: 50%; width: 1px; background: #aaa; display: inline-block; position: absolute; top: 20%; right: -4px; z-index: -3" />
-                <IBg style={bgStyle.value} />
-            </div>
-        )
-    },
-})
-
-export const AppMultiTabs = /* @__PURE__ */ defineComponent({
-    name: 'AppMultiTabs',
-    props: {
-        fullTab: Boolean,
-        showBreadcrumb: Boolean,
-        tabs: Array,
-        current: Object,
-        dark: Boolean,
-    },
-    emits: ['update:fullTab'],
-    setup(props, { emit, slots }) {
-        const appCtx = getCtx()
-        appCtx.hasMultiTab = true
-
-        const router = useRouter()
-
-        const { ctx, onCtx, onClickoutside, options, onSelect } = useCtxMenu(
-            toRef(props, 'tabs'),
-            computed(() => props.current?.key),
-            () => emit('update:fullTab', !props.fullTab),
-        )
-
-        const currentIndex = computed(() =>
-            props.current ? props.tabs.findIndex(tab => tab.key === props.current?.key) : -1,
-        )
-
-        const el = ref()
-        const content = ref()
-        useContentScroll(el, content, currentIndex)
-
-        return () => (
-            <div style="width: 100%; height: 100%; overflow: hidden; display: flex; justify-content: space-between">
-                <div
-                    ref={el}
-                    style="flex: 1 1 100%; height: 100%; display: flex; overflow: hidden; align-items: center; position: relative"
-                >
-                    <div style="height: 100%; flex: 0 0 16px; z-index: 1; position: sticky; left: 0; backdrop-filter: opacity(0.9) blur(5px)" />
-                    <div ref={content} style="padding-inline: 12px; flex: 1 1 auto; display: flex; align-items: end; gap: 8px; height: 100%" onContextmenu={e => onCtx(e)}>
-                        {props.tabs.map((tab, i, arr) => {
-                            const isCurrent = props.current?.key === tab.key
-                            const name = tab.title ?? tab.path
-                            return (
-                                <AppTab
-                                    key={tab.key}
-                                    isCurrent={isCurrent}
-                                    isLast={i === arr.length - 1}
-                                    onClose={tab.close}
-                                    closable={tab.closable}
-                                    dark={props.dark}
-                                    onClick={() => {
-                                        if (!isCurrent) router.push(tab.fullPath)
-                                    }}
-                                    onContextmenu={e => onCtx(e, tab)}
-                                >
-                                    {
-                                        slots.name ? slots.name({ isCurrent, name, tab }) : name
-                                    }
-                                </AppTab>
-                            )
-                        })}
-                    </div>
-
-                    <div style="height: 100%; flex: 0 0 16px; z-index: 1; position: sticky; right: 0; backdrop-filter: opacity(0.9) blur(5px)" />
-                </div>
-
-                <NDropdown
-                    placement="bottom-start"
-                    trigger="manual"
-                    show={ctx.visible}
-                    x={ctx.x}
-                    y={ctx.y}
-                    options={options.value}
-                    onClickoutside={onClickoutside}
-                    onSelect={onSelect}
-                />
-            </div>
-        )
-    },
-})