@kq_npm/client3d_webgl_vue 4.5.1 → 4.5.3-beta

package/geologicalbodyanalysis/index.js

@@ -12,30 +12,22 @@ return /******/ (function() { // webpackBootstrap
 /******/ 	"use strict";
 /******/ 	var __webpack_modules__ = ({
 
-/***/ 3694:
+/***/ 1349:
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
-
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, {
-  "Z": function() { return /* binding */ message; }
-});
-
-;// CONCATENATED MODULE: external "element-plus/dist/index.full.js"
-var index_full_js_namespaceObject = require("element-plus/dist/index.full.js");
-// EXTERNAL MODULE: external "@kq_npm/client_common_vue/init.js"
-var init_js_ = __webpack_require__(7997);
-var init_js_default = /*#__PURE__*/__webpack_require__.n(init_js_);
-;// CONCATENATED MODULE: ./src/common/_ui/message/index.js
+/* harmony import */ var element_plus_dist_index_full_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9389);
+/* harmony import */ var element_plus_dist_index_full_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(element_plus_dist_index_full_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _init__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(7997);
+/* harmony import */ var _init__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_init__WEBPACK_IMPORTED_MODULE_1__);
 
 
 
-index_full_js_namespaceObject.ElMessage.install = (Vue, opts) => {
-  init_js_default()(Vue, opts);
-  Vue.component("KqMessage", index_full_js_namespaceObject.ElMessage);
+element_plus_dist_index_full_js__WEBPACK_IMPORTED_MODULE_0__.ElMessage.install = (Vue, opts) => {
+  _init__WEBPACK_IMPORTED_MODULE_1___default()(Vue, opts);
+  Vue.component("KqMessage", element_plus_dist_index_full_js__WEBPACK_IMPORTED_MODULE_0__.ElMessage);
 };
 
-/* harmony default export */ var message = (index_full_js_namespaceObject.ElMessage);
+/* harmony default export */ __webpack_exports__["Z"] = (element_plus_dist_index_full_js__WEBPACK_IMPORTED_MODULE_0__.ElMessage);
 
 /***/ }),
 
@@ -46,6 +38,13 @@ module.exports = require("@kq_npm/client_icons_vue");
 
 /***/ }),
 
+/***/ 9389:
+/***/ (function(module) {
+
+module.exports = require("element-plus/dist/index.full.js");
+
+/***/ }),
+
 /***/ 7080:
 /***/ (function(module) {
 
@@ -190,8 +189,8 @@ var external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_ = __webpack_require__(
 var gis_utils_ = __webpack_require__(7135);
 // EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/esm/defineProperty.js
 var defineProperty = __webpack_require__(8270);
-// EXTERNAL MODULE: ./src/common/_ui/message/index.js + 1 modules
-var message = __webpack_require__(3694);
+// EXTERNAL MODULE: ./src/common/_ui/message/index.js
+var message = __webpack_require__(1349);
 ;// CONCATENATED MODULE: ./src/webgl/geologicalbodyanalysis/GeologicalBodyAnalysisViewModel.js
 
 //地质体分析逻辑类
@@ -438,7 +437,7 @@ const __default__ = {
   },
 
   setup(__props, {
-    expose
+    expose: __expose
   }) {
     const props = __props;
     const {
@@ -540,11 +539,13 @@ const __default__ = {
     (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.onBeforeUnmount)(() => {
       viewModel && viewModel.destroy();
     });
-    expose({
+
+    __expose({
       paramsChanged,
       startAnalysis,
       clear
     });
+
     return (_ctx, _cache) => {
       const _component_kq_col = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveComponent)("kq-col");
 

package/gpuspatialquery/index.js

@@ -12,30 +12,22 @@ return /******/ (function() { // webpackBootstrap
 /******/ 	"use strict";
 /******/ 	var __webpack_modules__ = ({
 
-/***/ 3694:
+/***/ 1349:
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
+/* harmony import */ var element_plus_dist_index_full_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9389);
+/* harmony import */ var element_plus_dist_index_full_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(element_plus_dist_index_full_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _init__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(7997);
+/* harmony import */ var _init__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_init__WEBPACK_IMPORTED_MODULE_1__);
 
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, {
-  "Z": function() { return /* binding */ message; }
-});
 
-;// CONCATENATED MODULE: external "element-plus/dist/index.full.js"
-var index_full_js_namespaceObject = require("element-plus/dist/index.full.js");
-// EXTERNAL MODULE: external "@kq_npm/client_common_vue/init.js"
-var init_js_ = __webpack_require__(7997);
-var init_js_default = /*#__PURE__*/__webpack_require__.n(init_js_);
-;// CONCATENATED MODULE: ./src/common/_ui/message/index.js
 
-
-
-index_full_js_namespaceObject.ElMessage.install = (Vue, opts) => {
-  init_js_default()(Vue, opts);
-  Vue.component("KqMessage", index_full_js_namespaceObject.ElMessage);
+element_plus_dist_index_full_js__WEBPACK_IMPORTED_MODULE_0__.ElMessage.install = (Vue, opts) => {
+  _init__WEBPACK_IMPORTED_MODULE_1___default()(Vue, opts);
+  Vue.component("KqMessage", element_plus_dist_index_full_js__WEBPACK_IMPORTED_MODULE_0__.ElMessage);
 };
 
-/* harmony default export */ var message = (index_full_js_namespaceObject.ElMessage);
+/* harmony default export */ __webpack_exports__["Z"] = (element_plus_dist_index_full_js__WEBPACK_IMPORTED_MODULE_0__.ElMessage);
 
 /***/ }),
 
@@ -46,6 +38,13 @@ module.exports = require("@element-plus/icons-vue");
 
 /***/ }),
 
+/***/ 9389:
+/***/ (function(module) {
+
+module.exports = require("element-plus/dist/index.full.js");
+
+/***/ }),
+
 /***/ 7080:
 /***/ (function(module) {
 
@@ -53,6 +52,13 @@ module.exports = require("vue-i18n/dist/vue-i18n.cjs.js");
 
 /***/ }),
 
+/***/ 6869:
+/***/ (function(module) {
+
+module.exports = require("xe-utils");
+
+/***/ }),
+
 /***/ 7135:
 /***/ (function(module) {
 
@@ -190,13 +196,13 @@ var external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_ = __webpack_require__(
 var icons_vue_ = __webpack_require__(8422);
 // EXTERNAL MODULE: external "@kq_npm/client_common_vue/_utils/gis-utils"
 var gis_utils_ = __webpack_require__(7135);
-;// CONCATENATED MODULE: external "xe-utils"
-var external_xe_utils_namespaceObject = require("xe-utils");
-var external_xe_utils_default = /*#__PURE__*/__webpack_require__.n(external_xe_utils_namespaceObject);
+// EXTERNAL MODULE: external "xe-utils"
+var external_xe_utils_ = __webpack_require__(6869);
+var external_xe_utils_default = /*#__PURE__*/__webpack_require__.n(external_xe_utils_);
 // EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/esm/defineProperty.js
 var defineProperty = __webpack_require__(8270);
-// EXTERNAL MODULE: ./src/common/_ui/message/index.js + 1 modules
-var message = __webpack_require__(3694);
+// EXTERNAL MODULE: ./src/common/_ui/message/index.js
+var message = __webpack_require__(1349);
 ;// CONCATENATED MODULE: ./src/webgl/gpuspatialquery/GPUSpatialQueryViewModel.js
 
 //GPU空间查询逻辑类
@@ -582,7 +588,7 @@ const __default__ = {
   },
 
   setup(__props, {
-    expose
+    expose: __expose
   }) {
     const props = __props;
     let language = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)({});
@@ -713,11 +719,13 @@ const __default__ = {
     (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.onBeforeUnmount)(() => {
       viewModel && viewModel.destroy();
     });
-    expose({
+
+    __expose({
       paramsChanged,
       query,
       reset
     });
+
     return (_ctx, _cache) => {
       const _component_kq_option = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveComponent)("kq-option");
 

package/hawkeye/index.js

@@ -252,7 +252,7 @@ const __default__ = {
   },
 
   setup(__props, {
-    expose
+    expose: __expose
   }) {
     const props = __props;
     let viewModel = null; // 获取组件传参
@@ -293,11 +293,13 @@ const __default__ = {
     (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.onBeforeUnmount)(() => {
       viewModel && viewModel.destroy();
     });
-    expose({
+
+    __expose({
       show,
       hide,
       setLayers
     });
+
     return (_ctx, _cache) => {
       return null;
     };

package/headertemp/index.js

@@ -158,7 +158,7 @@ const __default__ = {
   },
 
   setup(__props, {
-    expose
+    expose: __expose
   }) {
     const props = __props;
     const proxy = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.getCurrentInstance)(); // 获取组件传参
@@ -218,9 +218,10 @@ const __default__ = {
       }
     }
 
-    expose({
+    __expose({
       btnClick
     });
+
     return (_ctx, _cache) => {
       const _component_kq_icon = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveComponent)("kq-icon");
 

package/heatmap3d/index.js

@@ -107,30 +107,22 @@ exports.Z = (sfc, props) => {
 
 /***/ }),
 
-/***/ 3694:
+/***/ 1349:
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
-
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, {
-  "Z": function() { return /* binding */ message; }
-});
-
-;// CONCATENATED MODULE: external "element-plus/dist/index.full.js"
-var index_full_js_namespaceObject = require("element-plus/dist/index.full.js");
-// EXTERNAL MODULE: external "@kq_npm/client_common_vue/init.js"
-var init_js_ = __webpack_require__(7997);
-var init_js_default = /*#__PURE__*/__webpack_require__.n(init_js_);
-;// CONCATENATED MODULE: ./src/common/_ui/message/index.js
+/* harmony import */ var element_plus_dist_index_full_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9389);
+/* harmony import */ var element_plus_dist_index_full_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(element_plus_dist_index_full_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _init__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(7997);
+/* harmony import */ var _init__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_init__WEBPACK_IMPORTED_MODULE_1__);
 
 
 
-index_full_js_namespaceObject.ElMessage.install = (Vue, opts) => {
-  init_js_default()(Vue, opts);
-  Vue.component("KqMessage", index_full_js_namespaceObject.ElMessage);
+element_plus_dist_index_full_js__WEBPACK_IMPORTED_MODULE_0__.ElMessage.install = (Vue, opts) => {
+  _init__WEBPACK_IMPORTED_MODULE_1___default()(Vue, opts);
+  Vue.component("KqMessage", element_plus_dist_index_full_js__WEBPACK_IMPORTED_MODULE_0__.ElMessage);
 };
 
-/* harmony default export */ var message = (index_full_js_namespaceObject.ElMessage);
+/* harmony default export */ __webpack_exports__["Z"] = (element_plus_dist_index_full_js__WEBPACK_IMPORTED_MODULE_0__.ElMessage);
 
 /***/ }),
 
@@ -462,6 +454,13 @@ module.exports = require("core-js/modules/es.array.includes.js");
 
 /***/ }),
 
+/***/ 9389:
+/***/ (function(module) {
+
+module.exports = require("element-plus/dist/index.full.js");
+
+/***/ }),
+
 /***/ 7080:
 /***/ (function(module) {
 
@@ -615,13 +614,13 @@ var gis_utils_ = __webpack_require__(7135);
 var util_ = __webpack_require__(3458);
 // EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/esm/defineProperty.js
 var defineProperty = __webpack_require__(8270);
-// EXTERNAL MODULE: ./src/common/_ui/message/index.js + 1 modules
-var message = __webpack_require__(3694);
+// EXTERNAL MODULE: ./src/common/_ui/message/index.js
+var message = __webpack_require__(1349);
 ;// CONCATENATED MODULE: ./src/webgl/heatmap3d/Heatmap3dViewModel.js
 
-
 //热力图
 
+
 class Heatmap3dViewModel {
   constructor(scenceView, options) {
     (0,defineProperty/* default */.Z)(this, "_viewer", null);
@@ -640,6 +639,8 @@ class Heatmap3dViewModel {
 
     (0,defineProperty/* default */.Z)(this, "heatmapData", null);
 
+    (0,defineProperty/* default */.Z)(this, "_heatmapHandler", null);
+
     this._viewer = scenceView._viewer;
     this._options = options;
     this._viewer.scene.globe.depthTestAgainstTerrain = true; // 地图标注对象
@@ -662,11 +663,14 @@ class Heatmap3dViewModel {
     }); // 地图拾取事件，交互展示
 
     let that = this;
-    var handler = new window.Cesium.ScreenSpaceEventHandler(this._viewer.canvas);
-    handler.setInputAction(function (movement) {
+    this._heatmapHandler = new window.Cesium.ScreenSpaceEventHandler(this._viewer.canvas);
+
+    this._heatmapHandler.setInputAction(function (movement) {
       var worldPosition = that._viewer.scene.pickPosition(movement.position);
 
       if (worldPosition) {
+        if (!that._heatmap && !that._heatmap2d) return;
+        if (!that._options.isShow) return;
         that._mouseLabel.position = worldPosition;
         var lonlat = Cesium.Cartographic.fromCartesian(worldPosition);
         var lon = Cesium.Math.toDegrees(lonlat.longitude),
@@ -685,26 +689,13 @@ class Heatmap3dViewModel {
           }));
         }
 
-        document.getElementById('mouse_lonlat').innerHTML = that.sanitizeInput(`<p>${that.language['longitude'] || "经度"}：${lon.toFixed(5)}</p><p>${that.language['latitude'] || "纬度"}：${lat.toFixed(5)}</p><p>${that.language['heatValue'] || "热力值"}：${val}</p>`);
+        (0,util_.setInnerHtml)(document.getElementById('mouse_lonlat'), `<p>${that.language['longitude'] || "经度"}：${lon.toFixed(5)}</p><p>${that.language['latitude'] || "纬度"}：${lat.toFixed(5)}</p><p>${that.language['heatValue'] || "热力值"}：${val}</p>`);
 
         that._mouseLabel.setVisible(true);
       } else {
         that._mouseLabel.setVisible(false);
       }
     }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
-  }
-
-  sanitizeInput(inputHTML) {
-    const allowedTags = ['p', 'strong', 'em'];
-    const tempDiv = document.createElement('div');
-    tempDiv.innerHTML = inputHTML;
-    const childNodes = Array.from(tempDiv.childNodes);
-    childNodes.forEach(node => {
-      if (!allowedTags.includes(node.tagName.toLowerCase())) {
-        tempDiv.removeChild(node);
-      }
-    });
-    return tempDiv.innerHTML;
   } // 创建三维热力图对象
 
 
@@ -712,7 +703,7 @@ class Heatmap3dViewModel {
     this._heatmap = new Cesium.Kq3dHeatmap3D({
       xField: 'lng',
       yField: 'lat',
-      valueField: this._options.valueField || 'count',
+      valueField: this._options.valueField || this.language["noSet"],
       radius: this._options.radius,
       scene: this._viewer.scene,
       height: this._options.height,
@@ -720,7 +711,7 @@ class Heatmap3dViewModel {
       alpha: this._options.transparents,
       dynamic: this._options.isFollowingPerspective,
       clampToGround: this._options.isGround,
-      show: this._options.heatmapType == "3D" ? true : false
+      show: this._options.heatmapType == "3D" ? this._options.isShow : false
     });
     if (this._options.gradient) this._heatmap.gradient = this._options.gradient;
 
@@ -734,7 +725,7 @@ class Heatmap3dViewModel {
     this._heatmap2d = new Cesium.Kq3dHeatmap2D({
       xField: 'lng',
       yField: 'lat',
-      valueField: this._options.valueField || 'count',
+      valueField: this._options.valueField || this.language["noSet"],
       canvasWidth: 1024,
       canvasHeight: 1024,
       radius: this._options.radius,
@@ -751,7 +742,7 @@ class Heatmap3dViewModel {
     });
     this._heatmap2dCountLayer = new Cesium.ImageryLayer(pv, {
       alpha: this._options.transparents,
-      show: this._options.heatmapType == "2D" ? true : false
+      show: this._options.heatmapType == "2D" ? this._options.isShow : false
     });
 
     this._viewer.imageryLayers.add(this._heatmap2dCountLayer);
@@ -889,7 +880,7 @@ class Heatmap3dViewModel {
       this.initHeatmap2d(this.heatmapData);
     } else {
       (0,message/* default */.Z)({
-        message: "先输入在线json地址或上传文件！",
+        message: this.language["fileTypeMessage"] + "！",
         type: "warning",
         duration: 2000
       });
@@ -916,6 +907,8 @@ class Heatmap3dViewModel {
     this.clear();
 
     this._mouseLabel.destroy();
+
+    this._heatmapHandler && this._heatmapHandler.destroy();
   }
 
 }
@@ -937,6 +930,7 @@ const _hoisted_1 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/(0,external_root
 ));
 
 
+const rangeMin = -5;
 /* harmony default export */ var CustomColorPickerSlidervue_type_script_setup_true_lang_js = ({
   __name: 'CustomColorPickerSlider',
   props: ["width", "color", "percentage", "id"],
@@ -949,7 +943,6 @@ const _hoisted_1 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/(0,external_root
 
     const initId = props.id;
     const initColor = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(props.color);
-    const rangeMin = -5;
     const rangeMax = props.width - 5;
     const position = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(props.percentage / 100 * props.width + rangeMin);
     const disabled = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(false); // 为了防止在mouseup事件结束后，弹出颜色框
@@ -1093,6 +1086,7 @@ const CustomColorPickervue_type_script_setup_true_lang_js_hoisted_1 = {
 
 
 
+const width = 257;
 /* harmony default export */ var CustomColorPickervue_type_script_setup_true_lang_js = ({
   __name: 'CustomColorPicker',
   props: ["data"],
@@ -1103,7 +1097,6 @@ const CustomColorPickervue_type_script_setup_true_lang_js_hoisted_1 = {
   }) {
     const props = __props; // 宽度
 
-    const width = 257;
     const items = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(props.data);
     let backgroundImage = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.ref)(updateBackgroundImage()); // 更新色带条
 
@@ -1322,7 +1315,7 @@ const __default__ = {
   },
 
   setup(__props, {
-    expose
+    expose: __expose
   }) {
     const props = __props;
     const {
@@ -1398,6 +1391,8 @@ const __default__ = {
       currentLang.value = proxy.$i18n.locale; // 获取当前语言
       //父组 件ScenceView初始化完成后执行
 
+      weightFields.value = [language.value.noSet];
+      if (!formItem.valueField) formItem.valueField = language.value.noSet;
       gis_utils_.utils.getWebMap(null, scenceView => {
         if (scenceView) {
           viewModel = new Heatmap3dViewModel(scenceView, formItem);
@@ -1449,7 +1444,16 @@ const __default__ = {
     function getDataByPath() {
       if (formItem && formItem.dataPath) {
         Cesium.Resource.fetchJson(formItem.dataPath).then(res => {
-          if (res && res.features && res.features.length > 0) {
+          if (res && res.features) {
+            if (res.features.length === 0) {
+              (0,message/* default */.Z)({
+                message: "features " + language.value.noDataMessage + "!",
+                type: "warning",
+                duration: 2000
+              });
+              return;
+            }
+
             let heatmapArr = [];
             let bigArray = [];
             res.features.forEach(element => {
@@ -1459,26 +1463,34 @@ const __default__ = {
               heatmapArr.push({
                 lng: element.geometry.coordinates[0],
                 lat: element.geometry.coordinates[1],
-                ...result.newObj
+                ...result.newObj,
+                ...{
+                  noSet: 0
+                }
               });
             });
             let commonArr = commonValues(bigArray);
-            weightFields.value = commonArr;
-
-            if (!formItem.valueField) {
-              formItem.valueField = commonArr[0];
-              paramsChanged("valueField");
-            }
+            weightFields.value = [language.value.noSet].concat(commonArr); // if (!formItem.valueField) {
+            //   formItem.valueField = commonArr[0];
+            //   paramsChanged("valueField");
+            // }
 
             if (viewModel) {
               viewModel.heatmapData = heatmapArr;
               viewModel.start();
             }
+          } else {
+            (0,message/* default */.Z)({
+              message: language.value.geojsonTypeMessage + "！",
+              type: "warning",
+              duration: 2000
+            });
+            return;
           }
         }).otherwise(ret => {
           console.log(ret);
           (0,message/* default */.Z)({
-            message: "数据路径有问题！",
+            message: language.value.dataParsingMessage + "！",
             type: "error",
             duration: 2000
           });
@@ -1486,7 +1498,7 @@ const __default__ = {
         });
       } else {
         (0,message/* default */.Z)({
-          message: "先输入在线json地址或上传文件！",
+          message: language.value.fileTypeMessage + "!",
           type: "warning",
           duration: 2000
         });
@@ -1648,7 +1660,9 @@ const __default__ = {
     (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.onBeforeUnmount)(() => {
       viewModel && viewModel.destroy();
     });
-    expose({});
+
+    __expose({});
+
     return (_ctx, _cache) => {
       const _component_kq_col = (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.resolveComponent)("kq-col");
 
@@ -2018,7 +2032,7 @@ const __default__ = {
                     }
                   }, {
                     default: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.withCtx)(() => [(0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.createVNode)(CustomColorPicker, {
-                      data: (0,external_root_Vue_commonjs_vue_commonjs2_vue_amd_vue_.unref)(customColors),
+                      data: customColors.value,
                       onColorChanged: colorChanged
                     }, null, 8
                     /* PROPS */