@ibiz-template/vue3-components 0.7.41-alpha.111 → 0.7.41-alpha.112

package/src/control/map/map.tsx

@@ -55,7 +55,45 @@ const MapControl = defineComponent({
 
     const mapStyle = c.model.mapStyle;
     const { semanticClass, semanticStyle } = useSemanticNode(c);
+    // 子类类名透传
+    const childClass = [
+      {
+        class: semanticClass('editor.content'),
+        selector: '.ibiz-control-map__map',
+      },
+      {
+        class: semanticClass('editor.goback'),
+        selector: '.ibiz-map-chart-user__goback',
+      },
+      {
+        class: semanticClass('editor.goback'),
+        selector: '.ibiz-map-chart__goback',
+      },
+      {
+        class: semanticClass('editor.fullscreen'),
+        selector: '.ibiz-map-chart-user__fullscreen',
+      },
+    ];
 
+    // 子类样式透传
+    const childStyle = [
+      {
+        style: semanticStyle('editor.content'),
+        selector: '.ibiz-control-map__map',
+      },
+      {
+        style: semanticStyle('editor.goback'),
+        selector: '.ibiz-map-chart-user__goback',
+      },
+      {
+        style: semanticStyle('editor.goback'),
+        selector: '.ibiz-map-chart__goback',
+      },
+      {
+        style: semanticStyle('editor.fullscreen'),
+        selector: '.ibiz-map-chart-user__fullscreen',
+      },
+    ];
     const mapOpts = computed<Partial<MapOptions>>(() => {
       return {
         strAreaCode: c.state.strAreaCode,
@@ -70,6 +108,8 @@ const MapControl = defineComponent({
       mapRef,
       mapOpts,
       mapStyle,
+      childClass,
+      childStyle,
       semanticClass,
       semanticStyle,
     };
@@ -87,8 +127,7 @@ const MapControl = defineComponent({
             options={this.mapOpts}
             areaData={state.areaData}
             pointData={state.pointData}
-            style={this.semanticStyle('content')}
-            class={[this.ns.e('map'), this.semanticClass('content')]}
+            class={this.ns.e('map')}
           ></iBizMapChartUser>
         ) : (
           <iBizMapChart
@@ -97,8 +136,7 @@ const MapControl = defineComponent({
             options={this.mapOpts}
             areaData={state.areaData}
             pointData={state.pointData}
-            style={this.semanticStyle('content')}
-            class={[this.ns.e('map'), this.semanticClass('content')]}
+            class={this.ns.e('map')}
             onPointClick={(e: IMapData) => {
               this.c.onPointClick(e);
             }}
@@ -114,6 +152,8 @@ const MapControl = defineComponent({
           controller={this.c}
           class={this.semanticClass('root')}
           style={this.semanticStyle('root')}
+          v-child-class={this.childClass}
+          v-child-style={this.childStyle}
         >
           {content}
           {this.c.state.enableNavView && this.c.state.showNavIcon ? (

package/src/editor/autocomplete/ibiz-autocomplete/ibiz-autocomplete.scss

@@ -5,6 +5,7 @@ $autocomplete: (
   line-height: getCssVar(form-item, line-height),                           // 行高
   empty-bg-color: getCssVar(color, bg, 3),                                  // 空值背景色
   readonly-color: getCssVar(form-item, readonly-color),                     // 只读字体色
+  disabled-color: getCssVar(form-item, disabled-color),                     // 禁用色
   hover-edit-padding: getCssVar(form-item, hover-edit-padding),             // 悬浮编辑态内边距
 );
 
@@ -29,8 +30,17 @@ $autocomplete-action: (
 
   // 界面行为项
   @include e(action-item) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     color: getCssVar(autocomplete-action, text-color);
-    text-align: center;
+    @include m(icon) {
+      margin-right: getCssVar(spacing, extra-tight);
+    }
+    @include when(disabled) {
+      color: getCssVar(autocomplete, disabled-color);
+      cursor: not-allowed;
+    }
   }
 
   @include e(empty) {
@@ -52,6 +62,7 @@ $autocomplete-action: (
 
   @include e(transfer) {
     @include set-component-css-var('autocomplete', $autocomplete);
+    @include set-component-css-var('autocomplete-action', $autocomplete-action);
     @include when(empty) {
       .el-autocomplete-suggestion li {
         padding: 0;

package/src/editor/autocomplete/ibiz-autocomplete/ibiz-autocomplete.tsx

@@ -302,7 +302,7 @@ export const IBizAutoComplete = defineComponent({
         <div
           class={[
             ns.e('action-item'),
-            ns.be('popper', 'item'),
+            ns.be('popper', 'action'),
             semanticClass('editor.popup.action', semanticParams),
             ns.is('disabled', c.groupActionState[detail.id!].disabled),
           ]}
@@ -322,6 +322,7 @@ export const IBizAutoComplete = defineComponent({
           )}
           <span
             class={[
+              ns.em('action-item', 'label'),
               ns.em('action-item', 'caption'),
               semanticClass('editor.popup.action.label', semanticParams),
             ]}

package/src/editor/color-picker/ibiz-color-mpicker-default/ibiz-color-mpicker-default.tsx

@@ -223,7 +223,11 @@ export const IBizColorMPickerDefault = defineComponent({
         <el-select
           v-model={this.curType}
           class={this.ns.b('picker')}
-          popper-class={this.ns.b('popper')}
+          popper-class={[
+            this.ns.b('popper'),
+            this.semanticClass?.('editor.popup'),
+          ]}
+          popper-style={this.semanticStyle?.('editor.popup')}
           onChange={this.handleSchemeChange}
         >
           {{
@@ -252,7 +256,11 @@ export const IBizColorMPickerDefault = defineComponent({
         {this.showTemplateList && (
           <el-select
             class={this.ns.b('template-color-picker')}
-            popper-class={this.ns.b('popper')}
+            popper-class={[
+              this.ns.b('popper'),
+              this.semanticClass?.('editor.popup'),
+            ]}
+            popper-style={this.semanticStyle?.('editor.popup')}
             v-model={this.curTemplateColor}
             onChange={this.handleTemplateColorChange}
           >

package/src/editor/data-picker/ibiz-mpicker/ibiz-mpicker.tsx

@@ -487,7 +487,7 @@ export const IBizMPicker = defineComponent({
             disabled={c.groupActionState[item.id!].disabled}
             title={showTitle(isEllipsis ? item.tooltip : '')}
             class={[
-              ns.be('popper', 'item'),
+              ns.be('popper', 'action'),
               semanticClass('editor.popup.action'),
             ]}
             style={semanticStyle('editor.popup.action')}
@@ -523,6 +523,7 @@ export const IBizMPicker = defineComponent({
                   <span
                     class={[
                       ns.em('action-item', 'caption'),
+                      ns.em('action-item', 'label'),
                       semanticClass(
                         'editor.popup.action.label',
                         semanticParams,

package/src/editor/data-picker/ibiz-picker/ibiz-picker.tsx

@@ -492,7 +492,7 @@ export const IBizPicker = defineComponent({
           title={showTitle(detail.tooltip)}
           class={[
             ns.e('action-item'),
-            ns.be('popper', 'item'),
+            ns.be('popper', 'action'),
             semanticClass('editor.popup.action', semanticParams),
             ns.is('disabled', c.groupActionState[detail.id!].disabled),
           ]}
@@ -514,6 +514,7 @@ export const IBizPicker = defineComponent({
           )}
           <span
             class={[
+              ns.em('action-item', 'label'),
               ns.em('action-item', 'caption'),
               semanticClass('editor.popup.action.label', semanticParams),
             ]}

package/src/editor/data-picker/ibiz-picker-dropdown/ibiz-picker-dropdown.tsx

@@ -363,7 +363,7 @@ export const IBizPickerDropDown = defineComponent({
           title={showTitle(detail.tooltip)}
           disabled={c.groupActionState[detail.id!].disabled}
           class={[
-            ns.be('popper', 'item'),
+            ns.be('popper', 'action'),
             semanticClass('editor.popup.action', { semanticParams }),
           ]}
           style={semanticStyle('editor.popup.action', { semanticParams })}
@@ -385,6 +385,7 @@ export const IBizPickerDropDown = defineComponent({
             <span
               class={[
                 ns.em('action-item', 'caption'),
+                ns.em('action-item', 'label'),
                 semanticClass('editor.popup.action.label', semanticParams),
               ]}
               style={semanticStyle('editor.popup.action.label', semanticParams)}

package/src/editor/data-picker/ibiz-picker-select-view/ibiz-picker-select-view.tsx

@@ -596,11 +596,8 @@ export const IBizPickerSelectView = defineComponent({
           this.semanticClass('editor.content'),
         ]}
         style={this.semanticStyle('editor.content')}
-        popper-class={[
-          this.ns.b('popper'),
-          this.semanticClass('editor.popper'),
-        ]}
-        popper-style={this.semanticStyle('editor.popper')}
+        popper-class={[this.ns.b('popper'), this.semanticClass('editor.popup')]}
+        popper-style={this.semanticStyle('editor.popup')}
         onVisibleChange={this.onVisibleChange}
         onKeydown={this.handleDropDownKeyDown}
       >

package/src/editor/date-range-select/date-range-select-picker/date-range-select.tsx

@@ -51,19 +51,19 @@ export const IBizDateRangeSelect = defineComponent({
         selector: `.${ns.e('label')}`,
       },
       {
-        class: semanticClass('editor.input'),
+        class: semanticClass('editor.dateType'),
         selector: `.${ns.em('date-range', 'editor')}`,
       },
       {
-        class: semanticClass('editor.input.suffix'),
+        class: semanticClass('editor.dateType.suffix'),
         selector: `.${ns.em('date-range', 'editor-suffix')}`,
       },
       {
-        class: semanticClass('editor.select'),
+        class: semanticClass('editor.dateUnit'),
         selector: `.el-input__inner`,
       },
       {
-        class: semanticClass('editor.select.suffix'),
+        class: semanticClass('editor.dateUnit.suffix'),
         selector: '.el-input__suffix',
       },
     ];
@@ -75,19 +75,19 @@ export const IBizDateRangeSelect = defineComponent({
         selector: `.${ns.e('label')}`,
       },
       {
-        style: semanticStyle('editor.input'),
+        style: semanticStyle('editor.dateType'),
         selector: `.${ns.em('date-range', 'editor')}`,
       },
       {
-        style: semanticStyle('editor.input.suffix'),
+        style: semanticStyle('editor.dateType.suffix'),
         selector: `.${ns.em('date-range', 'editor-suffix')}`,
       },
       {
-        style: semanticStyle('editor.select'),
+        style: semanticStyle('editor.dateUnit'),
         selector: `.el-input__inner`,
       },
       {
-        style: semanticStyle('editor.select.suffix'),
+        style: semanticStyle('editor.dateUnit.suffix'),
         selector: '.el-input__suffix',
       },
     ];
@@ -205,14 +205,23 @@ export const IBizDateRangeSelect = defineComponent({
           <div class={ns.em('date-unit', 'editor')}>
             <el-select
               v-model={unitValue.value}
-              class={ns.em('date-unit', 'editor-select')}
               onChange={unitChange}
+              class={ns.em('date-unit', 'editor-select')}
+              popper-class={[ns.b('popper'), semanticClass('editor.popup')]}
+              popper-style={semanticStyle('editor.popup')}
             >
               {units.map((item: IData) => {
                 return (
                   <el-option
-                    class={semanticClass('editor.popup.item', { item })}
-                    style={semanticStyle('editor.popup.item', { item })}
+                    class={[
+                      ns.em('date-unit', 'item'),
+                      semanticClass('editor.dateUnit.popup.item', {
+                        item,
+                      }),
+                    ]}
+                    style={semanticStyle('editor.dateUnit.popup.item', {
+                      item,
+                    })}
                     key={item.value}
                     value={item.value}
                     label={item.label}
@@ -400,6 +409,7 @@ export const IBizDateRangeSelect = defineComponent({
             trigger='click'
             width='240px'
             popper-class={[
+              ns.b('popper'),
               ns.b('date-range-select'),
               semanticClass('editor.popup'),
             ]}
@@ -430,9 +440,13 @@ export const IBizDateRangeSelect = defineComponent({
                         <div
                           class={[
                             ns.em('date-type', 'item'),
-                            semanticClass('editor.popup.item', { item }),
+                            semanticClass('editor.dateType.popup.item', {
+                              item,
+                            }),
                           ]}
-                          style={semanticStyle('editor.popup.item', { item })}
+                          style={semanticStyle('editor.dateType.popup.item', {
+                            item,
+                          })}
                           onClick={(event: MouseEvent) =>
                             onTypeClick(item.type, event)
                           }

package/src/editor/dropdown-list/dropdown-list-editor.controller.ts

@@ -27,10 +27,16 @@ export class DropDownListEditorController extends CodeListEditorController<IDrop
   /**
    * 默认选中第一个
    *
-   * @memberof CustomTagSelectController
+   * @memberof DropDownListEditorController
    */
   public defaultFirstOption = false;
 
+  /**
+   * @description 自动选中第一个
+   * @memberof DropDownListEditorController
+   */
+  public autoSelectFirstOption = false;
+
   /**
    * 预置项空白项名称
    *
@@ -72,7 +78,11 @@ export class DropDownListEditorController extends CodeListEditorController<IDrop
         this.editorParams.defaultfirstoption,
       );
     }
-
+    if (this.editorParams?.autoselectfirstoption) {
+      this.autoSelectFirstOption = this.toBoolean(
+        this.editorParams.autoselectfirstoption,
+      );
+    }
     if (this.editorParams?.blankItemName) {
       this.blankItemName = this.editorParams.blankItemName;
     }

package/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.tsx

@@ -29,6 +29,7 @@ import './ibiz-dropdown.scss';
  * @primary
  * @editorparams {name:forceselection,parameterType:boolean,defaultvalue:true,description:是否禁止用户创建选择项。当参数为false时，可在输入框输入内容，使其显示在下拉选项中呈现，并且可选择}
  * @editorparams {name:defaultfirstoption,parameterType:boolean,defaultvalue:false,description:默认选中第一个，在该属性为 true 的情况下，按下回车就可以选中当前选项列表中的第一个选项，无需使用鼠标或键盘方向键进行定位}
+ * @editorparams {name:autoselectfirstoption,parameterType:boolean,defaultvalue:false,description:编辑器无值时，自动选中第一个数据}
  * @editorparams {name:blankitemname,parameterType:string,description:在单选模式下，用于在下拉展示数据顶部添加一条空白项数据，其文本内容为配置的该参数值}
  * @editorparams {name:blankitemvalue,parameterType:string,description:在单选模式下，用于在下拉展示数据顶部添加一条空白项数据，其值内容为配置的该参数值}
  * @editorparams {name:alwaysload,parameterType:boolean,defaultvalue:false,description:当值改变、下拉框出现时，是否重新加载代码表数据。设置为 true 时每次相关事件触发都会重新加载数据}
@@ -202,6 +203,10 @@ export const IBizDropdown = defineComponent({
     // 值分隔符
     const valueSeparator = c.editorParams?.valueseparator || ',';
 
+    const { getSelection, getSelectionValue } = useCodeListSelection(
+      c.allItemsValue,
+    );
+
     // 是否显示表单默认内容
     const showFormDefaultContent = computed(() => {
       if (
@@ -258,6 +263,31 @@ export const IBizDropdown = defineComponent({
       return list;
     };
 
+    /**
+     * @description 自动选中第一项
+     */
+    const autoSelectFirstOption = (): void => {
+      const item = items.value[0];
+      if (!c.autoSelectFirstOption || props.value || !item) return;
+      if (c.multiple) {
+        const value =
+          c.allItems && !hasChildren.value
+            ? getSelectionValue(item.value).map(v => `${v}`)
+            : [item.value];
+        emit(
+          'change',
+          c.model.valueType === 'SIMPLES' ? value : value.join(valueSeparator),
+          undefined,
+          true,
+        );
+      } else if (editorItems && editorItems.length > 0) {
+        emit('change', item.value, editorItems[0].id!, true);
+        emit('change', item.text, undefined, true);
+      } else {
+        emit('change', item.value, undefined, true);
+      }
+    };
+
     /**
      * 加载代码表后续处理
      *
@@ -290,6 +320,7 @@ export const IBizDropdown = defineComponent({
           break;
         }
       }
+      autoSelectFirstOption();
     };
 
     // 加载代码表数据
@@ -377,10 +408,6 @@ export const IBizDropdown = defineComponent({
       return list.find(item => item.value === value);
     };
 
-    const { getSelection, getSelectionValue } = useCodeListSelection(
-      c.allItemsValue,
-    );
-
     // 当前值
     const curValue = computed({
       get() {
@@ -517,6 +544,7 @@ export const IBizDropdown = defineComponent({
         newVal.focus();
       }
     });
+
     const onFocus = (e: IData) => {
       editorState = 'focus';
       emit('focus', e);

package/src/panel-component/auth-userinfo/auth-userinfo.scss

@@ -63,7 +63,7 @@ $user-info-name: (
 
   @include when(collapse){
     .el-dropdown{
-      padding: 0 getCssVar(user-info, collapse-padding);
+      padding: getCssVar(user-info, collapse-padding);
     }
     @include b(user-info-avatar) {
       max-width: getCssVar(user-info-avatar, max-width);

package/src/web-app/adaptive-screen-width.ts

@@ -74,12 +74,12 @@ const fixContextMenuPosition = (el: HTMLElement) => {
 };
 
 /**
- * 修正 ibiz-form-item-container__popper 的 transform 定位，抵消 body zoom 造成的偏移。
+ * 修正 Popper 的 transform 定位，抵消 body zoom 造成的偏移。
  * 将 transform: translate(x, y) 或 translate3d(x, y, z) 中的数值按 scale 反向缩放，非 px 单位保持不变。
  * @param el
  * @returns
  */
-const fixFormItemContainerPopperTransform = (el: HTMLElement) => {
+const fixPopperTransform = (el: HTMLElement) => {
   if (currentScale === 1) return;
   const transform = el.style.transform;
   if (!transform) return;
@@ -125,8 +125,11 @@ const startObservePoppers = () => {
           const el = node as HTMLElement;
           if (el.classList?.contains('el-popper')) {
             fixPopperInset(el);
-            if (el.classList.contains('ibiz-form-item-container__popper')) {
-              fixFormItemContainerPopperTransform(el);
+            if (
+              el.classList.contains('ibiz-form-item-container__popper') ||
+              el.classList.contains('ibiz-form-mdctrl-popper')
+            ) {
+              fixPopperTransform(el);
             }
           } else if (el.classList?.contains('mx-context-menu')) {
             fixContextMenuPosition(el);
@@ -139,8 +142,11 @@ const startObservePoppers = () => {
         const el = mutation.target as HTMLElement;
         if (el.classList?.contains('el-popper')) {
           fixPopperInset(el);
-          if (el.classList.contains('ibiz-form-item-container__popper')) {
-            fixFormItemContainerPopperTransform(el);
+          if (
+            el.classList.contains('ibiz-form-item-container__popper') ||
+            el.classList.contains('ibiz-form-mdctrl-popper')
+          ) {
+            fixPopperTransform(el);
           }
         } else if (el.classList?.contains('mx-context-menu')) {
           fixContextMenuPosition(el);

package/dist/map-chart-DbBbP4qh.js

@@ -1 +0,0 @@
-System.register(["vue","ramda","@ibiz-template/vue3-util","@ibiz-template/runtime","echarts"],function(e){"use strict";var t,a,o,r,i,n,s,l,c,p,u,d,m;return{setters:[function(e){t=e.ref,a=e.onMounted,o=e.onUnmounted,r=e.defineComponent,i=e.createVNode,n=e.computed},function(e){s=e.mergeDeepWithKey,l=e.isNil},function(e){c=e.useNamespace,p=e.useSemanticNode},function(e){u=e.MapController},function(e){d=e.init,m=e.registerMap}],execute:function(){const f={strAreaCode:!1,visualMap:{text:[ibiz.i18n.t("component.mapChart.high"),ibiz.i18n.t("component.mapChart.low")],min:0,max:100,rangeColor:["#90d1e7","#fff600","#ff5200"]},areaColor:"#87cefa",areaBorderColor:"#FFF",hoverAreaColor:"#fbdb2f",pointSymbol:"pin",jsonBaseUrl:"".concat(ibiz.env.assetsUrl,"/json/map"),defaultAreaCode:1e5};function y(e,r,i,n){const s=new Map,l=t(""),c=t([]);let p;const u=t();let f;const y=async e=>{if(s.has(e))return;const t=await async function(e,t){return(await ibiz.net.axios({url:"".concat(e,"/").concat(t,".json")})).data}(r.value.jsonBaseUrl,e);s.set(e,(e=>{const t={cityNames:{},noChild:1===e.features.length};return e.features.forEach(e=>{const{adcode:a,name:o}=e.properties;t.cityNames[a]=o}),t})(t)),m(e,t)},h=()=>{if(l.value){const e=i(l.value);p.setOption(e),p.resize()}},v=async(t,a=!1)=>{if(!a){const a=r.value.strAreaCode?"".concat(t):Number(t);await e.onMapChange(a)}const o="".concat(t);s.has(o)||await y(o),l.value=o,c.value.push(o),h()},b=()=>{null==p||p.resize()};return a(()=>{p=d(u.value),window.addEventListener("resize",b),u.value&&ResizeObserver&&(f=new ResizeObserver(()=>{b()}),f.observe(u.value)),p.on("click",e=>{if("series"===e.componentType){if("scatter"===e.seriesType)return void n("pointClick",e.data);"map"===e.seriesType&&(e.data&&n("areaClick",e.data),e.name!==l.value&&v(e.name))}}),p.on("mouseover",function(e){if("series"===e.componentType&&"scatter"===e.seriesType){const t=e.dataIndex,a=p.getOption(),o=a.series[e.seriesIndex].data,r=a.series[e.seriesIndex].symbolSize;o[t].symbolSize=r+10,p.setOption(a)}}),p.on("mouseout",function(e){if("series"===e.componentType&&"scatter"===e.seriesType){const t=e.dataIndex,a=p.getOption();delete a.series[e.seriesIndex].data[t].symbolSize,p.setOption(a)}})}),o(()=>{window.removeEventListener("resize",b),null==f||f.disconnect()}),{chartRef:u,historyNames:c,currentName:l,changeMap:v,getCityName:e=>{const t=s.get(l.value);if(t)return t.cityNames[e]},goBack:()=>{if(c.value.length>1){c.value.pop();const e=c.value.pop();v(e)}},refresh:h}}const h=r({name:"IBizMapChart",props:{areaData:{type:Array},pointData:{type:Array},options:{type:Object,default:()=>({})},controller:{type:u,required:!0}},setup(e,{emit:t}){const o=c("map-chart"),{semanticClass:r,semanticStyle:i}=p(e.controller),u=n(()=>s((e,t,a)=>l(a)?t:a,f,e.options)),d=(t,a)=>"area"===a&&e.areaData?e.areaData.find(e=>e._id===t):"point"===a&&e.pointData?e.pointData.find(e=>e._id===t):void 0,{chartRef:m,historyNames:h,changeMap:v,getCityName:b,goBack:C}=y(e.controller,u,t=>{const{visualMap:a,pointSymbol:o,areaColor:r,hoverAreaColor:i,areaBorderColor:n}=u.value,s=e.areaData||[],l=e.pointData||[];return{geo:{map:t},tooltip:{trigger:"item",textStyle:{color:"#fff",fontSize:12},backgroundColor:"rgba(0, 0, 0, 0.47)",borderWidth:0,extraCssText:"backdrop-filter: blur(3px);"},visualMap:{min:a.min,max:a.max,text:a.text,realtime:!1,hoverLink:!1,inRange:{color:a.rangeColor}},series:[{type:"map",map:t,nameProperty:"adcodeStr",itemStyle:{areaColor:r,borderColor:n,borderWidth:2},emphasis:{itemStyle:{areaColor:i}},tooltip:{formatter:e=>{if(!e.data)return;const t=d(e.data._id,"area");return t?t._tooltip:void 0}},label:{show:!0,color:"#000000",fontSize:14,formatter:e=>b(e.name)},select:{disabled:!0},data:s.map(e=>({name:"".concat(e._areaCode),value:e._value,_id:e._id}))},{type:"scatter",coordinateSystem:"geo",symbol:o,symbolSize:20,visualMap:!1,itemStyle:{color:"#FF1D00"},label:{show:!0,color:"#000000",fontSize:14,textShadowBlur:0,formatter:e=>{const t=d(e.data._id,"point");return null==t?void 0:t._text},position:"left",offset:[10,-15]},tooltip:{formatter:e=>{const t=d(e.data._id,"point");return null==t?void 0:t._tooltip}},data:l.map(e=>({_id:e._id,symbol:e._symbol?"image://".concat(e._symbol):void 0,value:[Number(e._longitude),Number(e._latitude)],visualMap:!1}))}]}},(e,a)=>{switch(e){case"pointClick":t("pointClick",d(a._id,"point"));break;case"areaClick":t("areaClick",d(a._id,"area"))}});return a(()=>{v(u.value.defaultAreaCode,!0)}),{ns:o,chartRef:m,historyNames:h,semanticClass:r,semanticStyle:i,goBack:C}},render(){return i("div",{class:this.ns.b()},[i("div",{class:this.ns.e("chart"),ref:"chartRef"},null),this.historyNames.length>1&&i("div",{style:this.semanticStyle("goback"),class:[this.ns.e("goback"),this.semanticClass("goback")],onClick:()=>{this.goBack()}},[ibiz.i18n.t("app.return")])])}});e({IBizMapChart:h,default:h})}}});

package/dist/map-chart-user-CfTAGaU5.js

@@ -1 +0,0 @@
-System.register(["vue","ramda","@ibiz-template/vue3-util","@ibiz-template/runtime","@ibiz-template/core","lodash-es","echarts"],function(e){"use strict";var t,a,o,r,n,s,l,i,c,u,d,m,p,v,f,b,h,y,C,g;return{setters:[function(e){t=e.ref,a=e.onMounted,o=e.onUnmounted,r=e.defineComponent,n=e.createVNode,s=e.resolveComponent,l=e.computed,i=e.onBeforeUnmount},function(e){c=e.mergeDeepLeft,u=e.mergeDeepWithKey,d=e.isNil},function(e){m=e.useNamespace,p=e.useSemanticNode},function(e){v=e.MapController,f=e.getAreaLevelByCode},function(e){b=e.listenJSEvent,h=e.NOOP},function(e){y=e.toNumber},function(e){C=e.init,g=e.registerMap}],execute:function(){const _={strAreaCode:!1,visualMap:{text:[ibiz.i18n.t("component.mapChart.high"),ibiz.i18n.t("component.mapChart.low")],min:0,max:100,rangeColor:["#90d1e7","#fff600","#ff5200"]},areaColor:"#87cefa",areaBorderColor:"#FFF",hoverAreaColor:"#fbdb2f",pointSymbol:"pin",jsonBaseUrl:"".concat(ibiz.env.assetsUrl,"/json/map"),defaultAreaCode:1e5,bottom:20,top:20},N=e=>{const t=[];return e._color&&t.push("color:".concat(e._color)),e._bgcolor&&t.push("background:".concat(e._bgcolor)),e._borderColor&&t.push("border-color:".concat(e._borderColor)),e._borderWidth&&t.push("border-width:".concat(e._borderWidth,"px")),e._borderWidth&&e._borderColor&&t.push("border-style:solid"),t.join(";")},z=(e,t,a=[],o=[])=>"area"===t?o.find(t=>t._id===e):"point"===t?a.find(t=>t._id===e):void 0,S=e=>{let t=e;const a=window.getComputedStyle(document.documentElement);return a&&(t=a.getPropertyValue(e)||t),t},x=e=>{const{pointSymbol:t}=e,a=m("map-chart-user"),o=S(a.cssVarName("color-danger")),r=S(a.cssVarName("font-size-header-4"));return{type:"scatter",coordinateSystem:"geo",symbol:t,symbolSize:Number(r.slice(0,2)),visualMap:!1,itemStyle:{color:o}}},w=(e,t)=>{const a={},o=m("map-chart-user"),r=S(o.cssVarName("color-text-1")),n=S(o.cssVarName("font-size-regular"));return a.label={show:!0,color:r,fontSize:Number(n.slice(0,2)),textShadowBlur:0,formatter:a=>{if(!a.data)return;const o=z(a.data._id,"point",e,t);return null==o?void 0:o._text},position:"left",offset:[10,-15]},a.tooltip={formatter:a=>{if(!a.data)return;const r=z(a.data._id,"point",e,t);if(!r)return;const{_deData:n}=r;let s=n.srfmajortext;r._value&&(s="".concat(n.srfmajortext,": ").concat(r._value)),r._tooltip&&(s=r._tooltip);const l=N(r);return'<div style="'.concat(l,'" class="').concat(r._className," ").concat(o.e("popper"),'">').concat(s,"</div>")},padding:0},a.data=e.map(e=>{let t;return e._symbol&&(t="image://".concat(e._symbol)),{_id:e._id,symbol:t,value:[Number(e._longitude),Number(e._latitude)],visualMap:!1}}),a},D=e=>{const{areaColor:t,areaBorderColor:a,hoverAreaColor:o}=e;return{type:"map",nameProperty:"adcodeStr",itemStyle:{areaColor:t,borderColor:a,borderWidth:2},emphasis:{itemStyle:{areaColor:o}}}},k=(e,t,a,o=[])=>{const r={},n=m("map-chart-user"),s=S(n.cssVarName("color-text-1")),l=S(n.cssVarName("font-size-regular"));return r.map=e,r.label={show:!0,color:s,fontSize:Number(l.slice(0,2)),formatter:e=>o.cityNames[e.name]},r.tooltip={formatter:e=>{if(!e.data)return;const o=z(e.data._id,"area",t,a);if(!o||!o._tooltip&&!o._value)return;const{_deData:r}=o;let s=r.srfmajortext;o._value&&(s="".concat(r.srfmajortext,": ").concat(o._value)),o._tooltip&&(s=o._tooltip);const l=N(o);return'<div style="'.concat(l,'" class="').concat(o._className," ").concat(n.e("popper"),'">').concat(s,"</div>")},padding:0},r.data=a.map(e=>({name:"".concat(e._areaCode),value:e._value,_id:e._id,deData:e})),r.select={disabled:!0},r};function M(e,r,n){const s=new Map,l=t(""),i=t([]),c=new Map,u=t(!1);let d;const m=t();let p;const v=async t=>{e.options=t,await e.evt.emit("onBeforeUpdate",{data:t}),d.setOption(t,!0)},f=async e=>{if(s.has(e))return;const t=await async function(e,t){return(await ibiz.net.axios({url:"".concat(e,"/").concat(t,".json")})).data}(r.value.jsonBaseUrl,e);s.set(e,(e=>{const t={cityNames:{},noChild:1===e.features.length};return e.features.forEach(e=>{const{adcode:a,name:o,level:r}=e.properties;t.cityNames[a]=o,c.set(a,r)}),t})(t)),g(e,t)},h=()=>s.get(l.value),_=()=>{if(l.value){const e=n(l.value);v(e),d.resize()}},N=async(t,a,o=!1)=>{const r="".concat(t);if(s.has(r)||await f(r),o){const t=c.get(y(a))||"";e.state.areaLevel=t}else await e.onMapChange(a);l.value=r,e.state.mapInfo=h(),i.value.push(r),_()},S=b(window,"resize",()=>{d&&d.resize()});return a(()=>{d=C(m.value),e.chart=d,m.value&&ResizeObserver&&(p=new ResizeObserver(()=>{null==d||d.resize()}),p.observe(m.value)),d.on("click",t=>{if("series"===t.componentType){if("scatter"===t.seriesType){if(!t.data)return;u.value=!0;const{pointData:a,areaData:o}=e.state,r=z(t.data._id,"point",a,o);return r&&e.onPointClick(r),void(u.value=!1)}if("map"===t.seriesType){u.value=!0;const a=r.value.strAreaCode?"".concat(t.name):Number(t.name),o=c.get(y(a))||"",{pointData:n,areaData:s,enabledDrillDown:i,mdctrlActiveMode:d}=e.state;if(t.data){const r=z(t.data._id,"area",n,s);r&&e.onAreaClick(r,a,o)}t.name!==l.value&&i&&2!==d&&(y(a)>y(e.state.areaCode)&&e.evt.emit("onDrillDown",{data:{areaCode:a}}),e.state.areaCode=a,e.state.areaLevel=o||"",N(t.name,a)),u.value=!1}}}),d.on("dblclick",t=>{const{enabledDrillDown:a,mdctrlActiveMode:o}=e.state;if("series"===t.componentType&&"map"===t.seriesType&&2===o&&a){u.value=!0;const a=r.value.strAreaCode?"".concat(t.name):Number(t.name),o=c.get(y(a))||"";y(a)>y(e.state.areaCode)&&e.evt.emit("onDrillDown",{data:{areaCode:a}}),e.state.areaCode=a,e.state.areaLevel=o,t.name!==l.value&&N(t.name,a),u.value=!1}}),d.on("mouseover",function(t){if(e.evt.emit("onMouseOver",{data:t}),"series"===t.componentType&&"scatter"===t.seriesType){const e=t.dataIndex,a=d.getOption(),o=a.series[t.seriesIndex].data,r=a.series[t.seriesIndex].symbolSize;o[e].symbolSize=r+10,v(a)}}),d.on("mouseout",function(t){if(e.evt.emit("onMouseOut",{data:t}),"series"===t.componentType&&"scatter"===t.seriesType){const e=t.dataIndex,a=d.getOption();delete a.series[t.seriesIndex].data[e].symbolSize,v(a)}})}),o(()=>{S(),null==p||p.disconnect()}),{chartRef:m,historyNames:i,currentName:l,processing:u,areaLevelMap:c,changeMap:N,getCityInfo:h,goBack:async()=>{if(i.value.length>1){i.value.pop();const t=i.value.pop(),a=r.value.strAreaCode?"".concat(t):Number(t),o=c.get(y(a))||"";e.state.areaCode=a,e.state.areaLevel=o,N(t,a)}},refresh:_}}const A=r({name:"IBizMapChartUser",props:{areaData:{type:Array},pointData:{type:Array},options:{type:Object,default:()=>({})},controller:{type:v,required:!0}},setup(e){const o=m("map-chart-user"),{semanticClass:r,semanticStyle:n}=p(e.controller),s=e.controller;let v=_;const C=t(),g=t(!1);if(s.controlParams.defaultopts){const e=JSON.parse(s.controlParams.defaultopts);v=c(e,v)}const N=l(()=>u((e,t,a)=>d(a)?t:a,v,e.options));let z=h;const{chartRef:A,historyNames:B,processing:F,areaLevelMap:L,changeMap:O,getCityInfo:U,goBack:V}=M(e.controller,N,t=>{const a=e.areaData||[],o=e.pointData||[],r=(()=>{const e=m("map-chart-user"),t=S(e.cssVarName("color-text-1")),a=S(e.cssVarName("font-size-regular")),o=S(e.cssVarName("color-bg-0"));return{trigger:"item",textStyle:{color:t,fontSize:Number(a.slice(0,2))},backgroundColor:o,borderWidth:0,extraCssText:"backdrop-filter: blur(3px);"}})(),n=(e=>{const{visualMap:t}=e;return{min:t.min,max:t.max,text:t.text,realtime:!1,hoverLink:!1,inRange:{color:t.rangeColor}}})(N.value),s=U(),l={...x(N.value),...w(o,a)},{top:i,bottom:c}=N.value;return{geo:{map:t,top:i,bottom:c},tooltip:r,visualMap:n,series:[{top:i,bottom:c,...D(N.value),...k(t,o,a,s)},l]}});a(()=>{const e=N.value.defaultAreaCode,t=s.state.strAreaCode?"".concat(e):Number(e);s.state.areaCode=t,s.state.areaLevel=f(t.toString()),O(e,t,!0),s.evt.on("onDrillDown",async e=>{if(!F.value){const{data:t}=e,a=t.areaCode,o=s.state.strAreaCode?"".concat(a):Number(a),r=L.get(y(o))||"";s.state.areaCode=o,s.state.areaLevel=r,await O(a,a)}}),s.evt.on("onBackClick",()=>{F.value||V()}),z=b(window,"resize",()=>{g.value&&(g.value=ibiz.fullscreenUtil.isFullScreen)})}),i(()=>{z!==h&&z()});return{c:s,ns:o,mapRef:C,isFull:g,chartRef:A,historyNames:B,semanticClass:r,semanticStyle:n,onBack:async()=>{F.value=!0,await s.evt.emit("onBackClick",void 0),V(),F.value=!1},toggleFullScreen:()=>{C.value&&(g.value?ibiz.fullscreenUtil.closeElementFullscreen():ibiz.fullscreenUtil.openElementFullscreen(C.value),g.value=!g.value)}}},render(){const{enabledFullScreen:e}=this.c.state;return n("div",{class:this.ns.b(),ref:"mapRef"},[e?n(s("el-button"),{type:"info",onClick:this.toggleFullScreen,style:this.semanticStyle("fullscreen"),class:[this.ns.e("fullscreen"),this.semanticClass("fullscreen")],title:this.isFull?ibiz.i18n.t("app.cancelFullscreen"):ibiz.i18n.t("app.fullscreen")},{default:()=>[n("ion-icon",{name:this.isFull?"contract-outline":"expand-outline"},null)]}):null,n("div",{class:this.ns.e("chart"),ref:"chartRef"},null),this.historyNames.length>1&&n("div",{style:this.semanticStyle("goback"),class:[this.ns.e("goback"),this.semanticClass("goback")],onClick:()=>{this.onBack()}},[ibiz.i18n.t("app.return")])])}});e({IBizMapChartUser:A,default:A})}}});