Lit-finder NPM

Finder MacOS by Lit

Installation

npm install lit-finder

Example

<template>
    <div>
        <finder
            :tree="tree"
            :handleItemClick="handleItemClick"
        >
            <template v-slot:finder-file-detail="{data}">
                {{data.label}}
            </template>
        </finder>
    </div>
</template>

<script>
import Finder from 'lit-finder';

export default {
    components: {Finder},
    data: () => ({
        tree: [
            {
                label: 'Parent 01',
                type: 'folder',
                children: [
                    {label: 'Parent 01 - Child 1', syncData: true, type: 'folder'},
                    {label: 'Parent 01 - Child 2', type: 'file'},
                ],
                suffix: 10
            },
            {
                label: 'Parent 02',
                type: 'folder',
                children: [
                    {label: 'Parent 01 - Child 1', type: 'file'},
                    {label: 'Parent 01 - Child 2', type: 'file'},
                ]
            },
        ]
    }),
    methods: {
        async handleItemClick(nodeData) {
            // do something, return Promise
            return Promise.resolve([
                {
                    label: 'New node 01'
                },
                {
                    label: 'New node 02'
                }
            ])
        }
    }
}
</script>

Props

Name	Type	Default
tree	Array	[]	Base data of finder. Array of node
handleItemClick	Function	null	Handle event when click on node(have two params includes: nodeData, options)
options	Object	{}	Init finder options(detail below)

Node properties

Key	Type	Default value
label	String	required	Name of node
type	String	require	folder,file: show node with type file or folder and css
children	Array	[]	Children node
suffix	String,Number	''	suffix content
syncData	Boolean	false	if true: define handleItemClick function to handle
suffixClass	String	''	style for suffix content

Init options

Key	Type	Default value
recursiveAll	Boolean	false	Expand all nodes.
suffixClass	String	''	Class of suffix content(When node have suffix options).
handleItemClick	Function	null	Handle event when click into node
containerClass	String	''	Extra class of finder container
wrapperClass	String	''	Custom wrapper class

Actions

Rerender

<template>
    <finder
        ...
        ref="finder"
    >
    
    </finder>
</template>

<script>
export default {
    // ...,
    data: () => ({
        keyword: ''
    }),
    methods: {
        someHandle() {
            // call something to get data
            const data = [
                {
                    label: 'Parent 01',
                    type: 'folder',
                    children: [
                        {label: 'Parent 01 - Child 1', syncData: true, type: 'folder'},
                        {label: 'Parent 01 - Child 2', type: 'file'},
                    ],
                    suffix: 10
                }
            ]
    
            /** render with keyword */
            this.$refs.finder.reRender(data, {
                keyword: this.keyword,
                noData: 'No data specific' // you can use node element instead string
                // highlightFile: true,
                // highlightFolder: false,
            })
        }
    }
}
</script>

Rerender options:

Key	Type	Default value	Explain
keyword	String	''	highlight name file or folder match which match keyword
noData	String, Node Element	'No data specific!'	Show message no data when the finder have no data
highlightFile	Boolean	true	default highlight word inside file name which match keyword
highlighFolder	Boolean	false	highlight folder name like the way highlightFile works