@ibiz-template/vue3-components 0.7.40-alpha.9 → 0.7.41-alpha.0

package/lib/editor/map-picker/ibiz-map-picker/ibiz-map-picker.cjs

@@ -0,0 +1,366 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+var index = require('../../../node_modules/.pnpm/@amap_amap-jsapi-loader@1.0.1/node_modules/@amap/amap-jsapi-loader/dist/index.cjs');
+require('./ibiz-map-picker.css');
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
+const IBizMapPicker = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizMapPicker",
+  props: vue3Util.getMapPickerProps(),
+  emits: vue3Util.getEditorEmits(),
+  setup(props, {
+    emit
+  }) {
+    var _a;
+    const ns = vue3Util.useNamespace("map-picker");
+    const c = props.controller;
+    const editorItem = (_a = c.model.editorItems) == null ? void 0 : _a[0];
+    const inputRef = vue.ref();
+    const searchInputRef = vue.ref();
+    const mapContainerRef = vue.ref();
+    const searchResultContainerRef = vue.ref();
+    const dialogVisible = vue.ref(false);
+    const isLoading = vue.ref(false);
+    const searchValue = vue.ref("");
+    const showFormDefaultContent = vue.computed(() => {
+      if (props.controlParams && props.controlParams.editmode === "hover" && !props.readonly) {
+        return true;
+      }
+      return false;
+    });
+    let map;
+    let marker;
+    let poiPicker;
+    const addressInfo = {
+      address: "",
+      longitude: null,
+      latitude: null
+    };
+    const clearMarker = () => {
+      if (marker) {
+        marker.setMap(null);
+        marker = void 0;
+      }
+    };
+    const addMarker = (lng, lat) => {
+      const AMap = window.AMap;
+      if (!AMap) {
+        return;
+      }
+      clearMarker();
+      marker = new AMap.Marker({
+        position: [lng, lat]
+      });
+    };
+    const getAddress = (lng, lat) => {
+      const AMap = window.AMap;
+      if (!AMap) {
+        return;
+      }
+      if (!marker) {
+        return;
+      }
+      const geocoder = new AMap.Geocoder({});
+      const currentMarker = marker;
+      geocoder.getAddress([lng, lat], (status, result) => {
+        if (!marker || marker !== currentMarker) {
+          return;
+        }
+        if (status === "complete" && result.info === "OK" && result.regeocode) {
+          const regeocode = result.regeocode;
+          const address = regeocode.formattedAddress;
+          const markerContent = document.createElement("div");
+          const markerImg = document.createElement("img");
+          markerImg.style.width = "25px";
+          markerImg.src = "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png";
+          markerContent.appendChild(markerImg);
+          const markerText = document.createElement("span");
+          markerText.className = ns.b("dialog-map-marker-text");
+          markerText.textContent = address;
+          markerContent.appendChild(markerText);
+          marker.setContent(markerContent);
+          marker.setMap(map);
+          addressInfo.address = address;
+          addressInfo.longitude = lng;
+          addressInfo.latitude = lat;
+          searchValue.value = address;
+        }
+      });
+    };
+    const loadMap = async () => {
+      try {
+        isLoading.value = true;
+        window._AMapSecurityConfig = {
+          securityJsCode: ibiz.env.aMapSecurityJsCode
+        };
+        await index.default.load({
+          key: ibiz.env.aMapKey,
+          version: "2.0",
+          plugins: ["AMap.PlaceSearch", "AMap.Geocoder"],
+          AMapUI: {
+            version: "1.1",
+            plugins: ["misc/PoiPicker"]
+          }
+        });
+      } finally {
+        isLoading.value = false;
+      }
+    };
+    const initMap = () => {
+      const AMap = window.AMap;
+      if (!AMap) {
+        return;
+      }
+      if (!mapContainerRef.value) {
+        return;
+      }
+      map = new AMap.Map(mapContainerRef.value, {
+        viewMode: "3D",
+        zoom: 11
+      });
+      map == null ? void 0 : map.on("click", (e) => {
+        const lnglat = e.lnglat;
+        const lng = lnglat.lng;
+        const lat = lnglat.lat;
+        if (lng != null && lat != null) {
+          addMarker(lng, lat);
+          getAddress(lng, lat);
+        }
+      });
+      const AMapUI = window.AMapUI;
+      if (!AMapUI) {
+        return;
+      }
+      if (!searchInputRef.value || !searchResultContainerRef.value) {
+        return;
+      }
+      AMapUI.loadUI(["misc/PoiPicker"], function(PoiPicker) {
+        if (!searchInputRef.value || !searchResultContainerRef.value || !PoiPicker) {
+          return;
+        }
+        poiPicker = new PoiPicker({
+          input: searchInputRef.value,
+          placeSearchOptions: {
+            map
+          },
+          searchResultsContainer: searchResultContainerRef.value
+        });
+        poiPicker == null ? void 0 : poiPicker.on("poiPicked", function(poiResult) {
+          var _a2, _b;
+          clearMarker();
+          const item = poiResult.item;
+          if (item) {
+            addressInfo.address = item.name;
+            addressInfo.longitude = (_a2 = item.location) == null ? void 0 : _a2.lng;
+            addressInfo.latitude = (_b = item.location) == null ? void 0 : _b.lat;
+            searchValue.value = item.name;
+            if (poiResult.source !== "search") {
+              poiPicker == null ? void 0 : poiPicker.searchByKeyword(item.name);
+            }
+          }
+        });
+      });
+    };
+    const handleShow = () => {
+      var _a2;
+      dialogVisible.value = true;
+      (_a2 = inputRef.value) == null ? void 0 : _a2.blur();
+      vue.nextTick(async () => {
+        var _a3;
+        if (!window.AMap) {
+          await loadMap();
+        }
+        if (!map || !((_a3 = mapContainerRef.value) == null ? void 0 : _a3.children.length)) {
+          map == null ? void 0 : map.destroy();
+          initMap();
+        }
+        searchValue.value = props.value || "";
+        if (editorItem && editorItem.id) {
+          const [longitudeName, latitudeName] = editorItem.id.split(",");
+          if (props.data) {
+            const longitude = props.data[longitudeName];
+            const latitude = props.data[latitudeName];
+            if (longitude && latitude) {
+              map == null ? void 0 : map.setCenter([longitude, latitude], true);
+              addMarker(longitude, latitude);
+              getAddress(longitude, latitude);
+            }
+          }
+        }
+      });
+    };
+    const handleConfirm = () => {
+      dialogVisible.value = false;
+      if (editorItem && editorItem.id) {
+        const [longitudeName, latitudeName] = editorItem.id.split(",");
+        if (longitudeName) {
+          emit("change", addressInfo.longitude != null ? addressInfo.longitude : null, longitudeName);
+        }
+        if (latitudeName) {
+          emit("change", addressInfo.latitude != null ? addressInfo.latitude : null, latitudeName);
+        }
+      }
+      emit("change", addressInfo.address || "");
+    };
+    const handleClose = () => {
+      if (poiPicker) {
+        poiPicker.clearSuggest();
+        poiPicker.clearSearchResults();
+      }
+      searchValue.value = "";
+      addressInfo.address = "";
+      addressInfo.longitude = null;
+      addressInfo.latitude = null;
+      clearMarker();
+    };
+    const handleClear = () => {
+      if (editorItem && editorItem.id) {
+        const [longitudeName, latitudeName] = editorItem.id.split(",");
+        if (longitudeName) {
+          emit("change", null, longitudeName);
+        }
+        if (latitudeName) {
+          emit("change", null, latitudeName);
+        }
+      }
+      emit("change", "");
+    };
+    const handleSearchClear = () => {
+      searchValue.value = "";
+      addressInfo.address = "";
+      addressInfo.longitude = null;
+      addressInfo.latitude = null;
+      clearMarker();
+    };
+    vue.onUnmounted(() => {
+      map == null ? void 0 : map.destroy();
+    });
+    return {
+      ns,
+      c,
+      inputRef,
+      searchInputRef,
+      mapContainerRef,
+      searchResultContainerRef,
+      dialogVisible,
+      isLoading,
+      searchValue,
+      showFormDefaultContent,
+      handleShow,
+      handleConfirm,
+      handleClose,
+      handleClear,
+      handleSearchClear
+    };
+  },
+  render() {
+    const icon = vue.createVNode("svg", {
+      "xmlns": "http://www.w3.org/2000/svg",
+      "viewBox": "0 0 1024 1024"
+    }, [vue.createVNode("path", {
+      "fill": "currentColor",
+      "d": "m466.752 512-90.496-90.496a32 32 0 0 1 45.248-45.248L512 466.752l90.496-90.496a32 32 0 1 1 45.248 45.248L557.248 512l90.496 90.496a32 32 0 1 1-45.248 45.248L512 557.248l-90.496 90.496a32 32 0 0 1-45.248-45.248z"
+    }, null), vue.createVNode("path", {
+      "fill": "currentColor",
+      "d": "M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768m0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896"
+    }, null)]);
+    let content;
+    if (this.readonly) {
+      content = this.value;
+    } else {
+      content = [vue.createVNode(vue.resolveComponent("el-input"), {
+        "class": this.ns.b("input"),
+        "ref": "inputRef",
+        "model-value": this.value,
+        "placeholder": this.c.placeHolder,
+        "disabled": this.disabled,
+        "onFocus": this.handleShow
+      }, {
+        suffix: () => {
+          if (!this.value || this.disabled) {
+            return;
+          }
+          return vue.createVNode("i", {
+            "class": "el-icon el-input__icon el-input__clear",
+            "onClick": (e) => {
+              e.stopPropagation();
+              this.handleClear();
+            }
+          }, [icon]);
+        }
+      }), vue.createVNode(vue.resolveComponent("el-dialog"), {
+        "class": this.ns.b("dialog"),
+        "modelValue": this.dialogVisible,
+        "onUpdate:modelValue": ($event) => this.dialogVisible = $event,
+        "title": ibiz.i18n.t("editor.mapPicker.title"),
+        "append-to-body": true,
+        "align-center": true,
+        "width": "80%",
+        "onClose": this.handleClose
+      }, {
+        default: () => {
+          return vue.createVNode("div", {
+            "class": this.ns.b("dialog-content")
+          }, [vue.createVNode("div", {
+            "class": "el-input el-input--suffix ".concat(this.ns.b("dialog-search-input"), " ").concat(this.isLoading ? "is-disabled" : "")
+          }, [vue.createVNode("div", {
+            "class": "el-input__wrapper",
+            "tabindex": "-1"
+          }, [vue.withDirectives(vue.createVNode("input", {
+            "ref": "searchInputRef",
+            "class": "el-input__inner",
+            "type": "text",
+            "autocomplete": "off",
+            "tabindex": "0",
+            "placeholder": ibiz.i18n.t("editor.mapPicker.searchPlaceholder"),
+            "disabled": this.isLoading,
+            "onUpdate:modelValue": ($event) => this.searchValue = $event
+          }, null), [[vue.vModelText, this.searchValue]]), this.searchValue ? vue.createVNode("span", {
+            "class": "el-input__suffix"
+          }, [vue.createVNode("span", {
+            "class": "el-input__suffix-inner"
+          }, [vue.createVNode("i", {
+            "class": "el-icon el-input__icon el-input__clear",
+            "onClick": (e) => {
+              e.stopPropagation();
+              this.handleSearchClear();
+            }
+          }, [icon])])]) : null])]), vue.withDirectives(vue.createVNode("div", {
+            "class": this.ns.b("dialog-map-content")
+          }, [vue.createVNode("div", {
+            "class": this.ns.b("dialog-map-container"),
+            "ref": "mapContainerRef"
+          }, null), vue.createVNode("div", {
+            "class": this.ns.b("dialog-search-result-container"),
+            "ref": "searchResultContainerRef"
+          }, null)]), [[vue.resolveDirective("loading"), this.isLoading]])]);
+        },
+        footer: () => {
+          let _slot;
+          return vue.createVNode("div", {
+            "class": this.ns.b("dialog-footer")
+          }, [vue.createVNode(vue.resolveComponent("el-button"), {
+            "type": "primary",
+            "disabled": this.isLoading,
+            "onClick": this.handleConfirm
+          }, _isSlot(_slot = ibiz.i18n.t("editor.common.confirm")) ? _slot : {
+            default: () => [_slot]
+          })]);
+        }
+      })];
+    }
+    const formDefaultContent = vue.createVNode("div", {
+      "class": this.ns.b("form-default-content")
+    }, [this.value ? this.value : ibiz.config.common.emptyText]);
+    return vue.createVNode("div", {
+      "class": [this.ns.b(), this.disabled ? this.ns.m("disabled") : "", this.readonly ? this.ns.m("readonly") : "", this.ns.is("show-default", this.showFormDefaultContent)]
+    }, [this.showFormDefaultContent && formDefaultContent, content]);
+  }
+});
+
+exports.IBizMapPicker = IBizMapPicker;

package/lib/editor/map-picker/ibiz-map-picker/ibiz-map-picker.css

@@ -0,0 +1 @@
+.ibiz-map-picker{font-size:var(--ibiz-form-item-font-size);font-weight:var(--ibiz-form-item-regular)}.ibiz-map-picker--readonly{height:auto;overflow:auto;line-height:var(--ibiz-editor-default-line-height);color:var(--ibiz-form-item-readonly-color);word-break:break-word;white-space:pre-wrap}.ibiz-map-picker-input .el-input__suffix{display:none}.ibiz-map-picker-input .el-input__wrapper:hover .el-input__suffix{display:inline-flex}.ibiz-map-picker-dialog{display:flex;flex-direction:column;height:80%;--el-dialog-padding-primary:var(--ibiz-spacing-base)}.ibiz-map-picker-dialog .el-dialog__headerbtn{top:calc(var(--el-dialog-padding-primary) - 2px);right:calc(var(--el-dialog-padding-primary)/ 2)}.ibiz-map-picker-dialog .el-dialog__footer,.ibiz-map-picker-dialog .el-dialog__header{flex:0 0 auto;padding:var(--el-dialog-padding-primary)}.ibiz-map-picker-dialog .el-dialog__body{flex:1 1 0;padding:var(--el-dialog-padding-primary);border-top:1px solid var(--ibiz-color-border);border-bottom:1px solid var(--ibiz-color-border)}.ibiz-map-picker-dialog-content{display:flex;flex-direction:column;height:100%}.ibiz-map-picker-dialog-search-input{z-index:999;flex:0 0 auto;margin-bottom:var(--ibiz-spacing-tight)}.ibiz-map-picker-dialog-search-input .el-input__suffix{display:none}.ibiz-map-picker-dialog-search-input .el-input__wrapper:hover .el-input__suffix{display:inline-flex}.ibiz-map-picker-dialog-map-content{position:relative;flex:1 1 0}.ibiz-map-picker-dialog-map-container{height:100%}.ibiz-map-picker-dialog-search-result-container{position:absolute;top:0;right:0;display:block!important;width:280px;max-height:90%;overflow-y:auto;background-color:#fff}.ibiz-map-picker-dialog-search-result-container .amap_lib_placeSearch_page{display:flex;overflow-x:auto}.ibiz-map-picker-dialog-map-marker-text{position:absolute;top:-24px;padding:4px 10px;font-size:12px;color:#fff;white-space:nowrap;background-color:#3d93fd;border-radius:4px;transform:translateX(calc(-50% - 12.5px))}.ibiz-form-item .ibiz-map-picker.is-show-default:hover .ibiz-map-picker-form-default-content{display:none}.ibiz-form-item .ibiz-map-picker.is-show-default:hover .ibiz-map-picker-input{display:inline-flex}.ibiz-form-item .ibiz-map-picker.is-show-default .ibiz-map-picker-input{display:none;font-family:Arial,sans-serif}.ibiz-form-item .ibiz-map-picker.is-show-default .ibiz-map-picker-form-default-content{display:flex;align-items:center;width:100%;padding:var(--ibiz-form-item-hover-edit-padding);font-family:Arial,sans-serif;font-size:var(--ibiz-form-item-font-size);line-height:var(--ibiz-editor-default-line-height);color:var(--ibiz-form-item-text-color);word-wrap:break-word;white-space:pre-wrap}

package/lib/editor/map-picker/index.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var ibizMapPicker = require('./ibiz-map-picker/ibiz-map-picker.cjs');
+var mapPickerEditor_controller = require('./map-picker-editor.controller.cjs');
+var mapPickerEditor_provider = require('./map-picker-editor.provider.cjs');
+
+"use strict";
+
+exports.IBizMapPicker = ibizMapPicker.IBizMapPicker;
+exports.MapPickerEditorController = mapPickerEditor_controller.MapPickerEditorController;
+exports.MapPickerEditorProvider = mapPickerEditor_provider.MapPickerEditorProvider;

package/lib/editor/map-picker/map-picker-editor.controller.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var runtime = require('@ibiz-template/runtime');
+
+"use strict";
+class MapPickerEditorController extends runtime.EditorController {
+}
+
+exports.MapPickerEditorController = MapPickerEditorController;

package/lib/editor/map-picker/map-picker-editor.provider.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+var mapPickerEditor_controller = require('./map-picker-editor.controller.cjs');
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class MapPickerEditorProvider {
+  constructor() {
+    __publicField(this, "formEditor", "IBizMapPicker");
+    __publicField(this, "gridEditor", "IBizMapPicker");
+  }
+  async createController(editorModel, parentController) {
+    const c = new mapPickerEditor_controller.MapPickerEditorController(editorModel, parentController);
+    await c.init();
+    return c;
+  }
+}
+
+exports.MapPickerEditorProvider = MapPickerEditorProvider;

package/lib/editor/markdown/ibiz-markdown-editor/ibiz-markdown-editor.cjs

@@ -37,6 +37,7 @@ const IBizMarkDown = /* @__PURE__ */ vue.defineComponent({
     let resizeObserver = null;
     let lastMarkDownWidth = 0;
     const cssVars = vue.ref({});
+    let isIgnoreChange = false;
     vue.watch(() => props.data, (newVal) => {
       if (newVal && c) {
         const urls = ibiz.util.file.calcFileUpDownUrl(c.context, c.params, newVal, c.editorParams);
@@ -62,6 +63,7 @@ const IBizMarkDown = /* @__PURE__ */ vue.defineComponent({
       return result;
     };
     const setCherryContent = (val) => {
+      isIgnoreChange = true;
       editor == null ? void 0 : editor.setMarkdown(val, false);
     };
     vue.watch(() => props.value, (newVal, oldVal) => {
@@ -82,7 +84,8 @@ const IBizMarkDown = /* @__PURE__ */ vue.defineComponent({
       }
     });
     const afterChange = (_e) => {
-      emit("change", getCherryContent());
+      emit("change", getCherryContent(), c == null ? void 0 : c.model.id, isIgnoreChange);
+      isIgnoreChange = false;
     };
     const beforeImageMounted = (e, src) => {
       return {
@@ -130,7 +133,7 @@ const IBizMarkDown = /* @__PURE__ */ vue.defineComponent({
         clearNodeChildren(fullscreenNode);
         fullscreenNode.appendChild(createCherryIcon("minscreen"));
         cherryClass.add("fullscreen");
-        fullscreenNode.title = ibiz.i18n.t("editor.markdown.minimize");
+        fullscreenNode.title = ibiz.i18n.t("editor.common.minimize");
         parentElement.setAttribute("tabindex", "-1");
         vue.nextTick(() => parentElement == null ? void 0 : parentElement.focus());
       }
@@ -144,7 +147,7 @@ const IBizMarkDown = /* @__PURE__ */ vue.defineComponent({
       if (parentElement && cherryClass && fullscreenNode) {
         clearNodeChildren(fullscreenNode);
         fullscreenNode.appendChild(createCherryIcon("fullscreen"));
-        fullscreenNode.title = ibiz.i18n.t("editor.markdown.fullscreen");
+        fullscreenNode.title = ibiz.i18n.t("editor.common.fullscreen");
         cherryClass.remove("fullscreen");
         parentElement == null ? void 0 : parentElement.blur();
         parentElement.setAttribute("tabindex", "-1");
@@ -239,7 +242,7 @@ const IBizMarkDown = /* @__PURE__ */ vue.defineComponent({
           editor.setCodeBlockTheme(customTheme);
         }
         const span = createElement("span", "".concat(fullscreenClassName, " cherry-toolbar-button"));
-        span.title = ibiz.i18n.t("editor.markdown.fullscreen");
+        span.title = ibiz.i18n.t("editor.common.fullscreen");
         span.onclick = onSwitchFullscreen;
         span.appendChild(createCherryIcon("fullscreen"));
         const parentElement = props.disabled ? editor.editor.options.editorDom.parentElement : (_a2 = editor.editor.options.editorDom.parentElement) == null ? void 0 : _a2.querySelector(".cherry-toolbar>.toolbar-right");

package/lib/editor/number-range/ibiz-number-range-picker/ibiz-number-range-picker.cjs

@@ -2,8 +2,8 @@
 
 var vue = require('vue');
 var vue3Util = require('@ibiz-template/vue3-util');
-require('./ibiz-number-range-picker.css');
 var lodashEs = require('lodash-es');
+require('./ibiz-number-range-picker.css');
 
 "use strict";
 const IBizNumberRangePicker = /* @__PURE__ */ vue.defineComponent({

package/lib/editor/radio-button-list/ibiz-radio/ibiz-radio.cjs

@@ -3,6 +3,7 @@
 var vue = require('vue');
 var vue3Util = require('@ibiz-template/vue3-util');
 var qxUtil = require('qx-util');
+var core = require('@ibiz-template/core');
 require('./ibiz-radio.css');
 
 "use strict";
@@ -84,10 +85,13 @@ const IBizRadio = /* @__PURE__ */ vue.defineComponent({
     };
   },
   render() {
+    var _a;
     let _slot;
+    const itemWidth = (_a = this.controller.editorParams) == null ? void 0 : _a.itemwidth;
+    const width = itemWidth ? "".concat(itemWidth, "px") : "";
     return vue.createVNode("div", {
       "class": [this.ns.b(), this.disabled ? this.ns.m("disabled") : "", this.readonly ? this.ns.m("readonly") : "", this.ns.is("show-default", this.showFormDefaultContent), this.ns.is("grid-layout", !!this.controller.rowNumber)],
-      "style": this.controller.rowNumber ? "--ibiz-radio-group-row-number:".concat(this.controller.rowNumber) : "",
+      "style": this.controller.rowNumber ? "".concat(this.ns.cssVarBlockName("group-row-number"), ":").concat(this.controller.rowNumber) : "",
       "ref": "editorRef"
     }, [this.readonly ? this.valueText : this.renderMode !== "tab" ? vue.createVNode(vue.resolveComponent("el-radio-group"), vue.mergeProps({
       "class": this.ns.e("group"),
@@ -95,6 +99,10 @@ const IBizRadio = /* @__PURE__ */ vue.defineComponent({
       "onChange": this.onSelectValueChange
     }, this.$attrs), _isSlot(_slot = this.items.map((_item, index) => this.renderMode === "radio" ? vue.createVNode(vue.resolveComponent("el-radio"), {
       "key": index,
+      "style": {
+        width
+      },
+      "title": core.showTitle(_item.text),
       "label": qxUtil.notNilEmpty(_item.value) ? String(_item.value) : "",
       "disabled": this.disabled || _item.disableSelect === true
     }, {
@@ -106,6 +114,10 @@ const IBizRadio = /* @__PURE__ */ vue.defineComponent({
     }) : vue.createVNode(vue.resolveComponent("el-radio-button"), {
       "key": index,
       "class": [this.ns.e("button"), this.isBtnRoundCorner ? this.ns.em("button", "round-corner") : ""],
+      "style": {
+        width
+      },
+      "title": core.showTitle(_item.text),
       "label": qxUtil.notNilEmpty(_item.value) ? String(_item.value) : "",
       "disabled": this.disabled || _item.disableSelect === true
     }, {
@@ -124,6 +136,10 @@ const IBizRadio = /* @__PURE__ */ vue.defineComponent({
       const disabled = this.disabled || _item.disableSelect === true;
       return vue.createVNode("span", {
         "class": [this.ns.b("tab-item"), this.ns.is("selected", currentValue === value), this.ns.is("disabled", disabled)],
+        "style": {
+          width
+        },
+        "title": core.showTitle(_item.text),
         "onClick": () => {
           if (disabled) {
             return;
@@ -132,7 +148,9 @@ const IBizRadio = /* @__PURE__ */ vue.defineComponent({
         }
       }, [_item.sysImage && vue.createVNode(vue.resolveComponent("iBizIcon"), {
         "icon": _item.sysImage
-      }, null), _item.text || ""]);
+      }, null), vue.createVNode("span", {
+        "class": this.ns.be("tab-item", "text")
+      }, [_item.text || ""])]);
     })])]);
   }
 });

package/lib/editor/radio-button-list/ibiz-radio/ibiz-radio.css

@@ -1 +1 @@
-.ibiz-radio{--ibiz-radio-group-row-number:0}.ibiz-radio .el-radio__label{display:flex;align-items:center}.ibiz-radio .el-radio__label .ibiz-icon{display:flex;margin-right:var(--ibiz-spacing-extra-tight)}.ibiz-radio__text{font-size:var(--ibiz-form-item-font-size);color:var(--ibiz-form-item-text-color)}.ibiz-radio--readonly{font-size:var(--ibiz-form-item-font-size);line-height:var(--ibiz-editor-default-line-height);color:var(--ibiz-form-item-readonly-color)}.ibiz-radio__button--round-corner{margin-right:var(--ibiz-spacing-base-loose)}.ibiz-radio__button--round-corner.el-radio-button.is-active .el-radio-button__inner{color:var(--ibiz-color-primary);background-color:var(--ibiz-color-secondary-light-default);border-color:var(--ibiz-color-secondary-light-default)}.ibiz-radio__button--round-corner.el-radio-button.is-active .el-radio-button__original-radio:checked+.el-radio-button__inner{box-shadow:none}.ibiz-radio__button--round-corner.el-radio-button .el-radio-button__inner{padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);background-color:var(--ibiz-color-tertiary-light-hover);border-color:var(--ibiz-color-tertiary-light-hover);border-radius:var(--ibiz-height-control-default)}.ibiz-radio__button--round-corner.el-radio-button .el-radio-button__inner:nth-last-child(1){margin:0}.ibiz-radio__button--round-corner.el-radio-button.is-disabled.is-active .el-radio-button__inner{border:var(--ibiz-border-thickness-control) solid var(--ibiz-color-disabled-text)}.ibiz-radio__button--round-corner.el-radio-button.is-disabled .el-radio-button__inner{color:var(--ibiz-color-disabled-text);background:var(--ibiz-color-disabled-bg);border-color:var(--ibiz-color-disabled-border)}.ibiz-radio__button .el-radio-button__inner{display:flex;align-items:center}.ibiz-radio__button .el-radio-button__inner .ibiz-icon{display:flex;margin-right:var(--ibiz-spacing-extra-tight)}.ibiz-radio.is-grid-layout .el-radio-group{display:grid;grid-template-columns:repeat(var(--ibiz-radio-group-row-number),1fr)}.ibiz-form-item .ibiz-radio.is-show-default{padding:var(--ibiz-form-item-hover-edit-padding)}.ibiz-radio-tab{display:flex;height:100%;overflow-x:auto;white-space:nowrap}.ibiz-radio-tab-item{position:relative;display:inline-block;display:flex;align-items:center;width:auto;height:100%;padding:var(--ibiz-spacing-base-tight);font-size:var(--ibiz-font-size-regular);cursor:pointer}.ibiz-radio-tab-item:hover{color:var(--ibiz-color-primary)}.ibiz-radio-tab-item .ibiz-icon{display:flex;margin-right:var(--ibiz-spacing-extra-tight)}.ibiz-radio-tab-item.is-selected::after{position:absolute;bottom:2px;left:var(--ibiz-spacing-base-tight);width:calc(100% - 2 * var(--ibiz-spacing-base-tight));height:2px;content:"";background-color:var(--ibiz-color-primary)}.ibiz-radio-tab-item.is-disabled{color:var(--ibiz-color-disabled-text);cursor:not-allowed}.ibiz-radio-tab-item.is-disabled::after{background-color:var(--ibiz-color-disabled-text)}
+.ibiz-radio{--ibiz-radio-group-row-number:0}.ibiz-radio .el-radio__label{display:flex;align-items:center;overflow:hidden}.ibiz-radio .el-radio__label .ibiz-icon{display:flex;margin-right:var(--ibiz-spacing-extra-tight)}.ibiz-radio__text{overflow:hidden;font-size:var(--ibiz-form-item-font-size);color:var(--ibiz-form-item-text-color);text-overflow:ellipsis;white-space:nowrap}.ibiz-radio--readonly{font-size:var(--ibiz-form-item-font-size);line-height:var(--ibiz-editor-default-line-height);color:var(--ibiz-form-item-readonly-color)}.ibiz-radio__button--round-corner{margin-right:var(--ibiz-spacing-base-loose)}.ibiz-radio__button--round-corner.el-radio-button.is-active .el-radio-button__inner{color:var(--ibiz-color-primary);background-color:var(--ibiz-color-secondary-light-default);border-color:var(--ibiz-color-secondary-light-default)}.ibiz-radio__button--round-corner.el-radio-button.is-active .el-radio-button__original-radio:checked+.el-radio-button__inner{box-shadow:none}.ibiz-radio__button--round-corner.el-radio-button .el-radio-button__inner{padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);background-color:var(--ibiz-color-tertiary-light-hover);border-color:var(--ibiz-color-tertiary-light-hover);border-radius:var(--ibiz-height-control-default)}.ibiz-radio__button--round-corner.el-radio-button .el-radio-button__inner:nth-last-child(1){margin:0}.ibiz-radio__button--round-corner.el-radio-button.is-disabled.is-active .el-radio-button__inner{border:var(--ibiz-border-thickness-control) solid var(--ibiz-color-disabled-text)}.ibiz-radio__button--round-corner.el-radio-button.is-disabled .el-radio-button__inner{color:var(--ibiz-color-disabled-text);background:var(--ibiz-color-disabled-bg);border-color:var(--ibiz-color-disabled-border)}.ibiz-radio__button .el-radio-button__inner{display:flex;align-items:center;justify-content:center}.ibiz-radio__button .el-radio-button__inner .ibiz-icon{display:flex;margin-right:var(--ibiz-spacing-extra-tight)}.ibiz-radio__button--text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-radio.is-grid-layout .el-radio-group{display:grid;grid-template-columns:repeat(var(--ibiz-radio-group-row-number),1fr)}.ibiz-form-item .ibiz-radio.is-show-default{padding:var(--ibiz-form-item-hover-edit-padding)}.ibiz-radio-tab{display:flex;height:100%;overflow-x:auto;white-space:nowrap}.ibiz-radio-tab-item{position:relative;display:inline-block;display:flex;align-items:center;justify-content:center;width:auto;height:100%;padding:var(--ibiz-spacing-base-tight);font-size:var(--ibiz-font-size-regular);cursor:pointer}.ibiz-radio-tab-item:hover{color:var(--ibiz-color-primary)}.ibiz-radio-tab-item .ibiz-icon{display:flex;margin-right:var(--ibiz-spacing-extra-tight)}.ibiz-radio-tab-item.is-selected::after{position:absolute;bottom:2px;left:var(--ibiz-spacing-base-tight);width:calc(100% - 2 * var(--ibiz-spacing-base-tight));height:2px;content:"";background-color:var(--ibiz-color-primary)}.ibiz-radio-tab-item.is-disabled{color:var(--ibiz-color-disabled-text);cursor:not-allowed}.ibiz-radio-tab-item.is-disabled::after{background-color:var(--ibiz-color-disabled-text)}.ibiz-radio-tab-item__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

package/lib/editor/slider/ibiz-slider/ibiz-slider.cjs

@@ -117,10 +117,10 @@ const IBizSlider = /* @__PURE__ */ vue.defineComponent({
         pieStyle.value = "height:".concat(pieSize.value, "px;width:").concat(pieSize.value, "px;min-width:unset;min-height:unset;");
       }
       if (pieBg) {
-        pieStyle.value += "--ibiz-editor-slider-pie-bg:".concat(pieBg, ";");
+        pieStyle.value += "".concat(ns.cssVarName("editor-slider-pie-bg"), ":").concat(pieBg, ";");
       }
       if (piePercentBg) {
-        pieStyle.value += "--ibiz-editor-slider-pie-percent-bg:".concat(piePercentBg, ";");
+        pieStyle.value += "".concat(ns.cssVarName("editor-slider-pie-percent-bg"), ":").concat(piePercentBg, ";");
       }
       pieStyle.value += "animation-delay:-".concat(currentVal.value, "s;");
     };

package/lib/editor/switch/ibiz-switch-tristate/ibiz-switch-tristate.cjs

@@ -0,0 +1,72 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./ibiz-switch-tristate.css');
+
+"use strict";
+const IBizSwitchTriState = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizSwitchTriState",
+  props: vue3Util.getSwitchProps(),
+  emits: vue3Util.getEditorEmits(),
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("switch-tristate");
+    const c = props.controller;
+    const lastVal = vue.ref(null);
+    const currentVal = vue.ref(null);
+    vue.watch(() => props.value, (newVal, oldVal) => {
+      if (newVal !== oldVal) {
+        if (newVal === 0) {
+          currentVal.value = 0;
+        } else if (newVal === 1) {
+          currentVal.value = 1;
+        } else {
+          currentVal.value = null;
+        }
+      }
+    }, {
+      immediate: true
+    });
+    const onSwitchClick = () => {
+      if (props.disabled || props.readonly) {
+        return;
+      }
+      if (currentVal.value === null) {
+        if (lastVal.value === null || lastVal.value === 0) {
+          lastVal.value = null;
+          emit("change", 1);
+        }
+        if (lastVal.value === 1) {
+          lastVal.value = null;
+          emit("change", 0);
+        }
+      }
+      if (currentVal.value === 1) {
+        lastVal.value = 1;
+        emit("change", null);
+      }
+      if (currentVal.value === 0) {
+        lastVal.value = 0;
+        emit("change", null);
+      }
+    };
+    return {
+      ns,
+      c,
+      currentVal,
+      onSwitchClick
+    };
+  },
+  render() {
+    return vue.createVNode("div", {
+      "class": [this.ns.b()]
+    }, [vue.createVNode("div", {
+      "class": [this.ns.e("switch-wrapper"), this.ns.is("left", this.currentVal === 0), this.ns.is("center", this.currentVal === null), this.ns.is("right", this.currentVal === 1), this.ns.is("disabled", this.disabled || this.readonly)],
+      "onClick": this.onSwitchClick
+    }, null)]);
+  }
+});
+
+exports.IBizSwitchTriState = IBizSwitchTriState;

package/lib/editor/switch/ibiz-switch-tristate/ibiz-switch-tristate.css

@@ -0,0 +1 @@
+.ibiz-switch-tristate{--ibiz-switch-tristate-leftbg:var(--ibiz-color-danger);--ibiz-switch-tristate-rightbg:var(--ibiz-color-primary);--ibiz-switch-tristate-centerbg:var(--ibiz-color-fill-1);display:flex;flex-direction:column;justify-content:center;width:100%;height:32px}.ibiz-switch-tristate__switch-wrapper{position:relative;display:inline-block;width:44px;height:20px;cursor:pointer;border-radius:10px}.ibiz-switch-tristate__switch-wrapper::after{position:absolute;top:2px;width:16px;height:16px;content:"";background-color:var(--ibiz-color-white);border-radius:50%;transition:all .3s}.ibiz-switch-tristate__switch-wrapper.is-left{background-color:var(--ibiz-switch-tristate-leftbg)}.ibiz-switch-tristate__switch-wrapper.is-left::after{left:2px}.ibiz-switch-tristate__switch-wrapper.is-right{background-color:var(--ibiz-switch-tristate-rightbg)}.ibiz-switch-tristate__switch-wrapper.is-right::after{left:26px}.ibiz-switch-tristate__switch-wrapper.is-center{background-color:var(--ibiz-switch-tristate-centerbg)}.ibiz-switch-tristate__switch-wrapper.is-center::after{left:14px}.ibiz-switch-tristate__switch-wrapper.is-disabled{cursor:not-allowed}.ibiz-switch-tristate__switch-wrapper.is-disabled::before{position:absolute;top:0;left:0;width:100%;height:100%;content:"";background-color:var(--ibiz-color-bg-4);opacity:.3}

package/lib/editor/switch/index.cjs

@@ -1,11 +1,13 @@
 'use strict';
 
 var ibizSwitch = require('./ibiz-switch/ibiz-switch.cjs');
+var ibizSwitchTristate = require('./ibiz-switch-tristate/ibiz-switch-tristate.cjs');
 var switchEditor_controller = require('./switch-editor.controller.cjs');
 var switchEditor_provider = require('./switch-editor.provider.cjs');
 
 "use strict";
 
 exports.IBizSwitch = ibizSwitch.IBizSwitch;
+exports.IBizSwitchTriState = ibizSwitchTristate.IBizSwitchTriState;
 exports.SwitchEditorController = switchEditor_controller.SwitchEditorController;
 exports.SwitchEditorProvider = switchEditor_provider.SwitchEditorProvider;