@gzmjs/ui-basic 0.1.0

package/dist/ui-basic.es.js

@@ -0,0 +1,1373 @@
+function getSnakeCaseName(propName) {
+  return propName.replace(/([A-Z])/g, (match) => `-${match.toLowerCase()}`);
+}
+function strAttr(_, context) {
+  const propName = String(context.name);
+  const attrName = getSnakeCaseName(propName);
+  let initValue = void 0;
+  return {
+    get() {
+      const ret = this.getAttribute(attrName);
+      return ret === null ? initValue : ret;
+    },
+    set(value) {
+      if (value ?? false) {
+        this.setAttribute(attrName, String(value));
+      } else {
+        this.removeAttribute(attrName);
+      }
+    },
+    init(value) {
+      initValue = value;
+      return value;
+    }
+  };
+}
+function boolAttr(_, context) {
+  const propName = String(context.name);
+  const attrName = getSnakeCaseName(propName);
+  let initValue = void 0;
+  return {
+    get() {
+      return this.hasAttribute(attrName) || initValue;
+    },
+    set(value) {
+      if (value) {
+        this.setAttribute(attrName, "");
+      } else {
+        this.removeAttribute(attrName);
+      }
+    },
+    init(value) {
+      initValue = value;
+      return value;
+    }
+  };
+}
+function intAttr(_, context) {
+  const propName = String(context.name);
+  const attrName = getSnakeCaseName(propName);
+  let initValue = void 0;
+  return {
+    get() {
+      const attr = this.getAttribute(attrName);
+      return attr === null ? initValue : Number(attr);
+    },
+    set(value) {
+      if (value !== void 0 && !Number.isNaN(value)) {
+        this.setAttribute(attrName, Number(value).toString());
+      } else {
+        this.removeAttribute(attrName);
+      }
+    },
+    init(value) {
+      initValue = value;
+      return value;
+    }
+  };
+}
+function saAttr(_, context) {
+  const propName = String(context.name);
+  const attrName = getSnakeCaseName(propName);
+  let initValue = void 0;
+  return {
+    get() {
+      const attr = this.getAttribute(attrName);
+      return attr === null ? initValue : attr.split(",");
+    },
+    set(value) {
+      if (value && value.length > 0) {
+        this.setAttribute(attrName, value.join(","));
+      } else {
+        this.removeAttribute(attrName);
+      }
+    },
+    init(value) {
+      initValue = value;
+      return value;
+    }
+  };
+}
+const borders = ["bottom", "top", "right", "left"];
+const dialogTagName$1 = "DIALOG";
+function getContainer$1($el) {
+  const root = $el.getRootNode();
+  if (root instanceof ShadowRoot) {
+    return getContainer$1(root.host);
+  }
+  return $el.closest(dialogTagName$1) ?? document.body;
+}
+const attachBorderAttributeName = "gzm-attach-border";
+function checkPopupPosition$1($ppp) {
+  if (!$ppp.getAttribute("popover")) {
+    $ppp.setAttribute("popover", "");
+  }
+  if ($ppp.isConnected) {
+    const p = getComputedStyle($ppp).position;
+    if (p !== "fixed") {
+      throw new Error("popup 的样式定位必须是 fixed");
+    }
+  }
+}
+class CenterHelper {
+  constructor($tooltip, $attachTo, attachBorder) {
+    this.$tt = $tooltip;
+    this.$attachTo = $attachTo;
+    this.realBorder = this.#attachBorder = attachBorder;
+  }
+  $tt;
+  $attachTo;
+  #attachBorder;
+  #space;
+  //最终计算结果
+  realBorder;
+  x = 0;
+  y = 0;
+  marginLeft = "";
+  marginTop = "";
+  //$tt 的宽度和高度
+  ttWidth = 0;
+  ttHeight = 0;
+  pos($tt = this.$tt) {
+    this.#checkParent();
+    this.#calcCoordinates();
+    $tt.setAttribute(attachBorderAttributeName, this.realBorder);
+    $tt.style.top = Math.ceil(this.y) + "px";
+    $tt.style.left = Math.ceil(this.x) + "px";
+    this.#ani($tt);
+  }
+  #ani($tt = this.$tt, rb = this.realBorder) {
+    if (!$tt.doTransition) return;
+    if (rb !== "bottom" && rb !== "right") return;
+    const { width, height } = $tt.getBoundingClientRect();
+    $tt.style.transitionDuration = "200ms";
+    $tt.style.transitionProperty = "width,height";
+    $tt.beforeOpenTransition?.();
+    $tt.ontransitionend = () => {
+      $tt.ontransitionend = null;
+      $tt.afterOpenTransition?.();
+      if (rb === "bottom") {
+        $tt.style.height = "";
+      } else if (rb === "right") {
+        $tt.style.width = "";
+      }
+    };
+    let s = 0;
+    if (rb === "bottom") {
+      $tt.style.height = "0";
+      $tt.style.width = width + "px";
+      s = $tt.offsetHeight;
+      $tt.style.height = height + "px";
+    } else if (rb === "right") {
+      $tt.style.width = "0";
+      $tt.style.height = height + "px";
+      s = $tt.offsetWidth;
+      $tt.style.width = width + "px";
+    }
+    return s;
+  }
+  /**
+   * 计算 popup 显示的 top/left 以及需要调整箭头位置
+   */
+  #calcCoordinates() {
+    this.#calcSpace();
+    const border = this.#getRealAttachBorder();
+    if (border === "top" || border === "bottom") {
+      this.#calcBorderY();
+      this.#calcPointerX();
+    } else {
+      this.#calcBorderX();
+      this.#calcPointerY();
+    }
+  }
+  #checkParent($tt = this.$tt, $attachTo = this.$attachTo) {
+    const $c = getContainer$1($attachTo);
+    if ($tt.isConnected) {
+      const $pc = getContainer$1($tt);
+      if ($pc !== $c) {
+        $c.append($tt);
+      }
+    } else {
+      $c.append($tt);
+    }
+    checkPopupPosition$1($tt);
+    $tt.showPopover();
+    const r = $tt.getBoundingClientRect();
+    this.ttWidth = r.width;
+    this.ttHeight = r.height;
+  }
+  #calcSpace($attachTo = this.$attachTo) {
+    const rect = $attachTo.getBoundingClientRect();
+    const $dd = document.documentElement;
+    const r = $dd.getBoundingClientRect();
+    const s = {
+      top: rect.top - r.top,
+      left: rect.left - r.left,
+      width: rect.width,
+      height: rect.height,
+      right: r.right - rect.right - ($dd.offsetWidth - $dd.clientWidth),
+      bottom: r.bottom - rect.bottom - ($dd.offsetHeight - $dd.clientHeight)
+    };
+    this.#space = s;
+  }
+  /**
+   * 判断一种停靠方式是否有足够的空间。
+   * @returns 数字 = 空间 - 占用尺寸后的剩余
+   */
+  #calcBorderSpace(border, space = this.#space) {
+    const sp = space[border];
+    const sz = border === "top" || border === "bottom" ? this.ttHeight : this.ttWidth;
+    return sp - sz;
+  }
+  /**
+   * 判断应该停靠在哪一条边。
+   * @returns 'top'/'left'/'right'/'bottom' 
+   */
+  #getRealAttachBorder() {
+    let ret = this.#attachBorder;
+    if (ret) {
+      if (this.#calcBorderSpace(ret) >= 0) {
+        return this.realBorder = ret;
+      }
+    }
+    let empty = -99999;
+    for (const b of borders) {
+      const s = this.#calcBorderSpace(b);
+      if (s > empty) {
+        empty = s;
+        ret = b;
+      }
+    }
+    return this.realBorder = ret;
+  }
+  /**
+   * 计算停靠在上下边框时的y
+   */
+  #calcBorderY(realBorder = this.realBorder, space = this.#space) {
+    let y = space.top;
+    y = realBorder === "top" ? y - this.ttHeight : y + space.height;
+    this.y = y;
+  }
+  /**
+   * 计算停靠在上下边框时的x。
+   * 默认是中间对齐，但当宽度太大时，需要调整水平位置。
+   */
+  #calcPointerX(space = this.#space) {
+    const w = (this.ttWidth - space.width) / 2;
+    const x = space.left - w;
+    if (w <= space.left && w <= space.right || w > space.left && w > space.right) {
+      this.x = x;
+      this.marginLeft = "";
+      return;
+    }
+    if (w > space.left) {
+      this.x = 0;
+      this.marginLeft = space.left - w + "px";
+      return;
+    }
+    const left = w - space.right;
+    this.x = x - left;
+    this.marginLeft = left + "px";
+  }
+  /**
+   * 计算停靠在左右边框时的x
+   */
+  #calcBorderX(realBorder = this.realBorder, space = this.#space) {
+    let x = space.left;
+    x = realBorder === "left" ? x - this.ttWidth : x + space.width;
+    this.x = x;
+  }
+  /**
+   * 计算停靠在左右边框时的y。
+   * 默认是中间对齐，但当高度太大时，需要调整垂直位置。
+   */
+  #calcPointerY(space = this.#space) {
+    const h = (this.ttHeight - space.height) / 2;
+    const y = space.top - h;
+    if (h <= space.top && h <= space.bottom || h > space.top && h > space.bottom) {
+      this.y = y;
+      this.marginTop = "";
+      return;
+    }
+    if (h > space.top) {
+      this.y = 0;
+      this.marginTop = space.top - h + "px";
+      return;
+    }
+    this.y = y - (h - space.bottom);
+    this.marginTop = h - space.bottom + "px";
+  }
+}
+const xy = {
+  leftTop: 0,
+  leftBottom: 1,
+  rightTop: 10,
+  rightBottom: 11
+};
+function isLeftCorner(c) {
+  return c < 10;
+}
+function isTopCorner(c) {
+  return c % 10 === 0;
+}
+function makeCorner(isLeft, isTop) {
+  const x = isLeft ? 0 : 10;
+  const y = isTop ? 0 : 1;
+  return x + y;
+}
+const dialogTagName = "DIALOG";
+function getContainer($el) {
+  const root = $el.getRootNode();
+  if (root instanceof ShadowRoot) {
+    return getContainer(root.host);
+  }
+  return $el.closest(dialogTagName) ?? document.documentElement;
+}
+function checkPopupPosition($ppp) {
+  if (!$ppp.getAttribute("popover")) {
+    $ppp.setAttribute("popover", "");
+  }
+  if ($ppp.isConnected) {
+    const p = getComputedStyle($ppp).position;
+    if (p !== "fixed") {
+      throw new Error("popup 的样式定位必须是 fixed");
+    }
+  }
+}
+class CornerHelper {
+  constructor($popup, popupCorner, $attachTo, attachCorner) {
+    this.$popup = $popup;
+    this.#popupCorner = popupCorner;
+    this.$attachTo = $attachTo;
+    this.#attachCorner = attachCorner;
+  }
+  $popup;
+  $attachTo;
+  #popupCorner;
+  #attachCorner;
+  pos() {
+    this.#checkParent();
+    const top = this.#tryGetVerticalCorner();
+    const left = this.#tryGetHorizontalCorner();
+    const $ppp = this.$popup;
+    if (top !== void 0 && left !== void 0) {
+      $ppp.style.top = top + "px";
+      $ppp.style.left = left + "px";
+      $ppp.style.right = "auto";
+      $ppp.style.bottom = "auto";
+    } else {
+      const { x, y } = this.#calcAttachPoint();
+      this.#place(x, y);
+      if (top !== void 0) {
+        $ppp.style.top = top + "px";
+      } else if (left !== void 0) {
+        $ppp.style.left = left + "px";
+      }
+    }
+    $ppp.style.boxShadow = `var(--gzm-corner-shadow-${this.#popupCorner})`;
+  }
+  #checkParent($ppp = this.$popup, $attachTo = this.$attachTo) {
+    const $c = getContainer($attachTo);
+    if ($ppp.isConnected) {
+      const $pc = getContainer($ppp);
+      if ($pc !== $c) {
+        $c.append($ppp);
+      }
+    } else {
+      $c.append($ppp);
+    }
+    checkPopupPosition($ppp);
+    $ppp.showPopover();
+  }
+  /**
+   * 计算位置
+   * @returns
+   */
+  #place(x, y) {
+    const dde = document.documentElement;
+    const $ppp = this.$popup;
+    switch (this.#popupCorner) {
+      case 0:
+        $ppp.style.right = "auto";
+        $ppp.style.bottom = "auto";
+        $ppp.style.left = x + "px";
+        $ppp.style.top = y + "px";
+        break;
+      case 1:
+        $ppp.style.right = "auto";
+        $ppp.style.top = "auto";
+        $ppp.style.left = x + "px";
+        $ppp.style.bottom = dde.clientHeight - y + "px";
+        break;
+      case 10:
+        $ppp.style.left = "auto";
+        $ppp.style.bottom = "auto";
+        $ppp.style.right = dde.clientWidth - x + "px";
+        $ppp.style.top = y + "px";
+        break;
+      case 11:
+        $ppp.style.left = "auto";
+        $ppp.style.top = "auto";
+        $ppp.style.right = dde.clientWidth - x + "px";
+        $ppp.style.bottom = dde.clientHeight - y + "px";
+        break;
+    }
+  }
+  /**
+   * 计算 attach-to 元素上挂靠点的坐标
+   * @returns 
+   */
+  #calcAttachPoint() {
+    const rect = this.$attachTo.getBoundingClientRect();
+    let x = rect.x;
+    let y = rect.y;
+    switch (this.#attachCorner) {
+      case 1:
+        y += rect.height;
+        break;
+      case 10:
+        x += rect.width;
+        break;
+      case 11:
+        x += rect.width;
+        y += rect.height;
+        break;
+    }
+    return { x, y };
+  }
+  /**
+   * 计算挂靠点，直接覆盖原始的 #popupCorner 和 #attachCorner。
+   * @returns {top, bottom} 如果不为空，说明无法计算挂高点，那么直接计算 popup 的坐标返回。
+   */
+  #tryGetVerticalCorner() {
+    const dde = document.documentElement;
+    const oh = this.$popup.offsetHeight;
+    if (oh >= dde.clientHeight) {
+      return;
+    }
+    const corners = this.#calcVertialCornerAndSpace();
+    const h = corners.find((c2) => c2.popupCorner === this.#popupCorner && c2.attachCorner === this.#attachCorner).height;
+    if (oh <= h) {
+      return;
+    }
+    const c = corners.sort((a, b) => b.height - a.height)[0];
+    if (oh <= c.height) {
+      this.#popupCorner = c.popupCorner;
+      this.#attachCorner = c.attachCorner;
+      return;
+    }
+    let ret = 0;
+    if (c.popupCorner % 10 === 0) {
+      ret = dde.clientHeight - oh;
+    }
+    return ret;
+  }
+  /**
+   * 计算 attach-to 元素多个挂靠点和可用垂直空间的关系。
+   */
+  #calcVertialCornerAndSpace() {
+    const corners = this.#calcVerticalCorner();
+    const rect = this.$attachTo.getBoundingClientRect();
+    for (const c of corners) {
+      this.#calcVerticalSpace(c, rect);
+    }
+    return corners;
+  }
+  /**
+   * 在垂直方向上，attach-to 和 $popup 都有 2 个选项 top 和 bottom，组合在一起就是 4 个选项。
+   * 这里就需要将 4 个组合的可用垂直空间计算出来。
+   * 
+   * 虽然这里计算的是垂直方向，但是仍然要把水平方向的一个因素考虑进来：
+   * 当 attach-to 和 $popup 是左侧对齐-挂靠点都在左侧，或者是右侧对齐时，上面4个组合中的2个会导致 attach-to 和 $popup 重叠在一起。
+   * 即左上角、右上角重叠 和 左下角、右下角重叠。
+   * 当原来就是重叠的，这里只计算重叠的。如果原来不是重叠的，则不计算重叠的。
+   * @returns 
+   */
+  #calcVerticalCorner() {
+    const pc = this.#popupCorner;
+    const cornersOfPopup = pc < 10 ? [0, 1] : [10, 11];
+    const ac = this.#attachCorner;
+    const cornersOfAttach = ac < 10 ? [0, 1] : [10, 11];
+    let four = [];
+    for (const popupCorner of cornersOfPopup) {
+      for (const attachCorner of cornersOfAttach) {
+        four.push({ popupCorner, attachCorner });
+      }
+    }
+    if (pc < 10 && ac < 10 || pc >= 10 && ac >= 10) {
+      if (pc === ac) {
+        four = four.filter((f) => f.popupCorner === f.attachCorner);
+      } else {
+        four = four.filter((f) => f.popupCorner !== f.attachCorner);
+      }
+    }
+    return four;
+  }
+  /**
+   * 计算挂靠点可用垂直空间
+   */
+  #calcVerticalSpace(cp, attachToRect) {
+    const dde = document.documentElement;
+    const y = attachToRect.y;
+    if (cp.popupCorner % 10 === 0) {
+      if (cp.attachCorner % 10 === 0) {
+        cp.height = dde.clientHeight - y;
+      } else {
+        cp.height = dde.clientHeight - (y + attachToRect.height);
+      }
+    } else {
+      if (cp.attachCorner % 10 === 0) {
+        cp.height = y;
+      } else {
+        cp.height = y + attachToRect.height;
+      }
+    }
+  }
+  /**
+   * 注释参考：tryGetVerticalCorner
+   */
+  #tryGetHorizontalCorner() {
+    const dde = document.documentElement;
+    const ow = this.$popup.offsetWidth;
+    if (ow >= dde.clientWidth) {
+      return;
+    }
+    const corners = this.#calcHorizontalCornerAndSpace();
+    const w = corners.find((c2) => c2.popupCorner === this.#popupCorner && c2.attachCorner === this.#attachCorner).width;
+    if (ow <= w) {
+      return;
+    }
+    const c = corners.sort((a, b) => b.width - a.width)[0];
+    if (ow <= c.width) {
+      this.#popupCorner = c.popupCorner;
+      this.#attachCorner = c.attachCorner;
+      return;
+    }
+    let ret = 0;
+    if (c.popupCorner < 10) {
+      ret = dde.clientWidth - ow;
+    }
+    return ret;
+  }
+  /**
+   * 注释参考：#calcVertialCornerAndSpace
+   * @returns 
+   */
+  #calcHorizontalCornerAndSpace() {
+    const corners = this.#calcHorizontalCorner();
+    const rect = this.$attachTo.getBoundingClientRect();
+    for (const c of corners) {
+      this.#calcHorizontalSpace(c, rect);
+    }
+    return corners;
+  }
+  /**
+   * 注释参考：#calcVerticalCorner
+   * @returns
+   */
+  #calcHorizontalCorner() {
+    const pc = this.#popupCorner;
+    const cornersOfPopup = pc % 10 === 0 ? [0, 10] : [1, 11];
+    const ac = this.#attachCorner;
+    const cornersOfAttach = ac % 10 === 0 ? [0, 10] : [1, 11];
+    let four = [];
+    for (const popupCorner of cornersOfPopup) {
+      for (const attachCorner of cornersOfAttach) {
+        four.push({ popupCorner, attachCorner });
+      }
+    }
+    if (pc % 10 === ac % 10) {
+      if (pc === ac) {
+        four = four.filter((f) => f.popupCorner === f.attachCorner);
+      } else {
+        four = four.filter((f) => f.popupCorner !== f.attachCorner);
+      }
+    }
+    return four;
+  }
+  /**
+   * 注释参考：#calcVerticalSpace
+   * @param {popupCorner, attachCorner} cs 
+   */
+  #calcHorizontalSpace(cs, attachToRect) {
+    const dde = document.documentElement;
+    const x = attachToRect.x;
+    if (cs.popupCorner < 10) {
+      if (cs.attachCorner < 10) {
+        cs.width = dde.clientWidth - x;
+      } else {
+        cs.width = dde.clientWidth - (x + attachToRect.width);
+      }
+    } else {
+      if (cs.attachCorner < 10) {
+        cs.width = x;
+      } else {
+        cs.width = x + attachToRect.width;
+      }
+    }
+  }
+}
+function defineElement(ele) {
+  return function(constructor, ctx) {
+    ctx.addInitializer(function() {
+      defineCustomElement(constructor, ele);
+    });
+  };
+}
+function defineCustomElement(constructor, ele) {
+  const tagName2 = ele.tagName.toLowerCase();
+  if (customElements.get(tagName2)) {
+    throw new Error(tagName2 + " already defined");
+  }
+  if (ele.mutableAttributes) {
+    observedAttributes(constructor, ele.mutableAttributes, ele.copyAttributes);
+  }
+  customElements.define(tagName2, constructor);
+  if (ele.style) {
+    document.adoptedStyleSheets.push(ele.style);
+  }
+}
+function observedAttributes(constructor, mutableAttributes2, copyAttributes) {
+  Reflect.set(constructor, "observedAttributes", mutableAttributes2);
+  if (!constructor.prototype.attributeChangedCallback) {
+    constructor.prototype.attributeChangedCallback = attributeChangedCallback;
+  }
+  if (copyAttributes) {
+    for (const p in copyAttributes) {
+      if (!mutableAttributes2.includes(p)) {
+        throw new Error(`${constructor.name} 的属性 ${p} 不属于 mutableAttributes。`);
+      }
+    }
+    Reflect.set(constructor, staticCopyAttributesProperty, copyAttributes);
+  }
+}
+const staticCopyAttributesProperty = "gzmCopyAttributes";
+function getAttributeSetHandlerName(name) {
+  return "_" + name.replaceAll("-", "_") + "_set";
+}
+function attributeChangedCallback(name, oldValue, newValue) {
+  if (staticCopyAttributesProperty in this.constructor) {
+    const cas = this.constructor[staticCopyAttributesProperty];
+    if (cas) {
+      if (name in cas) {
+        const ele = cas[name];
+        if (ele) {
+          doCopyAttributes.call(this, name, newValue, ele);
+        }
+      }
+    }
+  }
+  const funcName = getAttributeSetHandlerName(name);
+  const func = Reflect.get(this, funcName);
+  if (typeof func === "function") {
+    func.call(this, newValue, oldValue);
+  }
+}
+function doCopyAttributes(attr, newValue, ele) {
+  ele = typeof ele === "string" ? [ele] : ele;
+  for (const e of ele) {
+    const $ele = Reflect.get(this, e);
+    if ($ele) {
+      if (newValue === null) {
+        $ele.removeAttribute(attr);
+      } else {
+        $ele.setAttribute(attr, newValue);
+      }
+    }
+  }
+}
+function debounce(func, wait = 200) {
+  let timeout = null;
+  return function(...args) {
+    if (timeout) clearTimeout(timeout);
+    timeout = window.setTimeout(() => {
+      timeout = null;
+      func.apply(this, args);
+    }, wait);
+  };
+}
+function generateId() {
+  return Math.random().toString(36).slice(2);
+}
+const zh = {
+  close: "关闭",
+  true: "✔️",
+  false: "❌",
+  undefined: "未定义",
+  default: "默认",
+  valueMissing: "请填写此字段。",
+  //input 验证 required 的默认错误信息。
+  count: "计数",
+  min: "最小",
+  max: "最大",
+  sum: "合计",
+  avg: "平均",
+  hide: "隐藏",
+  del: "删除",
+  asc: "升序",
+  desc: "降序",
+  ok: "确定",
+  cancel: "取消",
+  waiting: "正在处理中，请稍候...",
+  confirming: "请确认：{0} ？",
+  completed: "已完成",
+  error: "错误",
+  attention: "注意",
+  noMenuSet: "未设置菜单！？",
+  readonly: "只读"
+};
+const en = {
+  true: "✔️",
+  false: "❌",
+  valueMissing: "Please fill in this field.",
+  //input 验证 required 的默认错误信息。
+  del: "delete",
+  asc: "ascending",
+  desc: "descending",
+  waiting: "Processing, please wait...",
+  confirming: "Please confirm: {0} ?",
+  noMenuSet: "No menu to display!?"
+};
+const globalTexts = { zh, en };
+const defaultLangChain = ["zh"];
+const bindHtmlElement = "bindHtmlElement";
+function getTargetTxt(target, property, receiver) {
+  if (property === bindHtmlElement) {
+    return function($ele2) {
+      target.$ele = $ele2;
+      target.langs = void 0;
+      return receiver;
+    };
+  }
+  let { langs, $ele } = target;
+  if (!langs) {
+    if ($ele) {
+      if ($ele.isConnected) {
+        $ele = findLangElement($ele);
+        if ($ele) {
+          langs = target.langs = createLangArray($ele.lang);
+          target.$ele = void 0;
+        }
+      }
+    }
+  }
+  langs ??= defaultLangChain;
+  const texts = target.texts;
+  for (let i = 0; i < langs.length; i++) {
+    const lang = langs[i];
+    if (!lang) {
+      continue;
+    }
+    for (let j = 0; j < texts.length; j++) {
+      const txt = texts[j];
+      if (!txt) {
+        continue;
+      }
+      if (lang in txt) {
+        const langTxts = txt[lang];
+        if (langTxts && property in langTxts) {
+          let ret = langTxts[property];
+          if (ret) {
+            if (!ret.includes("{0}")) {
+              return ret;
+            }
+            return (...args) => {
+              args = args.flat();
+              for (let i2 = 0; i2 < args.length; i2++) {
+                const a = args[i2];
+                const r = "{" + i2 + "}";
+                ret = ret.replaceAll(r, String(a));
+              }
+              return ret;
+            };
+          }
+        }
+      }
+    }
+  }
+  return property;
+}
+function createText(...txts) {
+  const target = {
+    texts: txts.filter((t) => t).map((t) => t)
+  };
+  if (document.documentElement.lang) {
+    target.langs = createLangArray(document.documentElement.lang);
+  }
+  return new Proxy(target, {
+    get: getTargetTxt
+  });
+}
+const GT = createText(globalTexts);
+function createLangArray(lang) {
+  if (!lang) {
+    return defaultLangChain;
+  }
+  const sa = lang.split("-");
+  const ret = [lang];
+  for (let i = sa.length - 1; i > 0; i--) {
+    const tmp = sa.slice(0, i);
+    ret.push(tmp.join("-"));
+  }
+  return ret;
+}
+function findLangElement($ele) {
+  if ($ele instanceof HTMLElement && $ele.lang) return $ele;
+  if (!$ele.isConnected) return findLangElement(document.body);
+  const $p = $ele.closest("*[lang]");
+  if ($p instanceof HTMLElement && $p.lang) {
+    return $p;
+  }
+  const sr = $ele.getRootNode();
+  if (sr instanceof ShadowRoot) {
+    return findLangElement(sr.host);
+  }
+  return void 0;
+}
+function createStyleSheet(style2) {
+  const sheet = new CSSStyleSheet();
+  for (const selector in style2) {
+    const rules = style2[selector];
+    if (typeof rules === "string") {
+      sheet.insertRule(`${selector} { ${rules} }`);
+    } else if (rules) {
+      const ruleStr = formatRules(rules);
+      sheet.insertRule(`${selector} { ${ruleStr} }`);
+    }
+  }
+  return sheet;
+}
+function formatRules(rules) {
+  let ruleStr = "";
+  for (const prop in rules) {
+    ruleStr += `${prop}: ${rules[prop]}; `;
+  }
+  return ruleStr;
+}
+function getElementRules(tagName2, ...ruleNames) {
+  const $ele = document.createElement(tagName2);
+  document.body.append($ele);
+  const cs = getComputedStyle($ele);
+  const ret = {};
+  ruleNames.forEach((x) => {
+    if (x in cs) {
+      ret[x] = Reflect.get(cs, x);
+    }
+  });
+  $ele.remove();
+  return ret;
+}
+const disabledStyle = {
+  "[disabled], [disabled]>*": `
+        opacity: 0.5;
+        cursor: not-allowed;
+        pointer-events: none;
+        user-select: none;
+    `
+};
+const baseStyle = createStyleSheet({
+  "*, :after, :before, ::backdrop": `
+        box-sizing: border-box;
+        border: 0 solid;
+        margin: 0;
+        padding: 0;
+    `,
+  //因其语义价值成为强调内容的优先选择
+  strong: `
+        font-weight: bolder;
+    `,
+  //适用于语义化标注次要内容。默认字体大小为16px，75%=12px，也是能够正常显示的最小字体。
+  small: `
+        font-size: 75%;
+    `,
+  '[hidden]:where(:not([hidden="until-found"]))': `
+        display: none !important;
+    `,
+  //这个不属于 base，但我认为有用
+  ...disabledStyle
+});
+const gzmHeader = `
+    background: var(--gzm-header-background);
+    border: var(--gzm-header-border);
+    color: var(--gzm-header-txt-color);
+`;
+const gzmFrame = `
+    background: var(--gzm-content-background);
+    color: var(--gzm-content-txt-color);
+    border-radius: 0.5rem;
+    border: var(--gzm-btn-border);
+    padding: 0.5rem;
+`;
+const utilityStyle = createStyleSheet({
+  ".gzm-frame": gzmFrame,
+  ".gzm-header": gzmHeader,
+  //txt-btn
+  ".gzm-txt-btn": {
+    cursor: "pointer",
+    "font-weight": "bolder",
+    "border-radius": "0.25rem",
+    "padding-inline": "0.25rem",
+    "white-space": "nowrap",
+    background: "transparent",
+    color: "inherit",
+    "font-size": "inherit",
+    "outline-offset": "-1px"
+    //当按钮所在父元素的padding不够，导致outline无法全部显示出来。
+  },
+  ".gzm-txt-btn:hover": {
+    color: "var(--gzm-h-btn-txt-color)",
+    outline: "var(--gzm-h-btn-border)",
+    background: "var(--gzm-h-btn-background)"
+  },
+  ".gzm-txt-btn:active": {
+    color: "var(--gzm-a-btn-txt-color) !important",
+    outline: "var(--gzm-a-btn-border) !important",
+    background: "var(--gzm-a-btn-background) !important"
+  },
+  //直接在 document 中使用 gzm-btn-*，且 disabled = true 时，靠这个生效
+  ...disabledStyle
+});
+function createTxtBtn(txt) {
+  const $btn = document.createElement("button");
+  $btn.type = "button";
+  $btn.className = "gzm-txt-btn";
+  $btn.textContent = txt;
+  return $btn;
+}
+function isTxtBtn($btn) {
+  return $btn.classList.contains("gzm-txt-btn");
+}
+const defaultTheme = {
+  ":root": `
+        --gzm-border-color: rgb(197,197,197);
+
+        --gzm-btn-background: rgb(246,246,246);
+        --gzm-btn-border: 1px solid var(--gzm-border-color);
+        --gzm-btn-txt-color: rgb(69,69,69);
+
+        --gzm-h-btn-background: rgb(237,237,237);
+        --gzm-h-btn-border: 1px solid rgb(204,204,204);
+        --gzm-h-btn-txt-color: rgb(43,43,43);
+
+        --gzm-a-btn-background: rgb(0,127,255);
+        --gzm-a-btn-border: 1px solid rgb(0,62,255);
+        --gzm-a-btn-txt-color: rgb(255,255,255);
+
+        --gzm-header-background: rgb(233,233,233);
+        --gzm-header-border: 1px solid rgb(221,221,221);
+        --gzm-header-txt-color: rgb(51,51,51);
+
+        --gzm-background-color: rgb(255,255,255);
+
+        --gzm-content-background: var(--gzm-background-color);
+        --gzm-content-txt-color: rgb(51,51,51);
+
+        --gzm-error-txt-color: #d34d17;
+
+        --gzm-badge-background: rgb(253,223,223);
+        --gzm-badge-txt-color: rgb(95,63,63);
+        
+        --gzm-shadow-color: rgb(102,102,102);
+
+        --gzm-corner-shadow-11:-7px -7px 7px var(--gzm-shadow-color);
+        --gzm-corner-shadow-0:7px 7px 7px var(--gzm-shadow-color);
+        --gzm-corner-shadow-10:-7px 7px 7px var(--gzm-shadow-color);
+        --gzm-corner-shadow-1:7px -7px 7px var(--gzm-shadow-color);
+
+        --gzm-shadow-top: drop-shadow(0px -2px 4px var(--gzm-shadow-color));
+        --gzm-shadow-left: drop-shadow(-2px 0px 4px var(--gzm-shadow-color));
+        --gzm-shadow-right: drop-shadow(2px 0px 4px var(--gzm-shadow-color));
+        --gzm-shadow-bottom: drop-shadow(0px 2px 4px var(--gzm-shadow-color));
+
+        --gzm-switch-background: #999;
+        --gzm-switch-check-background: #67c93d;
+    `,
+  ":root dialog::backdrop": `
+        background: rgb(170,170,170);
+        opacity: 0.8;
+    `
+};
+document.adoptedStyleSheets.push(createStyleSheet(defaultTheme));
+const themeLocalStorageKey = "gzm-ui-basic-theme";
+const htmlThemeAttr = "gzm-theme";
+const allThemes = [];
+function getCurrentTheme() {
+  return localStorage.getItem(themeLocalStorageKey) ?? "";
+}
+function setCurrentTheme(themeName) {
+  if (themeName && !allThemes.some((theme) => theme.name === themeName)) {
+    return false;
+  }
+  localStorage.setItem(themeLocalStorageKey, themeName);
+  document.documentElement.setAttribute(htmlThemeAttr, themeName);
+  return true;
+}
+const ct = getCurrentTheme();
+if (ct) {
+  document.documentElement.setAttribute(htmlThemeAttr, ct);
+}
+window.addEventListener("storage", (event) => {
+  if (event.key === themeLocalStorageKey && event.newValue) {
+    document.documentElement.setAttribute(htmlThemeAttr, event.newValue);
+  }
+});
+var __create$2 = Object.create;
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
+var __knownSymbol$2 = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
+var __typeError$2 = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __name$2 = (target, value) => __defProp$2(target, "name", { value, configurable: true });
+var __decoratorStart$2 = (base) => [, , , __create$2(base?.[__knownSymbol$2("metadata")] ?? null)];
+var __decoratorStrings$2 = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn$2 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$2("Function expected") : fn;
+var __decoratorContext$2 = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$2[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$2("Already initialized") : fns.push(__expectFn$2(fn || null)) });
+var __decoratorMetadata$2 = (array, target) => __defNormalProp$2(target, __knownSymbol$2("metadata"), array[3]);
+var __runInitializers$2 = (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$2 = (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$2[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$2(k < 4 ? target : { get [name]() {
+    return __privateGet$2(this, extra);
+  }, set [name](x) {
+    return __privateSet$2(this, extra, x);
+  } }, name));
+  k ? p && k < 4 && __name$2(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name$2(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext$2(k, name, done = {}, array[3], extraInitializers);
+    if (k) {
+      ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn$2(target, x) : (x) => name in x };
+      if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet$2 : __privateMethod$2)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
+      if (k > 2) access.set = p ? (x, y) => __privateSet$2(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$2(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
+    else if (typeof it !== "object" || it === null) __typeError$2("Object expected");
+    else __expectFn$2(fn = it.get) && (desc.get = fn), __expectFn$2(fn = it.set) && (desc.set = fn), __expectFn$2(fn = it.init) && initializers.unshift(fn);
+  }
+  return k || __decoratorMetadata$2(array, target), desc && __defProp$2(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var __accessCheck$2 = (obj, member, msg) => member.has(obj) || __typeError$2("Cannot " + msg);
+var __privateIn$2 = (member, obj) => Object(obj) !== obj ? __typeError$2('Cannot use the "in" operator on this value') : member.has(obj);
+var __privateGet$2 = (obj, member, getter) => (__accessCheck$2(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+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";
+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-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$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) {
+  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 ?? "";
+  }
+  _corner_set() {
+    this.shadowRoot.adoptedStyleSheets = this.corner ? [baseStyle, styleSheet$1, cornerStyleSheet$1] : [baseStyle, styleSheet$1];
+  }
+}
+_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);
+var __create$1 = Object.create;
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
+var __knownSymbol$1 = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
+var __typeError$1 = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __name$1 = (target, value) => __defProp$1(target, "name", { value, configurable: true });
+var __decoratorStart$1 = (base) => [, , , __create$1(base?.[__knownSymbol$1("metadata")] ?? null)];
+var __decoratorStrings$1 = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn$1 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$1("Function expected") : fn;
+var __decoratorContext$1 = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$1[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$1("Already initialized") : fns.push(__expectFn$1(fn || null)) });
+var __decoratorMetadata$1 = (array, target) => __defNormalProp$1(target, __knownSymbol$1("metadata"), array[3]);
+var __runInitializers$1 = (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$1 = (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$1[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$1(k < 4 ? target : { get [name]() {
+    return __privateGet$1(this, extra);
+  }, set [name](x) {
+    return __privateSet$1(this, extra, x);
+  } }, name));
+  k ? p && k < 4 && __name$1(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name$1(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext$1(k, name, done = {}, array[3], extraInitializers);
+    if (k) {
+      ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn$1(target, x) : (x) => name in x };
+      if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet$1 : __privateMethod$1)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
+      if (k > 2) access.set = p ? (x, y) => __privateSet$1(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$1(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
+    else if (typeof it !== "object" || it === null) __typeError$1("Object expected");
+    else __expectFn$1(fn = it.get) && (desc.get = fn), __expectFn$1(fn = it.set) && (desc.set = fn), __expectFn$1(fn = it.init) && initializers.unshift(fn);
+  }
+  return k || __decoratorMetadata$1(array, target), desc && __defProp$1(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var __accessCheck$1 = (obj, member, msg) => member.has(obj) || __typeError$1("Cannot " + msg);
+var __privateIn$1 = (member, obj) => Object(obj) !== obj ? __typeError$1('Cannot use the "in" operator on this value') : member.has(obj);
+var __privateGet$1 = (obj, member, getter) => (__accessCheck$1(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+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({
+  ":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;
+    `,
+  [`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;
+    `
+});
+const mutableAttributes$1 = ["corner"];
+_CloseBtn_decorators = [defineElement({ tagName: tagName$1, mutableAttributes: mutableAttributes$1 })];
+class CloseBtn extends (_a$1 = HTMLElement, _corner_dec = [boolAttr], _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>";
+  }
+  // #region 属性
+  _corner_set() {
+    this.shadowRoot.adoptedStyleSheets = this.corner ? [baseStyle, styleSheet, cornerStyleSheet] : [baseStyle, styleSheet];
+  }
+  // #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 = {};
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __decoratorStart = (base) => [, , , __create(base?.[__knownSymbol("metadata")] ?? null)];
+var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
+var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
+var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
+var __runInitializers = (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 = (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[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(k < 4 ? target : { get [name]() {
+    return __privateGet(this, extra);
+  }, set [name](x) {
+    return __privateSet(this, extra, x);
+  } }, name));
+  k ? p && k < 4 && __name(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
+    if (k) {
+      ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn(target, x) : (x) => name in x };
+      if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
+      if (k > 2) access.set = p ? (x, y) => __privateSet(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(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
+    else if (typeof it !== "object" || it === null) __typeError("Object expected");
+    else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
+  }
+  return k || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+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) {
+  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;
+    }
+    return false;
+  }
+  // #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 = "";
+    }
+  }
+  // #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);
+  }
+  if (cache instanceof HTMLImageElement) {
+    return this.setImg(cache.src);
+  }
+  return false;
+};
+showUnicode_fn = function(icon) {
+  this.shadowRoot.textContent = icon;
+};
+_icon = /* @__PURE__ */ new WeakMap();
+__decorateElement(_init, 4, "icon", _icon_dec, Icon, _icon);
+Icon = __decorateElement(_init, 0, "Icon", _Icon_decorators, Icon);
+__runInitializers(_init, 1, Icon);
+export {
+  Badge,
+  CenterHelper,
+  CloseBtn,
+  CornerHelper,
+  GT,
+  Icon,
+  allThemes,
+  attachBorderAttributeName,
+  tagName$2 as badgeTagName,
+  baseStyle,
+  boolAttr,
+  borders,
+  tagName$1 as closeTagName,
+  createStyleSheet,
+  createText,
+  createTxtBtn,
+  debounce,
+  defineElement,
+  generateId,
+  getCurrentTheme,
+  getElementRules,
+  getSnakeCaseName,
+  globalTexts,
+  gzmFrame,
+  gzmHeader,
+  htmlThemeAttr,
+  iconCache,
+  tagName as iconTagName,
+  intAttr,
+  isLeftCorner,
+  isTopCorner,
+  isTxtBtn,
+  makeCorner,
+  saAttr,
+  setCurrentTheme,
+  strAttr,
+  utilityStyle,
+  xy
+};
+//# sourceMappingURL=ui-basic.es.js.map