@lumal/core 0.0.1-beta

package/dist/theme.js

@@ -0,0 +1,187 @@
+import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./LumalThemeSettingsPanel-BFkZzwEW.js";
+import { shallowRef as s } from "vue";
+//#region src/theme/tokens.ts
+var c = {
+	colorPrimary: "#1677ff",
+	compact: !1,
+	mode: "light"
+};
+function l(e) {
+	let t = e.mode === "dark";
+	return {
+		"--lumal-color-bg": t ? "#0a0a0a" : "#f5f7fa",
+		"--lumal-color-bg-elevated": t ? "#1d1e1f" : "#ffffff",
+		"--lumal-color-bg-page": t ? "#0a0a0a" : "#f5f7fa",
+		"--lumal-color-bg-surface": t ? "#141414" : "#ffffff",
+		"--lumal-color-border": t ? "#414243" : "#dcdfe6",
+		"--lumal-color-border-light": t ? "#363637" : "#e4e7ed",
+		"--lumal-color-danger": "#f56c6c",
+		"--lumal-color-primary": e.colorPrimary,
+		"--lumal-color-success": "#67c23a",
+		"--lumal-color-text": t ? "#e5eaf3" : "#303133",
+		"--lumal-color-text-muted": t ? "#8d9095" : "#909399",
+		"--lumal-color-text-primary": t ? "#e5eaf3" : "#303133",
+		"--lumal-color-text-regular": t ? "#cfd3dc" : "#606266",
+		"--lumal-color-warning": "#e6a23c",
+		"--lumal-density-padding": e.compact ? "12px" : "16px",
+		"--lumal-easing-standard": "cubic-bezier(0.2, 0, 0, 1)",
+		"--lumal-motion-duration-base": "220ms",
+		"--lumal-motion-duration-fast": "160ms",
+		"--lumal-motion-duration-slow": "280ms",
+		"--lumal-page-gutter": e.compact ? "16px" : "20px",
+		"--lumal-radius-base": "8px",
+		"--lumal-radius-large": "12px",
+		"--lumal-radius-small": "6px",
+		"--lumal-shadow-base": t ? "0 8px 24px rgb(0 0 0 / 32%)" : "0 8px 24px rgb(15 23 42 / 8%)",
+		"--lumal-shadow-light": t ? "0 2px 8px rgb(0 0 0 / 24%)" : "0 2px 8px rgb(15 23 42 / 6%)",
+		"--lumal-spacing-lg": "24px",
+		"--lumal-spacing-md": "16px",
+		"--lumal-spacing-sm": "12px",
+		"--lumal-spacing-xl": "32px",
+		"--lumal-spacing-xs": "8px",
+		"--lumal-z-context-menu": "2100",
+		"--lumal-z-dialog": "2050",
+		"--lumal-z-drawer": "2040",
+		"--lumal-z-dropdown": "2000",
+		"--lumal-z-header": "100",
+		"--lumal-z-scrim": "1800",
+		"--lumal-z-sidebar": "90"
+	};
+}
+//#endregion
+//#region src/theme/dom.ts
+function u(e, t) {
+	let n = l(t);
+	e.dataset.lumalTheme = t.mode, e.dataset.lumalCompact = String(t.compact), Object.entries(n).forEach(([t, n]) => {
+		e.style.setProperty(t, n);
+	});
+}
+function d(t, n = {}) {
+	let r = e(t), i = a(r.theme.mode, n), o = n.document?.documentElement;
+	return o ? (o.classList.toggle("dark", i === "dark"), u(o, {
+		colorPrimary: r.theme.colorPrimary,
+		compact: !1,
+		mode: i
+	}), p(o, r, i), m(o, r), i) : i;
+}
+function f(t, n, r = {}) {
+	if (e(t).theme.mode !== "system" || !r.matchMedia) return () => void 0;
+	let i = r.matchMedia("(prefers-color-scheme: dark)"), a = () => n(i.matches ? "dark" : "light");
+	return i.addEventListener("change", a), () => i.removeEventListener("change", a);
+}
+function p(e, t, n) {
+	let r = t.theme.colorPrimary;
+	e.style.setProperty("--el-color-primary", r), e.style.setProperty("--el-color-primary-light-3", _(r, n === "dark" ? "#000000" : "#ffffff", .3)), e.style.setProperty("--el-color-primary-light-5", _(r, n === "dark" ? "#000000" : "#ffffff", .5)), e.style.setProperty("--el-color-primary-light-7", _(r, n === "dark" ? "#000000" : "#ffffff", .7)), e.style.setProperty("--el-color-primary-light-9", _(r, n === "dark" ? "#000000" : "#ffffff", .9)), e.style.setProperty("--el-color-primary-dark-2", _(r, n === "dark" ? "#ffffff" : "#000000", .2)), e.style.setProperty("--lumal-radius-scale", String(t.theme.radiusScale)), e.style.setProperty("--el-border-radius-base", `${Math.round(8 * t.theme.radiusScale)}px`), e.style.setProperty("--el-border-radius-small", `${Math.round(6 * t.theme.radiusScale)}px`);
+}
+function m(e, t) {
+	let n = `${t.theme.fontSize}px`;
+	e.style.setProperty("--lumal-sidebar-width", `${t.sidebar.width}px`), e.style.setProperty("--lumal-header-height", "50px"), e.style.setProperty("--lumal-tabbar-height", "40px"), e.style.setProperty("--lumal-page-gutter", "20px"), e.style.setProperty("--lumal-font-size-base", n), e.style.setProperty("--el-font-size-large", `${t.theme.fontSize + 4}px`), e.style.setProperty("--el-font-size-medium", `${t.theme.fontSize + 2}px`), e.style.setProperty("--el-font-size-base", n), e.style.setProperty("--el-font-size-small", `${Math.max(10, t.theme.fontSize - 1)}px`), e.style.setProperty("--el-font-size-extra-small", `${Math.max(10, t.theme.fontSize - 2)}px`), e.style.fontSize = n;
+}
+function h(e) {
+	let t = e.trim().replace("#", "");
+	return t.length === 3 ? `#${t.split("").map((e) => `${e}${e}`).join("")}`.toLowerCase() : /^[\da-f]{6}$/i.test(t) ? `#${t}`.toLowerCase() : "#1677ff";
+}
+function g(e) {
+	let t = h(e);
+	return [
+		Number.parseInt(t.slice(1, 3), 16),
+		Number.parseInt(t.slice(3, 5), 16),
+		Number.parseInt(t.slice(5, 7), 16)
+	];
+}
+function _(e, t, n) {
+	let [r, i, a] = g(e), [o, s, c] = g(t), l = (e, t) => Math.round(e * (1 - n) + t * n).toString(16).padStart(2, "0");
+	return `#${l(r, o)}${l(i, s)}${l(a, c)}`;
+}
+//#endregion
+//#region src/theme/preferences-store.ts
+function v(e) {
+	return e || {
+		document: typeof document > "u" ? void 0 : document,
+		matchMedia: typeof window > "u" || typeof window.matchMedia != "function" ? void 0 : window.matchMedia.bind(window)
+	};
+}
+function y(t) {
+	let n = null;
+	try {
+		return n = t.storage.getItem(t.storageKey), n === null ? void 0 : e(JSON.parse(n), t.defaults);
+	} catch {
+		try {
+			t.storage.removeItem(t.storageKey);
+		} catch {}
+		return;
+	}
+}
+function b(e, t) {
+	try {
+		e.storage.setItem(e.storageKey, JSON.stringify(t));
+	} catch {}
+}
+function x(n) {
+	let r = v(n.runtime), o = y(n) ?? i(n.defaults), c = s(o), l = s(a(o.theme.mode, r)), u = n.autoApply ?? !0, p = () => void 0;
+	function m() {
+		return p(), l.value = d(c.value, r), p = f(c.value, (e) => {
+			l.value = e, d(c.value, r);
+		}, r), l.value;
+	}
+	function h(e = {}) {
+		c.value = t(c.value, e, n.defaults), b(n, c.value), u ? m() : l.value = a(c.value.theme.mode, r);
+	}
+	function g() {
+		c.value = i(n.defaults), b(n, c.value), u ? m() : l.value = a(c.value.theme.mode, r);
+	}
+	function _() {
+		return e(c.value, n.defaults);
+	}
+	function x() {
+		p();
+	}
+	return u && m(), {
+		apply: m,
+		dispose: x,
+		exportCurrent: _,
+		patch: h,
+		reset: g,
+		resolvedThemeMode: l,
+		state: c
+	};
+}
+//#endregion
+//#region src/theme/store.ts
+function S(e = {}) {
+	return {
+		...c,
+		...e
+	};
+}
+function C(e = {}) {
+	let t = S(e);
+	return {
+		get state() {
+			return { ...t };
+		},
+		reset() {
+			t = S(e);
+		},
+		setColorPrimary(e) {
+			t = {
+				...t,
+				colorPrimary: e
+			};
+		},
+		setCompact(e) {
+			t = {
+				...t,
+				compact: e
+			};
+		},
+		setMode(e) {
+			t = {
+				...t,
+				mode: e
+			};
+		}
+	};
+}
+//#endregion
+export { o as LumalThemeSettingsPanel, d as applyThemePreferences, u as applyThemeToElement, i as createDefaultPreferences, x as createPreferencesStore, C as createThemeStore, c as defaultThemeState, t as mergePreferences, e as normalizePreferences, r as resolvePreferenceAvailability, a as resolveThemeMode, l as resolveThemeTokens, n as themeColorPresets, f as watchSystemTheme };

package/dist/utils.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("vue");function t(t){return(0,e.isProxy)(t)?(0,e.toRaw)(t):t}function n(e,r=new WeakMap){let i=t(e);if(typeof i!=`object`||!i)return i;if(i instanceof Date)return new Date(i.getTime());if(i instanceof RegExp)return new RegExp(i);if(r.has(i))return r.get(i);if(Array.isArray(i)){let e=[];return r.set(i,e),i.forEach((t,i)=>{e[i]=n(t,r)}),e}let a={};return r.set(i,a),Object.entries(i).forEach(([e,t])=>{a[e]=n(t,r)}),a}function r(e){let r=t(e);if(typeof structuredClone==`function`)try{return structuredClone(r)}catch(e){if(!(e instanceof DOMException)||e.name!==`DataCloneError`)throw e}return n(r)}function i(e){return e.map(e=>({...e,children:e.children?.length?i(e.children):void 0}))}function a(e,t){let n=e.trim().replace(/^#/,``);return/^[\da-f]{6}$/i.test(n)?`rgba(${Number.parseInt(n.slice(0,2),16)}, ${Number.parseInt(n.slice(2,4),16)}, ${Number.parseInt(n.slice(4,6),16)}, ${Math.min(1,Math.max(0,t))})`:e}async function o(e){try{return JSON.parse(await e.text()),!1}catch{return!0}}function s(e){return!e||e.length<=7?e:`${e.slice(0,3)}${`*`.repeat(Math.min(4,e.length-7))}${e.slice(-4)}`}function c(e,t){let n=URL.createObjectURL(e),r=document.createElement(`a`);r.href=n,r.download=t,document.body.appendChild(r),r.click(),document.body.removeChild(r),URL.revokeObjectURL(n)}function l(e,t,n=`application/octet-stream`){c(new Blob([e],{type:`${n};charset=utf-8`}),t)}function u(e){return Object.fromEntries(Object.entries(e).filter(([,e])=>e!==void 0))}function d(...e){return`/${e.filter(Boolean).map(e=>String(e).replace(/^\/+|\/+$/g,``)).filter(Boolean).join(`/`)}`}function f(e){let t=[];return Object.entries(e).forEach(([e,n])=>{if(n!=null){if(Array.isArray(n)){n.forEach(n=>{n!=null&&t.push(`${encodeURIComponent(e)}=${encodeURIComponent(String(n))}`)});return}if(typeof n==`object`){Object.entries(n).forEach(([n,r])=>{r!=null&&t.push(`${encodeURIComponent(`${e}[${n}]`)}=${encodeURIComponent(String(r))}`)});return}t.push(`${encodeURIComponent(e)}=${encodeURIComponent(String(n))}`)}}),t.join(`&`)}function p(e,t){return e?`${e}:${t}`:t}function m(e,t=``){return{get(n){let r=e.getItem(p(t,n));if(r!==null)try{return JSON.parse(r)}catch{throw Error(`无法解析存储键 "${p(t,n)}" 的值`)}},set(n,r){e.setItem(p(t,n),JSON.stringify(r))},remove(n){e.removeItem(p(t,n))}}}function h(e,t){let n=e;return n.install=function(n){let r=t??e.name??e.__name;r&&n.component(r,e)},n}exports.cloneDeep=r,exports.cloneTree=i,exports.createStorage=m,exports.downloadBlob=c,exports.downloadFile=l,exports.isBlobResponse=o,exports.joinPath=d,exports.maskPhone=s,exports.omitUndefined=u,exports.serializeQuery=f,exports.withAlpha=a,exports.withInstall=h;

package/dist/utils.js

@@ -0,0 +1,130 @@
+import { isProxy as e, toRaw as t } from "vue";
+//#region src/utils/clone.ts
+function n(n) {
+	return e(n) ? t(n) : n;
+}
+function r(e, t = /* @__PURE__ */ new WeakMap()) {
+	let i = n(e);
+	if (typeof i != "object" || !i) return i;
+	if (i instanceof Date) return new Date(i.getTime());
+	if (i instanceof RegExp) return new RegExp(i);
+	if (t.has(i)) return t.get(i);
+	if (Array.isArray(i)) {
+		let e = [];
+		return t.set(i, e), i.forEach((n, i) => {
+			e[i] = r(n, t);
+		}), e;
+	}
+	let a = {};
+	return t.set(i, a), Object.entries(i).forEach(([e, n]) => {
+		a[e] = r(n, t);
+	}), a;
+}
+function i(e) {
+	let t = n(e);
+	if (typeof structuredClone == "function") try {
+		return structuredClone(t);
+	} catch (e) {
+		if (!(e instanceof DOMException) || e.name !== "DataCloneError") throw e;
+	}
+	return r(t);
+}
+function a(e) {
+	return e.map((e) => ({
+		...e,
+		children: e.children?.length ? a(e.children) : void 0
+	}));
+}
+//#endregion
+//#region src/utils/color.ts
+function o(e, t) {
+	let n = e.trim().replace(/^#/, "");
+	return /^[\da-f]{6}$/i.test(n) ? `rgba(${Number.parseInt(n.slice(0, 2), 16)}, ${Number.parseInt(n.slice(2, 4), 16)}, ${Number.parseInt(n.slice(4, 6), 16)}, ${Math.min(1, Math.max(0, t))})` : e;
+}
+//#endregion
+//#region src/utils/display.ts
+async function s(e) {
+	try {
+		return JSON.parse(await e.text()), !1;
+	} catch {
+		return !0;
+	}
+}
+function c(e) {
+	return !e || e.length <= 7 ? e : `${e.slice(0, 3)}${"*".repeat(Math.min(4, e.length - 7))}${e.slice(-4)}`;
+}
+//#endregion
+//#region src/utils/download.ts
+function l(e, t) {
+	let n = URL.createObjectURL(e), r = document.createElement("a");
+	r.href = n, r.download = t, document.body.appendChild(r), r.click(), document.body.removeChild(r), URL.revokeObjectURL(n);
+}
+function u(e, t, n = "application/octet-stream") {
+	l(new Blob([e], { type: `${n};charset=utf-8` }), t);
+}
+//#endregion
+//#region src/utils/object.ts
+function d(e) {
+	return Object.fromEntries(Object.entries(e).filter(([, e]) => e !== void 0));
+}
+//#endregion
+//#region src/utils/path.ts
+function f(...e) {
+	return `/${e.filter(Boolean).map((e) => String(e).replace(/^\/+|\/+$/g, "")).filter(Boolean).join("/")}`;
+}
+//#endregion
+//#region src/utils/query.ts
+function p(e) {
+	let t = [];
+	return Object.entries(e).forEach(([e, n]) => {
+		if (n != null) {
+			if (Array.isArray(n)) {
+				n.forEach((n) => {
+					n != null && t.push(`${encodeURIComponent(e)}=${encodeURIComponent(String(n))}`);
+				});
+				return;
+			}
+			if (typeof n == "object") {
+				Object.entries(n).forEach(([n, r]) => {
+					r != null && t.push(`${encodeURIComponent(`${e}[${n}]`)}=${encodeURIComponent(String(r))}`);
+				});
+				return;
+			}
+			t.push(`${encodeURIComponent(e)}=${encodeURIComponent(String(n))}`);
+		}
+	}), t.join("&");
+}
+//#endregion
+//#region src/utils/storage.ts
+function m(e, t) {
+	return e ? `${e}:${t}` : t;
+}
+function h(e, t = "") {
+	return {
+		get(n) {
+			let r = e.getItem(m(t, n));
+			if (r !== null) try {
+				return JSON.parse(r);
+			} catch {
+				throw Error(`无法解析存储键 "${m(t, n)}" 的值`);
+			}
+		},
+		set(n, r) {
+			e.setItem(m(t, n), JSON.stringify(r));
+		},
+		remove(n) {
+			e.removeItem(m(t, n));
+		}
+	};
+}
+//#endregion
+//#region src/utils/with-install.ts
+function g(e, t) {
+	let n = e;
+	return n.install = function(n) {
+		let r = t ?? e.name ?? e.__name;
+		r && n.component(r, e);
+	}, n;
+}
+//#endregion
+export { i as cloneDeep, a as cloneTree, h as createStorage, l as downloadBlob, u as downloadFile, s as isBlobResponse, f as joinPath, c as maskPhone, d as omitUndefined, p as serializeQuery, o as withAlpha, g as withInstall };

package/package.json

@@ -0,0 +1,124 @@
+{
+  "name": "@lumal/core",
+  "type": "module",
+  "version": "0.0.1-beta",
+  "description": "Lumal lightweight Vue admin core components and services.",
+  "license": "MIT",
+  "keywords": [
+    "lumal",
+    "vue",
+    "admin",
+    "element-plus",
+    "schema-form",
+    "crud-table"
+  ],
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/src/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./components": {
+      "types": "./dist/src/exports/components.d.ts",
+      "import": "./dist/components.js",
+      "require": "./dist/components.cjs"
+    },
+    "./auth": {
+      "types": "./dist/src/auth/index.d.ts",
+      "import": "./dist/auth.js",
+      "require": "./dist/auth.cjs"
+    },
+    "./composables": {
+      "types": "./dist/src/composables/index.d.ts",
+      "import": "./dist/composables.js",
+      "require": "./dist/composables.cjs"
+    },
+    "./dictionary": {
+      "types": "./dist/src/dictionary/index.d.ts",
+      "import": "./dist/dictionary.js",
+      "require": "./dist/dictionary.cjs"
+    },
+    "./directives": {
+      "types": "./dist/src/directives/index.d.ts",
+      "import": "./dist/directives.js",
+      "require": "./dist/directives.cjs"
+    },
+    "./layout": {
+      "types": "./dist/src/layout/index.d.ts",
+      "import": "./dist/layout.js",
+      "require": "./dist/layout.cjs"
+    },
+    "./permission": {
+      "types": "./dist/src/permission/index.d.ts",
+      "import": "./dist/permission.js",
+      "require": "./dist/permission.cjs"
+    },
+    "./request": {
+      "types": "./dist/src/request/index.d.ts",
+      "import": "./dist/request.js",
+      "require": "./dist/request.cjs"
+    },
+    "./router": {
+      "types": "./dist/src/router/index.d.ts",
+      "import": "./dist/router.js",
+      "require": "./dist/router.cjs"
+    },
+    "./theme": {
+      "types": "./dist/src/theme/index.d.ts",
+      "import": "./dist/theme.js",
+      "require": "./dist/theme.cjs"
+    },
+    "./utils": {
+      "types": "./dist/src/utils/index.d.ts",
+      "import": "./dist/utils.js",
+      "require": "./dist/utils.cjs"
+    },
+    "./style.css": "./dist/core.css",
+    "./theme-chalk/index.scss": "./theme-chalk/index.scss"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/src/index.d.ts",
+  "files": [
+    "README.md",
+    "dist",
+    "theme-chalk"
+  ],
+  "peerDependencies": {
+    "element-plus": "^2.11.0",
+    "pinia": "^3.0.3",
+    "vue": "^3.5.0",
+    "vue-router": "^4.5.0"
+  },
+  "peerDependenciesMeta": {
+    "element-plus": {
+      "optional": true
+    },
+    "pinia": {
+      "optional": true
+    },
+    "vue-router": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@lumal/icons": "0.0.1-beta",
+    "@lumal/icons-vue": "0.0.1-beta",
+    "sortablejs": "^1.15.7"
+  },
+  "devDependencies": {
+    "@types/sortablejs": "^1.15.9"
+  },
+  "scripts": {
+    "build": "vite build --config vite.config.ts && vue-tsc -p tsconfig.json --emitDeclarationOnly --outDir dist && node ../../scripts/clean-package-dist.mjs dist",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.json",
+    "test": "vitest run --config ../../vitest.config.ts tests"
+  }
+}

package/theme-chalk/index.scss

@@ -0,0 +1,70 @@
+@use "element-plus/theme-chalk/src/base.scss";
+@use "element-plus/theme-chalk/src/aside.scss";
+@use "element-plus/theme-chalk/src/button.scss";
+@use "element-plus/theme-chalk/src/checkbox.scss";
+@use "element-plus/theme-chalk/src/checkbox-group.scss";
+@use "element-plus/theme-chalk/src/col.scss";
+@use "element-plus/theme-chalk/src/container.scss";
+@use "element-plus/theme-chalk/src/date-picker-panel.scss";
+@use "element-plus/theme-chalk/src/dialog.scss";
+@use "element-plus/theme-chalk/src/divider.scss";
+@use "element-plus/theme-chalk/src/drawer.scss";
+@use "element-plus/theme-chalk/src/form.scss";
+@use "element-plus/theme-chalk/src/form-item.scss";
+@use "element-plus/theme-chalk/src/header.scss";
+@use "element-plus/theme-chalk/src/icon.scss";
+@use "element-plus/theme-chalk/src/input.scss";
+@use "element-plus/theme-chalk/src/input-number.scss";
+@use "element-plus/theme-chalk/src/loading.scss";
+@use "element-plus/theme-chalk/src/main.scss";
+@use "element-plus/theme-chalk/src/menu.scss";
+@use "element-plus/theme-chalk/src/menu-item.scss";
+@use "element-plus/theme-chalk/src/message.scss";
+@use "element-plus/theme-chalk/src/message-box.scss";
+@use "element-plus/theme-chalk/src/option.scss";
+@use "element-plus/theme-chalk/src/overlay.scss";
+@use "element-plus/theme-chalk/src/pagination.scss";
+@use "element-plus/theme-chalk/src/popper.scss";
+@use "element-plus/theme-chalk/src/radio.scss";
+@use "element-plus/theme-chalk/src/radio-group.scss";
+@use "element-plus/theme-chalk/src/row.scss";
+@use "element-plus/theme-chalk/src/scrollbar.scss";
+@use "element-plus/theme-chalk/src/select.scss";
+@use "element-plus/theme-chalk/src/select-dropdown.scss";
+@use "element-plus/theme-chalk/src/slider.scss";
+@use "element-plus/theme-chalk/src/sub-menu.scss";
+@use "element-plus/theme-chalk/src/switch.scss";
+@use "element-plus/theme-chalk/src/tab-pane.scss";
+@use "element-plus/theme-chalk/src/table.scss";
+@use "element-plus/theme-chalk/src/table-column.scss";
+@use "element-plus/theme-chalk/src/tabs.scss";
+@use "element-plus/theme-chalk/src/tag.scss";
+@use "element-plus/theme-chalk/src/tooltip.scss";
+@use "element-plus/theme-chalk/src/tree.scss";
+@use "element-plus/theme-chalk/src/tree-select.scss";
+@use "element-plus/theme-chalk/src/upload.scss";
+
+html {
+  box-sizing: border-box;
+  min-width: 320px;
+  min-height: 100%;
+  background: var(--el-bg-color-page);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+body {
+  min-width: 320px;
+  min-height: 100vh;
+  min-height: 100dvh;
+  margin: 0;
+  background: var(--el-bg-color-page);
+}
+
+.lumal-app {
+  min-height: 100vh;
+}