geekin-devtoys 0.2.17 → 0.2.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/GDialog/index.js +1 -1
- package/lib/GDialog/index.mjs +284 -206
- package/lib/GDialog/style.css +1 -1
- package/lib/GRing/index.js +1 -1
- package/lib/GRing/index.mjs +115 -57
- package/lib/GRing/style.css +1 -1
- package/lib/components/GDialog/const.d.ts +31 -1
- package/lib/components/GDialog/index.d.ts +97 -3
- package/lib/components/GRing/index.d.ts +8 -2
- package/lib/components/GTable/index.d.ts +4 -3
- package/package.json +1 -1
package/lib/GDialog/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),y=require("../index-B1MYKy3L.js"),S=require("../_plugin-vue_export-helper-BHFhmbuH.js"),N=Symbol("GDialogManager"),M={small:"380px",medium:"480px",large:"580px"},T={ICON_WIDTH:92,ICON_HEIGHT:34,GAP:8,BOTTOM_OFFSET:18,RIGHT_OFFSET:18,MAX_PER_ROW:8};function q(s){const m=new Map,{ICON_WIDTH:a,ICON_HEIGHT:r,GAP:f,BOTTOM_OFFSET:g,RIGHT_OFFSET:l,MAX_PER_ROW:o}=T;return s.forEach((c,u)=>{const n=Math.floor(u/o),i=u%o;m.set(c,{right:l+i*(a+f),bottom:g+n*(r+f)})}),m}function W(){const s=e.reactive(new Map),m=e.computed(()=>{const n=[];return s.forEach(i=>{i.isMinimized&&n.push(i.id)}),n}),a=e.computed(()=>q(m.value));function r(n){s.set(n.id,{attentionTick:0,...n})}function f(n){s.delete(n)}function g(n){const i=s.get(n);if(i){if(i.isMinimized){i.attentionTick=(i.attentionTick??0)+1;return}i.isMinimized=!0}}function l(n){const i=s.get(n);i?.isMinimized&&(i.attentionTick=(i.attentionTick??0)+1)}function o(n){const i=s.get(n);i&&(i.isMinimized=!1)}function c(n){return e.computed(()=>a.value.get(n)??{right:T.RIGHT_OFFSET,bottom:T.BOTTOM_OFFSET})}const u=e.computed(()=>m.value.map(n=>s.get(n)).filter(Boolean));return{dialogs:s,register:r,unregister:f,minimize:g,remindMinimized:l,restore:o,getPosition:c,minimizedList:u}}function O(){return e.inject(N,null)}const Y=["title","aria-label"],Z={class:"g-dialog-minimized-icon__icon","aria-hidden":"true"},j={class:"g-dialog-minimized-icon__title"},K=e.defineComponent({name:"GDialogMinimizedIcon",__name:"GDialogMinimizedIcon",props:{title:{},position:{},attentionTick:{default:0}},emits:["restore"],setup(s,{emit:m}){const a=s,r=m,f=e.computed(()=>a.title||"弹窗"),g=e.computed(()=>`恢复 ${f.value}`),l=e.computed(()=>({position:"fixed",right:`${a.position.right}px`,bottom:`${a.position.bottom}px`})),o=e.ref(!1);let c;e.watch(()=>a.attentionTick,(n,i)=>{i===void 0||n===i||(o.value=!1,window.clearTimeout(c),window.requestAnimationFrame(()=>{o.value=!0,c=window.setTimeout(()=>{o.value=!1},580)}))}),e.onUnmounted(()=>{window.clearTimeout(c)});function u(){r("restore")}return(n,i)=>{const w=e.resolveComponent("el-icon");return e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createElementVNode("div",{class:e.normalizeClass(["g-dialog-minimized-icon",{"is-attention":o.value}]),type:"button",style:e.normalizeStyle(l.value),title:g.value,"aria-label":g.value,onClick:u},[i[0]||(i[0]=e.createElementVNode("span",{class:"g-dialog-minimized-icon__glow","aria-hidden":"true"},null,-1)),i[1]||(i[1]=e.createElementVNode("span",{class:"g-dialog-minimized-icon__wave","aria-hidden":"true"},null,-1)),e.createElementVNode("span",Z,[e.createVNode(w,null,{default:e.withCtx(()=>[e.createVNode(e.unref(y.chat_dot_round_default))]),_:1})]),e.createElementVNode("span",j,e.toDisplayString(f.value),1)],14,Y)])}}}),C=S._export_sfc(K,[["__scopeId","data-v-5195816e"]]),X={class:"g-dialog-header"},J={class:"g-dialog-title"},Q={class:"g-dialog-operation-container","aria-label":"弹窗操作"},ee=["aria-label","title"],te=["onClick"],oe={class:"g-dialog-footer"},B="关闭",ie=e.defineComponent({name:"GDialog",inheritAttrs:!1,__name:"index",props:{title:{default:""},size:{default:"medium"},modelValue:{type:Boolean},hideFooter:{type:Boolean,default:!1},actions:{},showCancel:{type:Boolean,default:!0},showReset:{type:Boolean,default:!0},showSave:{type:Boolean,default:!0},cancelText:{default:"取消"},resetText:{default:"重置"},saveText:{default:"保存"},saveLoading:{type:Boolean,default:!1},saveDisabled:{type:Boolean,default:!1},beforeClose:{}},emits:["cancel","reset","save","minimize","action","update:modelValue"],setup(s,{emit:m}){const a=s,r=m,f=e.computed(()=>a.modelValue);function g(t){r("update:modelValue",t)}const l=e.useId?e.useId():`g-dialog-${Date.now()}-${Math.random().toString(36).slice(2)}`,o=O(),c=e.ref(!1),u=e.ref(!0),n=e.ref(0),i=e.ref(!1),w=e.computed(()=>o?o.dialogs.get(l)?.isMinimized??!1:c.value),D=e.computed(()=>o?o.dialogs.get(l)?.attentionTick??0:n.value),G=e.computed(()=>o?!(o.dialogs.get(l)?.isMinimized??!1):u.value),A=e.computed(()=>o?o.getPosition(l).value:{right:20,bottom:20});e.onMounted(()=>{o?.register({id:l,title:a.title,isMinimized:!1})}),e.onUnmounted(()=>{o?.unregister(l)}),e.watch(()=>a.title,t=>{if(o){const p=o.dialogs.get(l);p&&(p.title=t)}}),e.watch(()=>a.modelValue,t=>{if(t===!1){if(i.value){i.value=!1;return}o?o.restore(l):(u.value=!0,c.value=!1)}t===!0&&(o?.dialogs.get(l)?.isMinimized?o.remindMinimized(l):c.value&&(n.value+=1))});const F=e.computed(()=>Object.prototype.hasOwnProperty.call(M,a.size)?M[a.size]:a.size);async function v(t){if(!a.beforeClose)return!0;try{return await a.beforeClose(t)!==!1}catch{return!1}}async function L(t){const p=await v("close");t(!p)}async function $(){await v("close")&&r("update:modelValue",!1)}async function b(){await v("cancel")&&r("cancel")}function V(){r("reset")}async function E(){await v("save")&&r("save")}const z=e.reactive({});async function R(t){if(await v("action")&&(r("action",t.key),!!t.onClick))try{const p=t.onClick();p instanceof Promise&&(z[t.key]=!0,await p)}finally{z[t.key]=!1}}const k=e.ref(!1),P=()=>{k.value=!k.value},I=e.computed(()=>k.value?"退出全屏":"全屏"),x=async()=>{if(await v("minimize")){if(i.value=!0,o)o.minimize(l);else{if(c.value){n.value+=1,r("minimize",{id:l});return}u.value=!1,c.value=!0}r("update:modelValue",!1),r("minimize",{id:l})}},H=()=>{o?o.restore(l):(u.value=!0,c.value=!1),r("update:modelValue",!0)};return(t,p)=>{const h=e.resolveComponent("el-button"),U=e.resolveComponent("el-dialog");return e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[G.value?(e.openBlock(),e.createBlock(U,e.mergeProps({key:0},t.$attrs,{"model-value":f.value,width:F.value,"lock-scroll":!1,"show-close":!1,fullscreen:k.value,"before-close":L,class:"g-dialog","onUpdate:modelValue":g}),e.createSlots({header:e.withCtx(({close:d})=>[e.createElementVNode("div",X,[e.createElementVNode("p",J,e.toDisplayString(t.title),1),e.createElementVNode("div",Q,[e.createElementVNode("button",{type:"button",class:"g-dialog-control g-dialog-control--minimize","aria-label":"最小化",title:"最小化",onClick:x}),e.createElementVNode("button",{type:"button",class:"g-dialog-control g-dialog-control--fullscreen","aria-label":I.value,title:I.value,onClick:P},null,8,ee),e.createElementVNode("button",{type:"button",class:"g-dialog-control g-dialog-control--close","aria-label":B,title:B,onClick:d},null,8,te)])])]),default:e.withCtx(()=>[e.renderSlot(t.$slots,"default",{},void 0,!0)]),_:2},[t.hideFooter?void 0:{name:"footer",fn:e.withCtx(()=>[e.renderSlot(t.$slots,"footer",{cancel:b,reset:V,save:E,close:$,loading:t.saveLoading},()=>[e.createElementVNode("div",oe,[t.actions&&t.actions.length?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(t.actions,d=>(e.openBlock(),e.createBlock(h,{key:d.key,type:d.type,icon:d.icon,loading:d.loading||z[d.key],disabled:d.disabled,plain:d.plain,size:"small",onClick:ne=>R(d)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(d.label),1)]),_:2},1032,["type","icon","loading","disabled","plain","onClick"]))),128)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[t.showCancel?(e.openBlock(),e.createBlock(h,{key:0,icon:e.unref(y.remove_default),size:"small",onClick:b},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.cancelText),1)]),_:1},8,["icon"])):e.createCommentVNode("",!0),t.showReset?(e.openBlock(),e.createBlock(h,{key:1,icon:e.unref(y.refresh_default),size:"small",onClick:V},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.resetText),1)]),_:1},8,["icon"])):e.createCommentVNode("",!0),t.showSave?(e.openBlock(),e.createBlock(h,{key:2,type:"primary",icon:e.unref(y.circle_check_default),loading:t.saveLoading,disabled:t.saveDisabled,size:"small",onClick:E},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.saveText),1)]),_:1},8,["icon","loading","disabled"])):e.createCommentVNode("",!0)],64)),e.renderSlot(t.$slots,"moreOperations",{},void 0,!0)])],!0)]),key:"0"}]),1040,["model-value","width","fullscreen"])):e.createCommentVNode("",!0),w.value?(e.openBlock(),e.createBlock(C,{key:1,title:t.title,position:A.value,"attention-tick":D.value,onRestore:H},null,8,["title","position","attention-tick"])):e.createCommentVNode("",!0)])}}}),_=S._export_sfc(ie,[["__scopeId","data-v-4f1dc418"]]);_.install=s=>{s.component(_.name,_),s.component(C.name,C)};exports.DIALOG_MANAGER_KEY=N;exports.DIALOG_SIZES=M;exports.GDialog=_;exports.GDialogMinimizedIcon=C;exports.MINIMIZED_LAYOUT=T;exports.createDialogManager=W;exports.default=_;exports.useDialogManager=O;
|
package/lib/GDialog/index.mjs
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { inject as
|
|
2
|
-
import { c as
|
|
3
|
-
import { _ as
|
|
4
|
-
const
|
|
1
|
+
import { inject as re, reactive as X, computed as c, defineComponent as Y, ref as T, watch as F, onUnmounted as Z, resolveComponent as B, createBlock as y, openBlock as m, Teleport as q, createElementVNode as u, normalizeStyle as ce, normalizeClass as ue, createVNode as P, withCtx as h, unref as I, toDisplayString as k, useId as N, onMounted as de, createCommentVNode as b, mergeProps as fe, createSlots as me, renderSlot as E, createElementBlock as H, Fragment as W, renderList as ge, createTextVNode as C } from "vue";
|
|
2
|
+
import { c as pe, r as ve, a as _e, b as ye } from "../index-Dxw2pU4z.mjs";
|
|
3
|
+
import { _ as K } from "../_plugin-vue_export-helper-CHgC5LLL.mjs";
|
|
4
|
+
const he = /* @__PURE__ */ Symbol("GDialogManager"), U = {
|
|
5
5
|
small: "380px",
|
|
6
6
|
medium: "480px",
|
|
7
7
|
large: "580px"
|
|
8
|
-
},
|
|
8
|
+
}, G = {
|
|
9
9
|
ICON_WIDTH: 92,
|
|
10
10
|
ICON_HEIGHT: 34,
|
|
11
11
|
GAP: 8,
|
|
@@ -13,74 +13,74 @@ const re = /* @__PURE__ */ Symbol("GDialogManager"), V = {
|
|
|
13
13
|
RIGHT_OFFSET: 18,
|
|
14
14
|
MAX_PER_ROW: 8
|
|
15
15
|
};
|
|
16
|
-
function
|
|
17
|
-
const
|
|
18
|
-
return
|
|
19
|
-
const
|
|
20
|
-
|
|
21
|
-
right:
|
|
22
|
-
bottom: _ +
|
|
16
|
+
function ze(a) {
|
|
17
|
+
const g = /* @__PURE__ */ new Map(), { ICON_WIDTH: l, ICON_HEIGHT: s, GAP: p, BOTTOM_OFFSET: _, RIGHT_OFFSET: n, MAX_PER_ROW: t } = G;
|
|
18
|
+
return a.forEach((r, d) => {
|
|
19
|
+
const o = Math.floor(d / t), i = d % t;
|
|
20
|
+
g.set(r, {
|
|
21
|
+
right: n + i * (l + p),
|
|
22
|
+
bottom: _ + o * (s + p)
|
|
23
23
|
});
|
|
24
|
-
}),
|
|
24
|
+
}), g;
|
|
25
25
|
}
|
|
26
|
-
function
|
|
27
|
-
const
|
|
28
|
-
const
|
|
29
|
-
return
|
|
30
|
-
|
|
31
|
-
}),
|
|
32
|
-
}), l =
|
|
33
|
-
function
|
|
34
|
-
|
|
26
|
+
function $e() {
|
|
27
|
+
const a = X(/* @__PURE__ */ new Map()), g = c(() => {
|
|
28
|
+
const o = [];
|
|
29
|
+
return a.forEach((i) => {
|
|
30
|
+
i.isMinimized && o.push(i.id);
|
|
31
|
+
}), o;
|
|
32
|
+
}), l = c(() => ze(g.value));
|
|
33
|
+
function s(o) {
|
|
34
|
+
a.set(o.id, { attentionTick: 0, ...o });
|
|
35
35
|
}
|
|
36
|
-
function
|
|
37
|
-
|
|
36
|
+
function p(o) {
|
|
37
|
+
a.delete(o);
|
|
38
38
|
}
|
|
39
|
-
function _(
|
|
40
|
-
const
|
|
41
|
-
if (
|
|
42
|
-
if (
|
|
43
|
-
|
|
39
|
+
function _(o) {
|
|
40
|
+
const i = a.get(o);
|
|
41
|
+
if (i) {
|
|
42
|
+
if (i.isMinimized) {
|
|
43
|
+
i.attentionTick = (i.attentionTick ?? 0) + 1;
|
|
44
44
|
return;
|
|
45
45
|
}
|
|
46
|
-
|
|
46
|
+
i.isMinimized = !0;
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
|
-
function o
|
|
50
|
-
const
|
|
51
|
-
|
|
49
|
+
function n(o) {
|
|
50
|
+
const i = a.get(o);
|
|
51
|
+
i?.isMinimized && (i.attentionTick = (i.attentionTick ?? 0) + 1);
|
|
52
52
|
}
|
|
53
|
-
function
|
|
54
|
-
const
|
|
55
|
-
|
|
53
|
+
function t(o) {
|
|
54
|
+
const i = a.get(o);
|
|
55
|
+
i && (i.isMinimized = !1);
|
|
56
56
|
}
|
|
57
|
-
function
|
|
58
|
-
return
|
|
59
|
-
() => l.value.get(
|
|
60
|
-
right:
|
|
61
|
-
bottom:
|
|
57
|
+
function r(o) {
|
|
58
|
+
return c(
|
|
59
|
+
() => l.value.get(o) ?? {
|
|
60
|
+
right: G.RIGHT_OFFSET,
|
|
61
|
+
bottom: G.BOTTOM_OFFSET
|
|
62
62
|
}
|
|
63
63
|
);
|
|
64
64
|
}
|
|
65
|
-
const
|
|
65
|
+
const d = c(() => g.value.map((o) => a.get(o)).filter(Boolean));
|
|
66
66
|
return {
|
|
67
|
-
dialogs:
|
|
68
|
-
register:
|
|
69
|
-
unregister:
|
|
67
|
+
dialogs: a,
|
|
68
|
+
register: s,
|
|
69
|
+
unregister: p,
|
|
70
70
|
minimize: _,
|
|
71
|
-
remindMinimized:
|
|
72
|
-
restore:
|
|
73
|
-
getPosition:
|
|
74
|
-
minimizedList:
|
|
71
|
+
remindMinimized: n,
|
|
72
|
+
restore: t,
|
|
73
|
+
getPosition: r,
|
|
74
|
+
minimizedList: d
|
|
75
75
|
};
|
|
76
76
|
}
|
|
77
|
-
function
|
|
78
|
-
return
|
|
77
|
+
function Te() {
|
|
78
|
+
return re(he, null);
|
|
79
79
|
}
|
|
80
|
-
const
|
|
80
|
+
const ke = ["title", "aria-label"], be = {
|
|
81
81
|
class: "g-dialog-minimized-icon__icon",
|
|
82
82
|
"aria-hidden": "true"
|
|
83
|
-
},
|
|
83
|
+
}, we = { class: "g-dialog-minimized-icon__title" }, Me = /* @__PURE__ */ Y({
|
|
84
84
|
name: "GDialogMinimizedIcon",
|
|
85
85
|
__name: "GDialogMinimizedIcon",
|
|
86
86
|
props: {
|
|
@@ -89,228 +89,306 @@ const de = ["title", "aria-label"], me = {
|
|
|
89
89
|
attentionTick: { default: 0 }
|
|
90
90
|
},
|
|
91
91
|
emits: ["restore"],
|
|
92
|
-
setup(
|
|
93
|
-
const l =
|
|
92
|
+
setup(a, { emit: g }) {
|
|
93
|
+
const l = a, s = g, p = c(() => l.title || "弹窗"), _ = c(() => `恢复 ${p.value}`), n = c(() => ({
|
|
94
94
|
position: "fixed",
|
|
95
95
|
right: `${l.position.right}px`,
|
|
96
96
|
bottom: `${l.position.bottom}px`
|
|
97
|
-
})),
|
|
98
|
-
let
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
97
|
+
})), t = T(!1);
|
|
98
|
+
let r;
|
|
99
|
+
F(() => l.attentionTick, (o, i) => {
|
|
100
|
+
i === void 0 || o === i || (t.value = !1, window.clearTimeout(r), window.requestAnimationFrame(() => {
|
|
101
|
+
t.value = !0, r = window.setTimeout(() => {
|
|
102
|
+
t.value = !1;
|
|
103
103
|
}, 580);
|
|
104
104
|
}));
|
|
105
|
-
}),
|
|
106
|
-
window.clearTimeout(
|
|
105
|
+
}), Z(() => {
|
|
106
|
+
window.clearTimeout(r);
|
|
107
107
|
});
|
|
108
|
-
function
|
|
109
|
-
|
|
108
|
+
function d() {
|
|
109
|
+
s("restore");
|
|
110
110
|
}
|
|
111
|
-
return (
|
|
112
|
-
const
|
|
113
|
-
return
|
|
114
|
-
|
|
115
|
-
class:
|
|
111
|
+
return (o, i) => {
|
|
112
|
+
const O = B("el-icon");
|
|
113
|
+
return m(), y(q, { to: "body" }, [
|
|
114
|
+
u("div", {
|
|
115
|
+
class: ue(["g-dialog-minimized-icon", { "is-attention": t.value }]),
|
|
116
116
|
type: "button",
|
|
117
|
-
style:
|
|
117
|
+
style: ce(n.value),
|
|
118
118
|
title: _.value,
|
|
119
119
|
"aria-label": _.value,
|
|
120
|
-
onClick:
|
|
120
|
+
onClick: d
|
|
121
121
|
}, [
|
|
122
|
-
|
|
122
|
+
i[0] || (i[0] = u("span", {
|
|
123
123
|
class: "g-dialog-minimized-icon__glow",
|
|
124
124
|
"aria-hidden": "true"
|
|
125
125
|
}, null, -1)),
|
|
126
|
-
|
|
126
|
+
i[1] || (i[1] = u("span", {
|
|
127
127
|
class: "g-dialog-minimized-icon__wave",
|
|
128
128
|
"aria-hidden": "true"
|
|
129
129
|
}, null, -1)),
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
default:
|
|
133
|
-
|
|
130
|
+
u("span", be, [
|
|
131
|
+
P(O, null, {
|
|
132
|
+
default: h(() => [
|
|
133
|
+
P(I(pe))
|
|
134
134
|
]),
|
|
135
135
|
_: 1
|
|
136
136
|
})
|
|
137
137
|
]),
|
|
138
|
-
|
|
139
|
-
], 14,
|
|
138
|
+
u("span", we, k(p.value), 1)
|
|
139
|
+
], 14, ke)
|
|
140
140
|
]);
|
|
141
141
|
};
|
|
142
142
|
}
|
|
143
|
-
}),
|
|
143
|
+
}), V = /* @__PURE__ */ K(Me, [["__scopeId", "data-v-5195816e"]]), Ce = { class: "g-dialog-header" }, Ie = { class: "g-dialog-title" }, Oe = {
|
|
144
144
|
class: "g-dialog-operation-container",
|
|
145
145
|
"aria-label": "弹窗操作"
|
|
146
|
-
},
|
|
146
|
+
}, Se = ["aria-label", "title"], Ee = ["onClick"], De = { class: "g-dialog-footer" }, j = "关闭", Fe = /* @__PURE__ */ Y({
|
|
147
147
|
name: "GDialog",
|
|
148
148
|
inheritAttrs: !1,
|
|
149
149
|
__name: "index",
|
|
150
150
|
props: {
|
|
151
151
|
title: { default: "" },
|
|
152
152
|
size: { default: "medium" },
|
|
153
|
-
modelValue: { type: Boolean }
|
|
153
|
+
modelValue: { type: Boolean },
|
|
154
|
+
hideFooter: { type: Boolean, default: !1 },
|
|
155
|
+
actions: {},
|
|
156
|
+
showCancel: { type: Boolean, default: !0 },
|
|
157
|
+
showReset: { type: Boolean, default: !0 },
|
|
158
|
+
showSave: { type: Boolean, default: !0 },
|
|
159
|
+
cancelText: { default: "取消" },
|
|
160
|
+
resetText: { default: "重置" },
|
|
161
|
+
saveText: { default: "保存" },
|
|
162
|
+
saveLoading: { type: Boolean, default: !1 },
|
|
163
|
+
saveDisabled: { type: Boolean, default: !1 },
|
|
164
|
+
beforeClose: {}
|
|
154
165
|
},
|
|
155
|
-
emits: ["cancel", "reset", "save", "minimize", "update:modelValue"],
|
|
156
|
-
setup(
|
|
157
|
-
const l =
|
|
158
|
-
function _(
|
|
159
|
-
|
|
166
|
+
emits: ["cancel", "reset", "save", "minimize", "action", "update:modelValue"],
|
|
167
|
+
setup(a, { emit: g }) {
|
|
168
|
+
const l = a, s = g, p = c(() => l.modelValue);
|
|
169
|
+
function _(e) {
|
|
170
|
+
s("update:modelValue", e);
|
|
160
171
|
}
|
|
161
|
-
const
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
id:
|
|
172
|
+
const n = N ? N() : `g-dialog-${Date.now()}-${Math.random().toString(36).slice(2)}`, t = Te(), r = T(!1), d = T(!0), o = T(0), i = T(!1), O = c(() => t ? t.dialogs.get(n)?.isMinimized ?? !1 : r.value), J = c(() => t ? t.dialogs.get(n)?.attentionTick ?? 0 : o.value), Q = c(() => t ? !(t.dialogs.get(n)?.isMinimized ?? !1) : d.value), x = c(() => t ? t.getPosition(n).value : { right: 20, bottom: 20 });
|
|
173
|
+
de(() => {
|
|
174
|
+
t?.register({
|
|
175
|
+
id: n,
|
|
165
176
|
title: l.title,
|
|
166
177
|
isMinimized: !1
|
|
167
178
|
});
|
|
168
|
-
}),
|
|
169
|
-
|
|
170
|
-
}),
|
|
179
|
+
}), Z(() => {
|
|
180
|
+
t?.unregister(n);
|
|
181
|
+
}), F(
|
|
171
182
|
() => l.title,
|
|
172
|
-
(
|
|
173
|
-
if (
|
|
174
|
-
const
|
|
175
|
-
|
|
183
|
+
(e) => {
|
|
184
|
+
if (t) {
|
|
185
|
+
const v = t.dialogs.get(n);
|
|
186
|
+
v && (v.title = e);
|
|
176
187
|
}
|
|
177
188
|
}
|
|
178
|
-
),
|
|
189
|
+
), F(
|
|
179
190
|
() => l.modelValue,
|
|
180
|
-
(
|
|
181
|
-
if (
|
|
182
|
-
if (
|
|
183
|
-
|
|
191
|
+
(e) => {
|
|
192
|
+
if (e === !1) {
|
|
193
|
+
if (i.value) {
|
|
194
|
+
i.value = !1;
|
|
184
195
|
return;
|
|
185
196
|
}
|
|
186
|
-
|
|
197
|
+
t ? t.restore(n) : (d.value = !0, r.value = !1);
|
|
187
198
|
}
|
|
188
|
-
|
|
199
|
+
e === !0 && (t?.dialogs.get(n)?.isMinimized ? t.remindMinimized(n) : r.value && (o.value += 1));
|
|
189
200
|
}
|
|
190
201
|
);
|
|
191
|
-
const
|
|
192
|
-
function
|
|
193
|
-
|
|
202
|
+
const ee = c(() => Object.prototype.hasOwnProperty.call(U, l.size) ? U[l.size] : l.size);
|
|
203
|
+
async function z(e) {
|
|
204
|
+
if (!l.beforeClose) return !0;
|
|
205
|
+
try {
|
|
206
|
+
return await l.beforeClose(e) !== !1;
|
|
207
|
+
} catch {
|
|
208
|
+
return !1;
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
async function te(e) {
|
|
212
|
+
const v = await z("close");
|
|
213
|
+
e(!v);
|
|
214
|
+
}
|
|
215
|
+
async function ie() {
|
|
216
|
+
await z("close") && s("update:modelValue", !1);
|
|
217
|
+
}
|
|
218
|
+
async function A() {
|
|
219
|
+
await z("cancel") && s("cancel");
|
|
194
220
|
}
|
|
195
|
-
function
|
|
196
|
-
|
|
221
|
+
function $() {
|
|
222
|
+
s("reset");
|
|
197
223
|
}
|
|
198
|
-
function
|
|
199
|
-
|
|
224
|
+
async function R() {
|
|
225
|
+
await z("save") && s("save");
|
|
200
226
|
}
|
|
201
|
-
const
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
227
|
+
const S = X({});
|
|
228
|
+
async function oe(e) {
|
|
229
|
+
if (await z("action") && (s("action", e.key), !!e.onClick))
|
|
230
|
+
try {
|
|
231
|
+
const v = e.onClick();
|
|
232
|
+
v instanceof Promise && (S[e.key] = !0, await v);
|
|
233
|
+
} finally {
|
|
234
|
+
S[e.key] = !1;
|
|
235
|
+
}
|
|
236
|
+
}
|
|
237
|
+
const w = T(!1), ne = () => {
|
|
238
|
+
w.value = !w.value;
|
|
239
|
+
}, L = c(() => w.value ? "退出全屏" : "全屏"), le = async () => {
|
|
240
|
+
if (await z("minimize")) {
|
|
241
|
+
if (i.value = !0, t)
|
|
242
|
+
t.minimize(n);
|
|
243
|
+
else {
|
|
244
|
+
if (r.value) {
|
|
245
|
+
o.value += 1, s("minimize", { id: n });
|
|
246
|
+
return;
|
|
247
|
+
}
|
|
248
|
+
d.value = !1, r.value = !0;
|
|
210
249
|
}
|
|
211
|
-
|
|
250
|
+
s("update:modelValue", !1), s("minimize", { id: n });
|
|
212
251
|
}
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
e ? e.restore(o) : (u.value = !0, s.value = !1), a("update:modelValue", !0);
|
|
252
|
+
}, ae = () => {
|
|
253
|
+
t ? t.restore(n) : (d.value = !0, r.value = !1), s("update:modelValue", !0);
|
|
216
254
|
};
|
|
217
|
-
return (
|
|
218
|
-
const
|
|
219
|
-
return
|
|
220
|
-
|
|
221
|
-
"model-value":
|
|
222
|
-
width:
|
|
255
|
+
return (e, v) => {
|
|
256
|
+
const M = B("el-button"), se = B("el-dialog");
|
|
257
|
+
return m(), y(q, { to: "body" }, [
|
|
258
|
+
Q.value ? (m(), y(se, fe({ key: 0 }, e.$attrs, {
|
|
259
|
+
"model-value": p.value,
|
|
260
|
+
width: ee.value,
|
|
223
261
|
"lock-scroll": !1,
|
|
224
262
|
"show-close": !1,
|
|
225
|
-
fullscreen:
|
|
263
|
+
fullscreen: w.value,
|
|
264
|
+
"before-close": te,
|
|
265
|
+
class: "g-dialog",
|
|
226
266
|
"onUpdate:modelValue": _
|
|
227
|
-
}), {
|
|
228
|
-
header:
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
type: "button",
|
|
234
|
-
class: "g-dialog-control g-dialog-control--full-screen",
|
|
235
|
-
"aria-label": "最大化",
|
|
236
|
-
onClick: Z
|
|
237
|
-
}),
|
|
238
|
-
d("button", {
|
|
267
|
+
}), me({
|
|
268
|
+
header: h(({ close: f }) => [
|
|
269
|
+
u("div", Ce, [
|
|
270
|
+
u("p", Ie, k(e.title), 1),
|
|
271
|
+
u("div", Oe, [
|
|
272
|
+
u("button", {
|
|
239
273
|
type: "button",
|
|
240
274
|
class: "g-dialog-control g-dialog-control--minimize",
|
|
241
275
|
"aria-label": "最小化",
|
|
242
|
-
|
|
276
|
+
title: "最小化",
|
|
277
|
+
onClick: le
|
|
243
278
|
}),
|
|
244
|
-
|
|
279
|
+
u("button", {
|
|
280
|
+
type: "button",
|
|
281
|
+
class: "g-dialog-control g-dialog-control--fullscreen",
|
|
282
|
+
"aria-label": L.value,
|
|
283
|
+
title: L.value,
|
|
284
|
+
onClick: ne
|
|
285
|
+
}, null, 8, Se),
|
|
286
|
+
u("button", {
|
|
245
287
|
type: "button",
|
|
246
288
|
class: "g-dialog-control g-dialog-control--close",
|
|
247
|
-
"aria-label":
|
|
248
|
-
|
|
249
|
-
|
|
289
|
+
"aria-label": j,
|
|
290
|
+
title: j,
|
|
291
|
+
onClick: f
|
|
292
|
+
}, null, 8, Ee)
|
|
250
293
|
])
|
|
251
294
|
])
|
|
252
295
|
]),
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
onClick: W,
|
|
256
|
-
size: "small",
|
|
257
|
-
icon: I(le)
|
|
258
|
-
}, {
|
|
259
|
-
default: p(() => g[0] || (g[0] = [
|
|
260
|
-
h(" 取消 ")
|
|
261
|
-
])),
|
|
262
|
-
_: 1,
|
|
263
|
-
__: [0]
|
|
264
|
-
}, 8, ["icon"]),
|
|
265
|
-
z(b, {
|
|
266
|
-
onClick: U,
|
|
267
|
-
size: "small",
|
|
268
|
-
icon: I(ae)
|
|
269
|
-
}, {
|
|
270
|
-
default: p(() => g[1] || (g[1] = [
|
|
271
|
-
h(" 重置 ")
|
|
272
|
-
])),
|
|
273
|
-
_: 1,
|
|
274
|
-
__: [1]
|
|
275
|
-
}, 8, ["icon"]),
|
|
276
|
-
z(b, {
|
|
277
|
-
type: "primary",
|
|
278
|
-
onClick: X,
|
|
279
|
-
size: "small",
|
|
280
|
-
icon: I(se)
|
|
281
|
-
}, {
|
|
282
|
-
default: p(() => g[2] || (g[2] = [
|
|
283
|
-
h(" 保存 ")
|
|
284
|
-
])),
|
|
285
|
-
_: 1,
|
|
286
|
-
__: [2]
|
|
287
|
-
}, 8, ["icon"]),
|
|
288
|
-
F(c.$slots, "moreOperations", {}, void 0, !0)
|
|
296
|
+
default: h(() => [
|
|
297
|
+
E(e.$slots, "default", {}, void 0, !0)
|
|
289
298
|
]),
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
299
|
+
_: 2
|
|
300
|
+
}, [
|
|
301
|
+
e.hideFooter ? void 0 : {
|
|
302
|
+
name: "footer",
|
|
303
|
+
fn: h(() => [
|
|
304
|
+
E(e.$slots, "footer", {
|
|
305
|
+
cancel: A,
|
|
306
|
+
reset: $,
|
|
307
|
+
save: R,
|
|
308
|
+
close: ie,
|
|
309
|
+
loading: e.saveLoading
|
|
310
|
+
}, () => [
|
|
311
|
+
u("div", De, [
|
|
312
|
+
e.actions && e.actions.length ? (m(!0), H(W, { key: 0 }, ge(e.actions, (f) => (m(), y(M, {
|
|
313
|
+
key: f.key,
|
|
314
|
+
type: f.type,
|
|
315
|
+
icon: f.icon,
|
|
316
|
+
loading: f.loading || S[f.key],
|
|
317
|
+
disabled: f.disabled,
|
|
318
|
+
plain: f.plain,
|
|
319
|
+
size: "small",
|
|
320
|
+
onClick: (Be) => oe(f)
|
|
321
|
+
}, {
|
|
322
|
+
default: h(() => [
|
|
323
|
+
C(k(f.label), 1)
|
|
324
|
+
]),
|
|
325
|
+
_: 2
|
|
326
|
+
}, 1032, ["type", "icon", "loading", "disabled", "plain", "onClick"]))), 128)) : (m(), H(W, { key: 1 }, [
|
|
327
|
+
e.showCancel ? (m(), y(M, {
|
|
328
|
+
key: 0,
|
|
329
|
+
icon: I(ve),
|
|
330
|
+
size: "small",
|
|
331
|
+
onClick: A
|
|
332
|
+
}, {
|
|
333
|
+
default: h(() => [
|
|
334
|
+
C(k(e.cancelText), 1)
|
|
335
|
+
]),
|
|
336
|
+
_: 1
|
|
337
|
+
}, 8, ["icon"])) : b("", !0),
|
|
338
|
+
e.showReset ? (m(), y(M, {
|
|
339
|
+
key: 1,
|
|
340
|
+
icon: I(_e),
|
|
341
|
+
size: "small",
|
|
342
|
+
onClick: $
|
|
343
|
+
}, {
|
|
344
|
+
default: h(() => [
|
|
345
|
+
C(k(e.resetText), 1)
|
|
346
|
+
]),
|
|
347
|
+
_: 1
|
|
348
|
+
}, 8, ["icon"])) : b("", !0),
|
|
349
|
+
e.showSave ? (m(), y(M, {
|
|
350
|
+
key: 2,
|
|
351
|
+
type: "primary",
|
|
352
|
+
icon: I(ye),
|
|
353
|
+
loading: e.saveLoading,
|
|
354
|
+
disabled: e.saveDisabled,
|
|
355
|
+
size: "small",
|
|
356
|
+
onClick: R
|
|
357
|
+
}, {
|
|
358
|
+
default: h(() => [
|
|
359
|
+
C(k(e.saveText), 1)
|
|
360
|
+
]),
|
|
361
|
+
_: 1
|
|
362
|
+
}, 8, ["icon", "loading", "disabled"])) : b("", !0)
|
|
363
|
+
], 64)),
|
|
364
|
+
E(e.$slots, "moreOperations", {}, void 0, !0)
|
|
365
|
+
])
|
|
366
|
+
], !0)
|
|
367
|
+
]),
|
|
368
|
+
key: "0"
|
|
369
|
+
}
|
|
370
|
+
]), 1040, ["model-value", "width", "fullscreen"])) : b("", !0),
|
|
371
|
+
O.value ? (m(), y(V, {
|
|
296
372
|
key: 1,
|
|
297
|
-
title:
|
|
298
|
-
position:
|
|
299
|
-
"attention-tick":
|
|
300
|
-
onRestore:
|
|
301
|
-
}, null, 8, ["title", "position", "attention-tick"])) :
|
|
373
|
+
title: e.title,
|
|
374
|
+
position: x.value,
|
|
375
|
+
"attention-tick": J.value,
|
|
376
|
+
onRestore: ae
|
|
377
|
+
}, null, 8, ["title", "position", "attention-tick"])) : b("", !0)
|
|
302
378
|
]);
|
|
303
379
|
};
|
|
304
380
|
}
|
|
305
|
-
}),
|
|
306
|
-
|
|
307
|
-
|
|
381
|
+
}), D = /* @__PURE__ */ K(Fe, [["__scopeId", "data-v-4f1dc418"]]);
|
|
382
|
+
D.install = (a) => {
|
|
383
|
+
a.component(D.name, D), a.component(V.name, V);
|
|
308
384
|
};
|
|
309
385
|
export {
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
386
|
+
he as DIALOG_MANAGER_KEY,
|
|
387
|
+
U as DIALOG_SIZES,
|
|
388
|
+
D as GDialog,
|
|
389
|
+
V as GDialogMinimizedIcon,
|
|
390
|
+
G as MINIMIZED_LAYOUT,
|
|
391
|
+
$e as createDialogManager,
|
|
392
|
+
D as default,
|
|
393
|
+
Te as useDialogManager
|
|
316
394
|
};
|
package/lib/GDialog/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.g-dialog-minimized-icon[data-v-5195816e]{width:78px;height:34px;padding:0 6px;border-radius:10px 18px;background:linear-gradient(90deg,rgba(106,210,255,.18) 1px,transparent 1px) 0 0/8px 8px,linear-gradient(180deg,rgba(255,255,255,.16),transparent 42%),linear-gradient(135deg,#10294c,var(--el-color-primary) 58%,#00d1ff);color:#f4fbff;display:flex;align-items:center;justify-content:flex-start;gap:6px;cursor:pointer;z-index:999;overflow:hidden;isolation:isolate;clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);transition:right .3s ease,bottom .3s ease,transform .18s ease,box-shadow .18s ease,filter .18s ease;animation:g-dialog-minimized-enter-5195816e .28s cubic-bezier(.2,.8,.2,1) both}.g-dialog-minimized-icon[data-v-5195816e]:before{content:"";position:absolute;inset:3px;border:1px solid rgba(163,232,255,.24);clip-path:inherit;pointer-events:none}.g-dialog-minimized-icon[data-v-5195816e]:after{content:"";position:absolute;top:-32%;left:-38%;width:32px;height:62px;background:linear-gradient(90deg,transparent,rgba(180,244,255,.64),transparent);transform:rotate(18deg) translate(-16px);opacity:0;pointer-events:none}.g-dialog-minimized-icon[data-v-5195816e]:hover{transform:translateY(-2px);filter:saturate(1.2) brightness(1.08)}.g-dialog-minimized-icon[data-v-5195816e]:hover:after{opacity:1;animation:g-dialog-minimized-shine-5195816e .62s ease}.g-dialog-minimized-icon:hover .g-dialog-minimized-icon__wave[data-v-5195816e]{opacity:1;animation:g-dialog-minimized-wave-5195816e 1.45s ease-in-out infinite}.g-dialog-minimized-icon:hover .g-dialog-minimized-icon__icon[data-v-5195816e]{transform:scale(1.08)}.g-dialog-minimized-icon[data-v-5195816e]:active{transform:translateY(0) scale(.98);box-shadow:0 0 0 1px #ffffff14 inset,0 5px 14px #0092ff3d,0 2px 6px #0003}.g-dialog-minimized-icon[data-v-5195816e]:focus-visible{outline:2px solid rgba(0,209,255,.72);outline-offset:3px}.g-dialog-minimized-icon.is-attention[data-v-5195816e]{animation:g-dialog-minimized-attention-5195816e .58s ease both;filter:saturate(1.22) brightness(1.08)}.g-dialog-minimized-icon.is-attention[data-v-5195816e]:after{opacity:1;animation:g-dialog-minimized-shine-5195816e .58s ease}.g-dialog-minimized-icon.is-attention .g-dialog-minimized-icon__wave[data-v-5195816e]{opacity:1;animation:g-dialog-minimized-wave-5195816e .58s ease-in-out}.g-dialog-minimized-icon.is-attention .g-dialog-minimized-icon__icon[data-v-5195816e]{animation:g-dialog-minimized-icon-pop-5195816e .58s ease both}.g-dialog-minimized-icon__glow[data-v-5195816e]{position:absolute;inset:auto 8px -14px auto;width:38px;height:28px;border-radius:50%;background:#00d1ff7a;filter:blur(13px);pointer-events:none;z-index:-1}.g-dialog-minimized-icon__wave[data-v-5195816e]{position:absolute;inset:-18px -24px;background:radial-gradient(ellipse at 22% 62%,rgba(173,243,255,.62) 0 9%,transparent 26%),radial-gradient(ellipse at 52% 78%,rgba(0,209,255,.58) 0 12%,transparent 30%),radial-gradient(ellipse at 82% 58%,rgba(67,170,255,.5) 0 10%,transparent 28%),linear-gradient(90deg,#147bff14,#00d1ff5c,#147bff14);background-size:72px 46px,86px 42px,70px 48px,100% 100%;background-position:-10px 16px,18px 20px,58px 14px,0 0;filter:blur(1px) saturate(1.25);opacity:0;pointer-events:none;transform:translate(-18px) translateY(6px) rotate(-2deg);transition:opacity .18s ease;z-index:-1}.g-dialog-minimized-icon__icon[data-v-5195816e]{width:20px;height:20px;border:1px solid rgba(203,246,255,.32);border-radius:7px;background:linear-gradient(135deg,rgba(255,255,255,.2),transparent),#00132b2e;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:inset 0 0 10px #00d1ff3d;transition:transform .18s ease}.g-dialog-minimized-icon__icon .el-icon[data-v-5195816e]{font-size:13px}.g-dialog-minimized-icon__title[data-v-5195816e]{min-width:0;max-width:50px;font-size:10px;font-weight:600;line-height:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes g-dialog-minimized-enter-5195816e{0%{transform:translateY(8px) scale(.92);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes g-dialog-minimized-shine-5195816e{0%{transform:rotate(18deg) translate(-16px)}to{transform:rotate(18deg) translate(116px)}}@keyframes g-dialog-minimized-wave-5195816e{0%{background-position:-18px 18px,8px 22px,54px 14px,0 0;transform:translate(-14px) translateY(7px) rotate(-3deg) scaleY(.82)}45%{background-position:18px 8px,42px 18px,88px 10px,0 0;transform:translate(0) translateY(0) rotate(1deg) scaleY(1.05)}to{background-position:58px 17px,82px 22px,126px 15px,0 0;transform:translate(14px) translateY(5px) rotate(3deg) scaleY(.9)}}@keyframes g-dialog-minimized-attention-5195816e{0%,to{transform:translateY(0) scale(1)}18%{transform:translateY(-5px) scale(1.04)}36%{transform:translateY(0) scale(.98)}54%{transform:translateY(-3px) scale(1.02)}72%{transform:translateY(0) scale(1)}}@keyframes g-dialog-minimized-icon-pop-5195816e{0%,to{transform:scale(1)}30%{transform:scale(1.18) rotate(-8deg)}60%{transform:scale(1.08) rotate(6deg)}}@media(prefers-reduced-motion:reduce){.g-dialog-minimized-icon[data-v-5195816e]{animation:none;transition:right .3s ease,bottom .3s ease}.g-dialog-minimized-icon[data-v-5195816e]:after{display:none}.g-dialog-minimized-icon[data-v-5195816e]:hover,.g-dialog-minimized-icon[data-v-5195816e]:active,.g-dialog-minimized-icon.is-attention[data-v-5195816e]{transform:none;filter:none}.g-dialog-minimized-icon__wave[data-v-5195816e]{animation:none!important;opacity:0}.g-dialog-minimized-icon__icon[data-v-5195816e]{animation:none!important;transition:none}}.g-dialog-header[data-v-1e2f8946]{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;gap:16px}.g-dialog-header .g-dialog-title[data-v-1e2f8946]{position:relative;max-width:calc(100% - 88px);margin:-8px 0 0;overflow:hidden;color:#1f2937;font-size:14px;font-weight:600;line-height:1.5;letter-spacing:.02em;text-overflow:ellipsis;white-space:nowrap}.g-dialog-header .g-dialog-operation-container[data-v-1e2f8946]{display:flex;flex-direction:row;align-items:center;gap:8px;padding:0;margin-top:-4px}.g-dialog-control[data-v-1e2f8946]{width:12px;height:12px;padding:0;border:0;border-radius:50%;cursor:pointer;flex-shrink:0;box-shadow:inset 0 1px 1px #ffffffa6,0 0 0 1px #00000014;transition:transform .16s ease,filter .16s ease}.g-dialog-control[data-v-1e2f8946]:hover{filter:brightness(1.04);transform:scale(1.06)}.g-dialog-control[data-v-1e2f8946]:active{transform:scale(.94)}.g-dialog-control[data-v-1e2f8946]:focus-visible{outline:2px solid rgba(68,68,68,.32);outline-offset:3px}.g-dialog-control--close[data-v-1e2f8946]{background:#ff5f57}.g-dialog-control--minimize[data-v-1e2f8946]{background:#ffbd2e}.g-dialog-control--full-screen[data-v-1e2f8946]{background:#28c840}@media(prefers-reduced-motion:reduce){.g-dialog-control[data-v-1e2f8946]{transition:none}}
|
|
1
|
+
@charset "UTF-8";.g-dialog-minimized-icon[data-v-5195816e]{width:78px;height:34px;padding:0 6px;border-radius:10px 18px;background:linear-gradient(90deg,rgba(106,210,255,.18) 1px,transparent 1px) 0 0/8px 8px,linear-gradient(180deg,rgba(255,255,255,.16),transparent 42%),linear-gradient(135deg,#10294c,var(--el-color-primary) 58%,#00d1ff);color:#f4fbff;display:flex;align-items:center;justify-content:flex-start;gap:6px;cursor:pointer;z-index:999;overflow:hidden;isolation:isolate;clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);transition:right .3s ease,bottom .3s ease,transform .18s ease,box-shadow .18s ease,filter .18s ease;animation:g-dialog-minimized-enter-5195816e .28s cubic-bezier(.2,.8,.2,1) both}.g-dialog-minimized-icon[data-v-5195816e]:before{content:"";position:absolute;inset:3px;border:1px solid rgba(163,232,255,.24);clip-path:inherit;pointer-events:none}.g-dialog-minimized-icon[data-v-5195816e]:after{content:"";position:absolute;top:-32%;left:-38%;width:32px;height:62px;background:linear-gradient(90deg,transparent,rgba(180,244,255,.64),transparent);transform:rotate(18deg) translate(-16px);opacity:0;pointer-events:none}.g-dialog-minimized-icon[data-v-5195816e]:hover{transform:translateY(-2px);filter:saturate(1.2) brightness(1.08)}.g-dialog-minimized-icon[data-v-5195816e]:hover:after{opacity:1;animation:g-dialog-minimized-shine-5195816e .62s ease}.g-dialog-minimized-icon:hover .g-dialog-minimized-icon__wave[data-v-5195816e]{opacity:1;animation:g-dialog-minimized-wave-5195816e 1.45s ease-in-out infinite}.g-dialog-minimized-icon:hover .g-dialog-minimized-icon__icon[data-v-5195816e]{transform:scale(1.08)}.g-dialog-minimized-icon[data-v-5195816e]:active{transform:translateY(0) scale(.98);box-shadow:0 0 0 1px #ffffff14 inset,0 5px 14px #0092ff3d,0 2px 6px #0003}.g-dialog-minimized-icon[data-v-5195816e]:focus-visible{outline:2px solid rgba(0,209,255,.72);outline-offset:3px}.g-dialog-minimized-icon.is-attention[data-v-5195816e]{animation:g-dialog-minimized-attention-5195816e .58s ease both;filter:saturate(1.22) brightness(1.08)}.g-dialog-minimized-icon.is-attention[data-v-5195816e]:after{opacity:1;animation:g-dialog-minimized-shine-5195816e .58s ease}.g-dialog-minimized-icon.is-attention .g-dialog-minimized-icon__wave[data-v-5195816e]{opacity:1;animation:g-dialog-minimized-wave-5195816e .58s ease-in-out}.g-dialog-minimized-icon.is-attention .g-dialog-minimized-icon__icon[data-v-5195816e]{animation:g-dialog-minimized-icon-pop-5195816e .58s ease both}.g-dialog-minimized-icon__glow[data-v-5195816e]{position:absolute;inset:auto 8px -14px auto;width:38px;height:28px;border-radius:50%;background:#00d1ff7a;filter:blur(13px);pointer-events:none;z-index:-1}.g-dialog-minimized-icon__wave[data-v-5195816e]{position:absolute;inset:-18px -24px;background:radial-gradient(ellipse at 22% 62%,rgba(173,243,255,.62) 0 9%,transparent 26%),radial-gradient(ellipse at 52% 78%,rgba(0,209,255,.58) 0 12%,transparent 30%),radial-gradient(ellipse at 82% 58%,rgba(67,170,255,.5) 0 10%,transparent 28%),linear-gradient(90deg,#147bff14,#00d1ff5c,#147bff14);background-size:72px 46px,86px 42px,70px 48px,100% 100%;background-position:-10px 16px,18px 20px,58px 14px,0 0;filter:blur(1px) saturate(1.25);opacity:0;pointer-events:none;transform:translate(-18px) translateY(6px) rotate(-2deg);transition:opacity .18s ease;z-index:-1}.g-dialog-minimized-icon__icon[data-v-5195816e]{width:20px;height:20px;border:1px solid rgba(203,246,255,.32);border-radius:7px;background:linear-gradient(135deg,rgba(255,255,255,.2),transparent),#00132b2e;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:inset 0 0 10px #00d1ff3d;transition:transform .18s ease}.g-dialog-minimized-icon__icon .el-icon[data-v-5195816e]{font-size:13px}.g-dialog-minimized-icon__title[data-v-5195816e]{min-width:0;max-width:50px;font-size:10px;font-weight:600;line-height:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes g-dialog-minimized-enter-5195816e{0%{transform:translateY(8px) scale(.92);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes g-dialog-minimized-shine-5195816e{0%{transform:rotate(18deg) translate(-16px)}to{transform:rotate(18deg) translate(116px)}}@keyframes g-dialog-minimized-wave-5195816e{0%{background-position:-18px 18px,8px 22px,54px 14px,0 0;transform:translate(-14px) translateY(7px) rotate(-3deg) scaleY(.82)}45%{background-position:18px 8px,42px 18px,88px 10px,0 0;transform:translate(0) translateY(0) rotate(1deg) scaleY(1.05)}to{background-position:58px 17px,82px 22px,126px 15px,0 0;transform:translate(14px) translateY(5px) rotate(3deg) scaleY(.9)}}@keyframes g-dialog-minimized-attention-5195816e{0%,to{transform:translateY(0) scale(1)}18%{transform:translateY(-5px) scale(1.04)}36%{transform:translateY(0) scale(.98)}54%{transform:translateY(-3px) scale(1.02)}72%{transform:translateY(0) scale(1)}}@keyframes g-dialog-minimized-icon-pop-5195816e{0%,to{transform:scale(1)}30%{transform:scale(1.18) rotate(-8deg)}60%{transform:scale(1.08) rotate(6deg)}}@media(prefers-reduced-motion:reduce){.g-dialog-minimized-icon[data-v-5195816e]{animation:none;transition:right .3s ease,bottom .3s ease}.g-dialog-minimized-icon[data-v-5195816e]:after{display:none}.g-dialog-minimized-icon[data-v-5195816e]:hover,.g-dialog-minimized-icon[data-v-5195816e]:active,.g-dialog-minimized-icon.is-attention[data-v-5195816e]{transform:none;filter:none}.g-dialog-minimized-icon__wave[data-v-5195816e]{animation:none!important;opacity:0}.g-dialog-minimized-icon__icon[data-v-5195816e]{animation:none!important;transition:none}}.g-dialog-header[data-v-4f1dc418]{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:16px;padding:2px 0}.g-dialog-header .g-dialog-title[data-v-4f1dc418]{position:relative;max-width:calc(100% - 88px);margin:0;overflow:hidden;color:var(--el-text-color-primary);font-size:15px;font-weight:600;line-height:1.4;letter-spacing:.01em;text-overflow:ellipsis;white-space:nowrap}.g-dialog-header .g-dialog-title[data-v-4f1dc418]:before{content:"";position:absolute;top:50%;left:0;width:3px;height:14px;background:linear-gradient(180deg,var(--el-color-primary),var(--el-color-primary-light-3));border-radius:2px;transform:translate(-12px,-50%);opacity:0}.g-dialog-header .g-dialog-operation-container[data-v-4f1dc418]{display:flex;flex-direction:row;align-items:center;gap:8px;padding:0}.g-dialog-control[data-v-4f1dc418]{width:12px;height:12px;padding:0;border:0;border-radius:50%;cursor:pointer;flex-shrink:0;position:relative;box-shadow:inset 0 1px 1px #ffffffb3,inset 0 -1px 1px #0000001f,0 0 0 1px #00000014,0 1px 2px #0000000f;transition:transform .18s cubic-bezier(.34,1.56,.64,1),filter .18s ease,box-shadow .18s ease}.g-dialog-control[data-v-4f1dc418]:after{content:"";position:absolute;top:2px;left:2.5px;width:4px;height:4px;border-radius:50%;background:#ffffff8c;filter:blur(.5px);pointer-events:none}.g-dialog-control[data-v-4f1dc418]:hover{filter:brightness(1.06) saturate(1.1);transform:scale(1.12);box-shadow:inset 0 1px 1px #ffffffbf,inset 0 -1px 1px #0000001f,0 0 0 1px #0000001a,0 2px 4px #0000001f}.g-dialog-control[data-v-4f1dc418]:active{transform:scale(.92);filter:brightness(.96)}.g-dialog-control[data-v-4f1dc418]:focus-visible{outline:2px solid rgba(68,68,68,.32);outline-offset:3px}.g-dialog-control--close[data-v-4f1dc418]{background:linear-gradient(180deg,#ff8077,#ff5f57)}.g-dialog-control--fullscreen[data-v-4f1dc418]{background:linear-gradient(180deg,#ffd066,#ffbd2e)}.g-dialog-control--minimize[data-v-4f1dc418]{background:linear-gradient(180deg,#4be068,#28c840)}.g-dialog-footer[data-v-4f1dc418]{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;gap:8px;padding:2px 0}.g-dialog-footer[data-v-4f1dc418] .el-button .el-icon{transition:transform .28s cubic-bezier(.34,1.56,.64,1),color .2s ease;will-change:transform}.g-dialog-footer[data-v-4f1dc418] .el-button:hover:not(.is-disabled):not(.is-loading) .el-icon{transform:scale(1.18) rotate(-8deg)}.g-dialog-footer[data-v-4f1dc418] .el-button:active:not(.is-disabled):not(.is-loading) .el-icon{transform:scale(1.06) rotate(-4deg);transition-duration:.12s}.g-dialog-footer[data-v-4f1dc418] .el-button--primary:hover:not(.is-disabled):not(.is-loading) .el-icon{transform:scale(1.18) rotate(8deg)}.g-dialog-footer[data-v-4f1dc418] .el-button--primary:active:not(.is-disabled):not(.is-loading) .el-icon{transform:scale(1.06) rotate(4deg)}@media(prefers-reduced-motion:reduce){.g-dialog-control[data-v-4f1dc418],.g-dialog-footer[data-v-4f1dc418] .el-button .el-icon{transition:none}.g-dialog-footer[data-v-4f1dc418] .el-button:hover .el-icon,.g-dialog-footer[data-v-4f1dc418] .el-button:active .el-icon{transform:none}}.el-overlay:has(.g-dialog){background:var(--g-dialog-overlay-bg, rgba(15, 23, 42, .32));backdrop-filter:blur(4px) saturate(1.05);-webkit-backdrop-filter:blur(4px) saturate(1.05);animation:g-dialog-overlay-in .22s ease both}@keyframes g-dialog-overlay-in{0%{background:#0f172a00;backdrop-filter:blur(0) saturate(1);-webkit-backdrop-filter:blur(0) saturate(1)}to{background:var(--g-dialog-overlay-bg, rgba(15, 23, 42, .32));backdrop-filter:blur(4px) saturate(1.05);-webkit-backdrop-filter:blur(4px) saturate(1.05)}}@media(prefers-reduced-motion:reduce){.el-overlay:has(.g-dialog){animation:none}}.g-dialog.el-dialog{--el-dialog-padding-primary: 18px;--el-dialog-border-radius: 14px;border-radius:14px;padding:0;overflow:hidden;background:linear-gradient(180deg,var(--g-dialog-sheen, rgba(255, 255, 255, .6)),transparent) top/100% 64px no-repeat,var(--el-bg-color);box-shadow:0 1px 0 var(--g-dialog-inner-highlight, rgba(255, 255, 255, .6)) inset,0 0 0 1px var(--el-border-color-lighter),0 24px 60px -12px var(--g-dialog-shadow-strong, rgba(15, 23, 42, .22)),0 8px 20px -8px var(--g-dialog-shadow-soft, rgba(15, 23, 42, .14))}.g-dialog.el-dialog.is-fullscreen{border-radius:0;box-shadow:none}.g-dialog.el-dialog .el-dialog__header{margin:0;padding:14px 20px;background:linear-gradient(180deg,var(--g-dialog-header-bg, rgba(248, 250, 252, .85)),transparent);position:relative}.g-dialog.el-dialog .el-dialog__body{padding:0 20px;color:var(--el-text-color-regular);font-size:13px;line-height:1.6;max-height:calc(85vh - 132px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--g-dialog-scrollbar, rgba(15, 23, 42, .18)) transparent}.g-dialog.el-dialog .el-dialog__body::-webkit-scrollbar{width:6px;height:6px}.g-dialog.el-dialog .el-dialog__body::-webkit-scrollbar-thumb{background-color:var(--g-dialog-scrollbar, rgba(15, 23, 42, .18));border-radius:3px}.g-dialog.el-dialog .el-dialog__body::-webkit-scrollbar-thumb:hover{background-color:var(--g-dialog-scrollbar-hover, rgba(15, 23, 42, .28))}.g-dialog.el-dialog .el-dialog__body::-webkit-scrollbar-track{background:transparent}.g-dialog.el-dialog .el-dialog__footer{padding:12px 20px;background:linear-gradient(0deg,var(--g-dialog-footer-bg, rgba(248, 250, 252, .7)),transparent);position:relative}html.dark .el-overlay:has(.g-dialog){--g-dialog-overlay-bg: rgba(0, 0, 0, .55)}html.dark .g-dialog.el-dialog{--g-dialog-sheen: rgba(255, 255, 255, .04);--g-dialog-inner-highlight: rgba(255, 255, 255, .06);--g-dialog-shadow-strong: rgba(0, 0, 0, .55);--g-dialog-shadow-soft: rgba(0, 0, 0, .4);--g-dialog-header-bg: rgba(255, 255, 255, .04);--g-dialog-footer-bg: rgba(255, 255, 255, .04);--g-dialog-scrollbar: rgba(255, 255, 255, .18);--g-dialog-scrollbar-hover: rgba(255, 255, 255, .28)}html.dark .g-dialog.el-dialog .g-dialog-control{box-shadow:inset 0 1px 1px #ffffff59,inset 0 -1px 1px #00000047,0 0 0 1px #ffffff14,0 1px 2px #00000073}html.dark .g-dialog.el-dialog .g-dialog-control:hover{box-shadow:inset 0 1px 1px #fff6,inset 0 -1px 1px #00000047,0 0 0 1px #ffffff1f,0 2px 6px #00000080}html.dark .g-dialog.el-dialog .g-dialog-control:focus-visible{outline-color:#ffffff73}.dialog-fade-enter-active .g-dialog.el-dialog,.dialog-fade-leave-active .g-dialog.el-dialog{transition:transform .26s cubic-bezier(.34,1.2,.64,1),opacity .22s ease}.dialog-fade-enter-from .g-dialog.el-dialog,.dialog-fade-leave-to .g-dialog.el-dialog{transform:translateY(-12px) scale(.96);opacity:0}@media(prefers-reduced-motion:reduce){.dialog-fade-enter-active .g-dialog.el-dialog,.dialog-fade-leave-active .g-dialog.el-dialog{transition:opacity .18s ease;transform:none}}
|
package/lib/GRing/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue")
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),$=require("../_plugin-vue_export-helper-BHFhmbuH.js"),B=["aria-valuenow"],b=["viewBox"],z=["stop-color"],x=["stop-color"],C=["r","stroke","stroke-width"],T=["r","stroke","stroke-width","stroke-dasharray","stroke-dashoffset","transform"],M={class:"g-ring-title"},A={class:"g-ring-count"},P={key:1,class:"g-ring-endpoint g-ring-endpoint--head",style:{"--g-ring-endpoint-angle":"0deg"},"aria-hidden":"true"},R={class:"g-ring-endpoint__inner"},G={class:"g-ring-endpoint__inner"},f=100,I=2e3,W=e.defineComponent({name:"GRing",inheritAttrs:!1,__name:"index",props:{count:{default:0},size:{default:120},strokeWidth:{default:10},gradient:{default:()=>["#3b82f6","#f97316"]},textColor:{default:"#fff"},wave:{type:Boolean,default:!1},waveSpeed:{default:3},forceAnimation:{type:Boolean,default:!1}},setup(d){const o=d,c=e.computed(()=>{const t=Number(o.count);return Number.isFinite(t)?Math.min(100,Math.max(0,t)):0}),p=e.computed(()=>typeof o.size=="number"?`${o.size}px`:o.size),n=f/2,r=e.computed(()=>o.strokeWidth),u=e.computed(()=>n-r.value/2),v=e.computed(()=>2*Math.PI*u.value),w=e.computed(()=>v.value*(1-c.value/100)),l=e.computed(()=>c.value/100*360),y=e.computed(()=>o.gradient?.[0]??"#3b82f6"),S=e.computed(()=>o.gradient?.[1]??"#f97316"),E=e.computed(()=>"rgba(255, 255, 255, 0)"),N=e.computed(()=>"rgba(255, 255, 255, 0.2)"),g=`g-ring-gradient-${e.getCurrentInstance()?.uid??0}`,h=e.useSlots(),_=e.ref(null);let a=null,s=null;const m=()=>{s&&(clearTimeout(s),s=null),a&&(a.cancel(),a=null)},k=()=>{const t=_.value;t&&(l.value<=0||(a=t.animate([{transform:"rotate(-340deg)"},{transform:`rotate(${l.value-340}deg)`}],{duration:Math.max(200,o.waveSpeed*1e3),easing:"ease",fill:"forwards"}),a.onfinish=()=>{s=setTimeout(()=>{s=null,k()},I)}))},V=()=>{m(),e.nextTick(k)};return e.watch(()=>[o.wave,l.value,o.waveSpeed],([t])=>{if(!t){m();return}V()},{immediate:!0}),e.onBeforeUnmount(m),(t,O)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["g-ring-container",{"is-force-animation":t.forceAnimation}]),style:e.normalizeStyle({width:p.value,height:p.value,"--g-ring-stroke":`${r.value}%`}),role:"progressbar","aria-valuenow":c.value,"aria-valuemin":"0","aria-valuemax":"100"},[t.wave?(e.openBlock(),e.createElementBlock("div",{key:0,class:"g-ring-sweep",style:e.normalizeStyle({"--g-ring-stroke":`${r.value}%`,"--g-ring-fill-angle":`${l.value}deg`}),"aria-hidden":"true"},[e.createElementVNode("div",{ref_key:"beamRef",ref:_,class:"g-ring-sweep__beam",style:e.normalizeStyle({"--g-ring-sweep-from":E.value,"--g-ring-sweep-to":N.value})},null,4)],4)):e.createCommentVNode("",!0),(e.openBlock(),e.createElementBlock("svg",{class:"g-ring-svg",viewBox:`0 0 ${f} ${f}`,"aria-hidden":"true"},[e.createElementVNode("defs",null,[e.createElementVNode("linearGradient",{id:g,x1:"0%",y1:"0%",x2:"100%",y2:"0%"},[e.createElementVNode("stop",{offset:"0%","stop-color":y.value},null,8,z),e.createElementVNode("stop",{offset:"100%","stop-color":S.value},null,8,x)])]),e.createElementVNode("circle",{class:"g-ring-track",cx:n,cy:n,r:u.value,fill:"none",stroke:`url(#${g})`,"stroke-width":r.value},null,8,C),e.createElementVNode("circle",{class:"g-ring-fill",cx:n,cy:n,r:u.value,fill:"none",stroke:`url(#${g})`,"stroke-width":r.value,"stroke-linecap":"butt","stroke-dasharray":v.value,"stroke-dashoffset":w.value,transform:`rotate(-90 ${n} ${n})`},null,8,T)],8,b)),e.createElementVNode("div",{class:"g-ring-content",style:e.normalizeStyle({color:t.textColor})},[e.createElementVNode("div",M,[e.renderSlot(t.$slots,"title",{},void 0,!0)]),e.createElementVNode("div",A,[e.renderSlot(t.$slots,"count",{},()=>[e.createTextVNode(e.toDisplayString(c.value)+"%",1)],!0)])],4),e.unref(h).head?(e.openBlock(),e.createElementBlock("div",P,[e.createElementVNode("div",R,[e.renderSlot(t.$slots,"head",{},void 0,!0)])])):e.createCommentVNode("",!0),e.unref(h).tail?(e.openBlock(),e.createElementBlock("div",{key:2,class:"g-ring-endpoint g-ring-endpoint--tail",style:e.normalizeStyle({"--g-ring-endpoint-angle":`${l.value}deg`}),"aria-hidden":"true"},[e.createElementVNode("div",G,[e.renderSlot(t.$slots,"tail",{},void 0,!0)])],4)):e.createCommentVNode("",!0)],14,B))}}),i=$._export_sfc(W,[["__scopeId","data-v-6e763220"]]);i.install=d=>{d.component(i.name,i)};exports.GRing=i;exports.default=i;
|
package/lib/GRing/index.mjs
CHANGED
|
@@ -1,6 +1,11 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { _ as
|
|
3
|
-
const
|
|
1
|
+
import { defineComponent as N, computed as n, getCurrentInstance as I, useSlots as P, ref as R, watch as V, onBeforeUnmount as W, createElementBlock as d, openBlock as u, normalizeStyle as c, normalizeClass as F, createCommentVNode as _, createElementVNode as t, renderSlot as f, createTextVNode as G, toDisplayString as O, unref as z, nextTick as U } from "vue";
|
|
2
|
+
import { _ as D } from "../_plugin-vue_export-helper-CHgC5LLL.mjs";
|
|
3
|
+
const j = ["aria-valuenow"], q = ["viewBox"], H = ["stop-color"], J = ["stop-color"], K = ["r", "stroke", "stroke-width"], L = ["r", "stroke", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "transform"], Q = { class: "g-ring-title" }, X = { class: "g-ring-count" }, Y = {
|
|
4
|
+
key: 1,
|
|
5
|
+
class: "g-ring-endpoint g-ring-endpoint--head",
|
|
6
|
+
style: { "--g-ring-endpoint-angle": "0deg" },
|
|
7
|
+
"aria-hidden": "true"
|
|
8
|
+
}, Z = { class: "g-ring-endpoint__inner" }, ee = { class: "g-ring-endpoint__inner" }, w = 100, te = 2e3, ne = /* @__PURE__ */ N({
|
|
4
9
|
name: "GRing",
|
|
5
10
|
inheritAttrs: !1,
|
|
6
11
|
__name: "index",
|
|
@@ -14,45 +19,83 @@ const I = ["aria-valuenow"], V = ["viewBox"], F = ["stop-color"], G = ["stop-col
|
|
|
14
19
|
waveSpeed: { default: 3 },
|
|
15
20
|
forceAnimation: { type: Boolean, default: !1 }
|
|
16
21
|
},
|
|
17
|
-
setup(
|
|
18
|
-
const
|
|
19
|
-
const
|
|
20
|
-
return Number.isFinite(
|
|
21
|
-
}),
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
22
|
+
setup(v) {
|
|
23
|
+
const o = v, g = n(() => {
|
|
24
|
+
const e = Number(o.count);
|
|
25
|
+
return Number.isFinite(e) ? Math.min(100, Math.max(0, e)) : 0;
|
|
26
|
+
}), y = n(() => typeof o.size == "number" ? `${o.size}px` : o.size), s = w / 2, r = n(() => o.strokeWidth), p = n(() => s - r.value / 2), $ = n(() => 2 * Math.PI * p.value), B = n(() => $.value * (1 - g.value / 100)), a = n(() => g.value / 100 * 360), T = n(() => o.gradient?.[0] ?? "#3b82f6"), A = n(() => o.gradient?.[1] ?? "#f97316"), C = n(() => "rgba(255, 255, 255, 0)"), E = n(() => "rgba(255, 255, 255, 0.2)"), m = `g-ring-gradient-${I()?.uid ?? 0}`, S = P(), b = R(null);
|
|
27
|
+
let i = null, l = null;
|
|
28
|
+
const h = () => {
|
|
29
|
+
l && (clearTimeout(l), l = null), i && (i.cancel(), i = null);
|
|
30
|
+
}, x = () => {
|
|
31
|
+
const e = b.value;
|
|
32
|
+
e && (a.value <= 0 || (i = e.animate(
|
|
33
|
+
[
|
|
34
|
+
{ transform: "rotate(-340deg)" },
|
|
35
|
+
{ transform: `rotate(${a.value - 340}deg)` }
|
|
36
|
+
],
|
|
37
|
+
{
|
|
38
|
+
duration: Math.max(200, o.waveSpeed * 1e3),
|
|
39
|
+
easing: "ease",
|
|
40
|
+
fill: "forwards"
|
|
41
|
+
}
|
|
42
|
+
), i.onfinish = () => {
|
|
43
|
+
l = setTimeout(() => {
|
|
44
|
+
l = null, x();
|
|
45
|
+
}, te);
|
|
46
|
+
}));
|
|
47
|
+
}, M = () => {
|
|
48
|
+
h(), U(x);
|
|
49
|
+
};
|
|
50
|
+
return V(
|
|
51
|
+
() => [o.wave, a.value, o.waveSpeed],
|
|
52
|
+
([e]) => {
|
|
53
|
+
if (!e) {
|
|
54
|
+
h();
|
|
55
|
+
return;
|
|
56
|
+
}
|
|
57
|
+
M();
|
|
58
|
+
},
|
|
59
|
+
{ immediate: !0 }
|
|
60
|
+
), W(h), (e, se) => (u(), d("div", {
|
|
61
|
+
class: F(["g-ring-container", { "is-force-animation": e.forceAnimation }]),
|
|
62
|
+
style: c({
|
|
63
|
+
width: y.value,
|
|
64
|
+
height: y.value,
|
|
65
|
+
"--g-ring-stroke": `${r.value}%`
|
|
66
|
+
}),
|
|
25
67
|
role: "progressbar",
|
|
26
|
-
"aria-valuenow":
|
|
68
|
+
"aria-valuenow": g.value,
|
|
27
69
|
"aria-valuemin": "0",
|
|
28
70
|
"aria-valuemax": "100"
|
|
29
71
|
}, [
|
|
30
|
-
|
|
72
|
+
e.wave ? (u(), d("div", {
|
|
31
73
|
key: 0,
|
|
32
74
|
class: "g-ring-sweep",
|
|
33
|
-
style:
|
|
34
|
-
"--g-ring-stroke": `${
|
|
35
|
-
"--g-ring-fill-angle": `${
|
|
75
|
+
style: c({
|
|
76
|
+
"--g-ring-stroke": `${r.value}%`,
|
|
77
|
+
"--g-ring-fill-angle": `${a.value}deg`
|
|
36
78
|
}),
|
|
37
79
|
"aria-hidden": "true"
|
|
38
80
|
}, [
|
|
39
81
|
t("div", {
|
|
82
|
+
ref_key: "beamRef",
|
|
83
|
+
ref: b,
|
|
40
84
|
class: "g-ring-sweep__beam",
|
|
41
|
-
style:
|
|
42
|
-
|
|
43
|
-
"--g-ring-sweep-
|
|
44
|
-
"--g-ring-sweep-to": b.value
|
|
85
|
+
style: c({
|
|
86
|
+
"--g-ring-sweep-from": C.value,
|
|
87
|
+
"--g-ring-sweep-to": E.value
|
|
45
88
|
})
|
|
46
89
|
}, null, 4)
|
|
47
|
-
], 4)) :
|
|
48
|
-
(
|
|
90
|
+
], 4)) : _("", !0),
|
|
91
|
+
(u(), d("svg", {
|
|
49
92
|
class: "g-ring-svg",
|
|
50
|
-
viewBox: `0 0 ${
|
|
93
|
+
viewBox: `0 0 ${w} ${w}`,
|
|
51
94
|
"aria-hidden": "true"
|
|
52
95
|
}, [
|
|
53
96
|
t("defs", null, [
|
|
54
97
|
t("linearGradient", {
|
|
55
|
-
id:
|
|
98
|
+
id: m,
|
|
56
99
|
x1: "0%",
|
|
57
100
|
y1: "0%",
|
|
58
101
|
x2: "100%",
|
|
@@ -60,57 +103,72 @@ const I = ["aria-valuenow"], V = ["viewBox"], F = ["stop-color"], G = ["stop-col
|
|
|
60
103
|
}, [
|
|
61
104
|
t("stop", {
|
|
62
105
|
offset: "0%",
|
|
63
|
-
"stop-color":
|
|
64
|
-
}, null, 8,
|
|
106
|
+
"stop-color": T.value
|
|
107
|
+
}, null, 8, H),
|
|
65
108
|
t("stop", {
|
|
66
109
|
offset: "100%",
|
|
67
|
-
"stop-color":
|
|
68
|
-
}, null, 8,
|
|
110
|
+
"stop-color": A.value
|
|
111
|
+
}, null, 8, J)
|
|
69
112
|
])
|
|
70
113
|
]),
|
|
71
114
|
t("circle", {
|
|
72
115
|
class: "g-ring-track",
|
|
73
|
-
cx:
|
|
74
|
-
cy:
|
|
75
|
-
r:
|
|
116
|
+
cx: s,
|
|
117
|
+
cy: s,
|
|
118
|
+
r: p.value,
|
|
76
119
|
fill: "none",
|
|
77
|
-
stroke: `url(#${
|
|
78
|
-
"stroke-width":
|
|
79
|
-
}, null, 8,
|
|
120
|
+
stroke: `url(#${m})`,
|
|
121
|
+
"stroke-width": r.value
|
|
122
|
+
}, null, 8, K),
|
|
80
123
|
t("circle", {
|
|
81
124
|
class: "g-ring-fill",
|
|
82
|
-
cx:
|
|
83
|
-
cy:
|
|
84
|
-
r:
|
|
125
|
+
cx: s,
|
|
126
|
+
cy: s,
|
|
127
|
+
r: p.value,
|
|
85
128
|
fill: "none",
|
|
86
|
-
stroke: `url(#${
|
|
87
|
-
"stroke-width":
|
|
129
|
+
stroke: `url(#${m})`,
|
|
130
|
+
"stroke-width": r.value,
|
|
88
131
|
"stroke-linecap": "butt",
|
|
89
|
-
"stroke-dasharray":
|
|
90
|
-
"stroke-dashoffset":
|
|
91
|
-
transform: `rotate(-90 ${
|
|
92
|
-
}, null, 8,
|
|
93
|
-
], 8,
|
|
132
|
+
"stroke-dasharray": $.value,
|
|
133
|
+
"stroke-dashoffset": B.value,
|
|
134
|
+
transform: `rotate(-90 ${s} ${s})`
|
|
135
|
+
}, null, 8, L)
|
|
136
|
+
], 8, q)),
|
|
94
137
|
t("div", {
|
|
95
138
|
class: "g-ring-content",
|
|
96
|
-
style:
|
|
139
|
+
style: c({ color: e.textColor })
|
|
97
140
|
}, [
|
|
98
|
-
t("div",
|
|
99
|
-
|
|
141
|
+
t("div", Q, [
|
|
142
|
+
f(e.$slots, "title", {}, void 0, !0)
|
|
100
143
|
]),
|
|
101
|
-
t("div",
|
|
102
|
-
|
|
103
|
-
|
|
144
|
+
t("div", X, [
|
|
145
|
+
f(e.$slots, "count", {}, () => [
|
|
146
|
+
G(O(g.value) + "%", 1)
|
|
104
147
|
], !0)
|
|
105
148
|
])
|
|
106
|
-
], 4)
|
|
107
|
-
|
|
149
|
+
], 4),
|
|
150
|
+
z(S).head ? (u(), d("div", Y, [
|
|
151
|
+
t("div", Z, [
|
|
152
|
+
f(e.$slots, "head", {}, void 0, !0)
|
|
153
|
+
])
|
|
154
|
+
])) : _("", !0),
|
|
155
|
+
z(S).tail ? (u(), d("div", {
|
|
156
|
+
key: 2,
|
|
157
|
+
class: "g-ring-endpoint g-ring-endpoint--tail",
|
|
158
|
+
style: c({ "--g-ring-endpoint-angle": `${a.value}deg` }),
|
|
159
|
+
"aria-hidden": "true"
|
|
160
|
+
}, [
|
|
161
|
+
t("div", ee, [
|
|
162
|
+
f(e.$slots, "tail", {}, void 0, !0)
|
|
163
|
+
])
|
|
164
|
+
], 4)) : _("", !0)
|
|
165
|
+
], 14, j));
|
|
108
166
|
}
|
|
109
|
-
}),
|
|
110
|
-
|
|
111
|
-
|
|
167
|
+
}), k = /* @__PURE__ */ D(ne, [["__scopeId", "data-v-6e763220"]]);
|
|
168
|
+
k.install = (v) => {
|
|
169
|
+
v.component(k.name, k);
|
|
112
170
|
};
|
|
113
171
|
export {
|
|
114
|
-
|
|
115
|
-
|
|
172
|
+
k as GRing,
|
|
173
|
+
k as default
|
|
116
174
|
};
|
package/lib/GRing/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.g-ring-container[data-v-
|
|
1
|
+
.g-ring-container[data-v-6e763220]{position:relative;display:inline-flex;align-items:center;justify-content:center;font-size:14px;line-height:1.4;isolation:isolate}.g-ring-container .g-ring-svg[data-v-6e763220]{width:100%;height:100%;display:block}.g-ring-container .g-ring-svg .g-ring-track[data-v-6e763220]{opacity:.15}.g-ring-container .g-ring-svg .g-ring-fill[data-v-6e763220]{transition:stroke-dashoffset .5s ease;filter:drop-shadow(0 0 6px rgba(59,130,246,.4))}.g-ring-container .g-ring-sweep[data-v-6e763220]{position:absolute;inset:0;border-radius:50%;pointer-events:none;overflow:hidden;mask:radial-gradient(circle closest-side,transparent calc(100% - 2 * var(--g-ring-stroke, 10%) - 1%),#000 calc(100% - 2 * var(--g-ring-stroke, 10%)),#000 100%),conic-gradient(from 0deg,#000 0deg,#000 var(--g-ring-fill-angle, 0deg),transparent var(--g-ring-fill-angle, 0deg),transparent 360deg);mask-composite:intersect;-webkit-mask:radial-gradient(circle closest-side,transparent calc(100% - 2 * var(--g-ring-stroke, 10%) - 1%),#000 calc(100% - 2 * var(--g-ring-stroke, 10%)),#000 100%),conic-gradient(from 0deg,#000 0deg,#000 var(--g-ring-fill-angle, 0deg),transparent var(--g-ring-fill-angle, 0deg),transparent 360deg);-webkit-mask-composite:source-in;mix-blend-mode:screen;transition:--g-ring-fill-angle .5s ease}.g-ring-container .g-ring-sweep .g-ring-sweep__beam[data-v-6e763220]{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,var(--g-ring-sweep-from) 0deg,var(--g-ring-sweep-from) 200deg,var(--g-ring-sweep-to) 340deg,var(--g-ring-sweep-from) 360deg);will-change:transform;filter:blur(.5px)}.g-ring-container .g-ring-content[data-v-6e763220]{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 12%;pointer-events:none;font-variant-numeric:tabular-nums}.g-ring-container .g-ring-content .g-ring-title[data-v-6e763220]{font-size:inherit;line-height:1.2;opacity:.9}.g-ring-container .g-ring-content .g-ring-title[data-v-6e763220]:empty{display:none}.g-ring-container .g-ring-content .g-ring-count[data-v-6e763220]{font-size:1.4em;font-weight:600;line-height:1.2;margin-top:2px}.g-ring-container .g-ring-endpoint[data-v-6e763220]{position:absolute;inset:0;pointer-events:none;transform:rotate(var(--g-ring-endpoint-angle, 0deg));transition:transform .5s ease;z-index:1}.g-ring-container .g-ring-endpoint .g-ring-endpoint__inner[data-v-6e763220]{position:absolute;top:calc(var(--g-ring-stroke, 10%) / 2);left:50%;transform:translate(-50%,-50%) rotate(calc(-1 * var(--g-ring-endpoint-angle, 0deg)));transition:transform .5s ease;display:inline-flex;align-items:center;justify-content:center;line-height:0}.g-ring-container .g-ring-endpoint .g-ring-endpoint__inner[data-v-6e763220]>img,.g-ring-container .g-ring-endpoint .g-ring-endpoint__inner[data-v-6e763220]>svg{display:block;width:var(--g-ring-stroke, 10%);height:var(--g-ring-stroke, 10%);object-fit:contain}@media(prefers-reduced-motion:reduce){.g-ring-container:not(.is-force-animation) .g-ring-sweep__beam[data-v-6e763220]{opacity:.6}.g-ring-container:not(.is-force-animation) .g-ring-fill[data-v-6e763220]{transition:none}}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { InjectionKey } from 'vue';
|
|
1
|
+
import { Component, InjectionKey } from 'vue';
|
|
2
2
|
import { DialogManager } from './useDialogManager';
|
|
3
3
|
/**
|
|
4
4
|
* 弹窗管理器注入键
|
|
@@ -12,6 +12,36 @@ export declare const DIALOG_SIZES: {
|
|
|
12
12
|
readonly medium: "480px";
|
|
13
13
|
readonly large: "580px";
|
|
14
14
|
};
|
|
15
|
+
/**
|
|
16
|
+
* 关闭来源(用于 beforeClose 钩子)
|
|
17
|
+
* - cancel:底部取消按钮
|
|
18
|
+
* - close:标题栏关闭按钮 / ESC / 蒙层
|
|
19
|
+
* - minimize:标题栏最小化按钮
|
|
20
|
+
* - save:底部保存按钮
|
|
21
|
+
* - action:自定义底部操作(actions 配置项)
|
|
22
|
+
*/
|
|
23
|
+
export type DialogCloseAction = 'cancel' | 'close' | 'minimize' | 'save' | 'action';
|
|
24
|
+
/**
|
|
25
|
+
* 自定义底部操作按钮
|
|
26
|
+
*/
|
|
27
|
+
export interface FooterAction {
|
|
28
|
+
/** 唯一标识,作为 emit('action', key) 的载荷 */
|
|
29
|
+
key: string;
|
|
30
|
+
/** 按钮文案 */
|
|
31
|
+
label: string;
|
|
32
|
+
/** Element Plus 按钮类型 */
|
|
33
|
+
type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'default' | 'text';
|
|
34
|
+
/** 按钮图标组件 */
|
|
35
|
+
icon?: Component;
|
|
36
|
+
/** loading 态 */
|
|
37
|
+
loading?: boolean;
|
|
38
|
+
/** 禁用态 */
|
|
39
|
+
disabled?: boolean;
|
|
40
|
+
/** 是否朴素按钮 */
|
|
41
|
+
plain?: boolean;
|
|
42
|
+
/** 点击回调(与 emit('action', key) 同时触发,回调返回 Promise 时按钮自动 loading) */
|
|
43
|
+
onClick?: () => void | Promise<void>;
|
|
44
|
+
}
|
|
15
45
|
/**
|
|
16
46
|
* 最小化图标布局常量
|
|
17
47
|
*/
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { DialogCloseAction, FooterAction } from './const';
|
|
1
2
|
interface Props {
|
|
2
3
|
/**
|
|
3
4
|
* @description 标题名
|
|
@@ -8,7 +9,7 @@ interface Props {
|
|
|
8
9
|
/**
|
|
9
10
|
* @description 对话框尺寸
|
|
10
11
|
* @version 0.1.6
|
|
11
|
-
* @default ''
|
|
12
|
+
* @default 'medium'
|
|
12
13
|
*/
|
|
13
14
|
size?: 'small' | 'medium' | 'large' | string;
|
|
14
15
|
/**
|
|
@@ -17,11 +18,93 @@ interface Props {
|
|
|
17
18
|
* @default false
|
|
18
19
|
*/
|
|
19
20
|
modelValue?: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* @description 是否隐藏底部操作区(包含取消/重置/保存与自定义 actions)
|
|
23
|
+
* @version 0.2.18
|
|
24
|
+
* @default false
|
|
25
|
+
*/
|
|
26
|
+
hideFooter?: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* @description 自定义底部操作按钮组。配置后会替换默认的 取消/重置/保存
|
|
29
|
+
* @version 0.2.18
|
|
30
|
+
* @default undefined
|
|
31
|
+
*/
|
|
32
|
+
actions?: FooterAction[];
|
|
33
|
+
/**
|
|
34
|
+
* @description 是否显示默认「取消」按钮(actions 模式下无效)
|
|
35
|
+
* @version 0.2.18
|
|
36
|
+
* @default true
|
|
37
|
+
*/
|
|
38
|
+
showCancel?: boolean;
|
|
39
|
+
/**
|
|
40
|
+
* @description 是否显示默认「重置」按钮(actions 模式下无效)
|
|
41
|
+
* @version 0.2.18
|
|
42
|
+
* @default true
|
|
43
|
+
*/
|
|
44
|
+
showReset?: boolean;
|
|
45
|
+
/**
|
|
46
|
+
* @description 是否显示默认「保存」按钮(actions 模式下无效)
|
|
47
|
+
* @version 0.2.18
|
|
48
|
+
* @default true
|
|
49
|
+
*/
|
|
50
|
+
showSave?: boolean;
|
|
51
|
+
/**
|
|
52
|
+
* @description 默认「取消」按钮文案
|
|
53
|
+
* @version 0.2.18
|
|
54
|
+
* @default '取消'
|
|
55
|
+
*/
|
|
56
|
+
cancelText?: string;
|
|
57
|
+
/**
|
|
58
|
+
* @description 默认「重置」按钮文案
|
|
59
|
+
* @version 0.2.18
|
|
60
|
+
* @default '重置'
|
|
61
|
+
*/
|
|
62
|
+
resetText?: string;
|
|
63
|
+
/**
|
|
64
|
+
* @description 默认「保存」按钮文案
|
|
65
|
+
* @version 0.2.18
|
|
66
|
+
* @default '保存'
|
|
67
|
+
*/
|
|
68
|
+
saveText?: string;
|
|
69
|
+
/**
|
|
70
|
+
* @description 保存按钮 loading 态(异步保存时使用)
|
|
71
|
+
* @version 0.2.18
|
|
72
|
+
* @default false
|
|
73
|
+
*/
|
|
74
|
+
saveLoading?: boolean;
|
|
75
|
+
/**
|
|
76
|
+
* @description 保存按钮禁用态
|
|
77
|
+
* @version 0.2.18
|
|
78
|
+
* @default false
|
|
79
|
+
*/
|
|
80
|
+
saveDisabled?: boolean;
|
|
81
|
+
/**
|
|
82
|
+
* @description 关闭前钩子。返回 false 或 Promise<false> 时取消关闭。
|
|
83
|
+
* 触发时机:点击关闭/最小化/ESC/蒙层/取消/保存
|
|
84
|
+
* @version 0.2.18
|
|
85
|
+
* @default undefined
|
|
86
|
+
*/
|
|
87
|
+
beforeClose?: (action: DialogCloseAction) => boolean | Promise<boolean>;
|
|
20
88
|
}
|
|
89
|
+
/** 标题栏关闭按钮 / 作用域插槽 close 调用入口 */
|
|
90
|
+
declare function handleClose(): Promise<void>;
|
|
91
|
+
/** 取消按钮 */
|
|
92
|
+
declare function handleCancel(): Promise<void>;
|
|
93
|
+
/** 重置按钮(不触发关闭,无需 beforeClose) */
|
|
94
|
+
declare function handleReset(): void;
|
|
95
|
+
/** 保存按钮 */
|
|
96
|
+
declare function handleSave(): Promise<void>;
|
|
21
97
|
declare function __VLS_template(): {
|
|
22
98
|
attrs: Partial<{}>;
|
|
23
99
|
slots: {
|
|
24
100
|
default?(_: {}): any;
|
|
101
|
+
footer?(_: {
|
|
102
|
+
cancel: typeof handleCancel;
|
|
103
|
+
reset: typeof handleReset;
|
|
104
|
+
save: typeof handleSave;
|
|
105
|
+
close: typeof handleClose;
|
|
106
|
+
loading: boolean;
|
|
107
|
+
}): any;
|
|
25
108
|
moreOperations?(_: {}): any;
|
|
26
109
|
};
|
|
27
110
|
refs: {};
|
|
@@ -31,18 +114,29 @@ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
|
31
114
|
declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
32
115
|
reset: () => any;
|
|
33
116
|
cancel: () => any;
|
|
34
|
-
save: () => any;
|
|
35
117
|
minimize: (data: any) => any;
|
|
118
|
+
save: () => any;
|
|
119
|
+
action: (key: string) => any;
|
|
36
120
|
"update:modelValue": (value: boolean) => any;
|
|
37
121
|
}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
|
|
38
122
|
onReset?: (() => any) | undefined;
|
|
39
123
|
onCancel?: (() => any) | undefined;
|
|
40
|
-
onSave?: (() => any) | undefined;
|
|
41
124
|
onMinimize?: ((data: any) => any) | undefined;
|
|
125
|
+
onSave?: (() => any) | undefined;
|
|
126
|
+
onAction?: ((key: string) => any) | undefined;
|
|
42
127
|
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
|
|
43
128
|
}>, {
|
|
44
129
|
title: string;
|
|
45
130
|
size: "small" | "medium" | "large" | string;
|
|
131
|
+
hideFooter: boolean;
|
|
132
|
+
showCancel: boolean;
|
|
133
|
+
showReset: boolean;
|
|
134
|
+
showSave: boolean;
|
|
135
|
+
cancelText: string;
|
|
136
|
+
resetText: string;
|
|
137
|
+
saveText: string;
|
|
138
|
+
saveLoading: boolean;
|
|
139
|
+
saveDisabled: boolean;
|
|
46
140
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
47
141
|
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
48
142
|
export default _default;
|
|
@@ -54,8 +54,12 @@ declare function __VLS_template(): {
|
|
|
54
54
|
slots: {
|
|
55
55
|
title?(_: {}): any;
|
|
56
56
|
count?(_: {}): any;
|
|
57
|
+
head?(_: {}): any;
|
|
58
|
+
tail?(_: {}): any;
|
|
59
|
+
};
|
|
60
|
+
refs: {
|
|
61
|
+
beamRef: HTMLDivElement;
|
|
57
62
|
};
|
|
58
|
-
refs: {};
|
|
59
63
|
rootEl: any;
|
|
60
64
|
};
|
|
61
65
|
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
@@ -68,7 +72,9 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
|
|
|
68
72
|
waveSpeed: number;
|
|
69
73
|
forceAnimation: boolean;
|
|
70
74
|
strokeWidth: number;
|
|
71
|
-
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
|
|
75
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
|
|
76
|
+
beamRef: HTMLDivElement;
|
|
77
|
+
}, any>;
|
|
72
78
|
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
73
79
|
export default _default;
|
|
74
80
|
type __VLS_WithTemplateSlots<T, S> = T & {
|