@weitutech/by-components 1.1.153 → 1.1.154
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/by-components.common.js +183 -14
- package/lib/by-components.umd.js +183 -14
- package/lib/by-components.umd.min.js +1 -1
- package/lib/index.css +1 -1
- package/package.json +1 -1
|
@@ -95201,8 +95201,8 @@ var ByPopoverSelector_component = normalizeComponent(
|
|
|
95201
95201
|
)
|
|
95202
95202
|
|
|
95203
95203
|
/* harmony default export */ var ByPopoverSelector = (ByPopoverSelector_component.exports);
|
|
95204
|
-
;// ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"444f6cde-vue-loader-template"}!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/cache-loader/dist/cjs.js??ruleSet[0].use[0]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/grid-layout/ByGridLayout.vue?vue&type=template&id=
|
|
95205
|
-
var
|
|
95204
|
+
;// ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"444f6cde-vue-loader-template"}!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/cache-loader/dist/cjs.js??ruleSet[0].use[0]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/grid-layout/ByGridLayout.vue?vue&type=template&id=3735c079
|
|
95205
|
+
var ByGridLayoutvue_type_template_id_3735c079_render = function render() {
|
|
95206
95206
|
var _vm = this,
|
|
95207
95207
|
_c = _vm._self._c;
|
|
95208
95208
|
return _c('div', {
|
|
@@ -95257,7 +95257,93 @@ var ByGridLayoutvue_type_template_id_7a853977_render = function render() {
|
|
|
95257
95257
|
"layout": renderItem.layout,
|
|
95258
95258
|
"index": renderItem.index
|
|
95259
95259
|
})], 2)]);
|
|
95260
|
-
}) : _vm._t("default")], 2), _vm.
|
|
95260
|
+
}) : _vm._t("default")], 2), _vm.hasItems && !_vm.hasRenderedItems ? _c('div', {
|
|
95261
|
+
staticClass: "by-grid-layout__empty-state"
|
|
95262
|
+
}, [_c('div', {
|
|
95263
|
+
staticClass: "by-grid-layout__empty-illustration"
|
|
95264
|
+
}, [_c('svg', {
|
|
95265
|
+
attrs: {
|
|
95266
|
+
"viewBox": "0 0 160 120",
|
|
95267
|
+
"xmlns": "http://www.w3.org/2000/svg"
|
|
95268
|
+
}
|
|
95269
|
+
}, [_c('defs', [_c('linearGradient', {
|
|
95270
|
+
attrs: {
|
|
95271
|
+
"id": "by-grid-layout-empty-gradient",
|
|
95272
|
+
"x1": "0%",
|
|
95273
|
+
"y1": "0%",
|
|
95274
|
+
"x2": "100%",
|
|
95275
|
+
"y2": "100%"
|
|
95276
|
+
}
|
|
95277
|
+
}, [_c('stop', {
|
|
95278
|
+
attrs: {
|
|
95279
|
+
"offset": "0%",
|
|
95280
|
+
"stop-color": "#e6f7ff"
|
|
95281
|
+
}
|
|
95282
|
+
}), _c('stop', {
|
|
95283
|
+
attrs: {
|
|
95284
|
+
"offset": "100%",
|
|
95285
|
+
"stop-color": "#f9fbff"
|
|
95286
|
+
}
|
|
95287
|
+
})], 1)], 1), _c('rect', {
|
|
95288
|
+
attrs: {
|
|
95289
|
+
"x": "12",
|
|
95290
|
+
"y": "24",
|
|
95291
|
+
"width": "136",
|
|
95292
|
+
"height": "72",
|
|
95293
|
+
"rx": "12",
|
|
95294
|
+
"fill": "url(#by-grid-layout-empty-gradient)"
|
|
95295
|
+
}
|
|
95296
|
+
}), _c('rect', {
|
|
95297
|
+
attrs: {
|
|
95298
|
+
"x": "32",
|
|
95299
|
+
"y": "42",
|
|
95300
|
+
"width": "32",
|
|
95301
|
+
"height": "22",
|
|
95302
|
+
"rx": "4",
|
|
95303
|
+
"fill": "#c6e2ff",
|
|
95304
|
+
"opacity": "0.6"
|
|
95305
|
+
}
|
|
95306
|
+
}), _c('rect', {
|
|
95307
|
+
attrs: {
|
|
95308
|
+
"x": "72",
|
|
95309
|
+
"y": "42",
|
|
95310
|
+
"width": "56",
|
|
95311
|
+
"height": "16",
|
|
95312
|
+
"rx": "4",
|
|
95313
|
+
"fill": "#d9ecff",
|
|
95314
|
+
"opacity": "0.8"
|
|
95315
|
+
}
|
|
95316
|
+
}), _c('rect', {
|
|
95317
|
+
attrs: {
|
|
95318
|
+
"x": "32",
|
|
95319
|
+
"y": "70",
|
|
95320
|
+
"width": "56",
|
|
95321
|
+
"height": "16",
|
|
95322
|
+
"rx": "4",
|
|
95323
|
+
"fill": "#d9ecff",
|
|
95324
|
+
"opacity": "0.8"
|
|
95325
|
+
}
|
|
95326
|
+
}), _c('rect', {
|
|
95327
|
+
attrs: {
|
|
95328
|
+
"x": "92",
|
|
95329
|
+
"y": "70",
|
|
95330
|
+
"width": "36",
|
|
95331
|
+
"height": "16",
|
|
95332
|
+
"rx": "4",
|
|
95333
|
+
"fill": "#ecf5ff"
|
|
95334
|
+
}
|
|
95335
|
+
}), _c('circle', {
|
|
95336
|
+
attrs: {
|
|
95337
|
+
"cx": "128",
|
|
95338
|
+
"cy": "34",
|
|
95339
|
+
"r": "6",
|
|
95340
|
+
"fill": "#91d5ff"
|
|
95341
|
+
}
|
|
95342
|
+
})])]), _c('div', {
|
|
95343
|
+
staticClass: "by-grid-layout__empty-title"
|
|
95344
|
+
}, [_vm._v("暂无可展示的卡片")]), _c('div', {
|
|
95345
|
+
staticClass: "by-grid-layout__empty-desc"
|
|
95346
|
+
}, [_vm._v(_vm._s(_vm.isEditing ? '点击上方添加卡片或点击右侧恢复默认布局' : '点击右侧自定义按钮进行配置'))])]) : _vm._e(), _vm.toggleable ? _c('div', {
|
|
95261
95347
|
staticClass: "by-grid-layout__controls"
|
|
95262
95348
|
}, [_c('div', {
|
|
95263
95349
|
staticClass: "by-grid-layout__mode-toggle",
|
|
@@ -95274,7 +95360,7 @@ var ByGridLayoutvue_type_template_id_7a853977_render = function render() {
|
|
|
95274
95360
|
}
|
|
95275
95361
|
}, [_c('span', [_vm._v("恢复默认")])]) : _vm._e()]) : _vm._e()], 1);
|
|
95276
95362
|
};
|
|
95277
|
-
var
|
|
95363
|
+
var ByGridLayoutvue_type_template_id_3735c079_staticRenderFns = [];
|
|
95278
95364
|
|
|
95279
95365
|
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.iterator.reduce.js
|
|
95280
95366
|
var es_iterator_reduce = __webpack_require__(8237);
|
|
@@ -95287,6 +95373,8 @@ var vue_grid_layout_common = __webpack_require__(1176);
|
|
|
95287
95373
|
|
|
95288
95374
|
|
|
95289
95375
|
|
|
95376
|
+
|
|
95377
|
+
|
|
95290
95378
|
const OPTIONAL_LAYOUT_KEYS = ['minH', 'maxH', 'minW', 'maxW', 'isDraggable', 'isResizable', 'static'];
|
|
95291
95379
|
const GRID_ITEM_KEYS = ['x', 'y', 'w', 'h', 'i', ...OPTIONAL_LAYOUT_KEYS];
|
|
95292
95380
|
|
|
@@ -95355,7 +95443,9 @@ const GRID_ITEM_KEYS = ['x', 'y', 'w', 'h', 'i', ...OPTIONAL_LAYOUT_KEYS];
|
|
|
95355
95443
|
// 防止 items.sync 与 layout-updated 相互触发造成循环
|
|
95356
95444
|
isProcessingLayoutUpdate: false,
|
|
95357
95445
|
isProcessingItemsSync: false,
|
|
95358
|
-
currentMode: 'view'
|
|
95446
|
+
currentMode: 'view',
|
|
95447
|
+
// 记录每个 item 首次布局时的初始尺寸(w/h),用于恢复时还原原始大小
|
|
95448
|
+
initialItemMetrics: {}
|
|
95359
95449
|
};
|
|
95360
95450
|
},
|
|
95361
95451
|
computed: {
|
|
@@ -95383,6 +95473,9 @@ const GRID_ITEM_KEYS = ['x', 'y', 'w', 'h', 'i', ...OPTIONAL_LAYOUT_KEYS];
|
|
|
95383
95473
|
hasItems() {
|
|
95384
95474
|
return Array.isArray(this.internalItems) && this.internalItems.length > 0;
|
|
95385
95475
|
},
|
|
95476
|
+
hasRenderedItems() {
|
|
95477
|
+
return this.renderItems.length > 0;
|
|
95478
|
+
},
|
|
95386
95479
|
resolvedGridLayoutAttrs() {
|
|
95387
95480
|
const attrs = {
|
|
95388
95481
|
...this.$attrs
|
|
@@ -95643,6 +95736,14 @@ const GRID_ITEM_KEYS = ['x', 'y', 'w', 'h', 'i', ...OPTIONAL_LAYOUT_KEYS];
|
|
|
95643
95736
|
index
|
|
95644
95737
|
}) => {
|
|
95645
95738
|
const layoutItem = this.createLayoutItem(item, index, autoContext);
|
|
95739
|
+
const layoutId = layoutItem.i;
|
|
95740
|
+
if (layoutId && !this.initialItemMetrics[layoutId]) {
|
|
95741
|
+
// 仅首次记录,后续编辑(拖拽、缩放)不会覆盖原始尺寸
|
|
95742
|
+
this.initialItemMetrics[layoutId] = {
|
|
95743
|
+
w: layoutItem.w,
|
|
95744
|
+
h: layoutItem.h
|
|
95745
|
+
};
|
|
95746
|
+
}
|
|
95646
95747
|
cloned[index] = {
|
|
95647
95748
|
...cloned[index],
|
|
95648
95749
|
x: layoutItem.x,
|
|
@@ -95807,17 +95908,33 @@ const GRID_ITEM_KEYS = ['x', 'y', 'w', 'h', 'i', ...OPTIONAL_LAYOUT_KEYS];
|
|
|
95807
95908
|
if (!this.isEditingActive) return;
|
|
95808
95909
|
// 恢复隐藏项:设置 hidden: false
|
|
95809
95910
|
const id = String(hiddenItem.i);
|
|
95810
|
-
const
|
|
95911
|
+
const metrics = this.initialItemMetrics[id] || {};
|
|
95912
|
+
let restored = null;
|
|
95913
|
+
const remaining = this.internalItems.reduce((acc, item, index) => {
|
|
95811
95914
|
const itemId = String(this.resolveItemId(item, index));
|
|
95812
|
-
if (itemId !== id)
|
|
95915
|
+
if (itemId !== id) {
|
|
95916
|
+
acc.push(item);
|
|
95917
|
+
return acc;
|
|
95918
|
+
}
|
|
95813
95919
|
const next = {
|
|
95814
95920
|
...item,
|
|
95815
95921
|
hidden: false
|
|
95816
95922
|
};
|
|
95817
|
-
|
|
95818
|
-
|
|
95819
|
-
|
|
95820
|
-
|
|
95923
|
+
delete next.originalX;
|
|
95924
|
+
delete next.originalY;
|
|
95925
|
+
// 优先使用首次记录的原始尺寸;否则退回默认尺寸
|
|
95926
|
+
const width = metrics.w !== undefined ? metrics.w : next.w !== undefined ? next.w : this.defaultItemSize.w || 1;
|
|
95927
|
+
const height = metrics.h !== undefined ? metrics.h : next.h !== undefined ? next.h : this.defaultItemSize.h || 1;
|
|
95928
|
+
next.w = width;
|
|
95929
|
+
next.h = height;
|
|
95930
|
+
const placement = this.findRestoredPlacement(width, height);
|
|
95931
|
+
next.x = placement.x;
|
|
95932
|
+
next.y = placement.y;
|
|
95933
|
+
restored = next;
|
|
95934
|
+
return acc;
|
|
95935
|
+
}, []);
|
|
95936
|
+
if (!restored) return;
|
|
95937
|
+
const updatedItems = [...remaining, restored];
|
|
95821
95938
|
this.commitItemsChange(updatedItems);
|
|
95822
95939
|
},
|
|
95823
95940
|
commitItemsChange(nextItems) {
|
|
@@ -95886,8 +96003,60 @@ const GRID_ITEM_KEYS = ['x', 'y', 'w', 'h', 'i', ...OPTIONAL_LAYOUT_KEYS];
|
|
|
95886
96003
|
this.setItemPropsById(id, {
|
|
95887
96004
|
[key]: value
|
|
95888
96005
|
});
|
|
95889
|
-
}
|
|
96006
|
+
},
|
|
95890
96007
|
// *************** 这里是通用方法,业务中如果要给卡片item.props填充数据,可以统一使用该方法 End ***************
|
|
96008
|
+
|
|
96009
|
+
// 寻找“最优落点”
|
|
96010
|
+
findRestoredPlacement(width, height) {
|
|
96011
|
+
var _ref3, _ref4, _attrs$colNum2;
|
|
96012
|
+
// 从当前布局中寻找「最后一行」优先、且尽量靠右的空位
|
|
96013
|
+
const layout = Array.isArray(this.internalLayout) ? this.internalLayout : [];
|
|
96014
|
+
const attrs = this.resolvedGridLayoutAttrs || {};
|
|
96015
|
+
const columnsCandidate = (_ref3 = (_ref4 = (_attrs$colNum2 = attrs.colNum) !== null && _attrs$colNum2 !== void 0 ? _attrs$colNum2 : attrs.cols) !== null && _ref4 !== void 0 ? _ref4 : attrs.col) !== null && _ref3 !== void 0 ? _ref3 : 12;
|
|
96016
|
+
const columns = Math.max(1, this.ensureNumber(columnsCandidate, 12));
|
|
96017
|
+
const normalizedW = Math.max(1, this.ensureNumber(width, this.defaultItemSize.w || 1));
|
|
96018
|
+
const normalizedH = Math.max(1, this.ensureNumber(height, this.defaultItemSize.h || 1));
|
|
96019
|
+
if (layout.length === 0) {
|
|
96020
|
+
return {
|
|
96021
|
+
x: 0,
|
|
96022
|
+
y: 0
|
|
96023
|
+
};
|
|
96024
|
+
}
|
|
96025
|
+
const maxRowY = layout.reduce((max, item) => Math.max(max, item.y), 0);
|
|
96026
|
+
let nextRowY = maxRowY;
|
|
96027
|
+
const maxIterations = 1000;
|
|
96028
|
+
let loops = 0;
|
|
96029
|
+
while (loops < maxIterations) {
|
|
96030
|
+
for (let x = 0; x <= columns - normalizedW; x++) {
|
|
96031
|
+
if (this.isAreaFree(layout, x, nextRowY, normalizedW, normalizedH)) {
|
|
96032
|
+
return {
|
|
96033
|
+
x,
|
|
96034
|
+
y: nextRowY
|
|
96035
|
+
};
|
|
96036
|
+
}
|
|
96037
|
+
}
|
|
96038
|
+
nextRowY += 1;
|
|
96039
|
+
loops++;
|
|
96040
|
+
}
|
|
96041
|
+
return {
|
|
96042
|
+
x: 0,
|
|
96043
|
+
y: nextRowY
|
|
96044
|
+
};
|
|
96045
|
+
},
|
|
96046
|
+
isAreaFree(layout, x, y, width, height) {
|
|
96047
|
+
if (!Array.isArray(layout) || layout.length === 0) return true;
|
|
96048
|
+
return !layout.some(item => this.doRectsOverlap({
|
|
96049
|
+
x,
|
|
96050
|
+
y,
|
|
96051
|
+
w: width,
|
|
96052
|
+
h: height
|
|
96053
|
+
}, item));
|
|
96054
|
+
},
|
|
96055
|
+
doRectsOverlap(a, b) {
|
|
96056
|
+
if (!a || !b) return false;
|
|
96057
|
+
const noOverlap = a.x + a.w <= b.x || b.x + b.w <= a.x || a.y + a.h <= b.y || b.y + b.h <= a.y;
|
|
96058
|
+
return !noOverlap;
|
|
96059
|
+
}
|
|
95891
96060
|
}
|
|
95892
96061
|
});
|
|
95893
96062
|
;// ./src/components/grid-layout/ByGridLayout.vue?vue&type=script&lang=js
|
|
@@ -95902,8 +96071,8 @@ const GRID_ITEM_KEYS = ['x', 'y', 'w', 'h', 'i', ...OPTIONAL_LAYOUT_KEYS];
|
|
|
95902
96071
|
;
|
|
95903
96072
|
var ByGridLayout_component = normalizeComponent(
|
|
95904
96073
|
grid_layout_ByGridLayoutvue_type_script_lang_js,
|
|
95905
|
-
|
|
95906
|
-
|
|
96074
|
+
ByGridLayoutvue_type_template_id_3735c079_render,
|
|
96075
|
+
ByGridLayoutvue_type_template_id_3735c079_staticRenderFns,
|
|
95907
96076
|
false,
|
|
95908
96077
|
null,
|
|
95909
96078
|
null,
|
package/lib/by-components.umd.js
CHANGED
|
@@ -95211,8 +95211,8 @@ var ByPopoverSelector_component = normalizeComponent(
|
|
|
95211
95211
|
)
|
|
95212
95212
|
|
|
95213
95213
|
/* harmony default export */ var ByPopoverSelector = (ByPopoverSelector_component.exports);
|
|
95214
|
-
;// ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"444f6cde-vue-loader-template"}!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/cache-loader/dist/cjs.js??ruleSet[0].use[0]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/grid-layout/ByGridLayout.vue?vue&type=template&id=
|
|
95215
|
-
var
|
|
95214
|
+
;// ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"444f6cde-vue-loader-template"}!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/cache-loader/dist/cjs.js??ruleSet[0].use[0]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/grid-layout/ByGridLayout.vue?vue&type=template&id=3735c079
|
|
95215
|
+
var ByGridLayoutvue_type_template_id_3735c079_render = function render() {
|
|
95216
95216
|
var _vm = this,
|
|
95217
95217
|
_c = _vm._self._c;
|
|
95218
95218
|
return _c('div', {
|
|
@@ -95267,7 +95267,93 @@ var ByGridLayoutvue_type_template_id_7a853977_render = function render() {
|
|
|
95267
95267
|
"layout": renderItem.layout,
|
|
95268
95268
|
"index": renderItem.index
|
|
95269
95269
|
})], 2)]);
|
|
95270
|
-
}) : _vm._t("default")], 2), _vm.
|
|
95270
|
+
}) : _vm._t("default")], 2), _vm.hasItems && !_vm.hasRenderedItems ? _c('div', {
|
|
95271
|
+
staticClass: "by-grid-layout__empty-state"
|
|
95272
|
+
}, [_c('div', {
|
|
95273
|
+
staticClass: "by-grid-layout__empty-illustration"
|
|
95274
|
+
}, [_c('svg', {
|
|
95275
|
+
attrs: {
|
|
95276
|
+
"viewBox": "0 0 160 120",
|
|
95277
|
+
"xmlns": "http://www.w3.org/2000/svg"
|
|
95278
|
+
}
|
|
95279
|
+
}, [_c('defs', [_c('linearGradient', {
|
|
95280
|
+
attrs: {
|
|
95281
|
+
"id": "by-grid-layout-empty-gradient",
|
|
95282
|
+
"x1": "0%",
|
|
95283
|
+
"y1": "0%",
|
|
95284
|
+
"x2": "100%",
|
|
95285
|
+
"y2": "100%"
|
|
95286
|
+
}
|
|
95287
|
+
}, [_c('stop', {
|
|
95288
|
+
attrs: {
|
|
95289
|
+
"offset": "0%",
|
|
95290
|
+
"stop-color": "#e6f7ff"
|
|
95291
|
+
}
|
|
95292
|
+
}), _c('stop', {
|
|
95293
|
+
attrs: {
|
|
95294
|
+
"offset": "100%",
|
|
95295
|
+
"stop-color": "#f9fbff"
|
|
95296
|
+
}
|
|
95297
|
+
})], 1)], 1), _c('rect', {
|
|
95298
|
+
attrs: {
|
|
95299
|
+
"x": "12",
|
|
95300
|
+
"y": "24",
|
|
95301
|
+
"width": "136",
|
|
95302
|
+
"height": "72",
|
|
95303
|
+
"rx": "12",
|
|
95304
|
+
"fill": "url(#by-grid-layout-empty-gradient)"
|
|
95305
|
+
}
|
|
95306
|
+
}), _c('rect', {
|
|
95307
|
+
attrs: {
|
|
95308
|
+
"x": "32",
|
|
95309
|
+
"y": "42",
|
|
95310
|
+
"width": "32",
|
|
95311
|
+
"height": "22",
|
|
95312
|
+
"rx": "4",
|
|
95313
|
+
"fill": "#c6e2ff",
|
|
95314
|
+
"opacity": "0.6"
|
|
95315
|
+
}
|
|
95316
|
+
}), _c('rect', {
|
|
95317
|
+
attrs: {
|
|
95318
|
+
"x": "72",
|
|
95319
|
+
"y": "42",
|
|
95320
|
+
"width": "56",
|
|
95321
|
+
"height": "16",
|
|
95322
|
+
"rx": "4",
|
|
95323
|
+
"fill": "#d9ecff",
|
|
95324
|
+
"opacity": "0.8"
|
|
95325
|
+
}
|
|
95326
|
+
}), _c('rect', {
|
|
95327
|
+
attrs: {
|
|
95328
|
+
"x": "32",
|
|
95329
|
+
"y": "70",
|
|
95330
|
+
"width": "56",
|
|
95331
|
+
"height": "16",
|
|
95332
|
+
"rx": "4",
|
|
95333
|
+
"fill": "#d9ecff",
|
|
95334
|
+
"opacity": "0.8"
|
|
95335
|
+
}
|
|
95336
|
+
}), _c('rect', {
|
|
95337
|
+
attrs: {
|
|
95338
|
+
"x": "92",
|
|
95339
|
+
"y": "70",
|
|
95340
|
+
"width": "36",
|
|
95341
|
+
"height": "16",
|
|
95342
|
+
"rx": "4",
|
|
95343
|
+
"fill": "#ecf5ff"
|
|
95344
|
+
}
|
|
95345
|
+
}), _c('circle', {
|
|
95346
|
+
attrs: {
|
|
95347
|
+
"cx": "128",
|
|
95348
|
+
"cy": "34",
|
|
95349
|
+
"r": "6",
|
|
95350
|
+
"fill": "#91d5ff"
|
|
95351
|
+
}
|
|
95352
|
+
})])]), _c('div', {
|
|
95353
|
+
staticClass: "by-grid-layout__empty-title"
|
|
95354
|
+
}, [_vm._v("暂无可展示的卡片")]), _c('div', {
|
|
95355
|
+
staticClass: "by-grid-layout__empty-desc"
|
|
95356
|
+
}, [_vm._v(_vm._s(_vm.isEditing ? '点击上方添加卡片或点击右侧恢复默认布局' : '点击右侧自定义按钮进行配置'))])]) : _vm._e(), _vm.toggleable ? _c('div', {
|
|
95271
95357
|
staticClass: "by-grid-layout__controls"
|
|
95272
95358
|
}, [_c('div', {
|
|
95273
95359
|
staticClass: "by-grid-layout__mode-toggle",
|
|
@@ -95284,7 +95370,7 @@ var ByGridLayoutvue_type_template_id_7a853977_render = function render() {
|
|
|
95284
95370
|
}
|
|
95285
95371
|
}, [_c('span', [_vm._v("恢复默认")])]) : _vm._e()]) : _vm._e()], 1);
|
|
95286
95372
|
};
|
|
95287
|
-
var
|
|
95373
|
+
var ByGridLayoutvue_type_template_id_3735c079_staticRenderFns = [];
|
|
95288
95374
|
|
|
95289
95375
|
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.iterator.reduce.js
|
|
95290
95376
|
var es_iterator_reduce = __webpack_require__(8237);
|
|
@@ -95297,6 +95383,8 @@ var vue_grid_layout_common = __webpack_require__(2498);
|
|
|
95297
95383
|
|
|
95298
95384
|
|
|
95299
95385
|
|
|
95386
|
+
|
|
95387
|
+
|
|
95300
95388
|
const OPTIONAL_LAYOUT_KEYS = ['minH', 'maxH', 'minW', 'maxW', 'isDraggable', 'isResizable', 'static'];
|
|
95301
95389
|
const GRID_ITEM_KEYS = ['x', 'y', 'w', 'h', 'i', ...OPTIONAL_LAYOUT_KEYS];
|
|
95302
95390
|
|
|
@@ -95365,7 +95453,9 @@ const GRID_ITEM_KEYS = ['x', 'y', 'w', 'h', 'i', ...OPTIONAL_LAYOUT_KEYS];
|
|
|
95365
95453
|
// 防止 items.sync 与 layout-updated 相互触发造成循环
|
|
95366
95454
|
isProcessingLayoutUpdate: false,
|
|
95367
95455
|
isProcessingItemsSync: false,
|
|
95368
|
-
currentMode: 'view'
|
|
95456
|
+
currentMode: 'view',
|
|
95457
|
+
// 记录每个 item 首次布局时的初始尺寸(w/h),用于恢复时还原原始大小
|
|
95458
|
+
initialItemMetrics: {}
|
|
95369
95459
|
};
|
|
95370
95460
|
},
|
|
95371
95461
|
computed: {
|
|
@@ -95393,6 +95483,9 @@ const GRID_ITEM_KEYS = ['x', 'y', 'w', 'h', 'i', ...OPTIONAL_LAYOUT_KEYS];
|
|
|
95393
95483
|
hasItems() {
|
|
95394
95484
|
return Array.isArray(this.internalItems) && this.internalItems.length > 0;
|
|
95395
95485
|
},
|
|
95486
|
+
hasRenderedItems() {
|
|
95487
|
+
return this.renderItems.length > 0;
|
|
95488
|
+
},
|
|
95396
95489
|
resolvedGridLayoutAttrs() {
|
|
95397
95490
|
const attrs = {
|
|
95398
95491
|
...this.$attrs
|
|
@@ -95653,6 +95746,14 @@ const GRID_ITEM_KEYS = ['x', 'y', 'w', 'h', 'i', ...OPTIONAL_LAYOUT_KEYS];
|
|
|
95653
95746
|
index
|
|
95654
95747
|
}) => {
|
|
95655
95748
|
const layoutItem = this.createLayoutItem(item, index, autoContext);
|
|
95749
|
+
const layoutId = layoutItem.i;
|
|
95750
|
+
if (layoutId && !this.initialItemMetrics[layoutId]) {
|
|
95751
|
+
// 仅首次记录,后续编辑(拖拽、缩放)不会覆盖原始尺寸
|
|
95752
|
+
this.initialItemMetrics[layoutId] = {
|
|
95753
|
+
w: layoutItem.w,
|
|
95754
|
+
h: layoutItem.h
|
|
95755
|
+
};
|
|
95756
|
+
}
|
|
95656
95757
|
cloned[index] = {
|
|
95657
95758
|
...cloned[index],
|
|
95658
95759
|
x: layoutItem.x,
|
|
@@ -95817,17 +95918,33 @@ const GRID_ITEM_KEYS = ['x', 'y', 'w', 'h', 'i', ...OPTIONAL_LAYOUT_KEYS];
|
|
|
95817
95918
|
if (!this.isEditingActive) return;
|
|
95818
95919
|
// 恢复隐藏项:设置 hidden: false
|
|
95819
95920
|
const id = String(hiddenItem.i);
|
|
95820
|
-
const
|
|
95921
|
+
const metrics = this.initialItemMetrics[id] || {};
|
|
95922
|
+
let restored = null;
|
|
95923
|
+
const remaining = this.internalItems.reduce((acc, item, index) => {
|
|
95821
95924
|
const itemId = String(this.resolveItemId(item, index));
|
|
95822
|
-
if (itemId !== id)
|
|
95925
|
+
if (itemId !== id) {
|
|
95926
|
+
acc.push(item);
|
|
95927
|
+
return acc;
|
|
95928
|
+
}
|
|
95823
95929
|
const next = {
|
|
95824
95930
|
...item,
|
|
95825
95931
|
hidden: false
|
|
95826
95932
|
};
|
|
95827
|
-
|
|
95828
|
-
|
|
95829
|
-
|
|
95830
|
-
|
|
95933
|
+
delete next.originalX;
|
|
95934
|
+
delete next.originalY;
|
|
95935
|
+
// 优先使用首次记录的原始尺寸;否则退回默认尺寸
|
|
95936
|
+
const width = metrics.w !== undefined ? metrics.w : next.w !== undefined ? next.w : this.defaultItemSize.w || 1;
|
|
95937
|
+
const height = metrics.h !== undefined ? metrics.h : next.h !== undefined ? next.h : this.defaultItemSize.h || 1;
|
|
95938
|
+
next.w = width;
|
|
95939
|
+
next.h = height;
|
|
95940
|
+
const placement = this.findRestoredPlacement(width, height);
|
|
95941
|
+
next.x = placement.x;
|
|
95942
|
+
next.y = placement.y;
|
|
95943
|
+
restored = next;
|
|
95944
|
+
return acc;
|
|
95945
|
+
}, []);
|
|
95946
|
+
if (!restored) return;
|
|
95947
|
+
const updatedItems = [...remaining, restored];
|
|
95831
95948
|
this.commitItemsChange(updatedItems);
|
|
95832
95949
|
},
|
|
95833
95950
|
commitItemsChange(nextItems) {
|
|
@@ -95896,8 +96013,60 @@ const GRID_ITEM_KEYS = ['x', 'y', 'w', 'h', 'i', ...OPTIONAL_LAYOUT_KEYS];
|
|
|
95896
96013
|
this.setItemPropsById(id, {
|
|
95897
96014
|
[key]: value
|
|
95898
96015
|
});
|
|
95899
|
-
}
|
|
96016
|
+
},
|
|
95900
96017
|
// *************** 这里是通用方法,业务中如果要给卡片item.props填充数据,可以统一使用该方法 End ***************
|
|
96018
|
+
|
|
96019
|
+
// 寻找“最优落点”
|
|
96020
|
+
findRestoredPlacement(width, height) {
|
|
96021
|
+
var _ref3, _ref4, _attrs$colNum2;
|
|
96022
|
+
// 从当前布局中寻找「最后一行」优先、且尽量靠右的空位
|
|
96023
|
+
const layout = Array.isArray(this.internalLayout) ? this.internalLayout : [];
|
|
96024
|
+
const attrs = this.resolvedGridLayoutAttrs || {};
|
|
96025
|
+
const columnsCandidate = (_ref3 = (_ref4 = (_attrs$colNum2 = attrs.colNum) !== null && _attrs$colNum2 !== void 0 ? _attrs$colNum2 : attrs.cols) !== null && _ref4 !== void 0 ? _ref4 : attrs.col) !== null && _ref3 !== void 0 ? _ref3 : 12;
|
|
96026
|
+
const columns = Math.max(1, this.ensureNumber(columnsCandidate, 12));
|
|
96027
|
+
const normalizedW = Math.max(1, this.ensureNumber(width, this.defaultItemSize.w || 1));
|
|
96028
|
+
const normalizedH = Math.max(1, this.ensureNumber(height, this.defaultItemSize.h || 1));
|
|
96029
|
+
if (layout.length === 0) {
|
|
96030
|
+
return {
|
|
96031
|
+
x: 0,
|
|
96032
|
+
y: 0
|
|
96033
|
+
};
|
|
96034
|
+
}
|
|
96035
|
+
const maxRowY = layout.reduce((max, item) => Math.max(max, item.y), 0);
|
|
96036
|
+
let nextRowY = maxRowY;
|
|
96037
|
+
const maxIterations = 1000;
|
|
96038
|
+
let loops = 0;
|
|
96039
|
+
while (loops < maxIterations) {
|
|
96040
|
+
for (let x = 0; x <= columns - normalizedW; x++) {
|
|
96041
|
+
if (this.isAreaFree(layout, x, nextRowY, normalizedW, normalizedH)) {
|
|
96042
|
+
return {
|
|
96043
|
+
x,
|
|
96044
|
+
y: nextRowY
|
|
96045
|
+
};
|
|
96046
|
+
}
|
|
96047
|
+
}
|
|
96048
|
+
nextRowY += 1;
|
|
96049
|
+
loops++;
|
|
96050
|
+
}
|
|
96051
|
+
return {
|
|
96052
|
+
x: 0,
|
|
96053
|
+
y: nextRowY
|
|
96054
|
+
};
|
|
96055
|
+
},
|
|
96056
|
+
isAreaFree(layout, x, y, width, height) {
|
|
96057
|
+
if (!Array.isArray(layout) || layout.length === 0) return true;
|
|
96058
|
+
return !layout.some(item => this.doRectsOverlap({
|
|
96059
|
+
x,
|
|
96060
|
+
y,
|
|
96061
|
+
w: width,
|
|
96062
|
+
h: height
|
|
96063
|
+
}, item));
|
|
96064
|
+
},
|
|
96065
|
+
doRectsOverlap(a, b) {
|
|
96066
|
+
if (!a || !b) return false;
|
|
96067
|
+
const noOverlap = a.x + a.w <= b.x || b.x + b.w <= a.x || a.y + a.h <= b.y || b.y + b.h <= a.y;
|
|
96068
|
+
return !noOverlap;
|
|
96069
|
+
}
|
|
95901
96070
|
}
|
|
95902
96071
|
});
|
|
95903
96072
|
;// ./src/components/grid-layout/ByGridLayout.vue?vue&type=script&lang=js
|
|
@@ -95912,8 +96081,8 @@ const GRID_ITEM_KEYS = ['x', 'y', 'w', 'h', 'i', ...OPTIONAL_LAYOUT_KEYS];
|
|
|
95912
96081
|
;
|
|
95913
96082
|
var ByGridLayout_component = normalizeComponent(
|
|
95914
96083
|
grid_layout_ByGridLayoutvue_type_script_lang_js,
|
|
95915
|
-
|
|
95916
|
-
|
|
96084
|
+
ByGridLayoutvue_type_template_id_3735c079_render,
|
|
96085
|
+
ByGridLayoutvue_type_template_id_3735c079_staticRenderFns,
|
|
95917
96086
|
false,
|
|
95918
96087
|
null,
|
|
95919
96088
|
null,
|