@gct-paas/core-web 0.1.4-dev.6 → 0.1.4-dev.8

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

@@ -0,0 +1,188 @@
+@charset "UTF-8";
+/* stylelint-disable scss/no-global-function-names */
+/* bem('block', 'element', 'modifier') => 'ibiz-block__element--modifier' */
+/**
+ * 定义 Block 块
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include b('button') {
+ *     padding: 10px;
+ *   }
+ */
+/**
+ * 定义 Element 元素
+ * @param {String|List} $element - Element 元素名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include e('text') {
+ *       color: #000;
+ *     }
+ *   }
+ *   // 或传入多个元素
+ *   @include b('button') {
+ *     @include e(('text', 'icon')) {
+ *       margin: 5px;
+ *     }
+ *   }
+ */
+/**
+ * 定义 Modifier 修饰符
+ * @param {String|List} $modifier - Modifier 修饰符名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include m('primary') {
+ *       background: blue;
+ *     }
+ *   }
+ *   // 或传入多个修饰符
+ *   @include b('button') {
+ *     @include m(('primary', 'large')) {
+ *       background: blue;
+ *       font-size: 16px;
+ *     }
+ *   }
+ */
+/**
+ * 定义状态选择器
+ * @param {String} $state - 状态名称
+ * @example
+ *   @include b('button') {
+ *     @include when('disabled') {
+ *       opacity: 0.5;
+ *     }
+ *   }
+ */
+/**
+ * 深色主题样式
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include dark('button') {
+ *     background: #333;
+ *     color: #fff;
+ *   }
+ */
+/* stylelint-disable scss/no-global-function-names */
+.gct-assets-svg-icon {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  contain: strict;
+  fill: currentcolor;
+  box-sizing: content-box !important;
+}
+.gct-assets-svg-icon .ionicon {
+  stroke: currentcolor;
+}
+.gct-assets-svg-icon .ionicon-fill-none {
+  fill: none;
+}
+.gct-assets-svg-icon .ionicon-stroke-width {
+  stroke-width: var(--ionicon-stroke-width, 32px);
+}
+.gct-assets-svg-icon .icon-inner,
+.gct-assets-svg-icon .ionicon,
+.gct-assets-svg-icon svg {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+.gct-assets-svg-icon {
+  /* Icon RTL
+   * -----------------------------------------------------------
+   */
+  /**
+   * Safari <16.4 incorrectly reports
+   * that it supports :dir(rtl) when it does not.
+   * This @supports statement lets us target
+   * WebKit browsers to apply the RTL fallback.
+   * -webkit-named-image only exists on WebKit.
+   * For WebKit browsers that do support :dir(rtl)
+   * (i.e. Safari >= 16.4) then the :dir(rtl)
+   * code farther down on the page will take
+   * effect and override this fallback.
+   */
+}
+@supports (background: -webkit-named-image(i)) {
+  .gct-assets-svg-icon.icon-rtl .icon-inner {
+    transform: scaleX(-1);
+  }
+}
+.gct-assets-svg-icon {
+  /**
+   * Fallback for browsers that support
+   * neither :host-context nor :dir.
+   * The icon will not react to dir
+   * changes, but it will at least
+   * respect the dir on component load.
+   */
+}
+.gct-assets-svg-icon.icon-rtl .icon-inner {
+  transform: scaleX(-1);
+}
+.gct-assets-svg-icon {
+  /* For Vue components, we use attribute selectors instead of :host-context */
+}
+.gct-assets-svg-icon.flip-rtl[dir=rtl] .icon-inner {
+  transform: scaleX(-1);
+}
+@supports selector(:dir(rtl)) {
+  .gct-assets-svg-icon.flip-rtl:dir(rtl) .icon-inner {
+    transform: scaleX(-1);
+  }
+  .gct-assets-svg-icon {
+    /**
+     * This is needed for WebKit otherwise the fallback
+     * will always cause the icon to be flipped if the document
+     * loads in RTL.
+     */
+  }
+  .gct-assets-svg-icon.flip-rtl:dir(ltr) .icon-inner {
+    transform: scaleX(1);
+  }
+}
+.gct-assets-svg-icon {
+  /* Icon Sizes
+   * -----------------------------------------------------------
+   */
+}
+.gct-assets-svg-icon.icon-small {
+  font-size: 1.125rem !important;
+}
+.gct-assets-svg-icon.icon-large {
+  font-size: 2rem !important;
+}
+.gct-assets-svg-icon {
+  /* Icon Colors
+   * -----------------------------------------------------------
+   */
+}
+.gct-assets-svg-icon.ion-color {
+  color: var(--ion-color-base) !important;
+}
+.gct-assets-svg-icon.ion-color-primary {
+  --ion-color-base: var(--ion-color-primary, #3880ff) !important;
+}
+.gct-assets-svg-icon.ion-color-secondary {
+  --ion-color-base: var(--ion-color-secondary, #3dc2ff) !important;
+}
+.gct-assets-svg-icon.ion-color-tertiary {
+  --ion-color-base: var(--ion-color-tertiary, #5260ff) !important;
+}
+.gct-assets-svg-icon.ion-color-success {
+  --ion-color-base: var(--ion-color-success, #2dd36f) !important;
+}
+.gct-assets-svg-icon.ion-color-warning {
+  --ion-color-base: var(--ion-color-warning, #ffc409) !important;
+}
+.gct-assets-svg-icon.ion-color-danger {
+  --ion-color-base: var(--ion-color-danger, #eb445a) !important;
+}
+.gct-assets-svg-icon.ion-color-light {
+  --ion-color-base: var(--ion-color-light, #f4f5f8) !important;
+}
+.gct-assets-svg-icon.ion-color-medium {
+  --ion-color-base: var(--ion-color-medium, #92949c) !important;
+}
+.gct-assets-svg-icon.ion-color-dark {
+  --ion-color-base: var(--ion-color-dark, #222428) !important;
+}

package/es/components/assets-svg-icon/assets-svg-icon.d.ts

@@ -0,0 +1,134 @@
+/**
+ * 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} />
+ */
+export declare const AssetsSvgIcon: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /**
+     * The color to use for the background of the item.
+     */
+    color: {
+        type: StringConstructor;
+    };
+    /**
+     * Specifies whether the icon should horizontally flip when `dir` is `"rtl"`.
+     */
+    flipRtl: {
+        type: BooleanConstructor;
+    };
+    /**
+     * Specifies the exact `src` of an SVG file to use.
+     */
+    src: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * The size of the icon.
+     * Available options are: `"small"` and `"large"`.
+     */
+    size: {
+        type: StringConstructor;
+    };
+    /**
+     * If enabled, ion-icon will be loaded lazily when it's visible in the viewport.
+     * Default, `false`.
+     */
+    lazy: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * 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: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    svgContent: import('vue').Ref<string | undefined, string | undefined>;
+    classes: import('vue').ComputedRef<{
+        [x: string]: boolean;
+        'flip-rtl': boolean;
+        'icon-rtl': boolean;
+        'ion-color'?: boolean | undefined;
+    }>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /**
+     * The color to use for the background of the item.
+     */
+    color: {
+        type: StringConstructor;
+    };
+    /**
+     * Specifies whether the icon should horizontally flip when `dir` is `"rtl"`.
+     */
+    flipRtl: {
+        type: BooleanConstructor;
+    };
+    /**
+     * Specifies the exact `src` of an SVG file to use.
+     */
+    src: {
+        type: StringConstructor;
+        required: true;
+    };
+    /**
+     * The size of the icon.
+     * Available options are: `"small"` and `"large"`.
+     */
+    size: {
+        type: StringConstructor;
+    };
+    /**
+     * If enabled, ion-icon will be loaded lazily when it's visible in the viewport.
+     * Default, `false`.
+     */
+    lazy: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * 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: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    flipRtl: boolean;
+    lazy: boolean;
+    sanitize: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

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

@@ -0,0 +1,238 @@
+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 './assets-svg-icon.css';/* empty css                      */
+
+/**
+ * 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;
+};
+
+/**
+ * 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)]);
+  }
+});
+
+export { AssetsSvgIcon };

package/es/components/assets-svg-icon/request.d.ts

@@ -0,0 +1,2 @@
+export declare const ioniconContent: Map<string, string>;
+export declare const getSvgContent: (url: string, sanitize: boolean) => Promise<string>;

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

@@ -0,0 +1,51 @@
+import { isSvgDataUrl, isEncodedDataUrl, validateContent } from './validate.mjs';
+
+const ioniconContent = /* @__PURE__ */ new Map();
+const requests = /* @__PURE__ */ new Map();
+let parser;
+function safeFallback(url) {
+  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));
+};
+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}`);
+}
+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;
+}
+
+export { getSvgContent, ioniconContent };

package/es/components/assets-svg-icon/utils.d.ts

@@ -0,0 +1,9 @@
+export declare const isStr: (val: any) => val is string;
+export declare const isSrc: (str: string) => boolean;
+export declare const getSrc: (src: string | undefined) => string | null;
+/**
+ * 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.
+ */
+export declare const isRTL: (hostEl?: Pick<HTMLElement, "dir">) => boolean;

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

@@ -0,0 +1,21 @@
+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;
+};
+const isRTL = (hostEl) => {
+  if (hostEl) {
+    if (hostEl.dir !== "") {
+      return hostEl.dir.toLowerCase() === "rtl";
+    }
+  }
+  return document?.dir.toLowerCase() === "rtl";
+};
+
+export { getSrc, isRTL, isSrc, isStr };

package/es/components/assets-svg-icon/validate.d.ts

@@ -0,0 +1,4 @@
+export declare const validateContent: (svgContent: string) => string;
+export declare const isValid: (elm: HTMLElement) => boolean;
+export declare const isSvgDataUrl: (url: string) => boolean;
+export declare const isEncodedDataUrl: (url: string) => boolean;

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

@@ -0,0 +1,43 @@
+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 "";
+};
+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;
+};
+const isSvgDataUrl = (url) => url.startsWith("data:image/svg+xml");
+const isEncodedDataUrl = (url) => url.indexOf(";utf8,") !== -1;
+
+export { isEncodedDataUrl, isSvgDataUrl, isValid, validateContent };