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

<urban-filemanager-file>
    <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">
            { props.file.filename }
        </div>
        <div class="file-table__column file-table__column--size">
            <div class="file-table__inner has-text-right width-100">{ props.file.meta.size }</div>
        </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" disabled onclick={ () => { props.actions.handlePreview(event, this) } }>
                    <use xlink:href="/symbol-defs.svg#icon-eye"></use>
                </svg>
                <svg class="icon fill-success mr-1" aria-hidden="true" onclick={ () => { props.actions.handleDownload(event, this) } }>
                    <use xlink:href="/symbol-defs.svg#icon-download"></use>
                </svg>
                <svg class="icon fill-danger mr-1" aria-hidden="true" onclick={ () => { props.actions.handleDelete(event, this) } }>
                    <use xlink:href="/symbol-defs.svg#icon-delete"></use>
                </svg>
                <svg class="icon fill-grey mr-1" aria-hidden="true" onclick={ () => { props.actions.handleMarked(event, this) } }>
                    <use xlink:href="/symbol-defs.svg#icon-build"></use>
                </svg>
            </div>
        </div>
    </div>
    <script>

    export default {

    }

    </script>
</urban-filemanager-file>