Merge branch 'main' into feature/antd上传组件支持调用Image组件查看图片

This commit is contained in:
Jin Mao
2025-11-24 21:59:34 +08:00
committed by GitHub
158 changed files with 1018 additions and 1286 deletions

View File

@@ -24,7 +24,7 @@ onMounted(() => {
{ name: '定制', value: 310 },
{ name: '技术支持', value: 274 },
{ name: '远程', value: 400 },
].sort((a, b) => {
].toSorted((a, b) => {
return a.value - b.value;
}),
name: '商业占比',

View File

@@ -24,7 +24,7 @@ onMounted(() => {
{ name: '定制', value: 310 },
{ name: '技术支持', value: 274 },
{ name: '远程', value: 400 },
].sort((a, b) => {
].toSorted((a, b) => {
return a.value - b.value;
}),
name: '商业占比',

View File

@@ -24,7 +24,7 @@ onMounted(() => {
{ name: '定制', value: 310 },
{ name: '技术支持', value: 274 },
{ name: '远程', value: 400 },
].sort((a, b) => {
].toSorted((a, b) => {
return a.value - b.value;
}),
name: '商业占比',

View File

@@ -44,11 +44,8 @@
"dayjs": "catalog:",
"es-toolkit": "catalog:",
"pinia": "catalog:",
"tdesign-vue-next": "^1.17.1",
"tdesign-vue-next": "catalog:",
"vue": "catalog:",
"vue-router": "catalog:"
},
"devDependencies": {
"@types/lodash-es": "^4.17.12"
}
}

View File

@@ -1,12 +1,12 @@
<script lang="ts" setup>
import type { GlobalConfigProvider } from 'tdesign-vue-next';
import { ConfigProvider } from 'tdesign-vue-next';
import { onMounted } from 'vue';
import { usePreferences } from '@vben/preferences';
import { merge } from 'es-toolkit/compat';
import { ConfigProvider } from 'tdesign-vue-next';
import zhConfig from 'tdesign-vue-next/es/locale/zh_CN';
defineOptions({ name: 'App' });

View File

@@ -7,7 +7,7 @@ import { initStores } from '@vben/stores';
import '@vben/styles';
// import '@vben/styles/antd';
// 引入组件库的少量全局样式变量
import 'tdesign-vue-next/es/style/index.css';
import { useTitle } from '@vueuse/core';
import { $t, setupI18n } from '#/locales';
@@ -17,6 +17,8 @@ import { initSetupVbenForm } from './adapter/form';
import App from './app.vue';
import { router } from './router';
import 'tdesign-vue-next/es/style/index.css';
async function bootstrap(namespace: string) {
// 初始化组件适配器
await initComponentAdapter();

View File

@@ -24,7 +24,7 @@ onMounted(() => {
{ name: '定制', value: 310 },
{ name: '技术支持', value: 274 },
{ name: '远程', value: 400 },
].sort((a, b) => {
].toSorted((a, b) => {
return a.value - b.value;
}),
name: '商业占比',

View File

@@ -42,6 +42,7 @@
"sortablejs",
"styl",
"taze",
"tdesign",
"ui-kit",
"uicons",
"unplugin",

View File

@@ -19,15 +19,15 @@ const parsedFiles = computed(() => {
</script>
<template>
<div class="border-border shadow-float relative rounded-xl border">
<div class="relative rounded-xl border border-border shadow-float">
<div
class="not-prose relative w-full overflow-x-auto rounded-t-lg px-4 py-6"
>
<div class="flex w-full max-w-[700px] px-2">
<ClientOnly>
<slot v-if="parsedFiles.length > 0"></slot>
<div v-else class="text-destructive text-sm">
<span class="bg-destructive text-foreground rounded-sm px-1 py-1">
<div v-else class="text-sm text-destructive">
<span class="rounded-sm bg-destructive px-1 py-1 text-foreground">
ERROR:
</span>
The preview directory does not exist. Please check the 'dir'

View File

@@ -48,10 +48,10 @@ const toggleOpen = () => {
<template>
<TabsRoot
v-model="currentTab"
class="bg-background-deep border-border overflow-hidden rounded-b-xl border-t"
class="overflow-hidden rounded-b-xl border-t border-border bg-background-deep"
@update:model-value="open = true"
>
<div class="border-border bg-background flex border-b-2 pr-2">
<div class="flex border-b-2 border-border bg-background pr-2">
<div class="flex w-full items-center justify-between text-[13px]">
<TabsList class="relative flex">
<template v-if="open">
@@ -64,7 +64,7 @@ const toggleOpen = () => {
v-for="(tab, index) in tabs"
:key="index"
:value="tab.label"
class="border-box text-foreground px-4 py-3 data-[state=active]:text-[var(--vp-c-indigo-1)]"
class="border-box px-4 py-3 text-foreground data-[state=active]:text-[var(--vp-c-indigo-1)]"
tabindex="-1"
>
{{ tab.label }}
@@ -81,7 +81,7 @@ const toggleOpen = () => {
<VbenTooltip side="top">
<template #trigger>
<Code
class="hover:bg-accent size-7 cursor-pointer rounded-full p-1.5"
class="size-7 cursor-pointer rounded-full p-1.5 hover:bg-accent"
@click="toggleOpen"
/>
</template>
@@ -101,7 +101,7 @@ const toggleOpen = () => {
as-child
class="rounded-xl"
>
<div class="text-foreground relative rounded-xl">
<div class="relative rounded-xl text-foreground">
<component :is="tab.component" class="border-0" />
</div>
</TabsContent>

View File

@@ -84,7 +84,7 @@ export const demoPreviewPlugin = (md: MarkdownRenderer) => {
return '';
}
const firstString = 'index.vue';
childFiles = childFiles.sort((a, b) => {
childFiles = childFiles.toSorted((a, b) => {
if (a === firstString) return -1;
if (b === firstString) return 1;
return a.localeCompare(b, 'en', { sensitivity: 'base' });

View File

@@ -32,7 +32,7 @@ function handleUpdate(len: number) {
<div
v-for="item in list"
:key="item"
class="even:bg-heavy bg-muted flex-center h-[220px] w-full"
class="flex-center h-[220px] w-full bg-muted even:bg-heavy"
>
{{ item }}
</div>

View File

@@ -32,7 +32,7 @@ function handleUpdate(len: number) {
<div
v-for="item in list"
:key="item"
class="even:bg-heavy bg-muted flex-center h-[220px] w-full"
class="flex-center h-[220px] w-full bg-muted even:bg-heavy"
>
{{ item }}
</div>

View File

@@ -21,7 +21,7 @@ const scopeComplete = execSync('git status --porcelain || true')
.trim()
.split('\n')
.find((r) => ~r.indexOf('M src'))
?.replace(/(\/)/g, '%%')
?.replaceAll(/(\/)/g, '%%')
?.match(/src%%((\w|-)*)/)?.[1]
?.replace(/s$/, '');

View File

@@ -3,7 +3,6 @@ import createCommand from 'eslint-plugin-command/config';
export async function command() {
return [
{
// @ts-expect-error - no types
...createCommand(),
},
];

View File

@@ -35,7 +35,7 @@ export async function node(): Promise<Linter.Config[]> {
'error',
{
ignores: [],
version: '>=18.0.0',
version: '>=20.12.0',
},
],
'n/prefer-global/buffer': ['error', 'never'],

View File

@@ -4,7 +4,6 @@ import { interopDefault } from '../util';
export async function perfectionist(): Promise<Linter.Config[]> {
const perfectionistPlugin = await interopDefault(
// @ts-expect-error - no types
import('eslint-plugin-perfectionist'),
);

View File

@@ -4,7 +4,6 @@ import { interopDefault } from '../util';
export async function turbo(): Promise<Linter.Config[]> {
const [pluginTurbo] = await Promise.all([
// @ts-expect-error - no types
interopDefault(import('eslint-config-turbo')),
] as const);

View File

@@ -5,7 +5,6 @@ import { interopDefault } from '../util';
export async function typescript(): Promise<Linter.Config[]> {
const [pluginTs, parserTs] = await Promise.all([
interopDefault(import('@typescript-eslint/eslint-plugin')),
// @ts-expect-error missing types
interopDefault(import('@typescript-eslint/parser')),
] as const);
@@ -27,11 +26,11 @@ export async function typescript(): Promise<Linter.Config[]> {
},
},
plugins: {
'@typescript-eslint': pluginTs,
'@typescript-eslint': pluginTs as any,
},
rules: {
...pluginTs.configs['eslint-recommended'].overrides?.[0].rules,
...pluginTs.configs.strict.rules,
...pluginTs.configs['eslint-recommended']?.overrides?.[0]?.rules,
...pluginTs.configs.strict?.rules,
'@typescript-eslint/ban-ts-comment': [
'error',
{

View File

@@ -6,7 +6,6 @@ export async function vue(): Promise<Linter.Config[]> {
const [pluginVue, parserVue, parserTs] = await Promise.all([
interopDefault(import('eslint-plugin-vue')),
interopDefault(import('vue-eslint-parser')),
// @ts-expect-error missing types
interopDefault(import('@typescript-eslint/parser')),
] as const);

View File

@@ -1,6 +1,9 @@
{
"$schema": "https://json.schemastore.org/tsconfig",
"extends": "@vben/tsconfig/node.json",
"compilerOptions": {
"moduleResolution": "bundler"
},
"include": ["src"],
"exclude": ["node_modules"]
}

View File

@@ -53,6 +53,7 @@
"@tailwindcss/typography": "catalog:",
"autoprefixer": "catalog:",
"cssnano": "catalog:",
"jiti": "catalog:",
"postcss": "catalog:",
"postcss-antd-fixes": "catalog:",
"postcss-import": "catalog:",

View File

@@ -114,7 +114,7 @@ function createCssOptions(injectGlobalScss = true): CSSOptions {
}
return content;
},
api: 'modern',
// api: 'modern',
importers: [new NodePackageImporter()],
},
}

View File

@@ -93,14 +93,14 @@
"unbuild": "catalog:",
"vite": "catalog:",
"vitest": "catalog:",
"vue": "^3.5.24",
"vue": "catalog:",
"vue-tsc": "catalog:"
},
"engines": {
"node": ">=20.10.0",
"pnpm": ">=9.12.0"
"node": ">=20.12.0",
"pnpm": ">=10.0.0"
},
"packageManager": "pnpm@10.14.0",
"packageManager": "pnpm@10.22.0",
"pnpm": {
"peerDependencyRules": {
"allowedVersions": {
@@ -112,9 +112,9 @@
"@ctrl/tinycolor": "catalog:",
"clsx": "catalog:",
"esbuild": "0.25.3",
"jiti": "catalog:",
"pinia": "catalog:",
"vue": "catalog:",
"jiti": "^2.6.1"
"vue": "catalog:"
},
"neverBuiltDependencies": [
"canvas",

View File

@@ -14,8 +14,9 @@
}
html {
@apply text-foreground bg-background font-sans text-[100%];
@apply text-foreground bg-background font-sans;
font-size: var(--font-size-base, 16px);
font-variation-settings: normal;
line-height: 1.15;
text-size-adjust: 100%;

View File

@@ -93,6 +93,7 @@
/* 基本文字大小 */
--font-size-base: 16px;
--menu-font-size: calc(var(--font-size-base) * 0.875);
/* =============component & UI============= */

View File

@@ -1,4 +1,2 @@
import './default.css';
import './dark.css';
export {};

View File

@@ -4,5 +4,3 @@ import './css/global.css';
import './css/transition.css';
import './css/nprogress.css';
import './css/ui.css';
export {};

View File

@@ -113,6 +113,7 @@ exports[`defaultPreferences immutability test > should not modify the config obj
"colorPrimary": "hsl(212 100% 45%)",
"colorSuccess": "hsl(144 57% 58%)",
"colorWarning": "hsl(42 84% 61%)",
"fontSize": 16,
"mode": "dark",
"radius": "0.5",
"semiDarkHeader": false,

View File

@@ -116,6 +116,7 @@ const defaultPreferences: Preferences = {
colorWarning: 'hsl(42 84% 61%)',
mode: 'dark',
radius: '0.5',
fontSize: 16,
semiDarkHeader: false,
semiDarkSidebar: false,
},

View File

@@ -141,7 +141,10 @@ class PreferenceManager {
private handleUpdates(updates: DeepPartial<Preferences>) {
const themeUpdates = updates.theme || {};
const appUpdates = updates.app || {};
if (themeUpdates && Object.keys(themeUpdates).length > 0) {
if (
(themeUpdates && Object.keys(themeUpdates).length > 0) ||
Reflect.has(themeUpdates, 'fontSize')
) {
updateCSSVariables(this.state);
}
@@ -221,12 +224,8 @@ class PreferenceManager {
const dom = document.documentElement;
const COLOR_WEAK = 'invert-mode';
const COLOR_GRAY = 'grayscale-mode';
colorWeakMode
? dom.classList.add(COLOR_WEAK)
: dom.classList.remove(COLOR_WEAK);
colorGrayMode
? dom.classList.add(COLOR_GRAY)
: dom.classList.remove(COLOR_GRAY);
dom.classList.toggle(COLOR_WEAK, colorWeakMode);
dom.classList.toggle(COLOR_GRAY, colorGrayMode);
}
}
}

View File

@@ -239,6 +239,8 @@ interface ThemePreferences {
colorSuccess: string;
/** 警告色 */
colorWarning: string;
/** 字体大小单位px */
fontSize: number;
/** 当前主题 */
mode: ThemeModeType;
/** 圆角 */

View File

@@ -66,6 +66,19 @@ function updateCSSVariables(preferences: Preferences) {
if (Reflect.has(theme, 'radius')) {
document.documentElement.style.setProperty('--radius', `${radius}rem`);
}
// 更新字体大小
if (Reflect.has(theme, 'fontSize')) {
const fontSize = theme.fontSize;
document.documentElement.style.setProperty(
'--font-size-base',
`${fontSize}px`,
);
document.documentElement.style.setProperty(
'--menu-font-size',
`calc(${fontSize}px * 0.875)`,
);
}
}
/**

View File

@@ -339,7 +339,7 @@ onUnmounted(() => {
:is="FieldComponent"
ref="fieldComponentRef"
:class="{
'border-destructive focus:border-destructive hover:border-destructive/80 focus:shadow-[0_0_0_2px_rgba(255,38,5,0.06)]':
'border-destructive hover:border-destructive/80 focus:border-destructive focus:shadow-[0_0_0_2px_rgba(255,38,5,0.06)]':
isInValid,
}"
v-bind="createComponentProps(slotProps)"
@@ -367,7 +367,7 @@ onUnmounted(() => {
<CircleAlert
:class="
cn(
'text-foreground/80 hover:text-foreground inline-flex size-5 cursor-pointer',
'inline-flex size-5 cursor-pointer text-foreground/80 hover:text-foreground',
)
"
/>

View File

@@ -21,7 +21,7 @@ const props = defineProps<Props>();
<template>
<FormLabel :class="cn('flex items-center', props.class)">
<span v-if="required" class="text-destructive mr-[2px]">*</span>
<span v-if="required" class="mr-[2px] text-destructive">*</span>
<slot></slot>
<VbenHelpTooltip v-if="help" trigger-class="size-3.5 ml-1">
<VbenRenderContent :content="help" />

View File

@@ -55,7 +55,7 @@ const style = computed((): CSSProperties => {
</script>
<template>
<main ref="contentElement" :style="style" class="bg-background-deep relative">
<main ref="contentElement" :style="style" class="relative bg-background-deep">
<Slot :style="overlayStyle">
<slot name="overlay"></slot>
</Slot>

View File

@@ -37,7 +37,7 @@ const style = computed((): CSSProperties => {
<template>
<footer
:style="style"
class="bg-background-deep bottom-0 w-full transition-all duration-200"
class="bottom-0 w-full bg-background-deep transition-all duration-200"
>
<slot></slot>
</footer>

View File

@@ -64,7 +64,7 @@ const logoStyle = computed((): CSSProperties => {
<header
:class="theme"
:style="style"
class="border-border bg-header top-0 flex w-full flex-[0_0_auto] items-center border-b pl-2 transition-[margin-top] duration-200"
class="top-0 flex w-full flex-[0_0_auto] items-center border-b border-border bg-header pl-2 transition-[margin-top] duration-200"
>
<div v-if="slots.logo" :style="logoStyle">
<slot name="logo"></slot>

View File

@@ -264,7 +264,7 @@ function handleMouseleave() {
theme,
{
'bg-sidebar-deep': isSidebarMixed,
'bg-sidebar border-border border-r': !isSidebarMixed,
'border-r border-border bg-sidebar': !isSidebarMixed,
},
]"
:style="style"
@@ -295,7 +295,7 @@ function handleMouseleave() {
'border-l': extraVisible,
}"
:style="extraStyle"
class="border-border bg-sidebar fixed top-0 h-full overflow-hidden border-r transition-all duration-200"
class="fixed top-0 h-full overflow-hidden border-r border-border bg-sidebar transition-all duration-200"
>
<SidebarCollapseButton
v-if="isSidebarMixed && expandOnHover"

View File

@@ -23,7 +23,7 @@ const style = computed((): CSSProperties => {
<template>
<section
:style="style"
class="border-border bg-background flex w-full border-b transition-all"
class="flex w-full border-b border-border bg-background transition-all"
>
<slot></slot>
</section>

View File

@@ -10,7 +10,7 @@ function handleCollapsed() {
<template>
<div
class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent absolute bottom-2 left-3 z-10 cursor-pointer rounded-sm p-1"
class="flex-center absolute bottom-2 left-3 z-10 cursor-pointer rounded-sm bg-accent p-1 text-foreground/60 hover:bg-accent-hover hover:text-foreground"
@click.stop="handleCollapsed"
>
<ChevronsRight v-if="collapsed" class="size-4" />

View File

@@ -10,7 +10,7 @@ function toggleFixed() {
<template>
<div
class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent absolute bottom-2 right-3 z-10 cursor-pointer rounded-sm p-[5px] transition-all duration-300"
class="flex-center absolute bottom-2 right-3 z-10 cursor-pointer rounded-sm bg-accent p-[5px] text-foreground/60 transition-all duration-300 hover:bg-accent-hover hover:text-foreground"
@click="toggleFixed"
>
<PinOff v-if="!expandOnHover" class="size-3.5" />

View File

@@ -610,7 +610,7 @@ const idMainContent = ELEMENT_ID_MAIN_CONTENT;
<div
v-if="maskVisible"
:style="maskStyle"
class="bg-overlay fixed left-0 top-0 h-full w-full transition-[background-color] duration-200"
class="fixed left-0 top-0 h-full w-full bg-overlay transition-[background-color] duration-200"
@click="handleClickMask"
></div>
</div>

View File

@@ -49,7 +49,7 @@ const badgeStyle = computed(() => {
v-else
:class="badgeClass"
:style="badgeStyle"
class="text-primary-foreground flex-center rounded-xl px-1.5 py-0.5 text-[10px]"
class="flex-center rounded-xl px-1.5 py-0.5 text-[10px] text-primary-foreground"
>
{{ badge }}
</div>

View File

@@ -388,7 +388,7 @@ $namespace: vben;
padding: var(--menu-item-padding-y) var(--menu-item-padding-x);
margin: 0 var(--menu-item-margin-x) var(--menu-item-margin-y)
var(--menu-item-margin-x);
font-size: var(--menu-font-size);
font-size: var(--menu-font-size) !important;
color: var(--menu-item-color);
white-space: nowrap;
text-decoration: none;
@@ -433,6 +433,7 @@ $namespace: vben;
max-width: var(--menu-title-width);
overflow: hidden;
text-overflow: ellipsis;
font-size: var(--menu-font-size) !important;
white-space: nowrap;
opacity: 1;
}
@@ -444,7 +445,7 @@ $namespace: vben;
.#{$namespace}-menu__popup-container,
.#{$namespace}-menu {
--menu-title-width: 140px;
--menu-item-icon-size: 16px;
--menu-item-icon-size: var(--font-size-base, 16px);
--menu-item-height: 38px;
--menu-item-padding-y: 21px;
--menu-item-padding-x: 12px;
@@ -458,7 +459,6 @@ $namespace: vben;
--menu-item-collapse-margin-x: 0px;
--menu-item-radius: 0px;
--menu-item-indent: 16px;
--menu-font-size: 14px;
&.is-dark {
--menu-background-color: hsl(var(--menu));
@@ -752,7 +752,7 @@ $namespace: vben;
}
.#{$namespace}-menu__icon {
display: block;
font-size: 20px !important;
font-size: calc(var(--font-size-base, 16px) * 1.25) !important;
transition: all 0.25s ease;
}
@@ -760,7 +760,7 @@ $namespace: vben;
display: inline-flex;
margin-top: 8px;
margin-bottom: 0;
font-size: 12px;
font-size: calc(var(--font-size-base, 16px) * 0.75);
font-weight: 400;
line-height: normal;
transition: all 0.25s ease;
@@ -785,7 +785,7 @@ $namespace: vben;
width: 100%;
height: 100%;
padding: 0 var(--menu-item-padding-x);
font-size: var(--menu-font-size);
font-size: var(--menu-font-size) !important;
line-height: var(--menu-item-height);
}
}
@@ -812,9 +812,14 @@ $namespace: vben;
.#{$namespace}-sub-menu-content {
height: var(--menu-item-height);
font-size: var(--menu-font-size) !important;
@include menu-item;
* {
font-size: inherit !important;
}
&__icon-arrow {
position: absolute;
top: 50%;

View File

@@ -102,7 +102,7 @@ $namespace: vben;
}
.#{$namespace}-normal-menu__icon {
font-size: 20px;
font-size: calc(var(--font-size-base, 16px) * 1.25);
}
}
@@ -125,16 +125,16 @@ $namespace: vben;
border-color 0.15s ease;
&.is-active {
@apply text-primary bg-primary dark:bg-accent;
@apply bg-primary text-primary dark:bg-accent;
.#{$namespace}-normal-menu__name,
.#{$namespace}-normal-menu__icon {
@apply text-primary-foreground font-semibold;
@apply font-semibold text-primary-foreground;
}
}
&:not(.is-active):hover {
@apply dark:bg-accent text-primary bg-heavy dark:text-foreground;
@apply bg-heavy text-primary dark:bg-accent dark:text-foreground;
}
&:hover {
@@ -146,14 +146,14 @@ $namespace: vben;
&__icon {
max-height: 20px;
font-size: 20px;
font-size: calc(var(--font-size-base, 16px) * 1.25);
transition: all 0.25s ease;
}
&__name {
margin-top: 8px;
margin-bottom: 0;
font-size: 12px;
font-size: calc(var(--font-size-base, 16px) * 0.75);
font-weight: 400;
transition: all 0.25s ease;
}

View File

@@ -144,24 +144,26 @@ export async function vbenPrompt<T = any>(
const modelValue = ref<T | undefined>(defaultValue);
const inputComponentRef = ref<null | VNode>(null);
const staticContents: Component[] = [];
staticContents.push(h(VbenRenderContent, { content, renderBr: true }));
const staticContents: Component[] = [
h(VbenRenderContent, { content, renderBr: true }),
];
const modelPropName = _modelPropName || 'modelValue';
const componentProps = { ..._componentProps };
// 每次渲染时都会重新计算的内容函数
const contentRenderer = () => {
const currentProps = { ...componentProps };
const currentProps = {
...componentProps,
[modelPropName]: modelValue.value,
[`onUpdate:${modelPropName}`]: (val: T) => {
modelValue.value = val;
},
};
// 设置当前值
currentProps[modelPropName] = modelValue.value;
// 设置更新处理函数
currentProps[`onUpdate:${modelPropName}`] = (val: T) => {
modelValue.value = val;
};
// 创建输入组件
inputComponentRef.value = h(

View File

@@ -149,7 +149,7 @@ async function handleOpenChange(val: boolean) {
containerClass,
'left-0 right-0 mx-auto flex max-h-[80%] flex-col p-0 duration-300 sm:w-[520px] sm:max-w-[80%] sm:rounded-[var(--radius)]',
{
'border-border border': bordered,
'border border-border': bordered,
'shadow-3xl': !bordered,
},
)
@@ -168,7 +168,7 @@ async function handleOpenChange(val: boolean) {
:disabled="loading"
@click="handleCancel"
>
<X class="text-muted-foreground size-4" />
<X class="size-4 text-muted-foreground" />
</VbenButton>
</AlertDialogCancel>
</div>

View File

@@ -223,7 +223,7 @@ const getForceMount = computed(() => {
v-if="closable && closeIconPlacement === 'left'"
as-child
:disabled="submitting"
class="data-[state=open]:bg-secondary ml-[2px] cursor-pointer rounded-full opacity-80 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none"
class="ml-[2px] cursor-pointer rounded-full opacity-80 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-secondary"
>
<slot name="close-icon">
<VbenIconButton>
@@ -264,7 +264,7 @@ const getForceMount = computed(() => {
v-if="closable && closeIconPlacement === 'right'"
as-child
:disabled="submitting"
class="data-[state=open]:bg-secondary ml-[2px] cursor-pointer rounded-full opacity-80 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none"
class="ml-[2px] cursor-pointer rounded-full opacity-80 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-secondary"
>
<slot name="close-icon">
<VbenIconButton>

View File

@@ -104,6 +104,10 @@ const shouldDraggable = computed(
() => draggable.value && !shouldFullscreen.value && header.value,
);
const shouldCentered = computed(
() => centered.value && !shouldFullscreen.value,
);
const getAppendTo = computed(() => {
return appendToMain.value
? `#${ELEMENT_ID_MAIN_CONTENT}>div:not(.absolute)>div`
@@ -115,6 +119,7 @@ const { dragging, transform } = useModalDraggable(
headerRef,
shouldDraggable,
getAppendTo,
shouldCentered,
);
const firstOpened = ref(false);
@@ -132,7 +137,9 @@ watch(
dialogRef.value = innerContentRef.$el;
// reopen modal reassign value
const { offsetX, offsetY } = transform;
dialogRef.value.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
dialogRef.value.style.transform = shouldCentered.value
? `translate(${offsetX}px, calc(-50% + ${offsetY}px))`
: `translate(${offsetX}px, ${offsetY}px)`;
}
},
{ immediate: true },
@@ -235,11 +242,11 @@ function handleClosed() {
shouldFullscreen ? 'sm:rounded-none' : 'sm:rounded-[var(--radius)]',
modalClass,
{
'border-border border': bordered,
'border border-border': bordered,
'shadow-3xl': !bordered,
'left-0 top-0 size-full max-h-full !translate-x-0 !translate-y-0':
shouldFullscreen,
'top-1/2 !-translate-y-1/2': centered && !shouldFullscreen,
'top-1/2': centered && !shouldFullscreen,
'duration-300': !dragging,
hidden: isClosed,
},
@@ -311,7 +318,7 @@ function handleClosed() {
<VbenLoading v-if="showLoading || submitting" spinning />
<VbenIconButton
v-if="fullscreenButton"
class="hover:bg-accent hover:text-accent-foreground text-foreground/80 flex-center absolute right-10 top-3 hidden size-6 rounded-full px-1 text-lg opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none sm:block"
class="flex-center absolute right-10 top-3 hidden size-6 rounded-full px-1 text-lg text-foreground/80 opacity-70 transition-opacity hover:bg-accent hover:text-accent-foreground hover:opacity-100 focus:outline-none disabled:pointer-events-none sm:block"
@click="handleFullscreen"
>
<Shrink v-if="fullscreen" class="size-3.5" />

View File

@@ -14,6 +14,7 @@ export function useModalDraggable(
dragRef: Ref<HTMLElement | undefined>,
draggable: ComputedRef<boolean>,
containerSelector?: ComputedRef<string | undefined>,
centered?: ComputedRef<boolean>,
) {
const transform = reactive({
offsetX: 0,
@@ -73,7 +74,10 @@ export function useModalDraggable(
transform.offsetY = moveY;
if (targetRef.value) {
targetRef.value.style.transform = `translate(${moveX}px, ${moveY}px)`;
const isCentered = centered?.value;
targetRef.value.style.transform = isCentered
? `translate(${moveX}px, calc(-50% + ${moveY}px))`
: `translate(${moveX}px, ${moveY}px)`;
dragging.value = true;
}
};
@@ -108,7 +112,7 @@ export function useModalDraggable(
const target = unrefElement(targetRef);
if (target) {
target.style.transform = 'none';
target.style.transform = '';
}
};

View File

@@ -69,7 +69,7 @@ const rootStyle = computed(() => {
<span
v-if="dot"
:class="dotClass"
class="border-background absolute bottom-0 right-0 size-3 rounded-full border-2"
class="absolute bottom-0 right-0 size-3 rounded-full border-2 border-background"
>
</span>
</div>

View File

@@ -32,7 +32,7 @@ const { handleClick, visible } = useBackTop(props);
<VbenButton
v-if="visible"
:style="backTopStyle"
class="dark:bg-accent dark:hover:bg-heavy bg-background hover:bg-heavy data shadow-float z-popup fixed bottom-10 size-10 rounded-full duration-500"
class="data z-popup fixed bottom-10 size-10 rounded-full bg-background shadow-float duration-500 hover:bg-heavy dark:bg-accent dark:hover:bg-heavy"
size="icon"
variant="icon"
@click="handleClick"

View File

@@ -37,7 +37,7 @@ function handleClick(index: number, path?: string) {
/>
<span
:class="{
'text-foreground font-normal':
'font-normal text-foreground':
index === breadcrumbs.length - 1,
}"
>{{ item.title }}
@@ -55,7 +55,7 @@ li {
}
li a {
@apply text-muted-foreground bg-accent relative mr-9 flex h-7 items-center py-0 pl-[5px] pr-2 text-[13px];
@apply relative mr-9 flex h-7 items-center bg-accent py-0 pl-[5px] pr-2 text-[13px] text-muted-foreground;
}
li a > span {
@@ -84,7 +84,7 @@ li:last-child a::after {
li a::before,
li a::after {
@apply border-accent absolute top-0 h-0 w-0 border-[.875rem] border-solid content-[''];
@apply absolute top-0 h-0 w-0 border-[.875rem] border-solid border-accent content-[''];
}
li a::before {
@@ -92,7 +92,7 @@ li a::before {
}
li a::after {
@apply border-l-accent left-full border-transparent;
@apply left-full border-transparent border-l-accent;
}
li:not(:last-child) a:hover {

View File

@@ -35,7 +35,7 @@ function handleItemClick(menu: IDropdownMenuItem) {
<template v-for="menu in menus" :key="menu.value">
<DropdownMenuItem
:disabled="menu.disabled"
class="data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground text-foreground/80 mb-1 cursor-pointer"
class="mb-1 cursor-pointer text-foreground/80 data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground"
@click="handleItemClick(menu)"
>
<component :is="menu.icon" v-if="menu.icon" class="mr-2 size-4" />

View File

@@ -34,7 +34,7 @@ function handleItemClick(value: string) {
? 'bg-accent text-accent-foreground'
: ''
"
class="data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground text-foreground/80 mb-1 cursor-pointer"
class="mb-1 cursor-pointer text-foreground/80 data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground"
@click="handleItemClick(menu.value)"
>
<component :is="menu.icon" v-if="menu.icon" class="mr-2 size-4" />

View File

@@ -25,7 +25,7 @@ isFullscreen.value = !!(
class="hover:animate-[shrink_0.3s_ease-in-out]"
@click="toggle"
>
<Minimize v-if="isFullscreen" class="text-foreground size-4" />
<Maximize v-else class="text-foreground size-4" />
<Minimize v-if="isFullscreen" class="size-4 text-foreground" />
<Maximize v-else class="size-4 text-foreground" />
</VbenIconButton>
</template>

View File

@@ -38,7 +38,7 @@ const show = ref(false);
/>
<template v-if="passwordStrength">
<PasswordStrength :password="modelValue" />
<p v-if="slots.strengthText" class="text-muted-foreground mt-1.5 text-xs">
<p v-if="slots.strengthText" class="mt-1.5 text-xs text-muted-foreground">
<slot name="strengthText"> </slot>
</p>
</template>
@@ -47,7 +47,7 @@ const show = ref(false);
'top-3': !!passwordStrength,
'top-1/2 -translate-y-1/2 items-center': !passwordStrength,
}"
class="hover:text-foreground text-foreground/60 absolute inset-y-0 right-0 flex cursor-pointer pr-3 text-lg leading-5"
class="absolute inset-y-0 right-0 flex cursor-pointer pr-3 text-lg leading-5 text-foreground/60 hover:text-foreground"
@click="show = !show"
>
<Eye v-if="show" class="size-4" />

View File

@@ -51,7 +51,7 @@ function checkPasswordStrength(password: string) {
<div class="relative mt-2 flex items-center justify-between">
<template v-for="index in 5" :key="index">
<div
class="dark:bg-input-background bg-heavy relative mr-1 h-1.5 w-1/5 rounded-sm last:mr-0"
class="relative mr-1 h-1.5 w-1/5 rounded-sm bg-heavy last:mr-0 dark:bg-input-background"
>
<span
:style="{

View File

@@ -82,7 +82,7 @@ const logoSrc = computed(() => {
/>
<template v-if="!collapsed">
<slot name="text">
<span class="text-foreground truncate text-nowrap font-semibold">
<span class="truncate text-nowrap font-semibold text-foreground">
{{ text }}
</span>
</slot>

View File

@@ -100,7 +100,7 @@ function handleScroll(event: Event) {
v-if="showShadowTop"
:class="{
'opacity-100': !isAtTop,
'border-border border-t': shadowBorder && !isAtTop,
'border-t border-border': shadowBorder && !isAtTop,
}"
class="scrollbar-top-shadow pointer-events-none absolute top-0 z-10 h-12 w-full opacity-0 transition-opacity duration-300 ease-in-out will-change-[opacity]"
></div>
@@ -109,7 +109,7 @@ function handleScroll(event: Event) {
v-if="showShadowBottom"
:class="{
'opacity-100': !isAtTop && !isAtBottom,
'border-border border-b': shadowBorder && !isAtTop && !isAtBottom,
'border-b border-border': shadowBorder && !isAtTop && !isAtBottom,
}"
class="scrollbar-bottom-shadow pointer-events-none absolute bottom-0 z-10 h-12 w-full opacity-0 transition-opacity duration-300 ease-in-out will-change-[opacity]"
></div>

View File

@@ -45,14 +45,14 @@ function activeClass(tab: string): string[] {
<Tabs v-model="activeTab" :default-value="getDefaultValue">
<TabsList
:style="tabsStyle"
class="bg-accent !outline-heavy relative grid w-full !outline !outline-2"
class="relative grid w-full bg-accent !outline !outline-2 !outline-heavy"
>
<TabsIndicator :style="tabsIndicatorStyle" />
<template v-for="tab in tabs" :key="tab.value">
<TabsTrigger
:value="tab.value"
:class="activeClass(tab.value)"
class="hover:text-primary z-20 inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium disabled:pointer-events-none disabled:opacity-50"
class="z-20 inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium hover:text-primary disabled:pointer-events-none disabled:opacity-50"
>
{{ tab.label }}
</TabsTrigger>

View File

@@ -29,7 +29,7 @@ const forwardedProps = useForwardProps(delegatedProps);
"
>
<div
class="bg-background text-foreground inline-flex h-full w-full items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
class="inline-flex h-full w-full items-center justify-center whitespace-nowrap rounded-md bg-background px-3 py-1 text-sm font-medium text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
>
<slot></slot>
</div>

View File

@@ -69,7 +69,7 @@ function onTransitionEnd() {
<div
:class="
cn(
'z-100 dark:bg-overlay bg-overlay-content absolute left-0 top-0 flex size-full flex-col items-center justify-center transition-all duration-500',
'absolute left-0 top-0 z-100 flex size-full flex-col items-center justify-center bg-overlay-content transition-all duration-500 dark:bg-overlay',
{
'invisible opacity-0': !showSpinner,
},
@@ -83,12 +83,12 @@ function onTransitionEnd() {
<i
v-for="index in 4"
:key="index"
class="bg-primary absolute block size-4 origin-[50%_50%] scale-75 rounded-full opacity-30"
class="absolute block size-4 origin-[50%_50%] scale-75 rounded-full bg-primary opacity-30"
></i>
</span>
</slot>
<div v-if="text" class="text-primary mt-4 text-xs">{{ text }}</div>
<div v-if="text" class="mt-4 text-xs text-primary">{{ text }}</div>
<slot></slot>
</div>
</template>

View File

@@ -63,7 +63,7 @@ function onTransitionEnd() {
<div
:class="
cn(
'flex-center z-100 bg-overlay-content absolute left-0 top-0 size-full backdrop-blur-sm transition-all duration-500',
'flex-center absolute left-0 top-0 z-100 size-full bg-overlay-content backdrop-blur-sm transition-all duration-500',
{
'invisible opacity-0': !showSpinner,
},
@@ -75,7 +75,7 @@ function onTransitionEnd() {
<div
:class="{ paused: !renderSpinner }"
v-if="renderSpinner"
class="loader before:bg-primary/50 after:bg-primary relative size-12 before:absolute before:left-0 before:top-[60px] before:h-[5px] before:w-12 before:rounded-[50%] before:content-[''] after:absolute after:left-0 after:top-0 after:h-full after:w-full after:rounded after:content-['']"
class="loader relative size-12 before:absolute before:left-0 before:top-[60px] before:h-[5px] before:w-12 before:rounded-[50%] before:bg-primary/50 before:content-[''] after:absolute after:left-0 after:top-0 after:h-full after:w-full after:rounded after:bg-primary after:content-['']"
></div>
</div>
</template>

View File

@@ -19,7 +19,7 @@ defineProps<{ triggerClass?: string }>();
<CircleHelp
:class="
cn(
'text-foreground/80 hover:text-foreground inline-flex size-5 cursor-pointer',
'inline-flex size-5 cursor-pointer text-foreground/80 hover:text-foreground',
triggerClass,
)
"

View File

@@ -35,7 +35,7 @@ withDefaults(defineProps<Props>(), {
:class="contentClass"
:side="side"
:style="contentStyle"
class="side-content text-popover-foreground bg-accent rounded-md"
class="side-content rounded-md bg-accent text-popover-foreground"
>
<slot></slot>
</TooltipContent>

View File

@@ -19,7 +19,7 @@ const delegatedProps = computed(() => {
<template>
<AccordionContent
v-bind="delegatedProps"
class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
class="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
>
<div :class="cn('pb-4 pt-0', props.class)">
<slot></slot>

View File

@@ -31,7 +31,7 @@ const delegatedProps = computed(() => {
<slot></slot>
<slot name="icon">
<ChevronDown
class="text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200"
class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"
/>
</slot>
</AccordionTrigger>

View File

@@ -81,9 +81,9 @@ defineExpose({
'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
{
'data-[state=open]:slide-in-from-top-[48%] data-[state=closed]:slide-out-to-top-[48%]':
'data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%]':
!centered,
'data-[state=open]:slide-in-from-top-[98%] data-[state=closed]:slide-out-to-top-[148%]':
'data-[state=closed]:slide-out-to-top-[148%] data-[state=open]:slide-in-from-top-[98%]':
centered,
'top-[10vh]': !centered,
'top-1/2 -translate-y-1/2': centered,

View File

@@ -21,7 +21,7 @@ const forwardedProps = useForwardProps(delegatedProps);
<template>
<AlertDialogDescription
v-bind="forwardedProps"
:class="cn('text-muted-foreground text-sm', props.class)"
:class="cn('text-sm text-muted-foreground', props.class)"
>
<slot></slot>
</AlertDialogDescription>

View File

@@ -4,5 +4,5 @@ import { useScrollLock } from '@vben-core/composables';
useScrollLock();
</script>
<template>
<div class="bg-overlay z-popup inset-0"></div>
<div class="z-popup inset-0 bg-overlay"></div>
</template>

View File

@@ -9,7 +9,7 @@ const props = defineProps<{
<template>
<li
:class="
cn('hover:text-foreground inline-flex items-center gap-1.5', props.class)
cn('inline-flex items-center gap-1.5 hover:text-foreground', props.class)
"
>
<slot></slot>

View File

@@ -14,7 +14,7 @@ const props = withDefaults(defineProps<PrimitiveProps & { class?: any }>(), {
<Primitive
:as="as"
:as-child="asChild"
:class="cn('hover:text-foreground transition-colors', props.class)"
:class="cn('transition-colors hover:text-foreground', props.class)"
>
<slot></slot>
</Primitive>

View File

@@ -10,7 +10,7 @@ const props = defineProps<{
<ol
:class="
cn(
'text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5',
'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5',
props.class,
)
"

View File

@@ -8,7 +8,7 @@ const props = defineProps<{
<template>
<span
:class="cn('text-foreground font-normal', props.class)"
:class="cn('font-normal text-foreground', props.class)"
aria-current="page"
aria-disabled="true"
role="link"

View File

@@ -10,7 +10,7 @@ const props = defineProps<{
<div
:class="
cn(
'bg-card text-card-foreground border-border rounded-xl border',
'rounded-xl border border-border bg-card text-card-foreground',
props.class,
)
"

View File

@@ -7,7 +7,7 @@ const props = defineProps<{
</script>
<template>
<p :class="cn('text-muted-foreground text-sm', props.class)">
<p :class="cn('text-sm text-muted-foreground', props.class)">
<slot></slot>
</p>
</template>

View File

@@ -27,7 +27,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
v-bind="forwarded"
:class="
cn(
'focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground border-border hover:border-primary peer h-4 w-4 shrink-0 rounded-sm border transition focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
'peer h-4 w-4 shrink-0 rounded-sm border border-border transition hover:border-primary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
props.class,
)
"

View File

@@ -32,7 +32,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
v-bind="forwarded"
:class="
cn(
'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
props.class,
)
"

View File

@@ -29,7 +29,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
v-bind="forwarded"
:class="
cn(
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border z-popup min-w-32 overflow-hidden rounded-md border p-1 shadow-md',
'z-popup min-w-32 overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
props.class,
)
"

View File

@@ -26,7 +26,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
v-bind="forwarded"
:class="
cn(
'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
inset && 'pl-8',
props.class,
)

View File

@@ -23,7 +23,7 @@ const delegatedProps = computed(() => {
v-bind="delegatedProps"
:class="
cn(
'text-foreground px-2 py-1.5 text-sm font-semibold',
'px-2 py-1.5 text-sm font-semibold text-foreground',
inset && 'pl-8',
props.class,
)

View File

@@ -32,7 +32,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
v-bind="forwarded"
:class="
cn(
'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
props.class,
)
"

View File

@@ -19,6 +19,6 @@ const delegatedProps = computed(() => {
<template>
<ContextMenuSeparator
v-bind="delegatedProps"
:class="cn('bg-border -mx-1 my-1 h-px', props.class)"
:class="cn('-mx-1 my-1 h-px bg-border', props.class)"
/>
</template>

View File

@@ -9,7 +9,7 @@ const props = defineProps<{
<template>
<span
:class="
cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)
cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)
"
>
<slot></slot>

View File

@@ -27,7 +27,14 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
v-bind="forwarded"
:class="
cn(
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg',
'z-50 min-w-32 overflow-hidden rounded-md',
'border border-border',
'bg-popover p-1 text-popover-foreground shadow-lg',
'data-[state=open]:animate-in data-[state=closed]:animate-out',
'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2',
'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
props.class,
)
"

View File

@@ -29,7 +29,7 @@ const forwardedProps = useForwardProps(delegatedProps);
v-bind="forwardedProps"
:class="
cn(
'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
inset && 'pl-8',
props.class,
)

View File

@@ -102,7 +102,7 @@ defineExpose({
v-bind="forwarded"
:class="
cn(
'z-popup bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 w-full p-6 shadow-lg outline-none sm:rounded-xl',
'z-popup w-full bg-background p-6 shadow-lg outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-xl',
{
'data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%]':
animationType === 'slide',
@@ -118,7 +118,7 @@ defineExpose({
:disabled="closeDisabled"
:class="
cn(
'data-[state=open]:bg-accent data-[state=open]:text-muted-foreground hover:bg-accent hover:text-accent-foreground text-foreground/80 flex-center absolute right-3 top-3 h-6 w-6 rounded-full px-1 text-lg opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none',
'flex-center absolute right-3 top-3 h-6 w-6 rounded-full px-1 text-lg text-foreground/80 opacity-70 transition-opacity hover:bg-accent hover:text-accent-foreground hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground',
props.closeClass,
)
"

View File

@@ -21,7 +21,7 @@ const forwardedProps = useForwardProps(delegatedProps);
<template>
<DialogDescription
v-bind="forwardedProps"
:class="cn('text-muted-foreground text-sm', props.class)"
:class="cn('text-sm text-muted-foreground', props.class)"
>
<slot></slot>
</DialogDescription>

View File

@@ -7,5 +7,5 @@ useScrollLock();
const id = inject('DISMISSABLE_MODAL_ID');
</script>
<template>
<div :data-dismissable-modal="id" class="bg-overlay z-popup inset-0"></div>
<div :data-dismissable-modal="id" class="z-popup inset-0 bg-overlay"></div>
</template>

View File

@@ -33,12 +33,12 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
<DialogPortal>
<DialogOverlay
:style="{ zIndex }"
class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 border-border absolute inset-0 grid place-items-center overflow-y-auto border bg-black/80"
class="absolute inset-0 grid place-items-center overflow-y-auto border border-border bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
>
<DialogContent
:class="
cn(
'border-border bg-background relative z-50 my-8 grid w-full max-w-lg gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
'relative z-50 my-8 grid w-full max-w-lg gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
props.class,
)
"
@@ -60,7 +60,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
<slot></slot>
<DialogClose
class="hover:bg-secondary absolute right-4 top-4 rounded-md p-0.5 transition-colors"
class="absolute right-4 top-4 rounded-md p-0.5 transition-colors hover:bg-secondary"
>
<X class="h-4 w-4" />
<span class="sr-only">Close</span>

View File

@@ -32,7 +32,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
v-bind="forwarded"
:class="
cn(
'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
props.class,
)
"

View File

@@ -37,7 +37,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
v-bind="forwarded"
:class="
cn(
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border z-popup min-w-32 overflow-hidden rounded-md border p-1 shadow-md',
'z-popup min-w-32 overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
props.class,
)
"

View File

@@ -25,7 +25,7 @@ const forwardedProps = useForwardProps(delegatedProps);
v-bind="forwardedProps"
:class="
cn(
'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
inset && 'pl-8',
props.class,
)

View File

@@ -33,7 +33,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
v-bind="forwarded"
:class="
cn(
'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
props.class,
)
"

View File

@@ -23,6 +23,6 @@ const delegatedProps = computed(() => {
<template>
<DropdownMenuSeparator
v-bind="delegatedProps"
:class="cn('bg-border -mx-1 my-1 h-px', props.class)"
:class="cn('-mx-1 my-1 h-px bg-border', props.class)"
/>
</template>

View File

@@ -27,7 +27,14 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
v-bind="forwarded"
:class="
cn(
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg',
'z-50 min-w-32 overflow-hidden rounded-md',
'border border-border',
'bg-popover p-1 text-popover-foreground shadow-lg',
'data-[state=open]:animate-in data-[state=closed]:animate-out',
'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2',
'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
props.class,
)
"

View File

@@ -24,7 +24,7 @@ const forwardedProps = useForwardProps(delegatedProps);
v-bind="forwardedProps"
:class="
cn(
'focus:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
props.class,
)
"

View File

@@ -13,7 +13,7 @@ const { formDescriptionId } = useFormField();
<template>
<p
:id="formDescriptionId"
:class="cn('text-muted-foreground text-sm', props.class)"
:class="cn('text-sm text-muted-foreground', props.class)"
>
<slot></slot>
</p>

Some files were not shown because too many files have changed in this diff Show More