@gct-paas/core-web 0.1.4-dev.10 → 0.1.4-dev.12

package/es/components/assets-svg-icon/assets-svg-icon.mjs

@@ -1,238 +1,167 @@
-import { defineComponent, createVNode, getCurrentInstance, ref, onMounted, nextTick, onUnmounted, watch, computed } from 'vue';
-import { useNamespace } from '@gct-paas/core';
-import { ioniconContent, getSvgContent } from './request.mjs';
-import { isRTL, getSrc } from './utils.mjs';
+import { getSrc, isRTL } from "./utils.mjs";
+import { getSvgContent, ioniconContent } from "./request.mjs";
 import './assets-svg-icon.css';/* empty css                      */
-
+import { computed, createVNode, defineComponent, getCurrentInstance, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
+import { useNamespace } from "@gct-paas/core";
+//#region src/components/assets-svg-icon/assets-svg-icon.tsx
 /**
- * Create color classes for the icon.
- * @param color - The color of the icon.
- * @returns The color classes for the icon.
- */
-const createColorClasses = color => {
-  return color ? {
-    'ion-color': true,
-    [`ion-color-${color}`]: true
-  } : null;
+* Create color classes for the icon.
+* @param color - The color of the icon.
+* @returns The color classes for the icon.
+*/
+var createColorClasses = (color) => {
+	return color ? {
+		"ion-color": true,
+		[`ion-color-${color}`]: true
+	} : null;
 };
-
 /**
- * SVG图标组件 - 简化版本 (仅浏览器环境)
- *
- * 此组件是基于Stencil ion-icon组件简化的Vue实现，
- * 专门用于浏览器环境，仅支持通过src属性加载SVG。
- *
- * ## 功能
- * - 支持通过直接URL加载SVG图标
- * - 支持懒加载
- * - 支持RTL文本方向自动翻转
- * - 支持颜色和大小变化
- * - 支持SVG内容安全检查
- *
- * ## 使用示例
- *
- * // 使用 src 属性
- * <SvgIcon src="/path/to/icon.svg" />
- *
- * // 设置大小和颜色
- * <SvgIcon src="/path/to/icon.svg" size="large" color="primary" />
- *
- * // RTL 支持
- * <SvgIcon src="/path/to/icon.svg" flipRtl={true} />
- *
- * // 懒加载
- * <SvgIcon src="/path/to/icon.svg" lazy={true} />
- *
- * // 禁用 SVG 清理
- * <SvgIcon src="/path/to/icon.svg" sanitize={false} />
- */
-const AssetsSvgIcon = /* @__PURE__ */ defineComponent({
-  name: 'AssetsSvgIcon',
-  props: {
-    /**
-     * The color to use for the background of the item.
-     */
-    color: {
-      type: String
-    },
-    /**
-     * Specifies whether the icon should horizontally flip when `dir` is `"rtl"`.
-     */
-    flipRtl: {
-      type: Boolean
-    },
-    /**
-     * Specifies the exact `src` of an SVG file to use.
-     */
-    src: {
-      type: String,
-      required: true
-    },
-    /**
-     * The size of the icon.
-     * Available options are: `"small"` and `"large"`.
-     */
-    size: {
-      type: String
-    },
-    /**
-     * If enabled, ion-icon will be loaded lazily when it's visible in the viewport.
-     * Default, `false`.
-     */
-    lazy: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * When set to `false`, SVG content that is HTTP fetched will not be checked
-     * if the response SVG content has any `<script>` elements, or any attributes
-     * that start with `on`, such as `onclick`.
-     * @default true
-     */
-    sanitize: {
-      type: Boolean,
-      default: true
-    }
-  },
-  setup(props) {
-    const ns = useNamespace('assets-svg-icon');
-    const instance = getCurrentInstance();
-
-    // Private state
-    let io;
-    const didLoadIcon = ref(false);
-
-    // Reactive state
-    const svgContent = ref(undefined);
-    const isVisible = ref(false);
-
-    /**
-     * Wait until the icon is visible in the viewport.
-     * @param el - The element to observe.
-     * @param rootMargin - The root margin of the observer.
-     * @param cb - The callback to call when the element is visible.
-     */
-    const waitUntilVisible = (el, rootMargin, cb) => {
-      /**
-       * IntersectionObserver is a browser API that allows you to observe
-       * the visibility of an element relative to a root element. It is
-       * supported in all modern browsers, except IE and when server-side
-       * rendering.
-       */
-      const hasIntersectionObserverSupport = Boolean(typeof window !== 'undefined' && props.lazy && window.IntersectionObserver);
-
-      /**
-       * browser doesn't support IntersectionObserver
-       * so just fallback to always show it
-       */
-      if (!hasIntersectionObserverSupport) {
-        return cb();
-      }
-      const intersectionObserver = io = new window.IntersectionObserver(data => {
-        if (data[0]?.isIntersecting) {
-          intersectionObserver.disconnect();
-          io = undefined;
-          cb();
-        }
-      }, {
-        rootMargin
-      });
-      intersectionObserver.observe(el);
-    };
-
-    /**
-     * Load the icon using only src URL
-     */
-    const loadIcon = () => {
-      if (typeof window !== 'undefined' && isVisible.value && props.src) {
-        const url = getSrc(props.src);
-        if (url) {
-          if (ioniconContent.has(url)) {
-            // sync if it's already loaded
-            svgContent.value = ioniconContent.get(url);
-          } else {
-            // async if it hasn't been loaded
-            getSvgContent(url, props.sanitize).then(() => {
-              svgContent.value = ioniconContent.get(url);
-            });
-          }
-          didLoadIcon.value = true;
-        }
-      }
-    };
-
-    // Component lifecycle hooks
-    onMounted(() => {
-      const el = instance?.vnode.el;
-      if (el) {
-        /**
-         * purposely do not return the promise here because loading
-         * the svg file should not hold up loading the app
-         * only load the svg if it's visible
-         */
-        waitUntilVisible(el, '50px', () => {
-          isVisible.value = true;
-          loadIcon();
-        });
-      }
-      nextTick(() => {
-        if (!didLoadIcon.value) {
-          loadIcon();
-        }
-      });
-    });
-    onUnmounted(() => {
-      if (io) {
-        io.disconnect();
-        io = undefined;
-      }
-    });
-
-    // Watch for src prop changes
-    watch(() => props.src, () => {
-      loadIcon();
-    });
-    const classes = computed(() => {
-      const {
-        flipRtl,
-        size,
-        color
-      } = props;
-      const el = instance?.vnode.el;
-
-      /**
-       * if flipRtl is true, the icon should change direction when `dir` changes
-       */
-      const shouldBeFlippable = flipRtl;
-      return {
-        ...createColorClasses(color),
-        [`icon-${size}`]: !!size,
-        'flip-rtl': shouldBeFlippable,
-        'icon-rtl': shouldBeFlippable && isRTL(el),
-        [ns.b()]: true
-      };
-    });
-    return {
-      ns,
-      svgContent,
-      classes
-    };
-  },
-  render() {
-    const {
-      svgContent,
-      classes
-    } = this;
-    return createVNode("div", {
-      "role": "img",
-      "class": classes
-    }, [typeof window !== 'undefined' && svgContent ? createVNode("div", {
-      "class": "icon-inner",
-      "innerHTML": svgContent
-    }, null) : createVNode("div", {
-      "class": "icon-inner"
-    }, null)]);
-  }
+* SVG图标组件 - 简化版本 (仅浏览器环境)
+*
+* 此组件是基于Stencil ion-icon组件简化的Vue实现，
+* 专门用于浏览器环境，仅支持通过src属性加载SVG。
+*
+* ## 功能
+* - 支持通过直接URL加载SVG图标
+* - 支持懒加载
+* - 支持RTL文本方向自动翻转
+* - 支持颜色和大小变化
+* - 支持SVG内容安全检查
+*
+* ## 使用示例
+*
+* // 使用 src 属性
+* <SvgIcon src="/path/to/icon.svg" />
+*
+* // 设置大小和颜色
+* <SvgIcon src="/path/to/icon.svg" size="large" color="primary" />
+*
+* // RTL 支持
+* <SvgIcon src="/path/to/icon.svg" flipRtl={true} />
+*
+* // 懒加载
+* <SvgIcon src="/path/to/icon.svg" lazy={true} />
+*
+* // 禁用 SVG 清理
+* <SvgIcon src="/path/to/icon.svg" sanitize={false} />
+*/
+var AssetsSvgIcon = /* @__PURE__ */ defineComponent({
+	name: "AssetsSvgIcon",
+	props: {
+		color: { type: String },
+		flipRtl: { type: Boolean },
+		src: {
+			type: String,
+			required: true
+		},
+		size: { type: String },
+		lazy: {
+			type: Boolean,
+			default: false
+		},
+		sanitize: {
+			type: Boolean,
+			default: true
+		}
+	},
+	setup(props) {
+		const ns = useNamespace("assets-svg-icon");
+		const instance = getCurrentInstance();
+		let io;
+		const didLoadIcon = ref(false);
+		const svgContent = ref(void 0);
+		const isVisible = ref(false);
+		/**
+		* Wait until the icon is visible in the viewport.
+		* @param el - The element to observe.
+		* @param rootMargin - The root margin of the observer.
+		* @param cb - The callback to call when the element is visible.
+		*/
+		const waitUntilVisible = (el, rootMargin, cb) => {
+			/**
+			* browser doesn't support IntersectionObserver
+			* so just fallback to always show it
+			*/
+			if (!Boolean(typeof window !== "undefined" && props.lazy && window.IntersectionObserver)) return cb();
+			const intersectionObserver = io = new window.IntersectionObserver((data) => {
+				if (data[0]?.isIntersecting) {
+					intersectionObserver.disconnect();
+					io = void 0;
+					cb();
+				}
+			}, { rootMargin });
+			intersectionObserver.observe(el);
+		};
+		/**
+		* Load the icon using only src URL
+		*/
+		const loadIcon = () => {
+			if (typeof window !== "undefined" && isVisible.value && props.src) {
+				const url = getSrc(props.src);
+				if (url) {
+					if (ioniconContent.has(url)) svgContent.value = ioniconContent.get(url);
+					else getSvgContent(url, props.sanitize).then(() => {
+						svgContent.value = ioniconContent.get(url);
+					});
+					didLoadIcon.value = true;
+				}
+			}
+		};
+		onMounted(() => {
+			const el = instance?.vnode.el;
+			if (el)
+ /**
+			* purposely do not return the promise here because loading
+			* the svg file should not hold up loading the app
+			* only load the svg if it's visible
+			*/
+			waitUntilVisible(el, "50px", () => {
+				isVisible.value = true;
+				loadIcon();
+			});
+			nextTick(() => {
+				if (!didLoadIcon.value) loadIcon();
+			});
+		});
+		onUnmounted(() => {
+			if (io) {
+				io.disconnect();
+				io = void 0;
+			}
+		});
+		watch(() => props.src, () => {
+			loadIcon();
+		});
+		return {
+			ns,
+			svgContent,
+			classes: computed(() => {
+				const { flipRtl, size, color } = props;
+				const el = instance?.vnode.el;
+				/**
+				* if flipRtl is true, the icon should change direction when `dir` changes
+				*/
+				const shouldBeFlippable = flipRtl;
+				return {
+					...createColorClasses(color),
+					[`icon-${size}`]: !!size,
+					"flip-rtl": shouldBeFlippable,
+					"icon-rtl": shouldBeFlippable && isRTL(el),
+					[ns.b()]: true
+				};
+			})
+		};
+	},
+	render() {
+		const { svgContent, classes } = this;
+		return createVNode("div", {
+			"role": "img",
+			"class": classes
+		}, [typeof window !== "undefined" && svgContent ? createVNode("div", {
+			"class": "icon-inner",
+			"innerHTML": svgContent
+		}, null) : createVNode("div", { "class": "icon-inner" }, null)]);
+	}
 });
-
+//#endregion
 export { AssetsSvgIcon };

package/es/components/assets-svg-icon/request.mjs

@@ -1,51 +1,68 @@
-import { isSvgDataUrl, isEncodedDataUrl, validateContent } from './validate.mjs';
-
-const ioniconContent = /* @__PURE__ */ new Map();
-const requests = /* @__PURE__ */ new Map();
-let parser;
+import { isEncodedDataUrl, isSvgDataUrl, validateContent } from "./validate.mjs";
+//#region src/components/assets-svg-icon/request.ts
+var ioniconContent = /* @__PURE__ */ new Map();
+var requests = /* @__PURE__ */ new Map();
+var parser;
+/**
+* Safely fallback to an empty svg
+*/
 function safeFallback(url) {
-  const svg = "";
-  ioniconContent.set(url, svg);
-  return svg;
+	const svg = "";
+	ioniconContent.set(url, svg);
+	return svg;
 }
-const getSvgContent = (url, sanitize) => {
-  const req = requests.get(url);
-  if (req) {
-    return req;
-  }
-  if (typeof fetch !== "undefined" && typeof document !== "undefined") {
-    if (isSvgDataUrl(url) && isEncodedDataUrl(url)) {
-      return Promise.resolve(getSvgByUrl(url));
-    }
-    return fetchSvg(url, sanitize);
-  }
-  return Promise.resolve(safeFallback(url));
+var getSvgContent = (url, sanitize) => {
+	/**
+	* See if we already have a request for this url
+	*/
+	const req = requests.get(url);
+	if (req) return req;
+	if (typeof fetch !== "undefined" && typeof document !== "undefined") {
+		/**
+		* If the url is a data url of an svg, then try to parse it
+		* with the DOMParser. This works with content security policies enabled.
+		*/
+		if (isSvgDataUrl(url) && isEncodedDataUrl(url)) return Promise.resolve(getSvgByUrl(url));
+		return fetchSvg(url, sanitize);
+	}
+	return Promise.resolve(safeFallback(url));
 };
 function getSvgByUrl(url) {
-  if (!parser) {
-    parser = new DOMParser();
-  }
-  const doc = parser.parseFromString(url, "text/html");
-  const svg = doc.querySelector("svg");
-  if (svg) {
-    ioniconContent.set(url, svg.outerHTML);
-    return svg.outerHTML;
-  }
-  throw new Error(`Could not parse svg from ${url}`);
+	if (!parser)
+ /**
+	* Create an instance of the DOM parser. This creates a single
+	* parser instance for the entire app, which is more efficient.
+	*/
+	parser = new DOMParser();
+	const svg = parser.parseFromString(url, "text/html").querySelector("svg");
+	if (svg) {
+		ioniconContent.set(url, svg.outerHTML);
+		return svg.outerHTML;
+	}
+	throw new Error(`Could not parse svg from ${url}`);
 }
 function fetchSvg(url, sanitize) {
-  const req = fetch(url).then((rsp) => {
-    return rsp.text().then((svgContent) => {
-      if (svgContent && sanitize !== false) {
-        svgContent = validateContent(svgContent);
-      }
-      const svg = svgContent || "";
-      ioniconContent.set(url, svg);
-      return svg;
-    }).catch(() => safeFallback(url));
-  }).catch(() => safeFallback(url));
-  requests.set(url, req);
-  return req;
+	/**
+	* We don't already have a request
+	*/
+	const req = fetch(url).then((rsp) => {
+		/**
+		* When fetching from a file:// URL, some browsers return
+		* a 0 status code even when the request succeeds so don't
+		* rely on rsp.ok as the only signal of success.
+		*/
+		return rsp.text().then((svgContent) => {
+			if (svgContent && sanitize !== false) svgContent = validateContent(svgContent);
+			const svg = svgContent || "";
+			ioniconContent.set(url, svg);
+			return svg;
+		}).catch(() => safeFallback(url));
+	}).catch(() => safeFallback(url));
+	/**
+	* Cache for the same requests
+	*/
+	requests.set(url, req);
+	return req;
 }
-
+//#endregion
 export { getSvgContent, ioniconContent };

package/es/components/assets-svg-icon/utils.mjs

@@ -1,21 +1,23 @@
-const isStr = (val) => typeof val === "string";
-const isSrc = (str) => str.length > 0 && /(\/|\.)/.test(str);
-const getSrc = (src) => {
-  if (isStr(src)) {
-    src = src.trim();
-    if (isSrc(src)) {
-      return src;
-    }
-  }
-  return null;
+//#region src/components/assets-svg-icon/utils.ts
+var isStr = (val) => typeof val === "string";
+var isSrc = (str) => str.length > 0 && /(\/|\.)/.test(str);
+var getSrc = (src) => {
+	if (isStr(src)) {
+		src = src.trim();
+		if (isSrc(src)) return src;
+	}
+	return null;
 };
-const isRTL = (hostEl) => {
-  if (hostEl) {
-    if (hostEl.dir !== "") {
-      return hostEl.dir.toLowerCase() === "rtl";
-    }
-  }
-  return document?.dir.toLowerCase() === "rtl";
+/**
+* Returns `true` if the document or host element
+* has a `dir` set to `rtl`. The host value will always
+* take priority over the root document value.
+*/
+var isRTL = (hostEl) => {
+	if (hostEl) {
+		if (hostEl.dir !== "") return hostEl.dir.toLowerCase() === "rtl";
+	}
+	return document?.dir.toLowerCase() === "rtl";
 };
-
-export { getSrc, isRTL, isSrc, isStr };
+//#endregion
+export { getSrc, isRTL, isStr };

package/es/components/assets-svg-icon/validate.mjs

@@ -1,43 +1,29 @@
-import { isStr } from './utils.mjs';
-
-const validateContent = (svgContent) => {
-  const div = document.createElement("div");
-  div.innerHTML = svgContent;
-  for (let i = div.childNodes.length - 1; i >= 0; i--) {
-    if (div.childNodes[i].nodeName.toLowerCase() !== "svg") {
-      div.removeChild(div.childNodes[i]);
-    }
-  }
-  const svgElm = div.firstElementChild;
-  if (svgElm && svgElm.nodeName.toLowerCase() === "svg") {
-    const svgClass = svgElm.getAttribute("class") || "";
-    svgElm.setAttribute("class", (svgClass + " s-ion-icon").trim());
-    if (isValid(svgElm)) {
-      return div.innerHTML;
-    }
-  }
-  return "";
+import { isStr } from "./utils.mjs";
+//#region src/components/assets-svg-icon/validate.ts
+var validateContent = (svgContent) => {
+	const div = document.createElement("div");
+	div.innerHTML = svgContent;
+	for (let i = div.childNodes.length - 1; i >= 0; i--) if (div.childNodes[i].nodeName.toLowerCase() !== "svg") div.removeChild(div.childNodes[i]);
+	const svgElm = div.firstElementChild;
+	if (svgElm && svgElm.nodeName.toLowerCase() === "svg") {
+		const svgClass = svgElm.getAttribute("class") || "";
+		svgElm.setAttribute("class", (svgClass + " s-ion-icon").trim());
+		if (isValid(svgElm)) return div.innerHTML;
+	}
+	return "";
 };
-const isValid = (elm) => {
-  if (elm.nodeType === 1) {
-    if (elm.nodeName.toLowerCase() === "script") {
-      return false;
-    }
-    for (let i = 0; i < elm.attributes.length; i++) {
-      const name = elm.attributes[i].name;
-      if (isStr(name) && name.toLowerCase().indexOf("on") === 0) {
-        return false;
-      }
-    }
-    for (let i = 0; i < elm.childNodes.length; i++) {
-      if (!isValid(elm.childNodes[i])) {
-        return false;
-      }
-    }
-  }
-  return true;
+var isValid = (elm) => {
+	if (elm.nodeType === 1) {
+		if (elm.nodeName.toLowerCase() === "script") return false;
+		for (let i = 0; i < elm.attributes.length; i++) {
+			const name = elm.attributes[i].name;
+			if (isStr(name) && name.toLowerCase().indexOf("on") === 0) return false;
+		}
+		for (let i = 0; i < elm.childNodes.length; i++) if (!isValid(elm.childNodes[i])) return false;
+	}
+	return true;
 };
-const isSvgDataUrl = (url) => url.startsWith("data:image/svg+xml");
-const isEncodedDataUrl = (url) => url.indexOf(";utf8,") !== -1;
-
-export { isEncodedDataUrl, isSvgDataUrl, isValid, validateContent };
+var isSvgDataUrl = (url) => url.startsWith("data:image/svg+xml");
+var isEncodedDataUrl = (url) => url.indexOf(";utf8,") !== -1;
+//#endregion
+export { isEncodedDataUrl, isSvgDataUrl, validateContent };

package/es/components/base-button/base-button.vue.d.ts

@@ -151,17 +151,17 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
 }>> & Readonly<{
     onClick?: ((...args: any[]) => any) | undefined;
 }>, {
+    hidden: boolean;
+    size: ButtonSize;
     type: string;
     title: string;
-    loading: boolean;
-    size: ButtonSize;
+    icon: string;
     disabled: boolean;
+    loading: boolean;
     block: boolean;
-    danger: boolean;
-    icon: string;
-    hidden: boolean;
     hasIcon: boolean;
     hasText: boolean;
+    danger: boolean;
     buttonStyle: ButtonStyle;
     i18nConfig: string;
     confirm: boolean;