@tmagic/editor 1.3.0-beta.6 → 1.3.0-beta.7

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.
Files changed (34) hide show
  1. package/dist/style.css +57 -56
  2. package/dist/tmagic-editor.js +487 -390
  3. package/dist/tmagic-editor.js.map +1 -1
  4. package/dist/tmagic-editor.umd.cjs +505 -408
  5. package/dist/tmagic-editor.umd.cjs.map +1 -1
  6. package/package.json +10 -10
  7. package/src/Editor.vue +8 -0
  8. package/src/components/Tree.vue +66 -0
  9. package/src/components/TreeNode.vue +142 -0
  10. package/src/layouts/sidebar/Sidebar.vue +13 -0
  11. package/src/layouts/sidebar/data-source/DataSourceList.vue +4 -2
  12. package/src/layouts/sidebar/data-source/DataSourceListPanel.vue +8 -2
  13. package/src/layouts/sidebar/layer/LayerPanel.vue +40 -31
  14. package/src/layouts/sidebar/layer/use-click.ts +105 -0
  15. package/src/layouts/sidebar/layer/use-drag.ts +1 -1
  16. package/src/layouts/sidebar/layer/use-filter.ts +1 -12
  17. package/src/layouts/sidebar/layer/use-keybinding.ts +6 -2
  18. package/src/layouts/sidebar/layer/use-node-status.ts +4 -2
  19. package/src/theme/layer-panel.scss +2 -74
  20. package/src/theme/theme.scss +1 -0
  21. package/src/theme/tree.scss +72 -0
  22. package/src/type.ts +16 -1
  23. package/src/utils/tree.ts +15 -0
  24. package/types/{layouts/sidebar/layer/LayerNode.vue.d.ts → components/Tree.vue.d.ts} +19 -17
  25. package/types/components/TreeNode.vue.d.ts +47 -0
  26. package/types/layouts/sidebar/data-source/DataSourceList.vue.d.ts +2 -6
  27. package/types/layouts/sidebar/data-source/DataSourceListPanel.vue.d.ts +7 -1
  28. package/types/layouts/sidebar/layer/LayerPanel.vue.d.ts +1 -1
  29. package/types/layouts/sidebar/layer/use-click.d.ts +106 -0
  30. package/types/layouts/sidebar/layer/use-filter.d.ts +0 -1
  31. package/types/layouts/sidebar/layer/use-keybinding.d.ts +2 -1
  32. package/types/type.d.ts +20 -1
  33. package/types/utils/tree.d.ts +3 -0
  34. package/src/layouts/sidebar/layer/LayerNode.vue +0 -208
package/dist/style.css CHANGED
@@ -244,65 +244,11 @@
244
244
  .m-editor-sidebar .fold-icon:hover {
245
245
  background: rgba(0, 0, 0, 0.2);
246
246
  }
247
- .magic-editor-layer-panel {
247
+ .m-editor-layer-panel {
248
248
  background: #ffffff;
249
249
  }
250
- .magic-editor-layer-panel .magic-editor-layer-tree {
250
+ .m-editor-layer-panel .m-editor-tree {
251
251
  padding-top: 48px;
252
- background-color: #ffffff;
253
- color: #313a40;
254
- font-size: 13px;
255
- }
256
- .magic-editor-layer-panel .magic-editor-layer-tree .magic-editor-layer-node {
257
- cursor: pointer;
258
- white-space: nowrap;
259
- }
260
- .magic-editor-layer-panel .magic-editor-layer-tree .magic-editor-layer-node .layer-node {
261
- display: flex;
262
- align-items: center;
263
- }
264
- .magic-editor-layer-panel .magic-editor-layer-tree .magic-editor-layer-node .layer-node:hover {
265
- background-color: #f3f5f9;
266
- color: #313a40;
267
- }
268
- .magic-editor-layer-panel .magic-editor-layer-tree .magic-editor-layer-node .layer-node.selected {
269
- background-color: #2882e0;
270
- color: #f3f5f9;
271
- }
272
- .magic-editor-layer-panel .magic-editor-layer-tree .magic-editor-layer-node .layer-node.drag-inner .layer-node-content {
273
- background-color: rgba(40, 130, 224, 0.5);
274
- color: #f3f5f9;
275
- }
276
- .magic-editor-layer-panel .magic-editor-layer-tree .magic-editor-layer-node .layer-node.drag-before .layer-node-content {
277
- border-top-color: rgba(40, 130, 224, 0.5);
278
- }
279
- .magic-editor-layer-panel .magic-editor-layer-tree .magic-editor-layer-node .layer-node.drag-after .layer-node-content {
280
- border-bottom-color: rgba(40, 130, 224, 0.5);
281
- }
282
- .magic-editor-layer-panel .magic-editor-layer-tree .magic-editor-layer-node .layer-node .expand-icon {
283
- padding: 4px;
284
- box-sizing: content-box;
285
- font-size: 14px;
286
- }
287
- .magic-editor-layer-panel .magic-editor-layer-tree .magic-editor-layer-node .layer-node .layer-node-content {
288
- display: flex;
289
- flex: 1;
290
- justify-content: space-between;
291
- height: 22px;
292
- border-top: 2px solid transparent;
293
- border-bottom: 2px solid transparent;
294
- }
295
- .magic-editor-layer-panel .magic-editor-layer-tree .magic-editor-layer-node .layer-node .layer-node-content .layer-node-label {
296
- line-height: 22px;
297
- flex: 1;
298
- width: 100px;
299
- overflow: hidden;
300
- text-overflow: ellipsis;
301
- }
302
- .magic-editor-layer-panel .magic-editor-layer-tree .magic-editor-layer-node .layer-node .layer-node-tool {
303
- margin-right: 15px;
304
- display: flex;
305
- align-items: center;
306
252
  }
307
253
  .ui-component-panel.tmagic-design-collapse {
308
254
  height: 100%;
@@ -845,6 +791,61 @@
845
791
  .m-fileds-key-value-delete {
846
792
  margin-left: 10px;
847
793
  }
794
+ .m-editor-tree {
795
+ color: #313a40;
796
+ font-size: 13px;
797
+ }
798
+ .m-editor-tree .m-editor-tree-node {
799
+ cursor: pointer;
800
+ white-space: nowrap;
801
+ }
802
+ .m-editor-tree .m-editor-tree-node .tree-node {
803
+ display: flex;
804
+ align-items: center;
805
+ }
806
+ .m-editor-tree .m-editor-tree-node .tree-node:hover {
807
+ background-color: #f3f5f9;
808
+ color: #313a40;
809
+ }
810
+ .m-editor-tree .m-editor-tree-node .tree-node.selected {
811
+ background-color: #2882e0;
812
+ color: #f3f5f9;
813
+ }
814
+ .m-editor-tree .m-editor-tree-node .tree-node.drag-inner .tree-node-content {
815
+ background-color: rgba(40, 130, 224, 0.5);
816
+ color: #f3f5f9;
817
+ }
818
+ .m-editor-tree .m-editor-tree-node .tree-node.drag-before .tree-node-content {
819
+ border-top-color: rgba(40, 130, 224, 0.5);
820
+ }
821
+ .m-editor-tree .m-editor-tree-node .tree-node.drag-after .tree-node-content {
822
+ border-bottom-color: rgba(40, 130, 224, 0.5);
823
+ }
824
+ .m-editor-tree .m-editor-tree-node .tree-node .expand-icon {
825
+ padding: 4px;
826
+ box-sizing: content-box;
827
+ font-size: 14px;
828
+ }
829
+ .m-editor-tree .m-editor-tree-node .tree-node .tree-node-content {
830
+ display: flex;
831
+ flex: 1;
832
+ justify-content: space-between;
833
+ height: 22px;
834
+ border-top: 2px solid transparent;
835
+ border-bottom: 2px solid transparent;
836
+ }
837
+ .m-editor-tree .m-editor-tree-node .tree-node .tree-node-content .tree-node-label {
838
+ line-height: 22px;
839
+ flex: 1;
840
+ width: 100px;
841
+ overflow: hidden;
842
+ text-overflow: ellipsis;
843
+ }
844
+ .m-editor-tree .m-editor-tree-node .tree-node .tree-node-tool {
845
+ margin-right: 15px;
846
+ display: flex;
847
+ align-items: center;
848
+ }
848
849
  .fade-enter-active,
849
850
  .fade-leave-active {
850
851
  transition: opacity 0.5s;