hermes-web-ui 0.2.2 → 0.2.3

package/dist/server/index.js

@@ -54,13 +54,24 @@ const filesystem_1 = require("./routes/filesystem");
 const config_2 = require("./routes/config");
 const weixin_1 = require("./routes/weixin");
 const hermesCli = __importStar(require("./services/hermes-cli"));
+const auth_1 = require("./services/auth");
+const app = new koa_1.default();
 const { restartGateway, startGateway, startGatewayBackground, getVersion } = hermesCli;
+let server = null;
+let isShuttingDown = false;
+// 👉 如果你有子进程，一定要存
+let gatewayPid = null;
 async function bootstrap() {
     await (0, promises_1.mkdir)(config_1.config.uploadDir, { recursive: true });
     await (0, promises_1.mkdir)(config_1.config.dataDir, { recursive: true });
+    // Auth (after mkdir so data dir exists)
+    const authToken = await (0, auth_1.getToken)();
+    if (authToken) {
+        app.use(await (0, auth_1.authMiddleware)(authToken));
+        console.log(`🔐 Auth enabled — token: ${authToken}`);
+    }
     await ensureApiServerConfig();
     await ensureGatewayRunning();
-    const app = new koa_1.default();
     app.use((0, cors_1.default)({ origin: config_1.config.corsOrigins }));
     app.use((0, bodyparser_1.default)());
     app.use(webhook_1.webhookRoutes.routes());
@@ -70,7 +81,7 @@ async function bootstrap() {
     app.use(filesystem_1.fsRoutes.routes());
     app.use(config_2.configRoutes.routes());
     app.use(weixin_1.weixinRoutes.routes());
-    // Health endpoint: check CLI version + gateway connectivity
+    // health
     app.use(async (ctx, next) => {
         if (ctx.path === '/health') {
             const raw = await getVersion();
@@ -82,7 +93,7 @@ async function bootstrap() {
                 });
                 gatewayOk = res.ok;
             }
-            catch { /* not reachable */ }
+            catch { }
             ctx.body = {
                 status: gatewayOk ? 'ok' : 'error',
                 platform: 'hermes-agent',
@@ -94,25 +105,87 @@ async function bootstrap() {
         await next();
     });
     app.use(proxy_1.proxyRoutes.routes());
-    // SPA fallback
+    // SPA
     const distDir = (0, path_1.resolve)(__dirname, '..');
     app.use((0, koa_static_1.default)(distDir));
     app.use(async (ctx) => {
-        if (!ctx.path.startsWith('/api') && !ctx.path.startsWith('/v1') && ctx.path !== '/health' && ctx.path !== '/upload' && ctx.path !== '/webhook') {
+        if (!ctx.path.startsWith('/api') &&
+            !ctx.path.startsWith('/v1') &&
+            ctx.path !== '/health' &&
+            ctx.path !== '/upload' &&
+            ctx.path !== '/webhook') {
             await (0, koa_send_1.default)(ctx, 'index.html', { root: distDir });
         }
     });
-    app.listen(config_1.config.port, '0.0.0.0', () => {
-        console.log(`  ➜  Hermes BFF Server: http://localhost:${config_1.config.port}`);
-        console.log(`  ➜  Upstream: ${config_1.config.upstream}`);
+    // 🚀 启动服务
+    server = app.listen(config_1.config.port, '0.0.0.0');
+    server.on('listening', () => {
+        console.log(`➜ Server: http://localhost:${config_1.config.port}`);
+        console.log(`➜ Upstream: ${config_1.config.upstream}`);
+    });
+    server.on('error', (err) => {
+        console.error('Server error:', err.message);
     });
+    // 👇 绑定退出信号
+    bindShutdown();
 }
+// ============================
+// ✅ 统一关闭逻辑（核心）
+// ============================
+function bindShutdown() {
+    const shutdown = async (signal) => {
+        if (isShuttingDown)
+            return;
+        isShuttingDown = true;
+        console.log(`\n[${signal}] shutting down...`);
+        try {
+            // ✅ 1. 关闭 HTTP server
+            if (server) {
+                await new Promise((resolve) => {
+                    server.close(() => {
+                        console.log('✓ http server closed');
+                        resolve();
+                    });
+                });
+            }
+            // ✅ 2. 关闭子进程（如果有）
+            if (gatewayPid) {
+                try {
+                    process.kill(gatewayPid);
+                    console.log(`✓ gateway process killed: ${gatewayPid}`);
+                }
+                catch { }
+            }
+        }
+        catch (err) {
+            console.error('shutdown error:', err);
+        }
+        process.exit(0);
+    };
+    // 👉 nodemon 专用（必须 once）
+    process.once('SIGUSR2', shutdown);
+    // 👉 正常退出
+    process.on('SIGINT', shutdown);
+    process.on('SIGTERM', shutdown);
+    // 👉 防止异常退出没处理
+    process.on('uncaughtException', (err) => {
+        console.error('uncaughtException:', err);
+        shutdown('uncaughtException');
+    });
+    process.on('unhandledRejection', (err) => {
+        console.error('unhandledRejection:', err);
+        shutdown('unhandledRejection');
+    });
+}
+// ============================
+// 你的原逻辑（基本不动）
+// ============================
 async function ensureApiServerConfig() {
     const { homedir } = await Promise.resolve().then(() => __importStar(require('os')));
     const { readFileSync, writeFileSync, existsSync, copyFileSync } = await Promise.resolve().then(() => __importStar(require('fs')));
     const yaml = (await Promise.resolve().then(() => __importStar(require('js-yaml')))).default;
     const configPath = (0, path_1.resolve)(homedir(), '.hermes/config.yaml');
-    const apiServerDefaults = {
+    const defaults = {
         enabled: true,
         host: '127.0.0.1',
         port: 8642,
@@ -121,83 +194,53 @@ async function ensureApiServerConfig() {
     };
     try {
         if (!existsSync(configPath)) {
-            console.log('  ✗ config.yaml not found, run "hermes setup" first');
+            console.log('✗ config.yaml not found');
             return;
         }
         const content = readFileSync(configPath, 'utf-8');
-        const config = yaml.load(content) || {};
-        if (!config.platforms)
-            config.platforms = {};
-        if (!config.platforms.api_server)
-            config.platforms.api_server = {};
-        const api = config.platforms.api_server;
-        let needsUpdate = false;
-        for (const [key, value] of Object.entries(apiServerDefaults)) {
-            if (api[key] === undefined || api[key] === null) {
-                api[key] = value;
-                needsUpdate = true;
+        const cfg = yaml.load(content) || {};
+        if (!cfg.platforms)
+            cfg.platforms = {};
+        if (!cfg.platforms.api_server)
+            cfg.platforms.api_server = {};
+        const api = cfg.platforms.api_server;
+        let changed = false;
+        for (const [k, v] of Object.entries(defaults)) {
+            if (api[k] != null && api[k] !== v) {
+                api[k] = v;
+                changed = true;
             }
         }
-        if (!needsUpdate) {
-            console.log('  ✓ api_server config is correct');
+        if (!changed)
             return;
-        }
-        // Backup before modifying
         copyFileSync(configPath, configPath + '.bak');
-        const updated = yaml.dump(config, { lineWidth: -1, noRefs: true, quotingType: '"' });
-        writeFileSync(configPath, updated, 'utf-8');
-        console.log('  ✓ api_server config ensured (backup saved to config.yaml.bak)');
+        writeFileSync(configPath, yaml.dump(cfg), 'utf-8');
         await restartGateway();
     }
     catch (err) {
-        console.error('  ✗ Failed to update config:', err.message);
+        console.error('config error:', err.message);
     }
 }
 async function ensureGatewayRunning() {
     const upstream = config_1.config.upstream.replace(/\/$/, '');
     try {
         const res = await fetch(`${upstream}/health`, { signal: AbortSignal.timeout(5000) });
-        if (res.ok) {
-            console.log('  ✓ Gateway is running');
+        if (res.ok)
             return;
-        }
-    }
-    catch {
-        // Gateway not reachable
-    }
-    // Detect WSL — no launchd/systemd, hermes gateway start won't work
-    const { existsSync, readFileSync } = await Promise.resolve().then(() => __importStar(require('fs')));
-    const isWSL = existsSync('/proc/version') && readFileSync('/proc/version', 'utf-8').toLowerCase().includes('microsoft');
-    if (isWSL) {
-        console.log('  ⚠ WSL detected — Gateway not reachable, starting in background...');
-        try {
-            const pid = await startGatewayBackground();
-            await new Promise(r => setTimeout(r, 3000));
-            const res = await fetch(`${upstream}/health`, { signal: AbortSignal.timeout(5000) });
-            if (res.ok) {
-                console.log(`  ✓ Gateway started in background (PID: ${pid})`);
-                return;
-            }
-            console.log('  ✗ Gateway start attempted but still not reachable');
-        }
-        catch (err) {
-            console.error('  ✗ Failed to start gateway:', err.message);
-        }
-        return;
     }
-    console.log('  ⚠ Gateway not reachable, starting...');
+    catch { }
+    console.log('⚠ Gateway not running, starting...');
     try {
-        await startGateway();
+        // 👉 关键：保存 PID
+        gatewayPid = await startGatewayBackground();
         await new Promise(r => setTimeout(r, 3000));
         const res = await fetch(`${upstream}/health`, { signal: AbortSignal.timeout(5000) });
         if (res.ok) {
-            console.log('  ✓ Gateway started successfully');
-            return;
+            console.log(`✓ Gateway started (PID: ${gatewayPid})`);
         }
-        console.log('  ✗ Gateway start attempted but still not reachable');
     }
     catch (err) {
-        console.error('  ✗ Failed to start gateway:', err.message);
+        console.error('gateway start failed:', err.message);
     }
 }
 bootstrap();

package/dist/server/routes/filesystem.js

@@ -116,6 +116,9 @@ async function writeConfigYaml(config) {
 exports.fsRoutes.get('/api/skills', async (ctx) => {
     const skillsDir = (0, path_1.join)(hermesDir, 'skills');
     try {
+        // Read disabled skills list from config.yaml
+        const config = await readConfigYaml();
+        const disabledList = config.skills?.disabled || [];
         const entries = await (0, promises_1.readdir)(skillsDir, { withFileTypes: true });
         const categories = [];
         for (const entry of entries) {
@@ -134,6 +137,7 @@ exports.fsRoutes.get('/api/skills', async (ctx) => {
                     skills.push({
                         name: se.name,
                         description: extractDescription(skillMd),
+                        enabled: !disabledList.includes(se.name),
                     });
                 }
             }
@@ -152,6 +156,40 @@ exports.fsRoutes.get('/api/skills', async (ctx) => {
         ctx.body = { error: `Failed to read skills directory: ${err.message}` };
     }
 });
+// Toggle skill enabled/disabled via config.yaml skills.disabled
+exports.fsRoutes.put('/api/skills/toggle', async (ctx) => {
+    const { name, enabled } = ctx.request.body;
+    if (!name || typeof enabled !== 'boolean') {
+        ctx.status = 400;
+        ctx.body = { error: 'Missing name or enabled flag' };
+        return;
+    }
+    try {
+        const config = await readConfigYaml();
+        if (!config.skills)
+            config.skills = {};
+        if (!Array.isArray(config.skills.disabled))
+            config.skills.disabled = [];
+        const disabled = config.skills.disabled;
+        const idx = disabled.indexOf(name);
+        if (enabled) {
+            // Enable: remove from disabled list
+            if (idx !== -1)
+                disabled.splice(idx, 1);
+        }
+        else {
+            // Disable: add to disabled list
+            if (idx === -1)
+                disabled.push(name);
+        }
+        await writeConfigYaml(config);
+        ctx.body = { success: true };
+    }
+    catch (err) {
+        ctx.status = 500;
+        ctx.body = { error: err.message };
+    }
+});
 // List files in a skill directory
 async function listFilesRecursive(dir, prefix) {
     const result = [];

package/dist/server/services/auth.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Get or create the auth token. Returns null if auth is disabled.
+ */
+export declare function getToken(): Promise<string | null>;
+/**
+ * Koa middleware: check Authorization header for API routes.
+ * Skips /health, /webhook, and static file requests.
+ */
+export declare function authMiddleware(token: string | null): Promise<(ctx: any, next: () => Promise<void>) => Promise<void>>;

package/dist/server/services/auth.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getToken = getToken;
+exports.authMiddleware = authMiddleware;
+const promises_1 = require("fs/promises");
+const path_1 = require("path");
+const crypto_1 = require("crypto");
+const config_1 = require("../config");
+// Token stored in project data directory
+const TOKEN_FILE = (0, path_1.join)(config_1.config.dataDir, '.token');
+function generateToken() {
+    return (0, crypto_1.randomBytes)(32).toString('hex');
+}
+/**
+ * Get or create the auth token. Returns null if auth is disabled.
+ */
+async function getToken() {
+    // Auth can be disabled via env var
+    if (process.env.AUTH_DISABLED === '1' || process.env.AUTH_DISABLED === 'true') {
+        return null;
+    }
+    // Custom token via env var
+    if (process.env.AUTH_TOKEN) {
+        return process.env.AUTH_TOKEN;
+    }
+    try {
+        const token = await (0, promises_1.readFile)(TOKEN_FILE, 'utf-8');
+        return token.trim();
+    }
+    catch {
+        // Generate a new token
+        const token = generateToken();
+        await (0, promises_1.writeFile)(TOKEN_FILE, token + '\n', { mode: 0o600 });
+        return token;
+    }
+}
+/**
+ * Koa middleware: check Authorization header for API routes.
+ * Skips /health, /webhook, and static file requests.
+ */
+async function authMiddleware(token) {
+    return async (ctx, next) => {
+        // If auth is disabled, skip
+        if (!token) {
+            await next();
+            return;
+        }
+        // Skip non-API paths (static files, health check, SPA)
+        const path = ctx.path;
+        if (path === '/health' ||
+            (!path.startsWith('/api') && !path.startsWith('/v1') && path !== '/upload' && path !== '/webhook')) {
+            await next();
+            return;
+        }
+        const auth = ctx.headers.authorization || '';
+        const provided = auth.startsWith('Bearer ') ? auth.slice(7) : '';
+        if (!provided || provided !== token) {
+            ctx.status = 401;
+            ctx.set('Content-Type', 'application/json');
+            ctx.body = { error: 'Unauthorized' };
+            return;
+        }
+        await next();
+    };
+}

package/dist/server/services/hermes-cli.js

@@ -13,6 +13,7 @@ exports.readLogs = readLogs;
 const child_process_1 = require("child_process");
 const util_1 = require("util");
 const execFileAsync = (0, util_1.promisify)(child_process_1.execFile);
+const execOpts = { windowsHide: true };
 /**
  * List sessions from Hermes CLI (without messages)
  */
@@ -24,6 +25,7 @@ async function listSessions(source, limit) {
         const { stdout } = await execFileAsync('hermes', args, {
             maxBuffer: 50 * 1024 * 1024, // 50MB
             timeout: 30000,
+            ...execOpts,
         });
         const lines = stdout.trim().split('\n').filter(Boolean);
         const sessions = [];
@@ -83,10 +85,13 @@ async function getSession(id) {
         const { stdout } = await execFileAsync('hermes', args, {
             maxBuffer: 50 * 1024 * 1024,
             timeout: 30000,
+            ...execOpts,
         });
         const lines = stdout.trim().split('\n').filter(Boolean);
         if (lines.length === 0)
             return null;
+        if (!lines[0].startsWith('{'))
+            return null;
         const raw = JSON.parse(lines[0]);
         return {
             id: raw.id,
@@ -125,6 +130,7 @@ async function deleteSession(id) {
     try {
         await execFileAsync('hermes', ['sessions', 'delete', id, '--yes'], {
             timeout: 10000,
+            ...execOpts,
         });
         return true;
     }
@@ -140,6 +146,7 @@ async function renameSession(id, title) {
     try {
         await execFileAsync('hermes', ['sessions', 'rename', id, title], {
             timeout: 10000,
+            ...execOpts,
         });
         return true;
     }
@@ -153,7 +160,7 @@ async function renameSession(id, title) {
  */
 async function getVersion() {
     try {
-        const { stdout } = await execFileAsync('hermes', ['--version'], { timeout: 5000 });
+        const { stdout } = await execFileAsync('hermes', ['--version'], { timeout: 5000, ...execOpts });
         return stdout.trim();
     }
     catch {
@@ -166,6 +173,7 @@ async function getVersion() {
 async function startGateway() {
     const { stdout, stderr } = await execFileAsync('hermes', ['gateway', 'start'], {
         timeout: 30000,
+        ...execOpts,
     });
     return stdout || stderr;
 }
@@ -178,6 +186,7 @@ async function startGatewayBackground() {
     const child = spawn('hermes', ['gateway', 'run'], {
         detached: true,
         stdio: 'ignore',
+        windowsHide: true,
     });
     child.unref();
     return child.pid ?? null;
@@ -188,6 +197,7 @@ async function startGatewayBackground() {
 async function restartGateway() {
     const { stdout, stderr } = await execFileAsync('hermes', ['gateway', 'restart'], {
         timeout: 30000,
+        ...execOpts,
     });
     return stdout || stderr;
 }
@@ -198,6 +208,7 @@ async function listLogFiles() {
     try {
         const { stdout } = await execFileAsync('hermes', ['logs', 'list'], {
             timeout: 10000,
+            ...execOpts,
         });
         const files = [];
         const lines = stdout.trim().split('\n').filter(l => l.includes('.log'));
@@ -233,6 +244,7 @@ async function readLogs(logName = 'agent', lines = 100, level, session, since) {
         const { stdout } = await execFileAsync('hermes', args, {
             maxBuffer: 10 * 1024 * 1024,
             timeout: 15000,
+            ...execOpts,
         });
         return stdout;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hermes-web-ui",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Hermes Agent Web UI - Chat and Job Management Dashboard",
   "repository": {
     "type": "git",
@@ -15,7 +15,7 @@
     "start": "vite --host --port 8648",
     "dev": "concurrently \"npm run dev:server\" \"npm run dev:client\"",
     "dev:client": "vite --host",
-    "dev:server": "nodemon --watch server/src --ext ts --exec node -r ts-node/register server/src/index.ts",
+    "dev:server": "nodemon --signal SIGTERM --watch server/src -e ts,tsx --exec node -r ts-node/register server/src/index.ts",
     "build": "vue-tsc -b && vite build && tsc -p server/tsconfig.json",
     "preview": "vite preview"
   },

package/dist/assets/Button-CpNld4Mc.js

@@ -1,109 +0,0 @@
-import{$ as e,E as t,M as n,S as r,k as i,m as a,n as o,r as s,rt as c,w as l}from"./vue.runtime.esm-bundler-BoqZ7fRe.js";import{$ as u,B as d,J as f,Q as p,V as m,W as h,d as g,dt as _,f as v,ft as y,i as b,l as x,lt as S,n as C,nt as w,o as T,ot as E,q as D,r as O,rt as k,s as A,st as j,tt as M,u as N,ut as P,z as F}from"./_plugin-vue_export-helper-C7dadZ10.js";function I(e){return e.replace(/#|\(|\)|,|\s|\./g,`_`)}var L=r({name:`FadeInExpandTransition`,props:{appear:Boolean,group:Boolean,mode:String,onLeave:Function,onAfterLeave:Function,onAfterEnter:Function,width:Boolean,reverse:Boolean},setup(e,{slots:t}){function n(t){e.width?t.style.maxWidth=`${t.offsetWidth}px`:t.style.maxHeight=`${t.offsetHeight}px`,t.offsetWidth}function r(t){e.width?t.style.maxWidth=`0`:t.style.maxHeight=`0`,t.offsetWidth;let{onLeave:n}=e;n&&n()}function i(t){e.width?t.style.maxWidth=``:t.style.maxHeight=``;let{onAfterLeave:n}=e;n&&n()}function a(t){if(t.style.transition=`none`,e.width){let e=t.offsetWidth;t.style.maxWidth=`0`,t.offsetWidth,t.style.transition=``,t.style.maxWidth=`${e}px`}else if(e.reverse)t.style.maxHeight=`${t.offsetHeight}px`,t.offsetHeight,t.style.transition=``,t.style.maxHeight=`0`;else{let e=t.offsetHeight;t.style.maxHeight=`0`,t.offsetWidth,t.style.transition=``,t.style.maxHeight=`${e}px`}t.offsetWidth}function c(t){var n;e.width?t.style.maxWidth=``:e.reverse||(t.style.maxHeight=``),(n=e.onAfterEnter)==null||n.call(e)}return()=>{let{group:u,width:d,appear:f,mode:p}=e,m=u?s:o,h={name:d?`fade-in-width-expand-transition`:`fade-in-height-expand-transition`,appear:f,onEnter:a,onAfterEnter:c,onBeforeLeave:n,onLeave:r,onAfterLeave:i};return u||(h.mode=p),l(m,h,t)}}}),{cubicBezierEaseInOut:R}=g;function z({duration:e=`.2s`,delay:t=`.1s`}={}){return[E(`&.fade-in-width-expand-transition-leave-from, &.fade-in-width-expand-transition-enter-to`,{opacity:1}),E(`&.fade-in-width-expand-transition-leave-to, &.fade-in-width-expand-transition-enter-from`,`
- opacity: 0!important;
- margin-left: 0!important;
- margin-right: 0!important;
- `),E(`&.fade-in-width-expand-transition-leave-active`,`
- overflow: hidden;
- transition:
- opacity ${e} ${R},
- max-width ${e} ${R} ${t},
- margin-left ${e} ${R} ${t},
- margin-right ${e} ${R} ${t};
- `),E(`&.fade-in-width-expand-transition-enter-active`,`
- overflow: hidden;
- transition:
- opacity ${e} ${R} ${t},
- max-width ${e} ${R},
- margin-left ${e} ${R},
- margin-right ${e} ${R};
- `)]}var B=j(`base-wave`,`
- position: absolute;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- border-radius: inherit;
-`),V=r({name:`BaseWave`,props:{clsPrefix:{type:String,required:!0}},setup(t){N(`-base-wave`,B,c(t,`clsPrefix`));let r=e(null),a=e(!1),o=null;return n(()=>{o!==null&&window.clearTimeout(o)}),{active:a,selfRef:r,play(){o!==null&&(window.clearTimeout(o),a.value=!1,o=null),i(()=>{var e;(e=r.value)==null||e.offsetHeight,a.value=!0,o=window.setTimeout(()=>{a.value=!1,o=null},1e3)})}}},render(){let{clsPrefix:e}=this;return l(`div`,{ref:`selfRef`,"aria-hidden":!0,class:[`${e}-base-wave`,this.active&&`${e}-base-wave--active`]})}});function H(e){return k(e,[255,255,255,.16])}function U(e){return k(e,[0,0,0,.12])}var W=u(`n-button-group`),G={paddingTiny:`0 6px`,paddingSmall:`0 10px`,paddingMedium:`0 14px`,paddingLarge:`0 18px`,paddingRoundTiny:`0 10px`,paddingRoundSmall:`0 14px`,paddingRoundMedium:`0 18px`,paddingRoundLarge:`0 22px`,iconMarginTiny:`6px`,iconMarginSmall:`6px`,iconMarginMedium:`6px`,iconMarginLarge:`6px`,iconSizeTiny:`14px`,iconSizeSmall:`18px`,iconSizeMedium:`18px`,iconSizeLarge:`20px`,rippleDuration:`.6s`};function K(e){let{heightTiny:t,heightSmall:n,heightMedium:r,heightLarge:i,borderRadius:a,fontSizeTiny:o,fontSizeSmall:s,fontSizeMedium:c,fontSizeLarge:l,opacityDisabled:u,textColor2:d,textColor3:f,primaryColorHover:p,primaryColorPressed:m,borderColor:h,primaryColor:g,baseColor:_,infoColor:v,infoColorHover:y,infoColorPressed:b,successColor:x,successColorHover:S,successColorPressed:C,warningColor:w,warningColorHover:T,warningColorPressed:E,errorColor:D,errorColorHover:O,errorColorPressed:k,fontWeight:A,buttonColor2:j,buttonColor2Hover:M,buttonColor2Pressed:N,fontWeightStrong:P}=e;return Object.assign(Object.assign({},G),{heightTiny:t,heightSmall:n,heightMedium:r,heightLarge:i,borderRadiusTiny:a,borderRadiusSmall:a,borderRadiusMedium:a,borderRadiusLarge:a,fontSizeTiny:o,fontSizeSmall:s,fontSizeMedium:c,fontSizeLarge:l,opacityDisabled:u,colorOpacitySecondary:`0.16`,colorOpacitySecondaryHover:`0.22`,colorOpacitySecondaryPressed:`0.28`,colorSecondary:j,colorSecondaryHover:M,colorSecondaryPressed:N,colorTertiary:j,colorTertiaryHover:M,colorTertiaryPressed:N,colorQuaternary:`#0000`,colorQuaternaryHover:M,colorQuaternaryPressed:N,color:`#0000`,colorHover:`#0000`,colorPressed:`#0000`,colorFocus:`#0000`,colorDisabled:`#0000`,textColor:d,textColorTertiary:f,textColorHover:p,textColorPressed:m,textColorFocus:p,textColorDisabled:d,textColorText:d,textColorTextHover:p,textColorTextPressed:m,textColorTextFocus:p,textColorTextDisabled:d,textColorGhost:d,textColorGhostHover:p,textColorGhostPressed:m,textColorGhostFocus:p,textColorGhostDisabled:d,border:`1px solid ${h}`,borderHover:`1px solid ${p}`,borderPressed:`1px solid ${m}`,borderFocus:`1px solid ${p}`,borderDisabled:`1px solid ${h}`,rippleColor:g,colorPrimary:g,colorHoverPrimary:p,colorPressedPrimary:m,colorFocusPrimary:p,colorDisabledPrimary:g,textColorPrimary:_,textColorHoverPrimary:_,textColorPressedPrimary:_,textColorFocusPrimary:_,textColorDisabledPrimary:_,textColorTextPrimary:g,textColorTextHoverPrimary:p,textColorTextPressedPrimary:m,textColorTextFocusPrimary:p,textColorTextDisabledPrimary:d,textColorGhostPrimary:g,textColorGhostHoverPrimary:p,textColorGhostPressedPrimary:m,textColorGhostFocusPrimary:p,textColorGhostDisabledPrimary:g,borderPrimary:`1px solid ${g}`,borderHoverPrimary:`1px solid ${p}`,borderPressedPrimary:`1px solid ${m}`,borderFocusPrimary:`1px solid ${p}`,borderDisabledPrimary:`1px solid ${g}`,rippleColorPrimary:g,colorInfo:v,colorHoverInfo:y,colorPressedInfo:b,colorFocusInfo:y,colorDisabledInfo:v,textColorInfo:_,textColorHoverInfo:_,textColorPressedInfo:_,textColorFocusInfo:_,textColorDisabledInfo:_,textColorTextInfo:v,textColorTextHoverInfo:y,textColorTextPressedInfo:b,textColorTextFocusInfo:y,textColorTextDisabledInfo:d,textColorGhostInfo:v,textColorGhostHoverInfo:y,textColorGhostPressedInfo:b,textColorGhostFocusInfo:y,textColorGhostDisabledInfo:v,borderInfo:`1px solid ${v}`,borderHoverInfo:`1px solid ${y}`,borderPressedInfo:`1px solid ${b}`,borderFocusInfo:`1px solid ${y}`,borderDisabledInfo:`1px solid ${v}`,rippleColorInfo:v,colorSuccess:x,colorHoverSuccess:S,colorPressedSuccess:C,colorFocusSuccess:S,colorDisabledSuccess:x,textColorSuccess:_,textColorHoverSuccess:_,textColorPressedSuccess:_,textColorFocusSuccess:_,textColorDisabledSuccess:_,textColorTextSuccess:x,textColorTextHoverSuccess:S,textColorTextPressedSuccess:C,textColorTextFocusSuccess:S,textColorTextDisabledSuccess:d,textColorGhostSuccess:x,textColorGhostHoverSuccess:S,textColorGhostPressedSuccess:C,textColorGhostFocusSuccess:S,textColorGhostDisabledSuccess:x,borderSuccess:`1px solid ${x}`,borderHoverSuccess:`1px solid ${S}`,borderPressedSuccess:`1px solid ${C}`,borderFocusSuccess:`1px solid ${S}`,borderDisabledSuccess:`1px solid ${x}`,rippleColorSuccess:x,colorWarning:w,colorHoverWarning:T,colorPressedWarning:E,colorFocusWarning:T,colorDisabledWarning:w,textColorWarning:_,textColorHoverWarning:_,textColorPressedWarning:_,textColorFocusWarning:_,textColorDisabledWarning:_,textColorTextWarning:w,textColorTextHoverWarning:T,textColorTextPressedWarning:E,textColorTextFocusWarning:T,textColorTextDisabledWarning:d,textColorGhostWarning:w,textColorGhostHoverWarning:T,textColorGhostPressedWarning:E,textColorGhostFocusWarning:T,textColorGhostDisabledWarning:w,borderWarning:`1px solid ${w}`,borderHoverWarning:`1px solid ${T}`,borderPressedWarning:`1px solid ${E}`,borderFocusWarning:`1px solid ${T}`,borderDisabledWarning:`1px solid ${w}`,rippleColorWarning:w,colorError:D,colorHoverError:O,colorPressedError:k,colorFocusError:O,colorDisabledError:D,textColorError:_,textColorHoverError:_,textColorPressedError:_,textColorFocusError:_,textColorDisabledError:_,textColorTextError:D,textColorTextHoverError:O,textColorTextPressedError:k,textColorTextFocusError:O,textColorTextDisabledError:d,textColorGhostError:D,textColorGhostHoverError:O,textColorGhostPressedError:k,textColorGhostFocusError:O,textColorGhostDisabledError:D,borderError:`1px solid ${D}`,borderHoverError:`1px solid ${O}`,borderPressedError:`1px solid ${k}`,borderFocusError:`1px solid ${O}`,borderDisabledError:`1px solid ${D}`,rippleColorError:D,waveOpacity:`0.6`,fontWeight:A,fontWeightStrong:P})}var q={name:`Button`,common:O,self:K},J=E([j(`button`,`
- margin: 0;
- font-weight: var(--n-font-weight);
- line-height: 1;
- font-family: inherit;
- padding: var(--n-padding);
- height: var(--n-height);
- font-size: var(--n-font-size);
- border-radius: var(--n-border-radius);
- color: var(--n-text-color);
- background-color: var(--n-color);
- width: var(--n-width);
- white-space: nowrap;
- outline: none;
- position: relative;
- z-index: auto;
- border: none;
- display: inline-flex;
- flex-wrap: nowrap;
- flex-shrink: 0;
- align-items: center;
- justify-content: center;
- user-select: none;
- -webkit-user-select: none;
- text-align: center;
- cursor: pointer;
- text-decoration: none;
- transition:
- color .3s var(--n-bezier),
- background-color .3s var(--n-bezier),
- opacity .3s var(--n-bezier),
- border-color .3s var(--n-bezier);
- `,[P(`color`,[S(`border`,{borderColor:`var(--n-border-color)`}),P(`disabled`,[S(`border`,{borderColor:`var(--n-border-color-disabled)`})]),_(`disabled`,[E(`&:focus`,[S(`state-border`,{borderColor:`var(--n-border-color-focus)`})]),E(`&:hover`,[S(`state-border`,{borderColor:`var(--n-border-color-hover)`})]),E(`&:active`,[S(`state-border`,{borderColor:`var(--n-border-color-pressed)`})]),P(`pressed`,[S(`state-border`,{borderColor:`var(--n-border-color-pressed)`})])])]),P(`disabled`,{backgroundColor:`var(--n-color-disabled)`,color:`var(--n-text-color-disabled)`},[S(`border`,{border:`var(--n-border-disabled)`})]),_(`disabled`,[E(`&:focus`,{backgroundColor:`var(--n-color-focus)`,color:`var(--n-text-color-focus)`},[S(`state-border`,{border:`var(--n-border-focus)`})]),E(`&:hover`,{backgroundColor:`var(--n-color-hover)`,color:`var(--n-text-color-hover)`},[S(`state-border`,{border:`var(--n-border-hover)`})]),E(`&:active`,{backgroundColor:`var(--n-color-pressed)`,color:`var(--n-text-color-pressed)`},[S(`state-border`,{border:`var(--n-border-pressed)`})]),P(`pressed`,{backgroundColor:`var(--n-color-pressed)`,color:`var(--n-text-color-pressed)`},[S(`state-border`,{border:`var(--n-border-pressed)`})])]),P(`loading`,`cursor: wait;`),j(`base-wave`,`
- pointer-events: none;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- animation-iteration-count: 1;
- animation-duration: var(--n-ripple-duration);
- animation-timing-function: var(--n-bezier-ease-out), var(--n-bezier-ease-out);
- `,[P(`active`,{zIndex:1,animationName:`button-wave-spread, button-wave-opacity`})]),p&&`MozBoxSizing`in document.createElement(`div`).style?E(`&::moz-focus-inner`,{border:0}):null,S(`border, state-border`,`
- position: absolute;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
- border-radius: inherit;
- transition: border-color .3s var(--n-bezier);
- pointer-events: none;
- `),S(`border`,`
- border: var(--n-border);
- `),S(`state-border`,`
- border: var(--n-border);
- border-color: #0000;
- z-index: 1;
- `),S(`icon`,`
- margin: var(--n-icon-margin);
- margin-left: 0;
- height: var(--n-icon-size);
- width: var(--n-icon-size);
- max-width: var(--n-icon-size);
- font-size: var(--n-icon-size);
- position: relative;
- flex-shrink: 0;
- `,[j(`icon-slot`,`
- height: var(--n-icon-size);
- width: var(--n-icon-size);
- position: absolute;
- left: 0;
- top: 50%;
- transform: translateY(-50%);
- display: flex;
- align-items: center;
- justify-content: center;
- `,[T({top:`50%`,originalTransform:`translateY(-50%)`})]),z()]),S(`content`,`
- display: flex;
- align-items: center;
- flex-wrap: nowrap;
- min-width: 0;
- `,[E(`~`,[S(`icon`,{margin:`var(--n-icon-margin)`,marginRight:0})])]),P(`block`,`
- display: flex;
- width: 100%;
- `),P(`dashed`,[S(`border, state-border`,{borderStyle:`dashed !important`})]),P(`disabled`,{cursor:`not-allowed`,opacity:`var(--n-opacity-disabled)`})]),E(`@keyframes button-wave-spread`,{from:{boxShadow:`0 0 0.5px 0 var(--n-ripple-color)`},to:{boxShadow:`0 0 0.5px 4.5px var(--n-ripple-color)`}}),E(`@keyframes button-wave-opacity`,{from:{opacity:`var(--n-wave-opacity)`},to:{opacity:0}})]),Y=r({name:`Button`,props:Object.assign(Object.assign({},x.props),{color:String,textColor:String,text:Boolean,block:Boolean,loading:Boolean,disabled:Boolean,circle:Boolean,size:String,ghost:Boolean,round:Boolean,secondary:Boolean,tertiary:Boolean,quaternary:Boolean,strong:Boolean,focusable:{type:Boolean,default:!0},keyboard:{type:Boolean,default:!0},tag:{type:String,default:`button`},type:{type:String,default:`default`},dashed:Boolean,renderIcon:Function,iconPlacement:{type:String,default:`left`},attrType:{type:String,default:`button`},bordered:{type:Boolean,default:!0},onClick:[Function,Array],nativeFocusBehavior:{type:Boolean,default:!C},spinProps:Object}),slots:Object,setup(n){let r=e(null),i=e(null),o=e(!1),s=M(()=>!n.quaternary&&!n.tertiary&&!n.secondary&&!n.text&&(!n.color||n.ghost||n.dashed)&&n.bordered),c=t(W,{}),{inlineThemeDisabled:l,mergedClsPrefixRef:u,mergedRtlRef:p,mergedComponentPropsRef:h}=m(n),{mergedSizeRef:g}=F({},{defaultSize:`medium`,mergedSize:e=>{let{size:t}=n;if(t)return t;let{size:r}=c;if(r)return r;let{mergedSize:i}=e||{};return i?i.value:h?.value?.Button?.size||`medium`}}),_=a(()=>n.focusable&&!n.disabled),b=e=>{var t;_.value||e.preventDefault(),!n.nativeFocusBehavior&&(e.preventDefault(),!n.disabled&&_.value&&((t=r.value)==null||t.focus({preventScroll:!0})))},S=e=>{var t;if(!n.disabled&&!n.loading){let{onClick:r}=n;r&&f(r,e),n.text||(t=i.value)==null||t.play()}},C=e=>{switch(e.key){case`Enter`:if(!n.keyboard)return;o.value=!1}},T=e=>{switch(e.key){case`Enter`:if(!n.keyboard||n.loading){e.preventDefault();return}o.value=!0}},E=()=>{o.value=!1},D=x(`Button`,`-button`,J,q,n,u),O=v(`Button`,p,u),k=a(()=>{let{common:{cubicBezierEaseInOut:e,cubicBezierEaseOut:t},self:r}=D.value,{rippleDuration:i,opacityDisabled:a,fontWeight:o,fontWeightStrong:s}=r,c=g.value,{dashed:l,type:u,ghost:d,text:f,color:p,round:m,circle:h,textColor:_,secondary:v,tertiary:b,quaternary:x,strong:S}=n,C={"--n-font-weight":S?s:o},T={"--n-color":`initial`,"--n-color-hover":`initial`,"--n-color-pressed":`initial`,"--n-color-focus":`initial`,"--n-color-disabled":`initial`,"--n-ripple-color":`initial`,"--n-text-color":`initial`,"--n-text-color-hover":`initial`,"--n-text-color-pressed":`initial`,"--n-text-color-focus":`initial`,"--n-text-color-disabled":`initial`},E=u===`tertiary`,O=u===`default`,k=E?`default`:u;if(f){let e=_||p;T={"--n-color":`#0000`,"--n-color-hover":`#0000`,"--n-color-pressed":`#0000`,"--n-color-focus":`#0000`,"--n-color-disabled":`#0000`,"--n-ripple-color":`#0000`,"--n-text-color":e||r[y(`textColorText`,k)],"--n-text-color-hover":e?H(e):r[y(`textColorTextHover`,k)],"--n-text-color-pressed":e?U(e):r[y(`textColorTextPressed`,k)],"--n-text-color-focus":e?H(e):r[y(`textColorTextHover`,k)],"--n-text-color-disabled":e||r[y(`textColorTextDisabled`,k)]}}else if(d||l){let e=_||p;T={"--n-color":`#0000`,"--n-color-hover":`#0000`,"--n-color-pressed":`#0000`,"--n-color-focus":`#0000`,"--n-color-disabled":`#0000`,"--n-ripple-color":p||r[y(`rippleColor`,k)],"--n-text-color":e||r[y(`textColorGhost`,k)],"--n-text-color-hover":e?H(e):r[y(`textColorGhostHover`,k)],"--n-text-color-pressed":e?U(e):r[y(`textColorGhostPressed`,k)],"--n-text-color-focus":e?H(e):r[y(`textColorGhostHover`,k)],"--n-text-color-disabled":e||r[y(`textColorGhostDisabled`,k)]}}else if(v){let e=O?r.textColor:E?r.textColorTertiary:r[y(`color`,k)],t=p||e,n=u!==`default`&&u!==`tertiary`;T={"--n-color":n?w(t,{alpha:Number(r.colorOpacitySecondary)}):r.colorSecondary,"--n-color-hover":n?w(t,{alpha:Number(r.colorOpacitySecondaryHover)}):r.colorSecondaryHover,"--n-color-pressed":n?w(t,{alpha:Number(r.colorOpacitySecondaryPressed)}):r.colorSecondaryPressed,"--n-color-focus":n?w(t,{alpha:Number(r.colorOpacitySecondaryHover)}):r.colorSecondaryHover,"--n-color-disabled":r.colorSecondary,"--n-ripple-color":`#0000`,"--n-text-color":t,"--n-text-color-hover":t,"--n-text-color-pressed":t,"--n-text-color-focus":t,"--n-text-color-disabled":t}}else if(b||x){let e=O?r.textColor:E?r.textColorTertiary:r[y(`color`,k)],t=p||e;b?(T[`--n-color`]=r.colorTertiary,T[`--n-color-hover`]=r.colorTertiaryHover,T[`--n-color-pressed`]=r.colorTertiaryPressed,T[`--n-color-focus`]=r.colorSecondaryHover,T[`--n-color-disabled`]=r.colorTertiary):(T[`--n-color`]=r.colorQuaternary,T[`--n-color-hover`]=r.colorQuaternaryHover,T[`--n-color-pressed`]=r.colorQuaternaryPressed,T[`--n-color-focus`]=r.colorQuaternaryHover,T[`--n-color-disabled`]=r.colorQuaternary),T[`--n-ripple-color`]=`#0000`,T[`--n-text-color`]=t,T[`--n-text-color-hover`]=t,T[`--n-text-color-pressed`]=t,T[`--n-text-color-focus`]=t,T[`--n-text-color-disabled`]=t}else T={"--n-color":p||r[y(`color`,k)],"--n-color-hover":p?H(p):r[y(`colorHover`,k)],"--n-color-pressed":p?U(p):r[y(`colorPressed`,k)],"--n-color-focus":p?H(p):r[y(`colorFocus`,k)],"--n-color-disabled":p||r[y(`colorDisabled`,k)],"--n-ripple-color":p||r[y(`rippleColor`,k)],"--n-text-color":_||(p?r.textColorPrimary:E?r.textColorTertiary:r[y(`textColor`,k)]),"--n-text-color-hover":_||(p?r.textColorHoverPrimary:r[y(`textColorHover`,k)]),"--n-text-color-pressed":_||(p?r.textColorPressedPrimary:r[y(`textColorPressed`,k)]),"--n-text-color-focus":_||(p?r.textColorFocusPrimary:r[y(`textColorFocus`,k)]),"--n-text-color-disabled":_||(p?r.textColorDisabledPrimary:r[y(`textColorDisabled`,k)])};let A={"--n-border":`initial`,"--n-border-hover":`initial`,"--n-border-pressed":`initial`,"--n-border-focus":`initial`,"--n-border-disabled":`initial`};A=f?{"--n-border":`none`,"--n-border-hover":`none`,"--n-border-pressed":`none`,"--n-border-focus":`none`,"--n-border-disabled":`none`}:{"--n-border":r[y(`border`,k)],"--n-border-hover":r[y(`borderHover`,k)],"--n-border-pressed":r[y(`borderPressed`,k)],"--n-border-focus":r[y(`borderFocus`,k)],"--n-border-disabled":r[y(`borderDisabled`,k)]};let{[y(`height`,c)]:j,[y(`fontSize`,c)]:M,[y(`padding`,c)]:N,[y(`paddingRound`,c)]:P,[y(`iconSize`,c)]:F,[y(`borderRadius`,c)]:I,[y(`iconMargin`,c)]:L,waveOpacity:R}=r,z={"--n-width":h&&!f?j:`initial`,"--n-height":f?`initial`:j,"--n-font-size":M,"--n-padding":h||f?`initial`:m?P:N,"--n-icon-size":F,"--n-icon-margin":L,"--n-border-radius":f?`initial`:h||m?j:I};return Object.assign(Object.assign(Object.assign(Object.assign({"--n-bezier":e,"--n-bezier-ease-out":t,"--n-ripple-duration":i,"--n-opacity-disabled":a,"--n-wave-opacity":R},C),T),A),z)}),A=l?d(`button`,a(()=>{let e=``,{dashed:t,type:r,ghost:i,text:a,color:o,round:s,circle:c,textColor:l,secondary:u,tertiary:d,quaternary:f,strong:p}=n;t&&(e+=`a`),i&&(e+=`b`),a&&(e+=`c`),s&&(e+=`d`),c&&(e+=`e`),u&&(e+=`f`),d&&(e+=`g`),f&&(e+=`h`),p&&(e+=`i`),o&&(e+=`j${I(o)}`),l&&(e+=`k${I(l)}`);let{value:m}=g;return e+=`l${m[0]}`,e+=`m${r[0]}`,e}),k,n):void 0;return{selfElRef:r,waveElRef:i,mergedClsPrefix:u,mergedFocusable:_,mergedSize:g,showBorder:s,enterPressed:o,rtlEnabled:O,handleMousedown:b,handleKeydown:T,handleBlur:E,handleKeyup:C,handleClick:S,customColorCssVars:a(()=>{let{color:e}=n;if(!e)return null;let t=H(e);return{"--n-border-color":e,"--n-border-color-hover":t,"--n-border-color-pressed":U(e),"--n-border-color-focus":t,"--n-border-color-disabled":e}}),cssVars:l?void 0:k,themeClass:A?.themeClass,onRender:A?.onRender}},render(){let{mergedClsPrefix:e,tag:t,onRender:n}=this;n?.();let r=D(this.$slots.default,t=>t&&l(`span`,{class:`${e}-button__content`},t));return l(t,{ref:`selfElRef`,class:[this.themeClass,`${e}-button`,`${e}-button--${this.type}-type`,`${e}-button--${this.mergedSize}-type`,this.rtlEnabled&&`${e}-button--rtl`,this.disabled&&`${e}-button--disabled`,this.block&&`${e}-button--block`,this.enterPressed&&`${e}-button--pressed`,!this.text&&this.dashed&&`${e}-button--dashed`,this.color&&`${e}-button--color`,this.secondary&&`${e}-button--secondary`,this.loading&&`${e}-button--loading`,this.ghost&&`${e}-button--ghost`],tabindex:this.mergedFocusable?0:-1,type:this.attrType,style:this.cssVars,disabled:this.disabled,onClick:this.handleClick,onBlur:this.handleBlur,onMousedown:this.handleMousedown,onKeyup:this.handleKeyup,onKeydown:this.handleKeydown},this.iconPlacement===`right`&&r,l(L,{width:!0},{default:()=>D(this.$slots.icon,t=>(this.loading||this.renderIcon||t)&&l(`span`,{class:`${e}-button__icon`,style:{margin:h(this.$slots.default)?`0`:``}},l(A,null,{default:()=>this.loading?l(b,Object.assign({clsPrefix:e,key:`loading`,class:`${e}-icon-slot`,strokeWidth:20},this.spinProps)):l(`div`,{key:`icon`,class:`${e}-icon-slot`,role:`none`},this.renderIcon?this.renderIcon():t)})))}),this.iconPlacement===`left`&&r,this.text?null:l(V,{ref:`waveElRef`,clsPrefix:e}),this.showBorder?l(`div`,{"aria-hidden":!0,class:`${e}-button__border`,style:this.customColorCssVars}):null,this.showBorder?l(`div`,{"aria-hidden":!0,class:`${e}-button__state-border`,style:this.customColorCssVars}):null)}}),X=Y;export{I as a,L as i,X as n,q as r,Y as t};