@mantou/gem 1.6.9 → 1.6.10

package/dist/gem.es.js

@@ -64,12 +64,12 @@ var Gem = /* @__PURE__ */ Object.freeze({
   get history() {
     return history;
   },
-  get basePathStore() {
-    return basePathStore;
-  },
   get titleStore() {
     return titleStore;
   },
+  get basePathStore() {
+    return basePathStore;
+  },
   get html() {
     return html;
   },
@@ -1167,7 +1167,7 @@ function raw(arr, ...args) {
 function css(arr, ...args) {
   return raw(arr, ...args);
 }
-const SheetToken = Symbol("sheet token");
+const SheetToken = Symbol.for("gem@sheetToken");
 let useNativeCSSStyleSheet = true;
 let CSSStyleSheet = window.CSSStyleSheet;
 try {
@@ -2027,10 +2027,9 @@ function customElement(name) {
     nativeDefineElement(name, cls);
   };
 }
-const history = window.history;
-const location$1 = window.location;
-const pushState = history.pushState.bind(history);
-const replaceState = history.replaceState.bind(history);
+const nativeHistory = window.history;
+const nativePushState = nativeHistory.pushState.bind(nativeHistory);
+const nativeReplaceState = nativeHistory.replaceState.bind(nativeHistory);
 let key = 0;
 const getKey = () => `${performance.now()}-${++key}`;
 const store = createStore({
@@ -2053,26 +2052,26 @@ function validData({ $key, $hasCloseHandle, $hasOpenHandle, $hasShouldCloseHandl
     throw new GemError("`$hasShouldCloseHandle` is not allowed");
 }
 function getUrlbarPath(internalPath) {
-  return history.basePath ? history.basePath + internalPath : internalPath;
+  return gemHistory.basePath ? gemHistory.basePath + internalPath : internalPath;
 }
 function getInternalPath(urlbarPath) {
-  if (urlbarPath === history.basePath)
+  if (urlbarPath === gemHistory.basePath)
     return "/";
-  return urlbarPath.replace(new RegExp(`^${history.basePath}/`), "/");
+  return urlbarPath.replace(new RegExp(`^${gemHistory.basePath}/`), "/");
 }
-function initParams(params) {
+function normalizeParams(params) {
   const current = paramsMap.get(store.$key) || {};
-  const path = params.path ? absoluteLocation(current.path, params.path) : getInternalPath(location$1.pathname);
-  const query = new QueryString(params.query || (params.path ? "" : location$1.search));
+  const path = params.path ? absoluteLocation(current.path, params.path) : getInternalPath(location.pathname);
+  const query = new QueryString(params.query || (params.path ? "" : location.search));
   const pathChanged = params.path && params.path !== current.path || params.query && String(params.query) !== String(current.query);
   const title = params.title || (pathChanged ? "" : document.title);
   const statusChanged = params.close || params.data || params.open || params.shouldClose;
-  const hash = params.hash || (!pathChanged && statusChanged ? decodeURIComponent(location$1.hash) : "");
+  const hash = params.hash || (!pathChanged && statusChanged ? decodeURIComponent(location.hash) : "");
   return __spreadProps(__spreadValues({}, params), { title, path, query, hash });
 }
-function updateHistory(type, p) {
+function updateHistory(p, native) {
   validData(p.data);
-  const params = initParams(p);
+  const params = normalizeParams(p);
   const { title, path, query, hash, close, open: open2, shouldClose, data } = params;
   const state2 = __spreadValues({
     $hasCloseHandle: !!close,
@@ -2083,162 +2082,158 @@ function updateHistory(type, p) {
   paramsMap.set(state2.$key, params);
   updateStore(cleanObject(store), state2);
   const url = getUrlbarPath(path) + new QueryString(query) + hash;
-  const prevHave = decodeURIComponent(location$1.hash);
-  (type === "push" ? pushState : replaceState)(state2, title, url);
-  if (prevHave !== hash)
+  const prevHash = decodeURIComponent(location.hash);
+  native(state2, title, url);
+  if (prevHash !== hash)
     window.dispatchEvent(new CustomEvent("hashchange"));
 }
-function updateHistoryByNative(type, data, title, originUrl) {
+function updateHistoryByNative(data, title, originUrl, native) {
   validData(data);
   const state2 = __spreadValues({
     $key: getKey()
   }, data || {});
-  const { pathname, search, hash } = new URL(originUrl, location$1.origin + location$1.pathname);
-  const params = initParams({ path: pathname, query: new QueryString(search), hash, title, data });
+  const { pathname, search, hash } = new URL(originUrl, location.origin + location.pathname);
+  const params = normalizeParams({ path: pathname, query: new QueryString(search), hash, title, data });
   paramsMap.set(state2.$key, params);
   updateStore(cleanObject(store), state2);
   const url = getUrlbarPath(pathname) + params.query + hash;
-  const prevHash = location$1.hash;
-  (type === "push" ? pushState : replaceState)(state2, title, url);
+  const prevHash = location.hash;
+  native(state2, title, url);
   if (prevHash !== hash)
     window.dispatchEvent(new CustomEvent("hashchange"));
 }
-const basePathStore = createStore({
+const gemBasePathStore = createStore({
   basePath: ""
 });
-window.addEventListener("hashchange", ({ isTrusted }) => {
-  if (isTrusted) {
-    history.replace({ hash: decodeURIComponent(location$1.hash) });
+class GemHistory {
+  get store() {
+    return store;
   }
-});
-Object.defineProperties(history, {
-  basePath: {
-    get() {
-      return basePathStore.basePath;
-    },
-    set(basePath) {
-      updateStore(basePathStore, { basePath });
-      Object.assign(paramsMap.get(store.$key), { path: getInternalPath(location$1.pathname) });
-    }
-  },
-  getParams: {
-    value: function() {
-      return paramsMap.get(store.$key);
-    }
-  },
-  updateParams: {
-    value: function(params) {
-      Object.assign(paramsMap.get(store.$key), params);
-      updateStore(store, {});
-    }
-  },
-  store: {
-    value: store
-  },
-  push: {
-    value: function(params) {
-      history.pushState(params, "");
-    }
-  },
-  pushIgnoreCloseHandle: {
-    value: function(params) {
-      var _a2, _b;
-      if (store.$hasCloseHandle) {
-        (_b = (_a2 = paramsMap.get(store.$key)) == null ? void 0 : _a2.close) == null ? void 0 : _b.call(_a2);
-        history.replace(params);
-      } else {
-        history.push(params);
-      }
-    }
-  },
-  replace: {
-    value: function(params) {
-      updateHistory("replace", params);
-    }
+  get basePath() {
+    return gemBasePathStore.basePath;
   }
-});
-history.pushState = function(data, title, path) {
-  if (path) {
-    updateHistoryByNative("push", data, title, path);
-  } else {
-    updateHistory("push", data);
+  set basePath(basePath) {
+    updateStore(gemBasePathStore, { basePath });
+    Object.assign(paramsMap.get(store.$key), { path: getInternalPath(location.pathname) });
   }
-};
-history.replaceState = function(data, title, path) {
-  updateHistoryByNative("replace", data, title, path);
-};
-if (!history.state) {
-  const { pathname, search, hash } = location$1;
-  history.replace({ path: pathname, query: search, hash });
-} else if (history.state.$hasCloseHandle) {
-  updateStore(store, history.state);
-  const params = initParams({ title: document.title });
-  paramsMap.set(store.$key, params);
-  history.back();
-} else {
-  const params = initParams({ title: document.title, hash: location$1.hash });
-  updateStore(store, __spreadValues({
-    $key: getKey()
-  }, history.state || {}));
-  paramsMap.set(store.$key, params);
-}
-const titleStore = createStore({ title: "" });
-connect(titleStore, () => {
-  const params = paramsMap.get(store.$key);
-  if (params) {
-    params.title = titleStore.title;
+  getParams() {
+    return paramsMap.get(store.$key);
   }
-});
-connect(store, () => {
-  const { title } = history.getParams();
-  if (title !== titleStore.title) {
-    updateStore(titleStore, { title });
+  updateParams(params) {
+    Object.assign(paramsMap.get(store.$key), params);
+    updateStore(store, {});
   }
-});
-let navigating = false;
-window.addEventListener("popstate", (event) => {
-  var _a2, _b;
-  const newState = event.state;
-  if (!(newState == null ? void 0 : newState.$key)) {
-    return;
+  push(params) {
+    updateHistory(params, nativePushState);
   }
-  if (navigating) {
-    navigating = false;
-    return;
+  replace(params) {
+    updateHistory(params, nativeReplaceState);
   }
-  if (!paramsMap.has(newState.$key)) {
-    const { pathname, search, hash } = location$1;
-    paramsMap.set(newState.$key, {
-      path: pathname,
-      query: new QueryString(search),
-      hash,
-      title: document.title,
-      data: newState
-    });
+  pushIgnoreCloseHandle(params) {
+    var _a2, _b;
+    if (store.$hasCloseHandle) {
+      (_b = (_a2 = paramsMap.get(store.$key)) == null ? void 0 : _a2.close) == null ? void 0 : _b.call(_a2);
+      this.replace(params);
+    } else {
+      this.push(params);
+    }
+  }
+  forward() {
+    nativeHistory.forward();
   }
-  const prevState = store;
-  if (parseFloat(newState.$key) > parseFloat(prevState.$key) && newState.$hasOpenHandle) {
-    (_b = (_a2 = paramsMap.get(newState.$key)) == null ? void 0 : _a2.open) == null ? void 0 : _b.call(_a2);
-  } else if (prevState.$hasCloseHandle) {
-    const prevParams = paramsMap.get(prevState.$key);
-    const closeHandle = prevParams == null ? void 0 : prevParams.close;
-    const shouldCloseHandle = prevParams == null ? void 0 : prevParams.shouldClose;
-    const notAllowClose = shouldCloseHandle && !shouldCloseHandle();
-    if (notAllowClose) {
-      navigating = true;
-      history.forward();
+  back() {
+    nativeHistory.back();
+  }
+}
+const gemHistory = new GemHistory();
+const gemTitleStore = createStore({ title: "" });
+const _GEMHISTORY = { history: gemHistory, titleStore: gemTitleStore, basePathStore: gemBasePathStore };
+if (!window._GEMHISTORY) {
+  window._GEMHISTORY = _GEMHISTORY;
+  nativeHistory.pushState = function(state2, title, path) {
+    updateHistoryByNative(state2, title, path, nativePushState);
+  };
+  nativeHistory.replaceState = function(state2, title, path) {
+    updateHistoryByNative(state2, title, path, nativeReplaceState);
+  };
+  window.addEventListener("hashchange", ({ isTrusted }) => {
+    if (isTrusted) {
+      gemHistory.replace({ hash: decodeURIComponent(location.hash) });
+    }
+  });
+  if (!nativeHistory.state) {
+    const { pathname, search, hash } = location;
+    gemHistory.replace({ path: pathname, query: search, hash });
+  } else if (nativeHistory.state.$hasCloseHandle) {
+    updateStore(store, nativeHistory.state);
+    const params = normalizeParams({ title: document.title });
+    paramsMap.set(store.$key, params);
+    gemHistory.back();
+  } else {
+    const params = normalizeParams({ title: document.title, hash: location.hash });
+    updateStore(store, __spreadValues({
+      $key: getKey()
+    }, nativeHistory.state || {}));
+    paramsMap.set(store.$key, params);
+  }
+  connect(gemTitleStore, () => {
+    const params = paramsMap.get(store.$key);
+    if (params) {
+      params.title = gemTitleStore.title;
+    }
+  });
+  connect(store, () => {
+    const { title } = gemHistory.getParams();
+    if (title !== gemTitleStore.title) {
+      updateStore(gemTitleStore, { title });
+    }
+  });
+  let navigating = false;
+  window.addEventListener("popstate", (event) => {
+    var _a2, _b;
+    const newState = event.state;
+    if (!(newState == null ? void 0 : newState.$key)) {
       return;
-    } else {
-      if (closeHandle) {
-        closeHandle();
-      } else if (newState.$hasCloseHandle) {
+    }
+    if (navigating) {
+      navigating = false;
+      return;
+    }
+    if (!paramsMap.has(newState.$key)) {
+      const { pathname, search, hash } = location;
+      paramsMap.set(newState.$key, {
+        path: pathname,
+        query: new QueryString(search),
+        hash,
+        title: document.title,
+        data: newState
+      });
+    }
+    const prevState = store;
+    if (parseFloat(newState.$key) > parseFloat(prevState.$key) && newState.$hasOpenHandle) {
+      (_b = (_a2 = paramsMap.get(newState.$key)) == null ? void 0 : _a2.open) == null ? void 0 : _b.call(_a2);
+    } else if (prevState.$hasCloseHandle) {
+      const prevParams = paramsMap.get(prevState.$key);
+      const closeHandle = prevParams == null ? void 0 : prevParams.close;
+      const shouldCloseHandle = prevParams == null ? void 0 : prevParams.shouldClose;
+      const notAllowClose = shouldCloseHandle && !shouldCloseHandle();
+      if (notAllowClose) {
         navigating = true;
-        history.back();
+        gemHistory.forward();
+        return;
+      } else {
+        if (closeHandle) {
+          closeHandle();
+        } else if (newState.$hasCloseHandle) {
+          navigating = true;
+          gemHistory.back();
+        }
       }
     }
-  }
-  updateStore(cleanObject(store), newState);
-});
+    updateStore(cleanObject(store), newState);
+  });
+}
+const { history, titleStore, basePathStore } = window._GEMHISTORY;
 var __defProp$6 = Object.defineProperty;
 var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
 var __decorateClass$6 = (decorators, target, key2, kind) => {
@@ -2334,9 +2329,6 @@ let GemRouteElement = class extends GemElement {
       this.currentParams = params;
       this.setState({ content });
       this.routechange(this.currentRoute);
-      const title = route == null ? void 0 : route.title;
-      if (title)
-        updateStore(titleStore, { title });
       __privateGet2(this, _updateLocationStore).call(this);
     });
     this.routes = routes;
@@ -2353,6 +2345,9 @@ let GemRouteElement = class extends GemElement {
         history.replace({ path: redirect });
         return;
       }
+      const title = route == null ? void 0 : route.title;
+      if (title)
+        updateStore(titleStore, { title });
       const contentOrLoader = content || (getContent == null ? void 0 : getContent(params));
       if (contentOrLoader instanceof Promise) {
         this.loading(route);
@@ -2439,17 +2434,13 @@ __decorateClass$6([
   emitter
 ], GemRouteElement.prototype, "error", 2);
 GemRouteElement = __decorateClass$6([
-  connectStore(history.store),
-  customElement("gem-route")
+  connectStore(history.store)
 ], GemRouteElement);
-let GemLightRouteElement = class extends GemRouteElement {
+class GemLightRouteElement extends GemRouteElement {
   constructor(options = {}) {
     super(__spreadProps(__spreadValues({}, options), { isLight: true }));
   }
-};
-GemLightRouteElement = __decorateClass$6([
-  customElement("gem-light-route")
-], GemLightRouteElement);
+}
 var __defProp$5 = Object.defineProperty;
 var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
 var __decorateClass$5 = (decorators, target, key2, kind) => {
@@ -2510,6 +2501,7 @@ let GemLinkElement = class extends GemElement {
     this.preventDefault = (e) => {
       e.preventDefault();
     };
+    this.tabIndex = 0;
     this.addEventListener("click", this.clickHandle);
   }
   getPathInfo() {
@@ -2596,7 +2588,6 @@ __decorateClass$5([
   part
 ], GemLinkElement.prototype, "link", 2);
 GemLinkElement = __decorateClass$5([
-  customElement("gem-link"),
   connectStore(basePathStore)
 ], GemLinkElement);
 let GemActiveLinkElement = class extends GemLinkElement {
@@ -2619,9 +2610,12 @@ __decorateClass$5([
   state
 ], GemActiveLinkElement.prototype, "active", 2);
 GemActiveLinkElement = __decorateClass$5([
-  customElement("gem-active-link"),
   connectStore(history.store)
 ], GemActiveLinkElement);
+customElements.define("gem-link", GemLinkElement);
+customElements.define("gem-active-link", GemActiveLinkElement);
+customElements.define("gem-route", GemRouteElement);
+customElements.define("gem-light-route", GemLightRouteElement);
 var __defProp$4 = Object.defineProperty;
 var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
 var __decorateClass$4 = (decorators, target, key2, kind) => {
@@ -2669,10 +2663,10 @@ __decorateClass$4([
   attribute
 ], GemTitleElement.prototype, "suffix", 2);
 GemTitleElement = __decorateClass$4([
-  connectStore(titleStore),
-  customElement("gem-title")
+  connectStore(titleStore)
 ], GemTitleElement);
 connect(titleStore, GemTitleElement.updateTitle);
+customElements.define("gem-title", GemTitleElement);
 var __defProp$3 = Object.defineProperty;
 var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
 var __decorateClass$3 = (decorators, target, key2, kind) => {
@@ -2685,7 +2679,7 @@ var __decorateClass$3 = (decorators, target, key2, kind) => {
   return result;
 };
 const eleCache = new Map();
-let GemUseElement = class extends GemElement {
+class GemUseElement extends GemElement {
   getContent() {
     const ele = this.element || (this.selector ? (this.root || document).querySelector(this.selector) : null);
     if (typeof ele === "string") {
@@ -2721,7 +2715,7 @@ let GemUseElement = class extends GemElement {
       <slot></slot>
     `;
   }
-};
+}
 __decorateClass$3([
   attribute
 ], GemUseElement.prototype, "selector", 2);
@@ -2734,9 +2728,7 @@ __decorateClass$3([
 __decorateClass$3([
   state
 ], GemUseElement.prototype, "active", 2);
-GemUseElement = __decorateClass$3([
-  customElement("gem-use")
-], GemUseElement);
+customElements.define("gem-use", GemUseElement);
 var __defProp$2 = Object.defineProperty;
 var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
 var __decorateClass$2 = (decorators, target, key2, kind) => {
@@ -2748,7 +2740,7 @@ var __decorateClass$2 = (decorators, target, key2, kind) => {
     __defProp$2(target, key2, result);
   return result;
 };
-let GemUnsafeElement = class extends GemElement {
+class GemUnsafeElement extends GemElement {
   constructor() {
     super();
     this.effect(() => {
@@ -2768,16 +2760,14 @@ let GemUnsafeElement = class extends GemElement {
   render() {
     return void 0;
   }
-};
+}
 __decorateClass$2([
   attribute
 ], GemUnsafeElement.prototype, "content", 2);
 __decorateClass$2([
   attribute
 ], GemUnsafeElement.prototype, "contentcss", 2);
-GemUnsafeElement = __decorateClass$2([
-  customElement("gem-unsafe")
-], GemUnsafeElement);
+customElements.define("gem-unsafe", GemUnsafeElement);
 var __defProp$1 = Object.defineProperty;
 var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
 var __decorateClass$1 = (decorators, target, key2, kind) => {
@@ -2790,7 +2780,7 @@ var __decorateClass$1 = (decorators, target, key2, kind) => {
   return result;
 };
 document.querySelectorAll("[data-reflect]").forEach((e) => e.remove());
-let GemReflectElement = class extends GemElement {
+class GemReflectElement extends GemElement {
   constructor() {
     super({ isLight: true });
     this.target = document.head;
@@ -2808,13 +2798,11 @@ let GemReflectElement = class extends GemElement {
       };
     }, () => [this.target]);
   }
-};
+}
 __decorateClass$1([
   property
 ], GemReflectElement.prototype, "target", 2);
-GemReflectElement = __decorateClass$1([
-  customElement("gem-reflect")
-], GemReflectElement);
+customElements.define("gem-reflect", GemReflectElement);
 const open = Symbol("open mark");
 function createModalClass(options) {
   var _a2;
@@ -2875,7 +2863,7 @@ var __decorateClass = (decorators, target, key2, kind) => {
     __defProp2(target, key2, result);
   return result;
 };
-let DialogBaseElement = (_a = class extends GemElement {
+let GemDialogBaseElement = (_a = class extends GemElement {
   constructor() {
     super();
     __privateAdd(this, _nextSibling, void 0);
@@ -2933,13 +2921,13 @@ let DialogBaseElement = (_a = class extends GemElement {
 }, _nextSibling = new WeakMap(), _parentElement = new WeakMap(), _inertStore = new WeakMap(), _a);
 __decorateClass([
   attribute
-], DialogBaseElement.prototype, "label", 2);
+], GemDialogBaseElement.prototype, "label", 2);
 __decorateClass([
   state
-], DialogBaseElement.prototype, "opened", 2);
-DialogBaseElement = __decorateClass([
+], GemDialogBaseElement.prototype, "opened", 2);
+GemDialogBaseElement = __decorateClass([
   connectStore(history.store)
-], DialogBaseElement);
+], GemDialogBaseElement);
 const themeStoreMap = new WeakMap();
 function getThemeStore(theme) {
   return themeStoreMap.get(theme);
@@ -3269,4 +3257,4 @@ const version = "1.6.5";
 if (window.__GEM_DEVTOOLS__HOOK__) {
   Object.assign(window.__GEM_DEVTOOLS__HOOK__, __spreadValues({}, Gem));
 }
-export { DialogBaseElement, GemActiveLinkElement, GemElement, GemError, GemLightRouteElement, GemLinkElement, GemReflectElement, GemRouteElement, GemTitleElement, GemUnsafeElement, GemUseElement, I18n, LinkedList, PropProxyMap, QueryString, SVGTemplateResult, SheetToken, StoreListenerMap, TemplateResult, absoluteLocation, addMicrotask, addMicrotaskToStack, adoptedStyle, attribute, basePathStore, boolattribute, camelToKebabCase, classMap, cleanObject, connect, connectStore, createCSSSheet, createHistoryParams, createModalClass, createPath, createStore, createStoreSet, createTheme, css, customElement, defineAttribute, defineCSSState, defineProperty, defineRef, del, directive, disconnect, emitter, get, getThemeProp, getThemeStore, globalemitter, guard, history, html, ifDefined, isArrayChange, kebabToCamelCase, matchPath, mediaQuery, nativeDefineElement, numattribute, part, partMap, post, property, put, randomStr, raw, refobject, removeItems, render, repeat, request, rootElement, slot, splice, state, styleMap, styled, svg, titleStore, updateStore, updateTheme, useNativeCSSStyleSheet, version };
+export { GemActiveLinkElement, GemDialogBaseElement, GemElement, GemError, GemLightRouteElement, GemLinkElement, GemReflectElement, GemRouteElement, GemTitleElement, GemUnsafeElement, GemUseElement, I18n, LinkedList, PropProxyMap, QueryString, SVGTemplateResult, SheetToken, StoreListenerMap, TemplateResult, absoluteLocation, addMicrotask, addMicrotaskToStack, adoptedStyle, attribute, basePathStore, boolattribute, camelToKebabCase, classMap, cleanObject, connect, connectStore, createCSSSheet, createHistoryParams, createModalClass, createPath, createStore, createStoreSet, createTheme, css, customElement, defineAttribute, defineCSSState, defineProperty, defineRef, del, directive, disconnect, emitter, get, getThemeProp, getThemeStore, globalemitter, guard, history, html, ifDefined, isArrayChange, kebabToCamelCase, matchPath, mediaQuery, nativeDefineElement, numattribute, part, partMap, post, property, put, randomStr, raw, refobject, removeItems, render, repeat, request, rootElement, slot, splice, state, styleMap, styled, svg, titleStore, updateStore, updateTheme, useNativeCSSStyleSheet, version };