@ithinkdt/ui 4.0.0-10 → 4.0.0-12

package/src/design/Language.jsx

@@ -0,0 +1,45 @@
+import { NButton, NDropdown, NIcon } from 'ithinkdt-ui'
+import { defineComponent } from 'vue'
+
+export const AppLanguage = /* @__PURE__ */ defineComponent({
+    name: 'AppLanguage',
+    props: {
+        lang: String,
+        supports: Array,
+    },
+    emit: ['update:lang'],
+    setup(props, { emit }) {
+        return () => (
+            <NDropdown
+                options={props.supports}
+                keyField="value"
+                showArrow
+                onSelect={lang => emit('update:lang', lang)}
+            >
+                <NButton quaternary style="--n-padding: 0 12px">
+                    <NIcon size="18">
+                        <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"
+                        >
+                            <g
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="1.5"
+                            >
+                                <path d="M2 12c0 5.523 4.477 10 10 10s10-4.477 10-10S17.523 2 12 2S2 6.477 2 12Z"></path>
+                                <path d="M13 2.05S16 6 16 12c0 6-3 9.95-3 9.95m-2 0S8 18 8 12c0-6 3-9.95 3-9.95M2.63 15.5h18.74m-18.74-7h18.74"></path>
+                            </g>
+                        </svg>
+                    </NIcon>
+                </NButton>
+            </NDropdown>
+        )
+    },
+})

package/src/design/Layout.jsx

@@ -0,0 +1,241 @@
+import { NButton, NIcon } from 'ithinkdt-ui'
+import { defineComponent, provide, reactive, renderSlot, toRef, withDirectives } from 'vue'
+
+import { vTooltip } from '../directives/tooltip.jsx'
+import { useI18n } from '../use-i18n.js'
+import useStyle, { c, cB, cE, cM } from '../use-style.js'
+
+import { COLLAPSED_INJECTION_KEY, CTX_INJECTION_KEY, clsPrefix, getCtx } from './common.jsx'
+
+export { getCtx }
+
+const style = /* @__PURE__ */ c([
+    cB(
+        'layout',
+        {
+            'display': 'grid',
+            'gridTemplateAreas': `
+                'sider header'
+                'sider content'
+                'sider footer'
+            `,
+            'gridTemplateRows': 'auto 1fr auto',
+            'gridTemplateColumns': 'auto 1fr',
+            'position': 'relative',
+            'top': '0',
+            'left': '0',
+            'transition': 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+            '--app-content-height': 'calc(100vh - var(--app-header-height) - var(--app-footer-height))',
+        },
+        [
+            cM('full-header', {
+                gridTemplateAreas: `
+                    'header header'
+                    'sider  content'
+                    'sider  footer'
+                `,
+            }),
+            cM('full-content', {
+                width: `calc(100% + var(--app-sider-width))`,
+                height: `calc(100% + var(--app-header-height))`,
+                left: 'calc(-1 * var(--app-sider-width))',
+                top: 'calc(-1 * var(--app-header-height))',
+            }),
+        ],
+    ),
+    cB(
+        'header',
+        {
+            gridArea: 'header',
+            overflow: 'hidden',
+            zIndex: 2,
+            height: 'var(--app-header-height, 44px)',
+            zIndex: '2',
+        },
+    ),
+    cB(
+        'sider',
+        {
+            gridArea: 'sider',
+            width: 'var(--app-sider-width, 220px)',
+            display: 'flex',
+            flexDirection: 'column',
+            overflow: 'auto',
+            position: 'relative',
+            transition: 'width 0.2s ease-in-out',
+            zIndex: '2',
+        },
+        [
+            cE('collapse-btn', {
+                '--n-padding': '0 12px',
+                'position': 'absolute',
+                'zIndex': '2',
+                'bottom': '8px',
+                'right': '8px',
+            }),
+        ],
+    ),
+    cB('content', {
+        gridArea: 'content',
+        position: 'relative',
+        overflow: 'hidden',
+        zIndex: '1',
+    }),
+    cB('footer', {
+        gridArea: 'footer',
+        lineHeight: '24px',
+    }),
+])
+
+const IFold = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+        <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+            d="M11.5 18s-6-4.419-6-6s6-6 6-6m7 12s-6-4.419-6-6s6-6 6-6"
+            color="currentColor"
+        />
+    </svg>
+)
+const IUnfold = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+        <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+            d="M12.5 18s6-4.419 6-6s-6-6-6-6m-7 12s6-4.419 6-6s-6-6-6-6"
+            color="currentColor"
+        />
+    </svg>
+)
+
+export const AppLayout = /* @__PURE__ */ defineComponent({
+    name: 'AppLayout',
+    props: {
+        layout: {
+            type: String,
+            default: 'left2right',
+        },
+        fullContent: Boolean,
+    },
+    setup(props, { slots }) {
+        useStyle('-layout', style, ref(clsPrefix), false)
+
+        const ctx = reactive({
+            siderWidth: '0px',
+            headerHeight: '0px',
+            footerHeight: '0px',
+            hasMultiTab: false,
+        })
+
+        provide(CTX_INJECTION_KEY, ctx)
+
+        return () => {
+            const { layout } = props
+
+            return (
+                <div
+                    class={{
+                        [`${clsPrefix}-layout`]: true,
+                        [`${clsPrefix}-layout--full-header`]: layout === 'top2bottom',
+                        [`${clsPrefix}-layout--full-content`]: props.fullContent,
+                    }}
+                    style={{
+                        '--app-sider-width': ctx.siderWidth,
+                        '--app-header-height': ctx.headerHeight,
+                        '--app-footer-height': ctx.footerHeight,
+                    }}
+                >
+                    {renderSlot(slots, 'default')}
+                </div>
+            )
+        }
+    },
+})
+
+export const AppHeader = /* @__PURE__ */ defineComponent({
+    name: 'AppHeader',
+    props: {
+        height: { type: Number, default: 44 },
+    },
+    setup(props, { slots }) {
+        const ctx = getCtx()
+
+        return () => {
+            ctx.headerHeight = props.height + 'px'
+            return (
+                <div class={`${clsPrefix}-header`}>
+                    {renderSlot(slots, 'default')}
+                </div>
+            )
+        }
+    },
+})
+export const AppSider = /* @__PURE__ */ defineComponent({
+    name: 'AppSider',
+    props: {
+        showCollapseBtn: { type: Boolean, default: true },
+        collapsed: Boolean,
+        width: { type: Number, default: 220 },
+        collapsedWidth: { type: Number, default: 60 },
+    },
+    emits: {
+        'update:collapsed': () => true,
+    },
+    setup(props, { emit, slots }) {
+        provide(COLLAPSED_INJECTION_KEY, toRef(props, 'collapsed'))
+
+        const { t } = useI18n()
+
+        const ctx = getCtx()
+
+        return () => {
+            ctx.siderWidth = (props.collapsed ? props.collapsedWidth : props.width) + 'px'
+
+            return (
+                <div class={`${clsPrefix}-sider`}>
+                    {renderSlot(slots, 'default')}
+                    {props.showCollapseBtn
+                        ? withDirectives(
+                                <NButton
+                                    class={`${clsPrefix}-sider__collapse-btn`}
+                                    quaternary
+                                    onClick={() => {
+                                        emit('update:collapsed', !props.collapsed)
+                                    }}
+                                >
+                                    <NIcon size="20">{props.collapsed ? <IUnfold /> : <IFold />}</NIcon>
+                                </NButton>,
+                                [[vTooltip, props.collapsed ? t('common.layout.sider.expand') : t('common.layout.sider.collapse')]],
+                            )
+                        : undefined}
+                </div>
+            )
+        }
+    },
+})
+export const AppContent = /* @__PURE__ */ defineComponent({
+    name: 'AppContent',
+    setup(props, { slots }) {
+        return () => <div class={`${clsPrefix}-content`}>{renderSlot(slots, 'default')}</div>
+    },
+})
+export const AppFooter = /* @__PURE__ */ defineComponent({
+    name: 'AppFooter',
+    props: {
+        height: { type: Number, default: 30 },
+    },
+    setup(props, { slots }) {
+        const ctx = getCtx()
+
+        return () => {
+            ctx.footerHeight = props.height + 'px'
+            return <div class={`${clsPrefix}-footer`}>{renderSlot(slots, 'default')}</div>
+        }
+    },
+})

package/src/design/Logo.jsx

@@ -0,0 +1,91 @@
+import { NText } from 'ithinkdt-ui'
+import { defineComponent, inject } from 'vue'
+
+import { COLLAPSED_INJECTION_KEY, clsPrefix } from './common.jsx'
+
+export const AppLogo = /* @__PURE__ */ defineComponent({
+    name: 'AppLogo',
+    props: {
+        src: [String, Function],
+        name: String,
+        collapsed: {
+            type: Boolean,
+            default: undefined,
+        },
+        center: {
+            type: Boolean,
+            default: false,
+        },
+        link: {
+            type: Boolean,
+            default: true,
+        },
+    },
+    setup(props, { slots }) {
+        const src = asyncComputed(() => (typeof props.src === 'function' ? props.src() : props.src))
+        const collapsed2 = inject(COLLAPSED_INJECTION_KEY, false)
+        return () => {
+            let { name, collapsed, center, link } = props
+            collapsed ??= unref(collapsed2)
+
+            const scale = collapsed ? 1 : 1 / 1.1
+            return (
+                <div
+                    class={`${clsPrefix}-logo`}
+                    style={{
+                        '--app-logo-img-size': '32px',
+                        '--app-logo-name-size': '22px',
+                        'width': center ? '100%' : 'auto',
+                        'overflow': 'hidden',
+                        'display': 'flex',
+                        'alignItems': 'center',
+                        'justifyContent': center ? 'center' : 'flex-start',
+                        'cursor': link ? 'pointer' : undefined,
+                    }}
+                >
+                    {
+                        slots.default
+                            ? slots.default()
+                            : (
+                                    <div
+                                        class={`${clsPrefix}-logo__img`}
+                                        style={`
+                                        width: ${collapsed ? `var(--app-sider-width, 60px)` : '56px'};
+                                        font-size: ${collapsed ? `calc(var(--app-sider-width, 60px) - 24px)` : '32px'};
+                                        transition: width 0.2s ease-in-out 0.1s;
+                                        flex: 0 0 auto;
+                                        display: flex;
+                                        justify-content: center
+                                    `}
+                                    >
+                                        {
+                                            slots.icon
+                                                ? slots.icon()
+                                                : (
+                                                        <img
+                                                            src={src.value}
+                                                            alt="App Logo"
+                                                            style={`transition: height 0.2s ease-in-out; height: calc(var(--app-logo-img-size) * ${scale})`}
+                                                        />
+                                                    )
+                                        }
+                                    </div>
+                                )
+                    }
+                    {name
+                        ? (
+                                <NText
+                                    class={`${clsPrefix}-logo__name`}
+                                    style="font-size: var(--app-logo-name-size); font-weight: bold; white-space: nowrap; flex: 0 1 auto; overflow: hidden"
+                                >
+                                    {name}
+                                </NText>
+                            )
+                        : (
+                                ''
+                            )}
+                </div>
+            )
+        }
+    },
+})

package/src/design/Menu.jsx

@@ -0,0 +1,133 @@
+import { NMenu, NScrollbar } from 'ithinkdt-ui'
+import { defineComponent, inject, shallowRef, useTemplateRef, watch, withDirectives } from 'vue'
+import { RouterLink } from 'vue-router'
+
+import { vTooltip } from '../directives/tooltip.jsx'
+
+import { COLLAPSED_INJECTION_KEY, IBookmark } from './common.jsx'
+
+export const AppMenu = /* @__PURE__ */ defineComponent({
+    name: 'AppMenu',
+    props: {
+        menus: Array,
+        getIcon: Function,
+        current: String,
+        horizontal: Boolean,
+        single: Boolean,
+        accordion: Boolean,
+        collapsed: { type: Boolean, default: undefined },
+        renderLabel: Function,
+        width: { type: Number, default: 220 },
+        collapsedWidth: { type: Number, default: 60 },
+    },
+    setup(props) {
+        const options = shallowRef([])
+
+        watch(
+            [() => props.menus, () => props.single],
+            ([menus, single]) => {
+                options.value = []
+                if (!menus?.length) return
+
+                const map = (data, depth = 0) => {
+                    const array = []
+                    for (const it of data) {
+                        if (it.type === 'action') continue
+
+                        const children = it.type === 'view' ? undefined : map(it.children ?? [], depth + 1)
+
+                        const menu = {
+                            _: it,
+                            key: it.key,
+                            label: () => props.renderLabel?.(it) ?? it.name,
+                            icon: (depth === 0 || it.icon) ? (props.getIcon?.(it.icon) ?? IBookmark) : undefined,
+                            children: single ? undefined : children,
+                            path: it.path || (single ? children?.[0]?.path : undefined),
+                            depth,
+                        }
+                        delete menu.type
+                        array.push(menu)
+                    }
+                    return array
+                }
+
+                options.value = map(menus)
+            },
+            { immediate: true },
+        )
+
+        const menuRef = useTemplateRef('menu')
+        watch(
+            [menuRef, () => props.current],
+            ([menuRef, current]) => {
+                menuRef?.showOption(current)
+            },
+            { immediate: true },
+        )
+
+        const collapsed2 = inject(COLLAPSED_INJECTION_KEY, false)
+
+        const renderLabel = (menu) => {
+            const collapsed = props.collapsed ?? unref(collapsed2)
+            let label
+            if (menu._.type === 'view') {
+                if (menu.isExternal && menu.externalEmbed) {
+                    label = (
+                        <a href={menu.externalLink} target="_blank" onClick={e => e.stopPropagation()}>
+                            {menu.label()}
+                        </a>
+                    )
+                } else {
+                    label = <RouterLink to={menu.path}>{menu.label()}</RouterLink>
+                }
+            } else {
+                label = <span>{menu.label()}</span>
+            }
+            label.key = `${menu.key}:${collapsed ? 1 : 0}`
+            if (menu.depth === 0 && !collapsed) {
+                label = withDirectives(label, [[vTooltip, menu.label(), undefined, { auto: true, right: true }]])
+            }
+            if (menu.isNew) {
+                label = (
+                    <div style="display: flex; width: 100%">
+                        <span style="flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis">{label}</span>
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="24"
+                            height="24"
+                            viewBox="0 0 1024 1024"
+                            style="margin-left: 8px; flex: 0 0 auto;"
+                        >
+                            <path
+                                d="M245.76 286.72h552.96c124.928 0 225.28 100.352 225.28 225.28s-100.352 225.28-225.28 225.28H0V532.48c0-135.168 110.592-245.76 245.76-245.76z m133.12 348.16V401.408H348.16v178.176l-112.64-178.176H204.8V634.88h30.72v-178.176L348.16 634.88h30.72z m182.272-108.544v-24.576h-96.256v-75.776h110.592v-24.576h-141.312V634.88h143.36v-24.576h-112.64v-83.968h96.256z m100.352 28.672l-34.816-151.552h-34.816l55.296 233.472H675.84l47.104-161.792 4.096-20.48 4.096 20.48 47.104 161.792h28.672l57.344-233.472h-34.816l-32.768 151.552-4.096 30.72-6.144-30.72-40.96-151.552h-30.72l-40.96 151.552-6.144 30.72-6.144-30.72z"
+                                fill="var(--color-danger)"
+                            >
+                            </path>
+                        </svg>
+                    </div>
+                )
+            }
+            return label
+        }
+
+        return () => {
+            const content = (
+                <NMenu
+                    ref="menu"
+                    options={options.value}
+                    rootIndent={16}
+                    accordion={props.accordion}
+                    collapsed={props.collapsed ?? unref(collapsed2)}
+                    dropdownProps={{ showArrow: true }}
+                    mode={props.horizontal ? 'horizontal' : 'vertical'}
+                    value={props.current ?? null}
+                    renderLabel={renderLabel}
+                    responsive
+                    collapsedWidth={props.collapsedWidth}
+                    width={props.width}
+                />
+            )
+            return props.horizontal ? content : <NScrollbar>{content}</NScrollbar>
+        }
+    },
+})