urban-filehub/resources/js/components/filemanager/directory.riot

<urban-filemanager-directory>
    <div class="file-table__row">
        <div class="file-table__column file-table__column--select" onchange={ (event) => { props.handleMarked(event, this) } }>
            <input type="checkbox" value="true" />
        </div>
        <div class="file-table__column file-table__column--filename" onclick={ (event) => { props.handleClick(event, props.file.filename) } }>
            <svg class="icon fill-primary mr-2" aria-hidden="true">
                <use xlink:href="/symbol-defs.svg#icon-folder"></use>
            </svg>
            { props.file.filename }
        </div>
        <div class="file-table__column file-table__column--date">
            <div class="file-table__inner has-text-right">{ props.file.meta.updated_at }</div>
        </div>
        <div class="file-table__column file-table__column--actions">
            <div class="file-table__inner has-text-right">
                <svg class="icon fill-success mr-1" aria-hidden="true">
                    <use xlink:href="/symbol-defs.svg#icon-eye"></use>
                </svg>
                <svg class="icon fill-success mr-1" aria-hidden="true">
                    <use xlink:href="/symbol-defs.svg#icon-download"></use>
                </svg>
                <svg class="icon fill-danger mr-1" aria-hidden="true">
                    <use xlink:href="/symbol-defs.svg#icon-delete"></use>
                </svg>
                <svg class="icon fill-grey mr-1" aria-hidden="true">
                    <use xlink:href="/symbol-defs.svg#icon-build"></use>
                </svg>
            </div>
        </div>
    </div>
    <script>

    export default {

    }

    </script>
</urban-filemanager-directory>