@ithinkdt/ui 4.0.0-10 → 4.0.0-11

package/src/design/MultiTabs.jsx

@@ -0,0 +1,501 @@
+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>
+        )
+    },
+})