@cst-ui/nano-buttons 0.1.1 → 0.2.0

package/README.md

@@ -2,7 +2,13 @@
 
 Nano 项目主题按钮组件库，基于 Vue 3 和 Element Plus 封装。
 
-这个包用于统一提供 Nano 系列按钮组件。模板中统一使用横线法组件名，例如 `<nano-button>`，不再保留旧命名。
+这个包用于统一提供 Nano 系列按钮组件，并通过子入口提供弹窗标签页化的公共能力。模板中统一使用横线法组件名，例如 `<nano-button>`，不再保留旧命名。
+
+## 在线文档
+
+组件效果、安装方式、使用示例和 API 说明见在线文档：
+
+https://nano-buttons-docs.netlify.app/
 
 ## 安装
 
@@ -36,6 +42,7 @@ app.mount('#app')
 <nano-text-add-button />
 <nano-move-button />
 <nano-import-button />
+<nano-export-button />
 <nano-edit-button />
 <nano-manage-button />
 <nano-delete-button />
@@ -51,6 +58,7 @@ app.mount('#app')
 ```vue
 <nano-add-button />
 <nano-import-button />
+<nano-export-button />
 <nano-delete-button />
 <nano-submit-button>保存</nano-submit-button>
 <nano-cancel-button>取消</nano-cancel-button>
@@ -60,14 +68,38 @@ app.mount('#app')
 
 ```vue
 <nano-button icon="Refresh">刷新</nano-button>
-<nano-button secondary icon="Upload">导入</nano-button>
-<nano-button icon="Download" :loading="exporting">导出</nano-button>
+<nano-import-button>导入</nano-import-button>
+<nano-export-button :loading="exporting">导出</nano-export-button>
 ```
 
 ## 依赖说明
 
-`vue` 和 `element-plus` 是 peer dependencies，需要由使用方项目提供。
+`vue`、`element-plus` 和 `vue-router` 是 peer dependencies，需要由使用方项目提供。
+
+## 弹窗标签页
+
+弹窗标签页能力从子入口导入：
+
+```ts
+import { createNanoDialogTabs, useDialogOpen } from '@cst-ui/nano-buttons/dialog-tabs'
+```
+
+公共包只负责打开模式、上下文缓存、保存结果通知、关闭回来源页和 `NanoDialogTabPage` 页面壳。业务项目需要传入 `router`、`registry`、`tabAdapter` 和打开模式。
 
 ## 维护与发布
 
 包维护、版本发布和权限交接说明见 [MAINTAINING.md](./MAINTAINING.md)。
+
+文档站本地开发：
+
+```bash
+pnpm docs:dev
+```
+
+文档站构建：
+
+```bash
+pnpm docs:build
+```
+
+更新线上文档时，重新构建后将 `docs-dist/` 上传到 Netlify。若 Netlify 站点或域名发生变化，请同步修改本文档中的在线文档链接。

package/dist/NanoButton.vue_vue_type_script_setup_true_lang-D1yLWi2K.cjs

@@ -0,0 +1 @@
+"use strict";const o=require("vue"),u=require("element-plus"),m={...u.buttonProps,secondary:Boolean},f=o.defineComponent({name:"NanoButton",inheritAttrs:!1,__name:"NanoButton",props:m,emits:u.buttonEmits,setup(i,{emit:d}){const t=i,p=d,n=o.useAttrs(),s=o.computed(()=>{const{secondary:e,...l}=t;return l}),r=o.computed(()=>["nano-button",t.secondary?"app-button-secondary":""]),a=e=>{p("click",e)};return(e,l)=>{const c=o.resolveComponent("el-button");return e.$slots.default?(o.openBlock(),o.createBlock(c,o.mergeProps({key:0},{...s.value,...o.unref(n)},{class:r.value,onClick:a}),o.createSlots({default:o.withCtx(()=>[o.renderSlot(e.$slots,"default")]),_:2},[e.$slots.loading?{name:"loading",fn:o.withCtx(()=>[o.renderSlot(e.$slots,"loading")]),key:"0"}:void 0]),1040,["class"])):(o.openBlock(),o.createBlock(c,o.mergeProps({key:1},{...s.value,...o.unref(n)},{class:r.value,onClick:a}),o.createSlots({_:2},[e.$slots.loading?{name:"loading",fn:o.withCtx(()=>[o.renderSlot(e.$slots,"loading")]),key:"0"}:void 0]),1040,["class"]))}}});exports._sfc_main=f;

package/dist/NanoButton.vue_vue_type_script_setup_true_lang-DgnSKBXL.js

@@ -0,0 +1,57 @@
+import { defineComponent as v, useAttrs as B, computed as i, resolveComponent as _, openBlock as d, createBlock as p, mergeProps as m, unref as f, createSlots as k, withCtx as t, renderSlot as n } from "vue";
+import { buttonProps as $, buttonEmits as C } from "element-plus";
+const P = {
+  ...$,
+  secondary: Boolean
+}, A = /* @__PURE__ */ v({
+  name: "NanoButton",
+  inheritAttrs: !1,
+  __name: "NanoButton",
+  props: P,
+  emits: C,
+  setup(y, { emit: b }) {
+    const s = y, g = b, e = B(), a = i(() => {
+      const { secondary: o, ...c } = s;
+      return c;
+    }), r = i(() => [
+      "nano-button",
+      s.secondary ? "app-button-secondary" : ""
+    ]), l = (o) => {
+      g("click", o);
+    };
+    return (o, c) => {
+      const u = _("el-button");
+      return o.$slots.default ? (d(), p(u, m({ key: 0 }, { ...a.value, ...f(e) }, {
+        class: r.value,
+        onClick: l
+      }), k({
+        default: t(() => [
+          n(o.$slots, "default")
+        ]),
+        _: 2
+      }, [
+        o.$slots.loading ? {
+          name: "loading",
+          fn: t(() => [
+            n(o.$slots, "loading")
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1040, ["class"])) : (d(), p(u, m({ key: 1 }, { ...a.value, ...f(e) }, {
+        class: r.value,
+        onClick: l
+      }), k({ _: 2 }, [
+        o.$slots.loading ? {
+          name: "loading",
+          fn: t(() => [
+            n(o.$slots, "loading")
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1040, ["class"]));
+    };
+  }
+});
+export {
+  A as _
+};

package/dist/components/NanoExportButton.vue.d.ts

@@ -0,0 +1,93 @@
+declare function __VLS_template(): {
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    attrs: Partial<{}>;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    readonly size: {
+        readonly type: import("vue").PropType<import("element-plus/es/utils/vue/props/types.js").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly disabled: import("element-plus/es/utils/vue/props/types.js").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
+    readonly type: import("element-plus/es/utils/vue/props/types.js").EpPropFinalized<StringConstructor, "" | "default" | "info" | "primary" | "success" | "warning" | "text" | "danger", unknown, "", boolean>;
+    readonly icon: {
+        readonly type: import("vue").PropType<import("element-plus/es/utils/vue/props/types.js").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | (((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component)) | null)[], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly nativeType: import("element-plus/es/utils/vue/props/types.js").EpPropFinalized<StringConstructor, "button" | "reset" | "submit", unknown, "button", boolean>;
+    readonly loading: BooleanConstructor;
+    readonly loadingIcon: import("element-plus/es/utils/vue/props/types.js").EpPropFinalized<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | (((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component)) | null)[], unknown, unknown, () => import("vue").DefineComponent<{}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, boolean>;
+    readonly plain: import("element-plus/es/utils/vue/props/types.js").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
+    readonly text: import("element-plus/es/utils/vue/props/types.js").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
+    readonly link: BooleanConstructor;
+    readonly bg: BooleanConstructor;
+    readonly autofocus: BooleanConstructor;
+    readonly round: import("element-plus/es/utils/vue/props/types.js").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
+    readonly circle: BooleanConstructor;
+    readonly dashed: import("element-plus/es/utils/vue/props/types.js").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
+    readonly color: StringConstructor;
+    readonly dark: BooleanConstructor;
+    readonly autoInsertSpace: import("element-plus/es/utils/vue/props/types.js").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
+    readonly tag: import("element-plus/es/utils/vue/props/types.js").EpPropFinalized<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | (((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component)) | null)[], unknown, unknown, "button", boolean>;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly size: {
+        readonly type: import("vue").PropType<import("element-plus/es/utils/vue/props/types.js").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly disabled: import("element-plus/es/utils/vue/props/types.js").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
+    readonly type: import("element-plus/es/utils/vue/props/types.js").EpPropFinalized<StringConstructor, "" | "default" | "info" | "primary" | "success" | "warning" | "text" | "danger", unknown, "", boolean>;
+    readonly icon: {
+        readonly type: import("vue").PropType<import("element-plus/es/utils/vue/props/types.js").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | (((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component)) | null)[], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly nativeType: import("element-plus/es/utils/vue/props/types.js").EpPropFinalized<StringConstructor, "button" | "reset" | "submit", unknown, "button", boolean>;
+    readonly loading: BooleanConstructor;
+    readonly loadingIcon: import("element-plus/es/utils/vue/props/types.js").EpPropFinalized<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | (((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component)) | null)[], unknown, unknown, () => import("vue").DefineComponent<{}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, boolean>;
+    readonly plain: import("element-plus/es/utils/vue/props/types.js").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
+    readonly text: import("element-plus/es/utils/vue/props/types.js").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
+    readonly link: BooleanConstructor;
+    readonly bg: BooleanConstructor;
+    readonly autofocus: BooleanConstructor;
+    readonly round: import("element-plus/es/utils/vue/props/types.js").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
+    readonly circle: BooleanConstructor;
+    readonly dashed: import("element-plus/es/utils/vue/props/types.js").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
+    readonly color: StringConstructor;
+    readonly dark: BooleanConstructor;
+    readonly autoInsertSpace: import("element-plus/es/utils/vue/props/types.js").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
+    readonly tag: import("element-plus/es/utils/vue/props/types.js").EpPropFinalized<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | (((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component)) | null)[], unknown, unknown, "button", boolean>;
+}>> & Readonly<{}>, {
+    readonly type: import("element-plus/es/utils/vue/props/types.js").EpPropMergeType<StringConstructor, "" | "default" | "info" | "primary" | "success" | "warning" | "text" | "danger", unknown>;
+    readonly text: import("element-plus/es/utils/vue/props/types.js").EpPropMergeType<BooleanConstructor, unknown, unknown>;
+    readonly disabled: import("element-plus/es/utils/vue/props/types.js").EpPropMergeType<BooleanConstructor, unknown, unknown>;
+    readonly nativeType: import("element-plus/es/utils/vue/props/types.js").EpPropMergeType<StringConstructor, "button" | "reset" | "submit", unknown>;
+    readonly loading: boolean;
+    readonly loadingIcon: import("element-plus/es/utils/vue/props/types.js").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | ((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | null)[], unknown, unknown>;
+    readonly plain: import("element-plus/es/utils/vue/props/types.js").EpPropMergeType<BooleanConstructor, unknown, unknown>;
+    readonly link: boolean;
+    readonly bg: boolean;
+    readonly autofocus: boolean;
+    readonly round: import("element-plus/es/utils/vue/props/types.js").EpPropMergeType<BooleanConstructor, unknown, unknown>;
+    readonly circle: boolean;
+    readonly dashed: import("element-plus/es/utils/vue/props/types.js").EpPropMergeType<BooleanConstructor, unknown, unknown>;
+    readonly dark: boolean;
+    readonly autoInsertSpace: import("element-plus/es/utils/vue/props/types.js").EpPropMergeType<BooleanConstructor, unknown, unknown>;
+    readonly tag: import("element-plus/es/utils/vue/props/types.js").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | ((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | null)[], unknown, unknown>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/dialog-tabs/NanoDialogTabPage.vue.d.ts

@@ -0,0 +1,60 @@
+declare function __VLS_template(): {
+    slots: {
+        actions?(_: {}): any;
+        default?(_: {}): any;
+    };
+    refs: {};
+    attrs: Partial<{}>;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<{
+    titleKey?: string;
+    title?: string;
+    loading?: boolean;
+    expired?: boolean;
+    fit?: boolean;
+    bodyClass?: string;
+    outerClass?: string;
+    surfaceClass?: string;
+    expiredTextKey?: string;
+    expiredText?: string;
+    closeTextKey?: string;
+    closeText?: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<{
+    titleKey?: string;
+    title?: string;
+    loading?: boolean;
+    expired?: boolean;
+    fit?: boolean;
+    bodyClass?: string;
+    outerClass?: string;
+    surfaceClass?: string;
+    expiredTextKey?: string;
+    expiredText?: string;
+    closeTextKey?: string;
+    closeText?: string;
+}> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {
+    loading: boolean;
+    title: string;
+    titleKey: string;
+    expired: boolean;
+    fit: boolean;
+    bodyClass: string;
+    outerClass: string;
+    surfaceClass: string;
+    expiredTextKey: string;
+    expiredText: string;
+    closeTextKey: string;
+    closeText: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/dialog-tabs/context.d.ts

@@ -0,0 +1,3 @@
+export declare const setDialogContext: (context: unknown, contextKey?: string) => string;
+export declare const getDialogContext: <TContext>(dialogId: unknown) => TContext | undefined;
+export declare const removeDialogContext: (dialogId: unknown) => void;

package/dist/dialog-tabs/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("vue"),_=require("../NanoButton.vue_vue_type_script_setup_true_lang-D1yLWi2K.cjs"),D=require("vue-router"),h=Symbol("NanoDialogTabs");let v;const w=t=>{const e=()=>typeof t.mode=="function"?t.mode():t.mode,a=t.translate??(n=>n);return{...t,getMode:e,t:a}},S=t=>{const e=w(t);return v=e,e},k=t=>{const e=w(t);return{context:e,install(a){v=e,a.provide(h,e)}}},c=()=>{const t=o.hasInjectionContext()?o.inject(h,v):v;if(t==null)throw new Error("Nano dialog tabs is not configured. Call app.use(createNanoDialogTabs(...)) first.");return t},M={class:"flex shrink-0 items-center justify-between gap-app-md border-b border-app-border-light p-app-lg"},E={class:"app-section-title"},B=o.defineComponent({name:"NanoDialogTabPage",__name:"NanoDialogTabPage",props:{titleKey:{default:""},title:{default:void 0},loading:{type:Boolean,default:!1},expired:{type:Boolean,default:!1},fit:{type:Boolean,default:!1},bodyClass:{default:"overflow-x-auto"},outerClass:{default:""},surfaceClass:{default:""},expiredTextKey:{default:"dialog.contextExpired"},expiredText:{default:void 0},closeTextKey:{default:"button.close"},closeText:{default:void 0}},emits:["close"],setup(t,{emit:e}){const a=t,n=e,{t:l}=c(),r=o.computed(()=>a.title??l(a.titleKey)),u=o.computed(()=>a.expiredText??l(a.expiredTextKey)),d=o.computed(()=>a.closeText??l(a.closeTextKey)),s=o.computed(()=>[a.fit?"h-full min-h-0 overflow-hidden p-app-md":"h-full min-h-0 overflow-y-auto p-app-md",a.outerClass]),i=o.computed(()=>[a.fit?"app-surface flex h-full min-h-0 flex-col":"app-surface",a.surfaceClass]),m=o.computed(()=>[a.fit?"min-h-0 flex-1 overflow-hidden":a.bodyClass]);return(f,g)=>{const x=o.resolveComponent("el-empty"),p=o.resolveDirective("loading");return o.openBlock(),o.createElementBlock("div",{class:o.normalizeClass(s.value)},[o.createElementVNode("div",{class:o.normalizeClass(i.value)},[o.createElementVNode("div",M,[o.createElementVNode("span",E,o.toDisplayString(r.value),1),o.renderSlot(f.$slots,"actions")]),o.withDirectives((o.openBlock(),o.createElementBlock("div",{class:o.normalizeClass(m.value)},[t.expired?(o.openBlock(),o.createBlock(x,{key:1,description:u.value},{default:o.withCtx(()=>[o.createVNode(_._sfc_main,{icon:"Close",onClick:g[0]||(g[0]=U=>n("close"))},{default:o.withCtx(()=>[o.createTextVNode(o.toDisplayString(d.value),1)]),_:1})]),_:1},8,["description"])):o.renderSlot(f.$slots,"default",{key:0})],2)),[[p,t.loading]])],2)],2)}}}),T=new Map,I=()=>typeof crypto<"u"&&typeof crypto.randomUUID=="function"?crypto.randomUUID():`${Date.now()}-${Math.random().toString(36).slice(2)}`,N=(t,e)=>{const a=e??I();return T.set(a,t),a},y=t=>{if(typeof t=="string")return T.get(t)},$=t=>{typeof t=="string"&&T.delete(t)},b="nano-dialog-result",P=t=>{window.dispatchEvent(new CustomEvent(b,{detail:t}))},q=t=>{const e=a=>{t(a.detail)};return window.addEventListener(b,e),()=>{window.removeEventListener(b,e)}},C=(t,e)=>`${t.replace(/\/$/,"")}${e}`,A=(t,e)=>`dialog-${t}-${e.replace(/[^a-zA-Z0-9]+/g,"-")}`,K=t=>typeof t=="string"?t:t==null?void 0:t.path,V=(t,e,a,n)=>{const l=c(),r=typeof l.defaultRouteMeta=="function"?l.defaultRouteMeta({key:e,path:a,titleKey:n,config:t}):l.defaultRouteMeta??{};return{title:n??t.title,icon:"Setting",dialogTab:!0,...r}},z=(t,e,a)=>{const n=c(),l=n.registry[t];if(l==null)return;const r=A(t,e);n.router.hasRoute(r)||n.router.addRoute(n.parentRouteName,{path:e,name:r,component:l.component,meta:V(l,t,e,a),props:l.props})},F=(t,e)=>{const a=c();if(e.route!==void 0)return typeof e.route=="string"?e.route:{...e.route,query:e.query??e.route.query};if(e.key===void 0)return;const n=a.registry[e.key];if(n==null)return;const l=C(t,e.routeSuffix??n.suffix),r=C(t,e.routePatternSuffix??e.routeSuffix??n.suffix);return z(e.key,r,e.titleKey),{path:l,query:e.query}},j=()=>{const t=D.useRoute(),e=c();return{openDialog:async n=>{if(e.getMode()!=="tab"){n.openModal();return}const l=F(t.path,n);if(l===void 0){n.openModal();return}const r=K(l);n.context!==void 0&&r!==void 0&&r!==""&&N(n.context,r),await e.router.push(l)}}},R=()=>{const t=D.useRoute(),e=c();return{closeCurrentDialogTab:()=>{var f,g,x;const n=e.tabAdapter.getTabs(),l=n.findIndex(p=>p.fullPath===t.fullPath);if(l<=0){e.router.back();return}const r=n[l],u=typeof((f=r==null?void 0:r.meta)==null?void 0:f.dialogSourceFullPath)=="string"?r.meta.dialogSourceFullPath:void 0,d=l<n.length-1?(g=n[l+1])==null?void 0:g.fullPath:(x=n[l-1])==null?void 0:x.fullPath,s=u!==void 0&&u!==""?u:d;if(s==null||s===""){e.router.back();return}const i=l===e.tabAdapter.getCurrentIndex();e.tabAdapter.deleteTab(l);const m=e.tabAdapter.getTabs().findIndex(p=>p.fullPath===s);i&&m>=0&&e.tabAdapter.setCurrentIndex(m),e.router.replace(s)}}},O=t=>{const e=D.useRoute(),a=c(),{closeCurrentDialogTab:n}=R(),l=o.computed(()=>y(e.path)??y(e.query.dialogId)),r=o.computed(()=>typeof t=="function"&&t.length>0?t({route:e,dialogContext:l}):o.toValue(t)),u=()=>{const s=a.tabAdapter.getTabs().find(i=>i.fullPath===e.fullPath);s!=null&&(s.title=r.value)},d=(s,i)=>{P({key:s,type:"saved",payload:i}),n()};return o.watch(()=>[e.fullPath,r.value],u,{immediate:!0}),{route:e,dialogContext:l,pageTitleKey:r,closeCurrentDialogTab:n,emitSavedAndClose:d,syncTabTitle:u}};exports.NanoDialogTabPage=B;exports.configureNanoDialogTabs=S;exports.createNanoDialogTabs=k;exports.emitDialogResult=P;exports.getDialogContext=y;exports.nanoDialogTabsKey=h;exports.onDialogResult=q;exports.removeDialogContext=$;exports.setDialogContext=N;exports.useDialogOpen=j;exports.useDialogPage=O;exports.useDialogTabClose=R;exports.useNanoDialogTabs=c;

package/dist/dialog-tabs/index.d.ts

@@ -0,0 +1,8 @@
+export { default as NanoDialogTabPage } from './NanoDialogTabPage.vue';
+export * from './context';
+export * from './plugin';
+export * from './result';
+export * from './types';
+export * from './useDialogOpen';
+export * from './useDialogPage';
+export * from './useDialogTabClose';

package/dist/dialog-tabs/index.mjs

@@ -0,0 +1,230 @@
+import { hasInjectionContext as $, inject as I, defineComponent as A, computed as c, resolveComponent as E, resolveDirective as K, openBlock as y, createElementBlock as w, normalizeClass as b, createElementVNode as h, toDisplayString as P, renderSlot as R, withDirectives as q, createBlock as B, withCtx as N, createVNode as F, createTextVNode as U, toValue as V, watch as j } from "vue";
+import { _ as z } from "../NanoButton.vue_vue_type_script_setup_true_lang-DgnSKBXL.js";
+import { useRoute as C } from "vue-router";
+const k = Symbol("NanoDialogTabs");
+let v;
+const S = (t) => {
+  const e = () => typeof t.mode == "function" ? t.mode() : t.mode, o = t.translate ?? ((n) => n);
+  return {
+    ...t,
+    getMode: e,
+    t: o
+  };
+}, re = (t) => {
+  const e = S(t);
+  return v = e, e;
+}, le = (t) => {
+  const e = S(t);
+  return {
+    context: e,
+    install(o) {
+      v = e, o.provide(k, e);
+    }
+  };
+}, u = () => {
+  const t = $() ? I(k, v) : v;
+  if (t == null)
+    throw new Error("Nano dialog tabs is not configured. Call app.use(createNanoDialogTabs(...)) first.");
+  return t;
+}, L = { class: "flex shrink-0 items-center justify-between gap-app-md border-b border-app-border-light p-app-lg" }, O = { class: "app-section-title" }, se = /* @__PURE__ */ A({
+  name: "NanoDialogTabPage",
+  __name: "NanoDialogTabPage",
+  props: {
+    titleKey: { default: "" },
+    title: { default: void 0 },
+    loading: { type: Boolean, default: !1 },
+    expired: { type: Boolean, default: !1 },
+    fit: { type: Boolean, default: !1 },
+    bodyClass: { default: "overflow-x-auto" },
+    outerClass: { default: "" },
+    surfaceClass: { default: "" },
+    expiredTextKey: { default: "dialog.contextExpired" },
+    expiredText: { default: void 0 },
+    closeTextKey: { default: "button.close" },
+    closeText: { default: void 0 }
+  },
+  emits: ["close"],
+  setup(t, { emit: e }) {
+    const o = t, n = e, { t: a } = u(), r = c(() => o.title ?? a(o.titleKey)), s = c(() => o.expiredText ?? a(o.expiredTextKey)), d = c(() => o.closeText ?? a(o.closeTextKey)), l = c(() => [
+      o.fit ? "h-full min-h-0 overflow-hidden p-app-md" : "h-full min-h-0 overflow-y-auto p-app-md",
+      o.outerClass
+    ]), i = c(() => [
+      o.fit ? "app-surface flex h-full min-h-0 flex-col" : "app-surface",
+      o.surfaceClass
+    ]), x = c(() => [
+      o.fit ? "min-h-0 flex-1 overflow-hidden" : o.bodyClass
+    ]);
+    return (f, p) => {
+      const m = E("el-empty"), g = K("loading");
+      return y(), w("div", {
+        class: b(l.value)
+      }, [
+        h("div", {
+          class: b(i.value)
+        }, [
+          h("div", L, [
+            h("span", O, P(r.value), 1),
+            R(f.$slots, "actions")
+          ]),
+          q((y(), w("div", {
+            class: b(x.value)
+          }, [
+            t.expired ? (y(), B(m, {
+              key: 1,
+              description: s.value
+            }, {
+              default: N(() => [
+                F(z, {
+                  icon: "Close",
+                  onClick: p[0] || (p[0] = (te) => n("close"))
+                }, {
+                  default: N(() => [
+                    U(P(d.value), 1)
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }, 8, ["description"])) : R(f.$slots, "default", { key: 0 })
+          ], 2)), [
+            [g, t.loading]
+          ])
+        ], 2)
+      ], 2);
+    };
+  }
+}), D = /* @__PURE__ */ new Map(), Z = () => typeof crypto < "u" && typeof crypto.randomUUID == "function" ? crypto.randomUUID() : `${Date.now()}-${Math.random().toString(36).slice(2)}`, G = (t, e) => {
+  const o = e ?? Z();
+  return D.set(o, t), o;
+}, M = (t) => {
+  if (typeof t == "string")
+    return D.get(t);
+}, ce = (t) => {
+  typeof t == "string" && D.delete(t);
+}, T = "nano-dialog-result", H = (t) => {
+  window.dispatchEvent(new CustomEvent(T, {
+    detail: t
+  }));
+}, ie = (t) => {
+  const e = (o) => {
+    t(o.detail);
+  };
+  return window.addEventListener(T, e), () => {
+    window.removeEventListener(T, e);
+  };
+}, _ = (t, e) => `${t.replace(/\/$/, "")}${e}`, J = (t, e) => `dialog-${t}-${e.replace(/[^a-zA-Z0-9]+/g, "-")}`, Q = (t) => typeof t == "string" ? t : t == null ? void 0 : t.path, W = (t, e, o, n) => {
+  const a = u(), r = typeof a.defaultRouteMeta == "function" ? a.defaultRouteMeta({ key: e, path: o, titleKey: n, config: t }) : a.defaultRouteMeta ?? {};
+  return {
+    title: n ?? t.title,
+    icon: "Setting",
+    dialogTab: !0,
+    ...r
+  };
+}, X = (t, e, o) => {
+  const n = u(), a = n.registry[t];
+  if (a == null)
+    return;
+  const r = J(t, e);
+  n.router.hasRoute(r) || n.router.addRoute(n.parentRouteName, {
+    path: e,
+    name: r,
+    component: a.component,
+    meta: W(a, t, e, o),
+    props: a.props
+  });
+}, Y = (t, e) => {
+  const o = u();
+  if (e.route !== void 0)
+    return typeof e.route == "string" ? e.route : {
+      ...e.route,
+      query: e.query ?? e.route.query
+    };
+  if (e.key === void 0)
+    return;
+  const n = o.registry[e.key];
+  if (n == null)
+    return;
+  const a = _(t, e.routeSuffix ?? n.suffix), r = _(t, e.routePatternSuffix ?? e.routeSuffix ?? n.suffix);
+  return X(e.key, r, e.titleKey), {
+    path: a,
+    query: e.query
+  };
+}, ue = () => {
+  const t = C(), e = u();
+  return {
+    openDialog: async (n) => {
+      if (e.getMode() !== "tab") {
+        n.openModal();
+        return;
+      }
+      const a = Y(t.path, n);
+      if (a === void 0) {
+        n.openModal();
+        return;
+      }
+      const r = Q(a);
+      n.context !== void 0 && r !== void 0 && r !== "" && G(n.context, r), await e.router.push(a);
+    }
+  };
+}, ee = () => {
+  const t = C(), e = u();
+  return {
+    closeCurrentDialogTab: () => {
+      var f, p, m;
+      const n = e.tabAdapter.getTabs(), a = n.findIndex((g) => g.fullPath === t.fullPath);
+      if (a <= 0) {
+        e.router.back();
+        return;
+      }
+      const r = n[a], s = typeof ((f = r == null ? void 0 : r.meta) == null ? void 0 : f.dialogSourceFullPath) == "string" ? r.meta.dialogSourceFullPath : void 0, d = a < n.length - 1 ? (p = n[a + 1]) == null ? void 0 : p.fullPath : (m = n[a - 1]) == null ? void 0 : m.fullPath, l = s !== void 0 && s !== "" ? s : d;
+      if (l == null || l === "") {
+        e.router.back();
+        return;
+      }
+      const i = a === e.tabAdapter.getCurrentIndex();
+      e.tabAdapter.deleteTab(a);
+      const x = e.tabAdapter.getTabs().findIndex((g) => g.fullPath === l);
+      i && x >= 0 && e.tabAdapter.setCurrentIndex(x), e.router.replace(l);
+    }
+  };
+}, de = (t) => {
+  const e = C(), o = u(), { closeCurrentDialogTab: n } = ee(), a = c(
+    () => M(e.path) ?? M(e.query.dialogId)
+  ), r = c(() => typeof t == "function" && t.length > 0 ? t({ route: e, dialogContext: a }) : V(t)), s = () => {
+    const l = o.tabAdapter.getTabs().find((i) => i.fullPath === e.fullPath);
+    l != null && (l.title = r.value);
+  }, d = (l, i) => {
+    H({
+      key: l,
+      type: "saved",
+      payload: i
+    }), n();
+  };
+  return j(
+    () => [e.fullPath, r.value],
+    s,
+    { immediate: !0 }
+  ), {
+    route: e,
+    dialogContext: a,
+    pageTitleKey: r,
+    closeCurrentDialogTab: n,
+    emitSavedAndClose: d,
+    syncTabTitle: s
+  };
+};
+export {
+  se as NanoDialogTabPage,
+  re as configureNanoDialogTabs,
+  le as createNanoDialogTabs,
+  H as emitDialogResult,
+  M as getDialogContext,
+  k as nanoDialogTabsKey,
+  ie as onDialogResult,
+  ce as removeDialogContext,
+  G as setDialogContext,
+  ue as useDialogOpen,
+  de as useDialogPage,
+  ee as useDialogTabClose,
+  u as useNanoDialogTabs
+};

package/dist/dialog-tabs/plugin.d.ts

@@ -0,0 +1,4 @@
+import type { NanoDialogTabsContext, NanoDialogTabsOptions, NanoDialogTabsPlugin } from './types';
+export declare const configureNanoDialogTabs: <TKey extends string>(options: NanoDialogTabsOptions<TKey>) => NanoDialogTabsContext<TKey>;
+export declare const createNanoDialogTabs: <TKey extends string>(options: NanoDialogTabsOptions<TKey>) => NanoDialogTabsPlugin<TKey>;
+export declare const useNanoDialogTabs: () => NanoDialogTabsContext<string>;

package/dist/dialog-tabs/result.d.ts

@@ -0,0 +1,7 @@
+export interface DialogResult<TPayload = unknown> {
+    key: string;
+    type: 'saved' | 'cancelled';
+    payload?: TPayload;
+}
+export declare const emitDialogResult: <TPayload>(result: DialogResult<TPayload>) => void;
+export declare const onDialogResult: (listener: (result: DialogResult) => void) => () => void;

package/dist/dialog-tabs/types.d.ts

@@ -0,0 +1,62 @@
+import type { App, ComputedRef, InjectionKey, MaybeRefOrGetter, Plugin } from 'vue';
+import type { LocationQueryRaw, RouteLocationNormalizedLoaded, RouteLocationRaw, Router } from 'vue-router';
+export type DialogOpenMode = 'dialog' | 'tab';
+export interface NanoDialogRouteConfig {
+    suffix: string;
+    title: string;
+    component: unknown;
+    props?: unknown;
+}
+export type NanoDialogRegistry<TKey extends string = string> = Partial<Record<TKey, NanoDialogRouteConfig>>;
+export interface NanoDialogTabData {
+    title: string;
+    name?: string | symbol | null;
+    route?: unknown;
+    fullPath: string;
+    meta?: Record<string, unknown>;
+}
+export interface NanoDialogTabAdapter {
+    getTabs: () => NanoDialogTabData[];
+    getCurrentIndex: () => number;
+    setCurrentIndex: (index: number) => void;
+    deleteTab: (index: number) => void;
+}
+export interface NanoDialogRouteMetaState<TKey extends string = string> {
+    key: TKey;
+    path: string;
+    titleKey?: string;
+    config: NanoDialogRouteConfig;
+}
+export interface NanoDialogTabsOptions<TKey extends string = string> {
+    router: Router;
+    parentRouteName: string;
+    registry: NanoDialogRegistry<TKey>;
+    mode: DialogOpenMode | (() => DialogOpenMode);
+    tabAdapter: NanoDialogTabAdapter;
+    translate?: (key: string) => string;
+    defaultRouteMeta?: Record<string, unknown> | ((state: NanoDialogRouteMetaState<TKey>) => Record<string, unknown>);
+}
+export interface NanoDialogTabsContext<TKey extends string = string> extends NanoDialogTabsOptions<TKey> {
+    getMode: () => DialogOpenMode;
+    t: (key: string) => string;
+}
+export type NanoDialogTabsPlugin<TKey extends string = string> = Plugin & {
+    install: (app: App) => void;
+    context: NanoDialogTabsContext<TKey>;
+};
+export interface OpenDialogOptions<TKey extends string = string> {
+    key?: TKey;
+    route?: RouteLocationRaw;
+    query?: LocationQueryRaw;
+    context?: unknown;
+    routeSuffix?: string;
+    routePatternSuffix?: string;
+    titleKey?: string;
+    openModal: () => void;
+}
+export interface DialogPageTitleState<TContext> {
+    route: RouteLocationNormalizedLoaded;
+    dialogContext: ComputedRef<TContext | undefined>;
+}
+export type DialogPageTitle<TContext> = MaybeRefOrGetter<string> | ((state: DialogPageTitleState<TContext>) => string);
+export declare const nanoDialogTabsKey: InjectionKey<NanoDialogTabsContext>;

package/dist/dialog-tabs/useDialogOpen.d.ts

@@ -0,0 +1,4 @@
+import type { OpenDialogOptions } from './types';
+export declare const useDialogOpen: <TKey extends string = string>() => {
+    openDialog: (options: OpenDialogOptions<TKey>) => Promise<void>;
+};

package/dist/dialog-tabs/useDialogPage.d.ts

@@ -0,0 +1,9 @@
+import type { DialogPageTitle } from './types';
+export declare const useDialogPage: <TContext = unknown>(titleKey: DialogPageTitle<TContext>) => {
+    route: import("vue-router").RouteLocationNormalizedLoadedGeneric;
+    dialogContext: import("vue").ComputedRef<TContext | undefined>;
+    pageTitleKey: import("vue").ComputedRef<string>;
+    closeCurrentDialogTab: () => void;
+    emitSavedAndClose: <TPayload>(key: string, payload?: TPayload) => void;
+    syncTabTitle: () => void;
+};

package/dist/dialog-tabs/useDialogTabClose.d.ts

@@ -0,0 +1,3 @@
+export declare const useDialogTabClose: () => {
+    closeCurrentDialogTab: () => void;
+};

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),s=require("element-plus"),b={...s.buttonProps,secondary:Boolean},n=e.defineComponent({name:"NanoButton",inheritAttrs:!1,__name:"NanoButton",props:b,emits:s.buttonEmits,setup(r,{emit:t}){const o=r,h=t,p=e.useAttrs(),l=e.computed(()=>{const{secondary:a,...d}=o;return d}),u=e.computed(()=>["nano-button",o.secondary?"app-button-secondary":""]),i=a=>{h("click",a)};return(a,d)=>{const c=e.resolveComponent("el-button");return a.$slots.default?(e.openBlock(),e.createBlock(c,e.mergeProps({key:0},{...l.value,...e.unref(p)},{class:u.value,onClick:i}),e.createSlots({default:e.withCtx(()=>[e.renderSlot(a.$slots,"default")]),_:2},[a.$slots.loading?{name:"loading",fn:e.withCtx(()=>[e.renderSlot(a.$slots,"loading")]),key:"0"}:void 0]),1040,["class"])):(e.openBlock(),e.createBlock(c,e.mergeProps({key:1},{...l.value,...e.unref(p)},{class:u.value,onClick:i}),e.createSlots({_:2},[a.$slots.loading?{name:"loading",fn:e.withCtx(()=>[e.renderSlot(a.$slots,"loading")]),key:"0"}:void 0]),1040,["class"]))}}}),m=e.defineComponent({name:"NanoAddButton",inheritAttrs:!1,__name:"NanoAddButton",props:s.buttonProps,setup(r){return(t,o)=>(e.openBlock(),e.createBlock(n,e.mergeProps({...t.$props,...t.$attrs},{type:"primary",icon:"Plus"}),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default",{},()=>[o[0]||(o[0]=e.createTextVNode("新增",-1))])]),_:3},16))}}),B=e.defineComponent({name:"NanoBackTopButton",inheritAttrs:!1,__name:"NanoBackTopButton",props:s.buttonProps,setup(r){return(t,o)=>t.$slots.default?(e.openBlock(),e.createBlock(n,e.mergeProps({key:0},{...t.$props,...t.$attrs},{secondary:"",class:"app-backtop-button"}),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},16)):(e.openBlock(),e.createBlock(n,e.mergeProps({key:1},{...t.$props,...t.$attrs},{secondary:"",class:"app-backtop-button"}),{default:e.withCtx(()=>[...o[0]||(o[0]=[e.createElementVNode("svg",{class:"app-backtop-icon",viewBox:"0 0 24 24","aria-hidden":"true",focusable:"false"},[e.createElementVNode("path",{d:"M6 5h12"}),e.createElementVNode("path",{d:"M12 19V9"}),e.createElementVNode("path",{d:"m8 13 4-4 4 4"})],-1)])]),_:1},16))}}),f=e.defineComponent({name:"NanoCancelButton",inheritAttrs:!1,__name:"NanoCancelButton",props:s.buttonProps,setup(r){return(t,o)=>(e.openBlock(),e.createBlock(n,e.normalizeProps(e.guardReactiveProps({...t.$props,...t.$attrs})),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default",{},()=>[o[0]||(o[0]=e.createTextVNode("取消",-1))])]),_:3},16))}}),$=e.defineComponent({name:"NanoDeleteButton",inheritAttrs:!1,__name:"NanoDeleteButton",props:s.buttonProps,setup(r){return(t,o)=>t.$slots.default?(e.openBlock(),e.createBlock(n,e.mergeProps({key:0},{...t.$props,...t.$attrs},{type:"danger",icon:"Delete"}),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},16)):(e.openBlock(),e.createBlock(n,e.mergeProps({key:1},{...t.$props,...t.$attrs},{type:"danger",icon:"Delete"}),null,16))}}),k=e.defineComponent({name:"NanoEditButton",inheritAttrs:!1,__name:"NanoEditButton",props:s.buttonProps,setup(r){return(t,o)=>t.$slots.default?(e.openBlock(),e.createBlock(n,e.mergeProps({key:0},{...t.$props,...t.$attrs},{icon:"Edit"}),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},16)):(e.openBlock(),e.createBlock(n,e.mergeProps({key:1},{...t.$props,...t.$attrs},{icon:"Edit"}),null,16))}}),N=e.defineComponent({name:"NanoImportButton",inheritAttrs:!1,__name:"NanoImportButton",props:s.buttonProps,setup(r){return(t,o)=>(e.openBlock(),e.createBlock(n,e.mergeProps({...t.$props,...t.$attrs},{class:"app-button-import",icon:"Upload"}),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default",{},()=>[o[0]||(o[0]=e.createTextVNode("导入",-1))])]),_:3},16))}}),_=e.defineComponent({name:"NanoManageButton",inheritAttrs:!1,__name:"NanoManageButton",props:s.buttonProps,setup(r){return(t,o)=>t.$slots.default?(e.openBlock(),e.createBlock(n,e.mergeProps({key:0},{...t.$props,...t.$attrs},{type:"primary",icon:"Setting"}),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},16)):(e.openBlock(),e.createBlock(n,e.mergeProps({key:1},{...t.$props,...t.$attrs},{type:"primary",icon:"Setting"}),null,16))}}),P=e.defineComponent({name:"NanoMoveButton",inheritAttrs:!1,__name:"NanoMoveButton",props:s.buttonProps,setup(r){return(t,o)=>(e.openBlock(),e.createBlock(n,e.mergeProps({...t.$props,...t.$attrs},{icon:"Rank"}),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default",{},()=>[o[0]||(o[0]=e.createTextVNode("移动",-1))])]),_:3},16))}}),g=e.defineComponent({name:"NanoSubmitButton",inheritAttrs:!1,__name:"NanoSubmitButton",props:s.buttonProps,setup(r){return(t,o)=>(e.openBlock(),e.createBlock(n,e.mergeProps({...t.$props,...t.$attrs},{type:"primary"}),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default",{},()=>[o[0]||(o[0]=e.createTextVNode("保存",-1))])]),_:3},16))}}),y=e.defineComponent({name:"NanoTextAddButton",inheritAttrs:!1,__name:"NanoTextAddButton",props:s.buttonProps,setup(r){return(t,o)=>t.$slots.default?(e.openBlock(),e.createBlock(n,e.mergeProps({key:0},{...t.$props,...t.$attrs},{text:"",icon:"Plus"}),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},16)):(e.openBlock(),e.createBlock(n,e.mergeProps({key:1},{...t.$props,...t.$attrs},{text:"",icon:"Plus"}),null,16))}}),S=[n,m,y,P,N,k,_,$,g,f,B],C=r=>{S.forEach(t=>{r.component(t.name||"AnonymousComponent",t)})},A={install:C};exports.NanoAddButton=m;exports.NanoBackTopButton=B;exports.NanoButton=n;exports.NanoCancelButton=f;exports.NanoDeleteButton=$;exports.NanoEditButton=k;exports.NanoImportButton=N;exports.NanoManageButton=_;exports.NanoMoveButton=P;exports.NanoSubmitButton=g;exports.NanoTextAddButton=y;exports.default=A;exports.install=C;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),s=require("element-plus"),n=require("./NanoButton.vue_vue_type_script_setup_true_lang-D1yLWi2K.cjs"),a=e.defineComponent({name:"NanoAddButton",inheritAttrs:!1,__name:"NanoAddButton",props:s.buttonProps,setup(r){return(t,o)=>(e.openBlock(),e.createBlock(n._sfc_main,e.mergeProps({...t.$props,...t.$attrs},{type:"primary",icon:"Plus"}),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default",{},()=>[o[0]||(o[0]=e.createTextVNode("新增",-1))])]),_:3},16))}}),p=e.defineComponent({name:"NanoBackTopButton",inheritAttrs:!1,__name:"NanoBackTopButton",props:s.buttonProps,setup(r){return(t,o)=>t.$slots.default?(e.openBlock(),e.createBlock(n._sfc_main,e.mergeProps({key:0},{...t.$props,...t.$attrs},{secondary:"",class:"app-backtop-button"}),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},16)):(e.openBlock(),e.createBlock(n._sfc_main,e.mergeProps({key:1},{...t.$props,...t.$attrs},{secondary:"",class:"app-backtop-button"}),{default:e.withCtx(()=>[...o[0]||(o[0]=[e.createElementVNode("svg",{class:"app-backtop-icon",viewBox:"0 0 24 24","aria-hidden":"true",focusable:"false"},[e.createElementVNode("path",{d:"M6 5h12"}),e.createElementVNode("path",{d:"M12 19V9"}),e.createElementVNode("path",{d:"m8 13 4-4 4 4"})],-1)])]),_:1},16))}}),l=e.defineComponent({name:"NanoCancelButton",inheritAttrs:!1,__name:"NanoCancelButton",props:s.buttonProps,setup(r){return(t,o)=>(e.openBlock(),e.createBlock(n._sfc_main,e.normalizeProps(e.guardReactiveProps({...t.$props,...t.$attrs})),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default",{},()=>[o[0]||(o[0]=e.createTextVNode("取消",-1))])]),_:3},16))}}),u=e.defineComponent({name:"NanoDeleteButton",inheritAttrs:!1,__name:"NanoDeleteButton",props:s.buttonProps,setup(r){return(t,o)=>t.$slots.default?(e.openBlock(),e.createBlock(n._sfc_main,e.mergeProps({key:0},{...t.$props,...t.$attrs},{type:"danger",icon:"Delete"}),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},16)):(e.openBlock(),e.createBlock(n._sfc_main,e.mergeProps({key:1},{...t.$props,...t.$attrs},{type:"danger",icon:"Delete"}),null,16))}}),i=e.defineComponent({name:"NanoEditButton",inheritAttrs:!1,__name:"NanoEditButton",props:s.buttonProps,setup(r){return(t,o)=>t.$slots.default?(e.openBlock(),e.createBlock(n._sfc_main,e.mergeProps({key:0},{...t.$props,...t.$attrs},{icon:"Edit"}),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},16)):(e.openBlock(),e.createBlock(n._sfc_main,e.mergeProps({key:1},{...t.$props,...t.$attrs},{icon:"Edit"}),null,16))}}),m=e.defineComponent({name:"NanoExportButton",inheritAttrs:!1,__name:"NanoExportButton",props:s.buttonProps,setup(r){return(t,o)=>(e.openBlock(),e.createBlock(n._sfc_main,e.mergeProps({...t.$props,...t.$attrs},{class:"app-button-export",icon:"Download"}),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default",{},()=>[o[0]||(o[0]=e.createTextVNode("导出",-1))])]),_:3},16))}}),c=e.defineComponent({name:"NanoImportButton",inheritAttrs:!1,__name:"NanoImportButton",props:s.buttonProps,setup(r){return(t,o)=>(e.openBlock(),e.createBlock(n._sfc_main,e.mergeProps({...t.$props,...t.$attrs},{class:"app-button-import",icon:"Upload"}),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default",{},()=>[o[0]||(o[0]=e.createTextVNode("导入",-1))])]),_:3},16))}}),d=e.defineComponent({name:"NanoManageButton",inheritAttrs:!1,__name:"NanoManageButton",props:s.buttonProps,setup(r){return(t,o)=>t.$slots.default?(e.openBlock(),e.createBlock(n._sfc_main,e.mergeProps({key:0},{...t.$props,...t.$attrs},{type:"primary",icon:"Setting"}),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},16)):(e.openBlock(),e.createBlock(n._sfc_main,e.mergeProps({key:1},{...t.$props,...t.$attrs},{type:"primary",icon:"Setting"}),null,16))}}),f=e.defineComponent({name:"NanoMoveButton",inheritAttrs:!1,__name:"NanoMoveButton",props:s.buttonProps,setup(r){return(t,o)=>(e.openBlock(),e.createBlock(n._sfc_main,e.mergeProps({...t.$props,...t.$attrs},{icon:"Rank"}),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default",{},()=>[o[0]||(o[0]=e.createTextVNode("移动",-1))])]),_:3},16))}}),_=e.defineComponent({name:"NanoSubmitButton",inheritAttrs:!1,__name:"NanoSubmitButton",props:s.buttonProps,setup(r){return(t,o)=>(e.openBlock(),e.createBlock(n._sfc_main,e.mergeProps({...t.$props,...t.$attrs},{type:"primary"}),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default",{},()=>[o[0]||(o[0]=e.createTextVNode("保存",-1))])]),_:3},16))}}),B=e.defineComponent({name:"NanoTextAddButton",inheritAttrs:!1,__name:"NanoTextAddButton",props:s.buttonProps,setup(r){return(t,o)=>t.$slots.default?(e.openBlock(),e.createBlock(n._sfc_main,e.mergeProps({key:0},{...t.$props,...t.$attrs},{text:"",icon:"Plus"}),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},16)):(e.openBlock(),e.createBlock(n._sfc_main,e.mergeProps({key:1},{...t.$props,...t.$attrs},{text:"",icon:"Plus"}),null,16))}}),k=[n._sfc_main,a,B,f,c,m,i,d,u,_,l,p],$=r=>{k.forEach(t=>{r.component(t.name||"AnonymousComponent",t)})},N={install:$};exports.NanoButton=n._sfc_main;exports.NanoAddButton=a;exports.NanoBackTopButton=p;exports.NanoCancelButton=l;exports.NanoDeleteButton=u;exports.NanoEditButton=i;exports.NanoExportButton=m;exports.NanoImportButton=c;exports.NanoManageButton=d;exports.NanoMoveButton=f;exports.NanoSubmitButton=_;exports.NanoTextAddButton=B;exports.default=N;exports.install=$;

package/dist/index.d.ts

@@ -6,6 +6,7 @@ import NanoButton from './components/NanoButton.vue';
 import NanoCancelButton from './components/NanoCancelButton.vue';
 import NanoDeleteButton from './components/NanoDeleteButton.vue';
 import NanoEditButton from './components/NanoEditButton.vue';
+import NanoExportButton from './components/NanoExportButton.vue';
 import NanoImportButton from './components/NanoImportButton.vue';
 import NanoManageButton from './components/NanoManageButton.vue';
 import NanoMoveButton from './components/NanoMoveButton.vue';
@@ -13,6 +14,6 @@ import NanoSubmitButton from './components/NanoSubmitButton.vue';
 import NanoTextAddButton from './components/NanoTextAddButton.vue';
 declare const install: (app: App) => void;
 declare const NanoButtons: Plugin;
-export { NanoButton, NanoAddButton, NanoTextAddButton, NanoMoveButton, NanoImportButton, NanoEditButton, NanoManageButton, NanoDeleteButton, NanoSubmitButton, NanoCancelButton, NanoBackTopButton, install, };
+export { NanoButton, NanoAddButton, NanoTextAddButton, NanoMoveButton, NanoImportButton, NanoExportButton, NanoEditButton, NanoManageButton, NanoDeleteButton, NanoSubmitButton, NanoCancelButton, NanoBackTopButton, install, };
 export type { NanoButtonProps } from './components/props';
 export default NanoButtons;

package/dist/index.mjs

@@ -1,271 +1,241 @@
-import { defineComponent as l, useAttrs as g, computed as k, resolveComponent as v, openBlock as n, createBlock as s, mergeProps as e, unref as A, createSlots as b, withCtx as r, renderSlot as u, createTextVNode as m, createElementVNode as f, normalizeProps as P, guardReactiveProps as C } from "vue";
-import { buttonProps as i, buttonEmits as E } from "element-plus";
-const M = {
-  ...i,
-  secondary: Boolean
-}, a = /* @__PURE__ */ l({
-  name: "NanoButton",
-  inheritAttrs: !1,
-  __name: "NanoButton",
-  props: M,
-  emits: E,
-  setup(p, { emit: t }) {
-    const o = p, h = t, $ = g(), c = k(() => {
-      const { secondary: d, ...N } = o;
-      return N;
-    }), B = k(() => [
-      "nano-button",
-      o.secondary ? "app-button-secondary" : ""
-    ]), _ = (d) => {
-      h("click", d);
-    };
-    return (d, N) => {
-      const y = v("el-button");
-      return d.$slots.default ? (n(), s(y, e({ key: 0 }, { ...c.value, ...A($) }, {
-        class: B.value,
-        onClick: _
-      }), b({
-        default: r(() => [
-          u(d.$slots, "default")
-        ]),
-        _: 2
-      }, [
-        d.$slots.loading ? {
-          name: "loading",
-          fn: r(() => [
-            u(d.$slots, "loading")
-          ]),
-          key: "0"
-        } : void 0
-      ]), 1040, ["class"])) : (n(), s(y, e({ key: 1 }, { ...c.value, ...A($) }, {
-        class: B.value,
-        onClick: _
-      }), b({ _: 2 }, [
-        d.$slots.loading ? {
-          name: "loading",
-          fn: r(() => [
-            u(d.$slots, "loading")
-          ]),
-          key: "0"
-        } : void 0
-      ]), 1040, ["class"]));
-    };
-  }
-}), S = /* @__PURE__ */ l({
+import { defineComponent as u, openBlock as a, createBlock as e, mergeProps as s, withCtx as p, renderSlot as l, createTextVNode as d, createElementVNode as m, normalizeProps as f, guardReactiveProps as $ } from "vue";
+import { buttonProps as i } from "element-plus";
+import { _ as n } from "./NanoButton.vue_vue_type_script_setup_true_lang-DgnSKBXL.js";
+const B = /* @__PURE__ */ u({
   name: "NanoAddButton",
   inheritAttrs: !1,
   __name: "NanoAddButton",
   props: i,
-  setup(p) {
-    return (t, o) => (n(), s(a, e({ ...t.$props, ...t.$attrs }, {
+  setup(r) {
+    return (t, o) => (a(), e(n, s({ ...t.$props, ...t.$attrs }, {
       type: "primary",
       icon: "Plus"
     }), {
-      default: r(() => [
-        u(t.$slots, "default", {}, () => [
-          o[0] || (o[0] = m("新增", -1))
+      default: p(() => [
+        l(t.$slots, "default", {}, () => [
+          o[0] || (o[0] = d("新增", -1))
         ])
       ]),
       _: 3
     }, 16));
   }
-}), T = /* @__PURE__ */ l({
+}), _ = /* @__PURE__ */ u({
   name: "NanoBackTopButton",
   inheritAttrs: !1,
   __name: "NanoBackTopButton",
   props: i,
-  setup(p) {
-    return (t, o) => t.$slots.default ? (n(), s(a, e({ key: 0 }, { ...t.$props, ...t.$attrs }, {
+  setup(r) {
+    return (t, o) => t.$slots.default ? (a(), e(n, s({ key: 0 }, { ...t.$props, ...t.$attrs }, {
       secondary: "",
       class: "app-backtop-button"
     }), {
-      default: r(() => [
-        u(t.$slots, "default")
+      default: p(() => [
+        l(t.$slots, "default")
       ]),
       _: 3
-    }, 16)) : (n(), s(a, e({ key: 1 }, { ...t.$props, ...t.$attrs }, {
+    }, 16)) : (a(), e(n, s({ key: 1 }, { ...t.$props, ...t.$attrs }, {
       secondary: "",
       class: "app-backtop-button"
     }), {
-      default: r(() => [...o[0] || (o[0] = [
-        f("svg", {
+      default: p(() => [...o[0] || (o[0] = [
+        m("svg", {
           class: "app-backtop-icon",
           viewBox: "0 0 24 24",
           "aria-hidden": "true",
           focusable: "false"
         }, [
-          f("path", { d: "M6 5h12" }),
-          f("path", { d: "M12 19V9" }),
-          f("path", { d: "m8 13 4-4 4 4" })
+          m("path", { d: "M6 5h12" }),
+          m("path", { d: "M12 19V9" }),
+          m("path", { d: "m8 13 4-4 4 4" })
         ], -1)
       ])]),
       _: 1
     }, 16));
   }
-}), D = /* @__PURE__ */ l({
+}), N = /* @__PURE__ */ u({
   name: "NanoCancelButton",
   inheritAttrs: !1,
   __name: "NanoCancelButton",
   props: i,
-  setup(p) {
-    return (t, o) => (n(), s(a, P(C({ ...t.$props, ...t.$attrs })), {
-      default: r(() => [
-        u(t.$slots, "default", {}, () => [
-          o[0] || (o[0] = m("取消", -1))
+  setup(r) {
+    return (t, o) => (a(), e(n, f($({ ...t.$props, ...t.$attrs })), {
+      default: p(() => [
+        l(t.$slots, "default", {}, () => [
+          o[0] || (o[0] = d("取消", -1))
         ])
       ]),
       _: 3
     }, 16));
   }
-}), w = /* @__PURE__ */ l({
+}), y = /* @__PURE__ */ u({
   name: "NanoDeleteButton",
   inheritAttrs: !1,
   __name: "NanoDeleteButton",
   props: i,
-  setup(p) {
-    return (t, o) => t.$slots.default ? (n(), s(a, e({ key: 0 }, { ...t.$props, ...t.$attrs }, {
+  setup(r) {
+    return (t, o) => t.$slots.default ? (a(), e(n, s({ key: 0 }, { ...t.$props, ...t.$attrs }, {
       type: "danger",
       icon: "Delete"
     }), {
-      default: r(() => [
-        u(t.$slots, "default")
+      default: p(() => [
+        l(t.$slots, "default")
       ]),
       _: 3
-    }, 16)) : (n(), s(a, e({ key: 1 }, { ...t.$props, ...t.$attrs }, {
+    }, 16)) : (a(), e(n, s({ key: 1 }, { ...t.$props, ...t.$attrs }, {
       type: "danger",
       icon: "Delete"
     }), null, 16));
   }
-}), I = /* @__PURE__ */ l({
+}), c = /* @__PURE__ */ u({
   name: "NanoEditButton",
   inheritAttrs: !1,
   __name: "NanoEditButton",
   props: i,
-  setup(p) {
-    return (t, o) => t.$slots.default ? (n(), s(a, e({ key: 0 }, { ...t.$props, ...t.$attrs }, { icon: "Edit" }), {
-      default: r(() => [
-        u(t.$slots, "default")
+  setup(r) {
+    return (t, o) => t.$slots.default ? (a(), e(n, s({ key: 0 }, { ...t.$props, ...t.$attrs }, { icon: "Edit" }), {
+      default: p(() => [
+        l(t.$slots, "default")
+      ]),
+      _: 3
+    }, 16)) : (a(), e(n, s({ key: 1 }, { ...t.$props, ...t.$attrs }, { icon: "Edit" }), null, 16));
+  }
+}), k = /* @__PURE__ */ u({
+  name: "NanoExportButton",
+  inheritAttrs: !1,
+  __name: "NanoExportButton",
+  props: i,
+  setup(r) {
+    return (t, o) => (a(), e(n, s({ ...t.$props, ...t.$attrs }, {
+      class: "app-button-export",
+      icon: "Download"
+    }), {
+      default: p(() => [
+        l(t.$slots, "default", {}, () => [
+          o[0] || (o[0] = d("导出", -1))
+        ])
       ]),
       _: 3
-    }, 16)) : (n(), s(a, e({ key: 1 }, { ...t.$props, ...t.$attrs }, { icon: "Edit" }), null, 16));
+    }, 16));
   }
-}), V = /* @__PURE__ */ l({
+}), A = /* @__PURE__ */ u({
   name: "NanoImportButton",
   inheritAttrs: !1,
   __name: "NanoImportButton",
   props: i,
-  setup(p) {
-    return (t, o) => (n(), s(a, e({ ...t.$props, ...t.$attrs }, {
+  setup(r) {
+    return (t, o) => (a(), e(n, s({ ...t.$props, ...t.$attrs }, {
       class: "app-button-import",
       icon: "Upload"
     }), {
-      default: r(() => [
-        u(t.$slots, "default", {}, () => [
-          o[0] || (o[0] = m("导入", -1))
+      default: p(() => [
+        l(t.$slots, "default", {}, () => [
+          o[0] || (o[0] = d("导入", -1))
         ])
       ]),
       _: 3
     }, 16));
   }
-}), R = /* @__PURE__ */ l({
+}), h = /* @__PURE__ */ u({
   name: "NanoManageButton",
   inheritAttrs: !1,
   __name: "NanoManageButton",
   props: i,
-  setup(p) {
-    return (t, o) => t.$slots.default ? (n(), s(a, e({ key: 0 }, { ...t.$props, ...t.$attrs }, {
+  setup(r) {
+    return (t, o) => t.$slots.default ? (a(), e(n, s({ key: 0 }, { ...t.$props, ...t.$attrs }, {
       type: "primary",
       icon: "Setting"
     }), {
-      default: r(() => [
-        u(t.$slots, "default")
+      default: p(() => [
+        l(t.$slots, "default")
       ]),
       _: 3
-    }, 16)) : (n(), s(a, e({ key: 1 }, { ...t.$props, ...t.$attrs }, {
+    }, 16)) : (a(), e(n, s({ key: 1 }, { ...t.$props, ...t.$attrs }, {
       type: "primary",
       icon: "Setting"
     }), null, 16));
   }
-}), z = /* @__PURE__ */ l({
+}), b = /* @__PURE__ */ u({
   name: "NanoMoveButton",
   inheritAttrs: !1,
   __name: "NanoMoveButton",
   props: i,
-  setup(p) {
-    return (t, o) => (n(), s(a, e({ ...t.$props, ...t.$attrs }, { icon: "Rank" }), {
-      default: r(() => [
-        u(t.$slots, "default", {}, () => [
-          o[0] || (o[0] = m("移动", -1))
+  setup(r) {
+    return (t, o) => (a(), e(n, s({ ...t.$props, ...t.$attrs }, { icon: "Rank" }), {
+      default: p(() => [
+        l(t.$slots, "default", {}, () => [
+          o[0] || (o[0] = d("移动", -1))
         ])
       ]),
       _: 3
     }, 16));
   }
-}), U = /* @__PURE__ */ l({
+}), g = /* @__PURE__ */ u({
   name: "NanoSubmitButton",
   inheritAttrs: !1,
   __name: "NanoSubmitButton",
   props: i,
-  setup(p) {
-    return (t, o) => (n(), s(a, e({ ...t.$props, ...t.$attrs }, { type: "primary" }), {
-      default: r(() => [
-        u(t.$slots, "default", {}, () => [
-          o[0] || (o[0] = m("保存", -1))
+  setup(r) {
+    return (t, o) => (a(), e(n, s({ ...t.$props, ...t.$attrs }, { type: "primary" }), {
+      default: p(() => [
+        l(t.$slots, "default", {}, () => [
+          o[0] || (o[0] = d("保存", -1))
         ])
       ]),
       _: 3
     }, 16));
   }
-}), j = /* @__PURE__ */ l({
+}), E = /* @__PURE__ */ u({
   name: "NanoTextAddButton",
   inheritAttrs: !1,
   __name: "NanoTextAddButton",
   props: i,
-  setup(p) {
-    return (t, o) => t.$slots.default ? (n(), s(a, e({ key: 0 }, { ...t.$props, ...t.$attrs }, {
+  setup(r) {
+    return (t, o) => t.$slots.default ? (a(), e(n, s({ key: 0 }, { ...t.$props, ...t.$attrs }, {
       text: "",
       icon: "Plus"
     }), {
-      default: r(() => [
-        u(t.$slots, "default")
+      default: p(() => [
+        l(t.$slots, "default")
       ]),
       _: 3
-    }, 16)) : (n(), s(a, e({ key: 1 }, { ...t.$props, ...t.$attrs }, {
+    }, 16)) : (a(), e(n, s({ key: 1 }, { ...t.$props, ...t.$attrs }, {
       text: "",
       icon: "Plus"
     }), null, 16));
   }
-}), q = [
-  a,
-  S,
-  j,
-  z,
-  V,
-  I,
-  R,
-  w,
-  U,
-  D,
-  T
-], F = (p) => {
-  q.forEach((t) => {
-    p.component(t.name || "AnonymousComponent", t);
+}), M = [
+  n,
+  B,
+  E,
+  b,
+  A,
+  k,
+  c,
+  h,
+  y,
+  g,
+  N,
+  _
+], P = (r) => {
+  M.forEach((t) => {
+    r.component(t.name || "AnonymousComponent", t);
   });
-}, J = {
-  install: F
+}, D = {
+  install: P
 };
 export {
-  S as NanoAddButton,
-  T as NanoBackTopButton,
-  a as NanoButton,
-  D as NanoCancelButton,
-  w as NanoDeleteButton,
-  I as NanoEditButton,
-  V as NanoImportButton,
-  R as NanoManageButton,
-  z as NanoMoveButton,
-  U as NanoSubmitButton,
-  j as NanoTextAddButton,
-  J as default,
-  F as install
+  B as NanoAddButton,
+  _ as NanoBackTopButton,
+  n as NanoButton,
+  N as NanoCancelButton,
+  y as NanoDeleteButton,
+  c as NanoEditButton,
+  k as NanoExportButton,
+  A as NanoImportButton,
+  h as NanoManageButton,
+  b as NanoMoveButton,
+  g as NanoSubmitButton,
+  E as NanoTextAddButton,
+  D as default,
+  P as install
 };

package/dist/style.css

@@ -1 +1 @@
-:root{--nano-font-size-sm: var(--font-size-sm, 14px);--nano-font-size-lg: var(--font-size-lg, 18px);--nano-font-weight-medium: var(--font-weight-medium, 500);--nano-radius-md: var(--radius-md, 6px);--nano-shadow-card: var(--shadow-card, 0 2px 12px rgba(0, 0, 0, .12));--nano-color-brand-primary: var(--color-brand-primary, #243c96);--nano-color-brand-primary-hover: var(--color-brand-primary-hover, #3550b3);--nano-color-brand-primary-active: var(--color-brand-primary-active, #1b2f78);--nano-color-brand-primary-light: var(--color-brand-primary-light, #eef2ff);--nano-color-text-regular: var(--color-text-regular, #606266);--nano-color-text-on-brand: var(--color-text-on-brand, #ffffff);--nano-color-border-default: var(--color-border-default, #dcdfe6);--nano-color-success: var(--color-success, #67c23a);--nano-color-success-hover: var(--color-success-hover, #85ce61);--nano-color-success-active: var(--color-success-active, #529b2e);--nano-color-warning: var(--color-warning, #e6a23c);--nano-color-warning-hover: var(--color-warning-hover, #ebb563);--nano-color-warning-active: var(--color-warning-active, #b88230);--nano-color-danger: var(--color-danger, #d35a5a);--nano-color-danger-hover: var(--color-danger-hover, #e07272);--nano-color-danger-active: var(--color-danger-active, #bc4949);--nano-color-info: var(--color-info, #909399);--nano-color-info-hover: var(--color-info-hover, #a6a9ad);--nano-color-info-active: var(--color-info-active, #73767a);--nano-color-focus-outline: var(--color-focus-outline, rgba(36, 60, 150, .32));--nano-button-default-bg: var(--button-default-bg, #ffffff);--nano-button-default-text: var(--button-default-text, var(--nano-color-text-regular));--nano-button-default-border: var(--button-default-border, var(--nano-color-border-default));--nano-button-default-hover-bg: var(--button-default-hover-bg, var(--nano-color-brand-primary-light));--nano-button-default-hover-text: var(--button-default-hover-text, var(--nano-color-brand-primary));--nano-button-default-hover-border: var(--button-default-hover-border, var(--nano-color-brand-primary-hover));--nano-button-default-active-bg: var(--button-default-active-bg, #e0e8ff);--nano-button-default-active-text: var(--button-default-active-text, var(--nano-color-brand-primary-active));--nano-button-default-active-border: var(--button-default-active-border, var(--nano-color-brand-primary-active));--nano-button-secondary-bg: var(--button-secondary-bg, var(--nano-color-brand-primary-light));--nano-button-secondary-text: var(--button-secondary-text, var(--nano-color-brand-primary));--nano-button-secondary-border: var(--button-secondary-border, rgba(36, 60, 150, .32));--nano-button-secondary-hover-bg: var(--button-secondary-hover-bg, #e0e8ff);--nano-button-secondary-hover-text: var(--button-secondary-hover-text, var(--nano-color-brand-primary-hover));--nano-button-secondary-hover-border: var(--button-secondary-hover-border, var(--nano-color-brand-primary-hover));--nano-button-secondary-active-bg: var(--button-secondary-active-bg, #d4defd);--nano-button-secondary-active-text: var(--button-secondary-active-text, var(--nano-color-brand-primary-active));--nano-button-secondary-active-border: var(--button-secondary-active-border, var(--nano-color-brand-primary-active));--nano-button-import-bg: var(--button-import-bg, #edf5f3);--nano-button-import-text: var(--button-import-text, #2f6b57);--nano-button-import-border: var(--button-import-border, rgba(47, 107, 87, .2));--nano-button-import-hover-bg: var(--button-import-hover-bg, #e0f0ec);--nano-button-import-hover-text: var(--button-import-hover-text, #285c4b);--nano-button-import-hover-border: var(--button-import-hover-border, rgba(47, 107, 87, .36));--nano-button-import-active-bg: var(--button-import-active-bg, #d3e8e2);--nano-button-import-active-text: var(--button-import-active-text, #224f40);--nano-button-import-active-border: var(--button-import-active-border, rgba(47, 107, 87, .48));--nano-button-text-default: var(--button-text-default, var(--nano-color-text-regular));--nano-button-text-hover-bg: var(--button-text-hover-bg, var(--nano-color-brand-primary-light));--nano-button-text-hover: var(--button-text-hover, var(--nano-color-brand-primary));--nano-button-text-active: var(--button-text-active, var(--nano-color-brand-primary-active));--nano-button-hover-shadow: var(--button-hover-shadow, 0 4px 12px rgba(36, 60, 150, .16));--nano-button-default-hover-shadow: var(--button-default-hover-shadow, 0 2px 10px rgba(36, 60, 150, .12));--nano-button-danger-hover-shadow: var(--button-danger-hover-shadow, 0 4px 12px rgba(211, 90, 90, .18))}html.dark{--nano-button-import-bg: var(--button-import-bg, rgba(80, 160, 120, .16));--nano-button-import-text: var(--button-import-text, #8dd3b1);--nano-button-import-border: var(--button-import-border, rgba(80, 160, 120, .28));--nano-button-import-hover-bg: var(--button-import-hover-bg, rgba(80, 160, 120, .24));--nano-button-import-hover-text: var(--button-import-hover-text, #a6e2c4);--nano-button-import-hover-border: var(--button-import-hover-border, rgba(80, 160, 120, .42));--nano-button-import-active-bg: var(--button-import-active-bg, rgba(80, 160, 120, .32));--nano-button-import-active-text: var(--button-import-active-text, #8dd3b1);--nano-button-import-active-border: var(--button-import-active-border, rgba(80, 160, 120, .56))}.el-button{--button-bg: var(--button-default-bg, var(--nano-button-default-bg));--button-text: var(--button-default-text, var(--nano-button-default-text));--button-border: var(--button-default-border, var(--nano-button-default-border));--button-bg-hover: var(--button-default-hover-bg, var(--nano-button-default-hover-bg));--button-text-hover: var(--button-default-hover-text, var(--nano-button-default-hover-text));--button-border-hover: var(--button-default-hover-border, var(--nano-button-default-hover-border));--button-bg-active: var(--button-default-active-bg, var(--nano-button-default-active-bg));--button-text-active: var(--button-default-active-text, var(--nano-button-default-active-text));--button-border-active: var(--button-default-active-border, var(--nano-button-default-active-border));--button-shadow-hover: var(--button-default-hover-shadow, var(--nano-button-default-hover-shadow));font-size:var(--font-size-sm, var(--nano-font-size-sm));font-weight:var(--font-weight-medium, var(--nano-font-weight-medium));border-radius:var(--radius-md, var(--nano-radius-md));transition:background-color .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease,opacity .22s ease}.el-button:focus-visible{outline:2px solid var(--color-focus-outline, var(--nano-color-focus-outline));outline-offset:2px}.el-button.is-disabled,.el-button.is-disabled:hover,.el-button.is-disabled:active{box-shadow:none}.el-button:not(.is-text):not(.is-link){--el-button-text-color: var(--button-text);--el-button-bg-color: var(--button-bg);--el-button-border-color: var(--button-border);--el-button-hover-text-color: var(--button-text-hover);--el-button-hover-bg-color: var(--button-bg-hover);--el-button-hover-border-color: var(--button-border-hover);--el-button-active-text-color: var(--button-text-active);--el-button-active-bg-color: var(--button-bg-active);--el-button-active-border-color: var(--button-border-active);color:var(--button-text);background-color:var(--button-bg);border-color:var(--button-border)}.el-button:not(.is-text):not(.is-link):hover{background-color:var(--button-bg-hover);color:var(--button-text-hover);border-color:var(--button-border-hover);box-shadow:var(--button-shadow-hover)}.el-button:not(.is-text):not(.is-link):active{background-color:var(--button-bg-active);color:var(--button-text-active);border-color:var(--button-border-active);box-shadow:none}.el-button.app-button-secondary{--button-bg: var(--button-secondary-bg, var(--nano-button-secondary-bg));--button-text: var(--button-secondary-text, var(--nano-button-secondary-text));--button-border: var(--button-secondary-border, var(--nano-button-secondary-border));--button-bg-hover: var(--button-secondary-hover-bg, var(--nano-button-secondary-hover-bg));--button-text-hover: var(--button-secondary-hover-text, var(--nano-button-secondary-hover-text));--button-border-hover: var(--button-secondary-hover-border, var(--nano-button-secondary-hover-border));--button-bg-active: var(--button-secondary-active-bg, var(--nano-button-secondary-active-bg));--button-text-active: var(--button-secondary-active-text, var(--nano-button-secondary-active-text));--button-border-active: var(--button-secondary-active-border, var(--nano-button-secondary-active-border))}.el-button.app-button-import{--button-bg: var(--button-import-bg, var(--nano-button-import-bg));--button-text: var(--button-import-text, var(--nano-button-import-text));--button-border: var(--button-import-border, var(--nano-button-import-border));--button-bg-hover: var(--button-import-hover-bg, var(--nano-button-import-hover-bg));--button-text-hover: var(--button-import-hover-text, var(--nano-button-import-hover-text));--button-border-hover: var(--button-import-hover-border, var(--nano-button-import-hover-border));--button-bg-active: var(--button-import-active-bg, var(--nano-button-import-active-bg));--button-text-active: var(--button-import-active-text, var(--nano-button-import-active-text));--button-border-active: var(--button-import-active-border, var(--nano-button-import-active-border))}.el-button.el-button--primary,.el-button.el-button--success,.el-button.el-button--warning,.el-button.el-button--danger,.el-button.el-button--info{--button-text: var(--color-text-on-brand, var(--nano-color-text-on-brand));--button-text-hover: var(--color-text-on-brand, var(--nano-color-text-on-brand));--button-text-active: var(--color-text-on-brand, var(--nano-color-text-on-brand));--button-shadow-hover: var(--button-hover-shadow, var(--nano-button-hover-shadow));box-shadow:none}.el-button.el-button--primary{--button-bg: var(--color-brand-primary, var(--nano-color-brand-primary));--button-border: var(--color-brand-primary, var(--nano-color-brand-primary));--button-bg-hover: var(--color-brand-primary-hover, var(--nano-color-brand-primary-hover));--button-border-hover: var(--color-brand-primary-hover, var(--nano-color-brand-primary-hover));--button-bg-active: var(--color-brand-primary-active, var(--nano-color-brand-primary-active));--button-border-active: var(--color-brand-primary-active, var(--nano-color-brand-primary-active))}.el-button.el-button--success{--button-bg: var(--color-success, var(--nano-color-success));--button-border: var(--color-success, var(--nano-color-success));--button-bg-hover: var(--color-success-hover, var(--nano-color-success-hover));--button-border-hover: var(--color-success-hover, var(--nano-color-success-hover));--button-bg-active: var(--color-success-active, var(--nano-color-success-active));--button-border-active: var(--color-success-active, var(--nano-color-success-active))}.el-button.el-button--warning{--button-bg: var(--color-warning, var(--nano-color-warning));--button-border: var(--color-warning, var(--nano-color-warning));--button-bg-hover: var(--color-warning-hover, var(--nano-color-warning-hover));--button-border-hover: var(--color-warning-hover, var(--nano-color-warning-hover));--button-bg-active: var(--color-warning-active, var(--nano-color-warning-active));--button-border-active: var(--color-warning-active, var(--nano-color-warning-active))}.el-button.el-button--danger{--button-bg: var(--color-danger, var(--nano-color-danger));--button-border: var(--color-danger, var(--nano-color-danger));--button-bg-hover: var(--color-danger-hover, var(--nano-color-danger-hover));--button-border-hover: var(--color-danger-hover, var(--nano-color-danger-hover));--button-bg-active: var(--color-danger-active, var(--nano-color-danger-active));--button-border-active: var(--color-danger-active, var(--nano-color-danger-active));--button-shadow-hover: var(--button-danger-hover-shadow, var(--nano-button-danger-hover-shadow))}.el-button.el-button--info{--button-bg: var(--color-info, var(--nano-color-info));--button-border: var(--color-info, var(--nano-color-info));--button-bg-hover: var(--color-info-hover, var(--nano-color-info-hover));--button-border-hover: var(--color-info-hover, var(--nano-color-info-hover));--button-bg-active: var(--color-info-active, var(--nano-color-info-active));--button-border-active: var(--color-info-active, var(--nano-color-info-active))}.el-button.is-text,.el-button.is-link{background-color:transparent;color:var(--button-text-default, var(--nano-button-text-default));border-color:transparent;box-shadow:none}.el-button.is-text:hover{background-color:var(--button-text-hover-bg, var(--nano-button-text-hover-bg));color:var(--button-text-hover, var(--nano-button-text-hover))}.el-button.is-link:hover,.el-button.is-text:active,.el-button.is-link:active{color:var(--button-text-active, var(--nano-button-text-active))}.app-backtop.el-backtop{width:auto;height:auto;background-color:transparent;box-shadow:none}.app-backtop.el-backtop:hover{background-color:transparent}.app-backtop-button.el-button{--button-bg: var(--color-brand-primary, var(--nano-color-brand-primary));--button-text: var(--color-text-on-brand, var(--nano-color-text-on-brand));--button-border: var(--color-brand-primary, var(--nano-color-brand-primary));--button-bg-hover: var(--color-brand-primary-hover, var(--nano-color-brand-primary-hover));--button-text-hover: var(--color-text-on-brand, var(--nano-color-text-on-brand));--button-border-hover: var(--color-brand-primary-hover, var(--nano-color-brand-primary-hover));--button-bg-active: var(--color-brand-primary-active, var(--nano-color-brand-primary-active));--button-text-active: var(--color-text-on-brand, var(--nano-color-text-on-brand));--button-border-active: var(--color-brand-primary-active, var(--nano-color-brand-primary-active));width:42px;height:42px;padding:0;border-radius:12px;border-width:1px;box-shadow:0 10px 22px #243c9642,inset 0 1px #ffffff2e;transform:translateY(0);transition:transform .18s ease,background-color .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease,opacity .22s ease}.app-backtop-button.el-button>span,.app-backtop-icon{display:inline-flex;align-items:center;justify-content:center}.app-backtop-icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.app-backtop-button.el-button:not(.is-text):not(.is-link):hover{transform:translateY(-2px);box-shadow:0 14px 26px #243c964d,inset 0 1px #ffffff38}.app-backtop-button.el-button:not(.is-text):not(.is-link):active{transform:translateY(0);box-shadow:0 6px 14px #243c9638,inset 0 1px 2px #1b2f7847}
+:root{--nano-font-size-sm: var(--font-size-sm, 14px);--nano-font-size-lg: var(--font-size-lg, 18px);--nano-font-weight-medium: var(--font-weight-medium, 500);--nano-radius-md: var(--radius-md, 6px);--nano-shadow-card: var(--shadow-card, 0 2px 12px rgba(0, 0, 0, .12));--nano-color-brand-primary: var(--color-brand-primary, #243c96);--nano-color-brand-primary-hover: var(--color-brand-primary-hover, #3550b3);--nano-color-brand-primary-active: var(--color-brand-primary-active, #1b2f78);--nano-color-brand-primary-light: var(--color-brand-primary-light, #eef2ff);--nano-color-text-regular: var(--color-text-regular, #606266);--nano-color-text-on-brand: var(--color-text-on-brand, #ffffff);--nano-color-border-default: var(--color-border-default, #dcdfe6);--nano-color-success: var(--color-success, #67c23a);--nano-color-success-hover: var(--color-success-hover, #85ce61);--nano-color-success-active: var(--color-success-active, #529b2e);--nano-color-warning: var(--color-warning, #e6a23c);--nano-color-warning-hover: var(--color-warning-hover, #ebb563);--nano-color-warning-active: var(--color-warning-active, #b88230);--nano-color-danger: var(--color-danger, #d35a5a);--nano-color-danger-hover: var(--color-danger-hover, #e07272);--nano-color-danger-active: var(--color-danger-active, #bc4949);--nano-color-info: var(--color-info, #909399);--nano-color-info-hover: var(--color-info-hover, #a6a9ad);--nano-color-info-active: var(--color-info-active, #73767a);--nano-color-focus-outline: var(--color-focus-outline, rgba(36, 60, 150, .32));--nano-button-default-bg: var(--button-default-bg, #ffffff);--nano-button-default-text: var(--button-default-text, var(--nano-color-text-regular));--nano-button-default-border: var(--button-default-border, var(--nano-color-border-default));--nano-button-default-hover-bg: var(--button-default-hover-bg, var(--nano-color-brand-primary-light));--nano-button-default-hover-text: var(--button-default-hover-text, var(--nano-color-brand-primary));--nano-button-default-hover-border: var(--button-default-hover-border, var(--nano-color-brand-primary-hover));--nano-button-default-active-bg: var(--button-default-active-bg, #e0e8ff);--nano-button-default-active-text: var(--button-default-active-text, var(--nano-color-brand-primary-active));--nano-button-default-active-border: var(--button-default-active-border, var(--nano-color-brand-primary-active));--nano-button-secondary-bg: var(--button-secondary-bg, var(--nano-color-brand-primary-light));--nano-button-secondary-text: var(--button-secondary-text, var(--nano-color-brand-primary));--nano-button-secondary-border: var(--button-secondary-border, rgba(36, 60, 150, .32));--nano-button-secondary-hover-bg: var(--button-secondary-hover-bg, #e0e8ff);--nano-button-secondary-hover-text: var(--button-secondary-hover-text, var(--nano-color-brand-primary-hover));--nano-button-secondary-hover-border: var(--button-secondary-hover-border, var(--nano-color-brand-primary-hover));--nano-button-secondary-active-bg: var(--button-secondary-active-bg, #d4defd);--nano-button-secondary-active-text: var(--button-secondary-active-text, var(--nano-color-brand-primary-active));--nano-button-secondary-active-border: var(--button-secondary-active-border, var(--nano-color-brand-primary-active));--nano-button-import-bg: var(--button-import-bg, #edf5f3);--nano-button-import-text: var(--button-import-text, #2f6b57);--nano-button-import-border: var(--button-import-border, rgba(47, 107, 87, .2));--nano-button-import-hover-bg: var(--button-import-hover-bg, #e0f0ec);--nano-button-import-hover-text: var(--button-import-hover-text, #285c4b);--nano-button-import-hover-border: var(--button-import-hover-border, rgba(47, 107, 87, .36));--nano-button-import-active-bg: var(--button-import-active-bg, #d3e8e2);--nano-button-import-active-text: var(--button-import-active-text, #224f40);--nano-button-import-active-border: var(--button-import-active-border, rgba(47, 107, 87, .48));--nano-button-export-bg: var(--button-export-bg, #edf5f3);--nano-button-export-text: var(--button-export-text, #2f6b57);--nano-button-export-border: var(--button-export-border, rgba(47, 107, 87, .2));--nano-button-export-hover-bg: var(--button-export-hover-bg, #e0f0ec);--nano-button-export-hover-text: var(--button-export-hover-text, #285c4b);--nano-button-export-hover-border: var(--button-export-hover-border, rgba(47, 107, 87, .36));--nano-button-export-active-bg: var(--button-export-active-bg, #d3e8e2);--nano-button-export-active-text: var(--button-export-active-text, #224f40);--nano-button-export-active-border: var(--button-export-active-border, rgba(47, 107, 87, .48));--nano-button-text-default: var(--button-text-default, var(--nano-color-text-regular));--nano-button-text-hover-bg: var(--button-text-hover-bg, var(--nano-color-brand-primary-light));--nano-button-text-hover: var(--button-text-hover, var(--nano-color-brand-primary));--nano-button-text-active: var(--button-text-active, var(--nano-color-brand-primary-active));--nano-button-hover-shadow: var(--button-hover-shadow, 0 4px 12px rgba(36, 60, 150, .16));--nano-button-default-hover-shadow: var(--button-default-hover-shadow, 0 2px 10px rgba(36, 60, 150, .12));--nano-button-danger-hover-shadow: var(--button-danger-hover-shadow, 0 4px 12px rgba(211, 90, 90, .18))}html.dark{--nano-button-import-bg: var(--button-import-bg, rgba(80, 160, 120, .16));--nano-button-import-text: var(--button-import-text, #8dd3b1);--nano-button-import-border: var(--button-import-border, rgba(80, 160, 120, .28));--nano-button-import-hover-bg: var(--button-import-hover-bg, rgba(80, 160, 120, .24));--nano-button-import-hover-text: var(--button-import-hover-text, #a6e2c4);--nano-button-import-hover-border: var(--button-import-hover-border, rgba(80, 160, 120, .42));--nano-button-import-active-bg: var(--button-import-active-bg, rgba(80, 160, 120, .32));--nano-button-import-active-text: var(--button-import-active-text, #8dd3b1);--nano-button-import-active-border: var(--button-import-active-border, rgba(80, 160, 120, .56));--nano-button-export-bg: var(--button-export-bg, rgba(80, 160, 120, .16));--nano-button-export-text: var(--button-export-text, #8dd3b1);--nano-button-export-border: var(--button-export-border, rgba(80, 160, 120, .28));--nano-button-export-hover-bg: var(--button-export-hover-bg, rgba(80, 160, 120, .24));--nano-button-export-hover-text: var(--button-export-hover-text, #a6e2c4);--nano-button-export-hover-border: var(--button-export-hover-border, rgba(80, 160, 120, .42));--nano-button-export-active-bg: var(--button-export-active-bg, rgba(80, 160, 120, .32));--nano-button-export-active-text: var(--button-export-active-text, #8dd3b1);--nano-button-export-active-border: var(--button-export-active-border, rgba(80, 160, 120, .56))}.el-button{--button-bg: var(--button-default-bg, var(--nano-button-default-bg));--button-text: var(--button-default-text, var(--nano-button-default-text));--button-border: var(--button-default-border, var(--nano-button-default-border));--button-bg-hover: var(--button-default-hover-bg, var(--nano-button-default-hover-bg));--button-text-hover: var(--button-default-hover-text, var(--nano-button-default-hover-text));--button-border-hover: var(--button-default-hover-border, var(--nano-button-default-hover-border));--button-bg-active: var(--button-default-active-bg, var(--nano-button-default-active-bg));--button-text-active: var(--button-default-active-text, var(--nano-button-default-active-text));--button-border-active: var(--button-default-active-border, var(--nano-button-default-active-border));--button-shadow-hover: var(--button-default-hover-shadow, var(--nano-button-default-hover-shadow));font-size:var(--font-size-sm, var(--nano-font-size-sm));font-weight:var(--font-weight-medium, var(--nano-font-weight-medium));border-radius:var(--radius-md, var(--nano-radius-md));transition:background-color .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease,opacity .22s ease}.el-button:focus-visible{outline:2px solid var(--color-focus-outline, var(--nano-color-focus-outline));outline-offset:2px}.el-button.is-disabled,.el-button.is-disabled:hover,.el-button.is-disabled:active{box-shadow:none}.el-button:not(.is-text):not(.is-link){--el-button-text-color: var(--button-text);--el-button-bg-color: var(--button-bg);--el-button-border-color: var(--button-border);--el-button-hover-text-color: var(--button-text-hover);--el-button-hover-bg-color: var(--button-bg-hover);--el-button-hover-border-color: var(--button-border-hover);--el-button-active-text-color: var(--button-text-active);--el-button-active-bg-color: var(--button-bg-active);--el-button-active-border-color: var(--button-border-active);color:var(--button-text);background-color:var(--button-bg);border-color:var(--button-border)}.el-button:not(.is-text):not(.is-link):hover{background-color:var(--button-bg-hover);color:var(--button-text-hover);border-color:var(--button-border-hover);box-shadow:var(--button-shadow-hover)}.el-button:not(.is-text):not(.is-link):active{background-color:var(--button-bg-active);color:var(--button-text-active);border-color:var(--button-border-active);box-shadow:none}.el-button.app-button-secondary{--button-bg: var(--button-secondary-bg, var(--nano-button-secondary-bg));--button-text: var(--button-secondary-text, var(--nano-button-secondary-text));--button-border: var(--button-secondary-border, var(--nano-button-secondary-border));--button-bg-hover: var(--button-secondary-hover-bg, var(--nano-button-secondary-hover-bg));--button-text-hover: var(--button-secondary-hover-text, var(--nano-button-secondary-hover-text));--button-border-hover: var(--button-secondary-hover-border, var(--nano-button-secondary-hover-border));--button-bg-active: var(--button-secondary-active-bg, var(--nano-button-secondary-active-bg));--button-text-active: var(--button-secondary-active-text, var(--nano-button-secondary-active-text));--button-border-active: var(--button-secondary-active-border, var(--nano-button-secondary-active-border))}.el-button.app-button-import{--button-bg: var(--button-import-bg, var(--nano-button-import-bg));--button-text: var(--button-import-text, var(--nano-button-import-text));--button-border: var(--button-import-border, var(--nano-button-import-border));--button-bg-hover: var(--button-import-hover-bg, var(--nano-button-import-hover-bg));--button-text-hover: var(--button-import-hover-text, var(--nano-button-import-hover-text));--button-border-hover: var(--button-import-hover-border, var(--nano-button-import-hover-border));--button-bg-active: var(--button-import-active-bg, var(--nano-button-import-active-bg));--button-text-active: var(--button-import-active-text, var(--nano-button-import-active-text));--button-border-active: var(--button-import-active-border, var(--nano-button-import-active-border))}.el-button.app-button-export{--button-bg: var(--button-export-bg, var(--nano-button-export-bg));--button-text: var(--button-export-text, var(--nano-button-export-text));--button-border: var(--button-export-border, var(--nano-button-export-border));--button-bg-hover: var(--button-export-hover-bg, var(--nano-button-export-hover-bg));--button-text-hover: var(--button-export-hover-text, var(--nano-button-export-hover-text));--button-border-hover: var(--button-export-hover-border, var(--nano-button-export-hover-border));--button-bg-active: var(--button-export-active-bg, var(--nano-button-export-active-bg));--button-text-active: var(--button-export-active-text, var(--nano-button-export-active-text));--button-border-active: var(--button-export-active-border, var(--nano-button-export-active-border))}.el-button.el-button--primary,.el-button.el-button--success,.el-button.el-button--warning,.el-button.el-button--danger,.el-button.el-button--info{--button-text: var(--color-text-on-brand, var(--nano-color-text-on-brand));--button-text-hover: var(--color-text-on-brand, var(--nano-color-text-on-brand));--button-text-active: var(--color-text-on-brand, var(--nano-color-text-on-brand));--button-shadow-hover: var(--button-hover-shadow, var(--nano-button-hover-shadow));box-shadow:none}.el-button.el-button--primary{--button-bg: var(--color-brand-primary, var(--nano-color-brand-primary));--button-border: var(--color-brand-primary, var(--nano-color-brand-primary));--button-bg-hover: var(--color-brand-primary-hover, var(--nano-color-brand-primary-hover));--button-border-hover: var(--color-brand-primary-hover, var(--nano-color-brand-primary-hover));--button-bg-active: var(--color-brand-primary-active, var(--nano-color-brand-primary-active));--button-border-active: var(--color-brand-primary-active, var(--nano-color-brand-primary-active))}.el-button.el-button--success{--button-bg: var(--color-success, var(--nano-color-success));--button-border: var(--color-success, var(--nano-color-success));--button-bg-hover: var(--color-success-hover, var(--nano-color-success-hover));--button-border-hover: var(--color-success-hover, var(--nano-color-success-hover));--button-bg-active: var(--color-success-active, var(--nano-color-success-active));--button-border-active: var(--color-success-active, var(--nano-color-success-active))}.el-button.el-button--warning{--button-bg: var(--color-warning, var(--nano-color-warning));--button-border: var(--color-warning, var(--nano-color-warning));--button-bg-hover: var(--color-warning-hover, var(--nano-color-warning-hover));--button-border-hover: var(--color-warning-hover, var(--nano-color-warning-hover));--button-bg-active: var(--color-warning-active, var(--nano-color-warning-active));--button-border-active: var(--color-warning-active, var(--nano-color-warning-active))}.el-button.el-button--danger{--button-bg: var(--color-danger, var(--nano-color-danger));--button-border: var(--color-danger, var(--nano-color-danger));--button-bg-hover: var(--color-danger-hover, var(--nano-color-danger-hover));--button-border-hover: var(--color-danger-hover, var(--nano-color-danger-hover));--button-bg-active: var(--color-danger-active, var(--nano-color-danger-active));--button-border-active: var(--color-danger-active, var(--nano-color-danger-active));--button-shadow-hover: var(--button-danger-hover-shadow, var(--nano-button-danger-hover-shadow))}.el-button.el-button--info{--button-bg: var(--color-info, var(--nano-color-info));--button-border: var(--color-info, var(--nano-color-info));--button-bg-hover: var(--color-info-hover, var(--nano-color-info-hover));--button-border-hover: var(--color-info-hover, var(--nano-color-info-hover));--button-bg-active: var(--color-info-active, var(--nano-color-info-active));--button-border-active: var(--color-info-active, var(--nano-color-info-active))}.el-button.is-text,.el-button.is-link{background-color:transparent;color:var(--button-text-default, var(--nano-button-text-default));border-color:transparent;box-shadow:none}.el-button.is-text:hover{background-color:var(--button-text-hover-bg, var(--nano-button-text-hover-bg));color:var(--button-text-hover, var(--nano-button-text-hover))}.el-button.is-link:hover,.el-button.is-text:active,.el-button.is-link:active{color:var(--button-text-active, var(--nano-button-text-active))}.app-backtop.el-backtop{width:auto;height:auto;background-color:transparent;box-shadow:none}.app-backtop.el-backtop:hover{background-color:transparent}.app-backtop-button.el-button{--button-bg: var(--color-brand-primary, var(--nano-color-brand-primary));--button-text: var(--color-text-on-brand, var(--nano-color-text-on-brand));--button-border: var(--color-brand-primary, var(--nano-color-brand-primary));--button-bg-hover: var(--color-brand-primary-hover, var(--nano-color-brand-primary-hover));--button-text-hover: var(--color-text-on-brand, var(--nano-color-text-on-brand));--button-border-hover: var(--color-brand-primary-hover, var(--nano-color-brand-primary-hover));--button-bg-active: var(--color-brand-primary-active, var(--nano-color-brand-primary-active));--button-text-active: var(--color-text-on-brand, var(--nano-color-text-on-brand));--button-border-active: var(--color-brand-primary-active, var(--nano-color-brand-primary-active));width:42px;height:42px;padding:0;border-radius:12px;border-width:1px;box-shadow:0 10px 22px #243c9642,inset 0 1px #ffffff2e;transform:translateY(0);transition:transform .18s ease,background-color .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease,opacity .22s ease}.app-backtop-button.el-button>span,.app-backtop-icon{display:inline-flex;align-items:center;justify-content:center}.app-backtop-icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.app-backtop-button.el-button:not(.is-text):not(.is-link):hover{transform:translateY(-2px);box-shadow:0 14px 26px #243c964d,inset 0 1px #ffffff38}.app-backtop-button.el-button:not(.is-text):not(.is-link):active{transform:translateY(0);box-shadow:0 6px 14px #243c9638,inset 0 1px 2px #1b2f7847}

package/package.json

@@ -1,40 +1,58 @@
-{
-    "name":  "@cst-ui/nano-buttons",
-    "version":  "0.1.1",
-    "description":  "Nano themed Vue 3 button components based on Element Plus.",
-    "license":  "UNLICENSED",
-    "type":  "module",
-    "main":  "./dist/index.cjs",
-    "module":  "./dist/index.mjs",
-    "types":  "./dist/index.d.ts",
-    "files":  [
-                  "dist",
-                  "README.md"
-              ],
-    "sideEffects":  [
-                        "*.css"
-                    ],
-    "exports":  {
-                    ".":  {
-                              "types":  "./dist/index.d.ts",
-                              "import":  "./dist/index.mjs",
-                              "require":  "./dist/index.cjs"
-                          },
-                    "./style.css":  "./dist/style.css"
-                },
-    "scripts":  {
-                    "build":  "vite build && vue-tsc -p tsconfig.build.json --declaration --emitDeclarationOnly",
-                    "typecheck":  "vue-tsc -p tsconfig.build.json --noEmit"
-                },
-    "peerDependencies":  {
-                             "element-plus":  "^2.8.5",
-                             "vue":  "^3.5.13"
-                         },
-    "devDependencies":  {
-                            "@types/node":  "^18.11.3",
-                            "@vitejs/plugin-vue":  "^5.1.4",
-                            "typescript":  "^5.6.3",
-                            "vite":  "^5.4.9",
-                            "vue-tsc":  "2.1.6"
-                        }
-}
+{
+    "name": "@cst-ui/nano-buttons",
+    "version": "0.2.0",
+    "description": "Nano themed Vue 3 button components and dialog tab helpers based on Element Plus.",
+    "license": "UNLICENSED",
+    "type": "module",
+    "main": "./dist/index.cjs",
+    "module": "./dist/index.mjs",
+    "types": "./dist/index.d.ts",
+    "typesVersions": {
+        "*": {
+            "dialog-tabs": [
+                "dist/dialog-tabs/index.d.ts"
+            ]
+        }
+    },
+    "files": [
+        "dist",
+        "README.md"
+    ],
+    "sideEffects": [
+        "*.css"
+    ],
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.mjs",
+            "require": "./dist/index.cjs"
+        },
+        "./dialog-tabs": {
+            "types": "./dist/dialog-tabs/index.d.ts",
+            "import": "./dist/dialog-tabs/index.mjs",
+            "require": "./dist/dialog-tabs/index.cjs"
+        },
+        "./style.css": "./dist/style.css"
+    },
+    "scripts": {
+        "build": "vite build && vue-tsc -p tsconfig.build.json --declaration --emitDeclarationOnly",
+        "docs:dev": "vite --config docs/vite.config.ts --host 0.0.0.0",
+        "docs:build": "vite build --config docs/vite.config.ts",
+        "docs:preview": "vite preview --config docs/vite.config.ts --host 0.0.0.0",
+        "typecheck": "vue-tsc -p tsconfig.build.json --noEmit"
+    },
+    "peerDependencies": {
+        "element-plus": "^2.8.5",
+        "vue": "^3.5.13",
+        "vue-router": "^4.4.5"
+    },
+    "devDependencies": {
+        "@element-plus/icons-vue": "2.3.2",
+        "@types/node": "^18.11.3",
+        "@vitejs/plugin-vue": "^5.1.4",
+        "typescript": "^5.6.3",
+        "vite": "^5.4.9",
+        "vue-router": "^4.4.5",
+        "vue-tsc": "2.1.6"
+    }
+}