js-kompo-utils 1.0.17 → 1.0.19
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/.vexp/.gitattributes +2 -0
- package/.vexp/manifest.json +56 -0
- package/.vscode/settings.json +28 -0
- package/components/VlDropdown.vue +4 -1
- package/components/VlInfiniteLoad.vue +110 -0
- package/components/VlLazyHierarchy.vue +799 -0
- package/components/VlLazyTree.vue +220 -0
- package/docs/plans/2026-04-18-vl-lazy-hierarchy-generic-render.md +2093 -0
- package/package.json +1 -1
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
{
|
|
2
|
+
"file_hashes": {
|
|
3
|
+
"app.js": "7f64a7d59c7afa3dbc6f27dec809f8d938dc0d1ad135634ea2881fb0701ba398",
|
|
4
|
+
"components/data/countries.js": "e4860ce0692197243999cb8096e12417533e18b54f610fa7970b004134491a3f",
|
|
5
|
+
"components/getAllDefaultComponents.js": "37bf4c2052c449960a66320c9a6c0a6ad169d1e114c3cc9852a26f8aeb2e7d18",
|
|
6
|
+
"functions/index.js": "0f64ea33405cfc4790176ccacee0a7e69eb160d219d967a4f55fd95b6fbba6c0",
|
|
7
|
+
"functions/inputs.js": "36013b235ef807c2195beb3d9f6c2f1249b01d405c24fbdf35099368b2bb2d15",
|
|
8
|
+
"functions/loading.js": "c0698b9d12b1d75ff24e7e6301d4319f35ef27d768a41d3859ec9bb88d14bce9",
|
|
9
|
+
"kompo-ckeditor-1.0.17/index.js": "db7d32798b3a621fc228213e72b957c5d0d5ba5dbfe182010cb1667cd24299c7",
|
|
10
|
+
"kompo-ckeditor-1.0.17/mixins/CKEditor.js": "f5d3d8d2bc84481a0e0fce5cdd22c8d6e36d0165363b88781ea29ea37da234fc",
|
|
11
|
+
"kompo-ckeditor-1.0.17/mixins/CKEditorUtilities.js": "90c2badccf72ae5d4d81a9a59e8f704ee8563efcb4594ce0c2c462bcc6a87ec0",
|
|
12
|
+
"kompo-ckeditor-1.0.17/mixins/CkUploadAdapter.js": "5ec4c5dfa2089e1f53c580c5cc114b25a75ea1be0a740302ae8bb07d14c690a1",
|
|
13
|
+
"kompo-ckeditor-1.0.17/mixins/translations/en.js": "87d5aa3fa498fc6b6fbc75e6c7dc6b22859946d5ef6e2107ac25b91f2cd58bd1",
|
|
14
|
+
"kompo-ckeditor-1.0.17/mixins/translations/fr.js": "8196caab6d4379bc3e9e64f95a58a9ef618637d262872e2f5858a569896a2627",
|
|
15
|
+
"kompo-ckeditor-1.0.17/plugins/JsonBlockCommand.js": "46281f541195f564bfe0c127750fd11264a70f809b50dd2e2c2ab756edcdbfa3",
|
|
16
|
+
"kompo-ckeditor-1.0.17/plugins/JsonBlockEditing.js": "664e9289ea877758833e50a27b31250af690bbc4d0d822bda4e539157d4b1788",
|
|
17
|
+
"kompo-ckeditor-1.0.17/plugins/JsonBlockUi.js": "6110617576ec3066aba4c791cb9f1a00ea1a439e248d731763b3f7112a1eb16f",
|
|
18
|
+
"kompo-ckeditor-1.0.17/plugins/MentionPlugin.js": "a499ac0ba497e9669658f68f106df552d9ba485cb6549c9390d2075a4a6c305a",
|
|
19
|
+
"mix/buildDefaultWebpackMix.js": "9674a0b1be179f36f7f60ac61f6a810a79475c87df0ee1e45cf156e8773c6fba",
|
|
20
|
+
"orchestrator/KompoJsBuilder.js": "1afcc08bb5f16a8a522beb776158032a7b5a1bf8ea2d908ed81e000ab9108b28",
|
|
21
|
+
"raw_animations/count-up-animation.js": "768015274e6a49a676bb923321b2539c1b5647d0013ebca054a5c54b221b4b92",
|
|
22
|
+
"raw_animations/magic-poof.js": "133247a75fa2cd9170826e608f1ea297ebc04fde300473f908c788f3affb9d62",
|
|
23
|
+
"tutorials/TutorialConfig.js": "479e618dad366020191477f7edfee20cdc359be21f2ca3efe758840bdc63eee7",
|
|
24
|
+
"tutorials/TutorialEngine.js": "df8ec3bcf82e679235508a43a7ba6eb910469a6b9b05d8a24f2ad7dea68243b6",
|
|
25
|
+
"tutorials/extensions/HideIfExtension.js": "cca588ef091beda21b6a44205ce3f1f9039720cf8376522d7e7ec8b2b79b4c12",
|
|
26
|
+
"tutorials/extensions/LinkNextExtension.js": "70281989f41f547cf42c25f03f2be4715f1ce61768c4edcceb045297f187908a",
|
|
27
|
+
"tutorials/index.js": "c9823fdb78892f4ff1a8474b5e79d15638a28d99c7f824533f5d46ee0560516a",
|
|
28
|
+
"tutorials/modules/AutoNext.js": "a5cb161fd756919aeb0a583f65b65e23ae5b56fab467dff4870e27394dfc94e4",
|
|
29
|
+
"tutorials/modules/Avatar.js": "00c16b8497a7d19cbd583586e487c289da65769c29b11f6ecc91b6b8c28b6aea",
|
|
30
|
+
"tutorials/modules/Bubble.js": "bf89ac7f0f5db37b18f9a1af6daba8e856e2b0f39b3849d58a6f43710ec9cfe5",
|
|
31
|
+
"tutorials/modules/Cursor.js": "443de5e9360f9012fb00ec20207c3c9edb1d3093f8d08c6d7a2229e1079b8874",
|
|
32
|
+
"tutorials/modules/Highlight.js": "59f462a4f80a4196bc1c4a3ddc8546d060b1b699c27657d1ac9fa0c6e74deae6",
|
|
33
|
+
"tutorials/modules/HoverForcer.js": "d7a9625578c8ebdbf75736b5f43f4133a5dd23d9ec1eebacde84ecedb3e74479",
|
|
34
|
+
"tutorials/modules/Mobile.js": "ab33cba95f61f0e78c747e5231a0c8bfd0dbd41cb4a2c8b871542a6a9cb7b36c",
|
|
35
|
+
"tutorials/modules/Options.js": "436128fb49e0bc06cd638af51886d07a6c609e64c47f52761edd42bd743b56d2",
|
|
36
|
+
"tutorials/modules/Overlay.js": "7bb8327ed1fcddb29d3fcc71059d3535063c141d6ce35d5af2fdfc16a9abbb74",
|
|
37
|
+
"tutorials/modules/Scroll.js": "d7c3b6078d4c67470889dde68170242544cb6a9412d7c59ef3c7d31cc4027bdc",
|
|
38
|
+
"tutorials/modules/Typewriter.js": "863a027971a24045ff2fcf0d3bd8f4ef62212edc7fe0530949b4ddbb3eed934d",
|
|
39
|
+
"tutorials/step-builder/StepBuilderState.js": "63528c07cefe3de8f5db919106a6f0be0c3699057ce3b269e763889d01d850fa",
|
|
40
|
+
"tutorials/step-builder/utils/bezier-editor.js": "5b83d948dc2294ae4a07fc8f05b427cbfb965e1137ba5dd919a1522c8f78da2b",
|
|
41
|
+
"tutorials/step-builder/utils/code-generator.js": "a9b2d3b7e061d57c4b70db3024824b5f11c8355c84f914b1ad351b7bf0545ef3",
|
|
42
|
+
"tutorials/step-builder/utils/element-picker.js": "2130af931f1ca95d9cb67b86b824488bba46dc4b02b4db5350cdeddc1eb166c1",
|
|
43
|
+
"tutorials/utils/selectors.js": "a0326b1519bb2e16af00068e249fb2291e0451c12d21097d6e46b6ac4d1feccb",
|
|
44
|
+
"tutorials/utils/stability.js": "5f130df02df76a5500df8a62f8952cb566eca8d799d4a8cd67ff6960208cf803",
|
|
45
|
+
"tutorials/utils/svg.js": "b0becc9ba9056ab35ec3c8d4791f6653fea3dc14a75b8b6c2d181fb3c86ffad0"
|
|
46
|
+
},
|
|
47
|
+
"indexed_at_commit": "dfc32bb87f6f07bd1df0858da8b9d40bfe49d9c4",
|
|
48
|
+
"indexed_at_timestamp": "2026-04-18T15:32:32.346385200+00:00",
|
|
49
|
+
"schema_version": 3,
|
|
50
|
+
"stats": {
|
|
51
|
+
"total_edges": 337,
|
|
52
|
+
"total_files": 43,
|
|
53
|
+
"total_nodes": 221
|
|
54
|
+
},
|
|
55
|
+
"vexp_version": "2.0.11"
|
|
56
|
+
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
{
|
|
2
|
+
"files.exclude": {
|
|
3
|
+
"**/.git": true,
|
|
4
|
+
"**/.svn": true,
|
|
5
|
+
"**/.hg": true,
|
|
6
|
+
"**/.DS_Store": true,
|
|
7
|
+
"**/Thumbs.db": true,
|
|
8
|
+
"**/__pycache__": true,
|
|
9
|
+
"**/.classpath": true,
|
|
10
|
+
"**/.factorypath": true,
|
|
11
|
+
"**/.project": true,
|
|
12
|
+
"**/.settings": true,
|
|
13
|
+
"**/.vexp/daemon.pid": true,
|
|
14
|
+
"**/.vexp/daemon.sock": true,
|
|
15
|
+
"**/.vexp/daemon.pipe": true,
|
|
16
|
+
"**/.vexp/daemon.log": true,
|
|
17
|
+
"**/.vexp/vexp.log": true,
|
|
18
|
+
"**/.vexp/healthy": true,
|
|
19
|
+
"**/.vexp/mcp.port": true,
|
|
20
|
+
"**/.vexp/mcp.token": true,
|
|
21
|
+
"**/.vexp/index.db": true,
|
|
22
|
+
"**/.vexp/index.db-wal": true,
|
|
23
|
+
"**/.vexp/index.db-shm": true,
|
|
24
|
+
"**/.vexp/parent_workspace.json": true,
|
|
25
|
+
"**/.vexp/.gitignore": true,
|
|
26
|
+
"**/.vexp/.gitattributes": true
|
|
27
|
+
}
|
|
28
|
+
}
|
|
@@ -49,6 +49,7 @@ export default {
|
|
|
49
49
|
menuTop: -9999,
|
|
50
50
|
menuLeft: -9999,
|
|
51
51
|
menuRight: null,
|
|
52
|
+
inModal: false,
|
|
52
53
|
}
|
|
53
54
|
},
|
|
54
55
|
watch:{
|
|
@@ -88,7 +89,7 @@ export default {
|
|
|
88
89
|
position: 'fixed',
|
|
89
90
|
top: this.menuTop + 'px',
|
|
90
91
|
bottom: 'auto',
|
|
91
|
-
zIndex:
|
|
92
|
+
zIndex: this.inModal ? 5001 : 900,
|
|
92
93
|
transition: 'transform 0.2s ease-in-out, opacity 0.2s ease-in-out',
|
|
93
94
|
transformOrigin: (this.isUpward ? 'bottom' : 'top') + ' ' + (this.isRightAligned ? 'right' : 'left'),
|
|
94
95
|
}
|
|
@@ -154,6 +155,8 @@ export default {
|
|
|
154
155
|
const root = this.$refs.dropdownRoot
|
|
155
156
|
if (!menu) return
|
|
156
157
|
|
|
158
|
+
this.inModal = !!(root && root.closest('.kompoModal'))
|
|
159
|
+
|
|
157
160
|
// Transfer scroll styles from root before teleporting
|
|
158
161
|
if (root && root.classList.contains('dropdown-with-scroll')) {
|
|
159
162
|
const maxHeight = getComputedStyle(root).getPropertyValue('--dropdown-max-height').trim()
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<button
|
|
3
|
+
type="button"
|
|
4
|
+
class="vl-infinite-load"
|
|
5
|
+
:class="buttonClass"
|
|
6
|
+
:disabled="disabled || loading"
|
|
7
|
+
@click="$emit('visible')"
|
|
8
|
+
>
|
|
9
|
+
<span v-if="loading" class="vl-infinite-load__spinner" aria-hidden="true"></span>
|
|
10
|
+
<span>{{ loading ? loadingLabel : label }}</span>
|
|
11
|
+
</button>
|
|
12
|
+
</template>
|
|
13
|
+
|
|
14
|
+
<script>
|
|
15
|
+
export default {
|
|
16
|
+
name: 'VlInfiniteLoad',
|
|
17
|
+
props: {
|
|
18
|
+
loading: { type: Boolean, default: false },
|
|
19
|
+
disabled: { type: Boolean, default: false },
|
|
20
|
+
label: { type: String, default: 'Show more' },
|
|
21
|
+
loadingLabel: { type: String, default: 'Loading...' },
|
|
22
|
+
buttonClass: { type: [String, Array, Object], default: '' },
|
|
23
|
+
rootMargin: { type: String, default: '96px' },
|
|
24
|
+
},
|
|
25
|
+
data() {
|
|
26
|
+
return {
|
|
27
|
+
observer: null,
|
|
28
|
+
}
|
|
29
|
+
},
|
|
30
|
+
watch: {
|
|
31
|
+
loading() {
|
|
32
|
+
this.$nextTick(this.checkVisible)
|
|
33
|
+
},
|
|
34
|
+
disabled() {
|
|
35
|
+
this.$nextTick(this.checkVisible)
|
|
36
|
+
},
|
|
37
|
+
},
|
|
38
|
+
mounted() {
|
|
39
|
+
this.$nextTick(this.observe)
|
|
40
|
+
},
|
|
41
|
+
beforeDestroy() {
|
|
42
|
+
this.disconnect()
|
|
43
|
+
},
|
|
44
|
+
methods: {
|
|
45
|
+
observe() {
|
|
46
|
+
if (!this.$el || this.observer) return
|
|
47
|
+
|
|
48
|
+
if (!('IntersectionObserver' in window)) {
|
|
49
|
+
this.checkVisible()
|
|
50
|
+
return
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
this.observer = new IntersectionObserver(this.onIntersect, {
|
|
54
|
+
root: null,
|
|
55
|
+
rootMargin: this.rootMargin,
|
|
56
|
+
threshold: 0,
|
|
57
|
+
})
|
|
58
|
+
|
|
59
|
+
this.observer.observe(this.$el)
|
|
60
|
+
},
|
|
61
|
+
disconnect() {
|
|
62
|
+
if (!this.observer) return
|
|
63
|
+
|
|
64
|
+
this.observer.disconnect()
|
|
65
|
+
this.observer = null
|
|
66
|
+
},
|
|
67
|
+
onIntersect(entries) {
|
|
68
|
+
if (this.disabled || this.loading) return
|
|
69
|
+
|
|
70
|
+
if (entries.some(entry => entry.isIntersecting)) {
|
|
71
|
+
this.$emit('visible')
|
|
72
|
+
}
|
|
73
|
+
},
|
|
74
|
+
checkVisible() {
|
|
75
|
+
if (!this.$el || this.disabled || this.loading) return
|
|
76
|
+
|
|
77
|
+
const rect = this.$el.getBoundingClientRect()
|
|
78
|
+
const viewportHeight = window.innerHeight || document.documentElement.clientHeight
|
|
79
|
+
|
|
80
|
+
if (rect.top <= viewportHeight + 96 && rect.bottom >= -96) {
|
|
81
|
+
this.$emit('visible')
|
|
82
|
+
}
|
|
83
|
+
},
|
|
84
|
+
},
|
|
85
|
+
}
|
|
86
|
+
</script>
|
|
87
|
+
|
|
88
|
+
<style>
|
|
89
|
+
.vl-infinite-load {
|
|
90
|
+
display: inline-flex;
|
|
91
|
+
align-items: center;
|
|
92
|
+
justify-content: center;
|
|
93
|
+
gap: 0.4rem;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.vl-infinite-load__spinner {
|
|
97
|
+
width: 0.8rem;
|
|
98
|
+
height: 0.8rem;
|
|
99
|
+
border: 2px solid currentColor;
|
|
100
|
+
border-right-color: transparent;
|
|
101
|
+
border-radius: 9999px;
|
|
102
|
+
animation: vl-infinite-load-spin 0.65s linear infinite;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
@keyframes vl-infinite-load-spin {
|
|
106
|
+
to {
|
|
107
|
+
transform: rotate(360deg);
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
</style>
|