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

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 };

package/es/components/base-button/base-button.css

@@ -0,0 +1,74 @@
+.ant-btn[data-v-5375ec2b] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ant-btn.btn-font-color[data-v-5375ec2b] {
+  color: var(--v8d035854) !important;
+}
+.ant-btn.btn-bg-style[data-v-5375ec2b] {
+  border-color: var(--e376d652) !important;
+  background: var(--v4ee5fd6d) !important;
+}
+.square[data-v-5375ec2b] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 72px;
+  height: 72px;
+  padding: 0;
+  border-radius: 4px;
+}
+.square .icon-next[data-v-5375ec2b] {
+  margin: 0 !important;
+}
+.square .btn-title[data-v-5375ec2b] {
+  width: inherit;
+  padding: 0 8px;
+}
+.square.ant-btn-sm[data-v-5375ec2b] {
+  width: 72px;
+  height: 64px;
+  font-size: 14px;
+}
+.square.ant-btn-sm .btn-title[data-v-5375ec2b] {
+  padding: 0 4px;
+}
+.square.ant-btn-lg[data-v-5375ec2b] {
+  width: 80px;
+  height: 88px;
+}
+.squaref[data-v-5375ec2b] {
+  min-width: 72px;
+  height: 56px;
+  padding: 0;
+}
+.line[data-v-5375ec2b] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+[data-v-5375ec2b] .group .ant-btn {
+  height: 100%;
+}
+[data-v-5375ec2b] .ant-btn-loading-icon {
+  width: 0;
+  height: 0;
+  line-height: 0;
+}
+[data-v-5375ec2b] .ant-btn-icon-only {
+  vertical-align: -2px;
+}
+.gct-text-overflow-2[data-v-5375ec2b] {
+  display: -webkit-inline-box;
+  display: -moz-inline-box;
+  display: inline-flexbox;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  -moz-box-orient: vertical;
+  box-orient: 2;
+}

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

@@ -0,0 +1,173 @@
+import { PropType } from 'vue';
+import { ButtonSize, ButtonStyle } from '@gct-paas/core';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    block: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: PropType<ButtonSize>;
+        default: string;
+    };
+    icon: {
+        type: StringConstructor;
+        default: string;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    hasIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hasText: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    danger: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    buttonStyle: {
+        type: PropType<ButtonStyle>;
+        default: string;
+    };
+    i18nConfig: {
+        type: StringConstructor;
+        default: string;
+    };
+    hidden: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    confirm: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    confirmText: {
+        type: StringConstructor;
+        default: string;
+    };
+    enableCustomColor: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    backgroundColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    fontColor: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    block: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: PropType<ButtonSize>;
+        default: string;
+    };
+    icon: {
+        type: StringConstructor;
+        default: string;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    hasIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hasText: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    danger: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    buttonStyle: {
+        type: PropType<ButtonStyle>;
+        default: string;
+    };
+    i18nConfig: {
+        type: StringConstructor;
+        default: string;
+    };
+    hidden: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    confirm: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    confirmText: {
+        type: StringConstructor;
+        default: string;
+    };
+    enableCustomColor: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    backgroundColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    fontColor: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    onClick?: ((...args: any[]) => any) | undefined;
+}>, {
+    type: string;
+    title: string;
+    loading: boolean;
+    size: ButtonSize;
+    disabled: boolean;
+    block: boolean;
+    danger: boolean;
+    icon: string;
+    hidden: boolean;
+    hasIcon: boolean;
+    hasText: boolean;
+    buttonStyle: ButtonStyle;
+    i18nConfig: string;
+    confirm: boolean;
+    confirmText: string;
+    enableCustomColor: boolean;
+    backgroundColor: string;
+    fontColor: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;

package/es/components/base-button/base-button.vue.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from './base-button.vue3.mjs';
+import './base-button.css';/* empty css                  */
+import _export_sfc from '../../_virtual/_plugin-vue_export-helper.mjs';
+
+const baseButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5375ec2b"]]);
+
+export { baseButton as default };