@ibiz-template/vue3-components 0.7.38-alpha.31 → 0.7.38-alpha.56

package/lib/common/custom-theme/custom-theme.controller.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
-var vue = require('vue');
 var ramda = require('ramda');
+var vue = require('vue');
 var customThemeModel = require('./custom-theme-model.cjs');
 
 "use strict";
@@ -12,6 +12,11 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 class CustomThemeController {
+  /**
+   * Creates an instance of CustomThemeController.
+   * @author tony001
+   * @date 2024-12-26 18:12:28
+   */
   constructor() {
     /**
      * 自定义主题状态
@@ -27,6 +32,15 @@ class CustomThemeController {
      * @memberof CustomThemeController
      */
     __publicField(this, "model", []);
+    /**
+     * 模型映射对象，key为value，value值为var对象
+     *
+     * @author tony001
+     * @date 2024-12-27 10:12:57
+     * @private
+     * @type {IData}
+     */
+    __publicField(this, "modelMapping", {});
     /**
      * 预定义类型
      *
@@ -38,18 +52,119 @@ class CustomThemeController {
         codeName: "light",
         label: "\u4EAE\u8272",
         labelLang: "light",
-        color: "#557da5"
+        color: "#557da5",
+        isCustom: false
       },
       {
         codeName: "dark",
         label: "\u6697\u8272",
-        color: "#1c1c1c"
+        labelLang: "dark",
+        color: "#1c1c1c",
+        isCustom: false
+      },
+      {
+        codeName: "blue",
+        label: "\u84DD\u8272",
+        labelLang: "blue",
+        color: "rgba(0, 132, 255, 1)",
+        isCustom: false
+      },
+      {
+        codeName: "user1",
+        label: "\u81EA\u5B9A\u4E491",
+        labelLang: "user1",
+        color: "#999",
+        isCustom: true
+      },
+      {
+        codeName: "user2",
+        label: "\u81EA\u5B9A\u4E492",
+        labelLang: "user2",
+        color: "#888",
+        isCustom: true
+      },
+      {
+        codeName: "user3",
+        label: "\u81EA\u5B9A\u4E493",
+        labelLang: "user3",
+        color: "#777",
+        isCustom: true
       }
     ]);
     this.model = customThemeModel.predefineThemeVars;
     const customTheme = ibiz.util.theme.getCustomTheme();
     this.state = ramda.clone(customTheme);
     this.state = vue.reactive(this.state);
+    this.model.forEach((item) => {
+      this.initModelMapping(item);
+    });
+  }
+  /**
+   * 初始化模型映射
+   *
+   * @author tony001
+   * @date 2024-12-27 13:12:53
+   * @private
+   * @param {IData} item
+   */
+  initModelMapping(item) {
+    if (item.children && item.children.length > 0) {
+      item.children.forEach((child) => {
+        this.initModelMapping(child);
+      });
+    }
+    if (item.vars && item.vars.length > 0) {
+      item.vars.forEach((varItem) => {
+        this.modelMapping[varItem.value] = varItem;
+      });
+    }
+  }
+  /**
+   * 获取模型编辑数据
+   *
+   * @author tony001
+   * @date 2024-12-27 13:12:48
+   * @public
+   * @return {*}  {IData}
+   */
+  getModelEditData() {
+    const result = {};
+    this.model.forEach((item) => {
+      const tempData = {};
+      this.getSingleGroupModelData(item, tempData);
+      result[item.labelLang] = tempData;
+    });
+    return result;
+  }
+  /**
+   * 获取单个分组的模型数据
+   *
+   * @author tony001
+   * @date 2024-12-27 13:12:05
+   * @private
+   * @param {IData} item
+   * @param {IData} result
+   */
+  getSingleGroupModelData(item, result) {
+    if (item.children && item.children.length > 0) {
+      item.children.forEach((child) => {
+        this.getSingleGroupModelData(child, result);
+      });
+    }
+    if (item.vars && item.vars.length > 0) {
+      item.vars.forEach((varItem) => {
+        this.modelMapping[varItem.value] = varItem;
+        if (varItem.type === "size") {
+          result[varItem.value] = this.getCssVar(varItem.value);
+        } else {
+          let name = varItem.value;
+          if (varItem.className) {
+            name = "".concat(varItem.className, ":").concat(name);
+          }
+          result[varItem.value] = this.getCssVar(name, varItem.defaultValue);
+        }
+      });
+    }
   }
   /**
    * 获取css变量
@@ -59,13 +174,24 @@ class CustomThemeController {
    * @memberof CustomThemeController
    */
   getCssVar(name, defaultVar) {
+    var _a;
     let result = defaultVar || name;
     if (this.state.themeVars && this.state.themeVars[name]) {
       result = this.state.themeVars[name];
     } else {
-      const styles = window.getComputedStyle(document.documentElement);
+      let elt = document.documentElement;
+      let varName = defaultVar || name;
+      if (name.split(":").length === 2) {
+        const className = name.split(":")[0];
+        const element = (_a = document.getElementsByClassName(className)) == null ? void 0 : _a[0];
+        if (element) {
+          elt = element;
+          varName = name.split(":")[1];
+        }
+      }
+      const styles = window.getComputedStyle(elt);
       if (styles) {
-        result = styles.getPropertyValue(defaultVar || name) || result;
+        result = styles.getPropertyValue(varName) || result;
       }
     }
     if (result.toString().endsWith("px")) {
@@ -76,6 +202,110 @@ class CustomThemeController {
     }
     return result;
   }
+  /**
+   * 处理主题变更
+   *
+   * @author tony001
+   * @date 2024-12-26 15:12:57
+   * @param {string} tag
+   * @return {*}  {Promise<void>}
+   */
+  async handleThemeChange(tag) {
+    await ibiz.util.theme.clearCustomThemeParams(this.state.themeTag);
+    this.state.themeTag = tag;
+    this.state.themeVars = {};
+    await this.handleThemePreview(true);
+  }
+  /**
+   * 计算变更主题变量
+   *
+   * @author tony001
+   * @date 2024-12-27 17:12:21
+   * @param {IData} newData
+   * @return {*}  {Promise<void>}
+   */
+  async computeChangeThemeVars(newData) {
+    const changeVars = [];
+    const oldData = this.getModelEditData();
+    Object.keys(newData).forEach((type) => {
+      const newThemeVar = newData[type];
+      Object.keys(newThemeVar).forEach((varName) => {
+        const oldValue = oldData[type][varName];
+        if (oldValue !== newThemeVar[varName]) {
+          changeVars.push({ key: varName, value: newThemeVar[varName] });
+        }
+      });
+    });
+    if (changeVars.length > 0) {
+      changeVars.forEach((item) => {
+        const targetItem = this.modelMapping[item.key];
+        if (targetItem) {
+          if (targetItem.type === "size") {
+            this.calcSizeChange(item.key, Number(item.value), targetItem);
+          } else {
+            let name = item.key;
+            if (targetItem.className) {
+              name = "".concat(targetItem.className, ":").concat(item.key);
+            }
+            this.state.themeVars[name] = item.value;
+          }
+        }
+      });
+    }
+  }
+  /**
+   * 处理主题预览
+   *
+   * @author tony001
+   * @date 2024-12-26 17:12:59
+   * @return {*}  {Promise<void>}
+   */
+  async handleThemePreview(isLoad) {
+    const { themeTag, themeVars } = await ibiz.util.theme.previewCustomTheme(
+      this.state.themeTag,
+      this.state.themeVars,
+      isLoad
+    );
+    this.state.themeTag = themeTag;
+    this.state.themeVars = themeVars;
+  }
+  /**
+   * 处理主题保存
+   *
+   * @author tony001
+   * @date 2024-12-26 18:12:44
+   * @param {boolean} isShare
+   * @return {*}  {Promise<void>}
+   */
+  async handleThemeSave(isShare) {
+    await this.handleThemePreview(false);
+    await ibiz.util.theme.saveCustomTheme(
+      this.state.themeTag,
+      this.state.themeVars,
+      isShare
+    );
+  }
+  /**
+   * 处理主题重置
+   *
+   * @author tony001
+   * @date 2024-12-27 20:12:03
+   * @param {boolean} isShare
+   * @return {*}  {Promise<void>}
+   */
+  async handleThemeReset(isShare) {
+    const res = await ibiz.confirm.info({
+      title: ibiz.i18n.t("control.common.customTheme.resetConfirmation"),
+      desc: isShare ? ibiz.i18n.t("control.common.customTheme.resetConfirmationGlobalDesc") : ibiz.i18n.t("control.common.customTheme.resetConfirmationDesc")
+    });
+    if (!res)
+      return;
+    const { themeVars } = await ibiz.util.theme.resetCustomTheme(
+      this.state.themeTag,
+      isShare
+    );
+    this.state.themeVars = themeVars;
+  }
   /**
    * 计算尺寸改变，同类size批量更改
    *

package/lib/common/custom-theme/custom-theme.css

@@ -1 +1 @@
-.ibiz-custom-theme{display:flex;flex-direction:column;height:100%;padding:var(--ibiz-spacing-loose)}.ibiz-custom-theme .ibiz-custom-theme-header .el-button{padding:var(--ibiz-spacing-tight)}.ibiz-custom-theme .ibiz-custom-theme-content{height:auto;padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);overflow-y:auto}.ibiz-custom-theme .ibiz-custom-theme-content .el-tabs{height:100%}.ibiz-custom-theme .ibiz-custom-theme-content .el-tabs__content{height:calc(100% - 55px);overflow:auto}.ibiz-custom-theme .ibiz-custom-theme-footer{flex:none;height:64px;padding:var(--ibiz-spacing-base);display:flex;align-items:center;justify-content:flex-start}.ibiz-custom-theme-item{padding:var(--ibiz-spacing-base);border-bottom:1px solid var(--ibiz-color-border)}.ibiz-custom-theme-item__caption{font-size:var(--ibiz-font-size-header-5);font-weight:var(--ibiz-font-weight-bold);line-height:var(--ibiz-spacing-super-loose)}.ibiz-custom-theme-item__content{padding:var(--ibiz-spacing-base) 0}.ibiz-custom-theme-item__content .el-button{min-width:var(--ibiz-height-control-default)}.ibiz-custom-theme-var{gap:var(--ibiz-spacing-base);padding:var(--ibiz-spacing-extra-tight) 0;display:flex;align-items:center;justify-content:space-between}
+.ibiz-custom-theme{display:flex;flex-direction:column;height:100%;padding:var(--ibiz-spacing-loose)}.ibiz-custom-theme .ibiz-custom-theme-header .el-button{padding:var(--ibiz-spacing-tight)}.ibiz-custom-theme .ibiz-custom-theme-content{flex-grow:1;padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);overflow:hidden}.ibiz-custom-theme .ibiz-custom-theme-content .ibiz-custom-theme-content-container{width:100%;height:100%}.ibiz-custom-theme .ibiz-custom-theme-content .ibiz-custom-theme-content-container .ibiz-custom-theme-edit-container{width:100%;height:100%}.ibiz-custom-theme .ibiz-custom-theme-content .ibiz-custom-theme-content-container .ibiz-custom-theme-edit-container.is-hidden{display:none}.ibiz-custom-theme .ibiz-custom-theme-content .ibiz-custom-theme-content-container .ibiz-custom-theme-default-container{width:100%;height:100%}.ibiz-custom-theme .ibiz-custom-theme-content .ibiz-custom-theme-content-container .ibiz-custom-theme-default-container.is-hidden{display:none}.ibiz-custom-theme .ibiz-custom-theme-content .ibiz-custom-theme-content-container .ibiz-custom-theme-default-container .el-tabs{height:100%}.ibiz-custom-theme .ibiz-custom-theme-content .ibiz-custom-theme-content-container .ibiz-custom-theme-default-container .el-tabs__content{height:calc(100% - 55px);overflow:auto}.ibiz-custom-theme .ibiz-custom-theme-footer{flex:none;height:64px;padding:var(--ibiz-spacing-base);display:flex;align-items:center;justify-content:flex-start}.ibiz-custom-theme .ibiz-custom-theme-footer .el-button+.el-dropdown{margin-left:12px}.ibiz-custom-theme-item{padding:var(--ibiz-spacing-base);border-bottom:1px solid var(--ibiz-color-border)}.ibiz-custom-theme-item__caption{font-size:var(--ibiz-font-size-header-5);font-weight:var(--ibiz-font-weight-bold);line-height:var(--ibiz-spacing-super-loose)}.ibiz-custom-theme-item__container{display:flex;align-items:center;justify-content:space-between}.ibiz-custom-theme-item__content{padding:var(--ibiz-spacing-base) 0}.ibiz-custom-theme-item__content .el-button{min-width:var(--ibiz-height-control-default)}.ibiz-custom-theme-item .ibiz-custom-theme-content-setting{font-size:var(--el-font-size-base);cursor:pointer}.ibiz-custom-theme-var{gap:var(--ibiz-spacing-base);padding:var(--ibiz-spacing-extra-tight) 0;display:flex;align-items:center;justify-content:space-between}

package/lib/common/data-import/data-import.cjs

@@ -45,14 +45,15 @@ const DataImport = /* @__PURE__ */ vue.defineComponent({
       props.dismiss();
     };
     const onLinkClick = async () => {
-      runtime.downloadImportTemplate(props.appDataEntity, props.dataImport);
+      runtime.downloadImportTemplate(props.appDataEntity, props.dataImport, props.context, props.params);
     };
     const selectFile = async () => {
       isLoading.value = true;
       const result = await runtime.selectAndImport({
         appDataEntity: props.appDataEntity,
         dataImport: props.dataImport,
-        context: props.context
+        context: props.context,
+        params: props.params
       });
       if (result.cancel) {
         isLoading.value = false;

package/lib/common/data-import2/data-import2.cjs

@@ -3,7 +3,6 @@
 var vue = require('vue');
 var vue3Util = require('@ibiz-template/vue3-util');
 var qs = require('qs');
-var qxUtil = require('qx-util');
 var core = require('@ibiz-template/core');
 var ramda = require('ramda');
 require('./data-import2.css');
@@ -238,7 +237,7 @@ const DataImport2 = /* @__PURE__ */ vue.defineComponent({
       columnMappingListQuery();
     });
     const headers = vue.ref({
-      ["".concat(ibiz.env.tokenHeader, "Authorization")]: "".concat(ibiz.env.tokenPrefix, "Bearer ").concat(qxUtil.getCookie(core.CoreConst.TOKEN))
+      ["".concat(ibiz.env.tokenHeader, "Authorization")]: "".concat(ibiz.env.tokenPrefix, "Bearer ").concat(core.getAppCookie(core.CoreConst.TOKEN))
     });
     const UploadUrl = vue.computed(() => {
       let uploadFileUrl;

package/lib/common/grid-setting/grid-setting.cjs

@@ -51,17 +51,13 @@ const IBizGridSetting = /* @__PURE__ */ vue.defineComponent({
         c.changeColumnStateSort(movedDragColumnState.key, newIndex, oldIndex);
       }
     };
-    const onShowNavView = () => {
-      c.state.showNavView = !c.state.showNavView;
-    };
     return {
       ns,
       c,
       dragColumnStates,
       isDraggable,
       handleClick,
-      onDragChange,
-      onShowNavView
+      onDragChange
     };
   },
   render() {
@@ -123,16 +119,16 @@ const IBizGridSetting = /* @__PURE__ */ vue.defineComponent({
           }
         });
       }
-    }), this.c.state.enableNavView ? !this.c.state.showNavView ? vue.createVNode("ion-icon", {
+    }), this.c.state.enableNavView && this.c.state.showNavIcon ? !this.c.state.showNavView ? vue.createVNode("ion-icon", {
       "class": this.ns.e("nav-icon"),
       "title": ibiz.i18n.t("component.controlNavigation.showNav"),
       "name": "eye-outline",
-      "onClick": this.onShowNavView
+      "onClick": () => this.c.onShowNavViewChange()
     }, null) : vue.createVNode("ion-icon", {
       "class": this.ns.e("nav-icon"),
       "title": ibiz.i18n.t("component.controlNavigation.hiddenNav"),
       "name": "eye-off-outline",
-      "onClick": this.onShowNavView
+      "onClick": () => this.c.onShowNavViewChange()
     }, null) : null]);
   }
 });

package/lib/common/index.cjs

@@ -35,10 +35,12 @@ var buttonList = require('./button-list/button-list.cjs');
 var controlNavigation = require('./control-navigation/control-navigation.cjs');
 var ganttSetting = require('./gantt-setting/gantt-setting.cjs');
 var navSplit = require('./nav-split/nav-split.cjs');
+var cropping = require('./cropping/cropping.cjs');
 
 "use strict";
 const IBizCommonComponents = {
   install: (v) => {
+    v.component(cropping.IBizCropping.name, cropping.IBizCropping);
     v.component(vue3Util.IBizControlBase.name, vue3Util.IBizControlBase);
     v.component(quickEdit.IBizQuickEdit.name, quickEdit.IBizQuickEdit);
     v.component(emojiSelect.IBizEmojiSelect.name, emojiSelect.IBizEmojiSelect);
@@ -70,6 +72,12 @@ const IBizCommonComponents = {
         loader: () => Promise.resolve().then(function () { return require('./map-chart/map-chart.cjs'); })
       })
     );
+    v.component(
+      "IBizMapChartUser",
+      vue.defineAsyncComponent({
+        loader: () => Promise.resolve().then(function () { return require('./map-chart-user/map-chart-user.cjs'); })
+      })
+    );
     v.component(vue3Util.IBizBadge.name, vue3Util.IBizBadge);
     v.component(carousel.IBizCarouselComponent.name, carousel.IBizCarouselComponent);
     v.component(coopAlert.IBizCoopAlert.name, coopAlert.IBizCoopAlert);

package/lib/common/map-chart/map-manager.cjs

@@ -11,6 +11,7 @@ function useMapManager(opts, calcEchartsOpts, emit) {
   const historyNames = vue.ref([]);
   let chart;
   const chartRef = vue.ref();
+  let resizeObserver;
   const parseJson = (json) => {
     const info = {
       cityNames: {},
@@ -64,11 +65,18 @@ function useMapManager(opts, calcEchartsOpts, emit) {
       changeMap(name);
     }
   };
+  const resize = () => {
+    chart == null ? void 0 : chart.resize();
+  };
   vue.onMounted(() => {
     chart = echarts.init(chartRef.value);
-    window.addEventListener("resize", () => {
-      chart == null ? void 0 : chart.resize();
-    });
+    window.addEventListener("resize", resize);
+    if (chartRef.value && ResizeObserver) {
+      resizeObserver = new ResizeObserver(() => {
+        resize();
+      });
+      resizeObserver.observe(chartRef.value);
+    }
     chart.on("click", (params) => {
       if (params.componentType === "series") {
         if (params.seriesType === "scatter") {
@@ -109,6 +117,10 @@ function useMapManager(opts, calcEchartsOpts, emit) {
       }
     });
   });
+  vue.onUnmounted(() => {
+    window.removeEventListener("resize", resize);
+    resizeObserver == null ? void 0 : resizeObserver.disconnect();
+  });
   return {
     chartRef,
     historyNames,

package/lib/common/map-chart-user/map-chart-user.cjs

@@ -0,0 +1,109 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var ramda = require('ramda');
+var vue3Util = require('@ibiz-template/vue3-util');
+var runtime = require('@ibiz-template/runtime');
+var mapChartUser_util = require('./map-chart-user.util.cjs');
+var mapUserManager = require('./map-user-manager.cjs');
+require('./map-chart-user.css');
+
+"use strict";
+const IBizMapChartUser = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizMapChartUser",
+  props: {
+    areaData: {
+      type: Array
+    },
+    pointData: {
+      type: Array
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    },
+    controller: {
+      type: runtime.MapController,
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = vue3Util.useNamespace("map-chart-user");
+    const c = props.controller;
+    let option = mapChartUser_util.defaultOpts;
+    if (c.controlParams.defaultopts) {
+      const data = JSON.parse(c.controlParams.defaultopts);
+      option = ramda.mergeDeepLeft(data, option);
+    }
+    const options = vue.computed(() => {
+      return ramda.mergeDeepWithKey((_key, x, z) => {
+        return ramda.isNil(z) ? x : z;
+      }, option, props.options);
+    });
+    const {
+      chartRef,
+      historyNames,
+      changeMap,
+      getCityInfo,
+      goBack
+    } = mapUserManager.useMapManager(props.controller, options, (mapName) => {
+      const areaData = props.areaData || [];
+      const pointData = props.pointData || [];
+      const tooltip = mapChartUser_util.getTooltip();
+      const visualMap = mapChartUser_util.getVisualMap(options.value);
+      const cityInfo = getCityInfo();
+      const pointOption = {
+        ...mapChartUser_util.getPointStaticOption(options.value),
+        ...mapChartUser_util.getPointOption(pointData, areaData)
+      };
+      const areaOption = {
+        ...mapChartUser_util.getAreaStaticOption(options.value),
+        ...mapChartUser_util.getAreaOption(mapName, pointData, areaData, cityInfo)
+      };
+      const result = {
+        geo: {
+          map: mapName
+        },
+        tooltip,
+        visualMap,
+        series: [
+          // 地图区块序列
+          areaOption,
+          // 地图散点序列
+          pointOption
+        ]
+      };
+      return result;
+    });
+    vue.onMounted(() => {
+      const name = options.value.defaultAreaCode;
+      const areaCode = c.state.strAreaCode ? "".concat(name) : Number(name);
+      c.state.areaCode = areaCode;
+      changeMap(name, areaCode, true);
+    });
+    return {
+      ns,
+      chartRef,
+      historyNames,
+      goBack
+    };
+  },
+  render() {
+    return vue.createVNode("div", {
+      "class": this.ns.b()
+    }, [vue.createVNode("div", {
+      "class": this.ns.e("chart"),
+      "ref": "chartRef"
+    }, null), this.historyNames.length > 1 && vue.createVNode("div", {
+      "class": this.ns.e("goback"),
+      "onClick": () => {
+        this.goBack();
+      }
+    }, [ibiz.i18n.t("app.return")])]);
+  }
+});
+
+exports.IBizMapChartUser = IBizMapChartUser;
+exports.default = IBizMapChartUser;

package/lib/common/map-chart-user/map-chart-user.css

@@ -0,0 +1 @@
+.ibiz-map-chart-user{position:relative;min-width:300px;min-height:300px}.ibiz-map-chart-user__chart{width:100%;height:100%}.ibiz-map-chart-user__goback{position:absolute;top:60px;right:0;width:100px;height:100px;font-size:var(--ibiz-font-size-header-4);color:var(--ibiz-color-link);text-decoration:underline;letter-spacing:6px;cursor:pointer}.ibiz-map-chart-user__popper{padding:var(--ibiz-spacing-base)}