@gzmjs/ui-basic 0.1.0 → 0.2.0

package/dist/ui-basic.es.js

@@ -1011,6 +1011,105 @@ window.addEventListener("storage", (event) => {
     document.documentElement.setAttribute(htmlThemeAttr, event.newValue);
   }
 });
+var __create$3 = Object.create;
+var __defProp$3 = Object.defineProperty;
+var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
+var __knownSymbol$3 = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
+var __typeError$3 = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __name$3 = (target, value) => __defProp$3(target, "name", { value, configurable: true });
+var __decoratorStart$3 = (base) => [, , , __create$3(base?.[__knownSymbol$3("metadata")] ?? null)];
+var __decoratorStrings$3 = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn$3 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$3("Function expected") : fn;
+var __decoratorContext$3 = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$3[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$3("Already initialized") : fns.push(__expectFn$3(fn || null)) });
+var __decoratorMetadata$3 = (array, target) => __defNormalProp$3(target, __knownSymbol$3("metadata"), array[3]);
+var __runInitializers$3 = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
+  return value;
+};
+var __decorateElement$3 = (array, flags, name, decorators, target, extra) => {
+  var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
+  var j = k > 3 ? array.length + 1 : k ? s ? 1 : 2 : 0, key = __decoratorStrings$3[k + 5];
+  var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
+  var desc = k && (!p && !s && (target = target.prototype), k < 5 && (k > 3 || !p) && __getOwnPropDesc$3(k < 4 ? target : { get [name]() {
+    return __privateGet$3(this, extra);
+  }, set [name](x) {
+    return __privateSet$3(this, extra, x);
+  } }, name));
+  k ? p && k < 4 && __name$3(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name$3(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext$3(k, name, done = {}, array[3], extraInitializers);
+    if (k) {
+      ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn$3(target, x) : (x) => name in x };
+      if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet$3 : __privateMethod$3)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
+      if (k > 2) access.set = p ? (x, y) => __privateSet$3(x, target, y, k ^ 4 ? extra : desc.set) : (x, y) => x[name] = y;
+    }
+    it = (0, decorators[i])(k ? k < 4 ? p ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
+    if (k ^ 4 || it === void 0) __expectFn$3(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
+    else if (typeof it !== "object" || it === null) __typeError$3("Object expected");
+    else __expectFn$3(fn = it.get) && (desc.get = fn), __expectFn$3(fn = it.set) && (desc.set = fn), __expectFn$3(fn = it.init) && initializers.unshift(fn);
+  }
+  return k || __decoratorMetadata$3(array, target), desc && __defProp$3(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var __accessCheck$3 = (obj, member, msg) => member.has(obj) || __typeError$3("Cannot " + msg);
+var __privateIn$3 = (member, obj) => Object(obj) !== obj ? __typeError$3('Cannot use the "in" operator on this value') : member.has(obj);
+var __privateGet$3 = (obj, member, getter) => (__accessCheck$3(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$3 = (obj, member, value) => member.has(obj) ? __typeError$3("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$3 = (obj, member, value, setter) => (__accessCheck$3(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod$3 = (obj, member, method) => (__accessCheck$3(obj, member, "access private method"), method);
+var _corner_dec$1, _badge_dec, _a$3, _Badge_decorators, _init$3, _badge, _corner$1;
+const tagName$3 = "GZM-BADGE";
+const styleSheet$2 = createStyleSheet({
+  ":host": `
+        height: 1rem;
+        border-radius: 50%;
+        padding: 0 0.25rem !important;
+
+        color: var(--gzm-badge-txt-color);
+        background: var(--gzm-badge-background);
+
+        line-height: 1rem;
+
+        font-family: PingFang SC, Microsoft YaHei, Hiragino Sans GB, Heiti SC, sans-serif;
+        font-size: 0.75rem;
+        font-weight: bolder;
+    `
+});
+const cornerStyleSheet$1 = createStyleSheet({
+  ":host": `
+        transform: translate(33%, -33%);
+        position: absolute;
+        top: 0px;
+        right: 0px;
+        z-index: 1;
+    `
+});
+const mutableAttributes$3 = ["badge", "corner"];
+_Badge_decorators = [defineElement({ tagName: tagName$3, mutableAttributes: mutableAttributes$3 })];
+class Badge extends (_a$3 = HTMLElement, _badge_dec = [strAttr], _corner_dec$1 = [boolAttr], _a$3) {
+  constructor() {
+    super();
+    __privateAdd$3(this, _badge, __runInitializers$3(_init$3, 8, this)), __runInitializers$3(_init$3, 11, this);
+    __privateAdd$3(this, _corner$1, __runInitializers$3(_init$3, 12, this)), __runInitializers$3(_init$3, 15, this);
+    const sr = this.attachShadow({ mode: "open" });
+    sr.adoptedStyleSheets = [baseStyle, styleSheet$2];
+  }
+  _badge_set(badge) {
+    this.shadowRoot.innerHTML = badge ?? "";
+  }
+  _corner_set() {
+    this.shadowRoot.adoptedStyleSheets = this.corner ? [baseStyle, styleSheet$2, cornerStyleSheet$1] : [baseStyle, styleSheet$2];
+  }
+}
+_init$3 = __decoratorStart$3(_a$3);
+_badge = /* @__PURE__ */ new WeakMap();
+_corner$1 = /* @__PURE__ */ new WeakMap();
+__decorateElement$3(_init$3, 4, "badge", _badge_dec, Badge, _badge);
+__decorateElement$3(_init$3, 4, "corner", _corner_dec$1, Badge, _corner$1);
+Badge = __decorateElement$3(_init$3, 0, "Badge", _Badge_decorators, Badge);
+__runInitializers$3(_init$3, 1, Badge);
 var __create$2 = Object.create;
 var __defProp$2 = Object.defineProperty;
 var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
@@ -1059,57 +1158,56 @@ var __privateGet$2 = (obj, member, getter) => (__accessCheck$2(obj, member, "rea
 var __privateAdd$2 = (obj, member, value) => member.has(obj) ? __typeError$2("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet$2 = (obj, member, value, setter) => (__accessCheck$2(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod$2 = (obj, member, method) => (__accessCheck$2(obj, member, "access private method"), method);
-var _corner_dec$1, _badge_dec, _a$2, _Badge_decorators, _init$2, _badge, _corner$1;
-const tagName$2 = "GZM-BADGE";
+var _corner_dec, _a$2, _CloseBtn_decorators, _init$2, _corner;
+const tagName$2 = "GZM-CLOSE-BTN";
 const styleSheet$1 = createStyleSheet({
   ":host": `
-        height: 1rem;
-        border-radius: 50%;
-        padding: 0 0.25rem !important;
-
-        color: var(--gzm-badge-txt-color);
-        background: var(--gzm-badge-background);
-
-        line-height: 1rem;
-
-        font-family: PingFang SC, Microsoft YaHei, Hiragino Sans GB, Heiti SC, sans-serif;
+        font-family: ui-sans-serif, system-ui, sans-serif;
         font-size: 0.75rem;
-        font-weight: bolder;
-    `
+        font-weight: bold;
+        line-height: 1rem;
+        display: inline-block;
+    `,
+  div: `
+        border-radius: 9999px;
+        padding-inline: 0.25rem;
+        padding-block: 0px;
+    `,
+  [`div:hover`]: {
+    color: "var(--gzm-badge-txt-color)",
+    background: "var(--gzm-badge-background)",
+    cursor: "pointer"
+  }
 });
-const cornerStyleSheet$1 = createStyleSheet({
+const cornerStyleSheet = createStyleSheet({
   ":host": `
-        transform: translate(33%, -33%);
         position: absolute;
-        top: 0px;
         right: 0px;
-        z-index: 1;
+        top: 0px;
     `
 });
-const mutableAttributes$2 = ["badge", "corner"];
-_Badge_decorators = [defineElement({ tagName: tagName$2, mutableAttributes: mutableAttributes$2 })];
-class Badge extends (_a$2 = HTMLElement, _badge_dec = [strAttr], _corner_dec$1 = [boolAttr], _a$2) {
+const mutableAttributes$2 = ["corner"];
+_CloseBtn_decorators = [defineElement({ tagName: tagName$2, mutableAttributes: mutableAttributes$2 })];
+class CloseBtn extends (_a$2 = HTMLElement, _corner_dec = [boolAttr], _a$2) {
   constructor() {
     super();
-    __privateAdd$2(this, _badge, __runInitializers$2(_init$2, 8, this)), __runInitializers$2(_init$2, 11, this);
-    __privateAdd$2(this, _corner$1, __runInitializers$2(_init$2, 12, this)), __runInitializers$2(_init$2, 15, this);
-    const sr = this.attachShadow({ mode: "open" });
-    sr.adoptedStyleSheets = [baseStyle, styleSheet$1];
-  }
-  _badge_set(badge) {
-    this.shadowRoot.innerHTML = badge ?? "";
+    __privateAdd$2(this, _corner, __runInitializers$2(_init$2, 8, this)), __runInitializers$2(_init$2, 11, this);
+    const root = this.attachShadow({ mode: "open" });
+    root.adoptedStyleSheets = [baseStyle, styleSheet$1];
+    root.innerHTML = "<div>╳</div>";
   }
+  // #region 属性
   _corner_set() {
-    this.shadowRoot.adoptedStyleSheets = this.corner ? [baseStyle, styleSheet$1, cornerStyleSheet$1] : [baseStyle, styleSheet$1];
+    this.shadowRoot.adoptedStyleSheets = this.corner ? [baseStyle, styleSheet$1, cornerStyleSheet] : [baseStyle, styleSheet$1];
   }
+  // #endregion
 }
 _init$2 = __decoratorStart$2(_a$2);
-_badge = /* @__PURE__ */ new WeakMap();
-_corner$1 = /* @__PURE__ */ new WeakMap();
-__decorateElement$2(_init$2, 4, "badge", _badge_dec, Badge, _badge);
-__decorateElement$2(_init$2, 4, "corner", _corner_dec$1, Badge, _corner$1);
-Badge = __decorateElement$2(_init$2, 0, "Badge", _Badge_decorators, Badge);
-__runInitializers$2(_init$2, 1, Badge);
+_corner = /* @__PURE__ */ new WeakMap();
+__decorateElement$2(_init$2, 4, "corner", _corner_dec, CloseBtn, _corner);
+CloseBtn = __decorateElement$2(_init$2, 0, "CloseBtn", _CloseBtn_decorators, CloseBtn);
+__runInitializers$2(_init$2, 1, CloseBtn);
+const iconCache = {};
 var __create$1 = Object.create;
 var __defProp$1 = Object.defineProperty;
 var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
@@ -1158,56 +1256,80 @@ var __privateGet$1 = (obj, member, getter) => (__accessCheck$1(obj, member, "rea
 var __privateAdd$1 = (obj, member, value) => member.has(obj) ? __typeError$1("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet$1 = (obj, member, value, setter) => (__accessCheck$1(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod$1 = (obj, member, method) => (__accessCheck$1(obj, member, "access private method"), method);
-var _corner_dec, _a$1, _CloseBtn_decorators, _init$1, _corner;
-const tagName$1 = "GZM-CLOSE-BTN";
-const styleSheet = createStyleSheet({
+var _icon_dec, _a$1, _Icon_decorators, _Icon_instances, showStr_fn, showCache_fn, showUnicode_fn, _init$1, _icon;
+const style = createStyleSheet({
+  //防止网页中没有定义这些字体。如'⚙'在没有 Emoji 字体加持的情况下，显示非常难看。
+  //默认不要 inline-block，选中一行包含 icon 的文字时，可以看出明显区别。
   ":host": `
-        font-family: ui-sans-serif, system-ui, sans-serif;
-        font-size: 0.75rem;
-        font-weight: bold;
-        line-height: 1rem;
-        display: inline-block;
-    `,
-  div: `
-        border-radius: 9999px;
-        padding-inline: 0.25rem;
-        padding-block: 0px;
+        /*display: inline-block;*/
+        font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     `,
-  [`div:hover`]: {
-    color: "var(--gzm-badge-txt-color)",
-    background: "var(--gzm-badge-background)",
-    cursor: "pointer"
-  }
-});
-const cornerStyleSheet = createStyleSheet({
-  ":host": `
-        position: absolute;
-        right: 0px;
-        top: 0px;
+  //height - 相对于父元素的字体高度，这是关键！
+  "img, svg": `
+        width: 1em;
+        height: 1em;
+        vertical-align: middle;
+        color: inherit;
     `
 });
-const mutableAttributes$1 = ["corner"];
-_CloseBtn_decorators = [defineElement({ tagName: tagName$1, mutableAttributes: mutableAttributes$1 })];
-class CloseBtn extends (_a$1 = HTMLElement, _corner_dec = [boolAttr], _a$1) {
+const tagName$1 = "GZM-ICON";
+const mutableAttributes$1 = ["icon"];
+_Icon_decorators = [defineElement({ tagName: tagName$1, mutableAttributes: mutableAttributes$1 })];
+class Icon extends (_a$1 = HTMLElement, _icon_dec = [strAttr], _a$1) {
   constructor() {
     super();
-    __privateAdd$1(this, _corner, __runInitializers$1(_init$1, 8, this)), __runInitializers$1(_init$1, 11, this);
-    const root = this.attachShadow({ mode: "open" });
-    root.adoptedStyleSheets = [baseStyle, styleSheet];
-    root.innerHTML = "<div>╳</div>";
+    __privateAdd$1(this, _Icon_instances);
+    __privateAdd$1(this, _icon, __runInitializers$1(_init$1, 8, this)), __runInitializers$1(_init$1, 11, this);
+    const sr = this.attachShadow({ mode: "open" });
+    sr.adoptedStyleSheets = [baseStyle, style];
+  }
+  setImg(icon) {
+    if (icon.startsWith("data:image/") || icon.includes(".") && icon.includes("/")) {
+      this.shadowRoot.innerHTML = `<img src="${icon}" alt="icon">`;
+      return true;
+    }
+    return false;
+  }
+  setSvg(icon) {
+    if (icon.startsWith("<svg ")) {
+      this.shadowRoot.innerHTML = icon;
+      return true;
+    }
+    return false;
   }
   // #region 属性
-  _corner_set() {
-    this.shadowRoot.adoptedStyleSheets = this.corner ? [baseStyle, styleSheet, cornerStyleSheet] : [baseStyle, styleSheet];
+  _icon_set(icon) {
+    if (icon) {
+      void (__privateMethod$1(this, _Icon_instances, showStr_fn).call(this, icon) || __privateMethod$1(this, _Icon_instances, showCache_fn).call(this, icon) || __privateMethod$1(this, _Icon_instances, showUnicode_fn).call(this, icon));
+    } else {
+      this.shadowRoot.innerHTML = "";
+    }
   }
   // #endregion
 }
 _init$1 = __decoratorStart$1(_a$1);
-_corner = /* @__PURE__ */ new WeakMap();
-__decorateElement$1(_init$1, 4, "corner", _corner_dec, CloseBtn, _corner);
-CloseBtn = __decorateElement$1(_init$1, 0, "CloseBtn", _CloseBtn_decorators, CloseBtn);
-__runInitializers$1(_init$1, 1, CloseBtn);
-const iconCache = {};
+_Icon_instances = /* @__PURE__ */ new WeakSet();
+showStr_fn = function(icon) {
+  return this.setSvg(icon) || this.setImg(icon);
+};
+showCache_fn = function(p) {
+  const cache = iconCache[p];
+  if (!cache) return false;
+  if (typeof cache === "string") {
+    return __privateMethod$1(this, _Icon_instances, showStr_fn).call(this, cache);
+  }
+  if (cache instanceof HTMLImageElement) {
+    return this.setImg(cache.src);
+  }
+  return false;
+};
+showUnicode_fn = function(icon) {
+  this.shadowRoot.textContent = icon;
+};
+_icon = /* @__PURE__ */ new WeakMap();
+__decorateElement$1(_init$1, 4, "icon", _icon_dec, Icon, _icon);
+Icon = __decorateElement$1(_init$1, 0, "Icon", _Icon_decorators, Icon);
+__runInitializers$1(_init$1, 1, Icon);
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -1250,100 +1372,445 @@ var __decorateElement = (array, flags, name, decorators, target, extra) => {
   }
   return k || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
 };
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
 var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use the "in" operator on this value') : member.has(obj);
 var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _icon_dec, _a, _Icon_decorators, _Icon_instances, showStr_fn, showCache_fn, showUnicode_fn, _init, _icon;
-const style = createStyleSheet({
-  //防止网页中没有定义这些字体。如'⚙'在没有 Emoji 字体加持的情况下，显示非常难看。
-  //默认不要 inline-block，选中一行包含 icon 的文字时，可以看出明显区别。
-  ":host": `
-        /*display: inline-block;*/
-        font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-    `,
-  //height - 相对于父元素的字体高度，这是关键！
-  "img, svg": `
-        width: 1em;
-        height: 1em;
-        vertical-align: middle;
-        color: inherit;
-    `
-});
-const tagName = "GZM-ICON";
-const mutableAttributes = ["icon"];
-_Icon_decorators = [defineElement({ tagName, mutableAttributes })];
-class Icon extends (_a = HTMLElement, _icon_dec = [strAttr], _a) {
+var _duration_dec, _size_dec, _a, _CheckCircle_decorators, _CheckCircle_instances, notInline_fn, init_fn, _init, _size, _duration;
+const svg = `
+<svg width="100%" height="100%" viewBox="0 0 400 400">
+    <circle fill="none" stroke="#68e534" stroke-width="20" cy="200" cx="200" r="190" stroke-linecap="round" transform="rotate(-90 200 200)"></circle>
+    <polyline fill="none" stroke="#68e534" stroke-width="24" points="88,214 173,284 304,138" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+const circleLength = 1194;
+const polylineLength = 350;
+const tagName = "GZM-CHECK-CIRCLE";
+const mutableAttributes = ["size"];
+_CheckCircle_decorators = [defineElement({ tagName, mutableAttributes })];
+class CheckCircle extends (_a = HTMLElement, _size_dec = [strAttr], _duration_dec = [intAttr], _a) {
   constructor() {
-    super();
-    __privateAdd(this, _Icon_instances);
-    __privateAdd(this, _icon, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
-    const sr = this.attachShadow({ mode: "open" });
-    sr.adoptedStyleSheets = [baseStyle, style];
-  }
-  setImg(icon) {
-    if (icon.startsWith("data:image/") || icon.includes(".") && icon.includes("/")) {
-      this.shadowRoot.innerHTML = `<img src="${icon}" alt="icon">`;
-      return true;
-    }
-    return false;
-  }
-  setSvg(icon) {
-    if (icon.startsWith("<svg ")) {
-      this.shadowRoot.innerHTML = icon;
-      return true;
+    super(...arguments);
+    __privateAdd(this, _CheckCircle_instances);
+    __publicField(this, "$circle");
+    __publicField(this, "$polyline");
+    __privateAdd(this, _size, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
+    __privateAdd(this, _duration, __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
+  }
+  connectedCallback() {
+    __privateMethod(this, _CheckCircle_instances, notInline_fn).call(this);
+    this.innerHTML = svg;
+    this.$circle = this.querySelector("circle");
+    this.$polyline = this.querySelector("polyline");
+    __privateMethod(this, _CheckCircle_instances, init_fn).call(this);
+  }
+  play() {
+    const d = 3e3;
+    let dur = this.duration ?? d;
+    if (dur <= 0) {
+      dur = d;
     }
-    return false;
+    const durCircle = Math.floor(dur / (circleLength + polylineLength) * circleLength);
+    const durPolyline = dur - durCircle;
+    const $c = this.$circle;
+    $c.style.transitionDuration = `${durCircle}ms`;
+    const $p = this.$polyline;
+    $p.style.transitionDuration = `${durPolyline}ms`;
+    return new Promise((resolve) => {
+      void window.getComputedStyle($c).strokeDashoffset;
+      $c.style.strokeDashoffset = (circleLength * 2).toString();
+      $c.ontransitionend = () => {
+        $p.style.strokeDashoffset = "0";
+        $p.ontransitionend = () => {
+          resolve(void 0);
+        };
+      };
+    });
   }
-  // #region 属性
-  _icon_set(icon) {
-    if (icon) {
-      void (__privateMethod(this, _Icon_instances, showStr_fn).call(this, icon) || __privateMethod(this, _Icon_instances, showCache_fn).call(this, icon) || __privateMethod(this, _Icon_instances, showUnicode_fn).call(this, icon));
-    } else {
-      this.shadowRoot.innerHTML = "";
-    }
+  _size_set(nv) {
+    nv = nv ?? "";
+    this.style.width = nv;
+    this.style.height = nv;
+    this.style.aspectRatio = "1 / 1";
   }
   // #endregion
 }
 _init = __decoratorStart(_a);
-_Icon_instances = /* @__PURE__ */ new WeakSet();
-showStr_fn = function(icon) {
-  return this.setSvg(icon) || this.setImg(icon);
-};
-showCache_fn = function(p) {
-  const cache = iconCache[p];
-  if (!cache) return false;
-  if (typeof cache === "string") {
-    return __privateMethod(this, _Icon_instances, showStr_fn).call(this, cache);
+_CheckCircle_instances = /* @__PURE__ */ new WeakSet();
+notInline_fn = function() {
+  const computedStyle = window.getComputedStyle(this);
+  if (computedStyle.display === "inline") {
+    this.style.display = "inline-block";
   }
-  if (cache instanceof HTMLImageElement) {
-    return this.setImg(cache.src);
-  }
-  return false;
 };
-showUnicode_fn = function(icon) {
-  this.shadowRoot.textContent = icon;
+init_fn = function() {
+  const $c = this.$circle;
+  $c.style.strokeDasharray = circleLength.toString();
+  $c.style.strokeDashoffset = circleLength.toString();
+  $c.style.transitionProperty = "stroke-dashoffset";
+  const $p = this.$polyline;
+  $p.style.strokeDasharray = polylineLength.toString();
+  $p.style.strokeDashoffset = polylineLength.toString();
+  $p.style.transitionProperty = "stroke-dashoffset";
 };
-_icon = /* @__PURE__ */ new WeakMap();
-__decorateElement(_init, 4, "icon", _icon_dec, Icon, _icon);
-Icon = __decorateElement(_init, 0, "Icon", _Icon_decorators, Icon);
-__runInitializers(_init, 1, Icon);
+_size = /* @__PURE__ */ new WeakMap();
+_duration = /* @__PURE__ */ new WeakMap();
+__decorateElement(_init, 4, "size", _size_dec, CheckCircle, _size);
+__decorateElement(_init, 4, "duration", _duration_dec, CheckCircle, _duration);
+CheckCircle = __decorateElement(_init, 0, "CheckCircle", _CheckCircle_decorators, CheckCircle);
+__runInitializers(_init, 1, CheckCircle);
+function createDialog(options) {
+  const $dlg = document.createElement("dialog");
+  $dlg.className = "gzm-frame gzm-dlg";
+  if (!options.reusable) {
+    removeWhenClose($dlg);
+  }
+  if (options.resizable) {
+    $dlg.setAttribute("resize", "");
+  }
+  if (options.title) {
+    const $header = setDefaultHeader($dlg, options.title);
+    if (options.movable) {
+      setHeaderMovable($dlg, $header);
+    }
+  }
+  if (options.okHandler) {
+    setDefaultFooter($dlg, options.okHandler);
+  }
+  if (options.$body) {
+    setBody($dlg, options.$body);
+  }
+  if (options.width) {
+    $dlg.style.width = options.width;
+  }
+  if (options.height) {
+    $dlg.style.height = options.height;
+  }
+  document.body.appendChild($dlg);
+  return $dlg;
+}
+function showDockRightModalDlg(options) {
+  const $dlg = createDialog(options);
+  dockRight($dlg);
+  $dlg.showModal();
+  return $dlg;
+}
+function dockRight($dlg) {
+  $dlg.setAttribute("dock", "right");
+  Reflect.set($dlg, "slideOut", slideOutRight);
+  $dlg.onkeydown = (e) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      slideOutRight.apply($dlg);
+    }
+  };
+  $dlg.ontoggle = (e) => {
+    if (e.newState === "open") {
+      $dlg.style.transform = "translateX(0)";
+    }
+  };
+}
+function slideOutRight() {
+  this.style.transform = "translateX(100%)";
+  this.ontransitionend = () => {
+    this.close();
+    this.ontransitionend = null;
+  };
+}
+function removeWhenClose($dlg) {
+  $dlg.onclose = () => {
+    $dlg.remove();
+  };
+}
+function setDefaultHeader($dlg, dlgTitle) {
+  let $header = $dlg.querySelector("header");
+  if (!$header) {
+    $header = document.createElement("header");
+    $header.className = "gzm-header";
+    $dlg.appendChild($header);
+  }
+  $header.innerHTML = `<strong>${dlgTitle}</strong><div class='gzm-txt-btn'>✕</div>`;
+  const $closeBtn = $header.querySelector(".gzm-txt-btn");
+  $closeBtn.onclick = () => closeDlg($dlg);
+  return $header;
+}
+function setDefaultFooter($dlg, okHandler) {
+  let $footer = $dlg.querySelector("footer");
+  if (!$footer) {
+    $footer = document.createElement("footer");
+    $dlg.appendChild($footer);
+  } else {
+    $footer.innerHTML = "";
+  }
+  const $cancelBtn = document.createElement("button");
+  $cancelBtn.textContent = GT.cancel;
+  $cancelBtn.onclick = () => closeDlg($dlg);
+  const $okBtn = document.createElement("button");
+  $okBtn.textContent = GT.ok;
+  $okBtn.onclick = () => okHandler($dlg);
+  $footer.append($cancelBtn, $okBtn);
+}
+function setHeaderMovable($dlg, $header) {
+  $header.style.cursor = "move";
+  let userSelect;
+  const firstMove = () => {
+    if (userSelect) {
+      return;
+    }
+    const style2 = window.getComputedStyle($dlg);
+    userSelect = style2.getPropertyValue("user-select");
+    $dlg.style.userSelect = "none";
+    $dlg.style.margin = "0";
+  };
+  $header.onmousedown = (e) => {
+    const $t = e.target;
+    if ($t.classList.contains("gzm-txt-btn")) return;
+    const rect = $dlg.getBoundingClientRect();
+    const offsetX = e.clientX - rect.left;
+    const offsetY = e.clientY - rect.top;
+    const move = (me) => {
+      firstMove();
+      let left = me.clientX - offsetX;
+      left = Math.max(0, left);
+      left = Math.min(document.documentElement.clientWidth - rect.width, left);
+      let top = me.clientY - offsetY;
+      top = Math.max(0, top);
+      top = Math.min(document.documentElement.clientHeight - rect.height, top);
+      $dlg.style.left = left + "px";
+      $dlg.style.top = top + "px";
+    };
+    const up = () => {
+      document.removeEventListener("mousemove", move);
+      document.removeEventListener("mouseup", up);
+      if (userSelect) {
+        $dlg.style.userSelect = userSelect;
+        userSelect = "";
+      }
+    };
+    document.addEventListener("mousemove", move);
+    document.addEventListener("mouseup", up);
+  };
+}
+function setBody($dlg, $body) {
+  $dlg.appendChild($body);
+}
+function closeDlg($dlg) {
+  if ("slideOut" in $dlg && typeof $dlg.slideOut === "function") {
+    $dlg.slideOut();
+    return;
+  }
+  $dlg.close();
+}
+const className = ".gzm-dlg";
+const styleSheet = createStyleSheet({
+  [className]: `
+        max-width:100vw;
+        max-height:100vh;
+        margin:auto;
+        padding:0.25rem;/*gzm-frame 中有 p-2，直接放在 .dlg 中不起作用！*/
+    `,
+  /* resize: attr(resize, "both"); 可惜不起作用，否则就可以设置元素的属性来控制 */
+  [className + "[resize]"]: `
+        resize: both;
+        border-bottom-right-radius: 0;/*会在右下角显示调整尺寸的句柄*/
+    `,
+  [className + "[dock]"]: `
+        transition-property:transform;
+        transition-duration:750ms;
+        margin:0;/*<dialog> 浏览器样式有 margin，会阻止 dock*/
+    `,
+  /*<dialog> open 才会显示，显示后才启用 grid，否则会阻止 <dialog> 关闭，因为关闭就是 display:none;*/
+  [className + "[open]"]: `
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-template-rows: auto 1fr auto;
+        gap: 0.25rem;
+        overflow: hidden;
+        outline-style: none; /*不要显示一圈黑框*/
+    `,
+  [className + "[dock=right]"]: `
+        top: 0px; 
+        height: 100vh; 
+        left: auto; 
+        right: 0; 
+        transform: translateX(100%);
+    `,
+  [className + ">header"]: `
+        grid-row: 1;
+        border-radius: 0.5rem; 
+        gap: 1rem;
+        padding-inline: 1rem;
+        padding-block: 0.5rem;
+        display: flex;
+        align-items: center;
+    `,
+  /*对话框标题*/
+  [className + ">header>strong"]: `
+        flex: auto;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    `,
+  [className + ">footer"]: `
+        grid-row: -1;
+        border-top: var(--gzm-btn-border);
+        padding-inline: 1rem;
+        padding-block: 0.75rem;
+        display: flex;
+        justify-content: space-between;
+    `,
+  /*footer 中的确定取消按钮*/
+  [className + ">footer>button"]: `
+        font: inherit;
+        line-height: inherit;
+        color: var(--gzm-btn-txt-color);
+        background: var(--gzm-btn-background);
+        border: var(--gzm-btn-border);
+        border-radius: 0.5rem;
+        padding: 0.375rem 0.75rem;
+    `,
+  [className + ">footer>button:hover"]: `
+        color: var(--gzm-h-btn-txt-color);
+        background: var(--gzm-h-btn-background);
+        border: var(--gzm-h-btn-border);
+    `,
+  [className + ">footer>button:active"]: `
+        color: var(--gzm-a-btn-txt-color) !important;
+        background: var(--gzm-a-btn-background) !important;
+        border: var(--gzm-a-btn-border) !important;
+    `
+});
+document.adoptedStyleSheets.push(styleSheet);
+const emojis = ["🕛", "🕐", "🕑", "🕒", "🕓", "🕔", "🕕", "🕖", "🕗", "🕘", "🕙", "🕚"];
+function showWaiting(title, msg) {
+  const $p = document.createElement("p");
+  $p.style.margin = "1rem";
+  $p.style.fontSize = "xxx-large";
+  $p.textContent = emojis[0];
+  const $cap = document.createElement("figcaption");
+  $cap.textContent = msg ?? GT.waiting;
+  const $fig = document.createElement("figure");
+  $fig.style.margin = "1rem";
+  $fig.style.textAlign = "center";
+  $fig.append($p, $cap);
+  const $dlg = createDialog({
+    title,
+    movable: true,
+    $body: $fig
+  });
+  $dlg.showModal();
+  $fig.style.width = Math.floor($fig.offsetWidth / 0.618) + "px";
+  let index = 0;
+  const handle = window.setInterval(() => {
+    if (index < 0 || !$dlg.parentElement) {
+      window.clearInterval(handle);
+      return;
+    }
+    index = (index + 1) % emojis.length;
+    $p.textContent = emojis[index];
+  }, 1e3);
+  return {
+    $dlg,
+    async complete(msg2 = GT.completed) {
+      $cap.textContent = msg2;
+      this.setTitle(GT.completed);
+      index = -1;
+      const $cc = document.createElement(tagName);
+      $cc.size = "100px";
+      $cc.duration = 1500;
+      $p.replaceWith($cc);
+      await $cc.play();
+      this.$dlg.close();
+    },
+    error(e = GT.error) {
+      index = -1;
+      $p.textContent = "👮";
+      if (typeof e === "string") {
+        $cap.textContent = e;
+      } else if ("message" in e) {
+        $cap.textContent = String(e.message);
+      } else {
+        $cap.textContent = String(e);
+      }
+      $cap.style.color = "var(--gzm-error-txt-color)";
+      this.setTitle(GT.error);
+    },
+    alert(msg2) {
+      index = -1;
+      $p.textContent = "🙋";
+      $cap.innerHTML = `<strong>${msg2}</strong>`;
+      this.setTitle(GT.attention);
+    },
+    close() {
+      this.$dlg.close();
+    },
+    setTitle(title2) {
+      const $s = this.$dlg.querySelector(":scope > header:first-child > strong:first-child");
+      if ($s) {
+        $s.textContent = title2;
+      }
+    }
+  };
+}
+function showError(errMsg) {
+  const $p = document.createElement("p");
+  $p.style.margin = "1rem";
+  $p.style.fontSize = "xxx-large";
+  $p.textContent = "👮";
+  const $cap = document.createElement("figcaption");
+  $cap.textContent = errMsg;
+  $cap.style.color = "var(--gzm-error-txt-color)";
+  const $fig = document.createElement("figure");
+  $fig.style.margin = "1rem";
+  $fig.style.textAlign = "center";
+  $fig.append($p, $cap);
+  const $dlg = createDialog({
+    title: GT.error,
+    movable: true,
+    $body: $fig
+  });
+  $dlg.showModal();
+  return $dlg;
+}
+function showAlert(msg) {
+  const $p = document.createElement("p");
+  $p.style.margin = "1rem";
+  $p.style.fontSize = "xxx-large";
+  $p.textContent = "🙋";
+  const $cap = document.createElement("figcaption");
+  $cap.innerHTML = `<strong>${msg}</strong>`;
+  const $fig = document.createElement("figure");
+  $fig.style.margin = "1rem";
+  $fig.style.textAlign = "center";
+  $fig.append($p, $cap);
+  const $dlg = createDialog({
+    title: GT.attention,
+    movable: true,
+    $body: $fig
+  });
+  $dlg.showModal();
+  return $dlg;
+}
 export {
   Badge,
   CenterHelper,
+  CheckCircle,
   CloseBtn,
   CornerHelper,
   GT,
   Icon,
   allThemes,
   attachBorderAttributeName,
-  tagName$2 as badgeTagName,
+  tagName$3 as badgeTagName,
   baseStyle,
   boolAttr,
   borders,
-  tagName$1 as closeTagName,
+  tagName as checkCircleTagName,
+  tagName$2 as closeTagName,
+  createDialog,
   createStyleSheet,
   createText,
   createTxtBtn,
@@ -1358,7 +1825,7 @@ export {
   gzmHeader,
   htmlThemeAttr,
   iconCache,
-  tagName as iconTagName,
+  tagName$1 as iconTagName,
   intAttr,
   isLeftCorner,
   isTopCorner,
@@ -1366,6 +1833,10 @@ export {
   makeCorner,
   saAttr,
   setCurrentTheme,
+  showAlert,
+  showDockRightModalDlg,
+  showError,
+  showWaiting,
   strAttr,
   utilityStyle,
   xy