@ibiz-template/vue3-components 0.7.41-alpha.13 → 0.7.41-alpha.130

package/lib/editor/list-box/ibiz-list-box/ibiz-list-box.cjs

@@ -19,6 +19,10 @@ const IBizListBox = /* @__PURE__ */ vue.defineComponent({
   }) {
     const ns = vue3Util.useNamespace("list-box");
     const c = props.controller;
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(c);
     const editorModel = c.model;
     let multiple = false;
     if (editorModel.editorParams) {
@@ -26,6 +30,30 @@ const IBizListBox = /* @__PURE__ */ vue.defineComponent({
         multiple = c.toBoolean(editorModel.editorParams.multiple);
       }
     }
+    const getItemChildClass = (params) => {
+      return [{
+        class: semanticClass("editor.item.input", params),
+        selector: ".el-radio__input"
+      }, {
+        class: semanticClass("editor.item.input", params),
+        selector: ".el-checkbox__input"
+      }, {
+        class: semanticClass("editor.item.label", params),
+        selector: ".".concat(ns.em("item", "label"))
+      }];
+    };
+    const getItemChildStyle = (params) => {
+      return [{
+        style: semanticStyle("editor.item.input", params),
+        selector: ".el-radio__input"
+      }, {
+        style: semanticStyle("editor.item.input", params),
+        selector: ".el-checkbox__input"
+      }, {
+        style: semanticStyle("editor.item.label", params),
+        selector: ".".concat(ns.em("item", "label"))
+      }];
+    };
     const {
       useInFocusAndBlur,
       useInValueChange
@@ -38,16 +66,31 @@ const IBizListBox = /* @__PURE__ */ vue.defineComponent({
     });
     const codeList = c.codeList;
     const editorType = editorModel.editorType;
+    const valueSeparator = (codeList == null ? void 0 : codeList.valueSeparator) || ",";
     const items = vue.ref([]);
+    const autoSelectFirstOption = () => {
+      const item = items.value[0];
+      if (!c.autoSelectFirstOption || props.value || !item)
+        return;
+      let value;
+      if (multiple) {
+        const selections = c.allItems ? items.value.filter((_item) => _item.value !== c.allItemsValue).map((_item) => _item.value) : [item.value];
+        value = c.model.valueType === "SIMPLES" ? selections : selections.join(valueSeparator);
+      } else {
+        value = item.value;
+      }
+      emit("change", value, void 0, true);
+    };
     const loadListBoxItems = async () => {
       if (Object.is("LISTBOX", editorType)) {
         const controller = c;
         controller.loadCodeList(props.data).then((_codeList) => {
           if (multiple) {
             items.value = controller.handleCodeListAllItems(_codeList);
-            return;
+          } else {
+            items.value = _codeList;
           }
-          items.value = _codeList;
+          autoSelectFirstOption();
         });
       } else if (Object.is("LISTBOXPICKUP", editorType)) {
         const controller = c;
@@ -58,11 +101,17 @@ const IBizListBox = /* @__PURE__ */ vue.defineComponent({
               value: item[controller.keyName],
               text: item[controller.textName]
             }));
+            autoSelectFirstOption();
           }
         }
       }
     };
-    loadListBoxItems();
+    vue.watch(() => props.data, () => {
+      loadListBoxItems();
+    }, {
+      immediate: true,
+      deep: true
+    });
     const fn = (data) => {
       if (data) {
         if (Object.is("LISTBOX", editorType) && multiple) {
@@ -80,10 +129,6 @@ const IBizListBox = /* @__PURE__ */ vue.defineComponent({
       return "STR";
     });
     const calcOrMode = runtime.useCalcOrMode(currentMode.value, c.model.valueType);
-    let valueSeparator = ",";
-    if (codeList && codeList.valueSeparator) {
-      valueSeparator = codeList.valueSeparator;
-    }
     const {
       getSelection,
       getSelectionValue
@@ -152,25 +197,39 @@ const IBizListBox = /* @__PURE__ */ vue.defineComponent({
     return {
       ns,
       items,
-      selectArray,
-      onSelectArrayChange,
       multiple,
       editorRef,
-      showFormDefaultContent
+      selectArray,
+      semanticClass,
+      semanticStyle,
+      showFormDefaultContent,
+      getItemChildClass,
+      getItemChildStyle,
+      onSelectArrayChange
     };
   },
   render() {
     let _slot, _slot2;
     return vue.createVNode("div", {
-      "class": [this.ns.b(), this.ns.is("show-default", this.showFormDefaultContent)],
-      "ref": "editorRef"
+      "class": [this.ns.b(), this.semanticClass("editor.root"), this.ns.is("show-default", this.showFormDefaultContent)],
+      "ref": "editorRef",
+      "style": this.semanticStyle("editor.root")
     }, [this.multiple ? vue.createVNode(vue.resolveComponent("el-checkbox-group"), vue.mergeProps({
-      "class": this.ns.b("checkbox"),
+      "class": [this.ns.b("checkbox"), this.ns.e("content"), this.semanticClass("editor.content")],
+      "style": this.semanticStyle("editor.content"),
       "modelValue": this.selectArray,
       "onChange": this.onSelectArrayChange
-    }, this.$attrs), _isSlot(_slot = this.items.map((item, index) => vue.createVNode(vue.resolveComponent("el-checkbox"), {
+    }, this.$attrs), _isSlot(_slot = this.items.map((item, index) => vue.withDirectives(vue.createVNode(vue.resolveComponent("el-checkbox"), {
       "key": index,
       "label": item.value,
+      "class": [this.ns.e("item"), this.semanticClass("editor.item", {
+        item,
+        index
+      })],
+      "style": this.semanticStyle("editor.item", {
+        item,
+        index
+      }),
       "disabled": this.disabled || this.readonly || item.disableSelect === true
     }, {
       default: () => {
@@ -183,18 +242,33 @@ const IBizListBox = /* @__PURE__ */ vue.defineComponent({
           });
         }
         return vue.createVNode("span", {
-          "class": this.ns.e("text")
+          "class": [this.ns.e("text"), this.ns.em("item", "label")]
         }, [item.text]);
       }
-    }))) ? _slot : {
+    }), [[vue.resolveDirective("child-class"), this.getItemChildClass({
+      item,
+      index
+    })], [vue.resolveDirective("child-style"), this.getItemChildStyle({
+      item,
+      index
+    })]]))) ? _slot : {
       default: () => [_slot]
     }) : vue.createVNode(vue.resolveComponent("el-radio-group"), vue.mergeProps({
-      "class": this.ns.b("radio"),
+      "class": [this.ns.b("radio"), this.ns.e("content"), this.semanticClass("editor.content")],
+      "style": this.semanticStyle("editor.content"),
       "modelValue": this.selectArray[0]
-    }, this.$attrs), _isSlot(_slot2 = this.items.map((item, index) => vue.createVNode(vue.resolveComponent("el-radio"), {
+    }, this.$attrs), _isSlot(_slot2 = this.items.map((item, index) => vue.withDirectives(vue.createVNode(vue.resolveComponent("el-radio"), {
       "key": index,
       "label": item.value,
       "disabled": this.disabled || this.readonly || item.disableSelect === true,
+      "class": [this.ns.e("item"), this.semanticClass("editor.item", {
+        item,
+        index
+      })],
+      "style": this.semanticStyle("editor.item", {
+        item,
+        index
+      }),
       "onChange": () => {
         this.onSelectArrayChange(item.value);
       }
@@ -209,10 +283,16 @@ const IBizListBox = /* @__PURE__ */ vue.defineComponent({
           });
         }
         return vue.createVNode("span", {
-          "class": this.ns.e("text")
+          "class": [this.ns.e("text"), this.ns.em("item", "label")]
         }, [item.text]);
       }
-    }))) ? _slot2 : {
+    }), [[vue.resolveDirective("child-class"), this.getItemChildClass({
+      item,
+      index
+    })], [vue.resolveDirective("child-style"), this.getItemChildStyle({
+      item,
+      index
+    })]]))) ? _slot2 : {
       default: () => [_slot2]
     })]);
   }

package/lib/editor/list-box/ibiz-list-box/ibiz-list-box.css

@@ -1 +1 @@
-.ibiz-list-box{height:100%;overflow:auto}.ibiz-list-box .ibiz-list-box-radio{display:flex;flex-flow:column nowrap;align-items:flex-start;justify-content:flex-start}.ibiz-list-box .ibiz-list-box-radio .el-radio .el-radio__label{font-size:var(--ibiz-form-item-font-size);color:var(--ibiz-form-item-text-color)}.ibiz-list-box .ibiz-list-box-checkbox{display:flex;flex-flow:column nowrap;align-items:flex-start;justify-content:flex-start}.ibiz-list-box .ibiz-list-box-checkbox .el-checkbox .el-checkbox__label{font-size:var(--ibiz-form-item-font-size);color:var(--ibiz-form-item-text-color)}.ibiz-form-item .ibiz-list-box.is-show-default{padding:var(--ibiz-form-item-hover-edit-padding)}
+.ibiz-list-box{height:100%;overflow:auto;--ibiz-list-box-text-color:var(--ibiz-form-item-text-color);--ibiz-list-box-font-size:var(--ibiz-form-item-font-size);--ibiz-list-box-hover-edit-padding:var(--ibiz-form-item-hover-edit-padding)}.ibiz-list-box .ibiz-list-box-radio{display:flex;flex-flow:column nowrap;align-items:flex-start;justify-content:flex-start}.ibiz-list-box .ibiz-list-box-radio .el-radio .el-radio__label{font-size:var(--ibiz-list-box-font-size);color:var(--ibiz-list-box-text-color)}.ibiz-list-box .ibiz-list-box-checkbox{display:flex;flex-flow:column nowrap;align-items:flex-start;justify-content:flex-start}.ibiz-list-box .ibiz-list-box-checkbox .el-checkbox .el-checkbox__label{font-size:var(--ibiz-list-box-font-size);color:var(--ibiz-list-box-text-color)}.ibiz-form-item .ibiz-list-box.is-show-default{padding:var(--ibiz-list-box-hover-edit-padding)}

package/lib/editor/list-box/list-box-editor.controller.cjs

@@ -19,13 +19,24 @@ class ListBoxEditorController extends runtime.CodeListEditorController {
      * @Date: 2023-05-24 10:55:50
      */
     __publicField(this, "codeList");
+    /**
+     * @description 自动选中第一个
+     * @memberof ListBoxEditorController
+     */
+    __publicField(this, "autoSelectFirstOption", false);
   }
   async onInit() {
+    var _a;
     super.onInit();
     if (this.model.appCodeListId) {
       const app = await ibiz.hub.getApp(this.context.srfappid);
       this.codeList = app.codeList.getCodeList(this.model.appCodeListId);
     }
+    if ((_a = this.editorParams) == null ? void 0 : _a.autoselectfirstoption) {
+      this.autoSelectFirstOption = this.toBoolean(
+        this.editorParams.autoselectfirstoption
+      );
+    }
   }
 }
 

package/lib/editor/list-box/list-box-picker-editor.controller.cjs

@@ -42,9 +42,20 @@ class ListBoxPickerEditorController extends runtime.EditorController {
      * @type {IAcItemProvider}
      */
     __publicField(this, "acItemProvider");
+    /**
+     * @description 自动选中第一个
+     * @memberof ListBoxPickerEditorController
+     */
+    __publicField(this, "autoSelectFirstOption", false);
   }
   async onInit() {
+    var _a;
     super.onInit();
+    if ((_a = this.editorParams) == null ? void 0 : _a.autoselectfirstoption) {
+      this.autoSelectFirstOption = this.toBoolean(
+        this.editorParams.autoselectfirstoption
+      );
+    }
     if (this.model.editorType === "LISTBOXPICKUP") {
       if (this.model.appDEDataSetId) {
         this.interfaceName = this.model.appDEDataSetId;
@@ -55,11 +66,8 @@ class ListBoxPickerEditorController extends runtime.EditorController {
           this.model.appDataEntityId,
           this.context.srfappid
         );
-        if (this.deACMode) {
-          if (this.deACMode.itemSysPFPluginId) {
-            this.acItemProvider = await runtime.getAcItemProvider(this.deACMode);
-          }
-        }
+        if (this.deACMode)
+          this.acItemProvider = await runtime.getAcItemProvider(this.deACMode);
       }
     }
   }

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

@@ -2,7 +2,9 @@
 
 var vue = require('vue');
 var vue3Util = require('@ibiz-template/vue3-util');
+var ramda = require('ramda');
 var index = require('../../../node_modules/.pnpm/@amap_amap-jsapi-loader@1.0.1_patch_hash_73bpcwbs2m5ip4qppmz6a7epsa/node_modules/@amap/amap-jsapi-loader/dist/index.cjs');
+var ibizMapUtil = require('./ibiz-map-util.cjs');
 require('./ibiz-map-picker.css');
 
 "use strict";
@@ -19,7 +21,81 @@ const IBizMapPicker = /* @__PURE__ */ vue.defineComponent({
     var _a;
     const ns = vue3Util.useNamespace("map-picker");
     const c = props.controller;
-    const editorItem = (_a = c.model.editorItems) == null ? void 0 : _a[0];
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(c);
+    const childClass = [{
+      class: semanticClass("editor.input"),
+      selector: ".el-input__inner"
+    }, {
+      class: semanticClass("editor.input.suffix"),
+      selector: ".el-input__suffix"
+    }];
+    const dialogChildClass = [{
+      class: semanticClass("editor.search"),
+      selector: ".el-input__inner"
+    }, {
+      class: semanticClass("editor.search.suffix"),
+      selector: ".el-input__suffix"
+    }, {
+      class: semanticClass("editor.markerList"),
+      selector: ".".concat(ns.e("preset-markers-inner"))
+    }, {
+      class: semanticClass("editor.markerList.item"),
+      selector: ".".concat(ns.e("preset-marker"))
+    }, {
+      class: semanticClass("editor.map"),
+      selector: ".".concat(ns.b("dialog-map-container"))
+    }, {
+      class: semanticClass("editor.marker"),
+      selector: ".amap-marker"
+    }, {
+      class: semanticClass("editor.marker.label"),
+      selector: ".amap-content-body"
+    }, {
+      class: semanticClass("editor.marker.label"),
+      selector: ".".concat(ns.b("dialog-map-marker-text"))
+    }, {
+      class: semanticClass("editor.marker.index"),
+      selector: ".".concat(ns.b("dialog-map-marker-index"))
+    }];
+    const childStyle = [{
+      style: semanticStyle("editor.input"),
+      selector: ".el-input__inner"
+    }, {
+      style: semanticStyle("editor.input.suffix"),
+      selector: ".el-input__suffix"
+    }];
+    const dialogChildStyle = [{
+      style: semanticStyle("editor.search"),
+      selector: ".el-input__inner"
+    }, {
+      style: semanticStyle("editor.search.suffix"),
+      selector: ".el-input__suffix"
+    }, {
+      style: semanticStyle("editor.markerList"),
+      selector: ".".concat(ns.e("preset-markers-inner"))
+    }, {
+      style: semanticStyle("editor.markerList.item"),
+      selector: ".".concat(ns.e("preset-marker"))
+    }, {
+      style: semanticStyle("editor.map"),
+      selector: ".".concat(ns.b("dialog-map-container"))
+    }, {
+      style: semanticStyle("editor.marker"),
+      selector: ".amap-marker"
+    }, {
+      style: semanticStyle("editor.marker.label"),
+      selector: ".amap-content-body"
+    }, {
+      style: semanticStyle("editor.marker.label"),
+      selector: ".".concat(ns.b("dialog-map-marker-text"))
+    }, {
+      style: semanticStyle("editor.marker.index"),
+      selector: ".".concat(ns.b("dialog-map-marker-index"))
+    }];
+    const editorItem = (_a = c.model.editorItems) == null ? void 0 : _a.map((x) => x.id).join(",");
     const inputRef = vue.ref();
     const searchInputRef = vue.ref();
     const mapContainerRef = vue.ref();
@@ -27,6 +103,8 @@ const IBizMapPicker = /* @__PURE__ */ vue.defineComponent({
     const dialogVisible = vue.ref(false);
     const isLoading = vue.ref(false);
     const searchValue = vue.ref("");
+    const showPresetMarker = vue.ref(false);
+    const customMarkers = vue.ref([]);
     const showFormDefaultContent = vue.computed(() => {
       if (props.controlParams && props.controlParams.editmode === "hover" && !props.readonly) {
         return true;
@@ -43,7 +121,19 @@ const IBizMapPicker = /* @__PURE__ */ vue.defineComponent({
     };
     const clearMarker = () => {
       if (marker) {
-        marker.setMap(null);
+        const {
+          lng,
+          lat
+        } = marker.getPosition();
+        const index = customMarkers.value.findIndex((x) => {
+          const point = x.getPosition();
+          return point.lng === lng && point.lat === lat;
+        });
+        if (index !== -1) {
+          marker.setContent(c.presetMarkers[index].content);
+        } else {
+          marker.setMap(null);
+        }
         marker = void 0;
       }
     };
@@ -77,12 +167,19 @@ const IBizMapPicker = /* @__PURE__ */ vue.defineComponent({
           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";
+          markerImg.src = c.markerIcon;
           markerContent.appendChild(markerImg);
           const markerText = document.createElement("span");
           markerText.className = ns.b("dialog-map-marker-text");
           markerText.textContent = address;
           markerContent.appendChild(markerText);
+          const extData = currentMarker.getExtData();
+          if (extData && ramda.isNotNil(extData.index)) {
+            const markerIndex = document.createElement("span");
+            markerIndex.className = ns.b("dialog-map-marker-index");
+            markerIndex.textContent = extData.index;
+            markerContent.appendChild(markerIndex);
+          }
           marker.setContent(markerContent);
           marker.setMap(map);
           addressInfo.address = address;
@@ -119,10 +216,17 @@ const IBizMapPicker = /* @__PURE__ */ vue.defineComponent({
       if (!mapContainerRef.value) {
         return;
       }
-      map = new AMap.Map(mapContainerRef.value, {
+      const params = {
         viewMode: "3D",
         zoom: 11
-      });
+      };
+      if (c.defaultCenter.length > 0) {
+        params.center = c.defaultCenter;
+      }
+      map = new AMap.Map(mapContainerRef.value, params);
+      if (c.defaultCity) {
+        map == null ? void 0 : map.setCity(c.defaultCity);
+      }
       map == null ? void 0 : map.on("click", (e) => {
         const lnglat = e.lnglat;
         const lng = lnglat.lng;
@@ -132,6 +236,32 @@ const IBizMapPicker = /* @__PURE__ */ vue.defineComponent({
           getAddress(lng, lat);
         }
       });
+      map == null ? void 0 : map.on("complete", () => {
+        showPresetMarker.value = true;
+      });
+      if (c.presetMarkers.length > 0) {
+        c.presetMarkers.forEach((point, index) => {
+          const presetMarker = new AMap.Marker({
+            position: [point.longitude, point.latitude],
+            extData: {
+              index: index + 1
+            },
+            ...point
+          });
+          customMarkers.value.push(presetMarker);
+          presetMarker.on("click", (event) => {
+            const lnglat = event.lnglat;
+            const lng = lnglat.lng;
+            const lat = lnglat.lat;
+            if (lng != null && lat != null) {
+              clearMarker();
+              marker = presetMarker;
+              getAddress(lng, lat);
+            }
+          });
+          map == null ? void 0 : map.add(presetMarker);
+        });
+      }
       const AMapUI = window.AMapUI;
       if (!AMapUI) {
         return;
@@ -180,8 +310,8 @@ const IBizMapPicker = /* @__PURE__ */ vue.defineComponent({
           initMap();
         }
         searchValue.value = props.value || "";
-        if (editorItem && editorItem.id) {
-          const [longitudeName, latitudeName] = editorItem.id.split(",");
+        if (editorItem) {
+          const [longitudeName, latitudeName] = editorItem.split(",");
           if (props.data) {
             const longitude = props.data[longitudeName];
             const latitude = props.data[latitudeName];
@@ -196,8 +326,8 @@ const IBizMapPicker = /* @__PURE__ */ vue.defineComponent({
     };
     const handleConfirm = () => {
       dialogVisible.value = false;
-      if (editorItem && editorItem.id) {
-        const [longitudeName, latitudeName] = editorItem.id.split(",");
+      if (editorItem) {
+        const [longitudeName, latitudeName] = editorItem.split(",");
         if (longitudeName) {
           emit("change", addressInfo.longitude != null ? addressInfo.longitude : null, longitudeName);
         }
@@ -219,8 +349,8 @@ const IBizMapPicker = /* @__PURE__ */ vue.defineComponent({
       clearMarker();
     };
     const handleClear = () => {
-      if (editorItem && editorItem.id) {
-        const [longitudeName, latitudeName] = editorItem.id.split(",");
+      if (editorItem) {
+        const [longitudeName, latitudeName] = editorItem.split(",");
         if (longitudeName) {
           emit("change", null, longitudeName);
         }
@@ -240,22 +370,63 @@ const IBizMapPicker = /* @__PURE__ */ vue.defineComponent({
     vue.onUnmounted(() => {
       map == null ? void 0 : map.destroy();
     });
+    const renderPresetMarkers = () => {
+      if (!c.presetMarkers.length)
+        return null;
+      return vue.createVNode("div", {
+        "class": [ns.e("preset-markers"), ns.is("active", showPresetMarker.value)]
+      }, [vue.createVNode("div", {
+        "class": ns.e("preset-markers-inner")
+      }, [c.presetMarkers.map((point, index) => {
+        const title = ibizMapUtil.getAddressTitle(point.title);
+        return vue.createVNode("div", {
+          "class": [ns.e("preset-marker")],
+          "onClick": () => {
+            clearMarker();
+            marker = customMarkers.value[index];
+            getAddress(point.longitude, point.latitude);
+          }
+        }, [vue.createVNode("div", {
+          "class": ns.e("preset-marker-index"),
+          "style": {
+            backgroundImage: "url(".concat(c.markerIcon, ")")
+          }
+        }, [vue.createVNode("span", null, [index + 1])]), vue.createVNode("div", {
+          "class": ns.e("preset-marker-content")
+        }, [vue.createVNode("div", {
+          "class": ns.e("preset-marker-title")
+        }, [title]), vue.createVNode("div", {
+          "class": ns.e("preset-marker-address"),
+          "title": point.title
+        }, [ibiz.i18n.t("editor.mapPicker.address"), vue.createTextVNode(": "), point.title])]), point.icon ? vue.createVNode("img", {
+          "src": point.icon,
+          "alt": point.title
+        }, null) : null]);
+      })])]);
+    };
     return {
-      ns,
       c,
+      ns,
       inputRef,
-      searchInputRef,
-      mapContainerRef,
-      searchResultContainerRef,
-      dialogVisible,
       isLoading,
+      childClass,
+      childStyle,
       searchValue,
+      dialogVisible,
+      semanticClass,
+      semanticStyle,
+      searchInputRef,
+      mapContainerRef,
+      dialogChildClass,
+      dialogChildStyle,
       showFormDefaultContent,
+      searchResultContainerRef,
       handleShow,
-      handleConfirm,
       handleClose,
       handleClear,
-      handleSearchClear
+      handleConfirm,
+      handleSearchClear,
+      renderPresetMarkers
     };
   },
   render() {
@@ -273,7 +444,7 @@ const IBizMapPicker = /* @__PURE__ */ vue.defineComponent({
     if (this.readonly) {
       content = this.value;
     } else {
-      content = [vue.createVNode(vue.resolveComponent("el-input"), {
+      content = [vue.withDirectives(vue.createVNode(vue.resolveComponent("el-input"), {
         "class": this.ns.b("input"),
         "ref": "inputRef",
         "model-value": this.value,
@@ -282,9 +453,8 @@ const IBizMapPicker = /* @__PURE__ */ vue.defineComponent({
         "onFocus": this.handleShow
       }, {
         suffix: () => {
-          if (!this.value || this.disabled) {
+          if (!this.value || this.disabled)
             return;
-          }
           return vue.createVNode("i", {
             "class": "el-icon el-input__icon el-input__clear",
             "onClick": (e) => {
@@ -293,8 +463,9 @@ const IBizMapPicker = /* @__PURE__ */ vue.defineComponent({
             }
           }, [icon]);
         }
-      }), vue.createVNode(vue.resolveComponent("el-dialog"), {
-        "class": this.ns.b("dialog"),
+      }), [[vue.resolveDirective("child-class"), this.childClass], [vue.resolveDirective("child-style"), this.childStyle]]), vue.createVNode(vue.resolveComponent("el-dialog"), {
+        "class": [this.ns.b("dialog"), this.semanticClass("editor.popup")],
+        "style": this.semanticStyle("editor.popup"),
         "modelValue": this.dialogVisible,
         "onUpdate:modelValue": ($event) => this.dialogVisible = $event,
         "title": ibiz.i18n.t("editor.mapPicker.title"),
@@ -304,7 +475,7 @@ const IBizMapPicker = /* @__PURE__ */ vue.defineComponent({
         "onClose": this.handleClose
       }, {
         default: () => {
-          return vue.createVNode("div", {
+          return vue.withDirectives(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" : "")
@@ -330,7 +501,7 @@ const IBizMapPicker = /* @__PURE__ */ vue.defineComponent({
               e.stopPropagation();
               this.handleSearchClear();
             }
-          }, [icon])])]) : null])]), vue.withDirectives(vue.createVNode("div", {
+          }, [icon])])]) : null, this.renderPresetMarkers()])]), vue.withDirectives(vue.createVNode("div", {
             "class": this.ns.b("dialog-map-content")
           }, [vue.createVNode("div", {
             "class": this.ns.b("dialog-map-container"),
@@ -338,7 +509,7 @@ const IBizMapPicker = /* @__PURE__ */ vue.defineComponent({
           }, null), vue.createVNode("div", {
             "class": this.ns.b("dialog-search-result-container"),
             "ref": "searchResultContainerRef"
-          }, null)]), [[vue.resolveDirective("loading"), this.isLoading]])]);
+          }, null)]), [[vue.resolveDirective("loading"), this.isLoading]])]), [[vue.resolveDirective("child-class"), this.dialogChildClass], [vue.resolveDirective("child-style"), this.dialogChildStyle]]);
         },
         footer: () => {
           let _slot;
@@ -346,6 +517,8 @@ const IBizMapPicker = /* @__PURE__ */ vue.defineComponent({
             "class": this.ns.b("dialog-footer")
           }, [vue.createVNode(vue.resolveComponent("el-button"), {
             "type": "primary",
+            "class": [this.ns.be("dialog-footer", "button"), this.semanticClass("editor.button")],
+            "style": this.semanticStyle("editor.button"),
             "disabled": this.isLoading,
             "onClick": this.handleConfirm
           }, _isSlot(_slot = ibiz.i18n.t("editor.common.confirm")) ? _slot : {
@@ -361,7 +534,8 @@ const IBizMapPicker = /* @__PURE__ */ vue.defineComponent({
       "placeHolder": this.c.placeHolder
     }, null)]);
     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)]
+      "class": [this.ns.b(), this.semanticClass("editor.root"), this.disabled ? this.ns.m("disabled") : "", this.readonly ? this.ns.m("readonly") : "", this.ns.is("show-default", this.showFormDefaultContent)],
+      "style": this.semanticStyle("editor.root")
     }, [this.showFormDefaultContent && formDefaultContent, content]);
   }
 });

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

@@ -1 +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}
+.ibiz-map-picker{--ibiz-map-picker-font-size:var(--ibiz-form-item-font-size);--ibiz-map-picker-font-weight:var(--ibiz-form-item-regular);--ibiz-map-picker-line-height:var(--ibiz-form-item-line-height);--ibiz-map-picker-readonly-color:var(--ibiz-form-item-readonly-color);--ibiz-map-picker-hover-edit-padding:var(--ibiz-form-item-hover-edit-padding);font-size:var(--ibiz-map-picker-font-size);font-weight:var(--ibiz-map-picker-regular)}.ibiz-map-picker--readonly{height:auto;overflow:auto;line-height:var(--ibiz-map-picker-line-height);color:var(--ibiz-map-picker-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%;--ibiz-map-picker-font-size:var(--ibiz-form-item-font-size);--ibiz-map-picker-font-weight:var(--ibiz-form-item-regular);--ibiz-map-picker-line-height:var(--ibiz-form-item-line-height);--ibiz-map-picker-readonly-color:var(--ibiz-form-item-readonly-color);--ibiz-map-picker-hover-edit-padding:var(--ibiz-form-item-hover-edit-padding);--ibiz-map-picker-sugg-bg-color:var(--ibiz-color-bg-1);--ibiz-map-picker-sugg-hover-bg-color:var(--ibiz-color-fill-0);--ibiz-map-picker-sugg-border-color:var(--ibiz-color-border);--ibiz-map-picker-marker-bg-color:#3d93fd;--ibiz-map-picker-marker-border-radius:var(--ibiz-border-radius-small);--ibiz-map-picker-marker-font-size:var(--ibiz-font-size-small);--ibiz-map-picker-marker-text-color:var(--ibiz-color-white);--ibiz-map-picker-preset-marker-index-color:var(--ibiz-color-white);--ibiz-map-picker-preset-marker-top:var(--ibiz-editor-default-line-height);--ibiz-map-picker-preset-marker-bg-color:var(--ibiz-color-bg-0);--ibiz-map-picker-preset-marker-box-shadow:var(--ibiz-shadow-elevated);--ibiz-map-picker-preset-marker-hover-bg-color:var(--ibiz-editor-hover-bg-color);--ibiz-map-picker-preset-marker-border-color:var(--ibiz-color-border);--ibiz-map-picker-preset-marker-font-size:var(--ibiz-font-size-small);--ibiz-map-picker-preset-marker-text-color:var(--ibiz-color-text-3);--ibiz-map-picker-preset-marker-line-height:var(--ibiz-editor-default-line-height);--ibiz-map-picker-search-result-bg-color:var(--ibiz-color-white);--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-map-picker-sugg-bg-color);border-bottom:1px solid var(--ibiz-map-picker-sugg-border-color)}.ibiz-map-picker-dialog .amap-ui-poi-picker-sugg-container{background-color:var(--ibiz-map-picker-sugg-bg-color);border-color:var(--ibiz-map-picker-sugg-border-color)}.ibiz-map-picker-dialog .amap-ui-poi-picker-sugg-container .sugg-item{border-color:var(--ibiz-map-picker-sugg-border-color)}.ibiz-map-picker-dialog .amap-ui-poi-picker-sugg-container .sugg-item:hover{background-color:var(--ibiz-map-picker-sugg-hover-bg-color)}.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:var(--ibiz-map-picker-search-result-bg-color)}.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:var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-tight);font-size:var(--ibiz-map-picker-marker-font-size);color:var(--ibiz-map-picker-marker-text-color);white-space:nowrap;background-color:var(--ibiz-map-picker-marker-bg-color);border-radius:var(--ibiz-map-picker-marker-border-radius);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-map-picker-hover-edit-padding);font-family:Arial,sans-serif;font-size:var(--ibiz-map-picker-font-size);line-height:var(--ibiz-map-picker-line-height);color:var(--ibiz-map-picker-text-color);word-wrap:break-word;white-space:pre-wrap}.ibiz-map-picker-dialog-map-marker-index{position:absolute;top:2px;left:50%;color:var(--ibiz-map-picker-preset-marker-index-color);transform:translate(-50%)}.ibiz-map-picker-dialog-search-input .ibiz-map-picker__preset-markers{position:absolute;top:var(--ibiz-map-picker-preset-marker-top);left:0;display:grid;grid-template-rows:0fr;width:350px;background-color:var(--ibiz-map-picker-preset-marker-bg-color);box-shadow:var(--ibiz-map-picker-preset-marker-box-shadow);transition:grid-template-rows .5s ease}.ibiz-map-picker-dialog-search-input .ibiz-map-picker__preset-markers.is-active{grid-template-rows:1fr;padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-tight)}.ibiz-map-picker-dialog-search-input .ibiz-map-picker__preset-markers-inner{max-height:300px;overflow:hidden auto}.ibiz-map-picker-dialog-search-input .ibiz-map-picker__preset-marker{display:flex;align-items:center;padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);cursor:pointer}.ibiz-map-picker-dialog-search-input .ibiz-map-picker__preset-marker:hover{background-color:var(--ibiz-map-picker-preset-marker-hover-bg-color)}.ibiz-map-picker-dialog-search-input .ibiz-map-picker__preset-marker img{width:46px;height:46px;margin-left:var(--ibiz-spacing-tight)}.ibiz-map-picker-dialog-search-input .ibiz-map-picker__preset-marker+.ibiz-map-picker__preset-marker{border-top:1px solid var(--ibiz-map-picker-preset-marker-border-color)}.ibiz-map-picker-dialog-search-input .ibiz-map-picker__preset-marker-content{width:calc(100% - 71px - var(--ibiz-spacing-base));line-height:1.5em}.ibiz-map-picker-dialog-search-input .ibiz-map-picker__preset-marker-content .ibiz-map-picker__preset-marker-title{overflow:hidden;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.ibiz-map-picker-dialog-search-input .ibiz-map-picker__preset-marker-content .ibiz-map-picker__preset-marker-address{overflow:hidden;font-size:var(--ibiz-map-picker-preset-marker-font-size);color:var(--ibiz-map-picker-preset-marker-text-color);text-overflow:ellipsis;white-space:nowrap}.ibiz-map-picker-dialog-search-input .ibiz-map-picker__preset-marker-index{position:relative;flex:none;width:25px;height:var(--ibiz-map-picker-preset-marker-line-height);margin-right:var(--ibiz-spacing-tight);line-height:var(--ibiz-map-picker-preset-marker-line-height);background-repeat:no-repeat;background-size:contain}.ibiz-map-picker-dialog-search-input .ibiz-map-picker__preset-marker-index span{position:absolute;top:-5px;left:8px;font-size:var(--ibiz-map-picker-preset-marker-font-size);color:var(--ibiz-map-picker-preset-marker-index-color)}