This commit is contained in:
dap 2024-09-14 07:59:52 +08:00
commit af72811013
43 changed files with 665 additions and 248 deletions

View File

@ -42,7 +42,7 @@
"@vben/types": "workspace:*",
"@vben/utils": "workspace:*",
"@vueuse/core": "^11.0.3",
"ant-design-vue": "^4.2.3",
"ant-design-vue": "^4.2.4",
"cropperjs": "^1.6.2",
"crypto-js": "^4.2.0",
"dayjs": "^1.11.13",
@ -52,7 +52,7 @@
"pinia": "2.2.2",
"tinymce": "^7.3.0",
"vue": "^3.5.4",
"vue-router": "^4.4.4"
"vue-router": "^4.4.5"
},
"devDependencies": {
"@types/crypto-js": "^4.2.2",

View File

@ -42,10 +42,10 @@
"@vben/utils": "workspace:*",
"@vueuse/core": "^11.0.3",
"dayjs": "^1.11.13",
"element-plus": "^2.8.2",
"element-plus": "^2.8.3",
"pinia": "2.2.2",
"vue": "^3.5.4",
"vue-router": "^4.4.4"
"vue-router": "^4.4.5"
},
"devDependencies": {
"unplugin-element-plus": "^0.8.0"

View File

@ -44,6 +44,6 @@
"naive-ui": "^2.39.0",
"pinia": "2.2.2",
"vue": "^3.5.4",
"vue-router": "^4.4.4"
"vue-router": "^4.4.5"
}
}

View File

@ -51,7 +51,13 @@
"vitepress",
"vnode",
"vueuse",
"yxxx"
"yxxx",
"echarts",
"sortablejs",
"etag",
"naiveui",
"uicons",
"iconoir"
],
"ignorePaths": [
"**/node_modules/**",

View File

@ -23,8 +23,8 @@
}
},
"dependencies": {
"@commitlint/cli": "^19.4.1",
"@commitlint/config-conventional": "^19.4.1",
"@commitlint/cli": "^19.5.0",
"@commitlint/config-conventional": "^19.5.0",
"@vben/node-utils": "workspace:*",
"commitlint-plugin-function-rules": "^4.0.0",
"cz-git": "^1.9.4",

View File

@ -27,8 +27,8 @@
}
},
"dependencies": {
"eslint-config-turbo": "^2.1.1",
"eslint-plugin-command": "^0.2.4",
"eslint-config-turbo": "^2.1.2",
"eslint-plugin-command": "^0.2.5",
"eslint-plugin-import-x": "^4.2.1"
},
"devDependencies": {
@ -39,7 +39,7 @@
"eslint": "^9.10.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-eslint-comments": "^3.2.0",
"eslint-plugin-jsdoc": "^50.2.2",
"eslint-plugin-jsdoc": "^50.2.3",
"eslint-plugin-jsonc": "^2.16.0",
"eslint-plugin-n": "^17.10.2",
"eslint-plugin-no-only-tests": "^3.3.0",
@ -47,7 +47,7 @@
"eslint-plugin-prettier": "^5.2.1",
"eslint-plugin-regexp": "^2.6.0",
"eslint-plugin-unicorn": "^55.0.0",
"eslint-plugin-unused-imports": "^4.1.3",
"eslint-plugin-unused-imports": "^4.1.4",
"eslint-plugin-vitest": "^0.5.4",
"eslint-plugin-vue": "^9.28.0",
"globals": "^15.9.0",

View File

@ -46,7 +46,7 @@
"tailwindcss": "^3.4.3"
},
"dependencies": {
"@iconify/json": "^2.2.246",
"@iconify/json": "^2.2.247",
"@iconify/tailwind": "^1.1.3",
"@tailwindcss/nesting": "0.0.0-insiders.565cd3e",
"@tailwindcss/typography": "^0.5.15",

View File

@ -20,6 +20,6 @@
],
"dependencies": {
"@vben/types": "workspace:*",
"vite": "^5.4.3"
"vite": "^5.4.5"
}
}

View File

@ -27,7 +27,7 @@
}
},
"dependencies": {
"@intlify/unplugin-vue-i18n": "^4.0.0",
"@intlify/unplugin-vue-i18n": "^5.0.0",
"@jspm/generator": "^2.3.0",
"archiver": "^7.0.1",
"cheerio": "1.0.0",
@ -37,7 +37,7 @@
"resolve.exports": "^2.0.2",
"vite-plugin-lib-inject-css": "^2.1.1",
"vite-plugin-pwa": "^0.20.5",
"vite-plugin-vue-devtools": "^7.4.4"
"vite-plugin-vue-devtools": "^7.4.5"
},
"devDependencies": {
"@types/archiver": "^6.0.2",
@ -50,7 +50,7 @@
"rollup": "^4.21.3",
"rollup-plugin-visualizer": "^5.12.0",
"sass": "^1.78.0",
"vite": "^5.4.3",
"vite": "^5.4.5",
"vite-plugin-compression": "^0.5.1",
"vite-plugin-dts": "4.2.1",
"vite-plugin-html": "^3.2.2"

View File

@ -86,10 +86,10 @@
"lint-staged": "^15.2.10",
"rimraf": "^6.0.1",
"tailwindcss": "^3.4.11",
"turbo": "^2.1.1",
"turbo": "^2.1.2",
"typescript": "^5.6.2",
"unbuild": "^2.0.0",
"vite": "^5.4.3",
"vite": "^5.4.5",
"vitest": "^2.1.0",
"vue": "^3.5.4",
"vue-tsc": "^2.1.6"

View File

@ -37,10 +37,10 @@
}
body {
@apply !pointer-events-auto;
min-height: 100vh;
/* pointer-events: auto !important; */
/* overflow: overlay; */
/* -webkit-font-smoothing: antialiased; */

View File

@ -50,3 +50,22 @@ export function getElementVisibleRect(
width: Math.max(0, right - left),
};
}
export function getScrollbarWidth() {
const scrollDiv = document.createElement('div');
scrollDiv.style.visibility = 'hidden';
scrollDiv.style.overflow = 'scroll';
scrollDiv.style.position = 'absolute';
scrollDiv.style.top = '-9999px';
document.body.append(scrollDiv);
const innerDiv = document.createElement('div');
scrollDiv.append(innerDiv);
const scrollbarWidth = scrollDiv.offsetWidth - innerDiv.offsetWidth;
scrollDiv.remove();
return scrollbarWidth;
}

View File

@ -39,6 +39,6 @@
},
"dependencies": {
"vue": "^3.5.4",
"vue-router": "^4.4.4"
"vue-router": "^4.4.5"
}
}

View File

@ -2,6 +2,7 @@ export * from './use-content-style';
export * from './use-is-mobile';
export * from './use-namespace';
export * from './use-priority-value';
export * from './use-scroll-lock';
export * from './use-simple-locale';
export * from './use-sortable';
export {

View File

@ -0,0 +1,48 @@
import { getScrollbarWidth } from '@vben-core/shared/utils';
import {
useScrollLock as _useScrollLock,
tryOnBeforeMount,
tryOnBeforeUnmount,
} from '@vueuse/core';
export const SCROLL_FIXED_CLASS = `_scroll__fixed_`;
export function useScrollLock() {
const isLocked = _useScrollLock(document.body);
const scrollbarWidth = getScrollbarWidth();
tryOnBeforeMount(() => {
document.body.style.paddingRight = `${scrollbarWidth}px`;
const layoutFixedNodes = document.querySelectorAll<HTMLElement>(
`.${SCROLL_FIXED_CLASS}`,
);
const nodes = [...layoutFixedNodes];
if (nodes.length > 0) {
nodes.forEach((node) => {
node.dataset.transition = node.style.transition;
node.style.transition = 'none';
node.style.paddingRight = `${scrollbarWidth}px`;
});
}
isLocked.value = true;
});
tryOnBeforeUnmount(() => {
isLocked.value = false;
const layoutFixedNodes = document.querySelectorAll<HTMLElement>(
`.${SCROLL_FIXED_CLASS}`,
);
const nodes = [...layoutFixedNodes];
if (nodes.length > 0) {
nodes.forEach((node) => {
node.style.paddingRight = '';
requestAnimationFrame(() => {
node.style.transition = node.dataset.transition || '';
});
});
}
document.body.style.paddingRight = '';
});
}

View File

@ -4,6 +4,7 @@ import type { VbenLayoutProps } from './vben-layout';
import type { CSSProperties } from 'vue';
import { computed, ref, watch } from 'vue';
import { SCROLL_FIXED_CLASS } from '@vben-core/composables';
import { Menu } from '@vben-core/icons';
import { VbenIconButton } from '@vben-core/shadcn-ui';
@ -478,9 +479,12 @@ function handleHeaderToggle() {
class="flex flex-1 flex-col overflow-hidden transition-all duration-300 ease-in"
>
<div
:class="{
'shadow-[0_16px_24px_hsl(var(--background))]': scrollY > 20,
}"
:class="[
{
'shadow-[0_16px_24px_hsl(var(--background))]': scrollY > 20,
},
SCROLL_FIXED_CLASS,
]"
:style="headerWrapperStyle"
class="overflow-hidden transition-all duration-200"
>

View File

@ -39,6 +39,7 @@ export class DrawerApi {
isOpen: false,
loading: false,
modal: true,
openAutoFocus: false,
showCancelButton: true,
showConfirmButton: true,
title: '',

View File

@ -52,6 +52,10 @@ export interface DrawerProps {
* @default true
*/
modal?: boolean;
/**
*
*/
openAutoFocus?: boolean;
/**
*
* @default true

View File

@ -51,6 +51,7 @@ const {
footer: showFooter,
loading: showLoading,
modal,
openAutoFocus,
showCancelButton,
showConfirmButton,
title,
@ -87,10 +88,21 @@ function pointerDownOutside(e: Event) {
e.preventDefault();
}
}
function handerOpenAutoFocus(e: Event) {
if (!openAutoFocus.value) {
e?.preventDefault();
}
}
function handleFocusOutside(e: Event) {
e.preventDefault();
e.stopPropagation();
}
</script>
<template>
<Sheet
:modal="modal"
:modal="false"
:open="state?.isOpen"
@update:open="() => drawerApi?.close()"
>
@ -100,8 +112,13 @@ function pointerDownOutside(e: Event) {
'!w-full': isMobile,
})
"
:modal="modal"
:open="state?.isOpen"
@close-auto-focus="handleFocusOutside"
@escape-key-down="escapeKeyDown"
@focus-outside="handleFocusOutside"
@interact-outside="interactOutside"
@open-auto-focus="handerOpenAutoFocus"
@pointer-down-outside="pointerDownOutside"
>
<SheetHeader

View File

@ -95,7 +95,7 @@ async function checkProps(api: ExtendedDrawerApi, attrs: Record<string, any>) {
const stateKeys = new Set(Object.keys(state));
for (const attr of Object.keys(attrs)) {
if (stateKeys.has(attr)) {
if (stateKeys.has(attr) && !['class'].includes(attr)) {
// connectedComponent存在时不要传入Drawer的props会造成复杂度提升如果你需要修改Drawer的props请使用 useVbenDrawer 或者api
console.warn(
`[Vben Drawer]: When 'connectedComponent' exists, do not set props or slots '${attr}', which will increase complexity. If you need to modify the props of Drawer, please use useVbenDrawer or api.`,

View File

@ -123,6 +123,7 @@ function handleFullscreen() {
function interactOutside(e: Event) {
if (!closeOnClickModal.value) {
e.preventDefault();
e.stopPropagation();
}
}
function escapeKeyDown(e: KeyboardEvent) {
@ -143,12 +144,18 @@ function pointerDownOutside(e: Event) {
const isDismissableModal = !!target?.dataset.dismissableModal;
if (!closeOnClickModal.value || !isDismissableModal) {
e.preventDefault();
e.stopPropagation();
}
}
function handleFocusOutside(e: Event) {
e.preventDefault();
e.stopPropagation();
}
</script>
<template>
<Dialog
:modal="modal"
:modal="false"
:open="state?.isOpen"
@update:open="() => modalApi?.close()"
>
@ -166,9 +173,13 @@ function pointerDownOutside(e: Event) {
},
)
"
:modal="modal"
:open="state?.isOpen"
:show-close="closable"
close-class="top-3"
@close-auto-focus="handleFocusOutside"
@escape-key-down="escapeKeyDown"
@focus-outside="handleFocusOutside"
@interact-outside="interactOutside"
@open-auto-focus="handerOpenAutoFocus"
@pointer-down-outside="pointerDownOutside"

View File

@ -107,7 +107,7 @@ async function checkProps(api: ExtendedModalApi, attrs: Record<string, any>) {
const stateKeys = new Set(Object.keys(state));
for (const attr of Object.keys(attrs)) {
if (stateKeys.has(attr)) {
if (stateKeys.has(attr) && !['class'].includes(attr)) {
// connectedComponent存在时不要传入Modal的props会造成复杂度提升如果你需要修改Modal的props请使用 useModal 或者api
console.warn(
`[Vben Modal]: When 'connectedComponent' exists, do not set props or slots '${attr}', which will increase complexity. If you need to modify the props of Modal, please use useVbenModal or api.`,

View File

@ -7,6 +7,7 @@ export default defineBuildConfig({
{
builder: 'mkdist',
input: './src',
pattern: ['**/*'],
},
{

View File

@ -41,6 +41,7 @@
},
"dependencies": {
"@radix-icons/vue": "^1.0.0",
"@vben-core/composables": "workspace:*",
"@vben-core/icons": "workspace:*",
"@vben-core/shared": "workspace:*",
"@vben-core/typings": "workspace:*",

View File

@ -9,16 +9,19 @@ import {
DialogContent,
type DialogContentEmits,
type DialogContentProps,
DialogOverlay,
DialogPortal,
useForwardPropsEmits,
} from 'radix-vue';
import DialogOverlay from './DialogOverlay.vue';
const props = withDefaults(
defineProps<
{
class?: any;
closeClass?: any;
modal?: boolean;
open?: boolean;
showClose?: boolean;
} & DialogContentProps
>(),
@ -27,7 +30,13 @@ const props = withDefaults(
const emits = defineEmits<{ close: [] } & DialogContentEmits>();
const delegatedProps = computed(() => {
const { class: _, showClose: __, ...delegated } = props;
const {
class: _,
modal: _modal,
open: _open,
showClose: __,
...delegated
} = props;
return delegated;
});
@ -43,11 +52,7 @@ defineExpose({
<template>
<DialogPortal>
<DialogOverlay
class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-overlay fixed inset-0 z-[1000]"
data-dismissable-modal="true"
@click="() => emits('close')"
/>
<DialogOverlay v-if="open && modal" @click="() => emits('close')" />
<DialogContent
ref="contentRef"
v-bind="forwarded"

View File

@ -0,0 +1,11 @@
<script setup lang="ts">
import { useScrollLock } from '@vben-core/composables';
useScrollLock();
</script>
<template>
<div
class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-overlay fixed inset-0 z-[1000]"
data-dismissable-modal="true"
></div>
</template>

View File

@ -7,15 +7,17 @@ import {
DialogContent,
type DialogContentEmits,
type DialogContentProps,
DialogOverlay,
DialogPortal,
useForwardPropsEmits,
} from 'radix-vue';
import { type SheetVariants, sheetVariants } from './sheet';
import SheetOverlay from './SheetOverlay.vue';
interface SheetContentProps extends DialogContentProps {
class?: any;
modal?: boolean;
open?: boolean;
side?: SheetVariants['side'];
}
@ -28,7 +30,13 @@ const props = defineProps<SheetContentProps>();
const emits = defineEmits<DialogContentEmits>();
const delegatedProps = computed(() => {
const { class: _, side: _side, ...delegated } = props;
const {
class: _,
modal: _modal,
open: _open,
side: _side,
...delegated
} = props;
return delegated;
});
@ -38,10 +46,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
<template>
<DialogPortal>
<DialogOverlay
class="bg-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[1000]"
data-dismissable-modal="true"
/>
<SheetOverlay v-if="open && modal" />
<DialogContent
:class="cn(sheetVariants({ side }), 'z-[1000]', props.class)"
v-bind="{ ...forwarded, ...$attrs }"

View File

@ -0,0 +1,11 @@
<script setup lang="ts">
import { useScrollLock } from '@vben-core/composables';
useScrollLock();
</script>
<template>
<div
class="bg-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[1000]"
data-dismissable-modal="true"
></div>
</template>

View File

@ -41,7 +41,7 @@
"vue": "^3.5.4",
"vue-codemirror6": "^1.3.4",
"vue-json-pretty": "^2.4.0",
"vue-router": "^4.4.4"
"vue-router": "^4.4.5"
},
"devDependencies": {
"@types/qrcode": "^1.5.5"

View File

@ -26,7 +26,7 @@
"@vben/types": "workspace:*",
"@vben/utils": "workspace:*",
"vue": "^3.5.4",
"vue-router": "^4.4.4",
"vue-router": "^4.4.5",
"watermark-js-plus": "^1.5.6"
}
}

View File

@ -37,6 +37,6 @@
"@vben/utils": "workspace:*",
"@vueuse/core": "^11.0.3",
"vue": "^3.5.4",
"vue-router": "^4.4.4"
"vue-router": "^4.4.5"
}
}

View File

@ -22,7 +22,7 @@ defineProps<{ showIcon?: boolean; theme?: string }>();
const route = useRoute();
const tabbarStore = useTabbarStore();
const { toggleMaximize } = useContentMaximize();
const { contentIsMaximize, toggleMaximize } = useContentMaximize();
const { refreshTab, unpinTab } = useTabs();
const {
@ -73,7 +73,7 @@ if (!preferences.tabbar.persist) {
<TabsToolMore v-if="preferences.tabbar.showMore" :menus="menus" />
<TabsToolScreen
v-if="preferences.tabbar.showMaximize"
:screen="preferences.sidebar.hidden"
:screen="contentIsMaximize"
@change="toggleMaximize"
@update:screen="toggleMaximize"
/>

View File

@ -20,9 +20,9 @@
}
},
"dependencies": {
"@intlify/core-base": "^9.14.0",
"@intlify/core-base": "^10.0.1",
"@vben-core/composables": "workspace:*",
"vue": "^3.5.4",
"vue-i18n": "^9.14.0"
"vue-i18n": "^10.0.1"
}
}

View File

@ -23,8 +23,8 @@
"@vben-core/shared": "workspace:*",
"@vben-core/typings": "workspace:*",
"pinia": "2.2.2",
"pinia-plugin-persistedstate": "^3.2.3",
"pinia-plugin-persistedstate": "^4.0.1",
"vue": "^3.5.4",
"vue-router": "^4.4.4"
"vue-router": "^4.4.5"
}
}

View File

@ -65,7 +65,7 @@ export const useAccessStore = defineStore('core-access', {
},
persist: {
// 持久化
paths: ['accessToken', 'refreshToken', 'accessCodes'],
pick: ['accessToken', 'refreshToken', 'accessCodes'],
},
state: (): AccessState => ({
accessCodes: [],

View File

@ -24,7 +24,7 @@ export const useLockStore = defineStore('core-lock', {
},
},
persist: {
paths: ['isLockScreen', 'lockScreenPassword'],
pick: ['isLockScreen', 'lockScreenPassword'],
},
state: (): AppState => ({
isLockScreen: false,

View File

@ -465,7 +465,7 @@ export const useTabbarStore = defineStore('core-tabbar', {
persist: [
// tabs不需要保存在localStorage
{
paths: ['tabs'],
pick: ['tabs'],
storage: sessionStorage,
},
],

View File

@ -22,6 +22,6 @@
"dependencies": {
"@vben-core/typings": "workspace:*",
"vue": "^3.5.4",
"vue-router": "^4.4.4"
"vue-router": "^4.4.5"
}
}

View File

@ -24,6 +24,6 @@
"dependencies": {
"@vben-core/shared": "workspace:*",
"@vben-core/typings": "workspace:*",
"vue-router": "^4.4.4"
"vue-router": "^4.4.5"
}
}

View File

@ -42,10 +42,10 @@
"@vben/types": "workspace:*",
"@vben/utils": "workspace:*",
"@vueuse/core": "^11.0.3",
"ant-design-vue": "^4.2.3",
"ant-design-vue": "^4.2.4",
"dayjs": "^1.11.13",
"pinia": "2.2.2",
"vue": "^3.5.4",
"vue-router": "^4.4.4"
"vue-router": "^4.4.5"
}
}

View File

@ -110,6 +110,7 @@ const routes: RouteRecordRaw[] = [
path: '/demos/features/icons',
component: () => import('#/views/demos/features/icons/index.vue'),
meta: {
icon: 'lucide:annoyed',
title: $t('page.demos.features.icons'),
},
},
@ -119,6 +120,7 @@ const routes: RouteRecordRaw[] = [
component: () =>
import('#/views/demos/features/watermark/index.vue'),
meta: {
icon: 'lucide:tags',
title: $t('page.demos.features.watermark'),
},
},
@ -171,6 +173,7 @@ const routes: RouteRecordRaw[] = [
component: () =>
import('#/views/demos/features/full-screen/index.vue'),
meta: {
icon: 'lucide:fullscreen',
title: $t('page.demos.features.fullScreen.title'),
},
},
@ -180,6 +183,7 @@ const routes: RouteRecordRaw[] = [
component: () =>
import('#/views/demos/features/clipboard/index.vue'),
meta: {
icon: 'lucide:copy',
title: $t('page.demos.features.clipboard'),
},
},
@ -189,6 +193,7 @@ const routes: RouteRecordRaw[] = [
component: () =>
import('#/views/demos/features/vue-query/index.vue'),
meta: {
icon: 'lucide:git-pull-request-arrow',
title: 'Tanstack Query',
},
},

File diff suppressed because it is too large Load Diff

View File

@ -23,30 +23,32 @@ export async function run(options: RunOptions) {
return (pkg?.packageJson as Record<string, any>)?.scripts?.[command];
});
const selectPkg = await select<any, string>({
message: `Select the app you need to run [${command}]:`,
options: selectPkgs.map((item) => ({
label: item?.packageJson.name,
value: item?.packageJson.name,
})),
});
let selectPkg: string | symbol;
if (selectPkgs.length > 1) {
selectPkg = await select<any, string>({
message: `Select the app you need to run [${command}]:`,
options: selectPkgs.map((item) => ({
label: item?.packageJson.name,
value: item?.packageJson.name,
})),
});
if (isCancel(selectPkg) || !selectPkg) {
cancel('👋 Has cancelled');
process.exit(0);
if (isCancel(selectPkg) || !selectPkg) {
cancel('👋 Has cancelled');
process.exit(0);
}
} else {
selectPkg = selectPkgs[0]?.packageJson?.name ?? '';
}
if (!selectPkg) {
console.error('No app found');
process.exit(1);
}
execaCommand(`pnpm --filter=${selectPkg} run ${command}`, {
stdio: 'inherit',
});
// const filters = [];
// for (const app of selectApps) {
// filters.push(`--filter=${app}`);
// }
// $.verbose = true;
// execaCommand(`turbo run ${command} ${filters}`, {
// stdio: 'inherit',
// });
}
/**