js-kompo-utils 1.0.17 → 1.0.18

package/components/VlLazyTree.vue

@@ -0,0 +1,220 @@
+<template>
+    <component :is="tag" class="vl-lazy-tree" :class="treeClass">
+        <template v-for="item in visibleItems">
+            <slot
+                v-if="item.type === 'node'"
+                name="node"
+                v-bind="item"
+                :toggle="toggleFor(item)"
+                :load-more="loadMoreFor(item)"
+            >
+                <div class="vl-lazy-tree__node" :style="item.indentStyle">
+                    <button
+                        v-if="item.hasChildren"
+                        type="button"
+                        class="vl-lazy-tree__toggle"
+                        :aria-expanded="item.isExpanded ? 'true' : 'false'"
+                        @click="toggle(item)"
+                    >
+                        <svg
+                            class="vl-lazy-tree__chevron"
+                            :class="{ 'vl-lazy-tree__chevron--open': item.isExpanded }"
+                            viewBox="0 0 20 20"
+                            aria-hidden="true"
+                        >
+                            <path d="M7.5 5l5 5-5 5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                        </svg>
+                    </button>
+                    <span>{{ item.node.label || item.node.name }}</span>
+                </div>
+            </slot>
+
+            <slot
+                v-else-if="item.type === 'loading'"
+                name="loading"
+                v-bind="item"
+            >
+                <div class="vl-lazy-tree__loading" :style="item.indentStyle">
+                    {{ loadingLabel }}
+                </div>
+            </slot>
+
+            <slot
+                v-else-if="item.type === 'load-more'"
+                name="load-more"
+                v-bind="item"
+                :load-more="loadMoreFor(item)"
+            >
+                <vl-infinite-load
+                    class="vl-lazy-tree__load-more"
+                    :loading="item.isLoading"
+                    :disabled="item.isLoading"
+                    :label="showMoreLabel"
+                    :loading-label="loadingLabel"
+                    @visible="loadMore(item)"
+                />
+            </slot>
+        </template>
+    </component>
+</template>
+
+<script>
+import VlInfiniteLoad from './VlInfiniteLoad.vue'
+
+const ROOT_KEY = 'root'
+
+export default {
+    name: 'VlLazyTree',
+    components: { VlInfiniteLoad },
+    props: {
+        tag: { type: String, default: 'div' },
+        treeClass: { type: [String, Array, Object], default: '' },
+        rootKey: { type: String, default: ROOT_KEY },
+        rootNodeIds: { type: Array, default: () => [] },
+        nodesById: { type: Object, required: true },
+        childrenByParent: { type: Object, required: true },
+        pagingByParent: { type: Object, default: () => ({}) },
+        expanded: { type: Object, default: () => ({}) },
+        loadingParents: { type: Object, default: () => ({}) },
+        includeRootPager: { type: Boolean, default: true },
+        baseIndent: { type: Number, default: 0 },
+        indentStep: { type: Number, default: 0.65 },
+        maxIndentDepth: { type: Number, default: 5 },
+        loadingLabel: { type: String, default: 'Loading...' },
+        showMoreLabel: { type: String, default: 'Show more' },
+    },
+    computed: {
+        visibleItems() {
+            const items = []
+
+            this.appendNodes(items, this.rootNodeIds, 0)
+
+            if (this.includeRootPager) {
+                this.appendLoadMore(items, this.rootKey, null, 0, true)
+            }
+
+            return items
+        },
+    },
+    methods: {
+        appendNodes(items, nodeIds, depth) {
+            nodeIds.forEach(nodeId => {
+                const node = this.nodesById[nodeId]
+                if (!node) return
+
+                const childIds = this.childIds(nodeId)
+                const paging = this.paging(nodeId)
+                const item = {
+                    type: 'node',
+                    key: `node:${nodeId}`,
+                    nodeId,
+                    node,
+                    depth,
+                    childIds,
+                    paging,
+                    hasChildren: !!node.hasChildren || childIds.length > 0,
+                    isExpanded: this.isExpanded(nodeId),
+                    isLoading: this.isLoading(nodeId),
+                    indentStyle: this.indentStyle(depth),
+                }
+
+                items.push(item)
+
+                if (!item.isExpanded) return
+
+                if (item.isLoading && childIds.length === 0) {
+                    items.push({
+                        type: 'loading',
+                        key: `loading:${nodeId}`,
+                        parentId: nodeId,
+                        parentNode: node,
+                        depth: depth + 1,
+                        indentStyle: this.indentStyle(depth + 1),
+                    })
+                }
+
+                this.appendNodes(items, childIds, depth + 1)
+                this.appendLoadMore(items, nodeId, node, depth + 1, false)
+            })
+        },
+        appendLoadMore(items, parentId, parentNode, depth, isRoot) {
+            const paging = this.paging(parentId)
+            if (!paging || paging.nextCursor === null) return
+
+            items.push({
+                type: 'load-more',
+                key: `load-more:${parentId}:${paging.nextCursor}`,
+                parentId,
+                parentNode,
+                root: isRoot,
+                depth,
+                paging,
+                isLoading: this.isLoading(parentId),
+                indentStyle: this.indentStyle(depth),
+            })
+        },
+        childIds(parentId) {
+            return this.childrenByParent[parentId] || []
+        },
+        paging(parentId) {
+            return this.pagingByParent[parentId] || null
+        },
+        isExpanded(nodeId) {
+            return !!this.expanded[nodeId]
+        },
+        isLoading(parentId) {
+            return !!this.loadingParents[parentId]
+        },
+        indentStyle(depth) {
+            return { paddingLeft: `${this.baseIndent + (Math.min(depth, this.maxIndentDepth) * this.indentStep)}rem` }
+        },
+        toggle(item) {
+            if (!item || !item.hasChildren) return
+
+            this.$emit('toggle', item.node)
+        },
+        loadMore(item) {
+            if (!item || item.isLoading) return
+
+            this.$emit('load-more', item)
+        },
+        toggleFor(item) {
+            return () => this.toggle(item)
+        },
+        loadMoreFor(item) {
+            return () => this.loadMore(item)
+        },
+    },
+}
+</script>
+
+<style>
+.vl-lazy-tree {
+    display: block;
+}
+
+.vl-lazy-tree__node {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+}
+
+.vl-lazy-tree__toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+}
+
+.vl-lazy-tree__chevron {
+    width: 0.9rem;
+    height: 0.9rem;
+    transition: transform 0.2s ease;
+}
+
+.vl-lazy-tree__chevron--open {
+    transform: rotate(90deg);
+}
+</style>