@gct-paas/core-web 0.1.4-dev.7 → 0.1.4-dev.9

package/es/_virtual/_plugin-vue_export-helper.mjs

@@ -0,0 +1,9 @@
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+
+export { _export_sfc as default };

package/es/components/app-modal/app-modal-component.css

@@ -0,0 +1,149 @@
+@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 */
+/* 模态 start */
+/* 模态 end */
+.gct-modal {
+  --gct-modal-z-index: var(--gct-z-index-modal);
+  --gct-modal-background-color: var(--gct-color-bg-1);
+}
+.gct-modal__full-screen {
+  position: absolute;
+  top: 0;
+  right: 48px;
+  padding: 16px 8px;
+  color: #212528;
+  font-size: 16px;
+  line-height: 1;
+  line-height: 22px;
+  cursor: pointer;
+}
+
+.gct-modal.is-hidden-footer > .ant-modal-content > .ant-modal-footer {
+  display: none;
+  padding: 16px;
+}
+
+.gct-modal.is-hidden-close-btn > .ant-modal-content > .ant-modal-close {
+  display: none;
+}
+
+.gct-modal.is-hidden-cancel-btn > .ant-modal-content > .ant-modal-footer > button:first-child {
+  display: none;
+}
+
+.gct-modal.is-full-screen {
+  top: 0;
+  width: 100vw !important;
+  height: 100vh !important;
+  max-width: 100%;
+  max-height: fit-content;
+  margin: 0;
+  padding-bottom: 0;
+}
+.gct-modal.is-full-screen .ant-modal-content {
+  display: flex;
+  flex-direction: column;
+  width: 100vw;
+  max-width: 100vw;
+  height: 100vh;
+  max-height: 100vh;
+}
+
+.gct-modal > .ant-modal-content {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  max-height: 85vh;
+}
+.gct-modal > .ant-modal-content > .ant-modal-close > .ant-modal-close-x {
+  width: auto;
+  height: auto;
+  padding: 16px;
+  color: #212528;
+  line-height: 1;
+  line-height: 22px;
+}
+.gct-modal > .ant-modal-content > .ant-modal-header {
+  border-bottom: 1px solid #e0e3ea;
+}
+.gct-modal > .ant-modal-content > .ant-modal-footer {
+  border-top: 1px solid #e0e3ea;
+}
+.gct-modal > .ant-modal-content > .ant-modal-header,
+.gct-modal > .ant-modal-content > .ant-modal-footer {
+  flex-shrink: 0;
+  padding: 16px;
+}
+.gct-modal > .ant-modal-content > .ant-modal-header .ant-modal-title {
+  color: #000;
+  font-weight: 600;
+  min-height: 22px;
+}
+.gct-modal > .ant-modal-content > .ant-modal-body {
+  flex-grow: 1;
+  padding: 0;
+  overflow: hidden auto;
+}

package/es/components/app-modal/app-modal-component.d.ts

@@ -0,0 +1,26 @@
+import { PropType, VNode } from 'vue';
+import { IModalOptions, IOverlayContainer } from '@gct-paas/core';
+export declare const AppModalComponent: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    opts: {
+        type: PropType<IModalOptions>;
+        default: () => {};
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    opts: {
+        type: PropType<IModalOptions>;
+        default: () => {};
+    };
+}>> & Readonly<{}>, {
+    opts: IModalOptions;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+/**
+ * 创建模态框
+ *
+ * @author zhanghanrui
+ * @date 2024-03-19 21:03:37
+ * @export
+ * @param {() => VNode} render
+ * @param {(IModalOptions)} [opts]
+ * @return {*}  {IOverlayContainer}
+ */
+export declare function createModal(render: () => VNode, opts?: IModalOptions): IOverlayContainer;

package/es/components/app-modal/app-modal-component.mjs

@@ -0,0 +1,140 @@
+import { defineComponent, ref, provide, createVNode, h, resolveComponent, isVNode } from 'vue';
+import { ConfigProvider } from 'ant-design-vue';
+import { OverlayContainer, useNamespace, Modal } from '@gct-paas/core';
+import { DndProvider } from 'vue3-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import './app-modal-component.css';/* empty css                          */
+
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+const AppModalComponent = /* @__PURE__ */ defineComponent({
+  props: {
+    opts: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props, ctx) {
+    const ns = useNamespace('modal');
+    const isShow = ref(false);
+    // 是否全屏
+    const isFullScreen = ref(props.opts.defaultFullscreen ? true : false);
+    const onFullScreen = () => {
+      isFullScreen.value = !isFullScreen.value;
+    };
+
+    // 合并options
+    const options = ref({});
+    if (props.opts) {
+      Object.assign(options.value, props.opts);
+    }
+    let data = null;
+    const modal = new Modal({
+      dismiss: result => {
+        isShow.value = false;
+        data = result;
+        ctx.emit('dismiss', data);
+      },
+      setOptions(opt) {
+        Object.assign(options.value, opt);
+      }
+    });
+    provide('modal', modal);
+    const dismiss = _data => {
+      return modal.dismiss(_data);
+    };
+    const present = () => {
+      isShow.value = true;
+    };
+    ctx.expose({
+      present,
+      dismiss
+    });
+    const isConfirmLoading = ref(false);
+    const ok = async () => {
+      if (modal.ok) {
+        try {
+          isConfirmLoading.value = true;
+          const result = await modal.ok();
+          isConfirmLoading.value = false;
+          if (result && (result.ok === true || result.close === true)) {
+            dismiss(result);
+          }
+        } finally {
+          isConfirmLoading.value = false;
+        }
+      } else {
+        console.warn('打开模态未实现ok方法');
+      }
+    };
+    const cancel = async () => {
+      if (modal.cancel) {
+        const bol = await modal.cancel();
+        if (bol === false) {
+          return;
+        }
+      }
+      dismiss();
+    };
+
+    // TODO: 需要注入 antd 的多语言，待实现
+    const locale = {
+      getAntdLocale: {
+        locale: {}
+      }
+    };
+    const {
+      getAntdLocale
+    } = locale;
+    return () => {
+      let _slot;
+      const slot = ctx.slots.default?.();
+      if (slot && slot.length > 0) {
+        slot[0].props.modal = modal;
+      }
+      return createVNode(ConfigProvider, {
+        "locale": getAntdLocale
+      }, {
+        default: () => [createVNode(DndProvider, {
+          "backend": HTML5Backend
+        }, _isSlot(_slot = h(resolveComponent('a-modal'), {
+          visible: isShow,
+          class: [ns.b(), options.value.placement && ns.m(options.value.placement), options.value.modalClass, ns.is('hidden-footer', options.value.showFooter === false), ns.is('hidden-close-btn', options.value.showCloseBtn === false), ns.is('hidden-cancel-btn', options.value.showCancelBtn === false), ns.is('full-screen', isFullScreen.value)],
+          centered: true,
+          onOk: ok,
+          confirmLoading: isConfirmLoading,
+          onCancel: cancel,
+          okText: '确认',
+          okButtonProps: {
+            disabled: modal.state.okDisabled
+          },
+          ...options.value
+        }, [options.value.canFullscreen !== false ? createVNode("div", {
+          "class": ns.e('full-screen'),
+          "onClick": onFullScreen
+        }, [createVNode("i", {
+          "class": `iconfont ${isFullScreen.value ? 'icon-tuichuquanping' : 'icon-quanping'}`
+        }, null)]) : null, slot])) ? _slot : {
+          default: () => [_slot]
+        })]
+      });
+    };
+  }
+});
+
+/**
+ * 创建模态框
+ *
+ * @author zhanghanrui
+ * @date 2024-03-19 21:03:37
+ * @export
+ * @param {() => VNode} render
+ * @param {(IModalOptions)} [opts]
+ * @return {*}  {IOverlayContainer}
+ */
+function createModal(render, opts) {
+  return new OverlayContainer(AppModalComponent, render, opts);
+}
+
+export { AppModalComponent, createModal };

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