@ithinkdt/ui 4.0.0-19 → 4.0.0-200

package/src/design/Language.jsx

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

@@ -1,241 +0,0 @@
-import { NButton, NIcon } from 'ithinkdt-ui'
-import { defineComponent, provide, reactive, ref, 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

@@ -1,92 +0,0 @@
-import { asyncComputed } from '@vueuse/core'
-import { NText } from 'ithinkdt-ui'
-import { defineComponent, inject, unref } 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

@@ -1,133 +0,0 @@
-import { NMenu, NScrollbar } from 'ithinkdt-ui'
-import { defineComponent, inject, shallowRef, unref, 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>
-        }
-    },
-})