fix: fixed svg icon load failure and enabled global injection bem.scss

This commit is contained in:
vince 2024-07-17 22:30:18 +08:00
parent 8b6d3a72e8
commit cb161eab89
48 changed files with 1626 additions and 1576 deletions

View File

@ -38,7 +38,7 @@
"@nestjs/schematics": "^10.1.2",
"@types/express": "^4.17.21",
"@types/mockjs": "^1.0.10",
"@types/node": "^20.14.10",
"@types/node": "^20.14.11",
"nodemon": "^3.1.4",
"ts-node": "^10.9.2",
"typescript": "^5.5.3"

View File

@ -45,7 +45,7 @@
"ant-design-vue": "^4.2.3",
"dayjs": "^1.11.11",
"pinia": "2.1.7",
"vue": "^3.4.31",
"vue": "^3.4.32",
"vue-router": "^4.4.0"
}
}

View File

@ -27,7 +27,7 @@
}
},
"dependencies": {
"eslint-config-turbo": "^2.0.6",
"eslint-config-turbo": "^2.0.7",
"eslint-plugin-command": "^0.2.3"
},
"devDependencies": {
@ -44,7 +44,7 @@
"eslint-plugin-n": "^17.9.0",
"eslint-plugin-no-only-tests": "^3.1.0",
"eslint-plugin-perfectionist": "^2.11.0",
"eslint-plugin-prettier": "^5.1.3",
"eslint-plugin-prettier": "^5.2.1",
"eslint-plugin-regexp": "^2.6.0",
"eslint-plugin-unicorn": "^54.0.0",
"eslint-plugin-unused-imports": "^4.0.0",

View File

@ -43,6 +43,6 @@
"stylelint-config-recommended-vue": "^1.5.0",
"stylelint-config-standard": "^36.0.1",
"stylelint-order": "^6.0.4",
"stylelint-prettier": "^5.0.1"
"stylelint-prettier": "^5.0.2"
}
}

View File

@ -22,7 +22,7 @@
"types": "./dist/index.d.ts",
"exports": {
".": {
"types": "./dist/index.d.ts",
"types": "./src/index.ts",
"import": "./dist/index.mjs",
"default": "./dist/index.mjs"
}

View File

@ -58,7 +58,7 @@
"postcss-antd-fixes": "^0.2.0",
"postcss-import": "^16.1.0",
"postcss-preset-env": "^9.6.0",
"tailwindcss": "^3.4.5",
"tailwindcss": "^3.4.6",
"tailwindcss-animate": "^1.0.7"
},
"devDependencies": {

View File

@ -22,7 +22,7 @@
"types": "./dist/index.d.ts",
"exports": {
".": {
"types": "./dist/index.d.ts",
"types": "./src/index.ts",
"default": "./dist/index.mjs"
}
},

View File

@ -2,6 +2,10 @@ import type { UserConfig } from 'vite';
import type { DefineApplicationOptions } from '../typing';
import { relative } from 'node:path';
import { findMonorepoRoot } from '@vben/node-utils';
import { defineConfig, loadEnv, mergeConfig } from 'vite';
import { loadApplicationPlugins } from '../plugins';
@ -33,6 +37,8 @@ function defineApplicationConfig(userConfigPromise: DefineApplicationOptions) {
...application,
});
const { injectGlobalScss = true } = application;
const applicationConfig: UserConfig = {
build: {
rollupOptions: {
@ -44,6 +50,7 @@ function defineApplicationConfig(userConfigPromise: DefineApplicationOptions) {
},
target: 'es2015',
},
css: createCssOptions(injectGlobalScss),
esbuild: {
drop: isBuild
? [
@ -71,4 +78,24 @@ function defineApplicationConfig(userConfigPromise: DefineApplicationOptions) {
});
}
function createCssOptions(injectGlobalScss = true) {
const root = findMonorepoRoot();
return {
preprocessorOptions: injectGlobalScss
? {
scss: {
additionalData: (content: string, filepath: string) => {
const relativePath = relative(root, filepath);
// apps下的包注入全局样式
if (relativePath.startsWith('apps/')) {
return `@import "@vben/styles/global";\n${content}`;
}
return content;
},
},
}
: {},
};
}
export { defineApplicationConfig };

View File

@ -67,6 +67,8 @@ interface ApplicationPluginOptions extends CommonPluginOptions {
importmapOptions?: ImportmapPluginOptions;
/** 是否注入app loading */
injectAppLoading?: boolean;
/** 是否注入全局scss */
injectGlobalScss?: boolean;
/** 是否注入版权信息 */
license?: boolean;
/** 是否开启pwa */

View File

@ -53,7 +53,7 @@
"@changesets/cli": "^2.27.7",
"@ls-lint/ls-lint": "^2.2.3",
"@types/jsdom": "^21.1.7",
"@types/node": "^20.14.10",
"@types/node": "^20.14.11",
"@vben/commitlint-config": "workspace:*",
"@vben/eslint-config": "workspace:*",
"@vben/lint-staged-config": "workspace:*",
@ -65,12 +65,12 @@
"@vben/vsh": "workspace:*",
"@vue/test-utils": "^2.4.6",
"cross-env": "^7.0.3",
"cspell": "^8.10.4",
"cspell": "^8.11.0",
"husky": "^9.0.11",
"is-ci": "^3.0.1",
"jsdom": "^24.1.0",
"rimraf": "^6.0.1",
"turbo": "^2.0.6",
"turbo": "^2.0.7",
"typescript": "^5.5.3",
"unbuild": "^2.0.0",
"vite": "^5.3.4",
@ -87,7 +87,7 @@
"@ctrl/tinycolor": "^4.1.0",
"clsx": "^2.1.1",
"eslint": "^8.57.0",
"vue": "^3.4.31",
"vue": "^3.4.32",
"zx": "^7.2.3"
},
"neverBuiltDependencies": [

View File

@ -32,6 +32,6 @@
"@vben-core/toolkit": "workspace:*",
"@vben-core/typings": "workspace:*",
"@vueuse/core": "^10.11.0",
"vue": "^3.4.31"
"vue": "^3.4.32"
}
}

View File

@ -42,7 +42,7 @@
"@vben-core/typings": "workspace:*",
"pinia": "2.1.7",
"pinia-plugin-persistedstate": "^3.2.1",
"vue": "^3.4.31",
"vue": "^3.4.32",
"vue-router": "^4.4.0"
}
}

View File

@ -41,7 +41,7 @@
"@vueuse/core": "^10.11.0",
"radix-vue": "^1.9.1",
"sortablejs": "^1.15.2",
"vue": "^3.4.31"
"vue": "^3.4.32"
},
"devDependencies": {
"@types/sortablejs": "^1.15.8"

View File

@ -43,7 +43,7 @@
"dependencies": {
"@intlify/core-base": "^9.13.1",
"@vben-core/typings": "workspace:*",
"vue": "^3.4.31",
"vue": "^3.4.32",
"vue-i18n": "^9.13.1"
}
}

View File

@ -37,8 +37,5 @@
"default": "./dist/index.mjs"
}
}
},
"dependencies": {
"modern-normalize": "^2.0.0"
}
}

View File

@ -0,0 +1,236 @@
.slide-up-enter-active,
.slide-up-leave-active {
transition: 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);
}
.slide-up-move {
transition: transform 0.3s;
}
.slide-up-enter-from,
.slide-up-leave-to {
opacity: 0;
transform: translateY(-15px);
}
.slide-down-enter-active,
.slide-down-leave-active {
transition: 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);
}
.slide-down-move {
transition: transform 0.3s;
}
.slide-down-enter-from,
.slide-down-leave-to {
opacity: 0;
transform: translateY(15px);
}
.slide-left-enter-active,
.slide-left-leave-active {
transition: 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);
}
.slide-left-move {
transition: transform 0.3s;
}
.slide-left-enter-from,
.slide-left-leave-to {
opacity: 0;
transform: translate(-15px);
}
.slide-right-enter-active,
.slide-right-leave-active {
transition: 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);
}
.slide-right-move {
transition: transform 0.3s;
}
.slide-right-enter-from,
.slide-right-leave-to {
opacity: 0;
transform: translate(15px);
}
.fade-transition-enter-active,
.fade-transition-leave-active {
transition: opacity 0.2s ease-in-out;
}
.fade-transition-enter-from,
.fade-transition-leave-to {
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.2s ease-in-out;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
.fade-slide-leave-active,
.fade-slide-enter-active {
transition: all 0.3s;
}
.fade-slide-enter-from {
opacity: 0;
transform: translate(-30px);
}
.fade-slide-leave-to {
opacity: 0;
transform: translate(30px);
}
.fade-down-enter-active,
.fade-down-leave-active {
transition:
opacity 0.25s,
transform 0.3s;
}
.fade-down-enter-from {
opacity: 0;
transform: translateY(-10%);
}
.fade-down-leave-to {
opacity: 0;
transform: translateY(10%);
}
.fade-scale-leave-active,
.fade-scale-enter-active {
transition: all 0.28s;
}
.fade-scale-enter-from {
opacity: 0;
transform: scale(1.2);
}
.fade-scale-leave-to {
opacity: 0;
transform: scale(0.8);
}
.fade-up-enter-active,
.fade-up-leave-active {
transition:
opacity 0.2s,
transform 0.25s;
}
.fade-up-enter-from {
opacity: 0;
transform: translateY(10%);
}
.fade-up-leave-to {
opacity: 0;
transform: translateY(-10%);
}
@keyframes fade-slide {
0% {
opacity: 0;
transform: translate(-30px);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: translate(30px);
}
}
@keyframes fade {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fade-up {
0% {
opacity: 0;
transform: translateY(10%);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(-10%);
}
}
@keyframes fade-down {
0% {
opacity: 0;
transform: translateY(-10%);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(10%);
}
}
.fade-slow {
animation: fade 3s infinite;
}
.fade-slide-slow {
animation: fade-slide 3s infinite;
}
.fade-up-slow {
animation: fade-up 3s infinite;
}
.fade-down-slow {
animation: fade-down 3s infinite;
}
.collapse-transition {
transition:
0.2s height ease-in-out,
0.2s padding-top ease-in-out,
0.2s padding-bottom ease-in-out;
}
.collapse-transition-leave-active,
.collapse-transition-enter-active {
transition:
0.2s max-height ease-in-out,
0.2s padding-top ease-in-out,
0.2s margin-top ease-in-out;
}

View File

@ -1,5 +1,5 @@
import './scss/index.scss';
import './css/global.css';
import './css/transition.css';
import './css/nprogress.css';
import './design-tokens';

View File

@ -1,3 +0,0 @@
/** css 样式重置 */
@import 'modern-normalize/modern-normalize.css';
@import './transition';

View File

@ -1,81 +0,0 @@
@keyframes fade-slide {
0% {
opacity: 0;
transform: translateX(-30px);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateX(30px);
}
}
@keyframes fade {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fade-up {
0% {
opacity: 0;
transform: translateY(10%);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(-10%);
}
}
@keyframes fade-down {
0% {
opacity: 0;
transform: translateY(-10%);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(10%);
}
}
.fade-slow {
animation: fade 3s infinite;
}
// .fade-slide-fast {
// animation: fade-slide 0.3s infinite;
// }
.fade-slide-slow {
animation: fade-slide 3s infinite;
}
.fade-up-slow {
animation: fade-up 3s infinite;
}
.fade-down-slow {
animation: fade-down 3s infinite;
}

View File

@ -1,14 +0,0 @@
.collapse-transition {
transition:
0.2s height ease-in-out,
0.2s padding-top ease-in-out,
0.2s padding-bottom ease-in-out;
}
.collapse-transition-leave-active,
.collapse-transition-enter-active {
transition:
0.2s max-height ease-in-out,
0.2s padding-top ease-in-out,
0.2s margin-top ease-in-out;
}

View File

@ -1,97 +0,0 @@
.fade-transition {
&-enter-active,
&-leave-active {
transition: opacity 0.2s ease-in-out;
}
&-enter-from,
&-leave-to {
opacity: 0;
}
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.2s ease-in-out;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
/* fade-slide */
.fade-slide-leave-active,
.fade-slide-enter-active {
transition: all 0.3s;
}
.fade-slide-enter-from {
opacity: 0;
transform: translateX(-30px);
}
.fade-slide-leave-to {
opacity: 0;
transform: translateX(30px);
}
// ///////////////////////////////////////////////
// Fade down
// ///////////////////////////////////////////////
// Speed: 1x
.fade-down-enter-active,
.fade-down-leave-active {
transition:
opacity 0.25s,
transform 0.3s;
}
.fade-down-enter-from {
opacity: 0;
transform: translateY(-10%);
}
.fade-down-leave-to {
opacity: 0;
transform: translateY(10%);
}
// fade-scale
.fade-scale-leave-active,
.fade-scale-enter-active {
transition: all 0.28s;
}
.fade-scale-enter-from {
opacity: 0;
transform: scale(1.2);
}
.fade-scale-leave-to {
opacity: 0;
transform: scale(0.8);
}
// ///////////////////////////////////////////////
// Fade Top
// ///////////////////////////////////////////////
// Speed: 1x
.fade-up-enter-active,
.fade-up-leave-active {
transition:
opacity 0.2s,
transform 0.25s;
}
.fade-up-enter-from {
opacity: 0;
transform: translateY(10%);
}
.fade-up-leave-to {
opacity: 0;
transform: translateY(-10%);
}

View File

@ -1,4 +0,0 @@
@import './slide';
@import './fade';
@import './animation';
@import './collapse';

View File

@ -1,10 +0,0 @@
@mixin transition() {
&-enter-active,
&-leave-active {
transition: 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);
}
&-move {
transition: transform 0.3s;
}
}

View File

@ -1,41 +0,0 @@
@use 'mixin.scss' as *;
.slide-up {
@include transition;
&-enter-from,
&-leave-to {
opacity: 0;
transform: translateY(-15px);
}
}
.slide-down {
@include transition;
&-enter-from,
&-leave-to {
opacity: 0;
transform: translateY(15px);
}
}
.slide-left {
@include transition;
&-enter-from,
&-leave-to {
opacity: 0;
transform: translateX(-15px);
}
}
.slide-right {
@include transition;
&-enter-from,
&-leave-to {
opacity: 0;
transform: translateX(15px);
}
}

View File

@ -36,6 +36,6 @@
},
"dependencies": {
"@iconify/vue": "^4.1.2",
"vue": "^3.4.31"
"vue": "^3.4.32"
}
}

View File

@ -37,7 +37,7 @@
},
"dependencies": {
"@ctrl/tinycolor": "^4.1.0",
"@vue/shared": "^3.4.31",
"@vue/shared": "^3.4.32",
"clsx": "^2.1.1",
"defu": "^6.1.4",
"lodash.clonedeep": "^4.5.0",

View File

@ -39,7 +39,7 @@
}
},
"dependencies": {
"vue": "^3.4.31",
"vue": "^3.4.32",
"vue-router": "^4.4.0"
}
}

View File

@ -43,6 +43,6 @@
"@vben-core/toolkit": "workspace:*",
"@vben-core/typings": "workspace:*",
"@vueuse/core": "^10.11.0",
"vue": "^3.4.31"
"vue": "^3.4.32"
}
}

View File

@ -43,6 +43,6 @@
"@vben-core/toolkit": "workspace:*",
"@vben-core/typings": "workspace:*",
"@vueuse/core": "^10.11.0",
"vue": "^3.4.31"
"vue": "^3.4.32"
}
}

View File

@ -50,6 +50,6 @@
"class-variance-authority": "^0.7.0",
"lucide-vue-next": "^0.408.0",
"radix-vue": "^1.9.1",
"vue": "^3.4.31"
"vue": "^3.4.32"
}
}

View File

@ -41,6 +41,6 @@
"@vben-core/icons": "workspace:*",
"@vben-core/shadcn-ui": "workspace:*",
"@vben-core/typings": "workspace:*",
"vue": "^3.4.31"
"vue": "^3.4.32"
}
}

View File

@ -42,6 +42,6 @@
"@vben-core/stores": "workspace:*",
"@vben-core/toolkit": "workspace:*",
"@vben-core/typings": "workspace:*",
"vue": "^3.4.31"
"vue": "^3.4.32"
}
}

View File

@ -40,6 +40,6 @@
"@vben-core/preferences": "workspace:*",
"@vueuse/core": "^10.11.0",
"echarts": "^5.5.1",
"vue": "^3.4.31"
"vue": "^3.4.32"
}
}

View File

@ -45,7 +45,7 @@
"@vben/types": "workspace:*",
"@vueuse/integrations": "^10.11.0",
"qrcode": "^1.5.3",
"vue": "^3.4.31",
"vue": "^3.4.32",
"vue-router": "^4.4.0"
},
"devDependencies": {

View File

@ -50,7 +50,7 @@
"@vben-core/toolkit": "workspace:*",
"@vben-core/typings": "workspace:*",
"@vueuse/core": "^10.11.0",
"vue": "^3.4.31",
"vue": "^3.4.32",
"vue-router": "^4.4.0"
}
}

View File

@ -121,7 +121,7 @@ function toggleTheme(event: MouseEvent) {
</VbenButton>
</template>
<style lang="scss" scoped>
<style scoped>
.theme-toggle {
&__moon {
& > circle {
@ -130,32 +130,32 @@ function toggleTheme(event: MouseEvent) {
}
&__sun {
fill: hsl(var(--foreground) / 80%);
stroke: none;
@apply fill-foreground/80 stroke-none;
transition: transform 1.6s cubic-bezier(0.25, 0, 0.2, 1);
transform-origin: center center;
&:hover > svg > & {
fill: hsl(var(--foreground));
@apply fill-foreground/80;
}
}
&__sun-beams {
stroke: hsl(var(--foreground) / 80%);
stroke-width: 2px;
@apply stroke-foreground/80 stroke-[2px];
transition:
transform 1.6s cubic-bezier(0.5, 1.5, 0.75, 1.25),
opacity 0.6s cubic-bezier(0.25, 0, 0.3, 1);
transform-origin: center center;
&:hover > svg > & {
stroke: hsl(var(--foreground));
@apply stroke-foreground;
}
}
&.is-light {
.theme-toggle__sun {
transform: scale(0.5);
@apply scale-50;
}
.theme-toggle__sun-beams {
@ -171,14 +171,14 @@ function toggleTheme(event: MouseEvent) {
}
.theme-toggle__sun-beams {
opacity: 0;
@apply opacity-0;
}
}
&:hover > svg {
.theme-toggle__sun,
.theme-toggle__moon {
fill: hsl(var(--foreground));
@apply fill-foreground;
}
}
}

View File

@ -3,6 +3,14 @@ import { defineBuildConfig } from 'unbuild';
export default defineBuildConfig({
clean: true,
declaration: true,
entries: ['src/index'],
entries: [
{
builder: 'mkdist',
format: 'esm',
input: './src',
loaders: ['js'],
pattern: ['**/*.ts', '**/*.svg'],
},
],
externals: ['vue'],
});

View File

@ -0,0 +1,23 @@
import { defineBuildConfig } from 'unbuild';
export default defineBuildConfig({
clean: true,
declaration: true,
entries: [
{
builder: 'mkdist',
format: 'esm',
input: './src',
loaders: ['js'],
pattern: ['**/*.ts', '**/*.scss'],
},
{
builder: 'mkdist',
format: 'esm',
input: './src',
loaders: ['sass'],
pattern: ['**/*.css'],
},
],
externals: ['vue'],
});

View File

@ -11,7 +11,7 @@
"license": "MIT",
"type": "module",
"scripts": {
"build": "pnpm vite build",
"build": "pnpm unbuild",
"prepublishOnly": "npm run build"
},
"files": [
@ -26,13 +26,12 @@
"default": "./dist/index.mjs"
},
"./antd": {
"types": "./src/antd/index.ts",
"development": "./src/antd/index.ts",
"default": "./dist/antd.mjs"
"development": "./src/antd/index.css",
"default": "./dist/antd/index.css"
},
"./bem": {
"development": "./src/bem/bem.scss",
"default": "./dist/bem.scss"
"./global": {
"development": "./src/global/index.scss",
"default": "./dist/global/index.scss"
}
},
"publishConfig": {

View File

@ -1 +0,0 @@
import './base.css';

View File

@ -1,18 +0,0 @@
import { defineConfig } from '@vben/vite-config';
export default defineConfig(async () => {
return {
vite: {
build: {
lib: {
entry: {
antd: 'src/antd/index.ts',
index: 'src/index.ts',
},
fileName: (_format, name) => `${name}.mjs`,
},
},
publicDir: 'src/bem',
},
};
});

View File

@ -40,7 +40,7 @@
},
"dependencies": {
"@vben-core/typings": "workspace:*",
"vue": "^3.4.31",
"vue": "^3.4.32",
"vue-router": "^4.4.0"
}
}

View File

@ -0,0 +1,7 @@
import { defineBuildConfig } from 'unbuild';
export default defineBuildConfig({
clean: true,
declaration: true,
entries: ['src/index'],
});

File diff suppressed because it is too large Load Diff

View File

@ -26,6 +26,6 @@
"cac": "^6.7.14",
"circular-dependency-scanner": "^2.2.2",
"depcheck": "^1.4.7",
"publint": "^0.2.8"
"publint": "^0.2.9"
}
}

View File

@ -9,6 +9,6 @@
},
"devDependencies": {
"vitepress": "^1.3.1",
"vue": "^3.4.31"
"vue": "^3.4.32"
}
}